@metamask-previews/design-system-react-native 0.0.0-preview.ad2f94b → 0.0.0-preview.e1b50dd

package/dist/components/Button/variants/ButtonPrimary/ButtonPrimary.constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonPrimary.constants.js","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonPrimary/ButtonPrimary.constants.ts"],"names":[],"mappings":";;;AAAA,iGAAkG;AAClG,wCAA0C;AAC1C,wCAA0C;AAG1C,WAAW;AACE,QAAA,2BAA2B,GAYpC;IACF,GAAG,+CAAwB;IAC3B,SAAS,EAAE;QACT,GAAG,+CAAwB,CAAC,SAAS;QACrC,KAAK,EAAE,gBAAS,CAAC,cAAc;KAChC;IACD,YAAY,EAAE;QACZ,GAAG,+CAAwB,CAAC,YAAY;QACxC,KAAK,EAAE,gBAAS,CAAC,cAAc;KAChC;IACD,cAAc,EAAE;QACd,GAAG,+CAAwB,CAAC,cAAc;QAC1C,KAAK,EAAE,gBAAS,CAAC,cAAc;KAChC;IACD,YAAY,EAAE;QACZ,GAAG,+CAAwB,CAAC,YAAY;QACxC,KAAK,EAAE,gBAAS,CAAC,cAAc;KAChC;IACD,QAAQ,EAAE,KAAK;IACf,SAAS,EAAE,KAAK;CACjB,CAAC","sourcesContent":["import { DEFAULT_BUTTONBASE_PROPS } from '../../../../primitives/ButtonBase/ButtonBase.constants';\nimport { IconColor } from '../../../Icon';\nimport { TextColor } from '../../../Text';\nimport type { ButtonPrimaryProps } from './ButtonPrimary.types';\n\n// Defaults\nexport const DEFAULT_BUTTONPRIMARY_PROPS: Pick<\n  ButtonPrimaryProps,\n  | 'textProps'\n  | 'size'\n  | 'isLoading'\n  | 'spinnerProps'\n  | 'startIconProps'\n  | 'endIconProps'\n  | 'isDisabled'\n  | 'isFullWidth'\n  | 'isDanger'\n  | 'isInverse'\n> = {\n  ...DEFAULT_BUTTONBASE_PROPS,\n  textProps: {\n    ...DEFAULT_BUTTONBASE_PROPS.textProps,\n    color: TextColor.PrimaryInverse,\n  },\n  spinnerProps: {\n    ...DEFAULT_BUTTONBASE_PROPS.spinnerProps,\n    color: IconColor.PrimaryInverse,\n  },\n  startIconProps: {\n    ...DEFAULT_BUTTONBASE_PROPS.startIconProps,\n    color: IconColor.PrimaryInverse,\n  },\n  endIconProps: {\n    ...DEFAULT_BUTTONBASE_PROPS.endIconProps,\n    color: IconColor.PrimaryInverse,\n  },\n  isDanger: false,\n  isInverse: false,\n};\n"]}

package/dist/components/Button/variants/ButtonPrimary/ButtonPrimary.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { ButtonPrimaryProps } from './ButtonPrimary.types';
+declare const ButtonPrimary: ({ isInverse, ...props }: ButtonPrimaryProps) => React.JSX.Element;
+export default ButtonPrimary;
+//# sourceMappingURL=ButtonPrimary.d.ts.map

package/dist/components/Button/variants/ButtonPrimary/ButtonPrimary.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonPrimary.d.ts","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonPrimary/ButtonPrimary.tsx"],"names":[],"mappings":"AAKA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAQjD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAqGhE,QAAA,MAAM,aAAa,4BAA6B,kBAAkB,sBAKjE,CAAC;AACF,eAAe,aAAa,CAAC"}

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

@@ -0,0 +1,97 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const design_system_twrnc_preset_1 = require("@metamask-previews/design-system-twrnc-preset");
+const react_1 = __importStar(require("react"));
+const ButtonBase_1 = __importDefault(require("../../../../primitives/ButtonBase"));
+const ButtonPrimary_constants_1 = require("./ButtonPrimary.constants");
+const ButtonPrimary_utilities_1 = require("./ButtonPrimary.utilities");
+const ButtonPrimaryBase = ({ children, textProps, spinnerProps, startIconProps, endIconProps, isDanger = ButtonPrimary_constants_1.DEFAULT_BUTTONPRIMARY_PROPS.isDanger, isInverse = ButtonPrimary_constants_1.DEFAULT_BUTTONPRIMARY_PROPS.isInverse, isLoading = ButtonPrimary_constants_1.DEFAULT_BUTTONPRIMARY_PROPS.isLoading, onPressIn, onPressOut, twClassName, style, ...props }) => {
+    const [isPressed, setIsPressed] = (0, react_1.useState)(false);
+    const tw = (0, design_system_twrnc_preset_1.useTailwind)();
+    const twContainerClassNames = (0, react_1.useMemo)(() => {
+        return (0, ButtonPrimary_utilities_1.generateButtonPrimaryContainerClassNames)({
+            isPressed,
+            isDanger,
+            isInverse,
+            isLoading,
+            twClassName,
+        });
+    }, [isPressed, isDanger, isInverse, isLoading, twClassName]);
+    const twTextClassNames = (0, react_1.useMemo)(() => {
+        return (0, ButtonPrimary_utilities_1.generateButtonPrimaryTextClassNames)({
+            isPressed,
+            isDanger,
+            isInverse,
+            isLoading,
+        });
+    }, [isPressed, isDanger, isInverse, isLoading]);
+    const finalTextProps = {
+        ...ButtonPrimary_constants_1.DEFAULT_BUTTONPRIMARY_PROPS.textProps,
+        ...textProps,
+        twClassName: `${twTextClassNames} ${textProps?.twClassName ?? ''}`,
+    };
+    const finalStartIconProps = {
+        ...ButtonPrimary_constants_1.DEFAULT_BUTTONPRIMARY_PROPS.startIconProps,
+        ...startIconProps,
+        twClassName: `${twTextClassNames} ${startIconProps?.twClassName ?? ''}`,
+    };
+    const finalEndIconProps = {
+        ...ButtonPrimary_constants_1.DEFAULT_BUTTONPRIMARY_PROPS.endIconProps,
+        ...endIconProps,
+        twClassName: `${twTextClassNames} ${startIconProps?.twClassName ?? ''}`,
+    };
+    const finalSpinnerProps = {
+        ...ButtonPrimary_constants_1.DEFAULT_BUTTONPRIMARY_PROPS.spinnerProps,
+        color: twTextClassNames,
+        loadingTextProps: {
+            twClassName: twTextClassNames,
+        },
+        ...spinnerProps,
+    };
+    const onPressInHandler = (event) => {
+        setIsPressed(true);
+        onPressIn?.(event);
+    };
+    const onPressOutHandler = (event) => {
+        setIsPressed(false);
+        onPressOut?.(event);
+    };
+    return (<ButtonBase_1.default textProps={finalTextProps} spinnerProps={finalSpinnerProps} startIconProps={finalStartIconProps} endIconProps={finalEndIconProps} isLoading={isLoading} onPressIn={onPressInHandler} onPressOut={onPressOutHandler} style={[tw `${twContainerClassNames}`, style]} testID="button-primary" {...props}>
+      {children}
+    </ButtonBase_1.default>);
+};
+const ButtonPrimaryLightOnly = (0, design_system_twrnc_preset_1.withThemeProvider)(ButtonPrimaryBase, design_system_twrnc_preset_1.Theme.Light);
+const ButtonPrimary = ({ isInverse, ...props }) => {
+    if (isInverse) {
+        return <ButtonPrimaryBase isInverse={isInverse} {...props}/>;
+    }
+    return <ButtonPrimaryLightOnly isInverse={isInverse} {...props}/>;
+};
+exports.default = ButtonPrimary;
+//# sourceMappingURL=ButtonPrimary.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonPrimary.js","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonPrimary/ButtonPrimary.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  useTailwind,\n  withThemeProvider,\n  Theme,\n} from '@metamask-previews/design-system-twrnc-preset';\nimport React, { useMemo, useState } from 'react';\nimport type { GestureResponderEvent } from 'react-native';\n\nimport ButtonBase from '../../../../primitives/ButtonBase';\nimport type { SpinnerProps } from '../../../../temp-components/Spinner';\nimport type { IconProps, IconColor } from '../../../Icon';\nimport type { TextProps } from '../../../Text/Text.types';\nimport { DEFAULT_BUTTONPRIMARY_PROPS } from './ButtonPrimary.constants';\nimport type { ButtonPrimaryProps } from './ButtonPrimary.types';\nimport {\n  generateButtonPrimaryContainerClassNames,\n  generateButtonPrimaryTextClassNames,\n} from './ButtonPrimary.utilities';\n\nconst ButtonPrimaryBase = ({\n  children,\n  textProps,\n  spinnerProps,\n  startIconProps,\n  endIconProps,\n  isDanger = DEFAULT_BUTTONPRIMARY_PROPS.isDanger,\n  isInverse = DEFAULT_BUTTONPRIMARY_PROPS.isInverse,\n  isLoading = DEFAULT_BUTTONPRIMARY_PROPS.isLoading,\n  onPressIn,\n  onPressOut,\n  twClassName,\n  style,\n  ...props\n}: ButtonPrimaryProps) => {\n  const [isPressed, setIsPressed] = useState(false);\n  const tw = useTailwind();\n  const twContainerClassNames = useMemo(() => {\n    return generateButtonPrimaryContainerClassNames({\n      isPressed,\n      isDanger,\n      isInverse,\n      isLoading,\n      twClassName,\n    });\n  }, [isPressed, isDanger, isInverse, isLoading, twClassName]);\n\n  const twTextClassNames = useMemo(() => {\n    return generateButtonPrimaryTextClassNames({\n      isPressed,\n      isDanger,\n      isInverse,\n      isLoading,\n    });\n  }, [isPressed, isDanger, isInverse, isLoading]);\n\n  const finalTextProps: Omit<Partial<TextProps>, 'children'> = {\n    ...DEFAULT_BUTTONPRIMARY_PROPS.textProps,\n    ...textProps,\n    twClassName: `${twTextClassNames} ${textProps?.twClassName ?? ''}`,\n  };\n  const finalStartIconProps: Partial<IconProps> = {\n    ...DEFAULT_BUTTONPRIMARY_PROPS.startIconProps,\n    ...startIconProps,\n    twClassName: `${twTextClassNames} ${startIconProps?.twClassName ?? ''}`,\n  };\n\n  const finalEndIconProps: Partial<IconProps> = {\n    ...DEFAULT_BUTTONPRIMARY_PROPS.endIconProps,\n    ...endIconProps,\n    twClassName: `${twTextClassNames} ${startIconProps?.twClassName ?? ''}`,\n  };\n\n  const finalSpinnerProps: SpinnerProps = {\n    ...DEFAULT_BUTTONPRIMARY_PROPS.spinnerProps,\n    color: twTextClassNames as IconColor,\n    loadingTextProps: {\n      twClassName: twTextClassNames,\n    },\n    ...spinnerProps,\n  };\n\n  const onPressInHandler = (event: GestureResponderEvent) => {\n    setIsPressed(true);\n    onPressIn?.(event);\n  };\n\n  const onPressOutHandler = (event: GestureResponderEvent) => {\n    setIsPressed(false);\n    onPressOut?.(event);\n  };\n\n  return (\n    <ButtonBase\n      textProps={finalTextProps}\n      spinnerProps={finalSpinnerProps}\n      startIconProps={finalStartIconProps}\n      endIconProps={finalEndIconProps}\n      isLoading={isLoading}\n      onPressIn={onPressInHandler}\n      onPressOut={onPressOutHandler}\n      style={[tw`${twContainerClassNames}`, style]}\n      testID=\"button-primary\"\n      {...props}\n    >\n      {children}\n    </ButtonBase>\n  );\n};\n\nconst ButtonPrimaryLightOnly = withThemeProvider(\n  ButtonPrimaryBase,\n  Theme.Light,\n);\n\nconst ButtonPrimary = ({ isInverse, ...props }: ButtonPrimaryProps) => {\n  if (isInverse) {\n    return <ButtonPrimaryBase isInverse={isInverse} {...props} />;\n  }\n  return <ButtonPrimaryLightOnly isInverse={isInverse} {...props} />;\n};\nexport default ButtonPrimary;\n"]}

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

@@ -0,0 +1,17 @@
+import type { ButtonBaseProps } from '../../../../primitives/ButtonBase';
+/**
+ * ButtonPrimary component props.
+ */
+export type ButtonPrimaryProps = {
+    /**
+     * Optional prop to show the danger state of the button.
+     * @default false
+     */
+    isDanger?: boolean;
+    /**
+     * Optional prop to show the inverse state of the button, which is reserved for buttons on colored backgrounds.
+     * @default false
+     */
+    isInverse?: boolean;
+} & ButtonBaseProps;
+//# sourceMappingURL=ButtonPrimary.types.d.ts.map

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

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

package/dist/components/Button/variants/ButtonPrimary/ButtonPrimary.types.js

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

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

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

package/dist/components/Button/variants/ButtonPrimary/ButtonPrimary.utilities.d.ts

@@ -0,0 +1,78 @@
+import type { ButtonPrimaryProps } from './ButtonPrimary.types';
+/**
+ * Generates a Tailwind class name for the container based on its state and optional additional classes.
+ *
+ * This function computes the appropriate background class name for a button's container, considering its
+ * `isPressed`, `isDanger`, `isInverse`, and `isLoading` states. Additional Tailwind class names can
+ * also be appended using the `twClassName` parameter.
+ *
+ * @param isPressed - Indicates whether the button is currently being pressed.
+ * @param isDanger - Indicates whether the button is in a "danger" state.
+ * @param isInverse - Indicates whether the button is using an "inverse" theme.
+ * @param isLoading - Indicates whether the button is in a loading state.
+ * @param twClassName - Additional Tailwind class names for customization.
+ * @returns A combined string of Tailwind class names for the container's background styling.
+ *
+ * Example:
+ * ```
+ * const classNames = generateButtonPrimaryContainerClassNames({
+ *   isPressed: true,
+ *   isDanger: false,
+ *   isInverse: true,
+ *   isLoading: false,
+ *   twClassName: 'rounded-lg',
+ * });
+ *
+ * console.log(classNames);
+ * // Output: "bg-background-defaultPressed rounded-lg"
+ * ```
+ */
+export declare const generateButtonPrimaryContainerClassNames: ({ isPressed, isDanger, isInverse, isLoading, twClassName, }: Partial<ButtonPrimaryProps> & {
+    isPressed?: boolean | undefined;
+}) => string;
+/**
+ * Generates a Tailwind class name for the text based on the button's state.
+ *
+ * This function calculates the appropriate text color class for a button based on its
+ * `isPressed`, `isDanger`, `isInverse`, and `isLoading` states. The returned class
+ * name determines how the button's text will be styled dynamically.
+ *
+ * @param isPressed - Indicates whether the button is currently being pressed.
+ * @param isDanger - Indicates whether the button is in a "danger" state.
+ * @param isInverse - Indicates whether the button is using an "inverse" theme.
+ * @param isLoading - Indicates whether the button is in a loading state.
+ * @returns A string representing the Tailwind class for the text color.
+ *
+ * Example:
+ * ```
+ * const classNames = generateButtonPrimaryTextClassNames({
+ *   isPressed: true,
+ *   isDanger: false,
+ *   isInverse: true,
+ *   isLoading: false,
+ * });
+ *
+ * console.log(classNames);
+ * // Output: "text-text-default"
+ *
+ * const dangerPressed = generateButtonPrimaryTextClassNames({
+ *   isPressed: true,
+ *   isDanger: true,
+ *   isInverse: true,
+ *   isLoading: false,
+ * });
+ *
+ * console.log(dangerPressed);
+ * // Output: "text-error-defaultPressed"
+ * ```
+ *
+ * State Priorities:
+ * 1. If `isInverse` and `isDanger` are true, the class changes dynamically based on `isPressed` or `isLoading`.
+ * 2. If only `isDanger` is true, the text uses `text-primary-inverse`.
+ * 3. If only `isInverse` is true, the text uses `text-text-default`.
+ * 4. If none of the above states are true, the text defaults to `text-primary-inverse`.
+ */
+export declare const generateButtonPrimaryTextClassNames: ({ isPressed, isDanger, isInverse, isLoading, }: Partial<ButtonPrimaryProps> & {
+    isPressed?: boolean | undefined;
+}) => string;
+//# sourceMappingURL=ButtonPrimary.utilities.d.ts.map

package/dist/components/Button/variants/ButtonPrimary/ButtonPrimary.utilities.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonPrimary.utilities.d.ts","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonPrimary/ButtonPrimary.utilities.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAEhE;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,eAAO,MAAM,wCAAwC;;MAQjD,MAuBH,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AACH,eAAO,MAAM,mCAAmC;;MAO5C,MAoBH,CAAC"}

package/dist/components/Button/variants/ButtonPrimary/ButtonPrimary.utilities.js

@@ -0,0 +1,122 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateButtonPrimaryTextClassNames = exports.generateButtonPrimaryContainerClassNames = void 0;
+/**
+ * Generates a Tailwind class name for the container based on its state and optional additional classes.
+ *
+ * This function computes the appropriate background class name for a button's container, considering its
+ * `isPressed`, `isDanger`, `isInverse`, and `isLoading` states. Additional Tailwind class names can
+ * also be appended using the `twClassName` parameter.
+ *
+ * @param isPressed - Indicates whether the button is currently being pressed.
+ * @param isDanger - Indicates whether the button is in a "danger" state.
+ * @param isInverse - Indicates whether the button is using an "inverse" theme.
+ * @param isLoading - Indicates whether the button is in a loading state.
+ * @param twClassName - Additional Tailwind class names for customization.
+ * @returns A combined string of Tailwind class names for the container's background styling.
+ *
+ * Example:
+ * ```
+ * const classNames = generateButtonPrimaryContainerClassNames({
+ *   isPressed: true,
+ *   isDanger: false,
+ *   isInverse: true,
+ *   isLoading: false,
+ *   twClassName: 'rounded-lg',
+ * });
+ *
+ * console.log(classNames);
+ * // Output: "bg-background-defaultPressed rounded-lg"
+ * ```
+ */
+const generateButtonPrimaryContainerClassNames = ({ isPressed = false, isDanger = false, isInverse = false, isLoading = false, twClassName = '', }) => {
+    let backgroundStyle;
+    const isPressedOrLoading = isPressed || isLoading;
+    if (isInverse && isDanger) {
+        backgroundStyle = isPressedOrLoading
+            ? 'bg-background-defaultPressed'
+            : 'bg-background-default';
+    }
+    else if (isDanger) {
+        backgroundStyle = isPressedOrLoading
+            ? 'bg-error-defaultPressed'
+            : 'bg-error-default';
+    }
+    else if (isInverse) {
+        backgroundStyle = isPressedOrLoading
+            ? 'bg-background-defaultPressed'
+            : 'bg-background-default';
+    }
+    else {
+        backgroundStyle = isPressedOrLoading
+            ? 'bg-primary-defaultPressed'
+            : 'bg-primary-default';
+    }
+    return `${backgroundStyle} ${twClassName}`;
+};
+exports.generateButtonPrimaryContainerClassNames = generateButtonPrimaryContainerClassNames;
+/**
+ * Generates a Tailwind class name for the text based on the button's state.
+ *
+ * This function calculates the appropriate text color class for a button based on its
+ * `isPressed`, `isDanger`, `isInverse`, and `isLoading` states. The returned class
+ * name determines how the button's text will be styled dynamically.
+ *
+ * @param isPressed - Indicates whether the button is currently being pressed.
+ * @param isDanger - Indicates whether the button is in a "danger" state.
+ * @param isInverse - Indicates whether the button is using an "inverse" theme.
+ * @param isLoading - Indicates whether the button is in a loading state.
+ * @returns A string representing the Tailwind class for the text color.
+ *
+ * Example:
+ * ```
+ * const classNames = generateButtonPrimaryTextClassNames({
+ *   isPressed: true,
+ *   isDanger: false,
+ *   isInverse: true,
+ *   isLoading: false,
+ * });
+ *
+ * console.log(classNames);
+ * // Output: "text-text-default"
+ *
+ * const dangerPressed = generateButtonPrimaryTextClassNames({
+ *   isPressed: true,
+ *   isDanger: true,
+ *   isInverse: true,
+ *   isLoading: false,
+ * });
+ *
+ * console.log(dangerPressed);
+ * // Output: "text-error-defaultPressed"
+ * ```
+ *
+ * State Priorities:
+ * 1. If `isInverse` and `isDanger` are true, the class changes dynamically based on `isPressed` or `isLoading`.
+ * 2. If only `isDanger` is true, the text uses `text-primary-inverse`.
+ * 3. If only `isInverse` is true, the text uses `text-text-default`.
+ * 4. If none of the above states are true, the text defaults to `text-primary-inverse`.
+ */
+const generateButtonPrimaryTextClassNames = ({ isPressed = false, isDanger = false, isInverse = false, isLoading = false, }) => {
+    let textColor;
+    // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+    const isPressedOrLoading = isPressed || isLoading;
+    if (isDanger) {
+        textColor = 'text-primary-inverse';
+    }
+    else if (isInverse) {
+        textColor = 'text-text-default';
+    }
+    else {
+        textColor = 'text-primary-inverse';
+    }
+    if (isInverse && isDanger) {
+        const pressedOrLoading = isPressedOrLoading;
+        textColor = pressedOrLoading
+            ? 'text-error-defaultPressed'
+            : 'text-error-default';
+    }
+    return `${textColor}`;
+};
+exports.generateButtonPrimaryTextClassNames = generateButtonPrimaryTextClassNames;
+//# sourceMappingURL=ButtonPrimary.utilities.js.map

package/dist/components/Button/variants/ButtonPrimary/ButtonPrimary.utilities.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonPrimary.utilities.js","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonPrimary/ButtonPrimary.utilities.ts"],"names":[],"mappings":";;;AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACI,MAAM,wCAAwC,GAAG,CAAC,EACvD,SAAS,GAAG,KAAK,EACjB,QAAQ,GAAG,KAAK,EAChB,SAAS,GAAG,KAAK,EACjB,SAAS,GAAG,KAAK,EACjB,WAAW,GAAG,EAAE,GAGjB,EAAU,EAAE;IACX,IAAI,eAAe,CAAC;IACpB,MAAM,kBAAkB,GAAG,SAAS,IAAI,SAAS,CAAC;IAElD,IAAI,SAAS,IAAI,QAAQ,EAAE;QACzB,eAAe,GAAG,kBAAkB;YAClC,CAAC,CAAC,8BAA8B;YAChC,CAAC,CAAC,uBAAuB,CAAC;KAC7B;SAAM,IAAI,QAAQ,EAAE;QACnB,eAAe,GAAG,kBAAkB;YAClC,CAAC,CAAC,yBAAyB;YAC3B,CAAC,CAAC,kBAAkB,CAAC;KACxB;SAAM,IAAI,SAAS,EAAE;QACpB,eAAe,GAAG,kBAAkB;YAClC,CAAC,CAAC,8BAA8B;YAChC,CAAC,CAAC,uBAAuB,CAAC;KAC7B;SAAM;QACL,eAAe,GAAG,kBAAkB;YAClC,CAAC,CAAC,2BAA2B;YAC7B,CAAC,CAAC,oBAAoB,CAAC;KAC1B;IAED,OAAO,GAAG,eAAe,IAAI,WAAW,EAAE,CAAC;AAC7C,CAAC,CAAC;AA/BW,QAAA,wCAAwC,4CA+BnD;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AACI,MAAM,mCAAmC,GAAG,CAAC,EAClD,SAAS,GAAG,KAAK,EACjB,QAAQ,GAAG,KAAK,EAChB,SAAS,GAAG,KAAK,EACjB,SAAS,GAAG,KAAK,GAGlB,EAAU,EAAE;IACX,IAAI,SAAS,CAAC;IACd,wEAAwE;IACxE,MAAM,kBAAkB,GAAG,SAAS,IAAI,SAAS,CAAC;IAElD,IAAI,QAAQ,EAAE;QACZ,SAAS,GAAG,sBAAsB,CAAC;KACpC;SAAM,IAAI,SAAS,EAAE;QACpB,SAAS,GAAG,mBAAmB,CAAC;KACjC;SAAM;QACL,SAAS,GAAG,sBAAsB,CAAC;KACpC;IACD,IAAI,SAAS,IAAI,QAAQ,EAAE;QACzB,MAAM,gBAAgB,GAAG,kBAAkB,CAAC;QAC5C,SAAS,GAAG,gBAAgB;YAC1B,CAAC,CAAC,2BAA2B;YAC7B,CAAC,CAAC,oBAAoB,CAAC;KAC1B;IAED,OAAO,GAAG,SAAS,EAAE,CAAC;AACxB,CAAC,CAAC;AA3BW,QAAA,mCAAmC,uCA2B9C","sourcesContent":["/* eslint-disable jsdoc/check-param-names */\n/* eslint-disable jsdoc/require-param */\nimport type { ButtonPrimaryProps } from './ButtonPrimary.types';\n\n/**\n * Generates a Tailwind class name for the container based on its state and optional additional classes.\n *\n * This function computes the appropriate background class name for a button's container, considering its\n * `isPressed`, `isDanger`, `isInverse`, and `isLoading` states. Additional Tailwind class names can\n * also be appended using the `twClassName` parameter.\n *\n * @param isPressed - Indicates whether the button is currently being pressed.\n * @param isDanger - Indicates whether the button is in a \"danger\" state.\n * @param isInverse - Indicates whether the button is using an \"inverse\" theme.\n * @param isLoading - Indicates whether the button is in a loading state.\n * @param twClassName - Additional Tailwind class names for customization.\n * @returns A combined string of Tailwind class names for the container's background styling.\n *\n * Example:\n * ```\n * const classNames = generateButtonPrimaryContainerClassNames({\n *   isPressed: true,\n *   isDanger: false,\n *   isInverse: true,\n *   isLoading: false,\n *   twClassName: 'rounded-lg',\n * });\n *\n * console.log(classNames);\n * // Output: \"bg-background-defaultPressed rounded-lg\"\n * ```\n */\nexport const generateButtonPrimaryContainerClassNames = ({\n  isPressed = false,\n  isDanger = false,\n  isInverse = false,\n  isLoading = false,\n  twClassName = '',\n}: Partial<ButtonPrimaryProps> & {\n  isPressed?: boolean;\n}): string => {\n  let backgroundStyle;\n  const isPressedOrLoading = isPressed || isLoading;\n\n  if (isInverse && isDanger) {\n    backgroundStyle = isPressedOrLoading\n      ? 'bg-background-defaultPressed'\n      : 'bg-background-default';\n  } else if (isDanger) {\n    backgroundStyle = isPressedOrLoading\n      ? 'bg-error-defaultPressed'\n      : 'bg-error-default';\n  } else if (isInverse) {\n    backgroundStyle = isPressedOrLoading\n      ? 'bg-background-defaultPressed'\n      : 'bg-background-default';\n  } else {\n    backgroundStyle = isPressedOrLoading\n      ? 'bg-primary-defaultPressed'\n      : 'bg-primary-default';\n  }\n\n  return `${backgroundStyle} ${twClassName}`;\n};\n\n/**\n * Generates a Tailwind class name for the text based on the button's state.\n *\n * This function calculates the appropriate text color class for a button based on its\n * `isPressed`, `isDanger`, `isInverse`, and `isLoading` states. The returned class\n * name determines how the button's text will be styled dynamically.\n *\n * @param isPressed - Indicates whether the button is currently being pressed.\n * @param isDanger - Indicates whether the button is in a \"danger\" state.\n * @param isInverse - Indicates whether the button is using an \"inverse\" theme.\n * @param isLoading - Indicates whether the button is in a loading state.\n * @returns A string representing the Tailwind class for the text color.\n *\n * Example:\n * ```\n * const classNames = generateButtonPrimaryTextClassNames({\n *   isPressed: true,\n *   isDanger: false,\n *   isInverse: true,\n *   isLoading: false,\n * });\n *\n * console.log(classNames);\n * // Output: \"text-text-default\"\n *\n * const dangerPressed = generateButtonPrimaryTextClassNames({\n *   isPressed: true,\n *   isDanger: true,\n *   isInverse: true,\n *   isLoading: false,\n * });\n *\n * console.log(dangerPressed);\n * // Output: \"text-error-defaultPressed\"\n * ```\n *\n * State Priorities:\n * 1. If `isInverse` and `isDanger` are true, the class changes dynamically based on `isPressed` or `isLoading`.\n * 2. If only `isDanger` is true, the text uses `text-primary-inverse`.\n * 3. If only `isInverse` is true, the text uses `text-text-default`.\n * 4. If none of the above states are true, the text defaults to `text-primary-inverse`.\n */\nexport const generateButtonPrimaryTextClassNames = ({\n  isPressed = false,\n  isDanger = false,\n  isInverse = false,\n  isLoading = false,\n}: Partial<ButtonPrimaryProps> & {\n  isPressed?: boolean;\n}): string => {\n  let textColor;\n  // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing\n  const isPressedOrLoading = isPressed || isLoading;\n\n  if (isDanger) {\n    textColor = 'text-primary-inverse';\n  } else if (isInverse) {\n    textColor = 'text-text-default';\n  } else {\n    textColor = 'text-primary-inverse';\n  }\n  if (isInverse && isDanger) {\n    const pressedOrLoading = isPressedOrLoading;\n    textColor = pressedOrLoading\n      ? 'text-error-defaultPressed'\n      : 'text-error-default';\n  }\n\n  return `${textColor}`;\n};\n"]}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonPrimary/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAC1C,YAAY,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,EAAE,cAAc,IAAI,iBAAiB,EAAE,MAAM,mCAAmC,CAAC"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonPrimary/index.ts"],"names":[],"mappings":";;;;;;AAAA,iDAA0C;AAAjC,yHAAA,OAAO,OAAA;AAEhB,gEAAwF;AAA/E,+GAAA,cAAc,OAAqB","sourcesContent":["export { default } from './ButtonPrimary';\nexport type { ButtonPrimaryProps } from './ButtonPrimary.types';\nexport { ButtonBaseSize as ButtonPrimarySize } from '../../../../primitives/ButtonBase';\n"]}

package/dist/components/Button/variants/ButtonSecondary/ButtonSecondary.constants.d.ts

@@ -0,0 +1,3 @@
+import type { ButtonSecondaryProps } from './ButtonSecondary.types';
+export declare const DEFAULT_BUTTONSECONDARY_PROPS: Pick<ButtonSecondaryProps, 'textProps' | 'size' | 'isLoading' | 'spinnerProps' | 'startIconProps' | 'endIconProps' | 'isDisabled' | 'isFullWidth' | 'isDanger' | 'isInverse'>;
+//# sourceMappingURL=ButtonSecondary.constants.d.ts.map

package/dist/components/Button/variants/ButtonSecondary/ButtonSecondary.constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonSecondary.constants.d.ts","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonSecondary/ButtonSecondary.constants.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAGpE,eAAO,MAAM,6BAA6B,EAAE,IAAI,CAC9C,oBAAoB,EAClB,WAAW,GACX,MAAM,GACN,WAAW,GACX,cAAc,GACd,gBAAgB,GAChB,cAAc,GACd,YAAY,GACZ,aAAa,GACb,UAAU,GACV,WAAW,CAqBd,CAAC"}

package/dist/components/Button/variants/ButtonSecondary/ButtonSecondary.constants.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEFAULT_BUTTONSECONDARY_PROPS = void 0;
+const ButtonBase_constants_1 = require("../../../../primitives/ButtonBase/ButtonBase.constants");
+const Icon_1 = require("../../../Icon");
+const Text_1 = require("../../../Text");
+// Defaults
+exports.DEFAULT_BUTTONSECONDARY_PROPS = {
+    ...ButtonBase_constants_1.DEFAULT_BUTTONBASE_PROPS,
+    textProps: {
+        ...ButtonBase_constants_1.DEFAULT_BUTTONBASE_PROPS.textProps,
+        color: Text_1.TextColor.PrimaryInverse,
+    },
+    spinnerProps: {
+        ...ButtonBase_constants_1.DEFAULT_BUTTONBASE_PROPS.spinnerProps,
+        color: Icon_1.IconColor.PrimaryInverse,
+    },
+    startIconProps: {
+        ...ButtonBase_constants_1.DEFAULT_BUTTONBASE_PROPS.startIconProps,
+        color: Icon_1.IconColor.PrimaryInverse,
+    },
+    endIconProps: {
+        ...ButtonBase_constants_1.DEFAULT_BUTTONBASE_PROPS.endIconProps,
+        color: Icon_1.IconColor.PrimaryInverse,
+    },
+    isDanger: false,
+    isInverse: false,
+};
+//# sourceMappingURL=ButtonSecondary.constants.js.map

package/dist/components/Button/variants/ButtonSecondary/ButtonSecondary.constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonSecondary.constants.js","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonSecondary/ButtonSecondary.constants.ts"],"names":[],"mappings":";;;AAAA,iGAAkG;AAClG,wCAA0C;AAC1C,wCAA0C;AAG1C,WAAW;AACE,QAAA,6BAA6B,GAYtC;IACF,GAAG,+CAAwB;IAC3B,SAAS,EAAE;QACT,GAAG,+CAAwB,CAAC,SAAS;QACrC,KAAK,EAAE,gBAAS,CAAC,cAAc;KAChC;IACD,YAAY,EAAE;QACZ,GAAG,+CAAwB,CAAC,YAAY;QACxC,KAAK,EAAE,gBAAS,CAAC,cAAc;KAChC;IACD,cAAc,EAAE;QACd,GAAG,+CAAwB,CAAC,cAAc;QAC1C,KAAK,EAAE,gBAAS,CAAC,cAAc;KAChC;IACD,YAAY,EAAE;QACZ,GAAG,+CAAwB,CAAC,YAAY;QACxC,KAAK,EAAE,gBAAS,CAAC,cAAc;KAChC;IACD,QAAQ,EAAE,KAAK;IACf,SAAS,EAAE,KAAK;CACjB,CAAC","sourcesContent":["import { DEFAULT_BUTTONBASE_PROPS } from '../../../../primitives/ButtonBase/ButtonBase.constants';\nimport { IconColor } from '../../../Icon';\nimport { TextColor } from '../../../Text';\nimport type { ButtonSecondaryProps } from './ButtonSecondary.types';\n\n// Defaults\nexport const DEFAULT_BUTTONSECONDARY_PROPS: Pick<\n  ButtonSecondaryProps,\n  | 'textProps'\n  | 'size'\n  | 'isLoading'\n  | 'spinnerProps'\n  | 'startIconProps'\n  | 'endIconProps'\n  | 'isDisabled'\n  | 'isFullWidth'\n  | 'isDanger'\n  | 'isInverse'\n> = {\n  ...DEFAULT_BUTTONBASE_PROPS,\n  textProps: {\n    ...DEFAULT_BUTTONBASE_PROPS.textProps,\n    color: TextColor.PrimaryInverse,\n  },\n  spinnerProps: {\n    ...DEFAULT_BUTTONBASE_PROPS.spinnerProps,\n    color: IconColor.PrimaryInverse,\n  },\n  startIconProps: {\n    ...DEFAULT_BUTTONBASE_PROPS.startIconProps,\n    color: IconColor.PrimaryInverse,\n  },\n  endIconProps: {\n    ...DEFAULT_BUTTONBASE_PROPS.endIconProps,\n    color: IconColor.PrimaryInverse,\n  },\n  isDanger: false,\n  isInverse: false,\n};\n"]}

package/dist/components/Button/variants/ButtonSecondary/ButtonSecondary.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { ButtonSecondaryProps } from './ButtonSecondary.types';
+declare const ButtonSecondary: ({ children, textProps, spinnerProps, startIconProps, endIconProps, isDanger, isInverse, isLoading, onPressIn, onPressOut, twClassName, style, ...props }: ButtonSecondaryProps) => React.JSX.Element;
+export default ButtonSecondary;
+//# sourceMappingURL=ButtonSecondary.d.ts.map

package/dist/components/Button/variants/ButtonSecondary/ButtonSecondary.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonSecondary.d.ts","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonSecondary/ButtonSecondary.tsx"],"names":[],"mappings":"AACA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAQjD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAMpE,QAAA,MAAM,eAAe,6JAclB,oBAAoB,sBAyEtB,CAAC;AAEF,eAAe,eAAe,CAAC"}

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

@@ -0,0 +1,90 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const design_system_twrnc_preset_1 = require("@metamask-previews/design-system-twrnc-preset");
+const react_1 = __importStar(require("react"));
+const ButtonBase_1 = __importDefault(require("../../../../primitives/ButtonBase"));
+const ButtonSecondary_constants_1 = require("./ButtonSecondary.constants");
+const ButtonSecondary_utilities_1 = require("./ButtonSecondary.utilities");
+const ButtonSecondary = ({ children, textProps, spinnerProps, startIconProps, endIconProps, isDanger = ButtonSecondary_constants_1.DEFAULT_BUTTONSECONDARY_PROPS.isDanger, isInverse = ButtonSecondary_constants_1.DEFAULT_BUTTONSECONDARY_PROPS.isInverse, isLoading = ButtonSecondary_constants_1.DEFAULT_BUTTONSECONDARY_PROPS.isLoading, onPressIn, onPressOut, twClassName, style, ...props }) => {
+    const [isPressed, setIsPressed] = (0, react_1.useState)(false);
+    const tw = (0, design_system_twrnc_preset_1.useTailwind)();
+    const twContainerClassNames = (0, react_1.useMemo)(() => {
+        return (0, ButtonSecondary_utilities_1.generateButtonSecondaryContainerClassNames)({
+            isPressed,
+            isDanger,
+            isInverse,
+            isLoading,
+            twClassName,
+        });
+    }, [isPressed, isDanger, isInverse, isLoading, twClassName]);
+    const twTextClassNames = (0, react_1.useMemo)(() => {
+        return (0, ButtonSecondary_utilities_1.generateButtonSecondaryTextClassNames)({
+            isPressed,
+            isDanger,
+            isInverse,
+            isLoading,
+        });
+    }, [isPressed, isDanger, isInverse, isLoading]);
+    const finalTextProps = {
+        ...ButtonSecondary_constants_1.DEFAULT_BUTTONSECONDARY_PROPS.textProps,
+        ...textProps,
+        twClassName: `${twTextClassNames} ${textProps?.twClassName ?? ''}`,
+    };
+    const finalStartIconProps = {
+        ...ButtonSecondary_constants_1.DEFAULT_BUTTONSECONDARY_PROPS.startIconProps,
+        ...startIconProps,
+        twClassName: `${twTextClassNames} ${startIconProps?.twClassName ?? ''}`,
+    };
+    const finalEndIconProps = {
+        ...ButtonSecondary_constants_1.DEFAULT_BUTTONSECONDARY_PROPS.endIconProps,
+        ...endIconProps,
+        twClassName: `${twTextClassNames} ${endIconProps?.twClassName ?? ''}`,
+    };
+    const finalSpinnerProps = {
+        ...ButtonSecondary_constants_1.DEFAULT_BUTTONSECONDARY_PROPS.spinnerProps,
+        color: twTextClassNames,
+        loadingTextProps: {
+            twClassName: twTextClassNames,
+        },
+        ...spinnerProps,
+    };
+    const onPressInHandler = (event) => {
+        setIsPressed(true);
+        onPressIn?.(event);
+    };
+    const onPressOutHandler = (event) => {
+        setIsPressed(false);
+        onPressOut?.(event);
+    };
+    return (<ButtonBase_1.default textProps={finalTextProps} spinnerProps={finalSpinnerProps} startIconProps={finalStartIconProps} endIconProps={finalEndIconProps} isLoading={isLoading} onPressIn={onPressInHandler} onPressOut={onPressOutHandler} style={[tw `${twContainerClassNames}`, style]} testID="button-secondary" {...props}>
+      {children}
+    </ButtonBase_1.default>);
+};
+exports.default = ButtonSecondary;
+//# sourceMappingURL=ButtonSecondary.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonSecondary.js","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonSecondary/ButtonSecondary.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,8FAA4E;AAC5E,+CAAiD;AAGjD,mFAA2D;AAI3D,2EAA4E;AAE5E,2EAGqC;AAErC,MAAM,eAAe,GAAG,CAAC,EACvB,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,cAAc,EACd,YAAY,EACZ,QAAQ,GAAG,yDAA6B,CAAC,QAAQ,EACjD,SAAS,GAAG,yDAA6B,CAAC,SAAS,EACnD,SAAS,GAAG,yDAA6B,CAAC,SAAS,EACnD,SAAS,EACT,UAAU,EACV,WAAW,EACX,KAAK,EACL,GAAG,KAAK,EACa,EAAE,EAAE;IACzB,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAClD,MAAM,EAAE,GAAG,IAAA,wCAAW,GAAE,CAAC;IACzB,MAAM,qBAAqB,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;QACzC,OAAO,IAAA,sEAA0C,EAAC;YAChD,SAAS;YACT,QAAQ;YACR,SAAS;YACT,SAAS;YACT,WAAW;SACZ,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAE,WAAW,CAAC,CAAC,CAAC;IAE7D,MAAM,gBAAgB,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;QACpC,OAAO,IAAA,iEAAqC,EAAC;YAC3C,SAAS;YACT,QAAQ;YACR,SAAS;YACT,SAAS;SACV,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC;IAEhD,MAAM,cAAc,GAAyC;QAC3D,GAAG,yDAA6B,CAAC,SAAS;QAC1C,GAAG,SAAS;QACZ,WAAW,EAAE,GAAG,gBAAgB,IAAI,SAAS,EAAE,WAAW,IAAI,EAAE,EAAE;KACnE,CAAC;IACF,MAAM,mBAAmB,GAAuB;QAC9C,GAAG,yDAA6B,CAAC,cAAc;QAC/C,GAAG,cAAc;QACjB,WAAW,EAAE,GAAG,gBAAgB,IAAI,cAAc,EAAE,WAAW,IAAI,EAAE,EAAE;KACxE,CAAC;IAEF,MAAM,iBAAiB,GAAuB;QAC5C,GAAG,yDAA6B,CAAC,YAAY;QAC7C,GAAG,YAAY;QACf,WAAW,EAAE,GAAG,gBAAgB,IAAI,YAAY,EAAE,WAAW,IAAI,EAAE,EAAE;KACtE,CAAC;IAEF,MAAM,iBAAiB,GAAiB;QACtC,GAAG,yDAA6B,CAAC,YAAY;QAC7C,KAAK,EAAE,gBAA6B;QACpC,gBAAgB,EAAE;YAChB,WAAW,EAAE,gBAAgB;SAC9B;QACD,GAAG,YAAY;KAChB,CAAC;IACF,MAAM,gBAAgB,GAAG,CAAC,KAA4B,EAAE,EAAE;QACxD,YAAY,CAAC,IAAI,CAAC,CAAC;QACnB,SAAS,EAAE,CAAC,KAAK,CAAC,CAAC;IACrB,CAAC,CAAC;IAEF,MAAM,iBAAiB,GAAG,CAAC,KAA4B,EAAE,EAAE;QACzD,YAAY,CAAC,KAAK,CAAC,CAAC;QACpB,UAAU,EAAE,CAAC,KAAK,CAAC,CAAC;IACtB,CAAC,CAAC;IAEF,OAAO,CACL,CAAC,oBAAU,CACT,SAAS,CAAC,CAAC,cAAc,CAAC,CAC1B,YAAY,CAAC,CAAC,iBAAiB,CAAC,CAChC,cAAc,CAAC,CAAC,mBAAmB,CAAC,CACpC,YAAY,CAAC,CAAC,iBAAiB,CAAC,CAChC,SAAS,CAAC,CAAC,SAAS,CAAC,CACrB,SAAS,CAAC,CAAC,gBAAgB,CAAC,CAC5B,UAAU,CAAC,CAAC,iBAAiB,CAAC,CAC9B,KAAK,CAAC,CAAC,CAAC,EAAE,CAAA,GAAG,qBAAqB,EAAE,EAAE,KAAK,CAAC,CAAC,CAC7C,MAAM,CAAC,kBAAkB,CACzB,IAAI,KAAK,CAAC,CAEV;MAAA,CAAC,QAAQ,CACX;IAAA,EAAE,oBAAU,CAAC,CACd,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,eAAe,CAAC","sourcesContent":["import { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React, { useMemo, useState } from 'react';\nimport type { GestureResponderEvent } from 'react-native';\n\nimport ButtonBase from '../../../../primitives/ButtonBase';\nimport type { SpinnerProps } from '../../../../temp-components/Spinner';\nimport type { IconProps, IconColor } from '../../../Icon';\nimport type { TextProps } from '../../../Text/Text.types';\nimport { DEFAULT_BUTTONSECONDARY_PROPS } from './ButtonSecondary.constants';\nimport type { ButtonSecondaryProps } from './ButtonSecondary.types';\nimport {\n  generateButtonSecondaryContainerClassNames,\n  generateButtonSecondaryTextClassNames,\n} from './ButtonSecondary.utilities';\n\nconst ButtonSecondary = ({\n  children,\n  textProps,\n  spinnerProps,\n  startIconProps,\n  endIconProps,\n  isDanger = DEFAULT_BUTTONSECONDARY_PROPS.isDanger,\n  isInverse = DEFAULT_BUTTONSECONDARY_PROPS.isInverse,\n  isLoading = DEFAULT_BUTTONSECONDARY_PROPS.isLoading,\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 = useMemo(() => {\n    return generateButtonSecondaryContainerClassNames({\n      isPressed,\n      isDanger,\n      isInverse,\n      isLoading,\n      twClassName,\n    });\n  }, [isPressed, isDanger, isInverse, isLoading, twClassName]);\n\n  const twTextClassNames = useMemo(() => {\n    return generateButtonSecondaryTextClassNames({\n      isPressed,\n      isDanger,\n      isInverse,\n      isLoading,\n    });\n  }, [isPressed, isDanger, isInverse, isLoading]);\n\n  const finalTextProps: Omit<Partial<TextProps>, 'children'> = {\n    ...DEFAULT_BUTTONSECONDARY_PROPS.textProps,\n    ...textProps,\n    twClassName: `${twTextClassNames} ${textProps?.twClassName ?? ''}`,\n  };\n  const finalStartIconProps: Partial<IconProps> = {\n    ...DEFAULT_BUTTONSECONDARY_PROPS.startIconProps,\n    ...startIconProps,\n    twClassName: `${twTextClassNames} ${startIconProps?.twClassName ?? ''}`,\n  };\n\n  const finalEndIconProps: Partial<IconProps> = {\n    ...DEFAULT_BUTTONSECONDARY_PROPS.endIconProps,\n    ...endIconProps,\n    twClassName: `${twTextClassNames} ${endIconProps?.twClassName ?? ''}`,\n  };\n\n  const finalSpinnerProps: SpinnerProps = {\n    ...DEFAULT_BUTTONSECONDARY_PROPS.spinnerProps,\n    color: twTextClassNames as IconColor,\n    loadingTextProps: {\n      twClassName: twTextClassNames,\n    },\n    ...spinnerProps,\n  };\n  const onPressInHandler = (event: GestureResponderEvent) => {\n    setIsPressed(true);\n    onPressIn?.(event);\n  };\n\n  const onPressOutHandler = (event: GestureResponderEvent) => {\n    setIsPressed(false);\n    onPressOut?.(event);\n  };\n\n  return (\n    <ButtonBase\n      textProps={finalTextProps}\n      spinnerProps={finalSpinnerProps}\n      startIconProps={finalStartIconProps}\n      endIconProps={finalEndIconProps}\n      isLoading={isLoading}\n      onPressIn={onPressInHandler}\n      onPressOut={onPressOutHandler}\n      style={[tw`${twContainerClassNames}`, style]}\n      testID=\"button-secondary\"\n      {...props}\n    >\n      {children}\n    </ButtonBase>\n  );\n};\n\nexport default ButtonSecondary;\n"]}

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

@@ -0,0 +1,17 @@
+import { ButtonBaseProps } from '../../../../primitives/ButtonBase';
+/**
+ * ButtonSecondary component props.
+ */
+export type ButtonSecondaryProps = {
+    /**
+     * Optional prop to show the danger state of the button.
+     * @default false
+     */
+    isDanger?: boolean;
+    /**
+     * Optional prop to show the inverse state of the button, which is reserved for buttons on colored backgrounds.
+     * @default false
+     */
+    isInverse?: boolean;
+} & ButtonBaseProps;
+//# sourceMappingURL=ButtonSecondary.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonSecondary.types.d.ts","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonSecondary/ButtonSecondary.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,mCAAmC,CAAC;AAEpE;;GAEG;AACH,MAAM,MAAM,oBAAoB,GAAG;IACjC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,GAAG,eAAe,CAAC"}

package/dist/components/Button/variants/ButtonSecondary/ButtonSecondary.types.js

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

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

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