@itcase/ui 1.2.28 → 1.2.29

package/dist/cjs/components/InputPassword.js

@@ -3,8 +3,9 @@
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
+var index = require('../appearance/InputPassword.js');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
-var Icon = require('../../Icon-CkynFJm4.js');
+var Icon = require('../../Icon-B2BwTQnP.js');
 require('lodash/castArray');
 require('lodash/camelCase');
 require('../context/UIContext.js');
@@ -12,25 +13,30 @@ require('prop-types');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
 require('react-inlinesvg');
+require('../appearance/Icon.js');
 require('../hooks/useStyles.js');
 require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
 require('../../Link-CqWzwh8V.js');
 require('../../tslib.es6-CCZ3TN_7.js');
-require('../../Tooltip-DsTCGS6h.js');
-require('../../Text-_YhyTsQ1.js');
-require('../../Title-B-N0qkn3.js');
+require('../../Tooltip-PrwacZFC.js');
+require('../appearance/Tooltip.js');
+require('../../Text-CC0xnhmx.js');
+require('../appearance/Text.js');
+require('../../Title-Ze_OL1Co.js');
+require('../appearance/Title.js');
 
 var inputPasswordConfig = {
-    appearance: undefined,
+    appearance: index.InputPasswordAppearance,
     setAppearance: function (newComponent) {
         inputPasswordConfig.appearance = newComponent;
     },
+    state: index.InputPasswordState,
+    // eslint-disable-next-line perfectionist/sort-objects
     setState: function (newComponent) {
         inputPasswordConfig.state = newComponent;
     },
-    state: undefined,
 };
 function InputPassword(props) {
     var id = props.id, isRevealable = props.isRevealable, appearance = props.appearance, className = props.className, disabled = props.disabled, iconFill = props.iconFill, iconFillHover = props.iconFillHover, iconRevealableHide = props.iconRevealableHide, iconRevealableShow = props.iconRevealableShow, iconShape = props.iconShape, iconSize = props.iconSize, imageRevealableHide = props.imageRevealableHide, imageRevealableShow = props.imageRevealableShow, placeholder = props.placeholder, state = props.state, value = props.value, onBlur = props.onBlur, onChange = props.onChange, onFocus = props.onFocus, onKeyDown = props.onKeyDown;

package/dist/cjs/components/Label.js

@@ -1,9 +1,10 @@
 'use strict';
 
-var Label = require('../../Label-BPP0om7_.js');
+var Label = require('../../Label-fp2Bus_T.js');
 require('react/jsx-runtime');
 require('react');
 require('clsx');
+require('../appearance/Label.js');
 require('../hooks/useDeviceTargetClass.js');
 require('lodash/castArray');
 require('lodash/camelCase');
@@ -15,9 +16,12 @@ require('../hooks/useStyles.js');
 require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
-require('../../Text-_YhyTsQ1.js');
-require('../../Tooltip-DsTCGS6h.js');
-require('../../Title-B-N0qkn3.js');
+require('../../Text-CC0xnhmx.js');
+require('../appearance/Text.js');
+require('../../Tooltip-PrwacZFC.js');
+require('../appearance/Tooltip.js');
+require('../../Title-Ze_OL1Co.js');
+require('../appearance/Title.js');
 
 
 

package/dist/cjs/components/LanguageSelector.js

@@ -2,9 +2,10 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('clsx');
-var Icon = require('../../Icon-CkynFJm4.js');
+var Icon = require('../../Icon-B2BwTQnP.js');
 require('react');
 require('react-inlinesvg');
+require('../appearance/Icon.js');
 require('../hooks/useDeviceTargetClass.js');
 require('lodash/castArray');
 require('lodash/camelCase');
@@ -18,9 +19,12 @@ require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
 require('../../Link-CqWzwh8V.js');
 require('../../tslib.es6-CCZ3TN_7.js');
-require('../../Tooltip-DsTCGS6h.js');
-require('../../Text-_YhyTsQ1.js');
-require('../../Title-B-N0qkn3.js');
+require('../../Tooltip-PrwacZFC.js');
+require('../appearance/Tooltip.js');
+require('../../Text-CC0xnhmx.js');
+require('../appearance/Text.js');
+require('../../Title-Ze_OL1Co.js');
+require('../appearance/Title.js');
 
 function LanguageSelectorItem(props) {
     var label = props.label, iconSize = props.iconSize, SvgImage = props.SvgImage, isActive = props.isActive, onClick = props.onClick;

package/dist/cjs/components/Loader.js

@@ -1,8 +1,9 @@
 'use strict';
 
-var Loader = require('../../Loader-fA11tUEJ.js');
+var Loader = require('../../Loader-Ck59IXGG.js');
 require('react/jsx-runtime');
 require('clsx');
+require('../appearance/Loader.js');
 require('../hooks/useDeviceTargetClass.js');
 require('react');
 require('lodash/castArray');
@@ -15,7 +16,8 @@ require('../hooks/useStyles.js');
 require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
-require('../../Text-_YhyTsQ1.js');
+require('../../Text-CC0xnhmx.js');
+require('../appearance/Text.js');
 
 
 

package/dist/cjs/components/Menu.js

@@ -4,7 +4,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('clsx');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
 var useStyles = require('../hooks/useStyles.js');
-var MenuItem = require('../../MenuItem-B5ypY7Uo.js');
+var MenuItem = require('../../MenuItem-BJ3uGKCH.js');
 require('react');
 require('lodash/castArray');
 require('lodash/camelCase');
@@ -15,9 +15,11 @@ require('react-responsive');
 require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
+require('../appearance/MenuItem.js');
 require('../../Link-CqWzwh8V.js');
 require('../../tslib.es6-CCZ3TN_7.js');
-require('../../Text-_YhyTsQ1.js');
+require('../../Text-CC0xnhmx.js');
+require('../appearance/Text.js');
 
 function Menu(props) {
     var after = props.after, before = props.before, children = props.children, className = props.className, items = props.items, type = props.type, onClickItem = props.onClickItem;

package/dist/cjs/components/MenuItem.js

@@ -1,9 +1,10 @@
 'use strict';
 
-var MenuItem = require('../../MenuItem-B5ypY7Uo.js');
+var MenuItem = require('../../MenuItem-BJ3uGKCH.js');
 require('react/jsx-runtime');
 require('react');
 require('clsx');
+require('../appearance/MenuItem.js');
 require('../hooks/useDeviceTargetClass.js');
 require('lodash/castArray');
 require('lodash/camelCase');
@@ -17,7 +18,8 @@ require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
 require('../../Link-CqWzwh8V.js');
 require('../../tslib.es6-CCZ3TN_7.js');
-require('../../Text-_YhyTsQ1.js');
+require('../../Text-CC0xnhmx.js');
+require('../appearance/Text.js');
 
 
 

package/dist/cjs/components/Modal.js

@@ -7,7 +7,7 @@ var ReactDOM = require('react-dom');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
 var useStyles = require('../hooks/useStyles.js');
 var Overlay = require('../../Overlay-CFXouKnl.js');
-var Loader = require('../../Loader-fA11tUEJ.js');
+var Loader = require('../../Loader-Ck59IXGG.js');
 require('lodash/castArray');
 require('lodash/camelCase');
 require('../context/UIContext.js');
@@ -17,7 +17,9 @@ require('react-responsive');
 require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
-require('../../Text-_YhyTsQ1.js');
+require('../appearance/Loader.js');
+require('../../Text-CC0xnhmx.js');
+require('../appearance/Text.js');
 
 var getOrCreateModalElement = function (modalQuerySelector, className) {
     var _a;

package/dist/cjs/components/Notification.js

@@ -2,32 +2,35 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('clsx');
-var useStyles = require('../hooks/useStyles.js');
+var index = require('../appearance/Notification.js');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
-var Text = require('../../Text-_YhyTsQ1.js');
-var Title = require('../../Title-B-N0qkn3.js');
+var useStyles = require('../hooks/useStyles.js');
+var Text = require('../../Text-CC0xnhmx.js');
+var Title = require('../../Title-Ze_OL1Co.js');
 var Notifications = require('../context/Notifications.js');
 require('react');
+require('lodash/castArray');
 require('lodash/camelCase');
-require('lodash/maxBy');
-require('lodash/upperFirst');
 require('../context/UIContext.js');
 require('prop-types');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
+require('lodash/maxBy');
+require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
-require('lodash/castArray');
+require('../appearance/Text.js');
+require('../appearance/Title.js');
 require('../../tslib.es6-CCZ3TN_7.js');
 require('uuid');
 
 var notificationItemConfig = {
-    appearance: {},
+    appearance: index.notificationItemAppearance,
     setAppearance: function (newComponent) {
         notificationItemConfig.appearance = newComponent;
     },
 };
 function NotificationItem(props) {
-    var id = props.id, appearance = props.appearance, closeButton = props.closeButton, after = props.after, before = props.before, set = props.set, status = props.status, size = props.size, dataTour = props.dataTour, text = props.text, _a = props.textSize, textSize = _a === void 0 ? 's' : _a, textColor = props.textColor, title = props.title, _b = props.titleTextSize, titleTextSize = _b === void 0 ? 'h5' : _b, titleTextColor = props.titleTextColor, onClickClose = props.onClickClose, className = props.className;
+    var id = props.id, after = props.after, appearance = props.appearance, before = props.before, className = props.className, closeButton = props.closeButton, dataTour = props.dataTour, set = props.set, size = props.size, status = props.status, text = props.text, textColor = props.textColor, _a = props.textSize, textSize = _a === void 0 ? 's' : _a, title = props.title, titleTextColor = props.titleTextColor, _b = props.titleTextSize, titleTextSize = _b === void 0 ? 'h5' : _b, onClickClose = props.onClickClose;
     var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
         prefix: 'fill_',
         propsKey: 'fill',
@@ -40,7 +43,7 @@ function NotificationItem(props) {
     var notificationStyles = useStyles.useStyles(props).styles;
     return (jsxRuntime.jsxs("div", { className: clsx('notification__item', status && "notification__item_status_".concat(status), set && "notification__item_set_".concat(set), size && "notification__item_set_".concat(size), closeButton && 'notification__item_type_close-button', widthClass, fillClass ||
             ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fill) &&
-                "fill_".concat(appearanceConfig.fill).replace(/([A-Z])/g, '-$1').toLowerCase())), style: notificationStyles, "data-tour": dataTour, children: [before, jsxRuntime.jsxs("div", { className: clsx(className, 'notification__item-wrapper'), children: [title && (jsxRuntime.jsx(Title.Title, { className: "notification__item-title", size: titleTextSize, textColor: titleTextColor ||
+                "fill_".concat(appearanceConfig.fill).replace(/([A-Z])/g, '-$1').toLowerCase())), "data-tour": dataTour, style: notificationStyles, children: [before, jsxRuntime.jsxs("div", { className: clsx(className, 'notification__item-wrapper'), children: [title && (jsxRuntime.jsx(Title.Title, { className: "notification__item-title", size: titleTextSize, textColor: titleTextColor ||
                             ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.titleTextColor) && appearanceConfig.titleTextColor), children: title })), text && (jsxRuntime.jsx(Text.Text, { className: "notification__item-text", size: textSize, textColor: textColor || ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.textColor) && appearanceConfig.textColor), children: text })), closeButton && (jsxRuntime.jsx("div", { className: clsx('notification__item-close', onClickClose && 'cursor_type_pointer'), onClick: function () { return onClickClose && onClickClose(id); }, children: closeButton }))] }), after] }));
 }
 

package/dist/cjs/components/Pagination.js

@@ -6,9 +6,9 @@ var clsx = require('clsx');
 var ceil = require('lodash/ceil');
 var ReactPaginate = require('react-paginate');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
-var DropdownItem = require('../../DropdownItem-D52wxY6I.js');
-var Icon = require('../../Icon-CkynFJm4.js');
-var Text = require('../../Text-_YhyTsQ1.js');
+var DropdownItem = require('../../DropdownItem-toApJyeB.js');
+var Icon = require('../../Icon-B2BwTQnP.js');
+var Text = require('../../Text-CC0xnhmx.js');
 require('lodash/castArray');
 require('lodash/camelCase');
 require('../context/UIContext.js');
@@ -23,8 +23,12 @@ require('../../Divider-BjB5MD6u.js');
 require('../../Link-CqWzwh8V.js');
 require('../../tslib.es6-CCZ3TN_7.js');
 require('react-inlinesvg');
-require('../../Tooltip-DsTCGS6h.js');
-require('../../Title-B-N0qkn3.js');
+require('../appearance/Icon.js');
+require('../../Tooltip-PrwacZFC.js');
+require('../appearance/Tooltip.js');
+require('../../Title-Ze_OL1Co.js');
+require('../appearance/Title.js');
+require('../appearance/Text.js');
 
 var paginationConfig = {
     appearance: undefined,

package/dist/cjs/components/Panel.js

@@ -5,8 +5,8 @@ var React = require('react');
 var clsx = require('clsx');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
 var useStyles = require('../hooks/useStyles.js');
-var Group = require('../../Group-B2oTJg0t.js');
-var Text = require('../../Text-_YhyTsQ1.js');
+var Group = require('../../Group-BiN0haVp.js');
+var Text = require('../../Text-CC0xnhmx.js');
 require('lodash/castArray');
 require('lodash/camelCase');
 require('../context/UIContext.js');
@@ -16,6 +16,8 @@ require('react-responsive');
 require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
+require('../appearance/Group.js');
+require('../appearance/Text.js');
 
 var panelConfig = {
     appearance: undefined,

package/dist/cjs/components/Radio.js

@@ -2,8 +2,9 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('clsx');
+var index = require('../appearance/Radio.js');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
-var Text = require('../../Text-_YhyTsQ1.js');
+var Text = require('../../Text-CC0xnhmx.js');
 require('react');
 require('lodash/castArray');
 require('lodash/camelCase');
@@ -11,23 +12,25 @@ require('../context/UIContext.js');
 require('prop-types');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
+require('../appearance/Text.js');
 require('../hooks/useStyles.js');
 require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
 
 var radioConfig = {
-    state: undefined,
-    setState: function (newComponent) {
-        radioConfig.state = newComponent;
-    },
-    appearance: undefined,
+    appearance: index.radioState,
     setAppearance: function (newComponent) {
         radioConfig.appearance = newComponent;
     },
+    state: index.radioAppearance,
+    // eslint-disable-next-line perfectionist/sort-objects
+    setState: function (newComponent) {
+        radioConfig.state = 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 id = props.id, appearance = props.appearance, 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, _a = props.tag, Tag = _a === void 0 ? 'label' : _a, onChange = props.onChange;
     var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
         prefix: 'fill_',
         propsKey: 'fill',
@@ -73,7 +76,7 @@ function Radio(props) {
                     ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.stateCheckmarkFill) &&
                         "radio_checkmark_fill_".concat(appearanceConfig.stateCheckmarkFill)
                             .replace(/([A-Z])/g, '-$1')
-                            .toLowerCase())), children: [jsxRuntime.jsx("input", { checked: checked, className: "radio__input", disabled: disabled, 
+                            .toLowerCase())), children: [jsxRuntime.jsx("input", { className: "radio__input", checked: checked, disabled: disabled, 
                         // @ts-expect-error
                         id: id, type: "radio", onChange: onChange }), jsxRuntime.jsx("div", { className: clsx('radio__state', disabled ? stateFillDisabledClass : stateFillClass, disabled
                             ? stateBorderColorDisabledClass

package/dist/cjs/components/Response.js

@@ -4,12 +4,13 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
 var SVG = require('react-inlinesvg');
+var index = require('../appearance/Response.js');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
 var useStyles = require('../hooks/useStyles.js');
-var Button = require('../../Button-COsywjkv.js');
-var Group = require('../../Group-B2oTJg0t.js');
-var Text = require('../../Text-_YhyTsQ1.js');
-var Title = require('../../Title-B-N0qkn3.js');
+var Button = require('../../Button-BcOsYgoT.js');
+var Group = require('../../Group-BiN0haVp.js');
+var Text = require('../../Text-CC0xnhmx.js');
+var Title = require('../../Title-Ze_OL1Co.js');
 require('lodash/castArray');
 require('lodash/camelCase');
 require('../context/UIContext.js');
@@ -19,23 +20,29 @@ require('react-responsive');
 require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
-require('../../Icon-CkynFJm4.js');
+require('../appearance/Button.js');
+require('../../Icon-B2BwTQnP.js');
+require('../appearance/Icon.js');
 require('../../Link-CqWzwh8V.js');
 require('../../tslib.es6-CCZ3TN_7.js');
-require('../../Tooltip-DsTCGS6h.js');
-require('../../Loader-fA11tUEJ.js');
+require('../../Tooltip-PrwacZFC.js');
+require('../appearance/Tooltip.js');
+require('../../Loader-Ck59IXGG.js');
+require('../appearance/Loader.js');
+require('../appearance/Group.js');
+require('../appearance/Text.js');
+require('../appearance/Title.js');
 
 var responseConfig = {
-    appearance: undefined,
+    appearance: index.responseAppearance,
     setAppearance: function (newComponent) {
         responseConfig.appearance = newComponent;
     },
 };
 function Response(props) {
-    var after = props.after, before = props.before, appearance = props.appearance, imageSrc = props.imageSrc, className = props.className, title = props.title, titleTextColor = props.titleTextColor, titleTextSize = props.titleTextSize, titleTextWeight = props.titleTextWeight, message = props.message, messageTextColor = props.messageTextColor, messageTextSize = props.messageTextSize, messageTextWeight = props.messageTextWeight, primaryButton = props.primaryButton, primaryButtonAfter = props.primaryButtonAfter, primaryButtonAppearance = props.primaryButtonAppearance, primaryButtonBefore = props.primaryButtonBefore, primaryButtonFill = props.primaryButtonFill, primaryButtonFillHover = props.primaryButtonFillHover, primaryButtonLabel = props.primaryButtonLabel, primaryButtonLabelTextColor = props.primaryButtonLabelTextColor, primaryButtonLabelTextSize = props.primaryButtonLabelTextSize, primaryButtonShape = props.primaryButtonShape, primaryButtonSize = props.primaryButtonSize, primaryButtonWidth = props.primaryButtonWidth, secondaryButton = props.secondaryButton, secondaryButtonAfter = props.secondaryButtonAfter, secondaryButtonAppearance = props.secondaryButtonAppearance, secondaryButtonBefore = props.secondaryButtonBefore, secondaryButtonFill = props.secondaryButtonFill, secondaryButtonFillHover = props.secondaryButtonFillHover, secondaryButtonLabel = props.secondaryButtonLabel, secondaryButtonLabelTextColor = props.secondaryButtonLabelTextColor, secondaryButtonLabelTextSize = props.secondaryButtonLabelTextSize, secondaryButtonShape = props.secondaryButtonShape, secondaryButtonSize = props.secondaryButtonSize, secondaryButtonWidth = props.secondaryButtonWidth, set = props.set, onClickPrimaryButton = props.onClickPrimaryButton, onClickSecondaryButton = props.onClickSecondaryButton;
+    var after = props.after, appearance = props.appearance, before = props.before, className = props.className, imageSrc = props.imageSrc, message = props.message, messageTextColor = props.messageTextColor, messageTextSize = props.messageTextSize, messageTextWeight = props.messageTextWeight, primaryButton = props.primaryButton, primaryButtonAfter = props.primaryButtonAfter, primaryButtonAppearance = props.primaryButtonAppearance, primaryButtonBefore = props.primaryButtonBefore, primaryButtonFill = props.primaryButtonFill, primaryButtonFillHover = props.primaryButtonFillHover, primaryButtonLabel = props.primaryButtonLabel, primaryButtonLabelTextColor = props.primaryButtonLabelTextColor, primaryButtonLabelTextSize = props.primaryButtonLabelTextSize, primaryButtonShape = props.primaryButtonShape, primaryButtonSize = props.primaryButtonSize, primaryButtonWidth = props.primaryButtonWidth, secondaryButton = props.secondaryButton, secondaryButtonAfter = props.secondaryButtonAfter, secondaryButtonAppearance = props.secondaryButtonAppearance, secondaryButtonBefore = props.secondaryButtonBefore, secondaryButtonFill = props.secondaryButtonFill, secondaryButtonFillHover = props.secondaryButtonFillHover, secondaryButtonLabel = props.secondaryButtonLabel, secondaryButtonLabelTextColor = props.secondaryButtonLabelTextColor, secondaryButtonLabelTextSize = props.secondaryButtonLabelTextSize, secondaryButtonShape = props.secondaryButtonShape, secondaryButtonSize = props.secondaryButtonSize, secondaryButtonWidth = props.secondaryButtonWidth, set = props.set, title = props.title, titleTextColor = props.titleTextColor, titleTextSize = props.titleTextSize, titleTextWeight = props.titleTextWeight, onClickPrimaryButton = props.onClickPrimaryButton, onClickSecondaryButton = props.onClickSecondaryButton;
     var ImageComponent = React.useMemo(function () {
         if (imageSrc) {
-            // eslint-disable-next-line react/prop-types
             if (imageSrc.endsWith('.svg')) {
                 return jsxRuntime.jsx(SVG, { src: imageSrc });
             }
@@ -84,7 +91,7 @@ function Response(props) {
                 primaryButton ||
                 secondaryButtonLabel ||
                 secondaryButton ||
-                appearanceConfig) && (jsxRuntime.jsxs(Group.Group, { className: "response__button", width: "fill", children: [primaryButtonLabel || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.primaryButtonLabel) ? (jsxRuntime.jsx(Button.Button, { after: primaryButtonAfter, appearance: primaryButtonAppearance || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.primaryButtonAppearance) || 'dev', before: primaryButtonBefore, className: "response__button-item", fill: primaryButtonFill, fillHover: primaryButtonFillHover, label: primaryButtonLabel || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.primaryButtonLabel), labelTextColor: primaryButtonLabelTextColor, labelTextSize: primaryButtonLabelTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.primaryButtonLabelTextSize), shape: primaryButtonShape || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.primaryButtonShape), size: primaryButtonSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.primaryButtonSize), width: primaryButtonWidth || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.primaryButtonWidth) || 'fill', onClick: onClickPrimaryButton })) : (primaryButton), secondaryButtonLabel || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.secondaryButtonLabel) ? (jsxRuntime.jsx(Button.Button, { after: secondaryButtonAfter, appearance: secondaryButtonAppearance || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.secondaryButtonAppearance) || 'dev', before: secondaryButtonBefore, className: "response__button-item", fill: secondaryButtonFill, fillHover: secondaryButtonFillHover, label: secondaryButtonLabel || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.secondaryButtonLabel), labelTextColor: secondaryButtonLabelTextColor, labelTextSize: secondaryButtonLabelTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.secondaryButtonLabelTextSize), shape: secondaryButtonShape || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.secondaryButtonShape), size: secondaryButtonSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.secondaryButtonSize), width: secondaryButtonWidth || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.secondaryButtonWidth) || 'fill', onClick: onClickSecondaryButton })) : (secondaryButton)] })), after] }));
+                appearanceConfig) && (jsxRuntime.jsxs(Group.Group, { className: "response__button", width: "fill", children: [primaryButtonLabel || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.primaryButtonLabel) ? (jsxRuntime.jsx(Button.Button, { className: "response__button-item", width: primaryButtonWidth || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.primaryButtonWidth) || 'fill', labelTextColor: primaryButtonLabelTextColor, labelTextSize: primaryButtonLabelTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.primaryButtonLabelTextSize), fill: primaryButtonFill, fillHover: primaryButtonFillHover, after: primaryButtonAfter, before: primaryButtonBefore, label: primaryButtonLabel || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.primaryButtonLabel), shape: primaryButtonShape || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.primaryButtonShape), size: primaryButtonSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.primaryButtonSize), appearance: primaryButtonAppearance || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.primaryButtonAppearance) || 'dev', onClick: onClickPrimaryButton })) : (primaryButton), secondaryButtonLabel || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.secondaryButtonLabel) ? (jsxRuntime.jsx(Button.Button, { className: "response__button-item", width: secondaryButtonWidth || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.secondaryButtonWidth) || 'fill', labelTextColor: secondaryButtonLabelTextColor, labelTextSize: secondaryButtonLabelTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.secondaryButtonLabelTextSize), fill: secondaryButtonFill, fillHover: secondaryButtonFillHover, after: secondaryButtonAfter, before: secondaryButtonBefore, label: secondaryButtonLabel || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.secondaryButtonLabel), shape: secondaryButtonShape || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.secondaryButtonShape), size: secondaryButtonSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.secondaryButtonSize), appearance: secondaryButtonAppearance || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.secondaryButtonAppearance) || 'dev', onClick: onClickSecondaryButton })) : (secondaryButton)] })), after] }));
 }
 
 exports.Response = Response;

package/dist/cjs/components/Search.js

@@ -3,10 +3,11 @@
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
+var index = require('../appearance/Search.js');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
 var useStyles = require('../hooks/useStyles.js');
-var Icon = require('../../Icon-CkynFJm4.js');
-var Text = require('../../Text-_YhyTsQ1.js');
+var Icon = require('../../Icon-B2BwTQnP.js');
+var Text = require('../../Text-CC0xnhmx.js');
 var Scrollbar = require('../../Scrollbar-DVlIZzvz.js');
 require('lodash/castArray');
 require('lodash/camelCase');
@@ -18,20 +19,24 @@ require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
 require('react-inlinesvg');
+require('../appearance/Icon.js');
 require('../../Link-CqWzwh8V.js');
 require('../../tslib.es6-CCZ3TN_7.js');
-require('../../Tooltip-DsTCGS6h.js');
-require('../../Title-B-N0qkn3.js');
+require('../../Tooltip-PrwacZFC.js');
+require('../appearance/Tooltip.js');
+require('../../Title-Ze_OL1Co.js');
+require('../appearance/Title.js');
+require('../appearance/Text.js');
 require('react-scrollbars-custom');
 
 var searchInputConfig = {
-    appearance: undefined,
+    appearance: index.searchAppearance,
     setAppearance: function (newComponent) {
         searchInputConfig.appearance = newComponent;
     },
 };
 var SearchInput = React.forwardRef(function SearchInput(props, ref) {
-    var after = props.after, appearance = props.appearance, before = props.before, className = props.className, size = props.size, dataTour = props.dataTour, iconAfter = props.iconAfter, iconAfterSrc = props.iconAfterSrc, iconAfterFill = props.iconAfterFill, iconAfterSize = props.iconAfterSize, iconBefore = props.iconBefore, iconBeforeSrc = props.iconBeforeSrc, iconBeforeFill = props.iconBeforeFill, iconBeforeSize = props.iconBeforeSize, iconClear = props.iconClear, iconClearSrc = props.iconClearSrc, iconClearFill = props.iconClearFill, iconClearSize = props.iconClearSize, placeholder = props.placeholder, placeholderTextColor = props.placeholderTextColor, placeholderTextSize = props.placeholderTextSize, placeholderTextStyle = props.placeholderTextStyle, placeholderTextWeight = props.placeholderTextWeight, type = props.type, value = props.value, onChange = props.onChange, onClickClean = props.onClickClean, onFocus = props.onFocus, onKeyDown = props.onKeyDown;
+    var after = props.after, appearance = props.appearance, before = props.before, className = props.className, dataTour = props.dataTour, iconAfter = props.iconAfter, iconAfterFill = props.iconAfterFill, iconAfterSize = props.iconAfterSize, iconAfterSrc = props.iconAfterSrc, iconBefore = props.iconBefore, iconBeforeFill = props.iconBeforeFill, iconBeforeSize = props.iconBeforeSize, iconBeforeSrc = props.iconBeforeSrc, iconClear = props.iconClear, iconClearFill = props.iconClearFill, iconClearSize = props.iconClearSize, iconClearSrc = props.iconClearSrc, placeholder = props.placeholder, placeholderTextColor = props.placeholderTextColor, placeholderTextSize = props.placeholderTextSize, placeholderTextStyle = props.placeholderTextStyle, placeholderTextWeight = props.placeholderTextWeight, size = props.size, type = props.type, value = props.value, onChange = props.onChange, onClickClean = props.onClickClean, onFocus = props.onFocus, onKeyDown = props.onKeyDown;
     var onChangeSearchInput = React.useCallback(function (event) {
         onChange && onChange(event.target.value);
     }, [onChange]);
@@ -120,8 +125,8 @@ SearchInput.DEFAULT_REF_STATE = {
     input: null,
 };
 SearchInput.defaultProps = {
-    placeholderTextSize: 'm',
     inputTextSize: 'm',
+    placeholderTextSize: 'm',
     size: 'normal',
 };
 

package/dist/cjs/components/Segmented.js

@@ -3,27 +3,29 @@
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
+var index = require('../appearance/Segmented.js');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
-var Text = require('../../Text-_YhyTsQ1.js');
+var Text = require('../../Text-CC0xnhmx.js');
 require('lodash/castArray');
 require('lodash/camelCase');
 require('../context/UIContext.js');
 require('prop-types');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
+require('../appearance/Text.js');
 require('../hooks/useStyles.js');
 require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
 
 var segmentedConfig = {
-    appearance: undefined,
+    appearance: index.segmentedAppearance,
     setAppearance: function (newComponent) {
         segmentedConfig.appearance = newComponent;
     },
 };
 var Segmented = React.forwardRef(function (props, ref) {
-    var appearance = props.appearance, name = props.name, className = props.className, type = props.type, segments = props.segments, activeSegment = props.activeSegment, setActiveSegment = props.setActiveSegment, size = props.size, labelTextColor = props.labelTextColor, labelTextActiveColor = props.labelTextActiveColor, labelTextSize = props.labelTextSize, labelTextWrap = props.labelTextWrap, onChange = props.onChange;
+    var isDisabled = props.isDisabled, _a = props.activeSegment, activeSegment = _a === void 0 ? {} : _a, appearance = props.appearance, className = props.className, labelTextActiveColor = props.labelTextActiveColor, labelTextActiveHoverColor = props.labelTextActiveHoverColor, labelTextColor = props.labelTextColor, labelTextHoverColor = props.labelTextHoverColor, labelTextSize = props.labelTextSize, labelTextWrap = props.labelTextWrap, name = props.name, segments = props.segments, setActiveSegment = props.setActiveSegment, size = props.size, type = props.type, onChange = props.onChange;
     var controlRef = React.useRef(null);
     var segmentsRefs = React.useMemo(function () { return new Map(segments.map(function (item) { return [item.value, React.createRef()]; })); }, [segments]);
     var onChangeValue = React.useCallback(function (item) {
@@ -83,23 +85,27 @@ var Segmented = React.forwardRef(function (props, ref) {
             ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fill) &&
                 "fill_".concat(appearanceConfig.fill).replace(/([A-Z])/g, '-$1').toLowerCase()), widthClass ||
             ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.width) &&
-                "segmented_width_".concat(appearanceConfig.width).replace(/([A-Z])/g, '-$1').toLowerCase()), size && "segmented_size_".concat(size), type && "segmented_type_".concat(type), borderColorClass, borderWidthClass, borderTypeClass), ref: controlRef, children: jsxRuntime.jsx("div", { className: "segmented__wrapper", children: jsxRuntime.jsxs("div", { className: clsx('segmented__wrapper-inner'), children: [segments === null || segments === void 0 ? void 0 : segments.map(function (item, i) { return (jsxRuntime.jsxs("div", { className: clsx('segmented__item', fillHoverClass ||
+                "segmented_width_".concat(appearanceConfig.width).replace(/([A-Z])/g, '-$1').toLowerCase()), size
+            ? "segmented_size_".concat(size)
+            : (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.size) &&
+                "segmented_size_".concat(appearanceConfig.size).replace(/([A-Z])/g, '-$1').toLowerCase(), type
+            ? "segmented_type_".concat(type)
+            : (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.type) &&
+                "segmented_type_".concat(appearanceConfig.type).replace(/([A-Z])/g, '-$1').toLowerCase(), borderColorClass, borderWidthClass, borderTypeClass), ref: controlRef, children: jsxRuntime.jsx("div", { className: "segmented__wrapper", children: jsxRuntime.jsxs("div", { className: clsx('segmented__wrapper-inner'), children: [segments === null || segments === void 0 ? void 0 : segments.map(function (item, i) { return (jsxRuntime.jsxs("div", { className: clsx('segmented__item', fillHoverClass ||
                             ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fillHover) &&
                                 "fill_hover_".concat(appearanceConfig.fillHover)
                                     .replace(/([A-Z])/g, '-$1')
-                                    .toLowerCase()), item.value === (activeSegment === null || activeSegment === void 0 ? void 0 : activeSegment.value) && 'segmented__item_active'), ref: segmentsRefs.get(item.value), children: [jsxRuntime.jsx("input", { checked: item.value === (activeSegment === null || activeSegment === void 0 ? void 0 : activeSegment.value), className: "segmented__item-radio", id: item.label, name: name, type: "radio", value: item.value, onChange: function () { return onChangeValue(item); } }), jsxRuntime.jsx("label", { className: clsx('segmented__item-label'), htmlFor: item.label, children: jsxRuntime.jsx(Text.Text, { className: clsx('segmented__item-label-text', labelTextWrap && "word-wrap_".concat(labelTextWrap)), size: labelTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextSize), textColor: item.value === (activeSegment === null || activeSegment === void 0 ? void 0 : activeSegment.value)
+                                    .toLowerCase()), item.value === (activeSegment === null || activeSegment === void 0 ? void 0 : activeSegment.value) && 'segmented__item_active', onChange && 'cursor_type_pointer', isDisabled && 'cursor_type_default'), ref: segmentsRefs.get(item.value), children: [jsxRuntime.jsx("input", { className: "segmented__item-radio", name: name, checked: item.value === (activeSegment === null || activeSegment === void 0 ? void 0 : activeSegment.value), id: item.label, type: "radio", value: item.value, onChange: function () { return onChangeValue(item); } }), jsxRuntime.jsx("label", { className: clsx('segmented__item-label'), htmlFor: item.label, children: jsxRuntime.jsx(Text.Text, { className: clsx('segmented__item-label-text', labelTextWrap && "word-wrap_".concat(labelTextWrap)), size: labelTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextSize), textColor: item.value === (activeSegment === null || activeSegment === void 0 ? void 0 : activeSegment.value)
                                         ? labelTextActiveColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextActiveColor)
-                                        : labelTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextColor), children: item.label }) })] }, item.value)); }), jsxRuntime.jsx("div", { className: clsx('segmented__indicator', indicatorFillClass ||
+                                        : labelTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextColor), textColorHover: item.value === (activeSegment === null || activeSegment === void 0 ? void 0 : activeSegment.value)
+                                        ? labelTextActiveHoverColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextActiveHoverColor)
+                                        : labelTextHoverColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextHoverColor), children: item.label }) })] }, item.value)); }), jsxRuntime.jsx("div", { className: clsx('segmented__indicator', indicatorFillClass ||
                             ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.indicatorFill) &&
                                 "fill_".concat(appearanceConfig.indicatorFill)
                                     .replace(/([A-Z])/g, '-$1')
                                     .toLowerCase())), children: "\u00A0" })] }) }) }));
 });
 Segmented.displayName = 'Segmented';
-Segmented.defaultProps = {
-    activeSegment: {},
-    size: 'normal',
-};
 
 exports.Segmented = Segmented;
 exports.segmentedConfig = segmentedConfig;

package/dist/cjs/components/Select.js

@@ -1,18 +1,20 @@
 'use strict';
 
+var index = require('../appearance/Select.js');
 var tslib_es6 = require('../../tslib.es6-CCZ3TN_7.js');
 var jsxRuntime = require('react/jsx-runtime');
 var Select = require('react-select');
-var Icon = require('../../Icon-CkynFJm4.js');
+var Icon = require('../../Icon-B2BwTQnP.js');
 var React = require('react');
 var clsx = require('clsx');
 var CreatableSelect = require('react-select/creatable');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
-var Text = require('../../Text-_YhyTsQ1.js');
-var Badge = require('../../Badge-2JkquAEb.js');
-var Group = require('../../Group-B2oTJg0t.js');
+var Text = require('../../Text-CC0xnhmx.js');
+var Badge = require('../../Badge-TyPbVqR_.js');
+var Group = require('../../Group-BiN0haVp.js');
 var Divider = require('../../Divider-BjB5MD6u.js');
 require('react-inlinesvg');
+require('../appearance/Icon.js');
 require('../hooks/useStyles.js');
 require('lodash/camelCase');
 require('lodash/maxBy');
@@ -23,9 +25,14 @@ require('../hooks/useMediaQueries.js');
 require('react-responsive');
 require('../hooks/styleAttributes.js');
 require('../../Link-CqWzwh8V.js');
-require('../../Tooltip-DsTCGS6h.js');
-require('../../Title-B-N0qkn3.js');
+require('../../Tooltip-PrwacZFC.js');
+require('../appearance/Tooltip.js');
+require('../../Title-Ze_OL1Co.js');
+require('../appearance/Title.js');
 require('lodash/castArray');
+require('../appearance/Text.js');
+require('../appearance/Badge.js');
+require('../appearance/Group.js');
 
 // interface ClearIndicatorProps<Option, IsMulti extends boolean, Group extends GroupBase<Option>>
 //   extends DefaultClearIndicatorProps<Option, IsMulti, Group> {}
@@ -311,7 +318,7 @@ SelectContainer.defaultProps = {
 };
 
 var selectConfig = {
-    appearance: {},
+    appearance: index.selectAppearance,
     setAppearance: function (newComponent) {
         selectConfig.appearance = newComponent;
     },