reshaped 4.2.0 → 4.3.0-canary.1

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

@@ -1,355 +1,364 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.keyboardNavigation = exports.monthSelection = exports.ariaLabels = exports.translation = exports.firstWeekDay = exports.minMax = exports.disabledDates = exports.selectedDates = exports.renderDate = exports.monthsToRender = exports.controlled = exports.uncontrolled = exports.month = exports.base = void 0;
-const test_1 = require("storybook/test");
-const Calendar_1 = __importDefault(require("../../../components/Calendar"));
-const Text_1 = __importDefault(require("../../../components/Text"));
-const storybook_1 = require("../../../utilities/storybook");
-exports.default = {
+import { expect, fn, userEvent, waitFor, within } from "storybook/test";
+import Calendar from "../../../components/Calendar/index.js";
+import Text from "../../../components/Text/index.js";
+import { Example } from "../../../utilities/storybook/index.js";
+export default {
     title: "Components/Calendar",
-    component: Calendar_1.default,
+    component: Calendar,
     parameters: {
         iframe: {
             url: "https://reshaped.so/docs/components/calendar",
         },
     },
 };
-exports.base = {
+export const base = {
     name: "base",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="defaultMonth: 2020 January">
-				<Calendar_1.default defaultMonth={new Date(2020, 0)} range/>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+    render: () => (<Example>
+			<Example.Item title="defaultMonth: 2020 January">
+				<Calendar defaultMonth={new Date(2020, 0)} range/>
+			</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");
-        (0, test_1.expect)(grid).toBeInTheDocument();
-        (0, test_1.expect)(gridCells).toHaveLength(31);
-        (0, test_1.expect)(dates).toHaveLength(31);
+        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
-        (0, test_1.expect)(focusableDates).toHaveLength(1);
-        (0, test_1.expect)(focusableDates[0]).toBe(dates[0]);
+        expect(focusableDates).toHaveLength(1);
+        expect(focusableDates[0]).toBe(dates[0]);
         // Default Labels
-        (0, test_1.expect)(dates[0]).toHaveAccessibleName("Wednesday, January 1");
-        (0, test_1.expect)(prevButton).toHaveAccessibleName("Previous month");
-        (0, test_1.expect)(monthButton).toHaveAccessibleName("January 2020 Select a month");
-        (0, test_1.expect)(nextButton).toHaveAccessibleName("Next month");
+        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 today = {
+    name: "today",
+    render: () => (<Example>
+			<Example.Item title="today's date is bold">
+				<Calendar />
+			</Example.Item>
+		</Example>),
+    play: ({ canvas }) => {
+        const now = new Date();
+        const dates = canvas.getAllByRole("checkbox");
+        const todayDates = dates.filter((el) => el.getAttribute("aria-current") === "date");
+        expect(todayDates).toHaveLength(1);
+        expect(todayDates[0]).toHaveTextContent(String(now.getDate()));
     },
 };
-exports.month = {
+export const month = {
     name: "defaultMonth, month, onMonthChange",
     args: {
-        handleDefaultMonthChange: (0, test_1.fn)(),
-        handleMonthChange: (0, test_1.fn)(),
+        handleDefaultMonthChange: fn(),
+        handleMonthChange: fn(),
     },
-    render: (args) => (<storybook_1.Example>
-			<storybook_1.Example.Item title="defaultMonth: 2020 January">
-				<Calendar_1.default defaultMonth={new Date(2020, 0)} onMonthChange={args.handleDefaultMonthChange}/>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="month: 2020 January">
-				<Calendar_1.default month={new Date(2020, 0)} onMonthChange={args.handleMonthChange}/>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+    render: (args) => (<Example>
+			<Example.Item title="defaultMonth: 2020 January">
+				<Calendar defaultMonth={new Date(2020, 0)} onMonthChange={args.handleDefaultMonthChange}/>
+			</Example.Item>
+			<Example.Item title="month: 2020 January">
+				<Calendar month={new Date(2020, 0)} onMonthChange={args.handleMonthChange}/>
+			</Example.Item>
+		</Example>),
     play: async ({ canvas, args }) => {
         const [prevButton, monthButton, nextButton, prevButtonControlled, monthButtonControlled, nextButtonControlled,] = canvas.getAllByRole("button");
         // Uncontrolled
-        await test_1.userEvent.click(prevButton);
-        (0, test_1.expect)(args.handleDefaultMonthChange).toHaveBeenCalledTimes(1);
-        (0, test_1.expect)(args.handleDefaultMonthChange).toHaveBeenLastCalledWith({ date: new Date(2019, 11) });
-        await test_1.userEvent.click(nextButton);
-        (0, test_1.expect)(args.handleDefaultMonthChange).toHaveBeenCalledTimes(2);
-        (0, test_1.expect)(args.handleDefaultMonthChange).toHaveBeenLastCalledWith({ date: new Date(2020, 0) });
-        await test_1.userEvent.click(monthButton);
+        await userEvent.click(prevButton);
+        expect(args.handleDefaultMonthChange).toHaveBeenCalledTimes(1);
+        expect(args.handleDefaultMonthChange).toHaveBeenLastCalledWith({ date: new Date(2019, 11) });
+        await userEvent.click(nextButton);
+        expect(args.handleDefaultMonthChange).toHaveBeenCalledTimes(2);
+        expect(args.handleDefaultMonthChange).toHaveBeenLastCalledWith({ date: new Date(2020, 0) });
+        await userEvent.click(monthButton);
         const [grid] = canvas.getAllByRole("grid");
-        const months = (0, test_1.within)(grid)
+        const months = within(grid)
             .getAllByRole("button")
             .filter((el) => el.hasAttribute("data-rs-date"));
-        await test_1.userEvent.click(months[3]);
-        (0, test_1.expect)(args.handleDefaultMonthChange).toHaveBeenCalledTimes(3);
-        (0, test_1.expect)(args.handleDefaultMonthChange).toHaveBeenLastCalledWith({ date: new Date(2020, 3) });
+        await userEvent.click(months[3]);
+        expect(args.handleDefaultMonthChange).toHaveBeenCalledTimes(3);
+        expect(args.handleDefaultMonthChange).toHaveBeenLastCalledWith({ date: new Date(2020, 3) });
         // Controlled
-        await test_1.userEvent.click(prevButtonControlled);
-        (0, test_1.expect)(args.handleMonthChange).toHaveBeenCalledTimes(1);
-        (0, test_1.expect)(args.handleMonthChange).toHaveBeenLastCalledWith({ date: new Date(2019, 11) });
-        await test_1.userEvent.click(nextButtonControlled);
-        (0, test_1.expect)(args.handleMonthChange).toHaveBeenCalledTimes(2);
-        (0, test_1.expect)(args.handleMonthChange).toHaveBeenLastCalledWith({ date: new Date(2020, 1) });
-        await test_1.userEvent.click(monthButtonControlled);
+        await userEvent.click(prevButtonControlled);
+        expect(args.handleMonthChange).toHaveBeenCalledTimes(1);
+        expect(args.handleMonthChange).toHaveBeenLastCalledWith({ date: new Date(2019, 11) });
+        await userEvent.click(nextButtonControlled);
+        expect(args.handleMonthChange).toHaveBeenCalledTimes(2);
+        expect(args.handleMonthChange).toHaveBeenLastCalledWith({ date: new Date(2020, 1) });
+        await userEvent.click(monthButtonControlled);
         const [, gridControlled] = canvas.getAllByRole("grid");
-        const monthsControlled = (0, test_1.within)(gridControlled)
+        const monthsControlled = within(gridControlled)
             .getAllByRole("button")
             .filter((el) => el.hasAttribute("data-rs-date"));
-        await test_1.userEvent.click(monthsControlled[3]);
-        (0, test_1.expect)(args.handleMonthChange).toHaveBeenCalledTimes(3);
-        (0, test_1.expect)(args.handleMonthChange).toHaveBeenLastCalledWith({ date: new Date(2020, 3) });
+        await userEvent.click(monthsControlled[3]);
+        expect(args.handleMonthChange).toHaveBeenCalledTimes(3);
+        expect(args.handleMonthChange).toHaveBeenLastCalledWith({ date: new Date(2020, 3) });
     },
 };
-exports.uncontrolled = {
+export const uncontrolled = {
     name: "defaultValue, range",
     args: {
-        handleChange: (0, test_1.fn)(),
+        handleChange: fn(),
     },
-    render: (args) => (<storybook_1.Example>
-			<storybook_1.Example.Item title="defaultValue">
-				<Calendar_1.default defaultMonth={new Date(2020, 0)} defaultValue={new Date(2020, 0, 10)} onChange={args.handleChange}/>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="defaultValue, range">
-				<Calendar_1.default range defaultMonth={new Date(2020, 0)} defaultValue={{ start: new Date(2020, 0, 10), end: new Date(2020, 0, 15) }} onChange={args.handleChange}/>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+    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 = (0, test_1.within)(singleCalendar).getAllByRole("checkbox");
-        const rangeCalendarDates = (0, test_1.within)(rangeCalendar).getAllByRole("checkbox");
-        await test_1.userEvent.click(singleCalendarDates[7]);
-        (0, test_1.expect)(singleCalendarDates[7]).toBeChecked();
-        (0, test_1.expect)(args.handleChange).toHaveBeenCalledTimes(1);
-        (0, test_1.expect)(args.handleChange).toHaveBeenLastCalledWith({ value: new Date(2020, 0, 8) });
-        await test_1.userEvent.click(rangeCalendarDates[7]);
-        (0, test_1.expect)(rangeCalendarDates[7]).toBeChecked();
-        (0, test_1.expect)(args.handleChange).toHaveBeenCalledTimes(2);
-        (0, test_1.expect)(args.handleChange).toHaveBeenLastCalledWith({
+        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 test_1.userEvent.click(rangeCalendarDates[6]);
-        (0, test_1.expect)(rangeCalendarDates[6]).toBeChecked();
-        (0, test_1.expect)(rangeCalendarDates[7]).not.toBeChecked();
-        (0, test_1.expect)(args.handleChange).toHaveBeenCalledTimes(3);
-        (0, test_1.expect)(args.handleChange).toHaveBeenLastCalledWith({
+        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 test_1.userEvent.click(rangeCalendarDates[10]);
-        (0, test_1.expect)(args.handleChange).toHaveBeenCalledTimes(4);
-        (0, test_1.expect)(args.handleChange).toHaveBeenLastCalledWith({
+        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++) {
-            (0, test_1.expect)(rangeCalendarDates[i]).toBeChecked();
+            expect(rangeCalendarDates[i]).toBeChecked();
         }
     },
 };
-exports.controlled = {
+export const controlled = {
     name: "value, range",
     args: {
-        handleChange: (0, test_1.fn)(),
+        handleChange: fn(),
     },
-    render: (args) => (<storybook_1.Example>
-			<storybook_1.Example.Item title="value">
-				<Calendar_1.default defaultMonth={new Date(2020, 0)} value={new Date(2020, 0, 10)} onChange={args.handleChange}/>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="defaultValue, range">
-				<Calendar_1.default range defaultMonth={new Date(2020, 0)} value={{ start: new Date(2020, 0, 10), end: new Date(2020, 0, 15) }} onChange={args.handleChange}/>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+    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 = (0, test_1.within)(singleCalendar).getAllByRole("checkbox");
-        const rangeCalendarDates = (0, test_1.within)(rangeCalendar).getAllByRole("checkbox");
-        await test_1.userEvent.click(singleCalendarDates[7]);
-        (0, test_1.expect)(singleCalendarDates[7]).not.toBeChecked();
-        (0, test_1.expect)(singleCalendarDates[9]).toBeChecked();
-        (0, test_1.expect)(args.handleChange).toHaveBeenCalledTimes(1);
-        (0, test_1.expect)(args.handleChange).toHaveBeenLastCalledWith({ value: new Date(2020, 0, 8) });
-        await test_1.userEvent.click(rangeCalendarDates[7]);
-        (0, test_1.expect)(rangeCalendarDates[7]).not.toBeChecked();
-        (0, test_1.expect)(rangeCalendarDates[9]).toBeChecked();
-        (0, test_1.expect)(args.handleChange).toHaveBeenCalledTimes(2);
-        (0, test_1.expect)(args.handleChange).toHaveBeenLastCalledWith({
+        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 test_1.userEvent.click(rangeCalendarDates[6]);
-        (0, test_1.expect)(rangeCalendarDates[6]).not.toBeChecked();
-        (0, test_1.expect)(rangeCalendarDates[9]).toBeChecked();
-        (0, test_1.expect)(args.handleChange).toHaveBeenCalledTimes(3);
-        (0, test_1.expect)(args.handleChange).toHaveBeenLastCalledWith({
+        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 test_1.userEvent.click(rangeCalendarDates[10]);
-        (0, test_1.expect)(args.handleChange).toHaveBeenCalledTimes(4);
-        (0, test_1.expect)(args.handleChange).toHaveBeenLastCalledWith({
+        await userEvent.click(rangeCalendarDates[10]);
+        expect(args.handleChange).toHaveBeenCalledTimes(4);
+        expect(args.handleChange).toHaveBeenLastCalledWith({
             value: { start: new Date(2020, 0, 11), end: null },
         });
-        (0, test_1.expect)(rangeCalendarDates[6]).not.toBeChecked();
-        (0, test_1.expect)(rangeCalendarDates[9]).toBeChecked();
+        expect(rangeCalendarDates[6]).not.toBeChecked();
+        expect(rangeCalendarDates[9]).toBeChecked();
     },
 };
-exports.monthsToRender = {
+export const monthsToRender = {
     name: "monthsToRender",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="monthsToRender: 2">
-				<Calendar_1.default defaultMonth={new Date(2020, 0)} monthsToRender={2} range/>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+    render: () => (<Example>
+			<Example.Item title="monthsToRender: 2">
+				<Calendar defaultMonth={new Date(2020, 0)} monthsToRender={2} range/>
+			</Example.Item>
+		</Example>),
 };
-exports.renderDate = {
+export const renderDate = {
     name: "renderDateSlot, renderDateValue",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="renderDateSlot">
-				<Calendar_1.default defaultMonth={new Date(2020, 0)} defaultValue={new Date(2020, 0, 10)} renderDateSlot={(args) => {
-            return (<Text_1.default color={args.selected
+    render: () => (<Example>
+			<Example.Item title="renderDateSlot">
+				<Calendar defaultMonth={new Date(2020, 0)} defaultValue={new Date(2020, 0, 10)} renderDateSlot={(args) => {
+            return (<Text color={args.selected
                     ? undefined
                     : args.date.getDate() < 15
                         ? "positive"
                         : "neutral-faded"} variant="caption-2">
 								{args.date.getDate() < 15 ? "$150" : "$200"}
-							</Text_1.default>);
+							</Text>);
         }}/>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="renderDateValue">
-				<Calendar_1.default defaultMonth={new Date(2020, 0)} defaultValue={new Date(2020, 0, 10)} renderDateValue={({ date }) => {
+			</Example.Item>
+			<Example.Item title="renderDateValue">
+				<Calendar defaultMonth={new Date(2020, 0)} defaultValue={new Date(2020, 0, 10)} renderDateValue={({ date }) => {
             const label = date.getDate();
-            return date.getDate() === 3 ? (<Text_1.default color="primary" weight="bold">
+            return date.getDate() === 3 ? (<Text color="primary" weight="bold">
 								{label}
-							</Text_1.default>) : (label);
+							</Text>) : (label);
         }}/>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+			</Example.Item>
+		</Example>),
 };
-exports.selectedDates = {
+export const selectedDates = {
     name: "selectedDates",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="selectedDates: [4,8]">
-				<Calendar_1.default defaultMonth={new Date(2020, 0)} value={null} selectedDates={[new Date(2020, 0, 4), new Date(2020, 0, 8)]}/>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+    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");
-        (0, test_1.expect)(dates[3]).toBeChecked();
-        (0, test_1.expect)(dates[7]).toBeChecked();
+        expect(dates[3]).toBeChecked();
+        expect(dates[7]).toBeChecked();
     },
 };
-exports.disabledDates = {
+export const disabledDates = {
     name: "disabledDates",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="disabledDates: [4,8]">
-				<Calendar_1.default defaultMonth={new Date(2020, 0)} value={null} disabledDates={[new Date(2020, 0, 4), new Date(2020, 0, 8)]}/>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+    render: () => (<Example>
+			<Example.Item title="disabledDates: [4,8]">
+				<Calendar defaultMonth={new Date(2020, 0)} value={null} disabledDates={[new Date(2020, 0, 4), new Date(2020, 0, 8)]}/>
+			</Example.Item>
+		</Example>),
     play: ({ canvas }) => {
         const dates = canvas.getAllByRole("checkbox", { hidden: true });
-        (0, test_1.expect)(dates[3]).toBeDisabled();
-        (0, test_1.expect)(dates[7]).toBeDisabled();
+        expect(dates[3]).toBeDisabled();
+        expect(dates[7]).toBeDisabled();
     },
 };
-exports.minMax = {
+export const minMax = {
     name: "min, max",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="min: 4, max: 20">
-				<Calendar_1.default defaultMonth={new Date(2020, 0)} min={new Date(2020, 0, 4)} max={new Date(2020, 0, 20)}/>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+    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");
-        (0, test_1.expect)(dates).toHaveLength(17);
+        expect(dates).toHaveLength(17);
     },
 };
-exports.firstWeekDay = {
+export const firstWeekDay = {
     name: "firstWeekDay",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="firstWeekDay: 3 (Wed)">
-				<Calendar_1.default defaultMonth={new Date(2020, 0)} firstWeekDay={3}/>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+    render: () => (<Example>
+			<Example.Item title="firstWeekDay: 3 (Wed)">
+				<Calendar defaultMonth={new Date(2020, 0)} firstWeekDay={3}/>
+			</Example.Item>
+		</Example>),
 };
-exports.translation = {
+export const translation = {
     name: "render functions",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="translated to NL">
-				<Calendar_1.default 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" })}/>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+    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>),
 };
-exports.ariaLabels = {
+export const ariaLabels = {
     name: "aria labels",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="aria labels">
-				<Calendar_1.default 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"/>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+    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");
-        (0, test_1.expect)(buttonEls[0]).toHaveAttribute("aria-label", "Test previous month");
-        (0, test_1.expect)(buttonEls[1]).toHaveTextContent("Test month selection");
-        (0, test_1.expect)(buttonEls[2]).toHaveAttribute("aria-label", "Test next month");
-        (0, test_1.expect)(dateEls[0]).toHaveAttribute("aria-label", "Test date");
-        await test_1.userEvent.click(buttonEls[1], { delay: null });
+        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");
-        (0, test_1.expect)(yearButtonEls[0]).toHaveAttribute("aria-label", "Test previous year");
-        (0, test_1.expect)(yearButtonEls[1]).toHaveAttribute("aria-label", "Test next year");
-        (0, test_1.expect)(yearButtonEls[2]).toHaveAttribute("aria-label", "Test month");
+        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");
     },
 };
-exports.monthSelection = {
+export const monthSelection = {
     name: "test: month selection",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="month selection">
-				<Calendar_1.default defaultMonth={new Date(2020, 1)}/>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+    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];
-        (0, test_1.expect)(monthButton).toHaveAccessibleName("February 2020 Select a month");
-        await test_1.userEvent.click(monthButton);
+        expect(monthButton).toHaveAccessibleName("February 2020 Select a month");
+        await userEvent.click(monthButton);
         let months = canvas.getAllByRole("button").filter((el) => el.hasAttribute("data-rs-date"));
-        (0, test_1.expect)(months).toHaveLength(12);
-        await test_1.userEvent.click(months[0]);
+        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];
-        (0, test_1.expect)(months).toHaveLength(0);
-        (0, test_1.expect)(monthButton).toHaveAccessibleName("January 2020 Select a month");
+        expect(months).toHaveLength(0);
+        expect(monthButton).toHaveAccessibleName("January 2020 Select a month");
     },
 };
-exports.keyboardNavigation = {
+export const keyboardNavigation = {
     name: "test: keyboard navigation",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="keyboard navigation">
-				<Calendar_1.default defaultMonth={new Date(2020, 0)}/>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+    render: () => (<Example>
+			<Example.Item title="keyboard navigation">
+				<Calendar defaultMonth={new Date(2020, 0)}/>
+			</Example.Item>
+		</Example>),
     play: async ({ canvas }) => {
         const buttons = canvas.getAllByRole("button");
         buttons[2].focus();
-        await test_1.userEvent.keyboard("{Tab/}");
-        (0, test_1.expect)(document.activeElement).toHaveAttribute("data-rs-date", "2020-01-01");
-        await test_1.userEvent.keyboard("{ArrowRight/}");
-        (0, test_1.waitFor)(() => {
-            (0, test_1.expect)(document.activeElement).toHaveAttribute("data-rs-date", "2020-01-02");
+        await userEvent.keyboard("{Tab/}");
+        expect(document.activeElement).toHaveAttribute("data-rs-date", "2020-01-01");
+        await userEvent.keyboard("{ArrowRight/}");
+        waitFor(() => {
+            expect(document.activeElement).toHaveAttribute("data-rs-date", "2020-01-02");
         });
-        await test_1.userEvent.keyboard("{Shift>}{Tab/}{/Shift}");
-        await test_1.userEvent.keyboard("{Tab/}");
-        (0, test_1.waitFor)(() => {
-            (0, test_1.expect)(document.activeElement).toHaveAttribute("data-rs-date", "2020-01-02");
+        await userEvent.keyboard("{Shift>}{Tab/}{/Shift}");
+        await userEvent.keyboard("{Tab/}");
+        waitFor(() => {
+            expect(document.activeElement).toHaveAttribute("data-rs-date", "2020-01-02");
         });
-        await test_1.userEvent.keyboard("{ArrowLeft/}");
-        (0, test_1.waitFor)(() => {
-            (0, test_1.expect)(document.activeElement).toHaveAttribute("data-rs-date", "2020-01-01");
+        await userEvent.keyboard("{ArrowLeft/}");
+        waitFor(() => {
+            expect(document.activeElement).toHaveAttribute("data-rs-date", "2020-01-01");
         });
-        await test_1.userEvent.keyboard("{ArrowDown/}");
-        (0, test_1.waitFor)(() => {
-            (0, test_1.expect)(document.activeElement).toHaveAttribute("data-rs-date", "2020-01-08");
+        await userEvent.keyboard("{ArrowDown/}");
+        waitFor(() => {
+            expect(document.activeElement).toHaveAttribute("data-rs-date", "2020-01-08");
         });
-        await test_1.userEvent.keyboard("{ArrowUp/}");
-        (0, test_1.waitFor)(() => {
-            (0, test_1.expect)(document.activeElement).toHaveAttribute("data-rs-date", "2020-01-01");
+        await userEvent.keyboard("{ArrowUp/}");
+        waitFor(() => {
+            expect(document.activeElement).toHaveAttribute("data-rs-date", "2020-01-01");
         });
-        await test_1.userEvent.keyboard("{ArrowUp/}");
-        (0, test_1.waitFor)(() => {
-            (0, test_1.expect)(document.activeElement).toHaveAttribute("data-rs-date", "2019-12-25");
+        await userEvent.keyboard("{ArrowUp/}");
+        waitFor(() => {
+            expect(document.activeElement).toHaveAttribute("data-rs-date", "2019-12-25");
         });
     },
 };

package/dist/components/Calendar/useCalendarKeyboardNavigation.js

@@ -1,7 +1,7 @@
 import React from "react";
-import useHotkeys from "../../hooks/useHotkeys";
-import * as keys from "../../constants/keys";
-import { getFocusableDates } from "./Calendar.utils";
+import useHotkeys from "../../hooks/useHotkeys.js";
+import * as keys from "../../constants/keys.js";
+import { getFocusableDates } from "./Calendar.utils.js";
 const useCalendarKeyboardNavigation = (props) => {
     const { rootRef, changeToNextMonth, changeToPreviousMonth, monthDate, verticalDelta, min, max } = props;
     const overflowCountRef = React.useRef(0);

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

@@ -1,5 +1,5 @@
 import React from "react";
-import type * as T from "./Card.types";
+import type * as T from "./Card.types.js";
 export type Component = {
     <As extends keyof React.JSX.IntrinsicElements = "div">(props: T.Props<As> & React.RefAttributes<HTMLElement>): React.ReactNode;
     displayName?: string;

package/dist/components/Card/Card.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { classNames } from "@reshaped/utilities";
-import Actionable from "../../components/Actionable";
-import View from "../../components/View";
-import { resolveMixin } from "../../styles/mixin";
+import Actionable from "../../components/Actionable/index.js";
+import View from "../../components/View/index.js";
+import { resolveMixin } from "../../styles/mixin.js";
 import s from "./Card.module.css";
 const Card = forwardRef((props, ref) => {
     const { padding = 4, borderRadius, selected, raised, bleed, height, direction, gap, align, justify, onClick, href, children, className, attributes,