@nypl/design-system-react-components 3.1.5 → 3.1.6-container-queries-rc

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/dist/design-system-react-components.cjs +41 -41
  2. package/dist/design-system-react-components.js +4964 -4898
  3. package/dist/src/components/Modal/Modal.d.ts +1 -1
  4. package/dist/src/components/MultiSelect/MultiSelectItemsCountButton.d.ts +1 -1
  5. package/dist/src/theme/components/card.d.ts +101 -71
  6. package/dist/src/theme/components/featuredContent.d.ts +63 -32
  7. package/dist/src/theme/components/heading.d.ts +2 -2
  8. package/dist/src/theme/components/searchBar.d.ts +101 -22
  9. package/package.json +1 -1
package/dist/src/components/Modal/Modal.d.ts CHANGED
@@ -56,6 +56,6 @@ export declare const ModalTrigger: ChakraComponent<React.ForwardRefExoticCompone
56
56
  /**
57
57
  * This hook function can be used to render the `Modal` component with a custom
58
58
  * open button(s) and optional custom close button(s). You must render your own
59
- * button and pass the appropriate `onOpen` and ` handler for the modal to open.
59
+ * button and pass the appropriate `onOpen` and `onClose` handler for the modal to open.
60
60
  */
61
61
  export declare function useModal(): any;
package/dist/src/components/MultiSelect/MultiSelectItemsCountButton.d.ts CHANGED
@@ -19,7 +19,7 @@ export interface MultiSelectItemsCountButtonProps {
19
19
  /** The action to perform for key down event. */
20
20
  onKeyDown?: () => void;
21
21
  /** Ref to the Accordion Button element. */
22
- accordianButtonRef: any;
22
+ accordionButtonRef: any;
23
23
  }
24
24
  /**
25
25
  * The toggle button component used to open and close the `MultiSelect` menu.
package/dist/src/theme/components/card.d.ts CHANGED
@@ -7,6 +7,7 @@ interface CardBaseStyleProps extends StyleFunctionProps {
7
7
  isCentered: boolean;
8
8
  layout: string;
9
9
  mainActionLink: boolean;
10
+ imageSize: keyof typeof imageSizes;
10
11
  }
11
12
  interface CardImageBaseStyleProps extends StyleFunctionProps {
12
13
  imageIsAtEnd: boolean;
@@ -51,13 +52,97 @@ declare const imageSizes: {
51
52
  };
52
53
  declare const _default: {
53
54
  ReservoirCard: {
54
- baseStyle?: ({ hasImage, imageIsAtEnd, isAlignedRightActions, isBordered, isCentered, layout, mainActionLink, }: CardBaseStyleProps) => {
55
+ baseStyle?: ({ hasImage, imageIsAtEnd, isAlignedRightActions, isBordered, isCentered, layout, mainActionLink, imageSize, }: CardBaseStyleProps) => {
55
56
  base: {
56
- display: string;
57
- flexFlow: {
58
- base: string;
59
- md: string;
57
+ [x: string]: string | {
58
+ "[data-wrapper]": {
59
+ flexFlow: string;
60
+ };
61
+ "[data-actions]": {
62
+ flexShrink: string;
63
+ marginStart: string;
64
+ marginTop: string;
65
+ maxWidth: string;
66
+ };
67
+ "[data-body]": {
68
+ width: string;
69
+ flexBasis?: undefined;
70
+ display?: undefined;
71
+ flexFlow?: undefined;
72
+ };
73
+ "[data-image]": any;
74
+ } | {
75
+ "[data-body]": {
76
+ flexBasis: string;
77
+ width?: undefined;
78
+ display?: undefined;
79
+ flexFlow?: undefined;
80
+ };
81
+ "[data-wrapper]"?: undefined;
82
+ "[data-actions]"?: undefined;
83
+ "[data-image]"?: undefined;
84
+ } | {
85
+ "[data-wrapper]": {
86
+ flexFlow: string;
87
+ };
88
+ "[data-actions]": {
89
+ flexShrink: string;
90
+ marginStart: string;
91
+ marginTop: string;
92
+ maxWidth: string;
93
+ };
94
+ "[data-body]": {
95
+ display: string;
96
+ flexFlow: string;
97
+ width: string;
98
+ flexBasis?: undefined;
99
+ };
100
+ "[data-image]": {
101
+ flex: string;
102
+ width: string;
103
+ maxWidth: string;
104
+ margin: string;
105
+ } | {
106
+ flex: string;
107
+ maxWidth: string;
108
+ margin: string;
109
+ width: any;
110
+ } | {
111
+ flex: string;
112
+ maxWidth: string;
113
+ margin: string;
114
+ width: any;
115
+ } | {
116
+ flex: string;
117
+ maxWidth: string;
118
+ margin: string;
119
+ width: any;
120
+ } | {
121
+ flex: string;
122
+ maxWidth: string;
123
+ margin: string;
124
+ width: any;
125
+ };
60
126
  };
127
+ containerType: string;
128
+ "@container (min-width: 0px)": {
129
+ "[data-wrapper]": {
130
+ flexFlow: string;
131
+ };
132
+ "[data-actions]": {
133
+ flexShrink: string;
134
+ marginStart: string;
135
+ marginTop: string;
136
+ maxWidth: string;
137
+ };
138
+ "[data-body]": {
139
+ width: string;
140
+ };
141
+ "[data-image]": any;
142
+ };
143
+ };
144
+ wrapper: {
145
+ display: string;
61
146
  maxWidth: string;
62
147
  textAlign: string;
63
148
  alignItems: string;
@@ -66,9 +151,9 @@ declare const _default: {
66
151
  _dark: {
67
152
  borderColor: string;
68
153
  };
154
+ flexFlow: string;
69
155
  } | {
70
156
  display: string;
71
- flexFlow: string;
72
157
  maxWidth?: undefined;
73
158
  textAlign: string;
74
159
  alignItems: string;
@@ -77,63 +162,32 @@ declare const _default: {
77
162
  _dark: {
78
163
  borderColor: string;
79
164
  };
165
+ flexFlow: string;
80
166
  } | {
81
167
  display: string;
82
- flexFlow: {
83
- base: string;
84
- md: string;
85
- };
86
168
  maxWidth: string;
87
169
  textAlign: string;
88
170
  alignItems: string;
89
171
  border?: undefined;
90
172
  borderColor?: undefined;
91
173
  _dark?: undefined;
174
+ flexFlow: string;
92
175
  } | {
93
176
  display: string;
94
- flexFlow: string;
95
177
  maxWidth?: undefined;
96
178
  textAlign: string;
97
179
  alignItems: string;
98
180
  border?: undefined;
99
181
  borderColor?: undefined;
100
182
  _dark?: undefined;
183
+ flexFlow: string;
101
184
  };
102
185
  actions: {
103
- flexShrink: {
104
- base: string;
105
- md: string;
106
- };
107
- marginStart: {
108
- base: string;
109
- md: string;
110
- };
111
- marginTop: {
112
- base: string;
113
- md: string;
114
- };
115
- maxWidth: {
116
- base: string;
117
- md: string;
118
- };
119
186
  width: string;
120
187
  };
121
188
  body: {
122
- display: {
123
- md: "block";
124
- };
125
- flexBasis: {
126
- sm: string;
127
- };
128
- flexFlow: {
129
- md: "row nowrap";
130
- };
131
189
  margin: any;
132
190
  padding: any;
133
- width: {
134
- base: "100%";
135
- md: "auto";
136
- };
137
191
  };
138
192
  heading: {
139
193
  marginBottom: string;
@@ -273,56 +327,32 @@ declare const _default: {
273
327
  };
274
328
  };
275
329
  CardImage: {
276
- baseStyle?: ({ imageIsAtEnd, isCentered, layout, size }: CardImageBaseStyleProps) => {
277
- flex: {
278
- md: string;
279
- };
280
- maxWidth: {
281
- base: string;
282
- md: string;
283
- };
330
+ baseStyle?: ({ imageIsAtEnd, isCentered, layout }: CardImageBaseStyleProps) => {
284
331
  textAlign: string;
285
332
  alignItems: string;
286
- margin: {
287
- base: string;
288
- md: string;
289
- };
290
- width: {
291
- base: string;
292
- md: any;
293
- };
294
333
  marginBottom: string[];
334
+ width?: undefined;
295
335
  marginTop: string;
296
336
  order: string;
297
337
  } | {
298
338
  marginBottom: string;
299
339
  width: string;
340
+ textAlign?: undefined;
341
+ alignItems?: undefined;
300
342
  marginTop: string;
301
343
  order: string;
302
344
  } | {
303
- flex: {
304
- md: string;
305
- };
306
- maxWidth: {
307
- base: string;
308
- md: string;
309
- };
310
345
  textAlign: string;
311
346
  alignItems: string;
312
- margin: {
313
- base: string;
314
- md: string;
315
- };
316
- width: {
317
- base: string;
318
- md: any;
319
- };
320
347
  marginBottom: string[];
348
+ width?: undefined;
321
349
  marginTop?: undefined;
322
350
  order?: undefined;
323
351
  } | {
324
352
  marginBottom: string;
325
353
  width: string;
354
+ textAlign?: undefined;
355
+ alignItems?: undefined;
326
356
  marginTop?: undefined;
327
357
  order?: undefined;
328
358
  };
package/dist/src/theme/components/featuredContent.d.ts CHANGED
@@ -7,6 +7,59 @@ interface FeaturedContentBaseStyleProps extends StyleFunctionProps {
7
7
  declare const FeaturedContent: {
8
8
  baseStyle?: ({ imagePosition, imageWidth, isFullWidth, }: FeaturedContentBaseStyleProps) => {
9
9
  base: {
10
+ [x: string]: string | {
11
+ clip: string;
12
+ height: {
13
+ base: string;
14
+ md: string;
15
+ };
16
+ overflow: string;
17
+ position: {
18
+ base: string;
19
+ md: string;
20
+ };
21
+ width: {
22
+ base: string;
23
+ md: string;
24
+ };
25
+ wordWrap: string;
26
+ } | {
27
+ bgColor: string;
28
+ "[data-wrapper]"?: undefined;
29
+ "[data-image]"?: undefined;
30
+ "[data-text]"?: undefined;
31
+ } | {
32
+ "[data-wrapper]": {
33
+ flexDirection: string;
34
+ paddingLeft?: undefined;
35
+ paddingRight?: undefined;
36
+ };
37
+ "[data-image]": {
38
+ height: string;
39
+ width: string;
40
+ };
41
+ bgColor?: undefined;
42
+ "[data-text]"?: undefined;
43
+ } | {
44
+ "[data-wrapper]": {
45
+ flexDirection: string;
46
+ paddingLeft: string;
47
+ paddingRight: string;
48
+ };
49
+ "[data-image]": {
50
+ height: string;
51
+ width: string;
52
+ };
53
+ "[data-text]": {
54
+ /** The `paddingLeft` attribute is used to adjust the spacing around the
55
+ * text when the image is positioned at the end. For aesthetic reasons,
56
+ * we opted to not adjust the spacing around the text when the image is
57
+ * positioned at the start.
58
+ * */
59
+ paddingStart: number;
60
+ };
61
+ bgColor?: undefined;
62
+ };
10
63
  bgColor: string;
11
64
  left: string;
12
65
  marginLeft: string;
@@ -34,27 +87,22 @@ declare const FeaturedContent: {
34
87
  };
35
88
  wordWrap: string;
36
89
  };
90
+ containerType: string;
91
+ "@container (min-width: 0px)": {
92
+ "[data-wrapper]": {
93
+ flexDirection: string;
94
+ };
95
+ "[data-image]": {
96
+ height: string;
97
+ width: string;
98
+ };
99
+ };
37
100
  };
38
101
  wrapper: {
39
102
  alignItems: string;
40
103
  display: string;
41
- flexDirection: {
42
- base: "column-reverse";
43
- md: "row-reverse";
44
- } | {
45
- base: "column";
46
- md: "row";
47
- };
48
104
  maxWidth: string;
49
105
  minHeight: string;
50
- paddingLeft: {
51
- base: any;
52
- md: "s";
53
- };
54
- paddingRight: {
55
- base: any;
56
- md: "s";
57
- };
58
106
  marginY: string;
59
107
  marginX: string;
60
108
  padding: string;
@@ -66,27 +114,10 @@ declare const FeaturedContent: {
66
114
  flexDirection: string;
67
115
  justifyContent: string;
68
116
  padding: string;
69
- /** The `paddingLeft` attribute is used to adjust the spacing around the
70
- * text when the image is positioned at the end. For aesthetic reasons,
71
- * we opted to not adjust the spacing around the text when the image is
72
- * positioned at the start.
73
- * */
74
- paddingStart: {
75
- base: any;
76
- md: number;
77
- };
78
117
  };
79
118
  imgWrapper: {
80
119
  backgroundPosition: string;
81
120
  backgroundSize: string;
82
- height: {
83
- base: "320px";
84
- md: "auto";
85
- };
86
- width: {
87
- base: "100%";
88
- md: string;
89
- };
90
121
  };
91
122
  };
92
123
  sizes?: {
package/dist/src/theme/components/heading.d.ts CHANGED
@@ -162,9 +162,9 @@ export declare const headings: {
162
162
  };
163
163
  };
164
164
  declare const Heading: {
165
- baseStyle?: ({ isCapitalized, isUppercase, isLowercase, noSpace, url }: import("@chakra-ui/styled-system").StyleFunctionProps) => {
165
+ baseStyle?: ({ isCapitalized, isUppercase, isLowercase, noSpace }: import("@chakra-ui/styled-system").StyleFunctionProps) => {
166
166
  base: {
167
- a: {
167
+ "a:only-child": {
168
168
  textDecoration: string;
169
169
  _dark: {
170
170
  color: string;
package/dist/src/theme/components/searchBar.d.ts CHANGED
@@ -1,32 +1,111 @@
1
1
  declare const SearchBar: {
2
2
  baseStyle?: {
3
- display: string;
4
- marginBottom: {
5
- base: string;
6
- md: string;
3
+ [x: string]: string | {
4
+ "&": {
5
+ marginBottom: string;
6
+ flexFlow: string;
7
+ };
8
+ " > select": {
9
+ marginBottom: string;
10
+ maxWidth?: undefined;
11
+ marginRight?: undefined;
12
+ };
13
+ "[data-button]": {
14
+ borderRightRadius: string;
15
+ maxWidth: string;
16
+ };
17
+ flexGrow?: undefined;
18
+ borderLeftRadius?: undefined;
19
+ lineHeight?: undefined;
20
+ marginBottom?: undefined;
21
+ flexShrink?: undefined;
22
+ textOverflow?: undefined;
23
+ _hover?: undefined;
24
+ } | {
25
+ "&": {
26
+ marginBottom: string;
27
+ flexFlow: string;
28
+ };
29
+ " > select": {
30
+ marginBottom: string;
31
+ maxWidth: string;
32
+ marginRight: string;
33
+ };
34
+ "[data-button]": {
35
+ borderRightRadius: string;
36
+ maxWidth: string;
37
+ };
38
+ flexGrow?: undefined;
39
+ borderLeftRadius?: undefined;
40
+ lineHeight?: undefined;
41
+ marginBottom?: undefined;
42
+ flexShrink?: undefined;
43
+ textOverflow?: undefined;
44
+ _hover?: undefined;
45
+ } | {
46
+ flexGrow: string;
47
+ "&"?: undefined;
48
+ " > select"?: undefined;
49
+ "[data-button]"?: undefined;
50
+ borderLeftRadius?: undefined;
51
+ lineHeight?: undefined;
52
+ marginBottom?: undefined;
53
+ flexShrink?: undefined;
54
+ textOverflow?: undefined;
55
+ _hover?: undefined;
56
+ } | {
57
+ borderLeftRadius: string;
58
+ lineHeight: string;
59
+ marginBottom: string;
60
+ "&"?: undefined;
61
+ " > select"?: undefined;
62
+ "[data-button]"?: undefined;
63
+ flexGrow?: undefined;
64
+ flexShrink?: undefined;
65
+ textOverflow?: undefined;
66
+ _hover?: undefined;
67
+ } | {
68
+ flexShrink: string;
69
+ textOverflow: string;
70
+ _hover: {
71
+ zIndex: string;
72
+ "+ .chakra-select__icon-wrapper": {
73
+ zIndex: string;
74
+ };
75
+ };
76
+ "&"?: undefined;
77
+ " > select"?: undefined;
78
+ "[data-button]"?: undefined;
79
+ flexGrow?: undefined;
80
+ borderLeftRadius?: undefined;
81
+ lineHeight?: undefined;
82
+ marginBottom?: undefined;
7
83
  };
8
- flexFlow: {
9
- base: string;
10
- md: string;
84
+ display: string;
85
+ "@container (min-width: 0px)": {
86
+ "&": {
87
+ marginBottom: string;
88
+ flexFlow: string;
89
+ };
90
+ " > select": {
91
+ marginBottom: string;
92
+ };
93
+ "[data-button]": {
94
+ borderRightRadius: string;
95
+ maxWidth: string;
96
+ };
11
97
  };
12
98
  ".textInput": {
13
99
  flexGrow: string;
14
100
  };
101
+ button: {
102
+ borderLeftRadius: string;
103
+ lineHeight: string;
104
+ marginBottom: string;
105
+ };
15
106
  select: {
16
107
  flexShrink: string;
17
- marginBottom: {
18
- base: "-1px";
19
- md: "0";
20
- };
21
- maxWidth: {
22
- base: any;
23
- md: "255px";
24
- };
25
108
  textOverflow: string;
26
- marginRight: {
27
- base: any;
28
- md: "-1px";
29
- };
30
109
  _hover: {
31
110
  zIndex: string;
32
111
  "+ .chakra-select__icon-wrapper": {
@@ -37,12 +116,12 @@ declare const SearchBar: {
37
116
  };
38
117
  sizes?: {
39
118
  [key: string]: import("@chakra-ui/styled-system").PartsStyleInterpolation<{
40
- keys: "select"[];
119
+ keys: ("select" | "button")[];
41
120
  }>;
42
121
  };
43
122
  variants?: {
44
123
  [key: string]: import("@chakra-ui/styled-system").PartsStyleInterpolation<{
45
- keys: "select"[];
124
+ keys: ("select" | "button")[];
46
125
  }>;
47
126
  };
48
127
  defaultProps?: {
@@ -50,6 +129,6 @@ declare const SearchBar: {
50
129
  variant?: string | number;
51
130
  colorScheme?: string;
52
131
  };
53
- parts: "select"[];
132
+ parts: ("select" | "button")[];
54
133
  };
55
134
  export default SearchBar;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nypl/design-system-react-components",
3
- "version": "3.1.5",
3
+ "version": "3.1.6-container-queries-rc",
4
4
  "description": "NYPL Reservoir Design System React Components",
5
5
  "repository": {
6
6
  "type": "git",