@itcase/ui 1.2.18 → 1.2.20

package/dist/components/Radio.js

@@ -1,7 +1,7 @@
-export { R as Radio, r as radioConfig } from '../Radio-oMf0vN7T.js';
-import 'react/jsx-runtime';
-import 'clsx';
-import '../hooks/useDeviceTargetClass.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 'lodash/castArray';
 import 'lodash/camelCase';
@@ -9,8 +9,89 @@ import '../context/UIContext.js';
 import 'prop-types';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
-import '../Text-CG3xPG27.js';
 import '../hooks/useStyles.js';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
+
+var radioConfig = {
+    state: undefined,
+    setState: function (newComponent) {
+        radioConfig.state = newComponent;
+    },
+    appearance: undefined,
+    setAppearance: function (newComponent) {
+        radioConfig.appearance = newComponent;
+    },
+};
+function Radio(props) {
+    var appearance = props.appearance, checked = props.checked, className = props.className, desc = props.desc, descTextColor = props.descTextColor, descTextSize = props.descTextSize, descTextWeight = props.descTextWeight, disabled = props.disabled, id = props.id, label = props.label, labelTextColor = props.labelTextColor, labelTextSize = props.labelTextSize, labelTextWeight = props.labelTextWeight, _a = props.tag, Tag = _a === void 0 ? 'label' : _a, onChange = props.onChange;
+    var fillClass = useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: 'fill',
+    });
+    var shapeClass = useDeviceTargetClass(props, {
+        prefix: 'radio_shape_',
+        propsKey: 'shape',
+    });
+    var stateShapeClass = useDeviceTargetClass(props, {
+        prefix: 'radio__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: 'radio_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 stateBorderColorHoverClass = useDeviceTargetClass(props, {
+        prefix: 'border-color_hover_',
+        propsKey: checked ? 'stateBorderColorHoverChecked' : 'stateBorderColorHover',
+    });
+    var stateBorderColorDisabledClass = useDeviceTargetClass(props, {
+        prefix: 'border-color_',
+        propsKey: checked ? 'stateBorderColorDisabledChecked' : 'stateBorderColorDisabled',
+    });
+    var appearanceConfig = appearance && radioConfig.appearance && radioConfig.appearance[appearance];
+    return (jsxs(Tag, { className: clsx(className, 'radio', fillClass, shapeClass), htmlFor: id, children: [jsxs("div", { className: clsx('radio__item', stateCheckmarkFillClass ||
+                    ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.stateCheckmarkFill) &&
+                        "radio_checkmark_fill_".concat(appearanceConfig.stateCheckmarkFill)
+                            .replace(/([A-Z])/g, '-$1')
+                            .toLowerCase())), children: [jsx("input", { checked: checked, className: "radio__input", disabled: disabled, 
+                        // @ts-expect-error
+                        id: id, type: "radio", onChange: onChange }), jsx("div", { className: clsx('radio__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()), stateBorderColorHoverClass, stateShapeClass ||
+                            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.stateShape) &&
+                                "radio__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: "radio__state-checkmark", children: "\u00A0" })] }), label && (jsx(Text, { className: "radio__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: "radio__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 }))] }));
+}
+Radio.defaultProps = {
+    shape: 'circular',
+    tag: 'label',
+};
+
+export { Radio, radioConfig };

package/dist/components/Response.js

@@ -5,7 +5,7 @@ import SVG from 'react-inlinesvg';
 import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
 import { useStyles } from '../hooks/useStyles.js';
 import { B as Button } from '../Button--5mnRJi2.js';
-import { G as Group } from '../Group-12uup5mu.js';
+import { G as Group } from '../Group-CVUfaHaS.js';
 import { T as Text } from '../Text-CG3xPG27.js';
 import { T as Title } from '../Title-BfSFPJtJ.js';
 import 'lodash/castArray';

package/dist/components/Select.js

@@ -8,7 +8,7 @@ import CreatableSelect from 'react-select/creatable';
 import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
 import { T as Text } from '../Text-CG3xPG27.js';
 import { B as Badge } from '../Badge-CrhdvxY6.js';
-import { G as Group } from '../Group-12uup5mu.js';
+import { G as Group } from '../Group-CVUfaHaS.js';
 import { D as Divider } from '../Divider-U5UdY-ef.js';
 import 'react-inlinesvg';
 import '../hooks/useStyles.js';

package/dist/components/Switch.js

@@ -1,4 +1,12 @@
-export { S as Switch } from '../Switch-DEXsrPCo.js';
-import 'react/jsx-runtime';
-import 'react';
-import 'clsx';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React from 'react';
+import clsx from 'clsx';
+
+var Switch = React.forwardRef(function Switch(props, ref) {
+    var className = props.className, set = props.set, size = props.size, id = props.id, checked = props.checked, disabled = props.disabled, onChange = props.onChange;
+    return (jsxs("div", { className: clsx('switch', className, size && "switch_size_".concat(size), set && "switch_set_".concat(set)), children: [jsx("input", { checked: checked, className: "switch__checkbox", disabled: disabled, id: id, 
+                // @ts-expect-error
+                ref: ref, type: "checkbox", onChange: onChange }), jsx("div", { className: "switch__bg", children: "\u00A0" }), jsx("div", { className: "switch__toggle", children: "\u00A0" })] }));
+});
+
+export { Switch };

package/dist/components/Tile.js

@@ -17,7 +17,7 @@ import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
 
 function Tile(props) {
-    var children = props.children, after = props.after, badge = props.badge, badgeSize = props.badgeSize, badgeTextColor = props.badgeTextColor, badgeTextSize = props.badgeTextSize, before = props.before, className = props.className, direction = props.direction, reverse = props.reverse, size = props.size, text = props.text, textColor = props.textColor, textSize = props.textSize, textWrap = props.textWrap, title = props.title, titleTextAlign = props.titleTextAlign, titleTextColor = props.titleTextColor, titleTextSize = props.titleTextSize, titleTextWeight = props.titleTextWeight, titleTextWrap = props.titleTextWrap, type = props.type, onClick = props.onClick;
+    var children = props.children, direction = props.direction, after = props.after, badge = props.badge, badgeAppearance = props.badgeAppearance, badgeSize = props.badgeSize, badgeTextColor = props.badgeTextColor, badgeTextSize = props.badgeTextSize, before = props.before, className = props.className, reverse = props.reverse, size = props.size, text = props.text, textColor = props.textColor, textSize = props.textSize, textWrap = props.textWrap, title = props.title, titleTextAlign = props.titleTextAlign, titleTextColor = props.titleTextColor, titleTextSize = props.titleTextSize, titleTextWeight = props.titleTextWeight, titleTextWrap = props.titleTextWrap, type = props.type, onClick = props.onClick;
     var fillClass = useDeviceTargetClass(props, {
         prefix: 'fill_',
         propsKey: 'fill',
@@ -52,11 +52,11 @@ function Tile(props) {
     });
     // @ts-expect-error
     var tileStyles = useStyles(props).styles;
-    return (jsx("div", { className: clsx('tile', className, fillClass, shapeClass, alignClass, alignDirectionClass, direction && "direction_".concat(direction), borderColorClass, borderColorHoverClass, borderWidthClass, borderTypeClass, reverse && 'tile_reverse', size && "tile_size_".concat(size), type && "tile_type_".concat(type), badge && "tile_state_badge"), style: tileStyles, onClick: onClick, children: jsxs("div", { className: clsx('tile__wrapper', alignClass, alignDirectionClass), children: [before, title && (jsx(Title, { className: "tile__title", size: titleTextSize, textAlign: titleTextAlign, textColor: titleTextColor, textWeight: titleTextWeight, textWrap: titleTextWrap, children: title })), text && (jsx(Text, { className: "tile__text", size: textSize, textColor: textColor, textWrap: textWrap, children: text })), badge && (jsx(Badge, { className: "tile__badge", size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, value: badge })), children, after] }) }));
+    return (jsx("div", { className: clsx('tile', className, fillClass, shapeClass, alignClass, alignDirectionClass, direction && "direction_".concat(direction), borderColorClass, borderColorHoverClass, borderWidthClass, borderTypeClass, reverse && 'tile_reverse', size && "tile_size_".concat(size), type && "tile_type_".concat(type), badge && "tile_state_badge"), style: tileStyles, onClick: onClick, children: jsxs("div", { className: clsx('tile__wrapper', alignClass, alignDirectionClass), children: [before, title && (jsx(Title, { className: "tile__title", size: titleTextSize, textAlign: titleTextAlign, textColor: titleTextColor, textWeight: titleTextWeight, textWrap: titleTextWrap, children: title })), text && (jsx(Text, { className: "tile__text", size: textSize, textColor: textColor, textWrap: textWrap, children: text })), badge && (jsx(Badge, { className: "tile__badge", appearance: badgeAppearance, size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, value: badge })), children, after] }) }));
 }
 Tile.defaultProps = {
-    textTag: 'span',
     alignDirection: 'vertical',
+    textTag: 'span',
 };
 
 export { Tile };

package/dist/constants/componentProps/textColor.js

@@ -1,3 +1,3 @@
-const textColorProps = [null, false, 'accentTextPrimary', 'accentTextSecondary', 'accentTextTertiary', 'primaryTextPrimary', 'primaryTextSecondary', 'primaryTextTertiary', 'secondaryTextPrimary', 'secondaryTextSecondary', 'secondaryTextTertiary', 'tertiaryTextPrimary', 'tertiaryTextSecondary', 'surfaceTextPrimary', 'surfaceTextAccent', 'surfaceTextSecondary', 'surfaceTextTertiary', 'surfaceTextQuaternary', 'surfaceTextAccent', 'surfaceTextHover', 'surfaceTextFocus', 'surfaceTextActive', 'surfaceTextDisabled', 'errorTextPrimary', 'errorTextSecondary', 'successTextPrimary', 'successTextSecondary', 'surfaceTextInvert', 'surfaceTextInverse'];
+const textColorProps = [null, false, 'accentTextPrimary', 'accentTextSecondary', 'accentTextTertiary', 'primaryTextPrimary', 'primaryTextSecondary', 'primaryTextTertiary', 'secondaryTextPrimary', 'secondaryTextSecondary', 'secondaryTextTertiary', 'tertiaryTextPrimary', 'tertiaryTextSecondary', 'surfaceTextPrimary', 'surfaceTextAccent', 'surfaceTextSecondary', 'surfaceTextTertiary', 'surfaceTextQuaternary', 'surfaceTextAccent', 'surfaceTextHover', 'surfaceTextFocus', 'surfaceTextActive', 'surfaceTextDisabled', 'errorTextPrimary', 'errorTextSecondary', 'successTextPrimary', 'successTextSecondary', 'surfaceTextInverse'];
 
 export { textColorProps as default };

package/dist/constants/componentProps/textColorHover.js

@@ -1,3 +1,3 @@
-const textColorHoverProps = [null, false, 'accentTextPrimary', 'accentTextSecondary', 'accentTextTertiary', 'primaryTextPrimary', 'primaryTextSecondary', 'primaryTextTertiary', 'secondaryTextPrimary', 'secondaryTextSecondary', 'secondaryTextTertiary', 'tertiaryTextPrimary', 'tertiaryTextSecondary', 'surfaceTextPrimary', 'surfaceTextAccent', 'surfaceTextSecondary', 'surfaceTextTertiary', 'surfaceTextQuaternary', 'surfaceTextAccent', 'surfaceTextHover', 'surfaceTextFocus', 'surfaceTextActive', 'surfaceTextDisabled', 'errorTextPrimary', 'errorTextSecondary', 'successTextPrimary', 'successTextSecondary', 'surfaceTextInvert'];
+const textColorHoverProps = [null, false, 'accentTextPrimary', 'accentTextSecondary', 'accentTextTertiary', 'primaryTextPrimary', 'primaryTextSecondary', 'primaryTextTertiary', 'secondaryTextPrimary', 'secondaryTextSecondary', 'secondaryTextTertiary', 'tertiaryTextPrimary', 'tertiaryTextSecondary', 'surfaceTextPrimary', 'surfaceTextAccent', 'surfaceTextSecondary', 'surfaceTextTertiary', 'surfaceTextQuaternary', 'surfaceTextAccent', 'surfaceTextHover', 'surfaceTextFocus', 'surfaceTextActive', 'surfaceTextDisabled', 'errorTextPrimary', 'errorTextSecondary', 'successTextPrimary', 'successTextSecondary', 'surfaceTextInverse'];
 
 export { textColorHoverProps as default };

package/dist/css/components/Accordion/Accordion.css

@@ -49,6 +49,7 @@
   min-width: 170px;
   display: flex;
   flex-flow: row wrap;
+  align-items: center;
   gap: 14px;
   &__title {
     flex: 1;

package/dist/css/components/Choice/Choice.css

@@ -101,6 +101,20 @@
   }
 }
 
+.choice {
+  &_wrap {
+    &_wrap {
+      flex-wrap: wrap;
+    }
+    &_nowrap {
+      flex-wrap: nowrap;
+    }
+    &_wrap-reverse {
+      flex-wrap: wrap-reverse;
+    }
+  }
+}
+
 :root {
   --choice-item-background-hover: var(--color-surface-secondary);
 

package/dist/css/components/DatePicker/DatePicker.css

@@ -136,7 +136,7 @@ h2.react-datepicker__current-month {
   top: -4px;
 }
 .react-datepicker__navigation:hover *::before {
-  border-color: #a6a6a6;
+  border-color: rgb(165.75, 165.75, 165.75);
 }
 .react-datepicker__navigation-icon {
   position: relative;
@@ -298,15 +298,15 @@ h2.react-datepicker__current-month {
   color: #fff;
 }
 .react-datepicker__week-number--selected:hover {
-  background-color: #1d5d90;
+  background-color: rgb(28.75, 93.2196969697, 143.75);
 }
 .react-datepicker__week-number--keyboard-selected {
   border-radius: 0.3rem;
-  background-color: #2a87d0;
+  background-color: rgb(41.5, 134.5606060606, 207.5);
   color: #fff;
 }
 .react-datepicker__week-number--keyboard-selected:hover {
-  background-color: #1d5d90;
+  background-color: rgb(28.75, 93.2196969697, 143.75);
 }
 .react-datepicker__day-names {
   white-space: nowrap;
@@ -356,7 +356,7 @@ h2.react-datepicker__current-month {
 .react-datepicker__month-text--highlighted:not([aria-disabled=true]):hover,
 .react-datepicker__quarter-text--highlighted:not([aria-disabled=true]):hover,
 .react-datepicker__year-text--highlighted:not([aria-disabled=true]):hover {
-  background-color: #32be3f;
+  background-color: rgb(49.8551020408, 189.6448979592, 62.5632653061);
 }
 .react-datepicker__day--highlighted-custom-1,
 .react-datepicker__month-text--highlighted-custom-1,
@@ -400,7 +400,7 @@ h2.react-datepicker__current-month {
 .react-datepicker__month-text--holidays:not([aria-disabled=true]):hover,
 .react-datepicker__quarter-text--holidays:not([aria-disabled=true]):hover,
 .react-datepicker__year-text--holidays:not([aria-disabled=true]):hover {
-  background-color: #cf5300;
+  background-color: rgb(207, 82.9642857143, 0);
 }
 .react-datepicker__day--holidays:hover .overlay,
 .react-datepicker__month-text--holidays:hover .overlay,
@@ -433,21 +433,21 @@ h2.react-datepicker__current-month {
 .react-datepicker__year-text--selected:not([aria-disabled=true]):hover,
 .react-datepicker__year-text--in-selecting-range:not([aria-disabled=true]):hover,
 .react-datepicker__year-text--in-range:not([aria-disabled=true]):hover {
-  background-color: #1d5d90;
+  background-color: rgb(28.75, 93.2196969697, 143.75);
 }
 .react-datepicker__day--keyboard-selected,
 .react-datepicker__month-text--keyboard-selected,
 .react-datepicker__quarter-text--keyboard-selected,
 .react-datepicker__year-text--keyboard-selected {
   border-radius: 0.3rem;
-  background-color: #bad9f1;
+  background-color: rgb(186.25, 217.0833333333, 241.25);
   color: rgb(0, 0, 0);
 }
 .react-datepicker__day--keyboard-selected:not([aria-disabled=true]):hover,
 .react-datepicker__month-text--keyboard-selected:not([aria-disabled=true]):hover,
 .react-datepicker__quarter-text--keyboard-selected:not([aria-disabled=true]):hover,
 .react-datepicker__year-text--keyboard-selected:not([aria-disabled=true]):hover {
-  background-color: #1d5d90;
+  background-color: rgb(28.75, 93.2196969697, 143.75);
 }
 .react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range,
 .react-datepicker__month-text--in-range,
@@ -556,7 +556,7 @@ h2.react-datepicker__current-month {
 .react-datepicker__month-read-view:hover .react-datepicker__month-read-view--down-arrow,
 .react-datepicker__month-year-read-view:hover .react-datepicker__year-read-view--down-arrow,
 .react-datepicker__month-year-read-view:hover .react-datepicker__month-read-view--down-arrow {
-  border-top-color: #b3b3b3;
+  border-top-color: rgb(178.5, 178.5, 178.5);
 }
 .react-datepicker__year-read-view--down-arrow,
 .react-datepicker__month-read-view--down-arrow,
@@ -622,12 +622,12 @@ h2.react-datepicker__current-month {
 .react-datepicker__year-option:hover .react-datepicker__navigation--years-upcoming,
 .react-datepicker__month-option:hover .react-datepicker__navigation--years-upcoming,
 .react-datepicker__month-year-option:hover .react-datepicker__navigation--years-upcoming {
-  border-bottom-color: #b3b3b3;
+  border-bottom-color: rgb(178.5, 178.5, 178.5);
 }
 .react-datepicker__year-option:hover .react-datepicker__navigation--years-previous,
 .react-datepicker__month-option:hover .react-datepicker__navigation--years-previous,
 .react-datepicker__month-year-option:hover .react-datepicker__navigation--years-previous {
-  border-top-color: #b3b3b3;
+  border-top-color: rgb(178.5, 178.5, 178.5);
 }
 .react-datepicker__year-option--selected,
 .react-datepicker__month-option--selected,

package/dist/css/components/Icon/Icon.css

@@ -9,16 +9,20 @@
 }
 .icon {
   &_size {
-    @each $size in 14, 16, 24, 32, 40, 48, 56, 60, 64, 72, 80, 96, 112, 144  {
+    @each $size in 14, 16, 24, 32, 40, 48, 56, 60, 64, 72, 80, 96, 112, 144 {
       &_$(size) {
-        width: $(size)px;
-        height: $(size)px;
-        min-width: $(size)px;
-        min-height: $(size)px;
-        font-size: $(size)px;
+        width: $(size) px;
+        height: $(size) px;
+        min-width: $(size) px;
+        min-height: $(size) px;
+        font-size: $(size) px;
         display: flex;
         justify-content: center;
         align-items: center;
+        & > svg {
+          width: $(size) px;
+          height: $(size) px;
+        }
       }
     }
   }
@@ -27,7 +31,8 @@
   @each $type in accent, primary, secondary, tertiary, surface, success, error {
     &_$(type) {
       &-item {
-        @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled, hover, invert  {
+        @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled,
+          hover, inverse {
           &-$(color) {
             & svg {
               stroke: none;
@@ -36,7 +41,8 @@
           }
         }
       }
-      @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled, hover, invert  {
+      @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled,
+        hover, inverse {
         &-$(color) {
           & svg {
             stroke: none;

package/dist/css/components/Select/Select.css

@@ -168,7 +168,7 @@
 .select {
   &__input-container {
     flex: 1;
-    @each $sizeText in xs, s, m, l, xl, xxl {
+    @each $sizeText in xxs, xs, s, m, l, xl, xxl {
       &.text_size_$(sizeText) {
         & input {
           @mixin text-$(sizeText);

package/dist/css/components/Select/css/__input-container/select__input-container.css

@@ -1,7 +1,7 @@
 .select {
   &__input-container {
     flex: 1;
-    @each $sizeText in xs, s, m, l, xl, xxl {
+    @each $sizeText in xxs, xs, s, m, l, xl, xxl {
       &.text_size_$(sizeText) {
         & input {
           @mixin text-$(sizeText);

package/dist/css/mixins/mixin_animation.css

@@ -5,4 +5,4 @@
 
 @define-mixin easing $ease: easeInSine, $type: all, $time: 0.2s {
   transition: $type $time $ease;
-}
+}

package/dist/css/mixins/mixin_elevation.css

@@ -1,5 +1,3 @@
-/* stylelint-disable length-zero-no-unit */
-
 @define-mixin elevation-1 {
   box-shadow: var(--elevation-1);
 }