reshaped 3.4.1 → 3.4.3

package/dist/components/Calendar/tests/Calendar.stories.js

@@ -1,6 +1,6 @@
+import { fn, expect, userEvent, within, waitFor } from "@storybook/test";
 import { Example } from "../../../utilities/storybook/index.js";
 import Calendar from "../index.js";
-import React from "react";
 export default {
     title: "Components/Calendar",
     component: Calendar,
@@ -10,29 +10,239 @@ export default {
         },
     },
 };
-export const base = () => (<Example>
-		<Example.Item title="base month">
-			<Calendar defaultMonth={new Date(2023, 11)} onChange={console.log}/>
-		</Example.Item>
-	</Example>);
-export const selection = () => (<Example>
-		<Example.Item title="single">
-			<Calendar defaultMonth={new Date(2023, 11)} defaultValue={new Date(2023, 11, 15)}/>
-		</Example.Item>
-		<Example.Item title="range">
-			<Calendar range defaultMonth={new Date(2023, 11)} defaultValue={{ start: new Date(2023, 11, 15), end: new Date(2023, 11, 18) }}/>
-		</Example.Item>
-	</Example>);
-export const boundaries = () => (<Example>
-		<Example.Item title="min">
-			<Calendar defaultMonth={new Date(2023, 11)} min={new Date(2023, 11, 4)}/>
-		</Example.Item>
-		<Example.Item title="max">
-			<Calendar defaultMonth={new Date(2023, 11)} max={new Date(2023, 11, 20)}/>
-		</Example.Item>
-	</Example>);
-export const translation = () => (<Example>
-		<Example.Item title="NL">
-			<Calendar defaultMonth={new Date(2023, 11)} renderMonthLabel={({ date }) => date.toLocaleDateString("nl", { month: "short" })} renderSelectedMonthLabel={({ date }) => date.toLocaleDateString("nl", { month: "long", year: "numeric" })} renderWeekDay={({ date }) => date.toLocaleDateString("nl", { weekday: "short" })}/>
-		</Example.Item>
-	</Example>);
+export const defaultMonth = {
+    name: "defaultMonth",
+    render: () => (<Example>
+			<Example.Item title="defaultMonth: 2020 January">
+				<Calendar defaultMonth={new Date(2020, 0)}/>
+			</Example.Item>
+		</Example>),
+    play: ({ canvas }) => {
+        const grid = canvas.getByRole("grid");
+        const gridCells = canvas.getAllByRole("gridcell");
+        const dates = canvas.getAllByRole("checkbox");
+        const [prevButton, monthButton, nextButton] = canvas.getAllByRole("button");
+        expect(grid).toBeInTheDocument();
+        expect(gridCells).toHaveLength(31);
+        expect(dates).toHaveLength(31);
+        const focusableDates = dates.filter((el) => {
+            return el.getAttribute("tabIndex") === "0";
+        });
+        // Defaults keyboard focus to the first day of the month
+        expect(focusableDates).toHaveLength(1);
+        expect(focusableDates[0]).toBe(dates[0]);
+        // Default Labels
+        expect(dates[0]).toHaveAccessibleName("Wednesday, January 1");
+        expect(prevButton).toHaveAccessibleName("Previous month");
+        expect(monthButton).toHaveAccessibleName("January 2020 Select a month");
+        expect(nextButton).toHaveAccessibleName("Next month");
+    },
+};
+export const uncontrolled = {
+    name: "defaultValue, range",
+    args: {
+        handleChange: fn(),
+    },
+    render: (args) => (<Example>
+			<Example.Item title="defaultValue">
+				<Calendar defaultMonth={new Date(2020, 0)} defaultValue={new Date(2020, 0, 10)} onChange={args.handleChange}/>
+			</Example.Item>
+			<Example.Item title="defaultValue, range">
+				<Calendar range defaultMonth={new Date(2020, 0)} defaultValue={{ start: new Date(2020, 0, 10), end: new Date(2020, 0, 15) }} onChange={args.handleChange}/>
+			</Example.Item>
+		</Example>),
+    play: async ({ canvas, args }) => {
+        const [singleCalendar, rangeCalendar] = canvas.getAllByRole("grid");
+        const singleCalendarDates = within(singleCalendar).getAllByRole("checkbox");
+        const rangeCalendarDates = within(rangeCalendar).getAllByRole("checkbox");
+        await userEvent.click(singleCalendarDates[7]);
+        expect(singleCalendarDates[7]).toBeChecked();
+        expect(args.handleChange).toHaveBeenCalledTimes(1);
+        expect(args.handleChange).toHaveBeenLastCalledWith({ value: new Date(2020, 0, 8) });
+        await userEvent.click(rangeCalendarDates[7]);
+        expect(rangeCalendarDates[7]).toBeChecked();
+        expect(args.handleChange).toHaveBeenCalledTimes(2);
+        expect(args.handleChange).toHaveBeenLastCalledWith({
+            value: { start: new Date(2020, 0, 8), end: null },
+        });
+        // While selecting end value, clicking on a date < start value should change the start value
+        await userEvent.click(rangeCalendarDates[6]);
+        expect(rangeCalendarDates[6]).toBeChecked();
+        expect(rangeCalendarDates[7]).not.toBeChecked();
+        expect(args.handleChange).toHaveBeenCalledTimes(3);
+        expect(args.handleChange).toHaveBeenLastCalledWith({
+            value: { start: new Date(2020, 0, 7), end: null },
+        });
+        await userEvent.click(rangeCalendarDates[10]);
+        expect(args.handleChange).toHaveBeenCalledTimes(4);
+        expect(args.handleChange).toHaveBeenLastCalledWith({
+            value: { start: new Date(2020, 0, 7), end: new Date(2020, 0, 11) },
+        });
+        for (let i = 6; i < 10; i++) {
+            expect(rangeCalendarDates[i]).toBeChecked();
+        }
+    },
+};
+export const controlled = {
+    name: "value, range",
+    args: {
+        handleChange: fn(),
+    },
+    render: (args) => (<Example>
+			<Example.Item title="value">
+				<Calendar defaultMonth={new Date(2020, 0)} value={new Date(2020, 0, 10)} onChange={args.handleChange}/>
+			</Example.Item>
+			<Example.Item title="defaultValue, range">
+				<Calendar range defaultMonth={new Date(2020, 0)} value={{ start: new Date(2020, 0, 10), end: new Date(2020, 0, 15) }} onChange={args.handleChange}/>
+			</Example.Item>
+		</Example>),
+    play: async ({ canvas, args }) => {
+        const [singleCalendar, rangeCalendar] = canvas.getAllByRole("grid");
+        const singleCalendarDates = within(singleCalendar).getAllByRole("checkbox");
+        const rangeCalendarDates = within(rangeCalendar).getAllByRole("checkbox");
+        await userEvent.click(singleCalendarDates[7]);
+        expect(singleCalendarDates[7]).not.toBeChecked();
+        expect(singleCalendarDates[9]).toBeChecked();
+        expect(args.handleChange).toHaveBeenCalledTimes(1);
+        expect(args.handleChange).toHaveBeenLastCalledWith({ value: new Date(2020, 0, 8) });
+        await userEvent.click(rangeCalendarDates[7]);
+        expect(rangeCalendarDates[7]).not.toBeChecked();
+        expect(rangeCalendarDates[9]).toBeChecked();
+        expect(args.handleChange).toHaveBeenCalledTimes(2);
+        expect(args.handleChange).toHaveBeenLastCalledWith({
+            value: { start: new Date(2020, 0, 8), end: null },
+        });
+        // While selecting end value, clicking on a date < start value should change the start value
+        await userEvent.click(rangeCalendarDates[6]);
+        expect(rangeCalendarDates[6]).not.toBeChecked();
+        expect(rangeCalendarDates[9]).toBeChecked();
+        expect(args.handleChange).toHaveBeenCalledTimes(3);
+        expect(args.handleChange).toHaveBeenLastCalledWith({
+            value: { start: new Date(2020, 0, 7), end: null },
+        });
+        // In controlled mode, clicking on a date > startValue still changes startValue since we're not updating the state
+        await userEvent.click(rangeCalendarDates[10]);
+        expect(args.handleChange).toHaveBeenCalledTimes(4);
+        expect(args.handleChange).toHaveBeenLastCalledWith({
+            value: { start: new Date(2020, 0, 11), end: null },
+        });
+        expect(rangeCalendarDates[6]).not.toBeChecked();
+        expect(rangeCalendarDates[9]).toBeChecked();
+    },
+};
+export const selectedDates = {
+    name: "selectedDates",
+    render: () => (<Example>
+			<Example.Item title="selectedDates: [4,8]">
+				<Calendar defaultMonth={new Date(2020, 0)} value={null} selectedDates={[new Date(2020, 0, 4), new Date(2020, 0, 8)]}/>
+			</Example.Item>
+		</Example>),
+    play: ({ canvas }) => {
+        const dates = canvas.getAllByRole("checkbox");
+        expect(dates[3]).toBeChecked();
+        expect(dates[7]).toBeChecked();
+    },
+};
+export const minMax = {
+    name: "min, max",
+    render: () => (<Example>
+			<Example.Item title="min: 4, max: 20">
+				<Calendar defaultMonth={new Date(2020, 0)} min={new Date(2020, 0, 4)} max={new Date(2020, 0, 20)}/>
+			</Example.Item>
+		</Example>),
+    play: ({ canvas }) => {
+        const dates = canvas.getAllByRole("checkbox");
+        expect(dates).toHaveLength(17);
+    },
+};
+export const firstWeekDay = {
+    name: "firstWeekDay",
+    render: () => (<Example>
+			<Example.Item title="firstWeekDay: 3 (Wed)">
+				<Calendar defaultMonth={new Date(2020, 0)} firstWeekDay={3}/>
+			</Example.Item>
+		</Example>),
+};
+export const translation = {
+    name: "render functions",
+    render: () => (<Example>
+			<Example.Item title="translated to NL">
+				<Calendar defaultMonth={new Date(2020, 0)} renderMonthLabel={({ date }) => date.toLocaleDateString("nl", { month: "short" })} renderSelectedMonthLabel={({ date }) => date.toLocaleDateString("nl", { month: "long", year: "numeric" })} renderWeekDay={({ date }) => date.toLocaleDateString("nl", { weekday: "short" })}/>
+			</Example.Item>
+		</Example>),
+};
+export const ariaLabels = {
+    name: "aria labels",
+    render: () => (<Example>
+			<Example.Item title="aria labels">
+				<Calendar defaultMonth={new Date(2020, 0)} nextYearAriaLabel="Test next year" nextMonthAriaLabel="Test next month" renderDateAriaLabel={() => "Test date"} renderMonthAriaLabel={() => "Test month"} previousYearAriaLabel="Test previous year" previousMonthAriaLabel="Test previous month" monthSelectionAriaLabel="Test month selection"/>
+			</Example.Item>
+		</Example>),
+    play: async ({ canvas }) => {
+        const buttonEls = canvas.getAllByRole("button");
+        const dateEls = canvas.getAllByRole("checkbox");
+        expect(buttonEls[0]).toHaveAttribute("aria-label", "Test previous month");
+        expect(buttonEls[1]).toHaveTextContent("Test month selection");
+        expect(buttonEls[2]).toHaveAttribute("aria-label", "Test next month");
+        expect(dateEls[0]).toHaveAttribute("aria-label", "Test date");
+        await userEvent.click(buttonEls[1], { delay: null });
+        const yearButtonEls = canvas.getAllByRole("button");
+        expect(yearButtonEls[0]).toHaveAttribute("aria-label", "Test previous year");
+        expect(yearButtonEls[1]).toHaveAttribute("aria-label", "Test next year");
+        expect(yearButtonEls[2]).toHaveAttribute("aria-label", "Test month");
+    },
+};
+export const monthSelection = {
+    name: "test: month selection",
+    render: () => (<Example>
+			<Example.Item title="month selection">
+				<Calendar defaultMonth={new Date(2020, 1)}/>
+			</Example.Item>
+		</Example>),
+    play: async ({ canvas }) => {
+        let buttons = canvas.getAllByRole("button");
+        let monthButton = buttons[1];
+        expect(monthButton).toHaveAccessibleName("February 2020 Select a month");
+        await userEvent.click(monthButton);
+        let months = canvas.getAllByRole("button").filter((el) => el.hasAttribute("data-rs-date"));
+        expect(months).toHaveLength(12);
+        await userEvent.click(months[0]);
+        buttons = canvas.getAllByRole("button");
+        months = buttons.filter((el) => el.hasAttribute("data-rs-date"));
+        monthButton = buttons[1];
+        expect(months).toHaveLength(0);
+        expect(monthButton).toHaveAccessibleName("January 2020 Select a month");
+    },
+};
+export const keyboardNavigation = {
+    name: "test: keyboard navigation",
+    render: () => (<Example>
+			<Example.Item title="keyboard navigation">
+				<Calendar defaultMonth={new Date(2020, 0)}/>
+			</Example.Item>
+		</Example>),
+    play: async ({ canvas }) => {
+        const dateEls = canvas.getAllByRole("checkbox");
+        dateEls[0].focus();
+        await userEvent.keyboard("{ArrowRight/}");
+        waitFor(() => {
+            expect(document.activeElement).toHaveAttribute("data-rs-date", "2020-01-02");
+        });
+        await userEvent.keyboard("{ArrowLeft/}");
+        waitFor(() => {
+            expect(document.activeElement).toHaveAttribute("data-rs-date", "2020-01-01");
+        });
+        await userEvent.keyboard("{ArrowDown/}");
+        waitFor(() => {
+            expect(document.activeElement).toHaveAttribute("data-rs-date", "2020-01-08");
+        });
+        await userEvent.keyboard("{ArrowUp/}");
+        waitFor(() => {
+            expect(document.activeElement).toHaveAttribute("data-rs-date", "2020-01-01");
+        });
+        await userEvent.keyboard("{ArrowUp/}");
+        waitFor(() => {
+            expect(document.activeElement).toHaveAttribute("data-rs-date", "2019-12-25");
+        });
+    },
+};

package/dist/components/Card/Card.d.ts

@@ -9,7 +9,7 @@ declare const Card: React.ForwardRefExoticComponent<{
     href?: string;
     as?: keyof React.JSX.IntrinsicElements | undefined;
     className?: import("../../types/global").ClassName;
-    attributes?: (import("../../types/global").Attributes<keyof React.JSX.IntrinsicElements> & ((import("../../types/global").Attributes<"button"> & Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "form" | "slot" | "style" | "title" | "disabled" | "className" | "color" | "hidden" | "content" | "ref" | "children" | "onToggle" | "value" | "type" | "key" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "id" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "popover" | "popoverTargetAction" | "popoverTarget" | "inert" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "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-rowindextext" | "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" | "onResize" | "onResizeCapture" | "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" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onBeforeToggle" | "onTransitionCancel" | "onTransitionCancelCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onTransitionRun" | "onTransitionRunCapture" | "onTransitionStart" | "onTransitionStartCapture"> & {
+    attributes?: (import("../../types/global").Attributes<keyof React.JSX.IntrinsicElements> & ((import("../../types/global").Attributes<"button"> & Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "form" | "slot" | "style" | "title" | "disabled" | "className" | "color" | "hidden" | "content" | "ref" | "children" | "onToggle" | "value" | "type" | "key" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "id" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "popover" | "popoverTargetAction" | "popoverTarget" | "inert" | "inputMode" | "is" | "exportparts" | "part" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "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-rowindextext" | "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" | "onResize" | "onResizeCapture" | "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" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onScrollEnd" | "onScrollEndCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onBeforeToggle" | "onTransitionCancel" | "onTransitionCancelCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onTransitionRun" | "onTransitionRunCapture" | "onTransitionStart" | "onTransitionStartCapture"> & {
         ref?: React.RefObject<HTMLButtonElement | HTMLAnchorElement | null>;
     }) | undefined)) | undefined;
 } & Pick<import("../View").ViewProps, "height"> & React.RefAttributes<HTMLElement>>;

package/dist/components/Card/Card.js

@@ -10,10 +10,8 @@ import getHeightStyles from "../../styles/height/index.js";
 const Card = forwardRef((props, ref) => {
     const { padding = 4 } = props;
     const { selected, elevated, bleed, height, onClick, href, children, className, attributes, 
-    /**
-     * Using any here to let TS save on type resolving, otherwise TS throws an error due to the type complexity
-     * It still resolves the attributes correctly based on the tag
-     */
+    // Using any here to let TS save on type resolving, otherwise TS throws an error due to the type complexity
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     as: TagName = "div", } = props;
     const isActionable = !!href || !!onClick;
     const radiusStyles = getRadiusStyles("medium");
@@ -32,4 +30,5 @@ const Card = forwardRef((props, ref) => {
     }
     return (_jsx(TagName, { ...attributes, onClick: onClick, href: href, ref: ref, className: rootClassNames, style: style, children: _jsx("span", { className: s.content, children: children }) }));
 });
+Card.displayName = "Card";
 export default Card;

package/dist/components/Card/tests/Card.stories.d.ts

@@ -11,7 +11,7 @@ declare const _default: {
         href?: string;
         as?: keyof React.JSX.IntrinsicElements | undefined;
         className?: import("../../../types/global").ClassName;
-        attributes?: (import("../../../types/global").Attributes<keyof React.JSX.IntrinsicElements> & ((import("../../../types/global").Attributes<"button"> & Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "children" | "ref" | "style" | "form" | "slot" | "title" | "disabled" | "color" | "className" | "hidden" | "content" | "aria-orientation" | "role" | "suppressHydrationWarning" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "value" | "dir" | "name" | "key" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "draggable" | "enterKeyHint" | "nonce" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "popover" | "popoverTargetAction" | "popoverTarget" | "inert" | "inputMode" | "is" | "onToggle" | "type" | "id" | "lang" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "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-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "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" | "onResize" | "onResizeCapture" | "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" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onBeforeToggle" | "onTransitionCancel" | "onTransitionCancelCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onTransitionRun" | "onTransitionRunCapture" | "onTransitionStart" | "onTransitionStartCapture"> & {
+        attributes?: (import("../../../types/global").Attributes<keyof React.JSX.IntrinsicElements> & ((import("../../../types/global").Attributes<"button"> & Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "children" | "ref" | "style" | "form" | "slot" | "title" | "disabled" | "color" | "className" | "hidden" | "content" | "aria-orientation" | "role" | "suppressHydrationWarning" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "value" | "dir" | "name" | "key" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "draggable" | "enterKeyHint" | "nonce" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "popover" | "popoverTargetAction" | "popoverTarget" | "inert" | "inputMode" | "is" | "exportparts" | "part" | "onToggle" | "type" | "id" | "lang" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "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-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "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" | "onResize" | "onResizeCapture" | "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" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onScrollEnd" | "onScrollEndCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onBeforeToggle" | "onTransitionCancel" | "onTransitionCancelCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onTransitionRun" | "onTransitionRunCapture" | "onTransitionStart" | "onTransitionStartCapture"> & {
             ref?: React.RefObject<HTMLButtonElement | HTMLAnchorElement | null>;
         }) | undefined)) | undefined;
     } & Pick<import("../../View").ViewProps, "height"> & React.RefAttributes<HTMLElement>>;

package/dist/components/Card/tests/Card.test.stories.d.ts

@@ -13,7 +13,7 @@ declare const _default: {
         href?: string;
         as?: keyof React.JSX.IntrinsicElements | undefined;
         className?: import("../../../types/global").ClassName;
-        attributes?: (import("../../../types/global").Attributes<keyof React.JSX.IntrinsicElements> & ((import("../../../types/global").Attributes<"button"> & Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "children" | "ref" | "style" | "form" | "slot" | "title" | "disabled" | "color" | "className" | "hidden" | "content" | "aria-orientation" | "role" | "suppressHydrationWarning" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "value" | "dir" | "name" | "key" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "draggable" | "enterKeyHint" | "nonce" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "popover" | "popoverTargetAction" | "popoverTarget" | "inert" | "inputMode" | "is" | "onToggle" | "type" | "id" | "lang" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "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-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "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" | "onResize" | "onResizeCapture" | "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" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onBeforeToggle" | "onTransitionCancel" | "onTransitionCancelCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onTransitionRun" | "onTransitionRunCapture" | "onTransitionStart" | "onTransitionStartCapture"> & {
+        attributes?: (import("../../../types/global").Attributes<keyof React.JSX.IntrinsicElements> & ((import("../../../types/global").Attributes<"button"> & Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "children" | "ref" | "style" | "form" | "slot" | "title" | "disabled" | "color" | "className" | "hidden" | "content" | "aria-orientation" | "role" | "suppressHydrationWarning" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "value" | "dir" | "name" | "key" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "draggable" | "enterKeyHint" | "nonce" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "popover" | "popoverTargetAction" | "popoverTarget" | "inert" | "inputMode" | "is" | "exportparts" | "part" | "onToggle" | "type" | "id" | "lang" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "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-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "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" | "onResize" | "onResizeCapture" | "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" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onScrollEnd" | "onScrollEndCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onBeforeToggle" | "onTransitionCancel" | "onTransitionCancelCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onTransitionRun" | "onTransitionRunCapture" | "onTransitionStart" | "onTransitionStartCapture"> & {
             ref?: React.RefObject<HTMLButtonElement | HTMLAnchorElement | null>;
         }) | undefined)) | undefined;
     } & Pick<import("../../View").ViewProps, "height"> & React.RefAttributes<HTMLElement>>;

package/dist/components/Carousel/Carousel.d.ts

@@ -1,3 +1,6 @@
 import * as T from "./Carousel.types";
-declare const Carousel: (props: T.Props) => import("react/jsx-runtime").JSX.Element;
+declare const Carousel: {
+    (props: T.Props): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export default Carousel;

package/dist/components/Carousel/Carousel.js

@@ -6,7 +6,6 @@ import View from "../View/index.js";
 import useRTL from "../../hooks/useRTL.js";
 import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";
 import CarouselControl from "./CarouselControl.js";
-import * as T from "./Carousel.types.js";
 import s from "./Carousel.module.css";
 const Carousel = (props) => {
     const { children, gap = 3, visibleItems, bleed, navigationDisplay, onChange, onScroll, instanceRef, className, attributes, } = props;
@@ -112,6 +111,7 @@ const Carousel = (props) => {
             ...responsiveVariables("--rs-carousel-items", visibleItems),
             ...responsiveVariables("--rs-carousel-bleed", bleed),
             ...attributes?.style,
-        }, children: [navigationDisplay !== "hidden" && (_jsxs(_Fragment, { children: [_jsx(CarouselControl, { isRTL: isRTL, type: T.ControlType.back, scrollElRef: scrollElRef, scrollPosition: scrollPosition, onClick: navigateBack, mounted: mounted }), _jsx(CarouselControl, { isRTL: isRTL, type: T.ControlType.forward, scrollElRef: scrollElRef, scrollPosition: scrollPosition, onClick: navigateForward, mounted: mounted })] })), _jsx(View, { as: "ul", direction: "row", wrap: false, gap: gap, className: s.scroll, attributes: { ref: scrollElRef, onScroll: handleScroll }, children: React.Children.map(children, (child, index) => (_jsx(View.Item, { className: s.item, as: "li", attributes: { ref: (el) => handleItemRef(el, index) }, children: child }))) })] }));
+        }, children: [navigationDisplay !== "hidden" && (_jsxs(_Fragment, { children: [_jsx(CarouselControl, { isRTL: isRTL, type: "back", scrollElRef: scrollElRef, scrollPosition: scrollPosition, onClick: navigateBack, mounted: mounted }), _jsx(CarouselControl, { isRTL: isRTL, type: "forward", scrollElRef: scrollElRef, scrollPosition: scrollPosition, onClick: navigateForward, mounted: mounted })] })), _jsx(View, { as: "ul", direction: "row", wrap: false, gap: gap, className: s.scroll, attributes: { ref: scrollElRef, onScroll: handleScroll }, children: React.Children.map(children, (child, index) => (_jsx(View.Item, { className: s.item, as: "li", attributes: { ref: (el) => handleItemRef(el, index) }, children: child }))) })] }));
 };
+Carousel.displayName = "Carousel";
 export default Carousel;

package/dist/components/Carousel/Carousel.types.d.ts

@@ -5,12 +5,8 @@ export type Instance = {
     navigateForward: () => void;
     navigateTo: (index: number) => void;
 } | undefined;
-export declare enum ControlType {
-    back = "back",
-    forward = "forward"
-}
 export type ControlProps = {
-    type: ControlType;
+    type: "back" | "forward";
     scrollElRef: React.RefObject<HTMLElement | null>;
     scrollPosition: number;
     onClick: () => void;

package/dist/components/Carousel/Carousel.types.js

@@ -1,5 +1 @@
-export var ControlType;
-(function (ControlType) {
-    ControlType["back"] = "back";
-    ControlType["forward"] = "forward";
-})(ControlType || (ControlType = {}));
+export {};

package/dist/components/Carousel/CarouselControl.d.ts

@@ -1,3 +1,6 @@
 import * as T from "./Carousel.types";
-declare const CarouselControl: (props: T.ControlProps) => import("react/jsx-runtime").JSX.Element;
+declare const CarouselControl: {
+    (props: T.ControlProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export default CarouselControl;

package/dist/components/Carousel/CarouselControl.js

@@ -6,14 +6,13 @@ import Button from "../Button/index.js";
 import IconChevronRight from "../../icons/ChevronRight.js";
 import IconChevronLeft from "../../icons/ChevronLeft.js";
 import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";
-import * as T from "./Carousel.types.js";
 import s from "./Carousel.module.css";
 const CarouselControl = (props) => {
     const { type, scrollElRef, scrollPosition, onClick, isRTL, mounted } = props;
     const [visible, setVisible] = React.useState(false);
     const [rendered, setRendered] = React.useState(false);
-    const isNext = type === T.ControlType.forward;
-    const isDisplayedAsNext = type === (isRTL ? T.ControlType.back : T.ControlType.forward);
+    const isNext = type === "forward";
+    const isDisplayedAsNext = type === (isRTL ? "back" : "forward");
     const controlClassNames = classNames(s.control, isDisplayedAsNext ? s["--control-next"] : s["--control-prev"], visible && s["--control-visible"], rendered && s["--control-rendered"]);
     useIsomorphicLayoutEffect(() => {
         const scrollEl = scrollElRef.current;
@@ -39,4 +38,5 @@ const CarouselControl = (props) => {
     }, [scrollPosition, scrollElRef, mounted, isNext]);
     return (_jsx("div", { className: controlClassNames, children: _jsx(Button, { onClick: onClick, icon: isDisplayedAsNext ? IconChevronRight : IconChevronLeft, rounded: true, variant: "outline", elevated: true, attributes: { "aria-disabled": !visible, "aria-hidden": true } }) }));
 };
+CarouselControl.displayName = "CarouselControl";
 export default CarouselControl;

package/dist/components/Carousel/tests/Carousel.stories.d.ts

@@ -3,7 +3,10 @@ import { StoryObj } from "@storybook/react";
 import { fn } from "@storybook/test";
 declare const _default: {
     title: string;
-    component: (props: import("./..").CarouselProps) => React.JSX.Element;
+    component: {
+        (props: import("./..").CarouselProps): React.JSX.Element;
+        displayName: string;
+    };
     parameters: {
         a11y: {
             disable: boolean;

package/dist/components/Checkbox/Checkbox.d.ts

@@ -1,3 +1,6 @@
 import type * as T from "./Checkbox.types";
-declare const Checkbox: (props: T.Props) => import("react/jsx-runtime").JSX.Element;
+declare const Checkbox: {
+    (props: T.Props): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export default Checkbox;

package/dist/components/Checkbox/Checkbox.js

@@ -38,4 +38,5 @@ const Checkbox = (props) => {
                             ref: inputRef,
                         } }), _jsx("div", { className: s.decorator, children: _jsx(Icon, { svg: IconCheckmark, className: s.icon }) })] }), children && _jsx("span", { className: s.text, children: children })] }));
 };
+Checkbox.displayName = "Checkbox";
 export default Checkbox;

package/dist/components/Checkbox/tests/Checkbox.stories.d.ts

@@ -1,6 +1,9 @@
 declare const _default: {
     title: string;
-    component: (props: import("./..").CheckboxProps) => import("react").JSX.Element;
+    component: {
+        (props: import("./..").CheckboxProps): import("react").JSX.Element;
+        displayName: string;
+    };
     parameters: {
         iframe: {
             url: string;

package/dist/components/Checkbox/tests/Checkbox.test.stories.d.ts

@@ -2,7 +2,10 @@ import { StoryObj } from "@storybook/react";
 import { fn } from "@storybook/test";
 declare const _default: {
     title: string;
-    component: (props: import("./..").CheckboxProps) => import("react").JSX.Element;
+    component: {
+        (props: import("./..").CheckboxProps): import("react").JSX.Element;
+        displayName: string;
+    };
     parameters: {
         iframe: {
             url: string;

package/dist/components/CheckboxGroup/CheckboxGroup.d.ts

@@ -1,3 +1,6 @@
 import type * as T from "./CheckboxGroup.types";
-declare const CheckboxGroup: (props: T.Props) => import("react/jsx-runtime").JSX.Element;
+declare const CheckboxGroup: {
+    (props: T.Props): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export default CheckboxGroup;

package/dist/components/CheckboxGroup/CheckboxGroup.js

@@ -7,4 +7,5 @@ const CheckboxGroup = (props) => {
         return _jsx(CheckboxGroupControlled, { ...props });
     return _jsx(CheckboxGroupUncontrolled, { ...props });
 };
+CheckboxGroup.displayName = "CheckboxGroup";
 export default CheckboxGroup;

package/dist/components/CheckboxGroup/CheckboxGroupControlled.d.ts

@@ -1,3 +1,6 @@
 import type * as T from "./CheckboxGroup.types";
-declare const CheckboxGroupControlled: (props: T.ControlledProps) => import("react/jsx-runtime").JSX.Element;
+declare const CheckboxGroupControlled: {
+    (props: T.ControlledProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export default CheckboxGroupControlled;

package/dist/components/CheckboxGroup/CheckboxGroupControlled.js

@@ -19,4 +19,5 @@ const CheckboxGroupControlled = (props) => {
     };
     return (_jsx(Context.Provider, { value: { onChange: handleChange, disabled, value, name, hasError }, children: children }));
 };
+CheckboxGroupControlled.displayName = "CheckboxGroupControlled";
 export default CheckboxGroupControlled;

package/dist/components/CheckboxGroup/CheckboxGroupUncontrolled.d.ts

@@ -1,3 +1,6 @@
 import type * as T from "./CheckboxGroup.types";
-declare const CheckboxGroupUncontrolled: (props: T.UncontrolledProps) => import("react/jsx-runtime").JSX.Element;
+declare const CheckboxGroupUncontrolled: {
+    (props: T.UncontrolledProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export default CheckboxGroupUncontrolled;

package/dist/components/CheckboxGroup/CheckboxGroupUncontrolled.js

@@ -14,4 +14,5 @@ const CheckboxGroupUncontrolled = (props) => {
     };
     return (_jsx(CheckboxGroupControlled, { ...props, value: value, defaultValue: undefined, onChange: handleChange }));
 };
+CheckboxGroupUncontrolled.displayName = "CheckboxGroupUncontrolled";
 export default CheckboxGroupUncontrolled;