@justanarthur/modo-ui 0.0.0-stage → 0.2.0

package/dist/shared/components-ytb2tefr.js

@@ -0,0 +1,291 @@
+import {
+  cn2
+} from "./components-ezxhrmer.js";
+import {
+  FluidHoverHighlight2
+} from "./components-kvr7f9hy.js";
+import {
+  useShape
+} from "./components-cv16mryv.js";
+import {
+  useSize2
+} from "./components-0sn7ypjw.js";
+import {
+  useControllableState
+} from "./components-n7mjr357.js";
+import {
+  useFluidHover2,
+  useRegisterFluidHoverItem2
+} from "./components-59efxjd9.js";
+import {
+  useSelectionRuns,
+  useMergeSplitBlocks,
+  SelectionBackgrounds
+} from "./components-5xc2j8jz.js";
+import {
+  SizeProvider2
+} from "./components-jjw69c4c.js";
+import {
+  spring2
+} from "./components-1v7rxytx.js";
+
+// components/inputs/checkbox-group/index.tsx
+import { Checkbox as CheckboxPrimitive } from "@base-ui/react/checkbox";
+import { AnimatePresence, motion } from "motion/react";
+import {
+  createContext,
+  forwardRef,
+  useCallback,
+  useContext,
+  useEffect,
+  useRef,
+  useState
+} from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var CheckboxGroupContext = createContext(null);
+function useCheckboxGroup() {
+  const ctx = useContext(CheckboxGroupContext);
+  if (!ctx)
+    throw new Error("useCheckboxGroup must be used within a CheckboxGroup");
+  return ctx;
+}
+var CheckboxGroup2 = forwardRef(({
+  children,
+  checkedIndices: checkedIndicesProp,
+  defaultCheckedIndices,
+  onCheckedIndicesChange,
+  size,
+  className,
+  ...props
+}, ref) => {
+  const containerRef = useRef(null);
+  const [checkedIndices, setCheckedIndices] = useControllableState(checkedIndicesProp, new Set(defaultCheckedIndices), onCheckedIndicesChange);
+  const setItemChecked = useCallback((index, checked) => {
+    setCheckedIndices((prev) => {
+      if (prev.has(index) === checked)
+        return prev;
+      const next = new Set(prev);
+      if (checked)
+        next.add(index);
+      else
+        next.delete(index);
+      return next;
+    });
+  }, [setCheckedIndices]);
+  const hover = useFluidHover2(containerRef);
+  const { activeIndex, setActiveIndex, itemRects, handlers, registerItem } = hover;
+  const checkedGroups = useSelectionRuns([...checkedIndices]);
+  const [focusedIndex, setFocusedIndex] = useState(null);
+  const focusRect = focusedIndex !== null ? itemRects[focusedIndex] : null;
+  const shape = useShape();
+  const blocks = useMergeSplitBlocks(checkedGroups, itemRects, shape.mergedRadius);
+  const group = /* @__PURE__ */ jsx(CheckboxGroupContext.Provider, {
+    value: { registerItem, activeIndex, checkedIndices, setItemChecked },
+    children: /* @__PURE__ */ jsxs("div", {
+      ref: (node) => {
+        containerRef.current = node;
+        if (typeof ref === "function")
+          ref(node);
+        else if (ref)
+          ref.current = node;
+      },
+      onMouseEnter: handlers.onMouseEnter,
+      onMouseMove: handlers.onMouseMove,
+      onMouseLeave: handlers.onMouseLeave,
+      onClick: handlers.onClick,
+      onFocus: (e) => {
+        const indexAttr = e.target.closest("[data-fluid-hover-index]")?.getAttribute("data-fluid-hover-index");
+        if (indexAttr != null) {
+          const idx = Number(indexAttr);
+          setActiveIndex(idx);
+          setFocusedIndex(e.target.matches(":focus-visible") ? idx : null);
+        }
+      },
+      onBlur: (e) => {
+        if (containerRef.current?.contains(e.relatedTarget))
+          return;
+        setFocusedIndex(null);
+        setActiveIndex(null);
+      },
+      onKeyDown: (e) => {
+        const items = Array.from(containerRef.current?.querySelectorAll("[data-fluid-hover-index]") ?? []);
+        const currentIdx = items.indexOf(e.target);
+        if (currentIdx === -1)
+          return;
+        if (["ArrowDown", "ArrowUp"].includes(e.key)) {
+          e.preventDefault();
+          const next = e.key === "ArrowDown" ? (currentIdx + 1) % items.length : (currentIdx - 1 + items.length) % items.length;
+          items[next]?.focus();
+        } else if (e.key === "Home") {
+          e.preventDefault();
+          items[0]?.focus();
+        } else if (e.key === "End") {
+          e.preventDefault();
+          items[items.length - 1]?.focus();
+        }
+      },
+      role: "group",
+      className: cn2("relative flex flex-col w-72 max-w-full select-none", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(SelectionBackgrounds, {
+          blocks
+        }),
+        /* @__PURE__ */ jsx(FluidHoverHighlight2, {
+          hover,
+          className: shape.bg
+        }),
+        /* @__PURE__ */ jsx(AnimatePresence, {
+          children: focusRect && /* @__PURE__ */ jsx(motion.div, {
+            className: `absolute ${shape.focusRing} pointer-events-none z-20 border border-focus-ring`,
+            initial: false,
+            animate: {
+              left: focusRect.left - 2,
+              top: focusRect.top - 2,
+              width: focusRect.width + 4,
+              height: focusRect.height + 4
+            },
+            exit: { opacity: 0, transition: spring2.fast.exit },
+            transition: {
+              ...spring2.fast,
+              opacity: { duration: spring2.fast.duration }
+            }
+          })
+        }),
+        children
+      ]
+    })
+  });
+  return size ? /* @__PURE__ */ jsx(SizeProvider2, {
+    size,
+    children: group
+  }) : group;
+});
+CheckboxGroup2.displayName = "CheckboxGroup";
+var CheckboxItem2 = forwardRef(({ label, index, checked: checkedProp, onToggle: onToggleProp, className, ...props }, ref) => {
+  const internalRef = useRef(null);
+  const hasMounted = useRef(false);
+  const { registerItem, activeIndex, checkedIndices, setItemChecked } = useCheckboxGroup();
+  const checked = checkedProp ?? checkedIndices.has(index);
+  const onToggle = () => {
+    onToggleProp?.();
+    setItemChecked(index, !checked);
+  };
+  useRegisterFluidHoverItem2(registerItem, index, internalRef);
+  useEffect(() => {
+    hasMounted.current = true;
+  }, []);
+  const isActive = activeIndex === index;
+  const skipAnimation = !hasMounted.current;
+  const shape = useShape();
+  const sizeClasses = useSize2();
+  const compact = sizeClasses.variant === "compact";
+  return /* @__PURE__ */ jsxs("div", {
+    ref: (node) => {
+      internalRef.current = node;
+      if (typeof ref === "function")
+        ref(node);
+      else if (ref)
+        ref.current = node;
+    },
+    "data-fluid-hover-index": index,
+    tabIndex: 0,
+    role: "checkbox",
+    "aria-checked": checked,
+    "aria-label": label,
+    onClick: onToggle,
+    onMouseDown: (e) => {
+      const interactive = e.target.closest('button:not([tabindex="-1"]), a[href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
+      if (interactive && interactive !== e.currentTarget)
+        return;
+      e.preventDefault();
+      e.currentTarget.focus();
+    },
+    onKeyDown: (e) => {
+      if (e.key === " " || e.key === "Enter") {
+        e.preventDefault();
+        onToggle();
+      }
+    },
+    className: cn2(`relative z-10 flex ${sizeClasses.control} items-center ${sizeClasses.gap} ${shape.item} ${sizeClasses.px} cursor-pointer outline-none`, className),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxs(CheckboxPrimitive.Root, {
+        checked,
+        onCheckedChange: () => onToggle(),
+        tabIndex: -1,
+        "aria-hidden": true,
+        className: cn2("relative shrink-0 appearance-none bg-transparent p-0 border-0 outline-none cursor-pointer", compact ? "w-[14px] h-[14px]" : "w-[16px] h-[16px]"),
+        onClick: (e) => e.stopPropagation(),
+        children: [
+          /* @__PURE__ */ jsx("div", {
+            className: cn2("absolute inset-0 border-solid transition-all duration-fast", compact ? "rounded-sm" : "rounded-box", checked ? "border-[1.5px] border-transparent" : isActive ? "border-[1.5px] border-control" : "border-[1.5px] border-border")
+          }),
+          /* @__PURE__ */ jsx(AnimatePresence, {
+            children: checked && /* @__PURE__ */ jsx(CheckboxPrimitive.Indicator, {
+              keepMounted: true,
+              render: (indicatorProps) => {
+                const {
+                  style: _s,
+                  onDrag: _onDrag,
+                  onDragStart: _onDragStart,
+                  onDragEnd: _onDragEnd,
+                  onAnimationStart: _onAnimationStart,
+                  onAnimationEnd: _onAnimationEnd,
+                  onAnimationIteration: _onAnimationIteration,
+                  ...rest
+                } = indicatorProps;
+                return /* @__PURE__ */ jsx(motion.svg, {
+                  ...rest,
+                  width: compact ? 16 : 18,
+                  height: compact ? 16 : 18,
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: 2,
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  className: "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-foreground",
+                  initial: { opacity: 1 },
+                  animate: { opacity: 1 },
+                  exit: { opacity: 1 },
+                  children: /* @__PURE__ */ jsx(motion.path, {
+                    d: "M6 12L10 16L18 8",
+                    initial: { pathLength: skipAnimation ? 1 : 0 },
+                    animate: {
+                      pathLength: 1,
+                      transition: { duration: spring2.fast.duration, ease: "easeOut" }
+                    },
+                    exit: {
+                      pathLength: 0,
+                      transition: { duration: 0.04, ease: "easeIn" }
+                    }
+                  })
+                });
+              }
+            })
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsxs("span", {
+        className: cn2("inline-grid", sizeClasses.text),
+        children: [
+          /* @__PURE__ */ jsx("span", {
+            className: "col-start-1 row-start-1 invisible [text-box:trim-both_cap_alphabetic] weight-semibold",
+            "aria-hidden": "true",
+            children: label
+          }),
+          /* @__PURE__ */ jsx("span", {
+            className: cn2("col-start-1 row-start-1 transition-[color,font-variation-settings] duration-fast [text-box:trim-both_cap_alphabetic]", checked || isActive ? "text-foreground" : "text-muted-foreground", checked ? "weight-semibold" : "weight-normal"),
+            children: label
+          })
+        ]
+      })
+    ]
+  });
+});
+CheckboxItem2.displayName = "CheckboxItem";
+Object.assign(CheckboxGroup2, { Item: CheckboxItem2 });
+var checkbox_group_default = CheckboxGroup2;
+
+export { CheckboxGroup2, CheckboxItem2, checkbox_group_default };

package/dist/shared/components-zfnmn5d4.js

@@ -0,0 +1,220 @@
+import {
+  useIcon
+} from "./components-zrkzcayz.js";
+import {
+  MorphPartScope,
+  MorphSurface
+} from "./components-0q0sqfh4.js";
+import {
+  useMorphOrigin,
+  useMorph
+} from "./components-hqeq3w9q.js";
+import {
+  cn2
+} from "./components-ezxhrmer.js";
+import {
+  useShape
+} from "./components-cv16mryv.js";
+import {
+  useSizeVariant2,
+  useSize2
+} from "./components-0sn7ypjw.js";
+import {
+  slotRender
+} from "./components-3ky44908.js";
+import {
+  SURFACE_BG,
+  SURFACE_SHADOW,
+  useSurface2,
+  SurfaceProvider2
+} from "./components-zx6b6yby.js";
+import {
+  useControllableState
+} from "./components-n7mjr357.js";
+import {
+  Button2
+} from "./components-b2wyq2cq.js";
+
+// components/overlays/dialog/index.tsx
+import { Dialog as DialogPrimitive } from "@base-ui/react/dialog";
+import { motion } from "motion/react";
+import {
+  createContext,
+  forwardRef,
+  useContext,
+  useId,
+  useImperativeHandle,
+  useMemo
+} from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var DIALOG_OFFSET = 4;
+var DialogContext = createContext({
+  open: false,
+  origin: { current: {} }
+});
+var useDialogState2 = () => useContext(DialogContext);
+var DialogTrigger2 = forwardRef(({ render, asChild, children, ...props }, ref) => {
+  const el = slotRender(render, asChild, children);
+  return el ? /* @__PURE__ */ jsx(DialogPrimitive.Trigger, {
+    ref,
+    render: el,
+    ...props
+  }) : /* @__PURE__ */ jsx(DialogPrimitive.Trigger, {
+    ref,
+    ...props,
+    children
+  });
+});
+DialogTrigger2.displayName = "DialogTrigger";
+var DialogClose2 = forwardRef(({ render, asChild, children, ...props }, ref) => {
+  const el = slotRender(render, asChild, children);
+  return el ? /* @__PURE__ */ jsx(DialogPrimitive.Close, {
+    ref,
+    render: el,
+    ...props
+  }) : /* @__PURE__ */ jsx(DialogPrimitive.Close, {
+    ref,
+    ...props,
+    children
+  });
+});
+DialogClose2.displayName = "DialogClose";
+var DialogContent2 = forwardRef(({
+  className,
+  children,
+  size = "sm",
+  container,
+  showCloseButton = true,
+  position = "center",
+  from,
+  effect,
+  hideSource,
+  tier,
+  ...props
+}, ref) => {
+  const XIcon = useIcon("x");
+  const shape = useShape();
+  const substrate = useSurface2();
+  const dialogLevel = Math.min(substrate + DIALOG_OFFSET, 8);
+  const compact = useSize2().variant === "compact";
+  const { open, origin } = useDialogState2();
+  const morph = useMorph(open, origin, { from, effect, hideSource, tier });
+  useImperativeHandle(ref, () => morph.popup, [morph.popup]);
+  return /* @__PURE__ */ jsxs(DialogPrimitive.Portal, {
+    container: container ?? undefined,
+    children: [
+      /* @__PURE__ */ jsx(DialogPrimitive.Backdrop, {
+        render: /* @__PURE__ */ jsx(motion.div, {
+          style: { opacity: morph.progress }
+        }),
+        className: cn2(container ? "absolute" : "fixed", "inset-0 z-50 bg-scrim")
+      }),
+      /* @__PURE__ */ jsx(DialogPrimitive.Popup, {
+        ref: morph.popupRef,
+        ...props,
+        className: cn2(container ? "absolute" : "fixed", "left-1/2 z-50 w-[calc(100%-2rem)] -translate-x-1/2 focus:outline-none", position === "top" ? "top-[12dvh]" : "top-1/2 -translate-y-1/2", size === "sm" && (compact ? "max-w-[360px]" : "max-w-[400px]"), size === "lg" && (compact ? "max-w-[480px]" : "max-w-[540px]"), size === "xl" && (compact ? "max-w-[800px]" : "max-w-[880px]")),
+        children: /* @__PURE__ */ jsx(SurfaceProvider2, {
+          value: dialogLevel,
+          children: /* @__PURE__ */ jsxs(MorphSurface, {
+            morph,
+            bg: SURFACE_BG[dialogLevel],
+            shadow: SURFACE_SHADOW[dialogLevel],
+            radius: shape.container,
+            className: cn2("p-6", className),
+            children: [
+              children,
+              showCloseButton && /* @__PURE__ */ jsx(DialogPrimitive.Close, {
+                render: /* @__PURE__ */ jsxs(Button2, {
+                  variant: "ghost",
+                  size: "icon-sm",
+                  className: "absolute right-3 top-3",
+                  children: [
+                    /* @__PURE__ */ jsx(XIcon, {}),
+                    /* @__PURE__ */ jsx("span", {
+                      className: "sr-only",
+                      children: "Close"
+                    })
+                  ]
+                })
+              })
+            ]
+          })
+        })
+      })
+    ]
+  });
+});
+DialogContent2.displayName = "DialogContent";
+function DialogHeader2({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", {
+    className: cn2("flex flex-col gap-1.5 mb-4", className),
+    ...props
+  });
+}
+function DialogFooter2({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", {
+    className: cn2("flex justify-end gap-2 mt-6", className),
+    ...props
+  });
+}
+var DialogTitle2 = forwardRef(({ className, ...props }, ref) => {
+  const compact = useSizeVariant2() === "compact";
+  return /* @__PURE__ */ jsx(DialogPrimitive.Title, {
+    ref,
+    className: cn2(compact ? "text-title-compact" : "text-title", "weight-bold text-foreground leading-tight", className),
+    ...props
+  });
+});
+DialogTitle2.displayName = "DialogTitle";
+var DialogDescription2 = forwardRef(({ className, ...props }, ref) => {
+  const compact = useSizeVariant2() === "compact";
+  return /* @__PURE__ */ jsx(DialogPrimitive.Description, {
+    ref,
+    className: cn2(compact ? "text-body-compact" : "text-body", "text-muted-foreground", className),
+    ...props
+  });
+});
+DialogDescription2.displayName = "DialogDescription";
+function DialogState2({ open, defaultOpen = false, onOpenChange, children }) {
+  const [current, setCurrent] = useControllableState(open, defaultOpen, onOpenChange);
+  const { origin, capture } = useMorphOrigin();
+  const id = useId();
+  const ctx = useMemo(() => ({ open: current, origin }), [current, origin]);
+  const parts = useMemo(() => ({ id, open: current }), [id, current]);
+  return /* @__PURE__ */ jsx(DialogContext.Provider, {
+    value: ctx,
+    children: /* @__PURE__ */ jsx(MorphPartScope.Provider, {
+      value: parts,
+      children: children({
+        open: current,
+        onOpenChange: (next, details) => {
+          if (next)
+            capture(details);
+          setCurrent(next);
+        }
+      })
+    })
+  });
+}
+function Dialog2({ children, open, defaultOpen, onOpenChange, modal }) {
+  return /* @__PURE__ */ jsx(DialogState2, {
+    open,
+    defaultOpen,
+    onOpenChange,
+    children: (root) => /* @__PURE__ */ jsx(DialogPrimitive.Root, {
+      ...root,
+      modal,
+      children
+    })
+  });
+}
+Dialog2.Trigger = DialogTrigger2;
+Dialog2.Content = DialogContent2;
+Dialog2.Header = DialogHeader2;
+Dialog2.Footer = DialogFooter2;
+Dialog2.Title = DialogTitle2;
+Dialog2.Description = DialogDescription2;
+Dialog2.Close = DialogClose2;
+var dialog_default = Dialog2;
+
+export { useDialogState2, DialogTrigger2, DialogClose2, DialogContent2, DialogHeader2, DialogFooter2, DialogTitle2, DialogDescription2, DialogState2, Dialog2, dialog_default };

package/dist/shared/components-zrkzcayz.js

@@ -0,0 +1,141 @@
+// lib/icon-context.tsx
+import {
+  ArrowDown,
+  ArrowLeft,
+  ArrowRight,
+  ArrowUp,
+  Bell,
+  Brain,
+  Calendar,
+  Check,
+  ChevronDown,
+  ChevronRight,
+  ChevronsUpDown,
+  Circle,
+  Clock,
+  Copy,
+  CornerDownLeft,
+  CornerDownRight,
+  Dot,
+  Ellipsis,
+  EllipsisVertical,
+  Folder,
+  Globe,
+  Heart,
+  Home,
+  ImageIcon,
+  Inbox,
+  Lightbulb,
+  Link,
+  Loader,
+  Lock,
+  Mail,
+  Menu,
+  MessageCircle,
+  Monitor,
+  Moon,
+  Paintbrush,
+  Palette,
+  PanelLeft,
+  PanelLeftDashed,
+  PanelRight,
+  PanelRightDashed,
+  Pause,
+  Pencil,
+  Pipette,
+  Play,
+  Plus,
+  RectangleHorizontal,
+  Rocket,
+  RotateCcw,
+  Scaling,
+  Search,
+  Settings,
+  Shield,
+  SkipForward,
+  SlidersHorizontal,
+  SquareLibrary,
+  Star,
+  Sun,
+  User,
+  Users,
+  X
+} from "lucide-react";
+import { createContext, useContext, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+var defaultIcons = {
+  "chevron-right": ChevronRight,
+  "chevron-down": ChevronDown,
+  pipette: Pipette,
+  x: X,
+  copy: Copy,
+  menu: Menu,
+  dot: Dot,
+  monitor: Monitor,
+  sun: Sun,
+  moon: Moon,
+  "rectangle-horizontal": RectangleHorizontal,
+  circle: Circle,
+  "square-library": SquareLibrary,
+  clock: Clock,
+  star: Star,
+  settings: Settings,
+  plus: Plus,
+  "arrow-left": ArrowLeft,
+  "arrow-right": ArrowRight,
+  "arrow-up": ArrowUp,
+  "arrow-down": ArrowDown,
+  search: Search,
+  loader: Loader,
+  users: Users,
+  lock: Lock,
+  mail: Mail,
+  bell: Bell,
+  shield: Shield,
+  palette: Palette,
+  lightbulb: Lightbulb,
+  rocket: Rocket,
+  heart: Heart,
+  paintbrush: Paintbrush,
+  brain: Brain,
+  globe: Globe,
+  user: User,
+  image: ImageIcon,
+  link: Link,
+  check: Check,
+  "rotate-ccw": RotateCcw,
+  play: Play,
+  pause: Pause,
+  home: Home,
+  "message-circle": MessageCircle,
+  inbox: Inbox,
+  pencil: Pencil,
+  scaling: Scaling,
+  "skip-forward": SkipForward,
+  "corner-down-right": CornerDownRight,
+  "corner-down-left": CornerDownLeft,
+  "panel-left": PanelLeft,
+  "panel-left-dashed": PanelLeftDashed,
+  "panel-right": PanelRight,
+  "panel-right-dashed": PanelRightDashed,
+  "chevrons-up-down": ChevronsUpDown,
+  "more-horizontal": Ellipsis,
+  "more-vertical": EllipsisVertical,
+  calendar: Calendar,
+  folder: Folder,
+  "sliders-horizontal": SlidersHorizontal
+};
+var IconContext = createContext(null);
+function useIcon(name) {
+  const icons = useContext(IconContext);
+  return (icons ?? defaultIcons)[name];
+}
+function IconProvider2({ children, icons }) {
+  const value = useMemo(() => ({ ...defaultIcons, ...icons }), [icons]);
+  return /* @__PURE__ */ jsx(IconContext.Provider, {
+    value,
+    children
+  });
+}
+
+export { useIcon, IconProvider2 };

package/dist/shared/components-zx6b6yby.js

@@ -0,0 +1,42 @@
+// lib/surface-classes.ts
+var SURFACE_BG = {
+  1: "bg-surface-1",
+  2: "bg-surface-2",
+  3: "bg-surface-3",
+  4: "bg-surface-4",
+  5: "bg-surface-5",
+  6: "bg-surface-6",
+  7: "bg-surface-7",
+  8: "bg-surface-8"
+};
+var SURFACE_SHADOW = {
+  1: "shadow-surface-1",
+  2: "shadow-surface-2",
+  3: "shadow-surface-3",
+  4: "shadow-surface-4",
+  5: "shadow-surface-5",
+  6: "shadow-surface-6",
+  7: "shadow-surface-7",
+  8: "shadow-surface-8"
+};
+function surfaceClasses2(bgLevel, shadowLevel = bgLevel) {
+  const bg = Math.round(Math.max(1, Math.min(8, bgLevel)));
+  const shadow = Math.round(Math.max(1, Math.min(8, shadowLevel)));
+  return `${SURFACE_BG[bg]} ${SURFACE_SHADOW[shadow]}`;
+}
+
+// lib/surface-context.tsx
+import { createContext, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+var SurfaceContext = createContext(1);
+function useSurface2() {
+  return useContext(SurfaceContext);
+}
+function SurfaceProvider2({ value, children }) {
+  return /* @__PURE__ */ jsx(SurfaceContext.Provider, {
+    value: Math.max(1, Math.min(8, value)),
+    children
+  });
+}
+
+export { SURFACE_BG, SURFACE_SHADOW, surfaceClasses2, useSurface2, SurfaceProvider2 };