jp-composter 0.1.0

package/src/SliceUI/colors/Pallete.ts

@@ -0,0 +1,151 @@
+export const colors = {
+  Primary: {
+    100: '#FFD8D0',
+    200: '#FBB2A3',
+    300: '#F38A77',
+    400: '#E7604E',
+    500: '#D82927',
+    600: '#B12722',
+    700: '#8C241D',
+    800: '#681F18',
+    900: '#471913',
+    1000: '#27110B',
+    a100: 'rgba(216, 41, 39, 0.20)',
+    a200: 'rgba(216, 41, 39, 0.40)',
+    a300: 'rgba(216, 41, 39, 0.80)',
+    a400: 'rgba(216, 41, 39, 0.80)',
+  },
+  red: {
+    100: '#FFD9CE',
+    200: '#FFB3A0',
+    300: '#FF8B73',
+    400: '#F76048',
+    500: '#EB211E',
+    600: '#C1231B',
+    700: '#982218',
+    800: '#711E14',
+    900: '#4C1910',
+    1000: '#2A1209',
+    a100: 'rgba(235, 33, 30, 0.20)',
+    a200: 'rgba(235, 33, 30, 0.40)',
+    a300: 'rgba(235, 33, 30, 0.80)',
+    a400: 'rgba(235, 33, 30, 0.80)',
+  },
+  yellow: {
+    100: '#FFF5D6',
+    200: '#FFECAC',
+    300: '#FFE282',
+    400: '#FFD954',
+    500: '#FAD000',
+    600: '#CCAA12',
+    700: '#A08517',
+    800: '#766218',
+    900: '#4E4215',
+    1000: '#2A230F',
+    a100: 'rgba(250, 208, 0, 0.10)',
+    a200: 'rgba(250, 208, 0, 0.20)',
+    a300: 'rgba(250, 208, 0, 0.40)',
+    a400: 'rgba(250, 208, 0, 0.80)',
+  },
+  orange: {
+    100: '#FFE5D3',
+    200: '#FFCCA8',
+    300: '#FFB27D',
+    400: '#FC9853',
+    500: '#F57E24',
+    600: '#C86821',
+    700: '#9D531E',
+    800: '#743F19',
+    900: '#4E2C14',
+    1000: '#2A1A0D',
+    a100: 'rgba(245, 126, 36, 0.10)',
+    a200: 'rgba(245, 126, 36, 0.20)',
+    a300: 'rgba(245, 126, 36, 0.40)',
+    a400: 'rgba(245, 126, 36, 0.80)',
+  },
+  green: {
+    100: '#D8EFDD',
+    200: '#B1DFBC',
+    300: '#88CF9B',
+    400: '#5BBE7B',
+    500: '#14AD5C',
+    600: '#1B8E4D',
+    700: '#1D703E',
+    800: '#1C5430',
+    900: '#173922',
+    1000: '#111F15',
+    a100: 'rgba(20, 173, 92, 0.10)',
+    a200: 'rgba(20, 173, 92, 0.20)',
+    a300: 'rgba(20, 173, 92, 0.40)',
+    a400: 'rgba(20, 173, 92, 0.80)',
+  },
+  blue: {
+    100: '#DADDFA',
+    200: '#B5BDF4',
+    300: '#8D9DEE',
+    400: '#5F7FE7',
+    500: '#0263E0',
+    600: '#1752B7',
+    700: '#1D428F',
+    800: '#1D326A',
+    900: '#192346',
+    1000: '#121526',
+    a100: 'rgba(2, 99, 224, 0.10)',
+    a200: 'rgba(2, 99, 224, 0.20)',
+    a300: 'rgba(2, 99, 224, 0.40)',
+    a400: 'rgba(2, 99, 224, 0.80)',
+  },
+  neutral: {
+    100: '#F5F5F5',
+    200: '#E6E6E6',
+    300: '#D9D9D9',
+    400: '#B3B3B3',
+    500: '#757575',
+    600: '#444444',
+    700: '#383838',
+    800: '#2C2C2C',
+    900: '#1E1E1E',
+    1000: '#111111',
+    a50: 'rgba(17, 17, 17, 0.5)',
+    a100: 'rgba(17, 17, 17, 0.10)',
+    a200: 'rgba(17, 17, 17, 0.20)',
+    a300: 'rgba(17, 17, 17, 0.40)',
+    a400: 'rgba(17, 17, 17, 0.80)',
+  },
+  slate: {
+    100: '#FAFCFE',
+    200: '#F7FAFD',
+    300: '#EAEDF0',
+    400: '#D2D4D6',
+    500: '#949494',
+    600: '#767676',
+    700: '#5A5A5A',
+    800: '#434343',
+    900: '#303030',
+    1000: '#242424',
+  },
+  white: {
+    1000: '#FFFFFF',
+    a100: 'rgba(255, 255, 255, 0.05)',
+    a200: 'rgba(255, 255, 255, 0.10)',
+    a300: 'rgba(255, 255, 255, 0.20)',
+    a400: 'rgba(255, 255, 255, 0.40)',
+    a500: 'rgba(255, 255, 255, 0.70)',
+    a600: 'rgba(255, 255, 255, 0.80)',
+    a700: 'rgba(255, 255, 255, 0.85)',
+    a800: 'rgba(255, 255, 255, 0.90)',
+    a900: 'rgba(255, 255, 255, 0.95)',
+  },
+  black: {
+    1000: '#000000',
+    a100: 'rgba(0, 0, 0, 0.05)',
+    a200: 'rgba(0, 0, 0, 0.10)',
+    a300: 'rgba(0, 0, 0, 0.20)',
+    a400: 'rgba(0, 0, 0, 0.40)',
+    a500: 'rgba(0, 0, 0, 0.70)',
+    a600: 'rgba(0, 0, 0, 0.80)',
+    a700: 'rgba(0, 0, 0, 0.85)',
+    a800: 'rgba(0, 0, 0, 0.90)',
+    a900: 'rgba(0, 0, 0, 0.95)',
+  },
+};

package/src/SliceUI/colors/Token.ts

@@ -0,0 +1,110 @@
+import {colors as pallete} from './Pallete';
+import type {ColorTokens} from './Type';
+
+export const LightColorTokens = (
+  colors: typeof pallete = pallete,
+  accentColor: string = colors.Primary[500],
+  positiveColor: string = colors.green[500],
+  negativeColor: string = colors.red[500],
+  linkColor: string = colors.blue[500],
+  contrastWhite: string = colors.white[1000],
+): ColorTokens => {
+  return {
+    colorBackgroundAccent: accentColor,
+    colorBackgroundAccentAlpha: colors.Primary.a100,
+    colorBackgroundPositive: positiveColor,
+    colorBackgroundNegative: negativeColor,
+    colorBackgroundLink: linkColor,
+    colorBackgroundPrimary: colors.white[1000],
+    colorBackgroundSecondary: colors.slate[400],
+    colorBackgroundTertiary: colors.slate[300],
+    colorBackgroundLight: colors.slate[200],
+    colorBackgroundLighter: colors.slate[100],
+    colorBackgroundElevated: colors.white[1000],
+    colorBackgroundModal: colors.white[1000],
+    colorBorderAccent: accentColor,
+    colorBorderPositive: positiveColor,
+    colorBorderNegative: negativeColor,
+    colorBorderLink: linkColor,
+    colorBorderStrong: colors.neutral[1000],
+    colorBorderMedium: colors.neutral[400],
+    colorBorderSubtle: colors.neutral[300],
+    colorBorderLight: colors.neutral[200],
+    colorBorderLighter: colors.neutral[100],
+    colorBorderAlpha: colors.neutral.a100,
+    colorForegroundAccent: accentColor,
+    colorForegroundPositive: positiveColor,
+    colorForegroundNegative: negativeColor,
+    colorForegroundLink: linkColor,
+    colorForegroundPrimary: colors.neutral[1000],
+    colorForegroundSecondary: colors.neutral[800],
+    colorForegroundTertiary: colors.neutral[600],
+    colorForegroundLight: colors.neutral[500],
+    colorForegroundLighter: colors.neutral[400],
+    colorForegroundInvariable: contrastWhite,
+    colorStatePrimaryDisabled: colors.neutral.a200,
+    colorStatePrimaryDisabled2: colors.neutral.a50,
+    colorStatePrimaryHover: colors.neutral.a100,
+    colorStatePrimaryPressed: colors.neutral.a300,
+    colorStateAccentDisabled: colors.Primary.a300,
+    colorStateAccentHover1: colors.Primary.a400,
+    colorStateAccentHover2: colors.Primary.a100,
+    colorStateAccentPressed1: colors.Primary[600],
+    colorStateAccentPressed2: colors.Primary.a100,
+    colorStateContrastWhiteDisabled: colors.white.a500,
+  };
+};
+
+export const DarkColorTokens = (
+  colors: typeof pallete = pallete,
+  accentColor: string = colors.Primary[500],
+  positiveColor: string = colors.green[500],
+  negativeColor: string = colors.red[500],
+  linkColor: string = colors.blue[500],
+  contrastWhite: string = colors.white[1000],
+): ColorTokens => {
+  return {
+    colorBackgroundAccent: accentColor,
+    colorBackgroundAccentAlpha: colors.Primary.a100,
+    colorBackgroundPositive: positiveColor,
+    colorBackgroundNegative: negativeColor,
+    colorBackgroundLink: linkColor,
+    colorBackgroundPrimary: colors.neutral[1000],
+    colorBackgroundSecondary: colors.slate[800],
+    colorBackgroundTertiary: colors.slate[700],
+    colorBackgroundLight: colors.slate[600],
+    colorBackgroundLighter: colors.slate[500],
+    colorBackgroundElevated: colors.neutral[900],
+    colorBackgroundModal: colors.neutral[800],
+    colorBorderAccent: accentColor,
+    colorBorderPositive: positiveColor,
+    colorBorderNegative: negativeColor,
+    colorBorderLink: linkColor,
+    colorBorderStrong: colors.white[1000],
+    colorBorderMedium: colors.neutral[500],
+    colorBorderSubtle: colors.neutral[600],
+    colorBorderLight: colors.neutral[700],
+    colorBorderLighter: colors.neutral[800],
+    colorBorderAlpha: colors.white.a100,
+    colorForegroundAccent: accentColor,
+    colorForegroundPositive: positiveColor,
+    colorForegroundNegative: negativeColor,
+    colorForegroundLink: linkColor,
+    colorForegroundPrimary: colors.white[1000],
+    colorForegroundSecondary: colors.neutral[100],
+    colorForegroundTertiary: colors.neutral[200],
+    colorForegroundLight: colors.neutral[300],
+    colorForegroundLighter: colors.neutral[400],
+    colorForegroundInvariable: contrastWhite,
+    colorStatePrimaryDisabled: colors.white.a300,
+    colorStatePrimaryDisabled2: colors.white.a100,
+    colorStatePrimaryHover: colors.white.a200,
+    colorStatePrimaryPressed: colors.white.a400,
+    colorStateAccentDisabled: colors.Primary.a300,
+    colorStateAccentHover1: colors.Primary.a400,
+    colorStateAccentHover2: colors.Primary.a100,
+    colorStateAccentPressed1: colors.Primary[600],
+    colorStateAccentPressed2: colors.Primary.a100,
+    colorStateContrastWhiteDisabled: colors.white.a500,
+  };
+};

package/src/SliceUI/colors/Type.ts

@@ -0,0 +1,56 @@
+export interface ColorTokens {
+  colorBackgroundAccent: string;
+  colorBackgroundAccentAlpha: string;
+  colorBackgroundPositive: string;
+  colorBackgroundNegative: string;
+  colorBackgroundLink: string;
+  colorBackgroundPrimary: string;
+  colorBackgroundSecondary: string;
+  colorBackgroundTertiary: string;
+  colorBackgroundLight: string;
+  colorBackgroundLighter: string;
+  colorBackgroundElevated: string;
+  colorBackgroundModal: string;
+
+  colorBorderAccent: string;
+  colorBorderPositive: string;
+  colorBorderNegative: string;
+  colorBorderLink: string;
+  colorBorderStrong: string;
+  colorBorderMedium: string;
+  colorBorderSubtle: string;
+  colorBorderLight: string;
+  colorBorderLighter: string;
+  colorBorderAlpha: string;
+
+  colorForegroundAccent: string;
+  colorForegroundPositive: string;
+  colorForegroundNegative: string;
+  colorForegroundLink: string;
+  colorForegroundPrimary: string;
+  colorForegroundSecondary: string;
+  colorForegroundTertiary: string;
+  colorForegroundLight: string;
+  colorForegroundLighter: string;
+  colorForegroundInvariable: string;
+
+  colorStatePrimaryDisabled: string;
+  colorStatePrimaryHover: string;
+  colorStatePrimaryPressed: string;
+
+  colorStateAccentDisabled: string;
+  colorStatePrimaryDisabled2: string;
+  colorStateAccentHover1: string;
+  colorStateAccentHover2: string;
+  colorStateAccentPressed1: string;
+  colorStateAccentPressed2: string;
+  colorStateContrastWhiteDisabled: string;
+}
+
+/**
+ * Theme type used by helper functions.
+ * Only requires colors to be compatible with both SliceTheme and react-navigation themes.
+ */
+export interface ExtendedTheme {
+  colors: ColorTokens;
+}

package/src/SliceUI/contextProvider/context.tsx

@@ -0,0 +1,108 @@
+import React, {
+  createContext,
+  useContext,
+  useEffect,
+  useState,
+  type ReactNode,
+} from 'react';
+import {Dimensions} from 'react-native';
+import {getDeviceBreakpoint, type Breakpoints} from '../responsive/helper';
+import type {InputThemeSize} from '../input/Type';
+import type {ColorTokens} from '../colors/Type';
+import {dimensions} from '../values/Dimension';
+import type {TypographyVariants} from '../typography/Type';
+import type {
+  ButtonSizeType,
+  ButtonTextSizeType,
+  ButtonIconSizeType,
+} from '../button/Type';
+import type {
+  ChipSizeType,
+  ChipTextSizeType,
+  ChipIconSizeType,
+} from '../chip/Type';
+import type {
+  BadgeSizeType,
+  BadgeTextSizeType,
+  BadgeIconSizeType,
+} from '../badge/Type';
+import type {IconSize} from '../icon/Type';
+import {spacing} from '../values/Spacing';
+
+// Extend context type to include breakpoint
+interface ThemeContextType {
+  theme: SliceTheme;
+  deviceBreakpoint: keyof typeof Breakpoints;
+}
+
+// Create context
+const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
+
+// Props for provider
+interface SliceThemeProviderProps {
+  children: ReactNode;
+  theme: SliceTheme;
+}
+
+// Provider with breakpoint logic inside
+export const SliceThemeProvider: React.FC<SliceThemeProviderProps> = ({
+  children,
+  theme,
+}) => {
+  const [deviceBreakpoint, setDeviceBreakpoint] = useState<
+    keyof typeof Breakpoints
+  >(getDeviceBreakpoint());
+
+  useEffect(() => {
+    const handleResize = () => {
+      setDeviceBreakpoint(getDeviceBreakpoint());
+    };
+
+    const subscription = Dimensions.addEventListener('change', handleResize);
+
+    return () => {
+      if (subscription?.remove) subscription.remove();
+    };
+  }, []);
+
+  return (
+    <ThemeContext.Provider value={{theme, deviceBreakpoint}}>
+      {children}
+    </ThemeContext.Provider>
+  );
+};
+
+// Hook to access theme and breakpoint
+export const useSliceTheme = (): ThemeContextType => {
+  const context = useContext(ThemeContext);
+  if (!context) {
+    throw new Error('useSliceTheme must be used within a SliceThemeProvider');
+  }
+  return context;
+};
+
+export interface SliceTheme {
+  isDebugBuildType?: boolean;
+  automationBaseid?: string;
+  typographyStyles?: TypographyVariants;
+  colors: ColorTokens;
+  dimensions: typeof dimensions;
+  inputStyles: InputThemeSize;
+  buttonStyles: ButtonSizeType;
+  buttonTextStyles: ButtonTextSizeType;
+  buttonIconStyles: ButtonIconSizeType;
+  chipStyles: ChipSizeType;
+  chipTextStyles: ChipTextSizeType;
+  chipIconStyles: ChipIconSizeType;
+  badgeStyles: BadgeSizeType;
+  badgeTextStyles: BadgeTextSizeType;
+  badgeIconStyles: BadgeIconSizeType;
+  avatarStyles: any;
+  avatarTextStyles: any;
+  avatarImageStyles: any;
+  avatarButtonRadius: any;
+  tabItemStyles: any;
+  tabItemTextStyles: any;
+  iconSizes: IconSize;
+  spacing: typeof spacing;
+}

package/src/SliceUI/divider/Divider.tsx

@@ -0,0 +1,109 @@
+import React, {useMemo} from 'react';
+import {View, StyleSheet, type ViewStyle} from 'react-native';
+import {useSliceTheme} from '../contextProvider/context';
+import {setTestId} from '../automation/helper';
+import type {DividerProps, DividerThicknessVariant} from './Type';
+import {DIVIDER_DEFAULT_TOKENS, DIVIDER_THICKNESS_VALUES} from './Token';
+import type {ColorTokens} from '../colors/Type';
+
+export const Divider = React.memo(
+  ({
+    screenName = 'default',
+    id = 'default',
+    orientation = DIVIDER_DEFAULT_TOKENS.orientation,
+    thickness = DIVIDER_DEFAULT_TOKENS.thickness,
+    color = DIVIDER_DEFAULT_TOKENS.color,
+    variant = DIVIDER_DEFAULT_TOKENS.variant,
+    marginVertical = 0,
+    marginHorizontal = 0,
+    borderRadius = 0,
+    showDivider = true,
+    style,
+    testID,
+  }: DividerProps) => {
+    const {theme} = useSliceTheme();
+    const {isDebugBuildType, automationBaseid} = theme;
+
+    const dividerStyle = useMemo(() => {
+      if (!showDivider) {
+        return {width: 0, height: 0, opacity: 0};
+      }
+
+      const isHorizontal = orientation === 'horizontal';
+      const colorKey = color as keyof ColorTokens;
+      const resolvedColor =
+        (theme?.colors && theme.colors[colorKey]) ||
+        (typeof color === 'string' ? color : undefined) ||
+        theme?.colors?.colorBorderSubtle ||
+        '#E0E0E0';
+
+      const thicknessVariant = thickness as DividerThicknessVariant;
+      const resolvedThickness =
+        typeof thickness === 'number'
+          ? thickness
+          : DIVIDER_THICKNESS_VALUES[thicknessVariant] ||
+            DIVIDER_THICKNESS_VALUES[DIVIDER_DEFAULT_TOKENS.thickness];
+
+      const baseStyle: ViewStyle = {
+        marginVertical,
+        marginHorizontal,
+        borderRadius,
+      };
+
+      if (variant === 'spacer') {
+        baseStyle.backgroundColor = 'transparent';
+        if (isHorizontal) {
+          baseStyle.height = resolvedThickness;
+        } else {
+          baseStyle.width = resolvedThickness;
+        }
+      } else if (variant === 'solid') {
+        baseStyle.backgroundColor = resolvedColor;
+        if (isHorizontal) {
+          baseStyle.height = resolvedThickness;
+          baseStyle.width = '100%';
+        } else {
+          baseStyle.width = resolvedThickness;
+          baseStyle.height = '100%';
+        }
+      } else if (variant === 'dashed' || variant === 'dotted') {
+        baseStyle.borderColor = resolvedColor;
+        baseStyle.borderStyle = variant;
+        if (isHorizontal) {
+          baseStyle.height = 0;
+          baseStyle.width = '100%';
+          baseStyle.borderBottomWidth = resolvedThickness;
+        } else {
+          baseStyle.width = 0;
+          baseStyle.height = '100%';
+          baseStyle.borderRightWidth = resolvedThickness;
+        }
+      }
+
+      return StyleSheet.flatten([baseStyle, style]);
+    }, [
+      showDivider,
+      orientation,
+      thickness,
+      color,
+      variant,
+      marginVertical,
+      marginHorizontal,
+      borderRadius,
+      theme,
+      style,
+    ]);
+
+    return (
+      <View
+        style={dividerStyle}
+        {...(testID ? {testID} : {})}
+        {...(isDebugBuildType && automationBaseid
+          ? setTestId(automationBaseid, screenName, id)
+          : {})}
+      />
+    );
+  },
+);
+
+Divider.displayName = 'Divider';

package/src/SliceUI/divider/Token.ts

@@ -0,0 +1,18 @@
+import type { ColorTokens } from '../colors/Type';
+import type { DividerThicknessVariant } from './Type';
+
+export const DIVIDER_THICKNESS_VALUES: Record<DividerThicknessVariant, number> =
+  {
+    xs: 1,
+    sm: 2,
+    md: 4,
+    lg: 8,
+    xl: 12,
+  };
+
+export const DIVIDER_DEFAULT_TOKENS = {
+  thickness: 'md' as DividerThicknessVariant,
+  color: 'colorBorderSubtle' as keyof ColorTokens,
+  orientation: 'horizontal' as const,
+  variant: 'solid' as const,
+};

package/src/SliceUI/divider/Type.ts

@@ -0,0 +1,26 @@
+import type { ViewStyle } from 'react-native';
+import type { ColorTokens } from '../colors/Type';
+
+export type DividerThicknessVariant =
+  | 'xs'
+  | 'sm'
+  | 'md'
+  | 'lg'
+  | 'xl';
+export type DividerOrientation = 'horizontal' | 'vertical';
+export type DividerVariant = 'solid' | 'dashed' | 'dotted' | 'spacer';
+
+export interface DividerProps {
+  screenName?: string;
+  id?: string | number;
+  orientation?: DividerOrientation;
+  thickness?: DividerThicknessVariant | number;
+  color?: keyof ColorTokens | string;
+  variant?: DividerVariant;
+  marginVertical?: number;
+  marginHorizontal?: number;
+  borderRadius?: number;
+  showDivider?: boolean;
+  style?: ViewStyle;
+  testID?: string;
+}

package/src/SliceUI/icon/CustomIcon.ts

@@ -0,0 +1,4 @@
+import { createIconSetFromIcoMoon } from 'react-native-vector-icons';
+import icoMoonConfig from './selection.json';
+
+export default createIconSetFromIcoMoon(icoMoonConfig);

package/src/SliceUI/icon/IcoMoonIcon.tsx

@@ -0,0 +1,11 @@
+// @ts-ignore
+import {createIconSetFromIcoMoon} from 'react-native-vector-icons';
+import icoMoonConfig from '../assets/resources/fonts/selection.json';
+
+const IcoMoonIcon = createIconSetFromIcoMoon(
+  icoMoonConfig,
+  'icomoon',
+  'icomoon.ttf',
+);
+
+export default IcoMoonIcon;

package/src/SliceUI/icon/Icon.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+
+import { resolveVariant, scaleFont } from '../responsive/helper';
+import { ICON_SIZES } from './Token';
+import type { VariantBreakPoints } from '../responsive/Type';
+import { useSliceTheme } from '../contextProvider/context';
+
+interface IconProps {
+  component: React.ReactNode; // Flexible - accepts elements, strings, numbers, etc.
+  variant: keyof typeof ICON_SIZES | VariantBreakPoints;
+  color?: string;
+}
+
+const Icon: React.FC<IconProps> = ({ component, variant, color }) => {
+  const { theme, deviceBreakpoint } = useSliceTheme();
+  const { iconSizes } = theme;
+  const breakPointVariant = resolveVariant(
+    variant,
+    deviceBreakpoint
+  ) as keyof typeof iconSizes;
+  
+  // If it's a valid React element, apply styles
+  if (React.isValidElement(component)) {
+    const applyIconStyle = (icon: React.ReactElement): React.ReactElement =>
+      React.cloneElement(icon, {
+        ...iconSizes[breakPointVariant],
+        size: scaleFont(iconSizes[breakPointVariant].size),
+        color: color,
+      });
+    
+    return applyIconStyle(component);
+  }
+  
+  // Otherwise, just render it as-is
+  return <>{component}</>;
+};
+
+export default React.memo(Icon);

package/src/SliceUI/icon/Token.ts

@@ -0,0 +1,14 @@
+import { iconSize } from '../values/IconSizes';
+import type { IconSize } from './Type';
+
+export const ICON_SIZES: IconSize = {
+  xxxSmall: { size: iconSize.iconSize01 },
+  xxSmall: { size: iconSize.iconSize02 },
+  xSmall: { size: iconSize.iconSize03 },
+  small: { size: iconSize.iconSize03 },
+  medium: { size: iconSize.iconSize03 },
+  large: { size: iconSize.iconSize04 },
+  xLarge: { size: iconSize.iconSize05 },
+  xxLarge: { size: iconSize.iconSize06 },
+  xxxLarge: { size: iconSize.iconSize09 },
+};

package/src/SliceUI/icon/Type.ts

@@ -0,0 +1,13 @@
+// Removed redundant empty lines
+export type IconSizeKey =
+  | 'xxxSmall'
+  | 'xxSmall'
+  | 'xSmall'
+  | 'small'
+  | 'medium'
+  | 'large'
+  | 'xLarge'
+  | 'xxLarge'
+  | 'xxxLarge';
+
+export type IconSize = Record<IconSizeKey, any>;