@react-md/core 1.0.0-next.11 → 1.0.0-next.13

package/dist/form/MenuItemTextField.d.ts

@@ -2,7 +2,7 @@ import { type HTMLAttributes } from "react";
 import { type PropsWithRef } from "../types.js";
 import { type TextFieldProps } from "./TextField.js";
 /**
- * @remarks \@since 5.0.0
+ * @since 5.0.0
  */
 export interface MenuItemTextFieldProps extends TextFieldProps {
     /**
@@ -22,6 +22,6 @@ export interface MenuItemTextFieldProps extends TextFieldProps {
  * hard to style nicely within menus. You'd most likely want to use another menu
  * for displaying errors.
  *
- * @remarks \@since 5.0.0
+ * @since 5.0.0
  */
 export declare const MenuItemTextField: import("react").ForwardRefExoticComponent<MenuItemTextFieldProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/form/MenuItemTextField.js

@@ -13,7 +13,7 @@ import { TextField } from "./TextField.js";
  * hard to style nicely within menus. You'd most likely want to use another menu
  * for displaying errors.
  *
- * @remarks \@since 5.0.0
+ * @since 5.0.0
  */ export const MenuItemTextField = /*#__PURE__*/ forwardRef(function MenuItemTextField(props, ref) {
     const { liProps, onKeyDown, stretch = true, ...remaining } = props;
     return /*#__PURE__*/ _jsx("li", {

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 * @remarks \\@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 * @remarks \\@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, 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"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","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"}

package/dist/form/NativeSelect.d.ts

@@ -2,7 +2,7 @@ import { type CSSProperties, type HTMLAttributes, type ReactNode, type SelectHTM
 import { type PropsWithRef } from "../types.js";
 import { type FormFieldOptions, type UserAgentAutocompleteProps } from "./types.js";
 /**
- * @remarks \@since 6.0.0 Added support for {@link UserAgentAutocompleteProps}
+ * @since 6.0.0 Added support for {@link UserAgentAutocompleteProps}
  */
 export interface NativeSelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, "autoComplete">, UserAgentAutocompleteProps, FormFieldOptions {
     /**
@@ -46,8 +46,7 @@ export interface NativeSelectProps extends Omit<SelectHTMLAttributes<HTMLSelectE
  * same theming as `TextField` and `TextArea` components. This component might
  * not be used much since the `Select` offers more styling options.
  *
- * @example
- * Simple Example
+ * @example Simple Example
  * ```tsx
  * <NativeSelect label="Label">
  *   <option value="a">Value 1</option>
@@ -57,8 +56,7 @@ export interface NativeSelectProps extends Omit<SelectHTMLAttributes<HTMLSelectE
  * </NativeSelect>
  * ```
  *
- * @example
- * Required Value Example
+ * @example Required Value Example
  * ```tsx
  * function Example(): ReactElement {
  *   // using `defaultValue=""` makes it so the first option selected by default

package/dist/form/NativeSelect.js

@@ -14,8 +14,7 @@ import { nativeSelect, nativeSelectContainer } from "./nativeSelectStyles.js";
  * same theming as `TextField` and `TextArea` components. This component might
  * not be used much since the `Select` offers more styling options.
  *
- * @example
- * Simple Example
+ * @example Simple Example
  * ```tsx
  * <NativeSelect label="Label">
  *   <option value="a">Value 1</option>
@@ -25,8 +24,7 @@ import { nativeSelect, nativeSelectContainer } from "./nativeSelectStyles.js";
  * </NativeSelect>
  * ```
  *
- * @example
- * Required Value Example
+ * @example Required Value Example
  * ```tsx
  * function Example(): ReactElement {
  *   // using `defaultValue=""` makes it so the first option selected by default

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 * @remarks \\@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\n * 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\n * 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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8CC,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 * **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"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","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"}

package/dist/form/OptGroup.d.ts

@@ -2,7 +2,7 @@ import { type ReactNode } from "react";
 import { type ListElement, type ListProps } from "../list/List.js";
 import { type ListSubheaderProps } from "../list/ListSubheader.js";
 import { type PropsWithRef } from "../types.js";
-/** @remarks \@since 6.0.0 */
+/** @since 6.0.0 */
 export interface OptGroupProps extends Omit<ListProps, "role"> {
     /**
      * This is really the `children` to display in a `ListSubheader` that
@@ -29,8 +29,7 @@ export interface OptGroupProps extends Omit<ListProps, "role"> {
  * correct accessibility when creating an `<optgroup>` with the `Select`
  * component.
  *
- * @example
- * Simple Example
+ * @example Simple Example
  * ```tsx
  * import { Select, OptGroup, Option } from "@react-md/core";
  * import FavoriteIcon from "@react-md/material-icons/FavoriteIcon";
@@ -54,6 +53,6 @@ export interface OptGroupProps extends Omit<ListProps, "role"> {
  * }
  * ```
  *
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export declare const OptGroup: import("react").ForwardRefExoticComponent<OptGroupProps & import("react").RefAttributes<ListElement>>;

package/dist/form/OptGroup.js

@@ -11,8 +11,7 @@ import { useEnsuredId } from "../useEnsuredId.js";
  * correct accessibility when creating an `<optgroup>` with the `Select`
  * component.
  *
- * @example
- * Simple Example
+ * @example Simple Example
  * ```tsx
  * import { Select, OptGroup, Option } from "@react-md/core";
  * import FavoriteIcon from "@react-md/material-icons/FavoriteIcon";
@@ -36,7 +35,7 @@ import { useEnsuredId } from "../useEnsuredId.js";
  * }
  * ```
  *
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */ export const OptGroup = /*#__PURE__*/ forwardRef(function OptGroup(props, ref) {
     const { children, label, labelProps, ...remaining } = props;
     const labelId = useEnsuredId(labelProps?.id, "optgroup");

package/dist/form/OptGroup.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/OptGroup.tsx"],"sourcesContent":["\"use client\";\nimport { forwardRef, type ReactNode } from \"react\";\nimport { type ListElement, type ListProps } from \"../list/List.js\";\nimport {\n  ListSubheader,\n  type ListSubheaderProps,\n} from \"../list/ListSubheader.js\";\nimport { MenuItemGroup } from \"../menu/MenuItemGroup.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\n\n/** @remarks \\@since 6.0.0 */\nexport interface OptGroupProps extends Omit<ListProps, \"role\"> {\n  /**\n   * This is really the `children` to display in a `ListSubheader` that\n   * describes the optgroup. It was named `label` to match the native\n   * `<optgroup>` element.\n   *\n   * @see {@link labelProps} for additional styling and options.\n   */\n  label: ReactNode;\n\n  /**\n   * This can be used to apply any additional props to the `ListSubheader` that\n   * describes the group of options.\n   */\n  labelProps?: PropsWithRef<\n    Omit<ListSubheaderProps, \"role\" | \"children\">,\n    HTMLLIElement\n  >;\n\n  /**\n   * This should be any `Option`s to display within the group.\n   */\n  children: ReactNode;\n}\n\n/**\n * **Client Component**\n *\n * This component is more of a \"convenience component\" to help enforce the\n * correct accessibility when creating an `<optgroup>` with the `Select`\n * component.\n *\n * @example\n * Simple Example\n * ```tsx\n * import { Select, OptGroup, Option } from \"@react-md/core\";\n * import FavoriteIcon from \"@react-md/material-icons/FavoriteIcon\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <Select label=\"Choose an animal\">\n *       <OptGroup label=\"Land\" labelProps={{ className: \"custom-class-name\" }}>\n *         <Option value={0}>Cat</Option>\n *         <Option value={1}>Dog</Option>\n *         <Option value={2}>Tiger</Option>\n *       </OptGroup>\n *       <OptGroup label=\"Water\" labelProps={{ rightAddon: <FavoriteIcon /> }}>\n *         <Option value={3}>Dolphin</Option>\n *         <Option value={4}>Flounder</Option>\n *       </OptGroup>\n *     </Select>\n *\n *   );\n * }\n * ```\n *\n * @remarks \\@since 6.0.0\n */\nexport const OptGroup = forwardRef<ListElement, OptGroupProps>(\n  function OptGroup(props, ref) {\n    const { children, label, labelProps, ...remaining } = props;\n    const labelId = useEnsuredId(labelProps?.id, \"optgroup\");\n\n    return (\n      <MenuItemGroup aria-labelledby={labelId} {...remaining} ref={ref}>\n        <ListSubheader {...labelProps} id={labelId}>\n          {label}\n        </ListSubheader>\n        {children}\n      </MenuItemGroup>\n    );\n  }\n);\n"],"names":["forwardRef","ListSubheader","MenuItemGroup","useEnsuredId","OptGroup","props","ref","children","label","labelProps","remaining","labelId","id","aria-labelledby"],"mappings":"AAAA;;AACA,SAASA,UAAU,QAAwB,QAAQ;AAEnD,SACEC,aAAa,QAER,2BAA2B;AAClC,SAASC,aAAa,QAAQ,2BAA2B;AAEzD,SAASC,YAAY,QAAQ,qBAAqB;AA4BlD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiCC,GACD,OAAO,MAAMC,yBAAWJ,WACtB,SAASI,SAASC,KAAK,EAAEC,GAAG;IAC1B,MAAM,EAAEC,QAAQ,EAAEC,KAAK,EAAEC,UAAU,EAAE,GAAGC,WAAW,GAAGL;IACtD,MAAMM,UAAUR,aAAaM,YAAYG,IAAI;IAE7C,qBACE,MAACV;QAAcW,mBAAiBF;QAAU,GAAGD,SAAS;QAAEJ,KAAKA;;0BAC3D,KAACL;gBAAe,GAAGQ,UAAU;gBAAEG,IAAID;0BAChCH;;YAEFD;;;AAGP,GACA"}
+{"version":3,"sources":["../../src/form/OptGroup.tsx"],"sourcesContent":["\"use client\";\nimport { forwardRef, type ReactNode } from \"react\";\nimport { type ListElement, type ListProps } from \"../list/List.js\";\nimport {\n  ListSubheader,\n  type ListSubheaderProps,\n} from \"../list/ListSubheader.js\";\nimport { MenuItemGroup } from \"../menu/MenuItemGroup.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\n\n/** @since 6.0.0 */\nexport interface OptGroupProps extends Omit<ListProps, \"role\"> {\n  /**\n   * This is really the `children` to display in a `ListSubheader` that\n   * describes the optgroup. It was named `label` to match the native\n   * `<optgroup>` element.\n   *\n   * @see {@link labelProps} for additional styling and options.\n   */\n  label: ReactNode;\n\n  /**\n   * This can be used to apply any additional props to the `ListSubheader` that\n   * describes the group of options.\n   */\n  labelProps?: PropsWithRef<\n    Omit<ListSubheaderProps, \"role\" | \"children\">,\n    HTMLLIElement\n  >;\n\n  /**\n   * This should be any `Option`s to display within the group.\n   */\n  children: ReactNode;\n}\n\n/**\n * **Client Component**\n *\n * This component is more of a \"convenience component\" to help enforce the\n * correct accessibility when creating an `<optgroup>` with the `Select`\n * component.\n *\n * @example Simple Example\n * ```tsx\n * import { Select, OptGroup, Option } from \"@react-md/core\";\n * import FavoriteIcon from \"@react-md/material-icons/FavoriteIcon\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <Select label=\"Choose an animal\">\n *       <OptGroup label=\"Land\" labelProps={{ className: \"custom-class-name\" }}>\n *         <Option value={0}>Cat</Option>\n *         <Option value={1}>Dog</Option>\n *         <Option value={2}>Tiger</Option>\n *       </OptGroup>\n *       <OptGroup label=\"Water\" labelProps={{ rightAddon: <FavoriteIcon /> }}>\n *         <Option value={3}>Dolphin</Option>\n *         <Option value={4}>Flounder</Option>\n *       </OptGroup>\n *     </Select>\n *\n *   );\n * }\n * ```\n *\n * @since 6.0.0\n */\nexport const OptGroup = forwardRef<ListElement, OptGroupProps>(\n  function OptGroup(props, ref) {\n    const { children, label, labelProps, ...remaining } = props;\n    const labelId = useEnsuredId(labelProps?.id, \"optgroup\");\n\n    return (\n      <MenuItemGroup aria-labelledby={labelId} {...remaining} ref={ref}>\n        <ListSubheader {...labelProps} id={labelId}>\n          {label}\n        </ListSubheader>\n        {children}\n      </MenuItemGroup>\n    );\n  }\n);\n"],"names":["forwardRef","ListSubheader","MenuItemGroup","useEnsuredId","OptGroup","props","ref","children","label","labelProps","remaining","labelId","id","aria-labelledby"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;AACA,SAASA,UAAU,QAAwB,QAAQ;AAEnD,SACEC,aAAa,QAER,2BAA2B;AAClC,SAASC,aAAa,QAAQ,2BAA2B;AAEzD,SAASC,YAAY,QAAQ,qBAAqB;AA4BlD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgCC,GACD,OAAO,MAAMC,yBAAWJ,WACtB,SAASI,SAASC,KAAK,EAAEC,GAAG;IAC1B,MAAM,EAAEC,QAAQ,EAAEC,KAAK,EAAEC,UAAU,EAAE,GAAGC,WAAW,GAAGL;IACtD,MAAMM,UAAUR,aAAaM,YAAYG,IAAI;IAE7C,qBACE,MAACV;QAAcW,mBAAiBF;QAAU,GAAGD,SAAS;QAAEJ,KAAKA;;0BAC3D,KAACL;gBAAe,GAAGQ,UAAU;gBAAEG,IAAID;0BAChCH;;YAEFD;;;AAGP,GACA"}

package/dist/form/Option.d.ts

@@ -5,13 +5,12 @@ import { type MenuItemProps } from "../menu/MenuItem.js";
  * This icon is used while the option is unselected so that the selected and
  * unselected options have the same alignment.
  *
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export declare const DEFAULT_OPTION_UNSELECTED_ICON: import("react").JSX.Element;
 /**
- * @remarks
- * \@since 6.0.0 removed the `selected` and `focused` props.
- * \@since 6.0.0 Added the `value`, `selectedIcon`, `unselectedIcon`,
+ * @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 {
@@ -65,9 +64,8 @@ export interface OptionProps extends MenuItemProps {
  * This component is a wrapper around the {@link MenuItem} to implement custom
  * select option behavior.
  *
- * @remarks
- * \@since 6.0.0 removed the `selected` and `focused` props.
- * \@since 6.0.0 Added the `value`, `selectedIcon`, `unselectedIcon`,
+ * @since 6.0.0 removed the `selected` and `focused` props.
+ * @since 6.0.0 Added the `value`, `selectedIcon`, `unselectedIcon`,
  * `selectedIconAfter`, and `iconSpacingProps` props.
  */
 export declare const Option: import("react").ForwardRefExoticComponent<OptionProps & import("react").RefAttributes<HTMLLIElement>>;

package/dist/form/Option.js

@@ -19,7 +19,7 @@ const noop = ()=>{
  * This icon is used while the option is unselected so that the selected and
  * unselected options have the same alignment.
  *
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */ export const DEFAULT_OPTION_UNSELECTED_ICON = /*#__PURE__*/ _jsx("span", {
     className: icon({
         type: "svg"
@@ -31,9 +31,8 @@ const noop = ()=>{
  * This component is a wrapper around the {@link MenuItem} to implement custom
  * select option behavior.
  *
- * @remarks
- * \@since 6.0.0 removed the `selected` and `focused` props.
- * \@since 6.0.0 Added the `value`, `selectedIcon`, `unselectedIcon`,
+ * @since 6.0.0 removed the `selected` and `focused` props.
+ * @since 6.0.0 Added the `value`, `selectedIcon`, `unselectedIcon`,
  * `selectedIconAfter`, and `iconSpacingProps` 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;

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 * @remarks \\@since 6.0.0\n */\nexport const DEFAULT_OPTION_UNSELECTED_ICON = (\n  <span className={icon({ type: \"svg\" })} />\n);\n\n/**\n * @remarks\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 * @remarks\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 { 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"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;AACA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,UAAU,EAAEC,QAAQ,QAAwB,QAAQ;AAC7D,SAASC,OAAO,QAAQ,wBAAwB;AAChD,SAASC,IAAI,QAAQ,oBAAoB;AACzC,SACEC,eAAe,QAEV,6BAA6B;AACpC,SAASC,iBAAiB,QAAQ,+BAA+B;AACjE,SAASC,YAAY,QAAQ,0BAA0B;AACvD,SAASC,QAAQ,QAA4B,sBAAsB;AACnE,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,MAAM,QAAQ,oBAAoB;AAC3C,SAASC,iBAAiB,QAAQ,0BAA0B;AAC5D,SAASC,wBAAwB,QAAQ,aAAa;AAEtD,MAAMC,OAAO;AACX,aAAa;AACf;AAEA;;;;;CAKC,GACD,OAAO,MAAMC,+CACX,KAACC;IAAKC,WAAWZ,KAAK;QAAEa,MAAM;IAAM;GACpC;AA0DF;;;;;;;;;CASC,GACD,OAAO,MAAMC,uBAASjB,WACpB,SAASiB,OAAOC,KAAK,EAAEC,GAAG;IACxB,MAAM,EACJC,IAAIC,MAAM,EACVC,OAAO,QAAQ,EACfC,KAAK,EACLC,UAAUC,YAAY,EACtBC,UAAUd,IAAI,EACdG,SAAS,EACTY,cAAcC,gBAAgB,EAC9BC,gBAAgBC,kBAAkB,EAClCC,mBAAmBC,qBAAqB,EACxCC,oBAAoB,EACpBC,WAAWC,aAAa,EACxBC,aAAa,EACbC,kBAAkB,EAClBC,YAAYC,cAAc,EAC1BC,cAAc,EACdC,mBAAmB,EACnBC,aAAa,EACbC,QAAQC,UAAU,EAClBC,qBAAqBC,uBAAuB,EAC5C,GAAGC,WACJ,GAAG7B;IAEJ,MAAME,KAAKZ,aAAaa,QAAQ;IAChC,MAAM,EACJ2B,QAAQ,EACRC,YAAY,EACZC,mBAAmB,EACnBnB,mBAAmBoB,wBAAwB,EAC5C,GAAGzC;IACJ,MAAMqB,oBAAoBC,yBAAyBmB;IACnD,MAAMC,WAAW7B,UAAU0B;IAC3B,MAAMtB,eAAezB,QACnB,YACAgD,sBAAsB,OAAOtB;IAE/B,MAAMC,iBAAiBqB,sBACnB,OACApB,sBAAsBjB;IAC1B,MAAMV,OAAOiD,WAAWzB,eAAeE;IAEvC,IAAIK,YAAYC;IAChB,IAAIG,aAAaC;IACjB,IAAIf,WAAWC;IACf,IAAIoB,sBAAsBC;IAC1B,IAAI,CAACf,qBAAqB5B,MAAM;QAC9B+B,YAAY/B;QACZ,IAAIgC,eAAe;YACjBU,sBAAsB;YACtB,MAAMQ,UAAUP,0BAA0B7C,WAAWK;YAErDkB,yBACE,KAACpB;gBAAiB,GAAG6B,oBAAoB;gBAAE9B,MAAMgC;0BAC/C,cAAA,KAACkB;8BAAS7B;;;QAGhB;IACF,OAAO,IAAIrB,MAAM;QACfmC,aAAanC;QACb,IAAIoC,gBAAgB;YAClBM,sBAAsB;YACtB,MAAMQ,UAAUP,0BAA0B7C,WAAWK;YAErDkB,yBACE,KAACpB;gBAAiB,GAAG6B,oBAAoB;gBAAE9B,MAAMoC;0BAC/C,cAAA,KAACc;8BAAS7B;;;QAGhB;IACF;IAEA,MAAMmB,SAAStC,kBAAkB;QAC/BsC,QAAQC;QACRV,WAAWA,cAAc/B,OAAO,OAAO+B;QACvCE;QACAE,YAAYA,eAAenC,OAAO,OAAOmC;QACzCE;QACAE;IACF;IAEA,qBACE,KAACnC;QACE,GAAGwC,SAAS;QACbO,iBAAeF,YAAYG;QAC3BnC,IAAIA;QACJD,KAAKA;QACLG,MAAMA;QACNI,SAAS,CAAC8B;YACR9B,QAAQ8B;YACR7C,yBAAyBqC,SAASS,OAAO,EAAElC;QAC7C;QACAR,WAAWN,OAAO;YAAEN,MAAM,CAAC,CAACA;YAAMiD;YAAUrC;QAAU;QACtD2B,eAAeA;QACfC,QAAQA;QACRT,WAAWA;QACXE,eAAeA;QACfC,oBAAoBtC,IAClBmC,cAAc/B,QAAQ,oBACtBkC;QAEFC,YAAYA;QACZE,gBAAgBA;QAChBC,qBAAqB1C,IACnBuC,eAAenC,QAAQ,oBACvBsC;QAEFI,qBAAqBA;kBAEpBrB;;AAGP,GACA"}

package/dist/form/Password.d.ts

@@ -3,8 +3,7 @@ import { type ButtonProps } from "../button/Button.js";
 import { type PropsWithRef } from "../types.js";
 import { type TextFieldProps } from "./TextField.js";
 /**
- * @example
- * Simple Example
+ * @example Simple Example
  * ```tsx
  * const getVisibilityIcon: GetPasswordVisibilityIcon = (isPasswordVisible) => {
  *   if (isPasswordVisible) {
@@ -21,8 +20,7 @@ import { type TextFieldProps } from "./TextField.js";
  */
 export type GetPasswordVisibilityIcon = (isPasswordVisible: boolean) => ReactNode;
 /**
- * @example
- * Simple Example
+ * @example Simple Example
  * ```tsx
  * const visibilityIcon: ConfigurableVisibilityIcon = {
  *   visible: <SecurityIcon />,
@@ -44,12 +42,11 @@ export interface ConfigurableVisibilityIcon {
 export interface PasswordProps extends Omit<TextFieldProps, "type" | "rightAddon"> {
     /**
      * @defaultValue `"password"`
-     * @remarks \@since 6.0.0 Defaults to `"password"`
+     * @since 6.0.0 Defaults to `"password"`
      */
     name?: string;
     /**
-     * @example
-     * Configurable Visibility Icon Object
+     * @example Configurable Visibility Icon Object
      * ```tsx
      * <Password
      *   {...props}
@@ -60,8 +57,7 @@ export interface PasswordProps extends Omit<TextFieldProps, "type" | "rightAddon
      * />
      * ```
      *
-     * @example
-     * Get Password Visibility Icon Function
+     * @example Get Password Visibility Icon Function
      * ```tsx
      * <Password
      *   {...props}
@@ -75,8 +71,7 @@ export interface PasswordProps extends Omit<TextFieldProps, "type" | "rightAddon
      * />
      * ```
      *
-     * @example
-     * Custom Icon
+     * @example Custom Icon
      * ```tsx
      * <Password
      *   {...props}
@@ -101,8 +96,7 @@ export interface PasswordProps extends Omit<TextFieldProps, "type" | "rightAddon
 /**
  * **Client Component**
  *
- * @example
- * Simple Example
+ * @example Simple Example
  * ```tsx
  * import { Password } from "@react-md/core";
  *

package/dist/form/Password.js

@@ -10,8 +10,7 @@ import { TextField } from "./TextField.js";
 /**
  * **Client Component**
  *
- * @example
- * Simple Example
+ * @example Simple Example
  * ```tsx
  * import { Password } from "@react-md/core";
  *

package/dist/form/Password.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/Password.tsx"],"sourcesContent":["\"use client\";\nimport { forwardRef, type ReactNode } from \"react\";\nimport { Button, type ButtonProps } from \"../button/Button.js\";\nimport { getIcon } from \"../icon/iconConfig.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { useToggle } from \"../useToggle.js\";\nimport {\n  password,\n  passwordInput,\n  passwordInputToggle,\n} from \"./passwordStyles.js\";\nimport { TextField, type TextFieldProps } from \"./TextField.js\";\n\n/**\n * @example\n * Simple Example\n * ```tsx\n * const getVisibilityIcon: GetPasswordVisibilityIcon = (isPasswordVisible) => {\n *   if (isPasswordVisible) {\n *     return <SecurityIcon />;\n *   }\n *\n *   return <RemoveRedEyeIcon />;\n * };\n * ```\n *\n * @param isPasswordVisible - `true` when the password is visible and in plain\n * text\n * @returns a custom icon to use for the password visibility toggle.\n */\nexport type GetPasswordVisibilityIcon = (\n  isPasswordVisible: boolean\n) => ReactNode;\n\n/**\n * @example\n * Simple Example\n * ```tsx\n * const visibilityIcon: ConfigurableVisibilityIcon = {\n *   visible: <SecurityIcon />,\n *   invisible: <RemoveRedEyeIcon />,\n * };\n * ```\n */\nexport interface ConfigurableVisibilityIcon {\n  /**\n   * The icon to display while the password is currently visible as plain text.\n   */\n  visible: ReactNode;\n\n  /**\n   * The icon to display while the password is currently invisible as the\n   * password input.\n   */\n  invisible: ReactNode;\n}\n\nexport interface PasswordProps\n  extends Omit<TextFieldProps, \"type\" | \"rightAddon\"> {\n  /**\n   * @defaultValue `\"password\"`\n   * @remarks \\@since 6.0.0 Defaults to `\"password\"`\n   */\n  name?: string;\n\n  /**\n   * @example\n   * Configurable Visibility Icon Object\n   * ```tsx\n   * <Password\n   *   {...props}\n   *   visibilityIcon={{\n   *     visible: <SecurityIcon />,\n   *     invisible: <RemoveRedEyeIcon />,\n   *   }}\n   * />\n   * ```\n   *\n   * @example\n   * Get Password Visibility Icon Function\n   * ```tsx\n   * <Password\n   *   {...props}\n   *   visibilityIcon={(isPasswordVisible) => {\n   *     if (isPasswordVisible) {\n   *       return <SecurityIcon />;\n   *     }\n   *\n   *     return <RemoveRedEyeIcon />;\n   *   }}\n   * />\n   * ```\n   *\n   * @example\n   * Custom Icon\n   * ```tsx\n   * <Password\n   *   {...props}\n   *   visibilityIcon={<SomeCustomComponent />}\n   * />\n   * ```\n   */\n  visibilityIcon?:\n    | ConfigurableVisibilityIcon\n    | GetPasswordVisibilityIcon\n    | ReactNode;\n\n  /**\n   * The `aria-label` to use for the password visibility icon button.\n   *\n   * @defaultValue `\"Show password\"`\n   */\n  visibilityLabel?: string;\n\n  /**\n   * Any props that should be passed to the password visibility icon button. If\n   * `id`, `buttonType`, `aria-label`, `aria-pressed`, or `children` are\n   * provided here, they will override the default implementation.\n   */\n  visibilityProps?: PropsWithRef<ButtonProps, HTMLButtonElement>;\n}\n\n/**\n * **Client Component**\n *\n * @example\n * Simple Example\n * ```tsx\n * import { Password } from \"@react-md/core\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <Password\n *       label=\"Password\"\n *       name=\"password\"\n *       required\n *     />\n *   );\n * }\n * ```\n */\nexport const Password = forwardRef<HTMLInputElement, PasswordProps>(\n  function Password(props, ref) {\n    const {\n      id: propId,\n      name = \"password\",\n      className,\n      inputClassName,\n      visibilityIcon: propVisibilityIcon,\n      visibilityLabel = \"Show password\",\n      visibilityProps,\n      ...remaining\n    } = props;\n    const { toggled: isPasswordVisible, toggle } = useToggle(false);\n\n    let currentVisibilityIcon: ReactNode;\n    if (\n      propVisibilityIcon &&\n      typeof propVisibilityIcon === \"object\" &&\n      \"visible\" in propVisibilityIcon\n    ) {\n      currentVisibilityIcon = isPasswordVisible\n        ? propVisibilityIcon.visible\n        : propVisibilityIcon.invisible;\n    } else if (typeof propVisibilityIcon === \"function\") {\n      currentVisibilityIcon = propVisibilityIcon(isPasswordVisible);\n    } else {\n      currentVisibilityIcon = propVisibilityIcon;\n    }\n\n    const id = useEnsuredId(propId, \"password\");\n    const visibilityIcon = getIcon(\"password\", currentVisibilityIcon);\n\n    return (\n      <TextField\n        {...remaining}\n        ref={ref}\n        name={name}\n        type={isPasswordVisible ? \"text\" : \"password\"}\n        className={password({ className })}\n        inputClassName={passwordInput({ className: inputClassName })}\n        rightAddon={\n          <Button\n            id={`${id}-toggle`}\n            buttonType=\"icon\"\n            aria-label={visibilityLabel}\n            aria-pressed={isPasswordVisible}\n            // allow all props except the onClick, className, and aria-pressed to\n            // be overridden. onClick can only stop default behavior with\n            // `event.stopPropagation()`\n            {...visibilityProps}\n            className={passwordInputToggle({\n              className: visibilityProps?.className,\n            })}\n            onClick={(event) => {\n              visibilityProps?.onClick?.(event);\n              if (event.isPropagationStopped()) {\n                return;\n              }\n\n              toggle();\n            }}\n          >\n            {visibilityProps?.children ?? visibilityIcon}\n          </Button>\n        }\n        disableRightAddonStyles\n      />\n    );\n  }\n);\n"],"names":["forwardRef","Button","getIcon","useEnsuredId","useToggle","password","passwordInput","passwordInputToggle","TextField","Password","props","ref","id","propId","name","className","inputClassName","visibilityIcon","propVisibilityIcon","visibilityLabel","visibilityProps","remaining","toggled","isPasswordVisible","toggle","currentVisibilityIcon","visible","invisible","type","rightAddon","buttonType","aria-label","aria-pressed","onClick","event","isPropagationStopped","children","disableRightAddonStyles"],"mappings":"AAAA;;AACA,SAASA,UAAU,QAAwB,QAAQ;AACnD,SAASC,MAAM,QAA0B,sBAAsB;AAC/D,SAASC,OAAO,QAAQ,wBAAwB;AAEhD,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,SAAS,QAAQ,kBAAkB;AAC5C,SACEC,QAAQ,EACRC,aAAa,EACbC,mBAAmB,QACd,sBAAsB;AAC7B,SAASC,SAAS,QAA6B,iBAAiB;AA+GhE;;;;;;;;;;;;;;;;;;CAkBC,GACD,OAAO,MAAMC,yBAAWT,WACtB,SAASS,SAASC,KAAK,EAAEC,GAAG;IAC1B,MAAM,EACJC,IAAIC,MAAM,EACVC,OAAO,UAAU,EACjBC,SAAS,EACTC,cAAc,EACdC,gBAAgBC,kBAAkB,EAClCC,kBAAkB,eAAe,EACjCC,eAAe,EACf,GAAGC,WACJ,GAAGX;IACJ,MAAM,EAAEY,SAASC,iBAAiB,EAAEC,MAAM,EAAE,GAAGpB,UAAU;IAEzD,IAAIqB;IACJ,IACEP,sBACA,OAAOA,uBAAuB,YAC9B,aAAaA,oBACb;QACAO,wBAAwBF,oBACpBL,mBAAmBQ,OAAO,GAC1BR,mBAAmBS,SAAS;IAClC,OAAO,IAAI,OAAOT,uBAAuB,YAAY;QACnDO,wBAAwBP,mBAAmBK;IAC7C,OAAO;QACLE,wBAAwBP;IAC1B;IAEA,MAAMN,KAAKT,aAAaU,QAAQ;IAChC,MAAMI,iBAAiBf,QAAQ,YAAYuB;IAE3C,qBACE,KAACjB;QACE,GAAGa,SAAS;QACbV,KAAKA;QACLG,MAAMA;QACNc,MAAML,oBAAoB,SAAS;QACnCR,WAAWV,SAAS;YAAEU;QAAU;QAChCC,gBAAgBV,cAAc;YAAES,WAAWC;QAAe;QAC1Da,0BACE,KAAC5B;YACCW,IAAI,CAAC,EAAEA,GAAG,OAAO,CAAC;YAClBkB,YAAW;YACXC,cAAYZ;YACZa,gBAAcT;YAIb,GAAGH,eAAe;YACnBL,WAAWR,oBAAoB;gBAC7BQ,WAAWK,iBAAiBL;YAC9B;YACAkB,SAAS,CAACC;gBACRd,iBAAiBa,UAAUC;gBAC3B,IAAIA,MAAMC,oBAAoB,IAAI;oBAChC;gBACF;gBAEAX;YACF;sBAECJ,iBAAiBgB,YAAYnB;;QAGlCoB,uBAAuB;;AAG7B,GACA"}
+{"version":3,"sources":["../../src/form/Password.tsx"],"sourcesContent":["\"use client\";\nimport { forwardRef, type ReactNode } from \"react\";\nimport { Button, type ButtonProps } from \"../button/Button.js\";\nimport { getIcon } from \"../icon/iconConfig.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { useToggle } from \"../useToggle.js\";\nimport {\n  password,\n  passwordInput,\n  passwordInputToggle,\n} from \"./passwordStyles.js\";\nimport { TextField, type TextFieldProps } from \"./TextField.js\";\n\n/**\n * @example Simple Example\n * ```tsx\n * const getVisibilityIcon: GetPasswordVisibilityIcon = (isPasswordVisible) => {\n *   if (isPasswordVisible) {\n *     return <SecurityIcon />;\n *   }\n *\n *   return <RemoveRedEyeIcon />;\n * };\n * ```\n *\n * @param isPasswordVisible - `true` when the password is visible and in plain\n * text\n * @returns a custom icon to use for the password visibility toggle.\n */\nexport type GetPasswordVisibilityIcon = (\n  isPasswordVisible: boolean\n) => ReactNode;\n\n/**\n * @example Simple Example\n * ```tsx\n * const visibilityIcon: ConfigurableVisibilityIcon = {\n *   visible: <SecurityIcon />,\n *   invisible: <RemoveRedEyeIcon />,\n * };\n * ```\n */\nexport interface ConfigurableVisibilityIcon {\n  /**\n   * The icon to display while the password is currently visible as plain text.\n   */\n  visible: ReactNode;\n\n  /**\n   * The icon to display while the password is currently invisible as the\n   * password input.\n   */\n  invisible: ReactNode;\n}\n\nexport interface PasswordProps\n  extends Omit<TextFieldProps, \"type\" | \"rightAddon\"> {\n  /**\n   * @defaultValue `\"password\"`\n   * @since 6.0.0 Defaults to `\"password\"`\n   */\n  name?: string;\n\n  /**\n   * @example Configurable Visibility Icon Object\n   * ```tsx\n   * <Password\n   *   {...props}\n   *   visibilityIcon={{\n   *     visible: <SecurityIcon />,\n   *     invisible: <RemoveRedEyeIcon />,\n   *   }}\n   * />\n   * ```\n   *\n   * @example Get Password Visibility Icon Function\n   * ```tsx\n   * <Password\n   *   {...props}\n   *   visibilityIcon={(isPasswordVisible) => {\n   *     if (isPasswordVisible) {\n   *       return <SecurityIcon />;\n   *     }\n   *\n   *     return <RemoveRedEyeIcon />;\n   *   }}\n   * />\n   * ```\n   *\n   * @example Custom Icon\n   * ```tsx\n   * <Password\n   *   {...props}\n   *   visibilityIcon={<SomeCustomComponent />}\n   * />\n   * ```\n   */\n  visibilityIcon?:\n    | ConfigurableVisibilityIcon\n    | GetPasswordVisibilityIcon\n    | ReactNode;\n\n  /**\n   * The `aria-label` to use for the password visibility icon button.\n   *\n   * @defaultValue `\"Show password\"`\n   */\n  visibilityLabel?: string;\n\n  /**\n   * Any props that should be passed to the password visibility icon button. If\n   * `id`, `buttonType`, `aria-label`, `aria-pressed`, or `children` are\n   * provided here, they will override the default implementation.\n   */\n  visibilityProps?: PropsWithRef<ButtonProps, HTMLButtonElement>;\n}\n\n/**\n * **Client Component**\n *\n * @example Simple Example\n * ```tsx\n * import { Password } from \"@react-md/core\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <Password\n *       label=\"Password\"\n *       name=\"password\"\n *       required\n *     />\n *   );\n * }\n * ```\n */\nexport const Password = forwardRef<HTMLInputElement, PasswordProps>(\n  function Password(props, ref) {\n    const {\n      id: propId,\n      name = \"password\",\n      className,\n      inputClassName,\n      visibilityIcon: propVisibilityIcon,\n      visibilityLabel = \"Show password\",\n      visibilityProps,\n      ...remaining\n    } = props;\n    const { toggled: isPasswordVisible, toggle } = useToggle(false);\n\n    let currentVisibilityIcon: ReactNode;\n    if (\n      propVisibilityIcon &&\n      typeof propVisibilityIcon === \"object\" &&\n      \"visible\" in propVisibilityIcon\n    ) {\n      currentVisibilityIcon = isPasswordVisible\n        ? propVisibilityIcon.visible\n        : propVisibilityIcon.invisible;\n    } else if (typeof propVisibilityIcon === \"function\") {\n      currentVisibilityIcon = propVisibilityIcon(isPasswordVisible);\n    } else {\n      currentVisibilityIcon = propVisibilityIcon;\n    }\n\n    const id = useEnsuredId(propId, \"password\");\n    const visibilityIcon = getIcon(\"password\", currentVisibilityIcon);\n\n    return (\n      <TextField\n        {...remaining}\n        ref={ref}\n        name={name}\n        type={isPasswordVisible ? \"text\" : \"password\"}\n        className={password({ className })}\n        inputClassName={passwordInput({ className: inputClassName })}\n        rightAddon={\n          <Button\n            id={`${id}-toggle`}\n            buttonType=\"icon\"\n            aria-label={visibilityLabel}\n            aria-pressed={isPasswordVisible}\n            // allow all props except the onClick, className, and aria-pressed to\n            // be overridden. onClick can only stop default behavior with\n            // `event.stopPropagation()`\n            {...visibilityProps}\n            className={passwordInputToggle({\n              className: visibilityProps?.className,\n            })}\n            onClick={(event) => {\n              visibilityProps?.onClick?.(event);\n              if (event.isPropagationStopped()) {\n                return;\n              }\n\n              toggle();\n            }}\n          >\n            {visibilityProps?.children ?? visibilityIcon}\n          </Button>\n        }\n        disableRightAddonStyles\n      />\n    );\n  }\n);\n"],"names":["forwardRef","Button","getIcon","useEnsuredId","useToggle","password","passwordInput","passwordInputToggle","TextField","Password","props","ref","id","propId","name","className","inputClassName","visibilityIcon","propVisibilityIcon","visibilityLabel","visibilityProps","remaining","toggled","isPasswordVisible","toggle","currentVisibilityIcon","visible","invisible","type","rightAddon","buttonType","aria-label","aria-pressed","onClick","event","isPropagationStopped","children","disableRightAddonStyles"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;AACA,SAASA,UAAU,QAAwB,QAAQ;AACnD,SAASC,MAAM,QAA0B,sBAAsB;AAC/D,SAASC,OAAO,QAAQ,wBAAwB;AAEhD,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,SAAS,QAAQ,kBAAkB;AAC5C,SACEC,QAAQ,EACRC,aAAa,EACbC,mBAAmB,QACd,sBAAsB;AAC7B,SAASC,SAAS,QAA6B,iBAAiB;AA0GhE;;;;;;;;;;;;;;;;;CAiBC,GACD,OAAO,MAAMC,yBAAWT,WACtB,SAASS,SAASC,KAAK,EAAEC,GAAG;IAC1B,MAAM,EACJC,IAAIC,MAAM,EACVC,OAAO,UAAU,EACjBC,SAAS,EACTC,cAAc,EACdC,gBAAgBC,kBAAkB,EAClCC,kBAAkB,eAAe,EACjCC,eAAe,EACf,GAAGC,WACJ,GAAGX;IACJ,MAAM,EAAEY,SAASC,iBAAiB,EAAEC,MAAM,EAAE,GAAGpB,UAAU;IAEzD,IAAIqB;IACJ,IACEP,sBACA,OAAOA,uBAAuB,YAC9B,aAAaA,oBACb;QACAO,wBAAwBF,oBACpBL,mBAAmBQ,OAAO,GAC1BR,mBAAmBS,SAAS;IAClC,OAAO,IAAI,OAAOT,uBAAuB,YAAY;QACnDO,wBAAwBP,mBAAmBK;IAC7C,OAAO;QACLE,wBAAwBP;IAC1B;IAEA,MAAMN,KAAKT,aAAaU,QAAQ;IAChC,MAAMI,iBAAiBf,QAAQ,YAAYuB;IAE3C,qBACE,KAACjB;QACE,GAAGa,SAAS;QACbV,KAAKA;QACLG,MAAMA;QACNc,MAAML,oBAAoB,SAAS;QACnCR,WAAWV,SAAS;YAAEU;QAAU;QAChCC,gBAAgBV,cAAc;YAAES,WAAWC;QAAe;QAC1Da,0BACE,KAAC5B;YACCW,IAAI,CAAC,EAAEA,GAAG,OAAO,CAAC;YAClBkB,YAAW;YACXC,cAAYZ;YACZa,gBAAcT;YAIb,GAAGH,eAAe;YACnBL,WAAWR,oBAAoB;gBAC7BQ,WAAWK,iBAAiBL;YAC9B;YACAkB,SAAS,CAACC;gBACRd,iBAAiBa,UAAUC;gBAC3B,IAAIA,MAAMC,oBAAoB,IAAI;oBAChC;gBACF;gBAEAX;YACF;sBAECJ,iBAAiBgB,YAAYnB;;QAGlCoB,uBAAuB;;AAG7B,GACA"}

package/dist/form/Radio.d.ts

@@ -6,8 +6,7 @@ import { type RadioProps } from "./InputToggle.js";
  * You'll generally want to use the `useRadioGroup` hook along with this
  * component.
  *
- * @example
- * Simple Example
+ * @example Simple Example
  * ```tsx
  * const { value, getRadioProps } = useRadioGroup({ name: "group" });
  *

package/dist/form/Radio.js

@@ -8,8 +8,7 @@ import { InputToggle } from "./InputToggle.js";
  * You'll generally want to use the `useRadioGroup` hook along with this
  * component.
  *
- * @example
- * Simple Example
+ * @example Simple Example
  * ```tsx
  * const { value, getRadioProps } = useRadioGroup({ name: "group" });
  *

package/dist/form/Radio.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/Radio.tsx"],"sourcesContent":["\"use client\";\nimport { forwardRef } from \"react\";\nimport { InputToggle, type RadioProps } from \"./InputToggle.js\";\n\n/**\n * **Client Component**\n *\n * You'll generally want to use the `useRadioGroup` hook along with this\n * component.\n *\n * @example\n * Simple Example\n * ```tsx\n * const { value, getRadioProps } = useRadioGroup({ name: \"group\" });\n *\n * return (\n *   <>\n *     <Radio {...getRadioProps(\"a\")} label=\"First\" />\n *     <Radio {...getRadioProps(\"b\")} label=\"Second\" />\n *     <Radio {...getRadioProps(\"c\")} label=\"Third\" />\n *   </>\n * );\n * ```\n */\nexport const Radio = forwardRef<HTMLInputElement, RadioProps>(\n  function Radio(props, ref) {\n    return <InputToggle {...props} ref={ref} type=\"radio\" />;\n  }\n);\n"],"names":["forwardRef","InputToggle","Radio","props","ref","type"],"mappings":"AAAA;;AACA,SAASA,UAAU,QAAQ,QAAQ;AACnC,SAASC,WAAW,QAAyB,mBAAmB;AAEhE;;;;;;;;;;;;;;;;;;;CAmBC,GACD,OAAO,MAAMC,sBAAQF,WACnB,SAASE,MAAMC,KAAK,EAAEC,GAAG;IACvB,qBAAO,KAACH;QAAa,GAAGE,KAAK;QAAEC,KAAKA;QAAKC,MAAK;;AAChD,GACA"}
+{"version":3,"sources":["../../src/form/Radio.tsx"],"sourcesContent":["\"use client\";\nimport { forwardRef } from \"react\";\nimport { InputToggle, type RadioProps } from \"./InputToggle.js\";\n\n/**\n * **Client Component**\n *\n * You'll generally want to use the `useRadioGroup` hook along with this\n * component.\n *\n * @example Simple Example\n * ```tsx\n * const { value, getRadioProps } = useRadioGroup({ name: \"group\" });\n *\n * return (\n *   <>\n *     <Radio {...getRadioProps(\"a\")} label=\"First\" />\n *     <Radio {...getRadioProps(\"b\")} label=\"Second\" />\n *     <Radio {...getRadioProps(\"c\")} label=\"Third\" />\n *   </>\n * );\n * ```\n */\nexport const Radio = forwardRef<HTMLInputElement, RadioProps>(\n  function Radio(props, ref) {\n    return <InputToggle {...props} ref={ref} type=\"radio\" />;\n  }\n);\n"],"names":["forwardRef","InputToggle","Radio","props","ref","type"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;AACA,SAASA,UAAU,QAAQ,QAAQ;AACnC,SAASC,WAAW,QAAyB,mBAAmB;AAEhE;;;;;;;;;;;;;;;;;;CAkBC,GACD,OAAO,MAAMC,sBAAQF,WACnB,SAASE,MAAMC,KAAK,EAAEC,GAAG;IACvB,qBAAO,KAACH;QAAa,GAAGE,KAAK;QAAEC,KAAKA;QAAKC,MAAK;;AAChD,GACA"}

package/dist/form/ResizingTextAreaWrapper.d.ts

@@ -1,6 +1,6 @@
 import { type CSSProperties, type HTMLAttributes, type Ref, type TextareaHTMLAttributes } from "react";
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  * @internal
  */
 export interface ResizingTextAreaWrapperProps extends HTMLAttributes<HTMLDivElement> {
@@ -13,7 +13,7 @@ export interface ResizingTextAreaWrapperProps extends HTMLAttributes<HTMLDivElem
     disableTransition?: boolean;
 }
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  * @internal
  */
 export declare const ResizingTextAreaWrapper: import("react").ForwardRefExoticComponent<ResizingTextAreaWrapperProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/form/ResizingTextAreaWrapper.js

@@ -3,7 +3,7 @@ import { cnb } from "cnbuilder";
 import { forwardRef } from "react";
 import { textArea } from "./textAreaStyles.js";
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  * @internal
  */ export const ResizingTextAreaWrapper = /*#__PURE__*/ forwardRef(function ResizingTextAreaWrapper(props, ref) {
     const { className, rows, maskId, maskRef, areaStyle, areaClassName, defaultValue, disableTransition, children, ...remaining } = props;

package/dist/form/ResizingTextAreaWrapper.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/ResizingTextAreaWrapper.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport {\n  forwardRef,\n  type CSSProperties,\n  type HTMLAttributes,\n  type Ref,\n  type TextareaHTMLAttributes,\n} from \"react\";\nimport { textArea } from \"./textAreaStyles.js\";\n\n/**\n * @remarks \\@since 6.0.0\n * @internal\n */\nexport interface ResizingTextAreaWrapperProps\n  extends HTMLAttributes<HTMLDivElement> {\n  maskId: string;\n  maskRef: Ref<HTMLTextAreaElement>;\n  defaultValue?: TextareaHTMLAttributes<HTMLTextAreaElement>[\"defaultValue\"];\n  rows: number;\n  areaStyle?: CSSProperties;\n  areaClassName?: string;\n  disableTransition?: boolean;\n}\n\n/**\n * @remarks \\@since 6.0.0\n * @internal\n */\nexport const ResizingTextAreaWrapper = forwardRef<\n  HTMLDivElement,\n  ResizingTextAreaWrapperProps\n>(function ResizingTextAreaWrapper(props, ref) {\n  const {\n    className,\n    rows,\n    maskId,\n    maskRef,\n    areaStyle,\n    areaClassName,\n    defaultValue,\n    disableTransition,\n    children,\n    ...remaining\n  } = props;\n\n  return (\n    <div\n      {...remaining}\n      ref={ref}\n      className={cnb(\n        \"rmd-textarea-container__inner\",\n        !disableTransition && \"rmd-textarea-container__inner--animate\",\n        className\n      )}\n    >\n      {children}\n      <textarea\n        aria-hidden\n        id={maskId}\n        ref={maskRef}\n        defaultValue={defaultValue}\n        readOnly\n        tabIndex={-1}\n        rows={rows}\n        style={areaStyle}\n        className={textArea({\n          mask: true,\n          resize: \"auto\",\n          className: areaClassName,\n        })}\n      />\n    </div>\n  );\n});\n"],"names":["cnb","forwardRef","textArea","ResizingTextAreaWrapper","props","ref","className","rows","maskId","maskRef","areaStyle","areaClassName","defaultValue","disableTransition","children","remaining","div","textarea","aria-hidden","id","readOnly","tabIndex","style","mask","resize"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SACEC,UAAU,QAKL,QAAQ;AACf,SAASC,QAAQ,QAAQ,sBAAsB;AAiB/C;;;CAGC,GACD,OAAO,MAAMC,wCAA0BF,WAGrC,SAASE,wBAAwBC,KAAK,EAAEC,GAAG;IAC3C,MAAM,EACJC,SAAS,EACTC,IAAI,EACJC,MAAM,EACNC,OAAO,EACPC,SAAS,EACTC,aAAa,EACbC,YAAY,EACZC,iBAAiB,EACjBC,QAAQ,EACR,GAAGC,WACJ,GAAGX;IAEJ,qBACE,MAACY;QACE,GAAGD,SAAS;QACbV,KAAKA;QACLC,WAAWN,IACT,iCACA,CAACa,qBAAqB,0CACtBP;;YAGDQ;0BACD,KAACG;gBACCC,aAAW;gBACXC,IAAIX;gBACJH,KAAKI;gBACLG,cAAcA;gBACdQ,QAAQ;gBACRC,UAAU,CAAC;gBACXd,MAAMA;gBACNe,OAAOZ;gBACPJ,WAAWJ,SAAS;oBAClBqB,MAAM;oBACNC,QAAQ;oBACRlB,WAAWK;gBACb;;;;AAIR,GAAG"}
+{"version":3,"sources":["../../src/form/ResizingTextAreaWrapper.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport {\n  forwardRef,\n  type CSSProperties,\n  type HTMLAttributes,\n  type Ref,\n  type TextareaHTMLAttributes,\n} from \"react\";\nimport { textArea } from \"./textAreaStyles.js\";\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport interface ResizingTextAreaWrapperProps\n  extends HTMLAttributes<HTMLDivElement> {\n  maskId: string;\n  maskRef: Ref<HTMLTextAreaElement>;\n  defaultValue?: TextareaHTMLAttributes<HTMLTextAreaElement>[\"defaultValue\"];\n  rows: number;\n  areaStyle?: CSSProperties;\n  areaClassName?: string;\n  disableTransition?: boolean;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport const ResizingTextAreaWrapper = forwardRef<\n  HTMLDivElement,\n  ResizingTextAreaWrapperProps\n>(function ResizingTextAreaWrapper(props, ref) {\n  const {\n    className,\n    rows,\n    maskId,\n    maskRef,\n    areaStyle,\n    areaClassName,\n    defaultValue,\n    disableTransition,\n    children,\n    ...remaining\n  } = props;\n\n  return (\n    <div\n      {...remaining}\n      ref={ref}\n      className={cnb(\n        \"rmd-textarea-container__inner\",\n        !disableTransition && \"rmd-textarea-container__inner--animate\",\n        className\n      )}\n    >\n      {children}\n      <textarea\n        aria-hidden\n        id={maskId}\n        ref={maskRef}\n        defaultValue={defaultValue}\n        readOnly\n        tabIndex={-1}\n        rows={rows}\n        style={areaStyle}\n        className={textArea({\n          mask: true,\n          resize: \"auto\",\n          className: areaClassName,\n        })}\n      />\n    </div>\n  );\n});\n"],"names":["cnb","forwardRef","textArea","ResizingTextAreaWrapper","props","ref","className","rows","maskId","maskRef","areaStyle","areaClassName","defaultValue","disableTransition","children","remaining","div","textarea","aria-hidden","id","readOnly","tabIndex","style","mask","resize"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SACEC,UAAU,QAKL,QAAQ;AACf,SAASC,QAAQ,QAAQ,sBAAsB;AAiB/C;;;CAGC,GACD,OAAO,MAAMC,wCAA0BF,WAGrC,SAASE,wBAAwBC,KAAK,EAAEC,GAAG;IAC3C,MAAM,EACJC,SAAS,EACTC,IAAI,EACJC,MAAM,EACNC,OAAO,EACPC,SAAS,EACTC,aAAa,EACbC,YAAY,EACZC,iBAAiB,EACjBC,QAAQ,EACR,GAAGC,WACJ,GAAGX;IAEJ,qBACE,MAACY;QACE,GAAGD,SAAS;QACbV,KAAKA;QACLC,WAAWN,IACT,iCACA,CAACa,qBAAqB,0CACtBP;;YAGDQ;0BACD,KAACG;gBACCC,aAAW;gBACXC,IAAIX;gBACJH,KAAKI;gBACLG,cAAcA;gBACdQ,QAAQ;gBACRC,UAAU,CAAC;gBACXd,MAAMA;gBACNe,OAAOZ;gBACPJ,WAAWJ,SAAS;oBAClBqB,MAAM;oBACNC,QAAQ;oBACRlB,WAAWK;gBACb;;;;AAIR,GAAG"}

package/dist/form/Select.d.ts

@@ -13,8 +13,7 @@ import { type UserAgentAutocompleteProps } from "./types.js";
  * invalid value. This also does not work for numbers, so you will need to
  * implement that yourself.
  *
- * @example
- * Simple Usage
+ * @example Simple Usage
  * ```tsx
  * import type { SelectedChangeEvent } from "@react-md/core";
  * import { Select, Option } from "@react-md/core";
@@ -45,7 +44,7 @@ import { type UserAgentAutocompleteProps } from "./types.js";
  *   );
  * }
  * ```
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export type SelectChangeEvent<Value extends string> = ChangeEvent<HTMLInputElement> & {
     currentTarget: {
@@ -53,7 +52,7 @@ export type SelectChangeEvent<Value extends string> = ChangeEvent<HTMLInputEleme
     };
 };
 /**
- * @remarks \@since 6.0.0 Rewritten with a new API.
+ * @since 6.0.0 Rewritten with a new API.
  */
 export interface SelectProps<Value extends string> extends Omit<TextFieldContainerProps, "label">, Pick<InputHTMLAttributes<HTMLInputElement>, "form" | "required">, UserAgentAutocompleteProps {
     /**
@@ -156,8 +155,7 @@ export interface SelectProps<Value extends string> extends Omit<TextFieldContain
 /**
  * **Client Component**
  *
- * @example
- * Simple Example
+ * @example Simple Example
  * ```tsx
  * import { Select, Option } from "react-md";
  * import { useState, type ReactElement } from "react";
@@ -181,8 +179,7 @@ export interface SelectProps<Value extends string> extends Omit<TextFieldContain
  * }
  * ```
  *
- * @example
- * Testing
+ * @example Testing
  * ```tsx
  * rmdRender(
  *   <Select label="Select" selectedOptionProps={{ "data-testid": "selected" }}>
@@ -207,6 +204,6 @@ export interface SelectProps<Value extends string> extends Omit<TextFieldContain
  * expect(selectInput).toHaveValue("b");
  * ```
  *
- * @remarks \@since 6.0.0 Rewritten with a new API.
+ * @since 6.0.0 Rewritten with a new API.
  */
 export declare function Select<Value extends string>(props: RequireAtLeastOne<SelectProps<Value>, "label" | keyof LabelA11y>): ReactElement;

package/dist/form/Select.js

@@ -25,8 +25,7 @@ const noop = ()=>{
 /**
  * **Client Component**
  *
- * @example
- * Simple Example
+ * @example Simple Example
  * ```tsx
  * import { Select, Option } from "react-md";
  * import { useState, type ReactElement } from "react";
@@ -50,8 +49,7 @@ const noop = ()=>{
  * }
  * ```
  *
- * @example
- * Testing
+ * @example Testing
  * ```tsx
  * rmdRender(
  *   <Select label="Select" selectedOptionProps={{ "data-testid": "selected" }}>
@@ -76,7 +74,7 @@ const noop = ()=>{
  * expect(selectInput).toHaveValue("b");
  * ```
  *
- * @remarks \@since 6.0.0 Rewritten with a new API.
+ * @since 6.0.0 Rewritten with a new API.
  */ export function Select(props) {
     const { id, form, autoCompleteValue, autoComplete = autoCompleteValue, name = autoCompleteValue, className, onClick, onFocus, onKeyDown, inputRef: propInputRef, inputProps, containerRef, placeholder, menuProps = {}, label, labelProps = {}, selectedOptionProps, icon: propIcon, value, defaultValue, theme: propTheme, onChange = noop, rightAddon: propRightAddon, active = false, required, selectedIconAfter = false, disableOptionAddon = false, disableSelectedIcon = false, children, ...remaining } = props;
     const { dense, error, disabled } = props;