@ecohouse/ui 0.1.59 → 0.1.61

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ecohouse/ui",
-  "version": "0.1.59",
+  "version": "0.1.61",
   "type": "module",
   "private": false,
   "description": "Cross-platform presentation-only UI components for EcoHouse (React Native + React Native Web)",

package/src/components/Button/Button.tsx

@@ -259,9 +259,13 @@ const styles = StyleSheet.create({
   contentWithoutIcon: {
     justifyContent: "center",
   },
-  label: {},
+  label: {
+    flexShrink: 0,
+    overflow: "visible",
+    paddingRight: 4,
+  },
   labelAndroid: {
-    includeFontPadding: false,
+    includeFontPadding: true,
   },
   labelCentered: {
     textAlign: "center",

package/src/components/CommentCard/CommentCard.tsx

@@ -29,6 +29,7 @@ export interface CommentCardProps extends Omit<ViewProps, "style" | "children">
   onExpandedChange?: (expanded: boolean) => void;
   style?: StyleProp<ViewStyle>;
   commentStyle?: StyleProp<TextStyle>;
+  actionStyle?: StyleProp<TextStyle>;
   className?: string;
 }
 
@@ -51,6 +52,7 @@ export const CommentCard = forwardRef<ComponentRef<typeof View>, CommentCardProp
       onExpandedChange,
       style,
       commentStyle,
+      actionStyle,
       className,
       ...rest
     },
@@ -128,6 +130,7 @@ export const CommentCard = forwardRef<ComponentRef<typeof View>, CommentCardProp
             <Text
               style={[
                 styles.actionText,
+                actionStyle,
                 expanded && styles.closeActionText,
                 actionHovered &&
                   (expanded ? styles.closeActionTextHovered : styles.openActionTextHovered),

package/src/components/Counter/Counter.tsx

@@ -91,7 +91,7 @@ export const Counter = forwardRef<ComponentRef<typeof View>, CounterProps>(funct
       accessibilityState={{ disabled: decrementDisabled }}
       style={[styles.button, webBlurStyle, decrementDisabled && styles.buttonDisabled]}
     >
-      <MinusIcon />
+      <MinusIcon color={colors.white} strokeWidth={2} />
     </Pressable>
   );
   const increment = (
@@ -104,7 +104,7 @@ export const Counter = forwardRef<ComponentRef<typeof View>, CounterProps>(funct
       accessibilityState={{ disabled: incrementDisabled }}
       style={[styles.button, webBlurStyle, incrementDisabled && styles.buttonDisabled]}
     >
-      <PlusIcon />
+      <PlusIcon color={colors.white} strokeWidth={2} />
     </Pressable>
   );
   const valueNode = (
@@ -141,7 +141,7 @@ const styles = StyleSheet.create({
     flexDirection: "row",
     alignItems: "center",
     alignSelf: "flex-start",
-    gap: 17,
+    gap: 16,
   },
   valueFirst: {
     alignSelf: "stretch",
@@ -153,9 +153,11 @@ const styles = StyleSheet.create({
     height: BUTTON_SIZE,
     alignItems: "center",
     justifyContent: "center",
+    padding: 8,
     borderWidth: 1,
     borderColor: colors.whiteAlpha10,
     borderRadius: 39,
+    opacity: 1,
   },
   buttonDisabled: {
     opacity: 0.25,

package/src/components/DatePicker/DatePicker.tsx

@@ -75,6 +75,8 @@ const EMPTY_RANGE: DateRange = { start: null, end: null };
 
 type DatePickerBaseProps = Omit<ViewProps, "style" | "children"> & {
   placeholder?: string;
+  /** Color for the trigger label when no date is selected. Defaults to grey100. */
+  placeholderTextColor?: string;
   /** Trigger presentation. Range variants display separate start/end fields. */
   variant?: DatePickerVariant;
   /** Labels shown above the start/end values in range trigger variants. */
@@ -116,7 +118,10 @@ type DatePickerBaseProps = Omit<ViewProps, "style" | "children"> & {
   formatValue?: (date: Date) => string;
   /** First day of the week column (0 = Sunday, 1 = Monday). Defaults to Monday. */
   weekStartsOn?: 0 | 1;
-  /** Styles the calendar popup independently from the trigger width. */
+  /**
+   * Styles the calendar popup independently from the trigger width.
+   * With `hideTrigger`, `width: "100%"` stretches the day grid to the host.
+   */
   calendarStyle?: StyleProp<ViewStyle>;
   /**
    * When true, only the calendar panel is rendered (no field/trigger).
@@ -144,8 +149,7 @@ export type DatePickerRangeProps = DatePickerBaseProps & {
 export type DatePickerProps = DatePickerSingleProps | DatePickerRangeProps;
 
 const DEFAULT_WIDTH = 320;
-const DEFAULT_MENU_HEIGHT = 388;
-const MENU_CONTENT_WIDTH = 296;
+const MENU_CONTENT_WIDTH = 308;
 const RANGE_TRIGGER_WIDTH = 382;
 const TRIGGER_HEIGHT = 44;
 const TRIGGER_RADIUS = 60;
@@ -157,10 +161,10 @@ const HEADER_HEIGHT = 36;
 const WEEKDAY_ROW_HEIGHT = 44;
 const WEEKDAY_ROW_GAP = 8;
 const WEEK_ROW_GAP = 16;
-const DAY_CELL_WIDTH = 42.28571701049805;
+const DAY_CELL_WIDTH = 44;
 const DAY_CELL_HEIGHT = 44;
-const DAY_CELL_RADIUS = 67;
-const DAY_CELL_PADDING = 12;
+const DAY_CIRCLE_SIZE = 44;
+const DAY_CELL_RADIUS = 22;
 
 function RangeTriggerField({
   label,
@@ -193,6 +197,7 @@ export const DatePicker = forwardRef<ComponentRef<typeof View>, DatePickerProps>
   function DatePicker(props, forwardedRef) {
     const {
       placeholder = "Select date",
+      placeholderTextColor = colors.grey100,
       variant = "default",
       startLabel = "Start",
       endLabel = "End",
@@ -457,11 +462,16 @@ export const DatePicker = forwardRef<ComponentRef<typeof View>, DatePickerProps>
       : isOpen
         ? colors.primaryMuted
         : colors.grey700;
-    const triggerTextColor = hasValue ? colors.white : colors.grey100;
+    const triggerTextColor = hasValue || isOpen ? colors.white : placeholderTextColor;
+    const triggerIconColor = isOpen ? colors.white : colors.grey150;
     const startValue = rangeValue.start ? formatValue(rangeValue.start) : startPlaceholder;
     const endValue = rangeValue.end ? formatValue(rangeValue.end) : endPlaceholder;
 
     const resolvedAccessibilityLabel = accessibilityLabel ?? placeholder;
+    const stretchCalendar =
+      hideTrigger &&
+      (StyleSheet.flatten(calendarStyle)?.width === "100%" ||
+        StyleSheet.flatten(style)?.width === "100%");
 
     return (
       <View
@@ -471,13 +481,20 @@ export const DatePicker = forwardRef<ComponentRef<typeof View>, DatePickerProps>
           styles.root,
           usesRangeTrigger && styles.rangeRoot,
           hideTrigger && styles.rootHideTrigger,
+          stretchCalendar && styles.rootFullWidth,
           isOpen && styles.rootOpen,
           disabled && styles.disabled,
           style,
         ]}
         accessibilityState={{ disabled, expanded: isOpen }}
       >
-        <View style={[styles.triggerWrap, isOpen && styles.triggerWrapOpen]}>
+        <View
+          style={[
+            styles.triggerWrap,
+            isOpen && styles.triggerWrapOpen,
+            stretchCalendar && styles.triggerWrapFullWidth,
+          ]}
+        >
           {hideTrigger ? null : (
             <Pressable
               ref={triggerRef}
@@ -517,7 +534,7 @@ export const DatePicker = forwardRef<ComponentRef<typeof View>, DatePickerProps>
                     {triggerLabel}
                   </Text>
                   <View style={styles.iconSlot}>
-                    <CalendarOutlineIcon size={ICON_SIZE} color={colors.grey100} />
+                    <CalendarOutlineIcon size={ICON_SIZE} color={triggerIconColor} />
                   </View>
                 </>
               )}
@@ -531,14 +548,17 @@ export const DatePicker = forwardRef<ComponentRef<typeof View>, DatePickerProps>
                 usesRangeTrigger && styles.rangeMenu,
                 hideTrigger
                   ? styles.menuInline
-                  : menuAlignEnd
+                  : Platform.OS !== "web" || menuAlignEnd
                     ? styles.menuAlignEnd
                     : styles.menuAlignStart,
-                calendarStyle,
                 styles.menuFitContent,
+                stretchCalendar && styles.menuFullWidth,
+                calendarStyle,
               ]}
             >
-              <View style={styles.calendarHeader}>
+              <View
+                style={[styles.calendarHeader, stretchCalendar && styles.calendarSectionFullWidth]}
+              >
                 <Pressable
                   onPress={handlePrevMonth}
                   hitSlop={8}
@@ -566,10 +586,17 @@ export const DatePicker = forwardRef<ComponentRef<typeof View>, DatePickerProps>
                 </Pressable>
               </View>
 
-              <View style={styles.calendarGrid}>
-                <View style={styles.weekdayRow}>
+              <View
+                style={[styles.calendarGrid, stretchCalendar && styles.calendarSectionFullWidth]}
+              >
+                <View
+                  style={[styles.weekdayRow, stretchCalendar && styles.calendarSectionFullWidth]}
+                >
                   {weekdayLabels.map((weekdayLabel, index) => (
-                    <View key={`${weekdayLabel}-${index}`} style={styles.weekdayCell}>
+                    <View
+                      key={`${weekdayLabel}-${index}`}
+                      style={[styles.weekdayCell, stretchCalendar && styles.dayCellFullWidth]}
+                    >
                       <Text style={styles.weekdayText}>{weekdayLabel}</Text>
                     </View>
                   ))}
@@ -590,21 +617,9 @@ export const DatePicker = forwardRef<ComponentRef<typeof View>, DatePickerProps>
                     if (rangeIndices.length > 0) {
                       const first = rangeIndices[0];
                       const last = rangeIndices[rangeIndices.length - 1];
-                      const startsHere = isSameDay(week[first], rangeValue.start);
-                      const endsHere = isSameDay(week[last], rangeValue.end);
-                      // Tuck past the circle center so the highlight's rounded cap
-                      // sits under the endpoint circle instead of leaving a gap.
                       const cellPct = 100 / 7;
-                      const halfCellPct = cellPct / 2;
-                      const tuckPct = (12 / MENU_CONTENT_WIDTH) * 100;
-                      let leftPct = first * cellPct;
-                      let rightPct = (last + 1) * cellPct;
-                      if (startsHere) {
-                        leftPct += halfCellPct - tuckPct;
-                      }
-                      if (endsHere) {
-                        rightPct -= halfCellPct - tuckPct;
-                      }
+                      const leftPct = first * cellPct;
+                      const rightPct = (last + 1) * cellPct;
                       const widthPct = rightPct - leftPct;
                       // Same-day range: only the circle, no connector bar.
                       if (widthPct > 0) {
@@ -619,7 +634,11 @@ export const DatePicker = forwardRef<ComponentRef<typeof View>, DatePickerProps>
                   return (
                     <View
                       key={weekIndex}
-                      style={[styles.weekRow, weekIndex > 0 && styles.weekRowSpaced]}
+                      style={[
+                        styles.weekRow,
+                        weekIndex > 0 && styles.weekRowSpaced,
+                        stretchCalendar && styles.calendarSectionFullWidth,
+                      ]}
                     >
                       {rangeHighlightStyle ? (
                         <View
@@ -658,6 +677,7 @@ export const DatePicker = forwardRef<ComponentRef<typeof View>, DatePickerProps>
                         return (
                           <Pressable
                             key={dayIndex}
+                            android_ripple={{ borderless: true, color: "transparent", radius: 22 }}
                             onPress={() => handleDayPress(day)}
                             disabled={dayDisabled || dayBlocked}
                             onHoverIn={() => setHoveredDayKey(dayKey)}
@@ -668,7 +688,7 @@ export const DatePicker = forwardRef<ComponentRef<typeof View>, DatePickerProps>
                             onPressOut={() =>
                               setHoveredDayKey((current) => (current === dayKey ? null : current))
                             }
-                            style={styles.dayCellWrap}
+                            style={[styles.dayCellWrap, stretchCalendar && styles.dayCellFullWidth]}
                             accessibilityRole="button"
                             accessibilityLabel={
                               dayUnavailable
@@ -726,6 +746,10 @@ const styles = StyleSheet.create({
     width: "auto",
     gap: 0,
   },
+  rootFullWidth: {
+    width: "100%",
+    alignSelf: "stretch",
+  },
   rootOpen: {
     zIndex: 30,
   },
@@ -742,6 +766,10 @@ const styles = StyleSheet.create({
   triggerWrapOpen: {
     zIndex: 20,
   },
+  triggerWrapFullWidth: {
+    width: "100%",
+    alignSelf: "stretch",
+  },
   trigger: {
     height: TRIGGER_HEIGHT,
     borderRadius: TRIGGER_RADIUS,
@@ -832,7 +860,7 @@ const styles = StyleSheet.create({
     position: "absolute",
     top: "100%",
     alignSelf: "flex-start",
-    height: DEFAULT_MENU_HEIGHT,
+    height: "auto",
     marginTop: 8,
     zIndex: 10,
     borderRadius: MENU_RADIUS,
@@ -840,7 +868,7 @@ const styles = StyleSheet.create({
     gap: 0,
     opacity: 1,
     backgroundColor: colors.grey700,
-    overflow: "hidden",
+    overflow: "visible",
     ...Platform.select({
       web: {
         boxShadow: `0 8px 24px ${colors.black}73`,
@@ -855,6 +883,7 @@ const styles = StyleSheet.create({
     right: "auto",
   },
   menuAlignEnd: {
+    alignSelf: "flex-end",
     left: "auto",
     right: 0,
   },
@@ -865,16 +894,34 @@ const styles = StyleSheet.create({
     right: "auto",
     marginTop: 0,
   },
+  menuFullWidth: {
+    width: "100%",
+    maxWidth: "100%",
+    alignSelf: "stretch",
+    alignItems: "stretch",
+  },
+  calendarSectionFullWidth: {
+    width: "100%",
+    alignSelf: "stretch",
+  },
+  dayCellFullWidth: {
+    width: 0,
+    flexGrow: 1,
+    flexShrink: 1,
+    minWidth: 0,
+  },
   rangeMenu: {},
   menuFitContent: {
     width: MENU_CONTENT_WIDTH + MENU_PADDING * 2,
     maxWidth: MENU_CONTENT_WIDTH + MENU_PADDING * 2,
+    height: "auto",
     alignSelf: "flex-start",
     alignItems: "flex-start",
     ...(Platform.select({
       web: {
         width: "fit-content",
         maxWidth: "fit-content",
+        height: "fit-content",
       },
       default: {},
     }) as ViewStyle),
@@ -882,16 +929,18 @@ const styles = StyleSheet.create({
   calendarGrid: {
     width: MENU_CONTENT_WIDTH,
     alignSelf: "flex-start",
+    overflow: "visible",
   },
   calendarHeader: {
     width: MENU_CONTENT_WIDTH,
-    height: HEADER_HEIGHT,
+    minHeight: HEADER_HEIGHT,
     paddingTop: 8,
     paddingBottom: 8,
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "space-between",
     opacity: 1,
+    overflow: "visible",
   },
   navButton: {
     width: HEADER_HEIGHT,
@@ -905,6 +954,9 @@ const styles = StyleSheet.create({
   monthHeading: {
     ...datePickerTypography.monthHeading,
     color: colors.white,
+    flexShrink: 0,
+    includeFontPadding: true,
+    overflow: "visible",
     textAlign: "center",
   },
   weekdayRow: {
@@ -931,7 +983,9 @@ const styles = StyleSheet.create({
   },
   weekRow: {
     width: MENU_CONTENT_WIDTH,
+    height: DAY_CELL_HEIGHT,
     flexDirection: "row",
+    overflow: "visible",
     position: "relative",
   },
   weekRowSpaced: {
@@ -940,7 +994,7 @@ const styles = StyleSheet.create({
   rangeHighlight: {
     position: "absolute",
     top: 0,
-    bottom: 0,
+    height: DAY_CELL_HEIGHT,
     borderRadius: DAY_CELL_RADIUS,
     backgroundColor: colors.primaryHover,
   },
@@ -952,21 +1006,25 @@ const styles = StyleSheet.create({
     alignItems: "center",
     justifyContent: "center",
     opacity: 1,
+    overflow: "visible",
   },
   dayCircle: {
-    width: "100%",
-    height: "100%",
-    borderRadius: DAY_CELL_RADIUS,
-    padding: DAY_CELL_PADDING,
-    gap: 10,
+    width: DAY_CIRCLE_SIZE,
+    height: DAY_CIRCLE_SIZE,
+    borderRadius: 22,
+    overflow: "hidden",
     alignItems: "center",
     justifyContent: "center",
   },
   dayCircleSelected: {
     backgroundColor: colors.primary,
+    borderRadius: 22,
+    overflow: "hidden",
   },
   dayCircleBooked: {
     backgroundColor: colors.grey700,
+    borderRadius: 22,
+    overflow: "hidden",
   },
   dayTextBooked: {
     textDecorationLine: "line-through",

package/src/components/Range/Range.tsx

@@ -35,7 +35,7 @@ import {
 
 const DEFAULT_WIDTH = 347;
 const TRACK_HEIGHT = 4;
-const TRACK_HORIZONTAL_INSET = 20;
+const TRACK_HORIZONTAL_INSET = 0;
 const THUMB_SIZE = 20;
 const INPUT_WIDTH = 120;
 

package/src/components/VerificationCodeInput/VerificationCodeInput.tsx

@@ -28,7 +28,7 @@ const DEFAULT_LENGTH = 6;
 const DESKTOP_CELL_WIDTH = 54.333335876464844;
 const MOBILE_CELL_WIDTH = 45.16666793823242;
 const DESKTOP_CELL_HEIGHT = 68;
-const MOBILE_CELL_HEIGHT = 58;
+const MOBILE_CELL_HEIGHT = 68;
 const DESKTOP_GAP = 12;
 const MOBILE_GAP = 12;
 const MOBILE_BREAKPOINT = 1024;
@@ -172,8 +172,18 @@ export const VerificationCodeInput = forwardRef<
   const showErrorMessage = Boolean(error && errorMessage);
 
   return (
-    <View {...viewProps} ref={rootRef} style={[styles.wrapper, disabled && styles.disabled, style]}>
-      <View style={[styles.row, { width: rowWidth, maxWidth: "100%", gap: cellGap }]}>
+    <View
+      {...viewProps}
+      ref={rootRef}
+      style={[styles.wrapper, disabled && styles.disabled, mobile && styles.wrapperFill, style]}
+    >
+      <View
+        style={[
+          styles.row,
+          mobile ? styles.rowFill : { 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;
@@ -203,8 +213,8 @@ export const VerificationCodeInput = forwardRef<
               selectTextOnFocus
               style={[
                 styles.cell,
+                mobile ? styles.cellFill : { width: cellWidth },
                 {
-                  width: cellWidth,
                   height: cellHeight,
                   borderColor,
                   color: error ? colors.red : colors.white,
@@ -235,11 +245,25 @@ const styles = StyleSheet.create({
     alignItems: "center",
     gap: 12,
   },
+  wrapperFill: {
+    alignSelf: "stretch",
+    width: "100%",
+  },
   row: {
     minWidth: 0,
     flexDirection: "row",
     justifyContent: "center",
   },
+  rowFill: {
+    maxWidth: "100%",
+    width: "100%",
+  },
+  cellFill: {
+    flexBasis: 0,
+    flexGrow: 1,
+    flexShrink: 1,
+    width: undefined,
+  },
   disabled: {
     opacity: 0.6,
   },

package/src/icons/Backspace/BackspaceIcon.test.ts

@@ -0,0 +1,9 @@
+import { describe, expect, it } from "vitest";
+import { BACKSPACE_PATH } from "./backspacePath";
+
+describe("BackspaceIcon", () => {
+  it("uses the approved 20px path", () => {
+    expect(BACKSPACE_PATH).toContain("M14.1667 7.49992");
+    expect(BACKSPACE_PATH).toMatch(/2\.26667 10\.7999Z$/);
+  });
+});

package/src/icons/Backspace/BackspaceIcon.tsx

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

package/src/icons/Backspace/BackspaceIcon.web.tsx

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

package/src/icons/Backspace/backspacePath.ts

@@ -0,0 +1,3 @@
+/** Backspace / delete path — 20×20 viewBox. */
+export const BACKSPACE_PATH =
+  "M14.1667 7.49992L9.16667 12.4999M9.16667 7.49992L14.1667 12.4999M2.26667 10.7999L5.86667 15.5999C6.16 15.991 6.30667 16.1866 6.49254 16.3276C6.65717 16.4525 6.8436 16.5458 7.04231 16.6025C7.26667 16.6666 7.51111 16.6666 8 16.6666H14.3333C15.7335 16.6666 16.4335 16.6666 16.9683 16.3941C17.4387 16.1544 17.8212 15.772 18.0609 15.3016C18.3333 14.7668 18.3333 14.0667 18.3333 12.6666V7.33325C18.3333 5.93312 18.3333 5.23306 18.0609 4.69828C17.8212 4.22787 17.4387 3.84542 16.9683 3.60574C16.4335 3.33325 15.7335 3.33325 14.3333 3.33325H8C7.51111 3.33325 7.26667 3.33325 7.04231 3.39733C6.8436 3.45408 6.65717 3.54729 6.49254 3.67221C6.30667 3.81325 6.16 4.00881 5.86667 4.39992L2.26667 9.19992C2.05151 9.4868 1.94392 9.63024 1.90245 9.78778C1.86585 9.92684 1.86585 10.073 1.90245 10.2121C1.94392 10.3696 2.05151 10.513 2.26667 10.7999Z";

package/src/icons/Backspace/index.ts

@@ -0,0 +1 @@
+export { BackspaceIcon, BACKSPACE_PATH } from "./BackspaceIcon";

package/src/icons/Fingerprint/FingerprintIcon.test.ts

@@ -0,0 +1,9 @@
+import { describe, expect, it } from "vitest";
+import { FINGERPRINT_PATHS } from "./fingerprintPaths";
+
+describe("FingerprintIcon", () => {
+  it("uses the approved 20px paths", () => {
+    expect(FINGERPRINT_PATHS).toHaveLength(4);
+    expect(FINGERPRINT_PATHS[0]).toContain("M6.75365 17.6842");
+  });
+});

package/src/icons/Fingerprint/FingerprintIcon.tsx

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

package/src/icons/Fingerprint/FingerprintIcon.web.tsx

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

package/src/icons/Fingerprint/fingerprintPaths.ts

@@ -0,0 +1,6 @@
+export const FINGERPRINT_PATHS = [
+  "M6.75365 17.6842C5.59542 16.0313 4.91406 14.0203 4.91406 11.8489C4.91406 9.03693 7.19233 6.75781 10.0026 6.75781C12.8129 6.75781 15.0912 9.03693 15.0912 11.8489",
+  "M15.3626 16.9267C15.271 16.9317 15.1811 16.9402 15.0886 16.9402C12.2783 16.9402 10 14.6611 10 11.8491",
+  "M11.0569 18.3334C8.89484 16.9851 7.4549 14.5855 7.4549 11.8491C7.4549 10.4431 8.59446 9.30351 9.99961 9.30351C11.4048 9.30351 12.5443 10.4431 12.5443 11.8491C12.5443 13.2551 13.6839 14.3946 15.089 14.3946C16.4942 14.3946 17.6337 13.2551 17.6337 11.8491C17.6337 7.63108 14.2159 4.2124 10.0005 4.2124C5.78502 4.2124 2.36719 7.63108 2.36719 11.8491C2.36719 12.7892 2.4724 13.7048 2.66587 14.5872",
+  "M17.1077 4.88578C15.3725 2.91467 12.8354 1.6665 10.0031 1.6665C7.17073 1.6665 4.63366 2.91467 2.89844 4.88578",
+] as const;

package/src/icons/Fingerprint/index.ts

@@ -0,0 +1 @@
+export { FingerprintIcon, FINGERPRINT_PATHS } from "./FingerprintIcon";

package/src/icons/GoogleBrand/GoogleBrandIcon.test.ts

@@ -0,0 +1,14 @@
+import { describe, expect, it } from "vitest";
+import { GOOGLE_BRAND_PATHS } from "./googleBrandPaths";
+
+describe("GoogleBrandIcon", () => {
+  it("uses the approved brand-colored paths", () => {
+    expect(GOOGLE_BRAND_PATHS).toHaveLength(4);
+    expect(GOOGLE_BRAND_PATHS.map((path) => path.fill)).toEqual([
+      "#4285F4",
+      "#34A853",
+      "#FBBC05",
+      "#A63E3E",
+    ]);
+  });
+});