@blockle/blocks 0.7.1 → 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 (17) hide show
  1. package/dist/index.cjs +221 -103
  2. package/dist/index.d.ts +1 -1
  3. package/dist/index.mjs +222 -104
  4. package/dist/momotaro.chunk.d.ts +515 -34
  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/lib/theme/tokens.cjs +1 -0
  10. package/dist/styles/lib/theme/tokens.mjs +1 -0
  11. package/dist/styles/themes/momotaro/components/button.css.cjs +3 -1
  12. package/dist/styles/themes/momotaro/components/button.css.mjs +3 -1
  13. package/dist/styles/themes/momotaro/components/helpers.css.cjs +5 -4
  14. package/dist/styles/themes/momotaro/components/helpers.css.mjs +5 -4
  15. package/dist/styles/themes/momotaro/tokens.css.cjs +1 -0
  16. package/dist/styles/themes/momotaro/tokens.css.mjs +1 -0
  17. package/package.json +8 -9
package/dist/momotaro.chunk.d.ts CHANGED
@@ -1,7 +1,6 @@
1
- import { ForwardRefComponent } from '@radix-ui/react-polymorphic';
2
- import * as react from 'react';
3
- import react__default, { HTMLProps, ReactNode, FC } from 'react';
4
1
  import * as _vanilla_extract_sprinkles from '@vanilla-extract/sprinkles';
2
+ import * as react from 'react';
3
+ import react__default from 'react';
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,18 +536,250 @@ 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<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
- children: ReactNode;
782
+ children: React.ReactNode;
552
783
  type?: 'button' | 'submit' | 'reset';
553
784
  variant?: ButtonTheme['variants']['variant'];
554
785
  intent?: ButtonTheme['variants']['intent'];
@@ -556,12 +787,13 @@ type ButtonProps = {
556
787
  width?: Atoms['width'];
557
788
  alignSelf?: Atoms['alignSelf'];
558
789
  loading?: boolean;
559
- startSlot?: ReactNode;
560
- endSlot?: ReactNode;
790
+ startSlot?: React.ReactNode;
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
- children: ReactNode;
796
+ children: React.ReactNode;
565
797
  type?: "button" | "submit" | "reset" | undefined;
566
798
  variant?: "outline" | "solid" | "ghost" | undefined;
567
799
  intent?: "danger" | "neutral" | undefined;
@@ -569,10 +801,11 @@ declare const Button: react.ForwardRefExoticComponent<{
569
801
  width?: Atoms['width'];
570
802
  alignSelf?: Atoms['alignSelf'];
571
803
  loading?: boolean | undefined;
572
- startSlot?: ReactNode;
573
- endSlot?: ReactNode;
804
+ startSlot?: React.ReactNode;
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;
@@ -586,21 +819,21 @@ declare const Checkbox: react__default.ForwardRefExoticComponent<{
586
819
  } & HTMLElementProps<HTMLInputElement> & react__default.RefAttributes<HTMLInputElement>>;
587
820
 
588
821
  type DialogProps = {
589
- children?: ReactNode;
822
+ children?: React.ReactNode;
590
823
  open: boolean;
591
824
  onRequestClose: () => void;
592
825
  className?: string;
593
826
  size?: DialogTheme['variants']['size'];
594
827
  'aria-label'?: string;
595
828
  };
596
- declare const Dialog: FC<DialogProps>;
829
+ declare const Dialog: React.FC<DialogProps>;
597
830
 
598
831
  type DividerProps = {
599
832
  className?: string;
600
833
  color?: Atoms['backgroundColor'];
601
834
  style?: React.CSSProperties;
602
835
  };
603
- declare const Divider: FC<DividerProps>;
836
+ declare const Divider: React.FC<DividerProps>;
604
837
 
605
838
  type HeadingProps = {
606
839
  align?: Atoms['textAlign'];
@@ -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;
@@ -645,16 +878,16 @@ type InputProps = {
645
878
  className?: string;
646
879
  name: string;
647
880
  type?: OptionalLiteral<'email' | 'number' | 'password' | 'tel' | 'text' | 'url'>;
648
- startSlot?: ReactNode;
649
- endSlot?: ReactNode;
881
+ startSlot?: React.ReactNode;
882
+ endSlot?: React.ReactNode;
650
883
  label: string;
651
884
  } & Omit<HTMLElementProps<HTMLInputElement>, 'type'>;
652
885
  declare const Input: react.ForwardRefExoticComponent<{
653
886
  className?: string | undefined;
654
887
  name: string;
655
888
  type?: OptionalLiteral<"number" | "text" | "tel" | "url" | "email" | "password"> | undefined;
656
- startSlot?: ReactNode;
657
- endSlot?: ReactNode;
889
+ startSlot?: React.ReactNode;
890
+ endSlot?: React.ReactNode;
658
891
  label: string;
659
892
  } & Omit<HTMLElementProps<HTMLInputElement>, "type"> & react.RefAttributes<HTMLInputElement>>;
660
893
 
@@ -669,18 +902,250 @@ type LabelProps = {
669
902
  declare const Label: React.FC<LabelProps>;
670
903
 
671
904
  type LinkProps = {
672
- children?: ReactNode;
905
+ asChild?: boolean;
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
- children: ReactNode;
1145
+ children: React.ReactNode;
681
1146
  container?: HTMLElement;
682
1147
  };
683
- declare const Portal: FC<PortalProps>;
1148
+ declare const Portal: React.FC<PortalProps>;
684
1149
 
685
1150
  type RadioProps = {
686
1151
  name: string;
@@ -699,11 +1164,11 @@ type SpinnerProps = {
699
1164
  size?: SpinnerTheme['variants']['size'];
700
1165
  style?: React.CSSProperties;
701
1166
  } & MarginAtoms;
702
- declare const Spinner: FC<SpinnerProps>;
1167
+ 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 };