@itcase/ui 1.2.19 → 1.2.21

package/dist/Radio-oMf0vN7T.js

@@ -1,86 +0,0 @@
-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';
-
-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 as R, radioConfig as r };

package/dist/Switch-B5yVEqxz.js

@@ -1,14 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var clsx = require('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 (jsxRuntime.jsxs("div", { className: clsx('switch', className, size && "switch_size_".concat(size), set && "switch_set_".concat(set)), children: [jsxRuntime.jsx("input", { checked: checked, className: "switch__checkbox", disabled: disabled, id: id, 
-                // @ts-expect-error
-                ref: ref, type: "checkbox", onChange: onChange }), jsxRuntime.jsx("div", { className: "switch__bg", children: "\u00A0" }), jsxRuntime.jsx("div", { className: "switch__toggle", children: "\u00A0" })] }));
-});
-
-exports.Switch = Switch;

package/dist/Switch-DEXsrPCo.js

@@ -1,12 +0,0 @@
-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 as S };

package/dist/cjs/components/FormField.js

@@ -1,122 +0,0 @@
-'use strict';
-
-var tslib_es6 = require('../../tslib.es6-CCZ3TN_7.js');
-var jsxRuntime = require('react/jsx-runtime');
-var clsx = require('clsx');
-var Divider = require('../../Divider-BjB5MD6u.js');
-var Text = require('../../Text-_YhyTsQ1.js');
-var Icon = require('../../Icon-D-zjcPll.js');
-var useStyles = require('../hooks/useStyles.js');
-var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
-var Radio = require('../../Radio-BQo97TZL.js');
-require('react-select');
-var index = require('./Select.js');
-require('react');
-require('../../Badge-2JkquAEb.js');
-require('../../Group-B2oTJg0t.js');
-var Switch = require('../../Switch-B5yVEqxz.js');
-require('react-inlinesvg');
-require('../../Link-CqWzwh8V.js');
-require('../../Tooltip-DkTKx9n-.js');
-require('../../Title-zwP6c2U2.js');
-require('../context/UIContext.js');
-require('prop-types');
-require('../hooks/useMediaQueries.js');
-require('react-responsive');
-require('lodash/camelCase');
-require('lodash/maxBy');
-require('lodash/upperFirst');
-require('../hooks/styleAttributes.js');
-require('lodash/castArray');
-require('react-select/creatable');
-
-function FormField(props) {
-    var id = props.id, children = props.children, afterItem = props.afterItem, dataTestId = props.dataTestId, beforeItem = props.beforeItem, dividerWidth = props.dividerWidth, dividerDirection = props.dividerDirection, set = props.set, className = props.className, dividerSize = props.dividerSize, dividerFill = props.dividerFill, descSize = props.descSize, descTextWeight = props.descTextWeight, descTextColor = props.descTextColor, desc = props.desc, label = props.label, labelTextSize = props.labelTextSize, labelTextWeight = props.labelTextWeight, labelTextColor = props.labelTextColor, clearIconFill = props.clearIconFill, clearIcon = props.clearIcon, clearIconSize = props.clearIconSize, messageSize = props.messageSize, messageTextWeight = props.messageTextWeight, messageTextColor = props.messageTextColor, message = props.message;
-    var sizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'form-field_size_',
-        propsKey: 'size',
-    });
-    var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'fill_',
-        propsKey: 'fill',
-    });
-    var inputFillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'fill_',
-        propsKey: 'inputFill',
-    });
-    var shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'form-field_shape_',
-        propsKey: 'shape',
-    });
-    var inputShapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'form-field__item-value_shape_',
-        propsKey: 'inputShape',
-    });
-    var directionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'direction_',
-        propsKey: 'direction',
-    });
-    // @ts-expect-error
-    var formFieldStyles = useStyles.useStyles(props).styles;
-    return (jsxRuntime.jsxs("div", { className: clsx(className, 'form-field', set && "form-field_set_".concat(set), sizeClass, fillClass, shapeClass, directionClass), "data-test-id": dataTestId, style: formFieldStyles, children: [label && (jsxRuntime.jsx("label", { htmlFor: id, className: "form-field__label", children: jsxRuntime.jsx(Text.Text, { size: labelTextSize, textWeight: labelTextWeight, textColor: labelTextColor, children: label }) })), desc && (jsxRuntime.jsx("div", { className: "form-field__desc", children: jsxRuntime.jsx(Text.Text, { size: descSize, textWeight: descTextWeight, textColor: descTextColor, children: desc }) })), jsxRuntime.jsxs("div", { className: clsx('form-field__item', inputFillClass, inputShapeClass), children: [jsxRuntime.jsxs("div", { className: clsx('form-field__item-wrapper'), children: [beforeItem, children, clearIcon && jsxRuntime.jsx(Icon.Icon, { fill: clearIconFill, SvgImage: clearIcon, size: clearIconSize }), afterItem] }), jsxRuntime.jsx(Divider.Divider, { className: "form-field__item-divider", direction: dividerDirection, fill: dividerFill, size: dividerSize, width: dividerWidth })] }), message && (jsxRuntime.jsx("div", { className: "form-field__message", children: jsxRuntime.jsx(Text.Text, { size: messageSize, textWeight: messageTextWeight, textColor: messageTextColor, children: message }) }))] }));
-}
-FormField.defaultProps = {
-    dividerWidth: 'fill',
-    dividerDirection: 'horizontal',
-};
-
-function ChoiceField(props) {
-    var radioId = props.radioId, radioClassName = props.radioClassName, radioFillCheckmark = props.radioFillCheckmark, radioFillChecked = props.radioFillChecked, radioFill = props.radioFill, radioFillDisabled = props.radioFillDisabled, radioShape = props.radioShape, radioBorder = props.radioBorder;
-    return (jsxRuntime.jsx(FormField, tslib_es6.__assign({}, props, { children: jsxRuntime.jsx(Radio.Radio, { border: radioBorder, className: radioClassName, fill: radioFill, id: radioId, shape: radioShape, stateCheckmarkFill: radioFillCheckmark, stateFillChecked: radioFillChecked, stateFillDisabled: radioFillDisabled }) })));
-}
-ChoiceField.defaultProps = {
-    radioClassName: 'form-field__item-radio',
-};
-
-function PasswordField(props) {
-    var placeholder = props.placeholder, passwordClassName = props.passwordClassName, value = props.value;
-    var placeholderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'placeholder-text-color_',
-        propsKey: 'placeholderColor',
-    });
-    var valueTextColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'text text-color_',
-        propsKey: 'valueTextColor',
-    });
-    var valueTextSizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'text_size_',
-        propsKey: 'valueTextSize',
-    });
-    return (jsxRuntime.jsx(FormField, tslib_es6.__assign({}, props, { children: jsxRuntime.jsx("input", { type: "text", value: value, placeholder: placeholder, className: clsx(passwordClassName, valueTextSizeClass, valueTextColorClass, placeholderColorClass) }) })));
-}
-PasswordField.defaultProps = {
-    set: 'password',
-    passwordClassName: 'form-field__item-password',
-};
-
-function SelectField(props) {
-    var className = props.className, selectInputClass = props.selectInputClass, selectFill = props.selectFill, selectShape = props.selectShape, selectBorder = props.selectBorder, selectSize = props.selectSize, selectOptionFill = props.selectOptionFill, selectOptionTextSize = props.selectOptionTextSize, selectOptionTextColor = props.selectOptionTextColor, selectOptionBefore = props.selectOptionBefore, selectOptionAfter = props.selectOptionAfter, selectInputBefore = props.selectInputBefore, selectInputAfter = props.selectInputAfter, selectInputFill = props.selectInputFill, selectInputTextSize = props.selectInputTextSize, selectInputTextColor = props.selectInputTextColor;
-    return (jsxRuntime.jsx(FormField, tslib_es6.__assign({}, props, { children: jsxRuntime.jsx(index.SelectInput
-        // @ts-expect-error
-        , { 
-            // @ts-expect-error
-            className: clsx(selectInputClass, className), borderColor: selectBorder, fill: selectFill, inputAfter: selectInputAfter, inputBefore: selectInputBefore, inputFill: selectInputFill, inputTextColor: selectInputTextColor, inputTextSize: selectInputTextSize, optionAfter: selectOptionAfter, optionBefore: selectOptionBefore, optionFill: selectOptionFill, optionTextColor: selectOptionTextColor, optionTextSize: selectOptionTextSize, shape: selectShape, size: selectSize }) })));
-}
-SelectField.defaultProps = {
-    set: 'select',
-    selectInputClass: 'form-field__item-select',
-};
-
-function SwitchField(props) {
-    var className = props.className;
-    return (jsxRuntime.jsx(FormField, tslib_es6.__assign({}, props, { children: jsxRuntime.jsx(Switch.Switch, { className: clsx('form-field__item-switch', className) }) })));
-}
-SwitchField.defaultProps = {
-    set: 'switch',
-};
-
-exports.ChoiceField = ChoiceField;
-exports.FormField = FormField;
-exports.PasswordField = PasswordField;
-exports.SelectField = SelectField;
-exports.SwitchField = SwitchField;

package/dist/components/FormField.js

@@ -1,116 +0,0 @@
-import { _ as __assign } from '../tslib.es6-5FtW-kfi.js';
-import { jsxs, jsx } from 'react/jsx-runtime';
-import clsx from 'clsx';
-import { D as Divider } from '../Divider-U5UdY-ef.js';
-import { T as Text } from '../Text-CG3xPG27.js';
-import { I as Icon } from '../Icon-DD_Vyrw0.js';
-import { useStyles } from '../hooks/useStyles.js';
-import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
-import { R as Radio } from '../Radio-oMf0vN7T.js';
-import 'react-select';
-import { SelectInput } from './Select.js';
-import 'react';
-import '../Badge-CrhdvxY6.js';
-import '../Group-CVUfaHaS.js';
-import { S as Switch } from '../Switch-DEXsrPCo.js';
-import 'react-inlinesvg';
-import '../Link-CeQuavin.js';
-import '../Tooltip-DJufHBiQ.js';
-import '../Title-BfSFPJtJ.js';
-import '../context/UIContext.js';
-import 'prop-types';
-import '../hooks/useMediaQueries.js';
-import 'react-responsive';
-import 'lodash/camelCase';
-import 'lodash/maxBy';
-import 'lodash/upperFirst';
-import '../hooks/styleAttributes.js';
-import 'lodash/castArray';
-import 'react-select/creatable';
-
-function FormField(props) {
-    var id = props.id, children = props.children, afterItem = props.afterItem, dataTestId = props.dataTestId, beforeItem = props.beforeItem, dividerWidth = props.dividerWidth, dividerDirection = props.dividerDirection, set = props.set, className = props.className, dividerSize = props.dividerSize, dividerFill = props.dividerFill, descSize = props.descSize, descTextWeight = props.descTextWeight, descTextColor = props.descTextColor, desc = props.desc, label = props.label, labelTextSize = props.labelTextSize, labelTextWeight = props.labelTextWeight, labelTextColor = props.labelTextColor, clearIconFill = props.clearIconFill, clearIcon = props.clearIcon, clearIconSize = props.clearIconSize, messageSize = props.messageSize, messageTextWeight = props.messageTextWeight, messageTextColor = props.messageTextColor, message = props.message;
-    var sizeClass = useDeviceTargetClass(props, {
-        prefix: 'form-field_size_',
-        propsKey: 'size',
-    });
-    var fillClass = useDeviceTargetClass(props, {
-        prefix: 'fill_',
-        propsKey: 'fill',
-    });
-    var inputFillClass = useDeviceTargetClass(props, {
-        prefix: 'fill_',
-        propsKey: 'inputFill',
-    });
-    var shapeClass = useDeviceTargetClass(props, {
-        prefix: 'form-field_shape_',
-        propsKey: 'shape',
-    });
-    var inputShapeClass = useDeviceTargetClass(props, {
-        prefix: 'form-field__item-value_shape_',
-        propsKey: 'inputShape',
-    });
-    var directionClass = useDeviceTargetClass(props, {
-        prefix: 'direction_',
-        propsKey: 'direction',
-    });
-    // @ts-expect-error
-    var formFieldStyles = useStyles(props).styles;
-    return (jsxs("div", { className: clsx(className, 'form-field', set && "form-field_set_".concat(set), sizeClass, fillClass, shapeClass, directionClass), "data-test-id": dataTestId, style: formFieldStyles, children: [label && (jsx("label", { htmlFor: id, className: "form-field__label", children: jsx(Text, { size: labelTextSize, textWeight: labelTextWeight, textColor: labelTextColor, children: label }) })), desc && (jsx("div", { className: "form-field__desc", children: jsx(Text, { size: descSize, textWeight: descTextWeight, textColor: descTextColor, children: desc }) })), jsxs("div", { className: clsx('form-field__item', inputFillClass, inputShapeClass), children: [jsxs("div", { className: clsx('form-field__item-wrapper'), children: [beforeItem, children, clearIcon && jsx(Icon, { fill: clearIconFill, SvgImage: clearIcon, size: clearIconSize }), afterItem] }), jsx(Divider, { className: "form-field__item-divider", direction: dividerDirection, fill: dividerFill, size: dividerSize, width: dividerWidth })] }), message && (jsx("div", { className: "form-field__message", children: jsx(Text, { size: messageSize, textWeight: messageTextWeight, textColor: messageTextColor, children: message }) }))] }));
-}
-FormField.defaultProps = {
-    dividerWidth: 'fill',
-    dividerDirection: 'horizontal',
-};
-
-function ChoiceField(props) {
-    var radioId = props.radioId, radioClassName = props.radioClassName, radioFillCheckmark = props.radioFillCheckmark, radioFillChecked = props.radioFillChecked, radioFill = props.radioFill, radioFillDisabled = props.radioFillDisabled, radioShape = props.radioShape, radioBorder = props.radioBorder;
-    return (jsx(FormField, __assign({}, props, { children: jsx(Radio, { border: radioBorder, className: radioClassName, fill: radioFill, id: radioId, shape: radioShape, stateCheckmarkFill: radioFillCheckmark, stateFillChecked: radioFillChecked, stateFillDisabled: radioFillDisabled }) })));
-}
-ChoiceField.defaultProps = {
-    radioClassName: 'form-field__item-radio',
-};
-
-function PasswordField(props) {
-    var placeholder = props.placeholder, passwordClassName = props.passwordClassName, value = props.value;
-    var placeholderColorClass = useDeviceTargetClass(props, {
-        prefix: 'placeholder-text-color_',
-        propsKey: 'placeholderColor',
-    });
-    var valueTextColorClass = useDeviceTargetClass(props, {
-        prefix: 'text text-color_',
-        propsKey: 'valueTextColor',
-    });
-    var valueTextSizeClass = useDeviceTargetClass(props, {
-        prefix: 'text_size_',
-        propsKey: 'valueTextSize',
-    });
-    return (jsx(FormField, __assign({}, props, { children: jsx("input", { type: "text", value: value, placeholder: placeholder, className: clsx(passwordClassName, valueTextSizeClass, valueTextColorClass, placeholderColorClass) }) })));
-}
-PasswordField.defaultProps = {
-    set: 'password',
-    passwordClassName: 'form-field__item-password',
-};
-
-function SelectField(props) {
-    var className = props.className, selectInputClass = props.selectInputClass, selectFill = props.selectFill, selectShape = props.selectShape, selectBorder = props.selectBorder, selectSize = props.selectSize, selectOptionFill = props.selectOptionFill, selectOptionTextSize = props.selectOptionTextSize, selectOptionTextColor = props.selectOptionTextColor, selectOptionBefore = props.selectOptionBefore, selectOptionAfter = props.selectOptionAfter, selectInputBefore = props.selectInputBefore, selectInputAfter = props.selectInputAfter, selectInputFill = props.selectInputFill, selectInputTextSize = props.selectInputTextSize, selectInputTextColor = props.selectInputTextColor;
-    return (jsx(FormField, __assign({}, props, { children: jsx(SelectInput
-        // @ts-expect-error
-        , { 
-            // @ts-expect-error
-            className: clsx(selectInputClass, className), borderColor: selectBorder, fill: selectFill, inputAfter: selectInputAfter, inputBefore: selectInputBefore, inputFill: selectInputFill, inputTextColor: selectInputTextColor, inputTextSize: selectInputTextSize, optionAfter: selectOptionAfter, optionBefore: selectOptionBefore, optionFill: selectOptionFill, optionTextColor: selectOptionTextColor, optionTextSize: selectOptionTextSize, shape: selectShape, size: selectSize }) })));
-}
-SelectField.defaultProps = {
-    set: 'select',
-    selectInputClass: 'form-field__item-select',
-};
-
-function SwitchField(props) {
-    var className = props.className;
-    return (jsx(FormField, __assign({}, props, { children: jsx(Switch, { className: clsx('form-field__item-switch', className) }) })));
-}
-SwitchField.defaultProps = {
-    set: 'switch',
-};
-
-export { ChoiceField, FormField, PasswordField, SelectField, SwitchField };

package/dist/css/mixins/mixin.css

@@ -1,78 +0,0 @@
-/* stylelint-disable length-zero-no-unit */
-
-@define-mixin h1 $weight: normal, $minLetterSpacing: 0px, $maxLetterSpacing: 0px {
-  @mixin font $weight, 32px, 48px, $minLetterSpacing, 80px, 96px, $maxLetterSpacing,
-    var(--font-primary);
-}
-
-@define-mixin h2 $weight: normal, $minLetterSpacing: 0px, $maxLetterSpacing: 0px {
-  @mixin font $weight, 24px, 28px, $minLetterSpacing, 56px, 64px, $maxLetterSpacing,
-    var(--font-primary);
-}
-
-@define-mixin h3 $weight: normal, $minLetterSpacing: 0px, $maxLetterSpacing: 0px {
-  @mixin font $weight, 24px, 28px, $minLetterSpacing, 40px, 48px, $maxLetterSpacing,
-    var(--font-primary);
-}
-
-@define-mixin h4 $weight: normal, $minLetterSpacing: 0px, $maxLetterSpacing: 0px {
-  @mixin font $weight, 22px, 24px, $minLetterSpacing, 22px, 24px, $maxLetterSpacing,
-    var(--font-primary);
-}
-
-@define-mixin h5 $weight: normal, $minLetterSpacing: 0px, $maxLetterSpacing: 0px {
-  @mixin font $weight, 16px, 24px, $minLetterSpacing, 16px, 24px, $maxLetterSpacing,
-    var(--font-primary);
-}
-
-@define-mixin h6 $weight: normal, $minLetterSpacing: 0px, $maxLetterSpacing: 0px {
-  @mixin font $weight, 14px, 20px, $minLetterSpacing, 14px, 20px, $maxLetterSpacing,
-    var(--font-primary);
-}
-
-@define-mixin p $weight: normal, $minLetterSpacing: 0px, $maxLetterSpacing: 0px {
-  @mixin font $weight, 14px, 20px, $minLetterSpacing, 18px, 28px, $maxLetterSpacing,
-    var(--font-primary);
-}
-
-@define-mixin text-xxs $weight: normal, $minLetterSpacing: 0px, $maxLetterSpacing: 0px {
-  @mixin font $weight, 9px, 12px, $minLetterSpacing, 9px, 12px, $maxLetterSpacing,
-    var(--font-primary);
-}
-
-@define-mixin text-xs $weight: normal, $minLetterSpacing: 0px, $maxLetterSpacing: 0px {
-  @mixin font $weight, 9px, 12px, $minLetterSpacing, 9px, 12px, $maxLetterSpacing,
-    var(--font-primary);
-}
-
-@define-mixin text-s $weight: normal, $minLetterSpacing: 0px, $maxLetterSpacing: 0px {
-  @mixin font $weight, 10px, 12px, $minLetterSpacing, 10px, 12px, $maxLetterSpacing,
-    var(--font-primary);
-}
-
-@define-mixin text-m $weight: normal, $minLetterSpacing: 0px, $maxLetterSpacing: 0px {
-  @mixin font $weight, 12px, 18px, $minLetterSpacing, 12px, 18px, $maxLetterSpacing,
-    var(--font-primary);
-}
-
-@define-mixin text-l $weight: normal, $minLetterSpacing: 0px, $maxLetterSpacing: 0px {
-  @mixin font $weight, 14px, 20px, $minLetterSpacing, 14px, 20px, $maxLetterSpacing,
-    var(--font-primary);
-}
-
-@define-mixin text-xl $weight: normal, $minLetterSpacing: 0px, $maxLetterSpacing: 0px {
-  @mixin font $weight, 16px, 24px, $minLetterSpacing, 16px, 24px, $maxLetterSpacing,
-    var(--font-primary);
-}
-
-@define-mixin text-xxl $weight: normal, $minLetterSpacing: 0px, $maxLetterSpacing: 0px {
-  @mixin font $weight, 16px, 24px, $minLetterSpacing, 16px, 24px, $maxLetterSpacing,
-    var(--font-primary);
-}
-
-@define-mixin text-gradient-primary {
-  color: transparent;
-  background: linear-gradient(90deg, hsla(266, 100%, 64%, 1) 0%, hsla(213, 79%, 68%, 1) 50%);
-  background-clip: text;
-  text-fill-color: transparent;
-}

package/dist/stories/FormFieldCheckbox.stories.js

@@ -1,77 +0,0 @@
-import React from 'react'
-import { formTypes, emailValidation, addRequiredFieldsParamToSchema } from '@itcase/forms'
-import * as yup from 'yup'
-
-import Form from './form.js'
-
-export default {
-  title: 'Form Field / Checkbox',
-  component: Form,
-}
-
-const Template = (args) => {
-  const DEFAULT_REQUIRED_MESSAGE = 'This field is required'
-  const DEFAULT_INVALID_EMAIL_MESSAGE = 'Username must be a valid email'
-
-  // Create validation schema with rules for form fields
-  const validationSchema = yup.object().shape({
-    formFieldCheckbox: yup
-      .string()
-      .test('formFieldCheckbox', DEFAULT_INVALID_EMAIL_MESSAGE, emailValidation)
-      .required(DEFAULT_REQUIRED_MESSAGE),
-    password: yup.string().trim().required(DEFAULT_REQUIRED_MESSAGE),
-  })
-
-  // Add "requiredFields" as new param to schema
-  if (!('requiredFields' in validationSchema)) {
-    addRequiredFieldsParamToSchema(validationSchema)
-  }
-
-  // Create form config with fields
-  const config = {
-    formFieldCheckbox: {
-      type: formTypes.checkbox,
-      isRequired: true,
-      name: 'formFieldCheckbox',
-      fieldProps: {
-        type: 'normal',
-        width: 'fill',
-        direction: 'vertical',
-        dividerFill: 'errorPrimary',
-        fill: 'surfacePrimary',
-        label: 'Title',
-        labelTextSize: 'm',
-        labelTextColor: 'surfaceTextPrimary',
-        message: 'Help Text',
-        messageTextSize: 'xs',
-        messageTextColor: 'surfaceTextSecondary',
-        errorMessageTextSize: 'xs',
-        errorMessageTextColor: 'errorTextPrimary',
-      },
-      inputProps: {
-        width: 'fill',
-        caret: 'secondaryItemSecondary',
-        placeholder: 'Placeholder',
-        placeholderTextColor: 'surfaceTextSecondary',
-        shape: 'rounded',
-        borderColor: 'surfaceBorderQuaternary',
-        textColor: 'surfaceTextPrimary',
-        textSize: 'm',
-        stateShape: 'rounded',
-        stateBorderColor: 'accentBorderSecondary',
-        stateBorderColorChecked: 'accentBorderSecondary',
-        stateBorderColorDisabled: 'accentBorderSecondary',
-        stateBorderColorDisabledChecked: 'accentBorderSecondary',
-        stateBorderWidth: 1,
-        stateFillChecked: 'accentPrimary',
-        stateFillDisabled: 'accentDisabled',
-        stateFillDisabledChecked: 'accentDisabled',
-        stateCheckmarkFill: 'accentItemPrimary',
-        stateCheckmarkFillDisabled: 'accentItemDisabled',
-      },
-    },
-  }
-  return <Form config={config} validationSchema={validationSchema} />
-}
-
-export const Normal = Template.bind({})

package/dist/stories/FormFieldChoice.stories.js

@@ -1,75 +0,0 @@
-import React from 'react'
-import { formTypes, emailValidation, addRequiredFieldsParamToSchema } from '@itcase/forms'
-import * as yup from 'yup'
-
-import Form from './form.js'
-
-export default {
-  title: 'Form Field / Choice',
-  component: Form,
-}
-
-const Template = (args) => {
-  const DEFAULT_REQUIRED_MESSAGE = 'This field is required'
-  const DEFAULT_INVALID_EMAIL_MESSAGE = 'Username must be a valid email'
-
-  // Create validation schema with rules for form fields
-  const validationSchema = yup.object().shape({
-    formFieldChoice: yup
-      .string()
-      .test('formFieldChoice', DEFAULT_INVALID_EMAIL_MESSAGE, emailValidation)
-      .required(DEFAULT_REQUIRED_MESSAGE),
-    password: yup.string().trim().required(DEFAULT_REQUIRED_MESSAGE),
-  })
-
-  // Add "requiredFields" as new param to schema
-  if (!('requiredFields' in validationSchema)) {
-    addRequiredFieldsParamToSchema(validationSchema)
-  }
-
-  // Create form config with fields
-  const config = {
-    formFieldChoice: {
-      type: formTypes.choice,
-      isRequired: true,
-      name: 'formFieldChoice',
-      fieldProps: {
-        type: 'normal',
-        width: 'fill',
-        direction: 'vertical',
-        dividerFill: 'errorPrimary',
-        fill: 'surfacePrimary',
-        label: 'Title',
-        labelTextSize: 'm',
-        labelTextColor: 'surfaceTextPrimary',
-        message: 'Help Text',
-        messageTextSize: 'xs',
-        messageTextColor: 'surfaceTextSecondary',
-        errorMessageTextSize: 'xs',
-        errorMessageTextColor: 'errorTextPrimary',
-      },
-      inputProps: {
-        width: 'fill',
-        size: 'normal',
-        shape: 'rounded',
-        borderColor: 'surfaceBorderTertiary',
-        labelTextActiveColor: 'surfaceTextPrimary',
-        labelTextColor: 'surfaceTextPrimary',
-        labelTextSize: 'm',
-      },
-      options: [
-        { value: 1, label: 'Label 1' },
-        { value: 2, label: 'Label 2' },
-        { value: 3, label: 'Label 3' },
-        { value: 4, label: 'Label 4' },
-        { value: 5, label: 'Label 5' },
-      ],
-      active: {
-        value: 1,
-      },
-    },
-  }
-  return <Form config={config} validationSchema={validationSchema} />
-}
-
-export const Normal = Template.bind({})

package/dist/stories/FormFieldDatepicker.stories.js

@@ -1,51 +0,0 @@
-import React from 'react'
-import * as yup from 'yup'
-
-import { formTypes } from '@itcase/forms'
-
-import Form from './form.js'
-
-import { defaultFieldProps, defaultInputProps, defaultDatepickerProps } from 'src/config/forms'
-import { DEFAULT_REQUIRED_MESSAGE } from 'src/config/forms/messages'
-
-export default {
-  title: 'Form Field / DatePicker',
-  component: Form,
-}
-
-const Template = (args) => {
-  const validationSchema = yup.object().shape({
-    formFieldDatePicker: yup.string().required(DEFAULT_REQUIRED_MESSAGE),
-    password: yup.string().trim().required(DEFAULT_REQUIRED_MESSAGE),
-  })
-
-  const config = {
-    formFieldDatePicker: {
-      type: formTypes.datePicker,
-      name: 'formFieldDatePicker',
-      fieldProps: {
-        ...defaultFieldProps,
-        label: args?.config?.fieldProps?.label || 'Дата',
-        message: 'Например: 20/06/2023',
-      },
-      inputProps: {
-        ...defaultInputProps,
-      },
-      datePickerProps: {
-        ...defaultDatepickerProps,
-      },
-    },
-  }
-  return <Form config={config} validationSchema={validationSchema} />
-}
-
-export const Date = Template.bind({})
-
-export const DateTime = Template.bind()
-DateTime.args = {
-  config: {
-    fieldProps: {
-      label: 'asdasdasdasdasd'
-    }
-  }
-}