react-native-terra-ui 0.5.0 → 0.6.0

package/src/components/header/variants/LargeTitleHeader/index.tsx

@@ -1,25 +1,17 @@
-import { useEffect } from 'react';
-import { Text, View } from 'react-native';
+import { useEffect } from "react";
+import { Text, View } from "react-native";
 
-import Animated, {
-  interpolate,
-  useAnimatedStyle,
-  useSharedValue,
-} from 'react-native-reanimated';
-import { StyleSheet, useUnistyles } from 'react-native-unistyles';
+import Animated, { interpolate, useAnimatedStyle, useSharedValue } from "react-native-reanimated";
+import { StyleSheet, useUnistyles } from "react-native-unistyles";
 
-import { resolveThemeColor } from '#utils/resolve-theme-color';
-import { FONT_WEIGHT_VALUE } from '#utils/typography';
-
-import { Portal } from '../../../portal';
-import {
-  SCREEN_HEADER_PORTAL_HOST,
-  useScreen,
-} from '../../../screen/ScreenContext';
-import { Toolbar } from '../../../toolbar';
-import { HeaderDismissButton } from '../../header-buttons';
-import { HeaderGradientOverlay } from '../../parts/HeaderGradientOverlay';
-import type { TitleHeaderProps } from '../TitleHeader';
+import { resolveThemeColor } from "#utils/resolve-theme-color";
+import { FONT_WEIGHT_VALUE } from "#utils/typography";
+import { Portal } from "../../../portal";
+import { SCREEN_HEADER_PORTAL_HOST, useScreen } from "../../../screen/ScreenContext";
+import { Toolbar } from "../../../toolbar";
+import { HeaderDismissButton } from "../../header-buttons";
+import { HeaderGradientOverlay } from "../../parts/HeaderGradientOverlay";
+import type { TitleHeaderProps } from "../TitleHeader";
 
 const AnimatedText = Animated.createAnimatedComponent(Text);
 
@@ -41,11 +33,8 @@ function LargeTitlePortalContent({
   title,
   overline,
   subtitle,
-  titleAlignment = 'center',
-}: Pick<
-  LargeTitleHeaderProps,
-  'title' | 'overline' | 'subtitle' | 'titleAlignment'
->) {
+  titleAlignment = "center",
+}: Pick<LargeTitleHeaderProps, "title" | "overline" | "subtitle" | "titleAlignment">) {
   const { theme } = useUnistyles();
   const { scrollY } = useScreen();
   styles.useVariants({ titleAlignment });
@@ -59,15 +48,10 @@ function LargeTitlePortalContent({
     }
 
     return {
-      opacity: interpolate(scrollY.value, [0, height], [1, 0], 'clamp'),
+      opacity: interpolate(scrollY.value, [0, height], [1, 0], "clamp"),
       transform: [
         {
-          translateY: interpolate(
-            scrollY.value,
-            [0, height],
-            [0, -LARGE_TITLE_SLIDE_OFFSET],
-            'clamp'
-          ),
+          translateY: interpolate(scrollY.value, [0, height], [0, -LARGE_TITLE_SLIDE_OFFSET], "clamp"),
         },
       ],
     };
@@ -78,27 +62,21 @@ function LargeTitlePortalContent({
       {!!overline && (
         <Text
           style={styles.overline}
-          maxFontSizeMultiplier={
-            theme.typography.variants['label-sm'].maxFontSizeMultiplier
-          }
+          maxFontSizeMultiplier={theme.typography.variants["label-sm"].maxFontSizeMultiplier}
         >
           {overline}
         </Text>
       )}
       <Text
         style={styles.largeTitle}
-        maxFontSizeMultiplier={
-          theme.typography.variants['headline-lg'].maxFontSizeMultiplier
-        }
+        maxFontSizeMultiplier={theme.typography.variants["headline-lg"].maxFontSizeMultiplier}
       >
         {title}
       </Text>
       {!!subtitle && (
         <Text
           style={styles.subtitle}
-          maxFontSizeMultiplier={
-            theme.typography.variants['body-lg'].maxFontSizeMultiplier
-          }
+          maxFontSizeMultiplier={theme.typography.variants["body-lg"].maxFontSizeMultiplier}
         >
           {subtitle}
         </Text>
@@ -133,23 +111,21 @@ export function LargeTitleHeader({
   subtitle,
   LeftToolbar,
   RightToolbar,
-  dismissAction = 'none',
+  dismissAction = "none",
   navigation,
   onDismiss,
-  titleAlignment = 'center',
+  titleAlignment = "center",
   isLargeTitleHidden = false,
-  bg = 'surface.default',
+  bg = "surface.default",
 }: LargeTitleHeaderProps) {
   const { theme } = useUnistyles();
 
   const bgColor =
     resolveThemeColor(bg, theme) ??
-    (theme.color as unknown as Record<string, string | undefined>)[
-      'surface.default'
-    ] ??
-    '';
+    (theme.color as unknown as Record<string, string | undefined>)["surface.default"] ??
+    "";
 
-  const isTransparent = bgColor === 'transparent';
+  const isTransparent = bgColor === "transparent";
   const gradientColor = isTransparent ? theme.color.background : bgColor;
   const { scrollY } = useScreen();
   const isLargeTitleHiddenValue = useSharedValue(isLargeTitleHidden);
@@ -166,7 +142,7 @@ export function LargeTitleHeader({
       return { opacity: 0 };
     }
     return {
-      opacity: interpolate(scrollY.value, [0, height], [0, 1], 'clamp'),
+      opacity: interpolate(scrollY.value, [0, height], [0, 1], "clamp"),
     };
   });
 
@@ -184,15 +160,10 @@ export function LargeTitleHeader({
     }
 
     return {
-      opacity: interpolate(scrollY.value, [0, height], [0, 1], 'clamp'),
+      opacity: interpolate(scrollY.value, [0, height], [0, 1], "clamp"),
       transform: [
         {
-          translateY: interpolate(
-            scrollY.value,
-            [0, height],
-            [COMPACT_TITLE_SLIDE_OFFSET, 0],
-            'clamp'
-          ),
+          translateY: interpolate(scrollY.value, [0, height], [COMPACT_TITLE_SLIDE_OFFSET, 0], "clamp"),
         },
       ],
     };
@@ -203,13 +174,9 @@ export function LargeTitleHeader({
   }, [isLargeTitleHidden, isLargeTitleHiddenValue]);
 
   const leading =
-    dismissAction === 'back' ? (
+    dismissAction === "back" ? (
       <>
-        <HeaderDismissButton
-          dismissAction={dismissAction}
-          navigation={navigation}
-          onDismiss={onDismiss}
-        />
+        <HeaderDismissButton dismissAction={dismissAction} navigation={navigation} onDismiss={onDismiss} />
         {LeftToolbar}
       </>
     ) : (
@@ -217,14 +184,10 @@ export function LargeTitleHeader({
     );
 
   const trailing =
-    dismissAction === 'close' ? (
+    dismissAction === "close" ? (
       <>
         {RightToolbar}
-        <HeaderDismissButton
-          dismissAction={dismissAction}
-          navigation={navigation}
-          onDismiss={onDismiss}
-        />
+        <HeaderDismissButton dismissAction={dismissAction} navigation={navigation} onDismiss={onDismiss} />
       </>
     ) : (
       RightToolbar
@@ -242,33 +205,21 @@ export function LargeTitleHeader({
           />
         </Portal>
       )}
-      <Animated.View
-        style={[styles.safeArea(gradientColor), gradientOpacityStyle]}
-      />
+      <Animated.View style={[styles.safeArea(gradientColor), gradientOpacityStyle]} />
       <View style={styles.bar}>
-        <Animated.View
-          style={[styles.gradient, gradientOpacityStyle]}
-          pointerEvents="none"
-        >
+        <Animated.View style={[styles.gradient, gradientOpacityStyle]} pointerEvents="none">
           <HeaderGradientOverlay color={gradientColor} />
         </Animated.View>
         {leading != null && <Toolbar>{leading}</Toolbar>}
-        <Animated.View
-          style={[styles.titleContainer, compactTitleAnimatedStyle]}
-          pointerEvents="none"
-        >
+        <Animated.View style={[styles.titleContainer, compactTitleAnimatedStyle]} pointerEvents="none">
           <AnimatedText
             style={styles.compactTitle}
-            maxFontSizeMultiplier={
-              theme.typography.variants['title-md'].maxFontSizeMultiplier
-            }
+            maxFontSizeMultiplier={theme.typography.variants["title-md"].maxFontSizeMultiplier}
           >
             {title}
           </AnimatedText>
         </Animated.View>
-        {trailing != null && (
-          <Toolbar style={styles.trailing}>{trailing}</Toolbar>
-        )}
+        {trailing != null && <Toolbar style={styles.trailing}>{trailing}</Toolbar>}
       </View>
     </View>
   );
@@ -276,7 +227,7 @@ export function LargeTitleHeader({
 
 const styles = StyleSheet.create((theme, runtime) => ({
   container: {
-    position: 'absolute',
+    position: "absolute",
     top: 0,
     left: 0,
     right: 0,
@@ -287,7 +238,7 @@ const styles = StyleSheet.create((theme, runtime) => ({
     backgroundColor: bgColor,
   }),
   gradient: {
-    position: 'absolute',
+    position: "absolute",
     top: 0,
     left: 0,
     right: 0,
@@ -295,85 +246,70 @@ const styles = StyleSheet.create((theme, runtime) => ({
   },
   bar: {
     height: theme.layout.header.height,
-    flexDirection: 'row',
-    alignItems: 'center',
+    flexDirection: "row",
+    alignItems: "center",
     paddingHorizontal: theme.layout.screen.margin.x,
-    gap: theme.spacing['3'],
-    justifyContent: 'space-between',
+    gap: theme.spacing["3"],
+    justifyContent: "space-between",
   },
   trailing: {
-    justifyContent: 'flex-end',
+    justifyContent: "flex-end",
   },
   portalContent: {
     gap: 2,
     minHeight: theme.layout.header.height,
     // paddingTop: theme.spacing['1'],
-    paddingBottom: theme.spacing['3'],
+    paddingBottom: theme.spacing["3"],
     paddingHorizontal: theme.layout.screen.margin.x,
   },
   overline: {
-    fontSize: theme.typography.variants['label-sm'].fontSize,
-    lineHeight: theme.typography.variants['label-sm'].lineHeight,
-    letterSpacing: theme.typography.variants['label-sm'].letterSpacing,
-    fontWeight:
-      FONT_WEIGHT_VALUE[theme.typography.variants['label-sm'].fontWeight],
-    color:
-      (theme.color as unknown as Record<string, string | undefined>)[
-        'text.subtle'
-      ] ?? '',
+    fontSize: theme.typography.variants["label-sm"].fontSize,
+    lineHeight: theme.typography.variants["label-sm"].lineHeight,
+    letterSpacing: theme.typography.variants["label-sm"].letterSpacing,
+    fontWeight: FONT_WEIGHT_VALUE[theme.typography.variants["label-sm"].fontWeight],
+    color: (theme.color as unknown as Record<string, string | undefined>)["text.subtle"] ?? "",
     variants: {
       titleAlignment: {
-        center: { textAlign: 'center' },
-        left: { textAlign: 'left' },
+        center: { textAlign: "center" },
+        left: { textAlign: "left" },
       },
     },
   },
   largeTitle: {
-    fontSize: theme.typography.variants['headline-lg'].fontSize,
-    lineHeight: theme.typography.variants['headline-lg'].lineHeight,
-    letterSpacing: theme.typography.variants['headline-lg'].letterSpacing,
-    fontWeight:
-      FONT_WEIGHT_VALUE[theme.typography.variants['headline-lg'].fontWeight],
-    color:
-      (theme.color as unknown as Record<string, string | undefined>)[
-        'text.default'
-      ] ?? '',
+    fontSize: theme.typography.variants["headline-lg"].fontSize,
+    lineHeight: theme.typography.variants["headline-lg"].lineHeight,
+    letterSpacing: theme.typography.variants["headline-lg"].letterSpacing,
+    fontWeight: FONT_WEIGHT_VALUE[theme.typography.variants["headline-lg"].fontWeight],
+    color: (theme.color as unknown as Record<string, string | undefined>)["text.default"] ?? "",
     variants: {
       titleAlignment: {
-        center: { textAlign: 'center' },
-        left: { textAlign: 'left' },
+        center: { textAlign: "center" },
+        left: { textAlign: "left" },
       },
     },
   },
   subtitle: {
-    fontSize: theme.typography.variants['body-lg'].fontSize,
-    lineHeight: theme.typography.variants['body-lg'].lineHeight,
-    letterSpacing: theme.typography.variants['body-lg'].letterSpacing,
-    color:
-      (theme.color as unknown as Record<string, string | undefined>)[
-        'text.subtle'
-      ] ?? '',
+    fontSize: theme.typography.variants["body-lg"].fontSize,
+    lineHeight: theme.typography.variants["body-lg"].lineHeight,
+    letterSpacing: theme.typography.variants["body-lg"].letterSpacing,
+    color: (theme.color as unknown as Record<string, string | undefined>)["text.subtle"] ?? "",
     variants: {
       titleAlignment: {
-        center: { textAlign: 'center' },
-        left: { textAlign: 'left' },
+        center: { textAlign: "center" },
+        left: { textAlign: "left" },
       },
     },
   },
   compactTitle: {
-    fontSize: theme.typography.variants['title-md'].fontSize,
-    lineHeight: theme.typography.variants['title-md'].lineHeight,
-    letterSpacing: theme.typography.variants['title-md'].letterSpacing,
-    fontWeight:
-      FONT_WEIGHT_VALUE[theme.typography.variants['title-md'].fontWeight],
-    color:
-      (theme.color as unknown as Record<string, string | undefined>)[
-        'text.default'
-      ] ?? '',
+    fontSize: theme.typography.variants["title-md"].fontSize,
+    lineHeight: theme.typography.variants["title-md"].lineHeight,
+    letterSpacing: theme.typography.variants["title-md"].letterSpacing,
+    fontWeight: FONT_WEIGHT_VALUE[theme.typography.variants["title-md"].fontWeight],
+    color: (theme.color as unknown as Record<string, string | undefined>)["text.default"] ?? "",
     variants: {
       titleAlignment: {
-        center: { textAlign: 'center' },
-        left: { textAlign: 'left' },
+        center: { textAlign: "center" },
+        left: { textAlign: "left" },
       },
     },
   },
@@ -382,14 +318,14 @@ const styles = StyleSheet.create((theme, runtime) => ({
     variants: {
       titleAlignment: {
         center: {
-          position: 'absolute',
+          position: "absolute",
           left: 0,
           right: 0,
-          alignItems: 'center',
+          alignItems: "center",
         },
         left: {
           flex: 1,
-          alignItems: 'flex-start',
+          alignItems: "flex-start",
         },
       },
     },

package/src/components/header/variants/TitleHeader/index.tsx

@@ -1,18 +1,14 @@
-import type { ReactNode } from 'react';
-import { Text, View } from 'react-native';
+import type { ReactNode } from "react";
+import { Text, View } from "react-native";
 
-import { StyleSheet, useUnistyles } from 'react-native-unistyles';
+import { StyleSheet, useUnistyles } from "react-native-unistyles";
 
-import type { ColorToken } from '#theme/types';
-import { resolveThemeColor } from '#utils/resolve-theme-color';
-import { FONT_WEIGHT_VALUE } from '#utils/typography';
-
-import { Toolbar } from '../../../toolbar';
-import {
-  HeaderDismissButton,
-  type HeaderDismissProps,
-} from '../../header-buttons';
-import { HeaderGradientOverlay } from '../../parts/HeaderGradientOverlay';
+import type { ColorToken } from "#theme/types";
+import { resolveThemeColor } from "#utils/resolve-theme-color";
+import { FONT_WEIGHT_VALUE } from "#utils/typography";
+import { Toolbar } from "../../../toolbar";
+import { HeaderDismissButton, type HeaderDismissProps } from "../../header-buttons";
+import { HeaderGradientOverlay } from "../../parts/HeaderGradientOverlay";
 
 export interface TitleHeaderProps extends HeaderDismissProps {
   title?: string;
@@ -27,7 +23,7 @@ export interface TitleHeaderProps extends HeaderDismissProps {
    */
   RightToolbar?: ReactNode;
   /** Title placement within the bar. Defaults to `'center'`. */
-  titleAlignment?: 'center' | 'left';
+  titleAlignment?: "center" | "left";
   /** Background color token. Defaults to `surface.default`. */
   bg?: ColorToken;
 }
@@ -53,34 +49,26 @@ export function TitleHeader({
   title,
   LeftToolbar,
   RightToolbar,
-  dismissAction = 'none',
+  dismissAction = "none",
   navigation,
   onDismiss,
-  titleAlignment = 'center',
-  bg = 'surface.default',
+  titleAlignment = "center",
+  bg = "surface.default",
 }: TitleHeaderProps) {
   const { theme } = useUnistyles();
 
   const bgColor =
     resolveThemeColor(bg, theme) ??
-    (theme.color as unknown as Record<string, string | undefined>)[
-      'surface.default'
-    ] ??
-    '';
-  const isTransparent = bgColor === 'transparent';
-  const gradientColor = isTransparent
-    ? theme.color['surface.default']
-    : bgColor;
+    (theme.color as unknown as Record<string, string | undefined>)["surface.default"] ??
+    "";
+  const isTransparent = bgColor === "transparent";
+  const gradientColor = isTransparent ? theme.color["surface.default"] : bgColor;
   styles.useVariants({ titleAlignment });
 
   const leading =
-    dismissAction === 'back' ? (
+    dismissAction === "back" ? (
       <>
-        <HeaderDismissButton
-          dismissAction={dismissAction}
-          navigation={navigation}
-          onDismiss={onDismiss}
-        />
+        <HeaderDismissButton dismissAction={dismissAction} navigation={navigation} onDismiss={onDismiss} />
         {LeftToolbar}
       </>
     ) : (
@@ -88,14 +76,10 @@ export function TitleHeader({
     );
 
   const trailing =
-    dismissAction === 'close' ? (
+    dismissAction === "close" ? (
       <>
         {RightToolbar}
-        <HeaderDismissButton
-          dismissAction={dismissAction}
-          navigation={navigation}
-          onDismiss={onDismiss}
-        />
+        <HeaderDismissButton dismissAction={dismissAction} navigation={navigation} onDismiss={onDismiss} />
       </>
     ) : (
       RightToolbar
@@ -111,9 +95,7 @@ export function TitleHeader({
         <View style={styles.titleContainer} pointerEvents="none">
           {!!title && <Text style={styles.title}>{title}</Text>}
         </View>
-        {trailing != null && (
-          <Toolbar style={styles.trailing}>{trailing}</Toolbar>
-        )}
+        {trailing != null && <Toolbar style={styles.trailing}>{trailing}</Toolbar>}
       </View>
     </View>
   );
@@ -121,7 +103,7 @@ export function TitleHeader({
 
 const styles = StyleSheet.create((theme, runtime) => ({
   container: {
-    position: 'absolute',
+    position: "absolute",
     top: 0,
     left: 0,
     right: 0,
@@ -129,10 +111,10 @@ const styles = StyleSheet.create((theme, runtime) => ({
   },
   safeArea: (isTransparent, bgColor) => ({
     height: runtime.insets.top,
-    backgroundColor: isTransparent ? 'transparent' : bgColor,
+    backgroundColor: isTransparent ? "transparent" : bgColor,
   }),
   gradient: {
-    position: 'absolute',
+    position: "absolute",
     top: 0,
     left: 0,
     right: 0,
@@ -140,45 +122,41 @@ const styles = StyleSheet.create((theme, runtime) => ({
   },
   bar: {
     height: theme.layout.header.height,
-    flexDirection: 'row',
-    alignItems: 'center',
+    flexDirection: "row",
+    alignItems: "center",
     paddingHorizontal: theme.layout.screen.margin.x,
-    gap: theme.spacing['3'],
-    justifyContent: 'space-between',
+    gap: theme.spacing["3"],
+    justifyContent: "space-between",
   },
   trailing: {
-    justifyContent: 'flex-end',
+    justifyContent: "flex-end",
   },
   titleContainer: {
     variants: {
       titleAlignment: {
         center: {
-          position: 'absolute',
+          position: "absolute",
           left: 0,
           right: 0,
-          alignItems: 'center',
+          alignItems: "center",
         },
         left: {
           flex: 1,
-          alignItems: 'flex-start',
+          alignItems: "flex-start",
         },
       },
     },
   },
   title: {
-    fontSize: theme.typography.variants['title-md'].fontSize,
-    lineHeight: theme.typography.variants['title-md'].lineHeight,
-    letterSpacing: theme.typography.variants['title-md'].letterSpacing,
-    fontWeight:
-      FONT_WEIGHT_VALUE[theme.typography.variants['title-md'].fontWeight],
-    color:
-      (theme.color as unknown as Record<string, string | undefined>)[
-        'text.default'
-      ] ?? '',
+    fontSize: theme.typography.variants["title-md"].fontSize,
+    lineHeight: theme.typography.variants["title-md"].lineHeight,
+    letterSpacing: theme.typography.variants["title-md"].letterSpacing,
+    fontWeight: FONT_WEIGHT_VALUE[theme.typography.variants["title-md"].fontWeight],
+    color: (theme.color as unknown as Record<string, string | undefined>)["text.default"] ?? "",
     variants: {
       titleAlignment: {
-        center: { textAlign: 'center' },
-        left: { textAlign: 'left' },
+        center: { textAlign: "center" },
+        left: { textAlign: "left" },
       },
     },
   },

package/src/components/icon/Icon.tsx

@@ -1,14 +1,14 @@
-import type { ComponentRef } from 'react';
-import { forwardRef } from 'react';
-import { View, type ViewProps } from 'react-native';
+import type { ComponentRef } from "react";
+import { forwardRef } from "react";
+import { View, type ViewProps } from "react-native";
 
-import { StyleSheet, useUnistyles } from 'react-native-unistyles';
+import { StyleSheet, useUnistyles } from "react-native-unistyles";
 
-import { getIcon } from '#theme/registry';
-import type { ColorToken, TerraIconName } from '#theme/types';
-import { resolveThemeColor } from '#utils/resolve-theme-color';
+import { getIcon } from "#theme/registry";
+import type { ColorToken, TerraIconName } from "#theme/types";
+import { resolveThemeColor } from "#utils/resolve-theme-color";
 
-export interface IconProps extends Omit<ViewProps, 'children'> {
+export interface IconProps extends Omit<ViewProps, "children"> {
   /** Semantic or configured icon name from the theme registry. */
   name: TerraIconName;
   /** Icon size in density-independent pixels. Defaults to `20`. */
@@ -27,39 +27,31 @@ export interface IconProps extends Omit<ViewProps, 'children'> {
  * <Icon name="navigation.close" size={24} color="text.default" />
  * ```
  */
-export const Icon = forwardRef<ComponentRef<typeof View>, IconProps>(
-  function Icon(
-    { name, size = 20, color = 'text.default', strokeWidth, style, ...rest },
-    ref
-  ) {
-    const { theme } = useUnistyles();
-    const IconComponent = getIcon(name);
+export const Icon = forwardRef<ComponentRef<typeof View>, IconProps>(function Icon(
+  { name, size = 20, color = "text.default", strokeWidth, style, ...rest },
+  ref
+) {
+  const { theme } = useUnistyles();
+  const IconComponent = getIcon(name);
 
-    if (!IconComponent) {
-      if (__DEV__) {
-        console.warn(`[react-native-terra-ui] Unknown icon "${name}".`);
-      }
-      return null;
+  if (!IconComponent) {
+    if (__DEV__) {
+      console.warn(`[react-native-terra-ui] Unknown icon "${name}".`);
     }
+    return null;
+  }
 
-    const resolvedColor =
-      resolveThemeColor(color, theme) ??
-      (theme.color as unknown as Record<string, string | undefined>)[
-        'text.default'
-      ] ??
-      '';
+  const resolvedColor =
+    resolveThemeColor(color, theme) ??
+    (theme.color as unknown as Record<string, string | undefined>)["text.default"] ??
+    "";
 
-    return (
-      <View ref={ref} style={[styles.container(size), style]} {...rest}>
-        <IconComponent
-          color={resolvedColor}
-          size={size}
-          strokeWidth={strokeWidth}
-        />
-      </View>
-    );
-  }
-);
+  return (
+    <View ref={ref} style={[styles.container(size), style]} {...rest}>
+      <IconComponent color={resolvedColor} size={size} strokeWidth={strokeWidth} />
+    </View>
+  );
+});
 
 // ─── Styles ───────────────────────────────────────────────────────────────────
 //
@@ -73,7 +65,7 @@ const styles = StyleSheet.create(() => ({
   container: (size: number) => ({
     width: size,
     height: size,
-    alignItems: 'center',
-    justifyContent: 'center',
+    alignItems: "center",
+    justifyContent: "center",
   }),
 }));

package/src/components/icon/index.ts

@@ -1,2 +1,2 @@
-export type { IconProps } from './Icon';
-export { Icon } from './Icon';
+export type { IconProps } from "./Icon";
+export { Icon } from "./Icon";