@react-md/core 6.0.2 → 6.2.0

package/dist/segmented-button/_segmented-button.scss

@@ -5,6 +5,7 @@
 @use "sass:map";
 @use "sass:color";
 @use "../utils";
+@use "../spacing";
 @use "../icon/icon";
 @use "../interaction/interaction";
 @use "../typography/typography";
@@ -69,7 +70,7 @@ $dark-theme-selected-color: a11y.contrast-color(
 
 /// The default gap to apply between the elements in the `SegmentedButton`.
 /// @type Number
-$gap: icon.$spacing !default;
+$gap: spacing.get-var(sm) !default;
 
 /// The default border-radius to apply `SegmentedButton` that appear at the
 /// edges.
@@ -86,11 +87,11 @@ $min-width: 3rem !default;
 
 /// The default horizontal padding for a `SegmentedButton`.
 /// @type Number
-$horizontal-padding: 0.75rem !default;
+$horizontal-padding: calc(spacing.get-var(sm) * 1.5) !default;
 
 /// The default vertical padding for a `SegmentedButton`.
 /// @type Number
-$vertical-padding: 0 !default;
+$vertical-padding: spacing.get-var(none) !default;
 
 /// The default outline width for a `SegmentedButton`.
 /// @type Number
@@ -129,6 +130,9 @@ $typography-styles: typography.$button-styles !default;
 /// `get-var`, `set-var`, and `use-var` utils.
 /// @type List
 $variables: (
+  border-radius,
+  min-height,
+  min-width,
   outline-width,
   outline-color,
   color,
@@ -212,6 +216,7 @@ $variables: (
 /// Conditionally applies the css variables based on feature flags
 @mixin variables {
   @if not $disable-everything {
+    @include set-var(border-radius, $border-radius);
     @include set-var(outline-width, $outline-width);
     @include set-var(outline-color, $outline-color);
     @include set-var(color, currentcolor);
@@ -242,6 +247,8 @@ $variables: (
         @include icon.set-var(color, currentcolor);
         @include icon.set-var(size, 1.125rem);
         @include utils.map-to-styles($typography-styles);
+        @include use-var(min-height, $fallback: $min-height);
+        @include use-var(min-width, $fallback: $min-width);
 
         align-items: center;
         background-color: transparent;
@@ -250,30 +257,30 @@ $variables: (
         display: inline-flex;
         gap: $gap;
         justify-content: center;
-        min-height: $min-height;
-        min-width: $min-width;
         padding: $vertical-padding $horizontal-padding;
 
         &:first-child {
-          border-bottom-left-radius: $border-radius;
-          border-top-left-radius: $border-radius;
+          @include use-var(border-bottom-left-radius, border-radius);
+          @include use-var(border-top-left-radius, border-radius);
 
           @include utils.rtl {
+            @include use-var(border-bottom-right-radius, border-radius);
+            @include use-var(border-top-right-radius, border-radius);
+
             border-bottom-left-radius: 0;
-            border-bottom-right-radius: $border-radius;
             border-top-left-radius: 0;
-            border-top-right-radius: $border-radius;
           }
         }
 
         &:last-child {
-          border-bottom-right-radius: $border-radius;
-          border-top-right-radius: $border-radius;
+          @include use-var(border-bottom-right-radius, border-radius);
+          @include use-var(border-top-right-radius, border-radius);
 
           @include utils.rtl {
-            border-bottom-left-radius: $border-radius;
+            @include use-var(border-bottom-left-radius, border-radius);
+            @include use-var(border-top-left-radius, border-radius);
+
             border-bottom-right-radius: 0;
-            border-top-left-radius: $border-radius;
             border-top-right-radius: 0;
           }
         }

package/dist/sheet/_sheet.scss

@@ -4,6 +4,7 @@
 
 @use "sass:map";
 @use "../utils";
+@use "../spacing";
 @use "../box-shadows";
 @use "../media-queries/media-queries";
 @use "../transition/transition";
@@ -72,7 +73,7 @@ $static-width: 16rem !default;
 /// @see $touch-width
 /// @see $touch-max-height
 /// @type Number
-$touch-margin: 3.5rem !default;
+$touch-margin: calc(spacing.get-var(md) * 3.5) !default;
 
 /// The default width for a `Sheet` on touch/phone devices.
 /// @type Number

package/dist/snackbar/Toast.d.ts

@@ -71,7 +71,7 @@ export interface ConfigurableToastProps extends HTMLAttributes<HTMLDivElement>,
      * Any additional props that should be provided to the `<div>` that surrounds
      * the toast `children`.
      */
-    contentProps?: PropsWithRef<ToastContentProps, HTMLDivElement>;
+    contentProps?: PropsWithRef<ToastContentProps>;
     /**
      * Set this to `true` if the `children` for the toast should no longer be
      * wrapped in an additional `<div>` that applies some toast layout styles.

package/dist/snackbar/Toast.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/snackbar/Toast.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  type AriaRole,\n  type HTMLAttributes,\n  type ReactElement,\n  type ReactNode,\n  forwardRef,\n  isValidElement,\n} from \"react\";\n\nimport { type ButtonProps } from \"../button/Button.js\";\nimport { type BackgroundColor } from \"../cssUtils.js\";\nimport {\n  type CSSTransitionClassNames,\n  type TransitionCallbacks,\n  type TransitionTimeout,\n} from \"../transition/types.js\";\nimport { useScaleTransition } from \"../transition/useScaleTransition.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { ToastActionButton } from \"./ToastActionButton.js\";\nimport { ToastCloseButton } from \"./ToastCloseButton.js\";\nimport { ToastContent, type ToastContentProps } from \"./ToastContent.js\";\nimport { toast } from \"./toastStyles.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-toast-color\"?: string;\n    \"--rmd-toast-background-color\"?: string;\n    \"--rmd-toast-offset\"?: string | number;\n  }\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ConfigurableToastProps\n  extends HTMLAttributes<HTMLDivElement>,\n    TransitionCallbacks {\n  /**\n   * Note: this default value will only be generated in the `Toast` component.\n   *\n   * @defaultValue `\"toast-\" + useId()`\n   */\n  id?: string;\n\n  /**\n   * Note: This is set while creating the toast.\n   *\n   * @defaultValue `visibleTime === null ? \"alert\" : \"status\"`\n   */\n  role?: AriaRole;\n\n  /**\n   * @defaultValue `\"surface\"`\n   */\n  theme?: BackgroundColor;\n\n  /**\n   * Set this to `true` to stack the content above the {@link action}. It is not\n   * recommended to enable this prop if the {@link closeButton} is enabled.\n   *\n   * @defaultValue `false`\n   */\n  stacked?: boolean;\n\n  /**\n   * If this is not provided, a `ResizeObserver` will be used to determine if\n   * there are multiple lines of content.\n   */\n  multiline?: boolean;\n\n  /**\n   * When this is a string or React element, it will be rendered as the\n   * `children` within a `Button`\n   */\n  action?: ButtonProps | ReactElement | string;\n\n  /**\n   * This can be used to replace the custom action button behavior.\n   */\n  actionButton?: ReactNode;\n\n  /**\n   * @defaultValue `getIcon(\"close\")`\n   */\n  closeIcon?: ReactNode;\n\n  /**\n   * Set this to `true` if a close button should be rendered to the right of the\n   * `children`.\n   *\n   * @defaultValue `!!closeButtonProps`\n   */\n  closeButton?: boolean;\n\n  /**\n   * Use this prop to override most of the close button behavior. The\n   */\n  closeButtonProps?: ButtonProps;\n\n  /**\n   * Any additional props that should be provided to the `<div>` that surrounds\n   * the toast `children`.\n   */\n  contentProps?: PropsWithRef<ToastContentProps, HTMLDivElement>;\n\n  /**\n   * Set this to `true` if the `children` for the toast should no longer be\n   * wrapped in an additional `<div>` that applies some toast layout styles.\n   * This should normally only be used for custom `Toast` implementations.\n   *\n   * @see the `Snackbar`'s `renderToast` prop for an example.\n   */\n  disableToastContent?: boolean;\n\n  /**\n   * The toast's transition timeout for entering and exiting. This is **not**\n   * how long the toast should remain visible.\n   *\n   * @defaultValue `SCALE_TIMEOUT`\n   */\n  timeout?: TransitionTimeout;\n\n  /**\n   * The toast's transition class names for entering and exiting.\n   *\n   * @defaultValue `SCALE_CLASSNAMES`\n   */\n  classNames?: CSSTransitionClassNames;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ToastProps extends ConfigurableToastProps {\n  paused?: boolean;\n  visible: boolean;\n}\n\n/**\n * **Client Component**\n *\n * This component is just used for toast styling and does not implement any of\n * the visibility behavior.\n *\n * @see {@link https://react-md.dev/components/snackbar | Snackbar Demos}\n * @since 6.0.0\n */\nexport const Toast = forwardRef<HTMLDivElement, ToastProps>(\n  function Toast(props, ref) {\n    const {\n      id: propId,\n      className,\n      timeout,\n      classNames,\n      theme = \"surface\",\n      action: propAction,\n      actionButton: propActionButton,\n      paused,\n      visible,\n      closeIcon: propCloseIcon,\n      closeButtonProps,\n      closeButton = !!closeButtonProps,\n      contentProps,\n      disableToastContent,\n      stacked,\n      multiline,\n      onEnter,\n      onEntering,\n      onEntered,\n      onExit,\n      onExiting,\n      onExited,\n      children,\n      ...remaining\n    } = props;\n    const id = useEnsuredId(propId, \"toast\");\n\n    let actionButton = propActionButton;\n    if (propAction) {\n      let overrides: ButtonProps = {};\n      let buttonChildren: ReactNode;\n      // have to use `any` to correctly filter out all react elements\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      if (isValidElement<any>(propAction) || typeof propAction !== \"object\") {\n        buttonChildren = propAction;\n      } else {\n        ({ children: buttonChildren, ...overrides } = propAction);\n      }\n\n      actionButton = (\n        <ToastActionButton\n          theme={theme === \"surface\" ? \"secondary\" : \"clear\"}\n          reordered={stacked && closeButton}\n          {...overrides}\n        >\n          {buttonChildren}\n        </ToastActionButton>\n      );\n    }\n\n    let closeIcon = propCloseIcon;\n    if (typeof closeButtonProps?.children !== \"undefined\") {\n      closeIcon = closeButtonProps.children;\n    }\n\n    const action = !!actionButton;\n    const reordered = stacked && action && closeButton;\n    const { elementProps, rendered } = useScaleTransition({\n      appear: true,\n      nodeRef: ref,\n      className: toast({\n        className,\n        theme,\n        action,\n        paused,\n        stacked,\n        reordered,\n        closeButton,\n      }),\n      timeout,\n      classNames,\n      onEnter,\n      onEntering,\n      onEntered,\n      onExit,\n      onExiting,\n      onExited,\n      temporary: true,\n      transitionIn: visible,\n      exitedHidden: true,\n    });\n\n    // this might get rid of the weird popping-back-in for a split second\n    // that sometimes happens on mobile firefox\n    if (!rendered) {\n      return null;\n    }\n\n    return (\n      <div {...remaining} {...elementProps} id={id}>\n        <ToastContent\n          action={action}\n          stacked={stacked}\n          multiline={multiline}\n          closeButton={closeButton}\n          disableWrapper={disableToastContent}\n          {...contentProps}\n        >\n          {children}\n        </ToastContent>\n        {actionButton}\n        {closeButton && (\n          <ToastCloseButton reordered={reordered} {...closeButtonProps}>\n            {closeIcon}\n          </ToastCloseButton>\n        )}\n      </div>\n    );\n  }\n);\n"],"names":["forwardRef","isValidElement","useScaleTransition","useEnsuredId","ToastActionButton","ToastCloseButton","ToastContent","toast","Toast","props","ref","id","propId","className","timeout","classNames","theme","action","propAction","actionButton","propActionButton","paused","visible","closeIcon","propCloseIcon","closeButtonProps","closeButton","contentProps","disableToastContent","stacked","multiline","onEnter","onEntering","onEntered","onExit","onExiting","onExited","children","remaining","overrides","buttonChildren","reordered","elementProps","rendered","appear","nodeRef","temporary","transitionIn","exitedHidden","div","disableWrapper"],"mappings":"AAAA;;AAEA,SAKEA,UAAU,EACVC,cAAc,QACT,QAAQ;AASf,SAASC,kBAAkB,QAAQ,sCAAsC;AAEzE,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,iBAAiB,QAAQ,yBAAyB;AAC3D,SAASC,gBAAgB,QAAQ,wBAAwB;AACzD,SAASC,YAAY,QAAgC,oBAAoB;AACzE,SAASC,KAAK,QAAQ,mBAAmB;AAqHzC;;;;;;;;CAQC,GACD,OAAO,MAAMC,sBAAQR,WACnB,SAASQ,MAAMC,KAAK,EAAEC,GAAG;IACvB,MAAM,EACJC,IAAIC,MAAM,EACVC,SAAS,EACTC,OAAO,EACPC,UAAU,EACVC,QAAQ,SAAS,EACjBC,QAAQC,UAAU,EAClBC,cAAcC,gBAAgB,EAC9BC,MAAM,EACNC,OAAO,EACPC,WAAWC,aAAa,EACxBC,gBAAgB,EAChBC,cAAc,CAAC,CAACD,gBAAgB,EAChCE,YAAY,EACZC,mBAAmB,EACnBC,OAAO,EACPC,SAAS,EACTC,OAAO,EACPC,UAAU,EACVC,SAAS,EACTC,MAAM,EACNC,SAAS,EACTC,QAAQ,EACRC,QAAQ,EACR,GAAGC,WACJ,GAAG7B;IACJ,MAAME,KAAKR,aAAaS,QAAQ;IAEhC,IAAIO,eAAeC;IACnB,IAAIF,YAAY;QACd,IAAIqB,YAAyB,CAAC;QAC9B,IAAIC;QACJ,+DAA+D;QAC/D,8DAA8D;QAC9D,kBAAIvC,eAAoBiB,eAAe,OAAOA,eAAe,UAAU;YACrEsB,iBAAiBtB;QACnB,OAAO;YACJ,CAAA,EAAEmB,UAAUG,cAAc,EAAE,GAAGD,WAAW,GAAGrB,UAAS;QACzD;QAEAC,6BACE,KAACf;YACCY,OAAOA,UAAU,YAAY,cAAc;YAC3CyB,WAAWZ,WAAWH;YACrB,GAAGa,SAAS;sBAEZC;;IAGP;IAEA,IAAIjB,YAAYC;IAChB,IAAI,OAAOC,kBAAkBY,aAAa,aAAa;QACrDd,YAAYE,iBAAiBY,QAAQ;IACvC;IAEA,MAAMpB,SAAS,CAAC,CAACE;IACjB,MAAMsB,YAAYZ,WAAWZ,UAAUS;IACvC,MAAM,EAAEgB,YAAY,EAAEC,QAAQ,EAAE,GAAGzC,mBAAmB;QACpD0C,QAAQ;QACRC,SAASnC;QACTG,WAAWN,MAAM;YACfM;YACAG;YACAC;YACAI;YACAQ;YACAY;YACAf;QACF;QACAZ;QACAC;QACAgB;QACAC;QACAC;QACAC;QACAC;QACAC;QACAU,WAAW;QACXC,cAAczB;QACd0B,cAAc;IAChB;IAEA,qEAAqE;IACrE,2CAA2C;IAC3C,IAAI,CAACL,UAAU;QACb,OAAO;IACT;IAEA,qBACE,MAACM;QAAK,GAAGX,SAAS;QAAG,GAAGI,YAAY;QAAE/B,IAAIA;;0BACxC,KAACL;gBACCW,QAAQA;gBACRY,SAASA;gBACTC,WAAWA;gBACXJ,aAAaA;gBACbwB,gBAAgBtB;gBACf,GAAGD,YAAY;0BAEfU;;YAEFlB;YACAO,6BACC,KAACrB;gBAAiBoC,WAAWA;gBAAY,GAAGhB,gBAAgB;0BACzDF;;;;AAKX,GACA"}
+{"version":3,"sources":["../../src/snackbar/Toast.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  type AriaRole,\n  type HTMLAttributes,\n  type ReactElement,\n  type ReactNode,\n  forwardRef,\n  isValidElement,\n} from \"react\";\n\nimport { type ButtonProps } from \"../button/Button.js\";\nimport { type BackgroundColor } from \"../cssUtils.js\";\nimport {\n  type CSSTransitionClassNames,\n  type TransitionCallbacks,\n  type TransitionTimeout,\n} from \"../transition/types.js\";\nimport { useScaleTransition } from \"../transition/useScaleTransition.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { ToastActionButton } from \"./ToastActionButton.js\";\nimport { ToastCloseButton } from \"./ToastCloseButton.js\";\nimport { ToastContent, type ToastContentProps } from \"./ToastContent.js\";\nimport { toast } from \"./toastStyles.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-toast-color\"?: string;\n    \"--rmd-toast-background-color\"?: string;\n    \"--rmd-toast-offset\"?: string | number;\n  }\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ConfigurableToastProps\n  extends HTMLAttributes<HTMLDivElement>,\n    TransitionCallbacks {\n  /**\n   * Note: this default value will only be generated in the `Toast` component.\n   *\n   * @defaultValue `\"toast-\" + useId()`\n   */\n  id?: string;\n\n  /**\n   * Note: This is set while creating the toast.\n   *\n   * @defaultValue `visibleTime === null ? \"alert\" : \"status\"`\n   */\n  role?: AriaRole;\n\n  /**\n   * @defaultValue `\"surface\"`\n   */\n  theme?: BackgroundColor;\n\n  /**\n   * Set this to `true` to stack the content above the {@link action}. It is not\n   * recommended to enable this prop if the {@link closeButton} is enabled.\n   *\n   * @defaultValue `false`\n   */\n  stacked?: boolean;\n\n  /**\n   * If this is not provided, a `ResizeObserver` will be used to determine if\n   * there are multiple lines of content.\n   */\n  multiline?: boolean;\n\n  /**\n   * When this is a string or React element, it will be rendered as the\n   * `children` within a `Button`\n   */\n  action?: ButtonProps | ReactElement | string;\n\n  /**\n   * This can be used to replace the custom action button behavior.\n   */\n  actionButton?: ReactNode;\n\n  /**\n   * @defaultValue `getIcon(\"close\")`\n   */\n  closeIcon?: ReactNode;\n\n  /**\n   * Set this to `true` if a close button should be rendered to the right of the\n   * `children`.\n   *\n   * @defaultValue `!!closeButtonProps`\n   */\n  closeButton?: boolean;\n\n  /**\n   * Use this prop to override most of the close button behavior. The\n   */\n  closeButtonProps?: ButtonProps;\n\n  /**\n   * Any additional props that should be provided to the `<div>` that surrounds\n   * the toast `children`.\n   */\n  contentProps?: PropsWithRef<ToastContentProps>;\n\n  /**\n   * Set this to `true` if the `children` for the toast should no longer be\n   * wrapped in an additional `<div>` that applies some toast layout styles.\n   * This should normally only be used for custom `Toast` implementations.\n   *\n   * @see the `Snackbar`'s `renderToast` prop for an example.\n   */\n  disableToastContent?: boolean;\n\n  /**\n   * The toast's transition timeout for entering and exiting. This is **not**\n   * how long the toast should remain visible.\n   *\n   * @defaultValue `SCALE_TIMEOUT`\n   */\n  timeout?: TransitionTimeout;\n\n  /**\n   * The toast's transition class names for entering and exiting.\n   *\n   * @defaultValue `SCALE_CLASSNAMES`\n   */\n  classNames?: CSSTransitionClassNames;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ToastProps extends ConfigurableToastProps {\n  paused?: boolean;\n  visible: boolean;\n}\n\n/**\n * **Client Component**\n *\n * This component is just used for toast styling and does not implement any of\n * the visibility behavior.\n *\n * @see {@link https://react-md.dev/components/snackbar | Snackbar Demos}\n * @since 6.0.0\n */\nexport const Toast = forwardRef<HTMLDivElement, ToastProps>(\n  function Toast(props, ref) {\n    const {\n      id: propId,\n      className,\n      timeout,\n      classNames,\n      theme = \"surface\",\n      action: propAction,\n      actionButton: propActionButton,\n      paused,\n      visible,\n      closeIcon: propCloseIcon,\n      closeButtonProps,\n      closeButton = !!closeButtonProps,\n      contentProps,\n      disableToastContent,\n      stacked,\n      multiline,\n      onEnter,\n      onEntering,\n      onEntered,\n      onExit,\n      onExiting,\n      onExited,\n      children,\n      ...remaining\n    } = props;\n    const id = useEnsuredId(propId, \"toast\");\n\n    let actionButton = propActionButton;\n    if (propAction) {\n      let overrides: ButtonProps = {};\n      let buttonChildren: ReactNode;\n      // have to use `any` to correctly filter out all react elements\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      if (isValidElement<any>(propAction) || typeof propAction !== \"object\") {\n        buttonChildren = propAction;\n      } else {\n        ({ children: buttonChildren, ...overrides } = propAction);\n      }\n\n      actionButton = (\n        <ToastActionButton\n          theme={theme === \"surface\" ? \"secondary\" : \"clear\"}\n          reordered={stacked && closeButton}\n          {...overrides}\n        >\n          {buttonChildren}\n        </ToastActionButton>\n      );\n    }\n\n    let closeIcon = propCloseIcon;\n    if (typeof closeButtonProps?.children !== \"undefined\") {\n      closeIcon = closeButtonProps.children;\n    }\n\n    const action = !!actionButton;\n    const reordered = stacked && action && closeButton;\n    const { elementProps, rendered } = useScaleTransition({\n      appear: true,\n      nodeRef: ref,\n      className: toast({\n        className,\n        theme,\n        action,\n        paused,\n        stacked,\n        reordered,\n        closeButton,\n      }),\n      timeout,\n      classNames,\n      onEnter,\n      onEntering,\n      onEntered,\n      onExit,\n      onExiting,\n      onExited,\n      temporary: true,\n      transitionIn: visible,\n      exitedHidden: true,\n    });\n\n    // this might get rid of the weird popping-back-in for a split second\n    // that sometimes happens on mobile firefox\n    if (!rendered) {\n      return null;\n    }\n\n    return (\n      <div {...remaining} {...elementProps} id={id}>\n        <ToastContent\n          action={action}\n          stacked={stacked}\n          multiline={multiline}\n          closeButton={closeButton}\n          disableWrapper={disableToastContent}\n          {...contentProps}\n        >\n          {children}\n        </ToastContent>\n        {actionButton}\n        {closeButton && (\n          <ToastCloseButton reordered={reordered} {...closeButtonProps}>\n            {closeIcon}\n          </ToastCloseButton>\n        )}\n      </div>\n    );\n  }\n);\n"],"names":["forwardRef","isValidElement","useScaleTransition","useEnsuredId","ToastActionButton","ToastCloseButton","ToastContent","toast","Toast","props","ref","id","propId","className","timeout","classNames","theme","action","propAction","actionButton","propActionButton","paused","visible","closeIcon","propCloseIcon","closeButtonProps","closeButton","contentProps","disableToastContent","stacked","multiline","onEnter","onEntering","onEntered","onExit","onExiting","onExited","children","remaining","overrides","buttonChildren","reordered","elementProps","rendered","appear","nodeRef","temporary","transitionIn","exitedHidden","div","disableWrapper"],"mappings":"AAAA;;AAEA,SAKEA,UAAU,EACVC,cAAc,QACT,QAAQ;AASf,SAASC,kBAAkB,QAAQ,sCAAsC;AAEzE,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,iBAAiB,QAAQ,yBAAyB;AAC3D,SAASC,gBAAgB,QAAQ,wBAAwB;AACzD,SAASC,YAAY,QAAgC,oBAAoB;AACzE,SAASC,KAAK,QAAQ,mBAAmB;AAqHzC;;;;;;;;CAQC,GACD,OAAO,MAAMC,sBAAQR,WACnB,SAASQ,MAAMC,KAAK,EAAEC,GAAG;IACvB,MAAM,EACJC,IAAIC,MAAM,EACVC,SAAS,EACTC,OAAO,EACPC,UAAU,EACVC,QAAQ,SAAS,EACjBC,QAAQC,UAAU,EAClBC,cAAcC,gBAAgB,EAC9BC,MAAM,EACNC,OAAO,EACPC,WAAWC,aAAa,EACxBC,gBAAgB,EAChBC,cAAc,CAAC,CAACD,gBAAgB,EAChCE,YAAY,EACZC,mBAAmB,EACnBC,OAAO,EACPC,SAAS,EACTC,OAAO,EACPC,UAAU,EACVC,SAAS,EACTC,MAAM,EACNC,SAAS,EACTC,QAAQ,EACRC,QAAQ,EACR,GAAGC,WACJ,GAAG7B;IACJ,MAAME,KAAKR,aAAaS,QAAQ;IAEhC,IAAIO,eAAeC;IACnB,IAAIF,YAAY;QACd,IAAIqB,YAAyB,CAAC;QAC9B,IAAIC;QACJ,+DAA+D;QAC/D,8DAA8D;QAC9D,kBAAIvC,eAAoBiB,eAAe,OAAOA,eAAe,UAAU;YACrEsB,iBAAiBtB;QACnB,OAAO;YACJ,CAAA,EAAEmB,UAAUG,cAAc,EAAE,GAAGD,WAAW,GAAGrB,UAAS;QACzD;QAEAC,6BACE,KAACf;YACCY,OAAOA,UAAU,YAAY,cAAc;YAC3CyB,WAAWZ,WAAWH;YACrB,GAAGa,SAAS;sBAEZC;;IAGP;IAEA,IAAIjB,YAAYC;IAChB,IAAI,OAAOC,kBAAkBY,aAAa,aAAa;QACrDd,YAAYE,iBAAiBY,QAAQ;IACvC;IAEA,MAAMpB,SAAS,CAAC,CAACE;IACjB,MAAMsB,YAAYZ,WAAWZ,UAAUS;IACvC,MAAM,EAAEgB,YAAY,EAAEC,QAAQ,EAAE,GAAGzC,mBAAmB;QACpD0C,QAAQ;QACRC,SAASnC;QACTG,WAAWN,MAAM;YACfM;YACAG;YACAC;YACAI;YACAQ;YACAY;YACAf;QACF;QACAZ;QACAC;QACAgB;QACAC;QACAC;QACAC;QACAC;QACAC;QACAU,WAAW;QACXC,cAAczB;QACd0B,cAAc;IAChB;IAEA,qEAAqE;IACrE,2CAA2C;IAC3C,IAAI,CAACL,UAAU;QACb,OAAO;IACT;IAEA,qBACE,MAACM;QAAK,GAAGX,SAAS;QAAG,GAAGI,YAAY;QAAE/B,IAAIA;;0BACxC,KAACL;gBACCW,QAAQA;gBACRY,SAASA;gBACTC,WAAWA;gBACXJ,aAAaA;gBACbwB,gBAAgBtB;gBACf,GAAGD,YAAY;0BAEfU;;YAEFlB;YACAO,6BACC,KAACrB;gBAAiBoC,WAAWA;gBAAY,GAAGhB,gBAAgB;0BACzDF;;;;AAKX,GACA"}

package/dist/snackbar/_snackbar.scss

@@ -4,6 +4,8 @@
 
 @use "sass:map";
 @use "../utils";
+@use "../border-radius";
+@use "../spacing";
 @use "../box-shadows";
 @use "../button/button";
 @use "../theme/a11y";
@@ -72,24 +74,24 @@ $default-align-items: center !default;
 
 /// The default `gap` for a `Snackbar`.
 /// @type Number
-$gap: 1rem !default;
+$gap: spacing.get-var(md) !default;
 
 /// The default `gap` for a `Toast`.
 /// @type Number
-$toast-gap: 1rem !default;
+$toast-gap: spacing.get-var(md) !default;
 
 /// The default `gap` for a stacked `Toast`.
 /// @type Number
-$toast-gap-stacked: 0.5rem !default;
+$toast-gap-stacked: spacing.get-var(sm) !default;
 
 /// The default `gap` for a toast that has both a `ToastActionButton` and
 /// `ToastCloseButton`.
 /// @type Number
-$toast-gap-both-buttons: 0.25rem !default;
+$toast-gap-both-buttons: spacing.get-var(xs) !default;
 
 /// The viewport margin to apply to all `Toast` rendered within the `Snackbar`.
 /// @type Number
-$margin: 1rem !default;
+$margin: spacing.get-var(md) !default;
 
 /// A number between 0-24 representing the box-shadow elevation for a `Toast`.
 /// @type Number
@@ -97,25 +99,25 @@ $elevation: 6 !default;
 
 /// The default border-radius for a `Toast`.
 /// @type Number
-$border-radius: 0.25rem !default;
+$border-radius: border-radius.get-var(xs) !default;
 
 /// The default vertical padding for a `Toast`.
 /// @type Number
-$vertical-padding: 0.75em !default;
+$vertical-padding: calc(spacing.get-var(sm) * 1.5) !default;
 
 /// The default horizontal padding for a `Toast`.
 /// @type Number
-$horizontal-padding: 1rem !default;
+$horizontal-padding: spacing.get-var(md) !default;
 
 /// The default horizontal padding for a `Toast` that has an
 /// `ToastActionButton`.
 /// @type Number
-$action-horizontal-padding: 0.5rem !default;
+$action-horizontal-padding: spacing.get-var(sm) !default;
 
 /// The default horizontal padding for a `Toast` that has an
 /// `ToastCloseButton`.
 /// @type Number
-$close-button-horizontal-padding: 0 !default;
+$close-button-horizontal-padding: spacing.get-var(none) !default;
 
 /// The min-height for a `Toast`.
 /// @type Number

package/dist/table/TableCell.d.ts

@@ -89,7 +89,7 @@ export interface TableCellProps extends TableCellAttributes, TableCellOptions {
      *
      * @since 6.0.0
      */
-    contentProps?: PropsWithRef<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
+    contentProps?: PropsWithRef<ButtonHTMLAttributes<HTMLButtonElement>>;
     /**
      * Any additional props to pass to the `IconRotator` when the `aria-sort` prop
      * has been provided.

package/dist/table/TableCell.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/table/TableCell.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  type ButtonHTMLAttributes,\n  type ReactNode,\n  type TdHTMLAttributes,\n  type ThHTMLAttributes,\n  forwardRef,\n} from \"react\";\n\nimport { getIcon } from \"../icon/config.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport {\n  TableCellContent,\n  type TableCellContentsIconRotatorProps,\n} from \"./TableCellContent.js\";\nimport { useTableConfig } from \"./TableConfigurationProvider.js\";\nimport { tableCell } from \"./tableCellStyles.js\";\nimport { type SortOrder, type TableCellConfig } from \"./types.js\";\n\nexport type TableCellAttributes = Omit<\n  | TdHTMLAttributes<HTMLTableCellElement>\n  | ThHTMLAttributes<HTMLTableCellElement>,\n  \"scope\"\n>;\n\n/**\n * @since 6.0.0\n */\nexport interface TableCellOptions extends TableCellConfig {\n  /**\n   * This is a bit of a \"weird\" prop since all it does is apply `width: 100%` to\n   * this cell. This will make this specific cell fill the remaining width of\n   * the table (if there is any). If no cells have this prop enabled and the\n   * `fullWidth` table configuration is enabled, all cells will have an\n   * equal-sized width.\n   *\n   * @defaultValue `false`\n   */\n  grow?: boolean;\n\n  /**\n   * This prop is only valid when the `header` prop is enabled or the\n   * `TableCell` is a child of the `TableHeader` component. This will generally\n   * be used with a value of `\"row\"` if you have table headers that are at the\n   * start of each row instead of at the top of the table.\n   *\n   * @defaultValue `\"col\"`\n   */\n  scope?: \"row\" | \"col\" | \"rowgroup\" | \"colgroup\";\n\n  /**\n   *\n   * @defaultValue `false`\n   * @since 6.0.0 This prop is only a boolean.\n   */\n  sticky?: boolean;\n\n  /**\n   * @internal\n   * @defaultValue `false`\n   */\n  inputToggle?: boolean;\n}\n\n/**\n * @since 6.0.0 Removed the `colSpan=\"100%\"` support since `colSpan`\n * really only supports numbers.\n * @since 6.0.0 Removed `disablePadding` in favor of `padding`.\n */\nexport interface TableCellProps extends TableCellAttributes, TableCellOptions {\n  /**\n   * If you want to apply a sort icon for a header cell, set this prop to either\n   * `\"ascending\"` or `\"descending\"`. When you change the sort order, this prop\n   * should change as well which will cause the sort icon to rotate. The default\n   * behavior is to have the icon facing upwards and not-rotated when\n   * `\"ascending\"`, otherwise it will rotate downwards when `\"descending\"`.\n   *\n   * If this prop is set to `\"none\"`, the cell will render the clickable button\n   * in the children, just without the sort icon. This is so that the sort\n   * behavior can still be toggled for keyboard users and will be tab-focusable.\n   *\n   * @see {@link beforeChildren}\n   * @see {@link afterChildren}\n   */\n  \"aria-sort\"?: SortOrder;\n\n  /**\n   * An optional sort icon to use. This will be defaulted to the configured sort\n   * icon from the `@react-md/core` package. If you do not want the default\n   * implementation for the sort icon behavior from `react-md`, you can set this\n   * prop to `null`.\n   */\n  sortIcon?: ReactNode;\n\n  /**\n   * Boolean if the sort icon should appear after the children in the cell\n   * instead of before.\n   */\n  sortIconAfter?: boolean;\n\n  /**\n   * Boolean if the sort icon should be rotated instead of the default\n   * direction. When this is `undefined`, it will only be `true` when the\n   * `\"aria-sort\"` prop is set to `\"descending\"`. If this is not `undefined`,\n   * its boolean value will always be used.\n   */\n  sortIconRotated?: boolean;\n\n  /**\n   * @defaultValue `\"horizontal\"`\n   */\n  padding?: \"horizontal\" | \"vertical\" | \"none\";\n\n  /**\n   * This can be used to apply styling or any other props to the\n   * `UnstyledButton` that surrounds the `children` when the `\"aria-sort\"` prop\n   * has been provided.\n   *\n   * @since 6.0.0\n   */\n  contentProps?: PropsWithRef<\n    ButtonHTMLAttributes<HTMLButtonElement>,\n    HTMLButtonElement\n  >;\n\n  /**\n   * Any additional props to pass to the `IconRotator` when the `aria-sort` prop\n   * has been provided.\n   *\n   * @since 6.0.0\n   */\n  iconRotatorProps?: TableCellContentsIconRotatorProps;\n\n  /**\n   * Since providing an `aria-sort` prop will wrap the `children` in an\n   * `UnstyledButton`, you can use this prop to render another button within the\n   * table cell before the main `children`.\n   *\n   * @see {@link afterChildren} for an example.\n   * @since 6.0.0\n   */\n  beforeChildren?: ReactNode;\n\n  /**\n   * Since providing an `aria-sort` prop will wrap the `children` in an\n   * `UnstyledButton`, you can use this prop to render another button within the\n   * table cell before the main `children`.\n   *\n   * @example\n   * ```tsx\n   * import { Button } from \"@react-md/core/button/Button\";\n   * import { Dialog } from \"@react-md/core/dialog/Dialog\";\n   * import { TableCell } from \"@react-md/core/table/TableCell\";\n   * import { type SortOrder } from \"@react-md/core/table/types\";\n   * import MoreVertIcon from \"@react-md/material-icons/MoreVertIcon\";\n   * import type { ReactElement } from \"react\";\n   * import { useState } from \"react\";\n   *\n   * interface Props {\n   *   setSort(sort: string): void;\n   *   sortKey: string;\n   *   sortOrder: SortOrder;\n   * }\n   *\n   * function Example({ sortKey, sortOrder, setSort }: Props): ReactElement {\n   *   const [visible, setVisible] = useState(false);\n   *\n   *   return (\n   *     <>\n   *       <TableCell\n   *         aria-sort={sortKey === \"example\" ? sortOrder : \"none\"}\n   *         onClick={() => setSort(\"example\")}\n   *         afterChildren={\n   *           <Button\n   *             aria-label=\"Options\"\n   *             buttonType=\"icon\"\n   *             onClick={() => {\n   *               setVisible(true)\n   *             }}\n   *           >\n   *             <MoreVertIcon />\n   *           </Button>\n   *         }\n   *       >\n   *         Example content\n   *       </TableCell>\n   *       <Dialog\n   *         aria-label=\"Options\"\n   *         visible={visible}\n   *         onRequestClose={() => setVisible(false)}\n   *       >\n   *         Pretend Content...\n   *       </Dialog>\n   *     </>\n   *   );\n   * }\n   * ```\n   *\n   * @since 6.0.0\n   */\n  afterChildren?: ReactNode;\n}\n\n/**\n * **Client Component**\n *\n * Creates a `<th>` or `<td>` cell with sensible styled defaults. You can create\n * a `<th>` element by enabling the `header` prop OR having a `TableCell` as a\n * child of the `TableHeader` component.\n *\n * Note: If you have a checkbox/radio column in the `TableHeader` without any\n * labels, you will need to manually set the `header={false}` prop for that cell\n * since it is invalid to have a `<th>` without any readable content for screen\n * readers.\n *\n * @see {@link https://react-md.dev/components/table | Table Demos}\n */\nexport const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(\n  function TableCell(props, ref) {\n    const {\n      \"aria-sort\": sortOrder,\n      className,\n      grow = false,\n      scope: propScope,\n      hAlign: propHAlign,\n      vAlign: propVAlign,\n      header: propHeader,\n      lineWrap: propDisableLineWrap,\n      inputToggle,\n      children,\n      beforeChildren,\n      afterChildren,\n      sticky,\n      sortIcon: propSortIcon,\n      sortIconAfter = false,\n      sortIconRotated,\n      iconRotatorProps,\n      padding = \"horizontal\",\n      contentProps,\n      ...remaining\n    } = props;\n\n    const sortIcon = getIcon(\"sort\", propSortIcon);\n\n    // Note: unlike the other usages of `useTableConfig`, the `propHeader`\n    // is not provided. This is so that `TableCheckbox` components can still\n    // be a sticky header without being rendered as a `<th>`. This also makes\n    // it so the scope can be defaulted to `col` or `row` automatically.\n    const {\n      header: inheritedHeader,\n      hAlign,\n      vAlign,\n      lineWrap,\n    } = useTableConfig({\n      hAlign: propHAlign,\n      vAlign: propVAlign,\n      lineWrap: propDisableLineWrap,\n    });\n    const header = propHeader ?? inheritedHeader;\n\n    let scope = propScope;\n    if (!scope && header) {\n      scope = !inheritedHeader && propHeader ? \"row\" : \"col\";\n    }\n\n    const Component = header ? \"th\" : \"td\";\n    return (\n      <Component\n        {...remaining}\n        ref={ref}\n        aria-sort={sortOrder === \"none\" ? undefined : sortOrder}\n        className={tableCell({\n          className,\n          grow,\n          header,\n          sticky,\n          inputToggle,\n          hAlign,\n          vAlign,\n          lineWrap: !sortOrder && lineWrap,\n          padding: sortIcon && sortOrder ? \"none\" : padding,\n          isInTableHeader: inheritedHeader,\n        })}\n        scope={scope}\n      >\n        {beforeChildren}\n        <TableCellContent\n          {...contentProps}\n          icon={sortIcon}\n          iconAfter={sortIconAfter}\n          iconRotatorProps={iconRotatorProps}\n          sortOrder={sortOrder}\n          hAlign={hAlign}\n          rotated={sortIconRotated}\n        >\n          {children}\n        </TableCellContent>\n        {afterChildren}\n      </Component>\n    );\n  }\n);\n"],"names":["forwardRef","getIcon","TableCellContent","useTableConfig","tableCell","TableCell","props","ref","sortOrder","className","grow","scope","propScope","hAlign","propHAlign","vAlign","propVAlign","header","propHeader","lineWrap","propDisableLineWrap","inputToggle","children","beforeChildren","afterChildren","sticky","sortIcon","propSortIcon","sortIconAfter","sortIconRotated","iconRotatorProps","padding","contentProps","remaining","inheritedHeader","Component","aria-sort","undefined","isInTableHeader","icon","iconAfter","rotated"],"mappings":"AAAA;;AAEA,SAKEA,UAAU,QACL,QAAQ;AAEf,SAASC,OAAO,QAAQ,oBAAoB;AAE5C,SACEC,gBAAgB,QAEX,wBAAwB;AAC/B,SAASC,cAAc,QAAQ,kCAAkC;AACjE,SAASC,SAAS,QAAQ,uBAAuB;AA2LjD;;;;;;;;;;;;;CAaC,GACD,OAAO,MAAMC,0BAAYL,WACvB,SAASK,UAAUC,KAAK,EAAEC,GAAG;IAC3B,MAAM,EACJ,aAAaC,SAAS,EACtBC,SAAS,EACTC,OAAO,KAAK,EACZC,OAAOC,SAAS,EAChBC,QAAQC,UAAU,EAClBC,QAAQC,UAAU,EAClBC,QAAQC,UAAU,EAClBC,UAAUC,mBAAmB,EAC7BC,WAAW,EACXC,QAAQ,EACRC,cAAc,EACdC,aAAa,EACbC,MAAM,EACNC,UAAUC,YAAY,EACtBC,gBAAgB,KAAK,EACrBC,eAAe,EACfC,gBAAgB,EAChBC,UAAU,YAAY,EACtBC,YAAY,EACZ,GAAGC,WACJ,GAAG3B;IAEJ,MAAMoB,WAAWzB,QAAQ,QAAQ0B;IAEjC,sEAAsE;IACtE,wEAAwE;IACxE,yEAAyE;IACzE,oEAAoE;IACpE,MAAM,EACJV,QAAQiB,eAAe,EACvBrB,MAAM,EACNE,MAAM,EACNI,QAAQ,EACT,GAAGhB,eAAe;QACjBU,QAAQC;QACRC,QAAQC;QACRG,UAAUC;IACZ;IACA,MAAMH,SAASC,cAAcgB;IAE7B,IAAIvB,QAAQC;IACZ,IAAI,CAACD,SAASM,QAAQ;QACpBN,QAAQ,CAACuB,mBAAmBhB,aAAa,QAAQ;IACnD;IAEA,MAAMiB,YAAYlB,SAAS,OAAO;IAClC,qBACE,MAACkB;QACE,GAAGF,SAAS;QACb1B,KAAKA;QACL6B,aAAW5B,cAAc,SAAS6B,YAAY7B;QAC9CC,WAAWL,UAAU;YACnBK;YACAC;YACAO;YACAQ;YACAJ;YACAR;YACAE;YACAI,UAAU,CAACX,aAAaW;YACxBY,SAASL,YAAYlB,YAAY,SAASuB;YAC1CO,iBAAiBJ;QACnB;QACAvB,OAAOA;;YAENY;0BACD,KAACrB;gBACE,GAAG8B,YAAY;gBAChBO,MAAMb;gBACNc,WAAWZ;gBACXE,kBAAkBA;gBAClBtB,WAAWA;gBACXK,QAAQA;gBACR4B,SAASZ;0BAERP;;YAEFE;;;AAGP,GACA"}
+{"version":3,"sources":["../../src/table/TableCell.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  type ButtonHTMLAttributes,\n  type ReactNode,\n  type TdHTMLAttributes,\n  type ThHTMLAttributes,\n  forwardRef,\n} from \"react\";\n\nimport { getIcon } from \"../icon/config.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport {\n  TableCellContent,\n  type TableCellContentsIconRotatorProps,\n} from \"./TableCellContent.js\";\nimport { useTableConfig } from \"./TableConfigurationProvider.js\";\nimport { tableCell } from \"./tableCellStyles.js\";\nimport { type SortOrder, type TableCellConfig } from \"./types.js\";\n\nexport type TableCellAttributes = Omit<\n  | TdHTMLAttributes<HTMLTableCellElement>\n  | ThHTMLAttributes<HTMLTableCellElement>,\n  \"scope\"\n>;\n\n/**\n * @since 6.0.0\n */\nexport interface TableCellOptions extends TableCellConfig {\n  /**\n   * This is a bit of a \"weird\" prop since all it does is apply `width: 100%` to\n   * this cell. This will make this specific cell fill the remaining width of\n   * the table (if there is any). If no cells have this prop enabled and the\n   * `fullWidth` table configuration is enabled, all cells will have an\n   * equal-sized width.\n   *\n   * @defaultValue `false`\n   */\n  grow?: boolean;\n\n  /**\n   * This prop is only valid when the `header` prop is enabled or the\n   * `TableCell` is a child of the `TableHeader` component. This will generally\n   * be used with a value of `\"row\"` if you have table headers that are at the\n   * start of each row instead of at the top of the table.\n   *\n   * @defaultValue `\"col\"`\n   */\n  scope?: \"row\" | \"col\" | \"rowgroup\" | \"colgroup\";\n\n  /**\n   *\n   * @defaultValue `false`\n   * @since 6.0.0 This prop is only a boolean.\n   */\n  sticky?: boolean;\n\n  /**\n   * @internal\n   * @defaultValue `false`\n   */\n  inputToggle?: boolean;\n}\n\n/**\n * @since 6.0.0 Removed the `colSpan=\"100%\"` support since `colSpan`\n * really only supports numbers.\n * @since 6.0.0 Removed `disablePadding` in favor of `padding`.\n */\nexport interface TableCellProps extends TableCellAttributes, TableCellOptions {\n  /**\n   * If you want to apply a sort icon for a header cell, set this prop to either\n   * `\"ascending\"` or `\"descending\"`. When you change the sort order, this prop\n   * should change as well which will cause the sort icon to rotate. The default\n   * behavior is to have the icon facing upwards and not-rotated when\n   * `\"ascending\"`, otherwise it will rotate downwards when `\"descending\"`.\n   *\n   * If this prop is set to `\"none\"`, the cell will render the clickable button\n   * in the children, just without the sort icon. This is so that the sort\n   * behavior can still be toggled for keyboard users and will be tab-focusable.\n   *\n   * @see {@link beforeChildren}\n   * @see {@link afterChildren}\n   */\n  \"aria-sort\"?: SortOrder;\n\n  /**\n   * An optional sort icon to use. This will be defaulted to the configured sort\n   * icon from the `@react-md/core` package. If you do not want the default\n   * implementation for the sort icon behavior from `react-md`, you can set this\n   * prop to `null`.\n   */\n  sortIcon?: ReactNode;\n\n  /**\n   * Boolean if the sort icon should appear after the children in the cell\n   * instead of before.\n   */\n  sortIconAfter?: boolean;\n\n  /**\n   * Boolean if the sort icon should be rotated instead of the default\n   * direction. When this is `undefined`, it will only be `true` when the\n   * `\"aria-sort\"` prop is set to `\"descending\"`. If this is not `undefined`,\n   * its boolean value will always be used.\n   */\n  sortIconRotated?: boolean;\n\n  /**\n   * @defaultValue `\"horizontal\"`\n   */\n  padding?: \"horizontal\" | \"vertical\" | \"none\";\n\n  /**\n   * This can be used to apply styling or any other props to the\n   * `UnstyledButton` that surrounds the `children` when the `\"aria-sort\"` prop\n   * has been provided.\n   *\n   * @since 6.0.0\n   */\n  contentProps?: PropsWithRef<ButtonHTMLAttributes<HTMLButtonElement>>;\n\n  /**\n   * Any additional props to pass to the `IconRotator` when the `aria-sort` prop\n   * has been provided.\n   *\n   * @since 6.0.0\n   */\n  iconRotatorProps?: TableCellContentsIconRotatorProps;\n\n  /**\n   * Since providing an `aria-sort` prop will wrap the `children` in an\n   * `UnstyledButton`, you can use this prop to render another button within the\n   * table cell before the main `children`.\n   *\n   * @see {@link afterChildren} for an example.\n   * @since 6.0.0\n   */\n  beforeChildren?: ReactNode;\n\n  /**\n   * Since providing an `aria-sort` prop will wrap the `children` in an\n   * `UnstyledButton`, you can use this prop to render another button within the\n   * table cell before the main `children`.\n   *\n   * @example\n   * ```tsx\n   * import { Button } from \"@react-md/core/button/Button\";\n   * import { Dialog } from \"@react-md/core/dialog/Dialog\";\n   * import { TableCell } from \"@react-md/core/table/TableCell\";\n   * import { type SortOrder } from \"@react-md/core/table/types\";\n   * import MoreVertIcon from \"@react-md/material-icons/MoreVertIcon\";\n   * import type { ReactElement } from \"react\";\n   * import { useState } from \"react\";\n   *\n   * interface Props {\n   *   setSort(sort: string): void;\n   *   sortKey: string;\n   *   sortOrder: SortOrder;\n   * }\n   *\n   * function Example({ sortKey, sortOrder, setSort }: Props): ReactElement {\n   *   const [visible, setVisible] = useState(false);\n   *\n   *   return (\n   *     <>\n   *       <TableCell\n   *         aria-sort={sortKey === \"example\" ? sortOrder : \"none\"}\n   *         onClick={() => setSort(\"example\")}\n   *         afterChildren={\n   *           <Button\n   *             aria-label=\"Options\"\n   *             buttonType=\"icon\"\n   *             onClick={() => {\n   *               setVisible(true)\n   *             }}\n   *           >\n   *             <MoreVertIcon />\n   *           </Button>\n   *         }\n   *       >\n   *         Example content\n   *       </TableCell>\n   *       <Dialog\n   *         aria-label=\"Options\"\n   *         visible={visible}\n   *         onRequestClose={() => setVisible(false)}\n   *       >\n   *         Pretend Content...\n   *       </Dialog>\n   *     </>\n   *   );\n   * }\n   * ```\n   *\n   * @since 6.0.0\n   */\n  afterChildren?: ReactNode;\n}\n\n/**\n * **Client Component**\n *\n * Creates a `<th>` or `<td>` cell with sensible styled defaults. You can create\n * a `<th>` element by enabling the `header` prop OR having a `TableCell` as a\n * child of the `TableHeader` component.\n *\n * Note: If you have a checkbox/radio column in the `TableHeader` without any\n * labels, you will need to manually set the `header={false}` prop for that cell\n * since it is invalid to have a `<th>` without any readable content for screen\n * readers.\n *\n * @see {@link https://react-md.dev/components/table | Table Demos}\n */\nexport const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(\n  function TableCell(props, ref) {\n    const {\n      \"aria-sort\": sortOrder,\n      className,\n      grow = false,\n      scope: propScope,\n      hAlign: propHAlign,\n      vAlign: propVAlign,\n      header: propHeader,\n      lineWrap: propDisableLineWrap,\n      inputToggle,\n      children,\n      beforeChildren,\n      afterChildren,\n      sticky,\n      sortIcon: propSortIcon,\n      sortIconAfter = false,\n      sortIconRotated,\n      iconRotatorProps,\n      padding = \"horizontal\",\n      contentProps,\n      ...remaining\n    } = props;\n\n    const sortIcon = getIcon(\"sort\", propSortIcon);\n\n    // Note: unlike the other usages of `useTableConfig`, the `propHeader`\n    // is not provided. This is so that `TableCheckbox` components can still\n    // be a sticky header without being rendered as a `<th>`. This also makes\n    // it so the scope can be defaulted to `col` or `row` automatically.\n    const {\n      header: inheritedHeader,\n      hAlign,\n      vAlign,\n      lineWrap,\n    } = useTableConfig({\n      hAlign: propHAlign,\n      vAlign: propVAlign,\n      lineWrap: propDisableLineWrap,\n    });\n    const header = propHeader ?? inheritedHeader;\n\n    let scope = propScope;\n    if (!scope && header) {\n      scope = !inheritedHeader && propHeader ? \"row\" : \"col\";\n    }\n\n    const Component = header ? \"th\" : \"td\";\n    return (\n      <Component\n        {...remaining}\n        ref={ref}\n        aria-sort={sortOrder === \"none\" ? undefined : sortOrder}\n        className={tableCell({\n          className,\n          grow,\n          header,\n          sticky,\n          inputToggle,\n          hAlign,\n          vAlign,\n          lineWrap: !sortOrder && lineWrap,\n          padding: sortIcon && sortOrder ? \"none\" : padding,\n          isInTableHeader: inheritedHeader,\n        })}\n        scope={scope}\n      >\n        {beforeChildren}\n        <TableCellContent\n          {...contentProps}\n          icon={sortIcon}\n          iconAfter={sortIconAfter}\n          iconRotatorProps={iconRotatorProps}\n          sortOrder={sortOrder}\n          hAlign={hAlign}\n          rotated={sortIconRotated}\n        >\n          {children}\n        </TableCellContent>\n        {afterChildren}\n      </Component>\n    );\n  }\n);\n"],"names":["forwardRef","getIcon","TableCellContent","useTableConfig","tableCell","TableCell","props","ref","sortOrder","className","grow","scope","propScope","hAlign","propHAlign","vAlign","propVAlign","header","propHeader","lineWrap","propDisableLineWrap","inputToggle","children","beforeChildren","afterChildren","sticky","sortIcon","propSortIcon","sortIconAfter","sortIconRotated","iconRotatorProps","padding","contentProps","remaining","inheritedHeader","Component","aria-sort","undefined","isInTableHeader","icon","iconAfter","rotated"],"mappings":"AAAA;;AAEA,SAKEA,UAAU,QACL,QAAQ;AAEf,SAASC,OAAO,QAAQ,oBAAoB;AAE5C,SACEC,gBAAgB,QAEX,wBAAwB;AAC/B,SAASC,cAAc,QAAQ,kCAAkC;AACjE,SAASC,SAAS,QAAQ,uBAAuB;AAwLjD;;;;;;;;;;;;;CAaC,GACD,OAAO,MAAMC,0BAAYL,WACvB,SAASK,UAAUC,KAAK,EAAEC,GAAG;IAC3B,MAAM,EACJ,aAAaC,SAAS,EACtBC,SAAS,EACTC,OAAO,KAAK,EACZC,OAAOC,SAAS,EAChBC,QAAQC,UAAU,EAClBC,QAAQC,UAAU,EAClBC,QAAQC,UAAU,EAClBC,UAAUC,mBAAmB,EAC7BC,WAAW,EACXC,QAAQ,EACRC,cAAc,EACdC,aAAa,EACbC,MAAM,EACNC,UAAUC,YAAY,EACtBC,gBAAgB,KAAK,EACrBC,eAAe,EACfC,gBAAgB,EAChBC,UAAU,YAAY,EACtBC,YAAY,EACZ,GAAGC,WACJ,GAAG3B;IAEJ,MAAMoB,WAAWzB,QAAQ,QAAQ0B;IAEjC,sEAAsE;IACtE,wEAAwE;IACxE,yEAAyE;IACzE,oEAAoE;IACpE,MAAM,EACJV,QAAQiB,eAAe,EACvBrB,MAAM,EACNE,MAAM,EACNI,QAAQ,EACT,GAAGhB,eAAe;QACjBU,QAAQC;QACRC,QAAQC;QACRG,UAAUC;IACZ;IACA,MAAMH,SAASC,cAAcgB;IAE7B,IAAIvB,QAAQC;IACZ,IAAI,CAACD,SAASM,QAAQ;QACpBN,QAAQ,CAACuB,mBAAmBhB,aAAa,QAAQ;IACnD;IAEA,MAAMiB,YAAYlB,SAAS,OAAO;IAClC,qBACE,MAACkB;QACE,GAAGF,SAAS;QACb1B,KAAKA;QACL6B,aAAW5B,cAAc,SAAS6B,YAAY7B;QAC9CC,WAAWL,UAAU;YACnBK;YACAC;YACAO;YACAQ;YACAJ;YACAR;YACAE;YACAI,UAAU,CAACX,aAAaW;YACxBY,SAASL,YAAYlB,YAAY,SAASuB;YAC1CO,iBAAiBJ;QACnB;QACAvB,OAAOA;;YAENY;0BACD,KAACrB;gBACE,GAAG8B,YAAY;gBAChBO,MAAMb;gBACNc,WAAWZ;gBACXE,kBAAkBA;gBAClBtB,WAAWA;gBACXK,QAAQA;gBACR4B,SAASZ;0BAERP;;YAEFE;;;AAGP,GACA"}

package/dist/table/TableCheckbox.d.ts

@@ -39,7 +39,7 @@ export interface TableCheckboxProps extends TableCheckboxTdHTMLAttributes, Table
      * @see {@link TableCheckboxSupportedCheckboxProps}
      * @since 6.0.0
      */
-    checkboxProps?: PropsWithRef<CheckboxProps, HTMLInputElement>;
+    checkboxProps?: PropsWithRef<CheckboxProps>;
 }
 /**
  * **Client Component**

package/dist/table/TableCheckbox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/table/TableCheckbox.tsx"],"sourcesContent":["\"use client\";\n\nimport { type TdHTMLAttributes, forwardRef } from \"react\";\n\nimport { Checkbox } from \"../form/Checkbox.js\";\nimport { type CheckboxProps } from \"../form/InputToggle.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { TableCell } from \"./TableCell.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * @since 6.0.0\n */\nexport type TableCheckboxTdHTMLAttributes = Omit<\n  TdHTMLAttributes<HTMLTableCellElement>,\n  \"aria-sort\" | \"scope\" | \"onChange\"\n>;\n\n/**\n * @since 6.0.0\n */\nexport type TableCheckboxSupportedCheckboxProps = Pick<\n  CheckboxProps,\n  | \"name\"\n  | \"value\"\n  | \"icon\"\n  | \"iconStyle\"\n  | \"iconClassName\"\n  | \"iconProps\"\n  | \"checkedIcon\"\n  | \"indeterminateIcon\"\n  | \"checked\"\n  | \"onChange\"\n  | \"defaultChecked\"\n  | \"indeterminate\"\n  | \"aria-controls\"\n>;\n\n/**\n * @since 6.0.0 The `id` prop is no longer required since the checkbox's id\n * will automatically be generated as `\"checkbox\" + useId()`. Use the {@link checkboxProps}\n * to set an `id` manually for the checkbox.\n * @since 6.0.0 The `cellId` prop was removed. Use the `id` prop instead.\n * @since 6.0.0 The default `aria-label` was changed from\n * `\"Toggle Row Selection\"` to `\"Select Row\"`.\n */\nexport interface TableCheckboxProps\n  extends TableCheckboxTdHTMLAttributes,\n    TableCheckboxSupportedCheckboxProps {\n  /**\n   * @defaultValue `!props[\"aria-labelledby\"] ? \"Select Row\" : undefined`\n   */\n  \"aria-label\"?: string;\n\n  /** @defaultValue `false` */\n  sticky?: boolean;\n\n  /**\n   * This allows you to override any props for the checkbox that are not\n   * configurable as top-level props.\n   *\n   * @example Simple Example\n   * ```tsx\n   * checkboxProps={{\n   *   id: \"some-custom-id\",\n   *   ref: checkboxRef,\n   * }}\n   * ```\n   *\n   * @see {@link TableCheckboxSupportedCheckboxProps}\n   * @since 6.0.0\n   */\n  checkboxProps?: PropsWithRef<CheckboxProps, HTMLInputElement>;\n}\n\n/**\n * **Client Component**\n * The `TableCheckbox` is used to render a `Checkbox` within a `TableCell` by applying\n * some minimal styles.\n *\n * @example Simple Example\n * ```tsx\n * import { useCheckboxGroup } from \"@react-md/core/form/useCheckboxGroup\";\n * import { Table } from \"@react-md/core/table/Table\";\n * import { TableBody } from \"@react-md/core/table/TableBody\";\n * import { TableCell } from \"@react-md/core/table/TableCell\";\n * import { TableCheckbox } from \"@react-md/core/table/TableCheckbox\";\n * import { TableContainer } from \"@react-md/core/table/TableContainer\";\n * import { TableHeader } from \"@react-md/core/table/TableHeader\";\n * import { TableRow } from \"@react-md/core/table/TableRow\";\n * import { type ReactElement } from \"react\";\n *\n * const rows = [\n *   { name: \"Frozen Yogurt\", type: \"Ice Cream\" },\n *   { name: \"Ice cream sandwich\", type: \"Ice Cream\" },\n *   { name: \"Eclair\", type: \"Pastry\" },\n *   // ...other content\n * ] as const;\n *\n * function Example(): ReactElement {\n *   const { getCheckboxProps, getIndeterminateProps } = useCheckboxGroup({\n *     values: rows.map(({ name }) => name),\n *     name: \"selected\",\n *   });\n *   return (\n *     <TableContainer>\n *       <Table>\n *         <TableHeader>\n *           <TableRow>\n *             <TableCheckbox {...getIndeterminateProps()} />\n *             <TableCell>Name</TableCell>\n *             <TableCell>Type</TableCell>\n *           </TableRow>\n *         </TableHeader>\n *         <TableBody>\n *           {rows.map(({ name, type }) => {\n *             const checkboxProps = getCheckboxProps(name);\n *             const { checked, onChange } = checkboxProps;\n *\n *             return (\n *               <TableRow\n *                 key={name}\n *                 onClick={onChange}\n *                 clickable\n *                 selected={checked}\n *               >\n *                 <TableCheckbox {...checkboxProps} />\n *                 <TableCell>{name}</TableCell>\n *                 <TableCell hAlign=\"right\">{type}</TableCell>\n *               </TableRow>\n *             );\n *           })}\n *         </TableBody>\n *       </Table>\n *     </TableContainer>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/table | Table Demos}\n * @since 6.0.0 The `id` prop is no longer required since the checkbox's id\n * will automatically be generated as `\"checkbox\" + useId()`. Use the {@link checkboxProps}\n * to set an `id` manually for the checkbox.\n * @since 6.0.0 The `cellId` prop was removed. Use the `id` prop instead.\n * @since 6.0.0 The default `aria-label` was changed from\n * `\"Toggle Row Selection\"` to `\"Select Row\"`.\n */\nexport const TableCheckbox = forwardRef<\n  HTMLTableCellElement,\n  TableCheckboxProps\n>(function TableCheckbox(props, ref) {\n  const {\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-label\": ariaLabel = !ariaLabelledBy ? \"Select Row\" : undefined,\n    \"aria-controls\": ariaControls,\n    name,\n    icon,\n    iconProps,\n    iconStyle,\n    iconClassName,\n    checkedIcon,\n    indeterminateIcon,\n    value,\n    checked,\n    onChange,\n    defaultChecked,\n    indeterminate,\n    checkboxProps,\n    onClick = noop,\n    ...remaining\n  } = props;\n\n  return (\n    <TableCell\n      {...remaining}\n      ref={ref}\n      header={false}\n      inputToggle\n      onClick={(event) => {\n        event.stopPropagation();\n        onClick(event);\n      }}\n    >\n      <Checkbox\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        aria-controls={ariaControls}\n        name={name}\n        icon={icon}\n        iconProps={iconProps}\n        iconStyle={iconStyle}\n        iconClassName={iconClassName}\n        checkedIcon={checkedIcon}\n        indeterminateIcon={indeterminateIcon}\n        value={value}\n        checked={checked}\n        defaultChecked={defaultChecked}\n        onChange={onChange}\n        indeterminate={indeterminate}\n        {...checkboxProps}\n      />\n    </TableCell>\n  );\n});\n"],"names":["forwardRef","Checkbox","TableCell","noop","TableCheckbox","props","ref","ariaLabelledBy","ariaLabel","undefined","ariaControls","name","icon","iconProps","iconStyle","iconClassName","checkedIcon","indeterminateIcon","value","checked","onChange","defaultChecked","indeterminate","checkboxProps","onClick","remaining","header","inputToggle","event","stopPropagation","aria-label","aria-labelledby","aria-controls"],"mappings":"AAAA;;AAEA,SAAgCA,UAAU,QAAQ,QAAQ;AAE1D,SAASC,QAAQ,QAAQ,sBAAsB;AAG/C,SAASC,SAAS,QAAQ,iBAAiB;AAE3C,MAAMC,OAAO;AACX,aAAa;AACf;AAmEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuEC,GACD,OAAO,MAAMC,8BAAgBJ,WAG3B,SAASI,cAAcC,KAAK,EAAEC,GAAG;IACjC,MAAM,EACJ,mBAAmBC,cAAc,EACjC,cAAcC,YAAY,CAACD,iBAAiB,eAAeE,SAAS,EACpE,iBAAiBC,YAAY,EAC7BC,IAAI,EACJC,IAAI,EACJC,SAAS,EACTC,SAAS,EACTC,aAAa,EACbC,WAAW,EACXC,iBAAiB,EACjBC,KAAK,EACLC,OAAO,EACPC,QAAQ,EACRC,cAAc,EACdC,aAAa,EACbC,aAAa,EACbC,UAAUrB,IAAI,EACd,GAAGsB,WACJ,GAAGpB;IAEJ,qBACE,KAACH;QACE,GAAGuB,SAAS;QACbnB,KAAKA;QACLoB,QAAQ;QACRC,WAAW;QACXH,SAAS,CAACI;YACRA,MAAMC,eAAe;YACrBL,QAAQI;QACV;kBAEA,cAAA,KAAC3B;YACC6B,cAAYtB;YACZuB,mBAAiBxB;YACjByB,iBAAetB;YACfC,MAAMA;YACNC,MAAMA;YACNC,WAAWA;YACXC,WAAWA;YACXC,eAAeA;YACfC,aAAaA;YACbC,mBAAmBA;YACnBC,OAAOA;YACPC,SAASA;YACTE,gBAAgBA;YAChBD,UAAUA;YACVE,eAAeA;YACd,GAAGC,aAAa;;;AAIzB,GAAG"}
+{"version":3,"sources":["../../src/table/TableCheckbox.tsx"],"sourcesContent":["\"use client\";\n\nimport { type TdHTMLAttributes, forwardRef } from \"react\";\n\nimport { Checkbox } from \"../form/Checkbox.js\";\nimport { type CheckboxProps } from \"../form/InputToggle.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { TableCell } from \"./TableCell.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * @since 6.0.0\n */\nexport type TableCheckboxTdHTMLAttributes = Omit<\n  TdHTMLAttributes<HTMLTableCellElement>,\n  \"aria-sort\" | \"scope\" | \"onChange\"\n>;\n\n/**\n * @since 6.0.0\n */\nexport type TableCheckboxSupportedCheckboxProps = Pick<\n  CheckboxProps,\n  | \"name\"\n  | \"value\"\n  | \"icon\"\n  | \"iconStyle\"\n  | \"iconClassName\"\n  | \"iconProps\"\n  | \"checkedIcon\"\n  | \"indeterminateIcon\"\n  | \"checked\"\n  | \"onChange\"\n  | \"defaultChecked\"\n  | \"indeterminate\"\n  | \"aria-controls\"\n>;\n\n/**\n * @since 6.0.0 The `id` prop is no longer required since the checkbox's id\n * will automatically be generated as `\"checkbox\" + useId()`. Use the {@link checkboxProps}\n * to set an `id` manually for the checkbox.\n * @since 6.0.0 The `cellId` prop was removed. Use the `id` prop instead.\n * @since 6.0.0 The default `aria-label` was changed from\n * `\"Toggle Row Selection\"` to `\"Select Row\"`.\n */\nexport interface TableCheckboxProps\n  extends TableCheckboxTdHTMLAttributes,\n    TableCheckboxSupportedCheckboxProps {\n  /**\n   * @defaultValue `!props[\"aria-labelledby\"] ? \"Select Row\" : undefined`\n   */\n  \"aria-label\"?: string;\n\n  /** @defaultValue `false` */\n  sticky?: boolean;\n\n  /**\n   * This allows you to override any props for the checkbox that are not\n   * configurable as top-level props.\n   *\n   * @example Simple Example\n   * ```tsx\n   * checkboxProps={{\n   *   id: \"some-custom-id\",\n   *   ref: checkboxRef,\n   * }}\n   * ```\n   *\n   * @see {@link TableCheckboxSupportedCheckboxProps}\n   * @since 6.0.0\n   */\n  checkboxProps?: PropsWithRef<CheckboxProps>;\n}\n\n/**\n * **Client Component**\n * The `TableCheckbox` is used to render a `Checkbox` within a `TableCell` by applying\n * some minimal styles.\n *\n * @example Simple Example\n * ```tsx\n * import { useCheckboxGroup } from \"@react-md/core/form/useCheckboxGroup\";\n * import { Table } from \"@react-md/core/table/Table\";\n * import { TableBody } from \"@react-md/core/table/TableBody\";\n * import { TableCell } from \"@react-md/core/table/TableCell\";\n * import { TableCheckbox } from \"@react-md/core/table/TableCheckbox\";\n * import { TableContainer } from \"@react-md/core/table/TableContainer\";\n * import { TableHeader } from \"@react-md/core/table/TableHeader\";\n * import { TableRow } from \"@react-md/core/table/TableRow\";\n * import { type ReactElement } from \"react\";\n *\n * const rows = [\n *   { name: \"Frozen Yogurt\", type: \"Ice Cream\" },\n *   { name: \"Ice cream sandwich\", type: \"Ice Cream\" },\n *   { name: \"Eclair\", type: \"Pastry\" },\n *   // ...other content\n * ] as const;\n *\n * function Example(): ReactElement {\n *   const { getCheckboxProps, getIndeterminateProps } = useCheckboxGroup({\n *     values: rows.map(({ name }) => name),\n *     name: \"selected\",\n *   });\n *   return (\n *     <TableContainer>\n *       <Table>\n *         <TableHeader>\n *           <TableRow>\n *             <TableCheckbox {...getIndeterminateProps()} />\n *             <TableCell>Name</TableCell>\n *             <TableCell>Type</TableCell>\n *           </TableRow>\n *         </TableHeader>\n *         <TableBody>\n *           {rows.map(({ name, type }) => {\n *             const checkboxProps = getCheckboxProps(name);\n *             const { checked, onChange } = checkboxProps;\n *\n *             return (\n *               <TableRow\n *                 key={name}\n *                 onClick={onChange}\n *                 clickable\n *                 selected={checked}\n *               >\n *                 <TableCheckbox {...checkboxProps} />\n *                 <TableCell>{name}</TableCell>\n *                 <TableCell hAlign=\"right\">{type}</TableCell>\n *               </TableRow>\n *             );\n *           })}\n *         </TableBody>\n *       </Table>\n *     </TableContainer>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/table | Table Demos}\n * @since 6.0.0 The `id` prop is no longer required since the checkbox's id\n * will automatically be generated as `\"checkbox\" + useId()`. Use the {@link checkboxProps}\n * to set an `id` manually for the checkbox.\n * @since 6.0.0 The `cellId` prop was removed. Use the `id` prop instead.\n * @since 6.0.0 The default `aria-label` was changed from\n * `\"Toggle Row Selection\"` to `\"Select Row\"`.\n */\nexport const TableCheckbox = forwardRef<\n  HTMLTableCellElement,\n  TableCheckboxProps\n>(function TableCheckbox(props, ref) {\n  const {\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-label\": ariaLabel = !ariaLabelledBy ? \"Select Row\" : undefined,\n    \"aria-controls\": ariaControls,\n    name,\n    icon,\n    iconProps,\n    iconStyle,\n    iconClassName,\n    checkedIcon,\n    indeterminateIcon,\n    value,\n    checked,\n    onChange,\n    defaultChecked,\n    indeterminate,\n    checkboxProps,\n    onClick = noop,\n    ...remaining\n  } = props;\n\n  return (\n    <TableCell\n      {...remaining}\n      ref={ref}\n      header={false}\n      inputToggle\n      onClick={(event) => {\n        event.stopPropagation();\n        onClick(event);\n      }}\n    >\n      <Checkbox\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        aria-controls={ariaControls}\n        name={name}\n        icon={icon}\n        iconProps={iconProps}\n        iconStyle={iconStyle}\n        iconClassName={iconClassName}\n        checkedIcon={checkedIcon}\n        indeterminateIcon={indeterminateIcon}\n        value={value}\n        checked={checked}\n        defaultChecked={defaultChecked}\n        onChange={onChange}\n        indeterminate={indeterminate}\n        {...checkboxProps}\n      />\n    </TableCell>\n  );\n});\n"],"names":["forwardRef","Checkbox","TableCell","noop","TableCheckbox","props","ref","ariaLabelledBy","ariaLabel","undefined","ariaControls","name","icon","iconProps","iconStyle","iconClassName","checkedIcon","indeterminateIcon","value","checked","onChange","defaultChecked","indeterminate","checkboxProps","onClick","remaining","header","inputToggle","event","stopPropagation","aria-label","aria-labelledby","aria-controls"],"mappings":"AAAA;;AAEA,SAAgCA,UAAU,QAAQ,QAAQ;AAE1D,SAASC,QAAQ,QAAQ,sBAAsB;AAG/C,SAASC,SAAS,QAAQ,iBAAiB;AAE3C,MAAMC,OAAO;AACX,aAAa;AACf;AAmEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuEC,GACD,OAAO,MAAMC,8BAAgBJ,WAG3B,SAASI,cAAcC,KAAK,EAAEC,GAAG;IACjC,MAAM,EACJ,mBAAmBC,cAAc,EACjC,cAAcC,YAAY,CAACD,iBAAiB,eAAeE,SAAS,EACpE,iBAAiBC,YAAY,EAC7BC,IAAI,EACJC,IAAI,EACJC,SAAS,EACTC,SAAS,EACTC,aAAa,EACbC,WAAW,EACXC,iBAAiB,EACjBC,KAAK,EACLC,OAAO,EACPC,QAAQ,EACRC,cAAc,EACdC,aAAa,EACbC,aAAa,EACbC,UAAUrB,IAAI,EACd,GAAGsB,WACJ,GAAGpB;IAEJ,qBACE,KAACH;QACE,GAAGuB,SAAS;QACbnB,KAAKA;QACLoB,QAAQ;QACRC,WAAW;QACXH,SAAS,CAACI;YACRA,MAAMC,eAAe;YACrBL,QAAQI;QACV;kBAEA,cAAA,KAAC3B;YACC6B,cAAYtB;YACZuB,mBAAiBxB;YACjByB,iBAAetB;YACfC,MAAMA;YACNC,MAAMA;YACNC,WAAWA;YACXC,WAAWA;YACXC,eAAeA;YACfC,aAAaA;YACbC,mBAAmBA;YACnBC,OAAOA;YACPC,SAASA;YACTE,gBAAgBA;YAChBD,UAAUA;YACVE,eAAeA;YACd,GAAGC,aAAa;;;AAIzB,GAAG"}

package/dist/table/TableRadio.d.ts

@@ -34,7 +34,7 @@ export interface TableRadioProps extends TableRadioTdHTMLAttributes, TableRadioS
      * @see {@link TableRadioSupportedRadioProps}
      * @since 6.0.0
      */
-    radioProps?: PropsWithRef<RadioProps, HTMLInputElement>;
+    radioProps?: PropsWithRef<RadioProps>;
 }
 /**
  * **Client Component**

package/dist/table/TableRadio.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/table/TableRadio.tsx"],"sourcesContent":["\"use client\";\n\nimport { type TdHTMLAttributes, forwardRef } from \"react\";\n\nimport { type RadioProps } from \"../form/InputToggle.js\";\nimport { Radio } from \"../form/Radio.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { TableCell } from \"./TableCell.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * @since 6.0.0\n */\nexport type TableRadioTdHTMLAttributes = Omit<\n  TdHTMLAttributes<HTMLTableCellElement>,\n  \"aria-sort\" | \"scope\" | \"onChange\" | \"onInvalid\"\n>;\n\n/**\n * @since 6.0.0\n */\nexport type TableRadioSupportedRadioProps = Pick<\n  RadioProps,\n  | \"name\"\n  | \"value\"\n  | \"icon\"\n  | \"iconStyle\"\n  | \"iconClassName\"\n  | \"iconProps\"\n  | \"checkedIcon\"\n  | \"checked\"\n  | \"onChange\"\n  | \"defaultChecked\"\n  | \"error\"\n  | \"required\"\n  | \"onInvalid\"\n>;\n\n/**\n * @since 6.0.0\n */\nexport interface TableRadioProps\n  extends TableRadioTdHTMLAttributes,\n    TableRadioSupportedRadioProps {\n  /**\n   * @defaultValue `!props[\"aria-labelledby\"] ? \"Select Row\" : undefined`\n   */\n  \"aria-label\"?: string;\n\n  /** @defaultValue `false` */\n  sticky?: boolean;\n\n  /**\n   * This allows you to override any props for the radio that are not\n   * configurable as top-level props.\n   *\n   * @example Simple Example\n   * ```tsx\n   * radioProps={{\n   *   id: \"some-custom-id\",\n   *   ref: radioRef,\n   * }}\n   * ```\n   *\n   * @see {@link TableRadioSupportedRadioProps}\n   * @since 6.0.0\n   */\n  radioProps?: PropsWithRef<RadioProps, HTMLInputElement>;\n}\n\n/**\n * **Client Component**\n * The `TableRadio` is used to render a `Radio` within a `TableCell` by applying\n * some minimal styles.\n *\n * @example Simple Example\n * ```tsx\n * import { useRadioGroup } from \"@react-md/core/form/useRadioGroup\";\n * import { Table } from \"@react-md/core/table/Table\";\n * import { TableBody } from \"@react-md/core/table/TableBody\";\n * import { TableCell } from \"@react-md/core/table/TableCell\";\n * import { TableContainer } from \"@react-md/core/table/TableContainer\";\n * import { TableHeader } from \"@react-md/core/table/TableHeader\";\n * import { TableRadio } from \"@react-md/core/table/TableRadio\";\n * import { TableRow } from \"@react-md/core/table/TableRow\";\n * import type { ReactElement } from \"react\";\n *\n * const rows = [\n *   { name: \"Frozen Yogurt\", type: \"Ice Cream\" },\n *   { name: \"Ice cream sandwich\", type: \"Ice Cream\" },\n *   { name: \"Eclair\", type: \"Pastry\" },\n *   // ...other content\n * ] as const;\n *\n * function Example(): ReactElement {\n *   const { getRadioProps } = useRadioGroup({\n *     name: \"selected\",\n *   });\n *   return (\n *     <TableContainer>\n *       <Table>\n *         <TableHeader>\n *           <TableRow>\n *             <TableCell header={false} />\n *             <TableCell>Name</TableCell>\n *             <TableCell>Type</TableCell>\n *           </TableRow>\n *         </TableHeader>\n *         <TableBody>\n *           {rows.map(({ name, type }) => {\n *             const radioProps = getRadioProps(name);\n *             const { checked, onChange } = radioProps;\n *\n *             return (\n *               <TableRow\n *                 key={name}\n *                 onClick={onChange}\n *                 clickable\n *                 selected={checked}\n *               >\n *                 <TableRadio {...radioProps} />\n *                 <TableCell>{name}</TableCell>\n *                 <TableCell hAlign=\"right\">{type}</TableCell>\n *               </TableRow>\n *             );\n *           })}\n *         </TableBody>\n *       </Table>\n *     </TableContainer>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/table | Table Demos}\n * @since 6.0.0\n */\nexport const TableRadio = forwardRef<HTMLTableCellElement, TableRadioProps>(\n  function TableRadio(props, ref) {\n    const {\n      \"aria-labelledby\": ariaLabelledBy,\n      \"aria-label\": ariaLabel = !ariaLabelledBy ? \"Select Row\" : undefined,\n      \"aria-controls\": ariaControls,\n      name,\n      icon,\n      iconProps,\n      iconStyle,\n      iconClassName,\n      checkedIcon,\n      value,\n      checked,\n      onChange,\n      defaultChecked,\n      radioProps,\n      onClick = noop,\n      error,\n      required,\n      onInvalid,\n      ...remaining\n    } = props;\n\n    return (\n      <TableCell\n        {...remaining}\n        ref={ref}\n        header={false}\n        inputToggle\n        onClick={(event) => {\n          event.stopPropagation();\n          onClick(event);\n        }}\n      >\n        <Radio\n          aria-label={ariaLabel}\n          aria-labelledby={ariaLabelledBy}\n          aria-controls={ariaControls}\n          name={name}\n          icon={icon}\n          iconProps={iconProps}\n          iconStyle={iconStyle}\n          iconClassName={iconClassName}\n          checkedIcon={checkedIcon}\n          value={value}\n          checked={checked}\n          defaultChecked={defaultChecked}\n          error={error}\n          required={required}\n          onChange={onChange}\n          onInvalid={onInvalid}\n          {...radioProps}\n        />\n      </TableCell>\n    );\n  }\n);\n"],"names":["forwardRef","Radio","TableCell","noop","TableRadio","props","ref","ariaLabelledBy","ariaLabel","undefined","ariaControls","name","icon","iconProps","iconStyle","iconClassName","checkedIcon","value","checked","onChange","defaultChecked","radioProps","onClick","error","required","onInvalid","remaining","header","inputToggle","event","stopPropagation","aria-label","aria-labelledby","aria-controls"],"mappings":"AAAA;;AAEA,SAAgCA,UAAU,QAAQ,QAAQ;AAG1D,SAASC,KAAK,QAAQ,mBAAmB;AAEzC,SAASC,SAAS,QAAQ,iBAAiB;AAE3C,MAAMC,OAAO;AACX,aAAa;AACf;AA8DA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiEC,GACD,OAAO,MAAMC,2BAAaJ,WACxB,SAASI,WAAWC,KAAK,EAAEC,GAAG;IAC5B,MAAM,EACJ,mBAAmBC,cAAc,EACjC,cAAcC,YAAY,CAACD,iBAAiB,eAAeE,SAAS,EACpE,iBAAiBC,YAAY,EAC7BC,IAAI,EACJC,IAAI,EACJC,SAAS,EACTC,SAAS,EACTC,aAAa,EACbC,WAAW,EACXC,KAAK,EACLC,OAAO,EACPC,QAAQ,EACRC,cAAc,EACdC,UAAU,EACVC,UAAUnB,IAAI,EACdoB,KAAK,EACLC,QAAQ,EACRC,SAAS,EACT,GAAGC,WACJ,GAAGrB;IAEJ,qBACE,KAACH;QACE,GAAGwB,SAAS;QACbpB,KAAKA;QACLqB,QAAQ;QACRC,WAAW;QACXN,SAAS,CAACO;YACRA,MAAMC,eAAe;YACrBR,QAAQO;QACV;kBAEA,cAAA,KAAC5B;YACC8B,cAAYvB;YACZwB,mBAAiBzB;YACjB0B,iBAAevB;YACfC,MAAMA;YACNC,MAAMA;YACNC,WAAWA;YACXC,WAAWA;YACXC,eAAeA;YACfC,aAAaA;YACbC,OAAOA;YACPC,SAASA;YACTE,gBAAgBA;YAChBG,OAAOA;YACPC,UAAUA;YACVL,UAAUA;YACVM,WAAWA;YACV,GAAGJ,UAAU;;;AAItB,GACA"}
+{"version":3,"sources":["../../src/table/TableRadio.tsx"],"sourcesContent":["\"use client\";\n\nimport { type TdHTMLAttributes, forwardRef } from \"react\";\n\nimport { type RadioProps } from \"../form/InputToggle.js\";\nimport { Radio } from \"../form/Radio.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { TableCell } from \"./TableCell.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * @since 6.0.0\n */\nexport type TableRadioTdHTMLAttributes = Omit<\n  TdHTMLAttributes<HTMLTableCellElement>,\n  \"aria-sort\" | \"scope\" | \"onChange\" | \"onInvalid\"\n>;\n\n/**\n * @since 6.0.0\n */\nexport type TableRadioSupportedRadioProps = Pick<\n  RadioProps,\n  | \"name\"\n  | \"value\"\n  | \"icon\"\n  | \"iconStyle\"\n  | \"iconClassName\"\n  | \"iconProps\"\n  | \"checkedIcon\"\n  | \"checked\"\n  | \"onChange\"\n  | \"defaultChecked\"\n  | \"error\"\n  | \"required\"\n  | \"onInvalid\"\n>;\n\n/**\n * @since 6.0.0\n */\nexport interface TableRadioProps\n  extends TableRadioTdHTMLAttributes,\n    TableRadioSupportedRadioProps {\n  /**\n   * @defaultValue `!props[\"aria-labelledby\"] ? \"Select Row\" : undefined`\n   */\n  \"aria-label\"?: string;\n\n  /** @defaultValue `false` */\n  sticky?: boolean;\n\n  /**\n   * This allows you to override any props for the radio that are not\n   * configurable as top-level props.\n   *\n   * @example Simple Example\n   * ```tsx\n   * radioProps={{\n   *   id: \"some-custom-id\",\n   *   ref: radioRef,\n   * }}\n   * ```\n   *\n   * @see {@link TableRadioSupportedRadioProps}\n   * @since 6.0.0\n   */\n  radioProps?: PropsWithRef<RadioProps>;\n}\n\n/**\n * **Client Component**\n * The `TableRadio` is used to render a `Radio` within a `TableCell` by applying\n * some minimal styles.\n *\n * @example Simple Example\n * ```tsx\n * import { useRadioGroup } from \"@react-md/core/form/useRadioGroup\";\n * import { Table } from \"@react-md/core/table/Table\";\n * import { TableBody } from \"@react-md/core/table/TableBody\";\n * import { TableCell } from \"@react-md/core/table/TableCell\";\n * import { TableContainer } from \"@react-md/core/table/TableContainer\";\n * import { TableHeader } from \"@react-md/core/table/TableHeader\";\n * import { TableRadio } from \"@react-md/core/table/TableRadio\";\n * import { TableRow } from \"@react-md/core/table/TableRow\";\n * import type { ReactElement } from \"react\";\n *\n * const rows = [\n *   { name: \"Frozen Yogurt\", type: \"Ice Cream\" },\n *   { name: \"Ice cream sandwich\", type: \"Ice Cream\" },\n *   { name: \"Eclair\", type: \"Pastry\" },\n *   // ...other content\n * ] as const;\n *\n * function Example(): ReactElement {\n *   const { getRadioProps } = useRadioGroup({\n *     name: \"selected\",\n *   });\n *   return (\n *     <TableContainer>\n *       <Table>\n *         <TableHeader>\n *           <TableRow>\n *             <TableCell header={false} />\n *             <TableCell>Name</TableCell>\n *             <TableCell>Type</TableCell>\n *           </TableRow>\n *         </TableHeader>\n *         <TableBody>\n *           {rows.map(({ name, type }) => {\n *             const radioProps = getRadioProps(name);\n *             const { checked, onChange } = radioProps;\n *\n *             return (\n *               <TableRow\n *                 key={name}\n *                 onClick={onChange}\n *                 clickable\n *                 selected={checked}\n *               >\n *                 <TableRadio {...radioProps} />\n *                 <TableCell>{name}</TableCell>\n *                 <TableCell hAlign=\"right\">{type}</TableCell>\n *               </TableRow>\n *             );\n *           })}\n *         </TableBody>\n *       </Table>\n *     </TableContainer>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/table | Table Demos}\n * @since 6.0.0\n */\nexport const TableRadio = forwardRef<HTMLTableCellElement, TableRadioProps>(\n  function TableRadio(props, ref) {\n    const {\n      \"aria-labelledby\": ariaLabelledBy,\n      \"aria-label\": ariaLabel = !ariaLabelledBy ? \"Select Row\" : undefined,\n      \"aria-controls\": ariaControls,\n      name,\n      icon,\n      iconProps,\n      iconStyle,\n      iconClassName,\n      checkedIcon,\n      value,\n      checked,\n      onChange,\n      defaultChecked,\n      radioProps,\n      onClick = noop,\n      error,\n      required,\n      onInvalid,\n      ...remaining\n    } = props;\n\n    return (\n      <TableCell\n        {...remaining}\n        ref={ref}\n        header={false}\n        inputToggle\n        onClick={(event) => {\n          event.stopPropagation();\n          onClick(event);\n        }}\n      >\n        <Radio\n          aria-label={ariaLabel}\n          aria-labelledby={ariaLabelledBy}\n          aria-controls={ariaControls}\n          name={name}\n          icon={icon}\n          iconProps={iconProps}\n          iconStyle={iconStyle}\n          iconClassName={iconClassName}\n          checkedIcon={checkedIcon}\n          value={value}\n          checked={checked}\n          defaultChecked={defaultChecked}\n          error={error}\n          required={required}\n          onChange={onChange}\n          onInvalid={onInvalid}\n          {...radioProps}\n        />\n      </TableCell>\n    );\n  }\n);\n"],"names":["forwardRef","Radio","TableCell","noop","TableRadio","props","ref","ariaLabelledBy","ariaLabel","undefined","ariaControls","name","icon","iconProps","iconStyle","iconClassName","checkedIcon","value","checked","onChange","defaultChecked","radioProps","onClick","error","required","onInvalid","remaining","header","inputToggle","event","stopPropagation","aria-label","aria-labelledby","aria-controls"],"mappings":"AAAA;;AAEA,SAAgCA,UAAU,QAAQ,QAAQ;AAG1D,SAASC,KAAK,QAAQ,mBAAmB;AAEzC,SAASC,SAAS,QAAQ,iBAAiB;AAE3C,MAAMC,OAAO;AACX,aAAa;AACf;AA8DA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiEC,GACD,OAAO,MAAMC,2BAAaJ,WACxB,SAASI,WAAWC,KAAK,EAAEC,GAAG;IAC5B,MAAM,EACJ,mBAAmBC,cAAc,EACjC,cAAcC,YAAY,CAACD,iBAAiB,eAAeE,SAAS,EACpE,iBAAiBC,YAAY,EAC7BC,IAAI,EACJC,IAAI,EACJC,SAAS,EACTC,SAAS,EACTC,aAAa,EACbC,WAAW,EACXC,KAAK,EACLC,OAAO,EACPC,QAAQ,EACRC,cAAc,EACdC,UAAU,EACVC,UAAUnB,IAAI,EACdoB,KAAK,EACLC,QAAQ,EACRC,SAAS,EACT,GAAGC,WACJ,GAAGrB;IAEJ,qBACE,KAACH;QACE,GAAGwB,SAAS;QACbpB,KAAKA;QACLqB,QAAQ;QACRC,WAAW;QACXN,SAAS,CAACO;YACRA,MAAMC,eAAe;YACrBR,QAAQO;QACV;kBAEA,cAAA,KAAC5B;YACC8B,cAAYvB;YACZwB,mBAAiBzB;YACjB0B,iBAAevB;YACfC,MAAMA;YACNC,MAAMA;YACNC,WAAWA;YACXC,WAAWA;YACXC,eAAeA;YACfC,aAAaA;YACbC,OAAOA;YACPC,SAASA;YACTE,gBAAgBA;YAChBG,OAAOA;YACPC,UAAUA;YACVL,UAAUA;YACVM,WAAWA;YACV,GAAGJ,UAAU;;;AAItB,GACA"}

package/dist/table/_table.scss

@@ -4,6 +4,7 @@
 
 @use "sass:map";
 @use "../utils";
+@use "../spacing";
 @use "../box-shadows";
 @use "../theme/theme";
 @use "../icon/icon";
@@ -184,20 +185,20 @@ $cell-header-dense-height: 2.125rem !default;
 
 /// The default `TableCell` horizontal padding.
 /// @type Number
-$cell-horizontal-padding: 1rem !default;
+$cell-horizontal-padding: spacing.get-var(md) !default;
 
 /// The default `TableCell` vertical padding.
 /// @type Number
-$cell-vertical-padding: 0.375rem !default;
+$cell-vertical-padding: calc(spacing.get-var(xs) * 1.5) !default;
 
 /// The default `TableCheckbox` and `TableRadio` horizontal padding.
 /// @type Number
 ///
-$cell-input-toggle-horizontal-padding: 0.5rem !default;
+$cell-input-toggle-horizontal-padding: spacing.get-var(sm) !default;
 
 /// The default `gap` between items in a sortable `TableCell`.
 /// @type Number
-$cell-content-gap: icon.$spacing !default;
+$cell-content-gap: spacing.get-var(sm) !default;
 
 /// This is the default position of a row based sticky `TableCell`.
 /// @type Number

package/dist/tabs/TabListScrollButton.d.ts

@@ -8,7 +8,7 @@ import { type GetTabListScrollToOptions } from "./getTabListScrollToOptions.js";
  * @since 6.0.0
  */
 export interface BaseTabListScrollButtonProps extends HTMLAttributes<HTMLDivElement>, ButtonClassNameThemeOptions {
-    buttonProps?: PropsWithRef<ButtonProps, HTMLButtonElement>;
+    buttonProps?: PropsWithRef<ButtonProps>;
     /** @defaultValue `false` */
     disableTransition?: boolean;
     /** @defaultValue {@link getTabListScrollToOptions} */

package/dist/tabs/TabListScrollButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/tabs/TabListScrollButton.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  type HTMLAttributes,\n  forwardRef,\n  useCallback,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { Button, type ButtonProps } from \"../button/Button.js\";\nimport { type ButtonClassNameThemeOptions } from \"../button/styles.js\";\nimport { getIcon } from \"../icon/config.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { useDir } from \"../typography/WritingDirectionProvider.js\";\nimport { useIntersectionObserver } from \"../useIntersectionObserver.js\";\nimport { applyRef } from \"../utils/applyRef.js\";\nimport {\n  type GetTabListScrollToOptions,\n  getTabListScrollToOptions,\n} from \"./getTabListScrollToOptions.js\";\nimport {\n  tabListScrollButton,\n  tabListScrollButtonContainer,\n} from \"./tabListScrollButtonStyles.js\";\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport interface BaseTabListScrollButtonProps\n  extends HTMLAttributes<HTMLDivElement>,\n    ButtonClassNameThemeOptions {\n  buttonProps?: PropsWithRef<ButtonProps, HTMLButtonElement>;\n\n  /** @defaultValue `false` */\n  disableTransition?: boolean;\n\n  /** @defaultValue {@link getTabListScrollToOptions} */\n  getScrollToOptions?: GetTabListScrollToOptions;\n}\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport interface TabListScrollButtonProps extends BaseTabListScrollButtonProps {\n  type: \"back\" | \"forward\";\n  /** @defaultValue `false` */\n  vertical?: boolean;\n}\n\n/**\n * **Client Component**\n *\n * @internal\n * @since 6.0.0\n */\nexport const TabListScrollButton = forwardRef<\n  HTMLDivElement,\n  TabListScrollButtonProps\n>(function TabListScrollButton(props, ref) {\n  const {\n    \"aria-label\": ariaLabel,\n    className,\n    buttonProps,\n    type,\n    theme,\n    themeType,\n    buttonType = \"icon\",\n    disabled: propDisabled,\n    children: propChildren,\n    getScrollToOptions = getTabListScrollToOptions,\n    vertical = false,\n    disableTransition = false,\n    ...remaining\n  } = props;\n\n  const forward = type === \"forward\";\n  const iconButton = buttonType === \"icon\";\n  const icon = getIcon(type);\n  const children = propChildren || icon;\n\n  const root = useRef<HTMLElement | null>(null);\n  const isRTL = useDir().dir === \"rtl\";\n  const [disabled, setDisabled] = useState(!forward);\n  const nodeRef = useIntersectionObserver({\n    root,\n    rootMargin: \"1px\",\n    onUpdate: useCallback(([entry]) => {\n      setDisabled(entry.intersectionRatio === 1);\n    }, []),\n  });\n\n  return (\n    <>\n      {!forward && <span ref={nodeRef} />}\n      <div\n        {...remaining}\n        ref={(instance) => {\n          applyRef(instance, ref);\n          root.current = instance?.parentElement || null;\n        }}\n        className={tabListScrollButtonContainer({\n          forward,\n          vertical,\n          className,\n        })}\n      >\n        <Button\n          aria-label={ariaLabel || (iconButton ? type : undefined)}\n          theme={theme}\n          themeType={themeType}\n          buttonType={buttonType}\n          disabled={propDisabled || disabled}\n          {...buttonProps}\n          className={tabListScrollButton({\n            className: buttonProps?.className,\n            vertical,\n          })}\n          onClick={(event) => {\n            buttonProps?.onClick?.(event);\n            const container = root.current;\n            if (!container) {\n              return;\n            }\n\n            container.scrollTo(\n              getScrollToOptions({\n                isRTL,\n                animate: !disableTransition,\n                vertical,\n                container,\n                increment: forward,\n              })\n            );\n          }}\n        >\n          {children}\n        </Button>\n      </div>\n      {forward && <span ref={nodeRef} />}\n    </>\n  );\n});\n"],"names":["forwardRef","useCallback","useRef","useState","Button","getIcon","useDir","useIntersectionObserver","applyRef","getTabListScrollToOptions","tabListScrollButton","tabListScrollButtonContainer","TabListScrollButton","props","ref","ariaLabel","className","buttonProps","type","theme","themeType","buttonType","disabled","propDisabled","children","propChildren","getScrollToOptions","vertical","disableTransition","remaining","forward","iconButton","icon","root","isRTL","dir","setDisabled","nodeRef","rootMargin","onUpdate","entry","intersectionRatio","span","div","instance","current","parentElement","aria-label","undefined","onClick","event","container","scrollTo","animate","increment"],"mappings":"AAAA;;AAEA,SAEEA,UAAU,EACVC,WAAW,EACXC,MAAM,EACNC,QAAQ,QACH,QAAQ;AAEf,SAASC,MAAM,QAA0B,sBAAsB;AAE/D,SAASC,OAAO,QAAQ,oBAAoB;AAE5C,SAASC,MAAM,QAAQ,4CAA4C;AACnE,SAASC,uBAAuB,QAAQ,gCAAgC;AACxE,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAEEC,yBAAyB,QACpB,iCAAiC;AACxC,SACEC,mBAAmB,EACnBC,4BAA4B,QACvB,iCAAiC;AA4BxC;;;;;CAKC,GACD,OAAO,MAAMC,oCAAsBZ,WAGjC,SAASY,oBAAoBC,KAAK,EAAEC,GAAG;IACvC,MAAM,EACJ,cAAcC,SAAS,EACvBC,SAAS,EACTC,WAAW,EACXC,IAAI,EACJC,KAAK,EACLC,SAAS,EACTC,aAAa,MAAM,EACnBC,UAAUC,YAAY,EACtBC,UAAUC,YAAY,EACtBC,qBAAqBjB,yBAAyB,EAC9CkB,WAAW,KAAK,EAChBC,oBAAoB,KAAK,EACzB,GAAGC,WACJ,GAAGhB;IAEJ,MAAMiB,UAAUZ,SAAS;IACzB,MAAMa,aAAaV,eAAe;IAClC,MAAMW,OAAO3B,QAAQa;IACrB,MAAMM,WAAWC,gBAAgBO;IAEjC,MAAMC,OAAO/B,OAA2B;IACxC,MAAMgC,QAAQ5B,SAAS6B,GAAG,KAAK;IAC/B,MAAM,CAACb,UAAUc,YAAY,GAAGjC,SAAS,CAAC2B;IAC1C,MAAMO,UAAU9B,wBAAwB;QACtC0B;QACAK,YAAY;QACZC,UAAUtC,YAAY,CAAC,CAACuC,MAAM;YAC5BJ,YAAYI,MAAMC,iBAAiB,KAAK;QAC1C,GAAG,EAAE;IACP;IAEA,qBACE;;YACG,CAACX,yBAAW,KAACY;gBAAK5B,KAAKuB;;0BACxB,KAACM;gBACE,GAAGd,SAAS;gBACbf,KAAK,CAAC8B;oBACJpC,SAASoC,UAAU9B;oBACnBmB,KAAKY,OAAO,GAAGD,UAAUE,iBAAiB;gBAC5C;gBACA9B,WAAWL,6BAA6B;oBACtCmB;oBACAH;oBACAX;gBACF;0BAEA,cAAA,KAACZ;oBACC2C,cAAYhC,aAAcgB,CAAAA,aAAab,OAAO8B,SAAQ;oBACtD7B,OAAOA;oBACPC,WAAWA;oBACXC,YAAYA;oBACZC,UAAUC,gBAAgBD;oBACzB,GAAGL,WAAW;oBACfD,WAAWN,oBAAoB;wBAC7BM,WAAWC,aAAaD;wBACxBW;oBACF;oBACAsB,SAAS,CAACC;wBACRjC,aAAagC,UAAUC;wBACvB,MAAMC,YAAYlB,KAAKY,OAAO;wBAC9B,IAAI,CAACM,WAAW;4BACd;wBACF;wBAEAA,UAAUC,QAAQ,CAChB1B,mBAAmB;4BACjBQ;4BACAmB,SAAS,CAACzB;4BACVD;4BACAwB;4BACAG,WAAWxB;wBACb;oBAEJ;8BAECN;;;YAGJM,yBAAW,KAACY;gBAAK5B,KAAKuB;;;;AAG7B,GAAG"}
+{"version":3,"sources":["../../src/tabs/TabListScrollButton.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  type HTMLAttributes,\n  forwardRef,\n  useCallback,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { Button, type ButtonProps } from \"../button/Button.js\";\nimport { type ButtonClassNameThemeOptions } from \"../button/styles.js\";\nimport { getIcon } from \"../icon/config.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { useDir } from \"../typography/WritingDirectionProvider.js\";\nimport { useIntersectionObserver } from \"../useIntersectionObserver.js\";\nimport { applyRef } from \"../utils/applyRef.js\";\nimport {\n  type GetTabListScrollToOptions,\n  getTabListScrollToOptions,\n} from \"./getTabListScrollToOptions.js\";\nimport {\n  tabListScrollButton,\n  tabListScrollButtonContainer,\n} from \"./tabListScrollButtonStyles.js\";\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport interface BaseTabListScrollButtonProps\n  extends HTMLAttributes<HTMLDivElement>,\n    ButtonClassNameThemeOptions {\n  buttonProps?: PropsWithRef<ButtonProps>;\n\n  /** @defaultValue `false` */\n  disableTransition?: boolean;\n\n  /** @defaultValue {@link getTabListScrollToOptions} */\n  getScrollToOptions?: GetTabListScrollToOptions;\n}\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport interface TabListScrollButtonProps extends BaseTabListScrollButtonProps {\n  type: \"back\" | \"forward\";\n  /** @defaultValue `false` */\n  vertical?: boolean;\n}\n\n/**\n * **Client Component**\n *\n * @internal\n * @since 6.0.0\n */\nexport const TabListScrollButton = forwardRef<\n  HTMLDivElement,\n  TabListScrollButtonProps\n>(function TabListScrollButton(props, ref) {\n  const {\n    \"aria-label\": ariaLabel,\n    className,\n    buttonProps,\n    type,\n    theme,\n    themeType,\n    buttonType = \"icon\",\n    disabled: propDisabled,\n    children: propChildren,\n    getScrollToOptions = getTabListScrollToOptions,\n    vertical = false,\n    disableTransition = false,\n    ...remaining\n  } = props;\n\n  const forward = type === \"forward\";\n  const iconButton = buttonType === \"icon\";\n  const icon = getIcon(type);\n  const children = propChildren || icon;\n\n  const root = useRef<HTMLElement | null>(null);\n  const isRTL = useDir().dir === \"rtl\";\n  const [disabled, setDisabled] = useState(!forward);\n  const nodeRef = useIntersectionObserver({\n    root,\n    rootMargin: \"1px\",\n    onUpdate: useCallback(([entry]) => {\n      setDisabled(entry.intersectionRatio === 1);\n    }, []),\n  });\n\n  return (\n    <>\n      {!forward && <span ref={nodeRef} />}\n      <div\n        {...remaining}\n        ref={(instance) => {\n          applyRef(instance, ref);\n          root.current = instance?.parentElement || null;\n        }}\n        className={tabListScrollButtonContainer({\n          forward,\n          vertical,\n          className,\n        })}\n      >\n        <Button\n          aria-label={ariaLabel || (iconButton ? type : undefined)}\n          theme={theme}\n          themeType={themeType}\n          buttonType={buttonType}\n          disabled={propDisabled || disabled}\n          {...buttonProps}\n          className={tabListScrollButton({\n            className: buttonProps?.className,\n            vertical,\n          })}\n          onClick={(event) => {\n            buttonProps?.onClick?.(event);\n            const container = root.current;\n            if (!container) {\n              return;\n            }\n\n            container.scrollTo(\n              getScrollToOptions({\n                isRTL,\n                animate: !disableTransition,\n                vertical,\n                container,\n                increment: forward,\n              })\n            );\n          }}\n        >\n          {children}\n        </Button>\n      </div>\n      {forward && <span ref={nodeRef} />}\n    </>\n  );\n});\n"],"names":["forwardRef","useCallback","useRef","useState","Button","getIcon","useDir","useIntersectionObserver","applyRef","getTabListScrollToOptions","tabListScrollButton","tabListScrollButtonContainer","TabListScrollButton","props","ref","ariaLabel","className","buttonProps","type","theme","themeType","buttonType","disabled","propDisabled","children","propChildren","getScrollToOptions","vertical","disableTransition","remaining","forward","iconButton","icon","root","isRTL","dir","setDisabled","nodeRef","rootMargin","onUpdate","entry","intersectionRatio","span","div","instance","current","parentElement","aria-label","undefined","onClick","event","container","scrollTo","animate","increment"],"mappings":"AAAA;;AAEA,SAEEA,UAAU,EACVC,WAAW,EACXC,MAAM,EACNC,QAAQ,QACH,QAAQ;AAEf,SAASC,MAAM,QAA0B,sBAAsB;AAE/D,SAASC,OAAO,QAAQ,oBAAoB;AAE5C,SAASC,MAAM,QAAQ,4CAA4C;AACnE,SAASC,uBAAuB,QAAQ,gCAAgC;AACxE,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAEEC,yBAAyB,QACpB,iCAAiC;AACxC,SACEC,mBAAmB,EACnBC,4BAA4B,QACvB,iCAAiC;AA4BxC;;;;;CAKC,GACD,OAAO,MAAMC,oCAAsBZ,WAGjC,SAASY,oBAAoBC,KAAK,EAAEC,GAAG;IACvC,MAAM,EACJ,cAAcC,SAAS,EACvBC,SAAS,EACTC,WAAW,EACXC,IAAI,EACJC,KAAK,EACLC,SAAS,EACTC,aAAa,MAAM,EACnBC,UAAUC,YAAY,EACtBC,UAAUC,YAAY,EACtBC,qBAAqBjB,yBAAyB,EAC9CkB,WAAW,KAAK,EAChBC,oBAAoB,KAAK,EACzB,GAAGC,WACJ,GAAGhB;IAEJ,MAAMiB,UAAUZ,SAAS;IACzB,MAAMa,aAAaV,eAAe;IAClC,MAAMW,OAAO3B,QAAQa;IACrB,MAAMM,WAAWC,gBAAgBO;IAEjC,MAAMC,OAAO/B,OAA2B;IACxC,MAAMgC,QAAQ5B,SAAS6B,GAAG,KAAK;IAC/B,MAAM,CAACb,UAAUc,YAAY,GAAGjC,SAAS,CAAC2B;IAC1C,MAAMO,UAAU9B,wBAAwB;QACtC0B;QACAK,YAAY;QACZC,UAAUtC,YAAY,CAAC,CAACuC,MAAM;YAC5BJ,YAAYI,MAAMC,iBAAiB,KAAK;QAC1C,GAAG,EAAE;IACP;IAEA,qBACE;;YACG,CAACX,yBAAW,KAACY;gBAAK5B,KAAKuB;;0BACxB,KAACM;gBACE,GAAGd,SAAS;gBACbf,KAAK,CAAC8B;oBACJpC,SAASoC,UAAU9B;oBACnBmB,KAAKY,OAAO,GAAGD,UAAUE,iBAAiB;gBAC5C;gBACA9B,WAAWL,6BAA6B;oBACtCmB;oBACAH;oBACAX;gBACF;0BAEA,cAAA,KAACZ;oBACC2C,cAAYhC,aAAcgB,CAAAA,aAAab,OAAO8B,SAAQ;oBACtD7B,OAAOA;oBACPC,WAAWA;oBACXC,YAAYA;oBACZC,UAAUC,gBAAgBD;oBACzB,GAAGL,WAAW;oBACfD,WAAWN,oBAAoB;wBAC7BM,WAAWC,aAAaD;wBACxBW;oBACF;oBACAsB,SAAS,CAACC;wBACRjC,aAAagC,UAAUC;wBACvB,MAAMC,YAAYlB,KAAKY,OAAO;wBAC9B,IAAI,CAACM,WAAW;4BACd;wBACF;wBAEAA,UAAUC,QAAQ,CAChB1B,mBAAmB;4BACjBQ;4BACAmB,SAAS,CAACzB;4BACVD;4BACAwB;4BACAG,WAAWxB;wBACb;oBAEJ;8BAECN;;;YAGJM,yBAAW,KAACY;gBAAK5B,KAAKuB;;;;AAG7B,GAAG"}

package/dist/tabs/_tabs.scss

@@ -5,6 +5,7 @@
 @use "sass:map";
 
 @use "../utils";
+@use "../spacing";
 @use "../theme/theme";
 @use "../transition/transition";
 @use "../typography/typography";
@@ -75,7 +76,7 @@ $typography: map.remove(typography.$button-styles, line-height) !default;
 
 /// The default gap between the `Tab` icon and children.
 /// @type Number
-$gap: icon.$spacing !default;
+$gap: spacing.get-var(sm) !default;
 
 /// The default `Tab` height.
 /// @type Number
@@ -87,11 +88,11 @@ $stacked-height: 4.5rem !default;
 
 /// The default `Tab` horizontal padding.
 /// @type Number
-$horizontal-padding: 1rem !default;
+$horizontal-padding: spacing.get-var(md) !default;
 
 /// The default `Tab` vertical padding while `stacked`.
 /// @type Number
-$vertical-padding: 0.75rem !default;
+$vertical-padding: calc(spacing.get-var(sm) * 1.5) !default;
 
 /// The `Tab` min width.
 /// @type Number
@@ -131,7 +132,9 @@ $transition-timing-function: transition.$linear-timing-function !default;
 
 /// The default padding for a `TabList` with the `padded` prop enabled.
 /// @type Number
-$tablist-scrollable-horizontal-padding: 3.25rem !default;
+$tablist-scrollable-horizontal-padding: calc(
+  spacing.get-var(xl) * 1.625
+) !default;
 
 /// The default z-index for a `TabList` scroll button.
 /// @type Number

package/dist/theme/utils.js

@@ -1,4 +1,4 @@
-import { black, white } from "./colors.js";
+/* eslint-disable no-param-reassign */ import { black, white } from "./colors.js";
 const RGB_REGEX = /^rgb\(((\b([01]?\d\d?|2[0-4]\d|25[0-5])\b),?){3}\)$/;
 const SHORTHAND_REGEX = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
 const VERBOSE_REGEX = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i;
@@ -25,7 +25,7 @@ const VERBOSE_REGEX = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i;
 }
 export function getRGB(color) {
     // chrome 102.0.50005.63 apparently has whitespace when calling `window.getComputedStyle(element)`
-    // remove whitepsace to make it easy for supporting rgb or hex
+    // remove whitespace to make it easy for supporting rgb or hex
     color = color.replace(/\s/g, "");
     const rgbMatches = color.match(RGB_REGEX);
     if (rgbMatches) {

package/dist/theme/utils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/theme/utils.ts"],"sourcesContent":["import { black, white } from \"./colors.js\";\n\nconst RGB_REGEX = /^rgb\\(((\\b([01]?\\d\\d?|2[0-4]\\d|25[0-5])\\b),?){3}\\)$/;\nconst SHORTHAND_REGEX = /^#?([a-f\\d])([a-f\\d])([a-f\\d])$/i;\nconst VERBOSE_REGEX = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i;\n\nexport type RGB = readonly [red: number, green: number, blue: number];\n\n/**\n * Converts a hex string into an rgb value. This is useful for detecting color\n * contrast ratios and other stuff.\n *\n * @param hex - The hex string to convert\n * @returns an object containing the r, g, b values for the color.\n */\nexport function hexToRGB(hex: string): RGB {\n  if (\n    process.env.NODE_ENV !== \"production\" &&\n    !SHORTHAND_REGEX.test(hex) &&\n    !VERBOSE_REGEX.test(hex)\n  ) {\n    throw new TypeError(\"Invalid color string.\");\n  }\n\n  hex = hex.replace(\n    SHORTHAND_REGEX,\n    (_m, r, g, b) => `${r}${r}${g}${g}${b}${b}`\n  );\n\n  const result = hex.match(VERBOSE_REGEX) || [];\n  const r = parseInt(result[1] || \"\", 16) || 0;\n  const g = parseInt(result[2] || \"\", 16) || 0;\n  const b = parseInt(result[3] || \"\", 16) || 0;\n\n  return [r, g, b];\n}\n\nexport function getRGB(color: string): RGB {\n  // chrome 102.0.50005.63 apparently has whitespace when calling `window.getComputedStyle(element)`\n  // remove whitepsace to make it easy for supporting rgb or hex\n  color = color.replace(/\\s/g, \"\");\n  const rgbMatches = color.match(RGB_REGEX);\n  if (rgbMatches) {\n    const r = parseInt(rgbMatches[1] || \"\", 16) || 0;\n    const g = parseInt(rgbMatches[2] || \"\", 16) || 0;\n    const b = parseInt(rgbMatches[3] || \"\", 16) || 0;\n\n    return [r, g, b];\n  }\n\n  return hexToRGB(color);\n}\n\nconst RED_MULTIPLIER = 0.2126;\nconst GREEN_MULTIPLIER = 0.7152;\nconst BLUE_MULTIPLIER = 0.0722;\n\n/**\n * I really couldn't figure out how to name these \"magic\" numbers since the\n * formula doesn't really describe it much:\n *\n * @see https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests\n * @internal\n */\nfunction get8BitColor(color: number): number {\n  color /= 255;\n\n  if (color <= 0.03928) {\n    return color / 12.92;\n  }\n\n  return ((color + 0.055) / 1.055) ** 2.4;\n}\n\n/**\n * A number closest to 0 should be closest to black while a number closest to 1\n * should be closest to white.\n *\n * @see https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests\n * @internal\n */\nexport function getLuminance(color: string): number {\n  const [r, g, b] = getRGB(color);\n\n  const red = get8BitColor(r) * RED_MULTIPLIER;\n  const green = get8BitColor(g) * GREEN_MULTIPLIER;\n  const blue = get8BitColor(b) * BLUE_MULTIPLIER;\n\n  return red + green + blue;\n}\n\n/**\n * Gets the contrast ratio between a background color and a foreground color.\n *\n * @see https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests\n *\n * @param background - The background color\n * @param foreground - The foreground color. This is normally the `color` css\n * value.\n * @returns the contrast ratio between the background and foreground colors.\n */\nexport function getContrastRatio(\n  background: string,\n  foreground: string\n): number {\n  const backgroundLuminance = getLuminance(background) + 0.05;\n  const foregroundLuminance = getLuminance(foreground) + 0.05;\n\n  return (\n    Math.max(backgroundLuminance, foregroundLuminance) /\n    Math.min(backgroundLuminance, foregroundLuminance)\n  );\n}\n\n/**\n * The type of contrast ratio compliance to confirm to. The ratios in order are:\n * - 3:1 for large text (18pt normal or 14pt bold)\n * - 4.5:1 for normal text\n * - 7:1 for Level AAA requirements.\n *\n * @see https://www.w3.org/TR/WCAG20/#visual-audio-contrast\n * @see https://www.w3.org/TR/WCAG20/#larger-scaledef\n */\nexport type ContrastRatioCompliance = \"large\" | \"normal\" | \"AAA\";\n\n/**\n * The contrast ratio that can be used for large text where large text is\n * considered 18pt or 14pt bold.\n */\nexport const LARGE_TEXT_CONTRAST_RATIO = 3;\n\n/**\n * The contrast ratio that can be used for normal text.\n */\nexport const NORMAL_TEXT_CONTRAST_RATIO = 4.5;\n\n/**\n * The AAA contrast ratio for passing WGAC 2.0 color contrast ratios.\n */\nexport const AAA_CONTRAST_RATIO = 7;\n\n/**\n * Checks if there is an acceptable contrast ratio between the background and\n * foreground colors based on the provided compliance level.\n *\n * @param background - The background color to check against\n * @param foreground - The foreground color to check against\n * @param compliance - The compliance level to use or a custom number as a\n * ratio.\n * @returns true if there is enough contrast between the foreground and\n * background colors for the provided compliance level.\n */\nexport function isContrastCompliant(\n  background: string,\n  foreground: string,\n  compliance: ContrastRatioCompliance | number = \"normal\"\n): boolean {\n  let ratio: number;\n  switch (compliance) {\n    case \"large\":\n      ratio = LARGE_TEXT_CONTRAST_RATIO;\n      break;\n    case \"normal\":\n      ratio = NORMAL_TEXT_CONTRAST_RATIO;\n      break;\n    case \"AAA\":\n      ratio = AAA_CONTRAST_RATIO;\n      break;\n    default:\n      ratio = compliance;\n  }\n\n  return getContrastRatio(background, foreground) >= ratio;\n}\n\n/**\n * Returns the highest contrast color to the provided `backgroundColor`. This is\n * normally used to ensure that a new background color can use an accessible text\n * color of either `#000` or `#fff`.\n *\n * This is pretty much a javascript implementation as the `contrast-color` Sass\n * function.\n *\n * @since 6.0.0\n */\nexport function contrastColor(\n  backgroundColor: string,\n  lightColor = white,\n  darkColor = black\n): string {\n  const lightContrast = getContrastRatio(backgroundColor, lightColor);\n  const darkContrast = getContrastRatio(backgroundColor, darkColor);\n\n  return lightContrast > darkContrast ? lightColor : darkColor;\n}\n"],"names":["black","white","RGB_REGEX","SHORTHAND_REGEX","VERBOSE_REGEX","hexToRGB","hex","process","env","NODE_ENV","test","TypeError","replace","_m","r","g","b","result","match","parseInt","getRGB","color","rgbMatches","RED_MULTIPLIER","GREEN_MULTIPLIER","BLUE_MULTIPLIER","get8BitColor","getLuminance","red","green","blue","getContrastRatio","background","foreground","backgroundLuminance","foregroundLuminance","Math","max","min","LARGE_TEXT_CONTRAST_RATIO","NORMAL_TEXT_CONTRAST_RATIO","AAA_CONTRAST_RATIO","isContrastCompliant","compliance","ratio","contrastColor","backgroundColor","lightColor","darkColor","lightContrast","darkContrast"],"mappings":"AAAA,SAASA,KAAK,EAAEC,KAAK,QAAQ,cAAc;AAE3C,MAAMC,YAAY;AAClB,MAAMC,kBAAkB;AACxB,MAAMC,gBAAgB;AAItB;;;;;;CAMC,GACD,OAAO,SAASC,SAASC,GAAW;IAClC,IACEC,QAAQC,GAAG,CAACC,QAAQ,KAAK,gBACzB,CAACN,gBAAgBO,IAAI,CAACJ,QACtB,CAACF,cAAcM,IAAI,CAACJ,MACpB;QACA,MAAM,IAAIK,UAAU;IACtB;IAEAL,MAAMA,IAAIM,OAAO,CACfT,iBACA,CAACU,IAAIC,GAAGC,GAAGC,IAAM,GAAGF,IAAIA,IAAIC,IAAIA,IAAIC,IAAIA,GAAG;IAG7C,MAAMC,SAASX,IAAIY,KAAK,CAACd,kBAAkB,EAAE;IAC7C,MAAMU,IAAIK,SAASF,MAAM,CAAC,EAAE,IAAI,IAAI,OAAO;IAC3C,MAAMF,IAAII,SAASF,MAAM,CAAC,EAAE,IAAI,IAAI,OAAO;IAC3C,MAAMD,IAAIG,SAASF,MAAM,CAAC,EAAE,IAAI,IAAI,OAAO;IAE3C,OAAO;QAACH;QAAGC;QAAGC;KAAE;AAClB;AAEA,OAAO,SAASI,OAAOC,KAAa;IAClC,kGAAkG;IAClG,8DAA8D;IAC9DA,QAAQA,MAAMT,OAAO,CAAC,OAAO;IAC7B,MAAMU,aAAaD,MAAMH,KAAK,CAAChB;IAC/B,IAAIoB,YAAY;QACd,MAAMR,IAAIK,SAASG,UAAU,CAAC,EAAE,IAAI,IAAI,OAAO;QAC/C,MAAMP,IAAII,SAASG,UAAU,CAAC,EAAE,IAAI,IAAI,OAAO;QAC/C,MAAMN,IAAIG,SAASG,UAAU,CAAC,EAAE,IAAI,IAAI,OAAO;QAE/C,OAAO;YAACR;YAAGC;YAAGC;SAAE;IAClB;IAEA,OAAOX,SAASgB;AAClB;AAEA,MAAME,iBAAiB;AACvB,MAAMC,mBAAmB;AACzB,MAAMC,kBAAkB;AAExB;;;;;;CAMC,GACD,SAASC,aAAaL,KAAa;IACjCA,SAAS;IAET,IAAIA,SAAS,SAAS;QACpB,OAAOA,QAAQ;IACjB;IAEA,OAAO,AAAC,CAAA,AAACA,CAAAA,QAAQ,KAAI,IAAK,KAAI,KAAM;AACtC;AAEA;;;;;;CAMC,GACD,OAAO,SAASM,aAAaN,KAAa;IACxC,MAAM,CAACP,GAAGC,GAAGC,EAAE,GAAGI,OAAOC;IAEzB,MAAMO,MAAMF,aAAaZ,KAAKS;IAC9B,MAAMM,QAAQH,aAAaX,KAAKS;IAChC,MAAMM,OAAOJ,aAAaV,KAAKS;IAE/B,OAAOG,MAAMC,QAAQC;AACvB;AAEA;;;;;;;;;CASC,GACD,OAAO,SAASC,iBACdC,UAAkB,EAClBC,UAAkB;IAElB,MAAMC,sBAAsBP,aAAaK,cAAc;IACvD,MAAMG,sBAAsBR,aAAaM,cAAc;IAEvD,OACEG,KAAKC,GAAG,CAACH,qBAAqBC,uBAC9BC,KAAKE,GAAG,CAACJ,qBAAqBC;AAElC;AAaA;;;CAGC,GACD,OAAO,MAAMI,4BAA4B,EAAE;AAE3C;;CAEC,GACD,OAAO,MAAMC,6BAA6B,IAAI;AAE9C;;CAEC,GACD,OAAO,MAAMC,qBAAqB,EAAE;AAEpC;;;;;;;;;;CAUC,GACD,OAAO,SAASC,oBACdV,UAAkB,EAClBC,UAAkB,EAClBU,aAA+C,QAAQ;IAEvD,IAAIC;IACJ,OAAQD;QACN,KAAK;YACHC,QAAQL;YACR;QACF,KAAK;YACHK,QAAQJ;YACR;QACF,KAAK;YACHI,QAAQH;YACR;QACF;YACEG,QAAQD;IACZ;IAEA,OAAOZ,iBAAiBC,YAAYC,eAAeW;AACrD;AAEA;;;;;;;;;CASC,GACD,OAAO,SAASC,cACdC,eAAuB,EACvBC,aAAa9C,KAAK,EAClB+C,YAAYhD,KAAK;IAEjB,MAAMiD,gBAAgBlB,iBAAiBe,iBAAiBC;IACxD,MAAMG,eAAenB,iBAAiBe,iBAAiBE;IAEvD,OAAOC,gBAAgBC,eAAeH,aAAaC;AACrD"}
+{"version":3,"sources":["../../src/theme/utils.ts"],"sourcesContent":["/* eslint-disable no-param-reassign */\nimport { black, white } from \"./colors.js\";\n\nconst RGB_REGEX = /^rgb\\(((\\b([01]?\\d\\d?|2[0-4]\\d|25[0-5])\\b),?){3}\\)$/;\nconst SHORTHAND_REGEX = /^#?([a-f\\d])([a-f\\d])([a-f\\d])$/i;\nconst VERBOSE_REGEX = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i;\n\nexport type RGB = readonly [red: number, green: number, blue: number];\n\n/**\n * Converts a hex string into an rgb value. This is useful for detecting color\n * contrast ratios and other stuff.\n *\n * @param hex - The hex string to convert\n * @returns an object containing the r, g, b values for the color.\n */\nexport function hexToRGB(hex: string): RGB {\n  if (\n    process.env.NODE_ENV !== \"production\" &&\n    !SHORTHAND_REGEX.test(hex) &&\n    !VERBOSE_REGEX.test(hex)\n  ) {\n    throw new TypeError(\"Invalid color string.\");\n  }\n\n  hex = hex.replace(\n    SHORTHAND_REGEX,\n    (_m, r, g, b) => `${r}${r}${g}${g}${b}${b}`\n  );\n\n  const result = hex.match(VERBOSE_REGEX) || [];\n  const r = parseInt(result[1] || \"\", 16) || 0;\n  const g = parseInt(result[2] || \"\", 16) || 0;\n  const b = parseInt(result[3] || \"\", 16) || 0;\n\n  return [r, g, b];\n}\n\nexport function getRGB(color: string): RGB {\n  // chrome 102.0.50005.63 apparently has whitespace when calling `window.getComputedStyle(element)`\n  // remove whitespace to make it easy for supporting rgb or hex\n  color = color.replace(/\\s/g, \"\");\n  const rgbMatches = color.match(RGB_REGEX);\n  if (rgbMatches) {\n    const r = parseInt(rgbMatches[1] || \"\", 16) || 0;\n    const g = parseInt(rgbMatches[2] || \"\", 16) || 0;\n    const b = parseInt(rgbMatches[3] || \"\", 16) || 0;\n\n    return [r, g, b];\n  }\n\n  return hexToRGB(color);\n}\n\nconst RED_MULTIPLIER = 0.2126;\nconst GREEN_MULTIPLIER = 0.7152;\nconst BLUE_MULTIPLIER = 0.0722;\n\n/**\n * I really couldn't figure out how to name these \"magic\" numbers since the\n * formula doesn't really describe it much:\n *\n * @see https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests\n * @internal\n */\nfunction get8BitColor(color: number): number {\n  color /= 255;\n\n  if (color <= 0.03928) {\n    return color / 12.92;\n  }\n\n  return ((color + 0.055) / 1.055) ** 2.4;\n}\n\n/**\n * A number closest to 0 should be closest to black while a number closest to 1\n * should be closest to white.\n *\n * @see https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests\n * @internal\n */\nexport function getLuminance(color: string): number {\n  const [r, g, b] = getRGB(color);\n\n  const red = get8BitColor(r) * RED_MULTIPLIER;\n  const green = get8BitColor(g) * GREEN_MULTIPLIER;\n  const blue = get8BitColor(b) * BLUE_MULTIPLIER;\n\n  return red + green + blue;\n}\n\n/**\n * Gets the contrast ratio between a background color and a foreground color.\n *\n * @see https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests\n *\n * @param background - The background color\n * @param foreground - The foreground color. This is normally the `color` css\n * value.\n * @returns the contrast ratio between the background and foreground colors.\n */\nexport function getContrastRatio(\n  background: string,\n  foreground: string\n): number {\n  const backgroundLuminance = getLuminance(background) + 0.05;\n  const foregroundLuminance = getLuminance(foreground) + 0.05;\n\n  return (\n    Math.max(backgroundLuminance, foregroundLuminance) /\n    Math.min(backgroundLuminance, foregroundLuminance)\n  );\n}\n\n/**\n * The type of contrast ratio compliance to confirm to. The ratios in order are:\n * - 3:1 for large text (18pt normal or 14pt bold)\n * - 4.5:1 for normal text\n * - 7:1 for Level AAA requirements.\n *\n * @see https://www.w3.org/TR/WCAG20/#visual-audio-contrast\n * @see https://www.w3.org/TR/WCAG20/#larger-scaledef\n */\nexport type ContrastRatioCompliance = \"large\" | \"normal\" | \"AAA\";\n\n/**\n * The contrast ratio that can be used for large text where large text is\n * considered 18pt or 14pt bold.\n */\nexport const LARGE_TEXT_CONTRAST_RATIO = 3;\n\n/**\n * The contrast ratio that can be used for normal text.\n */\nexport const NORMAL_TEXT_CONTRAST_RATIO = 4.5;\n\n/**\n * The AAA contrast ratio for passing WGAC 2.0 color contrast ratios.\n */\nexport const AAA_CONTRAST_RATIO = 7;\n\n/**\n * Checks if there is an acceptable contrast ratio between the background and\n * foreground colors based on the provided compliance level.\n *\n * @param background - The background color to check against\n * @param foreground - The foreground color to check against\n * @param compliance - The compliance level to use or a custom number as a\n * ratio.\n * @returns true if there is enough contrast between the foreground and\n * background colors for the provided compliance level.\n */\nexport function isContrastCompliant(\n  background: string,\n  foreground: string,\n  compliance: ContrastRatioCompliance | number = \"normal\"\n): boolean {\n  let ratio: number;\n  switch (compliance) {\n    case \"large\":\n      ratio = LARGE_TEXT_CONTRAST_RATIO;\n      break;\n    case \"normal\":\n      ratio = NORMAL_TEXT_CONTRAST_RATIO;\n      break;\n    case \"AAA\":\n      ratio = AAA_CONTRAST_RATIO;\n      break;\n    default:\n      ratio = compliance;\n  }\n\n  return getContrastRatio(background, foreground) >= ratio;\n}\n\n/**\n * Returns the highest contrast color to the provided `backgroundColor`. This is\n * normally used to ensure that a new background color can use an accessible text\n * color of either `#000` or `#fff`.\n *\n * This is pretty much a javascript implementation as the `contrast-color` Sass\n * function.\n *\n * @since 6.0.0\n */\nexport function contrastColor(\n  backgroundColor: string,\n  lightColor = white,\n  darkColor = black\n): string {\n  const lightContrast = getContrastRatio(backgroundColor, lightColor);\n  const darkContrast = getContrastRatio(backgroundColor, darkColor);\n\n  return lightContrast > darkContrast ? lightColor : darkColor;\n}\n"],"names":["black","white","RGB_REGEX","SHORTHAND_REGEX","VERBOSE_REGEX","hexToRGB","hex","process","env","NODE_ENV","test","TypeError","replace","_m","r","g","b","result","match","parseInt","getRGB","color","rgbMatches","RED_MULTIPLIER","GREEN_MULTIPLIER","BLUE_MULTIPLIER","get8BitColor","getLuminance","red","green","blue","getContrastRatio","background","foreground","backgroundLuminance","foregroundLuminance","Math","max","min","LARGE_TEXT_CONTRAST_RATIO","NORMAL_TEXT_CONTRAST_RATIO","AAA_CONTRAST_RATIO","isContrastCompliant","compliance","ratio","contrastColor","backgroundColor","lightColor","darkColor","lightContrast","darkContrast"],"mappings":"AAAA,oCAAoC,GACpC,SAASA,KAAK,EAAEC,KAAK,QAAQ,cAAc;AAE3C,MAAMC,YAAY;AAClB,MAAMC,kBAAkB;AACxB,MAAMC,gBAAgB;AAItB;;;;;;CAMC,GACD,OAAO,SAASC,SAASC,GAAW;IAClC,IACEC,QAAQC,GAAG,CAACC,QAAQ,KAAK,gBACzB,CAACN,gBAAgBO,IAAI,CAACJ,QACtB,CAACF,cAAcM,IAAI,CAACJ,MACpB;QACA,MAAM,IAAIK,UAAU;IACtB;IAEAL,MAAMA,IAAIM,OAAO,CACfT,iBACA,CAACU,IAAIC,GAAGC,GAAGC,IAAM,GAAGF,IAAIA,IAAIC,IAAIA,IAAIC,IAAIA,GAAG;IAG7C,MAAMC,SAASX,IAAIY,KAAK,CAACd,kBAAkB,EAAE;IAC7C,MAAMU,IAAIK,SAASF,MAAM,CAAC,EAAE,IAAI,IAAI,OAAO;IAC3C,MAAMF,IAAII,SAASF,MAAM,CAAC,EAAE,IAAI,IAAI,OAAO;IAC3C,MAAMD,IAAIG,SAASF,MAAM,CAAC,EAAE,IAAI,IAAI,OAAO;IAE3C,OAAO;QAACH;QAAGC;QAAGC;KAAE;AAClB;AAEA,OAAO,SAASI,OAAOC,KAAa;IAClC,kGAAkG;IAClG,8DAA8D;IAC9DA,QAAQA,MAAMT,OAAO,CAAC,OAAO;IAC7B,MAAMU,aAAaD,MAAMH,KAAK,CAAChB;IAC/B,IAAIoB,YAAY;QACd,MAAMR,IAAIK,SAASG,UAAU,CAAC,EAAE,IAAI,IAAI,OAAO;QAC/C,MAAMP,IAAII,SAASG,UAAU,CAAC,EAAE,IAAI,IAAI,OAAO;QAC/C,MAAMN,IAAIG,SAASG,UAAU,CAAC,EAAE,IAAI,IAAI,OAAO;QAE/C,OAAO;YAACR;YAAGC;YAAGC;SAAE;IAClB;IAEA,OAAOX,SAASgB;AAClB;AAEA,MAAME,iBAAiB;AACvB,MAAMC,mBAAmB;AACzB,MAAMC,kBAAkB;AAExB;;;;;;CAMC,GACD,SAASC,aAAaL,KAAa;IACjCA,SAAS;IAET,IAAIA,SAAS,SAAS;QACpB,OAAOA,QAAQ;IACjB;IAEA,OAAO,AAAC,CAAA,AAACA,CAAAA,QAAQ,KAAI,IAAK,KAAI,KAAM;AACtC;AAEA;;;;;;CAMC,GACD,OAAO,SAASM,aAAaN,KAAa;IACxC,MAAM,CAACP,GAAGC,GAAGC,EAAE,GAAGI,OAAOC;IAEzB,MAAMO,MAAMF,aAAaZ,KAAKS;IAC9B,MAAMM,QAAQH,aAAaX,KAAKS;IAChC,MAAMM,OAAOJ,aAAaV,KAAKS;IAE/B,OAAOG,MAAMC,QAAQC;AACvB;AAEA;;;;;;;;;CASC,GACD,OAAO,SAASC,iBACdC,UAAkB,EAClBC,UAAkB;IAElB,MAAMC,sBAAsBP,aAAaK,cAAc;IACvD,MAAMG,sBAAsBR,aAAaM,cAAc;IAEvD,OACEG,KAAKC,GAAG,CAACH,qBAAqBC,uBAC9BC,KAAKE,GAAG,CAACJ,qBAAqBC;AAElC;AAaA;;;CAGC,GACD,OAAO,MAAMI,4BAA4B,EAAE;AAE3C;;CAEC,GACD,OAAO,MAAMC,6BAA6B,IAAI;AAE9C;;CAEC,GACD,OAAO,MAAMC,qBAAqB,EAAE;AAEpC;;;;;;;;;;CAUC,GACD,OAAO,SAASC,oBACdV,UAAkB,EAClBC,UAAkB,EAClBU,aAA+C,QAAQ;IAEvD,IAAIC;IACJ,OAAQD;QACN,KAAK;YACHC,QAAQL;YACR;QACF,KAAK;YACHK,QAAQJ;YACR;QACF,KAAK;YACHI,QAAQH;YACR;QACF;YACEG,QAAQD;IACZ;IAEA,OAAOZ,iBAAiBC,YAAYC,eAAeW;AACrD;AAEA;;;;;;;;;CASC,GACD,OAAO,SAASC,cACdC,eAAuB,EACvBC,aAAa9C,KAAK,EAClB+C,YAAYhD,KAAK;IAEjB,MAAMiD,gBAAgBlB,iBAAiBe,iBAAiBC;IACxD,MAAMG,eAAenB,iBAAiBe,iBAAiBE;IAEvD,OAAOC,gBAAgBC,eAAeH,aAAaC;AACrD"}