@metamask-previews/design-system-react 0.17.1-preview.1679aa9 → 0.22.0-preview.178e60f

package/dist/components/ButtonBase/ButtonBase.mjs

@@ -4,17 +4,24 @@ function $importDefault(module) {
     }
     return module;
 }
+import { ButtonBaseSize, IconName } from "@metamask-previews/design-system-shared";
 import { Slot, Slottable } from "@radix-ui/react-slot";
 import $React, { forwardRef } from "react";
 const React = $importDefault($React);
-import { ButtonBaseSize } from "../../types/index.mjs";
 import { twMerge } from "../../utils/tw-merge.mjs";
-import { Icon, IconName, IconSize } from "../Icon/index.mjs";
+import { Icon } from "../Icon/index.mjs";
 import { Text, FontWeight, TextColor } from "../Text/index.mjs";
-import { TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION } from "./ButtonBase.constants.mjs";
+import { MAP_BUTTONBASE_SIZE_ICONSIZE, MAP_BUTTONBASE_SIZE_TEXT_VARIANT, getButtonBaseBorderRadiusTwClass, getButtonBaseHorizontalPaddingTwClasses, TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION } from "./ButtonBase.constants.mjs";
 export const ButtonBase = forwardRef(({ children, className, size = ButtonBaseSize.Lg, isFullWidth, asChild, isDisabled, isLoading, loadingText, loadingIconProps, loadingTextProps, startIconName, startIconProps, startAccessory, endIconName, endIconProps, endAccessory, textProps, style, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, 'aria-pressed': ariaPressed, 'aria-expanded': ariaExpanded, 'aria-controls': ariaControls, 'aria-haspopup': ariaHaspopup, ...props }, ref) => {
     const Component = asChild ? Slot : 'button';
     const isInteractive = !(isDisabled ?? isLoading);
+    const finalStartIconName = startIconName ?? startIconProps?.name;
+    const finalEndIconName = endIconName ?? endIconProps?.name;
+    const hasStart = Boolean(finalStartIconName || startAccessory);
+    const hasEnd = Boolean(finalEndIconName || endAccessory);
+    const hasAccessories = hasStart || hasEnd;
+    const iconSize = MAP_BUTTONBASE_SIZE_ICONSIZE[size];
+    const labelTextVariant = MAP_BUTTONBASE_SIZE_TEXT_VARIANT[size];
     // Calculate tabIndex based on asChild and disabled state
     const getTabIndex = () => {
         if (asChild) {
@@ -22,41 +29,42 @@ export const ButtonBase = forwardRef(({ children, className, size = ButtonBaseSi
         }
         return isDisabled ? -1 : undefined;
     };
+    const renderLabel = () => {
+        if (children && typeof children === 'string') {
+            return (React.createElement(Text, { variant: labelTextVariant, fontWeight: FontWeight.Medium, color: TextColor.Inherit, asChild: true, ...textProps },
+                React.createElement("span", null, children)));
+        }
+        return children;
+    };
     const renderLoadingState = () => (React.createElement(React.Fragment, null,
-        React.createElement("span", { className: "absolute inline-flex items-center", "aria-hidden": "true" },
-            React.createElement(Icon, { name: IconName.Loading, size: IconSize.Sm, className: twMerge('mr-2 animate-spin text-inherit', loadingIconProps?.className), ...loadingIconProps }),
-            React.createElement(Text, { fontWeight: FontWeight.Medium, color: TextColor.Inherit, asChild: true, ...loadingTextProps },
+        React.createElement("span", { className: "absolute inline-flex items-center gap-x-1", "aria-hidden": "true" },
+            React.createElement(Icon, { name: IconName.Loading, size: iconSize, className: twMerge('animate-spin text-inherit', loadingIconProps?.className), ...loadingIconProps }),
+            React.createElement(Text, { variant: labelTextVariant, fontWeight: FontWeight.Medium, color: TextColor.Inherit, asChild: true, ...loadingTextProps },
                 React.createElement("span", null, loadingText))),
-        React.createElement("span", { className: "invisible inline-flex items-center" }, children),
+        React.createElement("span", { className: "invisible inline-flex items-center", "aria-hidden": "true" }, renderLabel()),
         React.createElement("span", { className: "sr-only", "aria-live": "polite", "aria-atomic": "true" }, loadingText || 'Loading')));
     const renderStartContent = () => {
-        if (startIconName) {
-            return (React.createElement(Icon, { name: startIconName, size: IconSize.Sm, className: twMerge('mr-2 shrink-0 text-inherit', startIconProps?.className), "aria-hidden": "true", ...startIconProps }));
+        if (finalStartIconName) {
+            return (React.createElement(Icon, { name: finalStartIconName, size: iconSize, className: twMerge('shrink-0 text-inherit', startIconProps?.className), "aria-hidden": "true", ...startIconProps }));
         }
         if (startAccessory) {
-            return (React.createElement("span", { className: "mr-2", "aria-hidden": "true" }, startAccessory));
+            return React.createElement("span", { "aria-hidden": "true" }, startAccessory);
         }
         return null;
     };
     const renderEndContent = () => {
-        if (endIconName) {
-            return (React.createElement(Icon, { name: endIconName, size: IconSize.Sm, className: twMerge('ml-2 shrink-0 text-inherit', endIconProps?.className), "aria-hidden": "true", ...endIconProps }));
+        if (finalEndIconName) {
+            return (React.createElement(Icon, { name: finalEndIconName, size: iconSize, className: twMerge('shrink-0 text-inherit', endIconProps?.className), "aria-hidden": "true", ...endIconProps }));
         }
         if (endAccessory) {
-            return (React.createElement("span", { className: "ml-2", "aria-hidden": "true" }, endAccessory));
+            return React.createElement("span", { "aria-hidden": "true" }, endAccessory);
         }
         return null;
     };
-    const renderContent = () => {
-        if (children && typeof children === 'string') {
-            return (React.createElement(Text, { fontWeight: FontWeight.Medium, color: TextColor.Inherit, asChild: true, ...textProps },
-                React.createElement("span", null, children)));
-        }
-        return children;
-    };
+    const renderContent = () => renderLabel();
     const mergedClassName = twMerge(
     // Base styles
-    'inline-flex items-center justify-center', 'rounded-xl px-4', 'font-medium text-default', 'bg-muted', 'min-w-20 overflow-hidden', 
+    'inline-flex items-center justify-center', getButtonBaseBorderRadiusTwClass(size), getButtonBaseHorizontalPaddingTwClasses(size, hasStart, hasEnd), hasAccessories && 'gap-x-1', 'font-medium text-default', 'bg-muted', 'overflow-hidden', 
     // Add relative positioning for loading state
     'relative', 
     // Size

package/dist/components/ButtonBase/ButtonBase.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonBase.mjs","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Slot, Slottable } from '@radix-ui/react-slot';\nimport React, { forwardRef } from 'react';\n\nimport { ButtonBaseSize } from '../../types';\nimport { twMerge } from '../../utils/tw-merge';\nimport { Icon, IconName, IconSize } from '../Icon';\nimport { Text, FontWeight, TextColor } from '../Text';\n\nimport { TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION } from './ButtonBase.constants';\nimport type { ButtonBaseProps } from './ButtonBase.types';\n\nexport const ButtonBase = forwardRef<HTMLButtonElement, ButtonBaseProps>(\n  (\n    {\n      children,\n      className,\n      size = ButtonBaseSize.Lg,\n      isFullWidth,\n      asChild,\n      isDisabled,\n      isLoading,\n      loadingText,\n      loadingIconProps,\n      loadingTextProps,\n      startIconName,\n      startIconProps,\n      startAccessory,\n      endIconName,\n      endIconProps,\n      endAccessory,\n      textProps,\n      style,\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledby,\n      'aria-describedby': ariaDescribedby,\n      'aria-pressed': ariaPressed,\n      'aria-expanded': ariaExpanded,\n      'aria-controls': ariaControls,\n      'aria-haspopup': ariaHaspopup,\n      ...props\n    },\n    ref,\n  ) => {\n    const Component = asChild ? Slot : 'button';\n    const isInteractive = !(isDisabled ?? isLoading);\n\n    // Calculate tabIndex based on asChild and disabled state\n    const getTabIndex = () => {\n      if (asChild) {\n        return undefined;\n      }\n      return isDisabled ? -1 : undefined;\n    };\n\n    const renderLoadingState = () => (\n      <>\n        <span className=\"absolute inline-flex items-center\" aria-hidden=\"true\">\n          <Icon\n            name={IconName.Loading}\n            size={IconSize.Sm}\n            className={twMerge(\n              'mr-2 animate-spin text-inherit',\n              loadingIconProps?.className,\n            )}\n            {...loadingIconProps}\n          />\n          <Text\n            fontWeight={FontWeight.Medium}\n            color={TextColor.Inherit}\n            asChild\n            {...loadingTextProps}\n          >\n            <span>{loadingText}</span>\n          </Text>\n        </span>\n        <span className=\"invisible inline-flex items-center\">{children}</span>\n        {/* Screen reader announcement for loading */}\n        <span className=\"sr-only\" aria-live=\"polite\" aria-atomic=\"true\">\n          {loadingText || 'Loading'}\n        </span>\n      </>\n    );\n\n    const renderStartContent = () => {\n      if (startIconName) {\n        return (\n          <Icon\n            name={startIconName}\n            size={IconSize.Sm}\n            className={twMerge(\n              'mr-2 shrink-0 text-inherit',\n              startIconProps?.className,\n            )}\n            aria-hidden=\"true\"\n            {...startIconProps}\n          />\n        );\n      }\n      if (startAccessory) {\n        return (\n          <span className=\"mr-2\" aria-hidden=\"true\">\n            {startAccessory}\n          </span>\n        );\n      }\n      return null;\n    };\n\n    const renderEndContent = () => {\n      if (endIconName) {\n        return (\n          <Icon\n            name={endIconName}\n            size={IconSize.Sm}\n            className={twMerge(\n              'ml-2 shrink-0 text-inherit',\n              endIconProps?.className,\n            )}\n            aria-hidden=\"true\"\n            {...endIconProps}\n          />\n        );\n      }\n      if (endAccessory) {\n        return (\n          <span className=\"ml-2\" aria-hidden=\"true\">\n            {endAccessory}\n          </span>\n        );\n      }\n      return null;\n    };\n\n    const renderContent = () => {\n      if (children && typeof children === 'string') {\n        return (\n          <Text\n            fontWeight={FontWeight.Medium}\n            color={TextColor.Inherit}\n            asChild\n            {...textProps}\n          >\n            <span>{children}</span>\n          </Text>\n        );\n      }\n      return children;\n    };\n\n    const mergedClassName = twMerge(\n      // Base styles\n      'inline-flex items-center justify-center',\n      'rounded-xl px-4',\n      'font-medium text-default',\n      'bg-muted',\n      'min-w-20 overflow-hidden',\n      // Add relative positioning for loading state\n      'relative',\n      // Size\n      TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION[size],\n      // Full width\n      isFullWidth && 'w-full',\n      // Animation classes - only applied when interactive\n      isInteractive && [\n        'transition-all',\n        'duration-100',\n        'ease-linear',\n        'active:scale-[0.97]',\n        'active:ease-[cubic-bezier(0.3,0.8,0.3,1)]',\n      ],\n      // Disabled state - apply to both isDisabled and isLoading\n      (isDisabled || isLoading) && 'cursor-not-allowed',\n      isDisabled && 'opacity-50',\n      // Custom classes\n      className,\n    );\n\n    return (\n      <Component\n        ref={ref}\n        className={mergedClassName}\n        disabled={asChild ? undefined : (isDisabled ?? isLoading)}\n        aria-disabled={isDisabled ? 'true' : undefined}\n        aria-busy={isLoading ? 'true' : undefined}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledby}\n        aria-describedby={ariaDescribedby}\n        aria-pressed={ariaPressed}\n        aria-expanded={ariaExpanded}\n        aria-controls={ariaControls}\n        aria-haspopup={ariaHaspopup}\n        role={asChild ? undefined : 'button'}\n        tabIndex={getTabIndex()}\n        style={style}\n        {...props}\n      >\n        {renderStartContent()}\n        <Slottable>\n          {isLoading ? renderLoadingState() : renderContent()}\n        </Slottable>\n        {renderEndContent()}\n      </Component>\n    );\n  },\n);\n\nButtonBase.displayName = 'ButtonBase';\n"]}
+{"version":3,"file":"ButtonBase.mjs","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.tsx"],"names":[],"mappings":"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","sourcesContent":["import { ButtonBaseSize, IconName } from '@metamask-previews/design-system-shared';\nimport { Slot, Slottable } from '@radix-ui/react-slot';\nimport React, { forwardRef } from 'react';\n\nimport { twMerge } from '../../utils/tw-merge';\nimport { Icon } from '../Icon';\nimport { Text, FontWeight, TextColor } from '../Text';\n\nimport {\n  MAP_BUTTONBASE_SIZE_ICONSIZE,\n  MAP_BUTTONBASE_SIZE_TEXT_VARIANT,\n  getButtonBaseBorderRadiusTwClass,\n  getButtonBaseHorizontalPaddingTwClasses,\n  TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION,\n} from './ButtonBase.constants';\nimport type { ButtonBaseProps } from './ButtonBase.types';\n\nexport const ButtonBase = forwardRef<HTMLButtonElement, ButtonBaseProps>(\n  (\n    {\n      children,\n      className,\n      size = ButtonBaseSize.Lg,\n      isFullWidth,\n      asChild,\n      isDisabled,\n      isLoading,\n      loadingText,\n      loadingIconProps,\n      loadingTextProps,\n      startIconName,\n      startIconProps,\n      startAccessory,\n      endIconName,\n      endIconProps,\n      endAccessory,\n      textProps,\n      style,\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledby,\n      'aria-describedby': ariaDescribedby,\n      'aria-pressed': ariaPressed,\n      'aria-expanded': ariaExpanded,\n      'aria-controls': ariaControls,\n      'aria-haspopup': ariaHaspopup,\n      ...props\n    },\n    ref,\n  ) => {\n    const Component = asChild ? Slot : 'button';\n    const isInteractive = !(isDisabled ?? isLoading);\n\n    const finalStartIconName = startIconName ?? startIconProps?.name;\n    const finalEndIconName = endIconName ?? endIconProps?.name;\n    const hasStart = Boolean(finalStartIconName || startAccessory);\n    const hasEnd = Boolean(finalEndIconName || endAccessory);\n    const hasAccessories = hasStart || hasEnd;\n    const iconSize = MAP_BUTTONBASE_SIZE_ICONSIZE[size];\n    const labelTextVariant = MAP_BUTTONBASE_SIZE_TEXT_VARIANT[size];\n\n    // Calculate tabIndex based on asChild and disabled state\n    const getTabIndex = () => {\n      if (asChild) {\n        return undefined;\n      }\n      return isDisabled ? -1 : undefined;\n    };\n\n    const renderLabel = () => {\n      if (children && typeof children === 'string') {\n        return (\n          <Text\n            variant={labelTextVariant}\n            fontWeight={FontWeight.Medium}\n            color={TextColor.Inherit}\n            asChild\n            {...textProps}\n          >\n            <span>{children}</span>\n          </Text>\n        );\n      }\n      return children;\n    };\n\n    const renderLoadingState = () => (\n      <>\n        <span\n          className=\"absolute inline-flex items-center gap-x-1\"\n          aria-hidden=\"true\"\n        >\n          <Icon\n            name={IconName.Loading}\n            size={iconSize}\n            className={twMerge(\n              'animate-spin text-inherit',\n              loadingIconProps?.className,\n            )}\n            {...loadingIconProps}\n          />\n          <Text\n            variant={labelTextVariant}\n            fontWeight={FontWeight.Medium}\n            color={TextColor.Inherit}\n            asChild\n            {...loadingTextProps}\n          >\n            <span>{loadingText}</span>\n          </Text>\n        </span>\n        <span className=\"invisible inline-flex items-center\" aria-hidden=\"true\">\n          {renderLabel()}\n        </span>\n        {/* Screen reader announcement for loading */}\n        <span className=\"sr-only\" aria-live=\"polite\" aria-atomic=\"true\">\n          {loadingText || 'Loading'}\n        </span>\n      </>\n    );\n\n    const renderStartContent = () => {\n      if (finalStartIconName) {\n        return (\n          <Icon\n            name={finalStartIconName}\n            size={iconSize}\n            className={twMerge(\n              'shrink-0 text-inherit',\n              startIconProps?.className,\n            )}\n            aria-hidden=\"true\"\n            {...startIconProps}\n          />\n        );\n      }\n      if (startAccessory) {\n        return <span aria-hidden=\"true\">{startAccessory}</span>;\n      }\n      return null;\n    };\n\n    const renderEndContent = () => {\n      if (finalEndIconName) {\n        return (\n          <Icon\n            name={finalEndIconName}\n            size={iconSize}\n            className={twMerge(\n              'shrink-0 text-inherit',\n              endIconProps?.className,\n            )}\n            aria-hidden=\"true\"\n            {...endIconProps}\n          />\n        );\n      }\n      if (endAccessory) {\n        return <span aria-hidden=\"true\">{endAccessory}</span>;\n      }\n      return null;\n    };\n\n    const renderContent = () => renderLabel();\n\n    const mergedClassName = twMerge(\n      // Base styles\n      'inline-flex items-center justify-center',\n      getButtonBaseBorderRadiusTwClass(size),\n      getButtonBaseHorizontalPaddingTwClasses(size, hasStart, hasEnd),\n      hasAccessories && 'gap-x-1',\n      'font-medium text-default',\n      'bg-muted',\n      'overflow-hidden',\n      // Add relative positioning for loading state\n      'relative',\n      // Size\n      TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION[size],\n      // Full width\n      isFullWidth && 'w-full',\n      // Animation classes - only applied when interactive\n      isInteractive && [\n        'transition-all',\n        'duration-100',\n        'ease-linear',\n        'active:scale-[0.97]',\n        'active:ease-[cubic-bezier(0.3,0.8,0.3,1)]',\n      ],\n      // Disabled state - apply to both isDisabled and isLoading\n      (isDisabled || isLoading) && 'cursor-not-allowed',\n      isDisabled && 'opacity-50',\n      // Custom classes\n      className,\n    );\n\n    return (\n      <Component\n        ref={ref}\n        className={mergedClassName}\n        disabled={asChild ? undefined : (isDisabled ?? isLoading)}\n        aria-disabled={isDisabled ? 'true' : undefined}\n        aria-busy={isLoading ? 'true' : undefined}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledby}\n        aria-describedby={ariaDescribedby}\n        aria-pressed={ariaPressed}\n        aria-expanded={ariaExpanded}\n        aria-controls={ariaControls}\n        aria-haspopup={ariaHaspopup}\n        role={asChild ? undefined : 'button'}\n        tabIndex={getTabIndex()}\n        style={style}\n        {...props}\n      >\n        {renderStartContent()}\n        <Slottable>\n          {isLoading ? renderLoadingState() : renderContent()}\n        </Slottable>\n        {renderEndContent()}\n      </Component>\n    );\n  },\n);\n\nButtonBase.displayName = 'ButtonBase';\n"]}

package/dist/components/ButtonBase/ButtonBase.types.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonBase.types.cjs","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps } from 'react';\n\nimport type { ButtonBaseSize } from '../../types';\nimport type { IconName, IconProps } from '../Icon';\nimport type { TextProps } from '../Text';\n\nexport type ButtonBaseProps = ComponentProps<'button'> & {\n  /**\n   * Required prop for the content to be rendered within the ButtonBase\n   */\n  children: React.ReactNode;\n  /**\n   * Optional prop for additional CSS classes to be applied to the ButtonBase component.\n   * These classes will be merged with the component's default classes using twMerge.\n   */\n  className?: string;\n  /**\n   * Optional prop to control the size of the ButtonBase\n   *\n   * @default ButtonBaseSize.Lg\n   */\n  size?: ButtonBaseSize;\n  /**\n   * Optional props to be passed to the Text component when children is a string\n   */\n  textProps?: Partial<TextProps>;\n  /**\n   * Optional prop that when true, makes the button take up the full width of its container\n   *\n   * @default false\n   */\n  isFullWidth?: boolean;\n  /**\n   * Optional boolean that determines if the component should merge its props onto its immediate child\n   * instead of rendering a button element\n   *\n   * @default false\n   */\n  asChild?: boolean;\n  /**\n   * Optional prop that when true, shows a loading spinner\n   *\n   * @default false\n   */\n  isLoading?: boolean;\n  /**\n   * Optional prop for text to display when button is in loading state\n   */\n  loadingText?: string;\n  /**\n   * Optional props to be passed to the loading Text component\n   */\n  loadingTextProps?: Partial<TextProps>;\n  /**\n   * Optional prop to specify an icon to show at the start of the button\n   */\n  startIconName?: IconName;\n  /**\n   * Optional prop to pass additional properties to the start icon\n   */\n  startIconProps?: Partial<IconProps>;\n  /**\n   * Optional prop for a custom element to show at the start of the button\n   */\n  startAccessory?: React.ReactNode;\n  /**\n   * Optional prop to specify an icon to show at the end of the button\n   */\n  endIconName?: IconName;\n  /**\n   * Optional prop to pass additional properties to the end icon\n   */\n  endIconProps?: Partial<IconProps>;\n  /**\n   * Optional prop for a custom element to show at the end of the button\n   */\n  endAccessory?: React.ReactNode;\n  /**\n   * Optional prop that when true, disables the button\n   *\n   * @default false\n   */\n  isDisabled?: boolean;\n  /**\n   * Optional prop to pass additional properties to the loading icon\n   */\n  loadingIconProps?: Partial<IconProps>;\n  /**\n   * Optional CSS styles to be applied to the component.\n   * Should be used sparingly and only for dynamic styles that can't be achieved with className.\n   */\n  style?: React.CSSProperties;\n\n  // Accessibility props\n  /**\n   * Optional accessible label for the button. Use when the button text doesn't fully describe its purpose.\n   * This will be used as the aria-label attribute.\n   */\n  'aria-label'?: string;\n  /**\n   * Optional ID of an element that labels the button.\n   * This will be used as the aria-labelledby attribute.\n   */\n  'aria-labelledby'?: string;\n  /**\n   * Optional ID of an element that describes the button.\n   * This will be used as the aria-describedby attribute.\n   */\n  'aria-describedby'?: string;\n  /**\n   * Optional prop to indicate if the button is pressed (for toggle buttons).\n   * This will be used as the aria-pressed attribute.\n   */\n  'aria-pressed'?: boolean | 'mixed';\n  /**\n   * Optional prop to indicate if the button controls a collapsible element.\n   * This will be used as the aria-expanded attribute.\n   */\n  'aria-expanded'?: boolean;\n  /**\n   * Optional prop to indicate if the button controls another element.\n   * This will be used as the aria-controls attribute.\n   */\n  'aria-controls'?: string;\n  /**\n   * Optional prop to indicate if the button has a popup (menu, listbox, tree, grid, or dialog).\n   * This will be used as the aria-haspopup attribute.\n   */\n  'aria-haspopup'?:\n    | boolean\n    | 'false'\n    | 'true'\n    | 'menu'\n    | 'listbox'\n    | 'tree'\n    | 'grid'\n    | 'dialog';\n};\n"]}
+{"version":3,"file":"ButtonBase.types.cjs","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.types.ts"],"names":[],"mappings":"","sourcesContent":["import type {\n  ButtonBasePropsShared,\n  IconName,\n} from '@metamask-previews/design-system-shared';\nimport type { ComponentProps } from 'react';\n\nimport type { IconProps } from '../Icon';\nimport type { TextProps } from '../Text';\n\nexport type ButtonBaseProps = ComponentProps<'button'> &\n  ButtonBasePropsShared & {\n    /**\n     * Optional prop for additional CSS classes to be applied to the ButtonBase component.\n     * These classes will be merged with the component's default classes using twMerge.\n     */\n    className?: string;\n    /**\n     * Optional props to be passed to the Text component when children is a string\n     */\n    textProps?: Partial<TextProps>;\n    /**\n     * Optional boolean that determines if the component should merge its props onto its immediate child\n     * instead of rendering a button element\n     *\n     * @default false\n     */\n    asChild?: boolean;\n    /**\n     * Optional props to be passed to the loading Text component\n     */\n    loadingTextProps?: Partial<TextProps>;\n    /**\n     * Optional prop to specify an icon to show at the start of the button\n     */\n    startIconName?: IconName;\n    /**\n     * Optional prop to pass additional properties to the start icon\n     */\n    startIconProps?: Partial<IconProps>;\n    /**\n     * Optional prop for a custom element to show at the start of the button\n     */\n    startAccessory?: React.ReactNode;\n    /**\n     * Optional prop to specify an icon to show at the end of the button\n     */\n    endIconName?: IconName;\n    /**\n     * Optional prop to pass additional properties to the end icon\n     */\n    endIconProps?: Partial<IconProps>;\n    /**\n     * Optional prop for a custom element to show at the end of the button\n     */\n    endAccessory?: React.ReactNode;\n    /**\n     * Optional prop to pass additional properties to the loading icon\n     */\n    loadingIconProps?: Partial<IconProps>;\n    /**\n     * Optional CSS styles to be applied to the component.\n     * Should be used sparingly and only for dynamic styles that can't be achieved with className.\n     */\n    style?: React.CSSProperties;\n\n    // Accessibility props\n    /**\n     * Optional accessible label for the button. Use when the button text doesn't fully describe its purpose.\n     * This will be used as the aria-label attribute.\n     */\n    'aria-label'?: string;\n    /**\n     * Optional ID of an element that labels the button.\n     * This will be used as the aria-labelledby attribute.\n     */\n    'aria-labelledby'?: string;\n    /**\n     * Optional ID of an element that describes the button.\n     * This will be used as the aria-describedby attribute.\n     */\n    'aria-describedby'?: string;\n    /**\n     * Optional prop to indicate if the button is pressed (for toggle buttons).\n     * This will be used as the aria-pressed attribute.\n     */\n    'aria-pressed'?: boolean | 'mixed';\n    /**\n     * Optional prop to indicate if the button controls a collapsible element.\n     * This will be used as the aria-expanded attribute.\n     */\n    'aria-expanded'?: boolean;\n    /**\n     * Optional prop to indicate if the button controls another element.\n     * This will be used as the aria-controls attribute.\n     */\n    'aria-controls'?: string;\n    /**\n     * Optional prop to indicate if the button has a popup (menu, listbox, tree, grid, or dialog).\n     * This will be used as the aria-haspopup attribute.\n     */\n    'aria-haspopup'?:\n      | boolean\n      | 'false'\n      | 'true'\n      | 'menu'\n      | 'listbox'\n      | 'tree'\n      | 'grid'\n      | 'dialog';\n  };\n"]}

package/dist/components/ButtonBase/ButtonBase.types.d.cts

@@ -1,33 +1,17 @@
+import type { ButtonBasePropsShared, IconName } from "@metamask-previews/design-system-shared";
 import type { ComponentProps } from "react";
-import type { ButtonBaseSize } from "../../types/index.cjs";
-import type { IconName, IconProps } from "../Icon/index.cjs";
+import type { IconProps } from "../Icon/index.cjs";
 import type { TextProps } from "../Text/index.cjs";
-export type ButtonBaseProps = ComponentProps<'button'> & {
-    /**
-     * Required prop for the content to be rendered within the ButtonBase
-     */
-    children: React.ReactNode;
+export type ButtonBaseProps = ComponentProps<'button'> & ButtonBasePropsShared & {
     /**
      * Optional prop for additional CSS classes to be applied to the ButtonBase component.
      * These classes will be merged with the component's default classes using twMerge.
      */
     className?: string;
-    /**
-     * Optional prop to control the size of the ButtonBase
-     *
-     * @default ButtonBaseSize.Lg
-     */
-    size?: ButtonBaseSize;
     /**
      * Optional props to be passed to the Text component when children is a string
      */
     textProps?: Partial<TextProps>;
-    /**
-     * Optional prop that when true, makes the button take up the full width of its container
-     *
-     * @default false
-     */
-    isFullWidth?: boolean;
     /**
      * Optional boolean that determines if the component should merge its props onto its immediate child
      * instead of rendering a button element
@@ -35,16 +19,6 @@ export type ButtonBaseProps = ComponentProps<'button'> & {
      * @default false
      */
     asChild?: boolean;
-    /**
-     * Optional prop that when true, shows a loading spinner
-     *
-     * @default false
-     */
-    isLoading?: boolean;
-    /**
-     * Optional prop for text to display when button is in loading state
-     */
-    loadingText?: string;
     /**
      * Optional props to be passed to the loading Text component
      */
@@ -73,12 +47,6 @@ export type ButtonBaseProps = ComponentProps<'button'> & {
      * Optional prop for a custom element to show at the end of the button
      */
     endAccessory?: React.ReactNode;
-    /**
-     * Optional prop that when true, disables the button
-     *
-     * @default false
-     */
-    isDisabled?: boolean;
     /**
      * Optional prop to pass additional properties to the loading icon
      */

package/dist/components/ButtonBase/ButtonBase.types.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonBase.types.d.cts","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc;AAE5C,OAAO,KAAK,EAAE,cAAc,EAAE,8BAAoB;AAClD,OAAO,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,0BAAgB;AACnD,OAAO,KAAK,EAAE,SAAS,EAAE,0BAAgB;AAEzC,MAAM,MAAM,eAAe,GAAG,cAAc,CAAC,QAAQ,CAAC,GAAG;IACvD;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IAC/B;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IACtC;;OAEG;IACH,aAAa,CAAC,EAAE,QAAQ,CAAC;IACzB;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IACpC;;OAEG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACjC;;OAEG;IACH,WAAW,CAAC,EAAE,QAAQ,CAAC;IACvB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IAClC;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IACtC;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAG5B;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;;OAGG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IACnC;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,eAAe,CAAC,EACZ,OAAO,GACP,OAAO,GACP,MAAM,GACN,MAAM,GACN,SAAS,GACT,MAAM,GACN,MAAM,GACN,QAAQ,CAAC;CACd,CAAC"}
+{"version":3,"file":"ButtonBase.types.d.cts","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,qBAAqB,EACrB,QAAQ,EACT,gDAAgD;AACjD,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc;AAE5C,OAAO,KAAK,EAAE,SAAS,EAAE,0BAAgB;AACzC,OAAO,KAAK,EAAE,SAAS,EAAE,0BAAgB;AAEzC,MAAM,MAAM,eAAe,GAAG,cAAc,CAAC,QAAQ,CAAC,GACpD,qBAAqB,GAAG;IACtB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IAC/B;;;;;OAKG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IACtC;;OAEG;IACH,aAAa,CAAC,EAAE,QAAQ,CAAC;IACzB;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IACpC;;OAEG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACjC;;OAEG;IACH,WAAW,CAAC,EAAE,QAAQ,CAAC;IACvB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IAClC;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IACtC;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAG5B;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;;OAGG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IACnC;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,eAAe,CAAC,EACZ,OAAO,GACP,OAAO,GACP,MAAM,GACN,MAAM,GACN,SAAS,GACT,MAAM,GACN,MAAM,GACN,QAAQ,CAAC;CACd,CAAC"}

package/dist/components/ButtonBase/ButtonBase.types.d.mts

@@ -1,33 +1,17 @@
+import type { ButtonBasePropsShared, IconName } from "@metamask-previews/design-system-shared";
 import type { ComponentProps } from "react";
-import type { ButtonBaseSize } from "../../types/index.mjs";
-import type { IconName, IconProps } from "../Icon/index.mjs";
+import type { IconProps } from "../Icon/index.mjs";
 import type { TextProps } from "../Text/index.mjs";
-export type ButtonBaseProps = ComponentProps<'button'> & {
-    /**
-     * Required prop for the content to be rendered within the ButtonBase
-     */
-    children: React.ReactNode;
+export type ButtonBaseProps = ComponentProps<'button'> & ButtonBasePropsShared & {
     /**
      * Optional prop for additional CSS classes to be applied to the ButtonBase component.
      * These classes will be merged with the component's default classes using twMerge.
      */
     className?: string;
-    /**
-     * Optional prop to control the size of the ButtonBase
-     *
-     * @default ButtonBaseSize.Lg
-     */
-    size?: ButtonBaseSize;
     /**
      * Optional props to be passed to the Text component when children is a string
      */
     textProps?: Partial<TextProps>;
-    /**
-     * Optional prop that when true, makes the button take up the full width of its container
-     *
-     * @default false
-     */
-    isFullWidth?: boolean;
     /**
      * Optional boolean that determines if the component should merge its props onto its immediate child
      * instead of rendering a button element
@@ -35,16 +19,6 @@ export type ButtonBaseProps = ComponentProps<'button'> & {
      * @default false
      */
     asChild?: boolean;
-    /**
-     * Optional prop that when true, shows a loading spinner
-     *
-     * @default false
-     */
-    isLoading?: boolean;
-    /**
-     * Optional prop for text to display when button is in loading state
-     */
-    loadingText?: string;
     /**
      * Optional props to be passed to the loading Text component
      */
@@ -73,12 +47,6 @@ export type ButtonBaseProps = ComponentProps<'button'> & {
      * Optional prop for a custom element to show at the end of the button
      */
     endAccessory?: React.ReactNode;
-    /**
-     * Optional prop that when true, disables the button
-     *
-     * @default false
-     */
-    isDisabled?: boolean;
     /**
      * Optional prop to pass additional properties to the loading icon
      */

package/dist/components/ButtonBase/ButtonBase.types.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonBase.types.d.mts","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc;AAE5C,OAAO,KAAK,EAAE,cAAc,EAAE,8BAAoB;AAClD,OAAO,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,0BAAgB;AACnD,OAAO,KAAK,EAAE,SAAS,EAAE,0BAAgB;AAEzC,MAAM,MAAM,eAAe,GAAG,cAAc,CAAC,QAAQ,CAAC,GAAG;IACvD;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IAC/B;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IACtC;;OAEG;IACH,aAAa,CAAC,EAAE,QAAQ,CAAC;IACzB;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IACpC;;OAEG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACjC;;OAEG;IACH,WAAW,CAAC,EAAE,QAAQ,CAAC;IACvB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IAClC;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IACtC;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAG5B;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;;OAGG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IACnC;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,eAAe,CAAC,EACZ,OAAO,GACP,OAAO,GACP,MAAM,GACN,MAAM,GACN,SAAS,GACT,MAAM,GACN,MAAM,GACN,QAAQ,CAAC;CACd,CAAC"}
+{"version":3,"file":"ButtonBase.types.d.mts","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,qBAAqB,EACrB,QAAQ,EACT,gDAAgD;AACjD,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc;AAE5C,OAAO,KAAK,EAAE,SAAS,EAAE,0BAAgB;AACzC,OAAO,KAAK,EAAE,SAAS,EAAE,0BAAgB;AAEzC,MAAM,MAAM,eAAe,GAAG,cAAc,CAAC,QAAQ,CAAC,GACpD,qBAAqB,GAAG;IACtB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IAC/B;;;;;OAKG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IACtC;;OAEG;IACH,aAAa,CAAC,EAAE,QAAQ,CAAC;IACzB;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IACpC;;OAEG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACjC;;OAEG;IACH,WAAW,CAAC,EAAE,QAAQ,CAAC;IACvB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IAClC;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IACtC;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAG5B;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;;OAGG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IACnC;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,eAAe,CAAC,EACZ,OAAO,GACP,OAAO,GACP,MAAM,GACN,MAAM,GACN,SAAS,GACT,MAAM,GACN,MAAM,GACN,QAAQ,CAAC;CACd,CAAC"}

package/dist/components/ButtonBase/ButtonBase.types.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonBase.types.mjs","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps } from 'react';\n\nimport type { ButtonBaseSize } from '../../types';\nimport type { IconName, IconProps } from '../Icon';\nimport type { TextProps } from '../Text';\n\nexport type ButtonBaseProps = ComponentProps<'button'> & {\n  /**\n   * Required prop for the content to be rendered within the ButtonBase\n   */\n  children: React.ReactNode;\n  /**\n   * Optional prop for additional CSS classes to be applied to the ButtonBase component.\n   * These classes will be merged with the component's default classes using twMerge.\n   */\n  className?: string;\n  /**\n   * Optional prop to control the size of the ButtonBase\n   *\n   * @default ButtonBaseSize.Lg\n   */\n  size?: ButtonBaseSize;\n  /**\n   * Optional props to be passed to the Text component when children is a string\n   */\n  textProps?: Partial<TextProps>;\n  /**\n   * Optional prop that when true, makes the button take up the full width of its container\n   *\n   * @default false\n   */\n  isFullWidth?: boolean;\n  /**\n   * Optional boolean that determines if the component should merge its props onto its immediate child\n   * instead of rendering a button element\n   *\n   * @default false\n   */\n  asChild?: boolean;\n  /**\n   * Optional prop that when true, shows a loading spinner\n   *\n   * @default false\n   */\n  isLoading?: boolean;\n  /**\n   * Optional prop for text to display when button is in loading state\n   */\n  loadingText?: string;\n  /**\n   * Optional props to be passed to the loading Text component\n   */\n  loadingTextProps?: Partial<TextProps>;\n  /**\n   * Optional prop to specify an icon to show at the start of the button\n   */\n  startIconName?: IconName;\n  /**\n   * Optional prop to pass additional properties to the start icon\n   */\n  startIconProps?: Partial<IconProps>;\n  /**\n   * Optional prop for a custom element to show at the start of the button\n   */\n  startAccessory?: React.ReactNode;\n  /**\n   * Optional prop to specify an icon to show at the end of the button\n   */\n  endIconName?: IconName;\n  /**\n   * Optional prop to pass additional properties to the end icon\n   */\n  endIconProps?: Partial<IconProps>;\n  /**\n   * Optional prop for a custom element to show at the end of the button\n   */\n  endAccessory?: React.ReactNode;\n  /**\n   * Optional prop that when true, disables the button\n   *\n   * @default false\n   */\n  isDisabled?: boolean;\n  /**\n   * Optional prop to pass additional properties to the loading icon\n   */\n  loadingIconProps?: Partial<IconProps>;\n  /**\n   * Optional CSS styles to be applied to the component.\n   * Should be used sparingly and only for dynamic styles that can't be achieved with className.\n   */\n  style?: React.CSSProperties;\n\n  // Accessibility props\n  /**\n   * Optional accessible label for the button. Use when the button text doesn't fully describe its purpose.\n   * This will be used as the aria-label attribute.\n   */\n  'aria-label'?: string;\n  /**\n   * Optional ID of an element that labels the button.\n   * This will be used as the aria-labelledby attribute.\n   */\n  'aria-labelledby'?: string;\n  /**\n   * Optional ID of an element that describes the button.\n   * This will be used as the aria-describedby attribute.\n   */\n  'aria-describedby'?: string;\n  /**\n   * Optional prop to indicate if the button is pressed (for toggle buttons).\n   * This will be used as the aria-pressed attribute.\n   */\n  'aria-pressed'?: boolean | 'mixed';\n  /**\n   * Optional prop to indicate if the button controls a collapsible element.\n   * This will be used as the aria-expanded attribute.\n   */\n  'aria-expanded'?: boolean;\n  /**\n   * Optional prop to indicate if the button controls another element.\n   * This will be used as the aria-controls attribute.\n   */\n  'aria-controls'?: string;\n  /**\n   * Optional prop to indicate if the button has a popup (menu, listbox, tree, grid, or dialog).\n   * This will be used as the aria-haspopup attribute.\n   */\n  'aria-haspopup'?:\n    | boolean\n    | 'false'\n    | 'true'\n    | 'menu'\n    | 'listbox'\n    | 'tree'\n    | 'grid'\n    | 'dialog';\n};\n"]}
+{"version":3,"file":"ButtonBase.types.mjs","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.types.ts"],"names":[],"mappings":"","sourcesContent":["import type {\n  ButtonBasePropsShared,\n  IconName,\n} from '@metamask-previews/design-system-shared';\nimport type { ComponentProps } from 'react';\n\nimport type { IconProps } from '../Icon';\nimport type { TextProps } from '../Text';\n\nexport type ButtonBaseProps = ComponentProps<'button'> &\n  ButtonBasePropsShared & {\n    /**\n     * Optional prop for additional CSS classes to be applied to the ButtonBase component.\n     * These classes will be merged with the component's default classes using twMerge.\n     */\n    className?: string;\n    /**\n     * Optional props to be passed to the Text component when children is a string\n     */\n    textProps?: Partial<TextProps>;\n    /**\n     * Optional boolean that determines if the component should merge its props onto its immediate child\n     * instead of rendering a button element\n     *\n     * @default false\n     */\n    asChild?: boolean;\n    /**\n     * Optional props to be passed to the loading Text component\n     */\n    loadingTextProps?: Partial<TextProps>;\n    /**\n     * Optional prop to specify an icon to show at the start of the button\n     */\n    startIconName?: IconName;\n    /**\n     * Optional prop to pass additional properties to the start icon\n     */\n    startIconProps?: Partial<IconProps>;\n    /**\n     * Optional prop for a custom element to show at the start of the button\n     */\n    startAccessory?: React.ReactNode;\n    /**\n     * Optional prop to specify an icon to show at the end of the button\n     */\n    endIconName?: IconName;\n    /**\n     * Optional prop to pass additional properties to the end icon\n     */\n    endIconProps?: Partial<IconProps>;\n    /**\n     * Optional prop for a custom element to show at the end of the button\n     */\n    endAccessory?: React.ReactNode;\n    /**\n     * Optional prop to pass additional properties to the loading icon\n     */\n    loadingIconProps?: Partial<IconProps>;\n    /**\n     * Optional CSS styles to be applied to the component.\n     * Should be used sparingly and only for dynamic styles that can't be achieved with className.\n     */\n    style?: React.CSSProperties;\n\n    // Accessibility props\n    /**\n     * Optional accessible label for the button. Use when the button text doesn't fully describe its purpose.\n     * This will be used as the aria-label attribute.\n     */\n    'aria-label'?: string;\n    /**\n     * Optional ID of an element that labels the button.\n     * This will be used as the aria-labelledby attribute.\n     */\n    'aria-labelledby'?: string;\n    /**\n     * Optional ID of an element that describes the button.\n     * This will be used as the aria-describedby attribute.\n     */\n    'aria-describedby'?: string;\n    /**\n     * Optional prop to indicate if the button is pressed (for toggle buttons).\n     * This will be used as the aria-pressed attribute.\n     */\n    'aria-pressed'?: boolean | 'mixed';\n    /**\n     * Optional prop to indicate if the button controls a collapsible element.\n     * This will be used as the aria-expanded attribute.\n     */\n    'aria-expanded'?: boolean;\n    /**\n     * Optional prop to indicate if the button controls another element.\n     * This will be used as the aria-controls attribute.\n     */\n    'aria-controls'?: string;\n    /**\n     * Optional prop to indicate if the button has a popup (menu, listbox, tree, grid, or dialog).\n     * This will be used as the aria-haspopup attribute.\n     */\n    'aria-haspopup'?:\n      | boolean\n      | 'false'\n      | 'true'\n      | 'menu'\n      | 'listbox'\n      | 'tree'\n      | 'grid'\n      | 'dialog';\n  };\n"]}

package/dist/components/ButtonBase/index.cjs

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ButtonBase = exports.ButtonBaseSize = void 0;
-var types_1 = require("../../types/index.cjs");
-Object.defineProperty(exports, "ButtonBaseSize", { enumerable: true, get: function () { return types_1.ButtonBaseSize; } });
+var design_system_shared_1 = require("@metamask-previews/design-system-shared");
+Object.defineProperty(exports, "ButtonBaseSize", { enumerable: true, get: function () { return design_system_shared_1.ButtonBaseSize; } });
 var ButtonBase_1 = require("./ButtonBase.cjs");
 Object.defineProperty(exports, "ButtonBase", { enumerable: true, get: function () { return ButtonBase_1.ButtonBase; } });
 //# sourceMappingURL=index.cjs.map

package/dist/components/ButtonBase/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sourceRoot":"","sources":["../../../src/components/ButtonBase/index.ts"],"names":[],"mappings":";;;AAAA,+CAA6C;AAApC,uGAAA,cAAc,OAAA;AACvB,+CAA0C;AAAjC,wGAAA,UAAU,OAAA","sourcesContent":["export { ButtonBaseSize } from '../../types';\nexport { ButtonBase } from './ButtonBase';\nexport type { ButtonBaseProps } from './ButtonBase.types';\n"]}
+{"version":3,"file":"index.cjs","sourceRoot":"","sources":["../../../src/components/ButtonBase/index.ts"],"names":[],"mappings":";;;AAAA,gFAAyE;AAAhE,sHAAA,cAAc,OAAA;AACvB,+CAA0C;AAAjC,wGAAA,UAAU,OAAA","sourcesContent":["export { ButtonBaseSize } from '@metamask-previews/design-system-shared';\nexport { ButtonBase } from './ButtonBase';\nexport type { ButtonBaseProps } from './ButtonBase.types';\n"]}

package/dist/components/ButtonBase/index.d.cts

@@ -1,4 +1,4 @@
-export { ButtonBaseSize } from "../../types/index.cjs";
+export { ButtonBaseSize } from "@metamask-previews/design-system-shared";
 export { ButtonBase } from "./ButtonBase.cjs";
 export type { ButtonBaseProps } from "./ButtonBase.types.cjs";
 //# sourceMappingURL=index.d.cts.map

package/dist/components/ButtonBase/index.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/ButtonBase/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,8BAAoB;AAC7C,OAAO,EAAE,UAAU,EAAE,yBAAqB;AAC1C,YAAY,EAAE,eAAe,EAAE,+BAA2B"}
+{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/ButtonBase/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,gDAAgD;AACzE,OAAO,EAAE,UAAU,EAAE,yBAAqB;AAC1C,YAAY,EAAE,eAAe,EAAE,+BAA2B"}

package/dist/components/ButtonBase/index.d.mts

@@ -1,4 +1,4 @@
-export { ButtonBaseSize } from "../../types/index.mjs";
+export { ButtonBaseSize } from "@metamask-previews/design-system-shared";
 export { ButtonBase } from "./ButtonBase.mjs";
 export type { ButtonBaseProps } from "./ButtonBase.types.mjs";
 //# sourceMappingURL=index.d.mts.map

package/dist/components/ButtonBase/index.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.mts","sourceRoot":"","sources":["../../../src/components/ButtonBase/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,8BAAoB;AAC7C,OAAO,EAAE,UAAU,EAAE,yBAAqB;AAC1C,YAAY,EAAE,eAAe,EAAE,+BAA2B"}
+{"version":3,"file":"index.d.mts","sourceRoot":"","sources":["../../../src/components/ButtonBase/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,gDAAgD;AACzE,OAAO,EAAE,UAAU,EAAE,yBAAqB;AAC1C,YAAY,EAAE,eAAe,EAAE,+BAA2B"}

package/dist/components/ButtonBase/index.mjs

@@ -1,3 +1,3 @@
-export { ButtonBaseSize } from "../../types/index.mjs";
+export { ButtonBaseSize } from "@metamask-previews/design-system-shared";
 export { ButtonBase } from "./ButtonBase.mjs";
 //# sourceMappingURL=index.mjs.map

package/dist/components/ButtonBase/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sourceRoot":"","sources":["../../../src/components/ButtonBase/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,8BAAoB;AAC7C,OAAO,EAAE,UAAU,EAAE,yBAAqB","sourcesContent":["export { ButtonBaseSize } from '../../types';\nexport { ButtonBase } from './ButtonBase';\nexport type { ButtonBaseProps } from './ButtonBase.types';\n"]}
+{"version":3,"file":"index.mjs","sourceRoot":"","sources":["../../../src/components/ButtonBase/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,gDAAgD;AACzE,OAAO,EAAE,UAAU,EAAE,yBAAqB","sourcesContent":["export { ButtonBaseSize } from '@metamask-previews/design-system-shared';\nexport { ButtonBase } from './ButtonBase';\nexport type { ButtonBaseProps } from './ButtonBase.types';\n"]}

package/dist/components/ButtonHero/index.cjs

@@ -3,6 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ButtonHeroSize = exports.ButtonHero = void 0;
 var ButtonHero_1 = require("./ButtonHero.cjs");
 Object.defineProperty(exports, "ButtonHero", { enumerable: true, get: function () { return ButtonHero_1.ButtonHero; } });
-var types_1 = require("../../types/index.cjs");
-Object.defineProperty(exports, "ButtonHeroSize", { enumerable: true, get: function () { return types_1.ButtonHeroSize; } });
+var design_system_shared_1 = require("@metamask-previews/design-system-shared");
+Object.defineProperty(exports, "ButtonHeroSize", { enumerable: true, get: function () { return design_system_shared_1.ButtonHeroSize; } });
 //# sourceMappingURL=index.cjs.map

package/dist/components/ButtonHero/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sourceRoot":"","sources":["../../../src/components/ButtonHero/index.ts"],"names":[],"mappings":";;;AAAA,+CAA0C;AAAjC,wGAAA,UAAU,OAAA;AAEnB,+CAA6C;AAApC,uGAAA,cAAc,OAAA","sourcesContent":["export { ButtonHero } from './ButtonHero';\nexport type { ButtonHeroProps } from './ButtonHero.types';\nexport { ButtonHeroSize } from '../../types';\n"]}
+{"version":3,"file":"index.cjs","sourceRoot":"","sources":["../../../src/components/ButtonHero/index.ts"],"names":[],"mappings":";;;AAAA,+CAA0C;AAAjC,wGAAA,UAAU,OAAA;AAEnB,gFAAyE;AAAhE,sHAAA,cAAc,OAAA","sourcesContent":["export { ButtonHero } from './ButtonHero';\nexport type { ButtonHeroProps } from './ButtonHero.types';\nexport { ButtonHeroSize } from '@metamask-previews/design-system-shared';\n"]}

package/dist/components/ButtonHero/index.d.cts

@@ -1,4 +1,4 @@
 export { ButtonHero } from "./ButtonHero.cjs";
 export type { ButtonHeroProps } from "./ButtonHero.types.cjs";
-export { ButtonHeroSize } from "../../types/index.cjs";
+export { ButtonHeroSize } from "@metamask-previews/design-system-shared";
 //# sourceMappingURL=index.d.cts.map

package/dist/components/ButtonHero/index.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/ButtonHero/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,yBAAqB;AAC1C,YAAY,EAAE,eAAe,EAAE,+BAA2B;AAC1D,OAAO,EAAE,cAAc,EAAE,8BAAoB"}
+{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/ButtonHero/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,yBAAqB;AAC1C,YAAY,EAAE,eAAe,EAAE,+BAA2B;AAC1D,OAAO,EAAE,cAAc,EAAE,gDAAgD"}

package/dist/components/ButtonHero/index.d.mts

@@ -1,4 +1,4 @@
 export { ButtonHero } from "./ButtonHero.mjs";
 export type { ButtonHeroProps } from "./ButtonHero.types.mjs";
-export { ButtonHeroSize } from "../../types/index.mjs";
+export { ButtonHeroSize } from "@metamask-previews/design-system-shared";
 //# sourceMappingURL=index.d.mts.map

package/dist/components/ButtonHero/index.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.mts","sourceRoot":"","sources":["../../../src/components/ButtonHero/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,yBAAqB;AAC1C,YAAY,EAAE,eAAe,EAAE,+BAA2B;AAC1D,OAAO,EAAE,cAAc,EAAE,8BAAoB"}
+{"version":3,"file":"index.d.mts","sourceRoot":"","sources":["../../../src/components/ButtonHero/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,yBAAqB;AAC1C,YAAY,EAAE,eAAe,EAAE,+BAA2B;AAC1D,OAAO,EAAE,cAAc,EAAE,gDAAgD"}

package/dist/components/ButtonHero/index.mjs

@@ -1,3 +1,3 @@
 export { ButtonHero } from "./ButtonHero.mjs";
-export { ButtonHeroSize } from "../../types/index.mjs";
+export { ButtonHeroSize } from "@metamask-previews/design-system-shared";
 //# sourceMappingURL=index.mjs.map

package/dist/components/ButtonHero/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sourceRoot":"","sources":["../../../src/components/ButtonHero/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,yBAAqB;AAE1C,OAAO,EAAE,cAAc,EAAE,8BAAoB","sourcesContent":["export { ButtonHero } from './ButtonHero';\nexport type { ButtonHeroProps } from './ButtonHero.types';\nexport { ButtonHeroSize } from '../../types';\n"]}
+{"version":3,"file":"index.mjs","sourceRoot":"","sources":["../../../src/components/ButtonHero/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,yBAAqB;AAE1C,OAAO,EAAE,cAAc,EAAE,gDAAgD","sourcesContent":["export { ButtonHero } from './ButtonHero';\nexport type { ButtonHeroProps } from './ButtonHero.types';\nexport { ButtonHeroSize } from '@metamask-previews/design-system-shared';\n"]}

package/dist/components/ButtonIcon/ButtonIcon.cjs

@@ -24,12 +24,12 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ButtonIcon = void 0;
+const design_system_shared_1 = require("@metamask-previews/design-system-shared");
 const react_1 = __importStar(require("react"));
-const types_1 = require("../../types/index.cjs");
 const tw_merge_1 = require("../../utils/tw-merge.cjs");
 const Icon_1 = require("../Icon/index.cjs");
 const ButtonIcon_constants_1 = require("./ButtonIcon.constants.cjs");
-exports.ButtonIcon = (0, react_1.forwardRef)(({ className, iconName, iconProps, ariaLabel, isDisabled = false, variant = types_1.ButtonIconVariant.Default, size = types_1.ButtonIconSize.Md, style, ...props }, ref) => {
+exports.ButtonIcon = (0, react_1.forwardRef)(({ className, iconName, iconProps, ariaLabel, isDisabled = false, variant = design_system_shared_1.ButtonIconVariant.Default, size = design_system_shared_1.ButtonIconSize.Md, style, ...props }, ref) => {
     const isInteractive = !isDisabled;
     const mergedClassName = (0, tw_merge_1.twMerge)(
     // Base styles
@@ -37,14 +37,14 @@ exports.ButtonIcon = (0, react_1.forwardRef)(({ className, iconName, iconProps,
     // Size styles
     ButtonIcon_constants_1.TWCLASSMAP_BUTTONICON_SIZE_DIMENSION[size], 
     // Variant styles
-    variant === types_1.ButtonIconVariant.Default && [
+    variant === design_system_shared_1.ButtonIconVariant.Default && [
         'rounded-lg bg-transparent',
         isInteractive && 'hover:bg-hover active:bg-pressed',
         'text-icon-default',
-    ], variant === types_1.ButtonIconVariant.Floating && [
+    ], variant === design_system_shared_1.ButtonIconVariant.Floating && [
         'rounded-full',
         'bg-icon-default text-background-default',
-    ], variant === types_1.ButtonIconVariant.Filled && [
+    ], variant === design_system_shared_1.ButtonIconVariant.Filled && [
         'rounded-full',
         'bg-muted text-icon-default',
         isInteractive && 'hover:bg-muted-hover active:bg-muted-pressed',

package/dist/components/ButtonIcon/ButtonIcon.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonIcon.cjs","sourceRoot":"","sources":["../../../src/components/ButtonIcon/ButtonIcon.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAE1C,iDAAgE;AAChE,uDAA+C;AAC/C,4CAA+B;AAE/B,qEAGgC;AAGnB,QAAA,UAAU,GAAG,IAAA,kBAAU,EAClC,CACE,EACE,SAAS,EACT,QAAQ,EACR,SAAS,EACT,SAAS,EACT,UAAU,GAAG,KAAK,EAClB,OAAO,GAAG,yBAAiB,CAAC,OAAO,EACnC,IAAI,GAAG,sBAAc,CAAC,EAAE,EACxB,KAAK,EACL,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,aAAa,GAAG,CAAC,UAAU,CAAC;IAElC,MAAM,eAAe,GAAG,IAAA,kBAAO;IAC7B,cAAc;IACd,6CAA6C;IAC7C,cAAc;IACd,2DAAoC,CAAC,IAAI,CAAC;IAC1C,iBAAiB;IACjB,OAAO,KAAK,yBAAiB,CAAC,OAAO,IAAI;QACvC,2BAA2B;QAC3B,aAAa,IAAI,kCAAkC;QACnD,mBAAmB;KACpB,EACD,OAAO,KAAK,yBAAiB,CAAC,QAAQ,IAAI;QACxC,cAAc;QACd,yCAAyC;KAC1C,EACD,OAAO,KAAK,yBAAiB,CAAC,MAAM,IAAI;QACtC,cAAc;QACd,4BAA4B;QAC5B,aAAa,IAAI,8CAA8C;KAChE;IACD,iBAAiB;IACjB,UAAU,IAAI,+BAA+B,EAC7C,SAAS,CACV,CAAC;IAEF,OAAO,CACL,0CACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,eAAe,EAC1B,QAAQ,EAAE,UAAU,gBACR,SAAS,EACrB,KAAK,EAAE,KAAK,KACR,KAAK;QAET,8BAAC,WAAI,IACH,IAAI,EAAE,QAAQ,EACd,IAAI,EAAE,mDAA4B,CAAC,IAAI,CAAC,EACxC,SAAS,EAAE,IAAA,kBAAO,EAAC,cAAc,EAAE,SAAS,EAAE,SAAS,CAAC,KACpD,SAAS,GACb,CACK,CACV,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,kBAAU,CAAC,WAAW,GAAG,YAAY,CAAC","sourcesContent":["import React, { forwardRef } from 'react';\n\nimport { ButtonIconSize, ButtonIconVariant } from '../../types';\nimport { twMerge } from '../../utils/tw-merge';\nimport { Icon } from '../Icon';\n\nimport {\n  TWCLASSMAP_BUTTONICON_SIZE_DIMENSION,\n  MAP_BUTTONICON_SIZE_ICONSIZE,\n} from './ButtonIcon.constants';\nimport type { ButtonIconProps } from './ButtonIcon.types';\n\nexport const ButtonIcon = forwardRef<HTMLButtonElement, ButtonIconProps>(\n  (\n    {\n      className,\n      iconName,\n      iconProps,\n      ariaLabel,\n      isDisabled = false,\n      variant = ButtonIconVariant.Default,\n      size = ButtonIconSize.Md,\n      style,\n      ...props\n    },\n    ref,\n  ) => {\n    const isInteractive = !isDisabled;\n\n    const mergedClassName = twMerge(\n      // Base styles\n      'inline-flex items-center justify-center p-0',\n      // Size styles\n      TWCLASSMAP_BUTTONICON_SIZE_DIMENSION[size],\n      // Variant styles\n      variant === ButtonIconVariant.Default && [\n        'rounded-lg bg-transparent',\n        isInteractive && 'hover:bg-hover active:bg-pressed',\n        'text-icon-default',\n      ],\n      variant === ButtonIconVariant.Floating && [\n        'rounded-full',\n        'bg-icon-default text-background-default',\n      ],\n      variant === ButtonIconVariant.Filled && [\n        'rounded-full',\n        'bg-muted text-icon-default',\n        isInteractive && 'hover:bg-muted-hover active:bg-muted-pressed',\n      ],\n      // Disabled state\n      isDisabled && 'cursor-not-allowed opacity-50',\n      className,\n    );\n\n    return (\n      <button\n        ref={ref}\n        className={mergedClassName}\n        disabled={isDisabled}\n        aria-label={ariaLabel}\n        style={style}\n        {...props}\n      >\n        <Icon\n          name={iconName}\n          size={MAP_BUTTONICON_SIZE_ICONSIZE[size]}\n          className={twMerge('text-inherit', iconProps?.className)}\n          {...iconProps}\n        />\n      </button>\n    );\n  },\n);\n\nButtonIcon.displayName = 'ButtonIcon';\n"]}
+{"version":3,"file":"ButtonIcon.cjs","sourceRoot":"","sources":["../../../src/components/ButtonIcon/ButtonIcon.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,kFAGiD;AACjD,+CAA0C;AAE1C,uDAA+C;AAC/C,4CAA+B;AAE/B,qEAGgC;AAGnB,QAAA,UAAU,GAAG,IAAA,kBAAU,EAClC,CACE,EACE,SAAS,EACT,QAAQ,EACR,SAAS,EACT,SAAS,EACT,UAAU,GAAG,KAAK,EAClB,OAAO,GAAG,wCAAiB,CAAC,OAAO,EACnC,IAAI,GAAG,qCAAc,CAAC,EAAE,EACxB,KAAK,EACL,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,aAAa,GAAG,CAAC,UAAU,CAAC;IAElC,MAAM,eAAe,GAAG,IAAA,kBAAO;IAC7B,cAAc;IACd,6CAA6C;IAC7C,cAAc;IACd,2DAAoC,CAAC,IAAI,CAAC;IAC1C,iBAAiB;IACjB,OAAO,KAAK,wCAAiB,CAAC,OAAO,IAAI;QACvC,2BAA2B;QAC3B,aAAa,IAAI,kCAAkC;QACnD,mBAAmB;KACpB,EACD,OAAO,KAAK,wCAAiB,CAAC,QAAQ,IAAI;QACxC,cAAc;QACd,yCAAyC;KAC1C,EACD,OAAO,KAAK,wCAAiB,CAAC,MAAM,IAAI;QACtC,cAAc;QACd,4BAA4B;QAC5B,aAAa,IAAI,8CAA8C;KAChE;IACD,iBAAiB;IACjB,UAAU,IAAI,+BAA+B,EAC7C,SAAS,CACV,CAAC;IAEF,OAAO,CACL,0CACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,eAAe,EAC1B,QAAQ,EAAE,UAAU,gBACR,SAAS,EACrB,KAAK,EAAE,KAAK,KACR,KAAK;QAET,8BAAC,WAAI,IACH,IAAI,EAAE,QAAQ,EACd,IAAI,EAAE,mDAA4B,CAAC,IAAI,CAAC,EACxC,SAAS,EAAE,IAAA,kBAAO,EAAC,cAAc,EAAE,SAAS,EAAE,SAAS,CAAC,KACpD,SAAS,GACb,CACK,CACV,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,kBAAU,CAAC,WAAW,GAAG,YAAY,CAAC","sourcesContent":["import {\n  ButtonIconSize,\n  ButtonIconVariant,\n} from '@metamask-previews/design-system-shared';\nimport React, { forwardRef } from 'react';\n\nimport { twMerge } from '../../utils/tw-merge';\nimport { Icon } from '../Icon';\n\nimport {\n  TWCLASSMAP_BUTTONICON_SIZE_DIMENSION,\n  MAP_BUTTONICON_SIZE_ICONSIZE,\n} from './ButtonIcon.constants';\nimport type { ButtonIconProps } from './ButtonIcon.types';\n\nexport const ButtonIcon = forwardRef<HTMLButtonElement, ButtonIconProps>(\n  (\n    {\n      className,\n      iconName,\n      iconProps,\n      ariaLabel,\n      isDisabled = false,\n      variant = ButtonIconVariant.Default,\n      size = ButtonIconSize.Md,\n      style,\n      ...props\n    },\n    ref,\n  ) => {\n    const isInteractive = !isDisabled;\n\n    const mergedClassName = twMerge(\n      // Base styles\n      'inline-flex items-center justify-center p-0',\n      // Size styles\n      TWCLASSMAP_BUTTONICON_SIZE_DIMENSION[size],\n      // Variant styles\n      variant === ButtonIconVariant.Default && [\n        'rounded-lg bg-transparent',\n        isInteractive && 'hover:bg-hover active:bg-pressed',\n        'text-icon-default',\n      ],\n      variant === ButtonIconVariant.Floating && [\n        'rounded-full',\n        'bg-icon-default text-background-default',\n      ],\n      variant === ButtonIconVariant.Filled && [\n        'rounded-full',\n        'bg-muted text-icon-default',\n        isInteractive && 'hover:bg-muted-hover active:bg-muted-pressed',\n      ],\n      // Disabled state\n      isDisabled && 'cursor-not-allowed opacity-50',\n      className,\n    );\n\n    return (\n      <button\n        ref={ref}\n        className={mergedClassName}\n        disabled={isDisabled}\n        aria-label={ariaLabel}\n        style={style}\n        {...props}\n      >\n        <Icon\n          name={iconName}\n          size={MAP_BUTTONICON_SIZE_ICONSIZE[size]}\n          className={twMerge('text-inherit', iconProps?.className)}\n          {...iconProps}\n        />\n      </button>\n    );\n  },\n);\n\nButtonIcon.displayName = 'ButtonIcon';\n"]}

package/dist/components/ButtonIcon/ButtonIcon.constants.cjs

@@ -1,16 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MAP_BUTTONICON_SIZE_ICONSIZE = exports.TWCLASSMAP_BUTTONICON_SIZE_DIMENSION = void 0;
-const types_1 = require("../../types/index.cjs");
-const Icon_1 = require("../Icon/index.cjs");
+const design_system_shared_1 = require("@metamask-previews/design-system-shared");
 exports.TWCLASSMAP_BUTTONICON_SIZE_DIMENSION = {
-    [types_1.ButtonIconSize.Sm]: 'h-6 w-6',
-    [types_1.ButtonIconSize.Md]: 'h-8 w-8',
-    [types_1.ButtonIconSize.Lg]: 'h-10 w-10',
+    [design_system_shared_1.ButtonIconSize.Sm]: 'h-6 w-6',
+    [design_system_shared_1.ButtonIconSize.Md]: 'h-8 w-8',
+    [design_system_shared_1.ButtonIconSize.Lg]: 'h-10 w-10',
 };
 exports.MAP_BUTTONICON_SIZE_ICONSIZE = {
-    [types_1.ButtonIconSize.Sm]: Icon_1.IconSize.Md,
-    [types_1.ButtonIconSize.Md]: Icon_1.IconSize.Lg,
-    [types_1.ButtonIconSize.Lg]: Icon_1.IconSize.Xl,
+    [design_system_shared_1.ButtonIconSize.Sm]: design_system_shared_1.IconSize.Md,
+    [design_system_shared_1.ButtonIconSize.Md]: design_system_shared_1.IconSize.Lg,
+    [design_system_shared_1.ButtonIconSize.Lg]: design_system_shared_1.IconSize.Xl,
 };
 //# sourceMappingURL=ButtonIcon.constants.cjs.map

package/dist/components/ButtonIcon/ButtonIcon.constants.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonIcon.constants.cjs","sourceRoot":"","sources":["../../../src/components/ButtonIcon/ButtonIcon.constants.ts"],"names":[],"mappings":";;;AAAA,iDAA6C;AAC7C,4CAAmC;AAEtB,QAAA,oCAAoC,GAAG;IAClD,CAAC,sBAAc,CAAC,EAAE,CAAC,EAAE,SAAS;IAC9B,CAAC,sBAAc,CAAC,EAAE,CAAC,EAAE,SAAS;IAC9B,CAAC,sBAAc,CAAC,EAAE,CAAC,EAAE,WAAW;CACxB,CAAC;AAEE,QAAA,4BAA4B,GAAG;IAC1C,CAAC,sBAAc,CAAC,EAAE,CAAC,EAAE,eAAQ,CAAC,EAAE;IAChC,CAAC,sBAAc,CAAC,EAAE,CAAC,EAAE,eAAQ,CAAC,EAAE;IAChC,CAAC,sBAAc,CAAC,EAAE,CAAC,EAAE,eAAQ,CAAC,EAAE;CACxB,CAAC","sourcesContent":["import { ButtonIconSize } from '../../types';\nimport { IconSize } from '../Icon';\n\nexport const TWCLASSMAP_BUTTONICON_SIZE_DIMENSION = {\n  [ButtonIconSize.Sm]: 'h-6 w-6',\n  [ButtonIconSize.Md]: 'h-8 w-8',\n  [ButtonIconSize.Lg]: 'h-10 w-10',\n} as const;\n\nexport const MAP_BUTTONICON_SIZE_ICONSIZE = {\n  [ButtonIconSize.Sm]: IconSize.Md,\n  [ButtonIconSize.Md]: IconSize.Lg,\n  [ButtonIconSize.Lg]: IconSize.Xl,\n} as const;\n"]}
+{"version":3,"file":"ButtonIcon.constants.cjs","sourceRoot":"","sources":["../../../src/components/ButtonIcon/ButtonIcon.constants.ts"],"names":[],"mappings":";;;AAAA,kFAAmF;AAEtE,QAAA,oCAAoC,GAAG;IAClD,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,SAAS;IAC9B,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,SAAS;IAC9B,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,WAAW;CACxB,CAAC;AAEE,QAAA,4BAA4B,GAAG;IAC1C,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,+BAAQ,CAAC,EAAE;IAChC,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,+BAAQ,CAAC,EAAE;IAChC,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,+BAAQ,CAAC,EAAE;CACxB,CAAC","sourcesContent":["import { ButtonIconSize, IconSize } from '@metamask-previews/design-system-shared';\n\nexport const TWCLASSMAP_BUTTONICON_SIZE_DIMENSION = {\n  [ButtonIconSize.Sm]: 'h-6 w-6',\n  [ButtonIconSize.Md]: 'h-8 w-8',\n  [ButtonIconSize.Lg]: 'h-10 w-10',\n} as const;\n\nexport const MAP_BUTTONICON_SIZE_ICONSIZE = {\n  [ButtonIconSize.Sm]: IconSize.Md,\n  [ButtonIconSize.Md]: IconSize.Lg,\n  [ButtonIconSize.Lg]: IconSize.Xl,\n} as const;\n"]}

package/dist/components/ButtonIcon/ButtonIcon.constants.d.cts

@@ -1,12 +1,11 @@
-import { IconSize } from "../Icon/index.cjs";
 export declare const TWCLASSMAP_BUTTONICON_SIZE_DIMENSION: {
     readonly sm: "h-6 w-6";
     readonly md: "h-8 w-8";
     readonly lg: "h-10 w-10";
 };
 export declare const MAP_BUTTONICON_SIZE_ICONSIZE: {
-    readonly sm: IconSize.Md;
-    readonly md: IconSize.Lg;
-    readonly lg: IconSize.Xl;
+    readonly sm: "md";
+    readonly md: "lg";
+    readonly lg: "xl";
 };
 //# sourceMappingURL=ButtonIcon.constants.d.cts.map

package/dist/components/ButtonIcon/ButtonIcon.constants.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonIcon.constants.d.cts","sourceRoot":"","sources":["../../../src/components/ButtonIcon/ButtonIcon.constants.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,0BAAgB;AAEnC,eAAO,MAAM,oCAAoC;;;;CAIvC,CAAC;AAEX,eAAO,MAAM,4BAA4B;;;;CAI/B,CAAC"}
+{"version":3,"file":"ButtonIcon.constants.d.cts","sourceRoot":"","sources":["../../../src/components/ButtonIcon/ButtonIcon.constants.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,oCAAoC;;;;CAIvC,CAAC;AAEX,eAAO,MAAM,4BAA4B;;;;CAI/B,CAAC"}

package/dist/components/ButtonIcon/ButtonIcon.constants.d.mts

@@ -1,12 +1,11 @@
-import { IconSize } from "../Icon/index.mjs";
 export declare const TWCLASSMAP_BUTTONICON_SIZE_DIMENSION: {
     readonly sm: "h-6 w-6";
     readonly md: "h-8 w-8";
     readonly lg: "h-10 w-10";
 };
 export declare const MAP_BUTTONICON_SIZE_ICONSIZE: {
-    readonly sm: IconSize.Md;
-    readonly md: IconSize.Lg;
-    readonly lg: IconSize.Xl;
+    readonly sm: "md";
+    readonly md: "lg";
+    readonly lg: "xl";
 };
 //# sourceMappingURL=ButtonIcon.constants.d.mts.map