@itcase/ui 1.2.31 → 1.2.33

package/dist/cjs/components/InputPassword.js

@@ -3,35 +3,84 @@
 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-PoesVPJn.js');
-require('lodash/castArray');
+var Icon = require('../../Icon-C8ACV9r7.js');
 require('lodash/camelCase');
+require('lodash/castArray');
 require('../context/UIContext.js');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
 require('../../tslib.es6-CCZ3TN_7.js');
 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('../../Tooltip-CNJN2lf5.js');
-require('../appearance/Tooltip.js');
-require('../../Text-1b-Bk7yG.js');
-require('../appearance/Text.js');
-require('../../Title-o5ofk8ge.js');
-require('../appearance/Title.js');
+require('../../Tooltip-BswHy19O.js');
+require('../../Text-R6XNq6Ca.js');
+require('../../Title-DWIc05TX.js');
+
+var InputPasswordAppearance = {
+    dev: {
+        borderColor: 'surfaceBorderTertiary',
+        placeholderTextColor: 'surfaceTextSecondary',
+        shape: 'rounded',
+        size: 'm',
+        textColor: 'surfaceTextPrimary',
+        textSize: 'm',
+    },
+};
+var InputPasswordState = {
+    active: {
+        borderColor: 'surfaceBorderActive',
+        placeholderTextColor: 'secondaryTextSecondary',
+    },
+    activeFilled: {
+        borderColor: 'surfaceBorderActive',
+        textColor: 'surfaceTextPrimary',
+    },
+    disabled: {
+        borderColor: 'surfaceBorderDisabled',
+        placeholderTextColor: 'surfaceTextDisabled',
+        textColor: 'surfaceTextPrimary',
+    },
+    error: {
+        borderColor: 'errorBorderPrimary',
+        placeholderTextColor: 'secondaryTextSecondary',
+    },
+    errorFilled: {
+        borderColor: 'errorBorderPrimary',
+        textColor: 'surfaceTextPrimary',
+    },
+    filled: {
+        borderColor: 'surfaceBorderQuaternary',
+        textColor: 'surfaceTextPrimary',
+    },
+    normal: {
+        borderColor: 'surfaceBorderQuaternary',
+        placeholderTextColor: 'secondaryTextSecondary',
+    },
+    readonly: {
+        borderColor: 'surfaceBorderDisabled',
+        textColor: 'surfaceTextPrimary',
+    },
+    require: {
+        borderColor: 'surfaceBorderActive',
+        textColor: 'surfaceTextPrimary',
+    },
+    success: {
+        borderColor: 'successBorderPrimary',
+        textColor: 'surfaceTextPrimary',
+    },
+};
 
 var inputPasswordConfig = {
-    appearance: index.InputPasswordAppearance,
+    appearance: InputPasswordAppearance,
     setAppearance: function (newComponent) {
         inputPasswordConfig.appearance = newComponent;
     },
-    state: index.InputPasswordState,
+    state: InputPasswordState,
     // eslint-disable-next-line perfectionist/sort-objects
     setState: function (newComponent) {
         inputPasswordConfig.state = newComponent;

package/dist/cjs/components/Label.js

@@ -1,13 +1,12 @@
 'use strict';
 
-var Label = require('../../Label-BBm19sQ-.js');
+var Label = require('../../Label-B06hLCqo.js');
 require('react/jsx-runtime');
 require('react');
 require('clsx');
-require('../appearance/Label.js');
 require('../hooks/useDeviceTargetClass.js');
-require('lodash/castArray');
 require('lodash/camelCase');
+require('lodash/castArray');
 require('../context/UIContext.js');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
@@ -15,14 +14,12 @@ require('../hooks/useStyles.js');
 require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
-require('../../Text-1b-Bk7yG.js');
-require('../appearance/Text.js');
-require('../../Tooltip-CNJN2lf5.js');
-require('../appearance/Tooltip.js');
-require('../../Title-o5ofk8ge.js');
-require('../appearance/Title.js');
+require('../../Text-R6XNq6Ca.js');
+require('../../Tooltip-BswHy19O.js');
+require('../../Title-DWIc05TX.js');
 
 
 
 exports.Label = Label.Label;
+exports.labelAppearance = Label.labelAppearance;
 exports.labelConfig = Label.labelConfig;

package/dist/cjs/components/LanguageSelector.js

@@ -2,14 +2,13 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('clsx');
-var Icon = require('../../Icon-PoesVPJn.js');
+var Icon = require('../../Icon-C8ACV9r7.js');
 require('../../tslib.es6-CCZ3TN_7.js');
 require('react');
 require('react-inlinesvg');
-require('../appearance/Icon.js');
 require('../hooks/useDeviceTargetClass.js');
-require('lodash/castArray');
 require('lodash/camelCase');
+require('lodash/castArray');
 require('../context/UIContext.js');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
@@ -18,12 +17,9 @@ require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
 require('../../Link-CqWzwh8V.js');
-require('../../Tooltip-CNJN2lf5.js');
-require('../appearance/Tooltip.js');
-require('../../Text-1b-Bk7yG.js');
-require('../appearance/Text.js');
-require('../../Title-o5ofk8ge.js');
-require('../appearance/Title.js');
+require('../../Tooltip-BswHy19O.js');
+require('../../Text-R6XNq6Ca.js');
+require('../../Title-DWIc05TX.js');
 
 function LanguageSelectorItem(props) {
     var label = props.label, iconSize = props.iconSize, SvgImage = props.SvgImage, isActive = props.isActive, onClick = props.onClick;

package/dist/cjs/components/Link.js

@@ -6,8 +6,8 @@ require('react/jsx-runtime');
 require('react');
 require('clsx');
 require('../hooks/useDeviceTargetClass.js');
-require('lodash/castArray');
 require('lodash/camelCase');
+require('lodash/castArray');
 require('../context/UIContext.js');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');

package/dist/cjs/components/Loader.js

@@ -1,13 +1,12 @@
 'use strict';
 
-var Loader = require('../../Loader-DRTOGvF1.js');
+var Loader = require('../../Loader-DReoCdZ2.js');
 require('react/jsx-runtime');
 require('clsx');
-require('../appearance/Loader.js');
 require('../hooks/useDeviceTargetClass.js');
 require('react');
-require('lodash/castArray');
 require('lodash/camelCase');
+require('lodash/castArray');
 require('../context/UIContext.js');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
@@ -15,8 +14,7 @@ require('../hooks/useStyles.js');
 require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
-require('../../Text-1b-Bk7yG.js');
-require('../appearance/Text.js');
+require('../../Text-R6XNq6Ca.js');
 
 
 

package/dist/cjs/components/Logo.js

@@ -6,8 +6,8 @@ var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
 var useStyles = require('../hooks/useStyles.js');
 var Link = require('../../Link-CqWzwh8V.js');
 require('react');
-require('lodash/castArray');
 require('lodash/camelCase');
+require('lodash/castArray');
 require('../context/UIContext.js');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');

package/dist/cjs/components/Menu.js

@@ -4,21 +4,19 @@ 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-DPJ_9FxW.js');
+var MenuItem = require('../../MenuItem-BXogEsbS.js');
 require('react');
-require('lodash/castArray');
 require('lodash/camelCase');
+require('lodash/castArray');
 require('../context/UIContext.js');
 require('../hooks/useMediaQueries.js');
 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-1b-Bk7yG.js');
-require('../appearance/Text.js');
+require('../../Text-R6XNq6Ca.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,13 +1,12 @@
 'use strict';
 
-var MenuItem = require('../../MenuItem-DPJ_9FxW.js');
+var MenuItem = require('../../MenuItem-BXogEsbS.js');
 require('react/jsx-runtime');
 require('react');
 require('clsx');
-require('../appearance/MenuItem.js');
 require('../hooks/useDeviceTargetClass.js');
-require('lodash/castArray');
 require('lodash/camelCase');
+require('lodash/castArray');
 require('../context/UIContext.js');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
@@ -17,8 +16,7 @@ require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
 require('../../Link-CqWzwh8V.js');
 require('../../tslib.es6-CCZ3TN_7.js');
-require('../../Text-1b-Bk7yG.js');
-require('../appearance/Text.js');
+require('../../Text-R6XNq6Ca.js');
 
 
 

package/dist/cjs/components/Modal.js

@@ -4,25 +4,26 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
 var ReactDOM = require('react-dom');
-var index = require('../appearance/Modal.js');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
 var useStyles = require('../hooks/useStyles.js');
 var Overlay = require('../../Overlay-CFXouKnl.js');
-var Loader = require('../../Loader-DRTOGvF1.js');
-require('lodash/castArray');
+var Loader = require('../../Loader-DReoCdZ2.js');
 require('lodash/camelCase');
+require('lodash/castArray');
 require('../context/UIContext.js');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
 require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
-require('../appearance/Loader.js');
-require('../../Text-1b-Bk7yG.js');
-require('../appearance/Text.js');
+require('../../Text-R6XNq6Ca.js');
+
+var modalAppearance = {
+    dev: {},
+};
 
 var modalConfig = {
-    appearance: index.modalAppearance,
+    appearance: modalAppearance,
     setAppearance: function (newComponent) {
         modalConfig.appearance = newComponent;
     },

package/dist/cjs/components/ModalSheetBottom.js

@@ -7,8 +7,8 @@ var reactModalSheet = require('react-modal-sheet');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
 var useStyles = require('../hooks/useStyles.js');
 require('react');
-require('lodash/castArray');
 require('lodash/camelCase');
+require('lodash/castArray');
 require('../context/UIContext.js');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
@@ -28,7 +28,7 @@ function ModalSheetBottom(props) {
     });
     // @ts-expect-error
     var styles = useStyles.useStyles(props).styles;
-    return (jsxRuntime.jsxs(reactModalSheet.Sheet, tslib_es6.__assign({ className: clsx(className, 'modal-sheet-bottom', borderColorClass, fillClass), isOpen: isOpenModal, onClose: closeModal }, props, { children: [jsxRuntime.jsxs(reactModalSheet.Sheet.Container, { className: clsx(className, 'modal-sheet-bottom__container', borderColorClass, fillClass), style: styles, children: [closeButton ? (jsxRuntime.jsx("div", { className: clsx('modal-sheet-bottom__close'), onClick: closeModal, children: closeButton })) : (jsxRuntime.jsx(reactModalSheet.Sheet.Header, { className: clsx('modal-sheet-bottom__header') })), jsxRuntime.jsx(reactModalSheet.Sheet.Content, { className: clsx('modal-sheet-bottom__content'), children: children })] }), jsxRuntime.jsx(reactModalSheet.Sheet.Backdrop, { className: clsx('modal-sheet-bottom__backdrop'), onClick: closeModal })] })));
+    return (jsxRuntime.jsxs(reactModalSheet.Sheet, tslib_es6.__assign({ className: clsx(className, 'modal-sheet-bottom', borderColorClass, fillClass), isOpen: isOpenModal, onClose: closeModal }, props, { children: [jsxRuntime.jsxs(reactModalSheet.Sheet.Container, { className: clsx(className, 'modal-sheet-bottom__container', borderColorClass, fillClass), style: styles, children: [closeButton ? (jsxRuntime.jsx("div", { className: "modal-sheet-bottom__header", children: jsxRuntime.jsx("div", { className: clsx('modal-sheet-bottom__close'), onClick: closeModal, children: closeButton }) })) : (jsxRuntime.jsx(reactModalSheet.Sheet.Header, { className: "modal-sheet-bottom__header" })), jsxRuntime.jsx(reactModalSheet.Sheet.Content, { className: clsx('modal-sheet-bottom__content'), children: children })] }), jsxRuntime.jsx(reactModalSheet.Sheet.Backdrop, { className: clsx('modal-sheet-bottom__backdrop'), onClick: closeModal })] })));
 }
 
 exports.ModalSheetBottom = ModalSheetBottom;

package/dist/cjs/components/Notification.js

@@ -2,28 +2,58 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('clsx');
-var index = require('../appearance/Notification.js');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
 var useStyles = require('../hooks/useStyles.js');
-var Text = require('../../Text-1b-Bk7yG.js');
-var Title = require('../../Title-o5ofk8ge.js');
+var Text = require('../../Text-R6XNq6Ca.js');
+var Title = require('../../Title-DWIc05TX.js');
 var Notifications = require('../context/Notifications.js');
 require('react');
-require('lodash/castArray');
 require('lodash/camelCase');
+require('lodash/castArray');
 require('../context/UIContext.js');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
 require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
-require('../appearance/Text.js');
-require('../appearance/Title.js');
 require('../../tslib.es6-CCZ3TN_7.js');
 require('uuid');
 
+var notificationItemAppearance = {
+    accent: {
+        fill: 'accentPrimary',
+        textColor: 'accentTextPrimary',
+        titleTextColor: 'accentTextPrimary',
+    },
+    primary: {
+        fill: 'primaryPrimary',
+        textColor: 'primaryTextPrimary',
+        titleTextColor: 'primaryTextPrimary',
+    },
+    secondary: {
+        fill: 'secondaryPrimary',
+        textColor: 'secondaryTextPrimary',
+        titleTextColor: 'secondaryTextPrimary',
+    },
+    surfacePrimary: {
+        fill: 'surfacePrimary',
+        textColor: 'surfaceTextPrimary',
+        titleTextColor: 'surfaceTextPrimary',
+    },
+    surfaceSecondary: {
+        fill: 'surfaceSecondary',
+        textColor: 'surfaceTextPrimary',
+        titleTextColor: 'surfaceTextPrimary',
+    },
+    surfaceTertiary: {
+        fill: 'surfaceTertiary',
+        textColor: 'surfaceTextPrimary',
+        titleTextColor: 'surfaceTextPrimary',
+    },
+};
+
 var notificationItemConfig = {
-    appearance: index.notificationItemAppearance,
+    appearance: notificationItemAppearance,
     setAppearance: function (newComponent) {
         notificationItemConfig.appearance = newComponent;
     },
@@ -57,4 +87,5 @@ function NotificationList(props) {
 
 exports.NotificationItem = NotificationItem;
 exports.NotificationList = NotificationList;
+exports.notificationItemAppearance = notificationItemAppearance;
 exports.notificationItemConfig = notificationItemConfig;

package/dist/cjs/components/Overlay.js

@@ -5,8 +5,8 @@ require('react/jsx-runtime');
 require('clsx');
 require('../hooks/useDeviceTargetClass.js');
 require('react');
-require('lodash/castArray');
 require('lodash/camelCase');
+require('lodash/castArray');
 require('../context/UIContext.js');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');

package/dist/cjs/components/Page.js

@@ -5,8 +5,8 @@ var clsx = require('clsx');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
 var useStyles = require('../hooks/useStyles.js');
 require('react');
-require('lodash/castArray');
 require('lodash/camelCase');
+require('lodash/castArray');
 require('../context/UIContext.js');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');

package/dist/cjs/components/Pagination.js

@@ -6,11 +6,11 @@ var clsx = require('clsx');
 var ceil = require('lodash/ceil');
 var ReactPaginate = require('react-paginate');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
-var DropdownItem = require('../../DropdownItem-CT9Dmiub.js');
-var Icon = require('../../Icon-PoesVPJn.js');
-var Text = require('../../Text-1b-Bk7yG.js');
-require('lodash/castArray');
+var DropdownItem = require('../../DropdownItem-E9HkOU63.js');
+var Icon = require('../../Icon-C8ACV9r7.js');
+var Text = require('../../Text-R6XNq6Ca.js');
 require('lodash/camelCase');
+require('lodash/castArray');
 require('../context/UIContext.js');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
@@ -18,18 +18,12 @@ require('../hooks/useStyles.js');
 require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
-require('../appearance/DropdownItem.js');
-require('../../Divider-3upWnf8a.js');
-require('../appearance/Divider.js');
+require('../../Divider-BoB-f9Gr.js');
 require('../../Link-CqWzwh8V.js');
 require('../../tslib.es6-CCZ3TN_7.js');
 require('react-inlinesvg');
-require('../appearance/Icon.js');
-require('../../Tooltip-CNJN2lf5.js');
-require('../appearance/Tooltip.js');
-require('../../Title-o5ofk8ge.js');
-require('../appearance/Title.js');
-require('../appearance/Text.js');
+require('../../Tooltip-BswHy19O.js');
+require('../../Title-DWIc05TX.js');
 
 var paginationConfig = {
     appearance: undefined,

package/dist/cjs/components/Panel.js

@@ -5,18 +5,16 @@ var React = require('react');
 var clsx = require('clsx');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
 var useStyles = require('../hooks/useStyles.js');
-var Group = require('../../Group-BiN0haVp.js');
-var Text = require('../../Text-1b-Bk7yG.js');
-require('lodash/castArray');
+var Group = require('../../Group-u6YDbMxn.js');
+var Text = require('../../Text-R6XNq6Ca.js');
 require('lodash/camelCase');
+require('lodash/castArray');
 require('../context/UIContext.js');
 require('../hooks/useMediaQueries.js');
 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,27 +2,44 @@
 
 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-1b-Bk7yG.js');
+var Text = require('../../Text-R6XNq6Ca.js');
 require('react');
-require('lodash/castArray');
 require('lodash/camelCase');
+require('lodash/castArray');
 require('../context/UIContext.js');
 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 radioAppearance = {
+    dev: {
+        descTextColor: 'surfaceTextPrimary',
+        descTextSize: 's',
+        labelTextColor: 'surfaceTextPrimary',
+        labelTextSize: 'm',
+        stateBorderColor: 'surfaceBorderTertiary',
+        stateBorderWidth: 1,
+        stateCheckmarkFill: 'surfaceItemAccent',
+        stateShape: 'circular',
+    },
+};
+var radioState = {
+    normal: {
+        borderColor: 'surfaceBorderQuaternary',
+        placeholderTextColor: 'secondaryTextSecondary',
+    },
+};
+
 var radioConfig = {
-    appearance: index.radioState,
+    appearance: radioState,
     setAppearance: function (newComponent) {
         radioConfig.appearance = newComponent;
     },
-    state: index.radioAppearance,
+    state: radioAppearance,
     // eslint-disable-next-line perfectionist/sort-objects
     setState: function (newComponent) {
         radioConfig.state = newComponent;

package/dist/cjs/components/RangeSlider.js

@@ -6,8 +6,8 @@ var Slider = require('rc-slider');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
 var useStyles = require('../hooks/useStyles.js');
 require('react');
-require('lodash/castArray');
 require('lodash/camelCase');
+require('lodash/castArray');
 require('../context/UIContext.js');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');