@timmbr/ui 1.4.2 → 1.5.0

package/dist/components/NavHeader/subcomponents/NavSearch.js

@@ -100,7 +100,7 @@ const NavSearch = ({
         "data-slot": "nav-search-trigger",
         children: [
           /* @__PURE__ */ jsx(Search, { size: 22, className: "shrink-0 stroke-[1.8]" }),
-          /* @__PURE__ */ jsx("span", { className: "font-sans font-bold text-[10px] tracking-[0.0926em] uppercase", children: "SEARCH" })
+          /* @__PURE__ */ jsx("span", { className: "font-bold text-caption tracking-[0.0926em] uppercase", children: "SEARCH" })
         ]
       }
     ),
@@ -113,7 +113,7 @@ const NavSearch = ({
         transition: { duration: 0.28, ease: [0.25, 1, 0.5, 1] },
         className: cn("relative flex flex-col", !shouldAnimate && "transition-none", motionClass),
         children: [
-          /* @__PURE__ */ jsxs("div", { className: "relative flex items-center w-full h-10 bg-white border border-grey-300 rounded-full shadow-sm focus-within:ring-2 focus-within:ring-[#C0643A]/30 focus-within:border-[#C0643A] overflow-hidden", children: [
+          /* @__PURE__ */ jsxs("div", { className: "relative flex items-center w-full h-10 bg-grey-50 border border-grey-300 rounded-full shadow-sm focus-within:ring-2 focus-within:ring-primary/30 focus-within:border-primary overflow-hidden", children: [
             /* @__PURE__ */ jsx(
               Search,
               {
@@ -134,7 +134,7 @@ const NavSearch = ({
                 onChange: (e) => onChange(e.target.value),
                 onFocus: () => setShowPopover(true),
                 onKeyDown: handleKeyDown,
-                className: "w-full h-full pl-10 pr-9 bg-transparent text-sm text-[#1A1A1A] placeholder:text-grey-400 border-none focus:outline-none [&::-webkit-search-cancel-button]:hidden [&::-webkit-search-decoration]:hidden",
+                className: "w-full h-full pl-10 pr-9 bg-transparent text-body-2 text-grey-950 placeholder:text-grey-400 border-none focus:outline-none [&::-webkit-search-cancel-button]:hidden [&::-webkit-search-decoration]:hidden",
                 "data-slot": "nav-search-input"
               }
             ),
@@ -165,7 +165,7 @@ const NavSearch = ({
               className: cn(searchPopoverCardVariants(), !shouldAnimate && "transition-none", motionClass),
               "data-slot": "nav-search-popover",
               children: popoverContent ? popoverContent : /* @__PURE__ */ jsxs("div", { children: [
-                popularSearchesTitle && /* @__PURE__ */ jsx("h4", { className: "font-sans font-bold text-sm tracking-wide text-[#E11D48] mb-3 uppercase flex items-center gap-1.5", children: /* @__PURE__ */ jsx("span", { children: popularSearchesTitle }) }),
+                popularSearchesTitle && /* @__PURE__ */ jsx("h4", { className: "font-bold text-body-2 tracking-wide text-destructive mb-3 uppercase flex items-center gap-1.5", children: /* @__PURE__ */ jsx("span", { children: popularSearchesTitle }) }),
                 /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: popularSearches.map((tag, idx) => {
                   const resolvedTagHref = resolveNavDestination(tag.href, tag.zone, globalConfig.zones?.zones);
                   const requiresCrossZone = isCrossZoneNavigation(tag.zone, globalConfig.zones?.currentZone);
@@ -173,7 +173,7 @@ const NavSearch = ({
                     /* @__PURE__ */ jsx(TrendingUp, { size: 13, className: "text-grey-500 shrink-0" }),
                     /* @__PURE__ */ jsx("span", { children: tag.label })
                   ] });
-                  const tagClass = "inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg border border-grey-200 bg-white hover:border-grey-400 hover:bg-grey-50 text-xs font-medium text-grey-800 transition-all cursor-pointer";
+                  const tagClass = "inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg border border-grey-200 bg-grey-50 hover:border-grey-400 hover:bg-grey-50 text-body-3 font-medium text-grey-800 transition-all cursor-pointer";
                   if (resolvedTagHref) {
                     if (CustomLink && !requiresCrossZone) {
                       return /* @__PURE__ */ jsx(

package/dist/components/NavHeader/subcomponents/OfferBanner.js

@@ -80,7 +80,7 @@ const OfferBanner = ({
             type: "button",
             onClick: handleDismiss,
             "aria-label": "Dismiss offer banner",
-            className: "absolute right-3 top-1/2 -translate-y-1/2 p-1 text-[#F7F1E6]/70 hover:text-[#F7F1E6] hover:bg-white/10 rounded transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-white",
+            className: "absolute right-3 top-1/2 -translate-y-1/2 p-1 text-bg-2/70 hover:text-bg-2 hover:bg-grey-50/10 rounded transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-grey-50",
             children: /* @__PURE__ */ jsx(X, { size: 14 })
           }
         )

package/dist/components/OtpInput/OtpInput.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import type { OtpInputProps } from './OtpInput.types';
+export declare const OtpInput: React.ForwardRefExoticComponent<OtpInputProps & React.RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=OtpInput.d.ts.map

package/dist/components/OtpInput/OtpInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OtpInput.d.ts","sourceRoot":"","sources":["../../../src/components/OtpInput/OtpInput.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAAE,aAAa,EAAgB,MAAM,kBAAkB,CAAC;AAsCpE,eAAO,MAAM,QAAQ,wFAwEpB,CAAC"}

package/dist/components/OtpInput/OtpInput.js

@@ -0,0 +1,114 @@
+"use client";
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import * as React from 'react';
+import { OTPInput } from 'input-otp';
+import { cn } from '@timmbr/utils';
+import { otpContainerVariants, otpSlotVariants } from './OtpInput.styles.js';
+
+function OtpSlot({
+  char,
+  isActive,
+  hasFakeCaret,
+  variant = "default",
+  size = "md",
+  error = false,
+  disabled = false,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "otp-slot",
+      className: cn(
+        otpSlotVariants({
+          variant,
+          size,
+          isActive,
+          hasError: error
+        }),
+        className
+      ),
+      children: [
+        char,
+        hasFakeCaret && !disabled && /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-slot": "otp-caret",
+            className: "pointer-events-none absolute inset-0 flex items-center justify-center",
+            children: /* @__PURE__ */ jsx("div", { className: "h-4 w-0.5 animate-caret-blink bg-primary duration-1000" })
+          }
+        )
+      ]
+    }
+  );
+}
+const OtpInput = React.forwardRef(
+  ({
+    length = 6,
+    value,
+    defaultValue,
+    onChange,
+    onComplete,
+    variant = "default",
+    size = "md",
+    error = false,
+    disabled = false,
+    autoFocus = false,
+    containerClassName,
+    className,
+    ...props
+  }, ref) => {
+    const hasError = Boolean(error);
+    const errorId = React.useId();
+    const errorText = typeof error === "string" && error.length > 0 ? error : null;
+    return /* @__PURE__ */ jsxs("div", { "data-slot": "otp-input-root", className: "w-full flex flex-col items-center", children: [
+      /* @__PURE__ */ jsx(
+        OTPInput,
+        {
+          ref,
+          maxLength: length,
+          value,
+          defaultValue,
+          onChange,
+          onComplete,
+          disabled,
+          autoFocus,
+          "aria-invalid": hasError || void 0,
+          "aria-describedby": errorText ? errorId : void 0,
+          containerClassName: cn(
+            otpContainerVariants({ disabled }),
+            containerClassName
+          ),
+          className: cn("disabled:cursor-not-allowed", className),
+          render: ({ slots }) => /* @__PURE__ */ jsx(Fragment, { children: slots.map((slot, idx) => /* @__PURE__ */ jsx(
+            OtpSlot,
+            {
+              char: slot.char,
+              isActive: slot.isActive,
+              hasFakeCaret: slot.hasFakeCaret,
+              variant,
+              size,
+              error: hasError,
+              disabled
+            },
+            idx
+          )) }),
+          ...props
+        }
+      ),
+      errorText && /* @__PURE__ */ jsx(
+        "p",
+        {
+          id: errorId,
+          role: "alert",
+          "data-slot": "otp-error",
+          className: "mt-2 text-body-3 text-destructive text-center font-medium",
+          children: errorText
+        }
+      )
+    ] });
+  }
+);
+OtpInput.displayName = "OtpInput";
+
+export { OtpInput };

package/dist/components/OtpInput/OtpInput.styles.d.ts

@@ -0,0 +1,10 @@
+export declare const otpContainerVariants: (props?: ({
+    disabled?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const otpSlotVariants: (props?: ({
+    variant?: "default" | "underline" | "filled" | null | undefined;
+    size?: "sm" | "lg" | "md" | null | undefined;
+    isActive?: boolean | null | undefined;
+    hasError?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+//# sourceMappingURL=OtpInput.styles.d.ts.map

package/dist/components/OtpInput/OtpInput.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OtpInput.styles.d.ts","sourceRoot":"","sources":["../../../src/components/OtpInput/OtpInput.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,oBAAoB;;8EAahC,CAAC;AAEF,eAAO,MAAM,eAAe;;;;;8EAiC3B,CAAC"}

package/dist/components/OtpInput/OtpInput.styles.js

@@ -0,0 +1,49 @@
+import { cva } from 'class-variance-authority';
+
+const otpContainerVariants = cva(
+  "flex items-center gap-2 select-none justify-center",
+  {
+    variants: {
+      disabled: {
+        true: "opacity-50 cursor-not-allowed pointer-events-none",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      disabled: false
+    }
+  }
+);
+const otpSlotVariants = cva(
+  "relative flex items-center justify-center tabular-nums font-semibold transition-all duration-150",
+  {
+    variants: {
+      variant: {
+        default: "rounded-lg border bg-bg-1/30 border-border-warm text-grey-950",
+        filled: "rounded-lg border border-transparent bg-bg-1 text-grey-950",
+        underline: "rounded-none border-b-2 border-t-0 border-x-0 border-border-warm bg-transparent text-grey-950"
+      },
+      size: {
+        sm: "w-8 h-10 text-body-1",
+        md: "w-11 h-13 text-h5",
+        lg: "w-13 h-15 text-h4"
+      },
+      isActive: {
+        true: "border-primary ring-2 ring-primary/25 z-10",
+        false: ""
+      },
+      hasError: {
+        true: "!border-destructive !ring-destructive/20 text-destructive",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "md",
+      isActive: false,
+      hasError: false
+    }
+  }
+);
+
+export { otpContainerVariants, otpSlotVariants };

package/dist/components/OtpInput/OtpInput.types.d.ts

@@ -0,0 +1,40 @@
+import type { ComponentPropsWithoutRef } from 'react';
+export type OtpInputVariant = 'default' | 'filled' | 'underline';
+export type OtpInputSize = 'sm' | 'md' | 'lg';
+export interface OtpInputProps extends Omit<ComponentPropsWithoutRef<'input'>, 'size' | 'onChange' | 'value' | 'defaultValue' | 'children'> {
+    /** Number of OTP character slots. Defaults to 6. */
+    length?: number;
+    /** Controlled value */
+    value?: string;
+    /** Default uncontrolled value */
+    defaultValue?: string;
+    /** Callback fired on character change */
+    onChange?: (value: string) => void;
+    /** Callback fired when all slots are filled */
+    onComplete?: (value: string) => void;
+    /** Visual variant. Defaults to 'default'. */
+    variant?: OtpInputVariant;
+    /** Size scale. Defaults to 'md'. */
+    size?: OtpInputSize;
+    /** Error state or error message */
+    error?: boolean | string;
+    /** Whether the input is disabled */
+    disabled?: boolean;
+    /** Whether to focus automatically on mount */
+    autoFocus?: boolean;
+    /** Custom wrapper class */
+    containerClassName?: string;
+    /** Explicitly disallow children as OtpInput uses internal slot rendering */
+    children?: never;
+}
+export interface OtpSlotProps {
+    char: string | null;
+    isActive: boolean;
+    hasFakeCaret: boolean;
+    variant?: OtpInputVariant;
+    size?: OtpInputSize;
+    error?: boolean;
+    disabled?: boolean;
+    className?: string;
+}
+//# sourceMappingURL=OtpInput.types.d.ts.map

package/dist/components/OtpInput/OtpInput.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OtpInput.types.d.ts","sourceRoot":"","sources":["../../../src/components/OtpInput/OtpInput.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,OAAO,CAAC;AAEtD,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,QAAQ,GAAG,WAAW,CAAC;AACjE,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE9C,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,wBAAwB,CAAC,OAAO,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,OAAO,GAAG,cAAc,GAAG,UAAU,CAAC;IAC5G,oDAAoD;IACpD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,uBAAuB;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iCAAiC;IACjC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,yCAAyC;IACzC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,+CAA+C;IAC/C,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,6CAA6C;IAC7C,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,oCAAoC;IACpC,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,mCAAmC;IACnC,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACzB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8CAA8C;IAC9C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,2BAA2B;IAC3B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,4EAA4E;IAC5E,QAAQ,CAAC,EAAE,KAAK,CAAC;CAClB;AAED,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB,QAAQ,EAAE,OAAO,CAAC;IAClB,YAAY,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}

package/dist/components/OtpInput/index.d.ts

@@ -0,0 +1,4 @@
+export * from './OtpInput';
+export * from './OtpInput.types';
+export * from './OtpInput.styles';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/OtpInput/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/OtpInput/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC"}

package/dist/components/Pagination/Pagination.styles.js

@@ -1,17 +1,17 @@
 import { cva } from 'class-variance-authority';
 
 const paginationLinkVariants = cva(
-  "inline-flex items-center justify-center whitespace-nowrap rounded-[2px] font-sans text-xs font-semibold transition-all duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 cursor-pointer active:scale-95",
+  "inline-flex items-center justify-center whitespace-nowrap rounded-[2px] text-body-3 font-semibold transition-all duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 cursor-pointer active:scale-95",
   {
     variants: {
       isActive: {
-        true: "bg-primary text-white shadow-xs hover:bg-primary-600",
+        true: "bg-primary text-grey-50 shadow-xs hover:bg-primary-600",
         false: "text-foreground hover:bg-grey-100 dark:hover:bg-grey-800 border border-grey-200 dark:border-grey-800"
       },
       size: {
         sm: "h-8 min-w-8 px-2",
         default: "h-9 min-w-9 px-3",
-        lg: "h-11 min-w-11 px-4 text-sm"
+        lg: "h-11 min-w-11 px-4 text-body-2"
       }
     },
     defaultVariants: {

package/dist/components/Popover/Popover.styles.js

@@ -1,7 +1,7 @@
 import { cva } from 'class-variance-authority';
 
 const popoverContentVariants = cva(
-  "z-50 w-72 rounded-md border border-grey-200 dark:border-grey-700 bg-white dark:bg-grey-900 p-4 text-foreground shadow-md outline-none font-sans transition-all duration-150 data-[state=open]:animate-scale-in data-[state=closed]:animate-scale-out"
+  "z-50 w-72 rounded-md border border-grey-200 dark:border-grey-700 bg-grey-50 dark:bg-grey-900 p-4 text-foreground shadow-md outline-none font-sans transition-all duration-150 data-[state=open]:animate-scale-in data-[state=closed]:animate-scale-out"
 );
 
 export { popoverContentVariants };

package/dist/components/Progress/Progress.js

@@ -24,9 +24,9 @@ const Progress = React.forwardRef(
     const safeValue = Math.min(Math.max(value ?? 0, 0), max);
     const percentage = Math.round(safeValue / max * 100);
     return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-1.5 w-full font-sans", className), children: [
-      (label || showValue) && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-xs text-foreground font-medium select-none", children: [
+      (label || showValue) && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-body-3 text-foreground font-medium select-none", children: [
         label && /* @__PURE__ */ jsx("span", { children: label }),
-        showValue && !indeterminate && /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground font-mono ml-auto", children: [
+        showValue && !indeterminate && /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground tabular-nums ml-auto", children: [
           percentage,
           "%"
         ] })

package/dist/components/Radio/Radio.js

@@ -50,13 +50,13 @@ const RadioItem = React.forwardRef(
           {
             htmlFor: id,
             className: cn(
-              "text-sm font-medium text-foreground cursor-pointer leading-tight",
+              "text-body-2 font-medium text-foreground cursor-pointer leading-tight",
               disabled && "opacity-50 cursor-not-allowed"
             ),
             children: label
           }
         ),
-        description && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground mt-0.5 leading-normal", children: description })
+        description && /* @__PURE__ */ jsx("span", { className: "text-body-3 text-muted-foreground mt-0.5 leading-normal", children: description })
       ] })
     ] });
   }
@@ -79,7 +79,7 @@ const RadioGroup = React.forwardRef(
     const isError = Boolean(error);
     const errorMessage = typeof error === "string" ? error : void 0;
     return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 font-sans w-full", style, children: [
-      label && /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold text-foreground tracking-wide select-none", children: label }),
+      label && /* @__PURE__ */ jsx("span", { className: "text-body-3 font-semibold text-foreground tracking-wide select-none", children: label }),
       /* @__PURE__ */ jsx(
         RadioGroupPrimitive.Root,
         {
@@ -110,7 +110,7 @@ const RadioGroup = React.forwardRef(
         "p",
         {
           className: cn(
-            "text-xs mt-1 flex items-center gap-1.5",
+            "text-body-3 mt-1 flex items-center gap-1.5",
             isError ? "text-destructive font-medium" : "text-muted"
           ),
           children: [

package/dist/components/Radio/Radio.styles.js

@@ -1,7 +1,7 @@
 import { cva } from 'class-variance-authority';
 
 const radioItemVariants = cva(
-  "aspect-square rounded-full border border-grey-300 dark:border-grey-700 bg-white dark:bg-grey-900 text-primary transition-all duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 cursor-pointer flex items-center justify-center data-[state=checked]:border-primary",
+  "aspect-square rounded-full border border-grey-300 dark:border-grey-700 bg-grey-50 dark:bg-grey-900 text-primary transition-all duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 cursor-pointer flex items-center justify-center data-[state=checked]:border-primary",
   {
     variants: {
       size: {

package/dist/components/RangeSlider/RangeSlider.js

@@ -57,7 +57,7 @@ const RangeSlider = React.forwardRef(
         className: cn("flex flex-col gap-2 w-full font-sans select-none", className),
         style,
         children: [
-          (label || showReadouts) && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-sm", children: [
+          (label || showReadouts) && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-body-2", children: [
             label && /* @__PURE__ */ jsx("span", { className: "font-semibold text-foreground", children: label }),
             showReadouts && /* @__PURE__ */ jsxs(
               "div",
@@ -112,7 +112,7 @@ const RangeSlider = React.forwardRef(
                 type: "button",
                 onClick: handleReset,
                 disabled,
-                className: "text-xs font-medium text-muted hover:text-foreground transition-colors cursor-pointer disabled:opacity-50",
+                className: "text-body-3 font-medium text-muted hover:text-foreground transition-colors cursor-pointer disabled:opacity-50",
                 children: resetLabel
               }
             ),
@@ -123,7 +123,7 @@ const RangeSlider = React.forwardRef(
                 variant: "primary",
                 onClick: handleApply,
                 disabled,
-                className: "h-8 px-4 text-xs font-medium",
+                className: "h-8 px-4 text-body-3 font-medium",
                 children: applyLabel
               }
             )

package/dist/components/RangeSlider/RangeSlider.styles.js

@@ -10,7 +10,7 @@ const rangeSliderRangeVariants = cva(
   "absolute h-full bg-primary rounded-full"
 );
 const rangeSliderThumbVariants = cva(
-  "block h-5 w-5 rounded-full border-2 border-primary bg-white shadow-md transition-transform hover:scale-110 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 cursor-grab active:cursor-grabbing"
+  "block h-5 w-5 rounded-full border-2 border-primary bg-grey-50 shadow-md transition-transform hover:scale-110 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 cursor-grab active:cursor-grabbing"
 );
 
 export { rangeSliderRangeVariants, rangeSliderRootVariants, rangeSliderThumbVariants, rangeSliderTrackVariants };

package/dist/components/Select/Select.js

@@ -38,7 +38,7 @@ const Select = React.forwardRef(
         className: cn("flex flex-col gap-1.5 w-full font-sans", containerClassName),
         style,
         children: [
-          label && /* @__PURE__ */ jsx("label", { className: "text-xs font-semibold text-foreground tracking-wide select-none", children: label }),
+          label && /* @__PURE__ */ jsx("label", { className: "text-body-3 font-semibold text-foreground tracking-wide select-none", children: label }),
           /* @__PURE__ */ jsxs(
             SelectPrimitive.Root,
             {
@@ -101,7 +101,7 @@ const Select = React.forwardRef(
             "p",
             {
               className: cn(
-                "text-xs mt-1 flex items-center gap-1.5",
+                "text-body-3 mt-1 flex items-center gap-1.5",
                 isError ? "text-destructive font-medium" : "text-muted"
               ),
               children: [

package/dist/components/Select/Select.styles.js

@@ -5,14 +5,14 @@ const selectTriggerVariants = cva(
   {
     variants: {
       variant: {
-        outline: "border-grey-300 dark:border-grey-700 bg-white dark:bg-grey-900 focus:border-primary focus:ring-primary/20",
-        filled: "border-transparent bg-grey-100 dark:bg-grey-800 focus:bg-white dark:focus:bg-grey-900 focus:border-primary focus:ring-primary/20"
+        outline: "border-grey-300 dark:border-grey-700 bg-grey-50 dark:bg-grey-900 focus:border-primary focus:ring-primary/20",
+        filled: "border-transparent bg-grey-100 dark:bg-grey-800 focus:bg-grey-50 dark:focus:bg-grey-900 focus:border-primary focus:ring-primary/20"
       },
       size: {
-        sm: "h-9 px-3 text-xs",
-        default: "h-11 px-3.5 text-sm",
-        md: "h-11 px-3.5 text-sm",
-        lg: "h-[52px] px-4 text-base"
+        sm: "h-9 px-3 text-body-3",
+        default: "h-11 px-3.5 text-body-2",
+        md: "h-11 px-3.5 text-body-2",
+        lg: "h-[52px] px-4 text-body-1"
       },
       isError: {
         true: "border-destructive focus:border-destructive focus:ring-destructive/20 text-destructive",
@@ -27,10 +27,10 @@ const selectTriggerVariants = cva(
   }
 );
 const selectContentVariants = cva(
-  "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border border-grey-200 dark:border-grey-700 bg-white dark:bg-grey-900 text-foreground shadow-md transition-all font-sans p-1"
+  "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border border-grey-200 dark:border-grey-700 bg-grey-50 dark:bg-grey-900 text-foreground shadow-md transition-all font-sans p-1"
 );
 const selectItemVariants = cva(
-  "relative flex w-full cursor-pointer select-none items-center rounded-sm py-2 pl-8 pr-2 text-sm outline-none transition-colors hover:bg-grey-100 dark:hover:bg-grey-800 focus:bg-grey-100 dark:focus:bg-grey-800 focus:text-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
+  "relative flex w-full cursor-pointer select-none items-center rounded-sm py-2 pl-8 pr-2 text-body-2 outline-none transition-colors hover:bg-grey-100 dark:hover:bg-grey-800 focus:bg-grey-100 dark:focus:bg-grey-800 focus:text-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
 );
 
 export { selectContentVariants, selectItemVariants, selectTriggerVariants };

package/dist/components/SideBarNavigation/SideBarNavigation.styles.js

@@ -1,7 +1,7 @@
 import { cva } from 'class-variance-authority';
 
 const sidebarContainerVariants = cva(
-  "relative flex flex-col h-screen max-h-screen bg-white border-r border-grey-200 select-none",
+  "relative flex flex-col h-screen max-h-screen bg-grey-50 border-r border-grey-200 select-none",
   {
     variants: {
       collapsed: {
@@ -25,14 +25,14 @@ const sidebarContainerVariants = cva(
   }
 );
 const sidebarToggleVariants = cva(
-  "absolute -right-3.5 top-6 z-30 flex size-7 items-center justify-center rounded-full bg-white border border-grey-200 text-grey-600 shadow-xs hover:bg-grey-50 hover:text-grey-900 hover:shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary cursor-pointer transition-all duration-150"
+  "absolute -right-3.5 top-6 z-30 flex size-7 items-center justify-center rounded-full bg-grey-50 border border-grey-200 text-grey-600 shadow-xs hover:bg-grey-50 hover:text-grey-900 hover:shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary cursor-pointer transition-all duration-150"
 );
 const navItemVariants = cva(
-  "group relative flex items-center gap-3 rounded-lg text-sm transition-all duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary cursor-pointer select-none",
+  "group relative flex items-center gap-3 rounded-lg text-body-2 transition-all duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary cursor-pointer select-none",
   {
     variants: {
       active: {
-        true: "bg-primary text-white shadow-xs font-medium",
+        true: "bg-primary text-grey-50 shadow-xs font-medium",
         false: "text-grey-700 hover:bg-grey-100 hover:text-grey-900"
       },
       collapsed: {
@@ -47,17 +47,17 @@ const navItemVariants = cva(
   }
 );
 const navBadgeVariants = cva(
-  "inline-flex items-center justify-center rounded-full text-xs font-semibold shrink-0 transition-colors",
+  "inline-flex items-center justify-center rounded-full text-body-3 font-semibold shrink-0 transition-colors",
   {
     variants: {
       variant: {
-        destructive: "bg-red-500 text-white px-2 py-0.5",
+        destructive: "bg-destructive text-grey-50 px-2 py-0.5",
         primary: "bg-primary-100 text-primary-800 px-2 py-0.5",
         secondary: "bg-grey-100 text-grey-700 px-2 py-0.5",
         outline: "border border-grey-200 text-grey-700 px-1.5 py-0.5"
       },
       collapsed: {
-        true: "absolute -top-1 -right-1 size-4 p-0 text-[10px] leading-none",
+        true: "absolute -top-1 -right-1 size-4 p-0 text-caption leading-none",
         false: "ml-auto"
       }
     },
@@ -68,7 +68,7 @@ const navBadgeVariants = cva(
   }
 );
 const subItemVariants = cva(
-  "flex items-center gap-2.5 w-full rounded-md px-3 py-2 text-xs transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary cursor-pointer",
+  "flex items-center gap-2.5 w-full rounded-md px-3 py-2 text-body-3 transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary cursor-pointer",
   {
     variants: {
       active: {

package/dist/components/SideBarNavigation/subcomponents/SidebarBranding.js

@@ -14,7 +14,7 @@ const SidebarBranding = ({
     "div",
     {
       "data-testid": "sidebar-logo-placeholder",
-      className: "size-8 rounded-lg border border-grey-300 bg-grey-100 flex items-center justify-center shrink-0 text-grey-400 text-xs font-semibold",
+      className: "size-8 rounded-lg border border-grey-300 bg-grey-100 flex items-center justify-center shrink-0 text-grey-400 text-body-3 font-semibold",
       children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Logo" })
     }
   );
@@ -37,8 +37,8 @@ const SidebarBranding = ({
             variants: shouldAnimate ? sidebarContentFadeVariants : void 0,
             className: "flex flex-col min-w-0 overflow-hidden whitespace-nowrap",
             children: [
-              /* @__PURE__ */ jsx("span", { className: "font-sans font-bold text-base text-grey-900 truncate tracking-tight", children: branding?.title || "Timmbr Console" }),
-              branding?.subtitle && /* @__PURE__ */ jsx("span", { className: "font-sans text-xs text-grey-500 truncate", children: branding.subtitle })
+              /* @__PURE__ */ jsx("span", { className: "font-bold text-body-1 text-grey-900 truncate tracking-tight", children: branding?.title || "Timmbr Console" }),
+              branding?.subtitle && /* @__PURE__ */ jsx("span", { className: "text-body-3 text-grey-500 truncate", children: branding.subtitle })
             ]
           },
           "sidebar-branding-text"

package/dist/components/SideBarNavigation/subcomponents/SidebarFooter.js

@@ -15,7 +15,7 @@ const SidebarFooter = ({
     {
       "data-testid": "sidebar-footer",
       className: cn(
-        "mt-auto border-t border-grey-100 bg-white shrink-0 overflow-hidden",
+        "mt-auto border-t border-grey-100 bg-grey-50 shrink-0 overflow-hidden",
         collapsed ? "p-2 flex flex-col items-center gap-1" : "p-3",
         className
       ),

package/dist/components/SideBarNavigation/subcomponents/SidebarPopoverMenu.js

@@ -69,18 +69,18 @@ const SidebarPopoverMenu = ({
             onMouseEnter: handleMouseEnter,
             onMouseLeave: handleMouseLeave,
             className: cn(
-              "z-50 min-w-48 rounded-lg bg-white p-2 text-grey-900 shadow-md border border-grey-200 outline-none animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+              "z-50 min-w-48 rounded-lg bg-grey-50 p-2 text-grey-900 shadow-md border border-grey-200 outline-none animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
               !shouldAnimate && "animate-none transition-none"
             ),
             children: [
               /* @__PURE__ */ jsxs("div", { className: "px-3 py-1.5 border-b border-grey-100 mb-1 flex items-center justify-between", children: [
-                /* @__PURE__ */ jsx("span", { className: "font-semibold text-xs text-grey-900 tracking-tight", children: item.label }),
+                /* @__PURE__ */ jsx("span", { className: "font-semibold text-body-3 text-grey-900 tracking-tight", children: item.label }),
                 item.badge !== void 0 && /* @__PURE__ */ jsx(
                   "span",
                   {
                     className: cn(
-                      "inline-flex items-center justify-center rounded-full px-1.5 py-0.2 text-[10px] font-semibold",
-                      item.badgeVariant === "destructive" ? "bg-red-500 text-white" : "bg-grey-100 text-grey-800"
+                      "inline-flex items-center justify-center rounded-full px-1.5 py-0.2 text-caption font-semibold",
+                      item.badgeVariant === "destructive" ? "bg-destructive text-grey-50" : "bg-grey-100 text-grey-800"
                     ),
                     children: item.badge
                   }