@mailstep/design-system 0.1.11 → 0.1.13
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/CornerDialog/CornerDialog.js +14 -12
- package/ui/Blocks/CornerDialog/CornerDialog.js.map +1 -1
- package/ui/Blocks/CornerDialog/index.js +6 -2
- package/ui/Blocks/CornerDialog/index.js.map +1 -1
- package/ui/Blocks/CornerDialog/styles.js +22 -11
- package/ui/Blocks/CornerDialog/styles.js.map +1 -1
- package/ui/Blocks/CornerDialog/utils.js +4 -1
- package/ui/Blocks/CornerDialog/utils.js.map +1 -1
- package/ui/Blocks/ImageList/ImageList.js +19 -17
- package/ui/Blocks/ImageList/ImageList.js.map +1 -1
- package/ui/Blocks/ImageList/components/AddPhoto/index.js +11 -9
- package/ui/Blocks/ImageList/components/AddPhoto/index.js.map +1 -1
- package/ui/Blocks/ImageList/components/AddPhoto/styles.js +12 -5
- package/ui/Blocks/ImageList/components/AddPhoto/styles.js.map +1 -1
- package/ui/Blocks/ImageList/components/CloseButton/index.js +8 -6
- package/ui/Blocks/ImageList/components/CloseButton/index.js.map +1 -1
- package/ui/Blocks/ImageList/components/CloseButton/styles.js +10 -4
- package/ui/Blocks/ImageList/components/CloseButton/styles.js.map +1 -1
- package/ui/Blocks/ImageList/components/ImageElement/index.js +9 -7
- package/ui/Blocks/ImageList/components/ImageElement/index.js.map +1 -1
- package/ui/Blocks/ImageList/components/ImageElement/styles.js +11 -5
- package/ui/Blocks/ImageList/components/ImageElement/styles.js.map +1 -1
- package/ui/Blocks/ImageList/components/ImageTag/index.js +7 -5
- package/ui/Blocks/ImageList/components/ImageTag/index.js.map +1 -1
- package/ui/Blocks/ImageList/components/ImageTag/styles.js +10 -4
- package/ui/Blocks/ImageList/components/ImageTag/styles.js.map +1 -1
- package/ui/Blocks/ImageList/index.js +6 -2
- package/ui/Blocks/ImageList/index.js.map +1 -1
- package/ui/Blocks/ImageList/styles.js +10 -4
- package/ui/Blocks/ImageList/styles.js.map +1 -1
- package/ui/Blocks/LightBox/LightBox.js +12 -10
- package/ui/Blocks/LightBox/LightBox.js.map +1 -1
- package/ui/Blocks/LightBox/hooks/useLightBox.js +8 -6
- package/ui/Blocks/LightBox/hooks/useLightBox.js.map +1 -1
- package/ui/Blocks/LightBox/index.js +8 -4
- package/ui/Blocks/LightBox/index.js.map +1 -1
- package/ui/Blocks/LightBox/styles.js +14 -6
- package/ui/Blocks/LightBox/styles.js.map +1 -1
- package/ui/Blocks/Modal/Modal.js +20 -18
- package/ui/Blocks/Modal/Modal.js.map +1 -1
- package/ui/Blocks/Modal/hooks/useClickOutside.js +8 -6
- package/ui/Blocks/Modal/hooks/useClickOutside.js.map +1 -1
- package/ui/Blocks/Modal/hooks/useModal.js +8 -6
- package/ui/Blocks/Modal/hooks/useModal.js.map +1 -1
- package/ui/Blocks/Modal/index.js +7 -3
- package/ui/Blocks/Modal/index.js.map +1 -1
- package/ui/Blocks/Modal/styles.js +29 -16
- package/ui/Blocks/Modal/styles.js.map +1 -1
- package/ui/Blocks/Modal/utils.js +4 -1
- package/ui/Blocks/Modal/utils.js.map +1 -1
- package/ui/Blocks/Tabs/Tabs.js +13 -11
- package/ui/Blocks/Tabs/Tabs.js.map +1 -1
- package/ui/Blocks/Tabs/hooks/useTabs.js +6 -4
- package/ui/Blocks/Tabs/hooks/useTabs.js.map +1 -1
- package/ui/Blocks/Tabs/index.js +8 -3
- package/ui/Blocks/Tabs/index.js.map +1 -1
- package/ui/Blocks/Tabs/styles.js +19 -9
- package/ui/Blocks/Tabs/styles.js.map +1 -1
- package/ui/Elements/Alert/Alert.js +14 -10
- package/ui/Elements/Alert/Alert.js.map +1 -1
- package/ui/Elements/Alert/index.js +7 -2
- package/ui/Elements/Alert/index.js.map +1 -1
- package/ui/Elements/Alert/styles.js +29 -15
- package/ui/Elements/Alert/styles.js.map +1 -1
- package/ui/Elements/Avatar/Avatar.js +15 -8
- package/ui/Elements/Avatar/Avatar.js.map +1 -1
- package/ui/Elements/Avatar/index.js +7 -2
- package/ui/Elements/Avatar/index.js.map +1 -1
- package/ui/Elements/Badge/Badge.js +21 -13
- package/ui/Elements/Badge/Badge.js.map +1 -1
- package/ui/Elements/Badge/index.js +7 -2
- package/ui/Elements/Badge/index.js.map +1 -1
- package/ui/Elements/BorderedBox/BorderedBox.js +15 -7
- package/ui/Elements/BorderedBox/BorderedBox.js.map +1 -1
- package/ui/Elements/BorderedBox/index.js +7 -2
- package/ui/Elements/BorderedBox/index.js.map +1 -1
- package/ui/Elements/Button/Button.js +11 -7
- package/ui/Elements/Button/Button.js.map +1 -1
- package/ui/Elements/Button/index.js +7 -2
- package/ui/Elements/Button/index.js.map +1 -1
- package/ui/Elements/Button/styles.js +23 -14
- package/ui/Elements/Button/styles.js.map +1 -1
- package/ui/Elements/Card/Card.js +21 -14
- package/ui/Elements/Card/Card.js.map +1 -1
- package/ui/Elements/Card/index.js +9 -3
- package/ui/Elements/Card/index.js.map +1 -1
- package/ui/Elements/Card/styles.js +23 -13
- package/ui/Elements/Card/styles.js.map +1 -1
- package/ui/Elements/Dropdown/Dropdown.js +18 -10
- package/ui/Elements/Dropdown/Dropdown.js.map +1 -1
- package/ui/Elements/Dropdown/index.js +7 -2
- package/ui/Elements/Dropdown/index.js.map +1 -1
- package/ui/Elements/ErrorMessage/ErrorMessage.js +17 -9
- package/ui/Elements/ErrorMessage/ErrorMessage.js.map +1 -1
- package/ui/Elements/ErrorMessage/index.js +7 -2
- package/ui/Elements/ErrorMessage/index.js.map +1 -1
- package/ui/Elements/Icon/Icon.js +224 -214
- package/ui/Elements/Icon/Icon.js.map +1 -1
- package/ui/Elements/Icon/icons/Complaint.js +9 -0
- package/ui/Elements/Icon/icons/Complaint.js.map +1 -0
- package/ui/Elements/Icon/icons/Expeditions.js +9 -0
- package/ui/Elements/Icon/icons/Expeditions.js.map +1 -0
- package/ui/Elements/Icon/icons/FlagCZ.js +6 -4
- package/ui/Elements/Icon/icons/FlagCZ.js.map +1 -1
- package/ui/Elements/Icon/icons/FlagUSA.js +6 -4
- package/ui/Elements/Icon/icons/FlagUSA.js.map +1 -1
- package/ui/Elements/Icon/icons/HamburgerMenu.js +9 -0
- package/ui/Elements/Icon/icons/HamburgerMenu.js.map +1 -0
- package/ui/Elements/Icon/icons/HelpCircle1.js +9 -0
- package/ui/Elements/Icon/icons/HelpCircle1.js.map +1 -0
- package/ui/Elements/Icon/icons/Income.js +9 -0
- package/ui/Elements/Icon/icons/Income.js.map +1 -0
- package/ui/Elements/Icon/icons/Inventory.js +9 -0
- package/ui/Elements/Icon/icons/Inventory.js.map +1 -0
- package/ui/Elements/Icon/icons/MenuItems.js +9 -0
- package/ui/Elements/Icon/icons/MenuItems.js.map +1 -0
- package/ui/Elements/Icon/icons/MobileCancel.js +9 -0
- package/ui/Elements/Icon/icons/MobileCancel.js.map +1 -0
- package/ui/Elements/Icon/icons/Notification2.js +9 -0
- package/ui/Elements/Icon/icons/Notification2.js.map +1 -0
- package/ui/Elements/Icon/icons/Plus1.js +9 -0
- package/ui/Elements/Icon/icons/Plus1.js.map +1 -0
- package/ui/Elements/Icon/icons/Products.js +9 -0
- package/ui/Elements/Icon/icons/Products.js.map +1 -0
- package/ui/Elements/Icon/icons/Profile.js +9 -0
- package/ui/Elements/Icon/icons/Profile.js.map +1 -0
- package/ui/Elements/Icon/icons/Return.js +9 -0
- package/ui/Elements/Icon/icons/Return.js.map +1 -0
- package/ui/Elements/Icon/icons/Settings2.js +9 -0
- package/ui/Elements/Icon/icons/Settings2.js.map +1 -0
- package/ui/Elements/Icon/icons/Transfer.js +9 -0
- package/ui/Elements/Icon/icons/Transfer.js.map +1 -0
- package/ui/Elements/Icon/index.d.ts +16 -1
- package/ui/Elements/Icon/index.js +10 -5
- package/ui/Elements/Icon/index.js.map +1 -1
- package/ui/Elements/Image/Image.js +9 -5
- package/ui/Elements/Image/Image.js.map +1 -1
- package/ui/Elements/Image/index.js +7 -2
- package/ui/Elements/Image/index.js.map +1 -1
- package/ui/Elements/Label/Label.js +17 -10
- package/ui/Elements/Label/Label.js.map +1 -1
- package/ui/Elements/Label/index.js +8 -3
- package/ui/Elements/Label/index.js.map +1 -1
- package/ui/Elements/Line/Line.js +14 -6
- package/ui/Elements/Line/Line.js.map +1 -1
- package/ui/Elements/Line/index.js +7 -2
- package/ui/Elements/Line/index.js.map +1 -1
- package/ui/Elements/Link/Link.js +23 -15
- package/ui/Elements/Link/Link.js.map +1 -1
- package/ui/Elements/Link/index.js +7 -2
- package/ui/Elements/Link/index.js.map +1 -1
- package/ui/Elements/Logo/Logo.js +36 -28
- package/ui/Elements/Logo/Logo.js.map +1 -1
- package/ui/Elements/Logo/assets/mailship/logo_black.png.js +5 -1
- package/ui/Elements/Logo/assets/mailship/logo_black.png.js.map +1 -1
- package/ui/Elements/Logo/assets/mailship/logo_m.png.js +5 -1
- package/ui/Elements/Logo/assets/mailship/logo_m.png.js.map +1 -1
- package/ui/Elements/Logo/assets/mailship/logo_white.png.js +5 -1
- package/ui/Elements/Logo/assets/mailship/logo_white.png.js.map +1 -1
- package/ui/Elements/Logo/assets/mailship/mailship-logo.svg.js +6 -2
- package/ui/Elements/Logo/assets/mailship/mailship-logo.svg.js.map +1 -1
- package/ui/Elements/Logo/assets/mailstep/mailstep_black.svg.js +6 -2
- package/ui/Elements/Logo/assets/mailstep/mailstep_black.svg.js.map +1 -1
- package/ui/Elements/Logo/assets/mailstep/mailstep_white.svg.js +6 -2
- package/ui/Elements/Logo/assets/mailstep/mailstep_white.svg.js.map +1 -1
- package/ui/Elements/Logo/assets/mailstock/mailstock.svg.js +6 -2
- package/ui/Elements/Logo/assets/mailstock/mailstock.svg.js.map +1 -1
- package/ui/Elements/Logo/assets/mailwise/mailwiseLogo.svg.js +6 -2
- package/ui/Elements/Logo/assets/mailwise/mailwiseLogo.svg.js.map +1 -1
- package/ui/Elements/Logo/assets/mailwise/mailwiseLogoSmall.svg.js +6 -2
- package/ui/Elements/Logo/assets/mailwise/mailwiseLogoSmall.svg.js.map +1 -1
- package/ui/Elements/Logo/assets/mailwrap/mailwrapLogo.svg.js +6 -2
- package/ui/Elements/Logo/assets/mailwrap/mailwrapLogo.svg.js.map +1 -1
- package/ui/Elements/Logo/index.js +7 -2
- package/ui/Elements/Logo/index.js.map +1 -1
- package/ui/Elements/Pagination/Pagination.js +11 -7
- package/ui/Elements/Pagination/Pagination.js.map +1 -1
- package/ui/Elements/Pagination/index.js +7 -2
- package/ui/Elements/Pagination/index.js.map +1 -1
- package/ui/Elements/Pagination/styled.js +25 -14
- package/ui/Elements/Pagination/styled.js.map +1 -1
- package/ui/Elements/Paragraph/Paragraph.js +7 -3
- package/ui/Elements/Paragraph/Paragraph.js.map +1 -1
- package/ui/Elements/Paragraph/index.js +7 -2
- package/ui/Elements/Paragraph/index.js.map +1 -1
- package/ui/Elements/Portal/index.js +15 -6
- package/ui/Elements/Portal/index.js.map +1 -1
- package/ui/Elements/ProgressBar/ProgressBar.js +8 -4
- package/ui/Elements/ProgressBar/ProgressBar.js.map +1 -1
- package/ui/Elements/ProgressBar/index.js +7 -2
- package/ui/Elements/ProgressBar/index.js.map +1 -1
- package/ui/Elements/ProgressBar/styles.js +22 -14
- package/ui/Elements/ProgressBar/styles.js.map +1 -1
- package/ui/Elements/SimpleLink/SimpleLink.js +15 -7
- package/ui/Elements/SimpleLink/SimpleLink.js.map +1 -1
- package/ui/Elements/SimpleLink/index.js +7 -2
- package/ui/Elements/SimpleLink/index.js.map +1 -1
- package/ui/Elements/SpaceAround/SpaceAround.js +20 -12
- package/ui/Elements/SpaceAround/SpaceAround.js.map +1 -1
- package/ui/Elements/SpaceAround/index.js +7 -2
- package/ui/Elements/SpaceAround/index.js.map +1 -1
- package/ui/Elements/Spinner/Spinner.js +10 -4
- package/ui/Elements/Spinner/Spinner.js.map +1 -1
- package/ui/Elements/Spinner/index.js +7 -2
- package/ui/Elements/Spinner/index.js.map +1 -1
- package/ui/Elements/Spinner/styles.js +16 -9
- package/ui/Elements/Spinner/styles.js.map +1 -1
- package/ui/Elements/Tag/Tag.js +16 -7
- package/ui/Elements/Tag/Tag.js.map +1 -1
- package/ui/Elements/Tag/index.js +7 -2
- package/ui/Elements/Tag/index.js.map +1 -1
- package/ui/Elements/Tag/palletes.js +3 -1
- package/ui/Elements/Tag/palletes.js.map +1 -1
- package/ui/Elements/Text/Text.js +9 -5
- package/ui/Elements/Text/Text.js.map +1 -1
- package/ui/Elements/Toast/Toast.js +18 -10
- package/ui/Elements/Toast/Toast.js.map +1 -1
- package/ui/Elements/Toast/index.js +7 -2
- package/ui/Elements/Toast/index.js.map +1 -1
- package/ui/Elements/Toggle/Toggle.js +23 -15
- package/ui/Elements/Toggle/Toggle.js.map +1 -1
- package/ui/Elements/Toggle/index.js +7 -2
- package/ui/Elements/Toggle/index.js.map +1 -1
- package/ui/Elements/Typography/Typography.js +31 -17
- package/ui/Elements/Typography/Typography.js.map +1 -1
- package/ui/Elements/Typography/index.js +19 -3
- package/ui/Elements/Typography/index.js.map +1 -1
- package/ui/Forms/Checkbox/Checkbox.js +13 -9
- package/ui/Forms/Checkbox/Checkbox.js.map +1 -1
- package/ui/Forms/Checkbox/index.js +7 -2
- package/ui/Forms/Checkbox/index.js.map +1 -1
- package/ui/Forms/Checkbox/styles.js +18 -9
- package/ui/Forms/Checkbox/styles.js.map +1 -1
- package/ui/Forms/Input/Input.js +20 -18
- package/ui/Forms/Input/Input.js.map +1 -1
- package/ui/Forms/Input/index.js +7 -2
- package/ui/Forms/Input/index.js.map +1 -1
- package/ui/Forms/Input/styles.js +32 -19
- package/ui/Forms/Input/styles.js.map +1 -1
- package/ui/Forms/RadioButton/RadioButton.js +10 -6
- package/ui/Forms/RadioButton/RadioButton.js.map +1 -1
- package/ui/Forms/RadioButton/index.js +7 -2
- package/ui/Forms/RadioButton/index.js.map +1 -1
- package/ui/Forms/RadioButton/styles.js +20 -9
- package/ui/Forms/RadioButton/styles.js.map +1 -1
- package/ui/ThemeProvider/ThemeProvider.js +9 -5
- package/ui/ThemeProvider/ThemeProvider.js.map +1 -1
- package/ui/ThemeProvider/index.js +6 -2
- package/ui/ThemeProvider/index.js.map +1 -1
- package/ui/ThemeProvider/themes/default.js +6 -1
- package/ui/ThemeProvider/themes/default.js.map +1 -1
- package/ui/ThemeProvider/themes/index.js +11 -7
- package/ui/ThemeProvider/themes/index.js.map +1 -1
- package/ui/ThemeProvider/themes/light.js +5 -1
- package/ui/ThemeProvider/themes/light.js.map +1 -1
- package/ui/ThemeProvider/themes/mailwise.js +5 -1
- package/ui/ThemeProvider/themes/mailwise.js.map +1 -1
- package/ui/dts/Elements/Card/stories/Card.stories.d.ts +0 -1
- package/ui/dts/Elements/Icon/icons/Complaint.d.ts +3 -0
- package/ui/dts/Elements/Icon/icons/Expeditions.d.ts +3 -0
- package/ui/dts/Elements/Icon/icons/HamburgerMenu.d.ts +3 -0
- package/ui/dts/Elements/Icon/icons/HelpCircle1.d.ts +3 -0
- package/ui/dts/Elements/Icon/icons/Income.d.ts +3 -0
- package/ui/dts/Elements/Icon/icons/Inventory.d.ts +3 -0
- package/ui/dts/Elements/Icon/icons/MenuItems.d.ts +3 -0
- package/ui/dts/Elements/Icon/icons/MobileCancel.d.ts +3 -0
- package/ui/dts/Elements/Icon/icons/Notification2.d.ts +3 -0
- package/ui/dts/Elements/Icon/icons/Plus1.d.ts +3 -0
- package/ui/dts/Elements/Icon/icons/Products.d.ts +3 -0
- package/ui/dts/Elements/Icon/icons/Profile.d.ts +3 -0
- package/ui/dts/Elements/Icon/icons/Return.d.ts +3 -0
- package/ui/dts/Elements/Icon/icons/Settings2.d.ts +3 -0
- package/ui/dts/Elements/Icon/icons/Transfer.d.ts +3 -0
- package/ui/dts/Elements/Icon/icons/index.d.ts +15 -0
- package/ui/dts/Elements/Icon/index.d.ts +1 -1
- package/ui/dts/ThemeProvider/themes/default.d.ts +1 -0
- package/ui/dts/ThemeProvider/themes/index.d.ts +1 -0
- package/ui/index.d.ts +1 -1
- package/ui/index.js +143 -45
- package/ui/index.js.map +1 -1
- package/ui/utils/CreateRgba/createRgba.js +15 -6
- package/ui/utils/CreateRgba/createRgba.js.map +1 -1
- package/ui/utils/KeyPress/KeyPress.js +8 -4
- package/ui/utils/KeyPress/KeyPress.js.map +1 -1
- package/ui/utils/KeyPress/index.js +6 -2
- package/ui/utils/KeyPress/index.js.map +1 -1
- package/ui/utils/index.js +11 -5
- package/ui/utils/index.js.map +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Badge.js","sources":["../../../../packages/ui/Elements/Badge/Badge.tsx"],"sourcesContent":["import { __makeTemplateObject } from \"tslib\";\nimport { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport styled, { css, useTheme } from '@xstyled/styled-components';\nimport { th } from '@xstyled/styled-components';\nvar Circle = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject([\"\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n padding: 2px;\\n color: white;\\n background-color: \", \";\\n border-radius: 50%;\\n width: \", \";\\n height: \", \";\\n\\n .label {\\n font-family: \", \";\\n font-weight: 600;\\n vertical-align: middle;\\n text-align: center;\\n font-size: \", \";\\n }\\n\\n position: absolute;\\n top: 0;\\n right: 0;\\n transform: translate(\", \");\\n\"], [\"\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n padding: 2px;\\n color: white;\\n background-color: \", \";\\n border-radius: 50%;\\n width: \", \";\\n height: \", \";\\n\\n .label {\\n font-family: \", \";\\n font-weight: 600;\\n vertical-align: middle;\\n text-align: center;\\n font-size: \", \";\\n }\\n\\n position: absolute;\\n top: 0;\\n right: 0;\\n transform: translate(\", \");\\n\"])), function (_a) {\n var color = _a.color;\n return color;\n}, function (_a) {\n var size = _a.size;\n return size;\n}, function (_a) {\n var size = _a.size;\n return size;\n}, th('fonts.primary'), function (_a) {\n var fontSize = _a.fontSize;\n return \"\".concat(fontSize, \"px\");\n}, function (_a) {\n var topPosition = _a.topPosition;\n return (topPosition ? '75%, -75%' : '50%, -50%');\n});\nvar RelativeWrap = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject([\"\\n position: relative;\\n \", \";\\n\"], [\"\\n position: relative;\\n \", \";\\n\"])), function (_a) {\n var width = _a.width;\n return width\n ? css(templateObject_2 || (templateObject_2 = __makeTemplateObject([\"\\n width: \", \";\\n \"], [\"\\n width: \", \";\\n \"])), width) : '';\n});\nvar Badge = function (_a) {\n var children = _a.children, _b = _a.color, color = _b === void 0 ? 'red2' : _b, _c = _a.size, size = _c === void 0 ? 6 : _c, _d = _a.fontSize, fontSize = _d === void 0 ? 10 : _d, label = _a.label, childWidth = _a.childWidth, topPosition = _a.topPosition;\n var theme = useTheme();\n var themeColor = th.color(color)({ theme: theme });\n var themeSize = th.fontSize(size)({ theme: theme });\n if (!label || (typeof label === 'number' && label <= 0)) {\n return _jsx(_Fragment, { children: children });\n }\n return (_jsxs(RelativeWrap, { width: childWidth, children: [_jsx(Circle, { color: themeColor, size: themeSize, topPosition: topPosition, fontSize: fontSize, children: _jsx(\"div\", { className: \"label\", children: label }) }), children] }));\n};\nexport default Badge;\nvar templateObject_1, templateObject_2, templateObject_3;\n//# sourceMappingURL=Badge.js.map"],"names":["_jsx","_Fragment","_jsxs"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Badge.js","sources":["../../../../packages/ui/Elements/Badge/Badge.tsx"],"sourcesContent":["import { __makeTemplateObject } from \"tslib\";\nimport { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport styled, { css, useTheme } from '@xstyled/styled-components';\nimport { th } from '@xstyled/styled-components';\nvar Circle = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject([\"\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n padding: 2px;\\n color: white;\\n background-color: \", \";\\n border-radius: 50%;\\n width: \", \";\\n height: \", \";\\n\\n .label {\\n font-family: \", \";\\n font-weight: 600;\\n vertical-align: middle;\\n text-align: center;\\n font-size: \", \";\\n }\\n\\n position: absolute;\\n top: 0;\\n right: 0;\\n transform: translate(\", \");\\n\"], [\"\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n padding: 2px;\\n color: white;\\n background-color: \", \";\\n border-radius: 50%;\\n width: \", \";\\n height: \", \";\\n\\n .label {\\n font-family: \", \";\\n font-weight: 600;\\n vertical-align: middle;\\n text-align: center;\\n font-size: \", \";\\n }\\n\\n position: absolute;\\n top: 0;\\n right: 0;\\n transform: translate(\", \");\\n\"])), function (_a) {\n var color = _a.color;\n return color;\n}, function (_a) {\n var size = _a.size;\n return size;\n}, function (_a) {\n var size = _a.size;\n return size;\n}, th('fonts.primary'), function (_a) {\n var fontSize = _a.fontSize;\n return \"\".concat(fontSize, \"px\");\n}, function (_a) {\n var topPosition = _a.topPosition;\n return (topPosition ? '75%, -75%' : '50%, -50%');\n});\nvar RelativeWrap = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject([\"\\n position: relative;\\n \", \";\\n\"], [\"\\n position: relative;\\n \", \";\\n\"])), function (_a) {\n var width = _a.width;\n return width\n ? css(templateObject_2 || (templateObject_2 = __makeTemplateObject([\"\\n width: \", \";\\n \"], [\"\\n width: \", \";\\n \"])), width) : '';\n});\nvar Badge = function (_a) {\n var children = _a.children, _b = _a.color, color = _b === void 0 ? 'red2' : _b, _c = _a.size, size = _c === void 0 ? 6 : _c, _d = _a.fontSize, fontSize = _d === void 0 ? 10 : _d, label = _a.label, childWidth = _a.childWidth, topPosition = _a.topPosition;\n var theme = useTheme();\n var themeColor = th.color(color)({ theme: theme });\n var themeSize = th.fontSize(size)({ theme: theme });\n if (!label || (typeof label === 'number' && label <= 0)) {\n return _jsx(_Fragment, { children: children });\n }\n return (_jsxs(RelativeWrap, { width: childWidth, children: [_jsx(Circle, { color: themeColor, size: themeSize, topPosition: topPosition, fontSize: fontSize, children: _jsx(\"div\", { className: \"label\", children: label }) }), children] }));\n};\nexport default Badge;\nvar templateObject_1, templateObject_2, templateObject_3;\n//# sourceMappingURL=Badge.js.map"],"names":["styled","__makeTemplateObject","th","css","useTheme","_jsx","_Fragment","_jsxs"],"mappings":"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"}
|
|
@@ -1,6 +1,11 @@
|
|
|
1
|
-
|
|
1
|
+
'use strict';
|
|
2
2
|
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
3
4
|
|
|
5
|
+
var Badge = require('./Badge.js');
|
|
4
6
|
|
|
5
|
-
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
exports.Badge = Badge.default;
|
|
10
|
+
exports.default = Badge.default;
|
|
6
11
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}
|
|
@@ -1,13 +1,21 @@
|
|
|
1
|
-
|
|
2
|
-
import { jsx } from 'react/jsx-runtime';
|
|
3
|
-
import styled, { x } from '@xstyled/styled-components';
|
|
1
|
+
'use strict';
|
|
4
2
|
|
|
5
|
-
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var tslib = require('tslib');
|
|
6
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
7
|
+
var styled = require('@xstyled/styled-components');
|
|
8
|
+
|
|
9
|
+
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
|
|
10
|
+
|
|
11
|
+
var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
|
|
12
|
+
|
|
13
|
+
var StyledBox = styled__default.default(styled.x.div)(templateObject_1 || (templateObject_1 = tslib.__makeTemplateObject(["\n display: flex;\n box-sizing: border-box;\n flex-direction: column;\n padding: 3;\n border: slim;\n border-color: lightGray3;\n border-radius: md;\n"], ["\n display: flex;\n box-sizing: border-box;\n flex-direction: column;\n padding: 3;\n border: slim;\n border-color: lightGray3;\n border-radius: md;\n"])));
|
|
6
14
|
var BorderedBox = function (_a) {
|
|
7
|
-
var children = _a.children, className = _a.className, id = _a.id, rest = __rest(_a, ["children", "className", "id"]);
|
|
8
|
-
return (jsx(StyledBox, __assign({ id: id, className: className }, rest, { children: children })));
|
|
15
|
+
var children = _a.children, className = _a.className, id = _a.id, rest = tslib.__rest(_a, ["children", "className", "id"]);
|
|
16
|
+
return (jsxRuntime.jsx(StyledBox, tslib.__assign({ id: id, className: className }, rest, { children: children })));
|
|
9
17
|
};
|
|
10
18
|
var templateObject_1;
|
|
11
19
|
|
|
12
|
-
|
|
20
|
+
exports.default = BorderedBox;
|
|
13
21
|
//# sourceMappingURL=BorderedBox.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BorderedBox.js","sources":["../../../../packages/ui/Elements/BorderedBox/BorderedBox.tsx"],"sourcesContent":["import { __assign, __makeTemplateObject, __rest } from \"tslib\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport styled, { x } from '@xstyled/styled-components';\nvar StyledBox = styled(x.div)(templateObject_1 || (templateObject_1 = __makeTemplateObject([\"\\n display: flex;\\n box-sizing: border-box;\\n flex-direction: column;\\n padding: 3;\\n border: slim;\\n border-color: lightGray3;\\n border-radius: md;\\n\"], [\"\\n display: flex;\\n box-sizing: border-box;\\n flex-direction: column;\\n padding: 3;\\n border: slim;\\n border-color: lightGray3;\\n border-radius: md;\\n\"])));\nvar BorderedBox = function (_a) {\n var children = _a.children, className = _a.className, id = _a.id, rest = __rest(_a, [\"children\", \"className\", \"id\"]);\n return (_jsx(StyledBox, __assign({ id: id, className: className }, rest, { children: children })));\n};\nexport default BorderedBox;\nvar templateObject_1;\n//# sourceMappingURL=BorderedBox.js.map"],"names":["_jsx"],"mappings":"
|
|
1
|
+
{"version":3,"file":"BorderedBox.js","sources":["../../../../packages/ui/Elements/BorderedBox/BorderedBox.tsx"],"sourcesContent":["import { __assign, __makeTemplateObject, __rest } from \"tslib\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport styled, { x } from '@xstyled/styled-components';\nvar StyledBox = styled(x.div)(templateObject_1 || (templateObject_1 = __makeTemplateObject([\"\\n display: flex;\\n box-sizing: border-box;\\n flex-direction: column;\\n padding: 3;\\n border: slim;\\n border-color: lightGray3;\\n border-radius: md;\\n\"], [\"\\n display: flex;\\n box-sizing: border-box;\\n flex-direction: column;\\n padding: 3;\\n border: slim;\\n border-color: lightGray3;\\n border-radius: md;\\n\"])));\nvar BorderedBox = function (_a) {\n var children = _a.children, className = _a.className, id = _a.id, rest = __rest(_a, [\"children\", \"className\", \"id\"]);\n return (_jsx(StyledBox, __assign({ id: id, className: className }, rest, { children: children })));\n};\nexport default BorderedBox;\nvar templateObject_1;\n//# sourceMappingURL=BorderedBox.js.map"],"names":["styled","x","__makeTemplateObject","__rest","_jsx","__assign"],"mappings":";;;;;;;;;;;;AAGA,IAAI,SAAS,GAAGA,uBAAM,CAACC,QAAC,CAAC,GAAG,CAAC,CAAC,gBAAgB,KAAK,gBAAgB,GAAGC,0BAAoB,CAAC,CAAC,+JAA+J,CAAC,EAAE,CAAC,+JAA+J,CAAC,CAAC,CAAC,CAAC,CAAC;AACha,IAAC,WAAW,GAAG,UAAU,EAAE,EAAE;AAChC,IAAI,IAAI,QAAQ,GAAG,EAAE,CAAC,QAAQ,EAAE,SAAS,GAAG,EAAE,CAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE,IAAI,GAAGC,YAAM,CAAC,EAAE,EAAE,CAAC,UAAU,EAAE,WAAW,EAAE,IAAI,CAAC,CAAC,CAAC;AACzH,IAAI,QAAQC,cAAI,CAAC,SAAS,EAAEC,cAAQ,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,SAAS,EAAE,EAAE,IAAI,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC,EAAE;AACvG,EAAE;AAEF,IAAI,gBAAgB;;;;"}
|
|
@@ -1,6 +1,11 @@
|
|
|
1
|
-
|
|
1
|
+
'use strict';
|
|
2
2
|
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
3
4
|
|
|
5
|
+
var BorderedBox = require('./BorderedBox.js');
|
|
4
6
|
|
|
5
|
-
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
exports.BorderedBox = BorderedBox.default;
|
|
10
|
+
exports.default = BorderedBox.default;
|
|
6
11
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}
|
|
@@ -1,12 +1,16 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var tslib = require('tslib');
|
|
6
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
7
|
+
var styles = require('./styles.js');
|
|
8
|
+
var Spinner = require('../Spinner/Spinner.js');
|
|
5
9
|
|
|
6
10
|
var Button = function (_a) {
|
|
7
|
-
var isLoading = _a.isLoading, loadingText = _a.loadingText, icon = _a.icon, _b = _a.appearance, appearance = _b === void 0 ? 'primary' : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, _d = _a.sizing, sizing = _d === void 0 ? 'normal' : _d, buttonRef = _a.buttonRef, onClick = _a.onClick, _e = _a.fullWidth, fullWidth = _e === void 0 ? false : _e, props = __rest(_a, ["isLoading", "loadingText", "icon", "appearance", "disabled", "sizing", "buttonRef", "onClick", "fullWidth"]);
|
|
8
|
-
return (jsx(StyledButton, __assign({}, props, { onClick: !disabled && !isLoading ? onClick : undefined, "data-appearance": appearance, "data-sizing": sizing, disabled: disabled, ref: buttonRef, fullWidth: fullWidth, children: jsxs(StyledWrapper, { children: [icon && (typeof icon === 'string' ? jsx(StyledIcon, { "$addMargin": !!props.children, icon: icon }) : icon), isLoading ? (jsxs(Fragment, { children: [jsx(LoadingIconWrapper, { "$addMargin": !!loadingText || !!props.children, children: jsx(Spinner, { variant: "sm" }) }), loadingText || loadingText === '' ? loadingText : 'Loading'] })) : (props.children)] }) })));
|
|
11
|
+
var isLoading = _a.isLoading, loadingText = _a.loadingText, icon = _a.icon, _b = _a.appearance, appearance = _b === void 0 ? 'primary' : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, _d = _a.sizing, sizing = _d === void 0 ? 'normal' : _d, buttonRef = _a.buttonRef, onClick = _a.onClick, _e = _a.fullWidth, fullWidth = _e === void 0 ? false : _e, props = tslib.__rest(_a, ["isLoading", "loadingText", "icon", "appearance", "disabled", "sizing", "buttonRef", "onClick", "fullWidth"]);
|
|
12
|
+
return (jsxRuntime.jsx(styles.StyledButton, tslib.__assign({}, props, { onClick: !disabled && !isLoading ? onClick : undefined, "data-appearance": appearance, "data-sizing": sizing, disabled: disabled, ref: buttonRef, fullWidth: fullWidth, children: jsxRuntime.jsxs(styles.StyledWrapper, { children: [icon && (typeof icon === 'string' ? jsxRuntime.jsx(styles.StyledIcon, { "$addMargin": !!props.children, icon: icon }) : icon), isLoading ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(styles.LoadingIconWrapper, { "$addMargin": !!loadingText || !!props.children, children: jsxRuntime.jsx(Spinner.Spinner, { variant: "sm" }) }), loadingText || loadingText === '' ? loadingText : 'Loading'] })) : (props.children)] }) })));
|
|
9
13
|
};
|
|
10
14
|
|
|
11
|
-
|
|
15
|
+
exports.default = Button;
|
|
12
16
|
//# sourceMappingURL=Button.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","sources":["../../../../packages/ui/Elements/Button/Button.tsx"],"sourcesContent":["import { __assign, __rest } from \"tslib\";\nimport { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { StyledButton, LoadingIconWrapper, StyledIcon, StyledWrapper } from './styles';\nimport { Spinner } from '../Spinner';\nvar Button = function (_a) {\n var isLoading = _a.isLoading, loadingText = _a.loadingText, icon = _a.icon, _b = _a.appearance, appearance = _b === void 0 ? 'primary' : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, _d = _a.sizing, sizing = _d === void 0 ? 'normal' : _d, buttonRef = _a.buttonRef, onClick = _a.onClick, _e = _a.fullWidth, fullWidth = _e === void 0 ? false : _e, props = __rest(_a, [\"isLoading\", \"loadingText\", \"icon\", \"appearance\", \"disabled\", \"sizing\", \"buttonRef\", \"onClick\", \"fullWidth\"]);\n return (_jsx(StyledButton, __assign({}, props, { onClick: !disabled && !isLoading ? onClick : undefined, \"data-appearance\": appearance, \"data-sizing\": sizing, disabled: disabled, ref: buttonRef, fullWidth: fullWidth, children: _jsxs(StyledWrapper, { children: [icon && (typeof icon === 'string' ? _jsx(StyledIcon, { \"$addMargin\": !!props.children, icon: icon }) : icon), isLoading ? (_jsxs(_Fragment, { children: [_jsx(LoadingIconWrapper, { \"$addMargin\": !!loadingText || !!props.children, children: _jsx(Spinner, { variant: \"sm\" }) }), loadingText || loadingText === '' ? loadingText : 'Loading'] })) : (props.children)] }) })));\n};\nexport default Button;\n//# sourceMappingURL=Button.js.map"],"names":["_jsx","_jsxs","_Fragment"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Button.js","sources":["../../../../packages/ui/Elements/Button/Button.tsx"],"sourcesContent":["import { __assign, __rest } from \"tslib\";\nimport { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { StyledButton, LoadingIconWrapper, StyledIcon, StyledWrapper } from './styles';\nimport { Spinner } from '../Spinner';\nvar Button = function (_a) {\n var isLoading = _a.isLoading, loadingText = _a.loadingText, icon = _a.icon, _b = _a.appearance, appearance = _b === void 0 ? 'primary' : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, _d = _a.sizing, sizing = _d === void 0 ? 'normal' : _d, buttonRef = _a.buttonRef, onClick = _a.onClick, _e = _a.fullWidth, fullWidth = _e === void 0 ? false : _e, props = __rest(_a, [\"isLoading\", \"loadingText\", \"icon\", \"appearance\", \"disabled\", \"sizing\", \"buttonRef\", \"onClick\", \"fullWidth\"]);\n return (_jsx(StyledButton, __assign({}, props, { onClick: !disabled && !isLoading ? onClick : undefined, \"data-appearance\": appearance, \"data-sizing\": sizing, disabled: disabled, ref: buttonRef, fullWidth: fullWidth, children: _jsxs(StyledWrapper, { children: [icon && (typeof icon === 'string' ? _jsx(StyledIcon, { \"$addMargin\": !!props.children, icon: icon }) : icon), isLoading ? (_jsxs(_Fragment, { children: [_jsx(LoadingIconWrapper, { \"$addMargin\": !!loadingText || !!props.children, children: _jsx(Spinner, { variant: \"sm\" }) }), loadingText || loadingText === '' ? loadingText : 'Loading'] })) : (props.children)] }) })));\n};\nexport default Button;\n//# sourceMappingURL=Button.js.map"],"names":["__rest","_jsx","StyledButton","__assign","_jsxs","StyledWrapper","StyledIcon","_Fragment","LoadingIconWrapper","Spinner"],"mappings":";;;;;;;;;AAIG,IAAC,MAAM,GAAG,UAAU,EAAE,EAAE;AAC3B,IAAI,IAAI,SAAS,GAAG,EAAE,CAAC,SAAS,EAAE,WAAW,GAAG,EAAE,CAAC,WAAW,EAAE,IAAI,GAAG,EAAE,CAAC,IAAI,EAAE,EAAE,GAAG,EAAE,CAAC,UAAU,EAAE,UAAU,GAAG,EAAE,KAAK,KAAK,CAAC,GAAG,SAAS,GAAG,EAAE,EAAE,EAAE,GAAG,EAAE,CAAC,QAAQ,EAAE,QAAQ,GAAG,EAAE,KAAK,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE,EAAE,EAAE,GAAG,EAAE,CAAC,MAAM,EAAE,MAAM,GAAG,EAAE,KAAK,KAAK,CAAC,GAAG,QAAQ,GAAG,EAAE,EAAE,SAAS,GAAG,EAAE,CAAC,SAAS,EAAE,OAAO,GAAG,EAAE,CAAC,OAAO,EAAE,EAAE,GAAG,EAAE,CAAC,SAAS,EAAE,SAAS,GAAG,EAAE,KAAK,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE,EAAE,KAAK,GAAGA,YAAM,CAAC,EAAE,EAAE,CAAC,WAAW,EAAE,aAAa,EAAE,MAAM,EAAE,YAAY,EAAE,UAAU,EAAE,QAAQ,EAAE,WAAW,EAAE,SAAS,EAAE,WAAW,CAAC,CAAC,CAAC;AAC/e,IAAI,QAAQC,cAAI,CAACC,mBAAY,EAAEC,cAAQ,CAAC,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,CAAC,QAAQ,IAAI,CAAC,SAAS,GAAG,OAAO,GAAG,SAAS,EAAE,iBAAiB,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAEC,eAAK,CAACC,oBAAa,EAAE,EAAE,QAAQ,EAAE,CAAC,IAAI,KAAK,OAAO,IAAI,KAAK,QAAQ,GAAGJ,cAAI,CAACK,iBAAU,EAAE,EAAE,YAAY,EAAE,CAAC,CAAC,KAAK,CAAC,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,GAAG,IAAI,CAAC,EAAE,SAAS,IAAIF,eAAK,CAACG,mBAAS,EAAE,EAAE,QAAQ,EAAE,CAACN,cAAI,CAACO,yBAAkB,EAAE,EAAE,YAAY,EAAE,CAAC,CAAC,WAAW,IAAI,CAAC,CAAC,KAAK,CAAC,QAAQ,EAAE,QAAQ,EAAEP,cAAI,CAACQ,eAAO,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC,EAAE,WAAW,IAAI,WAAW,KAAK,EAAE,GAAG,WAAW,GAAG,SAAS,CAAC,EAAE,CAAC,KAAK,KAAK,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE;AAC1nB;;;;"}
|
|
@@ -1,6 +1,11 @@
|
|
|
1
|
-
|
|
1
|
+
'use strict';
|
|
2
2
|
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
3
4
|
|
|
5
|
+
var Button = require('./Button.js');
|
|
4
6
|
|
|
5
|
-
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
exports.Button = Button.default;
|
|
10
|
+
exports.default = Button.default;
|
|
6
11
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}
|
|
@@ -1,32 +1,38 @@
|
|
|
1
|
-
|
|
2
|
-
import styled, { th } from '@xstyled/styled-components';
|
|
3
|
-
import Icon from '../Icon/Icon.js';
|
|
4
|
-
import 'react/jsx-runtime';
|
|
1
|
+
'use strict';
|
|
5
2
|
|
|
6
|
-
var
|
|
7
|
-
var
|
|
3
|
+
var tslib = require('tslib');
|
|
4
|
+
var styled = require('@xstyled/styled-components');
|
|
5
|
+
var Icon = require('../Icon/Icon.js');
|
|
6
|
+
require('react/jsx-runtime');
|
|
7
|
+
|
|
8
|
+
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
|
|
9
|
+
|
|
10
|
+
var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
|
|
11
|
+
|
|
12
|
+
var StyledWrapper = styled__default.default.span(templateObject_1 || (templateObject_1 = tslib.__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"])));
|
|
13
|
+
var LoadingIconWrapper = styled__default.default.div(templateObject_2 || (templateObject_2 = tslib.__makeTemplateObject(["\n & svg {\n margin-right: ", ";\n }\n"], ["\n & svg {\n margin-right: ", ";\n }\n"])), function (_a) {
|
|
8
14
|
var $addMargin = _a.$addMargin;
|
|
9
15
|
return ($addMargin ? '0.5em' : '0');
|
|
10
16
|
});
|
|
11
|
-
var StyledIcon =
|
|
17
|
+
var StyledIcon = styled__default.default(Icon.default)(templateObject_3 || (templateObject_3 = tslib.__makeTemplateObject(["\n & svg {\n height: 1em;\n margin-right: ", ";\n }\n"], ["\n & svg {\n height: 1em;\n margin-right: ", ";\n }\n"])), function (_a) {
|
|
12
18
|
var $addMargin = _a.$addMargin;
|
|
13
19
|
return ($addMargin ? '0.5em' : '0');
|
|
14
20
|
});
|
|
15
|
-
var StyledButton =
|
|
21
|
+
var StyledButton = styled__default.default.button(templateObject_4 || (templateObject_4 = tslib.__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) {
|
|
16
22
|
var fullWidth = _a.fullWidth;
|
|
17
23
|
return (fullWidth ? '100%' : 'initial');
|
|
18
24
|
}, function (_a) {
|
|
19
25
|
var mt = _a.mt;
|
|
20
|
-
return (mt ?
|
|
26
|
+
return (mt ? 'margin-top: 0;' : '');
|
|
21
27
|
}, function (_a) {
|
|
22
28
|
var mr = _a.mr;
|
|
23
|
-
return (mr ?
|
|
29
|
+
return (mr ? 'margin-right: 0;' : '');
|
|
24
30
|
}, function (_a) {
|
|
25
31
|
var mb = _a.mb;
|
|
26
|
-
return (mb ?
|
|
32
|
+
return (mb ? 'margin-bottom: 0;' : '');
|
|
27
33
|
}, function (_a) {
|
|
28
34
|
var ml = _a.ml;
|
|
29
|
-
return (ml ?
|
|
35
|
+
return (ml ? 'margin-left: 0;' : '');
|
|
30
36
|
}, function (_a) {
|
|
31
37
|
var columnAlign = _a.columnAlign;
|
|
32
38
|
return (columnAlign ? 'flex' : 'inline-flex');
|
|
@@ -36,7 +42,7 @@ var StyledButton = styled.button(templateObject_4 || (templateObject_4 = __makeT
|
|
|
36
42
|
}, function (_a) {
|
|
37
43
|
var columnAlign = _a.columnAlign;
|
|
38
44
|
return (columnAlign ? 'center' : 'auto');
|
|
39
|
-
}, th('fonts.primary'), function (_a) {
|
|
45
|
+
}, styled.th('fonts.primary'), function (_a) {
|
|
40
46
|
var disabled = _a.disabled;
|
|
41
47
|
return (disabled ? 'none' : 'auto');
|
|
42
48
|
}, function (_a) {
|
|
@@ -45,5 +51,8 @@ var StyledButton = styled.button(templateObject_4 || (templateObject_4 = __makeT
|
|
|
45
51
|
});
|
|
46
52
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
|
|
47
53
|
|
|
48
|
-
|
|
54
|
+
exports.LoadingIconWrapper = LoadingIconWrapper;
|
|
55
|
+
exports.StyledButton = StyledButton;
|
|
56
|
+
exports.StyledIcon = StyledIcon;
|
|
57
|
+
exports.StyledWrapper = StyledWrapper;
|
|
49
58
|
//# sourceMappingURL=styles.js.map
|
|
@@ -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 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 ? mt : 0);\n}, function (_a) {\n var mr = _a.mr;\n return (mr ? mr : 0);\n}, function (_a) {\n var mb = _a.mb;\n return (mb ? mb : 0);\n}, function (_a) {\n var ml = _a.ml;\n return (ml ? 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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"}
|
|
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":["styled","__makeTemplateObject","Icon","th"],"mappings":"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"}
|
package/ui/Elements/Card/Card.js
CHANGED
|
@@ -1,26 +1,33 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var tslib = require('tslib');
|
|
6
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
7
|
+
var styled = require('@xstyled/styled-components');
|
|
8
|
+
var styles = require('./styles.js');
|
|
5
9
|
|
|
6
10
|
var Card = function (_a) {
|
|
7
|
-
var children = _a.children, block = _a.block, _b = _a.hasBorder, hasBorder = _b === void 0 ? true : _b, backgroundColor = _a.backgroundColor, rest = __rest(_a, ["children", "block", "hasBorder", "backgroundColor"]);
|
|
8
|
-
return (jsx(CardWrapper, { block: block, children: jsx(StyledCard, __assign({ block: block, hasBorder: hasBorder, backgroundColor: backgroundColor }, rest, { children: children })) }));
|
|
11
|
+
var children = _a.children, block = _a.block, _b = _a.hasBorder, hasBorder = _b === void 0 ? true : _b, backgroundColor = _a.backgroundColor, rest = tslib.__rest(_a, ["children", "block", "hasBorder", "backgroundColor"]);
|
|
12
|
+
return (jsxRuntime.jsx(styles.CardWrapper, { block: block, children: jsxRuntime.jsx(styles.StyledCard, tslib.__assign({ block: block, hasBorder: hasBorder, backgroundColor: backgroundColor }, rest, { children: children })) }));
|
|
9
13
|
};
|
|
10
14
|
var CardBody = function (_a) {
|
|
11
|
-
var children = _a.children, rest = __rest(_a, ["children"]);
|
|
12
|
-
return jsx(StyledBody, __assign({}, rest, { children: children }));
|
|
15
|
+
var children = _a.children, rest = tslib.__rest(_a, ["children"]);
|
|
16
|
+
return jsxRuntime.jsx(styles.StyledBody, tslib.__assign({}, rest, { children: children }));
|
|
13
17
|
};
|
|
14
18
|
var CardImage = function (_a) {
|
|
15
|
-
var children = _a.children, _b = _a.color, color = _b === void 0 ? 'white' : _b, rest = __rest(_a, ["children", "color"]);
|
|
16
|
-
var theme = useTheme();
|
|
17
|
-
var themeColor = th.color(color)({ theme: theme });
|
|
18
|
-
return (jsx(ImageWrapper, { color: themeColor, children: jsx(StyledImage, __assign({}, rest, { children: children })) }));
|
|
19
|
+
var children = _a.children, _b = _a.color, color = _b === void 0 ? 'white' : _b, rest = tslib.__rest(_a, ["children", "color"]);
|
|
20
|
+
var theme = styled.useTheme();
|
|
21
|
+
var themeColor = styled.th.color(color)({ theme: theme });
|
|
22
|
+
return (jsxRuntime.jsx(styles.ImageWrapper, { color: themeColor, children: jsxRuntime.jsx(styles.StyledImage, tslib.__assign({}, rest, { children: children })) }));
|
|
19
23
|
};
|
|
20
24
|
var CardComponent = function (_a) {
|
|
21
25
|
var img = _a.img, body = _a.body, children = _a.children, color = _a.color;
|
|
22
|
-
return (jsxs(Card, { children: [img && (jsx(CardImage, { color: color, children: jsx("img", { src: img, width: "300" }) })), jsxs(CardBody, { children: [body, children] })] }));
|
|
26
|
+
return (jsxRuntime.jsxs(Card, { children: [img && (jsxRuntime.jsx(CardImage, { color: color, children: jsxRuntime.jsx("img", { src: img, width: "300" }) })), jsxRuntime.jsxs(CardBody, { children: [body, children] })] }));
|
|
23
27
|
};
|
|
24
28
|
|
|
25
|
-
|
|
29
|
+
exports.Card = Card;
|
|
30
|
+
exports.CardBody = CardBody;
|
|
31
|
+
exports.CardImage = CardImage;
|
|
32
|
+
exports.default = CardComponent;
|
|
26
33
|
//# sourceMappingURL=Card.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Card.js","sources":["../../../../packages/ui/Elements/Card/Card.tsx"],"sourcesContent":["import { __assign, __rest } from \"tslib\";\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { th } from '@xstyled/styled-components';\nimport { useTheme } from '@xstyled/styled-components';\nimport { StyledCard, CardWrapper, StyledBody, ImageWrapper, StyledImage } from './styles';\nexport var Card = function (_a) {\n var children = _a.children, block = _a.block, _b = _a.hasBorder, hasBorder = _b === void 0 ? true : _b, backgroundColor = _a.backgroundColor, rest = __rest(_a, [\"children\", \"block\", \"hasBorder\", \"backgroundColor\"]);\n return (_jsx(CardWrapper, { block: block, children: _jsx(StyledCard, __assign({ block: block, hasBorder: hasBorder, backgroundColor: backgroundColor }, rest, { children: children })) }));\n};\nexport var CardBody = function (_a) {\n var children = _a.children, rest = __rest(_a, [\"children\"]);\n return _jsx(StyledBody, __assign({}, rest, { children: children }));\n};\nexport var CardImage = function (_a) {\n var children = _a.children, _b = _a.color, color = _b === void 0 ? 'white' : _b, rest = __rest(_a, [\"children\", \"color\"]);\n var theme = useTheme();\n var themeColor = th.color(color)({ theme: theme });\n return (_jsx(ImageWrapper, { color: themeColor, children: _jsx(StyledImage, __assign({}, rest, { children: children })) }));\n};\nvar CardComponent = function (_a) {\n var img = _a.img, body = _a.body, children = _a.children, color = _a.color;\n return (_jsxs(Card, { children: [img && (_jsx(CardImage, { color: color, children: _jsx(\"img\", { src: img, width: \"300\" }) })), _jsxs(CardBody, { children: [body, children] })] }));\n};\nexport default CardComponent;\n//# sourceMappingURL=Card.js.map"],"names":["_jsx","_jsxs"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Card.js","sources":["../../../../packages/ui/Elements/Card/Card.tsx"],"sourcesContent":["import { __assign, __rest } from \"tslib\";\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { th } from '@xstyled/styled-components';\nimport { useTheme } from '@xstyled/styled-components';\nimport { StyledCard, CardWrapper, StyledBody, ImageWrapper, StyledImage } from './styles';\nexport var Card = function (_a) {\n var children = _a.children, block = _a.block, _b = _a.hasBorder, hasBorder = _b === void 0 ? true : _b, backgroundColor = _a.backgroundColor, rest = __rest(_a, [\"children\", \"block\", \"hasBorder\", \"backgroundColor\"]);\n return (_jsx(CardWrapper, { block: block, children: _jsx(StyledCard, __assign({ block: block, hasBorder: hasBorder, backgroundColor: backgroundColor }, rest, { children: children })) }));\n};\nexport var CardBody = function (_a) {\n var children = _a.children, rest = __rest(_a, [\"children\"]);\n return _jsx(StyledBody, __assign({}, rest, { children: children }));\n};\nexport var CardImage = function (_a) {\n var children = _a.children, _b = _a.color, color = _b === void 0 ? 'white' : _b, rest = __rest(_a, [\"children\", \"color\"]);\n var theme = useTheme();\n var themeColor = th.color(color)({ theme: theme });\n return (_jsx(ImageWrapper, { color: themeColor, children: _jsx(StyledImage, __assign({}, rest, { children: children })) }));\n};\nvar CardComponent = function (_a) {\n var img = _a.img, body = _a.body, children = _a.children, color = _a.color;\n return (_jsxs(Card, { children: [img && (_jsx(CardImage, { color: color, children: _jsx(\"img\", { src: img, width: \"300\" }) })), _jsxs(CardBody, { children: [body, children] })] }));\n};\nexport default CardComponent;\n//# sourceMappingURL=Card.js.map"],"names":["__rest","_jsx","CardWrapper","StyledCard","__assign","StyledBody","useTheme","th","ImageWrapper","StyledImage","_jsxs"],"mappings":";;;;;;;;;AAKU,IAAC,IAAI,GAAG,UAAU,EAAE,EAAE;AAChC,IAAI,IAAI,QAAQ,GAAG,EAAE,CAAC,QAAQ,EAAE,KAAK,GAAG,EAAE,CAAC,KAAK,EAAE,EAAE,GAAG,EAAE,CAAC,SAAS,EAAE,SAAS,GAAG,EAAE,KAAK,KAAK,CAAC,GAAG,IAAI,GAAG,EAAE,EAAE,eAAe,GAAG,EAAE,CAAC,eAAe,EAAE,IAAI,GAAGA,YAAM,CAAC,EAAE,EAAE,CAAC,UAAU,EAAE,OAAO,EAAE,WAAW,EAAE,iBAAiB,CAAC,CAAC,CAAC;AAC3N,IAAI,QAAQC,cAAI,CAACC,kBAAW,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAED,cAAI,CAACE,iBAAU,EAAEC,cAAQ,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,eAAe,EAAE,eAAe,EAAE,EAAE,IAAI,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE;AAC/L,EAAE;AACQ,IAAC,QAAQ,GAAG,UAAU,EAAE,EAAE;AACpC,IAAI,IAAI,QAAQ,GAAG,EAAE,CAAC,QAAQ,EAAE,IAAI,GAAGJ,YAAM,CAAC,EAAE,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;AAChE,IAAI,OAAOC,cAAI,CAACI,iBAAU,EAAED,cAAQ,CAAC,EAAE,EAAE,IAAI,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAC;AACxE,EAAE;AACQ,IAAC,SAAS,GAAG,UAAU,EAAE,EAAE;AACrC,IAAI,IAAI,QAAQ,GAAG,EAAE,CAAC,QAAQ,EAAE,EAAE,GAAG,EAAE,CAAC,KAAK,EAAE,KAAK,GAAG,EAAE,KAAK,KAAK,CAAC,GAAG,OAAO,GAAG,EAAE,EAAE,IAAI,GAAGJ,YAAM,CAAC,EAAE,EAAE,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC,CAAC;AAC9H,IAAI,IAAI,KAAK,GAAGM,eAAQ,EAAE,CAAC;AAC3B,IAAI,IAAI,UAAU,GAAGC,SAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,CAAC;AACvD,IAAI,QAAQN,cAAI,CAACO,mBAAY,EAAE,EAAE,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAEP,cAAI,CAACQ,kBAAW,EAAEL,cAAQ,CAAC,EAAE,EAAE,IAAI,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE;AAChI,EAAE;AACC,IAAC,aAAa,GAAG,UAAU,EAAE,EAAE;AAClC,IAAI,IAAI,GAAG,GAAG,EAAE,CAAC,GAAG,EAAE,IAAI,GAAG,EAAE,CAAC,IAAI,EAAE,QAAQ,GAAG,EAAE,CAAC,QAAQ,EAAE,KAAK,GAAG,EAAE,CAAC,KAAK,CAAC;AAC/E,IAAI,QAAQM,eAAK,CAAC,IAAI,EAAE,EAAE,QAAQ,EAAE,CAAC,GAAG,KAAKT,cAAI,CAAC,SAAS,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAEA,cAAI,CAAC,KAAK,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC,EAAES,eAAK,CAAC,QAAQ,EAAE,EAAE,QAAQ,EAAE,CAAC,IAAI,EAAE,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE;AACzL;;;;;;;"}
|
|
@@ -1,7 +1,13 @@
|
|
|
1
|
-
|
|
2
|
-
export { Card, CardBody, CardImage } from './Card.js';
|
|
1
|
+
'use strict';
|
|
3
2
|
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
+
var Card = require('./Card.js');
|
|
5
6
|
|
|
6
|
-
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
exports.Card = Card.Card;
|
|
10
|
+
exports.CardBody = Card.CardBody;
|
|
11
|
+
exports.CardImage = Card.CardImage;
|
|
12
|
+
exports.default = Card.default;
|
|
7
13
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}
|
|
@@ -1,12 +1,18 @@
|
|
|
1
|
-
|
|
2
|
-
import styled, { css, th, x, down } from '@xstyled/styled-components';
|
|
1
|
+
'use strict';
|
|
3
2
|
|
|
4
|
-
var
|
|
5
|
-
var
|
|
3
|
+
var tslib = require('tslib');
|
|
4
|
+
var styled = require('@xstyled/styled-components');
|
|
5
|
+
|
|
6
|
+
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
|
|
7
|
+
|
|
8
|
+
var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
|
|
9
|
+
|
|
10
|
+
var wrapper = styled.css(templateObject_1 || (templateObject_1 = tslib.__makeTemplateObject(["\n display: flex;\n box-sizing: border-box;\n font-family: ", ";\n :after {\n box-sizing: border-box;\n }\n"], ["\n display: flex;\n box-sizing: border-box;\n font-family: ", ";\n :after {\n box-sizing: border-box;\n }\n"])), styled.th('fonts.primary'));
|
|
11
|
+
var CardWrapper = styled__default.default.div(templateObject_2 || (templateObject_2 = tslib.__makeTemplateObject(["\n ", ";\n display: ", ";\n justify-content: center;\n flex-wrap: wrap;\n"], ["\n ", ";\n display: ", ";\n justify-content: center;\n flex-wrap: wrap;\n"])), wrapper, function (_a) {
|
|
6
12
|
var block = _a.block;
|
|
7
13
|
return (block ? 'block' : 'inline-flex');
|
|
8
14
|
});
|
|
9
|
-
var StyledCard =
|
|
15
|
+
var StyledCard = styled__default.default.div(templateObject_3 || (templateObject_3 = tslib.__makeTemplateObject(["\n justify-content: space-between;\n display: ", ";\n padding: ", ";\n box-shadow: ", ";\n border: ", ";\n background-color: ", ";\n border-color: lightGray3;\n border-radius: 4px;\n"], ["\n justify-content: space-between;\n display: ", ";\n padding: ", ";\n box-shadow: ", ";\n border: ", ";\n background-color: ", ";\n border-color: lightGray3;\n border-radius: 4px;\n"])), function (_a) {
|
|
10
16
|
var block = _a.block;
|
|
11
17
|
return (block ? 'block' : 'inline-flex');
|
|
12
18
|
}, function (_a) {
|
|
@@ -14,21 +20,25 @@ var StyledCard = styled.div(templateObject_3 || (templateObject_3 = __makeTempla
|
|
|
14
20
|
return p || 'initial';
|
|
15
21
|
}, function (_a) {
|
|
16
22
|
var shadow = _a.shadow;
|
|
17
|
-
return (shadow ? th.shadow('smooth') : 'none');
|
|
23
|
+
return (shadow ? styled.th.shadow('smooth') : 'none');
|
|
18
24
|
}, function (_a) {
|
|
19
25
|
var hasBorder = _a.hasBorder;
|
|
20
|
-
return (hasBorder ? th.border('slim') : 'none');
|
|
26
|
+
return (hasBorder ? styled.th.border('slim') : 'none');
|
|
21
27
|
}, function (_a) {
|
|
22
28
|
var backgroundColor = _a.backgroundColor;
|
|
23
|
-
return (backgroundColor ? th.color(backgroundColor) : 'initial');
|
|
29
|
+
return (backgroundColor ? styled.th.color(backgroundColor) : 'initial');
|
|
24
30
|
});
|
|
25
|
-
var ImageWrapper = styled
|
|
31
|
+
var ImageWrapper = styled__default.default(styled.x.div)(templateObject_5 || (templateObject_5 = tslib.__makeTemplateObject(["\n ", ";\n justify-content: center;\n flex-direction: column;\n background-color: ", ";\n ", "\n"], ["\n ", ";\n justify-content: center;\n flex-direction: column;\n background-color: ", ";\n ", "\n"])), wrapper, function (_a) {
|
|
26
32
|
var color = _a.color;
|
|
27
33
|
return color;
|
|
28
|
-
}, down('lg', css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: none;\n "], ["\n display: none;\n "])))));
|
|
29
|
-
var StyledImage = styled
|
|
30
|
-
var StyledBody = styled
|
|
34
|
+
}, styled.down('lg', styled.css(templateObject_4 || (templateObject_4 = tslib.__makeTemplateObject(["\n display: none;\n "], ["\n display: none;\n "])))));
|
|
35
|
+
var StyledImage = styled__default.default(styled.x.div)(templateObject_6 || (templateObject_6 = tslib.__makeTemplateObject(["\n display: flex;\n align-self: center;\n justify-content: center;\n object-fit: cover;\n"], ["\n display: flex;\n align-self: center;\n justify-content: center;\n object-fit: cover;\n"])));
|
|
36
|
+
var StyledBody = styled__default.default(styled.x.div)(templateObject_7 || (templateObject_7 = tslib.__makeTemplateObject(["\n ", ";\n justify-content: center;\n flex-direction: column;\n"], ["\n ", ";\n justify-content: center;\n flex-direction: column;\n"])), wrapper);
|
|
31
37
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
|
|
32
38
|
|
|
33
|
-
|
|
39
|
+
exports.CardWrapper = CardWrapper;
|
|
40
|
+
exports.ImageWrapper = ImageWrapper;
|
|
41
|
+
exports.StyledBody = StyledBody;
|
|
42
|
+
exports.StyledCard = StyledCard;
|
|
43
|
+
exports.StyledImage = StyledImage;
|
|
34
44
|
//# sourceMappingURL=styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sources":["../../../../packages/ui/Elements/Card/styles.ts"],"sourcesContent":["import { __makeTemplateObject } from \"tslib\";\nimport styled, { x, css, down } from '@xstyled/styled-components';\nimport { th } from '@xstyled/styled-components';\nvar wrapper = css(templateObject_1 || (templateObject_1 = __makeTemplateObject([\"\\n display: flex;\\n box-sizing: border-box;\\n font-family: \", \";\\n :after {\\n box-sizing: border-box;\\n }\\n\"], [\"\\n display: flex;\\n box-sizing: border-box;\\n font-family: \", \";\\n :after {\\n box-sizing: border-box;\\n }\\n\"])), th('fonts.primary'));\nexport var CardWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject([\"\\n \", \";\\n display: \", \";\\n justify-content: center;\\n flex-wrap: wrap;\\n\"], [\"\\n \", \";\\n display: \", \";\\n justify-content: center;\\n flex-wrap: wrap;\\n\"])), wrapper, function (_a) {\n var block = _a.block;\n return (block ? 'block' : 'inline-flex');\n});\nexport var StyledCard = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject([\"\\n justify-content: space-between;\\n display: \", \";\\n padding: \", \";\\n box-shadow: \", \";\\n border: \", \";\\n background-color: \", \";\\n border-color: lightGray3;\\n border-radius: 4px;\\n\"], [\"\\n justify-content: space-between;\\n display: \", \";\\n padding: \", \";\\n box-shadow: \", \";\\n border: \", \";\\n background-color: \", \";\\n border-color: lightGray3;\\n border-radius: 4px;\\n\"])), function (_a) {\n var block = _a.block;\n return (block ? 'block' : 'inline-flex');\n}, function (_a) {\n var p = _a.p;\n return p || 'initial';\n}, function (_a) {\n var shadow = _a.shadow;\n return (shadow ? th.shadow('smooth') : 'none');\n}, function (_a) {\n var hasBorder = _a.hasBorder;\n return (hasBorder ? th.border('slim') : 'none');\n}, function (_a) {\n var backgroundColor = _a.backgroundColor;\n return (backgroundColor ? th.color(backgroundColor) : 'initial');\n});\nexport var ImageWrapper = styled(x.div)(templateObject_5 || (templateObject_5 = __makeTemplateObject([\"\\n \", \";\\n justify-content: center;\\n flex-direction: column;\\n background-color: \", \";\\n \", \"\\n\"], [\"\\n \", \";\\n justify-content: center;\\n flex-direction: column;\\n background-color: \", \";\\n \", \"\\n\"])), wrapper, function (_a) {\n var color = _a.color;\n return color;\n}, down('lg', css(templateObject_4 || (templateObject_4 = __makeTemplateObject([\"\\n display: none;\\n \"], [\"\\n display: none;\\n \"])))));\nexport var StyledImage = styled(x.div)(templateObject_6 || (templateObject_6 = __makeTemplateObject([\"\\n display: flex;\\n align-self: center;\\n justify-content: center;\\n object-fit: cover;\\n\"], [\"\\n display: flex;\\n align-self: center;\\n justify-content: center;\\n object-fit: cover;\\n\"])));\nexport var StyledBody = styled(x.div)(templateObject_7 || (templateObject_7 = __makeTemplateObject([\"\\n \", \";\\n justify-content: center;\\n flex-direction: column;\\n\"], [\"\\n \", \";\\n justify-content: center;\\n flex-direction: column;\\n\"])), wrapper);\nvar templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;\n//# sourceMappingURL=styles.js.map"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"styles.js","sources":["../../../../packages/ui/Elements/Card/styles.ts"],"sourcesContent":["import { __makeTemplateObject } from \"tslib\";\nimport styled, { x, css, down } from '@xstyled/styled-components';\nimport { th } from '@xstyled/styled-components';\nvar wrapper = css(templateObject_1 || (templateObject_1 = __makeTemplateObject([\"\\n display: flex;\\n box-sizing: border-box;\\n font-family: \", \";\\n :after {\\n box-sizing: border-box;\\n }\\n\"], [\"\\n display: flex;\\n box-sizing: border-box;\\n font-family: \", \";\\n :after {\\n box-sizing: border-box;\\n }\\n\"])), th('fonts.primary'));\nexport var CardWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject([\"\\n \", \";\\n display: \", \";\\n justify-content: center;\\n flex-wrap: wrap;\\n\"], [\"\\n \", \";\\n display: \", \";\\n justify-content: center;\\n flex-wrap: wrap;\\n\"])), wrapper, function (_a) {\n var block = _a.block;\n return (block ? 'block' : 'inline-flex');\n});\nexport var StyledCard = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject([\"\\n justify-content: space-between;\\n display: \", \";\\n padding: \", \";\\n box-shadow: \", \";\\n border: \", \";\\n background-color: \", \";\\n border-color: lightGray3;\\n border-radius: 4px;\\n\"], [\"\\n justify-content: space-between;\\n display: \", \";\\n padding: \", \";\\n box-shadow: \", \";\\n border: \", \";\\n background-color: \", \";\\n border-color: lightGray3;\\n border-radius: 4px;\\n\"])), function (_a) {\n var block = _a.block;\n return (block ? 'block' : 'inline-flex');\n}, function (_a) {\n var p = _a.p;\n return p || 'initial';\n}, function (_a) {\n var shadow = _a.shadow;\n return (shadow ? th.shadow('smooth') : 'none');\n}, function (_a) {\n var hasBorder = _a.hasBorder;\n return (hasBorder ? th.border('slim') : 'none');\n}, function (_a) {\n var backgroundColor = _a.backgroundColor;\n return (backgroundColor ? th.color(backgroundColor) : 'initial');\n});\nexport var ImageWrapper = styled(x.div)(templateObject_5 || (templateObject_5 = __makeTemplateObject([\"\\n \", \";\\n justify-content: center;\\n flex-direction: column;\\n background-color: \", \";\\n \", \"\\n\"], [\"\\n \", \";\\n justify-content: center;\\n flex-direction: column;\\n background-color: \", \";\\n \", \"\\n\"])), wrapper, function (_a) {\n var color = _a.color;\n return color;\n}, down('lg', css(templateObject_4 || (templateObject_4 = __makeTemplateObject([\"\\n display: none;\\n \"], [\"\\n display: none;\\n \"])))));\nexport var StyledImage = styled(x.div)(templateObject_6 || (templateObject_6 = __makeTemplateObject([\"\\n display: flex;\\n align-self: center;\\n justify-content: center;\\n object-fit: cover;\\n\"], [\"\\n display: flex;\\n align-self: center;\\n justify-content: center;\\n object-fit: cover;\\n\"])));\nexport var StyledBody = styled(x.div)(templateObject_7 || (templateObject_7 = __makeTemplateObject([\"\\n \", \";\\n justify-content: center;\\n flex-direction: column;\\n\"], [\"\\n \", \";\\n justify-content: center;\\n flex-direction: column;\\n\"])), wrapper);\nvar templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;\n//# sourceMappingURL=styles.js.map"],"names":["css","__makeTemplateObject","th","styled","x","down"],"mappings":"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"}
|