@namroodinc/liquid-editorial 0.1.6 → 0.1.7

package/dist/components/NumberField/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":["forwardRef","useState","useRef","useCallback","Icon","FieldAffix","require_Icon","require_components_FieldAffix_index","react","react_jsx_runtime","cx","parts","NumberField","ariaInvalid","rest","internal","setInternal","defaultValue","current","value","inputRef","commit","next","onValueChange","nudge","min","direction","step","max","outOfRange","className","size","hasSteppers","isDisabled","disabled","prefix","suffix","node","ref","isInvalid","raw","event","NumberRangeField","crossed","minLabel","maxLabel"],"sources":["../../../src/components/NumberField/index.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useCallback,\n  useRef,\n  useState,\n  type InputHTMLAttributes,\n  type ReactNode,\n} from \"react\";\nimport { Icon } from \"../Icon\";\nimport { FieldAffix } from \"../FieldAffix\";\nimport type { FieldSize } from \"../Field\";\nimport \"../Field/style.css\";\nimport \"./style.css\";\n\nfunction cx(...parts: (string | undefined | false)[]) {\n  return parts.filter(Boolean).join(\" \");\n}\n\nexport interface NumberFieldProps\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, \"size\" | \"type\" | \"value\" | \"defaultValue\" | \"onChange\" | \"prefix\"> {\n  size?: FieldSize;\n  value?: number | \"\";\n  defaultValue?: number | \"\";\n  onValueChange?: (value: number | \"\") => void;\n  min?: number;\n  max?: number;\n  step?: number | \"any\";\n  /** Rendered inside the field, before the number — \"£\", \"$\", a glyph. */\n  prefix?: ReactNode;\n  /** Rendered inside the field, after the number — \"kg\", \"%\", \"px\". */\n  suffix?: ReactNode;\n  isDisabled?: boolean;\n  isInvalid?: boolean;\n  /** Hide the − / + steppers and keep typing only. */\n  hasSteppers?: boolean;\n}\n\n\n/**\n * A quantity, bounded by `min` and `max`. Steppers move by `step` and stop at\n * the bounds; typing is never blocked, an out-of-range value reads invalid.\n */\nexport const NumberField = forwardRef<HTMLInputElement, NumberFieldProps>(function NumberField(\n  {\n    size = \"md\",\n    value,\n    defaultValue = \"\",\n    onValueChange,\n    min,\n    max,\n    step = 1,\n    prefix,\n    suffix,\n\n    isDisabled = false,\n    isInvalid = false,\n    hasSteppers = true,\n    className,\n    disabled,\n    \"aria-invalid\": ariaInvalid,\n    ...rest\n  },\n  ref,\n) {\n  const [internal, setInternal] = useState<number | \"\">(defaultValue);\n  const current = value ?? internal;\n  const inputRef = useRef<HTMLInputElement | null>(null);\n\n  const commit = useCallback(\n    (next: number | \"\") => {\n      if (value === undefined) setInternal(next);\n      onValueChange?.(next);\n    },\n    [onValueChange, value],\n  );\n\n  const nudge = (direction: 1 | -1) => {\n    const base = current === \"\" ? (min ?? 0) : current;\n    let next = base + direction * (step === \"any\" ? 1 : step);\n    if (min !== undefined) next = Math.max(min, next);\n    if (max !== undefined) next = Math.min(max, next);\n    next = Number(next.toFixed(10));\n    commit(next);\n    inputRef.current?.focus();\n  };\n\n  const outOfRange =\n    current !== \"\" &&\n    ((min !== undefined && current < min) || (max !== undefined && current > max));\n\n  return (\n    <div className={cx(\"ds-number\", className)} data-size={size}>\n      {hasSteppers && (\n        <button\n          type=\"button\"\n          className=\"ds-number__step\"\n          aria-label=\"Decrease\"\n          disabled={isDisabled || disabled || (min !== undefined && current !== \"\" && current <= min)}\n          onClick={() => nudge(-1)}\n        >\n          <Icon name=\"minus\" size={16} />\n        </button>\n      )}\n      <FieldAffix className=\"ds-number__body\" lead={prefix} trail={suffix}>\n        <input\n          ref={(node) => {\n            inputRef.current = node;\n            if (typeof ref === \"function\") ref(node);\n            else if (ref) ref.current = node;\n          }}\n          type=\"number\"\n          inputMode=\"decimal\"\n          value={current}\n          min={min}\n          max={max}\n          step={step}\n          disabled={isDisabled || disabled}\n          aria-invalid={isInvalid || outOfRange || ariaInvalid || undefined}\n          data-size={size}\n          className=\"ds-field-skin ds-number__input\"\n          onChange={(event) => {\n            const raw = event.target.value;\n            commit(raw === \"\" ? \"\" : Number(raw));\n          }}\n          {...rest}\n        />\n      </FieldAffix>\n\n      {hasSteppers && (\n        <button\n          type=\"button\"\n          className=\"ds-number__step\"\n          aria-label=\"Increase\"\n          disabled={isDisabled || disabled || (max !== undefined && current !== \"\" && current >= max)}\n          onClick={() => nudge(1)}\n        >\n          <Icon name=\"plus\" size={16} />\n        </button>\n      )}\n    </div>\n  );\n});\n\nexport interface NumberRangeValue {\n  min: number | \"\";\n  max: number | \"\";\n}\n\nexport interface NumberRangeFieldProps {\n  value?: NumberRangeValue;\n  defaultValue?: NumberRangeValue;\n  onValueChange?: (value: NumberRangeValue) => void;\n  size?: FieldSize;\n  /** Hard bounds both ends are clamped to. */\n  min?: number;\n  max?: number;\n  step?: number;\n  /** Rendered inside both fields, before the number. */\n  prefix?: ReactNode;\n  suffix?: ReactNode;\n  isDisabled?: boolean;\n  minLabel?: string;\n  maxLabel?: string;\n}\n\n/**\n * A lower and an upper bound, typed. The pair reads invalid when the minimum\n * passes the maximum — neither field is rewritten behind the user.\n */\nexport function NumberRangeField({\n  value,\n  defaultValue = { min: \"\", max: \"\" },\n  onValueChange,\n  size = \"md\",\n  min,\n  max,\n  step = 1,\n  prefix,\n  suffix,\n  isDisabled = false,\n  minLabel = \"Minimum\",\n  maxLabel = \"Maximum\",\n}: NumberRangeFieldProps) {\n  const [internal, setInternal] = useState<NumberRangeValue>(defaultValue);\n  const current = value ?? internal;\n\n  const commit = (next: NumberRangeValue) => {\n    if (value === undefined) setInternal(next);\n    onValueChange?.(next);\n  };\n\n  const crossed = current.min !== \"\" && current.max !== \"\" && current.min > current.max;\n\n  return (\n    <div className=\"ds-number-range\">\n      <NumberField\n        aria-label={minLabel}\n        size={size}\n        value={current.min}\n        min={min}\n        max={max}\n        step={step}\n        prefix={prefix}\n        suffix={suffix}\n        isDisabled={isDisabled}\n        isInvalid={crossed}\n        onValueChange={(next) => commit({ ...current, min: next })}\n      />\n      <span className=\"ds-number-range__dash\" aria-hidden=\"true\">\n        –\n      </span>\n      <NumberField\n        aria-label={maxLabel}\n        size={size}\n        value={current.max}\n        min={min}\n        max={max}\n        step={step}\n        prefix={prefix}\n        suffix={suffix}\n        isDisabled={isDisabled}\n        isInvalid={crossed}\n        onValueChange={(next) => commit({ ...current, max: next })}\n      />\n    </div>\n  );\n}\n"],"mappings":"A,iQAcA,SAASU,EAAG,GAAGC,EAAuC,CACpD,OAAOA,EAAM,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG,CACvC,CA0BA,IAAaC,GAAA,EAAcZ,EAAAA,WAAAA,CAA+C,SACxE,CACE,OAAO,KACP,QACA,eAAe,GACf,gBACA,MACA,MACA,OAAO,EACP,SACA,SAEA,aAAa,GACb,YAAY,GACZ,cAAc,GACd,YACA,WACA,eAAgBa,EAChB,GAAGC,GAEL,EACA,CACA,GAAM,CAACC,EAAUC,IAAA,EAAef,EAAAA,SAAAA,CAAsBgB,CAAY,EAC5DC,EAAUC,GAASJ,EACnBK,GAAA,EAAWlB,EAAAA,OAAAA,CAAgC,IAAI,EAE/CmB,GAAA,EAASlB,EAAAA,YAAAA,CACZ,GAAsB,CACjBgB,IAAU,IAAA,IAAWH,EAAYM,CAAI,EACzCC,IAAgBD,CAAI,CACtB,EACA,CAACC,EAAeJ,CAAK,CACvB,EAEMK,EAAS,GAAsB,CAEnC,IAAIF,GADSJ,IAAY,GAAMO,GAAO,EAAKP,GACzBQ,GAAaC,IAAS,MAAQ,EAAIA,GAChDF,IAAQ,IAAA,KAAW,EAAO,KAAK,IAAIA,EAAKH,CAAI,GAC5CM,IAAQ,IAAA,KAAW,EAAO,KAAK,IAAIA,EAAKN,CAAI,GAChD,EAAO,OAAOA,EAAK,QAAQ,EAAE,CAAC,EAC9BD,EAAOC,CAAI,EACXF,EAAS,SAAS,MAAM,CAC1B,EAEMS,EACJX,IAAY,KACVO,IAAQ,IAAA,IAAaP,EAAUO,GAASG,IAAQ,IAAA,IAAaV,EAAUU,GAE3E,OACE,EAAAnB,EAAA,KAAA,CAAC,MAAD,CAAK,UAAWC,EAAG,YAAaoB,CAAS,EAAG,YAAWC,EAAvD,SAAA,CACGC,IACC,EAAAvB,EAAA,IAAA,CAAC,SAAD,CACE,KAAK,SACL,UAAU,kBACV,aAAW,WACX,SAAUwB,GAAcC,GAAaT,IAAQ,IAAA,IAAaP,IAAY,IAAMA,GAAWO,EACvF,YAAeD,EAAM,EAAE,EAEvB,UAAA,EAAAf,EAAA,IAAA,CAACL,EAAAA,EAAD,CAAM,KAAK,QAAQ,KAAM,EAAK,CAAA,CACxB,CAAA,GAEV,EAAAK,EAAA,IAAA,CAACJ,EAAAA,WAAD,CAAY,UAAU,kBAAkB,KAAM8B,EAAQ,MAAOC,EAC3D,UAAA,EAAA3B,EAAA,IAAA,CAAC,QAAD,CACE,IAAM,GAAS,CACb,EAAS,QAAU4B,EACf,OAAOC,GAAQ,WAAYA,EAAID,CAAI,EAC9BC,IAAK,EAAI,QAAUD,EAC9B,EACA,KAAK,SACL,UAAU,UACV,MAAOnB,EACF,MACA,MACC,OACN,SAAUe,GAAcC,EACxB,eAAcK,GAAaV,GAAchB,GAAe,IAAA,GACxD,YAAWkB,EACX,UAAU,iCACV,SAAW,GAAU,CACnB,IAAMS,EAAMC,EAAM,OAAO,MACzBpB,EAAOmB,IAAQ,GAAK,GAAK,OAAOA,CAAG,CAAC,CACtC,EACA,GAAI1B,CACL,CAAA,CACS,CAAA,EAEXkB,IACC,EAAAvB,EAAA,IAAA,CAAC,SAAD,CACE,KAAK,SACL,UAAU,kBACV,aAAW,WACX,SAAUwB,GAAcC,GAAaN,IAAQ,IAAA,IAAaV,IAAY,IAAMA,GAAWU,EACvF,YAAeJ,EAAM,CAAC,EAEtB,UAAA,EAAAf,EAAA,IAAA,CAACL,EAAAA,EAAD,CAAM,KAAK,OAAO,KAAM,EAAK,CAAA,CACvB,CAAA,CAEP,C,EAET,CAAC,EA4BD,SAAgBsC,EAAiB,CAC/B,QACA,eAAe,CAAE,IAAK,GAAI,IAAK,EAAG,EAClC,gBACA,OAAO,KACP,MACA,MACA,OAAO,EACP,SACA,SACA,aAAa,GACb,WAAW,UACX,WAAW,WACa,CACxB,GAAM,CAAC3B,EAAUC,IAAA,EAAef,EAAAA,SAAAA,CAA2BgB,CAAY,EACjEC,EAAUC,GAASJ,EAEnBM,EAAU,GAA2B,CACrCF,IAAU,IAAA,IAAWH,EAAYM,CAAI,EACzCC,IAAgBD,CAAI,CACtB,EAEMqB,EAAUzB,EAAQ,MAAQ,IAAMA,EAAQ,MAAQ,IAAMA,EAAQ,IAAMA,EAAQ,IAElF,OACE,EAAAT,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,kBAAf,SAAA,EACE,EAAAA,EAAA,IAAA,CAACG,EAAD,CACE,aAAYgC,EACN,OACN,MAAO1B,EAAQ,IACV,MACA,MACC,OACE,SACA,SACI,aACZ,UAAWyB,EACX,cAAgB,GAAStB,EAAO,CAAE,GAAGH,EAAS,IAAKI,CAAK,CAAC,CAC1D,CAAA,GACD,EAAAb,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,wBAAwB,cAAY,OAAO,SAAA,GAErD,CAAA,GACN,EAAAA,EAAA,IAAA,CAACG,EAAD,CACE,aAAYiC,EACN,OACN,MAAO3B,EAAQ,IACV,MACA,MACC,OACE,SACA,SACI,aACZ,UAAWyB,EACX,cAAgB,GAAStB,EAAO,CAAE,GAAGH,EAAS,IAAKI,CAAK,CAAC,CAC1D,CAAA,CACE,C,EAET,C"}
+{"version":3,"file":"index.cjs","names":["forwardRef","useState","useRef","useCallback","Button","FieldAffix","require_components_Button_index","require_components_FieldAffix_index","react","react_jsx_runtime","cx","parts","NumberField","ariaInvalid","rest","internal","setInternal","defaultValue","current","value","inputRef","commit","next","onValueChange","nudge","min","direction","step","max","outOfRange","className","size","hasSteppers","isDisabled","disabled","prefix","suffix","node","ref","isInvalid","raw","event","NumberRangeField","crossed","minLabel","maxLabel"],"sources":["../../../src/components/NumberField/index.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useCallback,\n  useRef,\n  useState,\n  type InputHTMLAttributes,\n  type ReactNode,\n} from \"react\";\nimport { Button } from \"../Button\";\nimport { FieldAffix } from \"../FieldAffix\";\nimport type { FieldSize } from \"../Field\";\nimport \"../Field/style.css\";\nimport \"./style.css\";\n\nfunction cx(...parts: (string | undefined | false)[]) {\n  return parts.filter(Boolean).join(\" \");\n}\n\nexport interface NumberFieldProps\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, \"size\" | \"type\" | \"value\" | \"defaultValue\" | \"onChange\" | \"prefix\"> {\n  size?: FieldSize;\n  value?: number | \"\";\n  defaultValue?: number | \"\";\n  onValueChange?: (value: number | \"\") => void;\n  min?: number;\n  max?: number;\n  step?: number | \"any\";\n  /** Rendered inside the field, before the number — \"£\", \"$\", a glyph. */\n  prefix?: ReactNode;\n  /** Rendered inside the field, after the number — \"kg\", \"%\", \"px\". */\n  suffix?: ReactNode;\n  isDisabled?: boolean;\n  isInvalid?: boolean;\n  /** Hide the − / + steppers and keep typing only. */\n  hasSteppers?: boolean;\n}\n\n\n/**\n * A quantity, bounded by `min` and `max`. Steppers move by `step` and stop at\n * the bounds; typing is never blocked, an out-of-range value reads invalid.\n */\nexport const NumberField = forwardRef<HTMLInputElement, NumberFieldProps>(function NumberField(\n  {\n    size = \"md\",\n    value,\n    defaultValue = \"\",\n    onValueChange,\n    min,\n    max,\n    step = 1,\n    prefix,\n    suffix,\n\n    isDisabled = false,\n    isInvalid = false,\n    hasSteppers = true,\n    className,\n    disabled,\n    \"aria-invalid\": ariaInvalid,\n    ...rest\n  },\n  ref,\n) {\n  const [internal, setInternal] = useState<number | \"\">(defaultValue);\n  const current = value ?? internal;\n  const inputRef = useRef<HTMLInputElement | null>(null);\n\n  const commit = useCallback(\n    (next: number | \"\") => {\n      if (value === undefined) setInternal(next);\n      onValueChange?.(next);\n    },\n    [onValueChange, value],\n  );\n\n  const nudge = (direction: 1 | -1) => {\n    const base = current === \"\" ? (min ?? 0) : current;\n    let next = base + direction * (step === \"any\" ? 1 : step);\n    if (min !== undefined) next = Math.max(min, next);\n    if (max !== undefined) next = Math.min(max, next);\n    next = Number(next.toFixed(10));\n    commit(next);\n    inputRef.current?.focus();\n  };\n\n  const outOfRange =\n    current !== \"\" &&\n    ((min !== undefined && current < min) || (max !== undefined && current > max));\n\n  return (\n    <div className={cx(\"ds-number\", className)} data-size={size}>\n      {hasSteppers && (\n        <Button\n          size={size}\n          isIconOnly\n          iconStart=\"minus\"\n          className=\"ds-number__step\"\n          aria-label=\"Decrease\"\n          isDisabled={isDisabled || disabled || (min !== undefined && current !== \"\" && current <= min)}\n          onClick={() => nudge(-1)}\n        />\n      )}\n      <FieldAffix className=\"ds-number__body\" lead={prefix} trail={suffix}>\n        <input\n          ref={(node) => {\n            inputRef.current = node;\n            if (typeof ref === \"function\") ref(node);\n            else if (ref) ref.current = node;\n          }}\n          type=\"number\"\n          inputMode=\"decimal\"\n          value={current}\n          min={min}\n          max={max}\n          step={step}\n          disabled={isDisabled || disabled}\n          aria-invalid={isInvalid || outOfRange || ariaInvalid || undefined}\n          data-size={size}\n          className=\"ds-field-skin ds-number__input\"\n          onChange={(event) => {\n            const raw = event.target.value;\n            commit(raw === \"\" ? \"\" : Number(raw));\n          }}\n          {...rest}\n        />\n      </FieldAffix>\n\n      {hasSteppers && (\n        <Button\n          size={size}\n          isIconOnly\n          iconStart=\"plus\"\n          className=\"ds-number__step\"\n          aria-label=\"Increase\"\n          isDisabled={isDisabled || disabled || (max !== undefined && current !== \"\" && current >= max)}\n          onClick={() => nudge(1)}\n        />\n      )}\n    </div>\n  );\n});\n\nexport interface NumberRangeValue {\n  min: number | \"\";\n  max: number | \"\";\n}\n\nexport interface NumberRangeFieldProps {\n  value?: NumberRangeValue;\n  defaultValue?: NumberRangeValue;\n  onValueChange?: (value: NumberRangeValue) => void;\n  size?: FieldSize;\n  /** Hard bounds both ends are clamped to. */\n  min?: number;\n  max?: number;\n  step?: number;\n  /** Rendered inside both fields, before the number. */\n  prefix?: ReactNode;\n  suffix?: ReactNode;\n  isDisabled?: boolean;\n  minLabel?: string;\n  maxLabel?: string;\n}\n\n/**\n * A lower and an upper bound, typed. The pair reads invalid when the minimum\n * passes the maximum — neither field is rewritten behind the user.\n */\nexport function NumberRangeField({\n  value,\n  defaultValue = { min: \"\", max: \"\" },\n  onValueChange,\n  size = \"md\",\n  min,\n  max,\n  step = 1,\n  prefix,\n  suffix,\n  isDisabled = false,\n  minLabel = \"Minimum\",\n  maxLabel = \"Maximum\",\n}: NumberRangeFieldProps) {\n  const [internal, setInternal] = useState<NumberRangeValue>(defaultValue);\n  const current = value ?? internal;\n\n  const commit = (next: NumberRangeValue) => {\n    if (value === undefined) setInternal(next);\n    onValueChange?.(next);\n  };\n\n  const crossed = current.min !== \"\" && current.max !== \"\" && current.min > current.max;\n\n  return (\n    <div className=\"ds-number-range\">\n      <NumberField\n        aria-label={minLabel}\n        size={size}\n        value={current.min}\n        min={min}\n        max={max}\n        step={step}\n        prefix={prefix}\n        suffix={suffix}\n        isDisabled={isDisabled}\n        isInvalid={crossed}\n        onValueChange={(next) => commit({ ...current, min: next })}\n      />\n      <span className=\"ds-number-range__dash\" aria-hidden=\"true\">\n        –\n      </span>\n      <NumberField\n        aria-label={maxLabel}\n        size={size}\n        value={current.max}\n        min={min}\n        max={max}\n        step={step}\n        prefix={prefix}\n        suffix={suffix}\n        isDisabled={isDisabled}\n        isInvalid={crossed}\n        onValueChange={(next) => commit({ ...current, max: next })}\n      />\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/components/NumberField/index.js

@@ -1,4 +1,4 @@
-import { t as e } from "../../chunks/Icon-CGY1FNXT.js";
+import { Button as e } from "../Button/index.js";
 /* empty css                          */
 import { FieldAffix as t } from "../FieldAffix/index.js";
 import { forwardRef as n, useCallback as r, useRef as i, useState as a } from "react";
@@ -18,16 +18,14 @@ var l = n(function({ size: n = "md", value: l, defaultValue: u = "", onValueChan
 		className: c("ds-number", b),
 		"data-size": n,
 		children: [
-			y && /* @__PURE__ */ o("button", {
-				type: "button",
+			y && /* @__PURE__ */ o(e, {
+				size: n,
+				isIconOnly: !0,
+				iconStart: "minus",
 				className: "ds-number__step",
 				"aria-label": "Decrease",
-				disabled: _ || x || f !== void 0 && D !== "" && D <= f,
-				onClick: () => A(-1),
-				children: /* @__PURE__ */ o(e, {
-					name: "minus",
-					size: 16
-				})
+				isDisabled: _ || x || f !== void 0 && D !== "" && D <= f,
+				onClick: () => A(-1)
 			}),
 			/* @__PURE__ */ o(t, {
 				className: "ds-number__body",
@@ -54,16 +52,14 @@ var l = n(function({ size: n = "md", value: l, defaultValue: u = "", onValueChan
 					...C
 				})
 			}),
-			y && /* @__PURE__ */ o("button", {
-				type: "button",
+			y && /* @__PURE__ */ o(e, {
+				size: n,
+				isIconOnly: !0,
+				iconStart: "plus",
 				className: "ds-number__step",
 				"aria-label": "Increase",
-				disabled: _ || x || p !== void 0 && D !== "" && D >= p,
-				onClick: () => A(1),
-				children: /* @__PURE__ */ o(e, {
-					name: "plus",
-					size: 16
-				})
+				isDisabled: _ || x || p !== void 0 && D !== "" && D >= p,
+				onClick: () => A(1)
 			})
 		]
 	});

package/dist/components/NumberField/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["Icon","cx","parts","NumberField","forwardRef","ariaInvalid","rest","internal","setInternal","useState","defaultValue","current","value","inputRef","useRef","commit","useCallback","next","onValueChange","nudge","min","direction","step","max","outOfRange","className","size","hasSteppers","isDisabled","disabled","FieldAffix","prefix","suffix","node","ref","isInvalid","raw","event","NumberRangeField","crossed","minLabel","maxLabel"],"sources":["../../../src/components/NumberField/index.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useCallback,\n  useRef,\n  useState,\n  type InputHTMLAttributes,\n  type ReactNode,\n} from \"react\";\nimport { Icon } from \"../Icon\";\nimport { FieldAffix } from \"../FieldAffix\";\nimport type { FieldSize } from \"../Field\";\nimport \"../Field/style.css\";\nimport \"./style.css\";\n\nfunction cx(...parts: (string | undefined | false)[]) {\n  return parts.filter(Boolean).join(\" \");\n}\n\nexport interface NumberFieldProps\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, \"size\" | \"type\" | \"value\" | \"defaultValue\" | \"onChange\" | \"prefix\"> {\n  size?: FieldSize;\n  value?: number | \"\";\n  defaultValue?: number | \"\";\n  onValueChange?: (value: number | \"\") => void;\n  min?: number;\n  max?: number;\n  step?: number | \"any\";\n  /** Rendered inside the field, before the number — \"£\", \"$\", a glyph. */\n  prefix?: ReactNode;\n  /** Rendered inside the field, after the number — \"kg\", \"%\", \"px\". */\n  suffix?: ReactNode;\n  isDisabled?: boolean;\n  isInvalid?: boolean;\n  /** Hide the − / + steppers and keep typing only. */\n  hasSteppers?: boolean;\n}\n\n\n/**\n * A quantity, bounded by `min` and `max`. Steppers move by `step` and stop at\n * the bounds; typing is never blocked, an out-of-range value reads invalid.\n */\nexport const NumberField = forwardRef<HTMLInputElement, NumberFieldProps>(function NumberField(\n  {\n    size = \"md\",\n    value,\n    defaultValue = \"\",\n    onValueChange,\n    min,\n    max,\n    step = 1,\n    prefix,\n    suffix,\n\n    isDisabled = false,\n    isInvalid = false,\n    hasSteppers = true,\n    className,\n    disabled,\n    \"aria-invalid\": ariaInvalid,\n    ...rest\n  },\n  ref,\n) {\n  const [internal, setInternal] = useState<number | \"\">(defaultValue);\n  const current = value ?? internal;\n  const inputRef = useRef<HTMLInputElement | null>(null);\n\n  const commit = useCallback(\n    (next: number | \"\") => {\n      if (value === undefined) setInternal(next);\n      onValueChange?.(next);\n    },\n    [onValueChange, value],\n  );\n\n  const nudge = (direction: 1 | -1) => {\n    const base = current === \"\" ? (min ?? 0) : current;\n    let next = base + direction * (step === \"any\" ? 1 : step);\n    if (min !== undefined) next = Math.max(min, next);\n    if (max !== undefined) next = Math.min(max, next);\n    next = Number(next.toFixed(10));\n    commit(next);\n    inputRef.current?.focus();\n  };\n\n  const outOfRange =\n    current !== \"\" &&\n    ((min !== undefined && current < min) || (max !== undefined && current > max));\n\n  return (\n    <div className={cx(\"ds-number\", className)} data-size={size}>\n      {hasSteppers && (\n        <button\n          type=\"button\"\n          className=\"ds-number__step\"\n          aria-label=\"Decrease\"\n          disabled={isDisabled || disabled || (min !== undefined && current !== \"\" && current <= min)}\n          onClick={() => nudge(-1)}\n        >\n          <Icon name=\"minus\" size={16} />\n        </button>\n      )}\n      <FieldAffix className=\"ds-number__body\" lead={prefix} trail={suffix}>\n        <input\n          ref={(node) => {\n            inputRef.current = node;\n            if (typeof ref === \"function\") ref(node);\n            else if (ref) ref.current = node;\n          }}\n          type=\"number\"\n          inputMode=\"decimal\"\n          value={current}\n          min={min}\n          max={max}\n          step={step}\n          disabled={isDisabled || disabled}\n          aria-invalid={isInvalid || outOfRange || ariaInvalid || undefined}\n          data-size={size}\n          className=\"ds-field-skin ds-number__input\"\n          onChange={(event) => {\n            const raw = event.target.value;\n            commit(raw === \"\" ? \"\" : Number(raw));\n          }}\n          {...rest}\n        />\n      </FieldAffix>\n\n      {hasSteppers && (\n        <button\n          type=\"button\"\n          className=\"ds-number__step\"\n          aria-label=\"Increase\"\n          disabled={isDisabled || disabled || (max !== undefined && current !== \"\" && current >= max)}\n          onClick={() => nudge(1)}\n        >\n          <Icon name=\"plus\" size={16} />\n        </button>\n      )}\n    </div>\n  );\n});\n\nexport interface NumberRangeValue {\n  min: number | \"\";\n  max: number | \"\";\n}\n\nexport interface NumberRangeFieldProps {\n  value?: NumberRangeValue;\n  defaultValue?: NumberRangeValue;\n  onValueChange?: (value: NumberRangeValue) => void;\n  size?: FieldSize;\n  /** Hard bounds both ends are clamped to. */\n  min?: number;\n  max?: number;\n  step?: number;\n  /** Rendered inside both fields, before the number. */\n  prefix?: ReactNode;\n  suffix?: ReactNode;\n  isDisabled?: boolean;\n  minLabel?: string;\n  maxLabel?: string;\n}\n\n/**\n * A lower and an upper bound, typed. The pair reads invalid when the minimum\n * passes the maximum — neither field is rewritten behind the user.\n */\nexport function NumberRangeField({\n  value,\n  defaultValue = { min: \"\", max: \"\" },\n  onValueChange,\n  size = \"md\",\n  min,\n  max,\n  step = 1,\n  prefix,\n  suffix,\n  isDisabled = false,\n  minLabel = \"Minimum\",\n  maxLabel = \"Maximum\",\n}: NumberRangeFieldProps) {\n  const [internal, setInternal] = useState<NumberRangeValue>(defaultValue);\n  const current = value ?? internal;\n\n  const commit = (next: NumberRangeValue) => {\n    if (value === undefined) setInternal(next);\n    onValueChange?.(next);\n  };\n\n  const crossed = current.min !== \"\" && current.max !== \"\" && current.min > current.max;\n\n  return (\n    <div className=\"ds-number-range\">\n      <NumberField\n        aria-label={minLabel}\n        size={size}\n        value={current.min}\n        min={min}\n        max={max}\n        step={step}\n        prefix={prefix}\n        suffix={suffix}\n        isDisabled={isDisabled}\n        isInvalid={crossed}\n        onValueChange={(next) => commit({ ...current, min: next })}\n      />\n      <span className=\"ds-number-range__dash\" aria-hidden=\"true\">\n        –\n      </span>\n      <NumberField\n        aria-label={maxLabel}\n        size={size}\n        value={current.max}\n        min={min}\n        max={max}\n        step={step}\n        prefix={prefix}\n        suffix={suffix}\n        isDisabled={isDisabled}\n        isInvalid={crossed}\n        onValueChange={(next) => commit({ ...current, max: next })}\n      />\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["cx","parts","NumberField","forwardRef","ariaInvalid","rest","internal","setInternal","useState","defaultValue","current","value","inputRef","useRef","commit","useCallback","next","onValueChange","nudge","min","direction","step","max","outOfRange","className","size","hasSteppers","Button","isDisabled","disabled","FieldAffix","prefix","suffix","node","ref","isInvalid","raw","event","NumberRangeField","crossed","minLabel","maxLabel"],"sources":["../../../src/components/NumberField/index.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useCallback,\n  useRef,\n  useState,\n  type InputHTMLAttributes,\n  type ReactNode,\n} from \"react\";\nimport { Button } from \"../Button\";\nimport { FieldAffix } from \"../FieldAffix\";\nimport type { FieldSize } from \"../Field\";\nimport \"../Field/style.css\";\nimport \"./style.css\";\n\nfunction cx(...parts: (string | undefined | false)[]) {\n  return parts.filter(Boolean).join(\" \");\n}\n\nexport interface NumberFieldProps\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, \"size\" | \"type\" | \"value\" | \"defaultValue\" | \"onChange\" | \"prefix\"> {\n  size?: FieldSize;\n  value?: number | \"\";\n  defaultValue?: number | \"\";\n  onValueChange?: (value: number | \"\") => void;\n  min?: number;\n  max?: number;\n  step?: number | \"any\";\n  /** Rendered inside the field, before the number — \"£\", \"$\", a glyph. */\n  prefix?: ReactNode;\n  /** Rendered inside the field, after the number — \"kg\", \"%\", \"px\". */\n  suffix?: ReactNode;\n  isDisabled?: boolean;\n  isInvalid?: boolean;\n  /** Hide the − / + steppers and keep typing only. */\n  hasSteppers?: boolean;\n}\n\n\n/**\n * A quantity, bounded by `min` and `max`. Steppers move by `step` and stop at\n * the bounds; typing is never blocked, an out-of-range value reads invalid.\n */\nexport const NumberField = forwardRef<HTMLInputElement, NumberFieldProps>(function NumberField(\n  {\n    size = \"md\",\n    value,\n    defaultValue = \"\",\n    onValueChange,\n    min,\n    max,\n    step = 1,\n    prefix,\n    suffix,\n\n    isDisabled = false,\n    isInvalid = false,\n    hasSteppers = true,\n    className,\n    disabled,\n    \"aria-invalid\": ariaInvalid,\n    ...rest\n  },\n  ref,\n) {\n  const [internal, setInternal] = useState<number | \"\">(defaultValue);\n  const current = value ?? internal;\n  const inputRef = useRef<HTMLInputElement | null>(null);\n\n  const commit = useCallback(\n    (next: number | \"\") => {\n      if (value === undefined) setInternal(next);\n      onValueChange?.(next);\n    },\n    [onValueChange, value],\n  );\n\n  const nudge = (direction: 1 | -1) => {\n    const base = current === \"\" ? (min ?? 0) : current;\n    let next = base + direction * (step === \"any\" ? 1 : step);\n    if (min !== undefined) next = Math.max(min, next);\n    if (max !== undefined) next = Math.min(max, next);\n    next = Number(next.toFixed(10));\n    commit(next);\n    inputRef.current?.focus();\n  };\n\n  const outOfRange =\n    current !== \"\" &&\n    ((min !== undefined && current < min) || (max !== undefined && current > max));\n\n  return (\n    <div className={cx(\"ds-number\", className)} data-size={size}>\n      {hasSteppers && (\n        <Button\n          size={size}\n          isIconOnly\n          iconStart=\"minus\"\n          className=\"ds-number__step\"\n          aria-label=\"Decrease\"\n          isDisabled={isDisabled || disabled || (min !== undefined && current !== \"\" && current <= min)}\n          onClick={() => nudge(-1)}\n        />\n      )}\n      <FieldAffix className=\"ds-number__body\" lead={prefix} trail={suffix}>\n        <input\n          ref={(node) => {\n            inputRef.current = node;\n            if (typeof ref === \"function\") ref(node);\n            else if (ref) ref.current = node;\n          }}\n          type=\"number\"\n          inputMode=\"decimal\"\n          value={current}\n          min={min}\n          max={max}\n          step={step}\n          disabled={isDisabled || disabled}\n          aria-invalid={isInvalid || outOfRange || ariaInvalid || undefined}\n          data-size={size}\n          className=\"ds-field-skin ds-number__input\"\n          onChange={(event) => {\n            const raw = event.target.value;\n            commit(raw === \"\" ? \"\" : Number(raw));\n          }}\n          {...rest}\n        />\n      </FieldAffix>\n\n      {hasSteppers && (\n        <Button\n          size={size}\n          isIconOnly\n          iconStart=\"plus\"\n          className=\"ds-number__step\"\n          aria-label=\"Increase\"\n          isDisabled={isDisabled || disabled || (max !== undefined && current !== \"\" && current >= max)}\n          onClick={() => nudge(1)}\n        />\n      )}\n    </div>\n  );\n});\n\nexport interface NumberRangeValue {\n  min: number | \"\";\n  max: number | \"\";\n}\n\nexport interface NumberRangeFieldProps {\n  value?: NumberRangeValue;\n  defaultValue?: NumberRangeValue;\n  onValueChange?: (value: NumberRangeValue) => void;\n  size?: FieldSize;\n  /** Hard bounds both ends are clamped to. */\n  min?: number;\n  max?: number;\n  step?: number;\n  /** Rendered inside both fields, before the number. */\n  prefix?: ReactNode;\n  suffix?: ReactNode;\n  isDisabled?: boolean;\n  minLabel?: string;\n  maxLabel?: string;\n}\n\n/**\n * A lower and an upper bound, typed. The pair reads invalid when the minimum\n * passes the maximum — neither field is rewritten behind the user.\n */\nexport function NumberRangeField({\n  value,\n  defaultValue = { min: \"\", max: \"\" },\n  onValueChange,\n  size = \"md\",\n  min,\n  max,\n  step = 1,\n  prefix,\n  suffix,\n  isDisabled = false,\n  minLabel = \"Minimum\",\n  maxLabel = \"Maximum\",\n}: NumberRangeFieldProps) {\n  const [internal, setInternal] = useState<NumberRangeValue>(defaultValue);\n  const current = value ?? internal;\n\n  const commit = (next: NumberRangeValue) => {\n    if (value === undefined) setInternal(next);\n    onValueChange?.(next);\n  };\n\n  const crossed = current.min !== \"\" && current.max !== \"\" && current.min > current.max;\n\n  return (\n    <div className=\"ds-number-range\">\n      <NumberField\n        aria-label={minLabel}\n        size={size}\n        value={current.min}\n        min={min}\n        max={max}\n        step={step}\n        prefix={prefix}\n        suffix={suffix}\n        isDisabled={isDisabled}\n        isInvalid={crossed}\n        onValueChange={(next) => commit({ ...current, min: next })}\n      />\n      <span className=\"ds-number-range__dash\" aria-hidden=\"true\">\n        –\n      </span>\n      <NumberField\n        aria-label={maxLabel}\n        size={size}\n        value={current.max}\n        min={min}\n        max={max}\n        step={step}\n        prefix={prefix}\n        suffix={suffix}\n        isDisabled={isDisabled}\n        isInvalid={crossed}\n        onValueChange={(next) => commit({ ...current, max: next })}\n      />\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/components/NumberField/style.css

@@ -31,47 +31,7 @@
   }
 
 
-  .ds-number__step {
-    display: grid;
-    place-items: center;
-    flex: none;
-    inline-size: var(--field-height-md);
-    block-size: var(--field-height-md);
-    border: var(--control-border-width) solid var(--control-border-color);
-    border-radius: var(--field-radius);
-    background: var(--field-rest);
-    color: var(--color-text);
-    cursor: pointer;
-    transition: background-color var(--duration-fast) var(--ease-standard);
-  }
-
-  .ds-number[data-size="sm"] .ds-number__step {
-    inline-size: var(--field-height-sm);
-    block-size: var(--field-height-sm);
-  }
-
-  .ds-number[data-size="lg"] .ds-number__step {
-    inline-size: var(--field-height-lg);
-    block-size: var(--field-height-lg);
-  }
-
-  .ds-number__step:hover:not(:disabled) {
-    background: var(--field-hover);
-  }
-
-  .ds-number__step:active:not(:disabled) {
-    background: var(--field-pressed);
-  }
-
-  .ds-number__step:focus-visible {
-    outline: var(--control-border-width) solid var(--color-focus);
-    outline-offset: 2px;
-  }
-
-  .ds-number__step:disabled {
-    opacity: 45%;
-    cursor: not-allowed;
-  }
+  .ds-number__step { flex: none; }
 
   .ds-number-range {
     display: flex;

package/dist/components/Popover/index.cjs

@@ -1,2 +1,2 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require("react"),t=require("react/jsx-runtime"),n=require("react-dom");function r(...e){return e.filter(Boolean).join(` `)}var i=8;function a({anchorRef:a,anchorId:o,isOpen:s,align:c=`start`,placement:l=`bottom`,matchAnchorWidth:u=!1,offset:d=4,className:f,children:p,role:m,id:h,panelRef:g,..._}){let v=(0,e.useRef)(null),y=(0,e.useId)(),b=h??y,x=(0,e.useCallback)(()=>{let e=a.current??(o?document.getElementById(o):null),t=v.current;if(!e||!t)return;let n=e.getBoundingClientRect();u&&(t.style.width=`${n.width}px`);let r=t.getBoundingClientRect(),s=document.documentElement.clientWidth,f=document.documentElement.clientHeight,p=f-n.bottom-d-i,m=n.top-d-i,h=l===`top`?m>=r.height||m>p:p<r.height&&m>p,g=Math.max(120,h?m:p),_=h?Math.max(i,n.top-d-Math.min(r.height,g)):Math.min(n.bottom+d,f-i),y=c===`end`?n.right-r.width:n.left,b=Math.max(i,Math.min(y,s-r.width-i));t.style.left=`${Math.round(b)}px`,t.style.top=`${Math.round(_)}px`,t.style.setProperty(`--popover-max-block-size`,`${Math.round(g)}px`),t.style.visibility=`visible`},[c,o,a,u,d,l]);if((0,e.useEffect)(()=>{if(!s)return;let e=document.querySelector(`[data-popover-instance="${CSS.escape(y)}"]`);v.current=e,g&&(g.current=e),x();let t=()=>x();return window.addEventListener(`resize`,t),window.addEventListener(`scroll`,t,!0),()=>{window.removeEventListener(`resize`,t),window.removeEventListener(`scroll`,t,!0),v.current=null,g&&(g.current=null)}},[y,s,b,g,x]),!s||typeof document>`u`)return null;let S=(0,t.jsx)(`div`,{id:b,"data-popover-instance":y,role:m,className:r(`ds-popover`,f),..._,children:p});return(0,n.createPortal)(S,document.body)}exports.Popover=a;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require("react"),t=require("react-dom"),n=require("react/jsx-runtime");function r(...e){return e.filter(Boolean).join(` `)}var i=8;function a({anchorRef:a,anchorId:o,isOpen:s,align:c=`start`,placement:l=`bottom`,matchAnchorWidth:u=!1,offset:d=4,className:f,children:p,role:m,id:h,panelRef:g,..._}){let v=(0,e.useRef)(null),y=(0,e.useId)(),b=h??y,x=(0,e.useCallback)(()=>{let e=a.current??(o?document.getElementById(o):null),t=v.current;if(!e||!t)return;let n=e.getBoundingClientRect();u&&(t.style.width=`${n.width}px`);let r=t.getBoundingClientRect(),s=document.documentElement.clientWidth,f=document.documentElement.clientHeight,p=f-n.bottom-d-i,m=n.top-d-i,h=l===`top`?m>=r.height||m>p:p<r.height&&m>p,g=Math.max(120,h?m:p),_=h?Math.max(i,n.top-d-Math.min(r.height,g)):Math.min(n.bottom+d,f-i),y=c===`end`?n.right-r.width:n.left,b=Math.max(i,Math.min(y,s-r.width-i));t.style.left=`${Math.round(b)}px`,t.style.top=`${Math.round(_)}px`,t.style.setProperty(`--popover-max-block-size`,`${Math.round(g)}px`),t.style.visibility=`visible`},[c,o,a,u,d,l]);if((0,e.useEffect)(()=>{if(!s)return;let e=document.querySelector(`[data-popover-instance="${CSS.escape(y)}"]`);v.current=e,g&&(g.current=e),x();let t=()=>x();return window.addEventListener(`resize`,t),window.addEventListener(`scroll`,t,!0),()=>{window.removeEventListener(`resize`,t),window.removeEventListener(`scroll`,t,!0),v.current=null,g&&(g.current=null)}},[y,s,b,g,x]),!s||typeof document>`u`)return null;let S=(0,n.jsx)(`div`,{id:b,"data-popover-instance":y,role:m,className:r(`ds-popover`,f),..._,children:p});return(0,t.createPortal)(S,document.body)}exports.Popover=a;
 //# sourceMappingURL=index.cjs.map

package/dist/components/Popover/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":["useRef","useId","useCallback","createPortal","react","react_jsx_runtime","react_dom","cx","parts","VIEWPORT_MARGIN","Popover","rest","floatingRef","generatedId","panelId","id","place","reference","anchorRef","anchorId","floating","anchor","matchAnchorWidth","panel","viewportWidth","viewportHeight","roomBelow","offset","roomAbove","placeAbove","placement","availableHeight","top","preferredLeft","align","left","isOpen","panelRef","update","className"],"sources":["../../../src/components/Popover/index.tsx"],"sourcesContent":["import { useCallback, useEffect, useId, useRef, type ReactNode, type RefObject } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport \"./style.css\";\n\nfunction cx(...parts: (string | undefined | false)[]) {\n  return parts.filter(Boolean).join(\" \");\n}\n\nconst VIEWPORT_MARGIN = 8;\n\nexport type PopoverAlign = \"start\" | \"end\";\nexport type PopoverPlacement = \"top\" | \"bottom\";\n\nexport interface PopoverProps {\n  /** The control the panel hangs off. */\n  anchorRef: RefObject<HTMLElement | null>;\n  /** Optional DOM id fallback for composed controls whose refs are consumed by a field wrapper. */\n  anchorId?: string;\n  isOpen: boolean;\n  /** Which edge of the anchor the panel lines up with. Flips when it must. */\n  align?: PopoverAlign;\n  /** Preferred side of the anchor. Flips when the other side has more room. */\n  placement?: PopoverPlacement;\n  /** Match the anchor's width — for listboxes that read as one field. */\n  matchAnchorWidth?: boolean;\n  /** Gap between anchor and panel. */\n  offset?: number;\n  className?: string;\n  children: ReactNode;\n  role?: string;\n  id?: string;\n  \"aria-label\"?: string;\n  \"aria-labelledby\"?: string;\n  panelRef?: RefObject<HTMLDivElement | null>;\n}\n\n/**\n * A panel anchored to a control. It is positioned against the viewport, so it\n * flips above the anchor when the space below runs out and slides inward\n * rather than being cut off at any edge.\n */\nexport function Popover({\n  anchorRef,\n  anchorId,\n  isOpen,\n  align = \"start\",\n  placement = \"bottom\",\n  matchAnchorWidth = false,\n  offset = 4,\n  className,\n  children,\n  role,\n  id,\n  panelRef,\n  ...rest\n}: PopoverProps) {\n  const floatingRef = useRef<HTMLDivElement | null>(null);\n  const generatedId = useId();\n  const panelId = id ?? generatedId;\n\n  const place = useCallback(() => {\n    const reference = anchorRef.current ?? (anchorId ? document.getElementById(anchorId) : null);\n    const floating = floatingRef.current;\n    if (!reference || !floating) return;\n\n    const anchor = reference.getBoundingClientRect();\n    if (matchAnchorWidth) floating.style.width = `${anchor.width}px`;\n    const panel = floating.getBoundingClientRect();\n    const viewportWidth = document.documentElement.clientWidth;\n    const viewportHeight = document.documentElement.clientHeight;\n    const roomBelow = viewportHeight - anchor.bottom - offset - VIEWPORT_MARGIN;\n    const roomAbove = anchor.top - offset - VIEWPORT_MARGIN;\n    const placeAbove = placement === \"top\"\n      ? roomAbove >= panel.height || roomAbove > roomBelow\n      : roomBelow < panel.height && roomAbove > roomBelow;\n    const availableHeight = Math.max(120, placeAbove ? roomAbove : roomBelow);\n    const top = placeAbove\n      ? Math.max(VIEWPORT_MARGIN, anchor.top - offset - Math.min(panel.height, availableHeight))\n      : Math.min(anchor.bottom + offset, viewportHeight - VIEWPORT_MARGIN);\n    const preferredLeft = align === \"end\" ? anchor.right - panel.width : anchor.left;\n    const left = Math.max(\n      VIEWPORT_MARGIN,\n      Math.min(preferredLeft, viewportWidth - panel.width - VIEWPORT_MARGIN),\n    );\n\n    floating.style.left = `${Math.round(left)}px`;\n    floating.style.top = `${Math.round(top)}px`;\n    floating.style.setProperty(\"--popover-max-block-size\", `${Math.round(availableHeight)}px`);\n    floating.style.visibility = \"visible\";\n  }, [align, anchorId, anchorRef, matchAnchorWidth, offset, placement]);\n\n  useEffect(() => {\n    if (!isOpen) return;\n    const floating = document.querySelector<HTMLDivElement>(\n      `[data-popover-instance=\"${CSS.escape(generatedId)}\"]`,\n    );\n    floatingRef.current = floating;\n    if (panelRef) panelRef.current = floating;\n    place();\n    const update = () => place();\n    window.addEventListener(\"resize\", update);\n    window.addEventListener(\"scroll\", update, true);\n    return () => {\n      window.removeEventListener(\"resize\", update);\n      window.removeEventListener(\"scroll\", update, true);\n      floatingRef.current = null;\n      if (panelRef) panelRef.current = null;\n    };\n  }, [generatedId, isOpen, panelId, panelRef, place]);\n\n  if (!isOpen || typeof document === \"undefined\") return null;\n\n  const panel = (\n    <div\n      id={panelId}\n      data-popover-instance={generatedId}\n      role={role}\n      className={cx(\"ds-popover\", className)}\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n\n  return createPortal(panel, document.body);\n}\n"],"mappings":"A,gJAIA,SAASO,EAAG,GAAGC,EAAuC,CACpD,OAAOA,EAAM,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG,CACvC,CAEA,IAAMC,EAAkB,EAiCxB,SAAgBC,EAAQ,CACtB,YACA,WACA,SACA,QAAQ,QACR,YAAY,SACZ,mBAAmB,GACnB,SAAS,EACT,YACA,WACA,OACA,KACA,WACA,GAAGC,GACY,CACf,IAAMC,GAAA,EAAcZ,EAAAA,OAAAA,CAA8B,IAAI,EAChDa,GAAA,EAAcZ,EAAAA,MAAAA,CAAM,EACpBa,EAAUC,GAAMF,EAEhBG,GAAA,EAAQd,EAAAA,YAAAA,KAAkB,CAC9B,IAAMe,EAAYC,EAAU,UAAYC,EAAW,SAAS,eAAeA,CAAQ,EAAI,MACjFC,EAAWR,EAAY,QAC7B,GAAI,CAACK,GAAa,CAACG,EAAU,OAE7B,IAAMC,EAASJ,EAAU,sBAAsB,EAC3CK,IAAkB,EAAS,MAAM,MAAQ,GAAGD,EAAO,MAAM,KAC7D,IAAME,EAAQH,EAAS,sBAAsB,EACvCI,EAAgB,SAAS,gBAAgB,YACzCC,EAAiB,SAAS,gBAAgB,aAC1CC,EAAYD,EAAiBJ,EAAO,OAASM,EAASlB,EACtDmB,EAAYP,EAAO,IAAMM,EAASlB,EAClCoB,EAAaC,IAAc,MAC7BF,GAAaL,EAAM,QAAUK,EAAYF,EACzCA,EAAYH,EAAM,QAAUK,EAAYF,EACtCK,EAAkB,KAAK,IAAI,IAAKF,EAAaD,EAAYF,CAAS,EAClEM,EAAMH,EACR,KAAK,IAAIpB,EAAiBY,EAAO,IAAMM,EAAS,KAAK,IAAIJ,EAAM,OAAQQ,CAAe,CAAC,EACvF,KAAK,IAAIV,EAAO,OAASM,EAAQF,EAAiBhB,CAAe,EAC/DwB,EAAgBC,IAAU,MAAQb,EAAO,MAAQE,EAAM,MAAQF,EAAO,KACtEc,EAAO,KAAK,IAChB1B,EACA,KAAK,IAAIwB,EAAeT,EAAgBD,EAAM,MAAQd,CAAe,CACvE,EAEA,EAAS,MAAM,KAAO,GAAG,KAAK,MAAM0B,CAAI,EAAE,IAC1C,EAAS,MAAM,IAAM,GAAG,KAAK,MAAMH,CAAG,EAAE,IACxCZ,EAAS,MAAM,YAAY,2BAA4B,GAAG,KAAK,MAAMW,CAAe,EAAE,GAAG,EACzF,EAAS,MAAM,WAAa,SAC9B,EAAG,CAACG,EAAOf,EAAUD,EAAWI,EAAkBK,EAAQG,CAAS,CAAC,EAqBpE,IAnBA,EAAA1B,EAAA,UAAA,KAAgB,CACd,GAAI,CAACgC,EAAQ,OACb,IAAMhB,EAAW,SAAS,cACxB,2BAA2B,IAAI,OAAOP,CAAW,EAAE,GACrD,EACA,EAAY,QAAUO,EAClBiB,IAAU,EAAS,QAAUjB,GACjCJ,EAAM,EACN,IAAMsB,MAAetB,EAAM,EAG3B,OAFA,OAAO,iBAAiB,SAAUsB,CAAM,EACxC,OAAO,iBAAiB,SAAUA,EAAQ,EAAI,MACjC,CACX,OAAO,oBAAoB,SAAUA,CAAM,EAC3C,OAAO,oBAAoB,SAAUA,EAAQ,EAAI,EACjD,EAAY,QAAU,KAClBD,IAAU,EAAS,QAAU,KACnC,CACF,EAAG,CAACxB,EAAauB,EAAQtB,EAASuB,EAAUrB,CAAK,CAAC,EAE9C,CAACoB,GAAU,OAAO,SAAa,IAAa,OAAO,KAEvD,IAAMb,GACJ,EAAAlB,EAAA,IAAA,CAAC,MAAD,CACE,GAAIS,EACJ,wBAAuBD,EACjB,OACN,UAAWN,EAAG,aAAcgC,CAAS,EACrC,GAAI5B,EAEH,UACE,CAAA,EAGP,OAAA,EAAOR,EAAAA,aAAAA,CAAaoB,EAAO,SAAS,IAAI,CAC1C,C"}
+{"version":3,"file":"index.cjs","names":["useRef","useId","useCallback","createPortal","react","react_dom","react_jsx_runtime","cx","parts","VIEWPORT_MARGIN","Popover","rest","floatingRef","generatedId","panelId","id","place","reference","anchorRef","anchorId","floating","anchor","matchAnchorWidth","panel","viewportWidth","viewportHeight","roomBelow","offset","roomAbove","placeAbove","placement","availableHeight","top","preferredLeft","align","left","isOpen","panelRef","update","className"],"sources":["../../../src/components/Popover/index.tsx"],"sourcesContent":["import { useCallback, useEffect, useId, useRef, type ReactNode, type RefObject } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport \"./style.css\";\n\nfunction cx(...parts: (string | undefined | false)[]) {\n  return parts.filter(Boolean).join(\" \");\n}\n\nconst VIEWPORT_MARGIN = 8;\n\nexport type PopoverAlign = \"start\" | \"end\";\nexport type PopoverPlacement = \"top\" | \"bottom\";\n\nexport interface PopoverProps {\n  /** The control the panel hangs off. */\n  anchorRef: RefObject<HTMLElement | null>;\n  /** Optional DOM id fallback for composed controls whose refs are consumed by a field wrapper. */\n  anchorId?: string;\n  isOpen: boolean;\n  /** Which edge of the anchor the panel lines up with. Flips when it must. */\n  align?: PopoverAlign;\n  /** Preferred side of the anchor. Flips when the other side has more room. */\n  placement?: PopoverPlacement;\n  /** Match the anchor's width — for listboxes that read as one field. */\n  matchAnchorWidth?: boolean;\n  /** Gap between anchor and panel. */\n  offset?: number;\n  className?: string;\n  children: ReactNode;\n  role?: string;\n  id?: string;\n  \"aria-label\"?: string;\n  \"aria-labelledby\"?: string;\n  panelRef?: RefObject<HTMLDivElement | null>;\n}\n\n/**\n * A panel anchored to a control. It is positioned against the viewport, so it\n * flips above the anchor when the space below runs out and slides inward\n * rather than being cut off at any edge.\n */\nexport function Popover({\n  anchorRef,\n  anchorId,\n  isOpen,\n  align = \"start\",\n  placement = \"bottom\",\n  matchAnchorWidth = false,\n  offset = 4,\n  className,\n  children,\n  role,\n  id,\n  panelRef,\n  ...rest\n}: PopoverProps) {\n  const floatingRef = useRef<HTMLDivElement | null>(null);\n  const generatedId = useId();\n  const panelId = id ?? generatedId;\n\n  const place = useCallback(() => {\n    const reference = anchorRef.current ?? (anchorId ? document.getElementById(anchorId) : null);\n    const floating = floatingRef.current;\n    if (!reference || !floating) return;\n\n    const anchor = reference.getBoundingClientRect();\n    if (matchAnchorWidth) floating.style.width = `${anchor.width}px`;\n    const panel = floating.getBoundingClientRect();\n    const viewportWidth = document.documentElement.clientWidth;\n    const viewportHeight = document.documentElement.clientHeight;\n    const roomBelow = viewportHeight - anchor.bottom - offset - VIEWPORT_MARGIN;\n    const roomAbove = anchor.top - offset - VIEWPORT_MARGIN;\n    const placeAbove = placement === \"top\"\n      ? roomAbove >= panel.height || roomAbove > roomBelow\n      : roomBelow < panel.height && roomAbove > roomBelow;\n    const availableHeight = Math.max(120, placeAbove ? roomAbove : roomBelow);\n    const top = placeAbove\n      ? Math.max(VIEWPORT_MARGIN, anchor.top - offset - Math.min(panel.height, availableHeight))\n      : Math.min(anchor.bottom + offset, viewportHeight - VIEWPORT_MARGIN);\n    const preferredLeft = align === \"end\" ? anchor.right - panel.width : anchor.left;\n    const left = Math.max(\n      VIEWPORT_MARGIN,\n      Math.min(preferredLeft, viewportWidth - panel.width - VIEWPORT_MARGIN),\n    );\n\n    floating.style.left = `${Math.round(left)}px`;\n    floating.style.top = `${Math.round(top)}px`;\n    floating.style.setProperty(\"--popover-max-block-size\", `${Math.round(availableHeight)}px`);\n    floating.style.visibility = \"visible\";\n  }, [align, anchorId, anchorRef, matchAnchorWidth, offset, placement]);\n\n  useEffect(() => {\n    if (!isOpen) return;\n    const floating = document.querySelector<HTMLDivElement>(\n      `[data-popover-instance=\"${CSS.escape(generatedId)}\"]`,\n    );\n    floatingRef.current = floating;\n    if (panelRef) panelRef.current = floating;\n    place();\n    const update = () => place();\n    window.addEventListener(\"resize\", update);\n    window.addEventListener(\"scroll\", update, true);\n    return () => {\n      window.removeEventListener(\"resize\", update);\n      window.removeEventListener(\"scroll\", update, true);\n      floatingRef.current = null;\n      if (panelRef) panelRef.current = null;\n    };\n  }, [generatedId, isOpen, panelId, panelRef, place]);\n\n  if (!isOpen || typeof document === \"undefined\") return null;\n\n  const panel = (\n    <div\n      id={panelId}\n      data-popover-instance={generatedId}\n      role={role}\n      className={cx(\"ds-popover\", className)}\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n\n  return createPortal(panel, document.body);\n}\n"],"mappings":"A,gJAIA,SAASO,EAAG,GAAGC,EAAuC,CACpD,OAAOA,EAAM,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG,CACvC,CAEA,IAAMC,EAAkB,EAiCxB,SAAgBC,EAAQ,CACtB,YACA,WACA,SACA,QAAQ,QACR,YAAY,SACZ,mBAAmB,GACnB,SAAS,EACT,YACA,WACA,OACA,KACA,WACA,GAAGC,GACY,CACf,IAAMC,GAAA,EAAcZ,EAAAA,OAAAA,CAA8B,IAAI,EAChDa,GAAA,EAAcZ,EAAAA,MAAAA,CAAM,EACpBa,EAAUC,GAAMF,EAEhBG,GAAA,EAAQd,EAAAA,YAAAA,KAAkB,CAC9B,IAAMe,EAAYC,EAAU,UAAYC,EAAW,SAAS,eAAeA,CAAQ,EAAI,MACjFC,EAAWR,EAAY,QAC7B,GAAI,CAACK,GAAa,CAACG,EAAU,OAE7B,IAAMC,EAASJ,EAAU,sBAAsB,EAC3CK,IAAkB,EAAS,MAAM,MAAQ,GAAGD,EAAO,MAAM,KAC7D,IAAME,EAAQH,EAAS,sBAAsB,EACvCI,EAAgB,SAAS,gBAAgB,YACzCC,EAAiB,SAAS,gBAAgB,aAC1CC,EAAYD,EAAiBJ,EAAO,OAASM,EAASlB,EACtDmB,EAAYP,EAAO,IAAMM,EAASlB,EAClCoB,EAAaC,IAAc,MAC7BF,GAAaL,EAAM,QAAUK,EAAYF,EACzCA,EAAYH,EAAM,QAAUK,EAAYF,EACtCK,EAAkB,KAAK,IAAI,IAAKF,EAAaD,EAAYF,CAAS,EAClEM,EAAMH,EACR,KAAK,IAAIpB,EAAiBY,EAAO,IAAMM,EAAS,KAAK,IAAIJ,EAAM,OAAQQ,CAAe,CAAC,EACvF,KAAK,IAAIV,EAAO,OAASM,EAAQF,EAAiBhB,CAAe,EAC/DwB,EAAgBC,IAAU,MAAQb,EAAO,MAAQE,EAAM,MAAQF,EAAO,KACtEc,EAAO,KAAK,IAChB1B,EACA,KAAK,IAAIwB,EAAeT,EAAgBD,EAAM,MAAQd,CAAe,CACvE,EAEA,EAAS,MAAM,KAAO,GAAG,KAAK,MAAM0B,CAAI,EAAE,IAC1C,EAAS,MAAM,IAAM,GAAG,KAAK,MAAMH,CAAG,EAAE,IACxCZ,EAAS,MAAM,YAAY,2BAA4B,GAAG,KAAK,MAAMW,CAAe,EAAE,GAAG,EACzF,EAAS,MAAM,WAAa,SAC9B,EAAG,CAACG,EAAOf,EAAUD,EAAWI,EAAkBK,EAAQG,CAAS,CAAC,EAqBpE,IAnBA,EAAA1B,EAAA,UAAA,KAAgB,CACd,GAAI,CAACgC,EAAQ,OACb,IAAMhB,EAAW,SAAS,cACxB,2BAA2B,IAAI,OAAOP,CAAW,EAAE,GACrD,EACA,EAAY,QAAUO,EAClBiB,IAAU,EAAS,QAAUjB,GACjCJ,EAAM,EACN,IAAMsB,MAAetB,EAAM,EAG3B,OAFA,OAAO,iBAAiB,SAAUsB,CAAM,EACxC,OAAO,iBAAiB,SAAUA,EAAQ,EAAI,MACjC,CACX,OAAO,oBAAoB,SAAUA,CAAM,EAC3C,OAAO,oBAAoB,SAAUA,EAAQ,EAAI,EACjD,EAAY,QAAU,KAClBD,IAAU,EAAS,QAAU,KACnC,CACF,EAAG,CAACxB,EAAauB,EAAQtB,EAASuB,EAAUrB,CAAK,CAAC,EAE9C,CAACoB,GAAU,OAAO,SAAa,IAAa,OAAO,KAEvD,IAAMb,GACJ,EAAAjB,EAAA,IAAA,CAAC,MAAD,CACE,GAAIQ,EACJ,wBAAuBD,EACjB,OACN,UAAWN,EAAG,aAAcgC,CAAS,EACrC,GAAI5B,EAEH,UACE,CAAA,EAGP,OAAA,EAAOR,EAAAA,aAAAA,CAAaoB,EAAO,SAAS,IAAI,CAC1C,C"}

package/dist/components/Popover/index.js

@@ -1,6 +1,6 @@
 import { useCallback as e, useEffect as t, useId as n, useRef as r } from "react";
-import { jsx as i } from "react/jsx-runtime";
-import { createPortal as a } from "react-dom";
+import { createPortal as i } from "react-dom";
+import { jsx as a } from "react/jsx-runtime";
 //#region src/components/Popover/index.tsx
 function o(...e) {
 	return e.filter(Boolean).join(" ");
@@ -37,7 +37,7 @@ function c({ anchorRef: c, anchorId: l, isOpen: u, align: d = "start", placement
 		y,
 		w
 	]), !u || typeof document > "u") return null;
-	let T = /* @__PURE__ */ i("div", {
+	let T = /* @__PURE__ */ a("div", {
 		id: C,
 		"data-popover-instance": S,
 		role: _,
@@ -45,7 +45,7 @@ function c({ anchorRef: c, anchorId: l, isOpen: u, align: d = "start", placement
 		...b,
 		children: g
 	});
-	return a(T, document.body);
+	return i(T, document.body);
 }
 //#endregion
 export { c as Popover };

package/dist/components/SearchField/index.cjs

@@ -1,2 +1,2 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../chunks/Icon-CWsA1W83.cjs");;/* empty css                            */const t=require("../FieldAffix/index.cjs");let n=require("react"),r=require("react/jsx-runtime");var i=(0,n.forwardRef)(function({size:i=`md`,isDisabled:a=!1,onClear:o,className:s,placeholder:c=`Search`,value:l,disabled:u,onKeyDown:d,...f},p){let m=(0,n.useRef)(null),h=l!==void 0&&String(l).length>0;return(0,r.jsx)(t.FieldAffix,{className:s,lead:(0,r.jsx)(e.t,{name:`search`,size:16}),isTrailInteractive:!0,trail:h&&o?(0,r.jsx)(`button`,{type:`button`,className:`ds-search__clear`,"aria-label":`Clear search`,disabled:a||u,onClick:()=>{o(),m.current?.focus()},children:(0,r.jsx)(e.t,{name:`x`,size:16})}):void 0,children:(0,r.jsx)(`input`,{ref:e=>{m.current=e,typeof p==`function`?p(e):p&&(p.current=e)},type:`search`,value:l,placeholder:c,disabled:a||u,"data-size":i,className:`ds-field-skin ds-search__input`,onKeyDown:e=>{e.key===`Escape`&&o&&o(),d?.(e)},...f})})});exports.SearchField=i;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../chunks/Icon-CWsA1W83.cjs"),t=require("../Button/index.cjs");;/* empty css                            */const n=require("../FieldAffix/index.cjs");let r=require("react"),i=require("react/jsx-runtime");var a=(0,r.forwardRef)(function({size:a=`md`,isDisabled:o=!1,onClear:s,className:c,placeholder:l=`Search`,value:u,disabled:d,onKeyDown:f,...p},m){let h=(0,r.useRef)(null),g=u!==void 0&&String(u).length>0;return(0,i.jsx)(n.FieldAffix,{className:c,lead:(0,i.jsx)(e.t,{name:`search`,size:16}),isTrailInteractive:!0,trail:g&&s?(0,i.jsx)(t.Button,{variant:`simple`,size:`xs`,isIconOnly:!0,iconStart:`x`,"aria-label":`Clear search`,isDisabled:o||d,onClick:()=>{s(),h.current?.focus()}}):void 0,children:(0,i.jsx)(`input`,{ref:e=>{h.current=e,typeof m==`function`?m(e):m&&(m.current=e)},type:`search`,value:u,placeholder:l,disabled:o||d,"data-size":a,className:`ds-field-skin ds-search__input`,onKeyDown:e=>{e.key===`Escape`&&s&&s(),f?.(e)},...p})})});exports.SearchField=a;
 //# sourceMappingURL=index.cjs.map

package/dist/components/SearchField/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":["forwardRef","useRef","FieldAffix","Icon","require_Icon","require_components_FieldAffix_index","react","react_jsx_runtime","SearchField","rest","inner","hasValue","value","onClear","isDisabled","disabled","node","ref","size","event","onKeyDown"],"sources":["../../../src/components/SearchField/index.tsx"],"sourcesContent":["import { forwardRef, useRef, type InputHTMLAttributes } from \"react\";\nimport { Icon } from \"../Icon\";\nimport { FieldAffix } from \"../FieldAffix\";\nimport type { FieldSize } from \"../Field\";\nimport \"../Field/style.css\";\nimport \"./style.css\";\n\nexport interface SearchFieldProps\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, \"size\" | \"type\"> {\n  size?: FieldSize;\n  isDisabled?: boolean;\n  /** Fired by the clear button and by Escape. */\n  onClear?: () => void;\n}\n\n/** A filter over a collection. Carries the glyph, and clears without a Save. */\nexport const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(function SearchField(\n  {\n    size = \"md\",\n    isDisabled = false,\n    onClear,\n    className,\n    placeholder = \"Search\",\n    value,\n    disabled,\n    onKeyDown,\n    ...rest\n  },\n  ref,\n) {\n  const inner = useRef<HTMLInputElement | null>(null);\n  const hasValue = value !== undefined ? String(value).length > 0 : false;\n\n  return (\n    <FieldAffix\n      className={className}\n      lead={<Icon name=\"search\" size={16} />}\n      isTrailInteractive\n      trail={\n        hasValue && onClear ? (\n          <button\n            type=\"button\"\n            className=\"ds-search__clear\"\n            aria-label=\"Clear search\"\n            disabled={isDisabled || disabled}\n            onClick={() => {\n              onClear();\n              inner.current?.focus();\n            }}\n          >\n            <Icon name=\"x\" size={16} />\n          </button>\n        ) : undefined\n      }\n    >\n      <input\n        ref={(node) => {\n          inner.current = node;\n          if (typeof ref === \"function\") ref(node);\n          else if (ref) ref.current = node;\n        }}\n        type=\"search\"\n        value={value}\n        placeholder={placeholder}\n        disabled={isDisabled || disabled}\n        data-size={size}\n        className=\"ds-field-skin ds-search__input\"\n        onKeyDown={(event) => {\n          if (event.key === \"Escape\" && onClear) onClear();\n          onKeyDown?.(event);\n        }}\n        {...rest}\n      />\n    </FieldAffix>\n  );\n});\n"],"mappings":"A,iQAgBA,IAAaQ,GAAA,EAAcR,EAAAA,WAAAA,CAA+C,SACxE,CACE,OAAO,KACP,aAAa,GACb,UACA,YACA,cAAc,SACd,QACA,WACA,YACA,GAAGS,GAEL,EACA,CACA,IAAMC,GAAA,EAAQT,EAAAA,OAAAA,CAAgC,IAAI,EAC5CU,EAAWC,IAAU,IAAA,IAAY,OAAOA,CAAK,CAAC,CAAC,OAAS,EAE9D,OACE,EAAAL,EAAA,IAAA,CAACL,EAAAA,WAAD,CACa,YACX,MAAM,EAAAK,EAAA,IAAA,CAACJ,EAAAA,EAAD,CAAM,KAAK,SAAS,KAAM,EAAK,CAAA,EACrC,mBAAA,GACA,MACEQ,GAAYE,GACV,EAAAN,EAAA,IAAA,CAAC,SAAD,CACE,KAAK,SACL,UAAU,mBACV,aAAW,eACX,SAAUO,GAAcC,EACxB,YAAe,CACbF,EAAQ,EACRH,EAAM,SAAS,MAAM,CACvB,EAEA,UAAA,EAAAH,EAAA,IAAA,CAACJ,EAAAA,EAAD,CAAM,KAAK,IAAI,KAAM,EAAK,CAAA,CACpB,CAAA,EACN,IAAA,GAGN,UAAA,EAAAI,EAAA,IAAA,CAAC,QAAD,CACE,IAAM,GAAS,CACb,EAAM,QAAUS,EACZ,OAAOC,GAAQ,WAAYA,EAAID,CAAI,EAC9BC,IAAK,EAAI,QAAUD,EAC9B,EACA,KAAK,SACE,QACM,cACb,SAAUF,GAAcC,EACxB,YAAWG,EACX,UAAU,iCACV,UAAY,GAAU,CAChBC,EAAM,MAAQ,UAAYN,GAASA,EAAQ,EAC/CO,IAAYD,CAAK,CACnB,EACA,GAAIV,CACL,CAAA,CACS,CAAA,CAEhB,CAAC,E"}
+{"version":3,"file":"index.cjs","names":["forwardRef","useRef","FieldAffix","Icon","Button","require_Icon","require_components_Button_index","require_components_FieldAffix_index","react","react_jsx_runtime","SearchField","rest","inner","hasValue","value","onClear","isDisabled","disabled","node","ref","size","event","onKeyDown"],"sources":["../../../src/components/SearchField/index.tsx"],"sourcesContent":["import { forwardRef, useRef, type InputHTMLAttributes } from \"react\";\nimport { Icon } from \"../Icon\";\nimport { Button } from \"../Button\";\nimport { FieldAffix } from \"../FieldAffix\";\nimport type { FieldSize } from \"../Field\";\nimport \"../Field/style.css\";\nimport \"./style.css\";\n\nexport interface SearchFieldProps\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, \"size\" | \"type\"> {\n  size?: FieldSize;\n  isDisabled?: boolean;\n  /** Fired by the clear button and by Escape. */\n  onClear?: () => void;\n}\n\n/** A filter over a collection. Carries the glyph, and clears without a Save. */\nexport const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(function SearchField(\n  {\n    size = \"md\",\n    isDisabled = false,\n    onClear,\n    className,\n    placeholder = \"Search\",\n    value,\n    disabled,\n    onKeyDown,\n    ...rest\n  },\n  ref,\n) {\n  const inner = useRef<HTMLInputElement | null>(null);\n  const hasValue = value !== undefined ? String(value).length > 0 : false;\n\n  return (\n    <FieldAffix\n      className={className}\n      lead={<Icon name=\"search\" size={16} />}\n      isTrailInteractive\n      trail={\n        hasValue && onClear ? (\n          <Button\n            variant=\"simple\"\n            size=\"xs\"\n            isIconOnly\n            iconStart=\"x\"\n            aria-label=\"Clear search\"\n            isDisabled={isDisabled || disabled}\n            onClick={() => {\n              onClear();\n              inner.current?.focus();\n            }}\n          />\n        ) : undefined\n      }\n    >\n      <input\n        ref={(node) => {\n          inner.current = node;\n          if (typeof ref === \"function\") ref(node);\n          else if (ref) ref.current = node;\n        }}\n        type=\"search\"\n        value={value}\n        placeholder={placeholder}\n        disabled={isDisabled || disabled}\n        data-size={size}\n        className=\"ds-field-skin ds-search__input\"\n        onKeyDown={(event) => {\n          if (event.key === \"Escape\" && onClear) onClear();\n          onKeyDown?.(event);\n        }}\n        {...rest}\n      />\n    </FieldAffix>\n  );\n});\n"],"mappings":"A,kSAiBA,IAAaU,GAAA,EAAcV,EAAAA,WAAAA,CAA+C,SACxE,CACE,OAAO,KACP,aAAa,GACb,UACA,YACA,cAAc,SACd,QACA,WACA,YACA,GAAGW,GAEL,EACA,CACA,IAAMC,GAAA,EAAQX,EAAAA,OAAAA,CAAgC,IAAI,EAC5CY,EAAWC,IAAU,IAAA,IAAY,OAAOA,CAAK,CAAC,CAAC,OAAS,EAE9D,OACE,EAAAL,EAAA,IAAA,CAACP,EAAAA,WAAD,CACa,YACX,MAAM,EAAAO,EAAA,IAAA,CAACN,EAAAA,EAAD,CAAM,KAAK,SAAS,KAAM,EAAK,CAAA,EACrC,mBAAA,GACA,MACEU,GAAYE,GACV,EAAAN,EAAA,IAAA,CAACL,EAAAA,OAAD,CACE,QAAQ,SACR,KAAK,KACL,WAAA,GACA,UAAU,IACV,aAAW,eACX,WAAYY,GAAcC,EAC1B,YAAe,CACbF,EAAQ,EACRH,EAAM,SAAS,MAAM,CACvB,CACD,CAAA,EACC,IAAA,GAGN,UAAA,EAAAH,EAAA,IAAA,CAAC,QAAD,CACE,IAAM,GAAS,CACb,EAAM,QAAUS,EACZ,OAAOC,GAAQ,WAAYA,EAAID,CAAI,EAC9BC,IAAK,EAAI,QAAUD,EAC9B,EACA,KAAK,SACE,QACM,cACb,SAAUF,GAAcC,EACxB,YAAWG,EACX,UAAU,iCACV,UAAY,GAAU,CAChBC,EAAM,MAAQ,UAAYN,GAASA,EAAQ,EAC/CO,IAAYD,CAAK,CACnB,EACA,GAAIV,CACL,CAAA,CACS,CAAA,CAEhB,CAAC,E"}

package/dist/components/SearchField/index.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/SearchField/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAsB,KAAK,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAGrE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAC1C,OAAO,oBAAoB,CAAC;AAC5B,OAAO,aAAa,CAAC;AAErB,MAAM,WAAW,gBACf,SAAQ,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACpE,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,+CAA+C;IAC/C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,gFAAgF;AAChF,eAAO,MAAM,WAAW,+GA2DtB,CAAC"}
+{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/SearchField/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAsB,KAAK,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAIrE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAC1C,OAAO,oBAAoB,CAAC;AAC5B,OAAO,aAAa,CAAC;AAErB,MAAM,WAAW,gBACf,SAAQ,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACpE,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,+CAA+C;IAC/C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,gFAAgF;AAChF,eAAO,MAAM,WAAW,+GA2DtB,CAAC"}

package/dist/components/SearchField/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SearchField/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAsB,KAAK,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAGrE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAC1C,OAAO,oBAAoB,CAAC;AAC5B,OAAO,aAAa,CAAC;AAErB,MAAM,WAAW,gBACf,SAAQ,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACpE,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,+CAA+C;IAC/C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,gFAAgF;AAChF,eAAO,MAAM,WAAW,+GA2DtB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SearchField/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAsB,KAAK,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAIrE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAC1C,OAAO,oBAAoB,CAAC;AAC5B,OAAO,aAAa,CAAC;AAErB,MAAM,WAAW,gBACf,SAAQ,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACpE,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,+CAA+C;IAC/C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,gFAAgF;AAChF,eAAO,MAAM,WAAW,+GA2DtB,CAAC"}

package/dist/components/SearchField/index.js

@@ -1,49 +1,48 @@
 import { t as e } from "../../chunks/Icon-CGY1FNXT.js";
+import { Button as t } from "../Button/index.js";
 /* empty css                          */
-import { FieldAffix as t } from "../FieldAffix/index.js";
-import { forwardRef as n, useRef as r } from "react";
-import { jsx as i } from "react/jsx-runtime";
+import { FieldAffix as n } from "../FieldAffix/index.js";
+import { forwardRef as r, useRef as i } from "react";
+import { jsx as a } from "react/jsx-runtime";
 //#region src/components/SearchField/index.tsx
-var a = n(function({ size: n = "md", isDisabled: a = !1, onClear: o, className: s, placeholder: c = "Search", value: l, disabled: u, onKeyDown: d, ...f }, p) {
-	let m = r(null), h = l !== void 0 && String(l).length > 0;
-	return /* @__PURE__ */ i(t, {
-		className: s,
-		lead: /* @__PURE__ */ i(e, {
+var o = r(function({ size: r = "md", isDisabled: o = !1, onClear: s, className: c, placeholder: l = "Search", value: u, disabled: d, onKeyDown: f, ...p }, m) {
+	let h = i(null), g = u !== void 0 && String(u).length > 0;
+	return /* @__PURE__ */ a(n, {
+		className: c,
+		lead: /* @__PURE__ */ a(e, {
 			name: "search",
 			size: 16
 		}),
 		isTrailInteractive: !0,
-		trail: h && o ? /* @__PURE__ */ i("button", {
-			type: "button",
-			className: "ds-search__clear",
+		trail: g && s ? /* @__PURE__ */ a(t, {
+			variant: "simple",
+			size: "xs",
+			isIconOnly: !0,
+			iconStart: "x",
 			"aria-label": "Clear search",
-			disabled: a || u,
+			isDisabled: o || d,
 			onClick: () => {
-				o(), m.current?.focus();
-			},
-			children: /* @__PURE__ */ i(e, {
-				name: "x",
-				size: 16
-			})
+				s(), h.current?.focus();
+			}
 		}) : void 0,
-		children: /* @__PURE__ */ i("input", {
+		children: /* @__PURE__ */ a("input", {
 			ref: (e) => {
-				m.current = e, typeof p == "function" ? p(e) : p && (p.current = e);
+				h.current = e, typeof m == "function" ? m(e) : m && (m.current = e);
 			},
 			type: "search",
-			value: l,
-			placeholder: c,
-			disabled: a || u,
-			"data-size": n,
+			value: u,
+			placeholder: l,
+			disabled: o || d,
+			"data-size": r,
 			className: "ds-field-skin ds-search__input",
 			onKeyDown: (e) => {
-				e.key === "Escape" && o && o(), d?.(e);
+				e.key === "Escape" && s && s(), f?.(e);
 			},
-			...f
+			...p
 		})
 	});
 });
 //#endregion
-export { a as SearchField };
+export { o as SearchField };
 
 //# sourceMappingURL=index.js.map

package/dist/components/SearchField/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["Icon","SearchField","forwardRef","rest","inner","useRef","hasValue","value","FieldAffix","onClear","isDisabled","disabled","node","ref","size","event","onKeyDown"],"sources":["../../../src/components/SearchField/index.tsx"],"sourcesContent":["import { forwardRef, useRef, type InputHTMLAttributes } from \"react\";\nimport { Icon } from \"../Icon\";\nimport { FieldAffix } from \"../FieldAffix\";\nimport type { FieldSize } from \"../Field\";\nimport \"../Field/style.css\";\nimport \"./style.css\";\n\nexport interface SearchFieldProps\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, \"size\" | \"type\"> {\n  size?: FieldSize;\n  isDisabled?: boolean;\n  /** Fired by the clear button and by Escape. */\n  onClear?: () => void;\n}\n\n/** A filter over a collection. Carries the glyph, and clears without a Save. */\nexport const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(function SearchField(\n  {\n    size = \"md\",\n    isDisabled = false,\n    onClear,\n    className,\n    placeholder = \"Search\",\n    value,\n    disabled,\n    onKeyDown,\n    ...rest\n  },\n  ref,\n) {\n  const inner = useRef<HTMLInputElement | null>(null);\n  const hasValue = value !== undefined ? String(value).length > 0 : false;\n\n  return (\n    <FieldAffix\n      className={className}\n      lead={<Icon name=\"search\" size={16} />}\n      isTrailInteractive\n      trail={\n        hasValue && onClear ? (\n          <button\n            type=\"button\"\n            className=\"ds-search__clear\"\n            aria-label=\"Clear search\"\n            disabled={isDisabled || disabled}\n            onClick={() => {\n              onClear();\n              inner.current?.focus();\n            }}\n          >\n            <Icon name=\"x\" size={16} />\n          </button>\n        ) : undefined\n      }\n    >\n      <input\n        ref={(node) => {\n          inner.current = node;\n          if (typeof ref === \"function\") ref(node);\n          else if (ref) ref.current = node;\n        }}\n        type=\"search\"\n        value={value}\n        placeholder={placeholder}\n        disabled={isDisabled || disabled}\n        data-size={size}\n        className=\"ds-field-skin ds-search__input\"\n        onKeyDown={(event) => {\n          if (event.key === \"Escape\" && onClear) onClear();\n          onKeyDown?.(event);\n        }}\n        {...rest}\n      />\n    </FieldAffix>\n  );\n});\n"],"mappings":";;;;;;AAgBA,IAAaC,IAAcC,EAA+C,SACxE,EACE,UAAO,MACP,gBAAa,IACb,YACA,cACA,iBAAc,UACd,UACA,aACA,cACA,GAAGC,KAEL,GACA;CACA,IAAMC,IAAQC,EAAgC,IAAI,GAC5CC,IAAWC,MAAU,KAAA,KAAY,OAAOA,CAAK,CAAC,CAAC,SAAS;CAE9D,OACE,kBAACC,GAAD;EACa;EACX,MAAM,kBAACR,GAAD;GAAM,MAAK;GAAS,MAAM;EAAK,CAAA;EACrC,oBAAA;EACA,OACEM,KAAYG,IACV,kBAAC,UAAD;GACE,MAAK;GACL,WAAU;GACV,cAAW;GACX,UAAUC,KAAcC;GACxB,eAAe;IAEb,AADAF,EAAQ,GACRL,EAAM,SAAS,MAAM;GACvB;GAEA,UAAA,kBAACJ,GAAD;IAAM,MAAK;IAAI,MAAM;GAAK,CAAA;EACpB,CAAA,IACN,KAAA;EAGN,UAAA,kBAAC,SAAD;GACE,MAAM,MAAS;IAEb,AADA,EAAM,UAAUY,GACZ,OAAOC,KAAQ,aAAYA,EAAID,CAAI,IAC9BC,MAAK,EAAI,UAAUD;GAC9B;GACA,MAAK;GACE;GACM;GACb,UAAUF,KAAcC;GACxB,aAAWG;GACX,WAAU;GACV,YAAY,MAAU;IAEpB,AADIC,EAAM,QAAQ,YAAYN,KAASA,EAAQ,GAC/CO,IAAYD,CAAK;GACnB;GACA,GAAIZ;EACL,CAAA;CACS,CAAA;AAEhB,CAAC"}
+{"version":3,"file":"index.js","names":["Icon","SearchField","forwardRef","rest","inner","useRef","hasValue","value","FieldAffix","onClear","Button","isDisabled","disabled","node","ref","size","event","onKeyDown"],"sources":["../../../src/components/SearchField/index.tsx"],"sourcesContent":["import { forwardRef, useRef, type InputHTMLAttributes } from \"react\";\nimport { Icon } from \"../Icon\";\nimport { Button } from \"../Button\";\nimport { FieldAffix } from \"../FieldAffix\";\nimport type { FieldSize } from \"../Field\";\nimport \"../Field/style.css\";\nimport \"./style.css\";\n\nexport interface SearchFieldProps\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, \"size\" | \"type\"> {\n  size?: FieldSize;\n  isDisabled?: boolean;\n  /** Fired by the clear button and by Escape. */\n  onClear?: () => void;\n}\n\n/** A filter over a collection. Carries the glyph, and clears without a Save. */\nexport const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(function SearchField(\n  {\n    size = \"md\",\n    isDisabled = false,\n    onClear,\n    className,\n    placeholder = \"Search\",\n    value,\n    disabled,\n    onKeyDown,\n    ...rest\n  },\n  ref,\n) {\n  const inner = useRef<HTMLInputElement | null>(null);\n  const hasValue = value !== undefined ? String(value).length > 0 : false;\n\n  return (\n    <FieldAffix\n      className={className}\n      lead={<Icon name=\"search\" size={16} />}\n      isTrailInteractive\n      trail={\n        hasValue && onClear ? (\n          <Button\n            variant=\"simple\"\n            size=\"xs\"\n            isIconOnly\n            iconStart=\"x\"\n            aria-label=\"Clear search\"\n            isDisabled={isDisabled || disabled}\n            onClick={() => {\n              onClear();\n              inner.current?.focus();\n            }}\n          />\n        ) : undefined\n      }\n    >\n      <input\n        ref={(node) => {\n          inner.current = node;\n          if (typeof ref === \"function\") ref(node);\n          else if (ref) ref.current = node;\n        }}\n        type=\"search\"\n        value={value}\n        placeholder={placeholder}\n        disabled={isDisabled || disabled}\n        data-size={size}\n        className=\"ds-field-skin ds-search__input\"\n        onKeyDown={(event) => {\n          if (event.key === \"Escape\" && onClear) onClear();\n          onKeyDown?.(event);\n        }}\n        {...rest}\n      />\n    </FieldAffix>\n  );\n});\n"],"mappings":";;;;;;;AAiBA,IAAaC,IAAcC,EAA+C,SACxE,EACE,UAAO,MACP,gBAAa,IACb,YACA,cACA,iBAAc,UACd,UACA,aACA,cACA,GAAGC,KAEL,GACA;CACA,IAAMC,IAAQC,EAAgC,IAAI,GAC5CC,IAAWC,MAAU,KAAA,KAAY,OAAOA,CAAK,CAAC,CAAC,SAAS;CAE9D,OACE,kBAACC,GAAD;EACa;EACX,MAAM,kBAACR,GAAD;GAAM,MAAK;GAAS,MAAM;EAAK,CAAA;EACrC,oBAAA;EACA,OACEM,KAAYG,IACV,kBAACC,GAAD;GACE,SAAQ;GACR,MAAK;GACL,YAAA;GACA,WAAU;GACV,cAAW;GACX,YAAYC,KAAcC;GAC1B,eAAe;IAEb,AADAH,EAAQ,GACRL,EAAM,SAAS,MAAM;GACvB;EACD,CAAA,IACC,KAAA;EAGN,UAAA,kBAAC,SAAD;GACE,MAAM,MAAS;IAEb,AADA,EAAM,UAAUS,GACZ,OAAOC,KAAQ,aAAYA,EAAID,CAAI,IAC9BC,MAAK,EAAI,UAAUD;GAC9B;GACA,MAAK;GACE;GACM;GACb,UAAUF,KAAcC;GACxB,aAAWG;GACX,WAAU;GACV,YAAY,MAAU;IAEpB,AADIC,EAAM,QAAQ,YAAYP,KAASA,EAAQ,GAC/CQ,IAAYD,CAAK;GACnB;GACA,GAAIb;EACL,CAAA;CACS,CAAA;AAEhB,CAAC"}

package/dist/components/SearchField/style.css

@@ -3,25 +3,4 @@
     appearance: none;
   }
 
-  .ds-search__clear {
-    display: grid;
-    place-items: center;
-    inline-size: var(--space-6);
-    block-size: var(--space-6);
-    border: none;
-    border-radius: var(--radius-sm);
-    background: transparent;
-    color: var(--color-text-muted);
-    cursor: pointer;
-  }
-
-  .ds-search__clear:hover {
-    background: var(--field-hover);
-    color: var(--color-text);
-  }
-
-  .ds-search__clear:focus-visible {
-    outline: var(--control-border-width) solid var(--color-focus);
-    outline-offset: 2px;
-  }
 }

package/dist/components/Select/index.cjs

@@ -1,2 +1,2 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../chunks/Icon-CWsA1W83.cjs");;/* empty css                            */const t=require("../Popover/index.cjs");let n=require("react"),r=require("react/jsx-runtime");function i(...e){return e.filter(Boolean).join(` `)}var a=(0,n.forwardRef)(function({options:a,value:o,defaultValue:s,onValueChange:c,placeholder:l=`Select an option`,size:u=`md`,isDisabled:d=!1,isInvalid:f=!1,menuPlacement:p=`bottom`,className:m,disabled:h,onClick:g,onKeyDown:_,...v},y){let[b,x]=(0,n.useState)(s??``),S=o??b,[C,w]=(0,n.useState)(!1),[T,E]=(0,n.useState)(0),D=(0,n.useRef)(null),O=(0,n.useRef)(null),k=(0,n.useRef)(null),A=(0,n.useId)(),j=d||h,M=C&&!j,N=a.find(e=>e.value===S),P=a.filter(e=>!e.isDisabled),F=(0,n.useCallback)(e=>{o===void 0&&x(e),c?.(e),w(!1)},[c,o]);(0,n.useEffect)(()=>{if(!M)return;let e=a.findIndex(e=>e.value===S&&!e.isDisabled);E(e<0?a.indexOf(P[0]):e);let t=e=>{let t=e.target;!D.current?.contains(t)&&!k.current?.contains(t)&&w(!1)};return document.addEventListener(`mousedown`,t),()=>document.removeEventListener(`mousedown`,t)},[M]),(0,n.useEffect)(()=>{M&&(k.current?.querySelectorAll(`[role='option']`)[T])?.scrollIntoView({block:`nearest`})},[T,M]);let I=e=>{let t=a.map((e,t)=>({option:e,index:t})).filter(e=>!e.option.isDisabled);if(t.length===0)return;let n=t[(t.findIndex(e=>e.index===T)+e+t.length)%t.length];E(n.index)},L=e=>{if(!j){if(e.key===`Escape`)w(!1),O.current?.focus();else if(!M&&(e.key===`ArrowDown`||e.key===`ArrowUp`||e.key===`Enter`||e.key===` `))e.preventDefault(),w(!0);else if(M){if(e.key===`Tab`)w(!1);else if(e.key===`ArrowDown`||e.key===`ArrowUp`)e.preventDefault(),I(e.key===`ArrowDown`?1:-1);else if(e.key===`Home`||e.key===`End`){e.preventDefault();let t=e.key===`Home`?P[0]:P[P.length-1];t&&E(a.indexOf(t))}else if(e.key===`Enter`||e.key===` `){e.preventDefault();let t=a[T];t&&!t.isDisabled&&F(t.value)}}}};return(0,r.jsxs)(`div`,{className:`ds-select-root`,ref:D,children:[(0,r.jsxs)(`button`,{ref:e=>{O.current=e,typeof y==`function`?y(e):y&&(y.current=e)},type:`button`,role:`combobox`,"aria-haspopup":`listbox`,"aria-expanded":M,"aria-controls":M?A:void 0,"aria-activedescendant":M&&a[T]&&!a[T].isDisabled?`${A}-option-${T}`:void 0,"aria-invalid":f||void 0,disabled:j,"data-size":u,"data-placeholder":N?void 0:``,className:i(`ds-field-skin`,`ds-select`,m),onClick:e=>{g?.(e),e.defaultPrevented||w(e=>!e)},onKeyDown:e=>{_?.(e),e.defaultPrevented||L(e)},...v,children:[(0,r.jsx)(`span`,{className:`ds-select__value`,children:N?N.label:l}),(0,r.jsx)(e.t,{name:`chevron-down`,size:16,className:`ds-select__chevron`})]}),(0,r.jsx)(t.Popover,{anchorRef:O,isOpen:M,placement:p,matchAnchorWidth:!0,panelRef:k,id:A,role:`listbox`,"aria-label":v[`aria-labelledby`]?void 0:v[`aria-label`]??l,"aria-labelledby":v[`aria-labelledby`],className:`ds-surface-raised ds-select__menu`,children:(0,r.jsx)(`div`,{onKeyDown:L,children:a.map((t,n)=>(0,r.jsxs)(`div`,{id:`${A}-option-${n}`,role:`option`,"aria-selected":t.value===S,"aria-disabled":t.isDisabled||void 0,"data-active":n===T||void 0,className:`ds-select__option`,onMouseEnter:()=>!t.isDisabled&&E(n),onClick:()=>{t.isDisabled||(F(t.value),O.current?.focus())},children:[(0,r.jsxs)(`span`,{className:`ds-select__option-body`,children:[(0,r.jsx)(`span`,{className:`ds-select__option-label`,children:t.label}),t.description&&(0,r.jsx)(`span`,{className:`ds-select__option-description`,children:t.description})]}),t.value===S&&(0,r.jsx)(e.t,{name:`check`,size:16})]},t.value))})})]})});exports.Select=a;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../chunks/Icon-CWsA1W83.cjs"),t=require("../Button/index.cjs");;/* empty css                            */const n=require("../Popover/index.cjs");let r=require("react"),i=require("react/jsx-runtime");function a(...e){return e.filter(Boolean).join(` `)}var o=(0,r.forwardRef)(function({options:o,value:s,defaultValue:c,onValueChange:l,placeholder:u=`Select an option`,size:d=`md`,isDisabled:f=!1,isInvalid:p=!1,menuPlacement:m=`bottom`,className:h,disabled:g,onClick:_,onKeyDown:v,...y},b){let[x,S]=(0,r.useState)(c??``),C=s??x,[w,T]=(0,r.useState)(!1),[E,D]=(0,r.useState)(0),O=(0,r.useRef)(null),k=(0,r.useRef)(null),A=(0,r.useRef)(null),j=(0,r.useId)(),M=f||g,N=w&&!M,P=o.find(e=>e.value===C),F=o.filter(e=>!e.isDisabled),I=(0,r.useCallback)(e=>{s===void 0&&S(e),l?.(e),T(!1)},[l,s]);(0,r.useEffect)(()=>{if(!N)return;let e=o.findIndex(e=>e.value===C&&!e.isDisabled);D(e<0?o.indexOf(F[0]):e);let t=e=>{let t=e.target;!O.current?.contains(t)&&!A.current?.contains(t)&&T(!1)};return document.addEventListener(`mousedown`,t),()=>document.removeEventListener(`mousedown`,t)},[N]),(0,r.useEffect)(()=>{N&&(A.current?.querySelectorAll(`[role='option']`)[E])?.scrollIntoView({block:`nearest`})},[E,N]);let L=e=>{let t=o.map((e,t)=>({option:e,index:t})).filter(e=>!e.option.isDisabled);if(t.length===0)return;let n=t[(t.findIndex(e=>e.index===E)+e+t.length)%t.length];D(n.index)},R=e=>{if(!M){if(e.key===`Escape`){if(!N)return;e.preventDefault(),T(!1),k.current?.focus()}else if(!N&&(e.key===`ArrowDown`||e.key===`ArrowUp`||e.key===`Enter`||e.key===` `))e.preventDefault(),T(!0);else if(N){if(e.key===`Tab`)T(!1);else if(e.key===`ArrowDown`||e.key===`ArrowUp`)e.preventDefault(),L(e.key===`ArrowDown`?1:-1);else if(e.key===`Home`||e.key===`End`){e.preventDefault();let t=e.key===`Home`?F[0]:F[F.length-1];t&&D(o.indexOf(t))}else if(e.key===`Enter`||e.key===` `){e.preventDefault();let t=o[E];t&&!t.isDisabled&&I(t.value)}}}};return(0,i.jsxs)(`div`,{className:`ds-select-root`,ref:O,children:[(0,i.jsxs)(t.Button,{ref:e=>{k.current=e,typeof b==`function`?b(e):b&&(b.current=e)},size:d,role:`combobox`,"aria-haspopup":`listbox`,"aria-expanded":N,"aria-controls":N?j:void 0,"aria-activedescendant":N&&o[E]&&!o[E].isDisabled?`${j}-option-${E}`:void 0,"aria-invalid":p||void 0,isDisabled:M,"data-placeholder":P?void 0:``,className:a(`ds-field-skin`,`ds-select`,h),onClick:e=>{_?.(e),e.defaultPrevented||T(e=>!e)},onKeyDown:e=>{v?.(e),e.defaultPrevented||R(e)},...y,children:[(0,i.jsx)(`span`,{className:`ds-select__value`,children:P?P.label:u}),(0,i.jsx)(e.t,{name:`chevron-down`,size:16,className:`ds-select__chevron`})]}),(0,i.jsx)(n.Popover,{anchorRef:k,isOpen:N,placement:m,matchAnchorWidth:!0,panelRef:A,id:j,role:`listbox`,"aria-label":y[`aria-labelledby`]?void 0:y[`aria-label`]??u,"aria-labelledby":y[`aria-labelledby`],className:`ds-surface-raised ds-select__menu`,children:(0,i.jsx)(`div`,{onKeyDown:R,onPointerDown:e=>e.preventDefault(),children:o.map((n,r)=>(0,i.jsxs)(t.Button,{variant:r===E?`active`:`simple`,size:`sm`,isDisabled:n.isDisabled,tabIndex:-1,id:`${j}-option-${r}`,role:`option`,"aria-selected":n.value===C,"aria-disabled":n.isDisabled||void 0,"data-active":r===E||void 0,className:`ds-select__option`,onMouseEnter:()=>!n.isDisabled&&D(r),onClick:()=>{n.isDisabled||(I(n.value),k.current?.focus())},children:[(0,i.jsxs)(`span`,{className:`ds-select__option-body`,children:[(0,i.jsx)(`span`,{className:`ds-select__option-label`,children:n.label}),n.description&&(0,i.jsx)(`span`,{className:`ds-select__option-description`,children:n.description})]}),n.value===C&&(0,i.jsx)(e.t,{name:`check`,size:16})]},n.value))})})]})});exports.Select=o;
 //# sourceMappingURL=index.cjs.map

package/dist/components/Select/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":["forwardRef","useState","useRef","useId","useCallback","Icon","Popover","require_Icon","require_components_Popover_index","react","react_jsx_runtime","cx","parts","Select","rest","internal","setInternal","defaultValue","current","value","isOpen","setOpen","activeIndex","setActiveIndex","rootRef","triggerRef","listRef","listId","effectiveDisabled","isDisabled","disabled","isVisible","selected","options","option","enabled","commit","next","onValueChange","index","onPointerDown","target","event","step","order","o","delta","handleKeyDown","pick","node","ref","isInvalid","size","className","onClick","open","onKeyDown","placeholder","menuPlacement"],"sources":["../../../src/components/Select/index.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n  type ButtonHTMLAttributes,\n} from \"react\";\nimport { Icon } from \"../Icon\";\nimport { Popover, type PopoverPlacement } from \"../Popover\";\nimport type { FieldSize } from \"../Field\";\nimport \"../Field/style.css\";\nimport \"./style.css\";\n\nfunction cx(...parts: (string | undefined | false)[]) {\n  return parts.filter(Boolean).join(\" \");\n}\n\nexport interface SelectOption {\n  value: string;\n  label: string;\n  /** Secondary line under the label. */\n  description?: string;\n  isDisabled?: boolean;\n}\n\nexport interface SelectProps\n  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, \"value\" | \"defaultValue\" | \"onChange\"> {\n  options: SelectOption[];\n  /** Controlled value. Leave undefined to let the select hold its own. */\n  value?: string;\n  defaultValue?: string;\n  onValueChange?: (value: string) => void;\n  placeholder?: string;\n  size?: FieldSize;\n  isDisabled?: boolean;\n  isInvalid?: boolean;\n  /** Preferred side of the menu; flips when space requires it. */\n  menuPlacement?: PopoverPlacement;\n}\n\n/**\n * One value out of a known list. Wears the field skin, opens a listbox: arrows\n * walk the options, Enter commits, Escape closes without changing anything.\n */\nexport const Select = forwardRef<HTMLButtonElement, SelectProps>(function Select(\n  {\n    options,\n    value,\n    defaultValue,\n    onValueChange,\n    placeholder = \"Select an option\",\n    size = \"md\",\n    isDisabled = false,\n    isInvalid = false,\n    menuPlacement = \"bottom\",\n    className,\n    disabled,\n    onClick,\n    onKeyDown,\n    ...rest\n  },\n  ref,\n) {\n  const [internal, setInternal] = useState(defaultValue ?? \"\");\n  const current = value ?? internal;\n  const [isOpen, setOpen] = useState(false);\n  const [activeIndex, setActiveIndex] = useState(0);\n  const rootRef = useRef<HTMLDivElement | null>(null);\n  const triggerRef = useRef<HTMLButtonElement | null>(null);\n  const listRef = useRef<HTMLDivElement | null>(null);\n  const listId = useId();\n  const effectiveDisabled = isDisabled || disabled;\n  const isVisible = isOpen && !effectiveDisabled;\n\n  const selected = options.find((option) => option.value === current);\n  const enabled = options.filter((option) => !option.isDisabled);\n\n  const commit = useCallback(\n    (next: string) => {\n      if (value === undefined) setInternal(next);\n      onValueChange?.(next);\n      setOpen(false);\n    },\n    [onValueChange, value],\n  );\n\n  useEffect(() => {\n    if (!isVisible) return;\n    const index = options.findIndex((option) => option.value === current && !option.isDisabled);\n    setActiveIndex(index < 0 ? options.indexOf(enabled[0]!) : index);\n    const onPointerDown = (event: MouseEvent) => {\n      const target = event.target as Node;\n      if (!rootRef.current?.contains(target) && !listRef.current?.contains(target)) setOpen(false);\n    };\n    document.addEventListener(\"mousedown\", onPointerDown);\n    return () => document.removeEventListener(\"mousedown\", onPointerDown);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isVisible]);\n\n  useEffect(() => {\n    if (!isVisible) return;\n    const activeOption = listRef.current?.querySelectorAll<HTMLElement>(\"[role='option']\")[activeIndex];\n    activeOption?.scrollIntoView({ block: \"nearest\" });\n  }, [activeIndex, isVisible]);\n\n  const step = (delta: number) => {\n    const order = options.map((option, index) => ({ option, index })).filter((o) => !o.option.isDisabled);\n    if (order.length === 0) return;\n    const at = order.findIndex((o) => o.index === activeIndex);\n    const next = order[(at + delta + order.length) % order.length]!;\n    setActiveIndex(next.index);\n  };\n\n  const handleKeyDown = (event: React.KeyboardEvent) => {\n    if (effectiveDisabled) return;\n    if (event.key === \"Escape\") {\n      setOpen(false);\n      triggerRef.current?.focus();\n      return;\n    }\n    if (!isVisible && (event.key === \"ArrowDown\" || event.key === \"ArrowUp\" || event.key === \"Enter\" || event.key === \" \")) {\n      event.preventDefault();\n      setOpen(true);\n      return;\n    }\n    if (!isVisible) return;\n    if (event.key === \"Tab\") {\n      setOpen(false);\n      return;\n    }\n    if (event.key === \"ArrowDown\" || event.key === \"ArrowUp\") {\n      event.preventDefault();\n      step(event.key === \"ArrowDown\" ? 1 : -1);\n    } else if (event.key === \"Home\" || event.key === \"End\") {\n      event.preventDefault();\n      const pick = event.key === \"Home\" ? enabled[0] : enabled[enabled.length - 1];\n      if (pick) setActiveIndex(options.indexOf(pick));\n    } else if (event.key === \"Enter\" || event.key === \" \") {\n      event.preventDefault();\n      const option = options[activeIndex];\n      if (option && !option.isDisabled) commit(option.value);\n    }\n  };\n\n  return (\n    <div className=\"ds-select-root\" ref={rootRef}>\n      <button\n        ref={(node) => {\n          triggerRef.current = node;\n          if (typeof ref === \"function\") ref(node);\n          else if (ref) ref.current = node;\n        }}\n        type=\"button\"\n        role=\"combobox\"\n        aria-haspopup=\"listbox\"\n        aria-expanded={isVisible}\n        aria-controls={isVisible ? listId : undefined}\n        aria-activedescendant={isVisible && options[activeIndex] && !options[activeIndex].isDisabled ? `${listId}-option-${activeIndex}` : undefined}\n        aria-invalid={isInvalid || undefined}\n        disabled={effectiveDisabled}\n        data-size={size}\n        data-placeholder={selected ? undefined : \"\"}\n        className={cx(\"ds-field-skin\", \"ds-select\", className)}\n        onClick={(event) => {\n          onClick?.(event);\n          if (!event.defaultPrevented) setOpen((open) => !open);\n        }}\n        onKeyDown={(event) => {\n          onKeyDown?.(event);\n          if (!event.defaultPrevented) handleKeyDown(event);\n        }}\n        {...rest}\n      >\n        <span className=\"ds-select__value\">{selected ? selected.label : placeholder}</span>\n        <Icon name=\"chevron-down\" size={16} className=\"ds-select__chevron\" />\n      </button>\n      <Popover\n        anchorRef={triggerRef}\n        isOpen={isVisible}\n        placement={menuPlacement}\n        matchAnchorWidth\n        panelRef={listRef}\n        id={listId}\n        role=\"listbox\"\n        aria-label={rest[\"aria-labelledby\"] ? undefined : rest[\"aria-label\"] ?? placeholder}\n        aria-labelledby={rest[\"aria-labelledby\"]}\n        className=\"ds-surface-raised ds-select__menu\"\n      >\n        <div onKeyDown={handleKeyDown}>\n          {options.map((option, index) => (\n            <div\n              key={option.value}\n              id={`${listId}-option-${index}`}\n              role=\"option\"\n              aria-selected={option.value === current}\n              aria-disabled={option.isDisabled || undefined}\n              data-active={index === activeIndex || undefined}\n              className=\"ds-select__option\"\n              onMouseEnter={() => !option.isDisabled && setActiveIndex(index)}\n              onClick={() => {\n                if (!option.isDisabled) {\n                  commit(option.value);\n                  triggerRef.current?.focus();\n                }\n              }}\n            >\n              <span className=\"ds-select__option-body\">\n                <span className=\"ds-select__option-label\">{option.label}</span>\n                {option.description && (\n                  <span className=\"ds-select__option-description\">{option.description}</span>\n                )}\n              </span>\n              {option.value === current && <Icon name=\"check\" size={16} />}\n            </div>\n          ))}\n        </div>\n      </Popover>\n    </div>\n  );\n});\n"],"mappings":"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"}
+{"version":3,"file":"index.cjs","names":["forwardRef","useState","useRef","useId","useCallback","Button","Icon","Popover","require_Icon","require_components_Button_index","require_components_Popover_index","react","react_jsx_runtime","cx","parts","Select","rest","internal","setInternal","defaultValue","current","value","isOpen","setOpen","activeIndex","setActiveIndex","rootRef","triggerRef","listRef","listId","effectiveDisabled","isDisabled","disabled","isVisible","selected","options","option","enabled","commit","next","onValueChange","index","onPointerDown","target","event","step","order","o","delta","handleKeyDown","pick","node","ref","isInvalid","className","onClick","open","onKeyDown","placeholder","menuPlacement"],"sources":["../../../src/components/Select/index.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n  type ButtonHTMLAttributes,\n} from \"react\";\nimport { Icon } from \"../Icon\";\nimport { Button } from \"../Button\";\nimport { Popover, type PopoverPlacement } from \"../Popover\";\nimport type { FieldSize } from \"../Field\";\nimport \"../Field/style.css\";\nimport \"./style.css\";\n\nfunction cx(...parts: (string | undefined | false)[]) {\n  return parts.filter(Boolean).join(\" \");\n}\n\nexport interface SelectOption {\n  value: string;\n  label: string;\n  /** Secondary line under the label. */\n  description?: string;\n  isDisabled?: boolean;\n}\n\nexport interface SelectProps\n  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, \"value\" | \"defaultValue\" | \"onChange\"> {\n  options: SelectOption[];\n  /** Controlled value. Leave undefined to let the select hold its own. */\n  value?: string;\n  defaultValue?: string;\n  onValueChange?: (value: string) => void;\n  placeholder?: string;\n  size?: FieldSize;\n  isDisabled?: boolean;\n  isInvalid?: boolean;\n  /** Preferred side of the menu; flips when space requires it. */\n  menuPlacement?: PopoverPlacement;\n}\n\n/**\n * One value out of a known list. Wears the field skin, opens a listbox: arrows\n * walk the options, Enter commits, Escape closes without changing anything.\n */\nexport const Select = forwardRef<HTMLButtonElement, SelectProps>(function Select(\n  {\n    options,\n    value,\n    defaultValue,\n    onValueChange,\n    placeholder = \"Select an option\",\n    size = \"md\",\n    isDisabled = false,\n    isInvalid = false,\n    menuPlacement = \"bottom\",\n    className,\n    disabled,\n    onClick,\n    onKeyDown,\n    ...rest\n  },\n  ref,\n) {\n  const [internal, setInternal] = useState(defaultValue ?? \"\");\n  const current = value ?? internal;\n  const [isOpen, setOpen] = useState(false);\n  const [activeIndex, setActiveIndex] = useState(0);\n  const rootRef = useRef<HTMLDivElement | null>(null);\n  const triggerRef = useRef<HTMLButtonElement | null>(null);\n  const listRef = useRef<HTMLDivElement | null>(null);\n  const listId = useId();\n  const effectiveDisabled = isDisabled || disabled;\n  const isVisible = isOpen && !effectiveDisabled;\n\n  const selected = options.find((option) => option.value === current);\n  const enabled = options.filter((option) => !option.isDisabled);\n\n  const commit = useCallback(\n    (next: string) => {\n      if (value === undefined) setInternal(next);\n      onValueChange?.(next);\n      setOpen(false);\n    },\n    [onValueChange, value],\n  );\n\n  useEffect(() => {\n    if (!isVisible) return;\n    const index = options.findIndex((option) => option.value === current && !option.isDisabled);\n    setActiveIndex(index < 0 ? options.indexOf(enabled[0]!) : index);\n    const onPointerDown = (event: MouseEvent) => {\n      const target = event.target as Node;\n      if (!rootRef.current?.contains(target) && !listRef.current?.contains(target)) setOpen(false);\n    };\n    document.addEventListener(\"mousedown\", onPointerDown);\n    return () => document.removeEventListener(\"mousedown\", onPointerDown);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isVisible]);\n\n  useEffect(() => {\n    if (!isVisible) return;\n    const activeOption = listRef.current?.querySelectorAll<HTMLElement>(\"[role='option']\")[activeIndex];\n    activeOption?.scrollIntoView({ block: \"nearest\" });\n  }, [activeIndex, isVisible]);\n\n  const step = (delta: number) => {\n    const order = options.map((option, index) => ({ option, index })).filter((o) => !o.option.isDisabled);\n    if (order.length === 0) return;\n    const at = order.findIndex((o) => o.index === activeIndex);\n    const next = order[(at + delta + order.length) % order.length]!;\n    setActiveIndex(next.index);\n  };\n\n  const handleKeyDown = (event: React.KeyboardEvent) => {\n    if (effectiveDisabled) return;\n    if (event.key === \"Escape\") {\n      if (!isVisible) return;\n      // Claims Escape so an enclosing Drawer stays open.\n      event.preventDefault();\n      setOpen(false);\n      triggerRef.current?.focus();\n      return;\n    }\n    if (!isVisible && (event.key === \"ArrowDown\" || event.key === \"ArrowUp\" || event.key === \"Enter\" || event.key === \" \")) {\n      event.preventDefault();\n      setOpen(true);\n      return;\n    }\n    if (!isVisible) return;\n    if (event.key === \"Tab\") {\n      setOpen(false);\n      return;\n    }\n    if (event.key === \"ArrowDown\" || event.key === \"ArrowUp\") {\n      event.preventDefault();\n      step(event.key === \"ArrowDown\" ? 1 : -1);\n    } else if (event.key === \"Home\" || event.key === \"End\") {\n      event.preventDefault();\n      const pick = event.key === \"Home\" ? enabled[0] : enabled[enabled.length - 1];\n      if (pick) setActiveIndex(options.indexOf(pick));\n    } else if (event.key === \"Enter\" || event.key === \" \") {\n      event.preventDefault();\n      const option = options[activeIndex];\n      if (option && !option.isDisabled) commit(option.value);\n    }\n  };\n\n  return (\n    <div className=\"ds-select-root\" ref={rootRef}>\n      <Button\n        ref={(node) => {\n          triggerRef.current = node;\n          if (typeof ref === \"function\") ref(node);\n          else if (ref) ref.current = node;\n        }}\n        size={size}\n        role=\"combobox\"\n        aria-haspopup=\"listbox\"\n        aria-expanded={isVisible}\n        aria-controls={isVisible ? listId : undefined}\n        aria-activedescendant={isVisible && options[activeIndex] && !options[activeIndex].isDisabled ? `${listId}-option-${activeIndex}` : undefined}\n        aria-invalid={isInvalid || undefined}\n        isDisabled={effectiveDisabled}\n        data-placeholder={selected ? undefined : \"\"}\n        className={cx(\"ds-field-skin\", \"ds-select\", className)}\n        onClick={(event) => {\n          onClick?.(event);\n          if (!event.defaultPrevented) setOpen((open) => !open);\n        }}\n        onKeyDown={(event) => {\n          onKeyDown?.(event);\n          if (!event.defaultPrevented) handleKeyDown(event);\n        }}\n        {...rest}\n      >\n        <span className=\"ds-select__value\">{selected ? selected.label : placeholder}</span>\n        <Icon name=\"chevron-down\" size={16} className=\"ds-select__chevron\" />\n      </Button>\n      <Popover\n        anchorRef={triggerRef}\n        isOpen={isVisible}\n        placement={menuPlacement}\n        matchAnchorWidth\n        panelRef={listRef}\n        id={listId}\n        role=\"listbox\"\n        aria-label={rest[\"aria-labelledby\"] ? undefined : rest[\"aria-label\"] ?? placeholder}\n        aria-labelledby={rest[\"aria-labelledby\"]}\n        className=\"ds-surface-raised ds-select__menu\"\n      >\n        <div onKeyDown={handleKeyDown} onPointerDown={(event) => event.preventDefault()}>\n          {options.map((option, index) => (\n            <Button\n              key={option.value}\n              variant={index === activeIndex ? \"active\" : \"simple\"}\n              size=\"sm\"\n              isDisabled={option.isDisabled}\n              tabIndex={-1}\n              id={`${listId}-option-${index}`}\n              role=\"option\"\n              aria-selected={option.value === current}\n              aria-disabled={option.isDisabled || undefined}\n              data-active={index === activeIndex || undefined}\n              className=\"ds-select__option\"\n              onMouseEnter={() => !option.isDisabled && setActiveIndex(index)}\n              onClick={() => {\n                if (!option.isDisabled) {\n                  commit(option.value);\n                  triggerRef.current?.focus();\n                }\n              }}\n            >\n              <span className=\"ds-select__option-body\">\n                <span className=\"ds-select__option-label\">{option.label}</span>\n                {option.description && (\n                  <span className=\"ds-select__option-description\">{option.description}</span>\n                )}\n              </span>\n              {option.value === current && <Icon name=\"check\" size={16} />}\n            </Button>\n          ))}\n        </div>\n      </Popover>\n    </div>\n  );\n});\n"],"mappings":"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"}

package/dist/components/Select/index.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/Select/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAOL,KAAK,oBAAoB,EAC1B,MAAM,OAAO,CAAC;AAEf,OAAO,EAAW,KAAK,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAC5D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAC1C,OAAO,oBAAoB,CAAC;AAC5B,OAAO,aAAa,CAAC;AAMrB,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,sCAAsC;IACtC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,OAAO,GAAG,cAAc,GAAG,UAAU,CAAC;IAC5F,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,wEAAwE;IACxE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gEAAgE;IAChE,aAAa,CAAC,EAAE,gBAAgB,CAAC;CAClC;AAED;;;GAGG;AACH,eAAO,MAAM,MAAM,2GA+KjB,CAAC"}
+{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/Select/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAOL,KAAK,oBAAoB,EAC1B,MAAM,OAAO,CAAC;AAGf,OAAO,EAAW,KAAK,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAC5D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAC1C,OAAO,oBAAoB,CAAC;AAC5B,OAAO,aAAa,CAAC;AAMrB,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,sCAAsC;IACtC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,OAAO,GAAG,cAAc,GAAG,UAAU,CAAC;IAC5F,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,wEAAwE;IACxE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gEAAgE;IAChE,aAAa,CAAC,EAAE,gBAAgB,CAAC;CAClC;AAED;;;GAGG;AACH,eAAO,MAAM,MAAM,2GAqLjB,CAAC"}

package/dist/components/Select/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Select/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAOL,KAAK,oBAAoB,EAC1B,MAAM,OAAO,CAAC;AAEf,OAAO,EAAW,KAAK,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAC5D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAC1C,OAAO,oBAAoB,CAAC;AAC5B,OAAO,aAAa,CAAC;AAMrB,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,sCAAsC;IACtC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,OAAO,GAAG,cAAc,GAAG,UAAU,CAAC;IAC5F,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,wEAAwE;IACxE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gEAAgE;IAChE,aAAa,CAAC,EAAE,gBAAgB,CAAC;CAClC;AAED;;;GAGG;AACH,eAAO,MAAM,MAAM,2GA+KjB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Select/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAOL,KAAK,oBAAoB,EAC1B,MAAM,OAAO,CAAC;AAGf,OAAO,EAAW,KAAK,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAC5D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAC1C,OAAO,oBAAoB,CAAC;AAC5B,OAAO,aAAa,CAAC;AAMrB,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,sCAAsC;IACtC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,OAAO,GAAG,cAAc,GAAG,UAAU,CAAC;IAC5F,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,wEAAwE;IACxE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gEAAgE;IAChE,aAAa,CAAC,EAAE,gBAAgB,CAAC;CAClC;AAED;;;GAGG;AACH,eAAO,MAAM,MAAM,2GAqLjB,CAAC"}