@blockle/blocks 0.12.2 → 0.13.0

package/dist/index.cjs

@@ -119,20 +119,20 @@ const Stack = ({
     }
   );
 };
-const Slottable = styles_components_display_Divider_Divider_cjs.createSlottable("a");
+const { Template, Slot } = styles_components_display_Divider_Divider_cjs.createAsChildTemplate("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,
+    Template,
     {
       asChild,
       ref,
       className: styles_components_display_Divider_Divider_cjs.classnames(className, linkClassName),
       ...restProps,
-      children
+      children: /* @__PURE__ */ jsxRuntime.jsx(Slot, { children })
     }
   );
 });
@@ -350,9 +350,8 @@ 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.createAsChildTemplate = styles_components_display_Divider_Divider_cjs.createAsChildTemplate;
 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;

package/dist/index.d.mts

@@ -1 +1 @@
-export { BlocksProvider, BlocksProviderProps, Box, BoxProps, Button, ButtonProps, Checkbox, CheckboxProps, Dialog, DialogProps, Divider, DividerProps, Heading, HeadingProps, Inline, InlineProps, Input, InputProps, Label, LabelProps, Link, LinkProps, Portal, PortalProps, Progress, ProgressProps, Radio, RadioProps, Select, SelectProps, Slider, SliderProps, Slot, Spinner, SpinnerProps, Stack, StackProps, Switch, SwitchProps, Text, TextProps, ThemeComponentsStyles, ThemeTokens, Tooltip, TooltipProps, atoms, breakpointQuery, classnames, createSlottable, makeComponentTheme, makeTheme, style, useComponentStyleDefaultProps, useComponentStyles, useIsomorphicLayoutEffect, useKeyboard, usePreventBodyScroll, useRootAriaHidden, vars } from './momotaro.chunk.js';
+export { BlocksProvider, BlocksProviderProps, Box, BoxProps, Button, ButtonProps, Checkbox, CheckboxProps, Dialog, DialogProps, Divider, DividerProps, Heading, HeadingProps, Inline, InlineProps, Input, InputProps, Label, LabelProps, Link, LinkProps, Portal, PortalProps, Progress, ProgressProps, Radio, RadioProps, Select, SelectProps, Slider, SliderProps, Spinner, SpinnerProps, Stack, StackProps, Switch, SwitchProps, Text, TextProps, ThemeComponentsStyles, ThemeTokens, Tooltip, TooltipProps, atoms, breakpointQuery, classnames, createAsChildTemplate, makeComponentTheme, makeTheme, style, useComponentStyleDefaultProps, useComponentStyles, useIsomorphicLayoutEffect, useKeyboard, usePreventBodyScroll, useRootAriaHidden, vars } from './momotaro.chunk.js';

package/dist/index.d.ts

@@ -1 +1 @@
-export { BlocksProvider, BlocksProviderProps, Box, BoxProps, Button, ButtonProps, Checkbox, CheckboxProps, Dialog, DialogProps, Divider, DividerProps, Heading, HeadingProps, Inline, InlineProps, Input, InputProps, Label, LabelProps, Link, LinkProps, Portal, PortalProps, Progress, ProgressProps, Radio, RadioProps, Select, SelectProps, Slider, SliderProps, Slot, Spinner, SpinnerProps, Stack, StackProps, Switch, SwitchProps, Text, TextProps, ThemeComponentsStyles, ThemeTokens, Tooltip, TooltipProps, atoms, breakpointQuery, classnames, createSlottable, makeComponentTheme, makeTheme, style, useComponentStyleDefaultProps, useComponentStyles, useIsomorphicLayoutEffect, useKeyboard, usePreventBodyScroll, useRootAriaHidden, vars } from './momotaro.chunk.js';
+export { BlocksProvider, BlocksProviderProps, Box, BoxProps, Button, ButtonProps, Checkbox, CheckboxProps, Dialog, DialogProps, Divider, DividerProps, Heading, HeadingProps, Inline, InlineProps, Input, InputProps, Label, LabelProps, Link, LinkProps, Portal, PortalProps, Progress, ProgressProps, Radio, RadioProps, Select, SelectProps, Slider, SliderProps, Spinner, SpinnerProps, Stack, StackProps, Switch, SwitchProps, Text, TextProps, ThemeComponentsStyles, ThemeTokens, Tooltip, TooltipProps, atoms, breakpointQuery, classnames, createAsChildTemplate, makeComponentTheme, makeTheme, style, useComponentStyleDefaultProps, useComponentStyles, useIsomorphicLayoutEffect, useKeyboard, usePreventBodyScroll, useRootAriaHidden, vars } from './momotaro.chunk.js';

package/dist/index.mjs

@@ -5,8 +5,8 @@ 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, composeRefs, BlocksProviderContext } from "./styles/components/display/Divider/Divider.mjs";
-import { Divider, Slot, useComponentStyleDefaultProps } from "./styles/components/display/Divider/Divider.mjs";
+import { useComponentStyles, Box, classnames, createAsChildTemplate, composeRefs, BlocksProviderContext } from "./styles/components/display/Divider/Divider.mjs";
+import { Divider, 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 { forwardRef, useState, useRef, useLayoutEffect, useEffect, useCallback, useId, Children, isValidElement, cloneElement, useContext } from "react";
@@ -121,20 +121,20 @@ const Stack = ({
     }
   );
 };
-const Slottable = createSlottable("a");
+const { Template, Slot } = createAsChildTemplate("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,
+    Template,
     {
       asChild,
       ref,
       className: classnames(className, linkClassName),
       ...restProps,
-      children
+      children: /* @__PURE__ */ jsx(Slot, { children })
     }
   );
 });
@@ -362,7 +362,6 @@ export {
   Radio,
   Select,
   Slider,
-  Slot,
   Spinner,
   Stack,
   Switch,
@@ -371,7 +370,7 @@ export {
   atoms,
   breakpointQuery,
   classnames,
-  createSlottable,
+  createAsChildTemplate,
   makeComponentTheme,
   makeTheme,
   style,

package/dist/momotaro.chunk.d.ts

@@ -627,7 +627,7 @@ type SpinnerProps = {
 } & MarginAtoms;
 declare const Spinner: React.FC<SpinnerProps>;
 
-type HTMLElementProps<E extends Element> = Omit<React.HTMLProps<E>, keyof Atoms | 'as' | 'ref'>;
+type HTMLElementProps<E extends Element> = Omit<React.HTMLProps<E>, keyof Atoms | 'ref'>;
 
 type ButtonProps = {
     children: React.ReactNode;
@@ -642,6 +642,7 @@ type ButtonProps = {
     endSlot?: React.ReactNode;
     disabled?: boolean;
     asChild?: boolean;
+    popovertarget?: string;
 } & Omit<HTMLElementProps<HTMLButtonElement>, 'size'> & MarginAtoms;
 declare const Button: react.ForwardRefExoticComponent<{
     children: React.ReactNode;
@@ -656,6 +657,7 @@ declare const Button: react.ForwardRefExoticComponent<{
     endSlot?: React.ReactNode;
     disabled?: boolean | undefined;
     asChild?: boolean | undefined;
+    popovertarget?: string | undefined;
 } & Omit<HTMLElementProps<HTMLButtonElement>, "size"> & MarginAtoms & react.RefAttributes<HTMLButtonElement>>;
 
 type CheckboxProps = {
@@ -1106,20 +1108,36 @@ type TextProps = {
 } & TextAtoms & MarginAtoms & PaddingAtoms & HTMLElementProps<HTMLSpanElement>;
 declare const Text: React.FC<TextProps>;
 
-type HTMLElementTags = 'a' | 'article' | 'button' | 'div' | 'p' | 'section' | 'span' | 'strong';
+type TemplateProps = {
+    asChild?: boolean;
+    children?: React.ReactNode;
+};
 /**
- * Notes:
- * - <Slot> can only have one child
- * - <Slot> can only be used once
- * - <Slot> can only be used as a direct descendant of <Slottable>
+ * Create a Template component that can render as a child of another component with asChild prop.
+ *
+ * Example
+ * // Create a Template and Slot components with div as default element
+ * const { Template, Slot } = createAsChildContainer('div');
+ *
+ * const MyComponent = ({ children, asChild, ...restProps }) => {
+ *  return (
+ *   <Template asChild={asChild} {...restProps}>
+ *     <Slot>{childen}</Slot> // Slot is required, will be replaced with children
+ *   </Template>
+ * );
+ * }
+ *
+ * <MyComponent className="test">Not a link</MyComponent> // Renders as <div class="test">Not a link</div>
+ * <MyComponent className="test"><a href="#">Link</a></MyComponent> // Renders as <div class="test"><a href="#">Link</a></div>
+ * <MyComponent className="test" asChild><a href="#">Link</a></MyComponent> // Renders as <a href="#" class="test">Link</a>
  */
-declare function createSlottable<E extends HTMLElementTags>(defaultElement: E): (props: {
-    asChild?: boolean | undefined;
-} & react__default.HTMLProps<unknown>, ref: react__default.ForwardedRef<any>) => react__default.ReactElement<any, string | react__default.JSXElementConstructor<any>> | null;
+declare function createAsChildTemplate<T extends keyof HTMLElementTagNameMap>(defaultElement: T): {
+    Template: react.ForwardRefExoticComponent<TemplateProps & HTMLElementProps<HTMLElementTagNameMap[T]> & react.RefAttributes<HTMLElementTagNameMap[T]>>;
+    Slot: react.FC<SlotProps>;
+};
 type SlotProps = {
-    children: react__default.ReactNode;
+    children: React.ReactNode;
 };
-declare const Slot: react__default.FC<SlotProps>;
 
 declare function useComponentStyles<T extends keyof ComponentThemesProps>(name: T, props: ComponentThemesProps[T], useDefaultVariants?: boolean): string;
 
@@ -1150,9 +1168,9 @@ declare const usePreventBodyScroll: (enabled?: boolean) => void;
  */
 declare const useRootAriaHidden: (hidden: boolean) => void;
 
-type Args = null | undefined | boolean | string;
+type Args = null | undefined | boolean | string | unknown;
 declare const classnames: (...args: Args[]) => string | undefined;
 
 declare const momotaro: Theme;
 
-export { BlocksProvider, type BlocksProviderProps, Box, type BoxProps, Button, type ButtonProps, Checkbox, type CheckboxProps, Dialog, type DialogProps, Divider, type DividerProps, Heading, type HeadingProps, Inline, type InlineProps, Input, type InputProps, Label, type LabelProps, Link, type LinkProps, Portal, type PortalProps, Progress, type ProgressProps, Radio, type RadioProps, Select, type SelectProps, Slider, type SliderProps, Slot, Spinner, type SpinnerProps, Stack, type StackProps, Switch, type SwitchProps, Text, type TextProps, type ThemeComponentsStyles, type ThemeTokens, Tooltip, type TooltipProps, atoms, breakpointQuery, classnames, createSlottable, makeComponentTheme, makeTheme, momotaro, style, useComponentStyleDefaultProps, useComponentStyles, useIsomorphicLayoutEffect, useKeyboard, usePreventBodyScroll, useRootAriaHidden, vars };
+export { BlocksProvider, type BlocksProviderProps, Box, type BoxProps, Button, type ButtonProps, Checkbox, type CheckboxProps, Dialog, type DialogProps, Divider, type DividerProps, Heading, type HeadingProps, Inline, type InlineProps, Input, type InputProps, Label, type LabelProps, Link, type LinkProps, Portal, type PortalProps, Progress, type ProgressProps, Radio, type RadioProps, Select, type SelectProps, Slider, type SliderProps, Spinner, type SpinnerProps, Stack, type StackProps, Switch, type SwitchProps, Text, type TextProps, type ThemeComponentsStyles, type ThemeTokens, Tooltip, type TooltipProps, atoms, breakpointQuery, classnames, createAsChildTemplate, makeComponentTheme, makeTheme, momotaro, style, useComponentStyleDefaultProps, useComponentStyles, useIsomorphicLayoutEffect, useKeyboard, usePreventBodyScroll, useRootAriaHidden, vars };

package/dist/styles/components/display/Divider/Divider.cjs

@@ -88,20 +88,6 @@ const classnames = (...args) => {
   const className = args.filter((arg) => arg && typeof arg === "string").join(" ");
   return className || void 0;
 };
-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) {
@@ -122,82 +108,81 @@ function mergeProps(slotProps, childProps) {
     } else if (propName === "style") {
       overrideProps[propName] = { ...slotPropValue, ...childPropValue };
     } else if (propName === "className") {
-      overrideProps[propName] = [slotPropValue, childPropValue].filter(Boolean).join(" ");
+      overrideProps[propName] = classnames(slotPropValue, childPropValue);
     } else {
       overrideProps[propName] = childPropValue;
     }
   }
   return { ...slotProps, ...overrideProps };
 }
-function createSlottable(defaultElement) {
-  function Slottable2(props, ref) {
-    const { asChild, children, ...slotProps } = props;
-    const Component = defaultElement;
+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 createAsChildTemplate(defaultElement) {
+  const Tag = defaultElement;
+  const Template2 = react.forwardRef(function Template22({ asChild, children, ...rootProps }, ref) {
     if (!asChild) {
-      return /* @__PURE__ */ jsxRuntime.jsx(Component, { ref, ...slotProps, children });
+      const tagProps = { ref, ...rootProps };
+      return /* @__PURE__ */ jsxRuntime.jsx(Tag, { ...tagProps, children });
     }
     const childrenArray = react.Children.toArray(children);
-    const slot = childrenArray.find((child) => {
+    const slotIndex = childrenArray.findIndex((child) => {
       if (!react.isValidElement(child)) {
         return false;
       }
-      return child.type === Slot;
+      return child.type === Slot$1;
     });
+    const slot = childrenArray[slotIndex];
     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 (process.env.NODE_ENV === "development") {
+        console.error("Template: No Slot provided");
       }
-      if (!react.isValidElement(Slot2)) {
-        return null;
-      }
-      return react.cloneElement(
-        Slot2,
-        {
-          ...mergeProps(slotProps, Slot2.props),
-          ref: composeRefs(ref, Slot2.ref)
-        },
-        Slot2.props.children
-      );
+      return null;
     }
     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;
-    });
+    const nextChildren = [...childrenArray];
+    nextChildren[slotIndex] = slot.props.children.props.children;
     return react.cloneElement(
       slot.props.children,
       {
-        ...mergeProps(slotProps, slot.props),
+        ...mergeProps(rootProps, slot.props.children.props),
         ref: composeRefs(ref, slot.props.children.ref)
       },
-      newChildren
+      nextChildren
     );
-  }
-  return react.forwardRef(Slottable2);
+  });
+  return {
+    Template: Template2,
+    Slot: Slot$1
+  };
 }
-const Slot = ({ children }) => children;
-const Slottable = createSlottable("div");
+const Slot$1 = ({ children }) => {
+  return children;
+};
+const { Template, Slot } = createAsChildTemplate("div");
 const Box = react.forwardRef(function Box2({ asChild, className, children, ...restProps }, ref) {
   const [atomsProps, otherProps] = styles_lib_utils_atomProps_cjs.getAtomsAndProps(restProps);
   return /* @__PURE__ */ jsxRuntime.jsx(
-    Slottable,
+    Template,
     {
       ref,
       asChild,
       className: classnames(className, styles_lib_css_atoms_sprinkles_css_cjs.atoms(atomsProps)),
       ...otherProps,
-      children
+      children: /* @__PURE__ */ jsxRuntime.jsx(Slot, { children })
     }
   );
 });
@@ -218,10 +203,9 @@ const Divider = ({ className, color, ...restProps }) => {
 exports.BlocksProviderContext = BlocksProviderContext;
 exports.Box = Box;
 exports.Divider = Divider;
-exports.Slot = Slot;
 exports.classnames = classnames;
 exports.composeRefs = composeRefs;
-exports.createSlottable = createSlottable;
+exports.createAsChildTemplate = createAsChildTemplate;
 exports.useComponentStyleDefaultProps = useComponentStyleDefaultProps;
 exports.useComponentStyles = useComponentStyles;
 exports.useTheme = useTheme;

package/dist/styles/components/display/Divider/Divider.mjs

@@ -87,20 +87,6 @@ const classnames = (...args) => {
   const className = args.filter((arg) => arg && typeof arg === "string").join(" ");
   return className || void 0;
 };
-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) {
@@ -121,82 +107,81 @@ function mergeProps(slotProps, childProps) {
     } else if (propName === "style") {
       overrideProps[propName] = { ...slotPropValue, ...childPropValue };
     } else if (propName === "className") {
-      overrideProps[propName] = [slotPropValue, childPropValue].filter(Boolean).join(" ");
+      overrideProps[propName] = classnames(slotPropValue, childPropValue);
     } else {
       overrideProps[propName] = childPropValue;
     }
   }
   return { ...slotProps, ...overrideProps };
 }
-function createSlottable(defaultElement) {
-  function Slottable2(props, ref) {
-    const { asChild, children, ...slotProps } = props;
-    const Component = defaultElement;
+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 createAsChildTemplate(defaultElement) {
+  const Tag = defaultElement;
+  const Template2 = forwardRef(function Template22({ asChild, children, ...rootProps }, ref) {
     if (!asChild) {
-      return /* @__PURE__ */ jsx(Component, { ref, ...slotProps, children });
+      const tagProps = { ref, ...rootProps };
+      return /* @__PURE__ */ jsx(Tag, { ...tagProps, children });
     }
     const childrenArray = Children.toArray(children);
-    const slot = childrenArray.find((child) => {
+    const slotIndex = childrenArray.findIndex((child) => {
       if (!isValidElement(child)) {
         return false;
       }
-      return child.type === Slot;
+      return child.type === Slot$1;
     });
+    const slot = childrenArray[slotIndex];
     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 (process.env.NODE_ENV === "development") {
+        console.error("Template: No Slot provided");
       }
-      if (!isValidElement(Slot2)) {
-        return null;
-      }
-      return cloneElement(
-        Slot2,
-        {
-          ...mergeProps(slotProps, Slot2.props),
-          ref: composeRefs(ref, Slot2.ref)
-        },
-        Slot2.props.children
-      );
+      return null;
     }
     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;
-    });
+    const nextChildren = [...childrenArray];
+    nextChildren[slotIndex] = slot.props.children.props.children;
     return cloneElement(
       slot.props.children,
       {
-        ...mergeProps(slotProps, slot.props),
+        ...mergeProps(rootProps, slot.props.children.props),
         ref: composeRefs(ref, slot.props.children.ref)
       },
-      newChildren
+      nextChildren
     );
-  }
-  return forwardRef(Slottable2);
+  });
+  return {
+    Template: Template2,
+    Slot: Slot$1
+  };
 }
-const Slot = ({ children }) => children;
-const Slottable = createSlottable("div");
+const Slot$1 = ({ children }) => {
+  return children;
+};
+const { Template, Slot } = createAsChildTemplate("div");
 const Box = forwardRef(function Box2({ asChild, className, children, ...restProps }, ref) {
   const [atomsProps, otherProps] = getAtomsAndProps(restProps);
   return /* @__PURE__ */ jsx(
-    Slottable,
+    Template,
     {
       ref,
       asChild,
       className: classnames(className, atoms(atomsProps)),
       ...otherProps,
-      children
+      children: /* @__PURE__ */ jsx(Slot, { children })
     }
   );
 });
@@ -218,10 +203,9 @@ export {
   BlocksProviderContext,
   Box,
   Divider,
-  Slot,
   classnames,
   composeRefs,
-  createSlottable,
+  createAsChildTemplate,
   useComponentStyleDefaultProps,
   useComponentStyles,
   useTheme

package/dist/styles/components/form/Button/Button.cjs

@@ -1,15 +1,15 @@
 "use strict";
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
-const styles_lib_utils_atomProps_cjs = require("../../../lib/utils/atom-props.cjs");
 const styles_components_display_Divider_Divider_cjs = require("../../display/Divider/Divider.cjs");
+const styles_lib_utils_atomProps_cjs = require("../../../lib/utils/atom-props.cjs");
 const styles_components_form_Button_Button_css_cjs = require("./Button.css.cjs");
 const styles_lib_css_atoms_sprinkles_css_cjs = require("../../../lib/css/atoms/sprinkles.css.cjs");
 const Spinner = ({ className, size, color, ...restProps }) => {
   const spinnerClassName = styles_components_display_Divider_Divider_cjs.useComponentStyles("spinner", { base: true, variants: { size, color } });
   return /* @__PURE__ */ jsxRuntime.jsx(styles_components_display_Divider_Divider_cjs.Box, { color, className: styles_components_display_Divider_Divider_cjs.classnames(spinnerClassName, className), ...restProps });
 };
-const Slottable = styles_components_display_Divider_Divider_cjs.createSlottable("button");
+const { Template, Slot } = styles_components_display_Divider_Divider_cjs.createAsChildTemplate("button");
 const Button = react.forwardRef(function Button2({
   children,
   className,
@@ -35,7 +35,7 @@ const Button = react.forwardRef(function Button2({
   });
   const [atomsProps, otherProps] = styles_lib_utils_atomProps_cjs.getAtomsAndProps(restProps);
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    Slottable,
+    Template,
     {
       ref,
       asChild,
@@ -45,7 +45,7 @@ const Button = react.forwardRef(function Button2({
       children: [
         startSlot && /* @__PURE__ */ jsxRuntime.jsx("div", { children: startSlot }),
         loading && /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size }),
-        /* @__PURE__ */ jsxRuntime.jsx(styles_components_display_Divider_Divider_cjs.Slot, { children }),
+        /* @__PURE__ */ jsxRuntime.jsx(Slot, { children }),
         endSlot && /* @__PURE__ */ jsxRuntime.jsx("div", { children: endSlot })
       ]
     }

package/dist/styles/components/form/Button/Button.mjs

@@ -1,14 +1,14 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
+import { useComponentStyles, Box, classnames, createAsChildTemplate } from "../../display/Divider/Divider.mjs";
 import { getAtomsAndProps } from "../../../lib/utils/atom-props.mjs";
-import { useComponentStyles, Box, classnames, createSlottable, Slot } from "../../display/Divider/Divider.mjs";
 import { buttonReset } from "./Button.css.mjs";
 import { atoms } from "../../../lib/css/atoms/sprinkles.css.mjs";
 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 = createSlottable("button");
+const { Template, Slot } = createAsChildTemplate("button");
 const Button = forwardRef(function Button2({
   children,
   className,
@@ -34,7 +34,7 @@ const Button = forwardRef(function Button2({
   });
   const [atomsProps, otherProps] = getAtomsAndProps(restProps);
   return /* @__PURE__ */ jsxs(
-    Slottable,
+    Template,
     {
       ref,
       asChild,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blockle/blocks",
-  "version": "0.12.2",
+  "version": "0.13.0",
   "description": "Blocks design system",
   "repository": "git@github.com:Blockle/blocks.git",
   "license": "MIT",