dialkit 0.2.0 → 0.2.2

package/dist/index.d.ts

@@ -33,10 +33,10 @@ type TextConfig = {
 };
 type DialValue = number | boolean | string | SpringConfig | ActionConfig | SelectConfig | ColorConfig | TextConfig;
 type DialConfig = {
-    [key: string]: DialValue | [number, number, number] | DialConfig;
+    [key: string]: DialValue | [number, number, number, number?] | DialConfig;
 };
 type ResolvedValues<T extends DialConfig> = {
-    [K in keyof T]: T[K] extends [number, number, number] ? number : T[K] extends SpringConfig ? SpringConfig : T[K] extends SelectConfig ? string : T[K] extends ColorConfig ? string : T[K] extends TextConfig ? string : T[K] extends DialConfig ? ResolvedValues<T[K]> : T[K];
+    [K in keyof T]: T[K] extends [number, number, number, number?] ? number : T[K] extends SpringConfig ? SpringConfig : T[K] extends SelectConfig ? string : T[K] extends ColorConfig ? string : T[K] extends TextConfig ? string : T[K] extends DialConfig ? ResolvedValues<T[K]> : T[K];
 };
 type ControlMeta = {
     type: 'slider' | 'toggle' | 'spring' | 'folder' | 'action' | 'select' | 'color' | 'text';
@@ -46,6 +46,7 @@ type ControlMeta = {
     max?: number;
     step?: number;
     children?: ControlMeta[];
+    defaultOpen?: boolean;
     options?: (string | {
         value: string;
         label: string;

package/dist/index.js

@@ -160,16 +160,17 @@ var DialStoreClass = class {
   parseConfig(config, prefix) {
     const controls = [];
     for (const [key, value] of Object.entries(config)) {
+      if (key === "_collapsed") continue;
       const path = prefix ? `${prefix}.${key}` : key;
       const label = this.formatLabel(key);
-      if (Array.isArray(value) && value.length === 3 && typeof value[0] === "number") {
+      if (Array.isArray(value) && value.length <= 4 && typeof value[0] === "number") {
         controls.push({
           type: "slider",
           path,
           label,
           min: value[1],
           max: value[2],
-          step: this.inferStep(value[1], value[2])
+          step: value[3] ?? this.inferStep(value[1], value[2])
         });
       } else if (typeof value === "number") {
         const { min, max, step } = this.inferRange(value);
@@ -193,11 +194,14 @@ var DialStoreClass = class {
           controls.push({ type: "text", path, label });
         }
       } else if (typeof value === "object" && value !== null) {
+        const folderConfig = value;
+        const defaultOpen = "_collapsed" in folderConfig ? !folderConfig._collapsed : true;
         controls.push({
           type: "folder",
           path,
           label,
-          children: this.parseConfig(value, path)
+          defaultOpen,
+          children: this.parseConfig(folderConfig, path)
         });
       }
     }
@@ -206,8 +210,9 @@ var DialStoreClass = class {
   flattenValues(config, prefix) {
     const values = {};
     for (const [key, value] of Object.entries(config)) {
+      if (key === "_collapsed") continue;
       const path = prefix ? `${prefix}.${key}` : key;
-      if (Array.isArray(value) && value.length === 3 && typeof value[0] === "number") {
+      if (Array.isArray(value) && value.length <= 4 && typeof value[0] === "number") {
         values[path] = value[0];
       } else if (typeof value === "number" || typeof value === "boolean" || typeof value === "string") {
         values[path] = value;
@@ -299,8 +304,9 @@ function useDialKit(name, config, options) {
 function buildResolvedValues(config, flatValues, prefix) {
   const result = {};
   for (const [key, configValue] of Object.entries(config)) {
+    if (key === "_collapsed") continue;
     const path = prefix ? `${prefix}.${key}` : key;
-    if (Array.isArray(configValue) && configValue.length === 3 && typeof configValue[0] === "number") {
+    if (Array.isArray(configValue) && configValue.length <= 4 && typeof configValue[0] === "number") {
       result[key] = flatValues[path] ?? configValue[0];
     } else if (typeof configValue === "number" || typeof configValue === "boolean" || typeof configValue === "string") {
       result[key] = flatValues[path] ?? configValue;
@@ -346,7 +352,7 @@ function getFirstOptionValue(options) {
 
 // src/components/DialRoot.tsx
 import { useEffect as useEffect7, useState as useState8 } from "react";
-import { createPortal as createPortal2 } from "react-dom";
+import { createPortal as createPortal3 } from "react-dom";
 
 // src/components/Panel.tsx
 import { useState as useState7, useSyncExternalStore as useSyncExternalStore3 } from "react";
@@ -361,8 +367,6 @@ function Folder({ title, children, defaultOpen = true, isRoot = false, onOpenCha
   const [isCollapsed, setIsCollapsed] = useState(!defaultOpen);
   const contentRef = useRef2(null);
   const [contentHeight, setContentHeight] = useState(void 0);
-  const iconTransition = { type: "spring", visualDuration: 0.4, bounce: 0.1 };
-  const panelTransition = { type: "spring", visualDuration: 0.4, bounce: 0.2 };
   useEffect2(() => {
     const el = contentRef.current;
     if (!el) return;
@@ -375,25 +379,20 @@ function Folder({ title, children, defaultOpen = true, isRoot = false, onOpenCha
     ro.observe(el);
     return () => ro.disconnect();
   }, [isOpen]);
+  const handleToggle = () => {
+    const next = !isOpen;
+    setIsOpen(next);
+    if (next) {
+      setIsCollapsed(false);
+    } else {
+      setIsCollapsed(true);
+    }
+    onOpenChange?.(next);
+  };
   const folderContent = /* @__PURE__ */ jsxs("div", { ref: isRoot ? contentRef : void 0, className: `dialkit-folder ${isRoot ? "dialkit-folder-root" : ""}`, children: [
-    /* @__PURE__ */ jsxs("div", { className: `dialkit-folder-header ${isRoot ? "dialkit-panel-header" : ""}`, onClick: () => {
-      const next = !isOpen;
-      setIsOpen(next);
-      if (next) setIsCollapsed(false);
-      onOpenChange?.(next);
-    }, children: [
+    /* @__PURE__ */ jsxs("div", { className: `dialkit-folder-header ${isRoot ? "dialkit-panel-header" : ""}`, onClick: handleToggle, children: [
       /* @__PURE__ */ jsxs("div", { className: "dialkit-folder-header-top", children: [
-        isRoot ? /* @__PURE__ */ jsx(AnimatePresence, { initial: false, mode: "popLayout", children: isOpen && /* @__PURE__ */ jsx(
-          motion.div,
-          {
-            className: "dialkit-folder-title-row",
-            initial: { opacity: 1 },
-            animate: { opacity: 1 },
-            exit: { opacity: 0 },
-            transition: { duration: 0.15 },
-            children: /* @__PURE__ */ jsx("span", { className: "dialkit-folder-title dialkit-folder-title-root", children: title })
-          }
-        ) }) : /* @__PURE__ */ jsx("div", { className: "dialkit-folder-title-row", children: /* @__PURE__ */ jsx("span", { className: "dialkit-folder-title", children: title }) }),
+        isRoot ? isOpen && /* @__PURE__ */ jsx("div", { className: "dialkit-folder-title-row", children: /* @__PURE__ */ jsx("span", { className: "dialkit-folder-title dialkit-folder-title-root", children: title }) }) : /* @__PURE__ */ jsx("div", { className: "dialkit-folder-title-row", children: /* @__PURE__ */ jsx("span", { className: "dialkit-folder-title", children: title }) }),
         isRoot ? (
           // Root panel icon — fixed position, container morphs around it
           /* @__PURE__ */ jsxs(
@@ -430,53 +429,32 @@ function Folder({ title, children, defaultOpen = true, isRoot = false, onOpenCha
           )
         )
       ] }),
-      isRoot && toolbar && /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: isOpen && /* @__PURE__ */ jsx(
-        motion.div,
-        {
-          initial: { opacity: 1 },
-          animate: { opacity: 1 },
-          exit: { opacity: 0 },
-          transition: { duration: 0.15 },
-          children: /* @__PURE__ */ jsx("div", { className: "dialkit-panel-toolbar", onClick: (e) => e.stopPropagation(), children: toolbar })
-        }
-      ) })
+      isRoot && toolbar && isOpen && /* @__PURE__ */ jsx("div", { className: "dialkit-panel-toolbar", onClick: (e) => e.stopPropagation(), children: toolbar })
     ] }),
     /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: isOpen && /* @__PURE__ */ jsx(
       motion.div,
       {
         className: "dialkit-folder-content",
-        initial: isRoot ? { opacity: 1 } : { height: 0, opacity: 0 },
-        animate: isRoot ? { opacity: 1 } : { height: "auto", opacity: 1 },
-        exit: isRoot ? { opacity: 0 } : { height: 0, opacity: 0 },
-        transition: isRoot ? { duration: 0.15 } : { type: "spring", visualDuration: 0.35, bounce: 0.1 },
-        style: isRoot ? void 0 : { overflow: "hidden" },
+        initial: isRoot ? void 0 : { height: 0, opacity: 0 },
+        animate: isRoot ? void 0 : { height: "auto", opacity: 1 },
+        exit: isRoot ? void 0 : { height: 0, opacity: 0 },
+        transition: isRoot ? void 0 : { type: "spring", visualDuration: 0.35, bounce: 0.1 },
+        style: isRoot ? void 0 : { clipPath: "inset(0 -20px)" },
         children: /* @__PURE__ */ jsx("div", { className: "dialkit-folder-inner", children })
       }
     ) })
   ] });
   if (isRoot) {
+    const panelStyle = isOpen ? { width: 280, height: contentHeight !== void 0 ? contentHeight + 24 : "auto", borderRadius: 14, boxShadow: "0 8px 32px rgba(0, 0, 0, 0.5)", cursor: void 0 } : { width: 42, height: 42, borderRadius: 21, boxShadow: "0 4px 16px rgba(0, 0, 0, 0.25)", overflow: "hidden", cursor: "pointer" };
     return /* @__PURE__ */ jsx(
       motion.div,
       {
         className: "dialkit-panel-inner",
-        initial: false,
-        animate: {
-          width: isOpen ? 280 : 42,
-          height: isOpen ? contentHeight !== void 0 ? contentHeight + 24 : "auto" : 42,
-          borderRadius: isOpen ? 14 : 21,
-          boxShadow: isOpen ? "0 8px 32px rgba(0, 0, 0, 0.5)" : "0 4px 16px rgba(0, 0, 0, 0.25)"
-        },
-        transition: panelTransition,
-        style: { overflow: isOpen ? void 0 : "hidden", cursor: isOpen ? void 0 : "pointer" },
-        onClick: !isOpen ? () => {
-          setIsOpen(true);
-          setIsCollapsed(false);
-          onOpenChange?.(true);
-        } : void 0,
-        onAnimationComplete: () => {
-          if (!isOpen) setIsCollapsed(true);
-        },
+        style: panelStyle,
+        onClick: !isOpen ? handleToggle : void 0,
         "data-collapsed": isCollapsed,
+        whileTap: !isOpen ? { scale: 0.9 } : void 0,
+        transition: { type: "spring", visualDuration: 0.15, bounce: 0.3 },
         children: folderContent
       }
     );
@@ -492,10 +470,14 @@ var CLICK_THRESHOLD = 3;
 var DEAD_ZONE = 32;
 var MAX_CURSOR_RANGE = 200;
 var MAX_STRETCH = 8;
+function decimalsForStep(step) {
+  const s = step.toString();
+  const dot = s.indexOf(".");
+  return dot === -1 ? 0 : s.length - dot - 1;
+}
 function roundValue(val, step) {
-  const decimals = step >= 1 ? 0 : 2;
-  const factor = 10 ** decimals;
-  return Math.round(val * factor) / factor;
+  const raw = Math.round(val / step) * step;
+  return parseFloat(raw.toFixed(decimalsForStep(step)));
 }
 function snapToDecile(rawValue, min, max) {
   const normalized = (rawValue - min) / (max - min);
@@ -643,7 +625,8 @@ function Slider({
       if (!isInteracting) return;
       if (isClickRef.current) {
         const rawValue = positionToValue(e.clientX);
-        const snappedValue = snapToDecile(rawValue, min, max);
+        const discreteSteps2 = (max - min) / step;
+        const snappedValue = discreteSteps2 <= 10 ? Math.max(min, Math.min(max, min + Math.round((rawValue - min) / step) * step)) : snapToDecile(rawValue, min, max);
         const newPct = percentFromValue(snappedValue);
         if (animRef.current) {
           animRef.current.stop();
@@ -723,7 +706,7 @@ function Slider({
       e.stopPropagation();
       e.preventDefault();
       setShowInput(true);
-      setInputValue(step >= 1 ? value.toFixed(0) : value.toFixed(2));
+      setInputValue(value.toFixed(decimalsForStep(step)));
     }
   };
   const handleInputKeyDown = (e) => {
@@ -737,7 +720,7 @@ function Slider({
   const handleInputBlur = () => {
     handleInputSubmit();
   };
-  const displayValue = step >= 1 ? value.toFixed(0) : value.toFixed(2);
+  const displayValue = value.toFixed(decimalsForStep(step));
   const HANDLE_BUFFER = 8;
   const LABEL_CSS_LEFT = 10;
   const VALUE_CSS_RIGHT = 10;
@@ -755,7 +738,18 @@ function Slider({
   const valueDodge = percentage < leftThreshold || percentage > rightThreshold;
   const handleOpacity = !isActive ? 0 : valueDodge ? 0.1 : isDragging ? 0.9 : 0.5;
   const fillBackground = isActive ? "rgba(255, 255, 255, 0.15)" : "rgba(255, 255, 255, 0.11)";
-  const hashMarks = Array.from({ length: 9 }, (_, i) => {
+  const discreteSteps = (max - min) / step;
+  const hashMarks = discreteSteps <= 10 ? Array.from({ length: discreteSteps - 1 }, (_, i) => {
+    const pct = (i + 1) * step / (max - min) * 100;
+    return /* @__PURE__ */ jsx2(
+      "div",
+      {
+        className: "dialkit-slider-hashmark",
+        style: { left: `${pct}%` }
+      },
+      i
+    );
+  }) : Array.from({ length: 9 }, (_, i) => {
     const pct = (i + 1) * 10;
     return /* @__PURE__ */ jsx2(
       "div",
@@ -1144,33 +1138,64 @@ function TextControl({ label, value, onChange, placeholder }) {
 }
 
 // src/components/SelectControl.tsx
-import { useState as useState4, useRef as useRef5, useEffect as useEffect4 } from "react";
+import { useState as useState4, useRef as useRef5, useEffect as useEffect4, useCallback as useCallback2 } from "react";
+import { createPortal } from "react-dom";
 import { motion as motion4, AnimatePresence as AnimatePresence2 } from "motion/react";
 import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
+function toTitleCase(s) {
+  return s.replace(/\b\w/g, (c) => c.toUpperCase());
+}
 function normalizeOptions(options) {
   return options.map(
-    (opt) => typeof opt === "string" ? { value: opt, label: opt } : opt
+    (opt) => typeof opt === "string" ? { value: opt, label: toTitleCase(opt) } : opt
   );
 }
 function SelectControl({ label, value, options, onChange }) {
   const [isOpen, setIsOpen] = useState4(false);
-  const containerRef = useRef5(null);
+  const triggerRef = useRef5(null);
+  const dropdownRef = useRef5(null);
+  const [portalTarget, setPortalTarget] = useState4(null);
+  const [pos, setPos] = useState4(null);
   const normalized = normalizeOptions(options);
   const selectedOption = normalized.find((o) => o.value === value);
+  const updatePos = useCallback2(() => {
+    const el = triggerRef.current;
+    if (!el) return;
+    const rect = el.getBoundingClientRect();
+    const dropdownHeight = 8 + normalized.length * 36;
+    const spaceBelow = window.innerHeight - rect.bottom - 4;
+    const above = spaceBelow < dropdownHeight && rect.top > spaceBelow;
+    setPos({
+      top: above ? rect.top - 4 : rect.bottom + 4,
+      left: rect.left,
+      width: rect.width,
+      above
+    });
+  }, [normalized.length]);
+  useEffect4(() => {
+    const root = triggerRef.current?.closest(".dialkit-root");
+    setPortalTarget(root ?? document.body);
+  }, []);
+  useEffect4(() => {
+    if (!isOpen) return;
+    updatePos();
+  }, [isOpen, updatePos]);
   useEffect4(() => {
     if (!isOpen) return;
     const handleClick = (e) => {
-      if (containerRef.current && !containerRef.current.contains(e.target)) {
+      const target = e.target;
+      if (triggerRef.current && !triggerRef.current.contains(target) && dropdownRef.current && !dropdownRef.current.contains(target)) {
         setIsOpen(false);
       }
     };
     document.addEventListener("mousedown", handleClick);
     return () => document.removeEventListener("mousedown", handleClick);
   }, [isOpen]);
-  return /* @__PURE__ */ jsxs8("div", { ref: containerRef, className: "dialkit-select-row", children: [
+  return /* @__PURE__ */ jsxs8("div", { className: "dialkit-select-row", children: [
     /* @__PURE__ */ jsxs8(
       "button",
       {
+        ref: triggerRef,
         className: "dialkit-select-trigger",
         onClick: () => setIsOpen(!isOpen),
         "data-open": String(isOpen),
@@ -1197,29 +1222,39 @@ function SelectControl({ label, value, options, onChange }) {
         ]
       }
     ),
-    /* @__PURE__ */ jsx8(AnimatePresence2, { children: isOpen && /* @__PURE__ */ jsx8(
-      motion4.div,
-      {
-        className: "dialkit-select-dropdown",
-        initial: { opacity: 0, y: -8, scale: 0.95 },
-        animate: { opacity: 1, y: 0, scale: 1 },
-        exit: { opacity: 0, y: -8, scale: 0.95 },
-        transition: { type: "spring", visualDuration: 0.15, bounce: 0 },
-        children: normalized.map((option) => /* @__PURE__ */ jsx8(
-          "button",
-          {
-            className: "dialkit-select-option",
-            "data-selected": String(option.value === value),
-            onClick: () => {
-              onChange(option.value);
-              setIsOpen(false);
-            },
-            children: option.label
+    portalTarget && createPortal(
+      /* @__PURE__ */ jsx8(AnimatePresence2, { children: isOpen && pos && /* @__PURE__ */ jsx8(
+        motion4.div,
+        {
+          ref: dropdownRef,
+          className: "dialkit-select-dropdown",
+          initial: { opacity: 0, y: pos.above ? 8 : -8, scale: 0.95 },
+          animate: { opacity: 1, y: 0, scale: 1 },
+          exit: { opacity: 0, y: pos.above ? 8 : -8, scale: 0.95 },
+          transition: { type: "spring", visualDuration: 0.15, bounce: 0 },
+          style: {
+            position: "fixed",
+            left: pos.left,
+            width: pos.width,
+            ...pos.above ? { bottom: window.innerHeight - pos.top, transformOrigin: "bottom" } : { top: pos.top, transformOrigin: "top" }
           },
-          option.value
-        ))
-      }
-    ) })
+          children: normalized.map((option) => /* @__PURE__ */ jsx8(
+            "button",
+            {
+              className: "dialkit-select-option",
+              "data-selected": String(option.value === value),
+              onClick: () => {
+                onChange(option.value);
+                setIsOpen(false);
+              },
+              children: option.label
+            },
+            option.value
+          ))
+        }
+      ) }),
+      portalTarget
+    )
   ] });
 }
 
@@ -1302,8 +1337,8 @@ function expandShorthandHex(hex) {
 }
 
 // src/components/PresetManager.tsx
-import { useState as useState6, useRef as useRef7, useEffect as useEffect6, useCallback as useCallback2 } from "react";
-import { createPortal } from "react-dom";
+import { useState as useState6, useRef as useRef7, useEffect as useEffect6, useCallback as useCallback3 } from "react";
+import { createPortal as createPortal2 } from "react-dom";
 import { motion as motion5, AnimatePresence as AnimatePresence3 } from "motion/react";
 import { jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
 function PresetManager({ panelId, presets, activePresetId, onAdd }) {
@@ -1313,7 +1348,7 @@ function PresetManager({ panelId, presets, activePresetId, onAdd }) {
   const [pos, setPos] = useState6({ top: 0, left: 0, width: 0 });
   const hasPresets = presets.length > 0;
   const activePreset = presets.find((p) => p.id === activePresetId);
-  const open = useCallback2(() => {
+  const open = useCallback3(() => {
     if (!hasPresets) return;
     const rect = triggerRef.current?.getBoundingClientRect();
     if (rect) {
@@ -1321,8 +1356,8 @@ function PresetManager({ panelId, presets, activePresetId, onAdd }) {
     }
     setIsOpen(true);
   }, [hasPresets]);
-  const close = useCallback2(() => setIsOpen(false), []);
-  const toggle = useCallback2(() => {
+  const close = useCallback3(() => setIsOpen(false), []);
+  const toggle = useCallback3(() => {
     if (isOpen) close();
     else open();
   }, [isOpen, open, close]);
@@ -1370,7 +1405,7 @@ function PresetManager({ panelId, presets, activePresetId, onAdd }) {
               strokeWidth: "2.5",
               strokeLinecap: "round",
               strokeLinejoin: "round",
-              animate: { rotate: isOpen ? 180 : 0 },
+              animate: { rotate: isOpen ? 180 : 0, opacity: hasPresets ? 0.6 : 0.25 },
               transition: { type: "spring", visualDuration: 0.2, bounce: 0.15 },
               children: /* @__PURE__ */ jsx10("path", { d: "M6 9.5L12 15.5L18 9.5" })
             }
@@ -1378,12 +1413,12 @@ function PresetManager({ panelId, presets, activePresetId, onAdd }) {
         ]
       }
     ),
-    createPortal(
+    createPortal2(
       /* @__PURE__ */ jsx10(AnimatePresence3, { children: isOpen && /* @__PURE__ */ jsxs10(
         motion5.div,
         {
           ref: dropdownRef,
-          className: "dialkit-preset-dropdown",
+          className: "dialkit-root dialkit-preset-dropdown",
           style: { position: "fixed", top: pos.top, left: pos.left, minWidth: pos.width },
           initial: { opacity: 0, y: 4, scale: 0.97 },
           animate: { opacity: 1, y: 0, scale: 1 },
@@ -1502,7 +1537,7 @@ Apply these values as the new defaults in the useDialKit call.`;
           control.path
         );
       case "folder":
-        return /* @__PURE__ */ jsx11(Folder, { title: control.label, children: control.children?.map(renderControl) }, control.path);
+        return /* @__PURE__ */ jsx11(Folder, { title: control.label, defaultOpen: control.defaultOpen ?? true, children: control.children?.map(renderControl) }, control.path);
       case "text":
         return /* @__PURE__ */ jsx11(
           TextControl,
@@ -1566,11 +1601,13 @@ Apply these values as the new defaults in the useDialKit call.`;
   const iconTransition = { type: "spring", visualDuration: 0.4, bounce: 0.1 };
   const toolbar = /* @__PURE__ */ jsxs11(Fragment2, { children: [
     /* @__PURE__ */ jsx11(
-      "button",
+      motion6.button,
       {
         className: "dialkit-toolbar-add",
         onClick: handleAddPreset,
         title: "Add preset",
+        whileTap: { scale: 0.9 },
+        transition: { type: "spring", visualDuration: 0.15, bounce: 0.3 },
         children: /* @__PURE__ */ jsxs11("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
           /* @__PURE__ */ jsx11("path", { d: "M4 6H20" }),
           /* @__PURE__ */ jsx11("path", { d: "M4 12H10" }),
@@ -1590,13 +1627,15 @@ Apply these values as the new defaults in the useDialKit call.`;
       }
     ),
     /* @__PURE__ */ jsxs11(
-      "button",
+      motion6.button,
       {
         className: "dialkit-toolbar-copy",
         onClick: handleCopy,
         title: "Copy parameters",
+        whileTap: { scale: 0.95 },
+        transition: { type: "spring", visualDuration: 0.15, bounce: 0.3 },
         children: [
-          /* @__PURE__ */ jsx11("span", { className: "dialkit-toolbar-copy-icon-wrap", children: /* @__PURE__ */ jsx11(AnimatePresence4, { mode: "popLayout", children: copied ? /* @__PURE__ */ jsx11(
+          /* @__PURE__ */ jsx11("span", { className: "dialkit-toolbar-copy-icon-wrap", children: /* @__PURE__ */ jsx11(AnimatePresence4, { initial: false, mode: "popLayout", children: copied ? /* @__PURE__ */ jsx11(
             motion6.svg,
             {
               className: "dialkit-toolbar-copy-icon",
@@ -1659,7 +1698,7 @@ function DialRoot({ position = "top-right" }) {
     return null;
   }
   const content = /* @__PURE__ */ jsx12("div", { className: "dialkit-root", children: /* @__PURE__ */ jsx12("div", { className: "dialkit-panel", "data-position": position, children: panels.map((panel) => /* @__PURE__ */ jsx12(Panel, { panel }, panel.id)) }) });
-  return createPortal2(content, document.body);
+  return createPortal3(content, document.body);
 }
 
 // src/components/ButtonGroup.tsx