@via-profit/ui-kit 0.3.0 → 0.5.0

package/esm/Calendar/CalendarYearsSelector.js

@@ -0,0 +1,59 @@
+import React from 'react';
+import styled from '@emotion/styled';
+import YearCell from './CalendarYearCell';
+import useCalendar from './use-calendar';
+/**
+ * A plain scrollable grid: a couple of hundreds buttons do not need the virtualization
+ */
+const SelectorContainer = styled.div `
+  flex: 1;
+  display: flex;
+  flex-wrap: wrap;
+  align-content: flex-start;
+  overflow-y: auto;
+  padding: 0.8em;
+  height: 100%;
+  box-sizing: border-box;
+`;
+const CalendarYearsSelector = (props, ref) => {
+    const { years, date, overrides, accentColor = 'primary', locale = 'ru-RU', minDate, maxDate, onChange, } = props;
+    const containerRef = React.useRef(null);
+    const selectedRef = React.useRef(null);
+    const overridesMap = React.useMemo(() => ({
+        YearCell: (overrides === null || overrides === void 0 ? void 0 : overrides.YearCell) || YearCell,
+    }), [overrides]);
+    const { getYearLabel } = useCalendar({
+        locale,
+        minDate,
+        maxDate,
+        weekStartDay: 'monday',
+        displayLeadingZero: false,
+    });
+    // Show the selected year in the middle of the list.
+    // The container is scrolled directly: scrollIntoView would scroll the page too
+    React.useLayoutEffect(() => {
+        const container = containerRef.current;
+        const selected = selectedRef.current;
+        if (container && selected) {
+            container.scrollTop =
+                selected.offsetTop -
+                    container.offsetTop -
+                    container.clientHeight / 2 +
+                    selected.offsetHeight / 2;
+        }
+    }, []);
+    const setRefs = (el) => {
+        containerRef.current = el;
+        if (typeof ref === 'function') {
+            ref(el);
+        }
+        else if (ref) {
+            ref.current = el;
+        }
+    };
+    return (React.createElement(SelectorContainer, { ref: setRefs }, years.map(year => {
+        const isSelected = date.getFullYear() === year;
+        return (React.createElement(overridesMap.YearCell, { key: year, ref: isSelected ? selectedRef : undefined, accentColor: accentColor, isSelected: isSelected, "aria-pressed": isSelected, onClick: () => onChange(year) }, getYearLabel(new Date(year, 0, 1))));
+    })));
+};
+export default React.forwardRef(CalendarYearsSelector);

package/esm/Calendar/IconChevronDown.js

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { forwardRef } from 'react';
+const IconChevronDown = (props, ref) => (React.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 512 512", ref: ref }, props),
+    React.createElement("path", { d: "m105.79 160.82a24 24 0 0 0-10.76 6.2109 24 24 0 0 0 0 33.941l144 144a24.002 24.002 0 0 0 33.941 0l144-144a24 24 0 0 0 0-33.941 24 24 0 0 0-33.941 0l-127.03 127.03-127.03-127.03a24 24 0 0 0-23.182-6.2109z", fill: "currentColor" })));
+const ForwardRef = forwardRef(IconChevronDown);
+export default ForwardRef;

package/esm/Calendar/index.js

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { CalendarComponent } from './CalendarComponent';
+import ErrorBoundary from '../ErrorBoundary';
+export * from './CalendarComponent';
+const Calendar = React.forwardRef((props, ref) => (React.createElement(ErrorBoundary, null,
+    React.createElement(CalendarComponent, Object.assign({}, props, { ref: ref })))));
+Calendar.displayName = 'Calendar';
+export default Calendar;

package/esm/Calendar/use-calendar.js

@@ -0,0 +1,155 @@
+import React from 'react';
+const WHITESPACE = '\u{0020}';
+const DAY_IN_MS = 86400000; // 24 * 60 * 60 * 1000
+// Константа для маппинга дней недели
+const WEEK_DAYS_MAP = {
+    sunday: 0,
+    monday: 1,
+    tuesday: 2,
+    wednesday: 3,
+    thursday: 4,
+    friday: 5,
+    saturday: 6,
+};
+export const useCalendar = (props) => {
+    const { minDate, maxDate, weekStartDay, displayLeadingZero, locale } = props;
+    // Мемоизируем timestamp граничных дат для оптимизации проверок isDisabled.
+    // Границы расширяются до целых дней, иначе при minDate={new Date()} сегодняшний день недоступен
+    const minTime = React.useMemo(() => new Date(minDate.getFullYear(), minDate.getMonth(), minDate.getDate()).getTime(), [minDate]);
+    const maxTime = React.useMemo(() => new Date(maxDate.getFullYear(), maxDate.getMonth(), maxDate.getDate(), 23, 59, 59, 999).getTime(), [maxDate]);
+    // Мемоизируем номер дня начала недели
+    const weekStartDayNumber = React.useMemo(() => WEEK_DAYS_MAP[weekStartDay], [weekStartDay]);
+    // Оптимизированная функция isSameDay
+    const isSameDay = React.useCallback((a, b) => a.getFullYear() === b.getFullYear() &&
+        a.getMonth() === b.getMonth() &&
+        a.getDate() === b.getDate(), []);
+    // Мемоизируем сегодняшнюю дату для isToday
+    const today = React.useMemo(() => {
+        const now = new Date();
+        return new Date(now.getFullYear(), now.getMonth(), now.getDate());
+    }, []);
+    const isToday = React.useCallback((dateValue) => isSameDay(dateValue, today), [isSameDay, today]);
+    const isDisabled = React.useCallback((dateValue) => {
+        const currentTime = dateValue.getTime();
+        return currentTime > maxTime || currentTime < minTime;
+    }, [maxTime, minTime]);
+    const calculateWeekNumber = React.useCallback((date) => {
+        // Используем UTC методы для избежания проблем с часовыми поясами (DST)
+        const d = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()));
+        // Неделя с понедельника - ISO 8601: первая неделя года содержит первый четверг
+        if (weekStartDayNumber === WEEK_DAYS_MAP.monday) {
+            const isoDay = d.getUTCDay() || 7;
+            const thursday = new Date(d.getTime() + (4 - isoDay) * DAY_IN_MS);
+            const yearStart = Date.UTC(thursday.getUTCFullYear(), 0, 1);
+            return Math.ceil(((thursday.getTime() - yearStart) / DAY_IN_MS + 1) / 7);
+        }
+        // Остальные системы: первая неделя года содержит 1 января
+        const diff = (d.getUTCDay() - weekStartDayNumber + 7) % 7;
+        const weekStart = d.getTime() - diff * DAY_IN_MS;
+        const weekEnd = new Date(weekStart + 6 * DAY_IN_MS);
+        // Неделя содержит 1 января следующего года
+        if (weekEnd.getUTCFullYear() !== new Date(weekStart).getUTCFullYear()) {
+            return 1;
+        }
+        const yearStart = new Date(Date.UTC(new Date(weekStart).getUTCFullYear(), 0, 1));
+        const firstWeekStart = yearStart.getTime() - ((yearStart.getUTCDay() - weekStartDayNumber + 7) % 7) * DAY_IN_MS;
+        return Math.round((weekStart - firstWeekStart) / (7 * DAY_IN_MS)) + 1;
+    }, [weekStartDayNumber]);
+    const getDayLabel = React.useCallback((day) => {
+        const dateNum = day.getDate();
+        return displayLeadingZero ? dateNum.toString().padStart(2, '0') : dateNum.toString();
+    }, [displayLeadingZero]);
+    // Мемоизируем Intl форматеры для производительности
+    const monthFormatter = React.useMemo(() => (typeof Intl !== 'undefined' ? new Intl.DateTimeFormat(locale, { month: 'long' }) : null), [locale]);
+    const yearFormatter = React.useMemo(() => typeof Intl !== 'undefined' ? new Intl.DateTimeFormat(locale, { year: 'numeric' }) : null, [locale]);
+    const getMonthLabel = React.useCallback((dateValue) => {
+        if (!monthFormatter)
+            return WHITESPACE;
+        const title = monthFormatter.format(dateValue);
+        return title.charAt(0).toUpperCase() + title.slice(1);
+    }, [monthFormatter]);
+    const getYearLabel = React.useCallback((dateValue) => { var _a; return (_a = yearFormatter === null || yearFormatter === void 0 ? void 0 : yearFormatter.format(dateValue)) !== null && _a !== void 0 ? _a : WHITESPACE; }, [yearFormatter]);
+    const getYearsRange = React.useCallback((minDate, maxDate) => {
+        const years = [];
+        const startYear = minDate.getFullYear();
+        const endYear = maxDate.getFullYear();
+        for (let year = startYear; year <= endYear; year++) {
+            years.push(year);
+        }
+        return years;
+    }, []);
+    const getMonthsRange = React.useCallback((minDate, maxDate, year) => {
+        const m = [];
+        const y = typeof year === 'number' ? year : new Date().getFullYear();
+        for (let index = 0; index < 12; index++) {
+            const monthStart = new Date(y, index, 1, 0, 0, 0, 0);
+            const monthEnd = new Date(y, index + 1, 0, 23, 59, 59, 999);
+            // Месяц подходит, если хотя бы частично попадает в диапазон
+            if (monthStart.getTime() <= maxDate.getTime() && monthEnd.getTime() >= minDate.getTime()) {
+                m.push(index);
+            }
+        }
+        return m;
+    }, []);
+    const weeksCache = React.useRef(new Map());
+    const getWeeks = React.useCallback((needleDate) => {
+        const year = needleDate.getFullYear();
+        const month = needleDate.getMonth();
+        const cacheKey = `${year}-${month}-${weekStartDay}-${minTime}-${maxTime}`;
+        const cached = weeksCache.current.get(cacheKey);
+        if (cached) {
+            return cached;
+        }
+        // Первый и последний день месяца
+        const firstDay = new Date(year, month, 1);
+        const lastDay = new Date(year, month + 1, 0);
+        // Вычисляем начало календарной сетки
+        const startOffset = (firstDay.getDay() - weekStartDayNumber + 7) % 7;
+        const startDate = new Date(year, month, 1 - startOffset);
+        // Вычисляем конец календарной сетки
+        const endOffset = (weekStartDayNumber + 6 - lastDay.getDay() + 7) % 7;
+        const endDate = new Date(year, month, lastDay.getDate() + endOffset);
+        const weeks = [];
+        const currentDate = new Date(startDate);
+        // Предаллоцируем массив для дней недели
+        const weekDays = new Array(7);
+        while (currentDate <= endDate) {
+            // Заполняем дни недели
+            for (let i = 0; i < 7; i++) {
+                const date = new Date(currentDate);
+                weekDays[i] = {
+                    date,
+                    isToday: isToday(date),
+                    isDisabled: isDisabled(date),
+                };
+                currentDate.setDate(currentDate.getDate() + 1);
+            }
+            // Создаем копию массива дней для недели
+            weeks.push({
+                weekNumber: calculateWeekNumber(weekDays[0].date),
+                days: [...weekDays],
+            });
+        }
+        // Сохраняем в кэш
+        weeksCache.current.set(cacheKey, weeks);
+        // Очищаем старые записи кэша (если больше 10)
+        if (weeksCache.current.size > 10) {
+            const keys = Array.from(weeksCache.current.keys());
+            for (let i = 0; i < keys.length - 10; i++) {
+                weeksCache.current.delete(keys[i]);
+            }
+        }
+        return weeks;
+    }, [weekStartDay, minTime, maxTime, weekStartDayNumber, calculateWeekNumber, isToday, isDisabled]);
+    return {
+        isSameDay,
+        isToday,
+        getWeeks,
+        getDayLabel,
+        getMonthLabel,
+        getYearLabel,
+        getYearsRange,
+        getMonthsRange,
+    };
+};
+export default useCalendar;

package/esm/Checkbox/CheckboxAsterisk.js

@@ -0,0 +1,25 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import * as React from 'react';
+import styled from '@emotion/styled';
+const Asterisk = styled.span `
+  font-size: 0.8em;
+  margin-left: 0.2em;
+  position: relative;
+  top: -0.4em;
+  color: ${({ theme }) => theme.color.error.toString()};
+`;
+const CheckboxAsterisk = (props, ref) => {
+    const { children, error, focused } = props, nativeProps = __rest(props, ["children", "error", "focused"]);
+    return (React.createElement(Asterisk, Object.assign({}, nativeProps, { "$error": error, "$focused": focused, ref: ref }), children));
+};
+export default React.forwardRef(CheckboxAsterisk);

package/esm/Checkbox/CheckboxBox.js

@@ -0,0 +1,85 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import styled from '@emotion/styled';
+import { css } from '@emotion/react';
+import useCheckboxColor from './useCheckboxColor';
+import { themeFocusRing } from '../ThemeProvider/tokens';
+const Root = styled.span `
+  position: relative;
+  display: inline-flex;
+  flex-shrink: 0;
+  width: 1.15em;
+  height: 1.15em;
+`;
+const StyledInput = styled.input `
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  opacity: 0;
+  cursor: inherit;
+  z-index: 1;
+
+  /* Data attributes, not class names: emotion labels are absent in the published package */
+  &:focus-visible + [data-checkbox-square] {
+    outline: 0.14em solid ${({ theme }) => theme.color.accentPrimary.toString()};
+    outline-offset: 0.14em;
+  }
+  ${({ theme }) => themeFocusRing(theme, '&:focus-visible + [data-checkbox-square]')}
+`;
+const Square = styled.span `
+  box-sizing: border-box;
+  display: flex;
+  width: 100%;
+  height: 100%;
+  border-width: 0.1em;
+  border-style: solid;
+  /* Scaled down: the square is small, the full radius would turn it into a circle */
+  border-radius: ${({ theme }) => theme.shape.radiusFactor * 0.6}em;
+  background-color: ${({ theme }) => theme.color.surface.toString()};
+  color: ${({ $color }) => $color.toString()};
+  transition: border-color 150ms ease-out;
+  border-color: ${({ theme, $color, $active, $error }) => {
+    switch (true) {
+        case $error:
+            return theme.color.error.toString();
+        case $active:
+            return $color.toString();
+        default:
+            return theme.color.textPrimary.alpha(0.4).toString();
+    }
+}};
+
+  ${({ $disabled, $error, $color }) => !$disabled &&
+    !$error &&
+    css `
+      label:hover & {
+        border-color: ${$color.toString()};
+      }
+    `}
+`;
+/**
+ * The square with the native input over it.
+ * The ref and the input attributes go to the input: it is the element that holds the value and the focus.
+ * `className` and `style` go to the root element, so `styled(CheckboxBox)` styles the square
+ */
+const CheckboxBox = (props, ref) => {
+    const { children, indeterminate, error, color, checked, disabled, className, style } = props, nativeProps = __rest(props, ["children", "indeterminate", "error", "color", "checked", "disabled", "className", "style"]);
+    const $color = useCheckboxColor(color);
+    return (React.createElement(Root, { className: className, style: style },
+        React.createElement(StyledInput, Object.assign({}, nativeProps, { checked: checked, disabled: disabled, type: "checkbox", ref: ref })),
+        React.createElement(Square, { "data-checkbox-square": "", "$color": $color, "$active": Boolean(checked || indeterminate), "$error": Boolean(error), "$disabled": Boolean(disabled) }, children)));
+};
+export default React.forwardRef(CheckboxBox);

package/esm/Checkbox/CheckboxContainer.js

@@ -0,0 +1,33 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import styled from '@emotion/styled';
+const directions = {
+    start: 'row-reverse',
+    end: 'row',
+    top: 'column-reverse',
+    bottom: 'column',
+};
+const StyledContainer = styled.label `
+  cursor: ${({ $disabled }) => ($disabled ? 'default' : 'pointer')};
+  font-size: 1em;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5em;
+  opacity: ${({ $disabled }) => ($disabled ? 0.6 : 1)};
+  flex-direction: ${({ $labelPosition }) => directions[$labelPosition || 'end']};
+`;
+const CheckboxContainer = (props, ref) => {
+    const { children, labelPosition, disabled } = props, nativeProps = __rest(props, ["children", "labelPosition", "disabled"]);
+    return (React.createElement(StyledContainer, Object.assign({}, nativeProps, { "$labelPosition": labelPosition, "$disabled": disabled, ref: ref }), children));
+};
+export default React.forwardRef(CheckboxContainer);

package/esm/Checkbox/CheckboxErrorText.js

@@ -0,0 +1,48 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import * as React from 'react';
+import styled from '@emotion/styled';
+import NoSSR from '../NoSSR';
+const ErrorTextContainer = styled.div `
+  margin-left: 0.5em;
+  max-height: 0;
+  max-height: ${({ $maxHeight }) => typeof $maxHeight === 'number' ? `${$maxHeight}px` : $maxHeight};
+  transition: max-height 240ms cubic-bezier(0.22, 0.61, 0.36, 1);
+  overflow: hidden;
+`;
+const ErrorTextInner = styled.div `
+  color: ${({ theme }) => theme.color.error.toString()};
+  font-size: 0.8em;
+  transform: translateY(${({ $error }) => ($error ? 0 : '0.2em')});
+  opacity: ${({ $error }) => ($error ? 1 : 0)};
+  transition: all 240ms 240ms ease-out;
+`;
+const CheckboxErrorText = (props, ref) => {
+    const { children, error } = props, nativeProps = __rest(props, ["children", "error"]);
+    const innerRef = React.useRef(null);
+    const [maxHeight, setMaxHeight] = React.useState('initial');
+    React.useEffect(() => {
+        const updateMaxHeight = () => {
+            if (innerRef.current && innerRef.current.getBoundingClientRect().height > 0) {
+                setMaxHeight(innerRef.current.getBoundingClientRect().height);
+            }
+        };
+        updateMaxHeight();
+        window.addEventListener('resize', updateMaxHeight);
+        return () => {
+            window.removeEventListener('resize', updateMaxHeight);
+        };
+    }, [children]);
+    return (React.createElement(ErrorTextContainer, Object.assign({}, nativeProps, { "$maxHeight": error ? maxHeight : 0, ref: ref }),
+        React.createElement(ErrorTextInner, { ref: innerRef, "$error": Boolean(error) }, children ? React.createElement(NoSSR, null, children) : React.createElement(React.Fragment, null, "\u00A0"))));
+};
+export default React.forwardRef(CheckboxErrorText);

package/esm/Checkbox/CheckboxIcon.js

@@ -0,0 +1,52 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import styled from '@emotion/styled';
+const IconWrapper = styled.span `
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+`;
+const Check = styled.svg `
+  position: absolute;
+  font-size: 0.7em;
+  opacity: ${({ $visible }) => ($visible ? 1 : 0)};
+  transform: scale(${({ $visible }) => ($visible ? 1 : 0.5)});
+  transition:
+    opacity 150ms ease-out,
+    transform 150ms ease-out;
+`;
+const Dash = styled.span `
+  position: absolute;
+  width: 0.6em;
+  height: 0.15em;
+  border-radius: 0.1em;
+  background-color: currentColor;
+  opacity: ${({ $visible }) => ($visible ? 1 : 0)};
+  transition: opacity 150ms ease-out;
+`;
+/**
+ * The check mark or the dash of the indeterminate state.
+ * The color is inherited (currentColor)
+ */
+const CheckboxIcon = (props, ref) => {
+    const { checked, indeterminate } = props, nativeProps = __rest(props, ["checked", "indeterminate"]);
+    return (React.createElement(IconWrapper, Object.assign({ "aria-hidden": true }, nativeProps, { ref: ref }),
+        React.createElement(Check, { "$visible": checked && !indeterminate, xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 512 512" },
+            React.createElement("path", { fill: "currentColor", d: "M500.088 83.681c-15.841-15.862-41.564-15.852-57.426 0L184.205 342.148 69.332 227.276c-15.862-15.862-41.574-15.862-57.436 0-15.862 15.862-15.862 41.574 0 57.436l143.585 143.585c7.926 7.926 18.319 11.899 28.713 11.899 10.394 0 20.797-3.963 28.723-11.899l287.171-287.181c15.862-15.851 15.862-41.574 0-57.435z" })),
+        React.createElement(Dash, { "$visible": indeterminate })));
+};
+export default React.forwardRef(CheckboxIcon);

package/esm/Checkbox/CheckboxTextWrapper.js

@@ -0,0 +1,24 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import styled from '@emotion/styled';
+const TextWrapper = styled.span `
+  font-size: 0.86em;
+  display: flex;
+  align-items: center;
+  user-select: none;
+`;
+const CheckboxTextWrapper = (props, ref) => {
+    const { children } = props, nativeProps = __rest(props, ["children"]);
+    return (React.createElement(TextWrapper, Object.assign({}, nativeProps, { ref: ref }), children));
+};
+export default React.forwardRef(CheckboxTextWrapper);

package/esm/Checkbox/CheckboxWrapper.js

@@ -0,0 +1,24 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import styled from '@emotion/styled';
+const StyledWrapper = styled.span `
+  font-size: 1em;
+  display: inline-flex;
+  flex-direction: column;
+  align-items: flex-start;
+`;
+const CheckboxWrapper = (props, ref) => {
+    const { children } = props, nativeProps = __rest(props, ["children"]);
+    return (React.createElement(StyledWrapper, Object.assign({}, nativeProps, { ref: ref }), children));
+};
+export default React.forwardRef(CheckboxWrapper);

package/esm/Checkbox/index.js

@@ -0,0 +1,67 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import Wrapper from './CheckboxWrapper';
+import Container from './CheckboxContainer';
+import Box from './CheckboxBox';
+import Icon from './CheckboxIcon';
+import TextWrapper from './CheckboxTextWrapper';
+import Asterisk from './CheckboxAsterisk';
+import ErrorText from './CheckboxErrorText';
+import useThemeProps from '../ThemeProvider/useThemeProps';
+const Checkbox = (props, ref) => {
+    const _a = useThemeProps('Checkbox', props), { checked, defaultChecked, onChange, indeterminate = false, disabled, color, labelPosition, error, errorText, requiredAsterisk, overrides, children, className, style } = _a, nativeProps = __rest(_a, ["checked", "defaultChecked", "onChange", "indeterminate", "disabled", "color", "labelPosition", "error", "errorText", "requiredAsterisk", "overrides", "children", "className", "style"]);
+    const inputRef = React.useRef(null);
+    const [internalChecked, setInternalChecked] = React.useState(Boolean(defaultChecked));
+    const isControlled = typeof checked !== 'undefined';
+    const isChecked = isControlled ? Boolean(checked) : internalChecked;
+    const overridesMap = React.useMemo(() => ({
+        Wrapper: (overrides === null || overrides === void 0 ? void 0 : overrides.Wrapper) || Wrapper,
+        Container: (overrides === null || overrides === void 0 ? void 0 : overrides.Container) || Container,
+        Box: (overrides === null || overrides === void 0 ? void 0 : overrides.Box) || Box,
+        Icon: (overrides === null || overrides === void 0 ? void 0 : overrides.Icon) || Icon,
+        TextWrapper: (overrides === null || overrides === void 0 ? void 0 : overrides.TextWrapper) || TextWrapper,
+        Asterisk: (overrides === null || overrides === void 0 ? void 0 : overrides.Asterisk) || Asterisk,
+        ErrorText: (overrides === null || overrides === void 0 ? void 0 : overrides.ErrorText) || ErrorText,
+    }), [overrides]);
+    React.useImperativeHandle(ref, () => inputRef.current);
+    // `indeterminate` exists only as the DOM property, not as the attribute.
+    // The browser resets it on click, so it is restored after every change
+    React.useEffect(() => {
+        if (inputRef.current) {
+            inputRef.current.indeterminate = indeterminate;
+        }
+    }, [indeterminate, isChecked]);
+    // Warn once, not on every render
+    const isControlledWithoutOnChange = isControlled && typeof onChange === 'undefined';
+    React.useEffect(() => {
+        if (isControlledWithoutOnChange) {
+            console.error('The property «onChange» should be passed with prop «checked» to make component controlled');
+        }
+    }, [isControlledWithoutOnChange]);
+    const handleChange = event => {
+        if (!isControlled) {
+            setInternalChecked(event.currentTarget.checked);
+        }
+        onChange === null || onChange === void 0 ? void 0 : onChange(event);
+    };
+    return (React.createElement(overridesMap.Wrapper, { className: className, style: style },
+        React.createElement(overridesMap.Container, { labelPosition: labelPosition, disabled: disabled },
+            React.createElement(overridesMap.Box, Object.assign({}, nativeProps, { checked: isChecked, onChange: handleChange, disabled: disabled, indeterminate: indeterminate, color: color, error: error, "aria-invalid": error || undefined, ref: inputRef }),
+                React.createElement(overridesMap.Icon, { checked: isChecked, indeterminate: indeterminate })),
+            (typeof children !== 'undefined' ||
+                (requiredAsterisk != null && requiredAsterisk !== false)) && (React.createElement(overridesMap.TextWrapper, null,
+                children,
+                requiredAsterisk != null && requiredAsterisk !== false && (React.createElement(overridesMap.Asterisk, null, typeof requiredAsterisk === 'boolean' ? '*' : requiredAsterisk))))),
+        typeof errorText !== 'undefined' && (React.createElement(overridesMap.ErrorText, { error: error }, errorText))));
+};
+export default React.forwardRef(Checkbox);

package/esm/Checkbox/useCheckboxColor.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { useTheme } from '@emotion/react';
+import Color from '../Color';
+/**
+ * Resolves the `color` property of the Checkbox to the Color instance
+ */
+const useCheckboxColor = (color) => {
+    const theme = useTheme();
+    return React.useMemo(() => {
+        switch (true) {
+            case color === 'secondary':
+                return theme.color.accentSecondary;
+            case typeof color === 'undefined':
+            case color === 'default':
+            case color === 'primary':
+                return theme.color.accentPrimary;
+            default:
+                try {
+                    return Color.fromString(String(color));
+                }
+                catch (err) {
+                    console.error(`invalid color value «${color}»`);
+                    return theme.color.accentPrimary;
+                }
+        }
+    }, [color, theme.color]);
+};
+export default useCheckboxColor;