reshaped 3.9.0-canary.1 → 3.9.0-canary.2

package/dist/cli/theming/index.js

@@ -1,9 +1,9 @@
-import fs from "fs";
-import path from "path";
+import fs from "node:fs";
+import path from "node:path";
 import chalk from "chalk";
-import mergeDefinitions from "../../themes/_generator/utilities/mergeDefinitions.js";
-import transform from "../../themes/_generator/transform.js";
 import reshapedDefinition from "../../themes/_generator/definitions/reshaped.js";
+import transform from "../../themes/_generator/transform.js";
+import mergeDefinitions from "../../themes/_generator/utilities/mergeDefinitions.js";
 import { transformToTailwind } from "./tailwind.js";
 const transformDefinition = (name, definition, options) => {
     const { isFragment, outputPath } = options;

package/dist/cli/theming/reshaped.config.js

@@ -1,5 +1,5 @@
-import reshapedDefinition from "../../themes/_generator/definitions/reshaped.js";
 import figmaDefinition from "../../themes/_generator/definitions/figma.js";
+import reshapedDefinition from "../../themes/_generator/definitions/reshaped.js";
 import slateDefinition from "../../themes/_generator/definitions/slate.js";
 const config = {
     themes: {

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

@@ -1,5 +1,5 @@
-import type React from "react";
 import type { IconProps } from "../Icon";
+import type React from "react";
 import type * as G from "../../types/global";
 export type BaseProps = {
     /** Expand / collapse icon size in units */

package/dist/components/Accordion/AccordionControlled.js

@@ -1,10 +1,10 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
-import { classNames } from "../../utilities/props.js";
 import useElementId from "../../hooks/useElementId.js";
-import AccordionContext from "./Accordion.context.js";
 import useHandlerRef from "../../hooks/useHandlerRef.js";
+import { classNames } from "../../utilities/props.js";
+import AccordionContext from "./Accordion.context.js";
 const AccordionControlled = (props) => {
     const { children, onToggle, active, iconPosition, iconSize, gap, className, attributes } = props;
     const rootClassNames = classNames(className);

package/dist/components/Accordion/AccordionTrigger.js

@@ -1,11 +1,11 @@
 "use client";
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
-import { classNames } from "../../utilities/props.js";
 import Actionable from "../Actionable/index.js";
-import View from "../View/index.js";
 import Icon from "../Icon/index.js";
+import View from "../View/index.js";
 import IconChevronDown from "../../icons/ChevronDown.js";
+import { classNames } from "../../utilities/props.js";
 import AccordionContext from "./Accordion.context.js";
 import s from "./Accordion.module.css";
 const AccordionTrigger = (props) => {

package/dist/components/Accordion/index.d.ts

@@ -1,6 +1,6 @@
 import Accordion from "./Accordion";
-import AccordionTrigger from "./AccordionTrigger";
 import AccordionContent from "./AccordionContent";
+import AccordionTrigger from "./AccordionTrigger";
 declare const AccordionRoot: typeof Accordion & {
     Trigger: typeof AccordionTrigger;
     Content: typeof AccordionContent;

package/dist/components/Accordion/index.js

@@ -1,6 +1,6 @@
 import Accordion from "./Accordion.js";
-import AccordionTrigger from "./AccordionTrigger.js";
 import AccordionContent from "./AccordionContent.js";
+import AccordionTrigger from "./AccordionTrigger.js";
 const AccordionRoot = Accordion;
 AccordionRoot.Trigger = AccordionTrigger;
 AccordionRoot.Content = AccordionContent;

package/dist/components/ActionBar/ActionBar.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { classNames, responsiveVariables } from "../../utilities/props.js";
 import View from "../View/index.js";
+import { classNames, responsiveVariables } from "../../utilities/props.js";
 import s from "./ActionBar.module.css";
 const fullWidthPositions = ["top", "bottom"];
 const ActionBar = (props) => {

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

@@ -1,5 +1,5 @@
-import type React from "react";
 import type { ViewProps } from "../View";
+import type React from "react";
 import type * as G from "../../types/global";
 export type Props = Pick<ViewProps, "paddingBlock" | "paddingInline" | "padding"> & {
     /** Show or hide the component */

package/dist/components/Actionable/Actionable.js

@@ -1,8 +1,8 @@
 "use client";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { classNames } from "../../utilities/props.js";
 import * as keys from "../../constants/keys.js";
+import { classNames } from "../../utilities/props.js";
 import s from "./Actionable.module.css";
 const Actionable = forwardRef((props, ref) => {
     const { children, render, href, onClick, type, disabled, insetFocus, disableFocusRing, borderRadius, as, stopPropagation, fullWidth, touchHitbox, className, attributes, } = props;

package/dist/components/Alert/Alert.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import Icon from "../Icon/index.js";
-import View from "../View/index.js";
 import Text from "../Text/index.js";
+import View from "../View/index.js";
 import s from "./Alert.module.css";
 const Alert = (props) => {
     const { title, children, icon, actionsSlot, color = "neutral", inline, bleed, className, attributes, } = props;

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

@@ -1,5 +1,5 @@
-import type React from "react";
 import type { IconProps } from "../Icon";
+import type React from "react";
 import type * as G from "../../types/global";
 export type Props = {
     /** SVG component for the icon */

package/dist/components/Autocomplete/Autocomplete.js

@@ -1,14 +1,14 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
-import TextField from "../TextField/index.js";
 import DropdownMenu from "../DropdownMenu/index.js";
+import TextField from "../TextField/index.js";
 import * as keys from "../../constants/keys.js";
-import useHotkeys from "../../hooks/useHotkeys.js";
-import useHandlerRef from "../../hooks/useHandlerRef.js";
-import s from "./Autocomplete.module.css";
 import useElementId from "../../hooks/useElementId.js";
+import useHandlerRef from "../../hooks/useHandlerRef.js";
+import useHotkeys from "../../hooks/useHotkeys.js";
 import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";
+import s from "./Autocomplete.module.css";
 const AutocompleteContext = React.createContext({});
 const Autocomplete = (props) => {
     const { children, onChange, onInput, onItemSelect, name, containerRef, instanceRef, onBackspace, onEnter, active, onOpen, onClose, fallbackAdjustLayout, fallbackMinWidth, fallbackMinHeight, ...textFieldProps } = props;

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

@@ -1,6 +1,6 @@
-import type { TextFieldProps } from "../TextField";
-import type { MenuItemProps } from "../MenuItem";
 import type { DropdownMenuProps, DropdownMenuInstance } from "../DropdownMenu";
+import type { MenuItemProps } from "../MenuItem";
+import type { TextFieldProps } from "../TextField";
 type SelectArgs = {
     /** Value that will be passed to the input on selection */
     value: string;

package/dist/components/Avatar/Avatar.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { classNames, responsivePropDependency } from "../../utilities/props.js";
-import { resolveMixin } from "../../styles/mixin.js";
 import Icon from "../Icon/index.js";
 import View from "../View/index.js";
+import { resolveMixin } from "../../styles/mixin.js";
+import { classNames, responsivePropDependency } from "../../utilities/props.js";
 import s from "./Avatar.module.css";
 const Avatar = (props) => {
     const { color = "neutral", variant, src, size = 12, squared, initials, icon, className, renderImage, imageAttributes: passedImageAttributes, attributes, } = props;

package/dist/components/Badge/Badge.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { classNames } from "../../utilities/props.js";
-import Text from "../Text/index.js";
+import { forwardRef } from "react";
+import Actionable from "../Actionable/index.js";
 import Icon from "../Icon/index.js";
+import Text from "../Text/index.js";
 import IconClose from "../../icons/Close.js";
-import Actionable from "../Actionable/index.js";
+import { classNames } from "../../utilities/props.js";
 import s from "./Badge.module.css";
-import { forwardRef } from "react";
 const Badge = forwardRef((props, ref) => {
     const { children, color, rounded, size = "medium", icon, endIcon, variant, hidden, highlighted, href, onClick, onDismiss, dismissAriaLabel, className, attributes, } = props;
     const isActionable = !!(onClick || href);

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

@@ -1,6 +1,6 @@
-import type React from "react";
 import type { ActionableProps } from "../Actionable";
 import type { IconProps } from "../Icon";
+import type React from "react";
 import type * as G from "../../types/global";
 type BaseProps = {
     /** Component color scheme

package/dist/components/Breadcrumbs/Breadcrumbs.js

@@ -1,13 +1,13 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
-import { classNames } from "../../utilities/props.js";
-import View from "../View/index.js";
+import Button from "../Button/index.js";
 import Icon from "../Icon/index.js";
 import Text from "../Text/index.js";
-import Button from "../Button/index.js";
+import View from "../View/index.js";
 import IconChevronRight from "../../icons/ChevronRight.js";
 import IconDotsHorizontal from "../../icons/DotsHorizontal.js";
+import { classNames } from "../../utilities/props.js";
 const Breadcrumbs = (props) => {
     const { children, separator, color, defaultVisibleItems, expandAriaLabel, disableExpand, ariaLabel, className, attributes, } = props;
     const visibleItems = defaultVisibleItems && defaultVisibleItems >= 2 ? defaultVisibleItems : null;

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

@@ -1,5 +1,5 @@
-import type React from "react";
 import type { LinkProps } from "../Link";
+import type React from "react";
 import type * as G from "../../types/global";
 export type Props = {
     /** Node for inserting children to position items */

package/dist/components/Breadcrumbs/BreadcrumbsItem.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import Text from "../Text/index.js";
 import Link from "../Link/index.js";
+import Text from "../Text/index.js";
 const BreadcrumbsItem = (props) => {
     const { children, onClick, href, icon, disabled } = props;
     if (!href && !onClick && !disabled) {

package/dist/components/Button/Button.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { classNames, responsiveClassNames, responsivePropDependency } from "../../utilities/props.js";
+import Actionable from "../Actionable/index.js";
 import Icon from "../Icon/index.js";
 import Loader from "../Loader/index.js";
-import Actionable from "../Actionable/index.js";
+import { classNames, responsiveClassNames, responsivePropDependency } from "../../utilities/props.js";
 import s from "./Button.module.css";
 const Button = forwardRef((props, ref) => {
     const { variant = "solid", color = "neutral", elevated, highlighted, fullWidth, loading, loadingAriaLabel, disabled, type, href, size = "medium", children, rounded, onClick, icon, endIcon, stopPropagation, as, render, className, attributes, } = props;

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

@@ -1,7 +1,7 @@
-import type React from "react";
-import type { IconProps } from "../Icon";
-import type { ActionableProps } from "../Actionable";
 import type { AlignerProps as BaseAlignerProps } from "../_private/Aligner";
+import type { ActionableProps } from "../Actionable";
+import type { IconProps } from "../Icon";
+import type React from "react";
 import type * as G from "../../types/global";
 export type Size = "xlarge" | "large" | "medium" | "small";
 export type Props = Pick<ActionableProps, "attributes" | "className" | "disabled" | "children" | "href" | "onClick" | "type" | "as" | "stopPropagation" | "render"> & {

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

@@ -28,6 +28,11 @@ export type BaseProps = {
         month: number;
         date: Date;
     }) => string;
+    /** Render a custom date slot content under the date number */
+    renderDateSlot?: (args: {
+        date: Date;
+        selected: boolean;
+    }) => React.ReactNode;
     /** Aria label for the previous month button */
     previousMonthAriaLabel?: string;
     nextMonthAriaLabel?: string;
@@ -106,7 +111,7 @@ export type MonthProps = {
     hoveredDate: Date | null;
     onDateHover: (date: Date) => void;
     onDateHoverEnd: (date: Date) => void;
-} & Pick<BaseProps, "max" | "min" | "firstWeekDay" | "selectedDates" | "renderMonthLabel" | "renderWeekDay" | "renderSelectedMonthLabel" | "renderDateAriaLabel"> & Pick<ControlledProps, "value" | "onChange" | "range">;
+} & Pick<BaseProps, "max" | "min" | "firstWeekDay" | "selectedDates" | "renderMonthLabel" | "renderWeekDay" | "renderSelectedMonthLabel" | "renderDateAriaLabel" | "renderDateSlot"> & Pick<ControlledProps, "value" | "onChange" | "range">;
 export type YearProps = {
     monthDate: Date;
     onMonthClick: (month: number) => void;
@@ -119,6 +124,7 @@ export type DateProps = {
     startValue: Date | null;
     endValue: Date | null;
     renderAriaLabel?: MonthProps["renderDateAriaLabel"];
+    renderSlot?: MonthProps["renderDateSlot"];
     onDateFocus: (date: Date) => void;
 } & Pick<MonthProps, "hoveredDate" | "onDateHover" | "onDateHoverEnd" | "onChange" | "range" | "min" | "max" | "selectedDates">;
 export type ControlsProps = {

package/dist/components/Calendar/CalendarControlled.js

@@ -4,12 +4,12 @@ import React from "react";
 import View from "../View/index.js";
 import { onNextFrame } from "../../utilities/animation.js";
 import { setMonthToPrevious, setMonthToNext, setMonthTo, setYearToNext, setYearToPrevious, applyNavigationBounds, } from "./Calendar.utils.js";
-import useCalendarKeyboardNavigation from "./useCalendarKeyboardNavigation.js";
+import CalendarControls from "./CalendarControls.js";
 import CalendarMonth from "./CalendarMonth.js";
 import CalendarYear from "./CalendarYear.js";
-import CalendarControls from "./CalendarControls.js";
+import useCalendarKeyboardNavigation from "./useCalendarKeyboardNavigation.js";
 const CalendarControlled = (props) => {
-    const { value, onChange, defaultMonth, min, max, range, firstWeekDay, selectedDates, renderMonthLabel, renderSelectedMonthLabel, renderWeekDay, previousMonthAriaLabel, previousYearAriaLabel, nextMonthAriaLabel, nextYearAriaLabel, monthSelectionAriaLabel, renderMonthAriaLabel, renderDateAriaLabel, } = props;
+    const { value, onChange, defaultMonth, min, max, range, firstWeekDay, selectedDates, renderMonthLabel, renderSelectedMonthLabel, renderWeekDay, previousMonthAriaLabel, previousYearAriaLabel, nextMonthAriaLabel, nextYearAriaLabel, monthSelectionAriaLabel, renderMonthAriaLabel, renderDateAriaLabel, renderDateSlot, } = props;
     const [selectionMode, setSelectionMode] = React.useState("date");
     const [monthDate, setMonthDate] = React.useState(defaultMonth || new Date());
     const [hoveredDate, setHoveredDate] = React.useState(null);
@@ -63,7 +63,7 @@ const CalendarControlled = (props) => {
         min,
         max,
     });
-    return (_jsxs(View, { gap: 2, children: [_jsx(CalendarControls, { renderSelectedMonthLabel: renderSelectedMonthLabel, monthDate: monthDate, selectionMode: selectionMode, isFirstMonth: bounds.isFirstMonth, isLastMonth: bounds.isLastMonth, monthTitleRef: monthTitleRef, onMonthTitleClick: handleMonthTitleClick, onNextClick: handleNextClick, onPreviousClick: handlePreviousClick, previousMonthAriaLabel: previousMonthAriaLabel, previousYearAriaLabel: previousYearAriaLabel, nextMonthAriaLabel: nextMonthAriaLabel, nextYearAriaLabel: nextYearAriaLabel, monthSelectionAriaLabel: monthSelectionAriaLabel }), _jsxs(View.Item, { attributes: { ref: selectionRootRef }, children: [selectionMode === "date" && (_jsx(CalendarMonth, { date: monthDate, value: value, onChange: onChange, min: min, max: max, range: range, firstWeekDay: firstWeekDay, hoveredDate: hoveredDate, selectedDates: selectedDates, onDateHover: handleDateHover, onDateHoverEnd: handleDateHoverEnd, renderWeekDay: renderWeekDay, renderDateAriaLabel: renderDateAriaLabel })), selectionMode === "month" && (_jsx(CalendarYear, { monthDate: monthDate, onMonthClick: handleMonthClick, renderMonthLabel: renderMonthLabel, renderMonthAriaLabel: renderMonthAriaLabel, min: min, max: max }))] })] }));
+    return (_jsxs(View, { gap: 2, children: [_jsx(CalendarControls, { renderSelectedMonthLabel: renderSelectedMonthLabel, monthDate: monthDate, selectionMode: selectionMode, isFirstMonth: bounds.isFirstMonth, isLastMonth: bounds.isLastMonth, monthTitleRef: monthTitleRef, onMonthTitleClick: handleMonthTitleClick, onNextClick: handleNextClick, onPreviousClick: handlePreviousClick, previousMonthAriaLabel: previousMonthAriaLabel, previousYearAriaLabel: previousYearAriaLabel, nextMonthAriaLabel: nextMonthAriaLabel, nextYearAriaLabel: nextYearAriaLabel, monthSelectionAriaLabel: monthSelectionAriaLabel }), _jsxs(View.Item, { attributes: { ref: selectionRootRef }, children: [selectionMode === "date" && (_jsx(CalendarMonth, { date: monthDate, value: value, onChange: onChange, min: min, max: max, range: range, firstWeekDay: firstWeekDay, hoveredDate: hoveredDate, selectedDates: selectedDates, onDateHover: handleDateHover, onDateHoverEnd: handleDateHoverEnd, renderWeekDay: renderWeekDay, renderDateAriaLabel: renderDateAriaLabel, renderDateSlot: renderDateSlot })), selectionMode === "month" && (_jsx(CalendarYear, { monthDate: monthDate, onMonthClick: handleMonthClick, renderMonthLabel: renderMonthLabel, renderMonthAriaLabel: renderMonthAriaLabel, min: min, max: max }))] })] }));
 };
 CalendarControlled.displayName = "CalendarControlled";
 export default CalendarControlled;

package/dist/components/Calendar/CalendarControls.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 import Button from "../Button/index.js";
-import View from "../View/index.js";
 import Hidden from "../Hidden/index.js";
-import Text from "../Text/index.js";
 import HiddenVisually from "../HiddenVisually/index.js";
+import Text from "../Text/index.js";
+import View from "../View/index.js";
 import IconChevronLeft from "../../icons/ChevronLeft.js";
 import IconChevronRight from "../../icons/ChevronRight.js";
 import { onNextFrame } from "../../utilities/animation.js";

package/dist/components/Calendar/CalendarDate.js

@@ -1,11 +1,11 @@
 "use client";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Actionable from "../Actionable/index.js";
 import { classNames } from "../../utilities/props.js";
-import { getLocalISODate } from "./Calendar.utils.js";
 import s from "./Calendar.module.css";
+import { getLocalISODate } from "./Calendar.utils.js";
 const CalendarDate = (props) => {
-    const { date, isoDate, startValue, endValue, disabled, focusable, onChange, range, hoveredDate, onDateHover, onDateHoverEnd, onDateFocus, renderAriaLabel, selectedDates, } = props;
+    const { date, isoDate, startValue, endValue, disabled, focusable, onChange, range, hoveredDate, onDateHover, onDateHoverEnd, onDateFocus, selectedDates, renderAriaLabel, renderSlot, } = props;
     if (!date)
         return _jsx("td", { className: s.cell, "aria-hidden": "true" });
     const isoStartValue = startValue && getLocalISODate({ date: startValue });
@@ -61,7 +61,7 @@ const CalendarDate = (props) => {
         handleMouseEnter();
         onDateFocus(date);
     };
-    return (_jsx("td", { className: dateClassNames, role: disabled ? "presentation" : "gridcell", children: _jsx(Actionable, { fullWidth: true, insetFocus: true, className: s["cell-button"], disabled: disabled, onClick: handleClick, attributes: {
+    return (_jsx("td", { className: dateClassNames, role: disabled ? "presentation" : "gridcell", children: _jsxs(Actionable, { fullWidth: true, insetFocus: true, className: s["cell-button"], disabled: disabled, onClick: handleClick, attributes: {
                 role: "checkbox",
                 tabIndex: focusable ? 0 : -1,
                 "aria-hidden": disabled,
@@ -74,7 +74,7 @@ const CalendarDate = (props) => {
                 onMouseLeave: handleMouseLeave,
                 onFocus: handleFocus,
                 onBlur: handleMouseLeave,
-            }, children: date.getDate() }) }));
+            }, children: [date.getDate(), renderSlot?.({ date, selected: Boolean(selection && selection !== "range") })] }) }));
 };
 CalendarDate.displayName = "CalendarDate";
 export default CalendarDate;

package/dist/components/Calendar/CalendarMonth.js

@@ -1,11 +1,11 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
+import s from "./Calendar.module.css";
 import { getMonthWeeks, getWeekdayNames, getLocalISODate, isDateFocusable } from "./Calendar.utils.js";
 import CalendarDate from "./CalendarDate.js";
-import s from "./Calendar.module.css";
 const CalendarMonth = (props) => {
-    const { date, value, onChange, min, max, range, firstWeekDay, selectedDates, hoveredDate, onDateHover, onDateHoverEnd, renderWeekDay, renderDateAriaLabel, } = props;
+    const { date, value, onChange, min, max, range, firstWeekDay, selectedDates, hoveredDate, onDateHover, onDateHoverEnd, renderWeekDay, renderDateAriaLabel, renderDateSlot, } = props;
     let foundFocusableDate = false;
     const [lastFocusedDate, setLastFocusedDate] = useState();
     const month = date.getMonth();
@@ -26,7 +26,7 @@ const CalendarMonth = (props) => {
                             // eslint-disable-next-line react-hooks/immutability
                             if (focusable)
                                 foundFocusableDate = true;
-                            return (_jsx(CalendarDate, { date: date, isoDate: isoDate, disabled: disabled, range: range, focusable: focusable, startValue: startValue, endValue: endValue, onChange: onChange, hoveredDate: hoveredDate, onDateHover: onDateHover, onDateHoverEnd: onDateHoverEnd, onDateFocus: setLastFocusedDate, renderAriaLabel: renderDateAriaLabel, selectedDates: selectedDates }, index));
+                            return (_jsx(CalendarDate, { date: date, isoDate: isoDate, disabled: disabled, range: range, focusable: focusable, startValue: startValue, endValue: endValue, onChange: onChange, hoveredDate: hoveredDate, onDateHover: onDateHover, onDateHoverEnd: onDateHoverEnd, onDateFocus: setLastFocusedDate, renderAriaLabel: renderDateAriaLabel, selectedDates: selectedDates, renderSlot: renderDateSlot }, index));
                         }) }, key));
                 }) })] }));
 };

package/dist/components/Calendar/CalendarYear.js

@@ -2,8 +2,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
 import Actionable from "../Actionable/index.js";
 import { onNextFrame } from "../../utilities/animation.js";
-import { getMonthNames } from "./Calendar.utils.js";
 import s from "./Calendar.module.css";
+import { getMonthNames } from "./Calendar.utils.js";
 const MONTHS_PER_ROW = 3;
 const CalendarYear = (props) => {
     const { renderMonthLabel, renderMonthAriaLabel, monthDate, min, max, onMonthClick } = props;

package/dist/components/Calendar/useCalendarKeyboardNavigation.js

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

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 "../../utilities/props.js";
 import Actionable from "../Actionable/index.js";
-import s from "./Card.module.css";
 import { resolveMixin } from "../../styles/mixin.js";
+import { classNames } from "../../utilities/props.js";
+import s from "./Card.module.css";
 const Card = forwardRef((props, ref) => {
     const { padding = 4 } = props;
     const { selected, elevated, bleed, height, onClick, href, children, className, attributes, 

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

@@ -1,6 +1,6 @@
-import type React from "react";
 import type { ActionableProps } from "../Actionable";
 import type { ViewProps } from "../View";
+import type React from "react";
 import type * as G from "../../types/global";
 export type Props<TagName extends keyof React.JSX.IntrinsicElements = "div"> = {
     /** Component padding, base unit multiplier */

package/dist/components/Carousel/Carousel.js

@@ -1,13 +1,13 @@
 "use client";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
-import { classNames, responsiveVariables, responsiveClassNames } from "../../utilities/props.js";
-import { rafThrottle } from "../../utilities/helpers.js";
 import View from "../View/index.js";
-import useRTL from "../../hooks/useRTL.js";
 import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";
-import CarouselControl from "./CarouselControl.js";
+import useRTL from "../../hooks/useRTL.js";
+import { rafThrottle } from "../../utilities/helpers.js";
+import { classNames, responsiveVariables, responsiveClassNames } from "../../utilities/props.js";
 import s from "./Carousel.module.css";
+import CarouselControl from "./CarouselControl.js";
 const Carousel = (props) => {
     const { children, gap = 3, visibleItems, bleed, navigationDisplay, onChange, onScroll, instanceRef, className, attributes, } = props;
     const currentIndexRef = React.useRef(0);

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

@@ -1,6 +1,6 @@
+import type { ActionableRef } from "../Actionable";
 import type React from "react";
 import type * as G from "../../types/global";
-import type { ActionableRef } from "../Actionable";
 export type Instance = {
     /** Scroll to the previous item */
     navigateBack: () => void;

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

@@ -1,4 +1,4 @@
-import type { ActionableRef } from "../Actionable";
 import * as T from "./Carousel.types";
+import type { ActionableRef } from "../Actionable";
 declare const CarouselControl: import("react").ForwardRefExoticComponent<T.ControlProps & import("react").RefAttributes<ActionableRef>>;
 export default CarouselControl;

package/dist/components/Carousel/CarouselControl.js

@@ -1,11 +1,11 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef, useState } from "react";
-import { classNames } from "../../utilities/props.js";
 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 IconChevronLeft from "../../icons/ChevronLeft.js";
+import IconChevronRight from "../../icons/ChevronRight.js";
+import { classNames } from "../../utilities/props.js";
 import s from "./Carousel.module.css";
 const CarouselControl = forwardRef((props, ref) => {
     const { type, scrollElRef, oppositeControlElRef, scrollPosition, onClick, isRTL, mounted } = props;

package/dist/components/Checkbox/Checkbox.js

@@ -1,14 +1,14 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
-import { classNames, responsiveClassNames, responsivePropDependency } from "../../utilities/props.js";
-import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";
 import HiddenInput from "../_private/HiddenInput/index.js";
-import { useFormControl } from "../FormControl/index.js";
 import { useCheckboxGroup } from "../CheckboxGroup/index.js";
+import { useFormControl } from "../FormControl/index.js";
 import Icon from "../Icon/index.js";
 import Text from "../Text/index.js";
+import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";
 import IconCheckmark from "../../icons/Checkmark.js";
+import { classNames, responsiveClassNames, responsivePropDependency } from "../../utilities/props.js";
 import s from "./Checkbox.module.css";
 const Checkbox = (props) => {
     const { children, value, onChange, onFocus, onBlur, indeterminate, size = "medium", className, attributes, inputAttributes, } = props;

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

@@ -1,6 +1,6 @@
+import type { CheckboxProps } from "../Checkbox";
 import type React from "react";
 import type * as G from "../../types/global";
-import type { CheckboxProps } from "../Checkbox";
 type BaseProps = {
     /** Component id attribute */
     id?: string;

package/dist/components/Container/Container.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { classNames } from "../../utilities/props.js";
 import View from "../View/index.js";
+import { classNames } from "../../utilities/props.js";
 import s from "./Container.module.css";
 const Container = (props) => {
     const { children, padding = 4, width, align, justify, height, maxHeight, className, attributes, } = props;

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

@@ -1,5 +1,5 @@
-import type React from "react";
 import type { ViewProps } from "../View";
+import type React from "react";
 import type * as G from "../../types/global";
 export type Props = Pick<ViewProps, "align" | "justify" | "height" | "maxHeight"> & {
     /** Component inline padding */

package/dist/components/ContextMenu/ContextMenu.js

@@ -2,9 +2,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
 import DropdownMenu from "../DropdownMenu/index.js";
+import useHandlerRef from "../../hooks/useHandlerRef.js";
 import useScrollLock from "../../hooks/useScrollLock.js";
 import s from "./ContextMenu.module.css";
-import useHandlerRef from "../../hooks/useHandlerRef.js";
 const ContextMenu = (props) => {
     const { position = "end-top", onOpen, onClose, ...dropdownMenuProps } = props;
     const [coordinates, setCoordinates] = React.useState();

package/dist/components/Dismissible/Dismissible.js

@@ -1,8 +1,8 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { classNames } from "../../utilities/props.js";
 import Button from "../Button/index.js";
 import IconClose from "../../icons/Close.js";
+import { classNames } from "../../utilities/props.js";
 import s from "./Dismissible.module.css";
 const Dismissible = (props) => {
     const { children, align, onClose, hideCloseButton, variant, closeAriaLabel, className, attributes, } = props;

package/dist/components/Divider/Divider.d.ts

@@ -1,4 +1,4 @@
-import type React from "react";
 import type * as T from "./Divider.types";
+import type React from "react";
 declare const Divider: React.FC<T.Props>;
 export default Divider;

package/dist/components/Divider/Divider.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { classNames, responsiveClassNames } from "../../utilities/props.js";
 import Text from "../Text/index.js";
+import { classNames, responsiveClassNames } from "../../utilities/props.js";
 import s from "./Divider.module.css";
 const Divider = (props) => {
     const { vertical, blank, children, contentPosition = "center", color, offset, className, attributes, } = props;

package/dist/components/DropdownMenu/DropdownMenu.js

@@ -1,15 +1,15 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
-import Popover from "../Popover/index.js";
-import MenuItem from "../MenuItem/index.js";
-import Icon from "../Icon/index.js";
 import { useFlyoutContext } from "../Flyout/index.js";
-import IconChevronRight from "../../icons/ChevronRight.js";
+import Icon from "../Icon/index.js";
+import MenuItem from "../MenuItem/index.js";
+import Popover from "../Popover/index.js";
+import * as keys from "../../constants/keys.js";
 import useHotkeys from "../../hooks/useHotkeys.js";
 import useRTL from "../../hooks/useRTL.js";
+import IconChevronRight from "../../icons/ChevronRight.js";
 import { classNames } from "../../utilities/props.js";
-import * as keys from "../../constants/keys.js";
 import s from "./DropdownMenu.module.css";
 const DropdownMenuSubContext = React.createContext(null);
 const DropdownMenuSubTriggerContext = React.createContext(false);

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

@@ -1,7 +1,7 @@
-import type React from "react";
-import type { PopoverProps, PopoverInstance } from "../Popover";
-import type { MenuItemProps } from "../MenuItem";
 import type { FlyoutContentProps } from "../Flyout";
+import type { MenuItemProps } from "../MenuItem";
+import type { PopoverProps, PopoverInstance } from "../Popover";
+import type React from "react";
 export type Instance = PopoverInstance;
 export type Props = Pick<PopoverProps, "children" | "position" | "forcePosition" | "fallbackPositions" | "fallbackAdjustLayout" | "fallbackMinWidth" | "fallbackMinHeight" | "triggerType" | "contentGap" | "contentShift" | "onOpen" | "onClose" | "active" | "defaultActive" | "width" | "disableHideAnimation" | "disableCloseOnOutsideClick" | "instanceRef" | "containerRef" | "positionRef" | "originCoordinates" | "borderRadius" | "elevation" | "initialFocusRef"> & {
     /** Change component trap focus keyboard behavior and shortcuts */