@cloudflare/component-button 3.2.8 → 5.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/CHANGELOG.md +1026 -3173
  2. package/dist/Button.d.ts +45 -39
  3. package/dist/ButtonGroup.d.ts +44 -38
  4. package/dist/TextButton.d.ts +51 -45
  5. package/dist/UnstyledButton.d.ts +51 -45
  6. package/es/Button.js +68 -64
  7. package/es/ButtonGroup.js +23 -19
  8. package/es/IconTextButton.js +21 -18
  9. package/es/TextButton.js +32 -29
  10. package/es/UnstyledButton.js +1 -1
  11. package/lib/Button.js +7 -5
  12. package/lib/index.js +11 -11
  13. package/package.json +9 -8
package/dist/UnstyledButton.d.ts CHANGED
@@ -30,11 +30,11 @@ declare const UnstyledButton: import("react").ComponentType<{
30
30
  'aria-colindex'?: number | undefined;
31
31
  'aria-colspan'?: number | undefined;
32
32
  'aria-controls'?: string | undefined;
33
- 'aria-current'?: boolean | "time" | "true" | "false" | "step" | "location" | "page" | "date" | undefined;
33
+ 'aria-current'?: boolean | "time" | "true" | "false" | "step" | "page" | "location" | "date" | undefined;
34
34
  'aria-describedby'?: string | undefined;
35
35
  'aria-details'?: string | undefined;
36
36
  'aria-disabled'?: boolean | "true" | "false" | undefined;
37
- 'aria-dropeffect'?: "link" | "none" | "execute" | "copy" | "move" | "popup" | undefined;
37
+ 'aria-dropeffect'?: "link" | "none" | "copy" | "move" | "execute" | "popup" | undefined;
38
38
  'aria-errormessage'?: string | undefined;
39
39
  'aria-expanded'?: boolean | "true" | "false" | undefined;
40
40
  'aria-flowto'?: string | undefined;
@@ -64,7 +64,7 @@ declare const UnstyledButton: import("react").ComponentType<{
64
64
  'aria-rowspan'?: number | undefined;
65
65
  'aria-selected'?: boolean | "true" | "false" | undefined;
66
66
  'aria-setsize'?: number | undefined;
67
- 'aria-sort'?: "none" | "other" | "ascending" | "descending" | undefined;
67
+ 'aria-sort'?: "none" | "ascending" | "descending" | "other" | undefined;
68
68
  'aria-valuemax'?: number | undefined;
69
69
  'aria-valuemin'?: number | undefined;
70
70
  'aria-valuenow'?: number | undefined;
@@ -228,9 +228,8 @@ declare const UnstyledButton: import("react").ComponentType<{
228
228
  onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
229
229
  dir?: string | undefined;
230
230
  is?: string | undefined;
231
- value?: string | number | readonly string[] | undefined;
232
231
  disabled?: boolean | undefined;
233
- translate?: "no" | "yes" | undefined;
232
+ value?: string | number | readonly string[] | undefined;
234
233
  defaultChecked?: boolean | undefined;
235
234
  defaultValue?: string | number | readonly string[] | undefined;
236
235
  suppressContentEditableWarning?: boolean | undefined;
@@ -240,7 +239,7 @@ declare const UnstyledButton: import("react").ComponentType<{
240
239
  contextMenu?: string | undefined;
241
240
  placeholder?: string | undefined;
242
241
  spellCheck?: (boolean | "true" | "false") | undefined;
243
- inputMode?: "search" | "text" | "none" | "email" | "url" | "tel" | "numeric" | "decimal" | undefined;
242
+ inputMode?: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
244
243
  radioGroup?: string | undefined;
245
244
  about?: string | undefined;
246
245
  datatype?: string | undefined;
@@ -260,7 +259,7 @@ declare const UnstyledButton: import("react").ComponentType<{
260
259
  itemRef?: string | undefined;
261
260
  results?: number | undefined;
262
261
  security?: string | undefined;
263
- unselectable?: "off" | "on" | undefined;
262
+ unselectable?: "on" | "off" | undefined;
264
263
  autoFocus?: boolean | undefined;
265
264
  formAction?: string | undefined;
266
265
  formEncType?: string | undefined;
@@ -268,6 +267,7 @@ declare const UnstyledButton: import("react").ComponentType<{
268
267
  formNoValidate?: boolean | undefined;
269
268
  formTarget?: string | undefined;
270
269
  hidden?: boolean | undefined;
270
+ translate?: "no" | "yes" | undefined;
271
271
  p?: import("csstype").PaddingProperty<string | number> | [import("csstype").PaddingProperty<string | number> | undefined, import("csstype").PaddingProperty<string | number> | undefined] | [import("csstype").PaddingProperty<string | number> | undefined, import("csstype").PaddingProperty<string | number> | undefined, import("csstype").PaddingProperty<string | number> | undefined] | undefined;
272
272
  height?: import("csstype").HeightProperty<string | number> | [import("csstype").HeightProperty<string | number> | undefined, import("csstype").HeightProperty<string | number> | undefined] | [import("csstype").HeightProperty<string | number> | undefined, import("csstype").HeightProperty<string | number> | undefined, import("csstype").HeightProperty<string | number> | undefined] | undefined;
273
273
  width?: import("csstype").WidthProperty<string | number> | [import("csstype").WidthProperty<string | number> | undefined, import("csstype").WidthProperty<string | number> | undefined] | [import("csstype").WidthProperty<string | number> | undefined, import("csstype").WidthProperty<string | number> | undefined, import("csstype").WidthProperty<string | number> | undefined] | undefined;
@@ -276,50 +276,17 @@ declare const UnstyledButton: import("react").ComponentType<{
276
276
  fontSize?: import("csstype").FontSizeProperty<string | number> | [import("csstype").FontSizeProperty<string | number> | undefined, import("csstype").FontSizeProperty<string | number> | undefined] | [import("csstype").FontSizeProperty<string | number> | undefined, import("csstype").FontSizeProperty<string | number> | undefined, import("csstype").FontSizeProperty<string | number> | undefined] | undefined;
277
277
  fontWeight?: import("csstype").FontWeightProperty | [import("csstype").FontWeightProperty | undefined, import("csstype").FontWeightProperty | undefined] | [import("csstype").FontWeightProperty | undefined, import("csstype").FontWeightProperty | undefined, import("csstype").FontWeightProperty | undefined] | undefined;
278
278
  textDecoration?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
279
- textAlign?: import("csstype").TextAlignProperty | [import("csstype").TextAlignProperty | undefined, import("csstype").TextAlignProperty | undefined] | [import("csstype").TextAlignProperty | undefined, import("csstype").TextAlignProperty | undefined, import("csstype").TextAlignProperty | undefined] | undefined;
280
- backgroundColor?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
281
279
  borderColor?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
282
- borderLeftColor?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
283
- borderRightColor?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
284
- borderTopColor?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
285
- borderBottomColor?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
286
- minWidth?: import("csstype").MinWidthProperty<string | number> | [import("csstype").MinWidthProperty<string | number> | undefined, import("csstype").MinWidthProperty<string | number> | undefined] | [import("csstype").MinWidthProperty<string | number> | undefined, import("csstype").MinWidthProperty<string | number> | undefined, import("csstype").MinWidthProperty<string | number> | undefined] | undefined;
287
- minHeight?: import("csstype").MinHeightProperty<string | number> | [import("csstype").MinHeightProperty<string | number> | undefined, import("csstype").MinHeightProperty<string | number> | undefined] | [import("csstype").MinHeightProperty<string | number> | undefined, import("csstype").MinHeightProperty<string | number> | undefined, import("csstype").MinHeightProperty<string | number> | undefined] | undefined;
288
- maxWidth?: import("csstype").MaxWidthProperty<string | number> | [import("csstype").MaxWidthProperty<string | number> | undefined, import("csstype").MaxWidthProperty<string | number> | undefined] | [import("csstype").MaxWidthProperty<string | number> | undefined, import("csstype").MaxWidthProperty<string | number> | undefined, import("csstype").MaxWidthProperty<string | number> | undefined] | undefined;
289
- maxHeight?: import("csstype").MaxHeightProperty<string | number> | [import("csstype").MaxHeightProperty<string | number> | undefined, import("csstype").MaxHeightProperty<string | number> | undefined] | [import("csstype").MaxHeightProperty<string | number> | undefined, import("csstype").MaxHeightProperty<string | number> | undefined, import("csstype").MaxHeightProperty<string | number> | undefined] | undefined;
290
280
  margin?: import("csstype").MarginProperty<string | number> | [import("csstype").MarginProperty<string | number> | undefined, import("csstype").MarginProperty<string | number> | undefined] | [import("csstype").MarginProperty<string | number> | undefined, import("csstype").MarginProperty<string | number> | undefined, import("csstype").MarginProperty<string | number> | undefined] | undefined;
291
- marginTop?: import("csstype").MarginTopProperty<string | number> | [import("csstype").MarginTopProperty<string | number> | undefined, import("csstype").MarginTopProperty<string | number> | undefined] | [import("csstype").MarginTopProperty<string | number> | undefined, import("csstype").MarginTopProperty<string | number> | undefined, import("csstype").MarginTopProperty<string | number> | undefined] | undefined;
292
- marginRight?: import("csstype").MarginRightProperty<string | number> | [import("csstype").MarginRightProperty<string | number> | undefined, import("csstype").MarginRightProperty<string | number> | undefined] | [import("csstype").MarginRightProperty<string | number> | undefined, import("csstype").MarginRightProperty<string | number> | undefined, import("csstype").MarginRightProperty<string | number> | undefined] | undefined;
293
281
  marginLeft?: import("csstype").MarginLeftProperty<string | number> | [import("csstype").MarginLeftProperty<string | number> | undefined, import("csstype").MarginLeftProperty<string | number> | undefined] | [import("csstype").MarginLeftProperty<string | number> | undefined, import("csstype").MarginLeftProperty<string | number> | undefined, import("csstype").MarginLeftProperty<string | number> | undefined] | undefined;
282
+ marginRight?: import("csstype").MarginRightProperty<string | number> | [import("csstype").MarginRightProperty<string | number> | undefined, import("csstype").MarginRightProperty<string | number> | undefined] | [import("csstype").MarginRightProperty<string | number> | undefined, import("csstype").MarginRightProperty<string | number> | undefined, import("csstype").MarginRightProperty<string | number> | undefined] | undefined;
283
+ marginTop?: import("csstype").MarginTopProperty<string | number> | [import("csstype").MarginTopProperty<string | number> | undefined, import("csstype").MarginTopProperty<string | number> | undefined] | [import("csstype").MarginTopProperty<string | number> | undefined, import("csstype").MarginTopProperty<string | number> | undefined, import("csstype").MarginTopProperty<string | number> | undefined] | undefined;
284
+ marginBottom?: import("csstype").MarginBottomProperty<string | number> | [import("csstype").MarginBottomProperty<string | number> | undefined, import("csstype").MarginBottomProperty<string | number> | undefined] | [import("csstype").MarginBottomProperty<string | number> | undefined, import("csstype").MarginBottomProperty<string | number> | undefined, import("csstype").MarginBottomProperty<string | number> | undefined] | undefined;
294
285
  padding?: import("csstype").PaddingProperty<string | number> | [import("csstype").PaddingProperty<string | number> | undefined, import("csstype").PaddingProperty<string | number> | undefined] | [import("csstype").PaddingProperty<string | number> | undefined, import("csstype").PaddingProperty<string | number> | undefined, import("csstype").PaddingProperty<string | number> | undefined] | undefined;
295
- paddingTop?: import("csstype").PaddingTopProperty<string | number> | [import("csstype").PaddingTopProperty<string | number> | undefined, import("csstype").PaddingTopProperty<string | number> | undefined] | [import("csstype").PaddingTopProperty<string | number> | undefined, import("csstype").PaddingTopProperty<string | number> | undefined, import("csstype").PaddingTopProperty<string | number> | undefined] | undefined;
296
- paddingRight?: import("csstype").PaddingRightProperty<string | number> | [import("csstype").PaddingRightProperty<string | number> | undefined, import("csstype").PaddingRightProperty<string | number> | undefined] | [import("csstype").PaddingRightProperty<string | number> | undefined, import("csstype").PaddingRightProperty<string | number> | undefined, import("csstype").PaddingRightProperty<string | number> | undefined] | undefined;
297
286
  paddingLeft?: import("csstype").PaddingLeftProperty<string | number> | [import("csstype").PaddingLeftProperty<string | number> | undefined, import("csstype").PaddingLeftProperty<string | number> | undefined] | [import("csstype").PaddingLeftProperty<string | number> | undefined, import("csstype").PaddingLeftProperty<string | number> | undefined, import("csstype").PaddingLeftProperty<string | number> | undefined] | undefined;
298
- borderRadius?: import("csstype").BorderRadiusProperty<string | number> | [import("csstype").BorderRadiusProperty<string | number> | undefined, import("csstype").BorderRadiusProperty<string | number> | undefined] | [import("csstype").BorderRadiusProperty<string | number> | undefined, import("csstype").BorderRadiusProperty<string | number> | undefined, import("csstype").BorderRadiusProperty<string | number> | undefined] | undefined;
299
- verticalAlign?: import("csstype").VerticalAlignProperty<string | number> | [import("csstype").VerticalAlignProperty<string | number> | undefined, import("csstype").VerticalAlignProperty<string | number> | undefined] | [import("csstype").VerticalAlignProperty<string | number> | undefined, import("csstype").VerticalAlignProperty<string | number> | undefined, import("csstype").VerticalAlignProperty<string | number> | undefined] | undefined;
300
- alignItems?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
301
- alignSelf?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
302
- borderBottomLeftRadius?: import("csstype").BorderBottomLeftRadiusProperty<string | number> | [import("csstype").BorderBottomLeftRadiusProperty<string | number> | undefined, import("csstype").BorderBottomLeftRadiusProperty<string | number> | undefined] | [import("csstype").BorderBottomLeftRadiusProperty<string | number> | undefined, import("csstype").BorderBottomLeftRadiusProperty<string | number> | undefined, import("csstype").BorderBottomLeftRadiusProperty<string | number> | undefined] | undefined;
303
- borderBottomStyle?: import("csstype").BorderBottomStyleProperty | [import("csstype").BorderBottomStyleProperty | undefined, import("csstype").BorderBottomStyleProperty | undefined] | [import("csstype").BorderBottomStyleProperty | undefined, import("csstype").BorderBottomStyleProperty | undefined, import("csstype").BorderBottomStyleProperty | undefined] | undefined;
304
- borderBottomWidth?: import("csstype").BorderBottomWidthProperty<string | number> | [import("csstype").BorderBottomWidthProperty<string | number> | undefined, import("csstype").BorderBottomWidthProperty<string | number> | undefined] | [import("csstype").BorderBottomWidthProperty<string | number> | undefined, import("csstype").BorderBottomWidthProperty<string | number> | undefined, import("csstype").BorderBottomWidthProperty<string | number> | undefined] | undefined;
305
- borderLeftStyle?: import("csstype").BorderLeftStyleProperty | [import("csstype").BorderLeftStyleProperty | undefined, import("csstype").BorderLeftStyleProperty | undefined] | [import("csstype").BorderLeftStyleProperty | undefined, import("csstype").BorderLeftStyleProperty | undefined, import("csstype").BorderLeftStyleProperty | undefined] | undefined;
306
- borderLeftWidth?: import("csstype").BorderLeftWidthProperty<string | number> | [import("csstype").BorderLeftWidthProperty<string | number> | undefined, import("csstype").BorderLeftWidthProperty<string | number> | undefined] | [import("csstype").BorderLeftWidthProperty<string | number> | undefined, import("csstype").BorderLeftWidthProperty<string | number> | undefined, import("csstype").BorderLeftWidthProperty<string | number> | undefined] | undefined;
307
- borderRightStyle?: import("csstype").BorderRightStyleProperty | [import("csstype").BorderRightStyleProperty | undefined, import("csstype").BorderRightStyleProperty | undefined] | [import("csstype").BorderRightStyleProperty | undefined, import("csstype").BorderRightStyleProperty | undefined, import("csstype").BorderRightStyleProperty | undefined] | undefined;
308
- borderRightWidth?: import("csstype").BorderRightWidthProperty<string | number> | [import("csstype").BorderRightWidthProperty<string | number> | undefined, import("csstype").BorderRightWidthProperty<string | number> | undefined] | [import("csstype").BorderRightWidthProperty<string | number> | undefined, import("csstype").BorderRightWidthProperty<string | number> | undefined, import("csstype").BorderRightWidthProperty<string | number> | undefined] | undefined;
309
- borderTopLeftRadius?: import("csstype").BorderTopLeftRadiusProperty<string | number> | [import("csstype").BorderTopLeftRadiusProperty<string | number> | undefined, import("csstype").BorderTopLeftRadiusProperty<string | number> | undefined] | [import("csstype").BorderTopLeftRadiusProperty<string | number> | undefined, import("csstype").BorderTopLeftRadiusProperty<string | number> | undefined, import("csstype").BorderTopLeftRadiusProperty<string | number> | undefined] | undefined;
310
- borderTopRightRadius?: import("csstype").BorderTopRightRadiusProperty<string | number> | [import("csstype").BorderTopRightRadiusProperty<string | number> | undefined, import("csstype").BorderTopRightRadiusProperty<string | number> | undefined] | [import("csstype").BorderTopRightRadiusProperty<string | number> | undefined, import("csstype").BorderTopRightRadiusProperty<string | number> | undefined, import("csstype").BorderTopRightRadiusProperty<string | number> | undefined] | undefined;
311
- borderTopStyle?: import("csstype").BorderTopStyleProperty | [import("csstype").BorderTopStyleProperty | undefined, import("csstype").BorderTopStyleProperty | undefined] | [import("csstype").BorderTopStyleProperty | undefined, import("csstype").BorderTopStyleProperty | undefined, import("csstype").BorderTopStyleProperty | undefined] | undefined;
312
- borderTopWidth?: import("csstype").BorderTopWidthProperty<string | number> | [import("csstype").BorderTopWidthProperty<string | number> | undefined, import("csstype").BorderTopWidthProperty<string | number> | undefined] | [import("csstype").BorderTopWidthProperty<string | number> | undefined, import("csstype").BorderTopWidthProperty<string | number> | undefined, import("csstype").BorderTopWidthProperty<string | number> | undefined] | undefined;
313
- boxSizing?: import("csstype").BoxSizingProperty | [import("csstype").BoxSizingProperty | undefined, import("csstype").BoxSizingProperty | undefined] | [import("csstype").BoxSizingProperty | undefined, import("csstype").BoxSizingProperty | undefined, import("csstype").BoxSizingProperty | undefined] | undefined;
314
- flexBasis?: import("csstype").FlexBasisProperty<string | number> | [import("csstype").FlexBasisProperty<string | number> | undefined, import("csstype").FlexBasisProperty<string | number> | undefined] | [import("csstype").FlexBasisProperty<string | number> | undefined, import("csstype").FlexBasisProperty<string | number> | undefined, import("csstype").FlexBasisProperty<string | number> | undefined] | undefined;
315
- flexDirection?: import("csstype").FlexDirectionProperty | [import("csstype").FlexDirectionProperty | undefined, import("csstype").FlexDirectionProperty | undefined] | [import("csstype").FlexDirectionProperty | undefined, import("csstype").FlexDirectionProperty | undefined, import("csstype").FlexDirectionProperty | undefined] | undefined;
316
- flexGrow?: import("csstype").GlobalsNumber | [import("csstype").GlobalsNumber | undefined, import("csstype").GlobalsNumber | undefined] | [import("csstype").GlobalsNumber | undefined, import("csstype").GlobalsNumber | undefined, import("csstype").GlobalsNumber | undefined] | undefined;
317
- justifyContent?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
318
- marginBottom?: import("csstype").MarginBottomProperty<string | number> | [import("csstype").MarginBottomProperty<string | number> | undefined, import("csstype").MarginBottomProperty<string | number> | undefined] | [import("csstype").MarginBottomProperty<string | number> | undefined, import("csstype").MarginBottomProperty<string | number> | undefined, import("csstype").MarginBottomProperty<string | number> | undefined] | undefined;
287
+ paddingRight?: import("csstype").PaddingRightProperty<string | number> | [import("csstype").PaddingRightProperty<string | number> | undefined, import("csstype").PaddingRightProperty<string | number> | undefined] | [import("csstype").PaddingRightProperty<string | number> | undefined, import("csstype").PaddingRightProperty<string | number> | undefined, import("csstype").PaddingRightProperty<string | number> | undefined] | undefined;
288
+ paddingTop?: import("csstype").PaddingTopProperty<string | number> | [import("csstype").PaddingTopProperty<string | number> | undefined, import("csstype").PaddingTopProperty<string | number> | undefined] | [import("csstype").PaddingTopProperty<string | number> | undefined, import("csstype").PaddingTopProperty<string | number> | undefined, import("csstype").PaddingTopProperty<string | number> | undefined] | undefined;
319
289
  paddingBottom?: import("csstype").PaddingBottomProperty<string | number> | [import("csstype").PaddingBottomProperty<string | number> | undefined, import("csstype").PaddingBottomProperty<string | number> | undefined] | [import("csstype").PaddingBottomProperty<string | number> | undefined, import("csstype").PaddingBottomProperty<string | number> | undefined, import("csstype").PaddingBottomProperty<string | number> | undefined] | undefined;
320
- textTransform?: import("csstype").TextTransformProperty | [import("csstype").TextTransformProperty | undefined, import("csstype").TextTransformProperty | undefined] | [import("csstype").TextTransformProperty | undefined, import("csstype").TextTransformProperty | undefined, import("csstype").TextTransformProperty | undefined] | undefined;
321
- borderStyle?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
322
- borderWidth?: import("csstype").BorderWidthProperty<string | number> | [import("csstype").BorderWidthProperty<string | number> | undefined, import("csstype").BorderWidthProperty<string | number> | undefined] | [import("csstype").BorderWidthProperty<string | number> | undefined, import("csstype").BorderWidthProperty<string | number> | undefined, import("csstype").BorderWidthProperty<string | number> | undefined] | undefined;
323
290
  gap?: import("csstype").GapProperty<string | number> | [import("csstype").GapProperty<string | number> | undefined, import("csstype").GapProperty<string | number> | undefined] | [import("csstype").GapProperty<string | number> | undefined, import("csstype").GapProperty<string | number> | undefined, import("csstype").GapProperty<string | number> | undefined] | undefined;
324
291
  m?: import("csstype").MarginProperty<string | number> | [import("csstype").MarginProperty<string | number> | undefined, import("csstype").MarginProperty<string | number> | undefined] | [import("csstype").MarginProperty<string | number> | undefined, import("csstype").MarginProperty<string | number> | undefined, import("csstype").MarginProperty<string | number> | undefined] | undefined;
325
292
  ml?: import("csstype").MarginLeftProperty<string | number> | [import("csstype").MarginLeftProperty<string | number> | undefined, import("csstype").MarginLeftProperty<string | number> | undefined] | [import("csstype").MarginLeftProperty<string | number> | undefined, import("csstype").MarginLeftProperty<string | number> | undefined, import("csstype").MarginLeftProperty<string | number> | undefined] | undefined;
@@ -334,7 +301,46 @@ declare const UnstyledButton: import("react").ComponentType<{
334
301
  pb?: import("csstype").PaddingBottomProperty<string | number> | [import("csstype").PaddingBottomProperty<string | number> | undefined, import("csstype").PaddingBottomProperty<string | number> | undefined] | [import("csstype").PaddingBottomProperty<string | number> | undefined, import("csstype").PaddingBottomProperty<string | number> | undefined, import("csstype").PaddingBottomProperty<string | number> | undefined] | undefined;
335
302
  px?: import("csstype").PaddingLeftProperty<string | number> | [import("csstype").PaddingLeftProperty<string | number> | undefined, import("csstype").PaddingLeftProperty<string | number> | undefined] | [import("csstype").PaddingLeftProperty<string | number> | undefined, import("csstype").PaddingLeftProperty<string | number> | undefined, import("csstype").PaddingLeftProperty<string | number> | undefined] | undefined;
336
303
  py?: import("csstype").PaddingTopProperty<string | number> | [import("csstype").PaddingTopProperty<string | number> | undefined, import("csstype").PaddingTopProperty<string | number> | undefined] | [import("csstype").PaddingTopProperty<string | number> | undefined, import("csstype").PaddingTopProperty<string | number> | undefined, import("csstype").PaddingTopProperty<string | number> | undefined] | undefined;
304
+ minWidth?: import("csstype").MinWidthProperty<string | number> | [import("csstype").MinWidthProperty<string | number> | undefined, import("csstype").MinWidthProperty<string | number> | undefined] | [import("csstype").MinWidthProperty<string | number> | undefined, import("csstype").MinWidthProperty<string | number> | undefined, import("csstype").MinWidthProperty<string | number> | undefined] | undefined;
305
+ minHeight?: import("csstype").MinHeightProperty<string | number> | [import("csstype").MinHeightProperty<string | number> | undefined, import("csstype").MinHeightProperty<string | number> | undefined] | [import("csstype").MinHeightProperty<string | number> | undefined, import("csstype").MinHeightProperty<string | number> | undefined, import("csstype").MinHeightProperty<string | number> | undefined] | undefined;
306
+ maxWidth?: import("csstype").MaxWidthProperty<string | number> | [import("csstype").MaxWidthProperty<string | number> | undefined, import("csstype").MaxWidthProperty<string | number> | undefined] | [import("csstype").MaxWidthProperty<string | number> | undefined, import("csstype").MaxWidthProperty<string | number> | undefined, import("csstype").MaxWidthProperty<string | number> | undefined] | undefined;
307
+ maxHeight?: import("csstype").MaxHeightProperty<string | number> | [import("csstype").MaxHeightProperty<string | number> | undefined, import("csstype").MaxHeightProperty<string | number> | undefined] | [import("csstype").MaxHeightProperty<string | number> | undefined, import("csstype").MaxHeightProperty<string | number> | undefined, import("csstype").MaxHeightProperty<string | number> | undefined] | undefined;
308
+ backgroundColor?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
309
+ borderLeftColor?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
310
+ borderRightColor?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
311
+ borderTopColor?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
312
+ borderBottomColor?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
313
+ borderStyle?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
314
+ borderTopStyle?: import("csstype").BorderTopStyleProperty | [import("csstype").BorderTopStyleProperty | undefined, import("csstype").BorderTopStyleProperty | undefined] | [import("csstype").BorderTopStyleProperty | undefined, import("csstype").BorderTopStyleProperty | undefined, import("csstype").BorderTopStyleProperty | undefined] | undefined;
315
+ borderBottomStyle?: import("csstype").BorderBottomStyleProperty | [import("csstype").BorderBottomStyleProperty | undefined, import("csstype").BorderBottomStyleProperty | undefined] | [import("csstype").BorderBottomStyleProperty | undefined, import("csstype").BorderBottomStyleProperty | undefined, import("csstype").BorderBottomStyleProperty | undefined] | undefined;
316
+ borderLeftStyle?: import("csstype").BorderLeftStyleProperty | [import("csstype").BorderLeftStyleProperty | undefined, import("csstype").BorderLeftStyleProperty | undefined] | [import("csstype").BorderLeftStyleProperty | undefined, import("csstype").BorderLeftStyleProperty | undefined, import("csstype").BorderLeftStyleProperty | undefined] | undefined;
317
+ borderRightStyle?: import("csstype").BorderRightStyleProperty | [import("csstype").BorderRightStyleProperty | undefined, import("csstype").BorderRightStyleProperty | undefined] | [import("csstype").BorderRightStyleProperty | undefined, import("csstype").BorderRightStyleProperty | undefined, import("csstype").BorderRightStyleProperty | undefined] | undefined;
318
+ borderWidth?: import("csstype").BorderWidthProperty<string | number> | [import("csstype").BorderWidthProperty<string | number> | undefined, import("csstype").BorderWidthProperty<string | number> | undefined] | [import("csstype").BorderWidthProperty<string | number> | undefined, import("csstype").BorderWidthProperty<string | number> | undefined, import("csstype").BorderWidthProperty<string | number> | undefined] | undefined;
319
+ borderTopWidth?: import("csstype").BorderTopWidthProperty<string | number> | [import("csstype").BorderTopWidthProperty<string | number> | undefined, import("csstype").BorderTopWidthProperty<string | number> | undefined] | [import("csstype").BorderTopWidthProperty<string | number> | undefined, import("csstype").BorderTopWidthProperty<string | number> | undefined, import("csstype").BorderTopWidthProperty<string | number> | undefined] | undefined;
320
+ borderBottomWidth?: import("csstype").BorderBottomWidthProperty<string | number> | [import("csstype").BorderBottomWidthProperty<string | number> | undefined, import("csstype").BorderBottomWidthProperty<string | number> | undefined] | [import("csstype").BorderBottomWidthProperty<string | number> | undefined, import("csstype").BorderBottomWidthProperty<string | number> | undefined, import("csstype").BorderBottomWidthProperty<string | number> | undefined] | undefined;
321
+ borderLeftWidth?: import("csstype").BorderLeftWidthProperty<string | number> | [import("csstype").BorderLeftWidthProperty<string | number> | undefined, import("csstype").BorderLeftWidthProperty<string | number> | undefined] | [import("csstype").BorderLeftWidthProperty<string | number> | undefined, import("csstype").BorderLeftWidthProperty<string | number> | undefined, import("csstype").BorderLeftWidthProperty<string | number> | undefined] | undefined;
322
+ borderRightWidth?: import("csstype").BorderRightWidthProperty<string | number> | [import("csstype").BorderRightWidthProperty<string | number> | undefined, import("csstype").BorderRightWidthProperty<string | number> | undefined] | [import("csstype").BorderRightWidthProperty<string | number> | undefined, import("csstype").BorderRightWidthProperty<string | number> | undefined, import("csstype").BorderRightWidthProperty<string | number> | undefined] | undefined;
323
+ borderRadius?: import("csstype").BorderRadiusProperty<string | number> | [import("csstype").BorderRadiusProperty<string | number> | undefined, import("csstype").BorderRadiusProperty<string | number> | undefined] | [import("csstype").BorderRadiusProperty<string | number> | undefined, import("csstype").BorderRadiusProperty<string | number> | undefined, import("csstype").BorderRadiusProperty<string | number> | undefined] | undefined;
324
+ borderTopLeftRadius?: import("csstype").BorderTopLeftRadiusProperty<string | number> | [import("csstype").BorderTopLeftRadiusProperty<string | number> | undefined, import("csstype").BorderTopLeftRadiusProperty<string | number> | undefined] | [import("csstype").BorderTopLeftRadiusProperty<string | number> | undefined, import("csstype").BorderTopLeftRadiusProperty<string | number> | undefined, import("csstype").BorderTopLeftRadiusProperty<string | number> | undefined] | undefined;
325
+ borderTopRightRadius?: import("csstype").BorderTopRightRadiusProperty<string | number> | [import("csstype").BorderTopRightRadiusProperty<string | number> | undefined, import("csstype").BorderTopRightRadiusProperty<string | number> | undefined] | [import("csstype").BorderTopRightRadiusProperty<string | number> | undefined, import("csstype").BorderTopRightRadiusProperty<string | number> | undefined, import("csstype").BorderTopRightRadiusProperty<string | number> | undefined] | undefined;
326
+ borderBottomLeftRadius?: import("csstype").BorderBottomLeftRadiusProperty<string | number> | [import("csstype").BorderBottomLeftRadiusProperty<string | number> | undefined, import("csstype").BorderBottomLeftRadiusProperty<string | number> | undefined] | [import("csstype").BorderBottomLeftRadiusProperty<string | number> | undefined, import("csstype").BorderBottomLeftRadiusProperty<string | number> | undefined, import("csstype").BorderBottomLeftRadiusProperty<string | number> | undefined] | undefined;
337
327
  borderbottomRightRadius?: ([never, never] | [never, never, never]) | undefined;
328
+ textAlign?: import("csstype").TextAlignProperty | [import("csstype").TextAlignProperty | undefined, import("csstype").TextAlignProperty | undefined] | [import("csstype").TextAlignProperty | undefined, import("csstype").TextAlignProperty | undefined, import("csstype").TextAlignProperty | undefined] | undefined;
329
+ verticalAlign?: import("csstype").VerticalAlignProperty<string | number> | [import("csstype").VerticalAlignProperty<string | number> | undefined, import("csstype").VerticalAlignProperty<string | number> | undefined] | [import("csstype").VerticalAlignProperty<string | number> | undefined, import("csstype").VerticalAlignProperty<string | number> | undefined, import("csstype").VerticalAlignProperty<string | number> | undefined] | undefined;
330
+ alignItems?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
331
+ alignSelf?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
332
+ justifyContent?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
333
+ textTransform?: import("csstype").TextTransformProperty | [import("csstype").TextTransformProperty | undefined, import("csstype").TextTransformProperty | undefined] | [import("csstype").TextTransformProperty | undefined, import("csstype").TextTransformProperty | undefined, import("csstype").TextTransformProperty | undefined] | undefined;
334
+ boxSizing?: import("csstype").BoxSizingProperty | [import("csstype").BoxSizingProperty | undefined, import("csstype").BoxSizingProperty | undefined] | [import("csstype").BoxSizingProperty | undefined, import("csstype").BoxSizingProperty | undefined, import("csstype").BoxSizingProperty | undefined] | undefined;
335
+ flexDirection?: import("csstype").FlexDirectionProperty | [import("csstype").FlexDirectionProperty | undefined, import("csstype").FlexDirectionProperty | undefined] | [import("csstype").FlexDirectionProperty | undefined, import("csstype").FlexDirectionProperty | undefined, import("csstype").FlexDirectionProperty | undefined] | undefined;
336
+ flexBasis?: import("csstype").FlexBasisProperty<string | number> | [import("csstype").FlexBasisProperty<string | number> | undefined, import("csstype").FlexBasisProperty<string | number> | undefined] | [import("csstype").FlexBasisProperty<string | number> | undefined, import("csstype").FlexBasisProperty<string | number> | undefined, import("csstype").FlexBasisProperty<string | number> | undefined] | undefined;
337
+ flexGrow?: import("csstype").GlobalsNumber | [import("csstype").GlobalsNumber | undefined, import("csstype").GlobalsNumber | undefined] | [import("csstype").GlobalsNumber | undefined, import("csstype").GlobalsNumber | undefined, import("csstype").GlobalsNumber | undefined] | undefined;
338
338
  innerRef?: import("react").Ref<HTMLButtonElement> | undefined;
339
+ gridColumnSpan?: number | number[] | "end" | "all" | undefined;
340
+ gridColumnPad?: number | number[] | undefined;
341
+ gridRowSpan?: number | number[] | undefined;
342
+ gridRowPad?: number | number[] | undefined;
343
+ gridAlign?: ("end" | "start" | "center" | "stretch") | undefined;
344
+ gridJustify?: ("end" | "start" | "center" | "stretch") | undefined;
339
345
  }>;
340
346
  export default UnstyledButton;
package/es/Button.js CHANGED
@@ -1,6 +1,8 @@
1
- function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
1
+ function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
2
2
 
3
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? Object(arguments[i]) : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
3
+ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
4
+
5
+ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
4
6
 
5
7
  function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
6
8
 
@@ -10,8 +12,8 @@ import { isDarkMode } from '@cloudflare/style-const';
10
12
  import { ariaAttributes, createStyledComponent } from '@cloudflare/style-container';
11
13
  import { Icon } from '@cloudflare/component-icon';
12
14
 
13
- const standardColors = theme => {
14
- const color = theme.colors.gray[9];
15
+ var standardColors = theme => {
16
+ var color = theme.colors.gray[9];
15
17
  return {
16
18
  default: isDarkMode() ? color : theme.colors.gray[1],
17
19
  primary: color,
@@ -25,9 +27,9 @@ const standardColors = theme => {
25
27
  };
26
28
  };
27
29
 
28
- const buttonColors = theme => {
29
- const standardIndex = isDarkMode() ? 3 : 4;
30
- const hoverIndex = isDarkMode() ? 1 : 2;
30
+ var buttonColors = theme => {
31
+ var standardIndex = isDarkMode() ? 3 : 4;
32
+ var hoverIndex = isDarkMode() ? 1 : 2;
31
33
  return {
32
34
  // Normal default state colors
33
35
  normal: {
@@ -57,7 +59,7 @@ const buttonColors = theme => {
57
59
  primary: theme.colors.blue[hoverIndex]
58
60
  }
59
61
  },
60
- color: _objectSpread({}, standardColors(theme), {
62
+ color: _objectSpread(_objectSpread({}, standardColors(theme)), {}, {
61
63
  inverted: {
62
64
  danger: theme.colors.white,
63
65
  primary: theme.colors.white
@@ -77,7 +79,7 @@ const buttonColors = theme => {
77
79
  primary: theme.colors.blue[standardIndex]
78
80
  }
79
81
  },
80
- color: _objectSpread({}, standardColors(theme), {
82
+ color: _objectSpread(_objectSpread({}, standardColors(theme)), {}, {
81
83
  inverted: {
82
84
  danger: theme.colors.gray[9],
83
85
  primary: theme.colors.gray[9]
@@ -102,63 +104,66 @@ const buttonColors = theme => {
102
104
  };
103
105
  };
104
106
 
105
- const getFocusOutlineColor = (theme, type, inverted) => {
107
+ var getFocusOutlineColor = (theme, type, inverted) => {
106
108
  var _invertedOutlines$typ;
107
109
 
108
- const standardIndex = isDarkMode() ? 3 : 4;
109
- const FOCUS_OFFSET_INDEX = 2;
110
- const focusIndex = standardIndex - FOCUS_OFFSET_INDEX;
111
- const outlines = {
110
+ var standardIndex = isDarkMode() ? 3 : 4;
111
+ var FOCUS_OFFSET_INDEX = 2;
112
+ var focusIndex = standardIndex - FOCUS_OFFSET_INDEX;
113
+ var outlines = {
112
114
  default: isDarkMode() ? theme.colors.gray[focusIndex] : theme.colors.gray[8 - FOCUS_OFFSET_INDEX],
113
115
  primary: theme.colors.blue[focusIndex],
114
116
  success: theme.colors.green[focusIndex],
115
117
  warning: theme.colors.orange[focusIndex],
116
118
  danger: theme.colors.red[focusIndex]
117
119
  };
118
- const invertedOutlines = {
120
+ var invertedOutlines = {
119
121
  danger: theme.colors.red[focusIndex],
120
122
  primary: theme.colors.blue[focusIndex]
121
123
  };
122
124
  return inverted ? (_invertedOutlines$typ = invertedOutlines[type]) !== null && _invertedOutlines$typ !== void 0 ? _invertedOutlines$typ : outlines[type] : outlines[type];
123
125
  };
124
126
 
125
- const colorAccessor = (property, {
126
- inverted = false,
127
- type = 'default'
128
- }) => !property ? undefined : inverted && (type === 'danger' || type === 'primary') ? property.inverted[type] : property[type];
127
+ var colorAccessor = (property, _ref) => {
128
+ var {
129
+ inverted = false,
130
+ type = 'default'
131
+ } = _ref;
132
+ return !property ? undefined : inverted && (type === 'danger' || type === 'primary') ? property.inverted[type] : property[type];
133
+ };
129
134
 
130
- const interactionStyleAccessor = (interactionState, props) => {
131
- const theme = props.theme,
132
- loading = props.loading,
133
- disabled = props.disabled;
134
- const isInteractive = !(loading || disabled);
135
- const stateStyles = buttonColors(theme)[interactionState];
135
+ var interactionStyleAccessor = (interactionState, props) => {
136
+ var {
137
+ theme,
138
+ loading,
139
+ disabled
140
+ } = props;
141
+ var isInteractive = !(loading || disabled);
142
+ var stateStyles = buttonColors(theme)[interactionState];
136
143
  return isInteractive ? {
137
144
  backgroundColor: colorAccessor(stateStyles.backgroundColor, props),
138
145
  color: colorAccessor(stateStyles.color, props)
139
146
  } : undefined;
140
147
  };
141
148
 
142
- export const buttonStyles = props => {
143
- const theme = props.theme,
144
- _props$loading = props.loading,
145
- loading = _props$loading === void 0 ? false : _props$loading,
146
- disabled = props.disabled,
147
- direction = props.direction,
148
- _props$inverted = props.inverted,
149
- inverted = _props$inverted === void 0 ? false : _props$inverted,
150
- group = props.group,
151
- spaced = props.spaced,
152
- _props$space = props.space,
153
- space = _props$space === void 0 ? 2 : _props$space,
154
- _props$type = props.type,
155
- type = _props$type === void 0 ? 'default' : _props$type,
156
- stretch = props.stretch,
157
- noWrapText = props.noWrapText;
158
- const normalStyles = buttonColors(theme).normal;
159
- const hoverStyles = interactionStyleAccessor('hover', props);
160
- const activeStyles = interactionStyleAccessor('active', props);
161
- const focusStyles = interactionStyleAccessor('focus', props);
149
+ export var buttonStyles = props => {
150
+ var {
151
+ theme,
152
+ loading = false,
153
+ disabled,
154
+ direction,
155
+ inverted = false,
156
+ group,
157
+ spaced,
158
+ space = 2,
159
+ type = 'default',
160
+ stretch,
161
+ noWrapText
162
+ } = props;
163
+ var normalStyles = buttonColors(theme).normal;
164
+ var hoverStyles = interactionStyleAccessor('hover', props);
165
+ var activeStyles = interactionStyleAccessor('active', props);
166
+ var focusStyles = interactionStyleAccessor('focus', props);
162
167
  return {
163
168
  '&:hover': hoverStyles,
164
169
  '&:active': activeStyles,
@@ -237,25 +242,24 @@ export const buttonStyles = props => {
237
242
  width: direction === 'column' ? '100%' : 'auto'
238
243
  };
239
244
  };
240
- const Button = /*#__PURE__*/React.forwardRef((props, ref) => {
241
- const _props$submit = props.submit,
242
- submit = _props$submit === void 0 ? false : _props$submit,
243
- className = props.className,
244
- disabled = props.disabled,
245
- _props$loading2 = props.loading,
246
- loading = _props$loading2 === void 0 ? false : _props$loading2,
247
- testId = props.testId,
248
- children = props.children,
249
- onClick = props.onClick,
250
- iconType = props.iconType,
251
- iconLabel = props.iconLabel,
252
- iconSize = props.iconSize,
253
- _props$iconPosition = props.iconPosition,
254
- iconPosition = _props$iconPosition === void 0 ? 'left' : _props$iconPosition,
255
- form = props.form,
256
- tabIndex = props.tabIndex,
257
- ariaLabel = props.ariaLabel;
258
- const ariaAndDataProps = Object.keys(props).filter(propName => propName.startsWith('data-') || ariaAttributes.includes(propName)).reduce((memo, propName) => _objectSpread({}, memo, {
245
+ var Button = /*#__PURE__*/React.forwardRef((props, ref) => {
246
+ var {
247
+ submit = false,
248
+ className,
249
+ disabled,
250
+ loading = false,
251
+ testId,
252
+ children,
253
+ onClick,
254
+ iconType,
255
+ iconLabel,
256
+ iconSize,
257
+ iconPosition = 'left',
258
+ form,
259
+ tabIndex,
260
+ ariaLabel
261
+ } = props;
262
+ var ariaAndDataProps = Object.keys(props).filter(propName => propName.startsWith('data-') || ariaAttributes.includes(propName)).reduce((memo, propName) => _objectSpread(_objectSpread({}, memo), {}, {
259
263
  [propName]: props[propName]
260
264
  }), {});
261
265
  return /*#__PURE__*/React.createElement("button", _extends({}, ariaAndDataProps, {
package/es/ButtonGroup.js CHANGED
@@ -2,7 +2,7 @@ import React from 'react';
2
2
  import PropTypes from 'prop-types';
3
3
  import { createStyledComponent } from '@cloudflare/style-container';
4
4
 
5
- const getGroupByIndex = (index, length) => {
5
+ var getGroupByIndex = (index, length) => {
6
6
  if (index === length - 1) {
7
7
  return 'last';
8
8
  }
@@ -14,7 +14,7 @@ const getGroupByIndex = (index, length) => {
14
14
  return 'inbetween';
15
15
  };
16
16
 
17
- const addGroupProps = (children, spaced, space, direction, stretch) => React.Children.map(children, (child, index) => {
17
+ var addGroupProps = (children, spaced, space, direction, stretch) => React.Children.map(children, (child, index) => {
18
18
  if ( /*#__PURE__*/React.isValidElement(child)) {
19
19
  return /*#__PURE__*/React.cloneElement(child, {
20
20
  group: getGroupByIndex(index, React.Children.count(children)),
@@ -28,14 +28,15 @@ const addGroupProps = (children, spaced, space, direction, stretch) => React.Chi
28
28
  return child;
29
29
  });
30
30
 
31
- const ButtonGroup = ({
32
- className,
33
- children,
34
- spaced,
35
- space,
36
- direction = 'row',
37
- stretch
38
- }) => {
31
+ var ButtonGroup = _ref => {
32
+ var {
33
+ className,
34
+ children,
35
+ spaced,
36
+ space,
37
+ direction = 'row',
38
+ stretch
39
+ } = _ref;
39
40
  return /*#__PURE__*/React.createElement("div", {
40
41
  className: className
41
42
  }, addGroupProps(children, spaced, space, direction, stretch));
@@ -49,12 +50,15 @@ ButtonGroup.propTypes = {
49
50
  direction: PropTypes.oneOf(['column', 'row'])
50
51
  };
51
52
  ButtonGroup.displayName = 'ButtonGroup';
52
- export default createStyledComponent(({
53
- direction = 'row'
54
- }) => ({
55
- position: 'relative',
56
- display: 'inline-flex',
57
- width: direction === 'column' ? '100%' : 'initial',
58
- flexDirection: direction === 'column' ? 'column' : 'row',
59
- flexWrap: 'nowrap'
60
- }), ButtonGroup);
53
+ export default createStyledComponent(_ref2 => {
54
+ var {
55
+ direction = 'row'
56
+ } = _ref2;
57
+ return {
58
+ position: 'relative',
59
+ display: 'inline-flex',
60
+ width: direction === 'column' ? '100%' : 'initial',
61
+ flexDirection: direction === 'column' ? 'column' : 'row',
62
+ flexWrap: 'nowrap'
63
+ };
64
+ }, ButtonGroup);
package/es/IconTextButton.js CHANGED
@@ -2,27 +2,30 @@ import React from 'react';
2
2
  import { createStyledComponent } from '@cloudflare/style-container';
3
3
  import { Icon } from '@cloudflare/component-icon';
4
4
  import TextButton from './TextButton';
5
- const IconTextWrapper = createStyledComponent(() => ({
5
+ var IconTextWrapper = createStyledComponent(() => ({
6
6
  display: 'flex',
7
7
  alignItems: 'center'
8
8
  }), 'div');
9
9
 
10
- const IconTextButton = ({
11
- onClick,
12
- iconType,
13
- iconPosition = 'left',
14
- children
15
- }) => /*#__PURE__*/React.createElement(TextButton, {
16
- type: "button",
17
- onClick: onClick
18
- }, /*#__PURE__*/React.createElement(IconTextWrapper, null, iconPosition === 'left' && /*#__PURE__*/React.createElement(Icon, {
19
- type: iconType,
20
- mr: 1,
21
- label: iconType
22
- }), children, iconPosition === 'right' && /*#__PURE__*/React.createElement(Icon, {
23
- type: iconType,
24
- ml: 1,
25
- label: iconType
26
- })));
10
+ var IconTextButton = _ref => {
11
+ var {
12
+ onClick,
13
+ iconType,
14
+ iconPosition = 'left',
15
+ children
16
+ } = _ref;
17
+ return /*#__PURE__*/React.createElement(TextButton, {
18
+ type: "button",
19
+ onClick: onClick
20
+ }, /*#__PURE__*/React.createElement(IconTextWrapper, null, iconPosition === 'left' && /*#__PURE__*/React.createElement(Icon, {
21
+ type: iconType,
22
+ mr: 1,
23
+ label: iconType
24
+ }), children, iconPosition === 'right' && /*#__PURE__*/React.createElement(Icon, {
25
+ type: iconType,
26
+ ml: 1,
27
+ label: iconType
28
+ })));
29
+ };
27
30
 
28
31
  export default IconTextButton;
package/es/TextButton.js CHANGED
@@ -1,33 +1,36 @@
1
1
  import { createStyledComponent } from '@cloudflare/style-container';
2
2
  import { isDarkMode } from '@cloudflare/style-const';
3
- const TextButton = createStyledComponent(({
4
- theme
5
- }) => ({
6
- background: 'transparent',
7
- borderRadius: 'none',
8
- color: theme.colors.blue[4],
9
- cursor: 'pointer',
10
- transitionProperty: 'color',
11
- transitionDuration: '150ms',
12
- transitionTimingFunction: 'ease',
13
- padding: '0px',
14
- display: 'inline-block',
15
- alignItems: 'center',
16
- lineHeight: '1.5',
17
- height: 'fit-content',
18
- fontSize: 2,
19
- fontWeight: 400,
20
- outline: 'none',
21
- overflow: 'hidden',
22
- textUnderlineOffset: 4,
23
- ':hover': {
24
- color: isDarkMode() ? theme.colors.orange[6] : theme.colors.blue[2],
25
- textDecoration: 'underline'
26
- },
27
- ':focus-visible': {
28
- outline: '-webkit-focus-ring-color auto 1px',
29
- outlineOffset: '1px'
30
- }
31
- }), 'button');
3
+ var TextButton = createStyledComponent(_ref => {
4
+ var {
5
+ theme
6
+ } = _ref;
7
+ return {
8
+ background: 'transparent',
9
+ borderRadius: 'none',
10
+ color: theme.colors.blue[4],
11
+ cursor: 'pointer',
12
+ transitionProperty: 'color',
13
+ transitionDuration: '150ms',
14
+ transitionTimingFunction: 'ease',
15
+ padding: '0px',
16
+ display: 'inline-block',
17
+ alignItems: 'center',
18
+ lineHeight: '1.5',
19
+ height: 'fit-content',
20
+ fontSize: 2,
21
+ fontWeight: 400,
22
+ outline: 'none',
23
+ overflow: 'hidden',
24
+ textUnderlineOffset: 4,
25
+ ':hover': {
26
+ color: isDarkMode() ? theme.colors.orange[6] : theme.colors.blue[2],
27
+ textDecoration: 'underline'
28
+ },
29
+ ':focus-visible': {
30
+ outline: '-webkit-focus-ring-color auto 1px',
31
+ outlineOffset: '1px'
32
+ }
33
+ };
34
+ }, 'button');
32
35
  TextButton.displayName = 'TextButton';
33
36
  export default TextButton;
package/es/UnstyledButton.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { createStyledComponent } from '@cloudflare/style-container';
2
- const UnstyledButton = createStyledComponent(() => ({
2
+ var UnstyledButton = createStyledComponent(() => ({
3
3
  background: 'none',
4
4
  color: 'inherit',
5
5
  border: 'none',