@ecohouse/ui 0.1.6 → 0.1.8

package/dist/index.cjs

@@ -107,6 +107,13 @@ var segmentedToggleTypography = {
   lineHeight: 14,
   letterSpacing: 0
 };
+var languageSwitcherTypography = {
+  fontFamily: fonts.sans,
+  fontSize: 14,
+  fontWeight: "600",
+  lineHeight: 19,
+  letterSpacing: 0
+};
 var counterTypography = {
   fontFamily: fonts.sans,
   fontSize: 14,
@@ -114,6 +121,43 @@ var counterTypography = {
   lineHeight: 14,
   letterSpacing: 0
 };
+var ratingTypography = {
+  fontFamily: fonts.sans,
+  fontSize: 32,
+  fontWeight: "700",
+  lineHeight: 35.84,
+  letterSpacing: 0
+};
+var commentCardTypography = {
+  name: {
+    fontFamily: fonts.sans,
+    fontSize: 16,
+    fontWeight: "600",
+    lineHeight: 18,
+    letterSpacing: 0
+  },
+  date: {
+    fontFamily: fonts.sans,
+    fontSize: 14,
+    fontWeight: "400",
+    lineHeight: 16,
+    letterSpacing: 0
+  },
+  comment: {
+    fontFamily: fonts.sans,
+    fontSize: 14,
+    fontWeight: "400",
+    lineHeight: 19,
+    letterSpacing: 0
+  },
+  action: {
+    fontFamily: fonts.sans,
+    fontSize: 12,
+    fontWeight: "700",
+    lineHeight: 12,
+    letterSpacing: 0
+  }
+};
 var inputTypography = {
   label: {
     fontFamily: fonts.sans,
@@ -451,6 +495,21 @@ function HeartIcon({ size = 20, color = colors.primary, strokeWidth = 1.5 }) {
   ) });
 }
 
+// src/icons/Globe/globePath.ts
+var GLOBE_PATH = "M18.3333 10C18.3333 14.6024 14.6024 18.3333 10 18.3333M18.3333 10C18.3333 5.39763 14.6024 1.66667 10 1.66667M18.3333 10H1.66667M10 18.3333C5.39763 18.3333 1.66667 14.6024 1.66667 10M10 18.3333C12.0833 16.0511 13.2675 13.0836 13.3333 10C13.2675 6.91643 12.0833 3.94892 10 1.66667M10 18.3333C7.91667 16.0511 6.73248 13.0836 6.66667 10C6.73248 6.91643 7.91667 3.94892 10 1.66667M1.66667 10C1.66667 5.39763 5.39763 1.66667 10 1.66667";
+function GlobeIcon({ size = 20, color = colors.primary, strokeWidth = 2 }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Svg__default.default, { width: size, height: size, viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
+    Svg.Path,
+    {
+      d: GLOBE_PATH,
+      stroke: color,
+      strokeWidth,
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
+}
+
 // src/icons/HelpCircle/helpCirclePath.ts
 var HELP_CIRCLE_PATH = "M6.99971 6.00149C7.11717 5.66757 7.34902 5.386 7.6542 5.20665C7.95937 5.0273 8.31817 4.96174 8.66705 5.02158C9.01593 5.08142 9.33238 5.2628 9.56034 5.5336C9.7883 5.8044 9.91306 6.14714 9.91254 6.50112C9.91254 7.50037 8.41365 8 8.41365 8M8.43298 10H8.43964M8.33304 13.3333C11.4627 13.3333 13.9997 10.7963 13.9997 7.66667C13.9997 4.53705 11.4627 2 8.33304 2C5.20343 2 2.66638 4.53705 2.66638 7.66667C2.66638 8.3 2.77027 8.90906 2.96196 9.47774C3.03409 9.69175 3.07016 9.79875 3.07666 9.88095C3.08309 9.96213 3.07823 10.019 3.05814 10.098C3.03781 10.1779 2.99291 10.261 2.9031 10.4272L1.81267 12.4456C1.65713 12.7335 1.57936 12.8774 1.59676 12.9885C1.61192 13.0853 1.66887 13.1705 1.75249 13.2215C1.84849 13.2801 2.01124 13.2632 2.33674 13.2296L5.75075 12.8767C5.85414 12.866 5.90583 12.8606 5.95295 12.8624C5.99929 12.8642 6.03201 12.8686 6.0772 12.879C6.12315 12.8896 6.18092 12.9118 6.29648 12.9564C6.92851 13.1999 7.61519 13.3333 8.33304 13.3333Z";
 function HelpCircleIcon({
@@ -711,6 +770,47 @@ function SidebarIcon({ size = 20, color = colors.primary, strokeWidth = 2 }) {
   ) });
 }
 
+// src/icons/Star/starPath.ts
+var STAR_PATH = "M12.6112 2.09824C12.9186 1.47565 13.0722 1.16436 13.2808 1.0649C13.4623 0.978367 13.6732 0.978367 13.8546 1.0649C14.0632 1.16436 14.2169 1.47565 14.5242 2.09824L17.4398 8.00486C17.5305 8.18866 17.5759 8.28056 17.6422 8.35192C17.7009 8.41509 17.7713 8.46628 17.8495 8.50264C17.9378 8.54371 18.0392 8.55854 18.242 8.58818L24.7637 9.54142C25.4505 9.6418 25.7938 9.69199 25.9528 9.85973C26.091 10.0057 26.156 10.2062 26.1297 10.4055C26.0995 10.6346 25.8509 10.8767 25.3537 11.361L20.6363 15.9557C20.4893 16.0989 20.4157 16.1706 20.3683 16.2558C20.3263 16.3312 20.2993 16.4141 20.2889 16.4998C20.2772 16.5966 20.2945 16.6978 20.3292 16.9001L21.4423 23.39C21.5597 24.0745 21.6184 24.4167 21.5081 24.6198C21.4121 24.7965 21.2415 24.9205 21.0438 24.9571C20.8165 24.9992 20.5092 24.8376 19.8945 24.5144L14.0642 21.4483C13.8826 21.3527 13.7917 21.305 13.696 21.2862C13.6113 21.2696 13.5242 21.2696 13.4394 21.2862C13.3437 21.305 13.2529 21.3527 13.0713 21.4483L7.24094 24.5144C6.62626 24.8376 6.31892 24.9992 6.09167 24.9571C5.89395 24.9205 5.72334 24.7965 5.62736 24.6198C5.51704 24.4167 5.57574 24.0745 5.69314 23.39L6.80622 16.9001C6.84092 16.6978 6.85828 16.5966 6.84653 16.4998C6.83614 16.4141 6.80919 16.3312 6.76718 16.2558C6.71974 16.1706 6.64621 16.0989 6.49916 15.9557L1.78179 11.361C1.28459 10.8767 1.03599 10.6346 1.00574 10.4055C0.979423 10.2062 1.04445 10.0057 1.18271 9.85973C1.34162 9.69199 1.685 9.6418 2.37177 9.54142L8.89346 8.58818C9.09627 8.55854 9.19768 8.54371 9.286 8.50264C9.36419 8.46628 9.43459 8.41509 9.49329 8.35192C9.55958 8.28056 9.60495 8.18866 9.69567 8.00486L12.6112 2.09824Z";
+function StarIcon({
+  active = false,
+  size = 28,
+  height,
+  color,
+  strokeWidth = 2
+}) {
+  const resolvedColor = color ?? (active ? "#E38E5E" : colors.grey150);
+  return /* @__PURE__ */ jsxRuntime.jsx(Svg__default.default, { width: size, height: height ?? size * 26 / 28, viewBox: "0 0 28 26", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
+    Svg.Path,
+    {
+      d: STAR_PATH,
+      fill: active ? resolvedColor : "none",
+      stroke: resolvedColor,
+      strokeWidth,
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
+}
+function StarFilledIcon({
+  size = 28,
+  height,
+  color = "#E38E5E",
+  strokeWidth = 2
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Svg__default.default, { width: size, height: height ?? size * 26 / 28, viewBox: "0 0 28 26", fill: color, children: /* @__PURE__ */ jsxRuntime.jsx(
+    Svg.Path,
+    {
+      d: STAR_PATH,
+      fill: color,
+      stroke: color,
+      strokeWidth,
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
+}
+
 // src/icons/User/userPath.ts
 var USER_PATH = "M15.8334 17.5C15.8334 14.2783 13.2217 11.6667 10 11.6667C6.77836 11.6667 4.16669 14.2783 4.16669 17.5M10 9.16667C8.15907 9.16667 6.66669 7.67428 6.66669 5.83333C6.66669 3.99238 8.15907 2.5 10 2.5C11.841 2.5 13.3334 3.99238 13.3334 5.83333C13.3334 7.67428 11.841 9.16667 10 9.16667Z";
 function UserIcon({ size = 20, color = colors.primary, strokeWidth = 2 }) {
@@ -767,6 +867,7 @@ var icons = {
   clock: ClockIcon,
   facebook: FacebookIcon,
   heart: HeartIcon,
+  globe: GlobeIcon,
   helpCircle: HelpCircleIcon,
   home: HomeIcon,
   instagram: InstagramIcon,
@@ -783,6 +884,8 @@ var icons = {
   settings: SettingsIcon,
   show: ShowIcon,
   sidebar: SidebarIcon,
+  star: StarIcon,
+  starFilled: StarFilledIcon,
   user: UserIcon,
   usersAlt: UsersAltIcon,
   video: VideoIcon
@@ -801,13 +904,15 @@ var iconGroups = {
     "calendar",
     "calendarOutline",
     "heart",
+    "star",
+    "starFilled",
     "minus",
     "plus"
   ],
   objects: ["bag", "building", "clock", "user", "usersAlt", "video"],
   communication: ["mail", "phone"],
   social: ["facebook", "instagram", "linkedin"],
-  interface: ["layoutGrid", "sidebar", "settings", "helpCircle", "logOut"]
+  interface: ["globe", "layoutGrid", "sidebar", "settings", "helpCircle", "logOut"]
 };
 var iconGroupNames = Object.keys(iconGroups);
 function getIconsByGroup(group) {
@@ -1536,7 +1641,223 @@ var styles5 = reactNative.StyleSheet.create({
     flexShrink: 1
   }
 });
-var ICON_SIZE4 = 28;
+var defaultLanguageOptions = [
+  { value: "hy", label: "\u0540\u0561\u0575" },
+  { value: "en", label: "Eng" },
+  { value: "ru", label: "\u0420\u0443\u0441" }
+];
+var CONTROL_WIDTH = 90;
+var CONTROL_HEIGHT = 35;
+var ICON_SIZE4 = 16;
+var LanguageSwitcher = react.forwardRef(
+  function LanguageSwitcher2({
+    options = defaultLanguageOptions,
+    value,
+    defaultValue,
+    onValueChange,
+    open: openProp,
+    defaultOpen = false,
+    onOpenChange,
+    disabled = false,
+    accessibilityLabel = "Language",
+    style,
+    className,
+    hitSlop = 8,
+    ...rest
+  }, forwardedRef) {
+    const wrapperRef = react.useRef(null);
+    const triggerRef = react.useRef(null);
+    const setWrapperRef = react.useMemo(() => mergeRefs(wrapperRef, forwardedRef), [forwardedRef]);
+    const firstValue = options[0]?.value ?? "";
+    const isValueControlled = value !== void 0;
+    const isOpenControlled = openProp !== void 0;
+    const [uncontrolledValue, setUncontrolledValue] = react.useState(defaultValue ?? firstValue);
+    const [uncontrolledOpen, setUncontrolledOpen] = react.useState(defaultOpen);
+    const [triggerHovered, setTriggerHovered] = react.useState(false);
+    const [hoveredValue, setHoveredValue] = react.useState(null);
+    const selectedValue = isValueControlled ? value : uncontrolledValue;
+    const isOpen = isOpenControlled ? openProp : uncontrolledOpen;
+    const selectedOption = options.find((option) => option.value === selectedValue) ?? options[0] ?? null;
+    useApplyWebClassName(wrapperRef, className?.trim() || void 0);
+    const setOpen = react.useCallback(
+      (next) => {
+        if (disabled || next === isOpen) return;
+        if (!isOpenControlled) setUncontrolledOpen(next);
+        onOpenChange?.(next);
+      },
+      [disabled, isOpen, isOpenControlled, onOpenChange]
+    );
+    const closeAndFocusTrigger = react.useCallback(() => {
+      setOpen(false);
+      const node = triggerRef.current;
+      node?.focus?.();
+    }, [setOpen]);
+    react.useEffect(() => {
+      if (reactNative.Platform.OS !== "web" || !isOpen) return;
+      const handlePointerDown = (event) => {
+        const wrapper = wrapperRef.current;
+        const target = event.target;
+        if (wrapper?.contains && target instanceof Node && !wrapper.contains(target)) {
+          setOpen(false);
+        }
+      };
+      const handleKeyDown = (event) => {
+        if (event.key === "Escape") {
+          event.preventDefault();
+          closeAndFocusTrigger();
+        }
+      };
+      document.addEventListener("mousedown", handlePointerDown);
+      document.addEventListener("touchstart", handlePointerDown);
+      document.addEventListener("keydown", handleKeyDown);
+      return () => {
+        document.removeEventListener("mousedown", handlePointerDown);
+        document.removeEventListener("touchstart", handlePointerDown);
+        document.removeEventListener("keydown", handleKeyDown);
+      };
+    }, [closeAndFocusTrigger, isOpen, setOpen]);
+    const selectLanguage = (nextValue) => {
+      if (nextValue !== selectedValue) {
+        if (!isValueControlled) setUncontrolledValue(nextValue);
+        onValueChange?.(nextValue);
+      }
+      closeAndFocusTrigger();
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      reactNative.View,
+      {
+        ...rest,
+        ref: setWrapperRef,
+        style: [styles6.wrapper, isOpen && styles6.wrapperOpen, disabled && styles6.disabled, style],
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            reactNative.Pressable,
+            {
+              ref: triggerRef,
+              onPress: () => setOpen(!isOpen),
+              disabled: disabled || options.length === 0,
+              hitSlop,
+              accessibilityRole: "button",
+              accessibilityLabel,
+              accessibilityState: { disabled, expanded: isOpen },
+              onHoverIn: () => setTriggerHovered(true),
+              onHoverOut: () => setTriggerHovered(false),
+              style: ({ pressed }) => [
+                styles6.trigger,
+                (triggerHovered || pressed || isOpen) && styles6.triggerActive
+              ],
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(GlobeIcon, { size: ICON_SIZE4, color: colors.white, strokeWidth: 2 }),
+                /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles6.triggerLabel, numberOfLines: 1, children: selectedOption?.label ?? "" }),
+                /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles6.chevron, isOpen && styles6.chevronOpen], children: /* @__PURE__ */ jsxRuntime.jsx(ChevronDownIcon, { size: ICON_SIZE4, color: colors.white, strokeWidth: 2 }) })
+              ]
+            }
+          ),
+          isOpen && options.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles6.menu, accessibilityRole: "menu", children: options.map((option) => {
+            const selected = option.value === selectedValue;
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              reactNative.Pressable,
+              {
+                onPress: () => selectLanguage(option.value),
+                accessibilityRole: "menuitem",
+                accessibilityLabel: option.label,
+                accessibilityState: { selected },
+                onHoverIn: () => setHoveredValue(option.value),
+                onHoverOut: () => setHoveredValue(null),
+                style: ({ pressed }) => [
+                  styles6.item,
+                  selected ? styles6.itemSelected : (hoveredValue === option.value || pressed) && styles6.itemHovered
+                ],
+                children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles6.itemLabel, selected && styles6.itemLabelSelected], children: option.label })
+              },
+              option.value
+            );
+          }) }) : null
+        ]
+      }
+    );
+  }
+);
+var styles6 = reactNative.StyleSheet.create({
+  wrapper: {
+    position: "relative",
+    width: CONTROL_WIDTH,
+    alignSelf: "flex-start"
+  },
+  wrapperOpen: {
+    zIndex: 20
+  },
+  disabled: {
+    opacity: 0.6
+  },
+  trigger: {
+    width: CONTROL_WIDTH,
+    height: CONTROL_HEIGHT,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    padding: 8,
+    borderRadius: 12,
+    backgroundColor: "transparent"
+  },
+  triggerActive: {
+    backgroundColor: colors.grey700
+  },
+  triggerLabel: {
+    ...languageSwitcherTypography,
+    ...reactNative.Platform.select({ web: { fontFamily: `${fonts.sans}, sans-serif` } }),
+    minWidth: 0,
+    flex: 1,
+    color: colors.white
+  },
+  chevron: {
+    width: ICON_SIZE4,
+    height: ICON_SIZE4,
+    flexShrink: 0,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  chevronOpen: {
+    transform: [{ rotate: "180deg" }]
+  },
+  menu: {
+    position: "absolute",
+    top: CONTROL_HEIGHT + 8,
+    left: 0,
+    width: CONTROL_WIDTH,
+    padding: 8,
+    gap: 8,
+    borderRadius: 12,
+    backgroundColor: colors.grey700,
+    ...reactNative.Platform.select({
+      web: { boxShadow: `0 8px 24px ${colors.black}73` },
+      default: { elevation: 8 }
+    })
+  },
+  item: {
+    height: CONTROL_HEIGHT,
+    alignItems: "center",
+    justifyContent: "center",
+    paddingVertical: 8,
+    paddingHorizontal: 12,
+    borderRadius: 8
+  },
+  itemHovered: {
+    backgroundColor: colors.whiteAlpha5
+  },
+  itemSelected: {
+    backgroundColor: colors.primaryMuted
+  },
+  itemLabel: {
+    ...languageSwitcherTypography,
+    ...reactNative.Platform.select({ web: { fontFamily: `${fonts.sans}, sans-serif` } }),
+    color: colors.white
+  },
+  itemLabelSelected: {
+    color: colors.primary
+  }
+});
+var ICON_SIZE5 = 28;
 var StatCard = react.forwardRef(function StatCard2({ label, icon: Icon2, style, className, accessibilityLabel, ...rest }, forwardedRef) {
   const containerRef = react.useRef(null);
   const resolvedClassName = className?.trim() || void 0;
@@ -1547,17 +1868,17 @@ var StatCard = react.forwardRef(function StatCard2({ label, icon: Icon2, style,
     {
       ...rest,
       ref: setContainerRef,
-      style: [styles6.base, style],
+      style: [styles7.base, style],
       accessibilityRole: "text",
       accessibilityLabel: accessibilityLabel ?? label,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Icon2, { size: ICON_SIZE4, color: colors.white }),
-        /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles6.label, children: label })
+        /* @__PURE__ */ jsxRuntime.jsx(Icon2, { size: ICON_SIZE5, color: colors.white }),
+        /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles7.label, children: label })
       ]
     }
   );
 });
-var styles6 = reactNative.StyleSheet.create({
+var styles7 = reactNative.StyleSheet.create({
   base: {
     width: 204.5,
     minHeight: 114,
@@ -1643,7 +1964,7 @@ var Button = react.forwardRef(
     useApplyWebClassName(textRef, textClassName);
     const iconNode = customIcon ?? /* @__PURE__ */ jsxRuntime.jsx(ArrowRightIcon, { size: metrics.iconSize, color: preset.iconColor });
     const containerStyle = [
-      styles7.base,
+      styles8.base,
       {
         minHeight: metrics.minHeight,
         borderRadius: metrics.borderRadius,
@@ -1654,15 +1975,15 @@ var Button = react.forwardRef(
         paddingRight: hasIcon ? metrics.paddingRightWithIcon : metrics.paddingRight,
         gap: hasIcon ? metrics.gap : 0
       },
-      disabled && styles7.disabled,
+      disabled && styles8.disabled,
       style
     ];
     const labelStyle = [
-      styles7.label,
+      styles8.label,
       metrics.text,
       { color: preset.textColor },
-      reactNative.Platform.OS === "android" ? styles7.labelAndroid : null,
-      !hasIcon && styles7.labelCentered,
+      reactNative.Platform.OS === "android" ? styles8.labelAndroid : null,
+      !hasIcon && styles8.labelCentered,
       textStyle
     ];
     return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -1683,7 +2004,7 @@ var Button = react.forwardRef(
             reactNative.View,
             {
               style: [
-                styles7.iconContainer,
+                styles8.iconContainer,
                 {
                   width: metrics.iconContainerSize,
                   height: metrics.iconContainerSize,
@@ -1699,7 +2020,7 @@ var Button = react.forwardRef(
     );
   }
 );
-var styles7 = reactNative.StyleSheet.create({
+var styles8 = reactNative.StyleSheet.create({
   base: {
     flexDirection: "row",
     alignItems: "center",
@@ -1777,13 +2098,13 @@ var Checkbox = react.forwardRef(function Checkbox2({
       accessibilityRole: "checkbox",
       accessibilityLabel: resolvedAccessibilityLabel,
       accessibilityState: { checked: isActive, disabled },
-      style: [styles8.root, disabled && styles8.disabled, style],
+      style: [styles9.root, disabled && styles9.disabled, style],
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           reactNative.View,
           {
             style: [
-              styles8.box,
+              styles9.box,
               {
                 backgroundColor: chrome.backgroundColor,
                 borderColor: chrome.borderColor
@@ -1792,12 +2113,12 @@ var Checkbox = react.forwardRef(function Checkbox2({
             children: isActive ? /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, { size: CHECK_SIZE, color: colors.primary, strokeWidth: CHECK_STROKE }) : null
           }
         ),
-        labelContent != null && labelContent !== false ? typeof labelContent === "string" || typeof labelContent === "number" ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles8.label, labelStyle], children: labelContent }) : labelContent : null
+        labelContent != null && labelContent !== false ? typeof labelContent === "string" || typeof labelContent === "number" ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles9.label, labelStyle], children: labelContent }) : labelContent : null
       ]
     }
   );
 });
-var styles8 = reactNative.StyleSheet.create({
+var styles9 = reactNative.StyleSheet.create({
   root: {
     flexDirection: "row",
     alignItems: "center",
@@ -1895,7 +2216,7 @@ var DEFAULT_WIDTH = 380;
 var TRIGGER_HEIGHT = 44;
 var TRIGGER_RADIUS = 60;
 var MENU_RADIUS2 = 20;
-var ICON_SIZE5 = 20;
+var ICON_SIZE6 = 20;
 var NAV_ICON_SIZE = 20;
 var DAY_CELL_HEIGHT = 44;
 var DAY_CIRCLE_SIZE = 44;
@@ -2047,9 +2368,9 @@ var DatePicker = react.forwardRef(
       {
         ...rest,
         ref: setRootRef,
-        style: [styles9.root, isOpen && styles9.rootOpen, disabled && styles9.disabled, style],
+        style: [styles10.root, isOpen && styles10.rootOpen, disabled && styles10.disabled, style],
         accessibilityState: { disabled, expanded: isOpen },
-        children: /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [styles9.triggerWrap, isOpen && styles9.triggerWrapOpen], children: [
+        children: /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [styles10.triggerWrap, isOpen && styles10.triggerWrapOpen], children: [
           /* @__PURE__ */ jsxRuntime.jsxs(
             reactNative.Pressable,
             {
@@ -2060,17 +2381,17 @@ var DatePicker = react.forwardRef(
               accessibilityLabel: resolvedAccessibilityLabel,
               accessibilityState: { disabled, expanded: isOpen },
               style: [
-                styles9.trigger,
+                styles10.trigger,
                 { borderColor: triggerBorderColor, backgroundColor: colors.grey700 }
               ],
               children: [
-                /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles9.triggerText, { color: triggerTextColor }], numberOfLines: 1, children: triggerLabel }),
-                /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles9.iconSlot, children: /* @__PURE__ */ jsxRuntime.jsx(CalendarOutlineIcon, { size: ICON_SIZE5, color: colors.grey100 }) })
+                /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles10.triggerText, { color: triggerTextColor }], numberOfLines: 1, children: triggerLabel }),
+                /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles10.iconSlot, children: /* @__PURE__ */ jsxRuntime.jsx(CalendarOutlineIcon, { size: ICON_SIZE6, color: colors.grey100 }) })
               ]
             }
           ),
-          isOpen ? /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles9.menu, children: [
-            /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles9.calendarHeader, children: [
+          isOpen ? /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles10.menu, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles10.calendarHeader, children: [
               /* @__PURE__ */ jsxRuntime.jsx(
                 reactNative.Pressable,
                 {
@@ -2078,11 +2399,11 @@ var DatePicker = react.forwardRef(
                   hitSlop: 8,
                   accessibilityRole: "button",
                   accessibilityLabel: "Previous month",
-                  style: styles9.navButton,
+                  style: styles10.navButton,
                   children: /* @__PURE__ */ jsxRuntime.jsx(ChevronLeftIcon, { size: NAV_ICON_SIZE, color: colors.white })
                 }
               ),
-              /* @__PURE__ */ jsxRuntime.jsxs(reactNative.Text, { style: styles9.monthHeading, children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(reactNative.Text, { style: styles10.monthHeading, children: [
                 monthNames[visibleMonth.getMonth()],
                 " ",
                 visibleMonth.getFullYear()
@@ -2094,13 +2415,13 @@ var DatePicker = react.forwardRef(
                   hitSlop: 8,
                   accessibilityRole: "button",
                   accessibilityLabel: "Next month",
-                  style: styles9.navButton,
-                  children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles9.navIconMirror, children: /* @__PURE__ */ jsxRuntime.jsx(ChevronLeftIcon, { size: NAV_ICON_SIZE, color: colors.white }) })
+                  style: styles10.navButton,
+                  children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles10.navIconMirror, children: /* @__PURE__ */ jsxRuntime.jsx(ChevronLeftIcon, { size: NAV_ICON_SIZE, color: colors.white }) })
                 }
               )
             ] }),
             /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { children: [
-              /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles9.weekdayRow, children: weekdayLabels.map((weekdayLabel, index) => /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles9.dayCellWrap, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles9.weekdayText, children: weekdayLabel }) }, `${weekdayLabel}-${index}`)) }),
+              /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles10.weekdayRow, children: weekdayLabels.map((weekdayLabel, index) => /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles10.dayCellWrap, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles10.weekdayText, children: weekdayLabel }) }, `${weekdayLabel}-${index}`)) }),
               weeks.map((week, weekIndex) => {
                 let rangeHighlightStyle = null;
                 if (isRange && rangeValue.start && rangeValue.end) {
@@ -2137,13 +2458,13 @@ var DatePicker = react.forwardRef(
                 return /* @__PURE__ */ jsxRuntime.jsxs(
                   reactNative.View,
                   {
-                    style: [styles9.weekRow, weekIndex > 0 && styles9.weekRowSpaced],
+                    style: [styles10.weekRow, weekIndex > 0 && styles10.weekRowSpaced],
                     children: [
                       rangeHighlightStyle ? /* @__PURE__ */ jsxRuntime.jsx(
                         reactNative.View,
                         {
                           pointerEvents: "none",
-                          style: [styles9.rangeHighlight, rangeHighlightStyle]
+                          style: [styles10.rangeHighlight, rangeHighlightStyle]
                         }
                       ) : null,
                       week.map((day, dayIndex) => {
@@ -2166,7 +2487,7 @@ var DatePicker = react.forwardRef(
                             onHoverOut: () => setHoveredDayKey((current) => current === dayKey ? null : current),
                             onPressIn: () => setHoveredDayKey(dayKey),
                             onPressOut: () => setHoveredDayKey((current) => current === dayKey ? null : current),
-                            style: styles9.dayCellWrap,
+                            style: styles10.dayCellWrap,
                             accessibilityRole: "button",
                             accessibilityLabel: formatValue(day),
                             accessibilityState: {
@@ -2178,14 +2499,14 @@ var DatePicker = react.forwardRef(
                                 reactNative.View,
                                 {
                                   style: [
-                                    styles9.dayCircle,
-                                    isSelectedEndpoint && styles9.dayCircleSelected,
-                                    isHovered && styles9.dayCircleHovered
+                                    styles10.dayCircle,
+                                    isSelectedEndpoint && styles10.dayCircleSelected,
+                                    isHovered && styles10.dayCircleHovered
                                   ],
-                                  children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles9.dayText, { color: dayTextColor }], children: day.getDate() })
+                                  children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles10.dayText, { color: dayTextColor }], children: day.getDate() })
                                 }
                               ),
-                              isToday && !isSelectedEndpoint ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles9.todayDot }) : null
+                              isToday && !isSelectedEndpoint ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles10.todayDot }) : null
                             ]
                           },
                           dayIndex
@@ -2203,7 +2524,7 @@ var DatePicker = react.forwardRef(
     );
   }
 );
-var styles9 = reactNative.StyleSheet.create({
+var styles10 = reactNative.StyleSheet.create({
   root: {
     width: DEFAULT_WIDTH,
     gap: 8,
@@ -2239,8 +2560,8 @@ var styles9 = reactNative.StyleSheet.create({
     minWidth: 0
   },
   iconSlot: {
-    width: ICON_SIZE5,
-    height: ICON_SIZE5,
+    width: ICON_SIZE6,
+    height: ICON_SIZE6,
     alignItems: "center",
     justifyContent: "center",
     flexShrink: 0
@@ -2463,13 +2784,13 @@ var Input = react.forwardRef(function Input2({
   const rightIconNode = rightIcon ?? /* @__PURE__ */ jsxRuntime.jsx(ShowIcon, { size: metrics.iconSize, color: chrome.rightIconColor });
   useApplyWebClassName(rootRef, className);
   useApplyWebClassName(inputRef, inputClassName);
-  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { ref: rootRef, style: [styles10.root, disabled && styles10.disabled, style], children: [
-    showLabel && label ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles10.label, { color: chrome.labelColor }], children: label }) : null,
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { ref: rootRef, style: [styles11.root, disabled && styles11.disabled, style], children: [
+    showLabel && label ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles11.label, { color: chrome.labelColor }], children: label }) : null,
     /* @__PURE__ */ jsxRuntime.jsxs(
       reactNative.View,
       {
         style: [
-          styles10.field,
+          styles11.field,
           {
             height: metrics.height,
             borderRadius: metrics.borderRadius,
@@ -2484,7 +2805,7 @@ var Input = react.forwardRef(function Input2({
           fieldStyle
         ],
         children: [
-          hasLeftIcon ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles10.iconSlot, { width: metrics.iconSize, height: metrics.iconSize }], children: leftIconNode }) : null,
+          hasLeftIcon ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles11.iconSlot, { width: metrics.iconSize, height: metrics.iconSize }], children: leftIconNode }) : null,
           /* @__PURE__ */ jsxRuntime.jsx(
             reactNative.TextInput,
             {
@@ -2508,11 +2829,11 @@ var Input = react.forwardRef(function Input2({
                 onBlur?.(event);
               },
               style: [
-                styles10.input,
+                styles11.input,
                 metrics.text,
                 { color: chrome.textColor },
-                reactNative.Platform.OS === "web" ? styles10.inputWeb : null,
-                reactNative.Platform.OS === "android" ? styles10.inputAndroid : null,
+                reactNative.Platform.OS === "web" ? styles11.inputWeb : null,
+                reactNative.Platform.OS === "android" ? styles11.inputAndroid : null,
                 inputStyle
               ],
               accessibilityLabel: resolvedAccessibilityLabel,
@@ -2524,20 +2845,20 @@ var Input = react.forwardRef(function Input2({
             {
               onPress: onRightIconPress,
               disabled,
-              style: [styles10.iconSlot, { width: metrics.iconSize, height: metrics.iconSize }],
+              style: [styles11.iconSlot, { width: metrics.iconSize, height: metrics.iconSize }],
               accessibilityRole: "button",
               accessibilityLabel: rightIconAccessibilityLabel,
               hitSlop: 8,
               children: rightIconNode
             }
-          ) : /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles10.iconSlot, { width: metrics.iconSize, height: metrics.iconSize }], children: rightIconNode }) : null
+          ) : /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles11.iconSlot, { width: metrics.iconSize, height: metrics.iconSize }], children: rightIconNode }) : null
         ]
       }
     ),
-    showHint && hint ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles10.hint, { color: chrome.hintColor }], children: hint }) : null
+    showHint && hint ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles11.hint, { color: chrome.hintColor }], children: hint }) : null
   ] });
 });
-var styles10 = reactNative.StyleSheet.create({
+var styles11 = reactNative.StyleSheet.create({
   root: {
     width: DEFAULT_WIDTH2,
     gap: 8,
@@ -2580,7 +2901,7 @@ var TRIGGER_RADIUS2 = 60;
 var MENU_RADIUS3 = 24;
 var MENU_MAX_LIST_HEIGHT = 248;
 var ITEM_RADIUS2 = 12;
-var ICON_SIZE6 = 20;
+var ICON_SIZE7 = 20;
 var CHIP_GAP = 6;
 var FALLBACK_ELLIPSIS_WIDTH = 20;
 function itemBackground(state) {
@@ -2653,25 +2974,25 @@ function MultiValueChips({ options, disabled, onRemove }) {
     const next = Math.ceil(event.nativeEvent.layout.width);
     setEllipsisWidth((current) => current === next ? current : next);
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles11.multiValueRoot, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { pointerEvents: "none", style: styles11.measureRow, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles12.multiValueRoot, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { pointerEvents: "none", style: styles12.measureRow, children: [
       options.map((option) => /* @__PURE__ */ jsxRuntime.jsxs(
         reactNative.View,
         {
-          style: styles11.chip,
+          style: styles12.chip,
           onLayout: (event) => handleChipLayout(option.value, event),
           children: [
-            /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles11.chipLabel, numberOfLines: 1, children: option.label }),
-            /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles11.chipRemove, children: "\xD7" })
+            /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles12.chipLabel, numberOfLines: 1, children: option.label }),
+            /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles12.chipRemove, children: "\xD7" })
           ]
         },
         `measure-${option.value}`
       )),
-      /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles11.ellipsis, onLayout: handleEllipsisLayout, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles11.ellipsisText, children: "..." }) })
+      /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles12.ellipsis, onLayout: handleEllipsisLayout, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles12.ellipsisText, children: "..." }) })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles11.chipsRow, onLayout: handleContainerLayout, children: [
-      visible.map((option) => /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles11.chip, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles11.chipLabel, numberOfLines: 1, children: option.label }),
+    /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles12.chipsRow, onLayout: handleContainerLayout, children: [
+      visible.map((option) => /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles12.chip, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles12.chipLabel, numberOfLines: 1, children: option.label }),
         /* @__PURE__ */ jsxRuntime.jsx(
           reactNative.Pressable,
           {
@@ -2683,11 +3004,11 @@ function MultiValueChips({ options, disabled, onRemove }) {
             hitSlop: 6,
             accessibilityRole: "button",
             accessibilityLabel: `Remove ${option.label}`,
-            children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles11.chipRemove, children: "\xD7" })
+            children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles12.chipRemove, children: "\xD7" })
           }
         )
       ] }, option.value)),
-      hasOverflow ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles11.ellipsis, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles11.ellipsisText, children: "..." }) }) : null
+      hasOverflow ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles12.ellipsis, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles12.ellipsisText, children: "..." }) }) : null
     ] })
   ] });
 }
@@ -2898,7 +3219,7 @@ var Select = react.forwardRef(
     const leftIconNode = leftIcon ?? /* @__PURE__ */ jsxRuntime.jsx(
       UserIcon,
       {
-        size: ICON_SIZE6,
+        size: ICON_SIZE7,
         color: error ? colors.red : isOpen ? colors.primary : colors.grey100
       }
     );
@@ -2914,11 +3235,11 @@ var Select = react.forwardRef(
       {
         ...rest,
         ref: setRootRef,
-        style: [styles11.root, isOpen && styles11.rootOpen, disabled && styles11.disabled, style],
+        style: [styles12.root, isOpen && styles12.rootOpen, disabled && styles12.disabled, style],
         accessibilityState: { disabled, expanded: isOpen },
         children: [
-          showLabel && label ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles11.label, { color: labelColor }], children: label }) : null,
-          /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [styles11.triggerWrap, isOpen && styles11.triggerWrapOpen], children: [
+          showLabel && label ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles12.label, { color: labelColor }], children: label }) : null,
+          /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [styles12.triggerWrap, isOpen && styles12.triggerWrapOpen], children: [
             /* @__PURE__ */ jsxRuntime.jsxs(
               reactNative.Pressable,
               {
@@ -2929,29 +3250,29 @@ var Select = react.forwardRef(
                 accessibilityLabel: resolvedAccessibilityLabel,
                 accessibilityState: { disabled, expanded: isOpen },
                 style: [
-                  styles11.trigger,
+                  styles12.trigger,
                   {
                     borderColor: triggerBorderColor,
                     backgroundColor: colors.grey700
                   }
                 ],
                 children: [
-                  hasLeftIcon ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles11.iconSlot, children: leftIconNode }) : null,
-                  /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles11.triggerContent, children: multiple && hasValue ? /* @__PURE__ */ jsxRuntime.jsx(
+                  hasLeftIcon ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles12.iconSlot, children: leftIconNode }) : null,
+                  /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles12.triggerContent, children: multiple && hasValue ? /* @__PURE__ */ jsxRuntime.jsx(
                     MultiValueChips,
                     {
                       options: selectedOptions,
                       disabled,
                       onRemove: handleRemoveChip
                     }
-                  ) : /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles11.triggerText, { color: triggerTextColor }], numberOfLines: 1, children: multiple ? placeholder : singleLabel }) }),
-                  /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles11.iconSlot, isOpen && styles11.chevronOpen], children: /* @__PURE__ */ jsxRuntime.jsx(ChevronDownIcon, { size: ICON_SIZE6, color: isOpen ? colors.primary : colors.grey100 }) })
+                  ) : /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles12.triggerText, { color: triggerTextColor }], numberOfLines: 1, children: multiple ? placeholder : singleLabel }) }),
+                  /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles12.iconSlot, isOpen && styles12.chevronOpen], children: /* @__PURE__ */ jsxRuntime.jsx(ChevronDownIcon, { size: ICON_SIZE7, color: isOpen ? colors.primary : colors.grey100 }) })
                 ]
               }
             ),
-            isOpen ? /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles11.menu, children: [
-              showSearch ? /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles11.searchField, children: [
-                /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles11.iconSlot, children: /* @__PURE__ */ jsxRuntime.jsx(SearchIcon, { size: ICON_SIZE6, color: colors.grey100 }) }),
+            isOpen ? /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles12.menu, children: [
+              showSearch ? /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles12.searchField, children: [
+                /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles12.iconSlot, children: /* @__PURE__ */ jsxRuntime.jsx(SearchIcon, { size: ICON_SIZE7, color: colors.grey100 }) }),
                 /* @__PURE__ */ jsxRuntime.jsx(
                   reactNative.TextInput,
                   {
@@ -2962,9 +3283,9 @@ var Select = react.forwardRef(
                     placeholder: searchPlaceholder,
                     placeholderTextColor: colors.grey100,
                     style: [
-                      styles11.searchInput,
-                      reactNative.Platform.OS === "web" ? styles11.searchInputWeb : null,
-                      reactNative.Platform.OS === "android" ? styles11.searchInputAndroid : null
+                      styles12.searchInput,
+                      reactNative.Platform.OS === "web" ? styles12.searchInputWeb : null,
+                      reactNative.Platform.OS === "android" ? styles12.searchInputAndroid : null
                     ],
                     accessibilityLabel: searchPlaceholder
                   }
@@ -2973,12 +3294,12 @@ var Select = react.forwardRef(
               /* @__PURE__ */ jsxRuntime.jsxs(
                 reactNative.ScrollView,
                 {
-                  style: styles11.optionList,
-                  contentContainerStyle: styles11.optionListContent,
+                  style: styles12.optionList,
+                  contentContainerStyle: styles12.optionListContent,
                   keyboardShouldPersistTaps: "handled",
                   showsVerticalScrollIndicator: false,
                   children: [
-                    loading ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles11.statusRow, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles11.statusText, children: "Loading..." }) }) : filteredOptions.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles11.statusRow, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles11.statusText, children: emptyText }) }) : null,
+                    loading ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles12.statusRow, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles12.statusText, children: "Loading..." }) }) : filteredOptions.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles12.statusRow, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles12.statusText, children: emptyText }) }) : null,
                     !loading && filteredOptions.map((option) => {
                       const isSelected = selectedValues.includes(option.value);
                       const isHovered = hoveredValue === option.value;
@@ -2995,14 +3316,14 @@ var Select = react.forwardRef(
                           accessibilityRole: multiple ? "checkbox" : "button",
                           accessibilityState: { selected: isSelected, checked: isSelected, disabled },
                           style: [
-                            styles11.item,
+                            styles12.item,
                             {
                               backgroundColor: itemBackground(visualState)
                             }
                           ],
                           children: [
-                            multiple ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { pointerEvents: "none", style: styles11.itemCheckbox, children: /* @__PURE__ */ jsxRuntime.jsx(Checkbox, { value: isSelected, variant: "light" }) }) : null,
-                            /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles11.itemLabel, numberOfLines: 1, children: option.label })
+                            multiple ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { pointerEvents: "none", style: styles12.itemCheckbox, children: /* @__PURE__ */ jsxRuntime.jsx(Checkbox, { value: isSelected, variant: "light" }) }) : null,
+                            /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles12.itemLabel, numberOfLines: 1, children: option.label })
                           ]
                         },
                         option.value
@@ -3013,13 +3334,13 @@ var Select = react.forwardRef(
               )
             ] }) : null
           ] }),
-          showHint && hint ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles11.hint, { color: hintColor }], children: hint }) : null
+          showHint && hint ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles12.hint, { color: hintColor }], children: hint }) : null
         ]
       }
     );
   }
 );
-var styles11 = reactNative.StyleSheet.create({
+var styles12 = reactNative.StyleSheet.create({
   root: {
     width: DEFAULT_WIDTH3,
     gap: 8,
@@ -3109,8 +3430,8 @@ var styles11 = reactNative.StyleSheet.create({
     lineHeight: 16
   },
   iconSlot: {
-    width: ICON_SIZE6,
-    height: ICON_SIZE6,
+    width: ICON_SIZE7,
+    height: ICON_SIZE7,
     alignItems: "center",
     justifyContent: "center",
     flexShrink: 0
@@ -3281,13 +3602,13 @@ var Textarea = react.forwardRef(function Textarea2({
   const resolvedAccessibilityLabel = accessibilityLabel ?? (showLabel ? void 0 : label);
   useApplyWebClassName(rootRef, className);
   useApplyWebClassName(inputRef, inputClassName);
-  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { ref: rootRef, style: [styles12.root, disabled && styles12.disabled, style], children: [
-    showLabel && label ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles12.label, { color: chrome.labelColor }], children: label }) : null,
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { ref: rootRef, style: [styles13.root, disabled && styles13.disabled, style], children: [
+    showLabel && label ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles13.label, { color: chrome.labelColor }], children: label }) : null,
     /* @__PURE__ */ jsxRuntime.jsx(
       reactNative.View,
       {
         style: [
-          styles12.field,
+          styles13.field,
           {
             borderColor: chrome.borderColor,
             backgroundColor: chrome.backgroundColor
@@ -3319,11 +3640,11 @@ var Textarea = react.forwardRef(function Textarea2({
               onBlur?.(event);
             },
             style: [
-              styles12.input,
+              styles13.input,
               textareaTypography.field,
               { color: chrome.textColor },
-              reactNative.Platform.OS === "web" ? styles12.inputWeb : null,
-              reactNative.Platform.OS === "android" ? styles12.inputAndroid : null,
+              reactNative.Platform.OS === "web" ? styles13.inputWeb : null,
+              reactNative.Platform.OS === "android" ? styles13.inputAndroid : null,
               inputStyle
             ],
             accessibilityLabel: resolvedAccessibilityLabel,
@@ -3332,10 +3653,10 @@ var Textarea = react.forwardRef(function Textarea2({
         )
       }
     ),
-    showHint && hint ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles12.hint, { color: chrome.hintColor }], children: hint }) : null
+    showHint && hint ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles13.hint, { color: chrome.hintColor }], children: hint }) : null
   ] });
 });
-var styles12 = reactNative.StyleSheet.create({
+var styles13 = reactNative.StyleSheet.create({
   root: {
     width: DEFAULT_WIDTH4,
     gap: 8,
@@ -3435,13 +3756,13 @@ var Toggle = react.forwardRef(function Toggle2({
       accessibilityRole: "switch",
       accessibilityLabel: resolvedAccessibilityLabel,
       accessibilityState: { checked: isActive, disabled },
-      style: [styles13.pressable, disabled && styles13.disabled, style],
+      style: [styles14.pressable, disabled && styles14.disabled, style],
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           reactNative.Animated.View,
           {
             style: [
-              styles13.track,
+              styles14.track,
               {
                 backgroundColor: trackBackgroundColor
               }
@@ -3450,7 +3771,7 @@ var Toggle = react.forwardRef(function Toggle2({
               reactNative.Animated.View,
               {
                 style: [
-                  styles13.thumb,
+                  styles14.thumb,
                   {
                     transform: [{ translateX: thumbTranslateX }]
                   }
@@ -3459,12 +3780,12 @@ var Toggle = react.forwardRef(function Toggle2({
             )
           }
         ),
-        labelContent != null && labelContent !== false ? typeof labelContent === "string" || typeof labelContent === "number" ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles13.label, labelStyle], children: labelContent }) : labelContent : null
+        labelContent != null && labelContent !== false ? typeof labelContent === "string" || typeof labelContent === "number" ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles14.label, labelStyle], children: labelContent }) : labelContent : null
       ]
     }
   );
 });
-var styles13 = reactNative.StyleSheet.create({
+var styles14 = reactNative.StyleSheet.create({
   pressable: {
     flexDirection: "row",
     alignItems: "center",
@@ -3492,6 +3813,272 @@ var styles13 = reactNative.StyleSheet.create({
     color: colors.white
   }
 });
+var STAR_COUNT = 5;
+var BASE_ITEM_SIZE = 16;
+var ICON_WIDTH_RATIO = 12.57 / BASE_ITEM_SIZE;
+var ICON_HEIGHT_RATIO = 11.98 / BASE_ITEM_SIZE;
+var STAR_GAP_RATIO = 2 / BASE_ITEM_SIZE;
+function clamp2(value) {
+  return Math.max(0, Math.min(value, STAR_COUNT));
+}
+var RatingInput = react.forwardRef(
+  function RatingInput2({
+    value,
+    defaultValue = 0,
+    onValueChange,
+    showValue = true,
+    precision = 1,
+    size = 20,
+    starGap,
+    readOnly = false,
+    disabled = false,
+    style,
+    valueStyle,
+    className,
+    hitSlop = 6,
+    accessibilityLabel,
+    ...rest
+  }, forwardedRef) {
+    const containerRef = react.useRef(null);
+    const setContainerRef = react.useMemo(() => mergeRefs(containerRef, forwardedRef), [forwardedRef]);
+    const isControlled = value !== void 0;
+    const [uncontrolledValue, setUncontrolledValue] = react.useState(() => clamp2(defaultValue));
+    const selectedValue = clamp2(isControlled ? value : uncontrolledValue);
+    const selectedStarCount = Math.round(selectedValue);
+    const iconWidth = size * ICON_WIDTH_RATIO;
+    const iconHeight = size * ICON_HEIGHT_RATIO;
+    const resolvedStarGap = starGap ?? size * STAR_GAP_RATIO;
+    const resolvedAccessibilityLabel = accessibilityLabel ?? (readOnly ? `${selectedValue} out of ${STAR_COUNT} stars` : "Rating");
+    useApplyWebClassName(containerRef, className);
+    const selectValue = (nextValue) => {
+      if (disabled || nextValue === selectedValue) return;
+      if (!isControlled) setUncontrolledValue(nextValue);
+      onValueChange?.(nextValue);
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      reactNative.View,
+      {
+        ...rest,
+        ref: setContainerRef,
+        style: [styles15.root, disabled && styles15.disabled, style],
+        children: [
+          showValue ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { numberOfLines: 1, style: [styles15.value, valueStyle], children: selectedValue.toFixed(precision) }) : null,
+          /* @__PURE__ */ jsxRuntime.jsx(
+            reactNative.View,
+            {
+              accessibilityRole: readOnly ? "image" : "radiogroup",
+              accessibilityLabel: resolvedAccessibilityLabel,
+              accessibilityState: { disabled },
+              style: [styles15.stars, { gap: resolvedStarGap }],
+              children: Array.from({ length: STAR_COUNT }, (_, index) => {
+                const starValue = index + 1;
+                const isSelected = starValue <= selectedStarCount;
+                const icon = isSelected ? /* @__PURE__ */ jsxRuntime.jsx(StarFilledIcon, { size: iconWidth, height: iconHeight }) : /* @__PURE__ */ jsxRuntime.jsx(StarIcon, { size: iconWidth, height: iconHeight });
+                const itemStyle = [styles15.starItem, { width: size, height: size }];
+                if (readOnly) {
+                  return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: itemStyle, children: icon }, starValue);
+                }
+                return /* @__PURE__ */ jsxRuntime.jsx(
+                  reactNative.Pressable,
+                  {
+                    disabled,
+                    hitSlop,
+                    onPress: () => selectValue(starValue),
+                    accessibilityRole: "radio",
+                    accessibilityLabel: `${starValue} star${starValue === 1 ? "" : "s"}`,
+                    accessibilityState: { checked: isSelected, disabled },
+                    style: itemStyle,
+                    children: icon
+                  },
+                  starValue
+                );
+              })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+var styles15 = reactNative.StyleSheet.create({
+  root: {
+    flexDirection: "row",
+    alignItems: "center",
+    flexWrap: "nowrap",
+    alignSelf: "flex-start",
+    gap: 16
+  },
+  stars: {
+    flexDirection: "row",
+    alignItems: "center"
+  },
+  starItem: {
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  value: {
+    ...ratingTypography,
+    color: colors.white
+  },
+  disabled: {
+    opacity: 0.5
+  }
+});
+var CARD_WIDTH = 370;
+var CARD_MIN_HEIGHT = 173;
+var AVATAR_SIZE = 44;
+var CommentCard = react.forwardRef(
+  function CommentCard2({
+    userName,
+    date,
+    commentText,
+    rating,
+    imageUrl,
+    maxCommentLines = 3,
+    maxCommentLength = 111,
+    readMoreLabel = "\u0534\u056B\u057F\u0565\u056C \u0561\u057E\u0565\u056C\u056B\u0576",
+    readLessLabel = "\u0553\u0561\u056F\u0565\u056C",
+    onExpandedChange,
+    style,
+    commentStyle,
+    className,
+    ...rest
+  }, forwardedRef) {
+    const containerRef = react.useRef(null);
+    const setContainerRef = react.useMemo(() => mergeRefs(containerRef, forwardedRef), [forwardedRef]);
+    const [imageFailed, setImageFailed] = react.useState(false);
+    const [expanded, setExpanded] = react.useState(false);
+    const [actionHovered, setActionHovered] = react.useState(false);
+    const hasImage = Boolean(imageUrl) && !imageFailed;
+    const shouldShowAction = Array.from(commentText).length >= maxCommentLength;
+    useApplyWebClassName(containerRef, className);
+    react.useEffect(() => {
+      setImageFailed(false);
+    }, [imageUrl]);
+    react.useEffect(() => {
+      setExpanded(false);
+      setActionHovered(false);
+    }, [commentText, maxCommentLength, maxCommentLines]);
+    const toggleExpanded = () => {
+      const next = !expanded;
+      setExpanded(next);
+      onExpandedChange?.(next);
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { ...rest, ref: setContainerRef, style: [styles16.root, style], children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles16.header, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles16.avatar, children: hasImage ? /* @__PURE__ */ jsxRuntime.jsx(
+          reactNative.Image,
+          {
+            source: { uri: imageUrl ?? void 0 },
+            style: styles16.avatarImage,
+            onError: () => setImageFailed(true)
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx(UserIcon, { size: 20, color: colors.primary }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles16.identity, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { numberOfLines: 1, style: styles16.name, children: userName }),
+          /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { numberOfLines: 1, style: styles16.date, children: date })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(RatingInput, { value: rating, readOnly: true, showValue: false, size: 16 })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        reactNative.Text,
+        {
+          numberOfLines: expanded ? void 0 : maxCommentLines,
+          style: [styles16.comment, commentStyle],
+          children: commentText
+        }
+      ),
+      shouldShowAction ? /* @__PURE__ */ jsxRuntime.jsx(
+        reactNative.Pressable,
+        {
+          onPress: toggleExpanded,
+          accessibilityRole: "button",
+          accessibilityState: { expanded },
+          hitSlop: 6,
+          onHoverIn: () => setActionHovered(true),
+          onHoverOut: () => setActionHovered(false),
+          style: styles16.action,
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            reactNative.Text,
+            {
+              style: [
+                styles16.actionText,
+                expanded && styles16.closeActionText,
+                actionHovered && (expanded ? styles16.closeActionTextHovered : styles16.openActionTextHovered)
+              ],
+              children: expanded ? readLessLabel : readMoreLabel
+            }
+          )
+        }
+      ) : null
+    ] });
+  }
+);
+var styles16 = reactNative.StyleSheet.create({
+  root: {
+    width: CARD_WIDTH,
+    minHeight: CARD_MIN_HEIGHT,
+    padding: 16,
+    gap: 12,
+    borderRadius: 12,
+    backgroundColor: colors.grey750
+  },
+  header: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8
+  },
+  avatar: {
+    width: AVATAR_SIZE,
+    height: AVATAR_SIZE,
+    flexShrink: 0,
+    alignItems: "center",
+    justifyContent: "center",
+    overflow: "hidden",
+    borderRadius: AVATAR_SIZE / 2,
+    backgroundColor: colors.grey600
+  },
+  avatarImage: {
+    width: AVATAR_SIZE,
+    height: AVATAR_SIZE
+  },
+  identity: {
+    minWidth: 0,
+    flex: 1,
+    gap: 4
+  },
+  name: {
+    ...commentCardTypography.name,
+    color: colors.white
+  },
+  date: {
+    ...commentCardTypography.date,
+    color: colors.grey0
+  },
+  comment: {
+    ...commentCardTypography.comment,
+    color: colors.white
+  },
+  action: {
+    alignSelf: "flex-start",
+    marginTop: "auto",
+    minHeight: 16,
+    justifyContent: "center"
+  },
+  actionText: {
+    ...commentCardTypography.action,
+    color: colors.white
+  },
+  closeActionText: {
+    color: colors.primary
+  },
+  openActionTextHovered: {
+    color: colors.primary
+  },
+  closeActionTextHovered: {
+    color: colors.white
+  }
+});
 
 exports.ArrowRightIcon = ArrowRightIcon;
 exports.Avatar = Avatar;
@@ -3509,9 +4096,11 @@ exports.Checkbox = Checkbox;
 exports.ChevronDownIcon = ChevronDownIcon;
 exports.ChevronLeftIcon = ChevronLeftIcon;
 exports.ClockIcon = ClockIcon;
+exports.CommentCard = CommentCard;
 exports.Counter = Counter;
 exports.DatePicker = DatePicker;
 exports.FacebookIcon = FacebookIcon;
+exports.GlobeIcon = GlobeIcon;
 exports.HeartIcon = HeartIcon;
 exports.HelpCircleIcon = HelpCircleIcon;
 exports.HomeIcon = HomeIcon;
@@ -3519,6 +4108,7 @@ exports.Icon = Icon;
 exports.Input = Input;
 exports.InstagramIcon = InstagramIcon;
 exports.KeyIcon = KeyIcon;
+exports.LanguageSwitcher = LanguageSwitcher;
 exports.LayoutGridIcon = LayoutGridIcon;
 exports.LinkedInIcon = LinkedInIcon;
 exports.LogOutIcon = LogOutIcon;
@@ -3528,12 +4118,15 @@ exports.MinusIcon = MinusIcon;
 exports.NavigateIcon = NavigateIcon;
 exports.PhoneIcon = PhoneIcon;
 exports.PlusIcon = PlusIcon;
+exports.RatingInput = RatingInput;
 exports.SearchIcon = SearchIcon;
 exports.SegmentedToggle = SegmentedToggle;
 exports.Select = Select;
 exports.SettingsIcon = SettingsIcon;
 exports.ShowIcon = ShowIcon;
 exports.SidebarIcon = SidebarIcon;
+exports.StarFilledIcon = StarFilledIcon;
+exports.StarIcon = StarIcon;
 exports.StatCard = StatCard;
 exports.Textarea = Textarea;
 exports.Toggle = Toggle;
@@ -3544,8 +4137,10 @@ exports.avatarTypography = avatarTypography;
 exports.badgeTypography = badgeTypography;
 exports.buttonTypography = buttonTypography;
 exports.colors = colors;
+exports.commentCardTypography = commentCardTypography;
 exports.counterTypography = counterTypography;
 exports.datePickerTypography = datePickerTypography;
+exports.defaultLanguageOptions = defaultLanguageOptions;
 exports.fonts = fonts;
 exports.getIconsByGroup = getIconsByGroup;
 exports.grey = grey;
@@ -3554,6 +4149,8 @@ exports.iconGroups = iconGroups;
 exports.iconNames = iconNames;
 exports.icons = icons;
 exports.inputTypography = inputTypography;
+exports.languageSwitcherTypography = languageSwitcherTypography;
+exports.ratingTypography = ratingTypography;
 exports.segmentedToggleTypography = segmentedToggleTypography;
 exports.selectTypography = selectTypography;
 exports.statCardTypography = statCardTypography;