reshaped 2.8.0 → 2.8.2

package/dist/components/Calendar/CalendarControls.js

@@ -0,0 +1,46 @@
+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 IconChevronLeft from "../../icons/ChevronLeft.js";
+import IconChevronRight from "../../icons/ChevronRight.js";
+import { onNextFrame } from "../../utilities/animation.js";
+import s from "./Calendar.module.css";
+const CalendarControls = (props) => {
+    const { selectionMode, onMonthTitleClick, monthTitleRef, monthDate, renderSelectedMonthLabel, isFirstMonth, isLastMonth, onNextClick, onPreviousClick, monthSelectionAriaLabel = "Select a month", previousMonthAriaLabel = "Previous month", previousYearAriaLabel = "Previous year", nextMonthAriaLabel = "Next month", nextYearAriaLabel = "Next year", } = props;
+    const prevRef = React.useRef(null);
+    const nextRef = React.useRef(null);
+    React.useEffect(() => {
+        if (!isFirstMonth)
+            return;
+        if (document.activeElement !== prevRef.current)
+            return;
+        const targetEl = nextRef.current || monthTitleRef.current;
+        onNextFrame(() => {
+            targetEl === null || targetEl === void 0 ? void 0 : targetEl.focus();
+        });
+    }, [isFirstMonth, monthTitleRef]);
+    React.useEffect(() => {
+        if (!isLastMonth)
+            return;
+        if (document.activeElement !== nextRef.current)
+            return;
+        const targetEl = prevRef.current || monthTitleRef.current;
+        onNextFrame(() => {
+            targetEl === null || targetEl === void 0 ? void 0 : targetEl.focus();
+        });
+    }, [isLastMonth, monthTitleRef]);
+    return (_jsxs(View, { direction: "row", gap: 2, align: "center", children: [_jsx(Hidden, { visibility: true, hide: isFirstMonth, children: _jsx("div", { className: s.control, children: _jsx(Button, { variant: "ghost", icon: IconChevronLeft, onClick: onPreviousClick, attributes: {
+                            ref: prevRef,
+                            "aria-label": selectionMode === "date" ? previousMonthAriaLabel : previousYearAriaLabel,
+                        } }) }) }), _jsxs(View.Item, { grow: true, children: [selectionMode === "date" && (_jsxs(Button, { fullWidth: true, variant: "ghost", onClick: onMonthTitleClick, attributes: { ref: monthTitleRef }, children: [renderSelectedMonthLabel
+                                ? renderSelectedMonthLabel({ date: monthDate })
+                                : monthDate.toLocaleDateString("en-US", { month: "long", year: "numeric" }), _jsx(HiddenVisually, { children: monthSelectionAriaLabel })] })), selectionMode === "month" && (_jsx(Text, { align: "center", weight: "medium", children: monthDate.toLocaleDateString("en-US", { year: "numeric" }) }))] }), _jsx(Hidden, { visibility: true, hide: isLastMonth, children: _jsx("div", { className: s.control, children: _jsx(Button, { variant: "ghost", icon: IconChevronRight, onClick: onNextClick, attributes: {
+                            ref: nextRef,
+                            "aria-label": selectionMode === "date" ? nextMonthAriaLabel : nextYearAriaLabel,
+                        } }) }) })] }));
+};
+export default CalendarControls;

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

@@ -0,0 +1,3 @@
+import type * as T from "./Calendar.types";
+declare const CalendarDate: (props: T.DateProps) => import("react/jsx-runtime").JSX.Element;
+export default CalendarDate;

package/dist/components/Calendar/CalendarDate.js

@@ -0,0 +1,57 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import Actionable from "../Actionable/index.js";
+import { classNames } from "../../utilities/helpers.js";
+import { getLocalISODate } from "./Calendar.utils.js";
+import s from "./Calendar.module.css";
+const CalendarDate = (props) => {
+    const { date, startValue, endValue, isActiveStart, isActiveEnd, disabled, focusable, onChange, range, hoveredDate, onDateHover, onDateHoverEnd, renderAriaLabel, } = props;
+    if (!date)
+        return _jsx("td", { className: s.cell, "aria-hidden": "true" });
+    const inRange = startValue &&
+        startValue < date &&
+        ((endValue && endValue > date) || (hoveredDate && !endValue && hoveredDate > date));
+    const dateClassNames = classNames([
+        s.cell,
+        !range && isActiveStart && s["cell--active-single"],
+        isActiveStart && s["cell--active-start"],
+        (isActiveEnd ||
+            (!endValue && isActiveStart && !(hoveredDate && startValue && hoveredDate > startValue))) &&
+            s["cell--active-end"],
+        inRange && s["cell--in-range"],
+    ]);
+    const handleClick = () => {
+        if (!range) {
+            onChange === null || onChange === void 0 ? void 0 : onChange({ value: date });
+            return;
+        }
+        const bothDatesSelected = startValue && endValue;
+        const noneDatesSelected = !startValue && !endValue;
+        const selectingBeforeStart = startValue && date < startValue;
+        const selectingStart = bothDatesSelected || noneDatesSelected || selectingBeforeStart;
+        const start = selectingStart ? date : startValue;
+        const end = !selectingStart ? date : null;
+        onChange === null || onChange === void 0 ? void 0 : onChange({ value: { start, end } });
+    };
+    const handleMouseEnter = () => {
+        onDateHover(date);
+    };
+    const handleMouseLeave = () => {
+        onDateHoverEnd(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: {
+                role: "checkbox",
+                tabIndex: focusable ? 0 : -1,
+                "aria-hidden": disabled,
+                "aria-label": renderAriaLabel
+                    ? renderAriaLabel({ date })
+                    : date.toLocaleDateString("en-us", { month: "long", day: "numeric", weekday: "long" }),
+                "aria-checked": isActiveStart || isActiveEnd,
+                "data-rs-date": getLocalISODate({ date }),
+                onMouseEnter: handleMouseEnter,
+                onMouseLeave: handleMouseLeave,
+                onFocus: handleMouseEnter,
+                onBlur: handleMouseLeave,
+            }, children: date.getDate() }) }));
+};
+export default CalendarDate;

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

@@ -0,0 +1,3 @@
+import type * as T from "./Calendar.types";
+declare const CalendarMonth: (props: T.MonthProps) => import("react/jsx-runtime").JSX.Element;
+export default CalendarMonth;

package/dist/components/Calendar/CalendarMonth.js

@@ -0,0 +1,51 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getMonthWeeks, getWeekdayNames, getLocalISODate } 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, hoveredDate, onDateHover, onDateHoverEnd, renderWeekDay, renderDateAriaLabel, } = props;
+    let foundFocusableDate = false;
+    const month = date.getMonth();
+    const weeks = getMonthWeeks({ date, firstWeekDay });
+    const weekdayNames = getWeekdayNames({ firstWeekDay, renderWeekDay });
+    return (_jsxs("table", { className: s.selection, role: "grid", children: [_jsx("thead", { "aria-hidden": "true", children: _jsx("tr", { children: weekdayNames.map((dayName) => (_jsx("th", { className: s.weekday, scope: "col", children: dayName }, dayName))) }) }), _jsx("tbody", { children: weeks.map((week) => {
+                    var _a;
+                    const key = [month, (_a = week[0]) === null || _a === void 0 ? void 0 : _a.getDate()].filter(Boolean).join("-");
+                    return (_jsx("tr", { className: s.row, children: week.map((date, index) => {
+                            const disabled = !!date && ((min && date < min) || (max && date > max));
+                            const month = date === null || date === void 0 ? void 0 : date.getMonth();
+                            const today = new Date();
+                            const isoToday = getLocalISODate({ date: today });
+                            const startValue = value && "start" in value ? value.start : value;
+                            const endValue = value && "end" in value ? value.end : value;
+                            const isoDate = date && getLocalISODate({ date });
+                            const isoStartValue = startValue && getLocalISODate({ date: startValue });
+                            const isoEndValue = endValue && getLocalISODate({ date: endValue });
+                            const isActiveStart = !!isoDate && !!isoStartValue && isoDate === isoStartValue;
+                            const isActiveEnd = !!isoDate && !!isoEndValue && isoDate === isoEndValue;
+                            /**
+                             * Decide if date has to be focusable with Tab (only one date should be)
+                             * 1. If there is a selected value - it's focusable
+                             * 2. Otherwise, today's date is focusable
+                             * 3. Otherwise, first non-disabled date is focusable
+                             */
+                            let focusable = false;
+                            if (!foundFocusableDate && date) {
+                                if (!!startValue && startValue.getMonth() === (date === null || date === void 0 ? void 0 : date.getMonth())) {
+                                    focusable = +startValue === +date;
+                                }
+                                else if (isoDate && month === today.getMonth()) {
+                                    focusable = isoDate >= isoToday && !disabled;
+                                }
+                                else {
+                                    focusable = !disabled;
+                                }
+                            }
+                            if (focusable)
+                                foundFocusableDate = true;
+                            return (_jsx(CalendarDate, { date: date, disabled: disabled, range: range, focusable: focusable, startValue: startValue, endValue: endValue, isActiveStart: isActiveStart, isActiveEnd: isActiveEnd, onChange: onChange, hoveredDate: hoveredDate, onDateHover: onDateHover, onDateHoverEnd: onDateHoverEnd, renderAriaLabel: renderDateAriaLabel }, index));
+                        }) }, key));
+                }) })] }));
+};
+export default CalendarMonth;

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

@@ -0,0 +1,3 @@
+import type * as T from "./Calendar.types";
+declare const CalendarUncontrolled: (props: T.UncontrolledProps & T.BaseProps) => import("react/jsx-runtime").JSX.Element;
+export default CalendarUncontrolled;

package/dist/components/Calendar/CalendarUncontrolled.js

@@ -0,0 +1,30 @@
+"use client";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import CalendarControlled from "./CalendarControlled.js";
+const CalendarUncontrolled = (props) => {
+    const { onChange, defaultValue, range } = props, controlledProps = __rest(props, ["onChange", "defaultValue", "range"]);
+    const [value, setValue] = React.useState(defaultValue || null);
+    if (range) {
+        return (_jsx(CalendarControlled, Object.assign({ range: true }, controlledProps, { value: value, onChange: (args) => {
+                setValue(args.value);
+                onChange === null || onChange === void 0 ? void 0 : onChange(args);
+            } })));
+    }
+    return (_jsx(CalendarControlled, Object.assign({}, controlledProps, { value: value, onChange: (args) => {
+            setValue(args.value);
+            onChange === null || onChange === void 0 ? void 0 : onChange(args);
+        } })));
+};
+export default CalendarUncontrolled;

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

@@ -0,0 +1,3 @@
+import type * as T from "./Calendar.types";
+declare const CalendarYear: (props: T.YearProps) => import("react/jsx-runtime").JSX.Element;
+export default CalendarYear;

package/dist/components/Calendar/CalendarYear.js

@@ -0,0 +1,44 @@
+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";
+const MONTHS_PER_ROW = 3;
+const CalendarYear = (props) => {
+    const { renderMonthLabel, renderMonthAriaLabel, monthDate, min, max, onMonthClick } = props;
+    const rootRef = React.useRef(null);
+    const monthNames = getMonthNames({ renderMonthLabel });
+    const rows = [];
+    for (let i = 0; i < monthNames.length; i += MONTHS_PER_ROW) {
+        const chunk = monthNames.slice(i, i + MONTHS_PER_ROW);
+        rows.push(chunk);
+    }
+    React.useEffect(() => {
+        var _a;
+        const focusableEl = (_a = rootRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('[tabIndex="0"]');
+        // Waitinf for key press events to finish before focusing the month
+        // To avoid it trigger the month click
+        onNextFrame(() => {
+            focusableEl === null || focusableEl === void 0 ? void 0 : focusableEl.focus();
+        });
+    }, []);
+    return (_jsx("table", { ref: rootRef, role: "grid", className: s.selection, children: _jsx("tbody", { children: rows.map((row, i) => (_jsx("tr", { className: s.row, children: row.map((name, j) => {
+                    const monthIndex = i * MONTHS_PER_ROW + j;
+                    const date = new Date(monthDate.getFullYear(), monthIndex);
+                    const isOutsideMinBound = min && min.getFullYear() >= date.getFullYear() && min.getMonth() > date.getMonth();
+                    const isOutsideMaxBound = max && max.getFullYear() <= date.getFullYear() && max.getMonth() < date.getMonth();
+                    const disabled = isOutsideMaxBound || isOutsideMinBound;
+                    return (_jsx("td", { role: disabled ? "presentation" : "gridcell", className: s.cell, children: _jsx(Actionable, { fullWidth: true, insetFocus: true, className: s["cell-button"], disabled: disabled, onClick: () => onMonthClick(monthIndex), attributes: {
+                                tabIndex: monthIndex === monthDate.getMonth() ? 0 : -1,
+                                "aria-hidden": disabled,
+                                "aria-label": renderMonthAriaLabel
+                                    ? renderMonthAriaLabel({ month: monthIndex })
+                                    : name,
+                                "data-rs-date": `${monthDate.getFullYear()}-${(monthIndex + 1)
+                                    .toString()
+                                    .padStart(2, "0")}`,
+                            }, children: name }) }, name));
+                }) }, i))) }) }));
+};
+export default CalendarYear;

package/dist/components/Card/Card.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import { classNames } from "../../utilities/helpers.js";
+import Actionable from "../Actionable/index.js";
+import s from "./Card.module.css";
+import getRadiusStyles from "../../styles/radius/index.js";
+import getBleedStyles from "../../styles/bleed/index.js";
+import getPaddingStyles from "../../styles/padding/index.js";
+import getHeightStyles from "../../styles/height/index.js";
+const Card = (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
+     */
+    as: TagName = "div", } = props;
+    const isActionable = !!href || !!onClick;
+    const radiusStyles = getRadiusStyles("medium");
+    const bleedStyles = getBleedStyles(bleed);
+    const paddingStyles = getPaddingStyles(padding);
+    const heightStyles = getHeightStyles(height);
+    const rootClassNames = classNames(s.root, radiusStyles === null || radiusStyles === void 0 ? void 0 : radiusStyles.classNames, bleedStyles === null || bleedStyles === void 0 ? void 0 : bleedStyles.classNames, paddingStyles === null || paddingStyles === void 0 ? void 0 : paddingStyles.classNames, heightStyles === null || heightStyles === void 0 ? void 0 : heightStyles.classNames, isActionable && s["--actionable"], elevated && s["--elevated"], selected && s["--selected"], className);
+    const style = Object.assign(Object.assign(Object.assign(Object.assign({}, attributes === null || attributes === void 0 ? void 0 : attributes.style), bleedStyles === null || bleedStyles === void 0 ? void 0 : bleedStyles.variables), paddingStyles === null || paddingStyles === void 0 ? void 0 : paddingStyles.variables), heightStyles === null || heightStyles === void 0 ? void 0 : heightStyles.variables);
+    if (isActionable) {
+        return (_jsx(Actionable, { className: rootClassNames, attributes: Object.assign(Object.assign({}, attributes), { style }), href: href, as: TagName, onClick: onClick, ref: ref, children: _jsx("span", { className: s.content, children: children }) }));
+    }
+    return (_jsx(TagName, Object.assign({}, attributes, { onClick: onClick, href: href, ref: ref, className: rootClassNames, style: style, children: _jsx("span", { className: s.content, children: children }) })));
+};
+export default React.forwardRef(Card);

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

@@ -0,0 +1,16 @@
+import type React from "react";
+import type { ActionableProps } from "../Actionable";
+import type { ViewProps } from "../View";
+import type * as G from "../../types/global";
+export type Props<TagName extends keyof JSX.IntrinsicElements = "div"> = {
+    padding?: G.Responsive<number>;
+    bleed?: G.Responsive<number>;
+    selected?: boolean;
+    elevated?: boolean;
+    children?: React.ReactNode;
+    onClick?: ActionableProps["onClick"];
+    href?: string;
+    as?: TagName;
+    className?: G.ClassName;
+    attributes?: G.Attributes<TagName, Props> & ActionableProps["attributes"];
+} & Pick<ViewProps, "height">;

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

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

package/dist/components/Carousel/Carousel.js

@@ -0,0 +1,64 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { classNames, responsiveVariables, responsiveClassNames, debounceHandler, } 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 * as T from "./Carousel.types.js";
+import s from "./Carousel.module.css";
+const Carousel = (props) => {
+    const { children, gap = 3, visibleItems, bleed, navigationDisplay, instanceRef, className, attributes, } = props;
+    const [mounted, setMounted] = React.useState(false);
+    const [scrollPosition, setScrollPosition] = React.useState(0);
+    const [isRTL] = useRTL();
+    const scrollElRef = React.useRef(null);
+    const bleedClassNames = {};
+    if (typeof bleed === "object") {
+        Object.entries(bleed).forEach(([key, value]) => {
+            bleedClassNames[key] = typeof value === "number" && value > 0;
+        });
+    }
+    const rootClassNames = classNames(s.root, className, ...responsiveClassNames(s, "--bleed", typeof bleed === "number" ? true : bleedClassNames));
+    const handleScroll = debounceHandler((event) => {
+        const el = event.target;
+        setScrollPosition(el.scrollLeft);
+    }, 16);
+    const getItemsGap = () => {
+        const style = getComputedStyle(scrollElRef.current);
+        // Safari returns Npx Npx as a value, we need only the first one
+        const xGap = style.gap.split(" ")[0];
+        return Number(xGap.replace("px", ""));
+    };
+    const navigateRight = () => {
+        const scrollEl = scrollElRef.current;
+        scrollEl.scrollBy({
+            left: scrollEl.clientWidth + getItemsGap(),
+            top: 0,
+            behavior: "smooth",
+        });
+    };
+    const navigateLeft = () => {
+        const scrollEl = scrollElRef.current;
+        scrollEl.scrollBy({
+            left: -scrollEl.clientWidth - getItemsGap(),
+            top: 0,
+            behavior: "smooth",
+        });
+    };
+    const navigateBack = isRTL ? navigateRight : navigateLeft;
+    const navigateForward = isRTL ? navigateLeft : navigateRight;
+    React.useImperativeHandle(instanceRef, () => ({
+        navigateBack,
+        navigateForward,
+    }));
+    /**
+     * Changing flag here since scroll ref changing won't rerender the controls and show them after SSR
+     */
+    useIsomorphicLayoutEffect(() => {
+        setMounted(true);
+    }, []);
+    return (_jsxs("section", Object.assign({}, attributes, { className: rootClassNames, style: Object.assign(Object.assign({}, responsiveVariables("--rs-carousel-items", visibleItems)), responsiveVariables("--rs-carousel-bleed", bleed)), 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) => (_jsx(View.Item, { className: s.item, as: "li", children: child }))) })] })));
+};
+export default Carousel;

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

@@ -0,0 +1,28 @@
+import type React from "react";
+import type * as G from "../../types/global";
+export type InstanceRef = {
+    navigateBack: () => void;
+    navigateForward: () => void;
+} | undefined;
+export declare enum ControlType {
+    back = "back",
+    forward = "forward"
+}
+export type ControlProps = {
+    type: ControlType;
+    scrollElRef: React.RefObject<HTMLElement>;
+    scrollPosition: number;
+    onClick: () => void;
+    isRTL: boolean;
+    mounted: boolean;
+};
+export type Props = {
+    children?: React.ReactNode;
+    visibleItems?: G.Responsive<number>;
+    gap?: G.Responsive<number>;
+    bleed?: G.Responsive<number>;
+    navigationDisplay?: "hidden";
+    instanceRef?: React.Ref<InstanceRef>;
+    className?: G.ClassName;
+    attributes?: G.Attributes<React.HTMLAttributes<HTMLDivElement>, keyof Props>;
+};

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

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

package/dist/components/Carousel/CarouselControl.js

@@ -0,0 +1,42 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import { classNames } from "../../utilities/helpers.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 * 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 controlClassNames = classNames(s.control, isDisplayedAsNext ? s["--control-next"] : s["--control-prev"], visible && s["--control-visible"], rendered && s["--control-rendered"]);
+    useIsomorphicLayoutEffect(() => {
+        const scrollEl = scrollElRef.current;
+        if (!scrollEl || !mounted)
+            return;
+        let timer;
+        const normalizedScrollPosition = Math.abs(scrollPosition);
+        const isScrollAtStart = normalizedScrollPosition <= 0;
+        const isScrollAtEnd = normalizedScrollPosition + scrollEl.clientWidth >= scrollEl.scrollWidth - 1;
+        const hideControl = isNext ? isScrollAtEnd : isScrollAtStart;
+        if (hideControl) {
+            setVisible(false);
+            timer = setTimeout(() => setRendered(false), 1500);
+        }
+        else {
+            setRendered(true);
+            setVisible(true);
+        }
+        return () => {
+            if (timer)
+                clearTimeout(timer);
+        };
+    }, [scrollPosition, scrollElRef.current, mounted]);
+    return (_jsx("div", { className: controlClassNames, "aria-hidden": "true", children: _jsx(Button, { onClick: onClick, icon: isDisplayedAsNext ? IconChevronRight : IconChevronLeft, rounded: true, variant: "faded", elevated: true, attributes: { "aria-disabled": !visible } }) }));
+};
+export default CarouselControl;

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

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

package/dist/components/Checkbox/Checkbox.js

@@ -0,0 +1,39 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { classNames } from "../../utilities/helpers.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 Icon from "../Icon/index.js";
+import IconCheckmark from "../../icons/Checkmark.js";
+import s from "./Checkbox.module.css";
+const Checkbox = (props) => {
+    var _a;
+    const { children, value, onChange, onFocus, onBlur, indeterminate, className, attributes, inputAttributes, } = props;
+    const checkboxGroup = useCheckboxGroup();
+    const formControl = useFormControl();
+    const hasError = (formControl === null || formControl === void 0 ? void 0 : formControl.hasError) || props.hasError || (checkboxGroup === null || checkboxGroup === void 0 ? void 0 : checkboxGroup.hasError);
+    const disabled = (formControl === null || formControl === void 0 ? void 0 : formControl.disabled) || props.disabled || (checkboxGroup === null || checkboxGroup === void 0 ? void 0 : checkboxGroup.disabled);
+    const checked = checkboxGroup ? (_a = checkboxGroup.value) === null || _a === void 0 ? void 0 : _a.includes(value) : props.checked;
+    const defaultChecked = checkboxGroup ? undefined : props.defaultChecked;
+    const name = checkboxGroup ? checkboxGroup.name : props.name;
+    const inputRef = React.useRef(null);
+    const rootClassName = classNames(s.root, className, hasError && s["--error"], disabled && s["--disabled"]);
+    const handleChange = (event) => {
+        if (!name)
+            return;
+        const { checked } = event.target;
+        const changeArgs = { name, value, checked, event };
+        if (onChange)
+            onChange(changeArgs);
+        if (checkboxGroup === null || checkboxGroup === void 0 ? void 0 : checkboxGroup.onChange)
+            checkboxGroup.onChange(changeArgs);
+    };
+    useIsomorphicLayoutEffect(() => {
+        inputRef.current.indeterminate = indeterminate || false;
+    }, [indeterminate, checked]);
+    return (_jsxs("label", Object.assign({}, attributes, { className: rootClassName, children: [_jsxs("span", { className: s.field, children: [_jsx(HiddenInput, { className: s.input, type: "checkbox", checked: checked, defaultChecked: defaultChecked, name: name, disabled: disabled, value: value, onChange: handleChange, onFocus: onFocus, onBlur: onBlur, attributes: Object.assign(Object.assign({}, inputAttributes), { ref: inputRef }) }), _jsx("div", { className: s.decorator, children: _jsx(Icon, { svg: IconCheckmark, className: s.icon }) })] }), children && _jsx("span", { className: s.text, children: children })] })));
+};
+export default Checkbox;

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

@@ -0,0 +1,26 @@
+import type React from "react";
+import type * as G from "../../types/global";
+type BaseProps = {
+    children?: React.ReactNode;
+    name?: string;
+    disabled?: boolean;
+    hasError?: boolean;
+    value?: string;
+    indeterminate?: boolean;
+    onChange?: G.ChangeHandler<boolean>;
+    onFocus?: (e: React.FocusEvent) => void;
+    onBlur?: (e: React.FocusEvent) => void;
+    className?: G.ClassName;
+    attributes?: G.Attributes<"label", Props>;
+    inputAttributes?: G.Attributes<"input", Props>;
+};
+export type ControlledProps = BaseProps & {
+    checked: boolean;
+    defaultChecked?: never;
+};
+export type UncontrolledProps = BaseProps & {
+    checked?: never;
+    defaultChecked?: boolean;
+};
+export type Props = ControlledProps | UncontrolledProps;
+export {};

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

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

package/dist/components/CheckboxGroup/CheckboxGroup.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import CheckboxGroupControlled from "./CheckboxGroupControlled.js";
+import CheckboxGroupUncontrolled from "./CheckboxGroupUncontrolled.js";
+const CheckboxGroup = (props) => {
+    const { value } = props;
+    if (value !== undefined)
+        return _jsx(CheckboxGroupControlled, Object.assign({}, props));
+    return _jsx(CheckboxGroupUncontrolled, Object.assign({}, props));
+};
+export default CheckboxGroup;

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

@@ -0,0 +1,28 @@
+import type React from "react";
+import type * as G from "../../types/global";
+import type { CheckboxProps } from "../Checkbox";
+type BaseProps = {
+    id?: string;
+    children?: React.ReactNode;
+    hasError?: boolean;
+    disabled?: boolean;
+    name: string;
+    onChange?: G.ChangeHandler<string[]>;
+};
+export type ControlledProps = BaseProps & {
+    value: string[];
+    defaultValue?: never;
+};
+export type UncontrolledProps = BaseProps & {
+    value?: never;
+    defaultValue?: string[];
+};
+export type Props = ControlledProps | UncontrolledProps;
+export type Context = {
+    onChange: CheckboxProps["onChange"];
+    hasError?: boolean;
+    disabled?: boolean;
+    name: string;
+    value?: string[];
+};
+export {};

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

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

package/dist/components/CheckboxGroup/CheckboxGroupControlled.js

@@ -0,0 +1,22 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import Context from "./CheckboxGroup.context.js";
+const CheckboxGroupControlled = (props) => {
+    const { onChange, name, disabled, value, children, hasError } = props;
+    const handleChange = (args) => {
+        const { event, value: fieldValue, checked } = args;
+        if (!fieldValue)
+            return;
+        let nextValue = [...value];
+        if (checked) {
+            nextValue.push(fieldValue);
+        }
+        else {
+            nextValue = nextValue.filter((v) => v !== fieldValue);
+        }
+        if (onChange)
+            onChange({ name, value: nextValue, event });
+    };
+    return (_jsx(Context.Provider, { value: { onChange: handleChange, disabled, value, name, hasError }, children: children }));
+};
+export default CheckboxGroupControlled;

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

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

package/dist/components/CheckboxGroup/CheckboxGroupUncontrolled.js

@@ -0,0 +1,17 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import CheckboxGroupControlled from "./CheckboxGroupControlled.js";
+const CheckboxGroupUncontrolled = (props) => {
+    const { defaultValue, onChange } = props;
+    const [value, setValue] = React.useState(defaultValue || []);
+    const handleChange = (args) => {
+        if (!args.value)
+            return;
+        setValue(args.value);
+        if (onChange)
+            onChange(args);
+    };
+    return (_jsx(CheckboxGroupControlled, Object.assign({}, props, { value: value, defaultValue: undefined, onChange: handleChange })));
+};
+export default CheckboxGroupUncontrolled;

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

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