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

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

@@ -1,36 +1,30 @@
-"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"));
+import Toggle from '../Toggle.js';
 var meta = {
     title: 'Elements/Toggle',
-    component: Toggle_1.default,
+    component: Toggle,
     tags: ['autodocs'],
     argTypes: {},
 };
-exports.default = meta;
-exports.Default = {
+export default meta;
+export var Default = {
     args: {
         label: 'Label',
     },
 };
-exports.Checked = {
+export var Checked = {
     args: {
         label: 'Label',
         checked: true,
     },
 };
-exports.Disabled = {
+export var Disabled = {
     args: {
         label: 'Label',
         checked: true,
         disabled: true,
     },
 };
-exports.VariantGrid = {
+export var VariantGrid = {
     args: {
         label: 'Label',
         checked: true,

package/ui/Elements/Toggle/types.js

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

package/ui/Elements/Typography/Typography.js

@@ -1,4 +1,3 @@
-"use strict";
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -10,48 +9,33 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-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' };
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Text as BaseText } from '../Text/index.js';
+export var Text = function (props) { return _jsx(BaseText, __assign({}, props, { fontWeight: props.variant })); };
+Text.defaultProps = { fontFamily: 'primary' };
 // Paragraphs
-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' };
+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' };
 // Headings
-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 };
+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 };

package/ui/Elements/Typography/index.js

@@ -1,19 +1,3 @@
-"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;
+import { Text } from './Typography.js';
+export * from './Typography.js';
+export default Text;

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

@@ -1,23 +1,20 @@
-"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("../");
+import { jsx as _jsx } from "react/jsx-runtime";
+import { H1, H2, H3, H4, H5, H6, H7, Paragraph1, Paragraph2, Paragraph3, Paragraph4, Paragraph5 } from '../index.js';
 var meta = {
     title: 'Elements/Typography',
     tags: ['autodocs'],
     argTypes: {},
 };
-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" }); } };
+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" }); } };

package/ui/Forms/Checkbox/Checkbox.js

@@ -1,14 +1,12 @@
-"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");
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useId } from 'react';
+import { CheckboxWrap, CheckIcon, FakeInput, Label } from './styles.js';
+import { th, useTheme } from '@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 = (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 })] }));
+    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 })] }));
 };
-exports.default = (0, react_1.memo)(Checkbox);
+export default memo(Checkbox);

package/ui/Forms/Checkbox/index.js

@@ -1,9 +1,3 @@
-"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;
+import Checkbox from './Checkbox.js';
+export { Checkbox };
+export default Checkbox;

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

@@ -1,38 +1,32 @@
-"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"));
+import Checkbox from '../Checkbox.js';
 var meta = {
     title: 'Forms/Checkbox',
-    component: Checkbox_1.default,
+    component: Checkbox,
     tags: ['autodocs'],
     argTypes: {},
 };
-exports.default = meta;
-exports.CheckboxChecked = {
+export default meta;
+export var CheckboxChecked = {
     args: {
         checked: true,
         onChange: function () { return console.log('Clicked'); },
         label: 'Checked',
     },
 };
-exports.CheckboxUnchecked = {
+export var CheckboxUnchecked = {
     args: {
         checked: false,
         label: 'Unchecked',
     },
 };
-exports.CheckboxDisabled = {
+export var CheckboxDisabled = {
     args: {
         checked: true,
         label: 'Disabled',
         disabled: true,
     },
 };
-exports.CheckboxWithMinusIcon = {
+export var CheckboxWithMinusIcon = {
     args: {
         checked: true,
         label: 'Minus Icon',

package/ui/Forms/Checkbox/styles.js

@@ -1,36 +1,10 @@
-"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;
 };
-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) {
+import styled, { th } from '@xstyled/styled-components';
+import { Icon } from '../../Elements/Icon/index.js';
+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 size = _a.size;
     return size;
 }, function (_a) {
@@ -40,13 +14,13 @@ exports.FakeInput = styled_components_1.default.div(templateObject_1 || (templat
     var size = _a.size;
     return size;
 });
-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) {
+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) {
     var size = _a.size;
     return size;
 }, function (_a) {
     var size = _a.size;
     return size;
 });
-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"])));
+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"])));
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/ui/Forms/Checkbox/types.js

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

package/ui/Forms/Input/Input.js

@@ -1,4 +1,3 @@
-"use strict";
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -21,34 +20,32 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-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");
+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.js';
+import { FieldLabel } from '../../Elements/Label/index.js';
+import { SpaceAroundWrap } from '../../Elements/SpaceAround/index.js';
+import { ErrorMessage } from '../../Elements/ErrorMessage/index.js';
+import { Icon } from '../../Elements/Icon/index.js';
+import { Spinner } from '../../Elements/Spinner/index.js';
 var allowedInputTypes = ['text', 'number', 'password'];
-var Input = function (_a) {
+export 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 = (0, react_1.useCallback)(function () { return setNumber && setNumber(function (base) { return base + 1; }); }, [setNumber]);
-    var onRemoveItem = (0, react_1.useCallback)(function () {
+    var onAddItem = useCallback(function () { return setNumber && setNumber(function (base) { return base + 1; }); }, [setNumber]);
+    var onRemoveItem = useCallback(function () {
         setNumber && setNumber(function (base) { return (base > 1 ? base - 1 : 1); });
     }, [setNumber]);
-    var internalRef = (0, react_1.useRef)();
+    var internalRef = useRef();
     var ref = (inputRef || internalRef);
-    (0, react_1.useEffect)(function () {
+    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 = (0, react_1.useCallback)(function (event) {
+    var handleBlur = 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
@@ -58,11 +55,10 @@ var Input = function (_a) {
             (_e = event.target) === null || _e === void 0 ? void 0 : _e.focus();
         }
     }, [forceFocus, onBlur]);
-    var handleKeyDown = (0, react_1.useCallback)(function (event) {
+    var handleKeyDown = useCallback(function (event) {
         if (event.key === 'Enter') {
             onEnter === null || onEnter === void 0 ? void 0 : onEnter();
         }
     }, [onEnter]);
-    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 })] }));
+    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 })] }));
 };
-exports.Input = Input;

package/ui/Forms/Input/index.js

@@ -1,6 +1,3 @@
-"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;
+import { Input } from './Input.js';
+export { Input };
+export default Input;

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

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