@blockle/blocks 0.8.8 → 0.8.9

package/dist/index.cjs

@@ -5,583 +5,57 @@ const styles_lib_css_style_style_cjs = require("./styles/lib/css/style/style.cjs
 const styles_lib_theme_makeComponentTheme_cjs = require("./styles/lib/theme/makeComponentTheme.cjs");
 const styles_lib_theme_makeTheme_cjs = require("./styles/lib/theme/makeTheme.cjs");
 const styles_lib_theme_vars_css_cjs = require("./styles/lib/theme/vars.css.cjs");
+const styles_components_display_Divider_Divider_cjs = require("./styles/components/display/Divider/Divider.cjs");
 const styles_lib_css_atoms_sprinkles_css_cjs = require("./styles/lib/css/atoms/sprinkles.css.cjs");
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
-const styles_components_Button_Button_css_cjs = require("./styles/components/Button/Button.css.cjs");
-const styles_components_Checkbox_checkbox_css_cjs = require("./styles/components/Checkbox/checkbox.css.cjs");
-const styles_components_Dialog_dialog_css_cjs = require("./styles/components/Dialog/dialog.css.cjs");
-const reactDom = require("react-dom");
-const styles_components_Divider_divider_css_cjs = require("./styles/components/Divider/divider.css.cjs");
-const styles_components_Heading_heading_css_cjs = require("./styles/components/Heading/heading.css.cjs");
-const styles_components_Input_input_css_cjs = require("./styles/components/Input/input.css.cjs");
-const styles_components_Radio_radio_css_cjs = require("./styles/components/Radio/radio.css.cjs");
-const styles_components_Switch_switch_css_cjs = require("./styles/components/Switch/switch.css.cjs");
-const styles_components_Text_text_css_cjs = require("./styles/components/Text/text.css.cjs");
-const classnames = (...args) => {
-  const className = args.filter((arg) => arg && typeof arg === "string").join(" ");
-  return className || void 0;
-};
-const BlocksProviderContext = react.createContext(null);
-const BlocksProvider = ({
-  children,
-  theme,
-  className,
-  ...restProps
-}) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(BlocksProviderContext.Provider, { value: theme, children: /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      className: classnames(theme.vars, styles_lib_css_atoms_sprinkles_css_cjs.atoms({ fontFamily: "primary" }), className),
-      ...restProps,
-      children
-    }
-  ) });
-};
-function getAtomsAndProps(props) {
-  const atomProps = {};
-  const otherProps = {};
-  for (const [name, value] of Object.entries(props)) {
-    if (styles_lib_css_atoms_sprinkles_css_cjs.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__ */ jsxRuntime.jsx(Component, { ref, ...slotProps, children });
-    }
-    const childrenArray = react.Children.toArray(children);
-    const slot = childrenArray.find((child) => {
-      if (!react.isValidElement(child)) {
-        return false;
-      }
-      return child.type === Slot;
-    });
-    if (!slot) {
-      const Slot2 = childrenArray[0];
-      if (!react.isValidElement(childrenArray[0])) {
-        if (process.env.NODE_ENV === "development") {
-          console.warn("Slottable: First child is not a valid React element");
-        }
-        return null;
-      }
-      if (!react.isValidElement(Slot2)) {
-        return null;
-      }
-      return react.cloneElement(
-        Slot2,
-        {
-          ...mergeProps(slotProps, Slot2.props),
-          ref: composeRefs(ref, Slot2.ref)
-        },
-        Slot2.props.children
-      );
-    }
-    if (!react.isValidElement(slot) || !react.isValidElement(slot.props.children)) {
-      return null;
-    }
-    const newChildren = childrenArray.map((child) => {
-      if (!react.isValidElement(child)) {
-        return child;
-      }
-      if (child.type === Slot) {
-        return slot.props.children.props.children;
-      }
-      return child;
-    });
-    return react.cloneElement(
-      slot.props.children,
-      {
-        ...mergeProps(slotProps, slot.props),
-        ref: composeRefs(ref, slot.props.children.ref)
-      },
-      newChildren
-    );
-  }
-  return react.forwardRef(Slottable2);
-}
-const Slot = ({ children }) => children;
-const Slottable$2 = createSlottable("div");
-const Box = react.forwardRef(function Box2({ asChild, className, children, ...restProps }, ref) {
-  const [atomsProps, otherProps] = getAtomsAndProps(restProps);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Slottable$2,
+const styles_components_form_Button_Button_cjs = require("./styles/components/form/Button/Button.cjs");
+const styles_components_form_Checkbox_Checkbox_cjs = require("./styles/components/form/Checkbox/Checkbox.cjs");
+const styles_components_form_Input_Input_cjs = require("./styles/components/form/Input/Input.cjs");
+const styles_components_form_Radio_Radio_cjs = require("./styles/components/form/Radio/Radio.cjs");
+const styles_components_form_Switch_Switch_cjs = require("./styles/components/form/Switch/Switch.cjs");
+const styles_components_other_BlocksProvider_BlocksProvider_cjs = require("./styles/components/other/BlocksProvider/BlocksProvider.cjs");
+const styles_components_overlay_Dialog_Dialog_cjs = require("./styles/components/overlay/Dialog/Dialog.cjs");
+const styles_components_typography_Heading_Heading_cjs = require("./styles/components/typography/Heading/Heading.cjs");
+const styles_components_typography_Text_Text_cjs = require("./styles/components/typography/Text/Text.cjs");
+const Progress = react.forwardRef(function Progress2({ value, max = 100, className, ...restProps }, ref) {
+  const containerClassName = styles_components_display_Divider_Divider_cjs.useComponentStyles(
+    "progress",
     {
-      ref,
-      asChild,
-      className: classnames(className, styles_lib_css_atoms_sprinkles_css_cjs.atoms(atomsProps)),
-      ...otherProps,
-      children
-    }
+      base: true
+    },
+    false
   );
-});
-const useTheme = () => {
-  const theme = react.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__ */ jsxRuntime.jsx(Box, { color, className: classnames(spinnerClassName, className), ...restProps });
-};
-const Slottable$1 = createSlottable("button");
-const Button = react.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__ */ jsxRuntime.jsxs(
-    Slottable$1,
-    {
-      ref,
-      asChild,
-      disabled: disabled || loading,
-      className: classnames(styles_components_Button_Button_css_cjs.buttonReset, buttonClassName, styles_lib_css_atoms_sprinkles_css_cjs.atoms(atomsProps), className),
-      ...otherProps,
-      children: [
-        startSlot && /* @__PURE__ */ jsxRuntime.jsx("div", { children: startSlot }),
-        loading && /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size }),
-        /* @__PURE__ */ jsxRuntime.jsx(Slot, { children }),
-        endSlot && /* @__PURE__ */ jsxRuntime.jsx("div", { children: endSlot })
-      ]
-    }
+  const barClassName = styles_components_display_Divider_Divider_cjs.useComponentStyles(
+    "progress",
+    { bar: true, variants: { indeterminate: value === void 0 } },
+    false
   );
-});
-const Label = ({
-  visualOnly,
-  children,
-  className,
-  required,
-  size,
-  cursor,
-  ...restProps
-}) => {
-  const Component = visualOnly ? "span" : "label";
-  const containerClassName = useComponentStyles("label", {
-    base: true,
-    variants: { required, size }
-  });
+  const progress = value === void 0 ? 0 : value / max * 100;
   return /* @__PURE__ */ jsxRuntime.jsx(
-    Component,
+    styles_components_display_Divider_Divider_cjs.Box,
     {
-      className: classnames(containerClassName, className, styles_lib_css_atoms_sprinkles_css_cjs.atoms({ cursor })),
+      ref,
+      className: styles_components_display_Divider_Divider_cjs.classnames(containerClassName, className),
+      overflow: "hidden",
+      role: "progressbar",
+      "aria-valuenow": value,
+      "aria-valuemin": 0,
+      "aria-valuemax": max,
       ...restProps,
-      children
-    }
-  );
-};
-const Checkbox = react.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 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classnames(styles_components_Checkbox_checkbox_css_cjs.container, containerClassName, className), children: [
-    /* @__PURE__ */ jsxRuntime.jsx("input", { ref, type: "checkbox", name, className: styles_components_Checkbox_checkbox_css_cjs.input, ...restProps }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: classnames(styles_components_Checkbox_checkbox_css_cjs.icon, iconClassName) })
-  ] });
-  if (!label) {
-    return input;
-  }
-  return /* @__PURE__ */ jsxRuntime.jsxs("label", { className: labelClassName, children: [
-    input,
-    label && /* @__PURE__ */ jsxRuntime.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 = (container) => {
-  const focusable = container.querySelector(focusableSelectors);
-  return focusable || null;
-};
-const focusFirstElement = (container) => {
-  const focusable = getFirstFocusableElement(container);
-  if (focusable) {
-    focusable.focus();
-  }
-};
-const useFocusLock = ({ ref, active }) => {
-  react.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" ? react.useEffect : react.useLayoutEffect;
-const useKeyboard = (key, callback, { enabled = true, type = "keydown" } = {}) => {
-  react.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 = react.useRef();
-  react.useEffect(
-    () => () => {
-      if (layerRef.current) {
-        layerRef.current.remove();
-      }
-    },
-    []
-  );
-  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 = react.useRef(null);
-  if (isBrowser && active && !target.current) {
-    target.current = document.activeElement;
-  }
-  react.useEffect(() => {
-    if (target.current && !active && target.current instanceof HTMLElement) {
-      target.current.focus();
-    }
-    if (!active) {
-      target.current = null;
-    }
-  }, [active]);
-};
-const useVisibilityState = (open) => {
-  const [visible, setVisible] = react.useState(open);
-  const hide = react.useCallback(() => {
-    setVisible(false);
-  }, []);
-  react.useEffect(() => {
-    if (open) {
-      setVisible(true);
-    }
-  }, [open]);
-  return [visible, hide];
-};
-function hasAnimationDuration(element) {
-  if (!element) {
-    return false;
-  }
-  const style = window.getComputedStyle(element);
-  return style.transitionDuration !== "0s" || style.animationDuration !== "0s";
-}
-const Portal = ({ children, container }) => {
-  const context = useTheme();
-  return reactDom.createPortal(
-    /* @__PURE__ */ jsxRuntime.jsx(BlocksProvider, { theme: context, children }),
-    container || document.body
-  );
-};
-const DialogContext = react.createContext(void 0);
-const useNestedDialog = (open) => {
-  const parentDialog = react.useContext(DialogContext);
-  react.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 = react.useRef(null);
-  const dialogRef = react.useRef(null);
-  const layer = useLayer();
-  const [visible, hide] = useVisibilityState(open);
-  const [enabled, setEnabled] = react.useState(true);
-  const onBackdropClick = react.useCallback(
-    (event) => {
-      if (event.target === event.currentTarget) {
-        onRequestClose();
-      }
-    },
-    [onRequestClose]
-  );
-  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 = react.useCallback(() => {
-    if (!open) {
-      hide();
-    }
-  }, [hide, open]);
-  react.useEffect(() => {
-    if (open) {
-      return;
-    }
-    if (!hasAnimationDuration(dialogRef.current)) {
-      hide();
-    }
-  }, [hide, open]);
-  if (!visible) {
-    return null;
-  }
-  const dataOpen = typeof window === "undefined" && open ? "" : void 0;
-  return /* @__PURE__ */ jsxRuntime.jsx(Portal, { container: layer(), children: /* @__PURE__ */ jsxRuntime.jsx(DialogContext.Provider, { value: { setEnabled }, children: /* @__PURE__ */ jsxRuntime.jsx(
-    Box,
-    {
-      ref: backdropRef,
-      className: classnames(styles_components_Dialog_dialog_css_cjs.backdrop, backdropClassName),
-      "data-open": dataOpen,
-      onClick: onBackdropClick,
-      onAnimationEnd,
-      onTransitionEnd: onAnimationEnd,
       children: /* @__PURE__ */ jsxRuntime.jsx(
-        "dialog",
+        styles_components_display_Divider_Divider_cjs.Box,
         {
-          ref: dialogRef,
-          "aria-modal": "true",
-          open: true,
-          "data-open": dataOpen,
-          className: classnames(dialogClassName, className),
-          ...restProps,
-          children
+          className: styles_components_display_Divider_Divider_cjs.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__ */ jsxRuntime.jsx(
-    Box,
-    {
-      role: "separator",
-      width: "full",
-      backgroundColor: color ?? dividerDefaults.color,
-      className: classnames(className, dividerClass, styles_components_Divider_divider_css_cjs.divider),
-      ...restProps
-    }
   );
-};
-const Heading = ({
-  className,
-  level = 1,
-  children,
-  ...restProps
-}) => {
-  const Tag = `h${level}`;
-  return /* @__PURE__ */ jsxRuntime.jsx(Box, { asChild: true, className: classnames(styles_components_Heading_heading_css_cjs.heading, className), ...restProps, children: /* @__PURE__ */ jsxRuntime.jsx(Tag, { children }) });
-};
+});
 const justifyContentMap = {
   left: "flex-start",
   right: "flex-end",
@@ -605,7 +79,7 @@ const Inline = ({
   ...props
 }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
-    Box,
+    styles_components_display_Divider_Divider_cjs.Box,
     {
       asChild: true,
       display,
@@ -619,115 +93,23 @@ const Inline = ({
     }
   );
 };
-const Input = react.forwardRef(function Input2({ className, name, type = "text", startSlot, endSlot, label, placeholder, ...restProps }, ref) {
-  const id = react.useId();
-  const containerClassName = useComponentStyles("input", { container: true }, false);
-  const inputClassName = useComponentStyles("input", { input: true });
-  return /* @__PURE__ */ jsxRuntime.jsx(Box, { children: /* @__PURE__ */ jsxRuntime.jsxs(Box, { display: "flex", alignItems: "center", className: classnames(containerClassName, className), children: [
-    startSlot,
-    /* @__PURE__ */ jsxRuntime.jsx(Box, { asChild: true, width: "full", overflow: "hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
-      "input",
-      {
-        id,
-        ref,
-        name,
-        type,
-        placeholder: placeholder || label,
-        className: classnames(styles_components_Input_input_css_cjs.input, inputClassName),
-        ...restProps
-      }
-    ) }),
-    endSlot
-  ] }) });
-});
-const Slottable = createSlottable("a");
-const Link = react.forwardRef(function Link2({ asChild, className, children, variant, underline, ...restProps }, ref) {
-  const linkClassName = useComponentStyles("link", {
-    base: true,
-    variants: { variant, underline }
-  });
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Slottable,
-    {
-      asChild,
-      ref,
-      className: classnames(className, linkClassName),
-      ...restProps,
-      children
-    }
-  );
-});
-const Progress = react.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__ */ jsxRuntime.jsx(
-    Box,
-    {
-      ref,
-      className: classnames(containerClassName, className),
-      overflow: "hidden",
-      role: "progressbar",
-      "aria-valuenow": value,
-      "aria-valuemin": 0,
-      "aria-valuemax": max,
-      ...restProps,
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        Box,
-        {
-          className: classnames(barClassName),
-          backgroundColor: "currentColor",
-          width: "full",
-          height: "full",
-          style: { transform: value === void 0 ? void 0 : `translateX(-${100 - progress}%)` }
-        }
-      )
-    }
-  );
-});
-const Radio = react.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 input = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classnames(styles_components_Radio_radio_css_cjs.container, containerClassName, className), children: [
-    /* @__PURE__ */ jsxRuntime.jsx("input", { ref, type: "radio", name, className: styles_components_Radio_radio_css_cjs.input, ...restProps }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: classnames(styles_components_Radio_radio_css_cjs.icon, iconClassName) })
-  ] });
-  if (!label) {
-    return input;
-  }
-  return /* @__PURE__ */ jsxRuntime.jsxs("label", { className: labelClassName, children: [
-    input,
-    label && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-    Box,
+    styles_components_display_Divider_Divider_cjs.Box,
     {
       asChild: true,
       display,
-      gap,
+      gap: spacing,
       flexDirection: "column",
       alignItems: alignX ? alignItemsMap[alignX] : void 0,
       ...restProps,
@@ -735,93 +117,52 @@ const Stack = ({
     }
   );
 };
-const Switch = react.forwardRef(function Switch2({ className, checked, onChange, defaultChecked, ...restProps }, ref) {
-  const [isChecked, setIsChecked] = react.useState(defaultChecked || checked || false);
-  const baseClassName = useComponentStyles("switch", { base: true });
-  const sliderClassName = useComponentStyles("switch", { slider: true });
-  react.useEffect(() => {
-    if (checked !== void 0) {
-      setIsChecked(checked);
-    }
-  }, [checked]);
-  const toggle = react.useCallback(() => {
-    setIsChecked((checked2) => {
-      const newValue = !checked2;
-      if (onChange) {
-        onChange(newValue);
-      }
-      return newValue;
-    });
-  }, [onChange]);
-  const onChangeHandler = react.useCallback(
-    (event) => {
-      setIsChecked(event.target.checked);
-      if (onChange) {
-        onChange(event.target.checked);
-      }
-    },
-    [onChange]
-  );
-  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
+const Slottable = styles_components_display_Divider_Divider_cjs.createSlottable("a");
+const Link = react.forwardRef(function Link2({ asChild, className, children, variant, underline, ...restProps }, ref) {
+  const linkClassName = styles_components_display_Divider_Divider_cjs.useComponentStyles("link", {
+    base: true,
+    variants: { variant, underline }
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Slottable,
     {
-      className: classnames(className, styles_components_Switch_switch_css_cjs.container, baseClassName),
-      "data-checked": isChecked,
-      onClick: (event) => {
-        if (event.target.tagName === "INPUT") {
-          return;
-        }
-        toggle();
-      },
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "input",
-          {
-            ref,
-            type: "checkbox",
-            className: styles_components_Switch_switch_css_cjs.input,
-            checked: isChecked,
-            onChange: onChangeHandler,
-            ...restProps
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: sliderClassName, "data-checked": isChecked })
-      ]
+      asChild,
+      ref,
+      className: styles_components_display_Divider_Divider_cjs.classnames(className, linkClassName),
+      ...restProps,
+      children
     }
-  ) });
-});
-const Text = react.forwardRef(function Text2({ tag: Tag = "span", asChild, children, className, ...restProps }, ref) {
-  return /* @__PURE__ */ jsxRuntime.jsx(Box, { ref, asChild: true, className: classnames(styles_components_Text_text_css_cjs.text, className), ...restProps, children: asChild ? children : /* @__PURE__ */ jsxRuntime.jsx(Tag, { children }) });
+  );
 });
 exports.breakpointQuery = styles_lib_css_atoms_breakpoints_cjs.breakpointQuery;
 exports.style = styles_lib_css_style_style_cjs.style;
 exports.makeComponentTheme = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme;
 exports.makeTheme = styles_lib_theme_makeTheme_cjs.makeTheme;
 exports.vars = styles_lib_theme_vars_css_cjs.vars;
+exports.Box = styles_components_display_Divider_Divider_cjs.Box;
+exports.Divider = styles_components_display_Divider_Divider_cjs.Divider;
+exports.Slot = styles_components_display_Divider_Divider_cjs.Slot;
+exports.classnames = styles_components_display_Divider_Divider_cjs.classnames;
+exports.createSlottable = styles_components_display_Divider_Divider_cjs.createSlottable;
+exports.useComponentStyleDefaultProps = styles_components_display_Divider_Divider_cjs.useComponentStyleDefaultProps;
+exports.useComponentStyles = styles_components_display_Divider_Divider_cjs.useComponentStyles;
 exports.atoms = styles_lib_css_atoms_sprinkles_css_cjs.atoms;
-exports.BlocksProvider = BlocksProvider;
-exports.Box = Box;
-exports.Button = Button;
-exports.Checkbox = Checkbox;
-exports.Dialog = Dialog;
-exports.Divider = Divider;
-exports.Heading = Heading;
+exports.Button = styles_components_form_Button_Button_cjs.Button;
+exports.Spinner = styles_components_form_Button_Button_cjs.Spinner;
+exports.Checkbox = styles_components_form_Checkbox_Checkbox_cjs.Checkbox;
+exports.Label = styles_components_form_Checkbox_Checkbox_cjs.Label;
+exports.Input = styles_components_form_Input_Input_cjs.Input;
+exports.Radio = styles_components_form_Radio_Radio_cjs.Radio;
+exports.Switch = styles_components_form_Switch_Switch_cjs.Switch;
+exports.BlocksProvider = styles_components_other_BlocksProvider_BlocksProvider_cjs.BlocksProvider;
+exports.Dialog = styles_components_overlay_Dialog_Dialog_cjs.Dialog;
+exports.Portal = styles_components_overlay_Dialog_Dialog_cjs.Portal;
+exports.useIsomorphicLayoutEffect = styles_components_overlay_Dialog_Dialog_cjs.useIsomorphicLayoutEffect;
+exports.useKeyboard = styles_components_overlay_Dialog_Dialog_cjs.useKeyboard;
+exports.usePreventBodyScroll = styles_components_overlay_Dialog_Dialog_cjs.usePreventBodyScroll;
+exports.Heading = styles_components_typography_Heading_Heading_cjs.Heading;
+exports.Text = styles_components_typography_Text_Text_cjs.Text;
 exports.Inline = Inline;
-exports.Input = Input;
-exports.Label = Label;
 exports.Link = Link;
-exports.Portal = Portal;
 exports.Progress = Progress;
-exports.Radio = Radio;
-exports.Slot = Slot;
-exports.Spinner = Spinner;
 exports.Stack = Stack;
-exports.Switch = Switch;
-exports.Text = Text;
-exports.classnames = classnames;
-exports.createSlottable = createSlottable;
-exports.useComponentStyleDefaultProps = useComponentStyleDefaultProps;
-exports.useComponentStyles = useComponentStyles;
-exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect;
-exports.useKeyboard = useKeyboard;
-exports.usePreventBodyScroll = usePreventBodyScroll;