@hypothesis/frontend-shared - npm Package Compare versions

Comparing version 3.2.0 to 3.3.0

CHANGELOG.md

@@ -8,2 +8,24 @@ # Changelog
 
+## [v3.3.0] - 2021-06-28
+
+Updates `Modal` to allow overflow/scrolling of content. Adds numerous simple
+components for laying out and styling content.
+
+### Added
+
+- Wrap `Frame`, `Card` and `Actions` patterns with components [#122](https://github.com/hypothesis/frontend-shared/pull/122)
+- Text input patterns and simple components [#114](https://github.com/hypothesis/frontend-shared/pull/114)
+- Allow for overflow constraints on content within Modals [#112](https://github.com/hypothesis/frontend-shared/pull/112)
+- Add additional utility mixins and classes [#110](https://github.com/hypothesis/frontend-shared/pull/110)
+
+### Changed
+
+- Refine structure and naming of Pattern-library components and sections [#113](https://github.com/hypothesis/frontend-shared/pull/113)
+- Adjust utils and patterns based on real-world use [#111](https://github.com/hypothesis/frontend-shared/pull/111)
+
+### Fixed
+
+- Ensure the `Panel` component registers its icons [#117](https://github.com/hypothesis/frontend-shared/pull/117)
+- Fix `IconButton` horizontal icon alignment on narrow screens [#109](https://github.com/hypothesis/frontend-shared/pull/109)
+
 ## [v3.2.0] - 2021-06-15
@@ -10,0 +32,0 @@

lib/components/buttons.d.ts

@@ -106,3 +106,2 @@ /**
     class?: string;
-    onToggle?: import("preact").JSX.GenericEventHandler<HTMLButtonElement>;
     accept?: string;
@@ -238,2 +237,3 @@ acceptCharset?: string;
     onCompositionUpdateCapture?: import("preact").JSX.CompositionEventHandler<HTMLButtonElement>;
+    onToggle?: import("preact").JSX.GenericEventHandler<HTMLButtonElement>;
     onFocus?: import("preact").JSX.FocusEventHandler<HTMLButtonElement>;
@@ -394,3 +394,3 @@ onFocusCapture?: import("preact").JSX.FocusEventHandler<HTMLButtonElement>;
  */
-export type ButtonBaseProps = ButtonProps & Pick<import("preact").JSX.HTMLAttributes<HTMLButtonElement>, "max" | "required" | "default" | "high" | "low" | "disabled" | "start" | "open" | "media" | "loading" | "hidden" | "data" | "dir" | "form" | "label" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "async" | "readonly" | "defer" | "manifest" | "content" | "height" | "width" | "target" | "type" | "key" | "headers" | "name" | "className" | "class" | "onToggle" | "accept" | "acceptCharset" | "accessKey" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "autocomplete" | "autoComplete" | "autocorrect" | "autoCorrect" | "autofocus" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "cols" | "colSpan" | "contentEditable" | "contextMenu" | "controls" | "controlsList" | "coords" | "crossOrigin" | "dateTime" | "disableRemotePlayback" | "download" | "draggable" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "href" | "hrefLang" | "for" | "htmlFor" | "httpEquiv" | "icon" | "id" | "inputMode" | "integrity" | "is" | "keyParams" | "keyType" | "kind" | "lang" | "list" | "loop" | "marginHeight" | "marginWidth" | "maxLength" | "mediaGroup" | "method" | "min" | "minLength" | "multiple" | "muted" | "nonce" | "noValidate" | "optimum" | "placeholder" | "playsInline" | "poster" | "preload" | "radioGroup" | "readOnly" | "rel" | "role" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "sizes" | "spellcheck" | "src" | "srcset" | "srcDoc" | "srcLang" | "srcSet" | "step" | "tabIndex" | "useMap" | "value" | "volume" | "wmode" | "wrap" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "ref" | "jsx" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onInput" | "onInputCapture" | "onSearch" | "onSearchCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onReset" | "onResetCapture" | "onFormData" | "onFormDataCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDblClick" | "onDblClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseEnterCapture" | "onMouseLeave" | "onMouseLeaveCapture" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerOut" | "onPointerOutCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "children" | "dangerouslySetInnerHTML">;
+export type ButtonBaseProps = ButtonProps & Pick<import("preact").JSX.HTMLAttributes<HTMLButtonElement>, "max" | "required" | "default" | "high" | "low" | "disabled" | "start" | "open" | "media" | "loading" | "hidden" | "data" | "dir" | "form" | "label" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "async" | "readonly" | "defer" | "manifest" | "content" | "height" | "width" | "target" | "type" | "key" | "headers" | "name" | "className" | "class" | "accept" | "acceptCharset" | "accessKey" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "autocomplete" | "autoComplete" | "autocorrect" | "autoCorrect" | "autofocus" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "cols" | "colSpan" | "contentEditable" | "contextMenu" | "controls" | "controlsList" | "coords" | "crossOrigin" | "dateTime" | "disableRemotePlayback" | "download" | "draggable" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "href" | "hrefLang" | "for" | "htmlFor" | "httpEquiv" | "icon" | "id" | "inputMode" | "integrity" | "is" | "keyParams" | "keyType" | "kind" | "lang" | "list" | "loop" | "marginHeight" | "marginWidth" | "maxLength" | "mediaGroup" | "method" | "min" | "minLength" | "multiple" | "muted" | "nonce" | "noValidate" | "optimum" | "placeholder" | "playsInline" | "poster" | "preload" | "radioGroup" | "readOnly" | "rel" | "role" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "sizes" | "spellcheck" | "src" | "srcset" | "srcDoc" | "srcLang" | "srcSet" | "step" | "tabIndex" | "useMap" | "value" | "volume" | "wmode" | "wrap" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "ref" | "jsx" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onToggle" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onInput" | "onInputCapture" | "onSearch" | "onSearchCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onReset" | "onResetCapture" | "onFormData" | "onFormDataCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDblClick" | "onDblClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseEnterCapture" | "onMouseLeave" | "onMouseLeaveCapture" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerOut" | "onPointerOutCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "children" | "dangerouslySetInnerHTML">;
 export type IconButtonBaseProps = {
@@ -410,2 +410,2 @@ /**
 };
-export type IconButtonProps = ButtonProps & Pick<import("preact").JSX.HTMLAttributes<HTMLButtonElement>, "max" | "required" | "default" | "high" | "low" | "disabled" | "start" | "open" | "media" | "loading" | "hidden" | "data" | "dir" | "form" | "label" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "async" | "readonly" | "defer" | "manifest" | "content" | "height" | "width" | "target" | "type" | "key" | "headers" | "name" | "className" | "class" | "onToggle" | "accept" | "acceptCharset" | "accessKey" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "autocomplete" | "autoComplete" | "autocorrect" | "autoCorrect" | "autofocus" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "cols" | "colSpan" | "contentEditable" | "contextMenu" | "controls" | "controlsList" | "coords" | "crossOrigin" | "dateTime" | "disableRemotePlayback" | "download" | "draggable" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "href" | "hrefLang" | "for" | "htmlFor" | "httpEquiv" | "icon" | "id" | "inputMode" | "integrity" | "is" | "keyParams" | "keyType" | "kind" | "lang" | "list" | "loop" | "marginHeight" | "marginWidth" | "maxLength" | "mediaGroup" | "method" | "min" | "minLength" | "multiple" | "muted" | "nonce" | "noValidate" | "optimum" | "placeholder" | "playsInline" | "poster" | "preload" | "radioGroup" | "readOnly" | "rel" | "role" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "sizes" | "spellcheck" | "src" | "srcset" | "srcDoc" | "srcLang" | "srcSet" | "step" | "tabIndex" | "useMap" | "value" | "volume" | "wmode" | "wrap" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "ref" | "jsx" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onInput" | "onInputCapture" | "onSearch" | "onSearchCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onReset" | "onResetCapture" | "onFormData" | "onFormDataCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDblClick" | "onDblClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseEnterCapture" | "onMouseLeave" | "onMouseLeaveCapture" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerOut" | "onPointerOutCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "children" | "dangerouslySetInnerHTML"> & IconButtonBaseProps;
+export type IconButtonProps = ButtonProps & Pick<import("preact").JSX.HTMLAttributes<HTMLButtonElement>, "max" | "required" | "default" | "high" | "low" | "disabled" | "start" | "open" | "media" | "loading" | "hidden" | "data" | "dir" | "form" | "label" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "async" | "readonly" | "defer" | "manifest" | "content" | "height" | "width" | "target" | "type" | "key" | "headers" | "name" | "className" | "class" | "accept" | "acceptCharset" | "accessKey" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "autocomplete" | "autoComplete" | "autocorrect" | "autoCorrect" | "autofocus" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "cols" | "colSpan" | "contentEditable" | "contextMenu" | "controls" | "controlsList" | "coords" | "crossOrigin" | "dateTime" | "disableRemotePlayback" | "download" | "draggable" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "href" | "hrefLang" | "for" | "htmlFor" | "httpEquiv" | "icon" | "id" | "inputMode" | "integrity" | "is" | "keyParams" | "keyType" | "kind" | "lang" | "list" | "loop" | "marginHeight" | "marginWidth" | "maxLength" | "mediaGroup" | "method" | "min" | "minLength" | "multiple" | "muted" | "nonce" | "noValidate" | "optimum" | "placeholder" | "playsInline" | "poster" | "preload" | "radioGroup" | "readOnly" | "rel" | "role" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "sizes" | "spellcheck" | "src" | "srcset" | "srcDoc" | "srcLang" | "srcSet" | "step" | "tabIndex" | "useMap" | "value" | "volume" | "wmode" | "wrap" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "ref" | "jsx" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onToggle" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onInput" | "onInputCapture" | "onSearch" | "onSearchCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onReset" | "onResetCapture" | "onFormData" | "onFormDataCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDblClick" | "onDblClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseEnterCapture" | "onMouseLeave" | "onMouseLeaveCapture" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerOut" | "onPointerOutCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "children" | "dangerouslySetInnerHTML"> & IconButtonBaseProps;

lib/components/Checkbox.d.ts

@@ -65,3 +65,3 @@ /**
 };
-export type CheckboxProps = Pick<import("preact").JSX.HTMLAttributes<HTMLInputElement>, "max" | "required" | "default" | "high" | "low" | "disabled" | "start" | "open" | "media" | "loading" | "hidden" | "data" | "dir" | "form" | "label" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "async" | "readonly" | "defer" | "manifest" | "content" | "height" | "width" | "target" | "type" | "key" | "headers" | "name" | "className" | "class" | "accept" | "acceptCharset" | "accessKey" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "autocomplete" | "autoComplete" | "autocorrect" | "autoCorrect" | "autofocus" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "cols" | "colSpan" | "contentEditable" | "contextMenu" | "controls" | "controlsList" | "coords" | "crossOrigin" | "dateTime" | "disableRemotePlayback" | "download" | "draggable" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "href" | "hrefLang" | "for" | "htmlFor" | "httpEquiv" | "icon" | "id" | "inputMode" | "integrity" | "is" | "keyParams" | "keyType" | "kind" | "lang" | "list" | "loop" | "marginHeight" | "marginWidth" | "maxLength" | "mediaGroup" | "method" | "min" | "minLength" | "multiple" | "muted" | "nonce" | "noValidate" | "optimum" | "placeholder" | "playsInline" | "poster" | "preload" | "radioGroup" | "readOnly" | "rel" | "role" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "size" | "sizes" | "spellcheck" | "src" | "srcset" | "srcDoc" | "srcLang" | "srcSet" | "step" | "tabIndex" | "useMap" | "value" | "volume" | "wmode" | "wrap" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "ref" | "jsx" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onInput" | "onInputCapture" | "onSearch" | "onSearchCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onReset" | "onResetCapture" | "onFormData" | "onFormDataCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDblClick" | "onDblClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseEnterCapture" | "onMouseLeave" | "onMouseLeaveCapture" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerOut" | "onPointerOutCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "children" | "dangerouslySetInnerHTML"> & CheckboxBaseProps;
+export type CheckboxProps = Pick<import("preact").JSX.HTMLAttributes<HTMLInputElement>, "max" | "required" | "default" | "high" | "low" | "disabled" | "start" | "open" | "media" | "loading" | "hidden" | "data" | "dir" | "form" | "label" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "async" | "readonly" | "defer" | "manifest" | "content" | "height" | "width" | "target" | "type" | "key" | "headers" | "name" | "className" | "class" | "size" | "accept" | "acceptCharset" | "accessKey" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "autocomplete" | "autoComplete" | "autocorrect" | "autoCorrect" | "autofocus" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "cols" | "colSpan" | "contentEditable" | "contextMenu" | "controls" | "controlsList" | "coords" | "crossOrigin" | "dateTime" | "disableRemotePlayback" | "download" | "draggable" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "href" | "hrefLang" | "for" | "htmlFor" | "httpEquiv" | "icon" | "id" | "inputMode" | "integrity" | "is" | "keyParams" | "keyType" | "kind" | "lang" | "list" | "loop" | "marginHeight" | "marginWidth" | "maxLength" | "mediaGroup" | "method" | "min" | "minLength" | "multiple" | "muted" | "nonce" | "noValidate" | "optimum" | "placeholder" | "playsInline" | "poster" | "preload" | "radioGroup" | "readOnly" | "rel" | "role" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "sizes" | "spellcheck" | "src" | "srcset" | "srcDoc" | "srcLang" | "srcSet" | "step" | "tabIndex" | "useMap" | "value" | "volume" | "wmode" | "wrap" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "ref" | "jsx" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onInput" | "onInputCapture" | "onSearch" | "onSearchCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onReset" | "onResetCapture" | "onFormData" | "onFormDataCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDblClick" | "onDblClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseEnterCapture" | "onMouseLeave" | "onMouseLeaveCapture" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerOut" | "onPointerOutCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "children" | "dangerouslySetInnerHTML"> & CheckboxBaseProps;
 export type LabeledCheckboxBaseProps = {
@@ -73,2 +73,2 @@ /**
 };
-export type LabeledCheckboxProps = Pick<CheckboxProps, "max" | "required" | "default" | "high" | "low" | "disabled" | "start" | "open" | "media" | "loading" | "hidden" | "data" | "dir" | "form" | "label" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "async" | "readonly" | "defer" | "manifest" | "content" | "height" | "width" | "target" | "type" | "key" | "headers" | "name" | "className" | "class" | "onToggle" | "accept" | "acceptCharset" | "accessKey" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "autocomplete" | "autoComplete" | "autocorrect" | "autoCorrect" | "autofocus" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "cols" | "colSpan" | "contentEditable" | "contextMenu" | "controls" | "controlsList" | "coords" | "crossOrigin" | "dateTime" | "disableRemotePlayback" | "download" | "draggable" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "href" | "hrefLang" | "for" | "htmlFor" | "httpEquiv" | "icon" | "id" | "inputMode" | "integrity" | "is" | "keyParams" | "keyType" | "kind" | "lang" | "list" | "loop" | "marginHeight" | "marginWidth" | "maxLength" | "mediaGroup" | "method" | "min" | "minLength" | "multiple" | "muted" | "nonce" | "noValidate" | "optimum" | "placeholder" | "playsInline" | "poster" | "preload" | "radioGroup" | "readOnly" | "rel" | "role" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "size" | "sizes" | "spellcheck" | "src" | "srcset" | "srcDoc" | "srcLang" | "srcSet" | "step" | "tabIndex" | "useMap" | "value" | "volume" | "wmode" | "wrap" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "ref" | "jsx" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onInput" | "onInputCapture" | "onSearch" | "onSearchCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onReset" | "onResetCapture" | "onFormData" | "onFormDataCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDblClick" | "onDblClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseEnterCapture" | "onMouseLeave" | "onMouseLeaveCapture" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerOut" | "onPointerOutCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "dangerouslySetInnerHTML" | "inputRef"> & LabeledCheckboxBaseProps;
+export type LabeledCheckboxProps = Pick<CheckboxProps, "max" | "required" | "default" | "high" | "low" | "disabled" | "start" | "open" | "media" | "loading" | "hidden" | "data" | "dir" | "form" | "label" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "async" | "readonly" | "defer" | "manifest" | "content" | "height" | "width" | "target" | "type" | "key" | "headers" | "name" | "className" | "class" | "size" | "accept" | "acceptCharset" | "accessKey" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "autocomplete" | "autoComplete" | "autocorrect" | "autoCorrect" | "autofocus" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "cols" | "colSpan" | "contentEditable" | "contextMenu" | "controls" | "controlsList" | "coords" | "crossOrigin" | "dateTime" | "disableRemotePlayback" | "download" | "draggable" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "href" | "hrefLang" | "for" | "htmlFor" | "httpEquiv" | "icon" | "id" | "inputMode" | "integrity" | "is" | "keyParams" | "keyType" | "kind" | "lang" | "list" | "loop" | "marginHeight" | "marginWidth" | "maxLength" | "mediaGroup" | "method" | "min" | "minLength" | "multiple" | "muted" | "nonce" | "noValidate" | "optimum" | "placeholder" | "playsInline" | "poster" | "preload" | "radioGroup" | "readOnly" | "rel" | "role" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "sizes" | "spellcheck" | "src" | "srcset" | "srcDoc" | "srcLang" | "srcSet" | "step" | "tabIndex" | "useMap" | "value" | "volume" | "wmode" | "wrap" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "ref" | "jsx" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onToggle" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onInput" | "onInputCapture" | "onSearch" | "onSearchCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onReset" | "onResetCapture" | "onFormData" | "onFormDataCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDblClick" | "onDblClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseEnterCapture" | "onMouseLeave" | "onMouseLeaveCapture" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerOut" | "onPointerOutCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "dangerouslySetInnerHTML" | "inputRef"> & LabeledCheckboxBaseProps;

lib/components/Dialog.js

@@ -12,3 +12,3 @@ "use strict";
 
-var _ = require("../");
+var _buttons = require("./buttons");
 
@@ -23,2 +23,7 @@ var _SvgIcon = require("./SvgIcon");
 
+// Register the checkbox icon for use
+(0, _SvgIcon.registerIcons)({
+  /** @ts-ignore - TS doesn't understand require here */
+  'hyp-cancel': require('../../images/icons/cancel.svg')
+});
 let idCounter = 0;
@@ -138,3 +143,3 @@ /**
           fileName: _jsxFileName,
-          lineNumber: 116,
+          lineNumber: 122,
           columnNumber: 13
@@ -144,3 +149,3 @@ }, this)
         fileName: _jsxFileName,
-        lineNumber: 115,
+        lineNumber: 121,
         columnNumber: 11
@@ -153,8 +158,8 @@ }, this), (0, _jsxDevRuntime.jsxDEV)("h2", {
         fileName: _jsxFileName,
-        lineNumber: 119,
+        lineNumber: 125,
         columnNumber: 9
       }, this), onCancel && (0, _jsxDevRuntime.jsxDEV)("div", {
         className: "Hyp-Dialog__close",
-        children: (0, _jsxDevRuntime.jsxDEV)(_.IconButton, {
-          icon: "cancel",
+        children: (0, _jsxDevRuntime.jsxDEV)(_buttons.IconButton, {
+          icon: "hyp-cancel",
           title: "Close",
@@ -164,3 +169,3 @@ onClick: onCancel
           fileName: _jsxFileName,
-          lineNumber: 124,
+          lineNumber: 130,
           columnNumber: 13
@@ -170,3 +175,3 @@ }, this)
         fileName: _jsxFileName,
-        lineNumber: 123,
+        lineNumber: 129,
         columnNumber: 11
@@ -176,13 +181,7 @@ }, this)]
       fileName: _jsxFileName,
-      lineNumber: 113,
+      lineNumber: 119,
       columnNumber: 7
-    }, this), (0, _jsxDevRuntime.jsxDEV)("div", {
-      children: children
-    }, void 0, false, {
-      fileName: _jsxFileName,
-      lineNumber: 128,
-      columnNumber: 7
-    }, this), (0, _jsxDevRuntime.jsxDEV)("div", {
+    }, this), children, (0, _jsxDevRuntime.jsxDEV)("div", {
       className: "Hyp-Dialog__actions",
-      children: [onCancel && (0, _jsxDevRuntime.jsxDEV)(_.LabeledButton, {
+      children: [onCancel && (0, _jsxDevRuntime.jsxDEV)(_buttons.LabeledButton, {
         "data-testid": "cancel-button",
@@ -193,3 +192,3 @@ onClick: onCancel,
         fileName: _jsxFileName,
-        lineNumber: 131,
+        lineNumber: 137,
         columnNumber: 11
@@ -199,3 +198,3 @@ }, this), buttons]
       fileName: _jsxFileName,
-      lineNumber: 129,
+      lineNumber: 135,
       columnNumber: 7
@@ -205,3 +204,3 @@ }, this)]
     fileName: _jsxFileName,
-    lineNumber: 102,
+    lineNumber: 108,
     columnNumber: 5
@@ -208,0 +207,0 @@ }, this);

lib/components/Panel.js

@@ -20,2 +20,7 @@ "use strict";
 
+// Register the cancel icon for use
+(0, _SvgIcon.registerIcons)({
+  /** @ts-ignore - TS doesn't understand require here */
+  'hyp-cancel': require('../../images/icons/cancel.svg')
+});
 /**
@@ -36,2 +41,3 @@ * @typedef PanelProps
  */
+
 function Panel({
@@ -56,3 +62,3 @@ children,
           fileName: _jsxFileName,
-          lineNumber: 32,
+          lineNumber: 38,
           columnNumber: 13
@@ -62,3 +68,3 @@ }, this)
         fileName: _jsxFileName,
-        lineNumber: 31,
+        lineNumber: 37,
         columnNumber: 11
@@ -70,3 +76,3 @@ }, this), (0, _jsxDevRuntime.jsxDEV)("h2", {
         fileName: _jsxFileName,
-        lineNumber: 35,
+        lineNumber: 41,
         columnNumber: 9
@@ -76,3 +82,3 @@ }, this), withCloseButton && (0, _jsxDevRuntime.jsxDEV)("div", {
         children: (0, _jsxDevRuntime.jsxDEV)(_buttons.IconButton, {
-          icon: "cancel",
+          icon: "hyp-cancel",
           title: "Close",
@@ -82,3 +88,3 @@ onClick: onClose
           fileName: _jsxFileName,
-          lineNumber: 38,
+          lineNumber: 44,
           columnNumber: 13
@@ -88,3 +94,3 @@ }, this)
         fileName: _jsxFileName,
-        lineNumber: 37,
+        lineNumber: 43,
         columnNumber: 11
@@ -94,9 +100,10 @@ }, this)]
       fileName: _jsxFileName,
-      lineNumber: 29,
+      lineNumber: 35,
       columnNumber: 7
     }, this), (0, _jsxDevRuntime.jsxDEV)("div", {
+      className: "Hyp-Panel__content",
       children: children
     }, void 0, false, {
       fileName: _jsxFileName,
-      lineNumber: 42,
+      lineNumber: 48,
       columnNumber: 7
@@ -106,3 +113,3 @@ }, this)]
     fileName: _jsxFileName,
-    lineNumber: 24,
+    lineNumber: 30,
     columnNumber: 5
@@ -109,0 +116,0 @@ }, this);

lib/index.d.ts

@@ -5,5 +5,7 @@ export { Dialog } from "./components/Dialog";
 export { normalizeKeyName } from "./browser-compatibility-utils";
+export { IconButton, LabeledButton, LinkButton } from "./components/buttons";
 export { LabeledCheckbox, Checkbox } from "./components/Checkbox";
-export { IconButton, LabeledButton, LinkButton } from "./components/buttons";
+export { Frame, Card, Actions } from "./components/containers";
 export { Modal, ConfirmModal } from "./components/Modal";
 export { SvgIcon, registerIcons } from "./components/SvgIcon";
+export { TextInput, TextInputWithButton } from "./components/TextInput";

lib/index.js

@@ -6,2 +6,20 @@ "use strict";
 });
+Object.defineProperty(exports, "IconButton", {
+  enumerable: true,
+  get: function () {
+    return _buttons.IconButton;
+  }
+});
+Object.defineProperty(exports, "LabeledButton", {
+  enumerable: true,
+  get: function () {
+    return _buttons.LabeledButton;
+  }
+});
+Object.defineProperty(exports, "LinkButton", {
+  enumerable: true,
+  get: function () {
+    return _buttons.LinkButton;
+  }
+});
 Object.defineProperty(exports, "LabeledCheckbox", {
@@ -19,24 +37,24 @@ enumerable: true,
 });
-Object.defineProperty(exports, "Dialog", {
+Object.defineProperty(exports, "Frame", {
   enumerable: true,
   get: function () {
-    return _Dialog.Dialog;
+    return _containers.Frame;
   }
 });
-Object.defineProperty(exports, "IconButton", {
+Object.defineProperty(exports, "Card", {
   enumerable: true,
   get: function () {
-    return _buttons.IconButton;
+    return _containers.Card;
   }
 });
-Object.defineProperty(exports, "LabeledButton", {
+Object.defineProperty(exports, "Actions", {
   enumerable: true,
   get: function () {
-    return _buttons.LabeledButton;
+    return _containers.Actions;
   }
 });
-Object.defineProperty(exports, "LinkButton", {
+Object.defineProperty(exports, "Dialog", {
   enumerable: true,
   get: function () {
-    return _buttons.LinkButton;
+    return _Dialog.Dialog;
   }
@@ -74,2 +92,14 @@ });
 });
+Object.defineProperty(exports, "TextInput", {
+  enumerable: true,
+  get: function () {
+    return _TextInput.TextInput;
+  }
+});
+Object.defineProperty(exports, "TextInputWithButton", {
+  enumerable: true,
+  get: function () {
+    return _TextInput.TextInputWithButton;
+  }
+});
 Object.defineProperty(exports, "useElementShouldClose", {
@@ -88,8 +118,10 @@ enumerable: true,
 
+var _buttons = require("./components/buttons");
+
 var _Checkbox = require("./components/Checkbox");
 
+var _containers = require("./components/containers");
+
 var _Dialog = require("./components/Dialog");
 
-var _buttons = require("./components/buttons");
-
 var _Modal = require("./components/Modal");
@@ -101,2 +133,4 @@
 
+var _TextInput = require("./components/TextInput");
+
 var _useElementShouldClose = require("./hooks/use-element-should-close");
@@ -103,0 +137,0 @@

lib/pattern-library/components/patterns/FormPatterns.js

@@ -8,8 +8,6 @@ "use strict";
 
-var _hooks = require("preact/hooks");
+var _PatternPage = require("../PatternPage");
 
-var _ = require("../../../");
+var _buttons = require("../../../components/buttons");
 
-var _PatternPage = require("../PatternPage");
-
 var _jsxDevRuntime = require("preact/compat/jsx-dev-runtime");
@@ -20,29 +18,94 @@
 function FormPatterns() {
-  const [wantSandwich, setWantSandwich] = (0, _hooks.useState)(true);
-  const [wantWatermelon, setWantWatermelon] = (0, _hooks.useState)(false);
   return (0, _jsxDevRuntime.jsxDEV)(_PatternPage.PatternPage, {
     title: "Forms",
-    children: (0, _jsxDevRuntime.jsxDEV)(_PatternPage.Pattern, {
-      title: "Checkbox",
-      children: [(0, _jsxDevRuntime.jsxDEV)("div", {
-        style: "font-size: 2em",
-        children: [wantSandwich && '🥪', wantWatermelon && '🍉', "\xA0"]
+    children: [(0, _jsxDevRuntime.jsxDEV)(_PatternPage.Pattern, {
+      title: "Text inputs",
+      children: [(0, _jsxDevRuntime.jsxDEV)("p", {
+        children: ["A pattern for ", (0, _jsxDevRuntime.jsxDEV)("code", {
+          children: "input type=\"text\""
+        }, void 0, false, {
+          fileName: _jsxFileName,
+          lineNumber: 15,
+          columnNumber: 25
+        }, this)]
       }, void 0, true, {
         fileName: _jsxFileName,
-        lineNumber: 18,
+        lineNumber: 14,
         columnNumber: 9
       }, this), (0, _jsxDevRuntime.jsxDEV)(_PatternPage.PatternExamples, {
         children: [(0, _jsxDevRuntime.jsxDEV)(_PatternPage.PatternExample, {
-          details: "A checkbox, defaulting to checked",
+          details: "basic text input",
+          children: (0, _jsxDevRuntime.jsxDEV)("input", {
+            className: "hyp-text-input",
+            type: "text",
+            placeholder: "http://www.example.com"
+          }, void 0, false, {
+            fileName: _jsxFileName,
+            lineNumber: 19,
+            columnNumber: 13
+          }, this)
+        }, void 0, false, {
+          fileName: _jsxFileName,
+          lineNumber: 18,
+          columnNumber: 11
+        }, this), (0, _jsxDevRuntime.jsxDEV)(_PatternPage.PatternExample, {
+          details: "text input in an error state",
+          children: (0, _jsxDevRuntime.jsxDEV)("input", {
+            className: "hyp-text-input is-error",
+            type: "text",
+            placeholder: "http://www.example.com"
+          }, void 0, false, {
+            fileName: _jsxFileName,
+            lineNumber: 26,
+            columnNumber: 13
+          }, this)
+        }, void 0, false, {
+          fileName: _jsxFileName,
+          lineNumber: 25,
+          columnNumber: 11
+        }, this)]
+      }, void 0, true, {
+        fileName: _jsxFileName,
+        lineNumber: 17,
+        columnNumber: 9
+      }, this)]
+    }, void 0, true, {
+      fileName: _jsxFileName,
+      lineNumber: 13,
+      columnNumber: 7
+    }, this), (0, _jsxDevRuntime.jsxDEV)(_PatternPage.Pattern, {
+      title: "Text input with button",
+      children: [(0, _jsxDevRuntime.jsxDEV)("p", {
+        children: "A pattern that pairs a text input field with an icon-only button. Use a dark-variant button to match the standard pattern here."
+      }, void 0, false, {
+        fileName: _jsxFileName,
+        lineNumber: 35,
+        columnNumber: 9
+      }, this), (0, _jsxDevRuntime.jsxDEV)(_PatternPage.PatternExamples, {
+        children: [(0, _jsxDevRuntime.jsxDEV)(_PatternPage.PatternExample, {
           style: {
             width: '300px'
           },
-          children: (0, _jsxDevRuntime.jsxDEV)(_.LabeledCheckbox, {
-            name: "test",
-            checked: wantSandwich,
-            onToggle: isChecked => setWantSandwich(isChecked),
-            children: "I want a sandwich"
-          }, void 0, false, {
+          details: "text input with a dark-variant IconButton",
+          children: (0, _jsxDevRuntime.jsxDEV)("div", {
+            className: "hyp-text-input-with-button",
+            children: [(0, _jsxDevRuntime.jsxDEV)("input", {
+              type: "text",
+              placeholder: "http://www.example.com"
+            }, void 0, false, {
+              fileName: _jsxFileName,
+              lineNumber: 45,
+              columnNumber: 15
+            }, this), (0, _jsxDevRuntime.jsxDEV)(_buttons.IconButton, {
+              icon: "arrow-right",
+              title: "go",
+              variant: "dark"
+            }, void 0, false, {
+              fileName: _jsxFileName,
+              lineNumber: 46,
+              columnNumber: 15
+            }, this)]
+          }, void 0, true, {
             fileName: _jsxFileName,
-            lineNumber: 28,
+            lineNumber: 44,
             columnNumber: 13
@@ -52,14 +115,31 @@ }, this)
           fileName: _jsxFileName,
-          lineNumber: 24,
+          lineNumber: 40,
           columnNumber: 11
         }, this), (0, _jsxDevRuntime.jsxDEV)(_PatternPage.PatternExample, {
-          details: "A checkbox, unchecked",
-          children: (0, _jsxDevRuntime.jsxDEV)(_.LabeledCheckbox, {
-            checked: wantWatermelon,
-            name: "test-alternative",
-            onToggle: isChecked => setWantWatermelon(isChecked),
-            children: "I want a watermelon"
-          }, void 0, false, {
+          style: {
+            width: '300px'
+          },
+          details: "text input and button in an error state",
+          children: (0, _jsxDevRuntime.jsxDEV)("div", {
+            className: "hyp-text-input-with-button",
+            children: [(0, _jsxDevRuntime.jsxDEV)("input", {
+              type: "text",
+              placeholder: "http://www.example.com",
+              className: "is-error"
+            }, void 0, false, {
+              fileName: _jsxFileName,
+              lineNumber: 55,
+              columnNumber: 15
+            }, this), (0, _jsxDevRuntime.jsxDEV)(_buttons.IconButton, {
+              icon: "arrow-right",
+              title: "go",
+              variant: "dark"
+            }, void 0, false, {
+              fileName: _jsxFileName,
+              lineNumber: 60,
+              columnNumber: 15
+            }, this)]
+          }, void 0, true, {
             fileName: _jsxFileName,
-            lineNumber: 37,
+            lineNumber: 54,
             columnNumber: 13
@@ -69,3 +149,3 @@ }, this)
           fileName: _jsxFileName,
-          lineNumber: 36,
+          lineNumber: 50,
           columnNumber: 11
@@ -75,3 +155,3 @@ }, this)]
         fileName: _jsxFileName,
-        lineNumber: 23,
+        lineNumber: 39,
         columnNumber: 9
@@ -81,8 +161,8 @@ }, this)]
       fileName: _jsxFileName,
-      lineNumber: 17,
+      lineNumber: 34,
       columnNumber: 7
-    }, this)
-  }, void 0, false, {
+    }, this)]
+  }, void 0, true, {
     fileName: _jsxFileName,
-    lineNumber: 16,
+    lineNumber: 12,
     columnNumber: 5
@@ -89,0 +169,0 @@ }, this);

lib/pattern-library/components/PlaygroundApp.js

@@ -71,2 +71,5 @@ "use strict";
   }, {
+    title: 'Patterns',
+    routes: (0, _routes.getRoutes)('patterns')
+  }, {
     title: 'Common Components',
@@ -96,3 +99,3 @@ routes: (0, _routes.getRoutes)('components')
             fileName: _jsxFileName,
-            lineNumber: 56,
+            lineNumber: 57,
             columnNumber: 13
@@ -102,3 +105,3 @@ }, this)
           fileName: _jsxFileName,
-          lineNumber: 55,
+          lineNumber: 56,
           columnNumber: 11
@@ -108,3 +111,3 @@ }, this)
         fileName: _jsxFileName,
-        lineNumber: 54,
+        lineNumber: 55,
         columnNumber: 9
@@ -116,3 +119,3 @@ }, this), routeGroups.map(rGroup => (0, _jsxDevRuntime.jsxDEV)("div", {
           fileName: _jsxFileName,
-          lineNumber: 61,
+          lineNumber: 62,
           columnNumber: 13
@@ -133,3 +136,3 @@ }, this), (0, _jsxDevRuntime.jsxDEV)("ul", {
               fileName: _jsxFileName,
-              lineNumber: 65,
+              lineNumber: 66,
               columnNumber: 19
@@ -139,3 +142,3 @@ }, this)
             fileName: _jsxFileName,
-            lineNumber: 64,
+            lineNumber: 65,
             columnNumber: 17
@@ -145,3 +148,3 @@ }, this))
           fileName: _jsxFileName,
-          lineNumber: 62,
+          lineNumber: 63,
           columnNumber: 13
@@ -151,3 +154,3 @@ }, this)]
         fileName: _jsxFileName,
-        lineNumber: 60,
+        lineNumber: 61,
         columnNumber: 11
@@ -157,3 +160,3 @@ }, this))]
       fileName: _jsxFileName,
-      lineNumber: 53,
+      lineNumber: 54,
       columnNumber: 7
@@ -165,3 +168,3 @@ }, this), (0, _jsxDevRuntime.jsxDEV)("div", {
       fileName: _jsxFileName,
-      lineNumber: 80,
+      lineNumber: 81,
       columnNumber: 7
@@ -171,3 +174,3 @@ }, this)]
     fileName: _jsxFileName,
-    lineNumber: 52,
+    lineNumber: 53,
     columnNumber: 5
@@ -174,0 +177,0 @@ }, this);

lib/pattern-library/routes.js

@@ -10,22 +10,26 @@ "use strict";
 
-var _ColorPatterns = _interopRequireDefault(require("./components/patterns/ColorPatterns"));
+var _ColorFoundations = _interopRequireDefault(require("./components/patterns/ColorFoundations"));
 
-var _LayoutPatterns = _interopRequireDefault(require("./components/patterns/LayoutPatterns"));
+var _LayoutFoundations = _interopRequireDefault(require("./components/patterns/LayoutFoundations"));
 
-var _MoleculePatterns = _interopRequireDefault(require("./components/patterns/MoleculePatterns"));
+var _FormPatterns = _interopRequireDefault(require("./components/patterns/FormPatterns"));
 
+var _ContainerPatterns = _interopRequireDefault(require("./components/patterns/ContainerPatterns"));
+
 var _OrganismPatterns = _interopRequireDefault(require("./components/patterns/OrganismPatterns"));
 
-var _ButtonPatterns = _interopRequireDefault(require("./components/patterns/ButtonPatterns"));
+var _ButtonComponents = _interopRequireDefault(require("./components/patterns/ButtonComponents"));
 
-var _DialogPatterns = _interopRequireDefault(require("./components/patterns/DialogPatterns"));
+var _ContainerComponents = _interopRequireDefault(require("./components/patterns/ContainerComponents"));
 
-var _FormPatterns = _interopRequireDefault(require("./components/patterns/FormPatterns"));
+var _DialogComponents = _interopRequireDefault(require("./components/patterns/DialogComponents"));
 
-var _PanelPatterns = _interopRequireDefault(require("./components/patterns/PanelPatterns"));
+var _FormComponents = _interopRequireDefault(require("./components/patterns/FormComponents"));
 
+var _PanelComponents = _interopRequireDefault(require("./components/patterns/PanelComponents"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 /**
- * @typedef {'home'|'foundations'|'components'} PlaygroundRouteGroup
+ * @typedef {'home'|'foundations'|'patterns'|'components'} PlaygroundRouteGroup
  *
@@ -50,3 +54,3 @@ * @typedef PlaygroundRoute - Route "handler" that provides a component (function)
   title: 'Colors',
-  component: _ColorPatterns.default,
+  component: _ColorFoundations.default,
   group: 'foundations'
@@ -56,23 +60,33 @@ }, {
   title: 'Layout',
-  component: _LayoutPatterns.default,
+  component: _LayoutFoundations.default,
   group: 'foundations'
 }, {
-  route: '/foundations-molecules',
-  title: 'Molecules',
-  component: _MoleculePatterns.default,
-  group: 'foundations'
+  route: '/patterns-containers',
+  title: 'Containers',
+  component: _ContainerPatterns.default,
+  group: 'patterns'
 }, {
-  route: '/foundations-organisms',
+  route: '/patterns-forms',
+  title: 'Forms',
+  component: _FormPatterns.default,
+  group: 'patterns'
+}, {
+  route: '/patterns-organisms',
   title: 'Organisms',
   component: _OrganismPatterns.default,
-  group: 'foundations'
+  group: 'patterns'
 }, {
   route: '/components-buttons',
   title: 'Buttons',
-  component: _ButtonPatterns.default,
+  component: _ButtonComponents.default,
   group: 'components'
 }, {
+  route: '/components-containers',
+  title: 'Containers',
+  component: _ContainerComponents.default,
+  group: 'components'
+}, {
   route: '/components-dialogs',
   title: 'Dialogs',
-  component: _DialogPatterns.default,
+  component: _DialogComponents.default,
   group: 'components'
@@ -82,3 +96,3 @@ }, {
   title: 'Forms',
-  component: _FormPatterns.default,
+  component: _FormComponents.default,
   group: 'components'
@@ -88,3 +102,3 @@ }, {
   title: 'Panel',
-  component: _PanelPatterns.default,
+  component: _PanelComponents.default,
   group: 'components'
@@ -91,0 +105,0 @@ }];

package.json

 {
   "name": "@hypothesis/frontend-shared",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "description": "Shared components, styles and utilities for Hypothesis projects",
@@ -5,0 +5,0 @@ "license": "BSD-2-Clause",

README.md

@@ -17,5 +17,5 @@ # Shared resources for Hypothesis front-end applications
 
-### In SASS modules
+### SASS
 
-To import default styling of frontend-shared components, include this line in the main project's SASS.
+To add styles for all shared components to your project's SASS:
 
@@ -26,8 +26,2 @@ ```scss
 
-Mixins can be imported directly
-
-```scss
-@use "@hypothesis/frontend-shared/styles/mixins" as mixins;
-```
-
 ### In JS
@@ -34,0 +28,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

546863

increased by22.78%

Number of package files

120

increased by13.21%

Lines of code

7277

increased by22.92%

Worsened metrics

Number of lines in readme file

35

decreased by-14.63%

Number of low supply chain risk alerts

2

increased by100%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes