@cloudflare/component-toggle 4.2.42 → 5.0.0

package/CHANGELOG.md

@@ -3,6 +3,46 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [5.0.0](http://stash.cfops.it:7999/fe/stratus/compare/@cloudflare/component-toggle@4.2.45...@cloudflare/component-toggle@5.0.0) (2022-01-07)
+
+
+### Bug Fixes
+
+* **component-toggle:** A11Y-584 Fix focus effect, simplify rendered html ([742eddf](http://stash.cfops.it:7999/fe/stratus/commits/742eddf))
+
+
+### BREAKING CHANGES
+
+* **component-toggle:** Removed LabelledToggle
+
+
+
+
+
+## [4.2.45](http://stash.cfops.it:7999/fe/stratus/compare/@cloudflare/component-toggle@4.2.44...@cloudflare/component-toggle@4.2.45) (2021-12-28)
+
+**Note:** Version bump only for package @cloudflare/component-toggle
+
+
+
+
+
+## [4.2.44](http://stash.cfops.it:7999/fe/stratus/compare/@cloudflare/component-toggle@4.2.43...@cloudflare/component-toggle@4.2.44) (2021-12-22)
+
+**Note:** Version bump only for package @cloudflare/component-toggle
+
+
+
+
+
+## [4.2.43](http://stash.cfops.it:7999/fe/stratus/compare/@cloudflare/component-toggle@4.2.42...@cloudflare/component-toggle@4.2.43) (2021-12-22)
+
+**Note:** Version bump only for package @cloudflare/component-toggle
+
+
+
+
+
 ## [4.2.42](http://stash.cfops.it:7999/fe/stratus/compare/@cloudflare/component-toggle@4.2.40...@cloudflare/component-toggle@4.2.42) (2021-12-21)
 
 **Note:** Version bump only for package @cloudflare/component-toggle

package/dist/Toggle.d.ts

@@ -1,23 +1,32 @@
 import React, { ComponentProps } from 'react';
-declare const Container: React.ComponentType<{
+declare const ToggleInput: React.ComponentType<{
+    form?: string | undefined;
     slot?: string | undefined;
     style?: React.CSSProperties | undefined;
     title?: string | undefined;
+    pattern?: string | undefined;
     children?: React.ReactNode;
     key?: React.Key | null | undefined;
-    onClick?: React.MouseEventHandler<HTMLDivElement> | undefined;
-    onMouseEnter?: React.MouseEventHandler<HTMLDivElement> | undefined;
-    onMouseLeave?: React.MouseEventHandler<HTMLDivElement> | undefined;
+    onClick?: React.MouseEventHandler<HTMLInputElement> | undefined;
+    onMouseEnter?: React.MouseEventHandler<HTMLInputElement> | undefined;
+    onMouseLeave?: React.MouseEventHandler<HTMLInputElement> | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
-    onDragStart?: React.DragEventHandler<HTMLDivElement> | undefined;
-    onDrag?: React.DragEventHandler<HTMLDivElement> | undefined;
-    onDragEnd?: React.DragEventHandler<HTMLDivElement> | undefined;
+    onDragStart?: React.DragEventHandler<HTMLInputElement> | undefined;
+    onDrag?: React.DragEventHandler<HTMLInputElement> | undefined;
+    onDragEnd?: React.DragEventHandler<HTMLInputElement> | undefined;
     className?: string | undefined;
     color?: (string & (string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined])) | undefined;
+    height: (string | number | undefined) & (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) & number;
     id?: string | undefined;
     lang?: string | undefined;
+    max?: string | number | undefined;
+    min?: string | number | undefined;
+    name?: string | undefined;
+    type?: string | undefined;
+    width?: ((string | number) & (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;
     role?: string | undefined;
     tabIndex?: number | undefined;
+    crossOrigin?: string | undefined;
     'aria-activedescendant'?: string | undefined;
     'aria-atomic'?: boolean | "true" | "false" | undefined;
     'aria-autocomplete'?: "none" | "inline" | "list" | "both" | undefined;
@@ -69,162 +78,167 @@ declare const Container: React.ComponentType<{
     dangerouslySetInnerHTML?: {
         __html: string;
     } | undefined;
-    onCopy?: React.ClipboardEventHandler<HTMLDivElement> | undefined;
-    onCopyCapture?: React.ClipboardEventHandler<HTMLDivElement> | undefined;
-    onCut?: React.ClipboardEventHandler<HTMLDivElement> | undefined;
-    onCutCapture?: React.ClipboardEventHandler<HTMLDivElement> | undefined;
-    onPaste?: React.ClipboardEventHandler<HTMLDivElement> | undefined;
-    onPasteCapture?: React.ClipboardEventHandler<HTMLDivElement> | undefined;
-    onCompositionEnd?: React.CompositionEventHandler<HTMLDivElement> | undefined;
-    onCompositionEndCapture?: React.CompositionEventHandler<HTMLDivElement> | undefined;
-    onCompositionStart?: React.CompositionEventHandler<HTMLDivElement> | undefined;
-    onCompositionStartCapture?: React.CompositionEventHandler<HTMLDivElement> | undefined;
-    onCompositionUpdate?: React.CompositionEventHandler<HTMLDivElement> | undefined;
-    onCompositionUpdateCapture?: React.CompositionEventHandler<HTMLDivElement> | undefined;
-    onFocus?: React.FocusEventHandler<HTMLDivElement> | undefined;
-    onFocusCapture?: React.FocusEventHandler<HTMLDivElement> | undefined;
-    onBlur?: React.FocusEventHandler<HTMLDivElement> | undefined;
-    onBlurCapture?: React.FocusEventHandler<HTMLDivElement> | undefined;
-    onChange?: React.FormEventHandler<HTMLDivElement> | undefined;
-    onChangeCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
-    onBeforeInput?: React.FormEventHandler<HTMLDivElement> | undefined;
-    onBeforeInputCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
-    onInput?: React.FormEventHandler<HTMLDivElement> | undefined;
-    onInputCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
-    onReset?: React.FormEventHandler<HTMLDivElement> | undefined;
-    onResetCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
-    onSubmit?: React.FormEventHandler<HTMLDivElement> | undefined;
-    onSubmitCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
-    onInvalid?: React.FormEventHandler<HTMLDivElement> | undefined;
-    onInvalidCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
-    onLoad?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onLoadCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onError?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onErrorCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onKeyDown?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
-    onKeyDownCapture?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
-    onKeyPress?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
-    onKeyPressCapture?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
-    onKeyUp?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
-    onKeyUpCapture?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
-    onAbort?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onAbortCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onCanPlay?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onCanPlayCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onCanPlayThrough?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onCanPlayThroughCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onDurationChange?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onDurationChangeCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onEmptied?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onEmptiedCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onEncrypted?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onEncryptedCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onEnded?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onEndedCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onLoadedData?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onLoadedDataCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onLoadedMetadata?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onLoadedMetadataCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onLoadStart?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onLoadStartCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onPause?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onPauseCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onPlay?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onPlayCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onPlaying?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onPlayingCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onProgress?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onProgressCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onRateChange?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onRateChangeCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onSeeked?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onSeekedCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onSeeking?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onSeekingCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onStalled?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onStalledCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onSuspend?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onSuspendCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onTimeUpdate?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onTimeUpdateCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onVolumeChange?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onVolumeChangeCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onWaiting?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onWaitingCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onAuxClick?: React.MouseEventHandler<HTMLDivElement> | undefined;
-    onAuxClickCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
-    onClickCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
-    onContextMenu?: React.MouseEventHandler<HTMLDivElement> | undefined;
-    onContextMenuCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
-    onDoubleClick?: React.MouseEventHandler<HTMLDivElement> | undefined;
-    onDoubleClickCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
-    onDragCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
-    onDragEndCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
-    onDragEnter?: React.DragEventHandler<HTMLDivElement> | undefined;
-    onDragEnterCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
-    onDragExit?: React.DragEventHandler<HTMLDivElement> | undefined;
-    onDragExitCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
-    onDragLeave?: React.DragEventHandler<HTMLDivElement> | undefined;
-    onDragLeaveCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
-    onDragOver?: React.DragEventHandler<HTMLDivElement> | undefined;
-    onDragOverCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
-    onDragStartCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
-    onDrop?: React.DragEventHandler<HTMLDivElement> | undefined;
-    onDropCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
-    onMouseDown?: React.MouseEventHandler<HTMLDivElement> | undefined;
-    onMouseDownCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
-    onMouseMove?: React.MouseEventHandler<HTMLDivElement> | undefined;
-    onMouseMoveCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
-    onMouseOut?: React.MouseEventHandler<HTMLDivElement> | undefined;
-    onMouseOutCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
-    onMouseOver?: React.MouseEventHandler<HTMLDivElement> | undefined;
-    onMouseOverCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
-    onMouseUp?: React.MouseEventHandler<HTMLDivElement> | undefined;
-    onMouseUpCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
-    onSelect?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onSelectCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onTouchCancel?: React.TouchEventHandler<HTMLDivElement> | undefined;
-    onTouchCancelCapture?: React.TouchEventHandler<HTMLDivElement> | undefined;
-    onTouchEnd?: React.TouchEventHandler<HTMLDivElement> | undefined;
-    onTouchEndCapture?: React.TouchEventHandler<HTMLDivElement> | undefined;
-    onTouchMove?: React.TouchEventHandler<HTMLDivElement> | undefined;
-    onTouchMoveCapture?: React.TouchEventHandler<HTMLDivElement> | undefined;
-    onTouchStart?: React.TouchEventHandler<HTMLDivElement> | undefined;
-    onTouchStartCapture?: React.TouchEventHandler<HTMLDivElement> | undefined;
-    onPointerDown?: React.PointerEventHandler<HTMLDivElement> | undefined;
-    onPointerDownCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
-    onPointerMove?: React.PointerEventHandler<HTMLDivElement> | undefined;
-    onPointerMoveCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
-    onPointerUp?: React.PointerEventHandler<HTMLDivElement> | undefined;
-    onPointerUpCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
-    onPointerCancel?: React.PointerEventHandler<HTMLDivElement> | undefined;
-    onPointerCancelCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
-    onPointerEnter?: React.PointerEventHandler<HTMLDivElement> | undefined;
-    onPointerEnterCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
-    onPointerLeave?: React.PointerEventHandler<HTMLDivElement> | undefined;
-    onPointerLeaveCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
-    onPointerOver?: React.PointerEventHandler<HTMLDivElement> | undefined;
-    onPointerOverCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
-    onPointerOut?: React.PointerEventHandler<HTMLDivElement> | undefined;
-    onPointerOutCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
-    onGotPointerCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
-    onGotPointerCaptureCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
-    onLostPointerCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
-    onLostPointerCaptureCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
-    onScroll?: React.UIEventHandler<HTMLDivElement> | undefined;
-    onScrollCapture?: React.UIEventHandler<HTMLDivElement> | undefined;
-    onWheel?: React.WheelEventHandler<HTMLDivElement> | undefined;
-    onWheelCapture?: React.WheelEventHandler<HTMLDivElement> | undefined;
-    onAnimationStart?: React.AnimationEventHandler<HTMLDivElement> | undefined;
-    onAnimationStartCapture?: React.AnimationEventHandler<HTMLDivElement> | undefined;
-    onAnimationEnd?: React.AnimationEventHandler<HTMLDivElement> | undefined;
-    onAnimationEndCapture?: React.AnimationEventHandler<HTMLDivElement> | undefined;
-    onAnimationIteration?: React.AnimationEventHandler<HTMLDivElement> | undefined;
-    onAnimationIterationCapture?: React.AnimationEventHandler<HTMLDivElement> | undefined;
-    onTransitionEnd?: React.TransitionEventHandler<HTMLDivElement> | undefined;
-    onTransitionEndCapture?: React.TransitionEventHandler<HTMLDivElement> | undefined;
+    onCopy?: React.ClipboardEventHandler<HTMLInputElement> | undefined;
+    onCopyCapture?: React.ClipboardEventHandler<HTMLInputElement> | undefined;
+    onCut?: React.ClipboardEventHandler<HTMLInputElement> | undefined;
+    onCutCapture?: React.ClipboardEventHandler<HTMLInputElement> | undefined;
+    onPaste?: React.ClipboardEventHandler<HTMLInputElement> | undefined;
+    onPasteCapture?: React.ClipboardEventHandler<HTMLInputElement> | undefined;
+    onCompositionEnd?: React.CompositionEventHandler<HTMLInputElement> | undefined;
+    onCompositionEndCapture?: React.CompositionEventHandler<HTMLInputElement> | undefined;
+    onCompositionStart?: React.CompositionEventHandler<HTMLInputElement> | undefined;
+    onCompositionStartCapture?: React.CompositionEventHandler<HTMLInputElement> | undefined;
+    onCompositionUpdate?: React.CompositionEventHandler<HTMLInputElement> | undefined;
+    onCompositionUpdateCapture?: React.CompositionEventHandler<HTMLInputElement> | undefined;
+    onFocus?: React.FocusEventHandler<HTMLInputElement> | undefined;
+    onFocusCapture?: React.FocusEventHandler<HTMLInputElement> | undefined;
+    onBlur?: React.FocusEventHandler<HTMLInputElement> | undefined;
+    onBlurCapture?: React.FocusEventHandler<HTMLInputElement> | undefined;
+    onChange?: React.ChangeEventHandler<HTMLInputElement> | undefined;
+    onChangeCapture?: React.FormEventHandler<HTMLInputElement> | undefined;
+    onBeforeInput?: React.FormEventHandler<HTMLInputElement> | undefined;
+    onBeforeInputCapture?: React.FormEventHandler<HTMLInputElement> | undefined;
+    onInput?: React.FormEventHandler<HTMLInputElement> | undefined;
+    onInputCapture?: React.FormEventHandler<HTMLInputElement> | undefined;
+    onReset?: React.FormEventHandler<HTMLInputElement> | undefined;
+    onResetCapture?: React.FormEventHandler<HTMLInputElement> | undefined;
+    onSubmit?: React.FormEventHandler<HTMLInputElement> | undefined;
+    onSubmitCapture?: React.FormEventHandler<HTMLInputElement> | undefined;
+    onInvalid?: React.FormEventHandler<HTMLInputElement> | undefined;
+    onInvalidCapture?: React.FormEventHandler<HTMLInputElement> | undefined;
+    onLoad?: React.ReactEventHandler<HTMLInputElement> | undefined;
+    onLoadCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
+    onError?: React.ReactEventHandler<HTMLInputElement> | undefined;
+    onErrorCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
+    onKeyDown?: React.KeyboardEventHandler<HTMLInputElement> | undefined;
+    onKeyDownCapture?: React.KeyboardEventHandler<HTMLInputElement> | undefined;
+    onKeyPress?: React.KeyboardEventHandler<HTMLInputElement> | undefined;
+    onKeyPressCapture?: React.KeyboardEventHandler<HTMLInputElement> | undefined;
+    onKeyUp?: React.KeyboardEventHandler<HTMLInputElement> | undefined;
+    onKeyUpCapture?: React.KeyboardEventHandler<HTMLInputElement> | undefined;
+    onAbort?: React.ReactEventHandler<HTMLInputElement> | undefined;
+    onAbortCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
+    onCanPlay?: React.ReactEventHandler<HTMLInputElement> | undefined;
+    onCanPlayCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
+    onCanPlayThrough?: React.ReactEventHandler<HTMLInputElement> | undefined;
+    onCanPlayThroughCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
+    onDurationChange?: React.ReactEventHandler<HTMLInputElement> | undefined;
+    onDurationChangeCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
+    onEmptied?: React.ReactEventHandler<HTMLInputElement> | undefined;
+    onEmptiedCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
+    onEncrypted?: React.ReactEventHandler<HTMLInputElement> | undefined;
+    onEncryptedCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
+    onEnded?: React.ReactEventHandler<HTMLInputElement> | undefined;
+    onEndedCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
+    onLoadedData?: React.ReactEventHandler<HTMLInputElement> | undefined;
+    onLoadedDataCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
+    onLoadedMetadata?: React.ReactEventHandler<HTMLInputElement> | undefined;
+    onLoadedMetadataCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
+    onLoadStart?: React.ReactEventHandler<HTMLInputElement> | undefined;
+    onLoadStartCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
+    onPause?: React.ReactEventHandler<HTMLInputElement> | undefined;
+    onPauseCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
+    onPlay?: React.ReactEventHandler<HTMLInputElement> | undefined;
+    onPlayCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
+    onPlaying?: React.ReactEventHandler<HTMLInputElement> | undefined;
+    onPlayingCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
+    onProgress?: React.ReactEventHandler<HTMLInputElement> | undefined;
+    onProgressCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
+    onRateChange?: React.ReactEventHandler<HTMLInputElement> | undefined;
+    onRateChangeCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
+    onSeeked?: React.ReactEventHandler<HTMLInputElement> | undefined;
+    onSeekedCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
+    onSeeking?: React.ReactEventHandler<HTMLInputElement> | undefined;
+    onSeekingCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
+    onStalled?: React.ReactEventHandler<HTMLInputElement> | undefined;
+    onStalledCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
+    onSuspend?: React.ReactEventHandler<HTMLInputElement> | undefined;
+    onSuspendCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
+    onTimeUpdate?: React.ReactEventHandler<HTMLInputElement> | undefined;
+    onTimeUpdateCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
+    onVolumeChange?: React.ReactEventHandler<HTMLInputElement> | undefined;
+    onVolumeChangeCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
+    onWaiting?: React.ReactEventHandler<HTMLInputElement> | undefined;
+    onWaitingCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
+    onAuxClick?: React.MouseEventHandler<HTMLInputElement> | undefined;
+    onAuxClickCapture?: React.MouseEventHandler<HTMLInputElement> | undefined;
+    onClickCapture?: React.MouseEventHandler<HTMLInputElement> | undefined;
+    onContextMenu?: React.MouseEventHandler<HTMLInputElement> | undefined;
+    onContextMenuCapture?: React.MouseEventHandler<HTMLInputElement> | undefined;
+    onDoubleClick?: React.MouseEventHandler<HTMLInputElement> | undefined;
+    onDoubleClickCapture?: React.MouseEventHandler<HTMLInputElement> | undefined;
+    onDragCapture?: React.DragEventHandler<HTMLInputElement> | undefined;
+    onDragEndCapture?: React.DragEventHandler<HTMLInputElement> | undefined;
+    onDragEnter?: React.DragEventHandler<HTMLInputElement> | undefined;
+    onDragEnterCapture?: React.DragEventHandler<HTMLInputElement> | undefined;
+    onDragExit?: React.DragEventHandler<HTMLInputElement> | undefined;
+    onDragExitCapture?: React.DragEventHandler<HTMLInputElement> | undefined;
+    onDragLeave?: React.DragEventHandler<HTMLInputElement> | undefined;
+    onDragLeaveCapture?: React.DragEventHandler<HTMLInputElement> | undefined;
+    onDragOver?: React.DragEventHandler<HTMLInputElement> | undefined;
+    onDragOverCapture?: React.DragEventHandler<HTMLInputElement> | undefined;
+    onDragStartCapture?: React.DragEventHandler<HTMLInputElement> | undefined;
+    onDrop?: React.DragEventHandler<HTMLInputElement> | undefined;
+    onDropCapture?: React.DragEventHandler<HTMLInputElement> | undefined;
+    onMouseDown?: React.MouseEventHandler<HTMLInputElement> | undefined;
+    onMouseDownCapture?: React.MouseEventHandler<HTMLInputElement> | undefined;
+    onMouseMove?: React.MouseEventHandler<HTMLInputElement> | undefined;
+    onMouseMoveCapture?: React.MouseEventHandler<HTMLInputElement> | undefined;
+    onMouseOut?: React.MouseEventHandler<HTMLInputElement> | undefined;
+    onMouseOutCapture?: React.MouseEventHandler<HTMLInputElement> | undefined;
+    onMouseOver?: React.MouseEventHandler<HTMLInputElement> | undefined;
+    onMouseOverCapture?: React.MouseEventHandler<HTMLInputElement> | undefined;
+    onMouseUp?: React.MouseEventHandler<HTMLInputElement> | undefined;
+    onMouseUpCapture?: React.MouseEventHandler<HTMLInputElement> | undefined;
+    onSelect?: React.ReactEventHandler<HTMLInputElement> | undefined;
+    onSelectCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
+    onTouchCancel?: React.TouchEventHandler<HTMLInputElement> | undefined;
+    onTouchCancelCapture?: React.TouchEventHandler<HTMLInputElement> | undefined;
+    onTouchEnd?: React.TouchEventHandler<HTMLInputElement> | undefined;
+    onTouchEndCapture?: React.TouchEventHandler<HTMLInputElement> | undefined;
+    onTouchMove?: React.TouchEventHandler<HTMLInputElement> | undefined;
+    onTouchMoveCapture?: React.TouchEventHandler<HTMLInputElement> | undefined;
+    onTouchStart?: React.TouchEventHandler<HTMLInputElement> | undefined;
+    onTouchStartCapture?: React.TouchEventHandler<HTMLInputElement> | undefined;
+    onPointerDown?: React.PointerEventHandler<HTMLInputElement> | undefined;
+    onPointerDownCapture?: React.PointerEventHandler<HTMLInputElement> | undefined;
+    onPointerMove?: React.PointerEventHandler<HTMLInputElement> | undefined;
+    onPointerMoveCapture?: React.PointerEventHandler<HTMLInputElement> | undefined;
+    onPointerUp?: React.PointerEventHandler<HTMLInputElement> | undefined;
+    onPointerUpCapture?: React.PointerEventHandler<HTMLInputElement> | undefined;
+    onPointerCancel?: React.PointerEventHandler<HTMLInputElement> | undefined;
+    onPointerCancelCapture?: React.PointerEventHandler<HTMLInputElement> | undefined;
+    onPointerEnter?: React.PointerEventHandler<HTMLInputElement> | undefined;
+    onPointerEnterCapture?: React.PointerEventHandler<HTMLInputElement> | undefined;
+    onPointerLeave?: React.PointerEventHandler<HTMLInputElement> | undefined;
+    onPointerLeaveCapture?: React.PointerEventHandler<HTMLInputElement> | undefined;
+    onPointerOver?: React.PointerEventHandler<HTMLInputElement> | undefined;
+    onPointerOverCapture?: React.PointerEventHandler<HTMLInputElement> | undefined;
+    onPointerOut?: React.PointerEventHandler<HTMLInputElement> | undefined;
+    onPointerOutCapture?: React.PointerEventHandler<HTMLInputElement> | undefined;
+    onGotPointerCapture?: React.PointerEventHandler<HTMLInputElement> | undefined;
+    onGotPointerCaptureCapture?: React.PointerEventHandler<HTMLInputElement> | undefined;
+    onLostPointerCapture?: React.PointerEventHandler<HTMLInputElement> | undefined;
+    onLostPointerCaptureCapture?: React.PointerEventHandler<HTMLInputElement> | undefined;
+    onScroll?: React.UIEventHandler<HTMLInputElement> | undefined;
+    onScrollCapture?: React.UIEventHandler<HTMLInputElement> | undefined;
+    onWheel?: React.WheelEventHandler<HTMLInputElement> | undefined;
+    onWheelCapture?: React.WheelEventHandler<HTMLInputElement> | undefined;
+    onAnimationStart?: React.AnimationEventHandler<HTMLInputElement> | undefined;
+    onAnimationStartCapture?: React.AnimationEventHandler<HTMLInputElement> | undefined;
+    onAnimationEnd?: React.AnimationEventHandler<HTMLInputElement> | undefined;
+    onAnimationEndCapture?: React.AnimationEventHandler<HTMLInputElement> | undefined;
+    onAnimationIteration?: React.AnimationEventHandler<HTMLInputElement> | undefined;
+    onAnimationIterationCapture?: React.AnimationEventHandler<HTMLInputElement> | undefined;
+    onTransitionEnd?: React.TransitionEventHandler<HTMLInputElement> | undefined;
+    onTransitionEndCapture?: React.TransitionEventHandler<HTMLInputElement> | undefined;
+    list?: string | undefined;
+    step?: string | number | undefined;
     dir?: string | undefined;
     is?: string | undefined;
+    value?: string | number | readonly string[] | undefined;
+    disabled?: boolean | undefined;
+    multiple?: boolean | undefined;
     translate?: "no" | "yes" | undefined;
     defaultChecked?: boolean | undefined;
     defaultValue?: string | number | readonly string[] | undefined;
@@ -256,10 +270,25 @@ declare const Container: React.ComponentType<{
     results?: number | undefined;
     security?: string | undefined;
     unselectable?: "off" | "on" | undefined;
+    alt?: string | undefined;
+    src?: string | undefined;
+    autoFocus?: boolean | undefined;
+    formAction?: string | undefined;
+    formEncType?: string | undefined;
+    formMethod?: string | undefined;
+    formNoValidate?: boolean | undefined;
+    formTarget?: string | undefined;
+    autoComplete?: string | undefined;
+    accept?: string | undefined;
+    capture?: string | boolean | undefined;
+    checked?: boolean | undefined;
+    maxLength?: number | undefined;
+    minLength?: number | undefined;
+    readOnly?: boolean | undefined;
+    required?: boolean | undefined;
+    size?: number | undefined;
     hidden?: boolean | undefined;
     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;
-    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) & number;
-    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;
     cursor?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
     display?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
     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;
@@ -320,16 +349,14 @@ declare const Container: React.ComponentType<{
     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;
     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;
     borderbottomRightRadius?: ([never, never] | [never, never, never]) | undefined;
-    disabled?: boolean | undefined;
     controlSize: number;
     invalid?: boolean | undefined;
-    innerRef?: React.Ref<HTMLDivElement> | undefined;
+    innerRef?: React.Ref<HTMLInputElement> | undefined;
 }>;
-declare type ToggleProps = Omit<ComponentProps<typeof Container>, 'value' | 'type' | 'checked' | 'onChange' | 'height' | 'controlSize'> & {
+declare type ToggleProps = Omit<ComponentProps<typeof ToggleInput>, 'value' | 'type' | 'checked' | 'onChange' | 'height' | 'controlSize'> & {
     value?: boolean;
     onChange: ((value: boolean) => void | Promise<void>) | false;
     labelledBy?: string;
-    name?: string;
     invalid?: boolean;
     height?: number;
     color?: string;
@@ -337,6 +364,5 @@ declare type ToggleProps = Omit<ComponentProps<typeof Container>, 'value' | 'typ
     testId?: string;
     describedBy?: string;
 };
-export declare const toggleProperties: string[];
 declare const Toggle: React.FC<ToggleProps>;
 export default Toggle;

package/dist/index.d.ts

@@ -1,3 +1,2 @@
 import Toggle from './Toggle';
-import LabelledToggle from './LabelledToggle';
-export { Toggle, LabelledToggle };
+export { Toggle };

package/es/Toggle.js

@@ -9,7 +9,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 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; }
 
 import React from 'react';
-import { createComponent, createStyledComponent } from '@cloudflare/style-container';
+import { createStyledComponent } from '@cloudflare/style-container';
 import { isDarkMode } from '@cloudflare/style-const';
 
 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>`;
@@ -19,7 +19,7 @@ const offSvg = darkMode => `<svg width="24" height="24" viewBox="0 0 24 24" fill
 const backgroundImage = darkMode => `url('data:image/svg+xml;utf8,${onSvg(darkMode)}'), url('data:image/svg+xml;utf8,${offSvg(darkMode)}')`;
 
 const transition = 'all .25s ease';
-const Container = createStyledComponent(({
+const ToggleInput = createStyledComponent(({
   theme,
   height,
   controlSize,
@@ -31,6 +31,7 @@ const Container = createStyledComponent(({
   var _color, _borderColor;
 
   return _objectSpread({
+    appearance: 'none',
     position: 'relative',
     display: 'inline-block',
     width: `${height * 2}px`,
@@ -39,108 +40,81 @@ const Container = createStyledComponent(({
     opacity: disabled ? 0.5 : 1,
     transition: 'opacity .25s ease',
     borderRadius: `${controlSize * 2}px`,
-    '> input': {
+    cursor: disabled ? 'not-allowed' : 'pointer'
+  }, theme.mixins.focus({
+    invalid
+  }), {
+    ':before': {
+      content: '" "',
       position: 'absolute',
       top: 0,
       right: 0,
       bottom: 0,
       left: 0,
-      height: '100%',
-      width: '100%',
-      margin: 0,
-      opacity: 0,
-      cursor: disabled ? 'not-allowed' : 'pointer'
+      color: theme.colors.white,
+      backgroundColor: theme.colors.gray[4],
+      backgroundImage: backgroundImage(isDarkMode()),
+      backgroundPosition: `${height * 0.1}px 0, ${height * 0.9}px 0`,
+      backgroundRepeat: 'no-repeat',
+      backgroundSize: 'contain',
+      border: `1px solid ${theme.colors.gray[2]}`,
+      borderRadius: `${height * 2}px`,
+      transition
+    },
+    ':after': {
+      content: '" "',
+      position: 'absolute',
+      top: `${(height - controlSize) / 2}px`,
+      left: `${(height - controlSize) / 2}px`,
+      boxSizing: 'border-box',
+      width: `${controlSize}px`,
+      height: `${controlSize}px`,
+      backgroundColor: theme.colors.background,
+      borderRadius: `${controlSize * 2}px`,
+      boxShadow: `0 0 2px 1px ${theme.colors.gray[2]}`,
+      transition
     },
-    '> input[type=checkbox]:checked + div:after': {
+    '&:checked:after': {
       transform: `translateX(${height}px)`,
       boxShadow: 'none'
     },
-    '> input[type=checkbox]:checked + div:before': {
+    '&:checked:before': {
       backgroundColor: (_color = color) !== null && _color !== void 0 ? _color : theme.colors.green[5],
       borderColor: (_borderColor = borderColor) !== null && _borderColor !== void 0 ? _borderColor : theme.colors.green[2]
     }
-  }, theme.mixins.focus({
-    invalid,
-    borderRadius: height / 2
-  }));
-});
-const ToggleIcon = createComponent(({
-  theme,
-  height,
-  controlSize
-}) => ({
-  pointerEvents: 'none',
-  ':before': {
-    content: '" "',
-    position: 'absolute',
-    top: 0,
-    right: 0,
-    bottom: 0,
-    left: 0,
-    color: theme.colors.white,
-    backgroundColor: theme.colors.gray[4],
-    backgroundImage: backgroundImage(isDarkMode()),
-    backgroundPosition: `${height * 0.1}px 0, ${height * 0.9}px 0`,
-    backgroundRepeat: 'no-repeat',
-    backgroundSize: 'contain',
-    border: `1px solid ${theme.colors.gray[2]}`,
-    borderRadius: `${height * 2}px`,
-    transition
-  },
-  ':after': {
-    content: '" "',
-    position: 'absolute',
-    top: `${(height - controlSize) / 2}px`,
-    left: `${(height - controlSize) / 2}px`,
-    boxSizing: 'border-box',
-    width: `${controlSize}px`,
-    height: `${controlSize}px`,
-    backgroundColor: theme.colors.background,
-    borderRadius: `${controlSize * 2}px`,
-    boxShadow: `0 0 2px 1px ${theme.colors.gray[2]}`,
-    transition
-  }
-}));
-// Used by LabelledToggle
-export const toggleProperties = ['value', 'onChange', 'labelledBy', 'invalid', 'height', 'color', 'testId', 'describedBy'];
+  });
+}, 'input');
 
 const Toggle = (_ref) => {
-  let id = _ref.id,
-      value = _ref.value,
+  let value = _ref.value,
+      testId = _ref.testId,
+      onChange = _ref.onChange,
       labelledBy = _ref.labelledBy,
       describedBy = _ref.describedBy,
+      className = _ref.className,
       disabled = _ref.disabled,
-      onChange = _ref.onChange,
-      testId = _ref.testId,
       color = _ref.color,
       borderColor = _ref.borderColor,
       invalid = _ref.invalid,
-      name = _ref.name,
       _ref$height = _ref.height,
       height = _ref$height === void 0 ? 24 : _ref$height,
-      rest = _objectWithoutProperties(_ref, ["id", "value", "labelledBy", "describedBy", "disabled", "onChange", "testId", "color", "borderColor", "invalid", "name", "height"]);
+      rest = _objectWithoutProperties(_ref, ["value", "testId", "onChange", "labelledBy", "describedBy", "className", "disabled", "color", "borderColor", "invalid", "height"]);
 
   const controlSize = height - 4;
-  return /*#__PURE__*/React.createElement(Container, _extends({}, rest, {
+  return /*#__PURE__*/React.createElement(ToggleInput, _extends({}, rest, {
+    className: className,
+    type: "checkbox",
+    checked: value,
     height: height,
     controlSize: controlSize,
-    disabled: disabled,
     color: color,
     borderColor: borderColor,
-    invalid: invalid
-  }), /*#__PURE__*/React.createElement("input", {
-    id: id,
-    type: "checkbox",
-    checked: value,
-    name: name,
+    disabled: disabled,
+    invalid: invalid,
     onChange: disabled || !onChange ? undefined : e => onChange(e.target.checked),
+    "data-testid": testId,
     "aria-labelledby": labelledBy,
-    "aria-describedby": describedBy,
-    disabled: disabled,
-    "data-testid": testId
-  }), /*#__PURE__*/React.createElement(ToggleIcon, {
-    height: height,
-    controlSize: controlSize
+    "aria-describedby": describedBy
   }));
 };
 

package/es/index.js

@@ -1,3 +1,2 @@
 import Toggle from './Toggle';
-import LabelledToggle from './LabelledToggle';
-export { Toggle, LabelledToggle };
+export { Toggle };

package/lib/Toggle.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.toggleProperties = void 0;
+exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -36,7 +36,7 @@ var backgroundImage = function backgroundImage(darkMode) {
 };
 
 var transition = 'all .25s ease';
-var Container = (0, _styleContainer.createStyledComponent)(function (_ref) {
+var ToggleInput = (0, _styleContainer.createStyledComponent)(function (_ref) {
   var _color, _borderColor;
 
   var theme = _ref.theme,
@@ -47,6 +47,7 @@ var Container = (0, _styleContainer.createStyledComponent)(function (_ref) {
       invalid = _ref.invalid,
       disabled = _ref.disabled;
   return _objectSpread({
+    appearance: 'none',
     position: 'relative',
     display: 'inline-block',
     width: "".concat(height * 2, "px"),
@@ -55,37 +56,10 @@ var Container = (0, _styleContainer.createStyledComponent)(function (_ref) {
     opacity: disabled ? 0.5 : 1,
     transition: 'opacity .25s ease',
     borderRadius: "".concat(controlSize * 2, "px"),
-    '> input': {
-      position: 'absolute',
-      top: 0,
-      right: 0,
-      bottom: 0,
-      left: 0,
-      height: '100%',
-      width: '100%',
-      margin: 0,
-      opacity: 0,
-      cursor: disabled ? 'not-allowed' : 'pointer'
-    },
-    '> input[type=checkbox]:checked + div:after': {
-      transform: "translateX(".concat(height, "px)"),
-      boxShadow: 'none'
-    },
-    '> input[type=checkbox]:checked + div:before': {
-      backgroundColor: (_color = color) !== null && _color !== void 0 ? _color : theme.colors.green[5],
-      borderColor: (_borderColor = borderColor) !== null && _borderColor !== void 0 ? _borderColor : theme.colors.green[2]
-    }
+    cursor: disabled ? 'not-allowed' : 'pointer'
   }, theme.mixins.focus({
-    invalid: invalid,
-    borderRadius: height / 2
-  }));
-});
-var ToggleIcon = (0, _styleContainer.createComponent)(function (_ref2) {
-  var theme = _ref2.theme,
-      height = _ref2.height,
-      controlSize = _ref2.controlSize;
-  return {
-    pointerEvents: 'none',
+    invalid: invalid
+  }), {
     ':before': {
       content: '" "',
       position: 'absolute',
@@ -115,52 +89,50 @@ var ToggleIcon = (0, _styleContainer.createComponent)(function (_ref2) {
       borderRadius: "".concat(controlSize * 2, "px"),
       boxShadow: "0 0 2px 1px ".concat(theme.colors.gray[2]),
       transition: transition
+    },
+    '&:checked:after': {
+      transform: "translateX(".concat(height, "px)"),
+      boxShadow: 'none'
+    },
+    '&:checked:before': {
+      backgroundColor: (_color = color) !== null && _color !== void 0 ? _color : theme.colors.green[5],
+      borderColor: (_borderColor = borderColor) !== null && _borderColor !== void 0 ? _borderColor : theme.colors.green[2]
     }
-  };
-});
-// Used by LabelledToggle
-var toggleProperties = ['value', 'onChange', 'labelledBy', 'invalid', 'height', 'color', 'testId', 'describedBy'];
-exports.toggleProperties = toggleProperties;
-
-var Toggle = function Toggle(_ref3) {
-  var id = _ref3.id,
-      value = _ref3.value,
-      labelledBy = _ref3.labelledBy,
-      describedBy = _ref3.describedBy,
-      disabled = _ref3.disabled,
-      onChange = _ref3.onChange,
-      testId = _ref3.testId,
-      color = _ref3.color,
-      borderColor = _ref3.borderColor,
-      invalid = _ref3.invalid,
-      name = _ref3.name,
-      _ref3$height = _ref3.height,
-      height = _ref3$height === void 0 ? 24 : _ref3$height,
-      rest = _objectWithoutProperties(_ref3, ["id", "value", "labelledBy", "describedBy", "disabled", "onChange", "testId", "color", "borderColor", "invalid", "name", "height"]);
+  });
+}, 'input');
+
+var Toggle = function Toggle(_ref2) {
+  var value = _ref2.value,
+      testId = _ref2.testId,
+      onChange = _ref2.onChange,
+      labelledBy = _ref2.labelledBy,
+      describedBy = _ref2.describedBy,
+      className = _ref2.className,
+      disabled = _ref2.disabled,
+      color = _ref2.color,
+      borderColor = _ref2.borderColor,
+      invalid = _ref2.invalid,
+      _ref2$height = _ref2.height,
+      height = _ref2$height === void 0 ? 24 : _ref2$height,
+      rest = _objectWithoutProperties(_ref2, ["value", "testId", "onChange", "labelledBy", "describedBy", "className", "disabled", "color", "borderColor", "invalid", "height"]);
 
   var controlSize = height - 4;
-  return /*#__PURE__*/_react.default.createElement(Container, _extends({}, rest, {
+  return /*#__PURE__*/_react.default.createElement(ToggleInput, _extends({}, rest, {
+    className: className,
+    type: "checkbox",
+    checked: value,
     height: height,
     controlSize: controlSize,
-    disabled: disabled,
     color: color,
     borderColor: borderColor,
-    invalid: invalid
-  }), /*#__PURE__*/_react.default.createElement("input", {
-    id: id,
-    type: "checkbox",
-    checked: value,
-    name: name,
+    disabled: disabled,
+    invalid: invalid,
     onChange: disabled || !onChange ? undefined : function (e) {
       return onChange(e.target.checked);
     },
+    "data-testid": testId,
     "aria-labelledby": labelledBy,
-    "aria-describedby": describedBy,
-    disabled: disabled,
-    "data-testid": testId
-  }), /*#__PURE__*/_react.default.createElement(ToggleIcon, {
-    height: height,
-    controlSize: controlSize
+    "aria-describedby": describedBy
   }));
 };
 

package/lib/index.js

@@ -9,15 +9,7 @@ Object.defineProperty(exports, "Toggle", {
     return _Toggle.default;
   }
 });
-Object.defineProperty(exports, "LabelledToggle", {
-  enumerable: true,
-  get: function get() {
-    return _LabelledToggle.default;
-  }
-});
 
 var _Toggle = _interopRequireDefault(require("./Toggle"));
 
-var _LabelledToggle = _interopRequireDefault(require("./LabelledToggle"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudflare/component-toggle",
   "description": "Cloudflare Toggle Component",
-  "version": "4.2.42",
+  "version": "5.0.0",
   "main": "lib/index.js",
   "module": "es/index.js",
   "author": "James Kyle <jkyle@cloudflare.com>",
@@ -11,12 +11,12 @@
     "access": "public"
   },
   "dependencies": {
-    "@cloudflare/component-icon": "^6.6.5",
-    "@cloudflare/elements": "^1.11.37",
-    "@cloudflare/intl-react": "^1.9.23",
-    "@cloudflare/style-const": "^5.1.20",
-    "@cloudflare/style-container": "^7.5.26",
-    "@cloudflare/types": "^6.11.18",
+    "@cloudflare/component-icon": "^6.6.9",
+    "@cloudflare/elements": "^1.11.39",
+    "@cloudflare/intl-react": "^1.9.24",
+    "@cloudflare/style-const": "^5.2.0",
+    "@cloudflare/style-container": "^7.6.0",
+    "@cloudflare/types": "^6.11.19",
     "prop-types": "^15.6.0"
   },
   "peerDependencies": {
@@ -33,5 +33,5 @@
     "test-coverage": "stratus test --coverage",
     "test-watch": "stratus test --watch"
   },
-  "gitHead": "f42cb1c7695dc47de8d5d7044d9d7463779b962b"
+  "gitHead": "b7c207b9d1a4a78c3412f7ad4185e92ec36c4f5e"
 }

package/dist/LabelledToggle.d.ts

@@ -1,9 +0,0 @@
-import React, { ComponentProps, ReactNode } from 'react';
-import Toggle from './Toggle';
-declare type Props = ComponentProps<typeof Toggle> & {
-    label?: ReactNode;
-    error?: ReactNode;
-    layout?: 'vertical' | 'horizontal';
-};
-declare const LabelledToggle: React.FC<Props>;
-export default LabelledToggle;

package/es/LabelledToggle.js

@@ -1,51 +0,0 @@
-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); }
-
-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; }
-
-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; }
-
-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; }
-
-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; }
-
-import React from 'react';
-import { createStyledComponent } from '@cloudflare/style-container';
-import { Div, Label } from '@cloudflare/elements';
-import Toggle, { toggleProperties } from './Toggle';
-const ToggleError = createStyledComponent(({
-  theme
-}) => _objectSpread({}, theme.mixins.error()));
-
-const LabelledToggle = (_ref) => {
-  let label = _ref.label,
-      error = _ref.error,
-      layout = _ref.layout,
-      rest = _objectWithoutProperties(_ref, ["label", "error", "layout"]);
-
-  const wrapperProps = {};
-  const toggleProps = {}; // Any properties which don't belong to the Toggle directly are applied to
-  // wrapper
-
-  Object.keys(rest).forEach(prop => {
-    if (toggleProperties.includes(prop)) {
-      toggleProps[prop] = rest[prop];
-    } else {
-      wrapperProps[prop] = rest[prop];
-    }
-  }, {});
-  const isVertical = layout === 'vertical';
-  const toggle = /*#__PURE__*/React.createElement(Toggle, rest);
-  const err = !!error && /*#__PURE__*/React.createElement(ToggleError, null, error);
-  return /*#__PURE__*/React.createElement(Div, _extends({
-    textAlign: "left"
-  }, wrapperProps), label ? /*#__PURE__*/React.createElement(Label, {
-    display: "flex",
-    alignItems: "center",
-    flexDirection: isVertical ? 'column' : 'row'
-  }, toggle, isVertical && err, /*#__PURE__*/React.createElement(Div, {
-    ml: 2,
-    mt: isVertical ? 1 : 0
-  }, label)) : toggle, !isVertical && err);
-};
-
-export default LabelledToggle;

package/lib/LabelledToggle.js

@@ -1,75 +0,0 @@
-"use strict";
-
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _styleContainer = require("@cloudflare/style-container");
-
-var _elements = require("@cloudflare/elements");
-
-var _Toggle = _interopRequireWildcard(require("./Toggle"));
-
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-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); }
-
-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; }
-
-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; }
-
-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; }
-
-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; }
-
-var ToggleError = (0, _styleContainer.createStyledComponent)(function (_ref) {
-  var theme = _ref.theme;
-  return _objectSpread({}, theme.mixins.error());
-});
-
-var LabelledToggle = function LabelledToggle(_ref2) {
-  var label = _ref2.label,
-      error = _ref2.error,
-      layout = _ref2.layout,
-      rest = _objectWithoutProperties(_ref2, ["label", "error", "layout"]);
-
-  var wrapperProps = {};
-  var toggleProps = {}; // Any properties which don't belong to the Toggle directly are applied to
-  // wrapper
-
-  Object.keys(rest).forEach(function (prop) {
-    if (_Toggle.toggleProperties.includes(prop)) {
-      toggleProps[prop] = rest[prop];
-    } else {
-      wrapperProps[prop] = rest[prop];
-    }
-  }, {});
-  var isVertical = layout === 'vertical';
-
-  var toggle = /*#__PURE__*/_react.default.createElement(_Toggle.default, rest);
-
-  var err = !!error && /*#__PURE__*/_react.default.createElement(ToggleError, null, error);
-
-  return /*#__PURE__*/_react.default.createElement(_elements.Div, _extends({
-    textAlign: "left"
-  }, wrapperProps), label ? /*#__PURE__*/_react.default.createElement(_elements.Label, {
-    display: "flex",
-    alignItems: "center",
-    flexDirection: isVertical ? 'column' : 'row'
-  }, toggle, isVertical && err, /*#__PURE__*/_react.default.createElement(_elements.Div, {
-    ml: 2,
-    mt: isVertical ? 1 : 0
-  }, label)) : toggle, !isVertical && err);
-};
-
-var _default = LabelledToggle;
-exports.default = _default;