@via-profit/ui-kit 0.3.0 → 0.5.0

package/Calendar/CalendarMonthCell.js

@@ -24,20 +24,10 @@ const Btn = (0, styled_1.default)(Button_1.default) `
   font-size: 0.8em;
   margin: 0;
   min-width: 0;
-  outline: none;
   flex-basis: 50%;
 `;
 const CalendarMonthCell = (props, ref) => {
     const { children, isSelected, accentColor } = props, restProps = __rest(props, ["children", "isSelected", "accentColor"]);
-    const myRef = react_1.default.useRef(null);
-    return (react_1.default.createElement(Btn, Object.assign({}, restProps, { type: "button", variant: isSelected ? 'standard' : 'plain', color: isSelected ? accentColor : 'default', ref: el => {
-            if (typeof ref === 'function') {
-                ref(el);
-            }
-            if (ref && typeof ref === 'object') {
-                ref.current = el;
-            }
-            myRef.current = el;
-        } }), children));
+    return (react_1.default.createElement(Btn, Object.assign({}, restProps, { type: "button", variant: isSelected ? 'standard' : 'plain', color: isSelected ? accentColor : 'default', ref: ref }), children));
 };
 exports.default = react_1.default.forwardRef(CalendarMonthCell);

package/Calendar/CalendarPaper.js

@@ -16,6 +16,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
+const tokens_1 = require("../ThemeProvider/tokens");
 const StyledCalendarPaper = styled_1.default.div `
   width: 18em;
   position: relative;
@@ -24,7 +25,7 @@ const StyledCalendarPaper = styled_1.default.div `
   justify-content: stretch;
   background-color: ${({ theme }) => theme.color.surface.toString()};
   border-radius: ${({ theme }) => theme.shape.radiusFactor}em;
-  box-shadow: 0 4px 24px ${({ theme }) => theme.color.surface.darken(50).alpha(0.6).toString()};
+  box-shadow: ${({ theme }) => (0, tokens_1.elevation)(theme, 'popup', `0 4px 24px ${theme.color.surface.darken(50).alpha(0.6).toString()}`)};
 `;
 const CalendarPaper = (props, ref) => {
     const { children } = props, restProps = __rest(props, ["children"]);

package/Calendar/CalendarWeekDayLabel.js

@@ -6,7 +6,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
 const CalendarWeekDayLabel = styled_1.default.div `
-  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   font-weight: 200;
   font-size: 0.8em;
   user-select: none;

package/Calendar/CalendarWeekDaysBar.js

@@ -29,6 +29,11 @@ const CalendarWeekDaysBar = (props, ref) => {
             weekday: format,
         }).format(day.date)
         : '\u{0020}'), [format, locale, week]);
-    return (react_1.default.createElement(Container, Object.assign({}, restProps, { ref: ref }), weekDayLabels.map(label => (react_1.default.createElement(CalendarWeekDayLabel_1.default, { key: label }, label)))));
+    return (
+    // Hidden from screen readers: every day cell has the full date label with the weekday
+    react_1.default.createElement(Container, Object.assign({ "aria-hidden": true }, restProps, { ref: ref }), weekDayLabels.map((label, index) => (
+    // The narrow labels repeat (e.g. «С» for Wednesday and Saturday), so the key is the index
+    // eslint-disable-next-line react/no-array-index-key
+    react_1.default.createElement(CalendarWeekDayLabel_1.default, { key: index }, label)))));
 };
 exports.default = react_1.default.forwardRef(CalendarWeekDaysBar);

package/Calendar/CalendarYearCell.js

@@ -24,25 +24,10 @@ const Btn = (0, styled_1.default)(Button_1.default) `
   font-size: 0.9em;
   margin: 0;
   min-width: 0;
-  outline: none;
   flex-basis: 33%;
 `;
 const CalendarYearCell = (props, ref) => {
     const { children, isSelected, accentColor } = props, restProps = __rest(props, ["children", "isSelected", "accentColor"]);
-    const myRef = react_1.default.useRef(null);
-    // React.useEffect(() => {
-    //   if (isSelected && myRef.current) {
-    //     myRef.current.scrollIntoView({ behavior: 'instant' });
-    //   }
-    // }, [isSelected]);
-    return (react_1.default.createElement(Btn, Object.assign({}, restProps, { type: "button", variant: isSelected ? 'standard' : 'plain', color: isSelected ? accentColor : 'default', ref: el => {
-            if (typeof ref === 'function') {
-                ref(el);
-            }
-            if (ref && typeof ref === 'object') {
-                ref.current = el;
-            }
-            myRef.current = el;
-        } }), children));
+    return (react_1.default.createElement(Btn, Object.assign({}, restProps, { type: "button", variant: isSelected ? 'standard' : 'plain', color: isSelected ? accentColor : 'default', ref: ref }), children));
 };
 exports.default = react_1.default.forwardRef(CalendarYearCell);

package/Calendar/CalendarYearsSelector.d.ts

@@ -16,7 +16,6 @@ export type CalendarYearsSelectorProps = {
     readonly date: Date;
     /**
      * Minimum date limit
-  
      */
     readonly minDate: Date;
     /**

package/Calendar/CalendarYearsSelector.js

@@ -7,27 +7,23 @@ const react_1 = __importDefault(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
 const CalendarYearCell_1 = __importDefault(require("./CalendarYearCell"));
 const use_calendar_1 = __importDefault(require("./use-calendar"));
-const VirtualizedList_1 = __importDefault(require("../Menu/VirtualizedList"));
+/**
+ * A plain scrollable grid: a couple of hundreds buttons do not need the virtualization
+ */
 const SelectorContainer = styled_1.default.div `
-  display: flex;
   flex: 1;
+  display: flex;
+  flex-wrap: wrap;
+  align-content: flex-start;
+  overflow-y: auto;
   padding: 0.8em;
   height: 100%;
-  width: 100%;
-`;
-const SelectorContainerInner = styled_1.default.div `
-  flex: 1;
-  position: relative;
-`;
-const Chunk = styled_1.default.div `
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
+  box-sizing: border-box;
 `;
 const CalendarYearsSelector = (props, ref) => {
-    const containerRef = react_1.default.useRef(null);
     const { years, date, overrides, accentColor = 'primary', locale = 'ru-RU', minDate, maxDate, onChange, } = props;
-    const [maxHeight, setMaxHeight] = react_1.default.useState(undefined);
+    const containerRef = react_1.default.useRef(null);
+    const selectedRef = react_1.default.useRef(null);
     const overridesMap = react_1.default.useMemo(() => ({
         YearCell: (overrides === null || overrides === void 0 ? void 0 : overrides.YearCell) || CalendarYearCell_1.default,
     }), [overrides]);
@@ -38,29 +34,31 @@ const CalendarYearsSelector = (props, ref) => {
         weekStartDay: 'monday',
         displayLeadingZero: false,
     });
-    const items2 = react_1.default.useMemo(() => {
-        const list = [];
-        for (let i = 0; i < years.length; i += 3) {
-            list.push(years.slice(i, i + 3).map(year => {
-                const item = {
-                    value: year,
-                    label: getYearLabel(new Date(year, date.getMonth(), date.getDate(), 0, 0, 0, 0)),
-                };
-                return item;
-            }));
-        }
-        return list;
-    }, [date, getYearLabel, years]);
+    // Show the selected year in the middle of the list.
+    // The container is scrolled directly: scrollIntoView would scroll the page too
     react_1.default.useLayoutEffect(() => {
-        if (containerRef.current) {
-            setMaxHeight(containerRef.current.getBoundingClientRect().height);
+        const container = containerRef.current;
+        const selected = selectedRef.current;
+        if (container && selected) {
+            container.scrollTop =
+                selected.offsetTop -
+                    container.offsetTop -
+                    container.clientHeight / 2 +
+                    selected.offsetHeight / 2;
         }
     }, []);
-    const renderItem = react_1.default.useCallback((item) => (react_1.default.createElement(Chunk, null, item.map(item => {
-        const isSelected = date.getFullYear() === item.value;
-        return (react_1.default.createElement(overridesMap.YearCell, { key: item.value, accentColor: accentColor, isSelected: isSelected, onClick: () => onChange(item.value) }, item.label));
-    }))), [accentColor, date, onChange, overridesMap]);
-    return (react_1.default.createElement(SelectorContainer, { ref: ref },
-        react_1.default.createElement(SelectorContainerInner, { ref: containerRef }, maxHeight && react_1.default.createElement(VirtualizedList_1.default, { items: items2, renderItem: renderItem }))));
+    const setRefs = (el) => {
+        containerRef.current = el;
+        if (typeof ref === 'function') {
+            ref(el);
+        }
+        else if (ref) {
+            ref.current = el;
+        }
+    };
+    return (react_1.default.createElement(SelectorContainer, { ref: setRefs }, years.map(year => {
+        const isSelected = date.getFullYear() === year;
+        return (react_1.default.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))));
+    })));
 };
 exports.default = react_1.default.forwardRef(CalendarYearsSelector);

package/Calendar/use-calendar.d.ts

@@ -1,4 +1,4 @@
-export type CalendarValue<Range> = Range extends undefined ? Date | null : [Date, Date] | [Date, Date | null] | null;
+export type CalendarValue<Range> = Range extends true ? [Date, Date] | [Date, Date | null] | null : Date | null;
 export type WeekDayName = 'sunday' | 'monday' | 'tuesday' | 'wednesday' | 'thursday' | 'friday' | 'saturday';
 export type Day = {
     readonly date: Date;

package/Checkbox/CheckboxAsterisk.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+export interface CheckboxAsteriskProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /**
+     * If true, the asterisk will be set the error color
+     */
+    readonly error?: boolean;
+    /**
+     * Not used
+     */
+    readonly focused?: boolean;
+}
+declare const _default: React.ForwardRefExoticComponent<CheckboxAsteriskProps & React.RefAttributes<HTMLSpanElement>>;
+export default _default;

package/Checkbox/CheckboxAsterisk.js

@@ -0,0 +1,53 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = __importStar(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const Asterisk = styled_1.default.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));
+};
+exports.default = React.forwardRef(CheckboxAsterisk);

package/Checkbox/CheckboxBox.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+export type CheckboxBoxProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> & {
+    /**
+     * Shows the dash instead of the check mark (e.g. «select all» when only some items are selected)
+     */
+    readonly indeterminate?: boolean;
+    /**
+     * Paints the border with the error color
+     */
+    readonly error?: boolean;
+};
+declare const _default: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> & {
+    /**
+     * Shows the dash instead of the check mark (e.g. «select all» when only some items are selected)
+     */
+    readonly indeterminate?: boolean | undefined;
+    /**
+     * Paints the border with the error color
+     */
+    readonly error?: boolean | undefined;
+} & React.RefAttributes<HTMLInputElement>>;
+export default _default;

package/Checkbox/CheckboxBox.js

@@ -0,0 +1,90 @@
+"use strict";
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const react_2 = require("@emotion/react");
+const useCheckboxColor_1 = __importDefault(require("./useCheckboxColor"));
+const tokens_1 = require("../ThemeProvider/tokens");
+const Root = styled_1.default.span `
+  position: relative;
+  display: inline-flex;
+  flex-shrink: 0;
+  width: 1.15em;
+  height: 1.15em;
+`;
+const StyledInput = styled_1.default.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 }) => (0, tokens_1.themeFocusRing)(theme, '&:focus-visible + [data-checkbox-square]')}
+`;
+const Square = styled_1.default.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 &&
+    (0, react_2.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 = (0, useCheckboxColor_1.default)(color);
+    return (react_1.default.createElement(Root, { className: className, style: style },
+        react_1.default.createElement(StyledInput, Object.assign({}, nativeProps, { checked: checked, disabled: disabled, type: "checkbox", ref: ref })),
+        react_1.default.createElement(Square, { "data-checkbox-square": "", "$color": $color, "$active": Boolean(checked || indeterminate), "$error": Boolean(error), "$disabled": Boolean(disabled) }, children)));
+};
+exports.default = react_1.default.forwardRef(CheckboxBox);

package/Checkbox/CheckboxContainer.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+export type CheckboxLabelPosition = 'start' | 'end' | 'top' | 'bottom';
+export type CheckboxContainerProps = React.LabelHTMLAttributes<HTMLLabelElement> & {
+    /**
+     * Position of the label relative to the checkbox
+     * Default: `end`
+     */
+    readonly labelPosition?: CheckboxLabelPosition;
+    /**
+     * If `true` the checkbox state can not be changed
+     * Default: false;
+     */
+    readonly disabled?: boolean;
+};
+declare const _default: React.ForwardRefExoticComponent<React.LabelHTMLAttributes<HTMLLabelElement> & {
+    /**
+     * Position of the label relative to the checkbox
+     * Default: `end`
+     */
+    readonly labelPosition?: CheckboxLabelPosition | undefined;
+    /**
+     * If `true` the checkbox state can not be changed
+     * Default: false;
+     */
+    readonly disabled?: boolean | undefined;
+} & React.RefAttributes<HTMLLabelElement>>;
+export default _default;

package/Checkbox/CheckboxContainer.js

@@ -0,0 +1,38 @@
+"use strict";
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const directions = {
+    start: 'row-reverse',
+    end: 'row',
+    top: 'column-reverse',
+    bottom: 'column',
+};
+const StyledContainer = styled_1.default.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_1.default.createElement(StyledContainer, Object.assign({}, nativeProps, { "$labelPosition": labelPosition, "$disabled": disabled, ref: ref }), children));
+};
+exports.default = react_1.default.forwardRef(CheckboxContainer);

package/Checkbox/CheckboxErrorText.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+export interface CheckboxErrorTextProps extends React.HTMLAttributes<HTMLSpanElement> {
+    readonly error?: boolean;
+}
+declare const _default: React.ForwardRefExoticComponent<CheckboxErrorTextProps & React.RefAttributes<HTMLDivElement>>;
+export default _default;

package/Checkbox/CheckboxErrorText.js

@@ -0,0 +1,76 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = __importStar(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const NoSSR_1 = __importDefault(require("../NoSSR"));
+const ErrorTextContainer = styled_1.default.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_1.default.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_1.default, null, children) : React.createElement(React.Fragment, null, "\u00A0"))));
+};
+exports.default = React.forwardRef(CheckboxErrorText);

package/Checkbox/CheckboxIcon.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export type CheckboxIconProps = React.HTMLAttributes<HTMLSpanElement> & {
+    readonly checked: boolean;
+    readonly indeterminate: boolean;
+};
+declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & {
+    readonly checked: boolean;
+    readonly indeterminate: boolean;
+} & React.RefAttributes<HTMLSpanElement>>;
+export default _default;

package/Checkbox/CheckboxIcon.js

@@ -0,0 +1,57 @@
+"use strict";
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const IconWrapper = styled_1.default.span `
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+`;
+const Check = styled_1.default.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_1.default.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_1.default.createElement(IconWrapper, Object.assign({ "aria-hidden": true }, nativeProps, { ref: ref }),
+        react_1.default.createElement(Check, { "$visible": checked && !indeterminate, xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 512 512" },
+            react_1.default.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_1.default.createElement(Dash, { "$visible": indeterminate })));
+};
+exports.default = react_1.default.forwardRef(CheckboxIcon);

package/Checkbox/CheckboxTextWrapper.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export type CheckboxTextWrapperProps = React.HTMLAttributes<HTMLSpanElement>;
+declare const _default: React.ForwardRefExoticComponent<CheckboxTextWrapperProps & React.RefAttributes<HTMLSpanElement>>;
+export default _default;

package/Checkbox/CheckboxTextWrapper.js

@@ -0,0 +1,29 @@
+"use strict";
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const TextWrapper = styled_1.default.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_1.default.createElement(TextWrapper, Object.assign({}, nativeProps, { ref: ref }), children));
+};
+exports.default = react_1.default.forwardRef(CheckboxTextWrapper);

package/Checkbox/CheckboxWrapper.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export type CheckboxWrapperProps = React.HTMLAttributes<HTMLSpanElement>;
+declare const _default: React.ForwardRefExoticComponent<CheckboxWrapperProps & React.RefAttributes<HTMLSpanElement>>;
+export default _default;