@everlywell/ui-kit 1.10.2 → 1.10.4

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 (9) hide show
  1. package/index.js +9 -9
  2. package/index.mjs +683 -651
  3. package/lib/theme/actions/FormControl/FormControl.config.d.ts +24 -5
  4. package/lib/theme/actions/Input/Input.config.d.ts +1 -1
  5. package/lib/theme/actions/Select/Select.config.d.ts +1 -1
  6. package/lib/theme/foundations/colors.d.ts +108 -1
  7. package/lib/theme/index.d.ts +138 -100
  8. package/lib/theme/typography/Heading/Heading.d.ts +1 -1
  9. package/package.json +1 -1
package/lib/theme/actions/FormControl/FormControl.config.d.ts CHANGED
@@ -21,18 +21,20 @@ declare const _default: {
21
21
  floating: {
22
22
  container: {
23
23
  _focusWithin: {
24
- label: {
24
+ '*:not(.chakra-select__wrapper) + label': {
25
25
  transform: string[];
26
26
  fontSize: string;
27
+ top: string[];
27
28
  color: string;
28
29
  _invalid: {
29
30
  color: string;
30
31
  };
31
32
  };
32
33
  };
33
- 'input:not(:placeholder-shown) + label, .chakra-select__wrapper:not(:has(option[value=""]:checked)) + label, textarea:not(:placeholder-shown) ~ label': {
34
+ 'input:not(:placeholder-shown) + label, .chakra-input__group:has(input:not(:placeholder-shown)) + label, .chakra-select__wrapper:not(:has(option[value=""]:checked)) + label, textarea:not(:placeholder-shown) ~ label': {
34
35
  transform: string[];
35
36
  fontSize: string;
37
+ top: string[];
36
38
  color: string;
37
39
  _invalid: {
38
40
  color: string;
@@ -42,24 +44,41 @@ declare const _default: {
42
44
  color: string;
43
45
  };
44
46
  label: {
47
+ transition: string;
45
48
  transformOrigin: string;
46
49
  position: string;
47
50
  pointerEvents: string;
48
51
  zIndex: number;
49
52
  ml: number;
50
53
  mr: number;
51
- mt: (number | "14px")[];
54
+ top: (number | "16px")[];
52
55
  fontSize: ("md" | "lg")[];
53
56
  color: string;
54
57
  fontWeight: string;
55
58
  };
59
+ ':has(.chakra-input__left-element) label': {
60
+ ml: string[];
61
+ };
56
62
  input: {
57
63
  pt: number;
58
- pl: string;
64
+ h: string[];
65
+ '&:not(:focus)': {
66
+ '::placeholder': {
67
+ color: string;
68
+ visibility: string;
69
+ };
70
+ };
59
71
  };
60
72
  select: {
61
73
  pt: number;
62
- pl: string;
74
+ h: string[];
75
+ };
76
+ ':has(.chakra-input__left-element) input, :has(.chakra-input__left-element) select': {
77
+ pl: string[];
78
+ };
79
+ '.chakra-input__right-element, .chakra-input__left-element': {
80
+ w: string[];
81
+ h: string[];
63
82
  };
64
83
  };
65
84
  };
package/lib/theme/actions/Input/Input.config.d.ts CHANGED
@@ -11,7 +11,7 @@ declare const _default: {
11
11
  borderColor: string;
12
12
  borderRadius: string;
13
13
  w: string;
14
- h: ("44px" | "52px")[];
14
+ h: ("52px" | "44px")[];
15
15
  ':focus, &.focus': {
16
16
  borderColor: string;
17
17
  outline: string;
package/lib/theme/actions/Select/Select.config.d.ts CHANGED
@@ -17,7 +17,7 @@ declare const _default: {
17
17
  borderColor?: string | undefined;
18
18
  borderRadius?: string | undefined;
19
19
  w?: string | undefined;
20
- h?: ("44px" | "52px")[] | undefined;
20
+ h?: ("52px" | "44px")[] | undefined;
21
21
  ':focus, &.focus'?: {
22
22
  borderColor: string;
23
23
  outline: string;
package/lib/theme/foundations/colors.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- declare const colors: {
1
+ export declare const palette: {
2
2
  tints: {
3
3
  black: string;
4
4
  darkGrey: string;
@@ -59,6 +59,8 @@ declare const colors: {
59
59
  lighter: string;
60
60
  wash: string;
61
61
  };
62
+ };
63
+ export declare const colorSchemes: {
62
64
  redCS: {
63
65
  50: string;
64
66
  100: string;
@@ -96,11 +98,116 @@ declare const colors: {
96
98
  800: string;
97
99
  900: string;
98
100
  };
101
+ };
102
+ export declare const utilityColors: {
103
+ warning: string;
104
+ sale: string;
105
+ success: string;
106
+ rating: string;
107
+ };
108
+ declare const colors: {
99
109
  utility: {
100
110
  warning: string;
101
111
  sale: string;
102
112
  success: string;
103
113
  rating: string;
104
114
  };
115
+ redCS: {
116
+ 50: string;
117
+ 100: string;
118
+ 200: string;
119
+ 300: string;
120
+ 400: string;
121
+ 500: string;
122
+ 600: string;
123
+ 700: string;
124
+ 800: string;
125
+ 900: string;
126
+ };
127
+ greenCS: {
128
+ 50: string;
129
+ 100: string;
130
+ 200: string;
131
+ 300: string;
132
+ 400: string;
133
+ 500: string;
134
+ 600: string;
135
+ 700: string;
136
+ 800: string;
137
+ 900: string;
138
+ };
139
+ whiteCS: {
140
+ base: string;
141
+ 50: string;
142
+ 100: string;
143
+ 200: string;
144
+ 300: string;
145
+ 400: string;
146
+ 500: string;
147
+ 600: string;
148
+ 700: string;
149
+ 800: string;
150
+ 900: string;
151
+ };
152
+ tints: {
153
+ black: string;
154
+ darkGrey: string;
155
+ uiGrey: string;
156
+ medGrey: string;
157
+ lightGrey: string;
158
+ darkCream: string;
159
+ cream: string;
160
+ lightCream: string;
161
+ white: string;
162
+ };
163
+ viridian: {
164
+ dark: string;
165
+ base: string;
166
+ light: string;
167
+ lighter: string;
168
+ wash: string;
169
+ };
170
+ sunshine: {
171
+ dark: string;
172
+ base: string;
173
+ light: string;
174
+ lighter: string;
175
+ wash: string;
176
+ };
177
+ terracotta: {
178
+ dark: string;
179
+ base: string;
180
+ light: string;
181
+ lighter: string;
182
+ wash: string;
183
+ };
184
+ violet: {
185
+ dark: string;
186
+ base: string;
187
+ light: string;
188
+ lighter: string;
189
+ wash: string;
190
+ };
191
+ eggplant: {
192
+ dark: string;
193
+ base: string;
194
+ light: string;
195
+ lighter: string;
196
+ wash: string;
197
+ };
198
+ moonlight: {
199
+ dark: string;
200
+ base: string;
201
+ light: string;
202
+ lighter: string;
203
+ wash: string;
204
+ };
205
+ sky: {
206
+ dark: string;
207
+ base: string;
208
+ light: string;
209
+ lighter: string;
210
+ wash: string;
211
+ };
105
212
  };
106
213
  export default colors;
package/lib/theme/index.d.ts CHANGED
@@ -126,6 +126,49 @@ export declare const theme: {
126
126
  tooltip: number;
127
127
  };
128
128
  colors: {
129
+ utility: {
130
+ warning: string;
131
+ sale: string;
132
+ success: string;
133
+ rating: string;
134
+ };
135
+ redCS: {
136
+ 50: string;
137
+ 100: string;
138
+ 200: string;
139
+ 300: string;
140
+ 400: string;
141
+ 500: string;
142
+ 600: string;
143
+ 700: string;
144
+ 800: string;
145
+ 900: string;
146
+ };
147
+ greenCS: {
148
+ 50: string;
149
+ 100: string;
150
+ 200: string;
151
+ 300: string;
152
+ 400: string;
153
+ 500: string;
154
+ 600: string;
155
+ 700: string;
156
+ 800: string;
157
+ 900: string;
158
+ };
159
+ whiteCS: {
160
+ base: string;
161
+ 50: string;
162
+ 100: string;
163
+ 200: string;
164
+ 300: string;
165
+ 400: string;
166
+ 500: string;
167
+ 600: string;
168
+ 700: string;
169
+ 800: string;
170
+ 900: string;
171
+ };
129
172
  tints: {
130
173
  black: string;
131
174
  darkGrey: string;
@@ -186,49 +229,6 @@ export declare const theme: {
186
229
  lighter: string;
187
230
  wash: string;
188
231
  };
189
- redCS: {
190
- 50: string;
191
- 100: string;
192
- 200: string;
193
- 300: string;
194
- 400: string;
195
- 500: string;
196
- 600: string;
197
- 700: string;
198
- 800: string;
199
- 900: string;
200
- };
201
- greenCS: {
202
- 50: string;
203
- 100: string;
204
- 200: string;
205
- 300: string;
206
- 400: string;
207
- 500: string;
208
- 600: string;
209
- 700: string;
210
- 800: string;
211
- 900: string;
212
- };
213
- whiteCS: {
214
- base: string;
215
- 50: string;
216
- 100: string;
217
- 200: string;
218
- 300: string;
219
- 400: string;
220
- 500: string;
221
- 600: string;
222
- 700: string;
223
- 800: string;
224
- 900: string;
225
- };
226
- utility: {
227
- warning: string;
228
- sale: string;
229
- success: string;
230
- rating: string;
231
- };
232
232
  };
233
233
  components: {
234
234
  Accordion: {
@@ -590,18 +590,20 @@ export declare const theme: {
590
590
  floating: {
591
591
  container: {
592
592
  _focusWithin: {
593
- label: {
593
+ '*:not(.chakra-select__wrapper) + label': {
594
594
  transform: string[];
595
595
  fontSize: string;
596
+ top: string[];
596
597
  color: string;
597
598
  _invalid: {
598
599
  color: string;
599
600
  };
600
601
  };
601
602
  };
602
- 'input:not(:placeholder-shown) + label, .chakra-select__wrapper:not(:has(option[value=""]:checked)) + label, textarea:not(:placeholder-shown) ~ label': {
603
+ 'input:not(:placeholder-shown) + label, .chakra-input__group:has(input:not(:placeholder-shown)) + label, .chakra-select__wrapper:not(:has(option[value=""]:checked)) + label, textarea:not(:placeholder-shown) ~ label': {
603
604
  transform: string[];
604
605
  fontSize: string;
606
+ top: string[];
605
607
  color: string;
606
608
  _invalid: {
607
609
  color: string;
@@ -611,24 +613,41 @@ export declare const theme: {
611
613
  color: string;
612
614
  };
613
615
  label: {
616
+ transition: string;
614
617
  transformOrigin: string;
615
618
  position: string;
616
619
  pointerEvents: string;
617
620
  zIndex: number;
618
621
  ml: number;
619
622
  mr: number;
620
- mt: (number | "14px")[];
623
+ top: (number | "16px")[];
621
624
  fontSize: ("md" | "lg")[];
622
625
  color: string;
623
626
  fontWeight: string;
624
627
  };
628
+ ':has(.chakra-input__left-element) label': {
629
+ ml: string[];
630
+ };
625
631
  input: {
626
632
  pt: number;
627
- pl: string;
633
+ h: string[];
634
+ '&:not(:focus)': {
635
+ '::placeholder': {
636
+ color: string;
637
+ visibility: string;
638
+ };
639
+ };
628
640
  };
629
641
  select: {
630
642
  pt: number;
631
- pl: string;
643
+ h: string[];
644
+ };
645
+ ':has(.chakra-input__left-element) input, :has(.chakra-input__left-element) select': {
646
+ pl: string[];
647
+ };
648
+ '.chakra-input__right-element, .chakra-input__left-element': {
649
+ w: string[];
650
+ h: string[];
632
651
  };
633
652
  };
634
653
  };
@@ -712,7 +731,7 @@ export declare const theme: {
712
731
  borderColor?: string | undefined;
713
732
  borderRadius?: string | undefined;
714
733
  w?: string | undefined;
715
- h?: ("44px" | "52px")[] | undefined;
734
+ h?: ("52px" | "44px")[] | undefined;
716
735
  ':focus, &.focus'?: {
717
736
  borderColor: string;
718
737
  outline: string;
@@ -833,7 +852,7 @@ export declare const theme: {
833
852
  borderColor: string;
834
853
  borderRadius: string;
835
854
  w: string;
836
- h: ("44px" | "52px")[];
855
+ h: ("52px" | "44px")[];
837
856
  ':focus, &.focus': {
838
857
  borderColor: string;
839
858
  outline: string;
@@ -2081,6 +2100,49 @@ export declare const useTheme: () => import("@chakra-ui/styled-system").WithCSSV
2081
2100
  tooltip: number;
2082
2101
  };
2083
2102
  colors: {
2103
+ utility: {
2104
+ warning: string;
2105
+ sale: string;
2106
+ success: string;
2107
+ rating: string;
2108
+ };
2109
+ redCS: {
2110
+ 50: string;
2111
+ 100: string;
2112
+ 200: string;
2113
+ 300: string;
2114
+ 400: string;
2115
+ 500: string;
2116
+ 600: string;
2117
+ 700: string;
2118
+ 800: string;
2119
+ 900: string;
2120
+ };
2121
+ greenCS: {
2122
+ 50: string;
2123
+ 100: string;
2124
+ 200: string;
2125
+ 300: string;
2126
+ 400: string;
2127
+ 500: string;
2128
+ 600: string;
2129
+ 700: string;
2130
+ 800: string;
2131
+ 900: string;
2132
+ };
2133
+ whiteCS: {
2134
+ base: string;
2135
+ 50: string;
2136
+ 100: string;
2137
+ 200: string;
2138
+ 300: string;
2139
+ 400: string;
2140
+ 500: string;
2141
+ 600: string;
2142
+ 700: string;
2143
+ 800: string;
2144
+ 900: string;
2145
+ };
2084
2146
  tints: {
2085
2147
  black: string;
2086
2148
  darkGrey: string;
@@ -2141,49 +2203,6 @@ export declare const useTheme: () => import("@chakra-ui/styled-system").WithCSSV
2141
2203
  lighter: string;
2142
2204
  wash: string;
2143
2205
  };
2144
- redCS: {
2145
- 50: string;
2146
- 100: string;
2147
- 200: string;
2148
- 300: string;
2149
- 400: string;
2150
- 500: string;
2151
- 600: string;
2152
- 700: string;
2153
- 800: string;
2154
- 900: string;
2155
- };
2156
- greenCS: {
2157
- 50: string;
2158
- 100: string;
2159
- 200: string;
2160
- 300: string;
2161
- 400: string;
2162
- 500: string;
2163
- 600: string;
2164
- 700: string;
2165
- 800: string;
2166
- 900: string;
2167
- };
2168
- whiteCS: {
2169
- base: string;
2170
- 50: string;
2171
- 100: string;
2172
- 200: string;
2173
- 300: string;
2174
- 400: string;
2175
- 500: string;
2176
- 600: string;
2177
- 700: string;
2178
- 800: string;
2179
- 900: string;
2180
- };
2181
- utility: {
2182
- warning: string;
2183
- sale: string;
2184
- success: string;
2185
- rating: string;
2186
- };
2187
2206
  };
2188
2207
  components: {
2189
2208
  Accordion: {
@@ -2545,18 +2564,20 @@ export declare const useTheme: () => import("@chakra-ui/styled-system").WithCSSV
2545
2564
  floating: {
2546
2565
  container: {
2547
2566
  _focusWithin: {
2548
- label: {
2567
+ '*:not(.chakra-select__wrapper) + label': {
2549
2568
  transform: string[];
2550
2569
  fontSize: string;
2570
+ top: string[];
2551
2571
  color: string;
2552
2572
  _invalid: {
2553
2573
  color: string;
2554
2574
  };
2555
2575
  };
2556
2576
  };
2557
- 'input:not(:placeholder-shown) + label, .chakra-select__wrapper:not(:has(option[value=""]:checked)) + label, textarea:not(:placeholder-shown) ~ label': {
2577
+ 'input:not(:placeholder-shown) + label, .chakra-input__group:has(input:not(:placeholder-shown)) + label, .chakra-select__wrapper:not(:has(option[value=""]:checked)) + label, textarea:not(:placeholder-shown) ~ label': {
2558
2578
  transform: string[];
2559
2579
  fontSize: string;
2580
+ top: string[];
2560
2581
  color: string;
2561
2582
  _invalid: {
2562
2583
  color: string;
@@ -2566,24 +2587,41 @@ export declare const useTheme: () => import("@chakra-ui/styled-system").WithCSSV
2566
2587
  color: string;
2567
2588
  };
2568
2589
  label: {
2590
+ transition: string;
2569
2591
  transformOrigin: string;
2570
2592
  position: string;
2571
2593
  pointerEvents: string;
2572
2594
  zIndex: number;
2573
2595
  ml: number;
2574
2596
  mr: number;
2575
- mt: (number | "14px")[];
2597
+ top: (number | "16px")[];
2576
2598
  fontSize: ("md" | "lg")[];
2577
2599
  color: string;
2578
2600
  fontWeight: string;
2579
2601
  };
2602
+ ':has(.chakra-input__left-element) label': {
2603
+ ml: string[];
2604
+ };
2580
2605
  input: {
2581
2606
  pt: number;
2582
- pl: string;
2607
+ h: string[];
2608
+ '&:not(:focus)': {
2609
+ '::placeholder': {
2610
+ color: string;
2611
+ visibility: string;
2612
+ };
2613
+ };
2583
2614
  };
2584
2615
  select: {
2585
2616
  pt: number;
2586
- pl: string;
2617
+ h: string[];
2618
+ };
2619
+ ':has(.chakra-input__left-element) input, :has(.chakra-input__left-element) select': {
2620
+ pl: string[];
2621
+ };
2622
+ '.chakra-input__right-element, .chakra-input__left-element': {
2623
+ w: string[];
2624
+ h: string[];
2587
2625
  };
2588
2626
  };
2589
2627
  };
@@ -2667,7 +2705,7 @@ export declare const useTheme: () => import("@chakra-ui/styled-system").WithCSSV
2667
2705
  borderColor?: string | undefined;
2668
2706
  borderRadius?: string | undefined;
2669
2707
  w?: string | undefined;
2670
- h?: ("44px" | "52px")[] | undefined;
2708
+ h?: ("52px" | "44px")[] | undefined;
2671
2709
  ':focus, &.focus'?: {
2672
2710
  borderColor: string;
2673
2711
  outline: string;
@@ -2788,7 +2826,7 @@ export declare const useTheme: () => import("@chakra-ui/styled-system").WithCSSV
2788
2826
  borderColor: string;
2789
2827
  borderRadius: string;
2790
2828
  w: string;
2791
- h: ("44px" | "52px")[];
2829
+ h: ("52px" | "44px")[];
2792
2830
  ':focus, &.focus': {
2793
2831
  borderColor: string;
2794
2832
  outline: string;
package/lib/theme/typography/Heading/Heading.d.ts CHANGED
@@ -1,3 +1,3 @@
1
- import { Heading, HeadingProps as ChakraHeadingProps } from "@chakra-ui/react";
1
+ import { Heading, HeadingProps as ChakraHeadingProps } from '@chakra-ui/react';
2
2
  export type HeadingProps = ChakraHeadingProps;
3
3
  export default Heading;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@everlywell/ui-kit",
3
- "version": "1.10.2",
3
+ "version": "1.10.4",
4
4
  "main": "./index.js",
5
5
  "types": "./index.d.ts",
6
6
  "exports": {