@syscore/ui-library 1.27.3 → 2.0.0

package/dist/index.es.js

@@ -1,9 +1,9 @@
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import * as React from "react";
 import { useState, useEffect, useCallback, useRef, useLayoutEffect, createContext, Children, isValidElement, cloneElement, useContext, useMemo } from "react";
-import { motion, AnimatePresence, animate, useMotionValue } from "motion/react";
 import { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
+import { motion, AnimatePresence, animate, useMotionValue } from "motion/react";
 import { cva } from "class-variance-authority";
 import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio";
 import * as SeparatorPrimitive from "@radix-ui/react-separator";
@@ -38,6 +38,7 @@ import useEmblaCarousel from "embla-carousel-react";
 import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
 import * as ToastPrimitives from "@radix-ui/react-toast";
 import * as RechartsPrimitive from "recharts";
+import { format } from "date-fns";
 import { useTheme } from "next-themes";
 import { Toaster as Toaster$2 } from "sonner";
 function cn(...inputs) {
@@ -47,6 +48,656 @@ function capitalize(str) {
   if (!str) return str;
   return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
 }
+const DENSITY_HEIGHT = {
+  default: 64,
+  comfortable: 56,
+  compact: 48,
+  prominent: 128
+};
+const AppBar = React.forwardRef(
+  ({
+    className,
+    children,
+    collapse = false,
+    rounded = false,
+    elevated = false,
+    flat = false,
+    position = "fixed",
+    color = "default",
+    density = "default",
+    image,
+    imageOverlay,
+    style,
+    ...props
+  }, ref) => {
+    const height = DENSITY_HEIGHT[density];
+    const isProminent = density === "prominent";
+    return /* @__PURE__ */ jsxs(
+      "header",
+      {
+        ref,
+        role: "banner",
+        style: {
+          height: collapse ? void 0 : height,
+          ...style
+        },
+        className: cn(
+          "app-bar",
+          // position
+          position === "fixed" && "app-bar--fixed",
+          position === "sticky" && "app-bar--sticky",
+          position === "relative" && "app-bar--relative",
+          position === "static" && "app-bar--static",
+          // color variants
+          color === "primary" && "app-bar--primary",
+          color === "transparent" && "app-bar--transparent",
+          // density
+          density === "comfortable" && "app-bar--comfortable",
+          density === "compact" && "app-bar--compact",
+          isProminent && "app-bar--prominent",
+          // modifiers
+          rounded && "app-bar--rounded",
+          elevated && "app-bar--elevated",
+          flat && "app-bar--flat",
+          collapse && "app-bar--collapse",
+          // image
+          image && "app-bar--image",
+          className
+        ),
+        ...props,
+        children: [
+          image && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "app-bar-image-layer",
+              style: { backgroundImage: `url(${image})` },
+              "aria-hidden": "true",
+              children: imageOverlay && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "app-bar-image-overlay",
+                  style: {
+                    background: `linear-gradient(${imageOverlay})`
+                  }
+                }
+              )
+            }
+          ),
+          isProminent ? /* @__PURE__ */ jsx(ProminentLayout, { children }) : children
+        ]
+      }
+    );
+  }
+);
+AppBar.displayName = "AppBar";
+const AppBarNavIcon = React.forwardRef(
+  ({ className, icon, children, ...props }, ref) => /* @__PURE__ */ jsx(
+    "button",
+    {
+      ref,
+      type: "button",
+      "aria-label": "Open navigation menu",
+      className: cn("app-bar-nav-icon", className),
+      ...props,
+      children: children ?? icon ?? /* @__PURE__ */ jsx(HamburgerIcon, {})
+    }
+  )
+);
+AppBarNavIcon.displayName = "AppBarNavIcon";
+const AppBarTitle = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn("app-bar-title", className),
+      ...props
+    }
+  )
+);
+AppBarTitle.displayName = "AppBarTitle";
+const AppBarPrepend = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn("app-bar-prepend", className),
+      ...props
+    }
+  )
+);
+AppBarPrepend.displayName = "AppBarPrepend";
+const AppBarAppend = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn("app-bar-append", className),
+      ...props
+    }
+  )
+);
+AppBarAppend.displayName = "AppBarAppend";
+const AppBarContent = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn("app-bar-content", className),
+      ...props
+    }
+  )
+);
+AppBarContent.displayName = "AppBarContent";
+function ProminentLayout({ children }) {
+  const kids = React.Children.toArray(children);
+  const topKids = kids.filter((child) => {
+    if (!React.isValidElement(child)) return false;
+    const name = child.type.displayName ?? "";
+    return name === "AppBarPrepend" || name === "AppBarAppend";
+  });
+  const bottomKids = kids.filter((child) => {
+    if (!React.isValidElement(child)) return false;
+    const name = child.type.displayName ?? "";
+    return name === "AppBarTitle" || name === "AppBarContent";
+  });
+  const otherKids = kids.filter((child) => {
+    if (!React.isValidElement(child)) return true;
+    const name = child.type.displayName ?? "";
+    return ![
+      "AppBarPrepend",
+      "AppBarAppend",
+      "AppBarTitle",
+      "AppBarContent"
+    ].includes(name);
+  });
+  return /* @__PURE__ */ jsxs("span", { className: "app-bar-prominent-inner", children: [
+    /* @__PURE__ */ jsxs("span", { className: "app-bar-prominent-top", children: [
+      topKids,
+      otherKids
+    ] }),
+    /* @__PURE__ */ jsx("span", { className: "app-bar-prominent-bottom", children: bottomKids })
+  ] });
+}
+function HamburgerIcon() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx("line", { x1: "4", y1: "6", x2: "20", y2: "6" }),
+        /* @__PURE__ */ jsx("line", { x1: "4", y1: "12", x2: "20", y2: "12" }),
+        /* @__PURE__ */ jsx("line", { x1: "4", y1: "18", x2: "20", y2: "18" })
+      ]
+    }
+  );
+}
+const BottomNavContext = React.createContext({
+  value: null,
+  onChange: () => {
+  },
+  grow: false,
+  horizontal: false,
+  shift: false,
+  activeColor: void 0
+});
+const BottomNavigation = React.forwardRef(
+  ({
+    className,
+    children,
+    value: valueProp,
+    defaultValue,
+    onChange,
+    color,
+    grow = false,
+    horizontal = false,
+    shift = false,
+    active = true,
+    elevated = false,
+    ...props
+  }, ref) => {
+    const [internalValue, setInternalValue] = React.useState(defaultValue ?? null);
+    const isControlled = valueProp !== void 0;
+    const currentValue = isControlled ? valueProp : internalValue;
+    const handleChange = React.useCallback(
+      (val) => {
+        if (!isControlled) setInternalValue(val);
+        onChange == null ? void 0 : onChange(val);
+      },
+      [isControlled, onChange]
+    );
+    return /* @__PURE__ */ jsx(
+      BottomNavContext.Provider,
+      {
+        value: {
+          value: currentValue ?? null,
+          onChange: handleChange,
+          grow,
+          horizontal,
+          shift,
+          activeColor: color
+        },
+        children: /* @__PURE__ */ jsx(
+          "nav",
+          {
+            ref,
+            role: "navigation",
+            "aria-label": "Bottom navigation",
+            className: cn(
+              "bottom-nav",
+              grow && "bottom-nav--grow",
+              horizontal && "bottom-nav--horizontal",
+              shift && "bottom-nav--shift",
+              !active && "bottom-nav--hidden",
+              elevated && "bottom-nav--elevated",
+              className
+            ),
+            ...props,
+            children
+          }
+        )
+      }
+    );
+  }
+);
+BottomNavigation.displayName = "BottomNavigation";
+const BottomNavigationItem = React.forwardRef(({ className, children, value: valueProp, _index, style, ...props }, ref) => {
+  const { value, onChange, grow, horizontal, shift, activeColor } = React.useContext(BottomNavContext);
+  const itemValue = valueProp ?? _index ?? 0;
+  const isActive = value === itemValue;
+  const activeStyle = isActive && activeColor ? { "--bottom-nav-active-color": activeColor } : {};
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ref,
+      type: "button",
+      role: "tab",
+      "aria-selected": isActive,
+      "aria-current": isActive ? "page" : void 0,
+      onClick: () => onChange(itemValue),
+      style: { ...activeStyle, ...style },
+      className: cn(
+        "bottom-nav-item",
+        isActive && "bottom-nav-item--active",
+        grow && "bottom-nav-item--grow",
+        horizontal && "bottom-nav-item--horizontal",
+        shift && "bottom-nav-item--shift",
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+});
+BottomNavigationItem.displayName = "BottomNavigationItem";
+const BottomNavigationGroup = React.forwardRef(({ children, className, ...props }, ref) => {
+  const indexedChildren = React.Children.map(children, (child, index) => {
+    if (!React.isValidElement(child)) return child;
+    const el = child;
+    if (el.type.displayName === "BottomNavigationItem") {
+      return React.cloneElement(el, { _index: index });
+    }
+    return child;
+  });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      role: "tablist",
+      className: cn("bottom-nav-group", className),
+      ...props,
+      children: indexedChildren
+    }
+  );
+});
+BottomNavigationGroup.displayName = "BottomNavigationGroup";
+const Footer = React.forwardRef(
+  ({
+    className,
+    children,
+    bordered = false,
+    rounded = false,
+    elevated = false,
+    color,
+    style,
+    ...props
+  }, ref) => /* @__PURE__ */ jsx(
+    "footer",
+    {
+      ref,
+      style: { backgroundColor: color, ...style },
+      className: cn(
+        "footer",
+        bordered && "footer--bordered",
+        rounded && "footer--rounded",
+        elevated && "footer--elevated",
+        className
+      ),
+      ...props,
+      children
+    }
+  )
+);
+Footer.displayName = "Footer";
+const FooterRow = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("footer-row", className), ...props })
+);
+FooterRow.displayName = "FooterRow";
+const FooterLinks = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("footer-links", className), ...props })
+);
+FooterLinks.displayName = "FooterLinks";
+const FooterLink = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("a", { ref, className: cn("footer-link", className), ...props })
+);
+FooterLink.displayName = "FooterLink";
+const FooterIconButton = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
+  "button",
+  {
+    ref,
+    type: "button",
+    className: cn("footer-icon-btn", className),
+    ...props,
+    children
+  }
+));
+FooterIconButton.displayName = "FooterIconButton";
+const FooterDivider = React.forwardRef(
+  ({ className, width, style, ...props }, ref) => /* @__PURE__ */ jsx(
+    "hr",
+    {
+      ref,
+      style: { width, ...style },
+      className: cn("footer-divider", className),
+      ...props
+    }
+  )
+);
+FooterDivider.displayName = "FooterDivider";
+const FooterCopyright = React.forwardRef(
+  ({
+    className,
+    company = "International WELL Building Institute",
+    year,
+    ...props
+  }, ref) => /* @__PURE__ */ jsxs("div", { ref, className: cn("footer-copyright", className), ...props, children: [
+    year ?? (/* @__PURE__ */ new Date()).getFullYear(),
+    " —",
+    " ",
+    /* @__PURE__ */ jsxs("strong", { children: [
+      "© ",
+      company
+    ] })
+  ] })
+);
+FooterCopyright.displayName = "FooterCopyright";
+const FooterBand = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("footer-band", className), ...props })
+);
+FooterBand.displayName = "FooterBand";
+const HeroSection = ({ backgroundSlot, contentSlot }) => {
+  return /* @__PURE__ */ jsxs("section", { className: "relative flex flex-col sm:pt-[169px] pt-24 items-center min-h-[454px] bg-cyan-900 overflow-hidden", children: [
+    backgroundSlot,
+    /* @__PURE__ */ jsxs("header", { className: "relative z-10 flex flex-col items-center text-center overflow-visible", children: [
+      /* @__PURE__ */ jsx(
+        motion.h2,
+        {
+          className: "heading-small mb-6",
+          initial: { opacity: 0, y: 20 },
+          animate: { opacity: 1, y: 0 },
+          transition: { duration: 0.6, delay: 0.3 },
+          children: /* @__PURE__ */ jsx(
+            "span",
+            {
+              style: {
+                background: "linear-gradient(90deg, #084654 0.08%, #2D718A 50.08%, #084654 100.08%)",
+                backgroundClip: "text",
+                WebkitBackgroundClip: "text",
+                WebkitTextFillColor: "transparent"
+              },
+              children: "One unified, harmonized standard"
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        motion.h1,
+        {
+          className: "text-white heading-large mb-[70px]",
+          initial: { opacity: 0, y: 20 },
+          animate: { opacity: 1, y: 0 },
+          transition: { duration: 0.6, delay: 0.4 },
+          children: "One WELL"
+        }
+      ),
+      contentSlot
+    ] })
+  ] });
+};
+const SystemBar = React.forwardRef(
+  ({
+    className,
+    children,
+    color,
+    window: isWindow = false,
+    height,
+    style,
+    ...props
+  }, ref) => {
+    const barHeight = height ?? (isWindow ? 32 : 24);
+    return /* @__PURE__ */ jsx(
+      "header",
+      {
+        ref,
+        role: "banner",
+        style: {
+          height: barHeight,
+          backgroundColor: color,
+          ...style
+        },
+        className: cn(
+          "system-bar",
+          isWindow && "system-bar--window",
+          color && "system-bar--colored",
+          className
+        ),
+        ...props,
+        children
+      }
+    );
+  }
+);
+SystemBar.displayName = "SystemBar";
+const SystemBarSpacer = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "span",
+    {
+      ref,
+      className: cn("system-bar-spacer", className),
+      ...props
+    }
+  )
+);
+SystemBarSpacer.displayName = "SystemBarSpacer";
+const SystemBarIcon = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "span",
+    {
+      ref,
+      className: cn("system-bar-icon", className),
+      ...props
+    }
+  )
+);
+SystemBarIcon.displayName = "SystemBarIcon";
+const SystemBarAction = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
+  "button",
+  {
+    ref,
+    type: "button",
+    className: cn("system-bar-action", className),
+    ...props,
+    children
+  }
+));
+SystemBarAction.displayName = "SystemBarAction";
+const TimelineContext = React.createContext({
+  direction: "vertical",
+  side: "alternate",
+  align: "center",
+  density: "default"
+});
+const Timeline = React.forwardRef(
+  ({
+    className,
+    children,
+    direction = "vertical",
+    side = "alternate",
+    align = "center",
+    density = "default",
+    ...props
+  }, ref) => /* @__PURE__ */ jsx(TimelineContext.Provider, { value: { direction, side, align, density }, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn(
+        "timeline",
+        direction === "horizontal" && "timeline--horizontal",
+        `timeline--side-${side}`,
+        `timeline--align-${align}`,
+        density === "compact" && "timeline--compact",
+        className
+      ),
+      ...props,
+      children
+    }
+  ) })
+);
+Timeline.displayName = "Timeline";
+const TimelineItem = React.forwardRef(
+  ({
+    className,
+    children,
+    dotColor,
+    size = "small",
+    fillDot = false,
+    hideDot = false,
+    icon,
+    opposite,
+    ...props
+  }, ref) => {
+    const { align } = React.useContext(TimelineContext);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          "timeline-item",
+          `timeline-item--size-${size}`,
+          fillDot && "timeline-item--fill-dot",
+          hideDot && "timeline-item--hide-dot",
+          align === "start" && "timeline-item--align-start",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "timeline-item-opposite", children: opposite }),
+          /* @__PURE__ */ jsxs("div", { className: "timeline-item-stem", children: [
+            /* @__PURE__ */ jsx("div", { className: "timeline-item-stem-line timeline-item-stem-line--before" }),
+            !hideDot && /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "timeline-item-dot",
+                style: dotColor ? { backgroundColor: dotColor, borderColor: dotColor } : void 0,
+                children: icon && /* @__PURE__ */ jsx("span", { className: "timeline-item-dot-icon", children: icon })
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { className: "timeline-item-stem-line timeline-item-stem-line--after" })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "timeline-item-body", children })
+        ]
+      }
+    );
+  }
+);
+TimelineItem.displayName = "TimelineItem";
+const EmptyState = React.forwardRef(
+  ({
+    className,
+    children,
+    headline,
+    title,
+    subtitle,
+    text,
+    image,
+    imageAlt = "",
+    icon,
+    actionText,
+    onClickAction,
+    mediaSlot,
+    headlineSlot,
+    titleSlot,
+    subtitleSlot,
+    textSlot,
+    actionsSlot,
+    ...props
+  }, ref) => {
+    const hasMedia = mediaSlot || image || icon;
+    const hasHeadline = headlineSlot || headline;
+    const hasTitle = titleSlot || title;
+    const hasSubtitle = subtitleSlot || subtitle;
+    const hasText = textSlot || text;
+    const hasActions = actionsSlot || actionText;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn("empty-state", className),
+        ...props,
+        children: [
+          hasMedia && /* @__PURE__ */ jsx("div", { className: "empty-state-media", children: mediaSlot ?? (image ? /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: image,
+              alt: imageAlt,
+              className: "empty-state-image"
+            }
+          ) : /* @__PURE__ */ jsx("span", { className: "empty-state-icon", children: icon })) }),
+          hasHeadline && /* @__PURE__ */ jsx("div", { className: "empty-state-headline", children: headlineSlot ?? headline }),
+          hasTitle && /* @__PURE__ */ jsx("div", { className: "empty-state-title", children: titleSlot ?? title }),
+          hasSubtitle && /* @__PURE__ */ jsx("div", { className: "empty-state-subtitle", children: subtitleSlot ?? subtitle }),
+          hasText && /* @__PURE__ */ jsx("div", { className: "empty-state-text", children: textSlot ?? text }),
+          children && /* @__PURE__ */ jsx("div", { className: "empty-state-default", children }),
+          hasActions && /* @__PURE__ */ jsx("div", { className: "empty-state-actions", children: actionsSlot ?? /* @__PURE__ */ jsx(EmptyStateAction, { onClick: onClickAction, children: actionText }) })
+        ]
+      }
+    );
+  }
+);
+EmptyState.displayName = "EmptyState";
+const EmptyStateAction = React.forwardRef(({ className, variant = "default", ...props }, ref) => /* @__PURE__ */ jsx(
+  "button",
+  {
+    ref,
+    type: "button",
+    className: cn(
+      "empty-state-action-btn",
+      variant === "primary" && "empty-state-action-btn--primary",
+      variant === "outline" && "empty-state-action-btn--outline",
+      className
+    ),
+    ...props
+  }
+));
+EmptyStateAction.displayName = "EmptyStateAction";
 const buttonVariants = cva(
   "button",
   {
@@ -536,14 +1187,30 @@ const ListItem = React.forwardRef(
   }
 );
 ListItem.displayName = "ListItem";
-const Card = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  "div",
-  {
-    ref,
-    className: cn("card", className),
-    ...props
+const cardVariants = cva("card", {
+  variants: {
+    variant: {
+      default: "card--default",
+      outlined: "card--outlined",
+      elevated: "card--elevated",
+      filled: "card--filled",
+      interactive: "card--interactive"
+    }
+  },
+  defaultVariants: {
+    variant: "default"
   }
-));
+});
+const Card = React.forwardRef(
+  ({ className, variant, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn(cardVariants({ variant }), className),
+      ...props
+    }
+  )
+);
 Card.displayName = "Card";
 const CardHeader = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("card-header", className), ...props }));
 CardHeader.displayName = "CardHeader";
@@ -583,21 +1250,51 @@ const CardFooter = React.forwardRef(({ className, ...props }, ref) => /* @__PURE
   }
 ));
 CardFooter.displayName = "CardFooter";
-const CardWithIcon = React.forwardRef(({ icon: Icon, title, description, onClick }, ref) => /* @__PURE__ */ jsxs(
-  Card,
-  {
-    ref,
-    className: "card-with-icon",
-    onClick,
-    children: [
-      /* @__PURE__ */ jsxs("div", { className: "card-with-icon__header", children: [
-        Icon && /* @__PURE__ */ jsx(Icon, { className: "card-with-icon__icon" }),
-        /* @__PURE__ */ jsx(Text, { as: "h3", variant: "overline-large", children: title })
-      ] }),
-      /* @__PURE__ */ jsx(Text, { as: "p", variant: "body-base", children: description })
-    ]
-  }
-));
+const CardMedia = React.forwardRef(({ className, src, alt = "", height = 200, children, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("card-media", className), style: { height }, ...props, children: src ? /* @__PURE__ */ jsx("img", { src, alt, className: "card-media__img" }) : children }));
+CardMedia.displayName = "CardMedia";
+const CardBadge = React.forwardRef(
+  ({ className, color = "default", ...props }, ref) => /* @__PURE__ */ jsx(
+    "span",
+    {
+      ref,
+      className: cn("card-badge", `card-badge--${color}`, className),
+      ...props
+    }
+  )
+);
+CardBadge.displayName = "CardBadge";
+const CardActions = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("card-actions", className), ...props }));
+CardActions.displayName = "CardActions";
+const CardMetric = React.forwardRef(
+  ({ className, value, label, trend, trendValue, ...props }, ref) => /* @__PURE__ */ jsxs("div", { ref, className: cn("card-metric", className), ...props, children: [
+    /* @__PURE__ */ jsx("span", { className: "card-metric__value", children: value }),
+    /* @__PURE__ */ jsx("span", { className: "card-metric__label", children: label }),
+    trend && trendValue && /* @__PURE__ */ jsxs("span", { className: cn("card-metric__trend", `card-metric__trend--${trend}`), children: [
+      trend === "up" ? "↑" : trend === "down" ? "↓" : "→",
+      " ",
+      trendValue
+    ] })
+  ] })
+);
+CardMetric.displayName = "CardMetric";
+const CardWithIcon = React.forwardRef(
+  ({ icon: Icon, title, description, onClick }, ref) => /* @__PURE__ */ jsxs(
+    Card,
+    {
+      ref,
+      variant: "interactive",
+      className: "card-with-icon",
+      onClick,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "card-with-icon__header", children: [
+          Icon && /* @__PURE__ */ jsx(Icon, { className: "card-with-icon__icon" }),
+          /* @__PURE__ */ jsx(Text, { as: "h3", variant: "overline-large", children: title })
+        ] }),
+        /* @__PURE__ */ jsx(Text, { as: "p", variant: "body-base", children: description })
+      ]
+    }
+  )
+);
 CardWithIcon.displayName = "CardWithIcon";
 const Separator = React.forwardRef(
   ({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ jsx(
@@ -2142,6 +2839,68 @@ const AlertDescription = React.forwardRef(({ className, ...props }, ref) => /* @
   }
 ));
 AlertDescription.displayName = "AlertDescription";
+const bannerVariants = cva("banner", {
+  variants: {
+    variant: {
+      default: "banner--default",
+      info: "banner--info",
+      success: "banner--success",
+      warning: "banner--warning",
+      destructive: "banner--destructive"
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+});
+const Banner = React.forwardRef(
+  ({ className, variant, sticky = false, onClose, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      role: "banner",
+      className: cn(bannerVariants({ variant }), sticky && "banner--sticky", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "banner-content", children }),
+        onClose && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "banner-close",
+            "aria-label": "Dismiss banner",
+            onClick: onClose,
+            children: /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+              /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+              /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+            ] })
+          }
+        )
+      ]
+    }
+  )
+);
+Banner.displayName = "Banner";
+const BannerIcon = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("span", { ref, className: cn("banner-icon", className), "aria-hidden": "true", ...props })
+);
+BannerIcon.displayName = "BannerIcon";
+const BannerTitle = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("p", { ref, className: cn("banner-title", className), ...props })
+);
+BannerTitle.displayName = "BannerTitle";
+const BannerDescription = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("p", { ref, className: cn("banner-description", className), ...props })
+);
+BannerDescription.displayName = "BannerDescription";
+const BannerText = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("banner-text", className), ...props })
+);
+BannerText.displayName = "BannerText";
+const BannerAction = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("button", { ref, type: "button", className: cn("banner-action", className), ...props })
+);
+BannerAction.displayName = "BannerAction";
 const AlertDialog = AlertDialogPrimitive.Root;
 const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
 const AlertDialogPortal = AlertDialogPrimitive.Portal;
@@ -2800,6 +3559,204 @@ function HeightContainer({
   }, [stateKey]);
   return /* @__PURE__ */ jsx("div", { ref: containerRef, className: cn("overflow-clip", className), children: /* @__PURE__ */ jsx("div", { ref: innerRef, children }) });
 }
+const spacing = (n) => `${n * 0.25}rem`;
+const Stack = React.forwardRef(
+  ({ as: Component = "div", direction = "vertical", gap = 4, align, justify, wrap = false, className, style, ...props }, ref) => /* @__PURE__ */ jsx(
+    Component,
+    {
+      ref,
+      className: cn(
+        "stack",
+        direction === "horizontal" && "stack--horizontal",
+        align && `stack--align-${align}`,
+        justify && `stack--justify-${justify}`,
+        wrap && "stack--wrap",
+        className
+      ),
+      style: { gap: spacing(gap), ...style },
+      ...props
+    }
+  )
+);
+Stack.displayName = "Stack";
+const Grid = React.forwardRef(
+  ({ as: Component = "div", cols = 1, colsSm, colsMd, colsLg, gap = 4, rowGap, colGap, className, style, ...props }, ref) => /* @__PURE__ */ jsx(
+    Component,
+    {
+      ref,
+      className: cn(
+        "grid-layout",
+        `grid-layout--cols-${cols}`,
+        colsSm && `grid-layout--sm-cols-${colsSm}`,
+        colsMd && `grid-layout--md-cols-${colsMd}`,
+        colsLg && `grid-layout--lg-cols-${colsLg}`,
+        className
+      ),
+      style: {
+        gap: rowGap === void 0 && colGap === void 0 ? spacing(gap) : void 0,
+        rowGap: rowGap !== void 0 ? spacing(rowGap) : void 0,
+        columnGap: colGap !== void 0 ? spacing(colGap) : void 0,
+        ...style
+      },
+      ...props
+    }
+  )
+);
+Grid.displayName = "Grid";
+const ColumnsPresetMap = {
+  "sidebar": "280px 1fr",
+  "sidebar-right": "1fr 280px",
+  "wide-sidebar": "360px 1fr",
+  "narrow-sidebar": "200px 1fr",
+  "split": "1fr 1fr",
+  "1-2": "1fr 2fr",
+  "2-1": "2fr 1fr",
+  "1-3": "1fr 3fr",
+  "3-1": "3fr 1fr"
+};
+const Columns = React.forwardRef(
+  ({ as: Component = "div", preset = "split", template, gap = 6, colGap, rowGap, collapse, className, style, ...props }, ref) => /* @__PURE__ */ jsx(
+    Component,
+    {
+      ref,
+      className: cn(
+        "columns-layout",
+        collapse && `columns-layout--collapse-${collapse}`,
+        className
+      ),
+      style: {
+        gridTemplateColumns: template ?? ColumnsPresetMap[preset],
+        gap: rowGap === void 0 && colGap === void 0 ? spacing(gap) : void 0,
+        rowGap: rowGap !== void 0 ? spacing(rowGap) : void 0,
+        columnGap: colGap !== void 0 ? spacing(colGap) : void 0,
+        ...style
+      },
+      ...props
+    }
+  )
+);
+Columns.displayName = "Columns";
+const Container = React.forwardRef(
+  ({ as: Component = "div", size = "xl", center = true, padded = true, className, ...props }, ref) => /* @__PURE__ */ jsx(
+    Component,
+    {
+      ref,
+      className: cn(
+        "container-layout",
+        `container-layout--${size}`,
+        center && "container-layout--center",
+        padded && "container-layout--padded",
+        className
+      ),
+      ...props
+    }
+  )
+);
+Container.displayName = "Container";
+const Section = React.forwardRef(
+  ({ as: Component = "section", padding = "lg", className, ...props }, ref) => /* @__PURE__ */ jsx(
+    Component,
+    {
+      ref,
+      className: cn("section-layout", padding !== "none" && `section-layout--${padding}`, className),
+      ...props
+    }
+  )
+);
+Section.displayName = "Section";
+const AppShell = React.forwardRef(
+  ({ sidebarWidth = "17.5rem", headerHeight = "4rem", className, style, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn("app-shell", className),
+      style: {
+        "--app-shell-header-height": typeof headerHeight === "number" ? `${headerHeight}px` : headerHeight,
+        "--app-shell-sidebar-width": typeof sidebarWidth === "number" ? `${sidebarWidth}px` : sidebarWidth,
+        ...style
+      },
+      ...props
+    }
+  )
+);
+AppShell.displayName = "AppShell";
+const AppShellHeader = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("header", { ref, className: cn("app-shell-header", className), ...props })
+);
+AppShellHeader.displayName = "AppShellHeader";
+const AppShellSidebar = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("aside", { ref, className: cn("app-shell-sidebar", className), ...props })
+);
+AppShellSidebar.displayName = "AppShellSidebar";
+const AppShellMain = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("main", { ref, className: cn("app-shell-main", className), ...props })
+);
+AppShellMain.displayName = "AppShellMain";
+const AppShellFooter = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("footer", { ref, className: cn("app-shell-footer", className), ...props })
+);
+AppShellFooter.displayName = "AppShellFooter";
+const Show = React.forwardRef(
+  ({ above, below, as: Component = "div", className, ...props }, ref) => /* @__PURE__ */ jsx(
+    Component,
+    {
+      ref,
+      className: cn(
+        above && `show-above-${above}`,
+        below && `show-below-${below}`,
+        className
+      ),
+      ...props
+    }
+  )
+);
+Show.displayName = "Show";
+const Hide = React.forwardRef(
+  ({ above, below, as: Component = "div", className, ...props }, ref) => /* @__PURE__ */ jsx(
+    Component,
+    {
+      ref,
+      className: cn(
+        above && `hide-above-${above}`,
+        below && `hide-below-${below}`,
+        className
+      ),
+      ...props
+    }
+  )
+);
+Hide.displayName = "Hide";
+const Positioned = React.forwardRef(
+  ({ as: Component = "div", position = "relative", top, right, bottom, left, inset, zIndex, fill = false, className, style, ...props }, ref) => {
+    const resolveValue = (v) => v === void 0 ? void 0 : typeof v === "number" ? spacing(v) : v;
+    return /* @__PURE__ */ jsx(
+      Component,
+      {
+        ref,
+        className: cn(`positioned--${position}`, className),
+        style: {
+          top: resolveValue(top),
+          right: resolveValue(right),
+          bottom: resolveValue(bottom),
+          left: resolveValue(left),
+          inset: fill ? 0 : resolveValue(inset),
+          zIndex,
+          ...style
+        },
+        ...props
+      }
+    );
+  }
+);
+Positioned.displayName = "Positioned";
+const Spacer = ({ size = 4, axis = "vertical" }) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    "aria-hidden": "true",
+    style: axis === "vertical" ? { height: spacing(size), minHeight: spacing(size) } : { width: spacing(size), minWidth: spacing(size) }
+  }
+);
+Spacer.displayName = "Spacer";
 const TabsContext = createContext(null);
 function useTabsContext() {
   const ctx = useContext(TabsContext);
@@ -4914,6 +5871,398 @@ const NavigationAccount = React.forwardRef(({ className, asChild, children, ...p
   );
 });
 NavigationAccount.displayName = "NavigationAccount";
+function formatBytes(bytes) {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+function getFileIcon(type) {
+  if (type.startsWith("image/")) return "🖼";
+  if (type === "application/pdf") return "📄";
+  if (type.includes("spreadsheet") || type.includes("excel") || type.includes("csv")) return "📊";
+  if (type.includes("word") || type.includes("document")) return "📝";
+  if (type.includes("zip") || type.includes("compressed")) return "🗜";
+  return "📎";
+}
+const FileUpload = React.forwardRef(
+  ({
+    accept,
+    multiple = false,
+    maxSize,
+    maxFiles,
+    disabled = false,
+    variant = "default",
+    onFilesChange,
+    className
+  }, ref) => {
+    const [files, setFiles] = React.useState([]);
+    const [isDragging, setIsDragging] = React.useState(false);
+    const inputRef = React.useRef(null);
+    const validateFile = (file) => {
+      if (maxSize && file.size > maxSize) {
+        return `File exceeds ${formatBytes(maxSize)} limit`;
+      }
+      return void 0;
+    };
+    const addFiles = (incoming) => {
+      const incomingArray = Array.from(incoming);
+      const next = multiple ? [...files] : [];
+      for (const file of incomingArray) {
+        if (maxFiles && next.filter((f) => !f.error).length >= maxFiles) break;
+        const error = validateFile(file);
+        next.push({ file, id: `${file.name}-${Date.now()}-${Math.random()}`, error });
+      }
+      setFiles(next);
+      onFilesChange == null ? void 0 : onFilesChange(next.filter((f) => !f.error).map((f) => f.file));
+    };
+    const removeFile = (id) => {
+      const next = files.filter((f) => f.id !== id);
+      setFiles(next);
+      onFilesChange == null ? void 0 : onFilesChange(next.filter((f) => !f.error).map((f) => f.file));
+    };
+    const onDragOver = (e) => {
+      e.preventDefault();
+      if (!disabled) setIsDragging(true);
+    };
+    const onDragLeave = (e) => {
+      e.preventDefault();
+      setIsDragging(false);
+    };
+    const onDrop = (e) => {
+      e.preventDefault();
+      setIsDragging(false);
+      if (disabled) return;
+      if (e.dataTransfer.files.length > 0) addFiles(e.dataTransfer.files);
+    };
+    const onInputChange = (e) => {
+      if (e.target.files && e.target.files.length > 0) {
+        addFiles(e.target.files);
+        e.target.value = "";
+      }
+    };
+    const openPicker = () => {
+      var _a;
+      if (!disabled) (_a = inputRef.current) == null ? void 0 : _a.click();
+    };
+    return /* @__PURE__ */ jsxs("div", { ref, className: cn("file-upload", className), children: [
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          role: "button",
+          tabIndex: disabled ? -1 : 0,
+          "aria-label": "Upload files",
+          onClick: openPicker,
+          onKeyDown: (e) => e.key === "Enter" && openPicker(),
+          onDragOver,
+          onDragLeave,
+          onDrop,
+          className: cn(
+            "file-upload-zone",
+            variant === "compact" && "file-upload-zone--compact",
+            isDragging && "file-upload-zone--dragging",
+            disabled && "file-upload-zone--disabled"
+          ),
+          children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                ref: inputRef,
+                type: "file",
+                accept,
+                multiple,
+                disabled,
+                onChange: onInputChange,
+                className: "file-upload-input",
+                tabIndex: -1
+              }
+            ),
+            variant === "compact" ? /* @__PURE__ */ jsxs("div", { className: "file-upload-compact-inner", children: [
+              /* @__PURE__ */ jsx("span", { className: "file-upload-icon", children: "↑" }),
+              /* @__PURE__ */ jsxs("span", { className: "file-upload-zone-text", children: [
+                /* @__PURE__ */ jsx("span", { className: "file-upload-zone-link", children: "Click to upload" }),
+                " ",
+                "or drag and drop"
+              ] }),
+              accept && /* @__PURE__ */ jsx("span", { className: "file-upload-hint", children: accept.split(",").join(", ") }),
+              maxSize && /* @__PURE__ */ jsxs("span", { className: "file-upload-hint", children: [
+                "Max ",
+                formatBytes(maxSize)
+              ] })
+            ] }) : /* @__PURE__ */ jsxs("div", { className: "file-upload-default-inner", children: [
+              /* @__PURE__ */ jsx("div", { className: "file-upload-icon-circle", children: /* @__PURE__ */ jsx("span", { className: "file-upload-icon", children: "↑" }) }),
+              /* @__PURE__ */ jsxs("div", { className: "file-upload-zone-body", children: [
+                /* @__PURE__ */ jsxs("span", { className: "file-upload-zone-text", children: [
+                  /* @__PURE__ */ jsx("span", { className: "file-upload-zone-link", children: "Click to upload" }),
+                  " ",
+                  "or drag and drop"
+                ] }),
+                (accept || maxSize) && /* @__PURE__ */ jsx("span", { className: "file-upload-hint", children: [
+                  accept && accept.split(",").join(", "),
+                  maxSize && `Max ${formatBytes(maxSize)}`
+                ].filter(Boolean).join(" · ") })
+              ] })
+            ] })
+          ]
+        }
+      ),
+      files.length > 0 && /* @__PURE__ */ jsx("ul", { className: "file-upload-list", children: files.map(({ file, id, error }) => /* @__PURE__ */ jsxs(
+        "li",
+        {
+          className: cn("file-upload-item", error && "file-upload-item--error"),
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "file-upload-item-icon", children: getFileIcon(file.type) }),
+            /* @__PURE__ */ jsxs("div", { className: "file-upload-item-info", children: [
+              /* @__PURE__ */ jsx("span", { className: "file-upload-item-name", children: file.name }),
+              error ? /* @__PURE__ */ jsx("span", { className: "file-upload-item-error", children: error }) : /* @__PURE__ */ jsx("span", { className: "file-upload-item-size", children: formatBytes(file.size) })
+            ] }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                "aria-label": `Remove ${file.name}`,
+                onClick: (e) => {
+                  e.stopPropagation();
+                  removeFile(id);
+                },
+                className: "file-upload-item-remove",
+                children: "✕"
+              }
+            )
+          ]
+        },
+        id
+      )) })
+    ] });
+  }
+);
+FileUpload.displayName = "FileUpload";
+function getStatus(index, currentStep) {
+  if (index < currentStep) return "complete";
+  if (index === currentStep) return "current";
+  return "upcoming";
+}
+const CheckIcon = () => /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+  "path",
+  {
+    d: "M2.5 7L5.5 10L11.5 4",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }
+) });
+const Stepper = React.forwardRef(
+  ({
+    steps,
+    currentStep,
+    orientation = "horizontal",
+    variant = "default",
+    size = "md",
+    onStepClick,
+    className
+  }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        role: "list",
+        "aria-label": "Progress steps",
+        className: cn(
+          "stepper",
+          `stepper--${orientation}`,
+          `stepper--${size}`,
+          className
+        ),
+        children: steps.map((step, index) => {
+          const status = getStatus(index, currentStep);
+          const isClickable = !!onStepClick && status === "complete";
+          const isLast = index === steps.length - 1;
+          return /* @__PURE__ */ jsxs(
+            "div",
+            {
+              role: "listitem",
+              "aria-current": status === "current" ? "step" : void 0,
+              className: cn(
+                "stepper-item",
+                `stepper-item--${status}`,
+                orientation === "horizontal" && !isLast && "stepper-item--with-connector"
+              ),
+              children: [
+                /* @__PURE__ */ jsxs("div", { className: "stepper-indicator-row", children: [
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      disabled: !isClickable,
+                      onClick: () => isClickable && onStepClick(index),
+                      className: cn(
+                        "stepper-indicator",
+                        `stepper-indicator--${status}`,
+                        `stepper-indicator--${variant}`,
+                        isClickable && "stepper-indicator--clickable"
+                      ),
+                      "aria-label": `Step ${index + 1}: ${step.title} (${status})`,
+                      children: status === "complete" ? /* @__PURE__ */ jsx(CheckIcon, {}) : /* @__PURE__ */ jsx("span", { className: "stepper-indicator-number", children: index + 1 })
+                    }
+                  ),
+                  !isLast && /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: cn(
+                        "stepper-connector",
+                        `stepper-connector--${orientation}`,
+                        index < currentStep && "stepper-connector--complete"
+                      ),
+                      "aria-hidden": "true"
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "stepper-label", children: [
+                  /* @__PURE__ */ jsx("span", { className: cn("stepper-title", `stepper-title--${status}`), children: step.title }),
+                  step.description && /* @__PURE__ */ jsx("span", { className: cn("stepper-description", `stepper-description--${status}`), children: step.description })
+                ] })
+              ]
+            },
+            index
+          );
+        })
+      }
+    );
+  }
+);
+Stepper.displayName = "Stepper";
+const DatePicker = React.forwardRef(
+  ({
+    value,
+    onChange,
+    placeholder = "Select date",
+    disabled = false,
+    disabledDates,
+    fromDate,
+    toDate,
+    dateFormat = "MMM d, yyyy",
+    className,
+    align = "start"
+  }, ref) => {
+    const [open, setOpen] = React.useState(false);
+    const handleSelect = (date) => {
+      onChange == null ? void 0 : onChange(date);
+      setOpen(false);
+    };
+    return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+        "button",
+        {
+          ref,
+          type: "button",
+          disabled,
+          "aria-haspopup": "dialog",
+          "aria-expanded": open,
+          className: cn(
+            "date-picker-trigger",
+            !value && "date-picker-trigger--placeholder",
+            disabled && "date-picker-trigger--disabled",
+            className
+          ),
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "date-picker-icon", "aria-hidden": "true", children: /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: [
+              /* @__PURE__ */ jsx("rect", { x: "1", y: "3", width: "14", height: "12", rx: "2", stroke: "currentColor", strokeWidth: "1.5" }),
+              /* @__PURE__ */ jsx("path", { d: "M1 7h14", stroke: "currentColor", strokeWidth: "1.5" }),
+              /* @__PURE__ */ jsx("path", { d: "M5 1v4M11 1v4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
+            ] }) }),
+            /* @__PURE__ */ jsx("span", { className: "date-picker-value", children: value ? format(value, dateFormat) : placeholder }),
+            /* @__PURE__ */ jsx("span", { className: "date-picker-chevron", "aria-hidden": "true", children: /* @__PURE__ */ jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M2 4l4 4 4-4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsx(
+        PopoverContent,
+        {
+          className: "date-picker-popover",
+          align,
+          sideOffset: 6,
+          children: /* @__PURE__ */ jsx(
+            Calendar,
+            {
+              mode: "single",
+              selected: value,
+              onSelect: handleSelect,
+              disabled: disabledDates,
+              fromDate,
+              toDate,
+              initialFocus: true
+            }
+          )
+        }
+      )
+    ] });
+  }
+);
+DatePicker.displayName = "DatePicker";
+const DateRangePicker = React.forwardRef(
+  ({
+    value,
+    onChange,
+    placeholder = "Select date range",
+    disabled = false,
+    dateFormat = "MMM d, yyyy",
+    className,
+    align = "start"
+  }, ref) => {
+    const [open, setOpen] = React.useState(false);
+    const label = React.useMemo(() => {
+      if (!(value == null ? void 0 : value.from)) return null;
+      if (!value.to) return format(value.from, dateFormat);
+      return `${format(value.from, dateFormat)} — ${format(value.to, dateFormat)}`;
+    }, [value, dateFormat]);
+    return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+        "button",
+        {
+          ref,
+          type: "button",
+          disabled,
+          "aria-haspopup": "dialog",
+          "aria-expanded": open,
+          className: cn(
+            "date-picker-trigger",
+            !label && "date-picker-trigger--placeholder",
+            disabled && "date-picker-trigger--disabled",
+            className
+          ),
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "date-picker-icon", "aria-hidden": "true", children: /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: [
+              /* @__PURE__ */ jsx("rect", { x: "1", y: "3", width: "14", height: "12", rx: "2", stroke: "currentColor", strokeWidth: "1.5" }),
+              /* @__PURE__ */ jsx("path", { d: "M1 7h14", stroke: "currentColor", strokeWidth: "1.5" }),
+              /* @__PURE__ */ jsx("path", { d: "M5 1v4M11 1v4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
+            ] }) }),
+            /* @__PURE__ */ jsx("span", { className: "date-picker-value", children: label ?? placeholder }),
+            /* @__PURE__ */ jsx("span", { className: "date-picker-chevron", "aria-hidden": "true", children: /* @__PURE__ */ jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M2 4l4 4 4-4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsx(
+        PopoverContent,
+        {
+          className: "date-picker-popover",
+          align,
+          sideOffset: 6,
+          children: /* @__PURE__ */ jsx(
+            Calendar,
+            {
+              mode: "range",
+              selected: value,
+              onSelect: onChange,
+              numberOfMonths: 2,
+              initialFocus: true
+            }
+          )
+        }
+      )
+    ] });
+  }
+);
+DateRangePicker.displayName = "DateRangePicker";
 const Toaster = ({ ...props }) => {
   const { theme = "system" } = useTheme();
   return /* @__PURE__ */ jsx(
@@ -13510,6 +14859,17 @@ export {
   AlertDialogTrigger,
   AlertTitle,
   AlphaIcon,
+  AppBar,
+  AppBarAppend,
+  AppBarContent,
+  AppBarNavIcon,
+  AppBarPrepend,
+  AppBarTitle,
+  AppShell,
+  AppShellFooter,
+  AppShellHeader,
+  AppShellMain,
+  AppShellSidebar,
   AspectRatio,
   Avatar,
   AvatarFallback,
@@ -13534,6 +14894,15 @@ export {
   BadgeRatingResidential,
   BadgeRatingWorkforce,
   BadgeSurveyProvider,
+  Banner,
+  BannerAction,
+  BannerDescription,
+  BannerIcon,
+  BannerText,
+  BannerTitle,
+  BottomNavigation,
+  BottomNavigationGroup,
+  BottomNavigationItem,
   Breadcrumb,
   BreadcrumbItem,
   BreadcrumbLink,
@@ -13544,10 +14913,14 @@ export {
   CONCEPT_ICONS,
   Calendar,
   Card,
+  CardActions,
+  CardBadge,
   CardContent,
   CardDescription,
   CardFooter,
   CardHeader,
+  CardMedia,
+  CardMetric,
   CardTitle,
   CardWithIcon,
   Carousel,
@@ -13564,6 +14937,7 @@ export {
   Collapsible,
   CollapsibleContent,
   CollapsibleTrigger,
+  Columns,
   Command,
   CommandDialog,
   CommandEmpty,
@@ -13573,6 +14947,7 @@ export {
   CommandList,
   CommandSeparator,
   CommandShortcut,
+  Container,
   ContextMenu,
   ContextMenuCheckboxItem,
   ContextMenuContent,
@@ -13588,6 +14963,8 @@ export {
   ContextMenuSubContent,
   ContextMenuSubTrigger,
   ContextMenuTrigger,
+  DatePicker,
+  DateRangePicker,
   Dialog,
   DialogClose,
   DialogContent,
@@ -13621,6 +14998,17 @@ export {
   DropdownMenuSubContent,
   DropdownMenuSubTrigger,
   DropdownMenuTrigger,
+  EmptyState,
+  EmptyStateAction,
+  FileUpload,
+  Footer,
+  FooterBand,
+  FooterCopyright,
+  FooterDivider,
+  FooterIconButton,
+  FooterLink,
+  FooterLinks,
+  FooterRow,
   Form,
   FormControl,
   FormDescription,
@@ -13628,7 +15016,10 @@ export {
   FormItem,
   FormLabel,
   FormMessage,
+  Grid,
   HeightContainer,
+  HeroSection,
+  Hide,
   HoverCard,
   HoverCardContent,
   HoverCardTrigger,
@@ -13650,6 +15041,8 @@ export {
   InputOTPSeparator,
   InputOTPSlot,
   Label,
+  List,
+  ListItem,
   Menubar,
   MenubarCheckboxItem,
   MenubarContent,
@@ -13703,6 +15096,7 @@ export {
   Popover,
   PopoverContent,
   PopoverTrigger,
+  Positioned,
   Progress,
   RadioGroup,
   RadioGroupItem,
@@ -13737,6 +15131,7 @@ export {
   SealWellResidence,
   SealWorksWithWell,
   SearchField,
+  Section,
   SectionBadge,
   Select,
   SelectContent,
@@ -13757,6 +15152,7 @@ export {
   SheetHeader,
   SheetTitle,
   SheetTrigger,
+  Show,
   Sidebar,
   SidebarContent,
   SidebarFooter,
@@ -13773,9 +15169,16 @@ export {
   Skeleton,
   Slider,
   Toaster as Sonner,
+  Spacer,
+  Stack,
   StandardLogo,
   StandardNavigation,
+  Stepper,
   Switch,
+  SystemBar,
+  SystemBarAction,
+  SystemBarIcon,
+  SystemBarSpacer,
   Table,
   TableBody,
   TableCaption,
@@ -13791,6 +15194,8 @@ export {
   Tag,
   Text,
   Textarea,
+  Timeline,
+  TimelineItem,
   Toast,
   ToastAction,
   ToastClose,
@@ -13838,6 +15243,7 @@ export {
   WatermarkMemberOrg,
   X,
   badgeVariants,
+  bannerVariants,
   buttonVariants,
   capitalize,
   cn,