@mailstep/design-system 0.8.15 → 0.8.16-beta.10

package/ui/Blocks/Scheduler/components/Groups/styles.d.ts

@@ -1,6 +1,6 @@
 export declare const GroupContainer: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
 export declare const GroupItem: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
-    bg?: string;
+    bg?: string | undefined;
     groupsCount: number;
 }, never>;
 export declare const Gap: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;

package/ui/Blocks/Scheduler/components/TimeSlots/styles.d.ts

@@ -3,7 +3,7 @@ export declare const TimeRow: import('styled-components').StyledComponent<"div",
     disabled: boolean;
 }, never>;
 export declare const EmptyTimeSlot: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
-    isSlotSelected?: boolean;
+    isSlotSelected?: boolean | undefined;
     activeTime: boolean;
     groupsCount: number;
 }, never>;

package/ui/Blocks/SideMenu/components/Footer.d.ts

@@ -5,7 +5,7 @@ export declare const FooterWrap: import('styled-components').StyledComponent<"di
 }, never>;
 export declare const SizeToggle: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
     isCompact: boolean;
-    $lightMode?: boolean;
+    $lightMode?: boolean | undefined;
 }, never>;
 type Props = {
     isCompact: boolean;

package/ui/Blocks/SideMenu/stories/SideMenu.stories.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 declare const meta: {
     title: string;
     component: import('react').FC<import('../types').SideMenuProps>;

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

@@ -1,40 +1,40 @@
 import { NavLink } from 'react-router-dom';
 
 export declare const Container: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
-    isLeftMenuOpen?: boolean;
+    isLeftMenuOpen?: boolean | undefined;
 }, never>;
 export declare const SubItemsWrap: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
 export declare const ItemsSeparator: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
 export declare const ItemLabel: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
-    $isCompact?: boolean;
-    isSubitem?: boolean;
+    $isCompact?: boolean | undefined;
+    isSubitem?: boolean | undefined;
 }, never>;
 export declare const ItemDropdownArrow: import('styled-components').StyledComponent<import('react').FC<import('../..').IconProps>, import('@xstyled/system').Theme, {
-    $lightMode?: boolean;
+    $lightMode?: boolean | undefined;
 }, never>;
 export declare const TooltipItemLabel: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
 export declare const ItemLinkWrap: import('styled-components').StyledComponent<typeof NavLink, import('@xstyled/system').Theme, {
-    $isCompact?: boolean;
-    $lightMode?: boolean;
-    appearance?: "gray" | "default";
+    $isCompact?: boolean | undefined;
+    $lightMode?: boolean | undefined;
+    appearance?: "default" | "gray" | undefined;
 }, never>;
 export declare const MenuItemContainer: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
-    $isCompact?: boolean;
-    $lightMode?: boolean;
-    hasChildren?: boolean;
-    isHovering?: boolean;
+    $isCompact?: boolean | undefined;
+    $lightMode?: boolean | undefined;
+    hasChildren?: boolean | undefined;
+    isHovering?: boolean | undefined;
 }, never>;
 export declare const ItemIcon: import('styled-components').StyledComponent<"span", import('@xstyled/system').Theme, {
-    $isCompact?: boolean;
+    $isCompact?: boolean | undefined;
 }, never>;
 export declare const TooltipWrap: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
-    $lightMode?: boolean;
+    $lightMode?: boolean | undefined;
 }, never>;
 export declare const OverflowWithEllipsis: import('styled-components').StyledComponent<"span", import('@xstyled/system').Theme, {}, never>;
 export declare const TopLevelWrap: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
     isCompact: boolean;
-    isLeftMenuOpen?: boolean;
-    lightMode?: boolean;
+    isLeftMenuOpen?: boolean | undefined;
+    lightMode?: boolean | undefined;
 }, never>;
 export declare const ScrollWrap: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
 export declare const BodyWrap: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {

package/ui/Blocks/Stepper/components/StepCircle/styles.d.ts

@@ -1,4 +1,4 @@
 export declare const StepCircleContainer: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
-    isCompleted?: boolean;
-    isActiveStep?: boolean;
+    isCompleted?: boolean | undefined;
+    isActiveStep?: boolean | undefined;
 }, never>;

package/ui/Blocks/Stepper/components/StepItem/styles.d.ts

@@ -1,9 +1,9 @@
 export declare const StepItemContainer: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
     isActiveStep: boolean;
-    isDisabled?: boolean;
-    isVisible?: boolean;
+    isDisabled?: boolean | undefined;
+    isVisible?: boolean | undefined;
     total: number;
-    onClick?: () => void;
+    onClick?: (() => void) | undefined;
 }, never>;
 export declare const Line: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
     isActiveStep: boolean;

package/ui/Blocks/Table/stories/Table.stories.d.ts

@@ -1,9 +1,10 @@
+/// <reference types="react" />
 declare const meta: {
     title: string;
     component: import('react').FC<{
         columnDefinitions: import('../types').ColumnDefinitions;
-        data?: import('../types').DataRow[] | null;
-        onRowClick?: (dataRow: import('../types').DataRow) => void;
+        data?: import('../types').DataRow[] | null | undefined;
+        onRowClick?: ((dataRow: import('../types').DataRow) => void) | undefined;
     }>;
     tags: string[];
     argTypes: {};

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

@@ -1,12 +1,13 @@
-export declare const StyledImageBox: import('styled-components').StyledComponent<(props: Omit<JSX.IntrinsicElements[string], "color">) => import('react').ReactElement<any, string>, import('@xstyled/system').Theme, import('@xstyled/system').SystemProps<import('@xstyled/system').Theme>, "color">;
+/// <reference types="react" />
+export declare const StyledImageBox: import('styled-components').StyledComponent<(props: Omit<JSX.IntrinsicElements, "color">) => import('react').ReactElement<any, string>, import('@xstyled/system').Theme, import('@xstyled/system').SystemProps<import('@xstyled/system').Theme>, "color">;
 export declare const StyledTabWrapper: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
 export declare const RoundedWrap: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
 export declare const Tab: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
     active: boolean;
-    disabled?: boolean;
-    minWidth?: string | string[];
+    disabled?: boolean | undefined;
+    minWidth?: string | string[] | undefined;
 }, never>;
 export declare const TabPanel: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
-    $mb?: string;
-    $mt?: string;
+    $mb?: string | undefined;
+    $mt?: string | undefined;
 }, never>;

package/ui/Elements/Alert/styles.d.ts

@@ -1,28 +1,29 @@
-export declare const StyledAlert: import('styled-components').StyledComponent<(props: Omit<JSX.IntrinsicElements[string], "color">) => import('react').ReactElement<any, string>, any, import('@xstyled/system').SystemProps<import('@xstyled/system').Theme> & {
-    $inline?: boolean;
+/// <reference types="react" />
+export declare const StyledAlert: import('styled-components').StyledComponent<(props: Omit<JSX.IntrinsicElements, "color">) => import('react').ReactElement<any, string>, any, import('@xstyled/system').SystemProps<import('@xstyled/system').Theme> & {
+    $inline?: boolean | undefined;
     $colorFill: string;
     $bgColor: string;
 }, "color">;
-export declare const VerticalSeparator: import('styled-components').StyledComponent<(props: Omit<JSX.IntrinsicElements[string], "color">) => import('react').ReactElement<any, string>, any, import('@xstyled/system').SystemProps<import('@xstyled/system').Theme> & {
-    $colorFill?: string;
+export declare const VerticalSeparator: import('styled-components').StyledComponent<(props: Omit<JSX.IntrinsicElements, "color">) => import('react').ReactElement<any, string>, any, import('@xstyled/system').SystemProps<import('@xstyled/system').Theme> & {
+    $colorFill?: string | undefined;
 }, "color">;
-export declare const IconWrap: import('styled-components').StyledComponent<(props: Omit<JSX.IntrinsicElements[string], "color">) => import('react').ReactElement<any, string>, any, import('@xstyled/system').SystemProps<import('@xstyled/system').Theme>, "color">;
+export declare const IconWrap: import('styled-components').StyledComponent<(props: Omit<JSX.IntrinsicElements, "color">) => import('react').ReactElement<any, string>, any, import('@xstyled/system').SystemProps<import('@xstyled/system').Theme>, "color">;
 export declare const Title: import('styled-components').StyledComponent<"span", any, {}, never>;
 export declare const Text: import('styled-components').StyledComponent<"span", any, {}, never>;
 export declare const LinkWrapper: import('styled-components').StyledComponent<import('react').FC<{
     as?: any;
-    children?: React.ReactNode;
-    to?: string | {
-        pathname?: string;
-        search?: string;
-        hash?: string;
-        state?: object;
-    } | Function;
-    target?: string;
-    color?: string;
-    size?: number | "inherit";
-    disabled?: boolean;
-    onClick?: Function;
+    children?: import('react').ReactNode;
+    to?: string | Function | {
+        pathname?: string | undefined;
+        search?: string | undefined;
+        hash?: string | undefined;
+        state?: object | undefined;
+    } | undefined;
+    target?: string | undefined;
+    color?: string | undefined;
+    size?: number | "inherit" | undefined;
+    disabled?: boolean | undefined;
+    onClick?: Function | undefined;
 }>, any, {
     $colorFill: string;
 }, never>;

package/ui/Elements/AsyncSelect/stories/AsyncSelect.stories.d.ts

@@ -1,6 +1,7 @@
+/// <reference types="react" />
 declare const meta: {
     title: string;
-    component: import('react').FC<import('..').AsyncSelectProps>;
+    component: import('react').FC<import('../AsyncSelect').AsyncSelectProps>;
     tags: string[];
     argTypes: {};
 };

package/ui/Elements/AsyncSelect/stories/AsyncSelect.stories.js

@@ -8,8 +8,8 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
-    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
     function verb(n) { return function (v) { return step([n, v]); }; }
     function step(op) {
         if (f) throw new TypeError("Generator is already executing.");

package/ui/Elements/BarChartSymbol/styles.d.ts

@@ -4,6 +4,6 @@ export declare const Bar: import('styled-components').StyledComponent<"div", imp
     index: number;
     total: number;
     selected: number;
-    color?: string;
-    width?: number;
+    color?: string | undefined;
+    width?: number | undefined;
 }, never>;

package/ui/Elements/BorderedBox/types.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export type BorderedBoxProps = {
     children: React.ReactNode;
     className?: string;

package/ui/Elements/Button/styles.d.ts

@@ -1,16 +1,17 @@
+/// <reference types="react" />
 export declare const StyledWrapper: import('styled-components').StyledComponent<"span", import('@xstyled/system').Theme, {}, never>;
 export declare const LoadingIconWrapper: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
     $addMarginRight: boolean;
 }, never>;
 export declare const StyledIcon: import('styled-components').StyledComponent<import('react').FC<import('../Icon').IconProps>, import('@xstyled/system').Theme, {
-    $addMarginRight?: boolean;
-    $addMarginLeft?: boolean;
+    $addMarginRight?: boolean | undefined;
+    $addMarginLeft?: boolean | undefined;
 }, never>;
 export declare const StyledButton: import('styled-components').StyledComponent<"button", import('@xstyled/system').Theme, {
     disabled: boolean;
     children?: any;
     onClick?: React.MouseEventHandler<HTMLButtonElement> | undefined;
-    iconPadding?: boolean;
-    fullWidth?: boolean;
-    height?: string;
+    iconPadding?: boolean | undefined;
+    fullWidth?: boolean | undefined;
+    height?: string | undefined;
 }, never>;

package/ui/Elements/Card/styles.d.ts

@@ -2,7 +2,7 @@ import { Display } from './types';
 
 export declare const StyledCard: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
     display: Display;
-    bg?: string;
+    bg?: string | undefined;
     hasOnClick: boolean;
-    maxWidth?: string;
+    maxWidth?: string | undefined;
 }, never>;

package/ui/Elements/Card/types.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export type CardProps = {
     children: React.ReactNode;
     display?: Display;

package/ui/Elements/CheckedCircle/storries/CheckedCircle.stories.d.ts

@@ -3,8 +3,8 @@ import { StoryObj } from '@storybook/react-webpack5';
 declare const meta: {
     title: string;
     component: import('react').FC<{
-        checked?: boolean;
-        color?: string;
+        checked?: boolean | undefined;
+        color?: string | undefined;
     }>;
     tags: string[];
     argTypes: {};

package/ui/Elements/DatePicker/Datetime/components/FooterRow.d.ts

@@ -1,3 +1,3 @@
 export declare const FooterRow: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
-    disabled?: boolean;
+    disabled?: boolean | undefined;
 }, never>;

package/ui/Elements/DatePicker/Datetime/views/DaysView.js

@@ -24,7 +24,7 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 // @ts-nocheck
 import React from 'react';
 import { DateRepeater } from '../components/DateRepeater';

package/ui/Elements/DatePicker/styles.d.ts

@@ -1 +1,2 @@
-export declare const DatePickerBase: import('styled-components').StyledComponent<(props: Omit<JSX.IntrinsicElements[string], "color">) => import('react').ReactElement<any, string>, import('@xstyled/system').Theme, import('@xstyled/system').SystemProps<import('@xstyled/system').Theme>, "color">;
+/// <reference types="react" />
+export declare const DatePickerBase: import('styled-components').StyledComponent<(props: Omit<JSX.IntrinsicElements, "color">) => import('react').ReactElement<any, string>, import('@xstyled/system').Theme, import('@xstyled/system').SystemProps<import('@xstyled/system').Theme>, "color">;

package/ui/Elements/Icon/Icon.js

@@ -146,12 +146,12 @@ export var iconDictionary = {
     chevronDown: faChevronDown,
     chevronRight: farChevronRight,
     clock: faClock,
-    complaint: faFileAlt, // 'file-lines'
+    complaint: faFileAlt,
     computerMouseScrollwheel: faComputerMouseScrollwheel,
     mailLight: faEnvelopeLight,
     eshop: faStore,
-    expedition: faShippingFast, // 'truck-fast'
-    equals: faEquals, // 'truck-fast'
+    expedition: faShippingFast,
+    equals: faEquals,
     fluxCapacitor: faFluxCapacitor,
     wineGlassCrack: faWineGlassCrack,
     paperPlane: faPaperPlane,
@@ -181,10 +181,10 @@ export var iconDictionary = {
     boxChecked: faBoxCircleCheck,
     shelves: faShelves,
     reservation: faHandHoldingBox,
-    return: [faShareSquare, 'horizontal'], // 'fa-share-from-square'
-    search: faSearch, // 'magnifying-glass'
+    return: [faShareSquare, 'horizontal'],
+    search: faSearch,
     supplier: farTriangleExclamation,
-    transfer: faExchange, // 'arrow-right-arrow-left'
+    transfer: faExchange,
     users: faUsersGear,
     warning: farTriangleExclamation,
     close: fasXmark,

package/ui/Elements/Icon/stories/BadgeIcon.stories.d.ts

@@ -11,7 +11,7 @@ declare const meta: {
         style?: "normal" | "light" | "solid" | undefined;
         fill?: string | undefined;
         stroke?: string | undefined;
-        size?: number | string | undefined;
+        size?: string | number | undefined;
         className?: string | undefined;
         fixedWidth?: boolean | undefined;
         spinning?: boolean | undefined;

package/ui/Elements/Label/Label.d.ts

@@ -1,4 +1,4 @@
 export declare const Label: import('styled-components').StyledComponent<"label", import('@xstyled/system').Theme, {
-    fontSize?: number | string;
+    fontSize?: string | number | undefined;
 }, never>;
 export declare const FieldLabel: import('styled-components').StyledComponent<"label", import('@xstyled/system').Theme, {}, never>;

package/ui/Elements/Label/stories/Label.stories.d.ts

@@ -3,7 +3,7 @@ import { StoryObj } from '@storybook/react-webpack5';
 declare const meta: {
     title: string;
     component: import('styled-components').StyledComponent<"label", import('@xstyled/system').Theme, {
-        fontSize?: number | string;
+        fontSize?: string | number | undefined;
     }, never>;
     tags: string[];
     argTypes: {};

package/ui/Elements/Link/stories/Link.stories.d.ts

@@ -4,18 +4,18 @@ declare const meta: {
     title: string;
     component: import('react').FC<{
         as?: any;
-        children?: React.ReactNode;
-        to?: string | {
-            pathname?: string;
-            search?: string;
-            hash?: string;
-            state?: object;
-        } | Function;
-        target?: string;
-        color?: string;
-        size?: number | "inherit";
-        disabled?: boolean;
-        onClick?: Function;
+        children?: import('react').ReactNode;
+        to?: string | Function | {
+            pathname?: string | undefined;
+            search?: string | undefined;
+            hash?: string | undefined;
+            state?: object | undefined;
+        } | undefined;
+        target?: string | undefined;
+        color?: string | undefined;
+        size?: number | "inherit" | undefined;
+        disabled?: boolean | undefined;
+        onClick?: Function | undefined;
     }>;
     tags: string[];
     argTypes: {};

package/ui/Elements/Logo/Logo.js

@@ -41,8 +41,8 @@ import warehouseManager3 from './assets/warehouse/manager3.svg';
 import warehouseManager from './assets/warehouse/manager.svg';
 import styled from '@xstyled/styled-components';
 var defaultSizes = {
-    small: '30px', // cca 100px width on full logo
-    medium: '46px', // cca 150px width on full logo
+    small: '30px',
+    medium: '46px',
     big: '61px' // cca 200px width on full logo
 };
 var variantMap = {

package/ui/Elements/Pagination/styled.d.ts

@@ -1,4 +1,5 @@
-export declare const Wrapper: import('styled-components').StyledComponent<(props: Omit<JSX.IntrinsicElements[string], "color">) => import('react').ReactElement<any, string>, import('@xstyled/system').Theme, import('@xstyled/system').SystemProps<import('@xstyled/system').Theme>, "color">;
+/// <reference types="react" />
+export declare const Wrapper: import('styled-components').StyledComponent<(props: Omit<JSX.IntrinsicElements, "color">) => import('react').ReactElement<any, string>, import('@xstyled/system').Theme, import('@xstyled/system').SystemProps<import('@xstyled/system').Theme>, "color">;
 export declare const Btn: import('styled-components').StyledComponent<"button", import('@xstyled/system').Theme, {
     disabled: boolean;
 }, never>;

package/ui/Elements/ProgressBar/stories/ProgressBar.stories.d.ts

@@ -3,11 +3,11 @@ import { StoryObj } from '@storybook/react-webpack5';
 declare const meta: {
     title: string;
     component: import('react').FC<{
-        progress?: number;
-        status?: "loading" | "finished" | "error";
-        errorMessage?: string;
-        noText?: boolean;
-        variant?: "normal" | "thin";
+        progress?: number | undefined;
+        status?: "error" | "loading" | "finished" | undefined;
+        errorMessage?: string | undefined;
+        noText?: boolean | undefined;
+        variant?: "normal" | "thin" | undefined;
     }>;
     tags: string[];
     argTypes: {};

package/ui/Elements/ProgressBar/styles.d.ts

@@ -1,6 +1,6 @@
 export declare const StyledProgressBar: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
     status: string | null | undefined;
-    variant?: "normal" | "thin";
+    variant?: "normal" | "thin" | undefined;
 }, never>;
 export declare const Progress: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
     progress: number;

package/ui/Elements/Select/Select.js

@@ -19,8 +19,8 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
-    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
     function verb(n) { return function (v) { return step([n, v]); }; }
     function step(op) {
         if (f) throw new TypeError("Generator is already executing.");

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/components/SimplifiedOption.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 declare const SimplifiedOption: import('react').MemoExoticComponent<(props: any) => any>;
 export default SimplifiedOption;

package/ui/Elements/Select/themes/index.d.ts

@@ -1,4 +1,4 @@
 import { StylesConfig, SelectComponentsConfig } from 'react-select';
 import { SelectProps } from '../types';
 
-export declare const useStylesAndComponents: (style?: SelectProps["style"], optionVariant?: SelectProps["optionVariant"], multiLabelVariant?: SelectProps["multiLabelVariant"], containerVariant?: SelectProps["containerVariant"], useSimplifiedOptions?: SelectProps["useSimplifiedOptions"], showSelectAllButton?: SelectProps["showSelectAllButton"], showResetGridButton?: SelectProps["showResetGridButton"]) => [SelectComponentsConfig<unknown, boolean, any>, any, StylesConfig];
+export declare const useStylesAndComponents: (style?: SelectProps['style'], optionVariant?: SelectProps['optionVariant'], multiLabelVariant?: SelectProps['multiLabelVariant'], containerVariant?: SelectProps['containerVariant'], useSimplifiedOptions?: SelectProps['useSimplifiedOptions'], showSelectAllButton?: SelectProps['showSelectAllButton'], showResetGridButton?: SelectProps['showResetGridButton']) => [SelectComponentsConfig<unknown, boolean, any>, any, StylesConfig];

package/ui/Elements/Select/themes/selectStyles.d.ts

@@ -2,5 +2,5 @@ import { SelectProps, StylesConfig, CustomTheme } from '../types';
 
 export declare const CustomStyles: StylesConfig<State>;
 type ThemeGetter = (theme: any) => CustomTheme;
-export declare const getCustomTheme: (theme: any, optionVariant: Required<SelectProps>["optionVariant"], useFilterSubvariant: boolean) => ThemeGetter;
+export declare const getCustomTheme: (theme: any, optionVariant: Required<SelectProps>['optionVariant'], useFilterSubvariant: boolean) => ThemeGetter;
 export {};

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/Elements/SingleSelect/SingleSelect.js

@@ -19,8 +19,8 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
-    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
     function verb(n) { return function (v) { return step([n, v]); }; }
     function step(op) {
         if (f) throw new TypeError("Generator is already executing.");

package/ui/Elements/SpaceAround/types.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export type SpaceAroundProps = {
     marginTop?: number;
     marginRight?: number;