@mailstep/design-system 0.6.73-beta.5 → 0.6.74

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mailstep/design-system",
-  "version": "0.6.73-beta.5",
+  "version": "0.6.74",
   "license": "ISC",
   "type": "module",
   "main": "./ui/index.js",

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

@@ -22,11 +22,11 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useState } from 'react';
-import { useClickOutside } from '../../../Modal/hooks/useClickOutside';
 import { Input } from '../../../../Forms/Input/Input';
+import { useClickOutside } from '../../../Modal/hooks/useClickOutside';
+import { useEvent } from '../../hooks/useEvent';
 import IconList from '../IconList';
 import { i18n } from '@lingui/core';
-import { useEvent } from '../../hooks/useEvent';
 var OverlayComponentDefault = function (_a) {
     var children = _a.children;
     return _jsx("div", { children: children });
@@ -38,25 +38,30 @@ var createNumberComparators = function () { return [
     {
         label: i18n._({ id: 'dataGrid.comparator.lessThanOrEquals', message: 'Less than or equals' }),
         value: 'lte',
-        icon: 'lessThanEqual',
+        icon: 'lessThanEqual'
     },
     { label: i18n._({ id: 'dataGrid.comparator.greaterThan', message: 'Greater than' }), value: 'gt', icon: 'greaterThan' },
     {
         label: i18n._({ id: 'dataGrid.comparator.greaterThanOrEquals', message: 'Greater than or equal' }),
         value: 'gte',
-        icon: 'greaterThanEqual',
-    },
+        icon: 'greaterThanEqual'
+    }
 ]; };
 var createEqualComparators = [
     { label: i18n._({ id: 'dataGrid.comparator.equals', message: 'Equals' }), value: 'eq', icon: 'equals' },
-    { label: i18n._({ id: 'dataGrid.comparator.notEquals', message: 'Not equal' }), value: 'neq', icon: 'notEqual' },
+    { label: i18n._({ id: 'dataGrid.comparator.notEquals', message: 'Not equal' }), value: 'neq', icon: 'notEqual' }
 ];
 var NumberRange = function (props) {
+    var _a;
     var numberComparators = createNumberComparators();
-    var name = props.name, _a = props.value, value = _a === void 0 ? {} : _a, label = props.label, onChange = props.onChange, decimals = props.decimals, className = props.className, _b = props.OverlayComponent, OverlayComponent = _b === void 0 ? OverlayComponentDefault : _b, isEqual = props.isEqual, rest = __rest(props, ["name", "value", "label", "onChange", "decimals", "className", "OverlayComponent", "isEqual"]);
-    var _c = useState(false), isOpen = _c[0], setOpen = _c[1];
-    var comparator = (value === null || value === void 0 ? void 0 : value.comparator) || numberComparators[0].value;
-    var renderedComparator = isEqual ? createEqualComparators : numberComparators;
+    var name = props.name, _b = props.value, value = _b === void 0 ? {} : _b, label = props.label, onChange = props.onChange, decimals = props.decimals, className = props.className, _c = props.OverlayComponent, OverlayComponent = _c === void 0 ? OverlayComponentDefault : _c, comparators = props.comparators, defaultComparator = props.defaultComparator, isEqual = props.isEqual, rest = __rest(props, ["name", "value", "label", "onChange", "decimals", "className", "OverlayComponent", "comparators", "defaultComparator", "isEqual"]);
+    var _d = useState(false), isOpen = _d[0], setOpen = _d[1];
+    var comparator = (value === null || value === void 0 ? void 0 : value.comparator) ||
+        defaultComparator ||
+        ((_a = comparators === null || comparators === void 0 ? void 0 : comparators[0]) === null || _a === void 0 ? void 0 : _a.value) ||
+        numberComparators[0].value;
+    var defaultComparators = isEqual ? createEqualComparators : numberComparators;
+    var comparatorOptions = comparators || defaultComparators;
     var fieldValue = (value === null || value === void 0 ? void 0 : value.value) || (value === null || value === void 0 ? void 0 : value.value) === 0 ? value.value : '';
     var onClose = useCallback(function () { return setOpen(false); }, []);
     var pickerRef = useClickOutside({ onClose: onClose });
@@ -70,6 +75,6 @@ var NumberRange = function (props) {
     var onChangeComparator = useEvent(function (option) {
         onChange({ comparator: option.value, value: fieldValue });
     });
-    return (_jsxs("div", { ref: pickerRef, children: [_jsx(Input, __assign({ name: name, value: fieldValue, label: label, "data-cy": "".concat(name, "Inp"), onChange: onChangeTextInput, iconOnClick: togglePicker, icon: "ellipsisVertical", iconPlacement: "right", type: "text", className: className, autoComplete: "off" }, rest)), isOpen && (_jsx(OverlayComponent, { children: _jsx(IconList, { list: renderedComparator, selected: comparator, onClick: onChangeComparator }) }))] }));
+    return (_jsxs("div", { ref: pickerRef, children: [_jsx(Input, __assign({ name: name, value: fieldValue, label: label, "data-cy": "".concat(name, "Inp"), onChange: onChangeTextInput, iconOnClick: togglePicker, icon: "ellipsisVertical", iconPlacement: "right", type: "text", className: className, autoComplete: "off" }, rest)), isOpen && (_jsx(OverlayComponent, { children: _jsx(IconList, { list: comparatorOptions, selected: comparator, onClick: onChangeComparator }) }))] }));
 };
 export default NumberRange;

package/ui/Blocks/CommonGrid/components/NumberRange/types.d.ts

@@ -1,17 +1,13 @@
-import { FilterComponentProps } from '../../types';
+import { Comparator, FilterComponentProps } from '../../types';
 export type ComparatorValue = 'eq' | 'neq' | 'lt' | 'lte' | 'gt' | 'gte';
 export type NumberRangeValue = {
     comparator?: ComparatorValue;
     value?: string | number;
 };
-export type Comparator = {
-    label: string;
-    value: string;
-    icon: string;
-};
 export type NumberRangeProps = FilterComponentProps<NumberRangeValue> & {
     decimals?: number;
     label?: string;
     className?: string;
     isEqual?: boolean;
+    comparators?: Comparator[];
 };

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

@@ -22,12 +22,12 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useState } from 'react';
-import { Trans } from '@lingui/react';
-import { useClickOutside } from '../../../Modal/hooks/useClickOutside';
 import { Input } from '../../../../Forms/Input/Input';
+import { useClickOutside } from '../../../Modal/hooks/useClickOutside';
+import { useEvent } from '../../hooks/useEvent';
 import IconList from '../IconList/IconList';
 import { i18n } from '@lingui/core';
-import { useEvent } from '../../hooks/useEvent';
+import { Trans } from '@lingui/react';
 var OverlayComponentDefault = function (_a) {
     var children = _a.children;
     return _jsx("div", { children: children });
@@ -39,32 +39,34 @@ var createTextComparators = function () { return [
     { label: i18n._({ id: 'dataGrid.comparator.equals', message: 'Equals' }), value: 'eq', icon: 'equals' },
     { label: i18n._({ id: 'dataGrid.comparator.notEquals', message: 'Not equal' }), value: 'neq', icon: 'notEqual' },
     { label: i18n._({ id: 'dataGrid.comparator.startsWith', message: 'Starts with' }), value: 'startsWith', icon: 'startsWith' },
-    { label: i18n._({ id: 'dataGrid.comparator.endsWith', message: 'Ends with' }), value: 'endsWith', icon: 'endsWith' },
+    { label: i18n._({ id: 'dataGrid.comparator.endsWith', message: 'Ends with' }), value: 'endsWith', icon: 'endsWith' }
 ]; };
 var createPresentTextComparators = function () { return [
     { label: i18n._({ id: 'dataGrid.comparator.contains', message: 'Contains' }), value: 'like', icon: 'check' },
-    { label: i18n._({ id: 'dataGrid.comparator.equals', message: 'Equals' }), value: 'in', icon: 'equals' },
+    { label: i18n._({ id: 'dataGrid.comparator.equals', message: 'Equals' }), value: 'in', icon: 'equals' }
 ]; };
 var createEqualComparators = function () { return [
     { label: i18n._({ id: 'dataGrid.comparator.equals', message: 'Equals' }), value: 'eq', icon: 'equals' },
-    { label: i18n._({ id: 'dataGrid.comparator.notEquals', message: 'Not equal' }), value: 'neq', icon: 'notEqual' },
+    { label: i18n._({ id: 'dataGrid.comparator.notEquals', message: 'Not equal' }), value: 'neq', icon: 'notEqual' }
 ]; };
 var validations = {
     ip: {
         check: function (value) { return ipv4.test(value.trim()); },
-        errorMsg: _jsx(Trans, { id: "dataGrid.errors.ipValidationError", message: "Value is not valid ip" }),
-    },
+        errorMsg: _jsx(Trans, { id: "dataGrid.errors.ipValidationError", message: "Value is not valid ip" })
+    }
 };
 var TextRange = function (props) {
-    var name = props.name, _a = props.value, value = _a === void 0 ? {} : _a, label = props.label, onChange = props.onChange, className = props.className, _b = props.OverlayComponent, OverlayComponent = _b === void 0 ? OverlayComponentDefault : _b, eqOnly = props.eqOnly, isPresent = props.isPresent, isEqual = props.isEqual, defaultComparator = props.defaultComparator, validationKey = props.validation, rest = __rest(props, ["name", "value", "label", "onChange", "className", "OverlayComponent", "eqOnly", "isPresent", "isEqual", "defaultComparator", "validation"]);
+    var _a;
+    var name = props.name, _b = props.value, value = _b === void 0 ? {} : _b, label = props.label, onChange = props.onChange, className = props.className, _c = props.OverlayComponent, OverlayComponent = _c === void 0 ? OverlayComponentDefault : _c, eqOnly = props.eqOnly, isPresent = props.isPresent, isEqual = props.isEqual, defaultComparator = props.defaultComparator, comparators = props.comparators, validationKey = props.validation, rest = __rest(props, ["name", "value", "label", "onChange", "className", "OverlayComponent", "eqOnly", "isPresent", "isEqual", "defaultComparator", "comparators", "validation"]);
     var eqOnlyTxt = i18n._({ id: 'dataGrid.filterTxtEqWarning', message: 'This filter can only do exact match' });
-    var _c = useState(false), isOpen = _c[0], setOpen = _c[1];
+    var _d = useState(false), isOpen = _d[0], setOpen = _d[1];
     var textComparators = createTextComparators();
     var presentTextComparators = createPresentTextComparators();
     var equalComparators = createEqualComparators();
-    var fallbackComparator = defaultComparator || textComparators[0].value;
+    var fallbackComparator = defaultComparator || ((_a = comparators === null || comparators === void 0 ? void 0 : comparators[0]) === null || _a === void 0 ? void 0 : _a.value) || textComparators[0].value;
     var comparator = eqOnly ? 'eq' : (value === null || value === void 0 ? void 0 : value.comparator) || fallbackComparator;
-    var renderedComparator = isEqual ? equalComparators : isPresent ? presentTextComparators : textComparators;
+    var defaultComparators = isEqual ? equalComparators : isPresent ? presentTextComparators : textComparators;
+    var comparatorOptions = comparators || defaultComparators;
     var fieldValue = (value === null || value === void 0 ? void 0 : value.value) || '';
     var onClose = useCallback(function () {
         setOpen(false);
@@ -85,6 +87,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: renderedComparator, 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/TextRange/types.d.ts

@@ -1,15 +1,10 @@
-import { FilterComponentProps } from '../../types';
-export type TextRangeComparator = 'like' | 'notLike' | 'eq' | 'neq' | 'startsWith' | 'endsWith';
+import { FilterComponentProps, Comparator } from '../../types';
+export type TextRangeComparator = 'like' | 'notLike' | 'eq' | 'neq' | 'startsWith' | 'endsWith' | 'contains';
 export type TextRangeValue = {
     comparator?: TextRangeComparator;
     value?: string | number;
     isInvalid?: boolean;
 };
-export type Comparator = {
-    label: string;
-    value: string;
-    icon: string;
-};
 export type Props = FilterComponentProps<TextRangeValue> & {
     eqOnly?: boolean;
     isPresent?: boolean;
@@ -18,4 +13,5 @@ export type Props = FilterComponentProps<TextRangeValue> & {
     validation?: string;
     className?: string;
     isEqual?: boolean;
+    comparators?: Comparator[];
 };

package/ui/Blocks/CommonGrid/hooks/useQuickFilter.d.ts

@@ -18,11 +18,6 @@ declare const useQuickFilter: ({ gridActions, gridSelectors, quickFilter, displa
     onClear: () => void;
     isMobileInputView: boolean;
     isMobile: boolean;
-    filter: {
-        [column: string]: {
-            value: any;
-            filterProps: import("../types").FilterProps;
-        };
-    } | undefined;
+    filter: import("../types").Filtering | undefined;
 };
 export default useQuickFilter;

package/ui/Blocks/CommonGrid/hooks/useQuickFilter.js

@@ -1,9 +1,9 @@
 import { useCallback, useEffect, useState } from 'react';
+import { isObject } from 'lodash';
 import { useCheckDeviceWidth } from '../../../utils/CheckDeviceWidth/checkDeviceWidth';
 import { createFilterType } from '../utils';
-import { useAddFilter } from './useAddFilter';
-import { isObject } from 'lodash';
 import { i18n } from '@lingui/core';
+import { useAddFilter } from './useAddFilter';
 var defaultVoidFunction = function () {
     var args = [];
     for (var _i = 0; _i < arguments.length; _i++) {
@@ -46,7 +46,7 @@ var useQuickFilter = function (_a) {
         setSearchedValue(e.target.value);
         var value = {
             comparator: searchComparator,
-            value: e.target.value,
+            value: e.target.value
         };
         searchedColumnsDefinitions && handleAddFilter(value, searchedColumnsDefinitions);
     }, [setSearchedValue, searchComparator, handleAddFilter, searchedColumnsDefinitions]);
@@ -67,11 +67,11 @@ var useQuickFilter = function (_a) {
         resetFilters === null || resetFilters === void 0 ? void 0 : resetFilters();
         setSearchedValue === null || setSearchedValue === void 0 ? void 0 : setSearchedValue('');
     }, [resetFilters, setSearchedValue]);
-    var translatedValue = searchedColumnsDefinitions &&
-        isObject(searchedColumnsDefinitions === null || searchedColumnsDefinitions === void 0 ? void 0 : searchedColumnsDefinitions.title) &&
-        'props' in (searchedColumnsDefinitions === null || searchedColumnsDefinitions === void 0 ? void 0 : searchedColumnsDefinitions.title) &&
-        ((_d = searchedColumnsDefinitions.title) === null || _d === void 0 ? void 0 : _d.props) &&
-        i18n._({ id: (_f = (_e = searchedColumnsDefinitions.title) === null || _e === void 0 ? void 0 : _e.props) === null || _f === void 0 ? void 0 : _f.id, message: (_g = searchedColumnsDefinitions.title) === null || _g === void 0 ? void 0 : _g.props.message });
+    var translatedValue = searchedColumnsDefinitions && isObject(searchedColumnsDefinitions === null || searchedColumnsDefinitions === void 0 ? void 0 : searchedColumnsDefinitions.title)
+        ? 'props' in (searchedColumnsDefinitions === null || searchedColumnsDefinitions === void 0 ? void 0 : searchedColumnsDefinitions.title) &&
+            ((_d = searchedColumnsDefinitions.title) === null || _d === void 0 ? void 0 : _d.props) &&
+            i18n._({ id: (_f = (_e = searchedColumnsDefinitions.title) === null || _e === void 0 ? void 0 : _e.props) === null || _f === void 0 ? void 0 : _f.id, message: (_g = searchedColumnsDefinitions.title) === null || _g === void 0 ? void 0 : _g.props.message })
+        : searchedColumnsDefinitions === null || searchedColumnsDefinitions === void 0 ? void 0 : searchedColumnsDefinitions.title;
     return {
         searchedValue: searchedValue,
         translatedValue: translatedValue,
@@ -82,7 +82,7 @@ var useQuickFilter = function (_a) {
         onClear: onClear,
         isMobileInputView: isMobileInputView,
         isMobile: isMobile,
-        filter: filter,
+        filter: filter
     };
 };
 export default useQuickFilter;

package/ui/Blocks/CommonGrid/types.d.ts

@@ -65,13 +65,13 @@ export type FiltersConfig = {
         };
     };
 };
-type Filtering = {
+export type Filtering = {
     [column: string]: {
         value: any;
         filterProps: FilterProps;
     };
 };
-type Sorting = {
+export type Sorting = {
     column: string;
     direction: SortingValueType;
 }[];
@@ -106,7 +106,7 @@ export type ColumnDefinition<ColumnName extends string = string> = ColumnBasePro
     disableRowTouch?: boolean;
     filterExtraProps?: {
         isMulti?: boolean;
-        comparators?: any;
+        comparators?: Comparator[];
         filterTime?: boolean;
         decimals?: number;
         isFloat?: boolean;
@@ -311,4 +311,9 @@ export type FloatingButtonProps = {
     options?: Item[];
     onClick?: (value?: string) => void;
 };
+export type Comparator = {
+    label: string;
+    value: string;
+    icon: string;
+};
 export {};

package/ui/Blocks/LoginPage/LoginPage.js

@@ -6,7 +6,7 @@ import { SocialLinks } from './components/SocialLinks';
 import { EMAIL_ADDRESS } from './utils/links';
 import { Trans } from '@lingui/react';
 import { x } from '@xstyled/styled-components';
-import { Wrapper, MailTo, LanguageBox, LogoWrapper, MainLogo, CardBodyWithLanguage, Version } from './styles';
+import { Wrapper, MailTo, LanguageBox, LogoWrapper, MainLogo, Version, CardBodyWithLanguage } from './styles';
 var Login = function (_a) {
     var onSubmit = _a.onSubmit, activeLanguage = _a.activeLanguage, onLanguageChange = _a.onLanguageChange, children = _a.children, brand = _a.brand, brandVariant = _a.brandVariant, isSubmitting = _a.isSubmitting, isSubmitDisabled = _a.isSubmitDisabled, withDistributionCenterSelect = _a.withDistributionCenterSelect, distributionCenterOptions = _a.distributionCenterOptions, selectedDistributionCenter = _a.selectedDistributionCenter, onChangeDistributionCenter = _a.onChangeDistributionCenter, languageItems = _a.languageItems, version = _a.version, backgroundImage = _a.backgroundImage, _b = _a.hasSupport, hasSupport = _b === void 0 ? true : _b, _c = _a.hasSocialLinks, hasSocialLinks = _c === void 0 ? true : _c;
     return (_jsxs(Wrapper, { backgroundImage: backgroundImage, children: [_jsxs(CardBodyWithLanguage, { children: [_jsx(LogoWrapper, { children: _jsx(MainLogo, { brand: brand, variant: brandVariant }) }), _jsxs(LanguageBox, { children: [hasSupport && (_jsxs(x.div, { mr: 4, children: [_jsx(H6, { color: "gray1", variant: "bold", mt: "8px", mb: "8px", as: "h6", children: _jsx(Trans, { id: "form.heading.support", message: "Support:" }) }), _jsx(MailTo, { href: "mailto:mailstep@mailstep.cz", children: EMAIL_ADDRESS })] })), _jsx(LanguageSwitch, { activeLanguage: activeLanguage, onLanguageChange: onLanguageChange, languageItems: languageItems })] }), _jsx(LoginForm, { onSubmit: onSubmit, isSubmitDisabled: isSubmitDisabled, isSubmitting: isSubmitting, onChangeDistributionCenter: onChangeDistributionCenter, withDistributionCenterSelect: withDistributionCenterSelect, distributionCenterOptions: distributionCenterOptions, selectedDistributionCenter: selectedDistributionCenter })] }), children, version && _jsx(Version, { children: version }), hasSocialLinks && _jsx(SocialLinks, {})] }));

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

@@ -3,7 +3,7 @@ export declare const Wrapper: import("styled-components").StyledComponent<"div",
     backgroundImage?: "mailship" | undefined;
 }, never>;
 export declare const LanguageBox: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
-export declare const CardBodyWithLanguage: import("styled-components").StyledComponent<({ children, ...rest }: import("../../Elements/Card/types").PropsBody) => JSX.Element, import("@xstyled/system").Theme, {}, never>;
+export declare const CardBodyWithLanguage: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
 export declare const MailTo: import("styled-components").StyledComponent<"a", import("@xstyled/system").Theme, {}, never>;
 export declare const LogoWrapper: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
 export declare const MainLogo: import("styled-components").StyledComponent<({ brand, variant, size, width, height, ...rest }: import("../../Elements/Logo/types").LogoProps) => JSX.Element | null, import("@xstyled/system").Theme, {}, never>;

package/ui/Blocks/LoginPage/styles.js

@@ -2,7 +2,6 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-import { CardBody } from '../../Elements/Card/Card';
 import Logo from '../../Elements/Logo/Logo';
 import mailship from './assets/mailship.jpg';
 import styled, { th } from '@xstyled/styled-components';
@@ -14,7 +13,7 @@ export var Wrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTe
     return "transparent ".concat(backgroundImage && "url(".concat(backgroundImageMap[backgroundImage], ")"), " 50% 0% no-repeat padding-box;");
 });
 export var LanguageBox = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  margin: 15px 0;\n  align-items: flex-end;\n  justify-content: space-between;\n  @media (min-width: 1024px) {\n    justify-content: flex-end;\n    margin: 40px 0;\n  }\n"], ["\n  display: flex;\n  margin: 15px 0;\n  align-items: flex-end;\n  justify-content: space-between;\n  @media (min-width: 1024px) {\n    justify-content: flex-end;\n    margin: 40px 0;\n  }\n"])));
-export var CardBodyWithLanguage = styled(CardBody)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  justify-content: start;\n  padding: 0 32px 10px 32px;\n  flex-grow: 1;\n  margin: auto;\n  width: 500px;\n  @media (min-width: 1024px) {\n    display: block;\n    flex-grow: 0;\n  }\n"], ["\n  display: flex;\n  justify-content: start;\n  padding: 0 32px 10px 32px;\n  flex-grow: 1;\n  margin: auto;\n  width: 500px;\n  @media (min-width: 1024px) {\n    display: block;\n    flex-grow: 0;\n  }\n"])));
+export var CardBodyWithLanguage = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  justify-content: start;\n  padding: 0 32px 10px 32px;\n  flex-grow: 1;\n  margin: auto;\n  width: 500px;\n  @media (min-width: 1024px) {\n    display: block;\n    flex-grow: 0;\n  }\n"], ["\n  display: flex;\n  justify-content: start;\n  padding: 0 32px 10px 32px;\n  flex-grow: 1;\n  margin: auto;\n  width: 500px;\n  @media (min-width: 1024px) {\n    display: block;\n    flex-grow: 0;\n  }\n"])));
 export var MailTo = styled.a(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  color: ", ";\n  &:hover {\n    color: ", ";\n  }\n"], ["\n  color: ", ";\n  &:hover {\n    color: ", ";\n  }\n"])), th.color('typoPrimary'), th.color('red1'));
 export var LogoWrapper = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  margin-top: 30px;\n  @media (min-width: 1024px) {\n    display: block;\n    margin-top: 0;\n  }\n"], ["\n  display: flex;\n  justify-content: center;\n  margin-top: 30px;\n  @media (min-width: 1024px) {\n    display: block;\n    margin-top: 0;\n  }\n"])));
 export var MainLogo = styled(Logo)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  width: 50%;\n  height: auto;\n"], ["\n  width: 50%;\n  height: auto;\n"])));

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

@@ -1,6 +1,4 @@
-import { CardComponentProps, CardProps, PropsBody, PropsCardImage } from './types';
-export declare const Card: ({ children, block, hasBorder, backgroundColor, ...rest }: CardProps) => JSX.Element;
-export declare const CardBody: ({ children, ...rest }: PropsBody) => JSX.Element;
-export declare const CardImage: ({ children, color, ...rest }: PropsCardImage) => JSX.Element;
-declare const CardComponent: ({ img, body, children, color }: CardComponentProps) => import("react/jsx-runtime").JSX.Element;
-export default CardComponent;
+import { FC } from 'react';
+import { CardProps } from './types';
+declare const Card: FC<CardProps>;
+export default Card;

package/ui/Elements/Card/Card.js

@@ -1,45 +1,7 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
+import { jsx as _jsx } from "react/jsx-runtime";
+import { StyledCard } from './styles';
+var Card = function (_a) {
+    var children = _a.children, _b = _a.display, display = _b === void 0 ? 'block' : _b, bg = _a.bg, onClick = _a.onClick, maxWidth = _a.maxWidth;
+    return (_jsx(StyledCard, { onClick: onClick, bg: bg, display: display, maxWidth: maxWidth, hasOnClick: !!onClick, children: children }));
 };
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { th } from '@xstyled/styled-components';
-import { useTheme } from '@xstyled/styled-components';
-import { StyledCard, CardWrapper, StyledBody, ImageWrapper, StyledImage } from './styles';
-export var Card = function (_a) {
-    var children = _a.children, block = _a.block, _b = _a.hasBorder, hasBorder = _b === void 0 ? true : _b, backgroundColor = _a.backgroundColor, rest = __rest(_a, ["children", "block", "hasBorder", "backgroundColor"]);
-    return (_jsx(CardWrapper, { block: block, children: _jsx(StyledCard, __assign({ block: block, hasBorder: hasBorder, backgroundColor: backgroundColor }, rest, { children: children })) }));
-};
-export var CardBody = function (_a) {
-    var children = _a.children, rest = __rest(_a, ["children"]);
-    return _jsx(StyledBody, __assign({}, rest, { children: children }));
-};
-export var CardImage = function (_a) {
-    var children = _a.children, _b = _a.color, color = _b === void 0 ? 'white' : _b, rest = __rest(_a, ["children", "color"]);
-    var theme = useTheme();
-    var themeColor = th.color(color)({ theme: theme });
-    return (_jsx(ImageWrapper, { color: themeColor, children: _jsx(StyledImage, __assign({}, rest, { children: children })) }));
-};
-var CardComponent = function (_a) {
-    var img = _a.img, body = _a.body, children = _a.children, color = _a.color;
-    return (_jsxs(Card, { children: [img && (_jsx(CardImage, { color: color, children: _jsx("img", { src: img, width: "300" }) })), _jsxs(CardBody, { children: [body, children] })] }));
-};
-export default CardComponent;
+export default Card;

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

@@ -1,3 +1,2 @@
-import CardComponent from './Card';
-export { Card, CardImage, CardBody } from './Card';
-export default CardComponent;
+import Card from './Card';
+export default Card;

package/ui/Elements/Card/index.js

@@ -1,3 +1,2 @@
-import CardComponent from './Card';
-export { Card, CardImage, CardBody } from './Card';
-export default CardComponent;
+import Card from './Card';
+export default Card;

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

@@ -2,14 +2,13 @@
 import type { StoryObj } from '@storybook/react';
 declare const meta: {
     title: string;
-    component: ({ children, block, hasBorder, backgroundColor, ...rest }: import("../types").CardProps) => JSX.Element;
+    component: import("react").FC<import("../types").CardProps>;
     tags: string[];
     argTypes: {};
 };
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
-export declare const NoBorder: Story;
-export declare const WithPadding: Story;
-export declare const WithShadow: Story;
-export declare const WithBackground: Story;
+export declare const WithOnClick: Story;
+export declare const CustomBg: Story;
+export declare const WithMaxWidth: Story;

package/ui/Elements/Card/stories/Card.stories.js

@@ -1,43 +1,34 @@
-import { Card } from '../Card';
+import Card from '../Card';
 var longText = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';
 var meta = {
     title: 'Elements/Card',
     component: Card,
     tags: ['autodocs'],
-    argTypes: {},
+    argTypes: {}
 };
 export default meta;
 export var Default = {
     args: {
-        children: longText,
-    },
-};
-export var NoBorder = {
-    args: {
-        children: longText,
-        hasBorder: false,
-    },
+        children: longText
+    }
 };
-export var WithPadding = {
+export var WithOnClick = {
     args: {
         children: longText,
-        p: '20px',
-    },
+        onClick: function () {
+            console.log('click');
+        }
+    }
 };
-export var WithShadow = {
+export var CustomBg = {
     args: {
-        display: 'block',
-        shadow: true,
         children: longText,
-        p: '20px',
-    },
+        bg: 'green20'
+    }
 };
-export var WithBackground = {
+export var WithMaxWidth = {
     args: {
-        display: 'block',
-        shadow: true,
         children: longText,
-        p: '20px',
-        backgroundColor: 'red2'
-    },
+        maxWidth: '400px'
+    }
 };

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

@@ -1,14 +1,7 @@
-/// <reference types="react" />
-export declare const CardWrapper: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
-    block?: boolean | undefined;
-}, never>;
+import { Display } from './types';
 export declare const StyledCard: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
-    block?: boolean | undefined;
-    hasBorder?: boolean | undefined;
-    shadow?: boolean | undefined;
-    p?: string | undefined;
-    backgroundColor?: string | undefined;
+    display: Display;
+    bg?: string | undefined;
+    hasOnClick: boolean;
+    maxWidth?: string | undefined;
 }, never>;
-export declare const ImageWrapper: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "color">) => import("react").ReactElement<any, "div">, import("@xstyled/system").Theme, import("@xstyled/system").SystemProps<import("@xstyled/system").Theme>, "color">;
-export declare const StyledImage: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "color">) => import("react").ReactElement<any, "div">, import("@xstyled/system").Theme, import("@xstyled/system").SystemProps<import("@xstyled/system").Theme>, "color">;
-export declare const StyledBody: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "color">) => import("react").ReactElement<any, "div">, import("@xstyled/system").Theme, import("@xstyled/system").SystemProps<import("@xstyled/system").Theme>, "color">;

package/ui/Elements/Card/styles.js

@@ -2,33 +2,19 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-import styled, { x, css, down } from '@xstyled/styled-components';
+import styled, { css } from '@xstyled/styled-components';
 import { th } from '@xstyled/styled-components';
-var wrapper = css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  box-sizing: border-box;\n  font-family: ", ";\n  :after {\n    box-sizing: border-box;\n  }\n"], ["\n  display: flex;\n  box-sizing: border-box;\n  font-family: ", ";\n  :after {\n    box-sizing: border-box;\n  }\n"])), th('fonts.primary'));
-export var CardWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", ";\n  display: ", ";\n  justify-content: center;\n  flex-wrap: wrap;\n"], ["\n  ", ";\n  display: ", ";\n  justify-content: center;\n  flex-wrap: wrap;\n"])), wrapper, function (_a) {
-    var block = _a.block;
-    return (block ? 'block' : 'inline-flex');
-});
-export var StyledCard = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  justify-content: space-between;\n  display: ", ";\n  padding: ", ";\n  box-shadow: ", ";\n  border: ", ";\n  background-color: ", ";\n  border-color: lightGray3;\n  border-radius: 4px;\n"], ["\n  justify-content: space-between;\n  display: ", ";\n  padding: ", ";\n  box-shadow: ", ";\n  border: ", ";\n  background-color: ", ";\n  border-color: lightGray3;\n  border-radius: 4px;\n"])), function (_a) {
-    var block = _a.block;
-    return (block ? 'block' : 'inline-flex');
-}, function (_a) {
-    var p = _a.p;
-    return p || 'initial';
-}, function (_a) {
-    var shadow = _a.shadow;
-    return (shadow ? th.shadow('smooth') : 'none');
+export var StyledCard = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: ", ";\n  padding: 20px;\n  border: 1px solid;\n  background-color: ", ";\n  border-color: ", ";\n  border-radius: 12px;\n  width: 100%;\n\n  ", "\n\n  ", "\n"], ["\n  display: ", ";\n  padding: 20px;\n  border: 1px solid;\n  background-color: ", ";\n  border-color: ", ";\n  border-radius: 12px;\n  width: 100%;\n\n  ", "\n\n  ", "\n"])), function (_a) {
+    var display = _a.display;
+    return display;
 }, function (_a) {
-    var hasBorder = _a.hasBorder;
-    return (hasBorder ? th.border('slim') : 'none');
+    var bg = _a.bg;
+    return (bg ? th.color(bg) : 'white');
+}, th.color('lightGray6'), function (_a) {
+    var maxWidth = _a.maxWidth;
+    return maxWidth && "max-width: ".concat(maxWidth, ";");
 }, function (_a) {
-    var backgroundColor = _a.backgroundColor;
-    return (backgroundColor ? th.color(backgroundColor) : 'initial');
+    var hasOnClick = _a.hasOnClick;
+    return hasOnClick && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      cursor: pointer;\n      &:hover {\n        border-color: ", ";\n      }\n    "], ["\n      cursor: pointer;\n      &:hover {\n        border-color: ", ";\n      }\n    "])), th.color('gray1'));
 });
-export var ImageWrapper = styled(x.div)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  ", ";\n  justify-content: center;\n  flex-direction: column;\n  background-color: ", ";\n  ", "\n"], ["\n  ", ";\n  justify-content: center;\n  flex-direction: column;\n  background-color: ", ";\n  ", "\n"])), wrapper, function (_a) {
-    var color = _a.color;
-    return color;
-}, down('lg', css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      display: none;\n    "], ["\n      display: none;\n    "])))));
-export var StyledImage = styled(x.div)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: flex;\n  align-self: center;\n  justify-content: center;\n  object-fit: cover;\n"], ["\n  display: flex;\n  align-self: center;\n  justify-content: center;\n  object-fit: cover;\n"])));
-export var StyledBody = styled(x.div)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  ", ";\n  justify-content: center;\n  flex-direction: column;\n"], ["\n  ", ";\n  justify-content: center;\n  flex-direction: column;\n"])), wrapper);
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
+var templateObject_1, templateObject_2;

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

@@ -1,21 +1,9 @@
 /// <reference types="react" />
-import { StyledCard } from './styles';
 export type CardProps = {
     children: React.ReactNode;
-    shadow?: boolean;
-    block?: boolean;
-    hasBorder?: boolean;
-} & React.ComponentProps<typeof StyledCard>;
-export type PropsBody = {
-    children: React.ReactNode;
-};
-export type PropsCardImage = {
-    children: React.ReactNode;
-    color?: string;
-};
-export type CardComponentProps = {
-    img?: string;
-    children?: React.ReactNode;
-    body?: React.ReactNode;
-    color?: string;
+    display?: Display;
+    onClick?: () => void;
+    bg?: string;
+    maxWidth?: string;
 };
+export type Display = 'block' | 'flex';

package/ui/Elements/DatePicker/Datetime/components/Timepicker.js

@@ -8,8 +8,8 @@ import styled, { x } from '@xstyled/styled-components';
 import { th } from '@xstyled/system';
 var Btn = styled.button(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  transform: rotate(90deg);\n  font-size: 24px;\n  margin: -4px 0;\n  background-color: transparent !important;\n  border: none;\n  color: ", ";\n  &:disabled:hover {\n    color: ", ";\n    cursor: default;\n  }\n  &:hover {\n    color: ", ";\n    background-color: transparent !important;\n  }\n"], ["\n  transform: rotate(90deg);\n  font-size: 24px;\n  margin: -4px 0;\n  background-color: transparent !important;\n  border: none;\n  color: ", ";\n  &:disabled:hover {\n    color: ", ";\n    cursor: default;\n  }\n  &:hover {\n    color: ", ";\n    background-color: transparent !important;\n  }\n"])), th('colors.lightGray4'), th('colors.lightGray4'), th('colors.red2'));
 var TimeWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  align-items: baseline;\n  justify-content: center;\n  border: 1px solid ", ";\n  border-radius: 0.7rem;\n  padding: 4px 10px;\n  margin: 0 10px;\n"], ["\n  display: flex;\n  align-items: baseline;\n  justify-content: center;\n  border: 1px solid ", ";\n  border-radius: 0.7rem;\n  padding: 4px 10px;\n  margin: 0 10px;\n"])), th('colors.lightGray2'));
-var Hours = styled.input(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  font-size: 22px;\n  font-weight: 700;\n  width: 24px;\n  margin: 0;\n  padding: 0;\n  border: none;\n  outline: none;\n  &:disabled {\n    opacity: 0.5;\n  }\n"], ["\n  font-size: 22px;\n  font-weight: 700;\n  width: 24px;\n  margin: 0;\n  padding: 0;\n  border: none;\n  outline: none;\n  &:disabled {\n    opacity: 0.5;\n  }\n"])));
-var Minutes = styled.input(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  font-weight: 700;\n  font-size: 16px;\n  width: 20px;\n  margin: 0;\n  padding: 0;\n  border: none;\n  outline: none;\n  &:disabled {\n    opacity: 0.5;\n  }\n"], ["\n  font-weight: 700;\n  font-size: 16px;\n  width: 20px;\n  margin: 0;\n  padding: 0;\n  border: none;\n  outline: none;\n  &:disabled {\n    opacity: 0.5;\n  }\n"])));
+var Hours = styled.input(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  font-size: 22px;\n  font-weight: 700;\n  width: 30px;\n  margin: 0;\n  padding: 0;\n  border: none;\n  outline: none;\n  &:disabled {\n    opacity: 0.5;\n  }\n"], ["\n  font-size: 22px;\n  font-weight: 700;\n  width: 30px;\n  margin: 0;\n  padding: 0;\n  border: none;\n  outline: none;\n  &:disabled {\n    opacity: 0.5;\n  }\n"])));
+var Minutes = styled.input(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  font-weight: 700;\n  font-size: 16px;\n  width: 25px;\n  margin: 0;\n  padding: 0;\n  border: none;\n  outline: none;\n  &:disabled {\n    opacity: 0.5;\n  }\n"], ["\n  font-weight: 700;\n  font-size: 16px;\n  width: 25px;\n  margin: 0;\n  padding: 0;\n  border: none;\n  outline: none;\n  &:disabled {\n    opacity: 0.5;\n  }\n"])));
 export var Timepicker = function (_a) {
     var _b, _c, _d, _e;
     var setTime = _a.setTime, value = _a.value, disabled = _a.disabled;

package/ui/index.d.ts

@@ -55,7 +55,6 @@ export * from './Elements/Avatar';
 export * from './Elements/Badge';
 export * from './Elements/BorderedBox';
 export * from './Elements/Button';
-export * from './Elements/Card';
 export * from './Elements/Dropdown';
 export * from './Elements/ErrorMessage';
 export * from './Elements/Icon';