@metamask-previews/design-system-react-native 0.0.0-preview.8561168 → 0.0.0-preview.85a0952

package/dist/components/Button/variants/ButtonTertiary/ButtonTertiary.js

@@ -22,58 +22,56 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.ButtonTertiary = void 0;
 const design_system_twrnc_preset_1 = require("@metamask-previews/design-system-twrnc-preset");
 const react_1 = __importStar(require("react"));
-const ButtonBase_1 = __importDefault(require("../../../../primitives/ButtonBase"));
-const ButtonTertiary_constants_1 = require("./ButtonTertiary.constants");
-const ButtonTertiary_utilities_1 = require("./ButtonTertiary.utilities");
-const ButtonTertiary = ({ children, textProps, spinnerProps, startIconProps, endIconProps, isDanger = ButtonTertiary_constants_1.DEFAULT_BUTTONTERTIARY_PROPS.isDanger, isInverse = ButtonTertiary_constants_1.DEFAULT_BUTTONTERTIARY_PROPS.isInverse, isLoading = ButtonTertiary_constants_1.DEFAULT_BUTTONTERTIARY_PROPS.isLoading, onPressIn, onPressOut, twClassName, style, ...props }) => {
+const ButtonBase_1 = require("../../../ButtonBase");
+const Icon_1 = require("../../../Icon");
+const Text_1 = require("../../../Text");
+const ButtonTertiary = ({ children, textProps, spinnerProps, startIconProps, endIconProps, isDanger = false, isInverse = false, isLoading = false, onPressIn, onPressOut, twClassName = '', style, ...props }) => {
     const [isPressed, setIsPressed] = (0, react_1.useState)(false);
     const tw = (0, design_system_twrnc_preset_1.useTailwind)();
-    const twContainerClassNames = (0, react_1.useMemo)(() => {
-        return (0, ButtonTertiary_utilities_1.generateButtonTertiaryContainerClassNames)({
-            isPressed,
-            isDanger,
-            isInverse,
-            isLoading,
-            twClassName,
-        });
-    }, [isPressed, isDanger, isInverse, isLoading, twClassName]);
-    const twTextClassNames = (0, react_1.useMemo)(() => {
-        return (0, ButtonTertiary_utilities_1.generateButtonTertiaryTextClassNames)({
-            isPressed,
-            isDanger,
-            isInverse,
-            isLoading,
-        });
-    }, [isPressed, isDanger, isInverse, isLoading]);
-    const finalTextProps = {
-        ...ButtonTertiary_constants_1.DEFAULT_BUTTONTERTIARY_PROPS.textProps,
-        ...textProps,
-        twClassName: `${twTextClassNames} ${textProps?.twClassName ?? ''}`,
-    };
-    const finalStartIconProps = {
-        ...ButtonTertiary_constants_1.DEFAULT_BUTTONTERTIARY_PROPS.startIconProps,
-        ...startIconProps,
-        twClassName: `${twTextClassNames} ${startIconProps?.twClassName ?? ''}`,
-    };
-    const finalEndIconProps = {
-        ...ButtonTertiary_constants_1.DEFAULT_BUTTONTERTIARY_PROPS.endIconProps,
-        ...endIconProps,
-        twClassName: `${twTextClassNames} ${endIconProps?.twClassName ?? ''}`,
-    };
-    const finalSpinnerProps = {
-        ...ButtonTertiary_constants_1.DEFAULT_BUTTONTERTIARY_PROPS.spinnerProps,
-        color: twTextClassNames,
-        loadingTextProps: {
-            twClassName: twTextClassNames,
-        },
-        ...spinnerProps,
-    };
+    const twContainerClassNames = `
+    ${isInverse && isDanger
+        ? isPressed || isLoading
+            ? 'bg-background-default-pressed'
+            : 'bg-background-default'
+        : isDanger
+            ? isPressed || isLoading
+                ? 'bg-error-muted-pressed'
+                : 'bg-transparent'
+            : isInverse
+                ? isPressed || isLoading
+                    ? 'bg-background-pressed'
+                    : 'bg-transparent'
+                : isPressed || isLoading
+                    ? 'bg-background-pressed'
+                    : 'bg-transparent'}
+    ${isInverse && !isDanger ? 'border-[1.5px]' : 'border-0'}
+    ${isInverse && isDanger
+        ? isPressed || isLoading
+            ? 'border-background-default-pressed'
+            : 'border-background-default'
+        : isDanger
+            ? isPressed || isLoading
+                ? 'border-error-muted-pressed'
+                : 'border-transparent'
+            : isInverse
+                ? 'border-primary-inverse'
+                : isPressed || isLoading
+                    ? 'border-background-pressed'
+                    : 'border-transparent'}
+  `;
+    const twTextClassNames = isDanger
+        ? isPressed || isLoading
+            ? 'text-error-default-pressed'
+            : 'text-error-default'
+        : isInverse
+            ? 'text-primary-inverse'
+            : isPressed || isLoading
+                ? 'text-primary-default-pressed'
+                : 'text-primary-default';
     const onPressInHandler = (event) => {
         setIsPressed(true);
         onPressIn?.(event);
@@ -82,9 +80,30 @@ const ButtonTertiary = ({ children, textProps, spinnerProps, startIconProps, end
         setIsPressed(false);
         onPressOut?.(event);
     };
-    return (<ButtonBase_1.default textProps={finalTextProps} spinnerProps={finalSpinnerProps} startIconProps={finalStartIconProps} endIconProps={finalEndIconProps} isLoading={isLoading} onPressIn={onPressInHandler} onPressOut={onPressOutHandler} style={[tw `${twContainerClassNames}`, style]} testID="button-tertiary" {...props}>
+    return (<ButtonBase_1.ButtonBase textProps={{
+            variant: Text_1.TextVariant.BodyMd,
+            fontWeight: Text_1.FontWeight.Medium,
+            numberOfLines: 1,
+            ellipsizeMode: 'clip',
+            ...textProps,
+            twClassName: `${twTextClassNames} ${textProps?.twClassName ?? ''}`,
+        }} spinnerProps={{
+            color: twTextClassNames,
+            loadingTextProps: {
+                twClassName: twTextClassNames,
+            },
+            ...spinnerProps,
+        }} startIconProps={{
+            size: Icon_1.IconSize.Sm,
+            ...startIconProps,
+            twClassName: `${twTextClassNames} ${startIconProps?.twClassName ?? ''}`,
+        }} endIconProps={{
+            size: Icon_1.IconSize.Sm,
+            ...endIconProps,
+            twClassName: `${twTextClassNames} ${endIconProps?.twClassName ?? ''}`,
+        }} isLoading={isLoading} onPressIn={onPressInHandler} onPressOut={onPressOutHandler} style={[tw `${twContainerClassNames}`, style]} {...props}>
       {children}
-    </ButtonBase_1.default>);
+    </ButtonBase_1.ButtonBase>);
 };
-exports.default = ButtonTertiary;
+exports.ButtonTertiary = ButtonTertiary;
 //# sourceMappingURL=ButtonTertiary.js.map

package/dist/components/Button/variants/ButtonTertiary/ButtonTertiary.js.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonTertiary.js","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonTertiary/ButtonTertiary.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React, { useMemo, useState } from 'react';\nimport type { GestureResponderEvent } from 'react-native';\n\nimport ButtonBase from '../../../../primitives/ButtonBase';\nimport type { SpinnerProps } from '../../../../temp-components/Spinner';\nimport type { IconProps, IconColor } from '../../../Icon';\nimport type { TextProps } from '../../../Text/Text.types';\nimport { DEFAULT_BUTTONTERTIARY_PROPS } from './ButtonTertiary.constants';\nimport type { ButtonTertiaryProps } from './ButtonTertiary.types';\nimport {\n  generateButtonTertiaryContainerClassNames,\n  generateButtonTertiaryTextClassNames,\n} from './ButtonTertiary.utilities';\n\nconst ButtonTertiary = ({\n  children,\n  textProps,\n  spinnerProps,\n  startIconProps,\n  endIconProps,\n  isDanger = DEFAULT_BUTTONTERTIARY_PROPS.isDanger,\n  isInverse = DEFAULT_BUTTONTERTIARY_PROPS.isInverse,\n  isLoading = DEFAULT_BUTTONTERTIARY_PROPS.isLoading,\n  onPressIn,\n  onPressOut,\n  twClassName,\n  style,\n  ...props\n}: ButtonTertiaryProps) => {\n  const [isPressed, setIsPressed] = useState(false);\n  const tw = useTailwind();\n  const twContainerClassNames = useMemo(() => {\n    return generateButtonTertiaryContainerClassNames({\n      isPressed,\n      isDanger,\n      isInverse,\n      isLoading,\n      twClassName,\n    });\n  }, [isPressed, isDanger, isInverse, isLoading, twClassName]);\n\n  const twTextClassNames = useMemo(() => {\n    return generateButtonTertiaryTextClassNames({\n      isPressed,\n      isDanger,\n      isInverse,\n      isLoading,\n    });\n  }, [isPressed, isDanger, isInverse, isLoading]);\n\n  const finalTextProps: Omit<Partial<TextProps>, 'children'> = {\n    ...DEFAULT_BUTTONTERTIARY_PROPS.textProps,\n    ...textProps,\n    twClassName: `${twTextClassNames} ${textProps?.twClassName ?? ''}`,\n  };\n  const finalStartIconProps: Partial<IconProps> = {\n    ...DEFAULT_BUTTONTERTIARY_PROPS.startIconProps,\n    ...startIconProps,\n    twClassName: `${twTextClassNames} ${startIconProps?.twClassName ?? ''}`,\n  };\n\n  const finalEndIconProps: Partial<IconProps> = {\n    ...DEFAULT_BUTTONTERTIARY_PROPS.endIconProps,\n    ...endIconProps,\n    twClassName: `${twTextClassNames} ${endIconProps?.twClassName ?? ''}`,\n  };\n\n  const finalSpinnerProps: SpinnerProps = {\n    ...DEFAULT_BUTTONTERTIARY_PROPS.spinnerProps,\n    color: twTextClassNames as IconColor,\n    loadingTextProps: {\n      twClassName: twTextClassNames,\n    },\n    ...spinnerProps,\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    <ButtonBase\n      textProps={finalTextProps}\n      spinnerProps={finalSpinnerProps}\n      startIconProps={finalStartIconProps}\n      endIconProps={finalEndIconProps}\n      isLoading={isLoading}\n      onPressIn={onPressInHandler}\n      onPressOut={onPressOutHandler}\n      style={[tw`${twContainerClassNames}`, style]}\n      testID=\"button-tertiary\"\n      {...props}\n    >\n      {children}\n    </ButtonBase>\n  );\n};\n\nexport default ButtonTertiary;\n"]}
+{"version":3,"file":"ButtonTertiary.js","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonTertiary/ButtonTertiary.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React, { useState } from 'react';\nimport type { GestureResponderEvent } from 'react-native';\n\nimport { ButtonBase } from '../../../ButtonBase';\nimport type { IconColor } from '../../../Icon';\nimport { IconSize } from '../../../Icon';\nimport { TextVariant, FontWeight } from '../../../Text';\n\nimport type { ButtonTertiaryProps } from './ButtonTertiary.types';\n\nexport const ButtonTertiary = ({\n  children,\n  textProps,\n  spinnerProps,\n  startIconProps,\n  endIconProps,\n  isDanger = false,\n  isInverse = false,\n  isLoading = false,\n  onPressIn,\n  onPressOut,\n  twClassName = '',\n  style,\n  ...props\n}: ButtonTertiaryProps) => {\n  const [isPressed, setIsPressed] = useState(false);\n  const tw = useTailwind();\n  const twContainerClassNames = `\n    ${\n      isInverse && isDanger\n        ? isPressed || isLoading\n          ? 'bg-background-default-pressed'\n          : 'bg-background-default'\n        : isDanger\n          ? isPressed || isLoading\n            ? 'bg-error-muted-pressed'\n            : 'bg-transparent'\n          : isInverse\n            ? isPressed || isLoading\n              ? 'bg-background-pressed'\n              : 'bg-transparent'\n            : isPressed || isLoading\n              ? 'bg-background-pressed'\n              : 'bg-transparent'\n    }\n    ${isInverse && !isDanger ? 'border-[1.5px]' : 'border-0'}\n    ${\n      isInverse && isDanger\n        ? isPressed || isLoading\n          ? 'border-background-default-pressed'\n          : 'border-background-default'\n        : isDanger\n          ? isPressed || isLoading\n            ? 'border-error-muted-pressed'\n            : 'border-transparent'\n          : isInverse\n            ? 'border-primary-inverse'\n            : isPressed || isLoading\n              ? 'border-background-pressed'\n              : 'border-transparent'\n    }\n  `;\n\n  const twTextClassNames = isDanger\n    ? isPressed || isLoading\n      ? 'text-error-default-pressed'\n      : 'text-error-default'\n    : isInverse\n      ? 'text-primary-inverse'\n      : isPressed || isLoading\n        ? 'text-primary-default-pressed'\n        : 'text-primary-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    <ButtonBase\n      textProps={{\n        variant: TextVariant.BodyMd,\n        fontWeight: FontWeight.Medium,\n        numberOfLines: 1,\n        ellipsizeMode: 'clip',\n        ...textProps,\n        twClassName: `${twTextClassNames} ${textProps?.twClassName ?? ''}`,\n      }}\n      spinnerProps={{\n        color: twTextClassNames as IconColor,\n        loadingTextProps: {\n          twClassName: twTextClassNames,\n        },\n        ...spinnerProps,\n      }}\n      startIconProps={{\n        size: IconSize.Sm,\n        ...startIconProps,\n        twClassName: `${twTextClassNames} ${startIconProps?.twClassName ?? ''}`,\n      }}\n      endIconProps={{\n        size: IconSize.Sm,\n        ...endIconProps,\n        twClassName: `${twTextClassNames} ${endIconProps?.twClassName ?? ''}`,\n      }}\n      isLoading={isLoading}\n      onPressIn={onPressInHandler}\n      onPressOut={onPressOutHandler}\n      style={[tw`${twContainerClassNames}`, style]}\n      {...props}\n    >\n      {children}\n    </ButtonBase>\n  );\n};\n"]}

package/dist/components/Button/variants/ButtonTertiary/ButtonTertiary.types.d.ts

@@ -1,15 +1,17 @@
-import type { ButtonBaseProps } from '../../../../primitives/ButtonBase';
+import type { ButtonBaseProps } from '../../../ButtonBase';
 /**
  * ButtonTertiary component props.
  */
 export type ButtonTertiaryProps = {
     /**
      * Optional prop to show the danger state of the button.
+     *
      * @default false
      */
     isDanger?: boolean;
     /**
      * Optional prop to show the inverse state of the button, which is reserved for buttons on colored backgrounds.
+     *
      * @default false
      */
     isInverse?: boolean;

package/dist/components/Button/variants/ButtonTertiary/ButtonTertiary.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonTertiary.types.d.ts","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonTertiary/ButtonTertiary.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mCAAmC,CAAC;AAEzE;;GAEG;AACH,MAAM,MAAM,mBAAmB,GAAG;IAChC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,GAAG,eAAe,CAAC"}
+{"version":3,"file":"ButtonTertiary.types.d.ts","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonTertiary/ButtonTertiary.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAE3D;;GAEG;AACH,MAAM,MAAM,mBAAmB,GAAG;IAChC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,GAAG,eAAe,CAAC"}

package/dist/components/Button/variants/ButtonTertiary/ButtonTertiary.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonTertiary.types.js","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonTertiary/ButtonTertiary.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ButtonBaseProps } from '../../../../primitives/ButtonBase';\n\n/**\n * ButtonTertiary component props.\n */\nexport type ButtonTertiaryProps = {\n  /**\n   * Optional prop to show the danger state of the button.\n   * @default false\n   */\n  isDanger?: boolean;\n  /**\n   * Optional prop to show the inverse state of the button, which is reserved for buttons on colored backgrounds.\n   * @default false\n   */\n  isInverse?: boolean;\n} & ButtonBaseProps;\n"]}
+{"version":3,"file":"ButtonTertiary.types.js","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonTertiary/ButtonTertiary.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ButtonBaseProps } from '../../../ButtonBase';\n\n/**\n * ButtonTertiary component props.\n */\nexport type ButtonTertiaryProps = {\n  /**\n   * Optional prop to show the danger state of the button.\n   *\n   * @default false\n   */\n  isDanger?: boolean;\n  /**\n   * Optional prop to show the inverse state of the button, which is reserved for buttons on colored backgrounds.\n   *\n   * @default false\n   */\n  isInverse?: boolean;\n} & ButtonBaseProps;\n"]}

package/dist/components/Button/variants/ButtonTertiary/index.d.ts

@@ -1,4 +1,4 @@
-export { default } from './ButtonTertiary';
+export { ButtonTertiarySize } from '../../../../types';
+export { ButtonTertiary } from './ButtonTertiary';
 export type { ButtonTertiaryProps } from './ButtonTertiary.types';
-export { ButtonBaseSize as ButtonTertiarySize } from '../../../../primitives/ButtonBase';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/Button/variants/ButtonTertiary/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonTertiary/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAC3C,YAAY,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,cAAc,IAAI,kBAAkB,EAAE,MAAM,mCAAmC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonTertiary/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AACvD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,YAAY,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC"}

package/dist/components/Button/variants/ButtonTertiary/index.js

@@ -1,11 +1,8 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ButtonTertiarySize = exports.default = void 0;
+exports.ButtonTertiary = exports.ButtonTertiarySize = void 0;
+var types_1 = require("../../../../types");
+Object.defineProperty(exports, "ButtonTertiarySize", { enumerable: true, get: function () { return types_1.ButtonTertiarySize; } });
 var ButtonTertiary_1 = require("./ButtonTertiary");
-Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(ButtonTertiary_1).default; } });
-var ButtonBase_1 = require("../../../../primitives/ButtonBase");
-Object.defineProperty(exports, "ButtonTertiarySize", { enumerable: true, get: function () { return ButtonBase_1.ButtonBaseSize; } });
+Object.defineProperty(exports, "ButtonTertiary", { enumerable: true, get: function () { return ButtonTertiary_1.ButtonTertiary; } });
 //# sourceMappingURL=index.js.map

package/dist/components/Button/variants/ButtonTertiary/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonTertiary/index.ts"],"names":[],"mappings":";;;;;;AAAA,mDAA2C;AAAlC,0HAAA,OAAO,OAAA;AAEhB,gEAAyF;AAAhF,gHAAA,cAAc,OAAsB","sourcesContent":["export { default } from './ButtonTertiary';\nexport type { ButtonTertiaryProps } from './ButtonTertiary.types';\nexport { ButtonBaseSize as ButtonTertiarySize } from '../../../../primitives/ButtonBase';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonTertiary/index.ts"],"names":[],"mappings":";;;AAAA,2CAAuD;AAA9C,2GAAA,kBAAkB,OAAA;AAC3B,mDAAkD;AAAzC,gHAAA,cAAc,OAAA","sourcesContent":["export { ButtonTertiarySize } from '../../../../types';\nexport { ButtonTertiary } from './ButtonTertiary';\nexport type { ButtonTertiaryProps } from './ButtonTertiary.types';\n"]}

package/dist/components/ButtonBase/ButtonBase.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { ButtonBaseProps } from './ButtonBase.types';
+export declare const ButtonBase: ({ children, textProps, size, isLoading, loadingText, spinnerProps, startIconName, startIconProps, startAccessory, endIconName, endIconProps, endAccessory, isDisabled, isFullWidth, twClassName, style, ...props }: ButtonBaseProps) => React.JSX.Element;
+//# sourceMappingURL=ButtonBase.d.ts.map

package/dist/components/ButtonBase/ButtonBase.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonBase.d.ts","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAW1B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAE1D,eAAO,MAAM,UAAU,uNAkBpB,eAAe,sBA0EjB,CAAC"}

package/dist/components/ButtonBase/ButtonBase.js

@@ -0,0 +1,48 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ButtonBase = void 0;
+const design_system_twrnc_preset_1 = require("@metamask-previews/design-system-twrnc-preset");
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+const types_1 = require("../../types");
+const Icon_1 = require("../Icon");
+const Icon_2 = require("../Icon");
+const ButtonAnimated_1 = require("../temp-components/ButtonAnimated");
+const Spinner_1 = require("../temp-components/Spinner");
+const TextOrChildren_1 = require("../temp-components/TextOrChildren/TextOrChildren");
+const Text_1 = require("../Text");
+const ButtonBase = ({ children, textProps, size = types_1.ButtonBaseSize.Lg, isLoading, loadingText, spinnerProps, startIconName, startIconProps, startAccessory, endIconName, endIconProps, endAccessory, isDisabled, isFullWidth, twClassName = '', style, ...props }) => {
+    const tw = (0, design_system_twrnc_preset_1.useTailwind)();
+    const twContainerClassNames = `
+    flex-row items-center justify-center rounded-full bg-background-muted px-4 min-w-[80px] overflow-hidden
+    h-[${size}px]
+    ${isDisabled ? 'opacity-50' : 'opacity-100'}
+    ${isFullWidth ? 'self-stretch' : 'self-start'}
+    ${twClassName}
+  `;
+    const finalStartIconName = startIconName ?? startIconProps?.name;
+    const finalEndIconName = endIconName ?? endIconProps?.name;
+    return (<ButtonAnimated_1.ButtonAnimated disabled={isDisabled || isLoading} accessibilityRole="button" accessible style={[tw `${twContainerClassNames}`, style]} {...props}>
+      <react_native_1.View style={tw `absolute inset-0 flex items-center justify-center ${isLoading ? 'opacity-100' : 'opacity-0'}`} testID="spinner-container">
+        <Spinner_1.Spinner color={Icon_2.IconColor.IconDefault} loadingText={loadingText} loadingTextProps={{ numberOfLines: 1 }} {...spinnerProps}/>
+      </react_native_1.View>
+      <react_native_1.View style={tw `flex-row items-center justify-center gap-x-2 ${isLoading ? 'opacity-0' : 'opacity-100'}`} testID="content-container">
+        {finalStartIconName ? (<Icon_1.Icon name={finalStartIconName} size={Icon_2.IconSize.Sm} twClassName="shrink-0" {...startIconProps}/>) : (startAccessory)}
+        <TextOrChildren_1.TextOrChildren textProps={{
+            variant: Text_1.TextVariant.BodyMd,
+            fontWeight: Text_1.FontWeight.Medium,
+            color: Text_1.TextColor.TextDefault,
+            twClassName: 'shrink grow-0 flex-wrap text-center',
+            ...textProps,
+        }}>
+          {children}
+        </TextOrChildren_1.TextOrChildren>
+        {finalEndIconName ? (<Icon_1.Icon name={finalEndIconName} size={Icon_2.IconSize.Sm} twClassName="shrink-0" {...endIconProps}/>) : (endAccessory)}
+      </react_native_1.View>
+    </ButtonAnimated_1.ButtonAnimated>);
+};
+exports.ButtonBase = ButtonBase;
+//# sourceMappingURL=ButtonBase.js.map

package/dist/components/ButtonBase/ButtonBase.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonBase.js","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.tsx"],"names":[],"mappings":";;;;;;AAAA,8FAA4E;AAC5E,kDAA0B;AAC1B,+CAAoC;AAEpC,uCAA6C;AAC7C,kCAA+B;AAC/B,kCAA8C;AAC9C,sEAAmE;AACnE,wDAAqD;AACrD,qFAAkF;AAClF,kCAA6D;AAItD,MAAM,UAAU,GAAG,CAAC,EACzB,QAAQ,EACR,SAAS,EACT,IAAI,GAAG,sBAAc,CAAC,EAAE,EACxB,SAAS,EACT,WAAW,EACX,YAAY,EACZ,aAAa,EACb,cAAc,EACd,cAAc,EACd,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,UAAU,EACV,WAAW,EACX,WAAW,GAAG,EAAE,EAChB,KAAK,EACL,GAAG,KAAK,EACQ,EAAE,EAAE;IACpB,MAAM,EAAE,GAAG,IAAA,wCAAW,GAAE,CAAC;IACzB,MAAM,qBAAqB,GAAG;;SAEvB,IAAI;MACP,UAAU,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,aAAa;MACzC,WAAW,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,YAAY;MAC3C,WAAW;GACd,CAAC;IAEF,MAAM,kBAAkB,GAAG,aAAa,IAAI,cAAc,EAAE,IAAI,CAAC;IACjE,MAAM,gBAAgB,GAAG,WAAW,IAAI,YAAY,EAAE,IAAI,CAAC;IAE3D,OAAO,CACL,CAAC,+BAAc,CACb,QAAQ,CAAC,CAAC,UAAU,IAAI,SAAS,CAAC,CAClC,iBAAiB,CAAC,QAAQ,CAC1B,UAAU,CACV,KAAK,CAAC,CAAC,CAAC,EAAE,CAAA,GAAG,qBAAqB,EAAE,EAAE,KAAK,CAAC,CAAC,CAC7C,IAAI,KAAK,CAAC,CAEV;MAAA,CAAC,mBAAI,CACH,KAAK,CAAC,CAAC,EAAE,CAAA,qDACP,SAAS,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,WAC9B,EAAE,CAAC,CACH,MAAM,CAAC,mBAAmB,CAE1B;QAAA,CAAC,iBAAO,CACN,KAAK,CAAC,CAAC,gBAAS,CAAC,WAAW,CAAC,CAC7B,WAAW,CAAC,CAAC,WAAW,CAAC,CACzB,gBAAgB,CAAC,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,CAAC,CACvC,IAAI,YAAY,CAAC,EAErB;MAAA,EAAE,mBAAI,CACN;MAAA,CAAC,mBAAI,CACH,KAAK,CAAC,CAAC,EAAE,CAAA,gDACP,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,aAC5B,EAAE,CAAC,CACH,MAAM,CAAC,mBAAmB,CAE1B;QAAA,CAAC,kBAAkB,CAAC,CAAC,CAAC,CACpB,CAAC,WAAI,CACH,IAAI,CAAC,CAAC,kBAAkB,CAAC,CACzB,IAAI,CAAC,CAAC,eAAQ,CAAC,EAAE,CAAC,CAClB,WAAW,CAAC,UAAU,CACtB,IAAI,cAAc,CAAC,EACnB,CACH,CAAC,CAAC,CAAC,CACF,cAAc,CACf,CACD;QAAA,CAAC,+BAAc,CACb,SAAS,CAAC,CAAC;YACT,OAAO,EAAE,kBAAW,CAAC,MAAM;YAC3B,UAAU,EAAE,iBAAU,CAAC,MAAM;YAC7B,KAAK,EAAE,gBAAS,CAAC,WAAW;YAC5B,WAAW,EAAE,qCAAqC;YAClD,GAAG,SAAS;SACb,CAAC,CAEF;UAAA,CAAC,QAAQ,CACX;QAAA,EAAE,+BAAc,CAChB;QAAA,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAClB,CAAC,WAAI,CACH,IAAI,CAAC,CAAC,gBAAgB,CAAC,CACvB,IAAI,CAAC,CAAC,eAAQ,CAAC,EAAE,CAAC,CAClB,WAAW,CAAC,UAAU,CACtB,IAAI,YAAY,CAAC,EACjB,CACH,CAAC,CAAC,CAAC,CACF,YAAY,CACb,CACH;MAAA,EAAE,mBAAI,CACR;IAAA,EAAE,+BAAc,CAAC,CAClB,CAAC;AACJ,CAAC,CAAC;AA5FW,QAAA,UAAU,cA4FrB","sourcesContent":["import { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React from 'react';\nimport { View } from 'react-native';\n\nimport { ButtonBaseSize } from '../../types';\nimport { Icon } from '../Icon';\nimport { 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 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  style,\n  ...props\n}: ButtonBaseProps) => {\n  const tw = useTailwind();\n  const twContainerClassNames = `\n    flex-row items-center justify-center rounded-full bg-background-muted px-4 min-w-[80px] overflow-hidden\n    h-[${size}px]\n    ${isDisabled ? 'opacity-50' : 'opacity-100'}\n    ${isFullWidth ? 'self-stretch' : 'self-start'}\n    ${twClassName}\n  `;\n\n  const finalStartIconName = startIconName ?? startIconProps?.name;\n  const finalEndIconName = endIconName ?? endIconProps?.name;\n\n  return (\n    <ButtonAnimated\n      disabled={isDisabled || isLoading}\n      accessibilityRole=\"button\"\n      accessible\n      style={[tw`${twContainerClassNames}`, style]}\n      {...props}\n    >\n      <View\n        style={tw`absolute inset-0 flex items-center justify-center ${\n          isLoading ? 'opacity-100' : 'opacity-0'\n        }`}\n        testID=\"spinner-container\"\n      >\n        <Spinner\n          color={IconColor.IconDefault}\n          loadingText={loadingText}\n          loadingTextProps={{ numberOfLines: 1 }}\n          {...spinnerProps}\n        />\n      </View>\n      <View\n        style={tw`flex-row items-center justify-center gap-x-2 ${\n          isLoading ? 'opacity-0' : 'opacity-100'\n        }`}\n        testID=\"content-container\"\n      >\n        {finalStartIconName ? (\n          <Icon\n            name={finalStartIconName}\n            size={IconSize.Sm}\n            twClassName=\"shrink-0\"\n            {...startIconProps}\n          />\n        ) : (\n          startAccessory\n        )}\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',\n            ...textProps,\n          }}\n        >\n          {children}\n        </TextOrChildren>\n        {finalEndIconName ? (\n          <Icon\n            name={finalEndIconName}\n            size={IconSize.Sm}\n            twClassName=\"shrink-0\"\n            {...endIconProps}\n          />\n        ) : (\n          endAccessory\n        )}\n      </View>\n    </ButtonAnimated>\n  );\n};\n"]}

package/dist/{primitives → components}/ButtonBase/ButtonBase.types.d.ts

@@ -1,21 +1,9 @@
+/// <reference types="react" />
 import type { PressableProps, StyleProp, ViewStyle } from 'react-native';
-import type { TextProps } from 'src/components/Text/Text.types';
-import type { IconProps, IconName } from '../../components/Icon';
-import type { SpinnerProps } from '../../temp-components/Spinner';
-export declare enum ButtonBaseSize {
-    /**
-     * Represents a small button size (32px).
-     */
-    Sm = "32",
-    /**
-     * Represents a medium button size (40px).
-     */
-    Md = "40",
-    /**
-     * Represents a large button size (48px).
-     */
-    Lg = "48"
-}
+import type { ButtonBaseSize } from '../../types';
+import type { IconProps, IconName } from '../Icon';
+import type { SpinnerProps } from '../temp-components/Spinner';
+import type { TextProps } from '../Text';
 /**
  * ButtonBase component props.
  */
@@ -31,11 +19,13 @@ export type ButtonBaseProps = {
     /**
      * Optional prop to control the size of the ButtonBase
      * Possible values: ButtonBaseSize.Sm (32px), ButtonBaseSize.Md (40px), ButtonBaseSize.Lg (48px)
+     *
      * @default ButtonBaseSize.Lg
      */
     size?: ButtonBaseSize;
     /**
      * Optional prop that when true, shows a loading spinner
+     *
      * @default false
      */
     isLoading?: boolean;
@@ -73,11 +63,13 @@ export type ButtonBaseProps = {
     endAccessory?: React.ReactNode;
     /**
      * Optional prop that when true, disables the button
+     *
      * @default false
      */
     isDisabled?: boolean;
     /**
      * Optional prop that when true, makes the button take up the full width of its container
+     *
      * @default false
      */
     isFullWidth?: boolean;

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

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonBase.types.d.ts","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.types.ts"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClD,OAAO,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AACnD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEzC;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG;IAC5B;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC;IACnC;;OAEG;IACH,SAAS,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE,UAAU,CAAC,CAAC;IACjD;;;;;OAKG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;IACrC;;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;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,GAAG,cAAc,CAAC"}

package/dist/components/ButtonBase/ButtonBase.types.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonBase.types.js","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { PressableProps, StyleProp, ViewStyle } from 'react-native';\n\nimport type { ButtonBaseSize } from '../../types';\nimport type { IconProps, IconName } from '../Icon';\nimport type { SpinnerProps } from '../temp-components/Spinner';\nimport type { TextProps } from '../Text';\n\n/**\n * ButtonBase component props.\n */\nexport type ButtonBaseProps = {\n  /**\n   * Required prop for the content to be rendered within the ButtonBase\n   */\n  children: React.ReactNode | string;\n  /**\n   * Optional props to be passed to the Text component when children is a string\n   */\n  textProps?: Omit<Partial<TextProps>, 'children'>;\n  /**\n   * Optional prop to control the size of the ButtonBase\n   * Possible values: ButtonBaseSize.Sm (32px), ButtonBaseSize.Md (40px), ButtonBaseSize.Lg (48px)\n   *\n   * @default ButtonBaseSize.Lg\n   */\n  size?: ButtonBaseSize;\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 prop to pass additional properties to the end icon\n   */\n  spinnerProps?: Partial<SpinnerProps>;\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 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 prop to add twrnc overriding classNames.\n   */\n  twClassName?: string;\n  /**\n   * Optional prop to control the style.\n   */\n  style?: StyleProp<ViewStyle>;\n} & PressableProps;\n"]}

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

@@ -0,0 +1,4 @@
+export { ButtonBaseSize } from '../../types';
+export { ButtonBase } from './ButtonBase';
+export type { ButtonBaseProps } from './ButtonBase.types';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ButtonBase/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/components/ButtonBase/index.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ButtonBase/index.ts"],"names":[],"mappings":";;;AAAA,qCAA6C;AAApC,uGAAA,cAAc,OAAA;AACvB,2CAA0C;AAAjC,wGAAA,UAAU,OAAA","sourcesContent":["export { ButtonBaseSize } from '../../types';\nexport { ButtonBase } from './ButtonBase';\nexport type { ButtonBaseProps } from './ButtonBase.types';\n"]}

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

@@ -1,6 +1,9 @@
+import { ButtonIconSize } from '../../types';
 import { IconSize } from '../Icon';
-import { ButtonIconSize } from './ButtonIcon.types';
-import type { ButtonIconProps } from './ButtonIcon.types';
-export declare const MAPPING_BUTTONICONSIZE_ICONSIZE: Record<ButtonIconSize, IconSize>;
-export declare const DEFAULT_BUTTONICON_PROPS: Pick<ButtonIconProps, 'iconName' | 'size' | 'isDisabled' | 'isInverse' | 'isFloating'>;
+export declare const TWCLASSMAP_BUTTONICON_SIZE_DIMENSION: {
+    sm: string;
+    md: string;
+    lg: string;
+};
+export declare const MAP_BUTTONICON_SIZE_ICONSIZE: Record<ButtonIconSize, IconSize>;
 //# sourceMappingURL=ButtonIcon.constants.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ButtonIcon.constants.d.ts","sourceRoot":"","sources":["../../../src/components/ButtonIcon/ButtonIcon.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAY,MAAM,SAAS,CAAC;AAC7C,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAG1D,eAAO,MAAM,+BAA+B,EAAE,MAAM,CAAC,cAAc,EAAE,QAAQ,CAK1E,CAAC;AAGJ,eAAO,MAAM,wBAAwB,EAAE,IAAI,CACzC,eAAe,EACf,UAAU,GAAG,MAAM,GAAG,YAAY,GAAG,WAAW,GAAG,YAAY,CAOhE,CAAC"}
+{"version":3,"file":"ButtonIcon.constants.d.ts","sourceRoot":"","sources":["../../../src/components/ButtonIcon/ButtonIcon.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAGnC,eAAO,MAAM,oCAAoC;;;;CAIhD,CAAC;AAEF,eAAO,MAAM,4BAA4B,EAAE,MAAM,CAAC,cAAc,EAAE,QAAQ,CAIzE,CAAC"}

package/dist/components/ButtonIcon/ButtonIcon.constants.js

@@ -1,20 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DEFAULT_BUTTONICON_PROPS = exports.MAPPING_BUTTONICONSIZE_ICONSIZE = void 0;
+exports.MAP_BUTTONICON_SIZE_ICONSIZE = exports.TWCLASSMAP_BUTTONICON_SIZE_DIMENSION = void 0;
+const types_1 = require("../../types");
 const Icon_1 = require("../Icon");
-const ButtonIcon_types_1 = require("./ButtonIcon.types");
 // Mappings
-exports.MAPPING_BUTTONICONSIZE_ICONSIZE = {
-    [ButtonIcon_types_1.ButtonIconSize.Sm]: Icon_1.IconSize.Sm,
-    [ButtonIcon_types_1.ButtonIconSize.Md]: Icon_1.IconSize.Md,
-    [ButtonIcon_types_1.ButtonIconSize.Lg]: Icon_1.IconSize.Lg,
+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',
 };
-// Defaults
-exports.DEFAULT_BUTTONICON_PROPS = {
-    iconName: Icon_1.IconName.Close,
-    size: ButtonIcon_types_1.ButtonIconSize.Md,
-    isDisabled: false,
-    isInverse: false,
-    isFloating: false,
+exports.MAP_BUTTONICON_SIZE_ICONSIZE = {
+    [types_1.ButtonIconSize.Sm]: Icon_1.IconSize.Sm,
+    [types_1.ButtonIconSize.Md]: Icon_1.IconSize.Md,
+    [types_1.ButtonIconSize.Lg]: Icon_1.IconSize.Lg,
 };
 //# sourceMappingURL=ButtonIcon.constants.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ButtonIcon.constants.js","sourceRoot":"","sources":["../../../src/components/ButtonIcon/ButtonIcon.constants.ts"],"names":[],"mappings":";;;AAAA,kCAA6C;AAC7C,yDAAoD;AAGpD,WAAW;AACE,QAAA,+BAA+B,GAC1C;IACE,CAAC,iCAAc,CAAC,EAAE,CAAC,EAAE,eAAQ,CAAC,EAAE;IAChC,CAAC,iCAAc,CAAC,EAAE,CAAC,EAAE,eAAQ,CAAC,EAAE;IAChC,CAAC,iCAAc,CAAC,EAAE,CAAC,EAAE,eAAQ,CAAC,EAAE;CACjC,CAAC;AAEJ,WAAW;AACE,QAAA,wBAAwB,GAGjC;IACF,QAAQ,EAAE,eAAQ,CAAC,KAAK;IACxB,IAAI,EAAE,iCAAc,CAAC,EAAE;IACvB,UAAU,EAAE,KAAK;IACjB,SAAS,EAAE,KAAK;IAChB,UAAU,EAAE,KAAK;CAClB,CAAC","sourcesContent":["import { IconSize, IconName } from '../Icon';\nimport { ButtonIconSize } from './ButtonIcon.types';\nimport type { ButtonIconProps } from './ButtonIcon.types';\n\n// Mappings\nexport const MAPPING_BUTTONICONSIZE_ICONSIZE: Record<ButtonIconSize, IconSize> =\n  {\n    [ButtonIconSize.Sm]: IconSize.Sm,\n    [ButtonIconSize.Md]: IconSize.Md,\n    [ButtonIconSize.Lg]: IconSize.Lg,\n  };\n\n// Defaults\nexport const DEFAULT_BUTTONICON_PROPS: Pick<\n  ButtonIconProps,\n  'iconName' | 'size' | 'isDisabled' | 'isInverse' | 'isFloating'\n> = {\n  iconName: IconName.Close,\n  size: ButtonIconSize.Md,\n  isDisabled: false,\n  isInverse: false,\n  isFloating: false,\n};\n"]}
+{"version":3,"file":"ButtonIcon.constants.js","sourceRoot":"","sources":["../../../src/components/ButtonIcon/ButtonIcon.constants.ts"],"names":[],"mappings":";;;AAAA,uCAA6C;AAC7C,kCAAmC;AAEnC,WAAW;AACE,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;CACjC,CAAC;AAEW,QAAA,4BAA4B,GAAqC;IAC5E,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;CACjC,CAAC","sourcesContent":["import { ButtonIconSize } from '../../types';\nimport { IconSize } from '../Icon';\n\n// Mappings\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};\n\nexport const MAP_BUTTONICON_SIZE_ICONSIZE: Record<ButtonIconSize, IconSize> = {\n  [ButtonIconSize.Sm]: IconSize.Sm,\n  [ButtonIconSize.Md]: IconSize.Md,\n  [ButtonIconSize.Lg]: IconSize.Lg,\n};\n"]}

package/dist/components/ButtonIcon/ButtonIcon.d.ts

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

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

@@ -1 +1 @@
-{"version":3,"file":"ButtonIcon.d.ts","sourceRoot":"","sources":["../../../src/components/ButtonIcon/ButtonIcon.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAUjD,OAAO,KAAK,EAAE,eAAe,EAAkB,MAAM,oBAAoB,CAAC;AAM1E,QAAA,MAAM,UAAU,0HAYb,eAAe,sBAgDjB,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"ButtonIcon.d.ts","sourceRoot":"","sources":["../../../src/components/ButtonIcon/ButtonIcon.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAYxC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAE1D,eAAO,MAAM,UAAU,0HAYpB,eAAe,sBA0CjB,CAAC"}

package/dist/components/ButtonIcon/ButtonIcon.js

@@ -22,40 +22,25 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-/* eslint-disable @typescript-eslint/prefer-nullish-coalescing */
+exports.ButtonIcon = void 0;
 const design_system_twrnc_preset_1 = require("@metamask-previews/design-system-twrnc-preset");
 const react_1 = __importStar(require("react"));
-const ButtonAnimated_1 = __importDefault(require("../../primitives/ButtonAnimated"));
-const Icon_1 = __importDefault(require("../Icon"));
+const types_1 = require("../../types");
+const Icon_1 = require("../Icon");
+const ButtonAnimated_1 = require("../temp-components/ButtonAnimated");
 const ButtonIcon_constants_1 = require("./ButtonIcon.constants");
-const ButtonIcon_utilities_1 = require("./ButtonIcon.utilities");
-const ButtonIcon = ({ size = ButtonIcon_constants_1.DEFAULT_BUTTONICON_PROPS.size, iconName, iconProps, isDisabled = ButtonIcon_constants_1.DEFAULT_BUTTONICON_PROPS.isDisabled, isInverse = ButtonIcon_constants_1.DEFAULT_BUTTONICON_PROPS.isInverse, isFloating = ButtonIcon_constants_1.DEFAULT_BUTTONICON_PROPS.isFloating, onPressIn, onPressOut, twClassName, style, ...props }) => {
+const ButtonIcon = ({ size = types_1.ButtonIconSize.Md, iconName, iconProps, isDisabled = false, isInverse = false, isFloating = false, onPressIn, onPressOut, twClassName = '', style, ...props }) => {
     const [isPressed, setIsPressed] = (0, react_1.useState)(false);
     const tw = (0, design_system_twrnc_preset_1.useTailwind)();
-    const twContainerClassNames = (0, react_1.useMemo)(() => {
-        return (0, ButtonIcon_utilities_1.generateButtonIconContainerClassNames)({
-            isDisabled,
-            isPressed,
-            isFloating,
-            size,
-            twClassName,
-        });
-    }, [isDisabled, isPressed, isFloating, size, twClassName]);
-    const twIconColorClassNames = (0, react_1.useMemo)(() => {
-        return (0, ButtonIcon_utilities_1.generateButtonIconIconColorClassNames)({
-            isInverse,
-            isFloating,
-        });
-    }, [isInverse, isFloating]);
-    const finalIconProps = {
-        color: twIconColorClassNames,
-        size: ButtonIcon_constants_1.MAPPING_BUTTONICONSIZE_ICONSIZE[size],
-        ...iconProps,
-    };
+    const twContainerClassNames = `
+    items-center justify-center
+    ${ButtonIcon_constants_1.TWCLASSMAP_BUTTONICON_SIZE_DIMENSION[size]}
+    ${isFloating ? 'rounded-full' : 'rounded-sm'}
+    ${isFloating ? 'bg-icon-default' : isPressed ? 'bg-background-pressed' : 'bg-transparent'}
+    ${isDisabled ? 'opacity-50' : 'opacity-100'}
+    ${twClassName}`;
+    const twIconColorClassNames = isInverse || isFloating ? 'text-primary-inverse' : 'text-icon-default';
     const onPressInHandler = (event) => {
         setIsPressed(true);
         onPressIn?.(event);
@@ -64,9 +49,9 @@ const ButtonIcon = ({ size = ButtonIcon_constants_1.DEFAULT_BUTTONICON_PROPS.siz
         setIsPressed(false);
         onPressOut?.(event);
     };
-    return (<ButtonAnimated_1.default disabled={isDisabled} onPressIn={onPressInHandler} onPressOut={onPressOutHandler} accessible style={[tw `${twContainerClassNames}`, style]} testID="button-icon" {...props}>
-      <Icon_1.default name={iconName} {...finalIconProps}/>
-    </ButtonAnimated_1.default>);
+    return (<ButtonAnimated_1.ButtonAnimated disabled={isDisabled} onPressIn={onPressInHandler} onPressOut={onPressOutHandler} accessible style={[tw `${twContainerClassNames}`, style]} testID="button-icon" {...props}>
+      <Icon_1.Icon name={iconName} color={twIconColorClassNames} size={ButtonIcon_constants_1.MAP_BUTTONICON_SIZE_ICONSIZE[size]} {...iconProps}/>
+    </ButtonAnimated_1.ButtonAnimated>);
 };
-exports.default = ButtonIcon;
+exports.ButtonIcon = ButtonIcon;
 //# sourceMappingURL=ButtonIcon.js.map