@mailstep/design-system 0.1.5 → 0.1.7
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 +12 -14
- package/ui/Blocks/CornerDialog/CornerDialog.js.map +1 -1
- package/ui/Blocks/CornerDialog/index.js +2 -6
- package/ui/Blocks/CornerDialog/index.js.map +1 -1
- package/ui/Blocks/CornerDialog/styles.js +11 -22
- package/ui/Blocks/CornerDialog/styles.js.map +1 -1
- package/ui/Blocks/CornerDialog/utils.js +1 -4
- package/ui/Blocks/CornerDialog/utils.js.map +1 -1
- package/ui/Blocks/ImageList/ImageList.js +17 -19
- package/ui/Blocks/ImageList/ImageList.js.map +1 -1
- package/ui/Blocks/ImageList/components/AddPhoto/index.js +9 -11
- package/ui/Blocks/ImageList/components/AddPhoto/index.js.map +1 -1
- package/ui/Blocks/ImageList/components/AddPhoto/styles.js +5 -12
- package/ui/Blocks/ImageList/components/AddPhoto/styles.js.map +1 -1
- package/ui/Blocks/ImageList/components/CloseButton/index.js +6 -8
- package/ui/Blocks/ImageList/components/CloseButton/index.js.map +1 -1
- package/ui/Blocks/ImageList/components/CloseButton/styles.js +4 -10
- package/ui/Blocks/ImageList/components/CloseButton/styles.js.map +1 -1
- package/ui/Blocks/ImageList/components/ImageElement/index.js +7 -9
- package/ui/Blocks/ImageList/components/ImageElement/index.js.map +1 -1
- package/ui/Blocks/ImageList/components/ImageElement/styles.js +5 -11
- package/ui/Blocks/ImageList/components/ImageElement/styles.js.map +1 -1
- package/ui/Blocks/ImageList/components/ImageTag/index.js +5 -7
- package/ui/Blocks/ImageList/components/ImageTag/index.js.map +1 -1
- package/ui/Blocks/ImageList/components/ImageTag/styles.js +4 -10
- package/ui/Blocks/ImageList/components/ImageTag/styles.js.map +1 -1
- package/ui/Blocks/ImageList/index.js +2 -6
- package/ui/Blocks/ImageList/index.js.map +1 -1
- package/ui/Blocks/ImageList/styles.js +4 -10
- package/ui/Blocks/ImageList/styles.js.map +1 -1
- package/ui/Blocks/LightBox/LightBox.js +10 -12
- package/ui/Blocks/LightBox/LightBox.js.map +1 -1
- package/ui/Blocks/LightBox/hooks/useLightBox.js +6 -8
- package/ui/Blocks/LightBox/hooks/useLightBox.js.map +1 -1
- package/ui/Blocks/LightBox/index.js +4 -8
- package/ui/Blocks/LightBox/index.js.map +1 -1
- package/ui/Blocks/LightBox/styles.js +6 -14
- package/ui/Blocks/LightBox/styles.js.map +1 -1
- package/ui/Blocks/Modal/Modal.js +18 -20
- package/ui/Blocks/Modal/Modal.js.map +1 -1
- package/ui/Blocks/Modal/hooks/useClickOutside.js +6 -8
- package/ui/Blocks/Modal/hooks/useClickOutside.js.map +1 -1
- package/ui/Blocks/Modal/hooks/useModal.js +6 -8
- package/ui/Blocks/Modal/hooks/useModal.js.map +1 -1
- package/ui/Blocks/Modal/index.js +3 -7
- package/ui/Blocks/Modal/index.js.map +1 -1
- package/ui/Blocks/Modal/styles.js +16 -29
- package/ui/Blocks/Modal/styles.js.map +1 -1
- package/ui/Blocks/Modal/utils.js +1 -4
- package/ui/Blocks/Modal/utils.js.map +1 -1
- package/ui/Blocks/Tabs/Tabs.js +11 -13
- package/ui/Blocks/Tabs/Tabs.js.map +1 -1
- package/ui/Blocks/Tabs/hooks/useTabs.js +4 -6
- package/ui/Blocks/Tabs/hooks/useTabs.js.map +1 -1
- package/ui/Blocks/Tabs/index.js +3 -8
- package/ui/Blocks/Tabs/index.js.map +1 -1
- package/ui/Blocks/Tabs/styles.js +9 -19
- package/ui/Blocks/Tabs/styles.js.map +1 -1
- package/ui/Elements/Alert/Alert.js +10 -14
- package/ui/Elements/Alert/Alert.js.map +1 -1
- package/ui/Elements/Alert/index.js +2 -7
- package/ui/Elements/Alert/index.js.map +1 -1
- package/ui/Elements/Alert/styles.js +15 -29
- package/ui/Elements/Alert/styles.js.map +1 -1
- package/ui/Elements/Avatar/Avatar.js +8 -14
- package/ui/Elements/Avatar/Avatar.js.map +1 -1
- package/ui/Elements/Avatar/index.js +2 -7
- package/ui/Elements/Avatar/index.js.map +1 -1
- package/ui/Elements/Badge/Badge.js +13 -21
- package/ui/Elements/Badge/Badge.js.map +1 -1
- package/ui/Elements/Badge/index.js +2 -7
- package/ui/Elements/Badge/index.js.map +1 -1
- package/ui/Elements/BorderedBox/BorderedBox.js +7 -15
- package/ui/Elements/BorderedBox/BorderedBox.js.map +1 -1
- package/ui/Elements/BorderedBox/index.js +2 -7
- package/ui/Elements/BorderedBox/index.js.map +1 -1
- package/ui/Elements/Button/Button.js +7 -11
- package/ui/Elements/Button/Button.js.map +1 -1
- package/ui/Elements/Button/index.js +2 -7
- package/ui/Elements/Button/index.js.map +1 -1
- package/ui/Elements/Button/styles.js +10 -19
- package/ui/Elements/Button/styles.js.map +1 -1
- package/ui/Elements/Card/Card.js +14 -21
- package/ui/Elements/Card/Card.js.map +1 -1
- package/ui/Elements/Card/index.d.ts +5 -4
- package/ui/Elements/Card/index.js +3 -9
- package/ui/Elements/Card/index.js.map +1 -1
- package/ui/Elements/Card/styles.d.ts +12 -0
- package/ui/Elements/Card/styles.js +13 -23
- package/ui/Elements/Card/styles.js.map +1 -1
- package/ui/Elements/Card/types.d.ts +8 -13
- package/ui/Elements/Dropdown/Dropdown.js +10 -18
- package/ui/Elements/Dropdown/Dropdown.js.map +1 -1
- package/ui/Elements/Dropdown/index.js +2 -7
- package/ui/Elements/Dropdown/index.js.map +1 -1
- package/ui/Elements/ErrorMessage/ErrorMessage.js +9 -17
- package/ui/Elements/ErrorMessage/ErrorMessage.js.map +1 -1
- package/ui/Elements/ErrorMessage/index.js +2 -7
- package/ui/Elements/ErrorMessage/index.js.map +1 -1
- package/ui/Elements/Icon/Icon.js +214 -224
- package/ui/Elements/Icon/Icon.js.map +1 -1
- package/ui/Elements/Icon/icons/FlagCZ.js +4 -6
- package/ui/Elements/Icon/icons/FlagCZ.js.map +1 -1
- package/ui/Elements/Icon/icons/FlagUSA.js +4 -6
- package/ui/Elements/Icon/icons/FlagUSA.js.map +1 -1
- package/ui/Elements/Icon/index.js +5 -10
- package/ui/Elements/Icon/index.js.map +1 -1
- package/ui/Elements/Image/Image.js +5 -9
- package/ui/Elements/Image/Image.js.map +1 -1
- package/ui/Elements/Image/index.js +2 -7
- package/ui/Elements/Image/index.js.map +1 -1
- package/ui/Elements/Label/Label.js +10 -17
- package/ui/Elements/Label/Label.js.map +1 -1
- package/ui/Elements/Label/index.js +3 -8
- package/ui/Elements/Label/index.js.map +1 -1
- package/ui/Elements/Line/Line.js +6 -14
- package/ui/Elements/Line/Line.js.map +1 -1
- package/ui/Elements/Line/index.js +2 -7
- package/ui/Elements/Line/index.js.map +1 -1
- package/ui/Elements/Link/Link.js +15 -23
- package/ui/Elements/Link/Link.js.map +1 -1
- package/ui/Elements/Link/index.js +2 -7
- package/ui/Elements/Link/index.js.map +1 -1
- package/ui/Elements/Logo/Logo.js +27 -35
- package/ui/Elements/Logo/Logo.js.map +1 -1
- package/ui/Elements/Logo/assets/mailship/logo_black.png.js +1 -5
- package/ui/Elements/Logo/assets/mailship/logo_black.png.js.map +1 -1
- package/ui/Elements/Logo/assets/mailship/logo_m.png.js +1 -5
- package/ui/Elements/Logo/assets/mailship/logo_m.png.js.map +1 -1
- package/ui/Elements/Logo/assets/mailship/logo_white.png.js +1 -5
- package/ui/Elements/Logo/assets/mailship/logo_white.png.js.map +1 -1
- package/ui/Elements/Logo/assets/mailship/mailship-logo.svg.js +2 -6
- package/ui/Elements/Logo/assets/mailship/mailship-logo.svg.js.map +1 -1
- package/ui/Elements/Logo/assets/mailstep/mailstep_black.svg.js +2 -6
- package/ui/Elements/Logo/assets/mailstep/mailstep_black.svg.js.map +1 -1
- package/ui/Elements/Logo/assets/mailstep/mailstep_white.svg.js +2 -6
- package/ui/Elements/Logo/assets/mailstep/mailstep_white.svg.js.map +1 -1
- package/ui/Elements/Logo/assets/mailstock/mailstock.svg.js +2 -6
- package/ui/Elements/Logo/assets/mailstock/mailstock.svg.js.map +1 -1
- package/ui/Elements/Logo/assets/mailwise/mailwiseLogo.svg.js +2 -6
- package/ui/Elements/Logo/assets/mailwise/mailwiseLogo.svg.js.map +1 -1
- package/ui/Elements/Logo/assets/mailwise/mailwiseLogoSmall.svg.js +2 -6
- package/ui/Elements/Logo/assets/mailwise/mailwiseLogoSmall.svg.js.map +1 -1
- package/ui/Elements/Logo/assets/mailwrap/mailwrapLogo.svg.js +2 -6
- package/ui/Elements/Logo/assets/mailwrap/mailwrapLogo.svg.js.map +1 -1
- package/ui/Elements/Logo/index.js +2 -7
- package/ui/Elements/Logo/index.js.map +1 -1
- package/ui/Elements/Pagination/Pagination.js +7 -11
- package/ui/Elements/Pagination/Pagination.js.map +1 -1
- package/ui/Elements/Pagination/index.js +2 -7
- package/ui/Elements/Pagination/index.js.map +1 -1
- package/ui/Elements/Pagination/styled.js +14 -25
- package/ui/Elements/Pagination/styled.js.map +1 -1
- package/ui/Elements/Paragraph/Paragraph.js +3 -7
- package/ui/Elements/Paragraph/Paragraph.js.map +1 -1
- package/ui/Elements/Paragraph/index.js +2 -7
- package/ui/Elements/Paragraph/index.js.map +1 -1
- package/ui/Elements/Portal/index.js +6 -15
- package/ui/Elements/Portal/index.js.map +1 -1
- package/ui/Elements/ProgressBar/ProgressBar.js +4 -8
- package/ui/Elements/ProgressBar/ProgressBar.js.map +1 -1
- package/ui/Elements/ProgressBar/index.js +2 -7
- package/ui/Elements/ProgressBar/index.js.map +1 -1
- package/ui/Elements/ProgressBar/styles.js +14 -22
- package/ui/Elements/ProgressBar/styles.js.map +1 -1
- package/ui/Elements/SimpleLink/SimpleLink.js +7 -15
- package/ui/Elements/SimpleLink/SimpleLink.js.map +1 -1
- package/ui/Elements/SimpleLink/index.js +2 -7
- package/ui/Elements/SimpleLink/index.js.map +1 -1
- package/ui/Elements/SpaceAround/SpaceAround.js +12 -20
- package/ui/Elements/SpaceAround/SpaceAround.js.map +1 -1
- package/ui/Elements/SpaceAround/index.js +2 -7
- package/ui/Elements/SpaceAround/index.js.map +1 -1
- package/ui/Elements/Spinner/Spinner.js +4 -10
- package/ui/Elements/Spinner/Spinner.js.map +1 -1
- package/ui/Elements/Spinner/index.js +2 -7
- package/ui/Elements/Spinner/index.js.map +1 -1
- package/ui/Elements/Spinner/styles.js +9 -16
- package/ui/Elements/Spinner/styles.js.map +1 -1
- package/ui/Elements/Tag/Tag.js +7 -16
- package/ui/Elements/Tag/Tag.js.map +1 -1
- package/ui/Elements/Tag/index.js +2 -7
- package/ui/Elements/Tag/index.js.map +1 -1
- package/ui/Elements/Tag/palletes.js +1 -3
- package/ui/Elements/Tag/palletes.js.map +1 -1
- package/ui/Elements/Tag/types.d.ts +1 -0
- package/ui/Elements/Text/Text.js +5 -9
- package/ui/Elements/Text/Text.js.map +1 -1
- package/ui/Elements/Toast/Toast.js +10 -18
- package/ui/Elements/Toast/Toast.js.map +1 -1
- package/ui/Elements/Toast/index.js +2 -7
- package/ui/Elements/Toast/index.js.map +1 -1
- package/ui/Elements/Toggle/Toggle.js +15 -23
- package/ui/Elements/Toggle/Toggle.js.map +1 -1
- package/ui/Elements/Toggle/index.js +2 -7
- package/ui/Elements/Toggle/index.js.map +1 -1
- package/ui/Elements/Typography/Typography.js +17 -31
- package/ui/Elements/Typography/Typography.js.map +1 -1
- package/ui/Elements/Typography/index.js +3 -19
- package/ui/Elements/Typography/index.js.map +1 -1
- package/ui/Forms/Checkbox/Checkbox.js +9 -13
- package/ui/Forms/Checkbox/Checkbox.js.map +1 -1
- package/ui/Forms/Checkbox/index.js +2 -7
- package/ui/Forms/Checkbox/index.js.map +1 -1
- package/ui/Forms/Checkbox/styles.js +9 -18
- package/ui/Forms/Checkbox/styles.js.map +1 -1
- package/ui/Forms/Input/Input.js +18 -20
- package/ui/Forms/Input/Input.js.map +1 -1
- package/ui/Forms/Input/index.js +2 -7
- package/ui/Forms/Input/index.js.map +1 -1
- package/ui/Forms/Input/styles.js +19 -32
- package/ui/Forms/Input/styles.js.map +1 -1
- package/ui/Forms/RadioButton/RadioButton.js +6 -10
- package/ui/Forms/RadioButton/RadioButton.js.map +1 -1
- package/ui/Forms/RadioButton/index.js +2 -7
- package/ui/Forms/RadioButton/index.js.map +1 -1
- package/ui/Forms/RadioButton/styles.js +9 -20
- package/ui/Forms/RadioButton/styles.js.map +1 -1
- package/ui/ThemeProvider/ThemeProvider.js +5 -9
- package/ui/ThemeProvider/ThemeProvider.js.map +1 -1
- package/ui/ThemeProvider/index.js +2 -7
- package/ui/ThemeProvider/index.js.map +1 -1
- package/ui/ThemeProvider/themes/default.js +1 -5
- package/ui/ThemeProvider/themes/default.js.map +1 -1
- package/ui/ThemeProvider/themes/index.js +7 -11
- package/ui/ThemeProvider/themes/index.js.map +1 -1
- package/ui/ThemeProvider/themes/light.js +1 -5
- package/ui/ThemeProvider/themes/light.js.map +1 -1
- package/ui/ThemeProvider/themes/mailwise.js +1 -5
- package/ui/ThemeProvider/themes/mailwise.js.map +1 -1
- package/ui/dts/Elements/Tag/types.d.ts +1 -0
- package/ui/index.d.ts +1 -1
- package/ui/index.js +45 -113
- package/ui/index.js.map +1 -1
- package/ui/utils/CreateRgba/createRgba.js +6 -15
- package/ui/utils/CreateRgba/createRgba.js.map +1 -1
- package/ui/utils/KeyPress/KeyPress.js +4 -8
- package/ui/utils/KeyPress/KeyPress.js.map +1 -1
- package/ui/utils/KeyPress/index.js +2 -6
- package/ui/utils/KeyPress/index.js.map +1 -1
- package/ui/utils/index.js +5 -11
- package/ui/utils/index.js.map +1 -1
- package/ui/Elements/Card/Card.d.ts +0 -8
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toggle.js","sources":["../../../../packages/ui/Elements/Toggle/Toggle.tsx"],"sourcesContent":["import { __assign, __makeTemplateObject, __rest } from \"tslib\";\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport styled, { css } from '@xstyled/styled-components';\nimport { FieldLabel } from '../Label';\nimport { SpaceAroundWrap } from '../SpaceAround';\nvar StyledSpaceAroundWrap = styled(SpaceAroundWrap)(templateObject_1 || (templateObject_1 = __makeTemplateObject([\"\\n \", \"\\n\"], [\"\\n \", \"\\n\"])), function (_a) {\n var $labelPosition = _a.$labelPosition;\n return ($labelPosition === 'left' ? 'display: flex; align-items: center; margin-top: 1rem' : '');\n});\nvar StyledFieldLabel = styled(FieldLabel)(templateObject_2 || (templateObject_2 = __makeTemplateObject([\"\\n \", \"\\n\"], [\"\\n \", \"\\n\"])), function (_a) {\n var labelPosition = _a.labelPosition;\n return (labelPosition === 'left' ? 'margin-bottom: 0; margin-right: 1rem;' : '');\n});\nvar disabledStyles = css(templateObject_3 || (templateObject_3 = __makeTemplateObject([\"\\n opacity: 0.4;\\n\"], [\"\\n opacity: 0.4;\\n\"])));\nvar StyledToggle = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject([\"\\n aspect-ratio: 1 / 1;\\n width: 100%;\\n height: 100%;\\n border-radius: 7px;\\n background-color: lightGray5;\\n border: 3px solid;\\n border-color: lightGray5;\\n position: relative;\\n transition: all 100ms ease-out;\\n\\n \", \"\\n\\n input:checked + & {\\n background-color: red1;\\n border-color: red1;\\n\\n & > span {\\n transform: translate(75%, -50%);\\n background-color: white;\\n }\\n }\\n\"], [\"\\n aspect-ratio: 1 / 1;\\n width: 100%;\\n height: 100%;\\n border-radius: 7px;\\n background-color: lightGray5;\\n border: 3px solid;\\n border-color: lightGray5;\\n position: relative;\\n transition: all 100ms ease-out;\\n\\n \", \"\\n\\n input:checked + & {\\n background-color: red1;\\n border-color: red1;\\n\\n & > span {\\n transform: translate(75%, -50%);\\n background-color: white;\\n }\\n }\\n\"])), function (props) { return (props.disabled ? disabledStyles : ''); });\nvar StyledDot = styled.span(templateObject_5 || (templateObject_5 = __makeTemplateObject([\"\\n aspect-ratio: 1 / 1;\\n background-color: white;\\n border-radius: 50%;\\n position: absolute;\\n top: 50%;\\n left: 10%;\\n transform: translate(-20%, -50%);\\n transition: all 100ms ease-out;\\n\"], [\"\\n aspect-ratio: 1 / 1;\\n background-color: white;\\n border-radius: 50%;\\n position: absolute;\\n top: 50%;\\n left: 10%;\\n transform: translate(-20%, -50%);\\n transition: all 100ms ease-out;\\n\"])));\nvar HiddenInput = styled.input(templateObject_6 || (templateObject_6 = __makeTemplateObject([\"\\n opacity: 0;\\n width: 100%;\\n height: 100%;\\n position: absolute;\\n left: 0;\\n top: 0;\\n border-radius: 7px;\\n z-index: 1;\\n margin: 0;\\n\\n \", \"\\n\"], [\"\\n opacity: 0;\\n width: 100%;\\n height: 100%;\\n position: absolute;\\n left: 0;\\n top: 0;\\n border-radius: 7px;\\n z-index: 1;\\n margin: 0;\\n\\n \", \"\\n\"])), function (_a) {\n var $enabled = _a.$enabled;\n return ($enabled ? 'cursor: pointer;' : '');\n});\nvar Wrapper = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject([\"\\n position: relative;\\n border-radius: 8px;\\n overflow: hidden;\\n flex-shrink: 0;\\n &[data-appearance='primary'] {\\n width: 24px;\\n height: 14px;\\n \", \" {\\n height: 10px;\\n }\\n }\\n &[data-appearance='grid'] {\\n width: 28px;\\n height: 16px;\\n \", \" {\\n height: 12px;\\n }\\n }\\n\"], [\"\\n position: relative;\\n border-radius: 8px;\\n overflow: hidden;\\n flex-shrink: 0;\\n &[data-appearance='primary'] {\\n width: 24px;\\n height: 14px;\\n \", \" {\\n height: 10px;\\n }\\n }\\n &[data-appearance='grid'] {\\n width: 28px;\\n height: 16px;\\n \", \" {\\n height: 12px;\\n }\\n }\\n\"])), StyledDot, StyledDot);\nvar Toggle = function (_a) {\n var onChange = _a.onChange, label = _a.label, name = _a.name, checked = _a.checked, defaultChecked = _a.defaultChecked, _b = _a.spaceAround, spaceAround = _b === void 0 ? false : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, _d = _a.labelPosition, labelPosition = _d === void 0 ? 'default' : _d, _e = _a.variant, variant = _e === void 0 ? 'primary' : _e, _f = _a.spaceBetween, spaceBetween = _f === void 0 ? false : _f, rest = __rest(_a, [\"onChange\", \"label\", \"name\", \"checked\", \"defaultChecked\", \"spaceAround\", \"disabled\", \"labelPosition\", \"variant\", \"spaceBetween\"]);\n return (_jsxs(StyledSpaceAroundWrap, { spaceBetween: spaceBetween, spaceAround: spaceAround, \"$labelPosition\": labelPosition, children: [label && (_jsx(StyledFieldLabel, { htmlFor: name, labelPosition: labelPosition, children: label })), _jsxs(Wrapper, { \"data-appearance\": variant, children: [_jsx(HiddenInput, { name: name, type: \"checkbox\", checked: checked, \"$enabled\": !disabled, defaultChecked: defaultChecked, onChange: !disabled ? onChange : undefined, disabled: disabled, \"data-cy\": \"\".concat(name, \"Switch\") }), _jsx(StyledToggle, __assign({ active: !!checked, disabled: disabled }, rest, { children: _jsx(StyledDot, {}) }))] })] }));\n};\nexport default Toggle;\nvar templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;\n//# sourceMappingURL=Toggle.js.map"],"names":["
|
|
1
|
+
{"version":3,"file":"Toggle.js","sources":["../../../../packages/ui/Elements/Toggle/Toggle.tsx"],"sourcesContent":["import { __assign, __makeTemplateObject, __rest } from \"tslib\";\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport styled, { css } from '@xstyled/styled-components';\nimport { FieldLabel } from '../Label';\nimport { SpaceAroundWrap } from '../SpaceAround';\nvar StyledSpaceAroundWrap = styled(SpaceAroundWrap)(templateObject_1 || (templateObject_1 = __makeTemplateObject([\"\\n \", \"\\n\"], [\"\\n \", \"\\n\"])), function (_a) {\n var $labelPosition = _a.$labelPosition;\n return ($labelPosition === 'left' ? 'display: flex; align-items: center; margin-top: 1rem' : '');\n});\nvar StyledFieldLabel = styled(FieldLabel)(templateObject_2 || (templateObject_2 = __makeTemplateObject([\"\\n \", \"\\n\"], [\"\\n \", \"\\n\"])), function (_a) {\n var labelPosition = _a.labelPosition;\n return (labelPosition === 'left' ? 'margin-bottom: 0; margin-right: 1rem;' : '');\n});\nvar disabledStyles = css(templateObject_3 || (templateObject_3 = __makeTemplateObject([\"\\n opacity: 0.4;\\n\"], [\"\\n opacity: 0.4;\\n\"])));\nvar StyledToggle = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject([\"\\n aspect-ratio: 1 / 1;\\n width: 100%;\\n height: 100%;\\n border-radius: 7px;\\n background-color: lightGray5;\\n border: 3px solid;\\n border-color: lightGray5;\\n position: relative;\\n transition: all 100ms ease-out;\\n\\n \", \"\\n\\n input:checked + & {\\n background-color: red1;\\n border-color: red1;\\n\\n & > span {\\n transform: translate(75%, -50%);\\n background-color: white;\\n }\\n }\\n\"], [\"\\n aspect-ratio: 1 / 1;\\n width: 100%;\\n height: 100%;\\n border-radius: 7px;\\n background-color: lightGray5;\\n border: 3px solid;\\n border-color: lightGray5;\\n position: relative;\\n transition: all 100ms ease-out;\\n\\n \", \"\\n\\n input:checked + & {\\n background-color: red1;\\n border-color: red1;\\n\\n & > span {\\n transform: translate(75%, -50%);\\n background-color: white;\\n }\\n }\\n\"])), function (props) { return (props.disabled ? disabledStyles : ''); });\nvar StyledDot = styled.span(templateObject_5 || (templateObject_5 = __makeTemplateObject([\"\\n aspect-ratio: 1 / 1;\\n background-color: white;\\n border-radius: 50%;\\n position: absolute;\\n top: 50%;\\n left: 10%;\\n transform: translate(-20%, -50%);\\n transition: all 100ms ease-out;\\n\"], [\"\\n aspect-ratio: 1 / 1;\\n background-color: white;\\n border-radius: 50%;\\n position: absolute;\\n top: 50%;\\n left: 10%;\\n transform: translate(-20%, -50%);\\n transition: all 100ms ease-out;\\n\"])));\nvar HiddenInput = styled.input(templateObject_6 || (templateObject_6 = __makeTemplateObject([\"\\n opacity: 0;\\n width: 100%;\\n height: 100%;\\n position: absolute;\\n left: 0;\\n top: 0;\\n border-radius: 7px;\\n z-index: 1;\\n margin: 0;\\n\\n \", \"\\n\"], [\"\\n opacity: 0;\\n width: 100%;\\n height: 100%;\\n position: absolute;\\n left: 0;\\n top: 0;\\n border-radius: 7px;\\n z-index: 1;\\n margin: 0;\\n\\n \", \"\\n\"])), function (_a) {\n var $enabled = _a.$enabled;\n return ($enabled ? 'cursor: pointer;' : '');\n});\nvar Wrapper = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject([\"\\n position: relative;\\n border-radius: 8px;\\n overflow: hidden;\\n flex-shrink: 0;\\n &[data-appearance='primary'] {\\n width: 24px;\\n height: 14px;\\n \", \" {\\n height: 10px;\\n }\\n }\\n &[data-appearance='grid'] {\\n width: 28px;\\n height: 16px;\\n \", \" {\\n height: 12px;\\n }\\n }\\n\"], [\"\\n position: relative;\\n border-radius: 8px;\\n overflow: hidden;\\n flex-shrink: 0;\\n &[data-appearance='primary'] {\\n width: 24px;\\n height: 14px;\\n \", \" {\\n height: 10px;\\n }\\n }\\n &[data-appearance='grid'] {\\n width: 28px;\\n height: 16px;\\n \", \" {\\n height: 12px;\\n }\\n }\\n\"])), StyledDot, StyledDot);\nvar Toggle = function (_a) {\n var onChange = _a.onChange, label = _a.label, name = _a.name, checked = _a.checked, defaultChecked = _a.defaultChecked, _b = _a.spaceAround, spaceAround = _b === void 0 ? false : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, _d = _a.labelPosition, labelPosition = _d === void 0 ? 'default' : _d, _e = _a.variant, variant = _e === void 0 ? 'primary' : _e, _f = _a.spaceBetween, spaceBetween = _f === void 0 ? false : _f, rest = __rest(_a, [\"onChange\", \"label\", \"name\", \"checked\", \"defaultChecked\", \"spaceAround\", \"disabled\", \"labelPosition\", \"variant\", \"spaceBetween\"]);\n return (_jsxs(StyledSpaceAroundWrap, { spaceBetween: spaceBetween, spaceAround: spaceAround, \"$labelPosition\": labelPosition, children: [label && (_jsx(StyledFieldLabel, { htmlFor: name, labelPosition: labelPosition, children: label })), _jsxs(Wrapper, { \"data-appearance\": variant, children: [_jsx(HiddenInput, { name: name, type: \"checkbox\", checked: checked, \"$enabled\": !disabled, defaultChecked: defaultChecked, onChange: !disabled ? onChange : undefined, disabled: disabled, \"data-cy\": \"\".concat(name, \"Switch\") }), _jsx(StyledToggle, __assign({ active: !!checked, disabled: disabled }, rest, { children: _jsx(StyledDot, {}) }))] })] }));\n};\nexport default Toggle;\nvar templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;\n//# sourceMappingURL=Toggle.js.map"],"names":["_jsxs","_jsx"],"mappings":"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"}
|
|
@@ -1,11 +1,6 @@
|
|
|
1
|
-
|
|
1
|
+
import Toggle from './Toggle.js';
|
|
2
2
|
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
3
|
|
|
5
|
-
var Toggle = require('./Toggle.js');
|
|
6
4
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
exports.Toggle = Toggle.default;
|
|
10
|
-
exports.default = Toggle.default;
|
|
5
|
+
export { Toggle, Toggle as default };
|
|
11
6
|
//# 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,49 +1,35 @@
|
|
|
1
|
-
|
|
1
|
+
import { __assign } from 'tslib';
|
|
2
|
+
import { jsx } from 'react/jsx-runtime';
|
|
3
|
+
import Text$1 from '../Text/Text.js';
|
|
2
4
|
|
|
3
|
-
var
|
|
4
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
5
|
-
var Text$1 = require('../Text/Text.js');
|
|
6
|
-
|
|
7
|
-
var Text = function (props) { return jsxRuntime.jsx(Text$1.default, tslib.__assign({}, props, { fontWeight: props.variant })); };
|
|
5
|
+
var Text = function (props) { return jsx(Text$1, __assign({}, props, { fontWeight: props.variant })); };
|
|
8
6
|
Text.defaultProps = { fontFamily: 'primary' };
|
|
9
7
|
// Paragraphs
|
|
10
|
-
var Paragraph1 = function (props) { return
|
|
8
|
+
var Paragraph1 = function (props) { return jsx(Text, __assign({}, props, { fontWeight: props.variant })); };
|
|
11
9
|
Paragraph1.defaultProps = { as: 'p', fontFamily: 'primary', fontSize: '18px' };
|
|
12
|
-
var Paragraph2 = function (props) { return
|
|
10
|
+
var Paragraph2 = function (props) { return jsx(Text, __assign({}, props, { fontWeight: props.variant })); };
|
|
13
11
|
Paragraph2.defaultProps = { as: 'p', fontFamily: 'primary', fontSize: '16px' };
|
|
14
|
-
var Paragraph3 = function (props) { return
|
|
12
|
+
var Paragraph3 = function (props) { return jsx(Text, __assign({}, props, { fontWeight: props.variant })); };
|
|
15
13
|
Paragraph3.defaultProps = { as: 'p', fontFamily: 'primary', fontSize: '14px' };
|
|
16
|
-
var Paragraph4 = function (props) { return
|
|
14
|
+
var Paragraph4 = function (props) { return jsx(Text, __assign({}, props, { fontWeight: props.variant })); };
|
|
17
15
|
Paragraph4.defaultProps = { as: 'p', fontFamily: 'primary', fontSize: '12px' };
|
|
18
|
-
var Paragraph5 = function (props) { return
|
|
16
|
+
var Paragraph5 = function (props) { return jsx(Text, __assign({}, props, { fontWeight: props.variant })); };
|
|
19
17
|
Paragraph5.defaultProps = { as: 'p', fontFamily: 'primary', fontSize: '10px' };
|
|
20
18
|
// Headings
|
|
21
|
-
var H1 = function (props) { return
|
|
19
|
+
var H1 = function (props) { return jsx(Text, __assign({}, props, { fontWeight: props.variant })); };
|
|
22
20
|
H1.defaultProps = { as: 'h1', fontFamily: 'heading', fontSize: '32px', mt: 2, mb: 2 };
|
|
23
|
-
var H2 = function (props) { return
|
|
21
|
+
var H2 = function (props) { return jsx(Text, __assign({}, props, { fontWeight: props.variant })); };
|
|
24
22
|
H2.defaultProps = { as: 'h2', fontFamily: 'heading', fontSize: '24px', mt: 2, mb: 2 };
|
|
25
|
-
var H3 = function (props) { return
|
|
23
|
+
var H3 = function (props) { return jsx(Text, __assign({}, props, { fontWeight: props.variant })); };
|
|
26
24
|
H3.defaultProps = { as: 'h3', fontFamily: 'heading', fontSize: '21px', mt: 2, mb: 2 };
|
|
27
|
-
var H4 = function (props) { return
|
|
25
|
+
var H4 = function (props) { return jsx(Text, __assign({}, props, { fontWeight: props.variant })); };
|
|
28
26
|
H4.defaultProps = { as: 'h4', fontFamily: 'heading', fontSize: '18px', mt: 2, mb: 2 };
|
|
29
|
-
var H5 = function (props) { return
|
|
27
|
+
var H5 = function (props) { return jsx(Text, __assign({}, props, { fontWeight: props.variant })); };
|
|
30
28
|
H5.defaultProps = { as: 'h5', fontFamily: 'heading', fontSize: '16px', mt: 2, mb: 2 };
|
|
31
|
-
var H6 = function (props) { return
|
|
29
|
+
var H6 = function (props) { return jsx(Text, __assign({}, props, { fontWeight: props.variant })); };
|
|
32
30
|
H6.defaultProps = { as: 'h6', fontFamily: 'heading', fontSize: '14px', mt: 2, mb: 2 };
|
|
33
|
-
var H7 = function (props) { return
|
|
31
|
+
var H7 = function (props) { return jsx(Text, __assign({}, props, { fontWeight: props.variant })); };
|
|
34
32
|
H7.defaultProps = { as: 'h6', fontFamily: 'heading', fontSize: '12px', mt: 2, mb: 2 };
|
|
35
33
|
|
|
36
|
-
|
|
37
|
-
exports.H2 = H2;
|
|
38
|
-
exports.H3 = H3;
|
|
39
|
-
exports.H4 = H4;
|
|
40
|
-
exports.H5 = H5;
|
|
41
|
-
exports.H6 = H6;
|
|
42
|
-
exports.H7 = H7;
|
|
43
|
-
exports.Paragraph1 = Paragraph1;
|
|
44
|
-
exports.Paragraph2 = Paragraph2;
|
|
45
|
-
exports.Paragraph3 = Paragraph3;
|
|
46
|
-
exports.Paragraph4 = Paragraph4;
|
|
47
|
-
exports.Paragraph5 = Paragraph5;
|
|
48
|
-
exports.Text = Text;
|
|
34
|
+
export { H1, H2, H3, H4, H5, H6, H7, Paragraph1, Paragraph2, Paragraph3, Paragraph4, Paragraph5, Text };
|
|
49
35
|
//# sourceMappingURL=Typography.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Typography.js","sources":["../../../../packages/ui/Elements/Typography/Typography.tsx"],"sourcesContent":["import { __assign } from \"tslib\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { Text as BaseText } from '../Text';\nexport var Text = function (props) { return _jsx(BaseText, __assign({}, props, { fontWeight: props.variant })); };\nText.defaultProps = { fontFamily: 'primary' };\n// Paragraphs\nexport var Paragraph1 = function (props) { return _jsx(Text, __assign({}, props, { fontWeight: props.variant })); };\nParagraph1.defaultProps = { as: 'p', fontFamily: 'primary', fontSize: '18px' };\nexport var Paragraph2 = function (props) { return _jsx(Text, __assign({}, props, { fontWeight: props.variant })); };\nParagraph2.defaultProps = { as: 'p', fontFamily: 'primary', fontSize: '16px' };\nexport var Paragraph3 = function (props) { return _jsx(Text, __assign({}, props, { fontWeight: props.variant })); };\nParagraph3.defaultProps = { as: 'p', fontFamily: 'primary', fontSize: '14px' };\nexport var Paragraph4 = function (props) { return _jsx(Text, __assign({}, props, { fontWeight: props.variant })); };\nParagraph4.defaultProps = { as: 'p', fontFamily: 'primary', fontSize: '12px' };\nexport var Paragraph5 = function (props) { return _jsx(Text, __assign({}, props, { fontWeight: props.variant })); };\nParagraph5.defaultProps = { as: 'p', fontFamily: 'primary', fontSize: '10px' };\n// Headings\nexport var H1 = function (props) { return _jsx(Text, __assign({}, props, { fontWeight: props.variant })); };\nH1.defaultProps = { as: 'h1', fontFamily: 'heading', fontSize: '32px', mt: 2, mb: 2 };\nexport var H2 = function (props) { return _jsx(Text, __assign({}, props, { fontWeight: props.variant })); };\nH2.defaultProps = { as: 'h2', fontFamily: 'heading', fontSize: '24px', mt: 2, mb: 2 };\nexport var H3 = function (props) { return _jsx(Text, __assign({}, props, { fontWeight: props.variant })); };\nH3.defaultProps = { as: 'h3', fontFamily: 'heading', fontSize: '21px', mt: 2, mb: 2 };\nexport var H4 = function (props) { return _jsx(Text, __assign({}, props, { fontWeight: props.variant })); };\nH4.defaultProps = { as: 'h4', fontFamily: 'heading', fontSize: '18px', mt: 2, mb: 2 };\nexport var H5 = function (props) { return _jsx(Text, __assign({}, props, { fontWeight: props.variant })); };\nH5.defaultProps = { as: 'h5', fontFamily: 'heading', fontSize: '16px', mt: 2, mb: 2 };\nexport var H6 = function (props) { return _jsx(Text, __assign({}, props, { fontWeight: props.variant })); };\nH6.defaultProps = { as: 'h6', fontFamily: 'heading', fontSize: '14px', mt: 2, mb: 2 };\nexport var H7 = function (props) { return _jsx(Text, __assign({}, props, { fontWeight: props.variant })); };\nH7.defaultProps = { as: 'h6', fontFamily: 'heading', fontSize: '12px', mt: 2, mb: 2 };\n//# sourceMappingURL=Typography.js.map"],"names":["_jsx","BaseText"
|
|
1
|
+
{"version":3,"file":"Typography.js","sources":["../../../../packages/ui/Elements/Typography/Typography.tsx"],"sourcesContent":["import { __assign } from \"tslib\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { Text as BaseText } from '../Text';\nexport var Text = function (props) { return _jsx(BaseText, __assign({}, props, { fontWeight: props.variant })); };\nText.defaultProps = { fontFamily: 'primary' };\n// Paragraphs\nexport var Paragraph1 = function (props) { return _jsx(Text, __assign({}, props, { fontWeight: props.variant })); };\nParagraph1.defaultProps = { as: 'p', fontFamily: 'primary', fontSize: '18px' };\nexport var Paragraph2 = function (props) { return _jsx(Text, __assign({}, props, { fontWeight: props.variant })); };\nParagraph2.defaultProps = { as: 'p', fontFamily: 'primary', fontSize: '16px' };\nexport var Paragraph3 = function (props) { return _jsx(Text, __assign({}, props, { fontWeight: props.variant })); };\nParagraph3.defaultProps = { as: 'p', fontFamily: 'primary', fontSize: '14px' };\nexport var Paragraph4 = function (props) { return _jsx(Text, __assign({}, props, { fontWeight: props.variant })); };\nParagraph4.defaultProps = { as: 'p', fontFamily: 'primary', fontSize: '12px' };\nexport var Paragraph5 = function (props) { return _jsx(Text, __assign({}, props, { fontWeight: props.variant })); };\nParagraph5.defaultProps = { as: 'p', fontFamily: 'primary', fontSize: '10px' };\n// Headings\nexport var H1 = function (props) { return _jsx(Text, __assign({}, props, { fontWeight: props.variant })); };\nH1.defaultProps = { as: 'h1', fontFamily: 'heading', fontSize: '32px', mt: 2, mb: 2 };\nexport var H2 = function (props) { return _jsx(Text, __assign({}, props, { fontWeight: props.variant })); };\nH2.defaultProps = { as: 'h2', fontFamily: 'heading', fontSize: '24px', mt: 2, mb: 2 };\nexport var H3 = function (props) { return _jsx(Text, __assign({}, props, { fontWeight: props.variant })); };\nH3.defaultProps = { as: 'h3', fontFamily: 'heading', fontSize: '21px', mt: 2, mb: 2 };\nexport var H4 = function (props) { return _jsx(Text, __assign({}, props, { fontWeight: props.variant })); };\nH4.defaultProps = { as: 'h4', fontFamily: 'heading', fontSize: '18px', mt: 2, mb: 2 };\nexport var H5 = function (props) { return _jsx(Text, __assign({}, props, { fontWeight: props.variant })); };\nH5.defaultProps = { as: 'h5', fontFamily: 'heading', fontSize: '16px', mt: 2, mb: 2 };\nexport var H6 = function (props) { return _jsx(Text, __assign({}, props, { fontWeight: props.variant })); };\nH6.defaultProps = { as: 'h6', fontFamily: 'heading', fontSize: '14px', mt: 2, mb: 2 };\nexport var H7 = function (props) { return _jsx(Text, __assign({}, props, { fontWeight: props.variant })); };\nH7.defaultProps = { as: 'h6', fontFamily: 'heading', fontSize: '12px', mt: 2, mb: 2 };\n//# sourceMappingURL=Typography.js.map"],"names":["_jsx","BaseText"],"mappings":"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"}
|
|
@@ -1,23 +1,7 @@
|
|
|
1
|
-
|
|
1
|
+
import { Text } from './Typography.js';
|
|
2
|
+
export { H1, H2, H3, H4, H5, H6, H7, Paragraph1, Paragraph2, Paragraph3, Paragraph4, Paragraph5 } from './Typography.js';
|
|
2
3
|
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var Typography = require('./Typography.js');
|
|
6
5
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
exports.H1 = Typography.H1;
|
|
10
|
-
exports.H2 = Typography.H2;
|
|
11
|
-
exports.H3 = Typography.H3;
|
|
12
|
-
exports.H4 = Typography.H4;
|
|
13
|
-
exports.H5 = Typography.H5;
|
|
14
|
-
exports.H6 = Typography.H6;
|
|
15
|
-
exports.H7 = Typography.H7;
|
|
16
|
-
exports.Paragraph1 = Typography.Paragraph1;
|
|
17
|
-
exports.Paragraph2 = Typography.Paragraph2;
|
|
18
|
-
exports.Paragraph3 = Typography.Paragraph3;
|
|
19
|
-
exports.Paragraph4 = Typography.Paragraph4;
|
|
20
|
-
exports.Paragraph5 = Typography.Paragraph5;
|
|
21
|
-
exports.Text = Typography.Text;
|
|
22
|
-
exports.default = Typography.Text;
|
|
6
|
+
export { Text, Text as default };
|
|
23
7
|
//# 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,19 +1,15 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
6
|
-
var React = require('react');
|
|
7
|
-
var styles = require('./styles.js');
|
|
8
|
-
var styled = require('@xstyled/styled-components');
|
|
1
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { memo } from 'react';
|
|
3
|
+
import { CheckboxWrap, FakeInput, CheckIcon, Label } from './styles.js';
|
|
4
|
+
import { useTheme, th } from '@xstyled/styled-components';
|
|
9
5
|
|
|
10
6
|
var Checkbox = function (_a) {
|
|
11
7
|
var name = _a.name, label = _a.label, onChange = _a.onChange, checked = _a.checked, defaultChecked = _a.defaultChecked, _b = _a.size, size = _b === void 0 ? 4 : _b, className = _a.className, disabled = _a.disabled, inputRef = _a.inputRef, readOnly = _a.readOnly, _c = _a.minusIcon, minusIcon = _c === void 0 ? false : _c;
|
|
12
|
-
var theme =
|
|
13
|
-
var themeSize =
|
|
14
|
-
return (
|
|
8
|
+
var theme = useTheme();
|
|
9
|
+
var themeSize = th.fontSize(size)({ theme: theme });
|
|
10
|
+
return (jsxs(CheckboxWrap, { size: themeSize, className: className, children: [jsx("input", { type: "checkbox", ref: inputRef, name: name, checked: checked, defaultChecked: defaultChecked, disabled: disabled, onChange: onChange, value: "", readOnly: readOnly, "data-cy": name && "".concat(name, "Checkbox") }), jsx(FakeInput, { size: themeSize, children: jsx(CheckIcon, { icon: minusIcon ? 'minus' : 'check', size: themeSize }) }), label && jsx(Label, { children: label })] }));
|
|
15
11
|
};
|
|
16
|
-
var Checkbox$1 =
|
|
12
|
+
var Checkbox$1 = memo(Checkbox);
|
|
17
13
|
|
|
18
|
-
|
|
14
|
+
export { Checkbox$1 as default };
|
|
19
15
|
//# sourceMappingURL=Checkbox.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.js","sources":["../../../../packages/ui/Forms/Checkbox/Checkbox.tsx"],"sourcesContent":["import { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { memo } from 'react';\nimport { CheckboxWrap, CheckIcon, FakeInput, Label } from './styles';\nimport { th, useTheme } from '@xstyled/styled-components';\nvar Checkbox = function (_a) {\n var name = _a.name, label = _a.label, onChange = _a.onChange, checked = _a.checked, defaultChecked = _a.defaultChecked, _b = _a.size, size = _b === void 0 ? 4 : _b, className = _a.className, disabled = _a.disabled, inputRef = _a.inputRef, readOnly = _a.readOnly, _c = _a.minusIcon, minusIcon = _c === void 0 ? false : _c;\n var theme = useTheme();\n var themeSize = th.fontSize(size)({ theme: theme });\n return (_jsxs(CheckboxWrap, { size: themeSize, className: className, children: [_jsx(\"input\", { type: \"checkbox\", ref: inputRef, name: name, checked: checked, defaultChecked: defaultChecked, disabled: disabled, onChange: onChange, value: \"\", readOnly: readOnly, \"data-cy\": name && \"\".concat(name, \"Checkbox\") }), _jsx(FakeInput, { size: themeSize, children: _jsx(CheckIcon, { icon: minusIcon ? 'minus' : 'check', size: themeSize }) }), label && _jsx(Label, { children: label })] }));\n};\nexport default memo(Checkbox);\n//# sourceMappingURL=Checkbox.js.map"],"names":["
|
|
1
|
+
{"version":3,"file":"Checkbox.js","sources":["../../../../packages/ui/Forms/Checkbox/Checkbox.tsx"],"sourcesContent":["import { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { memo } from 'react';\nimport { CheckboxWrap, CheckIcon, FakeInput, Label } from './styles';\nimport { th, useTheme } from '@xstyled/styled-components';\nvar Checkbox = function (_a) {\n var name = _a.name, label = _a.label, onChange = _a.onChange, checked = _a.checked, defaultChecked = _a.defaultChecked, _b = _a.size, size = _b === void 0 ? 4 : _b, className = _a.className, disabled = _a.disabled, inputRef = _a.inputRef, readOnly = _a.readOnly, _c = _a.minusIcon, minusIcon = _c === void 0 ? false : _c;\n var theme = useTheme();\n var themeSize = th.fontSize(size)({ theme: theme });\n return (_jsxs(CheckboxWrap, { size: themeSize, className: className, children: [_jsx(\"input\", { type: \"checkbox\", ref: inputRef, name: name, checked: checked, defaultChecked: defaultChecked, disabled: disabled, onChange: onChange, value: \"\", readOnly: readOnly, \"data-cy\": name && \"\".concat(name, \"Checkbox\") }), _jsx(FakeInput, { size: themeSize, children: _jsx(CheckIcon, { icon: minusIcon ? 'minus' : 'check', size: themeSize }) }), label && _jsx(Label, { children: label })] }));\n};\nexport default memo(Checkbox);\n//# sourceMappingURL=Checkbox.js.map"],"names":["_jsxs","_jsx"],"mappings":";;;;;AAIA,IAAI,QAAQ,GAAG,UAAU,EAAE,EAAE;AAC7B,IAAI,IAAI,IAAI,GAAG,EAAE,CAAC,IAAI,EAAE,KAAK,GAAG,EAAE,CAAC,KAAK,EAAE,QAAQ,GAAG,EAAE,CAAC,QAAQ,EAAE,OAAO,GAAG,EAAE,CAAC,OAAO,EAAE,cAAc,GAAG,EAAE,CAAC,cAAc,EAAE,EAAE,GAAG,EAAE,CAAC,IAAI,EAAE,IAAI,GAAG,EAAE,KAAK,KAAK,CAAC,GAAG,CAAC,GAAG,EAAE,EAAE,SAAS,GAAG,EAAE,CAAC,SAAS,EAAE,QAAQ,GAAG,EAAE,CAAC,QAAQ,EAAE,QAAQ,GAAG,EAAE,CAAC,QAAQ,EAAE,QAAQ,GAAG,EAAE,CAAC,QAAQ,EAAE,EAAE,GAAG,EAAE,CAAC,SAAS,EAAE,SAAS,GAAG,EAAE,KAAK,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE,CAAC;AACrU,IAAI,IAAI,KAAK,GAAG,QAAQ,EAAE,CAAC;AAC3B,IAAI,IAAI,SAAS,GAAG,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,CAAC;AACxD,IAAI,QAAQA,IAAK,CAAC,YAAY,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,CAACC,GAAI,CAAC,OAAO,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE,GAAG,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,IAAI,IAAI,EAAE,CAAC,MAAM,CAAC,IAAI,EAAE,UAAU,CAAC,EAAE,CAAC,EAAEA,GAAI,CAAC,SAAS,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAEA,GAAI,CAAC,SAAS,EAAE,EAAE,IAAI,EAAE,SAAS,GAAG,OAAO,GAAG,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,EAAE,CAAC,EAAE,KAAK,IAAIA,GAAI,CAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE;AACve,CAAC,CAAC;AACF,iBAAe,IAAI,CAAC,QAAQ,CAAC;;;;"}
|
|
@@ -1,11 +1,6 @@
|
|
|
1
|
-
|
|
1
|
+
import Checkbox from './Checkbox.js';
|
|
2
2
|
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
3
|
|
|
5
|
-
var Checkbox = require('./Checkbox.js');
|
|
6
4
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
exports.Checkbox = Checkbox.default;
|
|
10
|
-
exports.default = Checkbox.default;
|
|
5
|
+
export { Checkbox, Checkbox as default };
|
|
11
6
|
//# 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,15 +1,9 @@
|
|
|
1
|
-
|
|
1
|
+
import { __makeTemplateObject } from 'tslib';
|
|
2
|
+
import styled, { th } from '@xstyled/styled-components';
|
|
3
|
+
import Icon from '../../Elements/Icon/Icon.js';
|
|
4
|
+
import 'react/jsx-runtime';
|
|
2
5
|
|
|
3
|
-
var
|
|
4
|
-
var styled = require('@xstyled/styled-components');
|
|
5
|
-
var Icon = require('../../Elements/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 FakeInput = styled__default.default.div(templateObject_1 || (templateObject_1 = tslib.__makeTemplateObject(["\n width: ", ";\n min-width: ", ";\n height: ", ";\n border-radius: md;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all 0.2s ease;\n transform: rotate(0);\n overflow: hidden;\n border: slim;\n border-color: lightGray5;\n\n input[type='checkbox']:not(:disabled):hover + & {\n border-color: gray1;\n }\n\n input[type='checkbox']:disabled + & {\n background-color: white;\n border-color: lightGray7;\n }\n\n input[type='checkbox']:checked:disabled + & {\n background-color: bgLightGray1;\n border-color: bgLightGray1;\n }\n\n input[type='checkbox']:checked:not(:disabled) + & {\n transform: rotate(0deg);\n background-color: red1;\n border-color: red1;\n }\n\n input[type='checkbox']:not(:checked):not(:disabled) + & {\n transform: rotate(90deg);\n background-color: white;\n border-color: lightGray5;\n }\n"], ["\n width: ", ";\n min-width: ", ";\n height: ", ";\n border-radius: md;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all 0.2s ease;\n transform: rotate(0);\n overflow: hidden;\n border: slim;\n border-color: lightGray5;\n\n input[type='checkbox']:not(:disabled):hover + & {\n border-color: gray1;\n }\n\n input[type='checkbox']:disabled + & {\n background-color: white;\n border-color: lightGray7;\n }\n\n input[type='checkbox']:checked:disabled + & {\n background-color: bgLightGray1;\n border-color: bgLightGray1;\n }\n\n input[type='checkbox']:checked:not(:disabled) + & {\n transform: rotate(0deg);\n background-color: red1;\n border-color: red1;\n }\n\n input[type='checkbox']:not(:checked):not(:disabled) + & {\n transform: rotate(90deg);\n background-color: white;\n border-color: lightGray5;\n }\n"])), function (_a) {
|
|
6
|
+
var FakeInput = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: ", ";\n min-width: ", ";\n height: ", ";\n border-radius: md;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all 0.2s ease;\n transform: rotate(0);\n overflow: hidden;\n border: slim;\n border-color: lightGray5;\n\n input[type='checkbox']:not(:disabled):hover + & {\n border-color: gray1;\n }\n\n input[type='checkbox']:disabled + & {\n background-color: white;\n border-color: lightGray7;\n }\n\n input[type='checkbox']:checked:disabled + & {\n background-color: bgLightGray1;\n border-color: bgLightGray1;\n }\n\n input[type='checkbox']:checked:not(:disabled) + & {\n transform: rotate(0deg);\n background-color: red1;\n border-color: red1;\n }\n\n input[type='checkbox']:not(:checked):not(:disabled) + & {\n transform: rotate(90deg);\n background-color: white;\n border-color: lightGray5;\n }\n"], ["\n width: ", ";\n min-width: ", ";\n height: ", ";\n border-radius: md;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all 0.2s ease;\n transform: rotate(0);\n overflow: hidden;\n border: slim;\n border-color: lightGray5;\n\n input[type='checkbox']:not(:disabled):hover + & {\n border-color: gray1;\n }\n\n input[type='checkbox']:disabled + & {\n background-color: white;\n border-color: lightGray7;\n }\n\n input[type='checkbox']:checked:disabled + & {\n background-color: bgLightGray1;\n border-color: bgLightGray1;\n }\n\n input[type='checkbox']:checked:not(:disabled) + & {\n transform: rotate(0deg);\n background-color: red1;\n border-color: red1;\n }\n\n input[type='checkbox']:not(:checked):not(:disabled) + & {\n transform: rotate(90deg);\n background-color: white;\n border-color: lightGray5;\n }\n"])), function (_a) {
|
|
13
7
|
var size = _a.size;
|
|
14
8
|
return size;
|
|
15
9
|
}, function (_a) {
|
|
@@ -19,19 +13,16 @@ var FakeInput = styled__default.default.div(templateObject_1 || (templateObject_
|
|
|
19
13
|
var size = _a.size;
|
|
20
14
|
return size;
|
|
21
15
|
});
|
|
22
|
-
var CheckIcon =
|
|
23
|
-
var CheckboxWrap =
|
|
16
|
+
var CheckIcon = styled(Icon)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n border-radius: lg;\n transition: all 200ms ease;\n & svg {\n width: 70% !important;\n }\n & path {\n fill: none;\n stroke: none;\n }\n\n input[type='checkbox']:not(:disabled):checked + ", " & {\n & path {\n stroke: white;\n fill: white;\n }\n }\n\n input[type='checkbox']:disabled:checked + ", " & {\n & path {\n fill: ", " !important;\n }\n }\n"], ["\n border-radius: lg;\n transition: all 200ms ease;\n & svg {\n width: 70% !important;\n }\n & path {\n fill: none;\n stroke: none;\n }\n\n input[type='checkbox']:not(:disabled):checked + ", " & {\n & path {\n stroke: white;\n fill: white;\n }\n }\n\n input[type='checkbox']:disabled:checked + ", " & {\n & path {\n fill: ", " !important;\n }\n }\n"])), FakeInput, FakeInput, th.color('lightGray5'));
|
|
17
|
+
var CheckboxWrap = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n position: relative;\n display: flex;\n align-items: center;\n overflow: hidden;\n\n input {\n margin: 0;\n width: ", ";\n height: ", ";\n z-index: 1;\n position: absolute;\n opacity: 0;\n top: 50%;\n transform: translateY(-50%);\n left: 0;\n cursor: pointer;\n }\n"], ["\n position: relative;\n display: flex;\n align-items: center;\n overflow: hidden;\n\n input {\n margin: 0;\n width: ", ";\n height: ", ";\n z-index: 1;\n position: absolute;\n opacity: 0;\n top: 50%;\n transform: translateY(-50%);\n left: 0;\n cursor: pointer;\n }\n"])), function (_a) {
|
|
24
18
|
var size = _a.size;
|
|
25
19
|
return size;
|
|
26
20
|
}, function (_a) {
|
|
27
21
|
var size = _a.size;
|
|
28
22
|
return size;
|
|
29
23
|
});
|
|
30
|
-
var Label =
|
|
24
|
+
var Label = styled.span(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n margin: 0;\n margin-left: 8px;\n font-size: 14px;\n"], ["\n margin: 0;\n margin-left: 8px;\n font-size: 14px;\n"])));
|
|
31
25
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
|
|
32
26
|
|
|
33
|
-
|
|
34
|
-
exports.CheckboxWrap = CheckboxWrap;
|
|
35
|
-
exports.FakeInput = FakeInput;
|
|
36
|
-
exports.Label = Label;
|
|
27
|
+
export { CheckIcon, CheckboxWrap, FakeInput, Label };
|
|
37
28
|
//# sourceMappingURL=styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sources":["../../../../packages/ui/Forms/Checkbox/styles.ts"],"sourcesContent":["import { __makeTemplateObject } from \"tslib\";\nimport styled, { th } from '@xstyled/styled-components';\nimport { Icon } from '../../Elements/Icon';\nexport var FakeInput = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject([\"\\n width: \", \";\\n min-width: \", \";\\n height: \", \";\\n border-radius: md;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n transition: all 0.2s ease;\\n transform: rotate(0);\\n overflow: hidden;\\n border: slim;\\n border-color: lightGray5;\\n\\n input[type='checkbox']:not(:disabled):hover + & {\\n border-color: gray1;\\n }\\n\\n input[type='checkbox']:disabled + & {\\n background-color: white;\\n border-color: lightGray7;\\n }\\n\\n input[type='checkbox']:checked:disabled + & {\\n background-color: bgLightGray1;\\n border-color: bgLightGray1;\\n }\\n\\n input[type='checkbox']:checked:not(:disabled) + & {\\n transform: rotate(0deg);\\n background-color: red1;\\n border-color: red1;\\n }\\n\\n input[type='checkbox']:not(:checked):not(:disabled) + & {\\n transform: rotate(90deg);\\n background-color: white;\\n border-color: lightGray5;\\n }\\n\"], [\"\\n width: \", \";\\n min-width: \", \";\\n height: \", \";\\n border-radius: md;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n transition: all 0.2s ease;\\n transform: rotate(0);\\n overflow: hidden;\\n border: slim;\\n border-color: lightGray5;\\n\\n input[type='checkbox']:not(:disabled):hover + & {\\n border-color: gray1;\\n }\\n\\n input[type='checkbox']:disabled + & {\\n background-color: white;\\n border-color: lightGray7;\\n }\\n\\n input[type='checkbox']:checked:disabled + & {\\n background-color: bgLightGray1;\\n border-color: bgLightGray1;\\n }\\n\\n input[type='checkbox']:checked:not(:disabled) + & {\\n transform: rotate(0deg);\\n background-color: red1;\\n border-color: red1;\\n }\\n\\n input[type='checkbox']:not(:checked):not(:disabled) + & {\\n transform: rotate(90deg);\\n background-color: white;\\n border-color: lightGray5;\\n }\\n\"])), function (_a) {\n var size = _a.size;\n return size;\n}, function (_a) {\n var size = _a.size;\n return size;\n}, function (_a) {\n var size = _a.size;\n return size;\n});\nexport var CheckIcon = styled(Icon)(templateObject_2 || (templateObject_2 = __makeTemplateObject([\"\\n border-radius: lg;\\n transition: all 200ms ease;\\n & svg {\\n width: 70% !important;\\n }\\n & path {\\n fill: none;\\n stroke: none;\\n }\\n\\n input[type='checkbox']:not(:disabled):checked + \", \" & {\\n & path {\\n stroke: white;\\n fill: white;\\n }\\n }\\n\\n input[type='checkbox']:disabled:checked + \", \" & {\\n & path {\\n fill: \", \" !important;\\n }\\n }\\n\"], [\"\\n border-radius: lg;\\n transition: all 200ms ease;\\n & svg {\\n width: 70% !important;\\n }\\n & path {\\n fill: none;\\n stroke: none;\\n }\\n\\n input[type='checkbox']:not(:disabled):checked + \", \" & {\\n & path {\\n stroke: white;\\n fill: white;\\n }\\n }\\n\\n input[type='checkbox']:disabled:checked + \", \" & {\\n & path {\\n fill: \", \" !important;\\n }\\n }\\n\"])), FakeInput, FakeInput, th.color('lightGray5'));\nexport var CheckboxWrap = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject([\"\\n position: relative;\\n display: flex;\\n align-items: center;\\n overflow: hidden;\\n\\n input {\\n margin: 0;\\n width: \", \";\\n height: \", \";\\n z-index: 1;\\n position: absolute;\\n opacity: 0;\\n top: 50%;\\n transform: translateY(-50%);\\n left: 0;\\n cursor: pointer;\\n }\\n\"], [\"\\n position: relative;\\n display: flex;\\n align-items: center;\\n overflow: hidden;\\n\\n input {\\n margin: 0;\\n width: \", \";\\n height: \", \";\\n z-index: 1;\\n position: absolute;\\n opacity: 0;\\n top: 50%;\\n transform: translateY(-50%);\\n left: 0;\\n cursor: pointer;\\n }\\n\"])), function (_a) {\n var size = _a.size;\n return size;\n}, function (_a) {\n var size = _a.size;\n return size;\n});\nexport var Label = styled.span(templateObject_4 || (templateObject_4 = __makeTemplateObject([\"\\n margin: 0;\\n margin-left: 8px;\\n font-size: 14px;\\n\"], [\"\\n margin: 0;\\n margin-left: 8px;\\n font-size: 14px;\\n\"])));\nvar templateObject_1, templateObject_2, templateObject_3, templateObject_4;\n//# sourceMappingURL=styles.js.map"],"names":[
|
|
1
|
+
{"version":3,"file":"styles.js","sources":["../../../../packages/ui/Forms/Checkbox/styles.ts"],"sourcesContent":["import { __makeTemplateObject } from \"tslib\";\nimport styled, { th } from '@xstyled/styled-components';\nimport { Icon } from '../../Elements/Icon';\nexport var FakeInput = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject([\"\\n width: \", \";\\n min-width: \", \";\\n height: \", \";\\n border-radius: md;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n transition: all 0.2s ease;\\n transform: rotate(0);\\n overflow: hidden;\\n border: slim;\\n border-color: lightGray5;\\n\\n input[type='checkbox']:not(:disabled):hover + & {\\n border-color: gray1;\\n }\\n\\n input[type='checkbox']:disabled + & {\\n background-color: white;\\n border-color: lightGray7;\\n }\\n\\n input[type='checkbox']:checked:disabled + & {\\n background-color: bgLightGray1;\\n border-color: bgLightGray1;\\n }\\n\\n input[type='checkbox']:checked:not(:disabled) + & {\\n transform: rotate(0deg);\\n background-color: red1;\\n border-color: red1;\\n }\\n\\n input[type='checkbox']:not(:checked):not(:disabled) + & {\\n transform: rotate(90deg);\\n background-color: white;\\n border-color: lightGray5;\\n }\\n\"], [\"\\n width: \", \";\\n min-width: \", \";\\n height: \", \";\\n border-radius: md;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n transition: all 0.2s ease;\\n transform: rotate(0);\\n overflow: hidden;\\n border: slim;\\n border-color: lightGray5;\\n\\n input[type='checkbox']:not(:disabled):hover + & {\\n border-color: gray1;\\n }\\n\\n input[type='checkbox']:disabled + & {\\n background-color: white;\\n border-color: lightGray7;\\n }\\n\\n input[type='checkbox']:checked:disabled + & {\\n background-color: bgLightGray1;\\n border-color: bgLightGray1;\\n }\\n\\n input[type='checkbox']:checked:not(:disabled) + & {\\n transform: rotate(0deg);\\n background-color: red1;\\n border-color: red1;\\n }\\n\\n input[type='checkbox']:not(:checked):not(:disabled) + & {\\n transform: rotate(90deg);\\n background-color: white;\\n border-color: lightGray5;\\n }\\n\"])), function (_a) {\n var size = _a.size;\n return size;\n}, function (_a) {\n var size = _a.size;\n return size;\n}, function (_a) {\n var size = _a.size;\n return size;\n});\nexport var CheckIcon = styled(Icon)(templateObject_2 || (templateObject_2 = __makeTemplateObject([\"\\n border-radius: lg;\\n transition: all 200ms ease;\\n & svg {\\n width: 70% !important;\\n }\\n & path {\\n fill: none;\\n stroke: none;\\n }\\n\\n input[type='checkbox']:not(:disabled):checked + \", \" & {\\n & path {\\n stroke: white;\\n fill: white;\\n }\\n }\\n\\n input[type='checkbox']:disabled:checked + \", \" & {\\n & path {\\n fill: \", \" !important;\\n }\\n }\\n\"], [\"\\n border-radius: lg;\\n transition: all 200ms ease;\\n & svg {\\n width: 70% !important;\\n }\\n & path {\\n fill: none;\\n stroke: none;\\n }\\n\\n input[type='checkbox']:not(:disabled):checked + \", \" & {\\n & path {\\n stroke: white;\\n fill: white;\\n }\\n }\\n\\n input[type='checkbox']:disabled:checked + \", \" & {\\n & path {\\n fill: \", \" !important;\\n }\\n }\\n\"])), FakeInput, FakeInput, th.color('lightGray5'));\nexport var CheckboxWrap = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject([\"\\n position: relative;\\n display: flex;\\n align-items: center;\\n overflow: hidden;\\n\\n input {\\n margin: 0;\\n width: \", \";\\n height: \", \";\\n z-index: 1;\\n position: absolute;\\n opacity: 0;\\n top: 50%;\\n transform: translateY(-50%);\\n left: 0;\\n cursor: pointer;\\n }\\n\"], [\"\\n position: relative;\\n display: flex;\\n align-items: center;\\n overflow: hidden;\\n\\n input {\\n margin: 0;\\n width: \", \";\\n height: \", \";\\n z-index: 1;\\n position: absolute;\\n opacity: 0;\\n top: 50%;\\n transform: translateY(-50%);\\n left: 0;\\n cursor: pointer;\\n }\\n\"])), function (_a) {\n var size = _a.size;\n return size;\n}, function (_a) {\n var size = _a.size;\n return size;\n});\nexport var Label = styled.span(templateObject_4 || (templateObject_4 = __makeTemplateObject([\"\\n margin: 0;\\n margin-left: 8px;\\n font-size: 14px;\\n\"], [\"\\n margin: 0;\\n margin-left: 8px;\\n font-size: 14px;\\n\"])));\nvar templateObject_1, templateObject_2, templateObject_3, templateObject_4;\n//# sourceMappingURL=styles.js.map"],"names":[],"mappings":";;;;;AAGU,IAAC,SAAS,GAAG,MAAM,CAAC,GAAG,CAAC,gBAAgB,KAAK,gBAAgB,GAAG,oBAAoB,CAAC,CAAC,aAAa,EAAE,kBAAkB,EAAE,eAAe,EAAE,80BAA80B,CAAC,EAAE,CAAC,aAAa,EAAE,kBAAkB,EAAE,eAAe,EAAE,80BAA80B,CAAC,CAAC,CAAC,EAAE,UAAU,EAAE,EAAE;AAC33D,IAAI,IAAI,IAAI,GAAG,EAAE,CAAC,IAAI,CAAC;AACvB,IAAI,OAAO,IAAI,CAAC;AAChB,CAAC,EAAE,UAAU,EAAE,EAAE;AACjB,IAAI,IAAI,IAAI,GAAG,EAAE,CAAC,IAAI,CAAC;AACvB,IAAI,OAAO,IAAI,CAAC;AAChB,CAAC,EAAE,UAAU,EAAE,EAAE;AACjB,IAAI,IAAI,IAAI,GAAG,EAAE,CAAC,IAAI,CAAC;AACvB,IAAI,OAAO,IAAI,CAAC;AAChB,CAAC,EAAE;AACO,IAAC,SAAS,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,gBAAgB,KAAK,gBAAgB,GAAG,oBAAoB,CAAC,CAAC,8MAA8M,EAAE,0HAA0H,EAAE,kCAAkC,EAAE,4BAA4B,CAAC,EAAE,CAAC,8MAA8M,EAAE,0HAA0H,EAAE,kCAAkC,EAAE,4BAA4B,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,EAAE,CAAC,KAAK,CAAC,YAAY,CAAC,EAAE;AACv6B,IAAC,YAAY,GAAG,MAAM,CAAC,GAAG,CAAC,gBAAgB,KAAK,gBAAgB,GAAG,oBAAoB,CAAC,CAAC,kIAAkI,EAAE,iBAAiB,EAAE,0JAA0J,CAAC,EAAE,CAAC,kIAAkI,EAAE,iBAAiB,EAAE,0JAA0J,CAAC,CAAC,CAAC,EAAE,UAAU,EAAE,EAAE;AAC5tB,IAAI,IAAI,IAAI,GAAG,EAAE,CAAC,IAAI,CAAC;AACvB,IAAI,OAAO,IAAI,CAAC;AAChB,CAAC,EAAE,UAAU,EAAE,EAAE;AACjB,IAAI,IAAI,IAAI,GAAG,EAAE,CAAC,IAAI,CAAC;AACvB,IAAI,OAAO,IAAI,CAAC;AAChB,CAAC,EAAE;AACO,IAAC,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,gBAAgB,KAAK,gBAAgB,GAAG,oBAAoB,CAAC,CAAC,2DAA2D,CAAC,EAAE,CAAC,2DAA2D,CAAC,CAAC,CAAC,EAAE;AAC5N,IAAI,gBAAgB,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,gBAAgB;;;;"}
|
package/ui/Forms/Input/Input.js
CHANGED
|
@@ -1,45 +1,43 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
var Icon = require('../../Elements/Icon/Icon.js');
|
|
11
|
-
var Spinner = require('../../Elements/Spinner/Spinner.js');
|
|
1
|
+
import { __rest, __assign } from 'tslib';
|
|
2
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
3
|
+
import { useCallback, useRef, useEffect } from 'react';
|
|
4
|
+
import { InputWrap, InputRow, StyledInput, InputIcon, Tooltip, IconsController, IconWrapper, Suffix } from './styles.js';
|
|
5
|
+
import { FieldLabel } from '../../Elements/Label/Label.js';
|
|
6
|
+
import SpaceAroundWrap from '../../Elements/SpaceAround/SpaceAround.js';
|
|
7
|
+
import ErrorMessage from '../../Elements/ErrorMessage/ErrorMessage.js';
|
|
8
|
+
import Icon from '../../Elements/Icon/Icon.js';
|
|
9
|
+
import { Spinner } from '../../Elements/Spinner/Spinner.js';
|
|
12
10
|
|
|
13
11
|
var Input = function (_a) {
|
|
14
|
-
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 =
|
|
12
|
+
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"]);
|
|
15
13
|
var $isInvalid = isInvalid !== undefined ? isInvalid : !!error;
|
|
16
14
|
var $isClearable = !!onClear && (!!value || alwaysShowClear) && !disabled && !isLoading;
|
|
17
15
|
var $hasSuffix = !!suffix;
|
|
18
16
|
var checkIconPlacement = showArrowsController ? 'left' : iconPlacement;
|
|
19
|
-
var onAddItem =
|
|
20
|
-
var onRemoveItem =
|
|
17
|
+
var onAddItem = useCallback(function () { return setNumber && setNumber(function (base) { return base + 1; }); }, [setNumber]);
|
|
18
|
+
var onRemoveItem = useCallback(function () {
|
|
21
19
|
setNumber && setNumber(function (base) { return (base > 1 ? base - 1 : 1); });
|
|
22
20
|
}, [setNumber]);
|
|
23
|
-
var internalRef =
|
|
21
|
+
var internalRef = useRef();
|
|
24
22
|
var ref = (inputRef || internalRef);
|
|
25
|
-
|
|
23
|
+
useEffect(function () {
|
|
26
24
|
var _a;
|
|
27
25
|
forceFocus && !disabled && !isLoading && ((_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.focus());
|
|
28
26
|
}, [disabled, forceFocus, isLoading]);
|
|
29
|
-
var handleBlur =
|
|
27
|
+
var handleBlur = useCallback(function (event) {
|
|
30
28
|
var _a, _b, _c, _d, _e;
|
|
31
29
|
onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
|
|
32
30
|
if (forceFocus && ((_b = (_a = event.relatedTarget) === null || _a === void 0 ? void 0 : _a.tagName) === null || _b === void 0 ? void 0 : _b.toLowerCase()) !== 'input' || ((_d = (_c = event.relatedTarget) === null || _c === void 0 ? void 0 : _c.type) === null || _d === void 0 ? void 0 : _d.toLowerCase()) !== 'text') {
|
|
33
31
|
(_e = event.target) === null || _e === void 0 ? void 0 : _e.focus();
|
|
34
32
|
}
|
|
35
33
|
}, [forceFocus, onBlur]);
|
|
36
|
-
var handleKeyDown =
|
|
34
|
+
var handleKeyDown = useCallback(function (event) {
|
|
37
35
|
if (event.key === 'Enter') {
|
|
38
36
|
onEnter === null || onEnter === void 0 ? void 0 : onEnter();
|
|
39
37
|
}
|
|
40
38
|
}, [onEnter]);
|
|
41
|
-
return (
|
|
39
|
+
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 })] }));
|
|
42
40
|
};
|
|
43
41
|
|
|
44
|
-
|
|
42
|
+
export { Input };
|
|
45
43
|
//# sourceMappingURL=Input.js.map
|
|
@@ -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';\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' || ((_d = (_c = event.relatedTarget) === null || _c === void 0 ? void 0 : _c.type) === null || _d === void 0 ? void 0 : _d.toLowerCase()) !== 'text') {\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":["__rest","useCallback","useRef","useEffect","_jsxs","SpaceAroundWrap","InputWrap","_jsx","FieldLabel","InputRow","StyledInput","__assign","InputIcon","Tooltip","Icon","IconsController","IconWrapper","Suffix","Spinner","ErrorMessage"],"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';\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' || ((_d = (_c = event.relatedTarget) === null || _c === void 0 ? void 0 : _c.type) === null || _d === void 0 ? void 0 : _d.toLowerCase()) !== 'text') {\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/index.js
CHANGED
|
@@ -1,11 +1,6 @@
|
|
|
1
|
-
|
|
1
|
+
import { Input } from './Input.js';
|
|
2
2
|
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
3
|
|
|
5
|
-
var Input = require('./Input.js');
|
|
6
4
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
exports.Input = Input.Input;
|
|
10
|
-
exports.default = Input.Input;
|
|
5
|
+
export { Input, Input as default };
|
|
11
6
|
//# 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":";;;;"}
|