@metamask-previews/design-system-react-native 0.26.0-preview.047f96c → 0.27.0-preview.a0fe3894

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

@@ -1 +1 @@
-{"version":3,"file":"Spinner.cjs","sourceRoot":"","sources":["../../../../src/components/temp-components/Spinner/Spinner.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,8FAA4E;AAC5E,+CAAyC;AACzC,+CAAoC;AACpC,mFAMiC;AAGjC,+CAAiE;AAEjE,+CAA0D;AAInD,MAAM,OAAO,GAAG,CAAC,EACtB,KAAK,GAAG,gBAAS,CAAC,WAAW,EAC7B,gBAAgB,EAChB,WAAW,EACX,gBAAgB,EAChB,WAAW,EACX,KAAK,EACL,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,IAAI,EAAE,eAAQ,CAAC,EAAE;QACjB,IAAI,EAAE,eAAQ,CAAC,OAAO;QACtB,MAAM,EAAE,cAAc;QACtB,KAAK;QACL,GAAG,gBAAgB;KACpB,CAAC;IAEF,MAAM,qBAAqB,GAAuB;QAChD,OAAO,EAAE,kBAAW,CAAC,MAAM;QAC3B,KAAK,EAAE,gBAAS,CAAC,WAAW;QAC5B,MAAM,EAAE,cAAc;QACtB,GAAG,gBAAgB;KACpB,CAAC;IAEF,OAAO,CACL,CAAC,mBAAI,CACH,IAAI,KAAK,CAAC,CACV,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,+BAA+B,EAAE,WAAW,CAAC,EAAE,KAAK,CAAC,CAAC,CAEvE;MAAA,CAAC,iCAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,uBAAuB,CACnE;QAAA,CAAC,WAAI,CAAC,IAAI,qBAAqB,CAAC,EAClC;MAAA,EAAE,iCAAQ,CAAC,IAAI,CACf;MAAA,CAAC,WAAW,IAAI,CAAC,WAAI,CAAC,IAAI,qBAAqB,CAAC,CAAC,CAAC,WAAW,CAAC,EAAE,WAAI,CAAC,CACvE;IAAA,EAAE,mBAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC;AAtDW,QAAA,OAAO,WAsDlB","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 '../../Icon';\nimport { Icon, IconColor, IconName, IconSize } from '../../Icon';\nimport type { TextProps } from '../../Text';\nimport { Text, TextVariant, TextColor } from '../../Text';\n\nimport type { SpinnerProps } from './Spinner.types';\n\nexport const Spinner = ({\n  color = IconColor.IconDefault,\n  spinnerIconProps,\n  loadingText,\n  loadingTextProps,\n  twClassName,\n  style,\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    size: IconSize.Md,\n    name: IconName.Loading,\n    testID: 'spinner-icon',\n    color,\n    ...spinnerIconProps,\n  };\n\n  const finalLoadingTextProps: Partial<TextProps> = {\n    variant: TextVariant.BodyMd,\n    color: TextColor.TextDefault,\n    testID: 'spinner-text',\n    ...loadingTextProps,\n  };\n\n  return (\n    <View\n      {...props}\n      style={[tw.style('flex-row items-center gap-x-2', twClassName), style]}\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"]}
+{"version":3,"file":"Spinner.cjs","sourceRoot":"","sources":["../../../../src/components/temp-components/Spinner/Spinner.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,8FAA4E;AAC5E,+CAAyC;AACzC,+CAAoC;AACpC,mFAMiC;AAGjC,+CAAiE;AAEjE,+CAA0D;AAInD,MAAM,OAAO,GAAG,CAAC,EACtB,KAAK,GAAG,gBAAS,CAAC,WAAW,EAC7B,gBAAgB,EAChB,WAAW,EACX,gBAAgB,EAChB,WAAW,EACX,KAAK,EACL,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,EAAE,EAAE,CAAC,CAAC;IAER,MAAM,qBAAqB,GAAc;QACvC,IAAI,EAAE,eAAQ,CAAC,EAAE;QACjB,IAAI,EAAE,eAAQ,CAAC,OAAO;QACtB,MAAM,EAAE,cAAc;QACtB,KAAK;QACL,GAAG,gBAAgB;KACpB,CAAC;IAEF,MAAM,qBAAqB,GAAuB;QAChD,OAAO,EAAE,kBAAW,CAAC,MAAM;QAC3B,KAAK,EAAE,gBAAS,CAAC,WAAW;QAC5B,MAAM,EAAE,cAAc;QACtB,GAAG,gBAAgB;KACpB,CAAC;IAEF,OAAO,CACL,CAAC,mBAAI,CACH,IAAI,KAAK,CAAC,CACV,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,+BAA+B,EAAE,WAAW,CAAC,EAAE,KAAK,CAAC,CAAC,CAEvE;MAAA,CAAC,iCAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,uBAAuB,CACnE;QAAA,CAAC,WAAI,CAAC,IAAI,qBAAqB,CAAC,EAClC;MAAA,EAAE,iCAAQ,CAAC,IAAI,CACf;MAAA,CAAC,WAAW,IAAI,CAAC,WAAI,CAAC,IAAI,qBAAqB,CAAC,CAAC,CAAC,WAAW,CAAC,EAAE,WAAI,CAAC,CACvE;IAAA,EAAE,mBAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC;AAtDW,QAAA,OAAO,WAsDlB","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 '../../Icon';\nimport { Icon, IconColor, IconName, IconSize } from '../../Icon';\nimport type { TextProps } from '../../Text';\nimport { Text, TextVariant, TextColor } from '../../Text';\n\nimport type { SpinnerProps } from './Spinner.types';\n\nexport const Spinner = ({\n  color = IconColor.IconDefault,\n  spinnerIconProps,\n  loadingText,\n  loadingTextProps,\n  twClassName,\n  style,\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    size: IconSize.Md,\n    name: IconName.Loading,\n    testID: 'spinner-icon',\n    color,\n    ...spinnerIconProps,\n  };\n\n  const finalLoadingTextProps: Partial<TextProps> = {\n    variant: TextVariant.BodyMd,\n    color: TextColor.TextDefault,\n    testID: 'spinner-text',\n    ...loadingTextProps,\n  };\n\n  return (\n    <View\n      {...props}\n      style={[tw.style('flex-row items-center gap-x-2', twClassName), style]}\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"]}

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

@@ -24,7 +24,7 @@ export const Spinner = ({ color = IconColor.IconDefault, spinnerIconProps, loadi
     // Define the animated style
     const animatedStyle = useAnimatedStyle(() => ({
         transform: [{ rotate: `${rotation.value % 360}deg` }],
-    }));
+    }), []);
     const finalSpinnerIconProps = {
         size: IconSize.Md,
         name: IconName.Loading,

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

@@ -1 +1 @@
-{"version":3,"file":"Spinner.mjs","sourceRoot":"","sources":["../../../../src/components/temp-components/Spinner/Spinner.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,WAAW,EAAE,sDAAsD;AAC5E,OAAO,QAAO,EAAE,SAAS,EAAE,cAAc;;AACzC,OAAO,EAAE,IAAI,EAAE,qBAAqB;AACpC,OAAO,QAAQ,EAAE,EACf,cAAc,EACd,gBAAgB,EAChB,UAAU,EACV,UAAU,EACV,MAAM,EACP,gCAAgC;AAGjC,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,6BAAmB;AAEjE,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,SAAS,EAAE,6BAAmB;AAI1D,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,EACtB,KAAK,GAAG,SAAS,CAAC,WAAW,EAC7B,gBAAgB,EAChB,WAAW,EACX,gBAAgB,EAChB,WAAW,EACX,KAAK,EACL,GAAG,KAAK,EACK,EAAE,EAAE;IACjB,MAAM,EAAE,GAAG,WAAW,EAAE,CAAC;IAEzB,qCAAqC;IACrC,MAAM,QAAQ,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC;IAEnC,gDAAgD;IAChD,SAAS,CAAC,GAAG,EAAE;QACb,QAAQ,CAAC,KAAK,GAAG,UAAU,CACzB,UAAU,CAAC,GAAG,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,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,gBAAgB,CAAC,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,IAAI,EAAE,QAAQ,CAAC,EAAE;QACjB,IAAI,EAAE,QAAQ,CAAC,OAAO;QACtB,MAAM,EAAE,cAAc;QACtB,KAAK;QACL,GAAG,gBAAgB;KACpB,CAAC;IAEF,MAAM,qBAAqB,GAAuB;QAChD,OAAO,EAAE,WAAW,CAAC,MAAM;QAC3B,KAAK,EAAE,SAAS,CAAC,WAAW;QAC5B,MAAM,EAAE,cAAc;QACtB,GAAG,gBAAgB;KACpB,CAAC;IAEF,OAAO,CACL,CAAC,IAAI,CACH,IAAI,KAAK,CAAC,CACV,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,+BAA+B,EAAE,WAAW,CAAC,EAAE,KAAK,CAAC,CAAC,CAEvE;MAAA,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,uBAAuB,CACnE;QAAA,CAAC,IAAI,CAAC,IAAI,qBAAqB,CAAC,EAClC;MAAA,EAAE,QAAQ,CAAC,IAAI,CACf;MAAA,CAAC,WAAW,IAAI,CAAC,IAAI,CAAC,IAAI,qBAAqB,CAAC,CAAC,CAAC,WAAW,CAAC,EAAE,IAAI,CAAC,CACvE;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC,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 '../../Icon';\nimport { Icon, IconColor, IconName, IconSize } from '../../Icon';\nimport type { TextProps } from '../../Text';\nimport { Text, TextVariant, TextColor } from '../../Text';\n\nimport type { SpinnerProps } from './Spinner.types';\n\nexport const Spinner = ({\n  color = IconColor.IconDefault,\n  spinnerIconProps,\n  loadingText,\n  loadingTextProps,\n  twClassName,\n  style,\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    size: IconSize.Md,\n    name: IconName.Loading,\n    testID: 'spinner-icon',\n    color,\n    ...spinnerIconProps,\n  };\n\n  const finalLoadingTextProps: Partial<TextProps> = {\n    variant: TextVariant.BodyMd,\n    color: TextColor.TextDefault,\n    testID: 'spinner-text',\n    ...loadingTextProps,\n  };\n\n  return (\n    <View\n      {...props}\n      style={[tw.style('flex-row items-center gap-x-2', twClassName), style]}\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"]}
+{"version":3,"file":"Spinner.mjs","sourceRoot":"","sources":["../../../../src/components/temp-components/Spinner/Spinner.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,WAAW,EAAE,sDAAsD;AAC5E,OAAO,QAAO,EAAE,SAAS,EAAE,cAAc;;AACzC,OAAO,EAAE,IAAI,EAAE,qBAAqB;AACpC,OAAO,QAAQ,EAAE,EACf,cAAc,EACd,gBAAgB,EAChB,UAAU,EACV,UAAU,EACV,MAAM,EACP,gCAAgC;AAGjC,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,6BAAmB;AAEjE,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,SAAS,EAAE,6BAAmB;AAI1D,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,EACtB,KAAK,GAAG,SAAS,CAAC,WAAW,EAC7B,gBAAgB,EAChB,WAAW,EACX,gBAAgB,EAChB,WAAW,EACX,KAAK,EACL,GAAG,KAAK,EACK,EAAE,EAAE;IACjB,MAAM,EAAE,GAAG,WAAW,EAAE,CAAC;IAEzB,qCAAqC;IACrC,MAAM,QAAQ,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC;IAEnC,gDAAgD;IAChD,SAAS,CAAC,GAAG,EAAE;QACb,QAAQ,CAAC,KAAK,GAAG,UAAU,CACzB,UAAU,CAAC,GAAG,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,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,gBAAgB,CAAC,GAAG,EAAE,CAAC,CAAC;QAC5C,SAAS,EAAE,CAAC,EAAE,MAAM,EAAE,GAAG,QAAQ,CAAC,KAAK,GAAG,GAAG,KAAK,EAAE,CAAC;KACtD,CAAC,EAAE,EAAE,CAAC,CAAC;IAER,MAAM,qBAAqB,GAAc;QACvC,IAAI,EAAE,QAAQ,CAAC,EAAE;QACjB,IAAI,EAAE,QAAQ,CAAC,OAAO;QACtB,MAAM,EAAE,cAAc;QACtB,KAAK;QACL,GAAG,gBAAgB;KACpB,CAAC;IAEF,MAAM,qBAAqB,GAAuB;QAChD,OAAO,EAAE,WAAW,CAAC,MAAM;QAC3B,KAAK,EAAE,SAAS,CAAC,WAAW;QAC5B,MAAM,EAAE,cAAc;QACtB,GAAG,gBAAgB;KACpB,CAAC;IAEF,OAAO,CACL,CAAC,IAAI,CACH,IAAI,KAAK,CAAC,CACV,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,+BAA+B,EAAE,WAAW,CAAC,EAAE,KAAK,CAAC,CAAC,CAEvE;MAAA,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,uBAAuB,CACnE;QAAA,CAAC,IAAI,CAAC,IAAI,qBAAqB,CAAC,EAClC;MAAA,EAAE,QAAQ,CAAC,IAAI,CACf;MAAA,CAAC,WAAW,IAAI,CAAC,IAAI,CAAC,IAAI,qBAAqB,CAAC,CAAC,CAAC,WAAW,CAAC,EAAE,IAAI,CAAC,CACvE;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC,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 '../../Icon';\nimport { Icon, IconColor, IconName, IconSize } from '../../Icon';\nimport type { TextProps } from '../../Text';\nimport { Text, TextVariant, TextColor } from '../../Text';\n\nimport type { SpinnerProps } from './Spinner.types';\n\nexport const Spinner = ({\n  color = IconColor.IconDefault,\n  spinnerIconProps,\n  loadingText,\n  loadingTextProps,\n  twClassName,\n  style,\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    size: IconSize.Md,\n    name: IconName.Loading,\n    testID: 'spinner-icon',\n    color,\n    ...spinnerIconProps,\n  };\n\n  const finalLoadingTextProps: Partial<TextProps> = {\n    variant: TextVariant.BodyMd,\n    color: TextColor.TextDefault,\n    testID: 'spinner-text',\n    ...loadingTextProps,\n  };\n\n  return (\n    <View\n      {...props}\n      style={[tw.style('flex-row items-center gap-x-2', twClassName), style]}\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"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@metamask-previews/design-system-react-native",
-  "version": "0.26.0-preview.047f96c",
+  "version": "0.27.0-preview.a0fe3894",
   "description": "Design System React Native",
   "keywords": [
     "MetaMask",
@@ -47,7 +47,7 @@
     "test:watch": "NODE_OPTIONS=--experimental-vm-modules jest --watch"
   },
   "dependencies": {
-    "@metamask-previews/design-system-shared": "0.19.0-preview.047f96c",
+    "@metamask-previews/design-system-shared": "0.20.0-preview.a0fe3894",
     "fast-text-encoding": "^1.0.6",
     "react-native-jazzicon": "^0.1.2"
   },
@@ -57,8 +57,8 @@
     "@babel/preset-react": "^7.25.9",
     "@babel/preset-typescript": "^7.23.3",
     "@figma/code-connect": "^1.0.0",
-    "@metamask-previews/design-system-twrnc-preset": "0.4.2-preview.047f96c",
-    "@metamask-previews/design-tokens": "8.4.0-preview.047f96c",
+    "@metamask-previews/design-system-twrnc-preset": "0.4.2-preview.a0fe3894",
+    "@metamask-previews/design-tokens": "8.4.0-preview.a0fe3894",
     "@metamask/auto-changelog": "^6.1.1",
     "@metamask/utils": "^11.11.0",
     "@react-native/babel-preset": "0.81.5",

package/dist/components/BottomSheetHeader/BottomSheetHeader.constants.cjs

@@ -1,15 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.BOTTOM_SHEET_HEADER_VARIANT_MAP = void 0;
-// External dependencies.
-const HeaderBase_types_1 = require("../HeaderBase/HeaderBase.types.cjs");
-// Internal dependencies.
-const BottomSheetHeader_types_1 = require("./BottomSheetHeader.types.cjs");
-/**
- * Maps BottomSheetHeaderVariant to HeaderBaseVariant.
- */
-exports.BOTTOM_SHEET_HEADER_VARIANT_MAP = {
-    [BottomSheetHeader_types_1.BottomSheetHeaderVariant.Display]: HeaderBase_types_1.HeaderBaseVariant.Display,
-    [BottomSheetHeader_types_1.BottomSheetHeaderVariant.Compact]: HeaderBase_types_1.HeaderBaseVariant.Compact,
-};
-//# sourceMappingURL=BottomSheetHeader.constants.cjs.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"BottomSheetHeader.constants.cjs","sourceRoot":"","sources":["../../../src/components/BottomSheetHeader/BottomSheetHeader.constants.ts"],"names":[],"mappings":";;;AAAA,yBAAyB;AACzB,yEAAmE;AAEnE,yBAAyB;AACzB,2EAAqE;AAErE;;GAEG;AACU,QAAA,+BAA+B,GAGxC;IACF,CAAC,kDAAwB,CAAC,OAAO,CAAC,EAAE,oCAAiB,CAAC,OAAO;IAC7D,CAAC,kDAAwB,CAAC,OAAO,CAAC,EAAE,oCAAiB,CAAC,OAAO;CAC9D,CAAC","sourcesContent":["// External dependencies.\nimport { HeaderBaseVariant } from '../HeaderBase/HeaderBase.types';\n\n// Internal dependencies.\nimport { BottomSheetHeaderVariant } from './BottomSheetHeader.types';\n\n/**\n * Maps BottomSheetHeaderVariant to HeaderBaseVariant.\n */\nexport const BOTTOM_SHEET_HEADER_VARIANT_MAP: Record<\n  BottomSheetHeaderVariant,\n  HeaderBaseVariant\n> = {\n  [BottomSheetHeaderVariant.Display]: HeaderBaseVariant.Display,\n  [BottomSheetHeaderVariant.Compact]: HeaderBaseVariant.Compact,\n};\n"]}

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

@@ -1,7 +0,0 @@
-import { HeaderBaseVariant } from "../HeaderBase/HeaderBase.types.cjs";
-import { BottomSheetHeaderVariant } from "./BottomSheetHeader.types.cjs";
-/**
- * Maps BottomSheetHeaderVariant to HeaderBaseVariant.
- */
-export declare const BOTTOM_SHEET_HEADER_VARIANT_MAP: Record<BottomSheetHeaderVariant, HeaderBaseVariant>;
-//# sourceMappingURL=BottomSheetHeader.constants.d.cts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"BottomSheetHeader.constants.d.cts","sourceRoot":"","sources":["../../../src/components/BottomSheetHeader/BottomSheetHeader.constants.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,2CAAuC;AAGnE,OAAO,EAAE,wBAAwB,EAAE,sCAAkC;AAErE;;GAEG;AACH,eAAO,MAAM,+BAA+B,EAAE,MAAM,CAClD,wBAAwB,EACxB,iBAAiB,CAIlB,CAAC"}

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

@@ -1,7 +0,0 @@
-import { HeaderBaseVariant } from "../HeaderBase/HeaderBase.types.mjs";
-import { BottomSheetHeaderVariant } from "./BottomSheetHeader.types.mjs";
-/**
- * Maps BottomSheetHeaderVariant to HeaderBaseVariant.
- */
-export declare const BOTTOM_SHEET_HEADER_VARIANT_MAP: Record<BottomSheetHeaderVariant, HeaderBaseVariant>;
-//# sourceMappingURL=BottomSheetHeader.constants.d.mts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"BottomSheetHeader.constants.d.mts","sourceRoot":"","sources":["../../../src/components/BottomSheetHeader/BottomSheetHeader.constants.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,2CAAuC;AAGnE,OAAO,EAAE,wBAAwB,EAAE,sCAAkC;AAErE;;GAEG;AACH,eAAO,MAAM,+BAA+B,EAAE,MAAM,CAClD,wBAAwB,EACxB,iBAAiB,CAIlB,CAAC"}

package/dist/components/BottomSheetHeader/BottomSheetHeader.constants.mjs

@@ -1,12 +0,0 @@
-// External dependencies.
-import { HeaderBaseVariant } from "../HeaderBase/HeaderBase.types.mjs";
-// Internal dependencies.
-import { BottomSheetHeaderVariant } from "./BottomSheetHeader.types.mjs";
-/**
- * Maps BottomSheetHeaderVariant to HeaderBaseVariant.
- */
-export const BOTTOM_SHEET_HEADER_VARIANT_MAP = {
-    [BottomSheetHeaderVariant.Display]: HeaderBaseVariant.Display,
-    [BottomSheetHeaderVariant.Compact]: HeaderBaseVariant.Compact,
-};
-//# sourceMappingURL=BottomSheetHeader.constants.mjs.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"BottomSheetHeader.constants.mjs","sourceRoot":"","sources":["../../../src/components/BottomSheetHeader/BottomSheetHeader.constants.ts"],"names":[],"mappings":"AAAA,yBAAyB;AACzB,OAAO,EAAE,iBAAiB,EAAE,2CAAuC;AAEnE,yBAAyB;AACzB,OAAO,EAAE,wBAAwB,EAAE,sCAAkC;AAErE;;GAEG;AACH,MAAM,CAAC,MAAM,+BAA+B,GAGxC;IACF,CAAC,wBAAwB,CAAC,OAAO,CAAC,EAAE,iBAAiB,CAAC,OAAO;IAC7D,CAAC,wBAAwB,CAAC,OAAO,CAAC,EAAE,iBAAiB,CAAC,OAAO;CAC9D,CAAC","sourcesContent":["// External dependencies.\nimport { HeaderBaseVariant } from '../HeaderBase/HeaderBase.types';\n\n// Internal dependencies.\nimport { BottomSheetHeaderVariant } from './BottomSheetHeader.types';\n\n/**\n * Maps BottomSheetHeaderVariant to HeaderBaseVariant.\n */\nexport const BOTTOM_SHEET_HEADER_VARIANT_MAP: Record<\n  BottomSheetHeaderVariant,\n  HeaderBaseVariant\n> = {\n  [BottomSheetHeaderVariant.Display]: HeaderBaseVariant.Display,\n  [BottomSheetHeaderVariant.Compact]: HeaderBaseVariant.Compact,\n};\n"]}

package/dist/components/HeaderBase/HeaderBase.constants.cjs

@@ -1,15 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.HEADERBASE_VARIANT_TEXT_VARIANTS = void 0;
-// External dependencies.
-const Text_1 = require("../Text/index.cjs");
-// Internal dependencies.
-const HeaderBase_types_1 = require("./HeaderBase.types.cjs");
-/**
- * Text variant mapping based on HeaderBase variant.
- */
-exports.HEADERBASE_VARIANT_TEXT_VARIANTS = {
-    [HeaderBase_types_1.HeaderBaseVariant.Compact]: Text_1.TextVariant.HeadingSm,
-    [HeaderBase_types_1.HeaderBaseVariant.Display]: Text_1.TextVariant.HeadingLg,
-};
-//# sourceMappingURL=HeaderBase.constants.cjs.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"HeaderBase.constants.cjs","sourceRoot":"","sources":["../../../src/components/HeaderBase/HeaderBase.constants.ts"],"names":[],"mappings":";;;AAAA,yBAAyB;AACzB,4CAAsC;AAEtC,yBAAyB;AACzB,6DAAuD;AAEvD;;GAEG;AACU,QAAA,gCAAgC,GAGzC;IACF,CAAC,oCAAiB,CAAC,OAAO,CAAC,EAAE,kBAAW,CAAC,SAAS;IAClD,CAAC,oCAAiB,CAAC,OAAO,CAAC,EAAE,kBAAW,CAAC,SAAS;CACnD,CAAC","sourcesContent":["// External dependencies.\nimport { TextVariant } from '../Text';\n\n// Internal dependencies.\nimport { HeaderBaseVariant } from './HeaderBase.types';\n\n/**\n * Text variant mapping based on HeaderBase variant.\n */\nexport const HEADERBASE_VARIANT_TEXT_VARIANTS: Record<\n  HeaderBaseVariant,\n  TextVariant\n> = {\n  [HeaderBaseVariant.Compact]: TextVariant.HeadingSm,\n  [HeaderBaseVariant.Display]: TextVariant.HeadingLg,\n};\n"]}

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

@@ -1,7 +0,0 @@
-import { TextVariant } from "../Text/index.cjs";
-import { HeaderBaseVariant } from "./HeaderBase.types.cjs";
-/**
- * Text variant mapping based on HeaderBase variant.
- */
-export declare const HEADERBASE_VARIANT_TEXT_VARIANTS: Record<HeaderBaseVariant, TextVariant>;
-//# sourceMappingURL=HeaderBase.constants.d.cts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"HeaderBase.constants.d.cts","sourceRoot":"","sources":["../../../src/components/HeaderBase/HeaderBase.constants.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,0BAAgB;AAGtC,OAAO,EAAE,iBAAiB,EAAE,+BAA2B;AAEvD;;GAEG;AACH,eAAO,MAAM,gCAAgC,EAAE,MAAM,CACnD,iBAAiB,EACjB,WAAW,CAIZ,CAAC"}

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

@@ -1,7 +0,0 @@
-import { TextVariant } from "../Text/index.mjs";
-import { HeaderBaseVariant } from "./HeaderBase.types.mjs";
-/**
- * Text variant mapping based on HeaderBase variant.
- */
-export declare const HEADERBASE_VARIANT_TEXT_VARIANTS: Record<HeaderBaseVariant, TextVariant>;
-//# sourceMappingURL=HeaderBase.constants.d.mts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"HeaderBase.constants.d.mts","sourceRoot":"","sources":["../../../src/components/HeaderBase/HeaderBase.constants.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,0BAAgB;AAGtC,OAAO,EAAE,iBAAiB,EAAE,+BAA2B;AAEvD;;GAEG;AACH,eAAO,MAAM,gCAAgC,EAAE,MAAM,CACnD,iBAAiB,EACjB,WAAW,CAIZ,CAAC"}

package/dist/components/HeaderBase/HeaderBase.constants.mjs

@@ -1,12 +0,0 @@
-// External dependencies.
-import { TextVariant } from "../Text/index.mjs";
-// Internal dependencies.
-import { HeaderBaseVariant } from "./HeaderBase.types.mjs";
-/**
- * Text variant mapping based on HeaderBase variant.
- */
-export const HEADERBASE_VARIANT_TEXT_VARIANTS = {
-    [HeaderBaseVariant.Compact]: TextVariant.HeadingSm,
-    [HeaderBaseVariant.Display]: TextVariant.HeadingLg,
-};
-//# sourceMappingURL=HeaderBase.constants.mjs.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"HeaderBase.constants.mjs","sourceRoot":"","sources":["../../../src/components/HeaderBase/HeaderBase.constants.ts"],"names":[],"mappings":"AAAA,yBAAyB;AACzB,OAAO,EAAE,WAAW,EAAE,0BAAgB;AAEtC,yBAAyB;AACzB,OAAO,EAAE,iBAAiB,EAAE,+BAA2B;AAEvD;;GAEG;AACH,MAAM,CAAC,MAAM,gCAAgC,GAGzC;IACF,CAAC,iBAAiB,CAAC,OAAO,CAAC,EAAE,WAAW,CAAC,SAAS;IAClD,CAAC,iBAAiB,CAAC,OAAO,CAAC,EAAE,WAAW,CAAC,SAAS;CACnD,CAAC","sourcesContent":["// External dependencies.\nimport { TextVariant } from '../Text';\n\n// Internal dependencies.\nimport { HeaderBaseVariant } from './HeaderBase.types';\n\n/**\n * Text variant mapping based on HeaderBase variant.\n */\nexport const HEADERBASE_VARIANT_TEXT_VARIANTS: Record<\n  HeaderBaseVariant,\n  TextVariant\n> = {\n  [HeaderBaseVariant.Compact]: TextVariant.HeadingSm,\n  [HeaderBaseVariant.Display]: TextVariant.HeadingLg,\n};\n"]}