@impulse-ui-native/theme 1.0.10 → 2.0.1

package/dist/index.js

@@ -0,0 +1,1052 @@
+// src/constants/style.constants.ts
+var StylePropsRecord = {
+  margin: 0,
+  marginTop: 0,
+  marginBottom: 0,
+  marginLeft: 0,
+  marginRight: 0,
+  marginHorizontal: 0,
+  marginVertical: 0,
+  padding: 0,
+  paddingTop: 0,
+  paddingBottom: 0,
+  paddingLeft: 0,
+  paddingRight: 0,
+  paddingHorizontal: 0,
+  paddingVertical: 0,
+  color: 0,
+  backgroundColor: 0,
+  opacity: 0,
+  shadow: 0,
+  shadowPosition: 0,
+  shadowColor: 0,
+  shadowOpacity: 0,
+  shadowRadius: 0,
+  shadowOffset: 0,
+  elevation: 0,
+  borderRadius: 0,
+  borderTopLeftRadius: 0,
+  borderTopRightRadius: 0,
+  borderBottomLeftRadius: 0,
+  borderBottomRightRadius: 0,
+  borderWidth: 0,
+  borderTopWidth: 0,
+  borderRightWidth: 0,
+  borderBottomWidth: 0,
+  borderLeftWidth: 0,
+  borderColor: 0,
+  borderTopColor: 0,
+  borderRightColor: 0,
+  borderBottomColor: 0,
+  borderLeftColor: 0,
+  borderStyle: 0,
+  fontSize: 0,
+  fontFamily: 0,
+  fontWeight: 0,
+  fontStyle: 0,
+  fontVariant: 0,
+  letterSpacing: 0,
+  lineHeight: 0,
+  textAlign: 0,
+  textDecorationLine: 0,
+  textDecorationStyle: 0,
+  textDecorationColor: 0,
+  textTransform: 0,
+  includeFontPadding: 0,
+  textAlignVertical: 0,
+  writingDirection: 0,
+  flex: 0,
+  flexGrow: 0,
+  flexShrink: 0,
+  flexBasis: 0,
+  flexDirection: 0,
+  flexWrap: 0,
+  justifyContent: 0,
+  alignItems: 0,
+  alignSelf: 0,
+  alignContent: 0,
+  gap: 0,
+  rowGap: 0,
+  columnGap: 0,
+  position: 0,
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0,
+  zIndex: 0,
+  width: 0,
+  height: 0,
+  minWidth: 0,
+  maxWidth: 0,
+  minHeight: 0,
+  maxHeight: 0,
+  aspectRatio: 0,
+  overflow: 0
+};
+var StylePropsSet = new Set(
+  Object.keys(StylePropsRecord)
+);
+var shadowScale = {
+  none: { radius: 0, opacity: 0, elevation: 0 },
+  xs: { radius: 2, opacity: 0.08, elevation: 1 },
+  sm: { radius: 4, opacity: 0.1, elevation: 2 },
+  md: { radius: 8, opacity: 0.15, elevation: 4 },
+  lg: { radius: 16, opacity: 0.18, elevation: 8 },
+  xl: { radius: 24, opacity: 0.22, elevation: 12 }
+};
+
+// src/hooks/use-border.hook.ts
+import { useMemo as useMemo2 } from "react";
+
+// src/providers/theme.provider.tsx
+import {
+  createContext,
+  memo,
+  useContext,
+  useMemo
+} from "react";
+import { merge } from "@impulse-ui-native/core";
+
+// src/theme/create-button-tokens.ts
+function createButtonTokens(tokens) {
+  const primary = tokens.colors.primary.value;
+  const primaryContrast = tokens.colors.primary.contrast;
+  const secondary = tokens.colors.secondary.value;
+  const secondaryContrast = tokens.colors.secondary.contrast;
+  const neutral = tokens.colors.neutral;
+  const disabledColor = tokens.colors.text.disabled;
+  return {
+    borderWidth: tokens.borderSize.sm,
+    borderRadius: tokens.radii.md,
+    sizes: {
+      small: {
+        height: 32,
+        paddingVertical: 6,
+        paddingHorizontal: 12,
+        fontSize: tokens.fontSize.xsm
+      },
+      medium: {
+        height: 40,
+        paddingVertical: 8,
+        paddingHorizontal: 16,
+        fontSize: tokens.fontSize.sm
+      },
+      large: {
+        height: 48,
+        paddingVertical: 10,
+        paddingHorizontal: 20,
+        fontSize: tokens.fontSize.sm
+      }
+    },
+    variants: {
+      filled: {
+        backgroundColor: primary,
+        borderColor: primary,
+        color: primaryContrast,
+        disabledBackgroundColor: neutral["5"],
+        disabledBorderColor: neutral["5"],
+        disabledColor
+      },
+      outlined: {
+        backgroundColor: "transparent",
+        borderColor: primary,
+        color: primary,
+        disabledBackgroundColor: "transparent",
+        disabledBorderColor: neutral["5"],
+        disabledColor
+      },
+      soft: {
+        backgroundColor: secondary,
+        borderColor: secondary,
+        color: secondaryContrast,
+        disabledBackgroundColor: neutral["3"],
+        disabledBorderColor: neutral["3"],
+        disabledColor
+      },
+      ghost: {
+        backgroundColor: "transparent",
+        borderColor: "transparent",
+        color: primary,
+        disabledBackgroundColor: "transparent",
+        disabledBorderColor: "transparent",
+        disabledColor
+      },
+      plain: {
+        backgroundColor: "transparent",
+        borderColor: "transparent",
+        color: primary,
+        disabledBackgroundColor: "transparent",
+        disabledBorderColor: "transparent",
+        disabledColor
+      }
+    }
+  };
+}
+
+// src/theme/create-control-tokens.ts
+function createControlAddonTokens(tokens) {
+  return {
+    marginHorizontal: tokens.space.xxs,
+    hitSlop: tokens.space.sm,
+    iconColor: tokens.colors.text.secondary,
+    errorIconColor: tokens.colors.feedback.error.value,
+    disabledIconColor: tokens.colors.text.disabled
+  };
+}
+function createControlContainerTokens(tokens) {
+  const ErrorColor = tokens.colors.feedback.error.value;
+  const TransparentColor = "transparent";
+  return {
+    borderWidth: tokens.borderSize.sm,
+    borderRadius: tokens.radii.sm,
+    disabledOpacity: 0.7,
+    sizes: {
+      small: {
+        height: 32,
+        paddingHorizontal: tokens.space.xs
+      },
+      medium: {
+        height: 40,
+        paddingHorizontal: tokens.space.xs
+      },
+      large: {
+        height: 48,
+        paddingHorizontal: tokens.space.xs
+      }
+    },
+    variants: {
+      filled: {
+        backgroundColor: tokens.colors.surface.secondary.value,
+        borderColor: TransparentColor,
+        errorBorderColor: ErrorColor,
+        disabledBackgroundColor: tokens.colors.neutral["2"],
+        disabledBorderColor: TransparentColor
+      },
+      outlined: {
+        backgroundColor: TransparentColor,
+        borderColor: tokens.colors.neutral["5"],
+        errorBorderColor: ErrorColor,
+        disabledBackgroundColor: TransparentColor,
+        disabledBorderColor: tokens.colors.neutral["5"]
+      },
+      soft: {
+        backgroundColor: tokens.colors.accent.value,
+        borderColor: TransparentColor,
+        errorBorderColor: ErrorColor,
+        disabledBackgroundColor: tokens.colors.neutral["2"],
+        disabledBorderColor: TransparentColor
+      },
+      ghost: {
+        backgroundColor: TransparentColor,
+        borderColor: TransparentColor,
+        errorBorderColor: ErrorColor,
+        disabledBackgroundColor: TransparentColor,
+        disabledBorderColor: TransparentColor
+      },
+      plain: {
+        backgroundColor: TransparentColor,
+        borderColor: TransparentColor,
+        errorBorderColor: ErrorColor,
+        disabledBackgroundColor: TransparentColor,
+        disabledBorderColor: TransparentColor
+      }
+    }
+  };
+}
+function createControlErrorTokens(tokens) {
+  return {
+    marginTop: tokens.space.xxs,
+    color: tokens.colors.feedback.error.value,
+    fontSize: tokens.fontSize.xs
+  };
+}
+function createControlInputTokens(tokens) {
+  return {
+    flex: 1,
+    fontFamily: tokens.fontFamily.normal[400],
+    paddingHorizontal: tokens.space.xxs,
+    sizes: {
+      small: {
+        fontSize: tokens.fontSize.xs
+      },
+      medium: {
+        fontSize: tokens.fontSize.xsm
+      },
+      large: {
+        fontSize: tokens.fontSize.sm
+      }
+    },
+    variants: {
+      filled: {
+        color: tokens.colors.text.primary,
+        placeholderColor: tokens.colors.text.disabled,
+        disabledColor: tokens.colors.text.disabled,
+        disabledPlaceholderColor: tokens.colors.text.disabled,
+        errorColor: tokens.colors.text.primary,
+        errorPlaceholderColor: tokens.colors.feedback.error.value
+      },
+      outlined: {
+        color: tokens.colors.text.primary,
+        placeholderColor: tokens.colors.text.disabled,
+        disabledColor: tokens.colors.text.disabled,
+        disabledPlaceholderColor: tokens.colors.text.disabled,
+        errorColor: tokens.colors.text.primary,
+        errorPlaceholderColor: tokens.colors.feedback.error.value
+      },
+      soft: {
+        color: tokens.colors.accent.contrast,
+        placeholderColor: tokens.colors.accent.contrast,
+        disabledColor: tokens.colors.text.disabled,
+        disabledPlaceholderColor: tokens.colors.text.disabled,
+        errorColor: tokens.colors.accent.contrast,
+        errorPlaceholderColor: tokens.colors.feedback.error.value
+      },
+      ghost: {
+        color: tokens.colors.text.primary,
+        placeholderColor: tokens.colors.text.disabled,
+        disabledColor: tokens.colors.text.disabled,
+        disabledPlaceholderColor: tokens.colors.text.disabled,
+        errorColor: tokens.colors.text.primary,
+        errorPlaceholderColor: tokens.colors.feedback.error.value
+      },
+      plain: {
+        color: tokens.colors.text.primary,
+        placeholderColor: tokens.colors.text.disabled,
+        disabledColor: tokens.colors.text.disabled,
+        disabledPlaceholderColor: tokens.colors.text.disabled,
+        errorColor: tokens.colors.text.primary,
+        errorPlaceholderColor: tokens.colors.feedback.error.value
+      }
+    }
+  };
+}
+function createControlLabelTokens(tokens) {
+  return {
+    marginBottom: tokens.space.xxs,
+    fontSize: tokens.fontSize.xsm,
+    color: tokens.colors.text.secondary,
+    disabledColor: tokens.colors.text.disabled,
+    errorColor: tokens.colors.feedback.error.value
+  };
+}
+
+// src/theme/create-data-state-tokens.ts
+function createDataStateTokens(tokens) {
+  return {
+    details: {
+      gap: 10,
+      iconSize: 150,
+      iconColor: tokens.colors.primary.value
+    },
+    actionsFooter: {
+      gap: 10
+    },
+    content: {
+      zIndex: 1
+    },
+    loading: {
+      transitionDuration: 250,
+      loaderZIndex: 1
+    }
+  };
+}
+
+// src/theme/create-datetime-picker.ts
+function createDatetimePickerTokens(tokens) {
+  return {
+    calendar: {
+      dayNamesMarginBottom: tokens.space.msm,
+      weeksGap: tokens.space.xxs
+    },
+    day: {
+      size: 40,
+      borderRadius: tokens.radii.sm,
+      color: tokens.colors.text.primary,
+      outsideMonthColor: tokens.colors.neutral["5"],
+      selectedBackgroundColor: tokens.colors.primary.value,
+      selectedColor: tokens.colors.primary.contrast,
+      rangeBackgroundColor: tokens.colors.secondary.value,
+      rangeColor: tokens.colors.secondary.contrast
+    },
+    datePickerFlyout: {
+      gap: tokens.space.msm
+    },
+    datetimePickerFlyout: {
+      gap: tokens.space.msm
+    },
+    datetimeRangePickerFlyout: {
+      gap: tokens.space.msm,
+      timeInputsGap: tokens.space.xs
+    },
+    flyoutActions: {
+      gap: tokens.space.msm,
+      buttonsGap: tokens.space.xs,
+      clearColor: tokens.colors.primary.value
+    },
+    quickDateOptions: {
+      gap: tokens.space.xs
+    },
+    visibleDateSelect: {
+      gap: tokens.space.xs
+    }
+  };
+}
+
+// src/theme/create-flyout-tokens.ts
+function createFlyoutTokens(tokens) {
+  return {
+    zIndexBase: 100,
+    maxHeightRatio: 0.7,
+    overlayColor: tokens.colors.black,
+    overlayVisibleOpacity: 0.4,
+    backgroundColor: tokens.colors.surface.secondary.value,
+    contentPaddingHorizontal: tokens.space.md,
+    borderRadius: tokens.radii.xl,
+    hiddenOpacity: 0,
+    title: {
+      paddingVertical: tokens.space.msm,
+      paddingHorizontal: tokens.space.md
+    },
+    handle: {
+      containerHeight: 32,
+      width: "25%",
+      height: 6,
+      borderRadius: tokens.radii.round,
+      backgroundColor: tokens.colors.surface.primary.value
+    }
+  };
+}
+
+// src/theme/create-icon-button-tokens.ts
+function createIconButtonTokens(tokens) {
+  const primary = tokens.colors.primary.value;
+  const primaryContrast = tokens.colors.primary.contrast;
+  const secondary = tokens.colors.secondary.value;
+  const secondaryContrast = tokens.colors.secondary.contrast;
+  const neutral = tokens.colors.neutral;
+  const disabledColor = tokens.colors.text.disabled;
+  return {
+    borderWidth: tokens.borderSize.sm,
+    borderRadius: tokens.radii.md,
+    sizes: {
+      small: {
+        size: 32,
+        padding: 6
+      },
+      medium: {
+        size: 40,
+        padding: 8
+      },
+      large: {
+        size: 48,
+        padding: 10
+      }
+    },
+    variants: {
+      filled: {
+        backgroundColor: primary,
+        borderColor: primary,
+        color: primaryContrast,
+        disabledBackgroundColor: neutral["5"],
+        disabledBorderColor: neutral["5"],
+        disabledColor
+      },
+      outlined: {
+        backgroundColor: "transparent",
+        borderColor: primary,
+        color: primary,
+        disabledBackgroundColor: "transparent",
+        disabledBorderColor: neutral["5"],
+        disabledColor
+      },
+      soft: {
+        backgroundColor: secondary,
+        borderColor: secondary,
+        color: secondaryContrast,
+        disabledBackgroundColor: neutral["3"],
+        disabledBorderColor: neutral["3"],
+        disabledColor
+      },
+      ghost: {
+        backgroundColor: "transparent",
+        borderColor: "transparent",
+        color: primary,
+        disabledBackgroundColor: "transparent",
+        disabledBorderColor: "transparent",
+        disabledColor
+      },
+      plain: {
+        backgroundColor: "transparent",
+        borderColor: "transparent",
+        color: primary,
+        disabledBackgroundColor: "transparent",
+        disabledBorderColor: "transparent",
+        disabledColor
+      }
+    }
+  };
+}
+
+// src/theme/create-select-tokens.ts
+function createSelectTokens(tokens) {
+  return {
+    option: {
+      padding: tokens.space.sm,
+      selectedIconColor: tokens.colors.primary.value,
+      selectedIconVisibleOpacity: 1,
+      selectedIconHiddenOpacity: 0
+    }
+  };
+}
+
+// src/theme/create-skeleton-tokens.ts
+function createSkeletonTokens(tokens) {
+  const boneColor = tokens.colors.neutral["5"];
+  return {
+    bone: {
+      backgroundColor: boneColor,
+      borderColor: boneColor,
+      initialOpacity: 1,
+      animatedOpacity: 0.4,
+      animationDuration: 1e3
+    },
+    text: {
+      alignSelf: "flex-start",
+      textTransform: "uppercase",
+      opacity: 0
+    }
+  };
+}
+
+// src/theme/create-tag-tokens.ts
+function createTagTokens(tokens) {
+  const neutral = tokens.colors.neutral;
+  const disabledColor = tokens.colors.text.disabled;
+  const createVariants = (value, contrast) => ({
+    filled: {
+      backgroundColor: value,
+      borderColor: value,
+      color: contrast,
+      disabledBackgroundColor: neutral["4"],
+      disabledBorderColor: neutral["6"],
+      disabledColor
+    },
+    outlined: {
+      backgroundColor: "transparent",
+      borderColor: value,
+      color: value,
+      disabledBackgroundColor: "transparent",
+      disabledBorderColor: neutral["6"],
+      disabledColor
+    },
+    soft: {
+      backgroundColor: contrast,
+      borderColor: contrast,
+      color: value,
+      disabledBackgroundColor: neutral["3"],
+      disabledBorderColor: neutral["3"],
+      disabledColor
+    },
+    ghost: {
+      backgroundColor: "transparent",
+      borderColor: "transparent",
+      color: value,
+      disabledBackgroundColor: "transparent",
+      disabledBorderColor: "transparent",
+      disabledColor
+    },
+    plain: {
+      backgroundColor: "transparent",
+      borderColor: "transparent",
+      color: value,
+      disabledBackgroundColor: "transparent",
+      disabledBorderColor: "transparent",
+      disabledColor
+    }
+  });
+  return {
+    borderWidth: tokens.borderSize.sm,
+    borderRadius: tokens.radii.round,
+    gap: tokens.space.xxs,
+    iconMarginLeft: tokens.borderSize.md,
+    sizes: {
+      small: {
+        height: 24,
+        paddingHorizontal: tokens.space.xs,
+        minWidth: tokens.space.xl,
+        fontSize: tokens.fontSize.xs
+      },
+      medium: {
+        height: 28,
+        paddingHorizontal: tokens.space.xs,
+        minWidth: tokens.space.xxl,
+        fontSize: tokens.fontSize.xsm
+      },
+      large: {
+        height: 32,
+        paddingHorizontal: tokens.space.mxs,
+        minWidth: tokens.space.xxl,
+        fontSize: tokens.fontSize.xsm
+      }
+    },
+    colors: {
+      primary: createVariants(
+        tokens.colors.primary.value,
+        tokens.colors.primary.contrast
+      ),
+      secondary: createVariants(
+        tokens.colors.secondary.value,
+        tokens.colors.secondary.contrast
+      ),
+      error: createVariants(
+        tokens.colors.feedback.error.value,
+        tokens.colors.feedback.error.contrast
+      ),
+      warning: createVariants(
+        tokens.colors.feedback.warning.value,
+        tokens.colors.feedback.warning.contrast
+      ),
+      success: createVariants(
+        tokens.colors.feedback.success.value,
+        tokens.colors.feedback.success.contrast
+      ),
+      info: createVariants(
+        tokens.colors.feedback.info.value,
+        tokens.colors.feedback.info.contrast
+      )
+    }
+  };
+}
+
+// src/theme/create-time-picker-tokens.ts
+function createTimePickerTokens(tokens) {
+  const ItemHeight = 50;
+  const VisibleItems = 5;
+  const ContainerHeight = ItemHeight * VisibleItems;
+  const VerticalPadding = ContainerHeight / 2 - ItemHeight / 2;
+  const ColumnWidth = 70;
+  return {
+    column: {
+      width: ColumnWidth,
+      height: ContainerHeight,
+      gap: tokens.space.xxs,
+      listWidth: 30,
+      itemHeight: ItemHeight,
+      visibleItems: VisibleItems,
+      verticalPadding: VerticalPadding,
+      initialScrollIndexViewOffset: -VerticalPadding,
+      fontSize: tokens.fontSize.xl,
+      selectedColor: tokens.colors.primary.value,
+      color: tokens.colors.text.primary,
+      selectedFontWeight: tokens.fontWeight.semiBold,
+      fontWeight: tokens.fontWeight.regular
+    },
+    flyout: {
+      gap: tokens.space.msm
+    },
+    columns: {
+      height: ContainerHeight,
+      gap: tokens.space.xs,
+      indicatorHeight: ItemHeight,
+      indicatorWidth: ColumnWidth * 3 + 70,
+      indicatorTop: VerticalPadding,
+      indicatorBorderRadius: tokens.radii.round,
+      indicatorBackgroundColor: tokens.colors.surface.primary.value
+    }
+  };
+}
+
+// src/theme/tokens.theme.ts
+var SpaceTokens = {
+  none: 0,
+  xxs: 4,
+  xs: 8,
+  mxs: 12,
+  sm: 16,
+  msm: 24,
+  md: 32,
+  lg: 48,
+  xl: 64,
+  xxl: 96
+};
+var BorderSizeTokens = {
+  sm: 1,
+  md: 2,
+  lg: 3,
+  xl: 5,
+  xxl: 10
+};
+var RadiiTokens = {
+  sm: 4,
+  md: 8,
+  lg: 16,
+  xl: 32,
+  xxl: 64,
+  xxxl: 128,
+  round: 1e5
+};
+var FontSizeTokens = {
+  xxs: 8,
+  xs: 12,
+  xsm: 14,
+  sm: 16,
+  md: 18,
+  lg: 20,
+  xl: 24,
+  xxl: 28,
+  xxxl: 32,
+  huge: 36,
+  massive: 40,
+  giant: 48,
+  colossal: 56
+};
+var LineHeightTokens = {
+  xxs: 12,
+  xs: 16,
+  xsm: 20,
+  sm: 24,
+  md: 26,
+  lg: 28,
+  xl: 32,
+  xxl: 36,
+  xxxl: 40,
+  huge: 44,
+  massive: 48,
+  giant: 56,
+  colossal: 64
+};
+var FontWeightTokens = {
+  thin: 100,
+  extraLight: 200,
+  light: 300,
+  regular: 400,
+  medium: 500,
+  semiBold: 600,
+  bold: 700,
+  extraBold: 800,
+  black: 900
+};
+var FontFamilyWeightsNormalTokens = {
+  100: "Montserrat_100Thin",
+  200: "Montserrat_200ExtraLight",
+  300: "Montserrat_300Light",
+  400: "Montserrat_400Regular",
+  500: "Montserrat_500Medium",
+  600: "Montserrat_600SemiBold",
+  700: "Montserrat_700Bold",
+  800: "Montserrat_800ExtraBold",
+  900: "Montserrat_900Black"
+};
+var FontFamilyWeightsItalicTokens = {
+  100: "Montserrat_100Thin_Italic",
+  200: "Montserrat_200ExtraLight_Italic",
+  300: "Montserrat_300Light_Italic",
+  400: "Montserrat_400Regular_Italic",
+  500: "Montserrat_500Medium_Italic",
+  600: "Montserrat_600SemiBold_Italic",
+  700: "Montserrat_700Bold_Italic",
+  800: "Montserrat_800ExtraBold_Italic",
+  900: "Montserrat_900Black_Italic"
+};
+var FontFamilyTokens = {
+  normal: FontFamilyWeightsNormalTokens,
+  italic: FontFamilyWeightsItalicTokens
+};
+var NeutralColorTokens = {
+  "0": "#ffffff",
+  "1": "#f8f9fa",
+  "2": "#f1f3f5",
+  "3": "#e9ecef",
+  "4": "#dee2e6",
+  "5": "#ced4da",
+  "6": "#adb5bd",
+  "7": "#868e96",
+  "8": "#495057",
+  "9": "#343a40",
+  "10": "#212529",
+  "11": "#16191d",
+  "12": "#0d0f12",
+  "13": "#000000"
+};
+var LightColors = {
+  primary: {
+    value: "#f55d6b",
+    contrast: NeutralColorTokens["0"]
+  },
+  accent: {
+    value: "#FA9EA7",
+    contrast: NeutralColorTokens["0"]
+  },
+  secondary: {
+    value: "#FEE7E9",
+    contrast: "#f55d6b"
+  },
+  neutral: NeutralColorTokens,
+  surface: {
+    primary: {
+      value: NeutralColorTokens["2"],
+      contrast: NeutralColorTokens["11"]
+    },
+    secondary: {
+      value: NeutralColorTokens["0"],
+      contrast: NeutralColorTokens["11"]
+    },
+    elevated: {
+      value: NeutralColorTokens["0"],
+      contrast: NeutralColorTokens["11"]
+    },
+    inverse: {
+      value: NeutralColorTokens["13"],
+      contrast: NeutralColorTokens["0"]
+    }
+  },
+  text: {
+    primary: NeutralColorTokens["11"],
+    secondary: NeutralColorTokens["10"],
+    tertiary: NeutralColorTokens["9"],
+    inverse: NeutralColorTokens["0"],
+    disabled: NeutralColorTokens["7"]
+  },
+  border: {
+    subtle: {
+      value: NeutralColorTokens["3"],
+      contrast: NeutralColorTokens["9"]
+    },
+    default: {
+      value: NeutralColorTokens["4"],
+      contrast: NeutralColorTokens["10"]
+    },
+    strong: {
+      value: NeutralColorTokens["6"],
+      contrast: NeutralColorTokens["11"]
+    },
+    focus: {
+      value: "#f55d6b",
+      contrast: NeutralColorTokens["0"]
+    }
+  },
+  feedback: {
+    error: {
+      value: "#c92a2a",
+      contrast: "#fff5f5"
+    },
+    warning: {
+      value: "#e67700",
+      contrast: "#fff4e6"
+    },
+    success: {
+      value: "#7a9908",
+      contrast: "#f4fce3"
+    },
+    info: {
+      value: "#1864ab",
+      contrast: "#e7f5ff"
+    }
+  },
+  overlay: "rgba(0, 0, 0, 0.45)",
+  white: NeutralColorTokens["0"],
+  black: NeutralColorTokens["13"]
+};
+function createComponentsTokens(tokens) {
+  return {
+    button: createButtonTokens(tokens),
+    iconButton: createIconButtonTokens(tokens),
+    tag: createTagTokens(tokens),
+    controlAddon: createControlAddonTokens(tokens),
+    controlContainer: createControlContainerTokens(tokens),
+    controlError: createControlErrorTokens(tokens),
+    controlInput: createControlInputTokens(tokens),
+    controlLabel: createControlLabelTokens(tokens),
+    select: createSelectTokens(tokens),
+    datetimePicker: createDatetimePickerTokens(tokens),
+    timePicker: createTimePickerTokens(tokens),
+    flyout: createFlyoutTokens(tokens),
+    skeleton: createSkeletonTokens(tokens),
+    dataState: createDataStateTokens(tokens)
+  };
+}
+
+// src/theme/dark.theme.ts
+var DarkTheme = {
+  colors: LightColors,
+  space: SpaceTokens,
+  radii: RadiiTokens,
+  fontFamily: FontFamilyTokens,
+  borderSize: BorderSizeTokens,
+  fontSize: FontSizeTokens,
+  fontWeight: FontWeightTokens,
+  lineHeight: LineHeightTokens
+};
+
+// src/theme/light.theme.ts
+var LightTheme = {
+  colors: LightColors,
+  space: SpaceTokens,
+  radii: RadiiTokens,
+  fontFamily: FontFamilyTokens,
+  borderSize: BorderSizeTokens,
+  fontSize: FontSizeTokens,
+  fontWeight: FontWeightTokens,
+  lineHeight: LineHeightTokens
+};
+
+// src/providers/theme.provider.tsx
+import { jsx } from "react/jsx-runtime";
+var ThemeContext = createContext(void 0);
+var ThemeProvider = memo(function ThemeProvider2(props) {
+  const scheme = props?.scheme ?? "light";
+  const context = useMemo(() => {
+    const baseTheme = scheme === "light" ? LightTheme : DarkTheme;
+    const customBaseTheme = props.theme?.[scheme];
+    const theme = merge(baseTheme, customBaseTheme);
+    return {
+      ...theme,
+      components: createComponentsTokens(theme)
+    };
+  }, [scheme, props.theme?.light, props.theme?.dark, props.components]);
+  return /* @__PURE__ */ jsx(ThemeContext.Provider, { value: context, children: props.children });
+});
+function useThemeContext() {
+  const context = useContext(ThemeContext);
+  if (!context) {
+    throw new Error("useThemeContext must be used within a ThemeProvider");
+  }
+  return context;
+}
+
+// src/hooks/use-border.hook.ts
+function useBorder() {
+  const context = useThemeContext();
+  return useMemo2(() => context.borderSize, [context.borderSize]);
+}
+
+// src/hooks/use-colors.hook.ts
+import { useMemo as useMemo3 } from "react";
+function useColors() {
+  const context = useThemeContext();
+  return useMemo3(() => context.colors, [context.colors]);
+}
+
+// src/hooks/use-components-tokens.hook.ts
+import { useMemo as useMemo4 } from "react";
+function useComponentsTokens() {
+  const context = useThemeContext();
+  return useMemo4(() => context.components, [context.components]);
+}
+
+// src/hooks/use-radii.hook.ts
+import { useMemo as useMemo5 } from "react";
+function useRadii() {
+  const context = useThemeContext();
+  return useMemo5(() => context.radii, [context.radii]);
+}
+
+// src/hooks/use-space.hook.ts
+import { useMemo as useMemo6 } from "react";
+function useSpace() {
+  const context = useThemeContext();
+  return useMemo6(() => context.space, [context.space]);
+}
+
+// src/hooks/use-style-props.hook.ts
+import { useMemo as useMemo7 } from "react";
+
+// src/utils/style.utils.ts
+import { Platform } from "react-native";
+var isStylePropKey = (k) => StylePropsSet.has(k);
+var extractStyleProps = (props) => {
+  const style = {};
+  for (const k in props) {
+    if (isStylePropKey(k) && props[k] !== void 0) {
+      style[k] = props[k];
+    }
+  }
+  return style;
+};
+var createStyleKey = (props) => {
+  let key = "";
+  for (const k in props) {
+    if (isStylePropKey(k)) {
+      key += String(props[k]);
+    }
+  }
+  return key;
+};
+var getShadowStyle = (level = "none", position = "bottom", colors) => {
+  const token = shadowScale[level];
+  if (level === "none") return {};
+  if (Platform.OS === "android") {
+    return {
+      elevation: token.elevation
+    };
+  }
+  let offsetY = 0;
+  if (position === "bottom") offsetY = token.radius / 2;
+  if (position === "top") offsetY = -token.radius / 2;
+  if (position === "around") offsetY = 0;
+  return {
+    shadowColor: colors.black,
+    shadowOpacity: token.opacity,
+    shadowRadius: token.radius,
+    shadowOffset: {
+      width: 0,
+      height: offsetY
+    }
+  };
+};
+
+// src/hooks/use-style-props.hook.ts
+function useStyleProps(props) {
+  const key = useMemo7(() => createStyleKey(props), [props]);
+  return useMemo7(() => extractStyleProps(props), [key]);
+}
+
+// src/hooks/use-theme.hook.ts
+function useTheme() {
+  return useThemeContext();
+}
+
+// src/hooks/use-themed-styles.ts
+import { useMemo as useMemo8 } from "react";
+function useThemedStyles(styledFunction, props, dependencies) {
+  const theme = useTheme();
+  const memoDependencies = dependencies ?? (props === void 0 ? [] : [props]);
+  return useMemo8(() => {
+    if (props === void 0) {
+      return styledFunction(theme);
+    }
+    return styledFunction(theme, props);
+  }, [theme, styledFunction, ...memoDependencies]);
+}
+export {
+  BorderSizeTokens,
+  DarkTheme,
+  FontFamilyTokens,
+  FontFamilyWeightsItalicTokens,
+  FontFamilyWeightsNormalTokens,
+  FontSizeTokens,
+  FontWeightTokens,
+  LightColors,
+  LightTheme,
+  LineHeightTokens,
+  NeutralColorTokens,
+  RadiiTokens,
+  SpaceTokens,
+  StylePropsSet,
+  ThemeProvider,
+  createComponentsTokens,
+  createStyleKey,
+  extractStyleProps,
+  getShadowStyle,
+  shadowScale,
+  useBorder,
+  useColors,
+  useComponentsTokens,
+  useRadii,
+  useSpace,
+  useStyleProps,
+  useTheme,
+  useThemeContext,
+  useThemedStyles
+};
+//# sourceMappingURL=index.js.map