@szum-tech/design-system 3.13.0 → 3.15.0

package/dist/chunk-4IGU5SVP.js

@@ -0,0 +1,54 @@
+import * as React from 'react';
+
+// src/hooks/use-validation-log.tsx
+function useValidationLog({ check, scope, message }) {
+  React.useEffect(() => {
+    if (!check) {
+      console.error(
+        `%c[Szum Tech-Design System]%c
+ ${scope}%c
+ ${message}`,
+        "color: #ef4444; font-weight: bold;",
+        "color: #3b82f6; font-weight: bold;",
+        "color: #f59e0b;"
+      );
+    }
+  }, [check, scope, message]);
+}
+function setRef(ref, value) {
+  if (typeof ref === "function") {
+    return ref(value);
+  }
+  if (ref !== null && ref !== void 0) {
+    ref.current = value;
+  }
+}
+function composeRefs(...refs) {
+  return (node) => {
+    let hasCleanup = false;
+    const cleanups = refs.map((ref) => {
+      const cleanup = setRef(ref, node);
+      if (!hasCleanup && typeof cleanup === "function") {
+        hasCleanup = true;
+      }
+      return cleanup;
+    });
+    if (hasCleanup) {
+      return () => {
+        for (let i = 0; i < cleanups.length; i++) {
+          const cleanup = cleanups[i];
+          if (typeof cleanup === "function") {
+            cleanup();
+          } else {
+            setRef(refs[i], null);
+          }
+        }
+      };
+    }
+  };
+}
+function useComposedRefs(...refs) {
+  return React.useCallback(composeRefs(...refs), refs);
+}
+
+export { composeRefs, useComposedRefs, useValidationLog };

package/dist/{chunk-XJZOANXX.cjs → chunk-6HX7ETL3.cjs}

@@ -50,7 +50,7 @@ function Select({
         "aria-invalid": triggerProps["aria-invalid"] || invalid ? true : void 0,
         "data-size": size,
         className: chunkH2BWO3SI_cjs.cn(
-          "border-input dark:bg-input/30 dark:hover:bg-input/50 flex w-full items-center justify-between gap-2 rounded border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none",
+          "border-input dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none",
           "*:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2",
           "disabled:cursor-not-allowed disabled:opacity-50",
           "aria-invalid:ring-error/20 dark:aria-invalid:ring-error/40 aria-invalid:border-error",

package/dist/chunk-B4M7Q5KX.cjs

@@ -0,0 +1,25 @@
+'use strict';
+
+var chunkH2BWO3SI_cjs = require('./chunk-H2BWO3SI.cjs');
+var jsxRuntime = require('react/jsx-runtime');
+
+function Input({ className, type, invalid = false, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "input",
+    {
+      type,
+      "data-slot": "input",
+      "aria-invalid": props["aria-invalid"] || invalid,
+      className: chunkH2BWO3SI_cjs.cn(
+        "dark:bg-input/30 border-input file:text-foreground placeholder:text-muted-foreground h-8 w-full min-w-0 rounded border bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-3 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 md:text-sm",
+        "aria-invalid:ring-error/20 dark:aria-invalid:ring-error/40 aria-invalid:border-error dark:aria-invalid:border-error/50",
+        "focus-visible:border-ring focus-visible:ring-ring/50",
+        "disabled:bg-input/50 dark:disabled:bg-input/80",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+exports.Input = Input;

package/dist/chunk-BUJO4FB6.js

@@ -0,0 +1,252 @@
+import { cn } from './chunk-ZD2QRAOX.js';
+import * as React2 from 'react';
+import { Slot } from 'radix-ui';
+import { createPortal } from 'react-dom';
+import { defaultDropAnimationSideEffects, useSensors, useSensor, MouseSensor, TouchSensor, KeyboardSensor, DndContext, MeasuringStrategy, DragOverlay } from '@dnd-kit/core';
+import { sortableKeyboardCoordinates, arrayMove, SortableContext, useSortable, verticalListSortingStrategy, rectSortingStrategy, defaultAnimateLayoutChanges } from '@dnd-kit/sortable';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { CSS } from '@dnd-kit/utilities';
+
+var SORTABLE_ROOT_NAME = "Sortable";
+var SORTABLE_ITEM_NAME = "SortableItem";
+var SORTABLE_ITEM_HANDLE_NAME = "SortableItemHandle";
+var SORTABLE_OVERLAY_NAME = "SortableOverlay";
+var animateLayoutChanges = (args) => defaultAnimateLayoutChanges({ ...args, wasDragging: true });
+var dropAnimationConfig = {
+  sideEffects: defaultDropAnimationSideEffects({
+    styles: {
+      active: {
+        opacity: "0.4"
+      }
+    }
+  })
+};
+var SortableItemContext = React2.createContext(null);
+function useSortableItemContext(consumerName) {
+  const context = React2.useContext(SortableItemContext);
+  if (!context) {
+    throw new Error(`\`${consumerName}\` must be used within \`${SORTABLE_ITEM_NAME}\``);
+  }
+  return context;
+}
+var IsOverlayContext = React2.createContext(false);
+var SortableInternalContext = React2.createContext(null);
+function useSortableInternalContext(consumerName) {
+  const context = React2.useContext(SortableInternalContext);
+  if (!context) {
+    throw new Error(`\`${consumerName}\` must be used within \`${SORTABLE_ROOT_NAME}\``);
+  }
+  return context;
+}
+function Sortable({
+  value,
+  onValueChange,
+  getItemValue,
+  className,
+  asChild = false,
+  onMove,
+  strategy = "vertical",
+  onDragStart,
+  onDragEnd,
+  modifiers,
+  children,
+  ...props
+}) {
+  const [activeId, setActiveId] = React2.useState(null);
+  const [mounted, setMounted] = React2.useState(false);
+  React2.useLayoutEffect(() => setMounted(true), []);
+  const sensors = useSensors(
+    useSensor(MouseSensor, {
+      activationConstraint: {
+        distance: 10
+      }
+    }),
+    useSensor(TouchSensor, {
+      activationConstraint: {
+        delay: 250,
+        tolerance: 5
+      }
+    }),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates
+    })
+  );
+  const handleDragStart = React2.useCallback(
+    (event) => {
+      setActiveId(event.active.id);
+      onDragStart?.(event);
+    },
+    [onDragStart]
+  );
+  const handleDragEnd = React2.useCallback(
+    (event) => {
+      const { active, over } = event;
+      setActiveId(null);
+      onDragEnd?.(event);
+      if (!over) return;
+      const activeIndex = value.findIndex((item) => getItemValue(item) === active.id);
+      const overIndex = value.findIndex((item) => getItemValue(item) === over.id);
+      if (activeIndex !== overIndex) {
+        if (onMove) {
+          onMove({ event, activeIndex, overIndex });
+        } else {
+          const newValue = arrayMove(value, activeIndex, overIndex);
+          onValueChange(newValue);
+        }
+      }
+    },
+    [value, getItemValue, onValueChange, onMove, onDragEnd]
+  );
+  const handleDragCancel = React2.useCallback(() => {
+    setActiveId(null);
+  }, []);
+  const getStrategy = () => {
+    switch (strategy) {
+      case "horizontal":
+        return rectSortingStrategy;
+      case "grid":
+        return rectSortingStrategy;
+      case "vertical":
+      default:
+        return verticalListSortingStrategy;
+    }
+  };
+  const itemIds = React2.useMemo(() => value.map(getItemValue), [value, getItemValue]);
+  const contextValue = React2.useMemo(() => ({ activeId, modifiers }), [activeId, modifiers]);
+  const overlayContent = React2.useMemo(() => {
+    if (!activeId) return null;
+    let result = null;
+    React2.Children.forEach(children, (child) => {
+      if (React2.isValidElement(child) && child.props.value === activeId) {
+        result = React2.cloneElement(child, {
+          ...child.props,
+          className: cn(child.props.className, "z-50")
+        });
+      }
+    });
+    return result;
+  }, [activeId, children]);
+  const Comp = asChild ? Slot.Root : "div";
+  return /* @__PURE__ */ jsx(SortableInternalContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs(
+    DndContext,
+    {
+      sensors,
+      modifiers,
+      measuring: {
+        droppable: {
+          strategy: MeasuringStrategy.Always
+        }
+      },
+      onDragStart: handleDragStart,
+      onDragEnd: handleDragEnd,
+      onDragCancel: handleDragCancel,
+      children: [
+        /* @__PURE__ */ jsx(SortableContext, { items: itemIds, strategy: getStrategy(), children: /* @__PURE__ */ jsx(
+          Comp,
+          {
+            "data-slot": "sortable",
+            "data-dragging": activeId !== null,
+            className: cn(activeId !== null && "cursor-grabbing!", className),
+            ...props,
+            children
+          }
+        ) }),
+        mounted && createPortal(
+          /* @__PURE__ */ jsx(
+            DragOverlay,
+            {
+              dropAnimation: dropAnimationConfig,
+              modifiers,
+              className: cn("z-50", activeId && "cursor-grabbing"),
+              children: /* @__PURE__ */ jsx(IsOverlayContext.Provider, { value: true, children: overlayContent })
+            }
+          ),
+          document.body
+        )
+      ]
+    }
+  ) });
+}
+function SortableItem({ value, className, asChild = false, disabled, children, ...props }) {
+  const isOverlay = React2.useContext(IsOverlayContext);
+  const {
+    setNodeRef,
+    transform,
+    transition,
+    attributes,
+    listeners,
+    isDragging: isSortableDragging
+  } = useSortable({
+    id: value,
+    disabled: disabled || isOverlay,
+    animateLayoutChanges
+  });
+  if (isOverlay) {
+    const Comp2 = asChild ? Slot.Root : "div";
+    return /* @__PURE__ */ jsx(SortableItemContext.Provider, { value: { listeners: void 0, isDragging: true, disabled: false }, children: /* @__PURE__ */ jsx(Comp2, { "data-slot": "sortable-item", "data-value": value, "data-dragging": true, className: cn(className), ...props, children }) });
+  }
+  const style = {
+    transition,
+    transform: CSS.Transform.toString(transform)
+  };
+  const Comp = asChild ? Slot.Root : "div";
+  return /* @__PURE__ */ jsx(SortableItemContext.Provider, { value: { listeners, isDragging: isSortableDragging, disabled }, children: /* @__PURE__ */ jsx(
+    Comp,
+    {
+      "data-slot": "sortable-item",
+      "data-value": value,
+      "data-dragging": isSortableDragging,
+      "data-disabled": disabled,
+      ref: setNodeRef,
+      style,
+      ...attributes,
+      className: cn(isSortableDragging && "z-50 opacity-50", disabled && "opacity-50", className),
+      ...props,
+      children
+    }
+  ) });
+}
+function SortableItemHandle({
+  className,
+  asChild = false,
+  cursor = true,
+  children,
+  ...props
+}) {
+  const { listeners, isDragging, disabled } = useSortableItemContext(SORTABLE_ITEM_HANDLE_NAME);
+  const Comp = asChild ? Slot.Root : "div";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      "data-slot": "sortable-item-handle",
+      "data-dragging": isDragging,
+      "data-disabled": disabled,
+      ...listeners,
+      className: cn(cursor && (isDragging ? "cursor-grabbing!" : "cursor-grab!"), className),
+      ...props,
+      children
+    }
+  );
+}
+function SortableOverlay({ children, className, ...props }) {
+  const { activeId, modifiers } = useSortableInternalContext(SORTABLE_OVERLAY_NAME);
+  const [mounted, setMounted] = React2.useState(false);
+  React2.useLayoutEffect(() => setMounted(true), []);
+  const content = activeId && children ? typeof children === "function" ? children({ value: activeId }) : children : null;
+  if (!mounted) return null;
+  return createPortal(
+    /* @__PURE__ */ jsx(
+      DragOverlay,
+      {
+        dropAnimation: dropAnimationConfig,
+        modifiers,
+        className: cn("z-50", activeId && "cursor-grabbing", className),
+        ...props,
+        children: /* @__PURE__ */ jsx(IsOverlayContext.Provider, { value: true, children: content })
+      }
+    ),
+    document.body
+  );
+}
+
+export { Sortable, SortableItem, SortableItemHandle, SortableOverlay, useSortableItemContext };

package/dist/{chunk-S2BCU6WG.cjs → chunk-CAIAZGSW.cjs}

@@ -1,6 +1,7 @@
 'use strict';
 
-var chunkXIQUR62A_cjs = require('./chunk-XIQUR62A.cjs');
+var chunkXY3ZNUWR_cjs = require('./chunk-XY3ZNUWR.cjs');
+var chunkN4TYSZSU_cjs = require('./chunk-N4TYSZSU.cjs');
 var React3 = require('react');
 var reactSlot = require('@radix-ui/react-slot');
 var jsxRuntime = require('react/jsx-runtime');
@@ -67,7 +68,7 @@ function MasonryViewport({ children, style, ref, ...props }) {
   const [layoutVersion, setLayoutVersion] = React3__namespace.useState(0);
   const rafId = React3__namespace.useRef(null);
   const [mounted, setMounted] = React3__namespace.useState(false);
-  chunkXIQUR62A_cjs.useIsomorphicLayoutEffect(() => {
+  chunkN4TYSZSU_cjs.useIsomorphicLayoutEffect(() => {
     setMounted(true);
   }, []);
   const validChildren = React3__namespace.Children.toArray(children).filter(
@@ -976,14 +977,14 @@ function Masonry(props) {
   const columnGap = gapValue.column;
   const rowGap = gapValue.row;
   const containerRef = React3__namespace.useRef(null);
-  const composedRef = chunkXIQUR62A_cjs.useComposedRefs(ref, containerRef);
+  const composedRef = chunkXY3ZNUWR_cjs.useComposedRefs(ref, containerRef);
   const size = useDebouncedWindowSize({
     containerRef,
     defaultWidth,
     defaultHeight
   });
   const [containerPosition, setContainerPosition] = React3__namespace.useState({ offset: 0, width: 0 });
-  chunkXIQUR62A_cjs.useIsomorphicLayoutEffect(() => {
+  chunkN4TYSZSU_cjs.useIsomorphicLayoutEffect(() => {
     if (!containerRef.current) return;
     let offset = 0;
     let container = containerRef.current;

package/dist/chunk-CL2C6STG.cjs

@@ -0,0 +1,278 @@
+'use strict';
+
+var chunkH2BWO3SI_cjs = require('./chunk-H2BWO3SI.cjs');
+var React2 = require('react');
+var radixUi = require('radix-ui');
+var reactDom = require('react-dom');
+var core = require('@dnd-kit/core');
+var sortable = require('@dnd-kit/sortable');
+var jsxRuntime = require('react/jsx-runtime');
+var utilities = require('@dnd-kit/utilities');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React2__namespace = /*#__PURE__*/_interopNamespace(React2);
+
+var SORTABLE_ROOT_NAME = "Sortable";
+var SORTABLE_ITEM_NAME = "SortableItem";
+var SORTABLE_ITEM_HANDLE_NAME = "SortableItemHandle";
+var SORTABLE_OVERLAY_NAME = "SortableOverlay";
+var animateLayoutChanges = (args) => sortable.defaultAnimateLayoutChanges({ ...args, wasDragging: true });
+var dropAnimationConfig = {
+  sideEffects: core.defaultDropAnimationSideEffects({
+    styles: {
+      active: {
+        opacity: "0.4"
+      }
+    }
+  })
+};
+var SortableItemContext = React2__namespace.createContext(null);
+function useSortableItemContext(consumerName) {
+  const context = React2__namespace.useContext(SortableItemContext);
+  if (!context) {
+    throw new Error(`\`${consumerName}\` must be used within \`${SORTABLE_ITEM_NAME}\``);
+  }
+  return context;
+}
+var IsOverlayContext = React2__namespace.createContext(false);
+var SortableInternalContext = React2__namespace.createContext(null);
+function useSortableInternalContext(consumerName) {
+  const context = React2__namespace.useContext(SortableInternalContext);
+  if (!context) {
+    throw new Error(`\`${consumerName}\` must be used within \`${SORTABLE_ROOT_NAME}\``);
+  }
+  return context;
+}
+function Sortable({
+  value,
+  onValueChange,
+  getItemValue,
+  className,
+  asChild = false,
+  onMove,
+  strategy = "vertical",
+  onDragStart,
+  onDragEnd,
+  modifiers,
+  children,
+  ...props
+}) {
+  const [activeId, setActiveId] = React2__namespace.useState(null);
+  const [mounted, setMounted] = React2__namespace.useState(false);
+  React2__namespace.useLayoutEffect(() => setMounted(true), []);
+  const sensors = core.useSensors(
+    core.useSensor(core.MouseSensor, {
+      activationConstraint: {
+        distance: 10
+      }
+    }),
+    core.useSensor(core.TouchSensor, {
+      activationConstraint: {
+        delay: 250,
+        tolerance: 5
+      }
+    }),
+    core.useSensor(core.KeyboardSensor, {
+      coordinateGetter: sortable.sortableKeyboardCoordinates
+    })
+  );
+  const handleDragStart = React2__namespace.useCallback(
+    (event) => {
+      setActiveId(event.active.id);
+      onDragStart?.(event);
+    },
+    [onDragStart]
+  );
+  const handleDragEnd = React2__namespace.useCallback(
+    (event) => {
+      const { active, over } = event;
+      setActiveId(null);
+      onDragEnd?.(event);
+      if (!over) return;
+      const activeIndex = value.findIndex((item) => getItemValue(item) === active.id);
+      const overIndex = value.findIndex((item) => getItemValue(item) === over.id);
+      if (activeIndex !== overIndex) {
+        if (onMove) {
+          onMove({ event, activeIndex, overIndex });
+        } else {
+          const newValue = sortable.arrayMove(value, activeIndex, overIndex);
+          onValueChange(newValue);
+        }
+      }
+    },
+    [value, getItemValue, onValueChange, onMove, onDragEnd]
+  );
+  const handleDragCancel = React2__namespace.useCallback(() => {
+    setActiveId(null);
+  }, []);
+  const getStrategy = () => {
+    switch (strategy) {
+      case "horizontal":
+        return sortable.rectSortingStrategy;
+      case "grid":
+        return sortable.rectSortingStrategy;
+      case "vertical":
+      default:
+        return sortable.verticalListSortingStrategy;
+    }
+  };
+  const itemIds = React2__namespace.useMemo(() => value.map(getItemValue), [value, getItemValue]);
+  const contextValue = React2__namespace.useMemo(() => ({ activeId, modifiers }), [activeId, modifiers]);
+  const overlayContent = React2__namespace.useMemo(() => {
+    if (!activeId) return null;
+    let result = null;
+    React2__namespace.Children.forEach(children, (child) => {
+      if (React2__namespace.isValidElement(child) && child.props.value === activeId) {
+        result = React2__namespace.cloneElement(child, {
+          ...child.props,
+          className: chunkH2BWO3SI_cjs.cn(child.props.className, "z-50")
+        });
+      }
+    });
+    return result;
+  }, [activeId, children]);
+  const Comp = asChild ? radixUi.Slot.Root : "div";
+  return /* @__PURE__ */ jsxRuntime.jsx(SortableInternalContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    core.DndContext,
+    {
+      sensors,
+      modifiers,
+      measuring: {
+        droppable: {
+          strategy: core.MeasuringStrategy.Always
+        }
+      },
+      onDragStart: handleDragStart,
+      onDragEnd: handleDragEnd,
+      onDragCancel: handleDragCancel,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(sortable.SortableContext, { items: itemIds, strategy: getStrategy(), children: /* @__PURE__ */ jsxRuntime.jsx(
+          Comp,
+          {
+            "data-slot": "sortable",
+            "data-dragging": activeId !== null,
+            className: chunkH2BWO3SI_cjs.cn(activeId !== null && "cursor-grabbing!", className),
+            ...props,
+            children
+          }
+        ) }),
+        mounted && reactDom.createPortal(
+          /* @__PURE__ */ jsxRuntime.jsx(
+            core.DragOverlay,
+            {
+              dropAnimation: dropAnimationConfig,
+              modifiers,
+              className: chunkH2BWO3SI_cjs.cn("z-50", activeId && "cursor-grabbing"),
+              children: /* @__PURE__ */ jsxRuntime.jsx(IsOverlayContext.Provider, { value: true, children: overlayContent })
+            }
+          ),
+          document.body
+        )
+      ]
+    }
+  ) });
+}
+function SortableItem({ value, className, asChild = false, disabled, children, ...props }) {
+  const isOverlay = React2__namespace.useContext(IsOverlayContext);
+  const {
+    setNodeRef,
+    transform,
+    transition,
+    attributes,
+    listeners,
+    isDragging: isSortableDragging
+  } = sortable.useSortable({
+    id: value,
+    disabled: disabled || isOverlay,
+    animateLayoutChanges
+  });
+  if (isOverlay) {
+    const Comp2 = asChild ? radixUi.Slot.Root : "div";
+    return /* @__PURE__ */ jsxRuntime.jsx(SortableItemContext.Provider, { value: { listeners: void 0, isDragging: true, disabled: false }, children: /* @__PURE__ */ jsxRuntime.jsx(Comp2, { "data-slot": "sortable-item", "data-value": value, "data-dragging": true, className: chunkH2BWO3SI_cjs.cn(className), ...props, children }) });
+  }
+  const style = {
+    transition,
+    transform: utilities.CSS.Transform.toString(transform)
+  };
+  const Comp = asChild ? radixUi.Slot.Root : "div";
+  return /* @__PURE__ */ jsxRuntime.jsx(SortableItemContext.Provider, { value: { listeners, isDragging: isSortableDragging, disabled }, children: /* @__PURE__ */ jsxRuntime.jsx(
+    Comp,
+    {
+      "data-slot": "sortable-item",
+      "data-value": value,
+      "data-dragging": isSortableDragging,
+      "data-disabled": disabled,
+      ref: setNodeRef,
+      style,
+      ...attributes,
+      className: chunkH2BWO3SI_cjs.cn(isSortableDragging && "z-50 opacity-50", disabled && "opacity-50", className),
+      ...props,
+      children
+    }
+  ) });
+}
+function SortableItemHandle({
+  className,
+  asChild = false,
+  cursor = true,
+  children,
+  ...props
+}) {
+  const { listeners, isDragging, disabled } = useSortableItemContext(SORTABLE_ITEM_HANDLE_NAME);
+  const Comp = asChild ? radixUi.Slot.Root : "div";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Comp,
+    {
+      "data-slot": "sortable-item-handle",
+      "data-dragging": isDragging,
+      "data-disabled": disabled,
+      ...listeners,
+      className: chunkH2BWO3SI_cjs.cn(cursor && (isDragging ? "cursor-grabbing!" : "cursor-grab!"), className),
+      ...props,
+      children
+    }
+  );
+}
+function SortableOverlay({ children, className, ...props }) {
+  const { activeId, modifiers } = useSortableInternalContext(SORTABLE_OVERLAY_NAME);
+  const [mounted, setMounted] = React2__namespace.useState(false);
+  React2__namespace.useLayoutEffect(() => setMounted(true), []);
+  const content = activeId && children ? typeof children === "function" ? children({ value: activeId }) : children : null;
+  if (!mounted) return null;
+  return reactDom.createPortal(
+    /* @__PURE__ */ jsxRuntime.jsx(
+      core.DragOverlay,
+      {
+        dropAnimation: dropAnimationConfig,
+        modifiers,
+        className: chunkH2BWO3SI_cjs.cn("z-50", activeId && "cursor-grabbing", className),
+        ...props,
+        children: /* @__PURE__ */ jsxRuntime.jsx(IsOverlayContext.Provider, { value: true, children: content })
+      }
+    ),
+    document.body
+  );
+}
+
+exports.Sortable = Sortable;
+exports.SortableItem = SortableItem;
+exports.SortableItemHandle = SortableItemHandle;
+exports.SortableOverlay = SortableOverlay;
+exports.useSortableItemContext = useSortableItemContext;