@react-md/core 6.0.2 → 6.1.0

package/dist/card/_card.scss

@@ -4,6 +4,8 @@
 
 @use "sass:map";
 @use "../utils";
+@use "../spacing";
+@use "../border-radius";
 @use "../theme/theme";
 @use "../box-shadows";
 @use "../typography/typography";
@@ -84,34 +86,34 @@ $border-width: divider.get-var(size) !default;
 
 /// The default border-radius for bordered cards
 /// @type Number
-$border-radius: 0.25rem !default;
+$border-radius: border-radius.get-var(xs) !default;
 
 /// The default padding to apply to `CardHeader`
 /// @type Number
-$header-padding: 1rem !default;
+$header-padding: spacing.get-var(md) !default;
 
 /// The default padding-top to apply to `CardHeader`
 /// @type Number
-$header-padding-top: 1.5rem !default;
+$header-padding-top: spacing.get-var(lg) !default;
 
 /// The default `column-gap` to apply to the `CardHeader`
 /// @type Number
-$header-spacing: 1rem !default;
+$header-spacing: spacing.get-var(md) !default;
 
 /// The default padding to apply to the `CardContent`
 /// @type Number
-$content-padding: 1rem !default;
+$content-padding: spacing.get-var(md) !default;
 
 /// The default padding-bottom to apply to the `CardContent` when it is the last
 /// child and the `$disable-content-last-child-padding` feature flag has
 /// not been disabled.
 ///
 /// @type Number
-$content-padding-bottom: 1.5rem !default;
+$content-padding-bottom: spacing.get-var(lg) !default;
 
 /// The default padding to apply to the `CardFooter`
 /// @type Number
-$footer-padding: 0.5rem !default;
+$footer-padding: spacing.get-var(sm) !default;
 
 /// The available configurable css variables and mostly used internally for the
 /// `get-var`, `set-var`, and `use-var` utils.

package/dist/chip/_chip.scss

@@ -5,6 +5,8 @@
 @use "sass:color";
 @use "sass:map";
 @use "../utils";
+@use "../border-radius";
+@use "../spacing";
 @use "../box-shadows";
 @use "../theme/a11y";
 @use "../theme/colors";
@@ -85,7 +87,7 @@ $disable-selected-icon-transition: false !default;
 /// The `gap` between items in the `Chip`.
 ///
 /// @type Number
-$gap: icon.$spacing !default;
+$gap: spacing.get-var(md) !default;
 
 /// The default `Chip` height.
 /// @type Number
@@ -94,7 +96,7 @@ $height: 2rem !default;
 /// The default `Chip` border radius.
 ///
 /// @type Number
-$border-radius: 1rem !default;
+$border-radius: border-radius.get-var(lg) !default;
 
 /// The default size for icons that are rendered within a `Chip` normally as
 /// the `leftAddon` or `rightAddon` props.
@@ -131,24 +133,24 @@ $typography: map.merge(
 /// The default horizontal padding on `Chip`s.
 ///
 /// @type Number
-$horizontal-padding: 0.75rem !default;
+$horizontal-padding: calc(spacing.get-var(md) * 1.25) !default;
 
 /// The default vertical padding on `Chip`s.
 ///
 /// @type Number
-$vertical-padding: 0 !default;
+$vertical-padding: spacing.get-var(none) !default;
 
 /// The amount of `padding-left` to apply to the `Chip` if a `leftAddon` prop
 /// was provided.
 ///
 /// @type Number
-$addon-left-padding: 0.25rem !default;
+$addon-left-padding: spacing.get-var(xs) !default;
 
 /// The amount of `padding-right` to apply to the `Chip` if a `rightAddon` prop
 /// was provided.
 ///
 /// @type Number
-$addon-right-padding: 0.5rem !default;
+$addon-right-padding: spacing.get-var(sm) !default;
 
 /// The background-color to apply when the `themed` prop is enabled.
 ///
@@ -231,7 +233,7 @@ $solid-raisable-transition-duration: transition.$linear-duration !default;
 
 /// The outline width when a `theme="outline"`.
 /// @type Number
-$outline-width: 0.0625rem !default;
+$outline-width: calc(interaction.get-var(focus-width) / 2) !default;
 
 /// A number between 0-24 representing the box-shadow elevation when the user
 /// is pressing the `Chip` with a `theme="outline"` and `raisable`.

package/dist/dialog/_dialog.scss

@@ -4,6 +4,7 @@
 
 @use "sass:map";
 @use "../utils";
+@use "../spacing";
 @use "../box-shadows";
 @use "../box/box";
 @use "../transition/transition";
@@ -129,13 +130,13 @@ $extra-large-width: 80rem !default;
 /// is centered.
 ///
 /// @type Number
-$horizontal-margin: 2.5rem !default;
+$horizontal-margin: calc(spacing.get-var(lg) * 1.25) !default;
 
 /// The amount of spacing to apply to the top and bottom of the dialog when it
 /// is centered.
 ///
 /// @type Number
-$vertical-margin: 1.5rem !default;
+$vertical-margin: spacing.get-var(lg) !default;
 
 /// The distance to move while the dialog enters and exits.
 /// @type Number
@@ -165,22 +166,22 @@ $leave-duration: transition.$leave-duration !default;
 /// The amount of padding to apply to the `DialogHeader` component.
 ///
 /// @type Number
-$header-padding: 1.5rem !default;
+$header-padding: spacing.get-var(lg) !default;
 
 /// The amount of padding-bottom to apply to the `DialogHeader` component.
 ///
 /// @type Number
-$header-padding-bottom: 1.25rem !default;
+$header-padding-bottom: calc(spacing.get-var(md) * 1.25) !default;
 
 /// The amount of padding-bottom to apply to the `DialogContent` component.
 ///
 /// @type Number
-$content-padding: 1.5rem !default;
+$content-padding: spacing.get-var(lg) !default;
 
 /// The amount of padding-bottom to apply to the `DialogFooter` component.
 ///
 /// @type Number
-$footer-padding: 0.5rem !default;
+$footer-padding: spacing.get-var(sm) !default;
 
 /// The available configurable css variables and mostly used internally for the
 /// `get-var`, `set-var`, and `use-var` utils.

package/dist/divider/_divider.scss

@@ -4,6 +4,7 @@
 
 @use "sass:map";
 @use "../utils";
+@use "../spacing";
 @use "../theme/theme";
 @use "../theme/colors";
 
@@ -46,12 +47,12 @@ $inset: 4rem !default;
 /// The default margin to apply to the horizontal `Divider`.
 ///
 /// @type Number
-$spacing: 0.25rem auto !default;
+$spacing: spacing.get-var(xs) auto !default;
 
 /// The default margin to apply to the vertical `Divider`.
 ///
 /// @type Number
-$vertical-spacing: auto 0.25rem !default;
+$vertical-spacing: auto spacing.get-var(xs) !default;
 
 /// The `Divider` color in light themes.
 /// @type Color

package/dist/expansion-panel/_expansion-panel.scss

@@ -3,6 +3,7 @@
 ////
 
 @use "../utils";
+@use "../spacing";
 @use "../transition/transition";
 @use "../icon/icon";
 @use "../button/button";
@@ -22,18 +23,18 @@ $disable-margin-top-transition: false !default;
 /// `ExpansionPanel`.
 ///
 /// @type Number
-$padding: 1rem !default;
+$padding: spacing.get-var(md) !default;
 
 /// The `margin-top` to apply between expanded expansion panels
 ///
 /// @type Number
-$spacing: 1rem !default;
+$spacing: spacing.get-var(md) !default;
 
 /// The `gap` to apply between elements in the clickable area in the
 /// `ExpansionPanel`.
 ///
 /// @type Number
-$button-spacing: icon.$spacing !default;
+$button-spacing: spacing.get-var(sm) !default;
 
 /// The degrees to start the rotation animation for the expansion panel icon.
 ///

package/dist/form/TextArea.js

@@ -109,7 +109,7 @@ import { useResizingTextArea } from "./useResizingTextArea.js";
                 "--rmd-text-area-height": height
             },
             className: textAreaContainer({
-                animate: !disableTransition && resize == "auto",
+                animate: !disableTransition && resize === "auto",
                 disabled,
                 height: !!height,
                 underlineLabelled: !!label && (theme === "underline" || theme === "filled"),

package/dist/form/TextArea.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/TextArea.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  type CSSProperties,\n  type HTMLAttributes,\n  type TextareaHTMLAttributes,\n  forwardRef,\n} from \"react\";\n\nimport { type PropsWithRef } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { useEnsuredRef } from \"../useEnsuredRef.js\";\nimport { FormMessageContainer } from \"./FormMessageContainer.js\";\nimport { Label } from \"./Label.js\";\nimport { ResizingTextAreaWrapper } from \"./ResizingTextAreaWrapper.js\";\nimport { TextFieldContainer } from \"./TextFieldContainer.js\";\nimport { getFormConfig } from \"./formConfig.js\";\nimport { textArea, textAreaContainer } from \"./textAreaStyles.js\";\nimport { type FormFieldOptions } from \"./types.js\";\nimport {\n  type TextAreaResize,\n  useResizingTextArea,\n} from \"./useResizingTextArea.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-text-area-height\"?: string | number;\n    \"--rmd-text-area-padding\"?: string | number;\n  }\n}\n\n/**\n * @since 6.0.0 Added `containerProps`.\n */\nexport interface TextAreaProps\n  extends FormFieldOptions,\n    TextareaHTMLAttributes<HTMLTextAreaElement> {\n  /** @defaultValue `\"text-area-\" + useId()` */\n  id?: string;\n\n  /**\n   * Optional placeholder text to display in the text field.\n   *\n   * @defaultValue `label ? \" \" : \"\"`\n   */\n  placeholder?: string;\n\n  /**\n   * Set this to `true` if the auto resizing textarea should not animate for new\n   * height changes.\n   *\n   * @defaultValue `false`\n   */\n  disableTransition?: boolean;\n\n  /**\n   * An optional style to apply to the textarea element. The base `style` prop\n   * is applied to the surrounding `div` instead.\n   */\n  areaStyle?: CSSProperties;\n\n  /**\n   * An optional className to apply to the textarea element. The base `style`\n   * prop is applied to the surrounding `div` instead.\n   */\n  areaClassName?: string;\n\n  /**\n   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-rows\n   * @defaultValue `2`\n   */\n  rows?: number;\n\n  /**\n   * The maximum number of rows a textarea can expand to before showing a\n   * scrollbar. When this is set to `-1`, there will be no limit.\n   *\n   * @defaultValue `-1`\n   */\n  maxRows?: number;\n\n  /**\n   * @see {@link TextAreaResize}\n   * @defaultValue `\"auto\"`\n   */\n  resize?: TextAreaResize;\n\n  /**\n   * When the {@link resize} prop is set to `\"auto\"`, an additional `<div>` is\n   * added along with a hidden `<textarea>` mask. This prop can be used to add\n   * any additional styling or props to that div.\n   *\n   * This will only be applied when {@link resize} is set to `\"auto\"`.\n   */\n  resizeContainerProps?: PropsWithRef<\n    HTMLAttributes<HTMLDivElement>,\n    HTMLDivElement\n  >;\n\n  /**\n   * Optional props to provide to the {@link TextFieldContainer} component.\n   * There probably isn't any real use for this prop other than if you need to\n   * add a `ref` for some DOM behavior.\n   */\n  containerProps?: PropsWithRef<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;\n}\n\n/**\n * **Client Component**\n *\n * @example Simple Example\n * ```tsx\n * import { TextArea } from \"@react-md/core/form/TextArea\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <TextArea\n *       label=\"Label\"\n *       placeholder=\"Placeholder\"\n *     />\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/text-field#simple-textarea | TextArea Demos}\n */\nexport const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(\n  function TextArea(props, ref) {\n    const {\n      id: propId,\n      style,\n      className,\n      label,\n      labelProps,\n      labelStyle,\n      labelClassName,\n      areaStyle,\n      areaClassName,\n      resizeContainerProps,\n      resize = \"auto\",\n      dense,\n      error,\n      active,\n      inline: propInline,\n      leftAddon,\n      rightAddon,\n      disableLeftAddonStyles,\n      disableRightAddonStyles,\n      theme: propTheme,\n      underlineDirection: propUnderlineDirection,\n      messageProps,\n      messageContainerProps,\n      containerProps,\n      rows = 2,\n      maxRows = -1,\n      onChange: propOnChange,\n      disableTransition: propDisableTransition,\n      ...remaining\n    } = props;\n    const { disabled = false, readOnly = false, value, defaultValue } = props;\n    const id = useEnsuredId(propId, \"text-area\");\n    const theme = getFormConfig(\"theme\", propTheme);\n    const underlineDirection = getFormConfig(\n      \"underlineDirection\",\n      propUnderlineDirection\n    );\n    const [areaRef, areaRefCallback] = useEnsuredRef(ref);\n\n    const {\n      maskRef,\n      containerRef,\n      height,\n      onChange,\n      scrollable,\n      disableTransition,\n    } = useResizingTextArea({\n      maxRows,\n      resize,\n      onChange: propOnChange,\n      containerRef: containerProps?.ref,\n      disableTransition: propDisableTransition,\n    });\n\n    let { placeholder = \"\" } = props;\n    if (label && !placeholder) {\n      // See the placeholder type definition comments for information\n      placeholder = \" \";\n    }\n\n    // have to force it inline or else you won't be able to resize\n    // it horizontally.\n    const inline = resize === \"horizontal\" || resize === \"both\" || propInline;\n\n    const area = (\n      <textarea\n        {...remaining}\n        id={id}\n        ref={areaRefCallback}\n        rows={rows}\n        disabled={disabled}\n        onChange={onChange}\n        placeholder={placeholder}\n        style={areaStyle}\n        className={textArea({\n          resize,\n          scrollable,\n          className: areaClassName,\n          placeholderHidden: !!label && !active,\n        })}\n      />\n    );\n\n    const labelNode = label && (\n      <Label\n        {...labelProps}\n        htmlFor={id}\n        style={labelProps?.style ?? labelStyle}\n        className={labelProps?.className ?? labelClassName}\n        floating\n        dense={dense}\n        error={error}\n        active={active}\n        disabled={disabled}\n      >\n        {label}\n      </Label>\n    );\n\n    let children = (\n      <>\n        {area}\n        {labelNode}\n      </>\n    );\n\n    if (resize === \"auto\") {\n      children = (\n        <ResizingTextAreaWrapper\n          {...resizeContainerProps}\n          maskId={`${id}-mask`}\n          maskRef={maskRef}\n          rows={rows}\n          areaStyle={areaStyle}\n          areaClassName={areaClassName}\n          defaultValue={value ?? defaultValue}\n          disableTransition={disableTransition}\n        >\n          {children}\n        </ResizingTextAreaWrapper>\n      );\n    }\n\n    return (\n      <FormMessageContainer\n        {...messageContainerProps}\n        messageProps={messageProps}\n      >\n        <TextFieldContainer\n          {...containerProps}\n          ref={containerRef}\n          style={{\n            ...style,\n            \"--rmd-text-area-height\": height,\n          }}\n          className={textAreaContainer({\n            animate: !disableTransition && resize == \"auto\",\n            disabled,\n            height: !!height,\n            underlineLabelled:\n              !!label && (theme === \"underline\" || theme === \"filled\"),\n            className,\n          })}\n          theme={theme}\n          label={!!label}\n          error={error}\n          dense={dense}\n          inline={inline}\n          active={active}\n          readOnly={readOnly}\n          disabled={disabled}\n          leftAddon={leftAddon}\n          rightAddon={rightAddon}\n          underlineDirection={underlineDirection}\n          disableLeftAddonStyles={disableLeftAddonStyles}\n          disableRightAddonStyles={disableRightAddonStyles}\n          onClick={(event) => {\n            // The textarea container adds padding-top when there is a label so\n            // that the label does not cover the text so this makes it so you\n            // can still click anywhere in the \"box\" to focus the textarea.\n            if (!disabled && event.target === event.currentTarget) {\n              areaRef.current?.focus();\n            }\n          }}\n        >\n          {children}\n        </TextFieldContainer>\n      </FormMessageContainer>\n    );\n  }\n);\n"],"names":["forwardRef","useEnsuredId","useEnsuredRef","FormMessageContainer","Label","ResizingTextAreaWrapper","TextFieldContainer","getFormConfig","textArea","textAreaContainer","useResizingTextArea","TextArea","props","ref","id","propId","style","className","label","labelProps","labelStyle","labelClassName","areaStyle","areaClassName","resizeContainerProps","resize","dense","error","active","inline","propInline","leftAddon","rightAddon","disableLeftAddonStyles","disableRightAddonStyles","theme","propTheme","underlineDirection","propUnderlineDirection","messageProps","messageContainerProps","containerProps","rows","maxRows","onChange","propOnChange","disableTransition","propDisableTransition","remaining","disabled","readOnly","value","defaultValue","areaRef","areaRefCallback","maskRef","containerRef","height","scrollable","placeholder","area","textarea","placeholderHidden","labelNode","htmlFor","floating","children","maskId","animate","underlineLabelled","onClick","event","target","currentTarget","current","focus"],"mappings":"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"}
+{"version":3,"sources":["../../src/form/TextArea.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  type CSSProperties,\n  type HTMLAttributes,\n  type TextareaHTMLAttributes,\n  forwardRef,\n} from \"react\";\n\nimport { type PropsWithRef } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { useEnsuredRef } from \"../useEnsuredRef.js\";\nimport { FormMessageContainer } from \"./FormMessageContainer.js\";\nimport { Label } from \"./Label.js\";\nimport { ResizingTextAreaWrapper } from \"./ResizingTextAreaWrapper.js\";\nimport { TextFieldContainer } from \"./TextFieldContainer.js\";\nimport { getFormConfig } from \"./formConfig.js\";\nimport { textArea, textAreaContainer } from \"./textAreaStyles.js\";\nimport { type FormFieldOptions } from \"./types.js\";\nimport {\n  type TextAreaResize,\n  useResizingTextArea,\n} from \"./useResizingTextArea.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-text-area-height\"?: string | number;\n    \"--rmd-text-area-padding\"?: string | number;\n  }\n}\n\n/**\n * @since 6.0.0 Added `containerProps`.\n */\nexport interface TextAreaProps\n  extends FormFieldOptions,\n    TextareaHTMLAttributes<HTMLTextAreaElement> {\n  /** @defaultValue `\"text-area-\" + useId()` */\n  id?: string;\n\n  /**\n   * Optional placeholder text to display in the text field.\n   *\n   * @defaultValue `label ? \" \" : \"\"`\n   */\n  placeholder?: string;\n\n  /**\n   * Set this to `true` if the auto resizing textarea should not animate for new\n   * height changes.\n   *\n   * @defaultValue `false`\n   */\n  disableTransition?: boolean;\n\n  /**\n   * An optional style to apply to the textarea element. The base `style` prop\n   * is applied to the surrounding `div` instead.\n   */\n  areaStyle?: CSSProperties;\n\n  /**\n   * An optional className to apply to the textarea element. The base `style`\n   * prop is applied to the surrounding `div` instead.\n   */\n  areaClassName?: string;\n\n  /**\n   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-rows\n   * @defaultValue `2`\n   */\n  rows?: number;\n\n  /**\n   * The maximum number of rows a textarea can expand to before showing a\n   * scrollbar. When this is set to `-1`, there will be no limit.\n   *\n   * @defaultValue `-1`\n   */\n  maxRows?: number;\n\n  /**\n   * @see {@link TextAreaResize}\n   * @defaultValue `\"auto\"`\n   */\n  resize?: TextAreaResize;\n\n  /**\n   * When the {@link resize} prop is set to `\"auto\"`, an additional `<div>` is\n   * added along with a hidden `<textarea>` mask. This prop can be used to add\n   * any additional styling or props to that div.\n   *\n   * This will only be applied when {@link resize} is set to `\"auto\"`.\n   */\n  resizeContainerProps?: PropsWithRef<\n    HTMLAttributes<HTMLDivElement>,\n    HTMLDivElement\n  >;\n\n  /**\n   * Optional props to provide to the {@link TextFieldContainer} component.\n   * There probably isn't any real use for this prop other than if you need to\n   * add a `ref` for some DOM behavior.\n   */\n  containerProps?: PropsWithRef<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;\n}\n\n/**\n * **Client Component**\n *\n * @example Simple Example\n * ```tsx\n * import { TextArea } from \"@react-md/core/form/TextArea\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <TextArea\n *       label=\"Label\"\n *       placeholder=\"Placeholder\"\n *     />\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/text-field#simple-textarea | TextArea Demos}\n */\nexport const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(\n  function TextArea(props, ref) {\n    const {\n      id: propId,\n      style,\n      className,\n      label,\n      labelProps,\n      labelStyle,\n      labelClassName,\n      areaStyle,\n      areaClassName,\n      resizeContainerProps,\n      resize = \"auto\",\n      dense,\n      error,\n      active,\n      inline: propInline,\n      leftAddon,\n      rightAddon,\n      disableLeftAddonStyles,\n      disableRightAddonStyles,\n      theme: propTheme,\n      underlineDirection: propUnderlineDirection,\n      messageProps,\n      messageContainerProps,\n      containerProps,\n      rows = 2,\n      maxRows = -1,\n      onChange: propOnChange,\n      disableTransition: propDisableTransition,\n      ...remaining\n    } = props;\n    const { disabled = false, readOnly = false, value, defaultValue } = props;\n    const id = useEnsuredId(propId, \"text-area\");\n    const theme = getFormConfig(\"theme\", propTheme);\n    const underlineDirection = getFormConfig(\n      \"underlineDirection\",\n      propUnderlineDirection\n    );\n    const [areaRef, areaRefCallback] = useEnsuredRef(ref);\n\n    const {\n      maskRef,\n      containerRef,\n      height,\n      onChange,\n      scrollable,\n      disableTransition,\n    } = useResizingTextArea({\n      maxRows,\n      resize,\n      onChange: propOnChange,\n      containerRef: containerProps?.ref,\n      disableTransition: propDisableTransition,\n    });\n\n    let { placeholder = \"\" } = props;\n    if (label && !placeholder) {\n      // See the placeholder type definition comments for information\n      placeholder = \" \";\n    }\n\n    // have to force it inline or else you won't be able to resize\n    // it horizontally.\n    const inline = resize === \"horizontal\" || resize === \"both\" || propInline;\n\n    const area = (\n      <textarea\n        {...remaining}\n        id={id}\n        ref={areaRefCallback}\n        rows={rows}\n        disabled={disabled}\n        onChange={onChange}\n        placeholder={placeholder}\n        style={areaStyle}\n        className={textArea({\n          resize,\n          scrollable,\n          className: areaClassName,\n          placeholderHidden: !!label && !active,\n        })}\n      />\n    );\n\n    const labelNode = label && (\n      <Label\n        {...labelProps}\n        htmlFor={id}\n        style={labelProps?.style ?? labelStyle}\n        className={labelProps?.className ?? labelClassName}\n        floating\n        dense={dense}\n        error={error}\n        active={active}\n        disabled={disabled}\n      >\n        {label}\n      </Label>\n    );\n\n    let children = (\n      <>\n        {area}\n        {labelNode}\n      </>\n    );\n\n    if (resize === \"auto\") {\n      children = (\n        <ResizingTextAreaWrapper\n          {...resizeContainerProps}\n          maskId={`${id}-mask`}\n          maskRef={maskRef}\n          rows={rows}\n          areaStyle={areaStyle}\n          areaClassName={areaClassName}\n          defaultValue={value ?? defaultValue}\n          disableTransition={disableTransition}\n        >\n          {children}\n        </ResizingTextAreaWrapper>\n      );\n    }\n\n    return (\n      <FormMessageContainer\n        {...messageContainerProps}\n        messageProps={messageProps}\n      >\n        <TextFieldContainer\n          {...containerProps}\n          ref={containerRef}\n          style={{\n            ...style,\n            \"--rmd-text-area-height\": height,\n          }}\n          className={textAreaContainer({\n            animate: !disableTransition && resize === \"auto\",\n            disabled,\n            height: !!height,\n            underlineLabelled:\n              !!label && (theme === \"underline\" || theme === \"filled\"),\n            className,\n          })}\n          theme={theme}\n          label={!!label}\n          error={error}\n          dense={dense}\n          inline={inline}\n          active={active}\n          readOnly={readOnly}\n          disabled={disabled}\n          leftAddon={leftAddon}\n          rightAddon={rightAddon}\n          underlineDirection={underlineDirection}\n          disableLeftAddonStyles={disableLeftAddonStyles}\n          disableRightAddonStyles={disableRightAddonStyles}\n          onClick={(event) => {\n            // The textarea container adds padding-top when there is a label so\n            // that the label does not cover the text so this makes it so you\n            // can still click anywhere in the \"box\" to focus the textarea.\n            if (!disabled && event.target === event.currentTarget) {\n              areaRef.current?.focus();\n            }\n          }}\n        >\n          {children}\n        </TextFieldContainer>\n      </FormMessageContainer>\n    );\n  }\n);\n"],"names":["forwardRef","useEnsuredId","useEnsuredRef","FormMessageContainer","Label","ResizingTextAreaWrapper","TextFieldContainer","getFormConfig","textArea","textAreaContainer","useResizingTextArea","TextArea","props","ref","id","propId","style","className","label","labelProps","labelStyle","labelClassName","areaStyle","areaClassName","resizeContainerProps","resize","dense","error","active","inline","propInline","leftAddon","rightAddon","disableLeftAddonStyles","disableRightAddonStyles","theme","propTheme","underlineDirection","propUnderlineDirection","messageProps","messageContainerProps","containerProps","rows","maxRows","onChange","propOnChange","disableTransition","propDisableTransition","remaining","disabled","readOnly","value","defaultValue","areaRef","areaRefCallback","maskRef","containerRef","height","scrollable","placeholder","area","textarea","placeholderHidden","labelNode","htmlFor","floating","children","maskId","animate","underlineLabelled","onClick","event","target","currentTarget","current","focus"],"mappings":"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"}

package/dist/form/_form-message.scss

@@ -4,6 +4,7 @@
 
 @use "sass:map";
 @use "../utils";
+@use "../spacing";
 @use "../icon/icon";
 @use "../typography/typography";
 @use "base";
@@ -37,16 +38,16 @@ $typography-styles: map.merge(
 /// The `gap` between elements in the `FormMessageCounter` component .
 ///
 /// @type Number
-$counter-spacing: icon.$spacing !default;
+$counter-spacing: spacing.get-var(sm) !default;
 
 /// The  `margin-top` for the `FormMessage` component.
 /// @type Number
-$margin-top: 0.5rem !default;
+$margin-top: spacing.get-var(sm) !default;
 
 /// The `margin-bottom` for the `FormMessage` component.
 ///
 /// @type Number
-$margin-bottom: 1rem !default;
+$margin-bottom: spacing.get-var(md) !default;
 
 /// The `min-height` for the `FormMessage` component.
 /// @type Number

package/dist/form/_input-toggle.scss

@@ -5,6 +5,7 @@
 @use "sass:color";
 @use "sass:map";
 @use "../utils";
+@use "../border-radius";
 @use "../theme/theme";
 @use "../icon/icon";
 @use "../interaction/interaction";
@@ -32,7 +33,7 @@ $disable-uncontrolled: false !default;
 
 /// The default border-radius for `Checkbox` and `Radio` components.
 /// @type Number
-$border-radius: 50% !default;
+$border-radius: border-radius.get-var(full) !default;
 
 /// The amount of padding to apply around the `Checkbox` and `Radio` icons
 /// @type Number

package/dist/form/_label.scss

@@ -4,6 +4,7 @@
 
 @use "sass:map";
 @use "../utils";
+@use "../spacing";
 @use "../icon/icon";
 @use "../transition/transition";
 @use "../typography/typography";
@@ -58,7 +59,7 @@ $disable-stacked-reversed: $disable-everything !default;
 ///
 /// @see $disable-gap
 /// @type Number
-$gap: icon.$spacing !default;
+$gap: spacing.get-var(sm) !default;
 
 /// The default `Label` font size.
 ///
@@ -95,7 +96,7 @@ $floating-scale: 0.75 !default;
 /// the outline and add some general spacing.
 ///
 /// @type Number
-$floating-padding: 0.25rem !default;
+$floating-padding: spacing.get-var(xs) !default;
 
 /// The available configurable css variables and mostly used internally for the
 /// `get-var`, `set-var`, and `use-var` utils.

package/dist/form/_password.scss

@@ -4,6 +4,7 @@
 
 @use "sass:map";
 @use "../utils";
+@use "../spacing";
 @use "../button/button";
 @use "base";
 @use "text-field";
@@ -15,7 +16,7 @@ $disable-everything: text-field.$disable-everything !default;
 /// The `padding-left` to apply to a `Password` when there is a visibility
 /// icon.
 /// @type Number
-$visibility-toggle-spacing: 0.25rem !default;
+$visibility-toggle-spacing: spacing.get-var(xs) !default;
 
 /// Generates all the styles based on feature flags.
 ///

package/dist/form/_select.scss

@@ -60,10 +60,10 @@ $option-selected-styles: (
 /// prop has not been enabled.
 ///
 /// @type Number
-$option-padding-left: list.$item-horizontal-padding - math.div(
-    icon.$size - $option-selected-icon-size,
-    2
-  ) !default;
+$option-padding-left: calc(
+  list.$item-horizontal-padding -
+    #{math.div(icon.$size - $option-selected-icon-size, 2)}
+) !default;
 
 /// The spacing between the selected icon and the `Option` content.
 /// @type Number

package/dist/form/_slider.scss

@@ -3,6 +3,7 @@
 ////
 
 @use "../utils";
+@use "../border-radius";
 @use "../theme/colors";
 @use "../theme/theme";
 @use "../icon/icon";
@@ -136,7 +137,7 @@ $mark-width: $track-inactive-size !default;
 
 /// The default border-radius for a discrete `Slider` tick mark.
 /// @type Number
-$mark-border-radius: 50% !default;
+$mark-border-radius: border-radius.get-var(full) !default;
 
 /// The light theme `Slider` tick mark color.
 /// @type Color
@@ -216,7 +217,7 @@ $thumb-size: 1.25rem !default;
 
 /// The `border-radius` for the `Slider` thumb.
 /// @type Number
-$thumb-border-radius: 50% !default;
+$thumb-border-radius: border-radius.get-var(full) !default;
 
 /// The amount of opacity to apply to the focused/active state of the `Slider`
 /// thumb.
@@ -266,7 +267,7 @@ $tooltip-caret-size: 0.3rem !default;
 
 /// The top/left for the discrete `Slider` tooltip.
 /// @type Number
-$tooltip-offset: -($thumb-size + icon.$spacing) !default;
+$tooltip-offset: calc(-1 * ($thumb-size + icon.$spacing)) !default;
 
 /// The `z-index` for the discrete `Slider` tooltip.
 /// @type Number

package/dist/form/_switch.scss

@@ -5,6 +5,7 @@
 @use "sass:color";
 @use "sass:map";
 @use "../utils";
+@use "../border-radius";
 @use "../box-shadows";
 @use "../theme/colors";
 @use "../theme/theme";
@@ -41,7 +42,7 @@ $ball-size: 1.25em !default;
 
 /// The `Switch` border radius.
 /// @type Number
-$ball-border-radius: 50% !default;
+$ball-border-radius: border-radius.get-var(full) !default;
 
 /// The distance from the `left` and `right` of the `Switch` track to display
 /// the ball.

package/dist/form/_text-area.scss

@@ -8,6 +8,7 @@
 @use "base";
 @use "label";
 @use "text-field";
+@use "../spacing";
 
 /// Set to `true` to disable the `TextArea` styles
 /// @type Boolean
@@ -31,14 +32,14 @@ $disable-resize-vertical: $disable-everything !default;
 
 /// The default position for addons within a `TextArea`.
 /// @type Number
-$addon-top: 1rem !default;
+$addon-top: spacing.get-var(lg) !default;
 
 /// The default vertical padding to apply to `TextArea` which is useful when
 /// there is a scrollbar visible. This should normally be enough so that the
 /// floating label does not cover the content.
 ///
 /// @type Number
-$vertical-padding: 0.75rem !default;
+$vertical-padding: calc(spacing.get-var(sm) * 1.5) !default;
 
 /// The available configurable css variables and mostly used internally for the
 /// `get-var`, `set-var`, and `use-var` utils.

package/dist/form/_text-field.scss

@@ -4,6 +4,8 @@
 
 @use "sass:map";
 @use "../utils";
+@use "../border-radius";
+@use "../spacing";
 @use "../box/box";
 @use "../theme/colors";
 @use "../theme/theme";
@@ -81,7 +83,7 @@ $label-dense-height: 3.25rem !default;
 
 /// The `border-radius` for a `TextField`.
 /// @type Number
-$border-radius: 0.25rem !default;
+$border-radius: border-radius.get-var(xs) !default;
 
 /// The `border-width` for a `TextField`.
 /// @type Number
@@ -94,12 +96,12 @@ $border-width-active: 2px !default;
 /// The amount of horizontal padding to apply to a `TextField` with the
 /// `theme="filled"`.
 /// @type Number
-$filled-padding: 0.75rem !default;
+$filled-padding: calc(spacing.get-var(sm) * 1.5) !default;
 
 /// The amount of horizontal padding to apply to a `TextField` with the
 /// `theme="outline"`.
 /// @type Number
-$outlined-padding: 1rem !default;
+$outlined-padding: spacing.get-var(md) !default;
 
 /// The amount of horizontal padding to apply to a `TextField` with the
 /// `theme="underline"`.
@@ -122,7 +124,7 @@ $underlined-placeholder-height: 2.5rem !default;
 /// `null`.
 ///
 /// @type Number
-$underlined-placeholder-padding-top: 0.5rem !default;
+$underlined-placeholder-padding-top: spacing.get-var(sm) !default;
 
 /// The amount of padding-top to apply to addons in a `TextField` while the
 /// `theme="underline"`.
@@ -131,7 +133,7 @@ $underlined-placeholder-padding-top: 0.5rem !default;
 /// `null`.
 ///
 /// @type Number
-$underlined-placeholder-addon-padding-top: 0.25rem !default;
+$underlined-placeholder-addon-padding-top: spacing.get-var(xs) !default;
 
 /// The amount of padding-top to apply to the `TextFieldContainer` while the
 /// `theme="underline"` and a `label` was provided.
@@ -139,13 +141,13 @@ $underlined-placeholder-addon-padding-top: 0.25rem !default;
 /// NOTE: This is the default height of the label with line-height
 ///
 /// @type Number
-$underlined-label-padding-top: 1.5rem !default;
+$underlined-label-padding-top: spacing.get-var(lg) !default;
 
 /// The position in the `TextFieldContainer` for a `Label` while the
 /// `theme="underline"`.
 ///
 /// @type Number
-$underlined-label-left-offset: icon.$spacing !default;
+$underlined-label-left-offset: spacing.get-var(sm) !default;
 
 /// Set this to `null` if not using `<TextField type="color" />` since this is
 /// used to apply a `min-width` to color inputs.
@@ -157,18 +159,18 @@ $color-min-width: 5rem !default;
 /// i.e. `leftAddon={<><FavoriteIcon /><CloseIcon /></>}`
 ///
 /// @type Number
-$addon-gap: 0.25rem !default;
+$addon-gap: spacing.get-var(xs) !default;
 
 /// The amount of margin to apply to addons when the `TextField`
 /// `theme="underline"`.
 /// @type Number
-$addon-margin: icon.$spacing !default;
+$addon-margin: spacing.get-var(sm) !default;
 
 /// The amount of spacing between a `TextField` addon and the `<input>`
 /// element.
 ///
 /// @type Number
-$addon-spacing: icon.get-var(spacing) !default;
+$addon-spacing: spacing.get-var(sm) !default;
 
 /// The border-color for a `theme="outline"` `TextField` in the light theme.
 /// @type Color
@@ -547,17 +549,19 @@ $variables: (
         }
 
         @if not $disable-addon {
-          $addon-offset: "#{icon.get-var(size)} + #{$underlined-label-left-offset * 2}";
-          @if $underlined-padding {
-            $addon-offset: "#{$addon-offset} + #{$underlined-padding}";
-          }
+          $addon-offset: calc(
+            #{icon.get-var(size) +
+              if($underlined-padding, "#{$underlined-padding} + ", "")} +
+              $underlined-label-left-offset *
+              2
+          );
 
           &--underline-left-addon {
-            @include set-var(padding-left, calc(#{$addon-offset}));
+            @include set-var(padding-left, $addon-offset);
           }
 
           &--underline-right-addon {
-            @include set-var(padding-right, calc(#{$addon-offset}));
+            @include set-var(padding-right, $addon-offset);
           }
         }
       }

package/dist/form/utils.js

@@ -30,6 +30,7 @@
     if (!form || !(form instanceof HTMLFormElement)) {
         return;
     }
+    // eslint-disable-next-line no-param-reassign
     formId = formId || form.id;
     let submit = form.querySelector('[type="submit"]');
     if (!submit && formId) {

package/dist/form/utils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/utils.ts"],"sourcesContent":["import { type KeyboardEvent } from \"react\";\n\n/**\n * This util should be used to implement the native \"Enter\" keypress behavior\n * for \"fake\" form components to submit the form if exists.\n *\n * The way this will work will be:\n * - attempt to find a form by querying for a parent form element. if no parent\n *   form element can be found, try to use the `formId` in a\n *   `document.getElementById`\n * - if a form element is found, find the submit button within the form. If\n *   there are no submit buttons within the form, try to find a submit button in\n *   the document that is linked to this form by `form={formId}`\n * - if the submit button was found, click it to trigger the form submit\n *   behavior\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/requestSubmit\n * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit\n * @internal\n * @since 2.7.0\n * @since 6.0.0 No longer returns a boolean, added the `formId` parameter, and\n * moved into the form package.\n * @since 6.0.0 Uses `form.requestSubmit` instead of clicking the submit button\n */\nexport function tryToSubmitRelatedForm<E extends HTMLElement>(\n  event: KeyboardEvent<E>,\n  formId: string | undefined\n): void {\n  const { currentTarget } = event;\n  let form: HTMLElement | null = null;\n  if (formId) {\n    form = document.getElementById(formId);\n  } else {\n    form = currentTarget.closest(\"form\");\n  }\n\n  if (!form || !(form instanceof HTMLFormElement)) {\n    return;\n  }\n\n  formId = formId || form.id;\n  let submit = form.querySelector<HTMLButtonElement>('[type=\"submit\"]');\n  if (!submit && formId) {\n    submit = document.querySelector<HTMLButtonElement>(\n      `[type=\"submit\"][form=\"${formId}\"]`\n    );\n  }\n\n  form.requestSubmit(submit);\n}\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport type EditableHTMLElement = HTMLInputElement | HTMLTextAreaElement;\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport type ChangeableHTMLElement = EditableHTMLElement | HTMLSelectElement;\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport function isChangeableHTMLElement(\n  element: Element | null\n): element is ChangeableHTMLElement {\n  return !!element && \"value\" in element;\n}\n\n/**\n * This is used to trigger a change event for a form element.\n *\n * @internal\n * @see https://stackoverflow.com/a/46012210\n * @since 6.0.0\n */\nexport function triggerManualChangeEvent(\n  element: ChangeableHTMLElement | null,\n  value: string | number\n): void {\n  if (!element) {\n    return;\n  }\n\n  const prototype = Object.getPrototypeOf(element);\n  const setter = Object.getOwnPropertyDescriptor(prototype, \"value\")?.set;\n  if (!setter) {\n    return;\n  }\n\n  setter.call(element, value);\n  const event = new Event(\"input\", { bubbles: true });\n  element.dispatchEvent(event);\n}\n"],"names":["tryToSubmitRelatedForm","event","formId","currentTarget","form","document","getElementById","closest","HTMLFormElement","id","submit","querySelector","requestSubmit","isChangeableHTMLElement","element","triggerManualChangeEvent","value","prototype","Object","getPrototypeOf","setter","getOwnPropertyDescriptor","set","call","Event","bubbles","dispatchEvent"],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;CAqBC,GACD,OAAO,SAASA,uBACdC,KAAuB,EACvBC,MAA0B;IAE1B,MAAM,EAAEC,aAAa,EAAE,GAAGF;IAC1B,IAAIG,OAA2B;IAC/B,IAAIF,QAAQ;QACVE,OAAOC,SAASC,cAAc,CAACJ;IACjC,OAAO;QACLE,OAAOD,cAAcI,OAAO,CAAC;IAC/B;IAEA,IAAI,CAACH,QAAQ,CAAEA,CAAAA,gBAAgBI,eAAc,GAAI;QAC/C;IACF;IAEAN,SAASA,UAAUE,KAAKK,EAAE;IAC1B,IAAIC,SAASN,KAAKO,aAAa,CAAoB;IACnD,IAAI,CAACD,UAAUR,QAAQ;QACrBQ,SAASL,SAASM,aAAa,CAC7B,CAAC,sBAAsB,EAAET,OAAO,EAAE,CAAC;IAEvC;IAEAE,KAAKQ,aAAa,CAACF;AACrB;AAcA;;;CAGC,GACD,OAAO,SAASG,wBACdC,OAAuB;IAEvB,OAAO,CAAC,CAACA,WAAW,WAAWA;AACjC;AAEA;;;;;;CAMC,GACD,OAAO,SAASC,yBACdD,OAAqC,EACrCE,KAAsB;IAEtB,IAAI,CAACF,SAAS;QACZ;IACF;IAEA,MAAMG,YAAYC,OAAOC,cAAc,CAACL;IACxC,MAAMM,SAASF,OAAOG,wBAAwB,CAACJ,WAAW,UAAUK;IACpE,IAAI,CAACF,QAAQ;QACX;IACF;IAEAA,OAAOG,IAAI,CAACT,SAASE;IACrB,MAAMf,QAAQ,IAAIuB,MAAM,SAAS;QAAEC,SAAS;IAAK;IACjDX,QAAQY,aAAa,CAACzB;AACxB"}
+{"version":3,"sources":["../../src/form/utils.ts"],"sourcesContent":["import { type KeyboardEvent } from \"react\";\n\n/**\n * This util should be used to implement the native \"Enter\" keypress behavior\n * for \"fake\" form components to submit the form if exists.\n *\n * The way this will work will be:\n * - attempt to find a form by querying for a parent form element. if no parent\n *   form element can be found, try to use the `formId` in a\n *   `document.getElementById`\n * - if a form element is found, find the submit button within the form. If\n *   there are no submit buttons within the form, try to find a submit button in\n *   the document that is linked to this form by `form={formId}`\n * - if the submit button was found, click it to trigger the form submit\n *   behavior\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/requestSubmit\n * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit\n * @internal\n * @since 2.7.0\n * @since 6.0.0 No longer returns a boolean, added the `formId` parameter, and\n * moved into the form package.\n * @since 6.0.0 Uses `form.requestSubmit` instead of clicking the submit button\n */\nexport function tryToSubmitRelatedForm<E extends HTMLElement>(\n  event: KeyboardEvent<E>,\n  formId: string | undefined\n): void {\n  const { currentTarget } = event;\n  let form: HTMLElement | null = null;\n  if (formId) {\n    form = document.getElementById(formId);\n  } else {\n    form = currentTarget.closest(\"form\");\n  }\n\n  if (!form || !(form instanceof HTMLFormElement)) {\n    return;\n  }\n\n  // eslint-disable-next-line no-param-reassign\n  formId = formId || form.id;\n  let submit = form.querySelector<HTMLButtonElement>('[type=\"submit\"]');\n  if (!submit && formId) {\n    submit = document.querySelector<HTMLButtonElement>(\n      `[type=\"submit\"][form=\"${formId}\"]`\n    );\n  }\n\n  form.requestSubmit(submit);\n}\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport type EditableHTMLElement = HTMLInputElement | HTMLTextAreaElement;\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport type ChangeableHTMLElement = EditableHTMLElement | HTMLSelectElement;\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport function isChangeableHTMLElement(\n  element: Element | null\n): element is ChangeableHTMLElement {\n  return !!element && \"value\" in element;\n}\n\n/**\n * This is used to trigger a change event for a form element.\n *\n * @internal\n * @see https://stackoverflow.com/a/46012210\n * @since 6.0.0\n */\nexport function triggerManualChangeEvent(\n  element: ChangeableHTMLElement | null,\n  value: string | number\n): void {\n  if (!element) {\n    return;\n  }\n\n  const prototype = Object.getPrototypeOf(element);\n  const setter = Object.getOwnPropertyDescriptor(prototype, \"value\")?.set;\n  if (!setter) {\n    return;\n  }\n\n  setter.call(element, value);\n  const event = new Event(\"input\", { bubbles: true });\n  element.dispatchEvent(event);\n}\n"],"names":["tryToSubmitRelatedForm","event","formId","currentTarget","form","document","getElementById","closest","HTMLFormElement","id","submit","querySelector","requestSubmit","isChangeableHTMLElement","element","triggerManualChangeEvent","value","prototype","Object","getPrototypeOf","setter","getOwnPropertyDescriptor","set","call","Event","bubbles","dispatchEvent"],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;CAqBC,GACD,OAAO,SAASA,uBACdC,KAAuB,EACvBC,MAA0B;IAE1B,MAAM,EAAEC,aAAa,EAAE,GAAGF;IAC1B,IAAIG,OAA2B;IAC/B,IAAIF,QAAQ;QACVE,OAAOC,SAASC,cAAc,CAACJ;IACjC,OAAO;QACLE,OAAOD,cAAcI,OAAO,CAAC;IAC/B;IAEA,IAAI,CAACH,QAAQ,CAAEA,CAAAA,gBAAgBI,eAAc,GAAI;QAC/C;IACF;IAEA,6CAA6C;IAC7CN,SAASA,UAAUE,KAAKK,EAAE;IAC1B,IAAIC,SAASN,KAAKO,aAAa,CAAoB;IACnD,IAAI,CAACD,UAAUR,QAAQ;QACrBQ,SAASL,SAASM,aAAa,CAC7B,CAAC,sBAAsB,EAAET,OAAO,EAAE,CAAC;IAEvC;IAEAE,KAAKQ,aAAa,CAACF;AACrB;AAcA;;;CAGC,GACD,OAAO,SAASG,wBACdC,OAAuB;IAEvB,OAAO,CAAC,CAACA,WAAW,WAAWA;AACjC;AAEA;;;;;;CAMC,GACD,OAAO,SAASC,yBACdD,OAAqC,EACrCE,KAAsB;IAEtB,IAAI,CAACF,SAAS;QACZ;IACF;IAEA,MAAMG,YAAYC,OAAOC,cAAc,CAACL;IACxC,MAAMM,SAASF,OAAOG,wBAAwB,CAACJ,WAAW,UAAUK;IACpE,IAAI,CAACF,QAAQ;QACX;IACF;IAEAA,OAAOG,IAAI,CAACT,SAASE;IACrB,MAAMf,QAAQ,IAAIuB,MAAM,SAAS;QAAEC,SAAS;IAAK;IACjDX,QAAQY,aAAa,CAACzB;AACxB"}

package/dist/icon/_icon.scss

@@ -3,6 +3,7 @@
 ////
 
 @use "sass:color";
+@use "../spacing";
 @use "../theme/theme";
 @use "../transition/transition";
 @use "../utils";
@@ -162,7 +163,7 @@ $_validated_optical-size: utils.validate(
 /// should be separated from other content.
 ///
 /// @type Number
-$spacing: 0.5rem !default;
+$spacing: spacing.get-var(sm) !default;
 
 /// The default `IconRotator` starting position
 /// @type String