@mailstep/design-system 0.8.16-beta.1 → 0.8.16-beta.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mailstep/design-system",
-  "version": "0.8.16-beta.1",
+  "version": "0.8.16-beta.11",
   "license": "ISC",
   "type": "module",
   "main": "./ui/index.js",
@@ -19,7 +19,11 @@
     "deploy:win": "npm run build:win && npm publish ./build",
     "dev": "yarn storybook",
     "test": "echo \"The tests are still waiting to be written, but it seems like they're really good at procrastinating!\"",
-    "lint": "eslint src/**/*.{js,jsx,ts,tsx,json}"
+    "lint": "eslint ./packages/ui/**/*.{ts,tsx}",
+    "prepare": "husky install"
+  },
+  "lint-staged": {
+    "*.{js,ts,tsx}": "yarn eslint --fix"
   },
   "devDependencies": {
     "@babel/core": "^7.20.12",
@@ -40,6 +44,7 @@
     "@lingui/react": "3.17.2",
     "@popperjs/core": "^2.11.8",
     "@storybook/addon-designs": "^11.1.2",
+    "@storybook/addon-docs": "10.2.8",
     "@storybook/addon-links": "10.2.8",
     "@storybook/react-webpack5": "10.2.8",
     "@svgr/rollup": "^8.0.1",
@@ -74,7 +79,9 @@
     "eslint-plugin-react-perf": "^3.3.2",
     "eslint-plugin-storybook": "10.2.8",
     "faker": "^5.1.0",
+    "husky": "^9.1.7",
     "immer": "9.0.7",
+    "lint-staged": "^16.4.0",
     "lodash": "^4.17.21",
     "luxon": "^3.4.4",
     "moment": "^2.30.1",
@@ -98,12 +105,11 @@
     "styled-components": "^5.3.10",
     "swiper": "^11.0.3",
     "tslib": "^2.6.2",
-    "typescript": "^5.0.4",
+    "typescript": "5.1.3",
     "vite": "^5.0.10",
     "vite-plugin-dts": "^3.6.4",
     "vite-plugin-static-copy": "^1.0.0",
-    "webpack": "^5.82.1",
-    "@storybook/addon-docs": "10.2.8"
+    "webpack": "^5.82.1"
   },
   "peerDependencies": {
     "@dnd-kit/core": "^6.3.1",
@@ -141,7 +147,7 @@
     "styled-components": "^5.3.10",
     "swiper": "^11.0.3",
     "tslib": "^2.6.2",
-    "typescript": "^5.0.4"
+    "typescript": "5.1.3"
   },
   "resolutions": {
     "jackspeak": "2.1.1"

package/ui/Blocks/CommonGrid/components/ColumnTitle.js

@@ -5,11 +5,13 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { SortingUp, SortingDown } from './icons/Sorting';
-import styled from '@xstyled/styled-components';
+import styled, { useTheme, th } from '@xstyled/styled-components';
 var Title = styled.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  & + * {\n    margin-left: 1em;\n  }\n"], ["\n  & + * {\n    margin-left: 1em;\n  }\n"])));
 var ColumnTitle = function (_a) {
     var title = _a.title, isSortable = _a.isSortable, onSetSort = _a.onSetSort, sortValue = _a.sortValue;
     var _b = React.useState(0), mouseDownTimestamp = _b[0], setMouseDownTimestamp = _b[1];
+    var theme = useTheme();
+    var typoPrimaryColor = th.color('typoPrimary')({ theme: theme });
     var handleMouseDown = React.useCallback(function () {
         setMouseDownTimestamp(Date.now());
     }, []);
@@ -23,7 +25,7 @@ var ColumnTitle = function (_a) {
         }
         setMouseDownTimestamp(0);
     }, [mouseDownTimestamp, onSetSort, sortValue]);
-    return (_jsxs("div", { onMouseDown: isSortable ? handleMouseDown : undefined, onMouseUp: isSortable ? handleMouseUp : undefined, className: isSortable ? 'sortable' : '', children: [_jsx(Title, { children: title }), isSortable && sortValue === 'asc' && _jsx(SortingUp, { width: "16" }), isSortable && sortValue === 'desc' && _jsx(SortingDown, { width: "16" })] }));
+    return (_jsxs("div", { onMouseDown: isSortable ? handleMouseDown : undefined, onMouseUp: isSortable ? handleMouseUp : undefined, className: isSortable ? 'sortable' : '', children: [_jsx(Title, { children: title }), isSortable && sortValue === 'asc' && _jsx(SortingUp, { width: "16", fill: typoPrimaryColor }), isSortable && sortValue === 'desc' && _jsx(SortingDown, { width: "16", fill: typoPrimaryColor })] }));
 };
 export default React.memo(ColumnTitle);
 var templateObject_1;

package/ui/Blocks/CommonGrid/components/ExtraControlButtons/ExtraControlButtons.d.ts

@@ -4,7 +4,7 @@ import { CommonGridProps, ExtraControlButton } from '../../types';
 export declare const Row: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
 type Props = {
     extraControlButtons: CommonGridProps['extraControlButtons'];
-    targetPosition: ExtraControlButton['position'];
+    targetPosition?: ExtraControlButton['position'];
     isMobile?: boolean;
 };
 declare const ExtraControlButtons: FC<Props>;

package/ui/Blocks/CommonGrid/components/ExtraControlButtons/ExtraControlButtons.js

@@ -16,6 +16,7 @@ var __assign = (this && this.__assign) || function () {
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import Button from '../../../../Elements/Button/Button';
 import DropdownSelect from '../../../../Elements/DropdownSelect';
+import { ExtraControlButtonPosition } from '../../types';
 import ButtonMore from '../ButtonMore/ButtonMore';
 import styled, { x } from '@xstyled/styled-components';
 export var Row = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  & > * {\n    margin-right: 12px;\n  }\n  z-index: 2;\n"], ["\n  display: flex;\n  & > * {\n    margin-right: 12px;\n  }\n  z-index: 2;\n"])));
@@ -34,7 +35,7 @@ var ControlButton = function (_a) {
     }
 };
 var ExtraControlButtons = function (_a) {
-    var extraControlButtons = _a.extraControlButtons, targetPosition = _a.targetPosition, isMobile = _a.isMobile;
+    var extraControlButtons = _a.extraControlButtons, isMobile = _a.isMobile, _b = _a.targetPosition, targetPosition = _b === void 0 ? ExtraControlButtonPosition.TopRight : _b;
     var buttons = (extraControlButtons || []).filter(function (_a) {
         var position = _a.position, hide = _a.hide;
         return position === targetPosition && !hide;

package/ui/Blocks/CommonGrid/components/Filters/TextRange/TextRange.js

@@ -91,6 +91,6 @@ var TextRange = function (props) {
     var onChangeComparator = useEvent(function (option) {
         onChange({ comparator: option.value, value: fieldValue, isInvalid: isInvalid });
     });
-    return (_jsxs("div", { ref: pickerRef, children: [_jsx(Input, __assign({ name: name, "data-test": name, "data-cy": "".concat(name, "Inp"), value: fieldValue, label: label, onChange: onChangeTextInput, iconOnClick: !eqOnly ? togglePicker : undefined, icon: !eqOnly ? 'ellipsisVertical' : 'warning', iconPlacement: "right", iconTooltip: eqOnly ? eqOnlyTxt : undefined, type: "text", className: className, error: (!!validation && isInvalid && validation.errorMsg) || '', errorAppearance: 'tooltip', autoComplete: "off" }, rest)), isOpen && (_jsx(OverlayComponent, { children: _jsx(IconList, { list: comparatorOptions, selected: comparator, onClick: onChangeComparator }) }))] }));
+    return (_jsxs("div", { ref: pickerRef, children: [_jsx(Input, __assign({ name: name, "data-test": name, "data-cy": "".concat(name, "Inp"), value: fieldValue, label: label, onChange: onChangeTextInput, iconOnClick: !eqOnly ? togglePicker : undefined, icon: !eqOnly ? 'ellipsisVertical' : 'warning', iconPlacement: "right", iconTooltip: eqOnly ? eqOnlyTxt : undefined, type: "text", className: className, error: (!!validation && isInvalid && validation.errorMsg) || '', errorAppearance: "tooltip", autoComplete: "off" }, rest)), isOpen && (_jsx(OverlayComponent, { children: _jsx(IconList, { list: comparatorOptions, selected: comparator, onClick: onChangeComparator }) }))] }));
 };
 export default TextRange;

package/ui/Blocks/CommonGrid/components/MobileFilterModal.js

@@ -54,7 +54,7 @@ var MobileFilterModal = function (_a) {
         setLocalFilterValues({});
         onClearSettings === null || onClearSettings === void 0 ? void 0 : onClearSettings();
     }, [onClearSettings]);
-    return (_jsx(Modal, { isShown: isShown, onClose: onClose, title: _jsx(Trans, { id: "dataGrid.filter", message: "Filter" }), onCancel: handleReset, cancelLabel: _jsx(Trans, { id: "dataGrid.buttonClearSettings", message: "Reset" }), onConfirm: handleApplyFilters, confirmLabel: _jsx(Trans, { id: "dataGrid.filter", message: "Filter" }), hasFooter: hasActiveFilters, width: "narrow", children: _jsx(x.div, { display: "flex", flexDirection: "column", gap: "16px", p: "8px 4px", children: filterableColumns.map(function (column) {
+    return (_jsx(Modal, { isShown: isShown, onClose: onClose, title: _jsx(Trans, { id: "dataGrid.filter", message: "Filter" }), onCancel: handleReset, cancelLabel: _jsx(Trans, { id: "dataGrid.buttonClearSettings", message: "Reset" }), onConfirm: handleApplyFilters, confirmLabel: _jsx(Trans, { id: "dataGrid.filter", message: "Filter" }), hasFooter: hasActiveFilters, width: "narrow", ignoreClickOutside: true, children: _jsx(x.div, { display: "flex", flexDirection: "column", gap: "16px", p: "8px 4px", children: filterableColumns.map(function (column) {
                 var filterType = createFilterType(column);
                 var filterConfig = filters === null || filters === void 0 ? void 0 : filters[filterType];
                 var defaultComparators = comparators === null || comparators === void 0 ? void 0 : comparators[filterType];
@@ -63,7 +63,7 @@ var MobileFilterModal = function (_a) {
                 if (!(filterConfig === null || filterConfig === void 0 ? void 0 : filterConfig.CellComponent))
                     return null;
                 var RenderComponent = filterConfig.CellComponent;
-                return (_jsxs(x.div, { display: "flex", flexDirection: "column", gap: "6px", position: "relative", children: [column.title && (_jsx(H6, { mt: 0, mb: 0, variant: "semiBold", children: column.title })), _jsx(RenderComponent, __assign({ asyncLoadKey: column.asyncLoadKey, "data-test": column.name, name: column.name, onChange: handleChange(column), value: value, others: others, OverlayComponent: MobileOverlayWrapper, comparators: defaultComparators, actionColumn: actionColumn, rowsData: rowsData, uxState: uxState, handleUxChange: handleUxChange, onAsyncLoadFilterOptions: onAsyncLoadFilterOptions }, (filterType === 'date' && { compact: true }), (filterType === 'options' && { options: column.filterOptions }), filterConfig === null || filterConfig === void 0 ? void 0 : filterConfig.defaultExtraProps, column.filterExtraProps))] }, column.name));
+                return (_jsxs(x.div, { display: "flex", flexDirection: "column", gap: "6px", position: "relative", children: [column.title && (_jsx(H6, { mt: 0, mb: 0, variant: "semiBold", children: column.title })), _jsx(RenderComponent, __assign({ asyncLoadKey: column.asyncLoadKey, "data-test": column.name, name: column.name, onChange: handleChange(column), value: value, others: others, OverlayComponent: MobileOverlayWrapper, comparators: defaultComparators, actionColumn: actionColumn, rowsData: rowsData, uxState: uxState, handleUxChange: handleUxChange, onAsyncLoadFilterOptions: onAsyncLoadFilterOptions }, (filterType === 'date' && { compact: true }), (filterType === 'options' && { options: column.filterOptions, columnWidth: column === null || column === void 0 ? void 0 : column.flexBasis }), filterConfig === null || filterConfig === void 0 ? void 0 : filterConfig.defaultExtraProps, column.filterExtraProps))] }, column.name));
             }) }) }));
 };
 export default MobileFilterModal;

package/ui/Blocks/CommonGrid/components/MobileSortModal.js

@@ -29,6 +29,6 @@ var MobileSortModal = function (_a) {
     var handleClearSort = useCallback(function () {
         onResetSorting === null || onResetSorting === void 0 ? void 0 : onResetSorting();
     }, [onResetSorting]);
-    return (_jsx(Modal, { isShown: isShown, onClose: onClose, title: _jsx(Trans, { id: "dataGrid.sort", message: "Sort" }), onConfirm: activeSortedColumn ? handleClearSort : undefined, confirmLabel: _jsx(Trans, { id: "dataGrid.buttonClearSettings", message: "Reset" }), width: "narrow", children: _jsx(x.div, { display: "flex", flexDirection: "column", gap: "8px", p: "8px 4px", children: sortableColumns.map(function (column) { return (_jsx(SortRow, { column: column, currentDirection: getCurrentDirection(column), onCycle: handleCycle }, column.name)); }) }) }));
+    return (_jsx(Modal, { isShown: isShown, onClose: onClose, title: _jsx(Trans, { id: "dataGrid.sort", message: "Sort" }), onConfirm: activeSortedColumn ? handleClearSort : undefined, confirmLabel: _jsx(Trans, { id: "dataGrid.buttonClearSettings", message: "Reset" }), width: "narrow", ignoreClickOutside: true, children: _jsx(x.div, { display: "flex", flexDirection: "column", gap: "8px", p: "8px 4px", children: sortableColumns.map(function (column) { return (_jsx(SortRow, { column: column, currentDirection: getCurrentDirection(column), onCycle: handleCycle }, column.name)); }) }) }));
 };
 export default MobileSortModal;

package/ui/Blocks/CommonGrid/components/QuickFilter/QuickFilter.js

@@ -6,15 +6,12 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import Button from '../../../../Elements/Button';
 import Input from '../../../../Forms/Input';
 import styled, { x } from '@xstyled/styled-components';
-var StyledInput = styled(Input)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: ", ";\n  z-index: ", ";\n  width: ", ";\n"], ["\n  position: ", ";\n  z-index: ", ";\n  width: ", ";\n"])), function (_a) {
+var StyledInput = styled(Input)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: ", ";\n  z-index: ", ";\n  width: auto;\n"], ["\n  position: ", ";\n  z-index: ", ";\n  width: auto;\n"])), function (_a) {
     var isMobileInputView = _a.isMobileInputView;
     return (isMobileInputView ? 'absolute' : 'relative');
 }, function (_a) {
     var isMobileInputView = _a.isMobileInputView;
     return (isMobileInputView ? '3' : '1');
-}, function (_a) {
-    var isMobileInputView = _a.isMobileInputView;
-    return (isMobileInputView ? 'auto' : 'auto');
 });
 var QuickFilter = function (_a) {
     var searchedValue = _a.searchedValue, placeholderText = _a.placeholderText, onChange = _a.onChange, onClick = _a.onClick, displayInput = _a.displayInput, onClear = _a.onClear, isMobileInputView = _a.isMobileInputView, alwaysShowClear = _a.alwaysShowClear;

package/ui/Blocks/CommonGrid/components/Table.js

@@ -5,7 +5,7 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 import styled, { system, th } from '@xstyled/styled-components';
 export var Row = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", ";\n  display: flex;\n  min-height: 32px;\n  border-bottom: 1px solid rgb(228, 231, 235);\n  cursor: ", ";\n"], ["\n  ", ";\n  display: flex;\n  min-height: 32px;\n  border-bottom: 1px solid rgb(228, 231, 235);\n  cursor: ", ";\n"])), system, function (props) { return (props.hasRowClick ? 'pointer' : 'auto'); });
 export var Cell = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", ";\n  display: flex;\n  overflow: hidden;\n  align-items: center;\n  justify-content: ", ";\n  transition: ", ";\n  transform: ", ";\n"], ["\n  ", ";\n  display: flex;\n  overflow: hidden;\n  align-items: center;\n  justify-content: ", ";\n  transition: ", ";\n  transform: ", ";\n"])), system, function (props) { return props.align; }, function (props) { return props.transition; }, function (props) { return props.transform; });
-export var StyledDataRow = styled(Row)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (props) { return (props.isEven ? th('colors.bgLightGray') : 'white'); });
+export var StyledDataRow = styled(Row)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (props) { return (props.isEven ? th('colors.bgLightGray') : th('colors.white')); });
 export var TextCell = styled(Cell)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  text-overflow: ellipsis;\n  white-space: nowrap;\n"], ["\n  text-overflow: ellipsis;\n  white-space: nowrap;\n"])));
 export var MessageCell = styled(Cell)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  width: 100vw;\n  position: sticky;\n  left: 0;\n  justify-content: center;\n"], ["\n  width: 100vw;\n  position: sticky;\n  left: 0;\n  justify-content: center;\n"])));
 var variantColors = {

package/ui/Blocks/CommonGrid/styles.js

@@ -22,7 +22,7 @@ export var CommonGridWrap = styled(x.div)(templateObject_3 || (templateObject_3
     return (withPagination ? gridFooterHeight : 0);
 });
 export var StyledButtonStrip = styled(x.div)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  justify-content: space-between;\n  width: 100%;\n  min-height: auto;\n  padding: 10px;\n  flex-wrap: wrap;\n  z-index: 3;\n\n  @media (min-width: 768px) {\n    min-height: ", "px;\n    padding: 18px 20px;\n  }\n"], ["\n  position: relative;\n  display: flex;\n  justify-content: space-between;\n  width: 100%;\n  min-height: auto;\n  padding: 10px;\n  flex-wrap: wrap;\n  z-index: 3;\n\n  @media (min-width: 768px) {\n    min-height: ", "px;\n    padding: 18px 20px;\n  }\n"])), gridButtonStripHeight);
-export var CommonGridWithStyles = styled(CommonGrid)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  height: calc(100% - ", "px);\n\n  & .cell {\n    padding: 0 4px;\n  }\n  & .dataRow {\n    font-size: 12px;\n    font-family: ", ";\n    color: typoPrimary;\n    font-weight: normal;\n    border-bottom: 1px solid;\n    border-color: lightGray3;\n    height: ", "px;\n  }\n  & .gridHead {\n    height: ", "px;\n    background-color: neutral20;\n    padding-bottom: 8px;\n    position: sticky;\n    top: -1px;\n    z-index: 2;\n    border-top: 1px solid ", ";\n  }\n\n  & .filterRow {\n    display: none;\n  }\n\n  @media (min-width: 1023px) {\n    & .gridHead {\n      height: ", "px;\n    }\n    & .filterRow {\n      display: flex;\n    }\n  }\n  & .headRow {\n    font-size: 12px;\n    font-family: ", ";\n    color: typoPrimary;\n    font-weight: bold;\n    border-bottom: none; // TODO fix in common-grid\n\n    & .cell {\n      overflow: hidden;\n      max-height: 32px;\n      position: relative;\n    }\n\n    & .sticky {\n      background-color: bgLightGray1;\n    }\n  }\n\n  & .filterRow {\n    & .cell {\n      overflow: visible;\n    }\n\n    & .cell > div {\n      width: 100%; // TODO fix in common-grid\n    }\n\n    & .sticky {\n      background-color: bgLightGray1;\n    }\n    border-bottom: none; // TODO fix in common-grid\n  }\n\n  & .body {\n    flex-grow: 1;\n  }\n\n  & .gridWrapper {\n    background-color: ", ";\n    width: auto;\n    padding-bottom: 35px;\n\n    @media (min-width: 1024px) {\n      height: 100%;\n      overflow-y: auto;\n      padding-bottom: 0;\n    }\n    @media print {\n      margin: 0;\n      width: 100%;\n      height: auto;\n      overflow-x: hidden;\n    }\n  }\n\n  & .fullWidthGrid > .gridWrapper > div {\n    width: 100% !important;\n  }\n\n  & .paginatorWrapper,\n  & .buttonsStrip {\n    @media print {\n      display: none;\n    }\n  }\n  & .cell {\n    padding-left: 4px;\n    padding-right: 4px;\n    @media print {\n      white-space: unset;\n    }\n  }\n\n  .dataRow {\n    &.grayedOut {\n      background: lightGray1;\n    }\n\n    .sticky-right,\n    .sticky-left {\n      background: white;\n    }\n\n    .sticky-right {\n      border-left: 1px solid #dfe1e6;\n    }\n\n    .sticky-left {\n      border-right: 1px solid #dfe1e6;\n    }\n\n    &:hover,\n    &.checked,\n    &.selected {\n      background-color: red30;\n    }\n  }\n\n  .dataRow:nth-child(even) {\n    .sticky-left,\n    .sticky-right {\n      background-color: bgLightGray;\n    }\n  }\n\n  @media print {\n    .filterRow .sticky {\n      display: none;\n    }\n\n    .headRow .sticky {\n      display: none;\n    }\n\n    .dataRow .sticky {\n      display: none;\n    }\n  }\n\n  .resizer {\n    z-index: unset;\n  }\n\n  // hotfix table head\n  .cell .sortable {\n    display: flex;\n    align-items: center;\n    padding-right: 2px;\n  }\n\n  .sticky {\n    position: sticky !important;\n    z-index: 1;\n  }\n\n  .sticky-left {\n    left: 0;\n  }\n\n  .sticky-right {\n    right: 0;\n  }\n"], ["\n  height: calc(100% - ", "px);\n\n  & .cell {\n    padding: 0 4px;\n  }\n  & .dataRow {\n    font-size: 12px;\n    font-family: ", ";\n    color: typoPrimary;\n    font-weight: normal;\n    border-bottom: 1px solid;\n    border-color: lightGray3;\n    height: ", "px;\n  }\n  & .gridHead {\n    height: ", "px;\n    background-color: neutral20;\n    padding-bottom: 8px;\n    position: sticky;\n    top: -1px;\n    z-index: 2;\n    border-top: 1px solid ", ";\n  }\n\n  & .filterRow {\n    display: none;\n  }\n\n  @media (min-width: 1023px) {\n    & .gridHead {\n      height: ", "px;\n    }\n    & .filterRow {\n      display: flex;\n    }\n  }\n  & .headRow {\n    font-size: 12px;\n    font-family: ", ";\n    color: typoPrimary;\n    font-weight: bold;\n    border-bottom: none; // TODO fix in common-grid\n\n    & .cell {\n      overflow: hidden;\n      max-height: 32px;\n      position: relative;\n    }\n\n    & .sticky {\n      background-color: bgLightGray1;\n    }\n  }\n\n  & .filterRow {\n    & .cell {\n      overflow: visible;\n    }\n\n    & .cell > div {\n      width: 100%; // TODO fix in common-grid\n    }\n\n    & .sticky {\n      background-color: bgLightGray1;\n    }\n    border-bottom: none; // TODO fix in common-grid\n  }\n\n  & .body {\n    flex-grow: 1;\n  }\n\n  & .gridWrapper {\n    background-color: ", ";\n    width: auto;\n    padding-bottom: 35px;\n\n    @media (min-width: 1024px) {\n      height: 100%;\n      overflow-y: auto;\n      padding-bottom: 0;\n    }\n    @media print {\n      margin: 0;\n      width: 100%;\n      height: auto;\n      overflow-x: hidden;\n    }\n  }\n\n  & .fullWidthGrid > .gridWrapper > div {\n    width: 100% !important;\n  }\n\n  & .paginatorWrapper,\n  & .buttonsStrip {\n    @media print {\n      display: none;\n    }\n  }\n  & .cell {\n    padding-left: 4px;\n    padding-right: 4px;\n    @media print {\n      white-space: unset;\n    }\n  }\n\n  .dataRow {\n    &.grayedOut {\n      background: lightGray1;\n    }\n\n    .sticky-right,\n    .sticky-left {\n      background: white;\n    }\n\n    .sticky-right {\n      border-left: 1px solid #dfe1e6;\n    }\n\n    .sticky-left {\n      border-right: 1px solid #dfe1e6;\n    }\n\n    &:hover,\n    &.checked,\n    &.selected {\n      background-color: red30;\n    }\n  }\n\n  .dataRow:nth-child(even) {\n    .sticky-left,\n    .sticky-right {\n      background-color: bgLightGray;\n    }\n  }\n\n  @media print {\n    .filterRow .sticky {\n      display: none;\n    }\n\n    .headRow .sticky {\n      display: none;\n    }\n\n    .dataRow .sticky {\n      display: none;\n    }\n  }\n\n  .resizer {\n    z-index: unset;\n  }\n\n  // hotfix table head\n  .cell .sortable {\n    display: flex;\n    align-items: center;\n    padding-right: 2px;\n  }\n\n  .sticky {\n    position: sticky !important;\n    z-index: 1;\n  }\n\n  .sticky-left {\n    left: 0;\n  }\n\n  .sticky-right {\n    right: 0;\n  }\n"])), function (_a) {
+export var CommonGridWithStyles = styled(CommonGrid)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  height: calc(100% - ", "px);\n\n  & .cell {\n    padding: 0 4px;\n  }\n  & .dataRow {\n    font-size: 12px;\n    font-family: ", ";\n    color: typoPrimary;\n    font-weight: normal;\n    border-bottom: 1px solid;\n    border-color: lightGray3;\n    height: ", "px;\n  }\n  & .gridHead {\n    height: ", "px;\n    background-color: neutral20;\n    padding-bottom: 8px;\n    position: sticky;\n    top: -1px;\n    z-index: 2;\n    border-top: 1px solid ", ";\n  }\n\n  & .filterRow {\n    display: none;\n  }\n\n  @media (min-width: 1023px) {\n    & .gridHead {\n      height: ", "px;\n    }\n    & .filterRow {\n      display: flex;\n    }\n  }\n  & .headRow {\n    font-size: 12px;\n    font-family: ", ";\n    color: typoPrimary;\n    font-weight: bold;\n    border-bottom: none; // TODO fix in common-grid\n\n    & .cell {\n      overflow: hidden;\n      max-height: 32px;\n      position: relative;\n    }\n\n    & .sticky {\n      background-color: neutral20;\n    }\n  }\n\n  & .filterRow {\n    & .cell {\n      overflow: visible;\n    }\n\n    & .cell > div {\n      width: 100%; // TODO fix in common-grid\n    }\n\n    & .sticky {\n      background-color: neutral20;\n    }\n    border-bottom: none; // TODO fix in common-grid\n  }\n\n  & .body {\n    flex-grow: 1;\n  }\n\n  & .gridWrapper {\n    background-color: ", ";\n    width: auto;\n\n    @media (min-width: 1024px) {\n      height: 100%;\n      overflow-y: auto;\n    }\n    @media print {\n      margin: 0;\n      width: 100%;\n      height: auto;\n      overflow-x: hidden;\n    }\n  }\n\n  & .fullWidthGrid > .gridWrapper > div {\n    width: 100% !important;\n  }\n\n  & .paginatorWrapper,\n  & .buttonsStrip {\n    @media print {\n      display: none;\n    }\n  }\n  & .cell {\n    padding-left: 4px;\n    padding-right: 4px;\n    @media print {\n      white-space: unset;\n    }\n  }\n\n  .dataRow {\n    &.grayedOut {\n      background: lightGray1;\n    }\n\n    .sticky-right,\n    .sticky-left {\n      background-color: white;\n    }\n\n    .sticky-right {\n      border-left: 1px solid #dfe1e6;\n    }\n\n    .sticky-left {\n      border-right: 1px solid #dfe1e6;\n    }\n\n    &:hover,\n    &.checked,\n    &.selected {\n      background-color: red30;\n    }\n  }\n\n  .dataRow:nth-child(even) {\n    .sticky-left,\n    .sticky-right {\n      background-color: bgLightGray;\n    }\n  }\n\n  @media print {\n    .filterRow .sticky {\n      display: none;\n    }\n\n    .headRow .sticky {\n      display: none;\n    }\n\n    .dataRow .sticky {\n      display: none;\n    }\n  }\n\n  .resizer {\n    z-index: unset;\n  }\n\n  // hotfix table head\n  .cell .sortable {\n    display: flex;\n    align-items: center;\n    padding-right: 2px;\n  }\n\n  .sticky {\n    position: sticky !important;\n    z-index: 1;\n  }\n\n  .sticky-left {\n    left: 0;\n  }\n\n  .sticky-right {\n    right: 0;\n  }\n"], ["\n  height: calc(100% - ", "px);\n\n  & .cell {\n    padding: 0 4px;\n  }\n  & .dataRow {\n    font-size: 12px;\n    font-family: ", ";\n    color: typoPrimary;\n    font-weight: normal;\n    border-bottom: 1px solid;\n    border-color: lightGray3;\n    height: ", "px;\n  }\n  & .gridHead {\n    height: ", "px;\n    background-color: neutral20;\n    padding-bottom: 8px;\n    position: sticky;\n    top: -1px;\n    z-index: 2;\n    border-top: 1px solid ", ";\n  }\n\n  & .filterRow {\n    display: none;\n  }\n\n  @media (min-width: 1023px) {\n    & .gridHead {\n      height: ", "px;\n    }\n    & .filterRow {\n      display: flex;\n    }\n  }\n  & .headRow {\n    font-size: 12px;\n    font-family: ", ";\n    color: typoPrimary;\n    font-weight: bold;\n    border-bottom: none; // TODO fix in common-grid\n\n    & .cell {\n      overflow: hidden;\n      max-height: 32px;\n      position: relative;\n    }\n\n    & .sticky {\n      background-color: neutral20;\n    }\n  }\n\n  & .filterRow {\n    & .cell {\n      overflow: visible;\n    }\n\n    & .cell > div {\n      width: 100%; // TODO fix in common-grid\n    }\n\n    & .sticky {\n      background-color: neutral20;\n    }\n    border-bottom: none; // TODO fix in common-grid\n  }\n\n  & .body {\n    flex-grow: 1;\n  }\n\n  & .gridWrapper {\n    background-color: ", ";\n    width: auto;\n\n    @media (min-width: 1024px) {\n      height: 100%;\n      overflow-y: auto;\n    }\n    @media print {\n      margin: 0;\n      width: 100%;\n      height: auto;\n      overflow-x: hidden;\n    }\n  }\n\n  & .fullWidthGrid > .gridWrapper > div {\n    width: 100% !important;\n  }\n\n  & .paginatorWrapper,\n  & .buttonsStrip {\n    @media print {\n      display: none;\n    }\n  }\n  & .cell {\n    padding-left: 4px;\n    padding-right: 4px;\n    @media print {\n      white-space: unset;\n    }\n  }\n\n  .dataRow {\n    &.grayedOut {\n      background: lightGray1;\n    }\n\n    .sticky-right,\n    .sticky-left {\n      background-color: white;\n    }\n\n    .sticky-right {\n      border-left: 1px solid #dfe1e6;\n    }\n\n    .sticky-left {\n      border-right: 1px solid #dfe1e6;\n    }\n\n    &:hover,\n    &.checked,\n    &.selected {\n      background-color: red30;\n    }\n  }\n\n  .dataRow:nth-child(even) {\n    .sticky-left,\n    .sticky-right {\n      background-color: bgLightGray;\n    }\n  }\n\n  @media print {\n    .filterRow .sticky {\n      display: none;\n    }\n\n    .headRow .sticky {\n      display: none;\n    }\n\n    .dataRow .sticky {\n      display: none;\n    }\n  }\n\n  .resizer {\n    z-index: unset;\n  }\n\n  // hotfix table head\n  .cell .sortable {\n    display: flex;\n    align-items: center;\n    padding-right: 2px;\n  }\n\n  .sticky {\n    position: sticky !important;\n    z-index: 1;\n  }\n\n  .sticky-left {\n    left: 0;\n  }\n\n  .sticky-right {\n    right: 0;\n  }\n"])), function (_a) {
     var withButtonStrip = _a.withButtonStrip;
     return (withButtonStrip ? gridButtonStripHeight : 0);
 }, th('fonts.primary'), gridRowHeight, function (_a) {

package/ui/Blocks/Header/components/MenuItems/styles.js

@@ -3,7 +3,7 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     return cooked;
 };
 import styled from '@xstyled/styled-components';
-export var MenuItemsList = styled.ul(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: none;\n  gap: 10px;\n\n  @media (min-width: 1024px) {\n    display: flex;\n  }\n"], ["\n  display: none;\n  gap: 10px;\n\n  @media (min-width: 1024px) {\n    display: flex;\n  }\n"])));
+export var MenuItemsList = styled.ul(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  gap: 10px;\n"], ["\n  display: flex;\n  gap: 10px;\n"])));
 export var MenuItemsListItem = styled.li(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", ";\n\n  a {\n    text-decoration: none;\n    border-color: red1;\n    color: typoPrimary;\n  }\n\n  a:hover {\n    border-bottom: 1px solid;\n    color: red1;\n  }\n"], ["\n  ", ";\n\n  a {\n    text-decoration: none;\n    border-color: red1;\n    color: typoPrimary;\n  }\n\n  a:hover {\n    border-bottom: 1px solid;\n    color: red1;\n  }\n"])), function (_a) {
     var pointer = _a.pointer;
     return pointer && 'cursor: pointer;';

package/ui/Blocks/Header/hooks/useChangeLanguage.js

@@ -2,7 +2,6 @@ export var useChangeLanguage = function (_a) {
     var onChangeLanguage = _a.onChangeLanguage;
     var handleChangeLanguage = function (languageCode) {
         onChangeLanguage === null || onChangeLanguage === void 0 ? void 0 : onChangeLanguage(languageCode);
-        location.reload();
     };
     return {
         handleChangeLanguage: handleChangeLanguage

package/ui/Blocks/Header/styles.js

@@ -4,8 +4,8 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 };
 import { headerHeight } from './utils/constants';
 import styled, { th } from '@xstyled/styled-components';
-export var Container = styled.header(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 0 20px;\n  height: ", ";\n  border-bottom: 1px solid ", ";\n"], ["\n  width: 100%;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 0 20px;\n  height: ", ";\n  border-bottom: 1px solid ", ";\n"])), headerHeight, th.color('lightGray7'));
+export var Container = styled.header(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 0 8px;\n  height: ", ";\n  border-bottom: 1px solid ", ";\n\n  @media (min-width: 768px) {\n    padding: 0 20px;\n  }\n"], ["\n  width: 100%;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 0 8px;\n  height: ", ";\n  border-bottom: 1px solid ", ";\n\n  @media (min-width: 768px) {\n    padding: 0 20px;\n  }\n"])), headerHeight, th.color('lightGray7'));
 export var LeftSide = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
 export var LanguageWrapper = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  justify-content: flex-end;\n"], ["\n  display: flex;\n  justify-content: flex-end;\n"])));
-export var RightSide = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  gap: 20px;\n  align-items: center;\n"], ["\n  display: flex;\n  gap: 20px;\n  align-items: center;\n"])));
+export var RightSide = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  gap: 4px;\n  align-items: center;\n\n  @media (min-width: 768px) {\n    gap: 20px;\n  }\n"], ["\n  display: flex;\n  gap: 4px;\n  align-items: center;\n\n  @media (min-width: 768px) {\n    gap: 20px;\n  }\n"])));
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/ui/Blocks/LanguageSwitch/LanguageSwitch.js

@@ -1,15 +1,20 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback, useMemo, useRef, useState } from 'react';
+import DropdownMenu from '../../Elements/DropdownMenu';
 import Icon from '../../Elements/Icon/Icon';
-import { useClickOutside } from '../Modal/hooks/useClickOutside';
-import { StyledFlag, LanguageFlagWrap, LanguageSwitchWrap, StyledDropdownMenu } from './styles';
+import Popover from '../Popover';
+import { StyledFlag, LanguageFlagWrap, LanguageSwitchWrap } from './styles';
+var placementMap = {
+    left: 'bottom-start',
+    right: 'bottom-end'
+};
 var LanguageSwitch = function (_a) {
     var activeLanguage = _a.activeLanguage, onLanguageChange = _a.onLanguageChange, languageItems = _a.languageItems, _b = _a.placement, placement = _b === void 0 ? 'right' : _b, withTitle = _a.withTitle, languageFlagWrapBackgroundColor = _a.languageFlagWrapBackgroundColor;
     var _c = useState(false), flagDropdownVisible = _c[0], setFlagDropdownVisible = _c[1];
+    var flagWrapRef = useRef(null);
     var onClose = useCallback(function () {
         setFlagDropdownVisible(false);
     }, []);
-    var flagMenuRef = useClickOutside({ onClose: onClose });
     var handleFlagClick = useCallback(function () {
         setFlagDropdownVisible(!flagDropdownVisible);
     }, [flagDropdownVisible]);
@@ -30,6 +35,6 @@ var LanguageSwitch = function (_a) {
     }, [filteredLanguages, languageToggle]);
     if (!activeLanguageObj || !languageItems)
         return null;
-    return (_jsxs(LanguageSwitchWrap, { ref: flagMenuRef, children: [_jsxs(LanguageFlagWrap, { onClick: handleFlagClick, backgroundColor: languageFlagWrapBackgroundColor, withTitle: withTitle, children: [_jsxs(StyledFlag, { children: [activeLanguageObj.icon, withTitle && activeLanguageObj.title] }), _jsx(Icon, { icon: "chevronDown", size: "10px" })] }), _jsx(StyledDropdownMenu, { showMenu: flagDropdownVisible, items: formattedLanguages, placement: placement })] }));
+    return (_jsxs(LanguageSwitchWrap, { children: [_jsxs(LanguageFlagWrap, { ref: flagWrapRef, onClick: handleFlagClick, backgroundColor: languageFlagWrapBackgroundColor, withTitle: withTitle, children: [_jsxs(StyledFlag, { children: [activeLanguageObj.icon, withTitle && activeLanguageObj.title] }), _jsx(Icon, { icon: "chevronDown", size: "10px" })] }), flagDropdownVisible && (_jsx(Popover, { parentRef: flagWrapRef, onClose: onClose, placement: placementMap[placement], children: _jsx(DropdownMenu, { showMenu: true, items: formattedLanguages }) }))] }));
 };
 export default LanguageSwitch;

package/ui/Blocks/LanguageSwitch/styles.d.ts

@@ -1,9 +1,4 @@
-import { Placement } from './types';
-
 export declare const StyledFlag: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
-export declare const StyledDropdownMenu: import('styled-components').StyledComponent<(<T extends import('../../Elements/DropdownMenu/types').Item>({ items, showMenu, className, ItemComponent, header, footer, ...rest }: import('../../Elements/DropdownMenu/types').DropdownMenuProps<T>) => import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>), import('@xstyled/system').Theme, {
-    placement: Placement;
-}, never>;
 export declare const LanguageSwitchWrap: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
 export declare const LanguageFlagWrap: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
     backgroundColor?: string | undefined;

package/ui/Blocks/LanguageSwitch/styles.js

@@ -2,22 +2,14 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-import DropdownMenu from '../../Elements/DropdownMenu';
 import styled from '@xstyled/styled-components';
 export var StyledFlag = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  cursor: pointer;\n  font-size: 16px;\n  display: flex;\n  gap: 6px;\n  align-items: center;\n"], ["\n  cursor: pointer;\n  font-size: 16px;\n  display: flex;\n  gap: 6px;\n  align-items: center;\n"])));
-export var StyledDropdownMenu = styled(DropdownMenu)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  top: 30px;\n  right: -5px;\n\n  width: max-content;\n  @media (min-width: 1024px) {\n    ", "\n  }\n  & > ul > a > * {\n    display: flex;\n    align-items: center;\n  }\n\n  :before {\n    content: '';\n    top: -1px;\n    right: 15px;\n    position: absolute;\n    height: 10px;\n    width: 10px;\n    -webkit-transform: rotate(45deg) translate(-7px);\n    -ms-transform: rotate(45deg) translate(-7px);\n    transform: rotate(45deg) translate(-7px);\n    border-left: 1px solid rgba(0, 0, 0, 0.1);\n    background: white;\n    border-top: 1px solid rgba(0, 0, 0, 0.1);\n    @media (min-width: 1024px) {\n      ", "\n    }\n  }\n"], ["\n  position: absolute;\n  top: 30px;\n  right: -5px;\n\n  width: max-content;\n  @media (min-width: 1024px) {\n    ", "\n  }\n  & > ul > a > * {\n    display: flex;\n    align-items: center;\n  }\n\n  :before {\n    content: '';\n    top: -1px;\n    right: 15px;\n    position: absolute;\n    height: 10px;\n    width: 10px;\n    -webkit-transform: rotate(45deg) translate(-7px);\n    -ms-transform: rotate(45deg) translate(-7px);\n    transform: rotate(45deg) translate(-7px);\n    border-left: 1px solid rgba(0, 0, 0, 0.1);\n    background: white;\n    border-top: 1px solid rgba(0, 0, 0, 0.1);\n    @media (min-width: 1024px) {\n      ", "\n    }\n  }\n"])), function (_a) {
-    var placement = _a.placement;
-    return "".concat(placement, ": -5px");
-}, function (_a) {
-    var placement = _a.placement;
-    return "".concat(placement, ": 15px");
-});
-export var LanguageSwitchWrap = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  width: fit-content;\n"], ["\n  position: relative;\n  display: flex;\n  align-items: center;\n  width: fit-content;\n"])));
-export var LanguageFlagWrap = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  cursor: pointer;\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: ", ";\n  padding: 7px 12px;\n  border-radius: 10px;\n  background: ", ";\n"], ["\n  cursor: pointer;\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: ", ";\n  padding: 7px 12px;\n  border-radius: 10px;\n  background: ", ";\n"])), function (_a) {
+export var LanguageSwitchWrap = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  width: fit-content;\n"], ["\n  position: relative;\n  display: flex;\n  align-items: center;\n  width: fit-content;\n"])));
+export var LanguageFlagWrap = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  cursor: pointer;\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: ", ";\n  padding: 6px;\n  border-radius: 10px;\n  background: ", ";\n\n  @media (min-width: 768px) {\n    padding: 7px 12px;\n  }\n"], ["\n  cursor: pointer;\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: ", ";\n  padding: 6px;\n  border-radius: 10px;\n  background: ", ";\n\n  @media (min-width: 768px) {\n    padding: 7px 12px;\n  }\n"])), function (_a) {
     var withTitle = _a.withTitle;
     return (withTitle ? '16px' : '8px');
 }, function (_a) {
     var backgroundColor = _a.backgroundColor;
     return backgroundColor || 'white';
 });
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+var templateObject_1, templateObject_2, templateObject_3;

package/ui/Blocks/Modal/styles.js

@@ -2,8 +2,8 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-import styled, { css, th } from '@xstyled/styled-components';
 import { createRgba } from '../../utils';
+import styled, { css, th } from '@xstyled/styled-components';
 var Component;
 (function (Component) {
     Component["Header"] = "header";
@@ -17,28 +17,28 @@ var variantStyles = function (component, variant) {
         header: {
             default: css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        padding: 20px;\n        border-bottom: 1px solid ", ";\n        @media (min-width: 576px) {\n          padding: 30px;\n          border-bottom: 0;\n        }\n      "], ["\n        padding: 20px;\n        border-bottom: 1px solid ", ";\n        @media (min-width: 576px) {\n          padding: 30px;\n          border-bottom: 0;\n        }\n      "])), th.color('lightGray6')),
             compact: css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n        padding: 20px 20px;\n        border-bottom: 1px solid ", ";\n      "], ["\n        padding: 20px 20px;\n        border-bottom: 1px solid ", ";\n      "])), th.color('lightGray6')),
-            mobileFullscreen: css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n        padding: 20px;\n      "], ["\n        padding: 20px;\n      "]))),
+            mobileFullscreen: css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n        padding: 20px;\n      "], ["\n        padding: 20px;\n      "])))
         },
         dialogWindow: {
             default: css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n        border-radius: 10px;\n        max-width: calc(100% - 32px);\n      "], ["\n        border-radius: 10px;\n        max-width: calc(100% - 32px);\n      "]))),
             compact: css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n        border-radius: 10px;\n        max-width: calc(100% - 32px);\n      "], ["\n        border-radius: 10px;\n        max-width: calc(100% - 32px);\n      "]))),
-            mobileFullscreen: css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n        border-radius: 0;\n        max-width: 100% !important;\n      "], ["\n        border-radius: 0;\n        max-width: 100% !important;\n      "]))),
+            mobileFullscreen: css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n        border-radius: 0;\n        max-width: 100% !important;\n      "], ["\n        border-radius: 0;\n        max-width: 100% !important;\n      "])))
         },
         contentContainer: {
             default: css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n        padding: 20px 20px 15px;\n        @media (min-width: 576px) {\n          padding: 30px;\n        }\n      "], ["\n        padding: 20px 20px 15px;\n        @media (min-width: 576px) {\n          padding: 30px;\n        }\n      "]))),
             compact: css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n        padding: 20px 20px 15px;\n      "], ["\n        padding: 20px 20px 15px;\n      "]))),
-            mobileFullscreen: css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n        padding: 0;\n      "], ["\n        padding: 0;\n      "]))),
+            mobileFullscreen: css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n        padding: 0;\n      "], ["\n        padding: 0;\n      "])))
         },
-        title: {},
+        title: {}
     }[component][variant]);
 };
 export var DialogOverlay = styled.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  position: fixed;\n  z-index: 9;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  overflow: auto;\n  background-color: ", ";\n  text-align: center;\n\n  @media print {\n    position: absolute !important;\n    left: 0 !important;\n    top: 0 !important;\n    height: auto !important;\n    visibility: hidden;\n  }\n\n  @media (max-width: 576px) {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 16px 0;\n  }\n"], ["\n  position: fixed;\n  z-index: 9;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  overflow: auto;\n  background-color: ", ";\n  text-align: center;\n\n  @media print {\n    position: absolute !important;\n    left: 0 !important;\n    top: 0 !important;\n    height: auto !important;\n    visibility: hidden;\n  }\n\n  @media (max-width: 576px) {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 16px 0;\n  }\n"])), function (_a) {
-    var _b = _a.backgroundColor, backgroundColor = _b === void 0 ? 'blue2' : _b;
-    return createRgba(backgroundColor, 0.6);
+    var backgroundColor = _a.backgroundColor, theme = _a.theme;
+    return createRgba(backgroundColor || theme.colors.blue2, 0.6);
 });
 export var DialogWindow = styled.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  background-color: ", ";\n  margin: auto;\n  box-shadow: dialogShadow;\n  min-width: ", ";\n  min-height: ", ";\n  max-height: ", ";\n  display: inline-block;\n  position: relative;\n  text-align: left;\n\n  ", "\n  ", ";\n\n  @media print {\n    background-color: #fff;\n    margin: 0;\n    visibility: visible;\n    overflow: visible;\n    box-shadow: none;\n    max-width: 100%;\n  }\n\n  @media (min-width: 576px) {\n    margin: ", " auto 0 auto;\n  }\n"], ["\n  background-color: ", ";\n  margin: auto;\n  box-shadow: dialogShadow;\n  min-width: ", ";\n  min-height: ", ";\n  max-height: ", ";\n  display: inline-block;\n  position: relative;\n  text-align: left;\n\n  ", "\n  ", ";\n\n  @media print {\n    background-color: #fff;\n    margin: 0;\n    visibility: visible;\n    overflow: visible;\n    box-shadow: none;\n    max-width: 100%;\n  }\n\n  @media (min-width: 576px) {\n    margin: ", " auto 0 auto;\n  }\n"])), function (_a) {
     var $backgroundColor = _a.$backgroundColor;
-    return $backgroundColor || '#fefefe';
+    return $backgroundColor || th.color('white');
 }, function (_a) {
     var $minWidth = _a.$minWidth;
     return $minWidth || '10%';

package/ui/Blocks/SideMenu/components/HamburgerMenu.js

@@ -6,8 +6,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import styled from 'styled-components';
 import { HamburgerMenu as HamburgerMenuIcon } from '../../../Elements/Icon/icons/HamburgerMenu';
 import { MobileCancel } from '../../../Elements/Icon/icons/MobileCancel';
-import { css, x } from '@xstyled/styled-components';
-import { useTheme } from '@xstyled/styled-components';
+import { css, x, useTheme } from '@xstyled/styled-components';
 import { th } from '@xstyled/system';
 var HamburgerMenuWrapper = styled(x.div)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: 36px;\n  height: 36px;\n  border-radius: 70px;\n  background-color: ", ";\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  box-shadow: ", ";\n  &:hover {\n    cursor: pointer;\n  }\n\n  ", ";\n\n  @media (min-width: 1024px) {\n    display: none;\n  }\n"], ["\n  width: 36px;\n  height: 36px;\n  border-radius: 70px;\n  background-color: ", ";\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  box-shadow: ", ";\n  &:hover {\n    cursor: pointer;\n  }\n\n  ", ";\n\n  @media (min-width: 1024px) {\n    display: none;\n  }\n"])), th.color('neutral20'), th.shadow('dropShadow'), function (_a) {
     var isLeftMenuOpen = _a.isLeftMenuOpen;
@@ -19,6 +18,6 @@ export var HamburgerMenuButton = function (_a) {
     var theme = useTheme();
     var neutralColor = th.color('neutral20')({ theme: theme });
     var dispalyedIcon = isLeftMenuOpen ? (_jsx(MobileCancel, { fill: neutralColor })) : (_jsx(HamburgerMenuIcon, { fill: neutralColor, stroke: 'none' }));
-    return (_jsx(HamburgerMenuWrapper, { mr: 3, onClick: onClick, isLeftMenuOpen: !!isLeftMenuOpen, children: dispalyedIcon }));
+    return (_jsx(HamburgerMenuWrapper, { mr: "8px", onClick: onClick, isLeftMenuOpen: !!isLeftMenuOpen, children: dispalyedIcon }));
 };
 var templateObject_1, templateObject_2, templateObject_3;

package/ui/Elements/DropdownMenu/components/DefaultItem.js

@@ -4,7 +4,7 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styled, { css } from '@xstyled/styled-components';
-var StyledListItem = styled.li(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  padding: 8px 10px;\n  font-size: 14px;\n  color: typoPrimary;\n  font-weight: normal;\n\n  :hover {\n    background-color: bgLightGray1;\n    cursor: pointer;\n  }\n\n  ", ";\n"], ["\n  padding: 8px 10px;\n  font-size: 14px;\n  color: typoPrimary;\n  font-weight: normal;\n\n  :hover {\n    background-color: bgLightGray1;\n    cursor: pointer;\n  }\n\n  ", ";\n"])), function (props) {
+var StyledListItem = styled.li(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  padding: 8px 10px;\n  font-size: 14px;\n  color: typoPrimary;\n  font-weight: normal;\n  display: flex;\n\n  :hover {\n    background-color: bgLightGray1;\n    cursor: pointer;\n  }\n\n  ", ";\n"], ["\n  padding: 8px 10px;\n  font-size: 14px;\n  color: typoPrimary;\n  font-weight: normal;\n  display: flex;\n\n  :hover {\n    background-color: bgLightGray1;\n    cursor: pointer;\n  }\n\n  ", ";\n"])), function (props) {
     return props.hasSeparator && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      border-top: slim;\n      border-color: lightGray2;\n    "], ["\n      border-top: slim;\n      border-color: lightGray2;\n    "])));
 });
 var IconWrap = styled.span(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin-right: 10px;\n"], ["\n  margin-right: 10px;\n"])));

package/ui/Elements/Icon/icons/FlagHU.js

@@ -10,4 +10,4 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export var FlagHU = function (props) { return (_jsxs("svg", __assign({ width: "28", height: "20" }, props, { children: [_jsx("path", { d: "M0 0h1200v600H0", fill: "#477050" }), _jsx("path", { d: "M0 0h1200v400H0", fill: "#fff" }), _jsx("path", { d: "M0 0h1200v200H0", fill: "#ce2939" })] }))); };
+export var FlagHU = function (props) { return (_jsxs("svg", __assign({ width: "28", height: "20", viewBox: "0 0 9 6" }, props, { children: [_jsx("rect", { fill: "#477050", width: "9", height: "6" }), _jsx("rect", { fill: "#FFF", width: "9", height: "4" }), _jsx("rect", { fill: "#ce2939", width: "9", height: "2" })] }))); };

package/ui/Elements/Select/components/CountMultiValue.js

@@ -17,7 +17,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { components as selectComponents } from 'react-select';
 import styled, { th } from '@xstyled/styled-components';
 // MultiValue container with count of selected options
-var StyledNumber = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background: ", ";\n  height: 25px;\n  justify-content: center;\n  align-items: center;\n  display: flex;\n  border-radius: md;\n  padding: 2px 6px;\n"], ["\n  background: ", ";\n  height: 25px;\n  justify-content: center;\n  align-items: center;\n  display: flex;\n  border-radius: md;\n  padding: 2px 6px;\n"])), th.color('lightGray7'));
+var StyledNumber = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  height: 25px;\n  justify-content: center;\n  align-items: center;\n  display: flex;\n  border-radius: md;\n  padding: 2px 6px;\n"], ["\n  background-color: ", ";\n  height: 25px;\n  justify-content: center;\n  align-items: center;\n  display: flex;\n  border-radius: md;\n  padding: 2px 6px;\n"])), th.color('lightGray7'));
 var CountMultiValue = function (props) {
     var _a, _b;
     var shortValues = props.selectProps.shortValues;
@@ -26,7 +26,7 @@ var CountMultiValue = function (props) {
     if (!shortValues) {
         return _jsx(selectComponents.MultiValue, __assign({}, props, { children: props.children }));
     }
-    if (!inputVal && ((_a = props.data) === null || _a === void 0 ? void 0 : _a.value) == ((_b = selectVal[0]) === null || _b === void 0 ? void 0 : _b.value)) {
+    if (!inputVal && ((_a = props.data) === null || _a === void 0 ? void 0 : _a.value) === ((_b = selectVal[0]) === null || _b === void 0 ? void 0 : _b.value)) {
         return (_jsxs(_Fragment, { children: [_jsx(selectComponents.MultiValue, __assign({}, props, { children: props.children })), selectVal.length > 1 ? _jsxs(StyledNumber, { children: ["+", selectVal.length - 1] }) : null] }));
     }
     else {

package/ui/Elements/Select/themes/selectStyles.js

@@ -18,9 +18,9 @@ export var CustomStyles = {
         var colors = theme.colors;
         return __assign(__assign({}, styles), { borderColor: selectProps.isInvalid ? colors.primary : isFocused ? colors.inputTextColor : colors.inputBorderColor, backgroundColor: isDisabled ? colors.menuHoverBackgroundColor : colors.whiteBackgroundColor, boxShadow: theme.focusBoxShadow, borderRadius: theme.borderRadius, '& input': {
                 fontWeight: theme.textWeightNormal,
-                fontFamily: theme.font,
+                fontFamily: theme.font
             }, '&:hover': __assign(__assign({}, ((_b = styles['&:hover']) !== null && _b !== void 0 ? _b : {})), { borderColor: colors.inputBorderHoverColor }), fontSize: '14px', minWidth: 'min-content', '.inputIcon': {
-                color: isDisabled ? colors.defaultControlColor : !!selectProps.value ? colors.inputTextColor : colors.defaultControlColor,
+                color: isDisabled ? colors.defaultControlColor : selectProps.value ? colors.inputTextColor : colors.defaultControlColor
             } });
     },
     valueContainer: function (styles, _a) {
@@ -37,10 +37,10 @@ export var CustomStyles = {
     },
     multiValue: function (styles, state) {
         var theme = state.theme;
-        return __assign(__assign({}, styles), { color: theme.colors.inputTextColor, fontWeight: theme.textWeightNormal, backgroundColor: '#E7EBEF', borderRadius: '4px', '& svg': {
-                color: theme.colors.inputTextColor,
+        return __assign(__assign({}, styles), { color: theme.colors.inputTextColor, fontWeight: theme.textWeightNormal, backgroundColor: theme.colors.lightGray7, borderRadius: '4px', '& svg': {
+                color: theme.colors.inputTextColor
             }, ' > div': {
-                fontSize: '12px',
+                fontSize: '12px'
             } });
     },
     multiValueLabel: function (styles) { return (__assign(__assign({}, styles), { fontSize: 'unset', padding: '5px' })); },
@@ -87,8 +87,8 @@ export var CustomStyles = {
                     ? theme.colors.hoverToActiveOptionBackground
                     : !isDisabled
                         ? theme.colors.menuHoverBackgroundColor
-                        : undefined,
-            },
+                        : undefined
+            }
         };
     },
     menu: function (styles, state) {
@@ -103,21 +103,21 @@ export var CustomStyles = {
                 height: '47px',
                 backgroundColor: theme.colors.defaultControlColor,
                 '&:hover': {
-                    backgroundColor: theme.colors.dropdownIndicatorColor,
-                },
+                    backgroundColor: theme.colors.dropdownIndicatorColor
+                }
             }, '::-webkit-scrollbar': {
-                width: '10px',
+                width: '10px'
             }, '::-webkit-scrollbar-track': {
                 backgroundColor: theme.colors.menuHoverBackgroundColor,
-                borderRadius: '6px',
+                borderRadius: '6px'
             } });
     },
     dropdownIndicator: function (styles, state) {
         var theme = state.theme, isDisabled = state.isDisabled;
         return __assign(__assign({}, styles), { justifyContent: 'center', alignItems: 'center', '& svg': {
-                stroke: isDisabled ? theme.colors.dropdownIndicatorColor : theme.colors.inputTextColor,
+                stroke: isDisabled ? theme.colors.dropdownIndicatorColor : theme.colors.inputTextColor
             }, padding: '0px 5px 0px 0px', '@media (min-width: 1024px)': {
-                padding: '0px 10px 0px 1px',
+                padding: '0px 10px 0px 1px'
             } });
     },
     clearIndicator: function (styles, state) {
@@ -125,7 +125,7 @@ export var CustomStyles = {
         return __assign(__assign({}, styles), { justifyContent: 'center', alignItems: 'center', padding: theme.narrowIndicators ? '0px 4px 0px 0px' : '0px 4px', color: theme.colors.dropdownIndicatorColor });
     },
     indicatorSeparator: function () { return ({
-        display: 'none',
+        display: 'none'
     }); }
 };
 export var getCustomTheme = function (theme, optionVariant, useFilterSubvariant) {
@@ -144,7 +144,7 @@ export var getCustomTheme = function (theme, optionVariant, useFilterSubvariant)
         dropdownIndicatorColor: th.color('gray1')({ theme: theme }),
         inputBorderHoverColor: th.color('gray5')({ theme: theme }),
         activeOptionBackground: th.color('red20')({ theme: theme }),
-        hoverToActiveOptionBackground: th.color('red30')({ theme: theme }),
+        hoverToActiveOptionBackground: th.color('red30')({ theme: theme })
     };
     return function (reactSelectTheme) {
         return __assign(__assign({}, reactSelectTheme), { colors: customColors, focusBoxShadow: null, height: '38px', flexWrap: useFilterSubvariant ? 'nowrap' : 'wrap', textWeightNormal: th.fontWeight('normal')({ theme: theme }), optionVariant: optionVariant, borderRadius: th.radius('lg')({ theme: theme }), font: th.font('primary')({ theme: theme }), narrowIndicators: !!useFilterSubvariant });

package/ui/Forms/Checkbox/styles.js

@@ -2,9 +2,9 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-import styled, { th } from '@xstyled/styled-components';
 import { Icon } from '../../Elements/Icon';
-export var FakeInput = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: ", ";\n  min-width: ", ";\n  height: ", ";\n  border-radius: md;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: all 0.2s ease;\n  transform: rotate(0);\n  overflow: hidden;\n  border: slim;\n  border-color: lightGray5;\n\n  input[type='checkbox']:not(:disabled):hover + & {\n    border-color: gray1;\n  }\n\n  input[type='checkbox']:disabled + & {\n    background-color: white;\n    border-color: lightGray7;\n  }\n\n  input[type='checkbox']:checked:disabled + & {\n    background-color: bgLightGray1;\n    border-color: bgLightGray1;\n  }\n\n  input[type='checkbox']:checked:not(:disabled) + & {\n    transform: rotate(0deg);\n    background-color: red1;\n    border-color: red1;\n  }\n\n  input[type='checkbox']:not(:checked):not(:disabled) + & {\n    transform: rotate(90deg);\n    background-color: white;\n    border-color: lightGray5;\n  }\n"], ["\n  width: ", ";\n  min-width: ", ";\n  height: ", ";\n  border-radius: md;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: all 0.2s ease;\n  transform: rotate(0);\n  overflow: hidden;\n  border: slim;\n  border-color: lightGray5;\n\n  input[type='checkbox']:not(:disabled):hover + & {\n    border-color: gray1;\n  }\n\n  input[type='checkbox']:disabled + & {\n    background-color: white;\n    border-color: lightGray7;\n  }\n\n  input[type='checkbox']:checked:disabled + & {\n    background-color: bgLightGray1;\n    border-color: bgLightGray1;\n  }\n\n  input[type='checkbox']:checked:not(:disabled) + & {\n    transform: rotate(0deg);\n    background-color: red1;\n    border-color: red1;\n  }\n\n  input[type='checkbox']:not(:checked):not(:disabled) + & {\n    transform: rotate(90deg);\n    background-color: white;\n    border-color: lightGray5;\n  }\n"])), function (_a) {
+import styled, { th } from '@xstyled/styled-components';
+export var FakeInput = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: ", ";\n  min-width: ", ";\n  height: ", ";\n  border-radius: md;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: all 0.2s ease;\n  transform: rotate(0);\n  overflow: hidden;\n  border: slim;\n  border-color: lightGray5;\n\n  input[type='checkbox']:not(:disabled):hover + & {\n    border-color: gray1;\n  }\n\n  input[type='checkbox']:disabled + & {\n    background-color: white;\n    border-color: lightGray7;\n  }\n\n  input[type='checkbox']:checked:disabled + & {\n    background-color: bgLightGray1;\n    border-color: bgLightGray1;\n  }\n\n  input[type='checkbox']:checked:not(:disabled) + & {\n    transform: rotate(0deg);\n    background-color: red1;\n    border-color: red1;\n  }\n\n  input[type='checkbox']:not(:checked):not(:disabled) + & {\n    transform: rotate(90deg);\n    background-color: transparent;\n    border-color: lightGray5;\n  }\n"], ["\n  width: ", ";\n  min-width: ", ";\n  height: ", ";\n  border-radius: md;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: all 0.2s ease;\n  transform: rotate(0);\n  overflow: hidden;\n  border: slim;\n  border-color: lightGray5;\n\n  input[type='checkbox']:not(:disabled):hover + & {\n    border-color: gray1;\n  }\n\n  input[type='checkbox']:disabled + & {\n    background-color: white;\n    border-color: lightGray7;\n  }\n\n  input[type='checkbox']:checked:disabled + & {\n    background-color: bgLightGray1;\n    border-color: bgLightGray1;\n  }\n\n  input[type='checkbox']:checked:not(:disabled) + & {\n    transform: rotate(0deg);\n    background-color: red1;\n    border-color: red1;\n  }\n\n  input[type='checkbox']:not(:checked):not(:disabled) + & {\n    transform: rotate(90deg);\n    background-color: transparent;\n    border-color: lightGray5;\n  }\n"])), function (_a) {
     var size = _a.size;
     return size;
 }, function (_a) {

package/ui/Forms/Input/styles.js

@@ -29,10 +29,10 @@ export var IconsController = styled.div(templateObject_3 || (templateObject_3 =
 export var IconWrapper = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  svg {\n    :hover {\n      cursor: pointer;\n      color: blue2;\n    }\n  }\n"], ["\n  display: flex;\n  svg {\n    :hover {\n      cursor: pointer;\n      color: blue2;\n    }\n  }\n"])));
 export var StyledInput = styled.input.attrs(function (props) { return ({
     as: props.$asTextArea ? 'textarea' : 'input'
-}); })(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  ", ";\n  border: slim;\n  border-color: ", ";\n  box-sizing: border-box;\n  background-clip: padding-box;\n  padding-top: 0.5em;\n  padding-bottom: 0.5em;\n  padding-right: ", "em;\n  display: block;\n  width: ", ";\n  font-family: ", ";\n  font-size: 14px;\n  font-weight: normal;\n  transition: inputTransition;\n  resize: none;\n  overflow: hidden;\n\n  ~ ", " {\n    svg {\n      stroke: lightGray3;\n    }\n  }\n\n  ::placeholder {\n    color: gray1;\n    opacity: 1;\n  }\n\n  :focus {\n    background-color: white;\n    border-color: blue2;\n    color: typoPrimary;\n    outline: 0;\n\n    ~ ", " {\n      svg {\n        stroke: blue2;\n        color: blue2;\n      }\n    }\n  }\n  ", ";\n  ", ";\n  :disabled,\n  :disabled:hover {\n    background-color: bgLightGray1;\n    border-color: lightGray6;\n    color: neutral300;\n  }\n\n  text-overflow: ellipsis;\n\n  -moz-appearance: textfield;\n  appearance: textfield;\n  ::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n  }\n"], ["\n  ", ";\n  border: slim;\n  border-color: ", ";\n  box-sizing: border-box;\n  background-clip: padding-box;\n  padding-top: 0.5em;\n  padding-bottom: 0.5em;\n  padding-right: ", "em;\n  display: block;\n  width: ", ";\n  font-family: ", ";\n  font-size: 14px;\n  font-weight: normal;\n  transition: inputTransition;\n  resize: none;\n  overflow: hidden;\n\n  ~ ", " {\n    svg {\n      stroke: lightGray3;\n    }\n  }\n\n  ::placeholder {\n    color: gray1;\n    opacity: 1;\n  }\n\n  :focus {\n    background-color: white;\n    border-color: blue2;\n    color: typoPrimary;\n    outline: 0;\n\n    ~ ", " {\n      svg {\n        stroke: blue2;\n        color: blue2;\n      }\n    }\n  }\n  ", ";\n  ", ";\n  :disabled,\n  :disabled:hover {\n    background-color: bgLightGray1;\n    border-color: lightGray6;\n    color: neutral300;\n  }\n\n  text-overflow: ellipsis;\n\n  -moz-appearance: textfield;\n  appearance: textfield;\n  ::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n  }\n"])), system, function (_a) {
+}); })(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  ", ";\n  border: slim;\n  border-color: ", ";\n  background-color: transparent;\n  box-sizing: border-box;\n  background-clip: padding-box;\n  padding-top: 0.5em;\n  padding-bottom: 0.5em;\n  padding-right: ", "em;\n  display: block;\n  width: ", ";\n  font-family: ", ";\n  font-size: 14px;\n  font-weight: normal;\n  transition: inputTransition;\n  resize: none;\n  overflow: hidden;\n\n  ~ ", " {\n    svg {\n      stroke: lightGray3;\n    }\n  }\n\n  ::placeholder {\n    color: gray1;\n    opacity: 1;\n  }\n\n  :focus {\n    background-color: white;\n    border-color: blue2;\n    color: typoPrimary;\n    outline: 0;\n\n    ~ ", " {\n      svg {\n        stroke: blue2;\n        color: blue2;\n      }\n    }\n  }\n  ", ";\n  ", ";\n  :disabled,\n  :disabled:hover {\n    background-color: bgLightGray1;\n    border-color: lightGray6;\n    color: neutral300;\n  }\n\n  text-overflow: ellipsis;\n\n  -moz-appearance: textfield;\n  appearance: textfield;\n  ::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n  }\n"], ["\n  ", ";\n  border: slim;\n  border-color: ", ";\n  background-color: transparent;\n  box-sizing: border-box;\n  background-clip: padding-box;\n  padding-top: 0.5em;\n  padding-bottom: 0.5em;\n  padding-right: ", "em;\n  display: block;\n  width: ", ";\n  font-family: ", ";\n  font-size: 14px;\n  font-weight: normal;\n  transition: inputTransition;\n  resize: none;\n  overflow: hidden;\n\n  ~ ", " {\n    svg {\n      stroke: lightGray3;\n    }\n  }\n\n  ::placeholder {\n    color: gray1;\n    opacity: 1;\n  }\n\n  :focus {\n    background-color: white;\n    border-color: blue2;\n    color: typoPrimary;\n    outline: 0;\n\n    ~ ", " {\n      svg {\n        stroke: blue2;\n        color: blue2;\n      }\n    }\n  }\n  ", ";\n  ", ";\n  :disabled,\n  :disabled:hover {\n    background-color: bgLightGray1;\n    border-color: lightGray6;\n    color: neutral300;\n  }\n\n  text-overflow: ellipsis;\n\n  -moz-appearance: textfield;\n  appearance: textfield;\n  ::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n  }\n"])), system, function (_a) {
     var $isInvalid = _a.$isInvalid;
     return ($isInvalid ? th.color('red1') : th.color('lightGray6'));
-}, function (props) { return resolvePaddingRight(props); }, function (props) { return props.type !== 'checkbox' ? '100%' : 'auto'; }, th('fonts.primary'), InputIcon, InputIcon, function (_a) {
+}, function (props) { return resolvePaddingRight(props); }, function (props) { return (props.type !== 'checkbox' ? '100%' : 'auto'); }, th('fonts.primary'), InputIcon, InputIcon, function (_a) {
     var big = _a.big;
     return big
         ? css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n          font-size: 30px;\n          color: gray;\n          font-weight: semiBold;\n          padding: 0 0.5rem 0 1.25rem;\n        "], ["\n          font-size: 30px;\n          color: gray;\n          font-weight: semiBold;\n          padding: 0 0.5rem 0 1.25rem;\n        "]))) : '';