@prismicio/editor-ui 0.4.0 → 0.4.1

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 (23) hide show
  1. package/dist/components/BaseInput/BaseInput.css.d.ts +1 -1
  2. package/dist/components/Box/Box.d.ts +3 -0
  3. package/dist/components/Box/Box.stories.d.ts +16 -12
  4. package/dist/components/DropdownMenu/DropdownMenu.d.ts +3 -1
  5. package/dist/components/DropdownMenu/DropdownMenu.stories.d.ts +6 -2
  6. package/dist/components/Icon/Icon.d.ts +1 -1
  7. package/dist/components/Icon/Icon.stories.d.ts +4 -4
  8. package/dist/components/Icon/iconNames.d.ts +1 -1
  9. package/dist/components/Image/Image.css.d.ts +1 -1
  10. package/dist/components/Image/Image.stories.d.ts +2 -2
  11. package/dist/components/Switch/Switch.stories.d.ts +2 -2
  12. package/dist/components/Text/Text.d.ts +1 -1
  13. package/dist/components/Text/Text.stories.d.ts +4 -4
  14. package/dist/components/Toast/Toast.stories.d.ts +2 -2
  15. package/dist/components/Toolbar/Toolbar.stories.d.ts +2 -2
  16. package/dist/index.d.ts +1 -0
  17. package/dist/index.es.js +2562 -2542
  18. package/dist/index.umd.js +29 -23
  19. package/dist/style.css +1 -1
  20. package/dist/theme/selectors.d.ts +20 -20
  21. package/dist/theme/sprinkles.css.d.ts +286 -272
  22. package/dist/theme/vars.css.d.ts +6 -0
  23. package/package.json +4 -4
package/dist/components/BaseInput/BaseInput.css.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  export declare const base: string;
2
2
  export declare const root: string;
3
3
  export declare const input: string;
4
- export declare const inputColorVariant: Record<"normal" | "link", string>;
4
+ export declare const inputColorVariant: Record<"normal" | "link" | "success", string>;
5
5
  export declare const startAdornment: string;
6
6
  export declare const endAdornment: string;
package/dist/components/Box/Box.d.ts CHANGED
@@ -12,6 +12,8 @@ declare type BoxProps = {
12
12
  maxWidth?: Sprinkles["maxWidth"] | number;
13
13
  height?: Sprinkles["height"] | number;
14
14
  maxHeight?: Sprinkles["maxHeight"] | number | string;
15
+ flex?: Sprinkles["flex"];
16
+ animation?: Animation;
15
17
  padding?: Padding;
16
18
  border?: Border;
17
19
  borderRadius?: Sprinkles["borderRadius"];
@@ -32,6 +34,7 @@ declare type FlexDisplayProps = {
32
34
  display?: "flex";
33
35
  flexDirection?: "column" | "row";
34
36
  };
37
+ declare type Animation = "fadeIn";
35
38
  declare type Padding = Sprinkles["padding"] | {
36
39
  block?: Sprinkles["padding"];
37
40
  inline?: Sprinkles["padding"];
package/dist/components/Box/Box.stories.d.ts CHANGED
@@ -1,15 +1,17 @@
1
1
  import type { ComponentMeta, ComponentStoryFn } from "@storybook/react";
2
2
  declare const _default: ComponentMeta<import("react").ForwardRefExoticComponent<({
3
- as?: "article" | "div" | "header" | "nav" | "ol" | "ul" | undefined;
3
+ as?: "div" | "nav" | "ul" | "ol" | "article" | "header" | undefined;
4
4
  children?: import("react").ReactNode;
5
5
  position?: "fixed" | "absolute" | "relative" | "sticky" | undefined;
6
6
  top?: 0 | 2 | 4 | 6 | 8 | 10 | 12 | 16 | 24 | 32 | 72 | 48 | 80 | undefined;
7
7
  right?: 0 | 2 | 4 | 6 | 8 | 10 | 12 | 16 | 24 | 32 | 72 | 48 | 80 | undefined;
8
8
  bottom?: 0 | 2 | 4 | 6 | 8 | 10 | 12 | 16 | 24 | 32 | 72 | 48 | 80 | undefined;
9
- width?: number | "fit-content" | "100%" | "100vw" | "100vh" | undefined;
10
- maxWidth?: number | "fit-content" | "100%" | "100vw" | "100vh" | undefined;
11
- height?: number | "fit-content" | "100%" | "100vw" | "100vh" | undefined;
9
+ width?: number | "100%" | "100vw" | "100vh" | "fit-content" | undefined;
10
+ maxWidth?: number | "100%" | "100vw" | "100vh" | "fit-content" | undefined;
11
+ height?: number | "100%" | "100vw" | "100vh" | "fit-content" | undefined;
12
12
  maxHeight?: string | number | undefined;
13
+ flex?: number | undefined;
14
+ animation?: "fadeIn" | undefined;
13
15
  padding?: 0 | 2 | 4 | 6 | 8 | 10 | 12 | 16 | 24 | 32 | 72 | 48 | 80 | {
14
16
  block?: 0 | 2 | 4 | 6 | 8 | 10 | 12 | 16 | 24 | 32 | 72 | 48 | 80 | undefined;
15
17
  inline?: 0 | 2 | 4 | 6 | 8 | 10 | 12 | 16 | 24 | 32 | 72 | 48 | 80 | undefined;
@@ -24,8 +26,8 @@ declare const _default: ComponentMeta<import("react").ForwardRefExoticComponent<
24
26
  left?: boolean | undefined;
25
27
  right?: boolean | undefined;
26
28
  }) | undefined;
27
- borderRadius?: 0 | 1 | 2 | "100%" | 4 | 6 | 8 | 10 | 12 | undefined;
28
- backgroundColor?: "indigo10" | "indigo11" | "green3" | "green4" | "green9" | "green10" | "green11" | "amber3" | "amber4" | "amber9" | "amber10" | "amber11" | "tomato1" | "tomato3" | "tomato7" | "tomato10" | "tomato11" | "purple1" | "purple2" | "purple3" | "purple4" | "purple5" | "purple6" | "purple7" | "purple8" | "purple9" | "purple10" | "purple11" | "purple12" | "purpleAlpha1" | "currentColor" | "inherit" | "transparent" | "grey1" | "grey2" | "grey3" | "grey4" | "grey5" | "grey6" | "grey7" | "grey8" | "grey9" | "grey10" | "grey11" | "grey12" | "dark2" | "dark6" | "dark7" | "dark12" | undefined;
29
+ borderRadius?: 0 | 2 | "100%" | 1 | 4 | 6 | 8 | 10 | 12 | undefined;
30
+ backgroundColor?: "currentColor" | "inherit" | "transparent" | "indigo10" | "indigo11" | "green3" | "green4" | "green9" | "green10" | "green11" | "amber3" | "amber4" | "amber9" | "amber10" | "amber11" | "tomato1" | "tomato3" | "tomato7" | "tomato10" | "tomato11" | "purple1" | "purple2" | "purple3" | "purple4" | "purple5" | "purple6" | "purple7" | "purple8" | "purple9" | "purple10" | "purple11" | "purple12" | "purpleAlpha1" | "grey1" | "grey2" | "grey3" | "grey4" | "grey5" | "grey6" | "grey7" | "grey8" | "grey9" | "grey10" | "grey11" | "grey12" | "dark2" | "dark6" | "dark7" | "dark12" | undefined;
29
31
  overflowY?: "auto" | undefined;
30
32
  } & ({
31
33
  gap?: 0 | 2 | 4 | 6 | 8 | 10 | 12 | 16 | 24 | 32 | 72 | 48 | 80 | undefined;
@@ -41,16 +43,18 @@ declare const _default: ComponentMeta<import("react").ForwardRefExoticComponent<
41
43
  }))) & import("react").RefAttributes<HTMLElement>>>;
42
44
  export default _default;
43
45
  export declare const Default: ComponentStoryFn<import("react").ForwardRefExoticComponent<({
44
- as?: "article" | "div" | "header" | "nav" | "ol" | "ul" | undefined;
46
+ as?: "div" | "nav" | "ul" | "ol" | "article" | "header" | undefined;
45
47
  children?: import("react").ReactNode;
46
48
  position?: "fixed" | "absolute" | "relative" | "sticky" | undefined;
47
49
  top?: 0 | 2 | 4 | 6 | 8 | 10 | 12 | 16 | 24 | 32 | 72 | 48 | 80 | undefined;
48
50
  right?: 0 | 2 | 4 | 6 | 8 | 10 | 12 | 16 | 24 | 32 | 72 | 48 | 80 | undefined;
49
51
  bottom?: 0 | 2 | 4 | 6 | 8 | 10 | 12 | 16 | 24 | 32 | 72 | 48 | 80 | undefined;
50
- width?: number | "fit-content" | "100%" | "100vw" | "100vh" | undefined;
51
- maxWidth?: number | "fit-content" | "100%" | "100vw" | "100vh" | undefined;
52
- height?: number | "fit-content" | "100%" | "100vw" | "100vh" | undefined;
52
+ width?: number | "100%" | "100vw" | "100vh" | "fit-content" | undefined;
53
+ maxWidth?: number | "100%" | "100vw" | "100vh" | "fit-content" | undefined;
54
+ height?: number | "100%" | "100vw" | "100vh" | "fit-content" | undefined;
53
55
  maxHeight?: string | number | undefined;
56
+ flex?: number | undefined;
57
+ animation?: "fadeIn" | undefined;
54
58
  padding?: 0 | 2 | 4 | 6 | 8 | 10 | 12 | 16 | 24 | 32 | 72 | 48 | 80 | {
55
59
  block?: 0 | 2 | 4 | 6 | 8 | 10 | 12 | 16 | 24 | 32 | 72 | 48 | 80 | undefined;
56
60
  inline?: 0 | 2 | 4 | 6 | 8 | 10 | 12 | 16 | 24 | 32 | 72 | 48 | 80 | undefined;
@@ -65,8 +69,8 @@ export declare const Default: ComponentStoryFn<import("react").ForwardRefExoticC
65
69
  left?: boolean | undefined;
66
70
  right?: boolean | undefined;
67
71
  }) | undefined;
68
- borderRadius?: 0 | 1 | 2 | "100%" | 4 | 6 | 8 | 10 | 12 | undefined;
69
- backgroundColor?: "indigo10" | "indigo11" | "green3" | "green4" | "green9" | "green10" | "green11" | "amber3" | "amber4" | "amber9" | "amber10" | "amber11" | "tomato1" | "tomato3" | "tomato7" | "tomato10" | "tomato11" | "purple1" | "purple2" | "purple3" | "purple4" | "purple5" | "purple6" | "purple7" | "purple8" | "purple9" | "purple10" | "purple11" | "purple12" | "purpleAlpha1" | "currentColor" | "inherit" | "transparent" | "grey1" | "grey2" | "grey3" | "grey4" | "grey5" | "grey6" | "grey7" | "grey8" | "grey9" | "grey10" | "grey11" | "grey12" | "dark2" | "dark6" | "dark7" | "dark12" | undefined;
72
+ borderRadius?: 0 | 2 | "100%" | 1 | 4 | 6 | 8 | 10 | 12 | undefined;
73
+ backgroundColor?: "currentColor" | "inherit" | "transparent" | "indigo10" | "indigo11" | "green3" | "green4" | "green9" | "green10" | "green11" | "amber3" | "amber4" | "amber9" | "amber10" | "amber11" | "tomato1" | "tomato3" | "tomato7" | "tomato10" | "tomato11" | "purple1" | "purple2" | "purple3" | "purple4" | "purple5" | "purple6" | "purple7" | "purple8" | "purple9" | "purple10" | "purple11" | "purple12" | "purpleAlpha1" | "grey1" | "grey2" | "grey3" | "grey4" | "grey5" | "grey6" | "grey7" | "grey8" | "grey9" | "grey10" | "grey11" | "grey12" | "dark2" | "dark6" | "dark7" | "dark12" | undefined;
70
74
  overflowY?: "auto" | undefined;
71
75
  } & ({
72
76
  gap?: 0 | 2 | 4 | 6 | 8 | 10 | 12 | 16 | 24 | 32 | 72 | 48 | 80 | undefined;
package/dist/components/DropdownMenu/DropdownMenu.d.ts CHANGED
@@ -1,6 +1,8 @@
1
1
  import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
2
2
  import { type FC, type ReactNode } from "react";
3
- declare type DropdownMenuProps = Readonly<Pick<DropdownMenuPrimitive.DropdownMenuProps, "children">>;
3
+ declare type DropdownMenuProps = Readonly<Pick<DropdownMenuPrimitive.DropdownMenuProps, "children"> & {
4
+ modal?: boolean;
5
+ }>;
4
6
  export declare const DropdownMenu: FC<DropdownMenuProps>;
5
7
  declare type DropdownMenuTriggerProps = Readonly<Pick<DropdownMenuPrimitive.DropdownMenuTriggerProps, "children" | "disabled">>;
6
8
  export declare const DropdownMenuTrigger: FC<DropdownMenuTriggerProps>;
package/dist/components/DropdownMenu/DropdownMenu.stories.d.ts CHANGED
@@ -1,4 +1,8 @@
1
1
  import type { ComponentMeta, ComponentStoryFn } from "@storybook/react";
2
- declare const _default: ComponentMeta<import("react").FC<Readonly<Pick<import("@radix-ui/react-dropdown-menu").DropdownMenuProps, "children">>>>;
2
+ declare const _default: ComponentMeta<import("react").FC<Readonly<Pick<import("@radix-ui/react-dropdown-menu").DropdownMenuProps, "children"> & {
3
+ modal?: boolean | undefined;
4
+ }>>>;
3
5
  export default _default;
4
- export declare const Default: ComponentStoryFn<import("react").FC<Readonly<Pick<import("@radix-ui/react-dropdown-menu").DropdownMenuProps, "children">>>>;
6
+ export declare const Default: ComponentStoryFn<import("react").FC<Readonly<Pick<import("@radix-ui/react-dropdown-menu").DropdownMenuProps, "children"> & {
7
+ modal?: boolean | undefined;
8
+ }>>>;
package/dist/components/Icon/Icon.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import type { IconName } from "./iconNames";
2
2
  export declare const Icon: import("react").ForwardRefExoticComponent<Readonly<{
3
3
  className?: string | undefined;
4
- color?: "indigo10" | "indigo11" | "green3" | "green4" | "green9" | "green10" | "green11" | "amber3" | "amber4" | "amber9" | "amber10" | "amber11" | "tomato1" | "tomato3" | "tomato7" | "tomato10" | "tomato11" | "purple1" | "purple2" | "purple3" | "purple4" | "purple5" | "purple6" | "purple7" | "purple8" | "purple9" | "purple10" | "purple11" | "purple12" | "purpleAlpha1" | "currentColor" | "inherit" | "transparent" | "grey1" | "grey2" | "grey3" | "grey4" | "grey5" | "grey6" | "grey7" | "grey8" | "grey9" | "grey10" | "grey11" | "grey12" | "dark2" | "dark6" | "dark7" | "dark12" | undefined;
4
+ color?: "currentColor" | "inherit" | "transparent" | "indigo10" | "indigo11" | "green3" | "green4" | "green9" | "green10" | "green11" | "amber3" | "amber4" | "amber9" | "amber10" | "amber11" | "tomato1" | "tomato3" | "tomato7" | "tomato10" | "tomato11" | "purple1" | "purple2" | "purple3" | "purple4" | "purple5" | "purple6" | "purple7" | "purple8" | "purple9" | "purple10" | "purple11" | "purple12" | "purpleAlpha1" | "grey1" | "grey2" | "grey3" | "grey4" | "grey5" | "grey6" | "grey7" | "grey8" | "grey9" | "grey10" | "grey11" | "grey12" | "dark2" | "dark6" | "dark7" | "dark12" | undefined;
5
5
  name: IconName;
6
6
  size?: "medium" | "large" | "small" | "xs" | undefined;
7
7
  }> & import("react").RefAttributes<SVGSVGElement>>;
package/dist/components/Icon/Icon.stories.d.ts CHANGED
@@ -1,14 +1,14 @@
1
1
  import type { ComponentMeta, ComponentStoryFn } from "@storybook/react";
2
2
  declare const _default: ComponentMeta<import("react").ForwardRefExoticComponent<Readonly<{
3
3
  className?: string | undefined;
4
- color?: "indigo10" | "indigo11" | "green3" | "green4" | "green9" | "green10" | "green11" | "amber3" | "amber4" | "amber9" | "amber10" | "amber11" | "tomato1" | "tomato3" | "tomato7" | "tomato10" | "tomato11" | "purple1" | "purple2" | "purple3" | "purple4" | "purple5" | "purple6" | "purple7" | "purple8" | "purple9" | "purple10" | "purple11" | "purple12" | "purpleAlpha1" | "currentColor" | "inherit" | "transparent" | "grey1" | "grey2" | "grey3" | "grey4" | "grey5" | "grey6" | "grey7" | "grey8" | "grey9" | "grey10" | "grey11" | "grey12" | "dark2" | "dark6" | "dark7" | "dark12" | undefined;
5
- name: "add" | "search" | "link" | "alert" | "arrowBack" | "arrowDownward" | "arrowDropDown" | "arrowDropDownCircle" | "arrowForward" | "arrowUpward" | "calendarToday" | "centerFocusWeak" | "check" | "close" | "cloud" | "cloudUpload" | "colorLens" | "contentCopy" | "crop" | "cropLandscape" | "cropPortrait" | "dataObject" | "dateRange" | "delete" | "description" | "desktopWindows" | "dragIndicator" | "edit" | "event" | "folder" | "formatBold" | "formatClear" | "formatItalic" | "formatListBulleted" | "formatListNumbered" | "formatTextDirectionRToL" | "imageSearch" | "keyboardArrowDown" | "keyboardArrowUp" | "linkOff" | "looks1" | "looks2" | "looks3" | "looks4" | "looks5" | "looks6" | "moreVert" | "notes" | "phoneIphone" | "photo" | "pin" | "public" | "schedule" | "tabletMac" | "textFields" | "toggleOff" | "unfoldMore" | "viewDay" | "zoomOutMap";
4
+ color?: "currentColor" | "inherit" | "transparent" | "indigo10" | "indigo11" | "green3" | "green4" | "green9" | "green10" | "green11" | "amber3" | "amber4" | "amber9" | "amber10" | "amber11" | "tomato1" | "tomato3" | "tomato7" | "tomato10" | "tomato11" | "purple1" | "purple2" | "purple3" | "purple4" | "purple5" | "purple6" | "purple7" | "purple8" | "purple9" | "purple10" | "purple11" | "purple12" | "purpleAlpha1" | "grey1" | "grey2" | "grey3" | "grey4" | "grey5" | "grey6" | "grey7" | "grey8" | "grey9" | "grey10" | "grey11" | "grey12" | "dark2" | "dark6" | "dark7" | "dark12" | undefined;
5
+ name: "visibility" | "add" | "alert" | "arrowBack" | "arrowDownward" | "arrowDropDown" | "arrowDropDownCircle" | "arrowForward" | "arrowUpward" | "calendarToday" | "centerFocusWeak" | "check" | "close" | "cloud" | "cloudUpload" | "colorLens" | "contentCopy" | "crop" | "cropLandscape" | "cropPortrait" | "dataObject" | "dateRange" | "delete" | "description" | "desktopWindows" | "dragIndicator" | "edit" | "event" | "folder" | "formatBold" | "formatClear" | "formatItalic" | "formatListBulleted" | "formatListNumbered" | "formatTextDirectionRToL" | "imageSearch" | "keyboardArrowDown" | "keyboardArrowUp" | "link" | "linkOff" | "looks1" | "looks2" | "looks3" | "looks4" | "looks5" | "looks6" | "moreVert" | "notes" | "phoneIphone" | "photo" | "pin" | "public" | "schedule" | "search" | "tabletMac" | "tag" | "textFields" | "toggleOff" | "unfoldMore" | "unsplash" | "viewDay" | "zoomOutMap";
6
6
  size?: "medium" | "large" | "small" | "xs" | undefined;
7
7
  }> & import("react").RefAttributes<SVGSVGElement>>>;
8
8
  export default _default;
9
9
  export declare const Default: ComponentStoryFn<import("react").ForwardRefExoticComponent<Readonly<{
10
10
  className?: string | undefined;
11
- color?: "indigo10" | "indigo11" | "green3" | "green4" | "green9" | "green10" | "green11" | "amber3" | "amber4" | "amber9" | "amber10" | "amber11" | "tomato1" | "tomato3" | "tomato7" | "tomato10" | "tomato11" | "purple1" | "purple2" | "purple3" | "purple4" | "purple5" | "purple6" | "purple7" | "purple8" | "purple9" | "purple10" | "purple11" | "purple12" | "purpleAlpha1" | "currentColor" | "inherit" | "transparent" | "grey1" | "grey2" | "grey3" | "grey4" | "grey5" | "grey6" | "grey7" | "grey8" | "grey9" | "grey10" | "grey11" | "grey12" | "dark2" | "dark6" | "dark7" | "dark12" | undefined;
12
- name: "add" | "search" | "link" | "alert" | "arrowBack" | "arrowDownward" | "arrowDropDown" | "arrowDropDownCircle" | "arrowForward" | "arrowUpward" | "calendarToday" | "centerFocusWeak" | "check" | "close" | "cloud" | "cloudUpload" | "colorLens" | "contentCopy" | "crop" | "cropLandscape" | "cropPortrait" | "dataObject" | "dateRange" | "delete" | "description" | "desktopWindows" | "dragIndicator" | "edit" | "event" | "folder" | "formatBold" | "formatClear" | "formatItalic" | "formatListBulleted" | "formatListNumbered" | "formatTextDirectionRToL" | "imageSearch" | "keyboardArrowDown" | "keyboardArrowUp" | "linkOff" | "looks1" | "looks2" | "looks3" | "looks4" | "looks5" | "looks6" | "moreVert" | "notes" | "phoneIphone" | "photo" | "pin" | "public" | "schedule" | "tabletMac" | "textFields" | "toggleOff" | "unfoldMore" | "viewDay" | "zoomOutMap";
11
+ color?: "currentColor" | "inherit" | "transparent" | "indigo10" | "indigo11" | "green3" | "green4" | "green9" | "green10" | "green11" | "amber3" | "amber4" | "amber9" | "amber10" | "amber11" | "tomato1" | "tomato3" | "tomato7" | "tomato10" | "tomato11" | "purple1" | "purple2" | "purple3" | "purple4" | "purple5" | "purple6" | "purple7" | "purple8" | "purple9" | "purple10" | "purple11" | "purple12" | "purpleAlpha1" | "grey1" | "grey2" | "grey3" | "grey4" | "grey5" | "grey6" | "grey7" | "grey8" | "grey9" | "grey10" | "grey11" | "grey12" | "dark2" | "dark6" | "dark7" | "dark12" | undefined;
12
+ name: "visibility" | "add" | "alert" | "arrowBack" | "arrowDownward" | "arrowDropDown" | "arrowDropDownCircle" | "arrowForward" | "arrowUpward" | "calendarToday" | "centerFocusWeak" | "check" | "close" | "cloud" | "cloudUpload" | "colorLens" | "contentCopy" | "crop" | "cropLandscape" | "cropPortrait" | "dataObject" | "dateRange" | "delete" | "description" | "desktopWindows" | "dragIndicator" | "edit" | "event" | "folder" | "formatBold" | "formatClear" | "formatItalic" | "formatListBulleted" | "formatListNumbered" | "formatTextDirectionRToL" | "imageSearch" | "keyboardArrowDown" | "keyboardArrowUp" | "link" | "linkOff" | "looks1" | "looks2" | "looks3" | "looks4" | "looks5" | "looks6" | "moreVert" | "notes" | "phoneIphone" | "photo" | "pin" | "public" | "schedule" | "search" | "tabletMac" | "tag" | "textFields" | "toggleOff" | "unfoldMore" | "unsplash" | "viewDay" | "zoomOutMap";
13
13
  size?: "medium" | "large" | "small" | "xs" | undefined;
14
14
  }> & import("react").RefAttributes<SVGSVGElement>>>;
package/dist/components/Icon/iconNames.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- export declare const iconNames: readonly ["add", "alert", "arrowBack", "arrowDownward", "arrowDropDown", "arrowDropDownCircle", "arrowForward", "arrowUpward", "calendarToday", "centerFocusWeak", "check", "close", "cloud", "cloudUpload", "colorLens", "contentCopy", "crop", "cropLandscape", "cropPortrait", "dataObject", "dateRange", "delete", "description", "desktopWindows", "dragIndicator", "edit", "event", "folder", "formatBold", "formatClear", "formatItalic", "formatListBulleted", "formatListNumbered", "formatTextDirectionRToL", "imageSearch", "keyboardArrowDown", "keyboardArrowUp", "link", "linkOff", "looks1", "looks2", "looks3", "looks4", "looks5", "looks6", "moreVert", "notes", "phoneIphone", "photo", "pin", "public", "schedule", "search", "tabletMac", "textFields", "toggleOff", "unfoldMore", "viewDay", "zoomOutMap"];
1
+ export declare const iconNames: readonly ["add", "alert", "arrowBack", "arrowDownward", "arrowDropDown", "arrowDropDownCircle", "arrowForward", "arrowUpward", "calendarToday", "centerFocusWeak", "check", "close", "cloud", "cloudUpload", "colorLens", "contentCopy", "crop", "cropLandscape", "cropPortrait", "dataObject", "dateRange", "delete", "description", "desktopWindows", "dragIndicator", "edit", "event", "folder", "formatBold", "formatClear", "formatItalic", "formatListBulleted", "formatListNumbered", "formatTextDirectionRToL", "imageSearch", "keyboardArrowDown", "keyboardArrowUp", "link", "linkOff", "looks1", "looks2", "looks3", "looks4", "looks5", "looks6", "moreVert", "notes", "phoneIphone", "photo", "pin", "public", "schedule", "search", "tabletMac", "tag", "textFields", "toggleOff", "unfoldMore", "unsplash", "viewDay", "visibility", "zoomOutMap"];
2
2
  export declare type IconName = typeof iconNames[number];
package/dist/components/Image/Image.css.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  export declare const loading: string;
2
2
  export declare const loaded: string;
3
- export declare const sizing: Record<"contain" | "none" | "cover", string>;
3
+ export declare const sizing: Record<"none" | "contain" | "cover", string>;
4
4
  export declare const borderRadius: {
5
5
  0: string;
6
6
  4: string;
package/dist/components/Image/Image.stories.d.ts CHANGED
@@ -4,7 +4,7 @@ declare const _default: ComponentMeta<import("react").FC<Readonly<{
4
4
  alt?: string | undefined;
5
5
  loading?: "eager" | "lazy" | undefined;
6
6
  decoding?: "auto" | "async" | "sync" | undefined;
7
- sizing?: "contain" | "none" | "cover" | undefined;
7
+ sizing?: "none" | "contain" | "cover" | undefined;
8
8
  borderRadius?: 0 | 4 | undefined;
9
9
  boxShadow?: "3" | undefined;
10
10
  animateOnLoad?: boolean | undefined;
@@ -16,7 +16,7 @@ export declare const Default: ComponentStoryFn<import("react").FC<Readonly<{
16
16
  alt?: string | undefined;
17
17
  loading?: "eager" | "lazy" | undefined;
18
18
  decoding?: "auto" | "async" | "sync" | undefined;
19
- sizing?: "contain" | "none" | "cover" | undefined;
19
+ sizing?: "none" | "contain" | "cover" | undefined;
20
20
  borderRadius?: 0 | 4 | undefined;
21
21
  boxShadow?: "3" | undefined;
22
22
  animateOnLoad?: boolean | undefined;
package/dist/components/Switch/Switch.stories.d.ts CHANGED
@@ -1,10 +1,10 @@
1
1
  import type { ComponentMeta, ComponentStoryFn } from "@storybook/react";
2
- declare const _default: ComponentMeta<import("react").FC<Readonly<Pick<import("@radix-ui/react-switch").SwitchProps, "disabled" | "name" | "id" | "value" | "checked" | "onCheckedChange"> & {
2
+ declare const _default: ComponentMeta<import("react").FC<Readonly<Pick<import("@radix-ui/react-switch").SwitchProps, "disabled" | "name" | "value" | "id" | "checked" | "onCheckedChange"> & {
3
3
  inField?: boolean | undefined;
4
4
  size?: "medium" | "small" | undefined;
5
5
  }>>>;
6
6
  export default _default;
7
- export declare const Default: ComponentStoryFn<import("react").FC<Readonly<Pick<import("@radix-ui/react-switch").SwitchProps, "disabled" | "name" | "id" | "value" | "checked" | "onCheckedChange"> & {
7
+ export declare const Default: ComponentStoryFn<import("react").FC<Readonly<Pick<import("@radix-ui/react-switch").SwitchProps, "disabled" | "name" | "value" | "id" | "checked" | "onCheckedChange"> & {
8
8
  inField?: boolean | undefined;
9
9
  size?: "medium" | "small" | undefined;
10
10
  }>>>;
package/dist/components/Text/Text.d.ts CHANGED
@@ -17,7 +17,7 @@ export declare const Text: import("react").ForwardRefExoticComponent<Readonly<{
17
17
  align?: "inherit" | "center" | "end" | "start" | undefined;
18
18
  children?: ReactNode;
19
19
  className?: string | undefined;
20
- color?: "indigo10" | "indigo11" | "green3" | "green4" | "green9" | "green10" | "green11" | "amber3" | "amber4" | "amber9" | "amber10" | "amber11" | "tomato1" | "tomato3" | "tomato7" | "tomato10" | "tomato11" | "purple1" | "purple2" | "purple3" | "purple4" | "purple5" | "purple6" | "purple7" | "purple8" | "purple9" | "purple10" | "purple11" | "purple12" | "purpleAlpha1" | "currentColor" | "inherit" | "transparent" | "grey1" | "grey2" | "grey3" | "grey4" | "grey5" | "grey6" | "grey7" | "grey8" | "grey9" | "grey10" | "grey11" | "grey12" | "dark2" | "dark6" | "dark7" | "dark12" | undefined;
20
+ color?: "currentColor" | "inherit" | "transparent" | "indigo10" | "indigo11" | "green3" | "green4" | "green9" | "green10" | "green11" | "amber3" | "amber4" | "amber9" | "amber10" | "amber11" | "tomato1" | "tomato3" | "tomato7" | "tomato10" | "tomato11" | "purple1" | "purple2" | "purple3" | "purple4" | "purple5" | "purple6" | "purple7" | "purple8" | "purple9" | "purple10" | "purple11" | "purple12" | "purpleAlpha1" | "grey1" | "grey2" | "grey3" | "grey4" | "grey5" | "grey6" | "grey7" | "grey8" | "grey9" | "grey10" | "grey11" | "grey12" | "dark2" | "dark6" | "dark7" | "dark12" | undefined;
21
21
  component?: Component | undefined;
22
22
  inField?: boolean | undefined;
23
23
  noWrap?: boolean | undefined;
package/dist/components/Text/Text.stories.d.ts CHANGED
@@ -3,8 +3,8 @@ declare const _default: ComponentMeta<import("react").ForwardRefExoticComponent<
3
3
  align?: "inherit" | "center" | "end" | "start" | undefined;
4
4
  children?: import("react").ReactNode;
5
5
  className?: string | undefined;
6
- color?: "indigo10" | "indigo11" | "green3" | "green4" | "green9" | "green10" | "green11" | "amber3" | "amber4" | "amber9" | "amber10" | "amber11" | "tomato1" | "tomato3" | "tomato7" | "tomato10" | "tomato11" | "purple1" | "purple2" | "purple3" | "purple4" | "purple5" | "purple6" | "purple7" | "purple8" | "purple9" | "purple10" | "purple11" | "purple12" | "purpleAlpha1" | "currentColor" | "inherit" | "transparent" | "grey1" | "grey2" | "grey3" | "grey4" | "grey5" | "grey6" | "grey7" | "grey8" | "grey9" | "grey10" | "grey11" | "grey12" | "dark2" | "dark6" | "dark7" | "dark12" | undefined;
7
- component?: ("pre" | "code" | "h1" | "h2" | "h3" | "h4" | "kbd" | "p" | "span") | undefined;
6
+ color?: "currentColor" | "inherit" | "transparent" | "indigo10" | "indigo11" | "green3" | "green4" | "green9" | "green10" | "green11" | "amber3" | "amber4" | "amber9" | "amber10" | "amber11" | "tomato1" | "tomato3" | "tomato7" | "tomato10" | "tomato11" | "purple1" | "purple2" | "purple3" | "purple4" | "purple5" | "purple6" | "purple7" | "purple8" | "purple9" | "purple10" | "purple11" | "purple12" | "purpleAlpha1" | "grey1" | "grey2" | "grey3" | "grey4" | "grey5" | "grey6" | "grey7" | "grey8" | "grey9" | "grey10" | "grey11" | "grey12" | "dark2" | "dark6" | "dark7" | "dark12" | undefined;
7
+ component?: ("code" | "pre" | "h1" | "h2" | "h3" | "h4" | "kbd" | "p" | "span") | undefined;
8
8
  inField?: boolean | undefined;
9
9
  noWrap?: boolean | undefined;
10
10
  variant?: "inherit" | "normal" | "small" | "bold" | "h1" | "h2" | "h3" | "h4" | "smallBold" | "extraSmall" | "emphasized" | undefined;
@@ -14,8 +14,8 @@ export declare const Default: ComponentStoryFn<import("react").ForwardRefExoticC
14
14
  align?: "inherit" | "center" | "end" | "start" | undefined;
15
15
  children?: import("react").ReactNode;
16
16
  className?: string | undefined;
17
- color?: "indigo10" | "indigo11" | "green3" | "green4" | "green9" | "green10" | "green11" | "amber3" | "amber4" | "amber9" | "amber10" | "amber11" | "tomato1" | "tomato3" | "tomato7" | "tomato10" | "tomato11" | "purple1" | "purple2" | "purple3" | "purple4" | "purple5" | "purple6" | "purple7" | "purple8" | "purple9" | "purple10" | "purple11" | "purple12" | "purpleAlpha1" | "currentColor" | "inherit" | "transparent" | "grey1" | "grey2" | "grey3" | "grey4" | "grey5" | "grey6" | "grey7" | "grey8" | "grey9" | "grey10" | "grey11" | "grey12" | "dark2" | "dark6" | "dark7" | "dark12" | undefined;
18
- component?: ("pre" | "code" | "h1" | "h2" | "h3" | "h4" | "kbd" | "p" | "span") | undefined;
17
+ color?: "currentColor" | "inherit" | "transparent" | "indigo10" | "indigo11" | "green3" | "green4" | "green9" | "green10" | "green11" | "amber3" | "amber4" | "amber9" | "amber10" | "amber11" | "tomato1" | "tomato3" | "tomato7" | "tomato10" | "tomato11" | "purple1" | "purple2" | "purple3" | "purple4" | "purple5" | "purple6" | "purple7" | "purple8" | "purple9" | "purple10" | "purple11" | "purple12" | "purpleAlpha1" | "grey1" | "grey2" | "grey3" | "grey4" | "grey5" | "grey6" | "grey7" | "grey8" | "grey9" | "grey10" | "grey11" | "grey12" | "dark2" | "dark6" | "dark7" | "dark12" | undefined;
18
+ component?: ("code" | "pre" | "h1" | "h2" | "h3" | "h4" | "kbd" | "p" | "span") | undefined;
19
19
  inField?: boolean | undefined;
20
20
  noWrap?: boolean | undefined;
21
21
  variant?: "inherit" | "normal" | "small" | "bold" | "h1" | "h2" | "h3" | "h4" | "smallBold" | "extraSmall" | "emphasized" | undefined;
package/dist/components/Toast/Toast.stories.d.ts CHANGED
@@ -4,7 +4,7 @@ declare const _default: ComponentMeta<({ anchor, open, onOpenChange, icon, title
4
4
  anchor: React.ReactNode;
5
5
  open: boolean;
6
6
  onOpenChange: (open: boolean) => void;
7
- icon: "add" | "search" | "link" | "alert" | "arrowBack" | "arrowDownward" | "arrowDropDown" | "arrowDropDownCircle" | "arrowForward" | "arrowUpward" | "calendarToday" | "centerFocusWeak" | "check" | "close" | "cloud" | "cloudUpload" | "colorLens" | "contentCopy" | "crop" | "cropLandscape" | "cropPortrait" | "dataObject" | "dateRange" | "delete" | "description" | "desktopWindows" | "dragIndicator" | "edit" | "event" | "folder" | "formatBold" | "formatClear" | "formatItalic" | "formatListBulleted" | "formatListNumbered" | "formatTextDirectionRToL" | "imageSearch" | "keyboardArrowDown" | "keyboardArrowUp" | "linkOff" | "looks1" | "looks2" | "looks3" | "looks4" | "looks5" | "looks6" | "moreVert" | "notes" | "phoneIphone" | "photo" | "pin" | "public" | "schedule" | "tabletMac" | "textFields" | "toggleOff" | "unfoldMore" | "viewDay" | "zoomOutMap";
7
+ icon: "visibility" | "add" | "alert" | "arrowBack" | "arrowDownward" | "arrowDropDown" | "arrowDropDownCircle" | "arrowForward" | "arrowUpward" | "calendarToday" | "centerFocusWeak" | "check" | "close" | "cloud" | "cloudUpload" | "colorLens" | "contentCopy" | "crop" | "cropLandscape" | "cropPortrait" | "dataObject" | "dateRange" | "delete" | "description" | "desktopWindows" | "dragIndicator" | "edit" | "event" | "folder" | "formatBold" | "formatClear" | "formatItalic" | "formatListBulleted" | "formatListNumbered" | "formatTextDirectionRToL" | "imageSearch" | "keyboardArrowDown" | "keyboardArrowUp" | "link" | "linkOff" | "looks1" | "looks2" | "looks3" | "looks4" | "looks5" | "looks6" | "moreVert" | "notes" | "phoneIphone" | "photo" | "pin" | "public" | "schedule" | "search" | "tabletMac" | "tag" | "textFields" | "toggleOff" | "unfoldMore" | "unsplash" | "viewDay" | "zoomOutMap";
8
8
  title: string;
9
9
  seconds: number;
10
10
  action?: {
@@ -17,7 +17,7 @@ export declare const Default: ComponentStoryFn<({ anchor, open, onOpenChange, ic
17
17
  anchor: React.ReactNode;
18
18
  open: boolean;
19
19
  onOpenChange: (open: boolean) => void;
20
- icon: "add" | "search" | "link" | "alert" | "arrowBack" | "arrowDownward" | "arrowDropDown" | "arrowDropDownCircle" | "arrowForward" | "arrowUpward" | "calendarToday" | "centerFocusWeak" | "check" | "close" | "cloud" | "cloudUpload" | "colorLens" | "contentCopy" | "crop" | "cropLandscape" | "cropPortrait" | "dataObject" | "dateRange" | "delete" | "description" | "desktopWindows" | "dragIndicator" | "edit" | "event" | "folder" | "formatBold" | "formatClear" | "formatItalic" | "formatListBulleted" | "formatListNumbered" | "formatTextDirectionRToL" | "imageSearch" | "keyboardArrowDown" | "keyboardArrowUp" | "linkOff" | "looks1" | "looks2" | "looks3" | "looks4" | "looks5" | "looks6" | "moreVert" | "notes" | "phoneIphone" | "photo" | "pin" | "public" | "schedule" | "tabletMac" | "textFields" | "toggleOff" | "unfoldMore" | "viewDay" | "zoomOutMap";
20
+ icon: "visibility" | "add" | "alert" | "arrowBack" | "arrowDownward" | "arrowDropDown" | "arrowDropDownCircle" | "arrowForward" | "arrowUpward" | "calendarToday" | "centerFocusWeak" | "check" | "close" | "cloud" | "cloudUpload" | "colorLens" | "contentCopy" | "crop" | "cropLandscape" | "cropPortrait" | "dataObject" | "dateRange" | "delete" | "description" | "desktopWindows" | "dragIndicator" | "edit" | "event" | "folder" | "formatBold" | "formatClear" | "formatItalic" | "formatListBulleted" | "formatListNumbered" | "formatTextDirectionRToL" | "imageSearch" | "keyboardArrowDown" | "keyboardArrowUp" | "link" | "linkOff" | "looks1" | "looks2" | "looks3" | "looks4" | "looks5" | "looks6" | "moreVert" | "notes" | "phoneIphone" | "photo" | "pin" | "public" | "schedule" | "search" | "tabletMac" | "tag" | "textFields" | "toggleOff" | "unfoldMore" | "unsplash" | "viewDay" | "zoomOutMap";
21
21
  title: string;
22
22
  seconds: number;
23
23
  action?: {
package/dist/components/Toolbar/Toolbar.stories.d.ts CHANGED
@@ -1,4 +1,4 @@
1
1
  import type { ComponentMeta, ComponentStoryFn } from "@storybook/react";
2
- declare const _default: ComponentMeta<import("react").FC<Readonly<Pick<import("@radix-ui/react-toolbar").ToolbarProps, "className" | "children">>>>;
2
+ declare const _default: ComponentMeta<import("react").FC<Readonly<Pick<import("@radix-ui/react-toolbar").ToolbarProps, "children" | "className">>>>;
3
3
  export default _default;
4
- export declare const Default: ComponentStoryFn<import("react").FC<Readonly<Pick<import("@radix-ui/react-toolbar").ToolbarProps, "className" | "children">>>>;
4
+ export declare const Default: ComponentStoryFn<import("react").FC<Readonly<Pick<import("@radix-ui/react-toolbar").ToolbarProps, "children" | "className">>>>;
package/dist/index.d.ts CHANGED
@@ -53,6 +53,7 @@ export { ToggleButtonGroup, ToggleButtonGroupItem } from "./components/ToggleBut
53
53
  export { Toolbar, ToolbarButton, ToolbarButtonGroup, ToolbarSelect, ToolbarSelectItem, ToolbarSeparator, ToolbarToggleButton, ToolbarToggleButtonGroup, ToolbarToggleButtonGroupItem } from "./components/Toolbar";
54
54
  export { default as dialogErrorImage } from "./images/dialogError.svg";
55
55
  export { colors } from "./theme/colors";
56
+ export { mode } from "./theme/mode.css";
56
57
  export { selectors } from "./theme/selectors";
57
58
  export { sprinkles } from "./theme/sprinkles.css";
58
59
  export { tokens, vars } from "./theme/vars.css";