@emeraldemperaur/vector-sigma 1.4.19 → 1.4.21

package/lib/index.cjs

@@ -678,7 +678,7 @@ var VisuallyHidden = React__namespace.forwardRef(
   }
 );
 VisuallyHidden.displayName = NAME$4;
-var Root$7 = VisuallyHidden;
+var Root$8 = VisuallyHidden;
 
 // src/accessible-icon.tsx
 var NAME$3 = "AccessibleIcon";
@@ -691,11 +691,11 @@ var AccessibleIcon = ({ children, label }) => {
       focusable: "false"
       // See: https://allyjs.io/tutorials/focusing-in-svg.html#making-svg-elements-focusable
     }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(Root$7, { children: label })
+    /* @__PURE__ */ jsxRuntimeExports.jsx(Root$8, { children: label })
   ] });
 };
 AccessibleIcon.displayName = NAME$3;
-var Root2$4 = AccessibleIcon;
+var Root2$5 = AccessibleIcon;
 
 // packages/react/context/src/create-context.tsx
 function createContextScope(scopeName, createContextScopeDeps = []) {
@@ -1035,6 +1035,139 @@ function useId$1(deterministicId) {
   return (id ? `radix-${id}` : "");
 }
 
+var COLLAPSIBLE_NAME = "Collapsible";
+var [createCollapsibleContext, createCollapsibleScope] = createContextScope(COLLAPSIBLE_NAME);
+var [CollapsibleProvider, useCollapsibleContext] = createCollapsibleContext(COLLAPSIBLE_NAME);
+var Collapsible = React__namespace.forwardRef(
+  (props, forwardedRef) => {
+    const {
+      __scopeCollapsible,
+      open: openProp,
+      defaultOpen,
+      disabled,
+      onOpenChange,
+      ...collapsibleProps
+    } = props;
+    const [open, setOpen] = useControllableState({
+      prop: openProp,
+      defaultProp: defaultOpen ?? false,
+      onChange: onOpenChange,
+      caller: COLLAPSIBLE_NAME
+    });
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+      CollapsibleProvider,
+      {
+        scope: __scopeCollapsible,
+        disabled,
+        contentId: useId$1(),
+        open,
+        onOpenToggle: React__namespace.useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen]),
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          Primitive$1.div,
+          {
+            "data-state": getState$5(open),
+            "data-disabled": disabled ? "" : void 0,
+            ...collapsibleProps,
+            ref: forwardedRef
+          }
+        )
+      }
+    );
+  }
+);
+Collapsible.displayName = COLLAPSIBLE_NAME;
+var TRIGGER_NAME$5 = "CollapsibleTrigger";
+var CollapsibleTrigger = React__namespace.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopeCollapsible, ...triggerProps } = props;
+    const context = useCollapsibleContext(TRIGGER_NAME$5, __scopeCollapsible);
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+      Primitive$1.button,
+      {
+        type: "button",
+        "aria-controls": context.contentId,
+        "aria-expanded": context.open || false,
+        "data-state": getState$5(context.open),
+        "data-disabled": context.disabled ? "" : void 0,
+        disabled: context.disabled,
+        ...triggerProps,
+        ref: forwardedRef,
+        onClick: composeEventHandlers(props.onClick, context.onOpenToggle)
+      }
+    );
+  }
+);
+CollapsibleTrigger.displayName = TRIGGER_NAME$5;
+var CONTENT_NAME$5 = "CollapsibleContent";
+var CollapsibleContent = React__namespace.forwardRef(
+  (props, forwardedRef) => {
+    const { forceMount, ...contentProps } = props;
+    const context = useCollapsibleContext(CONTENT_NAME$5, props.__scopeCollapsible);
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(Presence, { present: forceMount || context.open, children: ({ present }) => /* @__PURE__ */ jsxRuntimeExports.jsx(CollapsibleContentImpl, { ...contentProps, ref: forwardedRef, present }) });
+  }
+);
+CollapsibleContent.displayName = CONTENT_NAME$5;
+var CollapsibleContentImpl = React__namespace.forwardRef((props, forwardedRef) => {
+  const { __scopeCollapsible, present, children, ...contentProps } = props;
+  const context = useCollapsibleContext(CONTENT_NAME$5, __scopeCollapsible);
+  const [isPresent, setIsPresent] = React__namespace.useState(present);
+  const ref = React__namespace.useRef(null);
+  const composedRefs = useComposedRefs(forwardedRef, ref);
+  const heightRef = React__namespace.useRef(0);
+  const height = heightRef.current;
+  const widthRef = React__namespace.useRef(0);
+  const width = widthRef.current;
+  const isOpen = context.open || isPresent;
+  const isMountAnimationPreventedRef = React__namespace.useRef(isOpen);
+  const originalStylesRef = React__namespace.useRef(void 0);
+  React__namespace.useEffect(() => {
+    const rAF = requestAnimationFrame(() => isMountAnimationPreventedRef.current = false);
+    return () => cancelAnimationFrame(rAF);
+  }, []);
+  useLayoutEffect2(() => {
+    const node = ref.current;
+    if (node) {
+      originalStylesRef.current = originalStylesRef.current || {
+        transitionDuration: node.style.transitionDuration,
+        animationName: node.style.animationName
+      };
+      node.style.transitionDuration = "0s";
+      node.style.animationName = "none";
+      const rect = node.getBoundingClientRect();
+      heightRef.current = rect.height;
+      widthRef.current = rect.width;
+      if (!isMountAnimationPreventedRef.current) {
+        node.style.transitionDuration = originalStylesRef.current.transitionDuration;
+        node.style.animationName = originalStylesRef.current.animationName;
+      }
+      setIsPresent(present);
+    }
+  }, [context.open, present]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    Primitive$1.div,
+    {
+      "data-state": getState$5(context.open),
+      "data-disabled": context.disabled ? "" : void 0,
+      id: context.contentId,
+      hidden: !isOpen,
+      ...contentProps,
+      ref: composedRefs,
+      style: {
+        [`--radix-collapsible-content-height`]: height ? `${height}px` : void 0,
+        [`--radix-collapsible-content-width`]: width ? `${width}px` : void 0,
+        ...props.style
+      },
+      children: isOpen && children
+    }
+  );
+});
+function getState$5(open) {
+  return open ? "open" : "closed";
+}
+var Root$7 = Collapsible;
+var Trigger$3 = CollapsibleTrigger;
+var Content$1 = CollapsibleContent;
+
 // packages/react/direction/src/direction.tsx
 var DirectionContext = React__namespace.createContext(void 0);
 var DirectionProvider = (props) => {
@@ -1047,6 +1180,298 @@ function useDirection(localDir) {
 }
 var Provider$1 = DirectionProvider;
 
+var ACCORDION_NAME = "Accordion";
+var ACCORDION_KEYS = ["Home", "End", "ArrowDown", "ArrowUp", "ArrowLeft", "ArrowRight"];
+var [Collection$3, useCollection$3, createCollectionScope$3] = createCollection(ACCORDION_NAME);
+var [createAccordionContext] = createContextScope(ACCORDION_NAME, [
+  createCollectionScope$3,
+  createCollapsibleScope
+]);
+var useCollapsibleScope = createCollapsibleScope();
+var Accordion$1 = React.forwardRef(
+  (props, forwardedRef) => {
+    const { type, ...accordionProps } = props;
+    const singleProps = accordionProps;
+    const multipleProps = accordionProps;
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(Collection$3.Provider, { scope: props.__scopeAccordion, children: type === "multiple" ? /* @__PURE__ */ jsxRuntimeExports.jsx(AccordionImplMultiple, { ...multipleProps, ref: forwardedRef }) : /* @__PURE__ */ jsxRuntimeExports.jsx(AccordionImplSingle, { ...singleProps, ref: forwardedRef }) });
+  }
+);
+Accordion$1.displayName = ACCORDION_NAME;
+var [AccordionValueProvider, useAccordionValueContext] = createAccordionContext(ACCORDION_NAME);
+var [AccordionCollapsibleProvider, useAccordionCollapsibleContext] = createAccordionContext(
+  ACCORDION_NAME,
+  { collapsible: false }
+);
+var AccordionImplSingle = React.forwardRef(
+  (props, forwardedRef) => {
+    const {
+      value: valueProp,
+      defaultValue,
+      onValueChange = () => {
+      },
+      collapsible = false,
+      ...accordionSingleProps
+    } = props;
+    const [value, setValue] = useControllableState({
+      prop: valueProp,
+      defaultProp: defaultValue ?? "",
+      onChange: onValueChange,
+      caller: ACCORDION_NAME
+    });
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+      AccordionValueProvider,
+      {
+        scope: props.__scopeAccordion,
+        value: React.useMemo(() => value ? [value] : [], [value]),
+        onItemOpen: setValue,
+        onItemClose: React.useCallback(() => collapsible && setValue(""), [collapsible, setValue]),
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx(AccordionCollapsibleProvider, { scope: props.__scopeAccordion, collapsible, children: /* @__PURE__ */ jsxRuntimeExports.jsx(AccordionImpl, { ...accordionSingleProps, ref: forwardedRef }) })
+      }
+    );
+  }
+);
+var AccordionImplMultiple = React.forwardRef((props, forwardedRef) => {
+  const {
+    value: valueProp,
+    defaultValue,
+    onValueChange = () => {
+    },
+    ...accordionMultipleProps
+  } = props;
+  const [value, setValue] = useControllableState({
+    prop: valueProp,
+    defaultProp: defaultValue ?? [],
+    onChange: onValueChange,
+    caller: ACCORDION_NAME
+  });
+  const handleItemOpen = React.useCallback(
+    (itemValue) => setValue((prevValue = []) => [...prevValue, itemValue]),
+    [setValue]
+  );
+  const handleItemClose = React.useCallback(
+    (itemValue) => setValue((prevValue = []) => prevValue.filter((value2) => value2 !== itemValue)),
+    [setValue]
+  );
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    AccordionValueProvider,
+    {
+      scope: props.__scopeAccordion,
+      value,
+      onItemOpen: handleItemOpen,
+      onItemClose: handleItemClose,
+      children: /* @__PURE__ */ jsxRuntimeExports.jsx(AccordionCollapsibleProvider, { scope: props.__scopeAccordion, collapsible: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(AccordionImpl, { ...accordionMultipleProps, ref: forwardedRef }) })
+    }
+  );
+});
+var [AccordionImplProvider, useAccordionContext] = createAccordionContext(ACCORDION_NAME);
+var AccordionImpl = React.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopeAccordion, disabled, dir, orientation = "vertical", ...accordionProps } = props;
+    const accordionRef = React.useRef(null);
+    const composedRefs = useComposedRefs(accordionRef, forwardedRef);
+    const getItems = useCollection$3(__scopeAccordion);
+    const direction = useDirection(dir);
+    const isDirectionLTR = direction === "ltr";
+    const handleKeyDown = composeEventHandlers(props.onKeyDown, (event) => {
+      if (!ACCORDION_KEYS.includes(event.key)) return;
+      const target = event.target;
+      const triggerCollection = getItems().filter((item) => !item.ref.current?.disabled);
+      const triggerIndex = triggerCollection.findIndex((item) => item.ref.current === target);
+      const triggerCount = triggerCollection.length;
+      if (triggerIndex === -1) return;
+      event.preventDefault();
+      let nextIndex = triggerIndex;
+      const homeIndex = 0;
+      const endIndex = triggerCount - 1;
+      const moveNext = () => {
+        nextIndex = triggerIndex + 1;
+        if (nextIndex > endIndex) {
+          nextIndex = homeIndex;
+        }
+      };
+      const movePrev = () => {
+        nextIndex = triggerIndex - 1;
+        if (nextIndex < homeIndex) {
+          nextIndex = endIndex;
+        }
+      };
+      switch (event.key) {
+        case "Home":
+          nextIndex = homeIndex;
+          break;
+        case "End":
+          nextIndex = endIndex;
+          break;
+        case "ArrowRight":
+          if (orientation === "horizontal") {
+            if (isDirectionLTR) {
+              moveNext();
+            } else {
+              movePrev();
+            }
+          }
+          break;
+        case "ArrowDown":
+          if (orientation === "vertical") {
+            moveNext();
+          }
+          break;
+        case "ArrowLeft":
+          if (orientation === "horizontal") {
+            if (isDirectionLTR) {
+              movePrev();
+            } else {
+              moveNext();
+            }
+          }
+          break;
+        case "ArrowUp":
+          if (orientation === "vertical") {
+            movePrev();
+          }
+          break;
+      }
+      const clampedIndex = nextIndex % triggerCount;
+      triggerCollection[clampedIndex].ref.current?.focus();
+    });
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+      AccordionImplProvider,
+      {
+        scope: __scopeAccordion,
+        disabled,
+        direction: dir,
+        orientation,
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx(Collection$3.Slot, { scope: __scopeAccordion, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          Primitive$1.div,
+          {
+            ...accordionProps,
+            "data-orientation": orientation,
+            ref: composedRefs,
+            onKeyDown: disabled ? void 0 : handleKeyDown
+          }
+        ) })
+      }
+    );
+  }
+);
+var ITEM_NAME$3 = "AccordionItem";
+var [AccordionItemProvider, useAccordionItemContext] = createAccordionContext(ITEM_NAME$3);
+var AccordionItem$1 = React.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopeAccordion, value, ...accordionItemProps } = props;
+    const accordionContext = useAccordionContext(ITEM_NAME$3, __scopeAccordion);
+    const valueContext = useAccordionValueContext(ITEM_NAME$3, __scopeAccordion);
+    const collapsibleScope = useCollapsibleScope(__scopeAccordion);
+    const triggerId = useId$1();
+    const open = value && valueContext.value.includes(value) || false;
+    const disabled = accordionContext.disabled || props.disabled;
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+      AccordionItemProvider,
+      {
+        scope: __scopeAccordion,
+        open,
+        disabled,
+        triggerId,
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          Root$7,
+          {
+            "data-orientation": accordionContext.orientation,
+            "data-state": getState$4(open),
+            ...collapsibleScope,
+            ...accordionItemProps,
+            ref: forwardedRef,
+            disabled,
+            open,
+            onOpenChange: (open2) => {
+              if (open2) {
+                valueContext.onItemOpen(value);
+              } else {
+                valueContext.onItemClose(value);
+              }
+            }
+          }
+        )
+      }
+    );
+  }
+);
+AccordionItem$1.displayName = ITEM_NAME$3;
+var HEADER_NAME = "AccordionHeader";
+var AccordionHeader = React.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopeAccordion, ...headerProps } = props;
+    const accordionContext = useAccordionContext(ACCORDION_NAME, __scopeAccordion);
+    const itemContext = useAccordionItemContext(HEADER_NAME, __scopeAccordion);
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+      Primitive$1.h3,
+      {
+        "data-orientation": accordionContext.orientation,
+        "data-state": getState$4(itemContext.open),
+        "data-disabled": itemContext.disabled ? "" : void 0,
+        ...headerProps,
+        ref: forwardedRef
+      }
+    );
+  }
+);
+AccordionHeader.displayName = HEADER_NAME;
+var TRIGGER_NAME$4 = "AccordionTrigger";
+var AccordionTrigger = React.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopeAccordion, ...triggerProps } = props;
+    const accordionContext = useAccordionContext(ACCORDION_NAME, __scopeAccordion);
+    const itemContext = useAccordionItemContext(TRIGGER_NAME$4, __scopeAccordion);
+    const collapsibleContext = useAccordionCollapsibleContext(TRIGGER_NAME$4, __scopeAccordion);
+    const collapsibleScope = useCollapsibleScope(__scopeAccordion);
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(Collection$3.ItemSlot, { scope: __scopeAccordion, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      Trigger$3,
+      {
+        "aria-disabled": itemContext.open && !collapsibleContext.collapsible || void 0,
+        "data-orientation": accordionContext.orientation,
+        id: itemContext.triggerId,
+        ...collapsibleScope,
+        ...triggerProps,
+        ref: forwardedRef
+      }
+    ) });
+  }
+);
+AccordionTrigger.displayName = TRIGGER_NAME$4;
+var CONTENT_NAME$4 = "AccordionContent";
+var AccordionContent = React.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopeAccordion, ...contentProps } = props;
+    const accordionContext = useAccordionContext(ACCORDION_NAME, __scopeAccordion);
+    const itemContext = useAccordionItemContext(CONTENT_NAME$4, __scopeAccordion);
+    const collapsibleScope = useCollapsibleScope(__scopeAccordion);
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+      Content$1,
+      {
+        role: "region",
+        "aria-labelledby": itemContext.triggerId,
+        "data-orientation": accordionContext.orientation,
+        ...collapsibleScope,
+        ...contentProps,
+        ref: forwardedRef,
+        style: {
+          ["--radix-accordion-content-height"]: "var(--radix-collapsible-content-height)",
+          ["--radix-accordion-content-width"]: "var(--radix-collapsible-content-width)",
+          ...props.style
+        }
+      }
+    );
+  }
+);
+AccordionContent.displayName = CONTENT_NAME$4;
+function getState$4(open) {
+  return open ? "open" : "closed";
+}
+var Root2$4 = Accordion$1;
+var Item$2 = AccordionItem$1;
+var Header = AccordionHeader;
+var Trigger2 = AccordionTrigger;
+var Content2$3 = AccordionContent;
+
 // packages/react/use-callback-ref/src/use-callback-ref.tsx
 function useCallbackRef$1(callback) {
   const callbackRef = React__namespace.useRef(callback);
@@ -8878,7 +9303,7 @@ var TooltipContentImpl = React__namespace.forwardRef(
             },
             children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx(Slottable, { children }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx(VisuallyHiddenContentContextProvider, { scope: __scopeTooltip, isInside: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Root$7, { id: context.contentId, role: "tooltip", children: ariaLabel || children }) })
+              /* @__PURE__ */ jsxRuntimeExports.jsx(VisuallyHiddenContentContextProvider, { scope: __scopeTooltip, isInside: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Root$8, { id: context.contentId, role: "tooltip", children: ariaLabel || children }) })
             ]
           }
         )
@@ -9022,7 +9447,7 @@ var Portal$1 = TooltipPortal;
 var Content2 = TooltipContent;
 var Arrow2 = TooltipArrow;
 
-const s$9=Root2$4;
+const s$9=Root2$5;
 
 var classnames = {exports: {}};
 
@@ -9193,7 +9618,7 @@ const e$5=["1","2","3"],s$5={size:{type:"enum",className:"rt-r-size",values:e$5,
 
 const s$4=React__namespace.forwardRef((i,o)=>{const{className:a,children:e,loading:t,...m}=v$3(i,s$5,r$i);if(!t)return e;const r=React__namespace.createElement("span",{...m,ref:o,className:classNames("rt-Spinner",a)},React__namespace.createElement("span",{className:"rt-SpinnerLeaf"}),React__namespace.createElement("span",{className:"rt-SpinnerLeaf"}),React__namespace.createElement("span",{className:"rt-SpinnerLeaf"}),React__namespace.createElement("span",{className:"rt-SpinnerLeaf"}),React__namespace.createElement("span",{className:"rt-SpinnerLeaf"}),React__namespace.createElement("span",{className:"rt-SpinnerLeaf"}),React__namespace.createElement("span",{className:"rt-SpinnerLeaf"}),React__namespace.createElement("span",{className:"rt-SpinnerLeaf"}));return e===void 0?r:React__namespace.createElement(p$5,{asChild:true,position:"relative",align:"center",justify:"center"},React__namespace.createElement("span",null,React__namespace.createElement("span",{"aria-hidden":true,style:{display:"contents",visibility:"hidden"},inert:void 0},e),React__namespace.createElement(p$5,{asChild:true,align:"center",justify:"center",position:"absolute",inset:"0"},React__namespace.createElement("span",null,r))))});s$4.displayName="Spinner";
 
-const d$1=Root$7;
+const d$1=Root$8;
 
 function s$3(e,t){if(e!==void 0)return typeof e=="string"?t(e):Object.fromEntries(Object.entries(e).map(([n,o])=>[n,t(o)]))}function r$e(e){switch(e){case "1":return "1";case "2":case "3":return "2";case "4":return "3"}}
 
@@ -48096,6 +48521,285 @@ const Row = ({ children, className, gap = "4" }) => {
     return (React.createElement(o$6, { columns: "12", gap: gap, width: "auto", className: className }, children));
 };
 
+const AccordionContext = React.createContext({ design: 'outline' });
+const Accordion = ({ design = 'outline', defaultOpenId = "", allowMultiple = false, width = 12, newRow, className, style, children }) => {
+    const containerRef = React.useRef(null);
+    const [neuVars, setNeuVars] = React.useState({});
+    React.useEffect(() => {
+        if (design === 'neumorphic' && containerRef.current) {
+            const parentBg = getNearestParentBackground(containerRef.current.parentElement);
+            setNeuVars({
+                '--neu-bg': parentBg,
+                '--neu-shadow-dark': adjustColor(parentBg, -20),
+                '--neu-shadow-light': adjustColor(parentBg, 20),
+            });
+        }
+    }, [design]);
+    const sharedProps = {
+        className: `v-accordion-root-${design}`,
+        children
+    };
+    const accordionRoot = allowMultiple ? (React.createElement(Root2$4, Object.assign({ type: "multiple", defaultValue: defaultOpenId ? [defaultOpenId] : undefined }, sharedProps))) : (React.createElement(Root2$4, Object.assign({ type: "single", defaultValue: defaultOpenId || undefined, collapsible: true }, sharedProps)));
+    return (React.createElement(AccordionContext.Provider, { value: { design } },
+        React.createElement(Column, { span: width, newLine: newRow },
+            React.createElement("div", { ref: containerRef, className: className, style: Object.assign(Object.assign({ width: '100%' }, style), neuVars) },
+                React.createElement("style", { dangerouslySetInnerHTML: { __html: `
+                        @keyframes slideDown {
+                            from { height: 0; opacity: 0; }
+                            to { height: var(--radix-accordion-content-height); opacity: 1; }
+                        }
+                        @keyframes slideUp {
+                            from { height: var(--radix-accordion-content-height); opacity: 1; }
+                            to { height: 0; opacity: 0; }
+                        }
+
+                        .v-accordion-content[data-state='open'] {
+                            animation: slideDown 300ms cubic-bezier(0.87, 0, 0.13, 1);
+                        }
+                        .v-accordion-content[data-state='closed'] {
+                            animation: slideUp 300ms cubic-bezier(0.87, 0, 0.13, 1);
+                        }
+                        
+                        .v-accordion-trigger[data-state='open'] .v-accordion-chevron {
+                            transform: rotate(180deg);
+                        }
+                        .v-accordion-chevron {
+                            transition: transform 300ms cubic-bezier(0.87, 0, 0.13, 1);
+                            color: var(--gray-10);
+                        }
+
+                        .v-accordion-root-outline {
+                            border: 1px solid var(--gray-6);
+                            border-radius: var(--radius-3);
+                            background-color: transparent;
+                        }
+                        .v-accordion-item-outline {
+                            border-bottom: 1px solid var(--gray-6);
+                        }
+                        .v-accordion-item-outline:last-child {
+                            border-bottom: none;
+                        }
+
+                        .v-accordion-root-material {
+                            border-radius: var(--radius-3);
+                            background-color: var(--color-surface);
+                            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+                        }
+                        .v-accordion-item-material {
+                            border-bottom: 1px solid var(--gray-4);
+                        }
+                        .v-accordion-item-material:last-child {
+                            border-bottom: none;
+                        }
+                        .v-accordion-item-material[data-state='open'] {
+                            border-left: 3px solid var(--accent-9);
+                        }
+
+                        .v-accordion-root-neumorphic {
+                            display: flex;
+                            flex-direction: column;
+                            gap: 16px; /* Neumorphic items look best separated */
+                        }
+                        .v-accordion-item-neumorphic {
+                            background-color: var(--neu-bg);
+                            border-radius: 12px;
+                            box-shadow: 6px 6px 12px var(--neu-shadow-dark), -6px -6px 12px var(--neu-shadow-light);
+                            transition: all 0.3s ease;
+                        }
+                        .v-accordion-item-neumorphic[data-state='open'] {
+                            /* Pressed-in effect when open */
+                            box-shadow: inset 4px 4px 8px var(--neu-shadow-dark), inset -4px -4px 8px var(--neu-shadow-light);
+                        }
+                        
+                        .v-accordion-trigger {
+                            all: unset;
+                            display: flex;
+                            align-items: center;
+                            justify-content: space-between;
+                            width: 100%;
+                            padding: 16px;
+                            cursor: pointer;
+                            font-family: var(--default-font-family);
+                            box-sizing: border-box;
+                        }
+                        .v-accordion-trigger:disabled {
+                            cursor: not-allowed;
+                            opacity: 0.5;
+                        }
+                    ` } }),
+                accordionRoot))));
+};
+const AccordionItem = ({ sectionId, title, children, disabled = false, icon }) => {
+    const { design } = React.useContext(AccordionContext);
+    return (React.createElement(Item$2, { value: sectionId, disabled: disabled, className: `v-accordion-item-${design}` },
+        React.createElement(Header, { style: { margin: 0 } },
+            React.createElement(Trigger2, { className: "v-accordion-trigger" },
+                React.createElement(p$5, { align: "center", gap: "3" },
+                    icon && (React.createElement("div", { style: { display: 'flex', alignItems: 'center', color: 'var(--accent-9)' } }, icon)),
+                    React.createElement(p$d, { size: "3", weight: "bold", style: { color: 'var(--gray-12)' } }, title)),
+                React.createElement(Icon, { name: "chevrondown", height: "20", width: "20", className: "v-accordion-chevron" }))),
+        React.createElement(Content2$3, { className: "v-accordion-content", style: { overflow: 'hidden' } },
+            React.createElement("div", { style: { padding: '0 16px 16px 16px' } },
+                React.createElement(p$d, { size: "2", color: "gray", as: "div" }, children)))));
+};
+
+const CodexContext = React.createContext({
+    activeStepId: '',
+    setActiveStepId: () => { },
+    design: 'outline'
+});
+const useStepper = () => React.useContext(CodexContext);
+const Codex = ({ design = 'outline', defaultStepId, width = 12, newRow, className, style, children }) => {
+    const containerRef = React.useRef(null);
+    const [neuVars, setNeuVars] = React.useState({});
+    const steps = React.Children.toArray(children)
+        .filter((child) => React.isValidElement(child))
+        .map((child) => ({
+        id: child.props.stepId,
+        title: child.props.title,
+        description: child.props.subtitleDescription,
+        icon: child.props.icon
+    }));
+    const [activeStepId, setActiveStepId] = React.useState('');
+    React.useEffect(() => {
+        if (steps.length > 0 && !activeStepId) {
+            const initialId = defaultStepId && steps.some(s => s.id === defaultStepId)
+                ? defaultStepId
+                : steps[0].id;
+            setActiveStepId(initialId);
+        }
+    }, [defaultStepId, steps, activeStepId]);
+    React.useEffect(() => {
+        if (design === 'neumorphic' && containerRef.current) {
+            const parentBg = getNearestParentBackground(containerRef.current.parentElement);
+            setNeuVars({
+                '--neu-bg': parentBg,
+                '--neu-shadow-dark': adjustColor(parentBg, -20),
+                '--neu-shadow-light': adjustColor(parentBg, 20),
+            });
+        }
+    }, [design]);
+    const activeIndex = steps.findIndex(s => s.id === activeStepId);
+    return (React.createElement(CodexContext.Provider, { value: { activeStepId, setActiveStepId, design } },
+        React.createElement(Column, { span: width, newLine: newRow },
+            React.createElement("div", { ref: containerRef, className: className, style: Object.assign(Object.assign({ width: '100%' }, style), neuVars) },
+                React.createElement("style", { dangerouslySetInnerHTML: { __html: `
+                        .v-step-circle {
+                            width: 40px;
+                            height: 40px;
+                            border-radius: 50%;
+                            display: flex;
+                            align-items: center;
+                            justify-content: center;
+                            font-weight: bold;
+                            transition: all 0.3s ease;
+                            z-index: 2;
+                            position: relative;
+                            cursor: pointer;
+                        }
+                        .v-step-line {
+                            flex: 1;
+                            height: 2px;
+                            transition: background-color 0.3s ease;
+                        }
+                        .v-step-content-animation {
+                            animation: fadeIn 0.4s ease-in-out;
+                        }
+                        @keyframes fadeIn {
+                            from { opacity: 0; transform: translateY(10px); }
+                            to { opacity: 1; transform: translateY(0); }
+                        }
+
+                        .v-stepper-outline .v-step-circle.pending {
+                            border: 2px solid var(--gray-6);
+                            background: transparent;
+                            color: var(--gray-10);
+                        }
+                        .v-stepper-outline .v-step-circle.active {
+                            border: 2px solid var(--accent-9);
+                            background: var(--accent-2);
+                            color: var(--accent-9);
+                        }
+                        .v-stepper-outline .v-step-circle.completed {
+                            border: 2px solid var(--accent-9);
+                            background: var(--accent-9);
+                            color: white;
+                        }
+                        .v-stepper-outline .v-step-line.pending { background-color: var(--gray-5); }
+                        .v-stepper-outline .v-step-line.completed { background-color: var(--accent-9); }
+
+                        .v-stepper-material .v-step-circle.pending {
+                            background: var(--color-surface);
+                            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+                            color: var(--gray-10);
+                        }
+                        .v-stepper-material .v-step-circle.active {
+                            background: var(--accent-9);
+                            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
+                            color: white;
+                            transform: scale(1.1);
+                        }
+                        .v-stepper-material .v-step-circle.completed {
+                            background: var(--accent-9);
+                            color: white;
+                        }
+                        .v-stepper-material .v-step-line.pending { background-color: var(--gray-5); }
+                        .v-stepper-material .v-step-line.completed { background-color: var(--accent-9); }
+
+                        .v-stepper-neumorphic .v-step-circle {
+                            background: var(--neu-bg);
+                            border: none;
+                        }
+                        .v-stepper-neumorphic .v-step-circle.pending {
+                            box-shadow: 4px 4px 8px var(--neu-shadow-dark), -4px -4px 8px var(--neu-shadow-light);
+                            color: var(--gray-10);
+                        }
+                        .v-stepper-neumorphic .v-step-circle.active {
+                            box-shadow: inset 4px 4px 8px var(--neu-shadow-dark), inset -4px -4px 8px var(--neu-shadow-light);
+                            color: var(--accent-9);
+                        }
+                        .v-stepper-neumorphic .v-step-circle.completed {
+                            box-shadow: inset 2px 2px 4px var(--neu-shadow-dark), inset -2px -2px 4px var(--neu-shadow-light);
+                            color: var(--accent-9);
+                        }
+                        .v-stepper-neumorphic .v-step-line.pending {
+                            background-color: transparent;
+                            box-shadow: inset 1px 1px 2px var(--neu-shadow-dark), inset -1px -1px 2px var(--neu-shadow-light);
+                        }
+                        .v-stepper-neumorphic .v-step-line.completed {
+                            background-color: var(--accent-9);
+                            box-shadow: 0 0 4px var(--accent-9);
+                        }
+                    ` } }),
+                React.createElement(p$8, { className: `v-stepper-${design}`, style: { paddingBottom: '60px', paddingTop: '10px' } },
+                    React.createElement(p$5, { align: "center", width: "100%" }, steps.map((step, index) => {
+                        const isCompleted = index < activeIndex;
+                        const isActive = index === activeIndex;
+                        const statusClass = isActive ? 'active' : isCompleted ? 'completed' : 'pending';
+                        return (React.createElement(React.Fragment, { key: step.id },
+                            React.createElement(p$8, { style: { position: 'relative', display: 'flex', flexDirection: 'column', alignItems: 'center' } },
+                                React.createElement("div", { className: `v-step-circle ${statusClass}`, onClick: () => setActiveStepId(step.id) }, isCompleted ? (React.createElement(Icon, { name: "check", width: "20", height: "20" })) : (step.icon ? step.icon : React.createElement("span", null, index + 1))),
+                                React.createElement(p$8, { style: {
+                                        position: 'absolute',
+                                        top: '100%',
+                                        marginTop: '12px',
+                                        width: '120px',
+                                        textAlign: 'center',
+                                        cursor: 'pointer'
+                                    }, onClick: () => setActiveStepId(step.id) },
+                                    React.createElement(p$d, { size: "2", weight: isActive ? "bold" : "regular", style: { color: isActive ? 'var(--gray-12)' : 'var(--gray-10)', display: 'block', lineHeight: 1.2 } }, step.title),
+                                    step.description && (React.createElement(p$d, { size: "1", color: "gray", style: { display: 'block', marginTop: '4px' } }, step.description)))),
+                            index < steps.length - 1 && (React.createElement("div", { className: `v-step-line ${isCompleted ? 'completed' : 'pending'}` }))));
+                    }))),
+                React.createElement(p$8, { style: { position: 'relative' } }, children)))));
+};
+const CodexItem = ({ stepId, children, }) => {
+    const { activeStepId } = React.useContext(CodexContext);
+    if (activeStepId !== stepId)
+        return null;
+    return (React.createElement("div", { className: "v-step-content-animation", style: { width: '100%' } }, children));
+};
+
 /** A special constant with type `never` */
 function $constructor(name, initializer, params) {
     function init(inst, def) {
@@ -52550,6 +53254,7 @@ const NestedQuerySchema = object({
     inputAlias: string(),
     inputLabel: string(),
     inputPlaceholder: string(),
+    defaultValue: any().optional(),
     newRow: boolean(),
     inputWidth: number(),
     isRequired: boolean(),
@@ -52559,7 +53264,8 @@ const NestedQuerySchema = object({
     queryResponse: any().nullable(),
     inputOptions: array(InputOptionSchema).nullable().optional(),
     toggledInput: any().nullable().optional(),
-    toggleTrigger: any().nullable().optional()
+    toggleTrigger: any().nullable().optional(),
+    errorText: string().optional()
 });
 const QuerySchema = object({
     queryId: number().or(uuid()),
@@ -52567,6 +53273,7 @@ const QuerySchema = object({
     inputAlias: string(),
     inputLabel: string(),
     inputPlaceholder: string(),
+    defaultValue: any().optional(),
     minValue: number().optional(),
     maxValue: number().optional(),
     stepValue: number().or(float64()).optional(),
@@ -52579,7 +53286,8 @@ const QuerySchema = object({
     queryResponse: any().nullable(),
     inputOptions: array(InputOptionSchema).optional(),
     toggledInput: NestedQuerySchema.nullable().optional(),
-    toggleTrigger: any().nullable().optional()
+    toggleTrigger: any().nullable().optional(),
+    errorText: string().optional()
 });
 const SectionSchema = object({
     sectionId: number(),
@@ -52607,10 +53315,14 @@ const parseUuidFormat = (input) => {
     return numbers;
 };
 
+exports.Accordion = Accordion;
+exports.AccordionItem = AccordionItem;
 exports.AvatarInput = AvatarInput;
 exports.ButtonInput = ButtonInput;
 exports.CURRENCIES = CURRENCIES;
 exports.CheckboxGroupInput = CheckboxGroupInput;
+exports.Codex = Codex;
+exports.CodexItem = CodexItem;
 exports.Column = Column;
 exports.ConditionalTrigger = ConditionalTrigger;
 exports.Container = Container;
@@ -52642,5 +53354,6 @@ exports.Toggle = Toggle;
 exports.UUIDInput = UUIDInput;
 exports.parseUuidFormat = parseUuidFormat;
 exports.primeMatrix = primeMatrix;
+exports.useStepper = useStepper;
 exports.vectorSigma = vectorSigma;
 exports.xFormSchema = xFormSchema;