@blockle/blocks 0.8.7 → 0.8.9

package/dist/index.mjs

@@ -5,583 +5,58 @@ import { style } from "./styles/lib/css/style/style.mjs";
 import { makeComponentTheme } from "./styles/lib/theme/makeComponentTheme.mjs";
 import { makeTheme } from "./styles/lib/theme/makeTheme.mjs";
 import { vars } from "./styles/lib/theme/vars.css.mjs";
+import { useComponentStyles, Box, classnames, createSlottable } from "./styles/components/display/Divider/Divider.mjs";
+import { Divider, Slot, useComponentStyleDefaultProps } from "./styles/components/display/Divider/Divider.mjs";
 import { atoms } from "./styles/lib/css/atoms/sprinkles.css.mjs";
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { createContext, forwardRef, Children, isValidElement, cloneElement, useContext, useEffect, useLayoutEffect, useRef, useState, useCallback, useId } from "react";
-import { buttonReset } from "./styles/components/Button/Button.css.mjs";
-import { container, input, icon } from "./styles/components/Checkbox/checkbox.css.mjs";
-import { backdrop } from "./styles/components/Dialog/dialog.css.mjs";
-import { createPortal } from "react-dom";
-import { divider } from "./styles/components/Divider/divider.css.mjs";
-import { heading } from "./styles/components/Heading/heading.css.mjs";
-import { input as input$1 } from "./styles/components/Input/input.css.mjs";
-import { container as container$1, input as input$2, icon as icon$1 } from "./styles/components/Radio/radio.css.mjs";
-import { container as container$2, input as input$3 } from "./styles/components/Switch/switch.css.mjs";
-import { text } from "./styles/components/Text/text.css.mjs";
-const classnames = (...args) => {
-  const className = args.filter((arg) => arg && typeof arg === "string").join(" ");
-  return className || void 0;
-};
-const BlocksProviderContext = createContext(null);
-const BlocksProvider = ({
-  children,
-  theme,
-  className,
-  ...restProps
-}) => {
-  return /* @__PURE__ */ jsx(BlocksProviderContext.Provider, { value: theme, children: /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: classnames(theme.vars, atoms({ fontFamily: "primary" }), className),
-      ...restProps,
-      children
-    }
-  ) });
-};
-function getAtomsAndProps(props) {
-  const atomProps = {};
-  const otherProps = {};
-  for (const [name, value] of Object.entries(props)) {
-    if (atoms.properties.has(name)) {
-      atomProps[name] = value;
-    } else {
-      otherProps[name] = value;
-    }
-  }
-  return [atomProps, otherProps];
-}
-function setRef(ref, value) {
-  if (typeof ref === "function") {
-    ref(value);
-  } else if (ref !== null && ref !== void 0) {
-    ref.current = value;
-  }
-}
-function composeRefs(...refs) {
-  return (node) => {
-    for (const ref of refs) {
-      setRef(ref, node);
-    }
-  };
-}
-function mergeProps(slotProps, childProps) {
-  const overrideProps = {};
-  for (const propName in childProps) {
-    const slotPropValue = slotProps[propName];
-    const childPropValue = childProps[propName];
-    if (childPropValue === void 0) {
-      continue;
-    }
-    if (slotPropValue === void 0) {
-      overrideProps[propName] = childPropValue;
-      continue;
-    }
-    if (typeof slotPropValue === "function" && typeof childPropValue === "function") {
-      overrideProps[propName] = (...args) => {
-        childPropValue(...args);
-        slotPropValue(...args);
-      };
-    } else if (propName === "style") {
-      overrideProps[propName] = { ...slotPropValue, ...childPropValue };
-    } else if (propName === "className") {
-      overrideProps[propName] = [slotPropValue, childPropValue].filter(Boolean).join(" ");
-    } else {
-      overrideProps[propName] = childPropValue;
-    }
-  }
-  return { ...slotProps, ...overrideProps };
-}
-function createSlottable(defaultElement) {
-  function Slottable2(props, ref) {
-    const { asChild, children, ...slotProps } = props;
-    const Component = defaultElement;
-    if (!asChild) {
-      return /* @__PURE__ */ jsx(Component, { ref, ...slotProps, children });
-    }
-    const childrenArray = Children.toArray(children);
-    const slot = childrenArray.find((child) => {
-      if (!isValidElement(child)) {
-        return false;
-      }
-      return child.type === Slot;
-    });
-    if (!slot) {
-      const Slot2 = childrenArray[0];
-      if (!isValidElement(childrenArray[0])) {
-        if (process.env.NODE_ENV === "development") {
-          console.warn("Slottable: First child is not a valid React element");
-        }
-        return null;
-      }
-      if (!isValidElement(Slot2)) {
-        return null;
-      }
-      return cloneElement(
-        Slot2,
-        {
-          ...mergeProps(slotProps, Slot2.props),
-          ref: composeRefs(ref, Slot2.ref)
-        },
-        Slot2.props.children
-      );
-    }
-    if (!isValidElement(slot) || !isValidElement(slot.props.children)) {
-      return null;
-    }
-    const newChildren = childrenArray.map((child) => {
-      if (!isValidElement(child)) {
-        return child;
-      }
-      if (child.type === Slot) {
-        return slot.props.children.props.children;
-      }
-      return child;
-    });
-    return cloneElement(
-      slot.props.children,
-      {
-        ...mergeProps(slotProps, slot.props),
-        ref: composeRefs(ref, slot.props.children.ref)
-      },
-      newChildren
-    );
-  }
-  return forwardRef(Slottable2);
-}
-const Slot = ({ children }) => children;
-const Slottable$2 = createSlottable("div");
-const Box = forwardRef(function Box2({ asChild, className, children, ...restProps }, ref) {
-  const [atomsProps, otherProps] = getAtomsAndProps(restProps);
-  return /* @__PURE__ */ jsx(
-    Slottable$2,
-    {
-      ref,
-      asChild,
-      className: classnames(className, atoms(atomsProps)),
-      ...otherProps,
-      children
-    }
-  );
-});
-const useTheme = () => {
-  const theme = useContext(BlocksProviderContext);
-  if (!theme) {
-    throw new Error("useTheme must be used within a BlocksProvider");
-  }
-  return theme;
-};
-function useComponentStyles(name, props, useDefaultVariants = true) {
-  const { components } = useTheme();
-  const component = components[name];
-  if (!component) {
-    console.warn(`Component ${name} is not defined in the theme`);
-    return "";
-  }
-  const classNames = [];
-  const variants = props.variants ?? {};
-  const variantsWithDefaults = { ...variants };
-  for (const key in props) {
-    const value = props[key];
-    if (typeof value === "boolean" && value) {
-      classNames.push(component[key]);
-    }
-  }
-  if (!component.variants) {
-    return classNames.join(" ");
-  }
-  const { defaultVariants } = component;
-  if (useDefaultVariants && defaultVariants) {
-    const keys2 = Object.keys(defaultVariants);
-    for (const key of keys2) {
-      if (variantsWithDefaults[key] === void 0 && defaultVariants[key]) {
-        variantsWithDefaults[key] = defaultVariants[key];
-      }
-    }
-  }
-  const keys = Object.keys(variantsWithDefaults);
-  const componentVariants = component.variants;
-  for (const key of keys) {
-    const value = variantsWithDefaults[key];
-    if (value === void 0 || componentVariants[key] === void 0) {
-      continue;
-    }
-    if (typeof value === "boolean") {
-      if (value && componentVariants[key]) {
-        classNames.push(componentVariants[key]);
-      }
-      continue;
-    }
-    const variant = componentVariants[key][value];
-    if (variant) {
-      classNames.push(variant);
-    }
-  }
-  const { compoundVariants } = component;
-  if (compoundVariants) {
-    for (const compoundVariant of compoundVariants) {
-      const keys2 = Object.keys(compoundVariant.variants);
-      const matches = keys2.every((key) => {
-        const value = variantsWithDefaults[key];
-        if (value === void 0) {
-          return false;
-        }
-        return value === compoundVariant.variants[key];
-      });
-      if (matches) {
-        classNames.push(compoundVariant.style);
-      }
-    }
-  }
-  return classNames.join(" ");
-}
-const useComponentStyleDefaultProps = (name) => {
-  const { components } = useTheme();
-  const component = components[name];
-  if (!component) {
-    return {};
-  }
-  return component.defaultVariants ?? {};
-};
-const Spinner = ({ className, size, color, ...restProps }) => {
-  const spinnerClassName = useComponentStyles("spinner", { base: true, variants: { size, color } });
-  return /* @__PURE__ */ jsx(Box, { color, className: classnames(spinnerClassName, className), ...restProps });
-};
-const Slottable$1 = createSlottable("button");
-const Button = forwardRef(function Button2({
-  children,
-  className,
-  variant,
-  intent,
-  size,
-  startSlot,
-  endSlot,
-  loading,
-  disabled,
-  asChild,
-  ...restProps
-}, ref) {
-  const buttonClassName = useComponentStyles("button", {
-    base: true,
-    variants: {
-      variant,
-      intent,
-      size,
-      disabled,
-      loading
-    }
-  });
-  const [atomsProps, otherProps] = getAtomsAndProps(restProps);
-  return /* @__PURE__ */ jsxs(
-    Slottable$1,
-    {
-      ref,
-      asChild,
-      disabled: disabled || loading,
-      className: classnames(buttonReset, buttonClassName, atoms(atomsProps), className),
-      ...otherProps,
-      children: [
-        startSlot && /* @__PURE__ */ jsx("div", { children: startSlot }),
-        loading && /* @__PURE__ */ jsx(Spinner, { size }),
-        /* @__PURE__ */ jsx(Slot, { children }),
-        endSlot && /* @__PURE__ */ jsx("div", { children: endSlot })
-      ]
-    }
-  );
-});
-const Label = ({
-  visualOnly,
-  children,
-  className,
-  required,
-  size,
-  cursor,
-  ...restProps
-}) => {
-  const Component = visualOnly ? "span" : "label";
-  const containerClassName = useComponentStyles("label", {
-    base: true,
-    variants: { required, size }
-  });
-  return /* @__PURE__ */ jsx(
-    Component,
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { Button, Spinner } from "./styles/components/form/Button/Button.mjs";
+import { Checkbox, Label } from "./styles/components/form/Checkbox/Checkbox.mjs";
+import { Input } from "./styles/components/form/Input/Input.mjs";
+import { Radio } from "./styles/components/form/Radio/Radio.mjs";
+import { Switch } from "./styles/components/form/Switch/Switch.mjs";
+import { BlocksProvider } from "./styles/components/other/BlocksProvider/BlocksProvider.mjs";
+import { Dialog, Portal, useIsomorphicLayoutEffect, useKeyboard, usePreventBodyScroll } from "./styles/components/overlay/Dialog/Dialog.mjs";
+import { Heading } from "./styles/components/typography/Heading/Heading.mjs";
+import { Text } from "./styles/components/typography/Text/Text.mjs";
+const Progress = forwardRef(function Progress2({ value, max = 100, className, ...restProps }, ref) {
+  const containerClassName = useComponentStyles(
+    "progress",
     {
-      className: classnames(containerClassName, className, atoms({ cursor })),
-      ...restProps,
-      children
-    }
-  );
-};
-const Checkbox = forwardRef(function Checkbox2({ name, label, required, className, ...restProps }, ref) {
-  const containerClassName = useComponentStyles("checkbox", { base: true }, false);
-  const iconClassName = useComponentStyles("checkbox", { icon: true }, false);
-  const labelClassName = useComponentStyles("checkbox", { label: true }, false);
-  const input$12 = /* @__PURE__ */ jsxs("div", { className: classnames(container, containerClassName, className), children: [
-    /* @__PURE__ */ jsx("input", { ref, type: "checkbox", name, className: input, ...restProps }),
-    /* @__PURE__ */ jsx("div", { className: classnames(icon, iconClassName) })
-  ] });
-  if (!label) {
-    return input$12;
-  }
-  return /* @__PURE__ */ jsxs("label", { className: labelClassName, children: [
-    input$12,
-    label && /* @__PURE__ */ jsx(Label, { visualOnly: true, required, children: label })
-  ] });
-});
-const focusableSelectors = 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
-const getFirstFocusableElement = (container2) => {
-  const focusable = container2.querySelector(focusableSelectors);
-  return focusable || null;
-};
-const focusFirstElement = (container2) => {
-  const focusable = getFirstFocusableElement(container2);
-  if (focusable) {
-    focusable.focus();
-  }
-};
-const useFocusLock = ({ ref, active }) => {
-  useEffect(() => {
-    if (!active) {
-      return;
-    }
-    const handleFocus = (event) => {
-      if (ref.current && event.target instanceof HTMLElement && !ref.current.contains(event.target)) {
-        focusFirstElement(ref.current);
-      }
-    };
-    document.addEventListener("focusin", handleFocus);
-    return () => {
-      document.removeEventListener("focusin", handleFocus);
-    };
-  }, [active]);
-};
-const useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
-const useKeyboard = (key, callback, { enabled = true, type = "keydown" } = {}) => {
-  useEffect(() => {
-    if (!enabled) {
-      return;
-    }
-    function handleKeyDown(event) {
-      if (event.key === key) {
-        callback();
-      }
-    }
-    document.addEventListener(type, handleKeyDown);
-    return () => {
-      document.removeEventListener(type, handleKeyDown);
-    };
-  }, [callback, enabled, key, type]);
-};
-const useLayer = () => {
-  const layerRef = useRef();
-  useEffect(
-    () => () => {
-      if (layerRef.current) {
-        layerRef.current.remove();
-      }
+      base: true
     },
-    []
-  );
-  return () => {
-    if (!layerRef.current) {
-      const div = document.createElement("div");
-      div.dataset.layer = "blocks";
-      layerRef.current = div;
-      document.body.append(layerRef.current);
-    }
-    return layerRef.current;
-  };
-};
-const usePreventBodyScroll = (enabled = true) => {
-  useIsomorphicLayoutEffect(() => {
-    if (!enabled) {
-      return;
-    }
-    const prevOverflow = document.body.style.getPropertyValue("overflow");
-    const prevScrollTop = document.documentElement.scrollTop;
-    if (document.body.scrollHeight > window.innerHeight) {
-      document.body.style.position = "fixed";
-      document.body.style.overflow = "hidden";
-      document.body.style.overflowY = "scroll";
-      document.body.style.width = "100%";
-      document.body.style.top = `-${prevScrollTop}px`;
-    } else {
-      document.body.style.overflow = "hidden";
-    }
-    return () => {
-      document.body.style.position = "";
-      document.body.style.overflow = prevOverflow;
-      document.body.style.overflowY = "";
-      document.body.style.width = "";
-      document.body.style.top = "";
-      document.documentElement.scrollTop = prevScrollTop;
-    };
-  }, [enabled]);
-};
-const isBrowser = typeof window !== "undefined";
-const useRestoreFocus = (active) => {
-  const target = useRef(null);
-  if (isBrowser && active && !target.current) {
-    target.current = document.activeElement;
-  }
-  useEffect(() => {
-    if (target.current && !active && target.current instanceof HTMLElement) {
-      target.current.focus();
-    }
-    if (!active) {
-      target.current = null;
-    }
-  }, [active]);
-};
-const useVisibilityState = (open) => {
-  const [visible, setVisible] = useState(open);
-  const hide = useCallback(() => {
-    setVisible(false);
-  }, []);
-  useEffect(() => {
-    if (open) {
-      setVisible(true);
-    }
-  }, [open]);
-  return [visible, hide];
-};
-function hasAnimationDuration(element) {
-  if (!element) {
-    return false;
-  }
-  const style2 = window.getComputedStyle(element);
-  return style2.transitionDuration !== "0s" || style2.animationDuration !== "0s";
-}
-const Portal = ({ children, container: container2 }) => {
-  const context = useTheme();
-  return createPortal(
-    /* @__PURE__ */ jsx(BlocksProvider, { theme: context, children }),
-    container2 || document.body
+    false
   );
-};
-const DialogContext = createContext(void 0);
-const useNestedDialog = (open) => {
-  const parentDialog = useContext(DialogContext);
-  useEffect(() => {
-    if (!parentDialog || !open) {
-      return;
-    }
-    parentDialog.setEnabled(false);
-    return () => {
-      parentDialog.setEnabled(true);
-    };
-  }, [parentDialog, open]);
-  return !!parentDialog;
-};
-const Dialog = ({
-  children,
-  open,
-  className,
-  onRequestClose,
-  size,
-  ...restProps
-}) => {
-  const backdropClassName = useComponentStyles("dialog", { backdrop: true }, false);
-  const dialogClassName = useComponentStyles("dialog", { dialog: true, variants: { size } });
-  const backdropRef = useRef(null);
-  const dialogRef = useRef(null);
-  const layer = useLayer();
-  const [visible, hide] = useVisibilityState(open);
-  const [enabled, setEnabled] = useState(true);
-  const onBackdropClick = useCallback(
-    (event) => {
-      if (event.target === event.currentTarget) {
-        onRequestClose();
-      }
-    },
-    [onRequestClose]
+  const barClassName = useComponentStyles(
+    "progress",
+    { bar: true, variants: { indeterminate: value === void 0 } },
+    false
   );
-  useFocusLock({ ref: dialogRef, active: open && enabled });
-  useRestoreFocus(open);
-  const isNested = useNestedDialog(visible);
-  usePreventBodyScroll(visible && !isNested);
-  useKeyboard("Escape", onRequestClose, { enabled: open && enabled });
-  useIsomorphicLayoutEffect(() => {
-    var _a, _b;
-    if (!open) {
-      (_a = backdropRef.current) == null ? void 0 : _a.removeAttribute("data-open");
-      (_b = dialogRef.current) == null ? void 0 : _b.removeAttribute("data-open");
-      return;
-    }
-    let timer = requestAnimationFrame(() => {
-      timer = requestAnimationFrame(() => {
-        var _a2, _b2;
-        (_a2 = backdropRef.current) == null ? void 0 : _a2.setAttribute("data-open", "");
-        (_b2 = dialogRef.current) == null ? void 0 : _b2.setAttribute("data-open", "");
-      });
-    });
-    return () => {
-      cancelAnimationFrame(timer);
-    };
-  }, [open, visible]);
-  const onAnimationEnd = useCallback(() => {
-    if (!open) {
-      hide();
-    }
-  }, [hide, open]);
-  useEffect(() => {
-    if (open) {
-      return;
-    }
-    if (!hasAnimationDuration(dialogRef.current)) {
-      hide();
-    }
-  }, [open]);
-  if (!visible) {
-    return null;
-  }
-  const dataOpen = typeof window === "undefined" && open ? "" : void 0;
-  return /* @__PURE__ */ jsx(Portal, { container: layer(), children: /* @__PURE__ */ jsx(DialogContext.Provider, { value: { setEnabled }, children: /* @__PURE__ */ jsx(
+  const progress = value === void 0 ? 0 : value / max * 100;
+  return /* @__PURE__ */ jsx(
     Box,
     {
-      ref: backdropRef,
-      className: classnames(backdrop, backdropClassName),
-      "data-open": dataOpen,
-      onClick: onBackdropClick,
-      onAnimationEnd,
-      onTransitionEnd: onAnimationEnd,
+      ref,
+      className: classnames(containerClassName, className),
+      overflow: "hidden",
+      role: "progressbar",
+      "aria-valuenow": value,
+      "aria-valuemin": 0,
+      "aria-valuemax": max,
+      ...restProps,
       children: /* @__PURE__ */ jsx(
-        "dialog",
+        Box,
         {
-          ref: dialogRef,
-          "aria-modal": "true",
-          open: true,
-          "data-open": dataOpen,
-          className: classnames(dialogClassName, className),
-          ...restProps,
-          children
+          className: classnames(barClassName),
+          backgroundColor: "currentColor",
+          width: "full",
+          height: "full",
+          style: { transform: value === void 0 ? void 0 : `translateX(-${100 - progress}%)` }
         }
       )
     }
-  ) }) });
-};
-const Divider = ({ className, color, ...restProps }) => {
-  const dividerClass = useComponentStyles("divider", { base: true });
-  const dividerDefaults = useComponentStyleDefaultProps("divider");
-  return /* @__PURE__ */ jsx(
-    Box,
-    {
-      role: "separator",
-      width: "full",
-      backgroundColor: color ?? dividerDefaults.color,
-      className: classnames(className, dividerClass, divider),
-      ...restProps
-    }
   );
-};
-const Heading = ({
-  className,
-  level = 1,
-  children,
-  ...restProps
-}) => {
-  const Tag = `h${level}`;
-  return /* @__PURE__ */ jsx(Box, { asChild: true, className: classnames(heading, className), ...restProps, children: /* @__PURE__ */ jsx(Tag, { children }) });
-};
+});
 const justifyContentMap = {
   left: "flex-start",
   right: "flex-end",
@@ -619,115 +94,23 @@ const Inline = ({
     }
   );
 };
-const Input = forwardRef(function Input2({ className, name, type = "text", startSlot, endSlot, label, placeholder, ...restProps }, ref) {
-  const id = useId();
-  const containerClassName = useComponentStyles("input", { container: true }, false);
-  const inputClassName = useComponentStyles("input", { input: true });
-  return /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(Box, { display: "flex", alignItems: "center", className: classnames(containerClassName, className), children: [
-    startSlot,
-    /* @__PURE__ */ jsx(Box, { asChild: true, width: "full", overflow: "hidden", children: /* @__PURE__ */ jsx(
-      "input",
-      {
-        id,
-        ref,
-        name,
-        type,
-        placeholder: placeholder || label,
-        className: classnames(input$1, inputClassName),
-        ...restProps
-      }
-    ) }),
-    endSlot
-  ] }) });
-});
-const Slottable = createSlottable("a");
-const Link = forwardRef(function Link2({ asChild, className, children, variant, underline, ...restProps }, ref) {
-  const linkClassName = useComponentStyles("link", {
-    base: true,
-    variants: { variant, underline }
-  });
-  return /* @__PURE__ */ jsx(
-    Slottable,
-    {
-      asChild,
-      ref,
-      className: classnames(className, linkClassName),
-      ...restProps,
-      children
-    }
-  );
-});
-const Progress = forwardRef(function Progress2({ value, max = 100, className, ...restProps }, ref) {
-  const containerClassName = useComponentStyles(
-    "progress",
-    {
-      base: true
-    },
-    false
-  );
-  const barClassName = useComponentStyles(
-    "progress",
-    { bar: true, variants: { indeterminate: value === void 0 } },
-    false
-  );
-  const progress = value === void 0 ? 0 : value / max * 100;
-  return /* @__PURE__ */ jsx(
-    Box,
-    {
-      ref,
-      className: classnames(containerClassName, className),
-      overflow: "hidden",
-      role: "progressbar",
-      "aria-valuenow": value,
-      "aria-valuemin": 0,
-      "aria-valuemax": max,
-      ...restProps,
-      children: /* @__PURE__ */ jsx(
-        Box,
-        {
-          className: classnames(barClassName),
-          backgroundColor: "currentColor",
-          width: "full",
-          height: "full",
-          style: { transform: value === void 0 ? void 0 : `translateX(-${100 - progress}%)` }
-        }
-      )
-    }
-  );
-});
-const Radio = forwardRef(function Checkbox3({ name, label, className, ...restProps }, ref) {
-  const containerClassName = useComponentStyles("radio", { base: true }, false);
-  const iconClassName = useComponentStyles("radio", { icon: true }, false);
-  const labelClassName = useComponentStyles("checkbox", { label: true }, false);
-  const input2 = /* @__PURE__ */ jsxs("div", { className: classnames(container$1, containerClassName, className), children: [
-    /* @__PURE__ */ jsx("input", { ref, type: "radio", name, className: input$2, ...restProps }),
-    /* @__PURE__ */ jsx("div", { className: classnames(icon$1, iconClassName) })
-  ] });
-  if (!label) {
-    return input2;
-  }
-  return /* @__PURE__ */ jsxs("label", { className: labelClassName, children: [
-    input2,
-    label && /* @__PURE__ */ jsx(Label, { visualOnly: true, children: label })
-  ] });
-});
 const Stack = ({
   tag: Tag = "div",
   display = "flex",
   children,
-  gap,
+  spacing,
   alignX,
   ...restProps
 }) => {
   if (process.env.NODE_ENV === "development" && restProps.start !== void 0 && Tag !== "ol") {
-    console.warn('Stack: start prop is only valid when tag="ol"');
+    console.warn('Stack: "start" prop is only valid with tag="ol"');
   }
   return /* @__PURE__ */ jsx(
     Box,
     {
       asChild: true,
       display,
-      gap,
+      gap: spacing,
       flexDirection: "column",
       alignItems: alignX ? alignItemsMap[alignX] : void 0,
       ...restProps,
@@ -735,63 +118,22 @@ const Stack = ({
     }
   );
 };
-const Switch = forwardRef(function Switch2({ className, checked, onChange, defaultChecked, ...restProps }, ref) {
-  const [isChecked, setIsChecked] = useState(defaultChecked || checked || false);
-  const baseClassName = useComponentStyles("switch", { base: true });
-  const sliderClassName = useComponentStyles("switch", { slider: true });
-  useEffect(() => {
-    if (checked !== void 0) {
-      setIsChecked(checked);
-    }
-  }, [checked]);
-  const toggle = useCallback(() => {
-    setIsChecked((checked2) => {
-      const newValue = !checked2;
-      if (onChange) {
-        onChange(newValue);
-      }
-      return newValue;
-    });
-  }, [onChange]);
-  const onChangeHandler = useCallback(
-    (event) => {
-      setIsChecked(event.target.checked);
-      if (onChange) {
-        onChange(event.target.checked);
-      }
-    },
-    [onChange]
-  );
-  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
-    "div",
+const Slottable = createSlottable("a");
+const Link = forwardRef(function Link2({ asChild, className, children, variant, underline, ...restProps }, ref) {
+  const linkClassName = useComponentStyles("link", {
+    base: true,
+    variants: { variant, underline }
+  });
+  return /* @__PURE__ */ jsx(
+    Slottable,
     {
-      className: classnames(className, container$2, baseClassName),
-      "data-checked": isChecked,
-      onClick: (event) => {
-        if (event.target.tagName === "INPUT") {
-          return;
-        }
-        toggle();
-      },
-      children: [
-        /* @__PURE__ */ jsx(
-          "input",
-          {
-            ref,
-            type: "checkbox",
-            className: input$3,
-            checked: isChecked,
-            onChange: onChangeHandler,
-            ...restProps
-          }
-        ),
-        /* @__PURE__ */ jsx("div", { className: sliderClassName, "data-checked": isChecked })
-      ]
+      asChild,
+      ref,
+      className: classnames(className, linkClassName),
+      ...restProps,
+      children
     }
-  ) });
-});
-const Text = forwardRef(function Text2({ tag: Tag = "span", asChild, children, className, ...restProps }, ref) {
-  return /* @__PURE__ */ jsx(Box, { ref, asChild: true, className: classnames(text, className), ...restProps, children: asChild ? children : /* @__PURE__ */ jsx(Tag, { children }) });
+  );
 });
 export {
   BlocksProvider,