@mailstep/design-system 0.4.12 → 0.4.13-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mailstep/design-system",
-  "version": "0.4.12",
+  "version": "0.4.13-beta.1",
   "license": "ISC",
   "type": "module",
   "main": "./ui/index.js",

package/ui/Elements/Icon/icons/Group.d.ts

@@ -0,0 +1,3 @@
+import { SvgProps } from '../types';
+import { FC } from 'react';
+export declare const Group: FC<SvgProps>;

package/ui/Elements/Icon/icons/Group.js

@@ -0,0 +1,13 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+export var Group = function (props) { return (_jsx("svg", __assign({ width: "24", height: "24", viewBox: "0 0 24 24", fill: "#7A90A1", xmlns: "http://www.w3.org/2000/svg" }, props, { children: _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M11 18C11 19.1 10.1 20 9 20C7.9 20 7 19.1 7 18C7 16.9 7.9 16 9 16C10.1 16 11 16.9 11 18ZM9 10C7.9 10 7 10.9 7 12C7 13.1 7.9 14 9 14C10.1 14 11 13.1 11 12C11 10.9 10.1 10 9 10ZM9 4C7.9 4 7 4.9 7 6C7 7.1 7.9 8 9 8C10.1 8 11 7.1 11 6C11 4.9 10.1 4 9 4ZM15 8C16.1 8 17 7.1 17 6C17 4.9 16.1 4 15 4C13.9 4 13 4.9 13 6C13 7.1 13.9 8 15 8ZM15 10C13.9 10 13 10.9 13 12C13 13.1 13.9 14 15 14C16.1 14 17 13.1 17 12C17 10.9 16.1 10 15 10ZM15 16C13.9 16 13 16.9 13 18C13 19.1 13.9 20 15 20C16.1 20 17 19.1 17 18C17 16.9 16.1 16 15 16Z" }) }))); };

package/ui/Elements/Icon/icons/Rows.d.ts

@@ -0,0 +1,3 @@
+import { SvgProps } from '../types';
+import { FC } from 'react';
+export declare const Rows: FC<SvgProps>;

package/ui/Elements/Icon/icons/Rows.js

@@ -0,0 +1,13 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export var Rows = function (props) { return (_jsxs("svg", __assign({ width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", stroke: "#22394E", xmlns: "http://www.w3.org/2000/svg" }, props, { children: [_jsx("path", { d: "M14.25 2.25H3.75C2.92157 2.25 2.25 2.47386 2.25 2.75V6.25C2.25 6.52614 2.92157 6.75 3.75 6.75H14.25C15.0784 6.75 15.75 6.52614 15.75 6.25V2.75C15.75 2.47386 15.0784 2.25 14.25 2.25Z", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M5 15.2222L5 9.77778C5 9.34822 4.85076 9 4.66667 9L2.33333 9C2.14924 9 2 9.34822 2 9.77778L2 15.2222C2 15.6518 2.14924 16 2.33333 16L4.66667 16C4.85076 16 5 15.6518 5 15.2222Z", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M10.5 15L10.5 9.75C10.5 9.33579 10.3508 9 10.1667 9L7.83333 9C7.64924 9 7.5 9.33579 7.5 9.75L7.5 15C7.5 15.4142 7.64924 15.75 7.83333 15.75L10.1667 15.75C10.3508 15.75 10.5 15.4142 10.5 15Z", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M16 15.2222L16 9.77778C16 9.34822 15.8508 9 15.6667 9L13.3333 9C13.1492 9 13 9.34822 13 9.77778L13 15.2222C13 15.6518 13.1492 16 13.3333 16L15.6667 16C15.8508 16 16 15.6518 16 15.2222Z", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] }))); };

package/ui/Elements/Icon/icons/index.d.ts

@@ -46,3 +46,5 @@ export { TwoCheckedBoxes } from './TwoCheckedBoxes';
 export { ThreeDots } from './ThreeDots';
 export { Calendar } from './Calendar';
 export { QRCode } from './QRCode';
+export { Rows } from './Rows';
+export { Group } from './Group';

package/ui/Elements/Icon/icons/index.js

@@ -46,3 +46,5 @@ export { TwoCheckedBoxes } from './TwoCheckedBoxes';
 export { ThreeDots } from './ThreeDots';
 export { Calendar } from './Calendar';
 export { QRCode } from './QRCode';
+export { Rows } from './Rows';
+export { Group } from './Group';

package/ui/Forms/Input/Input.d.ts

@@ -1,2 +1,2 @@
 import { InputProps } from './types';
-export declare const Input: ({ 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, ...rest }: InputProps) => JSX.Element;
+export declare const Input: ({ 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, asTextArea, ...rest }: InputProps) => JSX.Element;

package/ui/Forms/Input/Input.js

@@ -30,7 +30,7 @@ import { Icon } from '../../Elements/Icon';
 import { Spinner } from '../../Elements/Spinner';
 var allowedInputTypes = ['text', 'number'];
 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, 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"]);
+    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, _j = _a.asTextArea, asTextArea = _j === void 0 ? false : _j, 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", "asTextArea"]);
     var $isInvalid = isInvalid !== undefined ? isInvalid : !!error;
     var $isClearable = !!onClear && (!!value || alwaysShowClear) && !disabled && !isLoading;
     var $hasSuffix = !!suffix;
@@ -60,5 +60,5 @@ export var Input = function (_a) {
             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, 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 })] }));
+    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, "$asTextArea": asTextArea }, 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 })] }));
 };

package/ui/Forms/Input/stories/Input.stories.d.ts

@@ -2,7 +2,7 @@
 import { StoryObj } from '@storybook/react';
 declare const meta: {
     title: string;
-    component: ({ 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, ...rest }: import("..").InputProps) => JSX.Element;
+    component: ({ 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, asTextArea, ...rest }: import("..").InputProps) => JSX.Element;
     argTypes: {};
 };
 export default meta;

package/ui/Forms/Input/styles.d.ts

@@ -8,6 +8,7 @@ type StyledInputProps = {
     disabled?: boolean;
     big?: boolean;
     value?: string | number;
+    $asTextArea?: boolean;
 };
 type InputIconProps = {
     right?: boolean;
@@ -15,7 +16,9 @@ type InputIconProps = {
 export declare const InputIcon: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, InputIconProps, never>;
 export declare const IconsController: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
 export declare const IconWrapper: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
-export declare const StyledInput: import("styled-components").StyledComponent<"input", import("@xstyled/system").Theme, StyledInputProps, never>;
+export declare const StyledInput: import("styled-components").StyledComponent<"input", import("@xstyled/system").Theme, {
+    as: string;
+} & StyledInputProps, "as">;
 export declare const InputWrap: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
 export declare const Suffix: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
     $isPointer: boolean;

package/ui/Forms/Input/styles.js

@@ -23,7 +23,12 @@ export var InputIcon = styled.div(templateObject_1 || (templateObject_1 = __make
 });
 export var IconsController = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  top: 0.2em;\n  right: 0.5em;\n"], ["\n  position: absolute;\n  top: 0.2em;\n  right: 0.5em;\n"])));
 export var IconWrapper = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  svg {\n    :hover {\n      cursor: pointer;\n      color: blue2;\n    }\n  }\n"], ["\n  display: flex;\n  svg {\n    :hover {\n      cursor: pointer;\n      color: blue2;\n    }\n  }\n"])));
-export var StyledInput = styled.input(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  ", ";\n  border: slim;\n  border-color: ", ";\n  box-sizing: border-box;\n  background-clip: padding-box;\n  padding-top: 0.5em;\n  padding-bottom: 0.5em;\n  padding-right: ", "em;\n  display: block;\n  width: 100%;\n  font-family: ", ";\n  font-size: 14px;\n  font-weight: medium;\n  transition: inputTransition;\n\n  ~ ", " {\n    svg {\n      stroke: lightGray3;\n    }\n  }\n\n  ::placeholder {\n    color: gray1;\n    opacity: 1;\n  }\n\n  :focus {\n    background-color: white;\n    border-color: blue2;\n    color: typoPrimary;\n    outline: 0;\n\n    ~ ", " {\n      svg {\n        stroke: blue2;\n      }\n    }\n  }\n  ", ";\n  :disabled,\n  :disabled:hover {\n    background-color: lightGray1;\n    border-color: lightGray3;\n    color: gray;\n  }\n\n  text-overflow: ellipsis;\n\n  -moz-appearance: textfield;\n  appearance: textfield;\n  ::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n  }\n"], ["\n  ", ";\n  border: slim;\n  border-color: ", ";\n  box-sizing: border-box;\n  background-clip: padding-box;\n  padding-top: 0.5em;\n  padding-bottom: 0.5em;\n  padding-right: ", "em;\n  display: block;\n  width: 100%;\n  font-family: ", ";\n  font-size: 14px;\n  font-weight: medium;\n  transition: inputTransition;\n\n  ~ ", " {\n    svg {\n      stroke: lightGray3;\n    }\n  }\n\n  ::placeholder {\n    color: gray1;\n    opacity: 1;\n  }\n\n  :focus {\n    background-color: white;\n    border-color: blue2;\n    color: typoPrimary;\n    outline: 0;\n\n    ~ ", " {\n      svg {\n        stroke: blue2;\n      }\n    }\n  }\n  ", ";\n  :disabled,\n  :disabled:hover {\n    background-color: lightGray1;\n    border-color: lightGray3;\n    color: gray;\n  }\n\n  text-overflow: ellipsis;\n\n  -moz-appearance: textfield;\n  appearance: textfield;\n  ::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n  }\n"])), system, function (_a) {
+export var StyledInput = styled.input.attrs(function (_a) {
+    var $asTextArea = _a.$asTextArea;
+    return ({
+        as: $asTextArea ? 'textarea' : 'input',
+    });
+})(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  ", ";\n  border: slim;\n  border-color: ", ";\n  box-sizing: border-box;\n  background-clip: padding-box;\n  padding-top: 0.5em;\n  padding-bottom: 0.5em;\n  padding-right: ", "em;\n  display: block;\n  width: 100%;\n  font-family: ", ";\n  font-size: 14px;\n  font-weight: medium;\n  transition: inputTransition;\n  resize: none;\n  overflow: hidden;\n\n  ~ ", " {\n    svg {\n      stroke: lightGray3;\n    }\n  }\n\n  ::placeholder {\n    color: gray1;\n    opacity: 1;\n  }\n\n  :focus {\n    background-color: white;\n    border-color: blue2;\n    color: typoPrimary;\n    outline: 0;\n\n    ~ ", " {\n      svg {\n        stroke: blue2;\n      }\n    }\n  }\n  ", ";\n  :disabled,\n  :disabled:hover {\n    background-color: lightGray1;\n    border-color: lightGray3;\n    color: gray;\n  }\n\n  text-overflow: ellipsis;\n\n  -moz-appearance: textfield;\n  appearance: textfield;\n  ::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n  }\n"], ["\n  ", ";\n  border: slim;\n  border-color: ", ";\n  box-sizing: border-box;\n  background-clip: padding-box;\n  padding-top: 0.5em;\n  padding-bottom: 0.5em;\n  padding-right: ", "em;\n  display: block;\n  width: 100%;\n  font-family: ", ";\n  font-size: 14px;\n  font-weight: medium;\n  transition: inputTransition;\n  resize: none;\n  overflow: hidden;\n\n  ~ ", " {\n    svg {\n      stroke: lightGray3;\n    }\n  }\n\n  ::placeholder {\n    color: gray1;\n    opacity: 1;\n  }\n\n  :focus {\n    background-color: white;\n    border-color: blue2;\n    color: typoPrimary;\n    outline: 0;\n\n    ~ ", " {\n      svg {\n        stroke: blue2;\n      }\n    }\n  }\n  ", ";\n  :disabled,\n  :disabled:hover {\n    background-color: lightGray1;\n    border-color: lightGray3;\n    color: gray;\n  }\n\n  text-overflow: ellipsis;\n\n  -moz-appearance: textfield;\n  appearance: textfield;\n  ::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n  }\n"])), system, function (_a) {
     var $isInvalid = _a.$isInvalid;
     return ($isInvalid ? th.color('red1') : th.color('lightGray6'));
 }, function (props) { return resolvePaddingRight(props); }, th('fonts.primary'), InputIcon, InputIcon, function (_a) {

package/ui/Forms/Input/types.d.ts

@@ -43,6 +43,7 @@ export type InputProps = InputHTMLAttributes<HTMLInputElement> & {
     setNumber?: Dispatch<SetStateAction<number>>;
     forceFocus?: boolean;
     autoFocus?: boolean;
+    asTextArea?: boolean;
 };
 export type ModalData = {
     [key: string]: any;