@nulogy/components 15.2.1 → 15.2.3

package/dist/src/Radio/Radio.story.d.ts

@@ -1,37 +1,327 @@
+import { StoryObj } from "@storybook/react";
 import React from "react";
+import { Radio } from "../index";
 declare const _default: {
     title: string;
-};
-export default _default;
-export declare const _Radio: () => React.JSX.Element;
-export declare const SetToDefaultChecked: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const SetToDisabled: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const SetToError: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const SetToRequired: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const Controlled: () => React.JSX.Element;
-export declare const UsingRefToControlFocus: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
+    component: React.ForwardRefExoticComponent<Omit<{
+        children?: React.ReactNode | Record<string, unknown>;
+        value?: string | readonly string[] | number | undefined;
+        ref?: React.Ref<HTMLInputElement>;
+        form?: string | undefined;
+        slot?: string | undefined;
+        style?: React.CSSProperties | undefined;
+        title?: string | undefined;
+        pattern?: string | undefined;
+        property?: string | undefined;
+        color?: string | undefined;
+        content?: string | undefined;
+        height?: number | string | undefined;
+        translate?: "yes" | "no" | undefined;
+        width?: number | string | undefined;
+        hidden?: boolean | undefined;
+        key?: React.Key | null | undefined;
+        defaultChecked?: boolean | undefined;
+        defaultValue?: string | number | readonly string[] | undefined;
+        suppressContentEditableWarning?: boolean | undefined;
+        suppressHydrationWarning?: boolean | undefined;
+        accessKey?: string | undefined;
+        autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {});
+        autoFocus?: boolean | undefined;
+        className?: string | undefined;
+        contentEditable?: (boolean | "true" | "false") | "inherit" | undefined;
+        contextMenu?: string | undefined;
+        dir?: string | undefined;
+        draggable?: (boolean | "true" | "false") | undefined;
+        enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
+        id?: string | undefined;
+        lang?: string | undefined;
+        nonce?: string | undefined;
+        placeholder?: string | undefined;
+        spellCheck?: (boolean | "true" | "false") | undefined;
+        tabIndex?: number | undefined;
+        radioGroup?: string | undefined;
+        role?: React.AriaRole | undefined;
+        about?: string | undefined;
+        datatype?: string | undefined;
+        inlist?: any;
+        prefix?: string | undefined;
+        rel?: string | undefined;
+        resource?: string | undefined;
+        rev?: string | undefined;
+        typeof?: string | undefined;
+        vocab?: string | undefined;
+        autoCorrect?: string | undefined;
+        autoSave?: string | undefined;
+        itemProp?: string | undefined;
+        itemScope?: boolean | undefined;
+        itemType?: string | undefined;
+        itemID?: string | undefined;
+        itemRef?: string | undefined;
+        results?: number | undefined;
+        security?: string | undefined;
+        unselectable?: "on" | "off" | undefined;
+        inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined;
+        is?: string | undefined;
+        exportparts?: string | undefined;
+        part?: string | undefined;
+        "aria-activedescendant"?: string | undefined;
+        "aria-atomic"?: (boolean | "true" | "false") | undefined;
+        "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined;
+        "aria-braillelabel"?: string | undefined;
+        "aria-brailleroledescription"?: string | undefined;
+        "aria-busy"?: (boolean | "true" | "false") | undefined;
+        "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined;
+        "aria-colcount"?: number | undefined;
+        "aria-colindex"?: number | undefined;
+        "aria-colindextext"?: string | undefined;
+        "aria-colspan"?: number | undefined;
+        "aria-controls"?: string | undefined;
+        "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined;
+        "aria-describedby"?: string | undefined;
+        "aria-description"?: string | undefined;
+        "aria-details"?: string | undefined;
+        "aria-disabled"?: (boolean | "true" | "false") | undefined;
+        "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined;
+        "aria-errormessage"?: string | undefined;
+        "aria-expanded"?: (boolean | "true" | "false") | undefined;
+        "aria-flowto"?: string | undefined;
+        "aria-grabbed"?: (boolean | "true" | "false") | undefined;
+        "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined;
+        "aria-hidden"?: (boolean | "true" | "false") | undefined;
+        "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
+        "aria-keyshortcuts"?: string | undefined;
+        "aria-label"?: string | undefined;
+        "aria-labelledby"?: string | undefined;
+        "aria-level"?: number | undefined;
+        "aria-live"?: "off" | "assertive" | "polite" | undefined;
+        "aria-modal"?: (boolean | "true" | "false") | undefined;
+        "aria-multiline"?: (boolean | "true" | "false") | undefined;
+        "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
+        "aria-orientation"?: "horizontal" | "vertical" | undefined;
+        "aria-owns"?: string | undefined;
+        "aria-placeholder"?: string | undefined;
+        "aria-posinset"?: number | undefined;
+        "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined;
+        "aria-readonly"?: (boolean | "true" | "false") | undefined;
+        "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined;
+        "aria-required"?: (boolean | "true" | "false") | undefined;
+        "aria-roledescription"?: string | undefined;
+        "aria-rowcount"?: number | undefined;
+        "aria-rowindex"?: number | undefined;
+        "aria-rowindextext"?: string | undefined;
+        "aria-rowspan"?: number | undefined;
+        "aria-selected"?: (boolean | "true" | "false") | undefined;
+        "aria-setsize"?: number | undefined;
+        "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
+        "aria-valuemax"?: number | undefined;
+        "aria-valuemin"?: number | undefined;
+        "aria-valuenow"?: number | undefined;
+        "aria-valuetext"?: string | undefined;
+        dangerouslySetInnerHTML?: {
+            __html: string | TrustedHTML;
+        } | undefined;
+        onCopy?: React.ClipboardEventHandler<HTMLInputElement>;
+        onCopyCapture?: React.ClipboardEventHandler<HTMLInputElement>;
+        onCut?: React.ClipboardEventHandler<HTMLInputElement>;
+        onCutCapture?: React.ClipboardEventHandler<HTMLInputElement>;
+        onPaste?: React.ClipboardEventHandler<HTMLInputElement>;
+        onPasteCapture?: React.ClipboardEventHandler<HTMLInputElement>;
+        onCompositionEnd?: React.CompositionEventHandler<HTMLInputElement>;
+        onCompositionEndCapture?: React.CompositionEventHandler<HTMLInputElement>;
+        onCompositionStart?: React.CompositionEventHandler<HTMLInputElement>;
+        onCompositionStartCapture?: React.CompositionEventHandler<HTMLInputElement>;
+        onCompositionUpdate?: React.CompositionEventHandler<HTMLInputElement>;
+        onCompositionUpdateCapture?: React.CompositionEventHandler<HTMLInputElement>;
+        onFocus?: React.FocusEventHandler<HTMLInputElement>;
+        onFocusCapture?: React.FocusEventHandler<HTMLInputElement>;
+        onBlur?: React.FocusEventHandler<HTMLInputElement>;
+        onBlurCapture?: React.FocusEventHandler<HTMLInputElement>;
+        onChange?: React.ChangeEventHandler<HTMLInputElement>;
+        onChangeCapture?: React.FormEventHandler<HTMLInputElement>;
+        onBeforeInput?: React.InputEventHandler<HTMLInputElement>;
+        onBeforeInputCapture?: React.FormEventHandler<HTMLInputElement>;
+        onInput?: React.FormEventHandler<HTMLInputElement>;
+        onInputCapture?: React.FormEventHandler<HTMLInputElement>;
+        onReset?: React.FormEventHandler<HTMLInputElement>;
+        onResetCapture?: React.FormEventHandler<HTMLInputElement>;
+        onSubmit?: React.FormEventHandler<HTMLInputElement>;
+        onSubmitCapture?: React.FormEventHandler<HTMLInputElement>;
+        onInvalid?: React.FormEventHandler<HTMLInputElement>;
+        onInvalidCapture?: React.FormEventHandler<HTMLInputElement>;
+        onLoad?: React.ReactEventHandler<HTMLInputElement>;
+        onLoadCapture?: React.ReactEventHandler<HTMLInputElement>;
+        onError?: React.ReactEventHandler<HTMLInputElement>;
+        onErrorCapture?: React.ReactEventHandler<HTMLInputElement>;
+        onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;
+        onKeyDownCapture?: React.KeyboardEventHandler<HTMLInputElement>;
+        onKeyPress?: React.KeyboardEventHandler<HTMLInputElement>;
+        onKeyPressCapture?: React.KeyboardEventHandler<HTMLInputElement>;
+        onKeyUp?: React.KeyboardEventHandler<HTMLInputElement>;
+        onKeyUpCapture?: React.KeyboardEventHandler<HTMLInputElement>;
+        onAbort?: React.ReactEventHandler<HTMLInputElement>;
+        onAbortCapture?: React.ReactEventHandler<HTMLInputElement>;
+        onCanPlay?: React.ReactEventHandler<HTMLInputElement>;
+        onCanPlayCapture?: React.ReactEventHandler<HTMLInputElement>;
+        onCanPlayThrough?: React.ReactEventHandler<HTMLInputElement>;
+        onCanPlayThroughCapture?: React.ReactEventHandler<HTMLInputElement>;
+        onDurationChange?: React.ReactEventHandler<HTMLInputElement>;
+        onDurationChangeCapture?: React.ReactEventHandler<HTMLInputElement>;
+        onEmptied?: React.ReactEventHandler<HTMLInputElement>;
+        onEmptiedCapture?: React.ReactEventHandler<HTMLInputElement>;
+        onEncrypted?: React.ReactEventHandler<HTMLInputElement>;
+        onEncryptedCapture?: React.ReactEventHandler<HTMLInputElement>;
+        onEnded?: React.ReactEventHandler<HTMLInputElement>;
+        onEndedCapture?: React.ReactEventHandler<HTMLInputElement>;
+        onLoadedData?: React.ReactEventHandler<HTMLInputElement>;
+        onLoadedDataCapture?: React.ReactEventHandler<HTMLInputElement>;
+        onLoadedMetadata?: React.ReactEventHandler<HTMLInputElement>;
+        onLoadedMetadataCapture?: React.ReactEventHandler<HTMLInputElement>;
+        onLoadStart?: React.ReactEventHandler<HTMLInputElement>;
+        onLoadStartCapture?: React.ReactEventHandler<HTMLInputElement>;
+        onPause?: React.ReactEventHandler<HTMLInputElement>;
+        onPauseCapture?: React.ReactEventHandler<HTMLInputElement>;
+        onPlay?: React.ReactEventHandler<HTMLInputElement>;
+        onPlayCapture?: React.ReactEventHandler<HTMLInputElement>;
+        onPlaying?: React.ReactEventHandler<HTMLInputElement>;
+        onPlayingCapture?: React.ReactEventHandler<HTMLInputElement>;
+        onProgress?: React.ReactEventHandler<HTMLInputElement>;
+        onProgressCapture?: React.ReactEventHandler<HTMLInputElement>;
+        onRateChange?: React.ReactEventHandler<HTMLInputElement>;
+        onRateChangeCapture?: React.ReactEventHandler<HTMLInputElement>;
+        onSeeked?: React.ReactEventHandler<HTMLInputElement>;
+        onSeekedCapture?: React.ReactEventHandler<HTMLInputElement>;
+        onSeeking?: React.ReactEventHandler<HTMLInputElement>;
+        onSeekingCapture?: React.ReactEventHandler<HTMLInputElement>;
+        onStalled?: React.ReactEventHandler<HTMLInputElement>;
+        onStalledCapture?: React.ReactEventHandler<HTMLInputElement>;
+        onSuspend?: React.ReactEventHandler<HTMLInputElement>;
+        onSuspendCapture?: React.ReactEventHandler<HTMLInputElement>;
+        onTimeUpdate?: React.ReactEventHandler<HTMLInputElement>;
+        onTimeUpdateCapture?: React.ReactEventHandler<HTMLInputElement>;
+        onVolumeChange?: React.ReactEventHandler<HTMLInputElement>;
+        onVolumeChangeCapture?: React.ReactEventHandler<HTMLInputElement>;
+        onWaiting?: React.ReactEventHandler<HTMLInputElement>;
+        onWaitingCapture?: React.ReactEventHandler<HTMLInputElement>;
+        onAuxClick?: React.MouseEventHandler<HTMLInputElement>;
+        onAuxClickCapture?: React.MouseEventHandler<HTMLInputElement>;
+        onClick?: React.MouseEventHandler<HTMLInputElement>;
+        onClickCapture?: React.MouseEventHandler<HTMLInputElement>;
+        onContextMenu?: React.MouseEventHandler<HTMLInputElement>;
+        onContextMenuCapture?: React.MouseEventHandler<HTMLInputElement>;
+        onDoubleClick?: React.MouseEventHandler<HTMLInputElement>;
+        onDoubleClickCapture?: React.MouseEventHandler<HTMLInputElement>;
+        onDrag?: React.DragEventHandler<HTMLInputElement>;
+        onDragCapture?: React.DragEventHandler<HTMLInputElement>;
+        onDragEnd?: React.DragEventHandler<HTMLInputElement>;
+        onDragEndCapture?: React.DragEventHandler<HTMLInputElement>;
+        onDragEnter?: React.DragEventHandler<HTMLInputElement>;
+        onDragEnterCapture?: React.DragEventHandler<HTMLInputElement>;
+        onDragExit?: React.DragEventHandler<HTMLInputElement>;
+        onDragExitCapture?: React.DragEventHandler<HTMLInputElement>;
+        onDragLeave?: React.DragEventHandler<HTMLInputElement>;
+        onDragLeaveCapture?: React.DragEventHandler<HTMLInputElement>;
+        onDragOver?: React.DragEventHandler<HTMLInputElement>;
+        onDragOverCapture?: React.DragEventHandler<HTMLInputElement>;
+        onDragStart?: React.DragEventHandler<HTMLInputElement>;
+        onDragStartCapture?: React.DragEventHandler<HTMLInputElement>;
+        onDrop?: React.DragEventHandler<HTMLInputElement>;
+        onDropCapture?: React.DragEventHandler<HTMLInputElement>;
+        onMouseDown?: React.MouseEventHandler<HTMLInputElement>;
+        onMouseDownCapture?: React.MouseEventHandler<HTMLInputElement>;
+        onMouseEnter?: React.MouseEventHandler<HTMLInputElement>;
+        onMouseLeave?: React.MouseEventHandler<HTMLInputElement>;
+        onMouseMove?: React.MouseEventHandler<HTMLInputElement>;
+        onMouseMoveCapture?: React.MouseEventHandler<HTMLInputElement>;
+        onMouseOut?: React.MouseEventHandler<HTMLInputElement>;
+        onMouseOutCapture?: React.MouseEventHandler<HTMLInputElement>;
+        onMouseOver?: React.MouseEventHandler<HTMLInputElement>;
+        onMouseOverCapture?: React.MouseEventHandler<HTMLInputElement>;
+        onMouseUp?: React.MouseEventHandler<HTMLInputElement>;
+        onMouseUpCapture?: React.MouseEventHandler<HTMLInputElement>;
+        onSelect?: React.ReactEventHandler<HTMLInputElement>;
+        onSelectCapture?: React.ReactEventHandler<HTMLInputElement>;
+        onTouchCancel?: React.TouchEventHandler<HTMLInputElement>;
+        onTouchCancelCapture?: React.TouchEventHandler<HTMLInputElement>;
+        onTouchEnd?: React.TouchEventHandler<HTMLInputElement>;
+        onTouchEndCapture?: React.TouchEventHandler<HTMLInputElement>;
+        onTouchMove?: React.TouchEventHandler<HTMLInputElement>;
+        onTouchMoveCapture?: React.TouchEventHandler<HTMLInputElement>;
+        onTouchStart?: React.TouchEventHandler<HTMLInputElement>;
+        onTouchStartCapture?: React.TouchEventHandler<HTMLInputElement>;
+        onPointerDown?: React.PointerEventHandler<HTMLInputElement>;
+        onPointerDownCapture?: React.PointerEventHandler<HTMLInputElement>;
+        onPointerMove?: React.PointerEventHandler<HTMLInputElement>;
+        onPointerMoveCapture?: React.PointerEventHandler<HTMLInputElement>;
+        onPointerUp?: React.PointerEventHandler<HTMLInputElement>;
+        onPointerUpCapture?: React.PointerEventHandler<HTMLInputElement>;
+        onPointerCancel?: React.PointerEventHandler<HTMLInputElement>;
+        onPointerCancelCapture?: React.PointerEventHandler<HTMLInputElement>;
+        onPointerEnter?: React.PointerEventHandler<HTMLInputElement>;
+        onPointerEnterCapture?: React.PointerEventHandler<HTMLInputElement>;
+        onPointerLeave?: React.PointerEventHandler<HTMLInputElement>;
+        onPointerLeaveCapture?: React.PointerEventHandler<HTMLInputElement>;
+        onPointerOver?: React.PointerEventHandler<HTMLInputElement>;
+        onPointerOverCapture?: React.PointerEventHandler<HTMLInputElement>;
+        onPointerOut?: React.PointerEventHandler<HTMLInputElement>;
+        onPointerOutCapture?: React.PointerEventHandler<HTMLInputElement>;
+        onGotPointerCapture?: React.PointerEventHandler<HTMLInputElement>;
+        onGotPointerCaptureCapture?: React.PointerEventHandler<HTMLInputElement>;
+        onLostPointerCapture?: React.PointerEventHandler<HTMLInputElement>;
+        onLostPointerCaptureCapture?: React.PointerEventHandler<HTMLInputElement>;
+        onScroll?: React.UIEventHandler<HTMLInputElement>;
+        onScrollCapture?: React.UIEventHandler<HTMLInputElement>;
+        onWheel?: React.WheelEventHandler<HTMLInputElement>;
+        onWheelCapture?: React.WheelEventHandler<HTMLInputElement>;
+        onAnimationStart?: React.AnimationEventHandler<HTMLInputElement>;
+        onAnimationStartCapture?: React.AnimationEventHandler<HTMLInputElement>;
+        onAnimationEnd?: React.AnimationEventHandler<HTMLInputElement>;
+        onAnimationEndCapture?: React.AnimationEventHandler<HTMLInputElement>;
+        onAnimationIteration?: React.AnimationEventHandler<HTMLInputElement>;
+        onAnimationIterationCapture?: React.AnimationEventHandler<HTMLInputElement>;
+        onTransitionEnd?: React.TransitionEventHandler<HTMLInputElement>;
+        onTransitionEndCapture?: React.TransitionEventHandler<HTMLInputElement>;
+        list?: string | undefined;
+        name?: string | undefined;
+        type?: React.HTMLInputTypeAttribute | undefined;
+        alt?: string | undefined;
+        src?: string | undefined;
+        disabled?: boolean | undefined;
+        formAction?: string | undefined;
+        formEncType?: string | undefined;
+        formMethod?: string | undefined;
+        formNoValidate?: boolean | undefined;
+        formTarget?: string | undefined;
+        autoComplete?: string | undefined;
+        accept?: string | undefined;
+        capture?: boolean | "user" | "environment" | undefined;
+        checked?: boolean | undefined;
+        max?: number | string | undefined;
+        maxLength?: number | undefined;
+        min?: number | string | undefined;
+        minLength?: number | undefined;
+        multiple?: boolean | undefined;
+        readOnly?: boolean | undefined;
+        required?: boolean | undefined;
+        step?: number | string | undefined;
+    } & import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & {
+        htmlSize?: number;
+        variant?: import("../NDSProvider/ComponentVariantContext").ComponentVariant;
+        labelText?: React.ReactNode;
+        checked?: boolean;
+        defaultChecked?: boolean;
+        error?: boolean;
+    }, "ref"> & React.RefAttributes<HTMLInputElement>>;
+    args: {
+        id: string;
+        labelText: string;
     };
 };
+export default _default;
+type Story = StoryObj<typeof Radio>;
+export declare const Default: Story;
+export declare const SetToDefaultChecked: Story;
+export declare const SetToDisabled: Story;
+export declare const SetToError: Story;
+export declare const SetToRequired: Story;
+export declare const Controlled: Story;
+export declare const UsingRefToControlFocus: Story;

package/dist/src/Radio/Radio.story.js

@@ -3,42 +3,56 @@ import { action } from "@storybook/addon-actions";
 import { Radio, Button } from "../index";
 export default {
     title: "Components/Radio",
+    component: Radio,
+    args: {
+        id: "radio",
+        labelText: "I am a radio button",
+    },
 };
-export const _Radio = () => React.createElement(Radio, { p: "x3", id: "radio", labelText: "I am a radio button", "data-testid": "radio" });
-export const SetToDefaultChecked = () => (React.createElement(React.Fragment, null,
-    React.createElement(Radio, { id: "radio", defaultChecked: true, labelText: "I am checked by default" })));
-SetToDefaultChecked.story = {
-    name: "Set to defaultChecked",
+export const Default = {
+    args: {
+        labelText: "I am a radio button",
+    },
 };
-export const SetToDisabled = () => (React.createElement(React.Fragment, null,
-    React.createElement(Radio, { id: "radio-1", disabled: true, labelText: "I am disabled" }),
-    React.createElement(Radio, { id: "radio-2", checked: true, disabled: true, labelText: "I am disabled" })));
-SetToDisabled.story = {
+export const SetToDefaultChecked = {
+    args: {
+        defaultChecked: true,
+        labelText: "I am checked by default",
+    },
+    name: "Set to default checked",
+};
+export const SetToDisabled = {
+    render: (args) => (React.createElement(React.Fragment, null,
+        React.createElement(Radio, { ...args, id: "radio-1", disabled: true, labelText: "I am disabled" }),
+        React.createElement(Radio, { ...args, id: "radio-2", checked: true, disabled: true, labelText: "I am disabled" }))),
     name: "Set to disabled",
 };
-export const SetToError = () => (React.createElement(React.Fragment, null,
-    React.createElement(Radio, { id: "radio", error: true, labelText: "I am error" }),
-    React.createElement(Radio, { id: "radio", defaultChecked: true, error: true, labelText: "I am error" })));
-SetToError.story = {
+export const SetToError = {
+    render: (args) => (React.createElement(React.Fragment, null,
+        React.createElement(Radio, { ...args, id: "radio", error: true, labelText: "I am error" }),
+        React.createElement(Radio, { ...args, id: "radio", defaultChecked: true, error: true, labelText: "I am error" }))),
     name: "Set to error",
 };
-export const SetToRequired = () => (React.createElement(React.Fragment, null,
-    React.createElement(Radio, { id: "radio", labelText: "I am a radio button", required: true })));
-SetToRequired.story = {
+export const SetToRequired = {
+    render: (args) => (React.createElement(React.Fragment, null,
+        React.createElement(Radio, { ...args, id: "radio", labelText: "I am a radio button", required: true }))),
     name: "Set to required",
 };
-export const Controlled = () => (React.createElement(React.Fragment, null,
-    React.createElement(Radio, { id: "radio-1", checked: true, onChange: action("onChange"), labelText: "I am controlled and checked" }),
-    React.createElement(Radio, { id: "radio-2", checked: false, onChange: action("onChange"), labelText: "I am controlled and unchecked" })));
-export const UsingRefToControlFocus = () => {
+export const Controlled = {
+    render: (args) => (React.createElement(React.Fragment, null,
+        React.createElement(Radio, { ...args, id: "radio-1", checked: true, onChange: action("onChange"), labelText: "I am controlled and checked" }),
+        React.createElement(Radio, { ...args, id: "radio-2", checked: false, onChange: action("onChange"), labelText: "I am controlled and unchecked" }))),
+};
+const UsingRefToControlFocusComponent = () => {
     const ref = useRef(null);
     const handleClick = () => {
         ref.current.focus();
     };
     return (React.createElement(React.Fragment, null,
         React.createElement(Radio, { ref: ref, checked: true, onChange: action("onChange"), labelText: "I am controlled and checked" }),
-        React.createElement(Button, { onClick: handleClick }, "Focus the Input")));
+        React.createElement(Button, { onClick: handleClick, "data-testid": "the-button" }, "Focus the Input")));
 };
-UsingRefToControlFocus.story = {
+export const UsingRefToControlFocus = {
+    render: (args) => React.createElement(UsingRefToControlFocusComponent, { ...args }),
     name: "using ref to control focus",
 };

package/dist/src/Radio/RadioGroup.js

@@ -1,23 +1,11 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import React from "react";
 import { useTheme } from "styled-components";
 import { HelpText, RequirementText } from "../FieldLabel";
 import { InlineValidation } from "../Validation";
 import { Fieldset } from "../Form";
 import Radio from "./Radio";
-export default function RadioGroup(_a) {
-    var { className, id, errorMessage, errorList, labelText, helpText, requirementText } = _a, props = __rest(_a, ["className", "id", "errorMessage", "errorList", "labelText", "helpText", "requirementText"]);
-    const otherProps = Object.assign(Object.assign({}, props), { errorMessage, errorList });
+export default function RadioGroup({ className, id, errorMessage, errorList, labelText, helpText, requirementText, ...props }) {
+    const otherProps = { ...props, errorMessage, errorList };
     const theme = useTheme();
     return (React.createElement(Fieldset, { className: className, id: id },
         React.createElement("legend", { style: { marginBottom: theme.space.x1 } },
@@ -34,8 +22,8 @@ const labelTextStyles = (theme) => ({
 });
 const getRadioButtons = (props) => {
     const radioButtons = React.Children.map(props.children, (radio) => {
-        const _a = radio.props, { value, disabled, required, onChange } = _a, radioProps = __rest(_a, ["value", "disabled", "required", "onChange"]);
-        return (React.createElement(Radio, Object.assign({}, radioProps, { value: value, disabled: props.disabled || disabled, error: !!(props.errorMessage || props.errorList), required: props.required || required, name: props.name, defaultChecked: value === props.defaultValue ? true : undefined, checked: props.checkedValue && value === props.checkedValue, onChange: props.onChange || onChange })));
+        const { value, disabled, required, onChange, ...radioProps } = radio.props;
+        return (React.createElement(Radio, { ...radioProps, value: value, disabled: props.disabled || disabled, error: !!(props.errorMessage || props.errorList), required: props.required || required, name: props.name, defaultChecked: value === props.defaultValue ? true : undefined, checked: props.checkedValue && value === props.checkedValue, onChange: props.onChange || onChange }));
     });
     return radioButtons;
 };

package/dist/src/RangeContainer/RangeContainer.js

@@ -1,14 +1,3 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import React from "react";
 import propTypes from "@styled-system/prop-types";
 import { Text } from "../Type";
@@ -17,12 +6,14 @@ import { FieldLabel } from "../FieldLabel";
 import { FieldLabelDefaultProps } from "../FieldLabel/FieldLabel.type";
 import { InlineValidation } from "../Validation";
 import { getSubset, omitSubset } from "../utils/subset";
-const RangeContainer = (_a) => {
-    var { startComponent, endComponent, errorMessages = [], labelProps = Object.assign(Object.assign({}, FieldLabelDefaultProps), { labelText: "Range" }), variant } = _a, props = __rest(_a, ["startComponent", "endComponent", "errorMessages", "labelProps", "variant"]);
+const RangeContainer = ({ startComponent, endComponent, errorMessages = [], labelProps = {
+    ...FieldLabelDefaultProps,
+    labelText: "Range",
+}, variant, ...props }) => {
     const spaceProps = getSubset(props, propTypes.space);
     const restProps = omitSubset(props, propTypes.space);
-    return (React.createElement(Flex, Object.assign({}, spaceProps, { flexDirection: "column" }),
-        React.createElement(FieldLabel, Object.assign({}, labelProps, restProps)),
+    return (React.createElement(Flex, { ...spaceProps, flexDirection: "column" },
+        React.createElement(FieldLabel, { ...labelProps, ...restProps }),
         React.createElement(Flex, { flexWrap: "wrap", mt: "x1", mb: errorMessages.length ? "x1" : "x3" },
             React.createElement(Flex, null, startComponent),
             React.createElement(Flex, { px: "half", alignItems: "flex-end", alignSelf: "flex-end" },

package/dist/src/Select/MenuList.js

@@ -1,5 +1,5 @@
 /*
-  Copied as is from: https://github.com/jacobworrel/react-windowed-select/blob/master/src/MenuList.tsx
+  Copied as is from: https://github.com/jacobworrel/react-windowed-select/blob/main/src/MenuList.tsx
   MIT License
   Copyright (c) 2019 Jacob Worrel
   Permission is hereby granted, free of charge, to any person obtaining a copy
@@ -18,17 +18,6 @@
   OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
   SOFTWARE.
 */
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import * as React from "react";
 import { VariableSizeList as List } from "react-window";
 import { createGetHeight, flattenGroupedChildren, getCurrentIndex } from "./lib";
@@ -63,7 +52,7 @@ function MenuList(props) {
     const itemCount = children.length;
     const [measuredHeights, setMeasuredHeights] = React.useState({});
     // calc menu height
-    const _a = getStyles("menuList", props), { maxHeight, paddingBottom = 0, paddingTop = 0 } = _a, menuListStyle = __rest(_a, ["maxHeight", "paddingBottom", "paddingTop"]);
+    const { maxHeight, paddingBottom = 0, paddingTop = 0, ...menuListStyle } = getStyles("menuList", props);
     const totalHeight = React.useMemo(() => {
         return heights.reduce((sum, height, idx) => {
             if (measuredHeights[idx]) {
@@ -88,7 +77,10 @@ function MenuList(props) {
         if (measuredHeights[index] !== undefined && measuredHeights[index] === measuredHeight) {
             return;
         }
-        setMeasuredHeights((measuredHeights) => (Object.assign(Object.assign({}, measuredHeights), { [index]: measuredHeight })));
+        setMeasuredHeights((measuredHeights) => ({
+            ...measuredHeights,
+            [index]: measuredHeight,
+        }));
         // this forces the list to rerender items after the item positions resizing
         if (list.current) {
             list.current.resetAfterIndex(index);
@@ -104,11 +96,14 @@ function MenuList(props) {
     }, [currentIndex, children, list]);
     return (React.createElement(List, { className: classNamePrefix
             ? `${classNamePrefix}__menu-list${isMulti ? ` ${classNamePrefix}__menu-list--is-multi` : ""}`
-            : "", style: menuListStyle, ref: list, outerRef: innerRef, estimatedItemSize: estimatedItemSize, innerElementType: React.forwardRef((_a, ref) => {
-            var { style } = _a, rest = __rest(_a, ["style"]);
-            return (React.createElement("div", Object.assign({ ref: ref, style: Object.assign(Object.assign({}, style), { height: `${parseFloat(style.height) + paddingBottom + paddingTop}px` }) }, rest)));
-        }), height: menuHeight, width: "100%", itemCount: itemCount, itemData: children, itemSize: (index) => measuredHeights[index] || heights[index] }, ({ data, index, style }) => {
-        return (React.createElement("div", { style: Object.assign(Object.assign({}, style), { top: `${parseFloat(style.top.toString()) + paddingTop}px` }) },
+            : "", style: menuListStyle, ref: list, outerRef: innerRef, estimatedItemSize: estimatedItemSize, innerElementType: React.forwardRef(({ style, ...rest }, ref) => (React.createElement("div", { ref: ref, style: {
+                ...style,
+                height: `${parseFloat(style.height) + paddingBottom + paddingTop}px`,
+            }, ...rest }))), height: menuHeight, width: "100%", itemCount: itemCount, itemData: children, itemSize: (index) => measuredHeights[index] || heights[index] }, ({ data, index, style }) => {
+        return (React.createElement("div", { style: {
+                ...style,
+                top: `${parseFloat(style.top.toString()) + paddingTop}px`,
+            } },
             React.createElement(MenuItem, { data: data[index], index: index, setMeasuredHeight: setMeasuredHeight })));
     }));
 }

package/dist/src/Select/Select.d.ts

@@ -10,7 +10,7 @@ export interface NDSOption {
     label: ReactNode;
     value: NDSOptionValue;
 }
-interface CustomProps<Option extends NDSOption, IsMulti extends boolean, Group extends GroupBase<Option>> extends StyledProps {
+export interface CustomProps<Option extends NDSOption, IsMulti extends boolean, Group extends GroupBase<Option>> extends StyledProps {
     autocomplete?: Props<Option, IsMulti, Group>["isSearchable"];
     labelText?: FieldLabelProps["labelText"];
     requirementText?: FieldLabelProps["requirementText"];
@@ -30,5 +30,5 @@ interface CustomProps<Option extends NDSOption, IsMulti extends boolean, Group e
     styles?: (selectStyles: StylesConfig<Option, IsMulti, Group>) => StylesConfig<Option, IsMulti, Group>;
 }
 export type NDSSelectProps<Option extends NDSOption = NDSOption, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>> = Omit<Props<Option, IsMulti, Group>, keyof CustomProps<Option, IsMulti, Group> | "isSearchable" | "isDisabled" | "defaultMenuIsOpen" | "isMulti" | "styles"> & CustomProps<Option, IsMulti, Group>;
-declare const NDSSelect: <Option extends NDSOption = NDSOption, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>(props: Omit<Props<Option, IsMulti, Group>, "isMulti" | "isDisabled" | "isSearchable" | "defaultMenuIsOpen" | keyof CustomProps<Option_1, IsMulti_1, Group_1>> & CustomProps<Option, IsMulti, Group> & React.RefAttributes<Select<Option, IsMulti, Group>>) => React.ReactElement;
+declare const NDSSelect: <Option extends NDSOption = NDSOption, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>(props: NDSSelectProps<Option, IsMulti, Group> & React.RefAttributes<Select<Option, IsMulti, Group>>) => React.ReactElement;
 export default NDSSelect;