@blockle/blocks 0.7.2 → 0.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/dist/index.cjs +170 -52
  2. package/dist/index.d.ts +1 -1
  3. package/dist/index.mjs +171 -53
  4. package/dist/momotaro.chunk.d.ts +497 -16
  5. package/dist/styles/components/Heading/heading.css.cjs +15 -0
  6. package/dist/styles/components/Heading/heading.css.mjs +16 -0
  7. package/dist/styles/components/Text/text.css.cjs +15 -0
  8. package/dist/styles/components/Text/text.css.mjs +16 -0
  9. package/dist/styles/themes/momotaro/components/button.css.cjs +3 -1
  10. package/dist/styles/themes/momotaro/components/button.css.mjs +3 -1
  11. package/package.json +1 -2
package/dist/momotaro.chunk.d.ts CHANGED
@@ -1,7 +1,6 @@
1
- import { ForwardRefComponent } from '@radix-ui/react-polymorphic';
1
+ import * as _vanilla_extract_sprinkles from '@vanilla-extract/sprinkles';
2
2
  import * as react from 'react';
3
3
  import react__default from 'react';
4
- import * as _vanilla_extract_sprinkles from '@vanilla-extract/sprinkles';
5
4
 
6
5
  declare const atoms: ((props: {
7
6
  readonly backgroundColor?: "link" | "white" | "black" | "body" | "primaryLight" | "primary" | "primaryDark" | "secondaryLight" | "secondary" | "secondaryDark" | "text" | "textLight" | "textDark" | "danger" | "currentColor" | undefined;
@@ -537,15 +536,247 @@ type BlocksProviderProps = {
537
536
  };
538
537
  declare const BlocksProvider: React.FC<BlocksProviderProps>;
539
538
 
539
+ type HTMLElementProps<E extends Element> = Omit<React.HTMLProps<E>, keyof Atoms | 'as' | 'ref'>;
540
+
540
541
  type BoxProps = {
541
542
  children?: React.ReactNode;
542
543
  className?: string;
543
544
  style?: React.CSSProperties;
544
- } & Atoms;
545
- type PolymorphicBox = ForwardRefComponent<'div', BoxProps>;
546
- declare const Box: PolymorphicBox;
547
-
548
- type HTMLElementProps<E extends Element> = Omit<React.HTMLProps<E>, keyof Atoms | 'as' | 'ref'>;
545
+ asChild?: boolean;
546
+ } & Atoms & HTMLElementProps<HTMLDivElement>;
547
+ declare const Box: react.ForwardRefExoticComponent<{
548
+ children?: React.ReactNode;
549
+ className?: string | undefined;
550
+ style?: react.CSSProperties | undefined;
551
+ asChild?: boolean | undefined;
552
+ } & {
553
+ readonly backgroundColor?: "link" | "white" | "black" | "body" | "primaryLight" | "primary" | "primaryDark" | "secondaryLight" | "secondary" | "secondaryDark" | "text" | "textLight" | "textDark" | "danger" | "currentColor" | undefined;
554
+ readonly borderColor?: "link" | "white" | "black" | "body" | "primaryLight" | "primary" | "primaryDark" | "secondaryLight" | "secondary" | "secondaryDark" | "text" | "textLight" | "textDark" | "danger" | "currentColor" | undefined;
555
+ readonly borderRadius?: ("small" | "medium" | "large" | "xlarge") | undefined;
556
+ readonly border?: "none" | undefined;
557
+ readonly bottom?: 0 | undefined;
558
+ readonly boxShadow?: ("small" | "medium" | "large") | undefined;
559
+ readonly color?: "link" | "white" | "black" | "body" | "primaryLight" | "primary" | "primaryDark" | "secondaryLight" | "secondary" | "secondaryDark" | "text" | "textLight" | "textDark" | "danger" | "currentColor" | undefined;
560
+ readonly cursor?: "auto" | "pointer" | undefined;
561
+ readonly fontFamily?: "body" | "primary" | "secondary" | undefined;
562
+ readonly fontStyle?: "normal" | "italic" | "oblique" | undefined;
563
+ readonly fontWeight?: ("medium" | "regular" | "strong") | undefined;
564
+ readonly height?: "auto" | "full" | undefined;
565
+ readonly left?: 0 | undefined;
566
+ readonly lineHeight?: ("xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
567
+ readonly maxHeight?: "full" | undefined;
568
+ readonly maxWidth?: "full" | undefined;
569
+ readonly opacity?: 0 | 1 | undefined;
570
+ readonly overflow?: "auto" | "hidden" | "scroll" | "visible" | undefined;
571
+ readonly overflowX?: "auto" | "hidden" | "scroll" | "visible" | undefined;
572
+ readonly overflowY?: "auto" | "hidden" | "scroll" | "visible" | undefined;
573
+ readonly pointerEvents?: "none" | undefined;
574
+ readonly right?: 0 | undefined;
575
+ readonly textDecoration?: "none" | "overline" | "line-through" | "underline" | undefined;
576
+ readonly textTransform?: "lowercase" | "uppercase" | "capitalize" | undefined;
577
+ readonly textWrap?: "balance" | "wrap" | undefined;
578
+ readonly top?: 0 | undefined;
579
+ readonly transition?: ("slow" | "normal" | "fast") | undefined;
580
+ readonly userSelect?: "none" | undefined;
581
+ readonly whiteSpace?: "pre-wrap" | "nowrap" | "pre" | "pre-line" | undefined;
582
+ readonly width?: "auto" | "fit-content" | "full" | undefined;
583
+ readonly wordBreak?: "break-word" | undefined;
584
+ readonly wordWrap?: "break-word" | undefined;
585
+ inset?: 0 | undefined;
586
+ } & {
587
+ readonly alignContent?: ("stretch" | "center" | "flex-start" | "flex-end" | {
588
+ mobile?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
589
+ tablet?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
590
+ desktop?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
591
+ wide?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
592
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "stretch" | "center" | "flex-start" | "flex-end" | null>;
593
+ readonly alignItems?: ("stretch" | "center" | "flex-start" | "flex-end" | {
594
+ mobile?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
595
+ tablet?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
596
+ desktop?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
597
+ wide?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
598
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "stretch" | "center" | "flex-start" | "flex-end" | null>;
599
+ readonly alignSelf?: ("stretch" | "center" | "flex-start" | "flex-end" | {
600
+ mobile?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
601
+ tablet?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
602
+ desktop?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
603
+ wide?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
604
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "stretch" | "center" | "flex-start" | "flex-end" | null>;
605
+ readonly columnGap?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
606
+ mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
607
+ tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
608
+ desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
609
+ wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
610
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
611
+ readonly display?: ("none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | {
612
+ mobile?: "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | undefined;
613
+ tablet?: "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | undefined;
614
+ desktop?: "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | undefined;
615
+ wide?: "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | undefined;
616
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | null>;
617
+ readonly flex?: (1 | {
618
+ mobile?: 1 | undefined;
619
+ tablet?: 1 | undefined;
620
+ desktop?: 1 | undefined;
621
+ wide?: 1 | undefined;
622
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, 1 | null>;
623
+ readonly flexDirection?: ("row" | "row-reverse" | "column" | "column-reverse" | {
624
+ mobile?: "row" | "row-reverse" | "column" | "column-reverse" | undefined;
625
+ tablet?: "row" | "row-reverse" | "column" | "column-reverse" | undefined;
626
+ desktop?: "row" | "row-reverse" | "column" | "column-reverse" | undefined;
627
+ wide?: "row" | "row-reverse" | "column" | "column-reverse" | undefined;
628
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "row" | "row-reverse" | "column" | "column-reverse" | null>;
629
+ readonly flexGrow?: (0 | 1 | {
630
+ mobile?: 0 | 1 | undefined;
631
+ tablet?: 0 | 1 | undefined;
632
+ desktop?: 0 | 1 | undefined;
633
+ wide?: 0 | 1 | undefined;
634
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, 0 | 1 | null>;
635
+ readonly flexShrink?: (0 | 1 | {
636
+ mobile?: 0 | 1 | undefined;
637
+ tablet?: 0 | 1 | undefined;
638
+ desktop?: 0 | 1 | undefined;
639
+ wide?: 0 | 1 | undefined;
640
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, 0 | 1 | null>;
641
+ readonly flexWrap?: ("nowrap" | "wrap" | {
642
+ mobile?: "nowrap" | "wrap" | undefined;
643
+ tablet?: "nowrap" | "wrap" | undefined;
644
+ desktop?: "nowrap" | "wrap" | undefined;
645
+ wide?: "nowrap" | "wrap" | undefined;
646
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "nowrap" | "wrap" | null>;
647
+ readonly fontSize?: (("xsmall" | "small" | "medium" | "large" | "xlarge") | {
648
+ mobile?: ("xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
649
+ tablet?: ("xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
650
+ desktop?: ("xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
651
+ wide?: ("xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
652
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, ("xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
653
+ readonly gap?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
654
+ mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
655
+ tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
656
+ desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
657
+ wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
658
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
659
+ readonly justifyContent?: ("center" | "flex-start" | "flex-end" | "space-between" | "space-around" | {
660
+ mobile?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | undefined;
661
+ tablet?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | undefined;
662
+ desktop?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | undefined;
663
+ wide?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | undefined;
664
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | null>;
665
+ readonly marginBottom?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
666
+ mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
667
+ tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
668
+ desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
669
+ wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
670
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
671
+ readonly marginLeft?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
672
+ mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
673
+ tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
674
+ desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
675
+ wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
676
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
677
+ readonly marginRight?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
678
+ mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
679
+ tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
680
+ desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
681
+ wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
682
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
683
+ readonly marginTop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
684
+ mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
685
+ tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
686
+ desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
687
+ wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
688
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
689
+ readonly outline?: ("none" | {
690
+ mobile?: "none" | undefined;
691
+ tablet?: "none" | undefined;
692
+ desktop?: "none" | undefined;
693
+ wide?: "none" | undefined;
694
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "none" | null>;
695
+ readonly paddingBottom?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
696
+ mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
697
+ tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
698
+ desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
699
+ wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
700
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
701
+ readonly paddingLeft?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
702
+ mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
703
+ tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
704
+ desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
705
+ wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
706
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
707
+ readonly paddingRight?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
708
+ mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
709
+ tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
710
+ desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
711
+ wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
712
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
713
+ readonly paddingTop?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
714
+ mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
715
+ tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
716
+ desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
717
+ wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
718
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
719
+ readonly position?: ("relative" | "fixed" | "absolute" | "sticky" | "static" | {
720
+ mobile?: "relative" | "fixed" | "absolute" | "sticky" | "static" | undefined;
721
+ tablet?: "relative" | "fixed" | "absolute" | "sticky" | "static" | undefined;
722
+ desktop?: "relative" | "fixed" | "absolute" | "sticky" | "static" | undefined;
723
+ wide?: "relative" | "fixed" | "absolute" | "sticky" | "static" | undefined;
724
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "relative" | "fixed" | "absolute" | "sticky" | "static" | null>;
725
+ readonly rowGap?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
726
+ mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
727
+ tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
728
+ desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
729
+ wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
730
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
731
+ readonly textAlign?: ("left" | "right" | "center" | "justify" | {
732
+ mobile?: "left" | "right" | "center" | "justify" | undefined;
733
+ tablet?: "left" | "right" | "center" | "justify" | undefined;
734
+ desktop?: "left" | "right" | "center" | "justify" | undefined;
735
+ wide?: "left" | "right" | "center" | "justify" | undefined;
736
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "left" | "right" | "center" | "justify" | null>;
737
+ margin?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
738
+ mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
739
+ tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
740
+ desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
741
+ wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
742
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
743
+ marginX?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
744
+ mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
745
+ tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
746
+ desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
747
+ wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
748
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
749
+ marginY?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
750
+ mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
751
+ tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
752
+ desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
753
+ wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
754
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
755
+ padding?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
756
+ mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
757
+ tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
758
+ desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
759
+ wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
760
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
761
+ paddingX?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
762
+ mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
763
+ tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
764
+ desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
765
+ wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
766
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
767
+ paddingY?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
768
+ mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
769
+ tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
770
+ desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
771
+ wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
772
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
773
+ placeItems?: ("center" | "flex-start" | "flex-end" | {
774
+ mobile?: "center" | "flex-start" | "flex-end" | undefined;
775
+ tablet?: "center" | "flex-start" | "flex-end" | undefined;
776
+ desktop?: "center" | "flex-start" | "flex-end" | undefined;
777
+ wide?: "center" | "flex-start" | "flex-end" | undefined;
778
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "center" | "flex-start" | "flex-end" | null>;
779
+ } & HTMLElementProps<HTMLDivElement> & react.RefAttributes<unknown>>;
549
780
 
550
781
  type ButtonProps = {
551
782
  children: React.ReactNode;
@@ -559,7 +790,8 @@ type ButtonProps = {
559
790
  startSlot?: React.ReactNode;
560
791
  endSlot?: React.ReactNode;
561
792
  disabled?: boolean;
562
- } & Omit<HTMLElementProps<HTMLButtonElement>, 'size'>;
793
+ asChild?: boolean;
794
+ } & Omit<HTMLElementProps<HTMLButtonElement>, 'size'> & MarginAtoms;
563
795
  declare const Button: react.ForwardRefExoticComponent<{
564
796
  children: React.ReactNode;
565
797
  type?: "button" | "submit" | "reset" | undefined;
@@ -572,7 +804,8 @@ declare const Button: react.ForwardRefExoticComponent<{
572
804
  startSlot?: React.ReactNode;
573
805
  endSlot?: React.ReactNode;
574
806
  disabled?: boolean | undefined;
575
- } & Omit<HTMLElementProps<HTMLButtonElement>, "size"> & react.RefAttributes<HTMLButtonElement>>;
807
+ asChild?: boolean | undefined;
808
+ } & Omit<HTMLElementProps<HTMLButtonElement>, "size"> & MarginAtoms & react.RefAttributes<HTMLButtonElement>>;
576
809
 
577
810
  type CheckboxProps = {
578
811
  name: string;
@@ -632,7 +865,7 @@ type AlignItemsMap = typeof alignItemsMap;
632
865
  type InlineProps = {
633
866
  alignX?: keyof JustifyContentMap;
634
867
  alignY?: keyof AlignItemsMap;
635
- as?: 'div' | 'ul' | 'ol' | 'nav';
868
+ tag?: 'div' | 'ul' | 'ol' | 'nav';
636
869
  children: React.ReactNode;
637
870
  className?: string;
638
871
  display?: ResponsiveDisplayFlex;
@@ -669,12 +902,244 @@ type LabelProps = {
669
902
  declare const Label: React.FC<LabelProps>;
670
903
 
671
904
  type LinkProps = {
905
+ asChild?: boolean;
672
906
  children?: React.ReactNode;
673
907
  underline?: LinkTheme['variants']['underline'];
674
908
  variant?: LinkTheme['variants']['variant'];
675
909
  } & Atoms & HTMLElementProps<HTMLAnchorElement>;
676
- type PolymorphicLink = ForwardRefComponent<'a', LinkProps>;
677
- declare const Link: PolymorphicLink;
910
+ declare const Link: react.ForwardRefExoticComponent<{
911
+ asChild?: boolean | undefined;
912
+ children?: React.ReactNode;
913
+ underline?: boolean | undefined;
914
+ variant?: "primary" | "secondary" | "inherit" | undefined;
915
+ } & {
916
+ readonly backgroundColor?: "link" | "white" | "black" | "body" | "primaryLight" | "primary" | "primaryDark" | "secondaryLight" | "secondary" | "secondaryDark" | "text" | "textLight" | "textDark" | "danger" | "currentColor" | undefined;
917
+ readonly borderColor?: "link" | "white" | "black" | "body" | "primaryLight" | "primary" | "primaryDark" | "secondaryLight" | "secondary" | "secondaryDark" | "text" | "textLight" | "textDark" | "danger" | "currentColor" | undefined;
918
+ readonly borderRadius?: ("small" | "medium" | "large" | "xlarge") | undefined;
919
+ readonly border?: "none" | undefined;
920
+ readonly bottom?: 0 | undefined;
921
+ readonly boxShadow?: ("small" | "medium" | "large") | undefined;
922
+ readonly color?: "link" | "white" | "black" | "body" | "primaryLight" | "primary" | "primaryDark" | "secondaryLight" | "secondary" | "secondaryDark" | "text" | "textLight" | "textDark" | "danger" | "currentColor" | undefined;
923
+ readonly cursor?: "auto" | "pointer" | undefined;
924
+ readonly fontFamily?: "body" | "primary" | "secondary" | undefined;
925
+ readonly fontStyle?: "normal" | "italic" | "oblique" | undefined;
926
+ readonly fontWeight?: ("medium" | "regular" | "strong") | undefined;
927
+ readonly height?: "auto" | "full" | undefined;
928
+ readonly left?: 0 | undefined;
929
+ readonly lineHeight?: ("xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
930
+ readonly maxHeight?: "full" | undefined;
931
+ readonly maxWidth?: "full" | undefined;
932
+ readonly opacity?: 0 | 1 | undefined;
933
+ readonly overflow?: "auto" | "hidden" | "scroll" | "visible" | undefined;
934
+ readonly overflowX?: "auto" | "hidden" | "scroll" | "visible" | undefined;
935
+ readonly overflowY?: "auto" | "hidden" | "scroll" | "visible" | undefined;
936
+ readonly pointerEvents?: "none" | undefined;
937
+ readonly right?: 0 | undefined;
938
+ readonly textDecoration?: "none" | "overline" | "line-through" | "underline" | undefined;
939
+ readonly textTransform?: "lowercase" | "uppercase" | "capitalize" | undefined;
940
+ readonly textWrap?: "balance" | "wrap" | undefined;
941
+ readonly top?: 0 | undefined;
942
+ readonly transition?: ("slow" | "normal" | "fast") | undefined;
943
+ readonly userSelect?: "none" | undefined;
944
+ readonly whiteSpace?: "pre-wrap" | "nowrap" | "pre" | "pre-line" | undefined;
945
+ readonly width?: "auto" | "fit-content" | "full" | undefined;
946
+ readonly wordBreak?: "break-word" | undefined;
947
+ readonly wordWrap?: "break-word" | undefined;
948
+ inset?: 0 | undefined;
949
+ } & {
950
+ readonly alignContent?: ("stretch" | "center" | "flex-start" | "flex-end" | {
951
+ mobile?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
952
+ tablet?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
953
+ desktop?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
954
+ wide?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
955
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "stretch" | "center" | "flex-start" | "flex-end" | null>;
956
+ readonly alignItems?: ("stretch" | "center" | "flex-start" | "flex-end" | {
957
+ mobile?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
958
+ tablet?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
959
+ desktop?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
960
+ wide?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
961
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "stretch" | "center" | "flex-start" | "flex-end" | null>;
962
+ readonly alignSelf?: ("stretch" | "center" | "flex-start" | "flex-end" | {
963
+ mobile?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
964
+ tablet?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
965
+ desktop?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
966
+ wide?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
967
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "stretch" | "center" | "flex-start" | "flex-end" | null>;
968
+ readonly columnGap?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
969
+ mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
970
+ tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
971
+ desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
972
+ wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
973
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
974
+ readonly display?: ("none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | {
975
+ mobile?: "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | undefined;
976
+ tablet?: "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | undefined;
977
+ desktop?: "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | undefined;
978
+ wide?: "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | undefined;
979
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | null>;
980
+ readonly flex?: (1 | {
981
+ mobile?: 1 | undefined;
982
+ tablet?: 1 | undefined;
983
+ desktop?: 1 | undefined;
984
+ wide?: 1 | undefined;
985
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, 1 | null>;
986
+ readonly flexDirection?: ("row" | "row-reverse" | "column" | "column-reverse" | {
987
+ mobile?: "row" | "row-reverse" | "column" | "column-reverse" | undefined;
988
+ tablet?: "row" | "row-reverse" | "column" | "column-reverse" | undefined;
989
+ desktop?: "row" | "row-reverse" | "column" | "column-reverse" | undefined;
990
+ wide?: "row" | "row-reverse" | "column" | "column-reverse" | undefined;
991
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "row" | "row-reverse" | "column" | "column-reverse" | null>;
992
+ readonly flexGrow?: (0 | 1 | {
993
+ mobile?: 0 | 1 | undefined;
994
+ tablet?: 0 | 1 | undefined;
995
+ desktop?: 0 | 1 | undefined;
996
+ wide?: 0 | 1 | undefined;
997
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, 0 | 1 | null>;
998
+ readonly flexShrink?: (0 | 1 | {
999
+ mobile?: 0 | 1 | undefined;
1000
+ tablet?: 0 | 1 | undefined;
1001
+ desktop?: 0 | 1 | undefined;
1002
+ wide?: 0 | 1 | undefined;
1003
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, 0 | 1 | null>;
1004
+ readonly flexWrap?: ("nowrap" | "wrap" | {
1005
+ mobile?: "nowrap" | "wrap" | undefined;
1006
+ tablet?: "nowrap" | "wrap" | undefined;
1007
+ desktop?: "nowrap" | "wrap" | undefined;
1008
+ wide?: "nowrap" | "wrap" | undefined;
1009
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "nowrap" | "wrap" | null>;
1010
+ readonly fontSize?: (("xsmall" | "small" | "medium" | "large" | "xlarge") | {
1011
+ mobile?: ("xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
1012
+ tablet?: ("xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
1013
+ desktop?: ("xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
1014
+ wide?: ("xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
1015
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, ("xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
1016
+ readonly gap?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
1017
+ mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
1018
+ tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
1019
+ desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
1020
+ wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
1021
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
1022
+ readonly justifyContent?: ("center" | "flex-start" | "flex-end" | "space-between" | "space-around" | {
1023
+ mobile?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | undefined;
1024
+ tablet?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | undefined;
1025
+ desktop?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | undefined;
1026
+ wide?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | undefined;
1027
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | null>;
1028
+ readonly marginBottom?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
1029
+ mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
1030
+ tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
1031
+ desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
1032
+ wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
1033
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
1034
+ readonly marginLeft?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
1035
+ mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
1036
+ tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
1037
+ desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
1038
+ wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
1039
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
1040
+ readonly marginRight?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
1041
+ mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
1042
+ tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
1043
+ desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
1044
+ wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
1045
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
1046
+ readonly marginTop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
1047
+ mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
1048
+ tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
1049
+ desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
1050
+ wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
1051
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
1052
+ readonly outline?: ("none" | {
1053
+ mobile?: "none" | undefined;
1054
+ tablet?: "none" | undefined;
1055
+ desktop?: "none" | undefined;
1056
+ wide?: "none" | undefined;
1057
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "none" | null>;
1058
+ readonly paddingBottom?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
1059
+ mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
1060
+ tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
1061
+ desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
1062
+ wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
1063
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
1064
+ readonly paddingLeft?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
1065
+ mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
1066
+ tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
1067
+ desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
1068
+ wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
1069
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
1070
+ readonly paddingRight?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
1071
+ mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
1072
+ tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
1073
+ desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
1074
+ wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
1075
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
1076
+ readonly paddingTop?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
1077
+ mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
1078
+ tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
1079
+ desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
1080
+ wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
1081
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
1082
+ readonly position?: ("relative" | "fixed" | "absolute" | "sticky" | "static" | {
1083
+ mobile?: "relative" | "fixed" | "absolute" | "sticky" | "static" | undefined;
1084
+ tablet?: "relative" | "fixed" | "absolute" | "sticky" | "static" | undefined;
1085
+ desktop?: "relative" | "fixed" | "absolute" | "sticky" | "static" | undefined;
1086
+ wide?: "relative" | "fixed" | "absolute" | "sticky" | "static" | undefined;
1087
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "relative" | "fixed" | "absolute" | "sticky" | "static" | null>;
1088
+ readonly rowGap?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
1089
+ mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
1090
+ tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
1091
+ desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
1092
+ wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
1093
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
1094
+ readonly textAlign?: ("left" | "right" | "center" | "justify" | {
1095
+ mobile?: "left" | "right" | "center" | "justify" | undefined;
1096
+ tablet?: "left" | "right" | "center" | "justify" | undefined;
1097
+ desktop?: "left" | "right" | "center" | "justify" | undefined;
1098
+ wide?: "left" | "right" | "center" | "justify" | undefined;
1099
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "left" | "right" | "center" | "justify" | null>;
1100
+ margin?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
1101
+ mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
1102
+ tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
1103
+ desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
1104
+ wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
1105
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
1106
+ marginX?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
1107
+ mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
1108
+ tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
1109
+ desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
1110
+ wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
1111
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
1112
+ marginY?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
1113
+ mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
1114
+ tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
1115
+ desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
1116
+ wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
1117
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
1118
+ padding?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
1119
+ mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
1120
+ tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
1121
+ desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
1122
+ wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
1123
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
1124
+ paddingX?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
1125
+ mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
1126
+ tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
1127
+ desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
1128
+ wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
1129
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
1130
+ paddingY?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
1131
+ mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
1132
+ tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
1133
+ desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
1134
+ wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
1135
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
1136
+ placeItems?: ("center" | "flex-start" | "flex-end" | {
1137
+ mobile?: "center" | "flex-start" | "flex-end" | undefined;
1138
+ tablet?: "center" | "flex-start" | "flex-end" | undefined;
1139
+ desktop?: "center" | "flex-start" | "flex-end" | undefined;
1140
+ wide?: "center" | "flex-start" | "flex-end" | undefined;
1141
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "center" | "flex-start" | "flex-end" | null>;
1142
+ } & HTMLElementProps<HTMLAnchorElement> & react.RefAttributes<HTMLAnchorElement>>;
678
1143
 
679
1144
  type PortalProps = {
680
1145
  children: React.ReactNode;
@@ -703,7 +1168,7 @@ declare const Spinner: React.FC<SpinnerProps>;
703
1168
 
704
1169
  type StackProps = {
705
1170
  alignX?: keyof AlignItemsMap;
706
- as?: 'div' | 'section' | 'ul' | 'ol';
1171
+ tag?: 'div' | 'section' | 'ul' | 'ol';
707
1172
  children: React.ReactNode;
708
1173
  className?: string;
709
1174
  display?: ResponsiveDisplayFlex;
@@ -711,7 +1176,7 @@ type StackProps = {
711
1176
  style?: React.CSSProperties;
712
1177
  role?: React.AriaRole;
713
1178
  /**
714
- * Start prop is only valid when as="ol"
1179
+ * Start prop is only valid when tag="ol"
715
1180
  */
716
1181
  start?: number;
717
1182
  } & MarginAndPaddingAtoms;
@@ -719,7 +1184,8 @@ declare const Stack: React.FC<StackProps>;
719
1184
 
720
1185
  type TextProps = {
721
1186
  children: React.ReactNode;
722
- as?: 'span' | 'p' | 'strong' | 'em' | 'small' | 's' | 'del' | 'ins' | 'sub' | 'sup';
1187
+ tag?: 'span' | 'p' | 'strong' | 'em' | 'small' | 's' | 'del' | 'ins' | 'sub' | 'sup';
1188
+ asChild?: boolean;
723
1189
  color?: Atoms['color'];
724
1190
  fontSize?: Atoms['fontSize'];
725
1191
  fontWeight?: Atoms['fontWeight'];
@@ -734,6 +1200,21 @@ type TextProps = {
734
1200
  } & MarginAndPaddingAtoms & HTMLElementProps<HTMLSpanElement>;
735
1201
  declare const Text: React.FC<TextProps>;
736
1202
 
1203
+ type HTMLElementTags = 'a' | 'article' | 'button' | 'div' | 'p' | 'section' | 'span' | 'strong';
1204
+ /**
1205
+ * Notes:
1206
+ * - <Slot> can only have one child
1207
+ * - <Slot> can only be used once
1208
+ * - <Slot> can only be used as a direct descendant of <Slottable>
1209
+ */
1210
+ declare function createSlottable<E extends HTMLElementTags>(defaultElement: E): (props: {
1211
+ asChild?: boolean | undefined;
1212
+ } & react__default.HTMLProps<unknown>, ref: react__default.ForwardedRef<any>) => react__default.ReactElement<any, string | react__default.JSXElementConstructor<any>> | null;
1213
+ type SlotProps = {
1214
+ children: react__default.ReactNode;
1215
+ };
1216
+ declare const Slot: react__default.FC<SlotProps>;
1217
+
737
1218
  declare function useComponentStyles<T extends keyof ComponentThemesProps>(name: T, props: ComponentThemesProps[T], useDefaultVariants?: boolean): string;
738
1219
 
739
1220
  type ThemeComponentsStylesRequired = Required<ThemeComponentsStyles>;
@@ -747,4 +1228,4 @@ declare const classnames: (...args: Args[]) => string | undefined;
747
1228
 
748
1229
  declare const momotaro: Theme;
749
1230
 
750
- 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, Radio, RadioProps, Spinner, SpinnerProps, Stack, StackProps, Text, TextProps, ThemeComponentsStyles, ThemeTokens, atoms, breakpointQuery, classnames, makeComponentTheme, makeTheme, momotaro, useComponentStyleDefaultProps, useComponentStyles, vars };
1231
+ 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, Radio, RadioProps, Slot, Spinner, SpinnerProps, Stack, StackProps, Text, TextProps, ThemeComponentsStyles, ThemeTokens, atoms, breakpointQuery, classnames, createSlottable, makeComponentTheme, makeTheme, momotaro, useComponentStyleDefaultProps, useComponentStyles, vars };