@metamask-previews/design-system-react-native 0.0.0-preview.5f5c97a → 0.0.0-preview.646ebcc

package/dist/components/Button/variants/ButtonSecondary/ButtonSecondary.mjs

@@ -5,77 +5,75 @@ function $importDefault(module) {
     return module;
 }
 import { useTailwind } from "@metamask-previews/design-system-twrnc-preset";
-import $React, { useState } from "react";
+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";
-export const ButtonSecondary = ({ children, textProps, spinnerProps, startIconProps, endIconProps, isDanger = false, isInverse = false, isLoading = false, onPressIn, onPressOut, twClassName = '', style, ...props }) => {
-    const [isPressed, setIsPressed] = useState(false);
+export const ButtonSecondary = ({ children, textProps, spinnerProps, startIconProps, endIconProps, isDanger = false, isInverse = false, isLoading = false, twClassName = '', style, ...props }) => {
     const tw = useTailwind();
-    const twContainerClassNames = `
-    ${isInverse && isDanger
-        ? isPressed || isLoading
-            ? 'bg-default-pressed'
-            : 'bg-default'
-        : isDanger
-            ? isPressed || isLoading
-                ? 'bg-error-muted-pressed'
-                : 'bg-transparent'
-            : isPressed || isLoading
-                ? 'bg-pressed'
-                : 'bg-transparent'}
-    border-[1.5px]
-    ${isInverse && isDanger
-        ? isPressed || isLoading
-            ? 'border-background-default-pressed'
-            : 'border-background-default'
-        : isDanger
-            ? isPressed || isLoading
-                ? 'border-error-default-pressed'
-                : 'border-error-default'
-            : isInverse
+    const getContainerClassName = useCallback((pressed) => {
+        const baseClasses = `
+        border-[1.5px]
+        ${twClassName}
+      `;
+        let backgroundClass = '';
+        let borderClass = '';
+        if (isInverse && isDanger) {
+            backgroundClass =
+                pressed || isLoading ? 'bg-default-pressed' : 'bg-default';
+            borderClass =
+                pressed || isLoading
+                    ? 'border-background-default-pressed'
+                    : 'border-background-default';
+        }
+        else if (isDanger) {
+            backgroundClass =
+                pressed || isLoading ? 'bg-muted-pressed' : 'bg-muted';
+            borderClass = 'border-transparent';
+        }
+        else {
+            backgroundClass = isInverse
+                ? pressed || isLoading
+                    ? 'bg-pressed'
+                    : 'bg-transparent'
+                : pressed || isLoading
+                    ? 'bg-muted-pressed'
+                    : 'bg-muted';
+            borderClass = isInverse
                 ? 'border-primary-inverse'
-                : 'border-icon-default'}
-    ${twClassName}
-  `;
-    const twTextClassNames = isDanger
-        ? isPressed || isLoading
-            ? 'text-error-default-pressed'
-            : 'text-error-default'
-        : isInverse
-            ? 'text-primary-inverse'
-            : 'text-default';
-    const onPressInHandler = (event) => {
-        setIsPressed(true);
-        onPressIn?.(event);
-    };
-    const onPressOutHandler = (event) => {
-        setIsPressed(false);
-        onPressOut?.(event);
-    };
+                : 'border-transparent';
+        }
+        return `${backgroundClass} ${borderClass} ${baseClasses}`;
+    }, [isInverse, isDanger, isLoading, twClassName]);
+    const getTextClassName = useCallback((pressed) => {
+        if (isDanger) {
+            return pressed || isLoading
+                ? 'text-error-default-pressed'
+                : 'text-error-default';
+        }
+        else if (isInverse) {
+            return 'text-primary-inverse';
+        }
+        else {
+            return 'text-default';
+        }
+    }, [isDanger, isInverse, isLoading]);
     return (<ButtonBase textProps={{
             variant: TextVariant.BodyMd,
             fontWeight: FontWeight.Medium,
             numberOfLines: 1,
             ellipsizeMode: 'clip',
             ...textProps,
-            twClassName: `${twTextClassNames} ${textProps?.twClassName ?? ''}`,
         }} spinnerProps={{
-            color: twTextClassNames,
-            loadingTextProps: {
-                twClassName: twTextClassNames,
-            },
             ...spinnerProps,
         }} startIconProps={{
             size: IconSize.Sm,
             ...startIconProps,
-            twClassName: `${twTextClassNames} ${startIconProps?.twClassName ?? ''}`,
         }} endIconProps={{
             size: IconSize.Sm,
             ...endIconProps,
-            twClassName: `${twTextClassNames} ${endIconProps?.twClassName ?? ''}`,
-        }} isLoading={isLoading} onPressIn={onPressInHandler} onPressOut={onPressOutHandler} style={[tw `${twContainerClassNames}`, style]} {...props}>
+        }} isLoading={isLoading} twClassName={getContainerClassName} textClassName={getTextClassName} iconClassName={getTextClassName} style={style} {...props}>
       {children}
     </ButtonBase>);
 };

package/dist/components/Button/variants/ButtonSecondary/ButtonSecondary.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonSecondary.mjs","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonSecondary/ButtonSecondary.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React, { useState } from 'react';\nimport type { GestureResponderEvent } from 'react-native';\n\nimport { ButtonBase } from '../../../ButtonBase';\nimport type { IconColor } from '../../../Icon';\nimport { IconSize } from '../../../Icon';\nimport { TextVariant, FontWeight } from '../../../Text';\n\nimport type { ButtonSecondaryProps } from './ButtonSecondary.types';\n\nexport const ButtonSecondary = ({\n  children,\n  textProps,\n  spinnerProps,\n  startIconProps,\n  endIconProps,\n  isDanger = false,\n  isInverse = false,\n  isLoading = false,\n  onPressIn,\n  onPressOut,\n  twClassName = '',\n  style,\n  ...props\n}: ButtonSecondaryProps) => {\n  const [isPressed, setIsPressed] = useState(false);\n  const tw = useTailwind();\n  const twContainerClassNames = `\n    ${\n      isInverse && isDanger\n        ? isPressed || isLoading\n          ? 'bg-default-pressed'\n          : 'bg-default'\n        : isDanger\n          ? isPressed || isLoading\n            ? 'bg-error-muted-pressed'\n            : 'bg-transparent'\n          : isPressed || isLoading\n            ? 'bg-pressed'\n            : 'bg-transparent'\n    }\n    border-[1.5px]\n    ${\n      isInverse && isDanger\n        ? isPressed || isLoading\n          ? 'border-background-default-pressed'\n          : 'border-background-default'\n        : isDanger\n          ? isPressed || isLoading\n            ? 'border-error-default-pressed'\n            : 'border-error-default'\n          : isInverse\n            ? 'border-primary-inverse'\n            : 'border-icon-default'\n    }\n    ${twClassName}\n  `;\n\n  const twTextClassNames = isDanger\n    ? isPressed || isLoading\n      ? 'text-error-default-pressed'\n      : 'text-error-default'\n    : isInverse\n      ? 'text-primary-inverse'\n      : 'text-default';\n\n  const onPressInHandler = (event: GestureResponderEvent) => {\n    setIsPressed(true);\n    onPressIn?.(event);\n  };\n\n  const onPressOutHandler = (event: GestureResponderEvent) => {\n    setIsPressed(false);\n    onPressOut?.(event);\n  };\n\n  return (\n    <ButtonBase\n      textProps={{\n        variant: TextVariant.BodyMd,\n        fontWeight: FontWeight.Medium,\n        numberOfLines: 1,\n        ellipsizeMode: 'clip',\n        ...textProps,\n        twClassName: `${twTextClassNames} ${textProps?.twClassName ?? ''}`,\n      }}\n      spinnerProps={{\n        color: twTextClassNames as IconColor,\n        loadingTextProps: {\n          twClassName: twTextClassNames,\n        },\n        ...spinnerProps,\n      }}\n      startIconProps={{\n        size: IconSize.Sm,\n        ...startIconProps,\n        twClassName: `${twTextClassNames} ${startIconProps?.twClassName ?? ''}`,\n      }}\n      endIconProps={{\n        size: IconSize.Sm,\n        ...endIconProps,\n        twClassName: `${twTextClassNames} ${endIconProps?.twClassName ?? ''}`,\n      }}\n      isLoading={isLoading}\n      onPressIn={onPressInHandler}\n      onPressOut={onPressOutHandler}\n      style={[tw`${twContainerClassNames}`, style]}\n      {...props}\n    >\n      {children}\n    </ButtonBase>\n  );\n};\n"]}
+{"version":3,"file":"ButtonSecondary.mjs","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonSecondary/ButtonSecondary.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React, { useCallback } from 'react';\n\nimport { ButtonBase } from '../../../ButtonBase';\nimport type { IconColor } from '../../../Icon';\nimport { IconSize } from '../../../Icon';\nimport { TextVariant, FontWeight } from '../../../Text';\n\nimport type { ButtonSecondaryProps } from './ButtonSecondary.types';\n\nexport const ButtonSecondary = ({\n  children,\n  textProps,\n  spinnerProps,\n  startIconProps,\n  endIconProps,\n  isDanger = false,\n  isInverse = false,\n  isLoading = false,\n  twClassName = '',\n  style,\n  ...props\n}: ButtonSecondaryProps) => {\n  const tw = useTailwind();\n\n  const getContainerClassName = useCallback(\n    (pressed: boolean): string => {\n      const baseClasses = `\n        border-[1.5px]\n        ${twClassName}\n      `;\n\n      let backgroundClass = '';\n      let borderClass = '';\n\n      if (isInverse && isDanger) {\n        backgroundClass =\n          pressed || isLoading ? 'bg-default-pressed' : 'bg-default';\n        borderClass =\n          pressed || isLoading\n            ? 'border-background-default-pressed'\n            : 'border-background-default';\n      } else if (isDanger) {\n        backgroundClass =\n          pressed || isLoading ? 'bg-muted-pressed' : 'bg-muted';\n        borderClass = 'border-transparent';\n      } else {\n        backgroundClass = isInverse\n          ? pressed || isLoading\n            ? 'bg-pressed'\n            : 'bg-transparent'\n          : pressed || isLoading\n            ? 'bg-muted-pressed'\n            : 'bg-muted';\n        borderClass = isInverse\n          ? 'border-primary-inverse'\n          : 'border-transparent';\n      }\n\n      return `${backgroundClass} ${borderClass} ${baseClasses}`;\n    },\n    [isInverse, isDanger, isLoading, twClassName],\n  );\n\n  const getTextClassName = useCallback(\n    (pressed: boolean): string => {\n      if (isDanger) {\n        return pressed || isLoading\n          ? 'text-error-default-pressed'\n          : 'text-error-default';\n      } else if (isInverse) {\n        return 'text-primary-inverse';\n      } else {\n        return 'text-default';\n      }\n    },\n    [isDanger, isInverse, isLoading],\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/Button/variants/ButtonTertiary/ButtonTertiary.cjs

@@ -29,79 +29,76 @@ 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 ButtonTertiary = ({ children, textProps, spinnerProps, startIconProps, endIconProps, isDanger = false, isInverse = false, isLoading = false, onPressIn, onPressOut, twClassName = '', style, ...props }) => {
-    const [isPressed, setIsPressed] = (0, react_1.useState)(false);
+const ButtonTertiary = ({ children, textProps, spinnerProps, startIconProps, endIconProps, isDanger = false, isInverse = false, isLoading = false, twClassName = '', style, ...props }) => {
     const tw = (0, design_system_twrnc_preset_1.useTailwind)();
-    const twContainerClassNames = `
-    ${isInverse && isDanger
-        ? isPressed || isLoading
-            ? 'bg-default-pressed'
-            : 'bg-default'
-        : isDanger
-            ? isPressed || isLoading
-                ? 'bg-error-muted-pressed'
-                : 'bg-transparent'
-            : isInverse
-                ? isPressed || isLoading
-                    ? 'bg-pressed'
-                    : 'bg-transparent'
-                : isPressed || isLoading
-                    ? 'bg-pressed'
-                    : 'bg-transparent'}
-    ${isInverse && !isDanger ? 'border-[1.5px]' : 'border-0'}
-    ${isInverse && isDanger
-        ? isPressed || isLoading
-            ? 'border-background-default-pressed'
-            : 'border-background-default'
-        : isDanger
-            ? isPressed || isLoading
-                ? 'border-error-muted-pressed'
-                : 'border-transparent'
-            : isInverse
-                ? 'border-primary-inverse'
-                : isPressed || isLoading
+    const getContainerClassName = (0, react_1.useCallback)((pressed) => {
+        const baseClasses = `
+        ${isInverse && !isDanger ? 'border-[1.5px]' : 'border-0'}
+        ${twClassName}
+      `;
+        let backgroundClass = '';
+        let borderClass = '';
+        if (isInverse && isDanger) {
+            backgroundClass =
+                pressed || isLoading ? 'bg-default-pressed' : 'bg-default';
+            borderClass =
+                pressed || isLoading
+                    ? 'border-background-default-pressed'
+                    : 'border-background-default';
+        }
+        else if (isDanger) {
+            backgroundClass =
+                pressed || isLoading ? 'bg-error-muted-pressed' : 'bg-transparent';
+            borderClass =
+                pressed || isLoading
+                    ? 'border-error-muted-pressed'
+                    : 'border-transparent';
+        }
+        else if (isInverse) {
+            backgroundClass =
+                pressed || isLoading ? 'bg-pressed' : 'bg-transparent';
+            borderClass = 'border-primary-inverse';
+        }
+        else {
+            backgroundClass =
+                pressed || isLoading ? 'bg-pressed' : 'bg-transparent';
+            borderClass =
+                pressed || isLoading
                     ? 'border-background-pressed'
-                    : 'border-transparent'}
-  `;
-    const twTextClassNames = isDanger
-        ? isPressed || isLoading
-            ? 'text-error-default-pressed'
-            : 'text-error-default'
-        : isInverse
-            ? 'text-primary-inverse'
-            : isPressed || isLoading
+                    : 'border-transparent';
+        }
+        return `${backgroundClass} ${borderClass} ${baseClasses}`;
+    }, [isInverse, isDanger, isLoading, twClassName]);
+    const getTextClassName = (0, react_1.useCallback)((pressed) => {
+        if (isDanger) {
+            return pressed || isLoading
+                ? 'text-error-default-pressed'
+                : 'text-error-default';
+        }
+        else if (isInverse) {
+            return 'text-primary-inverse';
+        }
+        else {
+            return pressed || isLoading
                 ? 'text-primary-default-pressed'
                 : 'text-primary-default';
-    const onPressInHandler = (event) => {
-        setIsPressed(true);
-        onPressIn?.(event);
-    };
-    const onPressOutHandler = (event) => {
-        setIsPressed(false);
-        onPressOut?.(event);
-    };
+        }
+    }, [isDanger, isInverse, isLoading]);
     return (<ButtonBase_1.ButtonBase textProps={{
             variant: Text_1.TextVariant.BodyMd,
             fontWeight: Text_1.FontWeight.Medium,
             numberOfLines: 1,
             ellipsizeMode: 'clip',
             ...textProps,
-            twClassName: `${twTextClassNames} ${textProps?.twClassName ?? ''}`,
         }} spinnerProps={{
-            color: twTextClassNames,
-            loadingTextProps: {
-                twClassName: twTextClassNames,
-            },
             ...spinnerProps,
         }} startIconProps={{
             size: Icon_1.IconSize.Sm,
             ...startIconProps,
-            twClassName: `${twTextClassNames} ${startIconProps?.twClassName ?? ''}`,
         }} endIconProps={{
             size: Icon_1.IconSize.Sm,
             ...endIconProps,
-            twClassName: `${twTextClassNames} ${endIconProps?.twClassName ?? ''}`,
-        }} isLoading={isLoading} onPressIn={onPressInHandler} onPressOut={onPressOutHandler} style={[tw `${twContainerClassNames}`, style]} {...props}>
+        }} isLoading={isLoading} twClassName={getContainerClassName} textClassName={getTextClassName} iconClassName={getTextClassName} style={style} {...props}>
       {children}
     </ButtonBase_1.ButtonBase>);
 };

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

@@ -1 +1 @@
-{"version":3,"file":"ButtonTertiary.cjs","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonTertiary/ButtonTertiary.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React, { useState } from 'react';\nimport type { GestureResponderEvent } from 'react-native';\n\nimport { ButtonBase } from '../../../ButtonBase';\nimport type { IconColor } from '../../../Icon';\nimport { IconSize } from '../../../Icon';\nimport { TextVariant, FontWeight } from '../../../Text';\n\nimport type { ButtonTertiaryProps } from './ButtonTertiary.types';\n\nexport const ButtonTertiary = ({\n  children,\n  textProps,\n  spinnerProps,\n  startIconProps,\n  endIconProps,\n  isDanger = false,\n  isInverse = false,\n  isLoading = false,\n  onPressIn,\n  onPressOut,\n  twClassName = '',\n  style,\n  ...props\n}: ButtonTertiaryProps) => {\n  const [isPressed, setIsPressed] = useState(false);\n  const tw = useTailwind();\n  const twContainerClassNames = `\n    ${\n      isInverse && isDanger\n        ? isPressed || isLoading\n          ? 'bg-default-pressed'\n          : 'bg-default'\n        : isDanger\n          ? isPressed || isLoading\n            ? 'bg-error-muted-pressed'\n            : 'bg-transparent'\n          : isInverse\n            ? isPressed || isLoading\n              ? 'bg-pressed'\n              : 'bg-transparent'\n            : isPressed || isLoading\n              ? 'bg-pressed'\n              : 'bg-transparent'\n    }\n    ${isInverse && !isDanger ? 'border-[1.5px]' : 'border-0'}\n    ${\n      isInverse && isDanger\n        ? isPressed || isLoading\n          ? 'border-background-default-pressed'\n          : 'border-background-default'\n        : isDanger\n          ? isPressed || isLoading\n            ? 'border-error-muted-pressed'\n            : 'border-transparent'\n          : isInverse\n            ? 'border-primary-inverse'\n            : isPressed || isLoading\n              ? 'border-background-pressed'\n              : 'border-transparent'\n    }\n  `;\n\n  const twTextClassNames = isDanger\n    ? isPressed || isLoading\n      ? 'text-error-default-pressed'\n      : 'text-error-default'\n    : isInverse\n      ? 'text-primary-inverse'\n      : isPressed || isLoading\n        ? 'text-primary-default-pressed'\n        : 'text-primary-default';\n\n  const onPressInHandler = (event: GestureResponderEvent) => {\n    setIsPressed(true);\n    onPressIn?.(event);\n  };\n\n  const onPressOutHandler = (event: GestureResponderEvent) => {\n    setIsPressed(false);\n    onPressOut?.(event);\n  };\n\n  return (\n    <ButtonBase\n      textProps={{\n        variant: TextVariant.BodyMd,\n        fontWeight: FontWeight.Medium,\n        numberOfLines: 1,\n        ellipsizeMode: 'clip',\n        ...textProps,\n        twClassName: `${twTextClassNames} ${textProps?.twClassName ?? ''}`,\n      }}\n      spinnerProps={{\n        color: twTextClassNames as IconColor,\n        loadingTextProps: {\n          twClassName: twTextClassNames,\n        },\n        ...spinnerProps,\n      }}\n      startIconProps={{\n        size: IconSize.Sm,\n        ...startIconProps,\n        twClassName: `${twTextClassNames} ${startIconProps?.twClassName ?? ''}`,\n      }}\n      endIconProps={{\n        size: IconSize.Sm,\n        ...endIconProps,\n        twClassName: `${twTextClassNames} ${endIconProps?.twClassName ?? ''}`,\n      }}\n      isLoading={isLoading}\n      onPressIn={onPressInHandler}\n      onPressOut={onPressOutHandler}\n      style={[tw`${twContainerClassNames}`, style]}\n      {...props}\n    >\n      {children}\n    </ButtonBase>\n  );\n};\n"]}
+{"version":3,"file":"ButtonTertiary.cjs","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonTertiary/ButtonTertiary.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React, { useCallback } from 'react';\n\nimport { ButtonBase } from '../../../ButtonBase';\nimport type { IconColor } from '../../../Icon';\nimport { IconSize } from '../../../Icon';\nimport { TextVariant, FontWeight } from '../../../Text';\n\nimport type { ButtonTertiaryProps } from './ButtonTertiary.types';\n\nexport const ButtonTertiary = ({\n  children,\n  textProps,\n  spinnerProps,\n  startIconProps,\n  endIconProps,\n  isDanger = false,\n  isInverse = false,\n  isLoading = false,\n  twClassName = '',\n  style,\n  ...props\n}: ButtonTertiaryProps) => {\n  const tw = useTailwind();\n\n  const getContainerClassName = useCallback(\n    (pressed: boolean): string => {\n      const baseClasses = `\n        ${isInverse && !isDanger ? 'border-[1.5px]' : 'border-0'}\n        ${twClassName}\n      `;\n\n      let backgroundClass = '';\n      let borderClass = '';\n\n      if (isInverse && isDanger) {\n        backgroundClass =\n          pressed || isLoading ? 'bg-default-pressed' : 'bg-default';\n        borderClass =\n          pressed || isLoading\n            ? 'border-background-default-pressed'\n            : 'border-background-default';\n      } else if (isDanger) {\n        backgroundClass =\n          pressed || isLoading ? 'bg-error-muted-pressed' : 'bg-transparent';\n        borderClass =\n          pressed || isLoading\n            ? 'border-error-muted-pressed'\n            : 'border-transparent';\n      } else if (isInverse) {\n        backgroundClass =\n          pressed || isLoading ? 'bg-pressed' : 'bg-transparent';\n        borderClass = 'border-primary-inverse';\n      } else {\n        backgroundClass =\n          pressed || isLoading ? 'bg-pressed' : 'bg-transparent';\n        borderClass =\n          pressed || isLoading\n            ? 'border-background-pressed'\n            : 'border-transparent';\n      }\n\n      return `${backgroundClass} ${borderClass} ${baseClasses}`;\n    },\n    [isInverse, isDanger, isLoading, twClassName],\n  );\n\n  const getTextClassName = useCallback(\n    (pressed: boolean): string => {\n      if (isDanger) {\n        return pressed || isLoading\n          ? 'text-error-default-pressed'\n          : 'text-error-default';\n      } else if (isInverse) {\n        return 'text-primary-inverse';\n      } else {\n        return pressed || isLoading\n          ? 'text-primary-default-pressed'\n          : 'text-primary-default';\n      }\n    },\n    [isDanger, isInverse, isLoading],\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/Button/variants/ButtonTertiary/ButtonTertiary.d.cts

@@ -1,4 +1,4 @@
 import React from "react";
 import type { ButtonTertiaryProps } from "./ButtonTertiary.types.cjs";
-export declare const ButtonTertiary: ({ children, textProps, spinnerProps, startIconProps, endIconProps, isDanger, isInverse, isLoading, onPressIn, onPressOut, twClassName, style, ...props }: ButtonTertiaryProps) => React.JSX.Element;
+export declare const ButtonTertiary: ({ children, textProps, spinnerProps, startIconProps, endIconProps, isDanger, isInverse, isLoading, twClassName, style, ...props }: ButtonTertiaryProps) => React.JSX.Element;
 //# sourceMappingURL=ButtonTertiary.d.cts.map

package/dist/components/Button/variants/ButtonTertiary/ButtonTertiary.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonTertiary.d.cts","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonTertiary/ButtonTertiary.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmB,cAAc;AAQxC,OAAO,KAAK,EAAE,mBAAmB,EAAE,mCAA+B;AAElE,eAAO,MAAM,cAAc,6JAcxB,mBAAmB,sBA+FrB,CAAC"}
+{"version":3,"file":"ButtonTertiary.d.cts","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonTertiary/ButtonTertiary.tsx"],"names":[],"mappings":"AACA,OAAO,KAAsB,cAAc;AAO3C,OAAO,KAAK,EAAE,mBAAmB,EAAE,mCAA+B;AAElE,eAAO,MAAM,cAAc,sIAYxB,mBAAmB,sBA4FrB,CAAC"}

package/dist/components/Button/variants/ButtonTertiary/ButtonTertiary.d.mts

@@ -1,4 +1,4 @@
 import React from "react";
 import type { ButtonTertiaryProps } from "./ButtonTertiary.types.mjs";
-export declare const ButtonTertiary: ({ children, textProps, spinnerProps, startIconProps, endIconProps, isDanger, isInverse, isLoading, onPressIn, onPressOut, twClassName, style, ...props }: ButtonTertiaryProps) => React.JSX.Element;
+export declare const ButtonTertiary: ({ children, textProps, spinnerProps, startIconProps, endIconProps, isDanger, isInverse, isLoading, twClassName, style, ...props }: ButtonTertiaryProps) => React.JSX.Element;
 //# sourceMappingURL=ButtonTertiary.d.mts.map

package/dist/components/Button/variants/ButtonTertiary/ButtonTertiary.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonTertiary.d.mts","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonTertiary/ButtonTertiary.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmB,cAAc;AAQxC,OAAO,KAAK,EAAE,mBAAmB,EAAE,mCAA+B;AAElE,eAAO,MAAM,cAAc,6JAcxB,mBAAmB,sBA+FrB,CAAC"}
+{"version":3,"file":"ButtonTertiary.d.mts","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonTertiary/ButtonTertiary.tsx"],"names":[],"mappings":"AACA,OAAO,KAAsB,cAAc;AAO3C,OAAO,KAAK,EAAE,mBAAmB,EAAE,mCAA+B;AAElE,eAAO,MAAM,cAAc,sIAYxB,mBAAmB,sBA4FrB,CAAC"}

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

@@ -5,84 +5,81 @@ function $importDefault(module) {
     return module;
 }
 import { useTailwind } from "@metamask-previews/design-system-twrnc-preset";
-import $React, { useState } from "react";
+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";
-export const ButtonTertiary = ({ children, textProps, spinnerProps, startIconProps, endIconProps, isDanger = false, isInverse = false, isLoading = false, onPressIn, onPressOut, twClassName = '', style, ...props }) => {
-    const [isPressed, setIsPressed] = useState(false);
+export const ButtonTertiary = ({ children, textProps, spinnerProps, startIconProps, endIconProps, isDanger = false, isInverse = false, isLoading = false, twClassName = '', style, ...props }) => {
     const tw = useTailwind();
-    const twContainerClassNames = `
-    ${isInverse && isDanger
-        ? isPressed || isLoading
-            ? 'bg-default-pressed'
-            : 'bg-default'
-        : isDanger
-            ? isPressed || isLoading
-                ? 'bg-error-muted-pressed'
-                : 'bg-transparent'
-            : isInverse
-                ? isPressed || isLoading
-                    ? 'bg-pressed'
-                    : 'bg-transparent'
-                : isPressed || isLoading
-                    ? 'bg-pressed'
-                    : 'bg-transparent'}
-    ${isInverse && !isDanger ? 'border-[1.5px]' : 'border-0'}
-    ${isInverse && isDanger
-        ? isPressed || isLoading
-            ? 'border-background-default-pressed'
-            : 'border-background-default'
-        : isDanger
-            ? isPressed || isLoading
-                ? 'border-error-muted-pressed'
-                : 'border-transparent'
-            : isInverse
-                ? 'border-primary-inverse'
-                : isPressed || isLoading
+    const getContainerClassName = useCallback((pressed) => {
+        const baseClasses = `
+        ${isInverse && !isDanger ? 'border-[1.5px]' : 'border-0'}
+        ${twClassName}
+      `;
+        let backgroundClass = '';
+        let borderClass = '';
+        if (isInverse && isDanger) {
+            backgroundClass =
+                pressed || isLoading ? 'bg-default-pressed' : 'bg-default';
+            borderClass =
+                pressed || isLoading
+                    ? 'border-background-default-pressed'
+                    : 'border-background-default';
+        }
+        else if (isDanger) {
+            backgroundClass =
+                pressed || isLoading ? 'bg-error-muted-pressed' : 'bg-transparent';
+            borderClass =
+                pressed || isLoading
+                    ? 'border-error-muted-pressed'
+                    : 'border-transparent';
+        }
+        else if (isInverse) {
+            backgroundClass =
+                pressed || isLoading ? 'bg-pressed' : 'bg-transparent';
+            borderClass = 'border-primary-inverse';
+        }
+        else {
+            backgroundClass =
+                pressed || isLoading ? 'bg-pressed' : 'bg-transparent';
+            borderClass =
+                pressed || isLoading
                     ? 'border-background-pressed'
-                    : 'border-transparent'}
-  `;
-    const twTextClassNames = isDanger
-        ? isPressed || isLoading
-            ? 'text-error-default-pressed'
-            : 'text-error-default'
-        : isInverse
-            ? 'text-primary-inverse'
-            : isPressed || isLoading
+                    : 'border-transparent';
+        }
+        return `${backgroundClass} ${borderClass} ${baseClasses}`;
+    }, [isInverse, isDanger, isLoading, twClassName]);
+    const getTextClassName = useCallback((pressed) => {
+        if (isDanger) {
+            return pressed || isLoading
+                ? 'text-error-default-pressed'
+                : 'text-error-default';
+        }
+        else if (isInverse) {
+            return 'text-primary-inverse';
+        }
+        else {
+            return pressed || isLoading
                 ? 'text-primary-default-pressed'
                 : 'text-primary-default';
-    const onPressInHandler = (event) => {
-        setIsPressed(true);
-        onPressIn?.(event);
-    };
-    const onPressOutHandler = (event) => {
-        setIsPressed(false);
-        onPressOut?.(event);
-    };
+        }
+    }, [isDanger, isInverse, isLoading]);
     return (<ButtonBase textProps={{
             variant: TextVariant.BodyMd,
             fontWeight: FontWeight.Medium,
             numberOfLines: 1,
             ellipsizeMode: 'clip',
             ...textProps,
-            twClassName: `${twTextClassNames} ${textProps?.twClassName ?? ''}`,
         }} spinnerProps={{
-            color: twTextClassNames,
-            loadingTextProps: {
-                twClassName: twTextClassNames,
-            },
             ...spinnerProps,
         }} startIconProps={{
             size: IconSize.Sm,
             ...startIconProps,
-            twClassName: `${twTextClassNames} ${startIconProps?.twClassName ?? ''}`,
         }} endIconProps={{
             size: IconSize.Sm,
             ...endIconProps,
-            twClassName: `${twTextClassNames} ${endIconProps?.twClassName ?? ''}`,
-        }} isLoading={isLoading} onPressIn={onPressInHandler} onPressOut={onPressOutHandler} style={[tw `${twContainerClassNames}`, style]} {...props}>
+        }} isLoading={isLoading} twClassName={getContainerClassName} textClassName={getTextClassName} iconClassName={getTextClassName} style={style} {...props}>
       {children}
     </ButtonBase>);
 };

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

@@ -1 +1 @@
-{"version":3,"file":"ButtonTertiary.mjs","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonTertiary/ButtonTertiary.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React, { useState } from 'react';\nimport type { GestureResponderEvent } from 'react-native';\n\nimport { ButtonBase } from '../../../ButtonBase';\nimport type { IconColor } from '../../../Icon';\nimport { IconSize } from '../../../Icon';\nimport { TextVariant, FontWeight } from '../../../Text';\n\nimport type { ButtonTertiaryProps } from './ButtonTertiary.types';\n\nexport const ButtonTertiary = ({\n  children,\n  textProps,\n  spinnerProps,\n  startIconProps,\n  endIconProps,\n  isDanger = false,\n  isInverse = false,\n  isLoading = false,\n  onPressIn,\n  onPressOut,\n  twClassName = '',\n  style,\n  ...props\n}: ButtonTertiaryProps) => {\n  const [isPressed, setIsPressed] = useState(false);\n  const tw = useTailwind();\n  const twContainerClassNames = `\n    ${\n      isInverse && isDanger\n        ? isPressed || isLoading\n          ? 'bg-default-pressed'\n          : 'bg-default'\n        : isDanger\n          ? isPressed || isLoading\n            ? 'bg-error-muted-pressed'\n            : 'bg-transparent'\n          : isInverse\n            ? isPressed || isLoading\n              ? 'bg-pressed'\n              : 'bg-transparent'\n            : isPressed || isLoading\n              ? 'bg-pressed'\n              : 'bg-transparent'\n    }\n    ${isInverse && !isDanger ? 'border-[1.5px]' : 'border-0'}\n    ${\n      isInverse && isDanger\n        ? isPressed || isLoading\n          ? 'border-background-default-pressed'\n          : 'border-background-default'\n        : isDanger\n          ? isPressed || isLoading\n            ? 'border-error-muted-pressed'\n            : 'border-transparent'\n          : isInverse\n            ? 'border-primary-inverse'\n            : isPressed || isLoading\n              ? 'border-background-pressed'\n              : 'border-transparent'\n    }\n  `;\n\n  const twTextClassNames = isDanger\n    ? isPressed || isLoading\n      ? 'text-error-default-pressed'\n      : 'text-error-default'\n    : isInverse\n      ? 'text-primary-inverse'\n      : isPressed || isLoading\n        ? 'text-primary-default-pressed'\n        : 'text-primary-default';\n\n  const onPressInHandler = (event: GestureResponderEvent) => {\n    setIsPressed(true);\n    onPressIn?.(event);\n  };\n\n  const onPressOutHandler = (event: GestureResponderEvent) => {\n    setIsPressed(false);\n    onPressOut?.(event);\n  };\n\n  return (\n    <ButtonBase\n      textProps={{\n        variant: TextVariant.BodyMd,\n        fontWeight: FontWeight.Medium,\n        numberOfLines: 1,\n        ellipsizeMode: 'clip',\n        ...textProps,\n        twClassName: `${twTextClassNames} ${textProps?.twClassName ?? ''}`,\n      }}\n      spinnerProps={{\n        color: twTextClassNames as IconColor,\n        loadingTextProps: {\n          twClassName: twTextClassNames,\n        },\n        ...spinnerProps,\n      }}\n      startIconProps={{\n        size: IconSize.Sm,\n        ...startIconProps,\n        twClassName: `${twTextClassNames} ${startIconProps?.twClassName ?? ''}`,\n      }}\n      endIconProps={{\n        size: IconSize.Sm,\n        ...endIconProps,\n        twClassName: `${twTextClassNames} ${endIconProps?.twClassName ?? ''}`,\n      }}\n      isLoading={isLoading}\n      onPressIn={onPressInHandler}\n      onPressOut={onPressOutHandler}\n      style={[tw`${twContainerClassNames}`, style]}\n      {...props}\n    >\n      {children}\n    </ButtonBase>\n  );\n};\n"]}
+{"version":3,"file":"ButtonTertiary.mjs","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonTertiary/ButtonTertiary.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React, { useCallback } from 'react';\n\nimport { ButtonBase } from '../../../ButtonBase';\nimport type { IconColor } from '../../../Icon';\nimport { IconSize } from '../../../Icon';\nimport { TextVariant, FontWeight } from '../../../Text';\n\nimport type { ButtonTertiaryProps } from './ButtonTertiary.types';\n\nexport const ButtonTertiary = ({\n  children,\n  textProps,\n  spinnerProps,\n  startIconProps,\n  endIconProps,\n  isDanger = false,\n  isInverse = false,\n  isLoading = false,\n  twClassName = '',\n  style,\n  ...props\n}: ButtonTertiaryProps) => {\n  const tw = useTailwind();\n\n  const getContainerClassName = useCallback(\n    (pressed: boolean): string => {\n      const baseClasses = `\n        ${isInverse && !isDanger ? 'border-[1.5px]' : 'border-0'}\n        ${twClassName}\n      `;\n\n      let backgroundClass = '';\n      let borderClass = '';\n\n      if (isInverse && isDanger) {\n        backgroundClass =\n          pressed || isLoading ? 'bg-default-pressed' : 'bg-default';\n        borderClass =\n          pressed || isLoading\n            ? 'border-background-default-pressed'\n            : 'border-background-default';\n      } else if (isDanger) {\n        backgroundClass =\n          pressed || isLoading ? 'bg-error-muted-pressed' : 'bg-transparent';\n        borderClass =\n          pressed || isLoading\n            ? 'border-error-muted-pressed'\n            : 'border-transparent';\n      } else if (isInverse) {\n        backgroundClass =\n          pressed || isLoading ? 'bg-pressed' : 'bg-transparent';\n        borderClass = 'border-primary-inverse';\n      } else {\n        backgroundClass =\n          pressed || isLoading ? 'bg-pressed' : 'bg-transparent';\n        borderClass =\n          pressed || isLoading\n            ? 'border-background-pressed'\n            : 'border-transparent';\n      }\n\n      return `${backgroundClass} ${borderClass} ${baseClasses}`;\n    },\n    [isInverse, isDanger, isLoading, twClassName],\n  );\n\n  const getTextClassName = useCallback(\n    (pressed: boolean): string => {\n      if (isDanger) {\n        return pressed || isLoading\n          ? 'text-error-default-pressed'\n          : 'text-error-default';\n      } else if (isInverse) {\n        return 'text-primary-inverse';\n      } else {\n        return pressed || isLoading\n          ? 'text-primary-default-pressed'\n          : 'text-primary-default';\n      }\n    },\n    [isDanger, isInverse, isLoading],\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"]}