@metamask-previews/design-system-react-native 0.0.0-preview.c0b5e45 → 0.0.0-preview.ccba95e

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

@@ -22,58 +22,43 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.ButtonPrimary = void 0;
 const design_system_twrnc_preset_1 = require("@metamask-previews/design-system-twrnc-preset");
 const react_1 = __importStar(require("react"));
-const ButtonBase_1 = __importDefault(require("../../../../primitives/ButtonBase"));
-const 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 ButtonBase_1 = require("../../../ButtonBase");
+const Icon_1 = require("../../../Icon");
+const Text_1 = require("../../../Text");
+const ButtonPrimaryBase = ({ children, textProps, spinnerProps, startIconProps, endIconProps, isDanger = false, isInverse = false, isLoading = false, onPressIn, onPressOut, twClassName = '', style, ...props }) => {
     const [isPressed, setIsPressed] = (0, react_1.useState)(false);
     const tw = (0, design_system_twrnc_preset_1.useTailwind)();
-    const twContainerClassNames = (0, react_1.useMemo)(() => {
-        return (0, 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 twContainerClassNames = `
+    ${isInverse && isDanger
+        ? isPressed || isLoading
+            ? 'bg-background-defaultPressed'
+            : 'bg-background-default'
+        : isDanger
+            ? isPressed || isLoading
+                ? 'bg-error-defaultPressed'
+                : 'bg-error-default'
+            : isInverse
+                ? isPressed || isLoading
+                    ? 'bg-background-defaultPressed'
+                    : 'bg-background-default'
+                : isPressed || isLoading
+                    ? 'bg-primary-defaultPressed'
+                    : 'bg-primary-default'}
+    ${twClassName}
+  `;
+    const twTextClassNames = isInverse && isDanger
+        ? isPressed || isLoading
+            ? 'text-error-defaultPressed'
+            : 'text-error-default'
+        : isDanger
+            ? 'text-primary-inverse'
+            : isInverse
+                ? 'text-text-default'
+                : 'text-primary-inverse';
     const onPressInHandler = (event) => {
         setIsPressed(true);
         onPressIn?.(event);
@@ -82,9 +67,30 @@ const ButtonPrimaryBase = ({ children, textProps, spinnerProps, startIconProps,
         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}>
+    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} ${startIconProps?.twClassName ?? ''}`,
+        }} isLoading={isLoading} onPressIn={onPressInHandler} onPressOut={onPressOutHandler} style={[tw `${twContainerClassNames}`, style]} {...props}>
       {children}
-    </ButtonBase_1.default>);
+    </ButtonBase_1.ButtonBase>);
 };
 const ButtonPrimaryLightOnly = (0, design_system_twrnc_preset_1.withThemeProvider)(ButtonPrimaryBase, design_system_twrnc_preset_1.Theme.Light);
 const ButtonPrimary = ({ isInverse, ...props }) => {
@@ -93,5 +99,5 @@ const ButtonPrimary = ({ isInverse, ...props }) => {
     }
     return <ButtonPrimaryLightOnly isInverse={isInverse} {...props}/>;
 };
-exports.default = ButtonPrimary;
+exports.ButtonPrimary = ButtonPrimary;
 //# sourceMappingURL=ButtonPrimary.js.map

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

@@ -1 +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"]}
+{"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, { 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 { ButtonPrimaryProps } from './ButtonPrimary.types';\n\nconst ButtonPrimaryBase = ({\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}: ButtonPrimaryProps) => {\n  const [isPressed, setIsPressed] = useState(false);\n  const tw = useTailwind();\n  const twContainerClassNames = `\n    ${\n      isInverse && isDanger\n        ? isPressed || isLoading\n          ? 'bg-background-defaultPressed'\n          : 'bg-background-default'\n        : isDanger\n          ? isPressed || isLoading\n            ? 'bg-error-defaultPressed'\n            : 'bg-error-default'\n          : isInverse\n            ? isPressed || isLoading\n              ? 'bg-background-defaultPressed'\n              : 'bg-background-default'\n            : isPressed || isLoading\n              ? 'bg-primary-defaultPressed'\n              : 'bg-primary-default'\n    }\n    ${twClassName}\n  `;\n\n  const twTextClassNames =\n    isInverse && isDanger\n      ? isPressed || isLoading\n        ? 'text-error-defaultPressed'\n        : 'text-error-default'\n      : isDanger\n        ? 'text-primary-inverse'\n        : isInverse\n          ? 'text-text-default'\n          : 'text-primary-inverse';\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} ${startIconProps?.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\nconst ButtonPrimaryLightOnly = withThemeProvider(\n  ButtonPrimaryBase,\n  Theme.Light,\n);\n\nexport const ButtonPrimary = ({ isInverse, ...props }: ButtonPrimaryProps) => {\n  if (isInverse) {\n    return <ButtonPrimaryBase isInverse={isInverse} {...props} />;\n  }\n  return <ButtonPrimaryLightOnly isInverse={isInverse} {...props} />;\n};\n"]}

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

@@ -1,15 +1,17 @@
-import type { ButtonBaseProps } from '../../../../primitives/ButtonBase';
+import type { ButtonBaseProps } from '../../../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;

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

@@ -1 +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"}
+{"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,qBAAqB,CAAC;AAE3D;;GAEG;AACH,MAAM,MAAM,kBAAkB,GAAG;IAC/B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,GAAG,eAAe,CAAC"}

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

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

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

@@ -1,4 +1,4 @@
-export { default } from './ButtonPrimary';
+export { ButtonPrimarySize } from '../../../../types';
+export { ButtonPrimary } 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

@@ -1 +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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonPrimary/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC"}

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

@@ -1,11 +1,8 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ButtonPrimarySize = exports.default = void 0;
+exports.ButtonPrimary = exports.ButtonPrimarySize = void 0;
+var types_1 = require("../../../../types");
+Object.defineProperty(exports, "ButtonPrimarySize", { enumerable: true, get: function () { return types_1.ButtonPrimarySize; } });
 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; } });
+Object.defineProperty(exports, "ButtonPrimary", { enumerable: true, get: function () { return ButtonPrimary_1.ButtonPrimary; } });
 //# sourceMappingURL=index.js.map

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

@@ -1 +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"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonPrimary/index.ts"],"names":[],"mappings":";;;AAAA,2CAAsD;AAA7C,0GAAA,iBAAiB,OAAA;AAC1B,iDAAgD;AAAvC,8GAAA,aAAa,OAAA","sourcesContent":["export { ButtonPrimarySize } from '../../../../types';\nexport { ButtonPrimary } from './ButtonPrimary';\nexport type { ButtonPrimaryProps } from './ButtonPrimary.types';\n"]}

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

@@ -1,5 +1,4 @@
 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;
+export declare const ButtonSecondary: ({ children, textProps, spinnerProps, startIconProps, endIconProps, isDanger, isInverse, isLoading, onPressIn, onPressOut, twClassName, style, ...props }: ButtonSecondaryProps) => React.JSX.Element;
 //# sourceMappingURL=ButtonSecondary.d.ts.map

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

@@ -1 +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"}
+{"version":3,"file":"ButtonSecondary.d.ts","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonSecondary/ButtonSecondary.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAQxC,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAEpE,eAAO,MAAM,eAAe,6JAczB,oBAAoB,sBAwFtB,CAAC"}

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

@@ -22,58 +22,49 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.ButtonSecondary = void 0;
 const design_system_twrnc_preset_1 = require("@metamask-previews/design-system-twrnc-preset");
 const react_1 = __importStar(require("react"));
-const ButtonBase_1 = __importDefault(require("../../../../primitives/ButtonBase"));
-const 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 ButtonBase_1 = require("../../../ButtonBase");
+const Icon_1 = require("../../../Icon");
+const Text_1 = require("../../../Text");
+const ButtonSecondary = ({ children, textProps, spinnerProps, startIconProps, endIconProps, isDanger = false, isInverse = false, isLoading = false, onPressIn, onPressOut, twClassName = '', style, ...props }) => {
     const [isPressed, setIsPressed] = (0, react_1.useState)(false);
     const tw = (0, design_system_twrnc_preset_1.useTailwind)();
-    const twContainerClassNames = (0, react_1.useMemo)(() => {
-        return (0, 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 twContainerClassNames = `
+    ${isInverse && isDanger
+        ? isPressed || isLoading
+            ? 'bg-background-defaultPressed'
+            : 'bg-background-default'
+        : isDanger
+            ? isPressed || isLoading
+                ? 'bg-error-mutedPressed'
+                : 'bg-transparent'
+            : isPressed || isLoading
+                ? 'bg-background-pressed'
+                : 'bg-transparent'}
+    border-[1.5px]
+    ${isInverse && isDanger
+        ? isPressed || isLoading
+            ? 'border-background-defaultPressed'
+            : 'border-background-default'
+        : isDanger
+            ? isPressed || isLoading
+                ? 'border-error-defaultPressed'
+                : 'border-error-default'
+            : isInverse
+                ? 'border-primary-inverse'
+                : 'border-icon-default'}
+    ${twClassName}
+  `;
+    const twTextClassNames = isDanger
+        ? isPressed || isLoading
+            ? 'text-error-defaultPressed'
+            : 'text-error-default'
+        : isInverse
+            ? 'text-primary-inverse'
+            : 'text-text-default';
     const onPressInHandler = (event) => {
         setIsPressed(true);
         onPressIn?.(event);
@@ -82,9 +73,30 @@ const ButtonSecondary = ({ children, textProps, spinnerProps, startIconProps, en
         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}>
+    return (<ButtonBase_1.ButtonBase textProps={{
+            variant: Text_1.TextVariant.BodyMd,
+            fontWeight: Text_1.FontWeight.Medium,
+            numberOfLines: 1,
+            ellipsizeMode: 'clip',
+            ...textProps,
+            twClassName: `${twTextClassNames} ${textProps?.twClassName ?? ''}`,
+        }} spinnerProps={{
+            color: twTextClassNames,
+            loadingTextProps: {
+                twClassName: twTextClassNames,
+            },
+            ...spinnerProps,
+        }} startIconProps={{
+            size: Icon_1.IconSize.Sm,
+            ...startIconProps,
+            twClassName: `${twTextClassNames} ${startIconProps?.twClassName ?? ''}`,
+        }} endIconProps={{
+            size: Icon_1.IconSize.Sm,
+            ...endIconProps,
+            twClassName: `${twTextClassNames} ${endIconProps?.twClassName ?? ''}`,
+        }} isLoading={isLoading} onPressIn={onPressInHandler} onPressOut={onPressOutHandler} style={[tw `${twContainerClassNames}`, style]} {...props}>
       {children}
-    </ButtonBase_1.default>);
+    </ButtonBase_1.ButtonBase>);
 };
-exports.default = ButtonSecondary;
+exports.ButtonSecondary = ButtonSecondary;
 //# sourceMappingURL=ButtonSecondary.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ButtonSecondary.js","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, { 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"]}
+{"version":3,"file":"ButtonSecondary.js","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonSecondary/ButtonSecondary.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,8FAA4E;AAC5E,+CAAwC;AAGxC,oDAAiD;AAEjD,wCAAyC;AACzC,wCAAwD;AAIjD,MAAM,eAAe,GAAG,CAAC,EAC9B,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,cAAc,EACd,YAAY,EACZ,QAAQ,GAAG,KAAK,EAChB,SAAS,GAAG,KAAK,EACjB,SAAS,GAAG,KAAK,EACjB,SAAS,EACT,UAAU,EACV,WAAW,GAAG,EAAE,EAChB,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;MAE1B,SAAS,IAAI,QAAQ;QACnB,CAAC,CAAC,SAAS,IAAI,SAAS;YACtB,CAAC,CAAC,8BAA8B;YAChC,CAAC,CAAC,uBAAuB;QAC3B,CAAC,CAAC,QAAQ;YACR,CAAC,CAAC,SAAS,IAAI,SAAS;gBACtB,CAAC,CAAC,uBAAuB;gBACzB,CAAC,CAAC,gBAAgB;YACpB,CAAC,CAAC,SAAS,IAAI,SAAS;gBACtB,CAAC,CAAC,uBAAuB;gBACzB,CAAC,CAAC,gBACV;;MAGE,SAAS,IAAI,QAAQ;QACnB,CAAC,CAAC,SAAS,IAAI,SAAS;YACtB,CAAC,CAAC,kCAAkC;YACpC,CAAC,CAAC,2BAA2B;QAC/B,CAAC,CAAC,QAAQ;YACR,CAAC,CAAC,SAAS,IAAI,SAAS;gBACtB,CAAC,CAAC,6BAA6B;gBAC/B,CAAC,CAAC,sBAAsB;YAC1B,CAAC,CAAC,SAAS;gBACT,CAAC,CAAC,wBAAwB;gBAC1B,CAAC,CAAC,qBACV;MACE,WAAW;GACd,CAAC;IAEF,MAAM,gBAAgB,GAAG,QAAQ;QAC/B,CAAC,CAAC,SAAS,IAAI,SAAS;YACtB,CAAC,CAAC,2BAA2B;YAC7B,CAAC,CAAC,oBAAoB;QACxB,CAAC,CAAC,SAAS;YACT,CAAC,CAAC,sBAAsB;YACxB,CAAC,CAAC,mBAAmB,CAAC;IAE1B,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,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;YACZ,WAAW,EAAE,GAAG,gBAAgB,IAAI,SAAS,EAAE,WAAW,IAAI,EAAE,EAAE;SACnE,CAAC,CACF,YAAY,CAAC,CAAC;YACZ,KAAK,EAAE,gBAA6B;YACpC,gBAAgB,EAAE;gBAChB,WAAW,EAAE,gBAAgB;aAC9B;YACD,GAAG,YAAY;SAChB,CAAC,CACF,cAAc,CAAC,CAAC;YACd,IAAI,EAAE,eAAQ,CAAC,EAAE;YACjB,GAAG,cAAc;YACjB,WAAW,EAAE,GAAG,gBAAgB,IAAI,cAAc,EAAE,WAAW,IAAI,EAAE,EAAE;SACxE,CAAC,CACF,YAAY,CAAC,CAAC;YACZ,IAAI,EAAE,eAAQ,CAAC,EAAE;YACjB,GAAG,YAAY;YACf,WAAW,EAAE,GAAG,gBAAgB,IAAI,YAAY,EAAE,WAAW,IAAI,EAAE,EAAE;SACtE,CAAC,CACF,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,IAAI,KAAK,CAAC,CAEV;MAAA,CAAC,QAAQ,CACX;IAAA,EAAE,uBAAU,CAAC,CACd,CAAC;AACJ,CAAC,CAAC;AAtGW,QAAA,eAAe,mBAsG1B","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-background-defaultPressed'\n          : 'bg-background-default'\n        : isDanger\n          ? isPressed || isLoading\n            ? 'bg-error-mutedPressed'\n            : 'bg-transparent'\n          : isPressed || isLoading\n            ? 'bg-background-pressed'\n            : 'bg-transparent'\n    }\n    border-[1.5px]\n    ${\n      isInverse && isDanger\n        ? isPressed || isLoading\n          ? 'border-background-defaultPressed'\n          : 'border-background-default'\n        : isDanger\n          ? isPressed || isLoading\n            ? 'border-error-defaultPressed'\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-defaultPressed'\n      : 'text-error-default'\n    : isInverse\n      ? 'text-primary-inverse'\n      : 'text-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"]}

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

@@ -1,15 +1,17 @@
-import { ButtonBaseProps } from '../../../../primitives/ButtonBase';
+import type { ButtonBaseProps } from '../../../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;

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

@@ -1 +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"}
+{"version":3,"file":"ButtonSecondary.types.d.ts","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonSecondary/ButtonSecondary.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAE3D;;GAEG;AACH,MAAM,MAAM,oBAAoB,GAAG;IACjC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,GAAG,eAAe,CAAC"}

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

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonSecondary/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,YAAY,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AACpE,OAAO,EAAE,cAAc,IAAI,mBAAmB,EAAE,MAAM,mCAAmC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonSecondary/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,YAAY,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonSecondary/index.ts"],"names":[],"mappings":";;;;;;AAAA,qDAA4C;AAAnC,2HAAA,OAAO,OAAA;AAEhB,gEAA0F;AAAjF,iHAAA,cAAc,OAAuB","sourcesContent":["export { default } from './ButtonSecondary';\nexport type { ButtonSecondaryProps } from './ButtonSecondary.types';\nexport { ButtonBaseSize as ButtonSecondarySize } from '../../../../primitives/ButtonBase';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonSecondary/index.ts"],"names":[],"mappings":";;;AAAA,2CAAwD;AAA/C,4GAAA,mBAAmB,OAAA;AAC5B,qDAAoD;AAA3C,kHAAA,eAAe,OAAA","sourcesContent":["export { ButtonSecondarySize } from '../../../../types';\nexport { ButtonSecondary } from './ButtonSecondary';\nexport type { ButtonSecondaryProps } from './ButtonSecondary.types';\n"]}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"ButtonTertiary.d.ts","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonTertiary/ButtonTertiary.tsx"],"names":[],"mappings":"AACA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAQjD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAMlE,QAAA,MAAM,cAAc,6JAcjB,mBAAmB,sBAyErB,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"ButtonTertiary.d.ts","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonTertiary/ButtonTertiary.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAQxC,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAElE,eAAO,MAAM,cAAc,6JAcxB,mBAAmB,sBA+FrB,CAAC"}