@ngrok/mantle 0.73.0 → 0.73.2

package/dist/{types-DnghL1WE.d.ts → types-QKZ5fvaQ.d.ts}

@@ -27,4 +27,4 @@ type SvgAttributes = ComponentProps<"svg"> & {
 };
 //#endregion
 export { SvgAttributes as t };
-//# sourceMappingURL=types-DnghL1WE.d.ts.map
+//# sourceMappingURL=types-QKZ5fvaQ.d.ts.map

package/dist/types.d.ts

@@ -1,6 +1,6 @@
-import { t as DeepNonNullable } from "./deep-non-nullable-CT7hWCFG.js";
-import { t as WithAsChild } from "./as-child-C2PttRwz.js";
-import { i as parseBooleanish, n as CssProperties, r as Booleanish, t as $cssProperties } from "./index-TI92Xpg5.js";
-import { t as WithStyleProps } from "./with-style-props-CW8buMhK.js";
-import { t as VariantProps } from "./variant-props-B4io4uA_.js";
+import { t as DeepNonNullable } from "./deep-non-nullable-Xu7ckQM6.js";
+import { t as WithAsChild } from "./as-child-CpZKMqTE.js";
+import { i as parseBooleanish, n as CssProperties, r as Booleanish, t as $cssProperties } from "./index-BbZBDzPh.js";
+import { t as WithStyleProps } from "./with-style-props-xzZLnIrF.js";
+import { t as VariantProps } from "./variant-props-BZbM__kQ.js";
 export { $cssProperties, Booleanish, CssProperties, DeepNonNullable, VariantProps, WithAsChild, WithStyleProps, parseBooleanish };

package/dist/{use-prefers-reduced-motion-YUurmkwx.js → use-prefers-reduced-motion-Bpx8G3UT.js}

@@ -1,2 +1,2 @@
 import{n as e}from"./browser-only-QPyyfLaB.js";import{useEffect as t,useState as n}from"react";const r=`(prefers-reduced-motion: no-preference)`;function i(){return e()?!window.matchMedia(r).matches:!0}function a(){let[e,a]=n(!0);return t(()=>{let e=window.matchMedia(r);a(i());function t(e){a(!e.matches)}return e.addEventListener(`change`,t),()=>{e.removeEventListener(`change`,t)}},[]),e}export{a as n,i as t};
-//# sourceMappingURL=use-prefers-reduced-motion-YUurmkwx.js.map
+//# sourceMappingURL=use-prefers-reduced-motion-Bpx8G3UT.js.map

package/dist/{use-prefers-reduced-motion-YUurmkwx.js.map → use-prefers-reduced-motion-Bpx8G3UT.js.map}

@@ -1 +1 @@
-{"version":3,"file":"use-prefers-reduced-motion-YUurmkwx.js","names":[],"sources":["../src/hooks/use-prefers-reduced-motion.tsx"],"sourcesContent":["import { useEffect, useState } from \"react\";\nimport { canUseDOM } from \"../components/browser-only/browser-only.js\";\n\n/**\n * no-preference is the default value for the prefers-reduced-motion media query.\n * Users who have never fiddled with their a11y settings will still see animations\n * (no explicit opt-in required from a user's perspective)\n */\nconst query = \"(prefers-reduced-motion: no-preference)\";\n\n/**\n * Imperatively reads the current `prefers-reduced-motion` preference once at\n * the time of the call.\n *\n * Useful in event handlers, animation entrypoints, or plain functions where\n * a React hook cannot be called. Prefer {@link usePrefersReducedMotion}\n * inside components — it subscribes to live changes.\n *\n * @returns `true` when the user has opted out of animations or when called\n *   outside a browser environment (SSR), `false` when motion is allowed.\n *\n * @remarks\n * The conservative SSR default of `true` matches\n * {@link usePrefersReducedMotion}: animations stay off until we can verify\n * the user's preference on the client.\n *\n * @example\n * // Skip a one-off entrance animation in a click handler\n * function onOpen() {\n *   if (getPrefersReducedMotion()) {\n *     element.style.opacity = \"1\";\n *     return;\n *   }\n *   element.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 200 });\n * }\n */\nexport function getPrefersReducedMotion(): boolean {\n\tif (!canUseDOM()) {\n\t\treturn true;\n\t}\n\treturn !window.matchMedia(query).matches;\n}\n\n/**\n * React hook that subscribes to the user's `prefers-reduced-motion` media\n * query and re-renders when it changes.\n *\n * Defaults to `true` (reduce motion) on the server and during the first\n * client render to avoid animating before hydration. The initial client\n * effect reads the *real* preference and updates state. The underlying\n * media query used is `(prefers-reduced-motion: no-preference)` inverted —\n * \"if the system hasn't opted out, animations are allowed.\"\n *\n * @returns `true` when the user prefers reduced motion (animations should be\n *   shortened or skipped), `false` when full motion is acceptable.\n *\n * @remarks\n * If you need to support very old browsers that lack\n * `MediaQueryList.addEventListener`, consider falling back to\n * `addListener` / `removeListener`.\n *\n * @example\n * // Conditionally shorten or skip transitions\n * const prefersReducedMotion = usePrefersReducedMotion();\n * const duration = prefersReducedMotion ? 0 : 200;\n *\n * return <Modal transitionDuration={duration} />;\n *\n * @example\n * // Disable an autoplaying carousel when motion is reduced\n * const prefersReducedMotion = usePrefersReducedMotion();\n *\n * return <Carousel autoplay={!prefersReducedMotion} />;\n */\nexport function usePrefersReducedMotion(): boolean {\n\t// Default to no animations on SSR/first paint; update on mount with the real value.\n\tconst [prefersReducedMotion, setPrefersReducedMotion] = useState(true);\n\n\tuseEffect(() => {\n\t\tconst mediaQueryList = window.matchMedia(query);\n\n\t\t// set the _real_ initial value now that we're on the client\n\t\tsetPrefersReducedMotion(getPrefersReducedMotion());\n\n\t\t// register for updates\n\t\tfunction listener(event: MediaQueryListEvent) {\n\t\t\tsetPrefersReducedMotion(!event.matches);\n\t\t}\n\n\t\tmediaQueryList.addEventListener(\"change\", listener);\n\n\t\treturn () => {\n\t\t\tmediaQueryList.removeEventListener(\"change\", listener);\n\t\t};\n\t}, []);\n\n\treturn prefersReducedMotion;\n}\n"],"mappings":"+FAQA,MAAM,EAAQ,0CA4Bd,SAAgB,GAAmC,CAIlD,OAHK,GAAW,CAGT,CAAC,OAAO,WAAW,EAAM,CAAC,QAFzB,GAoCT,SAAgB,GAAmC,CAElD,GAAM,CAAC,EAAsB,GAA2B,EAAS,GAAK,CAoBtE,OAlBA,MAAgB,CACf,IAAM,EAAiB,OAAO,WAAW,EAAM,CAG/C,EAAwB,GAAyB,CAAC,CAGlD,SAAS,EAAS,EAA4B,CAC7C,EAAwB,CAAC,EAAM,QAAQ,CAKxC,OAFA,EAAe,iBAAiB,SAAU,EAAS,KAEtC,CACZ,EAAe,oBAAoB,SAAU,EAAS,GAErD,EAAE,CAAC,CAEC"}
+{"version":3,"file":"use-prefers-reduced-motion-Bpx8G3UT.js","names":[],"sources":["../src/hooks/use-prefers-reduced-motion.tsx"],"sourcesContent":["import { useEffect, useState } from \"react\";\nimport { canUseDOM } from \"../components/browser-only/browser-only.js\";\n\n/**\n * no-preference is the default value for the prefers-reduced-motion media query.\n * Users who have never fiddled with their a11y settings will still see animations\n * (no explicit opt-in required from a user's perspective)\n */\nconst query = \"(prefers-reduced-motion: no-preference)\";\n\n/**\n * Imperatively reads the current `prefers-reduced-motion` preference once at\n * the time of the call.\n *\n * Useful in event handlers, animation entrypoints, or plain functions where\n * a React hook cannot be called. Prefer {@link usePrefersReducedMotion}\n * inside components — it subscribes to live changes.\n *\n * @returns `true` when the user has opted out of animations or when called\n *   outside a browser environment (SSR), `false` when motion is allowed.\n *\n * @remarks\n * The conservative SSR default of `true` matches\n * {@link usePrefersReducedMotion}: animations stay off until we can verify\n * the user's preference on the client.\n *\n * @example\n * // Skip a one-off entrance animation in a click handler\n * function onOpen() {\n *   if (getPrefersReducedMotion()) {\n *     element.style.opacity = \"1\";\n *     return;\n *   }\n *   element.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 200 });\n * }\n */\nexport function getPrefersReducedMotion(): boolean {\n\tif (!canUseDOM()) {\n\t\treturn true;\n\t}\n\treturn !window.matchMedia(query).matches;\n}\n\n/**\n * React hook that subscribes to the user's `prefers-reduced-motion` media\n * query and re-renders when it changes.\n *\n * Defaults to `true` (reduce motion) on the server and during the first\n * client render to avoid animating before hydration. The initial client\n * effect reads the *real* preference and updates state. The underlying\n * media query used is `(prefers-reduced-motion: no-preference)` inverted —\n * \"if the system hasn't opted out, animations are allowed.\"\n *\n * @returns `true` when the user prefers reduced motion (animations should be\n *   shortened or skipped), `false` when full motion is acceptable.\n *\n * @remarks\n * If you need to support very old browsers that lack\n * `MediaQueryList.addEventListener`, consider falling back to\n * `addListener` / `removeListener`.\n *\n * @example\n * // Conditionally shorten or skip transitions\n * const prefersReducedMotion = usePrefersReducedMotion();\n * const duration = prefersReducedMotion ? 0 : 200;\n *\n * return <Modal transitionDuration={duration} />;\n *\n * @example\n * // Disable an autoplaying carousel when motion is reduced\n * const prefersReducedMotion = usePrefersReducedMotion();\n *\n * return <Carousel autoplay={!prefersReducedMotion} />;\n */\nexport function usePrefersReducedMotion(): boolean {\n\t// Default to no animations on SSR/first paint; update on mount with the real value.\n\tconst [prefersReducedMotion, setPrefersReducedMotion] = useState(true);\n\n\tuseEffect(() => {\n\t\tconst mediaQueryList = window.matchMedia(query);\n\n\t\t// set the _real_ initial value now that we're on the client\n\t\tsetPrefersReducedMotion(getPrefersReducedMotion());\n\n\t\t// register for updates\n\t\tfunction listener(event: MediaQueryListEvent) {\n\t\t\tsetPrefersReducedMotion(!event.matches);\n\t\t}\n\n\t\tmediaQueryList.addEventListener(\"change\", listener);\n\n\t\treturn () => {\n\t\t\tmediaQueryList.removeEventListener(\"change\", listener);\n\t\t};\n\t}, []);\n\n\treturn prefersReducedMotion;\n}\n"],"mappings":"+FAQA,MAAM,EAAQ,0CA4Bd,SAAgB,GAAmC,CAIlD,OAHK,GAAW,CAGT,CAAC,OAAO,WAAW,EAAM,CAAC,QAFzB,GAoCT,SAAgB,GAAmC,CAElD,GAAM,CAAC,EAAsB,GAA2B,EAAS,GAAK,CAoBtE,OAlBA,MAAgB,CACf,IAAM,EAAiB,OAAO,WAAW,EAAM,CAG/C,EAAwB,GAAyB,CAAC,CAGlD,SAAS,EAAS,EAA4B,CAC7C,EAAwB,CAAC,EAAM,QAAQ,CAKxC,OAFA,EAAe,iBAAiB,SAAU,EAAS,KAEtC,CACZ,EAAe,oBAAoB,SAAU,EAAS,GAErD,EAAE,CAAC,CAEC"}

package/dist/utils.d.ts

@@ -1,5 +1,5 @@
-import { _ as timeSortingDirections, a as AlphanumericSortingDirection, c as TimeSortingDirection, d as isSortingDirection, f as isSortingMode, g as timeSortingByDirection, h as sortingModes, i as $timeSortingDirection, l as alphanumericSortingDirections, m as sortingDirections, n as $sortingDirection, o as SortingDirection, p as isTimeSortingDirection, r as $sortingMode, s as SortingMode, t as $alphanumericSortingDirection, u as isAlphanumericSortingDirection } from "./direction-CVntIxOS.js";
-import { a as composeRefs, i as inView, n as MarginType, r as ViewChangeHandler, s as copyToClipboard, t as InViewOptions } from "./in-view-DdIrfU4u.js";
+import { _ as timeSortingDirections, a as AlphanumericSortingDirection, c as TimeSortingDirection, d as isSortingDirection, f as isSortingMode, g as timeSortingByDirection, h as sortingModes, i as $timeSortingDirection, l as alphanumericSortingDirections, m as sortingDirections, n as $sortingDirection, o as SortingDirection, p as isTimeSortingDirection, r as $sortingMode, s as SortingMode, t as $alphanumericSortingDirection, u as isAlphanumericSortingDirection } from "./direction-D9IZ1wW6.js";
+import { a as composeRefs, i as inView, n as MarginType, r as ViewChangeHandler, s as copyToClipboard, t as InViewOptions } from "./in-view-BUgyu-Tk.js";
 
 //#region src/utils/sorting/compare.d.ts
 /**

package/dist/utils.js

@@ -1,2 +1,2 @@
-import{t as e}from"./compose-refs-DZ3cPi47.js";import{t}from"./copy-to-clipboard-CNMRyck4.js";import{a as n,c as r,d as i,f as a,i as o,l as s,n as c,o as l,p as u,r as d,s as f,t as p,u as m}from"./direction-HqPHXGIs.js";import{t as h}from"./in-view-BLZVEGFC.js";function g(e,t){return Math.sign(t.getTime()-e.getTime())}function _(e,t){return Math.sign(e.getTime()-t.getTime())}export{p as $alphanumericSortingDirection,c as $sortingDirection,d as $sortingMode,o as $timeSortingDirection,n as alphanumericSortingDirections,g as compareDatesNewestToOldest,_ as compareDatesOldestToNewest,e as composeRefs,t as copyToClipboard,h as inView,l as isAlphanumericSortingDirection,f as isSortingDirection,r as isSortingMode,s as isTimeSortingDirection,m as sortingDirections,i as sortingModes,a as timeSortingByDirection,u as timeSortingDirections};
+import{t as e}from"./compose-refs-DZ3cPi47.js";import{t}from"./copy-to-clipboard-CNMRyck4.js";import{a as n,c as r,d as i,f as a,i as o,l as s,n as c,o as l,p as u,r as d,s as f,t as p,u as m}from"./direction-HqPHXGIs.js";import{t as h}from"./in-view-CeVqeGbv.js";function g(e,t){return Math.sign(t.getTime()-e.getTime())}function _(e,t){return Math.sign(e.getTime()-t.getTime())}export{p as $alphanumericSortingDirection,c as $sortingDirection,d as $sortingMode,o as $timeSortingDirection,n as alphanumericSortingDirections,g as compareDatesNewestToOldest,_ as compareDatesOldestToNewest,e as composeRefs,t as copyToClipboard,h as inView,l as isAlphanumericSortingDirection,f as isSortingDirection,r as isSortingMode,s as isTimeSortingDirection,m as sortingDirections,i as sortingModes,a as timeSortingByDirection,u as timeSortingDirections};
 //# sourceMappingURL=utils.js.map

package/dist/{validation-DF1z7YDr.d.ts → validation-CBSOmooP.d.ts}

@@ -105,4 +105,4 @@ declare const parseValidation: ({
 }: ParseValidationOptions) => ParsedValidation;
 //#endregion
 export { ValidationState as a, parseValidation as c, ValidationProp as i, resolveValidation as l, ParsedValidation as n, WithValidation as o, Validation as r, isAriaInvalid as s, AriaInvalid as t };
-//# sourceMappingURL=validation-DF1z7YDr.d.ts.map
+//# sourceMappingURL=validation-CBSOmooP.d.ts.map

package/dist/{variant-props-B4io4uA_.d.ts → variant-props-BZbM__kQ.d.ts}

@@ -1,4 +1,4 @@
-import { t as DeepNonNullable } from "./deep-non-nullable-CT7hWCFG.js";
+import { t as DeepNonNullable } from "./deep-non-nullable-Xu7ckQM6.js";
 import { VariantProps } from "class-variance-authority";
 
 //#region src/types/variant-props.d.ts
@@ -10,4 +10,4 @@ import { VariantProps } from "class-variance-authority";
 type VariantProps$1<Variants extends (props: Record<PropertyKey, unknown> | undefined) => string> = Partial<DeepNonNullable<VariantProps<Variants>>>;
 //#endregion
 export { VariantProps$1 as t };
-//# sourceMappingURL=variant-props-B4io4uA_.d.ts.map
+//# sourceMappingURL=variant-props-BZbM__kQ.d.ts.map

package/dist/{with-style-props-CW8buMhK.d.ts → with-style-props-xzZLnIrF.d.ts}

@@ -26,4 +26,4 @@ type WithStyleProps = {
 };
 //#endregion
 export { WithStyleProps as t };
-//# sourceMappingURL=with-style-props-CW8buMhK.d.ts.map
+//# sourceMappingURL=with-style-props-xzZLnIrF.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ngrok/mantle",
-  "version": "0.73.0",
+  "version": "0.73.2",
   "description": "mantle is ngrok's UI library and design system.",
   "homepage": "https://mantle.ngrok.com",
   "license": "MIT",

package/dist/select-BBB_e15a.js

@@ -1,2 +0,0 @@
-import{t as e}from"./cx-D1HYnpvA.js";import{t}from"./icon-bWc5yC3-.js";import{t as n}from"./compose-refs-DZ3cPi47.js";import{a as r,r as i}from"./validation-BYME8rWN.js";import{n as a}from"./separator-awchG4LI.js";import{CaretDownIcon as o}from"@phosphor-icons/react/CaretDown";import{createContext as s,forwardRef as c,useContext as l}from"react";import{jsx as u,jsxs as d}from"react/jsx-runtime";import{CheckIcon as f}from"@phosphor-icons/react/Check";import{CaretUpIcon as p}from"@phosphor-icons/react/CaretUp";import*as m from"@radix-ui/react-select";const h=s({}),g=c(({"aria-invalid":e,children:t,id:n,validation:r,onBlur:i,onValueChange:a,onChange:o,...s},c)=>u(m.Root,{...s,onValueChange:e=>{o?.(e),a?.(e)},children:u(h.Provider,{value:{"aria-invalid":e,id:n,validation:r,onBlur:i,ref:c},children:t})}));g.displayName=`Select`;const _=c(({className:t,...n},r)=>u(m.Group,{ref:r,"data-slot":`select-group`,className:e(`space-y-px`,t),...n}));_.displayName=`SelectGroup`;const v=m.Value;v.displayName=`SelectValue`;const y=c(({"aria-invalid":a,className:s,children:c,id:f,validation:p,...g},_)=>{let v=l(h),y=r(),{ariaInvalid:b,validation:x}=i({"aria-invalid":v[`aria-invalid`]??a,validation:v.validation??p??y}),S=v.id??f;return d(m.Trigger,{"aria-invalid":b,"data-slot":`select-trigger`,className:e(`h-9 text-sm`,`border-form bg-form text-strong font-sans placeholder:text-placeholder hover:bg-form-hover hover:text-strong flex w-full items-center justify-between gap-1.5 rounded-md border px-3 py-2 disabled:pointer-events-none disabled:opacity-50 [&>span]:line-clamp-1 [&>span]:text-left`,`hover:border-neutral-400`,`focus:outline-hidden focus:ring-4 aria-expanded:ring-4`,`focus:border-accent-600 focus:ring-focus-accent aria-expanded:border-accent-600 aria-expanded:ring-focus-accent`,`data-validation-success:border-success-600 data-validation-success:focus:border-success-600 data-validation-success:focus:ring-focus-success data-validation-success:aria-expanded:border-success-600 data-validation-success:aria-expanded:ring-focus-success`,`data-validation-warning:border-warning-600 data-validation-warning:focus:border-warning-600 data-validation-warning:focus:ring-focus-warning data-validation-warning:aria-expanded:border-warning-600 data-validation-warning:aria-expanded:ring-focus-warning`,`data-validation-error:border-danger-600 data-validation-error:focus:border-danger-600 data-validation-error:focus:ring-focus-danger data-validation-error:aria-expanded:border-danger-600 data-validation-error:aria-expanded:ring-focus-danger`,s),"data-validation":x||void 0,id:S,ref:n(_,v.ref),...g,children:[c,u(m.Icon,{asChild:!0,children:u(t,{svg:u(o,{weight:`bold`}),className:`size-4`})})]})});y.displayName=`SelectTrigger`;const b=c(({className:n,...r},i)=>u(m.ScrollUpButton,{ref:i,className:e(`flex cursor-default items-center justify-center py-1`,n),...r,children:u(t,{svg:u(p,{weight:`bold`}),className:`size-4`})}));b.displayName=`SelectScrollUpButton`;const x=c(({className:n,...r},i)=>u(m.ScrollDownButton,{ref:i,className:e(`flex cursor-default items-center justify-center py-1`,n),...r,children:u(t,{svg:u(o,{weight:`bold`}),className:`size-4`})}));x.displayName=`SelectScrollDownButton`;const S=c(({className:t,children:n,position:r=`popper`,width:i=`trigger`,...a},o)=>u(m.Portal,{children:d(m.Content,{ref:o,"data-slot":`select-content`,className:e(`border-popover data-side-bottom:slide-in-from-top-2 data-side-left:slide-in-from-right-2 data-side-right:slide-in-from-left-2 data-side-top:slide-in-from-bottom-2 data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95 relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border shadow-md`,`bg-popover font-sans`,r===`popper`&&`data-side-bottom:translate-y-2 data-side-left:-translate-x-2 data-side-right:translate-x-2 data-side-top:-translate-y-2 max-h-(--radix-select-content-available-height)`,i===`trigger`&&`w-(--radix-select-trigger-width)`,t),position:r,...a,children:[u(b,{}),u(m.Viewport,{className:e(`p-1 space-y-px`,r===`popper`&&`h-(--radix-select-trigger-height) w-full`),children:n}),u(x,{})]})}));S.displayName=`SelectContent`;const C=c(({className:t,...n},r)=>u(m.Label,{ref:r,"data-slot":`select-label`,className:e(`px-2 py-1.5 text-sm font-medium`,t),...n}));C.displayName=`SelectLabel`;const w=c(({className:n,children:r,icon:i,...a},o)=>d(m.Item,{ref:o,"data-slot":`select-item`,className:e(`relative flex gap-2 w-full cursor-pointer select-none items-center rounded-md py-1.5 pl-2 pr-8 text-strong text-sm outline-hidden`,`focus:bg-active-menu-item`,`data-disabled:pointer-events-none data-disabled:opacity-50`,`data-state-checked:bg-selected-menu-item`,`focus:data-state-checked:bg-active-selected-menu-item`,n),...a,children:[i&&u(t,{svg:i}),u(m.ItemText,{children:r}),u(m.ItemIndicator,{className:`absolute right-2 flex h-3.5 w-3.5 items-center justify-center`,children:u(t,{svg:u(f,{weight:`bold`}),className:`size-4 text-accent-600`})})]}));w.displayName=`SelectItem`;const T=c(({className:t,...n},r)=>u(a,{ref:r,"data-slot":`select-separator`,className:e(`-mx-1 my-1 h-px w-auto`,t),...n}));T.displayName=`SelectSeparator`;const E={Root:g,Content:S,Group:_,Item:w,Label:C,Separator:T,Trigger:y,Value:v};export{E as t};
-//# sourceMappingURL=select-BBB_e15a.js.map

package/dist/select-BBB_e15a.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"select-BBB_e15a.js","names":[],"sources":["../src/components/select/select.tsx"],"sourcesContent":["\"use client\";\n\nimport { CaretDownIcon } from \"@phosphor-icons/react/CaretDown\";\nimport { CaretUpIcon } from \"@phosphor-icons/react/CaretUp\";\nimport { CheckIcon } from \"@phosphor-icons/react/Check\";\nimport * as SelectPrimitive from \"@radix-ui/react-select\";\nimport type {\n\tComponentProps,\n\tComponentPropsWithoutRef,\n\tComponentRef,\n\tFocusEvent,\n\tPropsWithChildren,\n\tReactNode,\n\tRef,\n\tSelectHTMLAttributes,\n} from \"react\";\nimport { createContext, forwardRef, useContext } from \"react\";\nimport { composeRefs } from \"../../utils/compose-refs/compose-refs.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { parseValidation, useFieldValidation } from \"../field/validation.js\";\nimport type { WithValidation } from \"../field/validation.js\";\nimport { Icon } from \"../icon/icon.js\";\nimport { Separator } from \"../separator/separator.js\";\n\ntype WithAriaInvalid = Pick<SelectHTMLAttributes<HTMLSelectElement>, \"aria-invalid\">;\ntype SelectContextType = WithValidation &\n\tWithAriaInvalid & {\n\t\t/**\n\t\t * Ref for the trigger button.\n\t\t */\n\t\tref?: Ref<HTMLButtonElement>;\n\t\t/**\n\t\t * Event handler called when Select blurs.\n\t\t * @note this is a no-op for now until we can guarantee that it works identically to a native select onBlur\n\t\t */\n\t\tonBlur?: (event: FocusEvent<HTMLButtonElement>) => void;\n\t} & Pick<ComponentProps<\"button\">, \"id\">;\n\nconst SelectContext = createContext<SelectContextType>({});\n\ntype SelectProps = PropsWithChildren & {\n\tautoComplete?: string;\n\tdefaultOpen?: boolean;\n\tdefaultValue?: string;\n\tdir?: \"ltr\" | \"rtl\";\n\tdisabled?: boolean;\n\tform?: string;\n\tid?: string;\n\tname?: string;\n\t/**\n\t * Event handler called when Select blurs.\n\t * @note this is a no-op for now until we can guarantee that it works identically to a native select onBlur\n\t */\n\tonBlur?: (event: FocusEvent<HTMLButtonElement>) => void;\n\t/**\n\t * Event handler called when the value changes.\n\t * @deprecated Use `onValueChange` instead.\n\t */\n\tonChange?: (value: string) => void;\n\tonOpenChange?(open: boolean): void;\n\tonValueChange?(value: string): void;\n\topen?: boolean;\n\trequired?: boolean;\n\tvalue?: string;\n} & WithValidation &\n\tWithAriaInvalid;\n\n/**\n * Displays a list of options for the user to pick from—triggered by a button.\n *\n * Use Select for a small, finite list of options (~2-15) where the user picks exactly one\n * and search/filtering is unnecessary. For larger lists or async/searchable data, use\n * Combobox. For picking multiple options, use MultiSelect.\n *\n * Pass `validation` here when the entire select has an explicit state. That\n * root state is forwarded to `Select.Trigger` and takes precedence over the\n * ambient `validation` from `Field.Item` / `Field.Control`. Note: rendered\n * `Field.Errors` / `Field.ErrorList` set `aria-invalid=\"true\"` on the trigger\n * via `Field.Control`'s wiring, which still forces the trigger into the error\n * state — suppress the inferred error by passing `validation` on `Field.Item`\n * or `Field.Control` if a non-error `Select.Root` state needs to win in that\n * case.\n *\n * @see https://mantle.ngrok.com/components/select#selectroot\n *\n * @example\n * ```tsx\n * <Select.Root>\n *   <Select.Trigger>\n *     <Select.Value placeholder=\"Select a fruit\" />\n *   </Select.Trigger>\n *   <Select.Content>\n *     <Select.Group>\n *       <Select.Label>Fruits</Select.Label>\n *       <Select.Item value=\"apple\">Apple</Select.Item>\n *       <Select.Item value=\"banana\">Banana</Select.Item>\n *       <Select.Item value=\"cherry\">Cherry</Select.Item>\n *     </Select.Group>\n *     <Select.Separator />\n *     <Select.Group>\n *       <Select.Label>Veggies</Select.Label>\n *       <Select.Item value=\"carrot\">Carrot</Select.Item>\n *       <Select.Item value=\"cucumber\">Cucumber</Select.Item>\n *     </Select.Group>\n *   </Select.Content>\n * </Select.Root>\n * ```\n */\nconst Root = forwardRef<HTMLButtonElement, SelectProps>(\n\t(\n\t\t{\n\t\t\t\"aria-invalid\": _ariaInvalid,\n\t\t\tchildren,\n\t\t\tid,\n\t\t\tvalidation,\n\t\t\tonBlur,\n\t\t\tonValueChange,\n\t\t\tonChange,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\treturn (\n\t\t\t<SelectPrimitive.Root\n\t\t\t\t{...props}\n\t\t\t\tonValueChange={(value) => {\n\t\t\t\t\tonChange?.(value);\n\t\t\t\t\tonValueChange?.(value);\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<SelectContext.Provider\n\t\t\t\t\tvalue={{\n\t\t\t\t\t\t\"aria-invalid\": _ariaInvalid,\n\t\t\t\t\t\tid,\n\t\t\t\t\t\tvalidation,\n\t\t\t\t\t\tonBlur,\n\t\t\t\t\t\tref,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</SelectContext.Provider>\n\t\t\t</SelectPrimitive.Root>\n\t\t);\n\t},\n);\nRoot.displayName = \"Select\";\n\n/**\n * A group of related options within a select menu. Similar to an html `<optgroup>` element.\n * Use in conjunction with Select.Label to ensure good accessibility via automatic labelling.\n *\n * @see https://mantle.ngrok.com/components/select#selectgroup\n *\n * @example\n * ```tsx\n * <Select.Root>\n *   <Select.Trigger>\n *     <Select.Value placeholder=\"Select a fruit\" />\n *   </Select.Trigger>\n *   <Select.Content>\n *     <Select.Group>\n *       <Select.Label>Fruits</Select.Label>\n *       <Select.Item value=\"apple\">Apple</Select.Item>\n *       <Select.Item value=\"banana\">Banana</Select.Item>\n *       <Select.Item value=\"cherry\">Cherry</Select.Item>\n *     </Select.Group>\n *     <Select.Separator />\n *     <Select.Group>\n *       <Select.Label>Veggies</Select.Label>\n *       <Select.Item value=\"carrot\">Carrot</Select.Item>\n *       <Select.Item value=\"cucumber\">Cucumber</Select.Item>\n *     </Select.Group>\n *   </Select.Content>\n * </Select.Root>\n * ```\n */\nconst Group = forwardRef<\n\tComponentRef<typeof SelectPrimitive.Group>,\n\tComponentPropsWithoutRef<typeof SelectPrimitive.Group>\n>(({ className, ...props }, ref) => (\n\t<SelectPrimitive.Group\n\t\tref={ref}\n\t\tdata-slot=\"select-group\"\n\t\tclassName={cx(\"space-y-px\", className)}\n\t\t{...props}\n\t/>\n));\nGroup.displayName = \"SelectGroup\";\n\n/**\n * The part that reflects the selected value. By default the selected item's text will be rendered. if you require more control, you can instead control the select and pass your own children. It should not be styled to ensure correct positioning. An optional placeholder prop is also available for when the select has no value.\n *\n * @see https://mantle.ngrok.com/components/select#selectvalue\n *\n * @example\n * ```tsx\n * <Select.Root>\n *   <Select.Trigger>\n *     <Select.Value placeholder=\"Select a fruit\" />\n *   </Select.Trigger>\n *   <Select.Content>\n *     <Select.Group>\n *       <Select.Label>Fruits</Select.Label>\n *       <Select.Item value=\"apple\">Apple</Select.Item>\n *       <Select.Item value=\"banana\">Banana</Select.Item>\n *       <Select.Item value=\"cherry\">Cherry</Select.Item>\n *     </Select.Group>\n *     <Select.Separator />\n *     <Select.Group>\n *       <Select.Label>Veggies</Select.Label>\n *       <Select.Item value=\"carrot\">Carrot</Select.Item>\n *       <Select.Item value=\"cucumber\">Cucumber</Select.Item>\n *     </Select.Group>\n *   </Select.Content>\n * </Select.Root>\n * ```\n */\nconst Value = SelectPrimitive.Value;\nValue.displayName = \"SelectValue\";\n\ntype SelectTriggerProps = ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> &\n\tWithAriaInvalid &\n\tWithValidation;\n\n/**\n * The button that toggles the select. The Select.Content will position itself adjacent to the trigger.\n * When composing with `Field.Item`, wrap this trigger in `Field.Control` so\n * generated helper and error IDs are applied to the focusable button.\n *\n * @see https://mantle.ngrok.com/components/select#selecttrigger\n *\n * @example\n * ```tsx\n * <Select.Root>\n *   <Select.Trigger>\n *     <Select.Value placeholder=\"Select a fruit\" />\n *   </Select.Trigger>\n *   <Select.Content>\n *     <Select.Group>\n *       <Select.Label>Fruits</Select.Label>\n *       <Select.Item value=\"apple\">Apple</Select.Item>\n *       <Select.Item value=\"banana\">Banana</Select.Item>\n *       <Select.Item value=\"cherry\">Cherry</Select.Item>\n *     </Select.Group>\n *     <Select.Separator />\n *     <Select.Group>\n *       <Select.Label>Veggies</Select.Label>\n *       <Select.Item value=\"carrot\">Carrot</Select.Item>\n *       <Select.Item value=\"cucumber\">Cucumber</Select.Item>\n *     </Select.Group>\n *   </Select.Content>\n * </Select.Root>\n * ```\n */\nconst Trigger = forwardRef<ComponentRef<typeof SelectPrimitive.Trigger>, SelectTriggerProps>(\n\t(\n\t\t{\n\t\t\t\"aria-invalid\": ariaInValidProp,\n\t\t\tclassName,\n\t\t\tchildren,\n\t\t\tid: propId,\n\t\t\tvalidation: propValidation,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst ctx = useContext(SelectContext);\n\t\tconst fieldValidation = useFieldValidation();\n\t\tconst rawAriaInvalid = ctx[\"aria-invalid\"] ?? ariaInValidProp;\n\t\t// Explicit Select props win over ambient Field validation. This lets\n\t\t// Field.Control override Field.Item while preserving Select.Root as the\n\t\t// highest-precedence select-level state.\n\t\tconst rawValidation = ctx.validation ?? propValidation ?? fieldValidation;\n\t\tconst { ariaInvalid, validation } = parseValidation({\n\t\t\t\"aria-invalid\": rawAriaInvalid,\n\t\t\tvalidation: rawValidation,\n\t\t});\n\t\tconst id = ctx.id ?? propId;\n\n\t\treturn (\n\t\t\t<SelectPrimitive.Trigger\n\t\t\t\taria-invalid={ariaInvalid}\n\t\t\t\tdata-slot=\"select-trigger\"\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"h-9 text-sm\",\n\t\t\t\t\t\"border-form bg-form text-strong font-sans placeholder:text-placeholder hover:bg-form-hover hover:text-strong flex w-full items-center justify-between gap-1.5 rounded-md border px-3 py-2 disabled:pointer-events-none disabled:opacity-50 [&>span]:line-clamp-1 [&>span]:text-left\",\n\t\t\t\t\t\"hover:border-neutral-400\",\n\t\t\t\t\t\"focus:outline-hidden focus:ring-4 aria-expanded:ring-4\",\n\t\t\t\t\t\"focus:border-accent-600 focus:ring-focus-accent aria-expanded:border-accent-600 aria-expanded:ring-focus-accent\",\n\t\t\t\t\t\"data-validation-success:border-success-600 data-validation-success:focus:border-success-600 data-validation-success:focus:ring-focus-success data-validation-success:aria-expanded:border-success-600 data-validation-success:aria-expanded:ring-focus-success\",\n\t\t\t\t\t\"data-validation-warning:border-warning-600 data-validation-warning:focus:border-warning-600 data-validation-warning:focus:ring-focus-warning data-validation-warning:aria-expanded:border-warning-600 data-validation-warning:aria-expanded:ring-focus-warning\",\n\t\t\t\t\t\"data-validation-error:border-danger-600 data-validation-error:focus:border-danger-600 data-validation-error:focus:ring-focus-danger data-validation-error:aria-expanded:border-danger-600 data-validation-error:aria-expanded:ring-focus-danger\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tdata-validation={validation || undefined}\n\t\t\t\tid={id}\n\t\t\t\tref={composeRefs(ref, ctx.ref)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t\t<SelectPrimitive.Icon asChild>\n\t\t\t\t\t<Icon svg={<CaretDownIcon weight=\"bold\" />} className=\"size-4\" />\n\t\t\t\t</SelectPrimitive.Icon>\n\t\t\t</SelectPrimitive.Trigger>\n\t\t);\n\t},\n);\nTrigger.displayName = \"SelectTrigger\";\n\n/**\n * The button that scrolls the select content up.\n * @private\n */\nconst SelectScrollUpButton = forwardRef<\n\tComponentRef<typeof SelectPrimitive.ScrollUpButton>,\n\tComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>\n>(({ className, ...props }, ref) => (\n\t<SelectPrimitive.ScrollUpButton\n\t\tref={ref}\n\t\tclassName={cx(\"flex cursor-default items-center justify-center py-1\", className)}\n\t\t{...props}\n\t>\n\t\t<Icon svg={<CaretUpIcon weight=\"bold\" />} className=\"size-4\" />\n\t</SelectPrimitive.ScrollUpButton>\n));\nSelectScrollUpButton.displayName = \"SelectScrollUpButton\";\n\n/**\n * The button that scrolls the select content down.\n * @private\n */\nconst SelectScrollDownButton = forwardRef<\n\tComponentRef<typeof SelectPrimitive.ScrollDownButton>,\n\tComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>\n>(({ className, ...props }, ref) => (\n\t<SelectPrimitive.ScrollDownButton\n\t\tref={ref}\n\t\tclassName={cx(\"flex cursor-default items-center justify-center py-1\", className)}\n\t\t{...props}\n\t>\n\t\t<Icon svg={<CaretDownIcon weight=\"bold\" />} className=\"size-4\" />\n\t</SelectPrimitive.ScrollDownButton>\n));\nSelectScrollDownButton.displayName = \"SelectScrollDownButton\";\n\ntype SelectContentProps = ComponentPropsWithoutRef<typeof SelectPrimitive.Content> & {\n\t/**\n\t * The width of the content. Defaults to the width of the trigger.\n\t * If set to \"content\", the content will use the intrinsic content width; it will be the width of the longest/widest item.\n\t * @default \"trigger\"\n\t */\n\twidth?: \"trigger\" | \"content\";\n};\n\n/**\n * The component that pops out when the select is open as a portal adjacent to the trigger button.\n * It contains a scrolling viewport of the select items.\n *\n * @see https://mantle.ngrok.com/components/select#selectcontent\n *\n * @example\n * ```tsx\n * <Select.Root>\n *   <Select.Trigger>\n *     <Select.Value placeholder=\"Select a fruit\" />\n *   </Select.Trigger>\n *   <Select.Content>\n *     <Select.Group>\n *       <Select.Label>Fruits</Select.Label>\n *       <Select.Item value=\"apple\">Apple</Select.Item>\n *       <Select.Item value=\"banana\">Banana</Select.Item>\n *       <Select.Item value=\"cherry\">Cherry</Select.Item>\n *     </Select.Group>\n *     <Select.Separator />\n *     <Select.Group>\n *       <Select.Label>Veggies</Select.Label>\n *       <Select.Item value=\"carrot\">Carrot</Select.Item>\n *       <Select.Item value=\"cucumber\">Cucumber</Select.Item>\n *     </Select.Group>\n *   </Select.Content>\n * </Select.Root>\n * ```\n */\nconst Content = forwardRef<ComponentRef<typeof SelectPrimitive.Content>, SelectContentProps>(\n\t({ className, children, position = \"popper\", width = \"trigger\", ...props }, ref) => (\n\t\t<SelectPrimitive.Portal>\n\t\t\t<SelectPrimitive.Content\n\t\t\t\tref={ref}\n\t\t\t\tdata-slot=\"select-content\"\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"border-popover data-side-bottom:slide-in-from-top-2 data-side-left:slide-in-from-right-2 data-side-right:slide-in-from-left-2 data-side-top:slide-in-from-bottom-2 data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95 relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border shadow-md\",\n\t\t\t\t\t\"bg-popover font-sans\",\n\t\t\t\t\tposition === \"popper\" &&\n\t\t\t\t\t\t\"data-side-bottom:translate-y-2 data-side-left:-translate-x-2 data-side-right:translate-x-2 data-side-top:-translate-y-2 max-h-(--radix-select-content-available-height)\",\n\t\t\t\t\twidth === \"trigger\" && \"w-(--radix-select-trigger-width)\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tposition={position}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t<SelectScrollUpButton />\n\t\t\t\t<SelectPrimitive.Viewport\n\t\t\t\t\tclassName={cx(\n\t\t\t\t\t\t\"p-1 space-y-px\",\n\t\t\t\t\t\tposition === \"popper\" && \"h-(--radix-select-trigger-height) w-full\",\n\t\t\t\t\t)}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</SelectPrimitive.Viewport>\n\t\t\t\t<SelectScrollDownButton />\n\t\t\t</SelectPrimitive.Content>\n\t\t</SelectPrimitive.Portal>\n\t),\n);\nContent.displayName = \"SelectContent\";\n\n/**\n * Used to render the label of a group. It won't be focusable using arrow keys.\n *\n * @see https://mantle.ngrok.com/components/select#selectlabel\n *\n * @example\n * ```tsx\n * <Select.Root>\n *   <Select.Trigger>\n *     <Select.Value placeholder=\"Select a fruit\" />\n *   </Select.Trigger>\n *   <Select.Content>\n *     <Select.Group>\n *       <Select.Label>Fruits</Select.Label>\n *       <Select.Item value=\"apple\">Apple</Select.Item>\n *       <Select.Item value=\"banana\">Banana</Select.Item>\n *       <Select.Item value=\"cherry\">Cherry</Select.Item>\n *     </Select.Group>\n *     <Select.Separator />\n *     <Select.Group>\n *       <Select.Label>Veggies</Select.Label>\n *       <Select.Item value=\"carrot\">Carrot</Select.Item>\n *       <Select.Item value=\"cucumber\">Cucumber</Select.Item>\n *     </Select.Group>\n *   </Select.Content>\n * </Select.Root>\n * ```\n */\nconst Label = forwardRef<\n\tComponentRef<typeof SelectPrimitive.Label>,\n\tComponentPropsWithoutRef<typeof SelectPrimitive.Label>\n>(({ className, ...props }, ref) => (\n\t<SelectPrimitive.Label\n\t\tref={ref}\n\t\tdata-slot=\"select-label\"\n\t\tclassName={cx(\"px-2 py-1.5 text-sm font-medium\", className)}\n\t\t{...props}\n\t/>\n));\nLabel.displayName = \"SelectLabel\";\n\ntype SelectItemProps = ComponentPropsWithoutRef<typeof SelectPrimitive.Item> & {\n\ticon?: ReactNode;\n};\n\n/**\n * An option within a select menu. Similar to an html `<option>` element.\n * Has a required `value` prop that will be passed to the `onChange` handler of the `Select` component when this item is selected.\n * Displays the children as the option's text.\n *\n * @see https://mantle.ngrok.com/components/select#selectitem\n *\n * @example\n * ```tsx\n * <Select.Root>\n *   <Select.Trigger>\n *     <Select.Value placeholder=\"Select a fruit\" />\n *   </Select.Trigger>\n *   <Select.Content>\n *     <Select.Group>\n *       <Select.Label>Fruits</Select.Label>\n *       <Select.Item value=\"apple\">Apple</Select.Item>\n *       <Select.Item value=\"banana\">Banana</Select.Item>\n *       <Select.Item value=\"cherry\">Cherry</Select.Item>\n *     </Select.Group>\n *     <Select.Separator />\n *     <Select.Group>\n *       <Select.Label>Veggies</Select.Label>\n *       <Select.Item value=\"carrot\">Carrot</Select.Item>\n *       <Select.Item value=\"cucumber\">Cucumber</Select.Item>\n *     </Select.Group>\n *   </Select.Content>\n * </Select.Root>\n * ```\n */\nconst Item = forwardRef<ComponentRef<typeof SelectPrimitive.Item>, SelectItemProps>(\n\t({ className, children, icon, ...props }, ref) => (\n\t\t<SelectPrimitive.Item\n\t\t\tref={ref}\n\t\t\tdata-slot=\"select-item\"\n\t\t\tclassName={cx(\n\t\t\t\t\"relative flex gap-2 w-full cursor-pointer select-none items-center rounded-md py-1.5 pl-2 pr-8 text-strong text-sm outline-hidden\",\n\t\t\t\t\"focus:bg-active-menu-item\",\n\t\t\t\t\"data-disabled:pointer-events-none data-disabled:opacity-50\",\n\t\t\t\t\"data-state-checked:bg-selected-menu-item\",\n\t\t\t\t\"focus:data-state-checked:bg-active-selected-menu-item\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{icon && <Icon svg={icon} />}\n\t\t\t<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n\t\t\t<SelectPrimitive.ItemIndicator className=\"absolute right-2 flex h-3.5 w-3.5 items-center justify-center\">\n\t\t\t\t<Icon svg={<CheckIcon weight=\"bold\" />} className=\"size-4 text-accent-600\" />\n\t\t\t</SelectPrimitive.ItemIndicator>\n\t\t</SelectPrimitive.Item>\n\t),\n);\nItem.displayName = \"SelectItem\";\n\n/**\n * Used to visually separate items or groups of items in the select content.\n *\n * @see https://mantle.ngrok.com/components/select#selectseparator\n *\n * @example\n * ```tsx\n * <Select.Root>\n *   <Select.Trigger>\n *     <Select.Value placeholder=\"Select a fruit\" />\n *   </Select.Trigger>\n *   <Select.Content>\n *     <Select.Group>\n *       <Select.Label>Fruits</Select.Label>\n *       <Select.Item value=\"apple\">Apple</Select.Item>\n *       <Select.Item value=\"banana\">Banana</Select.Item>\n *       <Select.Item value=\"cherry\">Cherry</Select.Item>\n *     </Select.Group>\n *     <Select.Separator />\n *     <Select.Group>\n *       <Select.Label>Veggies</Select.Label>\n *       <Select.Item value=\"carrot\">Carrot</Select.Item>\n *       <Select.Item value=\"cucumber\">Cucumber</Select.Item>\n *     </Select.Group>\n *   </Select.Content>\n * </Select.Root>\n * ```\n */\nconst SelectSeparatorComponent = forwardRef<\n\tComponentRef<typeof Separator>,\n\tComponentPropsWithoutRef<typeof Separator>\n>(({ className, ...props }, ref) => (\n\t<Separator\n\t\tref={ref}\n\t\tdata-slot=\"select-separator\"\n\t\tclassName={cx(\"-mx-1 my-1 h-px w-auto\", className)}\n\t\t{...props}\n\t/>\n));\nSelectSeparatorComponent.displayName = \"SelectSeparator\";\n\n/**\n * Displays a list of options for the user to pick from—triggered by a button.\n *\n * Use Select for a small, finite list of options (~2-15) where the user picks exactly one\n * and search/filtering is unnecessary. For larger lists or async/searchable data, use\n * Combobox. For picking multiple options, use MultiSelect.\n *\n * @see https://mantle.ngrok.com/components/select\n *\n * @example\n * Composition:\n * ```\n * Select.Root\n * ├── Select.Trigger\n * │   └── Select.Value\n * └── Select.Content\n *     ├── Select.Group\n *     │   ├── Select.Label\n *     │   └── Select.Item\n *     └── Select.Separator\n * ```\n *\n * @example\n * ```tsx\n * <Select.Root>\n *   <Select.Trigger>\n *     <Select.Value placeholder=\"Select a fruit\" />\n *   </Select.Trigger>\n *   <Select.Content>\n *     <Select.Group>\n *       <Select.Label>Fruits</Select.Label>\n *       <Select.Item value=\"apple\">Apple</Select.Item>\n *       <Select.Item value=\"banana\">Banana</Select.Item>\n *       <Select.Item value=\"cherry\">Cherry</Select.Item>\n *     </Select.Group>\n *     <Select.Separator />\n *     <Select.Group>\n *       <Select.Label>Veggies</Select.Label>\n *       <Select.Item value=\"carrot\">Carrot</Select.Item>\n *       <Select.Item value=\"cucumber\">Cucumber</Select.Item>\n *     </Select.Group>\n *   </Select.Content>\n * </Select.Root>\n * ```\n */\nconst Select = {\n\t/**\n\t * Displays a list of options for the user to pick from—triggered by a button.\n\t *\n\t * Use Select for a small, finite list of options (~2-15) where the user picks exactly one\n\t * and search/filtering is unnecessary. For larger lists or async/searchable data, use\n\t * Combobox. For picking multiple options, use MultiSelect.\n\t *\n\t * @see https://mantle.ngrok.com/components/select#selectroot\n\t *\n\t * @example\n\t * ```tsx\n\t * <Select.Root>\n\t *   <Select.Trigger>\n\t *     <Select.Value placeholder=\"Select a fruit\" />\n\t *   </Select.Trigger>\n\t *   <Select.Content>\n\t *     <Select.Group>\n\t *       <Select.Label>Fruits</Select.Label>\n\t *       <Select.Item value=\"apple\">Apple</Select.Item>\n\t *       <Select.Item value=\"banana\">Banana</Select.Item>\n\t *       <Select.Item value=\"cherry\">Cherry</Select.Item>\n\t *     </Select.Group>\n\t *     <Select.Separator />\n\t *     <Select.Group>\n\t *       <Select.Label>Veggies</Select.Label>\n\t *       <Select.Item value=\"carrot\">Carrot</Select.Item>\n\t *       <Select.Item value=\"cucumber\">Cucumber</Select.Item>\n\t *     </Select.Group>\n\t *   </Select.Content>\n\t * </Select.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * The component that pops out when the select is open as a portal adjacent to the trigger button.\n\t * It contains a scrolling viewport of the select items.\n\t *\n\t * @see https://mantle.ngrok.com/components/select#selectcontent\n\t *\n\t * @example\n\t * ```tsx\n\t * <Select.Root>\n\t *   <Select.Trigger>\n\t *     <Select.Value placeholder=\"Select a fruit\" />\n\t *   </Select.Trigger>\n\t *   <Select.Content>\n\t *     <Select.Group>\n\t *       <Select.Label>Fruits</Select.Label>\n\t *       <Select.Item value=\"apple\">Apple</Select.Item>\n\t *       <Select.Item value=\"banana\">Banana</Select.Item>\n\t *       <Select.Item value=\"cherry\">Cherry</Select.Item>\n\t *     </Select.Group>\n\t *     <Select.Separator />\n\t *     <Select.Group>\n\t *       <Select.Label>Veggies</Select.Label>\n\t *       <Select.Item value=\"carrot\">Carrot</Select.Item>\n\t *       <Select.Item value=\"cucumber\">Cucumber</Select.Item>\n\t *     </Select.Group>\n\t *   </Select.Content>\n\t * </Select.Root>\n\t * ```\n\t */\n\tContent,\n\t/**\n\t * A group of related options within a select menu. Similar to an html `<optgroup>` element.\n\t * Use in conjunction with Select.Label to ensure good accessibility via automatic labelling.\n\t *\n\t * @see https://mantle.ngrok.com/components/select#selectgroup\n\t *\n\t * @example\n\t * ```tsx\n\t * <Select.Root>\n\t *   <Select.Trigger>\n\t *     <Select.Value placeholder=\"Select a fruit\" />\n\t *   </Select.Trigger>\n\t *   <Select.Content>\n\t *     <Select.Group>\n\t *       <Select.Label>Fruits</Select.Label>\n\t *       <Select.Item value=\"apple\">Apple</Select.Item>\n\t *       <Select.Item value=\"banana\">Banana</Select.Item>\n\t *       <Select.Item value=\"cherry\">Cherry</Select.Item>\n\t *     </Select.Group>\n\t *     <Select.Separator />\n\t *     <Select.Group>\n\t *       <Select.Label>Veggies</Select.Label>\n\t *       <Select.Item value=\"carrot\">Carrot</Select.Item>\n\t *       <Select.Item value=\"cucumber\">Cucumber</Select.Item>\n\t *     </Select.Group>\n\t *   </Select.Content>\n\t * </Select.Root>\n\t * ```\n\t */\n\tGroup,\n\t/**\n\t * An option within a select menu. Similar to an html `<option>` element.\n\t * Has a required `value` prop that will be passed to the `onChange` handler of the `Select` component when this item is selected.\n\t * Displays the children as the option's text.\n\t *\n\t * @see https://mantle.ngrok.com/components/select#selectitem\n\t *\n\t * @example\n\t * ```tsx\n\t * <Select.Root>\n\t *   <Select.Trigger>\n\t *     <Select.Value placeholder=\"Select a fruit\" />\n\t *   </Select.Trigger>\n\t *   <Select.Content>\n\t *     <Select.Group>\n\t *       <Select.Label>Fruits</Select.Label>\n\t *       <Select.Item value=\"apple\">Apple</Select.Item>\n\t *       <Select.Item value=\"banana\">Banana</Select.Item>\n\t *       <Select.Item value=\"cherry\">Cherry</Select.Item>\n\t *     </Select.Group>\n\t *     <Select.Separator />\n\t *     <Select.Group>\n\t *       <Select.Label>Veggies</Select.Label>\n\t *       <Select.Item value=\"carrot\">Carrot</Select.Item>\n\t *       <Select.Item value=\"cucumber\">Cucumber</Select.Item>\n\t *     </Select.Group>\n\t *   </Select.Content>\n\t * </Select.Root>\n\t * ```\n\t */\n\tItem,\n\t/**\n\t * Used to render the label of a group. It won't be focusable using arrow keys.\n\t *\n\t * @see https://mantle.ngrok.com/components/select#selectlabel\n\t *\n\t * @example\n\t * ```tsx\n\t * <Select.Root>\n\t *   <Select.Trigger>\n\t *     <Select.Value placeholder=\"Select a fruit\" />\n\t *   </Select.Trigger>\n\t *   <Select.Content>\n\t *     <Select.Group>\n\t *       <Select.Label>Fruits</Select.Label>\n\t *       <Select.Item value=\"apple\">Apple</Select.Item>\n\t *       <Select.Item value=\"banana\">Banana</Select.Item>\n\t *       <Select.Item value=\"cherry\">Cherry</Select.Item>\n\t *     </Select.Group>\n\t *     <Select.Separator />\n\t *     <Select.Group>\n\t *       <Select.Label>Veggies</Select.Label>\n\t *       <Select.Item value=\"carrot\">Carrot</Select.Item>\n\t *       <Select.Item value=\"cucumber\">Cucumber</Select.Item>\n\t *     </Select.Group>\n\t *   </Select.Content>\n\t * </Select.Root>\n\t * ```\n\t */\n\tLabel,\n\t/**\n\t * Used to visually separate items or groups of items in the select content.\n\t *\n\t * @see https://mantle.ngrok.com/components/select#selectseparator\n\t *\n\t * @example\n\t * ```tsx\n\t * <Select.Root>\n\t *   <Select.Trigger>\n\t *     <Select.Value placeholder=\"Select a fruit\" />\n\t *   </Select.Trigger>\n\t *   <Select.Content>\n\t *     <Select.Group>\n\t *       <Select.Label>Fruits</Select.Label>\n\t *       <Select.Item value=\"apple\">Apple</Select.Item>\n\t *       <Select.Item value=\"banana\">Banana</Select.Item>\n\t *       <Select.Item value=\"cherry\">Cherry</Select.Item>\n\t *     </Select.Group>\n\t *     <Select.Separator />\n\t *     <Select.Group>\n\t *       <Select.Label>Veggies</Select.Label>\n\t *       <Select.Item value=\"carrot\">Carrot</Select.Item>\n\t *       <Select.Item value=\"cucumber\">Cucumber</Select.Item>\n\t *     </Select.Group>\n\t *   </Select.Content>\n\t * </Select.Root>\n\t * ```\n\t */\n\tSeparator: SelectSeparatorComponent,\n\t/**\n\t * The button that toggles the select. The Select.Content will position itself adjacent to the trigger.\n\t *\n\t * @see https://mantle.ngrok.com/components/select#selecttrigger\n\t *\n\t * @example\n\t * ```tsx\n\t * <Select.Root>\n\t *   <Select.Trigger>\n\t *     <Select.Value placeholder=\"Select a fruit\" />\n\t *   </Select.Trigger>\n\t *   <Select.Content>\n\t *     <Select.Group>\n\t *       <Select.Label>Fruits</Select.Label>\n\t *       <Select.Item value=\"apple\">Apple</Select.Item>\n\t *       <Select.Item value=\"banana\">Banana</Select.Item>\n\t *       <Select.Item value=\"cherry\">Cherry</Select.Item>\n\t *     </Select.Group>\n\t *     <Select.Separator />\n\t *     <Select.Group>\n\t *       <Select.Label>Veggies</Select.Label>\n\t *       <Select.Item value=\"carrot\">Carrot</Select.Item>\n\t *       <Select.Item value=\"cucumber\">Cucumber</Select.Item>\n\t *     </Select.Group>\n\t *   </Select.Content>\n\t * </Select.Root>\n\t * ```\n\t */\n\tTrigger,\n\t/**\n\t * The part that reflects the selected value. By default the selected item's text will be rendered. if you require more control, you can instead control the select and pass your own children. It should not be styled to ensure correct positioning. An optional placeholder prop is also available for when the select has no value.\n\t *\n\t * @see https://mantle.ngrok.com/components/select#selectvalue\n\t *\n\t * @example\n\t * ```tsx\n\t * <Select.Root>\n\t *   <Select.Trigger>\n\t *     <Select.Value placeholder=\"Select a fruit\" />\n\t *   </Select.Trigger>\n\t *   <Select.Content>\n\t *     <Select.Group>\n\t *       <Select.Label>Fruits</Select.Label>\n\t *       <Select.Item value=\"apple\">Apple</Select.Item>\n\t *       <Select.Item value=\"banana\">Banana</Select.Item>\n\t *       <Select.Item value=\"cherry\">Cherry</Select.Item>\n\t *     </Select.Group>\n\t *     <Select.Separator />\n\t *     <Select.Group>\n\t *       <Select.Label>Veggies</Select.Label>\n\t *       <Select.Item value=\"carrot\">Carrot</Select.Item>\n\t *       <Select.Item value=\"cucumber\">Cucumber</Select.Item>\n\t *     </Select.Group>\n\t *   </Select.Content>\n\t * </Select.Root>\n\t * ```\n\t */\n\tValue,\n} as const;\n\nexport {\n\t//,\n\tSelect,\n};\n"],"mappings":"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"}