@ecohouse/ui 0.1.33 → 0.1.35

package/src/components/ToggleRow/ToggleRow.tsx

@@ -0,0 +1,121 @@
+import { forwardRef, useMemo, useRef, type ComponentRef } from "react";
+import {
+  StyleSheet,
+  Text,
+  useWindowDimensions,
+  View,
+  type StyleProp,
+  type ViewProps,
+  type ViewStyle,
+} from "react-native";
+import { colors, fonts } from "../../theme";
+import { mergeRefs } from "../../utils/mergeRefs";
+import { useApplyWebClassName } from "../../utils/useApplyWebClassName";
+import { Toggle } from "../Toggle";
+
+export interface ToggleRowProps extends Omit<ViewProps, "style" | "children"> {
+  label: string;
+  value?: boolean;
+  defaultValue?: boolean;
+  onValueChange?: (value: boolean) => void;
+  disabled?: boolean;
+  /** When false, hides the bottom border. Defaults to true. */
+  showBorder?: boolean;
+  style?: StyleProp<ViewStyle>;
+  className?: string;
+}
+
+const DESKTOP_MIN_WIDTH = 1024;
+
+/**
+ * Settings toggle line — label left, switch right.
+ * Mobile: height 57, padding 16/12, label 12px.
+ * Desktop: height 65, padding 20/12, label 14px.
+ */
+export const ToggleRow = forwardRef<ComponentRef<typeof View>, ToggleRowProps>(function ToggleRow(
+  {
+    label,
+    value,
+    defaultValue = false,
+    onValueChange,
+    disabled = false,
+    showBorder = true,
+    style,
+    className,
+    accessibilityLabel,
+    ...rest
+  },
+  forwardedRef,
+) {
+  const containerRef = useRef<ComponentRef<typeof View>>(null);
+  const setContainerRef = useMemo(() => mergeRefs(containerRef, forwardedRef), [forwardedRef]);
+  const { width: viewportWidth } = useWindowDimensions();
+  const isDesktop = viewportWidth >= DESKTOP_MIN_WIDTH;
+  const labelSize = isDesktop ? 14 : 12;
+
+  useApplyWebClassName(containerRef, className);
+
+  return (
+    <View
+      {...rest}
+      ref={setContainerRef}
+      style={[
+        styles.root,
+        {
+          minHeight: isDesktop ? 65 : 57,
+          paddingTop: isDesktop ? 20 : 16,
+          paddingBottom: isDesktop ? 20 : 16,
+        },
+        !showBorder && styles.noBorder,
+        style,
+      ]}
+    >
+      <Text
+        style={[
+          styles.label,
+          {
+            fontSize: labelSize,
+            lineHeight: isDesktop ? 20 : 18,
+            letterSpacing: labelSize * 0.03,
+          },
+        ]}
+        numberOfLines={2}
+      >
+        {label}
+      </Text>
+      <Toggle
+        value={value}
+        defaultValue={defaultValue}
+        onValueChange={onValueChange}
+        disabled={disabled}
+        accessibilityLabel={accessibilityLabel ?? label}
+      />
+    </View>
+  );
+});
+
+const styles = StyleSheet.create({
+  root: {
+    width: "100%",
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 40,
+    paddingRight: 12,
+    paddingLeft: 12,
+    borderBottomWidth: 1,
+    borderBottomColor: colors.grey650,
+    opacity: 1,
+  },
+  noBorder: {
+    borderBottomWidth: 0,
+  },
+  label: {
+    flex: 1,
+    minWidth: 0,
+    fontFamily: fonts.sans,
+    fontWeight: "700",
+    color: colors.white,
+    // RN-web clips Armenian descenders when line boxes are tight.
+    overflow: "visible",
+  },
+});

package/src/components/ToggleRow/index.ts

@@ -0,0 +1,2 @@
+export { ToggleRow } from "./ToggleRow";
+export type { ToggleRowProps } from "./ToggleRow";

package/src/components/VerificationCodeInput/VerificationCodeInput.tsx

@@ -9,6 +9,7 @@ import {
 import {
   Platform,
   StyleSheet,
+  Text,
   TextInput,
   useWindowDimensions,
   View,
@@ -24,12 +25,13 @@ import { useApplyWebClassName } from "../../utils/useApplyWebClassName";
 import { normalizeVerificationCode, updateVerificationCode } from "./VerificationCodeInput.utils";
 
 const DEFAULT_LENGTH = 6;
-const DESKTOP_CELL_WIDTH = 54;
-const MOBILE_CELL_WIDTH = 50;
-const CELL_HEIGHT = 68;
+const DESKTOP_CELL_WIDTH = 54.333335876464844;
+const MOBILE_CELL_WIDTH = 45.16666793823242;
+const DESKTOP_CELL_HEIGHT = 68;
+const MOBILE_CELL_HEIGHT = 58;
 const DESKTOP_GAP = 12;
-const MOBILE_GAP = 4;
-const MOBILE_BREAKPOINT = 640;
+const MOBILE_GAP = 12;
+const MOBILE_BREAKPOINT = 1024;
 
 export interface VerificationCodeInputHandle {
   clear: () => void;
@@ -47,6 +49,8 @@ export interface VerificationCodeInputProps extends Omit<ViewProps, "children" |
   /** Called when Enter/submit is pressed from a cell. */
   onSubmit?: (value: string) => void;
   error?: boolean;
+  /** Shown under the cells when `error` is true. */
+  errorMessage?: string;
   disabled?: boolean;
   autoFocus?: boolean;
   /** Localized accessible name for each zero-based cell index. */
@@ -68,6 +72,7 @@ export const VerificationCodeInput = forwardRef<
     onComplete,
     onSubmit,
     error = false,
+    errorMessage,
     disabled = false,
     autoFocus = false,
     getDigitAccessibilityLabel,
@@ -161,71 +166,77 @@ export const VerificationCodeInput = forwardRef<
 
   const mobile = viewportWidth < MOBILE_BREAKPOINT;
   const cellWidth = mobile ? MOBILE_CELL_WIDTH : DESKTOP_CELL_WIDTH;
+  const cellHeight = mobile ? MOBILE_CELL_HEIGHT : DESKTOP_CELL_HEIGHT;
   const cellGap = mobile ? MOBILE_GAP : DESKTOP_GAP;
-  const rootWidth = cellWidth * safeLength + cellGap * Math.max(0, safeLength - 1);
+  const rowWidth = cellWidth * safeLength + cellGap * Math.max(0, safeLength - 1);
+  const showErrorMessage = Boolean(error && errorMessage);
 
   return (
-    <View
-      {...viewProps}
-      ref={rootRef}
-      style={[
-        styles.root,
-        { width: rootWidth, maxWidth: "100%", gap: cellGap },
-        disabled && styles.disabled,
-        style,
-      ]}
-    >
-      {Array.from({ length: safeLength }, (_, index) => {
-        const active = focusedIndex === index;
-        const borderColor = error ? colors.redHover : active ? colors.primary : colors.grey600;
-
-        return (
-          <TextInput
-            ref={(element) => {
-              inputRefs.current[index] = element;
-            }}
-            accessibilityLabel={
-              getDigitAccessibilityLabel?.(index) ?? `Verification code digit ${index + 1}`
-            }
-            accessibilityState={{ disabled }}
-            autoComplete={index === 0 ? "one-time-code" : "off"}
-            autoFocus={autoFocus && index === 0}
-            caretHidden={Platform.OS !== "web"}
-            editable={!disabled}
-            inputMode="numeric"
-            key={index}
-            keyboardType="number-pad"
-            maxLength={safeLength}
-            onBlur={() => setFocusedIndex((current) => (current === index ? null : current))}
-            onChangeText={(text) => handleChange(index, text)}
-            onFocus={() => setFocusedIndex(index)}
-            onKeyPress={(event) => handleKeyPress(index, event)}
-            onSubmitEditing={() => onSubmit?.(currentCode)}
-            selectTextOnFocus
-            style={[
-              styles.cell,
-              {
-                width: cellWidth,
-                height: CELL_HEIGHT,
-                borderColor,
-                color: error ? colors.red : colors.white,
-              },
-              Platform.OS === "web" ? styles.cellWeb : null,
-              Platform.OS === "android" ? styles.cellAndroid : null,
-              inputStyle,
-            ]}
-            value={currentCode[index] ?? ""}
-          />
-        );
-      })}
+    <View {...viewProps} ref={rootRef} style={[styles.wrapper, disabled && styles.disabled, style]}>
+      <View style={[styles.row, { width: rowWidth, maxWidth: "100%", gap: cellGap }]}>
+        {Array.from({ length: safeLength }, (_, index) => {
+          const active = focusedIndex === index;
+          const borderColor = error ? colors.red : active ? colors.primary : colors.grey600;
+
+          return (
+            <TextInput
+              ref={(element) => {
+                inputRefs.current[index] = element;
+              }}
+              accessibilityLabel={
+                getDigitAccessibilityLabel?.(index) ?? `Verification code digit ${index + 1}`
+              }
+              accessibilityState={{ disabled }}
+              autoComplete={index === 0 ? "one-time-code" : "off"}
+              autoFocus={autoFocus && index === 0}
+              caretHidden={Platform.OS !== "web"}
+              editable={!disabled}
+              inputMode="numeric"
+              key={index}
+              keyboardType="number-pad"
+              maxLength={safeLength}
+              onBlur={() => setFocusedIndex((current) => (current === index ? null : current))}
+              onChangeText={(text) => handleChange(index, text)}
+              onFocus={() => setFocusedIndex(index)}
+              onKeyPress={(event) => handleKeyPress(index, event)}
+              onSubmitEditing={() => onSubmit?.(currentCode)}
+              selectTextOnFocus
+              style={[
+                styles.cell,
+                {
+                  width: cellWidth,
+                  height: cellHeight,
+                  borderColor,
+                  color: error ? colors.red : colors.white,
+                },
+                Platform.OS === "web" ? styles.cellWeb : null,
+                Platform.OS === "android" ? styles.cellAndroid : null,
+                inputStyle,
+              ]}
+              value={currentCode[index] ?? ""}
+            />
+          );
+        })}
+      </View>
+
+      {showErrorMessage ? (
+        <Text accessibilityLiveRegion="assertive" style={styles.errorMessage}>
+          {errorMessage}
+        </Text>
+      ) : null}
     </View>
   );
 });
 
 const styles = StyleSheet.create({
-  root: {
+  wrapper: {
     minWidth: 0,
     alignSelf: "center",
+    alignItems: "center",
+    gap: 12,
+  },
+  row: {
+    minWidth: 0,
     flexDirection: "row",
     justifyContent: "center",
   },
@@ -252,4 +263,13 @@ const styles = StyleSheet.create({
   cellAndroid: {
     includeFontPadding: false,
   },
+  errorMessage: {
+    fontFamily: fonts.sans,
+    fontSize: 12,
+    fontWeight: "400",
+    lineHeight: 12,
+    letterSpacing: 0,
+    textAlign: "center",
+    color: colors.red,
+  },
 });

package/src/components/index.ts

@@ -22,6 +22,12 @@ export type { StepPagerProps } from "./StepPager";
 export { InfoTile } from "./InfoTile";
 export type { InfoTileProps } from "./InfoTile";
 
+export { ContactInfoCard } from "./ContactInfoCard";
+export type { ContactInfoCardProps } from "./ContactInfoCard";
+
+export { AccordionItem } from "./AccordionItem";
+export type { AccordionItemProps } from "./AccordionItem";
+
 export { StepList } from "./StepList";
 export type { StepListProps } from "./StepList";
 
@@ -35,7 +41,11 @@ export { Sidebar } from "./Sidebar";
 export type { SidebarProps, SidebarItem, SidebarUser } from "./Sidebar";
 
 export { LanguageSwitcher, defaultLanguageOptions } from "./LanguageSwitcher";
-export type { LanguageOption, LanguageSwitcherProps } from "./LanguageSwitcher";
+export type {
+  LanguageOption,
+  LanguageSwitcherProps,
+  LanguageSwitcherVariant,
+} from "./LanguageSwitcher";
 
 export { StatCard } from "./StatCard";
 export type { StatCardProps } from "./StatCard";
@@ -58,6 +68,9 @@ export type {
 export { FloatingActionButton } from "./FloatingActionButton";
 export type { FloatingActionButtonProps } from "./FloatingActionButton";
 
+export { Modal } from "./Modal";
+export type { ModalProps } from "./Modal";
+
 export { Input } from "./Input";
 export type { InputIcon, InputProps, InputSize } from "./Input";
 
@@ -82,6 +95,9 @@ export type { TextareaProps } from "./Textarea";
 export { Toggle } from "./Toggle";
 export type { ToggleProps } from "./Toggle";
 
+export { ToggleRow } from "./ToggleRow";
+export type { ToggleRowProps } from "./ToggleRow";
+
 export { RatingInput } from "./RatingInput";
 export type { RatingInputProps } from "./RatingInput";
 

package/src/icons/CameraFilled/CameraFilledIcon.tsx

@@ -0,0 +1,15 @@
+import Svg, { Path } from "react-native-svg";
+import { CAMERA_FILLED_PATH } from "./cameraFilledPath";
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+
+export { CAMERA_FILLED_PATH } from "./cameraFilledPath";
+
+/** Native — filled camera, 32×32 viewBox. */
+export function CameraFilledIcon({ size = 32, color = colors.primary }: IconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 32 32" fill="none">
+      <Path d={CAMERA_FILLED_PATH} fill={color} />
+    </Svg>
+  );
+}

package/src/icons/CameraFilled/CameraFilledIcon.web.tsx

@@ -0,0 +1,21 @@
+import { CAMERA_FILLED_PATH } from "./cameraFilledPath";
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+
+/** Web / Storybook — filled camera, 32×32 viewBox. */
+export function CameraFilledIcon({ size = 32, color = colors.primary }: IconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 32 32"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden
+    >
+      <path d={CAMERA_FILLED_PATH} fill={color} />
+    </svg>
+  );
+}
+
+export { CAMERA_FILLED_PATH } from "./cameraFilledPath";

package/src/icons/CameraFilled/cameraFilledPath.ts

@@ -0,0 +1,2 @@
+export const CAMERA_FILLED_PATH =
+  "M25.3327 8.66605H23.626L23.1993 7.33271C22.9228 6.55035 22.4097 5.87338 21.7312 5.39559C21.0528 4.9178 20.2425 4.66285 19.4127 4.66605H12.586C11.7481 4.66761 10.9318 4.93229 10.2524 5.42272C9.57295 5.91315 9.06469 6.60456 8.79935 7.39938L8.37268 8.73271H6.66602C5.60515 8.73271 4.58773 9.15414 3.83759 9.90428C3.08744 10.6544 2.66602 11.6718 2.66602 12.7327V23.3994C2.66602 24.4602 3.08744 25.4777 3.83759 26.2278C4.58773 26.978 5.60515 27.3994 6.66602 27.3994H25.3327C26.3935 27.3994 27.411 26.978 28.1611 26.2278C28.9113 25.4777 29.3327 24.4602 29.3327 23.3994V12.7327C29.3415 12.2018 29.2446 11.6745 29.0476 11.1815C28.8505 10.6885 28.5573 10.2396 28.1849 9.86109C27.8126 9.48256 27.3687 9.18195 26.879 8.97678C26.3893 8.7716 25.8636 8.66597 25.3327 8.66605ZM26.666 23.3327C26.666 23.6863 26.5255 24.0255 26.2755 24.2755C26.0254 24.5256 25.6863 24.666 25.3327 24.666H6.66602C6.31239 24.666 5.97326 24.5256 5.72321 24.2755C5.47316 24.0255 5.33268 23.6863 5.33268 23.3327V12.666C5.33268 12.3124 5.47316 11.9733 5.72321 11.7232C5.97326 11.4732 6.31239 11.3327 6.66602 11.3327H9.33268C9.62344 11.3479 9.91117 11.2675 10.1519 11.1038C10.3927 10.94 10.5732 10.702 10.666 10.426L11.386 8.23938C11.4755 7.97455 11.6459 7.74453 11.8732 7.58183C12.1005 7.41914 12.3732 7.33199 12.6527 7.33271H19.4793C19.7589 7.33199 20.0316 7.41914 20.2589 7.58183C20.4862 7.74453 20.6566 7.97455 20.746 8.23938L21.466 10.426C21.5516 10.6804 21.7119 10.903 21.926 11.0647C22.1401 11.2265 22.398 11.3199 22.666 11.3327H25.3327C25.6863 11.3327 26.0254 11.4732 26.2755 11.7232C26.5255 11.9733 26.666 12.3124 26.666 12.666V23.3327ZM15.9993 11.3327C14.9445 11.3327 13.9134 11.6455 13.0363 12.2315C12.1592 12.8176 11.4757 13.6505 11.072 14.6251C10.6683 15.5996 10.5627 16.672 10.7685 17.7065C10.9743 18.7411 11.4822 19.6914 12.2281 20.4373C12.974 21.1832 13.9243 21.6911 14.9589 21.8969C15.9934 22.1027 17.0658 21.9971 18.0403 21.5934C19.0149 21.1897 19.8478 20.5061 20.4339 19.6291C21.0199 18.752 21.3327 17.7209 21.3327 16.666C21.3327 15.2516 20.7708 13.895 19.7706 12.8948C18.7704 11.8946 17.4138 11.3327 15.9993 11.3327ZM15.9993 19.3327C15.4719 19.3327 14.9564 19.1763 14.5178 18.8833C14.0793 18.5903 13.7375 18.1738 13.5357 17.6865C13.3338 17.1993 13.281 16.6631 13.3839 16.1458C13.4868 15.6285 13.7408 15.1534 14.1137 14.7804C14.4867 14.4075 14.9618 14.1535 15.4791 14.0506C15.9964 13.9477 16.5326 14.0005 17.0198 14.2024C17.5071 14.4042 17.9236 14.746 18.2166 15.1845C18.5096 15.6231 18.666 16.1386 18.666 16.666C18.666 17.3733 18.3851 18.0516 17.885 18.5517C17.3849 19.0518 16.7066 19.3327 15.9993 19.3327Z";

package/src/icons/CameraFilled/index.ts

@@ -0,0 +1 @@
+export { CameraFilledIcon, CAMERA_FILLED_PATH } from "./CameraFilledIcon";

package/src/icons/Globe/GlobeIcon.tsx

@@ -3,9 +3,9 @@ import { colors } from "../../theme";
 import type { IconProps } from "../types";
 import { GLOBE_PATH } from "./globePath";
 
-export function GlobeIcon({ size = 20, color = colors.primary, strokeWidth = 2 }: IconProps) {
+export function GlobeIcon({ size = 16, color = colors.primary, strokeWidth = 1.5 }: IconProps) {
   return (
-    <Svg width={size} height={size} viewBox="0 0 20 20" fill="none">
+    <Svg width={size} height={size} viewBox="0 0 16 16" fill="none">
       <Path
         d={GLOBE_PATH}
         stroke={color}

package/src/icons/Globe/GlobeIcon.web.tsx

@@ -2,12 +2,12 @@ import { colors } from "../../theme";
 import type { IconProps } from "../types";
 import { GLOBE_PATH } from "./globePath";
 
-export function GlobeIcon({ size = 20, color = colors.primary, strokeWidth = 2 }: IconProps) {
+export function GlobeIcon({ size = 16, color = colors.primary, strokeWidth = 1.5 }: IconProps) {
   return (
     <svg
       width={size}
       height={size}
-      viewBox="0 0 20 20"
+      viewBox="0 0 16 16"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       aria-hidden

package/src/icons/Globe/globePath.ts

@@ -1,3 +1,3 @@
-/** Globe paths — 20×20 viewBox. */
+/** Globe paths — 16×16 viewBox. */
 export const 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";
+  "M1.3335 8.00004H14.6668M1.3335 8.00004C1.3335 11.6819 4.31826 14.6667 8.00016 14.6667M1.3335 8.00004C1.3335 4.31814 4.31826 1.33337 8.00016 1.33337M14.6668 8.00004C14.6668 11.6819 11.6821 14.6667 8.00016 14.6667M14.6668 8.00004C14.6668 4.31814 11.6821 1.33337 8.00016 1.33337M8.00016 1.33337C9.66768 3.15894 10.6153 5.52806 10.6668 8.00004C10.6153 10.472 9.66768 12.8411 8.00016 14.6667M8.00016 1.33337C6.33264 3.15894 5.38499 5.52806 5.3335 8.00004C5.38499 10.472 6.33264 12.8411 8.00016 14.6667";

package/src/icons/Headset/HeadsetIcon.tsx

@@ -0,0 +1,26 @@
+import Svg, { Path } from "react-native-svg";
+import type { IconProps } from "../types";
+import { HEADSET_MIC_PATH, HEADSET_PATH } from "./headsetPath";
+
+export function HeadsetIcon({ size = 24, color = "#B76533", strokeWidth = 2 }: IconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <Path
+        d={HEADSET_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <Path
+        d={HEADSET_MIC_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}
+
+export { HEADSET_MIC_PATH, HEADSET_PATH } from "./headsetPath";

package/src/icons/Headset/HeadsetIcon.web.tsx

@@ -0,0 +1,25 @@
+import type { IconProps } from "../types";
+import { HEADSET_MIC_PATH, HEADSET_PATH } from "./headsetPath";
+
+export function HeadsetIcon({ size = 24, color = "#B76533", strokeWidth = 2 }: IconProps) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" aria-hidden>
+      <path
+        d={HEADSET_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d={HEADSET_MIC_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export { HEADSET_MIC_PATH, HEADSET_PATH } from "./headsetPath";

package/src/icons/Headset/headsetPath.ts

@@ -0,0 +1,6 @@
+/** Headset / support hours — viewBox 0 0 24 24. */
+export const HEADSET_PATH =
+  "M3 11H6C6.53043 11 7.03914 11.2107 7.41421 11.5858C7.78929 11.9609 8 12.4696 8 13V16C8 16.5304 7.78929 17.0391 7.41421 17.4142C7.03914 17.7893 6.53043 18 6 18H5C4.46957 18 3.96086 17.7893 3.58579 17.4142C3.21071 17.0391 3 16.5304 3 16V11ZM3 11C3 9.8181 3.23279 8.64778 3.68508 7.55585C4.13738 6.46392 4.80031 5.47177 5.63604 4.63604C6.47177 3.80031 7.46392 3.13738 8.55585 2.68508C9.64778 2.23279 10.8181 2 12 2C13.1819 2 14.3522 2.23279 15.4442 2.68508C16.5361 3.13738 17.5282 3.80031 18.364 4.63604C19.1997 5.47177 19.8626 6.46392 20.3149 7.55585C20.7672 8.64778 21 9.8181 21 11M21 11V16C21 16.5304 20.7893 17.0391 20.4142 17.4142C20.0391 17.7893 19.5304 18 19 18H18C17.4696 18 16.9609 17.7893 16.5858 17.4142C16.2107 17.0391 16 16.5304 16 16V13C16 12.4696 16.2107 11.9609 16.5858 11.5858C16.9609 11.2107 17.4696 11 18 11H21Z";
+
+export const HEADSET_MIC_PATH =
+  "M21 16V18C21 19.0609 20.5786 20.0783 19.8284 20.8284C19.0783 21.5786 18.0609 22 17 22H12";

package/src/icons/Headset/index.ts

@@ -0,0 +1 @@
+export { HeadsetIcon, HEADSET_MIC_PATH, HEADSET_PATH } from "./HeadsetIcon";

package/src/icons/Hide/HideIcon.tsx

@@ -0,0 +1,21 @@
+import Svg, { Path } from "react-native-svg";
+import { HIDE_PATH } from "./hidePath";
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+
+export { HIDE_PATH } from "./hidePath";
+
+/** Native — react-native-svg (peer dependency). */
+export function HideIcon({ size = 24, color = colors.primary, strokeWidth = 2 }: IconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <Path
+        d={HIDE_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}

package/src/icons/Hide/HideIcon.web.tsx

@@ -0,0 +1,27 @@
+import { HIDE_PATH } from "./hidePath";
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+
+/** Web / Storybook — plain SVG (no react-native-svg). */
+export function HideIcon({ size = 24, color = colors.primary, strokeWidth = 2 }: IconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden
+    >
+      <path
+        d={HIDE_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export { HIDE_PATH } from "./hidePath";

package/src/icons/Hide/hidePath.ts

@@ -0,0 +1,3 @@
+/** Hide (eye-off) icon path — 24×24 viewBox. */
+export const HIDE_PATH =
+  "M10.7429 5.09232C11.1494 5.03223 11.5686 5 12.0004 5C17.1054 5 20.4553 9.50484 21.5807 11.2868C21.7169 11.5025 21.785 11.6103 21.8231 11.7767C21.8518 11.9016 21.8517 12.0987 21.8231 12.2236C21.7849 12.3899 21.7164 12.4985 21.5792 12.7156C21.2793 13.1901 20.8222 13.8571 20.2165 14.5805M6.72432 6.71504C4.56225 8.1817 3.09445 10.2194 2.42111 11.2853C2.28428 11.5019 2.21587 11.6102 2.17774 11.7765C2.1491 11.9014 2.14909 12.0984 2.17771 12.2234C2.21583 12.3897 2.28393 12.4975 2.42013 12.7132C3.54554 14.4952 6.89541 19 12.0004 19C14.0588 19 15.8319 18.2676 17.2888 17.2766M3.00042 3L21.0004 21M9.8791 9.87868C9.3362 10.4216 9.00042 11.1716 9.00042 12C9.00042 13.6569 10.3436 15 12.0004 15C12.8288 15 13.5788 14.6642 14.1217 14.1213";

package/src/icons/Hide/index.ts

@@ -0,0 +1 @@
+export { HideIcon, HIDE_PATH } from "./HideIcon";

package/src/icons/Key/keyPath.ts

@@ -1,2 +1,2 @@
 export const KEY_PATH =
-  "M5.28673 10.0002L7.0545 11.768M7.6435 7.64301L9.41127 9.41078M10.0003 5.28624L11.768 7.05401M4.22553 11.0604L11.0609 4.22505C11.7209 3.56502 12.0513 3.235 12.4318 3.11136C12.7666 3.00259 13.127 3.00259 13.4618 3.11136C13.8421 3.23494 14.1718 3.56464 14.8311 4.22393L15.775 5.16785C16.4351 5.82788 16.7654 6.15867 16.8891 6.53922C16.9979 6.87396 16.9976 7.23381 16.8889 7.56855C16.7652 7.9491 16.4353 8.27937 15.7753 8.9394L8.93989 15.7748C8.27986 16.4348 7.94959 16.7647 7.56904 16.8884C7.2343 16.9971 6.87445 16.9974 6.53971 16.8886C6.15916 16.765 5.82837 16.4346 5.16834 15.7745L4.22441 14.8306C3.56513 14.1713 3.23542 13.8416 3.11185 13.4613C3.00308 13.1266 3.00308 12.7661 3.11185 12.4313C3.23549 12.0508 3.56551 11.7204 4.22553 11.0604Z";
+  "M14.1668 8.33333V6.66667C14.1668 4.36548 12.3013 2.5 10.0002 2.5C7.69898 2.5 5.8335 4.36548 5.8335 6.66667V8.33333M10.0002 12.0833V13.75M7.3335 17.5H12.6668C14.067 17.5 14.767 17.5 15.3018 17.2275C15.7722 16.9878 16.1547 16.6054 16.3943 16.135C16.6668 15.6002 16.6668 14.9001 16.6668 13.5V12.3333C16.6668 10.9332 16.6668 10.2331 16.3943 9.69836C16.1547 9.22795 15.7722 8.8455 15.3018 8.60582C14.767 8.33333 14.067 8.33333 12.6668 8.33333H7.3335C5.93336 8.33333 5.2333 8.33333 4.69852 8.60582C4.22811 8.8455 3.84566 9.22795 3.60598 9.69836C3.3335 10.2331 3.3335 10.9332 3.3335 12.3333V13.5C3.3335 14.9001 3.3335 15.6002 3.60598 16.135C3.84566 16.6054 4.22811 16.9878 4.69852 17.2275C5.2333 17.5 5.93336 17.5 7.3335 17.5Z";

package/src/icons/MenuLines/MenuLinesIcon.tsx

@@ -0,0 +1,20 @@
+import Svg, { Path } from "react-native-svg";
+import { MENU_LINES_PATH } from "./menuLinesPath";
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+
+export { MENU_LINES_PATH } from "./menuLinesPath";
+
+export function MenuLinesIcon({ size = 28, color = colors.white, strokeWidth = 2 }: IconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 28 28" fill="none">
+      <Path
+        d={MENU_LINES_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}

package/src/icons/MenuLines/MenuLinesIcon.web.tsx

@@ -0,0 +1,26 @@
+import { MENU_LINES_PATH } from "./menuLinesPath";
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+
+export function MenuLinesIcon({ size = 28, color = colors.white, strokeWidth = 2 }: IconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 28 28"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden
+    >
+      <path
+        d={MENU_LINES_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export { MENU_LINES_PATH } from "./menuLinesPath";

package/src/icons/MenuLines/index.ts

@@ -0,0 +1 @@
+export { MenuLinesIcon, MENU_LINES_PATH } from "./MenuLinesIcon";

package/src/icons/MenuLines/menuLinesPath.ts

@@ -0,0 +1,3 @@
+/** Account header hamburger — 28×28 viewBox, left-aligned uneven lines. */
+export const MENU_LINES_PATH =
+  "M5.83398 19.8337H15.1673M5.83398 14.0003H22.1673M5.83398 8.16699H15.1673";