@ecohouse/ui 0.1.45 → 0.1.47

package/package.json

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

package/src/components/DatePicker/DatePicker.tsx

@@ -539,18 +539,20 @@ export const DatePicker = forwardRef<ComponentRef<typeof View>, DatePickerProps>
                       const last = rangeIndices[rangeIndices.length - 1];
                       const startsHere = isSameDay(week[first], rangeValue.start);
                       const endsHere = isSameDay(week[last], rangeValue.end);
-                      // Half a cell so the bar meets the circle center, not past it.
+                      // 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 widthPct = (last - first + 1) * cellPct;
+                      let rightPct = (last + 1) * cellPct;
                       if (startsHere) {
-                        leftPct += halfCellPct;
-                        widthPct -= halfCellPct;
+                        leftPct += halfCellPct - tuckPct;
                       }
                       if (endsHere) {
-                        widthPct -= halfCellPct;
+                        rightPct -= halfCellPct - tuckPct;
                       }
+                      const widthPct = rightPct - leftPct;
                       // Same-day range: only the circle, no connector bar.
                       if (widthPct > 0) {
                         rangeHighlightStyle = {

package/src/components/SegmentedToggle/SegmentedToggle.tsx

@@ -47,7 +47,6 @@ const ANIMATION_DURATION = 200;
 const OPTION_HORIZONTAL_PADDING = 16;
 const OPTION_CONTENT_GAP = 12;
 const OPTION_MIN_WIDTH = 97;
-const OPTION_MEASUREMENT_TOLERANCE = 0.5;
 const TRACK_PADDING = 4;
 const OPTION_GAP = 4;
 
@@ -91,7 +90,7 @@ export const SegmentedToggle = forwardRef<ComponentRef<typeof View>, SegmentedTo
     const setContainerRef = useMemo(() => mergeRefs(containerRef, forwardedRef), [forwardedRef]);
     const progress = useRef(new Animated.Value(selectedIndex)).current;
     const hasMounted = useRef(false);
-    const [contentWidths, setContentWidths] = useState<number[]>(() =>
+    const [measuredOptionWidths, setMeasuredOptionWidths] = useState<number[]>(() =>
       Array.from({ length: optionCount }, () => 0),
     );
     const [containerWidth, setContainerWidth] = useState(0);
@@ -99,19 +98,12 @@ export const SegmentedToggle = forwardRef<ComponentRef<typeof View>, SegmentedTo
     // Track chrome: left+right padding + gaps between options.
     const trackChrome = TRACK_PADDING * 2 + OPTION_GAP * (optionCount - 1);
     const availableOptionWidth = Math.max(0, (containerWidth - trackChrome) / optionCount);
-    const resolveContentOptionWidth = (contentWidth: number) =>
-      contentWidth > 0
-        ? Math.max(
-            OPTION_MIN_WIDTH,
-            contentWidth + OPTION_HORIZONTAL_PADDING * 2 + OPTION_MEASUREMENT_TOLERANCE,
-          )
-        : 0;
-
     const optionWidths = fullWidth
       ? Array.from({ length: optionCount }, () => availableOptionWidth)
-      : contentWidths.map((width) => resolveContentOptionWidth(width));
+      : measuredOptionWidths;
 
-    const selectedOptionWidth = optionWidths[selectedIndex] ?? 0;
+    const measurementsReady = optionWidths.every((width) => width > 0);
+    const selectedOptionWidth = measurementsReady ? (optionWidths[selectedIndex] ?? 0) : 0;
     const indicatorInputRange = options.map((_, index) => index);
     const indicatorOutputRange = buildIndicatorOutputRange(optionWidths);
     const indicatorTranslateX = progress.interpolate({
@@ -122,7 +114,7 @@ export const SegmentedToggle = forwardRef<ComponentRef<typeof View>, SegmentedTo
     useApplyWebClassName(containerRef, resolvedClassName);
 
     useEffect(() => {
-      setContentWidths((current) => {
+      setMeasuredOptionWidths((current) => {
         if (current.length === optionCount) return current;
         return Array.from({ length: optionCount }, (_, index) => current[index] ?? 0);
       });
@@ -171,32 +163,6 @@ export const SegmentedToggle = forwardRef<ComponentRef<typeof View>, SegmentedTo
         ]}
         accessibilityRole="radiogroup"
       >
-        {!fullWidth
-          ? options.map(({ value: optionValue, label, icon: Icon, showLabel = true }, index) => (
-              <View
-                key={`${optionValue}-measurement`}
-                pointerEvents="none"
-                aria-hidden
-                accessibilityElementsHidden
-                importantForAccessibility="no-hide-descendants"
-                onLayout={(event) => {
-                  const nextWidth = event.nativeEvent.layout.width;
-                  setContentWidths((currentWidths) => {
-                    if (currentWidths[index] === nextWidth) return currentWidths;
-                    const nextWidths = [...currentWidths];
-                    nextWidths[index] = nextWidth;
-                    return nextWidths;
-                  });
-                }}
-                style={styles.optionMeasurement}
-              >
-                {Icon ? <Icon size={ICON_SIZE} /> : null}
-                {showLabel ? (
-                  <Text style={[styles.label, styles.contentWidthLabel]}>{label}</Text>
-                ) : null}
-              </View>
-            ))
-          : null}
         {selectedOptionWidth > 0 ? (
           <Animated.View
             pointerEvents="none"
@@ -210,7 +176,6 @@ export const SegmentedToggle = forwardRef<ComponentRef<typeof View>, SegmentedTo
           const selected = optionValue === selectedValue;
           const iconColor = selected ? colors.primary : colors.whiteAlpha20;
           const labelColor = selected ? colors.white : colors.grey150;
-          const optionWidth = optionWidths[index] ?? 0;
 
           return (
             <Pressable
@@ -218,18 +183,45 @@ export const SegmentedToggle = forwardRef<ComponentRef<typeof View>, SegmentedTo
               onPress={() => selectOption(optionValue)}
               disabled={disabled}
               hitSlop={hitSlop}
+              onLayout={
+                fullWidth
+                  ? undefined
+                  : (event) => {
+                      const nextWidth = event.nativeEvent.layout.width;
+                      setMeasuredOptionWidths((currentWidths) => {
+                        if (currentWidths[index] === nextWidth) return currentWidths;
+                        const nextWidths = [...currentWidths];
+                        nextWidths[index] = nextWidth;
+                        return nextWidths;
+                      });
+                    }
+              }
               accessibilityRole="radio"
               accessibilityLabel={label}
               accessibilityState={{ selected, disabled }}
               style={[
                 styles.option,
-                fullWidth
-                  ? styles.optionFullWidth
-                  : [styles.optionContentWidth, optionWidth > 0 && { width: optionWidth }],
-                selected && selectedOptionWidth === 0 && styles.initialSelectedOption,
+                fullWidth ? styles.optionFullWidth : styles.optionContentWidth,
+                selected && !measurementsReady && styles.initialSelectedOption,
               ]}
             >
-              <View style={styles.optionContent}>
+              {!fullWidth ? (
+                <View
+                  aria-hidden
+                  accessibilityElementsHidden
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  style={[styles.optionContent, styles.optionSizeProbe]}
+                >
+                  {Icon ? <Icon size={ICON_SIZE} /> : null}
+                  {showLabel ? (
+                    <Text style={[styles.label, styles.selectedLabel, styles.contentWidthLabel]}>
+                      {label}
+                    </Text>
+                  ) : null}
+                </View>
+              ) : null}
+              <View style={[styles.optionContent, !fullWidth && styles.contentWidthVisibleContent]}>
                 {Icon ? <Icon size={ICON_SIZE} color={iconColor} /> : null}
                 {showLabel ? (
                   <Text
@@ -287,13 +279,17 @@ const styles = StyleSheet.create({
     alignItems: "center",
     gap: OPTION_CONTENT_GAP,
   },
-  optionMeasurement: {
-    position: "absolute",
-    flexDirection: "row",
-    alignItems: "center",
-    gap: OPTION_CONTENT_GAP,
+  optionSizeProbe: {
     opacity: 0,
   },
+  contentWidthVisibleContent: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    width: "100%",
+    height: "100%",
+    justifyContent: "center",
+  },
   optionFullWidth: {
     flex: 1,
     minWidth: 0,

package/src/icons/ActiveGuests/ActiveGuestsIcon.tsx

@@ -0,0 +1,14 @@
+import Svg, { Path } from "react-native-svg";
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+import { ACTIVE_GUESTS_PATH } from "./activeGuestsPath";
+
+export { ACTIVE_GUESTS_PATH } from "./activeGuestsPath";
+
+export function ActiveGuestsIcon({ size = 20, color = colors.primary }: IconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 20 20" fill="none">
+      <Path d={ACTIVE_GUESTS_PATH} fill={color} />
+    </Svg>
+  );
+}

package/src/icons/ActiveGuests/ActiveGuestsIcon.web.tsx

@@ -0,0 +1,20 @@
+import { ACTIVE_GUESTS_PATH } from "./activeGuestsPath";
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+
+export function ActiveGuestsIcon({ size = 20, color = colors.primary }: 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={ACTIVE_GUESTS_PATH} fill={color} />
+    </svg>
+  );
+}
+
+export { ACTIVE_GUESTS_PATH } from "./activeGuestsPath";

package/src/icons/ActiveGuests/activeGuestsPath.ts

@@ -0,0 +1,2 @@
+export const ACTIVE_GUESTS_PATH =
+  "M11.0846 10.1827C11.5293 9.79779 11.8859 9.32175 12.1304 8.78687C12.3748 8.25198 12.5013 7.67077 12.5013 7.08268C12.5013 5.97761 12.0623 4.91781 11.2809 4.1364C10.4995 3.355 9.4397 2.91602 8.33464 2.91602C7.22957 2.91602 6.16976 3.355 5.38836 4.1364C4.60696 4.91781 4.16797 5.97761 4.16797 7.08268C4.16796 7.67077 4.29447 8.25198 4.53891 8.78687C4.78334 9.32175 5.13999 9.79779 5.58464 10.1827C4.41809 10.7109 3.42836 11.564 2.73379 12.6398C2.03921 13.7156 1.6692 14.9688 1.66797 16.2493C1.66797 16.4704 1.75577 16.6823 1.91205 16.8386C2.06833 16.9949 2.28029 17.0827 2.5013 17.0827C2.72232 17.0827 2.93428 16.9949 3.09056 16.8386C3.24684 16.6823 3.33464 16.4704 3.33464 16.2493C3.33464 14.9233 3.86142 13.6515 4.7991 12.7138C5.73678 11.7761 7.00855 11.2493 8.33464 11.2493C9.66072 11.2493 10.9325 11.7761 11.8702 12.7138C12.8079 13.6515 13.3346 14.9233 13.3346 16.2493C13.3346 16.4704 13.4224 16.6823 13.5787 16.8386C13.735 16.9949 13.947 17.0827 14.168 17.0827C14.389 17.0827 14.6009 16.9949 14.7572 16.8386C14.9135 16.6823 15.0013 16.4704 15.0013 16.2493C15.0001 14.9688 14.6301 13.7156 13.9355 12.6398C13.2409 11.564 12.2512 10.7109 11.0846 10.1827ZM8.33464 9.58268C7.84018 9.58268 7.35683 9.43606 6.94571 9.16136C6.53459 8.88665 6.21416 8.49621 6.02494 8.03939C5.83572 7.58258 5.78621 7.07991 5.88267 6.59496C5.97914 6.11 6.21724 5.66455 6.56687 5.31492C6.9165 4.96528 7.36196 4.72718 7.84691 4.63072C8.33186 4.53426 8.83453 4.58376 9.29134 4.77298C9.74816 4.9622 10.1386 5.28263 10.4133 5.69376C10.688 6.10488 10.8346 6.58823 10.8346 7.08268C10.8346 7.74572 10.5712 8.38161 10.1024 8.85045C9.63356 9.31929 8.99768 9.58268 8.33464 9.58268ZM18.093 7.60768C18.0155 7.52958 17.9233 7.46758 17.8218 7.42527C17.7202 7.38297 17.6113 7.36118 17.5013 7.36118C17.3913 7.36118 17.2824 7.38297 17.1808 7.42527C17.0793 7.46758 16.9871 7.52958 16.9096 7.60768L15.243 9.27435L14.7263 8.74935C14.6488 8.67124 14.5567 8.60925 14.4551 8.56694C14.3536 8.52463 14.2446 8.50285 14.1346 8.50285C14.0246 8.50285 13.9157 8.52463 13.8142 8.56694C13.7126 8.60925 13.6204 8.67124 13.543 8.74935C13.3878 8.90548 13.3006 9.11669 13.3006 9.33685C13.3006 9.557 13.3878 9.76821 13.543 9.92435L14.6596 11.041C14.8158 11.1962 15.027 11.2833 15.2471 11.2833C15.4673 11.2833 15.6785 11.1962 15.8346 11.041L18.0596 8.81602C18.1438 8.74045 18.2116 8.64855 18.2591 8.54592C18.3066 8.44328 18.3327 8.33205 18.3358 8.21901C18.3389 8.10596 18.319 7.99347 18.2773 7.88837C18.2355 7.78327 18.1728 7.68777 18.093 7.60768Z";

package/src/icons/ActiveGuests/index.ts

@@ -0,0 +1 @@
+export { ActiveGuestsIcon, ACTIVE_GUESTS_PATH } from "./ActiveGuestsIcon";

package/src/icons/BlockedGuests/BlockedGuestsIcon.tsx

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

package/src/icons/BlockedGuests/BlockedGuestsIcon.web.tsx

@@ -0,0 +1,30 @@
+import { BLOCKED_GUESTS_PATH } from "./blockedGuestsPath";
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+
+export function BlockedGuestsIcon({
+  size = 20,
+  color = colors.primary,
+  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={BLOCKED_GUESTS_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export { BLOCKED_GUESTS_PATH } from "./blockedGuestsPath";

package/src/icons/BlockedGuests/blockedGuestsPath.ts

@@ -0,0 +1,2 @@
+export const BLOCKED_GUESTS_PATH =
+  "M14.1654 8.33333V6.66667C14.1654 4.36548 12.2999 2.5 9.9987 2.5C7.69751 2.5 5.83203 4.36548 5.83203 6.66667V8.33333M9.9987 12.0833V13.75M7.33203 17.5H12.6654C14.0655 17.5 14.7656 17.5 15.3003 17.2275C15.7707 16.9878 16.1532 16.6054 16.3929 16.135C16.6654 15.6002 16.6654 14.9001 16.6654 13.5V12.3333C16.6654 10.9332 16.6654 10.2331 16.3929 9.69836C16.1532 9.22795 15.7707 8.8455 15.3003 8.60582C14.7656 8.33333 14.0655 8.33333 12.6654 8.33333H7.33203C5.9319 8.33333 5.23183 8.33333 4.69705 8.60582C4.22665 8.8455 3.8442 9.22795 3.60451 9.69836C3.33203 10.2331 3.33203 10.9332 3.33203 12.3333V13.5C3.33203 14.9001 3.33203 15.6002 3.60451 16.135C3.8442 16.6054 4.22665 16.9878 4.69705 17.2275C5.23183 17.5 5.9319 17.5 7.33203 17.5Z";

package/src/icons/BlockedGuests/index.ts

@@ -0,0 +1 @@
+export { BlockedGuestsIcon, BLOCKED_GUESTS_PATH } from "./BlockedGuestsIcon";

package/src/icons/TotalGuests/TotalGuestsIcon.tsx

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

package/src/icons/TotalGuests/TotalGuestsIcon.web.tsx

@@ -0,0 +1,26 @@
+import { TOTAL_GUESTS_PATH } from "./totalGuestsPath";
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+
+export function TotalGuestsIcon({ size = 20, color = colors.primary, 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={TOTAL_GUESTS_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export { TOTAL_GUESTS_PATH } from "./totalGuestsPath";

package/src/icons/TotalGuests/index.ts

@@ -0,0 +1 @@
+export { TotalGuestsIcon, TOTAL_GUESTS_PATH } from "./TotalGuestsIcon";

package/src/icons/TotalGuests/totalGuestsPath.ts

@@ -0,0 +1,2 @@
+export const TOTAL_GUESTS_PATH =
+  "M13.3346 2.8898C14.5694 3.50343 15.418 4.77762 15.418 6.25C15.418 7.72238 14.5694 8.99657 13.3346 9.6102M15.0013 13.972C16.2608 14.5419 17.3951 15.4708 18.3346 16.6667M1.66797 16.6667C3.29004 14.6021 5.49228 13.3333 7.91797 13.3333C10.3437 13.3333 12.5459 14.6021 14.168 16.6667M11.668 6.25C11.668 8.32107 9.98904 10 7.91797 10C5.8469 10 4.16797 8.32107 4.16797 6.25C4.16797 4.17893 5.8469 2.5 7.91797 2.5C9.98904 2.5 11.668 4.17893 11.668 6.25Z";

package/src/icons/index.ts

@@ -5,6 +5,7 @@ export type { IconByNameProps } from "./Icon";
 export { icons, iconNames, iconGroups, iconGroupNames, getIconsByGroup } from "./registry";
 export { Icon } from "./Icon";
 
+export { ActiveGuestsIcon } from "./ActiveGuests";
 export { AmenityIcon } from "./Amenity";
 export type { AmenityIconProps, AmenityName } from "./Amenity";
 export { AlertTriangleIcon } from "./AlertTriangle";
@@ -13,6 +14,7 @@ export { ArrowLeftIcon } from "./ArrowLeft";
 export { ArrowRightIcon } from "./ArrowRight";
 export { BagIcon } from "./Bag";
 export { BanIcon } from "./Ban";
+export { BlockedGuestsIcon } from "./BlockedGuests";
 export { BellIcon } from "./Bell";
 export { BuildingIcon } from "./Building";
 export { CalendarIcon } from "./Calendar";
@@ -101,6 +103,7 @@ export { StarFilledIcon } from "./StarFilled";
 export { StarOutlineIcon } from "./StarOutline";
 export { SunIcon } from "./Sun";
 export { TableViewIcon } from "./TableView";
+export { TotalGuestsIcon } from "./TotalGuests";
 export { UserIcon } from "./User";
 export { UsersAltIcon } from "./UsersAlt";
 export { VideoIcon } from "./Video";

package/src/icons/registry.ts

@@ -1,8 +1,10 @@
+import { ActiveGuestsIcon } from "./ActiveGuests";
 import { ArrowRightIcon } from "./ArrowRight";
 import { AlertTriangleIcon } from "./AlertTriangle";
 import { AppleIcon, GooglePlayIcon } from "./Store";
 import { BagIcon } from "./Bag";
 import { BanIcon } from "./Ban";
+import { BlockedGuestsIcon } from "./BlockedGuests";
 import { BellIcon } from "./Bell";
 import { BuildingIcon } from "./Building";
 import { CalendarIcon } from "./Calendar";
@@ -88,6 +90,7 @@ import { StarFilledIcon } from "./StarFilled";
 import { StarOutlineIcon } from "./StarOutline";
 import { SunIcon } from "./Sun";
 import { TableViewIcon } from "./TableView";
+import { TotalGuestsIcon } from "./TotalGuests";
 import { UserIcon } from "./User";
 import { UsersAltIcon } from "./UsersAlt";
 import { VideoIcon } from "./Video";
@@ -97,12 +100,14 @@ import { ZoomOutIcon } from "./ZoomOut";
 import type { IconComponent } from "./types";
 
 export const icons = {
+  activeGuests: ActiveGuestsIcon,
   alertTriangle: AlertTriangleIcon,
   areaExpand: AreaExpandIcon,
   apple: AppleIcon,
   arrowRight: ArrowRightIcon,
   bag: BagIcon,
   ban: BanIcon,
+  blockedGuests: BlockedGuestsIcon,
   bell: BellIcon,
   building: BuildingIcon,
   calendar: CalendarIcon,
@@ -178,6 +183,7 @@ export const icons = {
   starOutline: StarOutlineIcon,
   sun: SunIcon,
   tableView: TableViewIcon,
+  totalGuests: TotalGuestsIcon,
   tooltipArrow: TooltipArrowIcon,
   trash: TrashIcon,
   user: UserIcon,
@@ -268,6 +274,9 @@ export const iconGroups = {
     "clock",
     "clockFilled",
     "guests",
+    "totalGuests",
+    "activeGuests",
+    "blockedGuests",
     "lock",
     "noPets",
     "noSmoking",

package/src/index.ts

@@ -218,6 +218,9 @@ export {
   TableViewIcon,
   UserIcon,
   UsersAltIcon,
+  TotalGuestsIcon,
+  ActiveGuestsIcon,
+  BlockedGuestsIcon,
   VideoIcon,
   VideoOffIcon,
   WasherIcon,

package/src/theme/typography.ts

@@ -156,7 +156,7 @@ export const selectTypography = {
   },
 } as const;
 
-/** Avatar name / email / menu-item typography — 100% line-height, 0 letter-spacing. */
+/** Avatar name / email / menu-item typography — compact line heights, 0 letter-spacing. */
 export const avatarTypography = {
   name: {
     fontFamily: fonts.sans,
@@ -176,7 +176,7 @@ export const avatarTypography = {
     fontFamily: fonts.sans,
     fontSize: 12,
     fontWeight: "600" as const,
-    lineHeight: 12,
+    lineHeight: 20,
     letterSpacing: 0,
   },
 } as const;