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

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}/>

package/dist/components/ButtonIcon/ButtonIcon.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonIcon.mjs","sourceRoot":"","sources":["../../../src/components/ButtonIcon/ButtonIcon.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,WAAW,EAAE,sDAAsD;AAC5E,OAAO,QAAO,EAAE,QAAQ,EAAE,cAAc;;AAGxC,OAAO,EAAE,cAAc,EAAE,8BAAoB;AAE7C,OAAO,EAAE,IAAI,EAAE,0BAAgB;AAC/B,OAAO,EAAE,cAAc,EAAE,oDAA0C;AAEnE,OAAO,EACL,4BAA4B,EAC5B,oCAAoC,EACrC,mCAA+B;AAGhC,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EACzB,IAAI,GAAG,cAAc,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,QAAQ,CAAC,KAAK,CAAC,CAAC;IAClD,MAAM,EAAE,GAAG,WAAW,EAAE,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,cAAc,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,oCAAoC,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,IAAI,CACH,IAAI,CAAC,CAAC,QAAQ,CAAC,CACf,KAAK,CAAC,CAAC,qBAAkC,CAAC,CAC1C,IAAI,CAAC,CAAC,4BAA4B,CAAC,IAAI,CAAC,CAAC,CACzC,IAAI,SAAS,CAAC,EAElB;IAAA,EAAE,cAAc,CAAC,CAClB,CAAC;AACJ,CAAC,CAAC","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.mjs","sourceRoot":"","sources":["../../../src/components/ButtonIcon/ButtonIcon.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,WAAW,EAAE,sDAAsD;AAC5E,OAAO,QAAO,EAAE,QAAQ,EAAE,cAAc;;AAGxC,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAE,8BAAoB;AAEhE,OAAO,EAAE,IAAI,EAAE,0BAAgB;AAC/B,OAAO,EAAE,cAAc,EAAE,oDAA0C;AAEnE,OAAO,EACL,4BAA4B,EAC5B,oCAAoC,EACrC,mCAA+B;AAGhC,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EACzB,IAAI,GAAG,cAAc,CAAC,EAAE,EACxB,QAAQ,EACR,SAAS,EACT,UAAU,GAAG,KAAK,EAClB,OAAO,GAAG,iBAAiB,CAAC,OAAO,EACnC,SAAS,EACT,UAAU,EACV,WAAW,EACX,KAAK,EACL,GAAG,KAAK,EACQ,EAAE,EAAE;IACpB,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAClD,MAAM,EAAE,GAAG,WAAW,EAAE,CAAC;IAEzB,IAAI,eAAe,GAAG,gBAAgB,CAAC;IACvC,IAAI,OAAO,KAAK,iBAAiB,CAAC,QAAQ,EAAE;QAC1C,eAAe,GAAG,iBAAiB,CAAC;KACrC;SAAM,IAAI,OAAO,KAAK,iBAAiB,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,iBAAiB,CAAC,QAAQ;QACpC,CAAC,CAAC,sBAAsB;QACxB,CAAC,CAAC,mBAAmB,CAAC;IAE1B,MAAM,iBAAiB,GACrB,OAAO,KAAK,iBAAiB,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,cAAc,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,oCAAoC,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,IAAI,CACH,IAAI,CAAC,CAAC,QAAQ,CAAC,CACf,KAAK,CAAC,CAAC,qBAAkC,CAAC,CAC1C,IAAI,CAAC,CAAC,4BAA4B,CAAC,IAAI,CAAC,CAAC,CACzC,IAAI,SAAS,CAAC,EAElB;IAAA,EAAE,cAAc,CAAC,CAClB,CAAC;AACJ,CAAC,CAAC","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.types.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonIcon.types.cjs","sourceRoot":"","sources":["../../../src/components/ButtonIcon/ButtonIcon.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { StyleProp, ViewStyle } from 'react-native';\n\nimport type { ButtonIconSize } from '../../types';\nimport type { IconProps, IconName } from '../Icon';\nimport type { ButtonAnimatedProps } from '../temp-components/ButtonAnimated';\n\n/**\n * ButtonIcon component props.\n */\nexport type ButtonIconProps = {\n  /**\n   * Optional prop to control the size of the icon\n   * Different sizes map to specific pixel dimensions\n   *\n   * @default IconSize.Md\n   */\n  size?: ButtonIconSize;\n  /**\n   * Optional prop to specify an icon to show\n   */\n  iconName: IconName;\n  /**\n   * Optional prop to pass additional properties to the icon\n   */\n  iconProps?: Partial<IconProps>;\n  /**\n   * Optional prop that when true, disables the button\n   *\n   * @default false\n   */\n  isDisabled?: 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  /**\n   * Optional prop to show the floating/contained state of the button, which is reserved for floating buttons.\n   * Note: This prop provides styling only. There is no positioning logic.\n   *\n   * @default false\n   */\n  isFloating?: 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} & Omit<ButtonAnimatedProps, 'children'>;\n"]}
+{"version":3,"file":"ButtonIcon.types.cjs","sourceRoot":"","sources":["../../../src/components/ButtonIcon/ButtonIcon.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { StyleProp, ViewStyle } from 'react-native';\n\nimport type { ButtonIconSize, ButtonIconVariant } from '../../types';\nimport type { IconProps, IconName } from '../Icon';\nimport type { ButtonAnimatedProps } from '../temp-components/ButtonAnimated';\n\n/**\n * ButtonIcon component props.\n */\nexport type ButtonIconProps = {\n  /**\n   * Optional prop to control the size of the icon\n   * Different sizes map to specific pixel dimensions\n   *\n   * @default IconSize.Md\n   */\n  size?: ButtonIconSize;\n  /**\n   * Optional prop to specify an icon to show\n   */\n  iconName: IconName;\n  /**\n   * Optional prop to pass additional properties to the icon\n   */\n  iconProps?: Partial<IconProps>;\n  /**\n   * Optional prop that when true, disables the button\n   *\n   * @default false\n   */\n  isDisabled?: boolean;\n  /**\n   * Optional prop to control the visual variant of the button.\n   *\n   * @default ButtonIconVariant.Default\n   */\n  variant?: ButtonIconVariant;\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} & Omit<ButtonAnimatedProps, 'children'>;\n"]}

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

@@ -1,5 +1,5 @@
 import type { StyleProp, ViewStyle } from "react-native/index.js";
-import type { ButtonIconSize } from "../../types/index.cjs";
+import type { ButtonIconSize, ButtonIconVariant } from "../../types/index.cjs";
 import type { IconProps, IconName } from "../Icon/index.cjs";
 import type { ButtonAnimatedProps } from "../temp-components/ButtonAnimated/index.cjs";
 /**
@@ -28,18 +28,11 @@ export type ButtonIconProps = {
      */
     isDisabled?: boolean;
     /**
-     * Optional prop to show the inverse state of the button, which is reserved for buttons on colored backgrounds.
+     * Optional prop to control the visual variant of the button.
      *
-     * @default false
-     */
-    isInverse?: boolean;
-    /**
-     * Optional prop to show the floating/contained state of the button, which is reserved for floating buttons.
-     * Note: This prop provides styling only. There is no positioning logic.
-     *
-     * @default false
+     * @default ButtonIconVariant.Default
      */
-    isFloating?: boolean;
+    variant?: ButtonIconVariant;
     /**
      * Optional prop to add twrnc overriding classNames.
      */

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

@@ -1 +1 @@
-{"version":3,"file":"ButtonIcon.types.d.cts","sourceRoot":"","sources":["../../../src/components/ButtonIcon/ButtonIcon.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,8BAAqB;AAEzD,OAAO,KAAK,EAAE,cAAc,EAAE,8BAAoB;AAClD,OAAO,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,0BAAgB;AACnD,OAAO,KAAK,EAAE,mBAAmB,EAAE,oDAA0C;AAE7E;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG;IAC5B;;;;;OAKG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB;;OAEG;IACH,QAAQ,EAAE,QAAQ,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IAC/B;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,GAAG,IAAI,CAAC,mBAAmB,EAAE,UAAU,CAAC,CAAC"}
+{"version":3,"file":"ButtonIcon.types.d.cts","sourceRoot":"","sources":["../../../src/components/ButtonIcon/ButtonIcon.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,8BAAqB;AAEzD,OAAO,KAAK,EAAE,cAAc,EAAE,iBAAiB,EAAE,8BAAoB;AACrE,OAAO,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,0BAAgB;AACnD,OAAO,KAAK,EAAE,mBAAmB,EAAE,oDAA0C;AAE7E;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG;IAC5B;;;;;OAKG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB;;OAEG;IACH,QAAQ,EAAE,QAAQ,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IAC/B;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,GAAG,IAAI,CAAC,mBAAmB,EAAE,UAAU,CAAC,CAAC"}

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

@@ -1,5 +1,5 @@
 import type { StyleProp, ViewStyle } from "react-native/index.js";
-import type { ButtonIconSize } from "../../types/index.mjs";
+import type { ButtonIconSize, ButtonIconVariant } from "../../types/index.mjs";
 import type { IconProps, IconName } from "../Icon/index.mjs";
 import type { ButtonAnimatedProps } from "../temp-components/ButtonAnimated/index.mjs";
 /**
@@ -28,18 +28,11 @@ export type ButtonIconProps = {
      */
     isDisabled?: boolean;
     /**
-     * Optional prop to show the inverse state of the button, which is reserved for buttons on colored backgrounds.
+     * Optional prop to control the visual variant of the button.
      *
-     * @default false
-     */
-    isInverse?: boolean;
-    /**
-     * Optional prop to show the floating/contained state of the button, which is reserved for floating buttons.
-     * Note: This prop provides styling only. There is no positioning logic.
-     *
-     * @default false
+     * @default ButtonIconVariant.Default
      */
-    isFloating?: boolean;
+    variant?: ButtonIconVariant;
     /**
      * Optional prop to add twrnc overriding classNames.
      */

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

@@ -1 +1 @@
-{"version":3,"file":"ButtonIcon.types.d.mts","sourceRoot":"","sources":["../../../src/components/ButtonIcon/ButtonIcon.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,8BAAqB;AAEzD,OAAO,KAAK,EAAE,cAAc,EAAE,8BAAoB;AAClD,OAAO,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,0BAAgB;AACnD,OAAO,KAAK,EAAE,mBAAmB,EAAE,oDAA0C;AAE7E;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG;IAC5B;;;;;OAKG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB;;OAEG;IACH,QAAQ,EAAE,QAAQ,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IAC/B;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,GAAG,IAAI,CAAC,mBAAmB,EAAE,UAAU,CAAC,CAAC"}
+{"version":3,"file":"ButtonIcon.types.d.mts","sourceRoot":"","sources":["../../../src/components/ButtonIcon/ButtonIcon.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,8BAAqB;AAEzD,OAAO,KAAK,EAAE,cAAc,EAAE,iBAAiB,EAAE,8BAAoB;AACrE,OAAO,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,0BAAgB;AACnD,OAAO,KAAK,EAAE,mBAAmB,EAAE,oDAA0C;AAE7E;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG;IAC5B;;;;;OAKG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB;;OAEG;IACH,QAAQ,EAAE,QAAQ,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IAC/B;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,GAAG,IAAI,CAAC,mBAAmB,EAAE,UAAU,CAAC,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"ButtonIcon.types.mjs","sourceRoot":"","sources":["../../../src/components/ButtonIcon/ButtonIcon.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { StyleProp, ViewStyle } from 'react-native';\n\nimport type { ButtonIconSize } from '../../types';\nimport type { IconProps, IconName } from '../Icon';\nimport type { ButtonAnimatedProps } from '../temp-components/ButtonAnimated';\n\n/**\n * ButtonIcon component props.\n */\nexport type ButtonIconProps = {\n  /**\n   * Optional prop to control the size of the icon\n   * Different sizes map to specific pixel dimensions\n   *\n   * @default IconSize.Md\n   */\n  size?: ButtonIconSize;\n  /**\n   * Optional prop to specify an icon to show\n   */\n  iconName: IconName;\n  /**\n   * Optional prop to pass additional properties to the icon\n   */\n  iconProps?: Partial<IconProps>;\n  /**\n   * Optional prop that when true, disables the button\n   *\n   * @default false\n   */\n  isDisabled?: 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  /**\n   * Optional prop to show the floating/contained state of the button, which is reserved for floating buttons.\n   * Note: This prop provides styling only. There is no positioning logic.\n   *\n   * @default false\n   */\n  isFloating?: 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} & Omit<ButtonAnimatedProps, 'children'>;\n"]}
+{"version":3,"file":"ButtonIcon.types.mjs","sourceRoot":"","sources":["../../../src/components/ButtonIcon/ButtonIcon.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { StyleProp, ViewStyle } from 'react-native';\n\nimport type { ButtonIconSize, ButtonIconVariant } from '../../types';\nimport type { IconProps, IconName } from '../Icon';\nimport type { ButtonAnimatedProps } from '../temp-components/ButtonAnimated';\n\n/**\n * ButtonIcon component props.\n */\nexport type ButtonIconProps = {\n  /**\n   * Optional prop to control the size of the icon\n   * Different sizes map to specific pixel dimensions\n   *\n   * @default IconSize.Md\n   */\n  size?: ButtonIconSize;\n  /**\n   * Optional prop to specify an icon to show\n   */\n  iconName: IconName;\n  /**\n   * Optional prop to pass additional properties to the icon\n   */\n  iconProps?: Partial<IconProps>;\n  /**\n   * Optional prop that when true, disables the button\n   *\n   * @default false\n   */\n  isDisabled?: boolean;\n  /**\n   * Optional prop to control the visual variant of the button.\n   *\n   * @default ButtonIconVariant.Default\n   */\n  variant?: ButtonIconVariant;\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} & Omit<ButtonAnimatedProps, 'children'>;\n"]}

package/dist/components/ButtonIcon/index.cjs

@@ -1,8 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ButtonIcon = exports.ButtonIconSize = void 0;
+exports.ButtonIcon = exports.ButtonIconVariant = exports.ButtonIconSize = void 0;
 var types_1 = require("../../types/index.cjs");
 Object.defineProperty(exports, "ButtonIconSize", { enumerable: true, get: function () { return types_1.ButtonIconSize; } });
+Object.defineProperty(exports, "ButtonIconVariant", { enumerable: true, get: function () { return types_1.ButtonIconVariant; } });
 var ButtonIcon_1 = require("./ButtonIcon.cjs");
 Object.defineProperty(exports, "ButtonIcon", { enumerable: true, get: function () { return ButtonIcon_1.ButtonIcon; } });
 //# sourceMappingURL=index.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sourceRoot":"","sources":["../../../src/components/ButtonIcon/index.ts"],"names":[],"mappings":";;;AAAA,+CAA6C;AAApC,uGAAA,cAAc,OAAA;AACvB,+CAA0C;AAAjC,wGAAA,UAAU,OAAA","sourcesContent":["export { ButtonIconSize } from '../../types';\nexport { ButtonIcon } from './ButtonIcon';\nexport type { ButtonIconProps } from './ButtonIcon.types';\n"]}
+{"version":3,"file":"index.cjs","sourceRoot":"","sources":["../../../src/components/ButtonIcon/index.ts"],"names":[],"mappings":";;;AAAA,+CAAgE;AAAvD,uGAAA,cAAc,OAAA;AAAE,0GAAA,iBAAiB,OAAA;AAC1C,+CAA0C;AAAjC,wGAAA,UAAU,OAAA","sourcesContent":["export { ButtonIconSize, ButtonIconVariant } from '../../types';\nexport { ButtonIcon } from './ButtonIcon';\nexport type { ButtonIconProps } from './ButtonIcon.types';\n"]}

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

@@ -1,4 +1,4 @@
-export { ButtonIconSize } from "../../types/index.cjs";
+export { ButtonIconSize, ButtonIconVariant } from "../../types/index.cjs";
 export { ButtonIcon } from "./ButtonIcon.cjs";
 export type { ButtonIconProps } from "./ButtonIcon.types.cjs";
 //# sourceMappingURL=index.d.cts.map

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

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

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

@@ -1,4 +1,4 @@
-export { ButtonIconSize } from "../../types/index.mjs";
+export { ButtonIconSize, ButtonIconVariant } from "../../types/index.mjs";
 export { ButtonIcon } from "./ButtonIcon.mjs";
 export type { ButtonIconProps } from "./ButtonIcon.types.mjs";
 //# sourceMappingURL=index.d.mts.map

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

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

package/dist/components/ButtonIcon/index.mjs

@@ -1,3 +1,3 @@
-export { ButtonIconSize } from "../../types/index.mjs";
+export { ButtonIconSize, ButtonIconVariant } from "../../types/index.mjs";
 export { ButtonIcon } from "./ButtonIcon.mjs";
 //# sourceMappingURL=index.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sourceRoot":"","sources":["../../../src/components/ButtonIcon/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,8BAAoB;AAC7C,OAAO,EAAE,UAAU,EAAE,yBAAqB","sourcesContent":["export { ButtonIconSize } from '../../types';\nexport { ButtonIcon } from './ButtonIcon';\nexport type { ButtonIconProps } from './ButtonIcon.types';\n"]}
+{"version":3,"file":"index.mjs","sourceRoot":"","sources":["../../../src/components/ButtonIcon/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAE,8BAAoB;AAChE,OAAO,EAAE,UAAU,EAAE,yBAAqB","sourcesContent":["export { ButtonIconSize, ButtonIconVariant } from '../../types';\nexport { ButtonIcon } from './ButtonIcon';\nexport type { ButtonIconProps } from './ButtonIcon.types';\n"]}

package/dist/components/ButtonSemantic/ButtonSemantic.cjs

@@ -0,0 +1,64 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ButtonSemantic = void 0;
+const react_1 = __importStar(require("react"));
+const ButtonBase_1 = require("../ButtonBase/index.cjs");
+const Icon_1 = require("../Icon/index.cjs");
+const Text_1 = require("../Text/index.cjs");
+const ButtonSemantic_constants_1 = require("./ButtonSemantic.constants.cjs");
+const ButtonSemantic_types_1 = require("./ButtonSemantic.types.cjs");
+const ButtonSemantic = ({ severity, children, textProps, spinnerProps, startIconProps, endIconProps, isLoading = false, twClassName = '', style, ...props }) => {
+    const getContainerClassName = (0, react_1.useCallback)((pressed) => {
+        const classNameStr = typeof twClassName === 'function' ? twClassName(pressed) : twClassName;
+        const bgClass = pressed || isLoading
+            ? (ButtonSemantic_constants_1.TWCLASSMAP_BUTTONSEMANTIC_BG_PRESSED[severity] ??
+                ButtonSemantic_constants_1.TWCLASSMAP_BUTTONSEMANTIC_BG_PRESSED[ButtonSemantic_types_1.ButtonSemanticSeverity.Success])
+            : (ButtonSemantic_constants_1.TWCLASSMAP_BUTTONSEMANTIC_BG[severity] ??
+                ButtonSemantic_constants_1.TWCLASSMAP_BUTTONSEMANTIC_BG[ButtonSemantic_types_1.ButtonSemanticSeverity.Success]);
+        return `${bgClass} ${classNameStr}`;
+    }, [severity, isLoading, twClassName]);
+    const getTextClassName = (0, react_1.useCallback)((_pressed) => ButtonSemantic_constants_1.TWCLASSMAP_BUTTONSEMANTIC_TEXT[severity] ??
+        ButtonSemantic_constants_1.TWCLASSMAP_BUTTONSEMANTIC_TEXT[ButtonSemantic_types_1.ButtonSemanticSeverity.Success], [severity]);
+    return (<ButtonBase_1.ButtonBase textProps={{
+            variant: Text_1.TextVariant.BodyMd,
+            fontWeight: Text_1.FontWeight.Medium,
+            numberOfLines: 1,
+            ellipsizeMode: 'clip',
+            ...textProps,
+        }} spinnerProps={{
+            ...spinnerProps,
+        }} startIconProps={{
+            size: Icon_1.IconSize.Sm,
+            ...startIconProps,
+        }} endIconProps={{
+            size: Icon_1.IconSize.Sm,
+            ...endIconProps,
+        }} isLoading={isLoading} twClassName={getContainerClassName} textClassName={getTextClassName} iconClassName={getTextClassName} style={style} {...props}>
+      {children}
+    </ButtonBase_1.ButtonBase>);
+};
+exports.ButtonSemantic = ButtonSemantic;
+//# sourceMappingURL=ButtonSemantic.cjs.map

package/dist/components/ButtonSemantic/ButtonSemantic.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonSemantic.cjs","sourceRoot":"","sources":["../../../src/components/ButtonSemantic/ButtonSemantic.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA2C;AAE3C,wDAA2C;AAC3C,4CAAmC;AACnC,4CAAkD;AAElD,6EAIoC;AAEpC,qEAAgE;AAEzD,MAAM,cAAc,GAAG,CAAC,EAC7B,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,cAAc,EACd,YAAY,EACZ,SAAS,GAAG,KAAK,EACjB,WAAW,GAAG,EAAE,EAChB,KAAK,EACL,GAAG,KAAK,EACY,EAAE,EAAE;IACxB,MAAM,qBAAqB,GAAG,IAAA,mBAAW,EACvC,CAAC,OAAgB,EAAU,EAAE;QAC3B,MAAM,YAAY,GAChB,OAAO,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC;QAEzE,MAAM,OAAO,GACX,OAAO,IAAI,SAAS;YAClB,CAAC,CAAC,CAAC,+DAAoC,CAAC,QAAQ,CAAC;gBAC/C,+DAAoC,CAClC,6CAAsB,CAAC,OAAO,CAC/B,CAAC;YACJ,CAAC,CAAC,CAAC,uDAA4B,CAAC,QAAQ,CAAC;gBACvC,uDAA4B,CAAC,6CAAsB,CAAC,OAAO,CAAC,CAAC,CAAC;QAEpE,OAAO,GAAG,OAAO,IAAI,YAAY,EAAE,CAAC;IACtC,CAAC,EACD,CAAC,QAAQ,EAAE,SAAS,EAAE,WAAW,CAAC,CACnC,CAAC;IAEF,MAAM,gBAAgB,GAAG,IAAA,mBAAW,EAClC,CAAC,QAAiB,EAAU,EAAE,CAC5B,yDAA8B,CAAC,QAAQ,CAAC;QACxC,yDAA8B,CAAC,6CAAsB,CAAC,OAAO,CAAC,EAChE,CAAC,QAAQ,CAAC,CACX,CAAC;IAEF,OAAO,CACL,CAAC,uBAAU,CACT,SAAS,CAAC,CAAC;YACT,OAAO,EAAE,kBAAW,CAAC,MAAM;YAC3B,UAAU,EAAE,iBAAU,CAAC,MAAM;YAC7B,aAAa,EAAE,CAAC;YAChB,aAAa,EAAE,MAAM;YACrB,GAAG,SAAS;SACb,CAAC,CACF,YAAY,CAAC,CAAC;YACZ,GAAG,YAAY;SAChB,CAAC,CACF,cAAc,CAAC,CAAC;YACd,IAAI,EAAE,eAAQ,CAAC,EAAE;YACjB,GAAG,cAAc;SAClB,CAAC,CACF,YAAY,CAAC,CAAC;YACZ,IAAI,EAAE,eAAQ,CAAC,EAAE;YACjB,GAAG,YAAY;SAChB,CAAC,CACF,SAAS,CAAC,CAAC,SAAS,CAAC,CACrB,WAAW,CAAC,CAAC,qBAAqB,CAAC,CACnC,aAAa,CAAC,CAAC,gBAAgB,CAAC,CAChC,aAAa,CAAC,CAAC,gBAAgB,CAAC,CAChC,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,IAAI,KAAK,CAAC,CAEV;MAAA,CAAC,QAAQ,CACX;IAAA,EAAE,uBAAU,CAAC,CACd,CAAC;AACJ,CAAC,CAAC;AApEW,QAAA,cAAc,kBAoEzB","sourcesContent":["import React, { useCallback } from 'react';\n\nimport { ButtonBase } from '../ButtonBase';\nimport { IconSize } from '../Icon';\nimport { TextVariant, FontWeight } from '../Text';\n\nimport {\n  TWCLASSMAP_BUTTONSEMANTIC_BG,\n  TWCLASSMAP_BUTTONSEMANTIC_BG_PRESSED,\n  TWCLASSMAP_BUTTONSEMANTIC_TEXT,\n} from './ButtonSemantic.constants';\nimport type { ButtonSemanticProps } from './ButtonSemantic.types';\nimport { ButtonSemanticSeverity } from './ButtonSemantic.types';\n\nexport const ButtonSemantic = ({\n  severity,\n  children,\n  textProps,\n  spinnerProps,\n  startIconProps,\n  endIconProps,\n  isLoading = false,\n  twClassName = '',\n  style,\n  ...props\n}: ButtonSemanticProps) => {\n  const getContainerClassName = useCallback(\n    (pressed: boolean): string => {\n      const classNameStr =\n        typeof twClassName === 'function' ? twClassName(pressed) : twClassName;\n\n      const bgClass =\n        pressed || isLoading\n          ? (TWCLASSMAP_BUTTONSEMANTIC_BG_PRESSED[severity] ??\n            TWCLASSMAP_BUTTONSEMANTIC_BG_PRESSED[\n              ButtonSemanticSeverity.Success\n            ])\n          : (TWCLASSMAP_BUTTONSEMANTIC_BG[severity] ??\n            TWCLASSMAP_BUTTONSEMANTIC_BG[ButtonSemanticSeverity.Success]);\n\n      return `${bgClass} ${classNameStr}`;\n    },\n    [severity, isLoading, twClassName],\n  );\n\n  const getTextClassName = useCallback(\n    (_pressed: boolean): string =>\n      TWCLASSMAP_BUTTONSEMANTIC_TEXT[severity] ??\n      TWCLASSMAP_BUTTONSEMANTIC_TEXT[ButtonSemanticSeverity.Success],\n    [severity],\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      }}\n      spinnerProps={{\n        ...spinnerProps,\n      }}\n      startIconProps={{\n        size: IconSize.Sm,\n        ...startIconProps,\n      }}\n      endIconProps={{\n        size: IconSize.Sm,\n        ...endIconProps,\n      }}\n      isLoading={isLoading}\n      twClassName={getContainerClassName}\n      textClassName={getTextClassName}\n      iconClassName={getTextClassName}\n      style={style}\n      {...props}\n    >\n      {children}\n    </ButtonBase>\n  );\n};\n"]}

package/dist/components/ButtonSemantic/ButtonSemantic.constants.cjs

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TWCLASSMAP_BUTTONSEMANTIC_TEXT = exports.TWCLASSMAP_BUTTONSEMANTIC_BG_PRESSED = exports.TWCLASSMAP_BUTTONSEMANTIC_BG = void 0;
+const ButtonSemantic_types_1 = require("./ButtonSemantic.types.cjs");
+exports.TWCLASSMAP_BUTTONSEMANTIC_BG = {
+    [ButtonSemantic_types_1.ButtonSemanticSeverity.Success]: 'bg-success-muted',
+    [ButtonSemantic_types_1.ButtonSemanticSeverity.Danger]: 'bg-error-muted',
+};
+exports.TWCLASSMAP_BUTTONSEMANTIC_BG_PRESSED = {
+    [ButtonSemantic_types_1.ButtonSemanticSeverity.Success]: 'bg-success-muted-pressed',
+    [ButtonSemantic_types_1.ButtonSemanticSeverity.Danger]: 'bg-error-muted-pressed',
+};
+exports.TWCLASSMAP_BUTTONSEMANTIC_TEXT = {
+    [ButtonSemantic_types_1.ButtonSemanticSeverity.Success]: 'text-success-default',
+    [ButtonSemantic_types_1.ButtonSemanticSeverity.Danger]: 'text-error-default',
+};
+//# sourceMappingURL=ButtonSemantic.constants.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonSemantic.constants.cjs","sourceRoot":"","sources":["../../../src/components/ButtonSemantic/ButtonSemantic.constants.ts"],"names":[],"mappings":";;;AAAA,qEAAgE;AAEnD,QAAA,4BAA4B,GAGrC;IACF,CAAC,6CAAsB,CAAC,OAAO,CAAC,EAAE,kBAAkB;IACpD,CAAC,6CAAsB,CAAC,MAAM,CAAC,EAAE,gBAAgB;CAClD,CAAC;AAEW,QAAA,oCAAoC,GAG7C;IACF,CAAC,6CAAsB,CAAC,OAAO,CAAC,EAAE,0BAA0B;IAC5D,CAAC,6CAAsB,CAAC,MAAM,CAAC,EAAE,wBAAwB;CAC1D,CAAC;AAEW,QAAA,8BAA8B,GAGvC;IACF,CAAC,6CAAsB,CAAC,OAAO,CAAC,EAAE,sBAAsB;IACxD,CAAC,6CAAsB,CAAC,MAAM,CAAC,EAAE,oBAAoB;CACtD,CAAC","sourcesContent":["import { ButtonSemanticSeverity } from './ButtonSemantic.types';\n\nexport const TWCLASSMAP_BUTTONSEMANTIC_BG: Record<\n  ButtonSemanticSeverity,\n  string\n> = {\n  [ButtonSemanticSeverity.Success]: 'bg-success-muted',\n  [ButtonSemanticSeverity.Danger]: 'bg-error-muted',\n};\n\nexport const TWCLASSMAP_BUTTONSEMANTIC_BG_PRESSED: Record<\n  ButtonSemanticSeverity,\n  string\n> = {\n  [ButtonSemanticSeverity.Success]: 'bg-success-muted-pressed',\n  [ButtonSemanticSeverity.Danger]: 'bg-error-muted-pressed',\n};\n\nexport const TWCLASSMAP_BUTTONSEMANTIC_TEXT: Record<\n  ButtonSemanticSeverity,\n  string\n> = {\n  [ButtonSemanticSeverity.Success]: 'text-success-default',\n  [ButtonSemanticSeverity.Danger]: 'text-error-default',\n};\n"]}

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

@@ -0,0 +1,5 @@
+import { ButtonSemanticSeverity } from "./ButtonSemantic.types.cjs";
+export declare const TWCLASSMAP_BUTTONSEMANTIC_BG: Record<ButtonSemanticSeverity, string>;
+export declare const TWCLASSMAP_BUTTONSEMANTIC_BG_PRESSED: Record<ButtonSemanticSeverity, string>;
+export declare const TWCLASSMAP_BUTTONSEMANTIC_TEXT: Record<ButtonSemanticSeverity, string>;
+//# sourceMappingURL=ButtonSemantic.constants.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonSemantic.constants.d.cts","sourceRoot":"","sources":["../../../src/components/ButtonSemantic/ButtonSemantic.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,mCAA+B;AAEhE,eAAO,MAAM,4BAA4B,EAAE,MAAM,CAC/C,sBAAsB,EACtB,MAAM,CAIP,CAAC;AAEF,eAAO,MAAM,oCAAoC,EAAE,MAAM,CACvD,sBAAsB,EACtB,MAAM,CAIP,CAAC;AAEF,eAAO,MAAM,8BAA8B,EAAE,MAAM,CACjD,sBAAsB,EACtB,MAAM,CAIP,CAAC"}

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

@@ -0,0 +1,5 @@
+import { ButtonSemanticSeverity } from "./ButtonSemantic.types.mjs";
+export declare const TWCLASSMAP_BUTTONSEMANTIC_BG: Record<ButtonSemanticSeverity, string>;
+export declare const TWCLASSMAP_BUTTONSEMANTIC_BG_PRESSED: Record<ButtonSemanticSeverity, string>;
+export declare const TWCLASSMAP_BUTTONSEMANTIC_TEXT: Record<ButtonSemanticSeverity, string>;
+//# sourceMappingURL=ButtonSemantic.constants.d.mts.map