@react-md/core 1.0.0-next.19 → 1.0.0-next.20

package/dist/icon/SVGIcon.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/icon/SVGIcon.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes, type ReactNode } from \"react\";\nimport { icon, type SVGIconClassNameOptions } from \"./styles.js\";\n\n/**\n * @since 6.0.0 Added the `inline` and `theme` props.\n */\nexport interface SVGIconProps\n  extends HTMLAttributes<SVGSVGElement>,\n    SVGIconClassNameOptions {\n  /**\n   * Boolean if the SVG should gain the `focusable` attribute. This is disabled\n   * by default since IE11 and Edge actually default this to true and keyboard's\n   * will tab focus all SVGs.\n   *\n   * @defaultValue `false`\n   */\n  focusable?: \"false\" | \"true\" | boolean;\n\n  /**\n   * The `viewBox` attribute allows you to specify that a given set of graphics\n   * stretch to fit a particular container element.\n   *\n   * The value of the `viewBox` attribute is a list of four numbers min-x,\n   * min-y, width and height, separated by white space and/or a comma, which\n   * specify a rectangle in user space which should be mapped to the bounds of\n   * the viewport established by the given element, taking into account\n   * attribute `preserveAspectRatio`.\n   *\n   * Negative values for width or height are not permitted and a value of zero\n   * disables rendering of the element. An optional `viewbox` for the SVG.\n   *\n   * For example, if the SVG element is 250 (width) by 200 (height) and you\n   * provide `viewBox=\"0 0 25 20\"`, the coordinates inside the SVG will go from\n   * the top left corner (0, 0) to the bottom right (25, 20) and each unit will\n   * be worth `10px`.\n   *\n   * @defaultValue `\"0 0 24 24\"`\n   */\n  viewBox?: string;\n\n  /**\n   * An optional `xmlns` string to provide. The `use` prop will not work without\n   * this prop defined.\n   *\n   *\n   * Note: The default value will be `undefined` unless the {@link use} prop is\n   * defined.\n   *\n   * @defaultValue `\"http://www.w3.org/2000/svg\"`\n   */\n  xmlns?: string;\n\n  /**\n   * This should be a link to a part of an SVG sprite map. So normally one of\n   * the following:\n   * - `'#some-custom-svg'`\n   * - `'/images/spritemap.svg#some-custom-svg'`\n   *\n   * This prop **should not** be used with the `children` prop as only one will\n   * be rendered.\n   *\n   *\n   * NOTE: IE **does not support** external SVGs. Please see the demo for more\n   * details.\n   */\n  use?: string;\n\n  /**\n   * Any `<svg>` children to render to create your icon. This can not be used\n   * with the `use` prop.\n   */\n  children?: ReactNode;\n}\n\n/**\n * The `SVGIcon` component is used to render inline SVG icons or SVG icons in a\n * sprite map as an icon.\n */\nexport const SVGIcon = forwardRef<SVGSVGElement, SVGIconProps>(\n  function SVGIcon(props, ref) {\n    const {\n      \"aria-hidden\": ariaHidden = true,\n      focusable = \"false\",\n      use,\n      xmlns = use ? \"http://www.w3.org/2000/svg\" : undefined,\n      viewBox = \"0 0 24 24\",\n      dense = false,\n      className,\n      theme,\n      inline,\n      children: propChildren,\n      ...remaining\n    } = props;\n\n    let children = propChildren;\n    if (!children && use) {\n      children = <use xlinkHref={use} />;\n    }\n\n    return (\n      <svg\n        {...remaining}\n        aria-hidden={ariaHidden}\n        ref={ref}\n        className={icon({\n          type: \"svg\",\n          dense,\n          theme,\n          inline,\n          className,\n        })}\n        focusable={focusable}\n        xmlns={xmlns}\n        viewBox={viewBox}\n      >\n        {children}\n      </svg>\n    );\n  }\n);\n"],"names":["forwardRef","icon","SVGIcon","props","ref","ariaHidden","focusable","use","xmlns","undefined","viewBox","dense","className","theme","inline","children","propChildren","remaining","xlinkHref","svg","aria-hidden","type"],"mappings":";AAAA,SAASA,UAAU,QAA6C,QAAQ;AACxE,SAASC,IAAI,QAAsC,cAAc;AAyEjE;;;CAGC,GACD,OAAO,MAAMC,wBAAUF,WACrB,SAASE,QAAQC,KAAK,EAAEC,GAAG;IACzB,MAAM,EACJ,eAAeC,aAAa,IAAI,EAChCC,YAAY,OAAO,EACnBC,GAAG,EACHC,QAAQD,MAAM,+BAA+BE,SAAS,EACtDC,UAAU,WAAW,EACrBC,QAAQ,KAAK,EACbC,SAAS,EACTC,KAAK,EACLC,MAAM,EACNC,UAAUC,YAAY,EACtB,GAAGC,WACJ,GAAGd;IAEJ,IAAIY,WAAWC;IACf,IAAI,CAACD,YAAYR,KAAK;QACpBQ,yBAAW,KAACR;YAAIW,WAAWX;;IAC7B;IAEA,qBACE,KAACY;QACE,GAAGF,SAAS;QACbG,eAAaf;QACbD,KAAKA;QACLQ,WAAWX,KAAK;YACdoB,MAAM;YACNV;YACAE;YACAC;YACAF;QACF;QACAN,WAAWA;QACXE,OAAOA;QACPE,SAASA;kBAERK;;AAGP,GACA"}
+{"version":3,"sources":["../../src/icon/SVGIcon.tsx"],"sourcesContent":["import { type HTMLAttributes, type ReactNode, forwardRef } from \"react\";\n\nimport { type SVGIconClassNameOptions, icon } from \"./styles.js\";\n\n/**\n * @since 6.0.0 Added the `inline` and `theme` props.\n */\nexport interface SVGIconProps\n  extends HTMLAttributes<SVGSVGElement>,\n    SVGIconClassNameOptions {\n  /**\n   * Boolean if the SVG should gain the `focusable` attribute. This is disabled\n   * by default since IE11 and Edge actually default this to true and keyboard's\n   * will tab focus all SVGs.\n   *\n   * @defaultValue `false`\n   */\n  focusable?: \"false\" | \"true\" | boolean;\n\n  /**\n   * The `viewBox` attribute allows you to specify that a given set of graphics\n   * stretch to fit a particular container element.\n   *\n   * The value of the `viewBox` attribute is a list of four numbers min-x,\n   * min-y, width and height, separated by white space and/or a comma, which\n   * specify a rectangle in user space which should be mapped to the bounds of\n   * the viewport established by the given element, taking into account\n   * attribute `preserveAspectRatio`.\n   *\n   * Negative values for width or height are not permitted and a value of zero\n   * disables rendering of the element. An optional `viewbox` for the SVG.\n   *\n   * For example, if the SVG element is 250 (width) by 200 (height) and you\n   * provide `viewBox=\"0 0 25 20\"`, the coordinates inside the SVG will go from\n   * the top left corner (0, 0) to the bottom right (25, 20) and each unit will\n   * be worth `10px`.\n   *\n   * @defaultValue `\"0 0 24 24\"`\n   */\n  viewBox?: string;\n\n  /**\n   * An optional `xmlns` string to provide. The `use` prop will not work without\n   * this prop defined.\n   *\n   *\n   * Note: The default value will be `undefined` unless the {@link use} prop is\n   * defined.\n   *\n   * @defaultValue `\"http://www.w3.org/2000/svg\"`\n   */\n  xmlns?: string;\n\n  /**\n   * This should be a link to a part of an SVG sprite map. So normally one of\n   * the following:\n   * - `'#some-custom-svg'`\n   * - `'/images/spritemap.svg#some-custom-svg'`\n   *\n   * This prop **should not** be used with the `children` prop as only one will\n   * be rendered.\n   *\n   *\n   * NOTE: IE **does not support** external SVGs. Please see the demo for more\n   * details.\n   */\n  use?: string;\n\n  /**\n   * Any `<svg>` children to render to create your icon. This can not be used\n   * with the `use` prop.\n   */\n  children?: ReactNode;\n}\n\n/**\n * The `SVGIcon` component is used to render inline SVG icons or SVG icons in a\n * sprite map as an icon.\n */\nexport const SVGIcon = forwardRef<SVGSVGElement, SVGIconProps>(\n  function SVGIcon(props, ref) {\n    const {\n      \"aria-hidden\": ariaHidden = true,\n      focusable = \"false\",\n      use,\n      xmlns = use ? \"http://www.w3.org/2000/svg\" : undefined,\n      viewBox = \"0 0 24 24\",\n      dense = false,\n      className,\n      theme,\n      inline,\n      children: propChildren,\n      ...remaining\n    } = props;\n\n    let children = propChildren;\n    if (!children && use) {\n      children = <use xlinkHref={use} />;\n    }\n\n    return (\n      <svg\n        {...remaining}\n        aria-hidden={ariaHidden}\n        ref={ref}\n        className={icon({\n          type: \"svg\",\n          dense,\n          theme,\n          inline,\n          className,\n        })}\n        focusable={focusable}\n        xmlns={xmlns}\n        viewBox={viewBox}\n      >\n        {children}\n      </svg>\n    );\n  }\n);\n"],"names":["forwardRef","icon","SVGIcon","props","ref","ariaHidden","focusable","use","xmlns","undefined","viewBox","dense","className","theme","inline","children","propChildren","remaining","xlinkHref","svg","aria-hidden","type"],"mappings":";AAAA,SAA8CA,UAAU,QAAQ,QAAQ;AAExE,SAAuCC,IAAI,QAAQ,cAAc;AAyEjE;;;CAGC,GACD,OAAO,MAAMC,wBAAUF,WACrB,SAASE,QAAQC,KAAK,EAAEC,GAAG;IACzB,MAAM,EACJ,eAAeC,aAAa,IAAI,EAChCC,YAAY,OAAO,EACnBC,GAAG,EACHC,QAAQD,MAAM,+BAA+BE,SAAS,EACtDC,UAAU,WAAW,EACrBC,QAAQ,KAAK,EACbC,SAAS,EACTC,KAAK,EACLC,MAAM,EACNC,UAAUC,YAAY,EACtB,GAAGC,WACJ,GAAGd;IAEJ,IAAIY,WAAWC;IACf,IAAI,CAACD,YAAYR,KAAK;QACpBQ,yBAAW,KAACR;YAAIW,WAAWX;;IAC7B;IAEA,qBACE,KAACY;QACE,GAAGF,SAAS;QACbG,eAAaf;QACbD,KAAKA;QACLQ,WAAWX,KAAK;YACdoB,MAAM;YACNV;YACAE;YACAC;YACAF;QACF;QACAN,WAAWA;QACXE,OAAOA;QACPE,SAASA;kBAERK;;AAGP,GACA"}

package/dist/icon/TextIconSpacing.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/icon/TextIconSpacing.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport {\n  Children,\n  cloneElement,\n  isValidElement,\n  type ReactElement,\n  type ReactNode,\n} from \"react\";\n\nexport interface TextIconSpacingProps {\n  /**\n   * An optional className to apply to the surrounding `<span>` when the\n   * `forceIconWrap` prop is enabled or the icon is not a valid React Element.\n   * If the `forceIconWrap` prop is not enabled, it will be cloned into the icon\n   * instead.\n   */\n  className?: string;\n\n  /**\n   * An optional icon to display with a text button. This is invalid for icon\n   * buttons. If this is a single element, a new class name will be cloned into\n   * the element to get correct spacing so if you have a custom icon element,\n   * you **must** also pass that class name down. If you are using one of the\n   * react-md icon component packages, this is handled automatically.\n   *\n   * If this is not a valid react element, the icon will be wrapped in a\n   * `<span>` instead with the class names applied.\n   */\n  icon?: ReactElement<{ className?: string }> | ReactNode;\n\n  /**\n   * Boolean if the icon should appear after the text instead of before.\n   *\n   * @defaultValue `false`\n   */\n  iconAfter?: boolean;\n\n  /**\n   * The children to render before or after the provided icon. This is defaulted\n   * to `null` so that providing a `null` icon will correctly render without\n   * React crashing.\n   *\n   * @defaultValue `null`\n   */\n  children?: ReactNode;\n\n  /**\n   * The class name to use for an icon that is placed before text.\n   *\n   * @defaultValue `\"rmd-icon--before\"`\n   */\n  beforeClassName?: string;\n\n  /**\n   * The class name to use for an icon that is placed after text.\n   *\n   * @defaultValue `\"rmd-icon--after\"`\n   */\n  afterClassName?: string;\n\n  /**\n   * The class name to use for an icon that is placed before above the text.\n   * This is used when the `stacked` prop is enabled and the `iconAfter` prop is\n   * disabled or omitted.\n   *\n   * @defaultValue `\"rmd-icon--above\"`\n   */\n  aboveClassName?: string;\n\n  /**\n   * The class name to use for an icon that is placed before above the text.\n   * This is used when the `stacked` prop is enabled and the `iconAfter` prop is\n   * enabled.\n   *\n   * @defaultValue `\"rmd-icon--below\"`\n   */\n  belowClassName?: string;\n\n  /**\n   * Boolean if the icon should be forced into a `<span>` with the class names\n   * applied instead of attempting to clone into the provided icon.\n   *\n   * @defaultValue `false`\n   */\n  forceIconWrap?: boolean;\n\n  /**\n   * Boolean if the icon and text should be stacked instead of inline. Note:\n   * You'll normally want to update the container element to have\n   * `display: flex` and `flex-direction: column` for this to work.\n   *\n   * @defaultValue `false`\n   */\n  stacked?: boolean;\n\n  /**\n   * Boolean if the icon and content are in a `column-reverse` or `row-reverse`\n   * `flex-direction`. This will swap the different classnames as needed.\n   *\n   * @since 2.5.0\n   * @defaultValue `false`\n   */\n  flexReverse?: boolean;\n}\n\n/**\n * Note: This component **must** be rendered within a flex container unless the\n * {@link TextIconSpacingProps.forceIconWrap} is set to `true`.\n *\n * @example Simple Example\n * ```tsx\n * import { TextIconSpacing, FontIcon } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <TextIconSpacing icon={<FontIcon>favorite</FontIcon>}>\n *       Favorite\n *     </TextIconSpacing>\n *   );\n * }\n * ```\n *\n * @example Stacked Example\n * ```tsx\n * import { TextIconSpacing, FontIcon } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <TextIconSpacing icon={<FontIcon>favorite</FontIcon>} stacked>\n *       Favorite\n *     </TextIconSpacing>\n *   );\n * }\n * ```\n */\nexport function TextIconSpacing(props: TextIconSpacingProps): ReactElement {\n  const {\n    className,\n    icon: propIcon,\n    children = null,\n    stacked = false,\n    iconAfter = false,\n    flexReverse = false,\n    forceIconWrap = false,\n    beforeClassName = \"rmd-icon--before\",\n    afterClassName = \"rmd-icon--after\",\n    aboveClassName = \"rmd-icon--above\",\n    belowClassName = \"rmd-icon--below\",\n  } = props;\n\n  if (!propIcon) {\n    return <>{children}</>;\n  }\n\n  const isAfter = flexReverse ? !iconAfter : iconAfter;\n  const baseClassName = cnb(\n    {\n      [beforeClassName]: !stacked && !isAfter,\n      [afterClassName]: !stacked && isAfter,\n      [aboveClassName]: stacked && !isAfter,\n      [belowClassName]: stacked && isAfter,\n    },\n    className\n  );\n\n  let iconEl = propIcon;\n  let content = children;\n  if (!forceIconWrap && isValidElement<{ className?: string }>(propIcon)) {\n    const icon = Children.only(propIcon);\n    iconEl = cloneElement(icon, {\n      className: cnb(baseClassName, icon.props.className),\n    });\n  } else if (propIcon) {\n    iconEl = (\n      <span className={cnb(\"rmd-text-icon-spacing\", baseClassName)}>\n        {propIcon}\n      </span>\n    );\n  }\n\n  if (iconEl) {\n    content = (\n      <>\n        {!iconAfter && iconEl}\n        {children}\n        {iconAfter && iconEl}\n      </>\n    );\n  }\n\n  return <>{content}</>;\n}\n"],"names":["cnb","Children","cloneElement","isValidElement","TextIconSpacing","props","className","icon","propIcon","children","stacked","iconAfter","flexReverse","forceIconWrap","beforeClassName","afterClassName","aboveClassName","belowClassName","isAfter","baseClassName","iconEl","content","only","span"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SACEC,QAAQ,EACRC,YAAY,EACZC,cAAc,QAGT,QAAQ;AAkGf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+BC,GACD,OAAO,SAASC,gBAAgBC,KAA2B;IACzD,MAAM,EACJC,SAAS,EACTC,MAAMC,QAAQ,EACdC,WAAW,IAAI,EACfC,UAAU,KAAK,EACfC,YAAY,KAAK,EACjBC,cAAc,KAAK,EACnBC,gBAAgB,KAAK,EACrBC,kBAAkB,kBAAkB,EACpCC,iBAAiB,iBAAiB,EAClCC,iBAAiB,iBAAiB,EAClCC,iBAAiB,iBAAiB,EACnC,GAAGZ;IAEJ,IAAI,CAACG,UAAU;QACb,qBAAO;sBAAGC;;IACZ;IAEA,MAAMS,UAAUN,cAAc,CAACD,YAAYA;IAC3C,MAAMQ,gBAAgBnB,IACpB;QACE,CAACc,gBAAgB,EAAE,CAACJ,WAAW,CAACQ;QAChC,CAACH,eAAe,EAAE,CAACL,WAAWQ;QAC9B,CAACF,eAAe,EAAEN,WAAW,CAACQ;QAC9B,CAACD,eAAe,EAAEP,WAAWQ;IAC/B,GACAZ;IAGF,IAAIc,SAASZ;IACb,IAAIa,UAAUZ;IACd,IAAI,CAACI,+BAAiBV,eAAuCK,WAAW;QACtE,MAAMD,OAAON,SAASqB,IAAI,CAACd;QAC3BY,uBAASlB,aAAaK,MAAM;YAC1BD,WAAWN,IAAImB,eAAeZ,KAAKF,KAAK,CAACC,SAAS;QACpD;IACF,OAAO,IAAIE,UAAU;QACnBY,uBACE,KAACG;YAAKjB,WAAWN,IAAI,yBAAyBmB;sBAC3CX;;IAGP;IAEA,IAAIY,QAAQ;QACVC,wBACE;;gBACG,CAACV,aAAaS;gBACdX;gBACAE,aAAaS;;;IAGpB;IAEA,qBAAO;kBAAGC;;AACZ"}
+{"version":3,"sources":["../../src/icon/TextIconSpacing.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport {\n  Children,\n  type ReactElement,\n  type ReactNode,\n  cloneElement,\n  isValidElement,\n} from \"react\";\n\nexport interface TextIconSpacingProps {\n  /**\n   * An optional className to apply to the surrounding `<span>` when the\n   * `forceIconWrap` prop is enabled or the icon is not a valid React Element.\n   * If the `forceIconWrap` prop is not enabled, it will be cloned into the icon\n   * instead.\n   */\n  className?: string;\n\n  /**\n   * An optional icon to display with a text button. This is invalid for icon\n   * buttons. If this is a single element, a new class name will be cloned into\n   * the element to get correct spacing so if you have a custom icon element,\n   * you **must** also pass that class name down. If you are using one of the\n   * react-md icon component packages, this is handled automatically.\n   *\n   * If this is not a valid react element, the icon will be wrapped in a\n   * `<span>` instead with the class names applied.\n   */\n  icon?: ReactElement<{ className?: string }> | ReactNode;\n\n  /**\n   * Boolean if the icon should appear after the text instead of before.\n   *\n   * @defaultValue `false`\n   */\n  iconAfter?: boolean;\n\n  /**\n   * The children to render before or after the provided icon. This is defaulted\n   * to `null` so that providing a `null` icon will correctly render without\n   * React crashing.\n   *\n   * @defaultValue `null`\n   */\n  children?: ReactNode;\n\n  /**\n   * The class name to use for an icon that is placed before text.\n   *\n   * @defaultValue `\"rmd-icon--before\"`\n   */\n  beforeClassName?: string;\n\n  /**\n   * The class name to use for an icon that is placed after text.\n   *\n   * @defaultValue `\"rmd-icon--after\"`\n   */\n  afterClassName?: string;\n\n  /**\n   * The class name to use for an icon that is placed before above the text.\n   * This is used when the `stacked` prop is enabled and the `iconAfter` prop is\n   * disabled or omitted.\n   *\n   * @defaultValue `\"rmd-icon--above\"`\n   */\n  aboveClassName?: string;\n\n  /**\n   * The class name to use for an icon that is placed before above the text.\n   * This is used when the `stacked` prop is enabled and the `iconAfter` prop is\n   * enabled.\n   *\n   * @defaultValue `\"rmd-icon--below\"`\n   */\n  belowClassName?: string;\n\n  /**\n   * Boolean if the icon should be forced into a `<span>` with the class names\n   * applied instead of attempting to clone into the provided icon.\n   *\n   * @defaultValue `false`\n   */\n  forceIconWrap?: boolean;\n\n  /**\n   * Boolean if the icon and text should be stacked instead of inline. Note:\n   * You'll normally want to update the container element to have\n   * `display: flex` and `flex-direction: column` for this to work.\n   *\n   * @defaultValue `false`\n   */\n  stacked?: boolean;\n\n  /**\n   * Boolean if the icon and content are in a `column-reverse` or `row-reverse`\n   * `flex-direction`. This will swap the different classnames as needed.\n   *\n   * @since 2.5.0\n   * @defaultValue `false`\n   */\n  flexReverse?: boolean;\n}\n\n/**\n * Note: This component **must** be rendered within a flex container unless the\n * {@link TextIconSpacingProps.forceIconWrap} is set to `true`.\n *\n * @example Simple Example\n * ```tsx\n * import { TextIconSpacing, FontIcon } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <TextIconSpacing icon={<FontIcon>favorite</FontIcon>}>\n *       Favorite\n *     </TextIconSpacing>\n *   );\n * }\n * ```\n *\n * @example Stacked Example\n * ```tsx\n * import { TextIconSpacing, FontIcon } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <TextIconSpacing icon={<FontIcon>favorite</FontIcon>} stacked>\n *       Favorite\n *     </TextIconSpacing>\n *   );\n * }\n * ```\n */\nexport function TextIconSpacing(props: TextIconSpacingProps): ReactElement {\n  const {\n    className,\n    icon: propIcon,\n    children = null,\n    stacked = false,\n    iconAfter = false,\n    flexReverse = false,\n    forceIconWrap = false,\n    beforeClassName = \"rmd-icon--before\",\n    afterClassName = \"rmd-icon--after\",\n    aboveClassName = \"rmd-icon--above\",\n    belowClassName = \"rmd-icon--below\",\n  } = props;\n\n  if (!propIcon) {\n    return <>{children}</>;\n  }\n\n  const isAfter = flexReverse ? !iconAfter : iconAfter;\n  const baseClassName = cnb(\n    {\n      [beforeClassName]: !stacked && !isAfter,\n      [afterClassName]: !stacked && isAfter,\n      [aboveClassName]: stacked && !isAfter,\n      [belowClassName]: stacked && isAfter,\n    },\n    className\n  );\n\n  let iconEl = propIcon;\n  let content = children;\n  if (!forceIconWrap && isValidElement<{ className?: string }>(propIcon)) {\n    const icon = Children.only(propIcon);\n    iconEl = cloneElement(icon, {\n      className: cnb(baseClassName, icon.props.className),\n    });\n  } else if (propIcon) {\n    iconEl = (\n      <span className={cnb(\"rmd-text-icon-spacing\", baseClassName)}>\n        {propIcon}\n      </span>\n    );\n  }\n\n  if (iconEl) {\n    content = (\n      <>\n        {!iconAfter && iconEl}\n        {children}\n        {iconAfter && iconEl}\n      </>\n    );\n  }\n\n  return <>{content}</>;\n}\n"],"names":["cnb","Children","cloneElement","isValidElement","TextIconSpacing","props","className","icon","propIcon","children","stacked","iconAfter","flexReverse","forceIconWrap","beforeClassName","afterClassName","aboveClassName","belowClassName","isAfter","baseClassName","iconEl","content","only","span"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SACEC,QAAQ,EAGRC,YAAY,EACZC,cAAc,QACT,QAAQ;AAkGf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+BC,GACD,OAAO,SAASC,gBAAgBC,KAA2B;IACzD,MAAM,EACJC,SAAS,EACTC,MAAMC,QAAQ,EACdC,WAAW,IAAI,EACfC,UAAU,KAAK,EACfC,YAAY,KAAK,EACjBC,cAAc,KAAK,EACnBC,gBAAgB,KAAK,EACrBC,kBAAkB,kBAAkB,EACpCC,iBAAiB,iBAAiB,EAClCC,iBAAiB,iBAAiB,EAClCC,iBAAiB,iBAAiB,EACnC,GAAGZ;IAEJ,IAAI,CAACG,UAAU;QACb,qBAAO;sBAAGC;;IACZ;IAEA,MAAMS,UAAUN,cAAc,CAACD,YAAYA;IAC3C,MAAMQ,gBAAgBnB,IACpB;QACE,CAACc,gBAAgB,EAAE,CAACJ,WAAW,CAACQ;QAChC,CAACH,eAAe,EAAE,CAACL,WAAWQ;QAC9B,CAACF,eAAe,EAAEN,WAAW,CAACQ;QAC9B,CAACD,eAAe,EAAEP,WAAWQ;IAC/B,GACAZ;IAGF,IAAIc,SAASZ;IACb,IAAIa,UAAUZ;IACd,IAAI,CAACI,+BAAiBV,eAAuCK,WAAW;QACtE,MAAMD,OAAON,SAASqB,IAAI,CAACd;QAC3BY,uBAASlB,aAAaK,MAAM;YAC1BD,WAAWN,IAAImB,eAAeZ,KAAKF,KAAK,CAACC,SAAS;QACpD;IACF,OAAO,IAAIE,UAAU;QACnBY,uBACE,KAACG;YAAKjB,WAAWN,IAAI,yBAAyBmB;sBAC3CX;;IAGP;IAEA,IAAIY,QAAQ;QACVC,wBACE;;gBACG,CAACV,aAAaS;gBACdX;gBACAE,aAAaS;;;IAGpB;IAEA,qBAAO;kBAAGC;;AACZ"}

package/dist/icon/{iconConfig.js → config.js}

@@ -181,4 +181,4 @@ import { FontIcon } from "./FontIcon.js";
     return ICON_CONFIG[name];
 }
 
-//# sourceMappingURL=iconConfig.js.map
+//# sourceMappingURL=config.js.map

package/dist/icon/config.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/icon/config.tsx"],"sourcesContent":["import { type ReactNode } from \"react\";\n\nimport { FontIcon } from \"./FontIcon.js\";\n\n/**\n * @since 5.0.0 The `download` icon has been renamed to `upload`.\n */\nexport interface ConfigurableIcons {\n  /**\n   * The icon for navigating backwards or closing an item to the left.\n   *\n   * @defaultValue `<FontIcon>keyboard_arrow_left</FontIcon>`\n   */\n  back?: ReactNode;\n\n  /**\n   * The icon to use when clearing content from a text field.\n   *\n   * @defaultValue `<FontIcon>clear</FontIcon>`\n   * @since 6.0.0\n   */\n  clear?: ReactNode;\n\n  /**\n   * @defaultValue `<FontIcon>close</FontIcon>`\n   *\n   * @since 6.0.0\n   */\n  close?: ReactNode;\n\n  /**\n   * The icon to use for unchecked checkboxes.\n   *\n   * @defaultValue `<FontIcon>check_box_outline_blank</FontIcon>`\n   * @since 6.0.0 This icon now represents the unchecked state for\n   * checkboxes.\n   */\n  checkbox?: ReactNode;\n\n  /**\n   * The icon to use for checked checkboxes.\n   *\n   * @defaultValue `<FontIcon>check_box</FontIcon>`\n   * @since 6.0.0\n   */\n  checkboxChecked?: ReactNode;\n\n  /**\n   * The icon to use for indeterminate checkboxes.\n   *\n   * @defaultValue `<FontIcon>indeterminate_check_box</FontIcon>`\n   * @since 6.0.0\n   */\n  checkboxIndeterminate?: ReactNode;\n\n  /**\n   * The icon to use for dropdown menus or content that expands vertically in a\n   * new material instead of inline like the `expander` icon.\n   *\n   * @defaultValue `<FontIcon>arrow_drop_down</FontIcon>`\n   */\n  dropdown?: ReactNode;\n\n  /**\n   * The icon to use when there are form errors.\n   *\n   * @since 2.5.0\n   * @defaultValue `<FontIcon>error_outline</FontIcon>`\n   */\n  error?: ReactNode;\n\n  /**\n   * The icon to use for expanding content vertically.\n   *\n   * @defaultValue `<FontIcon>keyboard_arrow_down</FontIcon>`\n   */\n  expander?: ReactNode;\n\n  /**\n   * The icon for navigating forwards or closing an item to the right. This is\n   * also used internally for nested dropdown menus.\n   *\n   * @defaultValue `<FontIcon>keyboard_arrow_right</FontIcon>`\n   */\n  forward?: ReactNode;\n\n  /**\n   * The general to use for displaying a main navigation menu (usually a\n   * hamburger menu).\n   *\n   * @defaultValue `<FontIcon>menu</FontIcon>`\n   */\n  menu?: ReactNode;\n\n  /**\n   * The icon for displaying notifications. This is used internally in the\n   * `BadgedButton` in the `@react-md/badge` package.\n   *\n   * @defaultValue `<FontIcon>notifications</FontIcon>`\n   */\n  notification?: ReactNode;\n\n  /**\n   * The icon for temporarily displaying a password's field value as plain text.\n   *\n   * @defaultValue `<FontIcon>remove_red_eye</FontIcon>`\n   */\n  password?: ReactNode;\n\n  /**\n   * The icon to use for unchecked radio buttons.\n   *\n   * @defaultValue `<FontIcon>radio_button_unchecked</FontIcon>`\n   * @since 6.0.0 This icon now represents the unchecked state for\n   * radios.\n   */\n  radio?: ReactNode;\n\n  /**\n   * The icon to use for checked radio buttons.\n   *\n   * @defaultValue `<FontIcon>radio_button_checked</FontIcon>`\n   */\n  radioChecked?: ReactNode;\n\n  /**\n   * The icon to use when removing elements.\n   *\n   * @defaultValue `<FontIcon>cancel</FontIcon>`\n   */\n  remove?: ReactNode;\n\n  /**\n   * The icon to use for showing that something has been selected that is not a\n   * radio or checkbox. This is used internally for the `Chip` in the\n   * `@react-md/core` package.\n   *\n   * @defaultValue `<FontIcon>check</FontIcon>`\n   */\n  selected?: ReactNode;\n\n  /**\n   * The icon to represent sorting content.\n   *\n   * @defaultValue `<FontIcon>arrow_upward</FontIcon>`\n   */\n  sort?: ReactNode;\n\n  /**\n   * The icon to use for the `FileInput` component (normally file\n   * uploads).\n   *\n   * @since 5.0.0\n   * @defaultValue `<FontIcon>file_upload</FontIcon>`\n   */\n  upload?: ReactNode;\n}\n\nexport type ConfiguredIcons = Required<ConfigurableIcons>;\n\n/**\n * @since 6.0.0\n */\nexport type ConfigurableIconName = keyof ConfigurableIcons;\n\n/**\n * This is a **mutable** object of icons that `react-md` will use for rendering\n * icons within components. The defaults will use the font versions of material\n * icons.\n *\n * @see {@link configureIcons} for a quick way of overriding the configuration\n * or the example below.\n *\n * @example Mutating this object\n * ```tsx\n * import { ICON_CONFIG } from \"@react-md/core\";\n * import ArrowDropDownIcon from \"@react-md/material-icons/ArrowDropDownIcon\";\n * import ArrowUpwardIcon from \"@react-md/material-icons/ArrowUpwardIcon\";\n * import CancelIcon from \"@react-md/material-icons/CancelIcon\";\n * import CheckBoxIcon from \"@react-md/material-icons/CheckBoxIcon\";\n * import CheckBoxOutlineBlankIcon from \"@react-md/material-icons/CheckBoxOutlineBlankIcon\";\n * import CheckIcon from \"@react-md/material-icons/CheckIcon\";\n * import CloseIcon from \"@react-md/material-icons/CloseIcon\";\n * import ErrorOutlineIcon from \"@react-md/material-icons/ErrorOutlineIcon\";\n * import FileUploadIcon from \"@react-md/material-icons/FileUploadIcon\";\n * import IndeterminateCheckBoxIcon from \"@react-md/material-icons/IndeterminateCheckBoxIcon\";\n * import KeyboardArrowDownIcon from \"@react-md/material-icons/KeyboardArrowDownIcon\";\n * import KeyboardArrowLeftIcon from \"@react-md/material-icons/KeyboardArrowLeftIcon\";\n * import KeyboardArrowRightIcon from \"@react-md/material-icons/KeyboardArrowRightIcon\";\n * import MenuIcon from \"@react-md/material-icons/MenuIcon\";\n * import NotificationsIcon from \"@react-md/material-icons/NotificationsIcon\";\n * import RadioButtonCheckedIcon from \"@react-md/material-icons/RadioButtonCheckedIcon\";\n * import RadioButtonUncheckedIcon from \"@react-md/material-icons/RadioButtonUncheckedIcon\";\n * import RemoveRedEyeIcon from \"@react-md/material-icons/RemoveRedEyeIcon\";\n *\n * ICON_CONFIG.back = <KeyboardArrowLeftIcon />;\n * ICON_CONFIG.close = <CloseIcon />;\n * ICON_CONFIG.checkbox = <CheckBoxOutlineBlankIcon />;\n * ICON_CONFIG.checkboxChecked = <CheckBoxIcon />;\n * ICON_CONFIG.checkboxIndeterminate = <IndeterminateCheckBoxIcon />;\n * ICON_CONFIG.dropdown = <ArrowDropDownIcon />;\n * ICON_CONFIG.error = <ErrorOutlineIcon />;\n * ICON_CONFIG.expander = <KeyboardArrowDownIcon />;\n * ICON_CONFIG.forward = <KeyboardArrowRightIcon />;\n * ICON_CONFIG.menu = <MenuIcon />;\n * ICON_CONFIG.notification = <NotificationsIcon />;\n * ICON_CONFIG.password = <RemoveRedEyeIcon />;\n * ICON_CONFIG.radio = <RadioButtonUncheckedIcon />;\n * ICON_CONFIG.radioChecked = <RadioButtonCheckedIcon />;\n * ICON_CONFIG.remove = <CancelIcon />;\n * ICON_CONFIG.selected = <CheckIcon />;\n * ICON_CONFIG.sort = <ArrowUpwardIcon />;\n * ICON_CONFIG.upload = <FileUploadIcon />;\n * ```\n *\n *\n * @since 6.0.0\n */\nexport const ICON_CONFIG: ConfiguredIcons = {\n  back: <FontIcon>keyboard_arrow_left</FontIcon>,\n  clear: <FontIcon>clear</FontIcon>,\n  close: <FontIcon>close</FontIcon>,\n  checkbox: <FontIcon>check_box_outline_blank</FontIcon>,\n  checkboxChecked: <FontIcon>check_box</FontIcon>,\n  checkboxIndeterminate: <FontIcon>indeterminate_check_box</FontIcon>,\n  dropdown: <FontIcon>arrow_drop_down</FontIcon>,\n  error: <FontIcon>error_outline</FontIcon>,\n  expander: <FontIcon>keyboard_arrow_down</FontIcon>,\n  forward: <FontIcon>keyboard_arrow_right</FontIcon>,\n  menu: <FontIcon>menu</FontIcon>,\n  notification: <FontIcon>notifications</FontIcon>,\n  password: <FontIcon>remove_red_eye</FontIcon>,\n  radio: <FontIcon>radio_button_unchecked</FontIcon>,\n  radioChecked: <FontIcon>radio_button_checked</FontIcon>,\n  remove: <FontIcon>cancel</FontIcon>,\n  selected: <FontIcon>check</FontIcon>,\n  sort: <FontIcon>arrow_upward</FontIcon>,\n  upload: <FontIcon>file_upload</FontIcon>,\n};\n\n/**\n * A convenience helper to reconfigure icons within `react-md`.\n *\n * @example Using SVG Material Icons\n * ```tsx\n * \"use client\";\n * import { configureIcons } from \"@react-md/core\";\n * import ArrowDropDownIcon from \"@react-md/material-icons/ArrowDropDownIcon\";\n * import ArrowUpwardIcon from \"@react-md/material-icons/ArrowUpwardIcon\";\n * import CancelIcon from \"@react-md/material-icons/CancelIcon\";\n * import CheckBoxIcon from \"@react-md/material-icons/CheckBoxIcon\";\n * import CheckBoxOutlineBlankIcon from \"@react-md/material-icons/CheckBoxOutlineBlankIcon\";\n * import CheckIcon from \"@react-md/material-icons/CheckIcon\";\n * import CloseIcon from \"@react-md/material-icons/CloseIcon\";\n * import ErrorOutlineIcon from \"@react-md/material-icons/ErrorOutlineIcon\";\n * import FileUploadIcon from \"@react-md/material-icons/FileUploadIcon\";\n * import IndeterminateCheckBoxIcon from \"@react-md/material-icons/IndeterminateCheckBoxIcon\";\n * import KeyboardArrowDownIcon from \"@react-md/material-icons/KeyboardArrowDownIcon\";\n * import KeyboardArrowLeftIcon from \"@react-md/material-icons/KeyboardArrowLeftIcon\";\n * import KeyboardArrowRightIcon from \"@react-md/material-icons/KeyboardArrowRightIcon\";\n * import MenuIcon from \"@react-md/material-icons/MenuIcon\";\n * import NotificationsIcon from \"@react-md/material-icons/NotificationsIcon\";\n * import RadioButtonCheckedIcon from \"@react-md/material-icons/RadioButtonCheckedIcon\";\n * import RadioButtonUncheckedIcon from \"@react-md/material-icons/RadioButtonUncheckedIcon\";\n * import RemoveRedEyeIcon from \"@react-md/material-icons/RemoveRedEyeIcon\";\n *\n * configureIcons({\n *   back: <KeyboardArrowLeftIcon />,\n *   close: <CloseIcon />,\n *   checkbox: <CheckBoxOutlineBlankIcon />,\n *   checkboxChecked: <CheckBoxIcon />,\n *   checkboxIndeterminate: <IndeterminateCheckBoxIcon />,\n *   dropdown: <ArrowDropDownIcon />,\n *   error: <ErrorOutlineIcon />,\n *   expander: <KeyboardArrowDownIcon />,\n *   forward: <KeyboardArrowRightIcon />,\n *   menu: <MenuIcon />,\n *   notification: <NotificationsIcon />,\n *   password: <RemoveRedEyeIcon />,\n *   radio: <RadioButtonUncheckedIcon />,\n *   radioChecked: <RadioButtonCheckedIcon />,\n *   remove: <CancelIcon />,\n *   selected: <CheckIcon />,\n *   sort: <ArrowUpwardIcon />,\n *   upload: <FileUploadIcon />,\n * });\n * ```\n *\n * @since 6.0.0\n */\nexport function configureIcons(overrides: ConfiguredIcons): void {\n  Object.entries(overrides).forEach(([name, value]) => {\n    if (process.env.NODE_ENV !== \"production\" && !(name in ICON_CONFIG)) {\n      throw new Error(`${name} is an invalid react-md icon name.`);\n    }\n\n    ICON_CONFIG[name as keyof ConfiguredIcons] = value;\n  });\n}\n\n/**\n * This is mostly an internal helper to get a specific icon by name and allowing\n * a custom prop to override this behavior. The main benefit of this function is\n * that icons can be removed if the override is set to `null`.\n *\n * @since 6.0.0\n */\nexport function getIcon(\n  name: ConfigurableIconName,\n  override?: ReactNode\n): ReactNode {\n  if (typeof override !== \"undefined\") {\n    return override;\n  }\n\n  return ICON_CONFIG[name];\n}\n"],"names":["FontIcon","ICON_CONFIG","back","clear","close","checkbox","checkboxChecked","checkboxIndeterminate","dropdown","error","expander","forward","menu","notification","password","radio","radioChecked","remove","selected","sort","upload","configureIcons","overrides","Object","entries","forEach","name","value","process","env","NODE_ENV","Error","getIcon","override"],"mappings":";AAEA,SAASA,QAAQ,QAAQ,gBAAgB;AAmKzC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoDC,GACD,OAAO,MAAMC,cAA+B;IAC1CC,oBAAM,KAACF;kBAAS;;IAChBG,qBAAO,KAACH;kBAAS;;IACjBI,qBAAO,KAACJ;kBAAS;;IACjBK,wBAAU,KAACL;kBAAS;;IACpBM,+BAAiB,KAACN;kBAAS;;IAC3BO,qCAAuB,KAACP;kBAAS;;IACjCQ,wBAAU,KAACR;kBAAS;;IACpBS,qBAAO,KAACT;kBAAS;;IACjBU,wBAAU,KAACV;kBAAS;;IACpBW,uBAAS,KAACX;kBAAS;;IACnBY,oBAAM,KAACZ;kBAAS;;IAChBa,4BAAc,KAACb;kBAAS;;IACxBc,wBAAU,KAACd;kBAAS;;IACpBe,qBAAO,KAACf;kBAAS;;IACjBgB,4BAAc,KAAChB;kBAAS;;IACxBiB,sBAAQ,KAACjB;kBAAS;;IAClBkB,wBAAU,KAAClB;kBAAS;;IACpBmB,oBAAM,KAACnB;kBAAS;;IAChBoB,sBAAQ,KAACpB;kBAAS;;AACpB,EAAE;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiDC,GACD,OAAO,SAASqB,eAAeC,SAA0B;IACvDC,OAAOC,OAAO,CAACF,WAAWG,OAAO,CAAC,CAAC,CAACC,MAAMC,MAAM;QAC9C,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,gBAAgB,CAAEJ,CAAAA,QAAQzB,WAAU,GAAI;YACnE,MAAM,IAAI8B,MAAM,GAAGL,KAAK,kCAAkC,CAAC;QAC7D;QAEAzB,WAAW,CAACyB,KAA8B,GAAGC;IAC/C;AACF;AAEA;;;;;;CAMC,GACD,OAAO,SAASK,QACdN,IAA0B,EAC1BO,QAAoB;IAEpB,IAAI,OAAOA,aAAa,aAAa;QACnC,OAAOA;IACT;IAEA,OAAOhC,WAAW,CAACyB,KAAK;AAC1B"}

package/dist/icon/materialConfig.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/icon/materialConfig.ts"],"sourcesContent":["import { type CSSProperties } from \"react\";\nimport {\n  type MaterialIconFamily,\n  type MaterialSymbolFamily,\n} from \"./material.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface MaterialIconCustomization {\n  /**\n   * @defaultValue `\"filled\"`\n   */\n  iconFamily?: MaterialIconFamily;\n}\n\n/**\n * @since 6.0.0\n */\nexport type MaterialIconConfiguration = Required<MaterialIconCustomization>;\n\n/**\n * Fill gives you the ability to modify the default icon style. A single icon\n * can render both unfilled and filled states.\n *\n * To convey a state transition, use the fill axis for animation or\n * interaction. The values are 0 for default or 1 for completely filled. Along\n * with the weight axis, the fill also impacts the look of the icon.\n *\n * @since 6.0.0\n */\nexport type MaterialSymbolFill = 0 | 1;\n\n/**\n * Weight defines the symbol’s stroke weight, with a range of weights between\n * thin (100) and bold (700). Weight can also affect the overall size of the\n * symbol.\n *\n * @since 6.0.0\n */\nexport type MaterialSymbolWeight = 100 | 200 | 300 | 400 | 500 | 600 | 700;\n\n/**\n * Weight and grade affect a symbol’s thickness. Adjustments to grade are more\n * granular than adjustments to weight and have a small impact on the size of\n * the symbol.\n *\n * Grade is also available in some text fonts. You can match grade levels\n * between text and symbols for a harmonious visual effect. For example, if\n * the text font has a -25 grade value, the symbols can match it with a\n * suitable value, say -25.\n *\n * You can use grade for different needs:\n *\n * - Low emphasis (e.g. -25 grade): To reduce glare for a light symbol on a\n *   dark background, use a low grade.\n * - High emphasis (e.g. 200 grade): To highlight a symbol, increase the\n *   positive grade.\n *\n * @since 6.0.0\n */\nexport type MaterialSymbolGrade = -25 | 0 | 200;\n\n/**\n * Optical Sizes range from 20dp to 48dp.\n *\n * For the image to look the same at different sizes, the stroke weight\n * (thickness) changes as the icon size scales. Optical Size offers a way to\n * automatically adjust the stroke weight when you increase or decrease the\n * symbol size.\n *\n * @since 6.0.0\n */\nexport type MaterialSymbolOpticalSize = 20 | 24 | 40 | 48;\n\n/**\n * The comments for each customizable part was copied from\n * https://fonts.google.com/icons?icon.set=Material+Symbols and clicking the\n * info icon next to each property.\n *\n * @see https://fonts.google.com/icons?icon.set=Material+Symbols\n * @since 6.0.0\n */\nexport interface MaterialSymbolCustomization {\n  /**\n   * Fill gives you the ability to modify the default icon style. A single icon\n   * can render both unfilled and filled states.\n   *\n   * To convey a state transition, use the fill axis for animation or\n   * interaction. The values are 0 for default or 1 for completely filled. Along\n   * with the weight axis, the fill also impacts the look of the icon.\n   *\n   * @defaultValue `0`\n   */\n  fill?: MaterialSymbolFill;\n\n  /**\n   * Weight defines the symbol’s stroke weight, with a range of weights between\n   * thin (100) and bold (700). Weight can also affect the overall size of the\n   * symbol.\n   *\n   * @defaultValue `400`\n   */\n  weight?: MaterialSymbolWeight;\n\n  /**\n   * Weight and grade affect a symbol’s thickness. Adjustments to grade are more\n   * granular than adjustments to weight and have a small impact on the size of\n   * the symbol.\n   *\n   * Grade is also available in some text fonts. You can match grade levels\n   * between text and symbols for a harmonious visual effect. For example, if\n   * the text font has a -25 grade value, the symbols can match it with a\n   * suitable value, say -25.\n   *\n   * You can use grade for different needs:\n   *\n   * - Low emphasis (e.g. -25 grade): To reduce glare for a light symbol on a\n   *   dark background, use a low grade.\n   * - High emphasis (e.g. 200 grade): To highlight a symbol, increase the\n   *   positive grade.\n   *\n   * @defaultValue `0`\n   */\n  grade?: MaterialSymbolGrade;\n\n  /**\n   * Optical Sizes range from 20dp to 48dp.\n   *\n   * For the image to look the same at different sizes, the stroke weight\n   * (thickness) changes as the icon size scales. Optical Size offers a way to\n   * automatically adjust the stroke weight when you increase or decrease the\n   * symbol size.\n   *\n   * @defaultValue `48`\n   */\n  opticalSize?: MaterialSymbolOpticalSize;\n\n  /**\n   * @defaultValue `\"outlined\"`\n   */\n  family?: MaterialSymbolFamily;\n}\n\n/**\n * @since 6.0.0\n */\nexport type MaterialSymbolConfiguration = Required<MaterialSymbolCustomization>;\n\n/**\n * @since 6.0.0\n */\nexport interface MaterialConfiguration\n  extends MaterialIconConfiguration,\n    MaterialSymbolConfiguration {}\n\n/**\n * @since 6.0.0\n */\nexport const MATERIAL_CONFIG: MaterialConfiguration = {\n  fill: 0,\n  weight: 400,\n  grade: 0,\n  opticalSize: 48,\n  iconFamily: \"filled\",\n  family: \"outlined\",\n};\n\n/**\n * @since 6.0.0\n */\nexport interface MaterialSymbolFontVariationSettings {\n  style?: CSSProperties;\n  family: MaterialSymbolFamily;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport function getFontVariationSettings(\n  options: MaterialSymbolCustomization & { style?: CSSProperties }\n): MaterialSymbolFontVariationSettings {\n  let { style } = options;\n  const {\n    fill = MATERIAL_CONFIG.fill,\n    grade = MATERIAL_CONFIG.grade,\n    opticalSize = MATERIAL_CONFIG.opticalSize,\n    weight = MATERIAL_CONFIG.weight,\n    family: symbolFamily = MATERIAL_CONFIG.family,\n  } = options;\n  if (\n    !style?.fontVariationSettings &&\n    (fill !== MATERIAL_CONFIG.fill ||\n      grade !== MATERIAL_CONFIG.grade ||\n      opticalSize !== MATERIAL_CONFIG.opticalSize ||\n      weight !== MATERIAL_CONFIG.weight)\n  ) {\n    style = {\n      ...style,\n      fontVariationSettings: `\"FILL\" ${fill}, \"wght\" ${weight}, \"GRAD\" ${grade}, \"opsz\" ${opticalSize}`,\n    };\n  }\n\n  return { family: symbolFamily, style };\n}\n"],"names":["MATERIAL_CONFIG","fill","weight","grade","opticalSize","iconFamily","family","getFontVariationSettings","options","style","symbolFamily","fontVariationSettings"],"mappings":"AA4JA;;CAEC,GACD,OAAO,MAAMA,kBAAyC;IACpDC,MAAM;IACNC,QAAQ;IACRC,OAAO;IACPC,aAAa;IACbC,YAAY;IACZC,QAAQ;AACV,EAAE;AAUF;;;CAGC,GACD,OAAO,SAASC,yBACdC,OAAgE;IAEhE,IAAI,EAAEC,KAAK,EAAE,GAAGD;IAChB,MAAM,EACJP,OAAOD,gBAAgBC,IAAI,EAC3BE,QAAQH,gBAAgBG,KAAK,EAC7BC,cAAcJ,gBAAgBI,WAAW,EACzCF,SAASF,gBAAgBE,MAAM,EAC/BI,QAAQI,eAAeV,gBAAgBM,MAAM,EAC9C,GAAGE;IACJ,IACE,CAACC,OAAOE,yBACPV,CAAAA,SAASD,gBAAgBC,IAAI,IAC5BE,UAAUH,gBAAgBG,KAAK,IAC/BC,gBAAgBJ,gBAAgBI,WAAW,IAC3CF,WAAWF,gBAAgBE,MAAM,AAAD,GAClC;QACAO,QAAQ;YACN,GAAGA,KAAK;YACRE,uBAAuB,CAAC,OAAO,EAAEV,KAAK,SAAS,EAAEC,OAAO,SAAS,EAAEC,MAAM,SAAS,EAAEC,aAAa;QACnG;IACF;IAEA,OAAO;QAAEE,QAAQI;QAAcD;IAAM;AACvC"}
+{"version":3,"sources":["../../src/icon/materialConfig.ts"],"sourcesContent":["import { type CSSProperties } from \"react\";\n\nimport {\n  type MaterialIconFamily,\n  type MaterialSymbolFamily,\n} from \"./material.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface MaterialIconCustomization {\n  /**\n   * @defaultValue `\"filled\"`\n   */\n  iconFamily?: MaterialIconFamily;\n}\n\n/**\n * @since 6.0.0\n */\nexport type MaterialIconConfiguration = Required<MaterialIconCustomization>;\n\n/**\n * Fill gives you the ability to modify the default icon style. A single icon\n * can render both unfilled and filled states.\n *\n * To convey a state transition, use the fill axis for animation or\n * interaction. The values are 0 for default or 1 for completely filled. Along\n * with the weight axis, the fill also impacts the look of the icon.\n *\n * @since 6.0.0\n */\nexport type MaterialSymbolFill = 0 | 1;\n\n/**\n * Weight defines the symbol’s stroke weight, with a range of weights between\n * thin (100) and bold (700). Weight can also affect the overall size of the\n * symbol.\n *\n * @since 6.0.0\n */\nexport type MaterialSymbolWeight = 100 | 200 | 300 | 400 | 500 | 600 | 700;\n\n/**\n * Weight and grade affect a symbol’s thickness. Adjustments to grade are more\n * granular than adjustments to weight and have a small impact on the size of\n * the symbol.\n *\n * Grade is also available in some text fonts. You can match grade levels\n * between text and symbols for a harmonious visual effect. For example, if\n * the text font has a -25 grade value, the symbols can match it with a\n * suitable value, say -25.\n *\n * You can use grade for different needs:\n *\n * - Low emphasis (e.g. -25 grade): To reduce glare for a light symbol on a\n *   dark background, use a low grade.\n * - High emphasis (e.g. 200 grade): To highlight a symbol, increase the\n *   positive grade.\n *\n * @since 6.0.0\n */\nexport type MaterialSymbolGrade = -25 | 0 | 200;\n\n/**\n * Optical Sizes range from 20dp to 48dp.\n *\n * For the image to look the same at different sizes, the stroke weight\n * (thickness) changes as the icon size scales. Optical Size offers a way to\n * automatically adjust the stroke weight when you increase or decrease the\n * symbol size.\n *\n * @since 6.0.0\n */\nexport type MaterialSymbolOpticalSize = 20 | 24 | 40 | 48;\n\n/**\n * The comments for each customizable part was copied from\n * https://fonts.google.com/icons?icon.set=Material+Symbols and clicking the\n * info icon next to each property.\n *\n * @see https://fonts.google.com/icons?icon.set=Material+Symbols\n * @since 6.0.0\n */\nexport interface MaterialSymbolCustomization {\n  /**\n   * Fill gives you the ability to modify the default icon style. A single icon\n   * can render both unfilled and filled states.\n   *\n   * To convey a state transition, use the fill axis for animation or\n   * interaction. The values are 0 for default or 1 for completely filled. Along\n   * with the weight axis, the fill also impacts the look of the icon.\n   *\n   * @defaultValue `0`\n   */\n  fill?: MaterialSymbolFill;\n\n  /**\n   * Weight defines the symbol’s stroke weight, with a range of weights between\n   * thin (100) and bold (700). Weight can also affect the overall size of the\n   * symbol.\n   *\n   * @defaultValue `400`\n   */\n  weight?: MaterialSymbolWeight;\n\n  /**\n   * Weight and grade affect a symbol’s thickness. Adjustments to grade are more\n   * granular than adjustments to weight and have a small impact on the size of\n   * the symbol.\n   *\n   * Grade is also available in some text fonts. You can match grade levels\n   * between text and symbols for a harmonious visual effect. For example, if\n   * the text font has a -25 grade value, the symbols can match it with a\n   * suitable value, say -25.\n   *\n   * You can use grade for different needs:\n   *\n   * - Low emphasis (e.g. -25 grade): To reduce glare for a light symbol on a\n   *   dark background, use a low grade.\n   * - High emphasis (e.g. 200 grade): To highlight a symbol, increase the\n   *   positive grade.\n   *\n   * @defaultValue `0`\n   */\n  grade?: MaterialSymbolGrade;\n\n  /**\n   * Optical Sizes range from 20dp to 48dp.\n   *\n   * For the image to look the same at different sizes, the stroke weight\n   * (thickness) changes as the icon size scales. Optical Size offers a way to\n   * automatically adjust the stroke weight when you increase or decrease the\n   * symbol size.\n   *\n   * @defaultValue `48`\n   */\n  opticalSize?: MaterialSymbolOpticalSize;\n\n  /**\n   * @defaultValue `\"outlined\"`\n   */\n  family?: MaterialSymbolFamily;\n}\n\n/**\n * @since 6.0.0\n */\nexport type MaterialSymbolConfiguration = Required<MaterialSymbolCustomization>;\n\n/**\n * @since 6.0.0\n */\nexport interface MaterialConfiguration\n  extends MaterialIconConfiguration,\n    MaterialSymbolConfiguration {}\n\n/**\n * @since 6.0.0\n */\nexport const MATERIAL_CONFIG: MaterialConfiguration = {\n  fill: 0,\n  weight: 400,\n  grade: 0,\n  opticalSize: 48,\n  iconFamily: \"filled\",\n  family: \"outlined\",\n};\n\n/**\n * @since 6.0.0\n */\nexport interface MaterialSymbolFontVariationSettings {\n  style?: CSSProperties;\n  family: MaterialSymbolFamily;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport function getFontVariationSettings(\n  options: MaterialSymbolCustomization & { style?: CSSProperties }\n): MaterialSymbolFontVariationSettings {\n  let { style } = options;\n  const {\n    fill = MATERIAL_CONFIG.fill,\n    grade = MATERIAL_CONFIG.grade,\n    opticalSize = MATERIAL_CONFIG.opticalSize,\n    weight = MATERIAL_CONFIG.weight,\n    family: symbolFamily = MATERIAL_CONFIG.family,\n  } = options;\n  if (\n    !style?.fontVariationSettings &&\n    (fill !== MATERIAL_CONFIG.fill ||\n      grade !== MATERIAL_CONFIG.grade ||\n      opticalSize !== MATERIAL_CONFIG.opticalSize ||\n      weight !== MATERIAL_CONFIG.weight)\n  ) {\n    style = {\n      ...style,\n      fontVariationSettings: `\"FILL\" ${fill}, \"wght\" ${weight}, \"GRAD\" ${grade}, \"opsz\" ${opticalSize}`,\n    };\n  }\n\n  return { family: symbolFamily, style };\n}\n"],"names":["MATERIAL_CONFIG","fill","weight","grade","opticalSize","iconFamily","family","getFontVariationSettings","options","style","symbolFamily","fontVariationSettings"],"mappings":"AA6JA;;CAEC,GACD,OAAO,MAAMA,kBAAyC;IACpDC,MAAM;IACNC,QAAQ;IACRC,OAAO;IACPC,aAAa;IACbC,YAAY;IACZC,QAAQ;AACV,EAAE;AAUF;;;CAGC,GACD,OAAO,SAASC,yBACdC,OAAgE;IAEhE,IAAI,EAAEC,KAAK,EAAE,GAAGD;IAChB,MAAM,EACJP,OAAOD,gBAAgBC,IAAI,EAC3BE,QAAQH,gBAAgBG,KAAK,EAC7BC,cAAcJ,gBAAgBI,WAAW,EACzCF,SAASF,gBAAgBE,MAAM,EAC/BI,QAAQI,eAAeV,gBAAgBM,MAAM,EAC9C,GAAGE;IACJ,IACE,CAACC,OAAOE,yBACPV,CAAAA,SAASD,gBAAgBC,IAAI,IAC5BE,UAAUH,gBAAgBG,KAAK,IAC/BC,gBAAgBJ,gBAAgBI,WAAW,IAC3CF,WAAWF,gBAAgBE,MAAM,AAAD,GAClC;QACAO,QAAQ;YACN,GAAGA,KAAK;YACRE,uBAAuB,CAAC,OAAO,EAAEV,KAAK,SAAS,EAAEC,OAAO,SAAS,EAAEC,MAAM,SAAS,EAAEC,aAAa;QACnG;IACF;IAEA,OAAO;QAAEE,QAAQI;QAAcD;IAAM;AACvC"}

package/dist/icon/styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/icon/styles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { cssUtils, type TextColor, type ThemeColor } from \"../cssUtils.js\";\nimport { bem } from \"../utils/bem.js\";\nimport type { MaterialIconFamily, MaterialSymbolFamily } from \"./material.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-icon-color\"?: string;\n    \"--rmd-icon-size\"?: string | number;\n    \"--rmd-icon-spacing\"?: string | number;\n    \"--rmd-icon-rotate-from\"?: string | number;\n    \"--rmd-icon-rotate-to\"?: string | number;\n  }\n}\n\nconst styles = bem(\"rmd-icon\");\nconst rotatorStyles = bem(\"rmd-icon-rotator\");\n\n/** @since 6.0.0 */\nexport interface SVGIconClassNameOptions {\n  className?: string;\n\n  /**\n   * An optional theme color to apply to the icon. When this is `undefined`, the\n   * default icon color will be used instead.\n   *\n   * - `primary -> $primary-color`\n   * - `secondary -> $secondary-color`\n   * - `warning -> $warning-color`\n   * - `success -> $success-color`\n   * - `error -> $error-color`\n   * - `text-primary -> $text-primary-color`\n   * - `text-secondary -> $text-primary-color`\n   * - `text-hint -> $text-hint-color`\n   * - `text-disabled -> $text-disabled-color`\n   */\n  theme?: ThemeColor | TextColor;\n\n  /**\n   * Boolean if the font icon should use the dense spec.\n   *\n   * @defaultValue `false`\n   */\n  dense?: boolean;\n\n  /**\n   * Set this to `true` if the icon should display inline with other text (like\n   * a paragraph) by applying `vertical-align: bottom`.\n   *\n   * @example\n   * ```tsx\n   * <Typography>\n   *   <InfoIcon inline className=\"rmd-icon--before\" />\n   *   Some additional information around xyz.\n   * </Typography>\n   * ```\n   *\n   * @defaultValue `false`\n   */\n  inline?: boolean;\n}\n\n/** @since 6.0.0 */\nexport interface FontIconClassNameOptions extends SVGIconClassNameOptions {\n  /**\n   * The font icon class name to use.\n   *\n   * @defaultValue `\"material-icons\"`\n   */\n  iconClassName?: string;\n}\n\n/** @since 6.0.0 */\nexport interface MaterialIconClassNameOptions extends SVGIconClassNameOptions {\n  family: MaterialIconFamily;\n}\n\n/** @since 6.0.0 */\nexport interface MaterialSymbolClassNameOptions\n  extends SVGIconClassNameOptions {\n  family: MaterialSymbolFamily;\n}\n\n/** @since 6.0.0 */\nexport type IconClassNameOptions =\n  | ({ type: \"font\" } & FontIconClassNameOptions)\n  | ({ type: \"svg\" } & SVGIconClassNameOptions)\n  | ({ type: \"material\" } & MaterialIconClassNameOptions)\n  | ({ type: \"symbol\" } & MaterialSymbolClassNameOptions);\n\n/**\n *\n * @since 6.0.0\n */\nexport function icon(options: IconClassNameOptions): string {\n  const {\n    className,\n    type,\n    theme,\n    family = \"\",\n    dense = false,\n    inline = false,\n    iconClassName,\n  } = options as FontIconClassNameOptions &\n    SVGIconClassNameOptions & {\n      type: \"font\" | \"svg\" | \"symbol\" | \"material\";\n      family?: MaterialIconFamily;\n    };\n\n  const isFont = type === \"font\";\n  const isSvg = type === \"svg\";\n  const isSymbol = type === \"symbol\";\n  const isMaterial = type === \"material\";\n\n  return cnb(\n    styles({\n      svg: isSvg,\n      font: isFont || isMaterial,\n      symbol: isSymbol,\n      vam: inline,\n      dense,\n    }),\n    isSymbol && `material-symbols-${family}`,\n    isMaterial &&\n      `material-icons${\n        family === \"filled\" ? \"\" : `-${family === \"rounded\" ? \"round\" : family}`\n      }`,\n    cssUtils({\n      textColor: theme,\n    }),\n    iconClassName,\n    className\n  );\n}\n\n/** @since 6.0.0 */\nexport interface IconRotatorClassNameOptions {\n  className?: string;\n\n  /**\n   * Boolean if the icon is currently rotated.\n   */\n  rotated: boolean;\n\n  /**\n   * Boolean if changing the {@link rotated} state should no longer transition.\n   *\n   * @defaultValue `false`\n   */\n  disableTransition?: boolean;\n}\n\n/**\n *\n * @since 6.0.0\n */\nexport function iconRotator(options: IconRotatorClassNameOptions): string {\n  const { className, rotated, disableTransition = false } = options;\n\n  return cnb(\n    rotatorStyles({\n      animate: !disableTransition,\n      rotated,\n    }),\n    className\n  );\n}\n"],"names":["cnb","cssUtils","bem","styles","rotatorStyles","icon","options","className","type","theme","family","dense","inline","iconClassName","isFont","isSvg","isSymbol","isMaterial","svg","font","symbol","vam","textColor","iconRotator","rotated","disableTransition","animate"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,QAAQ,QAAyC,iBAAiB;AAC3E,SAASC,GAAG,QAAQ,kBAAkB;AAatC,MAAMC,SAASD,IAAI;AACnB,MAAME,gBAAgBF,IAAI;AA0E1B;;;CAGC,GACD,OAAO,SAASG,KAAKC,OAA6B;IAChD,MAAM,EACJC,SAAS,EACTC,IAAI,EACJC,KAAK,EACLC,SAAS,EAAE,EACXC,QAAQ,KAAK,EACbC,SAAS,KAAK,EACdC,aAAa,EACd,GAAGP;IAMJ,MAAMQ,SAASN,SAAS;IACxB,MAAMO,QAAQP,SAAS;IACvB,MAAMQ,WAAWR,SAAS;IAC1B,MAAMS,aAAaT,SAAS;IAE5B,OAAOR,IACLG,OAAO;QACLe,KAAKH;QACLI,MAAML,UAAUG;QAChBG,QAAQJ;QACRK,KAAKT;QACLD;IACF,IACAK,YAAY,CAAC,iBAAiB,EAAEN,QAAQ,EACxCO,cACE,CAAC,cAAc,EACbP,WAAW,WAAW,KAAK,CAAC,CAAC,EAAEA,WAAW,YAAY,UAAUA,QAAQ,EACxE,EACJT,SAAS;QACPqB,WAAWb;IACb,IACAI,eACAN;AAEJ;AAmBA;;;CAGC,GACD,OAAO,SAASgB,YAAYjB,OAAoC;IAC9D,MAAM,EAAEC,SAAS,EAAEiB,OAAO,EAAEC,oBAAoB,KAAK,EAAE,GAAGnB;IAE1D,OAAON,IACLI,cAAc;QACZsB,SAAS,CAACD;QACVD;IACF,IACAjB;AAEJ"}
+{"version":3,"sources":["../../src/icon/styles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport { type TextColor, type ThemeColor, cssUtils } from \"../cssUtils.js\";\nimport { bem } from \"../utils/bem.js\";\nimport type { MaterialIconFamily, MaterialSymbolFamily } from \"./material.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-icon-color\"?: string;\n    \"--rmd-icon-size\"?: string | number;\n    \"--rmd-icon-spacing\"?: string | number;\n    \"--rmd-icon-rotate-from\"?: string | number;\n    \"--rmd-icon-rotate-to\"?: string | number;\n  }\n}\n\nconst styles = bem(\"rmd-icon\");\nconst rotatorStyles = bem(\"rmd-icon-rotator\");\n\n/** @since 6.0.0 */\nexport interface SVGIconClassNameOptions {\n  className?: string;\n\n  /**\n   * An optional theme color to apply to the icon. When this is `undefined`, the\n   * default icon color will be used instead.\n   *\n   * - `primary -> $primary-color`\n   * - `secondary -> $secondary-color`\n   * - `warning -> $warning-color`\n   * - `success -> $success-color`\n   * - `error -> $error-color`\n   * - `text-primary -> $text-primary-color`\n   * - `text-secondary -> $text-primary-color`\n   * - `text-hint -> $text-hint-color`\n   * - `text-disabled -> $text-disabled-color`\n   */\n  theme?: ThemeColor | TextColor;\n\n  /**\n   * Boolean if the font icon should use the dense spec.\n   *\n   * @defaultValue `false`\n   */\n  dense?: boolean;\n\n  /**\n   * Set this to `true` if the icon should display inline with other text (like\n   * a paragraph) by applying `vertical-align: bottom`.\n   *\n   * @example\n   * ```tsx\n   * <Typography>\n   *   <InfoIcon inline className=\"rmd-icon--before\" />\n   *   Some additional information around xyz.\n   * </Typography>\n   * ```\n   *\n   * @defaultValue `false`\n   */\n  inline?: boolean;\n}\n\n/** @since 6.0.0 */\nexport interface FontIconClassNameOptions extends SVGIconClassNameOptions {\n  /**\n   * The font icon class name to use.\n   *\n   * @defaultValue `\"material-icons\"`\n   */\n  iconClassName?: string;\n}\n\n/** @since 6.0.0 */\nexport interface MaterialIconClassNameOptions extends SVGIconClassNameOptions {\n  family: MaterialIconFamily;\n}\n\n/** @since 6.0.0 */\nexport interface MaterialSymbolClassNameOptions\n  extends SVGIconClassNameOptions {\n  family: MaterialSymbolFamily;\n}\n\n/** @since 6.0.0 */\nexport type IconClassNameOptions =\n  | ({ type: \"font\" } & FontIconClassNameOptions)\n  | ({ type: \"svg\" } & SVGIconClassNameOptions)\n  | ({ type: \"material\" } & MaterialIconClassNameOptions)\n  | ({ type: \"symbol\" } & MaterialSymbolClassNameOptions);\n\n/**\n *\n * @since 6.0.0\n */\nexport function icon(options: IconClassNameOptions): string {\n  const {\n    className,\n    type,\n    theme,\n    family = \"\",\n    dense = false,\n    inline = false,\n    iconClassName,\n  } = options as FontIconClassNameOptions &\n    SVGIconClassNameOptions & {\n      type: \"font\" | \"svg\" | \"symbol\" | \"material\";\n      family?: MaterialIconFamily;\n    };\n\n  const isFont = type === \"font\";\n  const isSvg = type === \"svg\";\n  const isSymbol = type === \"symbol\";\n  const isMaterial = type === \"material\";\n\n  return cnb(\n    styles({\n      svg: isSvg,\n      font: isFont || isMaterial,\n      symbol: isSymbol,\n      vam: inline,\n      dense,\n    }),\n    isSymbol && `material-symbols-${family}`,\n    isMaterial &&\n      `material-icons${\n        family === \"filled\" ? \"\" : `-${family === \"rounded\" ? \"round\" : family}`\n      }`,\n    cssUtils({\n      textColor: theme,\n    }),\n    iconClassName,\n    className\n  );\n}\n\n/** @since 6.0.0 */\nexport interface IconRotatorClassNameOptions {\n  className?: string;\n\n  /**\n   * Boolean if the icon is currently rotated.\n   */\n  rotated: boolean;\n\n  /**\n   * Boolean if changing the {@link rotated} state should no longer transition.\n   *\n   * @defaultValue `false`\n   */\n  disableTransition?: boolean;\n}\n\n/**\n *\n * @since 6.0.0\n */\nexport function iconRotator(options: IconRotatorClassNameOptions): string {\n  const { className, rotated, disableTransition = false } = options;\n\n  return cnb(\n    rotatorStyles({\n      animate: !disableTransition,\n      rotated,\n    }),\n    className\n  );\n}\n"],"names":["cnb","cssUtils","bem","styles","rotatorStyles","icon","options","className","type","theme","family","dense","inline","iconClassName","isFont","isSvg","isSymbol","isMaterial","svg","font","symbol","vam","textColor","iconRotator","rotated","disableTransition","animate"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAA0CC,QAAQ,QAAQ,iBAAiB;AAC3E,SAASC,GAAG,QAAQ,kBAAkB;AAatC,MAAMC,SAASD,IAAI;AACnB,MAAME,gBAAgBF,IAAI;AA0E1B;;;CAGC,GACD,OAAO,SAASG,KAAKC,OAA6B;IAChD,MAAM,EACJC,SAAS,EACTC,IAAI,EACJC,KAAK,EACLC,SAAS,EAAE,EACXC,QAAQ,KAAK,EACbC,SAAS,KAAK,EACdC,aAAa,EACd,GAAGP;IAMJ,MAAMQ,SAASN,SAAS;IACxB,MAAMO,QAAQP,SAAS;IACvB,MAAMQ,WAAWR,SAAS;IAC1B,MAAMS,aAAaT,SAAS;IAE5B,OAAOR,IACLG,OAAO;QACLe,KAAKH;QACLI,MAAML,UAAUG;QAChBG,QAAQJ;QACRK,KAAKT;QACLD;IACF,IACAK,YAAY,CAAC,iBAAiB,EAAEN,QAAQ,EACxCO,cACE,CAAC,cAAc,EACbP,WAAW,WAAW,KAAK,CAAC,CAAC,EAAEA,WAAW,YAAY,UAAUA,QAAQ,EACxE,EACJT,SAAS;QACPqB,WAAWb;IACb,IACAI,eACAN;AAEJ;AAmBA;;;CAGC,GACD,OAAO,SAASgB,YAAYjB,OAAoC;IAC9D,MAAM,EAAEC,SAAS,EAAEiB,OAAO,EAAEC,oBAAoB,KAAK,EAAE,GAAGnB;IAE1D,OAAON,IACLI,cAAc;QACZsB,SAAS,CAACD;QACVD;IACF,IACAjB;AAEJ"}

package/dist/interaction/Ripple.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/interaction/Ripple.tsx"],"sourcesContent":["\"use client\";\nimport { cnb } from \"cnbuilder\";\nimport { type ReactElement } from \"react\";\nimport {\n  type CSSTransitionClassNames,\n  type TransitionTimeout,\n} from \"../transition/types.js\";\nimport { useCSSTransition } from \"../transition/useCSSTransition.js\";\nimport { type RippleState, type RippleTransitionCallbacks } from \"./types.js\";\n\n/** @internal */\nexport const DEFAULT_RIPPLE_CLASSNAMES: Readonly<CSSTransitionClassNames> = {\n  enter: \"rmd-ripple--animating\",\n  enterActive: \"rmd-ripple--scaling\",\n  enterDone: \"rmd-ripple--animating rmd-ripple--scaling\",\n  exit: \"rmd-ripple--animating rmd-ripple--scaling\",\n  exitActive: \"rmd-ripple--fading\",\n};\n\n/** @internal */\nexport const DEFAULT_RIPPLE_TIMEOUT: Readonly<TransitionTimeout> = {\n  enter: 150,\n  exit: 300,\n};\n\n/** @internal */\nexport interface RippleProps extends RippleTransitionCallbacks {\n  className?: string;\n  timeout?: TransitionTimeout;\n  classNames?: CSSTransitionClassNames;\n  ripple: RippleState;\n}\n\n/**\n * **Client Component**\n *\n * This component should only be used by the `RippleContainer` component.\n *\n * @internal\n */\nexport function Ripple(props: RippleProps): ReactElement {\n  const {\n    className,\n    timeout = DEFAULT_RIPPLE_TIMEOUT,\n    classNames = DEFAULT_RIPPLE_CLASSNAMES,\n    ripple,\n    onEntered,\n    onExited,\n  } = props;\n  const { style, exiting } = ripple;\n  const { elementProps, rendered } = useCSSTransition({\n    appear: true,\n    className: cnb(\"rmd-ripple\", className),\n    transitionIn: !exiting,\n    timeout,\n    classNames,\n    onEntered() {\n      onEntered(ripple);\n    },\n    onExited() {\n      onExited(ripple);\n    },\n  });\n\n  return <>{rendered && <span style={style} {...elementProps} />}</>;\n}\n"],"names":["cnb","useCSSTransition","DEFAULT_RIPPLE_CLASSNAMES","enter","enterActive","enterDone","exit","exitActive","DEFAULT_RIPPLE_TIMEOUT","Ripple","props","className","timeout","classNames","ripple","onEntered","onExited","style","exiting","elementProps","rendered","appear","transitionIn","span"],"mappings":"AAAA;;AACA,SAASA,GAAG,QAAQ,YAAY;AAMhC,SAASC,gBAAgB,QAAQ,oCAAoC;AAGrE,cAAc,GACd,OAAO,MAAMC,4BAA+D;IAC1EC,OAAO;IACPC,aAAa;IACbC,WAAW;IACXC,MAAM;IACNC,YAAY;AACd,EAAE;AAEF,cAAc,GACd,OAAO,MAAMC,yBAAsD;IACjEL,OAAO;IACPG,MAAM;AACR,EAAE;AAUF;;;;;;CAMC,GACD,OAAO,SAASG,OAAOC,KAAkB;IACvC,MAAM,EACJC,SAAS,EACTC,UAAUJ,sBAAsB,EAChCK,aAAaX,yBAAyB,EACtCY,MAAM,EACNC,SAAS,EACTC,QAAQ,EACT,GAAGN;IACJ,MAAM,EAAEO,KAAK,EAAEC,OAAO,EAAE,GAAGJ;IAC3B,MAAM,EAAEK,YAAY,EAAEC,QAAQ,EAAE,GAAGnB,iBAAiB;QAClDoB,QAAQ;QACRV,WAAWX,IAAI,cAAcW;QAC7BW,cAAc,CAACJ;QACfN;QACAC;QACAE;YACEA,UAAUD;QACZ;QACAE;YACEA,SAASF;QACX;IACF;IAEA,qBAAO;kBAAGM,0BAAY,KAACG;YAAKN,OAAOA;YAAQ,GAAGE,YAAY;;;AAC5D"}
+{"version":3,"sources":["../../src/interaction/Ripple.tsx"],"sourcesContent":["\"use client\";\n\nimport { cnb } from \"cnbuilder\";\nimport { type ReactElement } from \"react\";\n\nimport {\n  type CSSTransitionClassNames,\n  type TransitionTimeout,\n} from \"../transition/types.js\";\nimport { useCSSTransition } from \"../transition/useCSSTransition.js\";\nimport { type RippleState, type RippleTransitionCallbacks } from \"./types.js\";\n\n/** @internal */\nexport const DEFAULT_RIPPLE_CLASSNAMES: Readonly<CSSTransitionClassNames> = {\n  enter: \"rmd-ripple--animating\",\n  enterActive: \"rmd-ripple--scaling\",\n  enterDone: \"rmd-ripple--animating rmd-ripple--scaling\",\n  exit: \"rmd-ripple--animating rmd-ripple--scaling\",\n  exitActive: \"rmd-ripple--fading\",\n};\n\n/** @internal */\nexport const DEFAULT_RIPPLE_TIMEOUT: Readonly<TransitionTimeout> = {\n  enter: 150,\n  exit: 300,\n};\n\n/** @internal */\nexport interface RippleProps extends RippleTransitionCallbacks {\n  className?: string;\n  timeout?: TransitionTimeout;\n  classNames?: CSSTransitionClassNames;\n  ripple: RippleState;\n}\n\n/**\n * **Client Component**\n *\n * This component should only be used by the `RippleContainer` component.\n *\n * @internal\n */\nexport function Ripple(props: RippleProps): ReactElement {\n  const {\n    className,\n    timeout = DEFAULT_RIPPLE_TIMEOUT,\n    classNames = DEFAULT_RIPPLE_CLASSNAMES,\n    ripple,\n    onEntered,\n    onExited,\n  } = props;\n  const { style, exiting } = ripple;\n  const { elementProps, rendered } = useCSSTransition({\n    appear: true,\n    className: cnb(\"rmd-ripple\", className),\n    transitionIn: !exiting,\n    timeout,\n    classNames,\n    onEntered() {\n      onEntered(ripple);\n    },\n    onExited() {\n      onExited(ripple);\n    },\n  });\n\n  return <>{rendered && <span style={style} {...elementProps} />}</>;\n}\n"],"names":["cnb","useCSSTransition","DEFAULT_RIPPLE_CLASSNAMES","enter","enterActive","enterDone","exit","exitActive","DEFAULT_RIPPLE_TIMEOUT","Ripple","props","className","timeout","classNames","ripple","onEntered","onExited","style","exiting","elementProps","rendered","appear","transitionIn","span"],"mappings":"AAAA;;AAEA,SAASA,GAAG,QAAQ,YAAY;AAOhC,SAASC,gBAAgB,QAAQ,oCAAoC;AAGrE,cAAc,GACd,OAAO,MAAMC,4BAA+D;IAC1EC,OAAO;IACPC,aAAa;IACbC,WAAW;IACXC,MAAM;IACNC,YAAY;AACd,EAAE;AAEF,cAAc,GACd,OAAO,MAAMC,yBAAsD;IACjEL,OAAO;IACPG,MAAM;AACR,EAAE;AAUF;;;;;;CAMC,GACD,OAAO,SAASG,OAAOC,KAAkB;IACvC,MAAM,EACJC,SAAS,EACTC,UAAUJ,sBAAsB,EAChCK,aAAaX,yBAAyB,EACtCY,MAAM,EACNC,SAAS,EACTC,QAAQ,EACT,GAAGN;IACJ,MAAM,EAAEO,KAAK,EAAEC,OAAO,EAAE,GAAGJ;IAC3B,MAAM,EAAEK,YAAY,EAAEC,QAAQ,EAAE,GAAGnB,iBAAiB;QAClDoB,QAAQ;QACRV,WAAWX,IAAI,cAAcW;QAC7BW,cAAc,CAACJ;QACfN;QACAC;QACAE;YACEA,UAAUD;QACZ;QACAE;YACEA,SAASF;QACX;IACF;IAEA,qBAAO;kBAAGM,0BAAY,KAACG;YAAKN,OAAOA;YAAQ,GAAGE,YAAY;;;AAC5D"}

package/dist/interaction/RippleContainer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/interaction/RippleContainer.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { type ReactElement } from \"react\";\nimport { Ripple } from \"./Ripple.js\";\nimport { type ProvidedRippleContainerProps } from \"./types.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-ripple-inset\"?: string | number;\n    \"--rmd-ripple-border-radius\"?: string | number;\n  }\n}\n\n/** @internal */\nexport interface RippleContainerProps extends ProvidedRippleContainerProps {\n  className?: string;\n}\n\n/**\n * This component should generally only be used internally within `react-md`\n * unless you are implementing a custom component interaction with\n * `useElementInteraction`.\n *\n * @see {@link useElementInteraction} for example usage.\n */\nexport function RippleContainer(props: RippleContainerProps): ReactElement {\n  const { className, ripples, onEntered, onExited } = props;\n\n  return (\n    <span className={cnb(\"rmd-ripple-container\", className)}>\n      {ripples.map((ripple) => (\n        <Ripple\n          key={ripple.startTime}\n          ripple={ripple}\n          onEntered={onEntered}\n          onExited={onExited}\n        />\n      ))}\n    </span>\n  );\n}\n"],"names":["cnb","Ripple","RippleContainer","props","className","ripples","onEntered","onExited","span","map","ripple","startTime"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAASC,MAAM,QAAQ,cAAc;AAerC;;;;;;CAMC,GACD,OAAO,SAASC,gBAAgBC,KAA2B;IACzD,MAAM,EAAEC,SAAS,EAAEC,OAAO,EAAEC,SAAS,EAAEC,QAAQ,EAAE,GAAGJ;IAEpD,qBACE,KAACK;QAAKJ,WAAWJ,IAAI,wBAAwBI;kBAC1CC,QAAQI,GAAG,CAAC,CAACC,uBACZ,KAACT;gBAECS,QAAQA;gBACRJ,WAAWA;gBACXC,UAAUA;eAHLG,OAAOC,SAAS;;AAQ/B"}
+{"version":3,"sources":["../../src/interaction/RippleContainer.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { type ReactElement } from \"react\";\n\nimport { Ripple } from \"./Ripple.js\";\nimport { type ProvidedRippleContainerProps } from \"./types.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-ripple-inset\"?: string | number;\n    \"--rmd-ripple-border-radius\"?: string | number;\n  }\n}\n\n/** @internal */\nexport interface RippleContainerProps extends ProvidedRippleContainerProps {\n  className?: string;\n}\n\n/**\n * This component should generally only be used internally within `react-md`\n * unless you are implementing a custom component interaction with\n * `useElementInteraction`.\n *\n * @see {@link useElementInteraction} for example usage.\n */\nexport function RippleContainer(props: RippleContainerProps): ReactElement {\n  const { className, ripples, onEntered, onExited } = props;\n\n  return (\n    <span className={cnb(\"rmd-ripple-container\", className)}>\n      {ripples.map((ripple) => (\n        <Ripple\n          key={ripple.startTime}\n          ripple={ripple}\n          onEntered={onEntered}\n          onExited={onExited}\n        />\n      ))}\n    </span>\n  );\n}\n"],"names":["cnb","Ripple","RippleContainer","props","className","ripples","onEntered","onExited","span","map","ripple","startTime"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAGhC,SAASC,MAAM,QAAQ,cAAc;AAerC;;;;;;CAMC,GACD,OAAO,SAASC,gBAAgBC,KAA2B;IACzD,MAAM,EAAEC,SAAS,EAAEC,OAAO,EAAEC,SAAS,EAAEC,QAAQ,EAAE,GAAGJ;IAEpD,qBACE,KAACK;QAAKJ,WAAWJ,IAAI,wBAAwBI;kBAC1CC,QAAQI,GAAG,CAAC,CAACC,uBACZ,KAACT;gBAECS,QAAQA;gBACRJ,WAAWA;gBACXC,UAAUA;eAHLG,OAAOC,SAAS;;AAQ/B"}

package/dist/interaction/UserInteractionModeProvider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/interaction/UserInteractionModeProvider.tsx"],"sourcesContent":["\"use client\";\nimport {\n  createContext,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  type ReactElement,\n  type ReactNode,\n} from \"react\";\n\n/**\n * This is the current mode for how your user is interacting with your app. This\n * will be used to determine which type of state styles should be applied at the\n * time of interacting with an element on your page.\n *\n * @defaultValue `\"mouse\"`\n */\nexport type UserInteractionMode = \"keyboard\" | \"mouse\" | \"touch\";\n\n/** @internal */\ninterface UserInteractionModeContext {\n  __root: boolean;\n  mode: UserInteractionMode;\n}\n\nconst context = createContext<UserInteractionModeContext>({\n  __root: false,\n  mode: \"mouse\",\n});\ncontext.displayName = \"UserInteractionMode\";\nconst { Provider } = context;\n\n/**\n * @returns the current user interaction mode\n */\nexport function useUserInteractionMode(): UserInteractionMode {\n  return useContext(context).mode;\n}\n\n/** @internal */\nconst TOUCH_TIMEOUT = 1200;\n\nexport interface UserInteractionModeProviderProps {\n  children: ReactNode;\n}\n\n/**\n * **Client Component**\n *\n * This component is used to determine how a user is interacting with your app\n * to update component functionality and applying the following class names to\n * the `document.body`:\n *\n * - `\"rmd-mouse-mode\"`\n * - `\"rmd-keyboard-mode\"`\n * - `\"rmd-touch-mode\"`\n *\n * Within `react-md`, these classes are used for the following behavior:\n * - only display `:focus` outlines while in `\"rmd-keyboard-mode\"`\n * - do not display `:hover` effects while in `\"rmd-touch-mode\"`\n *\n * @example Mount at the root of your app\n * ```tsx\n * import { createRoot } from \"react-dom/client\";\n * import { UserInteractionModeProvider } from \"@react-md/core\";\n * import App from \"./App\":\n *\n * const container = document.getElementById(\"root\");\n * const root = createRoot(container);\n *\n * root.render(\n *   <UserInteractionModeProvider>\n *     <App />\n *   </UserInteractionModeProvider>\n * );\n * ```\n *\n * @throws \"The `UserInteractionModeProvider` cannot be mounted multiple times.\"\n * if this component is mounted multiple times in your app.\n */\nexport function UserInteractionModeProvider(\n  props: UserInteractionModeProviderProps\n): ReactElement {\n  const { children } = props;\n  const { __root } = useContext(context);\n  if (__root) {\n    throw new Error(\n      \"The `UserInteractionModeProvider` cannot be mounted multiple times.\"\n    );\n  }\n\n  const [mode, setMode] = useState<UserInteractionMode>(\"mouse\");\n  const lastTouchTime = useRef(0);\n  const isTouchContextMenu = useRef(false);\n\n  /**\n   * This effect helps determine the current interaction mode by attaching the\n   * required event listeners to the window. The `mode` will always be defaulted\n   * to `mouse` at first since it has the least possibilities of causing errors\n   * with styles since the mouse-only styles are normally just `:hover` effects.\n   *\n   * ## Switching between modes:\n   *\n   * ### While in `mouse` mode:\n   *\n   * - any `keydown` event will switch to `keyboard` mode\n   *   - this does have the side effect of meta keys also causing the switch over,\n   *     but it feels fine since it helps show the current focus in the document\n   *     as well\n   * - any `touchstart` event will switch to `touch` mode\n   *\n   * ### While in `keyboard` mode:\n   *\n   * - any `mousedown` event will switch to `mouse` mode\n   *   - it is perfectly okay to move the mouse while in keyboard mode, but still\n   *     want to keep the keyboard styles until the user actually starts clicking\n   * - any `touchstart` event will switch to `touch` mode\n   *\n   * ### While in `touch` mode:\n   *\n   * - any `mousemove` event will switch to `mouse` mode, but **only** if there\n   *   hasn't been a `contextmenu` event within the last `1.2s`\n   *   - you can really only switch back to `mouse` mode if you are using the\n   *     devtools to emulate devices OR using a touch-desktop. I don't know how\n   *     common this really is though.\n   *   - touching the screen will always fire a `mousemove` event (which is why\n   *     the `:hover` styles are normally with `rmd-utils-mouse-only`) and even\n   *     after the `contextmenu` event. Normally want to go back to `mouse` mode\n   *     when the mouse re-enters the `window`\n   *\n   * Note: It's currently impossible to switch from `touch` to `keyboard`\n   * immediately. You'd first need to switch to `mouse` and then to `keyboard`. I\n   * don't really know of any use-cases other than the weird touch-desktop stuff\n   * and I have no experience using them.\n   */\n  useEffect(() => {\n    const enableMouseMode = (): void => {\n      setMode(\"mouse\");\n    };\n    const enableKeyboardMode = (): void => {\n      setMode(\"keyboard\");\n    };\n\n    const handleTouchStart = (): void => {\n      lastTouchTime.current = Date.now();\n      isTouchContextMenu.current = false;\n      setMode(\"touch\");\n    };\n\n    const handleMouseMove = (): void => {\n      if (\n        isTouchContextMenu.current ||\n        Date.now() - lastTouchTime.current < TOUCH_TIMEOUT\n      ) {\n        isTouchContextMenu.current = false;\n        return;\n      }\n\n      enableMouseMode();\n    };\n    const handleContextMenu = (): void => {\n      isTouchContextMenu.current = true;\n    };\n\n    const className = `rmd-${mode}-mode`;\n    document.body.classList.add(className);\n    window.addEventListener(\"touchstart\", handleTouchStart, true);\n    if (mode === \"mouse\") {\n      window.addEventListener(\"keydown\", enableKeyboardMode, true);\n    } else if (mode === \"keyboard\") {\n      window.addEventListener(\"mousedown\", enableMouseMode, true);\n    } else {\n      window.addEventListener(\"mousemove\", handleMouseMove, true);\n      window.addEventListener(\"contextmenu\", handleContextMenu, true);\n    }\n\n    return () => {\n      document.body.classList.remove(className);\n      window.removeEventListener(\"touchstart\", handleTouchStart, true);\n      if (mode === \"mouse\") {\n        window.removeEventListener(\"keydown\", enableKeyboardMode, true);\n      } else if (mode === \"keyboard\") {\n        window.removeEventListener(\"mousedown\", enableMouseMode, true);\n      } else {\n        window.removeEventListener(\"mousemove\", handleMouseMove, true);\n        window.removeEventListener(\"contextmenu\", handleContextMenu, true);\n      }\n    };\n  }, [mode]);\n\n  const value = useMemo<UserInteractionModeContext>(\n    () => ({\n      mode,\n      __root: true,\n    }),\n    [mode]\n  );\n  return <Provider value={value}>{children}</Provider>;\n}\n"],"names":["createContext","useContext","useEffect","useMemo","useRef","useState","context","__root","mode","displayName","Provider","useUserInteractionMode","TOUCH_TIMEOUT","UserInteractionModeProvider","props","children","Error","setMode","lastTouchTime","isTouchContextMenu","enableMouseMode","enableKeyboardMode","handleTouchStart","current","Date","now","handleMouseMove","handleContextMenu","className","document","body","classList","add","window","addEventListener","remove","removeEventListener","value"],"mappings":"AAAA;;AACA,SACEA,aAAa,EACbC,UAAU,EACVC,SAAS,EACTC,OAAO,EACPC,MAAM,EACNC,QAAQ,QAGH,QAAQ;AAiBf,MAAMC,wBAAUN,cAA0C;IACxDO,QAAQ;IACRC,MAAM;AACR;AACAF,QAAQG,WAAW,GAAG;AACtB,MAAM,EAAEC,QAAQ,EAAE,GAAGJ;AAErB;;CAEC,GACD,OAAO,SAASK;IACd,OAAOV,WAAWK,SAASE,IAAI;AACjC;AAEA,cAAc,GACd,MAAMI,gBAAgB;AAMtB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiCC,GACD,OAAO,SAASC,4BACdC,KAAuC;IAEvC,MAAM,EAAEC,QAAQ,EAAE,GAAGD;IACrB,MAAM,EAAEP,MAAM,EAAE,GAAGN,WAAWK;IAC9B,IAAIC,QAAQ;QACV,MAAM,IAAIS,MACR;IAEJ;IAEA,MAAM,CAACR,MAAMS,QAAQ,GAAGZ,SAA8B;IACtD,MAAMa,gBAAgBd,OAAO;IAC7B,MAAMe,qBAAqBf,OAAO;IAElC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCC,GACDF,UAAU;QACR,MAAMkB,kBAAkB;YACtBH,QAAQ;QACV;QACA,MAAMI,qBAAqB;YACzBJ,QAAQ;QACV;QAEA,MAAMK,mBAAmB;YACvBJ,cAAcK,OAAO,GAAGC,KAAKC,GAAG;YAChCN,mBAAmBI,OAAO,GAAG;YAC7BN,QAAQ;QACV;QAEA,MAAMS,kBAAkB;YACtB,IACEP,mBAAmBI,OAAO,IAC1BC,KAAKC,GAAG,KAAKP,cAAcK,OAAO,GAAGX,eACrC;gBACAO,mBAAmBI,OAAO,GAAG;gBAC7B;YACF;YAEAH;QACF;QACA,MAAMO,oBAAoB;YACxBR,mBAAmBI,OAAO,GAAG;QAC/B;QAEA,MAAMK,YAAY,CAAC,IAAI,EAAEpB,KAAK,KAAK,CAAC;QACpCqB,SAASC,IAAI,CAACC,SAAS,CAACC,GAAG,CAACJ;QAC5BK,OAAOC,gBAAgB,CAAC,cAAcZ,kBAAkB;QACxD,IAAId,SAAS,SAAS;YACpByB,OAAOC,gBAAgB,CAAC,WAAWb,oBAAoB;QACzD,OAAO,IAAIb,SAAS,YAAY;YAC9ByB,OAAOC,gBAAgB,CAAC,aAAad,iBAAiB;QACxD,OAAO;YACLa,OAAOC,gBAAgB,CAAC,aAAaR,iBAAiB;YACtDO,OAAOC,gBAAgB,CAAC,eAAeP,mBAAmB;QAC5D;QAEA,OAAO;YACLE,SAASC,IAAI,CAACC,SAAS,CAACI,MAAM,CAACP;YAC/BK,OAAOG,mBAAmB,CAAC,cAAcd,kBAAkB;YAC3D,IAAId,SAAS,SAAS;gBACpByB,OAAOG,mBAAmB,CAAC,WAAWf,oBAAoB;YAC5D,OAAO,IAAIb,SAAS,YAAY;gBAC9ByB,OAAOG,mBAAmB,CAAC,aAAahB,iBAAiB;YAC3D,OAAO;gBACLa,OAAOG,mBAAmB,CAAC,aAAaV,iBAAiB;gBACzDO,OAAOG,mBAAmB,CAAC,eAAeT,mBAAmB;YAC/D;QACF;IACF,GAAG;QAACnB;KAAK;IAET,MAAM6B,QAAQlC,QACZ,IAAO,CAAA;YACLK;YACAD,QAAQ;QACV,CAAA,GACA;QAACC;KAAK;IAER,qBAAO,KAACE;QAAS2B,OAAOA;kBAAQtB;;AAClC"}
+{"version":3,"sources":["../../src/interaction/UserInteractionModeProvider.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  type ReactElement,\n  type ReactNode,\n  createContext,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\n/**\n * This is the current mode for how your user is interacting with your app. This\n * will be used to determine which type of state styles should be applied at the\n * time of interacting with an element on your page.\n *\n * @defaultValue `\"mouse\"`\n */\nexport type UserInteractionMode = \"keyboard\" | \"mouse\" | \"touch\";\n\n/** @internal */\ninterface UserInteractionModeContext {\n  __root: boolean;\n  mode: UserInteractionMode;\n}\n\nconst context = createContext<UserInteractionModeContext>({\n  __root: false,\n  mode: \"mouse\",\n});\ncontext.displayName = \"UserInteractionMode\";\nconst { Provider } = context;\n\n/**\n * @returns the current user interaction mode\n */\nexport function useUserInteractionMode(): UserInteractionMode {\n  return useContext(context).mode;\n}\n\n/** @internal */\nconst TOUCH_TIMEOUT = 1200;\n\nexport interface UserInteractionModeProviderProps {\n  children: ReactNode;\n}\n\n/**\n * **Client Component**\n *\n * This component is used to determine how a user is interacting with your app\n * to update component functionality and applying the following class names to\n * the `document.body`:\n *\n * - `\"rmd-mouse-mode\"`\n * - `\"rmd-keyboard-mode\"`\n * - `\"rmd-touch-mode\"`\n *\n * Within `react-md`, these classes are used for the following behavior:\n * - only display `:focus` outlines while in `\"rmd-keyboard-mode\"`\n * - do not display `:hover` effects while in `\"rmd-touch-mode\"`\n *\n * @example Mount at the root of your app\n * ```tsx\n * import { createRoot } from \"react-dom/client\";\n * import { UserInteractionModeProvider } from \"@react-md/core\";\n * import App from \"./App\":\n *\n * const container = document.getElementById(\"root\");\n * const root = createRoot(container);\n *\n * root.render(\n *   <UserInteractionModeProvider>\n *     <App />\n *   </UserInteractionModeProvider>\n * );\n * ```\n *\n * @throws \"The `UserInteractionModeProvider` cannot be mounted multiple times.\"\n * if this component is mounted multiple times in your app.\n */\nexport function UserInteractionModeProvider(\n  props: UserInteractionModeProviderProps\n): ReactElement {\n  const { children } = props;\n  const { __root } = useContext(context);\n  if (__root) {\n    throw new Error(\n      \"The `UserInteractionModeProvider` cannot be mounted multiple times.\"\n    );\n  }\n\n  const [mode, setMode] = useState<UserInteractionMode>(\"mouse\");\n  const lastTouchTime = useRef(0);\n  const isTouchContextMenu = useRef(false);\n\n  /**\n   * This effect helps determine the current interaction mode by attaching the\n   * required event listeners to the window. The `mode` will always be defaulted\n   * to `mouse` at first since it has the least possibilities of causing errors\n   * with styles since the mouse-only styles are normally just `:hover` effects.\n   *\n   * ## Switching between modes:\n   *\n   * ### While in `mouse` mode:\n   *\n   * - any `keydown` event will switch to `keyboard` mode\n   *   - this does have the side effect of meta keys also causing the switch over,\n   *     but it feels fine since it helps show the current focus in the document\n   *     as well\n   * - any `touchstart` event will switch to `touch` mode\n   *\n   * ### While in `keyboard` mode:\n   *\n   * - any `mousedown` event will switch to `mouse` mode\n   *   - it is perfectly okay to move the mouse while in keyboard mode, but still\n   *     want to keep the keyboard styles until the user actually starts clicking\n   * - any `touchstart` event will switch to `touch` mode\n   *\n   * ### While in `touch` mode:\n   *\n   * - any `mousemove` event will switch to `mouse` mode, but **only** if there\n   *   hasn't been a `contextmenu` event within the last `1.2s`\n   *   - you can really only switch back to `mouse` mode if you are using the\n   *     devtools to emulate devices OR using a touch-desktop. I don't know how\n   *     common this really is though.\n   *   - touching the screen will always fire a `mousemove` event (which is why\n   *     the `:hover` styles are normally with `rmd-utils-mouse-only`) and even\n   *     after the `contextmenu` event. Normally want to go back to `mouse` mode\n   *     when the mouse re-enters the `window`\n   *\n   * Note: It's currently impossible to switch from `touch` to `keyboard`\n   * immediately. You'd first need to switch to `mouse` and then to `keyboard`. I\n   * don't really know of any use-cases other than the weird touch-desktop stuff\n   * and I have no experience using them.\n   */\n  useEffect(() => {\n    const enableMouseMode = (): void => {\n      setMode(\"mouse\");\n    };\n    const enableKeyboardMode = (): void => {\n      setMode(\"keyboard\");\n    };\n\n    const handleTouchStart = (): void => {\n      lastTouchTime.current = Date.now();\n      isTouchContextMenu.current = false;\n      setMode(\"touch\");\n    };\n\n    const handleMouseMove = (): void => {\n      if (\n        isTouchContextMenu.current ||\n        Date.now() - lastTouchTime.current < TOUCH_TIMEOUT\n      ) {\n        isTouchContextMenu.current = false;\n        return;\n      }\n\n      enableMouseMode();\n    };\n    const handleContextMenu = (): void => {\n      isTouchContextMenu.current = true;\n    };\n\n    const className = `rmd-${mode}-mode`;\n    document.body.classList.add(className);\n    window.addEventListener(\"touchstart\", handleTouchStart, true);\n    if (mode === \"mouse\") {\n      window.addEventListener(\"keydown\", enableKeyboardMode, true);\n    } else if (mode === \"keyboard\") {\n      window.addEventListener(\"mousedown\", enableMouseMode, true);\n    } else {\n      window.addEventListener(\"mousemove\", handleMouseMove, true);\n      window.addEventListener(\"contextmenu\", handleContextMenu, true);\n    }\n\n    return () => {\n      document.body.classList.remove(className);\n      window.removeEventListener(\"touchstart\", handleTouchStart, true);\n      if (mode === \"mouse\") {\n        window.removeEventListener(\"keydown\", enableKeyboardMode, true);\n      } else if (mode === \"keyboard\") {\n        window.removeEventListener(\"mousedown\", enableMouseMode, true);\n      } else {\n        window.removeEventListener(\"mousemove\", handleMouseMove, true);\n        window.removeEventListener(\"contextmenu\", handleContextMenu, true);\n      }\n    };\n  }, [mode]);\n\n  const value = useMemo<UserInteractionModeContext>(\n    () => ({\n      mode,\n      __root: true,\n    }),\n    [mode]\n  );\n  return <Provider value={value}>{children}</Provider>;\n}\n"],"names":["createContext","useContext","useEffect","useMemo","useRef","useState","context","__root","mode","displayName","Provider","useUserInteractionMode","TOUCH_TIMEOUT","UserInteractionModeProvider","props","children","Error","setMode","lastTouchTime","isTouchContextMenu","enableMouseMode","enableKeyboardMode","handleTouchStart","current","Date","now","handleMouseMove","handleContextMenu","className","document","body","classList","add","window","addEventListener","remove","removeEventListener","value"],"mappings":"AAAA;;AAEA,SAGEA,aAAa,EACbC,UAAU,EACVC,SAAS,EACTC,OAAO,EACPC,MAAM,EACNC,QAAQ,QACH,QAAQ;AAiBf,MAAMC,wBAAUN,cAA0C;IACxDO,QAAQ;IACRC,MAAM;AACR;AACAF,QAAQG,WAAW,GAAG;AACtB,MAAM,EAAEC,QAAQ,EAAE,GAAGJ;AAErB;;CAEC,GACD,OAAO,SAASK;IACd,OAAOV,WAAWK,SAASE,IAAI;AACjC;AAEA,cAAc,GACd,MAAMI,gBAAgB;AAMtB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiCC,GACD,OAAO,SAASC,4BACdC,KAAuC;IAEvC,MAAM,EAAEC,QAAQ,EAAE,GAAGD;IACrB,MAAM,EAAEP,MAAM,EAAE,GAAGN,WAAWK;IAC9B,IAAIC,QAAQ;QACV,MAAM,IAAIS,MACR;IAEJ;IAEA,MAAM,CAACR,MAAMS,QAAQ,GAAGZ,SAA8B;IACtD,MAAMa,gBAAgBd,OAAO;IAC7B,MAAMe,qBAAqBf,OAAO;IAElC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCC,GACDF,UAAU;QACR,MAAMkB,kBAAkB;YACtBH,QAAQ;QACV;QACA,MAAMI,qBAAqB;YACzBJ,QAAQ;QACV;QAEA,MAAMK,mBAAmB;YACvBJ,cAAcK,OAAO,GAAGC,KAAKC,GAAG;YAChCN,mBAAmBI,OAAO,GAAG;YAC7BN,QAAQ;QACV;QAEA,MAAMS,kBAAkB;YACtB,IACEP,mBAAmBI,OAAO,IAC1BC,KAAKC,GAAG,KAAKP,cAAcK,OAAO,GAAGX,eACrC;gBACAO,mBAAmBI,OAAO,GAAG;gBAC7B;YACF;YAEAH;QACF;QACA,MAAMO,oBAAoB;YACxBR,mBAAmBI,OAAO,GAAG;QAC/B;QAEA,MAAMK,YAAY,CAAC,IAAI,EAAEpB,KAAK,KAAK,CAAC;QACpCqB,SAASC,IAAI,CAACC,SAAS,CAACC,GAAG,CAACJ;QAC5BK,OAAOC,gBAAgB,CAAC,cAAcZ,kBAAkB;QACxD,IAAId,SAAS,SAAS;YACpByB,OAAOC,gBAAgB,CAAC,WAAWb,oBAAoB;QACzD,OAAO,IAAIb,SAAS,YAAY;YAC9ByB,OAAOC,gBAAgB,CAAC,aAAad,iBAAiB;QACxD,OAAO;YACLa,OAAOC,gBAAgB,CAAC,aAAaR,iBAAiB;YACtDO,OAAOC,gBAAgB,CAAC,eAAeP,mBAAmB;QAC5D;QAEA,OAAO;YACLE,SAASC,IAAI,CAACC,SAAS,CAACI,MAAM,CAACP;YAC/BK,OAAOG,mBAAmB,CAAC,cAAcd,kBAAkB;YAC3D,IAAId,SAAS,SAAS;gBACpByB,OAAOG,mBAAmB,CAAC,WAAWf,oBAAoB;YAC5D,OAAO,IAAIb,SAAS,YAAY;gBAC9ByB,OAAOG,mBAAmB,CAAC,aAAahB,iBAAiB;YAC3D,OAAO;gBACLa,OAAOG,mBAAmB,CAAC,aAAaV,iBAAiB;gBACzDO,OAAOG,mBAAmB,CAAC,eAAeT,mBAAmB;YAC/D;QACF;IACF,GAAG;QAACnB;KAAK;IAET,MAAM6B,QAAQlC,QACZ,IAAO,CAAA;YACLK;YACAD,QAAQ;QACV,CAAA,GACA;QAACC;KAAK;IAER,qBAAO,KAACE;QAAS2B,OAAOA;kBAAQtB;;AAClC"}

package/dist/interaction/_interaction.scss

@@ -324,8 +324,8 @@ $variables: (
     }
 
     transition-duration: transition.$linear-duration;
-    transition-property: background-color,
-      if($focus-box-shadow, box-shadow, outline-color);
+    transition-property:
+      background-color, if($focus-box-shadow, box-shadow, outline-color);
     transition-timing-function: transition.$linear-timing-function;
   }
 

package/dist/interaction/useElementInteraction.d.ts

@@ -1,5 +1,5 @@
-import type { ReactElement } from "react";
-import type { ElementInteractionHandlers, ElementInteractionMode } from "./types.js";
+import { type ReactElement } from "react";
+import { type ElementInteractionHandlers, type ElementInteractionMode } from "./types.js";
 declare module "react" {
     interface CSSProperties {
         "--rmd-surface-inset"?: string | number;
@@ -25,7 +25,7 @@ export interface ElementInteractionOptions<E extends HTMLElement> extends Partia
     disabled?: boolean;
 }
 /** @since 6.0.0 */
-export interface ElementInteractionHookReturnValue<E extends HTMLElement> {
+export interface ElementInteractionImplementation<E extends HTMLElement> {
     /**
      * The event handlers required for element interaction.
      */
@@ -53,9 +53,9 @@ export interface ElementInteractionHookReturnValue<E extends HTMLElement> {
  *
  * @example Providing Element Interaction
  * ```tsx
- * import { useElementInteraction } from "@react-md/core";
+ * import { useElementInteraction } from "@react-md/core/interaction/useElementInteraction";
  * import { cnb } from "cnbuilder";
- * import type { ReactElement } from "react";
+ * import { type ReactElement } from "react";
  *
  * import styles from "./CustomComponent.module.scss";
  *
@@ -77,26 +77,25 @@ export interface ElementInteractionHookReturnValue<E extends HTMLElement> {
  *     onTouchStart,
  *     onTouchMove,
  *     onTouchEnd,
- *     ...remaining,
+ *     ...remaining
  *   } = props;
  *
- *   const { handlers, pressed, ripples } =
- *     useElementInteraction({
- *       disabled,
- *       // pass remaining props so that if any event handlers were provided to
- *       // the component, they will be merged with the element interaction
- *       // handlers
- *       onBlur,
- *       onClick,
- *       onKeyDown,
- *       onKeyUp,
- *       onMouseDown,
- *       onMouseUp,
- *       onMouseLeave,
- *       onTouchStart,
- *       onTouchMove,
- *       onTouchEnd,
- *     })
+ *   const { handlers, pressed, ripples } = useElementInteraction({
+ *     disabled,
+ *     // pass remaining props so that if any event handlers were provided to
+ *     // the component, they will be merged with the element interaction
+ *     // handlers
+ *     onBlur,
+ *     onClick,
+ *     onKeyDown,
+ *     onKeyUp,
+ *     onMouseDown,
+ *     onMouseUp,
+ *     onMouseLeave,
+ *     onTouchStart,
+ *     onTouchMove,
+ *     onTouchEnd,
+ *   });
  *
  *   return (
  *     <div
@@ -116,9 +115,9 @@ export interface ElementInteractionHookReturnValue<E extends HTMLElement> {
  *
  * @param options - An object of {@link ElementInteractionOptions} that is used
  * to merge event handlers or disable the interactions.
- * @returns the {@link ElementInteractionHookReturnValue}
+ * @returns the {@link ElementInteractionImplementation}
  * @since 6.0.0 Touch interactions were removed since it never looked
  * good if the user touched a clickable element right before scrolling. The
  * ripple effect will only be fired on click now for touch devices.
  */
-export declare function useElementInteraction<E extends HTMLElement>(options?: ElementInteractionOptions<E>): ElementInteractionHookReturnValue<E>;
+export declare function useElementInteraction<E extends HTMLElement>(options?: ElementInteractionOptions<E>): ElementInteractionImplementation<E>;

package/dist/interaction/useElementInteraction.js

@@ -15,9 +15,9 @@ const noop = ()=>{
  *
  * @example Providing Element Interaction
  * ```tsx
- * import { useElementInteraction } from "@react-md/core";
+ * import { useElementInteraction } from "@react-md/core/interaction/useElementInteraction";
  * import { cnb } from "cnbuilder";
- * import type { ReactElement } from "react";
+ * import { type ReactElement } from "react";
  *
  * import styles from "./CustomComponent.module.scss";
  *
@@ -39,26 +39,25 @@ const noop = ()=>{
  *     onTouchStart,
  *     onTouchMove,
  *     onTouchEnd,
- *     ...remaining,
+ *     ...remaining
  *   } = props;
  *
- *   const { handlers, pressed, ripples } =
- *     useElementInteraction({
- *       disabled,
- *       // pass remaining props so that if any event handlers were provided to
- *       // the component, they will be merged with the element interaction
- *       // handlers
- *       onBlur,
- *       onClick,
- *       onKeyDown,
- *       onKeyUp,
- *       onMouseDown,
- *       onMouseUp,
- *       onMouseLeave,
- *       onTouchStart,
- *       onTouchMove,
- *       onTouchEnd,
- *     })
+ *   const { handlers, pressed, ripples } = useElementInteraction({
+ *     disabled,
+ *     // pass remaining props so that if any event handlers were provided to
+ *     // the component, they will be merged with the element interaction
+ *     // handlers
+ *     onBlur,
+ *     onClick,
+ *     onKeyDown,
+ *     onKeyUp,
+ *     onMouseDown,
+ *     onMouseUp,
+ *     onMouseLeave,
+ *     onTouchStart,
+ *     onTouchMove,
+ *     onTouchEnd,
+ *   });
  *
  *   return (
  *     <div
@@ -78,7 +77,7 @@ const noop = ()=>{
  *
  * @param options - An object of {@link ElementInteractionOptions} that is used
  * to merge event handlers or disable the interactions.
- * @returns the {@link ElementInteractionHookReturnValue}
+ * @returns the {@link ElementInteractionImplementation}
  * @since 6.0.0 Touch interactions were removed since it never looked
  * good if the user touched a clickable element right before scrolling. The
  * ripple effect will only be fired on click now for touch devices.

package/dist/interaction/useElementInteraction.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/interaction/useElementInteraction.tsx"],"sourcesContent":["\"use client\";\nimport type {\n  FocusEvent,\n  KeyboardEvent,\n  MouseEvent,\n  ReactElement,\n  TouchEvent,\n} from \"react\";\nimport { useCallback, useReducer, useRef } from \"react\";\nimport { RippleContainer } from \"./RippleContainer.js\";\nimport { useUserInteractionMode } from \"./UserInteractionModeProvider.js\";\nimport { INTERACTION_CONFIG } from \"./config.js\";\nimport type {\n  ElementInteractionHandlers,\n  ElementInteractionMode,\n  ElementInteractionState,\n  RippleState,\n  RippleStyle,\n} from \"./types.js\";\nimport { getRippleStyle, releaseRipple, updateRipplesState } from \"./utils.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-surface-inset\"?: string | number;\n    \"--rmd-surface-border-radius\"?: string | number;\n  }\n}\n\n/** @since 6.0.0 */\nexport const PRESSED_CLASS_NAME = \"rmd-pressed\";\n\n/** @since 6.0.0 */\nexport interface ElementInteractionOptions<E extends HTMLElement>\n  extends Partial<ElementInteractionHandlers<E>> {\n  /**\n   * This can be used to override the {@link INTERACTION_CONFIG.mode}\n   *\n   * @defaultValue `INTERACTION_CONFIG.mode`\n   */\n  mode?: ElementInteractionMode;\n\n  /**\n   * Boolean if the element is currently disabled which will prevent any of the\n   * element interaction states from happening.\n   *\n   * @defaultValue `false`\n   */\n  disabled?: boolean;\n}\n\n/** @since 6.0.0 */\nexport interface ElementInteractionHookReturnValue<E extends HTMLElement> {\n  /**\n   * The event handlers required for element interaction.\n   */\n  handlers: Readonly<ElementInteractionHandlers<E>>;\n\n  /**\n   * Boolean if the element is currently pressed. This will always be `false` if\n   * the {@link ElementInteractionMode} is set to `\"none\"`\n   */\n  pressed: boolean;\n\n  /**\n   * This will be set to {@link PRESSED_CLASS_NAME} only when {@link pressed} is\n   * `true` and the {@link ElementInteractionMode} is set to `\"press\"`. It will\n   * be `undefined` otherwise.\n   */\n  pressedClassName: string | undefined;\n\n  /**\n   * The ripple click/touch interaction. This will be `undefined` when the {@link ElementInteractionMode}\n   * is set to `\"none\"` or `\"press\"`.\n   */\n  ripples?: ReactElement;\n}\n\ntype ElementInteractionAction =\n  | { type: \"press\"; style?: RippleStyle; programmatic?: boolean }\n  | { type: \"release\" | \"cancel\" }\n  | { type: \"entered\" | \"exited\"; ripple: RippleState };\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * This hook is used to apply the required element interaction based on the\n * {@link ElementInteractionMode} and should generally be used internally only.\n *\n * @example Providing Element Interaction\n * ```tsx\n * import { useElementInteraction } from \"@react-md/core\";\n * import { cnb } from \"cnbuilder\";\n * import type { ReactElement } from \"react\";\n *\n * import styles from \"./CustomComponent.module.scss\";\n *\n * interface Props extends HTMLAttributes<HTMLDivElement> {\n *   disabled?: boolean;\n * }\n *\n * function CustomComponent(props: Props): ReactElement {\n *   const {\n *     disabled = false,\n *     className,\n *     onBlur,\n *     onClick,\n *     onKeyDown,\n *     onKeyUp,\n *     onMouseDown,\n *     onMouseUp,\n *     onMouseLeave,\n *     onTouchStart,\n *     onTouchMove,\n *     onTouchEnd,\n *     ...remaining,\n *   } = props;\n *\n *   const { handlers, pressed, ripples } =\n *     useElementInteraction({\n *       disabled,\n *       // pass remaining props so that if any event handlers were provided to\n *       // the component, they will be merged with the element interaction\n *       // handlers\n *       onBlur,\n *       onClick,\n *       onKeyDown,\n *       onKeyUp,\n *       onMouseDown,\n *       onMouseUp,\n *       onMouseLeave,\n *       onTouchStart,\n *       onTouchMove,\n *       onTouchEnd,\n *     })\n *\n *   return (\n *     <div\n *       {...remaining}\n *       {...handlers}\n *       aria-disabled={disabled}\n *       role=\"button\"\n *       className={cnb(styles.button, pressed && styles.pressed)}\n *       tabIndex={disabled ? undefined : 0}\n *     >\n *       {children}\n *       {ripples}\n *     </div>\n *   );\n * }\n * ```\n *\n * @param options - An object of {@link ElementInteractionOptions} that is used\n * to merge event handlers or disable the interactions.\n * @returns the {@link ElementInteractionHookReturnValue}\n * @since 6.0.0 Touch interactions were removed since it never looked\n * good if the user touched a clickable element right before scrolling. The\n * ripple effect will only be fired on click now for touch devices.\n */\nexport function useElementInteraction<E extends HTMLElement>(\n  options: ElementInteractionOptions<E> = {}\n): ElementInteractionHookReturnValue<E> {\n  const {\n    onBlur = noop,\n    onClick = noop,\n    onMouseDown = noop,\n    onMouseUp = noop,\n    onMouseLeave = noop,\n    onKeyUp = noop,\n    onKeyDown = noop,\n    onTouchStart = noop,\n    onTouchEnd = noop,\n    onTouchMove = noop,\n    onDragStart = noop,\n    mode = INTERACTION_CONFIG.mode,\n    disabled = false,\n  } = options;\n\n  const holding = useRef(false);\n  const disableClick = useRef(false);\n  const userMode = useUserInteractionMode();\n  const isInteractionDisabled = disabled || mode === \"none\";\n  const [state, dispatch] = useReducer(\n    function reducer(\n      state: ElementInteractionState,\n      action: ElementInteractionAction\n    ): ElementInteractionState {\n      switch (action.type) {\n        case \"press\": {\n          const { style } = action;\n          let { ripples } = state;\n          if (style) {\n            ripples = [\n              ...ripples,\n              {\n                style,\n                entered: false,\n                exiting: false,\n                startTime: Date.now(),\n              },\n            ];\n          }\n\n          return {\n            pressed: true,\n            ripples,\n          };\n        }\n        case \"cancel\":\n          // Note: unlike previous react-md versions, this will immediately\n          // remove ALL ripple effects instead of trying to fade out. this seems\n          // much nicer for touch devices when they are trying to scroll\n          return {\n            pressed: false,\n            ripples: [],\n          };\n        case \"release\": {\n          if (mode === \"press\") {\n            return { ...state, pressed: false };\n          }\n\n          return releaseRipple(state);\n        }\n        case \"entered\":\n          return updateRipplesState({\n            type: \"entered\",\n            state,\n            ripple: action.ripple,\n            holding: holding.current,\n          });\n        case \"exited\":\n          return updateRipplesState({\n            type: \"exited\",\n            state,\n            ripple: action.ripple,\n            holding: holding.current,\n          });\n\n        default:\n          return state;\n      }\n    },\n    { pressed: false, ripples: [] }\n  );\n  const { pressed } = state;\n\n  let ripples: ReactElement | undefined;\n  if (mode == \"ripple\") {\n    ripples = (\n      <RippleContainer\n        ripples={state.ripples}\n        onEntered={(ripple) => {\n          dispatch({ type: \"entered\", ripple });\n        }}\n        onExited={(ripple) => {\n          dispatch({ type: \"exited\", ripple });\n        }}\n      />\n    );\n  }\n\n  return {\n    pressed,\n    pressedClassName:\n      pressed && mode === \"press\" ? PRESSED_CLASS_NAME : undefined,\n    ripples,\n    handlers: {\n      onBlur: useCallback(\n        (event: FocusEvent<E>) => {\n          onBlur(event);\n          if (holding.current) {\n            holding.current = false;\n            dispatch({ type: \"release\" });\n          }\n        },\n        [onBlur]\n      ),\n      onClick: useCallback(\n        (event: MouseEvent<E>) => {\n          if (disabled) {\n            return;\n          }\n\n          onClick(event);\n          if (\n            event.isPropagationStopped() ||\n            userMode === \"touch\" ||\n            mode !== \"ripple\" ||\n            disableClick.current ||\n            holding.current ||\n            document.activeElement === event.currentTarget\n          ) {\n            disableClick.current = false;\n            return;\n          }\n\n          dispatch({\n            type: \"press\",\n            style: getRippleStyle(event, true),\n          });\n        },\n        [disabled, mode, onClick, userMode]\n      ),\n      onMouseDown: useCallback(\n        (event: MouseEvent<E>) => {\n          onMouseDown(event);\n          if (\n            event.isPropagationStopped() ||\n            isInteractionDisabled ||\n            userMode !== \"mouse\" ||\n            event.shiftKey ||\n            event.ctrlKey ||\n            event.metaKey ||\n            event.altKey ||\n            event.button !== 0\n          ) {\n            return;\n          }\n\n          // prevent text selection on double click\n          // https://stackoverflow.com/a/43321596\n          if (event.detail > 1) {\n            event.preventDefault();\n          }\n\n          holding.current = true;\n          disableClick.current = true;\n          let style: RippleStyle | undefined;\n          if (mode === \"ripple\") {\n            style = getRippleStyle(event, false);\n          }\n\n          dispatch({ type: \"press\", style });\n        },\n        [onMouseDown, isInteractionDisabled, userMode, mode]\n      ),\n      onMouseUp: useCallback(\n        (event: MouseEvent<E>) => {\n          onMouseUp(event);\n          if (event.isPropagationStopped() || isInteractionDisabled) {\n            return;\n          }\n\n          holding.current = false;\n          dispatch({ type: \"release\" });\n        },\n        [isInteractionDisabled, onMouseUp]\n      ),\n      onMouseLeave: useCallback(\n        (event: MouseEvent<E>) => {\n          onMouseLeave(event);\n          if (\n            event.isPropagationStopped() ||\n            isInteractionDisabled ||\n            userMode !== \"mouse\" ||\n            !holding.current\n          ) {\n            return;\n          }\n\n          holding.current = false;\n          dispatch({ type: \"cancel\" });\n        },\n        [isInteractionDisabled, onMouseLeave, userMode]\n      ),\n      onDragStart(event) {\n        onDragStart(event);\n        if (\n          event.isPropagationStopped() ||\n          !holding.current ||\n          userMode !== \"mouse\"\n        ) {\n          return;\n        }\n\n        holding.current = false;\n        dispatch({ type: \"cancel\" });\n      },\n      onKeyDown: useCallback(\n        (event: KeyboardEvent<E>) => {\n          onKeyDown(event);\n          const { key } = event;\n          const { tagName } = event.currentTarget;\n\n          if (\n            event.isPropagationStopped() ||\n            userMode !== \"keyboard\" ||\n            disabled ||\n            (key !== \" \" && key !== \"Enter\") ||\n            // links do not support clicking on space\n            (key === \" \" && tagName === \"A\") ||\n            // inputs submit a form instead of clicking on enter\n            (key === \"Enter\" && tagName === \"INPUT\")\n          ) {\n            return;\n          }\n\n          // stop propagation since we're starting to do custom event behavior\n          // to click the element for everything except elements that the\n          // browser clicks natively\n          event.stopPropagation();\n\n          if (tagName !== \"BUTTON\" && tagName !== \"A\") {\n            if (key === \" \") {\n              // prevent the pager from scrolling\n              event.preventDefault();\n            }\n\n            event.currentTarget.click();\n          }\n\n          if (holding.current || isInteractionDisabled) {\n            return;\n          }\n\n          holding.current = true;\n          dispatch({ type: \"press\", style: getRippleStyle(event, false) });\n        },\n        [disabled, isInteractionDisabled, onKeyDown, userMode]\n      ),\n      onKeyUp: useCallback(\n        (event: KeyboardEvent<E>) => {\n          onKeyUp(event);\n          if (\n            event.isPropagationStopped() ||\n            isInteractionDisabled ||\n            userMode !== \"keyboard\" ||\n            !holding.current\n          ) {\n            return;\n          }\n\n          holding.current = false;\n          dispatch({ type: \"release\" });\n        },\n        [isInteractionDisabled, onKeyUp, userMode]\n      ),\n      onTouchStart: useCallback(\n        (event: TouchEvent<E>) => {\n          onTouchStart(event);\n          if (event.isPropagationStopped() || isInteractionDisabled) {\n            return;\n          }\n\n          holding.current = true;\n          let style: RippleStyle | undefined;\n          if (mode === \"ripple\") {\n            style = getRippleStyle(event, false);\n          }\n\n          dispatch({ type: \"press\", style });\n        },\n        [mode, isInteractionDisabled, onTouchStart]\n      ),\n      onTouchEnd: useCallback(\n        (event: TouchEvent<E>) => {\n          onTouchEnd(event);\n          if (event.isPropagationStopped() || isInteractionDisabled) {\n            return;\n          }\n\n          holding.current = false;\n          dispatch({ type: \"release\" });\n        },\n        [isInteractionDisabled, onTouchEnd]\n      ),\n      onTouchMove: useCallback(\n        (event: TouchEvent<E>) => {\n          onTouchMove(event);\n          if (event.isPropagationStopped() || isInteractionDisabled) {\n            return;\n          }\n\n          holding.current = false;\n          dispatch({ type: \"cancel\" });\n        },\n        [isInteractionDisabled, onTouchMove]\n      ),\n    },\n  };\n}\n"],"names":["useCallback","useReducer","useRef","RippleContainer","useUserInteractionMode","INTERACTION_CONFIG","getRippleStyle","releaseRipple","updateRipplesState","PRESSED_CLASS_NAME","noop","useElementInteraction","options","onBlur","onClick","onMouseDown","onMouseUp","onMouseLeave","onKeyUp","onKeyDown","onTouchStart","onTouchEnd","onTouchMove","onDragStart","mode","disabled","holding","disableClick","userMode","isInteractionDisabled","state","dispatch","reducer","action","type","style","ripples","entered","exiting","startTime","Date","now","pressed","ripple","current","onEntered","onExited","pressedClassName","undefined","handlers","event","isPropagationStopped","document","activeElement","currentTarget","shiftKey","ctrlKey","metaKey","altKey","button","detail","preventDefault","key","tagName","stopPropagation","click"],"mappings":"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"}
+{"version":3,"sources":["../../src/interaction/useElementInteraction.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  type FocusEvent,\n  type KeyboardEvent,\n  type MouseEvent,\n  type ReactElement,\n  type TouchEvent,\n  useCallback,\n  useReducer,\n  useRef,\n} from \"react\";\n\nimport { RippleContainer } from \"./RippleContainer.js\";\nimport { useUserInteractionMode } from \"./UserInteractionModeProvider.js\";\nimport { INTERACTION_CONFIG } from \"./config.js\";\nimport {\n  type ElementInteractionHandlers,\n  type ElementInteractionMode,\n  type ElementInteractionState,\n  type RippleState,\n  type RippleStyle,\n} from \"./types.js\";\nimport { getRippleStyle, releaseRipple, updateRipplesState } from \"./utils.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-surface-inset\"?: string | number;\n    \"--rmd-surface-border-radius\"?: string | number;\n  }\n}\n\n/** @since 6.0.0 */\nexport const PRESSED_CLASS_NAME = \"rmd-pressed\";\n\n/** @since 6.0.0 */\nexport interface ElementInteractionOptions<E extends HTMLElement>\n  extends Partial<ElementInteractionHandlers<E>> {\n  /**\n   * This can be used to override the {@link INTERACTION_CONFIG.mode}\n   *\n   * @defaultValue `INTERACTION_CONFIG.mode`\n   */\n  mode?: ElementInteractionMode;\n\n  /**\n   * Boolean if the element is currently disabled which will prevent any of the\n   * element interaction states from happening.\n   *\n   * @defaultValue `false`\n   */\n  disabled?: boolean;\n}\n\n/** @since 6.0.0 */\nexport interface ElementInteractionImplementation<E extends HTMLElement> {\n  /**\n   * The event handlers required for element interaction.\n   */\n  handlers: Readonly<ElementInteractionHandlers<E>>;\n\n  /**\n   * Boolean if the element is currently pressed. This will always be `false` if\n   * the {@link ElementInteractionMode} is set to `\"none\"`\n   */\n  pressed: boolean;\n\n  /**\n   * This will be set to {@link PRESSED_CLASS_NAME} only when {@link pressed} is\n   * `true` and the {@link ElementInteractionMode} is set to `\"press\"`. It will\n   * be `undefined` otherwise.\n   */\n  pressedClassName: string | undefined;\n\n  /**\n   * The ripple click/touch interaction. This will be `undefined` when the {@link ElementInteractionMode}\n   * is set to `\"none\"` or `\"press\"`.\n   */\n  ripples?: ReactElement;\n}\n\ntype ElementInteractionAction =\n  | { type: \"press\"; style?: RippleStyle; programmatic?: boolean }\n  | { type: \"release\" | \"cancel\" }\n  | { type: \"entered\" | \"exited\"; ripple: RippleState };\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * This hook is used to apply the required element interaction based on the\n * {@link ElementInteractionMode} and should generally be used internally only.\n *\n * @example Providing Element Interaction\n * ```tsx\n * import { useElementInteraction } from \"@react-md/core/interaction/useElementInteraction\";\n * import { cnb } from \"cnbuilder\";\n * import { type ReactElement } from \"react\";\n *\n * import styles from \"./CustomComponent.module.scss\";\n *\n * interface Props extends HTMLAttributes<HTMLDivElement> {\n *   disabled?: boolean;\n * }\n *\n * function CustomComponent(props: Props): ReactElement {\n *   const {\n *     disabled = false,\n *     className,\n *     onBlur,\n *     onClick,\n *     onKeyDown,\n *     onKeyUp,\n *     onMouseDown,\n *     onMouseUp,\n *     onMouseLeave,\n *     onTouchStart,\n *     onTouchMove,\n *     onTouchEnd,\n *     ...remaining\n *   } = props;\n *\n *   const { handlers, pressed, ripples } = useElementInteraction({\n *     disabled,\n *     // pass remaining props so that if any event handlers were provided to\n *     // the component, they will be merged with the element interaction\n *     // handlers\n *     onBlur,\n *     onClick,\n *     onKeyDown,\n *     onKeyUp,\n *     onMouseDown,\n *     onMouseUp,\n *     onMouseLeave,\n *     onTouchStart,\n *     onTouchMove,\n *     onTouchEnd,\n *   });\n *\n *   return (\n *     <div\n *       {...remaining}\n *       {...handlers}\n *       aria-disabled={disabled}\n *       role=\"button\"\n *       className={cnb(styles.button, pressed && styles.pressed)}\n *       tabIndex={disabled ? undefined : 0}\n *     >\n *       {children}\n *       {ripples}\n *     </div>\n *   );\n * }\n * ```\n *\n * @param options - An object of {@link ElementInteractionOptions} that is used\n * to merge event handlers or disable the interactions.\n * @returns the {@link ElementInteractionImplementation}\n * @since 6.0.0 Touch interactions were removed since it never looked\n * good if the user touched a clickable element right before scrolling. The\n * ripple effect will only be fired on click now for touch devices.\n */\nexport function useElementInteraction<E extends HTMLElement>(\n  options: ElementInteractionOptions<E> = {}\n): ElementInteractionImplementation<E> {\n  const {\n    onBlur = noop,\n    onClick = noop,\n    onMouseDown = noop,\n    onMouseUp = noop,\n    onMouseLeave = noop,\n    onKeyUp = noop,\n    onKeyDown = noop,\n    onTouchStart = noop,\n    onTouchEnd = noop,\n    onTouchMove = noop,\n    onDragStart = noop,\n    mode = INTERACTION_CONFIG.mode,\n    disabled = false,\n  } = options;\n\n  const holding = useRef(false);\n  const disableClick = useRef(false);\n  const userMode = useUserInteractionMode();\n  const isInteractionDisabled = disabled || mode === \"none\";\n  const [state, dispatch] = useReducer(\n    function reducer(\n      state: ElementInteractionState,\n      action: ElementInteractionAction\n    ): ElementInteractionState {\n      switch (action.type) {\n        case \"press\": {\n          const { style } = action;\n          let { ripples } = state;\n          if (style) {\n            ripples = [\n              ...ripples,\n              {\n                style,\n                entered: false,\n                exiting: false,\n                startTime: Date.now(),\n              },\n            ];\n          }\n\n          return {\n            pressed: true,\n            ripples,\n          };\n        }\n        case \"cancel\":\n          // Note: unlike previous react-md versions, this will immediately\n          // remove ALL ripple effects instead of trying to fade out. this seems\n          // much nicer for touch devices when they are trying to scroll\n          return {\n            pressed: false,\n            ripples: [],\n          };\n        case \"release\": {\n          if (mode === \"press\") {\n            return { ...state, pressed: false };\n          }\n\n          return releaseRipple(state);\n        }\n        case \"entered\":\n          return updateRipplesState({\n            type: \"entered\",\n            state,\n            ripple: action.ripple,\n            holding: holding.current,\n          });\n        case \"exited\":\n          return updateRipplesState({\n            type: \"exited\",\n            state,\n            ripple: action.ripple,\n            holding: holding.current,\n          });\n\n        default:\n          return state;\n      }\n    },\n    { pressed: false, ripples: [] }\n  );\n  const { pressed } = state;\n\n  let ripples: ReactElement | undefined;\n  if (mode == \"ripple\") {\n    ripples = (\n      <RippleContainer\n        ripples={state.ripples}\n        onEntered={(ripple) => {\n          dispatch({ type: \"entered\", ripple });\n        }}\n        onExited={(ripple) => {\n          dispatch({ type: \"exited\", ripple });\n        }}\n      />\n    );\n  }\n\n  return {\n    pressed,\n    pressedClassName:\n      pressed && mode === \"press\" ? PRESSED_CLASS_NAME : undefined,\n    ripples,\n    handlers: {\n      onBlur: useCallback(\n        (event: FocusEvent<E>) => {\n          onBlur(event);\n          if (holding.current) {\n            holding.current = false;\n            dispatch({ type: \"release\" });\n          }\n        },\n        [onBlur]\n      ),\n      onClick: useCallback(\n        (event: MouseEvent<E>) => {\n          if (disabled) {\n            return;\n          }\n\n          onClick(event);\n          if (\n            event.isPropagationStopped() ||\n            userMode === \"touch\" ||\n            mode !== \"ripple\" ||\n            disableClick.current ||\n            holding.current ||\n            document.activeElement === event.currentTarget\n          ) {\n            disableClick.current = false;\n            return;\n          }\n\n          dispatch({\n            type: \"press\",\n            style: getRippleStyle(event, true),\n          });\n        },\n        [disabled, mode, onClick, userMode]\n      ),\n      onMouseDown: useCallback(\n        (event: MouseEvent<E>) => {\n          onMouseDown(event);\n          if (\n            event.isPropagationStopped() ||\n            isInteractionDisabled ||\n            userMode !== \"mouse\" ||\n            event.shiftKey ||\n            event.ctrlKey ||\n            event.metaKey ||\n            event.altKey ||\n            event.button !== 0\n          ) {\n            return;\n          }\n\n          // prevent text selection on double click\n          // https://stackoverflow.com/a/43321596\n          if (event.detail > 1) {\n            event.preventDefault();\n          }\n\n          holding.current = true;\n          disableClick.current = true;\n          let style: RippleStyle | undefined;\n          if (mode === \"ripple\") {\n            style = getRippleStyle(event, false);\n          }\n\n          dispatch({ type: \"press\", style });\n        },\n        [onMouseDown, isInteractionDisabled, userMode, mode]\n      ),\n      onMouseUp: useCallback(\n        (event: MouseEvent<E>) => {\n          onMouseUp(event);\n          if (event.isPropagationStopped() || isInteractionDisabled) {\n            return;\n          }\n\n          holding.current = false;\n          dispatch({ type: \"release\" });\n        },\n        [isInteractionDisabled, onMouseUp]\n      ),\n      onMouseLeave: useCallback(\n        (event: MouseEvent<E>) => {\n          onMouseLeave(event);\n          if (\n            event.isPropagationStopped() ||\n            isInteractionDisabled ||\n            userMode !== \"mouse\" ||\n            !holding.current\n          ) {\n            return;\n          }\n\n          holding.current = false;\n          dispatch({ type: \"cancel\" });\n        },\n        [isInteractionDisabled, onMouseLeave, userMode]\n      ),\n      onDragStart(event) {\n        onDragStart(event);\n        if (\n          event.isPropagationStopped() ||\n          !holding.current ||\n          userMode !== \"mouse\"\n        ) {\n          return;\n        }\n\n        holding.current = false;\n        dispatch({ type: \"cancel\" });\n      },\n      onKeyDown: useCallback(\n        (event: KeyboardEvent<E>) => {\n          onKeyDown(event);\n          const { key } = event;\n          const { tagName } = event.currentTarget;\n\n          if (\n            event.isPropagationStopped() ||\n            userMode !== \"keyboard\" ||\n            disabled ||\n            (key !== \" \" && key !== \"Enter\") ||\n            // links do not support clicking on space\n            (key === \" \" && tagName === \"A\") ||\n            // inputs submit a form instead of clicking on enter\n            (key === \"Enter\" && tagName === \"INPUT\")\n          ) {\n            return;\n          }\n\n          // stop propagation since we're starting to do custom event behavior\n          // to click the element for everything except elements that the\n          // browser clicks natively\n          event.stopPropagation();\n\n          if (tagName !== \"BUTTON\" && tagName !== \"A\") {\n            if (key === \" \") {\n              // prevent the pager from scrolling\n              event.preventDefault();\n            }\n\n            event.currentTarget.click();\n          }\n\n          if (holding.current || isInteractionDisabled) {\n            return;\n          }\n\n          holding.current = true;\n          dispatch({ type: \"press\", style: getRippleStyle(event, false) });\n        },\n        [disabled, isInteractionDisabled, onKeyDown, userMode]\n      ),\n      onKeyUp: useCallback(\n        (event: KeyboardEvent<E>) => {\n          onKeyUp(event);\n          if (\n            event.isPropagationStopped() ||\n            isInteractionDisabled ||\n            userMode !== \"keyboard\" ||\n            !holding.current\n          ) {\n            return;\n          }\n\n          holding.current = false;\n          dispatch({ type: \"release\" });\n        },\n        [isInteractionDisabled, onKeyUp, userMode]\n      ),\n      onTouchStart: useCallback(\n        (event: TouchEvent<E>) => {\n          onTouchStart(event);\n          if (event.isPropagationStopped() || isInteractionDisabled) {\n            return;\n          }\n\n          holding.current = true;\n          let style: RippleStyle | undefined;\n          if (mode === \"ripple\") {\n            style = getRippleStyle(event, false);\n          }\n\n          dispatch({ type: \"press\", style });\n        },\n        [mode, isInteractionDisabled, onTouchStart]\n      ),\n      onTouchEnd: useCallback(\n        (event: TouchEvent<E>) => {\n          onTouchEnd(event);\n          if (event.isPropagationStopped() || isInteractionDisabled) {\n            return;\n          }\n\n          holding.current = false;\n          dispatch({ type: \"release\" });\n        },\n        [isInteractionDisabled, onTouchEnd]\n      ),\n      onTouchMove: useCallback(\n        (event: TouchEvent<E>) => {\n          onTouchMove(event);\n          if (event.isPropagationStopped() || isInteractionDisabled) {\n            return;\n          }\n\n          holding.current = false;\n          dispatch({ type: \"cancel\" });\n        },\n        [isInteractionDisabled, onTouchMove]\n      ),\n    },\n  };\n}\n"],"names":["useCallback","useReducer","useRef","RippleContainer","useUserInteractionMode","INTERACTION_CONFIG","getRippleStyle","releaseRipple","updateRipplesState","PRESSED_CLASS_NAME","noop","useElementInteraction","options","onBlur","onClick","onMouseDown","onMouseUp","onMouseLeave","onKeyUp","onKeyDown","onTouchStart","onTouchEnd","onTouchMove","onDragStart","mode","disabled","holding","disableClick","userMode","isInteractionDisabled","state","dispatch","reducer","action","type","style","ripples","entered","exiting","startTime","Date","now","pressed","ripple","current","onEntered","onExited","pressedClassName","undefined","handlers","event","isPropagationStopped","document","activeElement","currentTarget","shiftKey","ctrlKey","metaKey","altKey","button","detail","preventDefault","key","tagName","stopPropagation","click"],"mappings":"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"}

package/dist/interaction/useHigherContrastChildren.d.ts

@@ -12,11 +12,13 @@ import { type ReactNode } from "react";
  *
  * @example Simple Example
  * ```tsx
+ * import { useElementInteraction } from "@react-md/core/interaction/useElementInteraction";
+ * import { useHigherContrastChildren, } from "@react-md/core/interaction/useHigherContrastChildren";
  * import {
- *   useElementInteraction,
- *   useHigherContrastChildren,
- * } from "@react-md/core";
- * import type { ButtonHTMLAttributes, ReactElement, ReactNode } from "react";
+ *   type ButtonHTMLAttributes,
+ *   type ReactElement,
+ *   type ReactNode,
+ * } from "react";
  *
  * function Example(props: ButtonHTMLAttributes<HTMLButtonElement>): ReactElement {
  *   const {
@@ -58,7 +60,7 @@ import { type ReactNode } from "react";
  * }
  * ```
  *
- * @param propChildren - The children to conditionally wrap in spans.
+ * @param children - The children to conditionally wrap in spans.
  * @param disable - Manually disable this functionality even if the higher
  * contrast mode is enabled. This is really used within `ListItem`s so there
  * aren't unneeded `<span>`s for string/number children when there are addons.
@@ -66,4 +68,4 @@ import { type ReactNode } from "react";
  * @since 6.0.0
  * @internal
  */
-export declare function useHigherContrastChildren(propChildren: ReactNode, disable?: boolean): ReactNode;
+export declare function useHigherContrastChildren(children: ReactNode, disable?: boolean): ReactNode;

package/dist/interaction/useHigherContrastChildren.js

@@ -14,11 +14,13 @@ import { INTERACTION_CONFIG } from "./config.js";
  *
  * @example Simple Example
  * ```tsx
+ * import { useElementInteraction } from "@react-md/core/interaction/useElementInteraction";
+ * import { useHigherContrastChildren, } from "@react-md/core/interaction/useHigherContrastChildren";
  * import {
- *   useElementInteraction,
- *   useHigherContrastChildren,
- * } from "@react-md/core";
- * import type { ButtonHTMLAttributes, ReactElement, ReactNode } from "react";
+ *   type ButtonHTMLAttributes,
+ *   type ReactElement,
+ *   type ReactNode,
+ * } from "react";
  *
  * function Example(props: ButtonHTMLAttributes<HTMLButtonElement>): ReactElement {
  *   const {
@@ -60,20 +62,20 @@ import { INTERACTION_CONFIG } from "./config.js";
  * }
  * ```
  *
- * @param propChildren - The children to conditionally wrap in spans.
+ * @param children - The children to conditionally wrap in spans.
  * @param disable - Manually disable this functionality even if the higher
  * contrast mode is enabled. This is really used within `ListItem`s so there
  * aren't unneeded `<span>`s for string/number children when there are addons.
  * @returns the children to render
  * @since 6.0.0
  * @internal
- */ export function useHigherContrastChildren(propChildren, disable = false) {
+ */ export function useHigherContrastChildren(children, disable = false) {
     if (!INTERACTION_CONFIG.higherContrast || disable) {
-        return propChildren;
+        return children;
     }
     // Note: This will fail if the child is wrapped in a Fragment, but that use
     // case doesn't matter to me
-    return Children.map(propChildren, (child)=>{
+    return Children.map(children, (child)=>{
         const t = typeof child;
         if (t === "string" || t === "number") {
             return /*#__PURE__*/ _jsx("span", {