@metamask-previews/design-system-react-native 0.22.0-preview.f515a62 → 0.24.0-preview.178e60f

package/dist/components/ButtonBase/ButtonBase.constants.cjs

@@ -1,10 +1,40 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION = void 0;
+exports.getButtonBaseHorizontalPaddingTwClasses = exports.getButtonBaseBorderRadiusTwClass = exports.MAP_BUTTONBASE_SIZE_TEXT_VARIANT = exports.MAP_BUTTONBASE_SIZE_ICONSIZE = exports.TWCLASSMAP_BUTTONBASE_BORDER_RADIUS = exports.TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION = void 0;
 const design_system_shared_1 = require("@metamask-previews/design-system-shared");
 exports.TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION = {
     [design_system_shared_1.ButtonBaseSize.Sm]: 'h-8',
     [design_system_shared_1.ButtonBaseSize.Md]: 'h-10',
     [design_system_shared_1.ButtonBaseSize.Lg]: 'h-12', // size (48px).
 };
+exports.TWCLASSMAP_BUTTONBASE_BORDER_RADIUS = {
+    [design_system_shared_1.ButtonBaseSize.Sm]: 'rounded-lg',
+    [design_system_shared_1.ButtonBaseSize.Md]: 'rounded-xl',
+    [design_system_shared_1.ButtonBaseSize.Lg]: 'rounded-xl', // 12px.
+};
+exports.MAP_BUTTONBASE_SIZE_ICONSIZE = {
+    [design_system_shared_1.ButtonBaseSize.Sm]: design_system_shared_1.IconSize.Sm,
+    [design_system_shared_1.ButtonBaseSize.Md]: design_system_shared_1.IconSize.Sm,
+    [design_system_shared_1.ButtonBaseSize.Lg]: design_system_shared_1.IconSize.Md,
+};
+exports.MAP_BUTTONBASE_SIZE_TEXT_VARIANT = {
+    [design_system_shared_1.ButtonBaseSize.Sm]: design_system_shared_1.TextVariant.BodySm,
+    [design_system_shared_1.ButtonBaseSize.Md]: design_system_shared_1.TextVariant.BodyMd,
+    [design_system_shared_1.ButtonBaseSize.Lg]: design_system_shared_1.TextVariant.BodyMd,
+};
+const getButtonBaseBorderRadiusTwClass = (size) => exports.TWCLASSMAP_BUTTONBASE_BORDER_RADIUS[size];
+exports.getButtonBaseBorderRadiusTwClass = getButtonBaseBorderRadiusTwClass;
+const getButtonBaseHorizontalPaddingTwClasses = (buttonSize, hasStart, hasEnd) => {
+    if (buttonSize !== design_system_shared_1.ButtonBaseSize.Lg || (hasStart && hasEnd)) {
+        return 'px-3';
+    }
+    if (!hasStart && !hasEnd) {
+        return 'px-4';
+    }
+    if (hasStart) {
+        return 'pl-3 pr-4';
+    }
+    return 'pl-4 pr-3';
+};
+exports.getButtonBaseHorizontalPaddingTwClasses = getButtonBaseHorizontalPaddingTwClasses;
 //# sourceMappingURL=ButtonBase.constants.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"ButtonBase.constants.cjs","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.constants.ts"],"names":[],"mappings":";;;AAAA,kFAAyE;AAE5D,QAAA,oCAAoC,GAG7C;IACF,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,KAAK;IAC1B,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,MAAM;IAC3B,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,eAAe;CAC7C,CAAC","sourcesContent":["import { ButtonBaseSize } from '@metamask-previews/design-system-shared';\n\nexport const TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION: Record<\n  ButtonBaseSize,\n  string\n> = {\n  [ButtonBaseSize.Sm]: 'h-8', // size (32px).\n  [ButtonBaseSize.Md]: 'h-10', // size (40px).\n  [ButtonBaseSize.Lg]: 'h-12', // size (48px).\n};\n"]}
+{"version":3,"file":"ButtonBase.constants.cjs","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.constants.ts"],"names":[],"mappings":";;;AAAA,kFAIiD;AAEpC,QAAA,oCAAoC,GAG7C;IACF,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,KAAK;IAC1B,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,MAAM;IAC3B,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,eAAe;CAC7C,CAAC;AAEW,QAAA,mCAAmC,GAG5C;IACF,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,YAAY;IACjC,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,YAAY;IACjC,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,YAAY,EAAE,QAAQ;CAC5C,CAAC;AAEW,QAAA,4BAA4B,GAAqC;IAC5E,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,+BAAQ,CAAC,EAAE;IAChC,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,+BAAQ,CAAC,EAAE;IAChC,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,+BAAQ,CAAC,EAAE;CACjC,CAAC;AAEW,QAAA,gCAAgC,GAGzC;IACF,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,kCAAW,CAAC,MAAM;IACvC,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,kCAAW,CAAC,MAAM;IACvC,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,kCAAW,CAAC,MAAM;CACxC,CAAC;AAEK,MAAM,gCAAgC,GAAG,CAC9C,IAAoB,EACZ,EAAE,CAAC,2CAAmC,CAAC,IAAI,CAAC,CAAC;AAF1C,QAAA,gCAAgC,oCAEU;AAEhD,MAAM,uCAAuC,GAAG,CACrD,UAA0B,EAC1B,QAAiB,EACjB,MAAe,EACP,EAAE;IACV,IAAI,UAAU,KAAK,qCAAc,CAAC,EAAE,IAAI,CAAC,QAAQ,IAAI,MAAM,CAAC,EAAE;QAC5D,OAAO,MAAM,CAAC;KACf;IACD,IAAI,CAAC,QAAQ,IAAI,CAAC,MAAM,EAAE;QACxB,OAAO,MAAM,CAAC;KACf;IACD,IAAI,QAAQ,EAAE;QACZ,OAAO,WAAW,CAAC;KACpB;IACD,OAAO,WAAW,CAAC;AACrB,CAAC,CAAC;AAfW,QAAA,uCAAuC,2CAelD","sourcesContent":["import {\n  ButtonBaseSize,\n  IconSize,\n  TextVariant,\n} from '@metamask-previews/design-system-shared';\n\nexport const TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION: Record<\n  ButtonBaseSize,\n  string\n> = {\n  [ButtonBaseSize.Sm]: 'h-8', // size (32px).\n  [ButtonBaseSize.Md]: 'h-10', // size (40px).\n  [ButtonBaseSize.Lg]: 'h-12', // size (48px).\n};\n\nexport const TWCLASSMAP_BUTTONBASE_BORDER_RADIUS: Record<\n  ButtonBaseSize,\n  string\n> = {\n  [ButtonBaseSize.Sm]: 'rounded-lg', // 8px.\n  [ButtonBaseSize.Md]: 'rounded-xl', // 12px.\n  [ButtonBaseSize.Lg]: 'rounded-xl', // 12px.\n};\n\nexport const MAP_BUTTONBASE_SIZE_ICONSIZE: Record<ButtonBaseSize, IconSize> = {\n  [ButtonBaseSize.Sm]: IconSize.Sm,\n  [ButtonBaseSize.Md]: IconSize.Sm,\n  [ButtonBaseSize.Lg]: IconSize.Md,\n};\n\nexport const MAP_BUTTONBASE_SIZE_TEXT_VARIANT: Record<\n  ButtonBaseSize,\n  TextVariant\n> = {\n  [ButtonBaseSize.Sm]: TextVariant.BodySm,\n  [ButtonBaseSize.Md]: TextVariant.BodyMd,\n  [ButtonBaseSize.Lg]: TextVariant.BodyMd,\n};\n\nexport const getButtonBaseBorderRadiusTwClass = (\n  size: ButtonBaseSize,\n): string => TWCLASSMAP_BUTTONBASE_BORDER_RADIUS[size];\n\nexport const getButtonBaseHorizontalPaddingTwClasses = (\n  buttonSize: ButtonBaseSize,\n  hasStart: boolean,\n  hasEnd: boolean,\n): string => {\n  if (buttonSize !== ButtonBaseSize.Lg || (hasStart && hasEnd)) {\n    return 'px-3';\n  }\n  if (!hasStart && !hasEnd) {\n    return 'px-4';\n  }\n  if (hasStart) {\n    return 'pl-3 pr-4';\n  }\n  return 'pl-4 pr-3';\n};\n"]}

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

@@ -1,3 +1,8 @@
-import { ButtonBaseSize } from "@metamask-previews/design-system-shared";
+import { ButtonBaseSize, IconSize, TextVariant } from "@metamask-previews/design-system-shared";
 export declare const TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION: Record<ButtonBaseSize, string>;
+export declare const TWCLASSMAP_BUTTONBASE_BORDER_RADIUS: Record<ButtonBaseSize, string>;
+export declare const MAP_BUTTONBASE_SIZE_ICONSIZE: Record<ButtonBaseSize, IconSize>;
+export declare const MAP_BUTTONBASE_SIZE_TEXT_VARIANT: Record<ButtonBaseSize, TextVariant>;
+export declare const getButtonBaseBorderRadiusTwClass: (size: ButtonBaseSize) => string;
+export declare const getButtonBaseHorizontalPaddingTwClasses: (buttonSize: ButtonBaseSize, hasStart: boolean, hasEnd: boolean) => string;
 //# sourceMappingURL=ButtonBase.constants.d.cts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ButtonBase.constants.d.cts","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,gDAAgD;AAEzE,eAAO,MAAM,oCAAoC,EAAE,MAAM,CACvD,cAAc,EACd,MAAM,CAKP,CAAC"}
+{"version":3,"file":"ButtonBase.constants.d.cts","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,cAAc,EACd,QAAQ,EACR,WAAW,EACZ,gDAAgD;AAEjD,eAAO,MAAM,oCAAoC,EAAE,MAAM,CACvD,cAAc,EACd,MAAM,CAKP,CAAC;AAEF,eAAO,MAAM,mCAAmC,EAAE,MAAM,CACtD,cAAc,EACd,MAAM,CAKP,CAAC;AAEF,eAAO,MAAM,4BAA4B,EAAE,MAAM,CAAC,cAAc,EAAE,QAAQ,CAIzE,CAAC;AAEF,eAAO,MAAM,gCAAgC,EAAE,MAAM,CACnD,cAAc,EACd,WAAW,CAKZ,CAAC;AAEF,eAAO,MAAM,gCAAgC,SACrC,cAAc,KACnB,MAAmD,CAAC;AAEvD,eAAO,MAAM,uCAAuC,eACtC,cAAc,YAChB,OAAO,UACT,OAAO,KACd,MAWF,CAAC"}

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

@@ -1,3 +1,8 @@
-import { ButtonBaseSize } from "@metamask-previews/design-system-shared";
+import { ButtonBaseSize, IconSize, TextVariant } from "@metamask-previews/design-system-shared";
 export declare const TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION: Record<ButtonBaseSize, string>;
+export declare const TWCLASSMAP_BUTTONBASE_BORDER_RADIUS: Record<ButtonBaseSize, string>;
+export declare const MAP_BUTTONBASE_SIZE_ICONSIZE: Record<ButtonBaseSize, IconSize>;
+export declare const MAP_BUTTONBASE_SIZE_TEXT_VARIANT: Record<ButtonBaseSize, TextVariant>;
+export declare const getButtonBaseBorderRadiusTwClass: (size: ButtonBaseSize) => string;
+export declare const getButtonBaseHorizontalPaddingTwClasses: (buttonSize: ButtonBaseSize, hasStart: boolean, hasEnd: boolean) => string;
 //# sourceMappingURL=ButtonBase.constants.d.mts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ButtonBase.constants.d.mts","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,gDAAgD;AAEzE,eAAO,MAAM,oCAAoC,EAAE,MAAM,CACvD,cAAc,EACd,MAAM,CAKP,CAAC"}
+{"version":3,"file":"ButtonBase.constants.d.mts","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,cAAc,EACd,QAAQ,EACR,WAAW,EACZ,gDAAgD;AAEjD,eAAO,MAAM,oCAAoC,EAAE,MAAM,CACvD,cAAc,EACd,MAAM,CAKP,CAAC;AAEF,eAAO,MAAM,mCAAmC,EAAE,MAAM,CACtD,cAAc,EACd,MAAM,CAKP,CAAC;AAEF,eAAO,MAAM,4BAA4B,EAAE,MAAM,CAAC,cAAc,EAAE,QAAQ,CAIzE,CAAC;AAEF,eAAO,MAAM,gCAAgC,EAAE,MAAM,CACnD,cAAc,EACd,WAAW,CAKZ,CAAC;AAEF,eAAO,MAAM,gCAAgC,SACrC,cAAc,KACnB,MAAmD,CAAC;AAEvD,eAAO,MAAM,uCAAuC,eACtC,cAAc,YAChB,OAAO,UACT,OAAO,KACd,MAWF,CAAC"}

package/dist/components/ButtonBase/ButtonBase.constants.mjs

@@ -1,7 +1,35 @@
-import { ButtonBaseSize } from "@metamask-previews/design-system-shared";
+import { ButtonBaseSize, IconSize, TextVariant } from "@metamask-previews/design-system-shared";
 export const TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION = {
     [ButtonBaseSize.Sm]: 'h-8',
     [ButtonBaseSize.Md]: 'h-10',
     [ButtonBaseSize.Lg]: 'h-12', // size (48px).
 };
+export const TWCLASSMAP_BUTTONBASE_BORDER_RADIUS = {
+    [ButtonBaseSize.Sm]: 'rounded-lg',
+    [ButtonBaseSize.Md]: 'rounded-xl',
+    [ButtonBaseSize.Lg]: 'rounded-xl', // 12px.
+};
+export const MAP_BUTTONBASE_SIZE_ICONSIZE = {
+    [ButtonBaseSize.Sm]: IconSize.Sm,
+    [ButtonBaseSize.Md]: IconSize.Sm,
+    [ButtonBaseSize.Lg]: IconSize.Md,
+};
+export const MAP_BUTTONBASE_SIZE_TEXT_VARIANT = {
+    [ButtonBaseSize.Sm]: TextVariant.BodySm,
+    [ButtonBaseSize.Md]: TextVariant.BodyMd,
+    [ButtonBaseSize.Lg]: TextVariant.BodyMd,
+};
+export const getButtonBaseBorderRadiusTwClass = (size) => TWCLASSMAP_BUTTONBASE_BORDER_RADIUS[size];
+export const getButtonBaseHorizontalPaddingTwClasses = (buttonSize, hasStart, hasEnd) => {
+    if (buttonSize !== ButtonBaseSize.Lg || (hasStart && hasEnd)) {
+        return 'px-3';
+    }
+    if (!hasStart && !hasEnd) {
+        return 'px-4';
+    }
+    if (hasStart) {
+        return 'pl-3 pr-4';
+    }
+    return 'pl-4 pr-3';
+};
 //# sourceMappingURL=ButtonBase.constants.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"ButtonBase.constants.mjs","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,gDAAgD;AAEzE,MAAM,CAAC,MAAM,oCAAoC,GAG7C;IACF,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,KAAK;IAC1B,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,MAAM;IAC3B,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,eAAe;CAC7C,CAAC","sourcesContent":["import { ButtonBaseSize } from '@metamask-previews/design-system-shared';\n\nexport const TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION: Record<\n  ButtonBaseSize,\n  string\n> = {\n  [ButtonBaseSize.Sm]: 'h-8', // size (32px).\n  [ButtonBaseSize.Md]: 'h-10', // size (40px).\n  [ButtonBaseSize.Lg]: 'h-12', // size (48px).\n};\n"]}
+{"version":3,"file":"ButtonBase.constants.mjs","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,cAAc,EACd,QAAQ,EACR,WAAW,EACZ,gDAAgD;AAEjD,MAAM,CAAC,MAAM,oCAAoC,GAG7C;IACF,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,KAAK;IAC1B,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,MAAM;IAC3B,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,eAAe;CAC7C,CAAC;AAEF,MAAM,CAAC,MAAM,mCAAmC,GAG5C;IACF,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,YAAY;IACjC,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,YAAY;IACjC,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,YAAY,EAAE,QAAQ;CAC5C,CAAC;AAEF,MAAM,CAAC,MAAM,4BAA4B,GAAqC;IAC5E,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,QAAQ,CAAC,EAAE;IAChC,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,QAAQ,CAAC,EAAE;IAChC,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,QAAQ,CAAC,EAAE;CACjC,CAAC;AAEF,MAAM,CAAC,MAAM,gCAAgC,GAGzC;IACF,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,WAAW,CAAC,MAAM;IACvC,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,WAAW,CAAC,MAAM;IACvC,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,WAAW,CAAC,MAAM;CACxC,CAAC;AAEF,MAAM,CAAC,MAAM,gCAAgC,GAAG,CAC9C,IAAoB,EACZ,EAAE,CAAC,mCAAmC,CAAC,IAAI,CAAC,CAAC;AAEvD,MAAM,CAAC,MAAM,uCAAuC,GAAG,CACrD,UAA0B,EAC1B,QAAiB,EACjB,MAAe,EACP,EAAE;IACV,IAAI,UAAU,KAAK,cAAc,CAAC,EAAE,IAAI,CAAC,QAAQ,IAAI,MAAM,CAAC,EAAE;QAC5D,OAAO,MAAM,CAAC;KACf;IACD,IAAI,CAAC,QAAQ,IAAI,CAAC,MAAM,EAAE;QACxB,OAAO,MAAM,CAAC;KACf;IACD,IAAI,QAAQ,EAAE;QACZ,OAAO,WAAW,CAAC;KACpB;IACD,OAAO,WAAW,CAAC;AACrB,CAAC,CAAC","sourcesContent":["import {\n  ButtonBaseSize,\n  IconSize,\n  TextVariant,\n} from '@metamask-previews/design-system-shared';\n\nexport const TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION: Record<\n  ButtonBaseSize,\n  string\n> = {\n  [ButtonBaseSize.Sm]: 'h-8', // size (32px).\n  [ButtonBaseSize.Md]: 'h-10', // size (40px).\n  [ButtonBaseSize.Lg]: 'h-12', // size (48px).\n};\n\nexport const TWCLASSMAP_BUTTONBASE_BORDER_RADIUS: Record<\n  ButtonBaseSize,\n  string\n> = {\n  [ButtonBaseSize.Sm]: 'rounded-lg', // 8px.\n  [ButtonBaseSize.Md]: 'rounded-xl', // 12px.\n  [ButtonBaseSize.Lg]: 'rounded-xl', // 12px.\n};\n\nexport const MAP_BUTTONBASE_SIZE_ICONSIZE: Record<ButtonBaseSize, IconSize> = {\n  [ButtonBaseSize.Sm]: IconSize.Sm,\n  [ButtonBaseSize.Md]: IconSize.Sm,\n  [ButtonBaseSize.Lg]: IconSize.Md,\n};\n\nexport const MAP_BUTTONBASE_SIZE_TEXT_VARIANT: Record<\n  ButtonBaseSize,\n  TextVariant\n> = {\n  [ButtonBaseSize.Sm]: TextVariant.BodySm,\n  [ButtonBaseSize.Md]: TextVariant.BodyMd,\n  [ButtonBaseSize.Lg]: TextVariant.BodyMd,\n};\n\nexport const getButtonBaseBorderRadiusTwClass = (\n  size: ButtonBaseSize,\n): string => TWCLASSMAP_BUTTONBASE_BORDER_RADIUS[size];\n\nexport const getButtonBaseHorizontalPaddingTwClasses = (\n  buttonSize: ButtonBaseSize,\n  hasStart: boolean,\n  hasEnd: boolean,\n): string => {\n  if (buttonSize !== ButtonBaseSize.Lg || (hasStart && hasEnd)) {\n    return 'px-3';\n  }\n  if (!hasStart && !hasEnd) {\n    return 'px-4';\n  }\n  if (hasStart) {\n    return 'pl-3 pr-4';\n  }\n  return 'pl-4 pr-3';\n};\n"]}

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

@@ -1,4 +1,4 @@
 import React from "react";
 import type { ButtonBaseProps } from "./ButtonBase.types.cjs";
-export declare const ButtonBase: ({ children, textProps, size, isLoading, loadingText, spinnerProps, startIconName, startIconProps, startAccessory, endIconName, endIconProps, endAccessory, isDisabled, isFullWidth, twClassName, textClassName, iconClassName, style, accessibilityLabel, accessibilityHint, accessibilityRole, accessibilityActions, onAccessibilityAction, ...props }: ButtonBaseProps) => React.JSX.Element;
+export declare const ButtonBase: ({ children, textProps, size, isLoading, loadingText, spinnerProps, loadingWrapperProps, contentWrapperProps, startIconName, startIconProps, startAccessory, endIconName, endIconProps, endAccessory, isDisabled, isFullWidth, twClassName, textClassName, iconClassName, style, accessibilityLabel, accessibilityHint, accessibilityRole, accessibilityActions, onAccessibilityAction, ...props }: ButtonBaseProps) => React.JSX.Element;
 //# sourceMappingURL=ButtonBase.d.cts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ButtonBase.d.cts","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAkB,cAAc;AAUvC,OAAO,KAAK,EAAE,eAAe,EAAE,+BAA2B;AAE1D,eAAO,MAAM,UAAU,4VAyBpB,eAAe,sBA+KjB,CAAC"}
+{"version":3,"file":"ButtonBase.d.cts","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAkB,cAAc;AAgBvC,OAAO,KAAK,EAAE,eAAe,EAAE,+BAA2B;AAE1D,eAAO,MAAM,UAAU,sYA2BpB,eAAe,sBA+LjB,CAAC"}

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

@@ -1,4 +1,4 @@
 import React from "react";
 import type { ButtonBaseProps } from "./ButtonBase.types.mjs";
-export declare const ButtonBase: ({ children, textProps, size, isLoading, loadingText, spinnerProps, startIconName, startIconProps, startAccessory, endIconName, endIconProps, endAccessory, isDisabled, isFullWidth, twClassName, textClassName, iconClassName, style, accessibilityLabel, accessibilityHint, accessibilityRole, accessibilityActions, onAccessibilityAction, ...props }: ButtonBaseProps) => React.JSX.Element;
+export declare const ButtonBase: ({ children, textProps, size, isLoading, loadingText, spinnerProps, loadingWrapperProps, contentWrapperProps, startIconName, startIconProps, startAccessory, endIconName, endIconProps, endAccessory, isDisabled, isFullWidth, twClassName, textClassName, iconClassName, style, accessibilityLabel, accessibilityHint, accessibilityRole, accessibilityActions, onAccessibilityAction, ...props }: ButtonBaseProps) => React.JSX.Element;
 //# sourceMappingURL=ButtonBase.d.mts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ButtonBase.d.mts","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAkB,cAAc;AAUvC,OAAO,KAAK,EAAE,eAAe,EAAE,+BAA2B;AAE1D,eAAO,MAAM,UAAU,4VAyBpB,eAAe,sBA+KjB,CAAC"}
+{"version":3,"file":"ButtonBase.d.mts","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAkB,cAAc;AAgBvC,OAAO,KAAK,EAAE,eAAe,EAAE,+BAA2B;AAE1D,eAAO,MAAM,UAAU,sYA2BpB,eAAe,sBA+LjB,CAAC"}

package/dist/components/ButtonBase/ButtonBase.mjs

@@ -4,20 +4,25 @@ function $importDefault(module) {
     }
     return module;
 }
-import { ButtonBaseSize } from "@metamask-previews/design-system-shared";
+import { ButtonBaseSize, FontWeight, TextColor } from "@metamask-previews/design-system-shared";
 import { useTailwind } from "@metamask-previews/design-system-twrnc-preset";
 import $React, { useMemo } from "react";
 const React = $importDefault($React);
-import { View } from "react-native/index.js";
-import { Icon, IconColor, IconSize } from "../Icon/index.mjs";
+import { Box } from "../Box/index.mjs";
+import { BoxRow } from "../BoxRow/index.mjs";
+import { Icon, IconColor } from "../Icon/index.mjs";
 import { ButtonAnimated } from "../temp-components/ButtonAnimated/index.mjs";
 import { Spinner } from "../temp-components/Spinner/index.mjs";
-import { Text, TextVariant, FontWeight, TextColor } from "../Text/index.mjs";
-import { TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION } from "./ButtonBase.constants.mjs";
-export const ButtonBase = ({ children, textProps, size = ButtonBaseSize.Lg, isLoading, loadingText, spinnerProps, startIconName, startIconProps, startAccessory, endIconName, endIconProps, endAccessory, isDisabled, isFullWidth, twClassName, textClassName, iconClassName, style, accessibilityLabel, accessibilityHint, accessibilityRole = 'button', accessibilityActions, onAccessibilityAction, ...props }) => {
+import { MAP_BUTTONBASE_SIZE_ICONSIZE, MAP_BUTTONBASE_SIZE_TEXT_VARIANT, getButtonBaseBorderRadiusTwClass, getButtonBaseHorizontalPaddingTwClasses, TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION } from "./ButtonBase.constants.mjs";
+export const ButtonBase = ({ children, textProps, size = ButtonBaseSize.Lg, isLoading, loadingText, spinnerProps, loadingWrapperProps, contentWrapperProps, startIconName, startIconProps, startAccessory, endIconName, endIconProps, endAccessory, isDisabled, isFullWidth, twClassName, textClassName, iconClassName, style, accessibilityLabel, accessibilityHint, accessibilityRole = 'button', accessibilityActions, onAccessibilityAction, ...props }) => {
     const tw = useTailwind();
     const finalStartIconName = startIconName ?? startIconProps?.name;
     const finalEndIconName = endIconName ?? endIconProps?.name;
+    const hasStart = Boolean(finalStartIconName || startAccessory);
+    const hasEnd = Boolean(finalEndIconName || endAccessory);
+    const hasAccessories = hasStart || hasEnd;
+    const iconSize = MAP_BUTTONBASE_SIZE_ICONSIZE[size];
+    const labelTextVariant = MAP_BUTTONBASE_SIZE_TEXT_VARIANT[size];
     // Generate accessibility label if not provided
     const finalAccessibilityLabel = useMemo(() => {
         if (accessibilityLabel) {
@@ -62,9 +67,11 @@ export const ButtonBase = ({ children, textProps, size = ButtonBaseSize.Lg, isLo
             // Build button container styles
             const buttonStyles = tw.style(
             // Base layout - flex container for button content
-            'flex-row items-center justify-center gap-x-2', 
+            'flex-row items-center justify-center', 
             // Visual styling
-            'rounded-xl bg-muted px-4 min-w-[80px] overflow-hidden', 
+            'bg-muted overflow-hidden', 
+            // Conditional Border Radius and Horizontal Spacing based on requirements
+            getButtonBaseBorderRadiusTwClass(size), getButtonBaseHorizontalPaddingTwClasses(size, hasStart, hasEnd), 
             // Size
             TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION[size], 
             // State-based opacity
@@ -81,31 +88,38 @@ export const ButtonBase = ({ children, textProps, size = ButtonBaseSize.Lg, isLo
             }
             return computedStyle;
         }} {...props}>
-      {({ pressed }) => (<>
-          {/* Loading spinner overlay */}
-          {isLoading && (<View style={tw.style('absolute inset-0 flex items-center justify-center')} testID="spinner-container">
-              <Spinner color={textClassName
-                    ? textClassName(pressed)
-                    : IconColor.IconDefault} loadingText={loadingText} loadingTextProps={{
-                    numberOfLines: 1,
-                    twClassName: textClassName ? textClassName(pressed) : '',
-                    ...spinnerProps?.loadingTextProps,
-                }} {...spinnerProps}/>
-            </View>)}
-
-          {/* Button content - opacity controlled individually on each child */}
-          {finalStartIconName ? (<Icon name={finalStartIconName} size={IconSize.Sm} twClassName={`shrink-0 ${isLoading ? 'opacity-0' : ''} ${iconClassName ? iconClassName(pressed) : ''}`} {...startIconProps}/>) : (startAccessory && (<View style={tw.style(isLoading && 'opacity-0')}>
-                {startAccessory}
-              </View>))}
+      {({ pressed }) => {
+            const { twClassName: loadingWrapperTw, ...restLoadingWrapper } = loadingWrapperProps ?? {};
+            const { twClassName: contentWrapperTw, ...restContentWrapper } = contentWrapperProps ?? {};
+            return (<>
+            {/* Loading spinner overlay */}
+            {isLoading && (<Box {...restLoadingWrapper} twClassName={`absolute inset-0 flex items-center justify-center ${loadingWrapperTw ?? ''}`}>
+                <Spinner color={textClassName
+                        ? textClassName(pressed)
+                        : IconColor.IconDefault} loadingText={loadingText} {...spinnerProps} spinnerIconProps={{
+                        size: iconSize,
+                        ...spinnerProps?.spinnerIconProps,
+                    }} loadingTextProps={{
+                        numberOfLines: 1,
+                        variant: labelTextVariant,
+                        twClassName: textClassName ? textClassName(pressed) : '',
+                        ...spinnerProps?.loadingTextProps,
+                    }}/>
+              </Box>)}
 
-          {typeof children === 'string' ? (<Text variant={TextVariant.BodyMd} fontWeight={FontWeight.Medium} color={TextColor.TextDefault} {...textProps} twClassName={`shrink grow-0 flex-wrap text-center ${isLoading ? 'opacity-0' : ''} ${textClassName ? textClassName(pressed) : ''} ${textProps?.twClassName ?? ''}`}>
+            <BoxRow {...restContentWrapper} twClassName={`${contentWrapperTw ?? ''} ${isLoading ? 'opacity-0' : ''}`} gap={hasAccessories ? 1 : 0} startAccessory={finalStartIconName ? (<Icon name={finalStartIconName} size={iconSize} twClassName={`shrink-0 ${iconClassName ? iconClassName(pressed) : ''}`} {...startIconProps}/>) : (startAccessory)} endAccessory={finalEndIconName ? (<Icon name={finalEndIconName} size={iconSize} twClassName={`shrink-0 ${iconClassName ? iconClassName(pressed) : ''}`} {...endIconProps}/>) : (endAccessory)} textProps={{
+                    variant: labelTextVariant,
+                    fontWeight: FontWeight.Medium,
+                    color: TextColor.TextDefault,
+                    numberOfLines: 1,
+                    ellipsizeMode: 'clip',
+                    ...textProps,
+                    twClassName: `shrink grow-0 flex-wrap text-center ${textClassName ? textClassName(pressed) : ''} ${textProps?.twClassName ?? ''}`,
+                }}>
               {children}
-            </Text>) : (<View style={tw.style(isLoading && 'opacity-0')}>{children}</View>)}
-
-          {finalEndIconName ? (<Icon name={finalEndIconName} size={IconSize.Sm} twClassName={`shrink-0 ${isLoading ? 'opacity-0' : ''} ${iconClassName ? iconClassName(pressed) : ''}`} {...endIconProps}/>) : (endAccessory && (<View style={tw.style(isLoading && 'opacity-0')}>
-                {endAccessory}
-              </View>))}
-        </>)}
+            </BoxRow>
+          </>);
+        }}
     </ButtonAnimated>);
 };
 //# sourceMappingURL=ButtonBase.mjs.map

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"ButtonBase.types.cjs","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.types.ts"],"names":[],"mappings":"","sourcesContent":["import type {\n  ButtonBasePropsShared,\n  IconName,\n} from '@metamask-previews/design-system-shared';\nimport type { PressableProps, StyleProp, ViewStyle } from 'react-native';\n\nimport type { IconProps } from '../Icon';\nimport type { SpinnerProps } from '../temp-components/Spinner';\nimport type { TextProps } from '../Text';\n\n/**\n * ButtonBase component props.\n */\nexport type ButtonBaseProps = ButtonBasePropsShared & {\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 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 to add twrnc overriding classNames.\n   * Can be a string or a function that receives pressed state and returns a string.\n   */\n  twClassName?: string | ((pressed: boolean) => string);\n  /**\n   * Optional prop to control text className based on pressed state.\n   */\n  textClassName?: (pressed: boolean) => string;\n  /**\n   * Optional prop to control icon className based on pressed state.\n   */\n  iconClassName?: (pressed: boolean) => string;\n  /**\n   * Optional prop to control the style.\n   */\n  style?: StyleProp<ViewStyle>;\n  /**\n   * Optional accessibility label to describe the button for screen readers.\n   * If not provided, the button content will be used as the label.\n   */\n  accessibilityLabel?: string;\n  /**\n   * Optional accessibility hint to provide additional context about the button's action.\n   * Should describe what happens when the button is pressed.\n   */\n  accessibilityHint?: string;\n  /**\n   * Optional accessibility role. Defaults to 'button'.\n   * Can be overridden for specific use cases.\n   */\n  accessibilityRole?: 'button' | 'link' | 'menuitem' | 'tab' | 'none';\n  /**\n   * Optional accessibility actions for custom interactions.\n   * Use sparingly and only when default button behavior is insufficient.\n   */\n  accessibilityActions?: {\n    name: string;\n    label?: string;\n  }[];\n  /**\n   * Optional callback for handling accessibility action events.\n   */\n  onAccessibilityAction?: (event: {\n    nativeEvent: { actionName: string };\n  }) => void;\n} & Omit<\n    PressableProps,\n    | 'accessibilityRole'\n    | 'accessibilityLabel'\n    | 'accessibilityHint'\n    | 'accessibilityActions'\n    | 'onAccessibilityAction'\n  >;\n"]}
+{"version":3,"file":"ButtonBase.types.cjs","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.types.ts"],"names":[],"mappings":"","sourcesContent":["import type {\n  ButtonBasePropsShared,\n  IconName,\n} from '@metamask-previews/design-system-shared';\nimport type { PressableProps, StyleProp, ViewStyle } from 'react-native';\n\nimport type { BoxProps } from '../Box/Box.types';\nimport type { BoxRowProps } from '../BoxRow/BoxRow.types';\nimport type { IconProps } from '../Icon';\nimport type { SpinnerProps } from '../temp-components/Spinner';\nimport type { TextProps } from '../Text';\n\n/**\n * ButtonBase component props.\n */\nexport type ButtonBaseProps = ButtonBasePropsShared & {\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 pass additional properties to the end icon\n   */\n  spinnerProps?: Partial<SpinnerProps>;\n  /**\n   * Props passed to the loading overlay wrapper (`Box` around the spinner).\n   * Defaults include `twClassName` for full-area centered layout; merge your own `twClassName` to extend.\n   * Pass `testID` here for tests — there is no default test id on this wrapper.\n   */\n  loadingWrapperProps?: Omit<Partial<BoxProps>, 'children'>;\n  /**\n   * Props passed to the label row (`BoxRow`). Label typography remains controlled via `textProps` on ButtonBase.\n   */\n  contentWrapperProps?: Omit<Partial<BoxRowProps>, 'children' | 'textProps'>;\n  /**\n   * Optional prop to specify an icon to show at the start of the button\n   */\n  startIconName?: IconName;\n  /**\n   * Optional prop to pass additional properties to the start icon\n   */\n  startIconProps?: Partial<IconProps>;\n  /**\n   * Optional prop for a custom element to show at the start of the button\n   */\n  startAccessory?: React.ReactNode;\n  /**\n   * Optional prop to specify an icon to show at the end of the button\n   */\n  endIconName?: IconName;\n  /**\n   * Optional prop to pass additional properties to the end icon\n   */\n  endIconProps?: Partial<IconProps>;\n  /**\n   * Optional prop for a custom element to show at the end of the button\n   */\n  endAccessory?: React.ReactNode;\n  /**\n   * Optional prop to add twrnc overriding classNames.\n   * Can be a string or a function that receives pressed state and returns a string.\n   */\n  twClassName?: string | ((pressed: boolean) => string);\n  /**\n   * Optional prop to control text className based on pressed state.\n   */\n  textClassName?: (pressed: boolean) => string;\n  /**\n   * Optional prop to control icon className based on pressed state.\n   */\n  iconClassName?: (pressed: boolean) => string;\n  /**\n   * Optional prop to control the style.\n   */\n  style?: StyleProp<ViewStyle>;\n  /**\n   * Optional accessibility label to describe the button for screen readers.\n   * If not provided, the button content will be used as the label.\n   */\n  accessibilityLabel?: string;\n  /**\n   * Optional accessibility hint to provide additional context about the button's action.\n   * Should describe what happens when the button is pressed.\n   */\n  accessibilityHint?: string;\n  /**\n   * Optional accessibility role. Defaults to 'button'.\n   * Can be overridden for specific use cases.\n   */\n  accessibilityRole?: 'button' | 'link' | 'menuitem' | 'tab' | 'none';\n  /**\n   * Optional accessibility actions for custom interactions.\n   * Use sparingly and only when default button behavior is insufficient.\n   */\n  accessibilityActions?: {\n    name: string;\n    label?: string;\n  }[];\n  /**\n   * Optional callback for handling accessibility action events.\n   */\n  onAccessibilityAction?: (event: {\n    nativeEvent: { actionName: string };\n  }) => void;\n} & Omit<\n    PressableProps,\n    | 'accessibilityRole'\n    | 'accessibilityLabel'\n    | 'accessibilityHint'\n    | 'accessibilityActions'\n    | 'onAccessibilityAction'\n  >;\n"]}

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

@@ -1,6 +1,8 @@
 /// <reference types="react" />
 import type { ButtonBasePropsShared, IconName } from "@metamask-previews/design-system-shared";
 import type { PressableProps, StyleProp, ViewStyle } from "react-native/index.js";
+import type { BoxProps } from "../Box/Box.types.cjs";
+import type { BoxRowProps } from "../BoxRow/BoxRow.types.cjs";
 import type { IconProps } from "../Icon/index.cjs";
 import type { SpinnerProps } from "../temp-components/Spinner/index.cjs";
 import type { TextProps } from "../Text/index.cjs";
@@ -20,6 +22,16 @@ export type ButtonBaseProps = ButtonBasePropsShared & {
      * Optional prop to pass additional properties to the end icon
      */
     spinnerProps?: Partial<SpinnerProps>;
+    /**
+     * Props passed to the loading overlay wrapper (`Box` around the spinner).
+     * Defaults include `twClassName` for full-area centered layout; merge your own `twClassName` to extend.
+     * Pass `testID` here for tests — there is no default test id on this wrapper.
+     */
+    loadingWrapperProps?: Omit<Partial<BoxProps>, 'children'>;
+    /**
+     * Props passed to the label row (`BoxRow`). Label typography remains controlled via `textProps` on ButtonBase.
+     */
+    contentWrapperProps?: Omit<Partial<BoxRowProps>, 'children' | 'textProps'>;
     /**
      * Optional prop to specify an icon to show at the start of the button
      */

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

@@ -1 +1 @@
-{"version":3,"file":"ButtonBase.types.d.cts","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.types.ts"],"names":[],"mappings":";AAAA,OAAO,KAAK,EACV,qBAAqB,EACrB,QAAQ,EACT,gDAAgD;AACjD,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,SAAS,EAAE,8BAAqB;AAEzE,OAAO,KAAK,EAAE,SAAS,EAAE,0BAAgB;AACzC,OAAO,KAAK,EAAE,YAAY,EAAE,6CAAmC;AAC/D,OAAO,KAAK,EAAE,SAAS,EAAE,0BAAgB;AAEzC;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG,qBAAqB,GAAG;IACpD;;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;;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;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,OAAO,EAAE,OAAO,KAAK,MAAM,CAAC,CAAC;IACtD;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,MAAM,CAAC;IAC7C;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,MAAM,CAAC;IAC7C;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B;;;OAGG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;;OAGG;IACH,iBAAiB,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,UAAU,GAAG,KAAK,GAAG,MAAM,CAAC;IACpE;;;OAGG;IACH,oBAAoB,CAAC,EAAE;QACrB,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,EAAE,CAAC;IACJ;;OAEG;IACH,qBAAqB,CAAC,EAAE,CAAC,KAAK,EAAE;QAC9B,WAAW,EAAE;YAAE,UAAU,EAAE,MAAM,CAAA;SAAE,CAAC;KACrC,KAAK,IAAI,CAAC;CACZ,GAAG,IAAI,CACJ,cAAc,EACZ,mBAAmB,GACnB,oBAAoB,GACpB,mBAAmB,GACnB,sBAAsB,GACtB,uBAAuB,CAC1B,CAAC"}
+{"version":3,"file":"ButtonBase.types.d.cts","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.types.ts"],"names":[],"mappings":";AAAA,OAAO,KAAK,EACV,qBAAqB,EACrB,QAAQ,EACT,gDAAgD;AACjD,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,SAAS,EAAE,8BAAqB;AAEzE,OAAO,KAAK,EAAE,QAAQ,EAAE,6BAAyB;AACjD,OAAO,KAAK,EAAE,WAAW,EAAE,mCAA+B;AAC1D,OAAO,KAAK,EAAE,SAAS,EAAE,0BAAgB;AACzC,OAAO,KAAK,EAAE,YAAY,EAAE,6CAAmC;AAC/D,OAAO,KAAK,EAAE,SAAS,EAAE,0BAAgB;AAEzC;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG,qBAAqB,GAAG;IACpD;;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;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;IACrC;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE,UAAU,CAAC,CAAC;IAC1D;;OAEG;IACH,mBAAmB,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,EAAE,UAAU,GAAG,WAAW,CAAC,CAAC;IAC3E;;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;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,OAAO,EAAE,OAAO,KAAK,MAAM,CAAC,CAAC;IACtD;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,MAAM,CAAC;IAC7C;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,MAAM,CAAC;IAC7C;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B;;;OAGG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;;OAGG;IACH,iBAAiB,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,UAAU,GAAG,KAAK,GAAG,MAAM,CAAC;IACpE;;;OAGG;IACH,oBAAoB,CAAC,EAAE;QACrB,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,EAAE,CAAC;IACJ;;OAEG;IACH,qBAAqB,CAAC,EAAE,CAAC,KAAK,EAAE;QAC9B,WAAW,EAAE;YAAE,UAAU,EAAE,MAAM,CAAA;SAAE,CAAC;KACrC,KAAK,IAAI,CAAC;CACZ,GAAG,IAAI,CACJ,cAAc,EACZ,mBAAmB,GACnB,oBAAoB,GACpB,mBAAmB,GACnB,sBAAsB,GACtB,uBAAuB,CAC1B,CAAC"}

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

@@ -1,6 +1,8 @@
 /// <reference types="react" />
 import type { ButtonBasePropsShared, IconName } from "@metamask-previews/design-system-shared";
 import type { PressableProps, StyleProp, ViewStyle } from "react-native/index.js";
+import type { BoxProps } from "../Box/Box.types.mjs";
+import type { BoxRowProps } from "../BoxRow/BoxRow.types.mjs";
 import type { IconProps } from "../Icon/index.mjs";
 import type { SpinnerProps } from "../temp-components/Spinner/index.mjs";
 import type { TextProps } from "../Text/index.mjs";
@@ -20,6 +22,16 @@ export type ButtonBaseProps = ButtonBasePropsShared & {
      * Optional prop to pass additional properties to the end icon
      */
     spinnerProps?: Partial<SpinnerProps>;
+    /**
+     * Props passed to the loading overlay wrapper (`Box` around the spinner).
+     * Defaults include `twClassName` for full-area centered layout; merge your own `twClassName` to extend.
+     * Pass `testID` here for tests — there is no default test id on this wrapper.
+     */
+    loadingWrapperProps?: Omit<Partial<BoxProps>, 'children'>;
+    /**
+     * Props passed to the label row (`BoxRow`). Label typography remains controlled via `textProps` on ButtonBase.
+     */
+    contentWrapperProps?: Omit<Partial<BoxRowProps>, 'children' | 'textProps'>;
     /**
      * Optional prop to specify an icon to show at the start of the button
      */

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

@@ -1 +1 @@
-{"version":3,"file":"ButtonBase.types.d.mts","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.types.ts"],"names":[],"mappings":";AAAA,OAAO,KAAK,EACV,qBAAqB,EACrB,QAAQ,EACT,gDAAgD;AACjD,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,SAAS,EAAE,8BAAqB;AAEzE,OAAO,KAAK,EAAE,SAAS,EAAE,0BAAgB;AACzC,OAAO,KAAK,EAAE,YAAY,EAAE,6CAAmC;AAC/D,OAAO,KAAK,EAAE,SAAS,EAAE,0BAAgB;AAEzC;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG,qBAAqB,GAAG;IACpD;;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;;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;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,OAAO,EAAE,OAAO,KAAK,MAAM,CAAC,CAAC;IACtD;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,MAAM,CAAC;IAC7C;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,MAAM,CAAC;IAC7C;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B;;;OAGG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;;OAGG;IACH,iBAAiB,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,UAAU,GAAG,KAAK,GAAG,MAAM,CAAC;IACpE;;;OAGG;IACH,oBAAoB,CAAC,EAAE;QACrB,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,EAAE,CAAC;IACJ;;OAEG;IACH,qBAAqB,CAAC,EAAE,CAAC,KAAK,EAAE;QAC9B,WAAW,EAAE;YAAE,UAAU,EAAE,MAAM,CAAA;SAAE,CAAC;KACrC,KAAK,IAAI,CAAC;CACZ,GAAG,IAAI,CACJ,cAAc,EACZ,mBAAmB,GACnB,oBAAoB,GACpB,mBAAmB,GACnB,sBAAsB,GACtB,uBAAuB,CAC1B,CAAC"}
+{"version":3,"file":"ButtonBase.types.d.mts","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.types.ts"],"names":[],"mappings":";AAAA,OAAO,KAAK,EACV,qBAAqB,EACrB,QAAQ,EACT,gDAAgD;AACjD,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,SAAS,EAAE,8BAAqB;AAEzE,OAAO,KAAK,EAAE,QAAQ,EAAE,6BAAyB;AACjD,OAAO,KAAK,EAAE,WAAW,EAAE,mCAA+B;AAC1D,OAAO,KAAK,EAAE,SAAS,EAAE,0BAAgB;AACzC,OAAO,KAAK,EAAE,YAAY,EAAE,6CAAmC;AAC/D,OAAO,KAAK,EAAE,SAAS,EAAE,0BAAgB;AAEzC;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG,qBAAqB,GAAG;IACpD;;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;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;IACrC;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE,UAAU,CAAC,CAAC;IAC1D;;OAEG;IACH,mBAAmB,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,EAAE,UAAU,GAAG,WAAW,CAAC,CAAC;IAC3E;;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;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,OAAO,EAAE,OAAO,KAAK,MAAM,CAAC,CAAC;IACtD;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,MAAM,CAAC;IAC7C;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,MAAM,CAAC;IAC7C;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B;;;OAGG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;;OAGG;IACH,iBAAiB,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,UAAU,GAAG,KAAK,GAAG,MAAM,CAAC;IACpE;;;OAGG;IACH,oBAAoB,CAAC,EAAE;QACrB,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,EAAE,CAAC;IACJ;;OAEG;IACH,qBAAqB,CAAC,EAAE,CAAC,KAAK,EAAE;QAC9B,WAAW,EAAE;YAAE,UAAU,EAAE,MAAM,CAAA;SAAE,CAAC;KACrC,KAAK,IAAI,CAAC;CACZ,GAAG,IAAI,CACJ,cAAc,EACZ,mBAAmB,GACnB,oBAAoB,GACpB,mBAAmB,GACnB,sBAAsB,GACtB,uBAAuB,CAC1B,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"ButtonBase.types.mjs","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.types.ts"],"names":[],"mappings":"","sourcesContent":["import type {\n  ButtonBasePropsShared,\n  IconName,\n} from '@metamask-previews/design-system-shared';\nimport type { PressableProps, StyleProp, ViewStyle } from 'react-native';\n\nimport type { IconProps } from '../Icon';\nimport type { SpinnerProps } from '../temp-components/Spinner';\nimport type { TextProps } from '../Text';\n\n/**\n * ButtonBase component props.\n */\nexport type ButtonBaseProps = ButtonBasePropsShared & {\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 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 to add twrnc overriding classNames.\n   * Can be a string or a function that receives pressed state and returns a string.\n   */\n  twClassName?: string | ((pressed: boolean) => string);\n  /**\n   * Optional prop to control text className based on pressed state.\n   */\n  textClassName?: (pressed: boolean) => string;\n  /**\n   * Optional prop to control icon className based on pressed state.\n   */\n  iconClassName?: (pressed: boolean) => string;\n  /**\n   * Optional prop to control the style.\n   */\n  style?: StyleProp<ViewStyle>;\n  /**\n   * Optional accessibility label to describe the button for screen readers.\n   * If not provided, the button content will be used as the label.\n   */\n  accessibilityLabel?: string;\n  /**\n   * Optional accessibility hint to provide additional context about the button's action.\n   * Should describe what happens when the button is pressed.\n   */\n  accessibilityHint?: string;\n  /**\n   * Optional accessibility role. Defaults to 'button'.\n   * Can be overridden for specific use cases.\n   */\n  accessibilityRole?: 'button' | 'link' | 'menuitem' | 'tab' | 'none';\n  /**\n   * Optional accessibility actions for custom interactions.\n   * Use sparingly and only when default button behavior is insufficient.\n   */\n  accessibilityActions?: {\n    name: string;\n    label?: string;\n  }[];\n  /**\n   * Optional callback for handling accessibility action events.\n   */\n  onAccessibilityAction?: (event: {\n    nativeEvent: { actionName: string };\n  }) => void;\n} & Omit<\n    PressableProps,\n    | 'accessibilityRole'\n    | 'accessibilityLabel'\n    | 'accessibilityHint'\n    | 'accessibilityActions'\n    | 'onAccessibilityAction'\n  >;\n"]}
+{"version":3,"file":"ButtonBase.types.mjs","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.types.ts"],"names":[],"mappings":"","sourcesContent":["import type {\n  ButtonBasePropsShared,\n  IconName,\n} from '@metamask-previews/design-system-shared';\nimport type { PressableProps, StyleProp, ViewStyle } from 'react-native';\n\nimport type { BoxProps } from '../Box/Box.types';\nimport type { BoxRowProps } from '../BoxRow/BoxRow.types';\nimport type { IconProps } from '../Icon';\nimport type { SpinnerProps } from '../temp-components/Spinner';\nimport type { TextProps } from '../Text';\n\n/**\n * ButtonBase component props.\n */\nexport type ButtonBaseProps = ButtonBasePropsShared & {\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 pass additional properties to the end icon\n   */\n  spinnerProps?: Partial<SpinnerProps>;\n  /**\n   * Props passed to the loading overlay wrapper (`Box` around the spinner).\n   * Defaults include `twClassName` for full-area centered layout; merge your own `twClassName` to extend.\n   * Pass `testID` here for tests — there is no default test id on this wrapper.\n   */\n  loadingWrapperProps?: Omit<Partial<BoxProps>, 'children'>;\n  /**\n   * Props passed to the label row (`BoxRow`). Label typography remains controlled via `textProps` on ButtonBase.\n   */\n  contentWrapperProps?: Omit<Partial<BoxRowProps>, 'children' | 'textProps'>;\n  /**\n   * Optional prop to specify an icon to show at the start of the button\n   */\n  startIconName?: IconName;\n  /**\n   * Optional prop to pass additional properties to the start icon\n   */\n  startIconProps?: Partial<IconProps>;\n  /**\n   * Optional prop for a custom element to show at the start of the button\n   */\n  startAccessory?: React.ReactNode;\n  /**\n   * Optional prop to specify an icon to show at the end of the button\n   */\n  endIconName?: IconName;\n  /**\n   * Optional prop to pass additional properties to the end icon\n   */\n  endIconProps?: Partial<IconProps>;\n  /**\n   * Optional prop for a custom element to show at the end of the button\n   */\n  endAccessory?: React.ReactNode;\n  /**\n   * Optional prop to add twrnc overriding classNames.\n   * Can be a string or a function that receives pressed state and returns a string.\n   */\n  twClassName?: string | ((pressed: boolean) => string);\n  /**\n   * Optional prop to control text className based on pressed state.\n   */\n  textClassName?: (pressed: boolean) => string;\n  /**\n   * Optional prop to control icon className based on pressed state.\n   */\n  iconClassName?: (pressed: boolean) => string;\n  /**\n   * Optional prop to control the style.\n   */\n  style?: StyleProp<ViewStyle>;\n  /**\n   * Optional accessibility label to describe the button for screen readers.\n   * If not provided, the button content will be used as the label.\n   */\n  accessibilityLabel?: string;\n  /**\n   * Optional accessibility hint to provide additional context about the button's action.\n   * Should describe what happens when the button is pressed.\n   */\n  accessibilityHint?: string;\n  /**\n   * Optional accessibility role. Defaults to 'button'.\n   * Can be overridden for specific use cases.\n   */\n  accessibilityRole?: 'button' | 'link' | 'menuitem' | 'tab' | 'none';\n  /**\n   * Optional accessibility actions for custom interactions.\n   * Use sparingly and only when default button behavior is insufficient.\n   */\n  accessibilityActions?: {\n    name: string;\n    label?: string;\n  }[];\n  /**\n   * Optional callback for handling accessibility action events.\n   */\n  onAccessibilityAction?: (event: {\n    nativeEvent: { actionName: string };\n  }) => void;\n} & Omit<\n    PressableProps,\n    | 'accessibilityRole'\n    | 'accessibilityLabel'\n    | 'accessibilityHint'\n    | 'accessibilityActions'\n    | 'onAccessibilityAction'\n  >;\n"]}

package/dist/components/ButtonSemantic/ButtonSemantic.cjs

@@ -26,8 +26,6 @@ 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 }) => {
@@ -42,21 +40,7 @@ const ButtonSemantic = ({ severity, children, textProps, spinnerProps, startIcon
     }, [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}>
+    return (<ButtonBase_1.ButtonBase textProps={textProps} spinnerProps={spinnerProps} startIconProps={startIconProps} endIconProps={endIconProps} isLoading={isLoading} twClassName={getContainerClassName} textClassName={getTextClassName} iconClassName={getTextClassName} style={style} {...props}>
       {children}
     </ButtonBase_1.ButtonBase>);
 };

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

@@ -1 +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"]}
+{"version":3,"file":"ButtonSemantic.cjs","sourceRoot":"","sources":["../../../src/components/ButtonSemantic/ButtonSemantic.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA2C;AAE3C,wDAA2C;AAE3C,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,SAAS,CAAC,CACrB,YAAY,CAAC,CAAC,YAAY,CAAC,CAC3B,cAAc,CAAC,CAAC,cAAc,CAAC,CAC/B,YAAY,CAAC,CAAC,YAAY,CAAC,CAC3B,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;AAtDW,QAAA,cAAc,kBAsDzB","sourcesContent":["import React, { useCallback } from 'react';\n\nimport { ButtonBase } from '../ButtonBase';\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={textProps}\n      spinnerProps={spinnerProps}\n      startIconProps={startIconProps}\n      endIconProps={endIconProps}\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.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonSemantic.d.cts","sourceRoot":"","sources":["../../../src/components/ButtonSemantic/ButtonSemantic.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsB,cAAc;AAW3C,OAAO,KAAK,EAAE,mBAAmB,EAAE,mCAA+B;AAGlE,eAAO,MAAM,cAAc,2HAWxB,mBAAmB,sBAyDrB,CAAC"}
+{"version":3,"file":"ButtonSemantic.d.cts","sourceRoot":"","sources":["../../../src/components/ButtonSemantic/ButtonSemantic.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsB,cAAc;AAS3C,OAAO,KAAK,EAAE,mBAAmB,EAAE,mCAA+B;AAGlE,eAAO,MAAM,cAAc,2HAWxB,mBAAmB,sBA2CrB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"ButtonSemantic.d.mts","sourceRoot":"","sources":["../../../src/components/ButtonSemantic/ButtonSemantic.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsB,cAAc;AAW3C,OAAO,KAAK,EAAE,mBAAmB,EAAE,mCAA+B;AAGlE,eAAO,MAAM,cAAc,2HAWxB,mBAAmB,sBAyDrB,CAAC"}
+{"version":3,"file":"ButtonSemantic.d.mts","sourceRoot":"","sources":["../../../src/components/ButtonSemantic/ButtonSemantic.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsB,cAAc;AAS3C,OAAO,KAAK,EAAE,mBAAmB,EAAE,mCAA+B;AAGlE,eAAO,MAAM,cAAc,2HAWxB,mBAAmB,sBA2CrB,CAAC"}

package/dist/components/ButtonSemantic/ButtonSemantic.mjs

@@ -7,8 +7,6 @@ function $importDefault(module) {
 import $React, { useCallback } from "react";
 const React = $importDefault($React);
 import { ButtonBase } from "../ButtonBase/index.mjs";
-import { IconSize } from "../Icon/index.mjs";
-import { TextVariant, FontWeight } from "../Text/index.mjs";
 import { TWCLASSMAP_BUTTONSEMANTIC_BG, TWCLASSMAP_BUTTONSEMANTIC_BG_PRESSED, TWCLASSMAP_BUTTONSEMANTIC_TEXT } from "./ButtonSemantic.constants.mjs";
 import { ButtonSemanticSeverity } from "./ButtonSemantic.types.mjs";
 export const ButtonSemantic = ({ severity, children, textProps, spinnerProps, startIconProps, endIconProps, isLoading = false, twClassName = '', style, ...props }) => {
@@ -23,21 +21,7 @@ export const ButtonSemantic = ({ severity, children, textProps, spinnerProps, st
     }, [severity, isLoading, twClassName]);
     const getTextClassName = useCallback((_pressed) => TWCLASSMAP_BUTTONSEMANTIC_TEXT[severity] ??
         TWCLASSMAP_BUTTONSEMANTIC_TEXT[ButtonSemanticSeverity.Success], [severity]);
-    return (<ButtonBase textProps={{
-            variant: TextVariant.BodyMd,
-            fontWeight: FontWeight.Medium,
-            numberOfLines: 1,
-            ellipsizeMode: 'clip',
-            ...textProps,
-        }} spinnerProps={{
-            ...spinnerProps,
-        }} startIconProps={{
-            size: IconSize.Sm,
-            ...startIconProps,
-        }} endIconProps={{
-            size: IconSize.Sm,
-            ...endIconProps,
-        }} isLoading={isLoading} twClassName={getContainerClassName} textClassName={getTextClassName} iconClassName={getTextClassName} style={style} {...props}>
+    return (<ButtonBase textProps={textProps} spinnerProps={spinnerProps} startIconProps={startIconProps} endIconProps={endIconProps} isLoading={isLoading} twClassName={getContainerClassName} textClassName={getTextClassName} iconClassName={getTextClassName} style={style} {...props}>
       {children}
     </ButtonBase>);
 };

package/dist/components/ButtonSemantic/ButtonSemantic.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonSemantic.mjs","sourceRoot":"","sources":["../../../src/components/ButtonSemantic/ButtonSemantic.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,QAAO,EAAE,WAAW,EAAE,cAAc;;AAE3C,OAAO,EAAE,UAAU,EAAE,gCAAsB;AAC3C,OAAO,EAAE,QAAQ,EAAE,0BAAgB;AACnC,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,0BAAgB;AAElD,OAAO,EACL,4BAA4B,EAC5B,oCAAoC,EACpC,8BAA8B,EAC/B,uCAAmC;AAEpC,OAAO,EAAE,sBAAsB,EAAE,mCAA+B;AAEhE,MAAM,CAAC,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,WAAW,CACvC,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,oCAAoC,CAAC,QAAQ,CAAC;gBAC/C,oCAAoC,CAClC,sBAAsB,CAAC,OAAO,CAC/B,CAAC;YACJ,CAAC,CAAC,CAAC,4BAA4B,CAAC,QAAQ,CAAC;gBACvC,4BAA4B,CAAC,sBAAsB,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,WAAW,CAClC,CAAC,QAAiB,EAAU,EAAE,CAC5B,8BAA8B,CAAC,QAAQ,CAAC;QACxC,8BAA8B,CAAC,sBAAsB,CAAC,OAAO,CAAC,EAChE,CAAC,QAAQ,CAAC,CACX,CAAC;IAEF,OAAO,CACL,CAAC,UAAU,CACT,SAAS,CAAC,CAAC;YACT,OAAO,EAAE,WAAW,CAAC,MAAM;YAC3B,UAAU,EAAE,UAAU,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,QAAQ,CAAC,EAAE;YACjB,GAAG,cAAc;SAClB,CAAC,CACF,YAAY,CAAC,CAAC;YACZ,IAAI,EAAE,QAAQ,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,UAAU,CAAC,CACd,CAAC;AACJ,CAAC,CAAC","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"]}
+{"version":3,"file":"ButtonSemantic.mjs","sourceRoot":"","sources":["../../../src/components/ButtonSemantic/ButtonSemantic.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,QAAO,EAAE,WAAW,EAAE,cAAc;;AAE3C,OAAO,EAAE,UAAU,EAAE,gCAAsB;AAE3C,OAAO,EACL,4BAA4B,EAC5B,oCAAoC,EACpC,8BAA8B,EAC/B,uCAAmC;AAEpC,OAAO,EAAE,sBAAsB,EAAE,mCAA+B;AAEhE,MAAM,CAAC,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,WAAW,CACvC,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,oCAAoC,CAAC,QAAQ,CAAC;gBAC/C,oCAAoC,CAClC,sBAAsB,CAAC,OAAO,CAC/B,CAAC;YACJ,CAAC,CAAC,CAAC,4BAA4B,CAAC,QAAQ,CAAC;gBACvC,4BAA4B,CAAC,sBAAsB,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,WAAW,CAClC,CAAC,QAAiB,EAAU,EAAE,CAC5B,8BAA8B,CAAC,QAAQ,CAAC;QACxC,8BAA8B,CAAC,sBAAsB,CAAC,OAAO,CAAC,EAChE,CAAC,QAAQ,CAAC,CACX,CAAC;IAEF,OAAO,CACL,CAAC,UAAU,CACT,SAAS,CAAC,CAAC,SAAS,CAAC,CACrB,YAAY,CAAC,CAAC,YAAY,CAAC,CAC3B,cAAc,CAAC,CAAC,cAAc,CAAC,CAC/B,YAAY,CAAC,CAAC,YAAY,CAAC,CAC3B,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,UAAU,CAAC,CACd,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import React, { useCallback } from 'react';\n\nimport { ButtonBase } from '../ButtonBase';\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={textProps}\n      spinnerProps={spinnerProps}\n      startIconProps={startIconProps}\n      endIconProps={endIconProps}\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"]}