@blockle/blocks 0.18.4 → 0.19.1

package/dist/momotaro.chunk.d.ts

@@ -1,6 +1,6 @@
 import { StyleRule } from '@vanilla-extract/css';
-import * as react from 'react';
-import react__default, { useEffect } from 'react';
+import React$1, { useEffect } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as _vanilla_extract_sprinkles from '@vanilla-extract/sprinkles';
 
 declare const atoms: ((props: {
@@ -621,13 +621,14 @@ type ProgressProps = {
     className?: string;
     indeterminate?: boolean;
     max?: number;
-    style?: React.CSSProperties;
+    style?: React$1.CSSProperties;
     /**
      * The value of the progress bar, between 0 and max=100.
      */
     value?: number;
+    ref?: React$1.Ref<HTMLDivElement>;
 };
-declare const Progress: react.ForwardRefExoticComponent<ProgressProps & react.RefAttributes<HTMLProgressElement>>;
+declare const Progress: React$1.FC<ProgressProps>;
 
 type SpinnerProps = {
     className?: string;
@@ -638,61 +639,40 @@ type SpinnerProps = {
 declare const Spinner: React.FC<SpinnerProps>;
 
 type ButtonProps = {
-    children: React.ReactNode;
-    type?: 'button' | 'submit' | 'reset';
-    variant?: ButtonTheme['variants']['variant'];
-    intent?: ButtonTheme['variants']['intent'];
-    size?: ButtonTheme['variants']['size'];
-    inlineSize?: Atoms['inlineSize'];
     alignSelf?: Atoms['alignSelf'];
-    loading?: boolean;
-    startSlot?: React.ReactNode;
-    endSlot?: React.ReactNode;
-    disabled?: boolean;
     asChild?: boolean;
-    popovertarget?: string;
-} & Omit<HTMLElementProps<HTMLButtonElement>, 'size'> & MarginAtoms;
-declare const Button: react.ForwardRefExoticComponent<{
-    children: React.ReactNode;
-    type?: "button" | "submit" | "reset";
-    variant?: ButtonTheme["variants"]["variant"];
-    intent?: ButtonTheme["variants"]["intent"];
-    size?: ButtonTheme["variants"]["size"];
-    inlineSize?: Atoms["inlineSize"];
-    alignSelf?: Atoms["alignSelf"];
-    loading?: boolean;
-    startSlot?: React.ReactNode;
-    endSlot?: React.ReactNode;
+    children: React$1.ReactNode;
     disabled?: boolean;
-    asChild?: boolean;
+    endSlot?: React$1.ReactNode;
+    inlineSize?: Atoms['inlineSize'];
+    intent?: ButtonTheme['variants']['intent'];
+    loading?: boolean;
     popovertarget?: string;
-} & Omit<HTMLElementProps<HTMLButtonElement>, "size"> & MarginAtoms & react.RefAttributes<HTMLButtonElement>>;
+    ref?: React$1.Ref<HTMLButtonElement>;
+    size?: ButtonTheme['variants']['size'];
+    startSlot?: React$1.ReactNode;
+    type?: 'button' | 'submit' | 'reset';
+    variant?: ButtonTheme['variants']['variant'];
+} & Omit<HTMLElementProps<HTMLButtonElement>, 'size'> & MarginAtoms;
+declare const Button: React$1.FC<ButtonProps>;
 
 type CheckboxProps = {
+    children?: React$1.ReactNode;
     name: string;
-    children?: react__default.ReactNode;
+    ref?: React$1.Ref<HTMLInputElement>;
     required?: boolean;
 } & HTMLElementProps<HTMLInputElement>;
-declare const Checkbox: react__default.ForwardRefExoticComponent<{
-    name: string;
-    children?: react__default.ReactNode;
-    required?: boolean;
-} & HTMLElementProps<HTMLInputElement> & react__default.RefAttributes<HTMLInputElement>>;
+declare const Checkbox: React$1.FC<CheckboxProps>;
 
 type InputProps = {
     className?: string;
-    name: string;
-    type?: OptionalLiteral<'email' | 'number' | 'password' | 'tel' | 'text' | 'url'>;
-    startSlot?: React.ReactNode;
     endSlot?: React.ReactNode;
-} & Omit<HTMLElementProps<HTMLInputElement>, 'type'>;
-declare const Input: react.ForwardRefExoticComponent<{
-    className?: string;
     name: string;
-    type?: OptionalLiteral<"email" | "number" | "password" | "tel" | "text" | "url">;
+    ref?: React.Ref<HTMLInputElement>;
     startSlot?: React.ReactNode;
-    endSlot?: React.ReactNode;
-} & Omit<HTMLElementProps<HTMLInputElement>, "type"> & react.RefAttributes<HTMLInputElement>>;
+    type?: OptionalLiteral<'email' | 'number' | 'password' | 'tel' | 'text' | 'url'>;
+} & Omit<HTMLElementProps<HTMLInputElement>, 'type'>;
+declare const Input: React.FC<InputProps>;
 
 type LabelProps = {
     /**
@@ -711,26 +691,20 @@ type LabelProps = {
 declare const Label: React.FC<LabelProps>;
 
 type RadioProps = {
-    name: string;
-    value: string;
     children?: React.ReactNode;
-} & HTMLElementProps<HTMLInputElement>;
-declare const Radio: react.ForwardRefExoticComponent<{
     name: string;
+    ref?: React.Ref<HTMLInputElement>;
     value: string;
-    children?: React.ReactNode;
-} & HTMLElementProps<HTMLInputElement> & react.RefAttributes<HTMLInputElement>>;
+} & HTMLElementProps<HTMLInputElement>;
+declare const Radio: React.FC<RadioProps>;
 
 type SelectProps = {
-    children: react__default.ReactNode;
+    children: React$1.ReactNode;
     placeholder?: string;
+    ref?: React$1.Ref<HTMLSelectElement>;
     variant?: SelectTheme['variants']['variant'];
 } & HTMLElementProps<HTMLSelectElement>;
-declare const Select: react__default.ForwardRefExoticComponent<{
-    children: react__default.ReactNode;
-    placeholder?: string;
-    variant?: SelectTheme["variants"]["variant"];
-} & HTMLElementProps<HTMLSelectElement> & react__default.RefAttributes<HTMLSelectElement>>;
+declare const Select: React$1.FC<SelectProps>;
 
 type SliderProps = {
     name?: string;
@@ -749,257 +723,22 @@ type SliderProps = {
     disabled?: boolean;
     precision?: number;
 };
-declare const Slider: react__default.FC<SliderProps>;
+declare const Slider: React$1.FC<SliderProps>;
 
 type SwitchProps = {
     onChange?: (value: boolean) => void;
+    ref?: React.Ref<HTMLInputElement>;
 } & Omit<HTMLElementProps<HTMLInputElement>, 'onChange'>;
-declare const Switch: react.ForwardRefExoticComponent<{
-    onChange?: (value: boolean) => void;
-} & Omit<HTMLElementProps<HTMLInputElement>, "onChange"> & react.RefAttributes<HTMLInputElement>>;
+declare const Switch: React.FC<SwitchProps>;
 
 type BoxProps = {
-    children?: React.ReactNode;
-    className?: string;
-    style?: React.CSSProperties;
     asChild?: boolean;
-} & Atoms & HTMLElementProps<HTMLDivElement>;
-declare const Box: react.ForwardRefExoticComponent<{
-    children?: React.ReactNode;
+    children?: React$1.ReactNode;
     className?: string;
-    style?: React.CSSProperties;
-    asChild?: boolean;
-} & {
-    readonly backgroundColor?: "white" | "black" | "body" | "primaryLight" | "primary" | "primaryDark" | "secondaryLight" | "secondary" | "secondaryDark" | "text" | "textLight" | "textDark" | "danger" | "link" | "currentColor" | undefined;
-    readonly borderColor?: "white" | "black" | "body" | "primaryLight" | "primary" | "primaryDark" | "secondaryLight" | "secondary" | "secondaryDark" | "text" | "textLight" | "textDark" | "danger" | "link" | "currentColor" | undefined;
-    readonly borderRadius?: ("small" | "medium" | "large" | "xlarge") | undefined;
-    readonly borderWidth?: ("small" | "medium" | "large") | undefined;
-    readonly border?: "none" | undefined;
-    readonly insetBlock?: 0 | undefined;
-    readonly insetBlockStart?: 0 | undefined;
-    readonly insetBlockEnd?: 0 | undefined;
-    readonly insetInline?: 0 | undefined;
-    readonly insetInlineStart?: 0 | undefined;
-    readonly insetInlineEnd?: 0 | undefined;
-    readonly boxShadow?: ("small" | "medium" | "large") | undefined;
-    readonly color?: "white" | "black" | "body" | "primaryLight" | "primary" | "primaryDark" | "secondaryLight" | "secondary" | "secondaryDark" | "text" | "textLight" | "textDark" | "danger" | "link" | "currentColor" | undefined;
-    readonly cursor?: "auto" | "pointer" | undefined;
-    readonly fontFamily?: "body" | "primary" | "secondary" | undefined;
-    readonly fontStyle?: "normal" | "italic" | "oblique" | undefined;
-    readonly fontWeight?: ("medium" | "regular" | "strong") | undefined;
-    readonly lineHeight?: ("xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-    readonly blockSize?: "auto" | "fit-content" | "full" | undefined;
-    readonly maxBlockSize?: "auto" | "fit-content" | "full" | undefined;
-    readonly inlineSize?: "auto" | "fit-content" | "full" | undefined;
-    readonly maxInlineSize?: "auto" | "fit-content" | "full" | undefined;
-    readonly opacity?: 0 | 1 | undefined;
-    readonly overflow?: "auto" | "hidden" | "scroll" | "visible" | undefined;
-    readonly overflowBlock?: "auto" | "hidden" | "scroll" | "visible" | undefined;
-    readonly overflowInline?: "auto" | "hidden" | "scroll" | "visible" | undefined;
-    readonly pointerEvents?: "none" | undefined;
-    readonly textDecoration?: "none" | "overline" | "line-through" | "underline" | undefined;
-    readonly textTransform?: "lowercase" | "uppercase" | "capitalize" | undefined;
-    readonly textWrap?: "balance" | "wrap" | undefined;
-    readonly transition?: ("slow" | "normal" | "fast") | undefined;
-    readonly userSelect?: "none" | undefined;
-    readonly whiteSpace?: "nowrap" | "pre" | "pre-line" | "pre-wrap" | undefined;
-    readonly wordBreak?: "break-word" | undefined;
-    readonly wordWrap?: "break-word" | undefined;
-    inset?: 0 | undefined;
-} & {
-    readonly alignContent?: ("stretch" | "center" | "flex-start" | "flex-end" | {
-        mobile?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
-        tablet?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
-        desktop?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
-        wide?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "stretch" | "center" | "flex-start" | "flex-end" | null>;
-    readonly alignItems?: ("stretch" | "center" | "flex-start" | "flex-end" | {
-        mobile?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
-        tablet?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
-        desktop?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
-        wide?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "stretch" | "center" | "flex-start" | "flex-end" | null>;
-    readonly alignSelf?: ("stretch" | "center" | "flex-start" | "flex-end" | {
-        mobile?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
-        tablet?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
-        desktop?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
-        wide?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "stretch" | "center" | "flex-start" | "flex-end" | null>;
-    readonly columnGap?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
-        mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-        tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-        desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-        wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
-    readonly display?: ("none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | {
-        mobile?: "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | undefined;
-        tablet?: "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | undefined;
-        desktop?: "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | undefined;
-        wide?: "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | null>;
-    readonly flex?: (1 | {
-        mobile?: 1 | undefined;
-        tablet?: 1 | undefined;
-        desktop?: 1 | undefined;
-        wide?: 1 | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, 1 | null>;
-    readonly flexDirection?: ("row" | "row-reverse" | "column" | "column-reverse" | {
-        mobile?: "row" | "row-reverse" | "column" | "column-reverse" | undefined;
-        tablet?: "row" | "row-reverse" | "column" | "column-reverse" | undefined;
-        desktop?: "row" | "row-reverse" | "column" | "column-reverse" | undefined;
-        wide?: "row" | "row-reverse" | "column" | "column-reverse" | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "row" | "row-reverse" | "column" | "column-reverse" | null>;
-    readonly flexGrow?: (0 | 1 | {
-        mobile?: 0 | 1 | undefined;
-        tablet?: 0 | 1 | undefined;
-        desktop?: 0 | 1 | undefined;
-        wide?: 0 | 1 | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, 0 | 1 | null>;
-    readonly flexShrink?: (0 | 1 | {
-        mobile?: 0 | 1 | undefined;
-        tablet?: 0 | 1 | undefined;
-        desktop?: 0 | 1 | undefined;
-        wide?: 0 | 1 | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, 0 | 1 | null>;
-    readonly flexWrap?: ("wrap" | "nowrap" | {
-        mobile?: "wrap" | "nowrap" | undefined;
-        tablet?: "wrap" | "nowrap" | undefined;
-        desktop?: "wrap" | "nowrap" | undefined;
-        wide?: "wrap" | "nowrap" | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "wrap" | "nowrap" | null>;
-    readonly fontSize?: (("xsmall" | "small" | "medium" | "large" | "xlarge") | {
-        mobile?: ("xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-        tablet?: ("xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-        desktop?: ("xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-        wide?: ("xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
-    readonly gap?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
-        mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-        tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-        desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-        wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
-    readonly justifyContent?: ("center" | "flex-start" | "flex-end" | "space-between" | "space-around" | {
-        mobile?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | undefined;
-        tablet?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | undefined;
-        desktop?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | undefined;
-        wide?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | null>;
-    readonly marginBlockStart?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
-        mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
-        tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
-        desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
-        wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
-    readonly marginBlockEnd?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
-        mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
-        tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
-        desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
-        wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
-    readonly marginInlineStart?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
-        mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
-        tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
-        desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
-        wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
-    readonly marginInlineEnd?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
-        mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
-        tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
-        desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
-        wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
-    readonly outline?: ("none" | {
-        mobile?: "none" | undefined;
-        tablet?: "none" | undefined;
-        desktop?: "none" | undefined;
-        wide?: "none" | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | null>;
-    readonly padding?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
-        mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-        tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-        desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-        wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
-    readonly paddingBlock?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
-        mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-        tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-        desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-        wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
-    readonly paddingBlockStart?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
-        mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-        tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-        desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-        wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
-    readonly paddingBlockEnd?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
-        mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-        tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-        desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-        wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
-    readonly paddingInline?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
-        mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-        tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-        desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-        wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
-    readonly paddingInlineStart?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
-        mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-        tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-        desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-        wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
-    readonly paddingInlineEnd?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
-        mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-        tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-        desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-        wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
-    readonly position?: ("relative" | "fixed" | "absolute" | "sticky" | "static" | {
-        mobile?: "relative" | "fixed" | "absolute" | "sticky" | "static" | undefined;
-        tablet?: "relative" | "fixed" | "absolute" | "sticky" | "static" | undefined;
-        desktop?: "relative" | "fixed" | "absolute" | "sticky" | "static" | undefined;
-        wide?: "relative" | "fixed" | "absolute" | "sticky" | "static" | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "relative" | "fixed" | "absolute" | "sticky" | "static" | null>;
-    readonly rowGap?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
-        mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-        tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-        desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-        wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
-    readonly textAlign?: ("left" | "right" | "center" | "justify" | {
-        mobile?: "left" | "right" | "center" | "justify" | undefined;
-        tablet?: "left" | "right" | "center" | "justify" | undefined;
-        desktop?: "left" | "right" | "center" | "justify" | undefined;
-        wide?: "left" | "right" | "center" | "justify" | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "left" | "right" | "center" | "justify" | null>;
-    margin?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
-        mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
-        tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
-        desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
-        wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
-    marginBlock?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
-        mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
-        tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
-        desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
-        wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
-    marginInline?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
-        mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
-        tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
-        desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
-        wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
-    placeItems?: ("center" | "flex-start" | "flex-end" | {
-        mobile?: "center" | "flex-start" | "flex-end" | undefined;
-        tablet?: "center" | "flex-start" | "flex-end" | undefined;
-        desktop?: "center" | "flex-start" | "flex-end" | undefined;
-        wide?: "center" | "flex-start" | "flex-end" | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "center" | "flex-start" | "flex-end" | null>;
-} & HTMLElementProps<HTMLDivElement> & react.RefAttributes<unknown>>;
+    ref?: React$1.Ref<HTMLDivElement>;
+    style?: React$1.CSSProperties;
+} & Atoms & HTMLElementProps<HTMLDivElement>;
+declare const Box: React$1.FC<BoxProps>;
 
 declare const justifyContentMap: {
     readonly left: "flex-start";
@@ -1048,15 +787,11 @@ declare const Stack: React.FC<StackProps>;
 type LinkProps = {
     asChild?: boolean;
     children?: React.ReactNode;
+    ref?: React.Ref<HTMLAnchorElement>;
     underline?: LinkTheme['variants']['underline'];
     variant?: LinkTheme['variants']['variant'];
 } & MarginAtoms & HTMLElementProps<HTMLAnchorElement>;
-declare const Link: react.ForwardRefExoticComponent<{
-    asChild?: boolean;
-    children?: React.ReactNode;
-    underline?: LinkTheme["variants"]["underline"];
-    variant?: LinkTheme["variants"]["variant"];
-} & MarginAtoms & HTMLElementProps<HTMLAnchorElement> & react.RefAttributes<HTMLAnchorElement>>;
+declare const Link: React.FC<LinkProps>;
 
 type BlocksProviderProps = {
     children: React.ReactNode;
@@ -1084,7 +819,7 @@ declare const Dialog: React.FC<DialogProps>;
 
 type PopoverProps = {
     align?: 'top' | 'bottom' | 'left' | 'right';
-    anchorElement: React.RefObject<HTMLElement>;
+    anchorElement: React.RefObject<HTMLElement | null>;
     children: React.ReactNode;
     className?: string;
     onRequestClose: () => void;
@@ -1109,16 +844,19 @@ type HeadingProps = {
 } & TextAtoms & MarginAtoms & PaddingAtoms & HTMLElementProps<HTMLHeadingElement>;
 declare const Heading: React.FC<HeadingProps>;
 
-type TextProps = {
-    children: React.ReactNode;
-    tag?: 'span' | 'p' | 'strong' | 'em' | 'small' | 's' | 'del' | 'ins' | 'sub' | 'sup' | 'label';
+type Tags = 'del' | 'em' | 'ins' | 'label' | 'p' | 's' | 'small' | 'span' | 'strong' | 'sub' | 'sup';
+type TextProps<Tag extends Tags = 'span'> = {
     asChild?: boolean;
+    children: React$1.ReactNode;
+    ref?: React$1.Ref<HTMLElementTagNameMap[Tag]>;
+    tag?: Tag;
 } & TextAtoms & MarginAtoms & PaddingAtoms & HTMLElementProps<HTMLSpanElement>;
-declare const Text: React.FC<TextProps>;
+declare const Text: <T extends Tags = "span">({ asChild, children, className, ref, tag, ...restProps }: TextProps<T>) => react_jsx_runtime.JSX.Element;
 
 type TemplateProps = {
     asChild?: boolean;
-    children?: React.ReactNode;
+    children?: React$1.ReactNode;
+    ref?: React$1.Ref<Element>;
 };
 /**
  * Create a Template component that can render as a child of another component with asChild prop.
@@ -1140,11 +878,11 @@ type TemplateProps = {
  * <MyComponent className="test" asChild><a href="#">Link</a></MyComponent> // Renders as <a href="#" class="test">Link</a>
  */
 declare function createAsChildTemplate<T extends keyof HTMLElementTagNameMap>(defaultElement: T): {
-    Template: react.ForwardRefExoticComponent<TemplateProps & HTMLElementProps<HTMLElementTagNameMap[T]> & react.RefAttributes<HTMLElementTagNameMap[T]>>;
-    Slot: react.FC<SlotProps>;
+    Template: React$1.FC<TemplateProps & HTMLElementProps<HTMLElementTagNameMap[T]>>;
+    Slot: React$1.FC<SlotProps>;
 };
 type SlotProps = {
-    children: React.ReactNode;
+    children: React$1.ReactNode;
 };
 
 declare function useComponentStyles<T extends keyof ComponentThemesProps>(name: T, props: ComponentThemesProps[T], useDefaultVariants?: boolean): string;

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

@@ -85,6 +85,20 @@ const useComponentStyleDefaultProps = (name) => {
   }
   return component.defaultVariants ?? {};
 };
+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) {
@@ -102,33 +116,35 @@ function mergeProps(slotProps, childProps) {
         childPropValue(...args);
         slotPropValue(...args);
       };
-    } else if (propName === "style") {
-      overrideProps[propName] = { ...slotPropValue, ...childPropValue };
-    } else if (propName === "className") {
-      overrideProps[propName] = styles_components_Accessibility_VisuallyHidden_VisuallyHidden_cjs.classnames(slotPropValue, childPropValue);
-    } else {
-      overrideProps[propName] = childPropValue;
-    }
+    } else
+      switch (propName) {
+        case "style": {
+          overrideProps[propName] = { ...slotPropValue, ...childPropValue };
+          break;
+        }
+        case "className": {
+          overrideProps[propName] = styles_components_Accessibility_VisuallyHidden_VisuallyHidden_cjs.classnames(slotPropValue, childPropValue);
+          break;
+        }
+        case "ref": {
+          overrideProps[propName] = composeRefs(slotPropValue, childPropValue);
+          break;
+        }
+        default: {
+          overrideProps[propName] = childPropValue;
+        }
+      }
   }
   return { ...slotProps, ...overrideProps };
 }
-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) {
+  const Template2 = ({
+    asChild,
+    children,
+    ref,
+    ...rootProps
+  }) => {
     if (!asChild) {
       const tagProps = { ref, ...rootProps };
       return /* @__PURE__ */ jsxRuntime.jsx(Tag, { ...tagProps, children });
@@ -147,7 +163,7 @@ function createAsChildTemplate(defaultElement) {
       }
       return null;
     }
-    if (!react.isValidElement(slot)) {
+    if (!isValidElementWithChildren(slot)) {
       return null;
     }
     if (!react.isValidElement(slot.props.children)) {
@@ -160,36 +176,33 @@ function createAsChildTemplate(defaultElement) {
       }
       return null;
     }
-    if (!react.isValidElement(slot.props.children)) {
+    if (!isValidElementWithChildren(slot.props.children)) {
       return null;
     }
     const nextChildren = [...childrenArray];
     if (nextChildren.length === 1 && !slot.props.children.props.children) {
-      return react.cloneElement(slot.props.children, {
-        ...mergeProps(rootProps, slot.props.children.props),
-        ref: composeRefs(ref, slot.props.children.ref)
-      });
+      return react.cloneElement(slot.props.children, mergeProps(rootProps, slot.props.children.props));
     }
     nextChildren[slotIndex] = slot.props.children.props.children;
     return react.cloneElement(
       slot.props.children,
-      {
-        ...mergeProps(rootProps, slot.props.children.props),
-        ref: composeRefs(ref, slot.props.children.ref)
-      },
+      mergeProps(rootProps, slot.props.children.props),
       nextChildren
     );
-  });
+  };
   return {
     Template: Template2,
     Slot: Slot$1
   };
 }
+function isValidElementWithChildren(child) {
+  return react.isValidElement(child) && !!child.props;
+}
 const Slot$1 = ({ children }) => {
   return children;
 };
 const { Template, Slot } = createAsChildTemplate("div");
-const Box = react.forwardRef(function Box2({ asChild, className, children, ...restProps }, ref) {
+const Box = ({ asChild, className, children, ref, ...restProps }) => {
   const [atomsProps, otherProps] = styles_lib_utils_atomProps_cjs.getAtomsAndProps(restProps);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Template,
@@ -201,7 +214,7 @@ const Box = react.forwardRef(function Box2({ asChild, className, children, ...re
       children: /* @__PURE__ */ jsxRuntime.jsx(Slot, { children })
     }
   );
-});
+};
 const Divider = ({ className, color, ...restProps }) => {
   const dividerClass = useComponentStyles("divider", { base: true });
   const dividerDefaults = useComponentStyleDefaultProps("divider");