@metamask-previews/design-system-react-native 0.6.0-preview.3dc70e1 → 0.11.0-preview.fa05289

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 { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React, { useMemo } from 'react';\nimport { View } from 'react-native';\nimport type { StyleProp, ViewStyle } from 'react-native';\n\nimport { ButtonBaseSize } from '../../types';\nimport { Icon, IconColor, IconSize } from '../Icon';\nimport { ButtonAnimated } from '../temp-components/ButtonAnimated';\nimport { Spinner } from '../temp-components/Spinner';\nimport { TextOrChildren } from '../temp-components/TextOrChildren/TextOrChildren';\nimport { TextVariant, FontWeight, TextColor } from '../Text';\n\nimport { TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION } from './ButtonBase.constants';\nimport type { ButtonBaseProps } from './ButtonBase.types';\n\nexport const ButtonBase = ({\n  children,\n  textProps,\n  size = ButtonBaseSize.Lg,\n  isLoading,\n  loadingText,\n  spinnerProps,\n  startIconName,\n  startIconProps,\n  startAccessory,\n  endIconName,\n  endIconProps,\n  endAccessory,\n  isDisabled,\n  isFullWidth,\n  twClassName,\n  textClassName,\n  iconClassName,\n  style,\n  accessibilityLabel,\n  accessibilityHint,\n  accessibilityRole = 'button',\n  accessibilityActions,\n  onAccessibilityAction,\n  ...props\n}: ButtonBaseProps) => {\n  const tw = useTailwind();\n\n  const finalStartIconName = startIconName ?? startIconProps?.name;\n  const finalEndIconName = endIconName ?? endIconProps?.name;\n\n  // Generate accessibility label if not provided\n  const finalAccessibilityLabel = useMemo(() => {\n    if (accessibilityLabel) {\n      return accessibilityLabel;\n    }\n\n    // For loading state with loadingText, prioritize loadingText\n    if (isLoading && loadingText) {\n      return loadingText;\n    }\n\n    // If children is a string, use it as the label\n    if (typeof children === 'string') {\n      return children;\n    }\n\n    return undefined;\n  }, [accessibilityLabel, children, isLoading, loadingText]);\n\n  // Generate accessibility hint for loading state if not provided\n  const finalAccessibilityHint = useMemo(() => {\n    if (accessibilityHint) {\n      return accessibilityHint;\n    }\n\n    if (isLoading) {\n      return 'Button is currently loading, please wait';\n    }\n\n    return undefined;\n  }, [accessibilityHint, isLoading]);\n\n  // Create accessibilityState object with only truthy values\n  const accessibilityState = useMemo(() => {\n    const state: { disabled?: boolean; busy?: boolean } = {};\n\n    if (isDisabled || isLoading) {\n      state.disabled = true;\n    }\n\n    if (isLoading) {\n      state.busy = true;\n    }\n\n    return state;\n  }, [isDisabled, isLoading]);\n\n  return (\n    <ButtonAnimated\n      disabled={isDisabled || isLoading}\n      accessibilityRole={accessibilityRole}\n      accessibilityLabel={finalAccessibilityLabel}\n      accessibilityHint={finalAccessibilityHint}\n      accessibilityActions={accessibilityActions}\n      onAccessibilityAction={onAccessibilityAction}\n      accessibilityState={accessibilityState}\n      accessible\n      style={({ pressed }) => {\n        // Evaluate custom className if it's a function\n        const customClassName =\n          typeof twClassName === 'function'\n            ? twClassName(pressed)\n            : twClassName;\n\n        // Build button container styles\n        const buttonStyles = tw.style(\n          // Base layout - flex container for button content\n          'flex-row items-center justify-center gap-x-2',\n          // Visual styling\n          'rounded-xl bg-muted px-4 min-w-[80px] overflow-hidden',\n          // Size\n          TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION[size],\n          // State-based opacity\n          isDisabled ? 'opacity-50' : 'opacity-100',\n          // Width - use self-start to prevent stretching when not full width\n          isFullWidth ? 'w-full' : 'self-start',\n          // Custom classes\n          customClassName,\n        );\n\n        // Merge with additional styles if provided\n        const computedStyle: StyleProp<ViewStyle>[] = [buttonStyles];\n\n        const additionalStyle =\n          typeof style === 'function' ? style({ pressed }) : style;\n\n        if (additionalStyle) {\n          computedStyle.push(additionalStyle);\n        }\n\n        return computedStyle;\n      }}\n      {...props}\n    >\n      {({ pressed }) => (\n        <>\n          {/* Loading spinner overlay */}\n          {isLoading && (\n            <View\n              style={tw.style(\n                'absolute inset-0 flex items-center justify-center',\n              )}\n              testID=\"spinner-container\"\n            >\n              <Spinner\n                color={\n                  textClassName\n                    ? (textClassName(pressed) as IconColor)\n                    : IconColor.IconDefault\n                }\n                loadingText={loadingText}\n                loadingTextProps={{\n                  numberOfLines: 1,\n                  twClassName: textClassName ? textClassName(pressed) : '',\n                  ...spinnerProps?.loadingTextProps,\n                }}\n                {...spinnerProps}\n              />\n            </View>\n          )}\n\n          {/* Button content - opacity controlled individually on each child */}\n          {finalStartIconName ? (\n            <Icon\n              name={finalStartIconName}\n              size={IconSize.Sm}\n              twClassName={`shrink-0 ${isLoading ? 'opacity-0' : ''} ${iconClassName ? iconClassName(pressed) : ''}`}\n              {...startIconProps}\n            />\n          ) : (\n            startAccessory && (\n              <View style={tw.style(isLoading && 'opacity-0')}>\n                {startAccessory}\n              </View>\n            )\n          )}\n\n          {typeof children === 'string' ? (\n            <TextOrChildren\n              textProps={{\n                variant: TextVariant.BodyMd,\n                fontWeight: FontWeight.Medium,\n                color: TextColor.TextDefault,\n                twClassName: `shrink grow-0 flex-wrap text-center ${isLoading ? 'opacity-0' : ''} ${textClassName ? textClassName(pressed) : ''}`,\n                ...textProps,\n              }}\n            >\n              {children}\n            </TextOrChildren>\n          ) : (\n            <View style={tw.style(isLoading && 'opacity-0')}>{children}</View>\n          )}\n\n          {finalEndIconName ? (\n            <Icon\n              name={finalEndIconName}\n              size={IconSize.Sm}\n              twClassName={`shrink-0 ${isLoading ? 'opacity-0' : ''} ${iconClassName ? iconClassName(pressed) : ''}`}\n              {...endIconProps}\n            />\n          ) : (\n            endAccessory && (\n              <View style={tw.style(isLoading && 'opacity-0')}>\n                {endAccessory}\n              </View>\n            )\n          )}\n        </>\n      )}\n    </ButtonAnimated>\n  );\n};\n"]}
+{"version":3,"file":"ButtonBase.mjs","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React, { useMemo } from 'react';\nimport { View } from 'react-native';\nimport type { StyleProp, ViewStyle } from 'react-native';\n\nimport { ButtonBaseSize } from '../../types';\nimport { Icon, IconColor, IconSize } from '../Icon';\nimport { ButtonAnimated } from '../temp-components/ButtonAnimated';\nimport { Spinner } from '../temp-components/Spinner';\nimport { Text, TextVariant, FontWeight, TextColor } from '../Text';\n\nimport { TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION } from './ButtonBase.constants';\nimport type { ButtonBaseProps } from './ButtonBase.types';\n\nexport const ButtonBase = ({\n  children,\n  textProps,\n  size = ButtonBaseSize.Lg,\n  isLoading,\n  loadingText,\n  spinnerProps,\n  startIconName,\n  startIconProps,\n  startAccessory,\n  endIconName,\n  endIconProps,\n  endAccessory,\n  isDisabled,\n  isFullWidth,\n  twClassName,\n  textClassName,\n  iconClassName,\n  style,\n  accessibilityLabel,\n  accessibilityHint,\n  accessibilityRole = 'button',\n  accessibilityActions,\n  onAccessibilityAction,\n  ...props\n}: ButtonBaseProps) => {\n  const tw = useTailwind();\n\n  const finalStartIconName = startIconName ?? startIconProps?.name;\n  const finalEndIconName = endIconName ?? endIconProps?.name;\n\n  // Generate accessibility label if not provided\n  const finalAccessibilityLabel = useMemo(() => {\n    if (accessibilityLabel) {\n      return accessibilityLabel;\n    }\n\n    // For loading state with loadingText, prioritize loadingText\n    if (isLoading && loadingText) {\n      return loadingText;\n    }\n\n    // If children is a string, use it as the label\n    if (typeof children === 'string') {\n      return children;\n    }\n\n    return undefined;\n  }, [accessibilityLabel, children, isLoading, loadingText]);\n\n  // Generate accessibility hint for loading state if not provided\n  const finalAccessibilityHint = useMemo(() => {\n    if (accessibilityHint) {\n      return accessibilityHint;\n    }\n\n    if (isLoading) {\n      return 'Button is currently loading, please wait';\n    }\n\n    return undefined;\n  }, [accessibilityHint, isLoading]);\n\n  // Create accessibilityState object with only truthy values\n  const accessibilityState = useMemo(() => {\n    const state: { disabled?: boolean; busy?: boolean } = {};\n\n    if (isDisabled || isLoading) {\n      state.disabled = true;\n    }\n\n    if (isLoading) {\n      state.busy = true;\n    }\n\n    return state;\n  }, [isDisabled, isLoading]);\n\n  return (\n    <ButtonAnimated\n      disabled={isDisabled || isLoading}\n      accessibilityRole={accessibilityRole}\n      accessibilityLabel={finalAccessibilityLabel}\n      accessibilityHint={finalAccessibilityHint}\n      accessibilityActions={accessibilityActions}\n      onAccessibilityAction={onAccessibilityAction}\n      accessibilityState={accessibilityState}\n      accessible\n      style={({ pressed }) => {\n        // Evaluate custom className if it's a function\n        const customClassName =\n          typeof twClassName === 'function'\n            ? twClassName(pressed)\n            : twClassName;\n\n        // Build button container styles\n        const buttonStyles = tw.style(\n          // Base layout - flex container for button content\n          'flex-row items-center justify-center gap-x-2',\n          // Visual styling\n          'rounded-xl bg-muted px-4 min-w-[80px] overflow-hidden',\n          // Size\n          TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION[size],\n          // State-based opacity\n          isDisabled ? 'opacity-50' : 'opacity-100',\n          // Width - use self-start to prevent stretching when not full width\n          isFullWidth ? 'w-full' : 'self-start',\n          // Custom classes\n          customClassName,\n        );\n\n        // Merge with additional styles if provided\n        const computedStyle: StyleProp<ViewStyle>[] = [buttonStyles];\n\n        const additionalStyle =\n          typeof style === 'function' ? style({ pressed }) : style;\n\n        if (additionalStyle) {\n          computedStyle.push(additionalStyle);\n        }\n\n        return computedStyle;\n      }}\n      {...props}\n    >\n      {({ pressed }) => (\n        <>\n          {/* Loading spinner overlay */}\n          {isLoading && (\n            <View\n              style={tw.style(\n                'absolute inset-0 flex items-center justify-center',\n              )}\n              testID=\"spinner-container\"\n            >\n              <Spinner\n                color={\n                  textClassName\n                    ? (textClassName(pressed) as IconColor)\n                    : IconColor.IconDefault\n                }\n                loadingText={loadingText}\n                loadingTextProps={{\n                  numberOfLines: 1,\n                  twClassName: textClassName ? textClassName(pressed) : '',\n                  ...spinnerProps?.loadingTextProps,\n                }}\n                {...spinnerProps}\n              />\n            </View>\n          )}\n\n          {/* Button content - opacity controlled individually on each child */}\n          {finalStartIconName ? (\n            <Icon\n              name={finalStartIconName}\n              size={IconSize.Sm}\n              twClassName={`shrink-0 ${isLoading ? 'opacity-0' : ''} ${iconClassName ? iconClassName(pressed) : ''}`}\n              {...startIconProps}\n            />\n          ) : (\n            startAccessory && (\n              <View style={tw.style(isLoading && 'opacity-0')}>\n                {startAccessory}\n              </View>\n            )\n          )}\n\n          {typeof children === 'string' ? (\n            <Text\n              variant={TextVariant.BodyMd}\n              fontWeight={FontWeight.Medium}\n              color={TextColor.TextDefault}\n              {...textProps}\n              twClassName={`shrink grow-0 flex-wrap text-center ${isLoading ? 'opacity-0' : ''} ${textClassName ? textClassName(pressed) : ''} ${textProps?.twClassName ?? ''}`}\n            >\n              {children}\n            </Text>\n          ) : (\n            <View style={tw.style(isLoading && 'opacity-0')}>{children}</View>\n          )}\n\n          {finalEndIconName ? (\n            <Icon\n              name={finalEndIconName}\n              size={IconSize.Sm}\n              twClassName={`shrink-0 ${isLoading ? 'opacity-0' : ''} ${iconClassName ? iconClassName(pressed) : ''}`}\n              {...endIconProps}\n            />\n          ) : (\n            endAccessory && (\n              <View style={tw.style(isLoading && 'opacity-0')}>\n                {endAccessory}\n              </View>\n            )\n          )}\n        </>\n      )}\n    </ButtonAnimated>\n  );\n};\n"]}

package/dist/components/ButtonFilter/ButtonFilter.cjs

@@ -0,0 +1,28 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ButtonFilter = void 0;
+const design_system_twrnc_preset_1 = require("@metamask-previews/design-system-twrnc-preset");
+const react_1 = __importDefault(require("react"));
+const ButtonBase_1 = require("../ButtonBase/index.cjs");
+const ButtonFilter = ({ isActive = false, twClassName, textProps, style, ...props }) => {
+    const tw = (0, design_system_twrnc_preset_1.useTailwind)();
+    const mergedStyle = [
+        tw.style(isActive ? 'bg-icon-default' : 'bg-background-muted', twClassName),
+        style,
+    ];
+    const mergedTextProps = {
+        ...textProps,
+        twClassName: [
+            isActive ? 'text-icon-inverse' : 'text-default',
+            textProps?.twClassName,
+        ]
+            .filter(Boolean)
+            .join(' '),
+    };
+    return (<ButtonBase_1.ButtonBase textProps={mergedTextProps} style={mergedStyle} {...props}/>);
+};
+exports.ButtonFilter = ButtonFilter;
+//# sourceMappingURL=ButtonFilter.cjs.map

package/dist/components/ButtonFilter/ButtonFilter.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonFilter.cjs","sourceRoot":"","sources":["../../../src/components/ButtonFilter/ButtonFilter.tsx"],"names":[],"mappings":";;;;;;AAAA,8FAA4E;AAC5E,kDAA0B;AAE1B,wDAA2C;AAIpC,MAAM,YAAY,GAAgC,CAAC,EACxD,QAAQ,GAAG,KAAK,EAChB,WAAW,EACX,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,EAAE,GAAG,IAAA,wCAAW,GAAE,CAAC;IAEzB,MAAM,WAAW,GAAG;QAClB,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,qBAAqB,EAAE,WAAW,CAAC;QAC3E,KAAK;KACN,CAAC;IAEF,MAAM,eAAe,GAAG;QACtB,GAAG,SAAS;QACZ,WAAW,EAAE;YACX,QAAQ,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,cAAc;YAC/C,SAAS,EAAE,WAAW;SACvB;aACE,MAAM,CAAC,OAAO,CAAC;aACf,IAAI,CAAC,GAAG,CAAC;KACb,CAAC;IAEF,OAAO,CACL,CAAC,uBAAU,CAAC,SAAS,CAAC,CAAC,eAAe,CAAC,CAAC,KAAK,CAAC,CAAC,WAAW,CAAC,CAAC,IAAI,KAAK,CAAC,EAAG,CAC1E,CAAC;AACJ,CAAC,CAAC;AA3BW,QAAA,YAAY,gBA2BvB","sourcesContent":["import { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React from 'react';\n\nimport { ButtonBase } from '../ButtonBase';\n\nimport type { ButtonFilterProps } from './ButtonFilter.types';\n\nexport const ButtonFilter: React.FC<ButtonFilterProps> = ({\n  isActive = false,\n  twClassName,\n  textProps,\n  style,\n  ...props\n}) => {\n  const tw = useTailwind();\n\n  const mergedStyle = [\n    tw.style(isActive ? 'bg-icon-default' : 'bg-background-muted', twClassName),\n    style,\n  ];\n\n  const mergedTextProps = {\n    ...textProps,\n    twClassName: [\n      isActive ? 'text-icon-inverse' : 'text-default',\n      textProps?.twClassName,\n    ]\n      .filter(Boolean)\n      .join(' '),\n  };\n\n  return (\n    <ButtonBase textProps={mergedTextProps} style={mergedStyle} {...props} />\n  );\n};\n"]}

package/dist/components/ButtonFilter/ButtonFilter.d.cts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { ButtonFilterProps } from "./ButtonFilter.types.cjs";
+export declare const ButtonFilter: React.FC<ButtonFilterProps>;
+//# sourceMappingURL=ButtonFilter.d.cts.map

package/dist/components/ButtonFilter/ButtonFilter.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonFilter.d.cts","sourceRoot":"","sources":["../../../src/components/ButtonFilter/ButtonFilter.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,cAAc;AAI1B,OAAO,KAAK,EAAE,iBAAiB,EAAE,iCAA6B;AAE9D,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA2BpD,CAAC"}

package/dist/components/ButtonFilter/ButtonFilter.d.mts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { ButtonFilterProps } from "./ButtonFilter.types.mjs";
+export declare const ButtonFilter: React.FC<ButtonFilterProps>;
+//# sourceMappingURL=ButtonFilter.d.mts.map

package/dist/components/ButtonFilter/ButtonFilter.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonFilter.d.mts","sourceRoot":"","sources":["../../../src/components/ButtonFilter/ButtonFilter.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,cAAc;AAI1B,OAAO,KAAK,EAAE,iBAAiB,EAAE,iCAA6B;AAE9D,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA2BpD,CAAC"}

package/dist/components/ButtonFilter/ButtonFilter.mjs

@@ -0,0 +1,28 @@
+function $importDefault(module) {
+    if (module?.__esModule) {
+        return module.default;
+    }
+    return module;
+}
+import { useTailwind } from "@metamask-previews/design-system-twrnc-preset";
+import $React from "react";
+const React = $importDefault($React);
+import { ButtonBase } from "../ButtonBase/index.mjs";
+export const ButtonFilter = ({ isActive = false, twClassName, textProps, style, ...props }) => {
+    const tw = useTailwind();
+    const mergedStyle = [
+        tw.style(isActive ? 'bg-icon-default' : 'bg-background-muted', twClassName),
+        style,
+    ];
+    const mergedTextProps = {
+        ...textProps,
+        twClassName: [
+            isActive ? 'text-icon-inverse' : 'text-default',
+            textProps?.twClassName,
+        ]
+            .filter(Boolean)
+            .join(' '),
+    };
+    return (<ButtonBase textProps={mergedTextProps} style={mergedStyle} {...props}/>);
+};
+//# sourceMappingURL=ButtonFilter.mjs.map

package/dist/components/ButtonFilter/ButtonFilter.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonFilter.mjs","sourceRoot":"","sources":["../../../src/components/ButtonFilter/ButtonFilter.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,WAAW,EAAE,sDAAsD;AAC5E,OAAO,MAAK,cAAc;;AAE1B,OAAO,EAAE,UAAU,EAAE,gCAAsB;AAI3C,MAAM,CAAC,MAAM,YAAY,GAAgC,CAAC,EACxD,QAAQ,GAAG,KAAK,EAChB,WAAW,EACX,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,EAAE,GAAG,WAAW,EAAE,CAAC;IAEzB,MAAM,WAAW,GAAG;QAClB,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,qBAAqB,EAAE,WAAW,CAAC;QAC3E,KAAK;KACN,CAAC;IAEF,MAAM,eAAe,GAAG;QACtB,GAAG,SAAS;QACZ,WAAW,EAAE;YACX,QAAQ,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,cAAc;YAC/C,SAAS,EAAE,WAAW;SACvB;aACE,MAAM,CAAC,OAAO,CAAC;aACf,IAAI,CAAC,GAAG,CAAC;KACb,CAAC;IAEF,OAAO,CACL,CAAC,UAAU,CAAC,SAAS,CAAC,CAAC,eAAe,CAAC,CAAC,KAAK,CAAC,CAAC,WAAW,CAAC,CAAC,IAAI,KAAK,CAAC,EAAG,CAC1E,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React from 'react';\n\nimport { ButtonBase } from '../ButtonBase';\n\nimport type { ButtonFilterProps } from './ButtonFilter.types';\n\nexport const ButtonFilter: React.FC<ButtonFilterProps> = ({\n  isActive = false,\n  twClassName,\n  textProps,\n  style,\n  ...props\n}) => {\n  const tw = useTailwind();\n\n  const mergedStyle = [\n    tw.style(isActive ? 'bg-icon-default' : 'bg-background-muted', twClassName),\n    style,\n  ];\n\n  const mergedTextProps = {\n    ...textProps,\n    twClassName: [\n      isActive ? 'text-icon-inverse' : 'text-default',\n      textProps?.twClassName,\n    ]\n      .filter(Boolean)\n      .join(' '),\n  };\n\n  return (\n    <ButtonBase textProps={mergedTextProps} style={mergedStyle} {...props} />\n  );\n};\n"]}

package/dist/components/ButtonFilter/ButtonFilter.types.cjs

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=ButtonFilter.types.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonFilter.types.cjs","sourceRoot":"","sources":["../../../src/components/ButtonFilter/ButtonFilter.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ButtonFilterPropsShared } from '@metamask-previews/design-system-shared';\n\nimport type { ButtonBaseProps } from '../ButtonBase';\n\nexport type ButtonFilterProps = Omit<\n  ButtonBaseProps,\n  'twClassName' | 'textClassName'\n> &\n  ButtonFilterPropsShared & {\n    /**\n     * Optional prop to add twrnc overriding classNames.\n     */\n    twClassName?: string;\n  };\n"]}

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

@@ -0,0 +1,9 @@
+import type { ButtonFilterPropsShared } from "@metamask-previews/design-system-shared";
+import type { ButtonBaseProps } from "../ButtonBase/index.cjs";
+export type ButtonFilterProps = Omit<ButtonBaseProps, 'twClassName' | 'textClassName'> & ButtonFilterPropsShared & {
+    /**
+     * Optional prop to add twrnc overriding classNames.
+     */
+    twClassName?: string;
+};
+//# sourceMappingURL=ButtonFilter.types.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonFilter.types.d.cts","sourceRoot":"","sources":["../../../src/components/ButtonFilter/ButtonFilter.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,uBAAuB,EAAE,gDAAgD;AAEvF,OAAO,KAAK,EAAE,eAAe,EAAE,gCAAsB;AAErD,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAClC,eAAe,EACf,aAAa,GAAG,eAAe,CAChC,GACC,uBAAuB,GAAG;IACxB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC"}

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

@@ -0,0 +1,9 @@
+import type { ButtonFilterPropsShared } from "@metamask-previews/design-system-shared";
+import type { ButtonBaseProps } from "../ButtonBase/index.mjs";
+export type ButtonFilterProps = Omit<ButtonBaseProps, 'twClassName' | 'textClassName'> & ButtonFilterPropsShared & {
+    /**
+     * Optional prop to add twrnc overriding classNames.
+     */
+    twClassName?: string;
+};
+//# sourceMappingURL=ButtonFilter.types.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonFilter.types.d.mts","sourceRoot":"","sources":["../../../src/components/ButtonFilter/ButtonFilter.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,uBAAuB,EAAE,gDAAgD;AAEvF,OAAO,KAAK,EAAE,eAAe,EAAE,gCAAsB;AAErD,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAClC,eAAe,EACf,aAAa,GAAG,eAAe,CAChC,GACC,uBAAuB,GAAG;IACxB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC"}

package/dist/components/ButtonFilter/ButtonFilter.types.mjs

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ButtonFilter.types.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonFilter.types.mjs","sourceRoot":"","sources":["../../../src/components/ButtonFilter/ButtonFilter.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ButtonFilterPropsShared } from '@metamask-previews/design-system-shared';\n\nimport type { ButtonBaseProps } from '../ButtonBase';\n\nexport type ButtonFilterProps = Omit<\n  ButtonBaseProps,\n  'twClassName' | 'textClassName'\n> &\n  ButtonFilterPropsShared & {\n    /**\n     * Optional prop to add twrnc overriding classNames.\n     */\n    twClassName?: string;\n  };\n"]}

package/dist/components/ButtonFilter/index.cjs

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ButtonFilter = void 0;
+var ButtonFilter_1 = require("./ButtonFilter.cjs");
+Object.defineProperty(exports, "ButtonFilter", { enumerable: true, get: function () { return ButtonFilter_1.ButtonFilter; } });
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sourceRoot":"","sources":["../../../src/components/ButtonFilter/index.ts"],"names":[],"mappings":";;;AAAA,mDAA8C;AAArC,4GAAA,YAAY,OAAA","sourcesContent":["export { ButtonFilter } from './ButtonFilter';\nexport type { ButtonFilterProps } from './ButtonFilter.types';\n"]}

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

@@ -0,0 +1,3 @@
+export { ButtonFilter } from "./ButtonFilter.cjs";
+export type { ButtonFilterProps } from "./ButtonFilter.types.cjs";
+//# sourceMappingURL=index.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/ButtonFilter/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,2BAAuB;AAC9C,YAAY,EAAE,iBAAiB,EAAE,iCAA6B"}

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

@@ -0,0 +1,3 @@
+export { ButtonFilter } from "./ButtonFilter.mjs";
+export type { ButtonFilterProps } from "./ButtonFilter.types.mjs";
+//# sourceMappingURL=index.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.mts","sourceRoot":"","sources":["../../../src/components/ButtonFilter/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,2BAAuB;AAC9C,YAAY,EAAE,iBAAiB,EAAE,iCAA6B"}

package/dist/components/ButtonFilter/index.mjs

@@ -0,0 +1,2 @@
+export { ButtonFilter } from "./ButtonFilter.mjs";
+//# sourceMappingURL=index.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sourceRoot":"","sources":["../../../src/components/ButtonFilter/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,2BAAuB","sourcesContent":["export { ButtonFilter } from './ButtonFilter';\nexport type { ButtonFilterProps } from './ButtonFilter.types';\n"]}

package/dist/components/ButtonHero/ButtonHero.cjs

@@ -0,0 +1,37 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ButtonHero = void 0;
+const design_system_twrnc_preset_1 = require("@metamask-previews/design-system-twrnc-preset");
+const react_1 = __importDefault(require("react"));
+const ButtonBase_1 = require("../ButtonBase/index.cjs");
+/**
+ * Inner component that uses the locked light theme from ThemeProvider.
+ * Destructures and ignores twClassName, textClassName, and iconClassName to prevent
+ * overriding the hero-specific styling (light theme lock).
+ *
+ * @param props - Component props destructured below
+ * @param props.isDisabled - Whether the button is disabled
+ * @param props.isLoading - Whether the button is in a loading state
+ * @param props.twClassName - Ignored to prevent override of hero styling
+ * @param props.textClassName - Ignored to prevent override of hero styling
+ * @param props.iconClassName - Ignored to prevent override of hero styling
+ * @returns ButtonBase component with locked light theme styles
+ */
+const ButtonHeroInner = ({ isDisabled, isLoading, twClassName: _twClassName, textClassName: _textClassName, iconClassName: _iconClassName, ...props }) => (<ButtonBase_1.ButtonBase twClassName={(pressed) => `bg-primary-default ${pressed && !isDisabled && !isLoading ? 'bg-primary-default-pressed' : ''}`} textClassName={(_pressed) => 'text-primary-inverse'} iconClassName={(_pressed) => 'text-primary-inverse'} isDisabled={isDisabled} isLoading={isLoading} {...props}/>);
+/**
+ * ButtonHero component - Hero button with locked light theme
+ *
+ * Used for primary marketing and call-to-action use cases.
+ * The button is locked to light theme colors regardless of the app's theme setting.
+ *
+ * @param props - ButtonHero props extending ButtonBaseProps
+ * @returns ButtonHero component wrapped in light ThemeProvider
+ */
+const ButtonHero = (props) => (<design_system_twrnc_preset_1.ThemeProvider theme={design_system_twrnc_preset_1.Theme.Light}>
+    <ButtonHeroInner {...props}/>
+  </design_system_twrnc_preset_1.ThemeProvider>);
+exports.ButtonHero = ButtonHero;
+//# sourceMappingURL=ButtonHero.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonHero.cjs","sourceRoot":"","sources":["../../../src/components/ButtonHero/ButtonHero.tsx"],"names":[],"mappings":";;;;;;AAAA,8FAAqF;AACrF,kDAA0B;AAE1B,wDAA2C;AAI3C;;;;;;;;;;;;GAYG;AACH,MAAM,eAAe,GAA8B,CAAC,EAClD,UAAU,EACV,SAAS,EACT,WAAW,EAAE,YAAY,EACzB,aAAa,EAAE,cAAc,EAC7B,aAAa,EAAE,cAAc,EAC7B,GAAG,KAAK,EACT,EAAE,EAAE,CAAC,CACJ,CAAC,uBAAU,CACT,WAAW,CAAC,CAAC,CAAC,OAAO,EAAE,EAAE,CACvB,sBACE,OAAO,IAAI,CAAC,UAAU,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,4BAA4B,CAAC,CAAC,CAAC,EACxE,EAAE,CACH,CACD,aAAa,CAAC,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,sBAAsB,CAAC,CACpD,aAAa,CAAC,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,sBAAsB,CAAC,CACpD,UAAU,CAAC,CAAC,UAAU,CAAC,CACvB,SAAS,CAAC,CAAC,SAAS,CAAC,CACrB,IAAI,KAAK,CAAC,EACV,CACH,CAAC;AAEF;;;;;;;;GAQG;AACI,MAAM,UAAU,GAA8B,CAAC,KAAK,EAAE,EAAE,CAAC,CAC9D,CAAC,0CAAa,CAAC,KAAK,CAAC,CAAC,kCAAK,CAAC,KAAK,CAAC,CAChC;IAAA,CAAC,eAAe,CAAC,IAAI,KAAK,CAAC,EAC7B;EAAA,EAAE,0CAAa,CAAC,CACjB,CAAC;AAJW,QAAA,UAAU,cAIrB","sourcesContent":["import { Theme, ThemeProvider } from '@metamask-previews/design-system-twrnc-preset';\nimport React from 'react';\n\nimport { ButtonBase } from '../ButtonBase';\n\nimport type { ButtonHeroProps } from './ButtonHero.types';\n\n/**\n * Inner component that uses the locked light theme from ThemeProvider.\n * Destructures and ignores twClassName, textClassName, and iconClassName to prevent\n * overriding the hero-specific styling (light theme lock).\n *\n * @param props - Component props destructured below\n * @param props.isDisabled - Whether the button is disabled\n * @param props.isLoading - Whether the button is in a loading state\n * @param props.twClassName - Ignored to prevent override of hero styling\n * @param props.textClassName - Ignored to prevent override of hero styling\n * @param props.iconClassName - Ignored to prevent override of hero styling\n * @returns ButtonBase component with locked light theme styles\n */\nconst ButtonHeroInner: React.FC<ButtonHeroProps> = ({\n  isDisabled,\n  isLoading,\n  twClassName: _twClassName,\n  textClassName: _textClassName,\n  iconClassName: _iconClassName,\n  ...props\n}) => (\n  <ButtonBase\n    twClassName={(pressed) =>\n      `bg-primary-default ${\n        pressed && !isDisabled && !isLoading ? 'bg-primary-default-pressed' : ''\n      }`\n    }\n    textClassName={(_pressed) => 'text-primary-inverse'}\n    iconClassName={(_pressed) => 'text-primary-inverse'}\n    isDisabled={isDisabled}\n    isLoading={isLoading}\n    {...props}\n  />\n);\n\n/**\n * ButtonHero component - Hero button with locked light theme\n *\n * Used for primary marketing and call-to-action use cases.\n * The button is locked to light theme colors regardless of the app's theme setting.\n *\n * @param props - ButtonHero props extending ButtonBaseProps\n * @returns ButtonHero component wrapped in light ThemeProvider\n */\nexport const ButtonHero: React.FC<ButtonHeroProps> = (props) => (\n  <ThemeProvider theme={Theme.Light}>\n    <ButtonHeroInner {...props} />\n  </ThemeProvider>\n);\n"]}

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

@@ -0,0 +1,13 @@
+import React from "react";
+import type { ButtonHeroProps } from "./ButtonHero.types.cjs";
+/**
+ * ButtonHero component - Hero button with locked light theme
+ *
+ * Used for primary marketing and call-to-action use cases.
+ * The button is locked to light theme colors regardless of the app's theme setting.
+ *
+ * @param props - ButtonHero props extending ButtonBaseProps
+ * @returns ButtonHero component wrapped in light ThemeProvider
+ */
+export declare const ButtonHero: React.FC<ButtonHeroProps>;
+//# sourceMappingURL=ButtonHero.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonHero.d.cts","sourceRoot":"","sources":["../../../src/components/ButtonHero/ButtonHero.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,cAAc;AAI1B,OAAO,KAAK,EAAE,eAAe,EAAE,+BAA2B;AAqC1D;;;;;;;;GAQG;AACH,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAIhD,CAAC"}

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

@@ -0,0 +1,13 @@
+import React from "react";
+import type { ButtonHeroProps } from "./ButtonHero.types.mjs";
+/**
+ * ButtonHero component - Hero button with locked light theme
+ *
+ * Used for primary marketing and call-to-action use cases.
+ * The button is locked to light theme colors regardless of the app's theme setting.
+ *
+ * @param props - ButtonHero props extending ButtonBaseProps
+ * @returns ButtonHero component wrapped in light ThemeProvider
+ */
+export declare const ButtonHero: React.FC<ButtonHeroProps>;
+//# sourceMappingURL=ButtonHero.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonHero.d.mts","sourceRoot":"","sources":["../../../src/components/ButtonHero/ButtonHero.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,cAAc;AAI1B,OAAO,KAAK,EAAE,eAAe,EAAE,+BAA2B;AAqC1D;;;;;;;;GAQG;AACH,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAIhD,CAAC"}

package/dist/components/ButtonHero/ButtonHero.mjs

@@ -0,0 +1,37 @@
+function $importDefault(module) {
+    if (module?.__esModule) {
+        return module.default;
+    }
+    return module;
+}
+import { Theme, ThemeProvider } from "@metamask-previews/design-system-twrnc-preset";
+import $React from "react";
+const React = $importDefault($React);
+import { ButtonBase } from "../ButtonBase/index.mjs";
+/**
+ * Inner component that uses the locked light theme from ThemeProvider.
+ * Destructures and ignores twClassName, textClassName, and iconClassName to prevent
+ * overriding the hero-specific styling (light theme lock).
+ *
+ * @param props - Component props destructured below
+ * @param props.isDisabled - Whether the button is disabled
+ * @param props.isLoading - Whether the button is in a loading state
+ * @param props.twClassName - Ignored to prevent override of hero styling
+ * @param props.textClassName - Ignored to prevent override of hero styling
+ * @param props.iconClassName - Ignored to prevent override of hero styling
+ * @returns ButtonBase component with locked light theme styles
+ */
+const ButtonHeroInner = ({ isDisabled, isLoading, twClassName: _twClassName, textClassName: _textClassName, iconClassName: _iconClassName, ...props }) => (<ButtonBase twClassName={(pressed) => `bg-primary-default ${pressed && !isDisabled && !isLoading ? 'bg-primary-default-pressed' : ''}`} textClassName={(_pressed) => 'text-primary-inverse'} iconClassName={(_pressed) => 'text-primary-inverse'} isDisabled={isDisabled} isLoading={isLoading} {...props}/>);
+/**
+ * ButtonHero component - Hero button with locked light theme
+ *
+ * Used for primary marketing and call-to-action use cases.
+ * The button is locked to light theme colors regardless of the app's theme setting.
+ *
+ * @param props - ButtonHero props extending ButtonBaseProps
+ * @returns ButtonHero component wrapped in light ThemeProvider
+ */
+export const ButtonHero = (props) => (<ThemeProvider theme={Theme.Light}>
+    <ButtonHeroInner {...props}/>
+  </ThemeProvider>);
+//# sourceMappingURL=ButtonHero.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonHero.mjs","sourceRoot":"","sources":["../../../src/components/ButtonHero/ButtonHero.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,sDAAsD;AACrF,OAAO,MAAK,cAAc;;AAE1B,OAAO,EAAE,UAAU,EAAE,gCAAsB;AAI3C;;;;;;;;;;;;GAYG;AACH,MAAM,eAAe,GAA8B,CAAC,EAClD,UAAU,EACV,SAAS,EACT,WAAW,EAAE,YAAY,EACzB,aAAa,EAAE,cAAc,EAC7B,aAAa,EAAE,cAAc,EAC7B,GAAG,KAAK,EACT,EAAE,EAAE,CAAC,CACJ,CAAC,UAAU,CACT,WAAW,CAAC,CAAC,CAAC,OAAO,EAAE,EAAE,CACvB,sBACE,OAAO,IAAI,CAAC,UAAU,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,4BAA4B,CAAC,CAAC,CAAC,EACxE,EAAE,CACH,CACD,aAAa,CAAC,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,sBAAsB,CAAC,CACpD,aAAa,CAAC,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,sBAAsB,CAAC,CACpD,UAAU,CAAC,CAAC,UAAU,CAAC,CACvB,SAAS,CAAC,CAAC,SAAS,CAAC,CACrB,IAAI,KAAK,CAAC,EACV,CACH,CAAC;AAEF;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,UAAU,GAA8B,CAAC,KAAK,EAAE,EAAE,CAAC,CAC9D,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAChC;IAAA,CAAC,eAAe,CAAC,IAAI,KAAK,CAAC,EAC7B;EAAA,EAAE,aAAa,CAAC,CACjB,CAAC","sourcesContent":["import { Theme, ThemeProvider } from '@metamask-previews/design-system-twrnc-preset';\nimport React from 'react';\n\nimport { ButtonBase } from '../ButtonBase';\n\nimport type { ButtonHeroProps } from './ButtonHero.types';\n\n/**\n * Inner component that uses the locked light theme from ThemeProvider.\n * Destructures and ignores twClassName, textClassName, and iconClassName to prevent\n * overriding the hero-specific styling (light theme lock).\n *\n * @param props - Component props destructured below\n * @param props.isDisabled - Whether the button is disabled\n * @param props.isLoading - Whether the button is in a loading state\n * @param props.twClassName - Ignored to prevent override of hero styling\n * @param props.textClassName - Ignored to prevent override of hero styling\n * @param props.iconClassName - Ignored to prevent override of hero styling\n * @returns ButtonBase component with locked light theme styles\n */\nconst ButtonHeroInner: React.FC<ButtonHeroProps> = ({\n  isDisabled,\n  isLoading,\n  twClassName: _twClassName,\n  textClassName: _textClassName,\n  iconClassName: _iconClassName,\n  ...props\n}) => (\n  <ButtonBase\n    twClassName={(pressed) =>\n      `bg-primary-default ${\n        pressed && !isDisabled && !isLoading ? 'bg-primary-default-pressed' : ''\n      }`\n    }\n    textClassName={(_pressed) => 'text-primary-inverse'}\n    iconClassName={(_pressed) => 'text-primary-inverse'}\n    isDisabled={isDisabled}\n    isLoading={isLoading}\n    {...props}\n  />\n);\n\n/**\n * ButtonHero component - Hero button with locked light theme\n *\n * Used for primary marketing and call-to-action use cases.\n * The button is locked to light theme colors regardless of the app's theme setting.\n *\n * @param props - ButtonHero props extending ButtonBaseProps\n * @returns ButtonHero component wrapped in light ThemeProvider\n */\nexport const ButtonHero: React.FC<ButtonHeroProps> = (props) => (\n  <ThemeProvider theme={Theme.Light}>\n    <ButtonHeroInner {...props} />\n  </ThemeProvider>\n);\n"]}

package/dist/components/ButtonHero/ButtonHero.types.cjs

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=ButtonHero.types.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonHero.types.cjs","sourceRoot":"","sources":["../../../src/components/ButtonHero/ButtonHero.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ButtonBaseProps } from '../ButtonBase';\n\nexport type ButtonHeroProps = ButtonBaseProps;\n"]}

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

@@ -0,0 +1,3 @@
+import type { ButtonBaseProps } from "../ButtonBase/index.cjs";
+export type ButtonHeroProps = ButtonBaseProps;
+//# sourceMappingURL=ButtonHero.types.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonHero.types.d.cts","sourceRoot":"","sources":["../../../src/components/ButtonHero/ButtonHero.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,gCAAsB;AAErD,MAAM,MAAM,eAAe,GAAG,eAAe,CAAC"}

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

@@ -0,0 +1,3 @@
+import type { ButtonBaseProps } from "../ButtonBase/index.mjs";
+export type ButtonHeroProps = ButtonBaseProps;
+//# sourceMappingURL=ButtonHero.types.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonHero.types.d.mts","sourceRoot":"","sources":["../../../src/components/ButtonHero/ButtonHero.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,gCAAsB;AAErD,MAAM,MAAM,eAAe,GAAG,eAAe,CAAC"}

package/dist/components/ButtonHero/ButtonHero.types.mjs

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ButtonHero.types.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonHero.types.mjs","sourceRoot":"","sources":["../../../src/components/ButtonHero/ButtonHero.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ButtonBaseProps } from '../ButtonBase';\n\nexport type ButtonHeroProps = ButtonBaseProps;\n"]}

package/dist/components/ButtonHero/index.cjs

@@ -0,0 +1,8 @@
+"use strict";
+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; } });
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +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"]}

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

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

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

@@ -0,0 +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"}

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

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

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

@@ -0,0 +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"}

package/dist/components/ButtonHero/index.mjs

@@ -0,0 +1,3 @@
+export { ButtonHero } from "./ButtonHero.mjs";
+export { ButtonHeroSize } from "../../types/index.mjs";
+//# sourceMappingURL=index.mjs.map

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

@@ -0,0 +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"]}

package/dist/components/ButtonIcon/ButtonIcon.cjs

@@ -30,17 +30,23 @@ const types_1 = require("../../types/index.cjs");
 const Icon_1 = require("../Icon/index.cjs");
 const ButtonAnimated_1 = require("../temp-components/ButtonAnimated/index.cjs");
 const ButtonIcon_constants_1 = require("./ButtonIcon.constants.cjs");
-const ButtonIcon = ({ size = types_1.ButtonIconSize.Md, iconName, iconProps, isDisabled = false, isInverse = false, isFloating = false, onPressIn, onPressOut, twClassName, style, ...props }) => {
+const ButtonIcon = ({ size = types_1.ButtonIconSize.Md, iconName, iconProps, isDisabled = false, variant = types_1.ButtonIconVariant.Default, onPressIn, onPressOut, twClassName, style, ...props }) => {
     const [isPressed, setIsPressed] = (0, react_1.useState)(false);
     const tw = (0, design_system_twrnc_preset_1.useTailwind)();
     let backgroundColor = 'bg-transparent';
-    if (isFloating) {
+    if (variant === types_1.ButtonIconVariant.Floating) {
         backgroundColor = 'bg-icon-default';
     }
+    else if (variant === types_1.ButtonIconVariant.Filled) {
+        backgroundColor = isPressed ? 'bg-muted-pressed' : 'bg-muted';
+    }
     else if (isPressed) {
         backgroundColor = 'bg-pressed';
     }
-    const twIconColorClassNames = isInverse || isFloating ? 'text-primary-inverse' : 'text-icon-default';
+    const twIconColorClassNames = variant === types_1.ButtonIconVariant.Floating
+        ? 'text-primary-inverse'
+        : 'text-icon-default';
+    const borderRadiusClass = variant === types_1.ButtonIconVariant.Default ? 'rounded-lg' : 'rounded-full';
     const onPressInHandler = (event) => {
         setIsPressed(true);
         onPressIn?.(event);
@@ -50,7 +56,7 @@ const ButtonIcon = ({ size = types_1.ButtonIconSize.Md, iconName, iconProps, isD
         onPressOut?.(event);
     };
     return (<ButtonAnimated_1.ButtonAnimated disabled={isDisabled} onPressIn={onPressInHandler} onPressOut={onPressOutHandler} accessible testID="button-icon" {...props} style={[
-            tw.style('items-center justify-center', ButtonIcon_constants_1.TWCLASSMAP_BUTTONICON_SIZE_DIMENSION[size], isFloating ? 'rounded-full' : 'rounded-lg', backgroundColor, isDisabled ? 'opacity-50' : 'opacity-100', twClassName),
+            tw.style('items-center justify-center', ButtonIcon_constants_1.TWCLASSMAP_BUTTONICON_SIZE_DIMENSION[size], borderRadiusClass, backgroundColor, isDisabled ? 'opacity-50' : 'opacity-100', twClassName),
             style,
         ]}>
       <Icon_1.Icon name={iconName} color={twIconColorClassNames} size={ButtonIcon_constants_1.MAP_BUTTONICON_SIZE_ICONSIZE[size]} {...iconProps}/>

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

@@ -1 +1 @@
-{"version":3,"file":"ButtonIcon.cjs","sourceRoot":"","sources":["../../../src/components/ButtonIcon/ButtonIcon.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,8FAA4E;AAC5E,+CAAwC;AAGxC,iDAA6C;AAE7C,4CAA+B;AAC/B,gFAAmE;AAEnE,qEAGgC;AAGzB,MAAM,UAAU,GAAG,CAAC,EACzB,IAAI,GAAG,sBAAc,CAAC,EAAE,EACxB,QAAQ,EACR,SAAS,EACT,UAAU,GAAG,KAAK,EAClB,SAAS,GAAG,KAAK,EACjB,UAAU,GAAG,KAAK,EAClB,SAAS,EACT,UAAU,EACV,WAAW,EACX,KAAK,EACL,GAAG,KAAK,EACQ,EAAE,EAAE;IACpB,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAClD,MAAM,EAAE,GAAG,IAAA,wCAAW,GAAE,CAAC;IAEzB,IAAI,eAAe,GAAG,gBAAgB,CAAC;IACvC,IAAI,UAAU,EAAE;QACd,eAAe,GAAG,iBAAiB,CAAC;KACrC;SAAM,IAAI,SAAS,EAAE;QACpB,eAAe,GAAG,YAAY,CAAC;KAChC;IAED,MAAM,qBAAqB,GACzB,SAAS,IAAI,UAAU,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,mBAAmB,CAAC;IAEzE,MAAM,gBAAgB,GAAG,CAAC,KAA4B,EAAE,EAAE;QACxD,YAAY,CAAC,IAAI,CAAC,CAAC;QACnB,SAAS,EAAE,CAAC,KAAK,CAAC,CAAC;IACrB,CAAC,CAAC;IAEF,MAAM,iBAAiB,GAAG,CAAC,KAA4B,EAAE,EAAE;QACzD,YAAY,CAAC,KAAK,CAAC,CAAC;QACpB,UAAU,EAAE,CAAC,KAAK,CAAC,CAAC;IACtB,CAAC,CAAC;IAEF,OAAO,CACL,CAAC,+BAAc,CACb,QAAQ,CAAC,CAAC,UAAU,CAAC,CACrB,SAAS,CAAC,CAAC,gBAAgB,CAAC,CAC5B,UAAU,CAAC,CAAC,iBAAiB,CAAC,CAC9B,UAAU,CACV,MAAM,CAAC,aAAa,CACpB,IAAI,KAAK,CAAC,CACV,KAAK,CAAC,CAAC;YACL,EAAE,CAAC,KAAK,CACN,6BAA6B,EAC7B,2DAAoC,CAAC,IAAI,CAAC,EAC1C,UAAU,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,YAAY,EAC1C,eAAe,EACf,UAAU,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,aAAa,EACzC,WAAW,CACZ;YACD,KAAK;SACN,CAAC,CAEF;MAAA,CAAC,WAAI,CACH,IAAI,CAAC,CAAC,QAAQ,CAAC,CACf,KAAK,CAAC,CAAC,qBAAkC,CAAC,CAC1C,IAAI,CAAC,CAAC,mDAA4B,CAAC,IAAI,CAAC,CAAC,CACzC,IAAI,SAAS,CAAC,EAElB;IAAA,EAAE,+BAAc,CAAC,CAClB,CAAC;AACJ,CAAC,CAAC;AAhEW,QAAA,UAAU,cAgErB","sourcesContent":["import { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React, { useState } from 'react';\nimport type { GestureResponderEvent } from 'react-native';\n\nimport { ButtonIconSize } from '../../types';\nimport type { IconColor } from '../Icon';\nimport { Icon } from '../Icon';\nimport { ButtonAnimated } from '../temp-components/ButtonAnimated';\n\nimport {\n  MAP_BUTTONICON_SIZE_ICONSIZE,\n  TWCLASSMAP_BUTTONICON_SIZE_DIMENSION,\n} from './ButtonIcon.constants';\nimport type { ButtonIconProps } from './ButtonIcon.types';\n\nexport const ButtonIcon = ({\n  size = ButtonIconSize.Md,\n  iconName,\n  iconProps,\n  isDisabled = false,\n  isInverse = false,\n  isFloating = false,\n  onPressIn,\n  onPressOut,\n  twClassName,\n  style,\n  ...props\n}: ButtonIconProps) => {\n  const [isPressed, setIsPressed] = useState(false);\n  const tw = useTailwind();\n\n  let backgroundColor = 'bg-transparent';\n  if (isFloating) {\n    backgroundColor = 'bg-icon-default';\n  } else if (isPressed) {\n    backgroundColor = 'bg-pressed';\n  }\n\n  const twIconColorClassNames =\n    isInverse || isFloating ? 'text-primary-inverse' : 'text-icon-default';\n\n  const onPressInHandler = (event: GestureResponderEvent) => {\n    setIsPressed(true);\n    onPressIn?.(event);\n  };\n\n  const onPressOutHandler = (event: GestureResponderEvent) => {\n    setIsPressed(false);\n    onPressOut?.(event);\n  };\n\n  return (\n    <ButtonAnimated\n      disabled={isDisabled}\n      onPressIn={onPressInHandler}\n      onPressOut={onPressOutHandler}\n      accessible\n      testID=\"button-icon\"\n      {...props}\n      style={[\n        tw.style(\n          'items-center justify-center',\n          TWCLASSMAP_BUTTONICON_SIZE_DIMENSION[size],\n          isFloating ? 'rounded-full' : 'rounded-lg',\n          backgroundColor,\n          isDisabled ? 'opacity-50' : 'opacity-100',\n          twClassName,\n        ),\n        style,\n      ]}\n    >\n      <Icon\n        name={iconName}\n        color={twIconColorClassNames as IconColor}\n        size={MAP_BUTTONICON_SIZE_ICONSIZE[size]}\n        {...iconProps}\n      />\n    </ButtonAnimated>\n  );\n};\n"]}
+{"version":3,"file":"ButtonIcon.cjs","sourceRoot":"","sources":["../../../src/components/ButtonIcon/ButtonIcon.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,8FAA4E;AAC5E,+CAAwC;AAGxC,iDAAgE;AAEhE,4CAA+B;AAC/B,gFAAmE;AAEnE,qEAGgC;AAGzB,MAAM,UAAU,GAAG,CAAC,EACzB,IAAI,GAAG,sBAAc,CAAC,EAAE,EACxB,QAAQ,EACR,SAAS,EACT,UAAU,GAAG,KAAK,EAClB,OAAO,GAAG,yBAAiB,CAAC,OAAO,EACnC,SAAS,EACT,UAAU,EACV,WAAW,EACX,KAAK,EACL,GAAG,KAAK,EACQ,EAAE,EAAE;IACpB,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAClD,MAAM,EAAE,GAAG,IAAA,wCAAW,GAAE,CAAC;IAEzB,IAAI,eAAe,GAAG,gBAAgB,CAAC;IACvC,IAAI,OAAO,KAAK,yBAAiB,CAAC,QAAQ,EAAE;QAC1C,eAAe,GAAG,iBAAiB,CAAC;KACrC;SAAM,IAAI,OAAO,KAAK,yBAAiB,CAAC,MAAM,EAAE;QAC/C,eAAe,GAAG,SAAS,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,UAAU,CAAC;KAC/D;SAAM,IAAI,SAAS,EAAE;QACpB,eAAe,GAAG,YAAY,CAAC;KAChC;IAED,MAAM,qBAAqB,GACzB,OAAO,KAAK,yBAAiB,CAAC,QAAQ;QACpC,CAAC,CAAC,sBAAsB;QACxB,CAAC,CAAC,mBAAmB,CAAC;IAE1B,MAAM,iBAAiB,GACrB,OAAO,KAAK,yBAAiB,CAAC,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,cAAc,CAAC;IAExE,MAAM,gBAAgB,GAAG,CAAC,KAA4B,EAAE,EAAE;QACxD,YAAY,CAAC,IAAI,CAAC,CAAC;QACnB,SAAS,EAAE,CAAC,KAAK,CAAC,CAAC;IACrB,CAAC,CAAC;IAEF,MAAM,iBAAiB,GAAG,CAAC,KAA4B,EAAE,EAAE;QACzD,YAAY,CAAC,KAAK,CAAC,CAAC;QACpB,UAAU,EAAE,CAAC,KAAK,CAAC,CAAC;IACtB,CAAC,CAAC;IAEF,OAAO,CACL,CAAC,+BAAc,CACb,QAAQ,CAAC,CAAC,UAAU,CAAC,CACrB,SAAS,CAAC,CAAC,gBAAgB,CAAC,CAC5B,UAAU,CAAC,CAAC,iBAAiB,CAAC,CAC9B,UAAU,CACV,MAAM,CAAC,aAAa,CACpB,IAAI,KAAK,CAAC,CACV,KAAK,CAAC,CAAC;YACL,EAAE,CAAC,KAAK,CACN,6BAA6B,EAC7B,2DAAoC,CAAC,IAAI,CAAC,EAC1C,iBAAiB,EACjB,eAAe,EACf,UAAU,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,aAAa,EACzC,WAAW,CACZ;YACD,KAAK;SACN,CAAC,CAEF;MAAA,CAAC,WAAI,CACH,IAAI,CAAC,CAAC,QAAQ,CAAC,CACf,KAAK,CAAC,CAAC,qBAAkC,CAAC,CAC1C,IAAI,CAAC,CAAC,mDAA4B,CAAC,IAAI,CAAC,CAAC,CACzC,IAAI,SAAS,CAAC,EAElB;IAAA,EAAE,+BAAc,CAAC,CAClB,CAAC;AACJ,CAAC,CAAC;AAtEW,QAAA,UAAU,cAsErB","sourcesContent":["import { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React, { useState } from 'react';\nimport type { GestureResponderEvent } from 'react-native';\n\nimport { ButtonIconSize, ButtonIconVariant } from '../../types';\nimport type { IconColor } from '../Icon';\nimport { Icon } from '../Icon';\nimport { ButtonAnimated } from '../temp-components/ButtonAnimated';\n\nimport {\n  MAP_BUTTONICON_SIZE_ICONSIZE,\n  TWCLASSMAP_BUTTONICON_SIZE_DIMENSION,\n} from './ButtonIcon.constants';\nimport type { ButtonIconProps } from './ButtonIcon.types';\n\nexport const ButtonIcon = ({\n  size = ButtonIconSize.Md,\n  iconName,\n  iconProps,\n  isDisabled = false,\n  variant = ButtonIconVariant.Default,\n  onPressIn,\n  onPressOut,\n  twClassName,\n  style,\n  ...props\n}: ButtonIconProps) => {\n  const [isPressed, setIsPressed] = useState(false);\n  const tw = useTailwind();\n\n  let backgroundColor = 'bg-transparent';\n  if (variant === ButtonIconVariant.Floating) {\n    backgroundColor = 'bg-icon-default';\n  } else if (variant === ButtonIconVariant.Filled) {\n    backgroundColor = isPressed ? 'bg-muted-pressed' : 'bg-muted';\n  } else if (isPressed) {\n    backgroundColor = 'bg-pressed';\n  }\n\n  const twIconColorClassNames =\n    variant === ButtonIconVariant.Floating\n      ? 'text-primary-inverse'\n      : 'text-icon-default';\n\n  const borderRadiusClass =\n    variant === ButtonIconVariant.Default ? 'rounded-lg' : 'rounded-full';\n\n  const onPressInHandler = (event: GestureResponderEvent) => {\n    setIsPressed(true);\n    onPressIn?.(event);\n  };\n\n  const onPressOutHandler = (event: GestureResponderEvent) => {\n    setIsPressed(false);\n    onPressOut?.(event);\n  };\n\n  return (\n    <ButtonAnimated\n      disabled={isDisabled}\n      onPressIn={onPressInHandler}\n      onPressOut={onPressOutHandler}\n      accessible\n      testID=\"button-icon\"\n      {...props}\n      style={[\n        tw.style(\n          'items-center justify-center',\n          TWCLASSMAP_BUTTONICON_SIZE_DIMENSION[size],\n          borderRadiusClass,\n          backgroundColor,\n          isDisabled ? 'opacity-50' : 'opacity-100',\n          twClassName,\n        ),\n        style,\n      ]}\n    >\n      <Icon\n        name={iconName}\n        color={twIconColorClassNames as IconColor}\n        size={MAP_BUTTONICON_SIZE_ICONSIZE[size]}\n        {...iconProps}\n      />\n    </ButtonAnimated>\n  );\n};\n"]}

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

@@ -1,4 +1,4 @@
 import React from "react";
 import type { ButtonIconProps } from "./ButtonIcon.types.cjs";
-export declare const ButtonIcon: ({ size, iconName, iconProps, isDisabled, isInverse, isFloating, onPressIn, onPressOut, twClassName, style, ...props }: ButtonIconProps) => React.JSX.Element;
+export declare const ButtonIcon: ({ size, iconName, iconProps, isDisabled, variant, onPressIn, onPressOut, twClassName, style, ...props }: ButtonIconProps) => React.JSX.Element;
 //# sourceMappingURL=ButtonIcon.d.cts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ButtonIcon.d.cts","sourceRoot":"","sources":["../../../src/components/ButtonIcon/ButtonIcon.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmB,cAAc;AAYxC,OAAO,KAAK,EAAE,eAAe,EAAE,+BAA2B;AAE1D,eAAO,MAAM,UAAU,0HAYpB,eAAe,sBAoDjB,CAAC"}
+{"version":3,"file":"ButtonIcon.d.cts","sourceRoot":"","sources":["../../../src/components/ButtonIcon/ButtonIcon.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmB,cAAc;AAYxC,OAAO,KAAK,EAAE,eAAe,EAAE,+BAA2B;AAE1D,eAAO,MAAM,UAAU,4GAWpB,eAAe,sBA2DjB,CAAC"}

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

@@ -1,4 +1,4 @@
 import React from "react";
 import type { ButtonIconProps } from "./ButtonIcon.types.mjs";
-export declare const ButtonIcon: ({ size, iconName, iconProps, isDisabled, isInverse, isFloating, onPressIn, onPressOut, twClassName, style, ...props }: ButtonIconProps) => React.JSX.Element;
+export declare const ButtonIcon: ({ size, iconName, iconProps, isDisabled, variant, onPressIn, onPressOut, twClassName, style, ...props }: ButtonIconProps) => React.JSX.Element;
 //# sourceMappingURL=ButtonIcon.d.mts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ButtonIcon.d.mts","sourceRoot":"","sources":["../../../src/components/ButtonIcon/ButtonIcon.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmB,cAAc;AAYxC,OAAO,KAAK,EAAE,eAAe,EAAE,+BAA2B;AAE1D,eAAO,MAAM,UAAU,0HAYpB,eAAe,sBAoDjB,CAAC"}
+{"version":3,"file":"ButtonIcon.d.mts","sourceRoot":"","sources":["../../../src/components/ButtonIcon/ButtonIcon.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmB,cAAc;AAYxC,OAAO,KAAK,EAAE,eAAe,EAAE,+BAA2B;AAE1D,eAAO,MAAM,UAAU,4GAWpB,eAAe,sBA2DjB,CAAC"}

package/dist/components/ButtonIcon/ButtonIcon.mjs

@@ -7,21 +7,27 @@ function $importDefault(module) {
 import { useTailwind } from "@metamask-previews/design-system-twrnc-preset";
 import $React, { useState } from "react";
 const React = $importDefault($React);
-import { ButtonIconSize } from "../../types/index.mjs";
+import { ButtonIconSize, ButtonIconVariant } from "../../types/index.mjs";
 import { Icon } from "../Icon/index.mjs";
 import { ButtonAnimated } from "../temp-components/ButtonAnimated/index.mjs";
 import { MAP_BUTTONICON_SIZE_ICONSIZE, TWCLASSMAP_BUTTONICON_SIZE_DIMENSION } from "./ButtonIcon.constants.mjs";
-export const ButtonIcon = ({ size = ButtonIconSize.Md, iconName, iconProps, isDisabled = false, isInverse = false, isFloating = false, onPressIn, onPressOut, twClassName, style, ...props }) => {
+export const ButtonIcon = ({ size = ButtonIconSize.Md, iconName, iconProps, isDisabled = false, variant = ButtonIconVariant.Default, onPressIn, onPressOut, twClassName, style, ...props }) => {
     const [isPressed, setIsPressed] = useState(false);
     const tw = useTailwind();
     let backgroundColor = 'bg-transparent';
-    if (isFloating) {
+    if (variant === ButtonIconVariant.Floating) {
         backgroundColor = 'bg-icon-default';
     }
+    else if (variant === ButtonIconVariant.Filled) {
+        backgroundColor = isPressed ? 'bg-muted-pressed' : 'bg-muted';
+    }
     else if (isPressed) {
         backgroundColor = 'bg-pressed';
     }
-    const twIconColorClassNames = isInverse || isFloating ? 'text-primary-inverse' : 'text-icon-default';
+    const twIconColorClassNames = variant === ButtonIconVariant.Floating
+        ? 'text-primary-inverse'
+        : 'text-icon-default';
+    const borderRadiusClass = variant === ButtonIconVariant.Default ? 'rounded-lg' : 'rounded-full';
     const onPressInHandler = (event) => {
         setIsPressed(true);
         onPressIn?.(event);
@@ -31,7 +37,7 @@ export const ButtonIcon = ({ size = ButtonIconSize.Md, iconName, iconProps, isDi
         onPressOut?.(event);
     };
     return (<ButtonAnimated disabled={isDisabled} onPressIn={onPressInHandler} onPressOut={onPressOutHandler} accessible testID="button-icon" {...props} style={[
-            tw.style('items-center justify-center', TWCLASSMAP_BUTTONICON_SIZE_DIMENSION[size], isFloating ? 'rounded-full' : 'rounded-lg', backgroundColor, isDisabled ? 'opacity-50' : 'opacity-100', twClassName),
+            tw.style('items-center justify-center', TWCLASSMAP_BUTTONICON_SIZE_DIMENSION[size], borderRadiusClass, backgroundColor, isDisabled ? 'opacity-50' : 'opacity-100', twClassName),
             style,
         ]}>
       <Icon name={iconName} color={twIconColorClassNames} size={MAP_BUTTONICON_SIZE_ICONSIZE[size]} {...iconProps}/>