@syscore/ui-library 1.7.8 → 1.9.0

package/dist/index.es.js

@@ -1,14 +1,14 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import * as React from "react";
 import React__default, { useState, useEffect, useCallback, useRef } from "react";
-import * as AccordionPrimitive from "@radix-ui/react-accordion";
-import { ChevronDown, GripVertical, X as X$1, PanelLeft, Check, Circle, Dot, ChevronLeft, ChevronRight, XIcon, Search, MoreHorizontal, ArrowLeft, ArrowRight } from "lucide-react";
+import { motion, AnimatePresence } from "motion/react";
 import { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
-import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio";
 import { cva } from "class-variance-authority";
+import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio";
 import * as SeparatorPrimitive from "@radix-ui/react-separator";
 import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+import { GripVertical, X as X$1, PanelLeft, Check, Circle, Dot, ChevronLeft, ChevronRight, XIcon, Search, MoreHorizontal, ChevronDown, ArrowLeft, ArrowRight } from "lucide-react";
 import * as ResizablePrimitive from "react-resizable-panels";
 import { Slot } from "@radix-ui/react-slot";
 import * as SheetPrimitive from "@radix-ui/react-dialog";
@@ -28,7 +28,6 @@ import * as ProgressPrimitive from "@radix-ui/react-progress";
 import { DayPicker } from "react-day-picker";
 import { Command as Command$1 } from "cmdk";
 import * as TabsPrimitive from "@radix-ui/react-tabs";
-import { AnimatePresence, motion } from "motion/react";
 import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
 import * as MenubarPrimitive from "@radix-ui/react-menubar";
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
@@ -45,39 +44,370 @@ import { Toaster as Toaster$2 } from "sonner";
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
-const Accordion = AccordionPrimitive.Root;
-const AccordionItem = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  AccordionPrimitive.Item,
+function capitalize(str) {
+  if (!str) return str;
+  return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
+}
+const buttonVariants = cva(
+  "button",
   {
-    ref,
-    className: cn("accordion-item", className),
+    variants: {
+      variant: {
+        // CTA variants
+        clear: "button--clear",
+        default: "button--default",
+        "primary-gradient": "button--primary-gradient",
+        "primary-dark": "button--primary-dark",
+        "secondary-light": "button--secondary-light",
+        "tertiary-light": "button--tertiary-light",
+        // Utility variants
+        "general-primary": "button--general-primary",
+        "general-secondary": "button--general-secondary",
+        "general-tertiary": "button--general-tertiary",
+        "transparent-tertiary": "button--transparent-tertiary",
+        "tooltip-primary": "button--tooltip-primary",
+        "tooltip-secondary": "button--tooltip-secondary"
+      },
+      size: {
+        xlarge: "button--xlarge",
+        large: "button--large",
+        utility: "button--utility",
+        icon: "button--icon"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "large"
+    }
+  }
+);
+const sizeTextClasses = {
+  xlarge: "body-large",
+  large: "body-base",
+  utility: "body-small",
+  icon: ""
+};
+const Button = React.forwardRef(
+  ({ className, variant: variant2, size, ftMadeFont, mazzardSoftFont, children, style, ...props }, ref) => {
+    const textClass = sizeTextClasses[size || "large"];
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        className: cn(
+          buttonVariants({ variant: variant2, size }),
+          ftMadeFont && "font-ftMade",
+          mazzardSoftFont && "font-mazzardSoft",
+          className
+        ),
+        style,
+        ref,
+        ...props,
+        children: size === "icon" ? children : /* @__PURE__ */ jsx("span", { className: cn("button-text", textClass), children })
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+const UtilityChevronDown = ({
+  className
+}) => {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "size-4 flex items-center justify-center text-gray-500",
+        className
+      ),
+      children: /* @__PURE__ */ jsx(
+        "svg",
+        {
+          xmlns: "http://www.w3.org/2000/svg",
+          width: "12",
+          height: "6",
+          viewBox: "0 0 12 6",
+          fill: "none",
+          className: cn("text-inherit"),
+          children: /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: "M11 0.75L6 5.25L1 0.75",
+              stroke: "currentColor",
+              strokeWidth: "1.5",
+              strokeLinecap: "round",
+              strokeLinejoin: "round"
+            }
+          )
+        }
+      )
+    }
+  );
+};
+const AccordionContext = React.createContext(
+  null
+);
+const AccordionItemContext = React.createContext(null);
+function useAccordion() {
+  const context = React.useContext(AccordionContext);
+  if (!context) {
+    throw new Error("Accordion components must be used within <Accordion>");
+  }
+  return context;
+}
+function useAccordionItem() {
+  const context = React.useContext(AccordionItemContext);
+  if (!context) {
+    throw new Error(
+      "AccordionTrigger and AccordionContent must be used within <AccordionItem>"
+    );
+  }
+  return context;
+}
+function useAccordionState(options = {}) {
+  const { allowMultiple = false, defaultExpanded } = options;
+  const getInitialExpanded = () => {
+    if (!defaultExpanded) return /* @__PURE__ */ new Set();
+    if (Array.isArray(defaultExpanded)) return new Set(defaultExpanded);
+    return /* @__PURE__ */ new Set([defaultExpanded]);
+  };
+  const [expandedValues, setExpandedValues] = React.useState(getInitialExpanded);
+  const [isAllExpanded, setIsAllExpanded] = React.useState(false);
+  const hasAnyExpanded = React.useMemo(
+    () => isAllExpanded || expandedValues.size > 0,
+    [isAllExpanded, expandedValues]
+  );
+  const toggleAll = React.useCallback(() => {
+    if (hasAnyExpanded) {
+      setIsAllExpanded(false);
+      setExpandedValues(/* @__PURE__ */ new Set());
+    } else {
+      setIsAllExpanded(true);
+      setExpandedValues(/* @__PURE__ */ new Set());
+    }
+  }, [hasAnyExpanded]);
+  return {
+    expandedValues,
+    setExpandedValues,
+    hasAnyExpanded,
+    toggleAll
+  };
+}
+const Accordion = React.forwardRef(
+  ({
+    allowMultiple = false,
+    defaultExpanded,
+    expandedValues: controlledExpandedValues,
+    onExpandedChange,
+    children,
+    className,
     ...props
+  }, ref) => {
+    const getInitialExpanded = () => {
+      if (!defaultExpanded) return /* @__PURE__ */ new Set();
+      if (Array.isArray(defaultExpanded)) return new Set(defaultExpanded);
+      return /* @__PURE__ */ new Set([defaultExpanded]);
+    };
+    const [uncontrolledExpandedValues, setUncontrolledExpandedValues] = React.useState(getInitialExpanded);
+    const [isAllExpanded, setIsAllExpanded] = React.useState(false);
+    const isControlled = controlledExpandedValues !== void 0;
+    const expandedValues = isControlled ? controlledExpandedValues : uncontrolledExpandedValues;
+    const hasAnyExpanded = React.useMemo(
+      () => isAllExpanded || expandedValues.size > 0,
+      [isAllExpanded, expandedValues]
+    );
+    const isExpanded = React.useCallback(
+      (value) => isAllExpanded || expandedValues.has(value),
+      [isAllExpanded, expandedValues]
+    );
+    const toggle = React.useCallback(
+      (value) => {
+        const newValues = new Set(expandedValues);
+        if (newValues.has(value)) {
+          newValues.delete(value);
+        } else {
+          if (!allowMultiple) {
+            newValues.clear();
+          }
+          newValues.add(value);
+        }
+        if (!isControlled) {
+          setUncontrolledExpandedValues(newValues);
+        }
+        onExpandedChange == null ? void 0 : onExpandedChange(newValues);
+        setIsAllExpanded(false);
+      },
+      [allowMultiple, expandedValues, isControlled, onExpandedChange]
+    );
+    const expandAll = React.useCallback(() => {
+      setIsAllExpanded(true);
+      const emptySet = /* @__PURE__ */ new Set();
+      if (!isControlled) {
+        setUncontrolledExpandedValues(emptySet);
+      }
+      onExpandedChange == null ? void 0 : onExpandedChange(emptySet);
+    }, [isControlled, onExpandedChange]);
+    const collapseAll = React.useCallback(() => {
+      setIsAllExpanded(false);
+      const emptySet = /* @__PURE__ */ new Set();
+      if (!isControlled) {
+        setUncontrolledExpandedValues(emptySet);
+      }
+      onExpandedChange == null ? void 0 : onExpandedChange(emptySet);
+    }, [isControlled, onExpandedChange]);
+    const contextValue = React.useMemo(
+      () => ({
+        expandedValues,
+        isExpanded,
+        toggle,
+        expandAll,
+        collapseAll,
+        hasAnyExpanded,
+        allowMultiple
+      }),
+      [
+        expandedValues,
+        isExpanded,
+        toggle,
+        expandAll,
+        collapseAll,
+        hasAnyExpanded,
+        allowMultiple
+      ]
+    );
+    return /* @__PURE__ */ jsx(AccordionContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx("div", { ref, className: cn(className), ...props, children }) });
   }
-));
+);
+Accordion.displayName = "Accordion";
+const AccordionSectionHeader = React.forwardRef(({ title, hasExpanded, onToggleAll, className }, ref) => {
+  return /* @__PURE__ */ jsxs("div", { ref, className: cn(className), children: [
+    /* @__PURE__ */ jsx("h2", { children: title }),
+    onToggleAll && /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        animate: { rotate: hasExpanded ? 180 : 0 },
+        transition: { duration: 0.2 },
+        children: /* @__PURE__ */ jsx(Button, { size: "icon", onClick: onToggleAll, children: /* @__PURE__ */ jsx(UtilityChevronDown, {}) })
+      }
+    )
+  ] });
+});
+AccordionSectionHeader.displayName = "AccordionSectionHeader";
+const AccordionHeaderRow = React.forwardRef(({ title, className }, ref) => {
+  const { hasAnyExpanded, expandAll, collapseAll } = useAccordion();
+  const handleToggleAll = React.useCallback(() => {
+    if (hasAnyExpanded) {
+      collapseAll();
+    } else {
+      expandAll();
+    }
+  }, [hasAnyExpanded, collapseAll, expandAll]);
+  return /* @__PURE__ */ jsxs("div", { ref, className: cn(className), children: [
+    /* @__PURE__ */ jsx("h2", { children: title }),
+    /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        animate: { rotate: hasAnyExpanded ? 180 : 0 },
+        transition: { duration: 0.2 },
+        style: { willChange: "transform" },
+        children: /* @__PURE__ */ jsx(Button, { size: "icon", onClick: handleToggleAll, children: /* @__PURE__ */ jsx(UtilityChevronDown, {}) })
+      }
+    )
+  ] });
+});
+AccordionHeaderRow.displayName = "AccordionHeaderRow";
+const AccordionItem = React.forwardRef(
+  ({ value, children, className, ...props }, ref) => {
+    const { isExpanded: isExpandedFn } = useAccordion();
+    const isExpanded = isExpandedFn(value);
+    const itemContextValue = React.useMemo(
+      () => ({ value, isExpanded }),
+      [value, isExpanded]
+    );
+    return /* @__PURE__ */ jsx(AccordionItemContext.Provider, { value: itemContextValue, children: /* @__PURE__ */ jsx("div", { ref, className: cn(className), ...props, children }) });
+  }
+);
 AccordionItem.displayName = "AccordionItem";
-const AccordionTrigger = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(AccordionPrimitive.Header, { className: "accordion-header", children: /* @__PURE__ */ jsxs(
-  AccordionPrimitive.Trigger,
-  {
-    ref,
-    className: cn("accordion-trigger", className),
-    ...props,
-    children: [
-      children,
-      /* @__PURE__ */ jsx(ChevronDown, { className: "accordion-chevron" })
-    ]
+const AccordionHeader = React.forwardRef(
+  ({ children, className, onClick, ...props }, ref) => {
+    return /* @__PURE__ */ jsx("div", { ref, onClick, className: cn(className), ...props, children });
   }
-) }));
-AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
-const AccordionContent = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
-  AccordionPrimitive.Content,
-  {
-    ref,
-    className: "accordion-content",
-    ...props,
-    children: /* @__PURE__ */ jsx("div", { className: cn("accordion-content-inner", className), children })
+);
+AccordionHeader.displayName = "AccordionHeader";
+const AccordionTrigger = React.forwardRef(({ className, onClick, ...props }, ref) => {
+  const { toggle } = useAccordion();
+  const { value, isExpanded } = useAccordionItem();
+  const handleClick = React.useCallback(
+    (e) => {
+      e.stopPropagation();
+      toggle(value);
+      onClick == null ? void 0 : onClick(e);
+    },
+    [toggle, value, onClick]
+  );
+  return /* @__PURE__ */ jsx(
+    motion.div,
+    {
+      animate: { rotate: isExpanded ? 180 : 0 },
+      transition: { duration: 0.2 },
+      style: { willChange: "transform" },
+      children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          ref,
+          size: "icon",
+          variant: "clear",
+          onClick: handleClick,
+          className: cn(className),
+          ...props,
+          children: /* @__PURE__ */ jsx(UtilityChevronDown, {})
+        }
+      )
+    }
+  );
+});
+AccordionTrigger.displayName = "AccordionTrigger";
+const AccordionContent = React.forwardRef(
+  ({ children, className, ...props }, ref) => {
+    const { isExpanded } = useAccordionItem();
+    return /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: isExpanded && /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        initial: { height: 0, opacity: 0 },
+        animate: { height: "auto", opacity: 1 },
+        exit: { height: 0, opacity: 0 },
+        transition: { duration: 0.3, ease: [0.25, 0.46, 0.45, 0.94] },
+        className: cn(className),
+        style: { willChange: "opacity" },
+        children: /* @__PURE__ */ jsx("div", { ref, ...props, children })
+      }
+    ) });
   }
-));
-AccordionContent.displayName = AccordionPrimitive.Content.displayName;
+);
+AccordionContent.displayName = "AccordionContent";
+const AccordionListRow = React.forwardRef(
+  ({
+    icon,
+    badge,
+    title,
+    titleClassName,
+    rightContent,
+    onClick,
+    className,
+    variant: variant2 = "default",
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsxs("div", { ref, onClick, className: cn(className), ...props, children: [
+      icon,
+      badge,
+      /* @__PURE__ */ jsx("span", { className: cn(titleClassName), children: title }),
+      rightContent
+    ] });
+  }
+);
+AccordionListRow.displayName = "AccordionListRow";
+const AccordionContainer = React.forwardRef(({ children, className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx("section", { ref, className: cn(className), ...props, children });
+});
+AccordionContainer.displayName = "AccordionContainer";
 const AspectRatio = AspectRatioPrimitive.Root;
 const typographyVariants = cva("", {
   variants: {
@@ -385,66 +715,6 @@ function useIsMobile() {
   }, []);
   return !!isMobile;
 }
-const buttonVariants = cva(
-  "button",
-  {
-    variants: {
-      variant: {
-        // CTA variants
-        clear: "button--clear",
-        default: "button--default",
-        "primary-gradient": "button--primary-gradient",
-        "primary-dark": "button--primary-dark",
-        "secondary-light": "button--secondary-light",
-        "tertiary-light": "button--tertiary-light",
-        // Utility variants
-        "general-primary": "button--general-primary",
-        "general-secondary": "button--general-secondary",
-        "general-tertiary": "button--general-tertiary",
-        "transparent-tertiary": "button--transparent-tertiary",
-        "tooltip-primary": "button--tooltip-primary",
-        "tooltip-secondary": "button--tooltip-secondary"
-      },
-      size: {
-        xlarge: "button--xlarge",
-        large: "button--large",
-        utility: "button--utility",
-        icon: "button--icon"
-      }
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "large"
-    }
-  }
-);
-const sizeTextClasses = {
-  xlarge: "body-large",
-  large: "body-base",
-  utility: "body-small",
-  icon: ""
-};
-const Button = React.forwardRef(
-  ({ className, variant: variant2, size, ftMadeFont, mazzardSoftFont, children, style, ...props }, ref) => {
-    const textClass = sizeTextClasses[size || "large"];
-    return /* @__PURE__ */ jsx(
-      "button",
-      {
-        className: cn(
-          buttonVariants({ variant: variant2, size }),
-          ftMadeFont && "font-ftMade",
-          mazzardSoftFont && "font-mazzardSoft",
-          className
-        ),
-        style,
-        ref,
-        ...props,
-        children: size === "icon" ? children : /* @__PURE__ */ jsx("span", { className: cn("button-text", textClass), children })
-      }
-    );
-  }
-);
-Button.displayName = "Button";
 const Input = React.forwardRef(
   ({ className, type, startIcon, endIcon, ...props }, ref) => {
     const isReadOnly = props.readOnly;
@@ -1277,7 +1547,10 @@ const Label = React.forwardRef(({ className, children, ...props }, ref) => /* @_
     ref,
     className: cn(labelVariants(), className),
     ...props,
-    children: /* @__PURE__ */ jsx("span", { className: "overline-medium", children })
+    children: /* @__PURE__ */ jsxs("div", { className: "overline-medium", children: [
+      " ",
+      children
+    ] })
   }
 ));
 Label.displayName = LabelPrimitive.Root.displayName;
@@ -1385,40 +1658,6 @@ const InputOTPSlot = React.forwardRef(({ index, className, ...props }, ref) => {
 InputOTPSlot.displayName = "InputOTPSlot";
 const InputOTPSeparator = React.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, role: "separator", ...props, children: /* @__PURE__ */ jsx(Dot, {}) }));
 InputOTPSeparator.displayName = "InputOTPSeparator";
-const UtilityChevronDown = ({
-  className
-}) => {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: cn(
-        "size-4 flex items-center justify-center text-gray-500",
-        className
-      ),
-      children: /* @__PURE__ */ jsx(
-        "svg",
-        {
-          xmlns: "http://www.w3.org/2000/svg",
-          width: "12",
-          height: "6",
-          viewBox: "0 0 12 6",
-          fill: "none",
-          className: cn("text-inherit"),
-          children: /* @__PURE__ */ jsx(
-            "path",
-            {
-              d: "M11 0.75L6 5.25L1 0.75",
-              stroke: "currentColor",
-              strokeWidth: "1.5",
-              strokeLinecap: "round",
-              strokeLinejoin: "round"
-            }
-          )
-        }
-      )
-    }
-  );
-};
 const Select = SelectPrimitive.Root;
 const SelectGroup = SelectPrimitive.Group;
 const SelectValue = SelectPrimitive.Value;
@@ -1669,26 +1908,23 @@ function useSegmentedControl({
     onValueChange: handleValueChange
   };
 }
-cva(
-  "toggle",
-  {
-    variants: {
-      variant: {
-        default: "toggle--default",
-        outline: "toggle--outline"
-      },
-      size: {
-        default: "toggle--size-default",
-        sm: "toggle--size-sm",
-        lg: "toggle--size-lg"
-      }
+cva("toggle", {
+  variants: {
+    variant: {
+      default: "toggle--default",
+      outline: "toggle--outline"
     },
-    defaultVariants: {
-      variant: "default",
-      size: "default"
+    size: {
+      default: "toggle--size-default",
+      sm: "toggle--size-sm",
+      lg: "toggle--size-lg"
     }
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "default"
   }
-);
+});
 const SegmentedControlInner = React.forwardRef(
   ({ className, options, value, defaultValue, onValueChange, ...props }, ref) => {
     var _a;
@@ -1698,19 +1934,18 @@ const SegmentedControlInner = React.forwardRef(
       onValueChange
     });
     return /* @__PURE__ */ jsx("div", { ref, className: cn("segmented-control", className), ...props, children: options.map((option) => {
-      const isReactElement = React.isValidElement(option.label);
       const isActive = selectedValue === option.value;
       return /* @__PURE__ */ jsx(
         "button",
         {
           className: cn(
-            "segmented-control-button",
+            "segmented-control-button body-small",
             isActive ? "segmented-control-button--active" : "segmented-control-button--inactive"
           ),
           onClick: () => handleValueChange(option.value),
           type: "button",
           "data-active": isActive,
-          children: isReactElement ? option.label : /* @__PURE__ */ jsx("span", { className: "body-small font-medium", children: option.label })
+          children: option.label
         },
         option.value
       );
@@ -2314,29 +2549,45 @@ const SearchField = ({
     ) })
   ] });
 };
-const getStatusClass = (status, variant2 = "light") => {
-  return `status-tag tag--${variant2}-${status}`;
+const getStatusClass = (status, colorScheme = "light") => {
+  return `status-tag tag--${colorScheme}-${status}`;
 };
 const Tag = React.forwardRef(
   ({
     children,
+    variant: variant2 = "text",
     active = false,
     status,
-    variant: variant2 = "light",
+    colorScheme = "light",
     className,
+    style,
     onClick,
     ...props
   }, ref) => {
     if (status) {
-      const statusClass = getStatusClass(status, variant2);
+      const statusClass = getStatusClass(status, colorScheme);
+      return /* @__PURE__ */ jsx(
+        "button",
+        {
+          ref,
+          onClick,
+          className: cn("overline-medium", statusClass, className),
+          style,
+          ...props,
+          children
+        }
+      );
+    }
+    if (variant2 === "code") {
       return /* @__PURE__ */ jsx(
         "button",
         {
           ref,
           onClick,
-          className: cn(statusClass, className),
+          className: cn("tag-code", className),
+          style,
           ...props,
-          children: /* @__PURE__ */ jsx("span", { className: "overline-medium", children })
+          children: /* @__PURE__ */ jsx("span", { className: "number-small font-semibold", style: { color: "inherit" }, children })
         }
       );
     }
@@ -2346,12 +2597,13 @@ const Tag = React.forwardRef(
         ref,
         onClick,
         className: cn(
-          "tag-general",
+          "tag-general body-small",
           active ? "tag-general--active" : "tag-general--inactive",
           className
         ),
+        style,
         ...props,
-        children: /* @__PURE__ */ jsx("span", { className: "body-small font-semibold", children })
+        children
       }
     );
   }
@@ -3668,18 +3920,6 @@ function getPayloadConfigFromPayload(config, payload, key) {
   }
   return configLabelKey in config ? config[configLabelKey] : config[key];
 }
-const CodeBadge = ({ code, className, style }) => {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: cn("code-badge", className),
-      style: {
-        ...style
-      },
-      children: /* @__PURE__ */ jsx("span", { className: "number-small font-semibold", style: { color: "inherit" }, children: code })
-    }
-  );
-};
 const PageHeader = React.forwardRef(
   ({ children, className, ...props }, ref) => {
     return /* @__PURE__ */ jsx("header", { ref, className: cn("page-header", className), ...props, children });
@@ -3747,296 +3987,6 @@ const PageHeaderDescription = React.forwardRef(({ children, className, ...props
   );
 });
 PageHeaderDescription.displayName = "PageHeaderDescription";
-const StandardTableContext = React.createContext(null);
-const StandardTableRowContext = React.createContext(null);
-function useStandardTable() {
-  const context = React.useContext(StandardTableContext);
-  if (!context) {
-    throw new Error(
-      "StandardTable components must be used within <StandardTable>"
-    );
-  }
-  return context;
-}
-function useStandardTableRow() {
-  const context = React.useContext(StandardTableRowContext);
-  if (!context) {
-    throw new Error(
-      "StandardTableTrigger and StandardTableContent must be used within <StandardTableRow>"
-    );
-  }
-  return context;
-}
-const StandardTable = React.forwardRef(
-  ({
-    allowMultiple = false,
-    defaultExpanded,
-    expandedValues: controlledExpandedValues,
-    onExpandedChange,
-    children,
-    className,
-    ...props
-  }, ref) => {
-    const getInitialExpanded = () => {
-      if (!defaultExpanded) return /* @__PURE__ */ new Set();
-      if (Array.isArray(defaultExpanded)) return new Set(defaultExpanded);
-      return /* @__PURE__ */ new Set([defaultExpanded]);
-    };
-    const [uncontrolledExpandedValues, setUncontrolledExpandedValues] = React.useState(getInitialExpanded);
-    const [isAllExpanded, setIsAllExpanded] = React.useState(false);
-    const isControlled = controlledExpandedValues !== void 0;
-    const expandedValues = isControlled ? controlledExpandedValues : uncontrolledExpandedValues;
-    const hasAnyExpanded = React.useMemo(
-      () => isAllExpanded || expandedValues.size > 0,
-      [isAllExpanded, expandedValues]
-    );
-    const isExpanded = React.useCallback(
-      (value) => isAllExpanded || expandedValues.has(value),
-      [isAllExpanded, expandedValues]
-    );
-    const toggle = React.useCallback(
-      (value) => {
-        const newValues = new Set(expandedValues);
-        if (newValues.has(value)) {
-          newValues.delete(value);
-        } else {
-          if (!allowMultiple) {
-            newValues.clear();
-          }
-          newValues.add(value);
-        }
-        if (!isControlled) {
-          setUncontrolledExpandedValues(newValues);
-        }
-        onExpandedChange == null ? void 0 : onExpandedChange(newValues);
-        setIsAllExpanded(false);
-      },
-      [allowMultiple, expandedValues, isControlled, onExpandedChange]
-    );
-    const expandAll = React.useCallback(() => {
-      setIsAllExpanded(true);
-      const emptySet = /* @__PURE__ */ new Set();
-      if (!isControlled) {
-        setUncontrolledExpandedValues(emptySet);
-      }
-      onExpandedChange == null ? void 0 : onExpandedChange(emptySet);
-    }, [isControlled, onExpandedChange]);
-    const collapseAll = React.useCallback(() => {
-      setIsAllExpanded(false);
-      const emptySet = /* @__PURE__ */ new Set();
-      if (!isControlled) {
-        setUncontrolledExpandedValues(emptySet);
-      }
-      onExpandedChange == null ? void 0 : onExpandedChange(emptySet);
-    }, [isControlled, onExpandedChange]);
-    const contextValue = React.useMemo(
-      () => ({
-        expandedValues,
-        isExpanded,
-        toggle,
-        expandAll,
-        collapseAll,
-        hasAnyExpanded,
-        allowMultiple
-      }),
-      [
-        expandedValues,
-        isExpanded,
-        toggle,
-        expandAll,
-        collapseAll,
-        hasAnyExpanded,
-        allowMultiple
-      ]
-    );
-    return /* @__PURE__ */ jsx(StandardTableContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref,
-        className: cn(
-          "border border-blue-200 rounded-xl overflow-hidden",
-          className
-        ),
-        ...props,
-        children
-      }
-    ) });
-  }
-);
-StandardTable.displayName = "StandardTable";
-const StandardTableHeader = React.forwardRef(({ title, hasExpanded, onToggleAll, className }, ref) => {
-  return /* @__PURE__ */ jsxs("div", { ref, className: cn("standard-table-header", className), children: [
-    /* @__PURE__ */ jsx("h2", { className: "standard-table-header__title body-large", children: title }),
-    onToggleAll && /* @__PURE__ */ jsx(
-      motion.div,
-      {
-        animate: { rotate: hasExpanded ? 180 : 0 },
-        transition: { duration: 0.2 },
-        className: "mx-6",
-        children: /* @__PURE__ */ jsx(Button, { size: "icon", onClick: onToggleAll, children: /* @__PURE__ */ jsx(UtilityChevronDown, {}) })
-      }
-    )
-  ] });
-});
-StandardTableHeader.displayName = "StandardTableHeader";
-const StandardTableHeaderRow = React.forwardRef(({ title, className }, ref) => {
-  const { hasAnyExpanded, expandAll, collapseAll } = useStandardTable();
-  const handleToggleAll = React.useCallback(() => {
-    if (hasAnyExpanded) {
-      collapseAll();
-    } else {
-      expandAll();
-    }
-  }, [hasAnyExpanded, collapseAll, expandAll]);
-  return /* @__PURE__ */ jsxs("div", { ref, className: cn("standard-table-header", className), children: [
-    /* @__PURE__ */ jsx("h2", { className: "standard-table-header__title body-large", children: title }),
-    /* @__PURE__ */ jsx(
-      motion.div,
-      {
-        animate: { rotate: hasAnyExpanded ? 180 : 0 },
-        transition: { duration: 0.2 },
-        style: { willChange: "transform" },
-        children: /* @__PURE__ */ jsx(Button, { size: "icon", onClick: handleToggleAll, children: /* @__PURE__ */ jsx(UtilityChevronDown, {}) })
-      }
-    )
-  ] });
-});
-StandardTableHeaderRow.displayName = "StandardTableHeaderRow";
-const StandardTableRow = React.forwardRef(({ value, children, className, ...props }, ref) => {
-  const { isExpanded: isExpandedFn } = useStandardTable();
-  const isExpanded = isExpandedFn(value);
-  const rowContextValue = React.useMemo(
-    () => ({ value, isExpanded }),
-    [value, isExpanded]
-  );
-  return /* @__PURE__ */ jsx(StandardTableRowContext.Provider, { value: rowContextValue, children: /* @__PURE__ */ jsx("div", { ref, className: cn("standard-table-row", className), ...props, children }) });
-});
-StandardTableRow.displayName = "StandardTableRow";
-const StandardTableRowHeader = React.forwardRef(({ children, className, onClick, ...props }, ref) => {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref,
-      onClick,
-      className: cn("standard-table-row-header", className),
-      ...props,
-      children
-    }
-  );
-});
-StandardTableRowHeader.displayName = "StandardTableRowHeader";
-const StandardTableTrigger = React.forwardRef(({ className, onClick, ...props }, ref) => {
-  const { toggle } = useStandardTable();
-  const { value, isExpanded } = useStandardTableRow();
-  const handleClick = React.useCallback(
-    (e) => {
-      e.stopPropagation();
-      toggle(value);
-      onClick == null ? void 0 : onClick(e);
-    },
-    [toggle, value, onClick]
-  );
-  return /* @__PURE__ */ jsx(
-    motion.div,
-    {
-      animate: { rotate: isExpanded ? 180 : 0 },
-      transition: { duration: 0.2 },
-      style: { willChange: "transform" },
-      children: /* @__PURE__ */ jsx(
-        Button,
-        {
-          ref,
-          size: "icon",
-          variant: "clear",
-          onClick: handleClick,
-          className: cn("standard-table-trigger", className),
-          ...props,
-          children: /* @__PURE__ */ jsx(UtilityChevronDown, {})
-        }
-      )
-    }
-  );
-});
-StandardTableTrigger.displayName = "StandardTableTrigger";
-const StandardTableContent = React.forwardRef(({ children, className, ...props }, ref) => {
-  const { isExpanded } = useStandardTableRow();
-  return /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: isExpanded && /* @__PURE__ */ jsx(
-    motion.div,
-    {
-      initial: { height: 0, opacity: 0 },
-      animate: { height: "auto", opacity: 1 },
-      exit: { height: 0, opacity: 0 },
-      transition: { duration: 0.3, ease: [0.25, 0.46, 0.45, 0.94] },
-      className: cn("standard-table-content", className),
-      style: { willChange: "opacity" },
-      children: /* @__PURE__ */ jsx(
-        "div",
-        {
-          ref,
-          className: "standard-table-content__inner",
-          ...props,
-          children
-        }
-      )
-    }
-  ) });
-});
-StandardTableContent.displayName = "StandardTableContent";
-const StandardTableListRow = React.forwardRef(
-  ({
-    icon,
-    badge,
-    title,
-    titleClassName,
-    rightContent,
-    onClick,
-    className,
-    variant: variant2 = "default",
-    ...props
-  }, ref) => {
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        ref,
-        onClick,
-        className: cn(
-          "standard-table-list-row",
-          variant2 === "default" ? "standard-table-list-row--default" : "standard-table-list-row--nested",
-          className
-        ),
-        ...props,
-        children: [
-          icon,
-          badge,
-          /* @__PURE__ */ jsx(
-            "span",
-            {
-              className: cn(
-                "standard-table-list-row__title",
-                titleClassName || "body-large"
-              ),
-              children: title
-            }
-          ),
-          rightContent
-        ]
-      }
-    );
-  }
-);
-StandardTableListRow.displayName = "StandardTableListRow";
-const StandardTableContainer = React.forwardRef(({ children, className, ...props }, ref) => {
-  return /* @__PURE__ */ jsx(
-    "section",
-    {
-      ref,
-      className: cn("standard-table-container", className),
-      ...props,
-      children
-    }
-  );
-});
-StandardTableContainer.displayName = "StandardTableContainer";
 const NavLogo = ({ dark = false }) => {
   return /* @__PURE__ */ jsxs(
     "svg",
@@ -9587,8 +9537,13 @@ function AlphaIcon({ dark = false }) {
 }
 export {
   Accordion,
+  AccordionContainer,
   AccordionContent,
+  AccordionHeader,
+  AccordionHeaderRow,
   AccordionItem,
+  AccordionListRow,
+  AccordionSectionHeader,
   AccordionTrigger,
   Alert,
   AlertDescription,
@@ -9639,7 +9594,6 @@ export {
   ChartTooltip,
   ChartTooltipContent,
   Checkbox,
-  CodeBadge,
   Collapsible,
   CollapsibleContent,
   CollapsibleTrigger,
@@ -9834,15 +9788,6 @@ export {
   Toaster as Sonner,
   StandardLogo,
   StandardNavigation,
-  StandardTable,
-  StandardTableContainer,
-  StandardTableContent,
-  StandardTableHeader,
-  StandardTableHeaderRow,
-  StandardTableListRow,
-  StandardTableRow,
-  StandardTableRowHeader,
-  StandardTableTrigger,
   Switch,
   Table,
   TableBody,
@@ -9903,9 +9848,13 @@ export {
   X,
   badgeVariants,
   buttonVariants,
+  capitalize,
   cn,
   conceptColors,
   navigationMenuTriggerStyle,
+  useAccordion,
+  useAccordionItem,
+  useAccordionState,
   useIsMobile,
   useSegmentedControl,
   useTabs,