@mailstep/design-system 0.6.2-beta.2 → 0.6.2-beta.3

package/ui/Elements/Toggle/stories/Toggle.stories.js

@@ -1,30 +1,36 @@
-import Toggle from '../Toggle';
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VariantGrid = exports.Disabled = exports.Checked = exports.Default = void 0;
+var Toggle_1 = __importDefault(require("../Toggle"));
 var meta = {
     title: 'Elements/Toggle',
-    component: Toggle,
+    component: Toggle_1.default,
     tags: ['autodocs'],
     argTypes: {},
 };
-export default meta;
-export var Default = {
+exports.default = meta;
+exports.Default = {
     args: {
         label: 'Label',
     },
 };
-export var Checked = {
+exports.Checked = {
     args: {
         label: 'Label',
         checked: true,
     },
 };
-export var Disabled = {
+exports.Disabled = {
     args: {
         label: 'Label',
         checked: true,
         disabled: true,
     },
 };
-export var VariantGrid = {
+exports.VariantGrid = {
     args: {
         label: 'Label',
         checked: true,

package/ui/Elements/Toggle/types.js

@@ -1 +1,2 @@
-export {};
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/ui/Elements/Typography/Typography.js

@@ -1,3 +1,4 @@
+"use strict";
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -9,33 +10,48 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Text as BaseText } from '../Text';
-export var Text = function (props) { return _jsx(BaseText, __assign({}, props, { fontWeight: props.variant })); };
-Text.defaultProps = { fontFamily: 'primary' };
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.H7 = exports.H6 = exports.H5 = exports.H4 = exports.H3 = exports.H2 = exports.H1 = exports.Paragraph5 = exports.Paragraph4 = exports.Paragraph3 = exports.Paragraph2 = exports.Paragraph1 = exports.Text = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var Text_1 = require("../Text");
+var Text = function (props) { return (0, jsx_runtime_1.jsx)(Text_1.Text, __assign({}, props, { fontWeight: props.variant })); };
+exports.Text = Text;
+exports.Text.defaultProps = { fontFamily: 'primary' };
 // Paragraphs
-export var Paragraph1 = function (props) { return _jsx(Text, __assign({}, props, { fontWeight: props.variant })); };
-Paragraph1.defaultProps = { as: 'p', fontFamily: 'primary', fontSize: '18px' };
-export var Paragraph2 = function (props) { return _jsx(Text, __assign({}, props, { fontWeight: props.variant })); };
-Paragraph2.defaultProps = { as: 'p', fontFamily: 'primary', fontSize: '16px' };
-export var Paragraph3 = function (props) { return _jsx(Text, __assign({}, props, { fontWeight: props.variant })); };
-Paragraph3.defaultProps = { as: 'p', fontFamily: 'primary', fontSize: '14px' };
-export var Paragraph4 = function (props) { return _jsx(Text, __assign({}, props, { fontWeight: props.variant })); };
-Paragraph4.defaultProps = { as: 'p', fontFamily: 'primary', fontSize: '12px' };
-export var Paragraph5 = function (props) { return _jsx(Text, __assign({}, props, { fontWeight: props.variant })); };
-Paragraph5.defaultProps = { as: 'p', fontFamily: 'primary', fontSize: '10px' };
+var Paragraph1 = function (props) { return (0, jsx_runtime_1.jsx)(exports.Text, __assign({}, props, { fontWeight: props.variant })); };
+exports.Paragraph1 = Paragraph1;
+exports.Paragraph1.defaultProps = { as: 'p', fontFamily: 'primary', fontSize: '18px' };
+var Paragraph2 = function (props) { return (0, jsx_runtime_1.jsx)(exports.Text, __assign({}, props, { fontWeight: props.variant })); };
+exports.Paragraph2 = Paragraph2;
+exports.Paragraph2.defaultProps = { as: 'p', fontFamily: 'primary', fontSize: '16px' };
+var Paragraph3 = function (props) { return (0, jsx_runtime_1.jsx)(exports.Text, __assign({}, props, { fontWeight: props.variant })); };
+exports.Paragraph3 = Paragraph3;
+exports.Paragraph3.defaultProps = { as: 'p', fontFamily: 'primary', fontSize: '14px' };
+var Paragraph4 = function (props) { return (0, jsx_runtime_1.jsx)(exports.Text, __assign({}, props, { fontWeight: props.variant })); };
+exports.Paragraph4 = Paragraph4;
+exports.Paragraph4.defaultProps = { as: 'p', fontFamily: 'primary', fontSize: '12px' };
+var Paragraph5 = function (props) { return (0, jsx_runtime_1.jsx)(exports.Text, __assign({}, props, { fontWeight: props.variant })); };
+exports.Paragraph5 = Paragraph5;
+exports.Paragraph5.defaultProps = { as: 'p', fontFamily: 'primary', fontSize: '10px' };
 // Headings
-export var H1 = function (props) { return _jsx(Text, __assign({}, props, { fontWeight: props.variant })); };
-H1.defaultProps = { as: 'h1', fontFamily: 'heading', fontSize: '32px', mt: 2, mb: 2 };
-export var H2 = function (props) { return _jsx(Text, __assign({}, props, { fontWeight: props.variant })); };
-H2.defaultProps = { as: 'h2', fontFamily: 'heading', fontSize: '24px', mt: 2, mb: 2 };
-export var H3 = function (props) { return _jsx(Text, __assign({}, props, { fontWeight: props.variant })); };
-H3.defaultProps = { as: 'h3', fontFamily: 'heading', fontSize: '21px', mt: 2, mb: 2 };
-export var H4 = function (props) { return _jsx(Text, __assign({}, props, { fontWeight: props.variant })); };
-H4.defaultProps = { as: 'h4', fontFamily: 'heading', fontSize: '18px', mt: 2, mb: 2 };
-export var H5 = function (props) { return _jsx(Text, __assign({}, props, { fontWeight: props.variant })); };
-H5.defaultProps = { as: 'h5', fontFamily: 'heading', fontSize: '16px', mt: 2, mb: 2 };
-export var H6 = function (props) { return _jsx(Text, __assign({}, props, { fontWeight: props.variant })); };
-H6.defaultProps = { as: 'h6', fontFamily: 'heading', fontSize: '14px', mt: 2, mb: 2 };
-export var H7 = function (props) { return _jsx(Text, __assign({}, props, { fontWeight: props.variant })); };
-H7.defaultProps = { as: 'h6', fontFamily: 'heading', fontSize: '12px', mt: 2, mb: 2 };
+var H1 = function (props) { return (0, jsx_runtime_1.jsx)(exports.Text, __assign({}, props, { fontWeight: props.variant })); };
+exports.H1 = H1;
+exports.H1.defaultProps = { as: 'h1', fontFamily: 'heading', fontSize: '32px', mt: 2, mb: 2 };
+var H2 = function (props) { return (0, jsx_runtime_1.jsx)(exports.Text, __assign({}, props, { fontWeight: props.variant })); };
+exports.H2 = H2;
+exports.H2.defaultProps = { as: 'h2', fontFamily: 'heading', fontSize: '24px', mt: 2, mb: 2 };
+var H3 = function (props) { return (0, jsx_runtime_1.jsx)(exports.Text, __assign({}, props, { fontWeight: props.variant })); };
+exports.H3 = H3;
+exports.H3.defaultProps = { as: 'h3', fontFamily: 'heading', fontSize: '21px', mt: 2, mb: 2 };
+var H4 = function (props) { return (0, jsx_runtime_1.jsx)(exports.Text, __assign({}, props, { fontWeight: props.variant })); };
+exports.H4 = H4;
+exports.H4.defaultProps = { as: 'h4', fontFamily: 'heading', fontSize: '18px', mt: 2, mb: 2 };
+var H5 = function (props) { return (0, jsx_runtime_1.jsx)(exports.Text, __assign({}, props, { fontWeight: props.variant })); };
+exports.H5 = H5;
+exports.H5.defaultProps = { as: 'h5', fontFamily: 'heading', fontSize: '16px', mt: 2, mb: 2 };
+var H6 = function (props) { return (0, jsx_runtime_1.jsx)(exports.Text, __assign({}, props, { fontWeight: props.variant })); };
+exports.H6 = H6;
+exports.H6.defaultProps = { as: 'h6', fontFamily: 'heading', fontSize: '14px', mt: 2, mb: 2 };
+var H7 = function (props) { return (0, jsx_runtime_1.jsx)(exports.Text, __assign({}, props, { fontWeight: props.variant })); };
+exports.H7 = H7;
+exports.H7.defaultProps = { as: 'h6', fontFamily: 'heading', fontSize: '12px', mt: 2, mb: 2 };

package/ui/Elements/Typography/index.js

@@ -1,3 +1,19 @@
-import { Text } from './Typography';
-export * from './Typography';
-export default Text;
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var Typography_1 = require("./Typography");
+__exportStar(require("./Typography"), exports);
+exports.default = Typography_1.Text;

package/ui/Elements/Typography/stories/Typography.stories.js

@@ -1,20 +1,23 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { H1, H2, H3, H4, H5, H6, H7, Paragraph1, Paragraph2, Paragraph3, Paragraph4, Paragraph5 } from '../';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.P5 = exports.P4 = exports.P3 = exports.P2 = exports.P1 = exports.Heading7 = exports.Heading6 = exports.Heading5 = exports.Heading4 = exports.Heading3 = exports.Heading2 = exports.Heading1 = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var __1 = require("../");
 var meta = {
     title: 'Elements/Typography',
     tags: ['autodocs'],
     argTypes: {},
 };
-export default meta;
-export var Heading1 = { render: function () { return _jsx(H1, { children: "Heading H1" }); } };
-export var Heading2 = { render: function () { return _jsx(H2, { children: "Heading H2" }); } };
-export var Heading3 = { render: function () { return _jsx(H3, { children: "Heading H3" }); } };
-export var Heading4 = { render: function () { return _jsx(H4, { children: "Heading H4" }); } };
-export var Heading5 = { render: function () { return _jsx(H5, { children: "Heading H5" }); } };
-export var Heading6 = { render: function () { return _jsx(H6, { children: "Heading H6" }); } };
-export var Heading7 = { render: function () { return _jsx(H7, { children: "Heading H7" }); } };
-export var P1 = { render: function () { return _jsx(Paragraph1, { children: "Paragraph1" }); } };
-export var P2 = { render: function () { return _jsx(Paragraph2, { children: "Paragraph1" }); } };
-export var P3 = { render: function () { return _jsx(Paragraph3, { children: "Paragraph1" }); } };
-export var P4 = { render: function () { return _jsx(Paragraph4, { children: "Paragraph1" }); } };
-export var P5 = { render: function () { return _jsx(Paragraph5, { children: "Paragraph1" }); } };
+exports.default = meta;
+exports.Heading1 = { render: function () { return (0, jsx_runtime_1.jsx)(__1.H1, { children: "Heading H1" }); } };
+exports.Heading2 = { render: function () { return (0, jsx_runtime_1.jsx)(__1.H2, { children: "Heading H2" }); } };
+exports.Heading3 = { render: function () { return (0, jsx_runtime_1.jsx)(__1.H3, { children: "Heading H3" }); } };
+exports.Heading4 = { render: function () { return (0, jsx_runtime_1.jsx)(__1.H4, { children: "Heading H4" }); } };
+exports.Heading5 = { render: function () { return (0, jsx_runtime_1.jsx)(__1.H5, { children: "Heading H5" }); } };
+exports.Heading6 = { render: function () { return (0, jsx_runtime_1.jsx)(__1.H6, { children: "Heading H6" }); } };
+exports.Heading7 = { render: function () { return (0, jsx_runtime_1.jsx)(__1.H7, { children: "Heading H7" }); } };
+exports.P1 = { render: function () { return (0, jsx_runtime_1.jsx)(__1.Paragraph1, { children: "Paragraph1" }); } };
+exports.P2 = { render: function () { return (0, jsx_runtime_1.jsx)(__1.Paragraph2, { children: "Paragraph1" }); } };
+exports.P3 = { render: function () { return (0, jsx_runtime_1.jsx)(__1.Paragraph3, { children: "Paragraph1" }); } };
+exports.P4 = { render: function () { return (0, jsx_runtime_1.jsx)(__1.Paragraph4, { children: "Paragraph1" }); } };
+exports.P5 = { render: function () { return (0, jsx_runtime_1.jsx)(__1.Paragraph5, { children: "Paragraph1" }); } };

package/ui/Forms/Checkbox/Checkbox.js

@@ -1,12 +1,14 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { memo, useId } from 'react';
-import { CheckboxWrap, CheckIcon, FakeInput, Label } from './styles';
-import { th, useTheme } from '@xstyled/styled-components';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var styles_1 = require("./styles");
+var styled_components_1 = require("@xstyled/styled-components");
 var Checkbox = function (_a) {
     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;
-    var theme = useTheme();
-    var themeSize = th.fontSize(size)({ theme: theme });
-    var id = useId();
-    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"), id: id }), _jsx(FakeInput, { size: themeSize, children: _jsx(CheckIcon, { icon: minusIcon ? 'minus' : 'check', size: themeSize }) }), label && _jsx(Label, { htmlFor: id, children: label })] }));
+    var theme = (0, styled_components_1.useTheme)();
+    var themeSize = styled_components_1.th.fontSize(size)({ theme: theme });
+    var id = (0, react_1.useId)();
+    return ((0, jsx_runtime_1.jsxs)(styles_1.CheckboxWrap, { size: themeSize, className: className, children: [(0, jsx_runtime_1.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"), id: id }), (0, jsx_runtime_1.jsx)(styles_1.FakeInput, { size: themeSize, children: (0, jsx_runtime_1.jsx)(styles_1.CheckIcon, { icon: minusIcon ? 'minus' : 'check', size: themeSize }) }), label && (0, jsx_runtime_1.jsx)(styles_1.Label, { htmlFor: id, children: label })] }));
 };
-export default memo(Checkbox);
+exports.default = (0, react_1.memo)(Checkbox);

package/ui/Forms/Checkbox/index.js

@@ -1,3 +1,9 @@
-import Checkbox from './Checkbox';
-export { Checkbox };
-export default Checkbox;
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Checkbox = void 0;
+var Checkbox_1 = __importDefault(require("./Checkbox"));
+exports.Checkbox = Checkbox_1.default;
+exports.default = Checkbox_1.default;

package/ui/Forms/Checkbox/stories/Checkbox.stories.js

@@ -1,32 +1,38 @@
-import Checkbox from '../Checkbox';
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CheckboxWithMinusIcon = exports.CheckboxDisabled = exports.CheckboxUnchecked = exports.CheckboxChecked = void 0;
+var Checkbox_1 = __importDefault(require("../Checkbox"));
 var meta = {
     title: 'Forms/Checkbox',
-    component: Checkbox,
+    component: Checkbox_1.default,
     tags: ['autodocs'],
     argTypes: {},
 };
-export default meta;
-export var CheckboxChecked = {
+exports.default = meta;
+exports.CheckboxChecked = {
     args: {
         checked: true,
         onChange: function () { return console.log('Clicked'); },
         label: 'Checked',
     },
 };
-export var CheckboxUnchecked = {
+exports.CheckboxUnchecked = {
     args: {
         checked: false,
         label: 'Unchecked',
     },
 };
-export var CheckboxDisabled = {
+exports.CheckboxDisabled = {
     args: {
         checked: true,
         label: 'Disabled',
         disabled: true,
     },
 };
-export var CheckboxWithMinusIcon = {
+exports.CheckboxWithMinusIcon = {
     args: {
         checked: true,
         label: 'Minus Icon',

package/ui/Forms/Checkbox/styles.js

@@ -1,10 +1,36 @@
+"use strict";
 var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-import styled, { th } from '@xstyled/styled-components';
-import { Icon } from '../../Elements/Icon';
-export 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) {
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Label = exports.CheckboxWrap = exports.CheckIcon = exports.FakeInput = void 0;
+var styled_components_1 = __importStar(require("@xstyled/styled-components"));
+var Icon_1 = require("../../Elements/Icon");
+exports.FakeInput = styled_components_1.default.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) {
     var size = _a.size;
     return size;
 }, function (_a) {
@@ -14,13 +40,13 @@ export var FakeInput = styled.div(templateObject_1 || (templateObject_1 = __make
     var size = _a.size;
     return size;
 });
-export 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'));
-export 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) {
+exports.CheckIcon = (0, styled_components_1.default)(Icon_1.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"])), exports.FakeInput, exports.FakeInput, styled_components_1.th.color('lightGray5'));
+exports.CheckboxWrap = styled_components_1.default.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) {
     var size = _a.size;
     return size;
 }, function (_a) {
     var size = _a.size;
     return size;
 });
-export var Label = styled.label(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"])));
+exports.Label = styled_components_1.default.label(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"])));
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/ui/Forms/Checkbox/types.js

@@ -1 +1,2 @@
-export {};
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/ui/Forms/Input/Input.js

@@ -1,3 +1,4 @@
+"use strict";
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -20,32 +21,34 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useRef } from 'react';
-import { IconsController, IconWrapper, InputIcon, InputRow, InputWrap, StyledInput, Suffix, Tooltip } from './styles';
-import { FieldLabel } from '../../Elements/Label';
-import { SpaceAroundWrap } from '../../Elements/SpaceAround';
-import { ErrorMessage } from '../../Elements/ErrorMessage';
-import { Icon } from '../../Elements/Icon';
-import { Spinner } from '../../Elements/Spinner';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Input = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var styles_1 = require("./styles");
+var Label_1 = require("../../Elements/Label");
+var SpaceAround_1 = require("../../Elements/SpaceAround");
+var ErrorMessage_1 = require("../../Elements/ErrorMessage");
+var Icon_1 = require("../../Elements/Icon");
+var Spinner_1 = require("../../Elements/Spinner");
 var allowedInputTypes = ['text', 'number', 'password'];
-export var Input = function (_a) {
+var Input = function (_a) {
     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, _c = _a.variant, variant = _c === void 0 ? 'default' : _c, disabled = _a.disabled, error = _a.error, _d = _a.isInvalid, isInvalid = _d === void 0 ? undefined : _d, _e = _a.spaceAround, spaceAround = _e === void 0 ? false : _e, inputRef = _a.inputRef, autoComplete = _a.autoComplete, isLoading = _a.isLoading, className = _a.className, suffix = _a.suffix, suffixOnClick = _a.suffixOnClick, errorAppearance = _a.errorAppearance, _f = _a.iconPlacement, iconPlacement = _f === void 0 ? 'left' : _f, iconOnClick = _a.iconOnClick, iconTooltip = _a.iconTooltip, big = _a.big, _g = _a.showArrowsController, showArrowsController = _g === void 0 ? false : _g, onClear = _a.onClear, alwaysShowClear = _a.alwaysShowClear, setNumber = _a.setNumber, onEnter = _a.onEnter, _h = _a.forceFocus, forceFocus = _h === void 0 ? false : _h, _j = _a.autoFocus, autoFocus = _j === void 0 ? false : _j, onBlur = _a.onBlur, _k = _a.asTextArea, asTextArea = _k === void 0 ? false : _k, rest = __rest(_a, ["appearance", "type", "name", "label", "value", "icon", "variant", "disabled", "error", "isInvalid", "spaceAround", "inputRef", "autoComplete", "isLoading", "className", "suffix", "suffixOnClick", "errorAppearance", "iconPlacement", "iconOnClick", "iconTooltip", "big", "showArrowsController", "onClear", "alwaysShowClear", "setNumber", "onEnter", "forceFocus", "autoFocus", "onBlur", "asTextArea"]);
     var $isInvalid = isInvalid !== undefined ? isInvalid : !!error;
     var $isClearable = !!onClear && (!!value || alwaysShowClear) && !disabled && !isLoading;
     var $hasSuffix = !!suffix;
     var checkIconPlacement = showArrowsController ? 'left' : iconPlacement;
-    var onAddItem = useCallback(function () { return setNumber && setNumber(function (base) { return base + 1; }); }, [setNumber]);
-    var onRemoveItem = useCallback(function () {
+    var onAddItem = (0, react_1.useCallback)(function () { return setNumber && setNumber(function (base) { return base + 1; }); }, [setNumber]);
+    var onRemoveItem = (0, react_1.useCallback)(function () {
         setNumber && setNumber(function (base) { return (base > 1 ? base - 1 : 1); });
     }, [setNumber]);
-    var internalRef = useRef();
+    var internalRef = (0, react_1.useRef)();
     var ref = (inputRef || internalRef);
-    useEffect(function () {
+    (0, react_1.useEffect)(function () {
         var _a;
         forceFocus && !disabled && !isLoading && ((_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.focus());
     }, [disabled, forceFocus, isLoading]);
-    var handleBlur = useCallback(function (event) {
+    var handleBlur = (0, react_1.useCallback)(function (event) {
         var _a, _b, _c, _d, _e;
         onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
         //  If the related target is not an input element or its input type is not included in the allowed input types, keep the focus on the input with forceFocus
@@ -55,10 +58,11 @@ export var Input = function (_a) {
             (_e = event.target) === null || _e === void 0 ? void 0 : _e.focus();
         }
     }, [forceFocus, onBlur]);
-    var handleKeyDown = useCallback(function (event) {
+    var handleKeyDown = (0, react_1.useCallback)(function (event) {
         if (event.key === 'Enter') {
             onEnter === null || onEnter === void 0 ? void 0 : onEnter();
         }
     }, [onEnter]);
-    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, variant: variant, 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, "$asTextArea": asTextArea, variant: variant }, 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 && !isLoading && (_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 })] }));
+    return ((0, jsx_runtime_1.jsxs)(SpaceAround_1.SpaceAroundWrap, { spaceAround: spaceAround, className: className, children: [(0, jsx_runtime_1.jsxs)(styles_1.InputWrap, { children: [label && ((0, jsx_runtime_1.jsx)(Label_1.FieldLabel, { htmlFor: name, "$isInvalid": $isInvalid, children: label })), (0, jsx_runtime_1.jsxs)(styles_1.InputRow, { hasValue: !!value, "$isInvalid": $isInvalid, disabled: !!disabled, "$icon": icon, variant: variant, children: [(0, jsx_runtime_1.jsx)(styles_1.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, "$asTextArea": asTextArea, variant: variant }, rest)), icon && ((0, jsx_runtime_1.jsx)(styles_1.InputIcon, { right: showArrowsController ? false : iconPlacement === 'right', onClick: iconOnClick, children: (0, jsx_runtime_1.jsxs)(styles_1.Tooltip, { children: [(0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: icon }), iconTooltip && (0, jsx_runtime_1.jsx)("span", { children: iconTooltip })] }) })), showArrowsController && ((0, jsx_runtime_1.jsxs)(styles_1.IconsController, { children: [(0, jsx_runtime_1.jsx)(styles_1.IconWrapper, { onClick: onAddItem, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: "goUp", fill: "gray1" }) }), (0, jsx_runtime_1.jsx)(styles_1.IconWrapper, { onClick: onRemoveItem, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: "goDown", fill: "gray1" }) })] })), $isClearable && ((0, jsx_runtime_1.jsx)(styles_1.InputIcon, { right: true, onClick: onClear, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: "deleteX", size: "16px", fill: "lightGray3" }) })), suffix && !isLoading && ((0, jsx_runtime_1.jsx)(styles_1.Suffix, { onClick: suffixOnClick, "$isPointer": !!suffixOnClick, "$isInvalid": $isInvalid, children: suffix })), isLoading && ((0, jsx_runtime_1.jsx)(styles_1.InputIcon, { right: true, children: (0, jsx_runtime_1.jsx)(Spinner_1.Spinner, { variant: "sm" }) }))] })] }), error && (0, jsx_runtime_1.jsx)(ErrorMessage_1.ErrorMessage, { appearance: errorAppearance, children: error })] }));
 };
+exports.Input = Input;

package/ui/Forms/Input/index.js

@@ -1,3 +1,6 @@
-import { Input } from './Input';
-export { Input };
-export default Input;
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Input = void 0;
+var Input_1 = require("./Input");
+Object.defineProperty(exports, "Input", { enumerable: true, get: function () { return Input_1.Input; } });
+exports.default = Input_1.Input;

package/ui/Forms/Input/stories/Input.stories.js

@@ -1,11 +1,14 @@
-import { Input } from '../Input';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ForceFocus = exports.Password = exports.WithSuffix = exports.Loading = exports.WithIcon = exports.Disabled = exports.Grid = exports.Primary = void 0;
+var Input_1 = require("../Input");
 var meta = {
     title: 'Forms/Input',
-    component: Input,
+    component: Input_1.Input,
     argTypes: {}
 };
-export default meta;
-export var Primary = {
+exports.default = meta;
+exports.Primary = {
     args: {
         type: 'text',
         label: 'Primary Input',
@@ -13,7 +16,7 @@ export var Primary = {
         defaultValue: "primary text"
     },
 };
-export var Grid = {
+exports.Grid = {
     args: {
         type: 'text',
         label: 'Grid Input',
@@ -21,7 +24,7 @@ export var Grid = {
         defaultValue: "grid text"
     },
 };
-export var Disabled = {
+exports.Disabled = {
     args: {
         type: 'text',
         label: 'Disabled Input',
@@ -29,7 +32,7 @@ export var Disabled = {
         disabled: true
     },
 };
-export var WithIcon = {
+exports.WithIcon = {
     args: {
         type: 'text',
         label: 'With Icon Input',
@@ -38,7 +41,7 @@ export var WithIcon = {
         iconPlacement: 'left'
     },
 };
-export var Loading = {
+exports.Loading = {
     args: {
         type: 'text',
         label: 'Loading Input',
@@ -46,21 +49,21 @@ export var Loading = {
         isLoading: true
     },
 };
-export var WithSuffix = {
+exports.WithSuffix = {
     args: {
         type: 'text',
         suffix: "Eur",
         label: "Input with a suffix"
     },
 };
-export var Password = {
+exports.Password = {
     args: {
         type: 'password',
         label: 'Password Input',
         defaultValue: "Password text"
     },
 };
-export var ForceFocus = {
+exports.ForceFocus = {
     args: {
         type: 'text',
         label: 'Force Focus Input',