@salesmind-ai/design-system 0.1.11 → 0.2.0

package/dist/index.cjs

@@ -1,7 +1,7 @@
 'use strict';
 
 var React30 = require('react');
-var clsx44 = require('clsx');
+var clsx21 = require('clsx');
 var jsxRuntime = require('react/jsx-runtime');
 var reactSlot = require('@radix-ui/react-slot');
 var input = require('@base-ui/react/input');
@@ -21,13 +21,13 @@ var select = require('@base-ui/react/select');
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var React30__default = /*#__PURE__*/_interopDefault(React30);
-var clsx44__default = /*#__PURE__*/_interopDefault(clsx44);
+var clsx21__default = /*#__PURE__*/_interopDefault(clsx21);
 var ReactDOM__default = /*#__PURE__*/_interopDefault(ReactDOM);
 
 // src/components/VoidBackground/VoidBackground.tsx
 var VoidBackground = React30__default.default.forwardRef(
   ({ showGrid = true, showGrain = true, className, children }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: clsx44__default.default("void", className), children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: clsx21__default.default("void", className), children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "void__base", "aria-hidden": "true" }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "void__orbs", "aria-hidden": "true", children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "void__orb void__orb--warm" }),
@@ -41,28 +41,28 @@ var VoidBackground = React30__default.default.forwardRef(
 );
 VoidBackground.displayName = "VoidBackground";
 var Card = React30__default.default.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: clsx44__default.default("ds-card", className), ...props })
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: clsx21__default.default("ds-card", className), ...props })
 );
 Card.displayName = "Card";
 var CardHeader = React30__default.default.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: clsx44__default.default("ds-card__header", className), ...props })
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: clsx21__default.default("ds-card__header", className), ...props })
 );
 CardHeader.displayName = "CardHeader";
-var CardTitle = React30__default.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("h3", { ref, className: clsx44__default.default("ds-card__title", className), ...props }));
+var CardTitle = React30__default.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("h3", { ref, className: clsx21__default.default("ds-card__title", className), ...props }));
 CardTitle.displayName = "CardTitle";
-var CardDescription = React30__default.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("p", { ref, className: clsx44__default.default("ds-card__description", className), ...props }));
+var CardDescription = React30__default.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("p", { ref, className: clsx21__default.default("ds-card__description", className), ...props }));
 CardDescription.displayName = "CardDescription";
 var CardContent = React30__default.default.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: clsx44__default.default("ds-card__content", className), ...props })
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: clsx21__default.default("ds-card__content", className), ...props })
 );
 CardContent.displayName = "CardContent";
 var CardFooter = React30__default.default.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: clsx44__default.default("ds-card__footer", className), ...props })
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: clsx21__default.default("ds-card__footer", className), ...props })
 );
 CardFooter.displayName = "CardFooter";
 var Button = React30__default.default.forwardRef(
   ({ className, variant = "primary", size = "md", asChild = false, isLoading = false, children, disabled, ...props }, ref) => {
-    const buttonClass = clsx44__default.default(
+    const buttonClass = clsx21__default.default(
       "ds-button",
       `ds-button--${variant}`,
       size === "icon" ? "ds-button--icon ds-button--md" : `ds-button--${size}`,
@@ -105,7 +105,7 @@ var Button = React30__default.default.forwardRef(
               children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" })
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: clsx44__default.default("ds-button__content", isLoading && "ds-button__content--hidden"), children })
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: clsx21__default.default("ds-button__content", isLoading && "ds-button__content--hidden"), children })
         ]
       }
     );
@@ -119,7 +119,7 @@ var ButtonGroup = React30__default.default.forwardRef(
       {
         ref,
         role: "group",
-        className: clsx44__default.default(
+        className: clsx21__default.default(
           "ds-button-group",
           `ds-button-group--${orientation}`,
           fullWidth && "ds-button-group--full-width",
@@ -137,7 +137,7 @@ var TextField = React30__default.default.forwardRef(
   ({ className, label, error, helperText, endAdornment, id, ...props }, ref) => {
     const generatedId = React30__default.default.useId();
     const inputId = id || generatedId;
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx44__default.default("ds-textfield", className), children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx21__default.default("ds-textfield", className), children: [
       label && /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: inputId, className: "ds-textfield__label", children: label }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ds-textfield__input-wrapper", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -145,7 +145,7 @@ var TextField = React30__default.default.forwardRef(
           {
             id: inputId,
             ref,
-            className: clsx44__default.default(
+            className: clsx21__default.default(
               "ds-textfield__input",
               error && "ds-textfield__input--error",
               endAdornment && "ds-textfield__input--adorned"
@@ -155,7 +155,7 @@ var TextField = React30__default.default.forwardRef(
         ),
         endAdornment && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-textfield__adornment", children: endAdornment })
       ] }),
-      helperText && /* @__PURE__ */ jsxRuntime.jsx("span", { className: clsx44__default.default("ds-textfield__helper", error && "ds-textfield__helper--error"), children: helperText })
+      helperText && /* @__PURE__ */ jsxRuntime.jsx("span", { className: clsx21__default.default("ds-textfield__helper", error && "ds-textfield__helper--error"), children: helperText })
     ] });
   }
 );
@@ -164,18 +164,18 @@ var TextArea = React30.forwardRef(
   ({ className, label, error, helperText, id, ...props }, ref) => {
     const generatedId = React30.useId();
     const inputId = id || generatedId;
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx44__default.default("ds-textarea", className), children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx21__default.default("ds-textarea", className), children: [
       label && /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: inputId, className: "ds-textarea__label", children: label }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-textarea__input-wrapper", children: /* @__PURE__ */ jsxRuntime.jsx(
         "textarea",
         {
           id: inputId,
           ref,
-          className: clsx44__default.default("ds-textarea__input", error && "ds-textarea__input--error"),
+          className: clsx21__default.default("ds-textarea__input", error && "ds-textarea__input--error"),
           ...props
         }
       ) }),
-      helperText && /* @__PURE__ */ jsxRuntime.jsx("span", { className: clsx44__default.default("ds-textarea__helper", error && "ds-textarea__helper--error"), children: helperText })
+      helperText && /* @__PURE__ */ jsxRuntime.jsx("span", { className: clsx21__default.default("ds-textarea__helper", error && "ds-textarea__helper--error"), children: helperText })
     ] });
   }
 );
@@ -184,7 +184,7 @@ var Checkbox = React30__default.default.forwardRef(
   ({ className, label, id, ...props }, ref) => {
     const generatedId = React30__default.default.useId();
     const checkboxId = id || generatedId;
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx44__default.default("ds-checkbox-wrapper", className), children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx21__default.default("ds-checkbox-wrapper", className), children: [
       /* @__PURE__ */ jsxRuntime.jsx(checkbox.Checkbox.Root, { id: checkboxId, ref, className: "ds-checkbox", ...props, children: /* @__PURE__ */ jsxRuntime.jsx(checkbox.Checkbox.Indicator, { className: "ds-checkbox__indicator", children: /* @__PURE__ */ jsxRuntime.jsx(
         "svg",
         {
@@ -227,7 +227,7 @@ var RadioGroup = React30.forwardRef(
       {
         ref,
         role: "radiogroup",
-        className: clsx44__default.default(
+        className: clsx21__default.default(
           "ds-radio-group",
           orientation === "horizontal" && "ds-radio-group--horizontal",
           className
@@ -253,7 +253,7 @@ var Radio = React30.forwardRef(
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "label",
       {
-        className: clsx44__default.default("ds-radio-wrapper", disabled && "ds-radio-wrapper--disabled", className),
+        className: clsx21__default.default("ds-radio-wrapper", disabled && "ds-radio-wrapper--disabled", className),
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             "input",
@@ -270,7 +270,7 @@ var Radio = React30.forwardRef(
               ...props
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx44__default.default("ds-radio", isChecked && "ds-radio--checked"), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-radio__indicator" }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx21__default.default("ds-radio", isChecked && "ds-radio--checked"), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-radio__indicator" }) }),
           label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ds-radio__label", children: label })
         ]
       }
@@ -282,7 +282,7 @@ var Switch = React30__default.default.forwardRef(
   ({ className, label, id, ...props }, ref) => {
     const generatedId = React30__default.default.useId();
     const switchId = id || generatedId;
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx44__default.default("ds-switch-wrapper", className), children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx21__default.default("ds-switch-wrapper", className), children: [
       /* @__PURE__ */ jsxRuntime.jsx(_switch.Switch.Root, { id: switchId, ref, className: "ds-switch", ...props, children: /* @__PURE__ */ jsxRuntime.jsx(_switch.Switch.Thumb, { className: "ds-switch__thumb" }) }),
       label && /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: switchId, className: "ds-switch__label", children: label })
     ] });
@@ -292,13 +292,13 @@ Switch.displayName = "Switch";
 var Dialog = dialog.Dialog.Root;
 var DialogTrigger = dialog.Dialog.Trigger;
 var DialogClose = dialog.Dialog.Close;
-var DialogTitle = React30__default.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(dialog.Dialog.Title, { ref, className: clsx44__default.default("ds-dialog__title", className), ...props }));
+var DialogTitle = React30__default.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(dialog.Dialog.Title, { ref, className: clsx21__default.default("ds-dialog__title", className), ...props }));
 DialogTitle.displayName = "DialogTitle";
 var DialogDescription = React30__default.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   dialog.Dialog.Description,
   {
     ref,
-    className: clsx44__default.default("ds-dialog__description", className),
+    className: clsx21__default.default("ds-dialog__description", className),
     ...props
   }
 ));
@@ -306,22 +306,22 @@ DialogDescription.displayName = "DialogDescription";
 var DialogContent = React30__default.default.forwardRef(
   ({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(dialog.Dialog.Portal, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(dialog.Dialog.Backdrop, { className: "ds-dialog__backdrop" }),
-    /* @__PURE__ */ jsxRuntime.jsx(dialog.Dialog.Popup, { ref, className: clsx44__default.default("ds-dialog__content", className), ...props, children })
+    /* @__PURE__ */ jsxRuntime.jsx(dialog.Dialog.Popup, { ref, className: clsx21__default.default("ds-dialog__content", className), ...props, children })
   ] })
 );
 DialogContent.displayName = "DialogContent";
 var DialogHeader = React30__default.default.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: clsx44__default.default("ds-dialog__header", className), ...props })
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: clsx21__default.default("ds-dialog__header", className), ...props })
 );
 DialogHeader.displayName = "DialogHeader";
 var DialogFooter = React30__default.default.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: clsx44__default.default("ds-dialog__footer", className), ...props })
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: clsx21__default.default("ds-dialog__footer", className), ...props })
 );
 DialogFooter.displayName = "DialogFooter";
 var TooltipProvider = tooltip.Tooltip.Provider;
 var TooltipRoot = tooltip.Tooltip.Root;
 var TooltipTrigger = tooltip.Tooltip.Trigger;
-var TooltipContent = React30__default.default.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(tooltip.Tooltip.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(tooltip.Tooltip.Positioner, { sideOffset: 5, children: /* @__PURE__ */ jsxRuntime.jsxs(tooltip.Tooltip.Popup, { ref, className: clsx44__default.default("ds-tooltip__content", className), ...props, children: [
+var TooltipContent = React30__default.default.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(tooltip.Tooltip.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(tooltip.Tooltip.Positioner, { sideOffset: 5, children: /* @__PURE__ */ jsxRuntime.jsxs(tooltip.Tooltip.Popup, { ref, className: clsx21__default.default("ds-tooltip__content", className), ...props, children: [
   children,
   /* @__PURE__ */ jsxRuntime.jsx(tooltip.Tooltip.Arrow, { className: "ds-tooltip__arrow" })
 ] }) }) }));
@@ -374,7 +374,7 @@ var Accordion = React30__default.default.forwardRef(
       () => ({ openItems, toggle }),
       [openItems, toggle]
     );
-    return /* @__PURE__ */ jsxRuntime.jsx(AccordionContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: clsx44__default.default("ds-accordion", className), ...props, children }) });
+    return /* @__PURE__ */ jsxRuntime.jsx(AccordionContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: clsx21__default.default("ds-accordion", className), ...props, children }) });
   }
 );
 Accordion.displayName = "Accordion";
@@ -390,7 +390,7 @@ var AccordionItem = React30__default.default.forwardRef(
       "div",
       {
         ref,
-        className: clsx44__default.default("ds-accordion__item", className),
+        className: clsx21__default.default("ds-accordion__item", className),
         "data-state": isOpen ? "open" : "closed",
         ...props,
         children
@@ -407,7 +407,7 @@ var AccordionTrigger = React30__default.default.forwardRef(({ className, childre
     {
       ref,
       type: "button",
-      className: clsx44__default.default("ds-accordion__trigger", className),
+      className: clsx21__default.default("ds-accordion__trigger", className),
       "aria-expanded": isOpen,
       onClick: () => toggle(value),
       ...props,
@@ -462,7 +462,7 @@ var AccordionContent = React30__default.default.forwardRef(({ className, childre
     "div",
     {
       ref: contentRef,
-      className: clsx44__default.default("ds-accordion__content", className),
+      className: clsx21__default.default("ds-accordion__content", className),
       style: {
         height: height !== void 0 ? `${height}px` : "auto"
       },
@@ -479,7 +479,7 @@ var Label = React30__default.default.forwardRef(
       "label",
       {
         ref,
-        className: clsx44__default.default("ds-label", disabled && "ds-label--disabled", className),
+        className: clsx21__default.default("ds-label", disabled && "ds-label--disabled", className),
         "data-disabled": disabled || void 0,
         ...props
       }
@@ -493,7 +493,7 @@ var Skeleton = React30__default.default.forwardRef(
       "div",
       {
         ref,
-        className: clsx44__default.default("ds-skeleton", className),
+        className: clsx21__default.default("ds-skeleton", className),
         ...props
       }
     );
@@ -508,7 +508,7 @@ var Separator = React30__default.default.forwardRef(
         ref,
         role: "separator",
         "aria-orientation": orientation,
-        className: clsx44__default.default(
+        className: clsx21__default.default(
           "ds-separator",
           `ds-separator--${orientation}`,
           className
@@ -586,7 +586,7 @@ var SheetContent = React30__default.default.forwardRef(
           {
             ref,
             role: "dialog",
-            className: clsx44__default.default("ds-sheet__content", `ds-sheet__content--${side}`, className),
+            className: clsx21__default.default("ds-sheet__content", `ds-sheet__content--${side}`, className),
             ...props,
             children
           }
@@ -598,15 +598,15 @@ var SheetContent = React30__default.default.forwardRef(
 );
 SheetContent.displayName = "SheetContent";
 var SheetHeader = React30__default.default.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: clsx44__default.default("ds-sheet__header", className), ...props })
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: clsx21__default.default("ds-sheet__header", className), ...props })
 );
 SheetHeader.displayName = "SheetHeader";
-var SheetTitle = React30__default.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("h2", { ref, className: clsx44__default.default("ds-sheet__title", className), ...props }));
+var SheetTitle = React30__default.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("h2", { ref, className: clsx21__default.default("ds-sheet__title", className), ...props }));
 SheetTitle.displayName = "SheetTitle";
-var SheetDescription = React30__default.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("p", { ref, className: clsx44__default.default("ds-sheet__description", className), ...props }));
+var SheetDescription = React30__default.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("p", { ref, className: clsx21__default.default("ds-sheet__description", className), ...props }));
 SheetDescription.displayName = "SheetDescription";
 var SheetFooter = React30__default.default.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: clsx44__default.default("ds-sheet__footer", className), ...props })
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: clsx21__default.default("ds-sheet__footer", className), ...props })
 );
 SheetFooter.displayName = "SheetFooter";
 var AvatarContext = React30__default.default.createContext({
@@ -635,7 +635,7 @@ var Avatar = React30__default.default.forwardRef(
       "span",
       {
         ref,
-        className: clsx44__default.default("ds-avatar", `ds-avatar--${size}`, className),
+        className: clsx21__default.default("ds-avatar", `ds-avatar--${size}`, className),
         ...props,
         children
       }
@@ -654,7 +654,7 @@ var AvatarImage = React30__default.default.forwardRef(({ className, onError, ...
     "img",
     {
       ref,
-      className: clsx44__default.default("ds-avatar__image", className),
+      className: clsx21__default.default("ds-avatar__image", className),
       onError: handleError,
       ...props
     }
@@ -664,7 +664,7 @@ AvatarImage.displayName = "AvatarImage";
 var AvatarFallback = React30__default.default.forwardRef(({ className, ...props }, ref) => {
   const { hasImage, imageError } = React30__default.default.useContext(AvatarContext);
   if (hasImage && !imageError) return null;
-  return /* @__PURE__ */ jsxRuntime.jsx("span", { ref, className: clsx44__default.default("ds-avatar__fallback", className), ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { ref, className: clsx21__default.default("ds-avatar__fallback", className), ...props });
 });
 AvatarFallback.displayName = "AvatarFallback";
 var PopoverContext = React30__default.default.createContext(null);
@@ -711,7 +711,7 @@ var PopoverTrigger = React30__default.default.forwardRef(
       {
         ref,
         type: "button",
-        className: clsx44__default.default("ds-popover__trigger", className),
+        className: clsx21__default.default("ds-popover__trigger", className),
         onClick: handleClick,
         ...props
       }
@@ -727,7 +727,7 @@ var PopoverContent = React30__default.default.forwardRef(
       "div",
       {
         ref,
-        className: clsx44__default.default(
+        className: clsx21__default.default(
           "ds-popover__content",
           `ds-popover__content--${side}`,
           `ds-popover__content--align-${align}`,
@@ -750,7 +750,7 @@ var PopoverClose = React30__default.default.forwardRef(({ className, onClick, ..
     {
       ref,
       type: "button",
-      className: clsx44__default.default("ds-popover__close", className),
+      className: clsx21__default.default("ds-popover__close", className),
       onClick: handleClick,
       ...props
     }
@@ -768,7 +768,7 @@ var Progress = React30__default.default.forwardRef(
         "aria-valuenow": value,
         "aria-valuemin": 0,
         "aria-valuemax": max,
-        className: clsx44__default.default("ds-progress", className),
+        className: clsx21__default.default("ds-progress", className),
         ...props,
         children: /* @__PURE__ */ jsxRuntime.jsx(
           "div",
@@ -784,7 +784,7 @@ var Progress = React30__default.default.forwardRef(
 Progress.displayName = "Progress";
 var ScrollArea = React30__default.default.forwardRef(
   ({ className, children, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: clsx44__default.default("ds-scroll-area", className), ...props, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-scroll-area__viewport", children }) });
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: clsx21__default.default("ds-scroll-area", className), ...props, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-scroll-area__viewport", children }) });
   }
 );
 ScrollArea.displayName = "ScrollArea";
@@ -794,7 +794,7 @@ var ScrollBar = React30__default.default.forwardRef(
       "div",
       {
         ref,
-        className: clsx44__default.default(
+        className: clsx21__default.default(
           "ds-scroll-area__scrollbar",
           `ds-scroll-area__scrollbar--${orientation}`,
           className
@@ -812,7 +812,7 @@ var Breadcrumb = React30__default.default.forwardRef(
       {
         ref,
         "aria-label": ariaLabel,
-        className: clsx44__default.default("ds-breadcrumb", className),
+        className: clsx21__default.default("ds-breadcrumb", className),
         ...props
       }
     );
@@ -824,7 +824,7 @@ var BreadcrumbList = React30__default.default.forwardRef(({ className, ...props
     "ol",
     {
       ref,
-      className: clsx44__default.default("ds-breadcrumb__list", className),
+      className: clsx21__default.default("ds-breadcrumb__list", className),
       ...props
     }
   );
@@ -835,7 +835,7 @@ var BreadcrumbItem = React30__default.default.forwardRef(({ className, ...props
     "li",
     {
       ref,
-      className: clsx44__default.default("ds-breadcrumb__item", className),
+      className: clsx21__default.default("ds-breadcrumb__item", className),
       ...props
     }
   );
@@ -847,7 +847,7 @@ var BreadcrumbLink = React30__default.default.forwardRef(({ className, asChild =
     Comp,
     {
       ref,
-      className: clsx44__default.default("ds-breadcrumb__link", className),
+      className: clsx21__default.default("ds-breadcrumb__link", className),
       ...props
     }
   );
@@ -861,7 +861,7 @@ var BreadcrumbPage = React30__default.default.forwardRef(({ className, ...props
       role: "link",
       "aria-current": "page",
       "aria-disabled": "true",
-      className: clsx44__default.default("ds-breadcrumb__page", className),
+      className: clsx21__default.default("ds-breadcrumb__page", className),
       ...props
     }
   );
@@ -874,7 +874,7 @@ var BreadcrumbSeparator = React30__default.default.forwardRef(({ className, chil
       ref,
       role: "presentation",
       "aria-hidden": "true",
-      className: clsx44__default.default("ds-breadcrumb__separator", className),
+      className: clsx21__default.default("ds-breadcrumb__separator", className),
       ...props,
       children: children ?? "/"
     }
@@ -886,7 +886,7 @@ var BreadcrumbEllipsis = React30__default.default.forwardRef(({ className, ...pr
     "span",
     {
       ref,
-      className: clsx44__default.default("ds-breadcrumb__ellipsis", className),
+      className: clsx21__default.default("ds-breadcrumb__ellipsis", className),
       ...props,
       children: "\u2026"
     }
@@ -919,7 +919,7 @@ var Toggle = React30__default.default.forwardRef(
       {
         ref,
         type: "button",
-        className: clsx44__default.default(
+        className: clsx21__default.default(
           "ds-toggle",
           `ds-toggle--${variant}`,
           `ds-toggle--${size}`,
@@ -967,7 +967,7 @@ var ToggleGroup = React30__default.default.forwardRef(
       {
         ref,
         role: "group",
-        className: clsx44__default.default("ds-toggle-group", className),
+        className: clsx21__default.default("ds-toggle-group", className),
         ...props,
         children
       }
@@ -988,7 +988,7 @@ var ToggleGroupItem = React30__default.default.forwardRef(({ className, value, c
       ref,
       type: "button",
       "aria-pressed": pressed,
-      className: clsx44__default.default(
+      className: clsx21__default.default(
         "ds-toggle-group__item",
         pressed && "ds-toggle-group__item--pressed",
         className
@@ -1027,7 +1027,7 @@ var Slider = React30__default.default.forwardRef(
       "div",
       {
         ref,
-        className: clsx44__default.default("ds-slider", disabled && "ds-slider--disabled", className),
+        className: clsx21__default.default("ds-slider", disabled && "ds-slider--disabled", className),
         ...props,
         children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-slider__track", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -1088,7 +1088,7 @@ var Collapsible = React30__default.default.forwardRef(
       "div",
       {
         ref,
-        className: clsx44__default.default("ds-collapsible", className),
+        className: clsx21__default.default("ds-collapsible", className),
         "data-state": open ? "open" : "closed",
         ...props,
         children
@@ -1108,7 +1108,7 @@ var CollapsibleTrigger = React30__default.default.forwardRef(({ className, onCli
     {
       ref,
       type: "button",
-      className: clsx44__default.default("ds-collapsible__trigger", className),
+      className: clsx21__default.default("ds-collapsible__trigger", className),
       onClick: handleClick,
       ...props
     }
@@ -1143,7 +1143,7 @@ var CollapsibleContent = React30__default.default.forwardRef(({ className, child
     "div",
     {
       ref: contentRef,
-      className: clsx44__default.default("ds-collapsible__content", className),
+      className: clsx21__default.default("ds-collapsible__content", className),
       "data-state": open ? "open" : "closed",
       style: {
         maxHeight: maxHeight !== void 0 ? `${maxHeight}px` : "none"
@@ -1206,7 +1206,7 @@ var HoverCardTrigger = React30__default.default.forwardRef(({ className, onMouse
     "span",
     {
       ref,
-      className: clsx44__default.default("ds-hover-card__trigger", className),
+      className: clsx21__default.default("ds-hover-card__trigger", className),
       onMouseEnter: handleMouseEnter,
       onMouseLeave: handleMouseLeave,
       ...props
@@ -1230,7 +1230,7 @@ var HoverCardContent = React30__default.default.forwardRef(
       "div",
       {
         ref,
-        className: clsx44__default.default(
+        className: clsx21__default.default(
           "ds-hover-card__content",
           `ds-hover-card__content--${side}`,
           `ds-hover-card__content--align-${align}`,
@@ -1250,7 +1250,7 @@ var AspectRatio = React30__default.default.forwardRef(
       "div",
       {
         ref,
-        className: clsx44__default.default("ds-aspect-ratio", className),
+        className: clsx21__default.default("ds-aspect-ratio", className),
         style: { ...style, paddingBottom: `${1 / ratio * 100}%` },
         ...props,
         children
@@ -1267,7 +1267,7 @@ var Pagination = React30__default.default.forwardRef(
         ref,
         role: "navigation",
         "aria-label": ariaLabel,
-        className: clsx44__default.default("ds-pagination", className),
+        className: clsx21__default.default("ds-pagination", className),
         ...props
       }
     );
@@ -1279,7 +1279,7 @@ var PaginationContent = React30__default.default.forwardRef(({ className, ...pro
     "ul",
     {
       ref,
-      className: clsx44__default.default("ds-pagination__content", className),
+      className: clsx21__default.default("ds-pagination__content", className),
       ...props
     }
   );
@@ -1290,7 +1290,7 @@ var PaginationItem = React30__default.default.forwardRef(({ className, ...props
     "li",
     {
       ref,
-      className: clsx44__default.default("ds-pagination__item", className),
+      className: clsx21__default.default("ds-pagination__item", className),
       ...props
     }
   );
@@ -1303,7 +1303,7 @@ var PaginationLink = React30__default.default.forwardRef(({ className, isActive
     {
       ref,
       "aria-current": isActive ? "page" : void 0,
-      className: clsx44__default.default(
+      className: clsx21__default.default(
         "ds-pagination__link",
         `ds-pagination__link--${size}`,
         isActive && "ds-pagination__link--active",
@@ -1320,7 +1320,7 @@ var PaginationPrevious = React30__default.default.forwardRef(({ className, label
     {
       ref,
       "aria-label": ariaLabel,
-      className: clsx44__default.default("ds-pagination__prev", className),
+      className: clsx21__default.default("ds-pagination__prev", className),
       ...props,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -1351,7 +1351,7 @@ var PaginationNext = React30__default.default.forwardRef(({ className, label = "
     {
       ref,
       "aria-label": ariaLabel,
-      className: clsx44__default.default("ds-pagination__next", className),
+      className: clsx21__default.default("ds-pagination__next", className),
       ...props,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx("span", { children: label }),
@@ -1382,7 +1382,7 @@ var PaginationEllipsis = React30__default.default.forwardRef(({ className, ...pr
     {
       ref,
       "aria-hidden": "true",
-      className: clsx44__default.default("ds-pagination__ellipsis", className),
+      className: clsx21__default.default("ds-pagination__ellipsis", className),
       ...props,
       children: "..."
     }
@@ -1405,7 +1405,7 @@ var Heading = React30__default.default.forwardRef(
       Comp,
       {
         ref,
-        className: clsx44__default.default("ds-heading", `ds-heading--${level}`, className),
+        className: clsx21__default.default("ds-heading", `ds-heading--${level}`, className),
         ...props,
         children
       }
@@ -1420,7 +1420,7 @@ var Text = React30__default.default.forwardRef(
       Comp,
       {
         ref,
-        className: clsx44__default.default("ds-text", `ds-text--${variant}`, className),
+        className: clsx21__default.default("ds-text", `ds-text--${variant}`, className),
         ...props,
         children
       }
@@ -1434,7 +1434,7 @@ var Prose = React30__default.default.forwardRef(
       "div",
       {
         ref,
-        className: clsx44__default.default("ds-prose", className),
+        className: clsx21__default.default("ds-prose", className),
         ...props,
         children
       }
@@ -1453,7 +1453,7 @@ function useCarouselContext() {
 var Carousel = React30__default.default.forwardRef(
   ({ className, children, ...props }, ref) => {
     const scrollRef = React30__default.default.useRef(null);
-    return /* @__PURE__ */ jsxRuntime.jsx(CarouselContext.Provider, { value: { scrollRef }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: clsx44__default.default("ds-carousel", className), ...props, children }) });
+    return /* @__PURE__ */ jsxRuntime.jsx(CarouselContext.Provider, { value: { scrollRef }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: clsx21__default.default("ds-carousel", className), ...props, children }) });
   }
 );
 Carousel.displayName = "Carousel";
@@ -1470,11 +1470,11 @@ var CarouselContent = React30__default.default.forwardRef(({ className, ...props
     },
     [ref, scrollRef]
   );
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: mergedRef, className: clsx44__default.default("ds-carousel__content", className), ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: mergedRef, className: clsx21__default.default("ds-carousel__content", className), ...props });
 });
 CarouselContent.displayName = "CarouselContent";
 var CarouselItem = React30__default.default.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: clsx44__default.default("ds-carousel__item", className), ...props })
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: clsx21__default.default("ds-carousel__item", className), ...props })
 );
 CarouselItem.displayName = "CarouselItem";
 var CarouselPrevious = React30__default.default.forwardRef(({ className, onClick, children, "aria-label": ariaLabel = "Previous slide", ...props }, ref) => {
@@ -1493,7 +1493,7 @@ var CarouselPrevious = React30__default.default.forwardRef(({ className, onClick
     {
       ref,
       type: "button",
-      className: clsx44__default.default("ds-carousel__prev", className),
+      className: clsx21__default.default("ds-carousel__prev", className),
       "aria-label": ariaLabel,
       onClick: handleClick,
       ...props,
@@ -1527,7 +1527,7 @@ var CarouselNext = React30__default.default.forwardRef(({ className, onClick, ch
     {
       ref,
       type: "button",
-      className: clsx44__default.default("ds-carousel__next", className),
+      className: clsx21__default.default("ds-carousel__next", className),
       "aria-label": ariaLabel,
       onClick: handleClick,
       ...props,
@@ -1653,7 +1653,7 @@ var Command = React30__default.default.forwardRef(
       "div",
       {
         ref,
-        className: clsx44__default.default("ds-command", className),
+        className: clsx21__default.default("ds-command", className),
         onKeyDown: handleKeyDown,
         ...props,
         children
@@ -1704,7 +1704,7 @@ var CommandInput = React30__default.default.forwardRef(({ className, onChange, .
         "aria-activedescendant": activeId ?? void 0,
         "aria-autocomplete": "list",
         autoComplete: "off",
-        className: clsx44__default.default("ds-command__input", className),
+        className: clsx21__default.default("ds-command__input", className),
         value: search,
         onChange: handleChange,
         ...props
@@ -1722,7 +1722,7 @@ var CommandList = React30__default.default.forwardRef(
         ref: mergeRefs(ref, listRef),
         id: listId,
         role: "listbox",
-        className: clsx44__default.default("ds-command__list", className),
+        className: clsx21__default.default("ds-command__list", className),
         ...props
       }
     );
@@ -1730,11 +1730,11 @@ var CommandList = React30__default.default.forwardRef(
 );
 CommandList.displayName = "CommandList";
 var CommandEmpty = React30__default.default.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: clsx44__default.default("ds-command__empty", className), ...props })
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: clsx21__default.default("ds-command__empty", className), ...props })
 );
 CommandEmpty.displayName = "CommandEmpty";
 var CommandGroup = React30__default.default.forwardRef(
-  ({ className, heading, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: clsx44__default.default("ds-command__group", className), ...props, children: [
+  ({ className, heading, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: clsx21__default.default("ds-command__group", className), ...props, children: [
     heading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-command__group-heading", children: heading }),
     children
   ] })
@@ -1769,7 +1769,7 @@ var CommandItem = React30__default.default.forwardRef(
         tabIndex: 0,
         "aria-selected": isActive,
         "data-active": isActive || void 0,
-        className: clsx44__default.default("ds-command__item", className),
+        className: clsx21__default.default("ds-command__item", className),
         onClick: handleClick,
         onKeyDown: handleKeyDown,
         onPointerEnter: handlePointerEnter,
@@ -1779,7 +1779,7 @@ var CommandItem = React30__default.default.forwardRef(
   }
 );
 CommandItem.displayName = "CommandItem";
-var CommandSeparator = React30__default.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: clsx44__default.default("ds-command__separator", className), ...props }));
+var CommandSeparator = React30__default.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: clsx21__default.default("ds-command__separator", className), ...props }));
 CommandSeparator.displayName = "CommandSeparator";
 var SIZE_CLASSES = {
   sm: "ds-dialog__content--sm",
@@ -1796,7 +1796,7 @@ var CommandDialog = ({
 }) => /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxRuntime.jsxs(
   DialogContent,
   {
-    className: clsx44__default.default("ds-command-dialog", SIZE_CLASSES[size], className),
+    className: clsx21__default.default("ds-command-dialog", SIZE_CLASSES[size], className),
     children: [
       /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { className: "ds-command-dialog__sr-title", children: title }),
       children
@@ -1865,7 +1865,7 @@ var DrawerContent = React30__default.default.forwardRef(
           {
             ref,
             role: "dialog",
-            className: clsx44__default.default("ds-drawer__content", className),
+            className: clsx21__default.default("ds-drawer__content", className),
             ...props,
             children: [
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-drawer__handle", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-drawer__handle-bar" }) }),
@@ -1880,15 +1880,15 @@ var DrawerContent = React30__default.default.forwardRef(
 );
 DrawerContent.displayName = "DrawerContent";
 var DrawerHeader = React30__default.default.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: clsx44__default.default("ds-drawer__header", className), ...props })
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: clsx21__default.default("ds-drawer__header", className), ...props })
 );
 DrawerHeader.displayName = "DrawerHeader";
-var DrawerTitle = React30__default.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("h2", { ref, className: clsx44__default.default("ds-drawer__title", className), ...props }));
+var DrawerTitle = React30__default.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("h2", { ref, className: clsx21__default.default("ds-drawer__title", className), ...props }));
 DrawerTitle.displayName = "DrawerTitle";
-var DrawerDescription = React30__default.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("p", { ref, className: clsx44__default.default("ds-drawer__description", className), ...props }));
+var DrawerDescription = React30__default.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("p", { ref, className: clsx21__default.default("ds-drawer__description", className), ...props }));
 DrawerDescription.displayName = "DrawerDescription";
 var DrawerFooter = React30__default.default.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: clsx44__default.default("ds-drawer__footer", className), ...props })
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: clsx21__default.default("ds-drawer__footer", className), ...props })
 );
 DrawerFooter.displayName = "DrawerFooter";
 var DEFAULT_WEEKDAY_LABELS = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
@@ -1959,7 +1959,7 @@ var Calendar = React30__default.default.forwardRef(
     const handleDayClick = (date) => {
       onSelect?.(date);
     };
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: clsx44__default.default("ds-calendar", className), ...props, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: clsx21__default.default("ds-calendar", className), ...props, children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ds-calendar__header", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           "button",
@@ -2023,7 +2023,7 @@ var Calendar = React30__default.default.forwardRef(
             "button",
             {
               type: "button",
-              className: clsx44__default.default(
+              className: clsx21__default.default(
                 "ds-calendar__day",
                 isSelected && "ds-calendar__day--selected",
                 isToday && "ds-calendar__day--today",
@@ -2075,7 +2075,7 @@ var InputOTP = React30__default.default.forwardRef(
       "div",
       {
         ref,
-        className: clsx44__default.default("ds-input-otp", className),
+        className: clsx21__default.default("ds-input-otp", className),
         onClick: handleContainerClick,
         ...props,
         children: [
@@ -2105,7 +2105,7 @@ var InputOTP = React30__default.default.forwardRef(
 );
 InputOTP.displayName = "InputOTP";
 var InputOTPGroup = React30__default.default.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: clsx44__default.default("ds-input-otp__group", className), ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: clsx21__default.default("ds-input-otp__group", className), ...props });
 });
 InputOTPGroup.displayName = "InputOTPGroup";
 var InputOTPSlot = React30__default.default.forwardRef(
@@ -2118,7 +2118,7 @@ var InputOTPSlot = React30__default.default.forwardRef(
       "div",
       {
         ref,
-        className: clsx44__default.default(
+        className: clsx21__default.default(
           "ds-input-otp__slot",
           isActive && "ds-input-otp__slot--active",
           isFilled && "ds-input-otp__slot--filled",
@@ -2132,7 +2132,7 @@ var InputOTPSlot = React30__default.default.forwardRef(
 );
 InputOTPSlot.displayName = "InputOTPSlot";
 var InputOTPSeparator = React30__default.default.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: clsx44__default.default("ds-input-otp__separator", className), role: "separator", ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: clsx21__default.default("ds-input-otp__separator", className), role: "separator", ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
     "svg",
     {
       width: "8",
@@ -2180,7 +2180,7 @@ var ContextMenuTrigger = React30__default.default.forwardRef(({ className, onCon
     "div",
     {
       ref,
-      className: clsx44__default.default("ds-context-menu__trigger", className),
+      className: clsx21__default.default("ds-context-menu__trigger", className),
       onContextMenu: handleContextMenu,
       ...props
     }
@@ -2227,7 +2227,7 @@ var ContextMenuContent = React30__default.default.forwardRef(({ className, ...pr
       {
         ref: mergedRef,
         role: "menu",
-        className: clsx44__default.default("ds-context-menu__content", className),
+        className: clsx21__default.default("ds-context-menu__content", className),
         style: { top: position.y, left: position.x },
         ...props
       }
@@ -2249,7 +2249,7 @@ var ContextMenuItem = React30__default.default.forwardRef(
       {
         ref,
         role: "menuitem",
-        className: clsx44__default.default("ds-context-menu__item", className),
+        className: clsx21__default.default("ds-context-menu__item", className),
         onClick: handleClick,
         ...props
       }
@@ -2263,7 +2263,7 @@ var ContextMenuSeparator = React30__default.default.forwardRef(({ className, ...
     {
       ref,
       role: "separator",
-      className: clsx44__default.default("ds-context-menu__separator", className),
+      className: clsx21__default.default("ds-context-menu__separator", className),
       ...props
     }
   );
@@ -2274,7 +2274,7 @@ var ContextMenuLabel = React30__default.default.forwardRef(({ className, ...prop
     "div",
     {
       ref,
-      className: clsx44__default.default("ds-context-menu__label", className),
+      className: clsx21__default.default("ds-context-menu__label", className),
       ...props
     }
   );
@@ -2314,7 +2314,7 @@ var FormItem = React30__default.default.forwardRef(
   ({ className, ...props }, ref) => {
     const id = React30__default.default.useId();
     const contextValue = React30__default.default.useMemo(() => ({ id }), [id]);
-    return /* @__PURE__ */ jsxRuntime.jsx(FormItemContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: clsx44__default.default("ds-form__item", className), ...props }) });
+    return /* @__PURE__ */ jsxRuntime.jsx(FormItemContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: clsx21__default.default("ds-form__item", className), ...props }) });
   }
 );
 FormItem.displayName = "FormItem";
@@ -2326,7 +2326,7 @@ var FormLabel = React30__default.default.forwardRef(({ className, ...props }, re
     {
       ref,
       htmlFor: fieldCtx?.id,
-      className: clsx44__default.default("ds-form__label", hasError && "ds-form__label--error", className),
+      className: clsx21__default.default("ds-form__label", hasError && "ds-form__label--error", className),
       ...props
     }
   );
@@ -2338,7 +2338,7 @@ var FormControl = React30__default.default.forwardRef(
     const descriptionId = fieldCtx ? `${fieldCtx.id}-description` : void 0;
     const messageId = fieldCtx ? `${fieldCtx.id}-message` : void 0;
     const hasError = !!fieldCtx?.error;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: clsx44__default.default("ds-form__control", className), ...props, children: React30__default.default.isValidElement(children) ? React30__default.default.cloneElement(children, {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: clsx21__default.default("ds-form__control", className), ...props, children: React30__default.default.isValidElement(children) ? React30__default.default.cloneElement(children, {
       id: fieldCtx?.id,
       "aria-describedby": descriptionId,
       "aria-invalid": hasError || void 0,
@@ -2354,7 +2354,7 @@ var FormDescription = React30__default.default.forwardRef(({ className, ...props
     {
       ref,
       id: fieldCtx ? `${fieldCtx.id}-description` : void 0,
-      className: clsx44__default.default("ds-form__description", className),
+      className: clsx21__default.default("ds-form__description", className),
       ...props
     }
   );
@@ -2370,7 +2370,7 @@ var FormMessage = React30__default.default.forwardRef(({ className, children, ..
       ref,
       id: fieldCtx ? `${fieldCtx.id}-message` : void 0,
       role: "alert",
-      className: clsx44__default.default("ds-form__message", className),
+      className: clsx21__default.default("ds-form__message", className),
       ...props,
       children: message
     }
@@ -2451,7 +2451,7 @@ var Box = React30.forwardRef(
       Component,
       {
         ref,
-        className: clsx44__default.default("ds-box", className),
+        className: clsx21__default.default("ds-box", className),
         style: { ...spacingStyles, ...style },
         ...domProps,
         children
@@ -2466,7 +2466,7 @@ var Stack = React30.forwardRef(
       Box,
       {
         ref,
-        className: clsx44__default.default("ds-stack", direction === "row" && "ds-stack--horizontal", className),
+        className: clsx21__default.default("ds-stack", direction === "row" && "ds-stack--horizontal", className),
         style: {
           alignItems: align,
           justifyContent: justify === "between" ? "space-between" : justify,
@@ -2487,7 +2487,7 @@ var Grid = React30.forwardRef(
       Box,
       {
         ref,
-        className: clsx44__default.default(
+        className: clsx21__default.default(
           "ds-grid",
           useColClass && `ds-grid--cols-${columns}`,
           fixed && "ds-grid--fixed",
@@ -2531,7 +2531,7 @@ var Container = React30.forwardRef(
       Box,
       {
         ref,
-        className: clsx44__default.default("ds-container", className),
+        className: clsx21__default.default("ds-container", className),
         style: {
           maxWidth: resolvedMaxWidth,
           ...style
@@ -2548,7 +2548,7 @@ var Section = React30.forwardRef(
       "section",
       {
         ref,
-        className: clsx44__default.default("ds-section-block", `ds-section-block--${padding}`, className),
+        className: clsx21__default.default("ds-section-block", `ds-section-block--${padding}`, className),
         ...props,
         children
       }
@@ -2558,87 +2558,16 @@ var Section = React30.forwardRef(
 Section.displayName = "Section";
 var VisuallyHidden = React30.forwardRef(
   ({ className, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx("span", { ref, className: clsx44__default.default("ds-visually-hidden", className), ...props });
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { ref, className: clsx21__default.default("ds-visually-hidden", className), ...props });
   }
 );
 VisuallyHidden.displayName = "VisuallyHidden";
-var NavbarBrand = React30.forwardRef(
-  ({ as: Component = "a", className, children, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(Component, { ref, className: clsx44__default.default("ds-navbar__brand", className), ...props, children });
-  }
-);
-NavbarBrand.displayName = "NavbarBrand";
-var NavbarContent = React30.forwardRef(
-  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: clsx44__default.default("ds-navbar__content", className), ...props, children })
-);
-NavbarContent.displayName = "NavbarContent";
-var NavbarItem = React30.forwardRef(
-  ({ as: Component = "a", className, active, children, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      Component,
-      {
-        ref,
-        className: clsx44__default.default("ds-navbar__item", active && "ds-navbar__item--active", className),
-        "aria-current": active ? "page" : void 0,
-        ...props,
-        children
-      }
-    );
-  }
-);
-NavbarItem.displayName = "NavbarItem";
-var NavbarActions = React30.forwardRef(
-  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: clsx44__default.default("ds-navbar__actions", className), ...props, children })
-);
-NavbarActions.displayName = "NavbarActions";
-var SearchIcon = () => /* @__PURE__ */ jsxRuntime.jsxs(
-  "svg",
-  {
-    width: "14",
-    height: "14",
-    viewBox: "0 0 24 24",
-    fill: "none",
-    stroke: "currentColor",
-    strokeWidth: "2",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    "aria-hidden": "true",
-    children: [
-      /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "11", cy: "11", r: "8" }),
-      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21 21l-4.35-4.35" })
-    ]
-  }
-);
-var NavbarSearchTrigger = React30.forwardRef(
-  ({
-    className,
-    placeholder = "Search...",
-    shortcut = "\u2318K",
-    hideShortcut = false,
-    ...props
-  }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
-    "button",
-    {
-      ref,
-      type: "button",
-      className: clsx44__default.default("ds-navbar__search-trigger", className),
-      "aria-label": `Search. Press ${shortcut} to open.`,
-      ...props,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ds-navbar__search-trigger-icon", children: /* @__PURE__ */ jsxRuntime.jsx(SearchIcon, {}) }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ds-navbar__search-trigger-placeholder", children: placeholder }),
-        !hideShortcut && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ds-navbar__search-trigger-shortcut", "aria-hidden": "true", children: shortcut })
-      ]
-    }
-  )
-);
-NavbarSearchTrigger.displayName = "NavbarSearchTrigger";
 var NavbarMobileNavItem = React30.forwardRef(
   ({ as: Component = "a", className, active, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
     Component,
     {
       ref,
-      className: clsx44__default.default(
+      className: clsx21__default.default(
         "ds-navbar__mobile-nav-item",
         active && "ds-navbar__mobile-nav-item--active",
         className
@@ -2651,144 +2580,13 @@ var NavbarMobileNavItem = React30.forwardRef(
 );
 NavbarMobileNavItem.displayName = "NavbarMobileNavItem";
 function NavbarMobileSeparator({ className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx44__default.default("ds-navbar__mobile-separator", className), role: "separator" });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx21__default.default("ds-navbar__mobile-separator", className), role: "separator" });
 }
 NavbarMobileSeparator.displayName = "NavbarMobileSeparator";
 var NavbarMobileActions = React30.forwardRef(
-  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: clsx44__default.default("ds-navbar__mobile-actions", className), ...props, children })
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: clsx21__default.default("ds-navbar__mobile-actions", className), ...props, children })
 );
 NavbarMobileActions.displayName = "NavbarMobileActions";
-var MOBILE_PANEL_VARIANTS = {
-  hidden: {
-    opacity: 0,
-    y: -12,
-    transition: { duration: 0.2, ease: [0.4, 0, 1, 1] }
-  },
-  visible: {
-    opacity: 1,
-    y: 0,
-    transition: { duration: 0.25, ease: [0.2, 0.8, 0.2, 1] }
-  }
-};
-var Navbar = React30.forwardRef(
-  ({
-    className,
-    isBordered = true,
-    isSticky = true,
-    onMenuOpenChange,
-    isMenuOpen,
-    mobileContent,
-    mobileToggleLabels,
-    children,
-    ...props
-  }, ref) => {
-    const [internalMenuOpen, setInternalMenuOpen] = React30.useState(false);
-    const isMobileMenuOpen = isMenuOpen !== void 0 ? isMenuOpen : internalMenuOpen;
-    const openLabel = mobileToggleLabels?.open ?? "Open menu";
-    const closeLabel = mobileToggleLabels?.close ?? "Close menu";
-    const handleToggle = () => {
-      const newState = !isMobileMenuOpen;
-      setInternalMenuOpen(newState);
-      onMenuOpenChange?.(newState);
-    };
-    React30.useEffect(() => {
-      if (isMobileMenuOpen) {
-        document.body.style.overflow = "hidden";
-        return () => {
-          document.body.style.overflow = "";
-        };
-      }
-    }, [isMobileMenuOpen]);
-    React30.useEffect(() => {
-      if (!isMobileMenuOpen) return;
-      const handleEscape = (e) => {
-        if (e.key === "Escape") {
-          setInternalMenuOpen(false);
-          onMenuOpenChange?.(false);
-        }
-      };
-      document.addEventListener("keydown", handleEscape);
-      return () => document.removeEventListener("keydown", handleEscape);
-    }, [isMobileMenuOpen, onMenuOpenChange]);
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      "nav",
-      {
-        ref,
-        className: clsx44__default.default(
-          "ds-navbar",
-          isSticky && "ds-navbar--sticky",
-          className
-        ),
-        style: {
-          borderBottom: isBordered ? void 0 : "none",
-          position: isSticky ? "sticky" : "relative"
-        },
-        ...props,
-        children: [
-          children,
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              className: "ds-navbar__toggle",
-              onClick: handleToggle,
-              "aria-label": isMobileMenuOpen ? closeLabel : openLabel,
-              "aria-expanded": isMobileMenuOpen,
-              children: isMobileMenuOpen ? /* @__PURE__ */ jsxRuntime.jsxs(
-                "svg",
-                {
-                  width: "24",
-                  height: "24",
-                  viewBox: "0 0 24 24",
-                  fill: "none",
-                  stroke: "currentColor",
-                  strokeWidth: "2",
-                  strokeLinecap: "round",
-                  strokeLinejoin: "round",
-                  children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
-                    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
-                  ]
-                }
-              ) : /* @__PURE__ */ jsxRuntime.jsxs(
-                "svg",
-                {
-                  width: "24",
-                  height: "24",
-                  viewBox: "0 0 24 24",
-                  fill: "none",
-                  stroke: "currentColor",
-                  strokeWidth: "2",
-                  strokeLinecap: "round",
-                  strokeLinejoin: "round",
-                  children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "3", y1: "12", x2: "21", y2: "12" }),
-                    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "3", y1: "6", x2: "21", y2: "6" }),
-                    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "3", y1: "18", x2: "21", y2: "18" })
-                  ]
-                }
-              )
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: isMobileMenuOpen && /* @__PURE__ */ jsxRuntime.jsx(
-            framerMotion.motion.div,
-            {
-              className: "ds-navbar__mobile-overlay",
-              variants: MOBILE_PANEL_VARIANTS,
-              initial: "hidden",
-              animate: "visible",
-              exit: "hidden",
-              role: "dialog",
-              "aria-modal": "true",
-              "aria-label": closeLabel,
-              children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-navbar__mobile-content", children: mobileContent })
-            }
-          ) })
-        ]
-      }
-    );
-  }
-);
-Navbar.displayName = "Navbar";
 var ChevronDown = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntime.jsx(
   "path",
   {
@@ -2799,55 +2597,6 @@ var ChevronDown = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "16", hei
     strokeLinejoin: "round"
   }
 ) });
-var EASE_OUT = [0.2, 0.8, 0.2, 1];
-var EASE_IN = [0.4, 0, 1, 1];
-var panelVariants = {
-  hidden: {
-    opacity: 0,
-    y: -8,
-    scale: 0.995
-  },
-  visible: {
-    opacity: 1,
-    y: 0,
-    scale: 1,
-    transition: {
-      duration: 0.25,
-      ease: EASE_OUT,
-      staggerChildren: 0.04,
-      delayChildren: 0.06
-    }
-  },
-  exit: {
-    opacity: 0,
-    y: -6,
-    scale: 0.995,
-    transition: {
-      duration: 0.15,
-      ease: EASE_IN
-    }
-  }
-};
-var itemVariants = {
-  hidden: {
-    opacity: 0,
-    y: 8,
-    filter: "blur(4px)"
-  },
-  visible: {
-    opacity: 1,
-    y: 0,
-    filter: "blur(0px)",
-    transition: {
-      duration: 0.3,
-      ease: EASE_OUT
-    }
-  },
-  exit: {
-    opacity: 0,
-    transition: { duration: 0.1 }
-  }
-};
 var NavbarMegaMenu = React30.forwardRef(
   ({ trigger, children, className, isOpen: controlledOpen, onOpenChange, variant = "fullWidth" }, ref) => {
     const [internalOpen, setInternalOpen] = React30.useState(false);
@@ -2918,7 +2667,7 @@ var NavbarMegaMenu = React30.forwardRef(
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
-        className: clsx44__default.default("ds-navbar-mega-menu", `ds-navbar-mega-menu--${variant}`, className),
+        className: clsx21__default.default("ds-navbar-mega-menu", `ds-navbar-mega-menu--${variant}`, className),
         ref,
         onMouseEnter: handleMouseEnter,
         onMouseLeave: handleMouseLeave,
@@ -2934,31 +2683,27 @@ var NavbarMegaMenu = React30.forwardRef(
               children: [
                 trigger,
                 /* @__PURE__ */ jsxRuntime.jsx(
-                  framerMotion.motion.span,
+                  "span",
                   {
                     className: "ds-navbar-mega-menu__chevron",
-                    animate: { rotate: isOpen ? 180 : 0 },
-                    transition: { duration: 0.2, ease: EASE_OUT },
+                    "data-state": isOpen ? "open" : "closed",
                     children: /* @__PURE__ */ jsxRuntime.jsx(ChevronDown, {})
                   }
                 )
               ]
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { ref: containerRef, children: /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { mode: "wait", children: isOpen && /* @__PURE__ */ jsxRuntime.jsx(
-            framerMotion.motion.div,
+          /* @__PURE__ */ jsxRuntime.jsx("div", { ref: containerRef, children: /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
             {
-              className: clsx44__default.default(
+              className: clsx21__default.default(
                 "ds-navbar-mega-menu__content",
                 `ds-navbar-mega-menu__content--${variant}`
               ),
-              variants: panelVariants,
-              initial: "hidden",
-              animate: "visible",
-              exit: "exit",
+              "data-state": isOpen ? "open" : "closed",
               children: variant === "fullWidth" ? /* @__PURE__ */ jsxRuntime.jsx(Container, { children }) : children
             }
-          ) }) })
+          ) })
         ]
       }
     );
@@ -2966,7 +2711,7 @@ var NavbarMegaMenu = React30.forwardRef(
 );
 NavbarMegaMenu.displayName = "NavbarMegaMenu";
 function NavbarMegaMenuSection({ heading, children, className }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(framerMotion.motion.div, { className: clsx44__default.default("ds-navbar-mega-menu__section", className), variants: itemVariants, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx21__default.default("ds-navbar-mega-menu__section", className), children: [
     heading && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "ds-navbar-mega-menu__section-heading", children: heading }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-navbar-mega-menu__section-items", children })
   ] });
@@ -2974,11 +2719,11 @@ function NavbarMegaMenuSection({ heading, children, className }) {
 NavbarMegaMenuSection.displayName = "NavbarMegaMenuSection";
 var NavbarMegaMenuItem = React30.forwardRef(
   ({ icon, label, description, className, as: Comp = "a", ...rest }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(framerMotion.motion.div, { variants: itemVariants, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-navbar-mega-menu__item-wrapper", children: /* @__PURE__ */ jsxRuntime.jsxs(
       Comp,
       {
         ref,
-        className: clsx44__default.default("ds-navbar-mega-menu__item", className),
+        className: clsx21__default.default("ds-navbar-mega-menu__item", className),
         ...rest,
         children: [
           icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ds-navbar-mega-menu__item-icon", children: icon }),
@@ -2992,8 +2737,6 @@ var NavbarMegaMenuItem = React30.forwardRef(
   }
 );
 NavbarMegaMenuItem.displayName = "NavbarMegaMenuItem";
-var EASE_OUT2 = [0.2, 0.8, 0.2, 1];
-var EASE_IN2 = [0.4, 0, 1, 1];
 var ChevronDown2 = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "8", height: "8", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntime.jsx(
   "path",
   {
@@ -3046,18 +2789,6 @@ function useFocusTrap(containerRef, active) {
     return () => container.removeEventListener("keydown", handleKeyDown);
   }, [active, containerRef]);
 }
-var MOBILE_OVERLAY_VARIANTS = {
-  hidden: {
-    opacity: 0,
-    y: -12,
-    transition: { duration: 0.2, ease: EASE_IN2 }
-  },
-  visible: {
-    opacity: 1,
-    y: 0,
-    transition: { duration: 0.25, ease: EASE_OUT2 }
-  }
-};
 var HYSTERESIS_RATIO = 0.25;
 var NavbarV2 = React30.forwardRef(
   ({
@@ -3147,7 +2878,7 @@ var NavbarV2 = React30.forwardRef(
       "nav",
       {
         ref: mergedRef,
-        className: clsx44__default.default(
+        className: clsx21__default.default(
           "ds-navbar-v2",
           isScrolled && "ds-navbar-v2--scrolled",
           className
@@ -3200,22 +2931,19 @@ var NavbarV2 = React30.forwardRef(
               }
             )
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: isMobileMenuOpen && /* @__PURE__ */ jsxRuntime.jsx(
-            framerMotion.motion.div,
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
             {
               ref: overlayRef,
               className: "ds-navbar-v2__mobile-overlay",
               style: { top: navHeight },
-              variants: MOBILE_OVERLAY_VARIANTS,
-              initial: "hidden",
-              animate: "visible",
-              exit: "hidden",
+              "data-state": isMobileMenuOpen ? "open" : "closed",
               role: "dialog",
               "aria-modal": "true",
               "aria-label": closeLabel,
               children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-navbar-v2__mobile-content", children: mobileContent })
             }
-          ) })
+          )
         ]
       }
     ) });
@@ -3223,7 +2951,7 @@ var NavbarV2 = React30.forwardRef(
 );
 NavbarV2.displayName = "NavbarV2";
 var NavbarV2Brand = React30.forwardRef(
-  ({ as: Component = "a", className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(Component, { ref, className: clsx44__default.default("ds-navbar-v2__brand", className), ...props, children })
+  ({ as: Component = "a", className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(Component, { ref, className: clsx21__default.default("ds-navbar-v2__brand", className), ...props, children })
 );
 NavbarV2Brand.displayName = "NavbarV2Brand";
 var NavbarV2Tabs = React30.forwardRef(
@@ -3242,7 +2970,7 @@ var NavbarV2Tabs = React30.forwardRef(
       "div",
       {
         ref,
-        className: clsx44__default.default(
+        className: clsx21__default.default(
           "ds-navbar-v2__tabs",
           scrolled && "ds-navbar-v2__tabs--demoted",
           className
@@ -3259,7 +2987,7 @@ var NavbarV2Tab = React30.forwardRef(
     Component,
     {
       ref,
-      className: clsx44__default.default("ds-navbar-v2__tab", active && "ds-navbar-v2__tab--active", className),
+      className: clsx21__default.default("ds-navbar-v2__tab", active && "ds-navbar-v2__tab--active", className),
       "aria-current": active ? "page" : void 0,
       ...Component === "button" ? { type: "button" } : {},
       ...props,
@@ -3272,36 +3000,6 @@ var NavbarV2Tab = React30.forwardRef(
   )
 );
 NavbarV2Tab.displayName = "NavbarV2Tab";
-var PANEL_VARIANTS = {
-  hidden: {
-    opacity: 0,
-    y: -8,
-    scale: 0.98,
-    x: "-50%"
-  },
-  visible: {
-    opacity: 1,
-    y: 0,
-    scale: 1,
-    x: "-50%",
-    transition: {
-      duration: 0.25,
-      ease: EASE_OUT2,
-      staggerChildren: 0.04,
-      delayChildren: 0.06
-    }
-  },
-  exit: {
-    opacity: 0,
-    y: -6,
-    scale: 0.98,
-    x: "-50%",
-    transition: {
-      duration: 0.15,
-      ease: EASE_IN2
-    }
-  }
-};
 var NavbarV2TabMenu = React30.forwardRef(
   ({
     icon,
@@ -3395,11 +3093,15 @@ var NavbarV2TabMenu = React30.forwardRef(
       window.addEventListener("resize", clampToViewport);
       return () => window.removeEventListener("resize", clampToViewport);
     }, [isOpen]);
+    const panelRefCallback = React30.useCallback((node) => {
+      containerRef.current = node;
+      panelRef.current = node;
+    }, []);
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
         ref,
-        className: clsx44__default.default("ds-navbar-v2__tab-menu", className),
+        className: clsx21__default.default("ds-navbar-v2__tab-menu", className),
         onMouseEnter: handleMouseEnter,
         onMouseLeave: handleMouseLeave,
         children: [
@@ -3407,7 +3109,7 @@ var NavbarV2TabMenu = React30.forwardRef(
             "button",
             {
               ref: triggerRef,
-              className: clsx44__default.default(
+              className: clsx21__default.default(
                 "ds-navbar-v2__tab",
                 (active || isOpen) && "ds-navbar-v2__tab--active"
               ),
@@ -3421,11 +3123,10 @@ var NavbarV2TabMenu = React30.forwardRef(
                 /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "ds-navbar-v2__tab-label-row", children: [
                   /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ds-navbar-v2__tab-label", children: label }),
                   /* @__PURE__ */ jsxRuntime.jsx(
-                    framerMotion.motion.span,
+                    "span",
                     {
                       className: "ds-navbar-v2__tab-chevron",
-                      animate: { rotate: isOpen ? 180 : 0 },
-                      transition: { duration: 0.2, ease: EASE_OUT2 },
+                      "data-state": isOpen ? "open" : "closed",
                       children: /* @__PURE__ */ jsxRuntime.jsx(ChevronDown2, {})
                     }
                   )
@@ -3433,24 +3134,18 @@ var NavbarV2TabMenu = React30.forwardRef(
               ]
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { mode: "wait", children: isOpen && /* @__PURE__ */ jsxRuntime.jsx(
-            framerMotion.motion.div,
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
             {
-              ref: (node) => {
-                containerRef.current = node;
-                panelRef.current = node;
-              },
+              ref: panelRefCallback,
               id: panelId,
               className: "ds-navbar-v2__mega-panel",
-              variants: PANEL_VARIANTS,
-              initial: "hidden",
-              animate: "visible",
-              exit: "exit",
+              "data-state": isOpen ? "open" : "closed",
               role: "region",
               "aria-label": `${label} menu`,
               children
             }
-          ) })
+          )
         ]
       }
     );
@@ -3458,7 +3153,7 @@ var NavbarV2TabMenu = React30.forwardRef(
 );
 NavbarV2TabMenu.displayName = "NavbarV2TabMenu";
 var NavbarV2Actions = React30.forwardRef(
-  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: clsx44__default.default("ds-navbar-v2__actions", className), ...props, children })
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: clsx21__default.default("ds-navbar-v2__actions", className), ...props, children })
 );
 NavbarV2Actions.displayName = "NavbarV2Actions";
 function useMergedRef(...refs) {
@@ -3483,7 +3178,7 @@ var SectionHeader = React30.forwardRef(
       "header",
       {
         ref,
-        className: clsx44__default.default("ds-section-header", `ds-section-header--${align}`, className),
+        className: clsx21__default.default("ds-section-header", `ds-section-header--${align}`, className),
         ...props,
         children: [
           eyebrow && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ds-section-header__eyebrow", children: eyebrow }),
@@ -3509,7 +3204,7 @@ var SectionShell = React30.forwardRef(
       "section",
       {
         ref,
-        className: clsx44__default.default(
+        className: clsx21__default.default(
           "ds-section",
           `ds-section--bg-${background}`,
           `ds-section--padding-${padding}`,
@@ -3551,7 +3246,7 @@ var HeroSection = React30.forwardRef(
     const isSplit = variant === "split";
     const isCenter = variant === "center";
     const textAlignment = align || (isCenter ? "center" : "left");
-    const ContentBlock = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx44__default.default("ds-hero__content", `ds-hero__content--${textAlignment}`), children: [
+    const ContentBlock = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx21__default.default("ds-hero__content", `ds-hero__content--${textAlignment}`), children: [
       eyebrow && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ds-section-header__eyebrow", style: { marginBottom: "var(--space-2)" }, children: eyebrow }),
       /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "ds-hero__title", children: title }),
       subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "ds-hero__subtitle", children: subtitle }),
@@ -3562,14 +3257,14 @@ var HeroSection = React30.forwardRef(
       children
     ] });
     const MediaBlock = media && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ds-hero__media-wrapper", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx44__default.default("ds-hero__media", mediaBrowserFrame && "ds-hero__media--browser"), children: media }),
-      floatingElement && /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx44__default.default("ds-hero__float", `ds-hero__float--${floatingPosition}`), children: floatingElement })
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx21__default.default("ds-hero__media", mediaBrowserFrame && "ds-hero__media--browser"), children: media }),
+      floatingElement && /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx21__default.default("ds-hero__float", `ds-hero__float--${floatingPosition}`), children: floatingElement })
     ] });
     return /* @__PURE__ */ jsxRuntime.jsx(
       SectionShell,
       {
         ref,
-        className: clsx44__default.default(
+        className: clsx21__default.default(
           "ds-hero",
           `ds-hero--${variant}`,
           withGrid && "ds-hero--bg-grid",
@@ -3642,9 +3337,9 @@ var FeatureSection = React30.forwardRef(
     className,
     ...props
   }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsxs(SectionShell, { ref, className: clsx44__default.default("ds-feature-section", className), ...props, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(SectionShell, { ref, className: clsx21__default.default("ds-feature-section", className), ...props, children: [
       /* @__PURE__ */ jsxRuntime.jsx(SectionHeader, { title, subtitle, eyebrow, align: alignHeader }),
-      variant === "grid" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx44__default.default("ds-feature-grid", `ds-feature-grid--${columns}-col`), children: features.map((feature, index) => /* @__PURE__ */ jsxRuntime.jsx(FeatureCard, { item: feature }, index)) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-feature-zigzag", children: features.map((feature, index) => /* @__PURE__ */ jsxRuntime.jsx(FeatureRow, { item: feature }, index)) })
+      variant === "grid" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx21__default.default("ds-feature-grid", `ds-feature-grid--${columns}-col`), children: features.map((feature, index) => /* @__PURE__ */ jsxRuntime.jsx(FeatureCard, { item: feature }, index)) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-feature-zigzag", children: features.map((feature, index) => /* @__PURE__ */ jsxRuntime.jsx(FeatureRow, { item: feature }, index)) })
     ] });
   }
 );
@@ -3654,7 +3349,7 @@ function FooterAccordionItem({ section, LinkComponent }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: clsx44__default.default(
+      className: clsx21__default.default(
         "ds-footer__accordion-item",
         isOpen && "ds-footer__accordion-item--open"
       ),
@@ -3718,7 +3413,7 @@ var SiteFooter = React30.forwardRef(
     const defaultCopyright = copyright || `\xA9 ${currentYear}. All rights reserved.`;
     const resolvedControls = controls || bottomActions;
     const LinkComponent = linkAs || "a";
-    return /* @__PURE__ */ jsxRuntime.jsxs("footer", { ref, className: clsx44__default.default("ds-footer", className), ...props, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs("footer", { ref, className: clsx21__default.default("ds-footer", className), ...props, children: [
       cta && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-footer__cta", "data-footer-zone": "cta", children: /* @__PURE__ */ jsxRuntime.jsx(Container, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ds-footer__cta-content", children: [
         /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "ds-footer__cta-headline", children: cta.headline }),
         cta.subtext && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "ds-footer__cta-subtext", children: cta.subtext }),
@@ -3818,7 +3513,7 @@ var CTASection = React30.forwardRef(
   }, ref) => {
     const isBoxed = variant === "boxed";
     const effectiveVariant = isBoxed ? "center" : variant;
-    const Content = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx44__default.default("ds-cta-section", `ds-cta-section--${effectiveVariant}`), children: [
+    const Content = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx21__default.default("ds-cta-section", `ds-cta-section--${effectiveVariant}`), children: [
       effectiveVariant === "split" ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ds-cta-section--split", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ds-cta-content", children: [
           /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "ds-cta-title", children: title }),
@@ -3838,13 +3533,13 @@ var CTASection = React30.forwardRef(
       ] }),
       children
     ] });
-    return /* @__PURE__ */ jsxRuntime.jsx(SectionShell, { ref, className: clsx44__default.default(className), ...props, children: isBoxed ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-cta-card", children: Content }) : Content });
+    return /* @__PURE__ */ jsxRuntime.jsx(SectionShell, { ref, className: clsx21__default.default(className), ...props, children: isBoxed ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-cta-card", children: Content }) : Content });
   }
 );
 CTASection.displayName = "CTASection";
 var StatsSection = React30.forwardRef(
   ({ stats, title, subtitle, eyebrow, className, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsxs(SectionShell, { ref, className: clsx44__default.default("ds-stats-section", className), ...props, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(SectionShell, { ref, className: clsx21__default.default("ds-stats-section", className), ...props, children: [
       /* @__PURE__ */ jsxRuntime.jsx(SectionHeader, { title, subtitle, eyebrow }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-stats-grid", children: stats.map((stat, idx) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ds-stat-card", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ds-stat-value", children: [
@@ -3901,7 +3596,7 @@ var StarRating = React30.forwardRef(
       return /* @__PURE__ */ jsxRuntime.jsxs(
         "span",
         {
-          className: clsx44__default.default(
+          className: clsx21__default.default(
             "ds-star-rating__star",
             visible && "ds-star-rating__star--visible"
           ),
@@ -3960,7 +3655,7 @@ var StarRating = React30.forwardRef(
           if (typeof ref === "function") ref(node);
           else if (ref) ref.current = node;
         },
-        className: clsx44__default.default("ds-star-rating", `ds-star-rating--${size}`, className),
+        className: clsx21__default.default("ds-star-rating", `ds-star-rating--${size}`, className),
         role: "img",
         "aria-label": `${clampedValue} out of ${max} stars`,
         ...props,
@@ -4033,7 +3728,7 @@ var PlatformBadge = React30.forwardRef(
       "div",
       {
         ref,
-        className: clsx44__default.default(
+        className: clsx21__default.default(
           "ds-platform-badge",
           `ds-platform-badge--${variant}`,
           `ds-platform-badge--${size}`,
@@ -4361,7 +4056,7 @@ var SocialProofCard = React30.forwardRef(
     metrics,
     ...props
   }, ref) => {
-    const cardClass = clsx44__default.default(
+    const cardClass = clsx21__default.default(
       "ds-social-card",
       `ds-social-card--${variant}`,
       animationDelay != null && "ds-social-card--animated",
@@ -4518,7 +4213,7 @@ var SocialProofGrid = React30.forwardRef(
       const childProps = child.props;
       return React30__default.default.cloneElement(child, {
         style: { ...childProps.style, "--card-delay": `${delay}ms` },
-        className: clsx44__default.default(childProps.className, "ds-social-card--animated")
+        className: clsx21__default.default(childProps.className, "ds-social-card--animated")
       });
     }) : children;
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -4526,9 +4221,9 @@ var SocialProofGrid = React30.forwardRef(
       {
         ref,
         padding: "md",
-        className: clsx44__default.default("ds-social-proof", className),
+        className: clsx21__default.default("ds-social-proof", className),
         ...props,
-        children: masonry ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-social-masonry", children: enhancedChildren }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx44__default.default("ds-social-grid", `ds-social-grid--${columns}-col`), children: enhancedChildren })
+        children: masonry ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-social-masonry", children: enhancedChildren }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx21__default.default("ds-social-grid", `ds-social-grid--${columns}-col`), children: enhancedChildren })
       }
     );
   }
@@ -4558,14 +4253,14 @@ var LogoItemRender = ({ item, className }) => {
       {
         href: item.href,
         context: "social-proof-logo",
-        className: clsx44__default.default("ds-social-logos__item", className),
+        className: clsx21__default.default("ds-social-logos__item", className),
         title: item.alt,
         openInNewTab: !isInternal,
         children: innerContent
       }
     );
   }
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx44__default.default("ds-social-logos__item", className), title: item.alt, children: innerContent });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx21__default.default("ds-social-logos__item", className), title: item.alt, children: innerContent });
 };
 var SocialProofLogos = React30.forwardRef(
   ({ title, logos, variant = "grid", speed = 40, className, ...props }, ref) => {
@@ -4574,7 +4269,7 @@ var SocialProofLogos = React30.forwardRef(
       {
         ref,
         padding: "sm",
-        className: clsx44__default.default("ds-social-logos", className),
+        className: clsx21__default.default("ds-social-logos", className),
         ...props,
         children: [
           title && /* @__PURE__ */ jsxRuntime.jsx(
@@ -4627,12 +4322,12 @@ var SocialProofFeatured = React30.forwardRef(
       {
         ref,
         padding: "md",
-        className: clsx44__default.default("ds-social-featured-section", className),
+        className: clsx21__default.default("ds-social-featured-section", className),
         ...props,
         children: /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
-            className: clsx44__default.default(
+            className: clsx21__default.default(
               "ds-social-featured",
               `ds-social-featured--${effectiveOrientation}`,
               `ds-social-featured--${featuredVariant}`
@@ -4783,7 +4478,7 @@ var SocialProofCarousel = React30.forwardRef(
         ref,
         padding: "none",
         containerFluid: true,
-        className: clsx44__default.default("ds-social-carousel", className),
+        className: clsx21__default.default("ds-social-carousel", className),
         ...props,
         children: /* @__PURE__ */ jsxRuntime.jsxs(
           framerMotion.motion.div,
@@ -4813,7 +4508,7 @@ function getShortsEmbedUrl(url) {
 }
 function VerticalVideoGrid({ urls, className }) {
   if (!urls || urls.length === 0) return null;
-  return /* @__PURE__ */ jsxRuntime.jsx(SectionShell, { className: clsx44__default.default("ds-vertical-video-grid my-16", className), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-4 md:gap-6 max-w-6xl mx-auto", children: urls.map((url, i) => /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(SectionShell, { className: clsx21__default.default("ds-vertical-video-grid my-16", className), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-4 md:gap-6 max-w-6xl mx-auto", children: urls.map((url, i) => /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
       className: "relative w-full overflow-hidden rounded-[20px] shadow-lg border border-white/10 bg-black",
@@ -4852,7 +4547,7 @@ var Sidebar = React30__default.default.forwardRef(
       "aside",
       {
         ref,
-        className: clsx44__default.default(
+        className: clsx21__default.default(
           "ds-sidebar",
           `ds-sidebar--${position}`,
           collapsed && "ds-sidebar--collapsed",
@@ -4867,7 +4562,7 @@ var Sidebar = React30__default.default.forwardRef(
 Sidebar.displayName = "Sidebar";
 var SidebarSection = React30__default.default.forwardRef(
   ({ title, className, children }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: clsx44__default.default("ds-sidebar__section", className), children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: clsx21__default.default("ds-sidebar__section", className), children: [
       title && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "ds-sidebar__section-title", children: title }),
       children
     ] });
@@ -4880,7 +4575,7 @@ var SidebarItem = React30__default.default.forwardRef(
       "button",
       {
         ref,
-        className: clsx44__default.default("ds-sidebar__item", active && "ds-sidebar__item--active", className),
+        className: clsx21__default.default("ds-sidebar__item", active && "ds-sidebar__item--active", className),
         onClick,
         type: "button",
         children: [
@@ -4898,7 +4593,7 @@ var FloatingTabBar = React30__default.default.forwardRef(
       "nav",
       {
         ref,
-        className: clsx44__default.default("ds-floating-tab-bar", `ds-floating-tab-bar--${position}`, className),
+        className: clsx21__default.default("ds-floating-tab-bar", `ds-floating-tab-bar--${position}`, className),
         role: "tablist",
         children
       }
@@ -4912,7 +4607,7 @@ var TabItem = React30__default.default.forwardRef(
       "button",
       {
         ref,
-        className: clsx44__default.default("ds-tab-item", active && "ds-tab-item--active", className),
+        className: clsx21__default.default("ds-tab-item", active && "ds-tab-item--active", className),
         onClick,
         role: "tab",
         "aria-selected": active,
@@ -4926,8 +4621,6 @@ var TabItem = React30__default.default.forwardRef(
   }
 );
 TabItem.displayName = "TabItem";
-var EASE_OUT3 = [0.2, 0.8, 0.2, 1];
-var EASE_IN3 = [0.4, 0, 1, 1];
 var GlobeIcon = () => /* @__PURE__ */ jsxRuntime.jsxs(
   "svg",
   {
@@ -4977,20 +4670,6 @@ var CheckIcon = () => /* @__PURE__ */ jsxRuntime.jsx(
     children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "20 6 9 17 4 12" })
   }
 );
-var PANEL_VARIANTS2 = {
-  hidden: {
-    opacity: 0,
-    y: -8,
-    scale: 0.95,
-    transition: { duration: 0.15, ease: EASE_IN3 }
-  },
-  visible: {
-    opacity: 1,
-    y: 0,
-    scale: 1,
-    transition: { duration: 0.2, ease: EASE_OUT3 }
-  }
-};
 var LocaleDropdown = React30.forwardRef(
   ({
     locales,
@@ -5093,7 +4772,7 @@ var LocaleDropdown = React30.forwardRef(
       "div",
       {
         ref,
-        className: clsx44__default.default(
+        className: clsx21__default.default(
           "ds-locale-dropdown",
           direction === "up" && "ds-locale-dropdown--up",
           align === "left" && "ds-locale-dropdown--align-left",
@@ -5118,29 +4797,25 @@ var LocaleDropdown = React30.forwardRef(
                 /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ds-locale-dropdown__trigger-icon", children: /* @__PURE__ */ jsxRuntime.jsx(GlobeIcon, {}) }),
                 currentLocale.flag && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ds-locale-dropdown__trigger-flag", "aria-hidden": "true", children: currentLocale.flag }),
                 /* @__PURE__ */ jsxRuntime.jsx(
-                  framerMotion.motion.span,
+                  "span",
                   {
                     className: "ds-locale-dropdown__trigger-chevron",
-                    animate: { rotate: isOpen ? 180 : 0 },
-                    transition: { duration: 0.2, ease: EASE_OUT3 },
+                    "data-state": isOpen ? "open" : "closed",
                     children: /* @__PURE__ */ jsxRuntime.jsx(ChevronDownIcon, {})
                   }
                 )
               ]
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: isOpen && /* @__PURE__ */ jsxRuntime.jsx(
-            framerMotion.motion.div,
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
             {
               ref: listRef,
               id: listboxId,
               className: "ds-locale-dropdown__panel",
               role: "listbox",
               "aria-label": "Select language",
-              variants: PANEL_VARIANTS2,
-              initial: "hidden",
-              animate: "visible",
-              exit: "hidden",
+              "data-state": isOpen ? "open" : "closed",
               onKeyDown: handleKeyDown,
               children: locales.map((locale, index) => {
                 const isActive = locale.code === activeLocale;
@@ -5150,7 +4825,7 @@ var LocaleDropdown = React30.forwardRef(
                   id: optionId,
                   role: "option",
                   "aria-selected": isActive,
-                  className: clsx44__default.default(
+                  className: clsx21__default.default(
                     "ds-locale-dropdown__option",
                     isActive && "ds-locale-dropdown__option--active",
                     isFocused && "ds-locale-dropdown__option--focused"
@@ -5167,7 +4842,7 @@ var LocaleDropdown = React30.forwardRef(
                 ] }, locale.code);
               })
             }
-          ) })
+          )
         ] })
       }
     );
@@ -5180,7 +4855,7 @@ var Tabs = React30__default.default.forwardRef(
       tabs.Tabs.Root,
       {
         ref,
-        className: clsx44__default.default("ds-tabs", `ds-tabs--${orientation}`, className),
+        className: clsx21__default.default("ds-tabs", `ds-tabs--${orientation}`, className),
         orientation,
         ...props
       }
@@ -5190,19 +4865,19 @@ var Tabs = React30__default.default.forwardRef(
 Tabs.displayName = "Tabs";
 var TabsList = React30__default.default.forwardRef(
   ({ className, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(tabs.Tabs.List, { ref, className: clsx44__default.default("ds-tabs__list", className), ...props });
+    return /* @__PURE__ */ jsxRuntime.jsx(tabs.Tabs.List, { ref, className: clsx21__default.default("ds-tabs__list", className), ...props });
   }
 );
 TabsList.displayName = "TabsList";
 var TabsTrigger = React30__default.default.forwardRef(
   ({ className, children, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(tabs.Tabs.Tab, { ref, className: clsx44__default.default("ds-tabs__trigger", className), ...props, children });
+    return /* @__PURE__ */ jsxRuntime.jsx(tabs.Tabs.Tab, { ref, className: clsx21__default.default("ds-tabs__trigger", className), ...props, children });
   }
 );
 TabsTrigger.displayName = "TabsTrigger";
 var TabsContent = React30__default.default.forwardRef(
   ({ className, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(tabs.Tabs.Panel, { ref, className: clsx44__default.default("ds-tabs__content", className), ...props });
+    return /* @__PURE__ */ jsxRuntime.jsx(tabs.Tabs.Panel, { ref, className: clsx21__default.default("ds-tabs__content", className), ...props });
   }
 );
 TabsContent.displayName = "TabsContent";
@@ -5279,7 +4954,7 @@ var Shell = React30__default.default.forwardRef(
       "div",
       {
         ref,
-        className: clsx44__default.default("ds-shell", `ds-shell--${computedLayout}`, className),
+        className: clsx21__default.default("ds-shell", `ds-shell--${computedLayout}`, className),
         "data-shell-layout": computedLayout,
         children: [
           (computedLayout === "left" || computedLayout === "right") && /* @__PURE__ */ jsxRuntime.jsxs(Sidebar, { position: computedLayout, children: [
@@ -5323,28 +4998,28 @@ var Shell = React30__default.default.forwardRef(
 Shell.displayName = "Shell";
 var DataTable = React30__default.default.forwardRef(
   ({ className, children, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-data-table-container", children: /* @__PURE__ */ jsxRuntime.jsx("table", { ref, className: clsx44__default.default("ds-data-table", className), ...props, children }) });
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-data-table-container", children: /* @__PURE__ */ jsxRuntime.jsx("table", { ref, className: clsx21__default.default("ds-data-table", className), ...props, children }) });
   }
 );
 DataTable.displayName = "DataTable";
 var DataTableHeader = React30__default.default.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ jsxRuntime.jsx("thead", { ref, className: clsx44__default.default("ds-data-table__header", className), ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx("thead", { ref, className: clsx21__default.default("ds-data-table__header", className), ...props });
 });
 DataTableHeader.displayName = "DataTableHeader";
 var DataTableBody = React30__default.default.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ jsxRuntime.jsx("tbody", { ref, className: clsx44__default.default("ds-data-table__body", className), ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx("tbody", { ref, className: clsx21__default.default("ds-data-table__body", className), ...props });
 });
 DataTableBody.displayName = "DataTableBody";
 var DataTableRow = React30__default.default.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ jsxRuntime.jsx("tr", { ref, className: clsx44__default.default("ds-data-table__row", className), ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx("tr", { ref, className: clsx21__default.default("ds-data-table__row", className), ...props });
 });
 DataTableRow.displayName = "DataTableRow";
 var DataTableHead = React30__default.default.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ jsxRuntime.jsx("th", { ref, className: clsx44__default.default("ds-data-table__head", className), ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx("th", { ref, className: clsx21__default.default("ds-data-table__head", className), ...props });
 });
 DataTableHead.displayName = "DataTableHead";
 var DataTableCell = React30__default.default.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ jsxRuntime.jsx("td", { ref, className: clsx44__default.default("ds-data-table__cell", className), ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx("td", { ref, className: clsx21__default.default("ds-data-table__cell", className), ...props });
 });
 DataTableCell.displayName = "DataTableCell";
 function getEmbedUrl(src) {
@@ -5381,7 +5056,7 @@ var VideoLightbox = React30.forwardRef(
       setOpen(true);
       onPlay?.();
     }, [onPlay]);
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: clsx44__default.default("ds-video-lightbox", className), children: /* @__PURE__ */ jsxRuntime.jsxs(dialog.Dialog.Root, { open, onOpenChange: setOpen, children: [
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: clsx21__default.default("ds-video-lightbox", className), children: /* @__PURE__ */ jsxRuntime.jsxs(dialog.Dialog.Root, { open, onOpenChange: setOpen, children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         dialog.Dialog.Trigger,
         {
@@ -5483,7 +5158,7 @@ var AnnouncementBar = React30.forwardRef(
       "div",
       {
         ref,
-        className: clsx44__default.default(
+        className: clsx21__default.default(
           "ds-announcement-bar",
           `ds-announcement-bar--${variant}`,
           href && "ds-announcement-bar--clickable",
@@ -5546,7 +5221,7 @@ var StickyActionBar = React30.forwardRef(
       "div",
       {
         ref,
-        className: clsx44__default.default(
+        className: clsx21__default.default(
           "ds-sticky-action-bar",
           `ds-sticky-action-bar--${position}`,
           `ds-sticky-action-bar--${variant}`,
@@ -5571,7 +5246,7 @@ var Badge = React30__default.default.forwardRef(
       "span",
       {
         ref,
-        className: clsx44__default.default("ds-badge", `ds-badge--${variant}`, className),
+        className: clsx21__default.default("ds-badge", `ds-badge--${variant}`, className),
         ...props
       }
     );
@@ -5592,7 +5267,7 @@ var PricingToggle = React30.forwardRef(
       "div",
       {
         ref,
-        className: clsx44__default.default("ds-pricing-toggle", className),
+        className: clsx21__default.default("ds-pricing-toggle", className),
         ...props,
         children: [
           /* @__PURE__ */ jsxRuntime.jsxs(
@@ -5661,7 +5336,7 @@ var BookingEmbed = React30.forwardRef(
           if (typeof ref === "function") ref(node);
           else if (ref) ref.current = node;
         },
-        className: clsx44__default.default("ds-booking-embed", className),
+        className: clsx21__default.default("ds-booking-embed", className),
         style: { "--embed-aspect-ratio": aspectRatio, ...style },
         ...props,
         children: [
@@ -5674,7 +5349,7 @@ var BookingEmbed = React30.forwardRef(
             {
               src: url,
               title,
-              className: clsx44__default.default("ds-booking-embed__iframe", isIframeLoaded && "ds-booking-embed__iframe--loaded"),
+              className: clsx21__default.default("ds-booking-embed__iframe", isIframeLoaded && "ds-booking-embed__iframe--loaded"),
               onLoad: handleIframeLoad,
               frameBorder: "0",
               scrolling: "no"
@@ -5700,7 +5375,7 @@ var ProblemAgitation = React30.forwardRef(
       "section",
       {
         ref,
-        className: clsx44__default.default("ds-problem-agitation", className),
+        className: clsx21__default.default("ds-problem-agitation", className),
         ...props,
         children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ds-problem-agitation__header", children: [
@@ -5773,7 +5448,7 @@ var ProcessTimeline = React30.forwardRef(
           if (typeof ref === "function") ref(node);
           else if (ref) ref.current = node;
         },
-        className: clsx44__default.default(
+        className: clsx21__default.default(
           "ds-process-timeline",
           animated && "ds-process-timeline--animated",
           className
@@ -5793,7 +5468,7 @@ var ProcessTimeline = React30.forwardRef(
             return /* @__PURE__ */ jsxRuntime.jsxs(
               "div",
               {
-                className: clsx44__default.default(
+                className: clsx21__default.default(
                   "ds-process-timeline__step",
                   isActive && "ds-process-timeline__step--active"
                 ),
@@ -5835,7 +5510,7 @@ var PricingCard = React30__default.default.forwardRef(
       "div",
       {
         ref,
-        className: clsx44__default.default(
+        className: clsx21__default.default(
           "ds-pricing-card",
           highlighted && "ds-pricing-card--highlighted",
           className
@@ -5857,7 +5532,7 @@ var PricingCard = React30__default.default.forwardRef(
           features.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "ds-pricing-card__features", children: features.map((feature, idx) => /* @__PURE__ */ jsxRuntime.jsxs(
             "li",
             {
-              className: clsx44__default.default(
+              className: clsx21__default.default(
                 "ds-pricing-card__feature",
                 feature.included === false && "ds-pricing-card__feature--excluded"
               ),
@@ -5899,7 +5574,7 @@ var PricingSection = React30.forwardRef(
       "section",
       {
         ref,
-        className: clsx44__default.default("ds-pricing-section", className),
+        className: clsx21__default.default("ds-pricing-section", className),
         ...props,
         children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ds-pricing-section__header", children: [
@@ -5911,7 +5586,7 @@ var PricingSection = React30.forwardRef(
             PricingCard,
             {
               ...plan,
-              className: clsx44__default.default(
+              className: clsx21__default.default(
                 "ds-pricing-section__card",
                 plan.highlighted && "ds-pricing-section__card--popular"
               )
@@ -5974,7 +5649,7 @@ var LeadCaptureForm = React30.forwardRef(
       "form",
       {
         ref,
-        className: clsx44__default.default(
+        className: clsx21__default.default(
           "ds-lead-capture",
           `ds-lead-capture--${layout}`,
           className
@@ -5996,7 +5671,7 @@ var LeadCaptureForm = React30.forwardRef(
                   placeholder: emailPlaceholder,
                   disabled: isCurrentlyLoading,
                   "aria-label": layout === "horizontal" ? emailLabel : void 0,
-                  className: clsx44__default.default("ds-lead-capture__input", error && "ds-lead-capture__input--error")
+                  className: clsx21__default.default("ds-lead-capture__input", error && "ds-lead-capture__input--error")
                 }
               ),
               error && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-lead-capture__error", children: error })
@@ -6045,7 +5720,7 @@ var ArticleCard = React30.forwardRef(
         ref,
         href,
         context: "article-card",
-        className: clsx44__default.default(
+        className: clsx21__default.default(
           "ds-article-card",
           `ds-article-card--${variant}`,
           !imageUrl && "ds-article-card--no-image",
@@ -6131,7 +5806,7 @@ var ArticleLayout = React30.forwardRef(
       "article",
       {
         ref,
-        className: clsx44__default.default("ds-article-layout", className),
+        className: clsx21__default.default("ds-article-layout", className),
         ...props,
         children: [
           /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "ds-article-layout__header", children: [
@@ -6143,7 +5818,7 @@ var ArticleLayout = React30.forwardRef(
             ] })
           ] }),
           heroImage && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-article-layout__hero", children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: heroImage, alt: "", "aria-hidden": "true" }) }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx44__default.default(
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx21__default.default(
             "ds-article-layout__body",
             sidebar && "ds-article-layout__body--with-sidebar"
           ), children: [
@@ -6173,7 +5848,7 @@ var CaseStudyCard = React30.forwardRef(
       "article",
       {
         ref,
-        className: clsx44__default.default("ds-case-study-card", className),
+        className: clsx21__default.default("ds-case-study-card", className),
         ...props,
         children: /* @__PURE__ */ jsxRuntime.jsxs(OutboundLink, { href, context: "case-study-card", className: "ds-case-study-card__link", openInNewTab: false, children: [
           coverImage && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-case-study-card__image-wrap", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -6283,7 +5958,7 @@ var MetricCounter = React30.forwardRef(
           if (typeof ref === "function") ref(node);
           else if (ref) ref.current = node;
         },
-        className: clsx44__default.default("ds-metric-counter", className),
+        className: clsx21__default.default("ds-metric-counter", className),
         ...props,
         children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ds-metric-counter__value-wrapper", children: [
@@ -6314,7 +5989,7 @@ var BrowserFrame = React30.forwardRef(
       "div",
       {
         ref,
-        className: clsx44__default.default(
+        className: clsx21__default.default(
           "ds-browser-frame",
           `ds-browser-frame--${variant}`,
           withGlow && "ds-browser-frame--glow",
@@ -6407,7 +6082,7 @@ var VideoEmbed = React30.forwardRef(
       "div",
       {
         ref: containerRef,
-        className: clsx44__default.default("ds-video-embed", withFrame && "ds-video-embed--framed", className),
+        className: clsx21__default.default("ds-video-embed", withFrame && "ds-video-embed--framed", className),
         style: { aspectRatio },
         children: !playing ? /* @__PURE__ */ jsxRuntime.jsxs(
           "button",
@@ -6543,7 +6218,7 @@ var ExitIntentOverlay = React30.forwardRef(
         document.removeEventListener("mouseout", handleMouseOut);
       };
     }, [enabled, activationDelay, excludePaths, storageKey, suppressionDuration, show]);
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: clsx44__default.default("ds-exit-intent-overlay", className), ...props, children: /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open, onOpenChange: (isOpen) => {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: clsx21__default.default("ds-exit-intent-overlay", className), ...props, children: /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open, onOpenChange: (isOpen) => {
       if (!isOpen) handleDismiss();
     }, children: /* @__PURE__ */ jsxRuntime.jsx(DialogContent, { className: "ds-exit-intent-overlay__dialog", children }) }) });
   }
@@ -6562,7 +6237,7 @@ var BeforeAfterBlock = React30.forwardRef(
     const renderItems = (items, side) => items.map((item, i) => /* @__PURE__ */ jsxRuntime.jsxs(
       "li",
       {
-        className: clsx44__default.default(
+        className: clsx21__default.default(
           "ds-before-after__item",
           item.sentiment && `ds-before-after__item--${item.sentiment}`
         ),
@@ -6577,11 +6252,11 @@ var BeforeAfterBlock = React30.forwardRef(
       SectionShell,
       {
         ref,
-        className: clsx44__default.default("ds-before-after", className),
+        className: clsx21__default.default("ds-before-after", className),
         ...props,
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(SectionHeader, { eyebrow, title }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx44__default.default("ds-before-after__layout", `ds-before-after__layout--${variant}`), children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx21__default.default("ds-before-after__layout", `ds-before-after__layout--${variant}`), children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ds-before-after__column ds-before-after__column--before", children: [
               /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "ds-before-after__label", children: before.label }),
               /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "ds-before-after__list", children: renderItems(before.items, "before") }),
@@ -6617,7 +6292,7 @@ var CompetitorDiff = React30.forwardRef(
       SectionShell,
       {
         ref,
-        className: clsx44__default.default("ds-competitor-diff", className),
+        className: clsx21__default.default("ds-competitor-diff", className),
         ...props,
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(SectionHeader, { eyebrow, title, subtitle }),
@@ -6695,7 +6370,7 @@ var StakeholderTabs = React30.forwardRef(
       SectionShell,
       {
         ref,
-        className: clsx44__default.default("ds-stakeholder-tabs", className),
+        className: clsx21__default.default("ds-stakeholder-tabs", className),
         ...props,
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(SectionHeader, { eyebrow, title }),
@@ -6745,7 +6420,7 @@ var IntegrationShowcase = React30.forwardRef(
       SectionShell,
       {
         ref,
-        className: clsx44__default.default("ds-integration-showcase", className),
+        className: clsx21__default.default("ds-integration-showcase", className),
         ...props,
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(SectionHeader, { eyebrow, title, subtitle }),
@@ -6760,7 +6435,7 @@ var IntegrationShowcase = React30.forwardRef(
               ]
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx44__default.default("ds-integration-showcase__grid", `ds-integration-showcase__grid--${variant}`), children: filtered.map((integration, i) => {
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx21__default.default("ds-integration-showcase__grid", `ds-integration-showcase__grid--${variant}`), children: filtered.map((integration, i) => {
             const Card2 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ds-integration-showcase__card", children: [
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-integration-showcase__logo", children: integration.logo }),
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ds-integration-showcase__info", children: [
@@ -6794,11 +6469,11 @@ var SecurityBlock = React30.forwardRef(
       SectionShell,
       {
         ref,
-        className: clsx44__default.default("ds-security-block", className),
+        className: clsx21__default.default("ds-security-block", className),
         ...props,
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(SectionHeader, { eyebrow, title, subtitle }),
-          certifications && certifications.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx44__default.default("ds-security-block__certs", `ds-security-block__certs--${variant}`), children: certifications.map((cert, i) => {
+          certifications && certifications.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx21__default.default("ds-security-block__certs", `ds-security-block__certs--${variant}`), children: certifications.map((cert, i) => {
             const inner = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ds-security-block__cert", children: [
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-security-block__cert-icon", children: cert.icon }),
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ds-security-block__cert-info", children: [
@@ -6837,7 +6512,7 @@ var AuthorBio = React30.forwardRef(
       "div",
       {
         ref,
-        className: clsx44__default.default("ds-author-bio", `ds-author-bio--${variant}`, className),
+        className: clsx21__default.default("ds-author-bio", `ds-author-bio--${variant}`, className),
         ...props,
         children: [
           /* @__PURE__ */ jsxRuntime.jsxs(Avatar, { size: variant === "compact" ? "sm" : variant === "longform" ? "lg" : "md", className: "ds-author-bio__avatar", children: [
@@ -7459,7 +7134,7 @@ var TableOfContents = React30.forwardRef(
       "nav",
       {
         ref,
-        className: clsx44__default.default("ds-toc", `ds-toc--${position}`, className),
+        className: clsx21__default.default("ds-toc", `ds-toc--${position}`, className),
         "aria-label": finalLabel,
         ...props,
         children: [
@@ -7468,7 +7143,7 @@ var TableOfContents = React30.forwardRef(
             "button",
             {
               type: "button",
-              className: clsx44__default.default(
+              className: clsx21__default.default(
                 "ds-toc__link",
                 activeId === item.id && "ds-toc__link--active"
               ),
@@ -7497,7 +7172,7 @@ var RelatedContent = React30.forwardRef(
       SectionShell,
       {
         ref,
-        className: clsx44__default.default("ds-related-content", className),
+        className: clsx21__default.default("ds-related-content", className),
         background: "muted",
         ...props,
         children: [
@@ -7533,7 +7208,7 @@ var CaseStudySection = React30.forwardRef(
       SectionShell,
       {
         ref,
-        className: clsx44__default.default("ds-case-study-section", className),
+        className: clsx21__default.default("ds-case-study-section", className),
         ...props,
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(SectionHeader, { eyebrow, title, subtitle }),
@@ -7569,7 +7244,7 @@ var ManifestoBlock = React30.forwardRef(
       SectionShell,
       {
         ref,
-        className: clsx44__default.default("ds-manifesto", `ds-manifesto--${variant}`, className),
+        className: clsx21__default.default("ds-manifesto", `ds-manifesto--${variant}`, className),
         ...props,
         children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ds-manifesto__inner", children: [
           variant === "quote" && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ds-manifesto__quote-mark", "aria-hidden": "true", children: "\u201C" }),
@@ -7608,7 +7283,7 @@ var ComplianceGrid = React30.forwardRef(
       SectionShell,
       {
         ref,
-        className: clsx44__default.default("ds-compliance-grid", className),
+        className: clsx21__default.default("ds-compliance-grid", className),
         ...props,
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(SectionHeader, { eyebrow, title, subtitle }),
@@ -7616,7 +7291,7 @@ var ComplianceGrid = React30.forwardRef(
             const inner = /* @__PURE__ */ jsxRuntime.jsxs(
               "div",
               {
-                className: clsx44__default.default(
+                className: clsx21__default.default(
                   "ds-compliance-grid__item",
                   `ds-compliance-grid__item--${item.status}`
                 ),
@@ -7627,7 +7302,7 @@ var ComplianceGrid = React30.forwardRef(
                     /* @__PURE__ */ jsxRuntime.jsx(
                       Badge,
                       {
-                        className: clsx44__default.default(
+                        className: clsx21__default.default(
                           "ds-compliance-grid__status",
                           `ds-compliance-grid__status--${item.status}`
                         ),
@@ -7662,7 +7337,7 @@ var ArchitectureDiagram = React30.forwardRef(
       "div",
       {
         ref,
-        className: clsx44__default.default(
+        className: clsx21__default.default(
           "ds-architecture",
           `ds-architecture--${direction}`,
           className
@@ -7675,7 +7350,7 @@ var ArchitectureDiagram = React30.forwardRef(
             /* @__PURE__ */ jsxRuntime.jsx(
               "div",
               {
-                className: clsx44__default.default(
+                className: clsx21__default.default(
                   "ds-architecture__line",
                   connections.find(
                     (c) => c.from === nodes[i - 1]?.id && c.to === node.id
@@ -7693,7 +7368,7 @@ var ArchitectureDiagram = React30.forwardRef(
           /* @__PURE__ */ jsxRuntime.jsxs(
             "div",
             {
-              className: clsx44__default.default(
+              className: clsx21__default.default(
                 "ds-architecture__node",
                 `ds-architecture__node--${node.type}`
               ),
@@ -7744,7 +7419,7 @@ var SegmentSwitch = React30.forwardRef(
     }, [controlledSegment, source, utmParam, cookieName]);
     const content = resolvedSegment && segments[resolvedSegment] ? segments[resolvedSegment] : fallback;
     if (!content) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: clsx44__default.default(className), ...props, children: content });
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: clsx21__default.default(className), ...props, children: content });
   }
 );
 SegmentSwitch.displayName = "SegmentSwitch";
@@ -7807,7 +7482,7 @@ var IntentCTA = React30.forwardRef(
       "div",
       {
         ref,
-        className: clsx44__default.default("ds-intent-cta", className),
+        className: clsx21__default.default("ds-intent-cta", className),
         ...props,
         children: /* @__PURE__ */ jsxRuntime.jsx(
           Button,
@@ -7824,7 +7499,7 @@ var IntentCTA = React30.forwardRef(
 IntentCTA.displayName = "IntentCTA";
 var LongFormLayout = React30__default.default.forwardRef(
   ({ children, sidebar, className, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: clsx44__default.default("ds-longform-layout", className), ...props, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: clsx21__default.default("ds-longform-layout", className), ...props, children: [
       /* @__PURE__ */ jsxRuntime.jsx("article", { className: "ds-longform-layout__main", children }),
       sidebar && /* @__PURE__ */ jsxRuntime.jsx("aside", { className: "ds-longform-layout__sidebar", children: sidebar })
     ] });
@@ -7833,7 +7508,7 @@ var LongFormLayout = React30__default.default.forwardRef(
 LongFormLayout.displayName = "LongFormLayout";
 var InsightCallout = React30__default.default.forwardRef(
   ({ children, icon, title, className, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsxs("aside", { ref, className: clsx44__default.default("ds-insight-callout", className), ...props, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs("aside", { ref, className: clsx21__default.default("ds-insight-callout", className), ...props, children: [
       icon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-insight-callout__icon", children: icon }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ds-insight-callout__content", children: [
         title && /* @__PURE__ */ jsxRuntime.jsx("h5", { className: "ds-insight-callout__title", children: title }),
@@ -7845,7 +7520,7 @@ var InsightCallout = React30__default.default.forwardRef(
 InsightCallout.displayName = "InsightCallout";
 var DataHighlight = React30__default.default.forwardRef(
   ({ stat, label, children, className, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsxs("figure", { ref, className: clsx44__default.default("ds-data-highlight", className), ...props, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs("figure", { ref, className: clsx21__default.default("ds-data-highlight", className), ...props, children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ds-data-highlight__stat-group", children: [
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ds-data-highlight__stat", children: stat }),
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ds-data-highlight__label", children: label })
@@ -7903,7 +7578,7 @@ var ReadingProgress = React30__default.default.forwardRef(
       "div",
       {
         ref,
-        className: clsx44__default.default("ds-reading-progress", className),
+        className: clsx21__default.default("ds-reading-progress", className),
         ...props,
         children: /* @__PURE__ */ jsxRuntime.jsx(
           "div",
@@ -7925,7 +7600,7 @@ var VersionedUpgradeAlert = React30__default.default.forwardRef(
       "div",
       {
         ref,
-        className: clsx44__default.default("ds-versioned-alert", className),
+        className: clsx21__default.default("ds-versioned-alert", className),
         role: "alert",
         ...props,
         children: [
@@ -7974,7 +7649,7 @@ VersionedUpgradeAlert.displayName = "VersionedUpgradeAlert";
 var VersionedSeriesNavigator = React30__default.default.forwardRef(
   ({ seriesName, hubUrl, editions, className, ...props }, ref) => {
     const sortedEditions = [...editions].sort((a, b) => a.year - b.year);
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: clsx44__default.default("ds-versioned-navigator", className), ...props, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: clsx21__default.default("ds-versioned-navigator", className), ...props, children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ds-versioned-navigator__header", children: [
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ds-versioned-navigator__label", children: "Series" }),
         /* @__PURE__ */ jsxRuntime.jsxs(OutboundLink, { href: hubUrl, context: "versioned-navigator-hub", className: "ds-versioned-navigator__title", openInNewTab: false, children: [
@@ -7989,7 +7664,7 @@ var VersionedSeriesNavigator = React30__default.default.forwardRef(
           {
             href: edition.url,
             context: "versioned-navigator-edition",
-            className: clsx44__default.default(
+            className: clsx21__default.default(
               "ds-versioned-navigator__node",
               edition.isCurrent && "ds-versioned-navigator__node--active"
             ),
@@ -8018,7 +7693,7 @@ var EvolutionTimeline = React30.forwardRef(
       SectionShell,
       {
         ref,
-        className: clsx44__default.default("ds-evolution-timeline", className),
+        className: clsx21__default.default("ds-evolution-timeline", className),
         ...props,
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(SectionHeader, { eyebrow, title, subtitle }),
@@ -8027,7 +7702,7 @@ var EvolutionTimeline = React30.forwardRef(
             eras.map((era, i) => /* @__PURE__ */ jsxRuntime.jsxs(
               "div",
               {
-                className: clsx44__default.default(
+                className: clsx21__default.default(
                   "ds-evolution-timeline__era",
                   `ds-evolution-timeline__era--${era.sentiment}`,
                   era.current && "ds-evolution-timeline__era--current"
@@ -8073,7 +7748,7 @@ var EcosystemDiagram = React30.forwardRef(
       SectionShell,
       {
         ref,
-        className: clsx44__default.default("ds-ecosystem", `ds-ecosystem--${variant}`, className),
+        className: clsx21__default.default("ds-ecosystem", `ds-ecosystem--${variant}`, className),
         ...props,
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(SectionHeader, { eyebrow, title, subtitle }),
@@ -8127,7 +7802,7 @@ var ValueAnchor = React30.forwardRef(
       SectionShell,
       {
         ref,
-        className: clsx44__default.default("ds-value-anchor", className),
+        className: clsx21__default.default("ds-value-anchor", className),
         ...props,
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(SectionHeader, { eyebrow, title, subtitle }),
@@ -8208,7 +7883,7 @@ var EnterpriseSignaling = React30.forwardRef(
         "div",
         {
           ref,
-          className: clsx44__default.default("ds-enterprise-signaling", "ds-enterprise-signaling--strip", className),
+          className: clsx21__default.default("ds-enterprise-signaling", "ds-enterprise-signaling--strip", className),
           ...props,
           children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-enterprise-signaling__strip-inner", children: categories.flatMap((cat) => cat.items.filter((i) => i.status === "active")).map((item, i) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ds-enterprise-signaling__strip-item", children: item.name }, i)) })
         }
@@ -8218,7 +7893,7 @@ var EnterpriseSignaling = React30.forwardRef(
       SectionShell,
       {
         ref,
-        className: clsx44__default.default("ds-enterprise-signaling", `ds-enterprise-signaling--${variant}`, className),
+        className: clsx21__default.default("ds-enterprise-signaling", `ds-enterprise-signaling--${variant}`, className),
         ...props,
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(SectionHeader, { eyebrow, title, subtitle }),
@@ -8231,7 +7906,7 @@ var EnterpriseSignaling = React30.forwardRef(
               const inner = /* @__PURE__ */ jsxRuntime.jsxs(
                 "div",
                 {
-                  className: clsx44__default.default(
+                  className: clsx21__default.default(
                     "ds-enterprise-signaling__item",
                     `ds-enterprise-signaling__item--${item.status}`
                   ),
@@ -8240,7 +7915,7 @@ var EnterpriseSignaling = React30.forwardRef(
                     /* @__PURE__ */ jsxRuntime.jsx(
                       Badge,
                       {
-                        className: clsx44__default.default("ds-enterprise-signaling__item-status", `ds-enterprise-signaling__item-status--${item.status}`),
+                        className: clsx21__default.default("ds-enterprise-signaling__item-status", `ds-enterprise-signaling__item-status--${item.status}`),
                         variant: "outline",
                         children: STATUS_LABELS2[item.status]
                       }
@@ -8319,7 +7994,7 @@ var IntelligenceBlock = React30.forwardRef(
       SectionShell,
       {
         ref,
-        className: clsx44__default.default("ds-intelligence", `ds-intelligence--${variant}`, className),
+        className: clsx21__default.default("ds-intelligence", `ds-intelligence--${variant}`, className),
         ...props,
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(SectionHeader, { eyebrow, title, subtitle }),
@@ -8374,7 +8049,7 @@ var PartnerValueProp = React30.forwardRef(
       SectionShell,
       {
         ref,
-        className: clsx44__default.default("ds-partner-vp", className),
+        className: clsx21__default.default("ds-partner-vp", className),
         ...props,
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(SectionHeader, { eyebrow, title, subtitle }),
@@ -8456,7 +8131,7 @@ var PartnerValueProp = React30.forwardRef(
 PartnerValueProp.displayName = "PartnerValueProp";
 var ComparisonTable = React30__default.default.forwardRef(
   ({ columns, rows, caption, className, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: clsx44__default.default("ds-comparison-table", className), ...props, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-comparison-table__scroll", children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "ds-comparison-table__table", role: "table", children: [
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: clsx21__default.default("ds-comparison-table", className), ...props, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-comparison-table__scroll", children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "ds-comparison-table__table", role: "table", children: [
       caption && /* @__PURE__ */ jsxRuntime.jsx("caption", { className: "ds-comparison-table__caption", children: caption }),
       /* @__PURE__ */ jsxRuntime.jsx("thead", { className: "ds-comparison-table__head", children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
         /* @__PURE__ */ jsxRuntime.jsx("th", { className: "ds-comparison-table__corner", scope: "col", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ds-visually-hidden", children: "Feature" }) }),
@@ -8464,7 +8139,7 @@ var ComparisonTable = React30__default.default.forwardRef(
           "th",
           {
             scope: "col",
-            className: clsx44__default.default(
+            className: clsx21__default.default(
               "ds-comparison-table__col-header",
               col.highlighted && "ds-comparison-table__col-header--highlighted"
             ),
@@ -8489,7 +8164,7 @@ var ComparisonTable = React30__default.default.forwardRef(
           row.values.map((val, colIdx) => /* @__PURE__ */ jsxRuntime.jsx(
             "td",
             {
-              className: clsx44__default.default(
+              className: clsx21__default.default(
                 "ds-comparison-table__cell",
                 columns[colIdx]?.highlighted && "ds-comparison-table__cell--highlighted"
               ),
@@ -8517,7 +8192,7 @@ var GuaranteeHighlight = React30__default.default.forwardRef(
       "div",
       {
         ref,
-        className: clsx44__default.default(
+        className: clsx21__default.default(
           "ds-guarantee",
           `ds-guarantee--${variant}`,
           className
@@ -8546,7 +8221,7 @@ var ROICalculator = React30__default.default.forwardRef(
     className,
     ...props
   }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: clsx44__default.default("ds-roi-calculator", className), ...props, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: clsx21__default.default("ds-roi-calculator", className), ...props, children: [
       (eyebrow || title) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ds-roi-calculator__header", children: [
         eyebrow && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ds-roi-calculator__eyebrow", children: eyebrow }),
         title && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "ds-roi-calculator__title", children: title })
@@ -8554,7 +8229,7 @@ var ROICalculator = React30__default.default.forwardRef(
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-roi-calculator__grid", children: items.map((item, idx) => /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {
-          className: clsx44__default.default(
+          className: clsx21__default.default(
             "ds-roi-calculator__item",
             item.isRecommended && "ds-roi-calculator__item--recommended"
           ),
@@ -8588,7 +8263,7 @@ var ICPFilter = React30__default.default.forwardRef(
       "div",
       {
         ref,
-        className: clsx44__default.default(
+        className: clsx21__default.default(
           "ds-icp-filter",
           `ds-icp-filter--${variant}`,
           className
@@ -8648,7 +8323,7 @@ var ObjectionFAQ = React30__default.default.forwardRef(
       },
       [allowMultiple]
     );
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: clsx44__default.default("ds-objection-faq", className), ...props, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: clsx21__default.default("ds-objection-faq", className), ...props, children: [
       (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ds-objection-faq__header", children: [
         title && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "ds-objection-faq__title", children: title }),
         subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "ds-objection-faq__subtitle", children: subtitle })
@@ -8658,7 +8333,7 @@ var ObjectionFAQ = React30__default.default.forwardRef(
         return /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
-            className: clsx44__default.default(
+            className: clsx21__default.default(
               "ds-objection-faq__item",
               isOpen && "ds-objection-faq__item--open"
             ),
@@ -8719,7 +8394,7 @@ var StatusBadge = React30__default.default.forwardRef(
       "span",
       {
         ref,
-        className: clsx44__default.default(
+        className: clsx21__default.default(
           "ds-status-badge",
           `ds-status-badge--${variant}`,
           `ds-status-badge--${size}`,
@@ -8816,7 +8491,7 @@ var Alert = React30__default.default.forwardRef(
       {
         ref,
         role: "alert",
-        className: clsx44__default.default("ds-alert", `ds-alert--${variant}`, className),
+        className: clsx21__default.default("ds-alert", `ds-alert--${variant}`, className),
         ...props,
         children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-alert__icon", "aria-hidden": "true", children: renderedIcon }),
@@ -8846,7 +8521,7 @@ var ToastItem = ({
   onDismiss,
   dismissLabel = "Close"
 }) => {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx44__default.default("ds-toast-root", `ds-toast--${variant}`), "data-state": "open", role: "alert", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx21__default.default("ds-toast-root", `ds-toast--${variant}`), "data-state": "open", role: "alert", children: [
     title && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-toast-title", children: title }),
     description && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-toast-description", children: description }),
     action && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-toast-action", children: action }),
@@ -8921,7 +8596,7 @@ var DropdownMenuTrigger = React30__default.default.forwardRef(({ className, ...p
     menu.Menu.Trigger,
     {
       ref,
-      className: clsx44__default.default("ds-dropdown-menu__trigger", className),
+      className: clsx21__default.default("ds-dropdown-menu__trigger", className),
       ...props
     }
   );
@@ -8940,7 +8615,7 @@ var DropdownMenuContent = React30__default.default.forwardRef(
           menu.Menu.Popup,
           {
             ref,
-            className: clsx44__default.default("ds-dropdown-menu__content", className),
+            className: clsx21__default.default("ds-dropdown-menu__content", className),
             ...props
           }
         )
@@ -8951,21 +8626,21 @@ var DropdownMenuContent = React30__default.default.forwardRef(
 DropdownMenuContent.displayName = "DropdownMenuContent";
 var DropdownMenuItem = React30__default.default.forwardRef(
   ({ className, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(menu.Menu.Item, { ref, className: clsx44__default.default("ds-dropdown-menu__item", className), ...props });
+    return /* @__PURE__ */ jsxRuntime.jsx(menu.Menu.Item, { ref, className: clsx21__default.default("ds-dropdown-menu__item", className), ...props });
   }
 );
 DropdownMenuItem.displayName = "DropdownMenuItem";
 var DropdownMenuSeparator = React30__default.default.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: clsx44__default.default("ds-dropdown-menu__separator", className), ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: clsx21__default.default("ds-dropdown-menu__separator", className), ...props });
 });
 DropdownMenuSeparator.displayName = "DropdownMenuSeparator";
 var DropdownMenuLabel = React30__default.default.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: clsx44__default.default("ds-dropdown-menu__label", className), ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: clsx21__default.default("ds-dropdown-menu__label", className), ...props });
 });
 DropdownMenuLabel.displayName = "DropdownMenuLabel";
 var EmptyState = React30__default.default.forwardRef(
   ({ icon, title, description, action, className, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: clsx44__default.default("ds-empty-state", className), ...props, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: clsx21__default.default("ds-empty-state", className), ...props, children: [
       icon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-empty-state__icon", children: icon }),
       /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "ds-empty-state__title", children: title }),
       description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "ds-empty-state__description", children: description }),
@@ -9122,7 +8797,7 @@ var Login = ({
     e.preventDefault();
     onSubmit?.({ email, password, rememberMe });
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx44__default.default("ds-login", className), style, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx21__default.default("ds-login", className), style, children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ds-login__background", children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-login__accent ds-login__accent--1", "aria-hidden": "true" }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-login__accent ds-login__accent--2", "aria-hidden": "true" })
@@ -9354,7 +9029,7 @@ var ChangeEmail = ({
     e.preventDefault();
     onSubmit?.({ newEmail, currentPassword });
   };
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx44__default.default("ds-change-email", className), style, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ds-change-email__container", children: [
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx21__default.default("ds-change-email", className), style, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ds-change-email__container", children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-change-email__accent ds-change-email__accent--1", "aria-hidden": "true" }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-change-email__accent ds-change-email__accent--2", "aria-hidden": "true" }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ds-change-email__card", children: [
@@ -9584,7 +9259,7 @@ var Signup = ({
   };
   const isFormValid = name && email && password.length >= 8 && acceptedTerms;
   if (isSuccess) {
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx44__default.default("ds-signup", className), style, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx21__default.default("ds-signup", className), style, children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ds-signup__background", children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-signup__accent ds-signup__accent--1", "aria-hidden": "true" }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-signup__accent ds-signup__accent--2", "aria-hidden": "true" })
@@ -9609,7 +9284,7 @@ var Signup = ({
       ] })
     ] });
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx44__default.default("ds-signup", className), style, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx21__default.default("ds-signup", className), style, children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ds-signup__background", children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-signup__accent ds-signup__accent--1", "aria-hidden": "true" }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-signup__accent ds-signup__accent--2", "aria-hidden": "true" })
@@ -9731,7 +9406,7 @@ var Signup = ({
             disabled: isLoading,
             className: "ds-signup__phone-container ds-textfield__input",
             id: "phone-input"
-          }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx44__default.default("ds-signup__phone-container", "ds-textfield__input"), children: [
+          }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx21__default.default("ds-signup__phone-container", "ds-textfield__input"), children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ds-signup__flag-select-wrapper", children: [
               /* @__PURE__ */ jsxRuntime.jsx(
                 "select",
@@ -9829,7 +9504,7 @@ var Signup = ({
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-signup__strength-bar", children: [0, 1, 2, 3].map((i) => /* @__PURE__ */ jsxRuntime.jsx(
               "div",
               {
-                className: clsx44__default.default(
+                className: clsx21__default.default(
                   "ds-signup__strength-segment",
                   i < passwordStrength.score && "ds-signup__strength-segment--active"
                 ),
@@ -10005,7 +9680,7 @@ var ForgotPassword = ({
     ] }) })
   ] }) }) });
   if (step === "email") {
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx44__default.default("ds-forgot", className), children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx21__default.default("ds-forgot", className), children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-forgot__accent ds-forgot__accent--1", "aria-hidden": "true" }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-forgot__accent ds-forgot__accent--2", "aria-hidden": "true" }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ds-forgot__card", children: [
@@ -10095,7 +9770,7 @@ var ForgotPassword = ({
     ] });
   }
   if (step === "sent") {
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx44__default.default("ds-forgot", className), children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx21__default.default("ds-forgot", className), children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-forgot__accent ds-forgot__accent--1", "aria-hidden": "true" }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-forgot__accent ds-forgot__accent--2", "aria-hidden": "true" }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ds-forgot__card ds-forgot__card--centered", children: [
@@ -10163,7 +9838,7 @@ var ForgotPassword = ({
   if (step === "reset") {
     const passwordsMatch = password === confirmPassword;
     const isValid = password.length >= 8 && passwordsMatch;
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx44__default.default("ds-forgot", className), children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx21__default.default("ds-forgot", className), children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-forgot__accent ds-forgot__accent--1", "aria-hidden": "true" }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-forgot__accent ds-forgot__accent--2", "aria-hidden": "true" }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ds-forgot__card", children: [
@@ -10310,7 +9985,7 @@ var ForgotPassword = ({
       ] })
     ] });
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx44__default.default("ds-forgot", className), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx21__default.default("ds-forgot", className), children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-forgot__accent ds-forgot__accent--1", "aria-hidden": "true" }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-forgot__accent ds-forgot__accent--2", "aria-hidden": "true" }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ds-forgot__card ds-forgot__card--centered", children: [
@@ -10817,7 +10492,7 @@ var LoadingStateDisplay = ({ progress }) => {
       return /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {
-          className: clsx44__default.default("ds-lead-loading__stage", `ds-lead-loading__stage--${status}`),
+          className: clsx21__default.default("ds-lead-loading__stage", `ds-lead-loading__stage--${status}`),
           style: { "--stage-index": index },
           children: [
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-lead-loading__stage-icon", children: status === "completed" ? /* @__PURE__ */ jsxRuntime.jsx(IconCheck, { size: 16 }) : /* @__PURE__ */ jsxRuntime.jsx(Icon, { size: 16 }) }),
@@ -10845,7 +10520,7 @@ var IdentityHeader = ({ data, compact }) => {
   const emailStatus = data.contact?.emailStatus;
   const linkedinVerified = data.contact?.linkedinVerified;
   const confidenceScore = data.dataConfidence?.score;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx44__default.default("ds-lead-identity", compact && "ds-lead-identity--compact"), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx21__default.default("ds-lead-identity", compact && "ds-lead-identity--compact"), children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ds-lead-identity__avatar-wrapper", children: [
       /* @__PURE__ */ jsxRuntime.jsx("img", { src: avatarUrl, alt: data.name, className: "ds-lead-identity__avatar" }),
       confidenceScore && confidenceScore >= 80 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-lead-identity__verified-badge", title: "High confidence data", children: /* @__PURE__ */ jsxRuntime.jsx(IconShieldCheck, { size: 14 }) })
@@ -10900,7 +10575,7 @@ var IdentityHeader = ({ data, compact }) => {
             href: `mailto:${data.contact.email}`,
             context: "identity-email-contact",
             openInNewTab: false,
-            className: clsx44__default.default(
+            className: clsx21__default.default(
               "ds-lead-identity__contact",
               emailStatus && `ds-lead-identity__contact--${emailStatus}`
             ),
@@ -10991,7 +10666,7 @@ var IntelligenceSummary = ({
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-lead-intelligence__tips", children: data.engagementTips.map((tip, index) => /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {
-          className: clsx44__default.default(
+          className: clsx21__default.default(
             "ds-lead-intelligence__tip",
             `ds-lead-intelligence__tip--${tip.type}`
           ),
@@ -11069,7 +10744,7 @@ var MBTISpectrum = ({
       return /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {
-          className: clsx44__default.default(
+          className: clsx21__default.default(
             "ds-mbti__row",
             `ds-mbti__row--${score.color}`,
             isHovered && "ds-mbti__row--hovered"
@@ -11080,7 +10755,7 @@ var MBTISpectrum = ({
             /* @__PURE__ */ jsxRuntime.jsxs(
               "div",
               {
-                className: clsx44__default.default(
+                className: clsx21__default.default(
                   "ds-mbti__label",
                   "ds-mbti__label--left",
                   dominantSide === "left" && "ds-mbti__label--active"
@@ -11092,7 +10767,7 @@ var MBTISpectrum = ({
               }
             ),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ds-mbti__track-container", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx44__default.default("ds-mbti__track", `ds-mbti__track--${score.color}`), children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx21__default.default("ds-mbti__track", `ds-mbti__track--${score.color}`), children: [
                 /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-mbti__track-center" }),
                 /* @__PURE__ */ jsxRuntime.jsx(
                   "div",
@@ -11111,7 +10786,7 @@ var MBTISpectrum = ({
             /* @__PURE__ */ jsxRuntime.jsxs(
               "div",
               {
-                className: clsx44__default.default(
+                className: clsx21__default.default(
                   "ds-mbti__label",
                   "ds-mbti__label--right",
                   dominantSide === "right" && "ds-mbti__label--active"
@@ -11220,7 +10895,7 @@ var BehavioralHighlights = ({
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-behavioral__risk-track", children: /* @__PURE__ */ jsxRuntime.jsx(
               "div",
               {
-                className: clsx44__default.default(
+                className: clsx21__default.default(
                   "ds-behavioral__risk-fill",
                   signals.riskTolerance < 33 && "ds-behavioral__risk-fill--low",
                   signals.riskTolerance >= 33 && signals.riskTolerance < 66 && "ds-behavioral__risk-fill--medium",
@@ -11249,7 +10924,7 @@ var DeepDiveSection = ({
   if (!hasContent) {
     return null;
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx44__default.default("ds-deep-dive", isExpanded && "ds-deep-dive--expanded"), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx21__default.default("ds-deep-dive", isExpanded && "ds-deep-dive--expanded"), children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
       {
@@ -11312,7 +10987,7 @@ var DeepDiveSection = ({
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-deep-dive__timeline", children: data.experience.map((exp, idx) => /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
-            className: clsx44__default.default(
+            className: clsx21__default.default(
               "ds-deep-dive__timeline-item",
               exp.current && "ds-deep-dive__timeline-item--current"
             ),
@@ -11351,16 +11026,16 @@ var DeepDiveSection = ({
 var LeadProfileView = React30__default.default.forwardRef(
   ({ state, data, analysisProgress, onRefresh, className }, ref) => {
     if (state === "empty") {
-      return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: clsx44__default.default("ds-lead-profile", "ds-lead-profile--empty", className), children: /* @__PURE__ */ jsxRuntime.jsx(EmptyStateDisplay, { onRefresh }) });
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: clsx21__default.default("ds-lead-profile", "ds-lead-profile--empty", className), children: /* @__PURE__ */ jsxRuntime.jsx(EmptyStateDisplay, { onRefresh }) });
     }
     if (state === "loading") {
-      return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: clsx44__default.default("ds-lead-profile", "ds-lead-profile--loading", className), children: /* @__PURE__ */ jsxRuntime.jsx(LoadingStateDisplay, { progress: analysisProgress }) });
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: clsx21__default.default("ds-lead-profile", "ds-lead-profile--loading", className), children: /* @__PURE__ */ jsxRuntime.jsx(LoadingStateDisplay, { progress: analysisProgress }) });
     }
     if (!data) return null;
     const isPartial = state === "partial";
     const hasMBTI = !isPartial && data.mbtiScores?.length;
     const hasBehavioral = !isPartial && data.behavioralSignals;
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: clsx44__default.default("ds-lead-profile", `ds-lead-profile--${state}`, className), children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: clsx21__default.default("ds-lead-profile", `ds-lead-profile--${state}`, className), children: [
       /* @__PURE__ */ jsxRuntime.jsx("section", { className: "ds-lead-profile__zone ds-lead-profile__zone--identity", children: /* @__PURE__ */ jsxRuntime.jsx(IdentityHeader, { data, compact: isPartial }) }),
       /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "ds-lead-profile__zone ds-lead-profile__zone--intelligence", children: [
         /* @__PURE__ */ jsxRuntime.jsx(IntelligenceSummary, { data, isLocked: isPartial }),
@@ -11614,14 +11289,14 @@ var AppearancePanel = React30__default.default.forwardRef(
       { value: "playful", label: l?.radiusPlayful ?? "Playful", description: l?.radiusPlayfulDescription ?? "Rounded corners" },
       { value: "sharp", label: l?.radiusSharp ?? "Sharp", description: l?.radiusSharpDescription ?? "Technical feel" }
     ];
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: clsx44__default.default("ds-appearance-panel", className), children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: clsx21__default.default("ds-appearance-panel", className), children: [
       /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "ds-appearance-panel__title", children: l?.title ?? "Appearance Settings" }),
       /* @__PURE__ */ jsxRuntime.jsxs("fieldset", { className: "ds-appearance-panel__section", children: [
         /* @__PURE__ */ jsxRuntime.jsx("legend", { className: "ds-appearance-panel__legend", children: l?.themeHeading ?? "Theme" }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-appearance-panel__options", children: themeOptions.map((option) => /* @__PURE__ */ jsxRuntime.jsxs(
           "label",
           {
-            className: clsx44__default.default(
+            className: clsx21__default.default(
               "ds-appearance-panel__option",
               theme === option.value && "ds-appearance-panel__option--active"
             ),
@@ -11648,7 +11323,7 @@ var AppearancePanel = React30__default.default.forwardRef(
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-appearance-panel__options", children: brandOptions.map((option) => /* @__PURE__ */ jsxRuntime.jsxs(
           "label",
           {
-            className: clsx44__default.default(
+            className: clsx21__default.default(
               "ds-appearance-panel__option",
               brand === option.value && "ds-appearance-panel__option--active"
             ),
@@ -11694,7 +11369,7 @@ var AppearancePanel = React30__default.default.forwardRef(
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-appearance-panel__options ds-appearance-panel__options--row", children: densityOptions.map((option) => /* @__PURE__ */ jsxRuntime.jsxs(
           "label",
           {
-            className: clsx44__default.default(
+            className: clsx21__default.default(
               "ds-appearance-panel__option",
               "ds-appearance-panel__option--toggle",
               density === option.value && "ds-appearance-panel__option--active"
@@ -11725,7 +11400,7 @@ var AppearancePanel = React30__default.default.forwardRef(
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-appearance-panel__options ds-appearance-panel__options--row", children: radiusOptions.map((option) => /* @__PURE__ */ jsxRuntime.jsxs(
           "label",
           {
-            className: clsx44__default.default(
+            className: clsx21__default.default(
               "ds-appearance-panel__option",
               "ds-appearance-panel__option--toggle",
               radius === option.value && "ds-appearance-panel__option--active"
@@ -11756,7 +11431,7 @@ var AppearancePanel = React30__default.default.forwardRef(
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-appearance-panel__options", children: navOptions.map((option) => /* @__PURE__ */ jsxRuntime.jsxs(
           "label",
           {
-            className: clsx44__default.default(
+            className: clsx21__default.default(
               "ds-appearance-panel__option",
               navPlacement === option.value && "ds-appearance-panel__option--active"
             ),
@@ -11788,12 +11463,12 @@ var ThemeSelector = ({ className, style }) => {
   const handleThemeChange = (newTheme) => {
     setTheme(newTheme);
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx44__default.default("ds-theme-selector", className), style, role: "group", "aria-label": "Theme Selector", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx21__default.default("ds-theme-selector", className), style, role: "group", "aria-label": "Theme Selector", children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
       {
         type: "button",
-        className: clsx44__default.default("ds-theme-selector__btn", { "ds-theme-selector__btn--active": theme === "light" }),
+        className: clsx21__default.default("ds-theme-selector__btn", { "ds-theme-selector__btn--active": theme === "light" }),
         onClick: () => handleThemeChange("light"),
         "aria-pressed": theme === "light",
         children: [
@@ -11806,7 +11481,7 @@ var ThemeSelector = ({ className, style }) => {
       "button",
       {
         type: "button",
-        className: clsx44__default.default("ds-theme-selector__btn", { "ds-theme-selector__btn--active": theme === "light-contrast" }),
+        className: clsx21__default.default("ds-theme-selector__btn", { "ds-theme-selector__btn--active": theme === "light-contrast" }),
         onClick: () => handleThemeChange("light-contrast"),
         "aria-pressed": theme === "light-contrast",
         children: [
@@ -11819,7 +11494,7 @@ var ThemeSelector = ({ className, style }) => {
       "button",
       {
         type: "button",
-        className: clsx44__default.default("ds-theme-selector__btn", { "ds-theme-selector__btn--active": theme === "dark" }),
+        className: clsx21__default.default("ds-theme-selector__btn", { "ds-theme-selector__btn--active": theme === "dark" }),
         onClick: () => handleThemeChange("dark"),
         "aria-pressed": theme === "dark",
         children: [
@@ -11832,7 +11507,7 @@ var ThemeSelector = ({ className, style }) => {
       "button",
       {
         type: "button",
-        className: clsx44__default.default("ds-theme-selector__btn", { "ds-theme-selector__btn--active": theme === "dark-contrast" }),
+        className: clsx21__default.default("ds-theme-selector__btn", { "ds-theme-selector__btn--active": theme === "dark-contrast" }),
         onClick: () => handleThemeChange("dark-contrast"),
         "aria-pressed": theme === "dark-contrast",
         children: [
@@ -11855,7 +11530,7 @@ var ColorPicker = React30__default.default.forwardRef(
       "div",
       {
         ref,
-        className: clsx44__default.default("ds-color-picker", className),
+        className: clsx21__default.default("ds-color-picker", className),
         style,
         role: "group",
         "aria-label": "Brand Color",
@@ -11864,7 +11539,7 @@ var ColorPicker = React30__default.default.forwardRef(
             "button",
             {
               type: "button",
-              className: clsx44__default.default("ds-color-picker__swatch", {
+              className: clsx21__default.default("ds-color-picker__swatch", {
                 "ds-color-picker__swatch--active": brand === value
               }),
               onClick: () => setBrand(value),
@@ -11884,7 +11559,7 @@ var ColorPicker = React30__default.default.forwardRef(
           /* @__PURE__ */ jsxRuntime.jsxs(
             "label",
             {
-              className: clsx44__default.default("ds-color-picker__swatch", "ds-color-picker__swatch--custom", {
+              className: clsx21__default.default("ds-color-picker__swatch", "ds-color-picker__swatch--custom", {
                 "ds-color-picker__swatch--active": brand === "custom"
               }),
               title: `Custom: ${customColor}`,
@@ -12092,7 +11767,7 @@ var MotionText = ({
       }
     }
   };
-  const itemVariants2 = {
+  const itemVariants = {
     hidden: { opacity: 0, y: 10 },
     visible: {
       opacity: 1,
@@ -12120,7 +11795,7 @@ var MotionText = ({
         return /* @__PURE__ */ jsxRuntime.jsxs(
           framerMotion.motion.span,
           {
-            variants: itemVariants2,
+            variants: itemVariants,
             style: {
               color: isHighlighted ? "var(--brand-pink)" : "inherit",
               fontWeight: isHighlighted ? 600 : "inherit"
@@ -12211,7 +11886,7 @@ var steps = [
   }
 ];
 var RevenueAutomationLoop = ({ className }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx44__default.default("ds-revenue-loop", className), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ds-revenue-loop__circle", children: [
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx21__default.default("ds-revenue-loop", className), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ds-revenue-loop__circle", children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
       "svg",
       {
@@ -12735,7 +12410,7 @@ var FunnelScalingSender = ({
     "div",
     {
       ref: containerRef,
-      className: clsx44__default.default("ds-funnel-scaling", className),
+      className: clsx21__default.default("ds-funnel-scaling", className),
       role: "img",
       "aria-label": "Animated illustration: SalesMind scaling funnel from the sender perspective \u2014 showing how validated outreach becomes an automated pipeline machine",
       children: [
@@ -12828,7 +12503,7 @@ var FunnelScalingSender = ({
                   /* @__PURE__ */ jsxRuntime.jsxs(
                     framerMotion.motion.div,
                     {
-                      className: clsx44__default.default(
+                      className: clsx21__default.default(
                         "ds-funnel-scaling__flow-node",
                         showFunnel && "ds-funnel-scaling__flow-node--active"
                       ),
@@ -12984,7 +12659,7 @@ var FunnelScalingSender = ({
                   return /* @__PURE__ */ jsxRuntime.jsxs(
                     framerMotion.motion.div,
                     {
-                      className: clsx44__default.default(
+                      className: clsx21__default.default(
                         "ds-funnel-scaling__funnel-stage",
                         isHighlight && showMapping && "ds-funnel-scaling__funnel-stage--highlight",
                         isDim && "ds-funnel-scaling__funnel-stage--dim"
@@ -14101,7 +13776,7 @@ var ReportShell = React30__default.default.forwardRef(
       "div",
       {
         ref,
-        className: clsx44__default.default("ds-report-shell", className),
+        className: clsx21__default.default("ds-report-shell", className),
         "data-mode": mode,
         "data-brand": brand,
         ...props,
@@ -14127,7 +13802,7 @@ var ExecutiveThesis = React30__default.default.forwardRef(
       "section",
       {
         ref,
-        className: clsx44__default.default("ds-executive-thesis", className),
+        className: clsx21__default.default("ds-executive-thesis", className),
         "aria-labelledby": "executive-thesis-title",
         ...props,
         children: [
@@ -14144,7 +13819,7 @@ var ExecutiveThesis = React30__default.default.forwardRef(
             /* @__PURE__ */ jsxRuntime.jsxs(
               "span",
               {
-                className: clsx44__default.default(
+                className: clsx21__default.default(
                   "ds-executive-thesis__metric-value",
                   metric.trend && `ds-executive-thesis__metric-value--${metric.trend}`
                 ),
@@ -14177,7 +13852,7 @@ var InsightBlock = React30__default.default.forwardRef(
       "section",
       {
         ref,
-        className: clsx44__default.default("ds-insight-block", getConfidenceClass(), className),
+        className: clsx21__default.default("ds-insight-block", getConfidenceClass(), className),
         "data-insight-type": type,
         "aria-labelledby": `insight-${type}-title`,
         ...props,
@@ -14223,7 +13898,7 @@ var EvidenceGroup = React30__default.default.forwardRef(
       "div",
       {
         ref,
-        className: clsx44__default.default(
+        className: clsx21__default.default(
           "ds-evidence-group",
           `ds-evidence-group--${layout}`,
           layout === "grid" && `ds-evidence-group--cols-${columns}`,
@@ -14249,7 +13924,7 @@ var ConfidenceIndicator = React30__default.default.forwardRef(
       "div",
       {
         ref,
-        className: clsx44__default.default(
+        className: clsx21__default.default(
           "ds-confidence-indicator",
           `ds-confidence-indicator--${size}`,
           `ds-confidence-indicator--${threshold.level}`,
@@ -14284,7 +13959,7 @@ var DataCoverageBadge = React30__default.default.forwardRef(
       "div",
       {
         ref,
-        className: clsx44__default.default(
+        className: clsx21__default.default(
           "ds-data-coverage-badge",
           `ds-data-coverage-badge--${size}`,
           !isSufficient && "ds-data-coverage-badge--insufficient",
@@ -14471,7 +14146,7 @@ var DataStateIndicator = React30__default.default.forwardRef(
       "div",
       {
         ref,
-        className: clsx44__default.default(
+        className: clsx21__default.default(
           "ds-data-state-indicator",
           `ds-data-state-indicator--${variant}`,
           `ds-data-state-indicator--${state.toLowerCase().replace(/_/g, "-")}`,
@@ -14527,7 +14202,7 @@ var MethodologyNote = React30__default.default.forwardRef(
       "aside",
       {
         ref,
-        className: clsx44__default.default("ds-methodology-note", className),
+        className: clsx21__default.default("ds-methodology-note", className),
         "aria-label": titleText,
         ...props,
         children: [
@@ -14648,7 +14323,7 @@ var CaveatBlock = React30__default.default.forwardRef(
       "aside",
       {
         ref,
-        className: clsx44__default.default("ds-caveat-block", `ds-caveat-block--${severity}`, className),
+        className: clsx21__default.default("ds-caveat-block", `ds-caveat-block--${severity}`, className),
         role: "note",
         "aria-label": title,
         ...props,
@@ -14711,7 +14386,7 @@ var KeyMetric = React30__default.default.forwardRef(
       Component,
       {
         ref,
-        className: clsx44__default.default(
+        className: clsx21__default.default(
           "ds-key-metric",
           `ds-key-metric--${size}`,
           loading && "ds-key-metric--loading",
@@ -14739,7 +14414,7 @@ var KeyMetric = React30__default.default.forwardRef(
             trend && /* @__PURE__ */ jsxRuntime.jsxs(
               "span",
               {
-                className: clsx44__default.default("ds-key-metric__trend", `ds-key-metric__trend--${trend.direction}`),
+                className: clsx21__default.default("ds-key-metric__trend", `ds-key-metric__trend--${trend.direction}`),
                 children: [
                   /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ds-key-metric__trend-icon", children: getTrendIcon(trend.direction) }),
                   /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "ds-key-metric__trend-value", children: [
@@ -14829,7 +14504,7 @@ var TrendIndicator = React30__default.default.forwardRef(
       "span",
       {
         ref,
-        className: clsx44__default.default(
+        className: clsx21__default.default(
           "ds-trend-indicator",
           `ds-trend-indicator--${size}`,
           `ds-trend-indicator--${direction}`,
@@ -14898,7 +14573,7 @@ function ChartContainer({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: clsx44__default.default(
+      className: clsx21__default.default(
         "ds-chart-container",
         loading && "ds-chart-container--loading",
         !isRenderable && "ds-chart-container--invalid",
@@ -15205,7 +14880,7 @@ function FunnelChart({
     });
   }, [stages, maxValue]);
   if (!isValid) {
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx44__default.default("ds-funnel-chart", "ds-funnel-chart--invalid", className), children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx21__default.default("ds-funnel-chart", "ds-funnel-chart--invalid", className), children: [
       title && /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "ds-funnel-chart__title", children: title }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-funnel-chart__empty", children: /* @__PURE__ */ jsxRuntime.jsx(
         DataStateIndicator,
@@ -15222,7 +14897,7 @@ function FunnelChart({
     ] });
   }
   const totalConversion = stages.length > 1 ? (stages[stages.length - 1].value / stages[0].value * 100).toFixed(1) : "100";
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx44__default.default("ds-funnel-chart", className), style: { minHeight: height }, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx21__default.default("ds-funnel-chart", className), style: { minHeight: height }, children: [
     (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "ds-funnel-chart__header", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
         title && /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "ds-funnel-chart__title", children: title }),
@@ -15313,7 +14988,7 @@ function HeatmapChart({
     return ratio > 0.5 ? "white" : "var(--text-primary)";
   };
   if (!isValid) {
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx44__default.default("ds-heatmap-chart", "ds-heatmap-chart--invalid", className), children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx21__default.default("ds-heatmap-chart", "ds-heatmap-chart--invalid", className), children: [
       title && /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "ds-heatmap-chart__title", children: title }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ds-heatmap-chart__empty", children: [
         /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Insufficient data for heatmap visualization" }),
@@ -15326,7 +15001,7 @@ function HeatmapChart({
       ] })
     ] });
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx44__default.default("ds-heatmap-chart", className), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx21__default.default("ds-heatmap-chart", className), children: [
     (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "ds-heatmap-chart__header", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
         title && /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "ds-heatmap-chart__title", children: title }),
@@ -15410,7 +15085,7 @@ function ChartSwitchControl({
   if (allowedTypes.length <= 1) {
     return null;
   }
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx44__default.default("ds-chart-switch", `ds-chart-switch--${size}`, className), children: allowedTypes.map((type) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx21__default.default("ds-chart-switch", `ds-chart-switch--${size}`, className), children: allowedTypes.map((type) => {
     const meta = CHART_REGISTRY[type];
     if (!meta) return null;
     const isActive = type === currentType;
@@ -15419,7 +15094,7 @@ function ChartSwitchControl({
       "button",
       {
         type: "button",
-        className: clsx44__default.default(
+        className: clsx21__default.default(
           "ds-chart-switch__option",
           isActive && "ds-chart-switch__option--active"
         ),
@@ -16084,7 +15759,7 @@ function Chart({
       return normalized;
     });
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx44__default.default("ds-chart", className), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx21__default.default("ds-chart", className), children: [
     (title || subtitle || allowSwitching) && /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "ds-chart__header", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ds-chart__header-text", children: [
         title && /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "ds-chart__title", children: title }),
@@ -16153,7 +15828,7 @@ function MBTIRadar({
     return `${e}${s}${t}${j}`;
   }, [dimensions]);
   if (!isValid) {
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx44__default.default("ds-mbti-radar", "ds-mbti-radar--invalid", className), children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx21__default.default("ds-mbti-radar", "ds-mbti-radar--invalid", className), children: [
       title && /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "ds-mbti-radar__title", children: title }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-mbti-radar__empty", children: /* @__PURE__ */ jsxRuntime.jsx(
         DataStateIndicator,
@@ -16196,7 +15871,7 @@ function MBTIRadar({
       ] })
     ] });
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx44__default.default("ds-mbti-radar", className), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx21__default.default("ds-mbti-radar", className), children: [
     (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "ds-mbti-radar__header", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ds-mbti-radar__header-text", children: [
         title && /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "ds-mbti-radar__title", children: title }),
@@ -16332,7 +16007,7 @@ function MBTITypeGrid({
     return percentage >= highlightThreshold;
   };
   if (!isValid) {
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx44__default.default("ds-mbti-type-grid", "ds-mbti-type-grid--invalid", className), children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx21__default.default("ds-mbti-type-grid", "ds-mbti-type-grid--invalid", className), children: [
       title && /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "ds-mbti-type-grid__title", children: title }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-mbti-type-grid__empty", children: /* @__PURE__ */ jsxRuntime.jsx(
         DataStateIndicator,
@@ -16348,7 +16023,7 @@ function MBTITypeGrid({
       ) })
     ] });
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx44__default.default("ds-mbti-type-grid", className), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx21__default.default("ds-mbti-type-grid", className), children: [
     (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "ds-mbti-type-grid__header", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ds-mbti-type-grid__header-text", children: [
         title && /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "ds-mbti-type-grid__title", children: title }),
@@ -16405,7 +16080,7 @@ function MBTITypeGrid({
                 "button",
                 {
                   type: "button",
-                  className: clsx44__default.default(
+                  className: clsx21__default.default(
                     "ds-mbti-type-grid__cell",
                     highlighted && "ds-mbti-type-grid__cell--highlighted",
                     selected && "ds-mbti-type-grid__cell--selected",
@@ -16480,7 +16155,7 @@ var SelectTrigger = React30__default.default.forwardRef(
       select.Select.Trigger,
       {
         ref,
-        className: clsx44__default.default("ds-select__trigger", `ds-select__trigger--${size}`, className),
+        className: clsx21__default.default("ds-select__trigger", `ds-select__trigger--${size}`, className),
         "aria-label": props["aria-label"] || (typeof placeholder === "string" ? placeholder : "Select"),
         ...props,
         children: [
@@ -16501,7 +16176,7 @@ var SelectContent = React30__default.default.forwardRef(
         sideOffset,
         align,
         alignItemWithTrigger: false,
-        children: /* @__PURE__ */ jsxRuntime.jsx(select.Select.Popup, { ref, className: clsx44__default.default("ds-select__content", className), ...props, children: /* @__PURE__ */ jsxRuntime.jsx(select.Select.List, { className: "ds-select__list", children }) })
+        children: /* @__PURE__ */ jsxRuntime.jsx(select.Select.Popup, { ref, className: clsx21__default.default("ds-select__content", className), ...props, children: /* @__PURE__ */ jsxRuntime.jsx(select.Select.List, { className: "ds-select__list", children }) })
       }
     ) });
   }
@@ -16515,7 +16190,7 @@ var SelectItem = React30__default.default.forwardRef(
         ref,
         value,
         disabled,
-        className: clsx44__default.default("ds-select__item", className),
+        className: clsx21__default.default("ds-select__item", className),
         ...props,
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(select.Select.ItemIndicator, { className: "ds-select__item-indicator", children: /* @__PURE__ */ jsxRuntime.jsx(CheckIcon3, {}) }),
@@ -16528,7 +16203,7 @@ var SelectItem = React30__default.default.forwardRef(
 SelectItem.displayName = "SelectItem";
 var SelectGroup = React30__default.default.forwardRef(
   ({ className, label, children, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsxs(select.Select.Group, { ref, className: clsx44__default.default("ds-select__group", className), ...props, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(select.Select.Group, { ref, className: clsx21__default.default("ds-select__group", className), ...props, children: [
       label && /* @__PURE__ */ jsxRuntime.jsx(select.Select.GroupLabel, { className: "ds-select__group-label", children: label }),
       children
     ] });
@@ -16536,7 +16211,7 @@ var SelectGroup = React30__default.default.forwardRef(
 );
 SelectGroup.displayName = "SelectGroup";
 var SelectSeparator = React30__default.default.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: clsx44__default.default("ds-select__separator", className), ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: clsx21__default.default("ds-select__separator", className), ...props });
 });
 SelectSeparator.displayName = "SelectSeparator";
 function ChevronDownIcon2() {
@@ -16606,7 +16281,7 @@ function ExportMenu({
     /* @__PURE__ */ jsxRuntime.jsx(
       DropdownMenuTrigger,
       {
-        className: clsx44__default.default(
+        className: clsx21__default.default(
           "ds-export-menu__trigger",
           "ds-button",
           `ds-button--${variant}`,
@@ -17302,18 +16977,12 @@ exports.MethodologyNote = MethodologyNote;
 exports.MetricCounter = MetricCounter;
 exports.MotionContainer = MotionContainer;
 exports.MotionText = MotionText;
-exports.Navbar = Navbar;
-exports.NavbarActions = NavbarActions;
-exports.NavbarBrand = NavbarBrand;
-exports.NavbarContent = NavbarContent;
-exports.NavbarItem = NavbarItem;
 exports.NavbarMegaMenu = NavbarMegaMenu;
 exports.NavbarMegaMenuItem = NavbarMegaMenuItem;
 exports.NavbarMegaMenuSection = NavbarMegaMenuSection;
 exports.NavbarMobileActions = NavbarMobileActions;
 exports.NavbarMobileNavItem = NavbarMobileNavItem;
 exports.NavbarMobileSeparator = NavbarMobileSeparator;
-exports.NavbarSearchTrigger = NavbarSearchTrigger;
 exports.NavbarV2 = NavbarV2;
 exports.NavbarV2Actions = NavbarV2Actions;
 exports.NavbarV2Brand = NavbarV2Brand;