@react-md/core 1.0.0-next.15 → 1.0.0-next.17

package/dist/form/InputToggleIcon.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/InputToggleIcon.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { forwardRef, type HTMLAttributes, type ReactNode } from \"react\";\nimport { getIcon } from \"../icon/iconConfig.js\";\nimport { FORM_CONFIG } from \"./formConfig.js\";\nimport { inputToggle, type InputToggleSize } from \"./inputToggleStyles.js\";\n\n/**\n * @since 2.8.0\n * @since 6.0.0 Removed the `circle` and `overlay` props since they are no\n * longer needed. Added the `icon`, `disableEm`, `checkedIcon` and\n * `indeterminateIcon` props.\n * @internal\n */\nexport interface InputToggleIconProps extends HTMLAttributes<HTMLSpanElement> {\n  type: \"checkbox\" | \"radio\";\n  /**\n   * Note: If this is `undefined` and the {@link FORM_CONFIG.uncontrolledToggles} is `false`,\n   * the icon state won't work.\n   */\n  checked?: boolean;\n\n  /**\n   * The icon to display while {@link checked} is `false`.\n   */\n  icon?: ReactNode;\n\n  /**\n   * The icon to display while {@link checked} is `true` and\n   * {@link indeterminate} is `false`.\n   */\n  checkedIcon?: ReactNode;\n\n  /**\n   * The icon to display while both {@link checked} and {@link indeterminate}\n   * are `true`.\n   */\n  indeterminateIcon?: ReactNode;\n\n  /** @defaultValue `\"normal\"` */\n  size?: InputToggleSize;\n\n  /** @defaultValue `false` */\n  error?: boolean;\n\n  /** @defaultValue `false` */\n  disabled?: boolean;\n\n  /** @defaultValue `false` */\n  disableEm?: boolean;\n\n  /** @defaultValue `false` */\n  indeterminate?: boolean;\n}\n\n/**\n * **Server Component**\n *\n * @since 2.8.0\n * @since 6.0.0 Updated to use different icons for each checked state instead\n * of a css overlay hack.\n * @internal\n */\nexport const InputToggleIcon = forwardRef<\n  HTMLSpanElement,\n  InputToggleIconProps\n>(function InputToggleIcon(props, ref) {\n  const {\n    type,\n    size = \"normal\",\n    icon: propIcon,\n    error,\n    checked,\n    children,\n    disabled,\n    indeterminate,\n    className,\n    disableEm = false,\n    checkedIcon: propCheckedIcon,\n    indeterminateIcon: propIndeterminateIcon,\n    ...remaining\n  } = props;\n  const uncheckedIcon = getIcon(type, propIcon);\n  const checkedIcon = getIcon(`${type}Checked`, propCheckedIcon);\n  const indeterminateIcon = getIcon(\n    \"checkboxIndeterminate\",\n    propIndeterminateIcon\n  );\n\n  let icon: ReactNode;\n  let active = false;\n  const uncontrolled = typeof checked !== \"boolean\";\n  if (!uncontrolled || !FORM_CONFIG.uncontrolledToggles) {\n    active = !!checked && !error;\n    icon = checked\n      ? indeterminate\n        ? indeterminateIcon\n        : checkedIcon\n      : uncheckedIcon;\n  } else {\n    icon = (\n      <>\n        {uncheckedIcon}\n        {indeterminate ? indeterminateIcon : checkedIcon}\n      </>\n    );\n  }\n\n  return (\n    <span\n      {...remaining}\n      ref={ref}\n      className={cnb(\n        inputToggle({\n          em: !disableEm,\n          size,\n          type,\n          error,\n          active,\n          disabled,\n          uncontrolled,\n          className,\n        })\n      )}\n    >\n      {children}\n      {icon}\n    </span>\n  );\n});\n"],"names":["cnb","forwardRef","getIcon","FORM_CONFIG","inputToggle","InputToggleIcon","props","ref","type","size","icon","propIcon","error","checked","children","disabled","indeterminate","className","disableEm","checkedIcon","propCheckedIcon","indeterminateIcon","propIndeterminateIcon","remaining","uncheckedIcon","active","uncontrolled","uncontrolledToggles","span","em"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,UAAU,QAA6C,QAAQ;AACxE,SAASC,OAAO,QAAQ,wBAAwB;AAChD,SAASC,WAAW,QAAQ,kBAAkB;AAC9C,SAASC,WAAW,QAA8B,yBAAyB;AAkD3E;;;;;;;CAOC,GACD,OAAO,MAAMC,gCAAkBJ,WAG7B,SAASI,gBAAgBC,KAAK,EAAEC,GAAG;IACnC,MAAM,EACJC,IAAI,EACJC,OAAO,QAAQ,EACfC,MAAMC,QAAQ,EACdC,KAAK,EACLC,OAAO,EACPC,QAAQ,EACRC,QAAQ,EACRC,aAAa,EACbC,SAAS,EACTC,YAAY,KAAK,EACjBC,aAAaC,eAAe,EAC5BC,mBAAmBC,qBAAqB,EACxC,GAAGC,WACJ,GAAGjB;IACJ,MAAMkB,gBAAgBtB,QAAQM,MAAMG;IACpC,MAAMQ,cAAcjB,QAAQ,CAAC,EAAEM,KAAK,OAAO,CAAC,EAAEY;IAC9C,MAAMC,oBAAoBnB,QACxB,yBACAoB;IAGF,IAAIZ;IACJ,IAAIe,SAAS;IACb,MAAMC,eAAe,OAAOb,YAAY;IACxC,IAAI,CAACa,gBAAgB,CAACvB,YAAYwB,mBAAmB,EAAE;QACrDF,SAAS,CAAC,CAACZ,WAAW,CAACD;QACvBF,OAAOG,UACHG,gBACEK,oBACAF,cACFK;IACN,OAAO;QACLd,qBACE;;gBACGc;gBACAR,gBAAgBK,oBAAoBF;;;IAG3C;IAEA,qBACE,MAACS;QACE,GAAGL,SAAS;QACbhB,KAAKA;QACLU,WAAWjB,IACTI,YAAY;YACVyB,IAAI,CAACX;YACLT;YACAD;YACAI;YACAa;YACAV;YACAW;YACAT;QACF;;YAGDH;YACAJ;;;AAGP,GAAG"}
+{"version":3,"sources":["../../src/form/InputToggleIcon.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { forwardRef, type HTMLAttributes, type ReactNode } from \"react\";\nimport { getIcon } from \"../icon/iconConfig.js\";\nimport { FORM_CONFIG } from \"./formConfig.js\";\nimport { inputToggle, type InputToggleSize } from \"./inputToggleStyles.js\";\n\n/**\n * @since 2.8.0\n * @since 6.0.0 Removed the `circle` and `overlay` props since they are no\n * longer needed. Added the `icon`, `disableEm`, `checkedIcon` and\n * `indeterminateIcon` props.\n * @internal\n */\nexport interface InputToggleIconProps extends HTMLAttributes<HTMLSpanElement> {\n  type: \"checkbox\" | \"radio\";\n  /**\n   * Note: If this is `undefined` and the {@link FORM_CONFIG.uncontrolledToggles} is `false`,\n   * the icon state won't work.\n   */\n  checked?: boolean;\n\n  /**\n   * The icon to display while {@link checked} is `false`.\n   */\n  icon?: ReactNode;\n\n  /**\n   * The icon to display while {@link checked} is `true` and\n   * {@link indeterminate} is `false`.\n   */\n  checkedIcon?: ReactNode;\n\n  /**\n   * The icon to display while both {@link checked} and {@link indeterminate}\n   * are `true`.\n   */\n  indeterminateIcon?: ReactNode;\n\n  /** @defaultValue `\"normal\"` */\n  size?: InputToggleSize;\n\n  /** @defaultValue `false` */\n  error?: boolean;\n\n  /** @defaultValue `false` */\n  disabled?: boolean;\n\n  /** @defaultValue `false` */\n  disableEm?: boolean;\n\n  /** @defaultValue `false` */\n  indeterminate?: boolean;\n}\n\n/**\n * @since 2.8.0\n * @since 6.0.0 Updated to use different icons for each checked state instead\n * of a css overlay hack.\n * @internal\n */\nexport const InputToggleIcon = forwardRef<\n  HTMLSpanElement,\n  InputToggleIconProps\n>(function InputToggleIcon(props, ref) {\n  const {\n    type,\n    size = \"normal\",\n    icon: propIcon,\n    error,\n    checked,\n    children,\n    disabled,\n    indeterminate,\n    className,\n    disableEm = false,\n    checkedIcon: propCheckedIcon,\n    indeterminateIcon: propIndeterminateIcon,\n    ...remaining\n  } = props;\n  const uncheckedIcon = getIcon(type, propIcon);\n  const checkedIcon = getIcon(`${type}Checked`, propCheckedIcon);\n  const indeterminateIcon = getIcon(\n    \"checkboxIndeterminate\",\n    propIndeterminateIcon\n  );\n\n  let icon: ReactNode;\n  let active = false;\n  const uncontrolled = typeof checked !== \"boolean\";\n  if (!uncontrolled || !FORM_CONFIG.uncontrolledToggles) {\n    active = !!checked && !error;\n    icon = checked\n      ? indeterminate\n        ? indeterminateIcon\n        : checkedIcon\n      : uncheckedIcon;\n  } else {\n    icon = (\n      <>\n        {uncheckedIcon}\n        {indeterminate ? indeterminateIcon : checkedIcon}\n      </>\n    );\n  }\n\n  return (\n    <span\n      {...remaining}\n      ref={ref}\n      className={cnb(\n        inputToggle({\n          em: !disableEm,\n          size,\n          type,\n          error,\n          active,\n          disabled,\n          uncontrolled,\n          className,\n        })\n      )}\n    >\n      {children}\n      {icon}\n    </span>\n  );\n});\n"],"names":["cnb","forwardRef","getIcon","FORM_CONFIG","inputToggle","InputToggleIcon","props","ref","type","size","icon","propIcon","error","checked","children","disabled","indeterminate","className","disableEm","checkedIcon","propCheckedIcon","indeterminateIcon","propIndeterminateIcon","remaining","uncheckedIcon","active","uncontrolled","uncontrolledToggles","span","em"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,UAAU,QAA6C,QAAQ;AACxE,SAASC,OAAO,QAAQ,wBAAwB;AAChD,SAASC,WAAW,QAAQ,kBAAkB;AAC9C,SAASC,WAAW,QAA8B,yBAAyB;AAkD3E;;;;;CAKC,GACD,OAAO,MAAMC,gCAAkBJ,WAG7B,SAASI,gBAAgBC,KAAK,EAAEC,GAAG;IACnC,MAAM,EACJC,IAAI,EACJC,OAAO,QAAQ,EACfC,MAAMC,QAAQ,EACdC,KAAK,EACLC,OAAO,EACPC,QAAQ,EACRC,QAAQ,EACRC,aAAa,EACbC,SAAS,EACTC,YAAY,KAAK,EACjBC,aAAaC,eAAe,EAC5BC,mBAAmBC,qBAAqB,EACxC,GAAGC,WACJ,GAAGjB;IACJ,MAAMkB,gBAAgBtB,QAAQM,MAAMG;IACpC,MAAMQ,cAAcjB,QAAQ,GAAGM,KAAK,OAAO,CAAC,EAAEY;IAC9C,MAAMC,oBAAoBnB,QACxB,yBACAoB;IAGF,IAAIZ;IACJ,IAAIe,SAAS;IACb,MAAMC,eAAe,OAAOb,YAAY;IACxC,IAAI,CAACa,gBAAgB,CAACvB,YAAYwB,mBAAmB,EAAE;QACrDF,SAAS,CAAC,CAACZ,WAAW,CAACD;QACvBF,OAAOG,UACHG,gBACEK,oBACAF,cACFK;IACN,OAAO;QACLd,qBACE;;gBACGc;gBACAR,gBAAgBK,oBAAoBF;;;IAG3C;IAEA,qBACE,MAACS;QACE,GAAGL,SAAS;QACbhB,KAAKA;QACLU,WAAWjB,IACTI,YAAY;YACVyB,IAAI,CAACX;YACLT;YACAD;YACAI;YACAa;YACAV;YACAW;YACAT;QACF;;YAGDH;YACAJ;;;AAGP,GAAG"}

package/dist/form/Label.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { type LabelClassNameOptions, type LabelProps } from "./types.js";
 declare module "react" {
     interface CSSProperties {
@@ -14,8 +13,6 @@ declare module "react" {
  */
 export declare function label(options: LabelClassNameOptions): string;
 /**
- * **Server Component**
- *
  * Most of the form components already use this `Label` internally when a
  * `label` prop has been provided. You should generally use this component if
  * you need to separate the label from an existing form component or you need to

package/dist/form/Label.js

@@ -7,7 +7,7 @@ const labelStyles = bem("rmd-label");
 /**
  * @since 6.0.0
  */ export function label(options) {
-    const { className, gap = false, error = false, dense = false, active = false, stacked = false, reversed = false, disabled = false, floating = false, inactive = false, floatingActive = active } = options;
+    const { className, gap, error, dense, active, stacked, reversed, disabled, floating, inactive, floatingActive = active } = options;
     let textColor;
     if (disabled) {
         textColor = "text-disabled";
@@ -33,8 +33,6 @@ const labelStyles = bem("rmd-label");
     }), className);
 }
 /**
- * **Server Component**
- *
  * Most of the form components already use this `Label` internally when a
  * `label` prop has been provided. You should generally use this component if
  * you need to separate the label from an existing form component or you need to
@@ -43,7 +41,7 @@ const labelStyles = bem("rmd-label");
  * @since 6.0.0 Updated to be usable externally and combines the
  * floating label styles instead of having separate components.
  */ export const Label = /*#__PURE__*/ forwardRef(function Label(props, ref) {
-    const { gap = false, error = false, dense = false, active = false, stacked = false, reversed = false, disabled = false, floating = false, inactive = false, floatingActive = active, className, children, ...remaining } = props;
+    const { gap, error, dense, active, stacked, reversed, disabled, floating, inactive, floatingActive = active, className, children, ...remaining } = props;
     return /*#__PURE__*/ _jsx("label", {
         ref: ref,
         ...remaining,

package/dist/form/Label.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/Label.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { forwardRef } from \"react\";\nimport { type TextColor, type ThemeColor, cssUtils } from \"../cssUtils.js\";\nimport { bem } from \"../utils/bem.js\";\nimport { type LabelClassNameOptions, type LabelProps } from \"./types.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-label-floating-top\"?: string | number;\n    \"--rmd-label-left-offset\"?: string | number;\n    \"--rmd-label-top-offset\"?: string | number;\n    \"--rmd-label-active-padding\"?: string | number;\n    \"--rmd-label-active-background-color\"?: string;\n  }\n}\n\nconst labelStyles = bem(\"rmd-label\");\n\n/**\n * @since 6.0.0\n */\nexport function label(options: LabelClassNameOptions): string {\n  const {\n    className,\n    gap = false,\n    error = false,\n    dense = false,\n    active = false,\n    stacked = false,\n    reversed = false,\n    disabled = false,\n    floating = false,\n    inactive = false,\n    floatingActive = active,\n  } = options;\n\n  let textColor: TextColor | ThemeColor | undefined;\n  if (disabled) {\n    textColor = \"text-disabled\";\n  } else if (error) {\n    textColor = \"error\";\n  } else if (floating && inactive) {\n    textColor = \"text-secondary\";\n  }\n\n  return cnb(\n    labelStyles({\n      gap,\n      error,\n      dense,\n      active,\n      disabled,\n      floating,\n      stacked: stacked && !reversed,\n      reversed: !stacked && reversed,\n      \"stacked-reversed\": stacked && reversed,\n      \"floating-dense\": floating && dense,\n      \"floating-active\": floating && floatingActive,\n    }),\n    cssUtils({\n      textColor,\n    }),\n    className\n  );\n}\n\n/**\n * **Server Component**\n *\n * Most of the form components already use this `Label` internally when a\n * `label` prop has been provided. You should generally use this component if\n * you need to separate the label from an existing form component or you need to\n * create a custom implementation of a form component.\n *\n * @since 6.0.0 Updated to be usable externally and combines the\n * floating label styles instead of having separate components.\n */\nexport const Label = forwardRef<HTMLLabelElement, LabelProps>(\n  function Label(props, ref) {\n    const {\n      gap = false,\n      error = false,\n      dense = false,\n      active = false,\n      stacked = false,\n      reversed = false,\n      disabled = false,\n      floating = false,\n      inactive = false,\n      floatingActive = active,\n      className,\n      children,\n      ...remaining\n    } = props;\n\n    return (\n      <label\n        ref={ref}\n        {...remaining}\n        className={label({\n          gap,\n          error,\n          dense,\n          active,\n          stacked,\n          reversed,\n          disabled,\n          floating,\n          floatingActive,\n          inactive,\n          className,\n        })}\n      >\n        {children}\n      </label>\n    );\n  }\n);\n"],"names":["cnb","forwardRef","cssUtils","bem","labelStyles","label","options","className","gap","error","dense","active","stacked","reversed","disabled","floating","inactive","floatingActive","textColor","Label","props","ref","children","remaining"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,UAAU,QAAQ,QAAQ;AACnC,SAA0CC,QAAQ,QAAQ,iBAAiB;AAC3E,SAASC,GAAG,QAAQ,kBAAkB;AAatC,MAAMC,cAAcD,IAAI;AAExB;;CAEC,GACD,OAAO,SAASE,MAAMC,OAA8B;IAClD,MAAM,EACJC,SAAS,EACTC,MAAM,KAAK,EACXC,QAAQ,KAAK,EACbC,QAAQ,KAAK,EACbC,SAAS,KAAK,EACdC,UAAU,KAAK,EACfC,WAAW,KAAK,EAChBC,WAAW,KAAK,EAChBC,WAAW,KAAK,EAChBC,WAAW,KAAK,EAChBC,iBAAiBN,MAAM,EACxB,GAAGL;IAEJ,IAAIY;IACJ,IAAIJ,UAAU;QACZI,YAAY;IACd,OAAO,IAAIT,OAAO;QAChBS,YAAY;IACd,OAAO,IAAIH,YAAYC,UAAU;QAC/BE,YAAY;IACd;IAEA,OAAOlB,IACLI,YAAY;QACVI;QACAC;QACAC;QACAC;QACAG;QACAC;QACAH,SAASA,WAAW,CAACC;QACrBA,UAAU,CAACD,WAAWC;QACtB,oBAAoBD,WAAWC;QAC/B,kBAAkBE,YAAYL;QAC9B,mBAAmBK,YAAYE;IACjC,IACAf,SAAS;QACPgB;IACF,IACAX;AAEJ;AAEA;;;;;;;;;;CAUC,GACD,OAAO,MAAMY,sBAAQlB,WACnB,SAASkB,MAAMC,KAAK,EAAEC,GAAG;IACvB,MAAM,EACJb,MAAM,KAAK,EACXC,QAAQ,KAAK,EACbC,QAAQ,KAAK,EACbC,SAAS,KAAK,EACdC,UAAU,KAAK,EACfC,WAAW,KAAK,EAChBC,WAAW,KAAK,EAChBC,WAAW,KAAK,EAChBC,WAAW,KAAK,EAChBC,iBAAiBN,MAAM,EACvBJ,SAAS,EACTe,QAAQ,EACR,GAAGC,WACJ,GAAGH;IAEJ,qBACE,KAACf;QACCgB,KAAKA;QACJ,GAAGE,SAAS;QACbhB,WAAWF,MAAM;YACfG;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAE;YACAD;YACAT;QACF;kBAECe;;AAGP,GACA"}
+{"version":3,"sources":["../../src/form/Label.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { forwardRef } from \"react\";\nimport { type TextColor, type ThemeColor, cssUtils } from \"../cssUtils.js\";\nimport { bem } from \"../utils/bem.js\";\nimport { type LabelClassNameOptions, type LabelProps } from \"./types.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-label-floating-top\"?: string | number;\n    \"--rmd-label-left-offset\"?: string | number;\n    \"--rmd-label-top-offset\"?: string | number;\n    \"--rmd-label-active-padding\"?: string | number;\n    \"--rmd-label-active-background-color\"?: string;\n  }\n}\n\nconst labelStyles = bem(\"rmd-label\");\n\n/**\n * @since 6.0.0\n */\nexport function label(options: LabelClassNameOptions): string {\n  const {\n    className,\n    gap,\n    error,\n    dense,\n    active,\n    stacked,\n    reversed,\n    disabled,\n    floating,\n    inactive,\n    floatingActive = active,\n  } = options;\n\n  let textColor: TextColor | ThemeColor | undefined;\n  if (disabled) {\n    textColor = \"text-disabled\";\n  } else if (error) {\n    textColor = \"error\";\n  } else if (floating && inactive) {\n    textColor = \"text-secondary\";\n  }\n\n  return cnb(\n    labelStyles({\n      gap,\n      error,\n      dense,\n      active,\n      disabled,\n      floating,\n      stacked: stacked && !reversed,\n      reversed: !stacked && reversed,\n      \"stacked-reversed\": stacked && reversed,\n      \"floating-dense\": floating && dense,\n      \"floating-active\": floating && floatingActive,\n    }),\n    cssUtils({\n      textColor,\n    }),\n    className\n  );\n}\n\n/**\n * Most of the form components already use this `Label` internally when a\n * `label` prop has been provided. You should generally use this component if\n * you need to separate the label from an existing form component or you need to\n * create a custom implementation of a form component.\n *\n * @since 6.0.0 Updated to be usable externally and combines the\n * floating label styles instead of having separate components.\n */\nexport const Label = forwardRef<HTMLLabelElement, LabelProps>(\n  function Label(props, ref) {\n    const {\n      gap,\n      error,\n      dense,\n      active,\n      stacked,\n      reversed,\n      disabled,\n      floating,\n      inactive,\n      floatingActive = active,\n      className,\n      children,\n      ...remaining\n    } = props;\n\n    return (\n      <label\n        ref={ref}\n        {...remaining}\n        className={label({\n          gap,\n          error,\n          dense,\n          active,\n          stacked,\n          reversed,\n          disabled,\n          floating,\n          floatingActive,\n          inactive,\n          className,\n        })}\n      >\n        {children}\n      </label>\n    );\n  }\n);\n"],"names":["cnb","forwardRef","cssUtils","bem","labelStyles","label","options","className","gap","error","dense","active","stacked","reversed","disabled","floating","inactive","floatingActive","textColor","Label","props","ref","children","remaining"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,UAAU,QAAQ,QAAQ;AACnC,SAA0CC,QAAQ,QAAQ,iBAAiB;AAC3E,SAASC,GAAG,QAAQ,kBAAkB;AAatC,MAAMC,cAAcD,IAAI;AAExB;;CAEC,GACD,OAAO,SAASE,MAAMC,OAA8B;IAClD,MAAM,EACJC,SAAS,EACTC,GAAG,EACHC,KAAK,EACLC,KAAK,EACLC,MAAM,EACNC,OAAO,EACPC,QAAQ,EACRC,QAAQ,EACRC,QAAQ,EACRC,QAAQ,EACRC,iBAAiBN,MAAM,EACxB,GAAGL;IAEJ,IAAIY;IACJ,IAAIJ,UAAU;QACZI,YAAY;IACd,OAAO,IAAIT,OAAO;QAChBS,YAAY;IACd,OAAO,IAAIH,YAAYC,UAAU;QAC/BE,YAAY;IACd;IAEA,OAAOlB,IACLI,YAAY;QACVI;QACAC;QACAC;QACAC;QACAG;QACAC;QACAH,SAASA,WAAW,CAACC;QACrBA,UAAU,CAACD,WAAWC;QACtB,oBAAoBD,WAAWC;QAC/B,kBAAkBE,YAAYL;QAC9B,mBAAmBK,YAAYE;IACjC,IACAf,SAAS;QACPgB;IACF,IACAX;AAEJ;AAEA;;;;;;;;CAQC,GACD,OAAO,MAAMY,sBAAQlB,WACnB,SAASkB,MAAMC,KAAK,EAAEC,GAAG;IACvB,MAAM,EACJb,GAAG,EACHC,KAAK,EACLC,KAAK,EACLC,MAAM,EACNC,OAAO,EACPC,QAAQ,EACRC,QAAQ,EACRC,QAAQ,EACRC,QAAQ,EACRC,iBAAiBN,MAAM,EACvBJ,SAAS,EACTe,QAAQ,EACR,GAAGC,WACJ,GAAGH;IAEJ,qBACE,KAACf;QACCgB,KAAKA;QACJ,GAAGE,SAAS;QACbhB,WAAWF,MAAM;YACfG;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAE;YACAD;YACAT;QACF;kBAECe;;AAGP,GACA"}

package/dist/form/Legend.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { type TypographyProps } from "../typography/Typography.js";
 /**
  * @since 6.0.0
@@ -10,8 +9,6 @@ export interface LegendProps extends TypographyProps {
     srOnly?: boolean;
 }
 /**
- * **Server Component**
- *
  * This should be used within a `Fieldset` to apply a label.
  *
  * @since 6.0.0

package/dist/form/Legend.js

@@ -4,8 +4,6 @@ import { forwardRef } from "react";
 import { cssUtils } from "../cssUtils.js";
 import { Typography } from "../typography/Typography.js";
 /**
- * **Server Component**
- *
  * This should be used within a `Fieldset` to apply a label.
  *
  * @since 6.0.0

package/dist/form/Legend.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/Legend.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { forwardRef } from \"react\";\nimport { cssUtils } from \"../cssUtils.js\";\nimport { Typography, type TypographyProps } from \"../typography/Typography.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface LegendProps extends TypographyProps {\n  /**\n   * @defaultValue `false`\n   */\n  srOnly?: boolean;\n}\n\n/**\n * **Server Component**\n *\n * This should be used within a `Fieldset` to apply a label.\n *\n * @since 6.0.0\n */\nexport const Legend = forwardRef<HTMLLegendElement, LegendProps>(\n  function Legend(props, ref) {\n    const { srOnly = false, className, children, ...remaining } = props;\n\n    return (\n      <Typography\n        {...remaining}\n        as=\"legend\"\n        ref={ref}\n        className={cnb(\"rmd-legend\", cssUtils({ srOnly }), className)}\n      >\n        {children}\n      </Typography>\n    );\n  }\n);\n"],"names":["cnb","forwardRef","cssUtils","Typography","Legend","props","ref","srOnly","className","children","remaining","as"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,UAAU,QAAQ,QAAQ;AACnC,SAASC,QAAQ,QAAQ,iBAAiB;AAC1C,SAASC,UAAU,QAA8B,8BAA8B;AAY/E;;;;;;CAMC,GACD,OAAO,MAAMC,uBAASH,WACpB,SAASG,OAAOC,KAAK,EAAEC,GAAG;IACxB,MAAM,EAAEC,SAAS,KAAK,EAAEC,SAAS,EAAEC,QAAQ,EAAE,GAAGC,WAAW,GAAGL;IAE9D,qBACE,KAACF;QACE,GAAGO,SAAS;QACbC,IAAG;QACHL,KAAKA;QACLE,WAAWR,IAAI,cAAcE,SAAS;YAAEK;QAAO,IAAIC;kBAElDC;;AAGP,GACA"}
+{"version":3,"sources":["../../src/form/Legend.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { forwardRef } from \"react\";\nimport { cssUtils } from \"../cssUtils.js\";\nimport { Typography, type TypographyProps } from \"../typography/Typography.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface LegendProps extends TypographyProps {\n  /**\n   * @defaultValue `false`\n   */\n  srOnly?: boolean;\n}\n\n/**\n * This should be used within a `Fieldset` to apply a label.\n *\n * @since 6.0.0\n */\nexport const Legend = forwardRef<HTMLLegendElement, LegendProps>(\n  function Legend(props, ref) {\n    const { srOnly = false, className, children, ...remaining } = props;\n\n    return (\n      <Typography\n        {...remaining}\n        as=\"legend\"\n        ref={ref}\n        className={cnb(\"rmd-legend\", cssUtils({ srOnly }), className)}\n      >\n        {children}\n      </Typography>\n    );\n  }\n);\n"],"names":["cnb","forwardRef","cssUtils","Typography","Legend","props","ref","srOnly","className","children","remaining","as"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,UAAU,QAAQ,QAAQ;AACnC,SAASC,QAAQ,QAAQ,iBAAiB;AAC1C,SAASC,UAAU,QAA8B,8BAA8B;AAY/E;;;;CAIC,GACD,OAAO,MAAMC,uBAASH,WACpB,SAASG,OAAOC,KAAK,EAAEC,GAAG;IACxB,MAAM,EAAEC,SAAS,KAAK,EAAEC,SAAS,EAAEC,QAAQ,EAAE,GAAGC,WAAW,GAAGL;IAE9D,qBACE,KAACF;QACE,GAAGO,SAAS;QACbC,IAAG;QACHL,KAAKA;QACLE,WAAWR,IAAI,cAAcE,SAAS;YAAEK;QAAO,IAAIC;kBAElDC;;AAGP,GACA"}

package/dist/form/Listbox.d.ts

@@ -0,0 +1,24 @@
+import { type Dispatch, type ReactElement, type ReactNode, type Ref } from "react";
+import { type MenuProps } from "../menu/Menu.js";
+import { type LabelRequiredForA11y } from "../types.js";
+import { type OptionSelectedIconProps } from "./Option.js";
+/**
+ * @since 6.0.0
+ * @internal
+ */
+export type ListboxValue = string | number | null | Record<string, unknown>;
+/**
+ * @since 6.0.0
+ * @internal
+ */
+export interface ListboxProps<Value extends ListboxValue> extends MenuProps, OptionSelectedIconProps {
+    nodeRef?: Ref<HTMLDivElement>;
+    value: Value | readonly NonNullable<ListboxValue>[];
+    setValue: Dispatch<NonNullable<Value>>;
+    children: ReactNode;
+}
+/**
+ * @since 6.0.0
+ * @internal
+ */
+export declare function Listbox<T extends ListboxValue>(props: LabelRequiredForA11y<ListboxProps<T>>): ReactElement;

package/dist/form/Listbox.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { Menu } from "../menu/Menu.js";
+import { ListboxProvider } from "./ListboxProvider.js";
+/**
+ * @since 6.0.0
+ * @internal
+ */ export function Listbox(props) {
+    const { value, setValue, children, nodeRef, selectedIconAfter, selectedIcon, unselectedIcon, disableSelectedIcon, ...remaining } = props;
+    const values = useMemo(()=>{
+        if (Array.isArray(value)) {
+            return new Set(value);
+        }
+        return new Set([
+            value
+        ]);
+    }, [
+        value
+    ]);
+    return /*#__PURE__*/ _jsx(ListboxProvider, {
+        value: useMemo(()=>({
+                selectOption: setValue,
+                isOptionSelected (option) {
+                    return values.has(option);
+                },
+                selectedIcon,
+                unselectedIcon,
+                selectedIconAfter,
+                disableSelectedIcon
+            }), [
+            disableSelectedIcon,
+            selectedIcon,
+            selectedIconAfter,
+            setValue,
+            unselectedIcon,
+            values
+        ]),
+        children: /*#__PURE__*/ _jsx(Menu, {
+            ...remaining,
+            ref: nodeRef,
+            children: children
+        })
+    });
+}
+
+//# sourceMappingURL=Listbox.js.map

package/dist/form/Listbox.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/form/Listbox.tsx"],"sourcesContent":["import {\n  type Dispatch,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n  useMemo,\n} from \"react\";\nimport { Menu, type MenuProps } from \"../menu/Menu.js\";\nimport { type LabelRequiredForA11y } from \"../types.js\";\nimport { ListboxProvider } from \"./ListboxProvider.js\";\nimport { type OptionSelectedIconProps } from \"./Option.js\";\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport type ListboxValue = string | number | null | Record<string, unknown>;\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport interface ListboxProps<Value extends ListboxValue>\n  extends MenuProps,\n    OptionSelectedIconProps {\n  nodeRef?: Ref<HTMLDivElement>;\n\n  value: Value | readonly NonNullable<ListboxValue>[];\n  setValue: Dispatch<NonNullable<Value>>;\n  children: ReactNode;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport function Listbox<T extends ListboxValue>(\n  props: LabelRequiredForA11y<ListboxProps<T>>\n): ReactElement {\n  const {\n    value,\n    setValue,\n    children,\n    nodeRef,\n    selectedIconAfter,\n    selectedIcon,\n    unselectedIcon,\n    disableSelectedIcon,\n    ...remaining\n  } = props;\n  const values = useMemo(() => {\n    if (Array.isArray(value)) {\n      return new Set(value);\n    }\n\n    return new Set([value]);\n  }, [value]);\n\n  return (\n    <ListboxProvider\n      value={useMemo(\n        () => ({\n          selectOption: setValue,\n          isOptionSelected(option) {\n            return values.has(option);\n          },\n          selectedIcon,\n          unselectedIcon,\n          selectedIconAfter,\n          disableSelectedIcon,\n        }),\n        [\n          disableSelectedIcon,\n          selectedIcon,\n          selectedIconAfter,\n          setValue,\n          unselectedIcon,\n          values,\n        ]\n      )}\n    >\n      <Menu {...remaining} ref={nodeRef}>\n        {children}\n      </Menu>\n    </ListboxProvider>\n  );\n}\n"],"names":["useMemo","Menu","ListboxProvider","Listbox","props","value","setValue","children","nodeRef","selectedIconAfter","selectedIcon","unselectedIcon","disableSelectedIcon","remaining","values","Array","isArray","Set","selectOption","isOptionSelected","option","has","ref"],"mappings":";AAAA,SAKEA,OAAO,QACF,QAAQ;AACf,SAASC,IAAI,QAAwB,kBAAkB;AAEvD,SAASC,eAAe,QAAQ,uBAAuB;AAuBvD;;;CAGC,GACD,OAAO,SAASC,QACdC,KAA4C;IAE5C,MAAM,EACJC,KAAK,EACLC,QAAQ,EACRC,QAAQ,EACRC,OAAO,EACPC,iBAAiB,EACjBC,YAAY,EACZC,cAAc,EACdC,mBAAmB,EACnB,GAAGC,WACJ,GAAGT;IACJ,MAAMU,SAASd,QAAQ;QACrB,IAAIe,MAAMC,OAAO,CAACX,QAAQ;YACxB,OAAO,IAAIY,IAAIZ;QACjB;QAEA,OAAO,IAAIY,IAAI;YAACZ;SAAM;IACxB,GAAG;QAACA;KAAM;IAEV,qBACE,KAACH;QACCG,OAAOL,QACL,IAAO,CAAA;gBACLkB,cAAcZ;gBACda,kBAAiBC,MAAM;oBACrB,OAAON,OAAOO,GAAG,CAACD;gBACpB;gBACAV;gBACAC;gBACAF;gBACAG;YACF,CAAA,GACA;YACEA;YACAF;YACAD;YACAH;YACAK;YACAG;SACD;kBAGH,cAAA,KAACb;YAAM,GAAGY,SAAS;YAAES,KAAKd;sBACvBD;;;AAIT"}

package/dist/form/ListboxProvider.d.ts

@@ -0,0 +1,21 @@
+import { type OptionSelectedIconProps } from "./Option.js";
+/**
+ * @internal
+ * @since 6.0.0
+ */
+export interface ListboxContext extends OptionSelectedIconProps {
+    selectOption(option: unknown): void;
+    isOptionSelected(option: unknown): boolean;
+}
+/**
+ * **Client Component**
+ *
+ * @internal
+ * @since 6.0.0
+ */
+export declare const ListboxProvider: import("react").Provider<ListboxContext | null>;
+/**
+ * @internal
+ * @since 6.0.0
+ */
+export declare function useListboxContext(): ListboxContext;

package/dist/form/{useListboxProvider.js → ListboxProvider.js}

@@ -18,4 +18,4 @@ const context = createContext(null);
     return value;
 }
 
-//# sourceMappingURL=useListboxProvider.js.map
+//# sourceMappingURL=ListboxProvider.js.map

package/dist/form/ListboxProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/form/ListboxProvider.ts"],"sourcesContent":["\"use client\";\nimport { createContext, useContext } from \"react\";\nimport { type OptionSelectedIconProps } from \"./Option.js\";\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport interface ListboxContext extends OptionSelectedIconProps {\n  // NOTE: These are not converted to arrow functions so the option can be\n  // inferred correctly\n  selectOption(option: unknown): void;\n  isOptionSelected(option: unknown): boolean;\n}\n\nconst context = createContext<ListboxContext | null>(null);\n\n/**\n * **Client Component**\n *\n * @internal\n * @since 6.0.0\n */\nexport const { Provider: ListboxProvider } = context;\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport function useListboxContext(): ListboxContext {\n  const value = useContext(context);\n  if (!value) {\n    throw new Error(\"The `ListboxProvider` must be a parent component\");\n  }\n\n  return value;\n}\n"],"names":["createContext","useContext","context","Provider","ListboxProvider","useListboxContext","value","Error"],"mappings":"AAAA;AACA,SAASA,aAAa,EAAEC,UAAU,QAAQ,QAAQ;AAclD,MAAMC,UAAUF,cAAqC;AAErD;;;;;CAKC,GACD,OAAO,MAAM,EAAEG,UAAUC,eAAe,EAAE,GAAGF,QAAQ;AAErD;;;CAGC,GACD,OAAO,SAASG;IACd,MAAMC,QAAQL,WAAWC;IACzB,IAAI,CAACI,OAAO;QACV,MAAM,IAAIC,MAAM;IAClB;IAEA,OAAOD;AACT"}

package/dist/form/MenuItemCheckbox.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { type MenuItemCheckboxProps } from "./MenuItemInputToggle.js";
 /**
  * **Client Component**

package/dist/form/MenuItemRadio.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 /**
  * **Client Component**
  *

package/dist/form/MenuItemSwitch.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { type MenuItemSwitchProps } from "./MenuItemInputToggle.js";
 /**
  * **Client Component**

package/dist/form/MenuItemTextField.js

@@ -15,7 +15,7 @@ import { TextField } from "./TextField.js";
  *
  * @since 5.0.0
  */ export const MenuItemTextField = /*#__PURE__*/ forwardRef(function MenuItemTextField(props, ref) {
-    const { liProps, onKeyDown, stretch = true, ...remaining } = props;
+    const { liProps, onKeyDown, ...remaining } = props;
     return /*#__PURE__*/ _jsx("li", {
         role: "none",
         ...liProps,
@@ -27,7 +27,6 @@ import { TextField } from "./TextField.js";
         children: /*#__PURE__*/ _jsx(TextField, {
             ...remaining,
             ref: ref,
-            stretch: stretch,
             onKeyDown: (event)=>{
                 onKeyDown?.(event);
                 switch(event.key){

package/dist/form/MenuItemTextField.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/MenuItemTextField.tsx"],"sourcesContent":["\"use client\";\nimport { cnb } from \"cnbuilder\";\nimport { forwardRef, type HTMLAttributes } from \"react\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { TextField, type TextFieldProps } from \"./TextField.js\";\n\n/**\n * @since 5.0.0\n */\nexport interface MenuItemTextFieldProps extends TextFieldProps {\n  /**\n   * Any additional props or a `ref` to apply to the surrounding `<li>` element.\n   */\n  liProps?: PropsWithRef<HTMLAttributes<HTMLLIElement>, HTMLLIElement>;\n\n  /** @defaultValue `true` */\n  stretch?: boolean;\n}\n\n/**\n * **Client Component**\n *\n * This is a wrapper for the `TextField` component that can be used within\n * `Menu`s by updating the `onKeyDown` and `onClick` behavior.\n *\n * Note: This is **not** the `TextFieldWithMessage` since the message part is\n * hard to style nicely within menus. You'd most likely want to use another menu\n * for displaying errors.\n *\n * @since 5.0.0\n */\nexport const MenuItemTextField = forwardRef<\n  HTMLInputElement,\n  MenuItemTextFieldProps\n>(function MenuItemTextField(props, ref) {\n  const { liProps, onKeyDown, stretch = true, ...remaining } = props;\n  return (\n    <li\n      role=\"none\"\n      {...liProps}\n      onClick={(event) => {\n        liProps?.onClick?.(event);\n        event.stopPropagation();\n      }}\n      className={cnb(\"rmd-list-item rmd-menu-item\", liProps?.className)}\n    >\n      <TextField\n        {...remaining}\n        ref={ref}\n        stretch={stretch}\n        onKeyDown={(event) => {\n          onKeyDown?.(event);\n          switch (event.key) {\n            case \"Tab\":\n            case \"Escape\":\n            case \" \":\n              // do default behavior\n              break;\n            default:\n              if (event.key.length === 1 || event.currentTarget.value) {\n                event.stopPropagation();\n              }\n          }\n        }}\n      />\n    </li>\n  );\n});\n"],"names":["cnb","forwardRef","TextField","MenuItemTextField","props","ref","liProps","onKeyDown","stretch","remaining","li","role","onClick","event","stopPropagation","className","key","length","currentTarget","value"],"mappings":"AAAA;;AACA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,UAAU,QAA6B,QAAQ;AAExD,SAASC,SAAS,QAA6B,iBAAiB;AAehE;;;;;;;;;;;CAWC,GACD,OAAO,MAAMC,kCAAoBF,WAG/B,SAASE,kBAAkBC,KAAK,EAAEC,GAAG;IACrC,MAAM,EAAEC,OAAO,EAAEC,SAAS,EAAEC,UAAU,IAAI,EAAE,GAAGC,WAAW,GAAGL;IAC7D,qBACE,KAACM;QACCC,MAAK;QACJ,GAAGL,OAAO;QACXM,SAAS,CAACC;YACRP,SAASM,UAAUC;YACnBA,MAAMC,eAAe;QACvB;QACAC,WAAWf,IAAI,+BAA+BM,SAASS;kBAEvD,cAAA,KAACb;YACE,GAAGO,SAAS;YACbJ,KAAKA;YACLG,SAASA;YACTD,WAAW,CAACM;gBACVN,YAAYM;gBACZ,OAAQA,MAAMG,GAAG;oBACf,KAAK;oBACL,KAAK;oBACL,KAAK;wBAEH;oBACF;wBACE,IAAIH,MAAMG,GAAG,CAACC,MAAM,KAAK,KAAKJ,MAAMK,aAAa,CAACC,KAAK,EAAE;4BACvDN,MAAMC,eAAe;wBACvB;gBACJ;YACF;;;AAIR,GAAG"}
+{"version":3,"sources":["../../src/form/MenuItemTextField.tsx"],"sourcesContent":["\"use client\";\nimport { cnb } from \"cnbuilder\";\nimport { forwardRef, type HTMLAttributes } from \"react\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { TextField, type TextFieldProps } from \"./TextField.js\";\n\n/**\n * @since 5.0.0\n */\nexport interface MenuItemTextFieldProps extends TextFieldProps {\n  /**\n   * Any additional props or a `ref` to apply to the surrounding `<li>` element.\n   */\n  liProps?: PropsWithRef<HTMLAttributes<HTMLLIElement>, HTMLLIElement>;\n\n  /** @defaultValue `true` */\n  stretch?: boolean;\n}\n\n/**\n * **Client Component**\n *\n * This is a wrapper for the `TextField` component that can be used within\n * `Menu`s by updating the `onKeyDown` and `onClick` behavior.\n *\n * Note: This is **not** the `TextFieldWithMessage` since the message part is\n * hard to style nicely within menus. You'd most likely want to use another menu\n * for displaying errors.\n *\n * @since 5.0.0\n */\nexport const MenuItemTextField = forwardRef<\n  HTMLInputElement,\n  MenuItemTextFieldProps\n>(function MenuItemTextField(props, ref) {\n  const { liProps, onKeyDown, ...remaining } = props;\n  return (\n    <li\n      role=\"none\"\n      {...liProps}\n      onClick={(event) => {\n        liProps?.onClick?.(event);\n        event.stopPropagation();\n      }}\n      className={cnb(\"rmd-list-item rmd-menu-item\", liProps?.className)}\n    >\n      <TextField\n        {...remaining}\n        ref={ref}\n        onKeyDown={(event) => {\n          onKeyDown?.(event);\n          switch (event.key) {\n            case \"Tab\":\n            case \"Escape\":\n            case \" \":\n              // do default behavior\n              break;\n            default:\n              if (event.key.length === 1 || event.currentTarget.value) {\n                event.stopPropagation();\n              }\n          }\n        }}\n      />\n    </li>\n  );\n});\n"],"names":["cnb","forwardRef","TextField","MenuItemTextField","props","ref","liProps","onKeyDown","remaining","li","role","onClick","event","stopPropagation","className","key","length","currentTarget","value"],"mappings":"AAAA;;AACA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,UAAU,QAA6B,QAAQ;AAExD,SAASC,SAAS,QAA6B,iBAAiB;AAehE;;;;;;;;;;;CAWC,GACD,OAAO,MAAMC,kCAAoBF,WAG/B,SAASE,kBAAkBC,KAAK,EAAEC,GAAG;IACrC,MAAM,EAAEC,OAAO,EAAEC,SAAS,EAAE,GAAGC,WAAW,GAAGJ;IAC7C,qBACE,KAACK;QACCC,MAAK;QACJ,GAAGJ,OAAO;QACXK,SAAS,CAACC;YACRN,SAASK,UAAUC;YACnBA,MAAMC,eAAe;QACvB;QACAC,WAAWd,IAAI,+BAA+BM,SAASQ;kBAEvD,cAAA,KAACZ;YACE,GAAGM,SAAS;YACbH,KAAKA;YACLE,WAAW,CAACK;gBACVL,YAAYK;gBACZ,OAAQA,MAAMG,GAAG;oBACf,KAAK;oBACL,KAAK;oBACL,KAAK;wBAEH;oBACF;wBACE,IAAIH,MAAMG,GAAG,CAACC,MAAM,KAAK,KAAKJ,MAAMK,aAAa,CAACC,KAAK,EAAE;4BACvDN,MAAMC,eAAe;wBACvB;gBACJ;YACF;;;AAIR,GAAG"}

package/dist/form/NativeSelect.d.ts

@@ -40,8 +40,6 @@ export interface NativeSelectProps extends Omit<SelectHTMLAttributes<HTMLSelectE
     containerProps?: PropsWithRef<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
 }
 /**
- * **Server Component**
- *
  * This component is a wrapper for the native `<select>` field that applies the
  * same theming as `TextField` and `TextArea` components. This component might
  * not be used much since the `Select` offers more styling options.

package/dist/form/NativeSelect.js

@@ -8,8 +8,6 @@ import { TextFieldContainer } from "./TextFieldContainer.js";
 import { getFormConfig } from "./formConfig.js";
 import { nativeSelect, nativeSelectContainer } from "./nativeSelectStyles.js";
 /**
- * **Server Component**
- *
  * This component is a wrapper for the native `<select>` field that applies the
  * same theming as `TextField` and `TextArea` components. This component might
  * not be used much since the `Select` offers more styling options.
@@ -52,8 +50,8 @@ import { nativeSelect, nativeSelectContainer } from "./nativeSelectStyles.js";
  * }
  * ```
  */ export const NativeSelect = /*#__PURE__*/ forwardRef(function NativeSelect(props, ref) {
-    const { id: propId, style, className, icon: propIcon, label, labelProps, labelStyle, labelClassName, selectStyle, selectClassName, autoCompleteValue, autoComplete = autoCompleteValue, name = autoCompleteValue, dense = false, error = false, active = false, inline = false, stretch = false, leftAddon, rightAddon: propRightAddon, leftAddonProps, rightAddonProps, disableLeftAddonStyles = false, disableRightAddonStyles = false, theme: propTheme, underlineDirection: propUnderlineDirection, messageProps, messageContainerProps, containerProps, children, ...remaining } = props;
-    const { disabled = false, readOnly = false, multiple = false } = props;
+    const { id: propId, style, className, icon: propIcon, label, labelProps, labelStyle, labelClassName, selectStyle, selectClassName, autoCompleteValue, autoComplete = autoCompleteValue, name = autoCompleteValue, dense, error, active, inline, leftAddon, rightAddon: propRightAddon, leftAddonProps, rightAddonProps, disableLeftAddonStyles, disableRightAddonStyles, theme: propTheme, underlineDirection: propUnderlineDirection, messageProps, messageContainerProps, containerProps, children, ...remaining } = props;
+    const { disabled, readOnly, multiple } = props;
     const id = useEnsuredId(propId, "select");
     const theme = getFormConfig("theme", propTheme);
     const underlineDirection = getFormConfig("underlineDirection", propUnderlineDirection);
@@ -65,7 +63,11 @@ import { nativeSelect, nativeSelectContainer } from "./nativeSelectStyles.js";
     }
     return /*#__PURE__*/ _jsx(FormMessageContainer, {
         ...messageContainerProps,
-        messageProps: messageProps,
+        messageProps: messageProps && {
+            error,
+            theme,
+            ...messageProps
+        },
         children: /*#__PURE__*/ _jsxs(TextFieldContainer, {
             ...containerProps,
             style: style,
@@ -81,7 +83,6 @@ import { nativeSelect, nativeSelectContainer } from "./nativeSelectStyles.js";
             dense: dense,
             inline: inline,
             active: active,
-            stretch: stretch,
             readOnly: readOnly,
             disabled: disabled,
             leftAddon: leftAddon,

package/dist/form/NativeSelect.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/NativeSelect.tsx"],"sourcesContent":["import {\n  forwardRef,\n  type CSSProperties,\n  type HTMLAttributes,\n  type ReactNode,\n  type SelectHTMLAttributes,\n} from \"react\";\nimport { getIcon } from \"../icon/iconConfig.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { FormMessageContainer } from \"./FormMessageContainer.js\";\nimport { Label } from \"./Label.js\";\nimport { TextFieldContainer } from \"./TextFieldContainer.js\";\nimport { getFormConfig } from \"./formConfig.js\";\nimport { nativeSelect, nativeSelectContainer } from \"./nativeSelectStyles.js\";\nimport {\n  type FormFieldOptions,\n  type UserAgentAutocompleteProps,\n} from \"./types.js\";\n\n/**\n * @since 6.0.0 Added support for {@link UserAgentAutocompleteProps}\n */\nexport interface NativeSelectProps\n  extends Omit<SelectHTMLAttributes<HTMLSelectElement>, \"autoComplete\">,\n    UserAgentAutocompleteProps,\n    FormFieldOptions {\n  /**\n   * A custom dropdown icon to use instead of the browser's default select\n   * dropdown icon.\n   *\n   * Set this to `null` if the browser's default icon should be used instead.\n   *\n   * @defaultValue `getIcon(\"dropdown\")`\n   */\n  icon?: ReactNode;\n\n  /**\n   * This applies custom inline styles to the `<select>` element since the\n   * `style` prop is applied to the container element instead.\n   */\n  selectStyle?: CSSProperties;\n\n  /**\n   * This applies custom className to the `<select>` element since the\n   * `className` prop is applied to the container element instead.\n   */\n  selectClassName?: string;\n\n  /**\n   * This should be a list of `<option>` elements for specific values within the\n   * `<select>`.\n   *\n   * Check out the {@link NativeSelect} for examples around using \"placeholder\"\n   * text and requiring a value to be selected.\n   */\n  children: ReactNode;\n\n  /**\n   * Optional props to provide to the {@link TextFieldContainer} component.\n   * There probably isn't any real use for this prop other than if you need to\n   * add a `ref` for some DOM behavior.\n   */\n  containerProps?: PropsWithRef<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;\n}\n\n/**\n * **Server Component**\n *\n * This component is a wrapper for the native `<select>` field that applies the\n * same theming as `TextField` and `TextArea` components. This component might\n * not be used much since the `Select` offers more styling options.\n *\n * @example Simple Example\n * ```tsx\n * <NativeSelect label=\"Label\">\n *   <option value=\"a\">Value 1</option>\n *   <option value=\"b\">Value 2</option>\n *   <option value=\"c\">Value 3</option>\n *   <option value=\"d\">Value 4</option>\n * </NativeSelect>\n * ```\n *\n * @example Required Value Example\n * ```tsx\n * function Example(): ReactElement {\n *   // using `defaultValue=\"\"` makes it so the first option selected by default\n *   // and considered an \"invalid\" value since it is `disabled`\n *   //\n *   // a `name` must be set with `required` so that the form validation will\n *   // fire if the value is still the empty string when the form is submitted\n *   //\n *   // the first `<option>` is kind of like placeholder text since it doesn't\n *   // have a value and is disabled by default\n *\n *   return (\n *     <NativeSelect\n *       label=\"State\"\n *       name=\"state\"\n *       required\n *       defaultValue=\"\"\n *     >\n *       <option value=\"\" disabled>Choose a state</option>\n *       {states.map(({ name, code }) => (\n *         <option key={code} value={code}>{name}</option>\n *       ))}\n *     </NativeSelect>\n *   );\n * }\n * ```\n */\nexport const NativeSelect = forwardRef<HTMLSelectElement, NativeSelectProps>(\n  function NativeSelect(props, ref) {\n    const {\n      id: propId,\n      style,\n      className,\n      icon: propIcon,\n      label,\n      labelProps,\n      labelStyle,\n      labelClassName,\n      selectStyle,\n      selectClassName,\n      autoCompleteValue,\n      autoComplete = autoCompleteValue,\n      name = autoCompleteValue,\n      dense = false,\n      error = false,\n      active = false,\n      inline = false,\n      stretch = false,\n      leftAddon,\n      rightAddon: propRightAddon,\n      leftAddonProps,\n      rightAddonProps,\n      disableLeftAddonStyles = false,\n      disableRightAddonStyles = false,\n      theme: propTheme,\n      underlineDirection: propUnderlineDirection,\n      messageProps,\n      messageContainerProps,\n      containerProps,\n      children,\n      ...remaining\n    } = props;\n    const { disabled = false, readOnly = false, multiple = false } = props;\n    const id = useEnsuredId(propId, \"select\");\n    const theme = getFormConfig(\"theme\", propTheme);\n    const underlineDirection = getFormConfig(\n      \"underlineDirection\",\n      propUnderlineDirection\n    );\n    const icon = getIcon(\"dropdown\", propIcon);\n    const underlined = theme === \"underline\" || theme === \"filled\";\n\n    let rightAddon = propRightAddon;\n    if (typeof propRightAddon === \"undefined\" && !multiple) {\n      rightAddon = icon;\n    }\n\n    return (\n      <FormMessageContainer\n        {...messageContainerProps}\n        messageProps={messageProps}\n      >\n        <TextFieldContainer\n          {...containerProps}\n          style={style}\n          className={nativeSelectContainer({\n            label: !!label,\n            multiple,\n            underlined,\n            className,\n          })}\n          theme={theme}\n          label={!!label}\n          error={error}\n          dense={dense}\n          inline={inline}\n          active={active}\n          stretch={stretch}\n          readOnly={readOnly}\n          disabled={disabled}\n          leftAddon={leftAddon}\n          leftAddonProps={leftAddonProps}\n          rightAddon={rightAddon}\n          rightAddonProps={rightAddonProps}\n          underlineDirection={underlineDirection}\n          disableLeftAddonStyles={disableLeftAddonStyles}\n          disableRightAddonStyles={disableRightAddonStyles}\n        >\n          <select\n            {...remaining}\n            id={id}\n            ref={ref}\n            autoComplete={autoComplete}\n            name={name}\n            disabled={disabled}\n            style={selectStyle}\n            className={nativeSelect({\n              icon: !!icon,\n              className: selectClassName,\n            })}\n          >\n            {children}\n          </select>\n          {label && (\n            <Label\n              {...labelProps}\n              htmlFor={id}\n              style={labelProps?.style ?? labelStyle}\n              className={labelProps?.className ?? labelClassName}\n              floating\n              dense={dense}\n              error={error}\n              active={active}\n              disabled={disabled}\n            >\n              {label}\n            </Label>\n          )}\n        </TextFieldContainer>\n      </FormMessageContainer>\n    );\n  }\n);\n"],"names":["forwardRef","getIcon","useEnsuredId","FormMessageContainer","Label","TextFieldContainer","getFormConfig","nativeSelect","nativeSelectContainer","NativeSelect","props","ref","id","propId","style","className","icon","propIcon","label","labelProps","labelStyle","labelClassName","selectStyle","selectClassName","autoCompleteValue","autoComplete","name","dense","error","active","inline","stretch","leftAddon","rightAddon","propRightAddon","leftAddonProps","rightAddonProps","disableLeftAddonStyles","disableRightAddonStyles","theme","propTheme","underlineDirection","propUnderlineDirection","messageProps","messageContainerProps","containerProps","children","remaining","disabled","readOnly","multiple","underlined","select","htmlFor","floating"],"mappings":";AAAA,SACEA,UAAU,QAKL,QAAQ;AACf,SAASC,OAAO,QAAQ,wBAAwB;AAEhD,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,oBAAoB,QAAQ,4BAA4B;AACjE,SAASC,KAAK,QAAQ,aAAa;AACnC,SAASC,kBAAkB,QAAQ,0BAA0B;AAC7D,SAASC,aAAa,QAAQ,kBAAkB;AAChD,SAASC,YAAY,EAAEC,qBAAqB,QAAQ,0BAA0B;AAoD9E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4CC,GACD,OAAO,MAAMC,6BAAeT,WAC1B,SAASS,aAAaC,KAAK,EAAEC,GAAG;IAC9B,MAAM,EACJC,IAAIC,MAAM,EACVC,KAAK,EACLC,SAAS,EACTC,MAAMC,QAAQ,EACdC,KAAK,EACLC,UAAU,EACVC,UAAU,EACVC,cAAc,EACdC,WAAW,EACXC,eAAe,EACfC,iBAAiB,EACjBC,eAAeD,iBAAiB,EAChCE,OAAOF,iBAAiB,EACxBG,QAAQ,KAAK,EACbC,QAAQ,KAAK,EACbC,SAAS,KAAK,EACdC,SAAS,KAAK,EACdC,UAAU,KAAK,EACfC,SAAS,EACTC,YAAYC,cAAc,EAC1BC,cAAc,EACdC,eAAe,EACfC,yBAAyB,KAAK,EAC9BC,0BAA0B,KAAK,EAC/BC,OAAOC,SAAS,EAChBC,oBAAoBC,sBAAsB,EAC1CC,YAAY,EACZC,qBAAqB,EACrBC,cAAc,EACdC,QAAQ,EACR,GAAGC,WACJ,GAAGrC;IACJ,MAAM,EAAEsC,WAAW,KAAK,EAAEC,WAAW,KAAK,EAAEC,WAAW,KAAK,EAAE,GAAGxC;IACjE,MAAME,KAAKV,aAAaW,QAAQ;IAChC,MAAM0B,QAAQjC,cAAc,SAASkC;IACrC,MAAMC,qBAAqBnC,cACzB,sBACAoC;IAEF,MAAM1B,OAAOf,QAAQ,YAAYgB;IACjC,MAAMkC,aAAaZ,UAAU,eAAeA,UAAU;IAEtD,IAAIN,aAAaC;IACjB,IAAI,OAAOA,mBAAmB,eAAe,CAACgB,UAAU;QACtDjB,aAAajB;IACf;IAEA,qBACE,KAACb;QACE,GAAGyC,qBAAqB;QACzBD,cAAcA;kBAEd,cAAA,MAACtC;YACE,GAAGwC,cAAc;YAClB/B,OAAOA;YACPC,WAAWP,sBAAsB;gBAC/BU,OAAO,CAAC,CAACA;gBACTgC;gBACAC;gBACApC;YACF;YACAwB,OAAOA;YACPrB,OAAO,CAAC,CAACA;YACTU,OAAOA;YACPD,OAAOA;YACPG,QAAQA;YACRD,QAAQA;YACRE,SAASA;YACTkB,UAAUA;YACVD,UAAUA;YACVhB,WAAWA;YACXG,gBAAgBA;YAChBF,YAAYA;YACZG,iBAAiBA;YACjBK,oBAAoBA;YACpBJ,wBAAwBA;YACxBC,yBAAyBA;;8BAEzB,KAACc;oBACE,GAAGL,SAAS;oBACbnC,IAAIA;oBACJD,KAAKA;oBACLc,cAAcA;oBACdC,MAAMA;oBACNsB,UAAUA;oBACVlC,OAAOQ;oBACPP,WAAWR,aAAa;wBACtBS,MAAM,CAAC,CAACA;wBACRD,WAAWQ;oBACb;8BAECuB;;gBAEF5B,uBACC,KAACd;oBACE,GAAGe,UAAU;oBACdkC,SAASzC;oBACTE,OAAOK,YAAYL,SAASM;oBAC5BL,WAAWI,YAAYJ,aAAaM;oBACpCiC,QAAQ;oBACR3B,OAAOA;oBACPC,OAAOA;oBACPC,QAAQA;oBACRmB,UAAUA;8BAET9B;;;;;AAMb,GACA"}
+{"version":3,"sources":["../../src/form/NativeSelect.tsx"],"sourcesContent":["import {\n  forwardRef,\n  type CSSProperties,\n  type HTMLAttributes,\n  type ReactNode,\n  type SelectHTMLAttributes,\n} from \"react\";\nimport { getIcon } from \"../icon/iconConfig.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { FormMessageContainer } from \"./FormMessageContainer.js\";\nimport { Label } from \"./Label.js\";\nimport { TextFieldContainer } from \"./TextFieldContainer.js\";\nimport { getFormConfig } from \"./formConfig.js\";\nimport { nativeSelect, nativeSelectContainer } from \"./nativeSelectStyles.js\";\nimport {\n  type FormFieldOptions,\n  type UserAgentAutocompleteProps,\n} from \"./types.js\";\n\n/**\n * @since 6.0.0 Added support for {@link UserAgentAutocompleteProps}\n */\nexport interface NativeSelectProps\n  extends Omit<SelectHTMLAttributes<HTMLSelectElement>, \"autoComplete\">,\n    UserAgentAutocompleteProps,\n    FormFieldOptions {\n  /**\n   * A custom dropdown icon to use instead of the browser's default select\n   * dropdown icon.\n   *\n   * Set this to `null` if the browser's default icon should be used instead.\n   *\n   * @defaultValue `getIcon(\"dropdown\")`\n   */\n  icon?: ReactNode;\n\n  /**\n   * This applies custom inline styles to the `<select>` element since the\n   * `style` prop is applied to the container element instead.\n   */\n  selectStyle?: CSSProperties;\n\n  /**\n   * This applies custom className to the `<select>` element since the\n   * `className` prop is applied to the container element instead.\n   */\n  selectClassName?: string;\n\n  /**\n   * This should be a list of `<option>` elements for specific values within the\n   * `<select>`.\n   *\n   * Check out the {@link NativeSelect} for examples around using \"placeholder\"\n   * text and requiring a value to be selected.\n   */\n  children: ReactNode;\n\n  /**\n   * Optional props to provide to the {@link TextFieldContainer} component.\n   * There probably isn't any real use for this prop other than if you need to\n   * add a `ref` for some DOM behavior.\n   */\n  containerProps?: PropsWithRef<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;\n}\n\n/**\n * This component is a wrapper for the native `<select>` field that applies the\n * same theming as `TextField` and `TextArea` components. This component might\n * not be used much since the `Select` offers more styling options.\n *\n * @example Simple Example\n * ```tsx\n * <NativeSelect label=\"Label\">\n *   <option value=\"a\">Value 1</option>\n *   <option value=\"b\">Value 2</option>\n *   <option value=\"c\">Value 3</option>\n *   <option value=\"d\">Value 4</option>\n * </NativeSelect>\n * ```\n *\n * @example Required Value Example\n * ```tsx\n * function Example(): ReactElement {\n *   // using `defaultValue=\"\"` makes it so the first option selected by default\n *   // and considered an \"invalid\" value since it is `disabled`\n *   //\n *   // a `name` must be set with `required` so that the form validation will\n *   // fire if the value is still the empty string when the form is submitted\n *   //\n *   // the first `<option>` is kind of like placeholder text since it doesn't\n *   // have a value and is disabled by default\n *\n *   return (\n *     <NativeSelect\n *       label=\"State\"\n *       name=\"state\"\n *       required\n *       defaultValue=\"\"\n *     >\n *       <option value=\"\" disabled>Choose a state</option>\n *       {states.map(({ name, code }) => (\n *         <option key={code} value={code}>{name}</option>\n *       ))}\n *     </NativeSelect>\n *   );\n * }\n * ```\n */\nexport const NativeSelect = forwardRef<HTMLSelectElement, NativeSelectProps>(\n  function NativeSelect(props, ref) {\n    const {\n      id: propId,\n      style,\n      className,\n      icon: propIcon,\n      label,\n      labelProps,\n      labelStyle,\n      labelClassName,\n      selectStyle,\n      selectClassName,\n      autoCompleteValue,\n      autoComplete = autoCompleteValue,\n      name = autoCompleteValue,\n      dense,\n      error,\n      active,\n      inline,\n      leftAddon,\n      rightAddon: propRightAddon,\n      leftAddonProps,\n      rightAddonProps,\n      disableLeftAddonStyles,\n      disableRightAddonStyles,\n      theme: propTheme,\n      underlineDirection: propUnderlineDirection,\n      messageProps,\n      messageContainerProps,\n      containerProps,\n      children,\n      ...remaining\n    } = props;\n    const { disabled, readOnly, multiple } = props;\n    const id = useEnsuredId(propId, \"select\");\n    const theme = getFormConfig(\"theme\", propTheme);\n    const underlineDirection = getFormConfig(\n      \"underlineDirection\",\n      propUnderlineDirection\n    );\n    const icon = getIcon(\"dropdown\", propIcon);\n    const underlined = theme === \"underline\" || theme === \"filled\";\n\n    let rightAddon = propRightAddon;\n    if (typeof propRightAddon === \"undefined\" && !multiple) {\n      rightAddon = icon;\n    }\n\n    return (\n      <FormMessageContainer\n        {...messageContainerProps}\n        messageProps={\n          messageProps && {\n            error,\n            theme,\n            ...messageProps,\n          }\n        }\n      >\n        <TextFieldContainer\n          {...containerProps}\n          style={style}\n          className={nativeSelectContainer({\n            label: !!label,\n            multiple,\n            underlined,\n            className,\n          })}\n          theme={theme}\n          label={!!label}\n          error={error}\n          dense={dense}\n          inline={inline}\n          active={active}\n          readOnly={readOnly}\n          disabled={disabled}\n          leftAddon={leftAddon}\n          leftAddonProps={leftAddonProps}\n          rightAddon={rightAddon}\n          rightAddonProps={rightAddonProps}\n          underlineDirection={underlineDirection}\n          disableLeftAddonStyles={disableLeftAddonStyles}\n          disableRightAddonStyles={disableRightAddonStyles}\n        >\n          <select\n            {...remaining}\n            id={id}\n            ref={ref}\n            autoComplete={autoComplete}\n            name={name}\n            disabled={disabled}\n            style={selectStyle}\n            className={nativeSelect({\n              icon: !!icon,\n              className: selectClassName,\n            })}\n          >\n            {children}\n          </select>\n          {label && (\n            <Label\n              {...labelProps}\n              htmlFor={id}\n              style={labelProps?.style ?? labelStyle}\n              className={labelProps?.className ?? labelClassName}\n              floating\n              dense={dense}\n              error={error}\n              active={active}\n              disabled={disabled}\n            >\n              {label}\n            </Label>\n          )}\n        </TextFieldContainer>\n      </FormMessageContainer>\n    );\n  }\n);\n"],"names":["forwardRef","getIcon","useEnsuredId","FormMessageContainer","Label","TextFieldContainer","getFormConfig","nativeSelect","nativeSelectContainer","NativeSelect","props","ref","id","propId","style","className","icon","propIcon","label","labelProps","labelStyle","labelClassName","selectStyle","selectClassName","autoCompleteValue","autoComplete","name","dense","error","active","inline","leftAddon","rightAddon","propRightAddon","leftAddonProps","rightAddonProps","disableLeftAddonStyles","disableRightAddonStyles","theme","propTheme","underlineDirection","propUnderlineDirection","messageProps","messageContainerProps","containerProps","children","remaining","disabled","readOnly","multiple","underlined","select","htmlFor","floating"],"mappings":";AAAA,SACEA,UAAU,QAKL,QAAQ;AACf,SAASC,OAAO,QAAQ,wBAAwB;AAEhD,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,oBAAoB,QAAQ,4BAA4B;AACjE,SAASC,KAAK,QAAQ,aAAa;AACnC,SAASC,kBAAkB,QAAQ,0BAA0B;AAC7D,SAASC,aAAa,QAAQ,kBAAkB;AAChD,SAASC,YAAY,EAAEC,qBAAqB,QAAQ,0BAA0B;AAoD9E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0CC,GACD,OAAO,MAAMC,6BAAeT,WAC1B,SAASS,aAAaC,KAAK,EAAEC,GAAG;IAC9B,MAAM,EACJC,IAAIC,MAAM,EACVC,KAAK,EACLC,SAAS,EACTC,MAAMC,QAAQ,EACdC,KAAK,EACLC,UAAU,EACVC,UAAU,EACVC,cAAc,EACdC,WAAW,EACXC,eAAe,EACfC,iBAAiB,EACjBC,eAAeD,iBAAiB,EAChCE,OAAOF,iBAAiB,EACxBG,KAAK,EACLC,KAAK,EACLC,MAAM,EACNC,MAAM,EACNC,SAAS,EACTC,YAAYC,cAAc,EAC1BC,cAAc,EACdC,eAAe,EACfC,sBAAsB,EACtBC,uBAAuB,EACvBC,OAAOC,SAAS,EAChBC,oBAAoBC,sBAAsB,EAC1CC,YAAY,EACZC,qBAAqB,EACrBC,cAAc,EACdC,QAAQ,EACR,GAAGC,WACJ,GAAGpC;IACJ,MAAM,EAAEqC,QAAQ,EAAEC,QAAQ,EAAEC,QAAQ,EAAE,GAAGvC;IACzC,MAAME,KAAKV,aAAaW,QAAQ;IAChC,MAAMyB,QAAQhC,cAAc,SAASiC;IACrC,MAAMC,qBAAqBlC,cACzB,sBACAmC;IAEF,MAAMzB,OAAOf,QAAQ,YAAYgB;IACjC,MAAMiC,aAAaZ,UAAU,eAAeA,UAAU;IAEtD,IAAIN,aAAaC;IACjB,IAAI,OAAOA,mBAAmB,eAAe,CAACgB,UAAU;QACtDjB,aAAahB;IACf;IAEA,qBACE,KAACb;QACE,GAAGwC,qBAAqB;QACzBD,cACEA,gBAAgB;YACdd;YACAU;YACA,GAAGI,YAAY;QACjB;kBAGF,cAAA,MAACrC;YACE,GAAGuC,cAAc;YAClB9B,OAAOA;YACPC,WAAWP,sBAAsB;gBAC/BU,OAAO,CAAC,CAACA;gBACT+B;gBACAC;gBACAnC;YACF;YACAuB,OAAOA;YACPpB,OAAO,CAAC,CAACA;YACTU,OAAOA;YACPD,OAAOA;YACPG,QAAQA;YACRD,QAAQA;YACRmB,UAAUA;YACVD,UAAUA;YACVhB,WAAWA;YACXG,gBAAgBA;YAChBF,YAAYA;YACZG,iBAAiBA;YACjBK,oBAAoBA;YACpBJ,wBAAwBA;YACxBC,yBAAyBA;;8BAEzB,KAACc;oBACE,GAAGL,SAAS;oBACblC,IAAIA;oBACJD,KAAKA;oBACLc,cAAcA;oBACdC,MAAMA;oBACNqB,UAAUA;oBACVjC,OAAOQ;oBACPP,WAAWR,aAAa;wBACtBS,MAAM,CAAC,CAACA;wBACRD,WAAWQ;oBACb;8BAECsB;;gBAEF3B,uBACC,KAACd;oBACE,GAAGe,UAAU;oBACdiC,SAASxC;oBACTE,OAAOK,YAAYL,SAASM;oBAC5BL,WAAWI,YAAYJ,aAAaM;oBACpCgC,QAAQ;oBACR1B,OAAOA;oBACPC,OAAOA;oBACPC,QAAQA;oBACRkB,UAAUA;8BAET7B;;;;;AAMb,GACA"}

package/dist/form/Option.d.ts

@@ -6,19 +6,13 @@ import { type MenuItemProps } from "../menu/MenuItem.js";
  * unselected options have the same alignment.
  *
  * @since 6.0.0
+ * @defaultValue `<span className="rmd-icon rmd-icon--svg />`
  */
 export declare const DEFAULT_OPTION_UNSELECTED_ICON: import("react").JSX.Element;
 /**
- * @since 6.0.0 removed the `selected` and `focused` props.
- * @since 6.0.0 Added the `value`, `selectedIcon`, `unselectedIcon`,
- * `selectedIconAfter`, and `iconSpacingProps` props.
+ * @since 6.0.0
  */
-export interface OptionProps extends MenuItemProps {
-    /**
-     * @defaultValue `"option"`
-     */
-    role?: string;
-    value: string | number;
+export interface OptionSelectedIconProps {
     /**
      * @defaultValue `getIcon("selected")`
      */
@@ -35,6 +29,51 @@ export interface OptionProps extends MenuItemProps {
      * @defaultValue `false`
      */
     selectedIconAfter?: boolean;
+    /**
+     * Set this to `true` to remove selected icon behavior from the `Option`.
+     *
+     * @defaultValue `false`
+     */
+    disableSelectedIcon?: boolean;
+}
+/**
+ * @since 6.0.0 removed the `selected` and `focused` props.
+ * @since 6.0.0 Added the `value`, `selectedIcon`, `unselectedIcon`,
+ * `selectedIconAfter`, and `iconSpacingProps` props.
+ */
+export interface OptionProps extends MenuItemProps, OptionSelectedIconProps {
+    /**
+     * @defaultValue `"option"`
+     */
+    role?: string;
+    value: string | number | Record<string, unknown>;
+    /**
+     * An optional className to apply only while the current option is selected to
+     * override any global default selected styles. It is recommended to update
+     * the `react-md.$form-option-selected-styles` map first to change selected
+     * style globally and then any one-off customizations through this prop.
+     *
+     * @example Global Change
+     * ```scss
+     * @use "@react-md/core" with (
+     *   // these are the defaults
+     *   $form-option-selected-styles: (
+     *     --rmd-icon-color: currentcolor,
+     *     background-color: colors.$blue-900,
+     *     color: colors.$white,
+     *   ),
+     *
+     *   // so if you wanted to remove the styles globally
+     *   $form-option-selected-styles: (),
+     * );
+     * ```
+     *
+     * This really results in something like:
+     * ```ts
+     * className="rmd-list-item ... rmd-menu-item ... rmd-option rmd-option--selected ${selectedClassName}"
+     * ```
+     */
+    selectedClassName?: string;
     /**
      * Since the `selectedIcon`/`unselectedIcon` are rendered as
      * `leftAddon`/`rightAddon`, the provided `leftAddon`/`rightAddon` will be
@@ -66,6 +105,6 @@ export interface OptionProps extends MenuItemProps {
  *
  * @since 6.0.0 removed the `selected` and `focused` props.
  * @since 6.0.0 Added the `value`, `selectedIcon`, `unselectedIcon`,
- * `selectedIconAfter`, and `iconSpacingProps` props.
+ * `selectedIconAfter`, `iconSpacingProps`, and `selectedClassName` props.
  */
 export declare const Option: import("react").ForwardRefExoticComponent<OptionProps & import("react").RefAttributes<HTMLLIElement>>;

package/dist/form/Option.js

@@ -9,9 +9,8 @@ import { getListItemHeight } from "../list/getListItemHeight.js";
 import { ListItemText } from "../list/ListItemText.js";
 import { MenuItem } from "../menu/MenuItem.js";
 import { useEnsuredId } from "../useEnsuredId.js";
+import { useListboxContext } from "./ListboxProvider.js";
 import { option } from "./optionStyles.js";
-import { useListboxContext } from "./useListboxProvider.js";
-import { triggerManualChangeEvent } from "./utils.js";
 const noop = ()=>{
 // do nothing
 };
@@ -20,6 +19,7 @@ const noop = ()=>{
  * unselected options have the same alignment.
  *
  * @since 6.0.0
+ * @defaultValue `<span className="rmd-icon rmd-icon--svg />`
  */ export const DEFAULT_OPTION_UNSELECTED_ICON = /*#__PURE__*/ _jsx("span", {
     className: icon({
         type: "svg"
@@ -33,15 +33,16 @@ const noop = ()=>{
  *
  * @since 6.0.0 removed the `selected` and `focused` props.
  * @since 6.0.0 Added the `value`, `selectedIcon`, `unselectedIcon`,
- * `selectedIconAfter`, and `iconSpacingProps` props.
+ * `selectedIconAfter`, `iconSpacingProps`, and `selectedClassName` props.
  */ export const Option = /*#__PURE__*/ forwardRef(function Option(props, ref) {
-    const { id: propId, role = "option", value, children: propChildren, onClick = noop, className, selectedIcon: propSelectedIcon, unselectedIcon: propUnselectedIcon, selectedIconAfter: propSelectedIconAfter, textIconSpacingProps, leftAddon: propLeftAddon, leftAddonType, leftAddonClassName, rightAddon: propRightAddon, rightAddonType, rightAddonClassName, secondaryText, height: propHeight, disableTextChildren: propDisableTextChildren, ...remaining } = props;
+    const { id: propId, role = "option", value, children: propChildren, onClick = noop, className, selectedClassName, selectedIcon: propSelectedIcon, unselectedIcon: propUnselectedIcon, selectedIconAfter: propSelectedIconAfter, disableSelectedIcon: propDisableSelectedIcon, textIconSpacingProps, leftAddon: propLeftAddon, leftAddonType, leftAddonClassName, rightAddon: propRightAddon, rightAddonType, rightAddonClassName, secondaryText, height: propHeight, disableTextChildren: propDisableTextChildren, ...remaining } = props;
     const id = useEnsuredId(propId, "option");
-    const { inputRef, currentValue, disableSelectedIcon, selectedIconAfter: contextSelectedIconAfter } = useListboxContext();
+    const { selectOption, isOptionSelected, disableSelectedIcon: contextDisableSelectedIcon, selectedIcon: contextSelectedIcon, unselectedIcon: contextUnselectedIcon, selectedIconAfter: contextSelectedIconAfter } = useListboxContext();
     const selectedIconAfter = propSelectedIconAfter ?? contextSelectedIconAfter;
-    const selected = value === currentValue;
-    const selectedIcon = getIcon("selected", disableSelectedIcon ? null : propSelectedIcon);
-    const unselectedIcon = disableSelectedIcon ? null : propUnselectedIcon ?? DEFAULT_OPTION_UNSELECTED_ICON;
+    const disableSelectedIcon = propDisableSelectedIcon ?? contextDisableSelectedIcon;
+    const selected = isOptionSelected(value);
+    const selectedIcon = getIcon("selected", disableSelectedIcon ? null : propSelectedIcon ?? contextSelectedIcon);
+    const unselectedIcon = disableSelectedIcon ? null : propUnselectedIcon ?? contextUnselectedIcon ?? DEFAULT_OPTION_UNSELECTED_ICON;
     const icon = selected ? selectedIcon : unselectedIcon;
     let leftAddon = propLeftAddon;
     let rightAddon = propRightAddon;
@@ -90,11 +91,12 @@ const noop = ()=>{
         role: role,
         onClick: (event)=>{
             onClick(event);
-            triggerManualChangeEvent(inputRef.current, value);
+            selectOption(value);
         },
         className: option({
             icon: !!icon,
             selected,
+            selectedClassName,
             className
         }),
         secondaryText: secondaryText,

package/dist/form/Option.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/Option.tsx"],"sourcesContent":["\"use client\";\nimport { cnb } from \"cnbuilder\";\nimport { forwardRef, Fragment, type ReactNode } from \"react\";\nimport { getIcon } from \"../icon/iconConfig.js\";\nimport { icon } from \"../icon/styles.js\";\nimport {\n  TextIconSpacing,\n  type TextIconSpacingProps,\n} from \"../icon/TextIconSpacing.js\";\nimport { getListItemHeight } from \"../list/getListItemHeight.js\";\nimport { ListItemText } from \"../list/ListItemText.js\";\nimport { MenuItem, type MenuItemProps } from \"../menu/MenuItem.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { option } from \"./optionStyles.js\";\nimport { useListboxContext } from \"./useListboxProvider.js\";\nimport { triggerManualChangeEvent } from \"./utils.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * This icon is used while the option is unselected so that the selected and\n * unselected options have the same alignment.\n *\n * @since 6.0.0\n */\nexport const DEFAULT_OPTION_UNSELECTED_ICON = (\n  <span className={icon({ type: \"svg\" })} />\n);\n\n/**\n * @since 6.0.0 removed the `selected` and `focused` props.\n * @since 6.0.0 Added the `value`, `selectedIcon`, `unselectedIcon`,\n * `selectedIconAfter`, and `iconSpacingProps` props.\n */\nexport interface OptionProps extends MenuItemProps {\n  /**\n   * @defaultValue `\"option\"`\n   */\n  role?: string;\n\n  value: string | number;\n\n  /**\n   * @defaultValue `getIcon(\"selected\")`\n   */\n  selectedIcon?: ReactNode;\n\n  /**\n   * @see {@link DEFAULT_OPTION_UNSELECTED_ICON}\n   * @defaultValue `<span className=\"rmd-icon rmd-icon--svg\" />`\n   */\n  unselectedIcon?: ReactNode;\n\n  /**\n   * Set this to `true` of the {@link selectedIcon}/{@link unselectedIcon}\n   * should appear as the {@link rightAddon} instead of the {@link leftAddon}.\n   *\n   * @defaultValue `false`\n   */\n  selectedIconAfter?: boolean;\n\n  /**\n   * Since the `selectedIcon`/`unselectedIcon` are rendered as\n   * `leftAddon`/`rightAddon`, the provided `leftAddon`/`rightAddon` will be\n   * wrapped in the {@link TextIconSpacing} component to maintain the correct\n   * spacing. You can use this prop to provide any additional configuration to\n   * the spacing.\n   *\n   * @example\n   * ```tsx\n   * <Option\n   *   leftAddon={<Avatar>A</Avatar>}\n   *   leftAddonType=\"avatar\"\n   *   value={0}\n   *   textIconSpacingProps={{\n   *     beforeClassName: \"my-custom-class-name\",\n   *   }}\n   * >\n   *   Some Content\n   * </Option>\n   * ```\n   */\n  textIconSpacingProps?: Omit<TextIconSpacingProps, \"icon\" | \"children\">;\n}\n\n/**\n * **Client Component**\n *\n * This component is a wrapper around the {@link MenuItem} to implement custom\n * select option behavior.\n *\n * @since 6.0.0 removed the `selected` and `focused` props.\n * @since 6.0.0 Added the `value`, `selectedIcon`, `unselectedIcon`,\n * `selectedIconAfter`, and `iconSpacingProps` props.\n */\nexport const Option = forwardRef<HTMLLIElement, OptionProps>(\n  function Option(props, ref) {\n    const {\n      id: propId,\n      role = \"option\",\n      value,\n      children: propChildren,\n      onClick = noop,\n      className,\n      selectedIcon: propSelectedIcon,\n      unselectedIcon: propUnselectedIcon,\n      selectedIconAfter: propSelectedIconAfter,\n      textIconSpacingProps,\n      leftAddon: propLeftAddon,\n      leftAddonType,\n      leftAddonClassName,\n      rightAddon: propRightAddon,\n      rightAddonType,\n      rightAddonClassName,\n      secondaryText,\n      height: propHeight,\n      disableTextChildren: propDisableTextChildren,\n      ...remaining\n    } = props;\n\n    const id = useEnsuredId(propId, \"option\");\n    const {\n      inputRef,\n      currentValue,\n      disableSelectedIcon,\n      selectedIconAfter: contextSelectedIconAfter,\n    } = useListboxContext();\n    const selectedIconAfter = propSelectedIconAfter ?? contextSelectedIconAfter;\n    const selected = value === currentValue;\n    const selectedIcon = getIcon(\n      \"selected\",\n      disableSelectedIcon ? null : propSelectedIcon\n    );\n    const unselectedIcon = disableSelectedIcon\n      ? null\n      : propUnselectedIcon ?? DEFAULT_OPTION_UNSELECTED_ICON;\n    const icon = selected ? selectedIcon : unselectedIcon;\n\n    let leftAddon = propLeftAddon;\n    let rightAddon = propRightAddon;\n    let children = propChildren;\n    let disableTextChildren = propDisableTextChildren;\n    if (!selectedIconAfter && icon) {\n      leftAddon = icon;\n      if (propLeftAddon) {\n        disableTextChildren = true;\n        const Wrapper = propDisableTextChildren ? Fragment : ListItemText;\n\n        children = (\n          <TextIconSpacing {...textIconSpacingProps} icon={propLeftAddon}>\n            <Wrapper>{children}</Wrapper>\n          </TextIconSpacing>\n        );\n      }\n    } else if (icon) {\n      rightAddon = icon;\n      if (propRightAddon) {\n        disableTextChildren = true;\n        const Wrapper = propDisableTextChildren ? Fragment : ListItemText;\n\n        children = (\n          <TextIconSpacing {...textIconSpacingProps} icon={propRightAddon}>\n            <Wrapper>{children}</Wrapper>\n          </TextIconSpacing>\n        );\n      }\n    }\n\n    const height = getListItemHeight({\n      height: propHeight,\n      leftAddon: leftAddon === icon ? null : leftAddon,\n      leftAddonType,\n      rightAddon: rightAddon === icon ? null : rightAddon,\n      rightAddonType,\n      secondaryText,\n    });\n\n    return (\n      <MenuItem\n        {...remaining}\n        aria-selected={selected || undefined}\n        id={id}\n        ref={ref}\n        role={role}\n        onClick={(event) => {\n          onClick(event);\n          triggerManualChangeEvent(inputRef.current, value);\n        }}\n        className={option({ icon: !!icon, selected, className })}\n        secondaryText={secondaryText}\n        height={height}\n        leftAddon={leftAddon}\n        leftAddonType={leftAddonType}\n        leftAddonClassName={cnb(\n          leftAddon === icon && \"rmd-option__icon\",\n          leftAddonClassName\n        )}\n        rightAddon={rightAddon}\n        rightAddonType={rightAddonType}\n        rightAddonClassName={cnb(\n          rightAddon === icon && \"rmd-option__icon\",\n          rightAddonClassName\n        )}\n        disableTextChildren={disableTextChildren}\n      >\n        {children}\n      </MenuItem>\n    );\n  }\n);\n"],"names":["cnb","forwardRef","Fragment","getIcon","icon","TextIconSpacing","getListItemHeight","ListItemText","MenuItem","useEnsuredId","option","useListboxContext","triggerManualChangeEvent","noop","DEFAULT_OPTION_UNSELECTED_ICON","span","className","type","Option","props","ref","id","propId","role","value","children","propChildren","onClick","selectedIcon","propSelectedIcon","unselectedIcon","propUnselectedIcon","selectedIconAfter","propSelectedIconAfter","textIconSpacingProps","leftAddon","propLeftAddon","leftAddonType","leftAddonClassName","rightAddon","propRightAddon","rightAddonType","rightAddonClassName","secondaryText","height","propHeight","disableTextChildren","propDisableTextChildren","remaining","inputRef","currentValue","disableSelectedIcon","contextSelectedIconAfter","selected","Wrapper","aria-selected","undefined","event","current"],"mappings":"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"}
+{"version":3,"sources":["../../src/form/Option.tsx"],"sourcesContent":["\"use client\";\nimport { cnb } from \"cnbuilder\";\nimport { forwardRef, Fragment, type ReactNode } from \"react\";\nimport { getIcon } from \"../icon/iconConfig.js\";\nimport { icon } from \"../icon/styles.js\";\nimport {\n  TextIconSpacing,\n  type TextIconSpacingProps,\n} from \"../icon/TextIconSpacing.js\";\nimport { getListItemHeight } from \"../list/getListItemHeight.js\";\nimport { ListItemText } from \"../list/ListItemText.js\";\nimport { MenuItem, type MenuItemProps } from \"../menu/MenuItem.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { useListboxContext } from \"./ListboxProvider.js\";\nimport { option } from \"./optionStyles.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * This icon is used while the option is unselected so that the selected and\n * unselected options have the same alignment.\n *\n * @since 6.0.0\n * @defaultValue `<span className=\"rmd-icon rmd-icon--svg />`\n */\nexport const DEFAULT_OPTION_UNSELECTED_ICON = (\n  <span className={icon({ type: \"svg\" })} />\n);\n\n/**\n * @since 6.0.0\n */\nexport interface OptionSelectedIconProps {\n  /**\n   * @defaultValue `getIcon(\"selected\")`\n   */\n  selectedIcon?: ReactNode;\n\n  /**\n   * @see {@link DEFAULT_OPTION_UNSELECTED_ICON}\n   * @defaultValue `<span className=\"rmd-icon rmd-icon--svg\" />`\n   */\n  unselectedIcon?: ReactNode;\n\n  /**\n   * Set this to `true` of the {@link selectedIcon}/{@link unselectedIcon}\n   * should appear as the {@link rightAddon} instead of the {@link leftAddon}.\n   *\n   * @defaultValue `false`\n   */\n  selectedIconAfter?: boolean;\n\n  /**\n   * Set this to `true` to remove selected icon behavior from the `Option`.\n   *\n   * @defaultValue `false`\n   */\n  disableSelectedIcon?: boolean;\n}\n\n/**\n * @since 6.0.0 removed the `selected` and `focused` props.\n * @since 6.0.0 Added the `value`, `selectedIcon`, `unselectedIcon`,\n * `selectedIconAfter`, and `iconSpacingProps` props.\n */\nexport interface OptionProps extends MenuItemProps, OptionSelectedIconProps {\n  /**\n   * @defaultValue `\"option\"`\n   */\n  role?: string;\n  value: string | number | Record<string, unknown>;\n\n  /**\n   * An optional className to apply only while the current option is selected to\n   * override any global default selected styles. It is recommended to update\n   * the `react-md.$form-option-selected-styles` map first to change selected\n   * style globally and then any one-off customizations through this prop.\n   *\n   * @example Global Change\n   * ```scss\n   * @use \"@react-md/core\" with (\n   *   // these are the defaults\n   *   $form-option-selected-styles: (\n   *     --rmd-icon-color: currentcolor,\n   *     background-color: colors.$blue-900,\n   *     color: colors.$white,\n   *   ),\n   *\n   *   // so if you wanted to remove the styles globally\n   *   $form-option-selected-styles: (),\n   * );\n   * ```\n   *\n   * This really results in something like:\n   * ```ts\n   * className=\"rmd-list-item ... rmd-menu-item ... rmd-option rmd-option--selected ${selectedClassName}\"\n   * ```\n   */\n  selectedClassName?: string;\n\n  /**\n   * Since the `selectedIcon`/`unselectedIcon` are rendered as\n   * `leftAddon`/`rightAddon`, the provided `leftAddon`/`rightAddon` will be\n   * wrapped in the {@link TextIconSpacing} component to maintain the correct\n   * spacing. You can use this prop to provide any additional configuration to\n   * the spacing.\n   *\n   * @example\n   * ```tsx\n   * <Option\n   *   leftAddon={<Avatar>A</Avatar>}\n   *   leftAddonType=\"avatar\"\n   *   value={0}\n   *   textIconSpacingProps={{\n   *     beforeClassName: \"my-custom-class-name\",\n   *   }}\n   * >\n   *   Some Content\n   * </Option>\n   * ```\n   */\n  textIconSpacingProps?: Omit<TextIconSpacingProps, \"icon\" | \"children\">;\n}\n\n/**\n * **Client Component**\n *\n * This component is a wrapper around the {@link MenuItem} to implement custom\n * select option behavior.\n *\n * @since 6.0.0 removed the `selected` and `focused` props.\n * @since 6.0.0 Added the `value`, `selectedIcon`, `unselectedIcon`,\n * `selectedIconAfter`, `iconSpacingProps`, and `selectedClassName` props.\n */\nexport const Option = forwardRef<HTMLLIElement, OptionProps>(\n  function Option(props, ref) {\n    const {\n      id: propId,\n      role = \"option\",\n      value,\n      children: propChildren,\n      onClick = noop,\n      className,\n      selectedClassName,\n      selectedIcon: propSelectedIcon,\n      unselectedIcon: propUnselectedIcon,\n      selectedIconAfter: propSelectedIconAfter,\n      disableSelectedIcon: propDisableSelectedIcon,\n      textIconSpacingProps,\n      leftAddon: propLeftAddon,\n      leftAddonType,\n      leftAddonClassName,\n      rightAddon: propRightAddon,\n      rightAddonType,\n      rightAddonClassName,\n      secondaryText,\n      height: propHeight,\n      disableTextChildren: propDisableTextChildren,\n      ...remaining\n    } = props;\n\n    const id = useEnsuredId(propId, \"option\");\n    const {\n      selectOption,\n      isOptionSelected,\n      disableSelectedIcon: contextDisableSelectedIcon,\n      selectedIcon: contextSelectedIcon,\n      unselectedIcon: contextUnselectedIcon,\n      selectedIconAfter: contextSelectedIconAfter,\n    } = useListboxContext();\n    const selectedIconAfter = propSelectedIconAfter ?? contextSelectedIconAfter;\n    const disableSelectedIcon =\n      propDisableSelectedIcon ?? contextDisableSelectedIcon;\n    const selected = isOptionSelected(value);\n    const selectedIcon = getIcon(\n      \"selected\",\n      disableSelectedIcon ? null : (propSelectedIcon ?? contextSelectedIcon)\n    );\n    const unselectedIcon = disableSelectedIcon\n      ? null\n      : (propUnselectedIcon ??\n        contextUnselectedIcon ??\n        DEFAULT_OPTION_UNSELECTED_ICON);\n    const icon = selected ? selectedIcon : unselectedIcon;\n\n    let leftAddon = propLeftAddon;\n    let rightAddon = propRightAddon;\n    let children = propChildren;\n    let disableTextChildren = propDisableTextChildren;\n    if (!selectedIconAfter && icon) {\n      leftAddon = icon;\n      if (propLeftAddon) {\n        disableTextChildren = true;\n        const Wrapper = propDisableTextChildren ? Fragment : ListItemText;\n\n        children = (\n          <TextIconSpacing {...textIconSpacingProps} icon={propLeftAddon}>\n            <Wrapper>{children}</Wrapper>\n          </TextIconSpacing>\n        );\n      }\n    } else if (icon) {\n      rightAddon = icon;\n      if (propRightAddon) {\n        disableTextChildren = true;\n        const Wrapper = propDisableTextChildren ? Fragment : ListItemText;\n\n        children = (\n          <TextIconSpacing {...textIconSpacingProps} icon={propRightAddon}>\n            <Wrapper>{children}</Wrapper>\n          </TextIconSpacing>\n        );\n      }\n    }\n\n    const height = getListItemHeight({\n      height: propHeight,\n      leftAddon: leftAddon === icon ? null : leftAddon,\n      leftAddonType,\n      rightAddon: rightAddon === icon ? null : rightAddon,\n      rightAddonType,\n      secondaryText,\n    });\n\n    return (\n      <MenuItem\n        {...remaining}\n        aria-selected={selected || undefined}\n        id={id}\n        ref={ref}\n        role={role}\n        onClick={(event) => {\n          onClick(event);\n          selectOption(value);\n        }}\n        className={option({\n          icon: !!icon,\n          selected,\n          selectedClassName,\n          className,\n        })}\n        secondaryText={secondaryText}\n        height={height}\n        leftAddon={leftAddon}\n        leftAddonType={leftAddonType}\n        leftAddonClassName={cnb(\n          leftAddon === icon && \"rmd-option__icon\",\n          leftAddonClassName\n        )}\n        rightAddon={rightAddon}\n        rightAddonType={rightAddonType}\n        rightAddonClassName={cnb(\n          rightAddon === icon && \"rmd-option__icon\",\n          rightAddonClassName\n        )}\n        disableTextChildren={disableTextChildren}\n      >\n        {children}\n      </MenuItem>\n    );\n  }\n);\n"],"names":["cnb","forwardRef","Fragment","getIcon","icon","TextIconSpacing","getListItemHeight","ListItemText","MenuItem","useEnsuredId","useListboxContext","option","noop","DEFAULT_OPTION_UNSELECTED_ICON","span","className","type","Option","props","ref","id","propId","role","value","children","propChildren","onClick","selectedClassName","selectedIcon","propSelectedIcon","unselectedIcon","propUnselectedIcon","selectedIconAfter","propSelectedIconAfter","disableSelectedIcon","propDisableSelectedIcon","textIconSpacingProps","leftAddon","propLeftAddon","leftAddonType","leftAddonClassName","rightAddon","propRightAddon","rightAddonType","rightAddonClassName","secondaryText","height","propHeight","disableTextChildren","propDisableTextChildren","remaining","selectOption","isOptionSelected","contextDisableSelectedIcon","contextSelectedIcon","contextUnselectedIcon","contextSelectedIconAfter","selected","Wrapper","aria-selected","undefined","event"],"mappings":"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"}