From 14002d98caec7bd8aab068e112e4aa65b36e2ea3 Mon Sep 17 00:00:00 2001
From: anubra266 <anubra266@gmail.com>
Date: Tue, 3 Jun 2025 05:19:59 -0700
Subject: [PATCH 01/20] feat: add cascader

---
 .changeset/blue-pumas-type.md                 |   5 +
 examples/next-ts/package.json                 |   1 +
 examples/next-ts/pages/cascader.tsx           | 180 ++++
 packages/machines/cascader/package.json       |  43 +
 .../machines/cascader/src/cascader.anatomy.ts |  20 +
 .../cascader/src/cascader.collection.ts       |  13 +
 .../machines/cascader/src/cascader.connect.ts | 365 +++++++
 .../machines/cascader/src/cascader.dom.ts     |  33 +
 .../machines/cascader/src/cascader.machine.ts | 906 ++++++++++++++++++
 .../machines/cascader/src/cascader.props.ts   |  34 +
 .../machines/cascader/src/cascader.types.ts   | 296 ++++++
 packages/machines/cascader/src/index.ts       |  20 +
 packages/machines/cascader/tsconfig.json      |  11 +
 pnpm-lock.yaml                                |  44 +-
 shared/src/controls.ts                        |  18 +
 shared/src/css/cascader.css                   | 134 +++
 shared/src/routes.ts                          |   1 +
 shared/src/style.css                          |   1 +
 18 files changed, 2120 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/blue-pumas-type.md
 create mode 100644 examples/next-ts/pages/cascader.tsx
 create mode 100644 packages/machines/cascader/package.json
 create mode 100644 packages/machines/cascader/src/cascader.anatomy.ts
 create mode 100644 packages/machines/cascader/src/cascader.collection.ts
 create mode 100644 packages/machines/cascader/src/cascader.connect.ts
 create mode 100644 packages/machines/cascader/src/cascader.dom.ts
 create mode 100644 packages/machines/cascader/src/cascader.machine.ts
 create mode 100644 packages/machines/cascader/src/cascader.props.ts
 create mode 100644 packages/machines/cascader/src/cascader.types.ts
 create mode 100644 packages/machines/cascader/src/index.ts
 create mode 100644 packages/machines/cascader/tsconfig.json
 create mode 100644 shared/src/css/cascader.css

diff --git a/.changeset/blue-pumas-type.md b/.changeset/blue-pumas-type.md
new file mode 100644
index 0000000000..3041a66f88
--- /dev/null
+++ b/.changeset/blue-pumas-type.md
@@ -0,0 +1,5 @@
+---
+"@zag-js/cascader": patch
+---
+
+Add cascader machine
diff --git a/examples/next-ts/package.json b/examples/next-ts/package.json
index 2d3412c163..99e303dfd8 100644
--- a/examples/next-ts/package.json
+++ b/examples/next-ts/package.json
@@ -22,6 +22,7 @@
     "@zag-js/auto-resize": "workspace:*",
     "@zag-js/avatar": "workspace:*",
     "@zag-js/carousel": "workspace:*",
+    "@zag-js/cascader": "workspace:*",
     "@zag-js/checkbox": "workspace:*",
     "@zag-js/clipboard": "workspace:*",
     "@zag-js/collapsible": "workspace:*",
diff --git a/examples/next-ts/pages/cascader.tsx b/examples/next-ts/pages/cascader.tsx
new file mode 100644
index 0000000000..6d5feb2d53
--- /dev/null
+++ b/examples/next-ts/pages/cascader.tsx
@@ -0,0 +1,180 @@
+import { normalizeProps, useMachine } from "@zag-js/react"
+import { cascaderControls } from "@zag-js/shared"
+import * as cascader from "@zag-js/cascader"
+import { ChevronDownIcon, ChevronRightIcon, XIcon } from "lucide-react"
+import { useId } from "react"
+import { StateVisualizer } from "../components/state-visualizer"
+import { Toolbar } from "../components/toolbar"
+import { useControls } from "../hooks/use-controls"
+
+interface Node {
+  value: string
+  label: string
+  children?: Node[]
+}
+
+const collection = cascader.collection<Node>({
+  nodeToValue: (node) => node.value,
+  nodeToString: (node) => node.label,
+  rootNode: {
+    value: "ROOT",
+    label: "",
+    children: [
+      {
+        value: "fruits",
+        label: "Fruits",
+        children: [
+          {
+            value: "citrus",
+            label: "Citrus",
+            children: [
+              { value: "orange", label: "Orange" },
+              { value: "lemon", label: "Lemon" },
+              { value: "lime", label: "Lime" },
+            ],
+          },
+          {
+            value: "berries",
+            label: "Berries",
+            children: [
+              { value: "strawberry", label: "Strawberry" },
+              { value: "blueberry", label: "Blueberry" },
+              { value: "raspberry", label: "Raspberry" },
+            ],
+          },
+          { value: "apple", label: "Apple" },
+          { value: "banana", label: "Banana" },
+        ],
+      },
+      {
+        value: "vegetables",
+        label: "Vegetables",
+        children: [
+          {
+            value: "leafy",
+            label: "Leafy Greens",
+            children: [
+              { value: "spinach", label: "Spinach" },
+              { value: "lettuce", label: "Lettuce" },
+              { value: "kale", label: "Kale" },
+            ],
+          },
+          {
+            value: "root",
+            label: "Root Vegetables",
+            children: [
+              { value: "carrot", label: "Carrot" },
+              { value: "potato", label: "Potato" },
+              { value: "onion", label: "Onion" },
+            ],
+          },
+          { value: "tomato", label: "Tomato" },
+          { value: "cucumber", label: "Cucumber" },
+        ],
+      },
+      {
+        value: "grains",
+        label: "Grains",
+        children: [
+          { value: "rice", label: "Rice" },
+          { value: "wheat", label: "Wheat" },
+          { value: "oats", label: "Oats" },
+        ],
+      },
+    ],
+  },
+})
+
+export default function Page() {
+  const controls = useControls(cascaderControls)
+
+  const service = useMachine(cascader.machine, {
+    id: useId(),
+    collection,
+    placeholder: "Select food category",
+    onHighlightChange(details) {
+      console.log("onHighlightChange", details)
+    },
+    onValueChange(details) {
+      console.log("onChange", details)
+    },
+    onOpenChange(details) {
+      console.log("onOpenChange", details)
+    },
+    ...controls.context,
+  })
+
+  const api = cascader.connect(service, normalizeProps)
+
+  const renderLevel = (level: number) => {
+    const levelValues = api.getLevelValues(level)
+    if (levelValues.length === 0) return null
+
+    return (
+      <div key={level} {...api.getLevelProps({ level })}>
+        <div {...api.getLevelContentProps({ level })}>
+          {levelValues.map((value) => {
+            const itemState = api.getItemState({ value })
+            const node = collection.findNode(value)
+
+            return (
+              <div key={value} {...api.getItemProps({ value })}>
+                <span {...api.getItemTextProps({ value })}>{node?.label}</span>
+                {itemState.hasChildren && (
+                  <span {...api.getItemIndicatorProps({ value })}>
+                    <ChevronRightIcon size={16} />
+                  </span>
+                )}
+              </div>
+            )
+          })}
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <>
+      <main className="cascader">
+        <div {...api.getRootProps()}>
+          <label {...api.getLabelProps()}>Food Categories</label>
+
+          <div {...api.getControlProps()}>
+            <button {...api.getTriggerProps()}>
+              <span {...api.getValueTextProps()}>{api.valueText}</span>
+              <span {...api.getIndicatorProps()}>
+                <ChevronDownIcon size={16} />
+              </span>
+            </button>
+
+            {api.value.length > 0 && (
+              <button {...api.getClearTriggerProps()}>
+                <XIcon size={16} />
+              </button>
+            )}
+          </div>
+
+          <div {...api.getPositionerProps()}>
+            <div {...api.getContentProps()}>
+              {Array.from({ length: api.getLevelDepth() }, (_, level) => renderLevel(level))}
+            </div>
+          </div>
+        </div>
+
+        <div style={{ marginTop: "20px" }}>
+          <h3>Selected Value:</h3>
+          <pre>{JSON.stringify(api.value, null, 2)}</pre>
+        </div>
+
+        <div style={{ marginTop: "20px" }}>
+          <h3>Highlighted Path:</h3>
+          <pre>{JSON.stringify(api.highlightedPath, null, 2)}</pre>
+        </div>
+      </main>
+
+      <Toolbar controls={controls.ui}>
+        <StateVisualizer state={service} omit={["collection"]} />
+      </Toolbar>
+    </>
+  )
+}
diff --git a/packages/machines/cascader/package.json b/packages/machines/cascader/package.json
new file mode 100644
index 0000000000..0592e9d0a4
--- /dev/null
+++ b/packages/machines/cascader/package.json
@@ -0,0 +1,43 @@
+{
+    "name": "@zag-js/cascader",
+    "version": "0.74.2",
+    "description": "Core logic for the cascader widget implemented as a state machine",
+    "keywords": [
+        "js",
+        "machine",
+        "xstate",
+        "statechart",
+        "component",
+        "chakra ui",
+        "cascader"
+    ],
+    "author": "Abraham Aremu <anubra266@gmail.com>",
+    "homepage": "https://github.com/chakra-ui/zag#readme",
+    "license": "MIT",
+    "main": "src/index.ts",
+    "repository": "https://github.com/chakra-ui/zag/tree/main/packages/machines/cascader",
+    "sideEffects": false,
+    "files": [
+        "dist"
+    ],
+    "publishConfig": {
+        "access": "public"
+    },
+    "bugs": {
+        "url": "https://github.com/chakra-ui/zag/issues"
+    },
+    "dependencies": {
+        "@zag-js/anatomy": "workspace:*",
+        "@zag-js/collection": "workspace:*",
+        "@zag-js/core": "workspace:*",
+        "@zag-js/dismissable": "workspace:*",
+        "@zag-js/dom-query": "workspace:*",
+        "@zag-js/popper": "workspace:*",
+        "@zag-js/types": "workspace:*",
+        "@zag-js/utils": "workspace:*"
+    },
+    "devDependencies": {
+        "clean-package": "2.2.0"
+    },
+    "clean-package": "../../../clean-package.config.json"
+}
\ No newline at end of file
diff --git a/packages/machines/cascader/src/cascader.anatomy.ts b/packages/machines/cascader/src/cascader.anatomy.ts
new file mode 100644
index 0000000000..066353fedd
--- /dev/null
+++ b/packages/machines/cascader/src/cascader.anatomy.ts
@@ -0,0 +1,20 @@
+import { createAnatomy } from "@zag-js/anatomy"
+
+export const anatomy = createAnatomy("cascader").parts(
+  "root",
+  "label",
+  "control",
+  "trigger",
+  "indicator",
+  "valueText",
+  "clearTrigger",
+  "positioner",
+  "content",
+  "level",
+  "levelContent",
+  "item",
+  "itemText",
+  "itemIndicator",
+)
+
+export const parts = anatomy.build()
diff --git a/packages/machines/cascader/src/cascader.collection.ts b/packages/machines/cascader/src/cascader.collection.ts
new file mode 100644
index 0000000000..f3edaa82b6
--- /dev/null
+++ b/packages/machines/cascader/src/cascader.collection.ts
@@ -0,0 +1,13 @@
+import { TreeCollection, type TreeNode, type TreeCollectionOptions } from "@zag-js/collection"
+
+export type { TreeNode }
+
+export const collection = <T extends TreeNode = TreeNode>(options: TreeCollectionOptions<T>): TreeCollection<T> => {
+  return new TreeCollection(options)
+}
+
+collection.empty = <T extends TreeNode = TreeNode>(): TreeCollection<T> => {
+  return new TreeCollection({
+    rootNode: { value: "ROOT", children: [] } as T,
+  })
+}
diff --git a/packages/machines/cascader/src/cascader.connect.ts b/packages/machines/cascader/src/cascader.connect.ts
new file mode 100644
index 0000000000..4eb9842b79
--- /dev/null
+++ b/packages/machines/cascader/src/cascader.connect.ts
@@ -0,0 +1,365 @@
+import { dataAttr, getEventKey, isLeftClick } from "@zag-js/dom-query"
+import { getPlacementStyles } from "@zag-js/popper"
+import type { NormalizeProps, PropTypes } from "@zag-js/types"
+import type { Service } from "@zag-js/core"
+import { parts } from "./cascader.anatomy"
+import { dom } from "./cascader.dom"
+import type { CascaderApi, CascaderSchema, ItemProps, ItemState, LevelProps } from "./cascader.types"
+
+export function connect<T extends PropTypes>(
+  service: Service<CascaderSchema>,
+  normalize: NormalizeProps<T>,
+): CascaderApi<T> {
+  const { send, context, prop, scope, computed, state } = service
+
+  const collection = prop("collection")
+  const value = context.get("value")
+  const open = state.hasTag("open")
+  const focused = state.matches("focused")
+  const highlightedPath = context.get("highlightedPath")
+  const currentPlacement = context.get("currentPlacement")
+  const isDisabled = computed("isDisabled")
+  const isInteractive = computed("isInteractive")
+  const valueText = computed("valueText")
+  const levelDepth = computed("levelDepth")
+
+  const popperStyles = getPlacementStyles({
+    ...prop("positioning"),
+    placement: currentPlacement,
+  })
+
+  return {
+    collection,
+    value,
+    valueText,
+    highlightedPath,
+    open,
+    focused,
+
+    setValue(value: string[][]) {
+      send({ type: "VALUE.SET", value })
+    },
+
+    setOpen(open: boolean) {
+      if (open) {
+        send({ type: "OPEN" })
+      } else {
+        send({ type: "CLOSE" })
+      }
+    },
+
+    highlight(path: string[] | null) {
+      send({ type: "HIGHLIGHTED_PATH.SET", value: path })
+    },
+
+    selectItem(value: string) {
+      send({ type: "ITEM.SELECT", value })
+    },
+
+    clearValue() {
+      send({ type: "VALUE.CLEAR" })
+    },
+
+    getLevelValues(level: number): string[] {
+      return context.get("levelValues")[level] || []
+    },
+
+    getLevelDepth(): number {
+      return levelDepth
+    },
+
+    getParentValue(level: number): string | null {
+      const values = context.get("value")
+      if (values.length === 0) return null
+
+      // Use the most recent value path
+      const mostRecentValue = values[values.length - 1]
+      return mostRecentValue[level] || null
+    },
+
+    getItemState(props: ItemProps): ItemState {
+      const { value: itemValue } = props
+      const node = collection.findNode(itemValue)
+      const indexPath = collection.getIndexPath(itemValue)
+      const depth = indexPath ? indexPath.length : 0
+
+      // Check if this item is highlighted (part of the highlighted path)
+      const isHighlighted = highlightedPath ? highlightedPath.includes(itemValue) : false
+
+      // Check if item is selected (part of any selected path)
+      const isSelected = value.some((path) => path.includes(itemValue))
+
+      return {
+        value: itemValue,
+        disabled: !!prop("isItemDisabled")?.(itemValue),
+        highlighted: isHighlighted,
+        selected: isSelected,
+        hasChildren: node ? collection.isBranchNode(node) : false,
+        depth,
+      }
+    },
+
+    getRootProps() {
+      return normalize.element({
+        ...parts.root.attrs,
+        id: dom.getRootId(scope),
+        "data-disabled": dataAttr(isDisabled),
+        "data-readonly": dataAttr(prop("readOnly")),
+        "data-invalid": dataAttr(prop("invalid")),
+        "data-state": open ? "open" : "closed",
+      })
+    },
+
+    getLabelProps() {
+      return normalize.label({
+        ...parts.label.attrs,
+        id: dom.getLabelId(scope),
+        htmlFor: dom.getTriggerId(scope),
+        "data-disabled": dataAttr(isDisabled),
+        "data-readonly": dataAttr(prop("readOnly")),
+        "data-invalid": dataAttr(prop("invalid")),
+      })
+    },
+
+    getControlProps() {
+      return normalize.element({
+        ...parts.control.attrs,
+        id: dom.getControlId(scope),
+        "data-disabled": dataAttr(isDisabled),
+        "data-readonly": dataAttr(prop("readOnly")),
+        "data-invalid": dataAttr(prop("invalid")),
+        "data-state": open ? "open" : "closed",
+      })
+    },
+
+    getTriggerProps() {
+      return normalize.button({
+        ...parts.trigger.attrs,
+        id: dom.getTriggerId(scope),
+        type: "button",
+        role: "combobox",
+        "aria-controls": dom.getContentId(scope),
+        "aria-expanded": open,
+        "aria-haspopup": "listbox",
+        "aria-labelledby": dom.getLabelId(scope),
+        "aria-describedby": dom.getValueTextId(scope),
+        "data-state": open ? "open" : "closed",
+        "data-disabled": dataAttr(isDisabled),
+        "data-readonly": dataAttr(prop("readOnly")),
+        "data-invalid": dataAttr(prop("invalid")),
+        disabled: isDisabled,
+        onFocus() {
+          if (!isInteractive) return
+          send({ type: "TRIGGER.FOCUS" })
+        },
+        onBlur() {
+          send({ type: "TRIGGER.BLUR" })
+        },
+        onClick(event) {
+          if (!isInteractive) return
+          if (!isLeftClick(event)) return
+          send({ type: "TRIGGER.CLICK" })
+        },
+        onKeyDown(event) {
+          if (!isInteractive) return
+          const key = getEventKey(event)
+
+          switch (key) {
+            case "ArrowDown":
+              event.preventDefault()
+              send({ type: "TRIGGER.ARROW_DOWN" })
+              break
+            case "ArrowUp":
+              event.preventDefault()
+              send({ type: "TRIGGER.ARROW_UP" })
+              break
+            case "Enter":
+            case " ":
+              event.preventDefault()
+              send({ type: "TRIGGER.ENTER" })
+              break
+            case "Escape":
+              send({ type: "TRIGGER.ESCAPE" })
+              break
+          }
+        },
+      })
+    },
+
+    getIndicatorProps() {
+      return normalize.element({
+        ...parts.indicator.attrs,
+        id: dom.getIndicatorId(scope),
+        "data-state": open ? "open" : "closed",
+        "data-disabled": dataAttr(isDisabled),
+        "data-readonly": dataAttr(prop("readOnly")),
+        "data-invalid": dataAttr(prop("invalid")),
+      })
+    },
+
+    getValueTextProps() {
+      return normalize.element({
+        ...parts.valueText.attrs,
+        id: dom.getValueTextId(scope),
+        "data-disabled": dataAttr(isDisabled),
+        "data-readonly": dataAttr(prop("readOnly")),
+        "data-invalid": dataAttr(prop("invalid")),
+        "data-placeholder": dataAttr(!value.length),
+      })
+    },
+
+    getClearTriggerProps() {
+      return normalize.button({
+        ...parts.clearTrigger.attrs,
+        id: dom.getClearTriggerId(scope),
+        type: "button",
+        "aria-label": "Clear value",
+        hidden: !value.length,
+        "data-disabled": dataAttr(isDisabled),
+        "data-readonly": dataAttr(prop("readOnly")),
+        "data-invalid": dataAttr(prop("invalid")),
+        disabled: isDisabled,
+        onClick(event) {
+          if (!isInteractive) return
+          if (!isLeftClick(event)) return
+          send({ type: "VALUE.CLEAR" })
+        },
+      })
+    },
+
+    getPositionerProps() {
+      return normalize.element({
+        ...parts.positioner.attrs,
+        id: dom.getPositionerId(scope),
+        style: popperStyles.floating,
+      })
+    },
+
+    getContentProps() {
+      return normalize.element({
+        ...parts.content.attrs,
+        id: dom.getContentId(scope),
+        role: "listbox",
+        "aria-labelledby": dom.getLabelId(scope),
+        "data-state": open ? "open" : "closed",
+        hidden: !open,
+        tabIndex: 0,
+        onKeyDown(event) {
+          if (!isInteractive) return
+          const key = getEventKey(event)
+
+          const keyMap: Record<string, () => void> = {
+            ArrowDown() {
+              send({ type: "CONTENT.ARROW_DOWN" })
+            },
+            ArrowUp() {
+              send({ type: "CONTENT.ARROW_UP" })
+            },
+            ArrowRight() {
+              send({ type: "CONTENT.ARROW_RIGHT" })
+            },
+            ArrowLeft() {
+              send({ type: "CONTENT.ARROW_LEFT" })
+            },
+            Home() {
+              send({ type: "CONTENT.HOME" })
+            },
+            End() {
+              send({ type: "CONTENT.END" })
+            },
+            Enter() {
+              send({ type: "CONTENT.ENTER" })
+            },
+            " "() {
+              send({ type: "CONTENT.ENTER" })
+            },
+            Escape() {
+              send({ type: "CONTENT.ESCAPE" })
+            },
+          }
+
+          const exec = keyMap[key]
+          if (exec) {
+            exec()
+            event.preventDefault()
+          }
+        },
+      })
+    },
+
+    getLevelProps(props: LevelProps) {
+      const { level } = props
+      return normalize.element({
+        ...parts.level.attrs,
+        id: dom.getLevelId(scope, level),
+        "data-level": level,
+      })
+    },
+
+    getLevelContentProps(props: LevelProps) {
+      const { level } = props
+      return normalize.element({
+        ...parts.levelContent.attrs,
+        id: dom.getLevelContentId(scope, level),
+        "data-level": level,
+      })
+    },
+
+    getItemProps(props: ItemProps) {
+      const { value: itemValue } = props
+      const itemState = this.getItemState(props)
+
+      return normalize.element({
+        ...parts.item.attrs,
+        id: dom.getItemId(scope, itemValue),
+        role: "option",
+        "data-value": itemValue,
+        "data-disabled": dataAttr(itemState.disabled),
+        "data-highlighted": dataAttr(itemState.highlighted),
+        "data-selected": dataAttr(itemState.selected),
+        "data-has-children": dataAttr(itemState.hasChildren),
+        "data-depth": itemState.depth,
+        "aria-selected": itemState.selected,
+        "aria-disabled": itemState.disabled,
+        onClick(event) {
+          if (!isInteractive) return
+          if (!isLeftClick(event)) return
+          if (itemState.disabled) return
+          send({ type: "ITEM.CLICK", value: itemValue })
+        },
+        onPointerMove() {
+          if (itemState.disabled) return
+          send({ type: "ITEM.POINTER_MOVE", value: itemValue })
+        },
+        onPointerLeave() {
+          send({ type: "ITEM.POINTER_LEAVE", value: itemValue })
+        },
+      })
+    },
+
+    getItemTextProps(props: ItemProps) {
+      const { value: itemValue } = props
+      const itemState = this.getItemState(props)
+      return normalize.element({
+        ...parts.itemText.attrs,
+        "data-value": itemValue,
+        "data-highlighted": dataAttr(itemState.highlighted),
+        "data-selected": dataAttr(itemState.selected),
+        "data-disabled": dataAttr(itemState.disabled),
+      })
+    },
+
+    getItemIndicatorProps(props: ItemProps) {
+      const { value: itemValue } = props
+      const itemState = this.getItemState(props)
+
+      return normalize.element({
+        ...parts.itemIndicator.attrs,
+        "data-value": itemValue,
+        "data-highlighted": dataAttr(itemState.highlighted),
+        "data-has-children": dataAttr(itemState.hasChildren),
+        hidden: !itemState.hasChildren,
+      })
+    },
+  }
+}
diff --git a/packages/machines/cascader/src/cascader.dom.ts b/packages/machines/cascader/src/cascader.dom.ts
new file mode 100644
index 0000000000..dbe6b7b01c
--- /dev/null
+++ b/packages/machines/cascader/src/cascader.dom.ts
@@ -0,0 +1,33 @@
+import { createScope } from "@zag-js/dom-query"
+import type { Scope } from "@zag-js/core"
+
+export const dom = createScope({
+  getRootId: (ctx: Scope) => ctx.ids?.root ?? `cascader:${ctx.id}`,
+  getLabelId: (ctx: Scope) => ctx.ids?.label ?? `cascader:${ctx.id}:label`,
+  getControlId: (ctx: Scope) => ctx.ids?.control ?? `cascader:${ctx.id}:control`,
+  getTriggerId: (ctx: Scope) => ctx.ids?.trigger ?? `cascader:${ctx.id}:trigger`,
+  getIndicatorId: (ctx: Scope) => ctx.ids?.indicator ?? `cascader:${ctx.id}:indicator`,
+  getValueTextId: (ctx: Scope) => ctx.ids?.valueText ?? `cascader:${ctx.id}:value-text`,
+  getClearTriggerId: (ctx: Scope) => ctx.ids?.clearTrigger ?? `cascader:${ctx.id}:clear-trigger`,
+  getPositionerId: (ctx: Scope) => ctx.ids?.positioner ?? `cascader:${ctx.id}:positioner`,
+  getContentId: (ctx: Scope) => ctx.ids?.content ?? `cascader:${ctx.id}:content`,
+  getLevelId: (ctx: Scope, level: number) => ctx.ids?.level?.(level) ?? `cascader:${ctx.id}:level:${level}`,
+  getLevelContentId: (ctx: Scope, level: number) =>
+    ctx.ids?.levelContent?.(level) ?? `cascader:${ctx.id}:level:${level}:content`,
+  getItemId: (ctx: Scope, value: string) => ctx.ids?.item?.(value) ?? `cascader:${ctx.id}:item:${value}`,
+
+  getRootEl: (ctx: Scope) => dom.getById(ctx, dom.getRootId(ctx)),
+  getLabelEl: (ctx: Scope) => dom.getById(ctx, dom.getLabelId(ctx)),
+  getControlEl: (ctx: Scope) => dom.getById(ctx, dom.getControlId(ctx)),
+  getTriggerEl: (ctx: Scope) => dom.getById(ctx, dom.getTriggerId(ctx)),
+  getIndicatorEl: (ctx: Scope) => dom.getById(ctx, dom.getIndicatorId(ctx)),
+  getValueTextEl: (ctx: Scope) => dom.getById(ctx, dom.getValueTextId(ctx)),
+  getClearTriggerEl: (ctx: Scope) => dom.getById(ctx, dom.getClearTriggerId(ctx)),
+  getPositionerEl: (ctx: Scope) => dom.getById(ctx, dom.getPositionerId(ctx)),
+  getContentEl: (ctx: Scope) => dom.getById(ctx, dom.getContentId(ctx)),
+  getLevelEl: (ctx: Scope, level: number) => dom.getById(ctx, dom.getLevelId(ctx, level)),
+  getLevelContentEl: (ctx: Scope, level: number) => dom.getById(ctx, dom.getLevelContentId(ctx, level)),
+  getItemEl: (ctx: Scope, value: string) => dom.getById(ctx, dom.getItemId(ctx, value)),
+})
+
+export type DomScope = typeof dom
diff --git a/packages/machines/cascader/src/cascader.machine.ts b/packages/machines/cascader/src/cascader.machine.ts
new file mode 100644
index 0000000000..f9711fc595
--- /dev/null
+++ b/packages/machines/cascader/src/cascader.machine.ts
@@ -0,0 +1,906 @@
+import { createGuards, createMachine } from "@zag-js/core"
+import { trackDismissableElement } from "@zag-js/dismissable"
+import { raf, trackFormControl } from "@zag-js/dom-query"
+import { getPlacement, type Placement } from "@zag-js/popper"
+import { collection } from "./cascader.collection"
+import { dom } from "./cascader.dom"
+import type { CascaderSchema } from "./cascader.types"
+
+const { or, and } = createGuards<CascaderSchema>()
+
+export const machine = createMachine<CascaderSchema>({
+  props({ props }) {
+    // Force "click highlighting mode" when parent selection is allowed
+    const highlightTrigger = props.allowParentSelection ? "click" : (props.highlightTrigger ?? "hover")
+
+    return {
+      closeOnSelect: true,
+      loop: false,
+      defaultValue: [],
+      defaultOpen: false,
+      multiple: false,
+      placeholder: "Select an option",
+      allowParentSelection: false,
+      positioning: {
+        placement: "bottom-start",
+        gutter: 8,
+        ...props.positioning,
+      },
+      ...props,
+      collection: props.collection ?? collection.empty(),
+      highlightTrigger,
+    }
+  },
+
+  context({ prop, bindable }) {
+    return {
+      value: bindable<string[][]>(() => ({
+        defaultValue: prop("defaultValue") ?? [],
+        value: prop("value"),
+        onChange(value) {
+          const collection = prop("collection")
+          const valueText =
+            prop("formatValue")?.(value) ??
+            value.map((path) => path.map((v) => collection.stringify(v) || v).join(" / ")).join(", ")
+          prop("onValueChange")?.({ value, valueText })
+        },
+      })),
+      highlightedPath: bindable<string[] | null>(() => ({
+        defaultValue: prop("highlightedPath") || null,
+        value: prop("highlightedPath"),
+        onChange(path) {
+          prop("onHighlightChange")?.({ highlightedPath: path })
+        },
+      })),
+      currentPlacement: bindable<Placement | undefined>(() => ({
+        defaultValue: undefined,
+      })),
+      fieldsetDisabled: bindable<boolean>(() => ({
+        defaultValue: false,
+      })),
+      levelValues: bindable<string[][]>(() => ({
+        defaultValue: [],
+      })),
+      clearFocusTimer: bindable<(() => void) | null>(() => ({
+        defaultValue: null,
+      })),
+    }
+  },
+
+  computed: {
+    hasValue: ({ context }) => context.get("value").length > 0,
+    isDisabled: ({ prop, context }) => !!prop("disabled") || !!context.get("fieldsetDisabled"),
+    isInteractive: ({ prop }) => !(prop("disabled") || prop("readOnly")),
+    selectedItems: ({ context, prop }) => {
+      const value = context.get("value")
+      const collection = prop("collection")
+      return value.flatMap((path) => path.map((v) => collection.findNode(v)).filter(Boolean))
+    },
+    highlightedItem: ({ context, prop }) => {
+      const highlightedPath = context.get("highlightedPath")
+      return highlightedPath && highlightedPath.length > 0
+        ? prop("collection").findNode(highlightedPath[highlightedPath.length - 1])
+        : null
+    },
+    levelDepth: ({ context }) => {
+      return Math.max(1, context.get("levelValues").length)
+    },
+    valueText: ({ context, prop }) => {
+      const value = context.get("value")
+      if (value.length === 0) return prop("placeholder") ?? ""
+      const collection = prop("collection")
+      return (
+        prop("formatValue")?.(value) ??
+        value.map((path) => path.map((v) => collection.stringify(v) || v).join(" / ")).join(", ")
+      )
+    },
+  },
+
+  initialState({ prop }) {
+    const open = prop("open") || prop("defaultOpen")
+    return open ? "open" : "idle"
+  },
+
+  entry: ["syncLevelValues"],
+
+  watch({ context, prop, track, action }) {
+    track([() => context.get("value").toString()], () => {
+      action(["syncLevelValues"])
+    })
+    track([() => prop("open")], () => {
+      action(["toggleVisibility"])
+    })
+    track([() => prop("collection").toString()], () => {
+      action(["syncLevelValues"])
+    })
+  },
+
+  on: {
+    "VALUE.SET": {
+      actions: ["setValue"],
+    },
+    "VALUE.CLEAR": {
+      actions: ["clearValue"],
+    },
+    "HIGHLIGHTED_PATH.SET": {
+      actions: ["setHighlightedPath"],
+    },
+    "ITEM.SELECT": {
+      actions: ["selectItem"],
+    },
+    SYNC_LEVELS: {
+      actions: ["syncLevelValues"],
+    },
+  },
+
+  effects: ["trackFormControlState"],
+
+  states: {
+    idle: {
+      tags: ["closed"],
+      on: {
+        "CONTROLLED.OPEN": [
+          {
+            guard: "isTriggerClickEvent",
+            target: "open",
+          },
+          {
+            target: "open",
+          },
+        ],
+        "TRIGGER.CLICK": [
+          {
+            guard: "isOpenControlled",
+            actions: ["invokeOnOpen"],
+          },
+          {
+            target: "open",
+            actions: ["invokeOnOpen"],
+          },
+        ],
+        "TRIGGER.FOCUS": {
+          target: "focused",
+        },
+        OPEN: [
+          {
+            guard: "isOpenControlled",
+            actions: ["invokeOnOpen"],
+          },
+          {
+            target: "open",
+            actions: ["invokeOnOpen"],
+          },
+        ],
+      },
+    },
+
+    focused: {
+      tags: ["closed"],
+      on: {
+        "CONTROLLED.OPEN": [
+          {
+            guard: "isTriggerClickEvent",
+            target: "open",
+          },
+          {
+            guard: "isTriggerArrowUpEvent",
+            target: "open",
+            actions: ["highlightLastItem"],
+          },
+          {
+            guard: or("isTriggerArrowDownEvent", "isTriggerEnterEvent"),
+            target: "open",
+            actions: ["highlightFirstItem"],
+          },
+          {
+            target: "open",
+          },
+        ],
+        "TRIGGER.CLICK": [
+          {
+            guard: "isOpenControlled",
+            actions: ["invokeOnOpen"],
+          },
+          {
+            target: "open",
+            actions: ["invokeOnOpen"],
+          },
+        ],
+        "TRIGGER.ARROW_UP": [
+          {
+            guard: "isOpenControlled",
+            actions: ["invokeOnOpen"],
+          },
+          {
+            target: "open",
+            actions: ["invokeOnOpen", "highlightLastItem"],
+          },
+        ],
+        "TRIGGER.ARROW_DOWN": [
+          {
+            guard: "isOpenControlled",
+            actions: ["invokeOnOpen"],
+          },
+          {
+            target: "open",
+            actions: ["invokeOnOpen", "highlightFirstItem"],
+          },
+        ],
+        "TRIGGER.ENTER": [
+          {
+            guard: "isOpenControlled",
+            actions: ["invokeOnOpen"],
+          },
+          {
+            target: "open",
+            actions: ["invokeOnOpen", "highlightFirstItem"],
+          },
+        ],
+        "TRIGGER.BLUR": {
+          target: "idle",
+        },
+        OPEN: [
+          {
+            guard: "isOpenControlled",
+            actions: ["invokeOnOpen"],
+          },
+          {
+            target: "open",
+            actions: ["invokeOnOpen"],
+          },
+        ],
+      },
+    },
+
+    open: {
+      tags: ["open"],
+      effects: ["trackDismissableElement", "computePlacement"],
+      entry: ["setInitialFocus", "highlightLastSelectedValue"],
+      exit: ["clearHighlightedPath"],
+      on: {
+        "CONTROLLED.CLOSE": [
+          {
+            guard: "restoreFocus",
+            target: "focused",
+            actions: ["focusTriggerEl"],
+          },
+          {
+            target: "idle",
+          },
+        ],
+        "ITEM.CLICK": [
+          {
+            guard: and("canSelectItem", "shouldCloseOnSelect", "isOpenControlled"),
+            actions: ["selectItem", "invokeOnClose"],
+          },
+          {
+            guard: and("canSelectItem", "shouldCloseOnSelect"),
+            target: "focused",
+            actions: ["selectItem", "invokeOnClose", "focusTriggerEl"],
+          },
+          {
+            guard: "canSelectItem",
+            actions: ["selectItem"],
+          },
+          {
+            // If can't select, at least highlight for click-based highlighting
+            actions: ["setHighlightedPathFromValue"],
+          },
+        ],
+        "ITEM.POINTER_MOVE": [
+          {
+            guard: "isHoverHighlighting",
+            actions: ["setHighlightedPathFromValue"],
+          },
+        ],
+        "ITEM.POINTER_LEAVE": [
+          {
+            guard: "isHoverHighlighting",
+            actions: ["scheduleDelayedClear"],
+          },
+        ],
+        "CONTENT.ARROW_DOWN": [
+          {
+            guard: "hasHighlightedPath",
+            actions: ["highlightNextItem"],
+          },
+          {
+            actions: ["highlightFirstItem"],
+          },
+        ],
+        "CONTENT.ARROW_UP": [
+          {
+            guard: "hasHighlightedPath",
+            actions: ["highlightPreviousItem"],
+          },
+          {
+            actions: ["highlightLastItem"],
+          },
+        ],
+        "CONTENT.ARROW_RIGHT": [
+          {
+            guard: "canNavigateToChild",
+            actions: ["highlightFirstChild"],
+          },
+        ],
+        "CONTENT.ARROW_LEFT": [
+          {
+            guard: "canNavigateToParent",
+            actions: ["highlightParent"],
+          },
+        ],
+        "CONTENT.HOME": {
+          actions: ["highlightFirstItem"],
+        },
+        "CONTENT.END": {
+          actions: ["highlightLastItem"],
+        },
+        "CONTENT.ENTER": [
+          {
+            guard: and("canSelectHighlightedItem", "shouldCloseOnSelectHighlighted", "isOpenControlled"),
+            actions: ["selectHighlightedItem", "invokeOnClose"],
+          },
+          {
+            guard: and("canSelectHighlightedItem", "shouldCloseOnSelectHighlighted"),
+            target: "focused",
+            actions: ["selectHighlightedItem", "invokeOnClose", "focusTriggerEl"],
+          },
+          {
+            guard: "canSelectHighlightedItem",
+            actions: ["selectHighlightedItem"],
+          },
+        ],
+        "CONTENT.ESCAPE": [
+          {
+            guard: "isOpenControlled",
+            actions: ["invokeOnClose", "focusTriggerEl"],
+          },
+          {
+            guard: "restoreFocus",
+            target: "focused",
+            actions: ["invokeOnClose", "focusTriggerEl"],
+          },
+          {
+            target: "idle",
+            actions: ["invokeOnClose"],
+          },
+        ],
+        "DELAY.CLEAR_FOCUS": {
+          actions: ["clearHighlightedPath"],
+        },
+        CLOSE: [
+          {
+            guard: "isOpenControlled",
+            actions: ["invokeOnClose"],
+          },
+          {
+            guard: "restoreFocus",
+            target: "focused",
+            actions: ["invokeOnClose", "focusTriggerEl"],
+          },
+          {
+            target: "idle",
+            actions: ["invokeOnClose"],
+          },
+        ],
+      },
+    },
+  },
+
+  implementations: {
+    guards: {
+      restoreFocus: () => true,
+      isOpenControlled: ({ prop }) => !!prop("open"),
+      isTriggerClickEvent: ({ event }) => event.previousEvent?.type === "TRIGGER.CLICK",
+      isTriggerArrowUpEvent: ({ event }) => event.previousEvent?.type === "TRIGGER.ARROW_UP",
+      isTriggerArrowDownEvent: ({ event }) => event.previousEvent?.type === "TRIGGER.ARROW_DOWN",
+      isTriggerEnterEvent: ({ event }) => event.previousEvent?.type === "TRIGGER.ENTER",
+      hasHighlightedPath: ({ context }) => context.get("highlightedPath") != null,
+      loop: ({ prop }) => !!prop("loop"),
+      isHoverHighlighting: ({ prop }) => prop("highlightTrigger") === "hover",
+      shouldCloseOnSelect: ({ prop, event }) => {
+        if (!prop("closeOnSelect")) return false
+
+        const collection = prop("collection")
+        const node = collection.findNode(event.value)
+
+        // Only close if selecting a leaf node (no children)
+        return node && !collection.isBranchNode(node)
+      },
+      shouldCloseOnSelectHighlighted: ({ prop, context }) => {
+        if (!prop("closeOnSelect")) return false
+
+        const highlightedPath = context.get("highlightedPath")
+        if (!highlightedPath || highlightedPath.length === 0) return false
+
+        const collection = prop("collection")
+        const leafValue = highlightedPath[highlightedPath.length - 1]
+        const node = collection.findNode(leafValue)
+
+        // Only close if selecting a leaf node (no children)
+        return node && !collection.isBranchNode(node)
+      },
+      canSelectItem: ({ prop, event }) => {
+        const collection = prop("collection")
+        const node = collection.findNode(event.value)
+
+        if (!node) return false
+
+        // If parent selection is not allowed, only allow leaf nodes
+        if (!prop("allowParentSelection")) {
+          return !collection.isBranchNode(node)
+        }
+
+        // Otherwise, allow any node
+        return true
+      },
+      canSelectHighlightedItem: ({ prop, context }) => {
+        const highlightedPath = context.get("highlightedPath")
+        if (!highlightedPath || highlightedPath.length === 0) return false
+
+        const collection = prop("collection")
+        const leafValue = highlightedPath[highlightedPath.length - 1]
+        const node = collection.findNode(leafValue)
+
+        if (!node) return false
+
+        // If parent selection is not allowed, only allow leaf nodes
+        if (!prop("allowParentSelection")) {
+          return !collection.isBranchNode(node)
+        }
+
+        // Otherwise, allow any node
+        return true
+      },
+      canNavigateToChild: ({ prop, context }) => {
+        const highlightedPath = context.get("highlightedPath")
+        if (!highlightedPath || highlightedPath.length === 0) return false
+
+        const collection = prop("collection")
+        const leafValue = highlightedPath[highlightedPath.length - 1]
+        const node = collection.findNode(leafValue)
+
+        return node && collection.isBranchNode(node)
+      },
+      canNavigateToParent: ({ context }) => {
+        const highlightedPath = context.get("highlightedPath")
+        if (!highlightedPath || highlightedPath.length === 0) return false
+
+        // We can navigate to parent if the path has more than one item
+        return highlightedPath.length > 1
+      },
+    },
+
+    effects: {
+      trackFormControlState({ context, scope, prop }) {
+        return trackFormControl(dom.getTriggerEl(scope), {
+          onFieldsetDisabledChange(disabled: boolean) {
+            context.set("fieldsetDisabled", disabled)
+          },
+          onFormReset() {
+            context.set("value", prop("defaultValue") ?? [])
+          },
+        })
+      },
+      trackDismissableElement({ scope, send }) {
+        const contentEl = () => dom.getContentEl(scope)
+
+        return trackDismissableElement(contentEl, {
+          defer: true,
+          onDismiss() {
+            send({ type: "CLOSE" })
+          },
+        })
+      },
+      computePlacement({ context, prop, scope }) {
+        const triggerEl = () => dom.getTriggerEl(scope)
+        const positionerEl = () => dom.getPositionerEl(scope)
+
+        return getPlacement(triggerEl, positionerEl, {
+          ...prop("positioning"),
+          onComplete(data) {
+            context.set("currentPlacement", data.placement)
+          },
+        })
+      },
+    },
+
+    actions: {
+      setValue({ context, event }) {
+        context.set("value", event.value)
+      },
+      clearValue({ context }) {
+        context.set("value", [])
+      },
+      setHighlightedPath({ context, event, prop }) {
+        const { value } = event
+        const collection = prop("collection")
+
+        // Cancel any existing clear focus timer
+        const existingTimer = context.get("clearFocusTimer")
+        if (existingTimer) {
+          existingTimer()
+          context.set("clearFocusTimer", null)
+        }
+
+        context.set("highlightedPath", value)
+
+        if (value && value.length > 0) {
+          // Build level values to show the path to the highlighted item and its children
+          const levelValues: string[][] = []
+
+          // First level is always root children
+          const rootNode = collection.rootNode
+          if (rootNode && collection.isBranchNode(rootNode)) {
+            levelValues[0] = collection.getNodeChildren(rootNode).map((child) => collection.getNodeValue(child))
+          }
+
+          // Build levels for the entire highlighted path
+          for (let i = 0; i < value.length; i++) {
+            const nodeValue = value[i]
+            const node = collection.findNode(nodeValue)
+            if (node && collection.isBranchNode(node)) {
+              const children = collection.getNodeChildren(node)
+              levelValues[i + 1] = children.map((child) => collection.getNodeValue(child))
+            }
+          }
+
+          context.set("levelValues", levelValues)
+        }
+      },
+      setHighlightedPathFromValue({ event, prop, send }) {
+        const { value } = event
+        const collection = prop("collection")
+
+        if (!value) {
+          send({ type: "HIGHLIGHTED_PATH.SET", value: null })
+          return
+        }
+
+        // Find the full path to this value
+        const indexPath = collection.getIndexPath(value)
+        if (indexPath) {
+          const fullPath = collection.getValuePath(indexPath)
+          send({ type: "HIGHLIGHTED_PATH.SET", value: fullPath })
+        }
+      },
+      clearHighlightedPath({ context, action }) {
+        // Cancel any existing clear focus timer
+        const existingTimer = context.get("clearFocusTimer")
+        if (existingTimer) {
+          existingTimer()
+          context.set("clearFocusTimer", null)
+        }
+
+        // Clear the highlighted path
+        context.set("highlightedPath", null)
+
+        // Restore level values to match the actual selected values
+        // (remove any preview levels that were showing due to highlighting)
+        action(["syncLevelValues"])
+      },
+      selectItem({ context, prop, event }) {
+        const collection = prop("collection")
+        const node = collection.findNode(event.value)
+
+        if (!node || prop("isItemDisabled")?.(event.value)) return
+
+        const hasChildren = collection.isBranchNode(node)
+        const indexPath = collection.getIndexPath(event.value)
+
+        if (!indexPath) return
+
+        const valuePath = collection.getValuePath(indexPath)
+        const currentValues = context.get("value")
+        const multiple = prop("multiple")
+
+        if (prop("allowParentSelection")) {
+          // When parent selection is allowed, always update the value to the selected item
+
+          if (multiple) {
+            // Remove any conflicting selections (parent/child conflicts)
+            const filteredValues = currentValues.filter((existingPath) => {
+              // Remove if this path is a parent of the new selection
+              const isParentOfNew =
+                valuePath.length > existingPath.length && existingPath.every((val, idx) => val === valuePath[idx])
+              // Remove if this path is a child of the new selection
+              const isChildOfNew =
+                existingPath.length > valuePath.length && valuePath.every((val, idx) => val === existingPath[idx])
+              // Remove if this is the exact same path
+              const isSamePath =
+                existingPath.length === valuePath.length && existingPath.every((val, idx) => val === valuePath[idx])
+
+              return !isParentOfNew && !isChildOfNew && !isSamePath
+            })
+
+            // Add the new selection
+            context.set("value", [...filteredValues, valuePath])
+          } else {
+            // Single selection mode
+            context.set("value", [valuePath])
+          }
+
+          // Keep the selected item highlighted if it has children
+          if (hasChildren) {
+            context.set("highlightedPath", valuePath)
+          } else {
+            // Clear highlight for leaf items since they're now selected
+            context.set("highlightedPath", null)
+          }
+        } else {
+          // When parent selection is not allowed, only leaf items update the value
+          if (hasChildren) {
+            // For branch nodes, just navigate into them (update value path but don't "select")
+            if (multiple && currentValues.length > 0) {
+              // Use the most recent selection as base for navigation
+              context.set("value", [...currentValues.slice(0, -1), valuePath])
+            } else {
+              context.set("value", [valuePath])
+            }
+            context.set("highlightedPath", valuePath)
+          } else {
+            // For leaf nodes, actually select them
+            if (multiple) {
+              // Check if this path already exists
+              const existingIndex = currentValues.findIndex(
+                (path) => path.length === valuePath.length && path.every((val, idx) => val === valuePath[idx]),
+              )
+
+              if (existingIndex >= 0) {
+                // Remove existing selection (toggle off)
+                const newValues = [...currentValues]
+                newValues.splice(existingIndex, 1)
+                context.set("value", newValues)
+              } else {
+                // Add new selection
+                context.set("value", [...currentValues, valuePath])
+              }
+            } else {
+              // Single selection mode
+              context.set("value", [valuePath])
+            }
+            context.set("highlightedPath", null)
+          }
+        }
+      },
+      selectHighlightedItem({ context, send }) {
+        const highlightedPath = context.get("highlightedPath")
+        if (highlightedPath && highlightedPath.length > 0) {
+          const leafValue = highlightedPath[highlightedPath.length - 1]
+          send({ type: "ITEM.SELECT", value: leafValue })
+        }
+      },
+      syncLevelValues({ context, prop }) {
+        const values = context.get("value")
+        const collection = prop("collection")
+        const levelValues: string[][] = []
+
+        // First level is always root children
+        const rootNode = collection.rootNode
+        if (rootNode && collection.isBranchNode(rootNode)) {
+          levelValues[0] = collection.getNodeChildren(rootNode).map((child) => collection.getNodeValue(child))
+        }
+
+        // Use the most recent selection for building levels
+        const mostRecentValue = values.length > 0 ? values[values.length - 1] : []
+
+        // Build subsequent levels based on most recent value path
+        for (let i = 0; i < mostRecentValue.length; i++) {
+          const nodeValue = mostRecentValue[i]
+          const node = collection.findNode(nodeValue)
+          if (node && collection.isBranchNode(node)) {
+            const children = collection.getNodeChildren(node)
+            levelValues[i + 1] = children.map((child) => collection.getNodeValue(child))
+          }
+        }
+
+        context.set("levelValues", levelValues)
+      },
+      highlightFirstItem({ context, send }) {
+        const levelValues = context.get("levelValues")
+        const value = context.get("value")
+        // Use the current active level (value.length) or first level if empty
+        const currentLevelIndex = Math.max(0, value.length)
+        const currentLevel = levelValues[currentLevelIndex]
+
+        if (currentLevel && currentLevel.length > 0) {
+          const firstValue = currentLevel[0]
+          send({ type: "HIGHLIGHTED_PATH.SET", value: [firstValue] })
+        }
+      },
+      highlightLastItem({ context, send }) {
+        const levelValues = context.get("levelValues")
+        const value = context.get("value")
+        // Use the current active level (value.length) or first level if empty
+        const currentLevelIndex = Math.max(0, value.length)
+        const currentLevel = levelValues[currentLevelIndex]
+
+        if (currentLevel && currentLevel.length > 0) {
+          const lastValue = currentLevel[currentLevel.length - 1]
+          send({ type: "HIGHLIGHTED_PATH.SET", value: [lastValue] })
+        }
+      },
+      highlightNextItem({ context, prop, send }) {
+        const highlightedPath = context.get("highlightedPath")
+        const levelValues = context.get("levelValues")
+        const value = context.get("value")
+
+        if (!highlightedPath) {
+          // If nothing highlighted, highlight first item
+          const currentLevelIndex = Math.max(0, value.length)
+          const currentLevel = levelValues[currentLevelIndex]
+          if (currentLevel && currentLevel.length > 0) {
+            send({ type: "HIGHLIGHTED_PATH.SET", value: [currentLevel[0]] })
+          }
+          return
+        }
+
+        // Find which level contains the last item in the highlighted path
+        const leafValue = highlightedPath[highlightedPath.length - 1]
+        let targetLevel: string[] | undefined
+        let levelIndex = -1
+
+        for (let i = 0; i < levelValues.length; i++) {
+          if (levelValues[i]?.includes(leafValue)) {
+            targetLevel = levelValues[i]
+            levelIndex = i
+            break
+          }
+        }
+
+        if (!targetLevel || targetLevel.length === 0) return
+
+        const currentIndex = targetLevel.indexOf(leafValue)
+        if (currentIndex === -1) return
+
+        let nextIndex = currentIndex + 1
+        if (nextIndex >= targetLevel.length) {
+          nextIndex = prop("loop") ? 0 : currentIndex
+        }
+
+        const nextValue = targetLevel[nextIndex]
+
+        // Build the correct path: parent path + next value
+        if (levelIndex === 0) {
+          // First level - just the value
+          send({ type: "HIGHLIGHTED_PATH.SET", value: [nextValue] })
+        } else {
+          // Deeper level - parent path + next value
+          const parentPath = highlightedPath.slice(0, levelIndex)
+          send({ type: "HIGHLIGHTED_PATH.SET", value: [...parentPath, nextValue] })
+        }
+      },
+      highlightPreviousItem({ context, prop, send }) {
+        const highlightedPath = context.get("highlightedPath")
+        const levelValues = context.get("levelValues")
+        const value = context.get("value")
+
+        if (!highlightedPath) {
+          // If nothing highlighted, highlight first item
+          const currentLevelIndex = Math.max(0, value.length)
+          const currentLevel = levelValues[currentLevelIndex]
+          if (currentLevel && currentLevel.length > 0) {
+            send({ type: "HIGHLIGHTED_PATH.SET", value: [currentLevel[0]] })
+          }
+          return
+        }
+
+        // Find which level contains the last item in the highlighted path
+        const leafValue = highlightedPath[highlightedPath.length - 1]
+        let targetLevel: string[] | undefined
+        let levelIndex = -1
+
+        for (let i = 0; i < levelValues.length; i++) {
+          if (levelValues[i]?.includes(leafValue)) {
+            targetLevel = levelValues[i]
+            levelIndex = i
+            break
+          }
+        }
+
+        if (!targetLevel || targetLevel.length === 0) return
+
+        const currentIndex = targetLevel.indexOf(leafValue)
+        if (currentIndex === -1) return
+
+        let prevIndex = currentIndex - 1
+        if (prevIndex < 0) {
+          prevIndex = prop("loop") ? targetLevel.length - 1 : 0
+        }
+
+        const prevValue = targetLevel[prevIndex]
+
+        // Build the correct path: parent path + prev value
+        if (levelIndex === 0) {
+          // First level - just the value
+          send({ type: "HIGHLIGHTED_PATH.SET", value: [prevValue] })
+        } else {
+          // Deeper level - parent path + prev value
+          const parentPath = highlightedPath.slice(0, levelIndex)
+          send({ type: "HIGHLIGHTED_PATH.SET", value: [...parentPath, prevValue] })
+        }
+      },
+      highlightFirstChild({ context, prop, send }) {
+        const highlightedPath = context.get("highlightedPath")
+        if (!highlightedPath || highlightedPath.length === 0) return
+
+        const collection = prop("collection")
+        const leafValue = highlightedPath[highlightedPath.length - 1]
+        const node = collection.findNode(leafValue)
+
+        if (!node || !collection.isBranchNode(node)) return
+
+        const children = collection.getNodeChildren(node)
+        if (children.length > 0) {
+          const firstChildValue = collection.getNodeValue(children[0])
+          // Build the new path by extending the current path
+          const newPath = [...highlightedPath, firstChildValue]
+          send({ type: "HIGHLIGHTED_PATH.SET", value: newPath })
+        }
+      },
+      highlightParent({ context, send }) {
+        const highlightedPath = context.get("highlightedPath")
+        if (!highlightedPath || highlightedPath.length <= 1) return
+
+        // Get the parent path by removing the last item
+        const parentPath = highlightedPath.slice(0, -1)
+        send({ type: "HIGHLIGHTED_PATH.SET", value: parentPath })
+      },
+      setInitialFocus({ scope }) {
+        raf(() => {
+          const contentEl = dom.getContentEl(scope)
+          contentEl?.focus({ preventScroll: true })
+        })
+      },
+      focusTriggerEl({ scope }) {
+        raf(() => {
+          const triggerEl = dom.getTriggerEl(scope)
+          triggerEl?.focus({ preventScroll: true })
+        })
+      },
+      invokeOnOpen({ prop }) {
+        prop("onOpenChange")?.({ open: true })
+      },
+      invokeOnClose({ prop }) {
+        prop("onOpenChange")?.({ open: false })
+      },
+      toggleVisibility({ send, prop }) {
+        if (prop("open") != null) {
+          send({ type: prop("open") ? "CONTROLLED.OPEN" : "CONTROLLED.CLOSE" })
+        }
+      },
+      highlightLastSelectedValue({ context, send }) {
+        const values = context.get("value")
+
+        // Always start fresh - clear any existing highlighted path first
+        if (values.length > 0) {
+          // Use the most recent selection and highlight its full path
+          const mostRecentSelection = values[values.length - 1]
+          send({ type: "HIGHLIGHTED_PATH.SET", value: mostRecentSelection })
+        } else {
+          // No selections - start with no highlight so user sees all options
+          send({ type: "HIGHLIGHTED_PATH.SET", value: null })
+        }
+      },
+      scheduleDelayedClear({ context, send }) {
+        // Cancel any existing timer first
+        const existingTimer = context.get("clearFocusTimer")
+        if (existingTimer) {
+          existingTimer()
+        }
+
+        // Set up new timer with shorter delay for cascader (100ms vs menu's longer delays)
+        const timer = setTimeout(() => {
+          context.set("clearFocusTimer", null)
+          send({ type: "DELAY.CLEAR_FOCUS" })
+        }, 100) // Shorter delay for cascader UX
+
+        // Store cancel function
+        const cancelTimer = () => clearTimeout(timer)
+        context.set("clearFocusTimer", cancelTimer)
+
+        return cancelTimer
+      },
+    },
+  },
+})
diff --git a/packages/machines/cascader/src/cascader.props.ts b/packages/machines/cascader/src/cascader.props.ts
new file mode 100644
index 0000000000..18299b8e61
--- /dev/null
+++ b/packages/machines/cascader/src/cascader.props.ts
@@ -0,0 +1,34 @@
+import { createProps } from "@zag-js/types"
+import { createSplitProps } from "@zag-js/utils"
+import type { CascaderProps } from "./cascader.types"
+
+export const props = createProps<CascaderProps>()([
+  "allowParentSelection",
+  "closeOnSelect",
+  "collection",
+  "defaultOpen",
+  "defaultValue",
+  "dir",
+  "disabled",
+  "formatValue",
+  "getRootNode",
+  "highlightedPath",
+  "highlightTrigger",
+  "id",
+  "ids",
+  "invalid",
+  "isItemDisabled",
+  "loop",
+  "multiple",
+  "onHighlightChange",
+  "onOpenChange",
+  "onValueChange",
+  "open",
+  "placeholder",
+  "positioning",
+  "readOnly",
+  "required",
+  "value",
+])
+
+export const splitProps = createSplitProps<Partial<CascaderProps>>(props)
diff --git a/packages/machines/cascader/src/cascader.types.ts b/packages/machines/cascader/src/cascader.types.ts
new file mode 100644
index 0000000000..988ffb0c92
--- /dev/null
+++ b/packages/machines/cascader/src/cascader.types.ts
@@ -0,0 +1,296 @@
+import type { TreeCollection, TreeNode } from "@zag-js/collection"
+import type { Machine, Service } from "@zag-js/core"
+import type { Placement, PositioningOptions } from "@zag-js/popper"
+import type { CommonProperties, DirectionProperty, PropTypes, RequiredBy } from "@zag-js/types"
+
+/* -----------------------------------------------------------------------------
+ * Callback details
+ * -----------------------------------------------------------------------------*/
+
+export interface ValueChangeDetails {
+  value: string[][]
+  valueText: string
+}
+
+export interface HighlightChangeDetails {
+  highlightedPath: string[] | null
+}
+
+export interface OpenChangeDetails {
+  open: boolean
+}
+
+export type { TreeNode }
+
+export type ElementIds = Partial<{
+  root: string
+  label: string
+  control: string
+  trigger: string
+  indicator: string
+  valueText: string
+  clearTrigger: string
+  positioner: string
+  content: string
+  level(level: number): string
+  levelContent(level: number): string
+  item(value: string): string
+}>
+
+/* -----------------------------------------------------------------------------
+ * Machine context
+ * -----------------------------------------------------------------------------*/
+
+export interface CascaderProps<T = any> extends DirectionProperty, CommonProperties {
+  /**
+   * The tree collection data
+   */
+  collection?: TreeCollection<T> | undefined
+  /**
+   * The ids of the cascader elements. Useful for composition.
+   */
+  ids?: ElementIds | undefined
+  /**
+   * The controlled value of the cascader
+   */
+  value?: string[][] | undefined
+  /**
+   * The initial value of the cascader when rendered.
+   * Use when you don't need to control the value.
+   */
+  defaultValue?: string[][] | undefined
+  /**
+   * Whether to allow multiple selections
+   * @default false
+   */
+  multiple?: boolean | undefined
+  /**
+   * The controlled open state of the cascader
+   */
+  open?: boolean | undefined
+  /**
+   * The initial open state of the cascader when rendered.
+   * Use when you don't need to control the open state.
+   */
+  defaultOpen?: boolean | undefined
+  /**
+   * The controlled highlighted value of the cascader
+   */
+  highlightedPath?: string[] | null | undefined
+  /**
+   * The placeholder text for the cascader
+   */
+  placeholder?: string | undefined
+  /**
+   * Whether the cascader should close when an item is selected
+   * @default true
+   */
+  closeOnSelect?: boolean | undefined
+  /**
+   * Whether the cascader should loop focus when navigating with keyboard
+   * @default false
+   */
+  loop?: boolean | undefined
+  /**
+   * Whether the cascader is disabled
+   */
+  disabled?: boolean | undefined
+  /**
+   * Whether the cascader is read-only
+   */
+  readOnly?: boolean | undefined
+  /**
+   * Whether the cascader is required
+   */
+  required?: boolean | undefined
+  /**
+   * Whether the cascader is invalid
+   */
+  invalid?: boolean | undefined
+  /**
+   * The positioning options for the cascader content
+   */
+  positioning?: PositioningOptions | undefined
+  /**
+   * Function to format the display value
+   */
+  formatValue?: ((value: string[][]) => string) | undefined
+  /**
+   * Called when the value changes
+   */
+  onValueChange?: ((details: ValueChangeDetails) => void) | undefined
+  /**
+   * Called when the highlighted value changes
+   */
+  onHighlightChange?: ((details: HighlightChangeDetails) => void) | undefined
+  /**
+   * Called when the open state changes
+   */
+  onOpenChange?: ((details: OpenChangeDetails) => void) | undefined
+  /**
+   * Function to determine if a node should be selectable
+   */
+  isItemDisabled?: ((value: string) => boolean) | undefined
+  /**
+   * How highlighting is triggered
+   * - "hover": Items are highlighted on hover (default)
+   * - "click": Items are highlighted only on click
+   */
+  highlightTrigger?: "hover" | "click"
+  /**
+   * Whether parent (branch) items can be selected
+   * When true, highlightTrigger is forced to "click"
+   */
+  allowParentSelection?: boolean
+}
+
+type PropsWithDefault = "collection" | "closeOnSelect" | "loop" | "defaultValue" | "defaultOpen" | "multiple"
+
+export interface CascaderSchema<T extends TreeNode = TreeNode> {
+  state: "idle" | "focused" | "open"
+  props: RequiredBy<CascaderProps<T>, PropsWithDefault>
+  context: {
+    value: string[][]
+    highlightedPath: string[] | null
+    currentPlacement: Placement | undefined
+    fieldsetDisabled: boolean
+    levelValues: string[][]
+    clearFocusTimer: (() => void) | null
+  }
+  computed: {
+    hasValue: boolean
+    isDisabled: boolean
+    isInteractive: boolean
+    selectedItems: T[]
+    highlightedItem: T | null
+    levelDepth: number
+    valueText: string
+  }
+  action: string
+  effect: string
+  guard: string
+}
+
+export type CascaderService<T extends TreeNode = TreeNode> = Service<CascaderSchema<T>>
+
+export type CascaderMachine<T extends TreeNode = TreeNode> = Machine<CascaderSchema<T>>
+
+/* -----------------------------------------------------------------------------
+ * Component API
+ * -----------------------------------------------------------------------------*/
+
+export interface ItemProps {
+  /**
+   * The value of the item
+   */
+  value: string
+}
+
+export interface ItemState {
+  /**
+   * The value of the item
+   */
+  value: string
+  /**
+   * Whether the item is disabled
+   */
+  disabled: boolean
+  /**
+   * Whether the item is highlighted (part of the highlighted path)
+   */
+  highlighted: boolean
+  /**
+   * Whether the item is selected (part of the current value)
+   */
+  selected: boolean
+  /**
+   * Whether the item has children
+   */
+  hasChildren: boolean
+  /**
+   * The depth of the item in the tree
+   */
+  depth: number
+}
+
+export interface LevelProps {
+  /**
+   * The level index
+   */
+  level: number
+}
+
+export interface CascaderApi<T extends PropTypes = PropTypes, V = TreeNode> {
+  /**
+   * The tree collection data
+   */
+  collection: TreeCollection<V>
+  /**
+   * The current value of the cascader
+   */
+  value: string[][]
+  /**
+   * Function to set the value
+   */
+  setValue(value: string[][]): void
+  /**
+   * The current value as text
+   */
+  valueText: string
+  /**
+   * The current highlighted value
+   */
+  highlightedPath: string[] | null
+  /**
+   * Whether the cascader is open
+   */
+  open: boolean
+  /**
+   * Whether the cascader is focused
+   */
+  focused: boolean
+  /**
+   * Function to open the cascader
+   */
+  setOpen(open: boolean): void
+  /**
+   * Function to highlight an item
+   */
+  highlight(path: string[] | null): void
+  /**
+   * Function to select an item
+   */
+  selectItem(value: string): void
+  /**
+   * Function to clear the value
+   */
+  clearValue(): void
+  /**
+   * Function to get the level values for rendering levels
+   */
+  getLevelValues(level: number): string[]
+  /**
+   * Function to get the current level count
+   */
+  getLevelDepth(): number
+  /**
+   * Function to get the parent value at a specific level
+   */
+  getParentValue(level: number): string | null
+
+  getRootProps(): T["element"]
+  getLabelProps(): T["element"]
+  getControlProps(): T["element"]
+  getTriggerProps(): T["element"]
+  getIndicatorProps(): T["element"]
+  getValueTextProps(): T["element"]
+  getClearTriggerProps(): T["element"]
+  getPositionerProps(): T["element"]
+  getContentProps(): T["element"]
+  getLevelProps(props: LevelProps): T["element"]
+  getLevelContentProps(props: LevelProps): T["element"]
+  getItemState(props: ItemProps): ItemState
+  getItemProps(props: ItemProps): T["element"]
+  getItemTextProps(props: ItemProps): T["element"]
+  getItemIndicatorProps(props: ItemProps): T["element"]
+}
diff --git a/packages/machines/cascader/src/index.ts b/packages/machines/cascader/src/index.ts
new file mode 100644
index 0000000000..e5d6bad4e2
--- /dev/null
+++ b/packages/machines/cascader/src/index.ts
@@ -0,0 +1,20 @@
+export { anatomy, parts } from "./cascader.anatomy"
+export { collection } from "./cascader.collection"
+export { connect } from "./cascader.connect"
+export { machine } from "./cascader.machine"
+export { props, splitProps } from "./cascader.props"
+export type {
+  CascaderApi,
+  CascaderMachine,
+  CascaderProps,
+  CascaderSchema,
+  CascaderService,
+  ElementIds,
+  HighlightChangeDetails,
+  ItemProps,
+  ItemState,
+  LevelProps,
+  OpenChangeDetails,
+  TreeNode,
+  ValueChangeDetails,
+} from "./cascader.types"
diff --git a/packages/machines/cascader/tsconfig.json b/packages/machines/cascader/tsconfig.json
new file mode 100644
index 0000000000..81a9a86472
--- /dev/null
+++ b/packages/machines/cascader/tsconfig.json
@@ -0,0 +1,11 @@
+{
+    "extends": "../../../tsconfig.json",
+    "include": [
+        "src",
+        "**/*.ts"
+    ],
+    "compilerOptions": {
+        "rootDir": "src",
+        "outDir": "dist"
+    }
+}
\ No newline at end of file
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f4cffe1cd9..0550ad0887 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -164,6 +164,9 @@ importers:
       '@zag-js/carousel':
         specifier: workspace:*
         version: link:../../packages/machines/carousel
+      '@zag-js/cascader':
+        specifier: workspace:*
+        version: link:../../packages/machines/cascader
       '@zag-js/checkbox':
         specifier: workspace:*
         version: link:../../packages/machines/checkbox
@@ -1960,6 +1963,37 @@ importers:
         specifier: 2.2.0
         version: 2.2.0
 
+  packages/machines/cascader:
+    dependencies:
+      '@zag-js/anatomy':
+        specifier: workspace:*
+        version: link:../../anatomy
+      '@zag-js/collection':
+        specifier: workspace:*
+        version: link:../../utilities/collection
+      '@zag-js/core':
+        specifier: workspace:*
+        version: link:../../core
+      '@zag-js/dismissable':
+        specifier: workspace:*
+        version: link:../../utilities/dismissable
+      '@zag-js/dom-query':
+        specifier: workspace:*
+        version: link:../../utilities/dom-query
+      '@zag-js/popper':
+        specifier: workspace:*
+        version: link:../../utilities/popper
+      '@zag-js/types':
+        specifier: workspace:*
+        version: link:../../types
+      '@zag-js/utils':
+        specifier: workspace:*
+        version: link:../../utilities/core
+    devDependencies:
+      clean-package:
+        specifier: 2.2.0
+        version: 2.2.0
+
   packages/machines/checkbox:
     dependencies:
       '@zag-js/anatomy':
@@ -18024,7 +18058,7 @@ snapshots:
       '@typescript-eslint/parser': 8.32.1(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3)
       eslint: 9.27.0(jiti@2.4.2)
       eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.10.1(eslint-plugin-import@2.31.0)(eslint@9.27.0(jiti@2.4.2))
+      eslint-import-resolver-typescript: 3.10.1(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.32.1(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3))(eslint@9.27.0(jiti@2.4.2)))(eslint@9.27.0(jiti@2.4.2))
       eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.32.1(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3))(eslint-import-resolver-typescript@3.10.1)(eslint@9.27.0(jiti@2.4.2))
       eslint-plugin-jsx-a11y: 6.10.2(eslint@9.27.0(jiti@2.4.2))
       eslint-plugin-react: 7.37.5(eslint@9.27.0(jiti@2.4.2))
@@ -18061,7 +18095,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.31.0)(eslint@9.27.0(jiti@2.4.2)):
+  eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.32.1(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3))(eslint@9.27.0(jiti@2.4.2)))(eslint@9.27.0(jiti@2.4.2)):
     dependencies:
       '@nolyfill/is-core-module': 1.0.39
       debug: 4.4.1
@@ -18076,14 +18110,14 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-module-utils@2.12.0(@typescript-eslint/parser@8.32.1(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1)(eslint@9.27.0(jiti@2.4.2)):
+  eslint-module-utils@2.12.0(@typescript-eslint/parser@8.32.1(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.32.1(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3))(eslint@9.27.0(jiti@2.4.2)))(eslint@9.27.0(jiti@2.4.2)))(eslint@9.27.0(jiti@2.4.2)):
     dependencies:
       debug: 3.2.7
     optionalDependencies:
       '@typescript-eslint/parser': 8.32.1(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3)
       eslint: 9.27.0(jiti@2.4.2)
       eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.10.1(eslint-plugin-import@2.31.0)(eslint@9.27.0(jiti@2.4.2))
+      eslint-import-resolver-typescript: 3.10.1(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.32.1(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3))(eslint@9.27.0(jiti@2.4.2)))(eslint@9.27.0(jiti@2.4.2))
     transitivePeerDependencies:
       - supports-color
 
@@ -18109,7 +18143,7 @@ snapshots:
       doctrine: 2.1.0
       eslint: 9.27.0(jiti@2.4.2)
       eslint-import-resolver-node: 0.3.9
-      eslint-module-utils: 2.12.0(@typescript-eslint/parser@8.32.1(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1)(eslint@9.27.0(jiti@2.4.2))
+      eslint-module-utils: 2.12.0(@typescript-eslint/parser@8.32.1(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.32.1(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3))(eslint@9.27.0(jiti@2.4.2)))(eslint@9.27.0(jiti@2.4.2)))(eslint@9.27.0(jiti@2.4.2))
       hasown: 2.0.2
       is-core-module: 2.16.1
       is-glob: 4.0.3
diff --git a/shared/src/controls.ts b/shared/src/controls.ts
index 32241e8803..7730c1227b 100644
--- a/shared/src/controls.ts
+++ b/shared/src/controls.ts
@@ -6,6 +6,24 @@ export const accordionControls = defineControls({
   orientation: { type: "select", options: ["horizontal", "vertical"] as const, defaultValue: "vertical" },
 })
 
+export const cascaderControls = defineControls({
+  disabled: { type: "boolean", defaultValue: false },
+  readOnly: { type: "boolean", defaultValue: false },
+  loop: { type: "boolean", defaultValue: false },
+  multiple: { type: "boolean", defaultValue: false },
+  dir: { type: "select", options: ["ltr", "rtl"] as const, defaultValue: "ltr" },
+  closeOnSelect: { type: "boolean", defaultValue: true },
+  highlightTrigger: {
+    type: "select",
+    options: ["hover", "click"] as const,
+    defaultValue: "hover",
+  },
+  allowParentSelection: {
+    type: "boolean",
+    defaultValue: false,
+  },
+})
+
 export const checkboxControls = defineControls({
   name: { type: "string", defaultValue: "checkbox" },
   disabled: { type: "boolean", defaultValue: false },
diff --git a/shared/src/css/cascader.css b/shared/src/css/cascader.css
new file mode 100644
index 0000000000..a1f603487b
--- /dev/null
+++ b/shared/src/css/cascader.css
@@ -0,0 +1,134 @@
+[data-scope="cascader"][data-part="label"] {
+  display: block;
+  margin-bottom: 8px;
+  font-weight: 500;
+}
+
+[data-scope="cascader"][data-part="control"] {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+[data-scope="cascader"][data-part="trigger"] {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 8px 12px;
+  border: 1px solid #ccc;
+  border-radius: 6px;
+  background: white;
+  cursor: pointer;
+  font-size: 14px;
+  transition: all 0.2s ease;
+}
+
+[data-scope="cascader"][data-part="trigger"]:focus {
+  outline: 2px solid #007acc;
+  outline-offset: 2px;
+}
+
+[data-scope="cascader"][data-part="trigger"][data-state="open"] {
+  border-color: #007acc;
+  box-shadow: 0 0 0 2px rgba(0, 122, 204, 0.1);
+}
+
+[data-scope="cascader"][data-part="clear-trigger"] {
+  padding: 4px;
+  border: none;
+  background: none;
+  cursor: pointer;
+  border-radius: 4px;
+  transition: background 0.15s ease;
+}
+
+[data-scope="cascader"][data-part="clear-trigger"]:hover {
+  background: #f0f0f0;
+}
+
+[data-scope="cascader"][data-part="positioner"] {
+  z-index: 10;
+}
+
+[data-scope="cascader"][data-part="content"] {
+  background: white;
+  border: 1px solid #ccc;
+  border-radius: 6px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  padding: 8px;
+  max-height: 300px;
+  overflow: auto;
+  display: flex;
+  gap: 1px;
+}
+
+[data-scope="cascader"][data-part="level"] {
+  min-width: 150px;
+  border-right: 1px solid #eee;
+}
+
+[data-scope="cascader"][data-part="level"]:last-child {
+  border-right: none;
+}
+
+[data-scope="cascader"][data-part="item"] {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 12px;
+  cursor: pointer;
+  border-radius: 4px;
+  font-size: 14px;
+  transition: all 0.15s ease;
+  position: relative;
+  border: 1px solid transparent;
+}
+
+[data-scope="cascader"][data-part="item"]:hover {
+  background: #f8fafc;
+}
+
+[data-scope="cascader"][data-part="item"][data-highlighted] {
+  background: #f0f9ff;
+  color: #0369a1;
+  border: 1px solid #bfdbfe;
+}
+
+[data-scope="cascader"][data-part="item"][data-disabled] {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+[data-scope="cascader"][data-part="item"][data-disabled]:hover {
+  background: transparent;
+}
+
+/* Item text styling */
+[data-scope="cascader"][data-part="item-text"] {
+  flex: 1;
+  transition: all 0.15s ease;
+}
+
+/* Item indicator (chevron for branches) */
+[data-scope="cascader"][data-part="item-indicator"] {
+  color: #6b7280;
+  display: flex;
+  align-items: center;
+  transition: color 0.15s ease;
+}
+
+[data-scope="cascader"][data-part="item-indicator"][data-highlighted] {
+  color: #0369a1;
+}
+
+[data-scope="cascader"][data-part="item"][data-has-children][data-highlighted]
+  [data-scope="cascader"][data-part="item-indicator"] {
+  color: #0369a1;
+}
+
+/* Placeholder text */
+[data-scope="cascader"][data-part="value-text"][data-placeholder] {
+  color: #999;
+}
diff --git a/shared/src/routes.ts b/shared/src/routes.ts
index c77a5e7865..c9bd1e8699 100644
--- a/shared/src/routes.ts
+++ b/shared/src/routes.ts
@@ -4,6 +4,7 @@ type RouteData = {
 }
 
 export const routesData: RouteData[] = [
+  { label: "Cascader", path: "/cascader" },
   { label: "Password Input", path: "/password-input" },
   { label: "Listbox", path: "/listbox" },
   { label: "Listbox (Grid)", path: "/listbox-grid" },
diff --git a/shared/src/style.css b/shared/src/style.css
index 00e93d6acf..6a5116c2a9 100644
--- a/shared/src/style.css
+++ b/shared/src/style.css
@@ -4,6 +4,7 @@
 @import url("./css/avatar.css");
 
 @import url("./css/carousel.css");
+@import url("./css/cascader.css");
 @import url("./css/checkbox.css");
 @import url("./css/clipboard.css");
 @import url("./css/collapsible.css");

From 637e353b6472308ea5a452009aa26b451f650d8e Mon Sep 17 00:00:00 2001
From: anubra266 <anubra266@gmail.com>
Date: Tue, 3 Jun 2025 22:18:36 -0700
Subject: [PATCH 02/20] chore: rename to cascade-select

---
 .changeset/blue-pumas-type.md                 |  4 +-
 examples/next-ts/package.json                 |  2 +-
 .../{cascader.tsx => cascade-select.tsx}      | 14 +++---
 .../{cascader => cascade-select}/package.json |  8 ++--
 .../src/cascade-select.anatomy.ts}            |  2 +-
 .../src/cascade-select.collection.ts}         |  0
 .../src/cascade-select.connect.ts}            | 10 ++--
 .../src/cascade-select.dom.ts}                | 24 +++++-----
 .../src/cascade-select.machine.ts}            | 14 +++---
 .../src/cascade-select.props.ts}              |  6 +--
 .../src/cascade-select.types.ts}              | 48 +++++++++----------
 packages/machines/cascade-select/src/index.ts | 20 ++++++++
 .../tsconfig.json                             |  0
 packages/machines/cascader/src/index.ts       | 20 --------
 pnpm-lock.yaml                                |  6 +--
 shared/src/controls.ts                        |  2 +-
 .../css/{cascader.css => cascade-select.css}  | 44 ++++++++---------
 shared/src/routes.ts                          |  2 +-
 shared/src/style.css                          |  2 +-
 19 files changed, 114 insertions(+), 114 deletions(-)
 rename examples/next-ts/pages/{cascader.tsx => cascade-select.tsx} (92%)
 rename packages/machines/{cascader => cascade-select}/package.json (85%)
 rename packages/machines/{cascader/src/cascader.anatomy.ts => cascade-select/src/cascade-select.anatomy.ts} (82%)
 rename packages/machines/{cascader/src/cascader.collection.ts => cascade-select/src/cascade-select.collection.ts} (100%)
 rename packages/machines/{cascader/src/cascader.connect.ts => cascade-select/src/cascade-select.connect.ts} (97%)
 rename packages/machines/{cascader/src/cascader.dom.ts => cascade-select/src/cascade-select.dom.ts} (67%)
 rename packages/machines/{cascader/src/cascader.machine.ts => cascade-select/src/cascade-select.machine.ts} (98%)
 rename packages/machines/{cascader/src/cascader.props.ts => cascade-select/src/cascade-select.props.ts} (71%)
 rename packages/machines/{cascader/src/cascader.types.ts => cascade-select/src/cascade-select.types.ts} (81%)
 create mode 100644 packages/machines/cascade-select/src/index.ts
 rename packages/machines/{cascader => cascade-select}/tsconfig.json (100%)
 delete mode 100644 packages/machines/cascader/src/index.ts
 rename shared/src/css/{cascader.css => cascade-select.css} (55%)

diff --git a/.changeset/blue-pumas-type.md b/.changeset/blue-pumas-type.md
index 3041a66f88..f3c7d01df6 100644
--- a/.changeset/blue-pumas-type.md
+++ b/.changeset/blue-pumas-type.md
@@ -1,5 +1,5 @@
 ---
-"@zag-js/cascader": patch
+"@zag-js/cascade-select": patch
 ---
 
-Add cascader machine
+Add cascade select machine
diff --git a/examples/next-ts/package.json b/examples/next-ts/package.json
index 99e303dfd8..5d3a446fe4 100644
--- a/examples/next-ts/package.json
+++ b/examples/next-ts/package.json
@@ -22,7 +22,7 @@
     "@zag-js/auto-resize": "workspace:*",
     "@zag-js/avatar": "workspace:*",
     "@zag-js/carousel": "workspace:*",
-    "@zag-js/cascader": "workspace:*",
+    "@zag-js/cascade-select": "workspace:*",
     "@zag-js/checkbox": "workspace:*",
     "@zag-js/clipboard": "workspace:*",
     "@zag-js/collapsible": "workspace:*",
diff --git a/examples/next-ts/pages/cascader.tsx b/examples/next-ts/pages/cascade-select.tsx
similarity index 92%
rename from examples/next-ts/pages/cascader.tsx
rename to examples/next-ts/pages/cascade-select.tsx
index 6d5feb2d53..d33e01ca8b 100644
--- a/examples/next-ts/pages/cascader.tsx
+++ b/examples/next-ts/pages/cascade-select.tsx
@@ -1,6 +1,6 @@
 import { normalizeProps, useMachine } from "@zag-js/react"
-import { cascaderControls } from "@zag-js/shared"
-import * as cascader from "@zag-js/cascader"
+import { cascadeSelectControls } from "@zag-js/shared"
+import * as cascadeSelect from "@zag-js/cascade-select"
 import { ChevronDownIcon, ChevronRightIcon, XIcon } from "lucide-react"
 import { useId } from "react"
 import { StateVisualizer } from "../components/state-visualizer"
@@ -13,7 +13,7 @@ interface Node {
   children?: Node[]
 }
 
-const collection = cascader.collection<Node>({
+const collection = cascadeSelect.collection<Node>({
   nodeToValue: (node) => node.value,
   nodeToString: (node) => node.label,
   rootNode: {
@@ -86,9 +86,9 @@ const collection = cascader.collection<Node>({
 })
 
 export default function Page() {
-  const controls = useControls(cascaderControls)
+  const controls = useControls(cascadeSelectControls)
 
-  const service = useMachine(cascader.machine, {
+  const service = useMachine(cascadeSelect.machine, {
     id: useId(),
     collection,
     placeholder: "Select food category",
@@ -104,7 +104,7 @@ export default function Page() {
     ...controls.context,
   })
 
-  const api = cascader.connect(service, normalizeProps)
+  const api = cascadeSelect.connect(service, normalizeProps)
 
   const renderLevel = (level: number) => {
     const levelValues = api.getLevelValues(level)
@@ -135,7 +135,7 @@ export default function Page() {
 
   return (
     <>
-      <main className="cascader">
+      <main className="cascade-select">
         <div {...api.getRootProps()}>
           <label {...api.getLabelProps()}>Food Categories</label>
 
diff --git a/packages/machines/cascader/package.json b/packages/machines/cascade-select/package.json
similarity index 85%
rename from packages/machines/cascader/package.json
rename to packages/machines/cascade-select/package.json
index 0592e9d0a4..c21a2d2128 100644
--- a/packages/machines/cascader/package.json
+++ b/packages/machines/cascade-select/package.json
@@ -1,7 +1,7 @@
 {
-    "name": "@zag-js/cascader",
+    "name": "@zag-js/cascade-select",
     "version": "0.74.2",
-    "description": "Core logic for the cascader widget implemented as a state machine",
+    "description": "Core logic for the cascade-select widget implemented as a state machine",
     "keywords": [
         "js",
         "machine",
@@ -9,13 +9,13 @@
         "statechart",
         "component",
         "chakra ui",
-        "cascader"
+        "cascade-select"
     ],
     "author": "Abraham Aremu <anubra266@gmail.com>",
     "homepage": "https://github.com/chakra-ui/zag#readme",
     "license": "MIT",
     "main": "src/index.ts",
-    "repository": "https://github.com/chakra-ui/zag/tree/main/packages/machines/cascader",
+    "repository": "https://github.com/chakra-ui/zag/tree/main/packages/machines/cascade-select",
     "sideEffects": false,
     "files": [
         "dist"
diff --git a/packages/machines/cascader/src/cascader.anatomy.ts b/packages/machines/cascade-select/src/cascade-select.anatomy.ts
similarity index 82%
rename from packages/machines/cascader/src/cascader.anatomy.ts
rename to packages/machines/cascade-select/src/cascade-select.anatomy.ts
index 066353fedd..041b6f5c5f 100644
--- a/packages/machines/cascader/src/cascader.anatomy.ts
+++ b/packages/machines/cascade-select/src/cascade-select.anatomy.ts
@@ -1,6 +1,6 @@
 import { createAnatomy } from "@zag-js/anatomy"
 
-export const anatomy = createAnatomy("cascader").parts(
+export const anatomy = createAnatomy("cascade-select").parts(
   "root",
   "label",
   "control",
diff --git a/packages/machines/cascader/src/cascader.collection.ts b/packages/machines/cascade-select/src/cascade-select.collection.ts
similarity index 100%
rename from packages/machines/cascader/src/cascader.collection.ts
rename to packages/machines/cascade-select/src/cascade-select.collection.ts
diff --git a/packages/machines/cascader/src/cascader.connect.ts b/packages/machines/cascade-select/src/cascade-select.connect.ts
similarity index 97%
rename from packages/machines/cascader/src/cascader.connect.ts
rename to packages/machines/cascade-select/src/cascade-select.connect.ts
index 4eb9842b79..659b0b113a 100644
--- a/packages/machines/cascader/src/cascader.connect.ts
+++ b/packages/machines/cascade-select/src/cascade-select.connect.ts
@@ -2,14 +2,14 @@ import { dataAttr, getEventKey, isLeftClick } from "@zag-js/dom-query"
 import { getPlacementStyles } from "@zag-js/popper"
 import type { NormalizeProps, PropTypes } from "@zag-js/types"
 import type { Service } from "@zag-js/core"
-import { parts } from "./cascader.anatomy"
-import { dom } from "./cascader.dom"
-import type { CascaderApi, CascaderSchema, ItemProps, ItemState, LevelProps } from "./cascader.types"
+import { parts } from "./cascade-select.anatomy"
+import { dom } from "./cascade-select.dom"
+import type { CascadeSelectApi, CascadeSelectSchema, ItemProps, ItemState, LevelProps } from "./cascade-select.types"
 
 export function connect<T extends PropTypes>(
-  service: Service<CascaderSchema>,
+  service: Service<CascadeSelectSchema>,
   normalize: NormalizeProps<T>,
-): CascaderApi<T> {
+): CascadeSelectApi<T> {
   const { send, context, prop, scope, computed, state } = service
 
   const collection = prop("collection")
diff --git a/packages/machines/cascader/src/cascader.dom.ts b/packages/machines/cascade-select/src/cascade-select.dom.ts
similarity index 67%
rename from packages/machines/cascader/src/cascader.dom.ts
rename to packages/machines/cascade-select/src/cascade-select.dom.ts
index dbe6b7b01c..761e45482a 100644
--- a/packages/machines/cascader/src/cascader.dom.ts
+++ b/packages/machines/cascade-select/src/cascade-select.dom.ts
@@ -2,19 +2,19 @@ import { createScope } from "@zag-js/dom-query"
 import type { Scope } from "@zag-js/core"
 
 export const dom = createScope({
-  getRootId: (ctx: Scope) => ctx.ids?.root ?? `cascader:${ctx.id}`,
-  getLabelId: (ctx: Scope) => ctx.ids?.label ?? `cascader:${ctx.id}:label`,
-  getControlId: (ctx: Scope) => ctx.ids?.control ?? `cascader:${ctx.id}:control`,
-  getTriggerId: (ctx: Scope) => ctx.ids?.trigger ?? `cascader:${ctx.id}:trigger`,
-  getIndicatorId: (ctx: Scope) => ctx.ids?.indicator ?? `cascader:${ctx.id}:indicator`,
-  getValueTextId: (ctx: Scope) => ctx.ids?.valueText ?? `cascader:${ctx.id}:value-text`,
-  getClearTriggerId: (ctx: Scope) => ctx.ids?.clearTrigger ?? `cascader:${ctx.id}:clear-trigger`,
-  getPositionerId: (ctx: Scope) => ctx.ids?.positioner ?? `cascader:${ctx.id}:positioner`,
-  getContentId: (ctx: Scope) => ctx.ids?.content ?? `cascader:${ctx.id}:content`,
-  getLevelId: (ctx: Scope, level: number) => ctx.ids?.level?.(level) ?? `cascader:${ctx.id}:level:${level}`,
+  getRootId: (ctx: Scope) => ctx.ids?.root ?? `cascade-select:${ctx.id}`,
+  getLabelId: (ctx: Scope) => ctx.ids?.label ?? `cascade-select:${ctx.id}:label`,
+  getControlId: (ctx: Scope) => ctx.ids?.control ?? `cascade-select:${ctx.id}:control`,
+  getTriggerId: (ctx: Scope) => ctx.ids?.trigger ?? `cascade-select:${ctx.id}:trigger`,
+  getIndicatorId: (ctx: Scope) => ctx.ids?.indicator ?? `cascade-select:${ctx.id}:indicator`,
+  getValueTextId: (ctx: Scope) => ctx.ids?.valueText ?? `cascade-select:${ctx.id}:value-text`,
+  getClearTriggerId: (ctx: Scope) => ctx.ids?.clearTrigger ?? `cascade-select:${ctx.id}:clear-trigger`,
+  getPositionerId: (ctx: Scope) => ctx.ids?.positioner ?? `cascade-select:${ctx.id}:positioner`,
+  getContentId: (ctx: Scope) => ctx.ids?.content ?? `cascade-select:${ctx.id}:content`,
+  getLevelId: (ctx: Scope, level: number) => ctx.ids?.level?.(level) ?? `cascade-select:${ctx.id}:level:${level}`,
   getLevelContentId: (ctx: Scope, level: number) =>
-    ctx.ids?.levelContent?.(level) ?? `cascader:${ctx.id}:level:${level}:content`,
-  getItemId: (ctx: Scope, value: string) => ctx.ids?.item?.(value) ?? `cascader:${ctx.id}:item:${value}`,
+    ctx.ids?.levelContent?.(level) ?? `cascade-select:${ctx.id}:level:${level}:content`,
+  getItemId: (ctx: Scope, value: string) => ctx.ids?.item?.(value) ?? `cascade-select:${ctx.id}:item:${value}`,
 
   getRootEl: (ctx: Scope) => dom.getById(ctx, dom.getRootId(ctx)),
   getLabelEl: (ctx: Scope) => dom.getById(ctx, dom.getLabelId(ctx)),
diff --git a/packages/machines/cascader/src/cascader.machine.ts b/packages/machines/cascade-select/src/cascade-select.machine.ts
similarity index 98%
rename from packages/machines/cascader/src/cascader.machine.ts
rename to packages/machines/cascade-select/src/cascade-select.machine.ts
index f9711fc595..97356aac1f 100644
--- a/packages/machines/cascader/src/cascader.machine.ts
+++ b/packages/machines/cascade-select/src/cascade-select.machine.ts
@@ -2,13 +2,13 @@ import { createGuards, createMachine } from "@zag-js/core"
 import { trackDismissableElement } from "@zag-js/dismissable"
 import { raf, trackFormControl } from "@zag-js/dom-query"
 import { getPlacement, type Placement } from "@zag-js/popper"
-import { collection } from "./cascader.collection"
-import { dom } from "./cascader.dom"
-import type { CascaderSchema } from "./cascader.types"
+import { collection } from "./cascade-select.collection"
+import { dom } from "./cascade-select.dom"
+import type { CascadeSelectSchema } from "./cascade-select.types"
 
-const { or, and } = createGuards<CascaderSchema>()
+const { or, and } = createGuards<CascadeSelectSchema>()
 
-export const machine = createMachine<CascaderSchema>({
+export const machine = createMachine<CascadeSelectSchema>({
   props({ props }) {
     // Force "click highlighting mode" when parent selection is allowed
     const highlightTrigger = props.allowParentSelection ? "click" : (props.highlightTrigger ?? "hover")
@@ -889,11 +889,11 @@ export const machine = createMachine<CascaderSchema>({
           existingTimer()
         }
 
-        // Set up new timer with shorter delay for cascader (100ms vs menu's longer delays)
+        // Set up new timer with shorter delay for cascade-select (100ms vs menu's longer delays)
         const timer = setTimeout(() => {
           context.set("clearFocusTimer", null)
           send({ type: "DELAY.CLEAR_FOCUS" })
-        }, 100) // Shorter delay for cascader UX
+        }, 100) // Shorter delay for cascade-select UX
 
         // Store cancel function
         const cancelTimer = () => clearTimeout(timer)
diff --git a/packages/machines/cascader/src/cascader.props.ts b/packages/machines/cascade-select/src/cascade-select.props.ts
similarity index 71%
rename from packages/machines/cascader/src/cascader.props.ts
rename to packages/machines/cascade-select/src/cascade-select.props.ts
index 18299b8e61..024abfdc50 100644
--- a/packages/machines/cascader/src/cascader.props.ts
+++ b/packages/machines/cascade-select/src/cascade-select.props.ts
@@ -1,8 +1,8 @@
 import { createProps } from "@zag-js/types"
 import { createSplitProps } from "@zag-js/utils"
-import type { CascaderProps } from "./cascader.types"
+import type { CascadeSelectProps } from "./cascade-select.types"
 
-export const props = createProps<CascaderProps>()([
+export const props = createProps<CascadeSelectProps>()([
   "allowParentSelection",
   "closeOnSelect",
   "collection",
@@ -31,4 +31,4 @@ export const props = createProps<CascaderProps>()([
   "value",
 ])
 
-export const splitProps = createSplitProps<Partial<CascaderProps>>(props)
+export const splitProps = createSplitProps<Partial<CascadeSelectProps>>(props)
diff --git a/packages/machines/cascader/src/cascader.types.ts b/packages/machines/cascade-select/src/cascade-select.types.ts
similarity index 81%
rename from packages/machines/cascader/src/cascader.types.ts
rename to packages/machines/cascade-select/src/cascade-select.types.ts
index 988ffb0c92..a91c7ee5d3 100644
--- a/packages/machines/cascader/src/cascader.types.ts
+++ b/packages/machines/cascade-select/src/cascade-select.types.ts
@@ -41,21 +41,21 @@ export type ElementIds = Partial<{
  * Machine context
  * -----------------------------------------------------------------------------*/
 
-export interface CascaderProps<T = any> extends DirectionProperty, CommonProperties {
+export interface CascadeSelectProps<T = any> extends DirectionProperty, CommonProperties {
   /**
    * The tree collection data
    */
   collection?: TreeCollection<T> | undefined
   /**
-   * The ids of the cascader elements. Useful for composition.
+   * The ids of the cascade-select elements. Useful for composition.
    */
   ids?: ElementIds | undefined
   /**
-   * The controlled value of the cascader
+   * The controlled value of the cascade-select
    */
   value?: string[][] | undefined
   /**
-   * The initial value of the cascader when rendered.
+   * The initial value of the cascade-select when rendered.
    * Use when you don't need to control the value.
    */
   defaultValue?: string[][] | undefined
@@ -65,50 +65,50 @@ export interface CascaderProps<T = any> extends DirectionProperty, CommonPropert
    */
   multiple?: boolean | undefined
   /**
-   * The controlled open state of the cascader
+   * The controlled open state of the cascade-select
    */
   open?: boolean | undefined
   /**
-   * The initial open state of the cascader when rendered.
+   * The initial open state of the cascade-select when rendered.
    * Use when you don't need to control the open state.
    */
   defaultOpen?: boolean | undefined
   /**
-   * The controlled highlighted value of the cascader
+   * The controlled highlighted value of the cascade-select
    */
   highlightedPath?: string[] | null | undefined
   /**
-   * The placeholder text for the cascader
+   * The placeholder text for the cascade-select
    */
   placeholder?: string | undefined
   /**
-   * Whether the cascader should close when an item is selected
+   * Whether the cascade-select should close when an item is selected
    * @default true
    */
   closeOnSelect?: boolean | undefined
   /**
-   * Whether the cascader should loop focus when navigating with keyboard
+   * Whether the cascade-select should loop focus when navigating with keyboard
    * @default false
    */
   loop?: boolean | undefined
   /**
-   * Whether the cascader is disabled
+   * Whether the cascade-select is disabled
    */
   disabled?: boolean | undefined
   /**
-   * Whether the cascader is read-only
+   * Whether the cascade-select is read-only
    */
   readOnly?: boolean | undefined
   /**
-   * Whether the cascader is required
+   * Whether the cascade-select is required
    */
   required?: boolean | undefined
   /**
-   * Whether the cascader is invalid
+   * Whether the cascade-select is invalid
    */
   invalid?: boolean | undefined
   /**
-   * The positioning options for the cascader content
+   * The positioning options for the cascade-select content
    */
   positioning?: PositioningOptions | undefined
   /**
@@ -146,9 +146,9 @@ export interface CascaderProps<T = any> extends DirectionProperty, CommonPropert
 
 type PropsWithDefault = "collection" | "closeOnSelect" | "loop" | "defaultValue" | "defaultOpen" | "multiple"
 
-export interface CascaderSchema<T extends TreeNode = TreeNode> {
+export interface CascadeSelectSchema<T extends TreeNode = TreeNode> {
   state: "idle" | "focused" | "open"
-  props: RequiredBy<CascaderProps<T>, PropsWithDefault>
+  props: RequiredBy<CascadeSelectProps<T>, PropsWithDefault>
   context: {
     value: string[][]
     highlightedPath: string[] | null
@@ -171,9 +171,9 @@ export interface CascaderSchema<T extends TreeNode = TreeNode> {
   guard: string
 }
 
-export type CascaderService<T extends TreeNode = TreeNode> = Service<CascaderSchema<T>>
+export type CascadeSelectService<T extends TreeNode = TreeNode> = Service<CascadeSelectSchema<T>>
 
-export type CascaderMachine<T extends TreeNode = TreeNode> = Machine<CascaderSchema<T>>
+export type CascadeSelectMachine<T extends TreeNode = TreeNode> = Machine<CascadeSelectSchema<T>>
 
 /* -----------------------------------------------------------------------------
  * Component API
@@ -220,13 +220,13 @@ export interface LevelProps {
   level: number
 }
 
-export interface CascaderApi<T extends PropTypes = PropTypes, V = TreeNode> {
+export interface CascadeSelectApi<T extends PropTypes = PropTypes, V = TreeNode> {
   /**
    * The tree collection data
    */
   collection: TreeCollection<V>
   /**
-   * The current value of the cascader
+   * The current value of the cascade-select
    */
   value: string[][]
   /**
@@ -242,15 +242,15 @@ export interface CascaderApi<T extends PropTypes = PropTypes, V = TreeNode> {
    */
   highlightedPath: string[] | null
   /**
-   * Whether the cascader is open
+   * Whether the cascade-select is open
    */
   open: boolean
   /**
-   * Whether the cascader is focused
+   * Whether the cascade-select is focused
    */
   focused: boolean
   /**
-   * Function to open the cascader
+   * Function to open the cascade-select
    */
   setOpen(open: boolean): void
   /**
diff --git a/packages/machines/cascade-select/src/index.ts b/packages/machines/cascade-select/src/index.ts
new file mode 100644
index 0000000000..64865edd30
--- /dev/null
+++ b/packages/machines/cascade-select/src/index.ts
@@ -0,0 +1,20 @@
+export { anatomy, parts } from "./cascade-select.anatomy"
+export { collection } from "./cascade-select.collection"
+export { connect } from "./cascade-select.connect"
+export { machine } from "./cascade-select.machine"
+export { props, splitProps } from "./cascade-select.props"
+export type {
+  CascadeSelectApi,
+  CascadeSelectMachine,
+  CascadeSelectProps,
+  CascadeSelectSchema,
+  CascadeSelectService,
+  ElementIds,
+  HighlightChangeDetails,
+  ItemProps,
+  ItemState,
+  LevelProps,
+  OpenChangeDetails,
+  TreeNode,
+  ValueChangeDetails,
+} from "./cascade-select.types"
diff --git a/packages/machines/cascader/tsconfig.json b/packages/machines/cascade-select/tsconfig.json
similarity index 100%
rename from packages/machines/cascader/tsconfig.json
rename to packages/machines/cascade-select/tsconfig.json
diff --git a/packages/machines/cascader/src/index.ts b/packages/machines/cascader/src/index.ts
deleted file mode 100644
index e5d6bad4e2..0000000000
--- a/packages/machines/cascader/src/index.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-export { anatomy, parts } from "./cascader.anatomy"
-export { collection } from "./cascader.collection"
-export { connect } from "./cascader.connect"
-export { machine } from "./cascader.machine"
-export { props, splitProps } from "./cascader.props"
-export type {
-  CascaderApi,
-  CascaderMachine,
-  CascaderProps,
-  CascaderSchema,
-  CascaderService,
-  ElementIds,
-  HighlightChangeDetails,
-  ItemProps,
-  ItemState,
-  LevelProps,
-  OpenChangeDetails,
-  TreeNode,
-  ValueChangeDetails,
-} from "./cascader.types"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0550ad0887..c3fd51147e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -164,9 +164,9 @@ importers:
       '@zag-js/carousel':
         specifier: workspace:*
         version: link:../../packages/machines/carousel
-      '@zag-js/cascader':
+      '@zag-js/cascade-select':
         specifier: workspace:*
-        version: link:../../packages/machines/cascader
+        version: link:../../packages/machines/cascade-select
       '@zag-js/checkbox':
         specifier: workspace:*
         version: link:../../packages/machines/checkbox
@@ -1963,7 +1963,7 @@ importers:
         specifier: 2.2.0
         version: 2.2.0
 
-  packages/machines/cascader:
+  packages/machines/cascade-select:
     dependencies:
       '@zag-js/anatomy':
         specifier: workspace:*
diff --git a/shared/src/controls.ts b/shared/src/controls.ts
index 7730c1227b..4d4e34dea4 100644
--- a/shared/src/controls.ts
+++ b/shared/src/controls.ts
@@ -6,7 +6,7 @@ export const accordionControls = defineControls({
   orientation: { type: "select", options: ["horizontal", "vertical"] as const, defaultValue: "vertical" },
 })
 
-export const cascaderControls = defineControls({
+export const cascadeSelectControls = defineControls({
   disabled: { type: "boolean", defaultValue: false },
   readOnly: { type: "boolean", defaultValue: false },
   loop: { type: "boolean", defaultValue: false },
diff --git a/shared/src/css/cascader.css b/shared/src/css/cascade-select.css
similarity index 55%
rename from shared/src/css/cascader.css
rename to shared/src/css/cascade-select.css
index a1f603487b..2313ed135c 100644
--- a/shared/src/css/cascader.css
+++ b/shared/src/css/cascade-select.css
@@ -1,17 +1,17 @@
-[data-scope="cascader"][data-part="label"] {
+[data-scope="cascade-select"][data-part="label"] {
   display: block;
   margin-bottom: 8px;
   font-weight: 500;
 }
 
-[data-scope="cascader"][data-part="control"] {
+[data-scope="cascade-select"][data-part="control"] {
   position: relative;
   display: flex;
   align-items: center;
   gap: 8px;
 }
 
-[data-scope="cascader"][data-part="trigger"] {
+[data-scope="cascade-select"][data-part="trigger"] {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -25,17 +25,17 @@
   transition: all 0.2s ease;
 }
 
-[data-scope="cascader"][data-part="trigger"]:focus {
+[data-scope="cascade-select"][data-part="trigger"]:focus {
   outline: 2px solid #007acc;
   outline-offset: 2px;
 }
 
-[data-scope="cascader"][data-part="trigger"][data-state="open"] {
+[data-scope="cascade-select"][data-part="trigger"][data-state="open"] {
   border-color: #007acc;
   box-shadow: 0 0 0 2px rgba(0, 122, 204, 0.1);
 }
 
-[data-scope="cascader"][data-part="clear-trigger"] {
+[data-scope="cascade-select"][data-part="clear-trigger"] {
   padding: 4px;
   border: none;
   background: none;
@@ -44,15 +44,15 @@
   transition: background 0.15s ease;
 }
 
-[data-scope="cascader"][data-part="clear-trigger"]:hover {
+[data-scope="cascade-select"][data-part="clear-trigger"]:hover {
   background: #f0f0f0;
 }
 
-[data-scope="cascader"][data-part="positioner"] {
+[data-scope="cascade-select"][data-part="positioner"] {
   z-index: 10;
 }
 
-[data-scope="cascader"][data-part="content"] {
+[data-scope="cascade-select"][data-part="content"] {
   background: white;
   border: 1px solid #ccc;
   border-radius: 6px;
@@ -64,16 +64,16 @@
   gap: 1px;
 }
 
-[data-scope="cascader"][data-part="level"] {
+[data-scope="cascade-select"][data-part="level"] {
   min-width: 150px;
   border-right: 1px solid #eee;
 }
 
-[data-scope="cascader"][data-part="level"]:last-child {
+[data-scope="cascade-select"][data-part="level"]:last-child {
   border-right: none;
 }
 
-[data-scope="cascader"][data-part="item"] {
+[data-scope="cascade-select"][data-part="item"] {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -86,49 +86,49 @@
   border: 1px solid transparent;
 }
 
-[data-scope="cascader"][data-part="item"]:hover {
+[data-scope="cascade-select"][data-part="item"]:hover {
   background: #f8fafc;
 }
 
-[data-scope="cascader"][data-part="item"][data-highlighted] {
+[data-scope="cascade-select"][data-part="item"][data-highlighted] {
   background: #f0f9ff;
   color: #0369a1;
   border: 1px solid #bfdbfe;
 }
 
-[data-scope="cascader"][data-part="item"][data-disabled] {
+[data-scope="cascade-select"][data-part="item"][data-disabled] {
   opacity: 0.5;
   cursor: not-allowed;
 }
 
-[data-scope="cascader"][data-part="item"][data-disabled]:hover {
+[data-scope="cascade-select"][data-part="item"][data-disabled]:hover {
   background: transparent;
 }
 
 /* Item text styling */
-[data-scope="cascader"][data-part="item-text"] {
+[data-scope="cascade-select"][data-part="item-text"] {
   flex: 1;
   transition: all 0.15s ease;
 }
 
 /* Item indicator (chevron for branches) */
-[data-scope="cascader"][data-part="item-indicator"] {
+[data-scope="cascade-select"][data-part="item-indicator"] {
   color: #6b7280;
   display: flex;
   align-items: center;
   transition: color 0.15s ease;
 }
 
-[data-scope="cascader"][data-part="item-indicator"][data-highlighted] {
+[data-scope="cascade-select"][data-part="item-indicator"][data-highlighted] {
   color: #0369a1;
 }
 
-[data-scope="cascader"][data-part="item"][data-has-children][data-highlighted]
-  [data-scope="cascader"][data-part="item-indicator"] {
+[data-scope="cascade-select"][data-part="item"][data-has-children][data-highlighted]
+  [data-scope="cascade-select"][data-part="item-indicator"] {
   color: #0369a1;
 }
 
 /* Placeholder text */
-[data-scope="cascader"][data-part="value-text"][data-placeholder] {
+[data-scope="cascade-select"][data-part="value-text"][data-placeholder] {
   color: #999;
 }
diff --git a/shared/src/routes.ts b/shared/src/routes.ts
index c9bd1e8699..4804c3cfab 100644
--- a/shared/src/routes.ts
+++ b/shared/src/routes.ts
@@ -4,7 +4,7 @@ type RouteData = {
 }
 
 export const routesData: RouteData[] = [
-  { label: "Cascader", path: "/cascader" },
+  { label: "Cascade Select", path: "/cascade-select" },
   { label: "Password Input", path: "/password-input" },
   { label: "Listbox", path: "/listbox" },
   { label: "Listbox (Grid)", path: "/listbox-grid" },
diff --git a/shared/src/style.css b/shared/src/style.css
index 6a5116c2a9..811cd83558 100644
--- a/shared/src/style.css
+++ b/shared/src/style.css
@@ -4,7 +4,7 @@
 @import url("./css/avatar.css");
 
 @import url("./css/carousel.css");
-@import url("./css/cascader.css");
+@import url("./css/cascade-select.css");
 @import url("./css/checkbox.css");
 @import url("./css/clipboard.css");
 @import url("./css/collapsible.css");

From 186dba5437570a54f1a355c725fa16c1e93aa9dd Mon Sep 17 00:00:00 2001
From: anubra266 <anubra266@gmail.com>
Date: Wed, 4 Jun 2025 15:13:17 -0700
Subject: [PATCH 03/20] chore: remove delays

---
 examples/next-ts/pages/cascade-select.tsx     | 30 +++++----
 packages/machines/cascade-select/README.md    | 61 +++++++++++++++++++
 packages/machines/cascade-select/package.json |  1 +
 .../src/cascade-select.anatomy.ts             |  1 -
 .../src/cascade-select.connect.ts             | 23 ++++---
 .../cascade-select/src/cascade-select.dom.ts  |  3 -
 .../src/cascade-select.machine.ts             | 42 +------------
 .../src/cascade-select.types.ts               |  3 -
 pnpm-lock.yaml                                |  3 +
 9 files changed, 92 insertions(+), 75 deletions(-)
 create mode 100644 packages/machines/cascade-select/README.md

diff --git a/examples/next-ts/pages/cascade-select.tsx b/examples/next-ts/pages/cascade-select.tsx
index d33e01ca8b..e1257b0727 100644
--- a/examples/next-ts/pages/cascade-select.tsx
+++ b/examples/next-ts/pages/cascade-select.tsx
@@ -112,23 +112,21 @@ export default function Page() {
 
     return (
       <div key={level} {...api.getLevelProps({ level })}>
-        <div {...api.getLevelContentProps({ level })}>
-          {levelValues.map((value) => {
-            const itemState = api.getItemState({ value })
-            const node = collection.findNode(value)
+        {levelValues.map((value) => {
+          const itemState = api.getItemState({ value })
+          const node = collection.findNode(value)
 
-            return (
-              <div key={value} {...api.getItemProps({ value })}>
-                <span {...api.getItemTextProps({ value })}>{node?.label}</span>
-                {itemState.hasChildren && (
-                  <span {...api.getItemIndicatorProps({ value })}>
-                    <ChevronRightIcon size={16} />
-                  </span>
-                )}
-              </div>
-            )
-          })}
-        </div>
+          return (
+            <div key={value} {...api.getItemProps({ value })}>
+              <span {...api.getItemTextProps({ value })}>{node?.label}</span>
+              {itemState.hasChildren && (
+                <span {...api.getItemIndicatorProps({ value })}>
+                  <ChevronRightIcon size={16} />
+                </span>
+              )}
+            </div>
+          )
+        })}
       </div>
     )
   }
diff --git a/packages/machines/cascade-select/README.md b/packages/machines/cascade-select/README.md
new file mode 100644
index 0000000000..69f02a8343
--- /dev/null
+++ b/packages/machines/cascade-select/README.md
@@ -0,0 +1,61 @@
+# Cascade Select Machine
+
+A machine for building cascade select (cascading dropdowns) components.
+
+## Features
+
+- Support for hierarchical data structures
+- Keyboard navigation
+- Multiple selection mode
+- Parent item selection (optional)
+- **Safe Triangle Navigation** - Prevents premature submenu closure when moving mouse from parent items to their
+  children
+
+## Safe Triangle Feature
+
+The safe triangle is a user experience enhancement that solves a common problem in cascading menus: when you move your
+mouse from a parent item toward its submenu, the mouse briefly leaves the parent item, which would normally cause the
+submenu to close before you can reach it.
+
+The safe triangle creates an invisible triangular area between the parent item and its submenu. As long as the mouse
+stays within this triangle, the submenu remains open, allowing users to smoothly navigate to child items.
+
+### How it works
+
+1. When `highlightTrigger` is set to `"hover"` (default)
+2. And a user moves their mouse away from a parent item that has children
+3. A safe triangle is calculated from the mouse position to the submenu area
+4. The submenu stays open as long as the mouse is within this triangle
+5. If the mouse moves outside the triangle, the submenu closes
+6. The triangle automatically expires after 300ms to prevent indefinite hovering
+
+### Key improvements for cascade-select layout
+
+- **Bidirectional navigation**: Works when moving from parent to child AND child to parent
+- **Straight-line optimized**: Designed for the cascade-select's horizontal level layout
+- **Simple corridor**: Creates a rectangular "corridor" between adjacent levels rather than complex triangular areas
+
+### Debugging the safe triangle
+
+To help debug safe triangle behavior, you can temporarily add this to your CSS to visualize the polygon:
+
+```css
+/* Add this temporarily to see the safe triangle area */
+.safe-triangle-debug {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 9999;
+}
+```
+
+The safe triangle is automatically enabled for hover-based highlighting and requires no additional configuration.
+
+## Installation
+
+```bash
+npm install @zag-js/cascade-select
+```
diff --git a/packages/machines/cascade-select/package.json b/packages/machines/cascade-select/package.json
index c21a2d2128..ff949bc2f5 100644
--- a/packages/machines/cascade-select/package.json
+++ b/packages/machines/cascade-select/package.json
@@ -33,6 +33,7 @@
         "@zag-js/dismissable": "workspace:*",
         "@zag-js/dom-query": "workspace:*",
         "@zag-js/popper": "workspace:*",
+        "@zag-js/rect-utils": "workspace:*",
         "@zag-js/types": "workspace:*",
         "@zag-js/utils": "workspace:*"
     },
diff --git a/packages/machines/cascade-select/src/cascade-select.anatomy.ts b/packages/machines/cascade-select/src/cascade-select.anatomy.ts
index 041b6f5c5f..5e1a2c4490 100644
--- a/packages/machines/cascade-select/src/cascade-select.anatomy.ts
+++ b/packages/machines/cascade-select/src/cascade-select.anatomy.ts
@@ -11,7 +11,6 @@ export const anatomy = createAnatomy("cascade-select").parts(
   "positioner",
   "content",
   "level",
-  "levelContent",
   "item",
   "itemText",
   "itemIndicator",
diff --git a/packages/machines/cascade-select/src/cascade-select.connect.ts b/packages/machines/cascade-select/src/cascade-select.connect.ts
index 659b0b113a..76c2107b5d 100644
--- a/packages/machines/cascade-select/src/cascade-select.connect.ts
+++ b/packages/machines/cascade-select/src/cascade-select.connect.ts
@@ -296,15 +296,6 @@ export function connect<T extends PropTypes>(
       })
     },
 
-    getLevelContentProps(props: LevelProps) {
-      const { level } = props
-      return normalize.element({
-        ...parts.levelContent.attrs,
-        id: dom.getLevelContentId(scope, level),
-        "data-level": level,
-      })
-    },
-
     getItemProps(props: ItemProps) {
       const { value: itemValue } = props
       const itemState = this.getItemState(props)
@@ -327,12 +318,20 @@ export function connect<T extends PropTypes>(
           if (itemState.disabled) return
           send({ type: "ITEM.CLICK", value: itemValue })
         },
-        onPointerMove() {
+        onPointerMove(event) {
           if (itemState.disabled) return
+          if (event.pointerType !== "mouse") return
           send({ type: "ITEM.POINTER_MOVE", value: itemValue })
         },
-        onPointerLeave() {
-          send({ type: "ITEM.POINTER_LEAVE", value: itemValue })
+        onPointerLeave(event) {
+          if (itemState.disabled) return
+          if (event.pointerType !== "mouse") return
+          send({
+            type: "ITEM.POINTER_LEAVE",
+            value: itemValue,
+            clientX: event.clientX,
+            clientY: event.clientY,
+          })
         },
       })
     },
diff --git a/packages/machines/cascade-select/src/cascade-select.dom.ts b/packages/machines/cascade-select/src/cascade-select.dom.ts
index 761e45482a..0ffeb7a462 100644
--- a/packages/machines/cascade-select/src/cascade-select.dom.ts
+++ b/packages/machines/cascade-select/src/cascade-select.dom.ts
@@ -12,8 +12,6 @@ export const dom = createScope({
   getPositionerId: (ctx: Scope) => ctx.ids?.positioner ?? `cascade-select:${ctx.id}:positioner`,
   getContentId: (ctx: Scope) => ctx.ids?.content ?? `cascade-select:${ctx.id}:content`,
   getLevelId: (ctx: Scope, level: number) => ctx.ids?.level?.(level) ?? `cascade-select:${ctx.id}:level:${level}`,
-  getLevelContentId: (ctx: Scope, level: number) =>
-    ctx.ids?.levelContent?.(level) ?? `cascade-select:${ctx.id}:level:${level}:content`,
   getItemId: (ctx: Scope, value: string) => ctx.ids?.item?.(value) ?? `cascade-select:${ctx.id}:item:${value}`,
 
   getRootEl: (ctx: Scope) => dom.getById(ctx, dom.getRootId(ctx)),
@@ -26,7 +24,6 @@ export const dom = createScope({
   getPositionerEl: (ctx: Scope) => dom.getById(ctx, dom.getPositionerId(ctx)),
   getContentEl: (ctx: Scope) => dom.getById(ctx, dom.getContentId(ctx)),
   getLevelEl: (ctx: Scope, level: number) => dom.getById(ctx, dom.getLevelId(ctx, level)),
-  getLevelContentEl: (ctx: Scope, level: number) => dom.getById(ctx, dom.getLevelContentId(ctx, level)),
   getItemEl: (ctx: Scope, value: string) => dom.getById(ctx, dom.getItemId(ctx, value)),
 })
 
diff --git a/packages/machines/cascade-select/src/cascade-select.machine.ts b/packages/machines/cascade-select/src/cascade-select.machine.ts
index 97356aac1f..665844cf03 100644
--- a/packages/machines/cascade-select/src/cascade-select.machine.ts
+++ b/packages/machines/cascade-select/src/cascade-select.machine.ts
@@ -61,9 +61,6 @@ export const machine = createMachine<CascadeSelectSchema>({
       levelValues: bindable<string[][]>(() => ({
         defaultValue: [],
       })),
-      clearFocusTimer: bindable<(() => void) | null>(() => ({
-        defaultValue: null,
-      })),
     }
   },
 
@@ -296,7 +293,7 @@ export const machine = createMachine<CascadeSelectSchema>({
         "ITEM.POINTER_LEAVE": [
           {
             guard: "isHoverHighlighting",
-            actions: ["scheduleDelayedClear"],
+            actions: ["clearHighlightedPath"],
           },
         ],
         "CONTENT.ARROW_DOWN": [
@@ -365,9 +362,6 @@ export const machine = createMachine<CascadeSelectSchema>({
             actions: ["invokeOnClose"],
           },
         ],
-        "DELAY.CLEAR_FOCUS": {
-          actions: ["clearHighlightedPath"],
-        },
         CLOSE: [
           {
             guard: "isOpenControlled",
@@ -514,14 +508,8 @@ export const machine = createMachine<CascadeSelectSchema>({
       },
       setHighlightedPath({ context, event, prop }) {
         const { value } = event
-        const collection = prop("collection")
 
-        // Cancel any existing clear focus timer
-        const existingTimer = context.get("clearFocusTimer")
-        if (existingTimer) {
-          existingTimer()
-          context.set("clearFocusTimer", null)
-        }
+        const collection = prop("collection")
 
         context.set("highlightedPath", value)
 
@@ -565,13 +553,6 @@ export const machine = createMachine<CascadeSelectSchema>({
         }
       },
       clearHighlightedPath({ context, action }) {
-        // Cancel any existing clear focus timer
-        const existingTimer = context.get("clearFocusTimer")
-        if (existingTimer) {
-          existingTimer()
-          context.set("clearFocusTimer", null)
-        }
-
         // Clear the highlighted path
         context.set("highlightedPath", null)
 
@@ -882,25 +863,6 @@ export const machine = createMachine<CascadeSelectSchema>({
           send({ type: "HIGHLIGHTED_PATH.SET", value: null })
         }
       },
-      scheduleDelayedClear({ context, send }) {
-        // Cancel any existing timer first
-        const existingTimer = context.get("clearFocusTimer")
-        if (existingTimer) {
-          existingTimer()
-        }
-
-        // Set up new timer with shorter delay for cascade-select (100ms vs menu's longer delays)
-        const timer = setTimeout(() => {
-          context.set("clearFocusTimer", null)
-          send({ type: "DELAY.CLEAR_FOCUS" })
-        }, 100) // Shorter delay for cascade-select UX
-
-        // Store cancel function
-        const cancelTimer = () => clearTimeout(timer)
-        context.set("clearFocusTimer", cancelTimer)
-
-        return cancelTimer
-      },
     },
   },
 })
diff --git a/packages/machines/cascade-select/src/cascade-select.types.ts b/packages/machines/cascade-select/src/cascade-select.types.ts
index a91c7ee5d3..7606b2a22c 100644
--- a/packages/machines/cascade-select/src/cascade-select.types.ts
+++ b/packages/machines/cascade-select/src/cascade-select.types.ts
@@ -33,7 +33,6 @@ export type ElementIds = Partial<{
   positioner: string
   content: string
   level(level: number): string
-  levelContent(level: number): string
   item(value: string): string
 }>
 
@@ -155,7 +154,6 @@ export interface CascadeSelectSchema<T extends TreeNode = TreeNode> {
     currentPlacement: Placement | undefined
     fieldsetDisabled: boolean
     levelValues: string[][]
-    clearFocusTimer: (() => void) | null
   }
   computed: {
     hasValue: boolean
@@ -288,7 +286,6 @@ export interface CascadeSelectApi<T extends PropTypes = PropTypes, V = TreeNode>
   getPositionerProps(): T["element"]
   getContentProps(): T["element"]
   getLevelProps(props: LevelProps): T["element"]
-  getLevelContentProps(props: LevelProps): T["element"]
   getItemState(props: ItemProps): ItemState
   getItemProps(props: ItemProps): T["element"]
   getItemTextProps(props: ItemProps): T["element"]
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c3fd51147e..ab653f63ec 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1983,6 +1983,9 @@ importers:
       '@zag-js/popper':
         specifier: workspace:*
         version: link:../../utilities/popper
+      '@zag-js/rect-utils':
+        specifier: workspace:*
+        version: link:../../utilities/rect
       '@zag-js/types':
         specifier: workspace:*
         version: link:../../types

From 9928e5136497c0603c76083aa35e724ceb08b2c9 Mon Sep 17 00:00:00 2001
From: anubra266 <anubra266@gmail.com>
Date: Wed, 4 Jun 2025 15:54:41 -0700
Subject: [PATCH 04/20] chore: remove hover highlighting

---
 .../src/cascade-select.connect.ts             | 22 ++-----
 .../src/cascade-select.machine.ts             | 62 +++++++++----------
 .../src/cascade-select.props.ts               |  1 -
 .../src/cascade-select.types.ts               | 10 ---
 shared/src/controls.ts                        |  5 --
 5 files changed, 35 insertions(+), 65 deletions(-)

diff --git a/packages/machines/cascade-select/src/cascade-select.connect.ts b/packages/machines/cascade-select/src/cascade-select.connect.ts
index 76c2107b5d..600a3ad43b 100644
--- a/packages/machines/cascade-select/src/cascade-select.connect.ts
+++ b/packages/machines/cascade-select/src/cascade-select.connect.ts
@@ -173,14 +173,15 @@ export function connect<T extends PropTypes>(
               event.preventDefault()
               send({ type: "TRIGGER.ARROW_UP" })
               break
+            case "ArrowRight":
+              event.preventDefault()
+              send({ type: "TRIGGER.ARROW_RIGHT" })
+              break
             case "Enter":
             case " ":
               event.preventDefault()
               send({ type: "TRIGGER.ENTER" })
               break
-            case "Escape":
-              send({ type: "TRIGGER.ESCAPE" })
-              break
           }
         },
       })
@@ -318,21 +319,6 @@ export function connect<T extends PropTypes>(
           if (itemState.disabled) return
           send({ type: "ITEM.CLICK", value: itemValue })
         },
-        onPointerMove(event) {
-          if (itemState.disabled) return
-          if (event.pointerType !== "mouse") return
-          send({ type: "ITEM.POINTER_MOVE", value: itemValue })
-        },
-        onPointerLeave(event) {
-          if (itemState.disabled) return
-          if (event.pointerType !== "mouse") return
-          send({
-            type: "ITEM.POINTER_LEAVE",
-            value: itemValue,
-            clientX: event.clientX,
-            clientY: event.clientY,
-          })
-        },
       })
     },
 
diff --git a/packages/machines/cascade-select/src/cascade-select.machine.ts b/packages/machines/cascade-select/src/cascade-select.machine.ts
index 665844cf03..4941b31a9c 100644
--- a/packages/machines/cascade-select/src/cascade-select.machine.ts
+++ b/packages/machines/cascade-select/src/cascade-select.machine.ts
@@ -10,9 +10,6 @@ const { or, and } = createGuards<CascadeSelectSchema>()
 
 export const machine = createMachine<CascadeSelectSchema>({
   props({ props }) {
-    // Force "click highlighting mode" when parent selection is allowed
-    const highlightTrigger = props.allowParentSelection ? "click" : (props.highlightTrigger ?? "hover")
-
     return {
       closeOnSelect: true,
       loop: false,
@@ -28,7 +25,6 @@ export const machine = createMachine<CascadeSelectSchema>({
       },
       ...props,
       collection: props.collection ?? collection.empty(),
-      highlightTrigger,
     }
   },
 
@@ -65,20 +61,8 @@ export const machine = createMachine<CascadeSelectSchema>({
   },
 
   computed: {
-    hasValue: ({ context }) => context.get("value").length > 0,
     isDisabled: ({ prop, context }) => !!prop("disabled") || !!context.get("fieldsetDisabled"),
     isInteractive: ({ prop }) => !(prop("disabled") || prop("readOnly")),
-    selectedItems: ({ context, prop }) => {
-      const value = context.get("value")
-      const collection = prop("collection")
-      return value.flatMap((path) => path.map((v) => collection.findNode(v)).filter(Boolean))
-    },
-    highlightedItem: ({ context, prop }) => {
-      const highlightedPath = context.get("highlightedPath")
-      return highlightedPath && highlightedPath.length > 0
-        ? prop("collection").findNode(highlightedPath[highlightedPath.length - 1])
-        : null
-    },
     levelDepth: ({ context }) => {
       return Math.max(1, context.get("levelValues").length)
     },
@@ -185,7 +169,7 @@ export const machine = createMachine<CascadeSelectSchema>({
             actions: ["highlightLastItem"],
           },
           {
-            guard: or("isTriggerArrowDownEvent", "isTriggerEnterEvent"),
+            guard: or("isTriggerArrowDownEvent", "isTriggerEnterEvent", ""),
             target: "open",
             actions: ["highlightFirstItem"],
           },
@@ -233,6 +217,16 @@ export const machine = createMachine<CascadeSelectSchema>({
             actions: ["invokeOnOpen", "highlightFirstItem"],
           },
         ],
+        "TRIGGER.ARROW_RIGHT": [
+          {
+            guard: "isOpenControlled",
+            actions: ["invokeOnOpen"],
+          },
+          {
+            target: "open",
+            actions: ["invokeOnOpen", "highlightFirstItem"],
+          },
+        ],
         "TRIGGER.BLUR": {
           target: "idle",
         },
@@ -284,18 +278,6 @@ export const machine = createMachine<CascadeSelectSchema>({
             actions: ["setHighlightedPathFromValue"],
           },
         ],
-        "ITEM.POINTER_MOVE": [
-          {
-            guard: "isHoverHighlighting",
-            actions: ["setHighlightedPathFromValue"],
-          },
-        ],
-        "ITEM.POINTER_LEAVE": [
-          {
-            guard: "isHoverHighlighting",
-            actions: ["clearHighlightedPath"],
-          },
-        ],
         "CONTENT.ARROW_DOWN": [
           {
             guard: "hasHighlightedPath",
@@ -321,6 +303,20 @@ export const machine = createMachine<CascadeSelectSchema>({
           },
         ],
         "CONTENT.ARROW_LEFT": [
+          {
+            guard: and("isAtRootLevel", "isOpenControlled"),
+            actions: ["invokeOnClose", "focusTriggerEl"],
+          },
+          {
+            guard: and("isAtRootLevel", "restoreFocus"),
+            target: "focused",
+            actions: ["invokeOnClose", "focusTriggerEl"],
+          },
+          {
+            guard: "isAtRootLevel",
+            target: "idle",
+            actions: ["invokeOnClose"],
+          },
           {
             guard: "canNavigateToParent",
             actions: ["highlightParent"],
@@ -389,9 +385,8 @@ export const machine = createMachine<CascadeSelectSchema>({
       isTriggerArrowUpEvent: ({ event }) => event.previousEvent?.type === "TRIGGER.ARROW_UP",
       isTriggerArrowDownEvent: ({ event }) => event.previousEvent?.type === "TRIGGER.ARROW_DOWN",
       isTriggerEnterEvent: ({ event }) => event.previousEvent?.type === "TRIGGER.ENTER",
+      isTriggerArrowRightEvent: ({ event }) => event.previousEvent?.type === "TRIGGER.ARROW_RIGHT",
       hasHighlightedPath: ({ context }) => context.get("highlightedPath") != null,
-      loop: ({ prop }) => !!prop("loop"),
-      isHoverHighlighting: ({ prop }) => prop("highlightTrigger") === "hover",
       shouldCloseOnSelect: ({ prop, event }) => {
         if (!prop("closeOnSelect")) return false
 
@@ -463,6 +458,11 @@ export const machine = createMachine<CascadeSelectSchema>({
         // We can navigate to parent if the path has more than one item
         return highlightedPath.length > 1
       },
+      isAtRootLevel: ({ context }) => {
+        const highlightedPath = context.get("highlightedPath")
+        // We're at root level if there's no highlighted path or the path has only one item (root child)
+        return !highlightedPath || highlightedPath.length <= 1
+      },
     },
 
     effects: {
diff --git a/packages/machines/cascade-select/src/cascade-select.props.ts b/packages/machines/cascade-select/src/cascade-select.props.ts
index 024abfdc50..3b02b563e6 100644
--- a/packages/machines/cascade-select/src/cascade-select.props.ts
+++ b/packages/machines/cascade-select/src/cascade-select.props.ts
@@ -13,7 +13,6 @@ export const props = createProps<CascadeSelectProps>()([
   "formatValue",
   "getRootNode",
   "highlightedPath",
-  "highlightTrigger",
   "id",
   "ids",
   "invalid",
diff --git a/packages/machines/cascade-select/src/cascade-select.types.ts b/packages/machines/cascade-select/src/cascade-select.types.ts
index 7606b2a22c..b7623231f4 100644
--- a/packages/machines/cascade-select/src/cascade-select.types.ts
+++ b/packages/machines/cascade-select/src/cascade-select.types.ts
@@ -130,15 +130,8 @@ export interface CascadeSelectProps<T = any> extends DirectionProperty, CommonPr
    * Function to determine if a node should be selectable
    */
   isItemDisabled?: ((value: string) => boolean) | undefined
-  /**
-   * How highlighting is triggered
-   * - "hover": Items are highlighted on hover (default)
-   * - "click": Items are highlighted only on click
-   */
-  highlightTrigger?: "hover" | "click"
   /**
    * Whether parent (branch) items can be selected
-   * When true, highlightTrigger is forced to "click"
    */
   allowParentSelection?: boolean
 }
@@ -156,11 +149,8 @@ export interface CascadeSelectSchema<T extends TreeNode = TreeNode> {
     levelValues: string[][]
   }
   computed: {
-    hasValue: boolean
     isDisabled: boolean
     isInteractive: boolean
-    selectedItems: T[]
-    highlightedItem: T | null
     levelDepth: number
     valueText: string
   }
diff --git a/shared/src/controls.ts b/shared/src/controls.ts
index 4d4e34dea4..77c169a84d 100644
--- a/shared/src/controls.ts
+++ b/shared/src/controls.ts
@@ -13,11 +13,6 @@ export const cascadeSelectControls = defineControls({
   multiple: { type: "boolean", defaultValue: false },
   dir: { type: "select", options: ["ltr", "rtl"] as const, defaultValue: "ltr" },
   closeOnSelect: { type: "boolean", defaultValue: true },
-  highlightTrigger: {
-    type: "select",
-    options: ["hover", "click"] as const,
-    defaultValue: "hover",
-  },
   allowParentSelection: {
     type: "boolean",
     defaultValue: false,

From 02be2a344f0345702392c6c13147205b217d2afc Mon Sep 17 00:00:00 2001
From: anubra266 <anubra266@gmail.com>
Date: Thu, 5 Jun 2025 22:01:12 -0700
Subject: [PATCH 05/20] chore: add `highlightTrigger` option

---
 examples/next-ts/pages/cascade-select.tsx     |   1 +
 .../src/cascade-select.connect.ts             |  14 ++
 .../src/cascade-select.grace-area.ts          | 126 ++++++++++
 .../src/cascade-select.machine.ts             | 236 ++++++++++++++++++
 .../src/cascade-select.types.ts               |  17 +-
 shared/src/controls.ts                        |   5 +
 shared/src/css/cascade-select.css             |  79 ++++--
 7 files changed, 462 insertions(+), 16 deletions(-)
 create mode 100644 packages/machines/cascade-select/src/cascade-select.grace-area.ts

diff --git a/examples/next-ts/pages/cascade-select.tsx b/examples/next-ts/pages/cascade-select.tsx
index e1257b0727..dd878da34c 100644
--- a/examples/next-ts/pages/cascade-select.tsx
+++ b/examples/next-ts/pages/cascade-select.tsx
@@ -81,6 +81,7 @@ const collection = cascadeSelect.collection<Node>({
           { value: "oats", label: "Oats" },
         ],
       },
+      { value: "dairy", label: "Dairy" },
     ],
   },
 })
diff --git a/packages/machines/cascade-select/src/cascade-select.connect.ts b/packages/machines/cascade-select/src/cascade-select.connect.ts
index 600a3ad43b..a79cf2502a 100644
--- a/packages/machines/cascade-select/src/cascade-select.connect.ts
+++ b/packages/machines/cascade-select/src/cascade-select.connect.ts
@@ -285,6 +285,10 @@ export function connect<T extends PropTypes>(
             event.preventDefault()
           }
         },
+        onPointerMove(event) {
+          if (!isInteractive) return
+          send({ type: "POINTER_MOVE", clientX: event.clientX, clientY: event.clientY, target: event.target })
+        },
       })
     },
 
@@ -319,6 +323,16 @@ export function connect<T extends PropTypes>(
           if (itemState.disabled) return
           send({ type: "ITEM.CLICK", value: itemValue })
         },
+        onPointerEnter(event) {
+          if (!isInteractive) return
+          if (itemState.disabled) return
+          send({ type: "ITEM.POINTER_ENTER", value: itemValue, clientX: event.clientX, clientY: event.clientY })
+        },
+        onPointerLeave(event) {
+          if (!isInteractive) return
+          if (itemState.disabled) return
+          send({ type: "ITEM.POINTER_LEAVE", value: itemValue, clientX: event.clientX, clientY: event.clientY })
+        },
       })
     },
 
diff --git a/packages/machines/cascade-select/src/cascade-select.grace-area.ts b/packages/machines/cascade-select/src/cascade-select.grace-area.ts
new file mode 100644
index 0000000000..2d0e0e2337
--- /dev/null
+++ b/packages/machines/cascade-select/src/cascade-select.grace-area.ts
@@ -0,0 +1,126 @@
+import { isPointInPolygon, type Point } from "@zag-js/rect-utils"
+
+export interface GraceAreaOptions {
+  padding?: number
+}
+
+export function createGraceArea(
+  exitPoint: Point,
+  triggerRect: DOMRect,
+  targetRect: DOMRect,
+  options: GraceAreaOptions = {},
+): Point[] {
+  const { padding = 5 } = options
+
+  // Determine the exit side based on the exit point relative to the trigger
+  const exitSide = getExitSide(exitPoint, triggerRect)
+
+  // Create padded exit points
+  const paddedExitPoints = getPaddedExitPoints(exitPoint, exitSide, padding)
+
+  // Get target rect corners
+  const targetPoints = getRectCorners(targetRect)
+
+  // Create convex hull from padded exit points and target points
+  return getConvexHull([...paddedExitPoints, ...targetPoints])
+}
+
+export function isPointerInGraceArea(point: Point, graceArea: Point[]): boolean {
+  return isPointInPolygon(graceArea, point)
+}
+
+function getExitSide(point: Point, rect: DOMRect): "top" | "right" | "bottom" | "left" {
+  const { x, y } = point
+  const { top, right, bottom, left } = rect
+
+  const distanceToTop = Math.abs(top - y)
+  const distanceToRight = Math.abs(right - x)
+  const distanceToBottom = Math.abs(bottom - y)
+  const distanceToLeft = Math.abs(left - x)
+
+  const minDistance = Math.min(distanceToTop, distanceToRight, distanceToBottom, distanceToLeft)
+
+  if (minDistance === distanceToLeft) return "left"
+  if (minDistance === distanceToRight) return "right"
+  if (minDistance === distanceToTop) return "top"
+  return "bottom"
+}
+
+function getPaddedExitPoints(exitPoint: Point, exitSide: string, padding: number): Point[] {
+  const { x, y } = exitPoint
+
+  switch (exitSide) {
+    case "top":
+      return [
+        { x: x - padding, y: y + padding },
+        { x: x + padding, y: y + padding },
+      ]
+    case "bottom":
+      return [
+        { x: x - padding, y: y - padding },
+        { x: x + padding, y: y - padding },
+      ]
+    case "left":
+      return [
+        { x: x + padding, y: y - padding },
+        { x: x + padding, y: y + padding },
+      ]
+    case "right":
+      return [
+        { x: x - padding, y: y - padding },
+        { x: x - padding, y: y + padding },
+      ]
+    default:
+      return []
+  }
+}
+
+function getRectCorners(rect: DOMRect): Point[] {
+  const { top, right, bottom, left } = rect
+  return [
+    { x: left, y: top },
+    { x: right, y: top },
+    { x: right, y: bottom },
+    { x: left, y: bottom },
+  ]
+}
+
+// Simplified convex hull algorithm (Andrew's algorithm)
+function getConvexHull(points: Point[]): Point[] {
+  if (points.length <= 1) return points.slice()
+
+  // Sort points lexicographically
+  const sortedPoints = points.slice().sort((a, b) => {
+    if (a.x !== b.x) return a.x - b.x
+    return a.y - b.y
+  })
+
+  // Build lower hull
+  const lower: Point[] = []
+  for (const point of sortedPoints) {
+    while (lower.length >= 2 && crossProduct(lower[lower.length - 2], lower[lower.length - 1], point) <= 0) {
+      lower.pop()
+    }
+    lower.push(point)
+  }
+
+  // Build upper hull
+  const upper: Point[] = []
+  for (let i = sortedPoints.length - 1; i >= 0; i--) {
+    const point = sortedPoints[i]
+    while (upper.length >= 2 && crossProduct(upper[upper.length - 2], upper[upper.length - 1], point) <= 0) {
+      upper.pop()
+    }
+    upper.push(point)
+  }
+
+  // Remove last point of each half because it's repeated at the beginning of the other half
+  lower.pop()
+  upper.pop()
+
+  return lower.concat(upper)
+}
+
+function crossProduct(o: Point, a: Point, b: Point): number {
+  return (a.x - o.x) * (b.y - o.y) - (a.y - o.y) * (b.x - o.x)
+}
diff --git a/packages/machines/cascade-select/src/cascade-select.machine.ts b/packages/machines/cascade-select/src/cascade-select.machine.ts
index 4941b31a9c..93438442e0 100644
--- a/packages/machines/cascade-select/src/cascade-select.machine.ts
+++ b/packages/machines/cascade-select/src/cascade-select.machine.ts
@@ -2,8 +2,10 @@ import { createGuards, createMachine } from "@zag-js/core"
 import { trackDismissableElement } from "@zag-js/dismissable"
 import { raf, trackFormControl } from "@zag-js/dom-query"
 import { getPlacement, type Placement } from "@zag-js/popper"
+import type { Point } from "@zag-js/rect-utils"
 import { collection } from "./cascade-select.collection"
 import { dom } from "./cascade-select.dom"
+import { createGraceArea, isPointerInGraceArea } from "./cascade-select.grace-area"
 import type { CascadeSelectSchema } from "./cascade-select.types"
 
 const { or, and } = createGuards<CascadeSelectSchema>()
@@ -16,6 +18,7 @@ export const machine = createMachine<CascadeSelectSchema>({
       defaultValue: [],
       defaultOpen: false,
       multiple: false,
+      highlightTrigger: "click",
       placeholder: "Select an option",
       allowParentSelection: false,
       positioning: {
@@ -57,6 +60,12 @@ export const machine = createMachine<CascadeSelectSchema>({
       levelValues: bindable<string[][]>(() => ({
         defaultValue: [],
       })),
+      graceArea: bindable<Point[] | null>(() => ({
+        defaultValue: null,
+      })),
+      isPointerInTransit: bindable<boolean>(() => ({
+        defaultValue: false,
+      })),
     }
   },
 
@@ -278,6 +287,30 @@ export const machine = createMachine<CascadeSelectSchema>({
             actions: ["setHighlightedPathFromValue"],
           },
         ],
+        "ITEM.POINTER_ENTER": [
+          {
+            guard: "isHoverHighlight",
+            actions: ["setHighlightingForHoveredItem"],
+          },
+        ],
+        "ITEM.POINTER_LEAVE": [
+          {
+            guard: and("isHoverHighlight", "shouldHighlightOnHover"),
+            actions: ["createGraceArea"],
+          },
+        ],
+        POINTER_MOVE: [
+          {
+            guard: and("isHoverHighlight", "hasGraceArea", "isPointerOutsideGraceArea", "isPointerNotInAnyItem"),
+            actions: ["clearHighlightAndGraceArea"],
+          },
+        ],
+        "GRACE_AREA.CLEAR": [
+          {
+            guard: "isHoverHighlight",
+            actions: ["clearHighlightAndGraceArea"],
+          },
+        ],
         "CONTENT.ARROW_DOWN": [
           {
             guard: "hasHighlightedPath",
@@ -463,6 +496,108 @@ export const machine = createMachine<CascadeSelectSchema>({
         // We're at root level if there's no highlighted path or the path has only one item (root child)
         return !highlightedPath || highlightedPath.length <= 1
       },
+      isHoverHighlight: ({ prop }) => {
+        return prop("highlightTrigger") === "hover"
+      },
+      shouldHighlightOnHover: ({ prop, event }) => {
+        const collection = prop("collection")
+        const node = collection.findNode(event.value)
+        // Only highlight on hover if the item has children (is a parent)
+        return node && collection.isBranchNode(node)
+      },
+      shouldUpdateHighlightedPath: ({ prop, context, event }) => {
+        const collection = prop("collection")
+        const currentHighlightedPath = context.get("highlightedPath")
+
+        if (!currentHighlightedPath || currentHighlightedPath.length === 0) {
+          return false // No current highlighting
+        }
+
+        const hoveredValue = event.value
+        const node = collection.findNode(hoveredValue)
+
+        // Only for leaf items (non-parent items)
+        if (!node || collection.isBranchNode(node)) {
+          return false
+        }
+
+        // Get the full path to the hovered item
+        const indexPath = collection.getIndexPath(hoveredValue)
+        if (!indexPath) return false
+
+        const hoveredItemPath = collection.getValuePath(indexPath)
+
+        // Check if paths share a common prefix but diverge
+        const minLength = Math.min(hoveredItemPath.length, currentHighlightedPath.length)
+        let commonPrefixLength = 0
+
+        for (let i = 0; i < minLength; i++) {
+          if (hoveredItemPath[i] === currentHighlightedPath[i]) {
+            commonPrefixLength = i + 1
+          } else {
+            break
+          }
+        }
+
+        // If we have a common prefix and the paths diverge, we should update
+        return (
+          commonPrefixLength > 0 &&
+          (commonPrefixLength < currentHighlightedPath.length || commonPrefixLength < hoveredItemPath.length)
+        )
+      },
+      isItemOutsideHighlightedPath: ({ prop, context, event }) => {
+        const collection = prop("collection")
+        const currentHighlightedPath = context.get("highlightedPath")
+
+        if (!currentHighlightedPath || currentHighlightedPath.length === 0) {
+          return false // No current highlighting, so don't clear
+        }
+
+        const hoveredValue = event.value
+
+        // Get the full path to the hovered item
+        const indexPath = collection.getIndexPath(hoveredValue)
+        if (!indexPath) return true // Invalid item, clear highlighting
+
+        const hoveredItemPath = collection.getValuePath(indexPath)
+
+        // Check if the hovered item path is compatible with current highlighted path
+        // Two cases:
+        // 1. Hovered item is part of the highlighted path (child/descendant)
+        // 2. Highlighted path is part of the hovered item path (parent/ancestor)
+
+        const minLength = Math.min(hoveredItemPath.length, currentHighlightedPath.length)
+
+        // Check if the paths share a common prefix
+        for (let i = 0; i < minLength; i++) {
+          if (hoveredItemPath[i] !== currentHighlightedPath[i]) {
+            return true // Paths diverge, clear highlighting
+          }
+        }
+
+        return false // Paths are compatible, don't clear
+      },
+      hasGraceArea: ({ context }) => {
+        return context.get("graceArea") != null
+      },
+      isPointerOutsideGraceArea: ({ context, event }) => {
+        const graceArea = context.get("graceArea")
+        if (!graceArea) return false
+
+        const point = { x: event.clientX, y: event.clientY }
+        return !isPointerInGraceArea(point, graceArea)
+      },
+      isPointerInTargetElement: ({ event, scope }) => {
+        const target = event.target as HTMLElement
+        const contentEl = dom.getContentEl(scope)
+        return contentEl?.contains(target) ?? false
+      },
+      isPointerNotInAnyItem: ({ event }) => {
+        const target = event.target as HTMLElement
+        // Check if the pointer is over any item element
+        const itemElement = target.closest('[role="option"]')
+        return !itemElement
+      },
     },
 
     effects: {
@@ -863,6 +998,107 @@ export const machine = createMachine<CascadeSelectSchema>({
           send({ type: "HIGHLIGHTED_PATH.SET", value: null })
         }
       },
+      createGraceArea({ context, event, scope }) {
+        const { value } = event
+        const triggerElement = dom.getItemEl(scope, value)
+
+        if (!triggerElement) return
+
+        const exitPoint = { x: event.clientX, y: event.clientY }
+        const triggerRect = triggerElement.getBoundingClientRect()
+
+        // Find the next level that would contain children of this item
+        const highlightedPath = context.get("highlightedPath")
+        if (!highlightedPath) return
+
+        const currentLevel = highlightedPath.length - 1
+        const nextLevelEl = dom.getLevelEl(scope, currentLevel + 1)
+
+        if (!nextLevelEl) {
+          // No next level, no grace area needed
+          return
+        }
+
+        const targetRect = nextLevelEl.getBoundingClientRect()
+        const graceArea = createGraceArea(exitPoint, triggerRect, targetRect)
+
+        context.set("graceArea", graceArea)
+        context.set("isPointerInTransit", true)
+
+        // Set a timer to clear the grace area after a short delay
+        setTimeout(() => {
+          context.set("graceArea", null)
+          context.set("isPointerInTransit", false)
+        }, 300)
+      },
+      clearGraceArea({ context }) {
+        context.set("graceArea", null)
+        context.set("isPointerInTransit", false)
+      },
+      clearHighlightAndGraceArea({ context, action }) {
+        // Clear highlighted path
+        context.set("highlightedPath", null)
+
+        // Clear grace area
+        context.set("graceArea", null)
+        context.set("isPointerInTransit", false)
+
+        // Restore level values to match the actual selected values
+        action(["syncLevelValues"])
+      },
+      setHighlightingForHoveredItem({ context, prop, event, action }) {
+        const collection = prop("collection")
+        const hoveredValue = event.value
+
+        // Get the full path to the hovered item
+        const indexPath = collection.getIndexPath(hoveredValue)
+        if (!indexPath) {
+          // Invalid item, clear highlighting
+          context.set("highlightedPath", null)
+          return
+        }
+
+        const hoveredItemPath = collection.getValuePath(indexPath)
+        const node = collection.findNode(hoveredValue)
+
+        let newHighlightedPath: string[]
+
+        if (node && collection.isBranchNode(node)) {
+          // Item has children - highlight the full path including this item
+          newHighlightedPath = hoveredItemPath
+        } else {
+          // Item is a leaf - highlight path up to (but not including) this item
+          newHighlightedPath = hoveredItemPath.slice(0, -1)
+        }
+
+        context.set("highlightedPath", newHighlightedPath.length > 0 ? newHighlightedPath : null)
+
+        // Update level values based on the new highlighted path
+        if (newHighlightedPath.length > 0) {
+          const levelValues: string[][] = []
+
+          // First level is always root children
+          const rootNode = collection.rootNode
+          if (rootNode && collection.isBranchNode(rootNode)) {
+            levelValues[0] = collection.getNodeChildren(rootNode).map((child) => collection.getNodeValue(child))
+          }
+
+          // Build levels for the highlighted path
+          for (let i = 0; i < newHighlightedPath.length; i++) {
+            const nodeValue = newHighlightedPath[i]
+            const pathNode = collection.findNode(nodeValue)
+            if (pathNode && collection.isBranchNode(pathNode)) {
+              const children = collection.getNodeChildren(pathNode)
+              levelValues[i + 1] = children.map((child) => collection.getNodeValue(child))
+            }
+          }
+
+          context.set("levelValues", levelValues)
+        } else {
+          // No highlighting, sync with selected values
+          action(["syncLevelValues"])
+        }
+      },
     },
   },
 })
diff --git a/packages/machines/cascade-select/src/cascade-select.types.ts b/packages/machines/cascade-select/src/cascade-select.types.ts
index b7623231f4..03ac83460c 100644
--- a/packages/machines/cascade-select/src/cascade-select.types.ts
+++ b/packages/machines/cascade-select/src/cascade-select.types.ts
@@ -1,6 +1,7 @@
 import type { TreeCollection, TreeNode } from "@zag-js/collection"
 import type { Machine, Service } from "@zag-js/core"
 import type { Placement, PositioningOptions } from "@zag-js/popper"
+import type { Point } from "@zag-js/rect-utils"
 import type { CommonProperties, DirectionProperty, PropTypes, RequiredBy } from "@zag-js/types"
 
 /* -----------------------------------------------------------------------------
@@ -76,6 +77,11 @@ export interface CascadeSelectProps<T = any> extends DirectionProperty, CommonPr
    * The controlled highlighted value of the cascade-select
    */
   highlightedPath?: string[] | null | undefined
+  /**
+   * What triggers highlighting of items
+   * @default "click"
+   */
+  highlightTrigger?: "click" | "hover" | undefined
   /**
    * The placeholder text for the cascade-select
    */
@@ -136,7 +142,14 @@ export interface CascadeSelectProps<T = any> extends DirectionProperty, CommonPr
   allowParentSelection?: boolean
 }
 
-type PropsWithDefault = "collection" | "closeOnSelect" | "loop" | "defaultValue" | "defaultOpen" | "multiple"
+type PropsWithDefault =
+  | "collection"
+  | "closeOnSelect"
+  | "loop"
+  | "defaultValue"
+  | "defaultOpen"
+  | "multiple"
+  | "highlightTrigger"
 
 export interface CascadeSelectSchema<T extends TreeNode = TreeNode> {
   state: "idle" | "focused" | "open"
@@ -147,6 +160,8 @@ export interface CascadeSelectSchema<T extends TreeNode = TreeNode> {
     currentPlacement: Placement | undefined
     fieldsetDisabled: boolean
     levelValues: string[][]
+    graceArea: Point[] | null
+    isPointerInTransit: boolean
   }
   computed: {
     isDisabled: boolean
diff --git a/shared/src/controls.ts b/shared/src/controls.ts
index 77c169a84d..33f08a71c4 100644
--- a/shared/src/controls.ts
+++ b/shared/src/controls.ts
@@ -17,6 +17,11 @@ export const cascadeSelectControls = defineControls({
     type: "boolean",
     defaultValue: false,
   },
+  highlightTrigger: {
+    type: "select",
+    options: ["click", "hover"] as const,
+    defaultValue: "hover",
+  },
 })
 
 export const checkboxControls = defineControls({
diff --git a/shared/src/css/cascade-select.css b/shared/src/css/cascade-select.css
index 2313ed135c..084401d836 100644
--- a/shared/src/css/cascade-select.css
+++ b/shared/src/css/cascade-select.css
@@ -57,43 +57,68 @@
   border: 1px solid #ccc;
   border-radius: 6px;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-  padding: 8px;
+  padding: 6px;
   max-height: 300px;
   overflow: auto;
   display: flex;
-  gap: 1px;
+  gap: 8px;
 }
 
 [data-scope="cascade-select"][data-part="level"] {
-  min-width: 150px;
-  border-right: 1px solid #eee;
+  min-width: 140px;
+  padding: 2px 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0px;
+  position: relative;
+}
+
+/* Add a subtle separator line between levels */
+[data-scope="cascade-select"][data-part="level"]:not(:last-child)::after {
+  content: "";
+  position: absolute;
+  right: -4px;
+  top: 6px;
+  bottom: 6px;
+  width: 1px;
+  background: #e5e7eb;
+  opacity: 0.6;
 }
 
 [data-scope="cascade-select"][data-part="level"]:last-child {
-  border-right: none;
+  /* No additional styling needed */
 }
 
 [data-scope="cascade-select"][data-part="item"] {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 8px 12px;
+  padding: 6px 10px;
   cursor: pointer;
   border-radius: 4px;
   font-size: 14px;
   transition: all 0.15s ease;
   position: relative;
   border: 1px solid transparent;
+  min-height: 32px;
+  gap: 6px;
 }
 
 [data-scope="cascade-select"][data-part="item"]:hover {
-  background: #f8fafc;
+  background: #e2e8f0;
+  border-color: #cbd5e1;
 }
 
 [data-scope="cascade-select"][data-part="item"][data-highlighted] {
-  background: #f0f9ff;
-  color: #0369a1;
-  border: 1px solid #bfdbfe;
+  background: #dbeafe;
+  color: #1e40af;
+  border: 1px solid #93c5fd;
+  box-shadow: 0 1px 3px rgba(59, 130, 246, 0.1);
+}
+
+[data-scope="cascade-select"][data-part="item"][data-highlighted]:hover {
+  background: #bfdbfe;
+  border-color: #60a5fa;
 }
 
 [data-scope="cascade-select"][data-part="item"][data-disabled] {
@@ -103,29 +128,53 @@
 
 [data-scope="cascade-select"][data-part="item"][data-disabled]:hover {
   background: transparent;
+  border-color: transparent;
 }
 
 /* Item text styling */
 [data-scope="cascade-select"][data-part="item-text"] {
   flex: 1;
   transition: all 0.15s ease;
+  text-align: left;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-/* Item indicator (chevron for branches) */
+/* Item indicator (chevron for branches) - reserve space even when not present */
 [data-scope="cascade-select"][data-part="item-indicator"] {
   color: #6b7280;
   display: flex;
   align-items: center;
+  justify-content: center;
   transition: color 0.15s ease;
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+}
+
+/* Add consistent right padding area for all items, even those without indicators */
+[data-scope="cascade-select"][data-part="item"]::after {
+  content: "";
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+  visibility: hidden;
+}
+
+/* Hide the pseudo-element when there's an actual indicator */
+[data-scope="cascade-select"][data-part="item"]:has([data-scope="cascade-select"][data-part="item-indicator"])::after {
+  display: none;
 }
 
-[data-scope="cascade-select"][data-part="item-indicator"][data-highlighted] {
-  color: #0369a1;
+/* Indicator hover and state styles */
+[data-scope="cascade-select"][data-part="item"]:hover [data-scope="cascade-select"][data-part="item-indicator"] {
+  color: #475569;
 }
 
-[data-scope="cascade-select"][data-part="item"][data-has-children][data-highlighted]
+[data-scope="cascade-select"][data-part="item"][data-highlighted]
   [data-scope="cascade-select"][data-part="item-indicator"] {
-  color: #0369a1;
+  color: #1e40af;
 }
 
 /* Placeholder text */

From 8aa6904e881e77886b89465ec67852ab82d8b014 Mon Sep 17 00:00:00 2001
From: anubra266 <anubra266@gmail.com>
Date: Thu, 5 Jun 2025 22:34:06 -0700
Subject: [PATCH 06/20] chore: refactor grace area

---
 .../src/cascade-select.grace-area.ts          | 76 ++++++++-----------
 1 file changed, 32 insertions(+), 44 deletions(-)

diff --git a/packages/machines/cascade-select/src/cascade-select.grace-area.ts b/packages/machines/cascade-select/src/cascade-select.grace-area.ts
index 2d0e0e2337..4aa0f92df5 100644
--- a/packages/machines/cascade-select/src/cascade-select.grace-area.ts
+++ b/packages/machines/cascade-select/src/cascade-select.grace-area.ts
@@ -1,4 +1,11 @@
-import { isPointInPolygon, type Point } from "@zag-js/rect-utils"
+import {
+  isPointInPolygon,
+  type Point,
+  createPoint,
+  createRect,
+  getRectCorners,
+  closestSideToPoint,
+} from "@zag-js/rect-utils"
 
 export interface GraceAreaOptions {
   padding?: number
@@ -13,13 +20,19 @@ export function createGraceArea(
   const { padding = 5 } = options
 
   // Determine the exit side based on the exit point relative to the trigger
-  const exitSide = getExitSide(exitPoint, triggerRect)
+  const triggerRectObj = createRect({
+    x: triggerRect.left,
+    y: triggerRect.top,
+    width: triggerRect.width,
+    height: triggerRect.height,
+  })
+  const exitSide = closestSideToPoint(triggerRectObj, exitPoint)
 
   // Create padded exit points
   const paddedExitPoints = getPaddedExitPoints(exitPoint, exitSide, padding)
 
   // Get target rect corners
-  const targetPoints = getRectCorners(targetRect)
+  const targetPoints = domRectToPoints(targetRect)
 
   // Create convex hull from padded exit points and target points
   return getConvexHull([...paddedExitPoints, ...targetPoints])
@@ -29,60 +42,35 @@ export function isPointerInGraceArea(point: Point, graceArea: Point[]): boolean
   return isPointInPolygon(graceArea, point)
 }
 
-function getExitSide(point: Point, rect: DOMRect): "top" | "right" | "bottom" | "left" {
-  const { x, y } = point
-  const { top, right, bottom, left } = rect
-
-  const distanceToTop = Math.abs(top - y)
-  const distanceToRight = Math.abs(right - x)
-  const distanceToBottom = Math.abs(bottom - y)
-  const distanceToLeft = Math.abs(left - x)
-
-  const minDistance = Math.min(distanceToTop, distanceToRight, distanceToBottom, distanceToLeft)
-
-  if (minDistance === distanceToLeft) return "left"
-  if (minDistance === distanceToRight) return "right"
-  if (minDistance === distanceToTop) return "top"
-  return "bottom"
-}
-
 function getPaddedExitPoints(exitPoint: Point, exitSide: string, padding: number): Point[] {
   const { x, y } = exitPoint
 
   switch (exitSide) {
     case "top":
-      return [
-        { x: x - padding, y: y + padding },
-        { x: x + padding, y: y + padding },
-      ]
+      return [createPoint(x - padding, y + padding), createPoint(x + padding, y + padding)]
     case "bottom":
-      return [
-        { x: x - padding, y: y - padding },
-        { x: x + padding, y: y - padding },
-      ]
+      return [createPoint(x - padding, y - padding), createPoint(x + padding, y - padding)]
     case "left":
-      return [
-        { x: x + padding, y: y - padding },
-        { x: x + padding, y: y + padding },
-      ]
+      return [createPoint(x + padding, y - padding), createPoint(x + padding, y + padding)]
     case "right":
-      return [
-        { x: x - padding, y: y - padding },
-        { x: x - padding, y: y + padding },
-      ]
+      return [createPoint(x - padding, y - padding), createPoint(x - padding, y + padding)]
     default:
       return []
   }
 }
 
-function getRectCorners(rect: DOMRect): Point[] {
-  const { top, right, bottom, left } = rect
-  return [
-    { x: left, y: top },
-    { x: right, y: top },
-    { x: right, y: bottom },
-    { x: left, y: bottom },
-  ]
+function domRectToPoints(rect: DOMRect): Point[] {
+  // Convert DOMRect to our Rect type and use the utility function
+  const rectObj = createRect({
+    x: rect.left,
+    y: rect.top,
+    width: rect.width,
+    height: rect.height,
+  })
+
+  const corners = getRectCorners(rectObj)
+  // Convert the corner object to an array in the order we need
+  return [corners.top, corners.right, corners.bottom, corners.left]
 }
 
 // Simplified convex hull algorithm (Andrew's algorithm)

From 44b2560ca02a2c3b8eb77a26639e2159232123e3 Mon Sep 17 00:00:00 2001
From: anubra266 <anubra266@gmail.com>
Date: Fri, 6 Jun 2025 01:37:07 -0700
Subject: [PATCH 07/20] refactor: improve utility functions for cascade select
 machine

---
 .../src/cascade-select.machine.ts             | 110 +++++++++---------
 ....grace-area.ts => cascade-select.utils.ts} |   0
 2 files changed, 58 insertions(+), 52 deletions(-)
 rename packages/machines/cascade-select/src/{cascade-select.grace-area.ts => cascade-select.utils.ts} (100%)

diff --git a/packages/machines/cascade-select/src/cascade-select.machine.ts b/packages/machines/cascade-select/src/cascade-select.machine.ts
index 93438442e0..729e76458c 100644
--- a/packages/machines/cascade-select/src/cascade-select.machine.ts
+++ b/packages/machines/cascade-select/src/cascade-select.machine.ts
@@ -3,9 +3,10 @@ import { trackDismissableElement } from "@zag-js/dismissable"
 import { raf, trackFormControl } from "@zag-js/dom-query"
 import { getPlacement, type Placement } from "@zag-js/popper"
 import type { Point } from "@zag-js/rect-utils"
+import { last, isEmpty, nextIndex, prevIndex, isEqual } from "@zag-js/utils"
 import { collection } from "./cascade-select.collection"
 import { dom } from "./cascade-select.dom"
-import { createGraceArea, isPointerInGraceArea } from "./cascade-select.grace-area"
+import { createGraceArea, isPointerInGraceArea } from "./cascade-select.utils"
 import type { CascadeSelectSchema } from "./cascade-select.types"
 
 const { or, and } = createGuards<CascadeSelectSchema>()
@@ -77,7 +78,7 @@ export const machine = createMachine<CascadeSelectSchema>({
     },
     valueText: ({ context, prop }) => {
       const value = context.get("value")
-      if (value.length === 0) return prop("placeholder") ?? ""
+      if (isEmpty(value)) return prop("placeholder") ?? ""
       const collection = prop("collection")
       return (
         prop("formatValue")?.(value) ??
@@ -433,10 +434,11 @@ export const machine = createMachine<CascadeSelectSchema>({
         if (!prop("closeOnSelect")) return false
 
         const highlightedPath = context.get("highlightedPath")
-        if (!highlightedPath || highlightedPath.length === 0) return false
+        if (!highlightedPath || isEmpty(highlightedPath)) return false
 
         const collection = prop("collection")
-        const leafValue = highlightedPath[highlightedPath.length - 1]
+        const leafValue = last(highlightedPath)
+        if (!leafValue) return false
         const node = collection.findNode(leafValue)
 
         // Only close if selecting a leaf node (no children)
@@ -458,10 +460,11 @@ export const machine = createMachine<CascadeSelectSchema>({
       },
       canSelectHighlightedItem: ({ prop, context }) => {
         const highlightedPath = context.get("highlightedPath")
-        if (!highlightedPath || highlightedPath.length === 0) return false
+        if (!highlightedPath || isEmpty(highlightedPath)) return false
 
         const collection = prop("collection")
-        const leafValue = highlightedPath[highlightedPath.length - 1]
+        const leafValue = last(highlightedPath)
+        if (!leafValue) return false
         const node = collection.findNode(leafValue)
 
         if (!node) return false
@@ -476,17 +479,18 @@ export const machine = createMachine<CascadeSelectSchema>({
       },
       canNavigateToChild: ({ prop, context }) => {
         const highlightedPath = context.get("highlightedPath")
-        if (!highlightedPath || highlightedPath.length === 0) return false
+        if (!highlightedPath || isEmpty(highlightedPath)) return false
 
         const collection = prop("collection")
-        const leafValue = highlightedPath[highlightedPath.length - 1]
+        const leafValue = last(highlightedPath)
+        if (!leafValue) return false
         const node = collection.findNode(leafValue)
 
         return node && collection.isBranchNode(node)
       },
       canNavigateToParent: ({ context }) => {
         const highlightedPath = context.get("highlightedPath")
-        if (!highlightedPath || highlightedPath.length === 0) return false
+        if (!highlightedPath || isEmpty(highlightedPath)) return false
 
         // We can navigate to parent if the path has more than one item
         return highlightedPath.length > 1
@@ -648,7 +652,7 @@ export const machine = createMachine<CascadeSelectSchema>({
 
         context.set("highlightedPath", value)
 
-        if (value && value.length > 0) {
+        if (value && !isEmpty(value)) {
           // Build level values to show the path to the highlighted item and its children
           const levelValues: string[][] = []
 
@@ -723,8 +727,7 @@ export const machine = createMachine<CascadeSelectSchema>({
               const isChildOfNew =
                 existingPath.length > valuePath.length && valuePath.every((val, idx) => val === existingPath[idx])
               // Remove if this is the exact same path
-              const isSamePath =
-                existingPath.length === valuePath.length && existingPath.every((val, idx) => val === valuePath[idx])
+              const isSamePath = isEqual(existingPath, valuePath)
 
               return !isParentOfNew && !isChildOfNew && !isSamePath
             })
@@ -747,7 +750,7 @@ export const machine = createMachine<CascadeSelectSchema>({
           // When parent selection is not allowed, only leaf items update the value
           if (hasChildren) {
             // For branch nodes, just navigate into them (update value path but don't "select")
-            if (multiple && currentValues.length > 0) {
+            if (multiple && !isEmpty(currentValues)) {
               // Use the most recent selection as base for navigation
               context.set("value", [...currentValues.slice(0, -1), valuePath])
             } else {
@@ -758,9 +761,7 @@ export const machine = createMachine<CascadeSelectSchema>({
             // For leaf nodes, actually select them
             if (multiple) {
               // Check if this path already exists
-              const existingIndex = currentValues.findIndex(
-                (path) => path.length === valuePath.length && path.every((val, idx) => val === valuePath[idx]),
-              )
+              const existingIndex = currentValues.findIndex((path) => isEqual(path, valuePath))
 
               if (existingIndex >= 0) {
                 // Remove existing selection (toggle off)
@@ -781,9 +782,11 @@ export const machine = createMachine<CascadeSelectSchema>({
       },
       selectHighlightedItem({ context, send }) {
         const highlightedPath = context.get("highlightedPath")
-        if (highlightedPath && highlightedPath.length > 0) {
-          const leafValue = highlightedPath[highlightedPath.length - 1]
-          send({ type: "ITEM.SELECT", value: leafValue })
+        if (highlightedPath && !isEmpty(highlightedPath)) {
+          const leafValue = last(highlightedPath)
+          if (leafValue) {
+            send({ type: "ITEM.SELECT", value: leafValue })
+          }
         }
       },
       syncLevelValues({ context, prop }) {
@@ -798,15 +801,17 @@ export const machine = createMachine<CascadeSelectSchema>({
         }
 
         // Use the most recent selection for building levels
-        const mostRecentValue = values.length > 0 ? values[values.length - 1] : []
+        const mostRecentValue = !isEmpty(values) ? last(values) : []
 
         // Build subsequent levels based on most recent value path
-        for (let i = 0; i < mostRecentValue.length; i++) {
-          const nodeValue = mostRecentValue[i]
-          const node = collection.findNode(nodeValue)
-          if (node && collection.isBranchNode(node)) {
-            const children = collection.getNodeChildren(node)
-            levelValues[i + 1] = children.map((child) => collection.getNodeValue(child))
+        if (mostRecentValue) {
+          for (let i = 0; i < mostRecentValue.length; i++) {
+            const nodeValue = mostRecentValue[i]
+            const node = collection.findNode(nodeValue)
+            if (node && collection.isBranchNode(node)) {
+              const children = collection.getNodeChildren(node)
+              levelValues[i + 1] = children.map((child) => collection.getNodeValue(child))
+            }
           }
         }
 
@@ -831,9 +836,11 @@ export const machine = createMachine<CascadeSelectSchema>({
         const currentLevelIndex = Math.max(0, value.length)
         const currentLevel = levelValues[currentLevelIndex]
 
-        if (currentLevel && currentLevel.length > 0) {
-          const lastValue = currentLevel[currentLevel.length - 1]
-          send({ type: "HIGHLIGHTED_PATH.SET", value: [lastValue] })
+        if (currentLevel && !isEmpty(currentLevel)) {
+          const lastValue = last(currentLevel)
+          if (lastValue) {
+            send({ type: "HIGHLIGHTED_PATH.SET", value: [lastValue] })
+          }
         }
       },
       highlightNextItem({ context, prop, send }) {
@@ -852,7 +859,9 @@ export const machine = createMachine<CascadeSelectSchema>({
         }
 
         // Find which level contains the last item in the highlighted path
-        const leafValue = highlightedPath[highlightedPath.length - 1]
+        const leafValue = last(highlightedPath)
+        if (!leafValue) return
+
         let targetLevel: string[] | undefined
         let levelIndex = -1
 
@@ -864,17 +873,13 @@ export const machine = createMachine<CascadeSelectSchema>({
           }
         }
 
-        if (!targetLevel || targetLevel.length === 0) return
+        if (!targetLevel || isEmpty(targetLevel)) return
 
         const currentIndex = targetLevel.indexOf(leafValue)
         if (currentIndex === -1) return
 
-        let nextIndex = currentIndex + 1
-        if (nextIndex >= targetLevel.length) {
-          nextIndex = prop("loop") ? 0 : currentIndex
-        }
-
-        const nextValue = targetLevel[nextIndex]
+        const nextIdx = nextIndex(targetLevel, currentIndex, { loop: prop("loop") })
+        const nextValue = targetLevel[nextIdx]
 
         // Build the correct path: parent path + next value
         if (levelIndex === 0) {
@@ -902,7 +907,9 @@ export const machine = createMachine<CascadeSelectSchema>({
         }
 
         // Find which level contains the last item in the highlighted path
-        const leafValue = highlightedPath[highlightedPath.length - 1]
+        const leafValue = last(highlightedPath)
+        if (!leafValue) return
+
         let targetLevel: string[] | undefined
         let levelIndex = -1
 
@@ -914,17 +921,13 @@ export const machine = createMachine<CascadeSelectSchema>({
           }
         }
 
-        if (!targetLevel || targetLevel.length === 0) return
+        if (!targetLevel || isEmpty(targetLevel)) return
 
         const currentIndex = targetLevel.indexOf(leafValue)
         if (currentIndex === -1) return
 
-        let prevIndex = currentIndex - 1
-        if (prevIndex < 0) {
-          prevIndex = prop("loop") ? targetLevel.length - 1 : 0
-        }
-
-        const prevValue = targetLevel[prevIndex]
+        const prevIdx = prevIndex(targetLevel, currentIndex, { loop: prop("loop") })
+        const prevValue = targetLevel[prevIdx]
 
         // Build the correct path: parent path + prev value
         if (levelIndex === 0) {
@@ -938,10 +941,11 @@ export const machine = createMachine<CascadeSelectSchema>({
       },
       highlightFirstChild({ context, prop, send }) {
         const highlightedPath = context.get("highlightedPath")
-        if (!highlightedPath || highlightedPath.length === 0) return
+        if (!highlightedPath || isEmpty(highlightedPath)) return
 
         const collection = prop("collection")
-        const leafValue = highlightedPath[highlightedPath.length - 1]
+        const leafValue = last(highlightedPath)
+        if (!leafValue) return
         const node = collection.findNode(leafValue)
 
         if (!node || !collection.isBranchNode(node)) return
@@ -989,10 +993,12 @@ export const machine = createMachine<CascadeSelectSchema>({
         const values = context.get("value")
 
         // Always start fresh - clear any existing highlighted path first
-        if (values.length > 0) {
+        if (!isEmpty(values)) {
           // Use the most recent selection and highlight its full path
-          const mostRecentSelection = values[values.length - 1]
-          send({ type: "HIGHLIGHTED_PATH.SET", value: mostRecentSelection })
+          const mostRecentSelection = last(values)
+          if (mostRecentSelection) {
+            send({ type: "HIGHLIGHTED_PATH.SET", value: mostRecentSelection })
+          }
         } else {
           // No selections - start with no highlight so user sees all options
           send({ type: "HIGHLIGHTED_PATH.SET", value: null })
@@ -1071,10 +1077,10 @@ export const machine = createMachine<CascadeSelectSchema>({
           newHighlightedPath = hoveredItemPath.slice(0, -1)
         }
 
-        context.set("highlightedPath", newHighlightedPath.length > 0 ? newHighlightedPath : null)
+        context.set("highlightedPath", !isEmpty(newHighlightedPath) ? newHighlightedPath : null)
 
         // Update level values based on the new highlighted path
-        if (newHighlightedPath.length > 0) {
+        if (!isEmpty(newHighlightedPath)) {
           const levelValues: string[][] = []
 
           // First level is always root children
diff --git a/packages/machines/cascade-select/src/cascade-select.grace-area.ts b/packages/machines/cascade-select/src/cascade-select.utils.ts
similarity index 100%
rename from packages/machines/cascade-select/src/cascade-select.grace-area.ts
rename to packages/machines/cascade-select/src/cascade-select.utils.ts

From 85bf81a3161ac31baf7ca7232fdb0d6d8ecc0142 Mon Sep 17 00:00:00 2001
From: anubra266 <anubra266@gmail.com>
Date: Fri, 6 Jun 2025 11:12:27 -0700
Subject: [PATCH 08/20] chore: add tests

---
 e2e/cascade-select.e2e.ts          | 333 +++++++++++++++++++++++++++++
 e2e/models/cascade-select.model.ts | 147 +++++++++++++
 shared/src/controls.ts             |   2 +-
 3 files changed, 481 insertions(+), 1 deletion(-)
 create mode 100644 e2e/cascade-select.e2e.ts
 create mode 100644 e2e/models/cascade-select.model.ts

diff --git a/e2e/cascade-select.e2e.ts b/e2e/cascade-select.e2e.ts
new file mode 100644
index 0000000000..1c3d7d31e5
--- /dev/null
+++ b/e2e/cascade-select.e2e.ts
@@ -0,0 +1,333 @@
+import { test } from "@playwright/test"
+import { CascadeSelectModel } from "./models/cascade-select.model"
+
+let I: CascadeSelectModel
+
+test.beforeEach(async ({ page }) => {
+  I = new CascadeSelectModel(page)
+  await I.goto()
+})
+
+test.describe("accessibility", () => {
+  test("should have no accessibility violation", async () => {
+    await I.checkAccessibility()
+  })
+
+  test("clicking the label should focus control", async () => {
+    await I.clickLabel()
+    await I.seeTriggerIsFocused()
+  })
+})
+
+test.describe("basic functionality", () => {
+  test("should toggle dropdown on trigger click", async () => {
+    await I.clickTrigger()
+    await I.seeDropdown()
+    await I.seeLevel(0)
+
+    await I.clickTrigger()
+    await I.dontSeeDropdown()
+  })
+
+  test("should show clear trigger when value is selected", async () => {
+    await I.dontSeeClearTrigger()
+
+    await I.clickTrigger()
+    await I.clickItem("Dairy")
+    await I.seeTriggerHasText("Dairy")
+    await I.seeClearTrigger()
+  })
+
+  test("should clear value when clear trigger is clicked", async () => {
+    await I.clickTrigger()
+    await I.clickItem("Dairy")
+    await I.seeTriggerHasText("Dairy")
+
+    await I.clickClearTrigger()
+    await I.seeTriggerHasText("Select food category")
+    await I.dontSeeClearTrigger()
+  })
+})
+
+test.describe("navigation and levels", () => {
+  test("should show multiple levels when navigating into parent items", async () => {
+    await I.clickTrigger()
+    await I.seeLevel(0)
+    await I.dontSeeLevel(1)
+
+    // Click on Fruits (parent item)
+    await I.clickItem("Fruits")
+    await I.seeLevel(0)
+    await I.seeLevel(1)
+    await I.dontSeeLevel(2)
+
+    // Click on Citrus (parent item)
+    await I.clickItem("Citrus")
+    await I.seeLevel(0)
+    await I.seeLevel(1)
+    await I.seeLevel(2)
+  })
+
+  test("should show item indicators for parent items", async () => {
+    await I.clickTrigger()
+
+    // Parent items should have indicators
+    await I.seeItemHasIndicator("Fruits")
+    await I.seeItemHasIndicator("Vegetables")
+    await I.seeItemHasIndicator("Grains")
+
+    // Leaf item should not have indicator
+    await I.dontSeeItemHasIndicator("Dairy")
+  })
+})
+
+test.describe("keyboard navigation", () => {
+  test("should open dropdown with Enter and navigate with arrows", async () => {
+    await I.focusTrigger()
+    await I.pressKey("Enter")
+    await I.seeDropdown()
+
+    await I.pressKey("ArrowDown")
+    await I.seeItemIsHighlighted("Fruits")
+
+    await I.pressKey("ArrowDown")
+    await I.seeItemIsHighlighted("Vegetables")
+
+    await I.pressKey("ArrowUp")
+    await I.seeItemIsHighlighted("Fruits")
+  })
+
+  test("should navigate into child level with ArrowRight", async () => {
+    await I.focusTrigger()
+    await I.pressKey("Enter")
+    await I.pressKey("ArrowDown") // Highlight Fruits
+    await I.pressKey("ArrowRight") // Navigate into Fruits
+
+    await I.seeLevel(1)
+    await I.seeItemIsHighlighted("Citrus")
+  })
+
+  test("should navigate back to parent level with ArrowLeft", async () => {
+    await I.focusTrigger()
+    await I.pressKey("Enter")
+    await I.pressKey("ArrowDown") // Highlight Fruits
+    await I.pressKey("ArrowRight") // Navigate into Fruits
+    await I.pressKey("ArrowLeft") // Navigate back
+
+    await I.seeItemIsHighlighted("Fruits")
+  })
+
+  test("should close dropdown with Escape", async () => {
+    await I.clickTrigger()
+    await I.seeDropdown()
+
+    await I.pressKey("Escape")
+    await I.dontSeeDropdown()
+    await I.seeTriggerIsFocused()
+  })
+
+  test("should select item with Enter", async () => {
+    await I.focusTrigger()
+    await I.pressKey("Enter")
+    await I.pressKey("ArrowDown", 4) // Navigate to Dairy
+    await I.pressKey("Enter")
+
+    await I.seeTriggerHasText("Dairy")
+    await I.dontSeeDropdown()
+  })
+
+  test("should navigate with Home and End keys", async () => {
+    await I.clickTrigger()
+
+    await I.pressKey("End")
+    await I.seeItemIsHighlighted("Dairy")
+
+    await I.pressKey("Home")
+    await I.seeItemIsHighlighted("Fruits")
+  })
+})
+
+test.describe("click highlighting (default)", () => {
+  test("should highlight items on click for navigation", async () => {
+    await I.clickTrigger()
+
+    // Click on Fruits should highlight it
+    await I.clickItem("Fruits")
+    await I.seeItemIsHighlighted("Fruits")
+    await I.seeLevel(1)
+
+    // Click on Citrus should highlight it and show next level
+    await I.clickItem("Citrus")
+    await I.seeItemIsHighlighted("Citrus")
+    await I.seeLevel(2)
+  })
+
+  test("should not highlight on hover with click trigger", async () => {
+    await I.clickTrigger()
+
+    // Hovering should not highlight
+    await I.hoverItem("Fruits")
+    await I.dontSeeHighlightedItems()
+
+    // Only clicking should highlight
+    await I.clickItem("Fruits")
+    await I.seeItemIsHighlighted("Fruits")
+  })
+})
+
+test.describe("hover highlighting", () => {
+  test.beforeEach(async () => {
+    // Set highlight trigger to hover (no longer the default)
+    await I.controls.select("highlightTrigger", "hover")
+  })
+
+  test("should highlight parent items on hover", async () => {
+    await I.clickTrigger()
+
+    // Hovering over parent item should highlight path
+    await I.hoverItem("Fruits")
+    await I.seeItemIsHighlighted("Fruits")
+    await I.seeLevel(1)
+
+    // Hovering over nested parent should highlight full path
+    await I.hoverItem("Citrus")
+    await I.seeHighlightedItemsCount(2) // Fruits and Citrus
+    await I.seeLevel(2)
+  })
+
+  test("should not highlight full path for leaf items", async () => {
+    await I.clickTrigger()
+
+    // First navigate to show levels
+    await I.hoverItem("Fruits")
+    await I.hoverItem("Citrus")
+
+    // Hovering over leaf item should not include itself in highlight
+    await I.hoverItem("Orange")
+    await I.seeHighlightedItemsCount(2) // Should still be Fruits and Citrus, not Orange
+  })
+
+  test("should work with grace area for smooth navigation", async () => {
+    await I.clickTrigger()
+
+    // Hover over parent to show submenu
+    await I.hoverItem("Fruits")
+    await I.seeItemIsHighlighted("Fruits")
+    await I.seeLevel(1)
+
+    // Quickly move to submenu item - should maintain highlighting due to grace area
+    await I.hoverItem("Citrus")
+    await I.seeItemIsHighlighted("Citrus")
+    await I.seeLevel(2)
+  })
+
+  test("should update highlighting path when navigating between different branches", async () => {
+    await I.clickTrigger()
+
+    // Navigate to Fruits -> Citrus
+    await I.hoverItem("Fruits")
+    await I.hoverItem("Citrus")
+    await I.seeHighlightedItemsCount(2)
+
+    // Navigate to Vegetables -> Leafy Greens
+    await I.hoverItem("Vegetables")
+    await I.hoverItem("Leafy Greens")
+    await I.seeHighlightedItemsCount(2) // Should update to new path
+    await I.seeItemIsHighlighted("Vegetables")
+    await I.seeItemIsHighlighted("Leafy Greens")
+  })
+})
+
+test.describe("selection behavior", () => {
+  test("should select leaf items in single mode", async () => {
+    await I.clickTrigger()
+
+    // Navigate and select a leaf item
+    await I.clickItem("Fruits")
+    await I.clickItem("Apple")
+
+    await I.seeTriggerHasText("Fruits / Apple")
+    await I.dontSeeDropdown()
+  })
+
+  test("should allow parent selection when enabled", async () => {
+    await I.controls.bool("allowParentSelection", true)
+
+    await I.clickTrigger()
+    await I.clickItem("Fruits")
+
+    await I.seeTriggerHasText("Fruits")
+  })
+
+  test("should support multiple selection", async () => {
+    await I.controls.bool("multiple", true)
+    await I.controls.bool("closeOnSelect", false)
+
+    await I.clickTrigger()
+
+    // Select first item
+    await I.clickItem("Dairy")
+    await I.seeSelectedItemsCount(1)
+
+    // Select second item
+    await I.clickItem("Fruits")
+    await I.clickItem("Apple")
+    await I.seeSelectedItemsCount(3)
+
+    await I.seeTriggerHasText("Dairy, Fruits / Apple")
+  })
+
+  test("should not close on select when closeOnSelect is false", async () => {
+    await I.controls.bool("closeOnSelect", false)
+
+    await I.clickTrigger()
+    await I.clickItem("Dairy")
+
+    await I.seeDropdown() // Should remain open
+    await I.seeTriggerHasText("Dairy")
+  })
+})
+
+test.describe("disabled and readonly states", () => {
+  test("should not open when disabled", async () => {
+    await I.controls.bool("disabled", true)
+
+    // Force click the disabled trigger to test that it doesn't open
+    await I.clickTriggerForced()
+    await I.dontSeeDropdown()
+  })
+
+  test("should not allow selection when readonly", async () => {
+    await I.controls.bool("readOnly", true)
+
+    // Readonly should prevent opening the dropdown
+    await I.clickTrigger()
+    await I.dontSeeDropdown()
+    await I.seeTriggerHasText("Select food category") // Should not change
+  })
+})
+
+test.describe("focus management", () => {
+  test("should return focus to trigger after selection", async () => {
+    await I.clickTrigger()
+    await I.clickItem("Dairy")
+
+    await I.seeTriggerIsFocused()
+  })
+
+  test("should return focus to trigger after escape", async () => {
+    await I.clickTrigger()
+    await I.pressKey("Escape")
+
+    await I.seeTriggerIsFocused()
+  })
+
+  test("should maintain focus within dropdown during navigation", async () => {
+    await I.focusTrigger()
+    await I.pressKey("Enter")
+
+    // Content should be focused for keyboard navigation
+    await I.pressKey("ArrowDown")
+    await I.seeItemIsHighlighted("Fruits")
+  })
+})
diff --git a/e2e/models/cascade-select.model.ts b/e2e/models/cascade-select.model.ts
new file mode 100644
index 0000000000..a547d7e32a
--- /dev/null
+++ b/e2e/models/cascade-select.model.ts
@@ -0,0 +1,147 @@
+import { expect, type Page } from "@playwright/test"
+import { a11y, isInViewport } from "../_utils"
+import { Model } from "./model"
+
+export class CascadeSelectModel extends Model {
+  constructor(public page: Page) {
+    super(page)
+  }
+
+  checkAccessibility() {
+    return a11y(this.page, ".cascade-select")
+  }
+
+  goto(url = "/cascade-select") {
+    return this.page.goto(url)
+  }
+
+  private get trigger() {
+    return this.page.locator("[data-scope=cascade-select][data-part=trigger]")
+  }
+
+  private get content() {
+    return this.page.locator("[data-scope=cascade-select][data-part=content]")
+  }
+
+  private get label() {
+    return this.page.locator("[data-scope=cascade-select][data-part=label]")
+  }
+
+  private get clearTrigger() {
+    return this.page.locator("[data-scope=cascade-select][data-part=clear-trigger]")
+  }
+
+  private get valueText() {
+    return this.page.locator("[data-scope=cascade-select][data-part=value-text]")
+  }
+
+  getItem = (text: string) => {
+    return this.page.locator(`[data-part=item]`).filter({ hasText: new RegExp(`^${text}$`) })
+  }
+
+  getLevel = (level: number) => {
+    return this.page.locator(`[data-part=level][data-level="${level}"]`)
+  }
+
+  get highlightedItems() {
+    return this.page.locator("[data-part=item][data-highlighted]")
+  }
+
+  get selectedItems() {
+    return this.page.locator("[data-part=item][data-selected]")
+  }
+
+  focusTrigger = async () => {
+    await this.trigger.focus()
+  }
+
+  clickLabel = async () => {
+    await this.label.click()
+  }
+
+  clickTrigger = async () => {
+    await this.trigger.click()
+  }
+
+  clickTriggerForced = async () => {
+    await this.trigger.click({ force: true })
+  }
+
+  clickClearTrigger = async () => {
+    await this.clearTrigger.click()
+  }
+
+  clickItem = async (text: string) => {
+    await this.getItem(text).click()
+  }
+
+  hoverItem = async (text: string) => {
+    await this.getItem(text).hover()
+  }
+
+  seeTriggerIsFocused = async () => {
+    await expect(this.trigger).toBeFocused()
+  }
+
+  seeTriggerHasText = async (text: string) => {
+    await expect(this.valueText).toContainText(text)
+  }
+
+  seeDropdown = async () => {
+    await expect(this.content).toBeVisible()
+  }
+
+  dontSeeDropdown = async () => {
+    await expect(this.content).not.toBeVisible()
+  }
+
+  seeItemIsHighlighted = async (text: string) => {
+    const item = this.getItem(text)
+    await expect(item).toHaveAttribute("data-highlighted")
+  }
+
+  dontSeeHighlightedItems = async () => {
+    await expect(this.highlightedItems).toHaveCount(0)
+  }
+
+  seeItemInViewport = async (text: string) => {
+    const item = this.getItem(text)
+    expect(await isInViewport(this.content, item)).toBe(true)
+  }
+
+  seeLevel = async (level: number) => {
+    await expect(this.getLevel(level)).toBeVisible()
+  }
+
+  dontSeeLevel = async (level: number) => {
+    await expect(this.getLevel(level)).not.toBeVisible()
+  }
+
+  seeItemHasIndicator = async (text: string) => {
+    const item = this.getItem(text)
+    const indicator = item.locator("[data-part=item-indicator]")
+    await expect(indicator).toBeVisible()
+  }
+
+  dontSeeItemHasIndicator = async (text: string) => {
+    const item = this.getItem(text)
+    const indicator = item.locator("[data-part=item-indicator]")
+    await expect(indicator).not.toBeVisible()
+  }
+
+  seeHighlightedItemsCount = async (count: number) => {
+    await expect(this.highlightedItems).toHaveCount(count)
+  }
+
+  seeSelectedItemsCount = async (count: number) => {
+    await expect(this.selectedItems).toHaveCount(count)
+  }
+
+  seeClearTrigger = async () => {
+    await expect(this.clearTrigger).toBeVisible()
+  }
+
+  dontSeeClearTrigger = async () => {
+    await expect(this.clearTrigger).not.toBeVisible()
+  }
+}
diff --git a/shared/src/controls.ts b/shared/src/controls.ts
index 33f08a71c4..bd337651a2 100644
--- a/shared/src/controls.ts
+++ b/shared/src/controls.ts
@@ -20,7 +20,7 @@ export const cascadeSelectControls = defineControls({
   highlightTrigger: {
     type: "select",
     options: ["click", "hover"] as const,
-    defaultValue: "hover",
+    defaultValue: "click",
   },
 })
 

From e5074b92f51ea1d25887256504cf4a05b9b1f139 Mon Sep 17 00:00:00 2001
From: anubra266 <anubra266@gmail.com>
Date: Fri, 6 Jun 2025 12:15:24 -0700
Subject: [PATCH 09/20] feat: add separator

---
 e2e/cascade-select.e2e.ts                     | 68 +++++++++++++++++++
 examples/next-ts/pages/cascade-select.tsx     |  9 +++
 .../src/cascade-select.connect.ts             | 40 ++++++++++-
 .../cascade-select/src/cascade-select.dom.ts  |  2 +
 .../src/cascade-select.machine.ts             | 40 +++++++++--
 .../src/cascade-select.types.ts               | 16 +++++
 shared/src/controls.ts                        |  1 +
 7 files changed, 170 insertions(+), 6 deletions(-)

diff --git a/e2e/cascade-select.e2e.ts b/e2e/cascade-select.e2e.ts
index 1c3d7d31e5..ffa0a7b05e 100644
--- a/e2e/cascade-select.e2e.ts
+++ b/e2e/cascade-select.e2e.ts
@@ -331,3 +331,71 @@ test.describe("focus management", () => {
     await I.seeItemIsHighlighted("Fruits")
   })
 })
+
+test.describe("separator configuration", () => {
+  test("should use default separator in trigger text", async () => {
+    await I.clickTrigger()
+    await I.clickItem("Fruits")
+    await I.clickItem("Apple")
+
+    await I.seeTriggerHasText("Fruits / Apple")
+  })
+
+  test("should use custom separator in trigger text", async () => {
+    await I.controls.num("separator", " → ")
+
+    await I.clickTrigger()
+    await I.clickItem("Fruits")
+    await I.clickItem("Apple")
+
+    await I.seeTriggerHasText("Fruits → Apple")
+  })
+
+  test("should use custom separator in multiple selection", async () => {
+    await I.controls.bool("multiple", true)
+    await I.controls.bool("closeOnSelect", false)
+    await I.controls.num("separator", " | ")
+
+    await I.clickTrigger()
+
+    // Select first item
+    await I.clickItem("Dairy")
+    await I.seeTriggerHasText("Dairy")
+
+    // Select second item - a path
+    await I.clickItem("Fruits")
+    await I.clickItem("Apple")
+    await I.seeTriggerHasText("Dairy, Fruits | Apple")
+  })
+
+  test("should use custom separator in nested paths", async () => {
+    await I.controls.num("separator", " > ")
+
+    await I.clickTrigger()
+    await I.clickItem("Fruits")
+    await I.clickItem("Citrus")
+    await I.clickItem("Orange")
+
+    await I.seeTriggerHasText("Fruits > Citrus > Orange")
+  })
+
+  test("should handle special characters in separator", async () => {
+    await I.controls.num("separator", " 🍎 ")
+
+    await I.clickTrigger()
+    await I.clickItem("Fruits")
+    await I.clickItem("Apple")
+
+    await I.seeTriggerHasText("Fruits 🍎 Apple")
+  })
+
+  test("should handle empty separator", async () => {
+    await I.controls.num("separator", "")
+
+    await I.clickTrigger()
+    await I.clickItem("Fruits")
+    await I.clickItem("Apple")
+
+    await I.seeTriggerHasText("FruitsApple")
+  })
+})
diff --git a/examples/next-ts/pages/cascade-select.tsx b/examples/next-ts/pages/cascade-select.tsx
index dd878da34c..36945ab116 100644
--- a/examples/next-ts/pages/cascade-select.tsx
+++ b/examples/next-ts/pages/cascade-select.tsx
@@ -106,6 +106,7 @@ export default function Page() {
   })
 
   const api = cascadeSelect.connect(service, normalizeProps)
+  const separator = service.prop("separator")
 
   const renderLevel = (level: number) => {
     const levelValues = api.getLevelValues(level)
@@ -153,6 +154,14 @@ export default function Page() {
             )}
           </div>
 
+          <select {...api.getHiddenSelectProps()}>
+            {api.value.map((path, index) => (
+              <option key={index} value={path.join(separator)}>
+                {path.map((value) => collection.findNode(value)?.label || value).join(separator)}
+              </option>
+            ))}
+          </select>
+
           <div {...api.getPositionerProps()}>
             <div {...api.getContentProps()}>
               {Array.from({ length: api.getLevelDepth() }, (_, level) => renderLevel(level))}
diff --git a/packages/machines/cascade-select/src/cascade-select.connect.ts b/packages/machines/cascade-select/src/cascade-select.connect.ts
index a79cf2502a..33552480c4 100644
--- a/packages/machines/cascade-select/src/cascade-select.connect.ts
+++ b/packages/machines/cascade-select/src/cascade-select.connect.ts
@@ -1,4 +1,4 @@
-import { dataAttr, getEventKey, isLeftClick } from "@zag-js/dom-query"
+import { dataAttr, getEventKey, isLeftClick, visuallyHiddenStyle } from "@zag-js/dom-query"
 import { getPlacementStyles } from "@zag-js/popper"
 import type { NormalizeProps, PropTypes } from "@zag-js/types"
 import type { Service } from "@zag-js/core"
@@ -114,10 +114,16 @@ export function connect<T extends PropTypes>(
       return normalize.label({
         ...parts.label.attrs,
         id: dom.getLabelId(scope),
-        htmlFor: dom.getTriggerId(scope),
+        htmlFor: dom.getHiddenSelectId(scope),
         "data-disabled": dataAttr(isDisabled),
         "data-readonly": dataAttr(prop("readOnly")),
         "data-invalid": dataAttr(prop("invalid")),
+        onClick(event) {
+          if (event.defaultPrevented) return
+          if (isDisabled) return
+          const triggerEl = dom.getTriggerEl(scope)
+          triggerEl?.focus({ preventScroll: true })
+        },
       })
     },
 
@@ -360,5 +366,35 @@ export function connect<T extends PropTypes>(
         hidden: !itemState.hasChildren,
       })
     },
+
+    getHiddenSelectProps() {
+      // Create option values from the current selected paths
+      const separator = prop("separator")
+      const defaultValue = prop("multiple")
+        ? value.map((path) => path.join(separator))
+        : value[0]
+          ? value[0].join(separator)
+          : ""
+
+      return normalize.select({
+        name: prop("name"),
+        form: prop("form"),
+        disabled: isDisabled,
+        multiple: prop("multiple"),
+        required: prop("required"),
+        "aria-hidden": true,
+        id: dom.getHiddenSelectId(scope),
+        defaultValue,
+        style: visuallyHiddenStyle,
+        tabIndex: -1,
+        // Some browser extensions will focus the hidden select.
+        // Let's forward the focus to the trigger.
+        onFocus() {
+          const triggerEl = dom.getTriggerEl(scope)
+          triggerEl?.focus({ preventScroll: true })
+        },
+        "aria-labelledby": dom.getLabelId(scope),
+      })
+    },
   }
 }
diff --git a/packages/machines/cascade-select/src/cascade-select.dom.ts b/packages/machines/cascade-select/src/cascade-select.dom.ts
index 0ffeb7a462..b1a95742b3 100644
--- a/packages/machines/cascade-select/src/cascade-select.dom.ts
+++ b/packages/machines/cascade-select/src/cascade-select.dom.ts
@@ -11,6 +11,7 @@ export const dom = createScope({
   getClearTriggerId: (ctx: Scope) => ctx.ids?.clearTrigger ?? `cascade-select:${ctx.id}:clear-trigger`,
   getPositionerId: (ctx: Scope) => ctx.ids?.positioner ?? `cascade-select:${ctx.id}:positioner`,
   getContentId: (ctx: Scope) => ctx.ids?.content ?? `cascade-select:${ctx.id}:content`,
+  getHiddenSelectId: (ctx: Scope) => ctx.ids?.hiddenSelect ?? `cascade-select:${ctx.id}:hidden-select`,
   getLevelId: (ctx: Scope, level: number) => ctx.ids?.level?.(level) ?? `cascade-select:${ctx.id}:level:${level}`,
   getItemId: (ctx: Scope, value: string) => ctx.ids?.item?.(value) ?? `cascade-select:${ctx.id}:item:${value}`,
 
@@ -23,6 +24,7 @@ export const dom = createScope({
   getClearTriggerEl: (ctx: Scope) => dom.getById(ctx, dom.getClearTriggerId(ctx)),
   getPositionerEl: (ctx: Scope) => dom.getById(ctx, dom.getPositionerId(ctx)),
   getContentEl: (ctx: Scope) => dom.getById(ctx, dom.getContentId(ctx)),
+  getHiddenSelectEl: (ctx: Scope) => dom.getById(ctx, dom.getHiddenSelectId(ctx)),
   getLevelEl: (ctx: Scope, level: number) => dom.getById(ctx, dom.getLevelId(ctx, level)),
   getItemEl: (ctx: Scope, value: string) => dom.getById(ctx, dom.getItemId(ctx, value)),
 })
diff --git a/packages/machines/cascade-select/src/cascade-select.machine.ts b/packages/machines/cascade-select/src/cascade-select.machine.ts
index 729e76458c..ff61a8424b 100644
--- a/packages/machines/cascade-select/src/cascade-select.machine.ts
+++ b/packages/machines/cascade-select/src/cascade-select.machine.ts
@@ -22,6 +22,7 @@ export const machine = createMachine<CascadeSelectSchema>({
       highlightTrigger: "click",
       placeholder: "Select an option",
       allowParentSelection: false,
+      separator: " / ",
       positioning: {
         placement: "bottom-start",
         gutter: 8,
@@ -39,9 +40,10 @@ export const machine = createMachine<CascadeSelectSchema>({
         value: prop("value"),
         onChange(value) {
           const collection = prop("collection")
+          const separator = prop("separator")
           const valueText =
             prop("formatValue")?.(value) ??
-            value.map((path) => path.map((v) => collection.stringify(v) || v).join(" / ")).join(", ")
+            value.map((path) => path.map((v) => collection.stringify(v) || v).join(separator)).join(", ")
           prop("onValueChange")?.({ value, valueText })
         },
       })),
@@ -80,9 +82,10 @@ export const machine = createMachine<CascadeSelectSchema>({
       const value = context.get("value")
       if (isEmpty(value)) return prop("placeholder") ?? ""
       const collection = prop("collection")
+      const separator = prop("separator")
       return (
         prop("formatValue")?.(value) ??
-        value.map((path) => path.map((v) => collection.stringify(v) || v).join(" / ")).join(", ")
+        value.map((path) => path.map((v) => collection.stringify(v) || v).join(separator)).join(", ")
       )
     },
   },
@@ -92,11 +95,11 @@ export const machine = createMachine<CascadeSelectSchema>({
     return open ? "open" : "idle"
   },
 
-  entry: ["syncLevelValues"],
+  entry: ["syncLevelValues", "syncSelectElement"],
 
   watch({ context, prop, track, action }) {
     track([() => context.get("value").toString()], () => {
-      action(["syncLevelValues"])
+      action(["syncLevelValues", "syncSelectElement", "dispatchChangeEvent"])
     })
     track([() => prop("open")], () => {
       action(["toggleVisibility"])
@@ -1105,6 +1108,35 @@ export const machine = createMachine<CascadeSelectSchema>({
           action(["syncLevelValues"])
         }
       },
+      syncSelectElement({ context, prop, scope }) {
+        const selectEl = dom.getHiddenSelectEl(scope) as HTMLSelectElement
+        if (!selectEl) return
+
+        const value = context.get("value")
+        const separator = prop("separator")
+
+        if (value.length === 0 && !prop("multiple")) {
+          selectEl.selectedIndex = -1
+          return
+        }
+
+        // For cascade-select, we need to handle the nested structure differently
+        // We'll represent each path as a joined string value
+        const flatValues = value.map((path) => path.join(separator))
+
+        for (const option of selectEl.options) {
+          option.selected = flatValues.includes(option.value)
+        }
+      },
+      dispatchChangeEvent({ scope }) {
+        queueMicrotask(() => {
+          const node = dom.getHiddenSelectEl(scope)
+          if (!node) return
+          const win = scope.getWin()
+          const changeEvent = new win.Event("change", { bubbles: true, composed: true })
+          node.dispatchEvent(changeEvent)
+        })
+      },
     },
   },
 })
diff --git a/packages/machines/cascade-select/src/cascade-select.types.ts b/packages/machines/cascade-select/src/cascade-select.types.ts
index 03ac83460c..a5fd779e4f 100644
--- a/packages/machines/cascade-select/src/cascade-select.types.ts
+++ b/packages/machines/cascade-select/src/cascade-select.types.ts
@@ -33,6 +33,7 @@ export type ElementIds = Partial<{
   clearTrigger: string
   positioner: string
   content: string
+  hiddenSelect: string
   level(level: number): string
   item(value: string): string
 }>
@@ -50,6 +51,14 @@ export interface CascadeSelectProps<T = any> extends DirectionProperty, CommonPr
    * The ids of the cascade-select elements. Useful for composition.
    */
   ids?: ElementIds | undefined
+  /**
+   * The name attribute of the underlying select element
+   */
+  name?: string | undefined
+  /**
+   * The form attribute of the underlying select element
+   */
+  form?: string | undefined
   /**
    * The controlled value of the cascade-select
    */
@@ -140,6 +149,11 @@ export interface CascadeSelectProps<T = any> extends DirectionProperty, CommonPr
    * Whether parent (branch) items can be selected
    */
   allowParentSelection?: boolean
+  /**
+   * The separator used to join path segments in the display value
+   * @default " / "
+   */
+  separator?: string | undefined
 }
 
 type PropsWithDefault =
@@ -150,6 +164,7 @@ type PropsWithDefault =
   | "defaultOpen"
   | "multiple"
   | "highlightTrigger"
+  | "separator"
 
 export interface CascadeSelectSchema<T extends TreeNode = TreeNode> {
   state: "idle" | "focused" | "open"
@@ -295,4 +310,5 @@ export interface CascadeSelectApi<T extends PropTypes = PropTypes, V = TreeNode>
   getItemProps(props: ItemProps): T["element"]
   getItemTextProps(props: ItemProps): T["element"]
   getItemIndicatorProps(props: ItemProps): T["element"]
+  getHiddenSelectProps(): T["select"]
 }
diff --git a/shared/src/controls.ts b/shared/src/controls.ts
index bd337651a2..7d8a08d262 100644
--- a/shared/src/controls.ts
+++ b/shared/src/controls.ts
@@ -22,6 +22,7 @@ export const cascadeSelectControls = defineControls({
     options: ["click", "hover"] as const,
     defaultValue: "click",
   },
+  separator: { type: "string", defaultValue: " / " },
 })
 
 export const checkboxControls = defineControls({

From 6434c89f7b4a0e92902e08f90301234c4427052e Mon Sep 17 00:00:00 2001
From: anubra266 <anubra266@gmail.com>
Date: Fri, 6 Jun 2025 14:14:38 -0700
Subject: [PATCH 10/20] feat: improved navigation

---
 e2e/cascade-select.e2e.ts                     |   371 +-
 examples/next-ts/pages/cascade-select.tsx     |    93 +-
 .../src/cascade-select.connect.ts             |    53 +-
 .../src/cascade-select.machine.ts             |   273 +-
 .../src/cascade-select.types.ts               |    24 +-
 shared/src/cascade-select-data.ts             | 16735 ++++++++++++++++
 shared/src/css/cascade-select.css             |    26 +-
 shared/src/data.ts                            |     1 +
 8 files changed, 17240 insertions(+), 336 deletions(-)
 create mode 100644 shared/src/cascade-select-data.ts

diff --git a/e2e/cascade-select.e2e.ts b/e2e/cascade-select.e2e.ts
index ffa0a7b05e..d742421567 100644
--- a/e2e/cascade-select.e2e.ts
+++ b/e2e/cascade-select.e2e.ts
@@ -1,4 +1,4 @@
-import { test } from "@playwright/test"
+import { test, expect } from "@playwright/test"
 import { CascadeSelectModel } from "./models/cascade-select.model"
 
 let I: CascadeSelectModel
@@ -30,21 +30,23 @@ test.describe("basic functionality", () => {
   })
 
   test("should show clear trigger when value is selected", async () => {
+    await I.controls.bool("allowParentSelection", true)
     await I.dontSeeClearTrigger()
 
     await I.clickTrigger()
-    await I.clickItem("Dairy")
-    await I.seeTriggerHasText("Dairy")
+    await I.clickItem("Africa")
+    await I.seeTriggerHasText("Africa")
     await I.seeClearTrigger()
   })
 
   test("should clear value when clear trigger is clicked", async () => {
+    await I.controls.bool("allowParentSelection", true)
     await I.clickTrigger()
-    await I.clickItem("Dairy")
-    await I.seeTriggerHasText("Dairy")
+    await I.clickItem("Africa")
+    await I.seeTriggerHasText("Africa")
 
     await I.clickClearTrigger()
-    await I.seeTriggerHasText("Select food category")
+    await I.seeTriggerHasText("Select a location")
     await I.dontSeeClearTrigger()
   })
 })
@@ -55,14 +57,14 @@ test.describe("navigation and levels", () => {
     await I.seeLevel(0)
     await I.dontSeeLevel(1)
 
-    // Click on Fruits (parent item)
-    await I.clickItem("Fruits")
+    // Click on Africa (continent)
+    await I.clickItem("Africa")
     await I.seeLevel(0)
     await I.seeLevel(1)
     await I.dontSeeLevel(2)
 
-    // Click on Citrus (parent item)
-    await I.clickItem("Citrus")
+    // Click on Algeria (country)
+    await I.clickItem("Algeria")
     await I.seeLevel(0)
     await I.seeLevel(1)
     await I.seeLevel(2)
@@ -71,13 +73,12 @@ test.describe("navigation and levels", () => {
   test("should show item indicators for parent items", async () => {
     await I.clickTrigger()
 
-    // Parent items should have indicators
-    await I.seeItemHasIndicator("Fruits")
-    await I.seeItemHasIndicator("Vegetables")
-    await I.seeItemHasIndicator("Grains")
+    // Continents should have indicators
+    await I.seeItemHasIndicator("Africa")
+    await I.seeItemHasIndicator("Asia")
 
-    // Leaf item should not have indicator
-    await I.dontSeeItemHasIndicator("Dairy")
+    // Antarctica (disabled continent) should not have indicator
+    await I.dontSeeItemHasIndicator("Antarctica")
   })
 })
 
@@ -88,33 +89,33 @@ test.describe("keyboard navigation", () => {
     await I.seeDropdown()
 
     await I.pressKey("ArrowDown")
-    await I.seeItemIsHighlighted("Fruits")
+    await I.seeItemIsHighlighted("Africa")
 
     await I.pressKey("ArrowDown")
-    await I.seeItemIsHighlighted("Vegetables")
+    await I.seeItemIsHighlighted("Asia")
 
     await I.pressKey("ArrowUp")
-    await I.seeItemIsHighlighted("Fruits")
+    await I.seeItemIsHighlighted("Africa")
   })
 
   test("should navigate into child level with ArrowRight", async () => {
     await I.focusTrigger()
     await I.pressKey("Enter")
-    await I.pressKey("ArrowDown") // Highlight Fruits
-    await I.pressKey("ArrowRight") // Navigate into Fruits
+    await I.pressKey("ArrowDown") // Highlight Africa
+    await I.pressKey("ArrowRight") // Navigate into Africa
 
     await I.seeLevel(1)
-    await I.seeItemIsHighlighted("Citrus")
+    await I.seeItemIsHighlighted("Algeria")
   })
 
   test("should navigate back to parent level with ArrowLeft", async () => {
     await I.focusTrigger()
     await I.pressKey("Enter")
-    await I.pressKey("ArrowDown") // Highlight Fruits
-    await I.pressKey("ArrowRight") // Navigate into Fruits
+    await I.pressKey("ArrowDown") // Highlight Africa
+    await I.pressKey("ArrowRight") // Navigate into Africa
     await I.pressKey("ArrowLeft") // Navigate back
 
-    await I.seeItemIsHighlighted("Fruits")
+    await I.seeItemIsHighlighted("Africa")
   })
 
   test("should close dropdown with Escape", async () => {
@@ -129,21 +130,60 @@ test.describe("keyboard navigation", () => {
   test("should select item with Enter", async () => {
     await I.focusTrigger()
     await I.pressKey("Enter")
-    await I.pressKey("ArrowDown", 4) // Navigate to Dairy
-    await I.pressKey("Enter")
+    await I.pressKey("ArrowDown") // Navigate to Africa (skip disabled Antarctica)
+    await I.pressKey("ArrowRight") // Navigate into Africa
+    // Now we're in Algeria (first country alphabetically)
+    await I.pressKey("ArrowRight") // Navigate into Algeria states
+    await I.pressKey("Enter") // Select first state (Adrar)
 
-    await I.seeTriggerHasText("Dairy")
-    await I.dontSeeDropdown()
+    await I.seeTriggerHasText("Africa / Algeria / Adrar")
+    await I.dontSeeDropdown() // Should close when selecting leaf item
   })
 
   test("should navigate with Home and End keys", async () => {
     await I.clickTrigger()
 
+    // Test Home/End at continent level (first level)
+    await I.pressKey("ArrowDown") // This should highlight Africa (first non-disabled item)
+    await I.seeItemIsHighlighted("Africa")
+
     await I.pressKey("End")
-    await I.seeItemIsHighlighted("Dairy")
+    await I.seeItemIsHighlighted("South America") // Should be last continent
 
     await I.pressKey("Home")
-    await I.seeItemIsHighlighted("Fruits")
+    await I.seeItemIsHighlighted("Africa") // Should go back to first item
+
+    // Now test Home/End at country level (second level)
+    await I.pressKey("ArrowRight") // Enter Africa (should highlight Algeria - first country)
+    await I.seeItemIsHighlighted("Algeria")
+
+    await I.pressKey("End") // Should go to last country in Africa
+    await I.seeItemIsHighlighted("Zimbabwe") // Last country in Africa alphabetically
+
+    await I.pressKey("Home") // Should go back to first country in Africa
+    await I.seeItemIsHighlighted("Algeria") // First country in Africa alphabetically
+  })
+
+  test("should scroll highlighted items into view during keyboard navigation", async () => {
+    await I.clickTrigger()
+
+    // Navigate to Africa and enter it
+    await I.pressKey("ArrowDown") // Highlight Africa
+    await I.pressKey("ArrowRight") // Enter Africa (Algeria should be highlighted)
+
+    // Use End key to navigate to the last country (Zimbabwe)
+    await I.pressKey("End")
+    await I.seeItemIsHighlighted("Zimbabwe")
+
+    // Zimbabwe should be scrolled into view
+    await I.seeItemInViewport("Zimbabwe")
+
+    // Use Home key to go back to first country (Algeria)
+    await I.pressKey("Home")
+    await I.seeItemIsHighlighted("Algeria")
+
+    // Algeria should also be in viewport
+    await I.seeItemInViewport("Algeria")
   })
 })
 
@@ -151,14 +191,14 @@ test.describe("click highlighting (default)", () => {
   test("should highlight items on click for navigation", async () => {
     await I.clickTrigger()
 
-    // Click on Fruits should highlight it
-    await I.clickItem("Fruits")
-    await I.seeItemIsHighlighted("Fruits")
+    // Click on Africa should highlight it
+    await I.clickItem("Africa")
+    await I.seeItemIsHighlighted("Africa")
     await I.seeLevel(1)
 
-    // Click on Citrus should highlight it and show next level
-    await I.clickItem("Citrus")
-    await I.seeItemIsHighlighted("Citrus")
+    // Click on Algeria should highlight it and show next level
+    await I.clickItem("Algeria")
+    await I.seeItemIsHighlighted("Algeria")
     await I.seeLevel(2)
   })
 
@@ -166,189 +206,164 @@ test.describe("click highlighting (default)", () => {
     await I.clickTrigger()
 
     // Hovering should not highlight
-    await I.hoverItem("Fruits")
+    await I.hoverItem("Africa")
     await I.dontSeeHighlightedItems()
 
     // Only clicking should highlight
-    await I.clickItem("Fruits")
-    await I.seeItemIsHighlighted("Fruits")
+    await I.clickItem("Africa")
+    await I.seeItemIsHighlighted("Africa")
   })
 })
 
 test.describe("hover highlighting", () => {
   test.beforeEach(async () => {
-    // Set highlight trigger to hover (no longer the default)
+    // Set highlight trigger to hover
     await I.controls.select("highlightTrigger", "hover")
   })
 
   test("should highlight parent items on hover", async () => {
     await I.clickTrigger()
 
-    // Hovering over parent item should highlight path
-    await I.hoverItem("Fruits")
-    await I.seeItemIsHighlighted("Fruits")
+    // Hovering over continent should highlight path
+    await I.hoverItem("Africa")
+    await I.seeItemIsHighlighted("Africa")
     await I.seeLevel(1)
 
-    // Hovering over nested parent should highlight full path
-    await I.hoverItem("Citrus")
-    await I.seeHighlightedItemsCount(2) // Fruits and Citrus
+    // Hovering over country should highlight full path
+    await I.hoverItem("Algeria")
+    await I.seeHighlightedItemsCount(2) // Africa and Algeria
     await I.seeLevel(2)
   })
 
   test("should not highlight full path for leaf items", async () => {
     await I.clickTrigger()
 
-    // First navigate to show levels
-    await I.hoverItem("Fruits")
-    await I.hoverItem("Citrus")
+    // Navigate to states level
+    await I.hoverItem("Africa")
+    await I.hoverItem("Algeria")
 
-    // Hovering over leaf item should not include itself in highlight
-    await I.hoverItem("Orange")
-    await I.seeHighlightedItemsCount(2) // Should still be Fruits and Citrus, not Orange
+    // Hovering over state (leaf) should only highlight path to parent
+    await I.hoverItem("Adrar")
+    await I.seeHighlightedItemsCount(2) // Africa and Algeria (not Adrar)
   })
 
-  test("should work with grace area for smooth navigation", async () => {
+  test("should support grace area for smooth navigation", async () => {
     await I.clickTrigger()
 
-    // Hover over parent to show submenu
-    await I.hoverItem("Fruits")
-    await I.seeItemIsHighlighted("Fruits")
-    await I.seeLevel(1)
+    await I.hoverItem("Africa")
+    await I.seeItemIsHighlighted("Africa")
 
-    // Quickly move to submenu item - should maintain highlighting due to grace area
-    await I.hoverItem("Citrus")
-    await I.seeItemIsHighlighted("Citrus")
-    await I.seeLevel(2)
-  })
-
-  test("should update highlighting path when navigating between different branches", async () => {
-    await I.clickTrigger()
-
-    // Navigate to Fruits -> Citrus
-    await I.hoverItem("Fruits")
-    await I.hoverItem("Citrus")
-    await I.seeHighlightedItemsCount(2)
-
-    // Navigate to Vegetables -> Leafy Greens
-    await I.hoverItem("Vegetables")
-    await I.hoverItem("Leafy Greens")
-    await I.seeHighlightedItemsCount(2) // Should update to new path
-    await I.seeItemIsHighlighted("Vegetables")
-    await I.seeItemIsHighlighted("Leafy Greens")
+    // Moving mouse outside should keep highlighting due to grace area
+    await I.clickOutside()
+    await I.seeItemIsHighlighted("Africa")
   })
 })
 
 test.describe("selection behavior", () => {
-  test("should select leaf items in single mode", async () => {
+  test("should not allow selection of disabled items", async () => {
     await I.clickTrigger()
 
-    // Navigate and select a leaf item
-    await I.clickItem("Fruits")
-    await I.clickItem("Apple")
+    // Antarctica is disabled - force clicking should not select it
+    await I.page.locator('[data-part="item"][data-value="antarctica"]').click({ force: true })
 
-    await I.seeTriggerHasText("Fruits / Apple")
-    await I.dontSeeDropdown()
+    // Should remain at placeholder text since Antarctica can't be selected
+    await I.seeTriggerHasText("Select a location")
+    await I.seeDropdown() // Should remain open since no selection happened
   })
 
-  test("should allow parent selection when enabled", async () => {
+  test("should select valid continent when parent selection is allowed", async () => {
     await I.controls.bool("allowParentSelection", true)
 
     await I.clickTrigger()
-    await I.clickItem("Fruits")
+    await I.clickItem("Africa")
 
-    await I.seeTriggerHasText("Fruits")
+    await I.seeTriggerHasText("Africa")
+    await I.seeDropdown() // Should remain open when selecting parent items
   })
 
-  test("should support multiple selection", async () => {
-    await I.controls.bool("multiple", true)
-    await I.controls.bool("closeOnSelect", false)
+  test("should select country when parent selection is allowed", async () => {
+    await I.controls.bool("allowParentSelection", true)
 
     await I.clickTrigger()
+    await I.clickItem("Africa")
+    await I.clickItem("Algeria")
 
-    // Select first item
-    await I.clickItem("Dairy")
-    await I.seeSelectedItemsCount(1)
+    await I.seeTriggerHasText("Africa / Algeria")
+    await I.seeDropdown() // Should remain open when selecting parent items
+  })
 
-    // Select second item
-    await I.clickItem("Fruits")
-    await I.clickItem("Apple")
-    await I.seeSelectedItemsCount(3)
+  test("should navigate to state level without parent selection", async () => {
+    await I.clickTrigger()
+    await I.clickItem("Africa")
+    await I.clickItem("Algeria")
+    await I.clickItem("Adrar")
 
-    await I.seeTriggerHasText("Dairy, Fruits / Apple")
+    await I.seeTriggerHasText("Africa / Algeria / Adrar")
+    await I.dontSeeDropdown() // Should close when selecting final leaf item
   })
 
-  test("should not close on select when closeOnSelect is false", async () => {
+  test("should support multiple selection", async () => {
+    await I.controls.bool("multiple", true)
     await I.controls.bool("closeOnSelect", false)
 
     await I.clickTrigger()
-    await I.clickItem("Dairy")
+    await I.clickItem("Africa")
+    await I.clickItem("Algeria")
+    await I.clickItem("Adrar") // Select leaf item
+
+    await I.clickItem("Asia")
+    await I.clickItem("Afghanistan")
+    await I.clickItem("Badakhshān") // Select another leaf item
 
-    await I.seeDropdown() // Should remain open
-    await I.seeTriggerHasText("Dairy")
+    await I.seeTriggerHasText("Africa / Algeria / Adrar, Asia / Afghanistan / Badakhshān")
+    await I.seeDropdown() // Should remain open because closeOnSelect is false
   })
 })
 
 test.describe("disabled and readonly states", () => {
-  test("should not open when disabled", async () => {
+  test("should not open dropdown when disabled", async () => {
     await I.controls.bool("disabled", true)
-
-    // Force click the disabled trigger to test that it doesn't open
     await I.clickTriggerForced()
     await I.dontSeeDropdown()
   })
 
-  test("should not allow selection when readonly", async () => {
+  test("should not open dropdown when readonly", async () => {
     await I.controls.bool("readOnly", true)
-
-    // Readonly should prevent opening the dropdown
     await I.clickTrigger()
     await I.dontSeeDropdown()
-    await I.seeTriggerHasText("Select food category") // Should not change
   })
 })
 
 test.describe("focus management", () => {
-  test("should return focus to trigger after selection", async () => {
-    await I.clickTrigger()
-    await I.clickItem("Dairy")
-
-    await I.seeTriggerIsFocused()
-  })
-
-  test("should return focus to trigger after escape", async () => {
-    await I.clickTrigger()
-    await I.pressKey("Escape")
-
-    await I.seeTriggerIsFocused()
-  })
-
   test("should maintain focus within dropdown during navigation", async () => {
     await I.focusTrigger()
     await I.pressKey("Enter")
 
     // Content should be focused for keyboard navigation
     await I.pressKey("ArrowDown")
-    await I.seeItemIsHighlighted("Fruits")
+    await I.seeItemIsHighlighted("Africa")
   })
 })
 
 test.describe("separator configuration", () => {
   test("should use default separator in trigger text", async () => {
     await I.clickTrigger()
-    await I.clickItem("Fruits")
-    await I.clickItem("Apple")
+    await I.clickItem("Africa")
+    await I.clickItem("Algeria")
+    await I.clickItem("Adrar")
 
-    await I.seeTriggerHasText("Fruits / Apple")
+    await I.seeTriggerHasText("Africa / Algeria / Adrar")
   })
 
   test("should use custom separator in trigger text", async () => {
     await I.controls.num("separator", " → ")
 
     await I.clickTrigger()
-    await I.clickItem("Fruits")
-    await I.clickItem("Apple")
+    await I.clickItem("Africa")
+    await I.clickItem("Algeria")
+    await I.clickItem("Adrar")
 
-    await I.seeTriggerHasText("Fruits → Apple")
+    await I.seeTriggerHasText("Africa → Algeria → Adrar")
   })
 
   test("should use custom separator in multiple selection", async () => {
@@ -357,45 +372,99 @@ test.describe("separator configuration", () => {
     await I.controls.num("separator", " | ")
 
     await I.clickTrigger()
+    await I.clickItem("Africa")
+    await I.clickItem("Algeria")
+    await I.clickItem("Adrar")
 
-    // Select first item
-    await I.clickItem("Dairy")
-    await I.seeTriggerHasText("Dairy")
+    await I.clickItem("Asia")
+    await I.clickItem("Afghanistan")
+    await I.clickItem("Badakhshān")
 
-    // Select second item - a path
-    await I.clickItem("Fruits")
-    await I.clickItem("Apple")
-    await I.seeTriggerHasText("Dairy, Fruits | Apple")
+    await I.seeTriggerHasText("Africa | Algeria | Adrar, Asia | Afghanistan | Badakhshān")
   })
 
   test("should use custom separator in nested paths", async () => {
+    await I.controls.num("separator", " :: ")
+
+    await I.clickTrigger()
+    await I.clickItem("Africa")
+    await I.clickItem("Algeria")
+    await I.clickItem("Adrar")
+
+    await I.seeTriggerHasText("Africa :: Algeria :: Adrar")
+  })
+
+  test("should use separator in clear functionality", async () => {
     await I.controls.num("separator", " > ")
 
     await I.clickTrigger()
-    await I.clickItem("Fruits")
-    await I.clickItem("Citrus")
-    await I.clickItem("Orange")
+    await I.clickItem("Africa")
+    await I.clickItem("Algeria")
+    await I.clickItem("Adrar")
+
+    await I.seeTriggerHasText("Africa > Algeria > Adrar")
 
-    await I.seeTriggerHasText("Fruits > Citrus > Orange")
+    await I.clickClearTrigger()
+    await I.seeTriggerHasText("Select a location")
   })
 
-  test("should handle special characters in separator", async () => {
-    await I.controls.num("separator", " 🍎 ")
+  test("should preserve separator in form values", async () => {
+    await I.controls.num("separator", " >> ")
 
     await I.clickTrigger()
-    await I.clickItem("Fruits")
-    await I.clickItem("Apple")
+    await I.clickItem("Africa")
+    await I.clickItem("Algeria")
+    await I.clickItem("Adrar")
 
-    await I.seeTriggerHasText("Fruits 🍎 Apple")
+    // Verify the hidden select element has the correct value
+    const hiddenSelect = await I.page.locator("select").first()
+    const value = await hiddenSelect.inputValue()
+    expect(value).toContain("africa >> algeria >> adrar")
   })
+})
 
-  test("should handle empty separator", async () => {
-    await I.controls.num("separator", "")
+test.describe("disabled items", () => {
+  test("should visually indicate disabled items", async () => {
+    await I.clickTrigger()
+
+    // Antarctica should have disabled styling
+    const antarcticaItem = I.page.locator('[data-part="item"][data-value="antarctica"]')
+    await expect(antarcticaItem).toHaveAttribute("data-disabled")
+    await expect(antarcticaItem).toHaveAttribute("aria-disabled", "true")
+  })
+
+  test("should not respond to clicks on disabled items", async () => {
+    await I.clickTrigger()
+    await I.seeTriggerHasText("Select a location")
+
+    // Try to force click Antarctica (disabled) - using force to bypass Playwright protection
+    await I.page.locator('[data-part="item"][data-value="antarctica"]').click({ force: true })
+
+    // Should not change the trigger text or close dropdown
+    await I.seeTriggerHasText("Select a location")
+    await I.seeDropdown()
+  })
 
+  test("should not respond to hover on disabled items when hover highlighting is enabled", async () => {
+    await I.controls.select("highlightTrigger", "hover")
     await I.clickTrigger()
-    await I.clickItem("Fruits")
-    await I.clickItem("Apple")
 
-    await I.seeTriggerHasText("FruitsApple")
+    // Hovering over disabled item should not trigger highlighting
+    await I.hoverItem("Antarctica")
+    await I.dontSeeHighlightedItems()
+  })
+
+  test("should skip disabled items during keyboard navigation", async () => {
+    await I.clickTrigger()
+    await I.pressKey("Home") // Go to first item
+    await I.seeItemIsHighlighted("Africa") // Should be Africa, not Antarctica
+
+    // Navigate down - should skip Antarctica and go to Asia
+    await I.pressKey("ArrowDown")
+    await I.seeItemIsHighlighted("Asia") // Should skip Antarctica
+
+    // Navigate up - should go back to Africa, skipping Antarctica
+    await I.pressKey("ArrowUp")
+    await I.seeItemIsHighlighted("Africa")
   })
 })
diff --git a/examples/next-ts/pages/cascade-select.tsx b/examples/next-ts/pages/cascade-select.tsx
index 36945ab116..f5d1aed9d1 100644
--- a/examples/next-ts/pages/cascade-select.tsx
+++ b/examples/next-ts/pages/cascade-select.tsx
@@ -1,5 +1,5 @@
 import { normalizeProps, useMachine } from "@zag-js/react"
-import { cascadeSelectControls } from "@zag-js/shared"
+import { cascadeSelectControls, cascadeSelectData } from "@zag-js/shared"
 import * as cascadeSelect from "@zag-js/cascade-select"
 import { ChevronDownIcon, ChevronRightIcon, XIcon } from "lucide-react"
 import { useId } from "react"
@@ -8,82 +8,19 @@ import { Toolbar } from "../components/toolbar"
 import { useControls } from "../hooks/use-controls"
 
 interface Node {
-  value: string
   label: string
-  children?: Node[]
+  value: string
+  continents?: Node[]
+  countries?: Node[]
+  code?: string
+  states?: Node[]
 }
 
 const collection = cascadeSelect.collection<Node>({
   nodeToValue: (node) => node.value,
   nodeToString: (node) => node.label,
-  rootNode: {
-    value: "ROOT",
-    label: "",
-    children: [
-      {
-        value: "fruits",
-        label: "Fruits",
-        children: [
-          {
-            value: "citrus",
-            label: "Citrus",
-            children: [
-              { value: "orange", label: "Orange" },
-              { value: "lemon", label: "Lemon" },
-              { value: "lime", label: "Lime" },
-            ],
-          },
-          {
-            value: "berries",
-            label: "Berries",
-            children: [
-              { value: "strawberry", label: "Strawberry" },
-              { value: "blueberry", label: "Blueberry" },
-              { value: "raspberry", label: "Raspberry" },
-            ],
-          },
-          { value: "apple", label: "Apple" },
-          { value: "banana", label: "Banana" },
-        ],
-      },
-      {
-        value: "vegetables",
-        label: "Vegetables",
-        children: [
-          {
-            value: "leafy",
-            label: "Leafy Greens",
-            children: [
-              { value: "spinach", label: "Spinach" },
-              { value: "lettuce", label: "Lettuce" },
-              { value: "kale", label: "Kale" },
-            ],
-          },
-          {
-            value: "root",
-            label: "Root Vegetables",
-            children: [
-              { value: "carrot", label: "Carrot" },
-              { value: "potato", label: "Potato" },
-              { value: "onion", label: "Onion" },
-            ],
-          },
-          { value: "tomato", label: "Tomato" },
-          { value: "cucumber", label: "Cucumber" },
-        ],
-      },
-      {
-        value: "grains",
-        label: "Grains",
-        children: [
-          { value: "rice", label: "Rice" },
-          { value: "wheat", label: "Wheat" },
-          { value: "oats", label: "Oats" },
-        ],
-      },
-      { value: "dairy", label: "Dairy" },
-    ],
-  },
+  nodeToChildren: (node) => node.continents ?? node.countries ?? node.states,
+  rootNode: cascadeSelectData,
 })
 
 export default function Page() {
@@ -92,7 +29,7 @@ export default function Page() {
   const service = useMachine(cascadeSelect.machine, {
     id: useId(),
     collection,
-    placeholder: "Select food category",
+    placeholder: "Select a location",
     onHighlightChange(details) {
       console.log("onHighlightChange", details)
     },
@@ -115,14 +52,16 @@ export default function Page() {
     return (
       <div key={level} {...api.getLevelProps({ level })}>
         {levelValues.map((value) => {
-          const itemState = api.getItemState({ value })
           const node = collection.findNode(value)
+          if (!node) return null
+
+          const itemState = api.getItemState({ item: node })
 
           return (
-            <div key={value} {...api.getItemProps({ value })}>
-              <span {...api.getItemTextProps({ value })}>{node?.label}</span>
+            <div key={value} {...api.getItemProps({ item: node })}>
+              <span {...api.getItemTextProps({ item: node })}>{node.label}</span>
               {itemState.hasChildren && (
-                <span {...api.getItemIndicatorProps({ value })}>
+                <span {...api.getItemIndicatorProps({ item: node })}>
                   <ChevronRightIcon size={16} />
                 </span>
               )}
@@ -137,7 +76,7 @@ export default function Page() {
     <>
       <main className="cascade-select">
         <div {...api.getRootProps()}>
-          <label {...api.getLabelProps()}>Food Categories</label>
+          <label {...api.getLabelProps()}>Select a location</label>
 
           <div {...api.getControlProps()}>
             <button {...api.getTriggerProps()}>
diff --git a/packages/machines/cascade-select/src/cascade-select.connect.ts b/packages/machines/cascade-select/src/cascade-select.connect.ts
index 33552480c4..df1b2e4720 100644
--- a/packages/machines/cascade-select/src/cascade-select.connect.ts
+++ b/packages/machines/cascade-select/src/cascade-select.connect.ts
@@ -4,12 +4,19 @@ import type { NormalizeProps, PropTypes } from "@zag-js/types"
 import type { Service } from "@zag-js/core"
 import { parts } from "./cascade-select.anatomy"
 import { dom } from "./cascade-select.dom"
-import type { CascadeSelectApi, CascadeSelectSchema, ItemProps, ItemState, LevelProps } from "./cascade-select.types"
-
-export function connect<T extends PropTypes>(
+import type {
+  CascadeSelectApi,
+  CascadeSelectSchema,
+  ItemProps,
+  ItemState,
+  LevelProps,
+  TreeNode,
+} from "./cascade-select.types"
+
+export function connect<T extends PropTypes, V = TreeNode>(
   service: Service<CascadeSelectSchema>,
   normalize: NormalizeProps<T>,
-): CascadeSelectApi<T> {
+): CascadeSelectApi<T, V> {
   const { send, context, prop, scope, computed, state } = service
 
   const collection = prop("collection")
@@ -77,9 +84,9 @@ export function connect<T extends PropTypes>(
       return mostRecentValue[level] || null
     },
 
-    getItemState(props: ItemProps): ItemState {
-      const { value: itemValue } = props
-      const node = collection.findNode(itemValue)
+    getItemState(props: ItemProps<V>): ItemState {
+      const { item } = props
+      const itemValue = collection.getNodeValue(item)
       const indexPath = collection.getIndexPath(itemValue)
       const depth = indexPath ? indexPath.length : 0
 
@@ -91,10 +98,10 @@ export function connect<T extends PropTypes>(
 
       return {
         value: itemValue,
-        disabled: !!prop("isItemDisabled")?.(itemValue),
+        disabled: collection.getNodeDisabled(item),
         highlighted: isHighlighted,
         selected: isSelected,
-        hasChildren: node ? collection.isBranchNode(node) : false,
+        hasChildren: collection.isBranchNode(item),
         depth,
       }
     },
@@ -243,11 +250,18 @@ export function connect<T extends PropTypes>(
     },
 
     getContentProps() {
+      const highlightedPath = context.get("highlightedPath")
+      const highlightedValue =
+        highlightedPath && highlightedPath.length > 0 ? highlightedPath[highlightedPath.length - 1] : null
+      const highlightedItemId = highlightedValue ? dom.getItemId(scope, highlightedValue) : undefined
+
       return normalize.element({
         ...parts.content.attrs,
         id: dom.getContentId(scope),
         role: "listbox",
         "aria-labelledby": dom.getLabelId(scope),
+        "aria-activedescendant": highlightedItemId,
+        "data-activedescendant": highlightedItemId,
         "data-state": open ? "open" : "closed",
         hidden: !open,
         tabIndex: 0,
@@ -307,8 +321,9 @@ export function connect<T extends PropTypes>(
       })
     },
 
-    getItemProps(props: ItemProps) {
-      const { value: itemValue } = props
+    getItemProps(props: ItemProps<V>) {
+      const { item } = props
+      const itemValue = collection.getNodeValue(item)
       const itemState = this.getItemState(props)
 
       return normalize.element({
@@ -337,13 +352,20 @@ export function connect<T extends PropTypes>(
         onPointerLeave(event) {
           if (!isInteractive) return
           if (itemState.disabled) return
+          if (props.persistFocus) return
+          if (event.pointerType !== "mouse") return
+
+          const pointerMoved = service.event.previous()?.type.includes("POINTER")
+          if (!pointerMoved) return
+
           send({ type: "ITEM.POINTER_LEAVE", value: itemValue, clientX: event.clientX, clientY: event.clientY })
         },
       })
     },
 
-    getItemTextProps(props: ItemProps) {
-      const { value: itemValue } = props
+    getItemTextProps(props: ItemProps<V>) {
+      const { item } = props
+      const itemValue = collection.getNodeValue(item)
       const itemState = this.getItemState(props)
       return normalize.element({
         ...parts.itemText.attrs,
@@ -354,8 +376,9 @@ export function connect<T extends PropTypes>(
       })
     },
 
-    getItemIndicatorProps(props: ItemProps) {
-      const { value: itemValue } = props
+    getItemIndicatorProps(props: ItemProps<V>) {
+      const { item } = props
+      const itemValue = collection.getNodeValue(item)
       const itemState = this.getItemState(props)
 
       return normalize.element({
diff --git a/packages/machines/cascade-select/src/cascade-select.machine.ts b/packages/machines/cascade-select/src/cascade-select.machine.ts
index ff61a8424b..de0ae21eca 100644
--- a/packages/machines/cascade-select/src/cascade-select.machine.ts
+++ b/packages/machines/cascade-select/src/cascade-select.machine.ts
@@ -1,9 +1,9 @@
 import { createGuards, createMachine } from "@zag-js/core"
 import { trackDismissableElement } from "@zag-js/dismissable"
-import { raf, trackFormControl } from "@zag-js/dom-query"
+import { raf, trackFormControl, observeAttributes, scrollIntoView } from "@zag-js/dom-query"
 import { getPlacement, type Placement } from "@zag-js/popper"
 import type { Point } from "@zag-js/rect-utils"
-import { last, isEmpty, nextIndex, prevIndex, isEqual } from "@zag-js/utils"
+import { last, isEmpty, isEqual } from "@zag-js/utils"
 import { collection } from "./cascade-select.collection"
 import { dom } from "./cascade-select.dom"
 import { createGraceArea, isPointerInGraceArea } from "./cascade-select.utils"
@@ -258,9 +258,9 @@ export const machine = createMachine<CascadeSelectSchema>({
 
     open: {
       tags: ["open"],
-      effects: ["trackDismissableElement", "computePlacement"],
+      effects: ["trackDismissableElement", "computePlacement", "scrollToHighlightedItem"],
       entry: ["setInitialFocus", "highlightLastSelectedValue"],
-      exit: ["clearHighlightedPath"],
+      exit: ["clearHighlightedPath", "scrollContentToTop"],
       on: {
         "CONTROLLED.CLOSE": [
           {
@@ -451,7 +451,7 @@ export const machine = createMachine<CascadeSelectSchema>({
         const collection = prop("collection")
         const node = collection.findNode(event.value)
 
-        if (!node) return false
+        if (!node || collection.getNodeDisabled(node)) return false
 
         // If parent selection is not allowed, only allow leaf nodes
         if (!prop("allowParentSelection")) {
@@ -470,7 +470,7 @@ export const machine = createMachine<CascadeSelectSchema>({
         if (!leafValue) return false
         const node = collection.findNode(leafValue)
 
-        if (!node) return false
+        if (!node || collection.getNodeDisabled(node)) return false
 
         // If parent selection is not allowed, only allow leaf nodes
         if (!prop("allowParentSelection")) {
@@ -639,6 +639,50 @@ export const machine = createMachine<CascadeSelectSchema>({
           },
         })
       },
+      scrollToHighlightedItem({ context, prop: _prop, scope, event }) {
+        const exec = (_immediate: boolean) => {
+          const highlightedPath = context.get("highlightedPath")
+          if (!highlightedPath || isEmpty(highlightedPath)) return
+
+          // Don't scroll into view if we're using the pointer
+          if (event.current().type.includes("POINTER")) return
+
+          const leafValue = last(highlightedPath)
+          if (!leafValue) return
+
+          // Get the item element for the highlighted leaf
+          const itemEl = dom.getItemEl(scope, leafValue)
+          if (!itemEl) return
+
+          // Find which level contains this item and scroll within that level
+          const levelIndex = highlightedPath.length - 1
+          const levelEl = dom.getLevelEl(scope, levelIndex)
+
+          // Use scrollIntoView to scroll the item into view within its level
+          scrollIntoView(itemEl, { rootEl: levelEl, block: "nearest" })
+        }
+
+        raf(() => exec(true))
+
+        const contentEl = () => dom.getContentEl(scope)
+        return observeAttributes(contentEl, {
+          defer: true,
+          attributes: ["data-activedescendant"],
+          callback() {
+            exec(false)
+          },
+        })
+      },
+      scrollContentToTop({ scope }) {
+        // Scroll all levels to the top when closing
+        raf(() => {
+          const contentEl = dom.getContentEl(scope)
+          const levelEls = contentEl?.querySelectorAll('[data-part="level"]')
+          levelEls?.forEach((levelEl) => {
+            ;(levelEl as HTMLElement).scrollTop = 0
+          })
+        })
+      },
     },
 
     actions: {
@@ -706,7 +750,7 @@ export const machine = createMachine<CascadeSelectSchema>({
         const collection = prop("collection")
         const node = collection.findNode(event.value)
 
-        if (!node || prop("isItemDisabled")?.(event.value)) return
+        if (!node || collection.getNodeDisabled(node)) return
 
         const hasChildren = collection.isBranchNode(node)
         const indexPath = collection.getIndexPath(event.value)
@@ -820,29 +864,89 @@ export const machine = createMachine<CascadeSelectSchema>({
 
         context.set("levelValues", levelValues)
       },
-      highlightFirstItem({ context, send }) {
-        const levelValues = context.get("levelValues")
+      highlightFirstItem({ context, prop, send }) {
+        const highlightedPath = context.get("highlightedPath")
         const value = context.get("value")
-        // Use the current active level (value.length) or first level if empty
-        const currentLevelIndex = Math.max(0, value.length)
-        const currentLevel = levelValues[currentLevelIndex]
+        const collection = prop("collection")
+
+        // Determine which level we're currently navigating based on highlighted path
+        let currentLevelDepth: number
+        let pathToParent: string[] = []
+
+        if (highlightedPath && highlightedPath.length > 0) {
+          // We're navigating at the level of the highlighted path
+          currentLevelDepth = highlightedPath.length - 1
+          pathToParent = highlightedPath.slice(0, -1)
+        } else {
+          // No highlighted path, default to root level
+          currentLevelDepth = value.length
+          if (currentLevelDepth > 0 && value.length > 0) {
+            const mostRecentPath = last(value) || []
+            pathToParent = mostRecentPath.slice(0, currentLevelDepth)
+          }
+        }
+
+        let parentNode: any = collection.rootNode
 
-        if (currentLevel && currentLevel.length > 0) {
-          const firstValue = currentLevel[0]
-          send({ type: "HIGHLIGHTED_PATH.SET", value: [firstValue] })
+        // Navigate to the current level's parent node
+        for (const nodeValue of pathToParent) {
+          const node = collection.findNode(nodeValue)
+          if (node && collection.isBranchNode(node)) {
+            parentNode = node
+          }
+        }
+
+        // Get the first child of the parent node
+        const firstChild = collection.getFirstNode(parentNode)
+        if (firstChild) {
+          const firstValue = collection.getNodeValue(firstChild)
+          if (pathToParent.length === 0) {
+            send({ type: "HIGHLIGHTED_PATH.SET", value: [firstValue] })
+          } else {
+            send({ type: "HIGHLIGHTED_PATH.SET", value: [...pathToParent, firstValue] })
+          }
         }
       },
-      highlightLastItem({ context, send }) {
-        const levelValues = context.get("levelValues")
+      highlightLastItem({ context, prop, send }) {
+        const highlightedPath = context.get("highlightedPath")
         const value = context.get("value")
-        // Use the current active level (value.length) or first level if empty
-        const currentLevelIndex = Math.max(0, value.length)
-        const currentLevel = levelValues[currentLevelIndex]
+        const collection = prop("collection")
+
+        // Determine which level we're currently navigating based on highlighted path
+        let currentLevelDepth: number
+        let pathToParent: string[] = []
 
-        if (currentLevel && !isEmpty(currentLevel)) {
-          const lastValue = last(currentLevel)
-          if (lastValue) {
+        if (highlightedPath && highlightedPath.length > 0) {
+          // We're navigating at the level of the highlighted path
+          currentLevelDepth = highlightedPath.length - 1
+          pathToParent = highlightedPath.slice(0, -1)
+        } else {
+          // No highlighted path, default to root level
+          currentLevelDepth = value.length
+          if (currentLevelDepth > 0 && value.length > 0) {
+            const mostRecentPath = last(value) || []
+            pathToParent = mostRecentPath.slice(0, currentLevelDepth)
+          }
+        }
+
+        let parentNode: any = collection.rootNode
+
+        // Navigate to the current level's parent node
+        for (const nodeValue of pathToParent) {
+          const node = collection.findNode(nodeValue)
+          if (node && collection.isBranchNode(node)) {
+            parentNode = node
+          }
+        }
+
+        // Get the last child of the parent node
+        const lastChild = collection.getLastNode(parentNode)
+        if (lastChild) {
+          const lastValue = collection.getNodeValue(lastChild)
+          if (pathToParent.length === 0) {
             send({ type: "HIGHLIGHTED_PATH.SET", value: [lastValue] })
+          } else {
+            send({ type: "HIGHLIGHTED_PATH.SET", value: [...pathToParent, lastValue] })
           }
         }
       },
@@ -850,96 +954,104 @@ export const machine = createMachine<CascadeSelectSchema>({
         const highlightedPath = context.get("highlightedPath")
         const levelValues = context.get("levelValues")
         const value = context.get("value")
+        const collection = prop("collection")
 
         if (!highlightedPath) {
-          // If nothing highlighted, highlight first item
+          // If nothing highlighted, highlight first non-disabled item
           const currentLevelIndex = Math.max(0, value.length)
           const currentLevel = levelValues[currentLevelIndex]
           if (currentLevel && currentLevel.length > 0) {
-            send({ type: "HIGHLIGHTED_PATH.SET", value: [currentLevel[0]] })
+            const firstValue = currentLevel.find((itemValue) => {
+              const node = collection.findNode(itemValue)
+              return node && !collection.getNodeDisabled(node)
+            })
+            if (firstValue) {
+              send({ type: "HIGHLIGHTED_PATH.SET", value: [firstValue] })
+            }
           }
           return
         }
 
-        // Find which level contains the last item in the highlighted path
+        // Get the leaf value and try to use tree collection methods
         const leafValue = last(highlightedPath)
         if (!leafValue) return
 
-        let targetLevel: string[] | undefined
-        let levelIndex = -1
+        const indexPath = collection.getIndexPath(leafValue)
+        if (!indexPath) return
 
-        for (let i = 0; i < levelValues.length; i++) {
-          if (levelValues[i]?.includes(leafValue)) {
-            targetLevel = levelValues[i]
-            levelIndex = i
-            break
-          }
+        // Try to get the next sibling using tree collection
+        const nextSibling = collection.getNextSibling(indexPath)
+        if (nextSibling) {
+          const nextValue = collection.getNodeValue(nextSibling)
+          // Build the correct path: parent path + next value
+          const parentPath = highlightedPath.slice(0, -1)
+          send({ type: "HIGHLIGHTED_PATH.SET", value: [...parentPath, nextValue] })
+          return
         }
 
-        if (!targetLevel || isEmpty(targetLevel)) return
-
-        const currentIndex = targetLevel.indexOf(leafValue)
-        if (currentIndex === -1) return
-
-        const nextIdx = nextIndex(targetLevel, currentIndex, { loop: prop("loop") })
-        const nextValue = targetLevel[nextIdx]
-
-        // Build the correct path: parent path + next value
-        if (levelIndex === 0) {
-          // First level - just the value
-          send({ type: "HIGHLIGHTED_PATH.SET", value: [nextValue] })
-        } else {
-          // Deeper level - parent path + next value
-          const parentPath = highlightedPath.slice(0, levelIndex)
-          send({ type: "HIGHLIGHTED_PATH.SET", value: [...parentPath, nextValue] })
+        // If no next sibling and looping is enabled, get first sibling
+        if (prop("loop")) {
+          const parentNode = collection.getParentNode(indexPath)
+          if (parentNode) {
+            const firstChild = collection.getFirstNode(parentNode)
+            if (firstChild) {
+              const firstValue = collection.getNodeValue(firstChild)
+              const parentPath = highlightedPath.slice(0, -1)
+              send({ type: "HIGHLIGHTED_PATH.SET", value: [...parentPath, firstValue] })
+            }
+          }
         }
       },
       highlightPreviousItem({ context, prop, send }) {
         const highlightedPath = context.get("highlightedPath")
         const levelValues = context.get("levelValues")
         const value = context.get("value")
+        const collection = prop("collection")
 
         if (!highlightedPath) {
-          // If nothing highlighted, highlight first item
+          // If nothing highlighted, highlight first non-disabled item
           const currentLevelIndex = Math.max(0, value.length)
           const currentLevel = levelValues[currentLevelIndex]
           if (currentLevel && currentLevel.length > 0) {
-            send({ type: "HIGHLIGHTED_PATH.SET", value: [currentLevel[0]] })
+            const firstValue = currentLevel.find((itemValue) => {
+              const node = collection.findNode(itemValue)
+              return node && !collection.getNodeDisabled(node)
+            })
+            if (firstValue) {
+              send({ type: "HIGHLIGHTED_PATH.SET", value: [firstValue] })
+            }
           }
           return
         }
 
-        // Find which level contains the last item in the highlighted path
+        // Get the leaf value and try to use tree collection methods
         const leafValue = last(highlightedPath)
         if (!leafValue) return
 
-        let targetLevel: string[] | undefined
-        let levelIndex = -1
+        const indexPath = collection.getIndexPath(leafValue)
+        if (!indexPath) return
 
-        for (let i = 0; i < levelValues.length; i++) {
-          if (levelValues[i]?.includes(leafValue)) {
-            targetLevel = levelValues[i]
-            levelIndex = i
-            break
-          }
+        // Try to get the previous sibling using tree collection
+        const prevSibling = collection.getPreviousSibling(indexPath)
+        if (prevSibling) {
+          const prevValue = collection.getNodeValue(prevSibling)
+          // Build the correct path: parent path + prev value
+          const parentPath = highlightedPath.slice(0, -1)
+          send({ type: "HIGHLIGHTED_PATH.SET", value: [...parentPath, prevValue] })
+          return
         }
 
-        if (!targetLevel || isEmpty(targetLevel)) return
-
-        const currentIndex = targetLevel.indexOf(leafValue)
-        if (currentIndex === -1) return
-
-        const prevIdx = prevIndex(targetLevel, currentIndex, { loop: prop("loop") })
-        const prevValue = targetLevel[prevIdx]
-
-        // Build the correct path: parent path + prev value
-        if (levelIndex === 0) {
-          // First level - just the value
-          send({ type: "HIGHLIGHTED_PATH.SET", value: [prevValue] })
-        } else {
-          // Deeper level - parent path + prev value
-          const parentPath = highlightedPath.slice(0, levelIndex)
-          send({ type: "HIGHLIGHTED_PATH.SET", value: [...parentPath, prevValue] })
+        // If no previous sibling and looping is enabled, get last sibling
+        if (prop("loop")) {
+          const parentNode = collection.getParentNode(indexPath)
+          if (parentNode) {
+            const lastChild = collection.getLastNode(parentNode)
+            if (lastChild) {
+              const lastValue = collection.getNodeValue(lastChild)
+              const parentPath = highlightedPath.slice(0, -1)
+              send({ type: "HIGHLIGHTED_PATH.SET", value: [...parentPath, lastValue] })
+            }
+          }
         }
       },
       highlightFirstChild({ context, prop, send }) {
@@ -953,9 +1065,10 @@ export const machine = createMachine<CascadeSelectSchema>({
 
         if (!node || !collection.isBranchNode(node)) return
 
-        const children = collection.getNodeChildren(node)
-        if (children.length > 0) {
-          const firstChildValue = collection.getNodeValue(children[0])
+        // Use getFirstNode to automatically handle disabled children
+        const firstChild = collection.getFirstNode(node)
+        if (firstChild) {
+          const firstChildValue = collection.getNodeValue(firstChild)
           // Build the new path by extending the current path
           const newPath = [...highlightedPath, firstChildValue]
           send({ type: "HIGHLIGHTED_PATH.SET", value: newPath })
diff --git a/packages/machines/cascade-select/src/cascade-select.types.ts b/packages/machines/cascade-select/src/cascade-select.types.ts
index a5fd779e4f..bc601e43ae 100644
--- a/packages/machines/cascade-select/src/cascade-select.types.ts
+++ b/packages/machines/cascade-select/src/cascade-select.types.ts
@@ -142,11 +142,7 @@ export interface CascadeSelectProps<T = any> extends DirectionProperty, CommonPr
    */
   onOpenChange?: ((details: OpenChangeDetails) => void) | undefined
   /**
-   * Function to determine if a node should be selectable
-   */
-  isItemDisabled?: ((value: string) => boolean) | undefined
-  /**
-   * Whether parent (branch) items can be selected
+   * Whether parent (branch) items can be selectable
    */
   allowParentSelection?: boolean
   /**
@@ -197,11 +193,15 @@ export type CascadeSelectMachine<T extends TreeNode = TreeNode> = Machine<Cascad
  * Component API
  * -----------------------------------------------------------------------------*/
 
-export interface ItemProps {
+export interface ItemProps<T = TreeNode> {
   /**
-   * The value of the item
+   * The item to render
    */
-  value: string
+  item: T
+  /**
+   * Whether hovering outside should clear the highlighted state
+   */
+  persistFocus?: boolean | undefined
 }
 
 export interface ItemState {
@@ -306,9 +306,9 @@ export interface CascadeSelectApi<T extends PropTypes = PropTypes, V = TreeNode>
   getPositionerProps(): T["element"]
   getContentProps(): T["element"]
   getLevelProps(props: LevelProps): T["element"]
-  getItemState(props: ItemProps): ItemState
-  getItemProps(props: ItemProps): T["element"]
-  getItemTextProps(props: ItemProps): T["element"]
-  getItemIndicatorProps(props: ItemProps): T["element"]
+  getItemState(props: ItemProps<V>): ItemState
+  getItemProps(props: ItemProps<V>): T["element"]
+  getItemTextProps(props: ItemProps<V>): T["element"]
+  getItemIndicatorProps(props: ItemProps<V>): T["element"]
   getHiddenSelectProps(): T["select"]
 }
diff --git a/shared/src/cascade-select-data.ts b/shared/src/cascade-select-data.ts
new file mode 100644
index 0000000000..cc064e96c8
--- /dev/null
+++ b/shared/src/cascade-select-data.ts
@@ -0,0 +1,16735 @@
+export const cascadeSelectData = {
+  label: "World",
+  value: "world",
+  continents: [
+    {
+      label: "Africa",
+      value: "africa",
+      countries: [
+        {
+          label: "Algeria",
+          value: "algeria",
+          code: "DZ",
+          states: [
+            {
+              label: "Adrar",
+              value: "adrar:01",
+            },
+            {
+              label: "Alger",
+              value: "alger:16",
+            },
+            {
+              label: "Annaba",
+              value: "annaba:23",
+            },
+            {
+              label: "Aïn Defla",
+              value: "aïn-defla:44",
+            },
+            {
+              label: "Aïn Témouchent",
+              value: "aïn-témouchent:46",
+            },
+            {
+              label: "Batna",
+              value: "batna:05",
+            },
+            {
+              label: "Biskra",
+              value: "biskra:07",
+            },
+            {
+              label: "Blida",
+              value: "blida:09",
+            },
+            {
+              label: "Bordj Bou Arréridj",
+              value: "bordj-bou-arréridj:34",
+            },
+            {
+              label: "Bouira",
+              value: "bouira:10",
+            },
+            {
+              label: "Boumerdès",
+              value: "boumerdès:35",
+            },
+            {
+              label: "Béchar",
+              value: "béchar:08",
+            },
+            {
+              label: "Béjaïa",
+              value: "béjaïa:06",
+            },
+            {
+              label: "Chlef",
+              value: "chlef:02",
+            },
+            {
+              label: "Constantine",
+              value: "constantine:25",
+            },
+            {
+              label: "Djelfa",
+              value: "djelfa:17",
+            },
+            {
+              label: "El Bayadh",
+              value: "el-bayadh:32",
+            },
+            {
+              label: "El Oued",
+              value: "el-oued:39",
+            },
+            {
+              label: "El Tarf",
+              value: "el-tarf:36",
+            },
+            {
+              label: "Ghardaïa",
+              value: "ghardaïa:47",
+            },
+            {
+              label: "Guelma",
+              value: "guelma:24",
+            },
+            {
+              label: "Illizi",
+              value: "illizi:33",
+            },
+            {
+              label: "Jijel",
+              value: "jijel:18",
+            },
+            {
+              label: "Khenchela",
+              value: "khenchela:40",
+            },
+            {
+              label: "Laghouat",
+              value: "laghouat:03",
+            },
+            {
+              label: "Mascara",
+              value: "mascara:29",
+            },
+            {
+              label: "Mila",
+              value: "mila:43",
+            },
+            {
+              label: "Mostaganem",
+              value: "mostaganem:27",
+            },
+            {
+              label: "Msila",
+              value: "msila:28",
+            },
+            {
+              label: "Médéa",
+              value: "médéa:26",
+            },
+            {
+              label: "Naama",
+              value: "naama:45",
+            },
+            {
+              label: "Oran",
+              value: "oran:31",
+            },
+            {
+              label: "Ouargla",
+              value: "ouargla:30",
+            },
+            {
+              label: "Oum el Bouaghi",
+              value: "oum-el-bouaghi:04",
+            },
+            {
+              label: "Relizane",
+              value: "relizane:48",
+            },
+            {
+              label: "Saïda",
+              value: "saïda:20",
+            },
+            {
+              label: "Sidi Bel Abbès",
+              value: "sidi-bel-abbès:22",
+            },
+            {
+              label: "Skikda",
+              value: "skikda:21",
+            },
+            {
+              label: "Souk Ahras",
+              value: "souk-ahras:41",
+            },
+            {
+              label: "Sétif",
+              value: "sétif:19",
+            },
+            {
+              label: "Tamanghasset",
+              value: "tamanghasset:11",
+            },
+            {
+              label: "Tiaret",
+              value: "tiaret:14",
+            },
+            {
+              label: "Tindouf",
+              value: "tindouf:37",
+            },
+            {
+              label: "Tipaza",
+              value: "tipaza:42",
+            },
+            {
+              label: "Tissemsilt",
+              value: "tissemsilt:38",
+            },
+            {
+              label: "Tizi Ouzou",
+              value: "tizi-ouzou:15",
+            },
+            {
+              label: "Tlemcen",
+              value: "tlemcen:13",
+            },
+            {
+              label: "Tébessa",
+              value: "tébessa:12",
+            },
+          ],
+        },
+        {
+          label: "Angola",
+          value: "angola",
+          code: "AO",
+          states: [
+            {
+              label: "Bengo",
+              value: "bengo:BGO",
+            },
+            {
+              label: "Benguela",
+              value: "benguela:BGU",
+            },
+            {
+              label: "Bié",
+              value: "bié:BIE",
+            },
+            {
+              label: "Cabinda",
+              value: "cabinda:CAB",
+            },
+            {
+              label: "Cunene",
+              value: "cunene:CNN",
+            },
+            {
+              label: "Huambo",
+              value: "huambo:HUA",
+            },
+            {
+              label: "Huíla",
+              value: "huíla:HUI",
+            },
+            {
+              label: "Kuando Kubango",
+              value: "kuando-kubango:CCU",
+            },
+            {
+              label: "Kwanza Norte",
+              value: "kwanza-norte:CNO",
+            },
+            {
+              label: "Kwanza Sul",
+              value: "kwanza-sul:CUS",
+            },
+            {
+              label: "Luanda",
+              value: "luanda:LUA",
+            },
+            {
+              label: "Lunda Norte",
+              value: "lunda-norte:LNO",
+            },
+            {
+              label: "Lunda Sul",
+              value: "lunda-sul:LSU",
+            },
+            {
+              label: "Malange",
+              value: "malange:MAL",
+            },
+            {
+              label: "Moxico",
+              value: "moxico:MOX",
+            },
+            {
+              label: "Namibe",
+              value: "namibe:NAM",
+            },
+            {
+              label: "Uíge",
+              value: "uíge:UIG",
+            },
+            {
+              label: "Zaire",
+              value: "zaire:ZAI",
+            },
+          ],
+        },
+        {
+          label: "Benin",
+          value: "benin",
+          code: "BJ",
+          states: [
+            {
+              label: "Alibori",
+              value: "alibori:AL",
+            },
+            {
+              label: "Atakora",
+              value: "atakora:AK",
+            },
+            {
+              label: "Atlantique",
+              value: "atlantique:AQ",
+            },
+            {
+              label: "Borgou",
+              value: "borgou:BO",
+            },
+            {
+              label: "Collines",
+              value: "collines:CO",
+            },
+            {
+              label: "Donga",
+              value: "donga:DO",
+            },
+            {
+              label: "Kouffo",
+              value: "kouffo:KO",
+            },
+            {
+              label: "Littoral",
+              value: "littoral:LI",
+            },
+            {
+              label: "Mono",
+              value: "mono:MO",
+            },
+            {
+              label: "Ouémé",
+              value: "ouémé:OU",
+            },
+            {
+              label: "Plateau",
+              value: "plateau:PL",
+            },
+            {
+              label: "Zou",
+              value: "zou:ZO",
+            },
+          ],
+        },
+        {
+          label: "Botswana",
+          value: "botswana",
+          code: "BW",
+          states: [
+            {
+              label: "Central",
+              value: "central:CE",
+            },
+            {
+              label: "Chobe",
+              value: "chobe:CH",
+            },
+            {
+              label: "Francistown",
+              value: "francistown:FR",
+            },
+            {
+              label: "Gaborone",
+              value: "gaborone:GA",
+            },
+            {
+              label: "Ghanzi",
+              value: "ghanzi:GH",
+            },
+            {
+              label: "Jwaneng",
+              value: "jwaneng:JW",
+            },
+            {
+              label: "Kgalagadi",
+              value: "kgalagadi:KG",
+            },
+            {
+              label: "Kgatleng",
+              value: "kgatleng:KL",
+            },
+            {
+              label: "Kweneng",
+              value: "kweneng:KW",
+            },
+            {
+              label: "Lobatse",
+              value: "lobatse:LO",
+            },
+            {
+              label: "North-East",
+              value: "north-east:NE",
+            },
+            {
+              label: "North-West",
+              value: "north-west:NW",
+            },
+            {
+              label: "Selibe Phikwe",
+              value: "selibe-phikwe:SP",
+            },
+            {
+              label: "South-East",
+              value: "south-east:SE",
+            },
+            {
+              label: "Southern",
+              value: "southern:SO",
+            },
+            {
+              label: "Sowa Town",
+              value: "sowa-town:ST",
+            },
+          ],
+        },
+        {
+          label: "British Indian Ocean Territory",
+          value: "british-indian-ocean-territory",
+          code: "IO",
+          states: [],
+        },
+        {
+          label: "Burkina Faso",
+          value: "burkina-faso",
+          code: "BF",
+          states: [
+            {
+              label: "Boucle du Mouhoun",
+              value: "boucle-du-mouhoun:01",
+            },
+            {
+              label: "Cascades",
+              value: "cascades:02",
+            },
+            {
+              label: "Centre",
+              value: "centre:03",
+            },
+            {
+              label: "Centre-Est",
+              value: "centre-est:04",
+            },
+            {
+              label: "Centre-Nord",
+              value: "centre-nord:05",
+            },
+            {
+              label: "Centre-Ouest",
+              value: "centre-ouest:06",
+            },
+            {
+              label: "Centre-Sud",
+              value: "centre-sud:07",
+            },
+            {
+              label: "Est",
+              value: "est:08",
+            },
+            {
+              label: "Hauts-Bassins",
+              value: "hauts-bassins:09",
+            },
+            {
+              label: "Nord",
+              value: "nord:10",
+            },
+            {
+              label: "Plateau-Central",
+              value: "plateau-central:11",
+            },
+            {
+              label: "Sahel",
+              value: "sahel:12",
+            },
+            {
+              label: "Sud-Ouest",
+              value: "sud-ouest:13",
+            },
+          ],
+        },
+        {
+          label: "Burundi",
+          value: "burundi",
+          code: "BI",
+          states: [
+            {
+              label: "Bubanza",
+              value: "bubanza:BB",
+            },
+            {
+              label: "Bujumbura Mairie",
+              value: "bujumbura-mairie:BM",
+            },
+            {
+              label: "Bujumbura Rural",
+              value: "bujumbura-rural:BL",
+            },
+            {
+              label: "Bururi",
+              value: "bururi:BR",
+            },
+            {
+              label: "Cankuzo",
+              value: "cankuzo:CA",
+            },
+            {
+              label: "Cibitoke",
+              value: "cibitoke:CI",
+            },
+            {
+              label: "Gitega",
+              value: "gitega:GI",
+            },
+            {
+              label: "Karuzi",
+              value: "karuzi:KR",
+            },
+            {
+              label: "Kayanza",
+              value: "kayanza:KY",
+            },
+            {
+              label: "Kirundo",
+              value: "kirundo:KI",
+            },
+            {
+              label: "Makamba",
+              value: "makamba:MA",
+            },
+            {
+              label: "Muramvya",
+              value: "muramvya:MU",
+            },
+            {
+              label: "Muyinga",
+              value: "muyinga:MY",
+            },
+            {
+              label: "Mwaro",
+              value: "mwaro:MW",
+            },
+            {
+              label: "Ngozi",
+              value: "ngozi:NG",
+            },
+            {
+              label: "Rutana",
+              value: "rutana:RT",
+            },
+            {
+              label: "Ruyigi",
+              value: "ruyigi:RY",
+            },
+          ],
+        },
+        {
+          label: "Cameroon",
+          value: "cameroon",
+          code: "CM",
+          states: [
+            {
+              label: "Adamaoua",
+              value: "adamaoua:AD",
+            },
+            {
+              label: "Centre",
+              value: "centre:CE",
+            },
+            {
+              label: "East",
+              value: "east:ES",
+            },
+            {
+              label: "Far North",
+              value: "far-north:EN",
+            },
+            {
+              label: "Littoral",
+              value: "littoral:LT",
+            },
+            {
+              label: "North",
+              value: "north:NO",
+            },
+            {
+              label: "North-West",
+              value: "north-west:NW",
+            },
+            {
+              label: "South",
+              value: "south:SU",
+            },
+            {
+              label: "South-West",
+              value: "south-west:SW",
+            },
+            {
+              label: "West",
+              value: "west:OU",
+            },
+          ],
+        },
+        {
+          label: "Cape Verde",
+          value: "cape-verde",
+          code: "CV",
+          states: [
+            {
+              label: "Ilhas de Barlavento",
+              value: "ilhas-de-barlavento:B",
+            },
+            {
+              label: "Ilhas de Sotavento",
+              value: "ilhas-de-sotavento:S",
+            },
+          ],
+        },
+        {
+          label: "Central African Republic",
+          value: "central-african-republic",
+          code: "CF",
+          states: [
+            {
+              label: "Bamingui-Bangoran",
+              value: "bamingui-bangoran:BB",
+            },
+            {
+              label: "Bangui",
+              value: "bangui:BGF",
+            },
+            {
+              label: "Basse-Kotto",
+              value: "basse-kotto:BK",
+            },
+            {
+              label: "Gribingui",
+              value: "gribingui:KB",
+            },
+            {
+              label: "Haut-Mbomou",
+              value: "haut-mbomou:HM",
+            },
+            {
+              label: "Haute-Kotto",
+              value: "haute-kotto:HK",
+            },
+            {
+              label: "Haute-Sangha / Mambéré-Kadéï",
+              value: "haute-sangha-/-mambéré-kadéï:HS",
+            },
+            {
+              label: "Kémo-Gribingui",
+              value: "kémo-gribingui:KG",
+            },
+            {
+              label: "Lobaye",
+              value: "lobaye:LB",
+            },
+            {
+              label: "Mbomou",
+              value: "mbomou:MB",
+            },
+            {
+              label: "Nana-Mambéré",
+              value: "nana-mambéré:NM",
+            },
+            {
+              label: "Ombella-Mpoko",
+              value: "ombella-mpoko:MP",
+            },
+            {
+              label: "Ouaka",
+              value: "ouaka:UK",
+            },
+            {
+              label: "Ouham",
+              value: "ouham:AC",
+            },
+            {
+              label: "Ouham-Pendé",
+              value: "ouham-pendé:OP",
+            },
+            {
+              label: "Sangha",
+              value: "sangha:SE",
+            },
+            {
+              label: "Vakaga",
+              value: "vakaga:VK",
+            },
+          ],
+        },
+        {
+          label: "Chad",
+          value: "chad",
+          code: "TD",
+          states: [
+            {
+              label: "Al Baṭḩah",
+              value: "al-baṭḩah:BA",
+            },
+            {
+              label: "Al Buḩayrah",
+              value: "al-buḩayrah:LC",
+            },
+            {
+              label: "Baḩr al Ghazāl",
+              value: "baḩr-al-ghazāl:BG",
+            },
+            {
+              label: "Būrkū",
+              value: "būrkū:BO",
+            },
+            {
+              label: "Innīdī",
+              value: "innīdī:EN",
+            },
+            {
+              label: "Kānim",
+              value: "kānim:KA",
+            },
+            {
+              label: "Lūqūn al Gharbī",
+              value: "lūqūn-al-gharbī:LO",
+            },
+            {
+              label: "Lūqūn ash Sharqī",
+              value: "lūqūn-ash-sharqī:LR",
+            },
+            {
+              label: "Madīnat Injamīnā",
+              value: "madīnat-injamīnā:ND",
+            },
+            {
+              label: "Māndūl",
+              value: "māndūl:MA",
+            },
+            {
+              label: "Māyū Kībbī al Gharbī",
+              value: "māyū-kībbī-al-gharbī:MO",
+            },
+            {
+              label: "Māyū Kībbī ash Sharqī",
+              value: "māyū-kībbī-ash-sharqī:ME",
+            },
+            {
+              label: "Qīrā",
+              value: "qīrā:GR",
+            },
+            {
+              label: "Salāmāt",
+              value: "salāmāt:SA",
+            },
+            {
+              label: "Shārī Bāqirmī",
+              value: "shārī-bāqirmī:CB",
+            },
+            {
+              label: "Shārī al Awsaṭ",
+              value: "shārī-al-awsaṭ:MC",
+            },
+            {
+              label: "Sīlā",
+              value: "sīlā:SI",
+            },
+            {
+              label: "Tibastī",
+              value: "tibastī:TI",
+            },
+            {
+              label: "Tānjilī",
+              value: "tānjilī:TA",
+            },
+            {
+              label: "Waddāy",
+              value: "waddāy:OD",
+            },
+            {
+              label: "Wādī Fīrā",
+              value: "wādī-fīrā:WF",
+            },
+            {
+              label: "Ḥajjar Lamīs",
+              value: "ḥajjar-lamīs:HL",
+            },
+          ],
+        },
+        {
+          label: "Comoros",
+          value: "comoros",
+          code: "KM",
+          states: [
+            {
+              label: "Anjouan",
+              value: "anjouan:A",
+            },
+            {
+              label: "Grande Comore",
+              value: "grande-comore:G",
+            },
+            {
+              label: "Mohéli",
+              value: "mohéli:M",
+            },
+          ],
+        },
+        {
+          label: "Republic of the Congo",
+          value: "republic-of-the-congo",
+          code: "CG",
+          states: [
+            {
+              label: "Bouenza",
+              value: "bouenza:11",
+            },
+            {
+              label: "Brazzaville",
+              value: "brazzaville:BZV",
+            },
+            {
+              label: "Cuvette",
+              value: "cuvette:8",
+            },
+            {
+              label: "Cuvette-Ouest",
+              value: "cuvette-ouest:15",
+            },
+            {
+              label: "Kouilou",
+              value: "kouilou:5",
+            },
+            {
+              label: "Likouala",
+              value: "likouala:7",
+            },
+            {
+              label: "Lékoumou",
+              value: "lékoumou:2",
+            },
+            {
+              label: "Niari",
+              value: "niari:9",
+            },
+            {
+              label: "Plateaux",
+              value: "plateaux:14",
+            },
+            {
+              label: "Pointe-Noire",
+              value: "pointe-noire:16",
+            },
+            {
+              label: "Pool",
+              value: "pool:12",
+            },
+            {
+              label: "Sangha",
+              value: "sangha:13",
+            },
+          ],
+        },
+        {
+          label: "Democratic Republic of the Congo",
+          value: "democratic-republic-of-the-congo",
+          code: "CD",
+          states: [
+            {
+              label: "Bandundu",
+              value: "bandundu:BN",
+            },
+            {
+              label: "Bas-Congo",
+              value: "bas-congo:BC",
+            },
+            {
+              label: "Kasai-Occidental",
+              value: "kasai-occidental:KW",
+            },
+            {
+              label: "Kasai-Oriental",
+              value: "kasai-oriental:KE",
+            },
+            {
+              label: "Katanga",
+              value: "katanga:KA",
+            },
+            {
+              label: "Kinshasa",
+              value: "kinshasa:KN",
+            },
+            {
+              label: "Maniema",
+              value: "maniema:MA",
+            },
+            {
+              label: "Nord-Kivu",
+              value: "nord-kivu:NK",
+            },
+            {
+              label: "Orientale",
+              value: "orientale:OR",
+            },
+            {
+              label: "Sud-Kivu",
+              value: "sud-kivu:SK",
+            },
+            {
+              label: "Équateur",
+              value: "équateur:EQ",
+            },
+          ],
+        },
+        {
+          label: "Djibouti",
+          value: "djibouti",
+          code: "DJ",
+          states: [
+            {
+              label: "Ali Sabieh",
+              value: "ali-sabieh:AS",
+            },
+            {
+              label: "Arta",
+              value: "arta:AR",
+            },
+            {
+              label: "Dikhil",
+              value: "dikhil:DI",
+            },
+            {
+              label: "Djibouti",
+              value: "djibouti:DJ",
+            },
+            {
+              label: "Obock",
+              value: "obock:OB",
+            },
+            {
+              label: "Tadjourah",
+              value: "tadjourah:TA",
+            },
+          ],
+        },
+        {
+          label: "Egypt",
+          value: "egypt",
+          code: "EG",
+          states: [
+            {
+              label: "Ad Daqahlīyah",
+              value: "ad-daqahlīyah:DK",
+            },
+            {
+              label: "Al Baḩr al Aḩmar",
+              value: "al-baḩr-al-aḩmar:BA",
+            },
+            {
+              label: "Al Buḩayrah",
+              value: "al-buḩayrah:BH",
+            },
+            {
+              label: "Al Fayyūm",
+              value: "al-fayyūm:FYM",
+            },
+            {
+              label: "Al Gharbīyah",
+              value: "al-gharbīyah:GH",
+            },
+            {
+              label: "Al Iskandarīyah",
+              value: "al-iskandarīyah:ALX",
+            },
+            {
+              label: "Al Ismāٰīlīyah",
+              value: "al-ismāٰīlīyah:IS",
+            },
+            {
+              label: "Al Jīzah",
+              value: "al-jīzah:GZ",
+            },
+            {
+              label: "Al Minyā",
+              value: "al-minyā:MN",
+            },
+            {
+              label: "Al Minūfīyah",
+              value: "al-minūfīyah:MNF",
+            },
+            {
+              label: "Al Qalyūbīyah",
+              value: "al-qalyūbīyah:KB",
+            },
+            {
+              label: "Al Qāhirah",
+              value: "al-qāhirah:C",
+            },
+            {
+              label: "Al Uqşur",
+              value: "al-uqşur:LX",
+            },
+            {
+              label: "Al Wādī al Jadīd",
+              value: "al-wādī-al-jadīd:WAD",
+            },
+            {
+              label: "As Suways",
+              value: "as-suways:SUZ",
+            },
+            {
+              label: "As Sādis min Uktūbar",
+              value: "as-sādis-min-uktūbar:SU",
+            },
+            {
+              label: "Ash Sharqīyah",
+              value: "ash-sharqīyah:SHR",
+            },
+            {
+              label: "Aswān",
+              value: "aswān:ASN",
+            },
+            {
+              label: "Asyūţ",
+              value: "asyūţ:AST",
+            },
+            {
+              label: "Banī Suwayf",
+              value: "banī-suwayf:BNS",
+            },
+            {
+              label: "Būr Saٰīd",
+              value: "būr-saٰīd:PTS",
+            },
+            {
+              label: "Dumyāţ",
+              value: "dumyāţ:DT",
+            },
+            {
+              label: "Janūb Sīnā'",
+              value: "janūb-sīnā':JS",
+            },
+            {
+              label: "Kafr ash Shaykh",
+              value: "kafr-ash-shaykh:KFS",
+            },
+            {
+              label: "Maţrūḩ",
+              value: "maţrūḩ:MT",
+            },
+            {
+              label: "Qinā",
+              value: "qinā:KN",
+            },
+            {
+              label: "Shamāl Sīnā'",
+              value: "shamāl-sīnā':SIN",
+            },
+            {
+              label: "Sūhāj",
+              value: "sūhāj:SHG",
+            },
+            {
+              label: "Ḩulwān",
+              value: "ḩulwān:HU",
+            },
+          ],
+        },
+        {
+          label: "Equatorial Guinea",
+          value: "equatorial-guinea",
+          code: "GQ",
+          states: [
+            {
+              label: "Región Continental",
+              value: "región-continental:C",
+            },
+            {
+              label: "Región Insular",
+              value: "región-insular:I",
+            },
+          ],
+        },
+        {
+          label: "Eritrea",
+          value: "eritrea",
+          code: "ER",
+          states: [
+            {
+              label: "Al Awsaţ",
+              value: "al-awsaţ:MA",
+            },
+            {
+              label: "Al Janūbĩ",
+              value: "al-janūbĩ:DU",
+            },
+            {
+              label: "Ansabā",
+              value: "ansabā:AN",
+            },
+            {
+              label: "Janūbī al Baḩrī al Aḩmar",
+              value: "janūbī-al-baḩrī-al-aḩmar:DK",
+            },
+            {
+              label: "Qāsh-Barkah",
+              value: "qāsh-barkah:GB",
+            },
+            {
+              label: "Shimālī al Baḩrī al Aḩmar",
+              value: "shimālī-al-baḩrī-al-aḩmar:SK",
+            },
+          ],
+        },
+        {
+          label: "Ethiopia",
+          value: "ethiopia",
+          code: "ET",
+          states: [
+            {
+              label: "Bīnshangul Gumuz",
+              value: "bīnshangul-gumuz:BE",
+            },
+            {
+              label: "Dirē Dawa",
+              value: "dirē-dawa:DD",
+            },
+            {
+              label: "Gambēla Hizboch",
+              value: "gambēla-hizboch:GA",
+            },
+            {
+              label: "Hārerī Hizb",
+              value: "hārerī-hizb:HA",
+            },
+            {
+              label: "Oromīya",
+              value: "oromīya:OR",
+            },
+            {
+              label: "Sumalē",
+              value: "sumalē:SO",
+            },
+            {
+              label: "Tigray",
+              value: "tigray:TI",
+            },
+            {
+              label: "YeDebub Bihēroch Bihēreseboch na Hizboch",
+              value: "yedebub-bihēroch-bihēreseboch-na-hizboch:SN",
+            },
+            {
+              label: "Ādīs Ābeba",
+              value: "ādīs-ābeba:AA",
+            },
+            {
+              label: "Āfar",
+              value: "āfar:AF",
+            },
+            {
+              label: "Āmara",
+              value: "āmara:AM",
+            },
+          ],
+        },
+        {
+          label: "French Southern and Antarctic Lands",
+          value: "french-southern-and-antarctic-lands",
+          code: "TF",
+          states: [],
+        },
+        {
+          label: "Gabon",
+          value: "gabon",
+          code: "GA",
+          states: [
+            {
+              label: "Estuaire",
+              value: "estuaire:1",
+            },
+            {
+              label: "Haut-Ogooué",
+              value: "haut-ogooué:2",
+            },
+            {
+              label: "Moyen-Ogooué",
+              value: "moyen-ogooué:3",
+            },
+            {
+              label: "Ngounié",
+              value: "ngounié:4",
+            },
+            {
+              label: "Nyanga",
+              value: "nyanga:5",
+            },
+            {
+              label: "Ogooué-Ivindo",
+              value: "ogooué-ivindo:6",
+            },
+            {
+              label: "Ogooué-Lolo",
+              value: "ogooué-lolo:7",
+            },
+            {
+              label: "Ogooué-Maritime",
+              value: "ogooué-maritime:8",
+            },
+            {
+              label: "Woleu-Ntem",
+              value: "woleu-ntem:9",
+            },
+          ],
+        },
+        {
+          label: "The Gambia",
+          value: "the-gambia",
+          code: "GM",
+          states: [
+            {
+              label: "Banjul",
+              value: "banjul:B",
+            },
+            {
+              label: "Central River",
+              value: "central-river:M",
+            },
+            {
+              label: "Lower River",
+              value: "lower-river:L",
+            },
+            {
+              label: "North Bank",
+              value: "north-bank:N",
+            },
+            {
+              label: "Upper River",
+              value: "upper-river:U",
+            },
+            {
+              label: "Western",
+              value: "western:W",
+            },
+          ],
+        },
+        {
+          label: "Ghana",
+          value: "ghana",
+          code: "GH",
+          states: [
+            {
+              label: "Ashanti",
+              value: "ashanti:AH",
+            },
+            {
+              label: "Brong-Ahafo",
+              value: "brong-ahafo:BA",
+            },
+            {
+              label: "Central",
+              value: "central:CP",
+            },
+            {
+              label: "Eastern",
+              value: "eastern:EP",
+            },
+            {
+              label: "Greater Accra",
+              value: "greater-accra:AA",
+            },
+            {
+              label: "Northern",
+              value: "northern:NP",
+            },
+            {
+              label: "Upper East",
+              value: "upper-east:UE",
+            },
+            {
+              label: "Upper West",
+              value: "upper-west:UW",
+            },
+            {
+              label: "Volta",
+              value: "volta:TV",
+            },
+            {
+              label: "Western",
+              value: "western:WP",
+            },
+          ],
+        },
+        {
+          label: "Guinea",
+          value: "guinea",
+          code: "GN",
+          states: [
+            {
+              label: "Boké",
+              value: "boké:B",
+            },
+            {
+              label: "Conakry",
+              value: "conakry:C",
+            },
+            {
+              label: "Faranah",
+              value: "faranah:F",
+            },
+            {
+              label: "Kankan",
+              value: "kankan:K",
+            },
+            {
+              label: "Kindia",
+              value: "kindia:D",
+            },
+            {
+              label: "Labé",
+              value: "labé:L",
+            },
+            {
+              label: "Mamou",
+              value: "mamou:M",
+            },
+            {
+              label: "Nzérékoré",
+              value: "nzérékoré:N",
+            },
+          ],
+        },
+        {
+          label: "Guinea-Bissau",
+          value: "guinea-bissau",
+          code: "GW",
+          states: [
+            {
+              label: "Leste",
+              value: "leste:L",
+            },
+            {
+              label: "Norte",
+              value: "norte:N",
+            },
+            {
+              label: "Sul",
+              value: "sul:S",
+            },
+          ],
+        },
+        {
+          label: "Ivory Coast",
+          value: "ivory-coast",
+          code: "CI",
+          states: [
+            {
+              label: "18 Montagnes",
+              value: "18-montagnes:06",
+            },
+            {
+              label: "Agnébi",
+              value: "agnébi:16",
+            },
+            {
+              label: "Bafing",
+              value: "bafing:17",
+            },
+            {
+              label: "Bas-Sassandra",
+              value: "bas-sassandra:09",
+            },
+            {
+              label: "Denguélé",
+              value: "denguélé:10",
+            },
+            {
+              label: "Fromager",
+              value: "fromager:18",
+            },
+            {
+              label: "Haut-Sassandra",
+              value: "haut-sassandra:02",
+            },
+            {
+              label: "Lacs",
+              value: "lacs:07",
+            },
+            {
+              label: "Lagunes",
+              value: "lagunes:01",
+            },
+            {
+              label: "Marahoué",
+              value: "marahoué:12",
+            },
+            {
+              label: "Moyen-Cavally",
+              value: "moyen-cavally:19",
+            },
+            {
+              label: "Moyen-Comoé",
+              value: "moyen-comoé:05",
+            },
+            {
+              label: "Nzi-Comoé",
+              value: "nzi-comoé:11",
+            },
+            {
+              label: "Savanes",
+              value: "savanes:03",
+            },
+            {
+              label: "Sud-Bandama",
+              value: "sud-bandama:15",
+            },
+            {
+              label: "Sud-Comoé",
+              value: "sud-comoé:13",
+            },
+            {
+              label: "Vallée du Bandama",
+              value: "vallée-du-bandama:04",
+            },
+            {
+              label: "Worodougou",
+              value: "worodougou:14",
+            },
+            {
+              label: "Zanzan",
+              value: "zanzan:08",
+            },
+          ],
+        },
+        {
+          label: "Kenya",
+          value: "kenya",
+          code: "KE",
+          states: [
+            {
+              label: "Central",
+              value: "central:200",
+            },
+            {
+              label: "Coast",
+              value: "coast:300",
+            },
+            {
+              label: "Eastern",
+              value: "eastern:400",
+            },
+            {
+              label: "Nairobi",
+              value: "nairobi:110",
+            },
+            {
+              label: "North-Eastern",
+              value: "north-eastern:500",
+            },
+            {
+              label: "Nyanza",
+              value: "nyanza:600",
+            },
+            {
+              label: "Rift Valley",
+              value: "rift-valley:700",
+            },
+            {
+              label: "Western",
+              value: "western:800",
+            },
+          ],
+        },
+        {
+          label: "Lesotho",
+          value: "lesotho",
+          code: "LS",
+          states: [
+            {
+              label: "Berea",
+              value: "berea:D",
+            },
+            {
+              label: "Butha-Buthe",
+              value: "butha-buthe:B",
+            },
+            {
+              label: "Leribe",
+              value: "leribe:C",
+            },
+            {
+              label: "Mafeteng",
+              value: "mafeteng:E",
+            },
+            {
+              label: "Maseru",
+              value: "maseru:A",
+            },
+            {
+              label: "Mohale's Hoek",
+              value: "mohale's-hoek:F",
+            },
+            {
+              label: "Mokhotlong",
+              value: "mokhotlong:J",
+            },
+            {
+              label: "Qacha's Nek",
+              value: "qacha's-nek:H",
+            },
+            {
+              label: "Quthing",
+              value: "quthing:G",
+            },
+            {
+              label: "Thaba-Tseka",
+              value: "thaba-tseka:K",
+            },
+          ],
+        },
+        {
+          label: "Liberia",
+          value: "liberia",
+          code: "LR",
+          states: [
+            {
+              label: "Bomi",
+              value: "bomi:BM",
+            },
+            {
+              label: "Bong",
+              value: "bong:BG",
+            },
+            {
+              label: "Gbarpolu",
+              value: "gbarpolu:GP",
+            },
+            {
+              label: "Grand Bassa",
+              value: "grand-bassa:GB",
+            },
+            {
+              label: "Grand Cape Mount",
+              value: "grand-cape-mount:CM",
+            },
+            {
+              label: "Grand Gedeh",
+              value: "grand-gedeh:GG",
+            },
+            {
+              label: "Grand Kru",
+              value: "grand-kru:GK",
+            },
+            {
+              label: "Lofa",
+              value: "lofa:LO",
+            },
+            {
+              label: "Margibi",
+              value: "margibi:MG",
+            },
+            {
+              label: "Maryland",
+              value: "maryland:MY",
+            },
+            {
+              label: "Montserrado",
+              value: "montserrado:MO",
+            },
+            {
+              label: "Nimba",
+              value: "nimba:NI",
+            },
+            {
+              label: "River Gee",
+              value: "river-gee:RG",
+            },
+            {
+              label: "Rivercess",
+              value: "rivercess:RI",
+            },
+            {
+              label: "Sinoe",
+              value: "sinoe:SI",
+            },
+          ],
+        },
+        {
+          label: "Libya",
+          value: "libya",
+          code: "LY",
+          states: [
+            {
+              label: "Al Buţnān",
+              value: "al-buţnān:BU",
+            },
+            {
+              label: "Al Jabal al Akhḑar",
+              value: "al-jabal-al-akhḑar:JA",
+            },
+            {
+              label: "Al Jabal al Gharbī",
+              value: "al-jabal-al-gharbī:JG",
+            },
+            {
+              label: "Al Jifārah",
+              value: "al-jifārah:JI",
+            },
+            {
+              label: "Al Jufrah",
+              value: "al-jufrah:JU",
+            },
+            {
+              label: "Al Kufrah",
+              value: "al-kufrah:KF",
+            },
+            {
+              label: "Al Marj",
+              value: "al-marj:MJ",
+            },
+            {
+              label: "Al Marqab",
+              value: "al-marqab:MB",
+            },
+            {
+              label: "Al Wāḩāt",
+              value: "al-wāḩāt:WA",
+            },
+            {
+              label: "An Nuqaţ al Khams",
+              value: "an-nuqaţ-al-khams:NQ",
+            },
+            {
+              label: "Az Zāwiyah",
+              value: "az-zāwiyah:ZA",
+            },
+            {
+              label: "Banghāzī",
+              value: "banghāzī:BA",
+            },
+            {
+              label: "Darnah",
+              value: "darnah:DR",
+            },
+            {
+              label: "Ghāt",
+              value: "ghāt:GT",
+            },
+            {
+              label: "Mişrātah",
+              value: "mişrātah:MI",
+            },
+            {
+              label: "Murzuq",
+              value: "murzuq:MQ",
+            },
+            {
+              label: "Nālūt",
+              value: "nālūt:NL",
+            },
+            {
+              label: "Sabhā",
+              value: "sabhā:SB",
+            },
+            {
+              label: "Surt",
+              value: "surt:SR",
+            },
+            {
+              label: "Wādī al Ḩayāt",
+              value: "wādī-al-ḩayāt:WD",
+            },
+            {
+              label: "Wādī ash Shāţiʾ",
+              value: "wādī-ash-shāţiʾ:WS",
+            },
+            {
+              label: "Ţarābulus",
+              value: "ţarābulus:TB",
+            },
+          ],
+        },
+        {
+          label: "Madagascar",
+          value: "madagascar",
+          code: "MG",
+          states: [
+            {
+              label: "Antananarivo",
+              value: "antananarivo:T",
+            },
+            {
+              label: "Antsiranana",
+              value: "antsiranana:D",
+            },
+            {
+              label: "Fianarantsoa",
+              value: "fianarantsoa:F",
+            },
+            {
+              label: "Mahajanga",
+              value: "mahajanga:M",
+            },
+            {
+              label: "Toamasina",
+              value: "toamasina:A",
+            },
+            {
+              label: "Toliara",
+              value: "toliara:U",
+            },
+          ],
+        },
+        {
+          label: "Malawi",
+          value: "malawi",
+          code: "MW",
+          states: [
+            {
+              label: "Central Region",
+              value: "central-region:C",
+            },
+            {
+              label: "Northern Region",
+              value: "northern-region:N",
+            },
+            {
+              label: "Southern Region",
+              value: "southern-region:S",
+            },
+          ],
+        },
+        {
+          label: "Mali",
+          value: "mali",
+          code: "ML",
+          states: [
+            {
+              label: "Bamako",
+              value: "bamako:BKO",
+            },
+            {
+              label: "Gao",
+              value: "gao:7",
+            },
+            {
+              label: "Kayes",
+              value: "kayes:1",
+            },
+            {
+              label: "Kidal",
+              value: "kidal:8",
+            },
+            {
+              label: "Koulikoro",
+              value: "koulikoro:2",
+            },
+            {
+              label: "Mopti",
+              value: "mopti:5",
+            },
+            {
+              label: "Sikasso",
+              value: "sikasso:3",
+            },
+            {
+              label: "Ségou",
+              value: "ségou:4",
+            },
+            {
+              label: "Tombouctou",
+              value: "tombouctou:6",
+            },
+          ],
+        },
+        {
+          label: "Mauritania",
+          value: "mauritania",
+          code: "MR",
+          states: [
+            {
+              label: "Adrar",
+              value: "adrar:07",
+            },
+            {
+              label: "Assaba",
+              value: "assaba:03",
+            },
+            {
+              label: "Brakna",
+              value: "brakna:05",
+            },
+            {
+              label: "Dakhlet Nouâdhibou",
+              value: "dakhlet-nouâdhibou:08",
+            },
+            {
+              label: "Gorgol",
+              value: "gorgol:04",
+            },
+            {
+              label: "Guidimaka",
+              value: "guidimaka:10",
+            },
+            {
+              label: "Hodh ech Chargui",
+              value: "hodh-ech-chargui:01",
+            },
+            {
+              label: "Hodh el Gharbi",
+              value: "hodh-el-gharbi:02",
+            },
+            {
+              label: "Inchiri",
+              value: "inchiri:12",
+            },
+            {
+              label: "Nouakchott",
+              value: "nouakchott:NKC",
+            },
+            {
+              label: "Tagant",
+              value: "tagant:09",
+            },
+            {
+              label: "Tiris Zemmour",
+              value: "tiris-zemmour:11",
+            },
+            {
+              label: "Trarza",
+              value: "trarza:06",
+            },
+          ],
+        },
+        {
+          label: "Mauritius",
+          value: "mauritius",
+          code: "MU",
+          states: [
+            {
+              label: "Agalega Islands",
+              value: "agalega-islands:AG",
+            },
+            {
+              label: "Beau Bassin-Rose Hill",
+              value: "beau-bassin-rose-hill:BR",
+            },
+            {
+              label: "Black River",
+              value: "black-river:BL",
+            },
+            {
+              label: "Cargados Carajos Shoals",
+              value: "cargados-carajos-shoals:CC",
+            },
+            {
+              label: "Curepipe",
+              value: "curepipe:CU",
+            },
+            {
+              label: "Flacq",
+              value: "flacq:FL",
+            },
+            {
+              label: "Grand Port",
+              value: "grand-port:GP",
+            },
+            {
+              label: "Moka",
+              value: "moka:MO",
+            },
+            {
+              label: "Pamplemousses",
+              value: "pamplemousses:PA",
+            },
+            {
+              label: "Plaines Wilhems",
+              value: "plaines-wilhems:PW",
+            },
+            {
+              label: "Port Louis",
+              value: "port-louis:PL",
+            },
+            {
+              label: "Port Louis",
+              value: "port-louis:PU",
+            },
+            {
+              label: "Quatre Bornes",
+              value: "quatre-bornes:QB",
+            },
+            {
+              label: "Rivière du Rempart",
+              value: "rivière-du-rempart:RR",
+            },
+            {
+              label: "Rodrigues Island",
+              value: "rodrigues-island:RO",
+            },
+            {
+              label: "Savanne",
+              value: "savanne:SA",
+            },
+            {
+              label: "Vacoas-Phoenix",
+              value: "vacoas-phoenix:VP",
+            },
+          ],
+        },
+        {
+          label: "Mayotte",
+          value: "mayotte",
+          code: "YT",
+          states: [],
+        },
+        {
+          label: "Morocco",
+          value: "morocco",
+          code: "MA",
+          states: [
+            {
+              label: "Chaouia-Ouardigha",
+              value: "chaouia-ouardigha:09",
+            },
+            {
+              label: "Doukhala-Abda",
+              value: "doukhala-abda:10",
+            },
+            {
+              label: "Fès-Boulemane",
+              value: "fès-boulemane:05",
+            },
+            {
+              label: "Gharb-Chrarda-Beni Hssen",
+              value: "gharb-chrarda-beni-hssen:02",
+            },
+            {
+              label: "Grand Casablanca",
+              value: "grand-casablanca:08",
+            },
+            {
+              label: "Guelmim-Es Smara",
+              value: "guelmim-es-smara:14",
+            },
+            {
+              label: "L'Oriental",
+              value: "l'oriental:04",
+            },
+            {
+              label: "Laâyoune-Boujdour-Sakia el Hamra",
+              value: "laâyoune-boujdour-sakia-el-hamra:15",
+            },
+            {
+              label: "Marrakech-Tensift-Al Haouz",
+              value: "marrakech-tensift-al-haouz:11",
+            },
+            {
+              label: "Meknès-Tafilalet",
+              value: "meknès-tafilalet:06",
+            },
+            {
+              label: "Oued ed Dahab-Lagouira",
+              value: "oued-ed-dahab-lagouira:16",
+            },
+            {
+              label: "Rabat-Salé-Zemmour-Zaer",
+              value: "rabat-salé-zemmour-zaer:07",
+            },
+            {
+              label: "Souss-Massa-Drâa",
+              value: "souss-massa-drâa:13",
+            },
+            {
+              label: "Tadla-Azilal",
+              value: "tadla-azilal:12",
+            },
+            {
+              label: "Tanger-Tétouan",
+              value: "tanger-tétouan:01",
+            },
+            {
+              label: "Taza-Al Hoceima-Taounate",
+              value: "taza-al-hoceima-taounate:03",
+            },
+          ],
+        },
+        {
+          label: "Mozambique",
+          value: "mozambique",
+          code: "MZ",
+          states: [
+            {
+              label: "Cabo Delgado",
+              value: "cabo-delgado:P",
+            },
+            {
+              label: "Gaza",
+              value: "gaza:G",
+            },
+            {
+              label: "Inhambane",
+              value: "inhambane:I",
+            },
+            {
+              label: "Manica",
+              value: "manica:B",
+            },
+            {
+              label: "Maputo",
+              value: "maputo:MPM",
+            },
+            {
+              label: "Maputo",
+              value: "maputo:L",
+            },
+            {
+              label: "Nampula",
+              value: "nampula:N",
+            },
+            {
+              label: "Niassa",
+              value: "niassa:A",
+            },
+            {
+              label: "Sofala",
+              value: "sofala:S",
+            },
+            {
+              label: "Tete",
+              value: "tete:T",
+            },
+            {
+              label: "Zambézia",
+              value: "zambézia:Q",
+            },
+          ],
+        },
+        {
+          label: "Namibia",
+          value: "namibia",
+          code: "NA",
+          states: [
+            {
+              label: "Erongo",
+              value: "erongo:ER",
+            },
+            {
+              label: "Hardap",
+              value: "hardap:HA",
+            },
+            {
+              label: "Karas",
+              value: "karas:KA",
+            },
+            {
+              label: "Kavango East",
+              value: "kavango-east:KE",
+            },
+            {
+              label: "Kavango West",
+              value: "kavango-west:KW",
+            },
+            {
+              label: "Khomas",
+              value: "khomas:KH",
+            },
+            {
+              label: "Kunene",
+              value: "kunene:KU",
+            },
+            {
+              label: "Ohangwena",
+              value: "ohangwena:OW",
+            },
+            {
+              label: "Omaheke",
+              value: "omaheke:OH",
+            },
+            {
+              label: "Omusati",
+              value: "omusati:OS",
+            },
+            {
+              label: "Oshana",
+              value: "oshana:ON",
+            },
+            {
+              label: "Oshikoto",
+              value: "oshikoto:OT",
+            },
+            {
+              label: "Otjozondjupa",
+              value: "otjozondjupa:OD",
+            },
+            {
+              label: "Zambezi",
+              value: "zambezi:CA",
+            },
+          ],
+        },
+        {
+          label: "Niger",
+          value: "niger",
+          code: "NE",
+          states: [
+            {
+              label: "Agadez",
+              value: "agadez:1",
+            },
+            {
+              label: "Diffa",
+              value: "diffa:2",
+            },
+            {
+              label: "Dosso",
+              value: "dosso:3",
+            },
+            {
+              label: "Maradi",
+              value: "maradi:4",
+            },
+            {
+              label: "Niamey",
+              value: "niamey:8",
+            },
+            {
+              label: "Tahoua",
+              value: "tahoua:5",
+            },
+            {
+              label: "Tillabéri",
+              value: "tillabéri:6",
+            },
+            {
+              label: "Zinder",
+              value: "zinder:7",
+            },
+          ],
+        },
+        {
+          label: "Nigeria",
+          value: "nigeria",
+          code: "NG",
+          states: [
+            {
+              label: "Abia",
+              value: "abia:AB",
+            },
+            {
+              label: "Abuja Federal Capital Territory",
+              value: "abuja-federal-capital-territory:FC",
+            },
+            {
+              label: "Adamawa",
+              value: "adamawa:AD",
+            },
+            {
+              label: "Akwa Ibom",
+              value: "akwa-ibom:AK",
+            },
+            {
+              label: "Anambra",
+              value: "anambra:AN",
+            },
+            {
+              label: "Bauchi",
+              value: "bauchi:BA",
+            },
+            {
+              label: "Bayelsa",
+              value: "bayelsa:BY",
+            },
+            {
+              label: "Benue",
+              value: "benue:BE",
+            },
+            {
+              label: "Borno",
+              value: "borno:BO",
+            },
+            {
+              label: "Cross River",
+              value: "cross-river:CR",
+            },
+            {
+              label: "Delta",
+              value: "delta:DE",
+            },
+            {
+              label: "Ebonyi",
+              value: "ebonyi:EB",
+            },
+            {
+              label: "Edo",
+              value: "edo:ED",
+            },
+            {
+              label: "Ekiti",
+              value: "ekiti:EK",
+            },
+            {
+              label: "Enugu",
+              value: "enugu:EN",
+            },
+            {
+              label: "Gombe",
+              value: "gombe:GO",
+            },
+            {
+              label: "Imo",
+              value: "imo:IM",
+            },
+            {
+              label: "Jigawa",
+              value: "jigawa:JI",
+            },
+            {
+              label: "Kaduna",
+              value: "kaduna:KD",
+            },
+            {
+              label: "Kano",
+              value: "kano:KN",
+            },
+            {
+              label: "Katsina",
+              value: "katsina:KT",
+            },
+            {
+              label: "Kebbi",
+              value: "kebbi:KE",
+            },
+            {
+              label: "Kogi",
+              value: "kogi:KO",
+            },
+            {
+              label: "Kwara",
+              value: "kwara:KW",
+            },
+            {
+              label: "Lagos",
+              value: "lagos:LA",
+            },
+            {
+              label: "Nassarawa",
+              value: "nassarawa:NA",
+            },
+            {
+              label: "Niger",
+              value: "niger:NI",
+            },
+            {
+              label: "Ogun",
+              value: "ogun:OG",
+            },
+            {
+              label: "Ondo",
+              value: "ondo:ON",
+            },
+            {
+              label: "Osun",
+              value: "osun:OS",
+            },
+            {
+              label: "Oyo",
+              value: "oyo:OY",
+            },
+            {
+              label: "Plateau",
+              value: "plateau:PL",
+            },
+            {
+              label: "Rivers",
+              value: "rivers:RI",
+            },
+            {
+              label: "Sokoto",
+              value: "sokoto:SO",
+            },
+            {
+              label: "Taraba",
+              value: "taraba:TA",
+            },
+            {
+              label: "Yobe",
+              value: "yobe:YO",
+            },
+            {
+              label: "Zamfara",
+              value: "zamfara:ZA",
+            },
+          ],
+        },
+        {
+          label: "Réunion",
+          value: "réunion",
+          code: "RE",
+          states: [],
+        },
+        {
+          label: "Rwanda",
+          value: "rwanda",
+          code: "RW",
+          states: [
+            {
+              label: "Est",
+              value: "est:02",
+            },
+            {
+              label: "Nord",
+              value: "nord:03",
+            },
+            {
+              label: "Ouest",
+              value: "ouest:04",
+            },
+            {
+              label: "Sud",
+              value: "sud:05",
+            },
+            {
+              label: "Ville de Kigali",
+              value: "ville-de-kigali:01",
+            },
+          ],
+        },
+        {
+          label: "Saint Helena",
+          value: "saint-helena",
+          code: "SH",
+          states: [
+            {
+              label: "Ascension",
+              value: "ascension:AC",
+            },
+            {
+              label: "Saint Helena",
+              value: "saint-helena:HL",
+            },
+            {
+              label: "Tristan da Cunha",
+              value: "tristan-da-cunha:TA",
+            },
+          ],
+        },
+        {
+          label: "São Tomé and Príncipe",
+          value: "são-tomé-and-príncipe",
+          code: "ST",
+          states: [
+            {
+              label: "Príncipe",
+              value: "príncipe:P",
+            },
+            {
+              label: "São Tomé",
+              value: "são-tomé:S",
+            },
+          ],
+        },
+        {
+          label: "Senegal",
+          value: "senegal",
+          code: "SN",
+          states: [
+            {
+              label: "Dakar",
+              value: "dakar:DK",
+            },
+            {
+              label: "Diourbel",
+              value: "diourbel:DB",
+            },
+            {
+              label: "Fatick",
+              value: "fatick:FK",
+            },
+            {
+              label: "Kaffrine",
+              value: "kaffrine:KA",
+            },
+            {
+              label: "Kaolack",
+              value: "kaolack:KL",
+            },
+            {
+              label: "Kolda",
+              value: "kolda:KD",
+            },
+            {
+              label: "Kédougou",
+              value: "kédougou:KE",
+            },
+            {
+              label: "Louga",
+              value: "louga:LG",
+            },
+            {
+              label: "Matam",
+              value: "matam:MT",
+            },
+            {
+              label: "Saint-Louis",
+              value: "saint-louis:SL",
+            },
+            {
+              label: "Sédhiou",
+              value: "sédhiou:SE",
+            },
+            {
+              label: "Tambacounda",
+              value: "tambacounda:TC",
+            },
+            {
+              label: "Thiès",
+              value: "thiès:TH",
+            },
+            {
+              label: "Ziguinchor",
+              value: "ziguinchor:ZG",
+            },
+          ],
+        },
+        {
+          label: "Seychelles",
+          value: "seychelles",
+          code: "SC",
+          states: [
+            {
+              label: "Anse Boileau",
+              value: "anse-boileau:02",
+            },
+            {
+              label: "Anse Etoile",
+              value: "anse-etoile:03",
+            },
+            {
+              label: "Anse Royale",
+              value: "anse-royale:05",
+            },
+            {
+              label: "Anse aux Pins",
+              value: "anse-aux-pins:01",
+            },
+            {
+              label: "Au Cap",
+              value: "au-cap:04",
+            },
+            {
+              label: "Baie Lazare",
+              value: "baie-lazare:06",
+            },
+            {
+              label: "Baie Sainte Anne",
+              value: "baie-sainte-anne:07",
+            },
+            {
+              label: "Beau Vallon",
+              value: "beau-vallon:08",
+            },
+            {
+              label: "Bel Air",
+              value: "bel-air:09",
+            },
+            {
+              label: "Bel Ombre",
+              value: "bel-ombre:10",
+            },
+            {
+              label: "Cascade",
+              value: "cascade:11",
+            },
+            {
+              label: "English River",
+              value: "english-river:16",
+            },
+            {
+              label: "Glacis",
+              value: "glacis:12",
+            },
+            {
+              label: "Grand Anse Mahe",
+              value: "grand-anse-mahe:13",
+            },
+            {
+              label: "Grand Anse Praslin",
+              value: "grand-anse-praslin:14",
+            },
+            {
+              label: "La Digue",
+              value: "la-digue:15",
+            },
+            {
+              label: "Les Mamelles",
+              value: "les-mamelles:24",
+            },
+            {
+              label: "Mont Buxton",
+              value: "mont-buxton:17",
+            },
+            {
+              label: "Mont Fleuri",
+              value: "mont-fleuri:18",
+            },
+            {
+              label: "Plaisance",
+              value: "plaisance:19",
+            },
+            {
+              label: "Pointe Larue",
+              value: "pointe-larue:20",
+            },
+            {
+              label: "Port Glaud",
+              value: "port-glaud:21",
+            },
+            {
+              label: "Roche Caiman",
+              value: "roche-caiman:25",
+            },
+            {
+              label: "Saint Louis",
+              value: "saint-louis:22",
+            },
+            {
+              label: "Takamaka",
+              value: "takamaka:23",
+            },
+          ],
+        },
+        {
+          label: "Sierra Leone",
+          value: "sierra-leone",
+          code: "SL",
+          states: [
+            {
+              label: "Eastern",
+              value: "eastern:E",
+            },
+            {
+              label: "Northern",
+              value: "northern:N",
+            },
+            {
+              label: "Southern",
+              value: "southern:S",
+            },
+            {
+              label: "Western Area",
+              value: "western-area:W",
+            },
+          ],
+        },
+        {
+          label: "Somalia",
+          value: "somalia",
+          code: "SO",
+          states: [
+            {
+              label: "Awdal",
+              value: "awdal:AW",
+            },
+            {
+              label: "Bakool",
+              value: "bakool:BK",
+            },
+            {
+              label: "Banaadir",
+              value: "banaadir:BN",
+            },
+            {
+              label: "Bari",
+              value: "bari:BR",
+            },
+            {
+              label: "Bay",
+              value: "bay:BY",
+            },
+            {
+              label: "Galguduud",
+              value: "galguduud:GA",
+            },
+            {
+              label: "Gedo",
+              value: "gedo:GE",
+            },
+            {
+              label: "Hiiraan",
+              value: "hiiraan:HI",
+            },
+            {
+              label: "Jubbada Dhexe",
+              value: "jubbada-dhexe:JD",
+            },
+            {
+              label: "Jubbada Hoose",
+              value: "jubbada-hoose:JH",
+            },
+            {
+              label: "Mudug",
+              value: "mudug:MU",
+            },
+            {
+              label: "Nugaal",
+              value: "nugaal:NU",
+            },
+            {
+              label: "Sanaag",
+              value: "sanaag:SA",
+            },
+            {
+              label: "Shabeellaha Dhexe",
+              value: "shabeellaha-dhexe:SD",
+            },
+            {
+              label: "Shabeellaha Hoose",
+              value: "shabeellaha-hoose:SH",
+            },
+            {
+              label: "Sool",
+              value: "sool:SO",
+            },
+            {
+              label: "Togdheer",
+              value: "togdheer:TO",
+            },
+            {
+              label: "Woqooyi Galbeed",
+              value: "woqooyi-galbeed:WO",
+            },
+          ],
+        },
+        {
+          label: "South Africa",
+          value: "south-africa",
+          code: "ZA",
+          states: [
+            {
+              label: "Eastern Cape",
+              value: "eastern-cape:EC",
+            },
+            {
+              label: "Free State",
+              value: "free-state:FS",
+            },
+            {
+              label: "Gauteng",
+              value: "gauteng:GT",
+            },
+            {
+              label: "KwaZulu-Natal",
+              value: "kwazulu-natal:NL",
+            },
+            {
+              label: "Limpopo",
+              value: "limpopo:LP",
+            },
+            {
+              label: "Mpumalanga",
+              value: "mpumalanga:MP",
+            },
+            {
+              label: "North West",
+              value: "north-west:NW",
+            },
+            {
+              label: "Northern Cape",
+              value: "northern-cape:NC",
+            },
+            {
+              label: "Western Cape",
+              value: "western-cape:WC",
+            },
+          ],
+        },
+        {
+          label: "South Sudan",
+          value: "south-sudan",
+          code: "SS",
+          states: [
+            {
+              label: "Central Equatoria",
+              value: "central-equatoria:EC",
+            },
+            {
+              label: "Eastern Equatoria",
+              value: "eastern-equatoria:EE",
+            },
+            {
+              label: "Jonglei",
+              value: "jonglei:JG",
+            },
+            {
+              label: "Lakes",
+              value: "lakes:LK",
+            },
+            {
+              label: "Northern Bahr el Ghazal",
+              value: "northern-bahr-el-ghazal:BN",
+            },
+            {
+              label: "Unity",
+              value: "unity:UY",
+            },
+            {
+              label: "Upper Nile",
+              value: "upper-nile:NU",
+            },
+            {
+              label: "Warrap",
+              value: "warrap:WR",
+            },
+            {
+              label: "Western Bahr el Ghazal",
+              value: "western-bahr-el-ghazal:BW",
+            },
+            {
+              label: "Western Equatoria",
+              value: "western-equatoria:EW",
+            },
+          ],
+        },
+        {
+          label: "Sudan",
+          value: "sudan",
+          code: "SD",
+          states: [
+            {
+              label: "Al Baḩr al Aḩmar",
+              value: "al-baḩr-al-aḩmar:RS",
+            },
+            {
+              label: "Al Jazīrah",
+              value: "al-jazīrah:GZ",
+            },
+            {
+              label: "Al Kharţūm",
+              value: "al-kharţūm:KH",
+            },
+            {
+              label: "Al Qaḑārif",
+              value: "al-qaḑārif:GD",
+            },
+            {
+              label: "An Nīl",
+              value: "an-nīl:NR",
+            },
+            {
+              label: "An Nīl al Abyaḑ",
+              value: "an-nīl-al-abyaḑ:NW",
+            },
+            {
+              label: "An Nīl al Azraq",
+              value: "an-nīl-al-azraq:NB",
+            },
+            {
+              label: "Ash Shamālīyah",
+              value: "ash-shamālīyah:NO",
+            },
+            {
+              label: "Gharb Dārfūr",
+              value: "gharb-dārfūr:DW",
+            },
+            {
+              label: "Janūb Dārfūr",
+              value: "janūb-dārfūr:DS",
+            },
+            {
+              label: "Janūb Kurdufān",
+              value: "janūb-kurdufān:KS",
+            },
+            {
+              label: "Kassalā",
+              value: "kassalā:KA",
+            },
+            {
+              label: "Shamāl Dārfūr",
+              value: "shamāl-dārfūr:DN",
+            },
+            {
+              label: "Shamāl Kurdufān",
+              value: "shamāl-kurdufān:KN",
+            },
+            {
+              label: "Sharq Dārfūr",
+              value: "sharq-dārfūr:DE",
+            },
+            {
+              label: "Sinnār",
+              value: "sinnār:SI",
+            },
+            {
+              label: "Zalingei",
+              value: "zalingei:DC",
+            },
+          ],
+        },
+        {
+          label: "Swaziland",
+          value: "swaziland",
+          code: "SZ",
+          states: [
+            {
+              label: "Hhohho",
+              value: "hhohho:HH",
+            },
+            {
+              label: "Lubombo",
+              value: "lubombo:LU",
+            },
+            {
+              label: "Manzini",
+              value: "manzini:MA",
+            },
+            {
+              label: "Shiselweni",
+              value: "shiselweni:SH",
+            },
+          ],
+        },
+        {
+          label: "Tanzania",
+          value: "tanzania",
+          code: "TZ",
+          states: [
+            {
+              label: "Arusha",
+              value: "arusha:01",
+            },
+            {
+              label: "Dar es Salaam",
+              value: "dar-es-salaam:02",
+            },
+            {
+              label: "Dodoma",
+              value: "dodoma:03",
+            },
+            {
+              label: "Iringa",
+              value: "iringa:04",
+            },
+            {
+              label: "Kagera",
+              value: "kagera:05",
+            },
+            {
+              label: "Kaskazini Pemba",
+              value: "kaskazini-pemba:06",
+            },
+            {
+              label: "Kaskazini Unguja",
+              value: "kaskazini-unguja:07",
+            },
+            {
+              label: "Kigoma",
+              value: "kigoma:08",
+            },
+            {
+              label: "Kilimanjaro",
+              value: "kilimanjaro:09",
+            },
+            {
+              label: "Kusini Pemba",
+              value: "kusini-pemba:10",
+            },
+            {
+              label: "Kusini Unguja",
+              value: "kusini-unguja:11",
+            },
+            {
+              label: "Lindi",
+              value: "lindi:12",
+            },
+            {
+              label: "Manyara",
+              value: "manyara:26",
+            },
+            {
+              label: "Mara",
+              value: "mara:13",
+            },
+            {
+              label: "Mbeya",
+              value: "mbeya:14",
+            },
+            {
+              label: "Mjini Magharibi",
+              value: "mjini-magharibi:15",
+            },
+            {
+              label: "Morogoro",
+              value: "morogoro:16",
+            },
+            {
+              label: "Mtwara",
+              value: "mtwara:17",
+            },
+            {
+              label: "Mwanza",
+              value: "mwanza:18",
+            },
+            {
+              label: "Pwani",
+              value: "pwani:19",
+            },
+            {
+              label: "Rukwa",
+              value: "rukwa:20",
+            },
+            {
+              label: "Ruvuma",
+              value: "ruvuma:21",
+            },
+            {
+              label: "Shinyanga",
+              value: "shinyanga:22",
+            },
+            {
+              label: "Singida",
+              value: "singida:23",
+            },
+            {
+              label: "Tabora",
+              value: "tabora:24",
+            },
+            {
+              label: "Tanga",
+              value: "tanga:25",
+            },
+          ],
+        },
+        {
+          label: "Togo",
+          value: "togo",
+          code: "TG",
+          states: [
+            {
+              label: "Centre",
+              value: "centre:C",
+            },
+            {
+              label: "Kara",
+              value: "kara:K",
+            },
+            {
+              label: "Maritime",
+              value: "maritime:M",
+            },
+            {
+              label: "Plateaux",
+              value: "plateaux:P",
+            },
+            {
+              label: "Savannes",
+              value: "savannes:S",
+            },
+          ],
+        },
+        {
+          label: "Tunisia",
+          value: "tunisia",
+          code: "TN",
+          states: [
+            {
+              label: "Ariana",
+              value: "ariana:12",
+            },
+            {
+              label: "Ben Arous",
+              value: "ben-arous:13",
+            },
+            {
+              label: "Bizerte",
+              value: "bizerte:23",
+            },
+            {
+              label: "Béja",
+              value: "béja:31",
+            },
+            {
+              label: "Gabès",
+              value: "gabès:81",
+            },
+            {
+              label: "Gafsa",
+              value: "gafsa:71",
+            },
+            {
+              label: "Jendouba",
+              value: "jendouba:32",
+            },
+            {
+              label: "Kairouan",
+              value: "kairouan:41",
+            },
+            {
+              label: "Kasserine",
+              value: "kasserine:42",
+            },
+            {
+              label: "Kebili",
+              value: "kebili:73",
+            },
+            {
+              label: "La Manouba",
+              value: "la-manouba:14",
+            },
+            {
+              label: "Le Kef",
+              value: "le-kef:33",
+            },
+            {
+              label: "Mahdia",
+              value: "mahdia:53",
+            },
+            {
+              label: "Medenine",
+              value: "medenine:82",
+            },
+            {
+              label: "Monastir",
+              value: "monastir:52",
+            },
+            {
+              label: "Nabeul",
+              value: "nabeul:21",
+            },
+            {
+              label: "Sfax",
+              value: "sfax:61",
+            },
+            {
+              label: "Sidi Bouzid",
+              value: "sidi-bouzid:43",
+            },
+            {
+              label: "Siliana",
+              value: "siliana:34",
+            },
+            {
+              label: "Sousse",
+              value: "sousse:51",
+            },
+            {
+              label: "Tataouine",
+              value: "tataouine:83",
+            },
+            {
+              label: "Tozeur",
+              value: "tozeur:72",
+            },
+            {
+              label: "Tunis",
+              value: "tunis:11",
+            },
+            {
+              label: "Zaghouan",
+              value: "zaghouan:22",
+            },
+          ],
+        },
+        {
+          label: "Uganda",
+          value: "uganda",
+          code: "UG",
+          states: [
+            {
+              label: "Central",
+              value: "central:C",
+            },
+            {
+              label: "Eastern",
+              value: "eastern:E",
+            },
+            {
+              label: "Northern",
+              value: "northern:N",
+            },
+            {
+              label: "Western",
+              value: "western:W",
+            },
+          ],
+        },
+        {
+          label: "Western Sahara",
+          value: "western-sahara",
+          code: "EH",
+          states: [],
+        },
+        {
+          label: "Zambia",
+          value: "zambia",
+          code: "ZM",
+          states: [
+            {
+              label: "Central",
+              value: "central:02",
+            },
+            {
+              label: "Copperbelt",
+              value: "copperbelt:08",
+            },
+            {
+              label: "Eastern",
+              value: "eastern:03",
+            },
+            {
+              label: "Luapula",
+              value: "luapula:04",
+            },
+            {
+              label: "Lusaka",
+              value: "lusaka:09",
+            },
+            {
+              label: "North-Western",
+              value: "north-western:06",
+            },
+            {
+              label: "Northern",
+              value: "northern:05",
+            },
+            {
+              label: "Southern",
+              value: "southern:07",
+            },
+            {
+              label: "Western",
+              value: "western:01",
+            },
+          ],
+        },
+        {
+          label: "Zimbabwe",
+          value: "zimbabwe",
+          code: "ZW",
+          states: [
+            {
+              label: "Bulawayo",
+              value: "bulawayo:BU",
+            },
+            {
+              label: "Harare",
+              value: "harare:HA",
+            },
+            {
+              label: "Manicaland",
+              value: "manicaland:MA",
+            },
+            {
+              label: "Mashonaland Central",
+              value: "mashonaland-central:MC",
+            },
+            {
+              label: "Mashonaland East",
+              value: "mashonaland-east:ME",
+            },
+            {
+              label: "Mashonaland West",
+              value: "mashonaland-west:MW",
+            },
+            {
+              label: "Masvingo",
+              value: "masvingo:MV",
+            },
+            {
+              label: "Matabeleland North",
+              value: "matabeleland-north:MN",
+            },
+            {
+              label: "Matabeleland South",
+              value: "matabeleland-south:MS",
+            },
+            {
+              label: "Midlands",
+              value: "midlands:MI",
+            },
+          ],
+        },
+      ],
+    },
+    {
+      label: "Antarctica",
+      value: "antarctica",
+      disabled: true,
+    },
+    {
+      label: "Asia",
+      value: "asia",
+      countries: [
+        {
+          label: "Afghanistan",
+          value: "afghanistan",
+          code: "AF",
+          states: [
+            {
+              label: "Badakhshān",
+              value: "badakhshān:BDS",
+            },
+            {
+              label: "Baghlān",
+              value: "baghlān:BGL",
+            },
+            {
+              label: "Balkh",
+              value: "balkh:BAL",
+            },
+            {
+              label: "Bādghīs",
+              value: "bādghīs:BDG",
+            },
+            {
+              label: "Bāmyān",
+              value: "bāmyān:BAM",
+            },
+            {
+              label: "Dāykundī",
+              value: "dāykundī:DAY",
+            },
+            {
+              label: "Farāh",
+              value: "farāh:FRA",
+            },
+            {
+              label: "Fāryāb",
+              value: "fāryāb:FYB",
+            },
+            {
+              label: "Ghaznī",
+              value: "ghaznī:GHA",
+            },
+            {
+              label: "Ghōr",
+              value: "ghōr:GHO",
+            },
+            {
+              label: "Helmand",
+              value: "helmand:HEL",
+            },
+            {
+              label: "Herāt",
+              value: "herāt:HER",
+            },
+            {
+              label: "Jowzjān",
+              value: "jowzjān:JOW",
+            },
+            {
+              label: "Kandahār",
+              value: "kandahār:KAN",
+            },
+            {
+              label: "Khōst",
+              value: "khōst:KHO",
+            },
+            {
+              label: "Kunar",
+              value: "kunar:KNR",
+            },
+            {
+              label: "Kunduz",
+              value: "kunduz:KDZ",
+            },
+            {
+              label: "Kābul",
+              value: "kābul:KAB",
+            },
+            {
+              label: "Kāpīsā",
+              value: "kāpīsā:KAP",
+            },
+            {
+              label: "Laghmān",
+              value: "laghmān:LAG",
+            },
+            {
+              label: "Lōgar",
+              value: "lōgar:LOG",
+            },
+            {
+              label: "Nangarhār",
+              value: "nangarhār:NAN",
+            },
+            {
+              label: "Nīmrōz",
+              value: "nīmrōz:NIM",
+            },
+            {
+              label: "Nūristān",
+              value: "nūristān:NUR",
+            },
+            {
+              label: "Paktiyā",
+              value: "paktiyā:PIA",
+            },
+            {
+              label: "Paktīkā",
+              value: "paktīkā:PKA",
+            },
+            {
+              label: "Panjshayr",
+              value: "panjshayr:PAN",
+            },
+            {
+              label: "Parwān",
+              value: "parwān:PAR",
+            },
+            {
+              label: "Samangān",
+              value: "samangān:SAM",
+            },
+            {
+              label: "Sar-e Pul",
+              value: "sar-e-pul:SAR",
+            },
+            {
+              label: "Takhār",
+              value: "takhār:TAK",
+            },
+            {
+              label: "Uruzgān",
+              value: "uruzgān:URU",
+            },
+            {
+              label: "Wardak",
+              value: "wardak:WAR",
+            },
+            {
+              label: "Zābul",
+              value: "zābul:ZAB",
+            },
+          ],
+        },
+        {
+          label: "Armenia",
+          value: "armenia",
+          code: "AM",
+          states: [
+            {
+              label: "Aragac̣otn",
+              value: "aragac̣otn:AG",
+            },
+            {
+              label: "Ararat",
+              value: "ararat:AR",
+            },
+            {
+              label: "Armavir",
+              value: "armavir:AV",
+            },
+            {
+              label: "Erevan",
+              value: "erevan:ER",
+            },
+            {
+              label: "Geġark'unik'",
+              value: "geġark'unik':GR",
+            },
+            {
+              label: "Kotayk'",
+              value: "kotayk':KT",
+            },
+            {
+              label: "Loṙi",
+              value: "loṙi:LO",
+            },
+            {
+              label: "Syunik'",
+              value: "syunik':SU",
+            },
+            {
+              label: "Tavuš",
+              value: "tavuš:TV",
+            },
+            {
+              label: "Vayoć Jor",
+              value: "vayoć-jor:VD",
+            },
+            {
+              label: "Širak",
+              value: "širak:SH",
+            },
+          ],
+        },
+        {
+          label: "Azerbaijan",
+          value: "azerbaijan",
+          code: "AZ",
+          states: [
+            {
+              label: "Naxçıvan",
+              value: "naxçıvan:NX",
+            },
+          ],
+        },
+        {
+          label: "Bahrain",
+          value: "bahrain",
+          code: "BH",
+          states: [
+            {
+              label: "Al Janūbīyah",
+              value: "al-janūbīyah:14",
+            },
+            {
+              label: "Al Manāmah",
+              value: "al-manāmah:13",
+            },
+            {
+              label: "Al Muḩarraq",
+              value: "al-muḩarraq:15",
+            },
+            {
+              label: "Al Wusţá",
+              value: "al-wusţá:16",
+            },
+            {
+              label: "Ash Shamālīyah",
+              value: "ash-shamālīyah:17",
+            },
+          ],
+        },
+        {
+          label: "Bangladesh",
+          value: "bangladesh",
+          code: "BD",
+          states: [
+            {
+              label: "Barisal",
+              value: "barisal:A",
+            },
+            {
+              label: "Chittagong",
+              value: "chittagong:B",
+            },
+            {
+              label: "Dhaka",
+              value: "dhaka:C",
+            },
+            {
+              label: "Khulna",
+              value: "khulna:D",
+            },
+            {
+              label: "Rajshahi",
+              value: "rajshahi:E",
+            },
+            {
+              label: "Rangpur",
+              value: "rangpur:F",
+            },
+            {
+              label: "Sylhet",
+              value: "sylhet:G",
+            },
+          ],
+        },
+        {
+          label: "Bhutan",
+          value: "bhutan",
+          code: "BT",
+          states: [
+            {
+              label: "Bumthang",
+              value: "bumthang:33",
+            },
+            {
+              label: "Chhukha",
+              value: "chhukha:12",
+            },
+            {
+              label: "Dagana",
+              value: "dagana:22",
+            },
+            {
+              label: "Gasa",
+              value: "gasa:GA",
+            },
+            {
+              label: "Ha",
+              value: "ha:13",
+            },
+            {
+              label: "Lhuentse",
+              value: "lhuentse:44",
+            },
+            {
+              label: "Monggar",
+              value: "monggar:42",
+            },
+            {
+              label: "Paro",
+              value: "paro:11",
+            },
+            {
+              label: "Pemagatshel",
+              value: "pemagatshel:43",
+            },
+            {
+              label: "Punakha",
+              value: "punakha:23",
+            },
+            {
+              label: "Samdrup Jongkha",
+              value: "samdrup-jongkha:45",
+            },
+            {
+              label: "Samtse",
+              value: "samtse:14",
+            },
+            {
+              label: "Sarpang",
+              value: "sarpang:31",
+            },
+            {
+              label: "Thimphu",
+              value: "thimphu:15",
+            },
+            {
+              label: "Trashi Yangtse",
+              value: "trashi-yangtse:TY",
+            },
+            {
+              label: "Trashigang",
+              value: "trashigang:41",
+            },
+            {
+              label: "Trongsa",
+              value: "trongsa:32",
+            },
+            {
+              label: "Tsirang",
+              value: "tsirang:21",
+            },
+            {
+              label: "Wangdue Phodrang",
+              value: "wangdue-phodrang:24",
+            },
+            {
+              label: "Zhemgang",
+              value: "zhemgang:34",
+            },
+          ],
+        },
+        {
+          label: "Brunei",
+          value: "brunei",
+          code: "BN",
+          states: [
+            {
+              label: "Belait",
+              value: "belait:BE",
+            },
+            {
+              label: "Brunei-Muara",
+              value: "brunei-muara:BM",
+            },
+            {
+              label: "Temburong",
+              value: "temburong:TE",
+            },
+            {
+              label: "Tutong",
+              value: "tutong:TU",
+            },
+          ],
+        },
+        {
+          label: "Cambodia",
+          value: "cambodia",
+          code: "KH",
+          states: [
+            {
+              label: "Baat Dambang",
+              value: "baat-dambang:2",
+            },
+            {
+              label: "Banteay Mean Chey",
+              value: "banteay-mean-chey:1",
+            },
+            {
+              label: "Kampong Chaam",
+              value: "kampong-chaam:3",
+            },
+            {
+              label: "Kampong Chhnang",
+              value: "kampong-chhnang:4",
+            },
+            {
+              label: "Kampong Spueu",
+              value: "kampong-spueu:5",
+            },
+            {
+              label: "Kampong Thum",
+              value: "kampong-thum:6",
+            },
+            {
+              label: "Kampot",
+              value: "kampot:7",
+            },
+            {
+              label: "Kandaal",
+              value: "kandaal:8",
+            },
+            {
+              label: "Kaoh Kong",
+              value: "kaoh-kong:9",
+            },
+            {
+              label: "Kracheh",
+              value: "kracheh:10",
+            },
+            {
+              label: "Krong Kaeb",
+              value: "krong-kaeb:23",
+            },
+            {
+              label: "Krong Pailin",
+              value: "krong-pailin:24",
+            },
+            {
+              label: "Krong Preah Sihanouk",
+              value: "krong-preah-sihanouk:18",
+            },
+            {
+              label: "Mondol Kiri",
+              value: "mondol-kiri:11",
+            },
+            {
+              label: "Otdar Mean Chey",
+              value: "otdar-mean-chey:22",
+            },
+            {
+              label: "Phnom Penh",
+              value: "phnom-penh:12",
+            },
+            {
+              label: "Pousaat",
+              value: "pousaat:15",
+            },
+            {
+              label: "Preah Vihear",
+              value: "preah-vihear:13",
+            },
+            {
+              label: "Prey Veaeng",
+              value: "prey-veaeng:14",
+            },
+            {
+              label: "Rotanak Kiri",
+              value: "rotanak-kiri:16",
+            },
+            {
+              label: "Siem Reab",
+              value: "siem-reab:17",
+            },
+            {
+              label: "Stueng Traeng",
+              value: "stueng-traeng:19",
+            },
+            {
+              label: "Svaay Rieng",
+              value: "svaay-rieng:20",
+            },
+            {
+              label: "Taakaev",
+              value: "taakaev:21",
+            },
+          ],
+        },
+        {
+          label: "China",
+          value: "china",
+          code: "CN",
+          states: [
+            {
+              label: "Guangxi",
+              value: "guangxi:45",
+            },
+            {
+              label: "Nei Mongol",
+              value: "nei-mongol:15",
+            },
+            {
+              label: "Ningxia",
+              value: "ningxia:64",
+            },
+            {
+              label: "Xinjiang",
+              value: "xinjiang:65",
+            },
+            {
+              label: "Xizang",
+              value: "xizang:54",
+            },
+            {
+              label: "Beijing",
+              value: "beijing:11",
+            },
+            {
+              label: "Chongqing",
+              value: "chongqing:50",
+            },
+            {
+              label: "Shanghai",
+              value: "shanghai:31",
+            },
+            {
+              label: "Tianjin",
+              value: "tianjin:12",
+            },
+            {
+              label: "Anhui",
+              value: "anhui:34",
+            },
+            {
+              label: "Fujian",
+              value: "fujian:35",
+            },
+            {
+              label: "Gansu",
+              value: "gansu:62",
+            },
+            {
+              label: "Guangdong",
+              value: "guangdong:44",
+            },
+            {
+              label: "Guizhou",
+              value: "guizhou:52",
+            },
+            {
+              label: "Hainan",
+              value: "hainan:46",
+            },
+            {
+              label: "Hebei",
+              value: "hebei:13",
+            },
+            {
+              label: "Heilongjiang",
+              value: "heilongjiang:23",
+            },
+            {
+              label: "Henan",
+              value: "henan:41",
+            },
+            {
+              label: "Hubei",
+              value: "hubei:42",
+            },
+            {
+              label: "Hunan",
+              value: "hunan:43",
+            },
+            {
+              label: "Jiangsu",
+              value: "jiangsu:32",
+            },
+            {
+              label: "Jiangxi",
+              value: "jiangxi:36",
+            },
+            {
+              label: "Jilin",
+              value: "jilin:22",
+            },
+            {
+              label: "Liaoning",
+              value: "liaoning:21",
+            },
+            {
+              label: "Qinghai",
+              value: "qinghai:63",
+            },
+            {
+              label: "Shaanxi",
+              value: "shaanxi:61",
+            },
+            {
+              label: "Shandong",
+              value: "shandong:37",
+            },
+            {
+              label: "Shanxi",
+              value: "shanxi:14",
+            },
+            {
+              label: "Sichuan",
+              value: "sichuan:51",
+            },
+            {
+              label: "Taiwan",
+              value: "taiwan:71",
+            },
+            {
+              label: "Yunnan",
+              value: "yunnan:53",
+            },
+            {
+              label: "Zhejiang",
+              value: "zhejiang:33",
+            },
+            {
+              label: "Hong Kong",
+              value: "hong-kong:91",
+            },
+            {
+              label: "Macao",
+              value: "macao:92",
+            },
+            {
+              label: "Hong Kong Island",
+              value: "hong-kong-island:",
+            },
+            {
+              label: "Kowloon",
+              value: "kowloon:KOWLOON",
+            },
+            {
+              label: "New Territories",
+              value: "new-territories:NEW TERRITORIES",
+            },
+          ],
+        },
+        {
+          label: "Georgia",
+          value: "georgia",
+          code: "GE",
+          states: [
+            {
+              label: "Abkhazia",
+              value: "abkhazia:AB",
+            },
+            {
+              label: "Ajaria",
+              value: "ajaria:AJ",
+            },
+            {
+              label: "Guria",
+              value: "guria:GU",
+            },
+            {
+              label: "Imereti",
+              value: "imereti:IM",
+            },
+            {
+              label: "K'akheti",
+              value: "k'akheti:KA",
+            },
+            {
+              label: "Kvemo Kartli",
+              value: "kvemo-kartli:KK",
+            },
+            {
+              label: "Mtskheta-Mtianeti",
+              value: "mtskheta-mtianeti:MM",
+            },
+            {
+              label: "Rach'a-Lechkhumi-Kvemo Svaneti",
+              value: "rach'a-lechkhumi-kvemo-svaneti:RL",
+            },
+            {
+              label: "Samegrelo-Zemo Svaneti",
+              value: "samegrelo-zemo-svaneti:SZ",
+            },
+            {
+              label: "Samtskhe-Javakheti",
+              value: "samtskhe-javakheti:SJ",
+            },
+            {
+              label: "Shida Kartli",
+              value: "shida-kartli:SK",
+            },
+            {
+              label: "Tbilisi",
+              value: "tbilisi:TB",
+            },
+          ],
+        },
+        {
+          label: "Hong Kong",
+          value: "hong-kong",
+          code: "HK",
+          states: [],
+        },
+        {
+          label: "India",
+          value: "india",
+          code: "IN",
+          states: [
+            {
+              label: "Andaman and Nicobar Islands",
+              value: "andaman-and-nicobar-islands:AN",
+            },
+            {
+              label: "Chandigarh",
+              value: "chandigarh:CH",
+            },
+            {
+              label: "Dadra and Nagar Haveli",
+              value: "dadra-and-nagar-haveli:DN",
+            },
+            {
+              label: "Daman and Diu",
+              value: "daman-and-diu:DD",
+            },
+            {
+              label: "Delhi",
+              value: "delhi:DL",
+            },
+            {
+              label: "Lakshadweep",
+              value: "lakshadweep:LD",
+            },
+            {
+              label: "Puducherry",
+              value: "puducherry:PY",
+            },
+            {
+              label: "Andhra Pradesh",
+              value: "andhra-pradesh:AP",
+            },
+            {
+              label: "Arunachal Pradesh",
+              value: "arunachal-pradesh:AR",
+            },
+            {
+              label: "Assam",
+              value: "assam:AS",
+            },
+            {
+              label: "Bihar",
+              value: "bihar:BR",
+            },
+            {
+              label: "Chhattisgarh",
+              value: "chhattisgarh:CT",
+            },
+            {
+              label: "Goa",
+              value: "goa:GA",
+            },
+            {
+              label: "Gujarat",
+              value: "gujarat:GJ",
+            },
+            {
+              label: "Haryana",
+              value: "haryana:HR",
+            },
+            {
+              label: "Himachal Pradesh",
+              value: "himachal-pradesh:HP",
+            },
+            {
+              label: "Jammu and Kashmir",
+              value: "jammu-and-kashmir:JK",
+            },
+            {
+              label: "Jharkhand",
+              value: "jharkhand:JH",
+            },
+            {
+              label: "Karnataka",
+              value: "karnataka:KA",
+            },
+            {
+              label: "Kerala",
+              value: "kerala:KL",
+            },
+            {
+              label: "Madhya Pradesh",
+              value: "madhya-pradesh:MP",
+            },
+            {
+              label: "Maharashtra",
+              value: "maharashtra:MH",
+            },
+            {
+              label: "Manipur",
+              value: "manipur:MN",
+            },
+            {
+              label: "Meghalaya",
+              value: "meghalaya:ML",
+            },
+            {
+              label: "Mizoram",
+              value: "mizoram:MZ",
+            },
+            {
+              label: "Nagaland",
+              value: "nagaland:NL",
+            },
+            {
+              label: "Odisha",
+              value: "odisha:OR",
+            },
+            {
+              label: "Punjab",
+              value: "punjab:PB",
+            },
+            {
+              label: "Rajasthan",
+              value: "rajasthan:RJ",
+            },
+            {
+              label: "Sikkim",
+              value: "sikkim:SK",
+            },
+            {
+              label: "Tamil Nadu",
+              value: "tamil-nadu:TN",
+            },
+            {
+              label: "Telangana",
+              value: "telangana:TG",
+            },
+            {
+              label: "Tripura",
+              value: "tripura:TR",
+            },
+            {
+              label: "Uttar Pradesh",
+              value: "uttar-pradesh:UP",
+            },
+            {
+              label: "Uttarakhand",
+              value: "uttarakhand:UT",
+            },
+            {
+              label: "West Bengal",
+              value: "west-bengal:WB",
+            },
+          ],
+        },
+        {
+          label: "Indonesia",
+          value: "indonesia",
+          code: "ID",
+          states: [
+            {
+              label: "Jawa",
+              value: "jawa:JW",
+            },
+            {
+              label: "Kalimantan",
+              value: "kalimantan:KA",
+            },
+            {
+              label: "Maluku",
+              value: "maluku:ML",
+            },
+            {
+              label: "Nusa Tenggara",
+              value: "nusa-tenggara:NU",
+            },
+            {
+              label: "Papua",
+              value: "papua:PP",
+            },
+            {
+              label: "Sulawesi",
+              value: "sulawesi:SL",
+            },
+            {
+              label: "Sumatera",
+              value: "sumatera:SM",
+            },
+          ],
+        },
+        {
+          label: "Iran",
+          value: "iran",
+          code: "IR",
+          states: [
+            {
+              label: "Alborz",
+              value: "alborz:32",
+            },
+            {
+              label: "Ardabīl",
+              value: "ardabīl:03",
+            },
+            {
+              label: "Būshehr",
+              value: "būshehr:06",
+            },
+            {
+              label: "Chahār Maḩāll va Bakhtīārī",
+              value: "chahār-maḩāll-va-bakhtīārī:08",
+            },
+            {
+              label: "Eşfahān",
+              value: "eşfahān:04",
+            },
+            {
+              label: "Fārs",
+              value: "fārs:14",
+            },
+            {
+              label: "Golestān",
+              value: "golestān:27",
+            },
+            {
+              label: "Gīlān",
+              value: "gīlān:19",
+            },
+            {
+              label: "Hamadān",
+              value: "hamadān:24",
+            },
+            {
+              label: "Hormozgān",
+              value: "hormozgān:23",
+            },
+            {
+              label: "Kermān",
+              value: "kermān:15",
+            },
+            {
+              label: "Kermānshāh",
+              value: "kermānshāh:17",
+            },
+            {
+              label: "Khorāsān-e Janūbī",
+              value: "khorāsān-e-janūbī:29",
+            },
+            {
+              label: "Khorāsān-e Razavī",
+              value: "khorāsān-e-razavī:30",
+            },
+            {
+              label: "Khorāsān-e Shemālī",
+              value: "khorāsān-e-shemālī:31",
+            },
+            {
+              label: "Khūzestān",
+              value: "khūzestān:10",
+            },
+            {
+              label: "Kohgīlūyeh va Būyer Aḩmad",
+              value: "kohgīlūyeh-va-būyer-aḩmad:18",
+            },
+            {
+              label: "Kordestān",
+              value: "kordestān:16",
+            },
+            {
+              label: "Lorestān",
+              value: "lorestān:20",
+            },
+            {
+              label: "Markazī",
+              value: "markazī:22",
+            },
+            {
+              label: "Māzandarān",
+              value: "māzandarān:21",
+            },
+            {
+              label: "Qazvīn",
+              value: "qazvīn:28",
+            },
+            {
+              label: "Qom",
+              value: "qom:26",
+            },
+            {
+              label: "Semnān",
+              value: "semnān:12",
+            },
+            {
+              label: "Sīstān va Balūchestān",
+              value: "sīstān-va-balūchestān:13",
+            },
+            {
+              label: "Tehrān",
+              value: "tehrān:07",
+            },
+            {
+              label: "Yazd",
+              value: "yazd:25",
+            },
+            {
+              label: "Zanjān",
+              value: "zanjān:11",
+            },
+            {
+              label: "Āz̄arbāyjān-e Gharbī",
+              value: "āz̄arbāyjān-e-gharbī:02",
+            },
+            {
+              label: "Āz̄arbāyjān-e Sharqī",
+              value: "āz̄arbāyjān-e-sharqī:01",
+            },
+            {
+              label: "Īlām",
+              value: "īlām:05",
+            },
+          ],
+        },
+        {
+          label: "Iraq",
+          value: "iraq",
+          code: "IQ",
+          states: [
+            {
+              label: "Al Anbār",
+              value: "al-anbār:AN",
+            },
+            {
+              label: "Al Başrah",
+              value: "al-başrah:BA",
+            },
+            {
+              label: "Al Muthanná",
+              value: "al-muthanná:MU",
+            },
+            {
+              label: "Al Qādisīyah",
+              value: "al-qādisīyah:QA",
+            },
+            {
+              label: "An Najaf",
+              value: "an-najaf:NA",
+            },
+            {
+              label: "Arbīl",
+              value: "arbīl:AR",
+            },
+            {
+              label: "As Sulaymānīyah",
+              value: "as-sulaymānīyah:SU",
+            },
+            {
+              label: "At Ta'mīm",
+              value: "at-ta'mīm:TS",
+            },
+            {
+              label: "Baghdād",
+              value: "baghdād:BG",
+            },
+            {
+              label: "Bābil",
+              value: "bābil:BB",
+            },
+            {
+              label: "Dahūk",
+              value: "dahūk:DA",
+            },
+            {
+              label: "Dhī Qār",
+              value: "dhī-qār:DQ",
+            },
+            {
+              label: "Diyālá",
+              value: "diyālá:DI",
+            },
+            {
+              label: "Karbalā'",
+              value: "karbalā':KA",
+            },
+            {
+              label: "Maysān",
+              value: "maysān:MA",
+            },
+            {
+              label: "Nīnawá",
+              value: "nīnawá:NI",
+            },
+            {
+              label: "Wāsiţ",
+              value: "wāsiţ:WA",
+            },
+            {
+              label: "Şalāḩ ad Dīn",
+              value: "şalāḩ-ad-dīn:SD",
+            },
+          ],
+        },
+        {
+          label: "Israel",
+          value: "israel",
+          code: "IL",
+          states: [
+            {
+              label: "HaDarom",
+              value: "hadarom:D",
+            },
+            {
+              label: "HaMerkaz",
+              value: "hamerkaz:M",
+            },
+            {
+              label: "HaTsafon",
+              value: "hatsafon:Z",
+            },
+            {
+              label: "H̱efa",
+              value: "ẖefa:HA",
+            },
+            {
+              label: "Tel-Aviv",
+              value: "tel-aviv:TA",
+            },
+            {
+              label: "Yerushalayim",
+              value: "yerushalayim:JM",
+            },
+          ],
+        },
+        {
+          label: "Japan",
+          value: "japan",
+          code: "JP",
+          states: [
+            {
+              label: "Aiti",
+              value: "aiti:23",
+            },
+            {
+              label: "Akita",
+              value: "akita:05",
+            },
+            {
+              label: "Aomori",
+              value: "aomori:02",
+            },
+            {
+              label: "Ehime",
+              value: "ehime:38",
+            },
+            {
+              label: "Gihu",
+              value: "gihu:21",
+            },
+            {
+              label: "Gunma",
+              value: "gunma:10",
+            },
+            {
+              label: "Hirosima",
+              value: "hirosima:34",
+            },
+            {
+              label: "Hokkaidô",
+              value: "hokkaidô:01",
+            },
+            {
+              label: "Hukui",
+              value: "hukui:18",
+            },
+            {
+              label: "Hukuoka",
+              value: "hukuoka:40",
+            },
+            {
+              label: "Hukusima",
+              value: "hukusima:07",
+            },
+            {
+              label: "Hyôgo",
+              value: "hyôgo:28",
+            },
+            {
+              label: "Ibaraki",
+              value: "ibaraki:08",
+            },
+            {
+              label: "Isikawa",
+              value: "isikawa:17",
+            },
+            {
+              label: "Iwate",
+              value: "iwate:03",
+            },
+            {
+              label: "Kagawa",
+              value: "kagawa:37",
+            },
+            {
+              label: "Kagosima",
+              value: "kagosima:46",
+            },
+            {
+              label: "Kanagawa",
+              value: "kanagawa:14",
+            },
+            {
+              label: "Kumamoto",
+              value: "kumamoto:43",
+            },
+            {
+              label: "Kyôto",
+              value: "kyôto:26",
+            },
+            {
+              label: "Kôti",
+              value: "kôti:39",
+            },
+            {
+              label: "Mie",
+              value: "mie:24",
+            },
+            {
+              label: "Miyagi",
+              value: "miyagi:04",
+            },
+            {
+              label: "Miyazaki",
+              value: "miyazaki:45",
+            },
+            {
+              label: "Nagano",
+              value: "nagano:20",
+            },
+            {
+              label: "Nagasaki",
+              value: "nagasaki:42",
+            },
+            {
+              label: "Nara",
+              value: "nara:29",
+            },
+            {
+              label: "Niigata",
+              value: "niigata:15",
+            },
+            {
+              label: "Okayama",
+              value: "okayama:33",
+            },
+            {
+              label: "Okinawa",
+              value: "okinawa:47",
+            },
+            {
+              label: "Saga",
+              value: "saga:41",
+            },
+            {
+              label: "Saitama",
+              value: "saitama:11",
+            },
+            {
+              label: "Siga",
+              value: "siga:25",
+            },
+            {
+              label: "Simane",
+              value: "simane:32",
+            },
+            {
+              label: "Sizuoka",
+              value: "sizuoka:22",
+            },
+            {
+              label: "Tiba",
+              value: "tiba:12",
+            },
+            {
+              label: "Tokusima",
+              value: "tokusima:36",
+            },
+            {
+              label: "Totigi",
+              value: "totigi:09",
+            },
+            {
+              label: "Tottori",
+              value: "tottori:31",
+            },
+            {
+              label: "Toyama",
+              value: "toyama:16",
+            },
+            {
+              label: "Tôkyô",
+              value: "tôkyô:13",
+            },
+            {
+              label: "Wakayama",
+              value: "wakayama:30",
+            },
+            {
+              label: "Yamagata",
+              value: "yamagata:06",
+            },
+            {
+              label: "Yamaguti",
+              value: "yamaguti:35",
+            },
+            {
+              label: "Yamanasi",
+              value: "yamanasi:19",
+            },
+            {
+              label: "Ôita",
+              value: "ôita:44",
+            },
+            {
+              label: "Ôsaka",
+              value: "ôsaka:27",
+            },
+          ],
+        },
+        {
+          label: "Jordan",
+          value: "jordan",
+          code: "JO",
+          states: [
+            {
+              label: "Al Balqā'",
+              value: "al-balqā':BA",
+            },
+            {
+              label: "Al ʽAqabah",
+              value: "al-ʽaqabah:AQ",
+            },
+            {
+              label: "Az Zarqā'",
+              value: "az-zarqā':AZ",
+            },
+            {
+              label: "Aţ Ţafīlah",
+              value: "aţ-ţafīlah:AT",
+            },
+            {
+              label: "Irbid",
+              value: "irbid:IR",
+            },
+            {
+              label: "Jerash",
+              value: "jerash:JA",
+            },
+            {
+              label: "Karak",
+              value: "karak:KA",
+            },
+            {
+              label: "Ma'ān",
+              value: "ma'ān:MN",
+            },
+            {
+              label: "Mafraq",
+              value: "mafraq:MA",
+            },
+            {
+              label: "Mādabā",
+              value: "mādabā:MD",
+            },
+            {
+              label: "ʽAjlūn",
+              value: "ʽajlūn:AJ",
+            },
+            {
+              label: "‘Ammān",
+              value: "‘ammān:AM",
+            },
+          ],
+        },
+        {
+          label: "Kazakhstan",
+          value: "kazakhstan",
+          code: "KZ",
+          states: [
+            {
+              label: "Almaty",
+              value: "almaty:ALA",
+            },
+            {
+              label: "Almaty oblysy",
+              value: "almaty-oblysy:ALM",
+            },
+            {
+              label: "Aqmola oblysy",
+              value: "aqmola-oblysy:AKM",
+            },
+            {
+              label: "Aqtöbe oblysy",
+              value: "aqtöbe-oblysy:AKT",
+            },
+            {
+              label: "Astana",
+              value: "astana:AST",
+            },
+            {
+              label: "Atyraū oblysy",
+              value: "atyraū-oblysy:ATY",
+            },
+            {
+              label: "Batys Qazaqstan oblysy",
+              value: "batys-qazaqstan-oblysy:ZAP",
+            },
+            {
+              label: "Mangghystaū oblysy",
+              value: "mangghystaū-oblysy:MAN",
+            },
+            {
+              label: "Ongtüstik Qazaqstan oblysy",
+              value: "ongtüstik-qazaqstan-oblysy:YUZ",
+            },
+            {
+              label: "Pavlodar oblysy",
+              value: "pavlodar-oblysy:PAV",
+            },
+            {
+              label: "Qaraghandy oblysy",
+              value: "qaraghandy-oblysy:KAR",
+            },
+            {
+              label: "Qostanay oblysy",
+              value: "qostanay-oblysy:KUS",
+            },
+            {
+              label: "Qyzylorda oblysy",
+              value: "qyzylorda-oblysy:KZY",
+            },
+            {
+              label: "Shyghys Qazaqstan oblysy",
+              value: "shyghys-qazaqstan-oblysy:VOS",
+            },
+            {
+              label: "Soltüstik Qazaqstan oblysy",
+              value: "soltüstik-qazaqstan-oblysy:SEV",
+            },
+            {
+              label: "Zhambyl oblysy",
+              value: "zhambyl-oblysy:ZHA",
+            },
+          ],
+        },
+        {
+          label: "Kuwait",
+          value: "kuwait",
+          code: "KW",
+          states: [
+            {
+              label: "Al Aḩmadi",
+              value: "al-aḩmadi:AH",
+            },
+            {
+              label: "Al Farwānīyah",
+              value: "al-farwānīyah:FA",
+            },
+            {
+              label: "Al Jahrā’",
+              value: "al-jahrā’:JA",
+            },
+            {
+              label: "Al Kuwayt",
+              value: "al-kuwayt:KU",
+            },
+            {
+              label: "Mubārak al Kabīr",
+              value: "mubārak-al-kabīr:MU",
+            },
+            {
+              label: "Ḩawallī",
+              value: "ḩawallī:HA",
+            },
+          ],
+        },
+        {
+          label: "Kyrgyzstan",
+          value: "kyrgyzstan",
+          code: "KG",
+          states: [
+            {
+              label: "Batken",
+              value: "batken:B",
+            },
+            {
+              label: "Bishkek",
+              value: "bishkek:GB",
+            },
+            {
+              label: "Chü",
+              value: "chü:C",
+            },
+            {
+              label: "Jalal-Abad",
+              value: "jalal-abad:J",
+            },
+            {
+              label: "Naryn",
+              value: "naryn:N",
+            },
+            {
+              label: "Osh",
+              value: "osh:O",
+            },
+            {
+              label: "Talas",
+              value: "talas:T",
+            },
+            {
+              label: "Ysyk-Köl",
+              value: "ysyk-köl:Y",
+            },
+          ],
+        },
+        {
+          label: "Laos",
+          value: "laos",
+          code: "LA",
+          states: [
+            {
+              label: "Attapu",
+              value: "attapu:AT",
+            },
+            {
+              label: "Bokèo",
+              value: "bokèo:BK",
+            },
+            {
+              label: "Bolikhamxai",
+              value: "bolikhamxai:BL",
+            },
+            {
+              label: "Champasak",
+              value: "champasak:CH",
+            },
+            {
+              label: "Houaphan",
+              value: "houaphan:HO",
+            },
+            {
+              label: "Khammouan",
+              value: "khammouan:KH",
+            },
+            {
+              label: "Louang Namtha",
+              value: "louang-namtha:LM",
+            },
+            {
+              label: "Louangphabang",
+              value: "louangphabang:LP",
+            },
+            {
+              label: "Oudômxai",
+              value: "oudômxai:OU",
+            },
+            {
+              label: "Phôngsali",
+              value: "phôngsali:PH",
+            },
+            {
+              label: "Salavan",
+              value: "salavan:SL",
+            },
+            {
+              label: "Savannakhét",
+              value: "savannakhét:SV",
+            },
+            {
+              label: "Vientiane",
+              value: "vientiane:VT",
+            },
+            {
+              label: "Vientiane",
+              value: "vientiane:VI",
+            },
+            {
+              label: "Xaignabouli",
+              value: "xaignabouli:XA",
+            },
+            {
+              label: "Xaisômboun",
+              value: "xaisômboun:XN",
+            },
+            {
+              label: "Xiangkhoang",
+              value: "xiangkhoang:XI",
+            },
+            {
+              label: "Xékong",
+              value: "xékong:XE",
+            },
+          ],
+        },
+        {
+          label: "Lebanon",
+          value: "lebanon",
+          code: "LB",
+          states: [
+            {
+              label: "Aakkâr",
+              value: "aakkâr:AK",
+            },
+            {
+              label: "Baalbek-Hermel",
+              value: "baalbek-hermel:BH",
+            },
+            {
+              label: "Beyrouth",
+              value: "beyrouth:BA",
+            },
+            {
+              label: "Béqaa",
+              value: "béqaa:BI",
+            },
+            {
+              label: "Liban-Nord",
+              value: "liban-nord:AS",
+            },
+            {
+              label: "Liban-Sud",
+              value: "liban-sud:JA",
+            },
+            {
+              label: "Mont-Liban",
+              value: "mont-liban:JL",
+            },
+            {
+              label: "Nabatîyé",
+              value: "nabatîyé:NA",
+            },
+          ],
+        },
+        {
+          label: "Macau",
+          value: "macau",
+          code: "MO",
+          states: [],
+        },
+        {
+          label: "Malaysia",
+          value: "malaysia",
+          code: "MY",
+          states: [
+            {
+              label: "Wilayah Persekutuan Kuala Lumpur",
+              value: "wilayah-persekutuan-kuala-lumpur:14",
+            },
+            {
+              label: "Wilayah Persekutuan Labuan",
+              value: "wilayah-persekutuan-labuan:15",
+            },
+            {
+              label: "Wilayah Persekutuan Putrajaya",
+              value: "wilayah-persekutuan-putrajaya:16",
+            },
+            {
+              label: "Johor",
+              value: "johor:01",
+            },
+            {
+              label: "Kedah",
+              value: "kedah:02",
+            },
+            {
+              label: "Kelantan",
+              value: "kelantan:03",
+            },
+            {
+              label: "Melaka",
+              value: "melaka:04",
+            },
+            {
+              label: "Negeri Sembilan",
+              value: "negeri-sembilan:05",
+            },
+            {
+              label: "Pahang",
+              value: "pahang:06",
+            },
+            {
+              label: "Perak",
+              value: "perak:08",
+            },
+            {
+              label: "Perlis",
+              value: "perlis:09",
+            },
+            {
+              label: "Pulau Pinang",
+              value: "pulau-pinang:07",
+            },
+            {
+              label: "Sabah",
+              value: "sabah:12",
+            },
+            {
+              label: "Sarawak",
+              value: "sarawak:13",
+            },
+            {
+              label: "Selangor",
+              value: "selangor:10",
+            },
+            {
+              label: "Terengganu",
+              value: "terengganu:11",
+            },
+          ],
+        },
+        {
+          label: "Maldives",
+          value: "maldives",
+          code: "MV",
+          states: [
+            {
+              label: "Central",
+              value: "central:CE",
+            },
+            {
+              label: "Male",
+              value: "male:MLE",
+            },
+            {
+              label: "North",
+              value: "north:NO",
+            },
+            {
+              label: "North Central",
+              value: "north-central:NC",
+            },
+            {
+              label: "South",
+              value: "south:SU",
+            },
+            {
+              label: "South Central",
+              value: "south-central:SC",
+            },
+            {
+              label: "Upper North",
+              value: "upper-north:UN",
+            },
+            {
+              label: "Upper South",
+              value: "upper-south:US",
+            },
+          ],
+        },
+        {
+          label: "Mongolia",
+          value: "mongolia",
+          code: "MN",
+          states: [
+            {
+              label: "Arhangay",
+              value: "arhangay:073",
+            },
+            {
+              label: "Bayan-Ölgiy",
+              value: "bayan-ölgiy:071",
+            },
+            {
+              label: "Bayanhongor",
+              value: "bayanhongor:069",
+            },
+            {
+              label: "Bulgan",
+              value: "bulgan:067",
+            },
+            {
+              label: "Darhan uul",
+              value: "darhan-uul:037",
+            },
+            {
+              label: "Dornod",
+              value: "dornod:061",
+            },
+            {
+              label: "Dornogovĭ",
+              value: "dornogovĭ:063",
+            },
+            {
+              label: "Dundgovĭ",
+              value: "dundgovĭ:059",
+            },
+            {
+              label: "Dzavhan",
+              value: "dzavhan:057",
+            },
+            {
+              label: "Govĭ-Altay",
+              value: "govĭ-altay:065",
+            },
+            {
+              label: "Govĭ-Sümber",
+              value: "govĭ-sümber:064",
+            },
+            {
+              label: "Hentiy",
+              value: "hentiy:039",
+            },
+            {
+              label: "Hovd",
+              value: "hovd:043",
+            },
+            {
+              label: "Hövsgöl",
+              value: "hövsgöl:041",
+            },
+            {
+              label: "Orhon",
+              value: "orhon:035",
+            },
+            {
+              label: "Selenge",
+              value: "selenge:049",
+            },
+            {
+              label: "Sühbaatar",
+              value: "sühbaatar:051",
+            },
+            {
+              label: "Töv",
+              value: "töv:047",
+            },
+            {
+              label: "Ulaanbaatar",
+              value: "ulaanbaatar:1",
+            },
+            {
+              label: "Uvs",
+              value: "uvs:046",
+            },
+            {
+              label: "Ömnögovĭ",
+              value: "ömnögovĭ:053",
+            },
+            {
+              label: "Övörhangay",
+              value: "övörhangay:055",
+            },
+          ],
+        },
+        {
+          label: "Myanmar",
+          value: "myanmar",
+          code: "MM",
+          states: [
+            {
+              label: "Ayeyarwady",
+              value: "ayeyarwady:07",
+            },
+            {
+              label: "Bago",
+              value: "bago:02",
+            },
+            {
+              label: "Chin",
+              value: "chin:14",
+            },
+            {
+              label: "Kachin",
+              value: "kachin:11",
+            },
+            {
+              label: "Kayah",
+              value: "kayah:12",
+            },
+            {
+              label: "Kayin",
+              value: "kayin:13",
+            },
+            {
+              label: "Magway",
+              value: "magway:03",
+            },
+            {
+              label: "Mandalay",
+              value: "mandalay:04",
+            },
+            {
+              label: "Mon",
+              value: "mon:15",
+            },
+            {
+              label: "Rakhine",
+              value: "rakhine:16",
+            },
+            {
+              label: "Sagaing",
+              value: "sagaing:01",
+            },
+            {
+              label: "Shan",
+              value: "shan:17",
+            },
+            {
+              label: "Tanintharyi",
+              value: "tanintharyi:05",
+            },
+            {
+              label: "Yangon",
+              value: "yangon:06",
+            },
+          ],
+        },
+        {
+          label: "Nepal",
+          value: "nepal",
+          code: "NP",
+          states: [
+            {
+              label: "Madhya Pashchimanchal",
+              value: "madhya-pashchimanchal:2",
+            },
+            {
+              label: "Madhyamanchal",
+              value: "madhyamanchal:1",
+            },
+            {
+              label: "Pashchimanchal",
+              value: "pashchimanchal:3",
+            },
+            {
+              label: "Purwanchal",
+              value: "purwanchal:4",
+            },
+            {
+              label: "Sudur Pashchimanchal",
+              value: "sudur-pashchimanchal:5",
+            },
+          ],
+        },
+        {
+          label: "North Korea",
+          value: "north-korea",
+          code: "KP",
+          states: [
+            {
+              label: "Chagang",
+              value: "chagang:04",
+            },
+            {
+              label: "Kangwon",
+              value: "kangwon:07",
+            },
+            {
+              label: "North Hamgyong",
+              value: "north-hamgyong:09",
+            },
+            {
+              label: "North Hwanghae",
+              value: "north-hwanghae:06",
+            },
+            {
+              label: "North Pyongan",
+              value: "north-pyongan:03",
+            },
+            {
+              label: "Pyongyang",
+              value: "pyongyang:01",
+            },
+            {
+              label: "Rason",
+              value: "rason:13",
+            },
+            {
+              label: "Ryanggang",
+              value: "ryanggang:10",
+            },
+            {
+              label: "South Hamgyong",
+              value: "south-hamgyong:08",
+            },
+            {
+              label: "South Hwanghae",
+              value: "south-hwanghae:05",
+            },
+            {
+              label: "South Pyongan",
+              value: "south-pyongan:02",
+            },
+          ],
+        },
+        {
+          label: "Oman",
+          value: "oman",
+          code: "OM",
+          states: [
+            {
+              label: "Ad Dākhilīyah",
+              value: "ad-dākhilīyah:DA",
+            },
+            {
+              label: "Al Buraymī",
+              value: "al-buraymī:BU",
+            },
+            {
+              label: "Al Bāţinah",
+              value: "al-bāţinah:BA",
+            },
+            {
+              label: "Al Wusţá",
+              value: "al-wusţá:WU",
+            },
+            {
+              label: "Ash Sharqīyah",
+              value: "ash-sharqīyah:SH",
+            },
+            {
+              label: "Az̧ Z̧āhirah",
+              value: "az̧-z̧āhirah:ZA",
+            },
+            {
+              label: "Masqaţ",
+              value: "masqaţ:MA",
+            },
+            {
+              label: "Musandam",
+              value: "musandam:MU",
+            },
+            {
+              label: "Z̧ufār",
+              value: "z̧ufār:ZU",
+            },
+          ],
+        },
+        {
+          label: "Pakistan",
+          value: "pakistan",
+          code: "PK",
+          states: [
+            {
+              label: "Azad Kashmir",
+              value: "azad-kashmir:JK",
+            },
+            {
+              label: "Balochistan",
+              value: "balochistan:BA",
+            },
+            {
+              label: "Federally Administered Tribal Areas",
+              value: "federally-administered-tribal-areas:TA",
+            },
+            {
+              label: "Gilgit-Baltistan",
+              value: "gilgit-baltistan:GB",
+            },
+            {
+              label: "Islamabad",
+              value: "islamabad:IS",
+            },
+            {
+              label: "Khyber Pakhtunkhwa",
+              value: "khyber-pakhtunkhwa:KP",
+            },
+            {
+              label: "Punjab",
+              value: "punjab:PB",
+            },
+            {
+              label: "Sindh",
+              value: "sindh:SD",
+            },
+          ],
+        },
+        {
+          label: "Palestine",
+          value: "palestine",
+          code: "PS",
+          states: [
+            {
+              label: "Bethlehem",
+              value: "bethlehem:BTH",
+            },
+            {
+              label: "Deir El Balah",
+              value: "deir-el-balah:DEB",
+            },
+            {
+              label: "Gaza",
+              value: "gaza:GZA",
+            },
+            {
+              label: "Hebron",
+              value: "hebron:HBN",
+            },
+            {
+              label: "Jenin",
+              value: "jenin:JEN",
+            },
+            {
+              label: "Jericho – Al Aghwar",
+              value: "jericho-–-al-aghwar:JRH",
+            },
+            {
+              label: "Jerusalem",
+              value: "jerusalem:JEM",
+            },
+            {
+              label: "Khan Yunis",
+              value: "khan-yunis:KYS",
+            },
+            {
+              label: "Nablus",
+              value: "nablus:NBS",
+            },
+            {
+              label: "North Gaza",
+              value: "north-gaza:NGZ",
+            },
+            {
+              label: "Qalqilya",
+              value: "qalqilya:QQA",
+            },
+            {
+              label: "Rafah",
+              value: "rafah:RFH",
+            },
+            {
+              label: "Ramallah",
+              value: "ramallah:RBH",
+            },
+            {
+              label: "Salfit",
+              value: "salfit:SLT",
+            },
+            {
+              label: "Tubas",
+              value: "tubas:TBS",
+            },
+            {
+              label: "Tulkarm",
+              value: "tulkarm:TKM",
+            },
+          ],
+        },
+        {
+          label: "Philippines",
+          value: "philippines",
+          code: "PH",
+          states: [
+            {
+              label: "Autonomous Region in Muslim Mindanao",
+              value: "autonomous-region-in-muslim-mindanao:14",
+            },
+            {
+              label: "Bicol",
+              value: "bicol:05",
+            },
+            {
+              label: "Cagayan Valley",
+              value: "cagayan-valley:02",
+            },
+            {
+              label: "Calabarzon",
+              value: "calabarzon:40",
+            },
+            {
+              label: "Caraga",
+              value: "caraga:13",
+            },
+            {
+              label: "Central Luzon",
+              value: "central-luzon:03",
+            },
+            {
+              label: "Central Visayas",
+              value: "central-visayas:07",
+            },
+            {
+              label: "Cordillera Administrative Region",
+              value: "cordillera-administrative-region:15",
+            },
+            {
+              label: "Davao",
+              value: "davao:11",
+            },
+            {
+              label: "Eastern Visayas",
+              value: "eastern-visayas:08",
+            },
+            {
+              label: "Ilocos",
+              value: "ilocos:01",
+            },
+            {
+              label: "Mimaropa",
+              value: "mimaropa:41",
+            },
+            {
+              label: "National Capital Region",
+              value: "national-capital-region:00",
+            },
+            {
+              label: "Northern Mindanao",
+              value: "northern-mindanao:10",
+            },
+            {
+              label: "Soccsksargen",
+              value: "soccsksargen:12",
+            },
+            {
+              label: "Western Visayas",
+              value: "western-visayas:06",
+            },
+            {
+              label: "Zamboanga Peninsula",
+              value: "zamboanga-peninsula:09",
+            },
+          ],
+        },
+        {
+          label: "Qatar",
+          value: "qatar",
+          code: "QA",
+          states: [
+            {
+              label: "Ad Dawḩah",
+              value: "ad-dawḩah:DA",
+            },
+            {
+              label: "Al Khawr wa adh Dhakhīrah",
+              value: "al-khawr-wa-adh-dhakhīrah:KH",
+            },
+            {
+              label: "Al Wakrah",
+              value: "al-wakrah:WA",
+            },
+            {
+              label: "Ar Rayyān",
+              value: "ar-rayyān:RA",
+            },
+            {
+              label: "Ash Shamāl",
+              value: "ash-shamāl:MS",
+            },
+            {
+              label: "Az̧ Za̧`āyin",
+              value: "az̧-za̧`āyin:ZA",
+            },
+            {
+              label: "Umm Şalāl",
+              value: "umm-şalāl:US",
+            },
+          ],
+        },
+        {
+          label: "Saudi Arabia",
+          value: "saudi-arabia",
+          code: "SA",
+          states: [
+            {
+              label: "Al Bāḩah",
+              value: "al-bāḩah:11",
+            },
+            {
+              label: "Al Jawf",
+              value: "al-jawf:12",
+            },
+            {
+              label: "Al Madīnah",
+              value: "al-madīnah:03",
+            },
+            {
+              label: "Al Qaşīm",
+              value: "al-qaşīm:05",
+            },
+            {
+              label: "Al Ḩudūd ash Shamālīyah",
+              value: "al-ḩudūd-ash-shamālīyah:08",
+            },
+            {
+              label: "Ar Riyāḑ",
+              value: "ar-riyāḑ:01",
+            },
+            {
+              label: "Ash Sharqīyah",
+              value: "ash-sharqīyah:04",
+            },
+            {
+              label: "Jīzān",
+              value: "jīzān:09",
+            },
+            {
+              label: "Makkah",
+              value: "makkah:02",
+            },
+            {
+              label: "Najrān",
+              value: "najrān:10",
+            },
+            {
+              label: "Tabūk",
+              value: "tabūk:07",
+            },
+            {
+              label: "ٰĀsīr",
+              value: "ٰāsīr:14",
+            },
+            {
+              label: "Ḩā'il",
+              value: "ḩā'il:06",
+            },
+          ],
+        },
+        {
+          label: "Singapore",
+          value: "singapore",
+          code: "SG",
+          states: [
+            {
+              label: "Central Singapore",
+              value: "central-singapore:01",
+            },
+            {
+              label: "North East",
+              value: "north-east:02",
+            },
+            {
+              label: "North West",
+              value: "north-west:03",
+            },
+            {
+              label: "South East",
+              value: "south-east:04",
+            },
+            {
+              label: "South West",
+              value: "south-west:05",
+            },
+          ],
+        },
+        {
+          label: "South Korea",
+          value: "south-korea",
+          code: "KR",
+          states: [
+            {
+              label: "Busan-gwangyeoksi",
+              value: "busan-gwangyeoksi:26",
+            },
+            {
+              label: "Chungcheongbuk-do",
+              value: "chungcheongbuk-do:43",
+            },
+            {
+              label: "Chungcheongnam-do",
+              value: "chungcheongnam-do:44",
+            },
+            {
+              label: "Daegu-gwangyeoksi",
+              value: "daegu-gwangyeoksi:27",
+            },
+            {
+              label: "Daejeon-gwangyeoksi",
+              value: "daejeon-gwangyeoksi:30",
+            },
+            {
+              label: "Gangwon-do",
+              value: "gangwon-do:42",
+            },
+            {
+              label: "Gwangju-gwangyeoksi",
+              value: "gwangju-gwangyeoksi:29",
+            },
+            {
+              label: "Gyeonggi-do",
+              value: "gyeonggi-do:41",
+            },
+            {
+              label: "Gyeongsangbuk-do",
+              value: "gyeongsangbuk-do:47",
+            },
+            {
+              label: "Gyeongsangnam-do",
+              value: "gyeongsangnam-do:48",
+            },
+            {
+              label: "Incheon-gwangyeoksi",
+              value: "incheon-gwangyeoksi:28",
+            },
+            {
+              label: "Jeju-teukbyeoljachido",
+              value: "jeju-teukbyeoljachido:49",
+            },
+            {
+              label: "Jeollabuk-do",
+              value: "jeollabuk-do:45",
+            },
+            {
+              label: "Jeollanam-do",
+              value: "jeollanam-do:46",
+            },
+            {
+              label: "Sejong",
+              value: "sejong:50",
+            },
+            {
+              label: "Seoul-teukbyeolsi",
+              value: "seoul-teukbyeolsi:11",
+            },
+            {
+              label: "Ulsan-gwangyeoksi",
+              value: "ulsan-gwangyeoksi:31",
+            },
+          ],
+        },
+        {
+          label: "Sri Lanka",
+          value: "sri-lanka",
+          code: "LK",
+          states: [
+            {
+              label: "Central Province",
+              value: "central-province:2",
+            },
+            {
+              label: "Eastern Province",
+              value: "eastern-province:5",
+            },
+            {
+              label: "North Central Province",
+              value: "north-central-province:7",
+            },
+            {
+              label: "North Western Province",
+              value: "north-western-province:6",
+            },
+            {
+              label: "Northern Province",
+              value: "northern-province:4",
+            },
+            {
+              label: "Sabaragamuwa Province",
+              value: "sabaragamuwa-province:9",
+            },
+            {
+              label: "Southern Province",
+              value: "southern-province:3",
+            },
+            {
+              label: "Uva Province",
+              value: "uva-province:8",
+            },
+            {
+              label: "Western Province",
+              value: "western-province:1",
+            },
+          ],
+        },
+        {
+          label: "Syria",
+          value: "syria",
+          code: "SY",
+          states: [
+            {
+              label: "Al Lādhiqīyah",
+              value: "al-lādhiqīyah:LA",
+            },
+            {
+              label: "Al Qunayţirah",
+              value: "al-qunayţirah:QU",
+            },
+            {
+              label: "Al Ḩasakah",
+              value: "al-ḩasakah:HA",
+            },
+            {
+              label: "Ar Raqqah",
+              value: "ar-raqqah:RA",
+            },
+            {
+              label: "As Suwaydā'",
+              value: "as-suwaydā':SU",
+            },
+            {
+              label: "Darٰā",
+              value: "darٰā:DR",
+            },
+            {
+              label: "Dayr az Zawr",
+              value: "dayr-az-zawr:DY",
+            },
+            {
+              label: "Dimashq",
+              value: "dimashq:DI",
+            },
+            {
+              label: "Idlib",
+              value: "idlib:ID",
+            },
+            {
+              label: "Rīf Dimashq",
+              value: "rīf-dimashq:RD",
+            },
+            {
+              label: "Ţarţūs",
+              value: "ţarţūs:TA",
+            },
+            {
+              label: "Ḩalab",
+              value: "ḩalab:HL",
+            },
+            {
+              label: "Ḩamāh",
+              value: "ḩamāh:HM",
+            },
+            {
+              label: "Ḩimş",
+              value: "ḩimş:HI",
+            },
+          ],
+        },
+        {
+          label: "Taiwan",
+          value: "taiwan",
+          code: "TW",
+          states: [
+            {
+              label: "Changhua",
+              value: "changhua:CHA",
+            },
+            {
+              label: "Chiayi",
+              value: "chiayi:CYQ",
+            },
+            {
+              label: "Chiayi",
+              value: "chiayi:CYI",
+            },
+            {
+              label: "Hsinchu",
+              value: "hsinchu:HSZ",
+            },
+            {
+              label: "Hsinchu",
+              value: "hsinchu:HSQ",
+            },
+            {
+              label: "Hualien",
+              value: "hualien:HUA",
+            },
+            {
+              label: "Ilan",
+              value: "ilan:ILA",
+            },
+            {
+              label: "Kaohsiung",
+              value: "kaohsiung:KHQ",
+            },
+            {
+              label: "Kaohsiung",
+              value: "kaohsiung:KHH",
+            },
+            {
+              label: "Keelung",
+              value: "keelung:KEE",
+            },
+            {
+              label: "Miaoli",
+              value: "miaoli:MIA",
+            },
+            {
+              label: "Nantou",
+              value: "nantou:NAN",
+            },
+            {
+              label: "Penghu",
+              value: "penghu:PEN",
+            },
+            {
+              label: "Pingtung",
+              value: "pingtung:PIF",
+            },
+            {
+              label: "Taichung",
+              value: "taichung:TXG",
+            },
+            {
+              label: "Taichung",
+              value: "taichung:TXQ",
+            },
+            {
+              label: "Tainan",
+              value: "tainan:TNN",
+            },
+            {
+              label: "Tainan",
+              value: "tainan:TNQ",
+            },
+            {
+              label: "Taipei",
+              value: "taipei:TPE",
+            },
+            {
+              label: "Taipei",
+              value: "taipei:TPQ",
+            },
+            {
+              label: "Taitung",
+              value: "taitung:TTT",
+            },
+            {
+              label: "Taoyuan",
+              value: "taoyuan:TAO",
+            },
+            {
+              label: "Yunlin",
+              value: "yunlin:YUN",
+            },
+          ],
+        },
+        {
+          label: "Tajikistan",
+          value: "tajikistan",
+          code: "TJ",
+          states: [
+            {
+              label: "Dushanbe",
+              value: "dushanbe:DU",
+            },
+            {
+              label: "Khatlon",
+              value: "khatlon:KT",
+            },
+            {
+              label: "Kŭhistoni Badakhshon",
+              value: "kŭhistoni-badakhshon:GB",
+            },
+            {
+              label: "Sughd",
+              value: "sughd:SU",
+            },
+          ],
+        },
+        {
+          label: "Thailand",
+          value: "thailand",
+          code: "TH",
+          states: [
+            {
+              label: "Amnat Charoen",
+              value: "amnat-charoen:37",
+            },
+            {
+              label: "Ang Thong",
+              value: "ang-thong:15",
+            },
+            {
+              label: "Bueng Kan",
+              value: "bueng-kan:38",
+            },
+            {
+              label: "Buri Ram",
+              value: "buri-ram:31",
+            },
+            {
+              label: "Chachoengsao",
+              value: "chachoengsao:24",
+            },
+            {
+              label: "Chai Nat",
+              value: "chai-nat:18",
+            },
+            {
+              label: "Chaiyaphum",
+              value: "chaiyaphum:36",
+            },
+            {
+              label: "Chanthaburi",
+              value: "chanthaburi:22",
+            },
+            {
+              label: "Chiang Mai",
+              value: "chiang-mai:50",
+            },
+            {
+              label: "Chiang Rai",
+              value: "chiang-rai:57",
+            },
+            {
+              label: "Chon Buri",
+              value: "chon-buri:20",
+            },
+            {
+              label: "Chumphon",
+              value: "chumphon:86",
+            },
+            {
+              label: "Kalasin",
+              value: "kalasin:46",
+            },
+            {
+              label: "Kamphaeng Phet",
+              value: "kamphaeng-phet:62",
+            },
+            {
+              label: "Kanchanaburi",
+              value: "kanchanaburi:71",
+            },
+            {
+              label: "Khon Kaen",
+              value: "khon-kaen:40",
+            },
+            {
+              label: "Krabi",
+              value: "krabi:81",
+            },
+            {
+              label: "Krung Thep Maha Nakhon",
+              value: "krung-thep-maha-nakhon:10",
+            },
+            {
+              label: "Lampang",
+              value: "lampang:52",
+            },
+            {
+              label: "Lamphun",
+              value: "lamphun:51",
+            },
+            {
+              label: "Loei",
+              value: "loei:42",
+            },
+            {
+              label: "Lop Buri",
+              value: "lop-buri:16",
+            },
+            {
+              label: "Mae Hong Son",
+              value: "mae-hong-son:58",
+            },
+            {
+              label: "Maha Sarakham",
+              value: "maha-sarakham:44",
+            },
+            {
+              label: "Mukdahan",
+              value: "mukdahan:49",
+            },
+            {
+              label: "Nakhon Nayok",
+              value: "nakhon-nayok:26",
+            },
+            {
+              label: "Nakhon Pathom",
+              value: "nakhon-pathom:73",
+            },
+            {
+              label: "Nakhon Phanom",
+              value: "nakhon-phanom:48",
+            },
+            {
+              label: "Nakhon Ratchasima",
+              value: "nakhon-ratchasima:30",
+            },
+            {
+              label: "Nakhon Sawan",
+              value: "nakhon-sawan:60",
+            },
+            {
+              label: "Nakhon Si Thammarat",
+              value: "nakhon-si-thammarat:80",
+            },
+            {
+              label: "Nan",
+              value: "nan:55",
+            },
+            {
+              label: "Narathiwat",
+              value: "narathiwat:96",
+            },
+            {
+              label: "Nong Bua Lam Phu",
+              value: "nong-bua-lam-phu:39",
+            },
+            {
+              label: "Nong Khai",
+              value: "nong-khai:43",
+            },
+            {
+              label: "Nonthaburi",
+              value: "nonthaburi:12",
+            },
+            {
+              label: "Pathum Thani",
+              value: "pathum-thani:13",
+            },
+            {
+              label: "Pattani",
+              value: "pattani:94",
+            },
+            {
+              label: "Phangnga",
+              value: "phangnga:82",
+            },
+            {
+              label: "Phatthalung",
+              value: "phatthalung:93",
+            },
+            {
+              label: "Phatthaya",
+              value: "phatthaya:S",
+            },
+            {
+              label: "Phayao",
+              value: "phayao:56",
+            },
+            {
+              label: "Phetchabun",
+              value: "phetchabun:67",
+            },
+            {
+              label: "Phetchaburi",
+              value: "phetchaburi:76",
+            },
+            {
+              label: "Phichit",
+              value: "phichit:66",
+            },
+            {
+              label: "Phitsanulok",
+              value: "phitsanulok:65",
+            },
+            {
+              label: "Phra Nakhon Si Ayutthaya",
+              value: "phra-nakhon-si-ayutthaya:14",
+            },
+            {
+              label: "Phrae",
+              value: "phrae:54",
+            },
+            {
+              label: "Phuket",
+              value: "phuket:83",
+            },
+            {
+              label: "Prachin Buri",
+              value: "prachin-buri:25",
+            },
+            {
+              label: "Prachuap Khiri Khan",
+              value: "prachuap-khiri-khan:77",
+            },
+            {
+              label: "Ranong",
+              value: "ranong:85",
+            },
+            {
+              label: "Ratchaburi",
+              value: "ratchaburi:70",
+            },
+            {
+              label: "Rayong",
+              value: "rayong:21",
+            },
+            {
+              label: "Roi Et",
+              value: "roi-et:45",
+            },
+            {
+              label: "Sa Kaeo",
+              value: "sa-kaeo:27",
+            },
+            {
+              label: "Sakon Nakhon",
+              value: "sakon-nakhon:47",
+            },
+            {
+              label: "Samut Prakan",
+              value: "samut-prakan:11",
+            },
+            {
+              label: "Samut Sakhon",
+              value: "samut-sakhon:74",
+            },
+            {
+              label: "Samut Songkhram",
+              value: "samut-songkhram:75",
+            },
+            {
+              label: "Saraburi",
+              value: "saraburi:19",
+            },
+            {
+              label: "Satun",
+              value: "satun:91",
+            },
+            {
+              label: "Si Sa Ket",
+              value: "si-sa-ket:33",
+            },
+            {
+              label: "Sing Buri",
+              value: "sing-buri:17",
+            },
+            {
+              label: "Songkhla",
+              value: "songkhla:90",
+            },
+            {
+              label: "Sukhothai",
+              value: "sukhothai:64",
+            },
+            {
+              label: "Suphan Buri",
+              value: "suphan-buri:72",
+            },
+            {
+              label: "Surat Thani",
+              value: "surat-thani:84",
+            },
+            {
+              label: "Surin",
+              value: "surin:32",
+            },
+            {
+              label: "Tak",
+              value: "tak:63",
+            },
+            {
+              label: "Trang",
+              value: "trang:92",
+            },
+            {
+              label: "Trat",
+              value: "trat:23",
+            },
+            {
+              label: "Ubon Ratchathani",
+              value: "ubon-ratchathani:34",
+            },
+            {
+              label: "Udon Thani",
+              value: "udon-thani:41",
+            },
+            {
+              label: "Uthai Thani",
+              value: "uthai-thani:61",
+            },
+            {
+              label: "Uttaradit",
+              value: "uttaradit:53",
+            },
+            {
+              label: "Yala",
+              value: "yala:95",
+            },
+            {
+              label: "Yasothon",
+              value: "yasothon:35",
+            },
+          ],
+        },
+        {
+          label: "East Timor",
+          value: "east-timor",
+          code: "TL",
+          states: [
+            {
+              label: "Aileu",
+              value: "aileu:AL",
+            },
+            {
+              label: "Ainaro",
+              value: "ainaro:AN",
+            },
+            {
+              label: "Baucau",
+              value: "baucau:BA",
+            },
+            {
+              label: "Bobonaro",
+              value: "bobonaro:BO",
+            },
+            {
+              label: "Cova Lima",
+              value: "cova-lima:CO",
+            },
+            {
+              label: "Díli",
+              value: "díli:DI",
+            },
+            {
+              label: "Ermera",
+              value: "ermera:ER",
+            },
+            {
+              label: "Lautem",
+              value: "lautem:LA",
+            },
+            {
+              label: "Liquiça",
+              value: "liquiça:LI",
+            },
+            {
+              label: "Manatuto",
+              value: "manatuto:MT",
+            },
+            {
+              label: "Manufahi",
+              value: "manufahi:MF",
+            },
+            {
+              label: "Oecussi",
+              value: "oecussi:OE",
+            },
+            {
+              label: "Viqueque",
+              value: "viqueque:VI",
+            },
+          ],
+        },
+        {
+          label: "Turkey",
+          value: "turkey",
+          code: "TR",
+          states: [
+            {
+              label: "Adana",
+              value: "adana:01",
+            },
+            {
+              label: "Adıyaman",
+              value: "adıyaman:02",
+            },
+            {
+              label: "Afyonkarahisar",
+              value: "afyonkarahisar:03",
+            },
+            {
+              label: "Aksaray",
+              value: "aksaray:68",
+            },
+            {
+              label: "Amasya",
+              value: "amasya:05",
+            },
+            {
+              label: "Ankara",
+              value: "ankara:06",
+            },
+            {
+              label: "Antalya",
+              value: "antalya:07",
+            },
+            {
+              label: "Ardahan",
+              value: "ardahan:75",
+            },
+            {
+              label: "Artvin",
+              value: "artvin:08",
+            },
+            {
+              label: "Aydın",
+              value: "aydın:09",
+            },
+            {
+              label: "Ağrı",
+              value: "ağrı:04",
+            },
+            {
+              label: "Balıkesir",
+              value: "balıkesir:10",
+            },
+            {
+              label: "Bartın",
+              value: "bartın:74",
+            },
+            {
+              label: "Batman",
+              value: "batman:72",
+            },
+            {
+              label: "Bayburt",
+              value: "bayburt:69",
+            },
+            {
+              label: "Bilecik",
+              value: "bilecik:11",
+            },
+            {
+              label: "Bingöl",
+              value: "bingöl:12",
+            },
+            {
+              label: "Bitlis",
+              value: "bitlis:13",
+            },
+            {
+              label: "Bolu",
+              value: "bolu:14",
+            },
+            {
+              label: "Burdur",
+              value: "burdur:15",
+            },
+            {
+              label: "Bursa",
+              value: "bursa:16",
+            },
+            {
+              label: "Denizli",
+              value: "denizli:20",
+            },
+            {
+              label: "Diyarbakır",
+              value: "diyarbakır:21",
+            },
+            {
+              label: "Düzce",
+              value: "düzce:81",
+            },
+            {
+              label: "Edirne",
+              value: "edirne:22",
+            },
+            {
+              label: "Elazığ",
+              value: "elazığ:23",
+            },
+            {
+              label: "Erzincan",
+              value: "erzincan:24",
+            },
+            {
+              label: "Erzurum",
+              value: "erzurum:25",
+            },
+            {
+              label: "Eskişehir",
+              value: "eskişehir:26",
+            },
+            {
+              label: "Gaziantep",
+              value: "gaziantep:27",
+            },
+            {
+              label: "Giresun",
+              value: "giresun:28",
+            },
+            {
+              label: "Gümüşhane",
+              value: "gümüşhane:29",
+            },
+            {
+              label: "Hakkâri",
+              value: "hakkâri:30",
+            },
+            {
+              label: "Hatay",
+              value: "hatay:31",
+            },
+            {
+              label: "Isparta",
+              value: "isparta:32",
+            },
+            {
+              label: "Iğdır",
+              value: "iğdır:76",
+            },
+            {
+              label: "Kahramanmaraş",
+              value: "kahramanmaraş:46",
+            },
+            {
+              label: "Karabük",
+              value: "karabük:78",
+            },
+            {
+              label: "Karaman",
+              value: "karaman:70",
+            },
+            {
+              label: "Kars",
+              value: "kars:36",
+            },
+            {
+              label: "Kastamonu",
+              value: "kastamonu:37",
+            },
+            {
+              label: "Kayseri",
+              value: "kayseri:38",
+            },
+            {
+              label: "Kilis",
+              value: "kilis:79",
+            },
+            {
+              label: "Kocaeli",
+              value: "kocaeli:41",
+            },
+            {
+              label: "Konya",
+              value: "konya:42",
+            },
+            {
+              label: "Kütahya",
+              value: "kütahya:43",
+            },
+            {
+              label: "Kırklareli",
+              value: "kırklareli:39",
+            },
+            {
+              label: "Kırıkkale",
+              value: "kırıkkale:71",
+            },
+            {
+              label: "Kırşehir",
+              value: "kırşehir:40",
+            },
+            {
+              label: "Malatya",
+              value: "malatya:44",
+            },
+            {
+              label: "Manisa",
+              value: "manisa:45",
+            },
+            {
+              label: "Mardin",
+              value: "mardin:47",
+            },
+            {
+              label: "Mersin",
+              value: "mersin:33",
+            },
+            {
+              label: "Muğla",
+              value: "muğla:48",
+            },
+            {
+              label: "Muş",
+              value: "muş:49",
+            },
+            {
+              label: "Nevşehir",
+              value: "nevşehir:50",
+            },
+            {
+              label: "Niğde",
+              value: "niğde:51",
+            },
+            {
+              label: "Ordu",
+              value: "ordu:52",
+            },
+            {
+              label: "Osmaniye",
+              value: "osmaniye:80",
+            },
+            {
+              label: "Rize",
+              value: "rize:53",
+            },
+            {
+              label: "Sakarya",
+              value: "sakarya:54",
+            },
+            {
+              label: "Samsun",
+              value: "samsun:55",
+            },
+            {
+              label: "Siirt",
+              value: "siirt:56",
+            },
+            {
+              label: "Sinop",
+              value: "sinop:57",
+            },
+            {
+              label: "Sivas",
+              value: "sivas:58",
+            },
+            {
+              label: "Tekirdağ",
+              value: "tekirdağ:59",
+            },
+            {
+              label: "Tokat",
+              value: "tokat:60",
+            },
+            {
+              label: "Trabzon",
+              value: "trabzon:61",
+            },
+            {
+              label: "Tunceli",
+              value: "tunceli:62",
+            },
+            {
+              label: "Uşak",
+              value: "uşak:64",
+            },
+            {
+              label: "Van",
+              value: "van:65",
+            },
+            {
+              label: "Yalova",
+              value: "yalova:77",
+            },
+            {
+              label: "Yozgat",
+              value: "yozgat:66",
+            },
+            {
+              label: "Zonguldak",
+              value: "zonguldak:67",
+            },
+            {
+              label: "Çanakkale",
+              value: "çanakkale:17",
+            },
+            {
+              label: "Çankırı",
+              value: "çankırı:18",
+            },
+            {
+              label: "Çorum",
+              value: "çorum:19",
+            },
+            {
+              label: "İstanbul",
+              value: "i̇stanbul:34",
+            },
+            {
+              label: "İzmir",
+              value: "i̇zmir:35",
+            },
+            {
+              label: "Şanlıurfa",
+              value: "şanlıurfa:63",
+            },
+            {
+              label: "Şırnak",
+              value: "şırnak:73",
+            },
+          ],
+        },
+        {
+          label: "Turkmenistan",
+          value: "turkmenistan",
+          code: "TM",
+          states: [
+            {
+              label: "Ahal",
+              value: "ahal:A",
+            },
+            {
+              label: "Aşgabat",
+              value: "aşgabat:S",
+            },
+            {
+              label: "Balkan",
+              value: "balkan:B",
+            },
+            {
+              label: "Daşoguz",
+              value: "daşoguz:D",
+            },
+            {
+              label: "Lebap",
+              value: "lebap:L",
+            },
+            {
+              label: "Mary",
+              value: "mary:M",
+            },
+          ],
+        },
+        {
+          label: "United Arab Emirates",
+          value: "united-arab-emirates",
+          code: "AE",
+          states: [
+            {
+              label: "'Ajmān",
+              value: "'ajmān:AJ",
+            },
+            {
+              label: "Abū Z̧aby",
+              value: "abū-z̧aby:AZ",
+            },
+            {
+              label: "Al Fujayrah",
+              value: "al-fujayrah:FU",
+            },
+            {
+              label: "Ash Shāriqah",
+              value: "ash-shāriqah:SH",
+            },
+            {
+              label: "Dubayy",
+              value: "dubayy:DU",
+            },
+            {
+              label: "Ra's al Khaymah",
+              value: "ra's-al-khaymah:RK",
+            },
+            {
+              label: "Umm al Qaywayn",
+              value: "umm-al-qaywayn:UQ",
+            },
+          ],
+        },
+        {
+          label: "Uzbekistan",
+          value: "uzbekistan",
+          code: "UZ",
+          states: [
+            {
+              label: "Andijon",
+              value: "andijon:AN",
+            },
+            {
+              label: "Buxoro",
+              value: "buxoro:BU",
+            },
+            {
+              label: "Farg‘ona",
+              value: "farg‘ona:FA",
+            },
+            {
+              label: "Jizzax",
+              value: "jizzax:JI",
+            },
+            {
+              label: "Namangan",
+              value: "namangan:NG",
+            },
+            {
+              label: "Navoiy",
+              value: "navoiy:NW",
+            },
+            {
+              label: "Qashqadaryo",
+              value: "qashqadaryo:QA",
+            },
+            {
+              label: "Qoraqalpog‘iston Respublikasi",
+              value: "qoraqalpog‘iston-respublikasi:QR",
+            },
+            {
+              label: "Samarqand",
+              value: "samarqand:SA",
+            },
+            {
+              label: "Sirdaryo",
+              value: "sirdaryo:SI",
+            },
+            {
+              label: "Surxondaryo",
+              value: "surxondaryo:SU",
+            },
+            {
+              label: "Toshkent",
+              value: "toshkent:TO",
+            },
+            {
+              label: "Toshkent",
+              value: "toshkent:TK",
+            },
+            {
+              label: "Xorazm",
+              value: "xorazm:XO",
+            },
+          ],
+        },
+        {
+          label: "Vietnam",
+          value: "vietnam",
+          code: "VN",
+          states: [
+            {
+              label: "An Giang",
+              value: "an-giang:44",
+            },
+            {
+              label: "Bà Rịa–Vũng Tàu",
+              value: "bà-rịa–vũng-tàu:43",
+            },
+            {
+              label: "Bình Dương",
+              value: "bình-dương:57",
+            },
+            {
+              label: "Bình Phước",
+              value: "bình-phước:58",
+            },
+            {
+              label: "Bình Thuận",
+              value: "bình-thuận:40",
+            },
+            {
+              label: "Bình Định",
+              value: "bình-định:31",
+            },
+            {
+              label: "Bạc Liêu",
+              value: "bạc-liêu:55",
+            },
+            {
+              label: "Bắc Giang",
+              value: "bắc-giang:54",
+            },
+            {
+              label: "Bắc Kạn",
+              value: "bắc-kạn:53",
+            },
+            {
+              label: "Bắc Ninh",
+              value: "bắc-ninh:56",
+            },
+            {
+              label: "Bến Tre",
+              value: "bến-tre:50",
+            },
+            {
+              label: "Cao Bằng",
+              value: "cao-bằng:04",
+            },
+            {
+              label: "Cà Mau",
+              value: "cà-mau:59",
+            },
+            {
+              label: "Cần Thơ",
+              value: "cần-thơ:CT",
+            },
+            {
+              label: "Gia Lai",
+              value: "gia-lai:30",
+            },
+            {
+              label: "Hà Giang",
+              value: "hà-giang:03",
+            },
+            {
+              label: "Hà Nam",
+              value: "hà-nam:63",
+            },
+            {
+              label: "Hà Nội",
+              value: "hà-nội:HN",
+            },
+            {
+              label: "Hà Tây",
+              value: "hà-tây:15",
+            },
+            {
+              label: "Hà Tĩnh",
+              value: "hà-tĩnh:23",
+            },
+            {
+              label: "Hòa Bình",
+              value: "hòa-bình:14",
+            },
+            {
+              label: "Hưng Yên",
+              value: "hưng-yên:66",
+            },
+            {
+              label: "Hải Dương",
+              value: "hải-dương:61",
+            },
+            {
+              label: "Hải Phòng",
+              value: "hải-phòng:HP",
+            },
+            {
+              label: "Hậu Giang",
+              value: "hậu-giang:73",
+            },
+            {
+              label: "Hồ Chí Minh",
+              value: "hồ-chí-minh:SG",
+            },
+            {
+              label: "Khánh Hòa",
+              value: "khánh-hòa:34",
+            },
+            {
+              label: "Kiên Giang",
+              value: "kiên-giang:47",
+            },
+            {
+              label: "Kon Tum",
+              value: "kon-tum:28",
+            },
+            {
+              label: "Lai Châu",
+              value: "lai-châu:01",
+            },
+            {
+              label: "Long An",
+              value: "long-an:41",
+            },
+            {
+              label: "Lào Cai",
+              value: "lào-cai:02",
+            },
+            {
+              label: "Lâm Đồng",
+              value: "lâm-đồng:35",
+            },
+            {
+              label: "Lạng Sơn",
+              value: "lạng-sơn:09",
+            },
+            {
+              label: "Nam Định",
+              value: "nam-định:67",
+            },
+            {
+              label: "Nghệ An",
+              value: "nghệ-an:22",
+            },
+            {
+              label: "Ninh Bình",
+              value: "ninh-bình:18",
+            },
+            {
+              label: "Ninh Thuận",
+              value: "ninh-thuận:36",
+            },
+            {
+              label: "Phú Thọ",
+              value: "phú-thọ:68",
+            },
+            {
+              label: "Phú Yên",
+              value: "phú-yên:32",
+            },
+            {
+              label: "Quảng Bình",
+              value: "quảng-bình:24",
+            },
+            {
+              label: "Quảng Nam",
+              value: "quảng-nam:27",
+            },
+            {
+              label: "Quảng Ngãi",
+              value: "quảng-ngãi:29",
+            },
+            {
+              label: "Quảng Ninh",
+              value: "quảng-ninh:13",
+            },
+            {
+              label: "Quảng Trị",
+              value: "quảng-trị:25",
+            },
+            {
+              label: "Sóc Trăng",
+              value: "sóc-trăng:52",
+            },
+            {
+              label: "Sơn La",
+              value: "sơn-la:05",
+            },
+            {
+              label: "Thanh Hóa",
+              value: "thanh-hóa:21",
+            },
+            {
+              label: "Thái Bình",
+              value: "thái-bình:20",
+            },
+            {
+              label: "Thái Nguyên",
+              value: "thái-nguyên:69",
+            },
+            {
+              label: "Thừa Thiên–Huế",
+              value: "thừa-thiên–huế:26",
+            },
+            {
+              label: "Tiền Giang",
+              value: "tiền-giang:46",
+            },
+            {
+              label: "Trà Vinh",
+              value: "trà-vinh:51",
+            },
+            {
+              label: "Tuyên Quang",
+              value: "tuyên-quang:07",
+            },
+            {
+              label: "Tây Ninh",
+              value: "tây-ninh:37",
+            },
+            {
+              label: "Vĩnh Long",
+              value: "vĩnh-long:49",
+            },
+            {
+              label: "Vĩnh Phúc",
+              value: "vĩnh-phúc:70",
+            },
+            {
+              label: "Yên Bái",
+              value: "yên-bái:06",
+            },
+            {
+              label: "Điện Biên",
+              value: "điện-biên:71",
+            },
+            {
+              label: "Đà Nẵng",
+              value: "đà-nẵng:DN",
+            },
+            {
+              label: "Đắk Lắk",
+              value: "đắk-lắk:33",
+            },
+            {
+              label: "Đắk Nông",
+              value: "đắk-nông:72",
+            },
+            {
+              label: "Đồng Nai",
+              value: "đồng-nai:39",
+            },
+            {
+              label: "Đồng Tháp",
+              value: "đồng-tháp:45",
+            },
+          ],
+        },
+        {
+          label: "Yemen",
+          value: "yemen",
+          code: "YE",
+          states: [
+            {
+              label: "'Adan",
+              value: "'adan:AD",
+            },
+            {
+              label: "'Amrān",
+              value: "'amrān:AM",
+            },
+            {
+              label: "Abyān",
+              value: "abyān:AB",
+            },
+            {
+              label: "Al Bayḑā'",
+              value: "al-bayḑā':BA",
+            },
+            {
+              label: "Al Jawf",
+              value: "al-jawf:JA",
+            },
+            {
+              label: "Al Mahrah",
+              value: "al-mahrah:MR",
+            },
+            {
+              label: "Al Maḩwīt",
+              value: "al-maḩwīt:MW",
+            },
+            {
+              label: "Al Ḩudaydah",
+              value: "al-ḩudaydah:HU",
+            },
+            {
+              label: "Aḑ Ḑāli'",
+              value: "aḑ-ḑāli':DA",
+            },
+            {
+              label: "Dhamār",
+              value: "dhamār:DH",
+            },
+            {
+              label: "Ibb",
+              value: "ibb:IB",
+            },
+            {
+              label: "Laḩij",
+              value: "laḩij:LA",
+            },
+            {
+              label: "Ma'rib",
+              value: "ma'rib:MA",
+            },
+            {
+              label: "Raymah",
+              value: "raymah:RA",
+            },
+            {
+              label: "Shabwah",
+              value: "shabwah:SH",
+            },
+            {
+              label: "Tā‘izz",
+              value: "tā‘izz:TA",
+            },
+            {
+              label: "Şan‘ā'",
+              value: "şan‘ā':SA",
+            },
+            {
+              label: "Şan‘ā'",
+              value: "şan‘ā':SN",
+            },
+            {
+              label: "Şā‘dah",
+              value: "şā‘dah:SD",
+            },
+            {
+              label: "Ḩajjah",
+              value: "ḩajjah:HJ",
+            },
+            {
+              label: "Ḩaḑramawt",
+              value: "ḩaḑramawt:HD",
+            },
+          ],
+        },
+      ],
+    },
+    {
+      label: "Europe",
+      value: "europe",
+      countries: [
+        {
+          label: "Åland Islands",
+          value: "åland-islands",
+          code: "AX",
+          states: [],
+        },
+        {
+          label: "Albania",
+          value: "albania",
+          code: "AL",
+          states: [
+            {
+              label: "Berat",
+              value: "berat:01",
+            },
+            {
+              label: "Dibër",
+              value: "dibër:09",
+            },
+            {
+              label: "Durrës",
+              value: "durrës:02",
+            },
+            {
+              label: "Elbasan",
+              value: "elbasan:03",
+            },
+            {
+              label: "Fier",
+              value: "fier:04",
+            },
+            {
+              label: "Gjirokastër",
+              value: "gjirokastër:05",
+            },
+            {
+              label: "Korçë",
+              value: "korçë:06",
+            },
+            {
+              label: "Kukës",
+              value: "kukës:07",
+            },
+            {
+              label: "Lezhë",
+              value: "lezhë:08",
+            },
+            {
+              label: "Shkodër",
+              value: "shkodër:10",
+            },
+            {
+              label: "Tiranë",
+              value: "tiranë:11",
+            },
+            {
+              label: "Vlorë",
+              value: "vlorë:12",
+            },
+          ],
+        },
+        {
+          label: "Andorra",
+          value: "andorra",
+          code: "AD",
+          states: [
+            {
+              label: "Andorra la Vella",
+              value: "andorra-la-vella:07",
+            },
+            {
+              label: "Canillo",
+              value: "canillo:02",
+            },
+            {
+              label: "Encamp",
+              value: "encamp:03",
+            },
+            {
+              label: "Escaldes-Engordany",
+              value: "escaldes-engordany:08",
+            },
+            {
+              label: "La Massana",
+              value: "la-massana:04",
+            },
+            {
+              label: "Ordino",
+              value: "ordino:05",
+            },
+            {
+              label: "Sant Julià de Lòria",
+              value: "sant-julià-de-lòria:06",
+            },
+          ],
+        },
+        {
+          label: "Austria",
+          value: "austria",
+          code: "AT",
+          states: [
+            {
+              label: "Burgenland",
+              value: "burgenland:B",
+            },
+            {
+              label: "Kärnten",
+              value: "kärnten:K",
+            },
+            {
+              label: "Niederösterreich",
+              value: "niederösterreich:NÖ",
+            },
+            {
+              label: "Oberösterreich",
+              value: "oberösterreich:OÖ",
+            },
+            {
+              label: "Salzburg",
+              value: "salzburg:S",
+            },
+            {
+              label: "Steiermark",
+              value: "steiermark:ST",
+            },
+            {
+              label: "Tirol",
+              value: "tirol:T",
+            },
+            {
+              label: "Vorarlberg",
+              value: "vorarlberg:V",
+            },
+            {
+              label: "Wien",
+              value: "wien:W",
+            },
+          ],
+        },
+        {
+          label: "Belarus",
+          value: "belarus",
+          code: "BY",
+          states: [
+            {
+              label: "Brestskaya voblasts'",
+              value: "brestskaya-voblasts':BR",
+            },
+            {
+              label: "Homyel'skaya voblasts'",
+              value: "homyel'skaya-voblasts':HO",
+            },
+            {
+              label: "Horad Minsk",
+              value: "horad-minsk:HM",
+            },
+            {
+              label: "Hrodzenskaya voblasts'",
+              value: "hrodzenskaya-voblasts':HR",
+            },
+            {
+              label: "Mahilyowskaya voblasts'",
+              value: "mahilyowskaya-voblasts':MA",
+            },
+            {
+              label: "Minskaya voblasts'",
+              value: "minskaya-voblasts':MI",
+            },
+            {
+              label: "Vitsyebskaya voblasts'",
+              value: "vitsyebskaya-voblasts':VI",
+            },
+          ],
+        },
+        {
+          label: "Belgium",
+          value: "belgium",
+          code: "BE",
+          states: [
+            {
+              label: "Brussels Hoofdstedelijk Gewest",
+              value: "brussels-hoofdstedelijk-gewest:BRU",
+            },
+            {
+              label: "Région Wallonne",
+              value: "région-wallonne:WAL",
+            },
+            {
+              label: "Vlaams Gewest",
+              value: "vlaams-gewest:VLG",
+            },
+          ],
+        },
+        {
+          label: "Bosnia and Herzegovina",
+          value: "bosnia-and-herzegovina",
+          code: "BA",
+          states: [
+            {
+              label: "Brčko distrikt",
+              value: "brčko-distrikt:BRC",
+            },
+            {
+              label: "Federacija Bosna i Hercegovina",
+              value: "federacija-bosna-i-hercegovina:BIH",
+            },
+            {
+              label: "Republika Srpska",
+              value: "republika-srpska:SRP",
+            },
+          ],
+        },
+        {
+          label: "Bulgaria",
+          value: "bulgaria",
+          code: "BG",
+          states: [
+            {
+              label: "Blagoevgrad",
+              value: "blagoevgrad:01",
+            },
+            {
+              label: "Burgas",
+              value: "burgas:02",
+            },
+            {
+              label: "Dobrich",
+              value: "dobrich:08",
+            },
+            {
+              label: "Gabrovo",
+              value: "gabrovo:07",
+            },
+            {
+              label: "Haskovo",
+              value: "haskovo:26",
+            },
+            {
+              label: "Kardzhali",
+              value: "kardzhali:09",
+            },
+            {
+              label: "Kyustendil",
+              value: "kyustendil:10",
+            },
+            {
+              label: "Lovech",
+              value: "lovech:11",
+            },
+            {
+              label: "Montana",
+              value: "montana:12",
+            },
+            {
+              label: "Pazardzhik",
+              value: "pazardzhik:13",
+            },
+            {
+              label: "Pernik",
+              value: "pernik:14",
+            },
+            {
+              label: "Pleven",
+              value: "pleven:15",
+            },
+            {
+              label: "Plovdiv",
+              value: "plovdiv:16",
+            },
+            {
+              label: "Razgrad",
+              value: "razgrad:17",
+            },
+            {
+              label: "Ruse",
+              value: "ruse:18",
+            },
+            {
+              label: "Shumen",
+              value: "shumen:27",
+            },
+            {
+              label: "Silistra",
+              value: "silistra:19",
+            },
+            {
+              label: "Sliven",
+              value: "sliven:20",
+            },
+            {
+              label: "Smolyan",
+              value: "smolyan:21",
+            },
+            {
+              label: "Sofia",
+              value: "sofia:23",
+            },
+            {
+              label: "Sofia-Grad",
+              value: "sofia-grad:22",
+            },
+            {
+              label: "Stara Zagora",
+              value: "stara-zagora:24",
+            },
+            {
+              label: "Targovishte",
+              value: "targovishte:25",
+            },
+            {
+              label: "Varna",
+              value: "varna:03",
+            },
+            {
+              label: "Veliko Tarnovo",
+              value: "veliko-tarnovo:04",
+            },
+            {
+              label: "Vidin",
+              value: "vidin:05",
+            },
+            {
+              label: "Vratsa",
+              value: "vratsa:06",
+            },
+            {
+              label: "Yambol",
+              value: "yambol:28",
+            },
+          ],
+        },
+        {
+          label: "Croatia",
+          value: "croatia",
+          code: "HR",
+          states: [
+            {
+              label: "Bjelovarsko-bilogorska županija",
+              value: "bjelovarsko-bilogorska-županija:07",
+            },
+            {
+              label: "Brodsko-posavska županija",
+              value: "brodsko-posavska-županija:12",
+            },
+            {
+              label: "Dubrovačko-neretvanska županija",
+              value: "dubrovačko-neretvanska-županija:19",
+            },
+            {
+              label: "Grad Zagreb",
+              value: "grad-zagreb:21",
+            },
+            {
+              label: "Istarska županija",
+              value: "istarska-županija:18",
+            },
+            {
+              label: "Karlovačka županija",
+              value: "karlovačka-županija:04",
+            },
+            {
+              label: "Koprivničko-križevačka županija",
+              value: "koprivničko-križevačka-županija:06",
+            },
+            {
+              label: "Krapinsko-zagorska županija",
+              value: "krapinsko-zagorska-županija:02",
+            },
+            {
+              label: "Ličko-senjska županija",
+              value: "ličko-senjska-županija:09",
+            },
+            {
+              label: "Međimurska županija",
+              value: "međimurska-županija:20",
+            },
+            {
+              label: "Osječko-baranjska županija",
+              value: "osječko-baranjska-županija:14",
+            },
+            {
+              label: "Požeško-slavonska županija",
+              value: "požeško-slavonska-županija:11",
+            },
+            {
+              label: "Primorsko-goranska županija",
+              value: "primorsko-goranska-županija:08",
+            },
+            {
+              label: "Sisačko-moslavačka županija",
+              value: "sisačko-moslavačka-županija:03",
+            },
+            {
+              label: "Splitsko-dalmatinska županija",
+              value: "splitsko-dalmatinska-županija:17",
+            },
+            {
+              label: "Varaždinska županija",
+              value: "varaždinska-županija:05",
+            },
+            {
+              label: "Virovitičko-podravska županija",
+              value: "virovitičko-podravska-županija:10",
+            },
+            {
+              label: "Vukovarsko-srijemska županija",
+              value: "vukovarsko-srijemska-županija:16",
+            },
+            {
+              label: "Zadarska županija",
+              value: "zadarska-županija:13",
+            },
+            {
+              label: "Zagrebačka županija",
+              value: "zagrebačka-županija:01",
+            },
+            {
+              label: "Šibensko-kninska županija",
+              value: "šibensko-kninska-županija:15",
+            },
+          ],
+        },
+        {
+          label: "Cyprus",
+          value: "cyprus",
+          code: "CY",
+          states: [
+            {
+              label: "Ammochostos",
+              value: "ammochostos:04",
+            },
+            {
+              label: "Keryneia",
+              value: "keryneia:06",
+            },
+            {
+              label: "Larnaka",
+              value: "larnaka:03",
+            },
+            {
+              label: "Lefkosia",
+              value: "lefkosia:01",
+            },
+            {
+              label: "Lemesos",
+              value: "lemesos:02",
+            },
+            {
+              label: "Pafos",
+              value: "pafos:05",
+            },
+          ],
+        },
+        {
+          label: "Czech Republic",
+          value: "czech-republic",
+          code: "CZ",
+          states: [
+            {
+              label: "Jihomoravský kraj",
+              value: "jihomoravský-kraj:JM",
+            },
+            {
+              label: "Jihočeský kraj",
+              value: "jihočeský-kraj:JC",
+            },
+            {
+              label: "Karlovarský kraj",
+              value: "karlovarský-kraj:KA",
+            },
+            {
+              label: "Královéhradecký kraj",
+              value: "královéhradecký-kraj:KR",
+            },
+            {
+              label: "Liberecký kraj",
+              value: "liberecký-kraj:LI",
+            },
+            {
+              label: "Moravskoslezský kraj",
+              value: "moravskoslezský-kraj:MO",
+            },
+            {
+              label: "Olomoucký kraj",
+              value: "olomoucký-kraj:OL",
+            },
+            {
+              label: "Pardubický kraj",
+              value: "pardubický-kraj:PA",
+            },
+            {
+              label: "Plzeňský kraj",
+              value: "plzeňský-kraj:PL",
+            },
+            {
+              label: "Praha, hlavní město",
+              value: "praha,-hlavní-město:PR",
+            },
+            {
+              label: "Středočeský kraj",
+              value: "středočeský-kraj:ST",
+            },
+            {
+              label: "Vysočina",
+              value: "vysočina:VY",
+            },
+            {
+              label: "Zlínský kraj",
+              value: "zlínský-kraj:ZL",
+            },
+            {
+              label: "Ústecký kraj",
+              value: "ústecký-kraj:US",
+            },
+          ],
+        },
+        {
+          label: "Denmark",
+          value: "denmark",
+          code: "DK",
+          states: [
+            {
+              label: "Hovedstaden",
+              value: "hovedstaden:84",
+            },
+            {
+              label: "Midtjylland",
+              value: "midtjylland:82",
+            },
+            {
+              label: "Nordjylland",
+              value: "nordjylland:81",
+            },
+            {
+              label: "Sjælland",
+              value: "sjælland:85",
+            },
+            {
+              label: "Syddanmark",
+              value: "syddanmark:83",
+            },
+          ],
+        },
+        {
+          label: "Estonia",
+          value: "estonia",
+          code: "EE",
+          states: [
+            {
+              label: "Harjumaa",
+              value: "harjumaa:37",
+            },
+            {
+              label: "Hiiumaa",
+              value: "hiiumaa:39",
+            },
+            {
+              label: "Ida-Virumaa",
+              value: "ida-virumaa:44",
+            },
+            {
+              label: "Järvamaa",
+              value: "järvamaa:51",
+            },
+            {
+              label: "Jõgevamaa",
+              value: "jõgevamaa:49",
+            },
+            {
+              label: "Lääne-Virumaa",
+              value: "lääne-virumaa:59",
+            },
+            {
+              label: "Läänemaa",
+              value: "läänemaa:57",
+            },
+            {
+              label: "Pärnumaa",
+              value: "pärnumaa:67",
+            },
+            {
+              label: "Põlvamaa",
+              value: "põlvamaa:65",
+            },
+            {
+              label: "Raplamaa",
+              value: "raplamaa:70",
+            },
+            {
+              label: "Saaremaa",
+              value: "saaremaa:74",
+            },
+            {
+              label: "Tartumaa",
+              value: "tartumaa:78",
+            },
+            {
+              label: "Valgamaa",
+              value: "valgamaa:82",
+            },
+            {
+              label: "Viljandimaa",
+              value: "viljandimaa:84",
+            },
+            {
+              label: "Võrumaa",
+              value: "võrumaa:86",
+            },
+          ],
+        },
+        {
+          label: "Faroe Islands",
+          value: "faroe-islands",
+          code: "FO",
+          states: [],
+        },
+        {
+          label: "Finland",
+          value: "finland",
+          code: "FI",
+          states: [
+            {
+              label: "Ahvenanmaan maakunta",
+              value: "ahvenanmaan-maakunta:01",
+            },
+            {
+              label: "Etelä-Karjala",
+              value: "etelä-karjala:02",
+            },
+            {
+              label: "Etelä-Pohjanmaa",
+              value: "etelä-pohjanmaa:03",
+            },
+            {
+              label: "Etelä-Savo",
+              value: "etelä-savo:04",
+            },
+            {
+              label: "Kainuu",
+              value: "kainuu:05",
+            },
+            {
+              label: "Kanta-Häme",
+              value: "kanta-häme:06",
+            },
+            {
+              label: "Keski-Pohjanmaa",
+              value: "keski-pohjanmaa:07",
+            },
+            {
+              label: "Keski-Suomi",
+              value: "keski-suomi:08",
+            },
+            {
+              label: "Kymenlaakso",
+              value: "kymenlaakso:09",
+            },
+            {
+              label: "Lappi",
+              value: "lappi:10",
+            },
+            {
+              label: "Pirkanmaa",
+              value: "pirkanmaa:11",
+            },
+            {
+              label: "Pohjanmaa",
+              value: "pohjanmaa:12",
+            },
+            {
+              label: "Pohjois-Karjala",
+              value: "pohjois-karjala:13",
+            },
+            {
+              label: "Pohjois-Pohjanmaa",
+              value: "pohjois-pohjanmaa:14",
+            },
+            {
+              label: "Pohjois-Savo",
+              value: "pohjois-savo:15",
+            },
+            {
+              label: "Päijät-Häme",
+              value: "päijät-häme:16",
+            },
+            {
+              label: "Satakunta",
+              value: "satakunta:17",
+            },
+            {
+              label: "Uusimaa",
+              value: "uusimaa:18",
+            },
+            {
+              label: "Varsinais-Suomi",
+              value: "varsinais-suomi:19",
+            },
+          ],
+        },
+        {
+          label: "France",
+          value: "france",
+          code: "FR",
+          states: [
+            {
+              label: "Alsace",
+              value: "alsace:A",
+            },
+            {
+              label: "Aquitaine",
+              value: "aquitaine:B",
+            },
+            {
+              label: "Auvergne",
+              value: "auvergne:C",
+            },
+            {
+              label: "Brittany",
+              value: "brittany:E",
+            },
+            {
+              label: "Burgundy",
+              value: "burgundy:D",
+            },
+            {
+              label: "Centre-Val de Loire",
+              value: "centre-val-de-loire:F",
+            },
+            {
+              label: "Champagne-Ardenne",
+              value: "champagne-ardenne:G",
+            },
+            {
+              label: "Corsica",
+              value: "corsica:H",
+            },
+            {
+              label: "Franche-Comté",
+              value: "franche-comté:I",
+            },
+            {
+              label: "Languedoc-Roussillon",
+              value: "languedoc-roussillon:K",
+            },
+            {
+              label: "Limousin",
+              value: "limousin:L",
+            },
+            {
+              label: "Lorraine",
+              value: "lorraine:M",
+            },
+            {
+              label: "Lower Normandy",
+              value: "lower-normandy:P",
+            },
+            {
+              label: "Midi-Pyrénées",
+              value: "midi-pyrénées:N",
+            },
+            {
+              label: "Nord-Pas-de-Calais",
+              value: "nord-pas-de-calais:O",
+            },
+            {
+              label: "Pays de la Loire",
+              value: "pays-de-la-loire:R",
+            },
+            {
+              label: "Picardy",
+              value: "picardy:S",
+            },
+            {
+              label: "Poitou-Charentes",
+              value: "poitou-charentes:T",
+            },
+            {
+              label: "Provence-Alpes-Côte d'Azur",
+              value: "provence-alpes-côte-d'azur:U",
+            },
+            {
+              label: "Rhône-Alpes",
+              value: "rhône-alpes:V",
+            },
+            {
+              label: "Upper Normandy",
+              value: "upper-normandy:Q",
+            },
+            {
+              label: "Île-de-France",
+              value: "île-de-france:J",
+            },
+          ],
+        },
+        {
+          label: "Germany",
+          value: "germany",
+          code: "DE",
+          states: [
+            {
+              label: "Baden-Württemberg",
+              value: "baden-württemberg:BW",
+            },
+            {
+              label: "Bayern",
+              value: "bayern:BY",
+            },
+            {
+              label: "Berlin",
+              value: "berlin:BE",
+            },
+            {
+              label: "Brandenburg",
+              value: "brandenburg:BB",
+            },
+            {
+              label: "Bremen",
+              value: "bremen:HB",
+            },
+            {
+              label: "Hamburg",
+              value: "hamburg:HH",
+            },
+            {
+              label: "Hessen",
+              value: "hessen:HE",
+            },
+            {
+              label: "Mecklenburg-Vorpommern",
+              value: "mecklenburg-vorpommern:MV",
+            },
+            {
+              label: "Niedersachsen",
+              value: "niedersachsen:NI",
+            },
+            {
+              label: "Nordrhein-Westfalen",
+              value: "nordrhein-westfalen:NW",
+            },
+            {
+              label: "Rheinland-Pfalz",
+              value: "rheinland-pfalz:RP",
+            },
+            {
+              label: "Saarland",
+              value: "saarland:SL",
+            },
+            {
+              label: "Sachsen",
+              value: "sachsen:SN",
+            },
+            {
+              label: "Sachsen-Anhalt",
+              value: "sachsen-anhalt:ST",
+            },
+            {
+              label: "Schleswig-Holstein",
+              value: "schleswig-holstein:SH",
+            },
+            {
+              label: "Thüringen",
+              value: "thüringen:TH",
+            },
+          ],
+        },
+        {
+          label: "Gibraltar",
+          value: "gibraltar",
+          code: "GI",
+          states: [],
+        },
+        {
+          label: "Greece",
+          value: "greece",
+          code: "GR",
+          states: [
+            {
+              label: "Anatoliki Makedonia kai Thraki",
+              value: "anatoliki-makedonia-kai-thraki:A",
+            },
+            {
+              label: "Attiki",
+              value: "attiki:I",
+            },
+            {
+              label: "Dytiki Ellada",
+              value: "dytiki-ellada:G",
+            },
+            {
+              label: "Dytiki Makedonia",
+              value: "dytiki-makedonia:C",
+            },
+            {
+              label: "Ionia Nisia",
+              value: "ionia-nisia:F",
+            },
+            {
+              label: "Ipeiros",
+              value: "ipeiros:D",
+            },
+            {
+              label: "Kentriki Makedonia",
+              value: "kentriki-makedonia:B",
+            },
+            {
+              label: "Kriti",
+              value: "kriti:M",
+            },
+            {
+              label: "Notio Aigaio",
+              value: "notio-aigaio:L",
+            },
+            {
+              label: "Peloponnisos",
+              value: "peloponnisos:J",
+            },
+            {
+              label: "Sterea Ellada",
+              value: "sterea-ellada:H",
+            },
+            {
+              label: "Thessalia",
+              value: "thessalia:E",
+            },
+            {
+              label: "Voreio Aigaio",
+              value: "voreio-aigaio:K",
+            },
+          ],
+        },
+        {
+          label: "Guernsey",
+          value: "guernsey",
+          code: "GG",
+          states: [],
+        },
+        {
+          label: "Holy See",
+          value: "holy-see",
+          code: "VA",
+          states: [],
+        },
+        {
+          label: "Hungary",
+          value: "hungary",
+          code: "HU",
+          states: [
+            {
+              label: "Baranya",
+              value: "baranya:BA",
+            },
+            {
+              label: "Borsod-Abaúj-Zemplén",
+              value: "borsod-abaúj-zemplén:BZ",
+            },
+            {
+              label: "Budapest",
+              value: "budapest:BU",
+            },
+            {
+              label: "Bács-Kiskun",
+              value: "bács-kiskun:BK",
+            },
+            {
+              label: "Békés",
+              value: "békés:BE",
+            },
+            {
+              label: "Békéscsaba",
+              value: "békéscsaba:BC",
+            },
+            {
+              label: "Csongrád",
+              value: "csongrád:CS",
+            },
+            {
+              label: "Debrecen",
+              value: "debrecen:DE",
+            },
+            {
+              label: "Dunaújváros",
+              value: "dunaújváros:DU",
+            },
+            {
+              label: "Eger",
+              value: "eger:EG",
+            },
+            {
+              label: "Fejér",
+              value: "fejér:FE",
+            },
+            {
+              label: "Győr",
+              value: "győr:GY",
+            },
+            {
+              label: "Győr-Moson-Sopron",
+              value: "győr-moson-sopron:GS",
+            },
+            {
+              label: "Hajdú-Bihar",
+              value: "hajdú-bihar:HB",
+            },
+            {
+              label: "Heves",
+              value: "heves:HE",
+            },
+            {
+              label: "Hódmezővásárhely",
+              value: "hódmezővásárhely:HV",
+            },
+            {
+              label: "Jász-Nagykun-Szolnok",
+              value: "jász-nagykun-szolnok:JN",
+            },
+            {
+              label: "Kaposvár",
+              value: "kaposvár:KV",
+            },
+            {
+              label: "Kecskemét",
+              value: "kecskemét:KM",
+            },
+            {
+              label: "Komárom-Esztergom",
+              value: "komárom-esztergom:KE",
+            },
+            {
+              label: "Miskolc",
+              value: "miskolc:MI",
+            },
+            {
+              label: "Nagykanizsa",
+              value: "nagykanizsa:NK",
+            },
+            {
+              label: "Nyíregyháza",
+              value: "nyíregyháza:NY",
+            },
+            {
+              label: "Nógrád",
+              value: "nógrád:NO",
+            },
+            {
+              label: "Pest",
+              value: "pest:PE",
+            },
+            {
+              label: "Pécs",
+              value: "pécs:PS",
+            },
+            {
+              label: "Salgótarján",
+              value: "salgótarján:ST",
+            },
+            {
+              label: "Somogy",
+              value: "somogy:SO",
+            },
+            {
+              label: "Sopron",
+              value: "sopron:SN",
+            },
+            {
+              label: "Szabolcs-Szatmár-Bereg",
+              value: "szabolcs-szatmár-bereg:SZ",
+            },
+            {
+              label: "Szeged",
+              value: "szeged:SD",
+            },
+            {
+              label: "Szekszárd",
+              value: "szekszárd:SS",
+            },
+            {
+              label: "Szolnok",
+              value: "szolnok:SK",
+            },
+            {
+              label: "Szombathely",
+              value: "szombathely:SH",
+            },
+            {
+              label: "Székesfehérvár",
+              value: "székesfehérvár:SF",
+            },
+            {
+              label: "Tatabánya",
+              value: "tatabánya:TB",
+            },
+            {
+              label: "Tolna",
+              value: "tolna:TO",
+            },
+            {
+              label: "Vas",
+              value: "vas:VA",
+            },
+            {
+              label: "Veszprém",
+              value: "veszprém:VE",
+            },
+            {
+              label: "Veszprém",
+              value: "veszprém:VM",
+            },
+            {
+              label: "Zala",
+              value: "zala:ZA",
+            },
+            {
+              label: "Zalaegerszeg",
+              value: "zalaegerszeg:ZE",
+            },
+            {
+              label: "Érd",
+              value: "érd:ER",
+            },
+          ],
+        },
+        {
+          label: "Iceland",
+          value: "iceland",
+          code: "IS",
+          states: [
+            {
+              label: "Austurland",
+              value: "austurland:7",
+            },
+            {
+              label: "Höfuðborgarsvæði utan Reykjavíkur",
+              value: "höfuðborgarsvæði-utan-reykjavíkur:1",
+            },
+            {
+              label: "Norðurland eystra",
+              value: "norðurland-eystra:6",
+            },
+            {
+              label: "Norðurland vestra",
+              value: "norðurland-vestra:5",
+            },
+            {
+              label: "Reykjavík",
+              value: "reykjavík:0",
+            },
+            {
+              label: "Suðurland",
+              value: "suðurland:8",
+            },
+            {
+              label: "Suðurnes",
+              value: "suðurnes:2",
+            },
+            {
+              label: "Vestfirðir",
+              value: "vestfirðir:4",
+            },
+            {
+              label: "Vesturland",
+              value: "vesturland:3",
+            },
+          ],
+        },
+        {
+          label: "Republic of Ireland",
+          value: "republic-of-ireland",
+          code: "IE",
+          states: [
+            {
+              label: "Connaught",
+              value: "connaught:C",
+            },
+            {
+              label: "Leinster",
+              value: "leinster:L",
+            },
+            {
+              label: "Munster",
+              value: "munster:M",
+            },
+            {
+              label: "Ulster",
+              value: "ulster:U",
+            },
+          ],
+        },
+        {
+          label: "Isle of Man",
+          value: "isle-of-man",
+          code: "IM",
+          states: [],
+        },
+        {
+          label: "Italy",
+          value: "italy",
+          code: "IT",
+          states: [
+            {
+              label: "Abruzzo",
+              value: "abruzzo:65",
+            },
+            {
+              label: "Basilicata",
+              value: "basilicata:77",
+            },
+            {
+              label: "Calabria",
+              value: "calabria:78",
+            },
+            {
+              label: "Campania",
+              value: "campania:72",
+            },
+            {
+              label: "Emilia-Romagna",
+              value: "emilia-romagna:45",
+            },
+            {
+              label: "Friuli-Venezia Giulia",
+              value: "friuli-venezia-giulia:36",
+            },
+            {
+              label: "Lazio",
+              value: "lazio:62",
+            },
+            {
+              label: "Liguria",
+              value: "liguria:42",
+            },
+            {
+              label: "Lombardia",
+              value: "lombardia:25",
+            },
+            {
+              label: "Marche",
+              value: "marche:57",
+            },
+            {
+              label: "Molise",
+              value: "molise:67",
+            },
+            {
+              label: "Piemonte",
+              value: "piemonte:21",
+            },
+            {
+              label: "Puglia",
+              value: "puglia:75",
+            },
+            {
+              label: "Sardegna",
+              value: "sardegna:88",
+            },
+            {
+              label: "Sicilia",
+              value: "sicilia:82",
+            },
+            {
+              label: "Toscana",
+              value: "toscana:52",
+            },
+            {
+              label: "Trentino-Alto Adige",
+              value: "trentino-alto-adige:32",
+            },
+            {
+              label: "Umbria",
+              value: "umbria:55",
+            },
+            {
+              label: "Valle d'Aosta",
+              value: "valle-d'aosta:23",
+            },
+            {
+              label: "Veneto",
+              value: "veneto:34",
+            },
+          ],
+        },
+        {
+          label: "Jersey",
+          value: "jersey",
+          code: "JE",
+          states: [],
+        },
+        {
+          label: "Latvia",
+          value: "latvia",
+          code: "LV",
+          states: [
+            {
+              label: "Aglonas novads",
+              value: "aglonas-novads:001",
+            },
+            {
+              label: "Aizkraukles novads",
+              value: "aizkraukles-novads:002",
+            },
+            {
+              label: "Aizputes novads",
+              value: "aizputes-novads:003",
+            },
+            {
+              label: "Aknīstes novads",
+              value: "aknīstes-novads:004",
+            },
+            {
+              label: "Alojas novads",
+              value: "alojas-novads:005",
+            },
+            {
+              label: "Alsungas novads",
+              value: "alsungas-novads:006",
+            },
+            {
+              label: "Alūksnes novads",
+              value: "alūksnes-novads:007",
+            },
+            {
+              label: "Amatas novads",
+              value: "amatas-novads:008",
+            },
+            {
+              label: "Apes novads",
+              value: "apes-novads:009",
+            },
+            {
+              label: "Auces novads",
+              value: "auces-novads:010",
+            },
+            {
+              label: "Babītes novads",
+              value: "babītes-novads:012",
+            },
+            {
+              label: "Baldones novads",
+              value: "baldones-novads:013",
+            },
+            {
+              label: "Baltinavas novads",
+              value: "baltinavas-novads:014",
+            },
+            {
+              label: "Balvu novads",
+              value: "balvu-novads:015",
+            },
+            {
+              label: "Bauskas novads",
+              value: "bauskas-novads:016",
+            },
+            {
+              label: "Beverīnas novads",
+              value: "beverīnas-novads:017",
+            },
+            {
+              label: "Brocēnu novads",
+              value: "brocēnu-novads:018",
+            },
+            {
+              label: "Burtnieku novads",
+              value: "burtnieku-novads:019",
+            },
+            {
+              label: "Carnikavas novads",
+              value: "carnikavas-novads:020",
+            },
+            {
+              label: "Cesvaines novads",
+              value: "cesvaines-novads:021",
+            },
+            {
+              label: "Ciblas novads",
+              value: "ciblas-novads:023",
+            },
+            {
+              label: "Cēsu novads",
+              value: "cēsu-novads:022",
+            },
+            {
+              label: "Dagdas novads",
+              value: "dagdas-novads:024",
+            },
+            {
+              label: "Daugavpils",
+              value: "daugavpils:DGV",
+            },
+            {
+              label: "Daugavpils novads",
+              value: "daugavpils-novads:025",
+            },
+            {
+              label: "Dobeles novads",
+              value: "dobeles-novads:026",
+            },
+            {
+              label: "Dundagas novads",
+              value: "dundagas-novads:027",
+            },
+            {
+              label: "Durbes novads",
+              value: "durbes-novads:028",
+            },
+            {
+              label: "Engures novads",
+              value: "engures-novads:029",
+            },
+            {
+              label: "Garkalnes novads",
+              value: "garkalnes-novads:031",
+            },
+            {
+              label: "Grobiņas novads",
+              value: "grobiņas-novads:032",
+            },
+            {
+              label: "Gulbenes novads",
+              value: "gulbenes-novads:033",
+            },
+            {
+              label: "Iecavas novads",
+              value: "iecavas-novads:034",
+            },
+            {
+              label: "Ikšķiles novads",
+              value: "ikšķiles-novads:035",
+            },
+            {
+              label: "Ilūkstes novads",
+              value: "ilūkstes-novads:036",
+            },
+            {
+              label: "Inčukalna novads",
+              value: "inčukalna-novads:037",
+            },
+            {
+              label: "Jaunjelgavas novads",
+              value: "jaunjelgavas-novads:038",
+            },
+            {
+              label: "Jaunpiebalgas novads",
+              value: "jaunpiebalgas-novads:039",
+            },
+            {
+              label: "Jaunpils novads",
+              value: "jaunpils-novads:040",
+            },
+            {
+              label: "Jelgava",
+              value: "jelgava:JEL",
+            },
+            {
+              label: "Jelgavas novads",
+              value: "jelgavas-novads:041",
+            },
+            {
+              label: "Jēkabpils",
+              value: "jēkabpils:JKB",
+            },
+            {
+              label: "Jēkabpils novads",
+              value: "jēkabpils-novads:042",
+            },
+            {
+              label: "Jūrmala",
+              value: "jūrmala:JUR",
+            },
+            {
+              label: "Kandavas novads",
+              value: "kandavas-novads:043",
+            },
+            {
+              label: "Kocēnu novads",
+              value: "kocēnu-novads:045",
+            },
+            {
+              label: "Kokneses novads",
+              value: "kokneses-novads:046",
+            },
+            {
+              label: "Krimuldas novads",
+              value: "krimuldas-novads:048",
+            },
+            {
+              label: "Krustpils novads",
+              value: "krustpils-novads:049",
+            },
+            {
+              label: "Krāslavas novads",
+              value: "krāslavas-novads:047",
+            },
+            {
+              label: "Kuldīgas novads",
+              value: "kuldīgas-novads:050",
+            },
+            {
+              label: "Kārsavas novads",
+              value: "kārsavas-novads:044",
+            },
+            {
+              label: "Lielvārdes novads",
+              value: "lielvārdes-novads:053",
+            },
+            {
+              label: "Liepāja",
+              value: "liepāja:LPX",
+            },
+            {
+              label: "Limbažu novads",
+              value: "limbažu-novads:054",
+            },
+            {
+              label: "Lubānas novads",
+              value: "lubānas-novads:057",
+            },
+            {
+              label: "Ludzas novads",
+              value: "ludzas-novads:058",
+            },
+            {
+              label: "Līgatnes novads",
+              value: "līgatnes-novads:055",
+            },
+            {
+              label: "Līvānu novads",
+              value: "līvānu-novads:056",
+            },
+            {
+              label: "Madonas novads",
+              value: "madonas-novads:059",
+            },
+            {
+              label: "Mazsalacas novads",
+              value: "mazsalacas-novads:060",
+            },
+            {
+              label: "Mālpils novads",
+              value: "mālpils-novads:061",
+            },
+            {
+              label: "Mārupes novads",
+              value: "mārupes-novads:062",
+            },
+            {
+              label: "Mērsraga novads",
+              value: "mērsraga-novads:063",
+            },
+            {
+              label: "Naukšēnu novads",
+              value: "naukšēnu-novads:064",
+            },
+            {
+              label: "Neretas novads",
+              value: "neretas-novads:065",
+            },
+            {
+              label: "Nīcas novads",
+              value: "nīcas-novads:066",
+            },
+            {
+              label: "Ogres novads",
+              value: "ogres-novads:067",
+            },
+            {
+              label: "Olaines novads",
+              value: "olaines-novads:068",
+            },
+            {
+              label: "Ozolnieku novads",
+              value: "ozolnieku-novads:069",
+            },
+            {
+              label: "Preiļu novads",
+              value: "preiļu-novads:073",
+            },
+            {
+              label: "Priekules novads",
+              value: "priekules-novads:074",
+            },
+            {
+              label: "Priekuļu novads",
+              value: "priekuļu-novads:075",
+            },
+            {
+              label: "Pārgaujas novads",
+              value: "pārgaujas-novads:070",
+            },
+            {
+              label: "Pāvilostas novads",
+              value: "pāvilostas-novads:071",
+            },
+            {
+              label: "Pļaviņu novads",
+              value: "pļaviņu-novads:072",
+            },
+            {
+              label: "Raunas novads",
+              value: "raunas-novads:076",
+            },
+            {
+              label: "Riebiņu novads",
+              value: "riebiņu-novads:078",
+            },
+            {
+              label: "Rojas novads",
+              value: "rojas-novads:079",
+            },
+            {
+              label: "Ropažu novads",
+              value: "ropažu-novads:080",
+            },
+            {
+              label: "Rucavas novads",
+              value: "rucavas-novads:081",
+            },
+            {
+              label: "Rugāju novads",
+              value: "rugāju-novads:082",
+            },
+            {
+              label: "Rundāles novads",
+              value: "rundāles-novads:083",
+            },
+            {
+              label: "Rēzekne",
+              value: "rēzekne:REZ",
+            },
+            {
+              label: "Rēzeknes novads",
+              value: "rēzeknes-novads:077",
+            },
+            {
+              label: "Rīga",
+              value: "rīga:RIX",
+            },
+            {
+              label: "Rūjienas novads",
+              value: "rūjienas-novads:084",
+            },
+            {
+              label: "Salacgrīvas novads",
+              value: "salacgrīvas-novads:086",
+            },
+            {
+              label: "Salas novads",
+              value: "salas-novads:085",
+            },
+            {
+              label: "Salaspils novads",
+              value: "salaspils-novads:087",
+            },
+            {
+              label: "Saldus novads",
+              value: "saldus-novads:088",
+            },
+            {
+              label: "Saulkrastu novads",
+              value: "saulkrastu-novads:089",
+            },
+            {
+              label: "Siguldas novads",
+              value: "siguldas-novads:091",
+            },
+            {
+              label: "Skrundas novads",
+              value: "skrundas-novads:093",
+            },
+            {
+              label: "Skrīveru novads",
+              value: "skrīveru-novads:092",
+            },
+            {
+              label: "Smiltenes novads",
+              value: "smiltenes-novads:094",
+            },
+            {
+              label: "Stopiņu novads",
+              value: "stopiņu-novads:095",
+            },
+            {
+              label: "Strenču novads",
+              value: "strenču-novads:096",
+            },
+            {
+              label: "Sējas novads",
+              value: "sējas-novads:090",
+            },
+            {
+              label: "Talsu novads",
+              value: "talsu-novads:097",
+            },
+            {
+              label: "Tukuma novads",
+              value: "tukuma-novads:099",
+            },
+            {
+              label: "Tērvetes novads",
+              value: "tērvetes-novads:098",
+            },
+            {
+              label: "Vaiņodes novads",
+              value: "vaiņodes-novads:100",
+            },
+            {
+              label: "Valkas novads",
+              value: "valkas-novads:101",
+            },
+            {
+              label: "Valmiera",
+              value: "valmiera:VMR",
+            },
+            {
+              label: "Varakļānu novads",
+              value: "varakļānu-novads:102",
+            },
+            {
+              label: "Vecpiebalgas novads",
+              value: "vecpiebalgas-novads:104",
+            },
+            {
+              label: "Vecumnieku novads",
+              value: "vecumnieku-novads:105",
+            },
+            {
+              label: "Ventspils",
+              value: "ventspils:VEN",
+            },
+            {
+              label: "Ventspils novads",
+              value: "ventspils-novads:106",
+            },
+            {
+              label: "Viesītes novads",
+              value: "viesītes-novads:107",
+            },
+            {
+              label: "Viļakas novads",
+              value: "viļakas-novads:108",
+            },
+            {
+              label: "Viļānu novads",
+              value: "viļānu-novads:109",
+            },
+            {
+              label: "Vārkavas novads",
+              value: "vārkavas-novads:103",
+            },
+            {
+              label: "Zilupes novads",
+              value: "zilupes-novads:110",
+            },
+            {
+              label: "Ādažu novads",
+              value: "ādažu-novads:011",
+            },
+            {
+              label: "Ērgļu novads",
+              value: "ērgļu-novads:030",
+            },
+            {
+              label: "Ķeguma novads",
+              value: "ķeguma-novads:051",
+            },
+            {
+              label: "Ķekavas novads",
+              value: "ķekavas-novads:052",
+            },
+          ],
+        },
+        {
+          label: "Liechtenstein",
+          value: "liechtenstein",
+          code: "LI",
+          states: [
+            {
+              label: "Balzers",
+              value: "balzers:01",
+            },
+            {
+              label: "Eschen",
+              value: "eschen:02",
+            },
+            {
+              label: "Gamprin",
+              value: "gamprin:03",
+            },
+            {
+              label: "Mauren",
+              value: "mauren:04",
+            },
+            {
+              label: "Planken",
+              value: "planken:05",
+            },
+            {
+              label: "Ruggell",
+              value: "ruggell:06",
+            },
+            {
+              label: "Schaan",
+              value: "schaan:07",
+            },
+            {
+              label: "Schellenberg",
+              value: "schellenberg:08",
+            },
+            {
+              label: "Triesen",
+              value: "triesen:09",
+            },
+            {
+              label: "Triesenberg",
+              value: "triesenberg:10",
+            },
+            {
+              label: "Vaduz",
+              value: "vaduz:11",
+            },
+          ],
+        },
+        {
+          label: "Lithuania",
+          value: "lithuania",
+          code: "LT",
+          states: [
+            {
+              label: "Alytaus Apskritis",
+              value: "alytaus-apskritis:AL",
+            },
+            {
+              label: "Kauno Apskritis",
+              value: "kauno-apskritis:KU",
+            },
+            {
+              label: "Klaipėdos Apskritis",
+              value: "klaipėdos-apskritis:KL",
+            },
+            {
+              label: "Marijampolės Apskritis",
+              value: "marijampolės-apskritis:MR",
+            },
+            {
+              label: "Panevėžio Apskritis",
+              value: "panevėžio-apskritis:PN",
+            },
+            {
+              label: "Tauragės Apskritis",
+              value: "tauragės-apskritis:TA",
+            },
+            {
+              label: "Telšių Apskritis",
+              value: "telšių-apskritis:TE",
+            },
+            {
+              label: "Utenos Apskritis",
+              value: "utenos-apskritis:UT",
+            },
+            {
+              label: "Vilniaus Apskritis",
+              value: "vilniaus-apskritis:VL",
+            },
+            {
+              label: "Šiaulių Apskritis",
+              value: "šiaulių-apskritis:SA",
+            },
+          ],
+        },
+        {
+          label: "Luxembourg",
+          value: "luxembourg",
+          code: "LU",
+          states: [
+            {
+              label: "Diekirch",
+              value: "diekirch:D",
+            },
+            {
+              label: "Grevenmacher",
+              value: "grevenmacher:G",
+            },
+            {
+              label: "Luxembourg",
+              value: "luxembourg:L",
+            },
+          ],
+        },
+        {
+          label: "Republic of Macedonia",
+          value: "republic-of-macedonia",
+          code: "MK",
+          states: [
+            {
+              label: "Aerodrom",
+              value: "aerodrom:01",
+            },
+            {
+              label: "Aračinovo",
+              value: "aračinovo:02",
+            },
+            {
+              label: "Berovo",
+              value: "berovo:03",
+            },
+            {
+              label: "Bitola",
+              value: "bitola:04",
+            },
+            {
+              label: "Bogdanci",
+              value: "bogdanci:05",
+            },
+            {
+              label: "Bogovinje",
+              value: "bogovinje:06",
+            },
+            {
+              label: "Bosilovo",
+              value: "bosilovo:07",
+            },
+            {
+              label: "Brvenica",
+              value: "brvenica:08",
+            },
+            {
+              label: "Butel",
+              value: "butel:09",
+            },
+            {
+              label: "Centar",
+              value: "centar:77",
+            },
+            {
+              label: "Centar Župa",
+              value: "centar-župa:78",
+            },
+            {
+              label: "Debar",
+              value: "debar:21",
+            },
+            {
+              label: "Debarca",
+              value: "debarca:22",
+            },
+            {
+              label: "Delčevo",
+              value: "delčevo:23",
+            },
+            {
+              label: "Demir Hisar",
+              value: "demir-hisar:25",
+            },
+            {
+              label: "Demir Kapija",
+              value: "demir-kapija:24",
+            },
+            {
+              label: "Dojran",
+              value: "dojran:26",
+            },
+            {
+              label: "Dolneni",
+              value: "dolneni:27",
+            },
+            {
+              label: "Drugovo",
+              value: "drugovo:28",
+            },
+            {
+              label: "Gazi Baba",
+              value: "gazi-baba:17",
+            },
+            {
+              label: "Gevgelija",
+              value: "gevgelija:18",
+            },
+            {
+              label: "Gjorče Petrov",
+              value: "gjorče-petrov:29",
+            },
+            {
+              label: "Gostivar",
+              value: "gostivar:19",
+            },
+            {
+              label: "Gradsko",
+              value: "gradsko:20",
+            },
+            {
+              label: "Ilinden",
+              value: "ilinden:34",
+            },
+            {
+              label: "Jegunovce",
+              value: "jegunovce:35",
+            },
+            {
+              label: "Karbinci",
+              value: "karbinci:37",
+            },
+            {
+              label: "Karpoš",
+              value: "karpoš:38",
+            },
+            {
+              label: "Kavadarci",
+              value: "kavadarci:36",
+            },
+            {
+              label: "Kisela Voda",
+              value: "kisela-voda:39",
+            },
+            {
+              label: "Kičevo",
+              value: "kičevo:40",
+            },
+            {
+              label: "Konče",
+              value: "konče:41",
+            },
+            {
+              label: "Kočani",
+              value: "kočani:42",
+            },
+            {
+              label: "Kratovo",
+              value: "kratovo:43",
+            },
+            {
+              label: "Kriva Palanka",
+              value: "kriva-palanka:44",
+            },
+            {
+              label: "Krivogaštani",
+              value: "krivogaštani:45",
+            },
+            {
+              label: "Kruševo",
+              value: "kruševo:46",
+            },
+            {
+              label: "Kumanovo",
+              value: "kumanovo:47",
+            },
+            {
+              label: "Lipkovo",
+              value: "lipkovo:48",
+            },
+            {
+              label: "Lozovo",
+              value: "lozovo:49",
+            },
+            {
+              label: "Makedonska Kamenica",
+              value: "makedonska-kamenica:51",
+            },
+            {
+              label: "Makedonski Brod",
+              value: "makedonski-brod:52",
+            },
+            {
+              label: "Mavrovo i Rostuša",
+              value: "mavrovo-i-rostuša:50",
+            },
+            {
+              label: "Mogila",
+              value: "mogila:53",
+            },
+            {
+              label: "Negotino",
+              value: "negotino:54",
+            },
+            {
+              label: "Novaci",
+              value: "novaci:55",
+            },
+            {
+              label: "Novo Selo",
+              value: "novo-selo:56",
+            },
+            {
+              label: "Ohrid",
+              value: "ohrid:58",
+            },
+            {
+              label: "Oslomej",
+              value: "oslomej:57",
+            },
+            {
+              label: "Pehčevo",
+              value: "pehčevo:60",
+            },
+            {
+              label: "Petrovec",
+              value: "petrovec:59",
+            },
+            {
+              label: "Plasnica",
+              value: "plasnica:61",
+            },
+            {
+              label: "Prilep",
+              value: "prilep:62",
+            },
+            {
+              label: "Probištip",
+              value: "probištip:63",
+            },
+            {
+              label: "Radoviš",
+              value: "radoviš:64",
+            },
+            {
+              label: "Rankovce",
+              value: "rankovce:65",
+            },
+            {
+              label: "Resen",
+              value: "resen:66",
+            },
+            {
+              label: "Rosoman",
+              value: "rosoman:67",
+            },
+            {
+              label: "Saraj",
+              value: "saraj:68",
+            },
+            {
+              label: "Sopište",
+              value: "sopište:70",
+            },
+            {
+              label: "Staro Nagoričane",
+              value: "staro-nagoričane:71",
+            },
+            {
+              label: "Struga",
+              value: "struga:72",
+            },
+            {
+              label: "Strumica",
+              value: "strumica:73",
+            },
+            {
+              label: "Studeničani",
+              value: "studeničani:74",
+            },
+            {
+              label: "Sveti Nikole",
+              value: "sveti-nikole:69",
+            },
+            {
+              label: "Tearce",
+              value: "tearce:75",
+            },
+            {
+              label: "Tetovo",
+              value: "tetovo:76",
+            },
+            {
+              label: "Valandovo",
+              value: "valandovo:10",
+            },
+            {
+              label: "Vasilevo",
+              value: "vasilevo:11",
+            },
+            {
+              label: "Veles",
+              value: "veles:13",
+            },
+            {
+              label: "Vevčani",
+              value: "vevčani:12",
+            },
+            {
+              label: "Vinica",
+              value: "vinica:14",
+            },
+            {
+              label: "Vraneštica",
+              value: "vraneštica:15",
+            },
+            {
+              label: "Vrapčište",
+              value: "vrapčište:16",
+            },
+            {
+              label: "Zajas",
+              value: "zajas:31",
+            },
+            {
+              label: "Zelenikovo",
+              value: "zelenikovo:32",
+            },
+            {
+              label: "Zrnovci",
+              value: "zrnovci:33",
+            },
+            {
+              label: "Čair",
+              value: "čair:79",
+            },
+            {
+              label: "Čaška",
+              value: "čaška:80",
+            },
+            {
+              label: "Češinovo-Obleševo",
+              value: "češinovo-obleševo:81",
+            },
+            {
+              label: "Čučer Sandevo",
+              value: "čučer-sandevo:82",
+            },
+            {
+              label: "Štip",
+              value: "štip:83",
+            },
+            {
+              label: "Šuto Orizari",
+              value: "šuto-orizari:84",
+            },
+            {
+              label: "Želino",
+              value: "želino:30",
+            },
+          ],
+        },
+        {
+          label: "Malta",
+          value: "malta",
+          code: "MT",
+          states: [
+            {
+              label: "Attard",
+              value: "attard:01",
+            },
+            {
+              label: "Balzan",
+              value: "balzan:02",
+            },
+            {
+              label: "Birgu",
+              value: "birgu:03",
+            },
+            {
+              label: "Birkirkara",
+              value: "birkirkara:04",
+            },
+            {
+              label: "Birżebbuġa",
+              value: "birżebbuġa:05",
+            },
+            {
+              label: "Bormla",
+              value: "bormla:06",
+            },
+            {
+              label: "Dingli",
+              value: "dingli:07",
+            },
+            {
+              label: "Fgura",
+              value: "fgura:08",
+            },
+            {
+              label: "Floriana",
+              value: "floriana:09",
+            },
+            {
+              label: "Fontana",
+              value: "fontana:10",
+            },
+            {
+              label: "Gudja",
+              value: "gudja:11",
+            },
+            {
+              label: "Għajnsielem",
+              value: "għajnsielem:13",
+            },
+            {
+              label: "Għarb",
+              value: "għarb:14",
+            },
+            {
+              label: "Għargħur",
+              value: "għargħur:15",
+            },
+            {
+              label: "Għasri",
+              value: "għasri:16",
+            },
+            {
+              label: "Għaxaq",
+              value: "għaxaq:17",
+            },
+            {
+              label: "Gżira",
+              value: "gżira:12",
+            },
+            {
+              label: "Iklin",
+              value: "iklin:19",
+            },
+            {
+              label: "Isla",
+              value: "isla:20",
+            },
+            {
+              label: "Kalkara",
+              value: "kalkara:21",
+            },
+            {
+              label: "Kerċem",
+              value: "kerċem:22",
+            },
+            {
+              label: "Kirkop",
+              value: "kirkop:23",
+            },
+            {
+              label: "Lija",
+              value: "lija:24",
+            },
+            {
+              label: "Luqa",
+              value: "luqa:25",
+            },
+            {
+              label: "Marsa",
+              value: "marsa:26",
+            },
+            {
+              label: "Marsaskala",
+              value: "marsaskala:27",
+            },
+            {
+              label: "Marsaxlokk",
+              value: "marsaxlokk:28",
+            },
+            {
+              label: "Mdina",
+              value: "mdina:29",
+            },
+            {
+              label: "Mellieħa",
+              value: "mellieħa:30",
+            },
+            {
+              label: "Mosta",
+              value: "mosta:32",
+            },
+            {
+              label: "Mqabba",
+              value: "mqabba:33",
+            },
+            {
+              label: "Msida",
+              value: "msida:34",
+            },
+            {
+              label: "Mtarfa",
+              value: "mtarfa:35",
+            },
+            {
+              label: "Munxar",
+              value: "munxar:36",
+            },
+            {
+              label: "Mġarr",
+              value: "mġarr:31",
+            },
+            {
+              label: "Nadur",
+              value: "nadur:37",
+            },
+            {
+              label: "Naxxar",
+              value: "naxxar:38",
+            },
+            {
+              label: "Paola",
+              value: "paola:39",
+            },
+            {
+              label: "Pembroke",
+              value: "pembroke:40",
+            },
+            {
+              label: "Pietà",
+              value: "pietà:41",
+            },
+            {
+              label: "Qala",
+              value: "qala:42",
+            },
+            {
+              label: "Qormi",
+              value: "qormi:43",
+            },
+            {
+              label: "Qrendi",
+              value: "qrendi:44",
+            },
+            {
+              label: "Rabat Għawdex",
+              value: "rabat-għawdex:45",
+            },
+            {
+              label: "Rabat Malta",
+              value: "rabat-malta:46",
+            },
+            {
+              label: "Safi",
+              value: "safi:47",
+            },
+            {
+              label: "San Lawrenz",
+              value: "san-lawrenz:50",
+            },
+            {
+              label: "San Pawl il-Baħar",
+              value: "san-pawl-il-baħar:51",
+            },
+            {
+              label: "San Ġiljan",
+              value: "san-ġiljan:48",
+            },
+            {
+              label: "San Ġwann",
+              value: "san-ġwann:49",
+            },
+            {
+              label: "Sannat",
+              value: "sannat:52",
+            },
+            {
+              label: "Santa Luċija",
+              value: "santa-luċija:53",
+            },
+            {
+              label: "Santa Venera",
+              value: "santa-venera:54",
+            },
+            {
+              label: "Siġġiewi",
+              value: "siġġiewi:55",
+            },
+            {
+              label: "Sliema",
+              value: "sliema:56",
+            },
+            {
+              label: "Swieqi",
+              value: "swieqi:57",
+            },
+            {
+              label: "Ta' Xbiex",
+              value: "ta'-xbiex:58",
+            },
+            {
+              label: "Tarxien",
+              value: "tarxien:59",
+            },
+            {
+              label: "Valletta",
+              value: "valletta:60",
+            },
+            {
+              label: "Xagħra",
+              value: "xagħra:61",
+            },
+            {
+              label: "Xewkija",
+              value: "xewkija:62",
+            },
+            {
+              label: "Xgħajra",
+              value: "xgħajra:63",
+            },
+            {
+              label: "Ħamrun",
+              value: "ħamrun:18",
+            },
+            {
+              label: "Żabbar",
+              value: "żabbar:64",
+            },
+            {
+              label: "Żebbuġ Għawdex",
+              value: "żebbuġ-għawdex:65",
+            },
+            {
+              label: "Żebbuġ Malta",
+              value: "żebbuġ-malta:66",
+            },
+            {
+              label: "Żejtun",
+              value: "żejtun:67",
+            },
+            {
+              label: "Żurrieq",
+              value: "żurrieq:68",
+            },
+          ],
+        },
+        {
+          label: "Moldova",
+          value: "moldova",
+          code: "MD",
+          states: [
+            {
+              label: "Anenii Noi",
+              value: "anenii-noi:AN",
+            },
+            {
+              label: "Basarabeasca",
+              value: "basarabeasca:BS",
+            },
+            {
+              label: "Briceni",
+              value: "briceni:BR",
+            },
+            {
+              label: "Bălţi",
+              value: "bălţi:BA",
+            },
+            {
+              label: "Cahul",
+              value: "cahul:CA",
+            },
+            {
+              label: "Cantemir",
+              value: "cantemir:CT",
+            },
+            {
+              label: "Chişinău",
+              value: "chişinău:CU",
+            },
+            {
+              label: "Cimişlia",
+              value: "cimişlia:CM",
+            },
+            {
+              label: "Criuleni",
+              value: "criuleni:CR",
+            },
+            {
+              label: "Călăraşi",
+              value: "călăraşi:CL",
+            },
+            {
+              label: "Căuşeni",
+              value: "căuşeni:CS",
+            },
+            {
+              label: "Donduşeni",
+              value: "donduşeni:DO",
+            },
+            {
+              label: "Drochia",
+              value: "drochia:DR",
+            },
+            {
+              label: "Dubăsari",
+              value: "dubăsari:DU",
+            },
+            {
+              label: "Edineţ",
+              value: "edineţ:ED",
+            },
+            {
+              label: "Floreşti",
+              value: "floreşti:FL",
+            },
+            {
+              label: "Făleşti",
+              value: "făleşti:FA",
+            },
+            {
+              label: "Glodeni",
+              value: "glodeni:GL",
+            },
+            {
+              label: "Găgăuzia, Unitatea teritorială autonomă",
+              value: "găgăuzia,-unitatea-teritorială-autonomă:GA",
+            },
+            {
+              label: "Hînceşti",
+              value: "hînceşti:HI",
+            },
+            {
+              label: "Ialoveni",
+              value: "ialoveni:IA",
+            },
+            {
+              label: "Leova",
+              value: "leova:LE",
+            },
+            {
+              label: "Nisporeni",
+              value: "nisporeni:NI",
+            },
+            {
+              label: "Ocniţa",
+              value: "ocniţa:OC",
+            },
+            {
+              label: "Orhei",
+              value: "orhei:OR",
+            },
+            {
+              label: "Rezina",
+              value: "rezina:RE",
+            },
+            {
+              label: "Rîşcani",
+              value: "rîşcani:RI",
+            },
+            {
+              label: "Soroca",
+              value: "soroca:SO",
+            },
+            {
+              label: "Străşeni",
+              value: "străşeni:ST",
+            },
+            {
+              label: "Stînga Nistrului, unitatea teritorială din",
+              value: "stînga-nistrului,-unitatea-teritorială-din:SN",
+            },
+            {
+              label: "Sîngerei",
+              value: "sîngerei:SI",
+            },
+            {
+              label: "Taraclia",
+              value: "taraclia:TA",
+            },
+            {
+              label: "Teleneşti",
+              value: "teleneşti:TE",
+            },
+            {
+              label: "Tighina",
+              value: "tighina:BD",
+            },
+            {
+              label: "Ungheni",
+              value: "ungheni:UN",
+            },
+            {
+              label: "Şoldăneşti",
+              value: "şoldăneşti:SD",
+            },
+            {
+              label: "Ştefan Vodă",
+              value: "ştefan-vodă:SV",
+            },
+          ],
+        },
+        {
+          label: "Monaco",
+          value: "monaco",
+          code: "MC",
+          states: [
+            {
+              label: "Fontvieille",
+              value: "fontvieille:FO",
+            },
+            {
+              label: "Jardin Exotique",
+              value: "jardin-exotique:JE",
+            },
+            {
+              label: "La Colle",
+              value: "la-colle:CL",
+            },
+            {
+              label: "La Condamine",
+              value: "la-condamine:CO",
+            },
+            {
+              label: "La Gare",
+              value: "la-gare:GA",
+            },
+            {
+              label: "La Source",
+              value: "la-source:SO",
+            },
+            {
+              label: "Larvotto",
+              value: "larvotto:LA",
+            },
+            {
+              label: "Malbousquet",
+              value: "malbousquet:MA",
+            },
+            {
+              label: "Monaco-Ville",
+              value: "monaco-ville:MO",
+            },
+            {
+              label: "Moneghetti",
+              value: "moneghetti:MG",
+            },
+            {
+              label: "Monte-Carlo",
+              value: "monte-carlo:MC",
+            },
+            {
+              label: "Moulins",
+              value: "moulins:MU",
+            },
+            {
+              label: "Port-Hercule",
+              value: "port-hercule:PH",
+            },
+            {
+              label: "Saint-Roman",
+              value: "saint-roman:SR",
+            },
+            {
+              label: "Sainte-Dévote",
+              value: "sainte-dévote:SD",
+            },
+            {
+              label: "Spélugues",
+              value: "spélugues:SP",
+            },
+            {
+              label: "Vallon de la Rousse",
+              value: "vallon-de-la-rousse:VR",
+            },
+          ],
+        },
+        {
+          label: "Montenegro",
+          value: "montenegro",
+          code: "ME",
+          states: [
+            {
+              label: "Andrijevica",
+              value: "andrijevica:01",
+            },
+            {
+              label: "Bar",
+              value: "bar:02",
+            },
+            {
+              label: "Berane",
+              value: "berane:03",
+            },
+            {
+              label: "Bijelo Polje",
+              value: "bijelo-polje:04",
+            },
+            {
+              label: "Budva",
+              value: "budva:05",
+            },
+            {
+              label: "Cetinje",
+              value: "cetinje:06",
+            },
+            {
+              label: "Danilovgrad",
+              value: "danilovgrad:07",
+            },
+            {
+              label: "Gusinje",
+              value: "gusinje:22",
+            },
+            {
+              label: "Herceg-Novi",
+              value: "herceg-novi:08",
+            },
+            {
+              label: "Kolašin",
+              value: "kolašin:09",
+            },
+            {
+              label: "Kotor",
+              value: "kotor:10",
+            },
+            {
+              label: "Mojkovac",
+              value: "mojkovac:11",
+            },
+            {
+              label: "Nikšić",
+              value: "nikšić:12",
+            },
+            {
+              label: "Petnjica",
+              value: "petnjica:23",
+            },
+            {
+              label: "Plav",
+              value: "plav:13",
+            },
+            {
+              label: "Pljevlja",
+              value: "pljevlja:14",
+            },
+            {
+              label: "Plužine",
+              value: "plužine:15",
+            },
+            {
+              label: "Podgorica",
+              value: "podgorica:16",
+            },
+            {
+              label: "Rožaje",
+              value: "rožaje:17",
+            },
+            {
+              label: "Tivat",
+              value: "tivat:19",
+            },
+            {
+              label: "Ulcinj",
+              value: "ulcinj:20",
+            },
+            {
+              label: "Šavnik",
+              value: "šavnik:18",
+            },
+            {
+              label: "Žabljak",
+              value: "žabljak:21",
+            },
+          ],
+        },
+        {
+          label: "Netherlands",
+          value: "netherlands",
+          code: "NL",
+          states: [
+            {
+              label: "Drenthe",
+              value: "drenthe:DR",
+            },
+            {
+              label: "Flevoland",
+              value: "flevoland:FL",
+            },
+            {
+              label: "Fryslân",
+              value: "fryslân:FR",
+            },
+            {
+              label: "Gelderland",
+              value: "gelderland:GE",
+            },
+            {
+              label: "Groningen",
+              value: "groningen:GR",
+            },
+            {
+              label: "Limburg",
+              value: "limburg:LI",
+            },
+            {
+              label: "Noord-Brabant",
+              value: "noord-brabant:NB",
+            },
+            {
+              label: "Noord-Holland",
+              value: "noord-holland:NH",
+            },
+            {
+              label: "Overijssel",
+              value: "overijssel:OV",
+            },
+            {
+              label: "Utrecht",
+              value: "utrecht:UT",
+            },
+            {
+              label: "Zeeland",
+              value: "zeeland:ZE",
+            },
+            {
+              label: "Zuid-Holland",
+              value: "zuid-holland:ZH",
+            },
+            {
+              label: "Aruba",
+              value: "aruba:AW",
+            },
+            {
+              label: "Curaçao",
+              value: "curaçao:CW",
+            },
+            {
+              label: "Sint Maarten",
+              value: "sint-maarten:SX",
+            },
+            {
+              label: "Bonaire",
+              value: "bonaire:BQ1",
+            },
+            {
+              label: "Saba",
+              value: "saba:BQ2",
+            },
+            {
+              label: "Sint Eustatius",
+              value: "sint-eustatius:BQ3",
+            },
+          ],
+        },
+        {
+          label: "Norway",
+          value: "norway",
+          code: "NO",
+          states: [
+            {
+              label: "Akershus",
+              value: "akershus:02",
+            },
+            {
+              label: "Aust-Agder",
+              value: "aust-agder:09",
+            },
+            {
+              label: "Buskerud",
+              value: "buskerud:06",
+            },
+            {
+              label: "Finnmark",
+              value: "finnmark:20",
+            },
+            {
+              label: "Hedmark",
+              value: "hedmark:04",
+            },
+            {
+              label: "Hordaland",
+              value: "hordaland:12",
+            },
+            {
+              label: "Jan Mayen",
+              value: "jan-mayen:22",
+            },
+            {
+              label: "Møre og Romsdal",
+              value: "møre-og-romsdal:15",
+            },
+            {
+              label: "Nord-Trøndelag",
+              value: "nord-trøndelag:17",
+            },
+            {
+              label: "Nordland",
+              value: "nordland:18",
+            },
+            {
+              label: "Oppland",
+              value: "oppland:05",
+            },
+            {
+              label: "Oslo",
+              value: "oslo:03",
+            },
+            {
+              label: "Rogaland",
+              value: "rogaland:11",
+            },
+            {
+              label: "Sogn og Fjordane",
+              value: "sogn-og-fjordane:14",
+            },
+            {
+              label: "Svalbard",
+              value: "svalbard:21",
+            },
+            {
+              label: "Sør-Trøndelag",
+              value: "sør-trøndelag:16",
+            },
+            {
+              label: "Telemark",
+              value: "telemark:08",
+            },
+            {
+              label: "Troms",
+              value: "troms:19",
+            },
+            {
+              label: "Vest-Agder",
+              value: "vest-agder:10",
+            },
+            {
+              label: "Vestfold",
+              value: "vestfold:07",
+            },
+            {
+              label: "Østfold",
+              value: "østfold:01",
+            },
+          ],
+        },
+        {
+          label: "Poland",
+          value: "poland",
+          code: "PL",
+          states: [
+            {
+              label: "Dolnośląskie",
+              value: "dolnośląskie:DS",
+            },
+            {
+              label: "Kujawsko-pomorskie",
+              value: "kujawsko-pomorskie:KP",
+            },
+            {
+              label: "Lubelskie",
+              value: "lubelskie:LU",
+            },
+            {
+              label: "Lubuskie",
+              value: "lubuskie:LB",
+            },
+            {
+              label: "Mazowieckie",
+              value: "mazowieckie:MZ",
+            },
+            {
+              label: "Małopolskie",
+              value: "małopolskie:MA",
+            },
+            {
+              label: "Opolskie",
+              value: "opolskie:OP",
+            },
+            {
+              label: "Podkarpackie",
+              value: "podkarpackie:PK",
+            },
+            {
+              label: "Podlaskie",
+              value: "podlaskie:PD",
+            },
+            {
+              label: "Pomorskie",
+              value: "pomorskie:PM",
+            },
+            {
+              label: "Warmińsko-mazurskie",
+              value: "warmińsko-mazurskie:WN",
+            },
+            {
+              label: "Wielkopolskie",
+              value: "wielkopolskie:WP",
+            },
+            {
+              label: "Zachodniopomorskie",
+              value: "zachodniopomorskie:ZP",
+            },
+            {
+              label: "Łódzkie",
+              value: "łódzkie:LD",
+            },
+            {
+              label: "Śląskie",
+              value: "śląskie:SL",
+            },
+            {
+              label: "Świętokrzyskie",
+              value: "świętokrzyskie:SK",
+            },
+          ],
+        },
+        {
+          label: "Portugal",
+          value: "portugal",
+          code: "PT",
+          states: [
+            {
+              label: "Aveiro",
+              value: "aveiro:01",
+            },
+            {
+              label: "Beja",
+              value: "beja:02",
+            },
+            {
+              label: "Braga",
+              value: "braga:03",
+            },
+            {
+              label: "Bragança",
+              value: "bragança:04",
+            },
+            {
+              label: "Castelo Branco",
+              value: "castelo-branco:05",
+            },
+            {
+              label: "Coimbra",
+              value: "coimbra:06",
+            },
+            {
+              label: "Faro",
+              value: "faro:08",
+            },
+            {
+              label: "Guarda",
+              value: "guarda:09",
+            },
+            {
+              label: "Leiria",
+              value: "leiria:10",
+            },
+            {
+              label: "Lisboa",
+              value: "lisboa:11",
+            },
+            {
+              label: "Portalegre",
+              value: "portalegre:12",
+            },
+            {
+              label: "Porto",
+              value: "porto:13",
+            },
+            {
+              label: "Região Autónoma da Madeira",
+              value: "região-autónoma-da-madeira:30",
+            },
+            {
+              label: "Região Autónoma dos Açores",
+              value: "região-autónoma-dos-açores:20",
+            },
+            {
+              label: "Santarém",
+              value: "santarém:14",
+            },
+            {
+              label: "Setúbal",
+              value: "setúbal:15",
+            },
+            {
+              label: "Viana do Castelo",
+              value: "viana-do-castelo:16",
+            },
+            {
+              label: "Vila Real",
+              value: "vila-real:17",
+            },
+            {
+              label: "Viseu",
+              value: "viseu:18",
+            },
+            {
+              label: "Évora",
+              value: "évora:07",
+            },
+          ],
+        },
+        {
+          label: "Republic of Kosovo",
+          value: "republic-of-kosovo",
+          code: "XK",
+          states: [],
+        },
+        {
+          label: "Romania",
+          value: "romania",
+          code: "RO",
+          states: [
+            {
+              label: "Alba",
+              value: "alba:AB",
+            },
+            {
+              label: "Arad",
+              value: "arad:AR",
+            },
+            {
+              label: "Argeș",
+              value: "argeș:AG",
+            },
+            {
+              label: "Bacău",
+              value: "bacău:BC",
+            },
+            {
+              label: "Bihor",
+              value: "bihor:BH",
+            },
+            {
+              label: "Bistrița-Năsăud",
+              value: "bistrița-năsăud:BN",
+            },
+            {
+              label: "Botoșani",
+              value: "botoșani:BT",
+            },
+            {
+              label: "Brașov",
+              value: "brașov:BV",
+            },
+            {
+              label: "Brăila",
+              value: "brăila:BR",
+            },
+            {
+              label: "București",
+              value: "bucurești:B",
+            },
+            {
+              label: "Buzău",
+              value: "buzău:BZ",
+            },
+            {
+              label: "Caraș-Severin",
+              value: "caraș-severin:CS",
+            },
+            {
+              label: "Cluj",
+              value: "cluj:CJ",
+            },
+            {
+              label: "Constanța",
+              value: "constanța:CT",
+            },
+            {
+              label: "Covasna",
+              value: "covasna:CV",
+            },
+            {
+              label: "Călărași",
+              value: "călărași:CL",
+            },
+            {
+              label: "Dolj",
+              value: "dolj:DJ",
+            },
+            {
+              label: "Dâmbovița",
+              value: "dâmbovița:DB",
+            },
+            {
+              label: "Galați",
+              value: "galați:GL",
+            },
+            {
+              label: "Giurgiu",
+              value: "giurgiu:GR",
+            },
+            {
+              label: "Gorj",
+              value: "gorj:GJ",
+            },
+            {
+              label: "Harghita",
+              value: "harghita:HR",
+            },
+            {
+              label: "Hunedoara",
+              value: "hunedoara:HD",
+            },
+            {
+              label: "Ialomița",
+              value: "ialomița:IL",
+            },
+            {
+              label: "Iași",
+              value: "iași:IS",
+            },
+            {
+              label: "Ilfov",
+              value: "ilfov:IF",
+            },
+            {
+              label: "Maramureș",
+              value: "maramureș:MM",
+            },
+            {
+              label: "Mehedinți",
+              value: "mehedinți:MH",
+            },
+            {
+              label: "Mureș",
+              value: "mureș:MS",
+            },
+            {
+              label: "Neamț",
+              value: "neamț:NT",
+            },
+            {
+              label: "Olt",
+              value: "olt:OT",
+            },
+            {
+              label: "Prahova",
+              value: "prahova:PH",
+            },
+            {
+              label: "Satu Mare",
+              value: "satu-mare:SM",
+            },
+            {
+              label: "Sibiu",
+              value: "sibiu:SB",
+            },
+            {
+              label: "Suceava",
+              value: "suceava:SV",
+            },
+            {
+              label: "Sălaj",
+              value: "sălaj:SJ",
+            },
+            {
+              label: "Teleorman",
+              value: "teleorman:TR",
+            },
+            {
+              label: "Timiș",
+              value: "timiș:TM",
+            },
+            {
+              label: "Tulcea",
+              value: "tulcea:TL",
+            },
+            {
+              label: "Vaslui",
+              value: "vaslui:VS",
+            },
+            {
+              label: "Vrancea",
+              value: "vrancea:VN",
+            },
+            {
+              label: "Vâlcea",
+              value: "vâlcea:VL",
+            },
+          ],
+        },
+        {
+          label: "Russia",
+          value: "russia",
+          code: "RU",
+          states: [
+            {
+              label: "Amurskaya oblast'",
+              value: "amurskaya-oblast':AMU",
+            },
+            {
+              label: "Arkhangel'skaya oblast'",
+              value: "arkhangel'skaya-oblast':ARK",
+            },
+            {
+              label: "Astrakhanskaya oblast'",
+              value: "astrakhanskaya-oblast':AST",
+            },
+            {
+              label: "Belgorodskaya oblast'",
+              value: "belgorodskaya-oblast':BEL",
+            },
+            {
+              label: "Bryanskaya oblast'",
+              value: "bryanskaya-oblast':BRY",
+            },
+            {
+              label: "Chelyabinskaya oblast'",
+              value: "chelyabinskaya-oblast':CHE",
+            },
+            {
+              label: "Irkutskaya oblast'",
+              value: "irkutskaya-oblast':IRK",
+            },
+            {
+              label: "Ivanovskaya oblast'",
+              value: "ivanovskaya-oblast':IVA",
+            },
+            {
+              label: "Kaliningradskaya oblast'",
+              value: "kaliningradskaya-oblast':KGD",
+            },
+            {
+              label: "Kaluzhskaya oblast'",
+              value: "kaluzhskaya-oblast':KLU",
+            },
+            {
+              label: "Kemerovskaya oblast'",
+              value: "kemerovskaya-oblast':KEM",
+            },
+            {
+              label: "Kirovskaya oblast'",
+              value: "kirovskaya-oblast':KIR",
+            },
+            {
+              label: "Kostromskaya oblast'",
+              value: "kostromskaya-oblast':KOS",
+            },
+            {
+              label: "Kurganskaya oblast'",
+              value: "kurganskaya-oblast':KGN",
+            },
+            {
+              label: "Kurskaya oblast'",
+              value: "kurskaya-oblast':KRS",
+            },
+            {
+              label: "Leningradskaya oblast'",
+              value: "leningradskaya-oblast':LEN",
+            },
+            {
+              label: "Lipetskaya oblast'",
+              value: "lipetskaya-oblast':LIP",
+            },
+            {
+              label: "Magadanskaya oblast'",
+              value: "magadanskaya-oblast':MAG",
+            },
+            {
+              label: "Moskovskaya oblast'",
+              value: "moskovskaya-oblast':MOS",
+            },
+            {
+              label: "Murmanskaya oblast'",
+              value: "murmanskaya-oblast':MUR",
+            },
+            {
+              label: "Nizhegorodskaya oblast'",
+              value: "nizhegorodskaya-oblast':NIZ",
+            },
+            {
+              label: "Novgorodskaya oblast'",
+              value: "novgorodskaya-oblast':NGR",
+            },
+            {
+              label: "Novosibirskaya oblast'",
+              value: "novosibirskaya-oblast':NVS",
+            },
+            {
+              label: "Omskaya oblast'",
+              value: "omskaya-oblast':OMS",
+            },
+            {
+              label: "Orenburgskaya oblast'",
+              value: "orenburgskaya-oblast':ORE",
+            },
+            {
+              label: "Orlovskaya oblast'",
+              value: "orlovskaya-oblast':ORL",
+            },
+            {
+              label: "Penzenskaya oblast'",
+              value: "penzenskaya-oblast':PNZ",
+            },
+            {
+              label: "Pskovskaya oblast'",
+              value: "pskovskaya-oblast':PSK",
+            },
+            {
+              label: "Rostovskaya oblast'",
+              value: "rostovskaya-oblast':ROS",
+            },
+            {
+              label: "Ryazanskaya oblast'",
+              value: "ryazanskaya-oblast':RYA",
+            },
+            {
+              label: "Sakhalinskaya oblast'",
+              value: "sakhalinskaya-oblast':SAK",
+            },
+            {
+              label: "Samarskaya oblast'",
+              value: "samarskaya-oblast':SAM",
+            },
+            {
+              label: "Saratovskaya oblast'",
+              value: "saratovskaya-oblast':SAR",
+            },
+            {
+              label: "Smolenskaya oblast'",
+              value: "smolenskaya-oblast':SMO",
+            },
+            {
+              label: "Sverdlovskaya oblast'",
+              value: "sverdlovskaya-oblast':SVE",
+            },
+            {
+              label: "Tambovskaya oblast'",
+              value: "tambovskaya-oblast':TAM",
+            },
+            {
+              label: "Tomskaya oblast'",
+              value: "tomskaya-oblast':TOM",
+            },
+            {
+              label: "Tul'skaya oblast'",
+              value: "tul'skaya-oblast':TUL",
+            },
+            {
+              label: "Tverskaya oblast'",
+              value: "tverskaya-oblast':TVE",
+            },
+            {
+              label: "Tyumenskaya oblast'",
+              value: "tyumenskaya-oblast':TYU",
+            },
+            {
+              label: "Ul'yanovskaya oblast'",
+              value: "ul'yanovskaya-oblast':ULY",
+            },
+            {
+              label: "Vladimirskaya oblast'",
+              value: "vladimirskaya-oblast':VLA",
+            },
+            {
+              label: "Volgogradskaya oblast'",
+              value: "volgogradskaya-oblast':VGG",
+            },
+            {
+              label: "Vologodskaya oblast'",
+              value: "vologodskaya-oblast':VLG",
+            },
+            {
+              label: "Voronezhskaya oblast'",
+              value: "voronezhskaya-oblast':VOR",
+            },
+            {
+              label: "Yaroslavskaya oblast'",
+              value: "yaroslavskaya-oblast':YAR",
+            },
+            {
+              label: "Altayskiy kray",
+              value: "altayskiy-kray:ALT",
+            },
+            {
+              label: "Kamchatskiy kray",
+              value: "kamchatskiy-kray:KAM",
+            },
+            {
+              label: "Khabarovskiy kray",
+              value: "khabarovskiy-kray:KHA",
+            },
+            {
+              label: "Krasnodarskiy kray",
+              value: "krasnodarskiy-kray:KDA",
+            },
+            {
+              label: "Krasnoyarskiy kray",
+              value: "krasnoyarskiy-kray:KYA",
+            },
+            {
+              label: "Permskiy kray",
+              value: "permskiy-kray:PER",
+            },
+            {
+              label: "Primorskiy kray",
+              value: "primorskiy-kray:PRI",
+            },
+            {
+              label: "Stavropol'skiy kray",
+              value: "stavropol'skiy-kray:STA",
+            },
+            {
+              label: "Zabaykal'skiy kray",
+              value: "zabaykal'skiy-kray:ZAB",
+            },
+            {
+              label: "Moskva",
+              value: "moskva:MOW",
+            },
+            {
+              label: "Sankt-Peterburg",
+              value: "sankt-peterburg:SPE",
+            },
+            {
+              label: "Chukotskiy avtonomnyy okrug",
+              value: "chukotskiy-avtonomnyy-okrug:CHU",
+            },
+            {
+              label: "Khanty-Mansiyskiy avtonomnyy okrug-Yugra",
+              value: "khanty-mansiyskiy-avtonomnyy-okrug-yugra:KHM",
+            },
+            {
+              label: "Nenetskiy avtonomnyy okrug",
+              value: "nenetskiy-avtonomnyy-okrug:NEN",
+            },
+            {
+              label: "Yamalo-Nenetskiy avtonomnyy okrug",
+              value: "yamalo-nenetskiy-avtonomnyy-okrug:YAN",
+            },
+            {
+              label: "Yevreyskaya avtonomnaya oblast'",
+              value: "yevreyskaya-avtonomnaya-oblast':YEV",
+            },
+            {
+              label: "Adygeya, Respublika",
+              value: "adygeya,-respublika:AD",
+            },
+            {
+              label: "Altay, Respublika",
+              value: "altay,-respublika:AL",
+            },
+            {
+              label: "Bashkortostan, Respublika",
+              value: "bashkortostan,-respublika:BA",
+            },
+            {
+              label: "Buryatiya, Respublika",
+              value: "buryatiya,-respublika:BU",
+            },
+            {
+              label: "Chechenskaya Respublika",
+              value: "chechenskaya-respublika:CE",
+            },
+            {
+              label: "Chuvashskaya Respublika",
+              value: "chuvashskaya-respublika:CU",
+            },
+            {
+              label: "Dagestan, Respublika",
+              value: "dagestan,-respublika:DA",
+            },
+            {
+              label: "Ingushetiya, Respublika",
+              value: "ingushetiya,-respublika:IN",
+            },
+            {
+              label: "Kabardino-Balkarskaya Respublika",
+              value: "kabardino-balkarskaya-respublika:KB",
+            },
+            {
+              label: "Kalmykiya, Respublika",
+              value: "kalmykiya,-respublika:KL",
+            },
+            {
+              label: "Karachayevo-Cherkesskaya Respublika",
+              value: "karachayevo-cherkesskaya-respublika:KC",
+            },
+            {
+              label: "Kareliya, Respublika",
+              value: "kareliya,-respublika:KR",
+            },
+            {
+              label: "Khakasiya, Respublika",
+              value: "khakasiya,-respublika:KK",
+            },
+            {
+              label: "Komi, Respublika",
+              value: "komi,-respublika:KO",
+            },
+            {
+              label: "Mariy El, Respublika",
+              value: "mariy-el,-respublika:ME",
+            },
+            {
+              label: "Mordoviya, Respublika",
+              value: "mordoviya,-respublika:MO",
+            },
+            {
+              label: "Sakha, Respublika",
+              value: "sakha,-respublika:SA",
+            },
+            {
+              label: "Severnaya Osetiya-Alaniya, Respublika",
+              value: "severnaya-osetiya-alaniya,-respublika:SE",
+            },
+            {
+              label: "Tatarstan, Respublika",
+              value: "tatarstan,-respublika:TA",
+            },
+            {
+              label: "Tyva, Respublika",
+              value: "tyva,-respublika:TY",
+            },
+            {
+              label: "Udmurtskaya Respublika",
+              value: "udmurtskaya-respublika:UD",
+            },
+          ],
+        },
+        {
+          label: "San Marino",
+          value: "san-marino",
+          code: "SM",
+          states: [
+            {
+              label: "Acquaviva",
+              value: "acquaviva:01",
+            },
+            {
+              label: "Borgo Maggiore",
+              value: "borgo-maggiore:06",
+            },
+            {
+              label: "Chiesanuova",
+              value: "chiesanuova:02",
+            },
+            {
+              label: "Domagnano",
+              value: "domagnano:03",
+            },
+            {
+              label: "Faetano",
+              value: "faetano:04",
+            },
+            {
+              label: "Fiorentino",
+              value: "fiorentino:05",
+            },
+            {
+              label: "Montegiardino",
+              value: "montegiardino:08",
+            },
+            {
+              label: "San Marino",
+              value: "san-marino:07",
+            },
+            {
+              label: "Serravalle",
+              value: "serravalle:09",
+            },
+          ],
+        },
+        {
+          label: "Serbia",
+          value: "serbia",
+          code: "RS",
+          states: [
+            {
+              label: "Kosovo-Metohija",
+              value: "kosovo-metohija:KM",
+            },
+            {
+              label: "Vojvodina",
+              value: "vojvodina:VO",
+            },
+          ],
+        },
+        {
+          label: "Slovakia",
+          value: "slovakia",
+          code: "SK",
+          states: [
+            {
+              label: "Banskobystrický kraj",
+              value: "banskobystrický-kraj:BC",
+            },
+            {
+              label: "Bratislavský kraj",
+              value: "bratislavský-kraj:BL",
+            },
+            {
+              label: "Košický kraj",
+              value: "košický-kraj:KI",
+            },
+            {
+              label: "Nitriansky kraj",
+              value: "nitriansky-kraj:NI",
+            },
+            {
+              label: "Prešovský kraj",
+              value: "prešovský-kraj:PV",
+            },
+            {
+              label: "Trenčiansky kraj",
+              value: "trenčiansky-kraj:TC",
+            },
+            {
+              label: "Trnavský kraj",
+              value: "trnavský-kraj:TA",
+            },
+            {
+              label: "Žilinský kraj",
+              value: "žilinský-kraj:ZI",
+            },
+          ],
+        },
+        {
+          label: "Slovenia",
+          value: "slovenia",
+          code: "SI",
+          states: [
+            {
+              label: "Ajdovščina",
+              value: "ajdovščina:001",
+            },
+            {
+              label: "Apače",
+              value: "apače:195",
+            },
+            {
+              label: "Beltinci",
+              value: "beltinci:002",
+            },
+            {
+              label: "Benedikt",
+              value: "benedikt:148",
+            },
+            {
+              label: "Bistrica ob Sotli",
+              value: "bistrica-ob-sotli:149",
+            },
+            {
+              label: "Bled",
+              value: "bled:003",
+            },
+            {
+              label: "Bloke",
+              value: "bloke:150",
+            },
+            {
+              label: "Bohinj",
+              value: "bohinj:004",
+            },
+            {
+              label: "Borovnica",
+              value: "borovnica:005",
+            },
+            {
+              label: "Bovec",
+              value: "bovec:006",
+            },
+            {
+              label: "Braslovče",
+              value: "braslovče:151",
+            },
+            {
+              label: "Brda",
+              value: "brda:007",
+            },
+            {
+              label: "Brezovica",
+              value: "brezovica:008",
+            },
+            {
+              label: "Brežice",
+              value: "brežice:009",
+            },
+            {
+              label: "Cankova",
+              value: "cankova:152",
+            },
+            {
+              label: "Celje",
+              value: "celje:011",
+            },
+            {
+              label: "Cerklje na Gorenjskem",
+              value: "cerklje-na-gorenjskem:012",
+            },
+            {
+              label: "Cerknica",
+              value: "cerknica:013",
+            },
+            {
+              label: "Cerkno",
+              value: "cerkno:014",
+            },
+            {
+              label: "Cerkvenjak",
+              value: "cerkvenjak:153",
+            },
+            {
+              label: "Cirkulane",
+              value: "cirkulane:196",
+            },
+            {
+              label: "Destrnik",
+              value: "destrnik:018",
+            },
+            {
+              label: "Divača",
+              value: "divača:019",
+            },
+            {
+              label: "Dobje",
+              value: "dobje:154",
+            },
+            {
+              label: "Dobrepolje",
+              value: "dobrepolje:020",
+            },
+            {
+              label: "Dobrna",
+              value: "dobrna:155",
+            },
+            {
+              label: "Dobrova–Polhov Gradec",
+              value: "dobrova–polhov-gradec:021",
+            },
+            {
+              label: "Dobrovnik",
+              value: "dobrovnik:156",
+            },
+            {
+              label: "Dol pri Ljubljani",
+              value: "dol-pri-ljubljani:022",
+            },
+            {
+              label: "Dolenjske Toplice",
+              value: "dolenjske-toplice:157",
+            },
+            {
+              label: "Domžale",
+              value: "domžale:023",
+            },
+            {
+              label: "Dornava",
+              value: "dornava:024",
+            },
+            {
+              label: "Dravograd",
+              value: "dravograd:025",
+            },
+            {
+              label: "Duplek",
+              value: "duplek:026",
+            },
+            {
+              label: "Gorenja vas–Poljane",
+              value: "gorenja-vas–poljane:027",
+            },
+            {
+              label: "Gorišnica",
+              value: "gorišnica:028",
+            },
+            {
+              label: "Gorje",
+              value: "gorje:207",
+            },
+            {
+              label: "Gornja Radgona",
+              value: "gornja-radgona:029",
+            },
+            {
+              label: "Gornji Grad",
+              value: "gornji-grad:030",
+            },
+            {
+              label: "Gornji Petrovci",
+              value: "gornji-petrovci:031",
+            },
+            {
+              label: "Grad",
+              value: "grad:158",
+            },
+            {
+              label: "Grosuplje",
+              value: "grosuplje:032",
+            },
+            {
+              label: "Hajdina",
+              value: "hajdina:159",
+            },
+            {
+              label: "Hodoš",
+              value: "hodoš:161",
+            },
+            {
+              label: "Horjul",
+              value: "horjul:162",
+            },
+            {
+              label: "Hoče–Slivnica",
+              value: "hoče–slivnica:160",
+            },
+            {
+              label: "Hrastnik",
+              value: "hrastnik:034",
+            },
+            {
+              label: "Hrpelje-Kozina",
+              value: "hrpelje-kozina:035",
+            },
+            {
+              label: "Idrija",
+              value: "idrija:036",
+            },
+            {
+              label: "Ig",
+              value: "ig:037",
+            },
+            {
+              label: "Ilirska Bistrica",
+              value: "ilirska-bistrica:038",
+            },
+            {
+              label: "Ivančna Gorica",
+              value: "ivančna-gorica:039",
+            },
+            {
+              label: "Izola",
+              value: "izola:040",
+            },
+            {
+              label: "Jesenice",
+              value: "jesenice:041",
+            },
+            {
+              label: "Jezersko",
+              value: "jezersko:163",
+            },
+            {
+              label: "Juršinci",
+              value: "juršinci:042",
+            },
+            {
+              label: "Kamnik",
+              value: "kamnik:043",
+            },
+            {
+              label: "Kanal",
+              value: "kanal:044",
+            },
+            {
+              label: "Kidričevo",
+              value: "kidričevo:045",
+            },
+            {
+              label: "Kobarid",
+              value: "kobarid:046",
+            },
+            {
+              label: "Kobilje",
+              value: "kobilje:047",
+            },
+            {
+              label: "Komen",
+              value: "komen:049",
+            },
+            {
+              label: "Komenda",
+              value: "komenda:164",
+            },
+            {
+              label: "Koper",
+              value: "koper:050",
+            },
+            {
+              label: "Kosanjevica na Krki",
+              value: "kosanjevica-na-krki:197",
+            },
+            {
+              label: "Kostel",
+              value: "kostel:165",
+            },
+            {
+              label: "Kozje",
+              value: "kozje:051",
+            },
+            {
+              label: "Kočevje",
+              value: "kočevje:048",
+            },
+            {
+              label: "Kranj",
+              value: "kranj:052",
+            },
+            {
+              label: "Kranjska Gora",
+              value: "kranjska-gora:053",
+            },
+            {
+              label: "Križevci",
+              value: "križevci:166",
+            },
+            {
+              label: "Krško",
+              value: "krško:054",
+            },
+            {
+              label: "Kungota",
+              value: "kungota:055",
+            },
+            {
+              label: "Kuzma",
+              value: "kuzma:056",
+            },
+            {
+              label: "Laško",
+              value: "laško:057",
+            },
+            {
+              label: "Lenart",
+              value: "lenart:058",
+            },
+            {
+              label: "Lendava",
+              value: "lendava:059",
+            },
+            {
+              label: "Litija",
+              value: "litija:060",
+            },
+            {
+              label: "Ljubljana",
+              value: "ljubljana:061",
+            },
+            {
+              label: "Ljubno",
+              value: "ljubno:062",
+            },
+            {
+              label: "Ljutomer",
+              value: "ljutomer:063",
+            },
+            {
+              label: "Log-Dragomer",
+              value: "log-dragomer:208",
+            },
+            {
+              label: "Logatec",
+              value: "logatec:064",
+            },
+            {
+              label: "Lovrenc na Pohorju",
+              value: "lovrenc-na-pohorju:167",
+            },
+            {
+              label: "Loška Dolina",
+              value: "loška-dolina:065",
+            },
+            {
+              label: "Loški Potok",
+              value: "loški-potok:066",
+            },
+            {
+              label: "Lukovica",
+              value: "lukovica:068",
+            },
+            {
+              label: "Luče",
+              value: "luče:067",
+            },
+            {
+              label: "Majšperk",
+              value: "majšperk:069",
+            },
+            {
+              label: "Makole",
+              value: "makole:198",
+            },
+            {
+              label: "Maribor",
+              value: "maribor:070",
+            },
+            {
+              label: "Markovci",
+              value: "markovci:168",
+            },
+            {
+              label: "Medvode",
+              value: "medvode:071",
+            },
+            {
+              label: "Mengeš",
+              value: "mengeš:072",
+            },
+            {
+              label: "Metlika",
+              value: "metlika:073",
+            },
+            {
+              label: "Mežica",
+              value: "mežica:074",
+            },
+            {
+              label: "Miklavž na Dravskem Polju",
+              value: "miklavž-na-dravskem-polju:169",
+            },
+            {
+              label: "Miren–Kostanjevica",
+              value: "miren–kostanjevica:075",
+            },
+            {
+              label: "Mirna Peč",
+              value: "mirna-peč:170",
+            },
+            {
+              label: "Mislinja",
+              value: "mislinja:076",
+            },
+            {
+              label: "Mokronog–Trebelno",
+              value: "mokronog–trebelno:199",
+            },
+            {
+              label: "Moravske Toplice",
+              value: "moravske-toplice:078",
+            },
+            {
+              label: "Moravče",
+              value: "moravče:077",
+            },
+            {
+              label: "Mozirje",
+              value: "mozirje:079",
+            },
+            {
+              label: "Murska Sobota",
+              value: "murska-sobota:080",
+            },
+            {
+              label: "Muta",
+              value: "muta:081",
+            },
+            {
+              label: "Naklo",
+              value: "naklo:082",
+            },
+            {
+              label: "Nazarje",
+              value: "nazarje:083",
+            },
+            {
+              label: "Nova Gorica",
+              value: "nova-gorica:084",
+            },
+            {
+              label: "Novo Mesto",
+              value: "novo-mesto:085",
+            },
+            {
+              label: "Odranci",
+              value: "odranci:086",
+            },
+            {
+              label: "Oplotnica",
+              value: "oplotnica:171",
+            },
+            {
+              label: "Ormož",
+              value: "ormož:087",
+            },
+            {
+              label: "Osilnica",
+              value: "osilnica:088",
+            },
+            {
+              label: "Pesnica",
+              value: "pesnica:089",
+            },
+            {
+              label: "Piran",
+              value: "piran:090",
+            },
+            {
+              label: "Pivka",
+              value: "pivka:091",
+            },
+            {
+              label: "Podlehnik",
+              value: "podlehnik:172",
+            },
+            {
+              label: "Podvelka",
+              value: "podvelka:093",
+            },
+            {
+              label: "Podčetrtek",
+              value: "podčetrtek:092",
+            },
+            {
+              label: "Poljčane",
+              value: "poljčane:200",
+            },
+            {
+              label: "Polzela",
+              value: "polzela:173",
+            },
+            {
+              label: "Postojna",
+              value: "postojna:094",
+            },
+            {
+              label: "Prebold",
+              value: "prebold:174",
+            },
+            {
+              label: "Preddvor",
+              value: "preddvor:095",
+            },
+            {
+              label: "Prevalje",
+              value: "prevalje:175",
+            },
+            {
+              label: "Ptuj",
+              value: "ptuj:096",
+            },
+            {
+              label: "Puconci",
+              value: "puconci:097",
+            },
+            {
+              label: "Radenci",
+              value: "radenci:100",
+            },
+            {
+              label: "Radeče",
+              value: "radeče:099",
+            },
+            {
+              label: "Radlje ob Dravi",
+              value: "radlje-ob-dravi:101",
+            },
+            {
+              label: "Radovljica",
+              value: "radovljica:102",
+            },
+            {
+              label: "Ravne na Koroškem",
+              value: "ravne-na-koroškem:103",
+            },
+            {
+              label: "Razkrižje",
+              value: "razkrižje:176",
+            },
+            {
+              label: "Rače–Fram",
+              value: "rače–fram:098",
+            },
+            {
+              label: "Renče-Vogrsko",
+              value: "renče-vogrsko:201",
+            },
+            {
+              label: "Rečica ob Savinji",
+              value: "rečica-ob-savinji:209",
+            },
+            {
+              label: "Ribnica",
+              value: "ribnica:104",
+            },
+            {
+              label: "Ribnica na Pohorju",
+              value: "ribnica-na-pohorju:177",
+            },
+            {
+              label: "Rogatec",
+              value: "rogatec:107",
+            },
+            {
+              label: "Rogaška Slatina",
+              value: "rogaška-slatina:106",
+            },
+            {
+              label: "Rogašovci",
+              value: "rogašovci:105",
+            },
+            {
+              label: "Ruše",
+              value: "ruše:108",
+            },
+            {
+              label: "Selnica ob Dravi",
+              value: "selnica-ob-dravi:178",
+            },
+            {
+              label: "Semič",
+              value: "semič:109",
+            },
+            {
+              label: "Sevnica",
+              value: "sevnica:110",
+            },
+            {
+              label: "Sežana",
+              value: "sežana:111",
+            },
+            {
+              label: "Slovenj Gradec",
+              value: "slovenj-gradec:112",
+            },
+            {
+              label: "Slovenska Bistrica",
+              value: "slovenska-bistrica:113",
+            },
+            {
+              label: "Slovenske Konjice",
+              value: "slovenske-konjice:114",
+            },
+            {
+              label: "Sodražica",
+              value: "sodražica:179",
+            },
+            {
+              label: "Solčava",
+              value: "solčava:180",
+            },
+            {
+              label: "Središče ob Dravi",
+              value: "središče-ob-dravi:202",
+            },
+            {
+              label: "Starše",
+              value: "starše:115",
+            },
+            {
+              label: "Straža",
+              value: "straža:203",
+            },
+            {
+              label: "Sveta Ana",
+              value: "sveta-ana:181",
+            },
+            {
+              label: "Sveta Trojica v Slovenskih Goricah",
+              value: "sveta-trojica-v-slovenskih-goricah:204",
+            },
+            {
+              label: "Sveti Andraž v Slovenskih Goricah",
+              value: "sveti-andraž-v-slovenskih-goricah:182",
+            },
+            {
+              label: "Sveti Jurij",
+              value: "sveti-jurij:116",
+            },
+            {
+              label: "Sveti Jurij v Slovenskih Goricah",
+              value: "sveti-jurij-v-slovenskih-goricah:210",
+            },
+            {
+              label: "Sveti Tomaž",
+              value: "sveti-tomaž:205",
+            },
+            {
+              label: "Tabor",
+              value: "tabor:184",
+            },
+            {
+              label: "Tišina",
+              value: "tišina:010",
+            },
+            {
+              label: "Tolmin",
+              value: "tolmin:128",
+            },
+            {
+              label: "Trbovlje",
+              value: "trbovlje:129",
+            },
+            {
+              label: "Trebnje",
+              value: "trebnje:130",
+            },
+            {
+              label: "Trnovska Vas",
+              value: "trnovska-vas:185",
+            },
+            {
+              label: "Trzin",
+              value: "trzin:186",
+            },
+            {
+              label: "Tržič",
+              value: "tržič:131",
+            },
+            {
+              label: "Turnišče",
+              value: "turnišče:132",
+            },
+            {
+              label: "Velenje",
+              value: "velenje:133",
+            },
+            {
+              label: "Velika Polana",
+              value: "velika-polana:187",
+            },
+            {
+              label: "Velike Lašče",
+              value: "velike-lašče:134",
+            },
+            {
+              label: "Veržej",
+              value: "veržej:188",
+            },
+            {
+              label: "Videm",
+              value: "videm:135",
+            },
+            {
+              label: "Vipava",
+              value: "vipava:136",
+            },
+            {
+              label: "Vitanje",
+              value: "vitanje:137",
+            },
+            {
+              label: "Vodice",
+              value: "vodice:138",
+            },
+            {
+              label: "Vojnik",
+              value: "vojnik:139",
+            },
+            {
+              label: "Vransko",
+              value: "vransko:189",
+            },
+            {
+              label: "Vrhnika",
+              value: "vrhnika:140",
+            },
+            {
+              label: "Vuzenica",
+              value: "vuzenica:141",
+            },
+            {
+              label: "Zagorje ob Savi",
+              value: "zagorje-ob-savi:142",
+            },
+            {
+              label: "Zavrč",
+              value: "zavrč:143",
+            },
+            {
+              label: "Zreče",
+              value: "zreče:144",
+            },
+            {
+              label: "Črenšovci",
+              value: "črenšovci:015",
+            },
+            {
+              label: "Črna na Koroškem",
+              value: "črna-na-koroškem:016",
+            },
+            {
+              label: "Črnomelj",
+              value: "črnomelj:017",
+            },
+            {
+              label: "Šalovci",
+              value: "šalovci:033",
+            },
+            {
+              label: "Šempeter–Vrtojba",
+              value: "šempeter–vrtojba:183",
+            },
+            {
+              label: "Šentilj",
+              value: "šentilj:118",
+            },
+            {
+              label: "Šentjernej",
+              value: "šentjernej:119",
+            },
+            {
+              label: "Šentjur",
+              value: "šentjur:120",
+            },
+            {
+              label: "Šentrupert",
+              value: "šentrupert:211",
+            },
+            {
+              label: "Šenčur",
+              value: "šenčur:117",
+            },
+            {
+              label: "Škocjan",
+              value: "škocjan:121",
+            },
+            {
+              label: "Škofja Loka",
+              value: "škofja-loka:122",
+            },
+            {
+              label: "Škofljica",
+              value: "škofljica:123",
+            },
+            {
+              label: "Šmarje pri Jelšah",
+              value: "šmarje-pri-jelšah:124",
+            },
+            {
+              label: "Šmarješke Toplice",
+              value: "šmarješke-toplice:206",
+            },
+            {
+              label: "Šmartno ob Paki",
+              value: "šmartno-ob-paki:125",
+            },
+            {
+              label: "Šmartno pri Litiji",
+              value: "šmartno-pri-litiji:194",
+            },
+            {
+              label: "Šoštanj",
+              value: "šoštanj:126",
+            },
+            {
+              label: "Štore",
+              value: "štore:127",
+            },
+            {
+              label: "Žalec",
+              value: "žalec:190",
+            },
+            {
+              label: "Železniki",
+              value: "železniki:146",
+            },
+            {
+              label: "Žetale",
+              value: "žetale:191",
+            },
+            {
+              label: "Žiri",
+              value: "žiri:147",
+            },
+            {
+              label: "Žirovnica",
+              value: "žirovnica:192",
+            },
+            {
+              label: "Žužemberk",
+              value: "žužemberk:193",
+            },
+          ],
+        },
+        {
+          label: "Spain",
+          value: "spain",
+          code: "ES",
+          states: [
+            {
+              label: "A Coruña",
+              value: "a-coruña:C",
+            },
+            {
+              label: "Albacete",
+              value: "albacete:AB",
+            },
+            {
+              label: "Alicante",
+              value: "alicante:A",
+            },
+            {
+              label: "Almería",
+              value: "almería:AL",
+            },
+            {
+              label: "Asturias",
+              value: "asturias:O",
+            },
+            {
+              label: "Badajoz",
+              value: "badajoz:BA",
+            },
+            {
+              label: "Balears",
+              value: "balears:PM",
+            },
+            {
+              label: "Barcelona",
+              value: "barcelona:B",
+            },
+            {
+              label: "Burgos",
+              value: "burgos:BU",
+            },
+            {
+              label: "Cantabria",
+              value: "cantabria:S",
+            },
+            {
+              label: "Castellón",
+              value: "castellón:CS",
+            },
+            {
+              label: "Ciudad Real",
+              value: "ciudad-real:CR",
+            },
+            {
+              label: "Cuenca",
+              value: "cuenca:CU",
+            },
+            {
+              label: "Cáceres",
+              value: "cáceres:CC",
+            },
+            {
+              label: "Cádiz",
+              value: "cádiz:CA",
+            },
+            {
+              label: "Córdoba",
+              value: "córdoba:CO",
+            },
+            {
+              label: "Girona",
+              value: "girona:GI",
+            },
+            {
+              label: "Granada",
+              value: "granada:GR",
+            },
+            {
+              label: "Guadalajara",
+              value: "guadalajara:GU",
+            },
+            {
+              label: "Guipúzcoa",
+              value: "guipúzcoa:SS",
+            },
+            {
+              label: "Huelva",
+              value: "huelva:H",
+            },
+            {
+              label: "Huesca",
+              value: "huesca:HU",
+            },
+            {
+              label: "Jaén",
+              value: "jaén:J",
+            },
+            {
+              label: "La Rioja",
+              value: "la-rioja:LO",
+            },
+            {
+              label: "Las Palmas",
+              value: "las-palmas:GC",
+            },
+            {
+              label: "León",
+              value: "león:LE",
+            },
+            {
+              label: "Lleida",
+              value: "lleida:L",
+            },
+            {
+              label: "Lugo",
+              value: "lugo:LU",
+            },
+            {
+              label: "Madrid",
+              value: "madrid:M",
+            },
+            {
+              label: "Murcia",
+              value: "murcia:MU",
+            },
+            {
+              label: "Málaga",
+              value: "málaga:MA",
+            },
+            {
+              label: "Navarra",
+              value: "navarra:NA",
+            },
+            {
+              label: "Ourense",
+              value: "ourense:OR",
+            },
+            {
+              label: "Palencia",
+              value: "palencia:P",
+            },
+            {
+              label: "Pontevedra",
+              value: "pontevedra:PO",
+            },
+            {
+              label: "Salamanca",
+              value: "salamanca:SA",
+            },
+            {
+              label: "Santa Cruz de Tenerife",
+              value: "santa-cruz-de-tenerife:TF",
+            },
+            {
+              label: "Segovia",
+              value: "segovia:SG",
+            },
+            {
+              label: "Sevilla",
+              value: "sevilla:SE",
+            },
+            {
+              label: "Soria",
+              value: "soria:SO",
+            },
+            {
+              label: "Tarragona",
+              value: "tarragona:T",
+            },
+            {
+              label: "Teruel",
+              value: "teruel:TE",
+            },
+            {
+              label: "Toledo",
+              value: "toledo:TO",
+            },
+            {
+              label: "Valencia",
+              value: "valencia:V",
+            },
+            {
+              label: "Valladolid",
+              value: "valladolid:VA",
+            },
+            {
+              label: "Vizcaya",
+              value: "vizcaya:BI",
+            },
+            {
+              label: "Zamora",
+              value: "zamora:ZA",
+            },
+            {
+              label: "Zaragoza",
+              value: "zaragoza:Z",
+            },
+            {
+              label: "Álava",
+              value: "álava:VI",
+            },
+            {
+              label: "Ávila",
+              value: "ávila:AV",
+            },
+            {
+              label: "Ceuta",
+              value: "ceuta:CE",
+            },
+            {
+              label: "Melilla",
+              value: "melilla:ML",
+            },
+            {
+              label: "Andalucía",
+              value: "andalucía:AN",
+            },
+            {
+              label: "Aragón",
+              value: "aragón:AR",
+            },
+            {
+              label: "Asturias, Principado de",
+              value: "asturias,-principado-de:AS",
+            },
+            {
+              label: "Canarias",
+              value: "canarias:CN",
+            },
+            {
+              label: "Cantabria",
+              value: "cantabria:CB",
+            },
+            {
+              label: "Castilla y León",
+              value: "castilla-y-león:CL",
+            },
+            {
+              label: "Castilla-La Mancha",
+              value: "castilla-la-mancha:CM",
+            },
+            {
+              label: "Catalunya",
+              value: "catalunya:CT",
+            },
+            {
+              label: "Extremadura",
+              value: "extremadura:EX",
+            },
+            {
+              label: "Galicia",
+              value: "galicia:GA",
+            },
+            {
+              label: "Illes Balears",
+              value: "illes-balears:IB",
+            },
+            {
+              label: "La Rioja",
+              value: "la-rioja:RI",
+            },
+            {
+              label: "Madrid, Comunidad de",
+              value: "madrid,-comunidad-de:MD",
+            },
+            {
+              label: "Murcia, Región de",
+              value: "murcia,-región-de:MC",
+            },
+            {
+              label: "Navarra, Comunidad Foral de",
+              value: "navarra,-comunidad-foral-de:NC",
+            },
+            {
+              label: "País Vasco",
+              value: "país-vasco:PV",
+            },
+            {
+              label: "Valenciana, Comunidad",
+              value: "valenciana,-comunidad:VC",
+            },
+          ],
+        },
+        {
+          label: "Svalbard and Jan Mayen",
+          value: "svalbard-and-jan-mayen",
+          code: "SJ",
+          states: [],
+        },
+        {
+          label: "Sweden",
+          value: "sweden",
+          code: "SE",
+          states: [
+            {
+              label: "Blekinge län",
+              value: "blekinge-län:K",
+            },
+            {
+              label: "Dalarnas län",
+              value: "dalarnas-län:W",
+            },
+            {
+              label: "Gotlands län",
+              value: "gotlands-län:I",
+            },
+            {
+              label: "Gävleborgs län",
+              value: "gävleborgs-län:X",
+            },
+            {
+              label: "Hallands län",
+              value: "hallands-län:N",
+            },
+            {
+              label: "Jämtlands län",
+              value: "jämtlands-län:Z",
+            },
+            {
+              label: "Jönköpings län",
+              value: "jönköpings-län:F",
+            },
+            {
+              label: "Kalmar län",
+              value: "kalmar-län:H",
+            },
+            {
+              label: "Kronobergs län",
+              value: "kronobergs-län:G",
+            },
+            {
+              label: "Norrbottens län",
+              value: "norrbottens-län:BD",
+            },
+            {
+              label: "Skåne län",
+              value: "skåne-län:M",
+            },
+            {
+              label: "Stockholms län",
+              value: "stockholms-län:AB",
+            },
+            {
+              label: "Södermanlands län",
+              value: "södermanlands-län:D",
+            },
+            {
+              label: "Uppsala län",
+              value: "uppsala-län:C",
+            },
+            {
+              label: "Värmlands län",
+              value: "värmlands-län:S",
+            },
+            {
+              label: "Västerbottens län",
+              value: "västerbottens-län:AC",
+            },
+            {
+              label: "Västernorrlands län",
+              value: "västernorrlands-län:Y",
+            },
+            {
+              label: "Västmanlands län",
+              value: "västmanlands-län:U",
+            },
+            {
+              label: "Västra Götalands län",
+              value: "västra-götalands-län:O",
+            },
+            {
+              label: "Örebro län",
+              value: "örebro-län:T",
+            },
+            {
+              label: "Östergötlands län",
+              value: "östergötlands-län:E",
+            },
+          ],
+        },
+        {
+          label: "Switzerland",
+          value: "switzerland",
+          code: "CH",
+          states: [
+            {
+              label: "Aargau",
+              value: "aargau:AG",
+            },
+            {
+              label: "Appenzell Ausserrhoden",
+              value: "appenzell-ausserrhoden:AR",
+            },
+            {
+              label: "Appenzell Innerrhoden",
+              value: "appenzell-innerrhoden:AI",
+            },
+            {
+              label: "Basel-Landschaft",
+              value: "basel-landschaft:BL",
+            },
+            {
+              label: "Basel-Stadt",
+              value: "basel-stadt:BS",
+            },
+            {
+              label: "Bern",
+              value: "bern:BE",
+            },
+            {
+              label: "Fribourg",
+              value: "fribourg:FR",
+            },
+            {
+              label: "Genève",
+              value: "genève:GE",
+            },
+            {
+              label: "Glarus",
+              value: "glarus:GL",
+            },
+            {
+              label: "Graubünden",
+              value: "graubünden:GR",
+            },
+            {
+              label: "Jura",
+              value: "jura:JU",
+            },
+            {
+              label: "Luzern",
+              value: "luzern:LU",
+            },
+            {
+              label: "Neuchâtel",
+              value: "neuchâtel:NE",
+            },
+            {
+              label: "Nidwalden",
+              value: "nidwalden:NW",
+            },
+            {
+              label: "Obwalden",
+              value: "obwalden:OW",
+            },
+            {
+              label: "Sankt Gallen",
+              value: "sankt-gallen:SG",
+            },
+            {
+              label: "Schaffhausen",
+              value: "schaffhausen:SH",
+            },
+            {
+              label: "Schwyz",
+              value: "schwyz:SZ",
+            },
+            {
+              label: "Solothurn",
+              value: "solothurn:SO",
+            },
+            {
+              label: "Thurgau",
+              value: "thurgau:TG",
+            },
+            {
+              label: "Ticino",
+              value: "ticino:TI",
+            },
+            {
+              label: "Uri",
+              value: "uri:UR",
+            },
+            {
+              label: "Valais",
+              value: "valais:VS",
+            },
+            {
+              label: "Vaud",
+              value: "vaud:VD",
+            },
+            {
+              label: "Zug",
+              value: "zug:ZG",
+            },
+            {
+              label: "Zürich",
+              value: "zürich:ZH",
+            },
+          ],
+        },
+        {
+          label: "Ukraine",
+          value: "ukraine",
+          code: "UA",
+          states: [
+            {
+              label: "Avtonomna Respublika Krym",
+              value: "avtonomna-respublika-krym:43",
+            },
+            {
+              label: "Cherkas'ka Oblast'",
+              value: "cherkas'ka-oblast':71",
+            },
+            {
+              label: "Chernihivs'ka Oblast'",
+              value: "chernihivs'ka-oblast':74",
+            },
+            {
+              label: "Chernivets'ka Oblast'",
+              value: "chernivets'ka-oblast':77",
+            },
+            {
+              label: "Dnipropetrovs'ka Oblast'",
+              value: "dnipropetrovs'ka-oblast':12",
+            },
+            {
+              label: "Donets'ka Oblast'",
+              value: "donets'ka-oblast':14",
+            },
+            {
+              label: "Ivano-Frankivs'ka Oblast'",
+              value: "ivano-frankivs'ka-oblast':26",
+            },
+            {
+              label: "Kharkivs'ka Oblast'",
+              value: "kharkivs'ka-oblast':63",
+            },
+            {
+              label: "Khersons'ka Oblast'",
+              value: "khersons'ka-oblast':65",
+            },
+            {
+              label: "Khmel'nyts'ka Oblast'",
+              value: "khmel'nyts'ka-oblast':68",
+            },
+            {
+              label: "Kirovohrads'ka Oblast'",
+              value: "kirovohrads'ka-oblast':35",
+            },
+            {
+              label: "Kyïv",
+              value: "kyïv:30",
+            },
+            {
+              label: "Kyïvs'ka Oblast'",
+              value: "kyïvs'ka-oblast':32",
+            },
+            {
+              label: "L'vivs'ka Oblast'",
+              value: "l'vivs'ka-oblast':46",
+            },
+            {
+              label: "Luhans'ka Oblast'",
+              value: "luhans'ka-oblast':09",
+            },
+            {
+              label: "Mykolaïvs'ka Oblast'",
+              value: "mykolaïvs'ka-oblast':48",
+            },
+            {
+              label: "Odes'ka Oblast'",
+              value: "odes'ka-oblast':51",
+            },
+            {
+              label: "Poltavs'ka Oblast'",
+              value: "poltavs'ka-oblast':53",
+            },
+            {
+              label: "Rivnens'ka Oblast'",
+              value: "rivnens'ka-oblast':56",
+            },
+            {
+              label: "Sevastopol'",
+              value: "sevastopol':40",
+            },
+            {
+              label: "Sums'ka Oblast'",
+              value: "sums'ka-oblast':59",
+            },
+            {
+              label: "Ternopil's'ka Oblast'",
+              value: "ternopil's'ka-oblast':61",
+            },
+            {
+              label: "Vinnyts'ka Oblast'",
+              value: "vinnyts'ka-oblast':05",
+            },
+            {
+              label: "Volyns'ka Oblast'",
+              value: "volyns'ka-oblast':07",
+            },
+            {
+              label: "Zakarpats'ka Oblast'",
+              value: "zakarpats'ka-oblast':21",
+            },
+            {
+              label: "Zaporiz'ka Oblast'",
+              value: "zaporiz'ka-oblast':23",
+            },
+            {
+              label: "Zhytomyrs'ka Oblast'",
+              value: "zhytomyrs'ka-oblast':18",
+            },
+          ],
+        },
+        {
+          label: "United Kingdom",
+          value: "united-kingdom",
+          code: "GB",
+          states: [
+            {
+              label: "Barking and Dagenham",
+              value: "barking-and-dagenham:BDG",
+            },
+            {
+              label: "Barnet",
+              value: "barnet:BNE",
+            },
+            {
+              label: "Bexley",
+              value: "bexley:BEX",
+            },
+            {
+              label: "Brent",
+              value: "brent:BEN",
+            },
+            {
+              label: "Bromley",
+              value: "bromley:BRY",
+            },
+            {
+              label: "Camden",
+              value: "camden:CMD",
+            },
+            {
+              label: "Croydon",
+              value: "croydon:CRY",
+            },
+            {
+              label: "Ealing",
+              value: "ealing:EAL",
+            },
+            {
+              label: "Enfield",
+              value: "enfield:ENF",
+            },
+            {
+              label: "Greenwich",
+              value: "greenwich:GRE",
+            },
+            {
+              label: "Hackney",
+              value: "hackney:HCK",
+            },
+            {
+              label: "Hammersmith and Fulham",
+              value: "hammersmith-and-fulham:HMF",
+            },
+            {
+              label: "Haringey",
+              value: "haringey:HRY",
+            },
+            {
+              label: "Harrow",
+              value: "harrow:HRW",
+            },
+            {
+              label: "Havering",
+              value: "havering:HAV",
+            },
+            {
+              label: "Hillingdon",
+              value: "hillingdon:HIL",
+            },
+            {
+              label: "Hounslow",
+              value: "hounslow:HNS",
+            },
+            {
+              label: "Islington",
+              value: "islington:ISL",
+            },
+            {
+              label: "Kensington and Chelsea",
+              value: "kensington-and-chelsea:KEC",
+            },
+            {
+              label: "Kingston upon Thames",
+              value: "kingston-upon-thames:KTT",
+            },
+            {
+              label: "Lambeth",
+              value: "lambeth:LBH",
+            },
+            {
+              label: "Lewisham",
+              value: "lewisham:LEW",
+            },
+            {
+              label: "Merton",
+              value: "merton:MRT",
+            },
+            {
+              label: "Newham",
+              value: "newham:NWM",
+            },
+            {
+              label: "Redbridge",
+              value: "redbridge:RDB",
+            },
+            {
+              label: "Richmond upon Thames",
+              value: "richmond-upon-thames:RIC",
+            },
+            {
+              label: "Southwark",
+              value: "southwark:SWK",
+            },
+            {
+              label: "Sutton",
+              value: "sutton:STN",
+            },
+            {
+              label: "Tower Hamlets",
+              value: "tower-hamlets:TWH",
+            },
+            {
+              label: "Waltham Forest",
+              value: "waltham-forest:WFT",
+            },
+            {
+              label: "Wandsworth",
+              value: "wandsworth:WND",
+            },
+            {
+              label: "Westminster",
+              value: "westminster:WSM",
+            },
+            {
+              label: "England and Wales",
+              value: "england-and-wales:EAW",
+            },
+            {
+              label: "Great Britain",
+              value: "great-britain:GBN",
+            },
+            {
+              label: "United Kingdom",
+              value: "united-kingdom:UKM",
+            },
+            {
+              label: "London, City of",
+              value: "london,-city-of:LND",
+            },
+            {
+              label: "Aberdeen City",
+              value: "aberdeen-city:ABE",
+            },
+            {
+              label: "Aberdeenshire",
+              value: "aberdeenshire:ABD",
+            },
+            {
+              label: "Angus",
+              value: "angus:ANS",
+            },
+            {
+              label: "Argyll and Bute",
+              value: "argyll-and-bute:AGB",
+            },
+            {
+              label: "Clackmannanshire",
+              value: "clackmannanshire:CLK",
+            },
+            {
+              label: "Dumfries and Galloway",
+              value: "dumfries-and-galloway:DGY",
+            },
+            {
+              label: "Dundee City",
+              value: "dundee-city:DND",
+            },
+            {
+              label: "East Ayrshire",
+              value: "east-ayrshire:EAY",
+            },
+            {
+              label: "East Dunbartonshire",
+              value: "east-dunbartonshire:EDU",
+            },
+            {
+              label: "East Lothian",
+              value: "east-lothian:ELN",
+            },
+            {
+              label: "East Renfrewshire",
+              value: "east-renfrewshire:ERW",
+            },
+            {
+              label: "Edinburgh, City of",
+              value: "edinburgh,-city-of:EDH",
+            },
+            {
+              label: "Eilean Siar",
+              value: "eilean-siar:ELS",
+            },
+            {
+              label: "Falkirk",
+              value: "falkirk:FAL",
+            },
+            {
+              label: "Fife",
+              value: "fife:FIF",
+            },
+            {
+              label: "Glasgow City",
+              value: "glasgow-city:GLG",
+            },
+            {
+              label: "Highland",
+              value: "highland:HLD",
+            },
+            {
+              label: "Inverclyde",
+              value: "inverclyde:IVC",
+            },
+            {
+              label: "Midlothian",
+              value: "midlothian:MLN",
+            },
+            {
+              label: "Moray",
+              value: "moray:MRY",
+            },
+            {
+              label: "North Ayrshire",
+              value: "north-ayrshire:NAY",
+            },
+            {
+              label: "North Lanarkshire",
+              value: "north-lanarkshire:NLK",
+            },
+            {
+              label: "Orkney Islands",
+              value: "orkney-islands:ORK",
+            },
+            {
+              label: "Perth and Kinross",
+              value: "perth-and-kinross:PKN",
+            },
+            {
+              label: "Renfrewshire",
+              value: "renfrewshire:RFW",
+            },
+            {
+              label: "Scottish Borders, The",
+              value: "scottish-borders,-the:SCB",
+            },
+            {
+              label: "Shetland Islands",
+              value: "shetland-islands:ZET",
+            },
+            {
+              label: "South Ayrshire",
+              value: "south-ayrshire:SAY",
+            },
+            {
+              label: "South Lanarkshire",
+              value: "south-lanarkshire:SLK",
+            },
+            {
+              label: "Stirling",
+              value: "stirling:STG",
+            },
+            {
+              label: "West Dunbartonshire",
+              value: "west-dunbartonshire:WDU",
+            },
+            {
+              label: "West Lothian",
+              value: "west-lothian:WLN",
+            },
+            {
+              label: "England",
+              value: "england:ENG",
+            },
+            {
+              label: "Scotland",
+              value: "scotland:SCT",
+            },
+            {
+              label: "Wales",
+              value: "wales:WLS",
+            },
+            {
+              label: "Antrim",
+              value: "antrim:ANT",
+            },
+            {
+              label: "Ards",
+              value: "ards:ARD",
+            },
+            {
+              label: "Armagh",
+              value: "armagh:ARM",
+            },
+            {
+              label: "Ballymena",
+              value: "ballymena:BLA",
+            },
+            {
+              label: "Ballymoney",
+              value: "ballymoney:BLY",
+            },
+            {
+              label: "Banbridge",
+              value: "banbridge:BNB",
+            },
+            {
+              label: "Belfast",
+              value: "belfast:BFS",
+            },
+            {
+              label: "Carrickfergus",
+              value: "carrickfergus:CKF",
+            },
+            {
+              label: "Castlereagh",
+              value: "castlereagh:CSR",
+            },
+            {
+              label: "Coleraine",
+              value: "coleraine:CLR",
+            },
+            {
+              label: "Cookstown",
+              value: "cookstown:CKT",
+            },
+            {
+              label: "Craigavon",
+              value: "craigavon:CGV",
+            },
+            {
+              label: "Derry",
+              value: "derry:DRY",
+            },
+            {
+              label: "Down",
+              value: "down:DOW",
+            },
+            {
+              label: "Dungannon and South Tyrone",
+              value: "dungannon-and-south-tyrone:DGN",
+            },
+            {
+              label: "Fermanagh",
+              value: "fermanagh:FER",
+            },
+            {
+              label: "Larne",
+              value: "larne:LRN",
+            },
+            {
+              label: "Limavady",
+              value: "limavady:LMV",
+            },
+            {
+              label: "Lisburn",
+              value: "lisburn:LSB",
+            },
+            {
+              label: "Magherafelt",
+              value: "magherafelt:MFT",
+            },
+            {
+              label: "Moyle",
+              value: "moyle:MYL",
+            },
+            {
+              label: "Newry and Mourne District",
+              value: "newry-and-mourne-district:NYM",
+            },
+            {
+              label: "Newtownabbey",
+              value: "newtownabbey:NTA",
+            },
+            {
+              label: "North Down",
+              value: "north-down:NDN",
+            },
+            {
+              label: "Omagh",
+              value: "omagh:OMH",
+            },
+            {
+              label: "Strabane",
+              value: "strabane:STB",
+            },
+            {
+              label: "Barnsley",
+              value: "barnsley:BNS",
+            },
+            {
+              label: "Birmingham",
+              value: "birmingham:BIR",
+            },
+            {
+              label: "Bolton",
+              value: "bolton:BOL",
+            },
+            {
+              label: "Bradford",
+              value: "bradford:BRD",
+            },
+            {
+              label: "Bury",
+              value: "bury:BUR",
+            },
+            {
+              label: "Calderdale",
+              value: "calderdale:CLD",
+            },
+            {
+              label: "Coventry",
+              value: "coventry:COV",
+            },
+            {
+              label: "Doncaster",
+              value: "doncaster:DNC",
+            },
+            {
+              label: "Dudley",
+              value: "dudley:DUD",
+            },
+            {
+              label: "Gateshead",
+              value: "gateshead:GAT",
+            },
+            {
+              label: "Kirklees",
+              value: "kirklees:KIR",
+            },
+            {
+              label: "Knowsley",
+              value: "knowsley:KWL",
+            },
+            {
+              label: "Leeds",
+              value: "leeds:LDS",
+            },
+            {
+              label: "Liverpool",
+              value: "liverpool:LIV",
+            },
+            {
+              label: "Manchester",
+              value: "manchester:MAN",
+            },
+            {
+              label: "Newcastle upon Tyne",
+              value: "newcastle-upon-tyne:NET",
+            },
+            {
+              label: "North Tyneside",
+              value: "north-tyneside:NTY",
+            },
+            {
+              label: "Oldham",
+              value: "oldham:OLD",
+            },
+            {
+              label: "Rochdale",
+              value: "rochdale:RCH",
+            },
+            {
+              label: "Rotherham",
+              value: "rotherham:ROT",
+            },
+            {
+              label: "Salford",
+              value: "salford:SLF",
+            },
+            {
+              label: "Sandwell",
+              value: "sandwell:SAW",
+            },
+            {
+              label: "Sefton",
+              value: "sefton:SFT",
+            },
+            {
+              label: "Sheffield",
+              value: "sheffield:SHF",
+            },
+            {
+              label: "Solihull",
+              value: "solihull:SOL",
+            },
+            {
+              label: "South Tyneside",
+              value: "south-tyneside:STY",
+            },
+            {
+              label: "St. Helens",
+              value: "st.-helens:SHN",
+            },
+            {
+              label: "Stockport",
+              value: "stockport:SKP",
+            },
+            {
+              label: "Sunderland",
+              value: "sunderland:SND",
+            },
+            {
+              label: "Tameside",
+              value: "tameside:TAM",
+            },
+            {
+              label: "Trafford",
+              value: "trafford:TRF",
+            },
+            {
+              label: "Wakefield",
+              value: "wakefield:WKF",
+            },
+            {
+              label: "Walsall",
+              value: "walsall:WLL",
+            },
+            {
+              label: "Wigan",
+              value: "wigan:WGN",
+            },
+            {
+              label: "Wirral",
+              value: "wirral:WRL",
+            },
+            {
+              label: "Wolverhampton",
+              value: "wolverhampton:WLV",
+            },
+            {
+              label: "Northern Ireland",
+              value: "northern-ireland:NIR",
+            },
+            {
+              label: "Buckinghamshire",
+              value: "buckinghamshire:BKM",
+            },
+            {
+              label: "Cambridgeshire",
+              value: "cambridgeshire:CAM",
+            },
+            {
+              label: "Cumbria",
+              value: "cumbria:CMA",
+            },
+            {
+              label: "Derbyshire",
+              value: "derbyshire:DBY",
+            },
+            {
+              label: "Devon",
+              value: "devon:DEV",
+            },
+            {
+              label: "Dorset",
+              value: "dorset:DOR",
+            },
+            {
+              label: "East Sussex",
+              value: "east-sussex:ESX",
+            },
+            {
+              label: "Essex",
+              value: "essex:ESS",
+            },
+            {
+              label: "Gloucestershire",
+              value: "gloucestershire:GLS",
+            },
+            {
+              label: "Hampshire",
+              value: "hampshire:HAM",
+            },
+            {
+              label: "Hertfordshire",
+              value: "hertfordshire:HRT",
+            },
+            {
+              label: "Kent",
+              value: "kent:KEN",
+            },
+            {
+              label: "Lancashire",
+              value: "lancashire:LAN",
+            },
+            {
+              label: "Leicestershire",
+              value: "leicestershire:LEC",
+            },
+            {
+              label: "Lincolnshire",
+              value: "lincolnshire:LIN",
+            },
+            {
+              label: "Norfolk",
+              value: "norfolk:NFK",
+            },
+            {
+              label: "North Yorkshire",
+              value: "north-yorkshire:NYK",
+            },
+            {
+              label: "Northamptonshire",
+              value: "northamptonshire:NTH",
+            },
+            {
+              label: "Nottinghamshire",
+              value: "nottinghamshire:NTT",
+            },
+            {
+              label: "Oxfordshire",
+              value: "oxfordshire:OXF",
+            },
+            {
+              label: "Somerset",
+              value: "somerset:SOM",
+            },
+            {
+              label: "Staffordshire",
+              value: "staffordshire:STS",
+            },
+            {
+              label: "Suffolk",
+              value: "suffolk:SFK",
+            },
+            {
+              label: "Surrey",
+              value: "surrey:SRY",
+            },
+            {
+              label: "Warwickshire",
+              value: "warwickshire:WAR",
+            },
+            {
+              label: "West Sussex",
+              value: "west-sussex:WSX",
+            },
+            {
+              label: "Worcestershire",
+              value: "worcestershire:WOR",
+            },
+            {
+              label: "Bath and North East Somerset",
+              value: "bath-and-north-east-somerset:BAS",
+            },
+            {
+              label: "Bedford",
+              value: "bedford:BDF",
+            },
+            {
+              label: "Blackburn with Darwen",
+              value: "blackburn-with-darwen:BBD",
+            },
+            {
+              label: "Blackpool",
+              value: "blackpool:BPL",
+            },
+            {
+              label: "Blaenau Gwent",
+              value: "blaenau-gwent:BGW",
+            },
+            {
+              label: "Bournemouth",
+              value: "bournemouth:BMH",
+            },
+            {
+              label: "Bracknell Forest",
+              value: "bracknell-forest:BRC",
+            },
+            {
+              label: "Bridgend",
+              value: "bridgend:BGE",
+            },
+            {
+              label: "Brighton and Hove",
+              value: "brighton-and-hove:BNH",
+            },
+            {
+              label: "Bristol, City of",
+              value: "bristol,-city-of:BST",
+            },
+            {
+              label: "Caerphilly",
+              value: "caerphilly:CAY",
+            },
+            {
+              label: "Cardiff",
+              value: "cardiff:CRF",
+            },
+            {
+              label: "Carmarthenshire",
+              value: "carmarthenshire:CMN",
+            },
+            {
+              label: "Central Bedfordshire",
+              value: "central-bedfordshire:CBF",
+            },
+            {
+              label: "Ceredigion",
+              value: "ceredigion:CGN",
+            },
+            {
+              label: "Cheshire East",
+              value: "cheshire-east:CHE",
+            },
+            {
+              label: "Cheshire West and Chester",
+              value: "cheshire-west-and-chester:CHW",
+            },
+            {
+              label: "Conwy",
+              value: "conwy:CWY",
+            },
+            {
+              label: "Cornwall",
+              value: "cornwall:CON",
+            },
+            {
+              label: "Darlington",
+              value: "darlington:DAL",
+            },
+            {
+              label: "Denbighshire",
+              value: "denbighshire:DEN",
+            },
+            {
+              label: "Derby",
+              value: "derby:DER",
+            },
+            {
+              label: "Durham, County",
+              value: "durham,-county:DUR",
+            },
+            {
+              label: "East Riding of Yorkshire",
+              value: "east-riding-of-yorkshire:ERY",
+            },
+            {
+              label: "Flintshire",
+              value: "flintshire:FLN",
+            },
+            {
+              label: "Gwynedd",
+              value: "gwynedd:GWN",
+            },
+            {
+              label: "Halton",
+              value: "halton:HAL",
+            },
+            {
+              label: "Hartlepool",
+              value: "hartlepool:HPL",
+            },
+            {
+              label: "Herefordshire",
+              value: "herefordshire:HEF",
+            },
+            {
+              label: "Isle of Anglesey",
+              value: "isle-of-anglesey:AGY",
+            },
+            {
+              label: "Isle of Wight",
+              value: "isle-of-wight:IOW",
+            },
+            {
+              label: "Isles of Scilly",
+              value: "isles-of-scilly:IOS",
+            },
+            {
+              label: "Kingston upon Hull",
+              value: "kingston-upon-hull:KHL",
+            },
+            {
+              label: "Leicester",
+              value: "leicester:LCE",
+            },
+            {
+              label: "Luton",
+              value: "luton:LUT",
+            },
+            {
+              label: "Medway",
+              value: "medway:MDW",
+            },
+            {
+              label: "Merthyr Tydfil",
+              value: "merthyr-tydfil:MTY",
+            },
+            {
+              label: "Middlesbrough",
+              value: "middlesbrough:MDB",
+            },
+            {
+              label: "Milton Keynes",
+              value: "milton-keynes:MIK",
+            },
+            {
+              label: "Monmouthshire",
+              value: "monmouthshire:MON",
+            },
+            {
+              label: "Neath Port Talbot",
+              value: "neath-port-talbot:NTL",
+            },
+            {
+              label: "Newport",
+              value: "newport:NWP",
+            },
+            {
+              label: "North East Lincolnshire",
+              value: "north-east-lincolnshire:NEL",
+            },
+            {
+              label: "North Lincolnshire",
+              value: "north-lincolnshire:NLN",
+            },
+            {
+              label: "North Somerset",
+              value: "north-somerset:NSM",
+            },
+            {
+              label: "Northumberland",
+              value: "northumberland:NBL",
+            },
+            {
+              label: "Nottingham",
+              value: "nottingham:NGM",
+            },
+            {
+              label: "Pembrokeshire",
+              value: "pembrokeshire:PEM",
+            },
+            {
+              label: "Peterborough",
+              value: "peterborough:PTE",
+            },
+            {
+              label: "Plymouth",
+              value: "plymouth:PLY",
+            },
+            {
+              label: "Poole",
+              value: "poole:POL",
+            },
+            {
+              label: "Portsmouth",
+              value: "portsmouth:POR",
+            },
+            {
+              label: "Powys",
+              value: "powys:POW",
+            },
+            {
+              label: "Reading",
+              value: "reading:RDG",
+            },
+            {
+              label: "Redcar and Cleveland",
+              value: "redcar-and-cleveland:RCC",
+            },
+            {
+              label: "Rhondda, Cynon, Taff",
+              value: "rhondda,-cynon,-taff:RCT",
+            },
+            {
+              label: "Rutland",
+              value: "rutland:RUT",
+            },
+            {
+              label: "Shropshire",
+              value: "shropshire:SHR",
+            },
+            {
+              label: "Slough",
+              value: "slough:SLG",
+            },
+            {
+              label: "South Gloucestershire",
+              value: "south-gloucestershire:SGC",
+            },
+            {
+              label: "Southampton",
+              value: "southampton:STH",
+            },
+            {
+              label: "Southend-on-Sea",
+              value: "southend-on-sea:SOS",
+            },
+            {
+              label: "Stockton-on-Tees",
+              value: "stockton-on-tees:STT",
+            },
+            {
+              label: "Stoke-on-Trent",
+              value: "stoke-on-trent:STE",
+            },
+            {
+              label: "Swansea",
+              value: "swansea:SWA",
+            },
+            {
+              label: "Swindon",
+              value: "swindon:SWD",
+            },
+            {
+              label: "Telford and Wrekin",
+              value: "telford-and-wrekin:TFW",
+            },
+            {
+              label: "Thurrock",
+              value: "thurrock:THR",
+            },
+            {
+              label: "Torbay",
+              value: "torbay:TOB",
+            },
+            {
+              label: "Torfaen",
+              value: "torfaen:TOF",
+            },
+            {
+              label: "Vale of Glamorgan, The",
+              value: "vale-of-glamorgan,-the:VGL",
+            },
+            {
+              label: "Warrington",
+              value: "warrington:WRT",
+            },
+            {
+              label: "West Berkshire",
+              value: "west-berkshire:WBK",
+            },
+            {
+              label: "Wiltshire",
+              value: "wiltshire:WIL",
+            },
+            {
+              label: "Windsor and Maidenhead",
+              value: "windsor-and-maidenhead:WNM",
+            },
+            {
+              label: "Wokingham",
+              value: "wokingham:WOK",
+            },
+            {
+              label: "Wrexham",
+              value: "wrexham:WRX",
+            },
+            {
+              label: "York",
+              value: "york:YOR",
+            },
+          ],
+        },
+      ],
+    },
+    {
+      label: "North America",
+      value: "north-america",
+      countries: [
+        {
+          label: "Anguilla",
+          value: "anguilla",
+          code: "AI",
+          states: [],
+        },
+        {
+          label: "Antigua and Barbuda",
+          value: "antigua-and-barbuda",
+          code: "AG",
+          states: [
+            {
+              label: "Barbuda",
+              value: "barbuda:10",
+            },
+            {
+              label: "Redonda",
+              value: "redonda:11",
+            },
+            {
+              label: "Saint George",
+              value: "saint-george:03",
+            },
+            {
+              label: "Saint John",
+              value: "saint-john:04",
+            },
+            {
+              label: "Saint Mary",
+              value: "saint-mary:05",
+            },
+            {
+              label: "Saint Paul",
+              value: "saint-paul:06",
+            },
+            {
+              label: "Saint Peter",
+              value: "saint-peter:07",
+            },
+            {
+              label: "Saint Philip",
+              value: "saint-philip:08",
+            },
+          ],
+        },
+        {
+          label: "Aruba",
+          value: "aruba",
+          code: "AW",
+          states: [],
+        },
+        {
+          label: "The Bahamas",
+          value: "the-bahamas",
+          code: "BS",
+          states: [
+            {
+              label: "Acklins",
+              value: "acklins:AK",
+            },
+            {
+              label: "Berry Islands",
+              value: "berry-islands:BY",
+            },
+            {
+              label: "Bimini",
+              value: "bimini:BI",
+            },
+            {
+              label: "Black Point",
+              value: "black-point:BP",
+            },
+            {
+              label: "Cat Island",
+              value: "cat-island:CI",
+            },
+            {
+              label: "Central Abaco",
+              value: "central-abaco:CO",
+            },
+            {
+              label: "Central Andros",
+              value: "central-andros:CS",
+            },
+            {
+              label: "Central Eleuthera",
+              value: "central-eleuthera:CE",
+            },
+            {
+              label: "City of Freeport",
+              value: "city-of-freeport:FP",
+            },
+            {
+              label: "Crooked Island and Long Cay",
+              value: "crooked-island-and-long-cay:CK",
+            },
+            {
+              label: "East Grand Bahama",
+              value: "east-grand-bahama:EG",
+            },
+            {
+              label: "Exuma",
+              value: "exuma:EX",
+            },
+            {
+              label: "Grand Cay",
+              value: "grand-cay:GC",
+            },
+            {
+              label: "Harbour Island",
+              value: "harbour-island:HI",
+            },
+            {
+              label: "Hope Town",
+              value: "hope-town:HT",
+            },
+            {
+              label: "Inagua",
+              value: "inagua:IN",
+            },
+            {
+              label: "Long Island",
+              value: "long-island:LI",
+            },
+            {
+              label: "Mangrove Cay",
+              value: "mangrove-cay:MC",
+            },
+            {
+              label: "Mayaguana",
+              value: "mayaguana:MG",
+            },
+            {
+              label: "Moores Island",
+              value: "moores-island:MI",
+            },
+            {
+              label: "North Abaco",
+              value: "north-abaco:NO",
+            },
+            {
+              label: "North Andros",
+              value: "north-andros:NS",
+            },
+            {
+              label: "North Eleuthera",
+              value: "north-eleuthera:NE",
+            },
+            {
+              label: "Ragged Island",
+              value: "ragged-island:RI",
+            },
+            {
+              label: "Rum Cay",
+              value: "rum-cay:RC",
+            },
+            {
+              label: "San Salvador",
+              value: "san-salvador:SS",
+            },
+            {
+              label: "South Abaco",
+              value: "south-abaco:SO",
+            },
+            {
+              label: "South Andros",
+              value: "south-andros:SA",
+            },
+            {
+              label: "South Eleuthera",
+              value: "south-eleuthera:SE",
+            },
+            {
+              label: "Spanish Wells",
+              value: "spanish-wells:SW",
+            },
+            {
+              label: "West Grand Bahama",
+              value: "west-grand-bahama:WG",
+            },
+          ],
+        },
+        {
+          label: "Barbados",
+          value: "barbados",
+          code: "BB",
+          states: [
+            {
+              label: "Christ Church",
+              value: "christ-church:01",
+            },
+            {
+              label: "Saint Andrew",
+              value: "saint-andrew:02",
+            },
+            {
+              label: "Saint George",
+              value: "saint-george:03",
+            },
+            {
+              label: "Saint James",
+              value: "saint-james:04",
+            },
+            {
+              label: "Saint John",
+              value: "saint-john:05",
+            },
+            {
+              label: "Saint Joseph",
+              value: "saint-joseph:06",
+            },
+            {
+              label: "Saint Lucy",
+              value: "saint-lucy:07",
+            },
+            {
+              label: "Saint Michael",
+              value: "saint-michael:08",
+            },
+            {
+              label: "Saint Peter",
+              value: "saint-peter:09",
+            },
+            {
+              label: "Saint Philip",
+              value: "saint-philip:10",
+            },
+            {
+              label: "Saint Thomas",
+              value: "saint-thomas:11",
+            },
+          ],
+        },
+        {
+          label: "Belize",
+          value: "belize",
+          code: "BZ",
+          states: [
+            {
+              label: "Belize",
+              value: "belize:BZ",
+            },
+            {
+              label: "Cayo",
+              value: "cayo:CY",
+            },
+            {
+              label: "Corozal",
+              value: "corozal:CZL",
+            },
+            {
+              label: "Orange Walk",
+              value: "orange-walk:OW",
+            },
+            {
+              label: "Stann Creek",
+              value: "stann-creek:SC",
+            },
+            {
+              label: "Toledo",
+              value: "toledo:TOL",
+            },
+          ],
+        },
+        {
+          label: "Bermuda",
+          value: "bermuda",
+          code: "BM",
+          states: [],
+        },
+        {
+          label: "Bonaire",
+          value: "bonaire",
+          code: "BQ",
+          states: [],
+        },
+        {
+          label: "United States Minor Outlying Islands",
+          value: "united-states-minor-outlying-islands",
+          code: "UM",
+          states: [
+            {
+              label: "Baker Island",
+              value: "baker-island:81",
+            },
+            {
+              label: "Howland Island",
+              value: "howland-island:84",
+            },
+            {
+              label: "Jarvis Island",
+              value: "jarvis-island:86",
+            },
+            {
+              label: "Johnston Atoll",
+              value: "johnston-atoll:67",
+            },
+            {
+              label: "Kingman Reef",
+              value: "kingman-reef:89",
+            },
+            {
+              label: "Midway Islands",
+              value: "midway-islands:71",
+            },
+            {
+              label: "Navassa Island",
+              value: "navassa-island:76",
+            },
+            {
+              label: "Palmyra Atoll",
+              value: "palmyra-atoll:95",
+            },
+            {
+              label: "Wake Island",
+              value: "wake-island:79",
+            },
+          ],
+        },
+        {
+          label: "Virgin Islands (British)",
+          value: "virgin-islands-(british)",
+          code: "VG",
+          states: [],
+        },
+        {
+          label: "Virgin Islands (U.S.)",
+          value: "virgin-islands-(u.s.)",
+          code: "VI",
+          states: [],
+        },
+        {
+          label: "Canada",
+          value: "canada",
+          code: "CA",
+          states: [
+            {
+              label: "Alberta",
+              value: "alberta:AB",
+            },
+            {
+              label: "British Columbia",
+              value: "british-columbia:BC",
+            },
+            {
+              label: "Manitoba",
+              value: "manitoba:MB",
+            },
+            {
+              label: "New Brunswick",
+              value: "new-brunswick:NB",
+            },
+            {
+              label: "Newfoundland and Labrador",
+              value: "newfoundland-and-labrador:NL",
+            },
+            {
+              label: "Nova Scotia",
+              value: "nova-scotia:NS",
+            },
+            {
+              label: "Ontario",
+              value: "ontario:ON",
+            },
+            {
+              label: "Prince Edward Island",
+              value: "prince-edward-island:PE",
+            },
+            {
+              label: "Quebec",
+              value: "quebec:QC",
+            },
+            {
+              label: "Saskatchewan",
+              value: "saskatchewan:SK",
+            },
+            {
+              label: "Northwest Territories",
+              value: "northwest-territories:NT",
+            },
+            {
+              label: "Nunavut",
+              value: "nunavut:NU",
+            },
+            {
+              label: "Yukon",
+              value: "yukon:YT",
+            },
+          ],
+        },
+        {
+          label: "Cayman Islands",
+          value: "cayman-islands",
+          code: "KY",
+          states: [],
+        },
+        {
+          label: "Costa Rica",
+          value: "costa-rica",
+          code: "CR",
+          states: [
+            {
+              label: "Alajuela",
+              value: "alajuela:A",
+            },
+            {
+              label: "Cartago",
+              value: "cartago:C",
+            },
+            {
+              label: "Guanacaste",
+              value: "guanacaste:G",
+            },
+            {
+              label: "Heredia",
+              value: "heredia:H",
+            },
+            {
+              label: "Limón",
+              value: "limón:L",
+            },
+            {
+              label: "Puntarenas",
+              value: "puntarenas:P",
+            },
+            {
+              label: "San José",
+              value: "san-josé:SJ",
+            },
+          ],
+        },
+        {
+          label: "Cuba",
+          value: "cuba",
+          code: "CU",
+          states: [
+            {
+              label: "Artemisa",
+              value: "artemisa:15",
+            },
+            {
+              label: "Camagüey",
+              value: "camagüey:09",
+            },
+            {
+              label: "Ciego de Ávila",
+              value: "ciego-de-ávila:08",
+            },
+            {
+              label: "Cienfuegos",
+              value: "cienfuegos:06",
+            },
+            {
+              label: "Granma",
+              value: "granma:12",
+            },
+            {
+              label: "Guantánamo",
+              value: "guantánamo:14",
+            },
+            {
+              label: "Holguín",
+              value: "holguín:11",
+            },
+            {
+              label: "Isla de la Juventud",
+              value: "isla-de-la-juventud:99",
+            },
+            {
+              label: "La Habana",
+              value: "la-habana:03",
+            },
+            {
+              label: "Las Tunas",
+              value: "las-tunas:10",
+            },
+            {
+              label: "Matanzas",
+              value: "matanzas:04",
+            },
+            {
+              label: "Mayabeque",
+              value: "mayabeque:16",
+            },
+            {
+              label: "Pinar del Río",
+              value: "pinar-del-río:01",
+            },
+            {
+              label: "Sancti Spíritus",
+              value: "sancti-spíritus:07",
+            },
+            {
+              label: "Santiago de Cuba",
+              value: "santiago-de-cuba:13",
+            },
+            {
+              label: "Villa Clara",
+              value: "villa-clara:05",
+            },
+          ],
+        },
+        {
+          label: "Curaçao",
+          value: "curaçao",
+          code: "CW",
+          states: [],
+        },
+        {
+          label: "Dominica",
+          value: "dominica",
+          code: "DM",
+          states: [
+            {
+              label: "Saint Andrew",
+              value: "saint-andrew:02",
+            },
+            {
+              label: "Saint David",
+              value: "saint-david:03",
+            },
+            {
+              label: "Saint George",
+              value: "saint-george:04",
+            },
+            {
+              label: "Saint John",
+              value: "saint-john:05",
+            },
+            {
+              label: "Saint Joseph",
+              value: "saint-joseph:06",
+            },
+            {
+              label: "Saint Luke",
+              value: "saint-luke:07",
+            },
+            {
+              label: "Saint Mark",
+              value: "saint-mark:08",
+            },
+            {
+              label: "Saint Patrick",
+              value: "saint-patrick:09",
+            },
+            {
+              label: "Saint Paul",
+              value: "saint-paul:10",
+            },
+            {
+              label: "Saint Peter",
+              value: "saint-peter:11",
+            },
+          ],
+        },
+        {
+          label: "Dominican Republic",
+          value: "dominican-republic",
+          code: "DO",
+          states: [
+            {
+              label: "Cibao Nordeste",
+              value: "cibao-nordeste:33",
+            },
+            {
+              label: "Cibao Noroeste",
+              value: "cibao-noroeste:34",
+            },
+            {
+              label: "Cibao Norte",
+              value: "cibao-norte:35",
+            },
+            {
+              label: "Cibao Sur",
+              value: "cibao-sur:36",
+            },
+            {
+              label: "El Valle",
+              value: "el-valle:37",
+            },
+            {
+              label: "Enriquillo",
+              value: "enriquillo:38",
+            },
+            {
+              label: "Higuamo",
+              value: "higuamo:39",
+            },
+            {
+              label: "Ozama",
+              value: "ozama:40",
+            },
+            {
+              label: "Valdesia",
+              value: "valdesia:41",
+            },
+            {
+              label: "Yuma",
+              value: "yuma:42",
+            },
+          ],
+        },
+        {
+          label: "El Salvador",
+          value: "el-salvador",
+          code: "SV",
+          states: [
+            {
+              label: "Ahuachapán",
+              value: "ahuachapán:AH",
+            },
+            {
+              label: "Cabañas",
+              value: "cabañas:CA",
+            },
+            {
+              label: "Chalatenango",
+              value: "chalatenango:CH",
+            },
+            {
+              label: "Cuscatlán",
+              value: "cuscatlán:CU",
+            },
+            {
+              label: "La Libertad",
+              value: "la-libertad:LI",
+            },
+            {
+              label: "La Paz",
+              value: "la-paz:PA",
+            },
+            {
+              label: "La Unión",
+              value: "la-unión:UN",
+            },
+            {
+              label: "Morazán",
+              value: "morazán:MO",
+            },
+            {
+              label: "San Miguel",
+              value: "san-miguel:SM",
+            },
+            {
+              label: "San Salvador",
+              value: "san-salvador:SS",
+            },
+            {
+              label: "San Vicente",
+              value: "san-vicente:SV",
+            },
+            {
+              label: "Santa Ana",
+              value: "santa-ana:SA",
+            },
+            {
+              label: "Sonsonate",
+              value: "sonsonate:SO",
+            },
+            {
+              label: "Usulután",
+              value: "usulután:US",
+            },
+          ],
+        },
+        {
+          label: "Greenland",
+          value: "greenland",
+          code: "GL",
+          states: [
+            {
+              label: "Kommune Kujalleq",
+              value: "kommune-kujalleq:KU",
+            },
+            {
+              label: "Kommuneqarfik Sermersooq",
+              value: "kommuneqarfik-sermersooq:SM",
+            },
+            {
+              label: "Qaasuitsup Kommunia",
+              value: "qaasuitsup-kommunia:QA",
+            },
+            {
+              label: "Qeqqata Kommunia",
+              value: "qeqqata-kommunia:QE",
+            },
+          ],
+        },
+        {
+          label: "Grenada",
+          value: "grenada",
+          code: "GD",
+          states: [
+            {
+              label: "Saint Andrew",
+              value: "saint-andrew:01",
+            },
+            {
+              label: "Saint David",
+              value: "saint-david:02",
+            },
+            {
+              label: "Saint George",
+              value: "saint-george:03",
+            },
+            {
+              label: "Saint John",
+              value: "saint-john:04",
+            },
+            {
+              label: "Saint Mark",
+              value: "saint-mark:05",
+            },
+            {
+              label: "Saint Patrick",
+              value: "saint-patrick:06",
+            },
+            {
+              label: "Southern Grenadine Islands",
+              value: "southern-grenadine-islands:10",
+            },
+          ],
+        },
+        {
+          label: "Guadeloupe",
+          value: "guadeloupe",
+          code: "GP",
+          states: [],
+        },
+        {
+          label: "Guatemala",
+          value: "guatemala",
+          code: "GT",
+          states: [
+            {
+              label: "Alta Verapaz",
+              value: "alta-verapaz:AV",
+            },
+            {
+              label: "Baja Verapaz",
+              value: "baja-verapaz:BV",
+            },
+            {
+              label: "Chimaltenango",
+              value: "chimaltenango:CM",
+            },
+            {
+              label: "Chiquimula",
+              value: "chiquimula:CQ",
+            },
+            {
+              label: "El Progreso",
+              value: "el-progreso:PR",
+            },
+            {
+              label: "Escuintla",
+              value: "escuintla:ES",
+            },
+            {
+              label: "Guatemala",
+              value: "guatemala:GU",
+            },
+            {
+              label: "Huehuetenango",
+              value: "huehuetenango:HU",
+            },
+            {
+              label: "Izabal",
+              value: "izabal:IZ",
+            },
+            {
+              label: "Jalapa",
+              value: "jalapa:JA",
+            },
+            {
+              label: "Jutiapa",
+              value: "jutiapa:JU",
+            },
+            {
+              label: "Petén",
+              value: "petén:PE",
+            },
+            {
+              label: "Quetzaltenango",
+              value: "quetzaltenango:QZ",
+            },
+            {
+              label: "Quiché",
+              value: "quiché:QC",
+            },
+            {
+              label: "Retalhuleu",
+              value: "retalhuleu:RE",
+            },
+            {
+              label: "Sacatepéquez",
+              value: "sacatepéquez:SA",
+            },
+            {
+              label: "San Marcos",
+              value: "san-marcos:SM",
+            },
+            {
+              label: "Santa Rosa",
+              value: "santa-rosa:SR",
+            },
+            {
+              label: "Sololá",
+              value: "sololá:SO",
+            },
+            {
+              label: "Suchitepéquez",
+              value: "suchitepéquez:SU",
+            },
+            {
+              label: "Totonicapán",
+              value: "totonicapán:TO",
+            },
+            {
+              label: "Zacapa",
+              value: "zacapa:ZA",
+            },
+          ],
+        },
+        {
+          label: "Haiti",
+          value: "haiti",
+          code: "HT",
+          states: [
+            {
+              label: "Artibonite",
+              value: "artibonite:AR",
+            },
+            {
+              label: "Centre",
+              value: "centre:CE",
+            },
+            {
+              label: "Grande-Anse",
+              value: "grande-anse:GA",
+            },
+            {
+              label: "Nippes",
+              value: "nippes:NI",
+            },
+            {
+              label: "Nord",
+              value: "nord:ND",
+            },
+            {
+              label: "Nord-Est",
+              value: "nord-est:NE",
+            },
+            {
+              label: "Nord-Ouest",
+              value: "nord-ouest:NO",
+            },
+            {
+              label: "Ouest",
+              value: "ouest:OU",
+            },
+            {
+              label: "Sud",
+              value: "sud:SD",
+            },
+            {
+              label: "Sud-Est",
+              value: "sud-est:SE",
+            },
+          ],
+        },
+        {
+          label: "Honduras",
+          value: "honduras",
+          code: "HN",
+          states: [
+            {
+              label: "Atlántida",
+              value: "atlántida:AT",
+            },
+            {
+              label: "Choluteca",
+              value: "choluteca:CH",
+            },
+            {
+              label: "Colón",
+              value: "colón:CL",
+            },
+            {
+              label: "Comayagua",
+              value: "comayagua:CM",
+            },
+            {
+              label: "Copán",
+              value: "copán:CP",
+            },
+            {
+              label: "Cortés",
+              value: "cortés:CR",
+            },
+            {
+              label: "El Paraíso",
+              value: "el-paraíso:EP",
+            },
+            {
+              label: "Francisco Morazán",
+              value: "francisco-morazán:FM",
+            },
+            {
+              label: "Gracias a Dios",
+              value: "gracias-a-dios:GD",
+            },
+            {
+              label: "Intibucá",
+              value: "intibucá:IN",
+            },
+            {
+              label: "Islas de la Bahía",
+              value: "islas-de-la-bahía:IB",
+            },
+            {
+              label: "La Paz",
+              value: "la-paz:LP",
+            },
+            {
+              label: "Lempira",
+              value: "lempira:LE",
+            },
+            {
+              label: "Ocotepeque",
+              value: "ocotepeque:OC",
+            },
+            {
+              label: "Olancho",
+              value: "olancho:OL",
+            },
+            {
+              label: "Santa Bárbara",
+              value: "santa-bárbara:SB",
+            },
+            {
+              label: "Valle",
+              value: "valle:VA",
+            },
+            {
+              label: "Yoro",
+              value: "yoro:YO",
+            },
+          ],
+        },
+        {
+          label: "Jamaica",
+          value: "jamaica",
+          code: "JM",
+          states: [
+            {
+              label: "Clarendon",
+              value: "clarendon:13",
+            },
+            {
+              label: "Hanover",
+              value: "hanover:09",
+            },
+            {
+              label: "Kingston",
+              value: "kingston:01",
+            },
+            {
+              label: "Manchester",
+              value: "manchester:12",
+            },
+            {
+              label: "Portland",
+              value: "portland:04",
+            },
+            {
+              label: "Saint Andrew",
+              value: "saint-andrew:02",
+            },
+            {
+              label: "Saint Ann",
+              value: "saint-ann:06",
+            },
+            {
+              label: "Saint Catherine",
+              value: "saint-catherine:14",
+            },
+            {
+              label: "Saint Elizabeth",
+              value: "saint-elizabeth:11",
+            },
+            {
+              label: "Saint James",
+              value: "saint-james:08",
+            },
+            {
+              label: "Saint Mary",
+              value: "saint-mary:05",
+            },
+            {
+              label: "Saint Thomas",
+              value: "saint-thomas:03",
+            },
+            {
+              label: "Trelawny",
+              value: "trelawny:07",
+            },
+            {
+              label: "Westmoreland",
+              value: "westmoreland:10",
+            },
+          ],
+        },
+        {
+          label: "Martinique",
+          value: "martinique",
+          code: "MQ",
+          states: [],
+        },
+        {
+          label: "Mexico",
+          value: "mexico",
+          code: "MX",
+          states: [
+            {
+              label: "Distrito Federal",
+              value: "distrito-federal:DIF",
+            },
+            {
+              label: "Aguascalientes",
+              value: "aguascalientes:AGU",
+            },
+            {
+              label: "Baja California",
+              value: "baja-california:BCN",
+            },
+            {
+              label: "Baja California Sur",
+              value: "baja-california-sur:BCS",
+            },
+            {
+              label: "Campeche",
+              value: "campeche:CAM",
+            },
+            {
+              label: "Chiapas",
+              value: "chiapas:CHP",
+            },
+            {
+              label: "Chihuahua",
+              value: "chihuahua:CHH",
+            },
+            {
+              label: "Coahuila",
+              value: "coahuila:COA",
+            },
+            {
+              label: "Colima",
+              value: "colima:COL",
+            },
+            {
+              label: "Durango",
+              value: "durango:DUR",
+            },
+            {
+              label: "Guanajuato",
+              value: "guanajuato:GUA",
+            },
+            {
+              label: "Guerrero",
+              value: "guerrero:GRO",
+            },
+            {
+              label: "Hidalgo",
+              value: "hidalgo:HID",
+            },
+            {
+              label: "Jalisco",
+              value: "jalisco:JAL",
+            },
+            {
+              label: "Michoacán",
+              value: "michoacán:MIC",
+            },
+            {
+              label: "Morelos",
+              value: "morelos:MOR",
+            },
+            {
+              label: "México",
+              value: "méxico:MEX",
+            },
+            {
+              label: "Nayarit",
+              value: "nayarit:NAY",
+            },
+            {
+              label: "Nuevo León",
+              value: "nuevo-león:NLE",
+            },
+            {
+              label: "Oaxaca",
+              value: "oaxaca:OAX",
+            },
+            {
+              label: "Puebla",
+              value: "puebla:PUE",
+            },
+            {
+              label: "Querétaro",
+              value: "querétaro:QUE",
+            },
+            {
+              label: "Quintana Roo",
+              value: "quintana-roo:ROO",
+            },
+            {
+              label: "San Luis Potosí",
+              value: "san-luis-potosí:SLP",
+            },
+            {
+              label: "Sinaloa",
+              value: "sinaloa:SIN",
+            },
+            {
+              label: "Sonora",
+              value: "sonora:SON",
+            },
+            {
+              label: "Tabasco",
+              value: "tabasco:TAB",
+            },
+            {
+              label: "Tamaulipas",
+              value: "tamaulipas:TAM",
+            },
+            {
+              label: "Tlaxcala",
+              value: "tlaxcala:TLA",
+            },
+            {
+              label: "Veracruz",
+              value: "veracruz:VER",
+            },
+            {
+              label: "Yucatán",
+              value: "yucatán:YUC",
+            },
+            {
+              label: "Zacatecas",
+              value: "zacatecas:ZAC",
+            },
+          ],
+        },
+        {
+          label: "Montserrat",
+          value: "montserrat",
+          code: "MS",
+          states: [],
+        },
+        {
+          label: "Nicaragua",
+          value: "nicaragua",
+          code: "NI",
+          states: [
+            {
+              label: "Atlántico Norte",
+              value: "atlántico-norte:AN",
+            },
+            {
+              label: "Atlántico Sur",
+              value: "atlántico-sur:AS",
+            },
+            {
+              label: "Boaco",
+              value: "boaco:BO",
+            },
+            {
+              label: "Carazo",
+              value: "carazo:CA",
+            },
+            {
+              label: "Chinandega",
+              value: "chinandega:CI",
+            },
+            {
+              label: "Chontales",
+              value: "chontales:CO",
+            },
+            {
+              label: "Estelí",
+              value: "estelí:ES",
+            },
+            {
+              label: "Granada",
+              value: "granada:GR",
+            },
+            {
+              label: "Jinotega",
+              value: "jinotega:JI",
+            },
+            {
+              label: "León",
+              value: "león:LE",
+            },
+            {
+              label: "Madriz",
+              value: "madriz:MD",
+            },
+            {
+              label: "Managua",
+              value: "managua:MN",
+            },
+            {
+              label: "Masaya",
+              value: "masaya:MS",
+            },
+            {
+              label: "Matagalpa",
+              value: "matagalpa:MT",
+            },
+            {
+              label: "Nueva Segovia",
+              value: "nueva-segovia:NS",
+            },
+            {
+              label: "Rivas",
+              value: "rivas:RI",
+            },
+            {
+              label: "Río San Juan",
+              value: "río-san-juan:SJ",
+            },
+          ],
+        },
+        {
+          label: "Panama",
+          value: "panama",
+          code: "PA",
+          states: [
+            {
+              label: "Bocas del Toro",
+              value: "bocas-del-toro:1",
+            },
+            {
+              label: "Chiriquí",
+              value: "chiriquí:4",
+            },
+            {
+              label: "Coclé",
+              value: "coclé:2",
+            },
+            {
+              label: "Colón",
+              value: "colón:3",
+            },
+            {
+              label: "Darién",
+              value: "darién:5",
+            },
+            {
+              label: "Emberá",
+              value: "emberá:EM",
+            },
+            {
+              label: "Herrera",
+              value: "herrera:6",
+            },
+            {
+              label: "Kuna Yala",
+              value: "kuna-yala:KY",
+            },
+            {
+              label: "Los Santos",
+              value: "los-santos:7",
+            },
+            {
+              label: "Ngöbe-Buglé",
+              value: "ngöbe-buglé:NB",
+            },
+            {
+              label: "Panamá",
+              value: "panamá:8",
+            },
+            {
+              label: "Panamá Oeste",
+              value: "panamá-oeste:10",
+            },
+            {
+              label: "Veraguas",
+              value: "veraguas:9",
+            },
+          ],
+        },
+        {
+          label: "Puerto Rico",
+          value: "puerto-rico",
+          code: "PR",
+          states: [],
+        },
+        {
+          label: "Saint Barthélemy",
+          value: "saint-barthélemy",
+          code: "BL",
+          states: [],
+        },
+        {
+          label: "Saint Kitts and Nevis",
+          value: "saint-kitts-and-nevis",
+          code: "KN",
+          states: [
+            {
+              label: "Nevis",
+              value: "nevis:N",
+            },
+            {
+              label: "Saint Kitts",
+              value: "saint-kitts:K",
+            },
+          ],
+        },
+        {
+          label: "Saint Lucia",
+          value: "saint-lucia",
+          code: "LC",
+          states: [
+            {
+              label: "Anse la Raye",
+              value: "anse-la-raye:01",
+            },
+            {
+              label: "Castries",
+              value: "castries:02",
+            },
+            {
+              label: "Choiseul",
+              value: "choiseul:03",
+            },
+            {
+              label: "Dauphin",
+              value: "dauphin:04",
+            },
+            {
+              label: "Dennery",
+              value: "dennery:05",
+            },
+            {
+              label: "Gros Islet",
+              value: "gros-islet:06",
+            },
+            {
+              label: "Laborie",
+              value: "laborie:07",
+            },
+            {
+              label: "Micoud",
+              value: "micoud:08",
+            },
+            {
+              label: "Praslin",
+              value: "praslin:09",
+            },
+            {
+              label: "Soufrière",
+              value: "soufrière:10",
+            },
+            {
+              label: "Vieux Fort",
+              value: "vieux-fort:11",
+            },
+          ],
+        },
+        {
+          label: "Saint Martin",
+          value: "saint-martin",
+          code: "MF",
+          states: [],
+        },
+        {
+          label: "Saint Pierre and Miquelon",
+          value: "saint-pierre-and-miquelon",
+          code: "PM",
+          states: [],
+        },
+        {
+          label: "Saint Vincent and the Grenadines",
+          value: "saint-vincent-and-the-grenadines",
+          code: "VC",
+          states: [
+            {
+              label: "Charlotte",
+              value: "charlotte:01",
+            },
+            {
+              label: "Grenadines",
+              value: "grenadines:06",
+            },
+            {
+              label: "Saint Andrew",
+              value: "saint-andrew:02",
+            },
+            {
+              label: "Saint David",
+              value: "saint-david:03",
+            },
+            {
+              label: "Saint George",
+              value: "saint-george:04",
+            },
+            {
+              label: "Saint Patrick",
+              value: "saint-patrick:05",
+            },
+          ],
+        },
+        {
+          label: "Sint Maarten",
+          value: "sint-maarten",
+          code: "SX",
+          states: [],
+        },
+        {
+          label: "Trinidad and Tobago",
+          value: "trinidad-and-tobago",
+          code: "TT",
+          states: [
+            {
+              label: "Arima",
+              value: "arima:ARI",
+            },
+            {
+              label: "Chaguanas",
+              value: "chaguanas:CHA",
+            },
+            {
+              label: "Couva-Tabaquite-Talparo",
+              value: "couva-tabaquite-talparo:CTT",
+            },
+            {
+              label: "Diego Martin",
+              value: "diego-martin:DMN",
+            },
+            {
+              label: "Eastern Tobago",
+              value: "eastern-tobago:ETO",
+            },
+            {
+              label: "Penal-Debe",
+              value: "penal-debe:PED",
+            },
+            {
+              label: "Point Fortin",
+              value: "point-fortin:PTF",
+            },
+            {
+              label: "Port of Spain",
+              value: "port-of-spain:POS",
+            },
+            {
+              label: "Princes Town",
+              value: "princes-town:PRT",
+            },
+            {
+              label: "Rio Claro-Mayaro",
+              value: "rio-claro-mayaro:RCM",
+            },
+            {
+              label: "San Fernando",
+              value: "san-fernando:SFO",
+            },
+            {
+              label: "San Juan-Laventille",
+              value: "san-juan-laventille:SJL",
+            },
+            {
+              label: "Sangre Grande",
+              value: "sangre-grande:SGE",
+            },
+            {
+              label: "Siparia",
+              value: "siparia:SIP",
+            },
+            {
+              label: "Tunapuna-Piarco",
+              value: "tunapuna-piarco:TUP",
+            },
+            {
+              label: "Western Tobago",
+              value: "western-tobago:WTO",
+            },
+          ],
+        },
+        {
+          label: "Turks and Caicos Islands",
+          value: "turks-and-caicos-islands",
+          code: "TC",
+          states: [],
+        },
+        {
+          label: "United States",
+          value: "united-states",
+          code: "US",
+          states: [
+            {
+              label: "District of Columbia",
+              value: "district-of-columbia:DC",
+            },
+            {
+              label: "American Samoa",
+              value: "american-samoa:AS",
+            },
+            {
+              label: "Guam",
+              value: "guam:GU",
+            },
+            {
+              label: "Northern Mariana Islands",
+              value: "northern-mariana-islands:MP",
+            },
+            {
+              label: "Puerto Rico",
+              value: "puerto-rico:PR",
+            },
+            {
+              label: "United States Minor Outlying Islands",
+              value: "united-states-minor-outlying-islands:UM",
+            },
+            {
+              label: "Virgin Islands, U.S.",
+              value: "virgin-islands,-u.s.:VI",
+            },
+            {
+              label: "Alabama",
+              value: "alabama:AL",
+            },
+            {
+              label: "Alaska",
+              value: "alaska:AK",
+            },
+            {
+              label: "Arizona",
+              value: "arizona:AZ",
+            },
+            {
+              label: "Arkansas",
+              value: "arkansas:AR",
+            },
+            {
+              label: "California",
+              value: "california:CA",
+            },
+            {
+              label: "Colorado",
+              value: "colorado:CO",
+            },
+            {
+              label: "Connecticut",
+              value: "connecticut:CT",
+            },
+            {
+              label: "Delaware",
+              value: "delaware:DE",
+            },
+            {
+              label: "Florida",
+              value: "florida:FL",
+            },
+            {
+              label: "Georgia",
+              value: "georgia:GA",
+            },
+            {
+              label: "Hawaii",
+              value: "hawaii:HI",
+            },
+            {
+              label: "Idaho",
+              value: "idaho:ID",
+            },
+            {
+              label: "Illinois",
+              value: "illinois:IL",
+            },
+            {
+              label: "Indiana",
+              value: "indiana:IN",
+            },
+            {
+              label: "Iowa",
+              value: "iowa:IA",
+            },
+            {
+              label: "Kansas",
+              value: "kansas:KS",
+            },
+            {
+              label: "Kentucky",
+              value: "kentucky:KY",
+            },
+            {
+              label: "Louisiana",
+              value: "louisiana:LA",
+            },
+            {
+              label: "Maine",
+              value: "maine:ME",
+            },
+            {
+              label: "Maryland",
+              value: "maryland:MD",
+            },
+            {
+              label: "Massachusetts",
+              value: "massachusetts:MA",
+            },
+            {
+              label: "Michigan",
+              value: "michigan:MI",
+            },
+            {
+              label: "Minnesota",
+              value: "minnesota:MN",
+            },
+            {
+              label: "Mississippi",
+              value: "mississippi:MS",
+            },
+            {
+              label: "Missouri",
+              value: "missouri:MO",
+            },
+            {
+              label: "Montana",
+              value: "montana:MT",
+            },
+            {
+              label: "Nebraska",
+              value: "nebraska:NE",
+            },
+            {
+              label: "Nevada",
+              value: "nevada:NV",
+            },
+            {
+              label: "New Hampshire",
+              value: "new-hampshire:NH",
+            },
+            {
+              label: "New Jersey",
+              value: "new-jersey:NJ",
+            },
+            {
+              label: "New Mexico",
+              value: "new-mexico:NM",
+            },
+            {
+              label: "New York",
+              value: "new-york:NY",
+            },
+            {
+              label: "North Carolina",
+              value: "north-carolina:NC",
+            },
+            {
+              label: "North Dakota",
+              value: "north-dakota:ND",
+            },
+            {
+              label: "Ohio",
+              value: "ohio:OH",
+            },
+            {
+              label: "Oklahoma",
+              value: "oklahoma:OK",
+            },
+            {
+              label: "Oregon",
+              value: "oregon:OR",
+            },
+            {
+              label: "Pennsylvania",
+              value: "pennsylvania:PA",
+            },
+            {
+              label: "Rhode Island",
+              value: "rhode-island:RI",
+            },
+            {
+              label: "South Carolina",
+              value: "south-carolina:SC",
+            },
+            {
+              label: "South Dakota",
+              value: "south-dakota:SD",
+            },
+            {
+              label: "Tennessee",
+              value: "tennessee:TN",
+            },
+            {
+              label: "Texas",
+              value: "texas:TX",
+            },
+            {
+              label: "Utah",
+              value: "utah:UT",
+            },
+            {
+              label: "Vermont",
+              value: "vermont:VT",
+            },
+            {
+              label: "Virginia",
+              value: "virginia:VA",
+            },
+            {
+              label: "Washington",
+              value: "washington:WA",
+            },
+            {
+              label: "West Virginia",
+              value: "west-virginia:WV",
+            },
+            {
+              label: "Wisconsin",
+              value: "wisconsin:WI",
+            },
+            {
+              label: "Wyoming",
+              value: "wyoming:WY",
+            },
+          ],
+        },
+      ],
+    },
+    {
+      label: "Oceania",
+      value: "oceania",
+      countries: [
+        {
+          label: "American Samoa",
+          value: "american-samoa",
+          code: "AS",
+          states: [],
+        },
+        {
+          label: "Australia",
+          value: "australia",
+          code: "AU",
+          states: [
+            {
+              label: "Australian Capital Territory",
+              value: "australian-capital-territory:ACT",
+            },
+            {
+              label: "New South Wales",
+              value: "new-south-wales:NSW",
+            },
+            {
+              label: "Northern Territory",
+              value: "northern-territory:NT",
+            },
+            {
+              label: "Queensland",
+              value: "queensland:QLD",
+            },
+            {
+              label: "South Australia",
+              value: "south-australia:SA",
+            },
+            {
+              label: "Tasmania",
+              value: "tasmania:TAS",
+            },
+            {
+              label: "Victoria",
+              value: "victoria:VIC",
+            },
+            {
+              label: "Western Australia",
+              value: "western-australia:WA",
+            },
+          ],
+        },
+        {
+          label: "Christmas Island",
+          value: "christmas-island",
+          code: "CX",
+          states: [],
+        },
+        {
+          label: "Cocos (Keeling) Islands",
+          value: "cocos-(keeling)-islands",
+          code: "CC",
+          states: [],
+        },
+        {
+          label: "Cook Islands",
+          value: "cook-islands",
+          code: "CK",
+          states: [],
+        },
+        {
+          label: "Fiji",
+          value: "fiji",
+          code: "FJ",
+          states: [
+            {
+              label: "Central",
+              value: "central:C",
+            },
+            {
+              label: "Eastern",
+              value: "eastern:E",
+            },
+            {
+              label: "Northern",
+              value: "northern:N",
+            },
+            {
+              label: "Rotuma",
+              value: "rotuma:R",
+            },
+            {
+              label: "Western",
+              value: "western:W",
+            },
+          ],
+        },
+        {
+          label: "French Polynesia",
+          value: "french-polynesia",
+          code: "PF",
+          states: [],
+        },
+        {
+          label: "Guam",
+          value: "guam",
+          code: "GU",
+          states: [],
+        },
+        {
+          label: "Kiribati",
+          value: "kiribati",
+          code: "KI",
+          states: [
+            {
+              label: "Gilbert Islands",
+              value: "gilbert-islands:G",
+            },
+            {
+              label: "Line Islands",
+              value: "line-islands:L",
+            },
+            {
+              label: "Phoenix Islands",
+              value: "phoenix-islands:P",
+            },
+          ],
+        },
+        {
+          label: "Marshall Islands",
+          value: "marshall-islands",
+          code: "MH",
+          states: [
+            {
+              label: "Ralik chain",
+              value: "ralik-chain:L",
+            },
+            {
+              label: "Ratak chain",
+              value: "ratak-chain:T",
+            },
+          ],
+        },
+        {
+          label: "Federated States of Micronesia",
+          value: "federated-states-of-micronesia",
+          code: "FM",
+          states: [
+            {
+              label: "Chuuk",
+              value: "chuuk:TRK",
+            },
+            {
+              label: "Kosrae",
+              value: "kosrae:KSA",
+            },
+            {
+              label: "Pohnpei",
+              value: "pohnpei:PNI",
+            },
+            {
+              label: "Yap",
+              value: "yap:YAP",
+            },
+          ],
+        },
+        {
+          label: "Nauru",
+          value: "nauru",
+          code: "NR",
+          states: [
+            {
+              label: "Aiwo",
+              value: "aiwo:01",
+            },
+            {
+              label: "Anabar",
+              value: "anabar:02",
+            },
+            {
+              label: "Anetan",
+              value: "anetan:03",
+            },
+            {
+              label: "Anibare",
+              value: "anibare:04",
+            },
+            {
+              label: "Baiti",
+              value: "baiti:05",
+            },
+            {
+              label: "Boe",
+              value: "boe:06",
+            },
+            {
+              label: "Buada",
+              value: "buada:07",
+            },
+            {
+              label: "Denigomodu",
+              value: "denigomodu:08",
+            },
+            {
+              label: "Ewa",
+              value: "ewa:09",
+            },
+            {
+              label: "Ijuw",
+              value: "ijuw:10",
+            },
+            {
+              label: "Meneng",
+              value: "meneng:11",
+            },
+            {
+              label: "Nibok",
+              value: "nibok:12",
+            },
+            {
+              label: "Uaboe",
+              value: "uaboe:13",
+            },
+            {
+              label: "Yaren",
+              value: "yaren:14",
+            },
+          ],
+        },
+        {
+          label: "New Caledonia",
+          value: "new-caledonia",
+          code: "NC",
+          states: [],
+        },
+        {
+          label: "New Zealand",
+          value: "new-zealand",
+          code: "NZ",
+          states: [
+            {
+              label: "North Island",
+              value: "north-island:N",
+            },
+            {
+              label: "South Island",
+              value: "south-island:S",
+            },
+            {
+              label: "Auckland",
+              value: "auckland:AUK",
+            },
+            {
+              label: "Bay of Plenty",
+              value: "bay-of-plenty:BOP",
+            },
+            {
+              label: "Canterbury",
+              value: "canterbury:CAN",
+            },
+            {
+              label: "Hawke's Bay",
+              value: "hawke's-bay:HKB",
+            },
+            {
+              label: "Manawatu-Wanganui",
+              value: "manawatu-wanganui:MWT",
+            },
+            {
+              label: "Northland",
+              value: "northland:NTL",
+            },
+            {
+              label: "Otago",
+              value: "otago:OTA",
+            },
+            {
+              label: "Southland",
+              value: "southland:STL",
+            },
+            {
+              label: "Taranaki",
+              value: "taranaki:TKI",
+            },
+            {
+              label: "Waikato",
+              value: "waikato:WKO",
+            },
+            {
+              label: "Wellington",
+              value: "wellington:WGN",
+            },
+            {
+              label: "West Coast",
+              value: "west-coast:WTC",
+            },
+            {
+              label: "Chatham Islands Territory",
+              value: "chatham-islands-territory:CIT",
+            },
+            {
+              label: "Gisborne District",
+              value: "gisborne-district:GIS",
+            },
+            {
+              label: "Marlborough District",
+              value: "marlborough-district:MBH",
+            },
+            {
+              label: "Nelson City",
+              value: "nelson-city:NSN",
+            },
+            {
+              label: "Tasman District",
+              value: "tasman-district:TAS",
+            },
+          ],
+        },
+        {
+          label: "Niue",
+          value: "niue",
+          code: "NU",
+          states: [],
+        },
+        {
+          label: "Norfolk Island",
+          value: "norfolk-island",
+          code: "NF",
+          states: [],
+        },
+        {
+          label: "Northern Mariana Islands",
+          value: "northern-mariana-islands",
+          code: "MP",
+          states: [],
+        },
+        {
+          label: "Palau",
+          value: "palau",
+          code: "PW",
+          states: [
+            {
+              label: "Aimeliik",
+              value: "aimeliik:002",
+            },
+            {
+              label: "Airai",
+              value: "airai:004",
+            },
+            {
+              label: "Angaur",
+              value: "angaur:010",
+            },
+            {
+              label: "Hatobohei",
+              value: "hatobohei:050",
+            },
+            {
+              label: "Kayangel",
+              value: "kayangel:100",
+            },
+            {
+              label: "Koror",
+              value: "koror:150",
+            },
+            {
+              label: "Melekeok",
+              value: "melekeok:212",
+            },
+            {
+              label: "Ngaraard",
+              value: "ngaraard:214",
+            },
+            {
+              label: "Ngarchelong",
+              value: "ngarchelong:218",
+            },
+            {
+              label: "Ngardmau",
+              value: "ngardmau:222",
+            },
+            {
+              label: "Ngatpang",
+              value: "ngatpang:224",
+            },
+            {
+              label: "Ngchesar",
+              value: "ngchesar:226",
+            },
+            {
+              label: "Ngeremlengui",
+              value: "ngeremlengui:227",
+            },
+            {
+              label: "Ngiwal",
+              value: "ngiwal:228",
+            },
+            {
+              label: "Peleliu",
+              value: "peleliu:350",
+            },
+            {
+              label: "Sonsorol",
+              value: "sonsorol:370",
+            },
+          ],
+        },
+        {
+          label: "Papua New Guinea",
+          value: "papua-new-guinea",
+          code: "PG",
+          states: [
+            {
+              label: "Bougainville",
+              value: "bougainville:NSB",
+            },
+            {
+              label: "Central",
+              value: "central:CPM",
+            },
+            {
+              label: "Chimbu",
+              value: "chimbu:CPK",
+            },
+            {
+              label: "East New Britain",
+              value: "east-new-britain:EBR",
+            },
+            {
+              label: "East Sepik",
+              value: "east-sepik:ESW",
+            },
+            {
+              label: "Eastern Highlands",
+              value: "eastern-highlands:EHG",
+            },
+            {
+              label: "Enga",
+              value: "enga:EPW",
+            },
+            {
+              label: "Gulf",
+              value: "gulf:GPK",
+            },
+            {
+              label: "Madang",
+              value: "madang:MPM",
+            },
+            {
+              label: "Manus",
+              value: "manus:MRL",
+            },
+            {
+              label: "Milne Bay",
+              value: "milne-bay:MBA",
+            },
+            {
+              label: "Morobe",
+              value: "morobe:MPL",
+            },
+            {
+              label: "National Capital District",
+              value: "national-capital-district:NCD",
+            },
+            {
+              label: "New Ireland",
+              value: "new-ireland:NIK",
+            },
+            {
+              label: "Northern",
+              value: "northern:NPP",
+            },
+            {
+              label: "Sandaun",
+              value: "sandaun:SAN",
+            },
+            {
+              label: "Southern Highlands",
+              value: "southern-highlands:SHM",
+            },
+            {
+              label: "West New Britain",
+              value: "west-new-britain:WBK",
+            },
+            {
+              label: "Western",
+              value: "western:WPD",
+            },
+            {
+              label: "Western Highlands",
+              value: "western-highlands:WHM",
+            },
+          ],
+        },
+        {
+          label: "Pitcairn Islands",
+          value: "pitcairn-islands",
+          code: "PN",
+          states: [],
+        },
+        {
+          label: "Samoa",
+          value: "samoa",
+          code: "WS",
+          states: [
+            {
+              label: "A'ana",
+              value: "a'ana:AA",
+            },
+            {
+              label: "Aiga-i-le-Tai",
+              value: "aiga-i-le-tai:AL",
+            },
+            {
+              label: "Atua",
+              value: "atua:AT",
+            },
+            {
+              label: "Fa'asaleleaga",
+              value: "fa'asaleleaga:FA",
+            },
+            {
+              label: "Gaga'emauga",
+              value: "gaga'emauga:GE",
+            },
+            {
+              label: "Gagaifomauga",
+              value: "gagaifomauga:GI",
+            },
+            {
+              label: "Palauli",
+              value: "palauli:PA",
+            },
+            {
+              label: "Satupa'itea",
+              value: "satupa'itea:SA",
+            },
+            {
+              label: "Tuamasaga",
+              value: "tuamasaga:TU",
+            },
+            {
+              label: "Va'a-o-Fonoti",
+              value: "va'a-o-fonoti:VF",
+            },
+            {
+              label: "Vaisigano",
+              value: "vaisigano:VS",
+            },
+          ],
+        },
+        {
+          label: "Solomon Islands",
+          value: "solomon-islands",
+          code: "SB",
+          states: [
+            {
+              label: "Capital Territory",
+              value: "capital-territory:CT",
+            },
+            {
+              label: "Central",
+              value: "central:CE",
+            },
+            {
+              label: "Choiseul",
+              value: "choiseul:CH",
+            },
+            {
+              label: "Guadalcanal",
+              value: "guadalcanal:GU",
+            },
+            {
+              label: "Isabel",
+              value: "isabel:IS",
+            },
+            {
+              label: "Makira-Ulawa",
+              value: "makira-ulawa:MK",
+            },
+            {
+              label: "Malaita",
+              value: "malaita:ML",
+            },
+            {
+              label: "Rennell and Bellona",
+              value: "rennell-and-bellona:RB",
+            },
+            {
+              label: "Temotu",
+              value: "temotu:TE",
+            },
+            {
+              label: "Western",
+              value: "western:WE",
+            },
+          ],
+        },
+        {
+          label: "Tokelau",
+          value: "tokelau",
+          code: "TK",
+          states: [],
+        },
+        {
+          label: "Tonga",
+          value: "tonga",
+          code: "TO",
+          states: [
+            {
+              label: "'Eua",
+              value: "'eua:01",
+            },
+            {
+              label: "Ha'apai",
+              value: "ha'apai:02",
+            },
+            {
+              label: "Niuas",
+              value: "niuas:03",
+            },
+            {
+              label: "Tongatapu",
+              value: "tongatapu:04",
+            },
+            {
+              label: "Vava'u",
+              value: "vava'u:05",
+            },
+          ],
+        },
+        {
+          label: "Tuvalu",
+          value: "tuvalu",
+          code: "TV",
+          states: [
+            {
+              label: "Funafuti",
+              value: "funafuti:FUN",
+            },
+            {
+              label: "Nanumanga",
+              value: "nanumanga:NMG",
+            },
+            {
+              label: "Nanumea",
+              value: "nanumea:NMA",
+            },
+            {
+              label: "Niutao",
+              value: "niutao:NIT",
+            },
+            {
+              label: "Nui",
+              value: "nui:NUI",
+            },
+            {
+              label: "Nukufetau",
+              value: "nukufetau:NKF",
+            },
+            {
+              label: "Nukulaelae",
+              value: "nukulaelae:NKL",
+            },
+            {
+              label: "Vaitupu",
+              value: "vaitupu:VAI",
+            },
+          ],
+        },
+        {
+          label: "Vanuatu",
+          value: "vanuatu",
+          code: "VU",
+          states: [
+            {
+              label: "Malampa",
+              value: "malampa:MAP",
+            },
+            {
+              label: "Pénama",
+              value: "pénama:PAM",
+            },
+            {
+              label: "Sanma",
+              value: "sanma:SAM",
+            },
+            {
+              label: "Shéfa",
+              value: "shéfa:SEE",
+            },
+            {
+              label: "Taféa",
+              value: "taféa:TAE",
+            },
+            {
+              label: "Torba",
+              value: "torba:TOB",
+            },
+          ],
+        },
+        {
+          label: "Wallis and Futuna",
+          value: "wallis-and-futuna",
+          code: "WF",
+          states: [],
+        },
+      ],
+    },
+    {
+      label: "South America",
+      value: "south-america",
+      countries: [
+        {
+          label: "Argentina",
+          value: "argentina",
+          code: "AR",
+          states: [
+            {
+              label: "Buenos Aires",
+              value: "buenos-aires:B",
+            },
+            {
+              label: "Catamarca",
+              value: "catamarca:K",
+            },
+            {
+              label: "Chaco",
+              value: "chaco:H",
+            },
+            {
+              label: "Chubut",
+              value: "chubut:U",
+            },
+            {
+              label: "Ciudad Autónoma de Buenos Aires",
+              value: "ciudad-autónoma-de-buenos-aires:C",
+            },
+            {
+              label: "Corrientes",
+              value: "corrientes:W",
+            },
+            {
+              label: "Córdoba",
+              value: "córdoba:X",
+            },
+            {
+              label: "Entre Ríos",
+              value: "entre-ríos:E",
+            },
+            {
+              label: "Formosa",
+              value: "formosa:P",
+            },
+            {
+              label: "Jujuy",
+              value: "jujuy:Y",
+            },
+            {
+              label: "La Pampa",
+              value: "la-pampa:L",
+            },
+            {
+              label: "La Rioja",
+              value: "la-rioja:F",
+            },
+            {
+              label: "Mendoza",
+              value: "mendoza:M",
+            },
+            {
+              label: "Misiones",
+              value: "misiones:N",
+            },
+            {
+              label: "Neuquén",
+              value: "neuquén:Q",
+            },
+            {
+              label: "Río Negro",
+              value: "río-negro:R",
+            },
+            {
+              label: "Salta",
+              value: "salta:A",
+            },
+            {
+              label: "San Juan",
+              value: "san-juan:J",
+            },
+            {
+              label: "San Luis",
+              value: "san-luis:D",
+            },
+            {
+              label: "Santa Cruz",
+              value: "santa-cruz:Z",
+            },
+            {
+              label: "Santa Fe",
+              value: "santa-fe:S",
+            },
+            {
+              label: "Santiago del Estero",
+              value: "santiago-del-estero:G",
+            },
+            {
+              label: "Tierra del Fuego",
+              value: "tierra-del-fuego:V",
+            },
+            {
+              label: "Tucumán",
+              value: "tucumán:T",
+            },
+          ],
+        },
+        {
+          label: "Bolivia",
+          value: "bolivia",
+          code: "BO",
+          states: [
+            {
+              label: "Chuquisaca",
+              value: "chuquisaca:H",
+            },
+            {
+              label: "Cochabamba",
+              value: "cochabamba:C",
+            },
+            {
+              label: "El Beni",
+              value: "el-beni:B",
+            },
+            {
+              label: "La Paz",
+              value: "la-paz:L",
+            },
+            {
+              label: "Oruro",
+              value: "oruro:O",
+            },
+            {
+              label: "Pando",
+              value: "pando:N",
+            },
+            {
+              label: "Potosí",
+              value: "potosí:P",
+            },
+            {
+              label: "Santa Cruz",
+              value: "santa-cruz:S",
+            },
+            {
+              label: "Tarija",
+              value: "tarija:T",
+            },
+          ],
+        },
+        {
+          label: "Brazil",
+          value: "brazil",
+          code: "BR",
+          states: [
+            {
+              label: "Acre",
+              value: "acre:AC",
+            },
+            {
+              label: "Alagoas",
+              value: "alagoas:AL",
+            },
+            {
+              label: "Amapá",
+              value: "amapá:AP",
+            },
+            {
+              label: "Amazonas",
+              value: "amazonas:AM",
+            },
+            {
+              label: "Bahia",
+              value: "bahia:BA",
+            },
+            {
+              label: "Ceará",
+              value: "ceará:CE",
+            },
+            {
+              label: "Distrito Federal",
+              value: "distrito-federal:DF",
+            },
+            {
+              label: "Espírito Santo",
+              value: "espírito-santo:ES",
+            },
+            {
+              label: "Goiás",
+              value: "goiás:GO",
+            },
+            {
+              label: "Maranhão",
+              value: "maranhão:MA",
+            },
+            {
+              label: "Mato Grosso",
+              value: "mato-grosso:MT",
+            },
+            {
+              label: "Mato Grosso do Sul",
+              value: "mato-grosso-do-sul:MS",
+            },
+            {
+              label: "Minas Gerais",
+              value: "minas-gerais:MG",
+            },
+            {
+              label: "Paraná",
+              value: "paraná:PR",
+            },
+            {
+              label: "Paraíba",
+              value: "paraíba:PB",
+            },
+            {
+              label: "Pará",
+              value: "pará:PA",
+            },
+            {
+              label: "Pernambuco",
+              value: "pernambuco:PE",
+            },
+            {
+              label: "Piauí",
+              value: "piauí:PI",
+            },
+            {
+              label: "Rio Grande do Norte",
+              value: "rio-grande-do-norte:RN",
+            },
+            {
+              label: "Rio Grande do Sul",
+              value: "rio-grande-do-sul:RS",
+            },
+            {
+              label: "Rio de Janeiro",
+              value: "rio-de-janeiro:RJ",
+            },
+            {
+              label: "Rondônia",
+              value: "rondônia:RO",
+            },
+            {
+              label: "Roraima",
+              value: "roraima:RR",
+            },
+            {
+              label: "Santa Catarina",
+              value: "santa-catarina:SC",
+            },
+            {
+              label: "Sergipe",
+              value: "sergipe:SE",
+            },
+            {
+              label: "São Paulo",
+              value: "são-paulo:SP",
+            },
+            {
+              label: "Tocantins",
+              value: "tocantins:TO",
+            },
+          ],
+        },
+        {
+          label: "Chile",
+          value: "chile",
+          code: "CL",
+          states: [
+            {
+              label: "Aisén del General Carlos Ibañez del Campo",
+              value: "aisén-del-general-carlos-ibañez-del-campo:AI",
+            },
+            {
+              label: "Antofagasta",
+              value: "antofagasta:AN",
+            },
+            {
+              label: "Araucanía",
+              value: "araucanía:AR",
+            },
+            {
+              label: "Arica y Parinacota",
+              value: "arica-y-parinacota:AP",
+            },
+            {
+              label: "Atacama",
+              value: "atacama:AT",
+            },
+            {
+              label: "Bío-Bío",
+              value: "bío-bío:BI",
+            },
+            {
+              label: "Coquimbo",
+              value: "coquimbo:CO",
+            },
+            {
+              label: "Libertador General Bernardo O'Higgins",
+              value: "libertador-general-bernardo-o'higgins:LI",
+            },
+            {
+              label: "Los Lagos",
+              value: "los-lagos:LL",
+            },
+            {
+              label: "Los Ríos",
+              value: "los-ríos:LR",
+            },
+            {
+              label: "Magallanes",
+              value: "magallanes:MA",
+            },
+            {
+              label: "Maule",
+              value: "maule:ML",
+            },
+            {
+              label: "Región Metropolitana de Santiago",
+              value: "región-metropolitana-de-santiago:RM",
+            },
+            {
+              label: "Tarapacá",
+              value: "tarapacá:TA",
+            },
+            {
+              label: "Valparaíso",
+              value: "valparaíso:VS",
+            },
+          ],
+        },
+        {
+          label: "Colombia",
+          value: "colombia",
+          code: "CO",
+          states: [
+            {
+              label: "Amazonas",
+              value: "amazonas:AMA",
+            },
+            {
+              label: "Antioquia",
+              value: "antioquia:ANT",
+            },
+            {
+              label: "Arauca",
+              value: "arauca:ARA",
+            },
+            {
+              label: "Atlántico",
+              value: "atlántico:ATL",
+            },
+            {
+              label: "Bolívar",
+              value: "bolívar:BOL",
+            },
+            {
+              label: "Boyacá",
+              value: "boyacá:BOY",
+            },
+            {
+              label: "Caldas",
+              value: "caldas:CAL",
+            },
+            {
+              label: "Caquetá",
+              value: "caquetá:CAQ",
+            },
+            {
+              label: "Casanare",
+              value: "casanare:CAS",
+            },
+            {
+              label: "Cauca",
+              value: "cauca:CAU",
+            },
+            {
+              label: "Cesar",
+              value: "cesar:CES",
+            },
+            {
+              label: "Chocó",
+              value: "chocó:CHO",
+            },
+            {
+              label: "Cundinamarca",
+              value: "cundinamarca:CUN",
+            },
+            {
+              label: "Córdoba",
+              value: "córdoba:COR",
+            },
+            {
+              label: "Distrito Capital de Bogotá",
+              value: "distrito-capital-de-bogotá:DC",
+            },
+            {
+              label: "Guainía",
+              value: "guainía:GUA",
+            },
+            {
+              label: "Guaviare",
+              value: "guaviare:GUV",
+            },
+            {
+              label: "Huila",
+              value: "huila:HUI",
+            },
+            {
+              label: "La Guajira",
+              value: "la-guajira:LAG",
+            },
+            {
+              label: "Magdalena",
+              value: "magdalena:MAG",
+            },
+            {
+              label: "Meta",
+              value: "meta:MET",
+            },
+            {
+              label: "Nariño",
+              value: "nariño:NAR",
+            },
+            {
+              label: "Norte de Santander",
+              value: "norte-de-santander:NSA",
+            },
+            {
+              label: "Putumayo",
+              value: "putumayo:PUT",
+            },
+            {
+              label: "Quindío",
+              value: "quindío:QUI",
+            },
+            {
+              label: "Risaralda",
+              value: "risaralda:RIS",
+            },
+            {
+              label: "San Andrés, Providencia y Santa Catalina",
+              value: "san-andrés,-providencia-y-santa-catalina:SAP",
+            },
+            {
+              label: "Santander",
+              value: "santander:SAN",
+            },
+            {
+              label: "Sucre",
+              value: "sucre:SUC",
+            },
+            {
+              label: "Tolima",
+              value: "tolima:TOL",
+            },
+            {
+              label: "Valle del Cauca",
+              value: "valle-del-cauca:VAC",
+            },
+            {
+              label: "Vaupés",
+              value: "vaupés:VAU",
+            },
+            {
+              label: "Vichada",
+              value: "vichada:VID",
+            },
+          ],
+        },
+        {
+          label: "Ecuador",
+          value: "ecuador",
+          code: "EC",
+          states: [
+            {
+              label: "Azuay",
+              value: "azuay:A",
+            },
+            {
+              label: "Bolívar",
+              value: "bolívar:B",
+            },
+            {
+              label: "Carchi",
+              value: "carchi:C",
+            },
+            {
+              label: "Cañar",
+              value: "cañar:F",
+            },
+            {
+              label: "Chimborazo",
+              value: "chimborazo:H",
+            },
+            {
+              label: "Cotopaxi",
+              value: "cotopaxi:X",
+            },
+            {
+              label: "El Oro",
+              value: "el-oro:O",
+            },
+            {
+              label: "Esmeraldas",
+              value: "esmeraldas:E",
+            },
+            {
+              label: "Galápagos",
+              value: "galápagos:W",
+            },
+            {
+              label: "Guayas",
+              value: "guayas:G",
+            },
+            {
+              label: "Imbabura",
+              value: "imbabura:I",
+            },
+            {
+              label: "Loja",
+              value: "loja:L",
+            },
+            {
+              label: "Los Ríos",
+              value: "los-ríos:R",
+            },
+            {
+              label: "Manabí",
+              value: "manabí:M",
+            },
+            {
+              label: "Morona-Santiago",
+              value: "morona-santiago:S",
+            },
+            {
+              label: "Napo",
+              value: "napo:N",
+            },
+            {
+              label: "Orellana",
+              value: "orellana:D",
+            },
+            {
+              label: "Pastaza",
+              value: "pastaza:Y",
+            },
+            {
+              label: "Pichincha",
+              value: "pichincha:P",
+            },
+            {
+              label: "Santa Elena",
+              value: "santa-elena:SE",
+            },
+            {
+              label: "Santo Domingo de los Tsáchilas",
+              value: "santo-domingo-de-los-tsáchilas:SD",
+            },
+            {
+              label: "Sucumbíos",
+              value: "sucumbíos:U",
+            },
+            {
+              label: "Tungurahua",
+              value: "tungurahua:T",
+            },
+            {
+              label: "Zamora-Chinchipe",
+              value: "zamora-chinchipe:Z",
+            },
+          ],
+        },
+        {
+          label: "Falkland Islands",
+          value: "falkland-islands",
+          code: "FK",
+          states: [],
+        },
+        {
+          label: "French Guiana",
+          value: "french-guiana",
+          code: "GF",
+          states: [],
+        },
+        {
+          label: "Guyana",
+          value: "guyana",
+          code: "GY",
+          states: [
+            {
+              label: "Barima-Waini",
+              value: "barima-waini:BA",
+            },
+            {
+              label: "Cuyuni-Mazaruni",
+              value: "cuyuni-mazaruni:CU",
+            },
+            {
+              label: "Demerara-Mahaica",
+              value: "demerara-mahaica:DE",
+            },
+            {
+              label: "East Berbice-Corentyne",
+              value: "east-berbice-corentyne:EB",
+            },
+            {
+              label: "Essequibo Islands-West Demerara",
+              value: "essequibo-islands-west-demerara:ES",
+            },
+            {
+              label: "Mahaica-Berbice",
+              value: "mahaica-berbice:MA",
+            },
+            {
+              label: "Pomeroon-Supenaam",
+              value: "pomeroon-supenaam:PM",
+            },
+            {
+              label: "Potaro-Siparuni",
+              value: "potaro-siparuni:PT",
+            },
+            {
+              label: "Upper Demerara-Berbice",
+              value: "upper-demerara-berbice:UD",
+            },
+            {
+              label: "Upper Takutu-Upper Essequibo",
+              value: "upper-takutu-upper-essequibo:UT",
+            },
+          ],
+        },
+        {
+          label: "Paraguay",
+          value: "paraguay",
+          code: "PY",
+          states: [
+            {
+              label: "Alto Paraguay",
+              value: "alto-paraguay:16",
+            },
+            {
+              label: "Alto Paraná",
+              value: "alto-paraná:10",
+            },
+            {
+              label: "Amambay",
+              value: "amambay:13",
+            },
+            {
+              label: "Asunción",
+              value: "asunción:ASU",
+            },
+            {
+              label: "Boquerón",
+              value: "boquerón:19",
+            },
+            {
+              label: "Caaguazú",
+              value: "caaguazú:5",
+            },
+            {
+              label: "Caazapá",
+              value: "caazapá:6",
+            },
+            {
+              label: "Canindeyú",
+              value: "canindeyú:14",
+            },
+            {
+              label: "Central",
+              value: "central:11",
+            },
+            {
+              label: "Concepción",
+              value: "concepción:1",
+            },
+            {
+              label: "Cordillera",
+              value: "cordillera:3",
+            },
+            {
+              label: "Guairá",
+              value: "guairá:4",
+            },
+            {
+              label: "Itapúa",
+              value: "itapúa:7",
+            },
+            {
+              label: "Misiones",
+              value: "misiones:8",
+            },
+            {
+              label: "Paraguarí",
+              value: "paraguarí:9",
+            },
+            {
+              label: "Presidente Hayes",
+              value: "presidente-hayes:15",
+            },
+            {
+              label: "San Pedro",
+              value: "san-pedro:2",
+            },
+            {
+              label: "Ñeembucú",
+              value: "ñeembucú:12",
+            },
+          ],
+        },
+        {
+          label: "Peru",
+          value: "peru",
+          code: "PE",
+          states: [
+            {
+              label: "Amazonas",
+              value: "amazonas:AMA",
+            },
+            {
+              label: "Ancash",
+              value: "ancash:ANC",
+            },
+            {
+              label: "Apurímac",
+              value: "apurímac:APU",
+            },
+            {
+              label: "Arequipa",
+              value: "arequipa:ARE",
+            },
+            {
+              label: "Ayacucho",
+              value: "ayacucho:AYA",
+            },
+            {
+              label: "Cajamarca",
+              value: "cajamarca:CAJ",
+            },
+            {
+              label: "Cusco",
+              value: "cusco:CUS",
+            },
+            {
+              label: "El Callao",
+              value: "el-callao:CAL",
+            },
+            {
+              label: "Huancavelica",
+              value: "huancavelica:HUV",
+            },
+            {
+              label: "Huánuco",
+              value: "huánuco:HUC",
+            },
+            {
+              label: "Ica",
+              value: "ica:ICA",
+            },
+            {
+              label: "Junín",
+              value: "junín:JUN",
+            },
+            {
+              label: "La Libertad",
+              value: "la-libertad:LAL",
+            },
+            {
+              label: "Lambayeque",
+              value: "lambayeque:LAM",
+            },
+            {
+              label: "Lima",
+              value: "lima:LIM",
+            },
+            {
+              label: "Loreto",
+              value: "loreto:LOR",
+            },
+            {
+              label: "Madre de Dios",
+              value: "madre-de-dios:MDD",
+            },
+            {
+              label: "Moquegua",
+              value: "moquegua:MOQ",
+            },
+            {
+              label: "Municipalidad Metropolitana de Lima",
+              value: "municipalidad-metropolitana-de-lima:LMA",
+            },
+            {
+              label: "Pasco",
+              value: "pasco:PAS",
+            },
+            {
+              label: "Piura",
+              value: "piura:PIU",
+            },
+            {
+              label: "Puno",
+              value: "puno:PUN",
+            },
+            {
+              label: "San Martín",
+              value: "san-martín:SAM",
+            },
+            {
+              label: "Tacna",
+              value: "tacna:TAC",
+            },
+            {
+              label: "Tumbes",
+              value: "tumbes:TUM",
+            },
+            {
+              label: "Ucayali",
+              value: "ucayali:UCA",
+            },
+          ],
+        },
+        {
+          label: "South Georgia",
+          value: "south-georgia",
+          code: "GS",
+          states: [],
+        },
+        {
+          label: "Suriname",
+          value: "suriname",
+          code: "SR",
+          states: [
+            {
+              label: "Brokopondo",
+              value: "brokopondo:BR",
+            },
+            {
+              label: "Commewijne",
+              value: "commewijne:CM",
+            },
+            {
+              label: "Coronie",
+              value: "coronie:CR",
+            },
+            {
+              label: "Marowijne",
+              value: "marowijne:MA",
+            },
+            {
+              label: "Nickerie",
+              value: "nickerie:NI",
+            },
+            {
+              label: "Para",
+              value: "para:PR",
+            },
+            {
+              label: "Paramaribo",
+              value: "paramaribo:PM",
+            },
+            {
+              label: "Saramacca",
+              value: "saramacca:SA",
+            },
+            {
+              label: "Sipaliwini",
+              value: "sipaliwini:SI",
+            },
+            {
+              label: "Wanica",
+              value: "wanica:WA",
+            },
+          ],
+        },
+        {
+          label: "Uruguay",
+          value: "uruguay",
+          code: "UY",
+          states: [
+            {
+              label: "Artigas",
+              value: "artigas:AR",
+            },
+            {
+              label: "Canelones",
+              value: "canelones:CA",
+            },
+            {
+              label: "Cerro Largo",
+              value: "cerro-largo:CL",
+            },
+            {
+              label: "Colonia",
+              value: "colonia:CO",
+            },
+            {
+              label: "Durazno",
+              value: "durazno:DU",
+            },
+            {
+              label: "Flores",
+              value: "flores:FS",
+            },
+            {
+              label: "Florida",
+              value: "florida:FD",
+            },
+            {
+              label: "Lavalleja",
+              value: "lavalleja:LA",
+            },
+            {
+              label: "Maldonado",
+              value: "maldonado:MA",
+            },
+            {
+              label: "Montevideo",
+              value: "montevideo:MO",
+            },
+            {
+              label: "Paysandú",
+              value: "paysandú:PA",
+            },
+            {
+              label: "Rivera",
+              value: "rivera:RV",
+            },
+            {
+              label: "Rocha",
+              value: "rocha:RO",
+            },
+            {
+              label: "Río Negro",
+              value: "río-negro:RN",
+            },
+            {
+              label: "Salto",
+              value: "salto:SA",
+            },
+            {
+              label: "San José",
+              value: "san-josé:SJ",
+            },
+            {
+              label: "Soriano",
+              value: "soriano:SO",
+            },
+            {
+              label: "Tacuarembó",
+              value: "tacuarembó:TA",
+            },
+            {
+              label: "Treinta y Tres",
+              value: "treinta-y-tres:TT",
+            },
+          ],
+        },
+        {
+          label: "Venezuela",
+          value: "venezuela",
+          code: "VE",
+          states: [
+            {
+              label: "Amazonas",
+              value: "amazonas:Z",
+            },
+            {
+              label: "Anzoátegui",
+              value: "anzoátegui:B",
+            },
+            {
+              label: "Apure",
+              value: "apure:C",
+            },
+            {
+              label: "Aragua",
+              value: "aragua:D",
+            },
+            {
+              label: "Barinas",
+              value: "barinas:E",
+            },
+            {
+              label: "Bolívar",
+              value: "bolívar:F",
+            },
+            {
+              label: "Carabobo",
+              value: "carabobo:G",
+            },
+            {
+              label: "Cojedes",
+              value: "cojedes:H",
+            },
+            {
+              label: "Delta Amacuro",
+              value: "delta-amacuro:Y",
+            },
+            {
+              label: "Dependencias Federales",
+              value: "dependencias-federales:W",
+            },
+            {
+              label: "Distrito Capital",
+              value: "distrito-capital:A",
+            },
+            {
+              label: "Falcón",
+              value: "falcón:I",
+            },
+            {
+              label: "Guárico",
+              value: "guárico:J",
+            },
+            {
+              label: "Lara",
+              value: "lara:K",
+            },
+            {
+              label: "Miranda",
+              value: "miranda:M",
+            },
+            {
+              label: "Monagas",
+              value: "monagas:N",
+            },
+            {
+              label: "Mérida",
+              value: "mérida:L",
+            },
+            {
+              label: "Nueva Esparta",
+              value: "nueva-esparta:O",
+            },
+            {
+              label: "Portuguesa",
+              value: "portuguesa:P",
+            },
+            {
+              label: "Sucre",
+              value: "sucre:R",
+            },
+            {
+              label: "Trujillo",
+              value: "trujillo:T",
+            },
+            {
+              label: "Táchira",
+              value: "táchira:S",
+            },
+            {
+              label: "Vargas",
+              value: "vargas:X",
+            },
+            {
+              label: "Yaracuy",
+              value: "yaracuy:U",
+            },
+            {
+              label: "Zulia",
+              value: "zulia:V",
+            },
+          ],
+        },
+      ],
+    },
+  ],
+}
diff --git a/shared/src/css/cascade-select.css b/shared/src/css/cascade-select.css
index 084401d836..44fbeaebd1 100644
--- a/shared/src/css/cascade-select.css
+++ b/shared/src/css/cascade-select.css
@@ -59,7 +59,7 @@
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
   padding: 6px;
   max-height: 300px;
-  overflow: auto;
+  overflow: hidden;
   display: flex;
   gap: 8px;
 }
@@ -71,6 +71,30 @@
   flex-direction: column;
   gap: 0px;
   position: relative;
+  max-height: 288px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  scrollbar-width: thin;
+  scrollbar-color: #cbd5e1 #f1f5f9;
+}
+
+/* Custom scrollbar styling for levels */
+[data-scope="cascade-select"][data-part="level"]::-webkit-scrollbar {
+  width: 6px;
+}
+
+[data-scope="cascade-select"][data-part="level"]::-webkit-scrollbar-track {
+  background: #f1f5f9;
+  border-radius: 3px;
+}
+
+[data-scope="cascade-select"][data-part="level"]::-webkit-scrollbar-thumb {
+  background: #cbd5e1;
+  border-radius: 3px;
+}
+
+[data-scope="cascade-select"][data-part="level"]::-webkit-scrollbar-thumb:hover {
+  background: #94a3b8;
 }
 
 /* Add a subtle separator line between levels */
diff --git a/shared/src/data.ts b/shared/src/data.ts
index b6d0b11169..9fc7334b9c 100644
--- a/shared/src/data.ts
+++ b/shared/src/data.ts
@@ -1,6 +1,7 @@
 import type { StepDetails } from "@zag-js/tour"
 
 import { countryList } from "./country-list"
+export { cascadeSelectData } from "./cascade-select-data"
 export { paginationData } from "./pagination-data"
 
 export const selectData = countryList.map((country) => ({

From 655c183b521801413d187a8fadb6f6aa41ac286d Mon Sep 17 00:00:00 2001
From: anubra266 <anubra266@gmail.com>
Date: Fri, 6 Jun 2025 14:17:39 -0700
Subject: [PATCH 11/20] chore: tests

---
 e2e/cascade-select.e2e.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/e2e/cascade-select.e2e.ts b/e2e/cascade-select.e2e.ts
index d742421567..8243a1dcf1 100644
--- a/e2e/cascade-select.e2e.ts
+++ b/e2e/cascade-select.e2e.ts
@@ -130,7 +130,7 @@ test.describe("keyboard navigation", () => {
   test("should select item with Enter", async () => {
     await I.focusTrigger()
     await I.pressKey("Enter")
-    await I.pressKey("ArrowDown") // Navigate to Africa (skip disabled Antarctica)
+    await I.pressKey("ArrowDown") // Navigate to Africa
     await I.pressKey("ArrowRight") // Navigate into Africa
     // Now we're in Algeria (first country alphabetically)
     await I.pressKey("ArrowRight") // Navigate into Algeria states

From d520f53babba96357eb5b26579e089c8d3594dbe Mon Sep 17 00:00:00 2001
From: anubra266 <anubra266@gmail.com>
Date: Fri, 6 Jun 2025 14:23:04 -0700
Subject: [PATCH 12/20] chore: readme

---
 packages/machines/cascade-select/README.md | 114 +++++++++++++--------
 1 file changed, 72 insertions(+), 42 deletions(-)

diff --git a/packages/machines/cascade-select/README.md b/packages/machines/cascade-select/README.md
index 69f02a8343..f9760e1ce3 100644
--- a/packages/machines/cascade-select/README.md
+++ b/packages/machines/cascade-select/README.md
@@ -1,61 +1,91 @@
-# Cascade Select Machine
+# @zag-js/cascade-select
 
-A machine for building cascade select (cascading dropdowns) components.
+Core logic for the cascade select widget implemented as a state machine
+
+A comprehensive state machine for building cascade select (cascading dropdowns) components with hierarchical data
+navigation.
 
 ## Features
 
-- Support for hierarchical data structures
-- Keyboard navigation
-- Multiple selection mode
-- Parent item selection (optional)
-- **Safe Triangle Navigation** - Prevents premature submenu closure when moving mouse from parent items to their
-  children
+### 🌳 **Hierarchical Data Support**
 
-## Safe Triangle Feature
+- Navigate through nested data structures (continents → countries → states)
+- Support for unlimited depth levels
+- Dynamic level generation based on data structure
+- Efficient tree collection management
 
-The safe triangle is a user experience enhancement that solves a common problem in cascading menus: when you move your
-mouse from a parent item toward its submenu, the mouse briefly leaves the parent item, which would normally cause the
-submenu to close before you can reach it.
+### ⌨️ **Full Keyboard Navigation**
 
-The safe triangle creates an invisible triangular area between the parent item and its submenu. As long as the mouse
-stays within this triangle, the submenu remains open, allowing users to smoothly navigate to child items.
+- **Arrow keys**: Navigate between items and levels
+- **Home/End**: Jump to first/last item at any level
+- **Enter/Space**: Select items or navigate into children
+- **Escape**: Close dropdown and return focus
+- **Arrow Left/Right**: Navigate between parent and child levels
 
-### How it works
+### 🎯 **Flexible Selection Modes**
 
-1. When `highlightTrigger` is set to `"hover"` (default)
-2. And a user moves their mouse away from a parent item that has children
-3. A safe triangle is calculated from the mouse position to the submenu area
-4. The submenu stays open as long as the mouse is within this triangle
-5. If the mouse moves outside the triangle, the submenu closes
-6. The triangle automatically expires after 300ms to prevent indefinite hovering
+- **Single selection**: Choose one complete path
+- **Multiple selection**: Select multiple paths simultaneously
+- **Parent selection**: Allow selection of non-leaf items (optional)
+- **Leaf-only selection**: Restrict selection to final items only
 
-### Key improvements for cascade-select layout
+### 🎨 **Interaction Models**
 
-- **Bidirectional navigation**: Works when moving from parent to child AND child to parent
-- **Straight-line optimized**: Designed for the cascade-select's horizontal level layout
-- **Simple corridor**: Creates a rectangular "corridor" between adjacent levels rather than complex triangular areas
+- **Click highlighting**: Navigate by clicking items
+- **Hover highlighting**: Navigate by mouse hover with grace areas
+- **Mixed interaction**: Combine click and hover behaviors
+- **Touch-friendly**: Optimized for mobile interactions
 
-### Debugging the safe triangle
+### ♿ **Accessibility Built-in**
 
-To help debug safe triangle behavior, you can temporarily add this to your CSS to visualize the polygon:
+- **ARIA compliance**: Proper roles, states, and properties
+- **Screen reader support**: Descriptive labels and live regions
+- **Focus management**: Logical tab order and focus restoration
+- **Keyboard-only operation**: Complete functionality without mouse
 
-```css
-/* Add this temporarily to see the safe triangle area */
-.safe-triangle-debug {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
-  z-index: 9999;
-}
-```
+### 🎛️ **Customizable Behavior**
+
+- **Auto-close options**: Control when dropdown closes after selection
+- **Custom separators**: Configure path display formatting
+- **Disabled items**: Mark items as non-selectable
+- **Read-only mode**: Display-only state
+- **Loop navigation**: Circular navigation within levels
+
+### 📱 **UI Integration**
+
+- **Positioning system**: Intelligent dropdown placement with collision detection
+- **Scroll management**: Auto-scroll highlighted items into view
+- **Level indicators**: Visual representation of navigation depth
+- **Loading states**: Handle async data loading
+- **Empty states**: Graceful handling of empty data sets
+
+### 🔧 **Developer Experience**
 
-The safe triangle is automatically enabled for hover-based highlighting and requires no additional configuration.
+- **Event callbacks**: onChange, onHighlight, onOpen/Close events
+- **Custom formatting**: Control display text and value representation
+- **Form integration**: Works with native form elements and validation
+- **TypeScript support**: Full type safety for data structures
+
+## Common Use Cases
+
+- **Geographic selection**: Country → State → City
+- **Category browsing**: Department → Category → Subcategory → Product
+- **Organizational hierarchy**: Company → Division → Team → Employee
+- **File system navigation**: Folder → Subfolder → File
+- **Menu systems**: Main Menu → Submenu → Action
 
 ## Installation
 
-```bash
-npm install @zag-js/cascade-select
+```sh
+yarn add @zag-js/cascade-select
+# or
+npm i @zag-js/cascade-select
 ```
+
+## Contribution
+
+Yes please! See the [contributing guidelines](https://github.com/chakra-ui/zag/blob/main/CONTRIBUTING.md) for details.
+
+## Licence
+
+This project is licensed under the terms of the [MIT license](https://github.com/chakra-ui/zag/blob/main/LICENSE).

From 21e251299a576ecbe1d69461dd8f53aa15efb3c0 Mon Sep 17 00:00:00 2001
From: anubra266 <anubra266@gmail.com>
Date: Tue, 10 Jun 2025 00:08:02 -0700
Subject: [PATCH 13/20] chore: use indexpath

---
 e2e/cascade-select.e2e.ts                     | 111 +--
 e2e/models/cascade-select.model.ts            |  16 +-
 examples/next-ts/pages/cascade-select.tsx     | 115 ++-
 .../src/cascade-select.anatomy.ts             |   2 +-
 .../src/cascade-select.connect.ts             | 193 ++---
 .../cascade-select/src/cascade-select.dom.ts  |  16 +-
 .../src/cascade-select.machine.ts             | 818 +++++++-----------
 .../src/cascade-select.props.ts               |   6 +-
 .../src/cascade-select.types.ts               |  96 +-
 packages/machines/cascade-select/src/index.ts |   8 +-
 shared/src/cascade-select-data.ts             |   1 +
 shared/src/css/cascade-select.css             |  14 +-
 12 files changed, 616 insertions(+), 780 deletions(-)

diff --git a/e2e/cascade-select.e2e.ts b/e2e/cascade-select.e2e.ts
index 8243a1dcf1..32537476be 100644
--- a/e2e/cascade-select.e2e.ts
+++ b/e2e/cascade-select.e2e.ts
@@ -23,7 +23,7 @@ test.describe("basic functionality", () => {
   test("should toggle dropdown on trigger click", async () => {
     await I.clickTrigger()
     await I.seeDropdown()
-    await I.seeLevel(0)
+    await I.seeList(0)
 
     await I.clickTrigger()
     await I.dontSeeDropdown()
@@ -51,23 +51,23 @@ test.describe("basic functionality", () => {
   })
 })
 
-test.describe("navigation and levels", () => {
-  test("should show multiple levels when navigating into parent items", async () => {
+test.describe("navigation and lists", () => {
+  test("should show multiple lists when navigating into parent items", async () => {
     await I.clickTrigger()
-    await I.seeLevel(0)
-    await I.dontSeeLevel(1)
+    await I.seeList(0)
+    await I.dontSeeList(1)
 
     // Click on Africa (continent)
     await I.clickItem("Africa")
-    await I.seeLevel(0)
-    await I.seeLevel(1)
-    await I.dontSeeLevel(2)
+    await I.seeList(0)
+    await I.seeList(1)
+    await I.dontSeeList(2)
 
     // Click on Algeria (country)
     await I.clickItem("Algeria")
-    await I.seeLevel(0)
-    await I.seeLevel(1)
-    await I.seeLevel(2)
+    await I.seeList(0)
+    await I.seeList(1)
+    await I.seeList(2)
   })
 
   test("should show item indicators for parent items", async () => {
@@ -89,33 +89,33 @@ test.describe("keyboard navigation", () => {
     await I.seeDropdown()
 
     await I.pressKey("ArrowDown")
-    await I.seeItemIsHighlighted("Africa")
+    await I.seeItemIsHighlighted("Asia")
 
     await I.pressKey("ArrowDown")
-    await I.seeItemIsHighlighted("Asia")
+    await I.seeItemIsHighlighted("Europe")
 
     await I.pressKey("ArrowUp")
-    await I.seeItemIsHighlighted("Africa")
+    await I.seeItemIsHighlighted("Asia")
   })
 
-  test("should navigate into child level with ArrowRight", async () => {
+  test("should navigate into child list with ArrowRight", async () => {
     await I.focusTrigger()
     await I.pressKey("Enter")
-    await I.pressKey("ArrowDown") // Highlight Africa
-    await I.pressKey("ArrowRight") // Navigate into Africa
+    await I.pressKey("ArrowDown") // Highlight Asia
+    await I.pressKey("ArrowRight") // Navigate into Asia
 
-    await I.seeLevel(1)
-    await I.seeItemIsHighlighted("Algeria")
+    await I.seeList(1)
+    await I.seeItemIsHighlighted("Afghanistan")
   })
 
-  test("should navigate back to parent level with ArrowLeft", async () => {
+  test("should navigate back to parent list with ArrowLeft", async () => {
     await I.focusTrigger()
     await I.pressKey("Enter")
-    await I.pressKey("ArrowDown") // Highlight Africa
-    await I.pressKey("ArrowRight") // Navigate into Africa
+    await I.pressKey("ArrowDown") // Highlight Asia
+    await I.pressKey("ArrowRight") // Navigate into Asia
     await I.pressKey("ArrowLeft") // Navigate back
 
-    await I.seeItemIsHighlighted("Africa")
+    await I.seeItemIsHighlighted("Asia")
   })
 
   test("should close dropdown with Escape", async () => {
@@ -130,21 +130,21 @@ test.describe("keyboard navigation", () => {
   test("should select item with Enter", async () => {
     await I.focusTrigger()
     await I.pressKey("Enter")
-    await I.pressKey("ArrowDown") // Navigate to Africa
-    await I.pressKey("ArrowRight") // Navigate into Africa
-    // Now we're in Algeria (first country alphabetically)
-    await I.pressKey("ArrowRight") // Navigate into Algeria states
-    await I.pressKey("Enter") // Select first state (Adrar)
+    await I.pressKey("ArrowDown") // Navigate to Asia
+    await I.pressKey("ArrowRight") // Navigate into Asia
+    // Now we're in Afghanistan (first country alphabetically)
+    await I.pressKey("ArrowRight") // Navigate into Afghanistan states
+    await I.pressKey("Enter") // Select first state (Badakhshān)
 
-    await I.seeTriggerHasText("Africa / Algeria / Adrar")
+    await I.seeTriggerHasText("Asia / Afghanistan / Badakhshān")
     await I.dontSeeDropdown() // Should close when selecting leaf item
   })
 
   test("should navigate with Home and End keys", async () => {
-    await I.clickTrigger()
+    await I.focusTrigger()
+    await I.pressKey("Enter")
 
-    // Test Home/End at continent level (first level)
-    await I.pressKey("ArrowDown") // This should highlight Africa (first non-disabled item)
+    // Test Home/End at continent list (first list)
     await I.seeItemIsHighlighted("Africa")
 
     await I.pressKey("End")
@@ -153,7 +153,7 @@ test.describe("keyboard navigation", () => {
     await I.pressKey("Home")
     await I.seeItemIsHighlighted("Africa") // Should go back to first item
 
-    // Now test Home/End at country level (second level)
+    // Now test Home/End at country list (second list)
     await I.pressKey("ArrowRight") // Enter Africa (should highlight Algeria - first country)
     await I.seeItemIsHighlighted("Algeria")
 
@@ -165,25 +165,26 @@ test.describe("keyboard navigation", () => {
   })
 
   test("should scroll highlighted items into view during keyboard navigation", async () => {
-    await I.clickTrigger()
+    await I.focusTrigger()
+    await I.pressKey("Enter")
 
     // Navigate to Africa and enter it
-    await I.pressKey("ArrowDown") // Highlight Africa
-    await I.pressKey("ArrowRight") // Enter Africa (Algeria should be highlighted)
+    await I.pressKey("ArrowDown") // Highlight Asia
+    await I.pressKey("ArrowRight") // Enter Asia (Afghanistan should be highlighted)
 
-    // Use End key to navigate to the last country (Zimbabwe)
+    // Use End key to navigate to the last country (Yemen)
     await I.pressKey("End")
-    await I.seeItemIsHighlighted("Zimbabwe")
+    await I.seeItemIsHighlighted("Yemen")
 
-    // Zimbabwe should be scrolled into view
-    await I.seeItemInViewport("Zimbabwe")
+    // Yemen should be scrolled into view
+    await I.seeItemInViewport("Yemen")
 
-    // Use Home key to go back to first country (Algeria)
+    // Use Home key to go back to first country (Afghanistan)
     await I.pressKey("Home")
-    await I.seeItemIsHighlighted("Algeria")
+    await I.seeItemIsHighlighted("Afghanistan")
 
-    // Algeria should also be in viewport
-    await I.seeItemInViewport("Algeria")
+    // Afghanistan should also be in viewport
+    await I.seeItemInViewport("Afghanistan")
   })
 })
 
@@ -194,12 +195,12 @@ test.describe("click highlighting (default)", () => {
     // Click on Africa should highlight it
     await I.clickItem("Africa")
     await I.seeItemIsHighlighted("Africa")
-    await I.seeLevel(1)
+    await I.seeList(1)
 
-    // Click on Algeria should highlight it and show next level
+    // Click on Algeria should highlight it and show next list
     await I.clickItem("Algeria")
     await I.seeItemIsHighlighted("Algeria")
-    await I.seeLevel(2)
+    await I.seeList(2)
   })
 
   test("should not highlight on hover with click trigger", async () => {
@@ -227,18 +228,18 @@ test.describe("hover highlighting", () => {
     // Hovering over continent should highlight path
     await I.hoverItem("Africa")
     await I.seeItemIsHighlighted("Africa")
-    await I.seeLevel(1)
+    await I.seeList(1)
 
     // Hovering over country should highlight full path
     await I.hoverItem("Algeria")
     await I.seeHighlightedItemsCount(2) // Africa and Algeria
-    await I.seeLevel(2)
+    await I.seeList(2)
   })
 
   test("should not highlight full path for leaf items", async () => {
     await I.clickTrigger()
 
-    // Navigate to states level
+    // Navigate to states list
     await I.hoverItem("Africa")
     await I.hoverItem("Algeria")
 
@@ -254,7 +255,7 @@ test.describe("hover highlighting", () => {
     await I.seeItemIsHighlighted("Africa")
 
     // Moving mouse outside should keep highlighting due to grace area
-    await I.clickOutside()
+    await I.hoverOut()
     await I.seeItemIsHighlighted("Africa")
   })
 })
@@ -292,7 +293,7 @@ test.describe("selection behavior", () => {
     await I.seeDropdown() // Should remain open when selecting parent items
   })
 
-  test("should navigate to state level without parent selection", async () => {
+  test("should navigate to state list without parent selection", async () => {
     await I.clickTrigger()
     await I.clickItem("Africa")
     await I.clickItem("Algeria")
@@ -341,7 +342,7 @@ test.describe("focus management", () => {
 
     // Content should be focused for keyboard navigation
     await I.pressKey("ArrowDown")
-    await I.seeItemIsHighlighted("Africa")
+    await I.seeItemIsHighlighted("Asia")
   })
 })
 
@@ -417,8 +418,8 @@ test.describe("separator configuration", () => {
     await I.clickItem("Adrar")
 
     // Verify the hidden select element has the correct value
-    const hiddenSelect = await I.page.locator("select").first()
-    const value = await hiddenSelect.inputValue()
+    const hiddenInput = await I.page.locator("input").first()
+    const value = await hiddenInput.inputValue()
     expect(value).toContain("africa >> algeria >> adrar")
   })
 })
diff --git a/e2e/models/cascade-select.model.ts b/e2e/models/cascade-select.model.ts
index a547d7e32a..7f0f7664c1 100644
--- a/e2e/models/cascade-select.model.ts
+++ b/e2e/models/cascade-select.model.ts
@@ -39,8 +39,8 @@ export class CascadeSelectModel extends Model {
     return this.page.locator(`[data-part=item]`).filter({ hasText: new RegExp(`^${text}$`) })
   }
 
-  getLevel = (level: number) => {
-    return this.page.locator(`[data-part=level][data-level="${level}"]`)
+  getList = (depth: number) => {
+    return this.page.locator(`[data-part=list][data-depth="${depth}"]`)
   }
 
   get highlightedItems() {
@@ -79,6 +79,10 @@ export class CascadeSelectModel extends Model {
     await this.getItem(text).hover()
   }
 
+  hoverOut = async () => {
+    await this.content.hover({ position: { x: 0, y: 0 } })
+  }
+
   seeTriggerIsFocused = async () => {
     await expect(this.trigger).toBeFocused()
   }
@@ -109,12 +113,12 @@ export class CascadeSelectModel extends Model {
     expect(await isInViewport(this.content, item)).toBe(true)
   }
 
-  seeLevel = async (level: number) => {
-    await expect(this.getLevel(level)).toBeVisible()
+  seeList = async (depth: number) => {
+    await expect(this.getList(depth)).toBeVisible()
   }
 
-  dontSeeLevel = async (level: number) => {
-    await expect(this.getLevel(level)).not.toBeVisible()
+  dontSeeList = async (depth: number) => {
+    await expect(this.getList(depth)).not.toBeVisible()
   }
 
   seeItemHasIndicator = async (text: string) => {
diff --git a/examples/next-ts/pages/cascade-select.tsx b/examples/next-ts/pages/cascade-select.tsx
index f5d1aed9d1..98d6bd978f 100644
--- a/examples/next-ts/pages/cascade-select.tsx
+++ b/examples/next-ts/pages/cascade-select.tsx
@@ -1,8 +1,8 @@
-import { normalizeProps, useMachine } from "@zag-js/react"
+import { normalizeProps, Portal, useMachine } from "@zag-js/react"
 import { cascadeSelectControls, cascadeSelectData } from "@zag-js/shared"
 import * as cascadeSelect from "@zag-js/cascade-select"
 import { ChevronDownIcon, ChevronRightIcon, XIcon } from "lucide-react"
-import { useId } from "react"
+import { JSX, useId } from "react"
 import { StateVisualizer } from "../components/state-visualizer"
 import { Toolbar } from "../components/toolbar"
 import { useControls } from "../hooks/use-controls"
@@ -23,6 +23,59 @@ const collection = cascadeSelect.collection<Node>({
   rootNode: cascadeSelectData,
 })
 
+interface TreeNodeProps {
+  node: Node
+  indexPath?: number[]
+  valuePath?: string[]
+  api: cascadeSelect.Api
+}
+
+const TreeNode = (props: TreeNodeProps): JSX.Element => {
+  const { node, indexPath = [], valuePath = [], api } = props
+
+  const nodeProps = { indexPath, valuePath, item: node }
+  const nodeState = api.getItemState(nodeProps)
+  const children = collection.getNodeChildren(node)
+  //
+  const highlightedIndex = api.highlightedIndexPath?.[nodeState.depth]
+  const highlightedNode = children[highlightedIndex]
+
+  return (
+    <>
+      <div {...api.getListProps(nodeProps)}>
+        {children.map((item, index) => {
+          const itemProps = {
+            indexPath: [...indexPath, index],
+            valuePath: [...valuePath, collection.getNodeValue(item)],
+            item,
+          }
+
+          const itemState = api.getItemState(itemProps)
+
+          return (
+            <div key={item.label} {...api.getItemProps(itemProps)}>
+              <span {...api.getItemTextProps(itemProps)}>{item.label}</span>
+              {itemState.hasChildren && (
+                <span {...api.getItemIndicatorProps(itemProps)}>
+                  <ChevronRightIcon size={16} />
+                </span>
+              )}
+            </div>
+          )
+        })}
+      </div>
+      {highlightedNode && collection.isBranchNode(highlightedNode) && (
+        <TreeNode
+          node={highlightedNode}
+          api={api}
+          indexPath={[...indexPath, highlightedIndex]}
+          valuePath={[...valuePath, collection.getNodeValue(highlightedNode)]}
+        />
+      )}
+    </>
+  )
+}
+
 export default function Page() {
   const controls = useControls(cascadeSelectControls)
 
@@ -43,34 +96,6 @@ export default function Page() {
   })
 
   const api = cascadeSelect.connect(service, normalizeProps)
-  const separator = service.prop("separator")
-
-  const renderLevel = (level: number) => {
-    const levelValues = api.getLevelValues(level)
-    if (levelValues.length === 0) return null
-
-    return (
-      <div key={level} {...api.getLevelProps({ level })}>
-        {levelValues.map((value) => {
-          const node = collection.findNode(value)
-          if (!node) return null
-
-          const itemState = api.getItemState({ item: node })
-
-          return (
-            <div key={value} {...api.getItemProps({ item: node })}>
-              <span {...api.getItemTextProps({ item: node })}>{node.label}</span>
-              {itemState.hasChildren && (
-                <span {...api.getItemIndicatorProps({ item: node })}>
-                  <ChevronRightIcon size={16} />
-                </span>
-              )}
-            </div>
-          )
-        })}
-      </div>
-    )
-  }
 
   return (
     <>
@@ -93,30 +118,26 @@ export default function Page() {
             )}
           </div>
 
-          <select {...api.getHiddenSelectProps()}>
-            {api.value.map((path, index) => (
-              <option key={index} value={path.join(separator)}>
-                {path.map((value) => collection.findNode(value)?.label || value).join(separator)}
-              </option>
-            ))}
-          </select>
-
-          <div {...api.getPositionerProps()}>
-            <div {...api.getContentProps()}>
-              {Array.from({ length: api.getLevelDepth() }, (_, level) => renderLevel(level))}
+          <input {...api.getHiddenInputProps()} />
+
+          {/* UI select */}
+          <Portal>
+            <div {...api.getPositionerProps()}>
+              <div {...api.getContentProps()}>
+                <TreeNode node={collection.rootNode} api={api} />
+              </div>
             </div>
-          </div>
+          </Portal>
         </div>
 
+        <div style={{ marginTop: "350px" }}>
+          <h3>Highlighted Path:</h3>
+          <pre>{JSON.stringify(api.highlightedIndexPath, null, 2)}</pre>
+        </div>
         <div style={{ marginTop: "20px" }}>
           <h3>Selected Value:</h3>
           <pre>{JSON.stringify(api.value, null, 2)}</pre>
         </div>
-
-        <div style={{ marginTop: "20px" }}>
-          <h3>Highlighted Path:</h3>
-          <pre>{JSON.stringify(api.highlightedPath, null, 2)}</pre>
-        </div>
       </main>
 
       <Toolbar controls={controls.ui}>
diff --git a/packages/machines/cascade-select/src/cascade-select.anatomy.ts b/packages/machines/cascade-select/src/cascade-select.anatomy.ts
index 5e1a2c4490..be16e3a832 100644
--- a/packages/machines/cascade-select/src/cascade-select.anatomy.ts
+++ b/packages/machines/cascade-select/src/cascade-select.anatomy.ts
@@ -10,7 +10,7 @@ export const anatomy = createAnatomy("cascade-select").parts(
   "clearTrigger",
   "positioner",
   "content",
-  "level",
+  "list",
   "item",
   "itemText",
   "itemIndicator",
diff --git a/packages/machines/cascade-select/src/cascade-select.connect.ts b/packages/machines/cascade-select/src/cascade-select.connect.ts
index df1b2e4720..f337a705a7 100644
--- a/packages/machines/cascade-select/src/cascade-select.connect.ts
+++ b/packages/machines/cascade-select/src/cascade-select.connect.ts
@@ -1,17 +1,10 @@
-import { dataAttr, getEventKey, isLeftClick, visuallyHiddenStyle } from "@zag-js/dom-query"
+import { ariaAttr, dataAttr, getEventKey, isLeftClick, visuallyHiddenStyle } from "@zag-js/dom-query"
 import { getPlacementStyles } from "@zag-js/popper"
 import type { NormalizeProps, PropTypes } from "@zag-js/types"
 import type { Service } from "@zag-js/core"
 import { parts } from "./cascade-select.anatomy"
 import { dom } from "./cascade-select.dom"
-import type {
-  CascadeSelectApi,
-  CascadeSelectSchema,
-  ItemProps,
-  ItemState,
-  LevelProps,
-  TreeNode,
-} from "./cascade-select.types"
+import type { CascadeSelectApi, CascadeSelectSchema, ItemProps, ItemState, TreeNode } from "./cascade-select.types"
 
 export function connect<T extends PropTypes, V = TreeNode>(
   service: Service<CascadeSelectSchema>,
@@ -20,32 +13,64 @@ export function connect<T extends PropTypes, V = TreeNode>(
   const { send, context, prop, scope, computed, state } = service
 
   const collection = prop("collection")
-  const value = context.get("value")
+  // const value = context.get("value")
+  const value = computed("value")
   const open = state.hasTag("open")
   const focused = state.matches("focused")
-  const highlightedPath = context.get("highlightedPath")
+  const highlightedIndexPath = context.get("highlightedIndexPath") ?? []
   const currentPlacement = context.get("currentPlacement")
   const isDisabled = computed("isDisabled")
   const isInteractive = computed("isInteractive")
   const valueText = computed("valueText")
-  const levelDepth = computed("levelDepth")
+
+  const separator = prop("separator")
 
   const popperStyles = getPlacementStyles({
     ...prop("positioning"),
     placement: currentPlacement,
   })
 
+  function isPrefixOfHighlight(indexPath: number[]) {
+    // If indexPath is longer, it can't be a prefix.
+    if (indexPath.length > highlightedIndexPath.length) return false
+
+    // Check each element in indexPath against the corresponding element
+    return indexPath.every((val, idx) => val === highlightedIndexPath[idx])
+  }
+
+  const getItemState = (props: ItemProps<V>): ItemState => {
+    const { item, indexPath } = props
+    const itemValue = collection.getNodeValue(item)
+    const depth = indexPath ? indexPath.length : 0
+
+    const highlighted = isPrefixOfHighlight(indexPath)
+
+    // Check if item is selected (part of any selected path)
+    // const isSelected = value.some((path) => path.includes(itemValue))
+
+    return {
+      value: itemValue,
+      disabled: collection.getNodeDisabled(item),
+      highlighted,
+      selected: false,
+      // selected: isSelected,
+      hasChildren: collection.isBranchNode(item),
+      depth,
+    }
+  }
+
   return {
     collection,
     value,
     valueText,
-    highlightedPath,
+    highlightedIndexPath,
     open,
     focused,
+    separator,
 
-    setValue(value: string[][]) {
-      send({ type: "VALUE.SET", value })
-    },
+    // setValue(value: string[][]) {
+    //   send({ type: "VALUE.SET", value })
+    // },
 
     setOpen(open: boolean) {
       if (open) {
@@ -59,52 +84,15 @@ export function connect<T extends PropTypes, V = TreeNode>(
       send({ type: "HIGHLIGHTED_PATH.SET", value: path })
     },
 
-    selectItem(value: string) {
-      send({ type: "ITEM.SELECT", value })
-    },
+    // selectItem(value: string) {
+    //   send({ type: "ITEM.SELECT", value })
+    // },
 
     clearValue() {
       send({ type: "VALUE.CLEAR" })
     },
 
-    getLevelValues(level: number): string[] {
-      return context.get("levelValues")[level] || []
-    },
-
-    getLevelDepth(): number {
-      return levelDepth
-    },
-
-    getParentValue(level: number): string | null {
-      const values = context.get("value")
-      if (values.length === 0) return null
-
-      // Use the most recent value path
-      const mostRecentValue = values[values.length - 1]
-      return mostRecentValue[level] || null
-    },
-
-    getItemState(props: ItemProps<V>): ItemState {
-      const { item } = props
-      const itemValue = collection.getNodeValue(item)
-      const indexPath = collection.getIndexPath(itemValue)
-      const depth = indexPath ? indexPath.length : 0
-
-      // Check if this item is highlighted (part of the highlighted path)
-      const isHighlighted = highlightedPath ? highlightedPath.includes(itemValue) : false
-
-      // Check if item is selected (part of any selected path)
-      const isSelected = value.some((path) => path.includes(itemValue))
-
-      return {
-        value: itemValue,
-        disabled: collection.getNodeDisabled(item),
-        highlighted: isHighlighted,
-        selected: isSelected,
-        hasChildren: collection.isBranchNode(item),
-        depth,
-      }
-    },
+    getItemState,
 
     getRootProps() {
       return normalize.element({
@@ -121,7 +109,7 @@ export function connect<T extends PropTypes, V = TreeNode>(
       return normalize.label({
         ...parts.label.attrs,
         id: dom.getLabelId(scope),
-        htmlFor: dom.getHiddenSelectId(scope),
+        htmlFor: dom.getHiddenInputId(scope),
         "data-disabled": dataAttr(isDisabled),
         "data-readonly": dataAttr(prop("readOnly")),
         "data-invalid": dataAttr(prop("invalid")),
@@ -161,19 +149,19 @@ export function connect<T extends PropTypes, V = TreeNode>(
         "data-readonly": dataAttr(prop("readOnly")),
         "data-invalid": dataAttr(prop("invalid")),
         disabled: isDisabled,
-        onFocus() {
+        onClick(event) {
           if (!isInteractive) return
+          if (event.defaultPrevented) return
+          send({ type: "TRIGGER.CLICK" })
+        },
+        onFocus() {
           send({ type: "TRIGGER.FOCUS" })
         },
         onBlur() {
           send({ type: "TRIGGER.BLUR" })
         },
-        onClick(event) {
-          if (!isInteractive) return
-          if (!isLeftClick(event)) return
-          send({ type: "TRIGGER.CLICK" })
-        },
         onKeyDown(event) {
+          if (event.defaultPrevented) return
           if (!isInteractive) return
           const key = getEventKey(event)
 
@@ -250,9 +238,9 @@ export function connect<T extends PropTypes, V = TreeNode>(
     },
 
     getContentProps() {
-      const highlightedPath = context.get("highlightedPath")
-      const highlightedValue =
-        highlightedPath && highlightedPath.length > 0 ? highlightedPath[highlightedPath.length - 1] : null
+      const highlightedValue = highlightedIndexPath.length
+        ? collection.getNodeValue(collection.at(highlightedIndexPath))
+        : undefined
       const highlightedItemId = highlightedValue ? dom.getItemId(scope, highlightedValue) : undefined
 
       return normalize.element({
@@ -312,24 +300,38 @@ export function connect<T extends PropTypes, V = TreeNode>(
       })
     },
 
-    getLevelProps(props: LevelProps) {
-      const { level } = props
+    getListProps(props: ItemProps<V>) {
+      const itemState = getItemState(props)
+
       return normalize.element({
-        ...parts.level.attrs,
-        id: dom.getLevelId(scope, level),
-        "data-level": level,
+        ...parts.list.attrs,
+        id: dom.getListId(scope, itemState.value),
+        dir: prop("dir"),
+        "data-depth": itemState.depth,
+        "aria-depth": itemState.depth,
+        role: "group",
       })
     },
 
     getItemProps(props: ItemProps<V>) {
-      const { item } = props
+      const {
+        item,
+        indexPath,
+        valuePath,
+        // TODO closeOnSelect
+      } = props
       const itemValue = collection.getNodeValue(item)
-      const itemState = this.getItemState(props)
+      const itemState = getItemState(props)
 
       return normalize.element({
         ...parts.item.attrs,
         id: dom.getItemId(scope, itemValue),
-        role: "option",
+        role: "treeitem",
+        "aria-haspopup": itemState.hasChildren ? "menu" : undefined,
+        "aria-expanded": itemState.hasChildren ? itemState.highlighted : false,
+        "aria-controls": itemState.hasChildren ? dom.getListId(scope, itemState.value) : undefined,
+        "aria-owns": itemState.hasChildren ? dom.getListId(scope, itemState.value) : undefined,
+        "aria-disabled": ariaAttr(itemState.disabled),
         "data-value": itemValue,
         "data-disabled": dataAttr(itemState.disabled),
         "data-highlighted": dataAttr(itemState.highlighted),
@@ -337,17 +339,19 @@ export function connect<T extends PropTypes, V = TreeNode>(
         "data-has-children": dataAttr(itemState.hasChildren),
         "data-depth": itemState.depth,
         "aria-selected": itemState.selected,
-        "aria-disabled": itemState.disabled,
+        "data-type": itemState.hasChildren ? "branch" : "leaf",
+        "data-index-path": indexPath.join(separator),
+        "data-value-path": valuePath.join(separator),
         onClick(event) {
           if (!isInteractive) return
           if (!isLeftClick(event)) return
           if (itemState.disabled) return
-          send({ type: "ITEM.CLICK", value: itemValue })
+          send({ type: "ITEM.CLICK", indexPath })
         },
         onPointerEnter(event) {
           if (!isInteractive) return
           if (itemState.disabled) return
-          send({ type: "ITEM.POINTER_ENTER", value: itemValue, clientX: event.clientX, clientY: event.clientY })
+          send({ type: "ITEM.POINTER_ENTER", indexPath, clientX: event.clientX, clientY: event.clientY })
         },
         onPointerLeave(event) {
           if (!isInteractive) return
@@ -358,7 +362,7 @@ export function connect<T extends PropTypes, V = TreeNode>(
           const pointerMoved = service.event.previous()?.type.includes("POINTER")
           if (!pointerMoved) return
 
-          send({ type: "ITEM.POINTER_LEAVE", value: itemValue, clientX: event.clientX, clientY: event.clientY })
+          send({ type: "ITEM.POINTER_LEAVE", indexPath, clientX: event.clientX, clientY: event.clientY })
         },
       })
     },
@@ -366,7 +370,7 @@ export function connect<T extends PropTypes, V = TreeNode>(
     getItemTextProps(props: ItemProps<V>) {
       const { item } = props
       const itemValue = collection.getNodeValue(item)
-      const itemState = this.getItemState(props)
+      const itemState = getItemState(props)
       return normalize.element({
         ...parts.itemText.attrs,
         "data-value": itemValue,
@@ -379,7 +383,7 @@ export function connect<T extends PropTypes, V = TreeNode>(
     getItemIndicatorProps(props: ItemProps<V>) {
       const { item } = props
       const itemValue = collection.getNodeValue(item)
-      const itemState = this.getItemState(props)
+      const itemState = getItemState(props)
 
       return normalize.element({
         ...parts.itemIndicator.attrs,
@@ -390,32 +394,23 @@ export function connect<T extends PropTypes, V = TreeNode>(
       })
     },
 
-    getHiddenSelectProps() {
+    getHiddenInputProps() {
       // Create option values from the current selected paths
-      const separator = prop("separator")
-      const defaultValue = prop("multiple")
-        ? value.map((path) => path.join(separator))
-        : value[0]
-          ? value[0].join(separator)
-          : ""
-
-      return normalize.select({
+      // TODO: fix this
+      const defaultValue = prop("multiple") ? value.map((path) => path.join(separator)) : value[0]?.join(separator)
+
+      return normalize.input({
         name: prop("name"),
         form: prop("form"),
         disabled: isDisabled,
         multiple: prop("multiple"),
         required: prop("required"),
+        readOnly: prop("readOnly"),
+        hidden: true,
         "aria-hidden": true,
-        id: dom.getHiddenSelectId(scope),
+        id: dom.getHiddenInputId(scope),
+
         defaultValue,
-        style: visuallyHiddenStyle,
-        tabIndex: -1,
-        // Some browser extensions will focus the hidden select.
-        // Let's forward the focus to the trigger.
-        onFocus() {
-          const triggerEl = dom.getTriggerEl(scope)
-          triggerEl?.focus({ preventScroll: true })
-        },
         "aria-labelledby": dom.getLabelId(scope),
       })
     },
diff --git a/packages/machines/cascade-select/src/cascade-select.dom.ts b/packages/machines/cascade-select/src/cascade-select.dom.ts
index b1a95742b3..6ef102c14a 100644
--- a/packages/machines/cascade-select/src/cascade-select.dom.ts
+++ b/packages/machines/cascade-select/src/cascade-select.dom.ts
@@ -1,4 +1,4 @@
-import { createScope } from "@zag-js/dom-query"
+import { createScope, dispatchInputValueEvent, queryAll } from "@zag-js/dom-query"
 import type { Scope } from "@zag-js/core"
 
 export const dom = createScope({
@@ -11,8 +11,8 @@ export const dom = createScope({
   getClearTriggerId: (ctx: Scope) => ctx.ids?.clearTrigger ?? `cascade-select:${ctx.id}:clear-trigger`,
   getPositionerId: (ctx: Scope) => ctx.ids?.positioner ?? `cascade-select:${ctx.id}:positioner`,
   getContentId: (ctx: Scope) => ctx.ids?.content ?? `cascade-select:${ctx.id}:content`,
-  getHiddenSelectId: (ctx: Scope) => ctx.ids?.hiddenSelect ?? `cascade-select:${ctx.id}:hidden-select`,
-  getLevelId: (ctx: Scope, level: number) => ctx.ids?.level?.(level) ?? `cascade-select:${ctx.id}:level:${level}`,
+  getHiddenInputId: (ctx: Scope) => ctx.ids?.hiddenInput ?? `cascade-select:${ctx.id}:hidden-input`,
+  getListId: (ctx: Scope, value: string) => ctx.ids?.list?.(value) ?? `cascade-select:${ctx.id}:list:${value}`,
   getItemId: (ctx: Scope, value: string) => ctx.ids?.item?.(value) ?? `cascade-select:${ctx.id}:item:${value}`,
 
   getRootEl: (ctx: Scope) => dom.getById(ctx, dom.getRootId(ctx)),
@@ -24,9 +24,15 @@ export const dom = createScope({
   getClearTriggerEl: (ctx: Scope) => dom.getById(ctx, dom.getClearTriggerId(ctx)),
   getPositionerEl: (ctx: Scope) => dom.getById(ctx, dom.getPositionerId(ctx)),
   getContentEl: (ctx: Scope) => dom.getById(ctx, dom.getContentId(ctx)),
-  getHiddenSelectEl: (ctx: Scope) => dom.getById(ctx, dom.getHiddenSelectId(ctx)),
-  getLevelEl: (ctx: Scope, level: number) => dom.getById(ctx, dom.getLevelId(ctx, level)),
+  getHiddenInputEl: (ctx: Scope) => dom.getById<HTMLInputElement>(ctx, dom.getHiddenInputId(ctx)),
+  getListEl: (ctx: Scope, value: string) => dom.getById(ctx, dom.getListId(ctx, value)),
+  getListEls: (ctx: Scope) => queryAll(dom.getContentEl(ctx), `[data-part="list"]`),
   getItemEl: (ctx: Scope, value: string) => dom.getById(ctx, dom.getItemId(ctx, value)),
+  dispatchInputEvent: (ctx: Scope, value: string) => {
+    const inputEl = dom.getHiddenInputEl(ctx)
+    if (!inputEl) return
+    dispatchInputValueEvent(inputEl, { value })
+  },
 })
 
 export type DomScope = typeof dom
diff --git a/packages/machines/cascade-select/src/cascade-select.machine.ts b/packages/machines/cascade-select/src/cascade-select.machine.ts
index de0ae21eca..f882b4bfcc 100644
--- a/packages/machines/cascade-select/src/cascade-select.machine.ts
+++ b/packages/machines/cascade-select/src/cascade-select.machine.ts
@@ -1,13 +1,20 @@
 import { createGuards, createMachine } from "@zag-js/core"
 import { trackDismissableElement } from "@zag-js/dismissable"
-import { raf, trackFormControl, observeAttributes, scrollIntoView } from "@zag-js/dom-query"
+import {
+  raf,
+  trackFormControl,
+  observeAttributes,
+  scrollIntoView,
+  dispatchInputValueEvent,
+  setElementValue,
+} from "@zag-js/dom-query"
 import { getPlacement, type Placement } from "@zag-js/popper"
 import type { Point } from "@zag-js/rect-utils"
 import { last, isEmpty, isEqual } from "@zag-js/utils"
-import { collection } from "./cascade-select.collection"
 import { dom } from "./cascade-select.dom"
 import { createGraceArea, isPointerInGraceArea } from "./cascade-select.utils"
-import type { CascadeSelectSchema } from "./cascade-select.types"
+import type { CascadeSelectSchema, IndexPath } from "./cascade-select.types"
+import { collection as cascadeSelectCollection } from "./cascade-select.collection"
 
 const { or, and } = createGuards<CascadeSelectSchema>()
 
@@ -17,6 +24,8 @@ export const machine = createMachine<CascadeSelectSchema>({
       closeOnSelect: true,
       loop: false,
       defaultValue: [],
+      valueIndexPath: [],
+      highlightedIndexPath: [],
       defaultOpen: false,
       multiple: false,
       highlightTrigger: "click",
@@ -29,29 +38,26 @@ export const machine = createMachine<CascadeSelectSchema>({
         ...props.positioning,
       },
       ...props,
-      collection: props.collection ?? collection.empty(),
+      collection: props.collection ?? cascadeSelectCollection.empty(),
     }
   },
 
   context({ prop, bindable }) {
     return {
-      value: bindable<string[][]>(() => ({
-        defaultValue: prop("defaultValue") ?? [],
-        value: prop("value"),
-        onChange(value) {
-          const collection = prop("collection")
-          const separator = prop("separator")
-          const valueText =
-            prop("formatValue")?.(value) ??
-            value.map((path) => path.map((v) => collection.stringify(v) || v).join(separator)).join(", ")
-          prop("onValueChange")?.({ value, valueText })
+      valueIndexPath: bindable<IndexPath[]>(() => ({
+        defaultValue: [],
+        // value: prop("value"),
+        isEqual: isEqual,
+        onChange(indexPaths) {
+          prop("onValueChange")?.({ indexPath: indexPaths })
         },
       })),
-      highlightedPath: bindable<string[] | null>(() => ({
-        defaultValue: prop("highlightedPath") || null,
-        value: prop("highlightedPath"),
-        onChange(path) {
-          prop("onHighlightChange")?.({ highlightedPath: path })
+      highlightedIndexPath: bindable<IndexPath>(() => ({
+        defaultValue: [],
+        // value: prop("highlightedIndexPath"),
+        isEqual: isEqual,
+        onChange(indexPath) {
+          prop("onHighlightChange")?.({ indexPath })
         },
       })),
       currentPlacement: bindable<Placement | undefined>(() => ({
@@ -60,9 +66,6 @@ export const machine = createMachine<CascadeSelectSchema>({
       fieldsetDisabled: bindable<boolean>(() => ({
         defaultValue: false,
       })),
-      levelValues: bindable<string[][]>(() => ({
-        defaultValue: [],
-      })),
       graceArea: bindable<Point[] | null>(() => ({
         defaultValue: null,
       })),
@@ -75,18 +78,32 @@ export const machine = createMachine<CascadeSelectSchema>({
   computed: {
     isDisabled: ({ prop, context }) => !!prop("disabled") || !!context.get("fieldsetDisabled"),
     isInteractive: ({ prop }) => !(prop("disabled") || prop("readOnly")),
-    levelDepth: ({ context }) => {
-      return Math.max(1, context.get("levelValues").length)
+    value: ({ context, prop }) => {
+      const valueIndexPath = context.get("valueIndexPath")
+      const collection = prop("collection")
+
+      return valueIndexPath.map((indexPath) => {
+        return collection.getValuePath(indexPath)
+      })
     },
     valueText: ({ context, prop }) => {
-      const value = context.get("value")
-      if (isEmpty(value)) return prop("placeholder") ?? ""
+      const valueIndexPath = context.get("valueIndexPath")
+      if (!valueIndexPath.length) return prop("placeholder") ?? ""
+
       const collection = prop("collection")
       const separator = prop("separator")
-      return (
-        prop("formatValue")?.(value) ??
-        value.map((path) => path.map((v) => collection.stringify(v) || v).join(separator)).join(", ")
-      )
+
+      return valueIndexPath
+        .map((indexPath) => {
+          return indexPath
+            .map((_, depth) => {
+              const partialPath = indexPath.slice(0, depth + 1)
+              const node = collection.at(partialPath)
+              return collection.stringifyNode(node) ?? collection.getNodeValue(node)
+            })
+            .join(separator)
+        })
+        .join(", ")
     },
   },
 
@@ -95,18 +112,13 @@ export const machine = createMachine<CascadeSelectSchema>({
     return open ? "open" : "idle"
   },
 
-  entry: ["syncLevelValues", "syncSelectElement"],
-
   watch({ context, prop, track, action }) {
-    track([() => context.get("value").toString()], () => {
-      action(["syncLevelValues", "syncSelectElement", "dispatchChangeEvent"])
+    track([() => context.get("valueIndexPath")?.toString()], () => {
+      action(["syncInputValue", "dispatchChangeEvent"])
     })
     track([() => prop("open")], () => {
       action(["toggleVisibility"])
     })
-    track([() => prop("collection").toString()], () => {
-      action(["syncLevelValues"])
-    })
   },
 
   on: {
@@ -117,14 +129,11 @@ export const machine = createMachine<CascadeSelectSchema>({
       actions: ["clearValue"],
     },
     "HIGHLIGHTED_PATH.SET": {
-      actions: ["setHighlightedPath"],
+      actions: ["setHighlightedIndexPath"],
     },
     "ITEM.SELECT": {
       actions: ["selectItem"],
     },
-    SYNC_LEVELS: {
-      actions: ["syncLevelValues"],
-    },
   },
 
   effects: ["trackFormControlState"],
@@ -258,9 +267,9 @@ export const machine = createMachine<CascadeSelectSchema>({
 
     open: {
       tags: ["open"],
-      effects: ["trackDismissableElement", "computePlacement", "scrollToHighlightedItem"],
+      effects: ["trackDismissableElement", "computePlacement", "scrollToHighlightedItems"],
       entry: ["setInitialFocus", "highlightLastSelectedValue"],
-      exit: ["clearHighlightedPath", "scrollContentToTop"],
+      exit: ["clearHighlightedIndexPath", "scrollContentToTop"],
       on: {
         "CONTROLLED.CLOSE": [
           {
@@ -288,7 +297,7 @@ export const machine = createMachine<CascadeSelectSchema>({
           },
           {
             // If can't select, at least highlight for click-based highlighting
-            actions: ["setHighlightedPathFromValue"],
+            actions: ["setHighlightedIndexPath"],
           },
         ],
         "ITEM.POINTER_ENTER": [
@@ -305,7 +314,13 @@ export const machine = createMachine<CascadeSelectSchema>({
         ],
         POINTER_MOVE: [
           {
-            guard: and("isHoverHighlight", "hasGraceArea", "isPointerOutsideGraceArea", "isPointerNotInAnyItem"),
+            guard: and(
+              "isHoverHighlight",
+              "hasGraceArea",
+              "isPointerOutsideGraceArea",
+              "isPointerNotInAnyItem",
+              "hasHighlightedIndexPath",
+            ),
             actions: ["clearHighlightAndGraceArea"],
           },
         ],
@@ -317,7 +332,7 @@ export const machine = createMachine<CascadeSelectSchema>({
         ],
         "CONTENT.ARROW_DOWN": [
           {
-            guard: "hasHighlightedPath",
+            guard: "hasHighlightedIndexPath",
             actions: ["highlightNextItem"],
           },
           {
@@ -326,7 +341,7 @@ export const machine = createMachine<CascadeSelectSchema>({
         ],
         "CONTENT.ARROW_UP": [
           {
-            guard: "hasHighlightedPath",
+            guard: "hasHighlightedIndexPath",
             actions: ["highlightPreviousItem"],
           },
           {
@@ -423,12 +438,12 @@ export const machine = createMachine<CascadeSelectSchema>({
       isTriggerArrowDownEvent: ({ event }) => event.previousEvent?.type === "TRIGGER.ARROW_DOWN",
       isTriggerEnterEvent: ({ event }) => event.previousEvent?.type === "TRIGGER.ENTER",
       isTriggerArrowRightEvent: ({ event }) => event.previousEvent?.type === "TRIGGER.ARROW_RIGHT",
-      hasHighlightedPath: ({ context }) => context.get("highlightedPath") != null,
+      hasHighlightedIndexPath: ({ context }) => !!context.get("highlightedIndexPath").length,
       shouldCloseOnSelect: ({ prop, event }) => {
         if (!prop("closeOnSelect")) return false
 
         const collection = prop("collection")
-        const node = collection.findNode(event.value)
+        const node = collection.at(event.indexPath)
 
         // Only close if selecting a leaf node (no children)
         return node && !collection.isBranchNode(node)
@@ -436,22 +451,20 @@ export const machine = createMachine<CascadeSelectSchema>({
       shouldCloseOnSelectHighlighted: ({ prop, context }) => {
         if (!prop("closeOnSelect")) return false
 
-        const highlightedPath = context.get("highlightedPath")
-        if (!highlightedPath || isEmpty(highlightedPath)) return false
+        const highlightedIndexPath = context.get("highlightedIndexPath")
+        if (!highlightedIndexPath.length) return false
 
         const collection = prop("collection")
-        const leafValue = last(highlightedPath)
-        if (!leafValue) return false
-        const node = collection.findNode(leafValue)
+        const node = collection.at(highlightedIndexPath)
 
         // Only close if selecting a leaf node (no children)
         return node && !collection.isBranchNode(node)
       },
       canSelectItem: ({ prop, event }) => {
         const collection = prop("collection")
-        const node = collection.findNode(event.value)
+        const node = collection.at(event.indexPath)
 
-        if (!node || collection.getNodeDisabled(node)) return false
+        if (!node) return false
 
         // If parent selection is not allowed, only allow leaf nodes
         if (!prop("allowParentSelection")) {
@@ -462,13 +475,11 @@ export const machine = createMachine<CascadeSelectSchema>({
         return true
       },
       canSelectHighlightedItem: ({ prop, context }) => {
-        const highlightedPath = context.get("highlightedPath")
-        if (!highlightedPath || isEmpty(highlightedPath)) return false
+        const highlightedIndexPath = context.get("highlightedIndexPath")
+        if (!highlightedIndexPath.length) return false
 
         const collection = prop("collection")
-        const leafValue = last(highlightedPath)
-        if (!leafValue) return false
-        const node = collection.findNode(leafValue)
+        const node = collection.at(highlightedIndexPath)
 
         if (!node || collection.getNodeDisabled(node)) return false
 
@@ -481,47 +492,32 @@ export const machine = createMachine<CascadeSelectSchema>({
         return true
       },
       canNavigateToChild: ({ prop, context }) => {
-        const highlightedPath = context.get("highlightedPath")
-        if (!highlightedPath || isEmpty(highlightedPath)) return false
+        const highlightedIndexPath = context.get("highlightedIndexPath")
+        if (!highlightedIndexPath.length) return false
 
         const collection = prop("collection")
-        const leafValue = last(highlightedPath)
-        if (!leafValue) return false
-        const node = collection.findNode(leafValue)
+        const node = collection.at(highlightedIndexPath)
 
         return node && collection.isBranchNode(node)
       },
-      canNavigateToParent: ({ context }) => {
-        const highlightedPath = context.get("highlightedPath")
-        if (!highlightedPath || isEmpty(highlightedPath)) return false
-
-        // We can navigate to parent if the path has more than one item
-        return highlightedPath.length > 1
-      },
-      isAtRootLevel: ({ context }) => {
-        const highlightedPath = context.get("highlightedPath")
-        // We're at root level if there's no highlighted path or the path has only one item (root child)
-        return !highlightedPath || highlightedPath.length <= 1
-      },
-      isHoverHighlight: ({ prop }) => {
-        return prop("highlightTrigger") === "hover"
-      },
+      canNavigateToParent: ({ context }) => context.get("highlightedIndexPath").length > 1,
+      isAtRootLevel: ({ context }) => context.get("highlightedIndexPath").length <= 1,
+      isHoverHighlight: ({ prop }) => prop("highlightTrigger") === "hover",
       shouldHighlightOnHover: ({ prop, event }) => {
         const collection = prop("collection")
-        const node = collection.findNode(event.value)
+        const node = collection.at(event.indexPath)
         // Only highlight on hover if the item has children (is a parent)
         return node && collection.isBranchNode(node)
       },
-      shouldUpdateHighlightedPath: ({ prop, context, event }) => {
+      shouldUpdateHighlightedIndexPath: ({ prop, context, event }) => {
         const collection = prop("collection")
-        const currentHighlightedPath = context.get("highlightedPath")
+        const currentHighlightedIndexPath = context.get("highlightedIndexPath")
 
-        if (!currentHighlightedPath || currentHighlightedPath.length === 0) {
+        if (!currentHighlightedIndexPath || currentHighlightedIndexPath.length === 0) {
           return false // No current highlighting
         }
 
-        const hoveredValue = event.value
-        const node = collection.findNode(hoveredValue)
+        const node = collection.at(event.indexPath)
 
         // Only for leaf items (non-parent items)
         if (!node || collection.isBranchNode(node)) {
@@ -529,17 +525,15 @@ export const machine = createMachine<CascadeSelectSchema>({
         }
 
         // Get the full path to the hovered item
-        const indexPath = collection.getIndexPath(hoveredValue)
+        const indexPath = event.indexPath
         if (!indexPath) return false
 
-        const hoveredItemPath = collection.getValuePath(indexPath)
-
         // Check if paths share a common prefix but diverge
-        const minLength = Math.min(hoveredItemPath.length, currentHighlightedPath.length)
+        const minLength = Math.min(indexPath.length, currentHighlightedIndexPath.length)
         let commonPrefixLength = 0
 
         for (let i = 0; i < minLength; i++) {
-          if (hoveredItemPath[i] === currentHighlightedPath[i]) {
+          if (indexPath[i] === currentHighlightedIndexPath[i]) {
             commonPrefixLength = i + 1
           } else {
             break
@@ -549,35 +543,30 @@ export const machine = createMachine<CascadeSelectSchema>({
         // If we have a common prefix and the paths diverge, we should update
         return (
           commonPrefixLength > 0 &&
-          (commonPrefixLength < currentHighlightedPath.length || commonPrefixLength < hoveredItemPath.length)
+          (commonPrefixLength < currentHighlightedIndexPath.length || commonPrefixLength < indexPath.length)
         )
       },
-      isItemOutsideHighlightedPath: ({ prop, context, event }) => {
-        const collection = prop("collection")
-        const currentHighlightedPath = context.get("highlightedPath")
+      isItemOutsideHighlightedIndexPath: ({ context, event }) => {
+        const currentHighlightedIndexPath = context.get("highlightedIndexPath")
 
-        if (!currentHighlightedPath || currentHighlightedPath.length === 0) {
+        if (!currentHighlightedIndexPath || currentHighlightedIndexPath.length === 0) {
           return false // No current highlighting, so don't clear
         }
 
-        const hoveredValue = event.value
-
         // Get the full path to the hovered item
-        const indexPath = collection.getIndexPath(hoveredValue)
+        const indexPath = event.indexPath
         if (!indexPath) return true // Invalid item, clear highlighting
 
-        const hoveredItemPath = collection.getValuePath(indexPath)
-
         // Check if the hovered item path is compatible with current highlighted path
         // Two cases:
         // 1. Hovered item is part of the highlighted path (child/descendant)
         // 2. Highlighted path is part of the hovered item path (parent/ancestor)
 
-        const minLength = Math.min(hoveredItemPath.length, currentHighlightedPath.length)
+        const minLength = Math.min(indexPath.length, currentHighlightedIndexPath.length)
 
         // Check if the paths share a common prefix
         for (let i = 0; i < minLength; i++) {
-          if (hoveredItemPath[i] !== currentHighlightedPath[i]) {
+          if (indexPath[i] !== currentHighlightedIndexPath[i]) {
             return true // Paths diverge, clear highlighting
           }
         }
@@ -594,27 +583,27 @@ export const machine = createMachine<CascadeSelectSchema>({
         const point = { x: event.clientX, y: event.clientY }
         return !isPointerInGraceArea(point, graceArea)
       },
-      isPointerInTargetElement: ({ event, scope }) => {
-        const target = event.target as HTMLElement
-        const contentEl = dom.getContentEl(scope)
-        return contentEl?.contains(target) ?? false
-      },
       isPointerNotInAnyItem: ({ event }) => {
         const target = event.target as HTMLElement
-        // Check if the pointer is over any item element
-        const itemElement = target.closest('[role="option"]')
-        return !itemElement
+        // Check if the pointer is over any item element or within the content area
+        const itemElement = target.closest('[data-part="item"]')
+        const contentElement = target.closest('[data-part="content"]')
+
+        // Only consider the pointer "not in any item" if it's outside the content area entirely
+        // or if it's in the content but not over any item
+        return !contentElement || (!itemElement && !!contentElement)
       },
     },
 
     effects: {
-      trackFormControlState({ context, scope, prop }) {
+      trackFormControlState({ context, scope, prop: _prop }) {
         return trackFormControl(dom.getTriggerEl(scope), {
           onFieldsetDisabledChange(disabled: boolean) {
             context.set("fieldsetDisabled", disabled)
           },
           onFormReset() {
-            context.set("value", prop("defaultValue") ?? [])
+            // TODO: reset valueIndexPath
+            // context.set("valueIndexPath", prop("defaultValue") ?? [])
           },
         })
       },
@@ -639,32 +628,34 @@ export const machine = createMachine<CascadeSelectSchema>({
           },
         })
       },
-      scrollToHighlightedItem({ context, prop: _prop, scope, event }) {
+      scrollToHighlightedItems({ context, prop: _prop, scope, event }) {
+        // let cleanups: VoidFunction[] = []
+
         const exec = (_immediate: boolean) => {
-          const highlightedPath = context.get("highlightedPath")
-          if (!highlightedPath || isEmpty(highlightedPath)) return
+          const highlightedIndexPath = context.get("highlightedIndexPath")
+          if (!highlightedIndexPath.length) return
+
+          const collection = _prop("collection")
 
           // Don't scroll into view if we're using the pointer
           if (event.current().type.includes("POINTER")) return
 
-          const leafValue = last(highlightedPath)
-          if (!leafValue) return
-
-          // Get the item element for the highlighted leaf
-          const itemEl = dom.getItemEl(scope, leafValue)
-          if (!itemEl) return
+          const listEls = dom.getListEls(scope)
+          listEls.forEach((listEl, index) => {
+            const itemPath = highlightedIndexPath.slice(0, index + 1)
+            const node = collection.at(itemPath)
+            if (!node) return
 
-          // Find which level contains this item and scroll within that level
-          const levelIndex = highlightedPath.length - 1
-          const levelEl = dom.getLevelEl(scope, levelIndex)
+            const itemEl = dom.getItemEl(scope, collection.getNodeValue(node))
 
-          // Use scrollIntoView to scroll the item into view within its level
-          scrollIntoView(itemEl, { rootEl: levelEl, block: "nearest" })
+            scrollIntoView(itemEl, { rootEl: listEl, block: "nearest" })
+          })
         }
 
         raf(() => exec(true))
 
-        const contentEl = () => dom.getContentEl(scope)
+        const contentEl = dom.getContentEl(scope)
+
         return observeAttributes(contentEl, {
           defer: true,
           attributes: ["data-activedescendant"],
@@ -673,92 +664,29 @@ export const machine = createMachine<CascadeSelectSchema>({
           },
         })
       },
-      scrollContentToTop({ scope }) {
-        // Scroll all levels to the top when closing
-        raf(() => {
-          const contentEl = dom.getContentEl(scope)
-          const levelEls = contentEl?.querySelectorAll('[data-part="level"]')
-          levelEls?.forEach((levelEl) => {
-            ;(levelEl as HTMLElement).scrollTop = 0
-          })
-        })
-      },
     },
 
     actions: {
-      setValue({ context, event }) {
-        context.set("value", event.value)
-      },
+      // setValue({ context, event }) {
+      //   context.set("value", event.indexPath)
+      // },
       clearValue({ context }) {
-        context.set("value", [])
-      },
-      setHighlightedPath({ context, event, prop }) {
-        const { value } = event
-
-        const collection = prop("collection")
-
-        context.set("highlightedPath", value)
-
-        if (value && !isEmpty(value)) {
-          // Build level values to show the path to the highlighted item and its children
-          const levelValues: string[][] = []
-
-          // First level is always root children
-          const rootNode = collection.rootNode
-          if (rootNode && collection.isBranchNode(rootNode)) {
-            levelValues[0] = collection.getNodeChildren(rootNode).map((child) => collection.getNodeValue(child))
-          }
-
-          // Build levels for the entire highlighted path
-          for (let i = 0; i < value.length; i++) {
-            const nodeValue = value[i]
-            const node = collection.findNode(nodeValue)
-            if (node && collection.isBranchNode(node)) {
-              const children = collection.getNodeChildren(node)
-              levelValues[i + 1] = children.map((child) => collection.getNodeValue(child))
-            }
-          }
-
-          context.set("levelValues", levelValues)
-        }
+        context.set("valueIndexPath", [])
       },
-      setHighlightedPathFromValue({ event, prop, send }) {
-        const { value } = event
-        const collection = prop("collection")
-
-        if (!value) {
-          send({ type: "HIGHLIGHTED_PATH.SET", value: null })
-          return
-        }
-
-        // Find the full path to this value
-        const indexPath = collection.getIndexPath(value)
-        if (indexPath) {
-          const fullPath = collection.getValuePath(indexPath)
-          send({ type: "HIGHLIGHTED_PATH.SET", value: fullPath })
-        }
+      setHighlightedIndexPath({ context, event }) {
+        context.set("highlightedIndexPath", event.indexPath)
       },
-      clearHighlightedPath({ context, action }) {
-        // Clear the highlighted path
-        context.set("highlightedPath", null)
-
-        // Restore level values to match the actual selected values
-        // (remove any preview levels that were showing due to highlighting)
-        action(["syncLevelValues"])
+      clearHighlightedIndexPath({ context }) {
+        context.set("highlightedIndexPath", [])
       },
       selectItem({ context, prop, event }) {
         const collection = prop("collection")
-        const node = collection.findNode(event.value)
-
-        if (!node || collection.getNodeDisabled(node)) return
+        const indexPath = event.indexPath as IndexPath
+        const node = collection.at(indexPath)
 
         const hasChildren = collection.isBranchNode(node)
-        const indexPath = collection.getIndexPath(event.value)
-
-        if (!indexPath) return
 
-        const valuePath = collection.getValuePath(indexPath)
-        const currentValues = context.get("value")
+        const currentValues = context.get("valueIndexPath") || []
         const multiple = prop("multiple")
 
         if (prop("allowParentSelection")) {
@@ -766,322 +694,251 @@ export const machine = createMachine<CascadeSelectSchema>({
 
           if (multiple) {
             // Remove any conflicting selections (parent/child conflicts)
-            const filteredValues = currentValues.filter((existingPath) => {
+            const filteredValues = currentValues.filter((existingPath: IndexPath) => {
               // Remove if this path is a parent of the new selection
               const isParentOfNew =
-                valuePath.length > existingPath.length && existingPath.every((val, idx) => val === valuePath[idx])
+                indexPath.length > existingPath.length && existingPath.every((val, idx) => val === indexPath[idx])
               // Remove if this path is a child of the new selection
               const isChildOfNew =
-                existingPath.length > valuePath.length && valuePath.every((val, idx) => val === existingPath[idx])
+                existingPath.length > indexPath.length && indexPath.every((val, idx) => val === existingPath[idx])
               // Remove if this is the exact same path
-              const isSamePath = isEqual(existingPath, valuePath)
+              const isSamePath = isEqual(existingPath, indexPath)
 
               return !isParentOfNew && !isChildOfNew && !isSamePath
             })
 
             // Add the new selection
-            context.set("value", [...filteredValues, valuePath])
+            context.set("valueIndexPath", [...filteredValues, indexPath])
           } else {
             // Single selection mode
-            context.set("value", [valuePath])
+            context.set("valueIndexPath", [indexPath])
           }
 
           // Keep the selected item highlighted if it has children
           if (hasChildren) {
-            context.set("highlightedPath", valuePath)
+            context.set("highlightedIndexPath", indexPath)
           } else {
             // Clear highlight for leaf items since they're now selected
-            context.set("highlightedPath", null)
+            context.set("highlightedIndexPath", [])
           }
         } else {
           // When parent selection is not allowed, only leaf items update the value
           if (hasChildren) {
             // For branch nodes, just navigate into them (update value path but don't "select")
-            if (multiple && !isEmpty(currentValues)) {
+            if (multiple && currentValues.length > 0) {
               // Use the most recent selection as base for navigation
-              context.set("value", [...currentValues.slice(0, -1), valuePath])
+              context.set("valueIndexPath", [...currentValues.slice(0, -1), indexPath])
             } else {
-              context.set("value", [valuePath])
+              context.set("valueIndexPath", [indexPath])
             }
-            context.set("highlightedPath", valuePath)
+            context.set("highlightedIndexPath", indexPath)
           } else {
             // For leaf nodes, actually select them
             if (multiple) {
               // Check if this path already exists
-              const existingIndex = currentValues.findIndex((path) => isEqual(path, valuePath))
+              const existingIndex = currentValues.findIndex((path: IndexPath) => isEqual(path, indexPath))
 
               if (existingIndex >= 0) {
                 // Remove existing selection (toggle off)
                 const newValues = [...currentValues]
                 newValues.splice(existingIndex, 1)
-                context.set("value", newValues)
+                context.set("valueIndexPath", newValues)
               } else {
                 // Add new selection
-                context.set("value", [...currentValues, valuePath])
+                context.set("valueIndexPath", [...currentValues, indexPath])
               }
             } else {
               // Single selection mode
-              context.set("value", [valuePath])
+              context.set("valueIndexPath", [indexPath])
             }
-            context.set("highlightedPath", null)
+            context.set("highlightedIndexPath", [])
           }
         }
       },
       selectHighlightedItem({ context, send }) {
-        const highlightedPath = context.get("highlightedPath")
-        if (highlightedPath && !isEmpty(highlightedPath)) {
-          const leafValue = last(highlightedPath)
-          if (leafValue) {
-            send({ type: "ITEM.SELECT", value: leafValue })
-          }
+        const highlightedIndexPath = context.get("highlightedIndexPath")
+        if (highlightedIndexPath && highlightedIndexPath.length > 0) {
+          send({ type: "ITEM.SELECT", indexPath: highlightedIndexPath })
         }
       },
-      syncLevelValues({ context, prop }) {
-        const values = context.get("value")
-        const collection = prop("collection")
-        const levelValues: string[][] = []
 
-        // First level is always root children
-        const rootNode = collection.rootNode
-        if (rootNode && collection.isBranchNode(rootNode)) {
-          levelValues[0] = collection.getNodeChildren(rootNode).map((child) => collection.getNodeValue(child))
-        }
+      highlightFirstItem({ context, prop }) {
+        const collection = prop("collection")
 
-        // Use the most recent selection for building levels
-        const mostRecentValue = !isEmpty(values) ? last(values) : []
-
-        // Build subsequent levels based on most recent value path
-        if (mostRecentValue) {
-          for (let i = 0; i < mostRecentValue.length; i++) {
-            const nodeValue = mostRecentValue[i]
-            const node = collection.findNode(nodeValue)
-            if (node && collection.isBranchNode(node)) {
-              const children = collection.getNodeChildren(node)
-              levelValues[i + 1] = children.map((child) => collection.getNodeValue(child))
-            }
+        let path = context.get("highlightedIndexPath")
+        const node = !path || path.length <= 1 ? collection.rootNode : collection.getParentNode(path)
+
+        // Use native JavaScript findIndex() to find first non-disabled child
+        const children = collection.getNodeChildren(node)
+        const firstEnabledIndex = children.findIndex((child) => !collection.getNodeDisabled(child))
+
+        if (firstEnabledIndex !== -1) {
+          let newPath: number[]
+          if (!path || path.length === 0) {
+            // No existing path, start at root level
+            newPath = [firstEnabledIndex]
+          } else if (path.length === 1) {
+            // At root level, replace the single index
+            newPath = [firstEnabledIndex]
+          } else {
+            // At deeper level, replace the last index
+            newPath = [...path.slice(0, -1), firstEnabledIndex]
           }
+          context.set("highlightedIndexPath", newPath)
         }
-
-        context.set("levelValues", levelValues)
       },
-      highlightFirstItem({ context, prop, send }) {
-        const highlightedPath = context.get("highlightedPath")
-        const value = context.get("value")
+      highlightLastItem({ context, prop }) {
         const collection = prop("collection")
 
-        // Determine which level we're currently navigating based on highlighted path
-        let currentLevelDepth: number
-        let pathToParent: string[] = []
-
-        if (highlightedPath && highlightedPath.length > 0) {
-          // We're navigating at the level of the highlighted path
-          currentLevelDepth = highlightedPath.length - 1
-          pathToParent = highlightedPath.slice(0, -1)
-        } else {
-          // No highlighted path, default to root level
-          currentLevelDepth = value.length
-          if (currentLevelDepth > 0 && value.length > 0) {
-            const mostRecentPath = last(value) || []
-            pathToParent = mostRecentPath.slice(0, currentLevelDepth)
-          }
-        }
-
-        let parentNode: any = collection.rootNode
+        let path = context.get("highlightedIndexPath")
+        const node = !path || path.length <= 1 ? collection.rootNode : collection.getParentNode(path)
 
-        // Navigate to the current level's parent node
-        for (const nodeValue of pathToParent) {
-          const node = collection.findNode(nodeValue)
-          if (node && collection.isBranchNode(node)) {
-            parentNode = node
+        const children = collection.getNodeChildren(node)
+        let lastEnabledIndex = -1
+        for (let i = children.length - 1; i >= 0; i--) {
+          if (!collection.getNodeDisabled(children[i])) {
+            lastEnabledIndex = i
+            break
           }
         }
 
-        // Get the first child of the parent node
-        const firstChild = collection.getFirstNode(parentNode)
-        if (firstChild) {
-          const firstValue = collection.getNodeValue(firstChild)
-          if (pathToParent.length === 0) {
-            send({ type: "HIGHLIGHTED_PATH.SET", value: [firstValue] })
+        if (lastEnabledIndex !== -1) {
+          let newPath: number[]
+          if (!path || path.length === 0) {
+            // No existing path, start at root level
+            newPath = [lastEnabledIndex]
+          } else if (path.length === 1) {
+            // At root level, replace the single index
+            newPath = [lastEnabledIndex]
           } else {
-            send({ type: "HIGHLIGHTED_PATH.SET", value: [...pathToParent, firstValue] })
+            // At deeper level, replace the last index
+            newPath = [...path.slice(0, -1), lastEnabledIndex]
           }
+          context.set("highlightedIndexPath", newPath)
         }
       },
-      highlightLastItem({ context, prop, send }) {
-        const highlightedPath = context.get("highlightedPath")
-        const value = context.get("value")
+      highlightNextItem({ context, prop }) {
         const collection = prop("collection")
 
-        // Determine which level we're currently navigating based on highlighted path
-        let currentLevelDepth: number
-        let pathToParent: string[] = []
-
-        if (highlightedPath && highlightedPath.length > 0) {
-          // We're navigating at the level of the highlighted path
-          currentLevelDepth = highlightedPath.length - 1
-          pathToParent = highlightedPath.slice(0, -1)
-        } else {
-          // No highlighted path, default to root level
-          currentLevelDepth = value.length
-          if (currentLevelDepth > 0 && value.length > 0) {
-            const mostRecentPath = last(value) || []
-            pathToParent = mostRecentPath.slice(0, currentLevelDepth)
+        let path = context.get("highlightedIndexPath")
+        if (!path || path.length === 0) {
+          // No current highlight, highlight first item
+          const children = collection.getNodeChildren(collection.rootNode)
+          const firstEnabledIndex = children.findIndex((child) => !collection.getNodeDisabled(child))
+          if (firstEnabledIndex !== -1) {
+            context.set("highlightedIndexPath", [firstEnabledIndex])
           }
+          return
         }
 
-        let parentNode: any = collection.rootNode
+        const currentIndex = path[path.length - 1]
+        const parentNode = path.length === 1 ? collection.rootNode : collection.getParentNode(path)
+        const children = collection.getNodeChildren(parentNode)
 
-        // Navigate to the current level's parent node
-        for (const nodeValue of pathToParent) {
-          const node = collection.findNode(nodeValue)
-          if (node && collection.isBranchNode(node)) {
-            parentNode = node
+        // Find next non-disabled child after current index
+        let nextEnabledIndex = -1
+        for (let i = currentIndex + 1; i < children.length; i++) {
+          if (!collection.getNodeDisabled(children[i])) {
+            nextEnabledIndex = i
+            break
           }
         }
 
-        // Get the last child of the parent node
-        const lastChild = collection.getLastNode(parentNode)
-        if (lastChild) {
-          const lastValue = collection.getNodeValue(lastChild)
-          if (pathToParent.length === 0) {
-            send({ type: "HIGHLIGHTED_PATH.SET", value: [lastValue] })
+        // If loop is enabled and no next sibling found, wrap to first
+        if (nextEnabledIndex === -1 && prop("loop")) {
+          nextEnabledIndex = children.findIndex((child) => !collection.getNodeDisabled(child))
+        }
+
+        if (nextEnabledIndex !== -1) {
+          let newPath: number[]
+          if (path.length === 1) {
+            // At root level, replace the single index
+            newPath = [nextEnabledIndex]
           } else {
-            send({ type: "HIGHLIGHTED_PATH.SET", value: [...pathToParent, lastValue] })
+            // At deeper level, replace the last index
+            newPath = [...path.slice(0, -1), nextEnabledIndex]
           }
+          context.set("highlightedIndexPath", newPath)
         }
       },
-      highlightNextItem({ context, prop, send }) {
-        const highlightedPath = context.get("highlightedPath")
-        const levelValues = context.get("levelValues")
-        const value = context.get("value")
+      highlightPreviousItem({ context, prop }) {
         const collection = prop("collection")
 
-        if (!highlightedPath) {
-          // If nothing highlighted, highlight first non-disabled item
-          const currentLevelIndex = Math.max(0, value.length)
-          const currentLevel = levelValues[currentLevelIndex]
-          if (currentLevel && currentLevel.length > 0) {
-            const firstValue = currentLevel.find((itemValue) => {
-              const node = collection.findNode(itemValue)
-              return node && !collection.getNodeDisabled(node)
-            })
-            if (firstValue) {
-              send({ type: "HIGHLIGHTED_PATH.SET", value: [firstValue] })
-            }
+        let path = context.get("highlightedIndexPath")
+        if (!path || path.length === 0) {
+          // No current highlight, highlight first item
+          const children = collection.getNodeChildren(collection.rootNode)
+          const firstEnabledIndex = children.findIndex((child) => !collection.getNodeDisabled(child))
+          if (firstEnabledIndex !== -1) {
+            context.set("highlightedIndexPath", [firstEnabledIndex])
           }
           return
         }
 
-        // Get the leaf value and try to use tree collection methods
-        const leafValue = last(highlightedPath)
-        if (!leafValue) return
-
-        const indexPath = collection.getIndexPath(leafValue)
-        if (!indexPath) return
+        const currentIndex = path[path.length - 1]
+        const parentNode = path.length === 1 ? collection.rootNode : collection.getParentNode(path)
+        const children = collection.getNodeChildren(parentNode)
 
-        // Try to get the next sibling using tree collection
-        const nextSibling = collection.getNextSibling(indexPath)
-        if (nextSibling) {
-          const nextValue = collection.getNodeValue(nextSibling)
-          // Build the correct path: parent path + next value
-          const parentPath = highlightedPath.slice(0, -1)
-          send({ type: "HIGHLIGHTED_PATH.SET", value: [...parentPath, nextValue] })
-          return
+        // Find previous non-disabled child before current index
+        let previousEnabledIndex = -1
+        for (let i = currentIndex - 1; i >= 0; i--) {
+          if (!collection.getNodeDisabled(children[i])) {
+            previousEnabledIndex = i
+            break
+          }
         }
 
-        // If no next sibling and looping is enabled, get first sibling
-        if (prop("loop")) {
-          const parentNode = collection.getParentNode(indexPath)
-          if (parentNode) {
-            const firstChild = collection.getFirstNode(parentNode)
-            if (firstChild) {
-              const firstValue = collection.getNodeValue(firstChild)
-              const parentPath = highlightedPath.slice(0, -1)
-              send({ type: "HIGHLIGHTED_PATH.SET", value: [...parentPath, firstValue] })
+        // If loop is enabled and no previous sibling found, wrap to last
+        if (previousEnabledIndex === -1 && prop("loop")) {
+          for (let i = children.length - 1; i >= 0; i--) {
+            if (!collection.getNodeDisabled(children[i])) {
+              previousEnabledIndex = i
+              break
             }
           }
         }
-      },
-      highlightPreviousItem({ context, prop, send }) {
-        const highlightedPath = context.get("highlightedPath")
-        const levelValues = context.get("levelValues")
-        const value = context.get("value")
-        const collection = prop("collection")
 
-        if (!highlightedPath) {
-          // If nothing highlighted, highlight first non-disabled item
-          const currentLevelIndex = Math.max(0, value.length)
-          const currentLevel = levelValues[currentLevelIndex]
-          if (currentLevel && currentLevel.length > 0) {
-            const firstValue = currentLevel.find((itemValue) => {
-              const node = collection.findNode(itemValue)
-              return node && !collection.getNodeDisabled(node)
-            })
-            if (firstValue) {
-              send({ type: "HIGHLIGHTED_PATH.SET", value: [firstValue] })
-            }
+        if (previousEnabledIndex !== -1) {
+          let newPath: number[]
+          if (path.length === 1) {
+            // At root level, replace the single index
+            newPath = [previousEnabledIndex]
+          } else {
+            // At deeper level, replace the last index
+            newPath = [...path.slice(0, -1), previousEnabledIndex]
           }
-          return
+          context.set("highlightedIndexPath", newPath)
         }
+      },
+      highlightFirstChild({ context, prop }) {
+        const collection = prop("collection")
 
-        // Get the leaf value and try to use tree collection methods
-        const leafValue = last(highlightedPath)
-        if (!leafValue) return
-
-        const indexPath = collection.getIndexPath(leafValue)
-        if (!indexPath) return
+        const path = context.get("highlightedIndexPath")
+        if (!path || path.length === 0) return
 
-        // Try to get the previous sibling using tree collection
-        const prevSibling = collection.getPreviousSibling(indexPath)
-        if (prevSibling) {
-          const prevValue = collection.getNodeValue(prevSibling)
-          // Build the correct path: parent path + prev value
-          const parentPath = highlightedPath.slice(0, -1)
-          send({ type: "HIGHLIGHTED_PATH.SET", value: [...parentPath, prevValue] })
-          return
-        }
+        // Get the currently highlighted node
+        const currentNode = collection.at(path)
+        if (!currentNode || !collection.isBranchNode(currentNode)) return
 
-        // If no previous sibling and looping is enabled, get last sibling
-        if (prop("loop")) {
-          const parentNode = collection.getParentNode(indexPath)
-          if (parentNode) {
-            const lastChild = collection.getLastNode(parentNode)
-            if (lastChild) {
-              const lastValue = collection.getNodeValue(lastChild)
-              const parentPath = highlightedPath.slice(0, -1)
-              send({ type: "HIGHLIGHTED_PATH.SET", value: [...parentPath, lastValue] })
-            }
-          }
-        }
-      },
-      highlightFirstChild({ context, prop, send }) {
-        const highlightedPath = context.get("highlightedPath")
-        if (!highlightedPath || isEmpty(highlightedPath)) return
+        // Find first non-disabled child
+        const children = collection.getNodeChildren(currentNode)
+        const firstEnabledIndex = children.findIndex((child) => !collection.getNodeDisabled(child))
 
-        const collection = prop("collection")
-        const leafValue = last(highlightedPath)
-        if (!leafValue) return
-        const node = collection.findNode(leafValue)
-
-        if (!node || !collection.isBranchNode(node)) return
-
-        // Use getFirstNode to automatically handle disabled children
-        const firstChild = collection.getFirstNode(node)
-        if (firstChild) {
-          const firstChildValue = collection.getNodeValue(firstChild)
-          // Build the new path by extending the current path
-          const newPath = [...highlightedPath, firstChildValue]
-          send({ type: "HIGHLIGHTED_PATH.SET", value: newPath })
+        if (firstEnabledIndex !== -1) {
+          // Extend the current path with the first child index
+          const newPath = [...path, firstEnabledIndex]
+          context.set("highlightedIndexPath", newPath)
         }
       },
-      highlightParent({ context, send }) {
-        const highlightedPath = context.get("highlightedPath")
-        if (!highlightedPath || highlightedPath.length <= 1) return
+      highlightParent({ context }) {
+        const path = context.get("highlightedIndexPath")
+        if (!path || path.length <= 1) return
 
         // Get the parent path by removing the last item
-        const parentPath = highlightedPath.slice(0, -1)
-        send({ type: "HIGHLIGHTED_PATH.SET", value: parentPath })
+        const parentPath = path.slice(0, -1)
+        context.set("highlightedIndexPath", parentPath)
       },
+
       setInitialFocus({ scope }) {
         raf(() => {
           const contentEl = dom.getContentEl(scope)
@@ -1106,22 +963,29 @@ export const machine = createMachine<CascadeSelectSchema>({
         }
       },
       highlightLastSelectedValue({ context, send }) {
-        const values = context.get("value")
+        const valueIndexPath = context.get("valueIndexPath")
+
+        if (!valueIndexPath) return
 
         // Always start fresh - clear any existing highlighted path first
-        if (!isEmpty(values)) {
+        if (!isEmpty(valueIndexPath)) {
           // Use the most recent selection and highlight its full path
-          const mostRecentSelection = last(values)
+          const mostRecentSelection = last(valueIndexPath)
           if (mostRecentSelection) {
-            send({ type: "HIGHLIGHTED_PATH.SET", value: mostRecentSelection })
+            send({ type: "HIGHLIGHTED_PATH.SET", indexPath: mostRecentSelection })
           }
         } else {
           // No selections - start with no highlight so user sees all options
-          send({ type: "HIGHLIGHTED_PATH.SET", value: null })
+          send({ type: "HIGHLIGHTED_PATH.SET", indexPath: [] })
         }
       },
-      createGraceArea({ context, event, scope }) {
-        const { value } = event
+
+      createGraceArea({ context, event, scope, prop }) {
+        const indexPath = event.indexPath as IndexPath
+        const collection = prop("collection")
+
+        const node = collection.at(indexPath)
+        const value = collection.getNodeValue(node)
         const triggerElement = dom.getItemEl(scope, value)
 
         if (!triggerElement) return
@@ -1130,11 +994,7 @@ export const machine = createMachine<CascadeSelectSchema>({
         const triggerRect = triggerElement.getBoundingClientRect()
 
         // Find the next level that would contain children of this item
-        const highlightedPath = context.get("highlightedPath")
-        if (!highlightedPath) return
-
-        const currentLevel = highlightedPath.length - 1
-        const nextLevelEl = dom.getLevelEl(scope, currentLevel + 1)
+        const nextLevelEl = dom.getListEl(scope, value)
 
         if (!nextLevelEl) {
           // No next level, no grace area needed
@@ -1145,109 +1005,63 @@ export const machine = createMachine<CascadeSelectSchema>({
         const graceArea = createGraceArea(exitPoint, triggerRect, targetRect)
 
         context.set("graceArea", graceArea)
-        context.set("isPointerInTransit", true)
 
         // Set a timer to clear the grace area after a short delay
         setTimeout(() => {
           context.set("graceArea", null)
-          context.set("isPointerInTransit", false)
         }, 300)
       },
       clearGraceArea({ context }) {
         context.set("graceArea", null)
-        context.set("isPointerInTransit", false)
       },
-      clearHighlightAndGraceArea({ context, action }) {
+      clearHighlightAndGraceArea({ context }) {
         // Clear highlighted path
-        context.set("highlightedPath", null)
+        context.set("highlightedIndexPath", [])
 
         // Clear grace area
         context.set("graceArea", null)
-        context.set("isPointerInTransit", false)
-
-        // Restore level values to match the actual selected values
-        action(["syncLevelValues"])
       },
-      setHighlightingForHoveredItem({ context, prop, event, action }) {
+      setHighlightingForHoveredItem({ context, prop, event }) {
         const collection = prop("collection")
-        const hoveredValue = event.value
 
         // Get the full path to the hovered item
-        const indexPath = collection.getIndexPath(hoveredValue)
+        const indexPath = event.indexPath
         if (!indexPath) {
           // Invalid item, clear highlighting
-          context.set("highlightedPath", null)
+          context.set("highlightedIndexPath", [])
           return
         }
 
-        const hoveredItemPath = collection.getValuePath(indexPath)
-        const node = collection.findNode(hoveredValue)
+        const node = collection.at(indexPath)
 
-        let newHighlightedPath: string[]
+        let newHighlightedIndexPath: IndexPath
 
         if (node && collection.isBranchNode(node)) {
           // Item has children - highlight the full path including this item
-          newHighlightedPath = hoveredItemPath
+          newHighlightedIndexPath = indexPath
         } else {
           // Item is a leaf - highlight path up to (but not including) this item
-          newHighlightedPath = hoveredItemPath.slice(0, -1)
+          newHighlightedIndexPath = indexPath.slice(0, -1)
         }
 
-        context.set("highlightedPath", !isEmpty(newHighlightedPath) ? newHighlightedPath : null)
-
-        // Update level values based on the new highlighted path
-        if (!isEmpty(newHighlightedPath)) {
-          const levelValues: string[][] = []
-
-          // First level is always root children
-          const rootNode = collection.rootNode
-          if (rootNode && collection.isBranchNode(rootNode)) {
-            levelValues[0] = collection.getNodeChildren(rootNode).map((child) => collection.getNodeValue(child))
-          }
-
-          // Build levels for the highlighted path
-          for (let i = 0; i < newHighlightedPath.length; i++) {
-            const nodeValue = newHighlightedPath[i]
-            const pathNode = collection.findNode(nodeValue)
-            if (pathNode && collection.isBranchNode(pathNode)) {
-              const children = collection.getNodeChildren(pathNode)
-              levelValues[i + 1] = children.map((child) => collection.getNodeValue(child))
-            }
-          }
-
-          context.set("levelValues", levelValues)
-        } else {
-          // No highlighting, sync with selected values
-          action(["syncLevelValues"])
-        }
+        context.set("highlightedIndexPath", !isEmpty(newHighlightedIndexPath) ? newHighlightedIndexPath : [])
       },
-      syncSelectElement({ context, prop, scope }) {
-        const selectEl = dom.getHiddenSelectEl(scope) as HTMLSelectElement
-        if (!selectEl) return
-
-        const value = context.get("value")
-        const separator = prop("separator")
-
-        if (value.length === 0 && !prop("multiple")) {
-          selectEl.selectedIndex = -1
-          return
-        }
-
-        // For cascade-select, we need to handle the nested structure differently
-        // We'll represent each path as a joined string value
-        const flatValues = value.map((path) => path.join(separator))
-
-        for (const option of selectEl.options) {
-          option.selected = flatValues.includes(option.value)
-        }
+      syncInputValue({ context, scope }) {
+        const inputEl = dom.getHiddenInputEl(scope)
+        if (!inputEl) return
+        // TODO: dispatch sync input
+        // setElementValue(inputEl, context.get("valueAsString"))
       },
       dispatchChangeEvent({ scope }) {
-        queueMicrotask(() => {
-          const node = dom.getHiddenSelectEl(scope)
-          if (!node) return
-          const win = scope.getWin()
-          const changeEvent = new win.Event("change", { bubbles: true, composed: true })
-          node.dispatchEvent(changeEvent)
+        // TODO: dispatch change event
+        // dispatchInputValueEvent(dom.getHiddenInputEl(scope), { value: computed("valueAsString") })
+      },
+      scrollContentToTop({ scope }) {
+        // Scroll all lists to the top when closing
+        raf(() => {
+          const contentEl = dom.getContentEl(scope)
+          const listEls = contentEl?.querySelectorAll('[data-part="list"]')
+          listEls?.forEach((listEl) => ((listEl as HTMLElement).scrollTop = 0))
         })
       },
     },
diff --git a/packages/machines/cascade-select/src/cascade-select.props.ts b/packages/machines/cascade-select/src/cascade-select.props.ts
index 3b02b563e6..e2861577e8 100644
--- a/packages/machines/cascade-select/src/cascade-select.props.ts
+++ b/packages/machines/cascade-select/src/cascade-select.props.ts
@@ -12,11 +12,13 @@ export const props = createProps<CascadeSelectProps>()([
   "disabled",
   "formatValue",
   "getRootNode",
-  "highlightedPath",
   "id",
   "ids",
   "invalid",
-  "isItemDisabled",
+  "separator",
+  "highlightTrigger",
+  "form",
+  "name",
   "loop",
   "multiple",
   "onHighlightChange",
diff --git a/packages/machines/cascade-select/src/cascade-select.types.ts b/packages/machines/cascade-select/src/cascade-select.types.ts
index bc601e43ae..ed20c4786c 100644
--- a/packages/machines/cascade-select/src/cascade-select.types.ts
+++ b/packages/machines/cascade-select/src/cascade-select.types.ts
@@ -1,20 +1,22 @@
-import type { TreeCollection, TreeNode } from "@zag-js/collection"
-import type { Machine, Service } from "@zag-js/core"
 import type { Placement, PositioningOptions } from "@zag-js/popper"
+import type { TreeCollection, TreeNode } from "@zag-js/collection"
+import type { IndexPath } from "@zag-js/collection/src/tree-visit"
 import type { Point } from "@zag-js/rect-utils"
 import type { CommonProperties, DirectionProperty, PropTypes, RequiredBy } from "@zag-js/types"
+import type { Machine, Service } from "@zag-js/core"
 
 /* -----------------------------------------------------------------------------
  * Callback details
  * -----------------------------------------------------------------------------*/
 
 export interface ValueChangeDetails {
-  value: string[][]
-  valueText: string
+  indexPath: IndexPath[]
+  // value: string[][]
+  // valueText: string
 }
 
 export interface HighlightChangeDetails {
-  highlightedPath: string[] | null
+  indexPath: IndexPath
 }
 
 export interface OpenChangeDetails {
@@ -33,8 +35,8 @@ export type ElementIds = Partial<{
   clearTrigger: string
   positioner: string
   content: string
-  hiddenSelect: string
-  level(level: number): string
+  hiddenInput: string
+  list(value: number): string
   item(value: string): string
 }>
 
@@ -59,15 +61,15 @@ export interface CascadeSelectProps<T = any> extends DirectionProperty, CommonPr
    * The form attribute of the underlying select element
    */
   form?: string | undefined
-  /**
-   * The controlled value of the cascade-select
-   */
-  value?: string[][] | undefined
-  /**
-   * The initial value of the cascade-select when rendered.
-   * Use when you don't need to control the value.
-   */
-  defaultValue?: string[][] | undefined
+  // /**
+  //  * The controlled value of the cascade-select
+  //  */
+  // value?: string[][] | undefined
+  // /**
+  //  * The initial value of the cascade-select when rendered.
+  //  * Use when you don't need to control the value.
+  //  */
+  // defaultValue?: string[][] | undefined
   /**
    * Whether to allow multiple selections
    * @default false
@@ -82,10 +84,6 @@ export interface CascadeSelectProps<T = any> extends DirectionProperty, CommonPr
    * Use when you don't need to control the open state.
    */
   defaultOpen?: boolean | undefined
-  /**
-   * The controlled highlighted value of the cascade-select
-   */
-  highlightedPath?: string[] | null | undefined
   /**
    * What triggers highlighting of items
    * @default "click"
@@ -128,7 +126,7 @@ export interface CascadeSelectProps<T = any> extends DirectionProperty, CommonPr
   /**
    * Function to format the display value
    */
-  formatValue?: ((value: string[][]) => string) | undefined
+  // formatValue?: ((value: string[][]) => string) | undefined
   /**
    * Called when the value changes
    */
@@ -146,7 +144,7 @@ export interface CascadeSelectProps<T = any> extends DirectionProperty, CommonPr
    */
   allowParentSelection?: boolean
   /**
-   * The separator used to join path segments in the display value
+   * The separator used to join path segments in the cascade select
    * @default " / "
    */
   separator?: string | undefined
@@ -156,7 +154,7 @@ type PropsWithDefault =
   | "collection"
   | "closeOnSelect"
   | "loop"
-  | "defaultValue"
+  // | "defaultValue"
   | "defaultOpen"
   | "multiple"
   | "highlightTrigger"
@@ -166,18 +164,17 @@ export interface CascadeSelectSchema<T extends TreeNode = TreeNode> {
   state: "idle" | "focused" | "open"
   props: RequiredBy<CascadeSelectProps<T>, PropsWithDefault>
   context: {
-    value: string[][]
-    highlightedPath: string[] | null
+    // value: string[][]
+    valueIndexPath: IndexPath[]
+    highlightedIndexPath: IndexPath
     currentPlacement: Placement | undefined
     fieldsetDisabled: boolean
-    levelValues: string[][]
     graceArea: Point[] | null
-    isPointerInTransit: boolean
   }
   computed: {
     isDisabled: boolean
     isInteractive: boolean
-    levelDepth: number
+    value: string[][]
     valueText: string
   }
   action: string
@@ -198,6 +195,14 @@ export interface ItemProps<T = TreeNode> {
    * The item to render
    */
   item: T
+  /**
+   * The index path of the item
+   */
+  indexPath: IndexPath
+  /**
+   * The value path of the item
+   */
+  valuePath: string[]
   /**
    * Whether hovering outside should clear the highlighted state
    */
@@ -231,14 +236,11 @@ export interface ItemState {
   depth: number
 }
 
-export interface LevelProps {
+export interface CascadeSelectApi<T extends PropTypes = PropTypes, V = TreeNode> {
   /**
-   * The level index
+   * The separator used to join path segments in the display value
    */
-  level: number
-}
-
-export interface CascadeSelectApi<T extends PropTypes = PropTypes, V = TreeNode> {
+  separator: string
   /**
    * The tree collection data
    */
@@ -250,7 +252,7 @@ export interface CascadeSelectApi<T extends PropTypes = PropTypes, V = TreeNode>
   /**
    * Function to set the value
    */
-  setValue(value: string[][]): void
+  // setValue(value: string[][]): void
   /**
    * The current value as text
    */
@@ -258,7 +260,7 @@ export interface CascadeSelectApi<T extends PropTypes = PropTypes, V = TreeNode>
   /**
    * The current highlighted value
    */
-  highlightedPath: string[] | null
+  highlightedIndexPath: IndexPath
   /**
    * Whether the cascade-select is open
    */
@@ -274,27 +276,15 @@ export interface CascadeSelectApi<T extends PropTypes = PropTypes, V = TreeNode>
   /**
    * Function to highlight an item
    */
-  highlight(path: string[] | null): void
+  highlight(path: string[]): void
   /**
    * Function to select an item
    */
-  selectItem(value: string): void
+  // selectItem(value: string): void
   /**
    * Function to clear the value
    */
   clearValue(): void
-  /**
-   * Function to get the level values for rendering levels
-   */
-  getLevelValues(level: number): string[]
-  /**
-   * Function to get the current level count
-   */
-  getLevelDepth(): number
-  /**
-   * Function to get the parent value at a specific level
-   */
-  getParentValue(level: number): string | null
 
   getRootProps(): T["element"]
   getLabelProps(): T["element"]
@@ -305,10 +295,12 @@ export interface CascadeSelectApi<T extends PropTypes = PropTypes, V = TreeNode>
   getClearTriggerProps(): T["element"]
   getPositionerProps(): T["element"]
   getContentProps(): T["element"]
-  getLevelProps(props: LevelProps): T["element"]
+  getListProps(props: ItemProps<V>): T["element"]
   getItemState(props: ItemProps<V>): ItemState
   getItemProps(props: ItemProps<V>): T["element"]
   getItemTextProps(props: ItemProps<V>): T["element"]
   getItemIndicatorProps(props: ItemProps<V>): T["element"]
-  getHiddenSelectProps(): T["select"]
+  getHiddenInputProps(): T["input"]
 }
+
+export type { IndexPath }
diff --git a/packages/machines/cascade-select/src/index.ts b/packages/machines/cascade-select/src/index.ts
index 64865edd30..0db95b0326 100644
--- a/packages/machines/cascade-select/src/index.ts
+++ b/packages/machines/cascade-select/src/index.ts
@@ -4,11 +4,11 @@ export { connect } from "./cascade-select.connect"
 export { machine } from "./cascade-select.machine"
 export { props, splitProps } from "./cascade-select.props"
 export type {
-  CascadeSelectApi,
-  CascadeSelectMachine,
-  CascadeSelectProps,
+  CascadeSelectApi as Api,
+  CascadeSelectMachine as Machine,
+  CascadeSelectProps as Props,
   CascadeSelectSchema,
-  CascadeSelectService,
+  CascadeSelectService as Service,
   ElementIds,
   HighlightChangeDetails,
   ItemProps,
diff --git a/shared/src/cascade-select-data.ts b/shared/src/cascade-select-data.ts
index cc064e96c8..a6bf4bf8c2 100644
--- a/shared/src/cascade-select-data.ts
+++ b/shared/src/cascade-select-data.ts
@@ -14966,6 +14966,7 @@ export const cascadeSelectData = {
           value: "american-samoa",
           code: "AS",
           states: [],
+          disabled: true,
         },
         {
           label: "Australia",
diff --git a/shared/src/css/cascade-select.css b/shared/src/css/cascade-select.css
index 44fbeaebd1..47933f847d 100644
--- a/shared/src/css/cascade-select.css
+++ b/shared/src/css/cascade-select.css
@@ -64,7 +64,7 @@
   gap: 8px;
 }
 
-[data-scope="cascade-select"][data-part="level"] {
+[data-scope="cascade-select"][data-part="list"] {
   min-width: 140px;
   padding: 2px 0;
   display: flex;
@@ -79,26 +79,26 @@
 }
 
 /* Custom scrollbar styling for levels */
-[data-scope="cascade-select"][data-part="level"]::-webkit-scrollbar {
+[data-scope="cascade-select"][data-part="list"]::-webkit-scrollbar {
   width: 6px;
 }
 
-[data-scope="cascade-select"][data-part="level"]::-webkit-scrollbar-track {
+[data-scope="cascade-select"][data-part="list"]::-webkit-scrollbar-track {
   background: #f1f5f9;
   border-radius: 3px;
 }
 
-[data-scope="cascade-select"][data-part="level"]::-webkit-scrollbar-thumb {
+[data-scope="cascade-select"][data-part="list"]::-webkit-scrollbar-thumb {
   background: #cbd5e1;
   border-radius: 3px;
 }
 
-[data-scope="cascade-select"][data-part="level"]::-webkit-scrollbar-thumb:hover {
+[data-scope="cascade-select"][data-part="list"]::-webkit-scrollbar-thumb:hover {
   background: #94a3b8;
 }
 
 /* Add a subtle separator line between levels */
-[data-scope="cascade-select"][data-part="level"]:not(:last-child)::after {
+[data-scope="cascade-select"][data-part="list"]:not(:last-child)::after {
   content: "";
   position: absolute;
   right: -4px;
@@ -109,7 +109,7 @@
   opacity: 0.6;
 }
 
-[data-scope="cascade-select"][data-part="level"]:last-child {
+[data-scope="cascade-select"][data-part="list"]:last-child {
   /* No additional styling needed */
 }
 

From 2e92ea3cc01a2b34b915b71b91cb1fdcce60e029 Mon Sep 17 00:00:00 2001
From: anubra266 <anubra266@gmail.com>
Date: Thu, 12 Jun 2025 19:08:26 -0700
Subject: [PATCH 14/20] chore: improve

---
 e2e/cascade-select.e2e.ts                     | 552 +++++++++--
 e2e/models/cascade-select.model.ts            |   6 +-
 examples/next-ts/pages/cascade-select.tsx     |  50 +-
 .../src/cascade-select.connect.ts             | 320 ++++---
 .../cascade-select/src/cascade-select.dom.ts  |   2 -
 .../src/cascade-select.machine.ts             | 893 +++++++++---------
 .../src/cascade-select.props.ts               |   8 +-
 .../src/cascade-select.types.ts               | 183 ++--
 .../collection/src/tree-collection.ts         |  38 +-
 shared/src/controls.ts                        |   1 -
 shared/src/css/cascade-select.css             |  17 +-
 11 files changed, 1277 insertions(+), 793 deletions(-)

diff --git a/e2e/cascade-select.e2e.ts b/e2e/cascade-select.e2e.ts
index 32537476be..f3509434d2 100644
--- a/e2e/cascade-select.e2e.ts
+++ b/e2e/cascade-select.e2e.ts
@@ -261,17 +261,6 @@ test.describe("hover highlighting", () => {
 })
 
 test.describe("selection behavior", () => {
-  test("should not allow selection of disabled items", async () => {
-    await I.clickTrigger()
-
-    // Antarctica is disabled - force clicking should not select it
-    await I.page.locator('[data-part="item"][data-value="antarctica"]').click({ force: true })
-
-    // Should remain at placeholder text since Antarctica can't be selected
-    await I.seeTriggerHasText("Select a location")
-    await I.seeDropdown() // Should remain open since no selection happened
-  })
-
   test("should select valid continent when parent selection is allowed", async () => {
     await I.controls.bool("allowParentSelection", true)
 
@@ -316,11 +305,468 @@ test.describe("selection behavior", () => {
     await I.clickItem("Afghanistan")
     await I.clickItem("Badakhshān") // Select another leaf item
 
-    await I.seeTriggerHasText("Africa / Algeria / Adrar, Asia / Afghanistan / Badakhshān")
+    await I.seeTriggerHasText("Adrar, Badakhshān")
     await I.seeDropdown() // Should remain open because closeOnSelect is false
   })
 })
 
+test.describe("advanced selection behavior", () => {
+  test.describe("parent selection allowed", () => {
+    test.beforeEach(async () => {
+      await I.controls.bool("allowParentSelection", true)
+    })
+
+    test("should allow selecting parent items and keep them highlighted", async () => {
+      await I.clickTrigger()
+
+      // Select continent
+      await I.clickItem("Africa")
+      await I.seeTriggerHasText("Africa")
+      await I.seeItemIsHighlighted("Africa") // Should remain highlighted since it has children
+      await I.seeList(1) // Should show countries list
+
+      // Select country
+      await I.clickItem("Algeria")
+      await I.seeTriggerHasText("Africa / Algeria")
+      await I.seeItemIsHighlighted("Algeria") // Should remain highlighted since it has children
+      await I.seeList(2) // Should show states list
+    })
+
+    test("should clear highlighting when selecting leaf items", async () => {
+      await I.clickTrigger()
+      await I.clickItem("Africa")
+      await I.clickItem("Algeria")
+
+      // Select leaf item (state)
+      await I.clickItem("Adrar")
+      await I.seeTriggerHasText("Africa / Algeria / Adrar")
+      await I.dontSeeHighlightedItems() // Should clear highlighting for leaf items
+    })
+
+    test("should resolve parent/child conflicts in multiple mode", async () => {
+      await I.controls.bool("multiple", true)
+      await I.controls.bool("closeOnSelect", false)
+      await I.clickTrigger()
+
+      // First select a parent (continent)
+      await I.clickItem("Africa")
+      await I.seeTriggerHasText("Africa")
+
+      // Then select a child (country in that continent)
+      await I.clickItem("Algeria")
+
+      // Should only show the child, parent should be removed due to conflict
+      await I.seeTriggerHasText("Algeria")
+    })
+
+    test("should remove child when parent is selected in multiple mode", async () => {
+      await I.controls.bool("multiple", true)
+      await I.controls.bool("closeOnSelect", false)
+      await I.clickTrigger()
+
+      // First select a child (country)
+      await I.clickItem("Africa")
+      await I.clickItem("Algeria")
+      await I.seeTriggerHasText("Algeria")
+
+      // Go back and select the parent (continent)
+      await I.clickItem("Africa") // Navigate back to continent level
+      await I.clickItem("Africa") // Select the continent
+
+      // Should only show the parent, child should be removed due to conflict
+      await I.seeTriggerHasText("Africa")
+    })
+
+    test("should handle multiple non-conflicting selections", async () => {
+      await I.controls.bool("multiple", true)
+      await I.controls.bool("closeOnSelect", false)
+      await I.clickTrigger()
+
+      // Select from Africa
+      await I.clickItem("Africa")
+      await I.clickItem("Algeria")
+      await I.seeTriggerHasText("Algeria")
+
+      // Select from Asia (different continent, no conflict)
+      await I.clickItem("Asia")
+      await I.clickItem("Afghanistan")
+
+      // Should show both selections
+      await I.seeTriggerHasText("Algeria, Afghanistan")
+    })
+  })
+
+  test.describe("parent selection not allowed (default)", () => {
+    test("should navigate through parents without selecting them", async () => {
+      await I.clickTrigger()
+
+      // Click continent - should navigate, not select
+      await I.clickItem("Africa")
+      await I.seeTriggerHasText("Select a location") // Should not change trigger text
+      await I.seeList(1) // Should show countries list
+      await I.seeItemIsHighlighted("Africa") // Should highlight for navigation
+
+      // Click country - should navigate, not select
+      await I.clickItem("Algeria")
+      await I.seeTriggerHasText("Select a location") // Should still not change trigger text
+      await I.seeList(2) // Should show states list
+      await I.seeItemIsHighlighted("Algeria") // Should highlight for navigation
+    })
+
+    test("should only select leaf items", async () => {
+      await I.clickTrigger()
+      await I.clickItem("Africa")
+      await I.clickItem("Algeria")
+
+      // Click state (leaf item) - should select
+      await I.clickItem("Adrar")
+      await I.seeTriggerHasText("Africa / Algeria / Adrar") // Should update trigger text
+      await I.dontSeeDropdown() // Should close dropdown
+    })
+
+    test("should support multiple leaf selections with toggle", async () => {
+      await I.controls.bool("multiple", true)
+      await I.controls.bool("closeOnSelect", false)
+      await I.clickTrigger()
+
+      // Select first leaf
+      await I.clickItem("Africa")
+      await I.clickItem("Algeria")
+      await I.clickItem("Adrar")
+      await I.seeTriggerHasText("Adrar")
+
+      // Select second leaf from different path
+      await I.clickItem("Asia")
+      await I.clickItem("Afghanistan")
+      await I.clickItem("Badakhshān")
+      await I.seeTriggerHasText("Adrar, Badakhshān")
+
+      // Toggle off first selection
+      await I.clickItem("Africa")
+      await I.clickItem("Algeria")
+      await I.clickItem("Adrar") // Click again to deselect
+      await I.seeTriggerHasText("Badakhshān") // Should only show second selection
+    })
+
+    test("should use most recent selection as base for navigation in multiple mode", async () => {
+      await I.controls.bool("multiple", true)
+      await I.controls.bool("closeOnSelect", false)
+      await I.clickTrigger()
+
+      // Make first selection
+      await I.clickItem("Africa")
+      await I.clickItem("Algeria")
+      await I.clickItem("Adrar")
+      await I.seeTriggerHasText("Adrar")
+
+      // Navigate to different continent - should use most recent path as base
+      await I.clickItem("Asia") // Should navigate from current position
+      await I.seeList(1) // Should show Asian countries
+    })
+  })
+
+  test.describe("close on select behavior", () => {
+    test("should not close when selecting parent items", async () => {
+      await I.controls.bool("allowParentSelection", true)
+      await I.controls.bool("closeOnSelect", true)
+      await I.clickTrigger()
+
+      // Select parent item
+      await I.clickItem("Africa")
+      await I.seeDropdown() // Should remain open for parent items
+    })
+
+    test("should close when selecting leaf items", async () => {
+      await I.controls.bool("closeOnSelect", true)
+      await I.clickTrigger()
+
+      // Navigate to and select leaf item
+      await I.clickItem("Africa")
+      await I.clickItem("Algeria")
+      await I.clickItem("Adrar") // Leaf item
+      await I.dontSeeDropdown() // Should close for leaf items
+    })
+
+    test("should respect closeOnSelect false for leaf items", async () => {
+      await I.controls.bool("closeOnSelect", false)
+      await I.clickTrigger()
+
+      // Select leaf item
+      await I.clickItem("Africa")
+      await I.clickItem("Algeria")
+      await I.clickItem("Adrar")
+      await I.seeDropdown() // Should remain open when closeOnSelect is false
+    })
+  })
+
+  test.describe("value formatting", () => {
+    test("should format single selection as full path", async () => {
+      await I.clickTrigger()
+      await I.clickItem("Africa")
+      await I.clickItem("Algeria")
+      await I.clickItem("Adrar")
+
+      await I.seeTriggerHasText("Africa / Algeria / Adrar")
+    })
+
+    test("should format multiple selections as comma-separated leaf names", async () => {
+      await I.controls.bool("multiple", true)
+      await I.controls.bool("closeOnSelect", false)
+      await I.clickTrigger()
+
+      // Select first item
+      await I.clickItem("Africa")
+      await I.clickItem("Algeria")
+      await I.clickItem("Adrar")
+
+      // Select second item
+      await I.clickItem("Asia")
+      await I.clickItem("Afghanistan")
+      await I.clickItem("Badakhshān")
+
+      // In multiple mode, should show only leaf names
+      await I.seeTriggerHasText("Adrar, Badakhshān")
+    })
+
+    test("should format parent selections correctly when allowed", async () => {
+      await I.controls.bool("allowParentSelection", true)
+      await I.controls.bool("multiple", true)
+      await I.controls.bool("closeOnSelect", false)
+      await I.clickTrigger()
+
+      // Select a parent item
+      await I.clickItem("Africa")
+      await I.seeTriggerHasText("Africa") // Should show full path for parent
+
+      // Select another parent from different continent
+      await I.clickItem("Asia")
+      await I.seeTriggerHasText("Africa, Asia") // Should show both in multiple mode
+    })
+  })
+
+  test.describe("edge cases", () => {
+    test("should handle rapid selections correctly", async () => {
+      await I.controls.bool("multiple", true)
+      await I.controls.bool("closeOnSelect", false)
+      await I.clickTrigger()
+
+      // Rapid selections
+      await I.clickItem("Africa")
+      await I.clickItem("Algeria")
+      await I.clickItem("Adrar")
+
+      await I.clickItem("Asia")
+      await I.clickItem("Afghanistan")
+      await I.clickItem("Badakhshān")
+
+      await I.clickItem("Europe")
+      await I.clickItem("France")
+      await I.clickItem("Auvergne")
+
+      // Should handle all selections correctly
+      await I.seeTriggerHasText("Adrar, Badakhshān, Auvergne")
+    })
+
+    test("should maintain correct highlighting during complex navigation", async () => {
+      await I.controls.bool("allowParentSelection", true)
+      await I.clickTrigger()
+
+      // Select parent, then navigate deeper
+      await I.clickItem("Africa")
+      await I.seeItemIsHighlighted("Africa")
+
+      await I.clickItem("Algeria")
+      await I.seeItemIsHighlighted("Algeria")
+
+      // Navigate to leaf
+      await I.clickItem("Adrar")
+      await I.dontSeeHighlightedItems() // Should clear highlighting for leaf
+    })
+
+    test("should handle conflicting paths correctly in complex scenarios", async () => {
+      await I.controls.bool("allowParentSelection", true)
+      await I.controls.bool("multiple", true)
+      await I.controls.bool("closeOnSelect", false)
+      await I.clickTrigger()
+
+      // Create a complex scenario with nested conflicts
+      await I.clickItem("Africa") // Select continent
+      await I.seeTriggerHasText("Africa")
+
+      await I.clickItem("Algeria") // Select country (should remove continent)
+      await I.seeTriggerHasText("Algeria")
+
+      await I.clickItem("Adrar") // Select state (should remove country)
+      await I.seeTriggerHasText("Adrar")
+
+      // Now select a different continent
+      await I.clickItem("Asia")
+      await I.seeTriggerHasText("Adrar, Asia") // Should have both
+    })
+
+    test("should handle same-level selections in multiple mode", async () => {
+      await I.controls.bool("allowParentSelection", true)
+      await I.controls.bool("multiple", true)
+      await I.controls.bool("closeOnSelect", false)
+      await I.clickTrigger()
+
+      // Select multiple countries from the same continent
+      await I.clickItem("Africa")
+      await I.clickItem("Algeria")
+      await I.seeTriggerHasText("Algeria")
+
+      // Select another country
+      await I.clickItem("Egypt")
+      await I.seeTriggerHasText("Algeria, Egypt") // Should have both countries
+    })
+  })
+
+  test.describe("keyboard selection behavior", () => {
+    test("should select items with Enter key respecting parent selection rules", async () => {
+      await I.focusTrigger()
+      await I.pressKey("Enter")
+
+      // Navigate to item and select with Enter
+      await I.pressKey("ArrowDown") // Asia
+      await I.pressKey("Enter") // Should not select (parent item, allowParentSelection false)
+      await I.seeTriggerHasText("Select a location")
+
+      // Navigate deeper and select leaf
+      await I.pressKey("ArrowRight") // Enter Asia
+      await I.pressKey("ArrowRight") // Enter Afghanistan
+      await I.pressKey("Enter") // Select leaf item
+      await I.seeTriggerHasText("Asia / Afghanistan / Badakhshān")
+      await I.dontSeeDropdown() // Should close
+    })
+
+    test("should allow keyboard selection of parents when enabled", async () => {
+      await I.controls.bool("allowParentSelection", true)
+      await I.focusTrigger()
+      await I.pressKey("Enter")
+
+      // Select parent with Enter
+      await I.pressKey("ArrowDown") // Asia
+      await I.pressKey("Enter") // Should select parent
+      await I.seeTriggerHasText("Asia")
+    })
+
+    test("should support keyboard multiple selection toggle", async () => {
+      await I.controls.bool("multiple", true)
+      await I.focusTrigger()
+      await I.pressKey("Enter")
+
+      // Select first item
+      await I.pressKey("ArrowDown") // Asia
+      await I.pressKey("ArrowRight") // Enter Asia
+      await I.pressKey("ArrowRight") // Enter Afghanistan
+      await I.pressKey("Enter") // Select Badakhshān
+      await I.seeTriggerHasText("Badakhshān")
+
+      // Navigate to second item
+      await I.pressKey("ArrowLeft") // Back to Afghanistan
+      await I.pressKey("ArrowDown")
+      await I.pressKey("ArrowDown")
+      await I.pressKey("ArrowDown")
+      await I.pressKey("ArrowDown")
+      await I.pressKey("ArrowDown")
+      await I.pressKey("ArrowDown")
+      await I.pressKey("ArrowDown")
+      await I.pressKey("ArrowDown") // China
+      await I.pressKey("ArrowRight") // Enter China
+      await I.pressKey("Enter") // Select Guangxi
+      await I.seeTriggerHasText("Badakhshān, Guangxi")
+
+      // Toggle off first selection
+      await I.pressKey("ArrowLeft") // Back to China level
+      await I.pressKey("ArrowUp")
+      await I.pressKey("ArrowUp")
+      await I.pressKey("ArrowUp")
+      await I.pressKey("ArrowUp")
+      await I.pressKey("ArrowUp")
+      await I.pressKey("ArrowUp")
+      await I.pressKey("ArrowUp")
+      await I.pressKey("ArrowUp") // Afghanistan
+      await I.pressKey("ArrowRight") // Enter Afghanistan
+      await I.pressKey("Enter") // Deselect Badakhshān
+      await I.seeTriggerHasText("Guangxi")
+    })
+  })
+
+  test.describe("interaction with other features", () => {
+    test("should clear value and maintain consistency", async () => {
+      await I.controls.bool("multiple", true)
+      await I.clickTrigger()
+
+      // Make multiple selections
+      await I.clickItem("Africa")
+      await I.clickItem("Algeria")
+      await I.clickItem("Adrar")
+
+      await I.clickItem("Asia")
+      await I.clickItem("Afghanistan")
+      await I.clickItem("Badakhshān")
+
+      await I.seeTriggerHasText("Adrar, Badakhshān")
+
+      // Clear all values
+      await I.clickClearTrigger()
+      await I.seeTriggerHasText("Select a location")
+      await I.dontSeeClearTrigger()
+    })
+
+    test("should handle disabled items during selection attempts", async () => {
+      await I.controls.bool("allowParentSelection", true)
+      await I.clickTrigger()
+
+      // Try to select disabled item (should not work)
+      await I.getItem("Antarctica").click({ force: true })
+      await I.seeTriggerHasText("Select a location") // Should not change
+
+      // Select valid item to confirm selection still works
+      await I.clickItem("Africa")
+      await I.seeTriggerHasText("Africa")
+    })
+
+    test("should maintain selection state when reopening dropdown", async () => {
+      await I.controls.bool("allowParentSelection", true)
+      await I.clickTrigger()
+      await I.clickItem("Africa")
+      await I.seeTriggerHasText("Africa")
+
+      // Close and reopen
+      await I.clickTrigger() // Close
+      await I.dontSeeDropdown()
+
+      await I.clickTrigger() // Reopen
+      await I.seeDropdown()
+      await I.seeItemIsHighlighted("Africa") // Should restore highlighting
+      await I.seeList(1) // Should show the countries list
+    })
+
+    test("should handle complex selection with hover highlighting", async () => {
+      await I.controls.select("highlightTrigger", "hover")
+      await I.controls.bool("allowParentSelection", true)
+      await I.controls.bool("multiple", true)
+      await I.controls.bool("closeOnSelect", false)
+      await I.clickTrigger()
+
+      // Hover should highlight, click should select
+      await I.hoverItem("Africa")
+      await I.seeItemIsHighlighted("Africa")
+
+      await I.clickItem("Africa") // Select
+      await I.seeTriggerHasText("Africa")
+
+      // Hover different item
+      await I.hoverItem("Asia")
+      await I.seeItemIsHighlighted("Asia")
+
+      await I.clickItem("Asia") // Select second
+      await I.seeTriggerHasText("Africa, Asia")
+    })
+  })
+})
+
 test.describe("disabled and readonly states", () => {
   test("should not open dropdown when disabled", async () => {
     await I.controls.bool("disabled", true)
@@ -346,90 +792,12 @@ test.describe("focus management", () => {
   })
 })
 
-test.describe("separator configuration", () => {
-  test("should use default separator in trigger text", async () => {
-    await I.clickTrigger()
-    await I.clickItem("Africa")
-    await I.clickItem("Algeria")
-    await I.clickItem("Adrar")
-
-    await I.seeTriggerHasText("Africa / Algeria / Adrar")
-  })
-
-  test("should use custom separator in trigger text", async () => {
-    await I.controls.num("separator", " → ")
-
-    await I.clickTrigger()
-    await I.clickItem("Africa")
-    await I.clickItem("Algeria")
-    await I.clickItem("Adrar")
-
-    await I.seeTriggerHasText("Africa → Algeria → Adrar")
-  })
-
-  test("should use custom separator in multiple selection", async () => {
-    await I.controls.bool("multiple", true)
-    await I.controls.bool("closeOnSelect", false)
-    await I.controls.num("separator", " | ")
-
-    await I.clickTrigger()
-    await I.clickItem("Africa")
-    await I.clickItem("Algeria")
-    await I.clickItem("Adrar")
-
-    await I.clickItem("Asia")
-    await I.clickItem("Afghanistan")
-    await I.clickItem("Badakhshān")
-
-    await I.seeTriggerHasText("Africa | Algeria | Adrar, Asia | Afghanistan | Badakhshān")
-  })
-
-  test("should use custom separator in nested paths", async () => {
-    await I.controls.num("separator", " :: ")
-
-    await I.clickTrigger()
-    await I.clickItem("Africa")
-    await I.clickItem("Algeria")
-    await I.clickItem("Adrar")
-
-    await I.seeTriggerHasText("Africa :: Algeria :: Adrar")
-  })
-
-  test("should use separator in clear functionality", async () => {
-    await I.controls.num("separator", " > ")
-
-    await I.clickTrigger()
-    await I.clickItem("Africa")
-    await I.clickItem("Algeria")
-    await I.clickItem("Adrar")
-
-    await I.seeTriggerHasText("Africa > Algeria > Adrar")
-
-    await I.clickClearTrigger()
-    await I.seeTriggerHasText("Select a location")
-  })
-
-  test("should preserve separator in form values", async () => {
-    await I.controls.num("separator", " >> ")
-
-    await I.clickTrigger()
-    await I.clickItem("Africa")
-    await I.clickItem("Algeria")
-    await I.clickItem("Adrar")
-
-    // Verify the hidden select element has the correct value
-    const hiddenInput = await I.page.locator("input").first()
-    const value = await hiddenInput.inputValue()
-    expect(value).toContain("africa >> algeria >> adrar")
-  })
-})
-
 test.describe("disabled items", () => {
   test("should visually indicate disabled items", async () => {
     await I.clickTrigger()
 
     // Antarctica should have disabled styling
-    const antarcticaItem = I.page.locator('[data-part="item"][data-value="antarctica"]')
+    const antarcticaItem = I.getItem("Antarctica")
     await expect(antarcticaItem).toHaveAttribute("data-disabled")
     await expect(antarcticaItem).toHaveAttribute("aria-disabled", "true")
   })
@@ -439,7 +807,7 @@ test.describe("disabled items", () => {
     await I.seeTriggerHasText("Select a location")
 
     // Try to force click Antarctica (disabled) - using force to bypass Playwright protection
-    await I.page.locator('[data-part="item"][data-value="antarctica"]').click({ force: true })
+    await I.getItem("Antarctica").click({ force: true })
 
     // Should not change the trigger text or close dropdown
     await I.seeTriggerHasText("Select a location")
diff --git a/e2e/models/cascade-select.model.ts b/e2e/models/cascade-select.model.ts
index 7f0f7664c1..4583bf751a 100644
--- a/e2e/models/cascade-select.model.ts
+++ b/e2e/models/cascade-select.model.ts
@@ -31,10 +31,6 @@ export class CascadeSelectModel extends Model {
     return this.page.locator("[data-scope=cascade-select][data-part=clear-trigger]")
   }
 
-  private get valueText() {
-    return this.page.locator("[data-scope=cascade-select][data-part=value-text]")
-  }
-
   getItem = (text: string) => {
     return this.page.locator(`[data-part=item]`).filter({ hasText: new RegExp(`^${text}$`) })
   }
@@ -88,7 +84,7 @@ export class CascadeSelectModel extends Model {
   }
 
   seeTriggerHasText = async (text: string) => {
-    await expect(this.valueText).toContainText(text)
+    await expect(this.trigger).toContainText(text)
   }
 
   seeDropdown = async () => {
diff --git a/examples/next-ts/pages/cascade-select.tsx b/examples/next-ts/pages/cascade-select.tsx
index 98d6bd978f..66e2f3086b 100644
--- a/examples/next-ts/pages/cascade-select.tsx
+++ b/examples/next-ts/pages/cascade-select.tsx
@@ -2,6 +2,7 @@ import { normalizeProps, Portal, useMachine } from "@zag-js/react"
 import { cascadeSelectControls, cascadeSelectData } from "@zag-js/shared"
 import * as cascadeSelect from "@zag-js/cascade-select"
 import { ChevronDownIcon, ChevronRightIcon, XIcon } from "lucide-react"
+import serialize from "form-serialize"
 import { JSX, useId } from "react"
 import { StateVisualizer } from "../components/state-visualizer"
 import { Toolbar } from "../components/toolbar"
@@ -26,19 +27,16 @@ const collection = cascadeSelect.collection<Node>({
 interface TreeNodeProps {
   node: Node
   indexPath?: number[]
-  valuePath?: string[]
+  value?: string[]
   api: cascadeSelect.Api
 }
 
 const TreeNode = (props: TreeNodeProps): JSX.Element => {
-  const { node, indexPath = [], valuePath = [], api } = props
+  const { node, indexPath = [], value = [], api } = props
 
-  const nodeProps = { indexPath, valuePath, item: node }
+  const nodeProps = { indexPath, value, item: node }
   const nodeState = api.getItemState(nodeProps)
   const children = collection.getNodeChildren(node)
-  //
-  const highlightedIndex = api.highlightedIndexPath?.[nodeState.depth]
-  const highlightedNode = children[highlightedIndex]
 
   return (
     <>
@@ -46,7 +44,7 @@ const TreeNode = (props: TreeNodeProps): JSX.Element => {
         {children.map((item, index) => {
           const itemProps = {
             indexPath: [...indexPath, index],
-            valuePath: [...valuePath, collection.getNodeValue(item)],
+            value: [...value, collection.getNodeValue(item)],
             item,
           }
 
@@ -64,12 +62,12 @@ const TreeNode = (props: TreeNodeProps): JSX.Element => {
           )
         })}
       </div>
-      {highlightedNode && collection.isBranchNode(highlightedNode) && (
+      {nodeState.highlightedChild && collection.isBranchNode(nodeState.highlightedChild) && (
         <TreeNode
-          node={highlightedNode}
+          node={nodeState.highlightedChild}
           api={api}
-          indexPath={[...indexPath, highlightedIndex]}
-          valuePath={[...valuePath, collection.getNodeValue(highlightedNode)]}
+          indexPath={[...indexPath, nodeState.highlightedIndex]}
+          value={[...value, collection.getNodeValue(nodeState.highlightedChild)]}
         />
       )}
     </>
@@ -82,7 +80,9 @@ export default function Page() {
   const service = useMachine(cascadeSelect.machine, {
     id: useId(),
     collection,
-    placeholder: "Select a location",
+    name: "location",
+    // value: ["asia / india / haryana:HR"],
+    // highlightedValue: "asia / india / haryana:HR",
     onHighlightChange(details) {
       console.log("onHighlightChange", details)
     },
@@ -103,22 +103,28 @@ export default function Page() {
         <div {...api.getRootProps()}>
           <label {...api.getLabelProps()}>Select a location</label>
 
+          {/* control */}
           <div {...api.getControlProps()}>
             <button {...api.getTriggerProps()}>
-              <span {...api.getValueTextProps()}>{api.valueText}</span>
+              <span>{api.valueAsString || "Select a location"}</span>
               <span {...api.getIndicatorProps()}>
                 <ChevronDownIcon size={16} />
               </span>
             </button>
-
-            {api.value.length > 0 && (
-              <button {...api.getClearTriggerProps()}>
-                <XIcon size={16} />
-              </button>
-            )}
+            <button {...api.getClearTriggerProps()}>
+              <XIcon size={16} />
+            </button>
           </div>
 
-          <input {...api.getHiddenInputProps()} />
+          <form
+            onChange={(e) => {
+              const formData = serialize(e.currentTarget, { hash: true })
+              console.log(formData)
+            }}
+          >
+            {/* Hidden input */}
+            <input {...api.getHiddenInputProps()} />
+          </form>
 
           {/* UI select */}
           <Portal>
@@ -131,8 +137,8 @@ export default function Page() {
         </div>
 
         <div style={{ marginTop: "350px" }}>
-          <h3>Highlighted Path:</h3>
-          <pre>{JSON.stringify(api.highlightedIndexPath, null, 2)}</pre>
+          <h3>Highlighted Value:</h3>
+          <pre>{JSON.stringify(api.highlightedValue, null, 2)}</pre>
         </div>
         <div style={{ marginTop: "20px" }}>
           <h3>Selected Value:</h3>
diff --git a/packages/machines/cascade-select/src/cascade-select.connect.ts b/packages/machines/cascade-select/src/cascade-select.connect.ts
index f337a705a7..544d585193 100644
--- a/packages/machines/cascade-select/src/cascade-select.connect.ts
+++ b/packages/machines/cascade-select/src/cascade-select.connect.ts
@@ -1,7 +1,16 @@
-import { ariaAttr, dataAttr, getEventKey, isLeftClick, visuallyHiddenStyle } from "@zag-js/dom-query"
+import {
+  ariaAttr,
+  dataAttr,
+  getEventKey,
+  isEditableElement,
+  isLeftClick,
+  isSelfTarget,
+  isValidTabEvent,
+} from "@zag-js/dom-query"
 import { getPlacementStyles } from "@zag-js/popper"
-import type { NormalizeProps, PropTypes } from "@zag-js/types"
+import type { EventKeyMap, NormalizeProps, PropTypes } from "@zag-js/types"
 import type { Service } from "@zag-js/core"
+import { isEqual } from "@zag-js/utils"
 import { parts } from "./cascade-select.anatomy"
 import { dom } from "./cascade-select.dom"
 import type { CascadeSelectApi, CascadeSelectSchema, ItemProps, ItemState, TreeNode } from "./cascade-select.types"
@@ -13,83 +22,92 @@ export function connect<T extends PropTypes, V = TreeNode>(
   const { send, context, prop, scope, computed, state } = service
 
   const collection = prop("collection")
-  // const value = context.get("value")
-  const value = computed("value")
+  const value = context.get("value")
   const open = state.hasTag("open")
   const focused = state.matches("focused")
-  const highlightedIndexPath = context.get("highlightedIndexPath") ?? []
+  const highlightedIndexPath = context.get("highlightedIndexPath")
+  const highlightedValue = context.get("highlightedValue")
   const currentPlacement = context.get("currentPlacement")
-  const isDisabled = computed("isDisabled")
-  const isInteractive = computed("isInteractive")
-  const valueText = computed("valueText")
+  const disabled = prop("disabled") || context.get("fieldsetDisabled")
+  const interactive = computed("isInteractive")
+  const valueAsString = computed("valueAsString")
 
-  const separator = prop("separator")
+  const highlightedItem = context.get("highlightedItem")
+  const selectedItems = context.get("selectedItems")
 
   const popperStyles = getPlacementStyles({
     ...prop("positioning"),
     placement: currentPlacement,
   })
 
-  function isPrefixOfHighlight(indexPath: number[]) {
-    // If indexPath is longer, it can't be a prefix.
-    if (indexPath.length > highlightedIndexPath.length) return false
-
-    // Check each element in indexPath against the corresponding element
-    return indexPath.every((val, idx) => val === highlightedIndexPath[idx])
-  }
-
   const getItemState = (props: ItemProps<V>): ItemState => {
-    const { item, indexPath } = props
-    const itemValue = collection.getNodeValue(item)
+    const { item, indexPath, value: itemValue } = props
     const depth = indexPath ? indexPath.length : 0
 
-    const highlighted = isPrefixOfHighlight(indexPath)
-
-    // Check if item is selected (part of any selected path)
-    // const isSelected = value.some((path) => path.includes(itemValue))
+    const highlighted = itemValue.every((v, i) => v === highlightedValue[i])
+    const selected = value.some((v) => isEqual(v, itemValue))
+    const children = collection.getNodeChildren(collection.at(indexPath))
+    const highlightedChild = children[highlightedIndexPath[depth]] as V | undefined
+    const highlightedIndex = highlightedIndexPath[depth]
 
     return {
       value: itemValue,
       disabled: collection.getNodeDisabled(item),
       highlighted,
-      selected: false,
-      // selected: isSelected,
+      selected,
       hasChildren: collection.isBranchNode(item),
       depth,
+      highlightedChild,
+      highlightedIndex,
     }
   }
 
+  const hasSelectedItems = value.length > 0
+
   return {
     collection,
-    value,
-    valueText,
-    highlightedIndexPath,
     open,
     focused,
-    separator,
+    multiple: !!prop("multiple"),
+    disabled,
+    value,
+    highlightedValue,
+    highlightedItem,
+    selectedItems,
+    hasSelectedItems,
+    valueAsString,
+
+    reposition(options = {}) {
+      send({ type: "POSITIONING.SET", options })
+    },
 
-    // setValue(value: string[][]) {
-    //   send({ type: "VALUE.SET", value })
-    // },
+    focus() {
+      dom.getTriggerEl(scope)?.focus({ preventScroll: true })
+    },
 
-    setOpen(open: boolean) {
-      if (open) {
-        send({ type: "OPEN" })
-      } else {
-        send({ type: "CLOSE" })
-      }
+    setOpen(nextOpen) {
+      if (nextOpen === open) return
+      send({ type: nextOpen ? "OPEN" : "CLOSE" })
     },
 
-    highlight(path: string[] | null) {
-      send({ type: "HIGHLIGHTED_PATH.SET", value: path })
+    highlightValue(value) {
+      send({ type: "HIGHLIGHTED_VALUE.SET", value })
     },
 
-    // selectItem(value: string) {
-    //   send({ type: "ITEM.SELECT", value })
-    // },
+    setValue(value) {
+      send({ type: "VALUE.SET", value })
+    },
+
+    selectValue(value) {
+      send({ type: "ITEM.SELECT", value })
+    },
 
-    clearValue() {
-      send({ type: "VALUE.CLEAR" })
+    clearValue(value) {
+      if (value) {
+        send({ type: "ITEM.CLEAR", value })
+      } else {
+        send({ type: "VALUE.CLEAR" })
+      }
     },
 
     getItemState,
@@ -98,7 +116,8 @@ export function connect<T extends PropTypes, V = TreeNode>(
       return normalize.element({
         ...parts.root.attrs,
         id: dom.getRootId(scope),
-        "data-disabled": dataAttr(isDisabled),
+        dir: prop("dir"),
+        "data-disabled": dataAttr(disabled),
         "data-readonly": dataAttr(prop("readOnly")),
         "data-invalid": dataAttr(prop("invalid")),
         "data-state": open ? "open" : "closed",
@@ -109,13 +128,14 @@ export function connect<T extends PropTypes, V = TreeNode>(
       return normalize.label({
         ...parts.label.attrs,
         id: dom.getLabelId(scope),
+        dir: prop("dir"),
         htmlFor: dom.getHiddenInputId(scope),
-        "data-disabled": dataAttr(isDisabled),
+        "data-disabled": dataAttr(disabled),
         "data-readonly": dataAttr(prop("readOnly")),
         "data-invalid": dataAttr(prop("invalid")),
         onClick(event) {
           if (event.defaultPrevented) return
-          if (isDisabled) return
+          if (disabled) return
           const triggerEl = dom.getTriggerEl(scope)
           triggerEl?.focus({ preventScroll: true })
         },
@@ -125,8 +145,10 @@ export function connect<T extends PropTypes, V = TreeNode>(
     getControlProps() {
       return normalize.element({
         ...parts.control.attrs,
+        dir: prop("dir"),
         id: dom.getControlId(scope),
-        "data-disabled": dataAttr(isDisabled),
+        "data-disabled": dataAttr(disabled),
+        "data-focused": dataAttr(focused),
         "data-readonly": dataAttr(prop("readOnly")),
         "data-invalid": dataAttr(prop("invalid")),
         "data-state": open ? "open" : "closed",
@@ -136,6 +158,7 @@ export function connect<T extends PropTypes, V = TreeNode>(
     getTriggerProps() {
       return normalize.button({
         ...parts.trigger.attrs,
+        dir: prop("dir"),
         id: dom.getTriggerId(scope),
         type: "button",
         role: "combobox",
@@ -143,15 +166,16 @@ export function connect<T extends PropTypes, V = TreeNode>(
         "aria-expanded": open,
         "aria-haspopup": "listbox",
         "aria-labelledby": dom.getLabelId(scope),
-        "aria-describedby": dom.getValueTextId(scope),
         "data-state": open ? "open" : "closed",
-        "data-disabled": dataAttr(isDisabled),
+        "data-disabled": dataAttr(disabled),
         "data-readonly": dataAttr(prop("readOnly")),
         "data-invalid": dataAttr(prop("invalid")),
-        disabled: isDisabled,
+        "data-focused": dataAttr(focused),
+        "data-placement": currentPlacement,
+        disabled,
         onClick(event) {
-          if (!isInteractive) return
           if (event.defaultPrevented) return
+          if (!interactive) return
           send({ type: "TRIGGER.CLICK" })
         },
         onFocus() {
@@ -162,69 +186,53 @@ export function connect<T extends PropTypes, V = TreeNode>(
         },
         onKeyDown(event) {
           if (event.defaultPrevented) return
-          if (!isInteractive) return
-          const key = getEventKey(event)
+          if (!interactive) return
 
-          switch (key) {
-            case "ArrowDown":
-              event.preventDefault()
-              send({ type: "TRIGGER.ARROW_DOWN" })
-              break
-            case "ArrowUp":
-              event.preventDefault()
+          const keyMap: EventKeyMap = {
+            ArrowUp() {
               send({ type: "TRIGGER.ARROW_UP" })
-              break
-            case "ArrowRight":
-              event.preventDefault()
+            },
+            ArrowDown(event) {
+              send({ type: event.altKey ? "OPEN" : "TRIGGER.ARROW_DOWN" })
+            },
+            ArrowLeft() {
+              send({ type: "TRIGGER.ARROW_LEFT" })
+            },
+            ArrowRight() {
               send({ type: "TRIGGER.ARROW_RIGHT" })
-              break
-            case "Enter":
-            case " ":
-              event.preventDefault()
+            },
+            Enter() {
+              send({ type: "TRIGGER.ENTER" })
+            },
+            Space() {
               send({ type: "TRIGGER.ENTER" })
-              break
+            },
           }
-        },
-      })
-    },
 
-    getIndicatorProps() {
-      return normalize.element({
-        ...parts.indicator.attrs,
-        id: dom.getIndicatorId(scope),
-        "data-state": open ? "open" : "closed",
-        "data-disabled": dataAttr(isDisabled),
-        "data-readonly": dataAttr(prop("readOnly")),
-        "data-invalid": dataAttr(prop("invalid")),
-      })
-    },
-
-    getValueTextProps() {
-      return normalize.element({
-        ...parts.valueText.attrs,
-        id: dom.getValueTextId(scope),
-        "data-disabled": dataAttr(isDisabled),
-        "data-readonly": dataAttr(prop("readOnly")),
-        "data-invalid": dataAttr(prop("invalid")),
-        "data-placeholder": dataAttr(!value.length),
+          const exec = keyMap[getEventKey(event, { dir: prop("dir") })]
+          if (exec) {
+            exec(event)
+            event.preventDefault()
+          }
+        },
       })
     },
 
     getClearTriggerProps() {
       return normalize.button({
         ...parts.clearTrigger.attrs,
+        dir: prop("dir"),
         id: dom.getClearTriggerId(scope),
         type: "button",
         "aria-label": "Clear value",
-        hidden: !value.length,
-        "data-disabled": dataAttr(isDisabled),
+        hidden: !hasSelectedItems,
+        "data-disabled": dataAttr(disabled),
         "data-readonly": dataAttr(prop("readOnly")),
         "data-invalid": dataAttr(prop("invalid")),
-        disabled: isDisabled,
+        disabled,
         onClick(event) {
-          if (!isInteractive) return
-          if (!isLeftClick(event)) return
-          send({ type: "VALUE.CLEAR" })
+          if (event.defaultPrevented) return
+          send({ type: "CLEAR_TRIGGER.CLICK" })
         },
       })
     },
@@ -232,16 +240,14 @@ export function connect<T extends PropTypes, V = TreeNode>(
     getPositionerProps() {
       return normalize.element({
         ...parts.positioner.attrs,
+        dir: prop("dir"),
         id: dom.getPositionerId(scope),
         style: popperStyles.floating,
       })
     },
 
     getContentProps() {
-      const highlightedValue = highlightedIndexPath.length
-        ? collection.getNodeValue(collection.at(highlightedIndexPath))
-        : undefined
-      const highlightedItemId = highlightedValue ? dom.getItemId(scope, highlightedValue) : undefined
+      const highlightedItemId = highlightedValue ? dom.getItemId(scope, highlightedValue.toString()) : undefined
 
       return normalize.element({
         ...parts.content.attrs,
@@ -251,11 +257,24 @@ export function connect<T extends PropTypes, V = TreeNode>(
         "aria-activedescendant": highlightedItemId,
         "data-activedescendant": highlightedItemId,
         "data-state": open ? "open" : "closed",
+        "aria-multiselectable": prop("multiple"),
+        "aria-required": prop("required"),
+        "aria-readonly": prop("readOnly"),
+
         hidden: !open,
         tabIndex: 0,
         onKeyDown(event) {
-          if (!isInteractive) return
-          const key = getEventKey(event)
+          if (!interactive) return
+          if (!isSelfTarget(event)) return
+
+          // cascader should not be navigated using tab key so we prevent it
+          if (event.key === "Tab") {
+            const valid = isValidTabEvent(event)
+            if (!valid) {
+              event.preventDefault()
+              return
+            }
+          }
 
           const keyMap: Record<string, () => void> = {
             ArrowDown() {
@@ -282,19 +301,21 @@ export function connect<T extends PropTypes, V = TreeNode>(
             " "() {
               send({ type: "CONTENT.ENTER" })
             },
-            Escape() {
-              send({ type: "CONTENT.ESCAPE" })
-            },
           }
 
-          const exec = keyMap[key]
+          const exec = keyMap[getEventKey(event, { dir: prop("dir") })]
           if (exec) {
             exec()
             event.preventDefault()
+            return
+          }
+
+          if (isEditableElement(event.target)) {
+            return
           }
         },
         onPointerMove(event) {
-          if (!isInteractive) return
+          if (!interactive) return
           send({ type: "POINTER_MOVE", clientX: event.clientX, clientY: event.clientY, target: event.target })
         },
       })
@@ -305,56 +326,72 @@ export function connect<T extends PropTypes, V = TreeNode>(
 
       return normalize.element({
         ...parts.list.attrs,
-        id: dom.getListId(scope, itemState.value),
+        id: dom.getListId(scope, itemState.value.toString()),
         dir: prop("dir"),
         "data-depth": itemState.depth,
-        "aria-depth": itemState.depth,
+        "aria-level": itemState.depth,
         role: "group",
       })
     },
 
+    getIndicatorProps() {
+      return normalize.element({
+        ...parts.indicator.attrs,
+        id: dom.getIndicatorId(scope),
+        dir: prop("dir"),
+        "aria-hidden": true,
+        "data-state": open ? "open" : "closed",
+        "data-disabled": dataAttr(disabled),
+        "data-readonly": dataAttr(prop("readOnly")),
+        "data-invalid": dataAttr(prop("invalid")),
+      })
+    },
+
     getItemProps(props: ItemProps<V>) {
-      const {
-        item,
-        indexPath,
-        valuePath,
-        // TODO closeOnSelect
-      } = props
-      const itemValue = collection.getNodeValue(item)
+      const { indexPath } = props
       const itemState = getItemState(props)
 
       return normalize.element({
         ...parts.item.attrs,
-        id: dom.getItemId(scope, itemValue),
+        id: dom.getItemId(scope, itemState.value.toString()),
+        dir: prop("dir"),
         role: "treeitem",
         "aria-haspopup": itemState.hasChildren ? "menu" : undefined,
         "aria-expanded": itemState.hasChildren ? itemState.highlighted : false,
-        "aria-controls": itemState.hasChildren ? dom.getListId(scope, itemState.value) : undefined,
-        "aria-owns": itemState.hasChildren ? dom.getListId(scope, itemState.value) : undefined,
+        "aria-controls": itemState.hasChildren ? dom.getListId(scope, itemState.value.toString()) : undefined,
+        "aria-owns": itemState.hasChildren ? dom.getListId(scope, itemState.value.toString()) : undefined,
         "aria-disabled": ariaAttr(itemState.disabled),
-        "data-value": itemValue,
+        "data-value": itemState.value.toString(),
         "data-disabled": dataAttr(itemState.disabled),
         "data-highlighted": dataAttr(itemState.highlighted),
         "data-selected": dataAttr(itemState.selected),
-        "data-has-children": dataAttr(itemState.hasChildren),
         "data-depth": itemState.depth,
         "aria-selected": itemState.selected,
         "data-type": itemState.hasChildren ? "branch" : "leaf",
-        "data-index-path": indexPath.join(separator),
-        "data-value-path": valuePath.join(separator),
+        "data-index-path": indexPath.toString(),
+        onDoubleClick() {
+          if (itemState.disabled) return
+          send({ type: "CLOSE" })
+        },
         onClick(event) {
-          if (!isInteractive) return
+          if (!interactive) return
           if (!isLeftClick(event)) return
           if (itemState.disabled) return
-          send({ type: "ITEM.CLICK", indexPath })
+          send({ type: "ITEM.CLICK", value: itemState.value, indexPath })
         },
         onPointerEnter(event) {
-          if (!isInteractive) return
+          if (!interactive) return
           if (itemState.disabled) return
-          send({ type: "ITEM.POINTER_ENTER", indexPath, clientX: event.clientX, clientY: event.clientY })
+          send({
+            type: "ITEM.POINTER_ENTER",
+            value: itemState.value,
+            indexPath,
+            clientX: event.clientX,
+            clientY: event.clientY,
+          })
         },
         onPointerLeave(event) {
-          if (!isInteractive) return
+          if (!interactive) return
           if (itemState.disabled) return
           if (props.persistFocus) return
           if (event.pointerType !== "mouse") return
@@ -362,7 +399,18 @@ export function connect<T extends PropTypes, V = TreeNode>(
           const pointerMoved = service.event.previous()?.type.includes("POINTER")
           if (!pointerMoved) return
 
-          send({ type: "ITEM.POINTER_LEAVE", indexPath, clientX: event.clientX, clientY: event.clientY })
+          send({
+            type: "ITEM.POINTER_LEAVE",
+            value: itemState.value,
+            indexPath,
+            clientX: event.clientX,
+            clientY: event.clientY,
+          })
+        },
+        onTouchEnd(event) {
+          // prevent clicking elements behind content
+          event.preventDefault()
+          event.stopPropagation()
         },
       })
     },
@@ -372,6 +420,7 @@ export function connect<T extends PropTypes, V = TreeNode>(
       const itemValue = collection.getNodeValue(item)
       const itemState = getItemState(props)
       return normalize.element({
+        dir: prop("dir"),
         ...parts.itemText.attrs,
         "data-value": itemValue,
         "data-highlighted": dataAttr(itemState.highlighted),
@@ -387,22 +436,21 @@ export function connect<T extends PropTypes, V = TreeNode>(
 
       return normalize.element({
         ...parts.itemIndicator.attrs,
+        dir: prop("dir"),
         "data-value": itemValue,
         "data-highlighted": dataAttr(itemState.highlighted),
-        "data-has-children": dataAttr(itemState.hasChildren),
+        "data-type": itemState.hasChildren ? "branch" : "leaf",
         hidden: !itemState.hasChildren,
       })
     },
 
     getHiddenInputProps() {
-      // Create option values from the current selected paths
-      // TODO: fix this
-      const defaultValue = prop("multiple") ? value.map((path) => path.join(separator)) : value[0]?.join(separator)
+      const defaultValue = context.hash("value")
 
       return normalize.input({
         name: prop("name"),
         form: prop("form"),
-        disabled: isDisabled,
+        disabled,
         multiple: prop("multiple"),
         required: prop("required"),
         readOnly: prop("readOnly"),
diff --git a/packages/machines/cascade-select/src/cascade-select.dom.ts b/packages/machines/cascade-select/src/cascade-select.dom.ts
index 6ef102c14a..c30400577f 100644
--- a/packages/machines/cascade-select/src/cascade-select.dom.ts
+++ b/packages/machines/cascade-select/src/cascade-select.dom.ts
@@ -7,7 +7,6 @@ export const dom = createScope({
   getControlId: (ctx: Scope) => ctx.ids?.control ?? `cascade-select:${ctx.id}:control`,
   getTriggerId: (ctx: Scope) => ctx.ids?.trigger ?? `cascade-select:${ctx.id}:trigger`,
   getIndicatorId: (ctx: Scope) => ctx.ids?.indicator ?? `cascade-select:${ctx.id}:indicator`,
-  getValueTextId: (ctx: Scope) => ctx.ids?.valueText ?? `cascade-select:${ctx.id}:value-text`,
   getClearTriggerId: (ctx: Scope) => ctx.ids?.clearTrigger ?? `cascade-select:${ctx.id}:clear-trigger`,
   getPositionerId: (ctx: Scope) => ctx.ids?.positioner ?? `cascade-select:${ctx.id}:positioner`,
   getContentId: (ctx: Scope) => ctx.ids?.content ?? `cascade-select:${ctx.id}:content`,
@@ -20,7 +19,6 @@ export const dom = createScope({
   getControlEl: (ctx: Scope) => dom.getById(ctx, dom.getControlId(ctx)),
   getTriggerEl: (ctx: Scope) => dom.getById(ctx, dom.getTriggerId(ctx)),
   getIndicatorEl: (ctx: Scope) => dom.getById(ctx, dom.getIndicatorId(ctx)),
-  getValueTextEl: (ctx: Scope) => dom.getById(ctx, dom.getValueTextId(ctx)),
   getClearTriggerEl: (ctx: Scope) => dom.getById(ctx, dom.getClearTriggerId(ctx)),
   getPositionerEl: (ctx: Scope) => dom.getById(ctx, dom.getPositionerId(ctx)),
   getContentEl: (ctx: Scope) => dom.getById(ctx, dom.getContentId(ctx)),
diff --git a/packages/machines/cascade-select/src/cascade-select.machine.ts b/packages/machines/cascade-select/src/cascade-select.machine.ts
index f882b4bfcc..f83740cdc5 100644
--- a/packages/machines/cascade-select/src/cascade-select.machine.ts
+++ b/packages/machines/cascade-select/src/cascade-select.machine.ts
@@ -1,4 +1,4 @@
-import { createGuards, createMachine } from "@zag-js/core"
+import { createGuards, createMachine, type Params } from "@zag-js/core"
 import { trackDismissableElement } from "@zag-js/dismissable"
 import {
   raf,
@@ -13,25 +13,22 @@ import type { Point } from "@zag-js/rect-utils"
 import { last, isEmpty, isEqual } from "@zag-js/utils"
 import { dom } from "./cascade-select.dom"
 import { createGraceArea, isPointerInGraceArea } from "./cascade-select.utils"
-import type { CascadeSelectSchema, IndexPath } from "./cascade-select.types"
+import type { CascadeSelectSchema, IndexPath, TreeNode } from "./cascade-select.types"
 import { collection as cascadeSelectCollection } from "./cascade-select.collection"
 
-const { or, and } = createGuards<CascadeSelectSchema>()
+const { or, and, not } = createGuards<CascadeSelectSchema>()
 
 export const machine = createMachine<CascadeSelectSchema>({
   props({ props }) {
     return {
       closeOnSelect: true,
-      loop: false,
+      loopFocus: false,
       defaultValue: [],
-      valueIndexPath: [],
-      highlightedIndexPath: [],
+      defaultHighlightedValue: [],
       defaultOpen: false,
       multiple: false,
       highlightTrigger: "click",
-      placeholder: "Select an option",
       allowParentSelection: false,
-      separator: " / ",
       positioning: {
         placement: "bottom-start",
         gutter: 8,
@@ -44,21 +41,37 @@ export const machine = createMachine<CascadeSelectSchema>({
 
   context({ prop, bindable }) {
     return {
-      valueIndexPath: bindable<IndexPath[]>(() => ({
-        defaultValue: [],
-        // value: prop("value"),
+      value: bindable<string[][]>(() => ({
+        defaultValue: prop("defaultValue"),
+        value: prop("value"),
         isEqual: isEqual,
-        onChange(indexPaths) {
-          prop("onValueChange")?.({ indexPath: indexPaths })
+        hash(value) {
+          return value.join(", ")
         },
       })),
-      highlightedIndexPath: bindable<IndexPath>(() => ({
-        defaultValue: [],
-        // value: prop("highlightedIndexPath"),
+      highlightedValue: bindable<string[]>(() => ({
+        defaultValue: prop("defaultHighlightedValue"),
+        value: prop("highlightedValue"),
         isEqual: isEqual,
-        onChange(indexPath) {
-          prop("onHighlightChange")?.({ indexPath })
-        },
+      })),
+      valueIndexPath: bindable(() => {
+        const value = prop("value") ?? prop("defaultValue") ?? []
+        const paths = value.map((v) => prop("collection").getIndexPath(v))
+        return {
+          defaultValue: paths,
+        }
+      }),
+      highlightedIndexPath: bindable(() => {
+        const value = prop("highlightedValue") ?? prop("defaultHighlightedValue") ?? null
+        return {
+          defaultValue: value ? prop("collection").getIndexPath(value) : [],
+        }
+      }),
+      highlightedItem: bindable<TreeNode[] | null>(() => ({
+        defaultValue: null,
+      })),
+      selectedItems: bindable<TreeNode[][]>(() => ({
+        defaultValue: [],
       })),
       currentPlacement: bindable<Placement | undefined>(() => ({
         defaultValue: undefined,
@@ -76,34 +89,28 @@ export const machine = createMachine<CascadeSelectSchema>({
   },
 
   computed: {
-    isDisabled: ({ prop, context }) => !!prop("disabled") || !!context.get("fieldsetDisabled"),
     isInteractive: ({ prop }) => !(prop("disabled") || prop("readOnly")),
-    value: ({ context, prop }) => {
-      const valueIndexPath = context.get("valueIndexPath")
+
+    valueAsString: ({ prop, context }) => {
       const collection = prop("collection")
+      const items = context.get("selectedItems")
+      const multiple = prop("multiple")
 
-      return valueIndexPath.map((indexPath) => {
-        return collection.getValuePath(indexPath)
-      })
-    },
-    valueText: ({ context, prop }) => {
-      const valueIndexPath = context.get("valueIndexPath")
-      if (!valueIndexPath.length) return prop("placeholder") ?? ""
+      const formatMultipleMode = (items: TreeNode[]) =>
+        collection.stringifyNode(items.at(-1)) ?? collection.getNodeValue(items.at(-1))
 
-      const collection = prop("collection")
-      const separator = prop("separator")
-
-      return valueIndexPath
-        .map((indexPath) => {
-          return indexPath
-            .map((_, depth) => {
-              const partialPath = indexPath.slice(0, depth + 1)
-              const node = collection.at(partialPath)
-              return collection.stringifyNode(node) ?? collection.getNodeValue(node)
-            })
-            .join(separator)
-        })
-        .join(", ")
+      const formatSingleMode = (items: TreeNode[]) => {
+        return items
+          .map((item) => {
+            return collection.stringifyNode(item) ?? collection.getNodeValue(item)
+          })
+          .join(" / ")
+      }
+      const defaultFormatValue = (items: TreeNode[][]) =>
+        items.map(multiple ? formatMultipleMode : formatSingleMode).join(", ")
+
+      const formatValue = prop("formatValue") ?? defaultFormatValue
+      return formatValue(items)
     },
   },
 
@@ -113,7 +120,7 @@ export const machine = createMachine<CascadeSelectSchema>({
   },
 
   watch({ context, prop, track, action }) {
-    track([() => context.get("valueIndexPath")?.toString()], () => {
+    track([() => context.get("value")?.toString()], () => {
       action(["syncInputValue", "dispatchChangeEvent"])
     })
     track([() => prop("open")], () => {
@@ -128,12 +135,18 @@ export const machine = createMachine<CascadeSelectSchema>({
     "VALUE.CLEAR": {
       actions: ["clearValue"],
     },
-    "HIGHLIGHTED_PATH.SET": {
-      actions: ["setHighlightedIndexPath"],
+    "CLEAR_TRIGGER.CLICK": {
+      actions: ["clearValue", "focusTriggerEl"],
+    },
+    "HIGHLIGHTED_VALUE.SET": {
+      actions: ["setHighlightedValue"],
     },
     "ITEM.SELECT": {
       actions: ["selectItem"],
     },
+    "ITEM.CLEAR": {
+      actions: ["clearItem"],
+    },
   },
 
   effects: ["trackFormControlState"],
@@ -146,9 +159,11 @@ export const machine = createMachine<CascadeSelectSchema>({
           {
             guard: "isTriggerClickEvent",
             target: "open",
+            actions: ["setInitialFocus", "highlightFirstSelectedItem"],
           },
           {
             target: "open",
+            actions: ["setInitialFocus"],
           },
         ],
         "TRIGGER.CLICK": [
@@ -158,7 +173,7 @@ export const machine = createMachine<CascadeSelectSchema>({
           },
           {
             target: "open",
-            actions: ["invokeOnOpen"],
+            actions: ["invokeOnOpen", "setInitialFocus", "highlightFirstSelectedItem"],
           },
         ],
         "TRIGGER.FOCUS": {
@@ -171,7 +186,7 @@ export const machine = createMachine<CascadeSelectSchema>({
           },
           {
             target: "open",
-            actions: ["invokeOnOpen"],
+            actions: ["setInitialFocus", "invokeOnOpen"],
           },
         ],
       },
@@ -184,75 +199,77 @@ export const machine = createMachine<CascadeSelectSchema>({
           {
             guard: "isTriggerClickEvent",
             target: "open",
+            actions: ["setInitialFocus", "highlightFirstSelectedItem"],
           },
           {
             guard: "isTriggerArrowUpEvent",
             target: "open",
-            actions: ["highlightLastItem"],
+            actions: ["setInitialFocus", "highlightLastItem"],
           },
           {
             guard: or("isTriggerArrowDownEvent", "isTriggerEnterEvent", ""),
             target: "open",
-            actions: ["highlightFirstItem"],
+            actions: ["setInitialFocus", "highlightFirstItem"],
           },
           {
             target: "open",
+            actions: ["setInitialFocus"],
           },
         ],
-        "TRIGGER.CLICK": [
+        OPEN: [
           {
             guard: "isOpenControlled",
             actions: ["invokeOnOpen"],
           },
           {
             target: "open",
-            actions: ["invokeOnOpen"],
+            actions: ["setInitialFocus", "invokeOnOpen"],
           },
         ],
-        "TRIGGER.ARROW_UP": [
+        "TRIGGER.BLUR": {
+          target: "idle",
+        },
+        "TRIGGER.CLICK": [
           {
             guard: "isOpenControlled",
             actions: ["invokeOnOpen"],
           },
           {
             target: "open",
-            actions: ["invokeOnOpen", "highlightLastItem"],
+            actions: ["setInitialFocus", "invokeOnOpen", "highlightFirstSelectedItem"],
           },
         ],
-        "TRIGGER.ARROW_DOWN": [
+        "TRIGGER.ENTER": [
           {
             guard: "isOpenControlled",
             actions: ["invokeOnOpen"],
           },
           {
             target: "open",
-            actions: ["invokeOnOpen", "highlightFirstItem"],
+            actions: ["setInitialFocus", "invokeOnOpen", "highlightFirstItem"],
           },
         ],
-        "TRIGGER.ENTER": [
+        "TRIGGER.ARROW_UP": [
           {
             guard: "isOpenControlled",
             actions: ["invokeOnOpen"],
           },
           {
             target: "open",
-            actions: ["invokeOnOpen", "highlightFirstItem"],
+            actions: ["setInitialFocus", "invokeOnOpen", "highlightLastItem"],
           },
         ],
-        "TRIGGER.ARROW_RIGHT": [
+        "TRIGGER.ARROW_DOWN": [
           {
             guard: "isOpenControlled",
             actions: ["invokeOnOpen"],
           },
           {
             target: "open",
-            actions: ["invokeOnOpen", "highlightFirstItem"],
+            actions: ["setInitialFocus", "invokeOnOpen", "highlightFirstItem"],
           },
         ],
-        "TRIGGER.BLUR": {
-          target: "idle",
-        },
-        OPEN: [
+        "TRIGGER.ARROW_LEFT": [
           {
             guard: "isOpenControlled",
             actions: ["invokeOnOpen"],
@@ -262,14 +279,23 @@ export const machine = createMachine<CascadeSelectSchema>({
             actions: ["invokeOnOpen"],
           },
         ],
+        "TRIGGER.ARROW_RIGHT": [
+          {
+            guard: "isOpenControlled",
+            actions: ["invokeOnOpen"],
+          },
+          {
+            target: "open",
+            actions: ["invokeOnOpen", "highlightFirstItem"],
+          },
+        ],
       },
     },
 
     open: {
       tags: ["open"],
+      exit: ["clearHighlightedValue", "scrollContentToTop"],
       effects: ["trackDismissableElement", "computePlacement", "scrollToHighlightedItems"],
-      entry: ["setInitialFocus", "highlightLastSelectedValue"],
-      exit: ["clearHighlightedIndexPath", "scrollContentToTop"],
       on: {
         "CONTROLLED.CLOSE": [
           {
@@ -281,13 +307,38 @@ export const machine = createMachine<CascadeSelectSchema>({
             target: "idle",
           },
         ],
+        CLOSE: [
+          {
+            guard: "isOpenControlled",
+            actions: ["invokeOnClose"],
+          },
+          {
+            guard: "restoreFocus",
+            target: "focused",
+            actions: ["invokeOnClose", "focusTriggerEl"],
+          },
+          {
+            target: "idle",
+            actions: ["invokeOnClose"],
+          },
+        ],
+        "TRIGGER.CLICK": [
+          {
+            guard: "isOpenControlled",
+            actions: ["invokeOnClose"],
+          },
+          {
+            target: "focused",
+            actions: ["invokeOnClose", "focusTriggerEl"],
+          },
+        ],
         "ITEM.CLICK": [
           {
-            guard: and("canSelectItem", "shouldCloseOnSelect", "isOpenControlled"),
+            guard: and("canSelectItem", and("shouldCloseOnSelect", not("multiple")), "isOpenControlled"),
             actions: ["selectItem", "invokeOnClose"],
           },
           {
-            guard: and("canSelectItem", "shouldCloseOnSelect"),
+            guard: and("canSelectItem", and("shouldCloseOnSelect", not("multiple"))),
             target: "focused",
             actions: ["selectItem", "invokeOnClose", "focusTriggerEl"],
           },
@@ -297,7 +348,7 @@ export const machine = createMachine<CascadeSelectSchema>({
           },
           {
             // If can't select, at least highlight for click-based highlighting
-            actions: ["setHighlightedIndexPath"],
+            actions: ["setHighlightedValue"],
           },
         ],
         "ITEM.POINTER_ENTER": [
@@ -319,33 +370,39 @@ export const machine = createMachine<CascadeSelectSchema>({
               "hasGraceArea",
               "isPointerOutsideGraceArea",
               "isPointerNotInAnyItem",
-              "hasHighlightedIndexPath",
+              "hasHighlightedValue",
             ),
-            actions: ["clearHighlightAndGraceArea"],
+            actions: ["clearGraceArea"],
           },
         ],
         "GRACE_AREA.CLEAR": [
           {
             guard: "isHoverHighlight",
-            actions: ["clearHighlightAndGraceArea"],
+            actions: ["clearGraceArea"],
           },
         ],
+        "CONTENT.HOME": {
+          actions: ["highlightFirstItem"],
+        },
+        "CONTENT.END": {
+          actions: ["highlightLastItem"],
+        },
         "CONTENT.ARROW_DOWN": [
           {
-            guard: "hasHighlightedIndexPath",
-            actions: ["highlightNextItem"],
+            guard: or(not("hasHighlightedValue"), and("loop", "isHighlightedLastItem")),
+            actions: ["highlightFirstItem"],
           },
           {
-            actions: ["highlightFirstItem"],
+            actions: ["highlightNextItem"],
           },
         ],
         "CONTENT.ARROW_UP": [
           {
-            guard: "hasHighlightedIndexPath",
-            actions: ["highlightPreviousItem"],
+            guard: or(not("hasHighlightedValue"), and("loop", "isHighlightedFirstItem")),
+            actions: ["highlightLastItem"],
           },
           {
-            actions: ["highlightLastItem"],
+            actions: ["highlightPreviousItem"],
           },
         ],
         "CONTENT.ARROW_RIGHT": [
@@ -374,19 +431,17 @@ export const machine = createMachine<CascadeSelectSchema>({
             actions: ["highlightParent"],
           },
         ],
-        "CONTENT.HOME": {
-          actions: ["highlightFirstItem"],
-        },
-        "CONTENT.END": {
-          actions: ["highlightLastItem"],
-        },
         "CONTENT.ENTER": [
           {
-            guard: and("canSelectHighlightedItem", "shouldCloseOnSelectHighlighted", "isOpenControlled"),
+            guard: and(
+              "canSelectHighlightedItem",
+              and("shouldCloseOnSelectHighlighted", not("multiple")),
+              "isOpenControlled",
+            ),
             actions: ["selectHighlightedItem", "invokeOnClose"],
           },
           {
-            guard: and("canSelectHighlightedItem", "shouldCloseOnSelectHighlighted"),
+            guard: and("canSelectHighlightedItem", and("shouldCloseOnSelectHighlighted", not("multiple"))),
             target: "focused",
             actions: ["selectHighlightedItem", "invokeOnClose", "focusTriggerEl"],
           },
@@ -395,101 +450,59 @@ export const machine = createMachine<CascadeSelectSchema>({
             actions: ["selectHighlightedItem"],
           },
         ],
-        "CONTENT.ESCAPE": [
-          {
-            guard: "isOpenControlled",
-            actions: ["invokeOnClose", "focusTriggerEl"],
-          },
-          {
-            guard: "restoreFocus",
-            target: "focused",
-            actions: ["invokeOnClose", "focusTriggerEl"],
-          },
-          {
-            target: "idle",
-            actions: ["invokeOnClose"],
-          },
-        ],
-        CLOSE: [
-          {
-            guard: "isOpenControlled",
-            actions: ["invokeOnClose"],
-          },
-          {
-            guard: "restoreFocus",
-            target: "focused",
-            actions: ["invokeOnClose", "focusTriggerEl"],
-          },
-          {
-            target: "idle",
-            actions: ["invokeOnClose"],
-          },
-        ],
+        "POSITIONING.SET": {
+          actions: ["reposition"],
+        },
       },
     },
   },
 
   implementations: {
     guards: {
-      restoreFocus: () => true,
+      restoreFocus: ({ event }) => restoreFocusFn(event),
+      multiple: ({ prop }) => !!prop("multiple"),
+      loop: ({ prop }) => !!prop("loopFocus"),
       isOpenControlled: ({ prop }) => !!prop("open"),
       isTriggerClickEvent: ({ event }) => event.previousEvent?.type === "TRIGGER.CLICK",
       isTriggerArrowUpEvent: ({ event }) => event.previousEvent?.type === "TRIGGER.ARROW_UP",
       isTriggerArrowDownEvent: ({ event }) => event.previousEvent?.type === "TRIGGER.ARROW_DOWN",
       isTriggerEnterEvent: ({ event }) => event.previousEvent?.type === "TRIGGER.ENTER",
       isTriggerArrowRightEvent: ({ event }) => event.previousEvent?.type === "TRIGGER.ARROW_RIGHT",
-      hasHighlightedIndexPath: ({ context }) => !!context.get("highlightedIndexPath").length,
-      shouldCloseOnSelect: ({ prop, event }) => {
-        if (!prop("closeOnSelect")) return false
+      hasHighlightedValue: ({ context }) => context.get("highlightedValue").length > 0,
+      isHighlightedFirstItem: ({ context }) => context.get("highlightedIndexPath").at(-1) === 0,
+      isHighlightedLastItem: ({ prop, context }) => {
+        const path = context.get("highlightedIndexPath")
+        const itemIndex = path.at(-1)
+        if (!itemIndex && itemIndex !== 0) return false
 
+        const parentIndexPath = path.slice(0, -1)
         const collection = prop("collection")
-        const node = collection.at(event.indexPath)
+        const nextSibling = collection.at([...parentIndexPath, itemIndex + 1])
 
-        // Only close if selecting a leaf node (no children)
-        return node && !collection.isBranchNode(node)
+        return !nextSibling
+      },
+      shouldCloseOnSelect: ({ prop, event }) => {
+        const collection = prop("collection")
+        const node = collection.at(event.indexPath)
+        return prop("closeOnSelect") && node && !collection.isBranchNode(node)
       },
       shouldCloseOnSelectHighlighted: ({ prop, context }) => {
-        if (!prop("closeOnSelect")) return false
-
-        const highlightedIndexPath = context.get("highlightedIndexPath")
-        if (!highlightedIndexPath.length) return false
-
         const collection = prop("collection")
-        const node = collection.at(highlightedIndexPath)
-
-        // Only close if selecting a leaf node (no children)
-        return node && !collection.isBranchNode(node)
+        const node = context.get("highlightedItem")
+        return prop("closeOnSelect") && !collection.isBranchNode(node)
       },
+
       canSelectItem: ({ prop, event }) => {
         const collection = prop("collection")
         const node = collection.at(event.indexPath)
-
         if (!node) return false
-
-        // If parent selection is not allowed, only allow leaf nodes
-        if (!prop("allowParentSelection")) {
-          return !collection.isBranchNode(node)
-        }
-
-        // Otherwise, allow any node
-        return true
+        return prop("allowParentSelection") || !collection.isBranchNode(node)
       },
       canSelectHighlightedItem: ({ prop, context }) => {
-        const highlightedIndexPath = context.get("highlightedIndexPath")
-        if (!highlightedIndexPath.length) return false
-
         const collection = prop("collection")
-        const node = collection.at(highlightedIndexPath)
-
-        if (!node || collection.getNodeDisabled(node)) return false
-
-        // If parent selection is not allowed, only allow leaf nodes
-        if (!prop("allowParentSelection")) {
-          return !collection.isBranchNode(node)
-        }
-
-        // Otherwise, allow any node
-        return true
+        const node = collection.at(context.get("highlightedIndexPath"))
+        if (!node) return false
+        return prop("allowParentSelection") || !collection.isBranchNode(node)
       },
       canNavigateToChild: ({ prop, context }) => {
         const highlightedIndexPath = context.get("highlightedIndexPath")
@@ -546,33 +559,6 @@ export const machine = createMachine<CascadeSelectSchema>({
           (commonPrefixLength < currentHighlightedIndexPath.length || commonPrefixLength < indexPath.length)
         )
       },
-      isItemOutsideHighlightedIndexPath: ({ context, event }) => {
-        const currentHighlightedIndexPath = context.get("highlightedIndexPath")
-
-        if (!currentHighlightedIndexPath || currentHighlightedIndexPath.length === 0) {
-          return false // No current highlighting, so don't clear
-        }
-
-        // Get the full path to the hovered item
-        const indexPath = event.indexPath
-        if (!indexPath) return true // Invalid item, clear highlighting
-
-        // Check if the hovered item path is compatible with current highlighted path
-        // Two cases:
-        // 1. Hovered item is part of the highlighted path (child/descendant)
-        // 2. Highlighted path is part of the hovered item path (parent/ancestor)
-
-        const minLength = Math.min(indexPath.length, currentHighlightedIndexPath.length)
-
-        // Check if the paths share a common prefix
-        for (let i = 0; i < minLength; i++) {
-          if (indexPath[i] !== currentHighlightedIndexPath[i]) {
-            return true // Paths diverge, clear highlighting
-          }
-        }
-
-        return false // Paths are compatible, don't clear
-      },
       hasGraceArea: ({ context }) => {
         return context.get("graceArea") != null
       },
@@ -596,24 +582,30 @@ export const machine = createMachine<CascadeSelectSchema>({
     },
 
     effects: {
-      trackFormControlState({ context, scope, prop: _prop }) {
+      trackFormControlState({ context, scope, prop }) {
         return trackFormControl(dom.getTriggerEl(scope), {
           onFieldsetDisabledChange(disabled: boolean) {
             context.set("fieldsetDisabled", disabled)
           },
           onFormReset() {
-            // TODO: reset valueIndexPath
-            // context.set("valueIndexPath", prop("defaultValue") ?? [])
+            context.set("value", prop("defaultValue") ?? [])
           },
         })
       },
-      trackDismissableElement({ scope, send }) {
+      trackDismissableElement({ scope, send, prop }) {
         const contentEl = () => dom.getContentEl(scope)
-
+        let restoreFocus = true
         return trackDismissableElement(contentEl, {
           defer: true,
+          exclude: [dom.getTriggerEl(scope), dom.getClearTriggerEl(scope)],
+          onFocusOutside: prop("onFocusOutside"),
+          onPointerDownOutside: prop("onPointerDownOutside"),
+          onInteractOutside(event) {
+            prop("onInteractOutside")?.(event)
+            restoreFocus = !(event.detail.focusable || event.detail.contextmenu)
+          },
           onDismiss() {
-            send({ type: "CLOSE" })
+            send({ type: "CLOSE", src: "interact-outside", restoreFocus })
           },
         })
       },
@@ -628,315 +620,285 @@ export const machine = createMachine<CascadeSelectSchema>({
           },
         })
       },
-      scrollToHighlightedItems({ context, prop: _prop, scope, event }) {
-        // let cleanups: VoidFunction[] = []
+      scrollToHighlightedItems({ context, prop, scope, event }) {
+        let cleanups: VoidFunction[] = []
 
-        const exec = (_immediate: boolean) => {
+        const exec = (immediate: boolean) => {
+          const highlightedValue = context.get("highlightedValue")
           const highlightedIndexPath = context.get("highlightedIndexPath")
           if (!highlightedIndexPath.length) return
 
-          const collection = _prop("collection")
-
           // Don't scroll into view if we're using the pointer
           if (event.current().type.includes("POINTER")) return
 
           const listEls = dom.getListEls(scope)
           listEls.forEach((listEl, index) => {
             const itemPath = highlightedIndexPath.slice(0, index + 1)
-            const node = collection.at(itemPath)
-            if (!node) return
 
-            const itemEl = dom.getItemEl(scope, collection.getNodeValue(node))
+            const itemEl = dom.getItemEl(scope, highlightedValue.toString())
+
+            const scrollToIndexFn = prop("scrollToIndexFn")
+            if (scrollToIndexFn) {
+              const itemIndexInList = itemPath[itemPath.length - 1]
+              scrollToIndexFn({ index: itemIndexInList, immediate, depth: index })
+              return
+            }
 
-            scrollIntoView(itemEl, { rootEl: listEl, block: "nearest" })
+            const raf_cleanup = raf(() => {
+              scrollIntoView(itemEl, { rootEl: listEl, block: "nearest" })
+            })
+            cleanups.push(raf_cleanup)
           })
         }
 
         raf(() => exec(true))
 
+        const rafCleanup = raf(() => exec(true))
+        cleanups.push(rafCleanup)
+
         const contentEl = dom.getContentEl(scope)
 
-        return observeAttributes(contentEl, {
-          defer: true,
+        const observerCleanup = observeAttributes(contentEl, {
           attributes: ["data-activedescendant"],
-          callback() {
-            exec(false)
-          },
+          callback: () => exec(false),
         })
+        cleanups.push(observerCleanup)
+
+        return () => {
+          cleanups.forEach((cleanup) => cleanup())
+        }
       },
     },
 
     actions: {
-      // setValue({ context, event }) {
-      //   context.set("value", event.indexPath)
-      // },
-      clearValue({ context }) {
-        context.set("valueIndexPath", [])
+      setValue(params) {
+        set.value(params, params.event.value)
       },
-      setHighlightedIndexPath({ context, event }) {
-        context.set("highlightedIndexPath", event.indexPath)
+      clearValue(params) {
+        set.value(params, [])
       },
-      clearHighlightedIndexPath({ context }) {
-        context.set("highlightedIndexPath", [])
+      setHighlightedValue(params) {
+        const { event } = params
+        set.highlightedValue(params, event.value)
+      },
+      clearHighlightedValue(params) {
+        set.highlightedValue(params, [])
+      },
+      reposition({ context, prop, scope, event }) {
+        const positionerEl = () => dom.getPositionerEl(scope)
+        getPlacement(dom.getTriggerEl(scope), positionerEl, {
+          ...prop("positioning"),
+          ...event.options,
+          defer: true,
+          listeners: false,
+          onComplete(data) {
+            context.set("currentPlacement", data.placement)
+          },
+        })
       },
-      selectItem({ context, prop, event }) {
+
+      selectItem(params) {
+        const { context, prop, event } = params
         const collection = prop("collection")
-        const indexPath = event.indexPath as IndexPath
-        const node = collection.at(indexPath)
+        const multiple = prop("multiple")
+        const value = context.get("value")
 
-        const hasChildren = collection.isBranchNode(node)
+        const itemValue = event.value as string[]
+        const indexPath = (event.indexPath as IndexPath) ?? collection.getIndexPath(itemValue)
 
-        const currentValues = context.get("valueIndexPath") || []
-        const multiple = prop("multiple")
+        const node = collection.at(indexPath)
+        const hasChildren = collection.isBranchNode(node)
 
         if (prop("allowParentSelection")) {
           // When parent selection is allowed, always update the value to the selected item
-
           if (multiple) {
             // Remove any conflicting selections (parent/child conflicts)
-            const filteredValues = currentValues.filter((existingPath: IndexPath) => {
-              // Remove if this path is a parent of the new selection
-              const isParentOfNew =
-                indexPath.length > existingPath.length && existingPath.every((val, idx) => val === indexPath[idx])
-              // Remove if this path is a child of the new selection
-              const isChildOfNew =
-                existingPath.length > indexPath.length && indexPath.every((val, idx) => val === existingPath[idx])
-              // Remove if this is the exact same path
-              const isSamePath = isEqual(existingPath, indexPath)
-
-              return !isParentOfNew && !isChildOfNew && !isSamePath
+            const filteredValue = value.filter((v) => {
+              // Check if paths share any parent/child relationship
+              const shortPath = v.length < itemValue.length ? v : itemValue
+              const longPath = v.length < itemValue.length ? itemValue : v
+              const hasRelation = longPath.slice(0, shortPath.length).every((val, i) => val === shortPath[i])
+
+              // Keep only paths that have no relation and aren't identical
+              return !hasRelation && !isEqual(v, itemValue)
             })
 
-            // Add the new selection
-            context.set("valueIndexPath", [...filteredValues, indexPath])
+            set.value(params, [...filteredValue, itemValue])
           } else {
             // Single selection mode
-            context.set("valueIndexPath", [indexPath])
+            set.value(params, [itemValue])
           }
-
           // Keep the selected item highlighted if it has children
-          if (hasChildren) {
-            context.set("highlightedIndexPath", indexPath)
-          } else {
-            // Clear highlight for leaf items since they're now selected
-            context.set("highlightedIndexPath", [])
-          }
+          if (hasChildren) set.highlightedValue(params, itemValue)
         } else {
           // When parent selection is not allowed, only leaf items update the value
           if (hasChildren) {
             // For branch nodes, just navigate into them (update value path but don't "select")
-            if (multiple && currentValues.length > 0) {
+            if (multiple && value.length > 0) {
               // Use the most recent selection as base for navigation
-              context.set("valueIndexPath", [...currentValues.slice(0, -1), indexPath])
+              set.value(params, [...value.slice(0, -1), itemValue])
             } else {
-              context.set("valueIndexPath", [indexPath])
+              set.value(params, [itemValue])
             }
-            context.set("highlightedIndexPath", indexPath)
+            set.highlightedValue(params, itemValue)
           } else {
             // For leaf nodes, actually select them
             if (multiple) {
               // Check if this path already exists
-              const existingIndex = currentValues.findIndex((path: IndexPath) => isEqual(path, indexPath))
-
+              const existingIndex = value.findIndex((path) => isEqual(path, itemValue))
               if (existingIndex >= 0) {
                 // Remove existing selection (toggle off)
-                const newValues = [...currentValues]
+                const newValues = [...value]
                 newValues.splice(existingIndex, 1)
-                context.set("valueIndexPath", newValues)
+                set.value(params, newValues)
               } else {
                 // Add new selection
-                context.set("valueIndexPath", [...currentValues, indexPath])
+                set.value(params, [...value, itemValue])
               }
             } else {
               // Single selection mode
-              context.set("valueIndexPath", [indexPath])
+              set.value(params, [itemValue])
             }
-            context.set("highlightedIndexPath", [])
           }
         }
       },
+      clearItem(params) {
+        const { context, event } = params
+        const value = context.get("value")
+
+        const newValue = value.filter((v) => !isEqual(v, event.value))
+        set.value(params, newValue)
+      },
       selectHighlightedItem({ context, send }) {
-        const highlightedIndexPath = context.get("highlightedIndexPath")
-        if (highlightedIndexPath && highlightedIndexPath.length > 0) {
-          send({ type: "ITEM.SELECT", indexPath: highlightedIndexPath })
+        const indexPath = context.get("highlightedIndexPath")
+        const value = context.get("highlightedValue")
+        if (value) {
+          send({ type: "ITEM.SELECT", value, indexPath })
         }
       },
 
-      highlightFirstItem({ context, prop }) {
+      highlightFirstItem(params) {
+        const { context, prop } = params
         const collection = prop("collection")
+        const highlightedValue = context.get("highlightedValue")
 
-        let path = context.get("highlightedIndexPath")
-        const node = !path || path.length <= 1 ? collection.rootNode : collection.getParentNode(path)
-
-        // Use native JavaScript findIndex() to find first non-disabled child
-        const children = collection.getNodeChildren(node)
-        const firstEnabledIndex = children.findIndex((child) => !collection.getNodeDisabled(child))
-
-        if (firstEnabledIndex !== -1) {
-          let newPath: number[]
-          if (!path || path.length === 0) {
-            // No existing path, start at root level
-            newPath = [firstEnabledIndex]
-          } else if (path.length === 1) {
-            // At root level, replace the single index
-            newPath = [firstEnabledIndex]
-          } else {
-            // At deeper level, replace the last index
-            newPath = [...path.slice(0, -1), firstEnabledIndex]
-          }
-          context.set("highlightedIndexPath", newPath)
+        // Determine the parent node - if no highlight, use root; otherwise use current level's parent
+        let parentNode
+        if (!highlightedValue.length) {
+          parentNode = collection.rootNode
+        } else {
+          const indexPath = context.get("highlightedIndexPath")
+          parentNode = collection.getParentNode(indexPath) ?? collection.rootNode
         }
-      },
-      highlightLastItem({ context, prop }) {
-        const collection = prop("collection")
 
-        let path = context.get("highlightedIndexPath")
-        const node = !path || path.length <= 1 ? collection.rootNode : collection.getParentNode(path)
+        const firstChild = collection.getFirstNode(parentNode)
+        if (!firstChild) return
 
-        const children = collection.getNodeChildren(node)
-        let lastEnabledIndex = -1
-        for (let i = children.length - 1; i >= 0; i--) {
-          if (!collection.getNodeDisabled(children[i])) {
-            lastEnabledIndex = i
-            break
-          }
-        }
+        const firstValue = collection.getNodeValue(firstChild)
 
-        if (lastEnabledIndex !== -1) {
-          let newPath: number[]
-          if (!path || path.length === 0) {
-            // No existing path, start at root level
-            newPath = [lastEnabledIndex]
-          } else if (path.length === 1) {
-            // At root level, replace the single index
-            newPath = [lastEnabledIndex]
-          } else {
-            // At deeper level, replace the last index
-            newPath = [...path.slice(0, -1), lastEnabledIndex]
-          }
-          context.set("highlightedIndexPath", newPath)
+        // Build the new highlighted value
+        if (!highlightedValue.length) {
+          // No current highlight - highlight first root item
+          set.highlightedValue(params, [firstValue])
+        } else {
+          // Current highlight exists - replace last segment
+          const parentPath = highlightedValue.slice(0, -1)
+          set.highlightedValue(params, [...parentPath, firstValue])
         }
       },
-      highlightNextItem({ context, prop }) {
+      highlightLastItem(params) {
+        const { context, prop } = params
         const collection = prop("collection")
+        const highlightedValue = context.get("highlightedValue")
 
-        let path = context.get("highlightedIndexPath")
-        if (!path || path.length === 0) {
-          // No current highlight, highlight first item
-          const children = collection.getNodeChildren(collection.rootNode)
-          const firstEnabledIndex = children.findIndex((child) => !collection.getNodeDisabled(child))
-          if (firstEnabledIndex !== -1) {
-            context.set("highlightedIndexPath", [firstEnabledIndex])
-          }
-          return
+        // Determine the parent node - if no highlight, use root; otherwise use current level's parent
+        let parentNode
+        if (!highlightedValue.length) {
+          parentNode = collection.rootNode
+        } else {
+          const indexPath = context.get("highlightedIndexPath")
+          parentNode = collection.getParentNode(indexPath) ?? collection.rootNode
         }
 
-        const currentIndex = path[path.length - 1]
-        const parentNode = path.length === 1 ? collection.rootNode : collection.getParentNode(path)
-        const children = collection.getNodeChildren(parentNode)
-
-        // Find next non-disabled child after current index
-        let nextEnabledIndex = -1
-        for (let i = currentIndex + 1; i < children.length; i++) {
-          if (!collection.getNodeDisabled(children[i])) {
-            nextEnabledIndex = i
-            break
-          }
-        }
+        const lastChild = collection.getLastNode(parentNode)
+        if (!lastChild) return
 
-        // If loop is enabled and no next sibling found, wrap to first
-        if (nextEnabledIndex === -1 && prop("loop")) {
-          nextEnabledIndex = children.findIndex((child) => !collection.getNodeDisabled(child))
-        }
+        const lastValue = collection.getNodeValue(lastChild)
 
-        if (nextEnabledIndex !== -1) {
-          let newPath: number[]
-          if (path.length === 1) {
-            // At root level, replace the single index
-            newPath = [nextEnabledIndex]
-          } else {
-            // At deeper level, replace the last index
-            newPath = [...path.slice(0, -1), nextEnabledIndex]
-          }
-          context.set("highlightedIndexPath", newPath)
+        // Build the new highlighted value
+        if (!highlightedValue.length) {
+          // No current highlight - highlight last root item
+          set.highlightedValue(params, [lastValue])
+        } else {
+          // Current highlight exists - replace last segment
+          const parentPath = highlightedValue.slice(0, -1)
+          set.highlightedValue(params, [...parentPath, lastValue])
         }
       },
-      highlightPreviousItem({ context, prop }) {
+      highlightNextItem(params) {
+        const { context, prop } = params
         const collection = prop("collection")
+        const highlightedValue = context.get("highlightedValue")
+        if (!highlightedValue.length) return
 
-        let path = context.get("highlightedIndexPath")
-        if (!path || path.length === 0) {
-          // No current highlight, highlight first item
-          const children = collection.getNodeChildren(collection.rootNode)
-          const firstEnabledIndex = children.findIndex((child) => !collection.getNodeDisabled(child))
-          if (firstEnabledIndex !== -1) {
-            context.set("highlightedIndexPath", [firstEnabledIndex])
-          }
-          return
-        }
+        const indexPath = context.get("highlightedIndexPath")
+        const nextSibling = collection.getNextSibling(indexPath)
+        if (!nextSibling) return
 
-        const currentIndex = path[path.length - 1]
-        const parentNode = path.length === 1 ? collection.rootNode : collection.getParentNode(path)
-        const children = collection.getNodeChildren(parentNode)
+        const nextValue = collection.getNodeValue(nextSibling)
 
-        // Find previous non-disabled child before current index
-        let previousEnabledIndex = -1
-        for (let i = currentIndex - 1; i >= 0; i--) {
-          if (!collection.getNodeDisabled(children[i])) {
-            previousEnabledIndex = i
-            break
-          }
+        if (highlightedValue.length === 1) {
+          // Root level - just use the next value
+          set.highlightedValue(params, [nextValue])
+        } else {
+          // Nested level - replace last segment
+          const parentPath = highlightedValue.slice(0, -1)
+          set.highlightedValue(params, [...parentPath, nextValue])
         }
+      },
+      highlightPreviousItem(params) {
+        const { context, prop } = params
+        const collection = prop("collection")
 
-        // If loop is enabled and no previous sibling found, wrap to last
-        if (previousEnabledIndex === -1 && prop("loop")) {
-          for (let i = children.length - 1; i >= 0; i--) {
-            if (!collection.getNodeDisabled(children[i])) {
-              previousEnabledIndex = i
-              break
-            }
-          }
-        }
+        const highlightedValue = context.get("highlightedValue")
+        if (!highlightedValue.length) return
 
-        if (previousEnabledIndex !== -1) {
-          let newPath: number[]
-          if (path.length === 1) {
-            // At root level, replace the single index
-            newPath = [previousEnabledIndex]
-          } else {
-            // At deeper level, replace the last index
-            newPath = [...path.slice(0, -1), previousEnabledIndex]
-          }
-          context.set("highlightedIndexPath", newPath)
+        const indexPath = context.get("highlightedIndexPath")
+        const previousSibling = collection.getPreviousSibling(indexPath)
+        if (!previousSibling) return
+
+        const prevValue = collection.getNodeValue(previousSibling)
+
+        if (highlightedValue.length === 1) {
+          // Root level - just use the previous value
+          set.highlightedValue(params, [prevValue])
+        } else {
+          // Nested level - replace last segment
+          const parentPath = highlightedValue.slice(0, -1)
+          set.highlightedValue(params, [...parentPath, prevValue])
         }
       },
-      highlightFirstChild({ context, prop }) {
+      highlightFirstChild(params) {
+        const { context, prop } = params
         const collection = prop("collection")
 
-        const path = context.get("highlightedIndexPath")
-        if (!path || path.length === 0) return
-
-        // Get the currently highlighted node
-        const currentNode = collection.at(path)
-        if (!currentNode || !collection.isBranchNode(currentNode)) return
+        const highlightedValue = context.get("highlightedValue")
+        if (!highlightedValue.length) return
 
-        // Find first non-disabled child
-        const children = collection.getNodeChildren(currentNode)
-        const firstEnabledIndex = children.findIndex((child) => !collection.getNodeDisabled(child))
+        const indexPath = context.get("highlightedIndexPath")
+        const node = collection.getFirstNode(collection.at(indexPath))
+        if (!node) return
 
-        if (firstEnabledIndex !== -1) {
-          // Extend the current path with the first child index
-          const newPath = [...path, firstEnabledIndex]
-          context.set("highlightedIndexPath", newPath)
-        }
+        const childValue = collection.getNodeValue(node)
+        set.highlightedValue(params, [...highlightedValue, childValue])
       },
-      highlightParent({ context }) {
-        const path = context.get("highlightedIndexPath")
-        if (!path || path.length <= 1) return
+      highlightParent(params) {
+        const { context } = params
+        const highlightedValue = context.get("highlightedValue")
+        if (!highlightedValue.length) return
 
-        // Get the parent path by removing the last item
-        const parentPath = path.slice(0, -1)
-        context.set("highlightedIndexPath", parentPath)
+        const parentPath = highlightedValue.slice(0, -1)
+        set.highlightedValue(params, parentPath)
       },
 
       setInitialFocus({ scope }) {
@@ -945,7 +907,8 @@ export const machine = createMachine<CascadeSelectSchema>({
           contentEl?.focus({ preventScroll: true })
         })
       },
-      focusTriggerEl({ scope }) {
+      focusTriggerEl({ event, scope }) {
+        if (!restoreFocusFn(event)) return
         raf(() => {
           const triggerEl = dom.getTriggerEl(scope)
           triggerEl?.focus({ preventScroll: true })
@@ -962,30 +925,20 @@ export const machine = createMachine<CascadeSelectSchema>({
           send({ type: prop("open") ? "CONTROLLED.OPEN" : "CONTROLLED.CLOSE" })
         }
       },
-      highlightLastSelectedValue({ context, send }) {
-        const valueIndexPath = context.get("valueIndexPath")
-
-        if (!valueIndexPath) return
-
-        // Always start fresh - clear any existing highlighted path first
-        if (!isEmpty(valueIndexPath)) {
-          // Use the most recent selection and highlight its full path
-          const mostRecentSelection = last(valueIndexPath)
-          if (mostRecentSelection) {
-            send({ type: "HIGHLIGHTED_PATH.SET", indexPath: mostRecentSelection })
-          }
-        } else {
-          // No selections - start with no highlight so user sees all options
-          send({ type: "HIGHLIGHTED_PATH.SET", indexPath: [] })
+      highlightFirstSelectedItem(params) {
+        const { context } = params
+        const value = context.get("value")
+
+        if (isEmpty(value)) return
+        // Use the most recent selection and highlight its full path
+        const mostRecentSelection = last(value)
+        if (mostRecentSelection) {
+          set.highlightedValue(params, mostRecentSelection)
         }
       },
 
-      createGraceArea({ context, event, scope, prop }) {
-        const indexPath = event.indexPath as IndexPath
-        const collection = prop("collection")
-
-        const node = collection.at(indexPath)
-        const value = collection.getNodeValue(node)
+      createGraceArea({ context, event, scope }) {
+        const value = event.value.toString()
         const triggerElement = dom.getItemEl(scope, value)
 
         if (!triggerElement) return
@@ -1014,56 +967,102 @@ export const machine = createMachine<CascadeSelectSchema>({
       clearGraceArea({ context }) {
         context.set("graceArea", null)
       },
-      clearHighlightAndGraceArea({ context }) {
-        // Clear highlighted path
-        context.set("highlightedIndexPath", [])
-
-        // Clear grace area
-        context.set("graceArea", null)
-      },
-      setHighlightingForHoveredItem({ context, prop, event }) {
+      setHighlightingForHoveredItem(params) {
+        const { prop, event } = params
         const collection = prop("collection")
 
-        // Get the full path to the hovered item
-        const indexPath = event.indexPath
-        if (!indexPath) {
-          // Invalid item, clear highlighting
-          context.set("highlightedIndexPath", [])
-          return
-        }
-
-        const node = collection.at(indexPath)
+        const node = collection.at(event.indexPath)
 
-        let newHighlightedIndexPath: IndexPath
+        let newHighlightedValue: string[]
 
         if (node && collection.isBranchNode(node)) {
           // Item has children - highlight the full path including this item
-          newHighlightedIndexPath = indexPath
+          newHighlightedValue = event.value
         } else {
           // Item is a leaf - highlight path up to (but not including) this item
-          newHighlightedIndexPath = indexPath.slice(0, -1)
+          newHighlightedValue = event.value.slice(0, -1)
         }
 
-        context.set("highlightedIndexPath", !isEmpty(newHighlightedIndexPath) ? newHighlightedIndexPath : [])
+        set.highlightedValue(params, newHighlightedValue)
       },
       syncInputValue({ context, scope }) {
         const inputEl = dom.getHiddenInputEl(scope)
         if (!inputEl) return
-        // TODO: dispatch sync input
-        // setElementValue(inputEl, context.get("valueAsString"))
+        setElementValue(inputEl, context.hash("value"))
       },
-      dispatchChangeEvent({ scope }) {
-        // TODO: dispatch change event
-        // dispatchInputValueEvent(dom.getHiddenInputEl(scope), { value: computed("valueAsString") })
+      dispatchChangeEvent({ scope, context }) {
+        dispatchInputValueEvent(dom.getHiddenInputEl(scope), { value: context.hash("value") })
       },
-      scrollContentToTop({ scope }) {
+      scrollContentToTop({ scope, prop }) {
+        const scrollToIndexFn = prop("scrollToIndexFn")
         // Scroll all lists to the top when closing
         raf(() => {
           const contentEl = dom.getContentEl(scope)
           const listEls = contentEl?.querySelectorAll('[data-part="list"]')
-          listEls?.forEach((listEl) => ((listEl as HTMLElement).scrollTop = 0))
+          listEls?.forEach((listEl, index) => {
+            if (scrollToIndexFn) {
+              scrollToIndexFn({ index: 0, immediate: true, depth: index })
+            } else {
+              listEl.scrollTop = 0
+            }
+          })
         })
       },
     },
   },
 })
+
+const set = {
+  value({ context, prop }: Params<CascadeSelectSchema>, value: CascadeSelectSchema["context"]["value"]) {
+    const collection = prop("collection")
+
+    // Set Value
+    context.set("value", value)
+
+    // Set Index Path
+    const valueIndexPath = value.map((v) => collection.getIndexPath(v))
+    context.set("valueIndexPath", valueIndexPath)
+
+    // Set Items
+    const selectedItems = valueIndexPath.map((indexPath) => {
+      // For each selected path, return all nodes that make up that path
+      return indexPath.map((_, index) => {
+        const partialPath = indexPath.slice(0, index + 1)
+        return collection.at(partialPath)
+      })
+    })
+    context.set("selectedItems", selectedItems)
+
+    // Invoke onValueChange
+    prop("onValueChange")?.({ value, items: selectedItems })
+  },
+
+  highlightedValue(
+    { context, prop }: Params<CascadeSelectSchema>,
+    value: CascadeSelectSchema["context"]["highlightedValue"],
+  ) {
+    const collection = prop("collection")
+
+    // Set Value
+    context.set("highlightedValue", value)
+
+    // Set Index Path
+    const highlightedIndexPath = value == null ? [] : collection.getIndexPath(value)
+    context.set("highlightedIndexPath", highlightedIndexPath)
+
+    // Set Items
+    const highlightedItem = highlightedIndexPath.map((_, index) => {
+      const partialPath = highlightedIndexPath.slice(0, index + 1)
+      return collection.at(partialPath)
+    })
+    context.set("highlightedItem", highlightedItem)
+
+    // Invoke onHighlightChange
+    prop("onHighlightChange")?.({ value, items: highlightedItem })
+  },
+}
+
+function restoreFocusFn(event: Record<string, any>) {
+  const v = event.restoreFocus ?? event.previousEvent?.restoreFocus
+  return v == null || !!v
+}
diff --git a/packages/machines/cascade-select/src/cascade-select.props.ts b/packages/machines/cascade-select/src/cascade-select.props.ts
index e2861577e8..e548185c36 100644
--- a/packages/machines/cascade-select/src/cascade-select.props.ts
+++ b/packages/machines/cascade-select/src/cascade-select.props.ts
@@ -8,28 +8,28 @@ export const props = createProps<CascadeSelectProps>()([
   "collection",
   "defaultOpen",
   "defaultValue",
+  "defaultHighlightedValue",
   "dir",
   "disabled",
-  "formatValue",
   "getRootNode",
   "id",
   "ids",
   "invalid",
-  "separator",
   "highlightTrigger",
   "form",
   "name",
-  "loop",
+  "loopFocus",
   "multiple",
   "onHighlightChange",
   "onOpenChange",
   "onValueChange",
   "open",
-  "placeholder",
   "positioning",
   "readOnly",
   "required",
   "value",
+  "highlightedValue",
+  "scrollToIndexFn",
 ])
 
 export const splitProps = createSplitProps<Partial<CascadeSelectProps>>(props)
diff --git a/packages/machines/cascade-select/src/cascade-select.types.ts b/packages/machines/cascade-select/src/cascade-select.types.ts
index ed20c4786c..7f4052f009 100644
--- a/packages/machines/cascade-select/src/cascade-select.types.ts
+++ b/packages/machines/cascade-select/src/cascade-select.types.ts
@@ -3,26 +3,33 @@ import type { TreeCollection, TreeNode } from "@zag-js/collection"
 import type { IndexPath } from "@zag-js/collection/src/tree-visit"
 import type { Point } from "@zag-js/rect-utils"
 import type { CommonProperties, DirectionProperty, PropTypes, RequiredBy } from "@zag-js/types"
-import type { Machine, Service } from "@zag-js/core"
+import type { EventObject, Machine, Service } from "@zag-js/core"
+import type { InteractOutsideHandlers } from "@zag-js/dismissable"
 
 /* -----------------------------------------------------------------------------
  * Callback details
  * -----------------------------------------------------------------------------*/
 
-export interface ValueChangeDetails {
-  indexPath: IndexPath[]
-  // value: string[][]
-  // valueText: string
+export interface ValueChangeDetails<T = TreeNode> {
+  value: string[][]
+  items: T[][]
 }
 
-export interface HighlightChangeDetails {
-  indexPath: IndexPath
+export interface HighlightChangeDetails<T = TreeNode> {
+  value: string[]
+  items: T[]
 }
 
 export interface OpenChangeDetails {
   open: boolean
 }
 
+export interface ScrollToIndexDetails {
+  index: number
+  immediate?: boolean | undefined
+  depth: number
+}
+
 export type { TreeNode }
 
 export type ElementIds = Partial<{
@@ -31,7 +38,6 @@ export type ElementIds = Partial<{
   control: string
   trigger: string
   indicator: string
-  valueText: string
   clearTrigger: string
   positioner: string
   content: string
@@ -44,7 +50,7 @@ export type ElementIds = Partial<{
  * Machine context
  * -----------------------------------------------------------------------------*/
 
-export interface CascadeSelectProps<T = any> extends DirectionProperty, CommonProperties {
+export interface CascadeSelectProps<T = any> extends DirectionProperty, CommonProperties, InteractOutsideHandlers {
   /**
    * The tree collection data
    */
@@ -61,15 +67,23 @@ export interface CascadeSelectProps<T = any> extends DirectionProperty, CommonPr
    * The form attribute of the underlying select element
    */
   form?: string | undefined
-  // /**
-  //  * The controlled value of the cascade-select
-  //  */
-  // value?: string[][] | undefined
-  // /**
-  //  * The initial value of the cascade-select when rendered.
-  //  * Use when you don't need to control the value.
-  //  */
-  // defaultValue?: string[][] | undefined
+  /**
+   * The controlled value of the cascade-select
+   */
+  value?: string[][] | undefined
+  /**
+   * The initial value of the cascade-select when rendered.
+   * Use when you don't need to control the value.
+   */
+  defaultValue?: string[][] | undefined
+  /**
+   * The controlled highlighted value of the cascade-select
+   */
+  highlightedValue?: string[] | undefined
+  /**
+   * The initial highlighted value of the cascade-select when rendered.
+   */
+  defaultHighlightedValue?: string[] | undefined
   /**
    * Whether to allow multiple selections
    * @default false
@@ -89,10 +103,6 @@ export interface CascadeSelectProps<T = any> extends DirectionProperty, CommonPr
    * @default "click"
    */
   highlightTrigger?: "click" | "hover" | undefined
-  /**
-   * The placeholder text for the cascade-select
-   */
-  placeholder?: string | undefined
   /**
    * Whether the cascade-select should close when an item is selected
    * @default true
@@ -102,7 +112,7 @@ export interface CascadeSelectProps<T = any> extends DirectionProperty, CommonPr
    * Whether the cascade-select should loop focus when navigating with keyboard
    * @default false
    */
-  loop?: boolean | undefined
+  loopFocus?: boolean | undefined
   /**
    * Whether the cascade-select is disabled
    */
@@ -123,18 +133,22 @@ export interface CascadeSelectProps<T = any> extends DirectionProperty, CommonPr
    * The positioning options for the cascade-select content
    */
   positioning?: PositioningOptions | undefined
+  /**
+   * Function to scroll to a specific index
+   */
+  scrollToIndexFn?: ((details: ScrollToIndexDetails) => void) | undefined
   /**
    * Function to format the display value
    */
-  // formatValue?: ((value: string[][]) => string) | undefined
+  formatValue?: ((selectedItems: T[][]) => string) | undefined
   /**
    * Called when the value changes
    */
-  onValueChange?: ((details: ValueChangeDetails) => void) | undefined
+  onValueChange?: ((details: ValueChangeDetails<T>) => void) | undefined
   /**
    * Called when the highlighted value changes
    */
-  onHighlightChange?: ((details: HighlightChangeDetails) => void) | undefined
+  onHighlightChange?: ((details: HighlightChangeDetails<T>) => void) | undefined
   /**
    * Called when the open state changes
    */
@@ -143,43 +157,32 @@ export interface CascadeSelectProps<T = any> extends DirectionProperty, CommonPr
    * Whether parent (branch) items can be selectable
    */
   allowParentSelection?: boolean
-  /**
-   * The separator used to join path segments in the cascade select
-   * @default " / "
-   */
-  separator?: string | undefined
 }
 
-type PropsWithDefault =
-  | "collection"
-  | "closeOnSelect"
-  | "loop"
-  // | "defaultValue"
-  | "defaultOpen"
-  | "multiple"
-  | "highlightTrigger"
-  | "separator"
+type PropsWithDefault = "collection" | "closeOnSelect" | "loopFocus" | "highlightTrigger"
 
 export interface CascadeSelectSchema<T extends TreeNode = TreeNode> {
   state: "idle" | "focused" | "open"
   props: RequiredBy<CascadeSelectProps<T>, PropsWithDefault>
   context: {
-    // value: string[][]
-    valueIndexPath: IndexPath[]
-    highlightedIndexPath: IndexPath
+    value: string[][]
+    highlightedValue: string[]
     currentPlacement: Placement | undefined
     fieldsetDisabled: boolean
     graceArea: Point[] | null
+    valueIndexPath: IndexPath[]
+    highlightedIndexPath: IndexPath
+    highlightedItem: T[] | null
+    selectedItems: T[][]
   }
   computed: {
-    isDisabled: boolean
     isInteractive: boolean
-    value: string[][]
-    valueText: string
+    valueAsString: string
   }
   action: string
   effect: string
   guard: string
+  event: EventObject
 }
 
 export type CascadeSelectService<T extends TreeNode = TreeNode> = Service<CascadeSelectSchema<T>>
@@ -202,18 +205,18 @@ export interface ItemProps<T = TreeNode> {
   /**
    * The value path of the item
    */
-  valuePath: string[]
+  value: string[]
   /**
    * Whether hovering outside should clear the highlighted state
    */
   persistFocus?: boolean | undefined
 }
 
-export interface ItemState {
+export interface ItemState<T = TreeNode> {
   /**
    * The value of the item
    */
-  value: string
+  value: string[]
   /**
    * Whether the item is disabled
    */
@@ -234,69 +237,107 @@ export interface ItemState {
    * The depth of the item in the tree
    */
   depth: number
+  /**
+   * The highlighted child of the item
+   */
+  highlightedChild: T | undefined
+  /**
+   * The index of the highlighted child
+   */
+  highlightedIndex: number
 }
 
 export interface CascadeSelectApi<T extends PropTypes = PropTypes, V = TreeNode> {
-  /**
-   * The separator used to join path segments in the display value
-   */
-  separator: string
   /**
    * The tree collection data
    */
   collection: TreeCollection<V>
   /**
-   * The current value of the cascade-select
+   * Whether the cascade-select is open
    */
-  value: string[][]
+  open: boolean
   /**
-   * Function to set the value
+   * Whether the cascade-select is focused
+   */
+  focused: boolean
+  /**
+   * Whether the cascade-select allows multiple selections
+   */
+  multiple: boolean
+  /**
+   * Whether the cascade-select is disabled
+   */
+  disabled: boolean
+  /**
+   * The value of the highlighted item
+   */
+  highlightedValue: string[]
+  /**
+   * The highlighted item
+   */
+  highlightedItem: V[] | null
+  /**
+   * The selected items
+   */
+  selectedItems: V[][]
+  /**
+   * Whether there's a selected option
+   */
+  hasSelectedItems: boolean
+  /**
+   * The current value of the cascade-select
    */
-  // setValue(value: string[][]): void
+  value: string[][]
   /**
    * The current value as text
    */
-  valueText: string
+  valueAsString: string
   /**
-   * The current highlighted value
+   * Function to focus on the select input
    */
-  highlightedIndexPath: IndexPath
+  focus(): void
   /**
-   * Whether the cascade-select is open
+   * Function to focus on the select input
    */
-  open: boolean
+  focus(): void
   /**
-   * Whether the cascade-select is focused
+   * Function to set the positioning options of the cascade-select
    */
-  focused: boolean
+  reposition(options?: Partial<PositioningOptions>): void
   /**
    * Function to open the cascade-select
    */
   setOpen(open: boolean): void
   /**
-   * Function to highlight an item
+   * Function to highlight a value
+   */
+  highlightValue(value: string): void
+  /**
+   * Function to select a value
    */
-  highlight(path: string[]): void
+  selectValue(value: string[]): void
   /**
-   * Function to select an item
+   * Function to set the value
    */
-  // selectItem(value: string): void
+  setValue(value: string[][]): void
   /**
    * Function to clear the value
    */
-  clearValue(): void
+  clearValue(value?: string[]): void
+  /**
+   * Returns the state of a cascade-select item
+   */
+  getItemState(props: ItemProps<V>): ItemState<V>
 
   getRootProps(): T["element"]
   getLabelProps(): T["element"]
   getControlProps(): T["element"]
   getTriggerProps(): T["element"]
   getIndicatorProps(): T["element"]
-  getValueTextProps(): T["element"]
   getClearTriggerProps(): T["element"]
   getPositionerProps(): T["element"]
   getContentProps(): T["element"]
   getListProps(props: ItemProps<V>): T["element"]
-  getItemState(props: ItemProps<V>): ItemState
   getItemProps(props: ItemProps<V>): T["element"]
   getItemTextProps(props: ItemProps<V>): T["element"]
   getItemIndicatorProps(props: ItemProps<V>): T["element"]
diff --git a/packages/utilities/collection/src/tree-collection.ts b/packages/utilities/collection/src/tree-collection.ts
index ef1235d46c..74267ed105 100644
--- a/packages/utilities/collection/src/tree-collection.ts
+++ b/packages/utilities/collection/src/tree-collection.ts
@@ -116,11 +116,39 @@ export class TreeCollection<T = TreeNode> {
       .map(({ value }) => value)
   }
 
-  getIndexPath = (value: string): IndexPath | undefined => {
-    return findIndexPath(this.rootNode, {
-      getChildren: this.getNodeChildren,
-      predicate: (node) => this.getNodeValue(node) === value,
-    })
+  getIndexPath(value: string): IndexPath | undefined
+  getIndexPath(valuePath: string[]): IndexPath
+  getIndexPath(valueOrValuePath: string | string[]): IndexPath | undefined {
+    if (Array.isArray(valueOrValuePath)) {
+      // Handle value path (array of strings)
+      if (valueOrValuePath.length === 0) return []
+
+      const indexPath: IndexPath = []
+      let currentChildren = this.getNodeChildren(this.rootNode)
+
+      for (let i = 0; i < valueOrValuePath.length; i++) {
+        const currentValue = valueOrValuePath[i]
+        const matchingChildIndex = currentChildren.findIndex((child) => this.getNodeValue(child) === currentValue)
+
+        if (matchingChildIndex === -1) break
+
+        indexPath.push(matchingChildIndex)
+
+        // Only get children if we're not at the last element
+        if (i < valueOrValuePath.length - 1) {
+          const currentNode = currentChildren[matchingChildIndex]
+          currentChildren = this.getNodeChildren(currentNode)
+        }
+      }
+
+      return indexPath
+    } else {
+      // Handle single value (string)
+      return findIndexPath(this.rootNode, {
+        getChildren: this.getNodeChildren,
+        predicate: (node) => this.getNodeValue(node) === valueOrValuePath,
+      })
+    }
   }
 
   getValue = (indexPath: IndexPath): string | undefined => {
diff --git a/shared/src/controls.ts b/shared/src/controls.ts
index 7d8a08d262..bd337651a2 100644
--- a/shared/src/controls.ts
+++ b/shared/src/controls.ts
@@ -22,7 +22,6 @@ export const cascadeSelectControls = defineControls({
     options: ["click", "hover"] as const,
     defaultValue: "click",
   },
-  separator: { type: "string", defaultValue: " / " },
 })
 
 export const checkboxControls = defineControls({
diff --git a/shared/src/css/cascade-select.css b/shared/src/css/cascade-select.css
index 47933f847d..c8240f360d 100644
--- a/shared/src/css/cascade-select.css
+++ b/shared/src/css/cascade-select.css
@@ -58,24 +58,25 @@
   border-radius: 6px;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
   padding: 6px;
-  max-height: 300px;
-  overflow: hidden;
+  max-height: 320px;
+  overflow-x: auto;
   display: flex;
   gap: 8px;
 }
 
 [data-scope="cascade-select"][data-part="list"] {
-  min-width: 140px;
+  width: 200px;
+  height: 300px;
   padding: 2px 0;
   display: flex;
   flex-direction: column;
   gap: 0px;
   position: relative;
-  max-height: 288px;
   overflow-y: auto;
   overflow-x: hidden;
   scrollbar-width: thin;
   scrollbar-color: #cbd5e1 #f1f5f9;
+  flex-shrink: 0;
 }
 
 /* Custom scrollbar styling for levels */
@@ -109,10 +110,6 @@
   opacity: 0.6;
 }
 
-[data-scope="cascade-select"][data-part="list"]:last-child {
-  /* No additional styling needed */
-}
-
 [data-scope="cascade-select"][data-part="item"] {
   display: flex;
   align-items: center;
@@ -133,6 +130,10 @@
   border-color: #cbd5e1;
 }
 
+[data-scope="cascade-select"][data-part="item"][data-selected] {
+  font-weight: 600;
+}
+
 [data-scope="cascade-select"][data-part="item"][data-highlighted] {
   background: #dbeafe;
   color: #1e40af;

From f9391a81e9d6c293f574e961e6c73fa80f230175 Mon Sep 17 00:00:00 2001
From: anubra266 <anubra266@gmail.com>
Date: Fri, 13 Jun 2025 04:02:30 -0700
Subject: [PATCH 15/20] chore: improv

---
 examples/next-ts/pages/cascade-select.tsx     |  17 +-
 .../src/cascade-select.connect.ts             |   7 +-
 shared/src/css/cascade-select.css             | 199 ++++++------------
 3 files changed, 72 insertions(+), 151 deletions(-)

diff --git a/examples/next-ts/pages/cascade-select.tsx b/examples/next-ts/pages/cascade-select.tsx
index 66e2f3086b..000d95a71d 100644
--- a/examples/next-ts/pages/cascade-select.tsx
+++ b/examples/next-ts/pages/cascade-select.tsx
@@ -1,7 +1,7 @@
 import { normalizeProps, Portal, useMachine } from "@zag-js/react"
 import { cascadeSelectControls, cascadeSelectData } from "@zag-js/shared"
 import * as cascadeSelect from "@zag-js/cascade-select"
-import { ChevronDownIcon, ChevronRightIcon, XIcon } from "lucide-react"
+import { ChevronRightIcon, XIcon } from "lucide-react"
 import serialize from "form-serialize"
 import { JSX, useId } from "react"
 import { StateVisualizer } from "../components/state-visualizer"
@@ -40,7 +40,7 @@ const TreeNode = (props: TreeNodeProps): JSX.Element => {
 
   return (
     <>
-      <div {...api.getListProps(nodeProps)}>
+      <ul {...api.getListProps(nodeProps)}>
         {children.map((item, index) => {
           const itemProps = {
             indexPath: [...indexPath, index],
@@ -51,17 +51,18 @@ const TreeNode = (props: TreeNodeProps): JSX.Element => {
           const itemState = api.getItemState(itemProps)
 
           return (
-            <div key={item.label} {...api.getItemProps(itemProps)}>
+            <li key={item.label} {...api.getItemProps(itemProps)}>
               <span {...api.getItemTextProps(itemProps)}>{item.label}</span>
+              <span {...api.getItemIndicatorProps(itemProps)}>✓</span>
               {itemState.hasChildren && (
-                <span {...api.getItemIndicatorProps(itemProps)}>
+                <span>
                   <ChevronRightIcon size={16} />
                 </span>
               )}
-            </div>
+            </li>
           )
         })}
-      </div>
+      </ul>
       {nodeState.highlightedChild && collection.isBranchNode(nodeState.highlightedChild) && (
         <TreeNode
           node={nodeState.highlightedChild}
@@ -107,9 +108,7 @@ export default function Page() {
           <div {...api.getControlProps()}>
             <button {...api.getTriggerProps()}>
               <span>{api.valueAsString || "Select a location"}</span>
-              <span {...api.getIndicatorProps()}>
-                <ChevronDownIcon size={16} />
-              </span>
+              <span {...api.getIndicatorProps()}>▼</span>
             </button>
             <button {...api.getClearTriggerProps()}>
               <XIcon size={16} />
diff --git a/packages/machines/cascade-select/src/cascade-select.connect.ts b/packages/machines/cascade-select/src/cascade-select.connect.ts
index 544d585193..9956236bd7 100644
--- a/packages/machines/cascade-select/src/cascade-select.connect.ts
+++ b/packages/machines/cascade-select/src/cascade-select.connect.ts
@@ -366,7 +366,7 @@ export function connect<T extends PropTypes, V = TreeNode>(
         "data-highlighted": dataAttr(itemState.highlighted),
         "data-selected": dataAttr(itemState.selected),
         "data-depth": itemState.depth,
-        "aria-selected": itemState.selected,
+        "data-state": itemState.selected ? "checked" : "unchecked",
         "data-type": itemState.hasChildren ? "branch" : "leaf",
         "data-index-path": indexPath.toString(),
         onDoubleClick() {
@@ -424,7 +424,7 @@ export function connect<T extends PropTypes, V = TreeNode>(
         ...parts.itemText.attrs,
         "data-value": itemValue,
         "data-highlighted": dataAttr(itemState.highlighted),
-        "data-selected": dataAttr(itemState.selected),
+        "data-state": itemState.selected ? "checked" : "unchecked",
         "data-disabled": dataAttr(itemState.disabled),
       })
     },
@@ -440,7 +440,8 @@ export function connect<T extends PropTypes, V = TreeNode>(
         "data-value": itemValue,
         "data-highlighted": dataAttr(itemState.highlighted),
         "data-type": itemState.hasChildren ? "branch" : "leaf",
-        hidden: !itemState.hasChildren,
+        "data-state": itemState.selected ? "checked" : "unchecked",
+        hidden: !itemState.selected,
       })
     },
 
diff --git a/shared/src/css/cascade-select.css b/shared/src/css/cascade-select.css
index c8240f360d..1b80ae899f 100644
--- a/shared/src/css/cascade-select.css
+++ b/shared/src/css/cascade-select.css
@@ -1,38 +1,53 @@
+[data-scope="cascade-select"][data-part="control"] {
+  display: flex;
+  flex-direction: column;
+  row-gap: 6px;
+  align-items: flex-start;
+}
+
 [data-scope="cascade-select"][data-part="label"] {
-  display: block;
-  margin-bottom: 8px;
-  font-weight: 500;
+  font-size: 14px;
 }
 
-[data-scope="cascade-select"][data-part="control"] {
-  position: relative;
-  display: flex;
-  align-items: center;
-  gap: 8px;
+[data-scope="cascade-select"][data-part="label"][data-disabled] {
+  cursor: default;
+  color: gray;
+}
+
+[data-scope="cascade-select"][data-part="label"][data-invalid] {
+  color: red;
 }
 
 [data-scope="cascade-select"][data-part="trigger"] {
+  padding: 4px 12px;
+  border-radius: 4px;
+  border: none;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  width: 100%;
-  padding: 8px 12px;
-  border: 1px solid #ccc;
-  border-radius: 6px;
-  background: white;
-  cursor: pointer;
+  column-gap: 6px;
+  cursor: default;
+  background: #eeeeee;
   font-size: 14px;
-  transition: all 0.2s ease;
+  border: 1px solid slategray;
+
+  & svg {
+    width: 14px;
+    height: 14px;
+  }
 }
 
-[data-scope="cascade-select"][data-part="trigger"]:focus {
-  outline: 2px solid #007acc;
-  outline-offset: 2px;
+.cascade-select svg {
+  position: relative;
+  top: 1px;
+}
+
+[data-scope="cascade-select"][data-part="trigger"]:disabled {
+  cursor: default;
 }
 
-[data-scope="cascade-select"][data-part="trigger"][data-state="open"] {
-  border-color: #007acc;
-  box-shadow: 0 0 0 2px rgba(0, 122, 204, 0.1);
+[data-scope="cascade-select"][data-part="trigger"][data-invalid] {
+  border: 2px solid red;
 }
 
 [data-scope="cascade-select"][data-part="clear-trigger"] {
@@ -49,160 +64,66 @@
 }
 
 [data-scope="cascade-select"][data-part="positioner"] {
-  z-index: 10;
+  width: max-content;
 }
 
 [data-scope="cascade-select"][data-part="content"] {
-  background: white;
-  border: 1px solid #ccc;
-  border-radius: 6px;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-  padding: 6px;
-  max-height: 320px;
-  overflow-x: auto;
   display: flex;
-  gap: 8px;
+  margin-top: 4px;
+  background: #efefef;
+  max-height: min(var(--available-height), 200px);
 }
 
 [data-scope="cascade-select"][data-part="list"] {
   width: 200px;
-  height: 300px;
-  padding: 2px 0;
-  display: flex;
-  flex-direction: column;
-  gap: 0px;
+  list-style: none;
+  padding: 4px;
+  margin: 0;
   position: relative;
   overflow-y: auto;
+  overscroll-behavior: contain;
   overflow-x: hidden;
-  scrollbar-width: thin;
-  scrollbar-color: #cbd5e1 #f1f5f9;
-  flex-shrink: 0;
-}
-
-/* Custom scrollbar styling for levels */
-[data-scope="cascade-select"][data-part="list"]::-webkit-scrollbar {
-  width: 6px;
-}
-
-[data-scope="cascade-select"][data-part="list"]::-webkit-scrollbar-track {
-  background: #f1f5f9;
-  border-radius: 3px;
-}
-
-[data-scope="cascade-select"][data-part="list"]::-webkit-scrollbar-thumb {
-  background: #cbd5e1;
-  border-radius: 3px;
-}
-
-[data-scope="cascade-select"][data-part="list"]::-webkit-scrollbar-thumb:hover {
-  background: #94a3b8;
 }
 
 /* Add a subtle separator line between levels */
 [data-scope="cascade-select"][data-part="list"]:not(:last-child)::after {
   content: "";
   position: absolute;
-  right: -4px;
+  right: 0px;
   top: 6px;
   bottom: 6px;
   width: 1px;
-  background: #e5e7eb;
+  background: #d4d5d8;
   opacity: 0.6;
 }
 
 [data-scope="cascade-select"][data-part="item"] {
+  padding: 4px 8px;
+  cursor: default;
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  padding: 6px 10px;
-  cursor: pointer;
   border-radius: 4px;
-  font-size: 14px;
-  transition: all 0.15s ease;
-  position: relative;
-  border: 1px solid transparent;
-  min-height: 32px;
-  gap: 6px;
-}
-
-[data-scope="cascade-select"][data-part="item"]:hover {
-  background: #e2e8f0;
-  border-color: #cbd5e1;
-}
-
-[data-scope="cascade-select"][data-part="item"][data-selected] {
-  font-weight: 600;
-}
-
-[data-scope="cascade-select"][data-part="item"][data-highlighted] {
-  background: #dbeafe;
-  color: #1e40af;
-  border: 1px solid #93c5fd;
-  box-shadow: 0 1px 3px rgba(59, 130, 246, 0.1);
 }
 
-[data-scope="cascade-select"][data-part="item"][data-highlighted]:hover {
-  background: #bfdbfe;
-  border-color: #60a5fa;
-}
-
-[data-scope="cascade-select"][data-part="item"][data-disabled] {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-[data-scope="cascade-select"][data-part="item"][data-disabled]:hover {
-  background: transparent;
-  border-color: transparent;
-}
-
-/* Item text styling */
 [data-scope="cascade-select"][data-part="item-text"] {
-  flex: 1;
-  transition: all 0.15s ease;
-  text-align: left;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-/* Item indicator (chevron for branches) - reserve space even when not present */
-[data-scope="cascade-select"][data-part="item-indicator"] {
-  color: #6b7280;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: color 0.15s ease;
-  width: 16px;
-  height: 16px;
-  flex-shrink: 0;
+  margin-right: auto;
 }
 
-/* Add consistent right padding area for all items, even those without indicators */
-[data-scope="cascade-select"][data-part="item"]::after {
-  content: "";
-  width: 16px;
-  height: 16px;
-  flex-shrink: 0;
-  visibility: hidden;
-}
-
-/* Hide the pseudo-element when there's an actual indicator */
-[data-scope="cascade-select"][data-part="item"]:has([data-scope="cascade-select"][data-part="item-indicator"])::after {
-  display: none;
+[data-scope="cascade-select"][data-part="item"][data-disabled] {
+  color: #777;
 }
 
-/* Indicator hover and state styles */
-[data-scope="cascade-select"][data-part="item"]:hover [data-scope="cascade-select"][data-part="item-indicator"] {
-  color: #475569;
+[data-scope="cascade-select"][data-part="item"][data-state="checked"] {
+  background: blue;
+  color: white;
 }
 
-[data-scope="cascade-select"][data-part="item"][data-highlighted]
-  [data-scope="cascade-select"][data-part="item-indicator"] {
-  color: #1e40af;
+[data-scope="cascade-select"][data-part="item"]:hover {
+  background: #e2e8f0;
+  border-color: #cbd5e1;
 }
 
-/* Placeholder text */
-[data-scope="cascade-select"][data-part="value-text"][data-placeholder] {
-  color: #999;
+[data-scope="cascade-select"][data-part="item"][data-highlighted] {
+  background: rgb(0, 0, 195);
+  color: white;
 }

From 0ea84638a18f5552dd1a5b17dd78b49ac34077bc Mon Sep 17 00:00:00 2001
From: anubra266 <anubra266@gmail.com>
Date: Fri, 13 Jun 2025 04:02:54 -0700
Subject: [PATCH 16/20] fix: tests

---
 e2e/models/cascade-select.model.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/e2e/models/cascade-select.model.ts b/e2e/models/cascade-select.model.ts
index 4583bf751a..10f78cde24 100644
--- a/e2e/models/cascade-select.model.ts
+++ b/e2e/models/cascade-select.model.ts
@@ -44,7 +44,7 @@ export class CascadeSelectModel extends Model {
   }
 
   get selectedItems() {
-    return this.page.locator("[data-part=item][data-selected]")
+    return this.page.locator("[data-part=item][data-state='checked']")
   }
 
   focusTrigger = async () => {

From 759ab42d37542ca175ef8d2a6d2c482ecd0ca088 Mon Sep 17 00:00:00 2001
From: anubra266 <anubra266@gmail.com>
Date: Fri, 13 Jun 2025 12:34:07 -0700
Subject: [PATCH 17/20] chore: clean

---
 examples/next-ts/pages/cascade-select.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/examples/next-ts/pages/cascade-select.tsx b/examples/next-ts/pages/cascade-select.tsx
index 000d95a71d..1658d55788 100644
--- a/examples/next-ts/pages/cascade-select.tsx
+++ b/examples/next-ts/pages/cascade-select.tsx
@@ -82,8 +82,8 @@ export default function Page() {
     id: useId(),
     collection,
     name: "location",
-    // value: ["asia / india / haryana:HR"],
-    // highlightedValue: "asia / india / haryana:HR",
+    // value: [["asia", "india", "haryana:HR"]],
+    // highlightedValue: ["asia", "india", "haryana:HR"],
     onHighlightChange(details) {
       console.log("onHighlightChange", details)
     },

From e5d3a2816cfe94b68769e8f9c91765f790dcb04e Mon Sep 17 00:00:00 2001
From: anubra266 <anubra266@gmail.com>
Date: Fri, 13 Jun 2025 12:45:38 -0700
Subject: [PATCH 18/20] chore: clean

---
 .../cascade-select/src/cascade-select.connect.ts       |  1 -
 .../cascade-select/src/cascade-select.types.ts         | 10 +++-------
 2 files changed, 3 insertions(+), 8 deletions(-)

diff --git a/packages/machines/cascade-select/src/cascade-select.connect.ts b/packages/machines/cascade-select/src/cascade-select.connect.ts
index 9956236bd7..7bcb921b3d 100644
--- a/packages/machines/cascade-select/src/cascade-select.connect.ts
+++ b/packages/machines/cascade-select/src/cascade-select.connect.ts
@@ -393,7 +393,6 @@ export function connect<T extends PropTypes, V = TreeNode>(
         onPointerLeave(event) {
           if (!interactive) return
           if (itemState.disabled) return
-          if (props.persistFocus) return
           if (event.pointerType !== "mouse") return
 
           const pointerMoved = service.event.previous()?.type.includes("POINTER")
diff --git a/packages/machines/cascade-select/src/cascade-select.types.ts b/packages/machines/cascade-select/src/cascade-select.types.ts
index 7f4052f009..2287a10116 100644
--- a/packages/machines/cascade-select/src/cascade-select.types.ts
+++ b/packages/machines/cascade-select/src/cascade-select.types.ts
@@ -60,11 +60,11 @@ export interface CascadeSelectProps<T = any> extends DirectionProperty, CommonPr
    */
   ids?: ElementIds | undefined
   /**
-   * The name attribute of the underlying select element
+   * The name attribute of the underlying input element
    */
   name?: string | undefined
   /**
-   * The form attribute of the underlying select element
+   * The form attribute of the underlying input element
    */
   form?: string | undefined
   /**
@@ -134,7 +134,7 @@ export interface CascadeSelectProps<T = any> extends DirectionProperty, CommonPr
    */
   positioning?: PositioningOptions | undefined
   /**
-   * Function to scroll to a specific index
+   * Function to scroll to a specific index in a list
    */
   scrollToIndexFn?: ((details: ScrollToIndexDetails) => void) | undefined
   /**
@@ -206,10 +206,6 @@ export interface ItemProps<T = TreeNode> {
    * The value path of the item
    */
   value: string[]
-  /**
-   * Whether hovering outside should clear the highlighted state
-   */
-  persistFocus?: boolean | undefined
 }
 
 export interface ItemState<T = TreeNode> {

From a93600f003105227be92504ba7d8c09e31c4b38d Mon Sep 17 00:00:00 2001
From: anubra266 <anubra266@gmail.com>
Date: Thu, 26 Jun 2025 09:39:33 -0700
Subject: [PATCH 19/20] chore: svelte presence

---
 README.md | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 085573d577..b150f00825 100644
--- a/README.md
+++ b/README.md
@@ -15,7 +15,7 @@
 Finite state machines for accessible JavaScript components
 
 - **Write once, use everywhere 🦄**: The component interactions are modelled in a framework agnostic way. We provide
-  adapters for JS frameworks like React, Solid, or Vue.
+  adapters for JS frameworks like React, Svelte, Solid, or Vue.
 - **Focus on accessibility ♿️**: Zag is built with accessibility in mind. We handle many details related to keyboard
   interactions, focus management, aria roles and attributes.
 - **Headless ✨**: The machine APIs are completely unstyled and gives you the control to use any styling solution you
@@ -65,6 +65,7 @@ For framework specific solutions, we provide simple wrappers to help you consume
 - ⚛️ `@zag-js/react` - React hooks for consuming machines in React applications
 - 💚 `@zag-js/vue` - Vue composition for consuming machines in Vue applications
 - 🎷 `@zag-js/solid` - Solid.js utilities for consuming machines in Solid.js applications
+- 🎭 `@zag-js/svelte` - Svelte utilities for consuming machines in Svelte applications
 
 ## Usage
 
@@ -107,7 +108,7 @@ power the logic behind UI components.
 
 ### Teasers
 
-- When you see someone using classic react, vue or solid to build an interactive UI component that exists in Zag, tell
+- When you see someone using classic react, svelte, vue or solid to build an interactive UI component that exists in Zag, tell
   them to **"zag it!"** ⚡️
 
 - Anyone using Zag will be called a **"zagger"** 💥
@@ -134,6 +135,7 @@ projects for the frameworks we support.
 - `start-react` : Starts the Next.js TypeScript project
 - `start-vue` : Starts the Vue 3 TypeScript project
 - `start-solid` : Starts the Solid TypeScript project
+- `start-svelte` : Starts the Svelte TypeScript project
 
 ### E2E Tests
 
@@ -143,6 +145,7 @@ ensure that the component works the same way regardless of the framework.
 - `e2e-react` : Starts the E2E tests for the React project
 - `e2e-vue` : Starts the E2E tests for the Vue project
 - `e2e-solid` : Starts the E2E tests for the Solid project
+- `e2e-svelte` : Starts the E2E tests for the Svelte project
 
 ### Contributing new machines/features
 

From 47c61e787cd3f309b3b65408426b88fed29ec1b4 Mon Sep 17 00:00:00 2001
From: anubra266 <anubra266@gmail.com>
Date: Wed, 2 Jul 2025 16:20:47 -0700
Subject: [PATCH 20/20] chore: fix mobile clicks

---
 .../src/cascade-select.connect.ts               | 17 ++---------------
 1 file changed, 2 insertions(+), 15 deletions(-)

diff --git a/packages/machines/cascade-select/src/cascade-select.connect.ts b/packages/machines/cascade-select/src/cascade-select.connect.ts
index 7bcb921b3d..6161951793 100644
--- a/packages/machines/cascade-select/src/cascade-select.connect.ts
+++ b/packages/machines/cascade-select/src/cascade-select.connect.ts
@@ -1,12 +1,4 @@
-import {
-  ariaAttr,
-  dataAttr,
-  getEventKey,
-  isEditableElement,
-  isLeftClick,
-  isSelfTarget,
-  isValidTabEvent,
-} from "@zag-js/dom-query"
+import { ariaAttr, dataAttr, getEventKey, isEditableElement, isSelfTarget, isValidTabEvent } from "@zag-js/dom-query"
 import { getPlacementStyles } from "@zag-js/popper"
 import type { EventKeyMap, NormalizeProps, PropTypes } from "@zag-js/types"
 import type { Service } from "@zag-js/core"
@@ -374,8 +366,8 @@ export function connect<T extends PropTypes, V = TreeNode>(
           send({ type: "CLOSE" })
         },
         onClick(event) {
+          if (event.defaultPrevented) return
           if (!interactive) return
-          if (!isLeftClick(event)) return
           if (itemState.disabled) return
           send({ type: "ITEM.CLICK", value: itemState.value, indexPath })
         },
@@ -406,11 +398,6 @@ export function connect<T extends PropTypes, V = TreeNode>(
             clientY: event.clientY,
           })
         },
-        onTouchEnd(event) {
-          // prevent clicking elements behind content
-          event.preventDefault()
-          event.stopPropagation()
-        },
       })
     },