jp-composter 0.1.0

package/src/SliceUI/typography/Token.ts

@@ -0,0 +1,228 @@
+import type { FontWeight, TypographyVariants } from './Type';
+import { foundationTypography } from './FoundationToken';
+import { baseTypographyToken } from './BaseTypographyToken';
+
+export const TYPOGRAPHY_STYLES: TypographyVariants = {
+  display1Black: {
+    fontFamily: foundationTypography.fontFamily.latoBlack,
+    fontSize: baseTypographyToken.display.display1.fontSize,
+    fontWeight: foundationTypography.fontWeight.fontWeightBlack as FontWeight,
+    lineHeight: baseTypographyToken.display.display1.lineHeight,
+  },
+  display1Heavy: {
+    fontFamily: foundationTypography.fontFamily.latoHeavy,
+    fontSize: baseTypographyToken.display.display1.fontSize,
+    fontWeight: foundationTypography.fontWeight.fontWeightHeavy as FontWeight,
+    lineHeight: baseTypographyToken.display.display1.lineHeight,
+  },
+  display1Bold: {
+    fontFamily: foundationTypography.fontFamily.latoBold,
+    fontSize: baseTypographyToken.display.display1.fontSize,
+    fontWeight: foundationTypography.fontWeight.fontWeightBold as FontWeight,
+    lineHeight: baseTypographyToken.display.display1.lineHeight,
+  },
+  display2Black: {
+    fontFamily: foundationTypography.fontFamily.latoBlack,
+    fontSize: baseTypographyToken.display.display2.fontSize,
+    fontWeight: foundationTypography.fontWeight.fontWeightBlack as FontWeight,
+    lineHeight: baseTypographyToken.display.display2.lineHeight,
+  },
+  display2Heavy: {
+    fontFamily: foundationTypography.fontFamily.latoHeavy,
+    fontSize: baseTypographyToken.display.display2.fontSize,
+    fontWeight: foundationTypography.fontWeight.fontWeightHeavy as FontWeight,
+    lineHeight: baseTypographyToken.display.display2.lineHeight,
+  },
+  display2Bold: {
+    fontFamily: foundationTypography.fontFamily.latoBold,
+    fontSize: baseTypographyToken.display.display2.fontSize,
+    fontWeight: foundationTypography.fontWeight.fontWeightBold as FontWeight,
+    lineHeight: baseTypographyToken.display.display2.lineHeight,
+  },
+  display3Black: {
+    fontFamily: foundationTypography.fontFamily.latoBlack,
+    fontSize: baseTypographyToken.display.display3.fontSize,
+    fontWeight: foundationTypography.fontWeight.fontWeightBlack as FontWeight,
+    lineHeight: baseTypographyToken.display.display3.lineHeight,
+  },
+  display3Heavy: {
+    fontFamily: foundationTypography.fontFamily.latoHeavy,
+    fontSize: baseTypographyToken.display.display3.fontSize,
+    fontWeight: foundationTypography.fontWeight.fontWeightHeavy as FontWeight,
+    lineHeight: baseTypographyToken.display.display3.lineHeight,
+  },
+  display3Bold: {
+    fontFamily: foundationTypography.fontFamily.latoBold,
+    fontSize: baseTypographyToken.display.display3.fontSize,
+    fontWeight: foundationTypography.fontWeight.fontWeightBold as FontWeight,
+    lineHeight: baseTypographyToken.display.display3.lineHeight,
+  },
+  display4Black: {
+    fontFamily: foundationTypography.fontFamily.latoBlack,
+    fontSize: baseTypographyToken.display.display4.fontSize,
+    fontWeight: foundationTypography.fontWeight.fontWeightBlack as FontWeight,
+    lineHeight: baseTypographyToken.display.display4.lineHeight,
+  },
+  display4Heavy: {
+    fontFamily: foundationTypography.fontFamily.latoHeavy,
+    fontSize: baseTypographyToken.display.display4.fontSize,
+    fontWeight: foundationTypography.fontWeight.fontWeightHeavy as FontWeight,
+    lineHeight: baseTypographyToken.display.display4.lineHeight,
+  },
+  display4Bold: {
+    fontFamily: foundationTypography.fontFamily.latoBold,
+    fontSize: baseTypographyToken.display.display4.fontSize,
+    fontWeight: foundationTypography.fontWeight.fontWeightBold as FontWeight,
+    lineHeight: baseTypographyToken.display.display4.lineHeight,
+  },
+  heading1Black: {
+    fontFamily: foundationTypography.fontFamily.latoBlack,
+    fontSize: baseTypographyToken.heading.heading1.fontSize,
+    fontWeight: foundationTypography.fontWeight.fontWeightBlack as FontWeight,
+    lineHeight: baseTypographyToken.heading.heading1.lineHeight,
+  },
+  heading1Heavy: {
+    fontFamily: foundationTypography.fontFamily.latoHeavy,
+    fontSize: baseTypographyToken.heading.heading1.fontSize,
+    fontWeight: foundationTypography.fontWeight.fontWeightHeavy as FontWeight,
+    lineHeight: baseTypographyToken.heading.heading1.lineHeight,
+  },
+  heading2Black: {
+    fontFamily: foundationTypography.fontFamily.latoBlack,
+    fontSize: baseTypographyToken.heading.heading2.fontSize,
+    fontWeight: foundationTypography.fontWeight.fontWeightBlack as FontWeight,
+    lineHeight: baseTypographyToken.heading.heading2.lineHeight,
+  },
+  heading2Heavy: {
+    fontFamily: foundationTypography.fontFamily.latoHeavy,
+    fontSize: baseTypographyToken.heading.heading2.fontSize,
+    fontWeight: foundationTypography.fontWeight.fontWeightHeavy as FontWeight,
+    lineHeight: baseTypographyToken.heading.heading2.lineHeight,
+  },
+  heading3Black: {
+    fontFamily: foundationTypography.fontFamily.latoBlack,
+    fontSize: baseTypographyToken.heading.heading3.fontSize,
+    fontWeight: foundationTypography.fontWeight.fontWeightBlack as FontWeight,
+    lineHeight: baseTypographyToken.heading.heading3.lineHeight,
+  },
+  heading3Heavy: {
+    fontFamily: foundationTypography.fontFamily.latoHeavy,
+    fontSize: baseTypographyToken.heading.heading3.fontSize,
+    fontWeight: foundationTypography.fontWeight.fontWeightHeavy as FontWeight,
+    lineHeight: baseTypographyToken.heading.heading3.lineHeight,
+  },
+  heading3Bold: {
+    fontFamily: foundationTypography.fontFamily.latoBold,
+    fontSize: baseTypographyToken.heading.heading3.fontSize,
+    fontWeight: foundationTypography.fontWeight.fontWeightBold as FontWeight,
+    lineHeight: baseTypographyToken.heading.heading3.lineHeight,
+  },
+  heading4Black: {
+    fontFamily: foundationTypography.fontFamily.latoBlack,
+    fontSize: baseTypographyToken.heading.heading4.fontSize,
+    fontWeight: foundationTypography.fontWeight.fontWeightBlack as FontWeight,
+    lineHeight: baseTypographyToken.heading.heading4.lineHeight,
+  },
+  heading4Heavy: {
+    fontFamily: foundationTypography.fontFamily.latoHeavy,
+    fontSize: baseTypographyToken.heading.heading4.fontSize,
+    fontWeight: foundationTypography.fontWeight.fontWeightHeavy as FontWeight,
+    lineHeight: baseTypographyToken.heading.heading4.lineHeight,
+  },
+  heading4Bold: {
+    fontFamily: foundationTypography.fontFamily.latoBold,
+    fontSize: baseTypographyToken.heading.heading4.fontSize,
+    fontWeight: foundationTypography.fontWeight.fontWeightBold as FontWeight,
+    lineHeight: baseTypographyToken.heading.heading4.lineHeight,
+  },
+  heading5Black: {
+    fontFamily: foundationTypography.fontFamily.latoBlack,
+    fontSize: baseTypographyToken.heading.heading5.fontSize,
+    fontWeight: foundationTypography.fontWeight.fontWeightBlack as FontWeight,
+    lineHeight: baseTypographyToken.heading.heading5.lineHeight,
+  },
+  heading5Bold: {
+    fontFamily: foundationTypography.fontFamily.latoBold,
+    fontSize: baseTypographyToken.heading.heading5.fontSize,
+    fontWeight: foundationTypography.fontWeight.fontWeightBold as FontWeight,
+    lineHeight: baseTypographyToken.heading.heading5.lineHeight,
+  },
+  heading5Medium: {
+    fontFamily: foundationTypography.fontFamily.latoMedium,
+    fontSize: baseTypographyToken.heading.heading5.fontSize,
+    fontWeight: foundationTypography.fontWeight.fontWeightMedium as FontWeight,
+    lineHeight: baseTypographyToken.heading.heading5.lineHeight,
+  },
+  body1Bold: {
+    fontFamily: foundationTypography.fontFamily.latoBold,
+    fontSize: baseTypographyToken.body.body1.fontSize,
+    fontWeight: foundationTypography.fontWeight.fontWeightBold as FontWeight,
+    lineHeight: baseTypographyToken.body.body1.lineHeight,
+  },
+  body1Medium: {
+    fontFamily: foundationTypography.fontFamily.latoMedium,
+    fontSize: baseTypographyToken.body.body1.fontSize,
+    fontWeight: foundationTypography.fontWeight.fontWeightMedium as FontWeight,
+    lineHeight: baseTypographyToken.body.body1.lineHeight,
+  },
+  body1Regular: {
+    fontFamily: foundationTypography.fontFamily.latoRegular,
+    fontSize: baseTypographyToken.body.body1.fontSize,
+    fontWeight: foundationTypography.fontWeight.fontWeightRegular as FontWeight,
+    lineHeight: baseTypographyToken.body.body1.lineHeight,
+  },
+  body2Bold: {
+    fontFamily: foundationTypography.fontFamily.latoBold,
+    fontSize: baseTypographyToken.body.body2.fontSize,
+    fontWeight: foundationTypography.fontWeight.fontWeightBold as FontWeight,
+    lineHeight: baseTypographyToken.body.body2.lineHeight,
+  },
+  body2Medium: {
+    fontFamily: foundationTypography.fontFamily.latoMedium,
+    fontSize: baseTypographyToken.body.body2.fontSize,
+    fontWeight: foundationTypography.fontWeight.fontWeightMedium as FontWeight,
+    lineHeight: baseTypographyToken.body.body2.lineHeight,
+  },
+  body2Regular: {
+    fontFamily: foundationTypography.fontFamily.latoRegular,
+    fontSize: baseTypographyToken.body.body2.fontSize,
+    fontWeight: foundationTypography.fontWeight.fontWeightRegular as FontWeight,
+    lineHeight: baseTypographyToken.body.body2.lineHeight,
+  },
+  body3Bold: {
+    fontFamily: foundationTypography.fontFamily.latoBold,
+    fontSize: baseTypographyToken.body.body3.fontSize,
+    fontWeight: foundationTypography.fontWeight.fontWeightBold as FontWeight,
+    lineHeight: baseTypographyToken.body.body3.lineHeight,
+  },
+  body3Medium: {
+    fontFamily: foundationTypography.fontFamily.latoMedium,
+    fontSize: baseTypographyToken.body.body3.fontSize,
+    fontWeight: foundationTypography.fontWeight.fontWeightMedium as FontWeight,
+    lineHeight: baseTypographyToken.body.body3.lineHeight,
+  },
+  body3Regular: {
+    fontFamily: foundationTypography.fontFamily.latoRegular,
+    fontSize: baseTypographyToken.body.body3.fontSize,
+    fontWeight: foundationTypography.fontWeight.fontWeightRegular as FontWeight,
+    lineHeight: baseTypographyToken.body.body3.lineHeight,
+  },
+  body4Bold: {
+    fontFamily: foundationTypography.fontFamily.latoBold,
+    fontSize: baseTypographyToken.body.body4.fontSize,
+    fontWeight: foundationTypography.fontWeight.fontWeightBold as FontWeight,
+    lineHeight: baseTypographyToken.body.body4.lineHeight,
+  },
+  body4Medium: {
+    fontFamily: foundationTypography.fontFamily.latoMedium,
+    fontSize: baseTypographyToken.body.body4.fontSize,
+    fontWeight: foundationTypography.fontWeight.fontWeightMedium as FontWeight,
+    lineHeight: baseTypographyToken.body.body4.lineHeight,
+  },
+  body4Regular: {
+    fontFamily: foundationTypography.fontFamily.latoRegular,
+    fontSize: baseTypographyToken.body.body4.fontSize,
+    fontWeight: foundationTypography.fontWeight.fontWeightRegular as FontWeight,
+    lineHeight: baseTypographyToken.body.body4.lineHeight,
+  },
+};

package/src/SliceUI/typography/Type.ts

@@ -0,0 +1,20 @@
+import type { TextStyle } from 'react-native';
+import type { TYPOGRAPHY_STYLES } from './Token';
+import type { VariantBreakPoints } from '../responsive/Type';
+
+
+export type TypographyStyleKeys = keyof typeof TYPOGRAPHY_STYLES;
+
+export type TypographyVariants = Record<string, TextStyle>;
+export type FontWeight = TextStyle['fontWeight'];
+
+export interface TypographyViewProps {
+  screenName?: string; // Screen name
+  id?: string; // Element ID
+  children: string | string[]; // Text content
+  variant?: string | VariantBreakPoints; // Typography style variant (default: 'display1Black')
+  style?: TextStyle; // Optional custom styles
+  align?: 'auto' | 'left' | 'right' | 'center' | 'justify' | undefined; // Text alignment (default: 'left')
+  spacing?: number; // Line spacing (default: 0),
+  extraProps?: any;
+}

package/src/SliceUI/typography/Typography.tsx

@@ -0,0 +1,99 @@
+import React, {useMemo} from 'react';
+
+import {useSliceTheme} from '../contextProvider/context';
+import {resolveVariant, scaleFont} from '../responsive/helper';
+import {setTestId} from '../automation/helper';
+import type {TypographyViewProps} from './Type';
+import {Platform, StyleSheet, Text, type TextStyle} from 'react-native';
+import {TYPOGRAPHY_STYLES} from './Token';
+
+const DEFAULT_VARIANT: keyof typeof TYPOGRAPHY_STYLES = 'display1Black';
+
+const VARIANT_ALIASES: Record<string, keyof typeof TYPOGRAPHY_STYLES> = {
+  h1: 'heading1Heavy',
+  h2: 'heading2Heavy',
+  h3: 'heading3Bold',
+  h4: 'heading4Bold',
+  h5: 'heading5Bold',
+  h6: 'body1Bold',
+  body1: 'body1Regular',
+  body2: 'body2Regular',
+  body3: 'body3Regular',
+  body4: 'body4Regular',
+  body2Semibold: 'body2Bold',
+  captionRegular: 'body4Regular',
+  captionMedium: 'body4Medium',
+  captionBold: 'body4Bold',
+};
+
+const resolveTypographyVariant = (
+  variantKey: string,
+): keyof typeof TYPOGRAPHY_STYLES => {
+  const normalizedVariant =
+    VARIANT_ALIASES[variantKey] ??
+    (variantKey as keyof typeof TYPOGRAPHY_STYLES);
+
+  return normalizedVariant in TYPOGRAPHY_STYLES
+    ? normalizedVariant
+    : DEFAULT_VARIANT;
+};
+
+const Typography: React.FC<TypographyViewProps> = ({
+  screenName = 'default',
+  id = 'default',
+  children,
+  variant = DEFAULT_VARIANT,
+  style,
+  align = 'left',
+  spacing = 0,
+  ...extraProps
+}) => {
+  const {theme, deviceBreakpoint} = useSliceTheme();
+
+  const {isDebugBuildType = false, automationBaseid = 'AK_'} = theme;
+
+  // Memoize typography styles to avoid unnecessary recalculations
+  const textStyles = useMemo(() => {
+    const rawVariant = resolveVariant(variant, deviceBreakpoint);
+    const breakPointVariant = resolveTypographyVariant(rawVariant);
+    const themeTextStyles =
+      theme.typographyStyles?.[breakPointVariant] ??
+      TYPOGRAPHY_STYLES[breakPointVariant] ??
+      TYPOGRAPHY_STYLES[DEFAULT_VARIANT];
+    const textStyle = {
+      fontFamily: Platform.OS === 'web' ? 'Lato' : themeTextStyles?.fontFamily,
+      fontWeight: themeTextStyles?.fontWeight,
+      fontSize: scaleFont(themeTextStyles?.fontSize),
+      lineHeight: scaleFont(themeTextStyles?.lineHeight),
+      textAlign: align,
+      marginBottom: spacing,
+    };
+    return style ? StyleSheet.flatten([textStyle, style]) : textStyle;
+  }, [
+    variant,
+    deviceBreakpoint,
+    theme.typographyStyles,
+    align,
+    spacing,
+    style,
+  ]);
+
+  const styles = useMemo(() => {
+    return StyleSheet.create({
+      typography: textStyles as TextStyle,
+    });
+  }, [textStyles]);
+
+  return (
+    <Text
+      style={styles.typography}
+      {...extraProps}
+      {...(isDebugBuildType && automationBaseid
+        ? setTestId(automationBaseid, screenName, id)
+        : {})}>
+      {children}
+    </Text>
+  );
+};
+
+export default React.memo(Typography);

package/src/SliceUI/values/BorderRadius.ts

@@ -0,0 +1,17 @@
+import { dimensions } from './Dimension';
+
+export const borderRadius = {
+  borderRadius0: dimensions.dimension00, // 0px
+  borderRadius10: dimensions.dimension01, // 2px
+  borderRadius20: dimensions.dimension02, // 4px
+  borderRadius30: dimensions.dimension04, // 8px
+  borderRadius40: dimensions.dimension06, // 12px
+  borderRadius50: dimensions.dimension08, // 16px
+  borderRadius60: dimensions.dimension10, // 20px
+  borderRadius70: dimensions.dimension12, // 24px
+  borderRadius80: dimensions.dimension14, // 28px
+  borderRadius90: dimensions.dimension16, // 32px
+  borderRadius100: dimensions.dimension17, // 64px
+  borderRadius110: dimensions.dimension18, // 96px
+  borderRadiusFull: dimensions.dimension100, // 1000px
+};

package/src/SliceUI/values/BorderWidth.ts

@@ -0,0 +1,7 @@
+export const borderWidth = {
+  borderWidth00: 0,
+  borderWidth10: 1,
+  borderWidth15: 1.5,
+  borderWidth20: 2,
+  borderWidth40: 4,
+};

package/src/SliceUI/values/Dimension.ts

@@ -0,0 +1,35 @@
+export const dimensions = {
+  dimension00: 0,
+  dimension01: 2,
+  dimension02: 4,
+  dimension03: 6,
+  dimension04: 8,
+  dimension05: 10,
+  dimension06: 12,
+  dimension07: 14,
+  dimension08: 16,
+  dimension09: 18,
+  dimension10: 20,
+  dimension11: 22,
+  dimension12: 24,
+  dimension13: 26,
+  dimension14: 28,
+  dimension15: 30,
+  dimension16: 32,
+  dimension17: 36,
+  dimension18: 40,
+  dimension19: 48,
+  dimension20: 56,
+  dimension21: 64,
+  dimension22: 72,
+  dimension23: 80,
+  dimension24: 88,
+  dimension25: 96,
+  dimension26: 112,
+  dimension27: 128,
+  dimension28: 144,
+  dimension29: 160,
+  dimension30: 176,
+  dimension31: 192,
+  dimension100: 1000,
+};

package/src/SliceUI/values/IconSizes.ts

@@ -0,0 +1,13 @@
+import { dimensions } from './Dimension';
+
+export const iconSize = {
+  iconSize01: dimensions.dimension07,
+  iconSize02: dimensions.dimension08,
+  iconSize03: dimensions.dimension10,
+  iconSize04: dimensions.dimension12,
+  iconSize05: dimensions.dimension14,
+  iconSize06: dimensions.dimension16,
+  iconSize07: dimensions.dimension17,
+  iconSize08: dimensions.dimension18,
+  iconSize09: dimensions.dimension19
+};

package/src/SliceUI/values/Spacing.ts

@@ -0,0 +1,22 @@
+import { dimensions } from './Dimension';
+
+export const spacing = {
+  space0: dimensions.dimension00,
+  space50: dimensions.dimension01,
+  space100: dimensions.dimension02,
+  space150: dimensions.dimension03,
+  space200: dimensions.dimension04,
+  space250: dimensions.dimension05,
+  space300: dimensions.dimension06,
+  space350: dimensions.dimension07,
+  space400: dimensions.dimension08,
+  space450: dimensions.dimension09,
+  space500: dimensions.dimension10,
+  space550: dimensions.dimension11,
+  space600: dimensions.dimension12,
+  space800: dimensions.dimension16,
+  space900: dimensions.dimension18,
+  space1000: dimensions.dimension20,
+  space1200: dimensions.dimension24,
+  space1400: dimensions.dimension28
+};

package/src/declarations.d.ts

@@ -0,0 +1,8 @@
+declare module '*.svg' {
+  import * as React from 'react';
+  export const ReactComponent: React.FunctionComponent<
+    React.SVGProps<SVGSVGElement> & { title?: string }
+  >;
+  const src: string;
+  export default src;
+}

package/src/index.tsx

@@ -0,0 +1,119 @@
+import React from 'react';
+import {
+  requireNativeComponent,
+  UIManager,
+  Platform,
+  View,
+  type ViewStyle,
+} from 'react-native';
+
+const LINKING_ERROR =
+  "The package 'react-native-fh-slice-ui' doesn't seem to be linked. Make sure: \n\n" +
+  Platform.select({ios: "- You have run 'pod install'\n", default: ''}) +
+  '- You rebuilt the app after installing the package\n' +
+  '- You are not using Expo Go\n';
+
+type FhSliceUIProps = {
+  color: string;
+  style: ViewStyle;
+};
+
+const ComponentName = 'FhSliceUIView';
+
+let FhSliceUIView: React.ComponentType<FhSliceUIProps>;
+
+if (Platform.OS === 'web') {
+  // Fallback for web: render an empty View with given color and style
+  FhSliceUIView = ({color, style}) => (
+    <View style={[{backgroundColor: color}, style]} />
+  );
+} else {
+  // Native implementation
+  FhSliceUIView =
+    UIManager.getViewManagerConfig(ComponentName) != null
+      ? requireNativeComponent<FhSliceUIProps>(ComponentName)
+      : () => {
+          throw new Error(LINKING_ERROR);
+        };
+}
+
+export {FhSliceUIView};
+
+// ===== COMPONENTS =====
+
+export {default as Typography} from './SliceUI/typography/Typography';
+
+export {default as Input} from './SliceUI/input/Input';
+
+export {default as Icon} from './SliceUI/icon/Icon';
+
+export {default as Button} from './SliceUI/button/Button';
+
+export {default as Chip} from './SliceUI/chip/Chip';
+
+export {default as Badge} from './SliceUI/badge/Badge';
+
+export {default as Avatar} from './SliceUI/avatar/Avatar';
+
+export {default as TabItem} from './SliceUI/tab/TabItem';
+
+export {default as Tabs} from './SliceUI/tab/Tabs';
+
+export {HStack, VStack} from './SliceUI/layout/Stack';
+
+export {default as Switch} from './SliceUI/switch/Switch';
+
+export {RadioButton} from './SliceUI/radio/RadioButton';
+
+export {Divider} from './SliceUI/divider/Divider';
+
+export { default as Checkbox } from './SliceUI/checkbox/Checkbox';
+
+// ===== LAYOUT COMPONENTS =====
+
+export { default as Box } from './SliceUI/layout/Box';
+
+export { default as Center } from './SliceUI/layout/Center';
+
+export { default as Grid } from './SliceUI/layout/Grid';
+
+export { default as Spacer } from './SliceUI/layout/Spacer';
+
+// ===== TABLE COMPONENTS =====
+export {
+  Table,
+  TableCell,
+  TableHeader,
+  TableRow,
+  TableFooter,
+} from './SliceUI/table';
+
+// ===== THEMING =====
+
+export {
+  SliceThemeProvider,
+  useSliceTheme,
+} from './SliceUI/contextProvider/context';
+
+export {colors} from './SliceUI/colors/Pallete';
+
+export {DarkColorTokens, LightColorTokens} from './SliceUI/colors/Token';
+
+export {theme} from './SliceUI/theme/theme';
+
+
+// ==== DESIGN TOKENS====
+export { spacing } from './SliceUI/values/Spacing';
+export { borderRadius } from './SliceUI/values/BorderRadius';
+export { borderWidth } from './SliceUI/values/BorderWidth';
+export { iconSize } from './SliceUI/values/IconSizes';
+export { dimensions } from './SliceUI/values/Dimension';
+
+// ==== RESPONSIVE UTILITIES ====
+
+export { 
+  Breakpoints, 
+  getDeviceBreakpoint, 
+  scaleFont,
+  resolveVariant 
+} from './SliceUI/responsive/helper';