@itcase/ui 1.1.25 → 1.2.1

package/dist/components/Avatar.js

@@ -1,23 +1,46 @@
-export { A as Avatar } from '../Avatar-DR2A8Na8.js';
-import '../jsx-runtime-C2uP7l8s.js';
-import 'react';
-import 'clsx';
-import '../hooks/useDeviceTargetClass.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useMemo } from 'react';
+import clsx from 'clsx';
+import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
+import { I as Icon } from '../Icon-CsE2-ieX.js';
+import { I as Image } from '../Image-8t6PvsaZ.js';
+import { T as Text } from '../Text-CG3xPG27.js';
 import 'lodash/castArray';
 import 'lodash/camelCase';
 import '../context/UIContext.js';
 import 'prop-types';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
-import '../Icon-BLqnXYOO.js';
-import '../_tslib-S-VPg1Cw.js';
+import '../tslib.es6-S-VPg1Cw.js';
 import 'react-inlinesvg';
 import '../hooks/useStyles.js';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
-import '../Link-DtzAAQn8.js';
-import '../Tooltip-IVq3_vb4.js';
-import '../Text-Dz-KPI5I.js';
-import '../Title-zpOK2AxL.js';
-import '../Image-Bz4Fo3eB.js';
+import '../Link-Bqu5amIb.js';
+import '../Tooltip-DJufHBiQ.js';
+import '../Title-BfSFPJtJ.js';
+
+function Avatar(props) {
+    var className = props.className, Dot = props.Dot, icon = props.icon, _a = props.size, size = _a === void 0 ? '96' : _a, after = props.after, before = props.before, src = props.src, type = props.type, mode = props.mode, onClick = props.onClick, _b = props.textSize, textSize = _b === void 0 ? 'l' : _b, _c = props.textColor, textColor = _c === void 0 ? 'surfaceTextTertiary' : _c, _d = props.textWeight, textWeight = _d === void 0 ? '600' : _d, iconSrc = props.iconSrc, iconItemFill = props.iconItemFill, iconShape = props.iconShape, iconSize = props.iconSize, iconFill = props.iconFill, iconFillHover = props.iconFillHover, iconFillSize = props.iconFillSize, _e = props.firstName, firstName = _e === void 0 ? '' : _e, _f = props.secondName, secondName = _f === void 0 ? '' : _f;
+    var fillClass = useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: 'fill',
+    });
+    var fillHoverClass = useDeviceTargetClass(props, {
+        prefix: 'fill_hover_',
+        propsKey: 'fillHover',
+    });
+    var shapeClass = useDeviceTargetClass(props, {
+        prefix: 'avatar_shape_',
+        propsKey: 'shape',
+    });
+    var avatarChars = useMemo(function () {
+        var firstChar = ((firstName === null || firstName === void 0 ? void 0 : firstName[0]) || '').toUpperCase();
+        var secondChar = ((secondName === null || secondName === void 0 ? void 0 : secondName[0]) || '').toUpperCase();
+        return "".concat(firstChar).concat(secondChar);
+    }, [firstName, secondName]);
+    return (jsx("div", { className: clsx(className, 'avatar', shapeClass, mode && "avatar_mode_".concat(mode), size && "avatar_size_".concat(size), type && "avatar_type_".concat(type), Dot && 'avatar_status', onClick && 'cursor_type_pointer'), onClick: onClick, children: jsxs("div", { className: clsx('avatar__wrapper', fillClass, fillHoverClass), children: [before, src ? (jsx(Image, { className: "avatar__image", shape: "geometric", src: src })) : (jsx(Text, { className: "avatar__name", size: textSize, textColor: textColor, textWeight: textWeight, children: avatarChars })), (icon || iconSrc) && (jsx(Icon, { className: "avatar__icon", fill: iconFill, fillHover: iconFillHover, fillSize: iconFillSize, iconFill: iconItemFill, iconSize: iconSize, imageSrc: iconSrc, shape: iconShape, SvgImage: icon })), Dot, after] }) }));
+}
+
+export { Avatar };

package/dist/components/Badge.js

@@ -1,8 +1,8 @@
-export { B as Badge, b as badgeConfig } from '../Badge-CLV5v6N7.js';
-import '../jsx-runtime-C2uP7l8s.js';
-import 'react';
+export { B as Badge, b as badgeConfig } from '../Badge-CrhdvxY6.js';
+import 'react/jsx-runtime';
 import 'clsx';
 import '../hooks/useDeviceTargetClass.js';
+import 'react';
 import 'lodash/castArray';
 import 'lodash/camelCase';
 import '../context/UIContext.js';
@@ -13,4 +13,4 @@ import '../hooks/useStyles.js';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
-import '../Text-Dz-KPI5I.js';
+import '../Text-CG3xPG27.js';

package/dist/components/Breadcrumbs.js

@@ -1,22 +1,99 @@
-export { B as Breadcrumbs, a as BreadcrumbsItem } from '../Breadcrumbs-CDKi6gOC.js';
-import '../_tslib-S-VPg1Cw.js';
-import '../jsx-runtime-C2uP7l8s.js';
-import 'react';
-import 'clsx';
-import 'lodash/camelCase';
-import '../hooks/useDeviceTargetClass.js';
+import { a as __rest, _ as __assign } from '../tslib.es6-S-VPg1Cw.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useMemo } from 'react';
+import clsx from 'clsx';
+import camelCase from 'lodash/camelCase';
+import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
+import { useStyles } from '../hooks/useStyles.js';
+import { I as Icon } from '../Icon-CsE2-ieX.js';
+import { a as LinkWrapper } from '../Link-Bqu5amIb.js';
+import { T as Text } from '../Text-CG3xPG27.js';
 import 'lodash/castArray';
 import '../context/UIContext.js';
 import 'prop-types';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
-import '../hooks/useStyles.js';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
-import '../Icon-BLqnXYOO.js';
 import 'react-inlinesvg';
-import '../Link-DtzAAQn8.js';
-import '../Tooltip-IVq3_vb4.js';
-import '../Text-Dz-KPI5I.js';
-import '../Title-zpOK2AxL.js';
+import '../Tooltip-DJufHBiQ.js';
+import '../Title-BfSFPJtJ.js';
+
+function BreadcrumbsItem(props) {
+    var children = props.children, className = props.className, cursor = props.cursor, _a = props.set, set = _a === void 0 ? 'default' : _a, text = props.text, textSize = props.textSize, textColor = props.textColor, textColorHover = props.textColorHover, href = props.href, iconAfter = props.iconAfter, iconAfterSize = props.iconAfterSize, iconAfterBgFill = props.iconAfterBgFill, iconAfterFill = props.iconAfterFill, onClick = props.onClick;
+    var fillClass = useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: 'fill',
+    });
+    var shapeClass = useDeviceTargetClass(props, {
+        prefix: 'breadcrumbs__item_shape_',
+        propsKey: 'shape',
+    });
+    var positionClass = useDeviceTargetClass(props, {
+        prefix: 'position_',
+        propsKey: 'position',
+    });
+    var underlineClass = useDeviceTargetClass(props, {
+        prefix: 'text-decoration_',
+        propsKey: 'underline',
+    });
+    // @ts-expect-error
+    var itemStyles = useStyles(props).styles;
+    return (jsxs(LinkWrapper, { className: clsx(className, 'breadcrumbs__item', set && "breadcrumbs__item_set_".concat(set), fillClass, positionClass, shapeClass, underlineClass, onClick && (cursor || 'cursor_type_pointer')), DefaultComponent: "div", href: href, style: itemStyles, onClick: onClick, children: [jsx(Text, { className: "breadcrumbs__item-text", size: textSize, textColor: textColor, textColorHover: textColorHover, children: text || children }), iconAfter && (jsx(Icon, { bgFill: iconAfterBgFill, className: "breadcrumbs__item-icon", fill: iconAfterFill, size: iconAfterSize, SvgImage: iconAfter }))] }));
+}
+BreadcrumbsItem.defaultProps = {
+    set: 'default',
+};
+
+function Breadcrumbs(props) {
+    var breadcrumbsList = props.breadcrumbsList, children = props.children, className = props.className, iconAfterSize = props.iconAfterSize, iconAfterBgFill = props.iconAfterBgFill, iconAfterFill = props.iconAfterFill, itemUnderline = props.itemUnderline, itemTextColor = props.itemTextColor, itemTextColorHover = props.itemTextColorHover, set = props.set, otherProps = __rest(props, ["breadcrumbsList", "children", "className", "iconAfterSize", "iconAfterBgFill", "iconAfterFill", "itemUnderline", "itemTextColor", "itemTextColorHover", "set"]);
+    var breadcrumbsItemsList = useMemo(function () {
+        if (breadcrumbsList) {
+            var itemProps_1 = Object.entries(otherProps).reduce(function (collectedProps, _a) {
+                var key = _a[0], value = _a[1];
+                if (key.startsWith('item')) {
+                    var propKey = camelCase(key.replace('item', ''));
+                    // @ts-expect-error
+                    collectedProps[propKey] = value;
+                }
+                return collectedProps;
+            }, {});
+            return breadcrumbsList.map(function (item, i) { return (jsx(BreadcrumbsItem, __assign({ set: i + 1 !== breadcrumbsList.length ? 'default' : 'current', 
+                // @ts-expect-error
+                iconAfter: i + 1 !== breadcrumbsList.length ? itemProps_1.iconAfter : null, iconAfterSize: iconAfterSize, iconAfterBgFill: iconAfterBgFill, iconAfterFill: iconAfterFill, text: item.text, textColor: itemTextColor, textColorHover: itemTextColorHover, underline: itemUnderline, href: item.href }, itemProps_1), "breadcrumbsItem_".concat(item.id || item.text))); });
+        }
+        if (children) {
+            return children;
+        }
+        return [];
+    }, [children, breadcrumbsList, otherProps]);
+    var directionClass = useDeviceTargetClass(props, {
+        prefix: 'direction_',
+        propsKey: 'direction',
+    });
+    var fillClass = useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: 'fill',
+    });
+    var shapeClass = useDeviceTargetClass(props, {
+        prefix: 'breadcrumbs_shape_',
+        propsKey: 'shape',
+    });
+    var widthClass = useDeviceTargetClass(props, {
+        prefix: 'width_',
+        propsKey: 'width',
+    });
+    var positionClass = useDeviceTargetClass(props, {
+        prefix: 'position_',
+        propsKey: 'position',
+    });
+    // @ts-expect-error
+    var breadcrumbsStyles = useStyles(props).styles;
+    return (jsx("div", { className: clsx(className, 'breadcrumbs', widthClass, directionClass, fillClass, positionClass, shapeClass, set && "breadcrumbs_set_".concat(set)), style: breadcrumbsStyles, children: breadcrumbsItemsList }));
+}
+Breadcrumbs.defaultProps = {
+    direction: 'horizontal',
+};
+
+export { Breadcrumbs, BreadcrumbsItem };

package/dist/components/Button.js

@@ -1,5 +1,5 @@
-export { B as Button, b as buttonConfig } from '../Button-CSzPxWyC.js';
-import '../jsx-runtime-C2uP7l8s.js';
+export { B as Button, b as buttonConfig } from '../Button-BA3ZeUjj.js';
+import 'react/jsx-runtime';
 import 'react';
 import 'clsx';
 import '../hooks/useDeviceTargetClass.js';
@@ -13,11 +13,11 @@ import '../hooks/useStyles.js';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
-import '../Icon-BLqnXYOO.js';
-import '../_tslib-S-VPg1Cw.js';
+import '../Icon-CsE2-ieX.js';
+import '../tslib.es6-S-VPg1Cw.js';
 import 'react-inlinesvg';
-import '../Link-DtzAAQn8.js';
-import '../Tooltip-IVq3_vb4.js';
-import '../Text-Dz-KPI5I.js';
-import '../Title-zpOK2AxL.js';
-import '../Loader-VCP1ZNcb.js';
+import '../Link-Bqu5amIb.js';
+import '../Tooltip-DJufHBiQ.js';
+import '../Text-CG3xPG27.js';
+import '../Title-BfSFPJtJ.js';
+import '../Loader-CJ8ZCdwy.js';

package/dist/components/Caption.js

@@ -1,15 +1,35 @@
-export { C as Caption } from '../Caption-DDh0VFPJ.js';
-import '../jsx-runtime-C2uP7l8s.js';
+import { jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
+import { useStyles } from '../hooks/useStyles.js';
 import 'react';
-import 'clsx';
-import '../hooks/useDeviceTargetClass.js';
 import 'lodash/castArray';
 import 'lodash/camelCase';
 import '../context/UIContext.js';
 import 'prop-types';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
-import '../hooks/useStyles.js';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
+
+function Caption(props) {
+    var children = props.children, className = props.className;
+    var fillClass = useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: 'fill',
+    });
+    var fillGradientClass = useDeviceTargetClass(props, {
+        prefix: 'fill-gradient_',
+        propsKey: 'fillGradient',
+    });
+    var positionClass = useDeviceTargetClass(props, {
+        prefix: 'caption_position_',
+        propsKey: 'position',
+    });
+    // @ts-expect-error
+    var captionStyles = useStyles(props).styles;
+    return (jsx("div", { className: clsx(className, 'caption', positionClass, fillClass, fillGradientClass), style: captionStyles, children: children }));
+}
+
+export { Caption };

package/dist/components/Card.js

@@ -1,17 +1,39 @@
-export { C as Card } from '../Card-CvW4Qozl.js';
-import '../jsx-runtime-C2uP7l8s.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
+import { I as Image } from '../Image-8t6PvsaZ.js';
+import { T as Text } from '../Text-CG3xPG27.js';
 import 'react';
-import 'clsx';
-import '../hooks/useDeviceTargetClass.js';
 import 'lodash/castArray';
 import 'lodash/camelCase';
 import '../context/UIContext.js';
 import 'prop-types';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
-import '../Image-Bz4Fo3eB.js';
 import '../hooks/useStyles.js';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
-import '../Text-Dz-KPI5I.js';
+
+function Card(props) {
+    var children = props.children, className = props.className, size = props.size, src = props.src, text = props.text, textSize = props.textSize, textColor = props.textColor, textTag = props.textTag, title = props.title, titleSize = props.titleSize, titleTag = props.titleTag, titleColor = props.titleColor, image = props.image, imageShape = props.imageShape, type = props.type, onClick = props.onClick;
+    var shapeClass = useDeviceTargetClass(props, {
+        prefix: 'card_shape_',
+        propsKey: 'shape',
+    });
+    var widthClass = useDeviceTargetClass(props, {
+        prefix: 'resize-horizontal_',
+        propsKey: 'width',
+    });
+    return (jsx("div", { className: clsx(className, 'card', shapeClass, size && "card_size_".concat(size), type && "card_type_".concat(type), widthClass), onClick: onClick, children: jsxs("div", { className: "card__wrapper", children: [image, src && jsx(Image, { className: "card__image", shape: imageShape, src: src }), jsxs("div", { className: "card__data", children: [title && (jsx(Text, { className: "card__data-title", size: titleSize, textColor: titleColor, tag: titleTag, children: title })), text && (jsx(Text, { size: textSize, tag: textTag, textColor: textColor, className: "card__data-desc", children: text }))] }), children] }) }));
+}
+Card.defaultProps = {
+    textSize: 'p',
+    titleColor: 'surfaceTextPrimary',
+    titleTag: 'span',
+    titleSize: 'h5',
+    imageShape: 'rounded',
+    textColor: 'surfaceTextPrimary',
+};
+
+export { Card };

package/dist/components/Cell.js

@@ -1,23 +1,83 @@
-export { C as Cell } from '../Cell-3We_qMvM.js';
-import '../jsx-runtime-C2uP7l8s.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
+import { I as Icon } from '../Icon-CsE2-ieX.js';
+import { L as Label } from '../Label-BA_CnRBq.js';
+import { T as Text } from '../Text-CG3xPG27.js';
+import { useStyles } from '../hooks/useStyles.js';
 import 'react';
-import 'clsx';
-import '../hooks/useDeviceTargetClass.js';
 import 'lodash/castArray';
 import 'lodash/camelCase';
 import '../context/UIContext.js';
 import 'prop-types';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
-import '../Icon-BLqnXYOO.js';
-import '../_tslib-S-VPg1Cw.js';
+import '../tslib.es6-S-VPg1Cw.js';
 import 'react-inlinesvg';
-import '../hooks/useStyles.js';
+import '../Link-Bqu5amIb.js';
+import '../Tooltip-DJufHBiQ.js';
+import '../Title-BfSFPJtJ.js';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
-import '../Link-DtzAAQn8.js';
-import '../Tooltip-IVq3_vb4.js';
-import '../Text-Dz-KPI5I.js';
-import '../Title-zpOK2AxL.js';
-import '../Label-c3hONOHC.js';
+
+function Cell(props) {
+    var after = props.after, before = props.before, className = props.className, isActive = props.isActive, isDisabled = props.isDisabled, mode = props.mode, reverse = props.reverse, set = props.set, showTitleLabel = props.showTitleLabel, showValueLabel = props.showValueLabel, size = props.size, title = props.title, titleIcon = props.titleIcon, titleIconFill = props.titleIconFill, titleIconFillHover = props.titleIconFillHover, titleIconFillSize = props.titleIconFillSize, titleIconItemFill = props.titleIconItemFill, titleIconShape = props.titleIconShape, titleIconSrc = props.titleIconSrc, titleLabel = props.titleLabel, titleLabelAppearance = props.titleLabelAppearance, titleLabelShape = props.titleLabelShape, titleLabelSize = props.titleLabelSize, titleLabelTextSize = props.titleLabelTextSize, titleTag = props.titleTag, titleTextColor = props.titleTextColor, titleTextSize = props.titleTextSize, titleTextTruncate = props.titleTextTruncate, titleTextWeight = props.titleTextWeight, titleTextWrap = props.titleTextWrap, value = props.value, valueIcon = props.valueIcon, valueIconFill = props.valueIconFill, valueIconFillHover = props.valueIconFillHover, valueIconFillSize = props.valueIconFillSize, valueIconItemFill = props.valueIconItemFill, valueIconShape = props.valueIconShape, valueIconSrc = props.valueIconSrc, valueLabel = props.valueLabel, valueLabelAppearance = props.valueLabelAppearance, valueLabelShape = props.valueLabelShape, valueLabelSize = props.valueLabelSize, valueLabelTextSize = props.valueLabelTextSize, valueTag = props.valueTag, valueTextAlign = props.valueTextAlign, valueTextColor = props.valueTextColor, valueTextSize = props.valueTextSize, valueTextWeight = props.valueTextWeight, valueTextWrap = props.valueTextWrap, zeroGap = props.zeroGap, zeroPadding = props.zeroPadding, onClick = props.onClick, onMouseEnter = props.onMouseEnter;
+    var fillClass = useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: 'fill',
+    });
+    var fillHoverClass = useDeviceTargetClass(props, {
+        prefix: 'fill_hover_',
+        propsKey: 'fillHover',
+    });
+    var fillActiveClass = useDeviceTargetClass(props, {
+        prefix: 'fill_active_',
+        propsKey: 'fillActive',
+    });
+    var fillDisabledClass = useDeviceTargetClass(props, {
+        prefix: 'fill_disabled_',
+        propsKey: 'fillDisabled',
+    });
+    var shapeClass = useDeviceTargetClass(props, {
+        prefix: 'cell__wrapper_shape_',
+        propsKey: 'shape',
+    });
+    var bgFillClass = useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: 'bgFill',
+    });
+    var bgFillHoverClass = useDeviceTargetClass(props, {
+        prefix: 'fill_hover_',
+        propsKey: 'bgFillHover',
+    });
+    var bgFillActiveClass = useDeviceTargetClass(props, {
+        prefix: 'fill_active_',
+        propsKey: 'bgFillActive',
+    });
+    var bgFillDisabledClass = useDeviceTargetClass(props, {
+        prefix: 'fill_disabled_',
+        propsKey: 'bgFillDisabled',
+    });
+    var bgShapeClass = useDeviceTargetClass(props, {
+        prefix: 'cell_shape_',
+        propsKey: 'bgShape',
+    });
+    var directionClass = useDeviceTargetClass(props, {
+        prefix: 'cell__wrapper_direction_',
+        propsKey: 'direction',
+    });
+    var widthClass = useDeviceTargetClass(props, {
+        prefix: 'width_',
+        propsKey: 'width',
+    });
+    // @ts-expect-error
+    var cellStyles = useStyles(props).styles;
+    return (jsxs("div", { className: clsx(className, 'cell', mode && "cell_mode_".concat(mode), size && "cell_size_".concat(size), set && "cell_set_".concat(set), bgFillClass, bgFillHoverClass, isActive && bgFillActiveClass, isDisabled && bgFillDisabledClass, bgShapeClass, widthClass, zeroPadding && 'cell_reset-padding', zeroGap && 'cell_reset-gap', reverse && 'cell_reverse'), onClick: onClick, onMouseEnter: onMouseEnter, style: cellStyles, children: [before && jsx("div", { className: "cell__before", children: before }), jsxs("div", { className: clsx('cell__wrapper', directionClass, fillClass, fillHoverClass, isActive && fillActiveClass, isDisabled && fillDisabledClass, shapeClass), children: [title && (jsxs("div", { className: "cell__data", children: [jsx(Text, { className: "cell__title", size: titleTextSize, tag: titleTag, textColor: titleTextColor, textTruncate: titleTextTruncate, textWeight: titleTextWeight, textWrap: titleTextWrap, children: title }), (titleIcon || titleIconSrc) && (jsx(Icon, { className: "cell__icon", fill: titleIconFill, fillSize: titleIconFillSize, iconFill: titleIconItemFill, iconFillHover: titleIconFillHover, imageSrc: titleIconSrc, shape: titleIconShape, SvgImage: titleIcon })), showTitleLabel && (jsx(Label, { appearance: titleLabelAppearance, label: titleLabel, labelTextSize: titleLabelTextSize, shape: titleLabelShape, size: titleLabelSize }))] })), value && (jsxs("div", { className: "cell__data", children: [jsx(Text, { className: "cell__value", size: valueTextSize, tag: valueTag, textAlign: valueTextAlign, textColor: valueTextColor, textWeight: valueTextWeight, textWrap: valueTextWrap, children: value }), (valueIcon || valueIconSrc) && (jsx(Icon, { className: "cell__icon", fill: valueIconFill, fillSize: valueIconFillSize, iconFill: valueIconItemFill, iconFillHover: valueIconFillHover, imageSrc: valueIconSrc, shape: valueIconShape, SvgImage: valueIcon })), showValueLabel && (jsx(Label, { appearance: valueLabelAppearance, label: valueLabel, labelTextSize: valueLabelTextSize, shape: valueLabelShape, size: valueLabelSize }))] }))] }), after && jsx("div", { className: "cell__after", children: after })] }));
+}
+Cell.defaultProps = {
+    isDisabled: false,
+    textSize: 'p',
+};
+
+export { Cell };

package/dist/components/Checkbox.js

@@ -1,16 +1,98 @@
-export { C as Checkbox, c as checkboxConfig } from '../Checkbox-0h4YosTW.js';
-import '../jsx-runtime-C2uP7l8s.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
+import { T as Text } from '../Text-CG3xPG27.js';
 import 'react';
-import 'clsx';
-import '../hooks/useDeviceTargetClass.js';
 import 'lodash/castArray';
 import 'lodash/camelCase';
 import '../context/UIContext.js';
 import 'prop-types';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
-import '../Text-Dz-KPI5I.js';
 import '../hooks/useStyles.js';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
+
+var checkboxConfig = {
+    appearance: undefined,
+    setAppearance: function (newComponent) {
+        checkboxConfig.appearance = newComponent;
+    },
+    state: undefined,
+    // eslint-disable-next-line perfectionist/sort-objects
+    setState: function (newComponent) {
+        checkboxConfig.state = newComponent;
+    },
+};
+function Checkbox(props) {
+    var id = props.id, _a = props.Tag, Tag = _a === void 0 ? 'label' : _a, after = props.after, appearance = props.appearance, before = props.before, checked = props.checked, className = props.className, desc = props.desc, descTextColor = props.descTextColor, descTextSize = props.descTextSize, descTextWeight = props.descTextWeight, disabled = props.disabled, label = props.label, labelTextColor = props.labelTextColor, labelTextSize = props.labelTextSize, labelTextWeight = props.labelTextWeight, value = props.value, onBlur = props.onBlur, onChange = props.onChange, onFocus = props.onFocus;
+    var fillClass = useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: 'fill',
+    });
+    var shapeClass = useDeviceTargetClass(props, {
+        prefix: 'checkbox_shape_',
+        propsKey: 'shape',
+    });
+    var stateShapeClass = useDeviceTargetClass(props, {
+        prefix: 'checkbox__state_shape_',
+        propsKey: 'stateShape',
+    });
+    var stateFillClass = useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: checked ? 'stateFillChecked' : 'stateFill',
+    });
+    var stateFillDisabledClass = useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: checked ? 'stateFillDisabledChecked' : 'stateFillDisabled',
+    });
+    var stateCheckmarkFillClass = useDeviceTargetClass(props, {
+        prefix: 'checkbox_checkmark_fill_',
+        propsKey: disabled ? 'stateCheckmarkFillDisabled' : 'stateCheckmarkFill',
+    });
+    var stateBorderWidthClass = useDeviceTargetClass(props, {
+        prefix: 'border-width_',
+        propsKey: 'stateBorderWidth',
+    });
+    var stateBorderColorClass = useDeviceTargetClass(props, {
+        prefix: 'border-color_',
+        propsKey: checked ? 'stateBorderColorChecked' : 'stateBorderColor',
+    });
+    var stateBorderColorDisabledClass = useDeviceTargetClass(props, {
+        prefix: 'border-color_',
+        propsKey: checked ? 'stateBorderColorDisabledChecked' : 'stateBorderColorDisabled',
+    });
+    var widthClass = useDeviceTargetClass(props, {
+        prefix: 'width_',
+        propsKey: 'width',
+    });
+    // prettier-ignore
+    var appearanceConfig = (appearance && checkboxConfig.appearance && checkboxConfig.appearance[appearance]);
+    return (jsxs(Tag, { className: clsx(className, 'checkbox', fillClass, shapeClass, widthClass), htmlFor: Tag === 'label' && id, children: [before, jsxs("div", { className: clsx('checkbox__item', stateCheckmarkFillClass ||
+                    ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.stateCheckmarkFill) &&
+                        "checkbox_checkmark_fill_".concat(appearanceConfig.stateCheckmarkFill)
+                            .replace(/([A-Z])/g, '-$1')
+                            .toLowerCase())), children: [jsx("input", { checked: checked, className: "checkbox__input", disabled: disabled, 
+                        // @ts-expect-error
+                        id: id, type: "checkbox", value: value, onBlur: onBlur, onChange: onChange, onFocus: onFocus }), jsx("div", { className: clsx('checkbox__state', disabled ? stateFillDisabledClass : stateFillClass, disabled
+                            ? stateBorderColorDisabledClass
+                            : stateBorderColorClass ||
+                                ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.stateBorderColor) &&
+                                    "border-color_".concat(appearanceConfig.stateBorderColor)
+                                        .replace(/([A-Z])/g, '-$1')
+                                        .toLowerCase()), stateShapeClass ||
+                            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.stateShape) &&
+                                "checkbox__state_shape_".concat(appearanceConfig.stateShape)
+                                    .replace(/([A-Z])/g, '-$1')
+                                    .toLowerCase()), stateBorderWidthClass ||
+                            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.stateBorderWidth) &&
+                                "border-width_".concat(appearanceConfig.stateBorderWidth)
+                                    .replace(/([A-Z])/g, '-$1')
+                                    .toLowerCase())), children: "\u00A0" }), jsx("div", { className: "checkbox__state-checkmark", children: "\u00A0" })] }), label && (jsx(Text, { className: "checkbox__label", size: labelTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextSize), textColor: labelTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextColor), textWeight: labelTextWeight, children: label })), desc && (jsx(Text, { className: "checkbox__desc", size: descTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.descTextSize), textColor: descTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.descTextColor), textWeight: descTextWeight, children: desc })), after && jsx("div", { className: "checkbox__after", children: after })] }));
+}
+Checkbox.defaultProps = {
+    tag: 'label',
+};
+
+export { Checkbox, checkboxConfig };

package/dist/components/Chips.js

@@ -1,16 +1,86 @@
-export { C as Chips, c as chipsConfig } from '../Chips-Bd3ZFosY.js';
-import '../jsx-runtime-C2uP7l8s.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
+import { useStyles } from '../hooks/useStyles.js';
+import { T as Text } from '../Text-CG3xPG27.js';
 import 'react';
-import 'clsx';
-import '../hooks/useDeviceTargetClass.js';
 import 'lodash/castArray';
 import 'lodash/camelCase';
 import '../context/UIContext.js';
 import 'prop-types';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
-import '../hooks/useStyles.js';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
-import '../Text-Dz-KPI5I.js';
+
+var chipsConfig = {
+    appearance: undefined,
+    setAppearance: function (newComponent) {
+        chipsConfig.appearance = newComponent;
+    },
+};
+function Chips(props) {
+    var children = props.children, isActive = props.isActive, appearance = props.appearance, className = props.className, _a = props.label, label = _a === void 0 ? '' : _a, labelTextActiveColor = props.labelTextActiveColor, labelTextColor = props.labelTextColor, labelTextSize = props.labelTextSize, labelTextWeight = props.labelTextWeight, type = props.type, onClick = props.onClick;
+    var alignDirectionClass = useDeviceTargetClass(props, {
+        prefix: 'align_',
+        propsKey: 'alignDirection',
+    });
+    var alignClass = useDeviceTargetClass(props, {
+        prefix: 'align_',
+        propsKey: 'align',
+    });
+    var fillClass = useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: 'fill',
+    });
+    var fillHoverClass = useDeviceTargetClass(props, {
+        prefix: 'fill_hover_',
+        propsKey: 'fillHover',
+    });
+    var fillActiveClass = useDeviceTargetClass(props, {
+        prefix: 'fill_active_',
+        propsKey: 'fillActive',
+    });
+    var sizeClass = useDeviceTargetClass(props, {
+        prefix: 'chips_size_',
+        propsKey: 'size',
+    });
+    var shapeClass = useDeviceTargetClass(props, {
+        prefix: 'chips_shape_',
+        propsKey: 'shape',
+    });
+    var borderColorClass = useDeviceTargetClass(props, {
+        prefix: 'border-color_',
+        propsKey: 'borderColor',
+    });
+    var borderTypeClass = useDeviceTargetClass(props, {
+        prefix: 'border_type_',
+        propsKey: 'borderType',
+    });
+    var cursorClass = useDeviceTargetClass(props, {
+        prefix: 'cursor_',
+        propsKey: 'cursor',
+    });
+    // @ts-expect-error
+    var chipsStyles = useStyles(props).styles;
+    // prettier-ignore
+    var appearanceConfig = (appearance && chipsConfig.appearance && chipsConfig.appearance[appearance]);
+    return (jsx("div", { className: clsx(className, 'chips', isActive && 'chips_state_active', isActive
+            ? fillActiveClass ||
+                ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fillActive) &&
+                    "fill_".concat(appearanceConfig.fillActive).replace(/([A-Z])/g, '-$1').toLowerCase())
+            : fillClass ||
+                ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fill) &&
+                    "fill_".concat(appearanceConfig.fill).replace(/([A-Z])/g, '-$1').toLowerCase()), fillHoverClass ||
+            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fillHover) &&
+                "fill_hover_".concat(appearanceConfig.fillHover).replace(/([A-Z])/g, '-$1').toLowerCase()), shapeClass, borderColorClass ||
+            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.borderColor) &&
+                "border-color_".concat(appearanceConfig.borderColor)
+                    .replace(/([A-Z])/g, '-$1')
+                    .toLowerCase()), borderTypeClass, sizeClass, alignDirectionClass, alignClass, type && "chips_type_".concat(type), cursorClass, onClick && 'cursor_type_pointer'), style: chipsStyles, onClick: onClick, children: jsxs("div", { className: "chips__inner", children: [typeof label === 'string' ? (jsx(Text, { className: "chips__label", size: labelTextSize, textWeight: labelTextWeight, textColor: isActive
+                        ? labelTextActiveColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextActiveColor)
+                        : labelTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextColor), children: label })) : (jsx("div", { className: "chips__label", children: label })), children] }) }));
+}
+
+export { Chips, chipsConfig };