@chromatic-com/tetra 2.0.0 → 2.1.0--canary.107.e1bd532.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 (7) hide show
  1. package/dist/index.d.mts +42 -42
  2. package/dist/index.d.ts +42 -42
  3. package/dist/index.js +184 -208
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +120 -141
  6. package/dist/index.mjs.map +1 -1
  7. package/package.json +16 -18
package/dist/index.d.mts CHANGED
@@ -1,7 +1,7 @@
1
- import * as _emotion_react from '@emotion/react';
1
+ import * as _storybook_theming_dist_create_77ee2cf0 from '@storybook/theming/dist/create-77ee2cf0';
2
2
  import * as React from 'react';
3
3
  import React__default, { FC, ReactNode, ElementType, FunctionComponent } from 'react';
4
- import * as _emotion_styled from '@emotion/styled';
4
+ import * as _storybook_theming from '@storybook/theming';
5
5
  import * as RadixDropdownMenu from '@radix-ui/react-dropdown-menu';
6
6
 
7
7
  declare const color: {
@@ -167,30 +167,30 @@ type TProps = {
167
167
  };
168
168
  declare const t: TProps;
169
169
  declare const typography: {
170
- heading56: _emotion_react.SerializedStyles;
171
- heading48: _emotion_react.SerializedStyles;
172
- heading40: _emotion_react.SerializedStyles;
173
- heading36: _emotion_react.SerializedStyles;
174
- heading30: _emotion_react.SerializedStyles;
175
- heading24: _emotion_react.SerializedStyles;
176
- heading20: _emotion_react.SerializedStyles;
177
- heading18: _emotion_react.SerializedStyles;
178
- heading16: _emotion_react.SerializedStyles;
179
- body20: _emotion_react.SerializedStyles;
180
- body18: _emotion_react.SerializedStyles;
181
- body16: _emotion_react.SerializedStyles;
182
- body14: _emotion_react.SerializedStyles;
183
- subheading: _emotion_react.SerializedStyles;
184
- subheadingLarge: _emotion_react.SerializedStyles;
170
+ heading56: _storybook_theming_dist_create_77ee2cf0.S;
171
+ heading48: _storybook_theming_dist_create_77ee2cf0.S;
172
+ heading40: _storybook_theming_dist_create_77ee2cf0.S;
173
+ heading36: _storybook_theming_dist_create_77ee2cf0.S;
174
+ heading30: _storybook_theming_dist_create_77ee2cf0.S;
175
+ heading24: _storybook_theming_dist_create_77ee2cf0.S;
176
+ heading20: _storybook_theming_dist_create_77ee2cf0.S;
177
+ heading18: _storybook_theming_dist_create_77ee2cf0.S;
178
+ heading16: _storybook_theming_dist_create_77ee2cf0.S;
179
+ body20: _storybook_theming_dist_create_77ee2cf0.S;
180
+ body18: _storybook_theming_dist_create_77ee2cf0.S;
181
+ body16: _storybook_theming_dist_create_77ee2cf0.S;
182
+ body14: _storybook_theming_dist_create_77ee2cf0.S;
183
+ subheading: _storybook_theming_dist_create_77ee2cf0.S;
184
+ subheadingLarge: _storybook_theming_dist_create_77ee2cf0.S;
185
185
  };
186
186
 
187
187
  declare const animations: {
188
- rotate360: _emotion_react.Keyframes;
189
- glow: _emotion_react.Keyframes;
190
- float: _emotion_react.Keyframes;
191
- jiggle: _emotion_react.Keyframes;
192
- shake: _emotion_react.Keyframes;
193
- inlineGlow: (inverse?: boolean) => _emotion_react.SerializedStyles;
188
+ rotate360: _storybook_theming_dist_create_77ee2cf0.K;
189
+ glow: _storybook_theming_dist_create_77ee2cf0.K;
190
+ float: _storybook_theming_dist_create_77ee2cf0.K;
191
+ jiggle: _storybook_theming_dist_create_77ee2cf0.K;
192
+ shake: _storybook_theming_dist_create_77ee2cf0.K;
193
+ inlineGlow: (inverse?: boolean) => _storybook_theming_dist_create_77ee2cf0.S;
194
194
  };
195
195
 
196
196
  declare function useMediaQuery(query: 'minBase' | 'minSm' | 'minMd' | 'minLg' | 'minXl' | 'min2Xl' | 'maxBase' | 'maxSm' | 'maxMd' | 'maxLg' | 'maxXl' | 'max2Xl' | 'base' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | {
@@ -498,11 +498,11 @@ declare const listOfOptions: readonly ["marginY", "marginTop", "marginBottom", "
498
498
  type ListOfOptionsArrayProps = (typeof listOfOptions)[number];
499
499
  type BlockWithOptionsForContainerProps = Pick<BlockWithOptionsProps, ListOfOptionsArrayProps>;
500
500
 
501
- declare const Container: _emotion_styled.StyledComponent<{
502
- theme?: _emotion_react.Theme | undefined;
501
+ declare const Container: _storybook_theming.StyledComponent<{
502
+ theme?: _storybook_theming.Theme | undefined;
503
503
  as?: React__default.ElementType<any> | undefined;
504
504
  } & BlockWithOptionsForContainerProps & React__default.ClassAttributes<HTMLDivElement> & React__default.HTMLAttributes<HTMLDivElement> & {
505
- theme?: _emotion_react.Theme | undefined;
505
+ theme?: _storybook_theming.Theme | undefined;
506
506
  }, {}, {}>;
507
507
  declare const FullWidthContainer: ({ children, ...props }: BlockWithOptionsForContainerProps & {
508
508
  children: ReactNode;
@@ -536,11 +536,11 @@ interface StackProps$1 extends BlockWithOptionsProps {
536
536
  color?: keyof typeof color;
537
537
  inverse?: boolean;
538
538
  }
539
- declare const Divider: _emotion_styled.StyledComponent<{
540
- theme?: _emotion_react.Theme | undefined;
539
+ declare const Divider: _storybook_theming.StyledComponent<{
540
+ theme?: _storybook_theming.Theme | undefined;
541
541
  as?: React.ElementType<any> | undefined;
542
542
  } & BlockWithOptionsProps & React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
543
- theme?: _emotion_react.Theme | undefined;
543
+ theme?: _storybook_theming.Theme | undefined;
544
544
  } & StackProps$1, {}, {}>;
545
545
 
546
546
  interface DropdownProps {
@@ -551,8 +551,8 @@ interface DropdownProps {
551
551
  declare const DropdownMenu: ({ label, variant, children, ...props }: DropdownProps) => JSX.Element;
552
552
 
553
553
  declare const DropdownMenuCheckboxItem: ({ children, ...props }: RadixDropdownMenu.MenuCheckboxItemProps) => JSX.Element;
554
- declare const DropdownMenuItem: _emotion_styled.StyledComponent<RadixDropdownMenu.DropdownMenuItemProps & React__default.RefAttributes<HTMLDivElement> & {
555
- theme?: _emotion_react.Theme | undefined;
554
+ declare const DropdownMenuItem: _storybook_theming.StyledComponent<RadixDropdownMenu.DropdownMenuItemProps & React__default.RefAttributes<HTMLDivElement> & {
555
+ theme?: _storybook_theming.Theme | undefined;
556
556
  }, {}, {}>;
557
557
 
558
558
  interface FooterItem {
@@ -725,8 +725,8 @@ interface NormalizeAreaProps extends React.HTMLAttributes<HTMLDivElement> {
725
725
  * https://nicksherman.com/size-by-area/ &
726
726
  * https://piperhaywood.com/images-consistent-surface-area/
727
727
  */
728
- declare const NormalizeArea: _emotion_styled.StyledComponent<{
729
- theme?: _emotion_react.Theme | undefined;
728
+ declare const NormalizeArea: _storybook_theming.StyledComponent<{
729
+ theme?: _storybook_theming.Theme | undefined;
730
730
  as?: React.ElementType<any> | undefined;
731
731
  } & NormalizeAreaProps, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
732
732
 
@@ -751,32 +751,32 @@ interface StackProps extends BlockWithOptionsProps {
751
751
  align: 'flex-start' | 'center' | 'flex-end';
752
752
  justify?: 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly';
753
753
  }
754
- declare const Stack: _emotion_styled.StyledComponent<{
755
- theme?: _emotion_react.Theme | undefined;
754
+ declare const Stack: _storybook_theming.StyledComponent<{
755
+ theme?: _storybook_theming.Theme | undefined;
756
756
  as?: React.ElementType<any> | undefined;
757
757
  } & BlockWithOptionsProps & React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
758
- theme?: _emotion_react.Theme | undefined;
758
+ theme?: _storybook_theming.Theme | undefined;
759
759
  } & {
760
760
  gap?: StackProps['gap'];
761
761
  direction?: StackProps['direction'];
762
762
  align?: "center" | "flex-start" | "flex-end" | undefined;
763
763
  justify?: StackProps['justify'];
764
764
  }, {}, {}>;
765
- declare const HStack: _emotion_styled.StyledComponent<{
766
- theme?: _emotion_react.Theme | undefined;
765
+ declare const HStack: _storybook_theming.StyledComponent<{
766
+ theme?: _storybook_theming.Theme | undefined;
767
767
  as?: React.ElementType<any> | undefined;
768
768
  } & BlockWithOptionsProps & React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
769
- theme?: _emotion_react.Theme | undefined;
769
+ theme?: _storybook_theming.Theme | undefined;
770
770
  } & {
771
771
  gap?: StackProps['gap'];
772
772
  align?: "center" | "flex-start" | "flex-end" | undefined;
773
773
  justify?: StackProps['justify'];
774
774
  }, {}, {}>;
775
- declare const VStack: _emotion_styled.StyledComponent<{
776
- theme?: _emotion_react.Theme | undefined;
775
+ declare const VStack: _storybook_theming.StyledComponent<{
776
+ theme?: _storybook_theming.Theme | undefined;
777
777
  as?: React.ElementType<any> | undefined;
778
778
  } & BlockWithOptionsProps & React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
779
- theme?: _emotion_react.Theme | undefined;
779
+ theme?: _storybook_theming.Theme | undefined;
780
780
  } & {
781
781
  gap?: StackProps['gap'];
782
782
  align?: "center" | "flex-start" | "flex-end" | undefined;
package/dist/index.d.ts CHANGED
@@ -1,7 +1,7 @@
1
- import * as _emotion_react from '@emotion/react';
1
+ import * as _storybook_theming_dist_create_77ee2cf0 from '@storybook/theming/dist/create-77ee2cf0';
2
2
  import * as React from 'react';
3
3
  import React__default, { FC, ReactNode, ElementType, FunctionComponent } from 'react';
4
- import * as _emotion_styled from '@emotion/styled';
4
+ import * as _storybook_theming from '@storybook/theming';
5
5
  import * as RadixDropdownMenu from '@radix-ui/react-dropdown-menu';
6
6
 
7
7
  declare const color: {
@@ -167,30 +167,30 @@ type TProps = {
167
167
  };
168
168
  declare const t: TProps;
169
169
  declare const typography: {
170
- heading56: _emotion_react.SerializedStyles;
171
- heading48: _emotion_react.SerializedStyles;
172
- heading40: _emotion_react.SerializedStyles;
173
- heading36: _emotion_react.SerializedStyles;
174
- heading30: _emotion_react.SerializedStyles;
175
- heading24: _emotion_react.SerializedStyles;
176
- heading20: _emotion_react.SerializedStyles;
177
- heading18: _emotion_react.SerializedStyles;
178
- heading16: _emotion_react.SerializedStyles;
179
- body20: _emotion_react.SerializedStyles;
180
- body18: _emotion_react.SerializedStyles;
181
- body16: _emotion_react.SerializedStyles;
182
- body14: _emotion_react.SerializedStyles;
183
- subheading: _emotion_react.SerializedStyles;
184
- subheadingLarge: _emotion_react.SerializedStyles;
170
+ heading56: _storybook_theming_dist_create_77ee2cf0.S;
171
+ heading48: _storybook_theming_dist_create_77ee2cf0.S;
172
+ heading40: _storybook_theming_dist_create_77ee2cf0.S;
173
+ heading36: _storybook_theming_dist_create_77ee2cf0.S;
174
+ heading30: _storybook_theming_dist_create_77ee2cf0.S;
175
+ heading24: _storybook_theming_dist_create_77ee2cf0.S;
176
+ heading20: _storybook_theming_dist_create_77ee2cf0.S;
177
+ heading18: _storybook_theming_dist_create_77ee2cf0.S;
178
+ heading16: _storybook_theming_dist_create_77ee2cf0.S;
179
+ body20: _storybook_theming_dist_create_77ee2cf0.S;
180
+ body18: _storybook_theming_dist_create_77ee2cf0.S;
181
+ body16: _storybook_theming_dist_create_77ee2cf0.S;
182
+ body14: _storybook_theming_dist_create_77ee2cf0.S;
183
+ subheading: _storybook_theming_dist_create_77ee2cf0.S;
184
+ subheadingLarge: _storybook_theming_dist_create_77ee2cf0.S;
185
185
  };
186
186
 
187
187
  declare const animations: {
188
- rotate360: _emotion_react.Keyframes;
189
- glow: _emotion_react.Keyframes;
190
- float: _emotion_react.Keyframes;
191
- jiggle: _emotion_react.Keyframes;
192
- shake: _emotion_react.Keyframes;
193
- inlineGlow: (inverse?: boolean) => _emotion_react.SerializedStyles;
188
+ rotate360: _storybook_theming_dist_create_77ee2cf0.K;
189
+ glow: _storybook_theming_dist_create_77ee2cf0.K;
190
+ float: _storybook_theming_dist_create_77ee2cf0.K;
191
+ jiggle: _storybook_theming_dist_create_77ee2cf0.K;
192
+ shake: _storybook_theming_dist_create_77ee2cf0.K;
193
+ inlineGlow: (inverse?: boolean) => _storybook_theming_dist_create_77ee2cf0.S;
194
194
  };
195
195
 
196
196
  declare function useMediaQuery(query: 'minBase' | 'minSm' | 'minMd' | 'minLg' | 'minXl' | 'min2Xl' | 'maxBase' | 'maxSm' | 'maxMd' | 'maxLg' | 'maxXl' | 'max2Xl' | 'base' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | {
@@ -498,11 +498,11 @@ declare const listOfOptions: readonly ["marginY", "marginTop", "marginBottom", "
498
498
  type ListOfOptionsArrayProps = (typeof listOfOptions)[number];
499
499
  type BlockWithOptionsForContainerProps = Pick<BlockWithOptionsProps, ListOfOptionsArrayProps>;
500
500
 
501
- declare const Container: _emotion_styled.StyledComponent<{
502
- theme?: _emotion_react.Theme | undefined;
501
+ declare const Container: _storybook_theming.StyledComponent<{
502
+ theme?: _storybook_theming.Theme | undefined;
503
503
  as?: React__default.ElementType<any> | undefined;
504
504
  } & BlockWithOptionsForContainerProps & React__default.ClassAttributes<HTMLDivElement> & React__default.HTMLAttributes<HTMLDivElement> & {
505
- theme?: _emotion_react.Theme | undefined;
505
+ theme?: _storybook_theming.Theme | undefined;
506
506
  }, {}, {}>;
507
507
  declare const FullWidthContainer: ({ children, ...props }: BlockWithOptionsForContainerProps & {
508
508
  children: ReactNode;
@@ -536,11 +536,11 @@ interface StackProps$1 extends BlockWithOptionsProps {
536
536
  color?: keyof typeof color;
537
537
  inverse?: boolean;
538
538
  }
539
- declare const Divider: _emotion_styled.StyledComponent<{
540
- theme?: _emotion_react.Theme | undefined;
539
+ declare const Divider: _storybook_theming.StyledComponent<{
540
+ theme?: _storybook_theming.Theme | undefined;
541
541
  as?: React.ElementType<any> | undefined;
542
542
  } & BlockWithOptionsProps & React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
543
- theme?: _emotion_react.Theme | undefined;
543
+ theme?: _storybook_theming.Theme | undefined;
544
544
  } & StackProps$1, {}, {}>;
545
545
 
546
546
  interface DropdownProps {
@@ -551,8 +551,8 @@ interface DropdownProps {
551
551
  declare const DropdownMenu: ({ label, variant, children, ...props }: DropdownProps) => JSX.Element;
552
552
 
553
553
  declare const DropdownMenuCheckboxItem: ({ children, ...props }: RadixDropdownMenu.MenuCheckboxItemProps) => JSX.Element;
554
- declare const DropdownMenuItem: _emotion_styled.StyledComponent<RadixDropdownMenu.DropdownMenuItemProps & React__default.RefAttributes<HTMLDivElement> & {
555
- theme?: _emotion_react.Theme | undefined;
554
+ declare const DropdownMenuItem: _storybook_theming.StyledComponent<RadixDropdownMenu.DropdownMenuItemProps & React__default.RefAttributes<HTMLDivElement> & {
555
+ theme?: _storybook_theming.Theme | undefined;
556
556
  }, {}, {}>;
557
557
 
558
558
  interface FooterItem {
@@ -725,8 +725,8 @@ interface NormalizeAreaProps extends React.HTMLAttributes<HTMLDivElement> {
725
725
  * https://nicksherman.com/size-by-area/ &
726
726
  * https://piperhaywood.com/images-consistent-surface-area/
727
727
  */
728
- declare const NormalizeArea: _emotion_styled.StyledComponent<{
729
- theme?: _emotion_react.Theme | undefined;
728
+ declare const NormalizeArea: _storybook_theming.StyledComponent<{
729
+ theme?: _storybook_theming.Theme | undefined;
730
730
  as?: React.ElementType<any> | undefined;
731
731
  } & NormalizeAreaProps, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
732
732
 
@@ -751,32 +751,32 @@ interface StackProps extends BlockWithOptionsProps {
751
751
  align: 'flex-start' | 'center' | 'flex-end';
752
752
  justify?: 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly';
753
753
  }
754
- declare const Stack: _emotion_styled.StyledComponent<{
755
- theme?: _emotion_react.Theme | undefined;
754
+ declare const Stack: _storybook_theming.StyledComponent<{
755
+ theme?: _storybook_theming.Theme | undefined;
756
756
  as?: React.ElementType<any> | undefined;
757
757
  } & BlockWithOptionsProps & React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
758
- theme?: _emotion_react.Theme | undefined;
758
+ theme?: _storybook_theming.Theme | undefined;
759
759
  } & {
760
760
  gap?: StackProps['gap'];
761
761
  direction?: StackProps['direction'];
762
762
  align?: "center" | "flex-start" | "flex-end" | undefined;
763
763
  justify?: StackProps['justify'];
764
764
  }, {}, {}>;
765
- declare const HStack: _emotion_styled.StyledComponent<{
766
- theme?: _emotion_react.Theme | undefined;
765
+ declare const HStack: _storybook_theming.StyledComponent<{
766
+ theme?: _storybook_theming.Theme | undefined;
767
767
  as?: React.ElementType<any> | undefined;
768
768
  } & BlockWithOptionsProps & React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
769
- theme?: _emotion_react.Theme | undefined;
769
+ theme?: _storybook_theming.Theme | undefined;
770
770
  } & {
771
771
  gap?: StackProps['gap'];
772
772
  align?: "center" | "flex-start" | "flex-end" | undefined;
773
773
  justify?: StackProps['justify'];
774
774
  }, {}, {}>;
775
- declare const VStack: _emotion_styled.StyledComponent<{
776
- theme?: _emotion_react.Theme | undefined;
775
+ declare const VStack: _storybook_theming.StyledComponent<{
776
+ theme?: _storybook_theming.Theme | undefined;
777
777
  as?: React.ElementType<any> | undefined;
778
778
  } & BlockWithOptionsProps & React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
779
- theme?: _emotion_react.Theme | undefined;
779
+ theme?: _storybook_theming.Theme | undefined;
780
780
  } & {
781
781
  gap?: StackProps['gap'];
782
782
  align?: "center" | "flex-start" | "flex-end" | undefined;