@jordan-mace/chaser-design-system 1.2.6 → 1.2.8

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 (119) hide show
  1. package/dist/components/Accordion/Accordion.d.ts +5 -6
  2. package/dist/components/Accordion/Accordion.js +4 -4
  3. package/dist/components/Alert/Alert.d.ts +2 -1
  4. package/dist/components/Avatar/Avatar.d.ts +2 -2
  5. package/dist/components/Avatar/Avatar.js +1 -1
  6. package/dist/components/Badge/Badge.d.ts +3 -2
  7. package/dist/components/Breadcrumb/Breadcrumb.d.ts +4 -3
  8. package/dist/components/Breadcrumb/Breadcrumb.js +1 -1
  9. package/dist/components/Button/Button.d.ts +2 -1
  10. package/dist/components/Card/Card.d.ts +2 -1
  11. package/dist/components/Checkbox/Checkbox.d.ts +145 -0
  12. package/dist/components/Checkbox/Checkbox.js +1 -1
  13. package/dist/components/Collapse/Collapse.d.ts +3 -3
  14. package/dist/components/Combobox/Combobox.d.ts +3 -2
  15. package/dist/components/Combobox/Combobox.js +15 -8
  16. package/dist/components/Container/Container.d.ts +155 -3
  17. package/dist/components/Divider/Divider.d.ts +3 -2
  18. package/dist/components/Divider/Divider.js +3 -1
  19. package/dist/components/Drawer/Drawer.d.ts +4 -2
  20. package/dist/components/Drawer/Drawer.js +1 -1
  21. package/dist/components/DropdownMenu/DropdownMenu.d.ts +3 -2
  22. package/dist/components/DropdownMenu/DropdownMenu.js +6 -3
  23. package/dist/components/EmptyState/EmptyState.d.ts +3 -3
  24. package/dist/components/EmptyState/EmptyState.js +1 -1
  25. package/dist/components/FileUpload/FileUpload.d.ts +3 -2
  26. package/dist/components/FileUpload/FileUpload.js +8 -4
  27. package/dist/components/Form/Form.d.ts +2 -2
  28. package/dist/components/Grid/Grid.d.ts +154 -5
  29. package/dist/components/Grid/Grid.js +4 -4
  30. package/dist/components/Icon/Icon.d.ts +2 -2
  31. package/dist/components/Input/Input.d.ts +2 -1
  32. package/dist/components/Kbd/Kbd.d.ts +3 -3
  33. package/dist/components/List/List.d.ts +3 -2
  34. package/dist/components/List/List.js +2 -2
  35. package/dist/components/List/ListItem.d.ts +3 -2
  36. package/dist/components/List/ListItem.js +2 -2
  37. package/dist/components/Modal/Modal.d.ts +4 -2
  38. package/dist/components/Modal/Modal.js +1 -1
  39. package/dist/components/Navbar/Navbar.d.ts +2 -1
  40. package/dist/components/Navbar/NavbarItem.d.ts +2 -1
  41. package/dist/components/NumberInput/NumberInput.d.ts +3 -2
  42. package/dist/components/Pagination/Pagination.d.ts +4 -2
  43. package/dist/components/Pagination/Pagination.js +6 -3
  44. package/dist/components/Popover/Popover.d.ts +3 -2
  45. package/dist/components/Popover/Popover.js +2 -1
  46. package/dist/components/Progress/Progress.d.ts +3 -2
  47. package/dist/components/Radio/Radio.d.ts +145 -0
  48. package/dist/components/Radio/Radio.js +1 -1
  49. package/dist/components/ScrollArea/ScrollArea.d.ts +3 -3
  50. package/dist/components/Select/Select.d.ts +145 -0
  51. package/dist/components/Separator/Separator.d.ts +4 -3
  52. package/dist/components/Separator/Separator.js +1 -1
  53. package/dist/components/Skeleton/Skeleton.d.ts +3 -2
  54. package/dist/components/Spinner/Spinner.d.ts +3 -2
  55. package/dist/components/Spinner/Spinner.js +1 -1
  56. package/dist/components/Stack/Stack.d.ts +156 -5
  57. package/dist/components/Stepper/Stepper.d.ts +3 -2
  58. package/dist/components/Table/Table.d.ts +3 -4
  59. package/dist/components/Table/Table.js +6 -6
  60. package/dist/components/Tabs/Tabs.d.ts +3 -3
  61. package/dist/components/Tabs/Tabs.js +2 -2
  62. package/dist/components/Tag/Tag.d.ts +2 -2
  63. package/dist/components/Text/Header.d.ts +2 -2
  64. package/dist/components/Text/P.d.ts +2 -2
  65. package/dist/components/TextArea/TextArea.d.ts +2 -1
  66. package/dist/components/Toggle/Toggle.d.ts +3 -2
  67. package/dist/components/Toggle/Toggle.js +1 -1
  68. package/dist/components/Tooltip/Tooltip.d.ts +3 -2
  69. package/dist/components/VisuallyHidden/VisuallyHidden.d.ts +4 -4
  70. package/dist/components/VisuallyHidden/VisuallyHidden.js +1 -1
  71. package/package.json +1 -1
  72. package/src/components/Accordion/Accordion.tsx +21 -16
  73. package/src/components/Alert/Alert.tsx +11 -7
  74. package/src/components/Avatar/Avatar.tsx +16 -14
  75. package/src/components/Badge/Badge.tsx +8 -6
  76. package/src/components/Breadcrumb/Breadcrumb.tsx +7 -10
  77. package/src/components/Button/Button.tsx +9 -11
  78. package/src/components/Card/Card.tsx +8 -10
  79. package/src/components/Checkbox/Checkbox.tsx +11 -8
  80. package/src/components/Collapse/Collapse.tsx +12 -9
  81. package/src/components/Combobox/Combobox.tsx +60 -31
  82. package/src/components/Container/Container.tsx +4 -3
  83. package/src/components/Divider/Divider.tsx +9 -5
  84. package/src/components/Drawer/Drawer.tsx +20 -13
  85. package/src/components/DropdownMenu/DropdownMenu.tsx +37 -15
  86. package/src/components/EmptyState/EmptyState.tsx +9 -12
  87. package/src/components/FileUpload/FileUpload.tsx +61 -45
  88. package/src/components/Form/Form.tsx +6 -8
  89. package/src/components/Grid/Grid.tsx +18 -13
  90. package/src/components/Icon/Icon.tsx +7 -6
  91. package/src/components/Input/Input.tsx +7 -8
  92. package/src/components/Kbd/Kbd.tsx +5 -4
  93. package/src/components/List/List.tsx +6 -2
  94. package/src/components/List/ListItem.tsx +6 -2
  95. package/src/components/Modal/Modal.tsx +16 -5
  96. package/src/components/Navbar/Navbar.tsx +2 -1
  97. package/src/components/Navbar/NavbarItem.tsx +2 -1
  98. package/src/components/NumberInput/NumberInput.tsx +29 -22
  99. package/src/components/Pagination/Pagination.tsx +39 -28
  100. package/src/components/Popover/Popover.tsx +37 -21
  101. package/src/components/Progress/Progress.tsx +39 -38
  102. package/src/components/Radio/Radio.tsx +12 -6
  103. package/src/components/ScrollArea/ScrollArea.tsx +9 -10
  104. package/src/components/Select/Select.tsx +12 -7
  105. package/src/components/Separator/Separator.tsx +8 -14
  106. package/src/components/Skeleton/Skeleton.tsx +11 -13
  107. package/src/components/Spinner/Spinner.tsx +15 -11
  108. package/src/components/Stack/Stack.tsx +34 -15
  109. package/src/components/Stepper/Stepper.tsx +19 -17
  110. package/src/components/Table/Table.tsx +31 -21
  111. package/src/components/Tabs/Tabs.tsx +14 -10
  112. package/src/components/Tag/Tag.tsx +8 -7
  113. package/src/components/Text/Header.tsx +6 -5
  114. package/src/components/Text/P.tsx +5 -4
  115. package/src/components/TextArea/TextArea.tsx +7 -8
  116. package/src/components/Toggle/Toggle.tsx +16 -7
  117. package/src/components/Tooltip/Tooltip.tsx +16 -11
  118. package/src/components/VisuallyHidden/VisuallyHidden.tsx +7 -8
  119. package/src/styles/reset.css.ts +41 -27
package/dist/components/Container/Container.d.ts CHANGED
@@ -1,11 +1,163 @@
1
1
  import React from 'react';
2
+ import { Sprinkles } from '../../styles/sprinkles.css';
2
3
  export type ContainerSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';
3
- export interface ContainerProps {
4
+ export type ContainerProps = Sprinkles & {
4
5
  size?: ContainerSize;
5
6
  centerContent?: boolean;
6
7
  children?: React.ReactNode;
7
8
  className?: string;
8
9
  style?: React.CSSProperties;
9
- }
10
- declare const Container: React.ForwardRefExoticComponent<ContainerProps & React.RefAttributes<HTMLElement>>;
10
+ };
11
+ declare const Container: React.ForwardRefExoticComponent<{
12
+ display?: ("flex" | "none" | "block" | "inline" | {
13
+ mobile?: "flex" | "none" | "block" | "inline";
14
+ tablet?: "flex" | "none" | "block" | "inline";
15
+ desktop?: "flex" | "none" | "block" | "inline";
16
+ }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "flex" | "none" | "block" | "inline">;
17
+ width?: ("auto" | "100%" | "50%" | "25%" | {
18
+ mobile?: "auto" | "100%" | "50%" | "25%";
19
+ tablet?: "auto" | "100%" | "50%" | "25%";
20
+ desktop?: "auto" | "100%" | "50%" | "25%";
21
+ }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "100%" | "50%" | "25%">;
22
+ height?: ("auto" | "100%" | "50%" | "25%" | {
23
+ mobile?: "auto" | "100%" | "50%" | "25%";
24
+ tablet?: "auto" | "100%" | "50%" | "25%";
25
+ desktop?: "auto" | "100%" | "50%" | "25%";
26
+ }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "100%" | "50%" | "25%">;
27
+ flexDirection?: ("column" | "row" | {
28
+ mobile?: "column" | "row";
29
+ tablet?: "column" | "row";
30
+ desktop?: "column" | "row";
31
+ }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "column" | "row">;
32
+ justifyContent?: ("space-around" | "space-between" | "stretch" | "center" | "flex-end" | "flex-start" | {
33
+ mobile?: "space-around" | "space-between" | "stretch" | "center" | "flex-end" | "flex-start";
34
+ tablet?: "space-around" | "space-between" | "stretch" | "center" | "flex-end" | "flex-start";
35
+ desktop?: "space-around" | "space-between" | "stretch" | "center" | "flex-end" | "flex-start";
36
+ }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "space-around" | "space-between" | "stretch" | "center" | "flex-end" | "flex-start">;
37
+ alignItems?: ("stretch" | "center" | "flex-end" | "flex-start" | {
38
+ mobile?: "stretch" | "center" | "flex-end" | "flex-start";
39
+ tablet?: "stretch" | "center" | "flex-end" | "flex-start";
40
+ desktop?: "stretch" | "center" | "flex-end" | "flex-start";
41
+ }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "stretch" | "center" | "flex-end" | "flex-start">;
42
+ paddingTop?: ("auto" | "medium" | "none" | "large" | "small" | {
43
+ mobile?: "auto" | "medium" | "none" | "large" | "small";
44
+ tablet?: "auto" | "medium" | "none" | "large" | "small";
45
+ desktop?: "auto" | "medium" | "none" | "large" | "small";
46
+ }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
47
+ paddingBottom?: ("auto" | "medium" | "none" | "large" | "small" | {
48
+ mobile?: "auto" | "medium" | "none" | "large" | "small";
49
+ tablet?: "auto" | "medium" | "none" | "large" | "small";
50
+ desktop?: "auto" | "medium" | "none" | "large" | "small";
51
+ }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
52
+ paddingLeft?: ("auto" | "medium" | "none" | "large" | "small" | {
53
+ mobile?: "auto" | "medium" | "none" | "large" | "small";
54
+ tablet?: "auto" | "medium" | "none" | "large" | "small";
55
+ desktop?: "auto" | "medium" | "none" | "large" | "small";
56
+ }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
57
+ paddingRight?: ("auto" | "medium" | "none" | "large" | "small" | {
58
+ mobile?: "auto" | "medium" | "none" | "large" | "small";
59
+ tablet?: "auto" | "medium" | "none" | "large" | "small";
60
+ desktop?: "auto" | "medium" | "none" | "large" | "small";
61
+ }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
62
+ marginLeft?: ("auto" | "medium" | "none" | "large" | "small" | {
63
+ mobile?: "auto" | "medium" | "none" | "large" | "small";
64
+ tablet?: "auto" | "medium" | "none" | "large" | "small";
65
+ desktop?: "auto" | "medium" | "none" | "large" | "small";
66
+ }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
67
+ marginRight?: ("auto" | "medium" | "none" | "large" | "small" | {
68
+ mobile?: "auto" | "medium" | "none" | "large" | "small";
69
+ tablet?: "auto" | "medium" | "none" | "large" | "small";
70
+ desktop?: "auto" | "medium" | "none" | "large" | "small";
71
+ }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
72
+ marginTop?: ("auto" | "medium" | "none" | "large" | "small" | {
73
+ mobile?: "auto" | "medium" | "none" | "large" | "small";
74
+ tablet?: "auto" | "medium" | "none" | "large" | "small";
75
+ desktop?: "auto" | "medium" | "none" | "large" | "small";
76
+ }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
77
+ marginBottom?: ("auto" | "medium" | "none" | "large" | "small" | {
78
+ mobile?: "auto" | "medium" | "none" | "large" | "small";
79
+ tablet?: "auto" | "medium" | "none" | "large" | "small";
80
+ desktop?: "auto" | "medium" | "none" | "large" | "small";
81
+ }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
82
+ borderLeft?: ("auto" | "medium" | "none" | "large" | "small" | {
83
+ mobile?: "auto" | "medium" | "none" | "large" | "small";
84
+ tablet?: "auto" | "medium" | "none" | "large" | "small";
85
+ desktop?: "auto" | "medium" | "none" | "large" | "small";
86
+ }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
87
+ borderRight?: ("auto" | "medium" | "none" | "large" | "small" | {
88
+ mobile?: "auto" | "medium" | "none" | "large" | "small";
89
+ tablet?: "auto" | "medium" | "none" | "large" | "small";
90
+ desktop?: "auto" | "medium" | "none" | "large" | "small";
91
+ }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
92
+ borderTop?: ("auto" | "medium" | "none" | "large" | "small" | {
93
+ mobile?: "auto" | "medium" | "none" | "large" | "small";
94
+ tablet?: "auto" | "medium" | "none" | "large" | "small";
95
+ desktop?: "auto" | "medium" | "none" | "large" | "small";
96
+ }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
97
+ borderBottom?: ("auto" | "medium" | "none" | "large" | "small" | {
98
+ mobile?: "auto" | "medium" | "none" | "large" | "small";
99
+ tablet?: "auto" | "medium" | "none" | "large" | "small";
100
+ desktop?: "auto" | "medium" | "none" | "large" | "small";
101
+ }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
102
+ borderRadius?: ("auto" | "medium" | "none" | "large" | "small" | {
103
+ mobile?: "auto" | "medium" | "none" | "large" | "small";
104
+ tablet?: "auto" | "medium" | "none" | "large" | "small";
105
+ desktop?: "auto" | "medium" | "none" | "large" | "small";
106
+ }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
107
+ gap?: ("auto" | "medium" | "none" | "large" | "small" | {
108
+ mobile?: "auto" | "medium" | "none" | "large" | "small";
109
+ tablet?: "auto" | "medium" | "none" | "large" | "small";
110
+ desktop?: "auto" | "medium" | "none" | "large" | "small";
111
+ }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
112
+ padding?: ("auto" | "medium" | "none" | "large" | "small" | {
113
+ mobile?: "auto" | "medium" | "none" | "large" | "small";
114
+ tablet?: "auto" | "medium" | "none" | "large" | "small";
115
+ desktop?: "auto" | "medium" | "none" | "large" | "small";
116
+ }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
117
+ border?: ("auto" | "medium" | "none" | "large" | "small" | {
118
+ mobile?: "auto" | "medium" | "none" | "large" | "small";
119
+ tablet?: "auto" | "medium" | "none" | "large" | "small";
120
+ desktop?: "auto" | "medium" | "none" | "large" | "small";
121
+ }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
122
+ paddingX?: ("auto" | "medium" | "none" | "large" | "small" | {
123
+ mobile?: "auto" | "medium" | "none" | "large" | "small";
124
+ tablet?: "auto" | "medium" | "none" | "large" | "small";
125
+ desktop?: "auto" | "medium" | "none" | "large" | "small";
126
+ }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
127
+ paddingY?: ("auto" | "medium" | "none" | "large" | "small" | {
128
+ mobile?: "auto" | "medium" | "none" | "large" | "small";
129
+ tablet?: "auto" | "medium" | "none" | "large" | "small";
130
+ desktop?: "auto" | "medium" | "none" | "large" | "small";
131
+ }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
132
+ marginX?: ("auto" | "medium" | "none" | "large" | "small" | {
133
+ mobile?: "auto" | "medium" | "none" | "large" | "small";
134
+ tablet?: "auto" | "medium" | "none" | "large" | "small";
135
+ desktop?: "auto" | "medium" | "none" | "large" | "small";
136
+ }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
137
+ marginY?: ("auto" | "medium" | "none" | "large" | "small" | {
138
+ mobile?: "auto" | "medium" | "none" | "large" | "small";
139
+ tablet?: "auto" | "medium" | "none" | "large" | "small";
140
+ desktop?: "auto" | "medium" | "none" | "large" | "small";
141
+ }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
142
+ placeItems?: import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "stretch" | "center" | "flex-end" | "flex-start"> | ("stretch" | "center" | "flex-end" | "flex-start" | {
143
+ mobile?: "stretch" | "center" | "flex-end" | "flex-start";
144
+ tablet?: "stretch" | "center" | "flex-end" | "flex-start";
145
+ desktop?: "stretch" | "center" | "flex-end" | "flex-start";
146
+ });
147
+ } & {
148
+ color?: "c1-50" | "c1-100" | "c1-150" | "c1-200" | "c1-250" | "c1-300" | "c1-350" | "c1-400" | "c1-450" | "c1-500" | "c1-550" | "c1-600" | "c1-650" | "c1-700" | "c1-750" | "c1-800" | "c1-850" | "c1-900" | "c2-50" | "c2-100" | "c2-150" | "c2-200" | "c2-250" | "c2-300" | "c2-350" | "c2-400" | "c2-450" | "c2-500" | "c2-550" | "c2-600" | "c2-650" | "c2-700" | "c2-750" | "c2-800" | "c2-850" | "c2-900" | "c3-50" | "c3-100" | "c3-150" | "c3-200" | "c3-250" | "c3-300" | "c3-350" | "c3-400" | "c3-450" | "c3-500" | "c3-550" | "c3-600" | "c3-650" | "c3-700" | "c3-750" | "c3-800" | "c3-850" | "c3-900" | "c4-50" | "c4-100" | "c4-150" | "c4-200" | "c4-250" | "c4-300" | "c4-350" | "c4-400" | "c4-450" | "c4-500" | "c4-550" | "c4-600" | "c4-650" | "c4-700" | "c4-750" | "c4-800" | "c4-850" | "c4-900" | "c5-50" | "c5-100" | "c5-150" | "c5-200" | "c5-250" | "c5-300" | "c5-350" | "c5-400" | "c5-450" | "c5-500" | "c5-550" | "c5-600" | "c5-650" | "c5-700" | "c5-750" | "c5-800" | "c5-850" | "c5-900" | {
149
+ lightMode?: "c1-50" | "c1-100" | "c1-150" | "c1-200" | "c1-250" | "c1-300" | "c1-350" | "c1-400" | "c1-450" | "c1-500" | "c1-550" | "c1-600" | "c1-650" | "c1-700" | "c1-750" | "c1-800" | "c1-850" | "c1-900" | "c2-50" | "c2-100" | "c2-150" | "c2-200" | "c2-250" | "c2-300" | "c2-350" | "c2-400" | "c2-450" | "c2-500" | "c2-550" | "c2-600" | "c2-650" | "c2-700" | "c2-750" | "c2-800" | "c2-850" | "c2-900" | "c3-50" | "c3-100" | "c3-150" | "c3-200" | "c3-250" | "c3-300" | "c3-350" | "c3-400" | "c3-450" | "c3-500" | "c3-550" | "c3-600" | "c3-650" | "c3-700" | "c3-750" | "c3-800" | "c3-850" | "c3-900" | "c4-50" | "c4-100" | "c4-150" | "c4-200" | "c4-250" | "c4-300" | "c4-350" | "c4-400" | "c4-450" | "c4-500" | "c4-550" | "c4-600" | "c4-650" | "c4-700" | "c4-750" | "c4-800" | "c4-850" | "c4-900" | "c5-50" | "c5-100" | "c5-150" | "c5-200" | "c5-250" | "c5-300" | "c5-350" | "c5-400" | "c5-450" | "c5-500" | "c5-550" | "c5-600" | "c5-650" | "c5-700" | "c5-750" | "c5-800" | "c5-850" | "c5-900";
150
+ darkMode?: "c1-50" | "c1-100" | "c1-150" | "c1-200" | "c1-250" | "c1-300" | "c1-350" | "c1-400" | "c1-450" | "c1-500" | "c1-550" | "c1-600" | "c1-650" | "c1-700" | "c1-750" | "c1-800" | "c1-850" | "c1-900" | "c2-50" | "c2-100" | "c2-150" | "c2-200" | "c2-250" | "c2-300" | "c2-350" | "c2-400" | "c2-450" | "c2-500" | "c2-550" | "c2-600" | "c2-650" | "c2-700" | "c2-750" | "c2-800" | "c2-850" | "c2-900" | "c3-50" | "c3-100" | "c3-150" | "c3-200" | "c3-250" | "c3-300" | "c3-350" | "c3-400" | "c3-450" | "c3-500" | "c3-550" | "c3-600" | "c3-650" | "c3-700" | "c3-750" | "c3-800" | "c3-850" | "c3-900" | "c4-50" | "c4-100" | "c4-150" | "c4-200" | "c4-250" | "c4-300" | "c4-350" | "c4-400" | "c4-450" | "c4-500" | "c4-550" | "c4-600" | "c4-650" | "c4-700" | "c4-750" | "c4-800" | "c4-850" | "c4-900" | "c5-50" | "c5-100" | "c5-150" | "c5-200" | "c5-250" | "c5-300" | "c5-350" | "c5-400" | "c5-450" | "c5-500" | "c5-550" | "c5-600" | "c5-650" | "c5-700" | "c5-750" | "c5-800" | "c5-850" | "c5-900";
151
+ };
152
+ background?: "c1-50" | "c1-100" | "c1-150" | "c1-200" | "c1-250" | "c1-300" | "c1-350" | "c1-400" | "c1-450" | "c1-500" | "c1-550" | "c1-600" | "c1-650" | "c1-700" | "c1-750" | "c1-800" | "c1-850" | "c1-900" | "c2-50" | "c2-100" | "c2-150" | "c2-200" | "c2-250" | "c2-300" | "c2-350" | "c2-400" | "c2-450" | "c2-500" | "c2-550" | "c2-600" | "c2-650" | "c2-700" | "c2-750" | "c2-800" | "c2-850" | "c2-900" | "c3-50" | "c3-100" | "c3-150" | "c3-200" | "c3-250" | "c3-300" | "c3-350" | "c3-400" | "c3-450" | "c3-500" | "c3-550" | "c3-600" | "c3-650" | "c3-700" | "c3-750" | "c3-800" | "c3-850" | "c3-900" | "c4-50" | "c4-100" | "c4-150" | "c4-200" | "c4-250" | "c4-300" | "c4-350" | "c4-400" | "c4-450" | "c4-500" | "c4-550" | "c4-600" | "c4-650" | "c4-700" | "c4-750" | "c4-800" | "c4-850" | "c4-900" | "c5-50" | "c5-100" | "c5-150" | "c5-200" | "c5-250" | "c5-300" | "c5-350" | "c5-400" | "c5-450" | "c5-500" | "c5-550" | "c5-600" | "c5-650" | "c5-700" | "c5-750" | "c5-800" | "c5-850" | "c5-900" | {
153
+ lightMode?: "c1-50" | "c1-100" | "c1-150" | "c1-200" | "c1-250" | "c1-300" | "c1-350" | "c1-400" | "c1-450" | "c1-500" | "c1-550" | "c1-600" | "c1-650" | "c1-700" | "c1-750" | "c1-800" | "c1-850" | "c1-900" | "c2-50" | "c2-100" | "c2-150" | "c2-200" | "c2-250" | "c2-300" | "c2-350" | "c2-400" | "c2-450" | "c2-500" | "c2-550" | "c2-600" | "c2-650" | "c2-700" | "c2-750" | "c2-800" | "c2-850" | "c2-900" | "c3-50" | "c3-100" | "c3-150" | "c3-200" | "c3-250" | "c3-300" | "c3-350" | "c3-400" | "c3-450" | "c3-500" | "c3-550" | "c3-600" | "c3-650" | "c3-700" | "c3-750" | "c3-800" | "c3-850" | "c3-900" | "c4-50" | "c4-100" | "c4-150" | "c4-200" | "c4-250" | "c4-300" | "c4-350" | "c4-400" | "c4-450" | "c4-500" | "c4-550" | "c4-600" | "c4-650" | "c4-700" | "c4-750" | "c4-800" | "c4-850" | "c4-900" | "c5-50" | "c5-100" | "c5-150" | "c5-200" | "c5-250" | "c5-300" | "c5-350" | "c5-400" | "c5-450" | "c5-500" | "c5-550" | "c5-600" | "c5-650" | "c5-700" | "c5-750" | "c5-800" | "c5-850" | "c5-900";
154
+ darkMode?: "c1-50" | "c1-100" | "c1-150" | "c1-200" | "c1-250" | "c1-300" | "c1-350" | "c1-400" | "c1-450" | "c1-500" | "c1-550" | "c1-600" | "c1-650" | "c1-700" | "c1-750" | "c1-800" | "c1-850" | "c1-900" | "c2-50" | "c2-100" | "c2-150" | "c2-200" | "c2-250" | "c2-300" | "c2-350" | "c2-400" | "c2-450" | "c2-500" | "c2-550" | "c2-600" | "c2-650" | "c2-700" | "c2-750" | "c2-800" | "c2-850" | "c2-900" | "c3-50" | "c3-100" | "c3-150" | "c3-200" | "c3-250" | "c3-300" | "c3-350" | "c3-400" | "c3-450" | "c3-500" | "c3-550" | "c3-600" | "c3-650" | "c3-700" | "c3-750" | "c3-800" | "c3-850" | "c3-900" | "c4-50" | "c4-100" | "c4-150" | "c4-200" | "c4-250" | "c4-300" | "c4-350" | "c4-400" | "c4-450" | "c4-500" | "c4-550" | "c4-600" | "c4-650" | "c4-700" | "c4-750" | "c4-800" | "c4-850" | "c4-900" | "c5-50" | "c5-100" | "c5-150" | "c5-200" | "c5-250" | "c5-300" | "c5-350" | "c5-400" | "c5-450" | "c5-500" | "c5-550" | "c5-600" | "c5-650" | "c5-700" | "c5-750" | "c5-800" | "c5-850" | "c5-900";
155
+ };
156
+ } & {
157
+ size?: ContainerSize;
158
+ centerContent?: boolean;
159
+ children?: React.ReactNode;
160
+ className?: string;
161
+ style?: React.CSSProperties;
162
+ } & React.RefAttributes<HTMLElement>>;
11
163
  export default Container;
package/dist/components/Divider/Divider.d.ts CHANGED
@@ -1,9 +1,10 @@
1
1
  import React from 'react';
2
+ import { Sprinkles } from '../../styles/sprinkles.css';
2
3
  export type DividerOrientation = 'horizontal' | 'vertical';
3
4
  export type DividerSize = 'small' | 'medium' | 'large';
4
- export interface DividerProps extends React.HTMLAttributes<HTMLHRElement> {
5
+ export type DividerProps = React.HTMLAttributes<HTMLHRElement> & Sprinkles & {
5
6
  orientation?: DividerOrientation;
6
7
  size?: DividerSize;
7
- }
8
+ };
8
9
  declare const Divider: ({ orientation, size, ...props }: DividerProps) => import("react/jsx-runtime").JSX.Element;
9
10
  export default Divider;
package/dist/components/Divider/Divider.js CHANGED
@@ -3,6 +3,8 @@ import clsx from 'clsx';
3
3
  import { divider, dividerOrientations, dividerSizes, dividerVerticalSizes, } from './styles.css';
4
4
  import Box from '../Box';
5
5
  const Divider = ({ orientation = 'horizontal', size = 'medium', ...props }) => {
6
- return (_jsx(Box, { as: "hr", className: clsx(divider, dividerOrientations[orientation], orientation === 'vertical' ? dividerVerticalSizes[size] : dividerSizes[size], props.className), role: "separator", "aria-orientation": orientation, ...props }));
6
+ return (_jsx(Box, { as: "hr", className: clsx(divider, dividerOrientations[orientation], orientation === 'vertical'
7
+ ? dividerVerticalSizes[size]
8
+ : dividerSizes[size], props.className), role: "separator", "aria-orientation": orientation, ...props }));
7
9
  };
8
10
  export default Divider;
package/dist/components/Drawer/Drawer.d.ts CHANGED
@@ -1,7 +1,8 @@
1
1
  import React from 'react';
2
+ import { Sprinkles } from '../../styles/sprinkles.css';
2
3
  export type DrawerPosition = 'left' | 'right' | 'top' | 'bottom';
3
4
  export type DrawerSize = 'small' | 'medium' | 'large' | 'full';
4
- export interface DrawerProps extends React.HTMLAttributes<HTMLDivElement> {
5
+ type DrawerPropsBase = React.HTMLAttributes<HTMLDivElement> & {
5
6
  isOpen: boolean;
6
7
  onClose: () => void;
7
8
  title?: string;
@@ -11,6 +12,7 @@ export interface DrawerProps extends React.HTMLAttributes<HTMLDivElement> {
11
12
  footer?: React.ReactNode;
12
13
  showCloseButton?: boolean;
13
14
  closeOnOverlayClick?: boolean;
14
- }
15
+ };
16
+ export type DrawerProps = DrawerPropsBase & Sprinkles;
15
17
  declare const Drawer: ({ isOpen, onClose, title, position, size, children, footer, showCloseButton, closeOnOverlayClick, className, ...props }: DrawerProps) => import("react/jsx-runtime").JSX.Element;
16
18
  export default Drawer;
package/dist/components/Drawer/Drawer.js CHANGED
@@ -60,6 +60,6 @@ const Drawer = ({ isOpen, onClose, title, position = 'right', size = 'medium', c
60
60
  ? sizeMap[position][size]
61
61
  : undefined,
62
62
  };
63
- return (_jsxs(_Fragment, { children: [_jsx(Box, { className: drawerOverlay, onClick: closeOnOverlayClick ? onClose : undefined, "aria-hidden": "true" }), _jsxs(Box, { as: "div", role: "dialog", "aria-modal": "true", className: clsx(drawer, drawerPositionVariants[position], className), style: dimensionStyle, ...props, children: [title && (_jsxs(Box, { as: "div", className: drawerHeader, children: [_jsx(Box, { as: "h2", className: drawerTitle, children: title }), showCloseButton && (_jsx(Box, { as: "button", className: drawerCloseButton, onClick: onClose, "aria-label": "Close drawer", type: "button", children: "\u00D7" }))] })), _jsx(Box, { as: "div", className: drawerBody, children: children }), footer && _jsx(Box, { as: "div", className: drawerFooter, children: footer })] })] }));
63
+ return (_jsxs(_Fragment, { children: [_jsx(Box, { className: drawerOverlay, onClick: closeOnOverlayClick ? onClose : undefined, "aria-hidden": "true" }), _jsxs(Box, { as: "div", role: "dialog", "aria-modal": "true", className: clsx(drawer, drawerPositionVariants[position], className), style: dimensionStyle, ...props, children: [title && (_jsxs(Box, { as: "div", className: drawerHeader, children: [_jsx(Box, { as: "h2", className: drawerTitle, children: title }), showCloseButton && (_jsx(Box, { as: "button", className: drawerCloseButton, onClick: onClose, "aria-label": "Close drawer", type: "button", children: "\u00D7" }))] })), _jsx(Box, { as: "div", className: drawerBody, children: children }), footer && (_jsx(Box, { as: "div", className: drawerFooter, children: footer }))] })] }));
64
64
  };
65
65
  export default Drawer;
package/dist/components/DropdownMenu/DropdownMenu.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import React from 'react';
2
+ import { Sprinkles } from '../../styles/sprinkles.css';
2
3
  export type DropdownMenuPosition = 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight';
3
4
  export type DropdownMenuItemVariant = 'default' | 'destructive' | 'disabled';
4
5
  export interface DropdownMenuItemProps {
@@ -12,12 +13,12 @@ export interface DropdownMenuGroupProps {
12
13
  label?: string;
13
14
  items: DropdownMenuItemProps[];
14
15
  }
15
- export interface DropdownMenuProps extends React.HTMLAttributes<HTMLDivElement> {
16
+ export type DropdownMenuProps = React.HTMLAttributes<HTMLDivElement> & Sprinkles & {
16
17
  trigger: React.ReactNode;
17
18
  items?: DropdownMenuItemProps[];
18
19
  groups?: DropdownMenuGroupProps[];
19
20
  position?: DropdownMenuPosition;
20
21
  closeOnItemClick?: boolean;
21
- }
22
+ };
22
23
  declare const DropdownMenu: ({ trigger, items, groups, position, closeOnItemClick, className, ...props }: DropdownMenuProps) => import("react/jsx-runtime").JSX.Element;
23
24
  export default DropdownMenu;
package/dist/components/DropdownMenu/DropdownMenu.js CHANGED
@@ -8,7 +8,8 @@ const DropdownMenu = ({ trigger, items = [], groups = [], position = 'bottomLeft
8
8
  const containerRef = useRef(null);
9
9
  useEffect(() => {
10
10
  const handleClickOutside = (event) => {
11
- if (containerRef.current && !containerRef.current.contains(event.target)) {
11
+ if (containerRef.current &&
12
+ !containerRef.current.contains(event.target)) {
12
13
  setIsOpen(false);
13
14
  }
14
15
  };
@@ -36,8 +37,10 @@ const DropdownMenu = ({ trigger, items = [], groups = [], position = 'bottomLeft
36
37
  setIsOpen(false);
37
38
  }
38
39
  };
39
- const renderItem = (item, index) => (_jsxs(Box, { as: "button", className: clsx(dropdownMenuItem, dropdownMenuItemVariants[item.disabled || item.variant === 'disabled' ? 'disabled' : item.variant || 'default']), onClick: () => handleItemClick(item), disabled: item.disabled || item.variant === 'disabled', role: "menuitem", type: "button", children: [item.icon && _jsx("span", { children: item.icon }), item.label] }, index));
40
+ const renderItem = (item, index) => (_jsxs(Box, { as: "button", className: clsx(dropdownMenuItem, dropdownMenuItemVariants[item.disabled || item.variant === 'disabled'
41
+ ? 'disabled'
42
+ : item.variant || 'default']), onClick: () => handleItemClick(item), disabled: item.disabled || item.variant === 'disabled', role: "menuitem", type: "button", children: [item.icon && _jsx("span", { children: item.icon }), item.label] }, index));
40
43
  const renderGroup = (group, index) => (_jsxs(Box, { className: dropdownMenuGroup, role: "group", children: [group.label && (_jsx(Box, { as: "div", className: dropdownMenuLabel, role: "presentation", children: group.label })), group.items.map((item, itemIndex) => renderItem(item, itemIndex))] }, index));
41
- return (_jsxs(Box, { ref: containerRef, className: clsx(dropdownMenuContainer, className), ...props, children: [_jsx(Box, { className: dropdownMenuTrigger, onClick: () => setIsOpen(!isOpen), "aria-expanded": isOpen, "aria-haspopup": "true", children: trigger }), isOpen && (_jsxs(Box, { className: clsx(dropdownMenuContent, dropdownMenuPositionVariants[position]), role: "menu", "aria-orientation": "vertical", children: [items.length > 0 && (_jsx(Box, { className: dropdownMenuGroup, children: items.map((item, index) => renderItem(item, index)) })), groups.map((group, index) => (_jsxs(React.Fragment, { children: [index > 0 && _jsx(Box, { as: "div", className: dropdownMenuSeparator, role: "separator" }), renderGroup(group, index)] }, index)))] }))] }));
44
+ return (_jsxs(Box, { ref: containerRef, className: clsx(dropdownMenuContainer, className), ...props, children: [_jsx(Box, { className: dropdownMenuTrigger, onClick: () => setIsOpen(!isOpen), "aria-expanded": isOpen, "aria-haspopup": "true", children: trigger }), isOpen && (_jsxs(Box, { className: clsx(dropdownMenuContent, dropdownMenuPositionVariants[position]), role: "menu", "aria-orientation": "vertical", children: [items.length > 0 && (_jsx(Box, { className: dropdownMenuGroup, children: items.map((item, index) => renderItem(item, index)) })), groups.map((group, index) => (_jsxs(React.Fragment, { children: [index > 0 && (_jsx(Box, { as: "div", className: dropdownMenuSeparator, role: "separator" })), renderGroup(group, index)] }, index)))] }))] }));
42
45
  };
43
46
  export default DropdownMenu;
package/dist/components/EmptyState/EmptyState.d.ts CHANGED
@@ -1,10 +1,10 @@
1
1
  import React from 'react';
2
- export interface EmptyStateProps {
2
+ import { Sprinkles } from '../../styles/sprinkles.css';
3
+ export type EmptyStateProps = React.HTMLAttributes<HTMLDivElement> & Sprinkles & {
3
4
  icon?: React.ReactNode;
4
5
  title?: string;
5
6
  description?: string;
6
7
  action?: React.ReactNode;
7
- className?: string;
8
- }
8
+ };
9
9
  declare const EmptyState: ({ icon, title, description, action, className, }: EmptyStateProps) => import("react/jsx-runtime").JSX.Element;
10
10
  export default EmptyState;
package/dist/components/EmptyState/EmptyState.js CHANGED
@@ -3,6 +3,6 @@ import clsx from 'clsx';
3
3
  import { emptyState, emptyStateIcon, emptyStateTitle, emptyStateDescription, emptyStateAction, } from './styles.css';
4
4
  import Box from '../Box';
5
5
  const EmptyState = ({ icon, title, description, action, className, }) => {
6
- return (_jsxs(Box, { className: clsx(emptyState, className), role: "status", children: [icon && (_jsx(Box, { className: emptyStateIcon, "aria-hidden": "true", children: icon })), title && (_jsx(Box, { as: "h3", className: emptyStateTitle, children: title })), description && (_jsx(Box, { as: "p", className: emptyStateDescription, children: description })), action && (_jsx(Box, { className: emptyStateAction, children: action }))] }));
6
+ return (_jsxs(Box, { className: clsx(emptyState, className), role: "status", children: [icon && (_jsx(Box, { className: emptyStateIcon, "aria-hidden": "true", children: icon })), title && (_jsx(Box, { as: "h3", className: emptyStateTitle, children: title })), description && (_jsx(Box, { as: "p", className: emptyStateDescription, children: description })), action && _jsx(Box, { className: emptyStateAction, children: action })] }));
7
7
  };
8
8
  export default EmptyState;
package/dist/components/FileUpload/FileUpload.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import React from 'react';
2
+ import { Sprinkles } from '../../styles/sprinkles.css';
2
3
  export interface FileUploadFile {
3
4
  id: string;
4
5
  file: File;
@@ -8,7 +9,7 @@ export interface FileUploadFile {
8
9
  status: 'uploading' | 'success' | 'error';
9
10
  errorMessage?: string;
10
11
  }
11
- export interface FileUploadProps extends React.HTMLAttributes<HTMLDivElement> {
12
+ export type FileUploadProps = React.HTMLAttributes<HTMLDivElement> & Sprinkles & {
12
13
  label?: string;
13
14
  files?: FileUploadFile[];
14
15
  onFilesChange?: (files: FileUploadFile[]) => void;
@@ -22,6 +23,6 @@ export interface FileUploadProps extends React.HTMLAttributes<HTMLDivElement> {
22
23
  dropzoneText?: string;
23
24
  hint?: string;
24
25
  showProgress?: boolean;
25
- }
26
+ };
26
27
  declare const FileUpload: ({ label, files, onFilesChange, onFileAdd, onFileRemove, accept, multiple, maxFileSize, maxFiles, disabled, dropzoneText, hint, showProgress, className, ...props }: FileUploadProps) => import("react/jsx-runtime").JSX.Element;
27
28
  export default FileUpload;
package/dist/components/FileUpload/FileUpload.js CHANGED
@@ -20,8 +20,8 @@ const FileUpload = ({ label, files = [], onFilesChange, onFileAdd, onFileRemove,
20
20
  return `File size exceeds ${formatFileSize(maxFileSize)}`;
21
21
  }
22
22
  if (accept) {
23
- const acceptedTypes = accept.split(',').map(type => type.trim());
24
- const isAccepted = acceptedTypes.some(type => {
23
+ const acceptedTypes = accept.split(',').map((type) => type.trim());
24
+ const isAccepted = acceptedTypes.some((type) => {
25
25
  if (type.includes('*')) {
26
26
  return file.type.startsWith(type.replace('/*', ''));
27
27
  }
@@ -38,7 +38,7 @@ const FileUpload = ({ label, files = [], onFilesChange, onFileAdd, onFileRemove,
38
38
  return;
39
39
  const newFiles = [];
40
40
  const errors = [];
41
- Array.from(fileList).forEach(file => {
41
+ Array.from(fileList).forEach((file) => {
42
42
  const validationError = validateFile(file);
43
43
  if (validationError) {
44
44
  errors.push(`${file.name}: ${validationError}`);
@@ -97,6 +97,10 @@ const FileUpload = ({ label, files = [], onFilesChange, onFileAdd, onFileRemove,
97
97
  return 'dragOver';
98
98
  return 'default';
99
99
  };
100
- return (_jsxs(Box, { className: clsx(fileUploadContainer, className), ...props, children: [label && (_jsx(Box, { as: "label", className: fileUploadLabel, children: label })), _jsxs(Box, { as: "div", className: clsx(fileUploadDropzone, fileUploadDropzoneVariants[getVariant()]), onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, onClick: handleClick, role: "button", tabIndex: disabled ? -1 : 0, "aria-disabled": disabled, children: [_jsx(Box, { className: fileUploadIcon, "aria-hidden": "true", children: _jsxs("svg", { width: "48", height: "48", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [_jsx("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }), _jsx("polyline", { points: "17,8 12,3 7,8" }), _jsx("line", { x1: "12", y1: "3", x2: "12", y2: "15" })] }) }), _jsx(Box, { as: "p", className: fileUploadText, children: dropzoneText }), hint && (_jsx(Box, { as: "p", className: fileUploadHint, children: hint })), _jsx(Box, { as: "input", ref: inputRef, type: "file", className: fileUploadInput, onChange: handleInputChange, accept: accept, multiple: multiple, disabled: disabled, "aria-label": "File upload input" })] }), error && (_jsx(Box, { as: "p", className: fileUploadError, role: "alert", children: error })), files.length > 0 && (_jsx(Box, { as: "ul", className: fileUploadList, "aria-label": "Uploaded files", children: files.map((file) => (_jsxs(Box, { as: "li", className: fileUploadItem, children: [_jsxs(Box, { className: fileUploadItemInfo, children: [_jsx(Box, { as: "p", className: fileUploadItemName, title: file.name, children: file.name }), _jsxs(Box, { as: "p", className: fileUploadItemSize, children: [formatFileSize(file.size), file.status === 'uploading' && showProgress && ' • Uploading...', file.status === 'success' && ' • Complete', file.status === 'error' && file.errorMessage && ` • ${file.errorMessage}`] }), showProgress && file.status === 'uploading' && (_jsx(Box, { className: fileUploadProgressBar, children: _jsx(Box, { className: clsx(fileUploadProgressFill, fileUploadProgressFillVariants[file.status]), style: { width: `${file.progress}%` } }) }))] }), _jsx(Box, { as: "button", className: fileUploadRemoveButton, onClick: () => handleRemove(file.id), type: "button", "aria-label": `Remove ${file.name}`, children: "\u00D7" })] }, file.id))) }))] }));
100
+ return (_jsxs(Box, { className: clsx(fileUploadContainer, className), ...props, children: [label && (_jsx(Box, { as: "label", className: fileUploadLabel, children: label })), _jsxs(Box, { as: "div", className: clsx(fileUploadDropzone, fileUploadDropzoneVariants[getVariant()]), onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, onClick: handleClick, role: "button", tabIndex: disabled ? -1 : 0, "aria-disabled": disabled, children: [_jsx(Box, { className: fileUploadIcon, "aria-hidden": "true", children: _jsxs("svg", { width: "48", height: "48", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [_jsx("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }), _jsx("polyline", { points: "17,8 12,3 7,8" }), _jsx("line", { x1: "12", y1: "3", x2: "12", y2: "15" })] }) }), _jsx(Box, { as: "p", className: fileUploadText, children: dropzoneText }), hint && (_jsx(Box, { as: "p", className: fileUploadHint, children: hint })), _jsx(Box, { as: "input", ref: inputRef, type: "file", className: fileUploadInput, onChange: handleInputChange, accept: accept, multiple: multiple, disabled: disabled, "aria-label": "File upload input" })] }), error && (_jsx(Box, { as: "p", className: fileUploadError, role: "alert", children: error })), files.length > 0 && (_jsx(Box, { as: "ul", className: fileUploadList, "aria-label": "Uploaded files", children: files.map((file) => (_jsxs(Box, { as: "li", className: fileUploadItem, children: [_jsxs(Box, { className: fileUploadItemInfo, children: [_jsx(Box, { as: "p", className: fileUploadItemName, title: file.name, children: file.name }), _jsxs(Box, { as: "p", className: fileUploadItemSize, children: [formatFileSize(file.size), file.status === 'uploading' &&
101
+ showProgress &&
102
+ ' • Uploading...', file.status === 'success' && ' • Complete', file.status === 'error' &&
103
+ file.errorMessage &&
104
+ ` • ${file.errorMessage}`] }), showProgress && file.status === 'uploading' && (_jsx(Box, { className: fileUploadProgressBar, children: _jsx(Box, { className: clsx(fileUploadProgressFill, fileUploadProgressFillVariants[file.status]), style: { width: `${file.progress}%` } }) }))] }), _jsx(Box, { as: "button", className: fileUploadRemoveButton, onClick: () => handleRemove(file.id), type: "button", "aria-label": `Remove ${file.name}`, children: "\u00D7" })] }, file.id))) }))] }));
101
105
  };
102
106
  export default FileUpload;
package/dist/components/Form/Form.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import React from 'react';
2
- type FormProps = React.FormHTMLAttributes<HTMLFormElement> & {
3
- className?: string;
2
+ import { Sprinkles } from '../../styles/sprinkles.css';
3
+ type FormProps = React.FormHTMLAttributes<HTMLFormElement> & Sprinkles & {
4
4
  children?: React.ReactNode;
5
5
  };
6
6
  declare const Form: (props: FormProps) => import("react/jsx-runtime").JSX.Element;
package/dist/components/Grid/Grid.d.ts CHANGED
@@ -1,13 +1,162 @@
1
1
  import React from 'react';
2
+ import { Sprinkles } from '../../styles/sprinkles.css';
2
3
  export type GridColumns = 1 | 2 | 3 | 4 | 5 | 6 | 12;
3
4
  export type GridGap = 'none' | 'small' | 'medium' | 'large';
4
- export interface GridProps {
5
+ export type GridProps = React.HTMLAttributes<HTMLDivElement> & Sprinkles & {
5
6
  columns?: GridColumns;
6
7
  gap?: GridGap;
7
8
  minChildWidth?: string;
8
9
  children?: React.ReactNode;
9
- className?: string;
10
- style?: React.CSSProperties;
11
- }
12
- declare const Grid: React.ForwardRefExoticComponent<GridProps & React.RefAttributes<HTMLElement>>;
10
+ };
11
+ declare const Grid: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
12
+ display?: ("flex" | "none" | "block" | "inline" | {
13
+ mobile?: "flex" | "none" | "block" | "inline";
14
+ tablet?: "flex" | "none" | "block" | "inline";
15
+ desktop?: "flex" | "none" | "block" | "inline";
16
+ }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "flex" | "none" | "block" | "inline">;
17
+ width?: ("auto" | "100%" | "50%" | "25%" | {
18
+ mobile?: "auto" | "100%" | "50%" | "25%";
19
+ tablet?: "auto" | "100%" | "50%" | "25%";
20
+ desktop?: "auto" | "100%" | "50%" | "25%";
21
+ }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "100%" | "50%" | "25%">;
22
+ height?: ("auto" | "100%" | "50%" | "25%" | {
23
+ mobile?: "auto" | "100%" | "50%" | "25%";
24
+ tablet?: "auto" | "100%" | "50%" | "25%";
25
+ desktop?: "auto" | "100%" | "50%" | "25%";
26
+ }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "100%" | "50%" | "25%">;
27
+ flexDirection?: ("column" | "row" | {
28
+ mobile?: "column" | "row";
29
+ tablet?: "column" | "row";
30
+ desktop?: "column" | "row";
31
+ }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "column" | "row">;
32
+ justifyContent?: ("space-around" | "space-between" | "stretch" | "center" | "flex-end" | "flex-start" | {
33
+ mobile?: "space-around" | "space-between" | "stretch" | "center" | "flex-end" | "flex-start";
34
+ tablet?: "space-around" | "space-between" | "stretch" | "center" | "flex-end" | "flex-start";
35
+ desktop?: "space-around" | "space-between" | "stretch" | "center" | "flex-end" | "flex-start";
36
+ }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "space-around" | "space-between" | "stretch" | "center" | "flex-end" | "flex-start">;
37
+ alignItems?: ("stretch" | "center" | "flex-end" | "flex-start" | {
38
+ mobile?: "stretch" | "center" | "flex-end" | "flex-start";
39
+ tablet?: "stretch" | "center" | "flex-end" | "flex-start";
40
+ desktop?: "stretch" | "center" | "flex-end" | "flex-start";
41
+ }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "stretch" | "center" | "flex-end" | "flex-start">;
42
+ paddingTop?: ("auto" | "medium" | "none" | "large" | "small" | {
43
+ mobile?: "auto" | "medium" | "none" | "large" | "small";
44
+ tablet?: "auto" | "medium" | "none" | "large" | "small";
45
+ desktop?: "auto" | "medium" | "none" | "large" | "small";
46
+ }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
47
+ paddingBottom?: ("auto" | "medium" | "none" | "large" | "small" | {
48
+ mobile?: "auto" | "medium" | "none" | "large" | "small";
49
+ tablet?: "auto" | "medium" | "none" | "large" | "small";
50
+ desktop?: "auto" | "medium" | "none" | "large" | "small";
51
+ }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
52
+ paddingLeft?: ("auto" | "medium" | "none" | "large" | "small" | {
53
+ mobile?: "auto" | "medium" | "none" | "large" | "small";
54
+ tablet?: "auto" | "medium" | "none" | "large" | "small";
55
+ desktop?: "auto" | "medium" | "none" | "large" | "small";
56
+ }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
57
+ paddingRight?: ("auto" | "medium" | "none" | "large" | "small" | {
58
+ mobile?: "auto" | "medium" | "none" | "large" | "small";
59
+ tablet?: "auto" | "medium" | "none" | "large" | "small";
60
+ desktop?: "auto" | "medium" | "none" | "large" | "small";
61
+ }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
62
+ marginLeft?: ("auto" | "medium" | "none" | "large" | "small" | {
63
+ mobile?: "auto" | "medium" | "none" | "large" | "small";
64
+ tablet?: "auto" | "medium" | "none" | "large" | "small";
65
+ desktop?: "auto" | "medium" | "none" | "large" | "small";
66
+ }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
67
+ marginRight?: ("auto" | "medium" | "none" | "large" | "small" | {
68
+ mobile?: "auto" | "medium" | "none" | "large" | "small";
69
+ tablet?: "auto" | "medium" | "none" | "large" | "small";
70
+ desktop?: "auto" | "medium" | "none" | "large" | "small";
71
+ }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
72
+ marginTop?: ("auto" | "medium" | "none" | "large" | "small" | {
73
+ mobile?: "auto" | "medium" | "none" | "large" | "small";
74
+ tablet?: "auto" | "medium" | "none" | "large" | "small";
75
+ desktop?: "auto" | "medium" | "none" | "large" | "small";
76
+ }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
77
+ marginBottom?: ("auto" | "medium" | "none" | "large" | "small" | {
78
+ mobile?: "auto" | "medium" | "none" | "large" | "small";
79
+ tablet?: "auto" | "medium" | "none" | "large" | "small";
80
+ desktop?: "auto" | "medium" | "none" | "large" | "small";
81
+ }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
82
+ borderLeft?: ("auto" | "medium" | "none" | "large" | "small" | {
83
+ mobile?: "auto" | "medium" | "none" | "large" | "small";
84
+ tablet?: "auto" | "medium" | "none" | "large" | "small";
85
+ desktop?: "auto" | "medium" | "none" | "large" | "small";
86
+ }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
87
+ borderRight?: ("auto" | "medium" | "none" | "large" | "small" | {
88
+ mobile?: "auto" | "medium" | "none" | "large" | "small";
89
+ tablet?: "auto" | "medium" | "none" | "large" | "small";
90
+ desktop?: "auto" | "medium" | "none" | "large" | "small";
91
+ }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
92
+ borderTop?: ("auto" | "medium" | "none" | "large" | "small" | {
93
+ mobile?: "auto" | "medium" | "none" | "large" | "small";
94
+ tablet?: "auto" | "medium" | "none" | "large" | "small";
95
+ desktop?: "auto" | "medium" | "none" | "large" | "small";
96
+ }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
97
+ borderBottom?: ("auto" | "medium" | "none" | "large" | "small" | {
98
+ mobile?: "auto" | "medium" | "none" | "large" | "small";
99
+ tablet?: "auto" | "medium" | "none" | "large" | "small";
100
+ desktop?: "auto" | "medium" | "none" | "large" | "small";
101
+ }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
102
+ borderRadius?: ("auto" | "medium" | "none" | "large" | "small" | {
103
+ mobile?: "auto" | "medium" | "none" | "large" | "small";
104
+ tablet?: "auto" | "medium" | "none" | "large" | "small";
105
+ desktop?: "auto" | "medium" | "none" | "large" | "small";
106
+ }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
107
+ gap?: ("auto" | "medium" | "none" | "large" | "small" | {
108
+ mobile?: "auto" | "medium" | "none" | "large" | "small";
109
+ tablet?: "auto" | "medium" | "none" | "large" | "small";
110
+ desktop?: "auto" | "medium" | "none" | "large" | "small";
111
+ }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
112
+ padding?: ("auto" | "medium" | "none" | "large" | "small" | {
113
+ mobile?: "auto" | "medium" | "none" | "large" | "small";
114
+ tablet?: "auto" | "medium" | "none" | "large" | "small";
115
+ desktop?: "auto" | "medium" | "none" | "large" | "small";
116
+ }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
117
+ border?: ("auto" | "medium" | "none" | "large" | "small" | {
118
+ mobile?: "auto" | "medium" | "none" | "large" | "small";
119
+ tablet?: "auto" | "medium" | "none" | "large" | "small";
120
+ desktop?: "auto" | "medium" | "none" | "large" | "small";
121
+ }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
122
+ paddingX?: ("auto" | "medium" | "none" | "large" | "small" | {
123
+ mobile?: "auto" | "medium" | "none" | "large" | "small";
124
+ tablet?: "auto" | "medium" | "none" | "large" | "small";
125
+ desktop?: "auto" | "medium" | "none" | "large" | "small";
126
+ }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
127
+ paddingY?: ("auto" | "medium" | "none" | "large" | "small" | {
128
+ mobile?: "auto" | "medium" | "none" | "large" | "small";
129
+ tablet?: "auto" | "medium" | "none" | "large" | "small";
130
+ desktop?: "auto" | "medium" | "none" | "large" | "small";
131
+ }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
132
+ marginX?: ("auto" | "medium" | "none" | "large" | "small" | {
133
+ mobile?: "auto" | "medium" | "none" | "large" | "small";
134
+ tablet?: "auto" | "medium" | "none" | "large" | "small";
135
+ desktop?: "auto" | "medium" | "none" | "large" | "small";
136
+ }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
137
+ marginY?: ("auto" | "medium" | "none" | "large" | "small" | {
138
+ mobile?: "auto" | "medium" | "none" | "large" | "small";
139
+ tablet?: "auto" | "medium" | "none" | "large" | "small";
140
+ desktop?: "auto" | "medium" | "none" | "large" | "small";
141
+ }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
142
+ placeItems?: import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "stretch" | "center" | "flex-end" | "flex-start"> | ("stretch" | "center" | "flex-end" | "flex-start" | {
143
+ mobile?: "stretch" | "center" | "flex-end" | "flex-start";
144
+ tablet?: "stretch" | "center" | "flex-end" | "flex-start";
145
+ desktop?: "stretch" | "center" | "flex-end" | "flex-start";
146
+ });
147
+ } & {
148
+ color?: "c1-50" | "c1-100" | "c1-150" | "c1-200" | "c1-250" | "c1-300" | "c1-350" | "c1-400" | "c1-450" | "c1-500" | "c1-550" | "c1-600" | "c1-650" | "c1-700" | "c1-750" | "c1-800" | "c1-850" | "c1-900" | "c2-50" | "c2-100" | "c2-150" | "c2-200" | "c2-250" | "c2-300" | "c2-350" | "c2-400" | "c2-450" | "c2-500" | "c2-550" | "c2-600" | "c2-650" | "c2-700" | "c2-750" | "c2-800" | "c2-850" | "c2-900" | "c3-50" | "c3-100" | "c3-150" | "c3-200" | "c3-250" | "c3-300" | "c3-350" | "c3-400" | "c3-450" | "c3-500" | "c3-550" | "c3-600" | "c3-650" | "c3-700" | "c3-750" | "c3-800" | "c3-850" | "c3-900" | "c4-50" | "c4-100" | "c4-150" | "c4-200" | "c4-250" | "c4-300" | "c4-350" | "c4-400" | "c4-450" | "c4-500" | "c4-550" | "c4-600" | "c4-650" | "c4-700" | "c4-750" | "c4-800" | "c4-850" | "c4-900" | "c5-50" | "c5-100" | "c5-150" | "c5-200" | "c5-250" | "c5-300" | "c5-350" | "c5-400" | "c5-450" | "c5-500" | "c5-550" | "c5-600" | "c5-650" | "c5-700" | "c5-750" | "c5-800" | "c5-850" | "c5-900" | {
149
+ lightMode?: "c1-50" | "c1-100" | "c1-150" | "c1-200" | "c1-250" | "c1-300" | "c1-350" | "c1-400" | "c1-450" | "c1-500" | "c1-550" | "c1-600" | "c1-650" | "c1-700" | "c1-750" | "c1-800" | "c1-850" | "c1-900" | "c2-50" | "c2-100" | "c2-150" | "c2-200" | "c2-250" | "c2-300" | "c2-350" | "c2-400" | "c2-450" | "c2-500" | "c2-550" | "c2-600" | "c2-650" | "c2-700" | "c2-750" | "c2-800" | "c2-850" | "c2-900" | "c3-50" | "c3-100" | "c3-150" | "c3-200" | "c3-250" | "c3-300" | "c3-350" | "c3-400" | "c3-450" | "c3-500" | "c3-550" | "c3-600" | "c3-650" | "c3-700" | "c3-750" | "c3-800" | "c3-850" | "c3-900" | "c4-50" | "c4-100" | "c4-150" | "c4-200" | "c4-250" | "c4-300" | "c4-350" | "c4-400" | "c4-450" | "c4-500" | "c4-550" | "c4-600" | "c4-650" | "c4-700" | "c4-750" | "c4-800" | "c4-850" | "c4-900" | "c5-50" | "c5-100" | "c5-150" | "c5-200" | "c5-250" | "c5-300" | "c5-350" | "c5-400" | "c5-450" | "c5-500" | "c5-550" | "c5-600" | "c5-650" | "c5-700" | "c5-750" | "c5-800" | "c5-850" | "c5-900";
150
+ darkMode?: "c1-50" | "c1-100" | "c1-150" | "c1-200" | "c1-250" | "c1-300" | "c1-350" | "c1-400" | "c1-450" | "c1-500" | "c1-550" | "c1-600" | "c1-650" | "c1-700" | "c1-750" | "c1-800" | "c1-850" | "c1-900" | "c2-50" | "c2-100" | "c2-150" | "c2-200" | "c2-250" | "c2-300" | "c2-350" | "c2-400" | "c2-450" | "c2-500" | "c2-550" | "c2-600" | "c2-650" | "c2-700" | "c2-750" | "c2-800" | "c2-850" | "c2-900" | "c3-50" | "c3-100" | "c3-150" | "c3-200" | "c3-250" | "c3-300" | "c3-350" | "c3-400" | "c3-450" | "c3-500" | "c3-550" | "c3-600" | "c3-650" | "c3-700" | "c3-750" | "c3-800" | "c3-850" | "c3-900" | "c4-50" | "c4-100" | "c4-150" | "c4-200" | "c4-250" | "c4-300" | "c4-350" | "c4-400" | "c4-450" | "c4-500" | "c4-550" | "c4-600" | "c4-650" | "c4-700" | "c4-750" | "c4-800" | "c4-850" | "c4-900" | "c5-50" | "c5-100" | "c5-150" | "c5-200" | "c5-250" | "c5-300" | "c5-350" | "c5-400" | "c5-450" | "c5-500" | "c5-550" | "c5-600" | "c5-650" | "c5-700" | "c5-750" | "c5-800" | "c5-850" | "c5-900";
151
+ };
152
+ background?: "c1-50" | "c1-100" | "c1-150" | "c1-200" | "c1-250" | "c1-300" | "c1-350" | "c1-400" | "c1-450" | "c1-500" | "c1-550" | "c1-600" | "c1-650" | "c1-700" | "c1-750" | "c1-800" | "c1-850" | "c1-900" | "c2-50" | "c2-100" | "c2-150" | "c2-200" | "c2-250" | "c2-300" | "c2-350" | "c2-400" | "c2-450" | "c2-500" | "c2-550" | "c2-600" | "c2-650" | "c2-700" | "c2-750" | "c2-800" | "c2-850" | "c2-900" | "c3-50" | "c3-100" | "c3-150" | "c3-200" | "c3-250" | "c3-300" | "c3-350" | "c3-400" | "c3-450" | "c3-500" | "c3-550" | "c3-600" | "c3-650" | "c3-700" | "c3-750" | "c3-800" | "c3-850" | "c3-900" | "c4-50" | "c4-100" | "c4-150" | "c4-200" | "c4-250" | "c4-300" | "c4-350" | "c4-400" | "c4-450" | "c4-500" | "c4-550" | "c4-600" | "c4-650" | "c4-700" | "c4-750" | "c4-800" | "c4-850" | "c4-900" | "c5-50" | "c5-100" | "c5-150" | "c5-200" | "c5-250" | "c5-300" | "c5-350" | "c5-400" | "c5-450" | "c5-500" | "c5-550" | "c5-600" | "c5-650" | "c5-700" | "c5-750" | "c5-800" | "c5-850" | "c5-900" | {
153
+ lightMode?: "c1-50" | "c1-100" | "c1-150" | "c1-200" | "c1-250" | "c1-300" | "c1-350" | "c1-400" | "c1-450" | "c1-500" | "c1-550" | "c1-600" | "c1-650" | "c1-700" | "c1-750" | "c1-800" | "c1-850" | "c1-900" | "c2-50" | "c2-100" | "c2-150" | "c2-200" | "c2-250" | "c2-300" | "c2-350" | "c2-400" | "c2-450" | "c2-500" | "c2-550" | "c2-600" | "c2-650" | "c2-700" | "c2-750" | "c2-800" | "c2-850" | "c2-900" | "c3-50" | "c3-100" | "c3-150" | "c3-200" | "c3-250" | "c3-300" | "c3-350" | "c3-400" | "c3-450" | "c3-500" | "c3-550" | "c3-600" | "c3-650" | "c3-700" | "c3-750" | "c3-800" | "c3-850" | "c3-900" | "c4-50" | "c4-100" | "c4-150" | "c4-200" | "c4-250" | "c4-300" | "c4-350" | "c4-400" | "c4-450" | "c4-500" | "c4-550" | "c4-600" | "c4-650" | "c4-700" | "c4-750" | "c4-800" | "c4-850" | "c4-900" | "c5-50" | "c5-100" | "c5-150" | "c5-200" | "c5-250" | "c5-300" | "c5-350" | "c5-400" | "c5-450" | "c5-500" | "c5-550" | "c5-600" | "c5-650" | "c5-700" | "c5-750" | "c5-800" | "c5-850" | "c5-900";
154
+ darkMode?: "c1-50" | "c1-100" | "c1-150" | "c1-200" | "c1-250" | "c1-300" | "c1-350" | "c1-400" | "c1-450" | "c1-500" | "c1-550" | "c1-600" | "c1-650" | "c1-700" | "c1-750" | "c1-800" | "c1-850" | "c1-900" | "c2-50" | "c2-100" | "c2-150" | "c2-200" | "c2-250" | "c2-300" | "c2-350" | "c2-400" | "c2-450" | "c2-500" | "c2-550" | "c2-600" | "c2-650" | "c2-700" | "c2-750" | "c2-800" | "c2-850" | "c2-900" | "c3-50" | "c3-100" | "c3-150" | "c3-200" | "c3-250" | "c3-300" | "c3-350" | "c3-400" | "c3-450" | "c3-500" | "c3-550" | "c3-600" | "c3-650" | "c3-700" | "c3-750" | "c3-800" | "c3-850" | "c3-900" | "c4-50" | "c4-100" | "c4-150" | "c4-200" | "c4-250" | "c4-300" | "c4-350" | "c4-400" | "c4-450" | "c4-500" | "c4-550" | "c4-600" | "c4-650" | "c4-700" | "c4-750" | "c4-800" | "c4-850" | "c4-900" | "c5-50" | "c5-100" | "c5-150" | "c5-200" | "c5-250" | "c5-300" | "c5-350" | "c5-400" | "c5-450" | "c5-500" | "c5-550" | "c5-600" | "c5-650" | "c5-700" | "c5-750" | "c5-800" | "c5-850" | "c5-900";
155
+ };
156
+ } & {
157
+ columns?: GridColumns;
158
+ gap?: GridGap;
159
+ minChildWidth?: string;
160
+ children?: React.ReactNode;
161
+ } & React.RefAttributes<HTMLElement>>;
13
162
  export default Grid;