@cloudflare/component-toggle 5.1.7 → 6.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 (5) hide show
  1. package/CHANGELOG.md +951 -3017
  2. package/dist/Toggle.d.ts +48 -48
  3. package/es/Toggle.js +54 -50
  4. package/lib/Toggle.js +11 -9
  5. package/package.json +11 -11
package/dist/Toggle.d.ts CHANGED
@@ -36,11 +36,11 @@ declare const ToggleInput: React.ComponentType<{
36
36
  'aria-colindex'?: number | undefined;
37
37
  'aria-colspan'?: number | undefined;
38
38
  'aria-controls'?: string | undefined;
39
- 'aria-current'?: boolean | "time" | "true" | "false" | "step" | "location" | "page" | "date" | undefined;
39
+ 'aria-current'?: boolean | "time" | "true" | "false" | "step" | "page" | "location" | "date" | undefined;
40
40
  'aria-describedby'?: string | undefined;
41
41
  'aria-details'?: string | undefined;
42
42
  'aria-disabled'?: boolean | "true" | "false" | undefined;
43
- 'aria-dropeffect'?: "link" | "none" | "execute" | "copy" | "move" | "popup" | undefined;
43
+ 'aria-dropeffect'?: "link" | "none" | "copy" | "move" | "execute" | "popup" | undefined;
44
44
  'aria-errormessage'?: string | undefined;
45
45
  'aria-expanded'?: boolean | "true" | "false" | undefined;
46
46
  'aria-flowto'?: string | undefined;
@@ -70,7 +70,7 @@ declare const ToggleInput: React.ComponentType<{
70
70
  'aria-rowspan'?: number | undefined;
71
71
  'aria-selected'?: boolean | "true" | "false" | undefined;
72
72
  'aria-setsize'?: number | undefined;
73
- 'aria-sort'?: "none" | "other" | "ascending" | "descending" | undefined;
73
+ 'aria-sort'?: "none" | "ascending" | "descending" | "other" | undefined;
74
74
  'aria-valuemax'?: number | undefined;
75
75
  'aria-valuemin'?: number | undefined;
76
76
  'aria-valuenow'?: number | undefined;
@@ -234,12 +234,8 @@ declare const ToggleInput: React.ComponentType<{
234
234
  onTransitionEndCapture?: React.TransitionEventHandler<HTMLInputElement> | undefined;
235
235
  dir?: string | undefined;
236
236
  is?: string | undefined;
237
- value?: string | number | readonly string[] | undefined;
238
- list?: string | undefined;
239
- step?: string | number | undefined;
240
237
  disabled?: boolean | undefined;
241
- multiple?: boolean | undefined;
242
- translate?: "no" | "yes" | undefined;
238
+ value?: string | number | readonly string[] | undefined;
243
239
  defaultChecked?: boolean | undefined;
244
240
  defaultValue?: string | number | readonly string[] | undefined;
245
241
  suppressContentEditableWarning?: boolean | undefined;
@@ -249,7 +245,7 @@ declare const ToggleInput: React.ComponentType<{
249
245
  contextMenu?: string | undefined;
250
246
  placeholder?: string | undefined;
251
247
  spellCheck?: (boolean | "true" | "false") | undefined;
252
- inputMode?: "search" | "text" | "none" | "email" | "url" | "tel" | "numeric" | "decimal" | undefined;
248
+ inputMode?: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
253
249
  radioGroup?: string | undefined;
254
250
  about?: string | undefined;
255
251
  datatype?: string | undefined;
@@ -269,7 +265,7 @@ declare const ToggleInput: React.ComponentType<{
269
265
  itemRef?: string | undefined;
270
266
  results?: number | undefined;
271
267
  security?: string | undefined;
272
- unselectable?: "off" | "on" | undefined;
268
+ unselectable?: "on" | "off" | undefined;
273
269
  alt?: string | undefined;
274
270
  src?: string | undefined;
275
271
  autoFocus?: boolean | undefined;
@@ -282,62 +278,33 @@ declare const ToggleInput: React.ComponentType<{
282
278
  accept?: string | undefined;
283
279
  capture?: string | boolean | undefined;
284
280
  checked?: boolean | undefined;
281
+ list?: string | undefined;
285
282
  maxLength?: number | undefined;
286
283
  minLength?: number | undefined;
284
+ multiple?: boolean | undefined;
287
285
  readOnly?: boolean | undefined;
288
286
  required?: boolean | undefined;
289
287
  size?: number | undefined;
288
+ step?: string | number | undefined;
290
289
  hidden?: boolean | undefined;
290
+ translate?: "no" | "yes" | undefined;
291
291
  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;
292
292
  cursor?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
293
293
  display?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
294
294
  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;
295
295
  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;
296
296
  textDecoration?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
297
- 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;
298
- backgroundColor?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
299
297
  borderColor?: ((string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined]) & string) | undefined;
300
- borderLeftColor?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
301
- borderRightColor?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
302
- borderTopColor?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
303
- borderBottomColor?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | 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
298
  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;
309
- 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;
310
- 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;
311
299
  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;
300
+ 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;
301
+ 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;
302
+ 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;
312
303
  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;
313
- 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;
314
- 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;
315
304
  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;
316
- 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;
317
- 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;
318
- alignItems?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
319
- alignSelf?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
320
- 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;
321
- 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;
322
- 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;
323
- 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;
324
- 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;
325
- 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;
326
- 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;
327
- 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;
328
- 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;
329
- 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;
330
- 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;
331
- 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;
332
- 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;
333
- 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;
334
- 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;
335
- justifyContent?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
336
- 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;
305
+ 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;
306
+ 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;
337
307
  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;
338
- 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;
339
- borderStyle?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
340
- 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;
341
308
  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;
342
309
  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;
343
310
  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;
@@ -352,7 +319,40 @@ declare const ToggleInput: React.ComponentType<{
352
319
  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;
353
320
  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;
354
321
  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;
322
+ 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;
323
+ 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;
324
+ 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;
325
+ 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;
326
+ backgroundColor?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
327
+ borderLeftColor?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
328
+ borderRightColor?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
329
+ borderTopColor?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
330
+ borderBottomColor?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
331
+ borderStyle?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
332
+ 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;
333
+ 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;
334
+ 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;
335
+ 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;
336
+ 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;
337
+ 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;
338
+ 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;
339
+ 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;
340
+ 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;
341
+ 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;
342
+ 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;
343
+ 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;
344
+ 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;
355
345
  borderbottomRightRadius?: ([never, never] | [never, never, never]) | undefined;
346
+ 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;
347
+ 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;
348
+ alignItems?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
349
+ alignSelf?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
350
+ justifyContent?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
351
+ 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;
352
+ 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;
353
+ 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;
354
+ 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;
355
+ 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;
356
356
  controlSize: number;
357
357
  invalid?: boolean | undefined;
358
358
  innerRef?: React.Ref<HTMLInputElement> | undefined;
package/es/Toggle.js CHANGED
@@ -1,10 +1,14 @@
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
+ var _excluded = ["value", "testId", "onChange", "labelledBy", "describedBy", "className", "disabled", "color", "borderColor", "invalid", "height"];
2
+
3
+ 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
4
 
3
5
  function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
4
6
 
5
7
  function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
6
8
 
7
- 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; }
9
+ 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; }
10
+
11
+ 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; }
8
12
 
9
13
  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; }
10
14
 
@@ -12,38 +16,37 @@ import React from 'react';
12
16
  import { createStyledComponent } from '@cloudflare/style-container';
13
17
  import { isDarkMode } from '@cloudflare/style-const';
14
18
 
15
- const onSvg = darkMode => `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.0275 16.2537L6 12.0462L7.08375 11.0075L10.0462 14.1013L16.0837 8L17.1487 9.05375L10.0275 16.2537Z" fill="${darkMode ? 'black' : 'white'}"/></svg>`;
16
-
17
- const offSvg = darkMode => `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16.4687 17.4738L12.2688 13.3188L8.11375 17.5225L7.04875 16.465L11.2037 12.265L7 8.11L8.0575 7.045L12.2575 11.2L16.4125 7L17.4775 8.05375L13.3225 12.2538L17.5263 16.4087L16.4687 17.4738Z" fill="${darkMode ? 'black' : 'white'}"/></svg>`;
19
+ var onSvg = darkMode => "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10.0275 16.2537L6 12.0462L7.08375 11.0075L10.0462 14.1013L16.0837 8L17.1487 9.05375L10.0275 16.2537Z\" fill=\"".concat(darkMode ? 'black' : 'white', "\"/></svg>");
18
20
 
19
- const backgroundImage = darkMode => `url('data:image/svg+xml;utf8,${onSvg(darkMode)}'), url('data:image/svg+xml;utf8,${offSvg(darkMode)}')`;
21
+ var offSvg = darkMode => "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M16.4687 17.4738L12.2688 13.3188L8.11375 17.5225L7.04875 16.465L11.2037 12.265L7 8.11L8.0575 7.045L12.2575 11.2L16.4125 7L17.4775 8.05375L13.3225 12.2538L17.5263 16.4087L16.4687 17.4738Z\" fill=\"".concat(darkMode ? 'black' : 'white', "\"/></svg>");
20
22
 
21
- const transition = 'all .25s ease';
22
- const ToggleInput = createStyledComponent(({
23
- theme,
24
- height,
25
- controlSize,
26
- color,
27
- borderColor,
28
- invalid,
29
- disabled
30
- }) => {
31
- var _color, _borderColor;
23
+ var backgroundImage = darkMode => "url('data:image/svg+xml;utf8,".concat(onSvg(darkMode), "'), url('data:image/svg+xml;utf8,").concat(offSvg(darkMode), "')");
32
24
 
33
- return _objectSpread({
25
+ var transition = 'all .25s ease';
26
+ var ToggleInput = createStyledComponent(_ref => {
27
+ var {
28
+ theme,
29
+ height,
30
+ controlSize,
31
+ color,
32
+ borderColor,
33
+ invalid,
34
+ disabled
35
+ } = _ref;
36
+ return _objectSpread(_objectSpread({
34
37
  appearance: 'none',
35
38
  position: 'relative',
36
39
  display: 'inline-block',
37
- width: `${height * 2}px`,
38
- minWidth: `${height * 2}px`,
39
- height: `${height}px`,
40
+ width: "".concat(height * 2, "px"),
41
+ minWidth: "".concat(height * 2, "px"),
42
+ height: "".concat(height, "px"),
40
43
  opacity: disabled ? 0.5 : 1,
41
44
  transition: 'opacity .25s ease',
42
- borderRadius: `${controlSize * 2}px`,
45
+ borderRadius: "".concat(controlSize * 2, "px"),
43
46
  cursor: disabled ? 'not-allowed' : 'pointer'
44
47
  }, theme.mixins.focus({
45
48
  invalid
46
- }), {
49
+ })), {}, {
47
50
  ':before': {
48
51
  content: '" "',
49
52
  position: 'absolute',
@@ -54,53 +57,54 @@ const ToggleInput = createStyledComponent(({
54
57
  color: theme.colors.white,
55
58
  backgroundColor: theme.colors.gray[4],
56
59
  backgroundImage: backgroundImage(isDarkMode()),
57
- backgroundPosition: `${height * 0.1}px 0, ${height * 0.9}px 0`,
60
+ backgroundPosition: "".concat(height * 0.1, "px 0, ").concat(height * 0.9, "px 0"),
58
61
  backgroundRepeat: 'no-repeat',
59
62
  backgroundSize: 'contain',
60
- border: `1px solid ${theme.colors.gray[2]}`,
61
- borderRadius: `${height * 2}px`,
63
+ border: "1px solid ".concat(theme.colors.gray[2]),
64
+ borderRadius: "".concat(height * 2, "px"),
62
65
  transition
63
66
  },
64
67
  ':after': {
65
68
  content: '" "',
66
69
  position: 'absolute',
67
- top: `${(height - controlSize) / 2}px`,
68
- left: `${(height - controlSize) / 2}px`,
70
+ top: "".concat((height - controlSize) / 2, "px"),
71
+ left: "".concat((height - controlSize) / 2, "px"),
69
72
  boxSizing: 'border-box',
70
- width: `${controlSize}px`,
71
- height: `${controlSize}px`,
73
+ width: "".concat(controlSize, "px"),
74
+ height: "".concat(controlSize, "px"),
72
75
  backgroundColor: theme.colors.background,
73
- borderRadius: `${controlSize * 2}px`,
74
- boxShadow: `0 0 2px 1px ${theme.colors.gray[2]}`,
76
+ borderRadius: "".concat(controlSize * 2, "px"),
77
+ boxShadow: "0 0 2px 1px ".concat(theme.colors.gray[2]),
75
78
  transition
76
79
  },
77
80
  '&:checked:after': {
78
- transform: `translateX(${height}px)`,
81
+ transform: "translateX(".concat(height, "px)"),
79
82
  boxShadow: 'none'
80
83
  },
81
84
  '&:checked:before': {
82
- backgroundColor: (_color = color) !== null && _color !== void 0 ? _color : theme.colors.green[5],
83
- borderColor: (_borderColor = borderColor) !== null && _borderColor !== void 0 ? _borderColor : theme.colors.green[2]
85
+ backgroundColor: color !== null && color !== void 0 ? color : theme.colors.green[5],
86
+ borderColor: borderColor !== null && borderColor !== void 0 ? borderColor : theme.colors.green[2]
84
87
  }
85
88
  });
86
89
  }, 'input');
87
90
 
88
- const Toggle = (_ref) => {
89
- let value = _ref.value,
90
- testId = _ref.testId,
91
- onChange = _ref.onChange,
92
- labelledBy = _ref.labelledBy,
93
- describedBy = _ref.describedBy,
94
- className = _ref.className,
95
- disabled = _ref.disabled,
96
- color = _ref.color,
97
- borderColor = _ref.borderColor,
98
- invalid = _ref.invalid,
99
- _ref$height = _ref.height,
100
- height = _ref$height === void 0 ? 24 : _ref$height,
101
- rest = _objectWithoutProperties(_ref, ["value", "testId", "onChange", "labelledBy", "describedBy", "className", "disabled", "color", "borderColor", "invalid", "height"]);
91
+ var Toggle = _ref2 => {
92
+ var {
93
+ value,
94
+ testId,
95
+ onChange,
96
+ labelledBy,
97
+ describedBy,
98
+ className,
99
+ disabled,
100
+ color,
101
+ borderColor,
102
+ invalid,
103
+ height = 24
104
+ } = _ref2,
105
+ rest = _objectWithoutProperties(_ref2, _excluded);
102
106
 
103
- const controlSize = height - 4;
107
+ var controlSize = height - 4;
104
108
  return /*#__PURE__*/React.createElement(ToggleInput, _extends({}, rest, {
105
109
  className: className,
106
110
  type: "checkbox",
package/lib/Toggle.js CHANGED
@@ -11,15 +11,19 @@ var _styleContainer = require("@cloudflare/style-container");
11
11
 
12
12
  var _styleConst = require("@cloudflare/style-const");
13
13
 
14
+ var _excluded = ["value", "testId", "onChange", "labelledBy", "describedBy", "className", "disabled", "color", "borderColor", "invalid", "height"];
15
+
14
16
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
15
17
 
16
- 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); }
18
+ 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); }
17
19
 
18
20
  function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
19
21
 
20
22
  function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
21
23
 
22
- 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; }
24
+ 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; }
25
+
26
+ 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; }
23
27
 
24
28
  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; }
25
29
 
@@ -37,8 +41,6 @@ var backgroundImage = function backgroundImage(darkMode) {
37
41
 
38
42
  var transition = 'all .25s ease';
39
43
  var ToggleInput = (0, _styleContainer.createStyledComponent)(function (_ref) {
40
- var _color, _borderColor;
41
-
42
44
  var theme = _ref.theme,
43
45
  height = _ref.height,
44
46
  controlSize = _ref.controlSize,
@@ -46,7 +48,7 @@ var ToggleInput = (0, _styleContainer.createStyledComponent)(function (_ref) {
46
48
  borderColor = _ref.borderColor,
47
49
  invalid = _ref.invalid,
48
50
  disabled = _ref.disabled;
49
- return _objectSpread({
51
+ return _objectSpread(_objectSpread({
50
52
  appearance: 'none',
51
53
  position: 'relative',
52
54
  display: 'inline-block',
@@ -59,7 +61,7 @@ var ToggleInput = (0, _styleContainer.createStyledComponent)(function (_ref) {
59
61
  cursor: disabled ? 'not-allowed' : 'pointer'
60
62
  }, theme.mixins.focus({
61
63
  invalid: invalid
62
- }), {
64
+ })), {}, {
63
65
  ':before': {
64
66
  content: '" "',
65
67
  position: 'absolute',
@@ -95,8 +97,8 @@ var ToggleInput = (0, _styleContainer.createStyledComponent)(function (_ref) {
95
97
  boxShadow: 'none'
96
98
  },
97
99
  '&:checked:before': {
98
- backgroundColor: (_color = color) !== null && _color !== void 0 ? _color : theme.colors.green[5],
99
- borderColor: (_borderColor = borderColor) !== null && _borderColor !== void 0 ? _borderColor : theme.colors.green[2]
100
+ backgroundColor: color !== null && color !== void 0 ? color : theme.colors.green[5],
101
+ borderColor: borderColor !== null && borderColor !== void 0 ? borderColor : theme.colors.green[2]
100
102
  }
101
103
  });
102
104
  }, 'input');
@@ -114,7 +116,7 @@ var Toggle = function Toggle(_ref2) {
114
116
  invalid = _ref2.invalid,
115
117
  _ref2$height = _ref2.height,
116
118
  height = _ref2$height === void 0 ? 24 : _ref2$height,
117
- rest = _objectWithoutProperties(_ref2, ["value", "testId", "onChange", "labelledBy", "describedBy", "className", "disabled", "color", "borderColor", "invalid", "height"]);
119
+ rest = _objectWithoutProperties(_ref2, _excluded);
118
120
 
119
121
  var controlSize = height - 4;
120
122
  return /*#__PURE__*/_react.default.createElement(ToggleInput, _extends({}, rest, {
package/package.json CHANGED
@@ -1,26 +1,27 @@
1
1
  {
2
2
  "name": "@cloudflare/component-toggle",
3
3
  "description": "Cloudflare Toggle Component",
4
- "version": "5.1.7",
4
+ "version": "6.0.0",
5
5
  "types": "./dist/index.d.ts",
6
6
  "main": "lib/index.js",
7
7
  "module": "es/index.js",
8
8
  "author": "James Kyle <jkyle@cloudflare.com>",
9
9
  "license": "BSD-3-Clause",
10
10
  "publishConfig": {
11
- "registry": "https://registry.npmjs.org/",
12
- "access": "public"
11
+ "access": "public",
12
+ "main": "lib/index.js",
13
+ "module": "es/index.js"
13
14
  },
14
15
  "dependencies": {
15
- "@cloudflare/component-icon": "^7.2.23",
16
- "@cloudflare/elements": "^1.12.6",
17
- "@cloudflare/intl-react": "^1.9.78",
18
- "@cloudflare/types": "^6.15.13",
16
+ "@cloudflare/component-icon": "^8.0.0",
17
+ "@cloudflare/elements": "^2.0.0",
18
+ "@cloudflare/intl-react": "^1.9.80",
19
+ "@cloudflare/types": "^6.15.15",
19
20
  "prop-types": "^15.6.0"
20
21
  },
21
22
  "peerDependencies": {
22
23
  "@cloudflare/style-const": "^5.3.9",
23
- "@cloudflare/style-container": "^7.8.41",
24
+ "@cloudflare/style-container": "^7.9.0",
24
25
  "react": "^15.0.0-0 || ^16.0.0-0 || ^17.0.0-0"
25
26
  },
26
27
  "stratus": {
@@ -33,6 +34,5 @@
33
34
  "test": "stratus test",
34
35
  "test-coverage": "stratus test --coverage",
35
36
  "test-watch": "stratus test --watch"
36
- },
37
- "gitHead": "d8669b68225ffc54a1ee93e83580a2e6a57fba6b"
38
- }
37
+ }
38
+ }