@react-md/core 6.4.0 → 6.5.1

package/dist/button/AsyncButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/button/AsyncButton.tsx"],"sourcesContent":["\"use client\";\n\nimport { cnb } from \"cnbuilder\";\nimport { type MouseEvent, type ReactNode, forwardRef } from \"react\";\n\nimport { type BoxAlignItems } from \"../box/styles.js\";\nimport { overlay } from \"../overlay/styles.js\";\nimport {\n  CircularProgress,\n  type CircularProgressProps,\n} from \"../progress/CircularProgress.js\";\nimport {\n  LinearProgress,\n  type LinearProgressProps,\n} from \"../progress/LinearProgress.js\";\nimport { type ProgressTheme } from \"../progress/types.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { useAsyncFunction } from \"../useAsyncFunction.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { Button, type ButtonProps } from \"./Button.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * @since 6.0.0\n */\nexport type AsyncButtonLoadingType =\n  | \"circular-before\"\n  | \"circular-after\"\n  | \"circular-overlay\"\n  | \"linear-above\"\n  | \"linear-below\";\n\n/**\n * @since 6.0.0\n */\nexport interface AsyncButtonProps extends ButtonProps {\n  /**\n   * @see {@link progressAriaLabelledBy}\n   * @defaultValue `\"async-button\" + useId()`\n   */\n  id?: string;\n\n  /**\n   * When this is defined and returns a `Promise`, the loading indicator will\n   * display until the promise has resolved.\n   *\n   * @defaultValue `() => {}`\n   */\n  onClick?: (event: MouseEvent<HTMLButtonElement>) => Promise<void> | void;\n\n  /**\n   * Set this to `true` to manually display a loading spinner.\n   *\n   * @defaultValue `false`\n   */\n  loading?: boolean;\n\n  /**\n   * - `\"circular-overlay\"` - Covers and hides the button content with a\n   *   centered circular progress\n   * - `\"circular-before\"` - Renders a circular progress bar before the button\n   *   content which is useful when rendering an icon before the button text.\n   *   See {@link beforeAddon} as well.\n   * - `\"circular-after\"` - Renders a circular progress bar before the button\n   *   content which is useful when rendering an icon after the button text.\n   *   See {@link afterAddon} as well.\n   * - `\"linear-above\"` - Renders a linear progress bar at the top of the button\n   *   while still displaying the button contents. Usually looks good for\n   *   outlined buttons.\n   * - `\"linear-below\"` - Renders a linear progress bar at the bottom of the\n   *   button while still displaying the button contents. Usually looks good for\n   *   outlined buttons.\n   *\n   * @defaultValue `\"circular-overlay\"`\n   */\n  loadingType?: AsyncButtonLoadingType;\n\n  /**\n   * Optional content to display instead of the default `children` while\n   * loading.\n   */\n  loadingChildren?: ReactNode;\n\n  /**\n   * Set this to `true` to use the `disabled` theme while loading.\n   *\n   * @defaultValue `false`\n   */\n  loadingDisabledTheme?: boolean;\n\n  /**\n   * This should be used when the {@link loadingType} is set to\n   * `\"circular-before\"`, an icon should appear before the other content in\n   * the button, and the loading indicator should replace the icon.\n   */\n  beforeAddon?: ReactNode;\n\n  /**\n   * This should be used when the {@link loadingType} is set to\n   * `\"circular-after\"`, an icon should appear before the other content in\n   * the button, and the loading indicator should replace the icon.\n   */\n  afterAddon?: ReactNode;\n\n  /**\n   * An optional label to provide to the progressbar.\n   *\n   * @see {@link progressAriaLabelledBy}\n   */\n  progressAriaLabel?: string;\n\n  /**\n   * @see {@link id}\n   * @defaultValue `id`\n   */\n  progressAriaLabelledBy?: string;\n\n  /**\n   * Any additional props to pass to the `CircularProgress` bar when the\n   * {@link loadingType} is one of the circular types.\n   */\n  linearProgressProps?: PropsWithRef<LinearProgressProps>;\n\n  /**\n   * Any additional props to pass to the `LinearProgress` bar when the\n   * {@link loadingType} is one of the linear types.\n   */\n  circularProgressProps?: PropsWithRef<CircularProgressProps>;\n}\n\n/**\n * **Client Component**\n *\n * The async button can be used to render a loading indicator within a button\n * during an async task. The loading spinner can be shown either by enabling the\n * `loading` prop or returning a promise from the `onClick` event which will\n * continue to show the loading indicator until the promise has been resolved.\n *\n * @example Async onClick\n * ```tsx\n * import { AsyncButton } from \"@react-md/core/button/AsyncButton\";\n * import { useState, type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const [data, setData] = useState(null);\n *   return (\n *     <AsyncButton\n *       type=\"submit\"\n *       onClick={async () => {\n *         const response = await fetch(\"/my-api\");\n *         const json = await response.json();\n *         setData(json);\n *       }}\n *     >\n *       Submit\n *     </AsyncButton>\n *   );\n * }\n * ```\n *\n * @example Manual Loading State\n * ```tsx\n * import { AsyncButton } from \"@react-md/core/button/AsyncButton\";\n * import { useMutation } from \"@tanstack/query\";\n * import { useState, type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const { isLoading, mutate } = useMutation({\n *     mutationFn: (newTodo) => fetch('/todos', {\n *       method: \"POST\",\n *       body: JSON.stringify(newTodo),\n *     }),\n *   });\n *\n *   return (\n *     <AsyncButton\n *       type=\"submit\"\n *       loading={isLoading}\n *       onClick={() => {\n *         mutate({ id: Date.now(), title: \"Create example\" });\n *       }}\n *     >\n *       Create Todo\n *     </AsyncButton>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/button#async-button | AsyncButton Demos}\n * @since 6.0.0\n */\nexport const AsyncButton = forwardRef<HTMLButtonElement, AsyncButtonProps>(\n  function AsyncButton(props, ref) {\n    const {\n      id: propId,\n      onClick = noop,\n      children,\n      floating = null,\n      theme = floating ? \"secondary\" : \"clear\",\n      themeType = floating ? \"contained\" : \"flat\",\n      buttonType = floating ? \"icon\" : \"text\",\n      className,\n      disabled,\n      loading: propLoading = false,\n      loadingType = \"circular-overlay\",\n      loadingChildren,\n      loadingDisabledTheme = false,\n      afterAddon: propAfterAddon,\n      beforeAddon: propBeforeAddon,\n      linearProgressProps,\n      circularProgressProps,\n      progressAriaLabel,\n      progressAriaLabelledBy: propProgressAriaLabelledBy,\n      ...remaining\n    } = props;\n    const id = useEnsuredId(propId, \"async-button\");\n    const { handleAsync, pending } = useAsyncFunction({ disabled });\n    const loading = pending || propLoading;\n\n    let progressTheme: ProgressTheme = \"current-color\";\n    if (theme === \"clear\" || theme === \"disabled\") {\n      progressTheme = \"primary\";\n    }\n\n    let progressAriaLabelledBy = propProgressAriaLabelledBy;\n    if (\n      !progressAriaLabel &&\n      !linearProgressProps?.[\"aria-label\"] &&\n      !linearProgressProps?.[\"aria-labelledby\"] &&\n      !circularProgressProps?.[\"aria-label\"] &&\n      !circularProgressProps?.[\"aria-labelledby\"]\n    ) {\n      progressAriaLabelledBy = id;\n    }\n\n    const progress = loadingType.includes(\"linear\") ? (\n      <LinearProgress\n        aria-label={progressAriaLabel}\n        aria-labelledby={progressAriaLabelledBy as string}\n        {...linearProgressProps}\n        theme={progressTheme}\n      />\n    ) : (\n      <CircularProgress\n        aria-label={progressAriaLabel}\n        aria-labelledby={progressAriaLabelledBy as string}\n        {...circularProgressProps}\n        theme={progressTheme}\n      />\n    );\n\n    let afterAddon = propAfterAddon;\n    let beforeAddon = propBeforeAddon;\n    let overlayElement: ReactNode;\n    let isOverlayCover = false;\n    switch (loadingType) {\n      case \"circular-before\":\n        beforeAddon = loading ? progress : propBeforeAddon;\n        break;\n      case \"circular-after\":\n        afterAddon = loading ? progress : propAfterAddon;\n        break;\n      case \"circular-overlay\":\n      case \"linear-above\":\n      case \"linear-below\": {\n        let alignItems: BoxAlignItems = \"center\";\n        if (loadingType === \"linear-above\") {\n          alignItems = \"start\";\n        } else if (loadingType === \"linear-below\") {\n          alignItems = \"end\";\n        } else {\n          isOverlayCover = true;\n        }\n\n        overlayElement = loading && (\n          <span\n            className={overlay({\n              active: true,\n              visible: true,\n              absolute: true,\n              align: alignItems,\n            })}\n          >\n            {progress}\n          </span>\n        );\n        break;\n      }\n    }\n\n    return (\n      <Button\n        {...remaining}\n        aria-disabled={loading || undefined}\n        id={id}\n        ref={ref}\n        disabled={disabled}\n        floating={floating}\n        className={cnb(\n          \"rmd-button--async\",\n          loading && isOverlayCover && \"rmd-button--async-overlay\",\n          className\n        )}\n        theme={loading && loadingDisabledTheme ? \"disabled\" : theme}\n        themeType={themeType}\n        buttonType={buttonType}\n        onClick={handleAsync((event) => Promise.resolve(onClick(event)))}\n      >\n        {beforeAddon}\n        {loading && typeof loadingChildren !== \"undefined\"\n          ? loadingChildren\n          : children}\n        {afterAddon}\n        {overlayElement}\n      </Button>\n    );\n  }\n);\n"],"names":["cnb","forwardRef","overlay","CircularProgress","LinearProgress","useAsyncFunction","useEnsuredId","Button","noop","AsyncButton","props","ref","id","propId","onClick","children","floating","theme","themeType","buttonType","className","disabled","loading","propLoading","loadingType","loadingChildren","loadingDisabledTheme","afterAddon","propAfterAddon","beforeAddon","propBeforeAddon","linearProgressProps","circularProgressProps","progressAriaLabel","progressAriaLabelledBy","propProgressAriaLabelledBy","remaining","handleAsync","pending","progressTheme","progress","includes","aria-label","aria-labelledby","overlayElement","isOverlayCover","alignItems","span","active","visible","absolute","align","aria-disabled","undefined","event","Promise","resolve"],"mappings":"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"}
+{"version":3,"sources":["../../src/button/AsyncButton.tsx"],"sourcesContent":["\"use client\";\n\nimport { cnb } from \"cnbuilder\";\nimport { type MouseEvent, type ReactNode, forwardRef } from \"react\";\n\nimport { type BoxAlignItems } from \"../box/styles.js\";\nimport { overlay } from \"../overlay/styles.js\";\nimport {\n  CircularProgress,\n  type CircularProgressProps,\n} from \"../progress/CircularProgress.js\";\nimport {\n  LinearProgress,\n  type LinearProgressProps,\n} from \"../progress/LinearProgress.js\";\nimport { type ProgressTheme } from \"../progress/types.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { useAsyncFunction } from \"../useAsyncFunction.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { Button, type ButtonProps } from \"./Button.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * @since 6.0.0\n */\nexport type AsyncButtonLoadingType =\n  | \"circular-before\"\n  | \"circular-after\"\n  | \"circular-overlay\"\n  | \"linear-above\"\n  | \"linear-below\";\n\n/**\n * @since 6.0.0\n */\nexport interface AsyncButtonProps extends ButtonProps {\n  /**\n   * @see {@link progressAriaLabelledBy}\n   * @defaultValue `\"async-button\" + useId()`\n   */\n  id?: string;\n\n  /**\n   * When this is defined and returns a `Promise`, the loading indicator will\n   * display until the promise has resolved.\n   *\n   * @defaultValue `() => {}`\n   */\n  onClick?: (event: MouseEvent<HTMLButtonElement>) => Promise<void> | void;\n\n  /**\n   * Set this to `true` to manually display a loading spinner.\n   *\n   * @defaultValue `false`\n   */\n  loading?: boolean;\n\n  /**\n   * - `\"circular-overlay\"` - Covers and hides the button content with a\n   *   centered circular progress\n   * - `\"circular-before\"` - Renders a circular progress bar before the button\n   *   content which is useful when rendering an icon before the button text.\n   *   See {@link beforeAddon} as well.\n   * - `\"circular-after\"` - Renders a circular progress bar before the button\n   *   content which is useful when rendering an icon after the button text.\n   *   See {@link afterAddon} as well.\n   * - `\"linear-above\"` - Renders a linear progress bar at the top of the button\n   *   while still displaying the button contents. Usually looks good for\n   *   outlined buttons.\n   * - `\"linear-below\"` - Renders a linear progress bar at the bottom of the\n   *   button while still displaying the button contents. Usually looks good for\n   *   outlined buttons.\n   *\n   * @defaultValue `\"circular-overlay\"`\n   */\n  loadingType?: AsyncButtonLoadingType;\n\n  /**\n   * Optional content to display instead of the default `children` while\n   * loading.\n   */\n  loadingChildren?: ReactNode;\n\n  /**\n   * Set this to `true` to use the `disabled` theme while loading.\n   *\n   * @defaultValue `false`\n   */\n  loadingDisabledTheme?: boolean;\n\n  /**\n   * This should be used when the {@link loadingType} is set to\n   * `\"circular-before\"`, an icon should appear before the other content in\n   * the button, and the loading indicator should replace the icon.\n   */\n  beforeAddon?: ReactNode;\n\n  /**\n   * This should be used when the {@link loadingType} is set to\n   * `\"circular-after\"`, an icon should appear before the other content in\n   * the button, and the loading indicator should replace the icon.\n   */\n  afterAddon?: ReactNode;\n\n  /**\n   * An optional label to provide to the progressbar.\n   *\n   * @see {@link progressAriaLabelledBy}\n   */\n  progressAriaLabel?: string;\n\n  /**\n   * @see {@link id}\n   * @defaultValue `id`\n   */\n  progressAriaLabelledBy?: string;\n\n  /**\n   * Any additional props to pass to the `CircularProgress` bar when the\n   * {@link loadingType} is one of the circular types.\n   */\n  linearProgressProps?: PropsWithRef<LinearProgressProps>;\n\n  /**\n   * Any additional props to pass to the `LinearProgress` bar when the\n   * {@link loadingType} is one of the linear types.\n   */\n  circularProgressProps?: PropsWithRef<CircularProgressProps>;\n}\n\n/**\n * **Client Component**\n *\n * The async button can be used to render a loading indicator within a button\n * during an async task. The loading spinner can be shown either by enabling the\n * `loading` prop or returning a promise from the `onClick` event which will\n * continue to show the loading indicator until the promise has been resolved.\n *\n * @example Async onClick\n * ```tsx\n * import { AsyncButton } from \"@react-md/core/button/AsyncButton\";\n * import { useState, type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const [data, setData] = useState(null);\n *   return (\n *     <AsyncButton\n *       type=\"submit\"\n *       onClick={async () => {\n *         const response = await fetch(\"/my-api\");\n *         const json = await response.json();\n *         setData(json);\n *       }}\n *     >\n *       Submit\n *     </AsyncButton>\n *   );\n * }\n * ```\n *\n * @example Manual Loading State\n * ```tsx\n * import { AsyncButton } from \"@react-md/core/button/AsyncButton\";\n * import { useMutation } from \"@tanstack/query\";\n * import { useState, type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const { isLoading, mutate } = useMutation({\n *     mutationFn: (newTodo) => fetch('/todos', {\n *       method: \"POST\",\n *       body: JSON.stringify(newTodo),\n *     }),\n *   });\n *\n *   return (\n *     <AsyncButton\n *       type=\"submit\"\n *       loading={isLoading}\n *       onClick={() => {\n *         mutate({ id: Date.now(), title: \"Create example\" });\n *       }}\n *     >\n *       Create Todo\n *     </AsyncButton>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/button#async-button | AsyncButton Demos}\n * @since 6.0.0\n */\nexport const AsyncButton = forwardRef<HTMLButtonElement, AsyncButtonProps>(\n  function AsyncButton(props, ref) {\n    const {\n      id: propId,\n      onClick = noop,\n      children,\n      floating = null,\n      theme = floating ? \"secondary\" : \"clear\",\n      themeType = floating ? \"contained\" : \"flat\",\n      buttonType = floating ? \"icon\" : \"text\",\n      className,\n      disabled,\n      loading: propLoading = false,\n      loadingType = \"circular-overlay\",\n      loadingChildren,\n      loadingDisabledTheme = false,\n      afterAddon: propAfterAddon,\n      beforeAddon: propBeforeAddon,\n      linearProgressProps,\n      circularProgressProps,\n      progressAriaLabel,\n      progressAriaLabelledBy: propProgressAriaLabelledBy,\n      ...remaining\n    } = props;\n    const id = useEnsuredId(propId, \"async-button\");\n    const { handleAsync, pending } = useAsyncFunction({ disabled });\n    const loading = pending || propLoading;\n\n    let progressTheme: ProgressTheme = \"current-color\";\n    if (theme === \"clear\" || theme === \"disabled\") {\n      progressTheme = \"primary\";\n    }\n\n    let progressAriaLabelledBy = propProgressAriaLabelledBy;\n    if (\n      !progressAriaLabel &&\n      !linearProgressProps?.[\"aria-label\"] &&\n      !linearProgressProps?.[\"aria-labelledby\"] &&\n      !circularProgressProps?.[\"aria-label\"] &&\n      !circularProgressProps?.[\"aria-labelledby\"]\n    ) {\n      progressAriaLabelledBy = id;\n    }\n\n    const progress = loadingType.includes(\"linear\") ? (\n      <LinearProgress\n        aria-label={progressAriaLabel}\n        aria-labelledby={progressAriaLabelledBy as string}\n        {...linearProgressProps}\n        theme={progressTheme}\n      />\n    ) : (\n      <CircularProgress\n        aria-label={progressAriaLabel}\n        aria-labelledby={progressAriaLabelledBy as string}\n        {...circularProgressProps}\n        theme={progressTheme}\n      />\n    );\n\n    let afterAddon = propAfterAddon;\n    let beforeAddon = propBeforeAddon;\n    let overlayElement: ReactNode;\n    let isOverlayCover = false;\n    switch (loadingType) {\n      case \"circular-before\":\n        beforeAddon = loading ? progress : propBeforeAddon;\n        break;\n      case \"circular-after\":\n        afterAddon = loading ? progress : propAfterAddon;\n        break;\n      case \"circular-overlay\":\n      case \"linear-above\":\n      case \"linear-below\": {\n        let alignItems: BoxAlignItems = \"center\";\n        if (loadingType === \"linear-above\") {\n          alignItems = \"start\";\n        } else if (loadingType === \"linear-below\") {\n          alignItems = \"end\";\n        } else {\n          isOverlayCover = true;\n        }\n\n        overlayElement = loading && (\n          <span\n            className={overlay({\n              active: true,\n              visible: true,\n              absolute: true,\n              align: alignItems,\n            })}\n          >\n            {progress}\n          </span>\n        );\n        break;\n      }\n    }\n\n    return (\n      <Button\n        {...remaining}\n        aria-disabled={loading || undefined}\n        id={id}\n        ref={ref}\n        disabled={disabled}\n        floating={floating}\n        className={cnb(\n          \"rmd-button--async\",\n          loading && isOverlayCover && \"rmd-button--async-overlay\",\n          className\n        )}\n        theme={loading && loadingDisabledTheme ? \"disabled\" : theme}\n        themeType={themeType}\n        buttonType={buttonType}\n        onClick={handleAsync((event) => Promise.resolve(onClick(event)))}\n      >\n        {beforeAddon}\n        {loading && loadingChildren !== undefined ? loadingChildren : children}\n        {afterAddon}\n        {overlayElement}\n      </Button>\n    );\n  }\n);\n"],"names":["cnb","forwardRef","overlay","CircularProgress","LinearProgress","useAsyncFunction","useEnsuredId","Button","noop","AsyncButton","props","ref","id","propId","onClick","children","floating","theme","themeType","buttonType","className","disabled","loading","propLoading","loadingType","loadingChildren","loadingDisabledTheme","afterAddon","propAfterAddon","beforeAddon","propBeforeAddon","linearProgressProps","circularProgressProps","progressAriaLabel","progressAriaLabelledBy","propProgressAriaLabelledBy","remaining","handleAsync","pending","progressTheme","progress","includes","aria-label","aria-labelledby","overlayElement","isOverlayCover","alignItems","span","active","visible","absolute","align","aria-disabled","undefined","event","Promise","resolve"],"mappings":"AAAA;;AAEA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAA0CC,UAAU,QAAQ,QAAQ;AAGpE,SAASC,OAAO,QAAQ,uBAAuB;AAC/C,SACEC,gBAAgB,QAEX,kCAAkC;AACzC,SACEC,cAAc,QAET,gCAAgC;AAGvC,SAASC,gBAAgB,QAAQ,yBAAyB;AAC1D,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,MAAM,QAA0B,cAAc;AAEvD,MAAMC,OAAO;AACX,aAAa;AACf;AA8GA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4DC,GACD,OAAO,MAAMC,4BAAcR,WACzB,SAASQ,YAAYC,KAAK,EAAEC,GAAG;IAC7B,MAAM,EACJC,IAAIC,MAAM,EACVC,UAAUN,IAAI,EACdO,QAAQ,EACRC,WAAW,IAAI,EACfC,QAAQD,WAAW,cAAc,OAAO,EACxCE,YAAYF,WAAW,cAAc,MAAM,EAC3CG,aAAaH,WAAW,SAAS,MAAM,EACvCI,SAAS,EACTC,QAAQ,EACRC,SAASC,cAAc,KAAK,EAC5BC,cAAc,kBAAkB,EAChCC,eAAe,EACfC,uBAAuB,KAAK,EAC5BC,YAAYC,cAAc,EAC1BC,aAAaC,eAAe,EAC5BC,mBAAmB,EACnBC,qBAAqB,EACrBC,iBAAiB,EACjBC,wBAAwBC,0BAA0B,EAClD,GAAGC,WACJ,GAAG1B;IACJ,MAAME,KAAKN,aAAaO,QAAQ;IAChC,MAAM,EAAEwB,WAAW,EAAEC,OAAO,EAAE,GAAGjC,iBAAiB;QAAEgB;IAAS;IAC7D,MAAMC,UAAUgB,WAAWf;IAE3B,IAAIgB,gBAA+B;IACnC,IAAItB,UAAU,WAAWA,UAAU,YAAY;QAC7CsB,gBAAgB;IAClB;IAEA,IAAIL,yBAAyBC;IAC7B,IACE,CAACF,qBACD,CAACF,qBAAqB,CAAC,aAAa,IACpC,CAACA,qBAAqB,CAAC,kBAAkB,IACzC,CAACC,uBAAuB,CAAC,aAAa,IACtC,CAACA,uBAAuB,CAAC,kBAAkB,EAC3C;QACAE,yBAAyBtB;IAC3B;IAEA,MAAM4B,WAAWhB,YAAYiB,QAAQ,CAAC,0BACpC,KAACrC;QACCsC,cAAYT;QACZU,mBAAiBT;QAChB,GAAGH,mBAAmB;QACvBd,OAAOsB;uBAGT,KAACpC;QACCuC,cAAYT;QACZU,mBAAiBT;QAChB,GAAGF,qBAAqB;QACzBf,OAAOsB;;IAIX,IAAIZ,aAAaC;IACjB,IAAIC,cAAcC;IAClB,IAAIc;IACJ,IAAIC,iBAAiB;IACrB,OAAQrB;QACN,KAAK;YACHK,cAAcP,UAAUkB,WAAWV;YACnC;QACF,KAAK;YACHH,aAAaL,UAAUkB,WAAWZ;YAClC;QACF,KAAK;QACL,KAAK;QACL,KAAK;YAAgB;gBACnB,IAAIkB,aAA4B;gBAChC,IAAItB,gBAAgB,gBAAgB;oBAClCsB,aAAa;gBACf,OAAO,IAAItB,gBAAgB,gBAAgB;oBACzCsB,aAAa;gBACf,OAAO;oBACLD,iBAAiB;gBACnB;gBAEAD,iBAAiBtB,yBACf,KAACyB;oBACC3B,WAAWlB,QAAQ;wBACjB8C,QAAQ;wBACRC,SAAS;wBACTC,UAAU;wBACVC,OAAOL;oBACT;8BAECN;;gBAGL;YACF;IACF;IAEA,qBACE,MAACjC;QACE,GAAG6B,SAAS;QACbgB,iBAAe9B,WAAW+B;QAC1BzC,IAAIA;QACJD,KAAKA;QACLU,UAAUA;QACVL,UAAUA;QACVI,WAAWpB,IACT,qBACAsB,WAAWuB,kBAAkB,6BAC7BzB;QAEFH,OAAOK,WAAWI,uBAAuB,aAAaT;QACtDC,WAAWA;QACXC,YAAYA;QACZL,SAASuB,YAAY,CAACiB,QAAUC,QAAQC,OAAO,CAAC1C,QAAQwC;;YAEvDzB;YACAP,WAAWG,oBAAoB4B,YAAY5B,kBAAkBV;YAC7DY;YACAiB;;;AAGP,GACA"}

package/dist/button/_button.scss

@@ -408,6 +408,14 @@ $variables: (
         }
 
         @if not $disable-contained {
+          $contained-elevation-end: null;
+          @if not
+            $disable-contained-pressed-elevation and
+            $contained-pressed-elevation
+          {
+            $contained-elevation-end: $contained-pressed-elevation;
+          }
+
           &--contained {
             // contained buttons should _normally_ always force dark background
             // colors for the interaction states This means use the default light
@@ -424,11 +432,7 @@ $variables: (
 
             @include box-shadows.elevation-transition(
               $contained-elevation,
-              if(
-                $disable-contained-pressed-elevation,
-                null,
-                $contained-pressed-elevation
-              ),
+              $contained-elevation-end,
               "&.rmd-button--pressed",
               $pseudo-before: false,
               $position-relative: false

package/dist/card/_card.scss

@@ -59,10 +59,10 @@ $light-theme-background-color: theme.theme-get-var(surface-color) !default;
 
 /// The background color to use when using the global dark theme
 /// @type Color
+// prettier-ignore
 $dark-theme-background-color: if(
-  theme.$disable-dark-elevation,
-  theme.$dark-theme-surface-color,
-  map.get(theme.$dark-elevation-colors, $elevation)
+  sass(theme.$disable-dark-elevation): theme.$dark-theme-surface-color;
+  else: map.get(theme.$dark-elevation-colors, $elevation)
 ) !default;
 
 /// The default card background color
@@ -226,10 +226,10 @@ $variables: (background-color, color);
           column-gap: $header-spacing;
           display: flex;
           max-width: 100%;
+          // prettier-ignore
           padding: if(
-            $header-padding == $header-padding-top or not $header-padding-top,
-            $header-padding,
-            $header-padding-top $header-padding $header-padding
+            sass($header-padding == $header-padding-top or not $header-padding-top): $header-padding;
+            else: $header-padding-top $header-padding $header-padding
           );
         }
 

package/dist/chip/Chip.js

@@ -78,7 +78,7 @@ import { chip, chipContent } from "./styles.js";
     let leftAddon = propLeftAddon;
     let rightAddon = propRightAddon;
     const selectedIconNode = getIcon("selected", propSelectedIcon);
-    const isTransitionable = !selectedThemed && typeof selected === "boolean" && typeof (selectedIconAfter ? propRightAddon : propLeftAddon) === "undefined";
+    const isTransitionable = !selectedThemed && typeof selected === "boolean" && (selectedIconAfter ? propRightAddon : propLeftAddon) === undefined;
     const selectedIcon = useMaxWidthTransition({
         element: selectedIconNode,
         transitionIn: !!selected,

package/dist/chip/Chip.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/chip/Chip.tsx"],"sourcesContent":["\"use client\";\n\nimport { cnb } from \"cnbuilder\";\nimport {\n  type ButtonHTMLAttributes,\n  type CSSProperties,\n  type HTMLAttributes,\n  type ReactNode,\n  forwardRef,\n} from \"react\";\n\nimport { type BackgroundColor } from \"../cssUtils.js\";\nimport { getIcon } from \"../icon/config.js\";\nimport { type ComponentWithRippleProps } from \"../interaction/types.js\";\nimport { useElementInteraction } from \"../interaction/useElementInteraction.js\";\nimport { useHigherContrastChildren } from \"../interaction/useHigherContrastChildren.js\";\nimport {\n  type BaseMaxWidthTransitionOptions,\n  useMaxWidthTransition,\n} from \"../transition/useMaxWidthTransition.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { type ChipTheme, chip, chipContent } from \"./styles.js\";\n\n/**\n * @since 6.0.0 Renamed the `noninteractive` prop to\n * `noninteractable`.\n * @since 6.3.1 Extends BaseMaxWidthTransitionOptions for CSSProperties module\n * augmentation.\n */\nexport interface ChipProps\n  extends\n    ButtonHTMLAttributes<HTMLButtonElement>,\n    BaseMaxWidthTransitionOptions,\n    ComponentWithRippleProps {\n  /**\n   * @defaultValue `\"solid\"`\n   */\n  theme?: ChipTheme;\n\n  /**\n   * Set this to `true` if the chip should gain additional box shadow while the\n   * user is pressing down on the chip.\n   *\n   * @defaultValue `false`\n   */\n  raisable?: boolean;\n\n  /**\n   * @defaultValue `false`\n   */\n  disabled?: boolean;\n\n  /**\n   * When this is a boolean, a selected icon will be displayed before the\n   * `children` and appear/disappear when `true`/`false`.\n   *\n   * @see {@link selectedIcon}\n   * @see {@link selectedIconAfter}\n   * @see {@link selectedThemed}\n   */\n  selected?: boolean;\n\n  /**\n   * Set this to `true` if the chip should change background color while\n   * {@link selected} instead of displaying an icon. The default background\n   * color is a lighter swatch of the theme primary color.\n   *\n   * @defaultValue `false`\n   */\n  selectedThemed?: boolean;\n\n  /**\n   * An optional className to provide only while {@link selected} is `true`.\n   */\n  selectedClassName?: string;\n\n  /**\n   * This will be ignored if {@link selected} is `undefined`.\n   *\n   * @defaultValue `getIcon(\"selected\")`\n   */\n  selectedIcon?: ReactNode;\n\n  /**\n   * Set this to `true` if the {@link selectedIcon} should display as the\n   * {@link rightAddon} instead of the {@link leftAddon}.\n   *\n   * @defaultValue `false`\n   * @since 6.0.0\n   */\n  selectedIconAfter?: boolean;\n\n  /**\n   * Set this to `true` if the {@link selectedIcon} should not animate and\n   * instead apply `display: none`\n   *\n   * @defaultValue `false`\n   */\n  disableIconTransition?: boolean;\n\n  /**\n   * Set this to `true` to render the chip as a `<span>` instead of a button.\n   *\n   * @since 2.6.0\n   * @since 6.0.0 Renamed from `noninteractable`\n   * @defaultValue `false`\n   */\n  noninteractive?: boolean;\n\n  /**\n   * An optional background color theme to use.\n   *\n   * @since 6.0.0\n   */\n  backgroundColor?: BackgroundColor;\n\n  /**\n   * An optional icon, avatar, circular progress, or custom component to render\n   * before the `children`. This will remove some of the leading horizontal\n   * padding on the chip as well.\n   */\n  leftAddon?: ReactNode;\n\n  /**\n   * An optional icon, avatar, circular progress, or custom component to render\n   * after the `children`. This will remove some of the trailing horizontal\n   * padding on the chip as well.\n   */\n  rightAddon?: ReactNode;\n\n  /**\n   * Set this to true if the `children` should not be wrapped in a span to apply\n   * the {@link chipContent} styles which allow for shrinking text and\n   * truncating text with ellipsis.\n   *\n   * @defaultValue `false`\n   */\n  disableContentWrap?: boolean;\n\n  /**\n   * This will be ignored if {@link disableContentWrap} is `true`.\n   *\n   * @since 6.0.0\n   */\n  contentProps?: PropsWithRef<HTMLAttributes<HTMLSpanElement>>;\n\n  /**\n   * This will be ignored if {@link disableContentWrap} is `true`.\n   */\n  contentStyle?: CSSProperties;\n\n  /**\n   * This will be ignored if {@link disableContentWrap} is `true`.\n   */\n  contentClassName?: string;\n}\n\n/**\n * @example Simple Example\n * ```tsx\n * import { Chip } from \"@react-md/core/chip/Chip\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return <Chip>Content</Chip>;\n * }\n * ```\n *\n * @example Outlined Example\n * ```tsx\n * import { Chip } from \"@react-md/core/chip/Chip\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return <Chip theme=\"outline\">Content</Chip>;\n * }\n * ```\n *\n * @example Addons Example\n * ```tsx\n * import { Avatar } from \"@react-md/core/avatar/Avatar\";\n * import { Chip } from \"@react-md/core/chip/Chip\";\n * import AddCircleIcon from \"@react-md/material-icons/AddCircleIcon\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <Chip\n *       leftAddon={\n *         <Avatar>\n *           <img src=\"https://i.pravatar.cc/40?img=3\" alt=\"\" />\n *         </Avatar>\n *       }\n *       rightAddon={<AddCircleIcon />}\n *     >\n *       Chip\n *     </Chip>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/chip | Chip Demos}\n * @since 6.0.0 Renamed the `noninteractable` prop to\n * `noninteractive`.\n */\nexport const Chip = forwardRef<HTMLButtonElement, ChipProps>(\n  function Chip(props, ref) {\n    const {\n      \"aria-pressed\": ariaPressed,\n      theme = \"solid\",\n      className,\n      raisable = false,\n      disabled = false,\n      selected,\n      selectedThemed = false,\n      selectedClassName,\n      selectedIcon: propSelectedIcon,\n      selectedIconAfter = false,\n      backgroundColor,\n      noninteractive = false,\n      disableRipple,\n      disableIconTransition = false,\n      children: propChildren,\n      onClick,\n      onKeyDown,\n      onKeyUp,\n      onMouseDown,\n      onMouseUp,\n      onMouseLeave,\n      onDragStart,\n      onTouchStart,\n      onTouchEnd,\n      onTouchMove,\n      leftAddon: propLeftAddon,\n      rightAddon: propRightAddon,\n      contentProps,\n      contentStyle,\n      contentClassName,\n      disableContentWrap = false,\n      ...remaining\n    } = props;\n\n    let buttonProps: ButtonHTMLAttributes<HTMLButtonElement> | undefined;\n    if (!noninteractive) {\n      buttonProps = {\n        \"aria-pressed\": ariaPressed ?? (!!selected || undefined),\n        type: \"button\",\n        disabled,\n      };\n    }\n\n    let content = propChildren;\n    if (!disableContentWrap) {\n      content = (\n        <span\n          style={contentStyle}\n          {...contentProps}\n          className={cnb(\n            chipContent({ className: contentClassName }),\n            contentProps?.className\n          )}\n        >\n          {propChildren}\n        </span>\n      );\n    }\n\n    let leftAddon = propLeftAddon;\n    let rightAddon = propRightAddon;\n    const selectedIconNode = getIcon(\"selected\", propSelectedIcon);\n    const isTransitionable =\n      !selectedThemed &&\n      typeof selected === \"boolean\" &&\n      typeof (selectedIconAfter ? propRightAddon : propLeftAddon) ===\n        \"undefined\";\n    const selectedIcon = useMaxWidthTransition({\n      element: selectedIconNode,\n      transitionIn: !!selected,\n      disabled: !isTransitionable,\n      disableTransition: disableIconTransition,\n    });\n    if (isTransitionable) {\n      if (selectedIconAfter) {\n        rightAddon = selectedIcon;\n      } else {\n        leftAddon = selectedIcon;\n      }\n    }\n\n    const { pressed, pressedClassName, ripples, handlers } =\n      useElementInteraction({\n        mode: disableRipple ? \"none\" : undefined,\n        onClick,\n        onKeyDown,\n        onKeyUp,\n        onMouseDown,\n        onMouseUp,\n        onMouseLeave,\n        onDragStart,\n        onTouchStart,\n        onTouchEnd,\n        onTouchMove,\n        disabled: disabled || noninteractive,\n      });\n    const children = useHigherContrastChildren(content);\n    const Component = noninteractive ? \"span\" : \"button\";\n\n    return (\n      <Component\n        {...remaining}\n        {...buttonProps}\n        {...handlers}\n        className={chip({\n          className,\n          theme,\n          pressed: raisable && pressed,\n          disabled,\n          selected,\n          selectedThemed,\n          selectedClassName,\n          noninteractive,\n          backgroundColor,\n          pressedClassName,\n          leftAddon: !!leftAddon && (selectedIconAfter || selected !== false),\n          rightAddon:\n            !!rightAddon && (!selectedIconAfter || selected !== false),\n        })}\n        ref={ref}\n      >\n        {leftAddon}\n        {children}\n        {rightAddon}\n        {ripples}\n      </Component>\n    );\n  }\n);\n"],"names":["cnb","forwardRef","getIcon","useElementInteraction","useHigherContrastChildren","useMaxWidthTransition","chip","chipContent","Chip","props","ref","ariaPressed","theme","className","raisable","disabled","selected","selectedThemed","selectedClassName","selectedIcon","propSelectedIcon","selectedIconAfter","backgroundColor","noninteractive","disableRipple","disableIconTransition","children","propChildren","onClick","onKeyDown","onKeyUp","onMouseDown","onMouseUp","onMouseLeave","onDragStart","onTouchStart","onTouchEnd","onTouchMove","leftAddon","propLeftAddon","rightAddon","propRightAddon","contentProps","contentStyle","contentClassName","disableContentWrap","remaining","buttonProps","undefined","type","content","span","style","selectedIconNode","isTransitionable","element","transitionIn","disableTransition","pressed","pressedClassName","ripples","handlers","mode","Component"],"mappings":"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"}
+{"version":3,"sources":["../../src/chip/Chip.tsx"],"sourcesContent":["\"use client\";\n\nimport { cnb } from \"cnbuilder\";\nimport {\n  type ButtonHTMLAttributes,\n  type CSSProperties,\n  type HTMLAttributes,\n  type ReactNode,\n  forwardRef,\n} from \"react\";\n\nimport { type BackgroundColor } from \"../cssUtils.js\";\nimport { getIcon } from \"../icon/config.js\";\nimport { type ComponentWithRippleProps } from \"../interaction/types.js\";\nimport { useElementInteraction } from \"../interaction/useElementInteraction.js\";\nimport { useHigherContrastChildren } from \"../interaction/useHigherContrastChildren.js\";\nimport {\n  type BaseMaxWidthTransitionOptions,\n  useMaxWidthTransition,\n} from \"../transition/useMaxWidthTransition.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { type ChipTheme, chip, chipContent } from \"./styles.js\";\n\n/**\n * @since 6.0.0 Renamed the `noninteractive` prop to\n * `noninteractable`.\n * @since 6.3.1 Extends BaseMaxWidthTransitionOptions for CSSProperties module\n * augmentation.\n */\nexport interface ChipProps\n  extends\n    ButtonHTMLAttributes<HTMLButtonElement>,\n    BaseMaxWidthTransitionOptions,\n    ComponentWithRippleProps {\n  /**\n   * @defaultValue `\"solid\"`\n   */\n  theme?: ChipTheme;\n\n  /**\n   * Set this to `true` if the chip should gain additional box shadow while the\n   * user is pressing down on the chip.\n   *\n   * @defaultValue `false`\n   */\n  raisable?: boolean;\n\n  /**\n   * @defaultValue `false`\n   */\n  disabled?: boolean;\n\n  /**\n   * When this is a boolean, a selected icon will be displayed before the\n   * `children` and appear/disappear when `true`/`false`.\n   *\n   * @see {@link selectedIcon}\n   * @see {@link selectedIconAfter}\n   * @see {@link selectedThemed}\n   */\n  selected?: boolean;\n\n  /**\n   * Set this to `true` if the chip should change background color while\n   * {@link selected} instead of displaying an icon. The default background\n   * color is a lighter swatch of the theme primary color.\n   *\n   * @defaultValue `false`\n   */\n  selectedThemed?: boolean;\n\n  /**\n   * An optional className to provide only while {@link selected} is `true`.\n   */\n  selectedClassName?: string;\n\n  /**\n   * This will be ignored if {@link selected} is `undefined`.\n   *\n   * @defaultValue `getIcon(\"selected\")`\n   */\n  selectedIcon?: ReactNode;\n\n  /**\n   * Set this to `true` if the {@link selectedIcon} should display as the\n   * {@link rightAddon} instead of the {@link leftAddon}.\n   *\n   * @defaultValue `false`\n   * @since 6.0.0\n   */\n  selectedIconAfter?: boolean;\n\n  /**\n   * Set this to `true` if the {@link selectedIcon} should not animate and\n   * instead apply `display: none`\n   *\n   * @defaultValue `false`\n   */\n  disableIconTransition?: boolean;\n\n  /**\n   * Set this to `true` to render the chip as a `<span>` instead of a button.\n   *\n   * @since 2.6.0\n   * @since 6.0.0 Renamed from `noninteractable`\n   * @defaultValue `false`\n   */\n  noninteractive?: boolean;\n\n  /**\n   * An optional background color theme to use.\n   *\n   * @since 6.0.0\n   */\n  backgroundColor?: BackgroundColor;\n\n  /**\n   * An optional icon, avatar, circular progress, or custom component to render\n   * before the `children`. This will remove some of the leading horizontal\n   * padding on the chip as well.\n   */\n  leftAddon?: ReactNode;\n\n  /**\n   * An optional icon, avatar, circular progress, or custom component to render\n   * after the `children`. This will remove some of the trailing horizontal\n   * padding on the chip as well.\n   */\n  rightAddon?: ReactNode;\n\n  /**\n   * Set this to true if the `children` should not be wrapped in a span to apply\n   * the {@link chipContent} styles which allow for shrinking text and\n   * truncating text with ellipsis.\n   *\n   * @defaultValue `false`\n   */\n  disableContentWrap?: boolean;\n\n  /**\n   * This will be ignored if {@link disableContentWrap} is `true`.\n   *\n   * @since 6.0.0\n   */\n  contentProps?: PropsWithRef<HTMLAttributes<HTMLSpanElement>>;\n\n  /**\n   * This will be ignored if {@link disableContentWrap} is `true`.\n   */\n  contentStyle?: CSSProperties;\n\n  /**\n   * This will be ignored if {@link disableContentWrap} is `true`.\n   */\n  contentClassName?: string;\n}\n\n/**\n * @example Simple Example\n * ```tsx\n * import { Chip } from \"@react-md/core/chip/Chip\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return <Chip>Content</Chip>;\n * }\n * ```\n *\n * @example Outlined Example\n * ```tsx\n * import { Chip } from \"@react-md/core/chip/Chip\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return <Chip theme=\"outline\">Content</Chip>;\n * }\n * ```\n *\n * @example Addons Example\n * ```tsx\n * import { Avatar } from \"@react-md/core/avatar/Avatar\";\n * import { Chip } from \"@react-md/core/chip/Chip\";\n * import AddCircleIcon from \"@react-md/material-icons/AddCircleIcon\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <Chip\n *       leftAddon={\n *         <Avatar>\n *           <img src=\"https://i.pravatar.cc/40?img=3\" alt=\"\" />\n *         </Avatar>\n *       }\n *       rightAddon={<AddCircleIcon />}\n *     >\n *       Chip\n *     </Chip>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/chip | Chip Demos}\n * @since 6.0.0 Renamed the `noninteractable` prop to\n * `noninteractive`.\n */\nexport const Chip = forwardRef<HTMLButtonElement, ChipProps>(\n  function Chip(props, ref) {\n    const {\n      \"aria-pressed\": ariaPressed,\n      theme = \"solid\",\n      className,\n      raisable = false,\n      disabled = false,\n      selected,\n      selectedThemed = false,\n      selectedClassName,\n      selectedIcon: propSelectedIcon,\n      selectedIconAfter = false,\n      backgroundColor,\n      noninteractive = false,\n      disableRipple,\n      disableIconTransition = false,\n      children: propChildren,\n      onClick,\n      onKeyDown,\n      onKeyUp,\n      onMouseDown,\n      onMouseUp,\n      onMouseLeave,\n      onDragStart,\n      onTouchStart,\n      onTouchEnd,\n      onTouchMove,\n      leftAddon: propLeftAddon,\n      rightAddon: propRightAddon,\n      contentProps,\n      contentStyle,\n      contentClassName,\n      disableContentWrap = false,\n      ...remaining\n    } = props;\n\n    let buttonProps: ButtonHTMLAttributes<HTMLButtonElement> | undefined;\n    if (!noninteractive) {\n      buttonProps = {\n        \"aria-pressed\": ariaPressed ?? (!!selected || undefined),\n        type: \"button\",\n        disabled,\n      };\n    }\n\n    let content = propChildren;\n    if (!disableContentWrap) {\n      content = (\n        <span\n          style={contentStyle}\n          {...contentProps}\n          className={cnb(\n            chipContent({ className: contentClassName }),\n            contentProps?.className\n          )}\n        >\n          {propChildren}\n        </span>\n      );\n    }\n\n    let leftAddon = propLeftAddon;\n    let rightAddon = propRightAddon;\n    const selectedIconNode = getIcon(\"selected\", propSelectedIcon);\n    const isTransitionable =\n      !selectedThemed &&\n      typeof selected === \"boolean\" &&\n      (selectedIconAfter ? propRightAddon : propLeftAddon) === undefined;\n    const selectedIcon = useMaxWidthTransition({\n      element: selectedIconNode,\n      transitionIn: !!selected,\n      disabled: !isTransitionable,\n      disableTransition: disableIconTransition,\n    });\n    if (isTransitionable) {\n      if (selectedIconAfter) {\n        rightAddon = selectedIcon;\n      } else {\n        leftAddon = selectedIcon;\n      }\n    }\n\n    const { pressed, pressedClassName, ripples, handlers } =\n      useElementInteraction({\n        mode: disableRipple ? \"none\" : undefined,\n        onClick,\n        onKeyDown,\n        onKeyUp,\n        onMouseDown,\n        onMouseUp,\n        onMouseLeave,\n        onDragStart,\n        onTouchStart,\n        onTouchEnd,\n        onTouchMove,\n        disabled: disabled || noninteractive,\n      });\n    const children = useHigherContrastChildren(content);\n    const Component = noninteractive ? \"span\" : \"button\";\n\n    return (\n      <Component\n        {...remaining}\n        {...buttonProps}\n        {...handlers}\n        className={chip({\n          className,\n          theme,\n          pressed: raisable && pressed,\n          disabled,\n          selected,\n          selectedThemed,\n          selectedClassName,\n          noninteractive,\n          backgroundColor,\n          pressedClassName,\n          leftAddon: !!leftAddon && (selectedIconAfter || selected !== false),\n          rightAddon:\n            !!rightAddon && (!selectedIconAfter || selected !== false),\n        })}\n        ref={ref}\n      >\n        {leftAddon}\n        {children}\n        {rightAddon}\n        {ripples}\n      </Component>\n    );\n  }\n);\n"],"names":["cnb","forwardRef","getIcon","useElementInteraction","useHigherContrastChildren","useMaxWidthTransition","chip","chipContent","Chip","props","ref","ariaPressed","theme","className","raisable","disabled","selected","selectedThemed","selectedClassName","selectedIcon","propSelectedIcon","selectedIconAfter","backgroundColor","noninteractive","disableRipple","disableIconTransition","children","propChildren","onClick","onKeyDown","onKeyUp","onMouseDown","onMouseUp","onMouseLeave","onDragStart","onTouchStart","onTouchEnd","onTouchMove","leftAddon","propLeftAddon","rightAddon","propRightAddon","contentProps","contentStyle","contentClassName","disableContentWrap","remaining","buttonProps","undefined","type","content","span","style","selectedIconNode","isTransitionable","element","transitionIn","disableTransition","pressed","pressedClassName","ripples","handlers","mode","Component"],"mappings":"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"}

package/dist/chip/_chip.scss

@@ -182,10 +182,10 @@ $solid-light-color: a11y.contrast-color($solid-light-background-color) !default;
 
 /// The dark theme background color for the `theme="solid"`
 /// @type Color
+// prettier-ignore
 $solid-dark-background-color: if(
-  theme.$disable-dark-elevation,
-  colors.$grey-900,
-  map.get(theme.$dark-elevation-colors, 12)
+  sass(theme.$disable-dark-elevation): colors.$grey-900;
+  else: map.get(theme.$dark-elevation-colors, 12)
 ) !default;
 
 /// The dark theme background color for the `theme="solid"` and the `Chip` is
@@ -261,10 +261,10 @@ $outline-dark-color: $outline-light-color !default;
 
 /// The background-color to use in dark themes when `theme="outline"`
 /// @type Color
+// prettier-ignore
 $outline-dark-background-color: if(
-  theme.$disable-dark-elevation,
-  theme.$dark-theme-surface-color,
-  map.get(theme.$dark-elevation-colors, $outline-raisable-box-shadow-z-value)
+  sass(theme.$disable-dark-elevation): theme.$dark-theme-surface-color;
+  else: map.get( theme.$dark-elevation-colors, $outline-raisable-box-shadow-z-value)
 ) !default;
 
 /// The text color to use in dark themes when `theme="outline"`

package/dist/cssUtils.d.ts

@@ -80,20 +80,25 @@ export interface TextCssUtilsOptions {
      */
     textOverflow?: TextOverflow;
 }
+/**
+ * Set this to `true` to allow the content to only be visible for screen
+ * readers. Set this to `"focusable"` to allow the content to be visible to
+ * screen readers and once focused. Set this to `"phone"` to only render the
+ * content as screen reader only text on phones.
+ *
+ * @since 6.5.1
+ */
+export type SrOnlyBehavior = boolean | "focusable" | "phone";
 /**
  * @since 6.0.0
  */
 export interface CssUtilsOptions extends TextCssUtilsOptions {
     className?: string;
     /**
-     * Set this to `true` to allow the content to only be visible for screen
-     * readers. Set this to `"focusable"` to allow the content to be visible to
-     * screen readers and once focused. Set this to `"phone"` to only render the
-     * the content as screen reader only text on phones.
-     *
+     * @see {@link SrOnlyBehavior}
      * @defaultValue `false`
      */
-    srOnly?: boolean | "focusable" | "phone";
+    srOnly?: SrOnlyBehavior;
     /**
      * Set this to `"current-color"` to inherit the current text color or a
      * specific theme color as the outline `box-shadow`.

package/dist/cssUtils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/cssUtils.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\n/**\n * - `primary -> $primary-color`\n * - `secondary -> $secondary-color`\n * - `warning -> $warning-color`\n * - `success -> $success-color`\n * - `error -> $error-color`\n *\n * @since 6.0.0\n */\nexport type ThemeColor =\n  | \"primary\"\n  | \"secondary\"\n  | \"warning\"\n  | \"success\"\n  | \"error\";\n\n/**\n * - `text-primary -> $text-primary-color`\n * - `text-secondary -> $text-secondary-color`\n * - `text-hint -> $text-hint-color`\n * - `text-disabled -> $text-disabled-color`\n *\n * @since 6.0.0\n */\nexport type TextColor =\n  | \"text-primary\"\n  | \"text-secondary\"\n  | \"text-hint\"\n  | \"text-disabled\"\n  | `on-${ThemeColor}`;\n\n/**\n * @since 6.0.0\n */\nexport type OutlineColor = ThemeColor | \"greyscale\" | \"current-color\";\n\n/**\n * @since 6.0.0\n */\nexport type BackgroundColor = ThemeColor | \"surface\" | \"current-color\";\n\nexport type TextAlign = \"left\" | \"center\" | \"right\";\nexport type TextDecoration = \"underline\" | \"overline\" | \"line-through\" | \"none\";\nexport type TextTransform = \"capitalize\" | \"uppercase\" | \"lowercase\";\nexport type FontStyle = \"italic\" | \"oblique\" | \"normal\";\n\n/**\n * The supported css `font-weight` values.\n *\n * Note: You will need to ensure that you are using a web safe font for all the\n * font weights to work, use variable fonts, or load all font weights for your\n * custom font.\n *\n * @see {@link https://www.google.com/search?q=web+safe+fonts | Web Safe Fonts}\n * @see {@link https://www.google.com/search?q=variable+fonts | Variable Fonts}\n * @since 6.0.0 This was `TextWeight` beforehand.\n */\nexport type FontWeight =\n  | \"thin\"\n  | \"light\"\n  | \"regular\"\n  | \"medium\"\n  | \"bold\"\n  | \"semi-bold\"\n  | \"black\";\n\n/**\n * Since the typography within react-md tries to not modify base elements, the\n * default margin applied to heading tags (h1-h6) and paragraph (p) might have\n * large margin that you don't want applied when using this component. You can\n * disable:\n *\n * - only the top margin by setting this prop to `\"bottom\"`\n * - only the bottom margin by setting this prop to `\"top\"`\n * - top and bottom margin by setting this prop to `\"none\"`\n * - or keep the initial behavior: `\"initial\"`\n *\n * @since 6.0.0\n */\nexport type Margin = \"none\" | \"top\" | \"bottom\" | \"centered\";\n\n/** @since 6.0.0 */\nexport type TextOverflow = \"allow\" | \"nowrap\" | \"ellipsis\";\n\n/** @since 6.0.0 */\nexport interface TextCssUtilsOptions {\n  textColor?: ThemeColor | TextColor | null;\n\n  textAlign?: TextAlign;\n\n  textDecoration?: TextDecoration;\n\n  textTransform?: TextTransform;\n\n  fontWeight?: FontWeight;\n\n  fontStyle?: FontStyle;\n\n  /**\n   * This can be used to remove margin from an element (usually typography\n   * elements since the browser applies default margin for those elements).\n   *\n   * @see {@link Margin}\n   */\n  margin?: Margin;\n\n  /**\n   * Set this to `\"nowrap\"` to only prevent line wrap behavior or `\"ellipsis\"`\n   * to also hide additional text with ellipsis.\n   *\n   * @defaultValue `\"allow\"`\n   */\n  textOverflow?: TextOverflow;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface CssUtilsOptions extends TextCssUtilsOptions {\n  className?: string;\n\n  /**\n   * Set this to `true` to allow the content to only be visible for screen\n   * readers. Set this to `\"focusable\"` to allow the content to be visible to\n   * screen readers and once focused. Set this to `\"phone\"` to only render the\n   * the content as screen reader only text on phones.\n   *\n   * @defaultValue `false`\n   */\n  srOnly?: boolean | \"focusable\" | \"phone\";\n\n  /**\n   * Set this to `\"current-color\"` to inherit the current text color or a\n   * specific theme color as the outline `box-shadow`.\n   */\n  outlineColor?: OutlineColor;\n\n  /**\n   * When this is defined, a specific theme background-color will be applied\n   * along with updating the text color be either `#000` or `#fff` depending on\n   * which has the highest contrast ratio.\n   */\n  backgroundColor?: BackgroundColor;\n\n  /**\n   * Set this to `true` if the element should act as an interaction surface\n   * which will:\n   * - display a pointer while hovered\n   * - increase the z-index of children to enable higher contrast when\n   *   `core.$interaction-disable-higher-contrast` is not `true`\n   * - add a `::before` pseudo element that will:\n   *   - gain the focus shadow while `:focus`-ed\n   *   - add a background-color while `:hover`-ed\n   *   - show no hover/focus styles while `:disabled` or `[aria-disabled=\"true\"]`\n   *\n   * @defaultValue `false`\n   */\n  surface?: boolean;\n\n  /**\n   * Set this to `\"light\"` or `\"dark\"` to update the hover, focus, press,\n   * selected, and ripple colors for the surface type. `\"light\"` surfaces will\n   * use `#000` while `\"dark\"` will use `#fff`.\n   */\n  surfaceColor?: \"light\" | \"dark\";\n}\n\n/**\n * This is used to apply css utility functions to any element within your\n * application such as:\n * - specific theme colors as background, text, or outline color\n * - removing margin\n * - screen reader visible only text\n * - text-align, text-decoration, text-transform, font-style, font-weight\n * - disable line wrap\n *\n * @since 6.0.0\n */\nexport function cssUtils(options: CssUtilsOptions): string {\n  const {\n    className,\n    srOnly,\n    textColor,\n    outlineColor,\n    backgroundColor,\n    surface,\n    surfaceColor,\n    margin,\n    fontStyle,\n    fontWeight,\n    textAlign,\n    textDecoration,\n    textTransform,\n    textOverflow,\n  } = options;\n\n  const isMarginTop = margin === \"top\";\n  const isTextColor =\n    textColor === \"text-primary\" ||\n    textColor === \"text-secondary\" ||\n    textColor === \"text-hint\" ||\n    textColor === \"text-disabled\";\n\n  return cnb(\n    !backgroundColor && !isTextColor && textColor && `rmd-${textColor}-color`,\n    !backgroundColor && isTextColor && `rmd-${textColor}-color`,\n    backgroundColor && \"rmd-background-container\",\n    backgroundColor &&\n      backgroundColor !== \"current-color\" &&\n      backgroundColor !== \"surface\" &&\n      `rmd-${backgroundColor}-container`,\n    outlineColor && \"rmd-outline\",\n    outlineColor && `rmd-${outlineColor}-outline`,\n    (isMarginTop || margin === \"bottom\") &&\n      `rmd-no-margin-${isMarginTop ? \"bottom\" : \"top\"}`,\n    margin === \"none\" && \"rmd-no-margin\",\n    margin === \"centered\" && \"rmd-centered\",\n    textAlign && `rmd-align-${textAlign}`,\n    textDecoration && `rmd-${textDecoration}`,\n    textTransform && `rmd-${textTransform}`,\n    fontStyle && `rmd-${fontStyle}`,\n    fontWeight && `rmd-${fontWeight}`,\n    srOnly && srOnly !== \"phone\" && \"rmd-sr-only\",\n    srOnly === \"phone\" && \"rmd-phone-sr-only\",\n    srOnly === \"focusable\" && \"rmd-sr-only--focusable\",\n    surfaceColor === \"light\" && \"rmd-light-surface\",\n    surfaceColor === \"dark\" && \"rmd-dark-surface\",\n    textOverflow && textOverflow !== \"allow\" && \"rmd-nowrap\",\n    textOverflow === \"ellipsis\" && \"rmd-ellipsis\",\n    surface && \"rmd-interaction-surface\",\n    className\n  );\n}\n"],"names":["cnb","cssUtils","options","className","srOnly","textColor","outlineColor","backgroundColor","surface","surfaceColor","margin","fontStyle","fontWeight","textAlign","textDecoration","textTransform","textOverflow","isMarginTop","isTextColor"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAyKhC;;;;;;;;;;CAUC,GACD,OAAO,SAASC,SAASC,OAAwB;IAC/C,MAAM,EACJC,SAAS,EACTC,MAAM,EACNC,SAAS,EACTC,YAAY,EACZC,eAAe,EACfC,OAAO,EACPC,YAAY,EACZC,MAAM,EACNC,SAAS,EACTC,UAAU,EACVC,SAAS,EACTC,cAAc,EACdC,aAAa,EACbC,YAAY,EACb,GAAGd;IAEJ,MAAMe,cAAcP,WAAW;IAC/B,MAAMQ,cACJb,cAAc,kBACdA,cAAc,oBACdA,cAAc,eACdA,cAAc;IAEhB,OAAOL,IACL,CAACO,mBAAmB,CAACW,eAAeb,aAAa,CAAC,IAAI,EAAEA,UAAU,MAAM,CAAC,EACzE,CAACE,mBAAmBW,eAAe,CAAC,IAAI,EAAEb,UAAU,MAAM,CAAC,EAC3DE,mBAAmB,4BACnBA,mBACEA,oBAAoB,mBACpBA,oBAAoB,aACpB,CAAC,IAAI,EAAEA,gBAAgB,UAAU,CAAC,EACpCD,gBAAgB,eAChBA,gBAAgB,CAAC,IAAI,EAAEA,aAAa,QAAQ,CAAC,EAC7C,AAACW,CAAAA,eAAeP,WAAW,QAAO,KAChC,CAAC,cAAc,EAAEO,cAAc,WAAW,OAAO,EACnDP,WAAW,UAAU,iBACrBA,WAAW,cAAc,gBACzBG,aAAa,CAAC,UAAU,EAAEA,WAAW,EACrCC,kBAAkB,CAAC,IAAI,EAAEA,gBAAgB,EACzCC,iBAAiB,CAAC,IAAI,EAAEA,eAAe,EACvCJ,aAAa,CAAC,IAAI,EAAEA,WAAW,EAC/BC,cAAc,CAAC,IAAI,EAAEA,YAAY,EACjCR,UAAUA,WAAW,WAAW,eAChCA,WAAW,WAAW,qBACtBA,WAAW,eAAe,0BAC1BK,iBAAiB,WAAW,qBAC5BA,iBAAiB,UAAU,oBAC3BO,gBAAgBA,iBAAiB,WAAW,cAC5CA,iBAAiB,cAAc,gBAC/BR,WAAW,2BACXL;AAEJ"}
+{"version":3,"sources":["../src/cssUtils.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\n/**\n * - `primary -> $primary-color`\n * - `secondary -> $secondary-color`\n * - `warning -> $warning-color`\n * - `success -> $success-color`\n * - `error -> $error-color`\n *\n * @since 6.0.0\n */\nexport type ThemeColor =\n  | \"primary\"\n  | \"secondary\"\n  | \"warning\"\n  | \"success\"\n  | \"error\";\n\n/**\n * - `text-primary -> $text-primary-color`\n * - `text-secondary -> $text-secondary-color`\n * - `text-hint -> $text-hint-color`\n * - `text-disabled -> $text-disabled-color`\n *\n * @since 6.0.0\n */\nexport type TextColor =\n  | \"text-primary\"\n  | \"text-secondary\"\n  | \"text-hint\"\n  | \"text-disabled\"\n  | `on-${ThemeColor}`;\n\n/**\n * @since 6.0.0\n */\nexport type OutlineColor = ThemeColor | \"greyscale\" | \"current-color\";\n\n/**\n * @since 6.0.0\n */\nexport type BackgroundColor = ThemeColor | \"surface\" | \"current-color\";\n\nexport type TextAlign = \"left\" | \"center\" | \"right\";\nexport type TextDecoration = \"underline\" | \"overline\" | \"line-through\" | \"none\";\nexport type TextTransform = \"capitalize\" | \"uppercase\" | \"lowercase\";\nexport type FontStyle = \"italic\" | \"oblique\" | \"normal\";\n\n/**\n * The supported css `font-weight` values.\n *\n * Note: You will need to ensure that you are using a web safe font for all the\n * font weights to work, use variable fonts, or load all font weights for your\n * custom font.\n *\n * @see {@link https://www.google.com/search?q=web+safe+fonts | Web Safe Fonts}\n * @see {@link https://www.google.com/search?q=variable+fonts | Variable Fonts}\n * @since 6.0.0 This was `TextWeight` beforehand.\n */\nexport type FontWeight =\n  | \"thin\"\n  | \"light\"\n  | \"regular\"\n  | \"medium\"\n  | \"bold\"\n  | \"semi-bold\"\n  | \"black\";\n\n/**\n * Since the typography within react-md tries to not modify base elements, the\n * default margin applied to heading tags (h1-h6) and paragraph (p) might have\n * large margin that you don't want applied when using this component. You can\n * disable:\n *\n * - only the top margin by setting this prop to `\"bottom\"`\n * - only the bottom margin by setting this prop to `\"top\"`\n * - top and bottom margin by setting this prop to `\"none\"`\n * - or keep the initial behavior: `\"initial\"`\n *\n * @since 6.0.0\n */\nexport type Margin = \"none\" | \"top\" | \"bottom\" | \"centered\";\n\n/** @since 6.0.0 */\nexport type TextOverflow = \"allow\" | \"nowrap\" | \"ellipsis\";\n\n/** @since 6.0.0 */\nexport interface TextCssUtilsOptions {\n  textColor?: ThemeColor | TextColor | null;\n\n  textAlign?: TextAlign;\n\n  textDecoration?: TextDecoration;\n\n  textTransform?: TextTransform;\n\n  fontWeight?: FontWeight;\n\n  fontStyle?: FontStyle;\n\n  /**\n   * This can be used to remove margin from an element (usually typography\n   * elements since the browser applies default margin for those elements).\n   *\n   * @see {@link Margin}\n   */\n  margin?: Margin;\n\n  /**\n   * Set this to `\"nowrap\"` to only prevent line wrap behavior or `\"ellipsis\"`\n   * to also hide additional text with ellipsis.\n   *\n   * @defaultValue `\"allow\"`\n   */\n  textOverflow?: TextOverflow;\n}\n\n/**\n * Set this to `true` to allow the content to only be visible for screen\n * readers. Set this to `\"focusable\"` to allow the content to be visible to\n * screen readers and once focused. Set this to `\"phone\"` to only render the\n * content as screen reader only text on phones.\n *\n * @since 6.5.1\n */\nexport type SrOnlyBehavior = boolean | \"focusable\" | \"phone\";\n\n/**\n * @since 6.0.0\n */\nexport interface CssUtilsOptions extends TextCssUtilsOptions {\n  className?: string;\n\n  /**\n   * @see {@link SrOnlyBehavior}\n   * @defaultValue `false`\n   */\n  srOnly?: SrOnlyBehavior;\n\n  /**\n   * Set this to `\"current-color\"` to inherit the current text color or a\n   * specific theme color as the outline `box-shadow`.\n   */\n  outlineColor?: OutlineColor;\n\n  /**\n   * When this is defined, a specific theme background-color will be applied\n   * along with updating the text color be either `#000` or `#fff` depending on\n   * which has the highest contrast ratio.\n   */\n  backgroundColor?: BackgroundColor;\n\n  /**\n   * Set this to `true` if the element should act as an interaction surface\n   * which will:\n   * - display a pointer while hovered\n   * - increase the z-index of children to enable higher contrast when\n   *   `core.$interaction-disable-higher-contrast` is not `true`\n   * - add a `::before` pseudo element that will:\n   *   - gain the focus shadow while `:focus`-ed\n   *   - add a background-color while `:hover`-ed\n   *   - show no hover/focus styles while `:disabled` or `[aria-disabled=\"true\"]`\n   *\n   * @defaultValue `false`\n   */\n  surface?: boolean;\n\n  /**\n   * Set this to `\"light\"` or `\"dark\"` to update the hover, focus, press,\n   * selected, and ripple colors for the surface type. `\"light\"` surfaces will\n   * use `#000` while `\"dark\"` will use `#fff`.\n   */\n  surfaceColor?: \"light\" | \"dark\";\n}\n\n/**\n * This is used to apply css utility functions to any element within your\n * application such as:\n * - specific theme colors as background, text, or outline color\n * - removing margin\n * - screen reader visible only text\n * - text-align, text-decoration, text-transform, font-style, font-weight\n * - disable line wrap\n *\n * @since 6.0.0\n */\nexport function cssUtils(options: CssUtilsOptions): string {\n  const {\n    className,\n    srOnly,\n    textColor,\n    outlineColor,\n    backgroundColor,\n    surface,\n    surfaceColor,\n    margin,\n    fontStyle,\n    fontWeight,\n    textAlign,\n    textDecoration,\n    textTransform,\n    textOverflow,\n  } = options;\n\n  const isMarginTop = margin === \"top\";\n  const isTextColor =\n    textColor === \"text-primary\" ||\n    textColor === \"text-secondary\" ||\n    textColor === \"text-hint\" ||\n    textColor === \"text-disabled\";\n\n  return cnb(\n    !backgroundColor && !isTextColor && textColor && `rmd-${textColor}-color`,\n    !backgroundColor && isTextColor && `rmd-${textColor}-color`,\n    backgroundColor && \"rmd-background-container\",\n    backgroundColor &&\n      backgroundColor !== \"current-color\" &&\n      backgroundColor !== \"surface\" &&\n      `rmd-${backgroundColor}-container`,\n    outlineColor && \"rmd-outline\",\n    outlineColor && `rmd-${outlineColor}-outline`,\n    (isMarginTop || margin === \"bottom\") &&\n      `rmd-no-margin-${isMarginTop ? \"bottom\" : \"top\"}`,\n    margin === \"none\" && \"rmd-no-margin\",\n    margin === \"centered\" && \"rmd-centered\",\n    textAlign && `rmd-align-${textAlign}`,\n    textDecoration && `rmd-${textDecoration}`,\n    textTransform && `rmd-${textTransform}`,\n    fontStyle && `rmd-${fontStyle}`,\n    fontWeight && `rmd-${fontWeight}`,\n    srOnly && srOnly !== \"phone\" && \"rmd-sr-only\",\n    srOnly === \"phone\" && \"rmd-phone-sr-only\",\n    srOnly === \"focusable\" && \"rmd-sr-only--focusable\",\n    surfaceColor === \"light\" && \"rmd-light-surface\",\n    surfaceColor === \"dark\" && \"rmd-dark-surface\",\n    textOverflow && textOverflow !== \"allow\" && \"rmd-nowrap\",\n    textOverflow === \"ellipsis\" && \"rmd-ellipsis\",\n    surface && \"rmd-interaction-surface\",\n    className\n  );\n}\n"],"names":["cnb","cssUtils","options","className","srOnly","textColor","outlineColor","backgroundColor","surface","surfaceColor","margin","fontStyle","fontWeight","textAlign","textDecoration","textTransform","textOverflow","isMarginTop","isTextColor"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AA+KhC;;;;;;;;;;CAUC,GACD,OAAO,SAASC,SAASC,OAAwB;IAC/C,MAAM,EACJC,SAAS,EACTC,MAAM,EACNC,SAAS,EACTC,YAAY,EACZC,eAAe,EACfC,OAAO,EACPC,YAAY,EACZC,MAAM,EACNC,SAAS,EACTC,UAAU,EACVC,SAAS,EACTC,cAAc,EACdC,aAAa,EACbC,YAAY,EACb,GAAGd;IAEJ,MAAMe,cAAcP,WAAW;IAC/B,MAAMQ,cACJb,cAAc,kBACdA,cAAc,oBACdA,cAAc,eACdA,cAAc;IAEhB,OAAOL,IACL,CAACO,mBAAmB,CAACW,eAAeb,aAAa,CAAC,IAAI,EAAEA,UAAU,MAAM,CAAC,EACzE,CAACE,mBAAmBW,eAAe,CAAC,IAAI,EAAEb,UAAU,MAAM,CAAC,EAC3DE,mBAAmB,4BACnBA,mBACEA,oBAAoB,mBACpBA,oBAAoB,aACpB,CAAC,IAAI,EAAEA,gBAAgB,UAAU,CAAC,EACpCD,gBAAgB,eAChBA,gBAAgB,CAAC,IAAI,EAAEA,aAAa,QAAQ,CAAC,EAC7C,AAACW,CAAAA,eAAeP,WAAW,QAAO,KAChC,CAAC,cAAc,EAAEO,cAAc,WAAW,OAAO,EACnDP,WAAW,UAAU,iBACrBA,WAAW,cAAc,gBACzBG,aAAa,CAAC,UAAU,EAAEA,WAAW,EACrCC,kBAAkB,CAAC,IAAI,EAAEA,gBAAgB,EACzCC,iBAAiB,CAAC,IAAI,EAAEA,eAAe,EACvCJ,aAAa,CAAC,IAAI,EAAEA,WAAW,EAC/BC,cAAc,CAAC,IAAI,EAAEA,YAAY,EACjCR,UAAUA,WAAW,WAAW,eAChCA,WAAW,WAAW,qBACtBA,WAAW,eAAe,0BAC1BK,iBAAiB,WAAW,qBAC5BA,iBAAiB,UAAU,oBAC3BO,gBAAgBA,iBAAiB,WAAW,cAC5CA,iBAAiB,cAAc,gBAC/BR,WAAW,2BACXL;AAEJ"}

package/dist/datetime/useTimeField.js

@@ -33,7 +33,7 @@ import { getTimeStep } from "./utils.js";
  * @see {@link https://react-md.dev/hooks/use-time-field | useTimeField Demos}
  */ export function useTimeField(options) {
     const { min, max, step, ...fieldOptions } = options;
-    if (process.env.NODE_ENV !== "production" && typeof step !== "undefined" && (!min || !max)) {
+    if (process.env.NODE_ENV !== "production" && step !== undefined && (!min || !max)) {
         throw new Error("A `step` was provided to a time field without the `min` or `max` props.");
     }
     const { errorMessage, fieldProps, ...impl } = useTextField(fieldOptions);

package/dist/datetime/useTimeField.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/datetime/useTimeField.ts"],"sourcesContent":["\"use client\";\n\nimport { type InputHTMLAttributes, useRef } from \"react\";\n\nimport {\n  type ProvidedFormMessageProps,\n  type ProvidedTextFieldProps,\n  type TextFieldHookOptions,\n  type TextFieldImplementation,\n  type TextFieldWithMessageImplementation,\n  useTextField,\n} from \"../form/useTextField.js\";\nimport { type TimeFieldStepOptions, getTimeStep } from \"./utils.js\";\n\n/** @since 6.3.0 */\nexport interface TimeFieldConstraints {\n  /**\n   * This **must** be in the format `HH:mm`:\n   * - `00:30` (12:30 AM)\n   * - `15:15` (03:15 PM)\n   *\n   * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/time#time_value_format | Time value format}\n   */\n  min?: string;\n\n  /**\n   * This **must** be in the format `HH:mm`:\n   * - `00:30` (12:30 AM)\n   * - `15:15` (03:15 PM)\n   *\n   * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/time#time_value_format | Time value format}\n   */\n  max?: string;\n\n  /**\n   * For time inputs, the value of step is given in seconds, with a scaling\n   * factor of 1000 (since the underlying numeric value is in milliseconds).\n   * The default value of step is 60, indicating 60 seconds (or 1 minute, or\n   * 60,000 milliseconds).\n   *\n   * When any is set as the value for step, the default 60 seconds is used, and\n   * the seconds value is not displayed in the UI.\n   *\n   * Here are a few examples:\n   *\n   * - `15`   -&gt; 15 seconds\n   * - `60`   -&gt; 1 minute\n   * - `900`  -&gt; 15 minutes\n   * - `3600` -&gt; 1 hour\n   *\n   * Since this might be a bit confusing, the values can be provided in an\n   * object instead:\n   *\n   * ```ts\n   * { seconds: 30 }\n   * { minutes: 1 }\n   * { minutes: 15 }\n   * { hours: 1 }\n   * { seconds: 15, minutes: 30, hours: 1 }\n   * ```\n   *\n   * NOTE: The `min` and `max` props **must** be provided as well for the\n   * `step` to work.\n   *\n   * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/time#step | step attribute}\n   */\n  step?: number | \"any\" | TimeFieldStepOptions;\n}\n\n/** @since 6.3.0 */\nexport interface TimeFieldOptions\n  extends\n    Omit<\n      TextFieldHookOptions,\n      | \"isNumber\"\n      | \"counter\"\n      | \"pattern\"\n      | \"maxLength\"\n      | \"minLength\"\n      | \"disableMaxLength\"\n    >,\n    TimeFieldConstraints {}\n\n/** @since 6.3.0 */\nexport interface ProvidedTimeFieldProps\n  extends\n    Omit<ProvidedTextFieldProps, \"value\">,\n    Omit<TimeFieldConstraints, \"step\"> {\n  type: \"time\";\n  step?: number | \"any\";\n  defaultValue: Required<InputHTMLAttributes<HTMLInputElement>>[\"defaultValue\"];\n}\n\n/** @since 6.3.0 */\nexport interface ProvidedTimeFieldMessageProps extends ProvidedTimeFieldProps {\n  /**\n   * These props will be defined as long as the `disableMessage` prop is not\n   * `true` from the `useTextField` hook.\n   */\n  messageProps: ProvidedFormMessageProps;\n}\n\n/** @since 6.3.0 */\nexport interface TimeFieldImplementation extends Omit<\n  TextFieldImplementation,\n  \"fieldProps\"\n> {\n  fieldProps: ProvidedTimeFieldProps;\n}\n\n/** @since 6.3.0 */\nexport interface TimeFieldWithMessageImplementation extends Omit<\n  TextFieldWithMessageImplementation,\n  \"fieldProps\"\n> {\n  fieldProps: ProvidedTimeFieldMessageProps;\n}\n\n/** @since 6.3.0 */\nexport interface ValidatedTimeFieldImplementation extends TimeFieldImplementation {\n  fieldProps: ProvidedTimeFieldProps | ProvidedTimeFieldMessageProps;\n}\n\n/**\n * @since 6.3.0\n * @see {@link https://react-md.dev/components/native-time-field | NativeTimeField Demos}\n * @see {@link https://react-md.dev/hooks/use-time-field | useTimeField Demos}\n */\nexport function useTimeField(\n  options: TimeFieldOptions & { disableMessage: true }\n): TimeFieldImplementation;\n\n/**\n * The `useTimeField` is a small wrapper around the {@link useTextField} to be used\n * with `<input type=\"time\" />`. It is used in the `NativeTimeField` if an example\n * implementation would like to be seen.\n *\n * @example Simple Example\n * ```tsx\n * import { useTimeField } from \"@react-md/core/datetime/useTimeField\";\n * import { TextField } from \"@react-md/core/form/TextField\";\n * import { type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const { value, fieldProps, error, errorMessage } = useTimeField({\n *     name: \"appt\",\n *     required: true,\n *     min: \"08:00\",\n *     max: \"17:00\",\n *     step: { minute: 15 },\n *     disableMessage: true,\n *   });\n *\n *   // value: `\"\"` or `\"HH:mm\"`\n *\n *   return <TextField label=\"Appointment\" {...fieldProps} />\n * }\n * ```\n *\n * @since 6.3.0\n * @see {@link https://react-md.dev/components/native-time-field | NativeTimeField Demos}\n * @see {@link https://react-md.dev/hooks/use-time-field | useTimeField Demos}\n */\nexport function useTimeField(\n  options: TimeFieldOptions\n): TimeFieldWithMessageImplementation;\n\n/**\n * The `useTimeField` is a small wrapper around the {@link useTextField} to be used\n * with `<input type=\"time\" />`. It is used in the `NativeTimeField` if an example\n * implementation would like to be seen.\n *\n * @example Simple Example\n * ```tsx\n * import { useTimeField } from \"@react-md/core/datetime/useTimeField\";\n * import { TextField } from \"@react-md/core/form/TextField\";\n * import { type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const { value, fieldProps } = useTimeField({\n *     name: \"appt\",\n *     required: true,\n *     min: \"08:00\",\n *     max: \"17:00\",\n *     step: { minute: 15 },\n *   });\n *\n *   // value: `\"\"` or `\"HH:mm\"`\n *\n *   return <TextField label=\"Appointment\" {...fieldProps} />\n * }\n * ```\n *\n * @since 6.3.0\n * @see {@link https://react-md.dev/components/native-time-field | NativeTimeField Demos}\n * @see {@link https://react-md.dev/hooks/use-time-field | useTimeField Demos}\n */\nexport function useTimeField(\n  options: TimeFieldOptions\n): ValidatedTimeFieldImplementation {\n  const { min, max, step, ...fieldOptions } = options;\n  if (\n    process.env.NODE_ENV !== \"production\" &&\n    typeof step !== \"undefined\" &&\n    (!min || !max)\n  ) {\n    throw new Error(\n      \"A `step` was provided to a time field without the `min` or `max` props.\"\n    );\n  }\n\n  const { errorMessage, fieldProps, ...impl } = useTextField(fieldOptions);\n\n  // NOTE: Unlike the other text field components, the `value` should **not**\n  // be provided since the time input behaves a bit weirdly with the `onChange`\n  // event and it is better to rely on default browser behavior instead of\n  // controlling the value. The flow is:\n  // - user types `12:30`\n  //   - `onChange` is fired with `12:30`\n  // - user selects `30` and hits backspace\n  //   - `onChange` is fired with `\"\"`\n  // If the `value` is set, the other time values would be lost\n  const { value, ...allowedFieldProps } = fieldProps;\n  const initial = useRef(value);\n\n  return {\n    ...impl,\n    errorMessage,\n    fieldProps: {\n      ...allowedFieldProps,\n      defaultValue: initial.current,\n      min,\n      max,\n      step: getTimeStep(step),\n      type: \"time\",\n    },\n  };\n}\n"],"names":["useRef","useTextField","getTimeStep","useTimeField","options","min","max","step","fieldOptions","process","env","NODE_ENV","Error","errorMessage","fieldProps","impl","value","allowedFieldProps","initial","defaultValue","current","type"],"mappings":"AAAA;AAEA,SAAmCA,MAAM,QAAQ,QAAQ;AAEzD,SAMEC,YAAY,QACP,0BAA0B;AACjC,SAAoCC,WAAW,QAAQ,aAAa;AA2JpE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6BC,GACD,OAAO,SAASC,aACdC,OAAyB;IAEzB,MAAM,EAAEC,GAAG,EAAEC,GAAG,EAAEC,IAAI,EAAE,GAAGC,cAAc,GAAGJ;IAC5C,IACEK,QAAQC,GAAG,CAACC,QAAQ,KAAK,gBACzB,OAAOJ,SAAS,eACf,CAAA,CAACF,OAAO,CAACC,GAAE,GACZ;QACA,MAAM,IAAIM,MACR;IAEJ;IAEA,MAAM,EAAEC,YAAY,EAAEC,UAAU,EAAE,GAAGC,MAAM,GAAGd,aAAaO;IAE3D,2EAA2E;IAC3E,6EAA6E;IAC7E,wEAAwE;IACxE,sCAAsC;IACtC,uBAAuB;IACvB,uCAAuC;IACvC,yCAAyC;IACzC,oCAAoC;IACpC,6DAA6D;IAC7D,MAAM,EAAEQ,KAAK,EAAE,GAAGC,mBAAmB,GAAGH;IACxC,MAAMI,UAAUlB,OAAOgB;IAEvB,OAAO;QACL,GAAGD,IAAI;QACPF;QACAC,YAAY;YACV,GAAGG,iBAAiB;YACpBE,cAAcD,QAAQE,OAAO;YAC7Bf;YACAC;YACAC,MAAML,YAAYK;YAClBc,MAAM;QACR;IACF;AACF"}
+{"version":3,"sources":["../../src/datetime/useTimeField.ts"],"sourcesContent":["\"use client\";\n\nimport { type InputHTMLAttributes, useRef } from \"react\";\n\nimport {\n  type ProvidedFormMessageProps,\n  type ProvidedTextFieldProps,\n  type TextFieldHookOptions,\n  type TextFieldImplementation,\n  type TextFieldWithMessageImplementation,\n  useTextField,\n} from \"../form/useTextField.js\";\nimport { type TimeFieldStepOptions, getTimeStep } from \"./utils.js\";\n\n/** @since 6.3.0 */\nexport interface TimeFieldConstraints {\n  /**\n   * This **must** be in the format `HH:mm`:\n   * - `00:30` (12:30 AM)\n   * - `15:15` (03:15 PM)\n   *\n   * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/time#time_value_format | Time value format}\n   */\n  min?: string;\n\n  /**\n   * This **must** be in the format `HH:mm`:\n   * - `00:30` (12:30 AM)\n   * - `15:15` (03:15 PM)\n   *\n   * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/time#time_value_format | Time value format}\n   */\n  max?: string;\n\n  /**\n   * For time inputs, the value of step is given in seconds, with a scaling\n   * factor of 1000 (since the underlying numeric value is in milliseconds).\n   * The default value of step is 60, indicating 60 seconds (or 1 minute, or\n   * 60,000 milliseconds).\n   *\n   * When any is set as the value for step, the default 60 seconds is used, and\n   * the seconds value is not displayed in the UI.\n   *\n   * Here are a few examples:\n   *\n   * - `15`   -&gt; 15 seconds\n   * - `60`   -&gt; 1 minute\n   * - `900`  -&gt; 15 minutes\n   * - `3600` -&gt; 1 hour\n   *\n   * Since this might be a bit confusing, the values can be provided in an\n   * object instead:\n   *\n   * ```ts\n   * { seconds: 30 }\n   * { minutes: 1 }\n   * { minutes: 15 }\n   * { hours: 1 }\n   * { seconds: 15, minutes: 30, hours: 1 }\n   * ```\n   *\n   * NOTE: The `min` and `max` props **must** be provided as well for the\n   * `step` to work.\n   *\n   * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/time#step | step attribute}\n   */\n  step?: number | \"any\" | TimeFieldStepOptions;\n}\n\n/** @since 6.3.0 */\nexport interface TimeFieldOptions\n  extends\n    Omit<\n      TextFieldHookOptions,\n      | \"isNumber\"\n      | \"counter\"\n      | \"pattern\"\n      | \"maxLength\"\n      | \"minLength\"\n      | \"disableMaxLength\"\n    >,\n    TimeFieldConstraints {}\n\n/** @since 6.3.0 */\nexport interface ProvidedTimeFieldProps\n  extends\n    Omit<ProvidedTextFieldProps, \"value\">,\n    Omit<TimeFieldConstraints, \"step\"> {\n  type: \"time\";\n  step?: number | \"any\";\n  defaultValue: Required<InputHTMLAttributes<HTMLInputElement>>[\"defaultValue\"];\n}\n\n/** @since 6.3.0 */\nexport interface ProvidedTimeFieldMessageProps extends ProvidedTimeFieldProps {\n  /**\n   * These props will be defined as long as the `disableMessage` prop is not\n   * `true` from the `useTextField` hook.\n   */\n  messageProps: ProvidedFormMessageProps;\n}\n\n/** @since 6.3.0 */\nexport interface TimeFieldImplementation extends Omit<\n  TextFieldImplementation,\n  \"fieldProps\"\n> {\n  fieldProps: ProvidedTimeFieldProps;\n}\n\n/** @since 6.3.0 */\nexport interface TimeFieldWithMessageImplementation extends Omit<\n  TextFieldWithMessageImplementation,\n  \"fieldProps\"\n> {\n  fieldProps: ProvidedTimeFieldMessageProps;\n}\n\n/** @since 6.3.0 */\nexport interface ValidatedTimeFieldImplementation extends TimeFieldImplementation {\n  fieldProps: ProvidedTimeFieldProps | ProvidedTimeFieldMessageProps;\n}\n\n/**\n * @since 6.3.0\n * @see {@link https://react-md.dev/components/native-time-field | NativeTimeField Demos}\n * @see {@link https://react-md.dev/hooks/use-time-field | useTimeField Demos}\n */\nexport function useTimeField(\n  options: TimeFieldOptions & { disableMessage: true }\n): TimeFieldImplementation;\n\n/**\n * The `useTimeField` is a small wrapper around the {@link useTextField} to be used\n * with `<input type=\"time\" />`. It is used in the `NativeTimeField` if an example\n * implementation would like to be seen.\n *\n * @example Simple Example\n * ```tsx\n * import { useTimeField } from \"@react-md/core/datetime/useTimeField\";\n * import { TextField } from \"@react-md/core/form/TextField\";\n * import { type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const { value, fieldProps, error, errorMessage } = useTimeField({\n *     name: \"appt\",\n *     required: true,\n *     min: \"08:00\",\n *     max: \"17:00\",\n *     step: { minute: 15 },\n *     disableMessage: true,\n *   });\n *\n *   // value: `\"\"` or `\"HH:mm\"`\n *\n *   return <TextField label=\"Appointment\" {...fieldProps} />\n * }\n * ```\n *\n * @since 6.3.0\n * @see {@link https://react-md.dev/components/native-time-field | NativeTimeField Demos}\n * @see {@link https://react-md.dev/hooks/use-time-field | useTimeField Demos}\n */\nexport function useTimeField(\n  options: TimeFieldOptions\n): TimeFieldWithMessageImplementation;\n\n/**\n * The `useTimeField` is a small wrapper around the {@link useTextField} to be used\n * with `<input type=\"time\" />`. It is used in the `NativeTimeField` if an example\n * implementation would like to be seen.\n *\n * @example Simple Example\n * ```tsx\n * import { useTimeField } from \"@react-md/core/datetime/useTimeField\";\n * import { TextField } from \"@react-md/core/form/TextField\";\n * import { type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const { value, fieldProps } = useTimeField({\n *     name: \"appt\",\n *     required: true,\n *     min: \"08:00\",\n *     max: \"17:00\",\n *     step: { minute: 15 },\n *   });\n *\n *   // value: `\"\"` or `\"HH:mm\"`\n *\n *   return <TextField label=\"Appointment\" {...fieldProps} />\n * }\n * ```\n *\n * @since 6.3.0\n * @see {@link https://react-md.dev/components/native-time-field | NativeTimeField Demos}\n * @see {@link https://react-md.dev/hooks/use-time-field | useTimeField Demos}\n */\nexport function useTimeField(\n  options: TimeFieldOptions\n): ValidatedTimeFieldImplementation {\n  const { min, max, step, ...fieldOptions } = options;\n  if (\n    process.env.NODE_ENV !== \"production\" &&\n    step !== undefined &&\n    (!min || !max)\n  ) {\n    throw new Error(\n      \"A `step` was provided to a time field without the `min` or `max` props.\"\n    );\n  }\n\n  const { errorMessage, fieldProps, ...impl } = useTextField(fieldOptions);\n\n  // NOTE: Unlike the other text field components, the `value` should **not**\n  // be provided since the time input behaves a bit weirdly with the `onChange`\n  // event and it is better to rely on default browser behavior instead of\n  // controlling the value. The flow is:\n  // - user types `12:30`\n  //   - `onChange` is fired with `12:30`\n  // - user selects `30` and hits backspace\n  //   - `onChange` is fired with `\"\"`\n  // If the `value` is set, the other time values would be lost\n  const { value, ...allowedFieldProps } = fieldProps;\n  const initial = useRef(value);\n\n  return {\n    ...impl,\n    errorMessage,\n    fieldProps: {\n      ...allowedFieldProps,\n      defaultValue: initial.current,\n      min,\n      max,\n      step: getTimeStep(step),\n      type: \"time\",\n    },\n  };\n}\n"],"names":["useRef","useTextField","getTimeStep","useTimeField","options","min","max","step","fieldOptions","process","env","NODE_ENV","undefined","Error","errorMessage","fieldProps","impl","value","allowedFieldProps","initial","defaultValue","current","type"],"mappings":"AAAA;AAEA,SAAmCA,MAAM,QAAQ,QAAQ;AAEzD,SAMEC,YAAY,QACP,0BAA0B;AACjC,SAAoCC,WAAW,QAAQ,aAAa;AA2JpE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6BC,GACD,OAAO,SAASC,aACdC,OAAyB;IAEzB,MAAM,EAAEC,GAAG,EAAEC,GAAG,EAAEC,IAAI,EAAE,GAAGC,cAAc,GAAGJ;IAC5C,IACEK,QAAQC,GAAG,CAACC,QAAQ,KAAK,gBACzBJ,SAASK,aACR,CAAA,CAACP,OAAO,CAACC,GAAE,GACZ;QACA,MAAM,IAAIO,MACR;IAEJ;IAEA,MAAM,EAAEC,YAAY,EAAEC,UAAU,EAAE,GAAGC,MAAM,GAAGf,aAAaO;IAE3D,2EAA2E;IAC3E,6EAA6E;IAC7E,wEAAwE;IACxE,sCAAsC;IACtC,uBAAuB;IACvB,uCAAuC;IACvC,yCAAyC;IACzC,oCAAoC;IACpC,6DAA6D;IAC7D,MAAM,EAAES,KAAK,EAAE,GAAGC,mBAAmB,GAAGH;IACxC,MAAMI,UAAUnB,OAAOiB;IAEvB,OAAO;QACL,GAAGD,IAAI;QACPF;QACAC,YAAY;YACV,GAAGG,iBAAiB;YACpBE,cAAcD,QAAQE,OAAO;YAC7BhB;YACAC;YACAC,MAAML,YAAYK;YAClBe,MAAM;QACR;IACF;AACF"}

package/dist/delegateEvent.js

@@ -12,8 +12,8 @@
  */ function createEventHandler(throttle, callbacks) {
     let running = false;
     const runCallbacks = (event)=>()=>{
-            for(let i = 0; i < callbacks.length; i += 1){
-                callbacks[i](event);
+            for (const callback of callbacks){
+                callback(event);
             }
             running = false;
         };
@@ -26,13 +26,13 @@
             return;
         }
         running = true;
-        window.requestAnimationFrame(runCallbacks(event));
+        globalThis.requestAnimationFrame(runCallbacks(event));
     };
 }
 /**
  * Creates a throttled event handler for the provided event type and event
  * target.
- */ function createDelegatedEventHandler(eventType, eventTarget = window, throttle = false, options) {
+ */ function createDelegatedEventHandler(eventType, eventTarget = globalThis.window, throttle = false, options) {
     const callbacks = [];
     const handler = createEventHandler(throttle, callbacks);
     return {
@@ -41,10 +41,10 @@
      * throttled event. If this is the first callback to be added, the throttled
      * event will also be started.
      */ add: (callback)=>{
-            if (!callbacks.length) {
+            if (callbacks.length === 0) {
                 eventTarget.addEventListener(eventType, handler, options);
             }
-            if (callbacks.indexOf(callback) === -1) {
+            if (!callbacks.includes(callback)) {
                 callbacks.push(callback);
             }
         },
@@ -54,9 +54,9 @@
      * throttled event will also be stopped.
      */ remove: (callback)=>{
             const i = callbacks.indexOf(callback);
-            if (i >= 0) {
+            if (i !== -1) {
                 callbacks.splice(i, 1);
-                if (!callbacks.length) {
+                if (callbacks.length === 0) {
                     eventTarget.removeEventListener(eventType, handler, options);
                 }
             }
@@ -87,7 +87,7 @@
  * @returns The delegated event handler that allows you to add or remove
  * `EventListener`s to that event.
  * @internal
- */ export function delegateEvent(eventType, eventTarget = window, throttle = eventType === "resize" || eventType === "scroll", options) {
+ */ export function delegateEvent(eventType, eventTarget = globalThis.window, throttle = eventType === "resize" || eventType === "scroll", options) {
     let index = delegatedEvents.findIndex((event)=>event.type === eventType && event.target === eventTarget && event.options === options && event.throttle === throttle);
     if (index === -1) {
         delegatedEvents.push({

package/dist/delegateEvent.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/delegateEvent.ts"],"sourcesContent":["/** @internal */\nexport type DelegatedEventTarget = Window | Document | HTMLElement;\n\n/**\n * This is a \"shared\" event handler for the provided `eventType`. The event\n * listener will only be created once, but every single callback will be called\n * when the throttled event is triggered. This means that you will need to make\n * sure to remove the provided callback when it is no longer in use.\n *\n * @internal\n */\nexport interface DelegatedEventHandler {\n  /**\n   * Adds the provided callback to the throttled event listener.\n   */\n  add: (callback: EventListener) => void;\n\n  /**\n   * Attempts to remove the provided callback from the throttled event listener.\n   */\n  remove: (callback: EventListener) => void;\n}\n\n/** @internal */\nexport interface DelegableEvent {\n  type: string;\n  target: DelegatedEventTarget;\n  throttle: boolean;\n  handler: DelegatedEventHandler;\n  options?: boolean | AddEventListenerOptions;\n}\n\nconst delegatedEvents: DelegableEvent[] = [];\n\n/**\n * Creates the delegated event handler that will run all the callbacks once an\n * event happens. The callbacks' invocation can also be throttled for event\n * types that trigger rapidly for additional performance.\n *\n * The `<K extends keyof WindowEventMap` is a nice thing I found while looking\n * through the `lib.d.ts` implementation of `addEventListener` that will allow\n * you to get the \"correct\" event type when using the `add` and `remove`\n * functions once you have created this event handler. Otherwise there'd be ts\n * errors trying to do `MouseEvent` or `KeyboardEvent` in your listeners.\n */\nfunction createEventHandler(\n  throttle: boolean,\n  callbacks: readonly EventListener[]\n): (event: WindowEventMap[keyof WindowEventMap]) => void {\n  let running = false;\n  const runCallbacks = (event: WindowEventMap[keyof WindowEventMap]) => () => {\n    for (let i = 0; i < callbacks.length; i += 1) {\n      callbacks[i](event);\n    }\n\n    running = false;\n  };\n\n  return function eventHandler(event) {\n    if (!throttle) {\n      runCallbacks(event)();\n      return;\n    }\n\n    if (running) {\n      return;\n    }\n\n    running = true;\n    window.requestAnimationFrame(runCallbacks(event));\n  };\n}\n\n/**\n * Creates a throttled event handler for the provided event type and event\n * target.\n */\nfunction createDelegatedEventHandler(\n  eventType: string,\n  eventTarget: DelegatedEventTarget = window,\n  throttle = false,\n  options?: boolean | AddEventListenerOptions\n): DelegatedEventHandler {\n  const callbacks: EventListener[] = [];\n  const handler = createEventHandler(throttle, callbacks);\n\n  return {\n    /**\n     * Attempts to add the provided callback to the list of callbacks for the\n     * throttled event. If this is the first callback to be added, the throttled\n     * event will also be started.\n     */\n    add: (callback: EventListener) => {\n      if (!callbacks.length) {\n        eventTarget.addEventListener(eventType, handler, options);\n      }\n\n      if (callbacks.indexOf(callback) === -1) {\n        callbacks.push(callback);\n      }\n    },\n\n    /**\n     * Attempts to remove the provided callback from the list of callbacks for\n     * the throttled event. If this is the last callback that was removed, the\n     * throttled event will also be stopped.\n     */\n    remove: (callback: EventListener) => {\n      const i = callbacks.indexOf(callback);\n      if (i >= 0) {\n        callbacks.splice(i, 1);\n\n        if (!callbacks.length) {\n          eventTarget.removeEventListener(eventType, handler, options);\n        }\n      }\n    },\n  };\n}\n\n/**\n * Creates a delegated event listener using custom events. Most of this code\n * comes from the MDN about resize listeners.\n *\n * This will return an object for adding or removing event handlers for the\n * provided `eventType` since only one base throttled event listener will be\n * created. Each callback that is added will be called with the event each time\n * the event is triggered. This does mean that you will manually need to remove\n * your callback like normal or else it can be called when no longer in use.\n * This also means that it doesn't \"hurt\" to call this function without\n * immediately calling the `add` function since the event won't start until\n * there is at least 1 callback.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/Events/resize#Examples\n * @param eventType - One of the event types that should be used to create a\n * delegated event for. This should be things like resize, click, scroll, etc.\n * @param eventTarget - The target that should have the delegated event handler\n * attached to. This is normally the window, but can be any element as needed.\n * @param throttle - Boolean if the event should be throttled or not. Normally\n * only event types like resize or scroll should be throttled for performance\n * boosts, but anything can be.\n * @returns The delegated event handler that allows you to add or remove\n * `EventListener`s to that event.\n * @internal\n */\nexport function delegateEvent(\n  eventType: string,\n  eventTarget: DelegatedEventTarget = window,\n  throttle: boolean = eventType === \"resize\" || eventType === \"scroll\",\n  options?: boolean | AddEventListenerOptions\n): DelegatedEventHandler {\n  let index = delegatedEvents.findIndex(\n    (event) =>\n      event.type === eventType &&\n      event.target === eventTarget &&\n      event.options === options &&\n      event.throttle === throttle\n  );\n\n  if (index === -1) {\n    delegatedEvents.push({\n      type: eventType,\n      target: eventTarget,\n      options,\n      throttle,\n      handler: createDelegatedEventHandler(\n        eventType,\n        eventTarget,\n        throttle,\n        options\n      ),\n    });\n\n    index = delegatedEvents.length - 1;\n  }\n\n  return delegatedEvents[index].handler;\n}\n"],"names":["delegatedEvents","createEventHandler","throttle","callbacks","running","runCallbacks","event","i","length","eventHandler","window","requestAnimationFrame","createDelegatedEventHandler","eventType","eventTarget","options","handler","add","callback","addEventListener","indexOf","push","remove","splice","removeEventListener","delegateEvent","index","findIndex","type","target"],"mappings":"AAAA,cAAc,GAgCd,MAAMA,kBAAoC,EAAE;AAE5C;;;;;;;;;;CAUC,GACD,SAASC,mBACPC,QAAiB,EACjBC,SAAmC;IAEnC,IAAIC,UAAU;IACd,MAAMC,eAAe,CAACC,QAAgD;YACpE,IAAK,IAAIC,IAAI,GAAGA,IAAIJ,UAAUK,MAAM,EAAED,KAAK,EAAG;gBAC5CJ,SAAS,CAACI,EAAE,CAACD;YACf;YAEAF,UAAU;QACZ;IAEA,OAAO,SAASK,aAAaH,KAAK;QAChC,IAAI,CAACJ,UAAU;YACbG,aAAaC;YACb;QACF;QAEA,IAAIF,SAAS;YACX;QACF;QAEAA,UAAU;QACVM,OAAOC,qBAAqB,CAACN,aAAaC;IAC5C;AACF;AAEA;;;CAGC,GACD,SAASM,4BACPC,SAAiB,EACjBC,cAAoCJ,MAAM,EAC1CR,WAAW,KAAK,EAChBa,OAA2C;IAE3C,MAAMZ,YAA6B,EAAE;IACrC,MAAMa,UAAUf,mBAAmBC,UAAUC;IAE7C,OAAO;QACL;;;;KAIC,GACDc,KAAK,CAACC;YACJ,IAAI,CAACf,UAAUK,MAAM,EAAE;gBACrBM,YAAYK,gBAAgB,CAACN,WAAWG,SAASD;YACnD;YAEA,IAAIZ,UAAUiB,OAAO,CAACF,cAAc,CAAC,GAAG;gBACtCf,UAAUkB,IAAI,CAACH;YACjB;QACF;QAEA;;;;KAIC,GACDI,QAAQ,CAACJ;YACP,MAAMX,IAAIJ,UAAUiB,OAAO,CAACF;YAC5B,IAAIX,KAAK,GAAG;gBACVJ,UAAUoB,MAAM,CAAChB,GAAG;gBAEpB,IAAI,CAACJ,UAAUK,MAAM,EAAE;oBACrBM,YAAYU,mBAAmB,CAACX,WAAWG,SAASD;gBACtD;YACF;QACF;IACF;AACF;AAEA;;;;;;;;;;;;;;;;;;;;;;;;CAwBC,GACD,OAAO,SAASU,cACdZ,SAAiB,EACjBC,cAAoCJ,MAAM,EAC1CR,WAAoBW,cAAc,YAAYA,cAAc,QAAQ,EACpEE,OAA2C;IAE3C,IAAIW,QAAQ1B,gBAAgB2B,SAAS,CACnC,CAACrB,QACCA,MAAMsB,IAAI,KAAKf,aACfP,MAAMuB,MAAM,KAAKf,eACjBR,MAAMS,OAAO,KAAKA,WAClBT,MAAMJ,QAAQ,KAAKA;IAGvB,IAAIwB,UAAU,CAAC,GAAG;QAChB1B,gBAAgBqB,IAAI,CAAC;YACnBO,MAAMf;YACNgB,QAAQf;YACRC;YACAb;YACAc,SAASJ,4BACPC,WACAC,aACAZ,UACAa;QAEJ;QAEAW,QAAQ1B,gBAAgBQ,MAAM,GAAG;IACnC;IAEA,OAAOR,eAAe,CAAC0B,MAAM,CAACV,OAAO;AACvC"}
+{"version":3,"sources":["../src/delegateEvent.ts"],"sourcesContent":["/** @internal */\nexport type DelegatedEventTarget = Window | Document | HTMLElement;\n\n/**\n * This is a \"shared\" event handler for the provided `eventType`. The event\n * listener will only be created once, but every single callback will be called\n * when the throttled event is triggered. This means that you will need to make\n * sure to remove the provided callback when it is no longer in use.\n *\n * @internal\n */\nexport interface DelegatedEventHandler {\n  /**\n   * Adds the provided callback to the throttled event listener.\n   */\n  add: (callback: EventListener) => void;\n\n  /**\n   * Attempts to remove the provided callback from the throttled event listener.\n   */\n  remove: (callback: EventListener) => void;\n}\n\n/** @internal */\nexport interface DelegableEvent {\n  type: string;\n  target: DelegatedEventTarget;\n  throttle: boolean;\n  handler: DelegatedEventHandler;\n  options?: boolean | AddEventListenerOptions;\n}\n\nconst delegatedEvents: DelegableEvent[] = [];\n\n/**\n * Creates the delegated event handler that will run all the callbacks once an\n * event happens. The callbacks' invocation can also be throttled for event\n * types that trigger rapidly for additional performance.\n *\n * The `<K extends keyof WindowEventMap` is a nice thing I found while looking\n * through the `lib.d.ts` implementation of `addEventListener` that will allow\n * you to get the \"correct\" event type when using the `add` and `remove`\n * functions once you have created this event handler. Otherwise there'd be ts\n * errors trying to do `MouseEvent` or `KeyboardEvent` in your listeners.\n */\nfunction createEventHandler(\n  throttle: boolean,\n  callbacks: readonly EventListener[]\n): (event: WindowEventMap[keyof WindowEventMap]) => void {\n  let running = false;\n  const runCallbacks = (event: WindowEventMap[keyof WindowEventMap]) => () => {\n    for (const callback of callbacks) {\n      callback(event);\n    }\n\n    running = false;\n  };\n\n  return function eventHandler(event) {\n    if (!throttle) {\n      runCallbacks(event)();\n      return;\n    }\n\n    if (running) {\n      return;\n    }\n\n    running = true;\n    globalThis.requestAnimationFrame(runCallbacks(event));\n  };\n}\n\n/**\n * Creates a throttled event handler for the provided event type and event\n * target.\n */\nfunction createDelegatedEventHandler(\n  eventType: string,\n  eventTarget: DelegatedEventTarget = globalThis.window,\n  throttle = false,\n  options?: boolean | AddEventListenerOptions\n): DelegatedEventHandler {\n  const callbacks: EventListener[] = [];\n  const handler = createEventHandler(throttle, callbacks);\n\n  return {\n    /**\n     * Attempts to add the provided callback to the list of callbacks for the\n     * throttled event. If this is the first callback to be added, the throttled\n     * event will also be started.\n     */\n    add: (callback: EventListener) => {\n      if (callbacks.length === 0) {\n        eventTarget.addEventListener(eventType, handler, options);\n      }\n\n      if (!callbacks.includes(callback)) {\n        callbacks.push(callback);\n      }\n    },\n\n    /**\n     * Attempts to remove the provided callback from the list of callbacks for\n     * the throttled event. If this is the last callback that was removed, the\n     * throttled event will also be stopped.\n     */\n    remove: (callback: EventListener) => {\n      const i = callbacks.indexOf(callback);\n      if (i !== -1) {\n        callbacks.splice(i, 1);\n\n        if (callbacks.length === 0) {\n          eventTarget.removeEventListener(eventType, handler, options);\n        }\n      }\n    },\n  };\n}\n\n/**\n * Creates a delegated event listener using custom events. Most of this code\n * comes from the MDN about resize listeners.\n *\n * This will return an object for adding or removing event handlers for the\n * provided `eventType` since only one base throttled event listener will be\n * created. Each callback that is added will be called with the event each time\n * the event is triggered. This does mean that you will manually need to remove\n * your callback like normal or else it can be called when no longer in use.\n * This also means that it doesn't \"hurt\" to call this function without\n * immediately calling the `add` function since the event won't start until\n * there is at least 1 callback.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/Events/resize#Examples\n * @param eventType - One of the event types that should be used to create a\n * delegated event for. This should be things like resize, click, scroll, etc.\n * @param eventTarget - The target that should have the delegated event handler\n * attached to. This is normally the window, but can be any element as needed.\n * @param throttle - Boolean if the event should be throttled or not. Normally\n * only event types like resize or scroll should be throttled for performance\n * boosts, but anything can be.\n * @returns The delegated event handler that allows you to add or remove\n * `EventListener`s to that event.\n * @internal\n */\nexport function delegateEvent(\n  eventType: string,\n  eventTarget: DelegatedEventTarget = globalThis.window,\n  throttle: boolean = eventType === \"resize\" || eventType === \"scroll\",\n  options?: boolean | AddEventListenerOptions\n): DelegatedEventHandler {\n  let index = delegatedEvents.findIndex(\n    (event) =>\n      event.type === eventType &&\n      event.target === eventTarget &&\n      event.options === options &&\n      event.throttle === throttle\n  );\n\n  if (index === -1) {\n    delegatedEvents.push({\n      type: eventType,\n      target: eventTarget,\n      options,\n      throttle,\n      handler: createDelegatedEventHandler(\n        eventType,\n        eventTarget,\n        throttle,\n        options\n      ),\n    });\n\n    index = delegatedEvents.length - 1;\n  }\n\n  return delegatedEvents[index].handler;\n}\n"],"names":["delegatedEvents","createEventHandler","throttle","callbacks","running","runCallbacks","event","callback","eventHandler","globalThis","requestAnimationFrame","createDelegatedEventHandler","eventType","eventTarget","window","options","handler","add","length","addEventListener","includes","push","remove","i","indexOf","splice","removeEventListener","delegateEvent","index","findIndex","type","target"],"mappings":"AAAA,cAAc,GAgCd,MAAMA,kBAAoC,EAAE;AAE5C;;;;;;;;;;CAUC,GACD,SAASC,mBACPC,QAAiB,EACjBC,SAAmC;IAEnC,IAAIC,UAAU;IACd,MAAMC,eAAe,CAACC,QAAgD;YACpE,KAAK,MAAMC,YAAYJ,UAAW;gBAChCI,SAASD;YACX;YAEAF,UAAU;QACZ;IAEA,OAAO,SAASI,aAAaF,KAAK;QAChC,IAAI,CAACJ,UAAU;YACbG,aAAaC;YACb;QACF;QAEA,IAAIF,SAAS;YACX;QACF;QAEAA,UAAU;QACVK,WAAWC,qBAAqB,CAACL,aAAaC;IAChD;AACF;AAEA;;;CAGC,GACD,SAASK,4BACPC,SAAiB,EACjBC,cAAoCJ,WAAWK,MAAM,EACrDZ,WAAW,KAAK,EAChBa,OAA2C;IAE3C,MAAMZ,YAA6B,EAAE;IACrC,MAAMa,UAAUf,mBAAmBC,UAAUC;IAE7C,OAAO;QACL;;;;KAIC,GACDc,KAAK,CAACV;YACJ,IAAIJ,UAAUe,MAAM,KAAK,GAAG;gBAC1BL,YAAYM,gBAAgB,CAACP,WAAWI,SAASD;YACnD;YAEA,IAAI,CAACZ,UAAUiB,QAAQ,CAACb,WAAW;gBACjCJ,UAAUkB,IAAI,CAACd;YACjB;QACF;QAEA;;;;KAIC,GACDe,QAAQ,CAACf;YACP,MAAMgB,IAAIpB,UAAUqB,OAAO,CAACjB;YAC5B,IAAIgB,MAAM,CAAC,GAAG;gBACZpB,UAAUsB,MAAM,CAACF,GAAG;gBAEpB,IAAIpB,UAAUe,MAAM,KAAK,GAAG;oBAC1BL,YAAYa,mBAAmB,CAACd,WAAWI,SAASD;gBACtD;YACF;QACF;IACF;AACF;AAEA;;;;;;;;;;;;;;;;;;;;;;;;CAwBC,GACD,OAAO,SAASY,cACdf,SAAiB,EACjBC,cAAoCJ,WAAWK,MAAM,EACrDZ,WAAoBU,cAAc,YAAYA,cAAc,QAAQ,EACpEG,OAA2C;IAE3C,IAAIa,QAAQ5B,gBAAgB6B,SAAS,CACnC,CAACvB,QACCA,MAAMwB,IAAI,KAAKlB,aACfN,MAAMyB,MAAM,KAAKlB,eACjBP,MAAMS,OAAO,KAAKA,WAClBT,MAAMJ,QAAQ,KAAKA;IAGvB,IAAI0B,UAAU,CAAC,GAAG;QAChB5B,gBAAgBqB,IAAI,CAAC;YACnBS,MAAMlB;YACNmB,QAAQlB;YACRE;YACAb;YACAc,SAASL,4BACPC,WACAC,aACAX,UACAa;QAEJ;QAEAa,QAAQ5B,gBAAgBkB,MAAM,GAAG;IACnC;IAEA,OAAOlB,eAAe,CAAC4B,MAAM,CAACZ,OAAO;AACvC"}

package/dist/dialog/_dialog.scss

@@ -87,18 +87,18 @@ $z-index: utils.$temporary-element-z-index !default;
 
 /// The default background color for a dialog.
 /// @type Color
+// prettier-ignore
 $background-color: if(
-  theme.$disable-dark-elevation,
-  theme.theme-get-var(surface-color),
-  null
+  sass(theme.$disable-dark-elevation): theme.theme-get-var(surface-color);
+  else: null
 ) !default;
 
 /// The default text color for a dialog.
 /// @type Color
+// prettier-ignore
 $color: if(
-  theme.$disable-dark-elevation,
-  theme.theme-get-var(text-primary-color),
-  null
+  sass(theme.$disable-dark-elevation): theme.theme-get-var(text-primary-color);
+  else: null,
 ) !default;
 
 /// The `min-width` to apply to all `Dialog`s.

package/dist/divider/_divider.scss

@@ -125,8 +125,12 @@ $variables: (
 /// @param {String} position [null] - This should be one of `left`, `right`,
 /// `top`, `bottom`
 @mixin border-style($position: null) {
-  $property: if(not $position, border, "border-#{$position}");
-  $var-name: if(not $position, size, border-size);
+  $property: border;
+  $var-name: size;
+  @if $position {
+    $property: "border-#{$position}";
+    $var-name: border-size;
+  }
 
   #{$property}: get-var($var-name) solid get-var(color);
 }

package/dist/draggable/useDraggable.js

@@ -138,11 +138,11 @@ const noop = ()=>{
         const passive = isTouch ? {
             passive: false
         } : undefined;
-        window.addEventListener(updateKey, updatePosition, passive);
-        window.addEventListener(stopKey, stopDragging);
+        globalThis.addEventListener(updateKey, updatePosition, passive);
+        globalThis.addEventListener(stopKey, stopDragging);
         return ()=>{
-            window.removeEventListener(updateKey, updatePosition);
-            window.removeEventListener(stopKey, stopDragging);
+            globalThis.removeEventListener(updateKey, updatePosition);
+            globalThis.removeEventListener(stopKey, stopDragging);
         };
     }, [
         dragging,