@ecohouse/ui 0.1.33 → 0.1.34

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";
 
@@ -58,6 +64,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 +91,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/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/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";

package/src/icons/index.ts

@@ -17,6 +17,7 @@ export { BuildingIcon } from "./Building";
 export { CalendarIcon } from "./Calendar";
 export { CalendarOutlineIcon } from "./CalendarOutline";
 export { CameraIcon } from "./Camera";
+export { CameraFilledIcon } from "./CameraFilled";
 export { CheckIcon } from "./Check";
 export { CheckBadgeIcon } from "./CheckBadge";
 export { ChevronDownIcon } from "./ChevronDown";
@@ -48,9 +49,11 @@ export { FacebookIcon } from "./Facebook";
 export { FiltersIcon } from "./Filters";
 export { FullscreenIcon } from "./Fullscreen";
 export { HeartIcon } from "./Heart";
+export { HeadsetIcon } from "./Headset";
 export { GlobeIcon } from "./Globe";
 export { GooglePlayIcon } from "./Store";
 export { HelpCircleIcon } from "./HelpCircle";
+export { HideIcon } from "./Hide";
 export { HomeIcon } from "./Home";
 export { InstagramIcon } from "./Instagram";
 export { KeyIcon } from "./Key";
@@ -66,6 +69,7 @@ export { MapViewIcon } from "./MapView";
 export { MapCollapseIcon, MapExpandIcon } from "./MapControls";
 export { MenuIcon } from "./Menu";
 export type { MenuIconProps } from "./Menu";
+export { MenuLinesIcon } from "./MenuLines";
 export { NavigateIcon } from "./Navigate";
 export { PhoneIcon } from "./Phone";
 export { PlusIcon } from "./Plus";

package/src/icons/registry.ts

@@ -8,6 +8,7 @@ import { BuildingIcon } from "./Building";
 import { CalendarIcon } from "./Calendar";
 import { CalendarOutlineIcon } from "./CalendarOutline";
 import { CameraIcon } from "./Camera";
+import { CameraFilledIcon } from "./CameraFilled";
 import { CheckIcon } from "./Check";
 import { CheckBadgeIcon } from "./CheckBadge";
 import { ChevronDownIcon } from "./ChevronDown";
@@ -39,8 +40,10 @@ import { FacebookIcon } from "./Facebook";
 import { FiltersIcon } from "./Filters";
 import { FullscreenIcon } from "./Fullscreen";
 import { HeartIcon } from "./Heart";
+import { HeadsetIcon } from "./Headset";
 import { GlobeIcon } from "./Globe";
 import { HelpCircleIcon } from "./HelpCircle";
+import { HideIcon } from "./Hide";
 import { HomeIcon } from "./Home";
 import { InstagramIcon } from "./Instagram";
 import { KeyIcon } from "./Key";
@@ -55,6 +58,7 @@ import { MailIcon } from "./Mail";
 import { MapViewIcon } from "./MapView";
 import { MapCollapseIcon, MapExpandIcon } from "./MapControls";
 import { MenuIcon } from "./Menu";
+import { MenuLinesIcon } from "./MenuLines";
 import { MinusIcon } from "./Minus";
 import { NavigateIcon } from "./Navigate";
 import { PhoneIcon } from "./Phone";
@@ -87,6 +91,7 @@ export const icons = {
   calendar: CalendarIcon,
   calendarOutline: CalendarOutlineIcon,
   camera: CameraIcon,
+  cameraFilled: CameraFilledIcon,
   check: CheckIcon,
   checkBadge: CheckBadgeIcon,
   checkSuccess: CheckSuccessIcon,
@@ -106,9 +111,11 @@ export const icons = {
   fullscreen: FullscreenIcon,
   guests: GuestsIcon,
   heart: HeartIcon,
+  headset: HeadsetIcon,
   globe: GlobeIcon,
   googlePlay: GooglePlayIcon,
   helpCircle: HelpCircleIcon,
+  hide: HideIcon,
   home: HomeIcon,
   instagram: InstagramIcon,
   key: KeyIcon,
@@ -124,6 +131,7 @@ export const icons = {
   mapCollapse: MapCollapseIcon,
   mapExpand: MapExpandIcon,
   menu: MenuIcon,
+  menuLines: MenuLinesIcon,
   minus: MinusIcon,
   navigate: NavigateIcon,
   noSmoking: NoSmokingIcon,
@@ -171,10 +179,12 @@ export const iconGroups = {
     "mapExpand",
     "mapView",
     "menu",
+    "menuLines",
     "navigate",
   ],
   actions: [
     "show",
+    "hide",
     "alertTriangle",
     "ban",
     "bell",
@@ -196,6 +206,7 @@ export const iconGroups = {
     "filters",
     "fullscreen",
     "heart",
+    "headset",
     "zoomOut",
     "star",
     "starFilled",

package/src/index.ts

@@ -7,6 +7,8 @@ export {
   PaginationDots,
   StepPager,
   InfoTile,
+  ContactInfoCard,
+  AccordionItem,
   StepList,
   Counter,
   SegmentedToggle,
@@ -18,11 +20,13 @@ export {
   Checkbox,
   DatePicker,
   FloatingActionButton,
+  Modal,
   Input,
   VerificationCodeInput,
   Select,
   Textarea,
   Toggle,
+  ToggleRow,
   RatingInput,
   CommentCard,
   Range,
@@ -39,6 +43,8 @@ export type {
   PaginationDotsProps,
   StepPagerProps,
   InfoTileProps,
+  ContactInfoCardProps,
+  AccordionItemProps,
   StepListProps,
   CounterProps,
   SegmentedToggleOption,
@@ -60,6 +66,7 @@ export type {
   DatePickerVariant,
   DateRange,
   FloatingActionButtonProps,
+  ModalProps,
   InputIcon,
   InputProps,
   InputSize,
@@ -72,6 +79,7 @@ export type {
   SelectMultipleProps,
   TextareaProps,
   ToggleProps,
+  ToggleRowProps,
   RatingInputProps,
   CommentCardProps,
   RangeProps,
@@ -114,6 +122,7 @@ export {
   CalendarIcon,
   CalendarOutlineIcon,
   CameraIcon,
+  CameraFilledIcon,
   CheckIcon,
   CheckBadgeIcon,
   ChevronDownIcon,
@@ -144,9 +153,11 @@ export {
   FiltersIcon,
   FullscreenIcon,
   HeartIcon,
+  HeadsetIcon,
   GlobeIcon,
   GooglePlayIcon,
   HelpCircleIcon,
+  HideIcon,
   HomeIcon,
   InstagramIcon,
   KeyIcon,
@@ -162,6 +173,7 @@ export {
   MapCollapseIcon,
   MapExpandIcon,
   MenuIcon,
+  MenuLinesIcon,
   MinusIcon,
   NavigateIcon,
   PhoneIcon,