@syscore/ui-library 1.8.0 → 1.9.1

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";
@@ -49,39 +48,366 @@ function capitalize(str) {
   if (!str) return str;
   return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
 }
-const Accordion = AccordionPrimitive.Root;
-const AccordionItem = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  AccordionPrimitive.Item,
+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: {
@@ -389,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;
@@ -1279,9 +1545,12 @@ const Label = React.forwardRef(({ className, children, ...props }, ref) => /* @_
   LabelPrimitive.Root,
   {
     ref,
-    className: cn(labelVariants(), "overline-medium", className),
+    className: cn(labelVariants(), className),
     ...props,
-    children
+    children: /* @__PURE__ */ jsxs("div", { className: "overline-medium", children: [
+      " ",
+      children
+    ] })
   }
 ));
 Label.displayName = LabelPrimitive.Root.displayName;
@@ -1389,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;
@@ -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("overline-medium", statusClass, className),
+          className: cn("tag-code", className),
+          style,
           ...props,
-          children
+          children: /* @__PURE__ */ jsx("span", { className: "number-small font-semibold", style: { color: "inherit" }, children })
         }
       );
     }
@@ -2350,6 +2601,7 @@ const Tag = React.forwardRef(
           active ? "tag-general--active" : "tag-general--inactive",
           className
         ),
+        style,
         ...props,
         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",
@@ -6615,6 +6565,32 @@ function UtilityRevisionsHide({ className }) {
     }
   );
 }
+const UtilityTriangleInfo = ({
+  className
+}) => {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "14",
+      height: "13",
+      viewBox: "0 0 14 13",
+      fill: "none",
+      className: cn(className),
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M7.78821 1.348C7.6827 1.16611 7.53127 1.01514 7.34906 0.910189C7.16685 0.80524 6.96027 0.75 6.75 0.75C6.53973 0.75 6.33315 0.80524 6.15094 0.910189C5.96873 1.01514 5.8173 1.16611 5.71179 1.348L0.910803 9.74972C0.805511 9.93209 0.750054 10.139 0.75 10.3495C0.749946 10.5601 0.805297 10.767 0.910495 10.9494C1.01569 11.1319 1.16703 11.2834 1.34932 11.3888C1.53161 11.4943 1.73843 11.5499 1.94902 11.5501H11.551C11.7616 11.5499 11.9684 11.4943 12.1507 11.3888C12.333 11.2834 12.4843 11.1319 12.5895 10.9494C12.6947 10.767 12.7501 10.5601 12.75 10.3495C12.7499 10.139 12.6945 9.93209 12.5892 9.74972L7.78821 1.348Z",
+          fill: "#50E7CA",
+          stroke: "#1BC5A3",
+          strokeWidth: "1.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  );
+};
 const SealWell = ({ className }) => {
   return /* @__PURE__ */ jsxs(
     "svg",
@@ -9587,8 +9563,13 @@ function AlphaIcon({ dark = false }) {
 }
 export {
   Accordion,
+  AccordionContainer,
   AccordionContent,
+  AccordionHeader,
+  AccordionHeaderRow,
   AccordionItem,
+  AccordionListRow,
+  AccordionSectionHeader,
   AccordionTrigger,
   Alert,
   AlertDescription,
@@ -9639,7 +9620,6 @@ export {
   ChartTooltip,
   ChartTooltipContent,
   Checkbox,
-  CodeBadge,
   Collapsible,
   CollapsibleContent,
   CollapsibleTrigger,
@@ -9834,15 +9814,6 @@ export {
   Toaster as Sonner,
   StandardLogo,
   StandardNavigation,
-  StandardTable,
-  StandardTableContainer,
-  StandardTableContent,
-  StandardTableHeader,
-  StandardTableHeaderRow,
-  StandardTableListRow,
-  StandardTableRow,
-  StandardTableRowHeader,
-  StandardTableTrigger,
   Switch,
   Table,
   TableBody,
@@ -9896,6 +9867,7 @@ export {
   UtilityTarget,
   UtilityTargetActive,
   UtilityText,
+  UtilityTriangleInfo,
   WaterMarkWWWProducts,
   WaterMarkWellProjects,
   WatermarkMemberOrg,
@@ -9907,6 +9879,9 @@ export {
   cn,
   conceptColors,
   navigationMenuTriggerStyle,
+  useAccordion,
+  useAccordionItem,
+  useAccordionState,
   useIsMobile,
   useSegmentedControl,
   useTabs,