@metamask-previews/design-system-react-native 0.0.0-preview.6fee845 → 0.0.0-preview.8561168

package/dist/shared/enums.d.ts

@@ -0,0 +1,46 @@
+/**
+ * The size of all Avatars
+ */
+export declare enum AvatarSize {
+    /**
+     * Represents an extra small avatar size (16px).
+     */
+    Xs = "16",
+    /**
+     * Represents a small avatar size (24px).
+     */
+    Sm = "24",
+    /**
+     * Represents a medium avatar size (32px).
+     */
+    Md = "32",
+    /**
+     * Represents a large avatar size (40px).
+     */
+    Lg = "40",
+    /**
+     * Represents an extra large avatar size (48px).
+     */
+    Xl = "48"
+}
+export { AvatarSize as AvatarAccountSize };
+export { AvatarSize as AvatarBaseSize };
+export { AvatarSize as AvatarFaviconSize };
+export { AvatarSize as AvatarIconSize };
+export { AvatarSize as AvatarNetworkSize };
+export { AvatarSize as AvatarTokenSize };
+/**
+ * The shape of all Avatars
+ */
+export declare enum AvatarShape {
+    /**
+     * Represents a circular Avatar.
+     */
+    Circle = "circle",
+    /**
+     * Represents a squared Avatar
+     */
+    Square = "square"
+}
+export { AvatarShape as AvatarBaseShape };
+//# sourceMappingURL=enums.d.ts.map

package/dist/shared/enums.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"enums.d.ts","sourceRoot":"","sources":["../../src/shared/enums.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,oBAAY,UAAU;IACpB;;OAEG;IACH,EAAE,OAAO;IACT;;OAEG;IACH,EAAE,OAAO;IACT;;OAEG;IACH,EAAE,OAAO;IACT;;OAEG;IACH,EAAE,OAAO;IACT;;OAEG;IACH,EAAE,OAAO;CACV;AACD,OAAO,EAAE,UAAU,IAAI,iBAAiB,EAAE,CAAC;AAC3C,OAAO,EAAE,UAAU,IAAI,cAAc,EAAE,CAAC;AACxC,OAAO,EAAE,UAAU,IAAI,iBAAiB,EAAE,CAAC;AAC3C,OAAO,EAAE,UAAU,IAAI,cAAc,EAAE,CAAC;AACxC,OAAO,EAAE,UAAU,IAAI,iBAAiB,EAAE,CAAC;AAC3C,OAAO,EAAE,UAAU,IAAI,eAAe,EAAE,CAAC;AAEzC;;GAEG;AACH,oBAAY,WAAW;IACrB;;OAEG;IACH,MAAM,WAAW;IACjB;;OAEG;IACH,MAAM,WAAW;CAClB;AACD,OAAO,EAAE,WAAW,IAAI,eAAe,EAAE,CAAC"}

package/dist/shared/enums.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AvatarBaseShape = exports.AvatarShape = exports.AvatarTokenSize = exports.AvatarNetworkSize = exports.AvatarIconSize = exports.AvatarFaviconSize = exports.AvatarBaseSize = exports.AvatarAccountSize = exports.AvatarSize = void 0;
+/**
+ * The size of all Avatars
+ */
+var AvatarSize;
+(function (AvatarSize) {
+    /**
+     * Represents an extra small avatar size (16px).
+     */
+    AvatarSize["Xs"] = "16";
+    /**
+     * Represents a small avatar size (24px).
+     */
+    AvatarSize["Sm"] = "24";
+    /**
+     * Represents a medium avatar size (32px).
+     */
+    AvatarSize["Md"] = "32";
+    /**
+     * Represents a large avatar size (40px).
+     */
+    AvatarSize["Lg"] = "40";
+    /**
+     * Represents an extra large avatar size (48px).
+     */
+    AvatarSize["Xl"] = "48";
+})(AvatarSize || (exports.AvatarTokenSize = exports.AvatarNetworkSize = exports.AvatarIconSize = exports.AvatarFaviconSize = exports.AvatarBaseSize = exports.AvatarAccountSize = exports.AvatarSize = AvatarSize = {}));
+/**
+ * The shape of all Avatars
+ */
+var AvatarShape;
+(function (AvatarShape) {
+    /**
+     * Represents a circular Avatar.
+     */
+    AvatarShape["Circle"] = "circle";
+    /**
+     * Represents a squared Avatar
+     */
+    AvatarShape["Square"] = "square";
+})(AvatarShape || (exports.AvatarBaseShape = exports.AvatarShape = AvatarShape = {}));
+//# sourceMappingURL=enums.js.map

package/dist/shared/enums.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"enums.js","sourceRoot":"","sources":["../../src/shared/enums.ts"],"names":[],"mappings":";;;AAAA;;GAEG;AACH,IAAY,UAqBX;AArBD,WAAY,UAAU;IACpB;;OAEG;IACH,uBAAS,CAAA;IACT;;OAEG;IACH,uBAAS,CAAA;IACT;;OAEG;IACH,uBAAS,CAAA;IACT;;OAEG;IACH,uBAAS,CAAA;IACT;;OAEG;IACH,uBAAS,CAAA;AACX,CAAC,EArBW,UAAU,0LAAV,UAAU,QAqBrB;AAQD;;GAEG;AACH,IAAY,WASX;AATD,WAAY,WAAW;IACrB;;OAEG;IACH,gCAAiB,CAAA;IACjB;;OAEG;IACH,gCAAiB,CAAA;AACnB,CAAC,EATW,WAAW,qDAAX,WAAW,QAStB","sourcesContent":["/**\n * The size of all Avatars\n */\nexport enum AvatarSize {\n  /**\n   * Represents an extra small avatar size (16px).\n   */\n  Xs = '16',\n  /**\n   * Represents a small avatar size (24px).\n   */\n  Sm = '24',\n  /**\n   * Represents a medium avatar size (32px).\n   */\n  Md = '32',\n  /**\n   * Represents a large avatar size (40px).\n   */\n  Lg = '40',\n  /**\n   * Represents an extra large avatar size (48px).\n   */\n  Xl = '48',\n}\nexport { AvatarSize as AvatarAccountSize };\nexport { AvatarSize as AvatarBaseSize };\nexport { AvatarSize as AvatarFaviconSize };\nexport { AvatarSize as AvatarIconSize };\nexport { AvatarSize as AvatarNetworkSize };\nexport { AvatarSize as AvatarTokenSize };\n\n/**\n * The shape of all Avatars\n */\nexport enum AvatarShape {\n  /**\n   * Represents a circular Avatar.\n   */\n  Circle = 'circle',\n  /**\n   * Represents a squared Avatar\n   */\n  Square = 'square',\n}\nexport { AvatarShape as AvatarBaseShape };\n"]}

package/dist/temp-components/Spinner/Spinner.constants.d.ts

@@ -0,0 +1,3 @@
+import type { SpinnerProps } from './Spinner.types';
+export declare const DEFAULT_SPINNER_PROPS: Partial<SpinnerProps>;
+//# sourceMappingURL=Spinner.constants.d.ts.map

package/dist/temp-components/Spinner/Spinner.constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner.constants.d.ts","sourceRoot":"","sources":["../../../src/temp-components/Spinner/Spinner.constants.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAGpD,eAAO,MAAM,qBAAqB,EAAE,OAAO,CAAC,YAAY,CAavD,CAAC"}

package/dist/temp-components/Spinner/Spinner.constants.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEFAULT_SPINNER_PROPS = void 0;
+const Icon_1 = require("../../components/Icon");
+const Text_1 = require("../../components/Text");
+// Defaults
+exports.DEFAULT_SPINNER_PROPS = {
+    color: Icon_1.IconColor.IconDefault,
+    spinnerIconProps: {
+        size: Icon_1.IconSize.Md,
+        testID: 'spinner-icon',
+    },
+    loadingText: 'Loading',
+    loadingTextProps: {
+        variant: Text_1.TextVariant.BodyMd,
+        color: Text_1.TextColor.TextDefault,
+        testID: 'spinner-text',
+    },
+    twClassName: '',
+};
+//# sourceMappingURL=Spinner.constants.js.map

package/dist/temp-components/Spinner/Spinner.constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner.constants.js","sourceRoot":"","sources":["../../../src/temp-components/Spinner/Spinner.constants.ts"],"names":[],"mappings":";;;AAAA,gDAA4D;AAC5D,gDAA+D;AAG/D,WAAW;AACE,QAAA,qBAAqB,GAA0B;IAC1D,KAAK,EAAE,gBAAS,CAAC,WAAW;IAC5B,gBAAgB,EAAE;QAChB,IAAI,EAAE,eAAQ,CAAC,EAAE;QACjB,MAAM,EAAE,cAAc;KACvB;IACD,WAAW,EAAE,SAAS;IACtB,gBAAgB,EAAE;QAChB,OAAO,EAAE,kBAAW,CAAC,MAAM;QAC3B,KAAK,EAAE,gBAAS,CAAC,WAAW;QAC5B,MAAM,EAAE,cAAc;KACvB;IACD,WAAW,EAAE,EAAE;CAChB,CAAC","sourcesContent":["import { IconColor, IconSize } from '../../components/Icon';\nimport { TextVariant, TextColor } from '../../components/Text';\nimport type { SpinnerProps } from './Spinner.types';\n\n// Defaults\nexport const DEFAULT_SPINNER_PROPS: Partial<SpinnerProps> = {\n  color: IconColor.IconDefault,\n  spinnerIconProps: {\n    size: IconSize.Md,\n    testID: 'spinner-icon',\n  },\n  loadingText: 'Loading',\n  loadingTextProps: {\n    variant: TextVariant.BodyMd,\n    color: TextColor.TextDefault,\n    testID: 'spinner-text',\n  },\n  twClassName: '',\n};\n"]}

package/dist/temp-components/Spinner/Spinner.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { SpinnerProps } from './Spinner.types';
+declare const Spinner: ({ color, spinnerIconProps, loadingText, loadingTextProps, twClassName, ...props }: SpinnerProps) => React.JSX.Element;
+export default Spinner;
+//# sourceMappingURL=Spinner.d.ts.map

package/dist/temp-components/Spinner/Spinner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../../src/temp-components/Spinner/Spinner.tsx"],"names":[],"mappings":"AACA,OAAO,KAAoB,MAAM,OAAO,CAAC;AAezC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAEpD,QAAA,MAAM,OAAO,sFAOV,YAAY,sBA4Cd,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/dist/temp-components/Spinner/Spinner.js

@@ -0,0 +1,68 @@
+"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 react_native_1 = require("react-native");
+const react_native_reanimated_1 = __importStar(require("react-native-reanimated"));
+const Icon_1 = __importStar(require("../../components/Icon"));
+const Text_1 = __importDefault(require("../../components/Text"));
+const Spinner_constants_1 = require("./Spinner.constants");
+const Spinner = ({ color = Spinner_constants_1.DEFAULT_SPINNER_PROPS.color, spinnerIconProps, loadingText, loadingTextProps, twClassName = '', ...props }) => {
+    const tw = (0, design_system_twrnc_preset_1.useTailwind)();
+    // Create a shared value for rotation
+    const rotation = (0, react_native_reanimated_1.useSharedValue)(0);
+    // Start the animation when the component mounts
+    (0, react_1.useEffect)(() => {
+        rotation.value = (0, react_native_reanimated_1.withRepeat)((0, react_native_reanimated_1.withTiming)(360, { duration: 1000, easing: react_native_reanimated_1.Easing.linear }), // Complete a full spin in 1 second
+        -1, // Infinite repetitions
+        false);
+    }, []);
+    // Define the animated style
+    const animatedStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => ({
+        transform: [{ rotate: `${rotation.value % 360}deg` }],
+    }));
+    const finalSpinnerIconProps = {
+        ...Spinner_constants_1.DEFAULT_SPINNER_PROPS.spinnerIconProps,
+        name: Icon_1.IconName.Loading,
+        color,
+        ...spinnerIconProps,
+    };
+    const finalLoadingTextProps = {
+        ...Spinner_constants_1.DEFAULT_SPINNER_PROPS.loadingTextProps,
+        ...loadingTextProps,
+    };
+    return (<react_native_1.View style={tw `flex-row gap-x-2 items-center ${twClassName}`} testID="spinner" {...props}>
+      <react_native_reanimated_1.default.View style={[animatedStyle]} testID="spinner-animated-view">
+        <Icon_1.default {...finalSpinnerIconProps}/>
+      </react_native_reanimated_1.default.View>
+      {loadingText && <Text_1.default {...finalLoadingTextProps}>{loadingText}</Text_1.default>}
+    </react_native_1.View>);
+};
+exports.default = Spinner;
+//# sourceMappingURL=Spinner.js.map

package/dist/temp-components/Spinner/Spinner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner.js","sourceRoot":"","sources":["../../../src/temp-components/Spinner/Spinner.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,8FAA4E;AAC5E,+CAAyC;AACzC,+CAAoC;AACpC,mFAMiC;AAGjC,8DAAuD;AAEvD,iEAAyC;AACzC,2DAA4D;AAG5D,MAAM,OAAO,GAAG,CAAC,EACf,KAAK,GAAG,yCAAqB,CAAC,KAAK,EACnC,gBAAgB,EAChB,WAAW,EACX,gBAAgB,EAChB,WAAW,GAAG,EAAE,EAChB,GAAG,KAAK,EACK,EAAE,EAAE;IACjB,MAAM,EAAE,GAAG,IAAA,wCAAW,GAAE,CAAC;IAEzB,qCAAqC;IACrC,MAAM,QAAQ,GAAG,IAAA,wCAAc,EAAC,CAAC,CAAC,CAAC;IAEnC,gDAAgD;IAChD,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,QAAQ,CAAC,KAAK,GAAG,IAAA,oCAAU,EACzB,IAAA,oCAAU,EAAC,GAAG,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAE,gCAAM,CAAC,MAAM,EAAE,CAAC,EAAE,mCAAmC;QAC/F,CAAC,CAAC,EAAE,uBAAuB;QAC3B,KAAK,CACN,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,4BAA4B;IAC5B,MAAM,aAAa,GAAG,IAAA,0CAAgB,EAAC,GAAG,EAAE,CAAC,CAAC;QAC5C,SAAS,EAAE,CAAC,EAAE,MAAM,EAAE,GAAG,QAAQ,CAAC,KAAK,GAAG,GAAG,KAAK,EAAE,CAAC;KACtD,CAAC,CAAC,CAAC;IAEJ,MAAM,qBAAqB,GAAc;QACvC,GAAG,yCAAqB,CAAC,gBAAgB;QACzC,IAAI,EAAE,eAAQ,CAAC,OAAO;QACtB,KAAK;QACL,GAAG,gBAAgB;KACpB,CAAC;IAEF,MAAM,qBAAqB,GAAuB;QAChD,GAAG,yCAAqB,CAAC,gBAAgB;QACzC,GAAG,gBAAgB;KACpB,CAAC;IAEF,OAAO,CACL,CAAC,mBAAI,CACH,KAAK,CAAC,CAAC,EAAE,CAAA,iCAAiC,WAAW,EAAE,CAAC,CACxD,MAAM,CAAC,SAAS,CAChB,IAAI,KAAK,CAAC,CAEV;MAAA,CAAC,iCAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,uBAAuB,CACnE;QAAA,CAAC,cAAI,CAAC,IAAI,qBAAqB,CAAC,EAClC;MAAA,EAAE,iCAAQ,CAAC,IAAI,CACf;MAAA,CAAC,WAAW,IAAI,CAAC,cAAI,CAAC,IAAI,qBAAqB,CAAC,CAAC,CAAC,WAAW,CAAC,EAAE,cAAI,CAAC,CACvE;IAAA,EAAE,mBAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,OAAO,CAAC","sourcesContent":["import { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React, { useEffect } from 'react';\nimport { View } from 'react-native';\nimport Animated, {\n  useSharedValue,\n  useAnimatedStyle,\n  withRepeat,\n  withTiming,\n  Easing,\n} from 'react-native-reanimated';\n\nimport type { IconProps } from '../../components/Icon';\nimport Icon, { IconName } from '../../components/Icon';\nimport type { TextProps } from '../../components/Text';\nimport Text from '../../components/Text';\nimport { DEFAULT_SPINNER_PROPS } from './Spinner.constants';\nimport type { SpinnerProps } from './Spinner.types';\n\nconst Spinner = ({\n  color = DEFAULT_SPINNER_PROPS.color,\n  spinnerIconProps,\n  loadingText,\n  loadingTextProps,\n  twClassName = '',\n  ...props\n}: SpinnerProps) => {\n  const tw = useTailwind();\n\n  // Create a shared value for rotation\n  const rotation = useSharedValue(0);\n\n  // Start the animation when the component mounts\n  useEffect(() => {\n    rotation.value = withRepeat(\n      withTiming(360, { duration: 1000, easing: Easing.linear }), // Complete a full spin in 1 second\n      -1, // Infinite repetitions\n      false, // Do not reverse the animation\n    );\n  }, []);\n\n  // Define the animated style\n  const animatedStyle = useAnimatedStyle(() => ({\n    transform: [{ rotate: `${rotation.value % 360}deg` }],\n  }));\n\n  const finalSpinnerIconProps: IconProps = {\n    ...DEFAULT_SPINNER_PROPS.spinnerIconProps,\n    name: IconName.Loading,\n    color,\n    ...spinnerIconProps,\n  };\n\n  const finalLoadingTextProps: Partial<TextProps> = {\n    ...DEFAULT_SPINNER_PROPS.loadingTextProps,\n    ...loadingTextProps,\n  };\n\n  return (\n    <View\n      style={tw`flex-row gap-x-2 items-center ${twClassName}`}\n      testID=\"spinner\"\n      {...props}\n    >\n      <Animated.View style={[animatedStyle]} testID=\"spinner-animated-view\">\n        <Icon {...finalSpinnerIconProps} />\n      </Animated.View>\n      {loadingText && <Text {...finalLoadingTextProps}>{loadingText}</Text>}\n    </View>\n  );\n};\n\nexport default Spinner;\n"]}

package/dist/temp-components/Spinner/Spinner.types.d.ts

@@ -0,0 +1,30 @@
+import type { ViewProps } from 'react-native';
+import type { IconProps, IconColor } from '../../components/Icon';
+import type { TextProps } from '../../components/Text/Text.types';
+/**
+ * Spinner component props.
+ */
+export type SpinnerProps = {
+    /**
+     * Optional prop that sets the color of the spinner icon using predefined theme colors
+     * @default IconColor.IconDefault
+     */
+    color?: IconColor;
+    /**
+     * Optional props to be passed to the loadingText element
+     */
+    spinnerIconProps?: Partial<IconProps>;
+    /**
+     * Optional text to display on the right of the spinner, providing additional context or information about the loading state.
+     */
+    loadingText?: string;
+    /**
+     * Optional props to be passed to the loadingText element
+     */
+    loadingTextProps?: Omit<Partial<TextProps>, 'children'>;
+    /**
+     * Optional prop to add twrnc overriding classNames.
+     */
+    twClassName?: string;
+} & ViewProps;
+//# sourceMappingURL=Spinner.types.d.ts.map

package/dist/temp-components/Spinner/Spinner.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner.types.d.ts","sourceRoot":"","sources":["../../../src/temp-components/Spinner/Spinner.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAClE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kCAAkC,CAAC;AAElE;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG;IACzB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IACtC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,gBAAgB,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE,UAAU,CAAC,CAAC;IACxD;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,GAAG,SAAS,CAAC"}

package/dist/temp-components/Spinner/Spinner.types.js

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

package/dist/temp-components/Spinner/Spinner.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner.types.js","sourceRoot":"","sources":["../../../src/temp-components/Spinner/Spinner.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ViewProps } from 'react-native';\n\nimport type { IconProps, IconColor } from '../../components/Icon';\nimport type { TextProps } from '../../components/Text/Text.types';\n\n/**\n * Spinner component props.\n */\nexport type SpinnerProps = {\n  /**\n   * Optional prop that sets the color of the spinner icon using predefined theme colors\n   * @default IconColor.IconDefault\n   */\n  color?: IconColor;\n  /**\n   * Optional props to be passed to the loadingText element\n   */\n  spinnerIconProps?: Partial<IconProps>;\n  /**\n   * Optional text to display on the right of the spinner, providing additional context or information about the loading state.\n   */\n  loadingText?: string;\n  /**\n   * Optional props to be passed to the loadingText element\n   */\n  loadingTextProps?: Omit<Partial<TextProps>, 'children'>;\n  /**\n   * Optional prop to add twrnc overriding classNames.\n   */\n  twClassName?: string;\n} & ViewProps;\n"]}

package/dist/temp-components/Spinner/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './Spinner';
+export type { SpinnerProps } from './Spinner.types';
+//# sourceMappingURL=index.d.ts.map

package/dist/temp-components/Spinner/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/temp-components/Spinner/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,YAAY,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/temp-components/Spinner/index.js

@@ -0,0 +1,9 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var Spinner_1 = require("./Spinner");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(Spinner_1).default; } });
+//# sourceMappingURL=index.js.map

package/dist/temp-components/Spinner/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/temp-components/Spinner/index.ts"],"names":[],"mappings":";;;;;;AAAA,qCAAoC;AAA3B,mHAAA,OAAO,OAAA","sourcesContent":["export { default } from './Spinner';\nexport type { SpinnerProps } from './Spinner.types';\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@metamask-previews/design-system-react-native",
-  "version": "0.0.0-preview.6fee845",
+  "version": "0.0.0-preview.8561168",
   "description": "Design System React Native",
   "keywords": [
     "MetaMask",
@@ -31,10 +31,10 @@
     "dist/"
   ],
   "scripts": {
-    "build": "tsc --project tsconfig.build.json",
-    "build:docs": "typedoc",
+    "build": "node scripts/build.js",
     "changelog:update": "../../scripts/update-changelog.sh @metamask/design-system-react-native",
     "changelog:validate": "../../scripts/validate-changelog.sh @metamask/design-system-react-native",
+    "generate-icons": "ts-node scripts/generate-icons.ts",
     "publish:preview": "yarn npm publish --tag preview",
     "since-latest-release": "../../scripts/since-latest-release.sh",
     "test": "NODE_OPTIONS=--experimental-vm-modules jest --reporters=jest-silent-reporter",
@@ -42,22 +42,37 @@
     "test:verbose": "NODE_OPTIONS=--experimental-vm-modules jest --verbose",
     "test:watch": "NODE_OPTIONS=--experimental-vm-modules jest --watch"
   },
+  "dependencies": {
+    "@metamask-previews/design-system-twrnc-preset": "0.0.0-preview.8561168",
+    "react": "^18.2.0",
+    "react-native": "^0.72.15",
+    "react-native-jazzicon": "^0.1.2",
+    "react-native-reanimated": "3.3.0"
+  },
   "devDependencies": {
-    "@metamask/auto-changelog": "^3.4.4",
+    "@babel/core": "^7.23.5",
+    "@babel/preset-env": "^7.26.0",
+    "@babel/preset-react": "^7.25.9",
+    "@babel/preset-typescript": "^7.23.3",
+    "@metamask/auto-changelog": "^4.1.0",
+    "@storybook/react-native": "6.5",
+    "@testing-library/react-native": "^12.8.1",
+    "@types/babel__preset-env": "^7",
     "@types/jest": "^27.4.1",
-    "@types/react-native": "^0.72.0",
+    "@types/node": "^16.18.54",
+    "@types/react": "^18.2.0",
+    "@types/react-test-renderer": "^18",
+    "babel-jest": "^29.7.0",
     "deepmerge": "^4.2.2",
-    "eslint": "^8.44.0",
-    "jest": "^27.5.1",
-    "ts-jest": "^27.1.4",
-    "typedoc": "^0.24.8",
-    "typedoc-plugin-missing-exports": "^2.0.0",
+    "jest": "^29.7.0",
+    "metro-react-native-babel-preset": "^0.77.0",
+    "react-native-svg": "^15.10.1",
+    "react-native-svg-transformer": "^1.5.0",
+    "react-test-renderer": "^18.3.1",
+    "ts-jest": "^29.2.5",
+    "ts-node": "^10.9.1",
     "typescript": "~5.2.2"
   },
-  "peerDependencies": {
-    "react": "^18.2.0",
-    "react-native": "0.72.15"
-  },
   "engines": {
     "node": "^18.18 || >=20"
   },

package/dist/components/Button.d.ts

@@ -1,6 +0,0 @@
-import React from 'react';
-export type ButtonProps = {
-    text: string;
-};
-declare const Button: ({ text }: ButtonProps) => React.JSX.Element;
-export default Button;

package/dist/components/Button.js

@@ -1,8 +0,0 @@
-import React from 'react';
-import { TouchableOpacity, Text } from 'react-native';
-const Button = ({ text }) => {
-    return (<TouchableOpacity>
-      <Text>{text}</Text>
-    </TouchableOpacity>);
-};
-export default Button;