@mailstep/design-system 0.1.16 → 0.1.18-beta.1
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/Modal/styles.js +5 -5
- package/ui/Blocks/Modal/styles.js.map +1 -1
- package/ui/Elements/Button/styles.js +5 -5
- package/ui/Elements/Button/styles.js.map +1 -1
- package/ui/Elements/Button/types.d.ts +4 -4
- package/ui/Elements/Icon/icons/BarcodeScan.js +7 -0
- package/ui/Elements/Icon/icons/BarcodeScan.js.map +1 -0
- package/ui/Elements/Icon/icons/ImagePlaceholder.js +7 -0
- package/ui/Elements/Icon/icons/ImagePlaceholder.js.map +1 -0
- package/ui/Elements/Icon/index.d.ts +3 -1
- package/ui/Forms/Input/Input.js +4 -1
- package/ui/Forms/Input/Input.js.map +1 -1
- package/ui/Forms/Input/styles.js +1 -1
- package/ui/Forms/Input/styles.js.map +1 -1
- package/ui/dts/Elements/Button/styles.d.ts +4 -4
- package/ui/dts/Elements/Button/types.d.ts +4 -4
- package/ui/dts/Elements/Icon/icons/BarcodeScan.d.ts +3 -0
- package/ui/dts/Elements/Icon/icons/ImagePlaceholder.d.ts +3 -0
- package/ui/dts/Elements/Icon/icons/index.d.ts +2 -0
- package/ui/dts/Elements/Icon/index.d.ts +1 -1
- package/ui/index.d.ts +1 -1
- package/ui/index.js +2 -0
- package/ui/index.js.map +1 -1
package/package.json
CHANGED
|
@@ -3,11 +3,11 @@ import styled, { th } from '@xstyled/styled-components';
|
|
|
3
3
|
import { createRgba } from '../../utils/CreateRgba/createRgba.js';
|
|
4
4
|
import 'react';
|
|
5
5
|
|
|
6
|
-
var DialogOverlay = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: fixed; /* Stay in place */\n z-index: 5;\n left: 0;\n top: 0;\n width: 100%; /* Full width */\n height: 100%; /* Full height */\n overflow: auto; /* Enable scroll if needed */\n background-color: ", ";\n text-align: center;\n @media print {\n position: absolute !important;\n left: 0 !important;\n top: 0 !important;\n height: auto !important;\n visibility: hidden;\n }\n"], ["\n position: fixed; /* Stay in place */\n z-index: 5;\n left: 0;\n top: 0;\n width: 100%; /* Full width */\n height: 100%; /* Full height */\n overflow: auto; /* Enable scroll if needed */\n background-color: ", ";\n text-align: center;\n @media print {\n position: absolute !important;\n left: 0 !important;\n top: 0 !important;\n height: auto !important;\n visibility: hidden;\n }\n"])), function (_a) {
|
|
6
|
+
var DialogOverlay = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: fixed; /* Stay in place */\n z-index: 5;\n left: 0;\n top: 0;\n width: 100%; /* Full width */\n height: 100%; /* Full height */\n overflow: auto; /* Enable scroll if needed */\n background-color: ", ";\n text-align: center;\n @media print {\n position: absolute !important;\n left: 0 !important;\n top: 0 !important;\n height: auto !important;\n visibility: hidden;\n }\n @media (max-width: 576px) {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n"], ["\n position: fixed; /* Stay in place */\n z-index: 5;\n left: 0;\n top: 0;\n width: 100%; /* Full width */\n height: 100%; /* Full height */\n overflow: auto; /* Enable scroll if needed */\n background-color: ", ";\n text-align: center;\n @media print {\n position: absolute !important;\n left: 0 !important;\n top: 0 !important;\n height: auto !important;\n visibility: hidden;\n }\n @media (max-width: 576px) {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n"])), function (_a) {
|
|
7
7
|
var _b = _a.backgroundColor, backgroundColor = _b === void 0 ? 'blue2' : _b;
|
|
8
8
|
return createRgba(backgroundColor, 0.6);
|
|
9
9
|
});
|
|
10
|
-
var DialogWindow = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background-color: ", ";\n margin: 100px auto 0 auto; /* Location of the box */\n padding: 0;\n border: 0;\n border-radius: 1rem;\n box-shadow: dialogShadow;\n min-width: ", ";\n max-width: ", ";\n min-height: ", ";\n max-height: ", ";\n display: inline-block;\n position: relative;\n text-align: left;\n @media print {\n background-color: #fff;\n margin: 0;\n visibility: visible;\n overflow: visible;\n box-shadow: none;\n max-width: 100%;\n }\n\n @media (max-width: 576px) {\n margin:
|
|
10
|
+
var DialogWindow = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background-color: ", ";\n margin: 100px auto 0 auto; /* Location of the box */\n padding: 0;\n border: 0;\n border-radius: 1rem;\n box-shadow: dialogShadow;\n min-width: ", ";\n max-width: ", ";\n min-height: ", ";\n max-height: ", ";\n display: inline-block;\n position: relative;\n text-align: left;\n @media print {\n background-color: #fff;\n margin: 0;\n visibility: visible;\n overflow: visible;\n box-shadow: none;\n max-width: 100%;\n }\n\n @media (max-width: 576px) {\n margin: 16px 0;\n ", ";\n }\n"], ["\n background-color: ", ";\n margin: 100px auto 0 auto; /* Location of the box */\n padding: 0;\n border: 0;\n border-radius: 1rem;\n box-shadow: dialogShadow;\n min-width: ", ";\n max-width: ", ";\n min-height: ", ";\n max-height: ", ";\n display: inline-block;\n position: relative;\n text-align: left;\n @media print {\n background-color: #fff;\n margin: 0;\n visibility: visible;\n overflow: visible;\n box-shadow: none;\n max-width: 100%;\n }\n\n @media (max-width: 576px) {\n margin: 16px 0;\n ", ";\n }\n"])), function (_a) {
|
|
11
11
|
var $whiteBg = _a.$whiteBg;
|
|
12
12
|
return ($whiteBg ? th.color('white') : '#fefefe');
|
|
13
13
|
}, function (_a) {
|
|
@@ -24,18 +24,18 @@ var DialogWindow = styled.div(templateObject_2 || (templateObject_2 = __makeTemp
|
|
|
24
24
|
return $maxHeight || 'auto';
|
|
25
25
|
}, function (_a) {
|
|
26
26
|
var $mobileFullscreen = _a.$mobileFullscreen;
|
|
27
|
-
return $mobileFullscreen &&
|
|
27
|
+
return $mobileFullscreen && 'border-radius: 0; max-width: 100% !important;';
|
|
28
28
|
});
|
|
29
29
|
var HeaderContainer = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n padding: 30px;\n padding-bottom: ", ";\n\n @media (max-width: 576px) {\n padding: 18px;\n border-bottom: 1px solid ", ";\n }\n"], ["\n display: flex;\n justify-content: space-between;\n padding: 30px;\n padding-bottom: ", ";\n\n @media (max-width: 576px) {\n padding: 18px;\n border-bottom: 1px solid ", ";\n }\n"])), function (_a) {
|
|
30
30
|
var topSpace = _a.topSpace;
|
|
31
31
|
return topSpace;
|
|
32
32
|
}, th.color('lightGray6'));
|
|
33
|
-
var ContentContainer = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n padding: 30px;\n padding-top: ", ";\n\n @media (max-width: 576px) {\n padding: ", ";\n font-size: 16px;\n line-height: 1.4;\n }\n
|
|
33
|
+
var ContentContainer = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n padding: 30px;\n padding-top: ", ";\n\n @media (max-width: 576px) {\n padding: ", ";\n font-size: 16px;\n line-height: 1.4;\n }\n"], ["\n padding: 30px;\n padding-top: ", ";\n\n @media (max-width: 576px) {\n padding: ", ";\n font-size: 16px;\n line-height: 1.4;\n }\n"])), function (_a) {
|
|
34
34
|
var topSpace = _a.topSpace;
|
|
35
35
|
return topSpace;
|
|
36
36
|
}, function (_a) {
|
|
37
37
|
var $mobileFullscreen = _a.$mobileFullscreen;
|
|
38
|
-
return $mobileFullscreen ? '0' : '18px';
|
|
38
|
+
return ($mobileFullscreen ? '0' : '18px');
|
|
39
39
|
});
|
|
40
40
|
var TitleContainer = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n display: flex;\n flex-flow: row;\n align-items: center;\n > div:first-of-type {\n margin-right: 0.5em;\n display: block;\n }\n\n .icon {\n font-size: 24px;\n margin-right: 15px;\n display: flex;\n\n @media (max-width: 576px) {\n font-size: 18px;\n margin-right: 12px;\n }\n }\n"], ["\n display: flex;\n flex-flow: row;\n align-items: center;\n > div:first-of-type {\n margin-right: 0.5em;\n display: block;\n }\n\n .icon {\n font-size: 24px;\n margin-right: 15px;\n display: flex;\n\n @media (max-width: 576px) {\n font-size: 18px;\n margin-right: 12px;\n }\n }\n"])));
|
|
41
41
|
var H4 = styled.h4(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n color: typoPrimary;\n margin: 0;\n font-size: 24px;\n line-height: 28px;\n font-weight: 700;\n\n @media (max-width: 576px) {\n font-size: 18px;\n line-height: 18px;\n }\n"], ["\n color: typoPrimary;\n margin: 0;\n font-size: 24px;\n line-height: 28px;\n font-weight: 700;\n\n @media (max-width: 576px) {\n font-size: 18px;\n line-height: 18px;\n }\n"])));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sources":["../../../../packages/ui/Blocks/Modal/styles.ts"],"sourcesContent":["import { __makeTemplateObject } from \"tslib\";\nimport styled, { th } from '@xstyled/styled-components';\nimport { createRgba } from '../../utils';\nexport var DialogOverlay = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject([\"\\n position: fixed; /* Stay in place */\\n z-index: 5;\\n left: 0;\\n top: 0;\\n width: 100%; /* Full width */\\n height: 100%; /* Full height */\\n overflow: auto; /* Enable scroll if needed */\\n background-color: \", \";\\n text-align: center;\\n @media print {\\n position: absolute !important;\\n left: 0 !important;\\n top: 0 !important;\\n height: auto !important;\\n visibility: hidden;\\n }\\n\"], [\"\\n position: fixed; /* Stay in place */\\n z-index: 5;\\n left: 0;\\n top: 0;\\n width: 100%; /* Full width */\\n height: 100%; /* Full height */\\n overflow: auto; /* Enable scroll if needed */\\n background-color: \", \";\\n text-align: center;\\n @media print {\\n position: absolute !important;\\n left: 0 !important;\\n top: 0 !important;\\n height: auto !important;\\n visibility: hidden;\\n }\\n\"])), function (_a) {\n var _b = _a.backgroundColor, backgroundColor = _b === void 0 ? 'blue2' : _b;\n return createRgba(backgroundColor, 0.6);\n});\nexport var DialogWindow = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject([\"\\n background-color: \", \";\\n margin: 100px auto 0 auto; /* Location of the box */\\n padding: 0;\\n border: 0;\\n border-radius: 1rem;\\n box-shadow: dialogShadow;\\n min-width: \", \";\\n max-width: \", \";\\n min-height: \", \";\\n max-height: \", \";\\n display: inline-block;\\n position: relative;\\n text-align: left;\\n @media print {\\n background-color: #fff;\\n margin: 0;\\n visibility: visible;\\n overflow: visible;\\n box-shadow: none;\\n max-width: 100%;\\n }\\n\\n @media (max-width: 576px) {\\n margin: 20% auto 50px auto;\\n \", \"\\n }\\n\"], [\"\\n background-color: \", \";\\n margin: 100px auto 0 auto; /* Location of the box */\\n padding: 0;\\n border: 0;\\n border-radius: 1rem;\\n box-shadow: dialogShadow;\\n min-width: \", \";\\n max-width: \", \";\\n min-height: \", \";\\n max-height: \", \";\\n display: inline-block;\\n position: relative;\\n text-align: left;\\n @media print {\\n background-color: #fff;\\n margin: 0;\\n visibility: visible;\\n overflow: visible;\\n box-shadow: none;\\n max-width: 100%;\\n }\\n\\n @media (max-width: 576px) {\\n margin: 20% auto 50px auto;\\n \", \"\\n }\\n\"])), function (_a) {\n var $whiteBg = _a.$whiteBg;\n return ($whiteBg ? th.color('white') : '#fefefe');\n}, function (_a) {\n var $minWidth = _a.$minWidth;\n return $minWidth || '10%';\n}, function (_a) {\n var $maxWidth = _a.$maxWidth;\n return $maxWidth || 'calc(100% - 32px)';\n}, function (_a) {\n var $minHeight = _a.$minHeight;\n return $minHeight || 'auto';\n}, function (_a) {\n var $maxHeight = _a.$maxHeight;\n return $maxHeight || 'auto';\n}, function (_a) {\n var $mobileFullscreen = _a.$mobileFullscreen;\n return $mobileFullscreen && \"border-radius: 0; max-width: 100% !important;\";\n});\nexport var HeaderContainer = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject([\"\\n display: flex;\\n justify-content: space-between;\\n padding: 30px;\\n padding-bottom: \", \";\\n\\n @media (max-width: 576px) {\\n padding: 18px;\\n border-bottom: 1px solid \", \";\\n }\\n\"], [\"\\n display: flex;\\n justify-content: space-between;\\n padding: 30px;\\n padding-bottom: \", \";\\n\\n @media (max-width: 576px) {\\n padding: 18px;\\n border-bottom: 1px solid \", \";\\n }\\n\"])), function (_a) {\n var topSpace = _a.topSpace;\n return topSpace;\n}, th.color('lightGray6'));\nexport var ContentContainer = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject([\"\\n padding: 30px;\\n padding-top: \", \";\\n\\n @media (max-width: 576px) {\\n padding: \", \";\\n font-size: 16px;\\n line-height: 1.4;\\n }\\n \\n \\n\"], [\"\\n padding: 30px;\\n padding-top: \", \";\\n\\n @media (max-width: 576px) {\\n padding: \", \";\\n font-size: 16px;\\n line-height: 1.4;\\n }\\n \\n \\n\"])), function (_a) {\n var topSpace = _a.topSpace;\n return topSpace;\n}, function (_a) {\n var $mobileFullscreen = _a.$mobileFullscreen;\n return $mobileFullscreen ? '0' : '18px';\n});\nexport var TitleContainer = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject([\"\\n display: flex;\\n flex-flow: row;\\n align-items: center;\\n > div:first-of-type {\\n margin-right: 0.5em;\\n display: block;\\n }\\n\\n .icon {\\n font-size: 24px;\\n margin-right: 15px;\\n display: flex;\\n\\n @media (max-width: 576px) {\\n font-size: 18px;\\n margin-right: 12px;\\n }\\n }\\n\"], [\"\\n display: flex;\\n flex-flow: row;\\n align-items: center;\\n > div:first-of-type {\\n margin-right: 0.5em;\\n display: block;\\n }\\n\\n .icon {\\n font-size: 24px;\\n margin-right: 15px;\\n display: flex;\\n\\n @media (max-width: 576px) {\\n font-size: 18px;\\n margin-right: 12px;\\n }\\n }\\n\"])));\nexport var H4 = styled.h4(templateObject_6 || (templateObject_6 = __makeTemplateObject([\"\\n color: typoPrimary;\\n margin: 0;\\n font-size: 24px;\\n line-height: 28px;\\n font-weight: 700;\\n\\n @media (max-width: 576px) {\\n font-size: 18px;\\n line-height: 18px;\\n }\\n\"], [\"\\n color: typoPrimary;\\n margin: 0;\\n font-size: 24px;\\n line-height: 28px;\\n font-weight: 700;\\n\\n @media (max-width: 576px) {\\n font-size: 18px;\\n line-height: 18px;\\n }\\n\"])));\nexport var ButtonsContainer = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject([\"\\n padding: 1.5rem;\\n text-align: right;\\n > * {\\n margin: 0 0.5em;\\n }\\n\\n @media (max-width: 576px) {\\n display: flex;\\n justify-content: space-around;\\n padding: 32px 18px 18px;\\n\\n > * {\\n margin: 0;\\n }\\n }\\n\"], [\"\\n padding: 1.5rem;\\n text-align: right;\\n > * {\\n margin: 0 0.5em;\\n }\\n\\n @media (max-width: 576px) {\\n display: flex;\\n justify-content: space-around;\\n padding: 32px 18px 18px;\\n\\n > * {\\n margin: 0;\\n }\\n }\\n\"])));\nexport var CloseButton = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject([\"\\n cursor: pointer;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n position: absolute;\\n z-index: 1;\\n top: 32px;\\n right: 24px;\\n\\n @media (max-width: 576px) {\\n padding: 0;\\n width: 32px;\\n height: 32px;\\n background-color: bgLightGray1;\\n border-radius: 50%;\\n top: 12px;\\n right: 12px;\\n }\\n\"], [\"\\n cursor: pointer;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n position: absolute;\\n z-index: 1;\\n top: 32px;\\n right: 24px;\\n\\n @media (max-width: 576px) {\\n padding: 0;\\n width: 32px;\\n height: 32px;\\n background-color: bgLightGray1;\\n border-radius: 50%;\\n top: 12px;\\n right: 12px;\\n }\\n\"])));\nvar templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;\n//# sourceMappingURL=styles.js.map"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"styles.js","sources":["../../../../packages/ui/Blocks/Modal/styles.ts"],"sourcesContent":["import { __makeTemplateObject } from \"tslib\";\nimport styled, { th } from '@xstyled/styled-components';\nimport { createRgba } from '../../utils';\nexport var DialogOverlay = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject([\"\\n position: fixed; /* Stay in place */\\n z-index: 5;\\n left: 0;\\n top: 0;\\n width: 100%; /* Full width */\\n height: 100%; /* Full height */\\n overflow: auto; /* Enable scroll if needed */\\n background-color: \", \";\\n text-align: center;\\n @media print {\\n position: absolute !important;\\n left: 0 !important;\\n top: 0 !important;\\n height: auto !important;\\n visibility: hidden;\\n }\\n @media (max-width: 576px) {\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n }\\n\"], [\"\\n position: fixed; /* Stay in place */\\n z-index: 5;\\n left: 0;\\n top: 0;\\n width: 100%; /* Full width */\\n height: 100%; /* Full height */\\n overflow: auto; /* Enable scroll if needed */\\n background-color: \", \";\\n text-align: center;\\n @media print {\\n position: absolute !important;\\n left: 0 !important;\\n top: 0 !important;\\n height: auto !important;\\n visibility: hidden;\\n }\\n @media (max-width: 576px) {\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n }\\n\"])), function (_a) {\n var _b = _a.backgroundColor, backgroundColor = _b === void 0 ? 'blue2' : _b;\n return createRgba(backgroundColor, 0.6);\n});\nexport var DialogWindow = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject([\"\\n background-color: \", \";\\n margin: 100px auto 0 auto; /* Location of the box */\\n padding: 0;\\n border: 0;\\n border-radius: 1rem;\\n box-shadow: dialogShadow;\\n min-width: \", \";\\n max-width: \", \";\\n min-height: \", \";\\n max-height: \", \";\\n display: inline-block;\\n position: relative;\\n text-align: left;\\n @media print {\\n background-color: #fff;\\n margin: 0;\\n visibility: visible;\\n overflow: visible;\\n box-shadow: none;\\n max-width: 100%;\\n }\\n\\n @media (max-width: 576px) {\\n margin: 16px 0;\\n \", \";\\n }\\n\"], [\"\\n background-color: \", \";\\n margin: 100px auto 0 auto; /* Location of the box */\\n padding: 0;\\n border: 0;\\n border-radius: 1rem;\\n box-shadow: dialogShadow;\\n min-width: \", \";\\n max-width: \", \";\\n min-height: \", \";\\n max-height: \", \";\\n display: inline-block;\\n position: relative;\\n text-align: left;\\n @media print {\\n background-color: #fff;\\n margin: 0;\\n visibility: visible;\\n overflow: visible;\\n box-shadow: none;\\n max-width: 100%;\\n }\\n\\n @media (max-width: 576px) {\\n margin: 16px 0;\\n \", \";\\n }\\n\"])), function (_a) {\n var $whiteBg = _a.$whiteBg;\n return ($whiteBg ? th.color('white') : '#fefefe');\n}, function (_a) {\n var $minWidth = _a.$minWidth;\n return $minWidth || '10%';\n}, function (_a) {\n var $maxWidth = _a.$maxWidth;\n return $maxWidth || 'calc(100% - 32px)';\n}, function (_a) {\n var $minHeight = _a.$minHeight;\n return $minHeight || 'auto';\n}, function (_a) {\n var $maxHeight = _a.$maxHeight;\n return $maxHeight || 'auto';\n}, function (_a) {\n var $mobileFullscreen = _a.$mobileFullscreen;\n return $mobileFullscreen && 'border-radius: 0; max-width: 100% !important;';\n});\nexport var HeaderContainer = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject([\"\\n display: flex;\\n justify-content: space-between;\\n padding: 30px;\\n padding-bottom: \", \";\\n\\n @media (max-width: 576px) {\\n padding: 18px;\\n border-bottom: 1px solid \", \";\\n }\\n\"], [\"\\n display: flex;\\n justify-content: space-between;\\n padding: 30px;\\n padding-bottom: \", \";\\n\\n @media (max-width: 576px) {\\n padding: 18px;\\n border-bottom: 1px solid \", \";\\n }\\n\"])), function (_a) {\n var topSpace = _a.topSpace;\n return topSpace;\n}, th.color('lightGray6'));\nexport var ContentContainer = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject([\"\\n padding: 30px;\\n padding-top: \", \";\\n\\n @media (max-width: 576px) {\\n padding: \", \";\\n font-size: 16px;\\n line-height: 1.4;\\n }\\n\"], [\"\\n padding: 30px;\\n padding-top: \", \";\\n\\n @media (max-width: 576px) {\\n padding: \", \";\\n font-size: 16px;\\n line-height: 1.4;\\n }\\n\"])), function (_a) {\n var topSpace = _a.topSpace;\n return topSpace;\n}, function (_a) {\n var $mobileFullscreen = _a.$mobileFullscreen;\n return ($mobileFullscreen ? '0' : '18px');\n});\nexport var TitleContainer = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject([\"\\n display: flex;\\n flex-flow: row;\\n align-items: center;\\n > div:first-of-type {\\n margin-right: 0.5em;\\n display: block;\\n }\\n\\n .icon {\\n font-size: 24px;\\n margin-right: 15px;\\n display: flex;\\n\\n @media (max-width: 576px) {\\n font-size: 18px;\\n margin-right: 12px;\\n }\\n }\\n\"], [\"\\n display: flex;\\n flex-flow: row;\\n align-items: center;\\n > div:first-of-type {\\n margin-right: 0.5em;\\n display: block;\\n }\\n\\n .icon {\\n font-size: 24px;\\n margin-right: 15px;\\n display: flex;\\n\\n @media (max-width: 576px) {\\n font-size: 18px;\\n margin-right: 12px;\\n }\\n }\\n\"])));\nexport var H4 = styled.h4(templateObject_6 || (templateObject_6 = __makeTemplateObject([\"\\n color: typoPrimary;\\n margin: 0;\\n font-size: 24px;\\n line-height: 28px;\\n font-weight: 700;\\n\\n @media (max-width: 576px) {\\n font-size: 18px;\\n line-height: 18px;\\n }\\n\"], [\"\\n color: typoPrimary;\\n margin: 0;\\n font-size: 24px;\\n line-height: 28px;\\n font-weight: 700;\\n\\n @media (max-width: 576px) {\\n font-size: 18px;\\n line-height: 18px;\\n }\\n\"])));\nexport var ButtonsContainer = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject([\"\\n padding: 1.5rem;\\n text-align: right;\\n > * {\\n margin: 0 0.5em;\\n }\\n\\n @media (max-width: 576px) {\\n display: flex;\\n justify-content: space-around;\\n padding: 32px 18px 18px;\\n\\n > * {\\n margin: 0;\\n }\\n }\\n\"], [\"\\n padding: 1.5rem;\\n text-align: right;\\n > * {\\n margin: 0 0.5em;\\n }\\n\\n @media (max-width: 576px) {\\n display: flex;\\n justify-content: space-around;\\n padding: 32px 18px 18px;\\n\\n > * {\\n margin: 0;\\n }\\n }\\n\"])));\nexport var CloseButton = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject([\"\\n cursor: pointer;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n position: absolute;\\n z-index: 1;\\n top: 32px;\\n right: 24px;\\n\\n @media (max-width: 576px) {\\n padding: 0;\\n width: 32px;\\n height: 32px;\\n background-color: bgLightGray1;\\n border-radius: 50%;\\n top: 12px;\\n right: 12px;\\n }\\n\"], [\"\\n cursor: pointer;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n position: absolute;\\n z-index: 1;\\n top: 32px;\\n right: 24px;\\n\\n @media (max-width: 576px) {\\n padding: 0;\\n width: 32px;\\n height: 32px;\\n background-color: bgLightGray1;\\n border-radius: 50%;\\n top: 12px;\\n right: 12px;\\n }\\n\"])));\nvar templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;\n//# sourceMappingURL=styles.js.map"],"names":[],"mappings":"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"}
|
|
@@ -12,21 +12,21 @@ var StyledIcon = styled(Icon)(templateObject_3 || (templateObject_3 = __makeTemp
|
|
|
12
12
|
var $addMargin = _a.$addMargin;
|
|
13
13
|
return ($addMargin ? '0.5em' : '0');
|
|
14
14
|
});
|
|
15
|
-
var StyledButton = styled.button(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n width: ", ";\n ", "
|
|
15
|
+
var StyledButton = styled.button(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n width: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n height: 2.5em;\n border: slim;\n text-align: center;\n text-decoration: none;\n display: ", ";\n flex-direction: ", ";\n align-items: ", ";\n font-family: ", ";\n font-weight: semiBold;\n border-radius: lg;\n cursor: pointer;\n transition-duration: 0.1s;\n align-items: center;\n justify-content: center;\n transition: all 300ms ease-out;\n pointer-events: ", ";\n opacity: ", ";\n\n :disabled {\n color: lightGray5;\n }\n\n :focus {\n outline: none;\n }\n\n &[data-appearance='primary'] {\n background-color: red1;\n color: white;\n border-color: red1;\n\n @media (hover: hover) {\n &:hover {\n background-color: white;\n color: red1;\n border-color: red1;\n }\n }\n\n :active {\n background-color: red1;\n color: red1;\n border: none;\n }\n\n :disabled {\n background-color: bgLightGray;\n border-color: lightGray5;\n color: gray3;\n }\n }\n\n &[data-appearance='primaryLight'] {\n color: red1;\n background-color: red20;\n border-color: red20;\n\n @media (hover: hover) {\n &:hover {\n background-color: red1;\n color: white;\n border-color: red1;\n }\n }\n\n :active {\n background-color: red1;\n color: white;\n border-color: red1;\n }\n\n :disabled {\n background-color: bgLightGray;\n border-color: lightGray5;\n color: gray3;\n }\n }\n\n &[data-appearance='success'] {\n background-color: successColor;\n color: white;\n border-color: successColor;\n\n @media (hover: hover) {\n &:hover {\n background-color: white;\n color: successColor;\n }\n }\n\n :active {\n background-color: white;\n color: successColor;\n }\n\n :disabled {\n background-color: bgLightGray;\n border-color: lightGray5;\n color: gray3;\n }\n }\n\n &[data-appearance='secondary'] {\n background-color: white;\n color: red1;\n border-color: red1;\n\n @media (hover: hover) {\n &:hover {\n background-color: red1;\n color: white;\n border-color: red1;\n }\n }\n\n :active {\n background-color: red1;\n color: red1;\n border-color: red1;\n }\n\n :disabled {\n background-color: white;\n border-color: lightGray7;\n }\n }\n\n &[data-appearance='secondaryLg'] {\n background-color: white;\n color: typoPrimary;\n border-color: blue2;\n\n @media (hover: hover) {\n &:hover {\n background-color: blue2;\n color: white;\n border-color: blue2;\n }\n }\n\n :active {\n background-color: gray;\n color: white;\n border: none;\n }\n\n :disabled {\n background-color: white;\n border-color: bgLightGray1;\n }\n }\n\n &[data-appearance='primaryLg'] {\n background-color: blue2;\n color: white;\n border-color: blue2;\n\n @media (hover: hover) {\n &:hover {\n background-color: white;\n color: typoPrimary;\n border-color: blue2;\n }\n }\n\n :active {\n background-color: gray;\n color: white;\n border: none;\n }\n\n :disabled {\n background-color: bgLightGray1;\n border-color: bgLightGray1;\n }\n }\n\n &[data-appearance='minimal'] {\n background-color: transparent;\n border: none !important;\n color: blue2;\n\n :disabled {\n color: blue2;\n }\n }\n\n &[data-appearance='minimalRed'] {\n background-color: transparent;\n border: none !important;\n color: red1;\n\n @media (hover: hover) {\n &:hover {\n color: red3;\n svg {\n fill: red3 !important;\n }\n }\n }\n\n :disabled,\n :active {\n color: red3;\n svg {\n fill: red3 !important;\n }\n }\n }\n\n &[data-sizing='icon'] {\n aspect-ratio: 4 / 3;\n padding: 0.5em 0.875em;\n }\n\n &[data-sizing='iconLg'] {\n min-width: 42px;\n min-height: 38px;\n padding: 0.5em 0.875em;\n svg {\n height: 16px;\n }\n }\n\n &[data-sizing='normal'] {\n min-width: 7rem;\n padding: 12px 18px;\n min-height: 38px;\n line-height: 14px;\n font-size: 14px;\n }\n\n &[data-sizing='large'] {\n min-width: 12rem;\n padding: 0.75em 1.5em;\n min-height: 34px;\n font-size: 12px;\n }\n\n &[data-sizing='grid'] {\n min-width: 5rem;\n padding: 0.5em 1.25em;\n font-size: 10px;\n border-radius: 5px;\n }\n"], ["\n width: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n height: 2.5em;\n border: slim;\n text-align: center;\n text-decoration: none;\n display: ", ";\n flex-direction: ", ";\n align-items: ", ";\n font-family: ", ";\n font-weight: semiBold;\n border-radius: lg;\n cursor: pointer;\n transition-duration: 0.1s;\n align-items: center;\n justify-content: center;\n transition: all 300ms ease-out;\n pointer-events: ", ";\n opacity: ", ";\n\n :disabled {\n color: lightGray5;\n }\n\n :focus {\n outline: none;\n }\n\n &[data-appearance='primary'] {\n background-color: red1;\n color: white;\n border-color: red1;\n\n @media (hover: hover) {\n &:hover {\n background-color: white;\n color: red1;\n border-color: red1;\n }\n }\n\n :active {\n background-color: red1;\n color: red1;\n border: none;\n }\n\n :disabled {\n background-color: bgLightGray;\n border-color: lightGray5;\n color: gray3;\n }\n }\n\n &[data-appearance='primaryLight'] {\n color: red1;\n background-color: red20;\n border-color: red20;\n\n @media (hover: hover) {\n &:hover {\n background-color: red1;\n color: white;\n border-color: red1;\n }\n }\n\n :active {\n background-color: red1;\n color: white;\n border-color: red1;\n }\n\n :disabled {\n background-color: bgLightGray;\n border-color: lightGray5;\n color: gray3;\n }\n }\n\n &[data-appearance='success'] {\n background-color: successColor;\n color: white;\n border-color: successColor;\n\n @media (hover: hover) {\n &:hover {\n background-color: white;\n color: successColor;\n }\n }\n\n :active {\n background-color: white;\n color: successColor;\n }\n\n :disabled {\n background-color: bgLightGray;\n border-color: lightGray5;\n color: gray3;\n }\n }\n\n &[data-appearance='secondary'] {\n background-color: white;\n color: red1;\n border-color: red1;\n\n @media (hover: hover) {\n &:hover {\n background-color: red1;\n color: white;\n border-color: red1;\n }\n }\n\n :active {\n background-color: red1;\n color: red1;\n border-color: red1;\n }\n\n :disabled {\n background-color: white;\n border-color: lightGray7;\n }\n }\n\n &[data-appearance='secondaryLg'] {\n background-color: white;\n color: typoPrimary;\n border-color: blue2;\n\n @media (hover: hover) {\n &:hover {\n background-color: blue2;\n color: white;\n border-color: blue2;\n }\n }\n\n :active {\n background-color: gray;\n color: white;\n border: none;\n }\n\n :disabled {\n background-color: white;\n border-color: bgLightGray1;\n }\n }\n\n &[data-appearance='primaryLg'] {\n background-color: blue2;\n color: white;\n border-color: blue2;\n\n @media (hover: hover) {\n &:hover {\n background-color: white;\n color: typoPrimary;\n border-color: blue2;\n }\n }\n\n :active {\n background-color: gray;\n color: white;\n border: none;\n }\n\n :disabled {\n background-color: bgLightGray1;\n border-color: bgLightGray1;\n }\n }\n\n &[data-appearance='minimal'] {\n background-color: transparent;\n border: none !important;\n color: blue2;\n\n :disabled {\n color: blue2;\n }\n }\n\n &[data-appearance='minimalRed'] {\n background-color: transparent;\n border: none !important;\n color: red1;\n\n @media (hover: hover) {\n &:hover {\n color: red3;\n svg {\n fill: red3 !important;\n }\n }\n }\n\n :disabled,\n :active {\n color: red3;\n svg {\n fill: red3 !important;\n }\n }\n }\n\n &[data-sizing='icon'] {\n aspect-ratio: 4 / 3;\n padding: 0.5em 0.875em;\n }\n\n &[data-sizing='iconLg'] {\n min-width: 42px;\n min-height: 38px;\n padding: 0.5em 0.875em;\n svg {\n height: 16px;\n }\n }\n\n &[data-sizing='normal'] {\n min-width: 7rem;\n padding: 12px 18px;\n min-height: 38px;\n line-height: 14px;\n font-size: 14px;\n }\n\n &[data-sizing='large'] {\n min-width: 12rem;\n padding: 0.75em 1.5em;\n min-height: 34px;\n font-size: 12px;\n }\n\n &[data-sizing='grid'] {\n min-width: 5rem;\n padding: 0.5em 1.25em;\n font-size: 10px;\n border-radius: 5px;\n }\n"])), function (_a) {
|
|
16
16
|
var fullWidth = _a.fullWidth;
|
|
17
17
|
return (fullWidth ? '100%' : 'initial');
|
|
18
18
|
}, function (_a) {
|
|
19
19
|
var mt = _a.mt;
|
|
20
|
-
return
|
|
20
|
+
return mt || 0;
|
|
21
21
|
}, function (_a) {
|
|
22
22
|
var mr = _a.mr;
|
|
23
|
-
return
|
|
23
|
+
return mr || 0;
|
|
24
24
|
}, function (_a) {
|
|
25
25
|
var mb = _a.mb;
|
|
26
|
-
return
|
|
26
|
+
return mb || 0;
|
|
27
27
|
}, function (_a) {
|
|
28
28
|
var ml = _a.ml;
|
|
29
|
-
return
|
|
29
|
+
return ml || 0;
|
|
30
30
|
}, function (_a) {
|
|
31
31
|
var columnAlign = _a.columnAlign;
|
|
32
32
|
return (columnAlign ? 'flex' : 'inline-flex');
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sources":["../../../../packages/ui/Elements/Button/styles.ts"],"sourcesContent":["import { __makeTemplateObject } from \"tslib\";\nimport { th } from '@xstyled/styled-components';\nimport styled from '@xstyled/styled-components';\nimport { Icon } from '../Icon';\nexport var StyledWrapper = styled.span(templateObject_1 || (templateObject_1 = __makeTemplateObject([\"\\n display: flex;\\n justify-content: center;\\n align-items: center;\\n\"], [\"\\n display: flex;\\n justify-content: center;\\n align-items: center;\\n\"])));\nexport var LoadingIconWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject([\"\\n & svg {\\n margin-right: \", \";\\n }\\n\"], [\"\\n & svg {\\n margin-right: \", \";\\n }\\n\"])), function (_a) {\n var $addMargin = _a.$addMargin;\n return ($addMargin ? '0.5em' : '0');\n});\nexport var StyledIcon = styled(Icon)(templateObject_3 || (templateObject_3 = __makeTemplateObject([\"\\n & svg {\\n height: 1em;\\n margin-right: \", \";\\n }\\n\"], [\"\\n & svg {\\n height: 1em;\\n margin-right: \", \";\\n }\\n\"])), function (_a) {\n var $addMargin = _a.$addMargin;\n return ($addMargin ? '0.5em' : '0');\n});\nexport var StyledButton = styled.button(templateObject_4 || (templateObject_4 = __makeTemplateObject([\"\\n width: \", \";\\n \", \"\\n \", \"\\n \", \"\\n \", \"\\n height: 2.5em;\\n border: slim;\\n text-align: center;\\n text-decoration: none;\\n display: \", \";\\n flex-direction: \", \";\\n align-items: \", \";\\n font-family: \", \";\\n font-weight: semiBold;\\n border-radius: lg;\\n cursor: pointer;\\n transition-duration: 0.1s;\\n align-items: center;\\n justify-content: center;\\n transition: all 300ms ease-out;\\n pointer-events: \", \";\\n opacity: \", \";\\n\\n :disabled {\\n color: lightGray5;\\n }\\n\\n :focus {\\n outline: none;\\n }\\n\\n &[data-appearance='primary'] {\\n background-color: red1;\\n color: white;\\n border-color: red1;\\n\\n @media (hover: hover) {\\n &:hover {\\n background-color: white;\\n color: red1;\\n border-color: red1;\\n }\\n }\\n\\n :active {\\n background-color: red1;\\n color: red1;\\n border: none;\\n }\\n\\n :disabled {\\n background-color: bgLightGray;\\n border-color: lightGray5;\\n color: gray3;\\n }\\n }\\n\\n &[data-appearance='primaryLight'] {\\n color: red1;\\n background-color: red20;\\n border-color: red20;\\n\\n @media (hover: hover) {\\n &:hover {\\n background-color: red1;\\n color: white;\\n border-color: red1;\\n }\\n }\\n\\n :active {\\n background-color: red1;\\n color: white;\\n border-color: red1;\\n }\\n\\n :disabled {\\n background-color: bgLightGray;\\n border-color: lightGray5;\\n color: gray3;\\n }\\n }\\n\\n &[data-appearance='success'] {\\n background-color: successColor;\\n color: white;\\n border-color: successColor;\\n\\n @media (hover: hover) {\\n &:hover {\\n background-color: white;\\n color: successColor;\\n }\\n }\\n\\n :active {\\n background-color: white;\\n color: successColor;\\n }\\n\\n :disabled {\\n background-color: bgLightGray;\\n border-color: lightGray5;\\n color: gray3;\\n }\\n }\\n\\n &[data-appearance='secondary'] {\\n background-color: white;\\n color: red1;\\n border-color: red1;\\n\\n @media (hover: hover) {\\n &:hover {\\n background-color: red1;\\n color: white;\\n border-color: red1;\\n }\\n }\\n\\n :active {\\n background-color: red1;\\n color: red1;\\n border-color: red1;\\n }\\n\\n :disabled {\\n background-color: white;\\n border-color: lightGray7;\\n }\\n }\\n\\n &[data-appearance='secondaryLg'] {\\n background-color: white;\\n color: typoPrimary;\\n border-color: blue2;\\n\\n @media (hover: hover) {\\n &:hover {\\n background-color: blue2;\\n color: white;\\n border-color: blue2;\\n }\\n }\\n\\n :active {\\n background-color: gray;\\n color: white;\\n border: none;\\n }\\n\\n :disabled {\\n background-color: white;\\n border-color: bgLightGray1;\\n }\\n }\\n\\n &[data-appearance='primaryLg'] {\\n background-color: blue2;\\n color: white;\\n border-color: blue2;\\n\\n @media (hover: hover) {\\n &:hover {\\n background-color: white;\\n color: typoPrimary;\\n border-color: blue2;\\n }\\n }\\n\\n :active {\\n background-color: gray;\\n color: white;\\n border: none;\\n }\\n\\n :disabled {\\n background-color: bgLightGray1;\\n border-color: bgLightGray1;\\n }\\n }\\n\\n &[data-appearance='minimal'] {\\n background-color: transparent;\\n border: none !important;\\n color: blue2;\\n\\n :disabled {\\n color: blue2;\\n }\\n }\\n\\n &[data-appearance='minimalRed'] {\\n background-color: transparent;\\n border: none !important;\\n color: red1;\\n\\n @media (hover: hover) {\\n &:hover {\\n color: red3;\\n svg {\\n fill: red3 !important;\\n }\\n }\\n }\\n \\n :disabled,\\n :active {\\n color: red3;\\n svg {\\n fill: red3 !important;\\n }\\n }\\n }\\n\\n &[data-sizing='icon'] {\\n aspect-ratio: 4 / 3;\\n padding: 0.5em 0.875em;\\n }\\n\\n &[data-sizing='iconLg'] {\\n min-width: 42px;\\n min-height: 38px;\\n padding: 0.5em 0.875em;\\n svg {\\n height: 16px;\\n }\\n }\\n\\n &[data-sizing='normal'] {\\n min-width: 7rem;\\n padding: 12px 18px;\\n min-height: 38px;\\n line-height: 14px;\\n font-size: 14px;\\n }\\n\\n &[data-sizing='large'] {\\n min-width: 12rem;\\n padding: 0.75em 1.5em;\\n min-height: 34px;\\n font-size: 12px;\\n }\\n\\n &[data-sizing='grid'] {\\n min-width: 5rem;\\n padding: 0.5em 1.25em;\\n font-size: 10px;\\n border-radius: 5px;\\n }\\n\"], [\"\\n width: \", \";\\n \", \"\\n \", \"\\n \", \"\\n \", \"\\n height: 2.5em;\\n border: slim;\\n text-align: center;\\n text-decoration: none;\\n display: \", \";\\n flex-direction: \", \";\\n align-items: \", \";\\n font-family: \", \";\\n font-weight: semiBold;\\n border-radius: lg;\\n cursor: pointer;\\n transition-duration: 0.1s;\\n align-items: center;\\n justify-content: center;\\n transition: all 300ms ease-out;\\n pointer-events: \", \";\\n opacity: \", \";\\n\\n :disabled {\\n color: lightGray5;\\n }\\n\\n :focus {\\n outline: none;\\n }\\n\\n &[data-appearance='primary'] {\\n background-color: red1;\\n color: white;\\n border-color: red1;\\n\\n @media (hover: hover) {\\n &:hover {\\n background-color: white;\\n color: red1;\\n border-color: red1;\\n }\\n }\\n\\n :active {\\n background-color: red1;\\n color: red1;\\n border: none;\\n }\\n\\n :disabled {\\n background-color: bgLightGray;\\n border-color: lightGray5;\\n color: gray3;\\n }\\n }\\n\\n &[data-appearance='primaryLight'] {\\n color: red1;\\n background-color: red20;\\n border-color: red20;\\n\\n @media (hover: hover) {\\n &:hover {\\n background-color: red1;\\n color: white;\\n border-color: red1;\\n }\\n }\\n\\n :active {\\n background-color: red1;\\n color: white;\\n border-color: red1;\\n }\\n\\n :disabled {\\n background-color: bgLightGray;\\n border-color: lightGray5;\\n color: gray3;\\n }\\n }\\n\\n &[data-appearance='success'] {\\n background-color: successColor;\\n color: white;\\n border-color: successColor;\\n\\n @media (hover: hover) {\\n &:hover {\\n background-color: white;\\n color: successColor;\\n }\\n }\\n\\n :active {\\n background-color: white;\\n color: successColor;\\n }\\n\\n :disabled {\\n background-color: bgLightGray;\\n border-color: lightGray5;\\n color: gray3;\\n }\\n }\\n\\n &[data-appearance='secondary'] {\\n background-color: white;\\n color: red1;\\n border-color: red1;\\n\\n @media (hover: hover) {\\n &:hover {\\n background-color: red1;\\n color: white;\\n border-color: red1;\\n }\\n }\\n\\n :active {\\n background-color: red1;\\n color: red1;\\n border-color: red1;\\n }\\n\\n :disabled {\\n background-color: white;\\n border-color: lightGray7;\\n }\\n }\\n\\n &[data-appearance='secondaryLg'] {\\n background-color: white;\\n color: typoPrimary;\\n border-color: blue2;\\n\\n @media (hover: hover) {\\n &:hover {\\n background-color: blue2;\\n color: white;\\n border-color: blue2;\\n }\\n }\\n\\n :active {\\n background-color: gray;\\n color: white;\\n border: none;\\n }\\n\\n :disabled {\\n background-color: white;\\n border-color: bgLightGray1;\\n }\\n }\\n\\n &[data-appearance='primaryLg'] {\\n background-color: blue2;\\n color: white;\\n border-color: blue2;\\n\\n @media (hover: hover) {\\n &:hover {\\n background-color: white;\\n color: typoPrimary;\\n border-color: blue2;\\n }\\n }\\n\\n :active {\\n background-color: gray;\\n color: white;\\n border: none;\\n }\\n\\n :disabled {\\n background-color: bgLightGray1;\\n border-color: bgLightGray1;\\n }\\n }\\n\\n &[data-appearance='minimal'] {\\n background-color: transparent;\\n border: none !important;\\n color: blue2;\\n\\n :disabled {\\n color: blue2;\\n }\\n }\\n\\n &[data-appearance='minimalRed'] {\\n background-color: transparent;\\n border: none !important;\\n color: red1;\\n\\n @media (hover: hover) {\\n &:hover {\\n color: red3;\\n svg {\\n fill: red3 !important;\\n }\\n }\\n }\\n \\n :disabled,\\n :active {\\n color: red3;\\n svg {\\n fill: red3 !important;\\n }\\n }\\n }\\n\\n &[data-sizing='icon'] {\\n aspect-ratio: 4 / 3;\\n padding: 0.5em 0.875em;\\n }\\n\\n &[data-sizing='iconLg'] {\\n min-width: 42px;\\n min-height: 38px;\\n padding: 0.5em 0.875em;\\n svg {\\n height: 16px;\\n }\\n }\\n\\n &[data-sizing='normal'] {\\n min-width: 7rem;\\n padding: 12px 18px;\\n min-height: 38px;\\n line-height: 14px;\\n font-size: 14px;\\n }\\n\\n &[data-sizing='large'] {\\n min-width: 12rem;\\n padding: 0.75em 1.5em;\\n min-height: 34px;\\n font-size: 12px;\\n }\\n\\n &[data-sizing='grid'] {\\n min-width: 5rem;\\n padding: 0.5em 1.25em;\\n font-size: 10px;\\n border-radius: 5px;\\n }\\n\"])), function (_a) {\n var fullWidth = _a.fullWidth;\n return (fullWidth ? '100%' : 'initial');\n}, function (_a) {\n var mt = _a.mt;\n return (mt ? 'margin-top: 0;' : '');\n}, function (_a) {\n var mr = _a.mr;\n return (mr ? 'margin-right: 0;' : '');\n}, function (_a) {\n var mb = _a.mb;\n return (mb ? 'margin-bottom: 0;' : '');\n}, function (_a) {\n var ml = _a.ml;\n return (ml ? 'margin-left: 0;' : '');\n}, function (_a) {\n var columnAlign = _a.columnAlign;\n return (columnAlign ? 'flex' : 'inline-flex');\n}, function (_a) {\n var columnAlign = _a.columnAlign;\n return (columnAlign ? 'column' : 'auto');\n}, function (_a) {\n var columnAlign = _a.columnAlign;\n return (columnAlign ? 'center' : 'auto');\n}, th('fonts.primary'), function (_a) {\n var disabled = _a.disabled;\n return (disabled ? 'none' : 'auto');\n}, function (_a) {\n var disabled = _a.disabled;\n return (disabled ? '0.6' : '1');\n});\nvar templateObject_1, templateObject_2, templateObject_3, templateObject_4;\n//# sourceMappingURL=styles.js.map"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"styles.js","sources":["../../../../packages/ui/Elements/Button/styles.ts"],"sourcesContent":["import { __makeTemplateObject } from \"tslib\";\nimport { th } from '@xstyled/styled-components';\nimport styled from '@xstyled/styled-components';\nimport { Icon } from '../Icon';\nexport var StyledWrapper = styled.span(templateObject_1 || (templateObject_1 = __makeTemplateObject([\"\\n display: flex;\\n justify-content: center;\\n align-items: center;\\n\"], [\"\\n display: flex;\\n justify-content: center;\\n align-items: center;\\n\"])));\nexport var LoadingIconWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject([\"\\n & svg {\\n margin-right: \", \";\\n }\\n\"], [\"\\n & svg {\\n margin-right: \", \";\\n }\\n\"])), function (_a) {\n var $addMargin = _a.$addMargin;\n return ($addMargin ? '0.5em' : '0');\n});\nexport var StyledIcon = styled(Icon)(templateObject_3 || (templateObject_3 = __makeTemplateObject([\"\\n & svg {\\n height: 1em;\\n margin-right: \", \";\\n }\\n\"], [\"\\n & svg {\\n height: 1em;\\n margin-right: \", \";\\n }\\n\"])), function (_a) {\n var $addMargin = _a.$addMargin;\n return ($addMargin ? '0.5em' : '0');\n});\nexport var StyledButton = styled.button(templateObject_4 || (templateObject_4 = __makeTemplateObject([\"\\n width: \", \";\\n margin-top: \", \";\\n margin-right: \", \";\\n margin-bottom: \", \";\\n margin-left: \", \";\\n height: 2.5em;\\n border: slim;\\n text-align: center;\\n text-decoration: none;\\n display: \", \";\\n flex-direction: \", \";\\n align-items: \", \";\\n font-family: \", \";\\n font-weight: semiBold;\\n border-radius: lg;\\n cursor: pointer;\\n transition-duration: 0.1s;\\n align-items: center;\\n justify-content: center;\\n transition: all 300ms ease-out;\\n pointer-events: \", \";\\n opacity: \", \";\\n\\n :disabled {\\n color: lightGray5;\\n }\\n\\n :focus {\\n outline: none;\\n }\\n\\n &[data-appearance='primary'] {\\n background-color: red1;\\n color: white;\\n border-color: red1;\\n\\n @media (hover: hover) {\\n &:hover {\\n background-color: white;\\n color: red1;\\n border-color: red1;\\n }\\n }\\n\\n :active {\\n background-color: red1;\\n color: red1;\\n border: none;\\n }\\n\\n :disabled {\\n background-color: bgLightGray;\\n border-color: lightGray5;\\n color: gray3;\\n }\\n }\\n\\n &[data-appearance='primaryLight'] {\\n color: red1;\\n background-color: red20;\\n border-color: red20;\\n\\n @media (hover: hover) {\\n &:hover {\\n background-color: red1;\\n color: white;\\n border-color: red1;\\n }\\n }\\n\\n :active {\\n background-color: red1;\\n color: white;\\n border-color: red1;\\n }\\n\\n :disabled {\\n background-color: bgLightGray;\\n border-color: lightGray5;\\n color: gray3;\\n }\\n }\\n\\n &[data-appearance='success'] {\\n background-color: successColor;\\n color: white;\\n border-color: successColor;\\n\\n @media (hover: hover) {\\n &:hover {\\n background-color: white;\\n color: successColor;\\n }\\n }\\n\\n :active {\\n background-color: white;\\n color: successColor;\\n }\\n\\n :disabled {\\n background-color: bgLightGray;\\n border-color: lightGray5;\\n color: gray3;\\n }\\n }\\n\\n &[data-appearance='secondary'] {\\n background-color: white;\\n color: red1;\\n border-color: red1;\\n\\n @media (hover: hover) {\\n &:hover {\\n background-color: red1;\\n color: white;\\n border-color: red1;\\n }\\n }\\n\\n :active {\\n background-color: red1;\\n color: red1;\\n border-color: red1;\\n }\\n\\n :disabled {\\n background-color: white;\\n border-color: lightGray7;\\n }\\n }\\n\\n &[data-appearance='secondaryLg'] {\\n background-color: white;\\n color: typoPrimary;\\n border-color: blue2;\\n\\n @media (hover: hover) {\\n &:hover {\\n background-color: blue2;\\n color: white;\\n border-color: blue2;\\n }\\n }\\n\\n :active {\\n background-color: gray;\\n color: white;\\n border: none;\\n }\\n\\n :disabled {\\n background-color: white;\\n border-color: bgLightGray1;\\n }\\n }\\n\\n &[data-appearance='primaryLg'] {\\n background-color: blue2;\\n color: white;\\n border-color: blue2;\\n\\n @media (hover: hover) {\\n &:hover {\\n background-color: white;\\n color: typoPrimary;\\n border-color: blue2;\\n }\\n }\\n\\n :active {\\n background-color: gray;\\n color: white;\\n border: none;\\n }\\n\\n :disabled {\\n background-color: bgLightGray1;\\n border-color: bgLightGray1;\\n }\\n }\\n\\n &[data-appearance='minimal'] {\\n background-color: transparent;\\n border: none !important;\\n color: blue2;\\n\\n :disabled {\\n color: blue2;\\n }\\n }\\n\\n &[data-appearance='minimalRed'] {\\n background-color: transparent;\\n border: none !important;\\n color: red1;\\n\\n @media (hover: hover) {\\n &:hover {\\n color: red3;\\n svg {\\n fill: red3 !important;\\n }\\n }\\n }\\n\\n :disabled,\\n :active {\\n color: red3;\\n svg {\\n fill: red3 !important;\\n }\\n }\\n }\\n\\n &[data-sizing='icon'] {\\n aspect-ratio: 4 / 3;\\n padding: 0.5em 0.875em;\\n }\\n\\n &[data-sizing='iconLg'] {\\n min-width: 42px;\\n min-height: 38px;\\n padding: 0.5em 0.875em;\\n svg {\\n height: 16px;\\n }\\n }\\n\\n &[data-sizing='normal'] {\\n min-width: 7rem;\\n padding: 12px 18px;\\n min-height: 38px;\\n line-height: 14px;\\n font-size: 14px;\\n }\\n\\n &[data-sizing='large'] {\\n min-width: 12rem;\\n padding: 0.75em 1.5em;\\n min-height: 34px;\\n font-size: 12px;\\n }\\n\\n &[data-sizing='grid'] {\\n min-width: 5rem;\\n padding: 0.5em 1.25em;\\n font-size: 10px;\\n border-radius: 5px;\\n }\\n\"], [\"\\n width: \", \";\\n margin-top: \", \";\\n margin-right: \", \";\\n margin-bottom: \", \";\\n margin-left: \", \";\\n height: 2.5em;\\n border: slim;\\n text-align: center;\\n text-decoration: none;\\n display: \", \";\\n flex-direction: \", \";\\n align-items: \", \";\\n font-family: \", \";\\n font-weight: semiBold;\\n border-radius: lg;\\n cursor: pointer;\\n transition-duration: 0.1s;\\n align-items: center;\\n justify-content: center;\\n transition: all 300ms ease-out;\\n pointer-events: \", \";\\n opacity: \", \";\\n\\n :disabled {\\n color: lightGray5;\\n }\\n\\n :focus {\\n outline: none;\\n }\\n\\n &[data-appearance='primary'] {\\n background-color: red1;\\n color: white;\\n border-color: red1;\\n\\n @media (hover: hover) {\\n &:hover {\\n background-color: white;\\n color: red1;\\n border-color: red1;\\n }\\n }\\n\\n :active {\\n background-color: red1;\\n color: red1;\\n border: none;\\n }\\n\\n :disabled {\\n background-color: bgLightGray;\\n border-color: lightGray5;\\n color: gray3;\\n }\\n }\\n\\n &[data-appearance='primaryLight'] {\\n color: red1;\\n background-color: red20;\\n border-color: red20;\\n\\n @media (hover: hover) {\\n &:hover {\\n background-color: red1;\\n color: white;\\n border-color: red1;\\n }\\n }\\n\\n :active {\\n background-color: red1;\\n color: white;\\n border-color: red1;\\n }\\n\\n :disabled {\\n background-color: bgLightGray;\\n border-color: lightGray5;\\n color: gray3;\\n }\\n }\\n\\n &[data-appearance='success'] {\\n background-color: successColor;\\n color: white;\\n border-color: successColor;\\n\\n @media (hover: hover) {\\n &:hover {\\n background-color: white;\\n color: successColor;\\n }\\n }\\n\\n :active {\\n background-color: white;\\n color: successColor;\\n }\\n\\n :disabled {\\n background-color: bgLightGray;\\n border-color: lightGray5;\\n color: gray3;\\n }\\n }\\n\\n &[data-appearance='secondary'] {\\n background-color: white;\\n color: red1;\\n border-color: red1;\\n\\n @media (hover: hover) {\\n &:hover {\\n background-color: red1;\\n color: white;\\n border-color: red1;\\n }\\n }\\n\\n :active {\\n background-color: red1;\\n color: red1;\\n border-color: red1;\\n }\\n\\n :disabled {\\n background-color: white;\\n border-color: lightGray7;\\n }\\n }\\n\\n &[data-appearance='secondaryLg'] {\\n background-color: white;\\n color: typoPrimary;\\n border-color: blue2;\\n\\n @media (hover: hover) {\\n &:hover {\\n background-color: blue2;\\n color: white;\\n border-color: blue2;\\n }\\n }\\n\\n :active {\\n background-color: gray;\\n color: white;\\n border: none;\\n }\\n\\n :disabled {\\n background-color: white;\\n border-color: bgLightGray1;\\n }\\n }\\n\\n &[data-appearance='primaryLg'] {\\n background-color: blue2;\\n color: white;\\n border-color: blue2;\\n\\n @media (hover: hover) {\\n &:hover {\\n background-color: white;\\n color: typoPrimary;\\n border-color: blue2;\\n }\\n }\\n\\n :active {\\n background-color: gray;\\n color: white;\\n border: none;\\n }\\n\\n :disabled {\\n background-color: bgLightGray1;\\n border-color: bgLightGray1;\\n }\\n }\\n\\n &[data-appearance='minimal'] {\\n background-color: transparent;\\n border: none !important;\\n color: blue2;\\n\\n :disabled {\\n color: blue2;\\n }\\n }\\n\\n &[data-appearance='minimalRed'] {\\n background-color: transparent;\\n border: none !important;\\n color: red1;\\n\\n @media (hover: hover) {\\n &:hover {\\n color: red3;\\n svg {\\n fill: red3 !important;\\n }\\n }\\n }\\n\\n :disabled,\\n :active {\\n color: red3;\\n svg {\\n fill: red3 !important;\\n }\\n }\\n }\\n\\n &[data-sizing='icon'] {\\n aspect-ratio: 4 / 3;\\n padding: 0.5em 0.875em;\\n }\\n\\n &[data-sizing='iconLg'] {\\n min-width: 42px;\\n min-height: 38px;\\n padding: 0.5em 0.875em;\\n svg {\\n height: 16px;\\n }\\n }\\n\\n &[data-sizing='normal'] {\\n min-width: 7rem;\\n padding: 12px 18px;\\n min-height: 38px;\\n line-height: 14px;\\n font-size: 14px;\\n }\\n\\n &[data-sizing='large'] {\\n min-width: 12rem;\\n padding: 0.75em 1.5em;\\n min-height: 34px;\\n font-size: 12px;\\n }\\n\\n &[data-sizing='grid'] {\\n min-width: 5rem;\\n padding: 0.5em 1.25em;\\n font-size: 10px;\\n border-radius: 5px;\\n }\\n\"])), function (_a) {\n var fullWidth = _a.fullWidth;\n return (fullWidth ? '100%' : 'initial');\n}, function (_a) {\n var mt = _a.mt;\n return mt || 0;\n}, function (_a) {\n var mr = _a.mr;\n return mr || 0;\n}, function (_a) {\n var mb = _a.mb;\n return mb || 0;\n}, function (_a) {\n var ml = _a.ml;\n return ml || 0;\n}, function (_a) {\n var columnAlign = _a.columnAlign;\n return (columnAlign ? 'flex' : 'inline-flex');\n}, function (_a) {\n var columnAlign = _a.columnAlign;\n return (columnAlign ? 'column' : 'auto');\n}, function (_a) {\n var columnAlign = _a.columnAlign;\n return (columnAlign ? 'center' : 'auto');\n}, th('fonts.primary'), function (_a) {\n var disabled = _a.disabled;\n return (disabled ? 'none' : 'auto');\n}, function (_a) {\n var disabled = _a.disabled;\n return (disabled ? '0.6' : '1');\n});\nvar templateObject_1, templateObject_2, templateObject_3, templateObject_4;\n//# sourceMappingURL=styles.js.map"],"names":[],"mappings":"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"}
|
|
@@ -14,10 +14,10 @@ type Props = React.HTMLProps<HTMLButtonElement> & {
|
|
|
14
14
|
icon?: string | JSX.Element;
|
|
15
15
|
type?: 'button' | 'submit' | 'reset';
|
|
16
16
|
fullWidth?: boolean;
|
|
17
|
-
mt?: string
|
|
18
|
-
mr?: string
|
|
19
|
-
mb?: string
|
|
20
|
-
ml?: string
|
|
17
|
+
mt?: string;
|
|
18
|
+
mr?: string;
|
|
19
|
+
mb?: string;
|
|
20
|
+
ml?: string;
|
|
21
21
|
};
|
|
22
22
|
|
|
23
23
|
export { AppearanceValue, Props, SizingValue };
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { __assign } from 'tslib';
|
|
2
|
+
import { jsx } from 'react/jsx-runtime';
|
|
3
|
+
|
|
4
|
+
var BarcodeScan = function (props) { return (jsx("svg", __assign({ width: "24", height: "16", viewBox: "0 0 24 16", fill: "#22394E", xmlns: "http://www.w3.org/2000/svg" }, props, { children: jsx("path", { d: "M3.3 -6.10352e-05C2.80125 -6.10352e-05 2.4 0.382082 2.4 0.857082V5.71422H4.2V0.857082C4.2 0.382082 3.79875 -6.10352e-05 3.3 -6.10352e-05ZM2.4 15.1428C2.4 15.6178 2.80125 15.9999 3.3 15.9999C3.79875 15.9999 4.2 15.6178 4.2 15.1428V10.2857H2.4V15.1428ZM6 15.4285C6 15.7428 6.27 15.9999 6.6 15.9999C6.93 15.9999 7.2 15.7428 7.2 15.4285V10.2857H6V15.4285ZM8.4 15.1428C8.4 15.6178 8.80125 15.9999 9.3 15.9999C9.79875 15.9999 10.2 15.6178 10.2 15.1428V10.2857H8.4V15.1428ZM8.4 0.857082V5.71422H10.2V0.857082C10.2 0.382082 9.79875 -6.10352e-05 9.3 -6.10352e-05C8.80125 -6.10352e-05 8.4 0.382082 8.4 0.857082ZM12.6 15.1428C12.6 15.6178 13.0013 15.9999 13.5 15.9999C13.9988 15.9999 14.4 15.6178 14.4 15.1428V10.2857H12.6V15.1428ZM12.6 0.857082V5.71422H14.4V0.857082C14.4 0.382082 13.9988 -6.10352e-05 13.5 -6.10352e-05C13.0013 -6.10352e-05 12.6 0.382082 12.6 0.857082ZM17.4 15.4285C17.4 15.7428 17.67 15.9999 18 15.9999C18.33 15.9999 18.6 15.7428 18.6 15.4285V10.2857H17.4V15.4285ZM17.4 0.571368V5.71422H18.6V0.571368C18.6 0.257082 18.33 -6.10352e-05 18 -6.10352e-05C17.67 -6.10352e-05 17.4 0.257082 17.4 0.571368ZM19.8 15.1428C19.8 15.6178 20.2013 15.9999 20.7 15.9999C21.1988 15.9999 21.6 15.6178 21.6 15.1428V10.2857H19.8V15.1428ZM19.8 0.857082V5.71422H21.6V0.857082C21.6 0.382082 21.1988 -6.10352e-05 20.7 -6.10352e-05C20.2013 -6.10352e-05 19.8 0.382082 19.8 0.857082ZM6 5.71422H7.2V0.571368C7.2 0.257082 6.93 -6.10352e-05 6.6 -6.10352e-05C6.27 -6.10352e-05 6 0.257082 6 0.571368V5.71422ZM0 7.99994C0 8.47494 0.40125 8.85708 0.9 8.85708H23.1C23.5988 8.85708 24 8.47494 24 7.99994C24 7.52494 23.5988 7.1428 23.1 7.1428H0.9C0.40125 7.1428 0 7.52494 0 7.99994Z" }) }))); };
|
|
5
|
+
|
|
6
|
+
export { BarcodeScan };
|
|
7
|
+
//# sourceMappingURL=BarcodeScan.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BarcodeScan.js","sources":["../../../../../packages/ui/Elements/Icon/icons/BarcodeScan.tsx"],"sourcesContent":["import { __assign } from \"tslib\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nexport var BarcodeScan = function (props) { return (_jsx(\"svg\", __assign({ width: \"24\", height: \"16\", viewBox: \"0 0 24 16\", fill: \"#22394E\", xmlns: \"http://www.w3.org/2000/svg\" }, props, { children: _jsx(\"path\", { d: \"M3.3 -6.10352e-05C2.80125 -6.10352e-05 2.4 0.382082 2.4 0.857082V5.71422H4.2V0.857082C4.2 0.382082 3.79875 -6.10352e-05 3.3 -6.10352e-05ZM2.4 15.1428C2.4 15.6178 2.80125 15.9999 3.3 15.9999C3.79875 15.9999 4.2 15.6178 4.2 15.1428V10.2857H2.4V15.1428ZM6 15.4285C6 15.7428 6.27 15.9999 6.6 15.9999C6.93 15.9999 7.2 15.7428 7.2 15.4285V10.2857H6V15.4285ZM8.4 15.1428C8.4 15.6178 8.80125 15.9999 9.3 15.9999C9.79875 15.9999 10.2 15.6178 10.2 15.1428V10.2857H8.4V15.1428ZM8.4 0.857082V5.71422H10.2V0.857082C10.2 0.382082 9.79875 -6.10352e-05 9.3 -6.10352e-05C8.80125 -6.10352e-05 8.4 0.382082 8.4 0.857082ZM12.6 15.1428C12.6 15.6178 13.0013 15.9999 13.5 15.9999C13.9988 15.9999 14.4 15.6178 14.4 15.1428V10.2857H12.6V15.1428ZM12.6 0.857082V5.71422H14.4V0.857082C14.4 0.382082 13.9988 -6.10352e-05 13.5 -6.10352e-05C13.0013 -6.10352e-05 12.6 0.382082 12.6 0.857082ZM17.4 15.4285C17.4 15.7428 17.67 15.9999 18 15.9999C18.33 15.9999 18.6 15.7428 18.6 15.4285V10.2857H17.4V15.4285ZM17.4 0.571368V5.71422H18.6V0.571368C18.6 0.257082 18.33 -6.10352e-05 18 -6.10352e-05C17.67 -6.10352e-05 17.4 0.257082 17.4 0.571368ZM19.8 15.1428C19.8 15.6178 20.2013 15.9999 20.7 15.9999C21.1988 15.9999 21.6 15.6178 21.6 15.1428V10.2857H19.8V15.1428ZM19.8 0.857082V5.71422H21.6V0.857082C21.6 0.382082 21.1988 -6.10352e-05 20.7 -6.10352e-05C20.2013 -6.10352e-05 19.8 0.382082 19.8 0.857082ZM6 5.71422H7.2V0.571368C7.2 0.257082 6.93 -6.10352e-05 6.6 -6.10352e-05C6.27 -6.10352e-05 6 0.257082 6 0.571368V5.71422ZM0 7.99994C0 8.47494 0.40125 8.85708 0.9 8.85708H23.1C23.5988 8.85708 24 8.47494 24 7.99994C24 7.52494 23.5988 7.1428 23.1 7.1428H0.9C0.40125 7.1428 0 7.52494 0 7.99994Z\" }) }))); };\n//# sourceMappingURL=BarcodeScan.js.map"],"names":["_jsx"],"mappings":";;;AAEU,IAAC,WAAW,GAAG,UAAU,KAAK,EAAE,EAAE,QAAQA,GAAI,CAAC,KAAK,EAAE,QAAQ,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,4BAA4B,EAAE,EAAE,KAAK,EAAE,EAAE,QAAQ,EAAEA,GAAI,CAAC,MAAM,EAAE,EAAE,CAAC,EAAE,snDAAsnD,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE;;;;"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { __assign } from 'tslib';
|
|
2
|
+
import { jsx } from 'react/jsx-runtime';
|
|
3
|
+
|
|
4
|
+
var ImagePlaceholder = function (props) { return (jsx("svg", __assign({ width: "18", height: "18", viewBox: "0 0 18 18", fill: "#A3B3C1", xmlns: "http://www.w3.org/2000/svg" }, props, { children: jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M16 0C17.1 0 18 0.9 18 2V16C18 17.1 17.1 18 16 18H2C0.9 18 0 17.1 0 16V2C0 0.9 0.9 0 2 0H16ZM8 13.51L5.5 10.5L2 15H16L11.5 9L8 13.51Z" }) }))); };
|
|
5
|
+
|
|
6
|
+
export { ImagePlaceholder };
|
|
7
|
+
//# sourceMappingURL=ImagePlaceholder.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ImagePlaceholder.js","sources":["../../../../../packages/ui/Elements/Icon/icons/ImagePlaceholder.tsx"],"sourcesContent":["import { __assign } from \"tslib\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nexport var ImagePlaceholder = function (props) { return (_jsx(\"svg\", __assign({ width: \"18\", height: \"18\", viewBox: \"0 0 18 18\", fill: \"#A3B3C1\", xmlns: \"http://www.w3.org/2000/svg\" }, props, { children: _jsx(\"path\", { fillRule: \"evenodd\", clipRule: \"evenodd\", d: \"M16 0C17.1 0 18 0.9 18 2V16C18 17.1 17.1 18 16 18H2C0.9 18 0 17.1 0 16V2C0 0.9 0.9 0 2 0H16ZM8 13.51L5.5 10.5L2 15H16L11.5 9L8 13.51Z\" }) }))); };\n//# sourceMappingURL=ImagePlaceholder.js.map"],"names":["_jsx"],"mappings":";;;AAEU,IAAC,gBAAgB,GAAG,UAAU,KAAK,EAAE,EAAE,QAAQA,GAAI,CAAC,KAAK,EAAE,QAAQ,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,4BAA4B,EAAE,EAAE,KAAK,EAAE,EAAE,QAAQ,EAAEA,GAAI,CAAC,MAAM,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC,EAAE,uIAAuI,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE;;;;"}
|
|
@@ -20,5 +20,7 @@ declare const Return: FC<SvgProps>
|
|
|
20
20
|
declare const Settings2: FC<SvgProps>
|
|
21
21
|
declare const Transfer: FC<SvgProps>
|
|
22
22
|
declare const Product: FC<SvgProps>
|
|
23
|
+
declare const ImagePlaceholder: FC<SvgProps>
|
|
24
|
+
declare const BarcodeScan: FC<SvgProps>
|
|
23
25
|
|
|
24
|
-
export { Complaint, Expeditions, FlagCZ, FlagUSA, HamburgerMenu, HelpCircle1, IIcon, Income, Inventory, MenuItems, MobileCancel, Notification2, Plus1, Product, Products, Profile, Return, Settings2, Transfer, Icon as default };
|
|
26
|
+
export { BarcodeScan, Complaint, Expeditions, FlagCZ, FlagUSA, HamburgerMenu, HelpCircle1, IIcon, ImagePlaceholder, Income, Inventory, MenuItems, MobileCancel, Notification2, Plus1, Product, Products, Profile, Return, Settings2, Transfer, Icon as default };
|
package/ui/Forms/Input/Input.js
CHANGED
|
@@ -28,7 +28,10 @@ var Input = function (_a) {
|
|
|
28
28
|
var handleBlur = useCallback(function (event) {
|
|
29
29
|
var _a, _b, _c, _d, _e;
|
|
30
30
|
onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
|
|
31
|
-
|
|
31
|
+
// If the related target is not an input element or its input type is not included in the allowed input types, keep the focus on the input with forceFocus
|
|
32
|
+
if (forceFocus &&
|
|
33
|
+
(((_b = (_a = event.relatedTarget) === null || _a === void 0 ? void 0 : _a.tagName) === null || _b === void 0 ? void 0 : _b.toLowerCase()) !== 'input' ||
|
|
34
|
+
!allowedInputTypes.includes((_d = (_c = event.relatedTarget) === null || _c === void 0 ? void 0 : _c.type) === null || _d === void 0 ? void 0 : _d.toLowerCase()))) {
|
|
32
35
|
(_e = event.target) === null || _e === void 0 ? void 0 : _e.focus();
|
|
33
36
|
}
|
|
34
37
|
}, [forceFocus, onBlur]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.js","sources":["../../../../packages/ui/Forms/Input/Input.tsx"],"sourcesContent":["import { __assign, __rest } from \"tslib\";\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { useCallback, useEffect, useRef } from 'react';\nimport { IconsController, IconWrapper, InputIcon, InputRow, InputWrap, StyledInput, Suffix, Tooltip } from './styles';\nimport { FieldLabel } from '../../Elements/Label';\nimport { SpaceAroundWrap } from '../../Elements/SpaceAround';\nimport { ErrorMessage } from '../../Elements/ErrorMessage';\nimport { Icon } from '../../Elements/Icon';\nimport { Spinner } from '../../Elements/Spinner';\nvar allowedInputTypes = ['text', 'number'];\nexport var Input = function (_a) {\n var _b = _a.appearance, appearance = _b === void 0 ? 'primary' : _b, type = _a.type, name = _a.name, label = _a.label, value = _a.value, icon = _a.icon, disabled = _a.disabled, error = _a.error, _c = _a.isInvalid, isInvalid = _c === void 0 ? undefined : _c, _d = _a.spaceAround, spaceAround = _d === void 0 ? false : _d, inputRef = _a.inputRef, autoComplete = _a.autoComplete, isLoading = _a.isLoading, className = _a.className, suffix = _a.suffix, suffixOnClick = _a.suffixOnClick, errorAppearance = _a.errorAppearance, _e = _a.iconPlacement, iconPlacement = _e === void 0 ? 'left' : _e, iconOnClick = _a.iconOnClick, iconTooltip = _a.iconTooltip, big = _a.big, _f = _a.showArrowsController, showArrowsController = _f === void 0 ? false : _f, onClear = _a.onClear, alwaysShowClear = _a.alwaysShowClear, setNumber = _a.setNumber, onEnter = _a.onEnter, _g = _a.forceFocus, forceFocus = _g === void 0 ? false : _g, _h = _a.autoFocus, autoFocus = _h === void 0 ? false : _h, onBlur = _a.onBlur, rest = __rest(_a, [\"appearance\", \"type\", \"name\", \"label\", \"value\", \"icon\", \"disabled\", \"error\", \"isInvalid\", \"spaceAround\", \"inputRef\", \"autoComplete\", \"isLoading\", \"className\", \"suffix\", \"suffixOnClick\", \"errorAppearance\", \"iconPlacement\", \"iconOnClick\", \"iconTooltip\", \"big\", \"showArrowsController\", \"onClear\", \"alwaysShowClear\", \"setNumber\", \"onEnter\", \"forceFocus\", \"autoFocus\", \"onBlur\"]);\n var $isInvalid = isInvalid !== undefined ? isInvalid : !!error;\n var $isClearable = !!onClear && (!!value || alwaysShowClear) && !disabled && !isLoading;\n var $hasSuffix = !!suffix;\n var checkIconPlacement = showArrowsController ? 'left' : iconPlacement;\n var onAddItem = useCallback(function () { return setNumber && setNumber(function (base) { return base + 1; }); }, [setNumber]);\n var onRemoveItem = useCallback(function () {\n setNumber && setNumber(function (base) { return (base > 1 ? base - 1 : 1); });\n }, [setNumber]);\n var internalRef = useRef();\n var ref = (inputRef || internalRef);\n useEffect(function () {\n var _a;\n forceFocus && !disabled && !isLoading && ((_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.focus());\n }, [disabled, forceFocus, isLoading]);\n var handleBlur = useCallback(function (event) {\n var _a, _b, _c, _d, _e;\n onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);\n if (forceFocus && (((_b = (_a = event.relatedTarget) === null || _a === void 0 ? void 0 : _a.tagName) === null || _b === void 0 ? void 0 : _b.toLowerCase()) !== 'input' || !allowedInputTypes.includes((_d = (_c = event.relatedTarget) === null || _c === void 0 ? void 0 : _c.type) === null || _d === void 0 ? void 0 : _d.toLowerCase()))) {\n (_e = event.target) === null || _e === void 0 ? void 0 : _e.focus();\n }\n }, [forceFocus, onBlur]);\n var handleKeyDown = useCallback(function (event) {\n if (event.key === 'Enter') {\n onEnter === null || onEnter === void 0 ? void 0 : onEnter();\n }\n }, [onEnter]);\n return (_jsxs(SpaceAroundWrap, { spaceAround: spaceAround, className: className, children: [_jsxs(InputWrap, { children: [label && (_jsx(FieldLabel, { htmlFor: name, \"$isInvalid\": $isInvalid, children: label })), _jsxs(InputRow, { hasValue: !!value, \"$isInvalid\": $isInvalid, disabled: !!disabled, \"$icon\": icon, children: [_jsx(StyledInput, __assign({ autoFocus: autoFocus, className: \"\".concat(appearance, \" \").concat(checkIconPlacement), type: type, name: name, \"data-cy\": \"\".concat(name, \"Inp\"), value: value, \"$isInvalid\": $isInvalid, \"$isClearable\": $isClearable, \"$hasSuffix\": $hasSuffix, disabled: disabled || isLoading, ref: ref, autoComplete: autoComplete, onKeyDown: handleKeyDown, big: big, onBlur: handleBlur }, rest)), icon && (_jsx(InputIcon, { right: showArrowsController ? false : iconPlacement === 'right', onClick: iconOnClick, children: _jsxs(Tooltip, { children: [_jsx(Icon, { icon: icon }), iconTooltip && _jsx(\"span\", { children: iconTooltip })] }) })), showArrowsController && (_jsxs(IconsController, { children: [_jsx(IconWrapper, { onClick: onAddItem, children: _jsx(Icon, { icon: \"goUp\", fill: \"gray1\" }) }), _jsx(IconWrapper, { onClick: onRemoveItem, children: _jsx(Icon, { icon: \"goDown\", fill: \"gray1\" }) })] })), $isClearable && (_jsx(InputIcon, { right: true, onClick: onClear, children: _jsx(Icon, { icon: \"deleteX\", size: \"16px\", fill: \"lightGray3\" }) })), suffix && (_jsx(Suffix, { onClick: suffixOnClick, \"$isPointer\": !!suffixOnClick, \"$isInvalid\": $isInvalid, children: suffix })), isLoading && (_jsx(InputIcon, { right: true, children: _jsx(Spinner, { variant: \"sm\" }) }))] })] }), error && _jsx(ErrorMessage, { appearance: errorAppearance, children: error })] }));\n};\n//# sourceMappingURL=Input.js.map"],"names":["_jsxs","_jsx"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Input.js","sources":["../../../../packages/ui/Forms/Input/Input.tsx"],"sourcesContent":["import { __assign, __rest } from \"tslib\";\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { useCallback, useEffect, useRef } from 'react';\nimport { IconsController, IconWrapper, InputIcon, InputRow, InputWrap, StyledInput, Suffix, Tooltip } from './styles';\nimport { FieldLabel } from '../../Elements/Label';\nimport { SpaceAroundWrap } from '../../Elements/SpaceAround';\nimport { ErrorMessage } from '../../Elements/ErrorMessage';\nimport { Icon } from '../../Elements/Icon';\nimport { Spinner } from '../../Elements/Spinner';\nvar allowedInputTypes = ['text', 'number'];\nexport var Input = function (_a) {\n var _b = _a.appearance, appearance = _b === void 0 ? 'primary' : _b, type = _a.type, name = _a.name, label = _a.label, value = _a.value, icon = _a.icon, disabled = _a.disabled, error = _a.error, _c = _a.isInvalid, isInvalid = _c === void 0 ? undefined : _c, _d = _a.spaceAround, spaceAround = _d === void 0 ? false : _d, inputRef = _a.inputRef, autoComplete = _a.autoComplete, isLoading = _a.isLoading, className = _a.className, suffix = _a.suffix, suffixOnClick = _a.suffixOnClick, errorAppearance = _a.errorAppearance, _e = _a.iconPlacement, iconPlacement = _e === void 0 ? 'left' : _e, iconOnClick = _a.iconOnClick, iconTooltip = _a.iconTooltip, big = _a.big, _f = _a.showArrowsController, showArrowsController = _f === void 0 ? false : _f, onClear = _a.onClear, alwaysShowClear = _a.alwaysShowClear, setNumber = _a.setNumber, onEnter = _a.onEnter, _g = _a.forceFocus, forceFocus = _g === void 0 ? false : _g, _h = _a.autoFocus, autoFocus = _h === void 0 ? false : _h, onBlur = _a.onBlur, rest = __rest(_a, [\"appearance\", \"type\", \"name\", \"label\", \"value\", \"icon\", \"disabled\", \"error\", \"isInvalid\", \"spaceAround\", \"inputRef\", \"autoComplete\", \"isLoading\", \"className\", \"suffix\", \"suffixOnClick\", \"errorAppearance\", \"iconPlacement\", \"iconOnClick\", \"iconTooltip\", \"big\", \"showArrowsController\", \"onClear\", \"alwaysShowClear\", \"setNumber\", \"onEnter\", \"forceFocus\", \"autoFocus\", \"onBlur\"]);\n var $isInvalid = isInvalid !== undefined ? isInvalid : !!error;\n var $isClearable = !!onClear && (!!value || alwaysShowClear) && !disabled && !isLoading;\n var $hasSuffix = !!suffix;\n var checkIconPlacement = showArrowsController ? 'left' : iconPlacement;\n var onAddItem = useCallback(function () { return setNumber && setNumber(function (base) { return base + 1; }); }, [setNumber]);\n var onRemoveItem = useCallback(function () {\n setNumber && setNumber(function (base) { return (base > 1 ? base - 1 : 1); });\n }, [setNumber]);\n var internalRef = useRef();\n var ref = (inputRef || internalRef);\n useEffect(function () {\n var _a;\n forceFocus && !disabled && !isLoading && ((_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.focus());\n }, [disabled, forceFocus, isLoading]);\n var handleBlur = useCallback(function (event) {\n var _a, _b, _c, _d, _e;\n onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);\n // If the related target is not an input element or its input type is not included in the allowed input types, keep the focus on the input with forceFocus\n if (forceFocus &&\n (((_b = (_a = event.relatedTarget) === null || _a === void 0 ? void 0 : _a.tagName) === null || _b === void 0 ? void 0 : _b.toLowerCase()) !== 'input' ||\n !allowedInputTypes.includes((_d = (_c = event.relatedTarget) === null || _c === void 0 ? void 0 : _c.type) === null || _d === void 0 ? void 0 : _d.toLowerCase()))) {\n (_e = event.target) === null || _e === void 0 ? void 0 : _e.focus();\n }\n }, [forceFocus, onBlur]);\n var handleKeyDown = useCallback(function (event) {\n if (event.key === 'Enter') {\n onEnter === null || onEnter === void 0 ? void 0 : onEnter();\n }\n }, [onEnter]);\n return (_jsxs(SpaceAroundWrap, { spaceAround: spaceAround, className: className, children: [_jsxs(InputWrap, { children: [label && (_jsx(FieldLabel, { htmlFor: name, \"$isInvalid\": $isInvalid, children: label })), _jsxs(InputRow, { hasValue: !!value, \"$isInvalid\": $isInvalid, disabled: !!disabled, \"$icon\": icon, children: [_jsx(StyledInput, __assign({ autoFocus: autoFocus, className: \"\".concat(appearance, \" \").concat(checkIconPlacement), type: type, name: name, \"data-cy\": \"\".concat(name, \"Inp\"), value: value, \"$isInvalid\": $isInvalid, \"$isClearable\": $isClearable, \"$hasSuffix\": $hasSuffix, disabled: disabled || isLoading, ref: ref, autoComplete: autoComplete, onKeyDown: handleKeyDown, big: big, onBlur: handleBlur }, rest)), icon && (_jsx(InputIcon, { right: showArrowsController ? false : iconPlacement === 'right', onClick: iconOnClick, children: _jsxs(Tooltip, { children: [_jsx(Icon, { icon: icon }), iconTooltip && _jsx(\"span\", { children: iconTooltip })] }) })), showArrowsController && (_jsxs(IconsController, { children: [_jsx(IconWrapper, { onClick: onAddItem, children: _jsx(Icon, { icon: \"goUp\", fill: \"gray1\" }) }), _jsx(IconWrapper, { onClick: onRemoveItem, children: _jsx(Icon, { icon: \"goDown\", fill: \"gray1\" }) })] })), $isClearable && (_jsx(InputIcon, { right: true, onClick: onClear, children: _jsx(Icon, { icon: \"deleteX\", size: \"16px\", fill: \"lightGray3\" }) })), suffix && (_jsx(Suffix, { onClick: suffixOnClick, \"$isPointer\": !!suffixOnClick, \"$isInvalid\": $isInvalid, children: suffix })), isLoading && (_jsx(InputIcon, { right: true, children: _jsx(Spinner, { variant: \"sm\" }) }))] })] }), error && _jsx(ErrorMessage, { appearance: errorAppearance, children: error })] }));\n};\n//# sourceMappingURL=Input.js.map"],"names":["_jsxs","_jsx"],"mappings":"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"}
|
package/ui/Forms/Input/styles.js
CHANGED
|
@@ -21,7 +21,7 @@ var InputIcon = styled.div(templateObject_1 || (templateObject_1 = __makeTemplat
|
|
|
21
21
|
});
|
|
22
22
|
var IconsController = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: absolute;\n top: 0.2em;\n right: 0.5em;\n"], ["\n position: absolute;\n top: 0.2em;\n right: 0.5em;\n"])));
|
|
23
23
|
var IconWrapper = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n svg {\n :hover {\n cursor: pointer;\n color: blue2;\n }\n }\n"], ["\n display: flex;\n svg {\n :hover {\n cursor: pointer;\n color: blue2;\n }\n }\n"])));
|
|
24
|
-
var StyledInput = styled.input(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n ", ";\n border: slim;\n border-color: ", ";\n box-sizing: border-box;\n background-clip: padding-box;\n padding-top: 0.5em;\n padding-bottom: 0.5em;\n padding-right: ", "em;\n display: block;\n width: 100%;\n font-family: ", ";\n font-size: 14px;\n font-weight: medium;\n transition: inputTransition;\n\n ~ ", " {\n svg {\n stroke: lightGray3;\n }\n }\n\n ::placeholder {\n color:
|
|
24
|
+
var StyledInput = styled.input(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n ", ";\n border: slim;\n border-color: ", ";\n box-sizing: border-box;\n background-clip: padding-box;\n padding-top: 0.5em;\n padding-bottom: 0.5em;\n padding-right: ", "em;\n display: block;\n width: 100%;\n font-family: ", ";\n font-size: 14px;\n font-weight: medium;\n transition: inputTransition;\n\n ~ ", " {\n svg {\n stroke: lightGray3;\n }\n }\n\n ::placeholder {\n color: gray1;\n opacity: 1;\n }\n\n :focus {\n background-color: white;\n border-color: blue2;\n color: typoPrimary;\n outline: 0;\n\n ~ ", " {\n svg {\n stroke: blue2;\n }\n }\n }\n ", ";\n :disabled,\n :disabled:hover {\n background-color: lightGray1;\n border-color: lightGray3;\n color: gray;\n }\n\n text-overflow: ellipsis;\n\n -moz-appearance: textfield;\n appearance: textfield;\n ::-webkit-inner-spin-button {\n -webkit-appearance: none;\n }\n"], ["\n ", ";\n border: slim;\n border-color: ", ";\n box-sizing: border-box;\n background-clip: padding-box;\n padding-top: 0.5em;\n padding-bottom: 0.5em;\n padding-right: ", "em;\n display: block;\n width: 100%;\n font-family: ", ";\n font-size: 14px;\n font-weight: medium;\n transition: inputTransition;\n\n ~ ", " {\n svg {\n stroke: lightGray3;\n }\n }\n\n ::placeholder {\n color: gray1;\n opacity: 1;\n }\n\n :focus {\n background-color: white;\n border-color: blue2;\n color: typoPrimary;\n outline: 0;\n\n ~ ", " {\n svg {\n stroke: blue2;\n }\n }\n }\n ", ";\n :disabled,\n :disabled:hover {\n background-color: lightGray1;\n border-color: lightGray3;\n color: gray;\n }\n\n text-overflow: ellipsis;\n\n -moz-appearance: textfield;\n appearance: textfield;\n ::-webkit-inner-spin-button {\n -webkit-appearance: none;\n }\n"])), system, function (_a) {
|
|
25
25
|
var $isInvalid = _a.$isInvalid;
|
|
26
26
|
return ($isInvalid ? th.color('red1') : th.color('lightGray6'));
|
|
27
27
|
}, function (props) { return resolvePaddingRight(props); }, th('fonts.primary'), InputIcon, InputIcon, function (_a) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sources":["../../../../packages/ui/Forms/Input/styles.ts"],"sourcesContent":["import { __makeTemplateObject } from \"tslib\";\nimport styled, { css, system, th } from '@xstyled/styled-components';\nvar resolvePaddingRight = function (props) {\n var $icon = props.$icon, $iconPlacement = props.$iconPlacement, $isClearable = props.$isClearable, $hasSuffix = props.$hasSuffix;\n var padding = 2;\n if ($icon && $iconPlacement === 'right')\n padding += 1;\n if ($isClearable)\n padding += 1;\n if ($hasSuffix)\n padding += 2;\n return String(padding);\n};\nexport var InputIcon = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject([\"\\n position: absolute;\\n\\n // top: 52%; // TODO fix\\n // transform: translateY(-50%); // TODO why does this do the overlap bug\\n left: \", \";\\n right: \", \";\\n\\n svg {\\n stroke: lightGray3;\\n cursor: pointer;\\n }\\n\"], [\"\\n position: absolute;\\n\\n // top: 52%; // TODO fix\\n // transform: translateY(-50%); // TODO why does this do the overlap bug\\n left: \", \";\\n right: \", \";\\n\\n svg {\\n stroke: lightGray3;\\n cursor: pointer;\\n }\\n\"])), function (_a) {\n var right = _a.right;\n return (right ? 'auto' : '1em');\n}, function (_a) {\n var right = _a.right;\n return (right ? '0.5em' : 'auto');\n});\nexport var IconsController = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject([\"\\n position: absolute;\\n top: 0.2em;\\n right: 0.5em;\\n\"], [\"\\n position: absolute;\\n top: 0.2em;\\n right: 0.5em;\\n\"])));\nexport var IconWrapper = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject([\"\\n display: flex;\\n svg {\\n :hover {\\n cursor: pointer;\\n color: blue2;\\n }\\n }\\n\"], [\"\\n display: flex;\\n svg {\\n :hover {\\n cursor: pointer;\\n color: blue2;\\n }\\n }\\n\"])));\nexport var StyledInput = styled.input(templateObject_5 || (templateObject_5 = __makeTemplateObject([\"\\n \", \";\\n border: slim;\\n border-color: \", \";\\n box-sizing: border-box;\\n background-clip: padding-box;\\n padding-top: 0.5em;\\n padding-bottom: 0.5em;\\n padding-right: \", \"em;\\n display: block;\\n width: 100%;\\n font-family: \", \";\\n font-size: 14px;\\n font-weight: medium;\\n transition: inputTransition;\\n\\n ~ \", \" {\\n svg {\\n stroke: lightGray3;\\n }\\n }\\n\\n ::placeholder {\\n color: lightGray3;\\n opacity: 1;\\n }\\n\\n :focus {\\n background-color: white;\\n border-color: blue2;\\n color: typoPrimary;\\n outline: 0;\\n\\n ~ \", \" {\\n svg {\\n stroke: blue2;\\n }\\n }\\n }\\n \", \";\\n :disabled,\\n :disabled:hover {\\n background-color: lightGray1;\\n border-color: lightGray3;\\n color: gray;\\n }\\n\\n text-overflow: ellipsis;\\n\\n -moz-appearance: textfield;\\n appearance: textfield;\\n ::-webkit-inner-spin-button {\\n -webkit-appearance: none;\\n }\\n\"], [\"\\n \", \";\\n border: slim;\\n border-color: \", \";\\n box-sizing: border-box;\\n background-clip: padding-box;\\n padding-top: 0.5em;\\n padding-bottom: 0.5em;\\n padding-right: \", \"em;\\n display: block;\\n width: 100%;\\n font-family: \", \";\\n font-size: 14px;\\n font-weight: medium;\\n transition: inputTransition;\\n\\n ~ \", \" {\\n svg {\\n stroke: lightGray3;\\n }\\n }\\n\\n ::placeholder {\\n color: lightGray3;\\n opacity: 1;\\n }\\n\\n :focus {\\n background-color: white;\\n border-color: blue2;\\n color: typoPrimary;\\n outline: 0;\\n\\n ~ \", \" {\\n svg {\\n stroke: blue2;\\n }\\n }\\n }\\n \", \";\\n :disabled,\\n :disabled:hover {\\n background-color: lightGray1;\\n border-color: lightGray3;\\n color: gray;\\n }\\n\\n text-overflow: ellipsis;\\n\\n -moz-appearance: textfield;\\n appearance: textfield;\\n ::-webkit-inner-spin-button {\\n -webkit-appearance: none;\\n }\\n\"])), system, function (_a) {\n var $isInvalid = _a.$isInvalid;\n return ($isInvalid ? th.color('red1') : th.color('lightGray6'));\n}, function (props) { return resolvePaddingRight(props); }, th('fonts.primary'), InputIcon, InputIcon, function (_a) {\n var big = _a.big;\n return big\n ? css(templateObject_4 || (templateObject_4 = __makeTemplateObject([\"\\n font-size: 30px;\\n color: gray;\\n font-weight: semiBold;\\n padding: 0 0.5rem 0 1.25rem;\\n \"], [\"\\n font-size: 30px;\\n color: gray;\\n font-weight: semiBold;\\n padding: 0 0.5rem 0 1.25rem;\\n \"]))) : '';\n});\nexport var InputWrap = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject([\"\\n position: relative;\\n\"], [\"\\n position: relative;\\n\"])));\nexport var Suffix = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject([\"\\n position: absolute;\\n right: 0;\\n top: 0;\\n font-size: 14px;\\n font-weight: 700;\\n height: 100%;\\n width: 40px;\\n padding: 2;\\n color: typoPrimary;\\n font-family: \", \";\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\\n border: slim;\\n border-top-right-radius: lg;\\n border-bottom-right-radius: lg;\\n border-left: none;\\n\\n \", \";\\n\\n input:focus ~ & {\\n border-color: blue2;\\n }\\n\"], [\"\\n position: absolute;\\n right: 0;\\n top: 0;\\n font-size: 14px;\\n font-weight: 700;\\n height: 100%;\\n width: 40px;\\n padding: 2;\\n color: typoPrimary;\\n font-family: \", \";\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\\n border: slim;\\n border-top-right-radius: lg;\\n border-bottom-right-radius: lg;\\n border-left: none;\\n\\n \", \";\\n\\n input:focus ~ & {\\n border-color: blue2;\\n }\\n\"])), th('fonts.primary'), function (_a) {\n var $isPointer = _a.$isPointer;\n return $isPointer\n ? css(templateObject_7 || (templateObject_7 = __makeTemplateObject([\"\\n cursor: pointer;\\n \"], [\"\\n cursor: pointer;\\n \"]))) : '';\n});\nexport var InputRow = styled.div(templateObject_9 || (templateObject_9 = __makeTemplateObject([\"\\n position: relative;\\n color: \", \";\\n & > * {\\n border-color: \", \";\\n color: \", \";\\n }\\n :hover > * {\\n border-color: \", \";\\n }\\n &:focus-within {\\n color: typoPrimary;\\n }\\n .primary {\\n line-height: 0;\\n height: 38px;\\n border-radius: lg;\\n ~ \", \" {\\n top: 10px;\\n }\\n }\\n .grid {\\n line-height: 1.2px;\\n border-radius: md;\\n ~ \", \" {\\n top: 7px;\\n }\\n }\\n .left {\\n padding-left: \", \";\\n }\\n .right {\\n padding-right: 1.4em;\\n padding-left: 1em;\\n }\\n\"], [\"\\n position: relative;\\n color: \", \";\\n & > * {\\n border-color: \", \";\\n color: \", \";\\n }\\n :hover > * {\\n border-color: \", \";\\n }\\n &:focus-within {\\n color: typoPrimary;\\n }\\n .primary {\\n line-height: 0;\\n height: 38px;\\n border-radius: lg;\\n ~ \", \" {\\n top: 10px;\\n }\\n }\\n .grid {\\n line-height: 1.2px;\\n border-radius: md;\\n ~ \", \" {\\n top: 7px;\\n }\\n }\\n .left {\\n padding-left: \", \";\\n }\\n .right {\\n padding-right: 1.4em;\\n padding-left: 1em;\\n }\\n\"])), function (_a) {\n var $isInvalid = _a.$isInvalid;\n return ($isInvalid ? th.color('red1') : th.color('gray'));\n}, function (_a) {\n var $isInvalid = _a.$isInvalid;\n return ($isInvalid ? th.color('red1') : th.color('lightGray6'));\n}, function (_a) {\n var $isInvalid = _a.$isInvalid, hasValue = _a.hasValue;\n return $isInvalid ? th.color('red1') : hasValue ? th.color('typoPrimary') : th.color('gray');\n}, function (_a) {\n var disabled = _a.disabled;\n return (disabled ? th.color('lightGray3') : th.color('gray5'));\n}, InputIcon, InputIcon, function (_a) {\n var $icon = _a.$icon;\n return ($icon ? '3em' : '1em');\n});\nexport var Tooltip = styled.div(templateObject_10 || (templateObject_10 = __makeTemplateObject([\"\\n span {\\n display: none;\\n position: absolute;\\n width: 120px;\\n background-color: white;\\n color: red1;\\n border-color: red1;\\n border: 1px solid;\\n text-align: center;\\n border-radius: lg;\\n padding: 1 3;\\n margin: 1;\\n z-index: 1;\\n transition: opacity 0.3s;\\n top: 0;\\n left: 100%;\\n margin-left: 2;\\n box-shadow: tooltipBoxShadow;\\n\\n :after {\\n content: '';\\n position: absolute;\\n top: 0px;\\n right: 100%;\\n border: mediumThick;\\n border-color: transparent \", \" transparent transparent;\\n }\\n }\\n\\n :hover {\\n cursor: pointer;\\n span {\\n display: block;\\n }\\n }\\n\"], [\"\\n span {\\n display: none;\\n position: absolute;\\n width: 120px;\\n background-color: white;\\n color: red1;\\n border-color: red1;\\n border: 1px solid;\\n text-align: center;\\n border-radius: lg;\\n padding: 1 3;\\n margin: 1;\\n z-index: 1;\\n transition: opacity 0.3s;\\n top: 0;\\n left: 100%;\\n margin-left: 2;\\n box-shadow: tooltipBoxShadow;\\n\\n :after {\\n content: '';\\n position: absolute;\\n top: 0px;\\n right: 100%;\\n border: mediumThick;\\n border-color: transparent \", \" transparent transparent;\\n }\\n }\\n\\n :hover {\\n cursor: pointer;\\n span {\\n display: block;\\n }\\n }\\n\"])), th.color('red1'));\nvar templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;\n//# sourceMappingURL=styles.js.map"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"styles.js","sources":["../../../../packages/ui/Forms/Input/styles.ts"],"sourcesContent":["import { __makeTemplateObject } from \"tslib\";\nimport styled, { css, system, th } from '@xstyled/styled-components';\nvar resolvePaddingRight = function (props) {\n var $icon = props.$icon, $iconPlacement = props.$iconPlacement, $isClearable = props.$isClearable, $hasSuffix = props.$hasSuffix;\n var padding = 2;\n if ($icon && $iconPlacement === 'right')\n padding += 1;\n if ($isClearable)\n padding += 1;\n if ($hasSuffix)\n padding += 2;\n return String(padding);\n};\nexport var InputIcon = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject([\"\\n position: absolute;\\n\\n // top: 52%; // TODO fix\\n // transform: translateY(-50%); // TODO why does this do the overlap bug\\n left: \", \";\\n right: \", \";\\n\\n svg {\\n stroke: lightGray3;\\n cursor: pointer;\\n }\\n\"], [\"\\n position: absolute;\\n\\n // top: 52%; // TODO fix\\n // transform: translateY(-50%); // TODO why does this do the overlap bug\\n left: \", \";\\n right: \", \";\\n\\n svg {\\n stroke: lightGray3;\\n cursor: pointer;\\n }\\n\"])), function (_a) {\n var right = _a.right;\n return (right ? 'auto' : '1em');\n}, function (_a) {\n var right = _a.right;\n return (right ? '0.5em' : 'auto');\n});\nexport var IconsController = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject([\"\\n position: absolute;\\n top: 0.2em;\\n right: 0.5em;\\n\"], [\"\\n position: absolute;\\n top: 0.2em;\\n right: 0.5em;\\n\"])));\nexport var IconWrapper = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject([\"\\n display: flex;\\n svg {\\n :hover {\\n cursor: pointer;\\n color: blue2;\\n }\\n }\\n\"], [\"\\n display: flex;\\n svg {\\n :hover {\\n cursor: pointer;\\n color: blue2;\\n }\\n }\\n\"])));\nexport var StyledInput = styled.input(templateObject_5 || (templateObject_5 = __makeTemplateObject([\"\\n \", \";\\n border: slim;\\n border-color: \", \";\\n box-sizing: border-box;\\n background-clip: padding-box;\\n padding-top: 0.5em;\\n padding-bottom: 0.5em;\\n padding-right: \", \"em;\\n display: block;\\n width: 100%;\\n font-family: \", \";\\n font-size: 14px;\\n font-weight: medium;\\n transition: inputTransition;\\n\\n ~ \", \" {\\n svg {\\n stroke: lightGray3;\\n }\\n }\\n\\n ::placeholder {\\n color: gray1;\\n opacity: 1;\\n }\\n\\n :focus {\\n background-color: white;\\n border-color: blue2;\\n color: typoPrimary;\\n outline: 0;\\n\\n ~ \", \" {\\n svg {\\n stroke: blue2;\\n }\\n }\\n }\\n \", \";\\n :disabled,\\n :disabled:hover {\\n background-color: lightGray1;\\n border-color: lightGray3;\\n color: gray;\\n }\\n\\n text-overflow: ellipsis;\\n\\n -moz-appearance: textfield;\\n appearance: textfield;\\n ::-webkit-inner-spin-button {\\n -webkit-appearance: none;\\n }\\n\"], [\"\\n \", \";\\n border: slim;\\n border-color: \", \";\\n box-sizing: border-box;\\n background-clip: padding-box;\\n padding-top: 0.5em;\\n padding-bottom: 0.5em;\\n padding-right: \", \"em;\\n display: block;\\n width: 100%;\\n font-family: \", \";\\n font-size: 14px;\\n font-weight: medium;\\n transition: inputTransition;\\n\\n ~ \", \" {\\n svg {\\n stroke: lightGray3;\\n }\\n }\\n\\n ::placeholder {\\n color: gray1;\\n opacity: 1;\\n }\\n\\n :focus {\\n background-color: white;\\n border-color: blue2;\\n color: typoPrimary;\\n outline: 0;\\n\\n ~ \", \" {\\n svg {\\n stroke: blue2;\\n }\\n }\\n }\\n \", \";\\n :disabled,\\n :disabled:hover {\\n background-color: lightGray1;\\n border-color: lightGray3;\\n color: gray;\\n }\\n\\n text-overflow: ellipsis;\\n\\n -moz-appearance: textfield;\\n appearance: textfield;\\n ::-webkit-inner-spin-button {\\n -webkit-appearance: none;\\n }\\n\"])), system, function (_a) {\n var $isInvalid = _a.$isInvalid;\n return ($isInvalid ? th.color('red1') : th.color('lightGray6'));\n}, function (props) { return resolvePaddingRight(props); }, th('fonts.primary'), InputIcon, InputIcon, function (_a) {\n var big = _a.big;\n return big\n ? css(templateObject_4 || (templateObject_4 = __makeTemplateObject([\"\\n font-size: 30px;\\n color: gray;\\n font-weight: semiBold;\\n padding: 0 0.5rem 0 1.25rem;\\n \"], [\"\\n font-size: 30px;\\n color: gray;\\n font-weight: semiBold;\\n padding: 0 0.5rem 0 1.25rem;\\n \"]))) : '';\n});\nexport var InputWrap = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject([\"\\n position: relative;\\n\"], [\"\\n position: relative;\\n\"])));\nexport var Suffix = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject([\"\\n position: absolute;\\n right: 0;\\n top: 0;\\n font-size: 14px;\\n font-weight: 700;\\n height: 100%;\\n width: 40px;\\n padding: 2;\\n color: typoPrimary;\\n font-family: \", \";\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\\n border: slim;\\n border-top-right-radius: lg;\\n border-bottom-right-radius: lg;\\n border-left: none;\\n\\n \", \";\\n\\n input:focus ~ & {\\n border-color: blue2;\\n }\\n\"], [\"\\n position: absolute;\\n right: 0;\\n top: 0;\\n font-size: 14px;\\n font-weight: 700;\\n height: 100%;\\n width: 40px;\\n padding: 2;\\n color: typoPrimary;\\n font-family: \", \";\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\\n border: slim;\\n border-top-right-radius: lg;\\n border-bottom-right-radius: lg;\\n border-left: none;\\n\\n \", \";\\n\\n input:focus ~ & {\\n border-color: blue2;\\n }\\n\"])), th('fonts.primary'), function (_a) {\n var $isPointer = _a.$isPointer;\n return $isPointer\n ? css(templateObject_7 || (templateObject_7 = __makeTemplateObject([\"\\n cursor: pointer;\\n \"], [\"\\n cursor: pointer;\\n \"]))) : '';\n});\nexport var InputRow = styled.div(templateObject_9 || (templateObject_9 = __makeTemplateObject([\"\\n position: relative;\\n color: \", \";\\n & > * {\\n border-color: \", \";\\n color: \", \";\\n }\\n :hover > * {\\n border-color: \", \";\\n }\\n &:focus-within {\\n color: typoPrimary;\\n }\\n .primary {\\n line-height: 0;\\n height: 38px;\\n border-radius: lg;\\n ~ \", \" {\\n top: 10px;\\n }\\n }\\n .grid {\\n line-height: 1.2px;\\n border-radius: md;\\n ~ \", \" {\\n top: 7px;\\n }\\n }\\n .left {\\n padding-left: \", \";\\n }\\n .right {\\n padding-right: 1.4em;\\n padding-left: 1em;\\n }\\n\"], [\"\\n position: relative;\\n color: \", \";\\n & > * {\\n border-color: \", \";\\n color: \", \";\\n }\\n :hover > * {\\n border-color: \", \";\\n }\\n &:focus-within {\\n color: typoPrimary;\\n }\\n .primary {\\n line-height: 0;\\n height: 38px;\\n border-radius: lg;\\n ~ \", \" {\\n top: 10px;\\n }\\n }\\n .grid {\\n line-height: 1.2px;\\n border-radius: md;\\n ~ \", \" {\\n top: 7px;\\n }\\n }\\n .left {\\n padding-left: \", \";\\n }\\n .right {\\n padding-right: 1.4em;\\n padding-left: 1em;\\n }\\n\"])), function (_a) {\n var $isInvalid = _a.$isInvalid;\n return ($isInvalid ? th.color('red1') : th.color('gray'));\n}, function (_a) {\n var $isInvalid = _a.$isInvalid;\n return ($isInvalid ? th.color('red1') : th.color('lightGray6'));\n}, function (_a) {\n var $isInvalid = _a.$isInvalid, hasValue = _a.hasValue;\n return $isInvalid ? th.color('red1') : hasValue ? th.color('typoPrimary') : th.color('gray');\n}, function (_a) {\n var disabled = _a.disabled;\n return (disabled ? th.color('lightGray3') : th.color('gray5'));\n}, InputIcon, InputIcon, function (_a) {\n var $icon = _a.$icon;\n return ($icon ? '3em' : '1em');\n});\nexport var Tooltip = styled.div(templateObject_10 || (templateObject_10 = __makeTemplateObject([\"\\n span {\\n display: none;\\n position: absolute;\\n width: 120px;\\n background-color: white;\\n color: red1;\\n border-color: red1;\\n border: 1px solid;\\n text-align: center;\\n border-radius: lg;\\n padding: 1 3;\\n margin: 1;\\n z-index: 1;\\n transition: opacity 0.3s;\\n top: 0;\\n left: 100%;\\n margin-left: 2;\\n box-shadow: tooltipBoxShadow;\\n\\n :after {\\n content: '';\\n position: absolute;\\n top: 0px;\\n right: 100%;\\n border: mediumThick;\\n border-color: transparent \", \" transparent transparent;\\n }\\n }\\n\\n :hover {\\n cursor: pointer;\\n span {\\n display: block;\\n }\\n }\\n\"], [\"\\n span {\\n display: none;\\n position: absolute;\\n width: 120px;\\n background-color: white;\\n color: red1;\\n border-color: red1;\\n border: 1px solid;\\n text-align: center;\\n border-radius: lg;\\n padding: 1 3;\\n margin: 1;\\n z-index: 1;\\n transition: opacity 0.3s;\\n top: 0;\\n left: 100%;\\n margin-left: 2;\\n box-shadow: tooltipBoxShadow;\\n\\n :after {\\n content: '';\\n position: absolute;\\n top: 0px;\\n right: 100%;\\n border: mediumThick;\\n border-color: transparent \", \" transparent transparent;\\n }\\n }\\n\\n :hover {\\n cursor: pointer;\\n span {\\n display: block;\\n }\\n }\\n\"])), th.color('red1'));\nvar templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;\n//# sourceMappingURL=styles.js.map"],"names":[],"mappings":"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"}
|
|
@@ -12,8 +12,8 @@ export declare const StyledButton: import("styled-components").StyledComponent<"
|
|
|
12
12
|
children?: any;
|
|
13
13
|
onClick?: React.MouseEventHandler<HTMLButtonElement> | undefined;
|
|
14
14
|
fullWidth: boolean;
|
|
15
|
-
mt?: string |
|
|
16
|
-
mr?: string |
|
|
17
|
-
mb?: string |
|
|
18
|
-
ml?: string |
|
|
15
|
+
mt?: string | undefined;
|
|
16
|
+
mr?: string | undefined;
|
|
17
|
+
mb?: string | undefined;
|
|
18
|
+
ml?: string | undefined;
|
|
19
19
|
}, never>;
|
|
@@ -15,8 +15,8 @@ export type Props = React.HTMLProps<HTMLButtonElement> & {
|
|
|
15
15
|
icon?: string | JSX.Element;
|
|
16
16
|
type?: 'button' | 'submit' | 'reset';
|
|
17
17
|
fullWidth?: boolean;
|
|
18
|
-
mt?: string
|
|
19
|
-
mr?: string
|
|
20
|
-
mb?: string
|
|
21
|
-
ml?: string
|
|
18
|
+
mt?: string;
|
|
19
|
+
mr?: string;
|
|
20
|
+
mb?: string;
|
|
21
|
+
ml?: string;
|
|
22
22
|
};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import Icon from './Icon';
|
|
2
2
|
export type { IconProps } from './types';
|
|
3
|
-
export
|
|
3
|
+
export * from './icons';
|
|
4
4
|
export { iconDictionary } from './Icon';
|
|
5
5
|
export { Icon };
|
|
6
6
|
export default Icon;
|
package/ui/index.d.ts
CHANGED
|
@@ -11,7 +11,7 @@ export { default as Button } from './Elements/Button/index.js';
|
|
|
11
11
|
export { default as Card } from './Elements/Card/index.js';
|
|
12
12
|
export { default as Dropdown } from './Elements/Dropdown/Dropdown.js';
|
|
13
13
|
export { default as ErrorMessage } from './Elements/ErrorMessage/index.js';
|
|
14
|
-
export { Complaint, Expeditions, FlagCZ, FlagUSA, HamburgerMenu, HelpCircle1, default as Icon, Income, Inventory, MenuItems, MobileCancel, Notification2, Plus1, Product, Products, Profile, Return, Settings2, Transfer } from './Elements/Icon/index.js';
|
|
14
|
+
export { BarcodeScan, Complaint, Expeditions, FlagCZ, FlagUSA, HamburgerMenu, HelpCircle1, default as Icon, ImagePlaceholder, Income, Inventory, MenuItems, MobileCancel, Notification2, Plus1, Product, Products, Profile, Return, Settings2, Transfer } from './Elements/Icon/index.js';
|
|
15
15
|
export { default as Image } from './Elements/Image/Image.js';
|
|
16
16
|
export { FieldLabel, Label } from './Elements/Label/Label.js';
|
|
17
17
|
export { default as Line } from './Elements/Line/index.js';
|
package/ui/index.js
CHANGED
|
@@ -35,6 +35,8 @@ export { Return } from './Elements/Icon/icons/Return.js';
|
|
|
35
35
|
export { Settings2 } from './Elements/Icon/icons/Settings2.js';
|
|
36
36
|
export { Transfer } from './Elements/Icon/icons/Transfer.js';
|
|
37
37
|
export { Product } from './Elements/Icon/icons/Product.js';
|
|
38
|
+
export { ImagePlaceholder } from './Elements/Icon/icons/ImagePlaceholder.js';
|
|
39
|
+
export { BarcodeScan } from './Elements/Icon/icons/BarcodeScan.js';
|
|
38
40
|
export { default as Image } from './Elements/Image/Image.js';
|
|
39
41
|
export { FieldLabel, Label } from './Elements/Label/Label.js';
|
|
40
42
|
export { default as Line } from './Elements/Line/Line.js';
|
package/ui/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|