@boulevard/blvd-ui - npm Package Compare versions

Comparing version 1.0.0-beta.21 to 1.0.0-beta.48

Animated/Animated.d.ts

@@ -14,2 +14,3 @@ import React from "react";
         delay?: number;
+        initial?: boolean;
     };
@@ -19,3 +20,3 @@ }
     as?: T | undefined;
-} & Pick<React.ComponentPropsWithRef<T>, Exclude<keyof React.ComponentPropsWithRef<T>, "as">>) => JSX.Element;
+} & import("../utils/distributive-omit").DistributiveOmit<React.ComponentPropsWithRef<T>, "as">) => JSX.Element;
 export {};

Button/Button.d.ts

 import React from "react";
+import { ClassMapperProps } from "../utils";
 declare const classMap: {
@@ -34,24 +35,50 @@ theme: {
 };
+export declare const buttonThemes: ClassMapperProps<typeof classMap>["theme"][];
+export declare const buttonSizes: ClassMapperProps<typeof classMap>["size"][];
+export declare const buttonPaddings: ClassMapperProps<typeof classMap>["padding"][];
+export declare const buttonContentAlignments: ClassMapperProps<typeof classMap>["contentAlignment"][];
 export declare namespace Button {
-    type Props = {
+    type CommonProps = {
         block?: boolean;
         circle?: boolean;
         className?: string;
-        contentAlignment?: keyof typeof classMap.contentAlignment;
         disabled?: boolean;
-        icon?: React.ElementType;
-        iconAffix?: keyof typeof classMap.iconAffix;
-        iconStrokeWidth?: "thin" | "thick";
         dropdown?: boolean;
         onClick?: (event: React.MouseEvent) => void;
-        padding?: keyof typeof classMap.padding;
         shimmer?: boolean;
-        size?: keyof typeof classMap.size;
-        theme?: keyof typeof classMap.theme;
         type?: "button" | "submit" | "reset";
-    };
+    } & Partial<Omit<ClassMapperProps<typeof classMap>, "iconAffix">>;
+    type IconProps = {
+        icon: React.ElementType;
+        iconStrokeWidth?: "thin" | "thick";
+    } & Partial<Pick<ClassMapperProps<typeof classMap>, "iconAffix">>;
+    export type Props = CommonProps & (IconProps | {});
+    export {};
 }
-export declare const Button: <T extends React.ElementType<any> = "button">(props: Button.Props & {
+export declare const Button: <T extends React.ElementType<any> = "button">(props: ({
+    block?: boolean | undefined;
+    circle?: boolean | undefined;
+    className?: string | undefined;
+    disabled?: boolean | undefined;
+    dropdown?: boolean | undefined;
+    onClick?: ((event: React.MouseEvent<Element, MouseEvent>) => void) | undefined;
+    shimmer?: boolean | undefined;
+    type?: "button" | "submit" | "reset" | undefined;
+} & Partial<Pick<Record<"theme", "primary" | "secondary" | "tertiary" | "tertiary-on-gray" | "white" | "danger" | "primary-transparent" | "secondary-transparent" | "tertiary-transparent" | "danger-transparent"> & Record<"size", "small" | "medium" | "large"> & Record<"padding", "none" | "condensed" | "standard"> & Record<"contentAlignment", "center" | "space-between"> & Record<"iconAffix", "prefix" | "suffix">, "theme" | "size" | "padding" | "contentAlignment">> & {
     as?: T | undefined;
-} & Pick<React.ComponentPropsWithRef<T>, Exclude<keyof React.ComponentPropsWithRef<T>, "as">>) => JSX.Element;
+} & import("../utils/distributive-omit").DistributiveOmit<React.ComponentPropsWithRef<T>, "as">) | ({
+    block?: boolean | undefined;
+    circle?: boolean | undefined;
+    className?: string | undefined;
+    disabled?: boolean | undefined;
+    dropdown?: boolean | undefined;
+    onClick?: ((event: React.MouseEvent<Element, MouseEvent>) => void) | undefined;
+    shimmer?: boolean | undefined;
+    type?: "button" | "submit" | "reset" | undefined;
+} & Partial<Pick<Record<"theme", "primary" | "secondary" | "tertiary" | "tertiary-on-gray" | "white" | "danger" | "primary-transparent" | "secondary-transparent" | "tertiary-transparent" | "danger-transparent"> & Record<"size", "small" | "medium" | "large"> & Record<"padding", "none" | "condensed" | "standard"> & Record<"contentAlignment", "center" | "space-between"> & Record<"iconAffix", "prefix" | "suffix">, "theme" | "size" | "padding" | "contentAlignment">> & {
+    icon: React.ElementType<any>;
+    iconStrokeWidth?: "thin" | "thick" | undefined;
+} & Partial<Pick<Record<"theme", "primary" | "secondary" | "tertiary" | "tertiary-on-gray" | "white" | "danger" | "primary-transparent" | "secondary-transparent" | "tertiary-transparent" | "danger-transparent"> & Record<"size", "small" | "medium" | "large"> & Record<"padding", "none" | "condensed" | "standard"> & Record<"contentAlignment", "center" | "space-between"> & Record<"iconAffix", "prefix" | "suffix">, "iconAffix">> & {
+    as?: T | undefined;
+} & import("../utils/distributive-omit").DistributiveOmit<React.ComponentPropsWithRef<T>, "as">)) => JSX.Element;
 export {};

Card/Card.d.ts

 import React from "react";
+import { ClassMapperProps } from "../utils";
 declare const classMap: {
+    border: {
+        0: string;
+        1: string;
+    };
     cornerRadius: {
         0: string;
         1: string;
+        2: string;
     };
@@ -32,11 +38,13 @@ elevation: {
 export declare namespace Card {
-    type Props = React.HTMLProps<HTMLDivElement> & {
-        border?: 0 | 1;
-        cornerRadius?: keyof typeof classMap.cornerRadius;
-        elevation?: keyof typeof classMap.elevation;
+    type BaseProps = React.HTMLProps<HTMLDivElement> & {
         padding?: keyof typeof classMap.padding;
-        surface?: keyof typeof classMap.surface;
     };
+    type ThemeProps = {
+        theme: "interactive" | "selected";
+    };
+    type CustomProps = Partial<ClassMapperProps<typeof classMap>>;
+    export type Props = BaseProps & (ThemeProps | CustomProps);
+    export {};
 }
-export declare const Card: ({ border, className, cornerRadius, elevation, padding, surface, ...props }: Card.Props) => JSX.Element;
+export declare const Card: React.FC<Card.Props>;
 export {};

Chip/Chip.d.ts

@@ -25,23 +25,62 @@ import React from "react";
 export declare namespace Chip {
-    type Props = {
+    type MicroProps = {
+        size: "micro";
+    };
+    type NonMicroProps = {
+        size?: "extra-small" | "small" | "medium";
+    } & Partial<{
+        label: React.ReactNode;
+        emoji: string | null;
+        popoverTrigger: boolean;
+        deletable: boolean;
+        onDelete?(): void;
+    }>;
+    export type Props = {
         animated?: boolean;
         className?: string;
-        label?: React.ReactNode;
         value?: string;
         icon?: React.FC<React.SVGProps<SVGSVGElement>>;
-        emoji?: string | null;
-        deletable?: boolean;
         changeable?: boolean;
         pill?: boolean;
-        popoverTrigger?: boolean;
         color?: keyof typeof classMap.color;
-        size?: keyof typeof classMap.size;
         displayMode?: keyof typeof classMap.displayMode;
-        onDelete?(): void;
         onClick?(): void;
-    };
+    } & (MicroProps | NonMicroProps);
+    export {};
 }
-export declare const Chip: <T extends React.ElementType<any> = "div">(props: Chip.Props & {
+export declare const Chip: <T extends React.ElementType<any> = "div">(props: ({
+    animated?: boolean | undefined;
+    className?: string | undefined;
+    value?: string | undefined;
+    icon?: React.FC<React.SVGProps<SVGSVGElement>> | undefined;
+    changeable?: boolean | undefined;
+    pill?: boolean | undefined;
+    color?: "light" | "gray" | "light-green" | "light-blue" | "deep-blue" | "light-red" | "deep-red" | "light-yellow" | undefined;
+    displayMode?: "inline" | "block" | undefined;
+    onClick?(): void;
+} & {
+    size: "micro";
+} & {
     as?: T | undefined;
-} & Pick<React.ComponentPropsWithRef<T>, Exclude<keyof React.ComponentPropsWithRef<T>, "as">>) => JSX.Element;
+} & import("../utils/distributive-omit").DistributiveOmit<React.ComponentPropsWithRef<T>, "as">) | ({
+    animated?: boolean | undefined;
+    className?: string | undefined;
+    value?: string | undefined;
+    icon?: React.FC<React.SVGProps<SVGSVGElement>> | undefined;
+    changeable?: boolean | undefined;
+    pill?: boolean | undefined;
+    color?: "light" | "gray" | "light-green" | "light-blue" | "deep-blue" | "light-red" | "deep-red" | "light-yellow" | undefined;
+    displayMode?: "inline" | "block" | undefined;
+    onClick?(): void;
+} & {
+    size?: "extra-small" | "small" | "medium" | undefined;
+} & Partial<{
+    label: React.ReactNode;
+    emoji: string | null;
+    popoverTrigger: boolean;
+    deletable: boolean;
+    onDelete?(): void;
+}> & {
+    as?: T | undefined;
+} & import("../utils/distributive-omit").DistributiveOmit<React.ComponentPropsWithRef<T>, "as">)) => JSX.Element;
 export {};

Choice/Choice.d.ts

 import React from "react";
+import { ClassMapperProps } from "../utils";
 declare const classMap: {
@@ -13,14 +14,17 @@ type: {
 export declare namespace Choice {
-    type Props = Omit<React.HTMLProps<HTMLInputElement>, "size"> & {
-        indeterminate?: boolean;
-        checked: boolean;
-        error?: boolean;
-        loading?: boolean;
-        onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-        size?: keyof typeof classMap.size;
-        type: keyof typeof classMap.type;
-        value?: string;
-    };
+    type ChoiceProps = {
+        error: boolean;
+        indeterminate: boolean;
+        label: string;
+        loading: boolean;
+    } & ClassMapperProps<typeof classMap>;
+    export type Props = Omit<React.InputHTMLAttributes<HTMLInputElement>, keyof ChoiceProps> & Partial<ChoiceProps>;
+    export {};
 }
-export declare const Choice: ({ id: explicitId, checked, children, className, error: explicitError, loading, onChange, indeterminate, size, type, value, disabled: explicitDisabled, ...props }: Choice.Props) => JSX.Element;
+export declare const Choice: React.ForwardRefExoticComponent<Pick<React.InputHTMLAttributes<HTMLInputElement>, "accept" | "alt" | "autoComplete" | "autoFocus" | "capture" | "checked" | "crossOrigin" | "disabled" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "height" | "list" | "max" | "maxLength" | "min" | "minLength" | "multiple" | "name" | "pattern" | "placeholder" | "readOnly" | "required" | "src" | "step" | "value" | "width" | "onChange" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "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" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & Partial<{
+    error: boolean;
+    indeterminate: boolean;
+    label: string;
+    loading: boolean;
+} & Record<"type", "radio" | "checkbox"> & Record<"size", "small" | "medium">> & React.RefAttributes<HTMLInputElement>>;
 export {};

Clipboard/Clipboard.d.ts

 import React from "react";
 export declare namespace Clipboard {
-    type Props = React.HTMLProps<HTMLInputElement> & {
+    type Props = React.HTMLProps<HTMLDivElement> & {
         value: string;
@@ -5,0 +5,0 @@ };

Column/Column.d.ts

@@ -1,4 +0,4 @@
-import React from "react";
+import React, { ReactNode } from "react";
 export declare namespace Column {
-    type NumberAttr = number | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12";
+    type NumberAttr = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12";
     type ColSize = boolean | "auto" | NumberAttr;
@@ -10,3 +10,3 @@ type ColSpec = ColSize | {
     type Props = {
-        children: any;
+        children?: ReactNode;
         className?: string;
@@ -25,2 +25,2 @@ xxSmall?: ColSpec;
     as?: T | undefined;
-} & Pick<React.ComponentPropsWithRef<T>, Exclude<keyof React.ComponentPropsWithRef<T>, "as">>) => JSX.Element;
+} & import("../utils/distributive-omit").DistributiveOmit<React.ComponentPropsWithRef<T>, "as">) => JSX.Element;

Container/Container.d.ts

@@ -11,2 +11,2 @@ import React from "react";
     as?: T | undefined;
-} & Pick<React.ComponentPropsWithRef<T>, Exclude<keyof React.ComponentPropsWithRef<T>, "as">>) => JSX.Element;
+} & import("../utils/distributive-omit").DistributiveOmit<React.ComponentPropsWithRef<T>, "as">) => JSX.Element;

design-tokens.js

@@ -66,2 +66,3 @@ export const bodyBg = "#fff";
 export const fontWeightBold = "700";
+export const fontWeightLight = "300";
 export const fontWeightMedium = "500";
@@ -161,4 +162,6 @@ export const fontWeightNormal = "400";
   "0.75rem",
+  "0.5rem",
   "0.75rem",
   ".5625rem",
+  ".25rem",
   ".5625rem",
@@ -168,5 +171,7 @@ "0.75rem",
   "($control-padding-xsmall-x)-($border-width*2)",
+  "($control-padding-xxsmall-x)-($border-width*2)",
   "($control-padding-small-x)-($border-width*2)",
   "($control-padding-xsmall-y) - ($border-width*2)",
   "($control-padding-small-y) - ($border-width*2)",
+  "($control-padding-xxsmall-y) - ($border-width*2)",
   "($control-padding-medium-x)-($border-width*2)",
@@ -179,2 +184,3 @@ "($control-padding-medium-y)-($border-width*2)",
 export const secondary = "rgb(50, 190, 110)";
+export const selectedThemeBorder = "#18a7f7";
 export const shadow = "0 .5rem 1rem rgba(#000,.15)";
@@ -205,3 +211,2 @@ export const shadowLarge =
 export const tertiary = "rgb(110, 113, 125)";
-export const transformHover = "translateY(-0.0313rem) scale(1.001)";
 export const transitionBase = "all .2s ease-in-out";
@@ -217,1 +222,5 @@ export const transitionCollapse = "height .35s ease";
 export const yiqTextLight = "#fff";
+export const zIndexModal = "1320";
+export const zIndexModalBackdrop = "1310";
+export const zIndexPopover = "1460";
+export const zIndexTooltip = "1510";

DurationSelect/duration-select.helpers.d.ts

@@ -22,5 +22,4 @@ declare abstract class DurationSelectHelpers {
      * @param readout
-     * @param defaultDuration
      */
-    static formatDuration(readout: string, minDuration: number, maxDuration: number, roundToIncrement: number, defaultDuration?: number, incrementDirection?: string): {
+    static formatDuration(readout: string, minDuration: number, maxDuration: number, roundToIncrement: number, incrementDirection?: string): {
         readout: string;
@@ -27,0 +26,0 @@ value: number;

DurationSelect/DurationSelect.d.ts

@@ -1,2 +0,2 @@
-/// <reference types="react" />
+import React from "react";
 export declare namespace DurationSelect {
@@ -6,3 +6,2 @@ type Props = {
         disabled?: boolean;
-        label?: string;
         maxDuration?: number;
@@ -22,2 +21,2 @@ minDuration?: number;
 }
-export declare const DurationSelect: ({ value, disabled, label, maxDuration, minDuration, placeholder, required, roundToIncrement, wheelEventThrottle, onFocusChange, onValueChange }: DurationSelect.Props) => JSX.Element;
+export declare const DurationSelect: React.ForwardRefExoticComponent<DurationSelect.Props & React.RefAttributes<HTMLInputElement>>;

Field/Field.d.ts

@@ -12,3 +12,3 @@ import React, { HTMLAttributes, ReactNode } from "react";
         status?: Status;
-        disabled: boolean;
+        disabled?: boolean;
         addChildId: (x: string) => any;
@@ -15,0 +15,0 @@ removeChildId: (x: string) => any;

Flag/Flag.d.ts

@@ -6,3 +6,3 @@ /// <reference types="react" />
         size?: "small" | "medium";
-        color?: "light" | "gray" | "light-green" | "deep-blue" | "light-blue" | "light-red" | "deep-red";
+        color?: "light" | "gray" | "light-green" | "deep-blue" | "light-blue" | "light-red" | "deep-red" | "light-yellow";
         pill?: boolean;
@@ -9,0 +9,0 @@ };

IconContainer/IconContainer.d.ts

@@ -10,3 +10,3 @@ import React from "react";
     type Props = React.HTMLProps<HTMLElement> & {
-        icon: React.ElementType;
+        icon?: React.ElementType;
         positioning?: boolean;
@@ -18,3 +18,3 @@ size?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
 }
-export declare const IconContainer: React.ForwardRefExoticComponent<Pick<IconContainer.Props, "cite" | "data" | "form" | "label" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "className" | "icon" | "positioning" | "size" | "strokeWidth" | "theme" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "content" | "controls" | "coords" | "crossOrigin" | "dateTime" | "default" | "defer" | "disabled" | "download" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "height" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "list" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "multiple" | "muted" | "name" | "nonce" | "noValidate" | "open" | "optimum" | "placeholder" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "sizes" | "src" | "srcDoc" | "srcLang" | "srcSet" | "start" | "step" | "target" | "type" | "useMap" | "value" | "width" | "wmode" | "wrap" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "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" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key"> & React.RefAttributes<HTMLElement>>;
-export default IconContainer;
+export declare const IconContainer: React.ForwardRefExoticComponent<Pick<IconContainer.Props, "cite" | "data" | "form" | "label" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "children" | "className" | "icon" | "positioning" | "size" | "strokeWidth" | "theme" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "content" | "controls" | "coords" | "crossOrigin" | "dateTime" | "default" | "defer" | "disabled" | "download" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "height" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "list" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "multiple" | "muted" | "name" | "nonce" | "noValidate" | "open" | "optimum" | "placeholder" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "sizes" | "src" | "srcDoc" | "srcLang" | "srcSet" | "start" | "step" | "target" | "type" | "useMap" | "value" | "width" | "wmode" | "wrap" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "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" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key"> & React.RefAttributes<HTMLElement>>;
+export {};

icons.d.ts

@@ -163,2 +163,3 @@ import React from "react";
 export declare const IconMaximize: React.FC<React.ComponentProps<"svg">>;
+export declare const IconMegaphone: React.FC<React.ComponentProps<"svg">>;
 export declare const IconMeh: React.FC<React.ComponentProps<"svg">>;
@@ -253,2 +254,3 @@ export declare const IconMenu: React.FC<React.ComponentProps<"svg">>;
 export declare const IconThumbsUp: React.FC<React.ComponentProps<"svg">>;
+export declare const IconTimer: React.FC<React.ComponentProps<"svg">>;
 export declare const IconToggleLeft: React.FC<React.ComponentProps<"svg">>;
@@ -255,0 +257,0 @@ export declare const IconToggleRight: React.FC<React.ComponentProps<"svg">>;

icons/index.js

@@ -162,2 +162,3 @@ export { default as Account } from './Account'
 export { default as Maximize } from './Maximize'
+export { default as Megaphone } from './Megaphone'
 export { default as Meh } from './Meh'
@@ -252,2 +253,3 @@ export { default as Menu } from './Menu'
 export { default as ThumbsUp } from './ThumbsUp'
+export { default as Timer } from './Timer'
 export { default as ToggleLeft } from './ToggleLeft'
@@ -254,0 +256,0 @@ export { default as ToggleRight } from './ToggleRight'

index.d.ts

@@ -1,7 +0,1 @@
-/**
- * @note
- * All components that are exported in this file are publicly
- * consumable after the build process. Components that are used internally,
- * such as the "IterationItem" should not be placed in this file.
- */
 export { Animated } from "./Animated/Animated";
@@ -25,5 +19,6 @@ export { Avatar } from "./Avatar/Avatar";
 export { IconContainer } from "./IconContainer/IconContainer";
-export { Input } from "./Input/Input";
+export { Input, InputAffix } from "./Input/Input";
 export { Link } from "./Link/Link";
 export { MenuItem } from "./MenuItem/MenuItem";
+export { DialogContent, Modal, ModalContent } from "./Modal/Modal";
 export { PageHeader } from "./PageHeader/PageHeader";
@@ -33,8 +28,14 @@ export { Popover } from "./Popover/Popover";
 export { Row } from "./Row/Row";
-export { Select, Option, SelectComponents } from "./Select/Select";
+export { Option, Select, SelectActionMeta, SelectComponents, SelectComponentsConfig, SelectValueType } from "./Select/Select";
 export { SimpleList, Li } from "./SimpleList/SimpleList";
 export { RowDetail, SimpleTable, Tbody, Td, Th, Thead, Tr } from "./SimpleTable/SimpleTable";
 export { Spinner } from "./Spinner/Spinner";
-export { Stepper } from "./Stepper/Stepper";
+export { StatCard } from "./StatCard/StatCard";
+export { StatDonut } from "./StatDonut/StatDonut";
+export * from "./StatIcon/StatIcon";
+export { StatNumber } from "./StatNumber/StatNumber";
+export { StatTrend } from "./StatTrend/StatTrend";
+export { Step, Stepper } from "./Stepper/Stepper";
 export { Switch } from "./Switch/Switch";
+export { Tab, Tabs } from "./Tabs/Tabs";
 export { Text } from "./Text/Text";
@@ -44,2 +45,3 @@ export { TitleBar } from "./TitleBar/TitleBar";
 export { Tree } from "./Tree/Tree";
+export { polymorphic, toDate } from "./utils";
 export * from "./icons";

Input/Input.d.ts

@@ -1,22 +0,54 @@
-import React from "react";
+import React, { FC, ButtonHTMLAttributes, HTMLProps, InputHTMLAttributes, ReactNode, TextareaHTMLAttributes } from "react";
 export declare namespace Input {
-    type Props = Omit<React.HTMLProps<any>, "size"> & {
+    type OmitConflicts<T> = Omit<T, "prefix" | "size" | "type">;
+    type InputProps = OmitConflicts<InputHTMLAttributes<HTMLInputElement>> & {
+        type: "number" | "password" | "tel" | "text";
+    };
+    type AutosizeProps = OmitConflicts<HTMLProps<HTMLTextAreaElement>> & {
+        type: "grow";
+    };
+    type TextareaProps = OmitConflicts<TextareaHTMLAttributes<HTMLTextAreaElement>> & {
+        type: "multiline";
+        resizable?: boolean;
+    };
+    type MultilineProps = {
+        minHeight?: number;
+    } & (AutosizeProps | TextareaProps);
+    type SuffixProps = {
+        characterCountLimit: number;
+        suffix?: never;
+    } | {
+        suffix: ReactNode;
+        characterCountLimit?: never;
+    } | {
+        suffix?: never;
+        characterCountLimit?: never;
+    };
+    type DeprecatedProps = OmitConflicts<React.HTMLProps<any>> & {
+        grow?: boolean;
+        multiline?: boolean;
+    };
+    export type Props = {
         alignText?: "left" | "right" | "center";
-        block?: boolean;
-        characterCountLimit?: number;
-        condensed?: boolean;
         error?: boolean;
-        grow?: boolean;
-        inputRef?: React.RefObject<any> | ((ref: any) => void);
-        minHeight?: number;
-        multiline?: boolean;
-        prefix?: string;
-        resizable?: boolean;
-        shortcut?: JSX.Element;
+        inputRef?: React.RefObject<any> | ((ref: any) => void) | null;
+        prefix?: ReactNode;
         size?: "small" | "medium";
-        suffix?: string;
-        type?: "number" | "password" | "tel" | "text";
         width?: number;
-    };
+    } & SuffixProps & (MultilineProps | InputProps | DeprecatedProps);
+    export type InputAffixProps = (Partial<{
+        theme: "display";
+        className: string;
+    }> | ({
+        theme: "shortcut";
+    } & ButtonHTMLAttributes<HTMLButtonElement>)) & Partial<{
+        align: "start" | "center" | "end";
+    } & ({
+        label: string;
+    } | {
+        icon: ReactNode;
+    })>;
+    export {};
 }
-export declare const Input: ({ id: explicitId, alignText, className, disabled: explicitDisabled, error: explicitError, grow, inputRef, minHeight, multiline, onBlur, onFocus, prefix, resizable, shortcut, size, suffix, type, width, characterCountLimit, value, ...props }: Input.Props) => JSX.Element;
+export declare const InputAffix: FC<Input.InputAffixProps>;
+export declare const Input: FC<Input.Props>;

IterationItem/IterationItem.d.ts

@@ -15,2 +15,2 @@ import React from "react";
     as?: T | undefined;
-} & Pick<React.ComponentPropsWithRef<T>, Exclude<keyof React.ComponentPropsWithRef<T>, "as">>) => JSX.Element;
+} & import("../utils/distributive-omit").DistributiveOmit<React.ComponentPropsWithRef<T>, "as">) => JSX.Element;

Link/Link.d.ts

@@ -13,2 +13,2 @@ import React from "react";
     as?: T | undefined;
-} & Pick<React.ComponentPropsWithRef<T>, Exclude<keyof React.ComponentPropsWithRef<T>, "as">>) => JSX.Element;
+} & import("../utils/distributive-omit").DistributiveOmit<React.ComponentPropsWithRef<T>, "as">) => JSX.Element;

MenuItem/MenuItem.d.ts

@@ -13,2 +13,2 @@ import React from "react";
     as?: T | undefined;
-} & Pick<React.ComponentPropsWithRef<T>, Exclude<keyof React.ComponentPropsWithRef<T>, "as">>) => JSX.Element;
+} & import("../utils/distributive-omit").DistributiveOmit<React.ComponentPropsWithRef<T>, "as">) => JSX.Element;

package.json

 {
   "name": "@boulevard/blvd-ui",
-  "version": "1.0.0-beta.21",
+  "version": "1.0.0-beta.48",
   "module": "index.js",
@@ -16,3 +16,4 @@ "typings": "index.d.ts",
     "distribute-icons": "svgr -d build/icons --template svgr.template.js --silent src/assets/icons && cp -r src/assets/icons/. build/icons/raw",
-    "lint": "eslint --ext=ts,tsx src",
+    "fix": "eslint --ext=ts,tsx src --fix && prettier --trailing-comma none --write \"./src/**/*.scss\"",
+    "lint": "eslint --ext=ts,tsx src && prettier --trailing-comma none --check \"./src/**/*.scss\"",
     "test": "jest --collect-coverage",
@@ -37,7 +38,8 @@ "storybook": "start-storybook -p 6006",
   ],
-  "author": "Jeff Rooks <[e-mail]>",
+  "author": "Boulevard Product & Engineering (https://joinblvd.com/)",
   "contributors": [
+    "Caleb Plain <[e-mail]>",
+    "Chris Griffin <[e-mail]>",
     "Daniel Nagy <[e-mail]>",
-    "Caleb Plain <[e-mail]>",
-    "Chris Griffin <[e-mail]>"
+    "Nick Saunders <[e-mail]>"
   ],
@@ -50,12 +52,13 @@ "license": "UNLICENSED",
   "peerDependencies": {
-    "react": "^16.12.0",
-    "react-dom": "^16.12.0"
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1"
   },
   "devDependencies": {
     "@babel/core": "^7.9.0",
-    "@storybook/addon-a11y": "^5.3.18",
-    "@storybook/addon-actions": "^5.3.18",
-    "@storybook/addon-knobs": "^5.3.18",
-    "@storybook/addons": "^5.2.6",
-    "@storybook/react": "^5.2.6",
+    "@storybook/addon-a11y": "^6.1.10",
+    "@storybook/addon-actions": "^6.1.10",
+    "@storybook/addon-essentials": "^6.1.10",
+    "@storybook/addon-knobs": "^6.1.10",
+    "@storybook/addons": "^6.1.10",
+    "@storybook/react": "^6.1.10",
     "@svgr/cli": "^5.4.0",
@@ -73,3 +76,3 @@ "@svgr/rollup": "^5.3.1",
     "@types/react-lazy-load-image-component": "^1.3.0",
-    "@types/react-select": "^3.0.11",
+    "@types/resize-observer-browser": "^0.1.3",
     "@typescript-eslint/eslint-plugin": "^2.28.0",
@@ -91,6 +94,6 @@ "@typescript-eslint/parser": "^2.28.0",
     "jest": "^25.3.0",
-    "node-sass": "^4.14.1",
+    "node-sass": "4.14.1",
     "prettier": "^2.0.4",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
     "regenerator-runtime": "^0.13.5",
@@ -112,2 +115,3 @@ "rollup": "^2.6.1",
     "@popperjs/core": "^2.4.4",
+    "@types/react-select": "^3.1.1",
     "classnames": "^2.2.6",
@@ -118,6 +122,5 @@ "date-fns": "^2.12.0",
     "react-input-mask": "^2.0.4",
-    "react-lazy-load-image-component": "^1.4.3",
-    "react-popper": "^2.2.3",
-    "react-select": "^3.1.0",
-    "react-use-clipboard": "^1.0.0",
+    "react-lazy-load-image-component": "^1.5.1",
+    "react-popper": "^2.2.4",
+    "react-select": "^3.1.1",
     "react-use-event-listener": "^1.1.1"
@@ -124,0 +127,0 @@ },

PageHeader/PageHeader.d.ts

@@ -1,9 +0,7 @@
-import React from "react";
+import { FC, HTMLProps } from "react";
 export declare namespace PageHeader {
-    type Props = React.HTMLProps<HTMLUListElement> & {
-        leftContent: React.ReactNode;
-        centerContent: React.ReactNode;
-        rightContent: React.ReactNode;
-    };
+    type Props = {
+        as?: "div" | "header";
+    } & Pick<HTMLProps<HTMLElement>, "className" | "style">;
 }
-export declare const PageHeader: ({ className, leftContent, centerContent, rightContent, ...props }: PageHeader.Props) => JSX.Element;
+export declare const PageHeader: FC<PageHeader.Props>;

Popover/Popover.d.ts

@@ -6,6 +6,8 @@ import React from "react";
         target?: HTMLElement;
+        persistOnClick?: boolean;
         placement?: Placement;
-        persistOnClick?: boolean;
+        onClose?: () => void;
+        open: boolean;
     };
 }
 export declare const Popover: React.FC<Popover.Props>;

Row/Row.d.ts

@@ -11,2 +11,2 @@ import React from "react";
     as?: T | undefined;
-} & Pick<React.ComponentPropsWithRef<T>, Exclude<keyof React.ComponentPropsWithRef<T>, "as">>) => JSX.Element;
+} & import("../utils/distributive-omit").DistributiveOmit<React.ComponentPropsWithRef<T>, "as">) => JSX.Element;

Select/Select.d.ts

 import React from "react";
-import { Props as ReactSelectProps } from "react-select";
+import { IndicatorProps, MultiValueProps as ReactSelectMultiValueProps, Props as ReactSelectProps } from "react-select";
 export declare namespace Select {
-    type Props = {
+    interface CommonProps {
         disabled?: boolean;
@@ -11,5 +11,10 @@ error?: boolean;
         selectRef?: React.RefObject<HTMLInputElement>;
-        size?: "xsmall" | "small" | "medium";
+        size?: "xxsmall" | "xsmall" | "small" | "medium";
         appearance?: "dropdown" | "searchable-input" | "input";
-    };
+    }
+    export interface MultiValueProps<T> extends ReactSelectMultiValueProps<T>, CommonProps {
+    }
+    export interface Props<T, M extends boolean = false> extends ReactSelectProps<T, M>, CommonProps {
+    }
+    export {};
 }
@@ -22,5 +27,33 @@ /**
  * Please use the "Option" named export instead.
- *
  */
-export declare const SelectComponents: Required<import("react-select/src/components").DeepNonNullable<import("react-select/src/components").SelectComponents<any>>>;
+export declare const SelectComponents: {
+    ClearIndicator: <T, M extends boolean>(props: IndicatorProps<T, M>) => JSX.Element;
+    MultiValue: <T_1>({ children, className, data, deletable, getValue, setValue, ...props }: Select.MultiValueProps<T_1> & {
+        deletable?: boolean | undefined;
+    }) => JSX.Element;
+    Control: React.ComponentType<import("react-select").ControlProps<any, boolean>>;
+    DropdownIndicator: React.ComponentClass<IndicatorProps<any, boolean>, any> | React.FunctionComponent<IndicatorProps<any, boolean>>;
+    DownChevron: React.ComponentType<any>;
+    CrossIcon: React.ComponentType<any>;
+    Group: React.ComponentType<import("react-select").GroupProps<any, boolean>>;
+    GroupHeading: React.ComponentType<any>;
+    IndicatorsContainer: React.ComponentType<import("react-select").IndicatorContainerProps<any, boolean>>;
+    IndicatorSeparator: React.ComponentClass<IndicatorProps<any, boolean>, any> | React.FunctionComponent<IndicatorProps<any, boolean>>;
+    Input: React.ComponentType<import("react-select").InputProps>;
+    LoadingIndicator: React.ComponentClass<import("react-select/src/components/indicators").LoadingIconProps<any, boolean>, any> | React.FunctionComponent<import("react-select/src/components/indicators").LoadingIconProps<any, boolean>>;
+    Menu: React.ComponentType<import("react-select").MenuProps<any, boolean>>;
+    MenuList: React.ComponentType<import("react-select").MenuListComponentProps<any, boolean>>;
+    MenuPortal: React.ComponentType<import("react-select/src/components/Menu").MenuPortalProps<any, boolean>>;
+    LoadingMessage: React.ComponentType<import("react-select/src/components/Menu").NoticeProps<any, boolean>>;
+    NoOptionsMessage: React.ComponentType<import("react-select/src/components/Menu").NoticeProps<any, boolean>>;
+    MultiValueContainer: React.ComponentType<any>;
+    MultiValueLabel: React.ComponentType<any>;
+    MultiValueRemove: React.ComponentType<any>;
+    Option: React.ComponentType<import("react-select").OptionProps<any, boolean>>;
+    Placeholder: React.ComponentType<import("react-select").PlaceholderProps<any, boolean>>;
+    SelectContainer: React.ComponentType<import("react-select").ContainerProps<any, boolean>>;
+    SingleValue: React.ComponentType<import("react-select").SingleValueProps<any>>;
+    ValueContainer: React.ComponentType<import("react-select").ValueContainerProps<any, boolean>>;
+};
+export type { ActionMeta as SelectActionMeta, SelectComponentsConfig, ValueType as SelectValueType } from "react-select";
 /**
@@ -31,3 +64,3 @@ * @todo
 export declare const Option: (props: any) => JSX.Element;
-export declare function Select<T>({ appearance, className, disabled, error, minimal, size, width, portal, openMenuOnFocus, ...props }: Select.Props & ReactSelectProps<T>): JSX.Element;
+export declare function Select<T, M extends boolean = false>({ appearance, className, components, disabled, error, minimal, size, width, portal, openMenuOnFocus, styles: styleOverrides, ...props }: Select.Props<T, M>): JSX.Element;
 export declare function SelectDropdownText(text: string): (props: any) => JSX.Element;

Spinner/Spinner.d.ts

 /// <reference types="react" />
 export declare namespace Spinner {
     type Props = {
+        animation?: "bounce" | "spin";
+        className?: string;
+        positioning?: "inline" | "overlay";
         size?: "mini" | "small" | "large";
-        positioning?: "inline" | "overlay";
-        animation?: "bounce" | "spin";
     };
 }
-export declare const Spinner: ({ size, positioning, animation }: Spinner.Props) => JSX.Element;
+export declare const Spinner: ({ animation, className, positioning, size }: Spinner.Props) => JSX.Element;

Stepper/Stepper.d.ts

@@ -1,22 +0,19 @@
-import React from "react";
+import { AnchorHTMLAttributes, ButtonHTMLAttributes, FC } from "react";
 export declare namespace Stepper {
-    type Props = React.HTMLAttributes<HTMLDivElement> & {
-        activeStep?: number;
-        loading?: boolean;
-    };
+    type StepProps = {
+        label: string;
+    } & (({
+        status: "skipped" | "completed" | "incomplete";
+    } & (({
+        as: "button";
+    } & ButtonHTMLAttributes<HTMLButtonElement>) | ({
+        as: "a";
+        disabled?: boolean;
+    } & AnchorHTMLAttributes<HTMLAnchorElement>) | {})) | {
+        status: "active";
+    });
 }
-/**
- *
- * @beta
- * This component is in beta as of 03-2020. There may be breaking
- * changes in future versions. Use with caution.
- *
- * @param {Object} props
- * @param {number} [props.activeStep = 0] - The current step the stepper is showing.
- * @param {React.ReactNode} [props.children]
- * @param {string} [props.className]
- * @param {boolean} [props.loading = false] - Indicates whether the stepper is in a loading state or not.
- *
- * @returns JSX.Element
- */
-export declare const Stepper: React.FC<Stepper.Props>;
+export declare const Step: FC<Stepper.StepProps & {
+    number?: number;
+}>;
+export declare const Stepper: FC<{}>;

Switch/Switch.d.ts

 import React from "react";
+export declare const switchSizes: readonly ["small", "medium"];
 export declare namespace Switch {
-    type Props = {
-        checked: boolean;
-        className?: string;
-        disabled?: boolean;
-        error?: boolean;
-        id?: string;
-        name?: string;
-        onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-        size?: "small" | "medium";
-        value?: string;
+    type SwitchProps = {
+        error: boolean;
+        label: string;
+        size: typeof switchSizes[number];
     };
+    export type Props = Omit<React.InputHTMLAttributes<HTMLInputElement>, keyof SwitchProps | "type"> & Partial<SwitchProps>;
+    export {};
 }
-export declare const Switch: ({ checked, className, disabled: explicitDisabled, error: explicitError, id, name, onChange, size, value, ...props }: Switch.Props) => JSX.Element;
+export declare const Switch: ({ checked, className, disabled: explicitDisabled, error: explicitError, id: explicitId, label, size, ...props }: Switch.Props) => JSX.Element;

Text/Text.d.ts

@@ -9,3 +9,3 @@ import React from "react";
         variant?: "body1" | "body2" | "body3" | "body4" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "size1" | "size2" | "size3" | "size4" | "size5" | "size6" | "size7" | "size8" | "size9" | "size10";
-        weight?: "bold" | "medium" | "regular";
+        weight?: "bold" | "medium" | "regular" | "light";
     };
@@ -19,5 +19,5 @@ }
     variant?: "size5" | "size10" | "size9" | "size8" | "size7" | "size6" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "body1" | "body2" | "body3" | "body4" | "size1" | "size2" | "size3" | "size4" | undefined;
-    weight?: "bold" | "medium" | "regular" | undefined;
+    weight?: "bold" | "medium" | "regular" | "light" | undefined;
 } & {
     as?: T | undefined;
-} & Pick<React.ComponentPropsWithRef<T>, Exclude<keyof React.ComponentPropsWithRef<T>, "as">>) => JSX.Element;
+} & import("../utils/distributive-omit").DistributiveOmit<React.ComponentPropsWithRef<T>, "as">) => JSX.Element;

TitleBar/TitleBar.d.ts

@@ -12,2 +12,2 @@ import React from "react";
     as?: T | undefined;
-} & Pick<React.ComponentPropsWithRef<T>, Exclude<keyof React.ComponentPropsWithRef<T>, "as">>) => JSX.Element;
+} & import("../utils/distributive-omit").DistributiveOmit<React.ComponentPropsWithRef<T>, "as">) => JSX.Element;

Tree/Tree.d.ts

 import React from "react";
 export declare namespace Tree {
-    type Props = React.HTMLProps<HTMLUListElement>;
+    type Props = React.HTMLAttributes<HTMLElement>;
 }
-export declare const Tree: ({ children, className, ...props }: Tree.Props) => JSX.Element;
+export declare const Tree: <T extends React.ElementType<any> = "ul">(props: Tree.Props & {
+    as?: T | undefined;
+} & import("../utils/distributive-omit").DistributiveOmit<React.ComponentPropsWithRef<T>, "as">) => JSX.Element;

utils/class-mapper.d.ts

@@ -1,2 +0,3 @@
-export default function classMapper<M extends {
+import { UnionToIntersection } from "./union-to-intersection";
+export declare function classMapper<M extends {
     [key: string]: {
@@ -8,1 +9,2 @@ [key: string]: string;
 }): (string | null)[];
+export declare type ClassMapperProps<M, K = keyof M> = UnionToIntersection<K extends keyof M ? Record<K, keyof M[K]> : never>;

utils/index.d.ts

@@ -1,2 +0,2 @@
-export { default as classMapper } from "./class-mapper";
+export * from "./class-mapper";
 export { default as createError } from "./error";
@@ -3,0 +3,0 @@ export { default as dateFormat } from "./date-format";

utils/polymorphic.d.ts

 import React from "react";
-declare function polymorphic<E extends React.ElementType = "div">(el?: E): <P = {}>(Component: React.ComponentType<Pick<P, Exclude<keyof P, "as">> & {
+import { DistributiveOmit } from "./distributive-omit";
+declare function polymorphic<E extends React.ElementType = "div">(el?: E): <P = {}>(Component: React.ComponentType<DistributiveOmit<P, "as"> & {
     as: "as" extends keyof P ? NonNullable<P["as"]> : React.ElementType<any>;
 }>) => <T extends React.ElementType<any> = E>(props: P & {
     as?: T | undefined;
-} & Pick<React.ComponentPropsWithRef<T>, Exclude<keyof React.ComponentPropsWithRef<T>, "as">>) => JSX.Element;
+} & DistributiveOmit<React.ComponentPropsWithRef<T>, "as">) => JSX.Element;
 export default polymorphic;

New alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1488659

increased by12.39%

Number of package files

724

increased by2.12%

Lines of code

23212

increased by7.48%

Worsened metrics

Dev dependency count

53

increased by1.92%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@types/react-select@^3.1.1

• + Added@types/react-dom@18.3.0(transitive)

• + Added@types/react-select@3.1.2(transitive)

• + Added@types/react-transition-group@4.4.10(transitive)

• + Addedreact@17.0.2(transitive)

• + Addedreact-dom@17.0.2(transitive)

• + Addedscheduler@0.20.2(transitive)

• - Removedreact-use-clipboard@^1.0.0

• - Removedcopy-to-clipboard@3.3.3(transitive)

• - Removedreact-use-clipboard@1.0.9(transitive)

• - Removedtoggle-selection@1.0.6(transitive)

• Updatedreact-lazy-load-image-component@^1.5.1

• Updatedreact-popper@^2.2.4

• Updatedreact-select@^3.1.1