@hypothesis/frontend-shared - npm Package Compare versions

Comparing version 4.4.0 to 4.5.0

lib/components/buttons.d.ts

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

lib/components/Checkbox.d.ts

@@ -53,3 +53,3 @@ /**
      */
-    inputRef?: import("preact").RefObject<HTMLInputElement> | import("preact").RefCallback<HTMLInputElement> | undefined;
+    inputRef?: import("preact").Ref<HTMLInputElement> | undefined;
     /**
@@ -73,3 +73,3 @@ * - Callback when checkbox is
 };
-export type CheckboxProps = Pick<import("preact").JSX.HTMLAttributes<HTMLInputElement>, "content" | "height" | "width" | "target" | "type" | "data" | "key" | "form" | "label" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "name" | "className" | "value" | "dir" | "class" | "size" | "icon" | "accept" | "acceptCharset" | "accessKey" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "async" | "autocomplete" | "autoComplete" | "autocorrect" | "autoCorrect" | "autofocus" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "cols" | "colSpan" | "contentEditable" | "contextMenu" | "controls" | "controlsList" | "coords" | "crossOrigin" | "dateTime" | "default" | "defer" | "disabled" | "disableRemotePlayback" | "download" | "draggable" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "hidden" | "high" | "href" | "hrefLang" | "for" | "htmlFor" | "httpEquiv" | "id" | "inputMode" | "integrity" | "is" | "keyParams" | "keyType" | "kind" | "lang" | "list" | "loading" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "multiple" | "muted" | "nonce" | "noValidate" | "open" | "optimum" | "placeholder" | "playsInline" | "poster" | "preload" | "radioGroup" | "readonly" | "readOnly" | "rel" | "required" | "role" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "sizes" | "spellcheck" | "src" | "srcset" | "srcDoc" | "srcLang" | "srcSet" | "start" | "step" | "tabIndex" | "useMap" | "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 = Omit<import('preact').JSX.HTMLAttributes<HTMLInputElement>, 'onToggle'> & CheckboxBaseProps;
 export type LabeledCheckboxBaseProps = {
@@ -86,2 +86,2 @@ /**
 };
-export type LabeledCheckboxProps = Pick<CheckboxProps, "content" | "height" | "width" | "target" | "type" | "data" | "key" | "form" | "label" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "name" | "className" | "value" | "dir" | "class" | "size" | "icon" | "accept" | "acceptCharset" | "accessKey" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "async" | "autocomplete" | "autoComplete" | "autocorrect" | "autoCorrect" | "autofocus" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "cols" | "colSpan" | "contentEditable" | "contextMenu" | "controls" | "controlsList" | "coords" | "crossOrigin" | "dateTime" | "default" | "defer" | "disabled" | "disableRemotePlayback" | "download" | "draggable" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "hidden" | "high" | "href" | "hrefLang" | "for" | "htmlFor" | "httpEquiv" | "id" | "inputMode" | "integrity" | "is" | "keyParams" | "keyType" | "kind" | "lang" | "list" | "loading" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "multiple" | "muted" | "nonce" | "noValidate" | "open" | "optimum" | "placeholder" | "playsInline" | "poster" | "preload" | "radioGroup" | "readonly" | "readOnly" | "rel" | "required" | "role" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "sizes" | "spellcheck" | "src" | "srcset" | "srcDoc" | "srcLang" | "srcSet" | "start" | "step" | "tabIndex" | "useMap" | "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" | "classes" | "inputRef"> & LabeledCheckboxBaseProps;
+export type LabeledCheckboxProps = Omit<CheckboxProps, 'children'> & LabeledCheckboxBaseProps;

lib/components/Checkbox.js

@@ -57,7 +57,8 @@ var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/components/Checkbox.js";
   function onPressed(event) {
-    onToggle === null || onToggle === void 0 ? void 0 : onToggle(event.currentTarget.checked); // onChange expects `this` context to be of type `HTMLInputElement`
-    // according to the preact type definitions, but preact doesn't implement
-    // it: https://github.com/preactjs/preact/issues/3137
+    onToggle === null || onToggle === void 0 ? void 0 : onToggle(event.currentTarget.checked); // preact event handlers expects `this` context to be of type `never`
+    // https://github.com/preactjs/preact/issues/3137
 
-    onClick === null || onClick === void 0 ? void 0 : onClick.call(this, event);
+    onClick === null || onClick === void 0 ? void 0 : onClick.call(
+    /** @type {never} */
+    this, event);
   }
@@ -74,3 +75,3 @@
       fileName: _jsxFileName,
-      lineNumber: 65,
+      lineNumber: 64,
       columnNumber: 7
@@ -82,3 +83,3 @@ }, this), _jsxDEV(SvgIcon, {
       fileName: _jsxFileName,
-      lineNumber: 72,
+      lineNumber: 71,
       columnNumber: 7
@@ -111,3 +112,3 @@ }, this)]
       fileName: _jsxFileName,
-      lineNumber: 94,
+      lineNumber: 93,
       columnNumber: 7
@@ -119,3 +120,3 @@ }, this), _jsxDEV("span", {
       fileName: _jsxFileName,
-      lineNumber: 95,
+      lineNumber: 94,
       columnNumber: 7
@@ -125,3 +126,3 @@ }, this)]
     fileName: _jsxFileName,
-    lineNumber: 90,
+    lineNumber: 89,
     columnNumber: 5
@@ -128,0 +129,0 @@ }, this);

lib/components/containers.d.ts

@@ -47,3 +47,3 @@ /**
 export function Scrollbox({ children, classes, containerRef, withHeader, }: ScrollboxBaseProps & ContainerProps): import("preact").JSX.Element;
-export type Children = string | number | boolean | object | import("preact").VNode<any> | import("preact").ComponentChild[] | null | undefined;
+export type Children = import('preact').ComponentChildren;
 export type ContainerProps = {
@@ -59,3 +59,3 @@ children: Children;
      */
-    containerRef?: import("preact").RefObject<HTMLElement> | import("preact").RefCallback<HTMLElement> | undefined;
+    containerRef?: import("preact").Ref<HTMLElement> | undefined;
 };
@@ -62,0 +62,0 @@ export type ActionBaseProps = {

lib/components/Dialog.d.ts

@@ -40,3 +40,3 @@ /**
 export function Dialog({ buttons, cancelLabel, children, contentClass, icon, initialFocus, onCancel, role, title, withCancelButton, withCloseButton, }: DialogProps): import("preact").JSX.Element;
-export type Children = string | number | boolean | object | import("preact").VNode<any> | import("preact").ComponentChild[] | null | undefined;
+export type Children = import('preact').ComponentChildren;
 export type DialogProps = {
@@ -43,0 +43,0 @@ /**

lib/components/Dialog.js

@@ -84,5 +84,5 @@ var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/components/Dialog.js";
   const dialogTitleId = useUniqueId('dialog-title');
-  const rootEl = useRef(
-  /** @type {HTMLDivElement | null} */
-  null);
+  const rootEl =
+  /** @type {{ current: HTMLDivElement }} */
+  useRef();
   useEffect(() => {
@@ -89,0 +89,0 @@ // Setting `initialFocus` to `null` opts out of focus handling

lib/components/Icon.d.ts

@@ -20,5 +20,3 @@ /**
 export function Icon({ name, classes, containerClasses, title, }: IconProps): import("preact").JSX.Element;
-export type Ref<T> = {
-    current: T;
-};
+export type Ref<T> = import("preact/hooks").Ref<T>;
 export type IconProps = {
@@ -25,0 +23,0 @@ /**

lib/components/Icon.js

@@ -41,3 +41,3 @@ var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/components/Icon.js";
   const element =
-  /** @type {Ref<HTMLElement>} */
+  /** @type {{ current: HTMLElement }} */
   useRef();
@@ -44,0 +44,0 @@ useLayoutEffect(() => {

lib/components/Link.d.ts

@@ -19,3 +19,3 @@ /**
 export function Link({ children, classes, linkRef, ...restProps }: LinkProps): import("preact").JSX.Element;
-export type Children = string | number | boolean | object | import("preact").VNode<any> | import("preact").ComponentChild[] | null | undefined;
+export type Children = import('preact').ComponentChildren;
 export type LinkBaseProps = {
@@ -31,4 +31,4 @@ children: Children;
      */
-    linkRef?: import("preact").RefObject<HTMLAnchorElement> | import("preact").RefCallback<HTMLAnchorElement> | undefined;
+    linkRef?: import("preact").Ref<HTMLAnchorElement> | undefined;
 };
-export type LinkProps = LinkBaseProps & import("preact").JSX.HTMLAttributes<HTMLAnchorElement>;
+export type LinkProps = LinkBaseProps & import('preact').JSX.HTMLAttributes<HTMLAnchorElement>;

lib/components/Modal.d.ts

@@ -34,52 +34,3 @@ /**
 export function ConfirmModal({ message, confirmAction, onConfirm, onCancel, ...restProps }: ConfirmModalProps): import("preact").JSX.Element;
-export type DialogProps = {
-    /**
-     * -
-     * Additional `Button` elements to display at the bottom of the dialog.
-     * A "Cancel" button is added automatically if the `onCancel` prop is set.
-     */
-    buttons?: import("preact").ComponentChildren;
-    /**
-     * - Label for the cancel button
-     */
-    cancelLabel?: string | undefined;
-    children: import("preact").ComponentChildren;
-    /**
-     * - CSS class to apply to the dialog's content
-     */
-    contentClass?: string | undefined;
-    /**
-     * - Name of optional icon to render in header
-     */
-    icon?: string | symbol | undefined;
-    /**
-     * -
-     * Child element to focus when the dialog is rendered. If not provided,
-     * the Dialog's container will be automatically focused on opening. Set to
-     * `null` to opt out of automatic focus control.
-     */
-    initialFocus?: import("preact/hooks").Ref<HTMLElement> | null | undefined;
-    /**
-     * -
-     * A callback to invoke when the user cancels the dialog. If provided, a
-     * "Cancel" button will be displayed.
-     */
-    onCancel?: (() => void) | undefined;
-    /**
-     * - The aria role for the dialog (defaults to" dialog")
-     */
-    role?: "dialog" | "alertdialog" | undefined;
-    title: string;
-    /**
-     * - If `onCancel` is provided, render
-     * a Cancel button as one of the Dialog's buttons (along with any other
-     * `buttons`)
-     */
-    withCancelButton?: boolean | undefined;
-    /**
-     * - If `onCancel` is provided, render
-     * a close button (X icon) in the Dialog's header
-     */
-    withCloseButton?: boolean | undefined;
-};
+export type DialogProps = import('./Dialog').DialogProps;
 export type ModalBaseProps = {
@@ -91,3 +42,3 @@ /**
 };
-export type ModalProps = import("./Dialog").DialogProps & ModalBaseProps;
+export type ModalProps = DialogProps & ModalBaseProps;
 export type ConfirmModalBaseProps = {
@@ -111,2 +62,2 @@ /**
 };
-export type ConfirmModalProps = Pick<ModalProps, "title" | "icon" | "role" | "cancelLabel" | "contentClass" | "initialFocus" | "onCancel" | "withCancelButton" | "withCloseButton"> & ConfirmModalBaseProps;
+export type ConfirmModalProps = Omit<ModalProps, 'buttons' | 'children'> & ConfirmModalBaseProps;

lib/components/Modal.js

@@ -33,5 +33,5 @@ var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/components/Modal.js";
 }) {
-  const modalContainerRef = useRef(
-  /** @type {HTMLDivElement | null} */
-  null);
+  const modalContainerRef =
+  /** @type {{ current: HTMLDivElement }} */
+  useRef();
   useElementShouldClose(modalContainerRef, true
@@ -49,3 +49,3 @@ /* isOpen */
       fileName: _jsxFileName,
-      lineNumber: 37,
+      lineNumber: 39,
       columnNumber: 7
@@ -61,3 +61,3 @@ }, this), _jsxDEV("div", {
         fileName: _jsxFileName,
-        lineNumber: 39,
+        lineNumber: 41,
         columnNumber: 9
@@ -67,3 +67,3 @@ }, this)
       fileName: _jsxFileName,
-      lineNumber: 38,
+      lineNumber: 40,
       columnNumber: 7
@@ -106,3 +106,3 @@ }, this)]
       fileName: _jsxFileName,
-      lineNumber: 74,
+      lineNumber: 76,
       columnNumber: 9
@@ -115,3 +115,3 @@ }, this)],
       fileName: _jsxFileName,
-      lineNumber: 85,
+      lineNumber: 87,
       columnNumber: 7
@@ -121,3 +121,3 @@ }, this)
     fileName: _jsxFileName,
-    lineNumber: 71,
+    lineNumber: 73,
     columnNumber: 5
@@ -124,0 +124,0 @@ }, this);

lib/components/SvgIcon.d.ts

@@ -42,3 +42,3 @@ /**
 export function registerIcons(icons: Record<string, string>, { reset }?: {
-    reset: boolean | undefined;
+    reset?: boolean | undefined;
 }): void;
@@ -78,4 +78,2 @@ /**
 export type IconMap = Map<string | symbol, string>;
-export type Ref<T> = {
-    current: T;
-};
+export type Ref<T> = import("preact/hooks").Ref<T>;

lib/components/SvgIcon.js

@@ -56,3 +56,3 @@ var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/components/SvgIcon.js";
   const element =
-  /** @type {Ref<HTMLElement>} */
+  /** @type {{ current: HTMLElement }} */
   useRef();
@@ -59,0 +59,0 @@ useLayoutEffect(() => {

lib/components/Table.js

 var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/components/Table.js";
 import classnames from 'classnames';
 import { useEffect, useRef } from 'preact/hooks';
-import { downcastRef } from '../util/typing';
 import { Spinner } from './Spinner';
@@ -93,8 +92,8 @@ import { Scrollbox } from './containers';
   []);
-  const scrollboxRef = useRef(
-  /** @type {HTMLElement|null} */
-  null);
-  const headerRef = useRef(
-  /** @type {HTMLElement|null} */
-  null);
+  const scrollboxRef =
+  /** @type {{ current: HTMLElement }} */
+  useRef();
+  const headerRef =
+  /** @type {{ current: HTMLTableSectionElement }} */
+  useRef();
   /** @param {Item} item */
@@ -161,3 +160,3 @@
 
-    if (rowEl && headingEl && scrollboxEl) {
+    if (rowEl) {
       const headingHeight = headingEl.offsetHeight; // The top of the selected row, relative to the top of the Scrollbox frame
@@ -195,3 +194,3 @@
       children: [_jsxDEV("thead", {
-        ref: downcastRef(headerRef),
+        ref: headerRef,
         children: _jsxDEV("tr", {
@@ -198,0 +197,0 @@ children: tableHeaders.map(({

lib/components/TextInput.d.ts

@@ -41,3 +41,3 @@ /**
 export function TextInputWithButton({ children, classes }: TextInputWithButtonProps): import("preact").JSX.Element;
-export type Children = string | number | boolean | object | import("preact").VNode<any> | import("preact").ComponentChild[] | null | undefined;
+export type Children = import('preact').ComponentChildren;
 export type TextInputBaseProps = {
@@ -52,3 +52,3 @@ /**
      */
-    inputRef?: import("preact").RefObject<HTMLInputElement> | import("preact").RefCallback<HTMLInputElement> | undefined;
+    inputRef?: import("preact").Ref<HTMLInputElement> | undefined;
     /**
@@ -63,5 +63,5 @@ * - There is an error associated with this input. Will
      */
-    type?: "text" | "email" | "search" | "url" | undefined;
+    type?: "search" | "text" | "email" | "url" | undefined;
 };
-export type TextInputProps = TextInputBaseProps & import("preact").JSX.HTMLAttributes<HTMLInputElement>;
+export type TextInputProps = TextInputBaseProps & import('preact').JSX.HTMLAttributes<HTMLInputElement>;
 export type TextInputWithButtonProps = {
@@ -68,0 +68,0 @@ children: Children;

lib/components/Thumbnail.d.ts

@@ -41,3 +41,3 @@ /**
 export function Thumbnail({ children, classes, isLoading, placeholder, size, }: ThumbnailProps): import("preact").JSX.Element;
-export type Children = string | number | boolean | object | import("preact").VNode<any> | import("preact").ComponentChild[] | null | undefined;
+export type Children = import('preact').ComponentChildren;
 export type ThumbnailProps = {
@@ -44,0 +44,0 @@ /**

lib/hooks/use-element-should-close.d.ts

@@ -20,4 +20,2 @@ /**
 export function useElementShouldClose(closeableEl: Ref<HTMLElement>, isOpen: boolean, handleClose: () => void): void;
-export type Ref<T> = {
-    current: T;
-};
+export type Ref<T> = import("preact/hooks").Ref<T>;

lib/hooks/use-element-should-close.js

@@ -63,3 +63,3 @@ import { useEffect } from 'preact/hooks';
     const removeFocusListener = listen(document.body, ['focus'], event => {
-      if (!closeableEl.current.contains(
+      if (closeableEl.current && !closeableEl.current.contains(
       /** @type {Node} */
@@ -75,3 +75,3 @@ event.target)) {
     const removeClickListener = listen(document.body, ['mousedown', 'click'], event => {
-      if (!closeableEl.current.contains(
+      if (closeableEl.current && !closeableEl.current.contains(
       /** @type {Node} */
@@ -78,0 +78,0 @@ event.target)) {

lib/pattern-library/components/Library.js

@@ -5,2 +5,3 @@ var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/Library.js";
 import { useState } from 'preact/hooks';
+import { Frame } from '../../components/containers';
 import { LabeledButton } from '../../components/buttons';
@@ -56,14 +57,20 @@ import { jsxToString } from '../util/jsx-to-string';
   return _jsxDEV("section", {
-    className: "LibraryPage",
+    className: "max-w-6xl space-y-4 p-4",
     children: [_jsxDEV("h1", {
-      className: "Library__heading1",
       children: title
     }, void 0, false, {
       fileName: _jsxFileName,
-      lineNumber: 52,
+      lineNumber: 53,
       columnNumber: 7
-    }, this), children]
+    }, this), _jsxDEV("div", {
+      className: "space-y-4",
+      children: children
+    }, void 0, false, {
+      fileName: _jsxFileName,
+      lineNumber: 54,
+      columnNumber: 7
+    }, this)]
   }, void 0, true, {
     fileName: _jsxFileName,
-    lineNumber: 51,
+    lineNumber: 52,
     columnNumber: 5
@@ -84,14 +91,20 @@ }, this);
   return _jsxDEV("section", {
-    className: "LibraryPattern",
+    className: "space-y-4",
     children: [_jsxDEV("h2", {
-      className: "Library__heading2",
       children: title
     }, void 0, false, {
       fileName: _jsxFileName,
-      lineNumber: 66,
+      lineNumber: 67,
       columnNumber: 7
-    }, this), children]
+    }, this), _jsxDEV("div", {
+      className: "space-y-4",
+      children: children
+    }, void 0, false, {
+      fileName: _jsxFileName,
+      lineNumber: 68,
+      columnNumber: 7
+    }, this)]
   }, void 0, true, {
     fileName: _jsxFileName,
-    lineNumber: 65,
+    lineNumber: 66,
     columnNumber: 5
@@ -131,28 +144,38 @@ }, this);
   return _jsxDEV("div", {
-    className: classnames('LibraryExample', `LibraryExample--${variant}`),
-    children: [_jsxDEV("div", {
-      className: "LibraryExample__content",
-      children: [title && _jsxDEV("h3", {
-        className: "Library__heading3",
-        children: title
+    className: "space-y-4",
+    children: [title && _jsxDEV("h3", {
+      children: title
+    }, void 0, false, {
+      fileName: _jsxFileName,
+      lineNumber: 103,
+      columnNumber: 17
+    }, this), _jsxDEV("div", {
+      className: classnames('grid gap-4', {
+        'grid-cols-2': variant === 'split'
+      }),
+      children: [_jsxDEV("div", {
+        className: "space-y-4",
+        children: notDemos
       }, void 0, false, {
         fileName: _jsxFileName,
-        lineNumber: 103,
-        columnNumber: 19
-      }, this), notDemos]
+        lineNumber: 109,
+        columnNumber: 9
+      }, this), _jsxDEV("div", {
+        className: classnames({
+          'flex flex-row gap-16 flex-wrap': variant === 'wide'
+        }),
+        children: demos
+      }, void 0, false, {
+        fileName: _jsxFileName,
+        lineNumber: 110,
+        columnNumber: 9
+      }, this)]
     }, void 0, true, {
       fileName: _jsxFileName,
-      lineNumber: 102,
+      lineNumber: 104,
       columnNumber: 7
-    }, this), _jsxDEV("div", {
-      className: "LibraryExample__demos",
-      children: demos
-    }, void 0, false, {
-      fileName: _jsxFileName,
-      lineNumber: 106,
-      columnNumber: 7
     }, this)]
   }, void 0, true, {
     fileName: _jsxFileName,
-    lineNumber: 101,
+    lineNumber: 102,
     columnNumber: 5
@@ -192,6 +215,7 @@ }, this);
         children: _jsxDEV("pre", {
+          className: "font-pre whitespace-pre-wrap break-words text-sm",
           children: jsxToString(child)
         }, void 0, false, {
           fileName: _jsxFileName,
-          lineNumber: 135,
+          lineNumber: 146,
           columnNumber: 11
@@ -201,3 +225,3 @@ }, this)
         fileName: _jsxFileName,
-        lineNumber: 134,
+        lineNumber: 145,
         columnNumber: 9
@@ -207,3 +231,3 @@ }, this)
       fileName: _jsxFileName,
-      lineNumber: 133,
+      lineNumber: 144,
       columnNumber: 7
@@ -213,12 +237,17 @@ }, this);
   return _jsxDEV("div", {
-    className: "LibraryDemo",
-    children: [title && _jsxDEV("h4", {
-      className: "Library__heading4",
-      children: title
+    children: [title && _jsxDEV("div", {
+      className: "py-4",
+      children: _jsxDEV("h4", {
+        children: title
+      }, void 0, false, {
+        fileName: _jsxFileName,
+        lineNumber: 157,
+        columnNumber: 11
+      }, this)
     }, void 0, false, {
       fileName: _jsxFileName,
-      lineNumber: 142,
-      columnNumber: 17
+      lineNumber: 156,
+      columnNumber: 9
     }, this), _jsxDEV("div", {
-      className: "LibraryDemo__tabs",
+      className: "flex flex-row items-center gap-x-4 -mb-px",
       children: [_jsxDEV(LabeledButton, {
@@ -231,3 +260,3 @@ onClick: () => setVisibleTab('demo'),
         fileName: _jsxFileName,
-        lineNumber: 144,
+        lineNumber: 161,
         columnNumber: 9
@@ -241,3 +270,3 @@ }, this), withSource && _jsxDEV(LabeledButton, {
         fileName: _jsxFileName,
-        lineNumber: 152,
+        lineNumber: 169,
         columnNumber: 11
@@ -247,15 +276,15 @@ }, this)]
       fileName: _jsxFileName,
-      lineNumber: 143,
+      lineNumber: 160,
       columnNumber: 7
     }, this), _jsxDEV("div", {
-      className: "LibraryDemo__container",
+      className: "border-t py-4",
       children: [visibleTab === 'demo' && _jsxDEV("div", {
-        className: "LibraryDemo__demo",
+        className: "w-full",
         style: style,
         children: _jsxDEV("div", {
-          className: "LibraryDemo__demo-content",
+          className: "h-full flex flex-row items-center justify-center gap-2",
           children: children
         }, void 0, false, {
           fileName: _jsxFileName,
-          lineNumber: 164,
+          lineNumber: 181,
           columnNumber: 13
@@ -265,6 +294,6 @@ }, this)
         fileName: _jsxFileName,
-        lineNumber: 163,
+        lineNumber: 180,
         columnNumber: 11
-      }, this), visibleTab === 'source' && _jsxDEV("div", {
-        className: "LibraryDemo__source",
+      }, this), visibleTab === 'source' && _jsxDEV(Frame, {
+        classes: "w-full",
         children: _jsxDEV("ul", {
@@ -274,3 +303,3 @@ children: source
           fileName: _jsxFileName,
-          lineNumber: 169,
+          lineNumber: 188,
           columnNumber: 13
@@ -280,3 +309,3 @@ }, this)
         fileName: _jsxFileName,
-        lineNumber: 168,
+        lineNumber: 187,
         columnNumber: 11
@@ -286,3 +315,3 @@ }, this)]
       fileName: _jsxFileName,
-      lineNumber: 161,
+      lineNumber: 178,
       columnNumber: 7
@@ -292,3 +321,3 @@ }, this)]
     fileName: _jsxFileName,
-    lineNumber: 141,
+    lineNumber: 154,
     columnNumber: 5
@@ -295,0 +324,0 @@ }, this);

lib/pattern-library/components/LibraryHome.js

@@ -15,3 +15,2 @@ var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/LibraryHome.js";
     }, this), _jsxDEV("h2", {
-      className: "Library__heading2",
       children: "Foundations"
@@ -41,3 +40,2 @@ }, void 0, false, {
     }, this), _jsxDEV("h2", {
-      className: "Library__heading2",
       children: "Patterns"
@@ -67,3 +65,2 @@ }, void 0, false, {
     }, this), _jsxDEV("h2", {
-      className: "Library__heading2",
       children: "Components"
@@ -70,0 +67,0 @@ }, void 0, false, {

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

@@ -21,2 +21,3 @@ var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/ButtonComponents.js";
     }, this), _jsxDEV("ul", {
+      className: "hyp-list",
       children: [_jsxDEV("li", {
@@ -58,2 +59,3 @@ children: "Default"
     }, this), _jsxDEV("ul", {
+      className: "hyp-list",
       children: [_jsxDEV("li", {
@@ -60,0 +62,0 @@ children: "Default"

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

 var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/ColorFoundations.js";
-import Library from '../Library'; // TODO:
-// - color descriptions and guidance
-// - hex and other metadata about colors
-// - foreground color examples
-// - more examples of overriding with `!` classes
-// - valid contrast combinations
-
+import classnames from 'classnames';
+import Library from '../Library';
 import { jsxDEV as _jsxDEV } from "preact/jsx-dev-runtime";
-const brand = ['brand'];
-const greys = ['white', 'grey-0', 'grey-1', 'grey-2', 'grey-3', 'grey-4', 'grey-5', 'grey-6', 'grey-7', 'grey-8', 'grey-9'];
-const states = ['success', 'notice', 'error'];
+import { Fragment as _Fragment } from "preact/jsx-dev-runtime";
 
 function ColorSwatch({
+  colorClass,
   colorName
@@ -19,7 +13,6 @@ }) {
     children: [_jsxDEV("div", {
-      className: `hyp-u-bg-color--${colorName}`,
-      style: "width:16rem;height:2rem;margin-right:1em"
+      className: classnames(colorClass, 'w-64 h-8 mr-4')
     }, void 0, false, {
       fileName: _jsxFileName,
-      lineNumber: 31,
+      lineNumber: 7,
       columnNumber: 7
@@ -31,3 +24,3 @@ }, this), _jsxDEV("p", {
         fileName: _jsxFileName,
-        lineNumber: 36,
+        lineNumber: 9,
         columnNumber: 9
@@ -37,3 +30,3 @@ }, this)
       fileName: _jsxFileName,
-      lineNumber: 35,
+      lineNumber: 8,
       columnNumber: 7
@@ -43,3 +36,3 @@ }, this)]
     fileName: _jsxFileName,
-    lineNumber: 30,
+    lineNumber: 6,
     columnNumber: 5
@@ -49,23 +42,133 @@ }, this);
 
-const brandExamples = brand.map(colorName => _jsxDEV(ColorSwatch, {
-  colorName: colorName
-}, colorName, false, {
-  fileName: _jsxFileName,
-  lineNumber: 43,
-  columnNumber: 3
-}, this));
-const greyExamples = greys.map(colorName => _jsxDEV(ColorSwatch, {
-  colorName: colorName
-}, colorName, false, {
-  fileName: _jsxFileName,
-  lineNumber: 47,
-  columnNumber: 3
-}, this));
-const stateExamples = states.map(colorName => _jsxDEV(ColorSwatch, {
-  colorName: colorName
-}, colorName, false, {
-  fileName: _jsxFileName,
-  lineNumber: 51,
-  columnNumber: 3
-}, this));
+const brandExamples = _jsxDEV(_Fragment, {
+  children: [_jsxDEV(ColorSwatch, {
+    colorClass: "bg-brand",
+    colorName: "brand"
+  }, void 0, false, {
+    fileName: _jsxFileName,
+    lineNumber: 17,
+    columnNumber: 5
+  }, this), _jsxDEV(ColorSwatch, {
+    colorClass: "bg-brand-dark",
+    colorName: "brand-dark"
+  }, void 0, false, {
+    fileName: _jsxFileName,
+    lineNumber: 18,
+    columnNumber: 5
+  }, this)]
+}, void 0, true);
+
+const greyExamples = _jsxDEV(_Fragment, {
+  children: [_jsxDEV(ColorSwatch, {
+    colorClass: "bg-white",
+    colorName: "white"
+  }, void 0, false, {
+    fileName: _jsxFileName,
+    lineNumber: 24,
+    columnNumber: 5
+  }, this), _jsxDEV(ColorSwatch, {
+    colorClass: "bg-grey-0",
+    colorName: "grey-0"
+  }, void 0, false, {
+    fileName: _jsxFileName,
+    lineNumber: 25,
+    columnNumber: 5
+  }, this), _jsxDEV(ColorSwatch, {
+    colorClass: "bg-grey-1",
+    colorName: "grey-1"
+  }, void 0, false, {
+    fileName: _jsxFileName,
+    lineNumber: 26,
+    columnNumber: 5
+  }, this), _jsxDEV(ColorSwatch, {
+    colorClass: "bg-grey-2",
+    colorName: "grey-2"
+  }, void 0, false, {
+    fileName: _jsxFileName,
+    lineNumber: 27,
+    columnNumber: 5
+  }, this), _jsxDEV(ColorSwatch, {
+    colorClass: "bg-grey-3",
+    colorName: "grey-3"
+  }, void 0, false, {
+    fileName: _jsxFileName,
+    lineNumber: 28,
+    columnNumber: 5
+  }, this), _jsxDEV(ColorSwatch, {
+    colorClass: "bg-grey-4",
+    colorName: "grey-4"
+  }, void 0, false, {
+    fileName: _jsxFileName,
+    lineNumber: 29,
+    columnNumber: 5
+  }, this), _jsxDEV(ColorSwatch, {
+    colorClass: "bg-grey-5",
+    colorName: "grey-5"
+  }, void 0, false, {
+    fileName: _jsxFileName,
+    lineNumber: 30,
+    columnNumber: 5
+  }, this), _jsxDEV(ColorSwatch, {
+    colorClass: "bg-grey-6",
+    colorName: "grey-6"
+  }, void 0, false, {
+    fileName: _jsxFileName,
+    lineNumber: 31,
+    columnNumber: 5
+  }, this), _jsxDEV(ColorSwatch, {
+    colorClass: "bg-grey-7",
+    colorName: "grey-7"
+  }, void 0, false, {
+    fileName: _jsxFileName,
+    lineNumber: 32,
+    columnNumber: 5
+  }, this), _jsxDEV(ColorSwatch, {
+    colorClass: "bg-grey-8",
+    colorName: "grey-8"
+  }, void 0, false, {
+    fileName: _jsxFileName,
+    lineNumber: 33,
+    columnNumber: 5
+  }, this), _jsxDEV(ColorSwatch, {
+    colorClass: "bg-grey-9",
+    colorName: "grey-9"
+  }, void 0, false, {
+    fileName: _jsxFileName,
+    lineNumber: 34,
+    columnNumber: 5
+  }, this), _jsxDEV(ColorSwatch, {
+    colorClass: "bg-black",
+    colorName: "black"
+  }, void 0, false, {
+    fileName: _jsxFileName,
+    lineNumber: 35,
+    columnNumber: 5
+  }, this)]
+}, void 0, true);
+
+const stateExamples = _jsxDEV(_Fragment, {
+  children: [_jsxDEV(ColorSwatch, {
+    colorClass: "bg-green-success",
+    colorName: "green-success"
+  }, void 0, false, {
+    fileName: _jsxFileName,
+    lineNumber: 41,
+    columnNumber: 5
+  }, this), _jsxDEV(ColorSwatch, {
+    colorClass: "bg-yellow-notice",
+    colorName: "yellow-notice"
+  }, void 0, false, {
+    fileName: _jsxFileName,
+    lineNumber: 42,
+    columnNumber: 5
+  }, this), _jsxDEV(ColorSwatch, {
+    colorClass: "bg-red-error",
+    colorName: "red-error"
+  }, void 0, false, {
+    fileName: _jsxFileName,
+    lineNumber: 43,
+    columnNumber: 5
+  }, this)]
+}, void 0, true);
+
 export default function ColorFoundations() {
@@ -77,8 +180,7 @@ return _jsxDEV(Library.Page, {
       children: _jsxDEV("div", {
-        className: "hyp-u-layout-row",
-        style: "flex-wrap:wrap",
+        className: "flex flex-row flex-wrap gap-4",
         children: brandExamples
       }, void 0, false, {
         fileName: _jsxFileName,
-        lineNumber: 58,
+        lineNumber: 51,
         columnNumber: 9
@@ -88,3 +190,3 @@ }, this)
       fileName: _jsxFileName,
-      lineNumber: 57,
+      lineNumber: 50,
       columnNumber: 7
@@ -94,8 +196,7 @@ }, this), _jsxDEV(Library.Pattern, {
       children: _jsxDEV("div", {
-        className: "hyp-u-layout-row",
-        style: "flex-wrap:wrap",
+        className: "flex flex-row flex-wrap gap-4",
         children: greyExamples
       }, void 0, false, {
         fileName: _jsxFileName,
-        lineNumber: 64,
+        lineNumber: 55,
         columnNumber: 9
@@ -105,3 +206,3 @@ }, this)
       fileName: _jsxFileName,
-      lineNumber: 63,
+      lineNumber: 54,
       columnNumber: 7
@@ -111,8 +212,7 @@ }, this), _jsxDEV(Library.Pattern, {
       children: _jsxDEV("div", {
-        className: "hyp-u-layout-row",
-        style: "flex-wrap:wrap",
+        className: "flex flex-row flex-wrap gap-4",
         children: stateExamples
       }, void 0, false, {
         fileName: _jsxFileName,
-        lineNumber: 70,
+        lineNumber: 59,
         columnNumber: 9
@@ -122,3 +222,3 @@ }, this)
       fileName: _jsxFileName,
-      lineNumber: 69,
+      lineNumber: 58,
       columnNumber: 7
@@ -128,3 +228,3 @@ }, this)]
     fileName: _jsxFileName,
-    lineNumber: 56,
+    lineNumber: 49,
     columnNumber: 5
@@ -131,0 +231,0 @@ }, this);

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

@@ -307,3 +307,3 @@ var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/ContainerComponents.js";
               children: _jsxDEV("ul", {
-                className: "hyp-u-padding hyp-u-vertical-spacing",
+                className: "p-3 space-y-4",
                 children: _jsxDEV(SampleListElements, {}, void 0, false, {
@@ -355,3 +355,3 @@ fileName: _jsxFileName,
               }, this), _jsxDEV("ul", {
-                className: "hyp-u-padding hyp-u-vertical-spacing",
+                className: "p-3 pt-0 space-y-4",
                 children: _jsxDEV(SampleListElements, {}, void 0, false, {
@@ -358,0 +358,0 @@ fileName: _jsxFileName,

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

 var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/DialogComponents.js";
 import { createRef } from 'preact';
 import { useState } from 'preact/hooks';
+import { Scrollbox } from '../../..';
 import Library from '../Library';
@@ -17,3 +18,3 @@ import { ConfirmModal, Dialog, IconButton, LabeledButton, Modal, TextInput, TextInputWithButton } from '../../../';
     fileName: _jsxFileName,
-    lineNumber: 23,
+    lineNumber: 24,
     columnNumber: 5
@@ -26,3 +27,3 @@ }, this), _jsxDEV(LabeledButton, {
     fileName: _jsxFileName,
-    lineNumber: 26,
+    lineNumber: 27,
     columnNumber: 5
@@ -38,3 +39,3 @@ }, this)];
       fileName: _jsxFileName,
-      lineNumber: 37,
+      lineNumber: 38,
       columnNumber: 7
@@ -54,3 +55,3 @@ }, this);
           fileName: _jsxFileName,
-          lineNumber: 54,
+          lineNumber: 55,
           columnNumber: 21
@@ -61,3 +62,3 @@ }, this), ", with initial focus on a", ' ', _jsxDEV("code", {
           fileName: _jsxFileName,
-          lineNumber: 55,
+          lineNumber: 56,
           columnNumber: 11
@@ -67,3 +68,3 @@ }, this), " component input."]
         fileName: _jsxFileName,
-        lineNumber: 53,
+        lineNumber: 54,
         columnNumber: 9
@@ -76,3 +77,3 @@ }, this), _jsxDEV(TextInputWithButton, {
           fileName: _jsxFileName,
-          lineNumber: 58,
+          lineNumber: 59,
           columnNumber: 11
@@ -85,3 +86,3 @@ }, this), _jsxDEV(IconButton, {
           fileName: _jsxFileName,
-          lineNumber: 59,
+          lineNumber: 60,
           columnNumber: 11
@@ -91,3 +92,3 @@ }, this)]
         fileName: _jsxFileName,
-        lineNumber: 57,
+        lineNumber: 58,
         columnNumber: 9
@@ -97,3 +98,3 @@ }, this)]
       fileName: _jsxFileName,
-      lineNumber: 46,
+      lineNumber: 47,
       columnNumber: 7
@@ -114,3 +115,3 @@ }, this);
       fileName: _jsxFileName,
-      lineNumber: 71,
+      lineNumber: 72,
       columnNumber: 7
@@ -128,3 +129,3 @@ }, this);
         fileName: _jsxFileName,
-        lineNumber: 86,
+        lineNumber: 87,
         columnNumber: 9
@@ -134,3 +135,3 @@ }, this)
       fileName: _jsxFileName,
-      lineNumber: 80,
+      lineNumber: 81,
       columnNumber: 7
@@ -151,3 +152,3 @@ }, this);
       fileName: _jsxFileName,
-      lineNumber: 97,
+      lineNumber: 98,
       columnNumber: 7
@@ -165,3 +166,3 @@ }, this);
         fileName: _jsxFileName,
-        lineNumber: 112,
+        lineNumber: 113,
         columnNumber: 9
@@ -171,3 +172,3 @@ }, this)
       fileName: _jsxFileName,
-      lineNumber: 106,
+      lineNumber: 107,
       columnNumber: 7
@@ -187,3 +188,3 @@ }, this);
     fileName: _jsxFileName,
-    lineNumber: 123,
+    lineNumber: 124,
     columnNumber: 5
@@ -199,3 +200,3 @@ }, this)];
       fileName: _jsxFileName,
-      lineNumber: 134,
+      lineNumber: 135,
       columnNumber: 7
@@ -214,3 +215,3 @@ }, this);
           fileName: _jsxFileName,
-          lineNumber: 150,
+          lineNumber: 151,
           columnNumber: 21
@@ -221,3 +222,3 @@ }, this), ", with initial focus on a", ' ', _jsxDEV("code", {
           fileName: _jsxFileName,
-          lineNumber: 151,
+          lineNumber: 152,
           columnNumber: 11
@@ -227,3 +228,3 @@ }, this), " component input."]
         fileName: _jsxFileName,
-        lineNumber: 149,
+        lineNumber: 150,
         columnNumber: 9
@@ -236,3 +237,3 @@ }, this), _jsxDEV(TextInputWithButton, {
           fileName: _jsxFileName,
-          lineNumber: 154,
+          lineNumber: 155,
           columnNumber: 11
@@ -245,3 +246,3 @@ }, this), _jsxDEV(IconButton, {
           fileName: _jsxFileName,
-          lineNumber: 155,
+          lineNumber: 156,
           columnNumber: 11
@@ -251,3 +252,3 @@ }, this)]
         fileName: _jsxFileName,
-        lineNumber: 153,
+        lineNumber: 154,
         columnNumber: 9
@@ -257,3 +258,3 @@ }, this)]
       fileName: _jsxFileName,
-      lineNumber: 143,
+      lineNumber: 144,
       columnNumber: 7
@@ -272,3 +273,3 @@ }, this);
     fileName: _jsxFileName,
-    lineNumber: 166,
+    lineNumber: 167,
     columnNumber: 5
@@ -284,3 +285,3 @@ }, this)];
       fileName: _jsxFileName,
-      lineNumber: 177,
+      lineNumber: 178,
       columnNumber: 7
@@ -293,7 +294,7 @@ }, this);
       title: "Modal with overflowing content",
-      children: _jsxDEV("div", {
-        className: "hyp-scrollbox",
+      children: _jsxDEV(Scrollbox, {
+        classes: "px-4 py-2",
         children: _jsxDEV(LoremIpsum, {}, void 0, false, {
           fileName: _jsxFileName,
-          lineNumber: 192,
+          lineNumber: 193,
           columnNumber: 11
@@ -303,3 +304,3 @@ }, this)
         fileName: _jsxFileName,
-        lineNumber: 191,
+        lineNumber: 192,
         columnNumber: 9
@@ -309,3 +310,3 @@ }, this)
       fileName: _jsxFileName,
-      lineNumber: 186,
+      lineNumber: 187,
       columnNumber: 7
@@ -326,3 +327,3 @@ }, this);
       fileName: _jsxFileName,
-      lineNumber: 204,
+      lineNumber: 205,
       columnNumber: 7
@@ -339,3 +340,3 @@ }, this);
       fileName: _jsxFileName,
-      lineNumber: 213,
+      lineNumber: 214,
       columnNumber: 7
@@ -356,3 +357,3 @@ }, this);
           fileName: _jsxFileName,
-          lineNumber: 229,
+          lineNumber: 230,
           columnNumber: 13
@@ -362,3 +363,3 @@ }, this), " prompts for user interaction and will take focus when opened."]
         fileName: _jsxFileName,
-        lineNumber: 228,
+        lineNumber: 229,
         columnNumber: 9
@@ -370,3 +371,3 @@ }, this), _jsxDEV("p", {
           fileName: _jsxFileName,
-          lineNumber: 233,
+          lineNumber: 234,
           columnNumber: 17
@@ -377,3 +378,3 @@ }, this), " when you want to route focus. Consider using a ", _jsxDEV("code", {
           fileName: _jsxFileName,
-          lineNumber: 234,
+          lineNumber: 235,
           columnNumber: 13
@@ -383,3 +384,3 @@ }, this), " for presenting panel-styled content that does not require grabbing focus."]
         fileName: _jsxFileName,
-        lineNumber: 232,
+        lineNumber: 233,
         columnNumber: 9
@@ -391,3 +392,3 @@ }, this), _jsxDEV("p", {
           fileName: _jsxFileName,
-          lineNumber: 238,
+          lineNumber: 239,
           columnNumber: 11
@@ -398,3 +399,3 @@ }, this), " are styled using the ", _jsxDEV("code", {
           fileName: _jsxFileName,
-          lineNumber: 238,
+          lineNumber: 239,
           columnNumber: 53
@@ -404,3 +405,3 @@ }, this), " pattern."]
         fileName: _jsxFileName,
-        lineNumber: 237,
+        lineNumber: 238,
         columnNumber: 9
@@ -414,3 +415,3 @@ }, this), _jsxDEV(Library.Example, {
             fileName: _jsxFileName,
-            lineNumber: 242,
+            lineNumber: 243,
             columnNumber: 47
@@ -421,3 +422,3 @@ }, this), " with an explicitly-provided element (", _jsxDEV("code", {
             fileName: _jsxFileName,
-            lineNumber: 243,
+            lineNumber: 244,
             columnNumber: 42
@@ -428,3 +429,3 @@ }, this), ") that should take initial focus: a text ", _jsxDEV("code", {
             fileName: _jsxFileName,
-            lineNumber: 244,
+            lineNumber: 245,
             columnNumber: 35
@@ -435,3 +436,3 @@ }, this), ". The highlighted outline is added here by using ", _jsxDEV("code", {
             fileName: _jsxFileName,
-            lineNumber: 245,
+            lineNumber: 246,
             columnNumber: 33
@@ -442,3 +443,3 @@ }, this), " on the", ' ', _jsxDEV("code", {
             fileName: _jsxFileName,
-            lineNumber: 246,
+            lineNumber: 247,
             columnNumber: 13
@@ -448,3 +449,3 @@ }, this), " element."]
           fileName: _jsxFileName,
-          lineNumber: 241,
+          lineNumber: 242,
           columnNumber: 11
@@ -456,3 +457,3 @@ }, this), _jsxDEV("p", {
             fileName: _jsxFileName,
-            lineNumber: 250,
+            lineNumber: 251,
             columnNumber: 30
@@ -463,3 +464,3 @@ }, this), " or ", _jsxDEV("code", {
             fileName: _jsxFileName,
-            lineNumber: 250,
+            lineNumber: 251,
             columnNumber: 53
@@ -470,3 +471,3 @@ }, this), " is opened. This might arise if you have nested components within a", ' ', _jsxDEV("code", {
             fileName: _jsxFileName,
-            lineNumber: 252,
+            lineNumber: 253,
             columnNumber: 13
@@ -477,3 +478,3 @@ }, this), " or ", _jsxDEV("code", {
             fileName: _jsxFileName,
-            lineNumber: 252,
+            lineNumber: 253,
             columnNumber: 35
@@ -484,3 +485,3 @@ }, this), ", or there is complex logic about focus. Setting the ", _jsxDEV("code", {
             fileName: _jsxFileName,
-            lineNumber: 253,
+            lineNumber: 254,
             columnNumber: 38
@@ -491,3 +492,3 @@ }, this), " prop to", ' ', _jsxDEV("code", {
             fileName: _jsxFileName,
-            lineNumber: 254,
+            lineNumber: 255,
             columnNumber: 13
@@ -497,3 +498,3 @@ }, this), " will opt out of automatic focus handling."]
           fileName: _jsxFileName,
-          lineNumber: 248,
+          lineNumber: 249,
           columnNumber: 11
@@ -503,3 +504,3 @@ }, this), _jsxDEV(Library.Demo, {
             fileName: _jsxFileName,
-            lineNumber: 258,
+            lineNumber: 259,
             columnNumber: 13
@@ -509,3 +510,3 @@ }, this)
           fileName: _jsxFileName,
-          lineNumber: 257,
+          lineNumber: 258,
           columnNumber: 11
@@ -515,3 +516,3 @@ }, this)]
         fileName: _jsxFileName,
-        lineNumber: 240,
+        lineNumber: 241,
         columnNumber: 9
@@ -525,3 +526,3 @@ }, this), _jsxDEV(Library.Example, {
             fileName: _jsxFileName,
-            lineNumber: 264,
+            lineNumber: 265,
             columnNumber: 27
@@ -532,3 +533,3 @@ }, this), " will render both a close button (x) and a Cancel button if an ", _jsxDEV("code", {
             fileName: _jsxFileName,
-            lineNumber: 265,
+            lineNumber: 266,
             columnNumber: 43
@@ -539,3 +540,3 @@ }, this), " callback is provided, but this can be overridden with the", ' ', _jsxDEV("code", {
             fileName: _jsxFileName,
-            lineNumber: 267,
+            lineNumber: 268,
             columnNumber: 13
@@ -546,3 +547,3 @@ }, this), " and ", _jsxDEV("code", {
             fileName: _jsxFileName,
-            lineNumber: 267,
+            lineNumber: 268,
             columnNumber: 47
@@ -552,3 +553,3 @@ }, this), ' ', "boolean props for the cancel button and close button, respectively."]
           fileName: _jsxFileName,
-          lineNumber: 263,
+          lineNumber: 264,
           columnNumber: 11
@@ -559,3 +560,3 @@ }, this), _jsxDEV(Library.Demo, {
             fileName: _jsxFileName,
-            lineNumber: 271,
+            lineNumber: 272,
             columnNumber: 13
@@ -565,3 +566,3 @@ }, this)
           fileName: _jsxFileName,
-          lineNumber: 270,
+          lineNumber: 271,
           columnNumber: 11
@@ -572,3 +573,3 @@ }, this), _jsxDEV(Library.Demo, {
             fileName: _jsxFileName,
-            lineNumber: 275,
+            lineNumber: 276,
             columnNumber: 13
@@ -578,3 +579,3 @@ }, this)
           fileName: _jsxFileName,
-          lineNumber: 274,
+          lineNumber: 275,
           columnNumber: 11
@@ -584,3 +585,3 @@ }, this)]
         fileName: _jsxFileName,
-        lineNumber: 262,
+        lineNumber: 263,
         columnNumber: 9
@@ -590,3 +591,3 @@ }, this)]
       fileName: _jsxFileName,
-      lineNumber: 227,
+      lineNumber: 228,
       columnNumber: 7
@@ -600,3 +601,3 @@ }, this), _jsxDEV(Library.Pattern, {
           fileName: _jsxFileName,
-          lineNumber: 282,
+          lineNumber: 283,
           columnNumber: 13
@@ -607,3 +608,3 @@ }, this), " is a type of ", _jsxDEV("code", {
           fileName: _jsxFileName,
-          lineNumber: 282,
+          lineNumber: 283,
           columnNumber: 45
@@ -613,3 +614,3 @@ }, this), " that centers on the screen and obscures the background with an overlay."]
         fileName: _jsxFileName,
-        lineNumber: 281,
+        lineNumber: 282,
         columnNumber: 9
@@ -622,3 +623,3 @@ }, this), _jsxDEV(Library.Example, {
           fileName: _jsxFileName,
-          lineNumber: 286,
+          lineNumber: 287,
           columnNumber: 11
@@ -628,3 +629,3 @@ }, this), _jsxDEV(Library.Demo, {
             fileName: _jsxFileName,
-            lineNumber: 291,
+            lineNumber: 292,
             columnNumber: 13
@@ -634,3 +635,3 @@ }, this)
           fileName: _jsxFileName,
-          lineNumber: 290,
+          lineNumber: 291,
           columnNumber: 11
@@ -640,3 +641,3 @@ }, this)]
         fileName: _jsxFileName,
-        lineNumber: 285,
+        lineNumber: 286,
         columnNumber: 9
@@ -649,3 +650,3 @@ }, this), _jsxDEV(Library.Example, {
           fileName: _jsxFileName,
-          lineNumber: 296,
+          lineNumber: 297,
           columnNumber: 11
@@ -657,3 +658,3 @@ }, this), _jsxDEV("p", {
             fileName: _jsxFileName,
-            lineNumber: 303,
+            lineNumber: 304,
             columnNumber: 13
@@ -664,3 +665,3 @@ }, this), " to the element you wish to contain. This element needs to be an immediate-child element of the", ' ', _jsxDEV("code", {
             fileName: _jsxFileName,
-            lineNumber: 305,
+            lineNumber: 306,
             columnNumber: 13
@@ -670,3 +671,3 @@ }, this), "."]
           fileName: _jsxFileName,
-          lineNumber: 301,
+          lineNumber: 302,
           columnNumber: 11
@@ -676,3 +677,3 @@ }, this), _jsxDEV(Library.Demo, {
             fileName: _jsxFileName,
-            lineNumber: 308,
+            lineNumber: 309,
             columnNumber: 13
@@ -682,3 +683,3 @@ }, this)
           fileName: _jsxFileName,
-          lineNumber: 307,
+          lineNumber: 308,
           columnNumber: 11
@@ -688,3 +689,3 @@ }, this)]
         fileName: _jsxFileName,
-        lineNumber: 295,
+        lineNumber: 296,
         columnNumber: 9
@@ -694,3 +695,3 @@ }, this)]
       fileName: _jsxFileName,
-      lineNumber: 280,
+      lineNumber: 281,
       columnNumber: 7
@@ -704,3 +705,3 @@ }, this), _jsxDEV(Library.Pattern, {
           fileName: _jsxFileName,
-          lineNumber: 315,
+          lineNumber: 316,
           columnNumber: 11
@@ -711,3 +712,3 @@ }, this), " is intended to mirror the functionality of", ' ', _jsxDEV("code", {
           fileName: _jsxFileName,
-          lineNumber: 316,
+          lineNumber: 317,
           columnNumber: 11
@@ -717,3 +718,3 @@ }, this), "."]
         fileName: _jsxFileName,
-        lineNumber: 314,
+        lineNumber: 315,
         columnNumber: 9
@@ -726,3 +727,3 @@ }, this), _jsxDEV(Library.Example, {
             fileName: _jsxFileName,
-            lineNumber: 320,
+            lineNumber: 321,
             columnNumber: 13
@@ -732,3 +733,3 @@ }, this), " prompts the user for a boolean yes/no input. Close and cancel are considered no."]
           fileName: _jsxFileName,
-          lineNumber: 319,
+          lineNumber: 320,
           columnNumber: 11
@@ -740,3 +741,3 @@ }, this), _jsxDEV("p", {
             fileName: _jsxFileName,
-            lineNumber: 325,
+            lineNumber: 326,
             columnNumber: 13
@@ -747,3 +748,3 @@ }, this), ") and no/cancel (", _jsxDEV("code", {
             fileName: _jsxFileName,
-            lineNumber: 325,
+            lineNumber: 326,
             columnNumber: 52
@@ -754,3 +755,3 @@ }, this), "). Typically, both would (also) close the modal, though in this example, the ", _jsxDEV("code", {
             fileName: _jsxFileName,
-            lineNumber: 327,
+            lineNumber: 328,
             columnNumber: 26
@@ -760,3 +761,3 @@ }, this), " handler does not close the modal."]
           fileName: _jsxFileName,
-          lineNumber: 323,
+          lineNumber: 324,
           columnNumber: 11
@@ -766,3 +767,3 @@ }, this), _jsxDEV(Library.Demo, {
             fileName: _jsxFileName,
-            lineNumber: 331,
+            lineNumber: 332,
             columnNumber: 13
@@ -772,3 +773,3 @@ }, this)
           fileName: _jsxFileName,
-          lineNumber: 330,
+          lineNumber: 331,
           columnNumber: 11
@@ -778,3 +779,3 @@ }, this)]
         fileName: _jsxFileName,
-        lineNumber: 318,
+        lineNumber: 319,
         columnNumber: 9
@@ -784,3 +785,3 @@ }, this)]
       fileName: _jsxFileName,
-      lineNumber: 313,
+      lineNumber: 314,
       columnNumber: 7
@@ -790,3 +791,3 @@ }, this)]
     fileName: _jsxFileName,
-    lineNumber: 226,
+    lineNumber: 227,
     columnNumber: 5
@@ -793,0 +794,0 @@ }, this);

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

@@ -20,7 +20,7 @@ var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/IconFoundations.js";
       children: _jsxDEV("div", {
-        className: "LibraryGrid",
+        className: "grid grid-cols-8 gap-6",
         children: Object.keys(icons).map(iconName => _jsxDEV(Card, {
-          classes: "hyp-u-vertical-spacing hyp-u-layout-column--center IconTile",
+          classes: "flex flex-col items-center bg-grey-0 border-[#9c9cab] space-y-3 rounded-lg",
           children: [_jsxDEV("div", {
-            style: "font-size:1.5rem",
+            style: "text-lg",
             children: _jsxDEV(Icon, {
@@ -27,0 +27,0 @@ name: icons[iconName]

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

 var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/LayoutFoundations.js";
-import classnames from 'classnames';
 import { useState } from 'preact/hooks';
-import { LabeledButton } from '../../../';
+import { Actions, Card, LabeledButton } from '../../../';
 import Library from '../Library';
 import { jsxDEV as _jsxDEV } from "preact/jsx-dev-runtime";
-
-function SquareBlock() {
-  return _jsxDEV("div", {
-    className: "hyp-u-bg-color--grey-4",
-    style: {
-      width: '2rem',
-      height: '2rem'
-    }
-  }, void 0, false, {
-    fileName: _jsxFileName,
-    lineNumber: 9,
-    columnNumber: 5
-  }, this);
-}
-/**
- * Render an example of vertical or horizontal spacing between elements.
- *
- * @param {object} options
- *   @param {'horizontal'|'vertical'} options.direction
- *   @param {number} options.size - Spacing unit size, 0 - 9
- *   @param {boolean} [options.defaultSize] - Is this the "default" spacing for
- *     this orientation?
- */
-
-
-function SpacingDemo({
-  direction,
-  size,
-  defaultSize = false
-}) {
-  const layoutClass = direction === 'vertical' ? 'hyp-u-layout-column' : 'hyp-u-layout-row';
-  const baseClass = direction === 'vertical' ? 'hyp-u-vertical-spacing' : 'hyp-u-horizontal-spacing';
-  const sizeClass = `${baseClass}--${size}`;
-  return _jsxDEV("div", {
-    className: classnames(layoutClass, baseClass),
-    children: [defaultSize ? _jsxDEV("div", {
-      children: _jsxDEV("strong", {
-        children: [size, "*"]
-      }, void 0, true, {
-        fileName: _jsxFileName,
-        lineNumber: 37,
-        columnNumber: 11
-      }, this)
-    }, void 0, false, {
-      fileName: _jsxFileName,
-      lineNumber: 36,
-      columnNumber: 9
-    }, this) : _jsxDEV("div", {
-      children: size
-    }, void 0, false, {
-      fileName: _jsxFileName,
-      lineNumber: 40,
-      columnNumber: 9
-    }, this), _jsxDEV("div", {
-      className: classnames(layoutClass, sizeClass, 'hyp-u-border'),
-      children: [_jsxDEV(SquareBlock, {}, void 0, false, {
-        fileName: _jsxFileName,
-        lineNumber: 43,
-        columnNumber: 9
-      }, this), _jsxDEV(SquareBlock, {}, void 0, false, {
-        fileName: _jsxFileName,
-        lineNumber: 44,
-        columnNumber: 9
-      }, this), _jsxDEV(SquareBlock, {}, void 0, false, {
-        fileName: _jsxFileName,
-        lineNumber: 45,
-        columnNumber: 9
-      }, this), _jsxDEV(SquareBlock, {}, void 0, false, {
-        fileName: _jsxFileName,
-        lineNumber: 46,
-        columnNumber: 9
-      }, this), _jsxDEV(SquareBlock, {}, void 0, false, {
-        fileName: _jsxFileName,
-        lineNumber: 47,
-        columnNumber: 9
-      }, this)]
-    }, void 0, true, {
-      fileName: _jsxFileName,
-      lineNumber: 42,
-      columnNumber: 7
-    }, this), direction === 'horizontal' && _jsxDEV("div", {
-      children: _jsxDEV("code", {
-        children: [".", sizeClass]
-      }, void 0, true, {
-        fileName: _jsxFileName,
-        lineNumber: 51,
-        columnNumber: 11
-      }, this)
-    }, void 0, false, {
-      fileName: _jsxFileName,
-      lineNumber: 50,
-      columnNumber: 9
-    }, this)]
-  }, void 0, true, {
-    fileName: _jsxFileName,
-    lineNumber: 34,
-    columnNumber: 5
-  }, this);
-}
-
 export default function LayoutFoundations() {
@@ -111,284 +10,5 @@ const [showExample1, setShowExample1] = useState(false);
   const [showExample3, setShowExample3] = useState(false);
-  const scaleUnits = ['0', '0.125rem', '0.25rem', '0.5rem', '0.75rem', '1rem (default unit)', '1.5rem', '2rem', '4rem', '8rem'];
   return _jsxDEV(Library.Page, {
     title: "Layout",
-    children: [_jsxDEV(Library.Pattern, {
-      title: "Spacing Units",
-      children: [_jsxDEV("p", {
-        children: ["Spacing units provide a way to apply predefined, consistent spacing dimensions between (margins) and around (padding) elements. Our spacing is based on a ", _jsxDEV("code", {
-          children: "1rem"
-        }, void 0, false, {
-          fileName: _jsxFileName,
-          lineNumber: 80,
-          columnNumber: 33
-        }, this), " foundational unit."]
-      }, void 0, true, {
-        fileName: _jsxFileName,
-        lineNumber: 77,
-        columnNumber: 9
-      }, this), _jsxDEV("div", {
-        className: "hyp-u-vertical-spacing",
-        children: scaleUnits.map((unitLength, idx) => _jsxDEV("div", {
-          className: `hyp-u-layout-row hyp-u-bg-color--grey-5 hyp-u-horizontal-spacing--${idx}`,
-          children: [_jsxDEV("div", {
-            className: "hyp-u-bg-color--white",
-            style: {
-              paddingRight: '1rem'
-            },
-            children: _jsxDEV("strong", {
-              children: idx
-            }, void 0, false, {
-              fileName: _jsxFileName,
-              lineNumber: 92,
-              columnNumber: 17
-            }, this)
-          }, void 0, false, {
-            fileName: _jsxFileName,
-            lineNumber: 88,
-            columnNumber: 15
-          }, this), _jsxDEV("div", {
-            className: "hyp-u-bg-color--white hyp-u-stretch",
-            style: {
-              paddingLeft: '1rem'
-            },
-            children: _jsxDEV("code", {
-              children: unitLength
-            }, void 0, false, {
-              fileName: _jsxFileName,
-              lineNumber: 98,
-              columnNumber: 17
-            }, this)
-          }, void 0, false, {
-            fileName: _jsxFileName,
-            lineNumber: 94,
-            columnNumber: 15
-          }, this)]
-        }, idx, true, {
-          fileName: _jsxFileName,
-          lineNumber: 84,
-          columnNumber: 13
-        }, this))
-      }, void 0, false, {
-        fileName: _jsxFileName,
-        lineNumber: 82,
-        columnNumber: 9
-      }, this)]
-    }, void 0, true, {
-      fileName: _jsxFileName,
-      lineNumber: 76,
-      columnNumber: 7
-    }, this), _jsxDEV(Library.Pattern, {
-      title: "Horizontal spacing",
-      children: [_jsxDEV("p", {
-        children: "Sometimes you may need to apply or adjust horizontal spacing between an element's immediate children."
-      }, void 0, false, {
-        fileName: _jsxFileName,
-        lineNumber: 106,
-        columnNumber: 9
-      }, this), _jsxDEV("p", {
-        children: ["The default spacing unit used by", ' ', _jsxDEV("code", {
-          children: ".hyp-u-horizontal-spacing"
-        }, void 0, false, {
-          fileName: _jsxFileName,
-          lineNumber: 113,
-          columnNumber: 11
-        }, this), " and mixins is 3, marked with an asterisk below."]
-      }, void 0, true, {
-        fileName: _jsxFileName,
-        lineNumber: 111,
-        columnNumber: 9
-      }, this), _jsxDEV("div", {
-        className: "hyp-u-vertical-spacing",
-        children: _jsxDEV("div", {
-          className: "hyp-u-layout-column hyp-u-vertical-spacing",
-          children: [_jsxDEV(SpacingDemo, {
-            direction: "horizontal",
-            size: 0
-          }, void 0, false, {
-            fileName: _jsxFileName,
-            lineNumber: 119,
-            columnNumber: 13
-          }, this), _jsxDEV(SpacingDemo, {
-            direction: "horizontal",
-            size: 1
-          }, void 0, false, {
-            fileName: _jsxFileName,
-            lineNumber: 120,
-            columnNumber: 13
-          }, this), _jsxDEV(SpacingDemo, {
-            direction: "horizontal",
-            size: 2
-          }, void 0, false, {
-            fileName: _jsxFileName,
-            lineNumber: 121,
-            columnNumber: 13
-          }, this), _jsxDEV(SpacingDemo, {
-            direction: "horizontal",
-            size: 3,
-            defaultSize: true
-          }, void 0, false, {
-            fileName: _jsxFileName,
-            lineNumber: 122,
-            columnNumber: 13
-          }, this), _jsxDEV(SpacingDemo, {
-            direction: "horizontal",
-            size: 4
-          }, void 0, false, {
-            fileName: _jsxFileName,
-            lineNumber: 123,
-            columnNumber: 13
-          }, this), _jsxDEV(SpacingDemo, {
-            direction: "horizontal",
-            size: 5
-          }, void 0, false, {
-            fileName: _jsxFileName,
-            lineNumber: 124,
-            columnNumber: 13
-          }, this), _jsxDEV(SpacingDemo, {
-            direction: "horizontal",
-            size: 6
-          }, void 0, false, {
-            fileName: _jsxFileName,
-            lineNumber: 125,
-            columnNumber: 13
-          }, this), _jsxDEV(SpacingDemo, {
-            direction: "horizontal",
-            size: 7
-          }, void 0, false, {
-            fileName: _jsxFileName,
-            lineNumber: 126,
-            columnNumber: 13
-          }, this), _jsxDEV(SpacingDemo, {
-            direction: "horizontal",
-            size: 8
-          }, void 0, false, {
-            fileName: _jsxFileName,
-            lineNumber: 127,
-            columnNumber: 13
-          }, this), _jsxDEV(SpacingDemo, {
-            direction: "horizontal",
-            size: 9
-          }, void 0, false, {
-            fileName: _jsxFileName,
-            lineNumber: 128,
-            columnNumber: 13
-          }, this)]
-        }, void 0, true, {
-          fileName: _jsxFileName,
-          lineNumber: 118,
-          columnNumber: 11
-        }, this)
-      }, void 0, false, {
-        fileName: _jsxFileName,
-        lineNumber: 117,
-        columnNumber: 9
-      }, this)]
-    }, void 0, true, {
-      fileName: _jsxFileName,
-      lineNumber: 105,
-      columnNumber: 7
-    }, this), _jsxDEV(Library.Pattern, {
-      title: "Vertical spacing",
-      children: [_jsxDEV("p", {
-        children: "Sometimes you may need to apply or adjust vertical spacing between an element's immediate children."
-      }, void 0, false, {
-        fileName: _jsxFileName,
-        lineNumber: 134,
-        columnNumber: 9
-      }, this), _jsxDEV("p", {
-        children: ["The default spacing unit used by ", _jsxDEV("code", {
-          children: ".hyp-u-vertical-spacing"
-        }, void 0, false, {
-          fileName: _jsxFileName,
-          lineNumber: 140,
-          columnNumber: 44
-        }, this), ' ', "and mixins is 5, marked with an asterisk below."]
-      }, void 0, true, {
-        fileName: _jsxFileName,
-        lineNumber: 139,
-        columnNumber: 9
-      }, this), _jsxDEV("div", {
-        className: "hyp-u-layout-row hyp-u-horizontal-spacing--7",
-        children: [_jsxDEV(SpacingDemo, {
-          direction: "vertical",
-          size: 0
-        }, void 0, false, {
-          fileName: _jsxFileName,
-          lineNumber: 144,
-          columnNumber: 11
-        }, this), _jsxDEV(SpacingDemo, {
-          direction: "vertical",
-          size: 1
-        }, void 0, false, {
-          fileName: _jsxFileName,
-          lineNumber: 145,
-          columnNumber: 11
-        }, this), _jsxDEV(SpacingDemo, {
-          direction: "vertical",
-          size: 2
-        }, void 0, false, {
-          fileName: _jsxFileName,
-          lineNumber: 146,
-          columnNumber: 11
-        }, this), _jsxDEV(SpacingDemo, {
-          direction: "vertical",
-          size: 3
-        }, void 0, false, {
-          fileName: _jsxFileName,
-          lineNumber: 147,
-          columnNumber: 11
-        }, this), _jsxDEV(SpacingDemo, {
-          direction: "vertical",
-          size: 4
-        }, void 0, false, {
-          fileName: _jsxFileName,
-          lineNumber: 148,
-          columnNumber: 11
-        }, this), _jsxDEV(SpacingDemo, {
-          direction: "vertical",
-          size: 5,
-          defaultSize: true
-        }, void 0, false, {
-          fileName: _jsxFileName,
-          lineNumber: 149,
-          columnNumber: 11
-        }, this), _jsxDEV(SpacingDemo, {
-          direction: "vertical",
-          size: 6
-        }, void 0, false, {
-          fileName: _jsxFileName,
-          lineNumber: 150,
-          columnNumber: 11
-        }, this), _jsxDEV(SpacingDemo, {
-          direction: "vertical",
-          size: 7
-        }, void 0, false, {
-          fileName: _jsxFileName,
-          lineNumber: 151,
-          columnNumber: 11
-        }, this), _jsxDEV(SpacingDemo, {
-          direction: "vertical",
-          size: 8
-        }, void 0, false, {
-          fileName: _jsxFileName,
-          lineNumber: 152,
-          columnNumber: 11
-        }, this), _jsxDEV(SpacingDemo, {
-          direction: "vertical",
-          size: 9
-        }, void 0, false, {
-          fileName: _jsxFileName,
-          lineNumber: 153,
-          columnNumber: 11
-        }, this)]
-      }, void 0, true, {
-        fileName: _jsxFileName,
-        lineNumber: 143,
-        columnNumber: 9
-      }, this)]
-    }, void 0, true, {
-      fileName: _jsxFileName,
-      lineNumber: 133,
-      columnNumber: 7
-    }, this), _jsxDEV(Library.Pattern, {
+    children: _jsxDEV(Library.Pattern, {
       title: "Positioning and Overlay",
@@ -402,3 +22,3 @@ children: [_jsxDEV(Library.Example, {
             fileName: _jsxFileName,
-            lineNumber: 160,
+            lineNumber: 16,
             columnNumber: 17
@@ -408,3 +28,3 @@ }, this), " layout pattern centers an element both horizontally and vertically within the entire viewport."]
           fileName: _jsxFileName,
-          lineNumber: 159,
+          lineNumber: 15,
           columnNumber: 11
@@ -419,3 +39,3 @@ }, this), _jsxDEV(Library.Demo, {
               fileName: _jsxFileName,
-              lineNumber: 165,
+              lineNumber: 21,
               columnNumber: 15
@@ -425,4 +45,4 @@ }, this), _jsxDEV("div", {
               style: `width:450px;${showExample1 ? 'visibility:visible' : 'visibility:hidden'}`,
-              children: _jsxDEV("div", {
-                className: "hyp-card",
+              children: _jsxDEV(Card, {
+                classes: "w-[450px]",
                 children: [_jsxDEV("p", {
@@ -432,6 +52,5 @@ children: "This is a card that is centered vertically and horizontally in the current viewport."
                   fileName: _jsxFileName,
-                  lineNumber: 178,
+                  lineNumber: 34,
                   columnNumber: 19
-                }, this), _jsxDEV("div", {
-                  className: "hyp-actions",
+                }, this), _jsxDEV(Actions, {
                   children: _jsxDEV(LabeledButton, {
@@ -443,3 +62,3 @@ variant: "primary",
                     fileName: _jsxFileName,
-                    lineNumber: 183,
+                    lineNumber: 39,
                     columnNumber: 21
@@ -449,3 +68,3 @@ }, this)
                   fileName: _jsxFileName,
-                  lineNumber: 182,
+                  lineNumber: 38,
                   columnNumber: 19
@@ -455,3 +74,3 @@ }, this)]
                 fileName: _jsxFileName,
-                lineNumber: 177,
+                lineNumber: 33,
                 columnNumber: 17
@@ -461,3 +80,3 @@ }, this)
               fileName: _jsxFileName,
-              lineNumber: 171,
+              lineNumber: 27,
               columnNumber: 15
@@ -467,3 +86,3 @@ }, this)]
             fileName: _jsxFileName,
-            lineNumber: 164,
+            lineNumber: 20,
             columnNumber: 13
@@ -473,3 +92,3 @@ }, this)
           fileName: _jsxFileName,
-          lineNumber: 163,
+          lineNumber: 19,
           columnNumber: 11
@@ -479,3 +98,3 @@ }, this)]
         fileName: _jsxFileName,
-        lineNumber: 158,
+        lineNumber: 14,
         columnNumber: 9
@@ -489,3 +108,3 @@ }, this), _jsxDEV(Library.Example, {
             fileName: _jsxFileName,
-            lineNumber: 198,
+            lineNumber: 54,
             columnNumber: 17
@@ -495,3 +114,3 @@ }, this), " layout pattern provides a full-viewport, semi-opaque overlay that obscures UI interactions in the viewport below. It is intended for use as a backdrop for modals, e.g."]
           fileName: _jsxFileName,
-          lineNumber: 197,
+          lineNumber: 53,
           columnNumber: 11
@@ -506,3 +125,3 @@ }, this), _jsxDEV(Library.Demo, {
               fileName: _jsxFileName,
-              lineNumber: 204,
+              lineNumber: 60,
               columnNumber: 15
@@ -519,3 +138,3 @@ }, this), _jsxDEV("div", {
                   fileName: _jsxFileName,
-                  lineNumber: 217,
+                  lineNumber: 73,
                   columnNumber: 19
@@ -525,3 +144,3 @@ }, this)
                 fileName: _jsxFileName,
-                lineNumber: 216,
+                lineNumber: 72,
                 columnNumber: 17
@@ -531,3 +150,3 @@ }, this)
               fileName: _jsxFileName,
-              lineNumber: 210,
+              lineNumber: 66,
               columnNumber: 15
@@ -537,3 +156,3 @@ }, this)]
             fileName: _jsxFileName,
-            lineNumber: 203,
+            lineNumber: 59,
             columnNumber: 13
@@ -543,3 +162,3 @@ }, this)
           fileName: _jsxFileName,
-          lineNumber: 202,
+          lineNumber: 58,
           columnNumber: 11
@@ -549,3 +168,3 @@ }, this)]
         fileName: _jsxFileName,
-        lineNumber: 196,
+        lineNumber: 52,
         columnNumber: 9
@@ -559,3 +178,3 @@ }, this), _jsxDEV(Library.Example, {
             fileName: _jsxFileName,
-            lineNumber: 228,
+            lineNumber: 84,
             columnNumber: 52
@@ -566,3 +185,3 @@ }, this), " and", ' ', _jsxDEV("code", {
             fileName: _jsxFileName,
-            lineNumber: 229,
+            lineNumber: 85,
             columnNumber: 13
@@ -572,3 +191,3 @@ }, this), " patterns."]
           fileName: _jsxFileName,
-          lineNumber: 227,
+          lineNumber: 83,
           columnNumber: 11
@@ -583,3 +202,3 @@ }, this), _jsxDEV(Library.Demo, {
               fileName: _jsxFileName,
-              lineNumber: 233,
+              lineNumber: 89,
               columnNumber: 15
@@ -591,5 +210,4 @@ }, this), _jsxDEV("div", {
                 className: "hyp-u-fixed-centered",
-                children: _jsxDEV("div", {
-                  className: "hyp-card",
-                  style: "width:450px",
+                children: _jsxDEV(Card, {
+                  classes: "w-[450px]",
                   children: [_jsxDEV("div", {
@@ -599,6 +217,5 @@ children: "This is content in a fixed-centered card of 450px width over a full-screen overlay."
                     fileName: _jsxFileName,
-                    lineNumber: 247,
+                    lineNumber: 103,
                     columnNumber: 21
-                  }, this), _jsxDEV("div", {
-                    className: "hyp-actions",
+                  }, this), _jsxDEV(Actions, {
                     children: _jsxDEV(LabeledButton, {
@@ -610,3 +227,3 @@ variant: "primary",
                       fileName: _jsxFileName,
-                      lineNumber: 252,
+                      lineNumber: 108,
                       columnNumber: 23
@@ -616,3 +233,3 @@ }, this)
                     fileName: _jsxFileName,
-                    lineNumber: 251,
+                    lineNumber: 107,
                     columnNumber: 21
@@ -622,3 +239,3 @@ }, this)]
                   fileName: _jsxFileName,
-                  lineNumber: 246,
+                  lineNumber: 102,
                   columnNumber: 19
@@ -628,3 +245,3 @@ }, this)
                 fileName: _jsxFileName,
-                lineNumber: 245,
+                lineNumber: 101,
                 columnNumber: 17
@@ -634,3 +251,3 @@ }, this)
               fileName: _jsxFileName,
-              lineNumber: 239,
+              lineNumber: 95,
               columnNumber: 15
@@ -640,3 +257,3 @@ }, this)]
             fileName: _jsxFileName,
-            lineNumber: 232,
+            lineNumber: 88,
             columnNumber: 13
@@ -646,3 +263,3 @@ }, this)
           fileName: _jsxFileName,
-          lineNumber: 231,
+          lineNumber: 87,
           columnNumber: 11
@@ -652,3 +269,3 @@ }, this)]
         fileName: _jsxFileName,
-        lineNumber: 226,
+        lineNumber: 82,
         columnNumber: 9
@@ -658,8 +275,8 @@ }, this)]
       fileName: _jsxFileName,
-      lineNumber: 157,
+      lineNumber: 13,
       columnNumber: 7
-    }, this)]
-  }, void 0, true, {
+    }, this)
+  }, void 0, false, {
     fileName: _jsxFileName,
-    lineNumber: 75,
+    lineNumber: 12,
     columnNumber: 5
@@ -666,0 +283,0 @@ }, this);

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

@@ -9,5 +9,5 @@ var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/SpinnerComponents.js";
   const [fullScreenSpinnerVisible, setFullScreenSpinnerVisible] = useState(false);
-  const fullScreenSpinnerContainerRef = useRef(
-  /** @type {HTMLDivElement | null} */
-  null);
+  const fullScreenSpinnerContainerRef =
+  /** @type {{ current: HTMLDivElement }} */
+  useRef();
   useElementShouldClose(fullScreenSpinnerContainerRef, true
@@ -25,3 +25,3 @@ /* isOpen */
         fileName: _jsxFileName,
-        lineNumber: 26,
+        lineNumber: 24,
         columnNumber: 13
@@ -32,3 +32,3 @@ }, this), " component is based on the ", _jsxDEV("code", {
         fileName: _jsxFileName,
-        lineNumber: 26,
+        lineNumber: 24,
         columnNumber: 60
@@ -38,3 +38,3 @@ }, this), ' ', "pattern and renders an animated SVG."]
       fileName: _jsxFileName,
-      lineNumber: 25,
+      lineNumber: 23,
       columnNumber: 7
@@ -49,3 +49,3 @@ }, this), _jsxDEV(Library.Pattern, {
             fileName: _jsxFileName,
-            lineNumber: 32,
+            lineNumber: 30,
             columnNumber: 13
@@ -55,3 +55,3 @@ }, this)
           fileName: _jsxFileName,
-          lineNumber: 31,
+          lineNumber: 29,
           columnNumber: 11
@@ -61,3 +61,3 @@ }, this)
         fileName: _jsxFileName,
-        lineNumber: 30,
+        lineNumber: 28,
         columnNumber: 9
@@ -72,3 +72,3 @@ }, this), _jsxDEV(Library.Example, {
             fileName: _jsxFileName,
-            lineNumber: 37,
+            lineNumber: 35,
             columnNumber: 13
@@ -78,3 +78,3 @@ }, this)
           fileName: _jsxFileName,
-          lineNumber: 36,
+          lineNumber: 34,
           columnNumber: 11
@@ -84,3 +84,3 @@ }, this)
         fileName: _jsxFileName,
-        lineNumber: 35,
+        lineNumber: 33,
         columnNumber: 9
@@ -95,3 +95,3 @@ }, this), _jsxDEV(Library.Example, {
             fileName: _jsxFileName,
-            lineNumber: 42,
+            lineNumber: 40,
             columnNumber: 13
@@ -101,3 +101,3 @@ }, this)
           fileName: _jsxFileName,
-          lineNumber: 41,
+          lineNumber: 39,
           columnNumber: 11
@@ -107,3 +107,3 @@ }, this)
         fileName: _jsxFileName,
-        lineNumber: 40,
+        lineNumber: 38,
         columnNumber: 9
@@ -113,3 +113,3 @@ }, this)]
       fileName: _jsxFileName,
-      lineNumber: 29,
+      lineNumber: 27,
       columnNumber: 7
@@ -124,3 +124,3 @@ }, this), _jsxDEV(Library.Pattern, {
             fileName: _jsxFileName,
-            lineNumber: 51,
+            lineNumber: 49,
             columnNumber: 19
@@ -130,3 +130,3 @@ }, this), " to hide the spinner."]
           fileName: _jsxFileName,
-          lineNumber: 49,
+          lineNumber: 47,
           columnNumber: 11
@@ -139,3 +139,3 @@ }, this), _jsxDEV(Library.Demo, {
             fileName: _jsxFileName,
-            lineNumber: 54,
+            lineNumber: 52,
             columnNumber: 13
@@ -146,3 +146,3 @@ }, this), fullScreenSpinnerVisible && _jsxDEV("div", {
               fileName: _jsxFileName,
-              lineNumber: 59,
+              lineNumber: 57,
               columnNumber: 17
@@ -152,3 +152,3 @@ }, this)
             fileName: _jsxFileName,
-            lineNumber: 58,
+            lineNumber: 56,
             columnNumber: 15
@@ -158,3 +158,3 @@ }, this)]
           fileName: _jsxFileName,
-          lineNumber: 53,
+          lineNumber: 51,
           columnNumber: 11
@@ -164,3 +164,3 @@ }, this)]
         fileName: _jsxFileName,
-        lineNumber: 48,
+        lineNumber: 46,
         columnNumber: 9
@@ -170,3 +170,3 @@ }, this)
       fileName: _jsxFileName,
-      lineNumber: 47,
+      lineNumber: 45,
       columnNumber: 7
@@ -176,3 +176,3 @@ }, this)]
     fileName: _jsxFileName,
-    lineNumber: 24,
+    lineNumber: 22,
     columnNumber: 5
@@ -179,0 +179,0 @@ }, this);

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

@@ -9,5 +9,5 @@ var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/SpinnerPatterns.js";
   const [fullScreenSpinnerVisible, setFullScreenSpinnerVisible] = useState(false);
-  const fullScreenSpinnerContainerRef = useRef(
-  /** @type {HTMLDivElement | null} */
-  null);
+  const fullScreenSpinnerContainerRef =
+  /** @type {{ current: HTMLDivElement }} */
+  useRef();
   useElementShouldClose(fullScreenSpinnerContainerRef, true
@@ -25,3 +25,3 @@ /* isOpen */
         fileName: _jsxFileName,
-        lineNumber: 27,
+        lineNumber: 25,
         columnNumber: 13
@@ -31,3 +31,3 @@ }, this), " pattern can be used to show loading states. It is an animated SVG."]
       fileName: _jsxFileName,
-      lineNumber: 26,
+      lineNumber: 24,
       columnNumber: 7
@@ -41,3 +41,3 @@ }, this), _jsxDEV(Library.Pattern, {
           fileName: _jsxFileName,
-          lineNumber: 32,
+          lineNumber: 30,
           columnNumber: 26
@@ -48,3 +48,3 @@ }, this), "; it renders at ", _jsxDEV("code", {
           fileName: _jsxFileName,
-          lineNumber: 32,
+          lineNumber: 30,
           columnNumber: 63
@@ -54,3 +54,3 @@ }, this), ' ', "square, by default. Other relative sizes are available as shown. For manual sizing control, adjust the font-size of a parent element. Spinners have a default foreground color, which may be overridden with utility classes."]
         fileName: _jsxFileName,
-        lineNumber: 31,
+        lineNumber: 29,
         columnNumber: 9
@@ -64,3 +64,3 @@ }, this), _jsxDEV(Library.Example, {
             fileName: _jsxFileName,
-            lineNumber: 40,
+            lineNumber: 38,
             columnNumber: 49
@@ -70,3 +70,3 @@ }, this), " square."]
           fileName: _jsxFileName,
-          lineNumber: 39,
+          lineNumber: 37,
           columnNumber: 11
@@ -80,3 +80,3 @@ }, this), _jsxDEV(Library.Demo, {
             fileName: _jsxFileName,
-            lineNumber: 43,
+            lineNumber: 41,
             columnNumber: 13
@@ -86,3 +86,3 @@ }, this)
           fileName: _jsxFileName,
-          lineNumber: 42,
+          lineNumber: 40,
           columnNumber: 11
@@ -92,3 +92,3 @@ }, this)]
         fileName: _jsxFileName,
-        lineNumber: 38,
+        lineNumber: 36,
         columnNumber: 9
@@ -102,3 +102,3 @@ }, this), _jsxDEV(Library.Example, {
             fileName: _jsxFileName,
-            lineNumber: 48,
+            lineNumber: 46,
             columnNumber: 32
@@ -108,3 +108,3 @@ }, this), " square and can be used inline."]
           fileName: _jsxFileName,
-          lineNumber: 47,
+          lineNumber: 45,
           columnNumber: 11
@@ -118,3 +118,3 @@ }, this), _jsxDEV(Library.Demo, {
             fileName: _jsxFileName,
-            lineNumber: 51,
+            lineNumber: 49,
             columnNumber: 13
@@ -124,3 +124,3 @@ }, this)
           fileName: _jsxFileName,
-          lineNumber: 50,
+          lineNumber: 48,
           columnNumber: 11
@@ -130,3 +130,3 @@ }, this)]
         fileName: _jsxFileName,
-        lineNumber: 46,
+        lineNumber: 44,
         columnNumber: 9
@@ -140,3 +140,3 @@ }, this), _jsxDEV(Library.Example, {
             fileName: _jsxFileName,
-            lineNumber: 56,
+            lineNumber: 54,
             columnNumber: 32
@@ -146,3 +146,3 @@ }, this), " square."]
           fileName: _jsxFileName,
-          lineNumber: 55,
+          lineNumber: 53,
           columnNumber: 11
@@ -156,3 +156,3 @@ }, this), _jsxDEV(Library.Demo, {
             fileName: _jsxFileName,
-            lineNumber: 59,
+            lineNumber: 57,
             columnNumber: 13
@@ -162,3 +162,3 @@ }, this)
           fileName: _jsxFileName,
-          lineNumber: 58,
+          lineNumber: 56,
           columnNumber: 11
@@ -168,3 +168,3 @@ }, this)]
         fileName: _jsxFileName,
-        lineNumber: 54,
+        lineNumber: 52,
         columnNumber: 9
@@ -177,3 +177,3 @@ }, this), _jsxDEV(Library.Example, {
           fileName: _jsxFileName,
-          lineNumber: 64,
+          lineNumber: 62,
           columnNumber: 11
@@ -187,3 +187,3 @@ }, this), _jsxDEV(Library.Demo, {
             fileName: _jsxFileName,
-            lineNumber: 68,
+            lineNumber: 66,
             columnNumber: 13
@@ -193,3 +193,3 @@ }, this)
           fileName: _jsxFileName,
-          lineNumber: 67,
+          lineNumber: 65,
           columnNumber: 11
@@ -199,3 +199,3 @@ }, this)]
         fileName: _jsxFileName,
-        lineNumber: 63,
+        lineNumber: 61,
         columnNumber: 9
@@ -205,3 +205,3 @@ }, this)]
       fileName: _jsxFileName,
-      lineNumber: 30,
+      lineNumber: 28,
       columnNumber: 7
@@ -216,3 +216,3 @@ }, this), _jsxDEV(Library.Pattern, {
             fileName: _jsxFileName,
-            lineNumber: 80,
+            lineNumber: 78,
             columnNumber: 28
@@ -222,3 +222,3 @@ }, this), " to hide the spinner."]
           fileName: _jsxFileName,
-          lineNumber: 78,
+          lineNumber: 76,
           columnNumber: 11
@@ -231,3 +231,3 @@ }, this), _jsxDEV(Library.Demo, {
             fileName: _jsxFileName,
-            lineNumber: 83,
+            lineNumber: 81,
             columnNumber: 13
@@ -242,3 +242,3 @@ }, this), fullScreenSpinnerVisible && _jsxDEV("div", {
               fileName: _jsxFileName,
-              lineNumber: 91,
+              lineNumber: 89,
               columnNumber: 17
@@ -248,3 +248,3 @@ }, this)
             fileName: _jsxFileName,
-            lineNumber: 87,
+            lineNumber: 85,
             columnNumber: 15
@@ -254,3 +254,3 @@ }, this)]
           fileName: _jsxFileName,
-          lineNumber: 82,
+          lineNumber: 80,
           columnNumber: 11
@@ -260,3 +260,3 @@ }, this)]
         fileName: _jsxFileName,
-        lineNumber: 77,
+        lineNumber: 75,
         columnNumber: 9
@@ -266,3 +266,3 @@ }, this)
       fileName: _jsxFileName,
-      lineNumber: 76,
+      lineNumber: 74,
       columnNumber: 7
@@ -272,3 +272,3 @@ }, this)]
     fileName: _jsxFileName,
-    lineNumber: 25,
+    lineNumber: 23,
     columnNumber: 5
@@ -275,0 +275,0 @@ }, this);

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

@@ -27,3 +27,3 @@ var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/TableComponents.js";
   children: [_jsxDEV("td", {
-    className: "hyp-u-color--grey-6",
+    className: "text-grey-6",
     children: file.displayName
@@ -70,3 +70,3 @@ }, void 0, false, {
       children: [_jsxDEV("div", {
-        className: "hyp-u-padding--5",
+        className: "p-5",
         children: _jsxDEV(LabeledButton, {
@@ -151,3 +151,3 @@ onClick: () => setIsLoading(!isLoading),
       children: [_jsxDEV("div", {
-        className: "hyp-u-padding--5",
+        className: "p-5",
         children: _jsxDEV(LabeledButton, {
@@ -166,3 +166,3 @@ onClick: () => setIsLoading(!isLoading),
       }, this), _jsxDEV("div", {
-        className: "hyp-u-layout-column hyp-u-padding--3",
+        className: "flex flex-col p-3",
         style: "max-height:300px;height:300px;",
@@ -240,3 +240,3 @@ children: _jsxDEV(Table, {
       children: [_jsxDEV("div", {
-        className: "hyp-u-padding--5",
+        className: "p-5",
         children: _jsxDEV(LabeledButton, {
@@ -243,0 +243,0 @@ onClick: () => setIsLoading(!isLoading),

lib/pattern-library/components/PlaygroundApp.d.ts

@@ -18,12 +18,3 @@ /**
 export default function PlaygroundApp({ baseURL, extraRoutes, }: PlaygroundAppProps): import("preact").JSX.Element;
-export type PlaygroundRoute = {
-    /**
-     * - Pattern or string path relative to
-     * `baseURL`, e.g. '/my-patterns'
-     */
-    route: string | RegExp;
-    title: string;
-    component: import("preact").FunctionComponent<{}>;
-    group: import("../routes").PlaygroundRouteGroup;
-};
+export type PlaygroundRoute = import("../routes").PlaygroundRoute;
 export type PlaygroundAppProps = {
@@ -30,0 +21,0 @@ baseURL?: string | undefined;

lib/pattern-library/components/PlaygroundApp.js

@@ -72,7 +72,7 @@ var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/PlaygroundApp.js";
   return _jsxDEV("main", {
-    className: "PlaygroundApp",
+    className: "grid grid-cols-[20rem_1fr] w-screen h-screen",
     children: [_jsxDEV("div", {
-      className: "PlaygroundApp__sidebar",
+      className: "bg-grey-2",
       children: [_jsxDEV("div", {
-        className: "PlaygroundApp__sidebar-home",
+        className: "p-4 text-center",
         children: _jsxDEV(Link, {
@@ -99,3 +99,3 @@ href: baseURL,
         children: [_jsxDEV("h2", {
-          className: "Library__heading2",
+          className: "p-2",
           children: rGroup.title
@@ -107,3 +107,2 @@ }, void 0, false, {
         }, this), _jsxDEV("ul", {
-          className: "PlaygroundApp__nav",
           children: rGroup.routes.map(({
@@ -114,4 +113,4 @@ route,
             children: _jsxDEV(Link, {
-              classes: classnames('hyp-link PlaygroundApp__nav-item', {
-                'is-active': (activeRoute === null || activeRoute === void 0 ? void 0 : activeRoute.route) === route
+              classes: classnames('w-full border-x-6 border-grey-2 py-3 pl-6 hover:bg-grey-3', {
+                'bg-grey-3': (activeRoute === null || activeRoute === void 0 ? void 0 : activeRoute.route) === route
               }),
@@ -146,7 +145,6 @@ href: `${route}`,
     }, this), _jsxDEV("div", {
-      className: "PlaygroundApp__content",
       children: content
     }, void 0, false, {
       fileName: _jsxFileName,
-      lineNumber: 81,
+      lineNumber: 84,
       columnNumber: 7
@@ -153,0 +151,0 @@ }, this)]

lib/pattern-library/index.d.ts

@@ -19,12 +19,3 @@ /**
 export function startApp({ baseURL, extraRoutes, icons }?: PatternLibraryAppOptions): void;
-export type PlaygroundRoute = {
-    /**
-     * - Pattern or string path relative to
-     * `baseURL`, e.g. '/my-patterns'
-     */
-    route: string | RegExp;
-    title: string;
-    component: import("preact").FunctionComponent<{}>;
-    group: import("./routes").PlaygroundRouteGroup;
-};
+export type PlaygroundRoute = import("./components/PlaygroundApp").PlaygroundRoute;
 export type PatternLibraryAppOptions = {
@@ -31,0 +22,0 @@ /**

lib/pattern-library/routes.d.ts

@@ -7,4 +7,4 @@ /**
  */
-export function getRoutes(group?: "home" | "foundations" | "patterns" | "components" | undefined): PlaygroundRoute[];
-export type PlaygroundRouteGroup = "home" | "foundations" | "patterns" | "components";
+export function getRoutes(group?: PlaygroundRouteGroup | undefined): PlaygroundRoute[];
+export type PlaygroundRouteGroup = 'home' | 'foundations' | 'patterns' | 'components';
 /**
@@ -11,0 +11,0 @@ * - Route "handler" that provides a component (function)

lib/tailwind.preset.d.ts

 declare namespace _default {
     namespace theme {
-        const colors: {
-            transparent: string;
-            current: string;
-            white: any;
-            black: any;
-            'grey-0': string;
-            'grey-1': string;
-            'grey-2': string;
-            'grey-3': string;
-            'grey-4': string;
-            'grey-5': string;
-            'grey-6': string;
-            'grey-7': string;
-            'grey-8': string;
-            'grey-9': string;
-            brand: {
-                dark: string;
-                DEFAULT: string;
+        namespace extend {
+            namespace borderColor {
+                const DEFAULT: string;
+            }
+            const colors: {
+                transparent: string;
+                current: string;
+                white: any;
+                black: any;
+                'grey-0': string;
+                'grey-1': string;
+                'grey-2': string;
+                'grey-3': string;
+                'grey-4': string;
+                'grey-5': string;
+                'grey-6': string;
+                'grey-7': string;
+                'grey-8': string;
+                'grey-9': string;
+                green: {
+                    success: string;
+                };
+                yellow: {
+                    notice: string;
+                };
+                red: {
+                    error: string;
+                };
+                brand: {
+                    dark: string;
+                    DEFAULT: string;
+                };
+                'color-text': {
+                    DEFAULT: string;
+                    light: string;
+                };
             };
-            success: string;
-            notice: string;
-            error: string;
-        };
+            const spacing: {
+                'touch-minimum': string;
+            };
+        }
     }
+    const plugins: any[];
 }
 export default _default;

lib/tailwind.preset.js

@@ -0,29 +1,60 @@
+import plugin from 'tailwindcss/plugin.js';
 import colors from 'tailwindcss/colors.js';
 export default {
   theme: {
-    colors: {
-      transparent: 'transparent',
-      current: 'currentColor',
-      white: colors.white,
-      black: colors.black,
-      'grey-0': '#fafafa',
-      'grey-1': '#f2f2f2',
-      'grey-2': '#ececec',
-      'grey-3': '#dbdbdb',
-      'grey-4': '#a6a6a6',
-      'grey-5': '#9c9c9c',
-      'grey-6': '#737373',
-      'grey-7': '#595959',
-      'grey-8': '#3f3f3f',
-      'grey-9': '#202020',
-      brand: {
-        dark: '#84141e',
-        DEFAULT: '#bd1c2b'
+    extend: {
+      borderColor: {
+        DEFAULT: '#dbdbdb'
       },
-      success: '#00a36d',
-      notice: '#fbc168',
-      error: '#d93c3f'
+      colors: {
+        transparent: 'transparent',
+        current: 'currentColor',
+        white: colors.white,
+        black: colors.black,
+        'grey-0': '#fafafa',
+        'grey-1': '#f2f2f2',
+        'grey-2': '#ececec',
+        'grey-3': '#dbdbdb',
+        'grey-4': '#a6a6a6',
+        'grey-5': '#9c9c9c',
+        'grey-6': '#737373',
+        'grey-7': '#595959',
+        'grey-8': '#3f3f3f',
+        'grey-9': '#202020',
+        green: {
+          success: '#00a36d'
+        },
+        yellow: {
+          notice: '#fbc168'
+        },
+        red: {
+          error: '#d93c3f'
+        },
+        brand: {
+          dark: '#84141e',
+          DEFAULT: '#bd1c2b'
+        },
+        // This naming makes color-related classnames generated from this
+        // token less ambiguous. e.g. `bg-color-text` instead of `bg-text`
+        'color-text': {
+          DEFAULT: '#202020',
+          light: '#737373'
+        }
+      },
+      spacing: {
+        'touch-minimum': '44px' // Equivalent to spacing 11; minimum touch-target size
+
+      }
     }
-  }
+  },
+  plugins: [plugin(({
+    addVariant
+  }) => {
+    // Add a custom variant such that the `theme-clean:` modifier is available
+    // for all tailwind utility classes. e.g. `.theme-clean:bg-white` would
+    // only apply (set the element's background color to white) if a parent
+    // element had the `.theme-clean` class.
+    addVariant('theme-clean', '.theme-clean &');
+  })]
 };
 //# sourceMappingURL=tailwind.preset.js.map

lib/util/typing.d.ts

@@ -18,3 +18,3 @@ /**
  */
-export function downcastRef<T, U extends T>(ref: import("preact").RefObject<T> | import("preact").RefCallback<T> | undefined): import("preact").RefObject<U> | import("preact").RefCallback<U> | undefined;
-export type Ref<T> = import("preact").RefObject<T> | import("preact").RefCallback<T>;
+export function downcastRef<T, U extends T>(ref: import("preact").Ref<T> | undefined): import("preact").Ref<U> | undefined;
+export type Ref<T> = import('preact').Ref<T>;

package.json

 {
   "name": "@hypothesis/frontend-shared",
-  "version": "4.4.0",
+  "version": "4.5.0",
   "description": "Shared components, styles and utilities for Hypothesis projects",
@@ -21,3 +21,3 @@ "license": "BSD-2-Clause",
     "babel-plugin-istanbul": "^6.0.0",
-    "babel-plugin-mockable-imports": "^1.7.1",
+    "babel-plugin-mockable-imports": "^2.0.0",
     "chai": "^4.1.2",
@@ -27,10 +27,10 @@ "classnames": "^2.2.6",
     "enzyme-adapter-preact-pure": "^3.0.0",
-    "eslint": "^7.3.1",
+    "eslint": "^8.7.0",
     "eslint-config-hypothesis": "^2.5.0",
     "eslint-plugin-jsx-a11y": "^6.2.3",
-    "eslint-plugin-mocha": "^8.0.0",
+    "eslint-plugin-mocha": "^10.0.3",
     "eslint-plugin-react": "^7.12.4",
     "eslint-plugin-react-hooks": "^4.0.4",
     "express": "^4.17.1",
-    "fancy-log": "^1.3.3",
+    "fancy-log": "^2.0.0",
     "gulp": "^4.0.0",
@@ -45,14 +45,14 @@ "karma": "^6.3.4",
     "karma-source-map-support": "^1.4.0",
-    "mocha": "8.2.1",
+    "mocha": "9.2.0",
     "mustache": "^4.2.0",
     "mustache-express": "^1.3.0",
     "postcss": "^8.3.9",
-    "preact": "^10.4.0",
+    "preact": "^10.5.6",
     "prettier": "^2.2.1",
-    "puppeteer": "^7.1.0",
+    "puppeteer": "^13.0.1",
     "rollup": "^2.58.0",
     "rollup-plugin-string": "^3.0.0",
     "sass": "^1.43.2",
-    "sinon": "^9.0.0",
-    "tailwindcss": "^2.2.19",
+    "sinon": "^13.0.0",
+    "tailwindcss": "^3.0.11",
     "typescript": "^4.1.5",
@@ -59,0 +59,0 @@ "yalc": "^1.0.0-pre.50"

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

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

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

Number of package files

293

increased by0.34%

Worsened metrics

Total package byte prevSize

817252

decreased by-7.84%

Lines of code

10375

decreased by-5.38%

Number of low supply chain risk alerts

3

increased by50%

No dependency changes