@mailstep/design-system 0.7.66-beta.2 → 0.7.66
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/ui/Blocks/CommonGrid/CommonGrid.js +3 -1
- package/ui/Blocks/CommonGrid/components/GridStatus/index.d.ts +2 -3
- package/ui/Blocks/CommonGrid/components/GridStatus/index.js +1 -2
- package/ui/Blocks/Header/index.d.ts +1 -2
- package/ui/Blocks/Header/index.js +2 -2
- package/ui/Blocks/Header/stories/Header.stories.d.ts +0 -1
- package/ui/Blocks/SideMenu/MenuItem.js +1 -1
- package/ui/Elements/Button/styles.js +10 -1
- package/ui/Elements/Icon/icons/{FlagHU.d.ts → Layout.d.ts} +1 -1
- package/ui/Elements/Icon/icons/Layout.js +15 -0
- package/ui/Elements/Icon/icons/index.d.ts +1 -2
- package/ui/Elements/Icon/icons/index.js +1 -2
- package/ui/ThemeProvider/themes/default.d.ts +8 -0
- package/ui/ThemeProvider/themes/default.js +9 -1
- package/ui/ThemeProvider/themes/index.d.ts +8 -0
- package/ui/index.es.js +2491 -2481
- package/ui/index.umd.js +308 -308
- package/ui/Elements/Icon/icons/FlagHU.js +0 -13
- package/ui/Elements/Icon/icons/FlagNL.d.ts +0 -3
- package/ui/Elements/Icon/icons/FlagNL.js +0 -13
package/package.json
CHANGED
|
@@ -51,7 +51,9 @@ var CommonGrid = function (_a) {
|
|
|
51
51
|
var commonGridRef = React.useCallback(function (node) {
|
|
52
52
|
gridBoxRef.current = node;
|
|
53
53
|
}, []);
|
|
54
|
-
|
|
54
|
+
var isEmpty = !isLoading && !errorMessage && (!rowsData || rowsData.length < 1);
|
|
55
|
+
var hasFloatingChildren = isLoading || errorMessage || isEmpty;
|
|
56
|
+
return (_jsxs(_Fragment, { children: [_jsx(x.div, { className: className || '', children: _jsxs(OversizedScroll, { columnLayout: columnLayout, totalColumnsWidth: totalColumnsWidth, floatingChildren: hasFloatingChildren && _jsx(GridStatus, { isLoading: isLoading, isEmpty: isEmpty, errorMessage: errorMessage }), ref: commonGridRef, children: [_jsxs("div", { className: "gridHead", children: [hasGroups && (_jsx(GroupRow, { actionColumn: actionColumnDefinition, columns: displayColumnsDefinitions, displayColumnsWidth: displayColumnsWidth, groups: groups })), _jsx(HeadRow, { columns: displayColumnsDefinitions, onAddSort: addSorting, columnLayout: columnLayout, sortingValues: sorting, displayColumnsWidth: displayColumnsWidth, handleResizeDrag: handleResizeDrag, groups: groups, handleDragEnd: handleDragEnd, isSortTerminated: isSortTerminated }), hasFilters && (_jsx(FilterRow, { filters: filters, comparators: comparators, columns: displayColumnsDefinitions, actionColumn: actionColumnDefinition, onChange: addFilter, filterValues: filter, displayColumnsWidth: displayColumnsWidth, groups: groups, rowsData: rowsData, uxState: uxState, handleUxChange: handleUxChange }))] }), _jsx("div", { className: "body flx_1", style: rowsStyles, tabIndex: -1, onKeyDown: handleRowsKeyDown, children: !isLoading &&
|
|
55
57
|
rowsData &&
|
|
56
58
|
displayColumnsDefinitions &&
|
|
57
59
|
rowsData.map(function (row, index) {
|
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
import type { FC } from 'react';
|
|
2
|
-
|
|
3
|
-
type Props<TData extends RowProps = RowProps> = {
|
|
2
|
+
type Props = {
|
|
4
3
|
isLoading?: boolean;
|
|
5
|
-
|
|
4
|
+
isEmpty?: boolean;
|
|
6
5
|
errorMessage?: string;
|
|
7
6
|
};
|
|
8
7
|
export declare const GridStatus: FC<Props>;
|
|
@@ -2,9 +2,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
2
2
|
import { Row, MessageCell, MessageCellBody } from '../Table';
|
|
3
3
|
import { Trans } from '@lingui/react';
|
|
4
4
|
export var GridStatus = function (_a) {
|
|
5
|
-
var isLoading = _a.isLoading,
|
|
5
|
+
var isLoading = _a.isLoading, isEmpty = _a.isEmpty, errorMessage = _a.errorMessage;
|
|
6
6
|
var hasError = !isLoading && errorMessage;
|
|
7
|
-
var isEmpty = !isLoading && !errorMessage && (!rowsData || rowsData.length < 1);
|
|
8
7
|
var variant = hasError ? 'error' : 'info';
|
|
9
8
|
return (_jsx(Row, { className: "dataRow", align: "center", children: _jsx(MessageCell, { children: _jsxs(MessageCellBody, { variant: variant, children: [isLoading && _jsx(Trans, { id: "dataGrid.status.loadingData", message: "... loading data ..." }), hasError && errorMessage, isEmpty && _jsx(Trans, { id: "dataGrid.status.noDataFound", message: "No data found." })] }) }) }));
|
|
10
9
|
};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { type FC } from 'react';
|
|
2
2
|
import type { Brand, Variant } from '../../Elements/Logo';
|
|
3
|
-
import {
|
|
3
|
+
import { LanguageItem } from '../LanguageSwitch';
|
|
4
4
|
import type { MenuItemType } from '../SideMenu/types';
|
|
5
5
|
import type { User } from './types';
|
|
6
6
|
type Props = {
|
|
@@ -20,7 +20,6 @@ type Props = {
|
|
|
20
20
|
onOpenMobileSideMenu?: () => void;
|
|
21
21
|
onChangeLanguage?: (language: string) => void;
|
|
22
22
|
onLogout?: () => void;
|
|
23
|
-
withLanguageSwitch?: boolean;
|
|
24
23
|
};
|
|
25
24
|
export declare const Header: FC<Props>;
|
|
26
25
|
export {};
|
|
@@ -9,7 +9,7 @@ import { useChangeLanguage } from './hooks/useChangeLanguage';
|
|
|
9
9
|
import { languageItems as defaultLanguageItems } from './utils/languageItems';
|
|
10
10
|
import { Container, LeftSide, RightSide, LanguageWrapper } from './styles';
|
|
11
11
|
export var Header = function (_a) {
|
|
12
|
-
var isMobileMenuOpen = _a.isMobileMenuOpen, homeLink = _a.homeLink, logo = _a.logo, logoVariant = _a.logoVariant, logoSrc = _a.logoSrc, logoSrcWidth = _a.logoSrcWidth, user = _a.user, currentLanguage = _a.currentLanguage, _b = _a.hasUserMenu, hasUserMenu = _b === void 0 ? false : _b, rightMenuItems = _a.rightMenuItems, showLanguageWithTitle = _a.showLanguageWithTitle, languageFlagWrapBackgroundColor = _a.languageFlagWrapBackgroundColor, _c = _a.languageItems, languageItems = _c === void 0 ? defaultLanguageItems : _c,
|
|
12
|
+
var isMobileMenuOpen = _a.isMobileMenuOpen, homeLink = _a.homeLink, logo = _a.logo, logoVariant = _a.logoVariant, logoSrc = _a.logoSrc, logoSrcWidth = _a.logoSrcWidth, user = _a.user, currentLanguage = _a.currentLanguage, _b = _a.hasUserMenu, hasUserMenu = _b === void 0 ? false : _b, rightMenuItems = _a.rightMenuItems, showLanguageWithTitle = _a.showLanguageWithTitle, languageFlagWrapBackgroundColor = _a.languageFlagWrapBackgroundColor, _c = _a.languageItems, languageItems = _c === void 0 ? defaultLanguageItems : _c, onOpenMobileSideMenu = _a.onOpenMobileSideMenu, onChangeLanguage = _a.onChangeLanguage, onLogout = _a.onLogout;
|
|
13
13
|
var handleChangeLanguage = useChangeLanguage({ onChangeLanguage: onChangeLanguage }).handleChangeLanguage;
|
|
14
|
-
return (_jsxs(Container, { children: [_jsxs(LeftSide, { children: [onOpenMobileSideMenu && _jsx(HamburgerMenuButton, { isLeftMenuOpen: isMobileMenuOpen, onClick: onOpenMobileSideMenu }), _jsx(Link, { to: homeLink, children: logoSrc ? (_jsx("img", { src: logoSrc, alt: "logo", width: logoSrcWidth })) : (
|
|
14
|
+
return (_jsxs(Container, { children: [_jsxs(LeftSide, { children: [onOpenMobileSideMenu && _jsx(HamburgerMenuButton, { isLeftMenuOpen: isMobileMenuOpen, onClick: onOpenMobileSideMenu }), _jsx(Link, { to: homeLink, children: logoSrc ? (_jsx("img", { src: logoSrc, alt: "logo", width: logoSrcWidth })) : (_jsx(Logo, { brand: logo, variant: logoVariant, width: "145px" })) })] }), _jsxs(RightSide, { children: [Array.isArray(rightMenuItems) && (rightMenuItems === null || rightMenuItems === void 0 ? void 0 : rightMenuItems.length) > 0 && _jsx(MenuItems, { items: rightMenuItems }), _jsx(LanguageWrapper, { children: _jsx(LanguageSwitch, { languageItems: languageItems, withTitle: showLanguageWithTitle, onLanguageChange: handleChangeLanguage, activeLanguage: currentLanguage, languageFlagWrapBackgroundColor: languageFlagWrapBackgroundColor }) }), hasUserMenu && _jsx(UserMenu, { user: user, onLogout: onLogout })] })] }));
|
|
15
15
|
};
|
|
@@ -18,7 +18,6 @@ declare const meta: {
|
|
|
18
18
|
onOpenMobileSideMenu?: (() => void) | undefined;
|
|
19
19
|
onChangeLanguage?: ((language: string) => void) | undefined;
|
|
20
20
|
onLogout?: (() => void) | undefined;
|
|
21
|
-
withLanguageSwitch?: boolean | undefined;
|
|
22
21
|
}>;
|
|
23
22
|
tags: string[];
|
|
24
23
|
argTypes: {};
|
|
@@ -49,6 +49,6 @@ var MenuItem = function (_a) {
|
|
|
49
49
|
}, [items, link]);
|
|
50
50
|
return (_jsxs(_Fragment, { children: [separator && _jsx(ItemsSeparator, {}), _jsxs(MenuItemContainer, { ref: parentRef, "$isCompact": isCompact, "$lightMode": lightMode, hasChildren: hasChildren, isHovering: isHovering, children: [_jsxs(ItemLinkWrap, __assign({}, linkProps, { onMouseOver: handleMouseOver, exact: true, activeClassName: hasChildren ? 'selected' : undefined, onClick: toggleChildren, "$isCompact": isCompact, className: itemLinkWrapClassName,
|
|
51
51
|
// @ts-expect-error
|
|
52
|
-
isActive: isActive, "$lightMode": lightMode, children: [_jsxs(ItemLabel, { "$isCompact": isCompact, isSubitem: isSubitem, children: [!isSubitem && icon && (_jsx(ItemIcon, { className: "mainIcon", "$isCompact": isCompact, children: typeof icon === 'string' ? _jsx(Icon, { icon: icon, fill: "none" }) : icon })), _jsx(Title, { variant: "semiBold", mt: 0, mb: 0, textAlign:
|
|
52
|
+
isActive: isActive, "$lightMode": lightMode, children: [_jsxs(ItemLabel, { "$isCompact": isCompact, isSubitem: isSubitem, children: [!isSubitem && icon && (_jsx(ItemIcon, { className: "mainIcon", "$isCompact": isCompact, children: typeof icon === 'string' ? _jsx(Icon, { icon: icon, fill: "none" }) : icon })), _jsx(Title, { variant: "semiBold", mt: 0, mb: 0, textAlign: isCompact ? 'center' : 'left', children: _jsx(OverflowWithEllipsis, { children: title }) })] }), !isCompact && hasChildren && _jsx(ItemDropdownArrow, { icon: "goDown", "$lightMode": lightMode })] })), isHovering && isCompact && hasChildren && !listExpandedItems && (_jsx(SubitemTooltip, { items: items, childRef: childRef, parentRef: parentRef, isLeftMenuOpen: isLeftMenuOpen, onCloseLeftMenu: onCloseLeftMenu, lightMode: lightMode }))] }), hasChildren && listExpandedItems && (_jsx(SubItemsWrap, { children: items === null || items === void 0 ? void 0 : items.map(function (item, index) { return (_jsx(MenuItem, __assign({ isCompact: isCompact, lightMode: lightMode }, item, { onCloseLeftMenu: onCloseLeftMenu, isSubitem: true }), "".concat(index))); }) }))] }));
|
|
53
53
|
};
|
|
54
54
|
export default memo(MenuItem);
|
|
@@ -16,7 +16,7 @@ export var StyledIcon = styled(Icon)(templateObject_3 || (templateObject_3 = __m
|
|
|
16
16
|
var $addMarginLeft = _a.$addMarginLeft;
|
|
17
17
|
return ($addMarginLeft ? '8px' : '0');
|
|
18
18
|
});
|
|
19
|
-
export var StyledButton = styled.button(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n width: ", ";\n font-weight: semiBold;\n font-size: 14px;\n font-family: ", ";\n display: flex;\n text-align: center;\n align-items: center;\n justify-content: center;\n border-radius: 8px;\n height: ", ";\n border: none;\n transition-duration: 0.1s;\n transition: all 300ms ease-out;\n gap: 8px;\n padding: ", ";\n opacity: ", ";\n cursor: ", ";\n\n :focus {\n outline: none;\n }\n\n &[data-variant='default'] {\n &[data-appearance='primary'] {\n background-color: red1;\n color: white;\n\n :not(:disabled) {\n @media (hover: hover) {\n :hover {\n background-color: red80;\n }\n }\n }\n }\n\n &[data-appearance='secondary'] {\n background-color: neutral20;\n color: typoPrimary;\n\n @media (hover: hover) {\n :hover {\n background-color: lightGray7;\n }\n }\n }\n\n &[data-appearance='tertiary'] {\n background-color: red20;\n color: red1;\n\n @media (hover: hover) {\n :hover {\n background-color: red30;\n }\n }\n }\n }\n\n &[data-variant='success'] {\n background-color: successColor;\n color: white;\n\n @media (hover: hover) {\n :hover {\n background-color: green70;\n }\n }\n }\n &[data-variant='outline'] {\n background-color: white;\n border: slim;\n &[data-appearance='primary'] {\n color: typoPrimary;\n border-color: typoPrimary;\n\n @media (hover: hover) {\n :hover {\n background-color: neutral20;\n }\n }\n }\n &[data-appearance='secondary'] {\n color: red1;\n border-color: red1;\n\n @media (hover: hover) {\n :hover {\n background-color: red20;\n }\n }\n }\n }\n &[data-variant='ghost'] {\n background-color: white;\n &[data-appearance='primary'] {\n color: typoPrimary;\n\n @media (hover: hover) {\n :hover {\n background-color: neutral20;\n }\n }\n }\n &[data-appearance='secondary'] {\n color: red1;\n\n @media (hover: hover) {\n :hover {\n background-color: red20;\n }\n }\n }\n }\n\n &[data-variant='link'] {\n background-color: transparent;\n height:
|
|
19
|
+
export var StyledButton = styled.button(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n width: ", ";\n font-weight: semiBold;\n font-size: 14px;\n font-family: ", ";\n display: flex;\n text-align: center;\n align-items: center;\n justify-content: center;\n border-radius: 8px;\n height: ", ";\n border: none;\n transition-duration: 0.1s;\n transition: all 300ms ease-out;\n gap: 8px;\n padding: ", ";\n opacity: ", ";\n cursor: ", ";\n\n :focus {\n outline: none;\n }\n\n &[data-variant='default'] {\n &[data-appearance='primary'] {\n background-color: red1;\n color: white;\n\n :not(:disabled) {\n @media (hover: hover) {\n :hover {\n background-color: red80;\n }\n }\n }\n }\n\n &[data-appearance='secondary'] {\n background-color: neutral20;\n color: typoPrimary;\n\n @media (hover: hover) {\n :hover {\n background-color: lightGray7;\n }\n }\n }\n\n &[data-appearance='tertiary'] {\n background-color: red20;\n color: red1;\n\n @media (hover: hover) {\n :hover {\n background-color: red30;\n }\n }\n }\n }\n\n &[data-variant='success'] {\n background-color: successColor;\n color: white;\n\n @media (hover: hover) {\n :hover {\n background-color: green70;\n }\n }\n }\n &[data-variant='outline'] {\n background-color: white;\n border: slim;\n &[data-appearance='primary'] {\n color: typoPrimary;\n border-color: typoPrimary;\n\n @media (hover: hover) {\n :hover {\n background-color: neutral20;\n }\n }\n }\n &[data-appearance='secondary'] {\n color: red1;\n border-color: red1;\n\n @media (hover: hover) {\n :hover {\n background-color: red20;\n }\n }\n }\n }\n &[data-variant='ghost'] {\n background-color: white;\n &[data-appearance='primary'] {\n color: typoPrimary;\n\n @media (hover: hover) {\n :hover {\n background-color: neutral20;\n }\n }\n }\n &[data-appearance='secondary'] {\n color: red1;\n\n @media (hover: hover) {\n :hover {\n background-color: red20;\n }\n }\n }\n }\n\n &[data-variant='link'] {\n background-color: transparent;\n height: ", ";\n &[data-appearance='primary'] {\n color: typoPrimary;\n\n @media (hover: hover) {\n :hover {\n color: neutral500;\n }\n }\n }\n &[data-appearance='secondary'] {\n color: red1;\n\n @media (hover: hover) {\n :hover {\n color: red70;\n }\n }\n }\n }\n\n &[data-variant='icon'] {\n width: 38px;\n height: ", ";\n gap: 10px;\n\n &[data-appearance='primary'] {\n background-color: red1;\n color: white;\n\n @media (hover: hover) {\n :hover {\n background-color: red70;\n }\n }\n }\n\n &[data-appearance='secondary'] {\n background-color: neutral20;\n color: typoPrimary;\n\n @media (hover: hover) {\n :hover {\n background-color: lightGray7;\n }\n }\n }\n\n &[data-appearance='tertiary'] {\n background-color: red20;\n color: red1;\n\n @media (hover: hover) {\n :hover {\n background-color: red30;\n }\n }\n }\n\n &[data-appearance='ghost'] {\n background-color: transparent;\n color: typoPrimary;\n\n @media (hover: hover) {\n :hover {\n color: neutral500;\n }\n }\n }\n }\n\n &[data-variant='floating'] {\n &[data-appearance='primary'] {\n width: 56px;\n height: ", ";\n background-color: red1;\n color: white;\n border-radius: 50%;\n\n @media (hover: hover) {\n :hover {\n background-color: red70;\n }\n }\n }\n }\n"], ["\n width: ", ";\n font-weight: semiBold;\n font-size: 14px;\n font-family: ", ";\n display: flex;\n text-align: center;\n align-items: center;\n justify-content: center;\n border-radius: 8px;\n height: ", ";\n border: none;\n transition-duration: 0.1s;\n transition: all 300ms ease-out;\n gap: 8px;\n padding: ", ";\n opacity: ", ";\n cursor: ", ";\n\n :focus {\n outline: none;\n }\n\n &[data-variant='default'] {\n &[data-appearance='primary'] {\n background-color: red1;\n color: white;\n\n :not(:disabled) {\n @media (hover: hover) {\n :hover {\n background-color: red80;\n }\n }\n }\n }\n\n &[data-appearance='secondary'] {\n background-color: neutral20;\n color: typoPrimary;\n\n @media (hover: hover) {\n :hover {\n background-color: lightGray7;\n }\n }\n }\n\n &[data-appearance='tertiary'] {\n background-color: red20;\n color: red1;\n\n @media (hover: hover) {\n :hover {\n background-color: red30;\n }\n }\n }\n }\n\n &[data-variant='success'] {\n background-color: successColor;\n color: white;\n\n @media (hover: hover) {\n :hover {\n background-color: green70;\n }\n }\n }\n &[data-variant='outline'] {\n background-color: white;\n border: slim;\n &[data-appearance='primary'] {\n color: typoPrimary;\n border-color: typoPrimary;\n\n @media (hover: hover) {\n :hover {\n background-color: neutral20;\n }\n }\n }\n &[data-appearance='secondary'] {\n color: red1;\n border-color: red1;\n\n @media (hover: hover) {\n :hover {\n background-color: red20;\n }\n }\n }\n }\n &[data-variant='ghost'] {\n background-color: white;\n &[data-appearance='primary'] {\n color: typoPrimary;\n\n @media (hover: hover) {\n :hover {\n background-color: neutral20;\n }\n }\n }\n &[data-appearance='secondary'] {\n color: red1;\n\n @media (hover: hover) {\n :hover {\n background-color: red20;\n }\n }\n }\n }\n\n &[data-variant='link'] {\n background-color: transparent;\n height: ", ";\n &[data-appearance='primary'] {\n color: typoPrimary;\n\n @media (hover: hover) {\n :hover {\n color: neutral500;\n }\n }\n }\n &[data-appearance='secondary'] {\n color: red1;\n\n @media (hover: hover) {\n :hover {\n color: red70;\n }\n }\n }\n }\n\n &[data-variant='icon'] {\n width: 38px;\n height: ", ";\n gap: 10px;\n\n &[data-appearance='primary'] {\n background-color: red1;\n color: white;\n\n @media (hover: hover) {\n :hover {\n background-color: red70;\n }\n }\n }\n\n &[data-appearance='secondary'] {\n background-color: neutral20;\n color: typoPrimary;\n\n @media (hover: hover) {\n :hover {\n background-color: lightGray7;\n }\n }\n }\n\n &[data-appearance='tertiary'] {\n background-color: red20;\n color: red1;\n\n @media (hover: hover) {\n :hover {\n background-color: red30;\n }\n }\n }\n\n &[data-appearance='ghost'] {\n background-color: transparent;\n color: typoPrimary;\n\n @media (hover: hover) {\n :hover {\n color: neutral500;\n }\n }\n }\n }\n\n &[data-variant='floating'] {\n &[data-appearance='primary'] {\n width: 56px;\n height: ", ";\n background-color: red1;\n color: white;\n border-radius: 50%;\n\n @media (hover: hover) {\n :hover {\n background-color: red70;\n }\n }\n }\n }\n"])), function (_a) {
|
|
20
20
|
var fullWidth = _a.fullWidth;
|
|
21
21
|
return (fullWidth ? '100%' : 'initial');
|
|
22
22
|
}, th('fonts.primary'), function (_a) {
|
|
@@ -31,5 +31,14 @@ export var StyledButton = styled.button(templateObject_4 || (templateObject_4 =
|
|
|
31
31
|
}, function (_a) {
|
|
32
32
|
var disabled = _a.disabled;
|
|
33
33
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
34
|
+
}, function (_a) {
|
|
35
|
+
var height = _a.height;
|
|
36
|
+
return height || '20px';
|
|
37
|
+
}, function (_a) {
|
|
38
|
+
var height = _a.height;
|
|
39
|
+
return height || '38px';
|
|
40
|
+
}, function (_a) {
|
|
41
|
+
var height = _a.height;
|
|
42
|
+
return height || '56px';
|
|
34
43
|
});
|
|
35
44
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
var __assign = (this && this.__assign) || function () {
|
|
2
|
+
__assign = Object.assign || function(t) {
|
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
+
s = arguments[i];
|
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
+
t[p] = s[p];
|
|
7
|
+
}
|
|
8
|
+
return t;
|
|
9
|
+
};
|
|
10
|
+
return __assign.apply(this, arguments);
|
|
11
|
+
};
|
|
12
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
13
|
+
export var Layout = function (props) {
|
|
14
|
+
return (_jsxs("svg", __assign({ width: "23", height: "22", viewBox: "0 0 23 22", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: [_jsx("path", { d: "M17.9167 2.75H5.08333C4.07081 2.75 3.25 3.0236 3.25 3.36111V7.63889C3.25 7.9764 4.07081 8.25 5.08333 8.25H17.9167C18.9292 8.25 19.75 7.9764 19.75 7.63889V3.36111C19.75 3.0236 18.9292 2.75 17.9167 2.75Z", stroke: props.stroke || 'black', strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M7.83398 18.3333L7.83398 11.9167C7.83398 11.4104 7.60598 11 7.32473 11L3.75991 11C3.47865 11 3.25065 11.4104 3.25065 11.9167L3.25065 18.3333C3.25065 18.8396 3.47865 19.25 3.75991 19.25L7.32472 19.25C7.60598 19.25 7.83398 18.8396 7.83398 18.3333Z", stroke: props.stroke || 'black', strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M13.334 18.3333L13.334 11.9167C13.334 11.4104 13.1516 11 12.9266 11L10.0747 11C9.84972 11 9.66732 11.4104 9.66732 11.9167L9.66732 18.3333C9.66732 18.8396 9.84972 19.25 10.0747 19.25L12.9266 19.25C13.1516 19.25 13.334 18.8396 13.334 18.3333Z", stroke: props.stroke || 'black', strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M19.75 18.3333L19.75 11.9167C19.75 11.4104 19.522 11 19.2407 11L15.6759 11C15.3947 11 15.1667 11.4104 15.1667 11.9167L15.1667 18.3333C15.1667 18.8396 15.3947 19.25 15.6759 19.25L19.2407 19.25C19.522 19.25 19.75 18.8396 19.75 18.3333Z", stroke: props.stroke || 'black', strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] })));
|
|
15
|
+
};
|
|
@@ -6,8 +6,6 @@ export { FlagESP } from './FlagESP';
|
|
|
6
6
|
export { FlagITA } from './FlagITA';
|
|
7
7
|
export { FlagRUS } from './FlagRUS';
|
|
8
8
|
export { FlagSVK } from './FlagSVK';
|
|
9
|
-
export { FlagNL } from './FlagNL';
|
|
10
|
-
export { FlagHU } from './FlagHU';
|
|
11
9
|
export { FlagUK } from './FlagUK';
|
|
12
10
|
export { Complaint } from './Complaint';
|
|
13
11
|
export { Expeditions } from './Expeditions';
|
|
@@ -31,6 +29,7 @@ export { Inventory2 } from './Inventory2';
|
|
|
31
29
|
export { Logout1 } from './Logout1';
|
|
32
30
|
export { Puzzle1 } from './Puzzle1';
|
|
33
31
|
export { AddPhoto } from './AddPhoto';
|
|
32
|
+
export { Layout } from './Layout';
|
|
34
33
|
export { Link } from './Link';
|
|
35
34
|
export { OpenBox } from './OpenBox';
|
|
36
35
|
export { Box } from './Box';
|
|
@@ -6,8 +6,6 @@ export { FlagESP } from './FlagESP';
|
|
|
6
6
|
export { FlagITA } from './FlagITA';
|
|
7
7
|
export { FlagRUS } from './FlagRUS';
|
|
8
8
|
export { FlagSVK } from './FlagSVK';
|
|
9
|
-
export { FlagNL } from './FlagNL';
|
|
10
|
-
export { FlagHU } from './FlagHU';
|
|
11
9
|
export { FlagUK } from './FlagUK';
|
|
12
10
|
export { Complaint } from './Complaint';
|
|
13
11
|
export { Expeditions } from './Expeditions';
|
|
@@ -31,6 +29,7 @@ export { Inventory2 } from './Inventory2';
|
|
|
31
29
|
export { Logout1 } from './Logout1';
|
|
32
30
|
export { Puzzle1 } from './Puzzle1';
|
|
33
31
|
export { AddPhoto } from './AddPhoto';
|
|
32
|
+
export { Layout } from './Layout';
|
|
34
33
|
export { Link } from './Link';
|
|
35
34
|
export { OpenBox } from './OpenBox';
|
|
36
35
|
export { Box } from './Box';
|
|
@@ -29,6 +29,9 @@ declare const defaultTheme: {
|
|
|
29
29
|
typoPrimary: string;
|
|
30
30
|
blue10: string;
|
|
31
31
|
blue20: string;
|
|
32
|
+
blue30: string;
|
|
33
|
+
blue40: string;
|
|
34
|
+
blue50: string;
|
|
32
35
|
blue60: string;
|
|
33
36
|
blue70: string;
|
|
34
37
|
blue80: string;
|
|
@@ -79,8 +82,13 @@ declare const defaultTheme: {
|
|
|
79
82
|
purple60: string;
|
|
80
83
|
purple80: string;
|
|
81
84
|
purple90: string;
|
|
85
|
+
magenta10: string;
|
|
82
86
|
magenta20: string;
|
|
87
|
+
magenta30: string;
|
|
88
|
+
magenta40: string;
|
|
89
|
+
magenta50: string;
|
|
83
90
|
magenta60: string;
|
|
91
|
+
magenta70: string;
|
|
84
92
|
magenta80: string;
|
|
85
93
|
magenta90: string;
|
|
86
94
|
};
|
|
@@ -29,6 +29,9 @@ var defaultTheme = {
|
|
|
29
29
|
typoPrimary: '#22394E',
|
|
30
30
|
blue10: '#F3F9FF',
|
|
31
31
|
blue20: '#DCEFFF',
|
|
32
|
+
blue30: '#BFE0FF',
|
|
33
|
+
blue40: '#6FADFF',
|
|
34
|
+
blue50: '#2684FF',
|
|
32
35
|
blue60: '#0065FF',
|
|
33
36
|
blue70: '#0052CC',
|
|
34
37
|
blue80: '#0747A6',
|
|
@@ -79,10 +82,15 @@ var defaultTheme = {
|
|
|
79
82
|
purple60: '#6554C0',
|
|
80
83
|
purple80: '#403294',
|
|
81
84
|
purple90: '#03235f',
|
|
85
|
+
magenta10: '#FFF7FB',
|
|
82
86
|
magenta20: '#FCF1F7',
|
|
87
|
+
magenta30: '#FFD6E8',
|
|
88
|
+
magenta40: '#FFAFD2',
|
|
89
|
+
magenta50: '#FF7EB6',
|
|
83
90
|
magenta60: '#EE5396',
|
|
91
|
+
magenta70: '#D12771',
|
|
84
92
|
magenta80: '#9F1853',
|
|
85
|
-
magenta90: '#
|
|
93
|
+
magenta90: '#7B1340',
|
|
86
94
|
},
|
|
87
95
|
fonts: {
|
|
88
96
|
primary: 'Inter, sans-serif',
|
|
@@ -30,6 +30,9 @@ declare const themes: {
|
|
|
30
30
|
typoPrimary: string;
|
|
31
31
|
blue10: string;
|
|
32
32
|
blue20: string;
|
|
33
|
+
blue30: string;
|
|
34
|
+
blue40: string;
|
|
35
|
+
blue50: string;
|
|
33
36
|
blue60: string;
|
|
34
37
|
blue70: string;
|
|
35
38
|
blue80: string;
|
|
@@ -80,8 +83,13 @@ declare const themes: {
|
|
|
80
83
|
purple60: string;
|
|
81
84
|
purple80: string;
|
|
82
85
|
purple90: string;
|
|
86
|
+
magenta10: string;
|
|
83
87
|
magenta20: string;
|
|
88
|
+
magenta30: string;
|
|
89
|
+
magenta40: string;
|
|
90
|
+
magenta50: string;
|
|
84
91
|
magenta60: string;
|
|
92
|
+
magenta70: string;
|
|
85
93
|
magenta80: string;
|
|
86
94
|
magenta90: string;
|
|
87
95
|
};
|