@mailstep/design-system 0.7.66 → 0.7.68-beta.0

package/ui/Forms/Input/Input.js

@@ -36,12 +36,12 @@ export var Input = function (_a) {
     var $hasSuffix = !!suffix;
     var checkIconPlacement = showArrowsController ? 'left' : iconPlacement;
     var onAddItem = useCallback(function () {
-        setNumber && setNumber(function (base) { return base + 1; });
+        setNumber === null || setNumber === void 0 ? void 0 : setNumber(function (base) { return base + 1; });
     }, [setNumber]);
     var onRemoveItem = useCallback(function () {
-        setNumber && setNumber(function (base) { return (base > 1 ? base - 1 : 1); });
+        setNumber === null || setNumber === void 0 ? void 0 : setNumber(function (base) { return (base > 1 ? base - 1 : 1); });
     }, [setNumber]);
-    var internalRef = useRef();
+    var internalRef = useRef(null);
     var ref = (inputRef || internalRef);
     useEffect(function () {
         var _a;

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

@@ -1,5 +1,6 @@
 import { Input } from './Input';
 import { InputProps } from './types';
+
 export { Input };
 export type { InputProps };
 export default Input;

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

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

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

@@ -17,24 +17,24 @@ type InputIconProps = {
     hasValue?: boolean;
     $isInvalid?: boolean;
 };
-export declare const InputIcon: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, InputIconProps, never>;
-export declare const ClearableInputIcon: 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, {
+export declare const InputIcon: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, InputIconProps, never>;
+export declare const ClearableInputIcon: 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, {
     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, {
+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;
     $isInvalid: boolean;
 }, never>;
-export declare const InputRow: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
+export declare const InputRow: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
     hasValue: boolean;
     disabled: boolean;
-    $icon?: string | undefined;
-    $isInvalid?: boolean | undefined;
-    variant?: string | undefined;
+    $icon?: string;
+    $isInvalid?: boolean;
+    variant?: string;
 }, never>;
-export declare const Tooltip: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
+export declare const Tooltip: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
 export {};

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

@@ -1,4 +1,5 @@
-import type { ChangeEvent, Dispatch, FocusEvent, InputHTMLAttributes, MouseEvent, ReactElement, ReactNode, RefObject, SetStateAction } from 'react';
+import { ChangeEvent, Dispatch, FocusEvent, InputHTMLAttributes, MouseEvent, ReactElement, ReactNode, RefObject, SetStateAction } from 'react';
+
 export type SpaceAround = boolean | SpaceAroundProps;
 export type SpaceAroundProps = {
     marginTop?: number;
@@ -13,7 +14,7 @@ export type InputProps = InputHTMLAttributes<HTMLInputElement> & {
     placeholder?: string;
     autoComplete?: string;
     suffix?: ReactNode;
-    label?: string | JSX.Element;
+    label?: string | ReactNode;
     value?: string | number;
     defaultValue?: string | number;
     disabled?: boolean;
@@ -46,6 +47,3 @@ export type InputProps = InputHTMLAttributes<HTMLInputElement> & {
     autoFocus?: boolean;
     asTextArea?: boolean;
 };
-export type ModalData = {
-    [key: string]: any;
-};

package/ui/Forms/RadioButton/RadioButton.d.ts

@@ -1,3 +1,5 @@
+import { FC } from 'react';
 import { RadioProps } from './types';
-declare const RadioButton: ({ label, id, name, disabled, onChange, ...rest }: RadioProps) => JSX.Element;
+
+declare const RadioButton: FC<RadioProps>;
 export default RadioButton;

package/ui/Forms/RadioButton/RadioButton.js

@@ -21,8 +21,8 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { CenterDot, Item, Label, PaintoverLayer, StyledRadio, Wrapper } from './styles';
 import { useId } from 'react';
+import { CenterDot, Item, Label, PaintoverLayer, StyledRadio, Wrapper } from './styles';
 var RadioButton = function (_a) {
     var label = _a.label, id = _a.id, name = _a.name, _b = _a.disabled, disabled = _b === void 0 ? false : _b, onChange = _a.onChange, rest = __rest(_a, ["label", "id", "name", "disabled", "onChange"]);
     var customId = useId();

package/ui/Forms/RadioButton/index.d.ts

@@ -1,3 +1,4 @@
-import RadioButton from './RadioButton';
+import { default as RadioButton } from './RadioButton';
+
 export { RadioButton };
 export default RadioButton;

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

@@ -1,8 +1,8 @@
-/// <reference types="react" />
-import type { StoryObj } from '@storybook/react';
+import { StoryObj } from '@storybook/react';
+
 declare const meta: {
     title: string;
-    component: ({ label, id, name, disabled, onChange, ...rest }: import("../types").RadioProps) => JSX.Element;
+    component: import('react').FC<import('../types').RadioProps>;
     tags: string[];
     argTypes: {};
 };

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

@@ -1,10 +1,10 @@
-export declare const Wrapper: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
-export declare const Item: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
-export declare const PaintoverLayer: import("styled-components").StyledComponent<"span", import("@xstyled/system").Theme, {
+export declare const Wrapper: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
+export declare const Item: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
+export declare const PaintoverLayer: import('styled-components').StyledComponent<"span", import('@xstyled/system').Theme, {
     disabled: boolean;
 }, never>;
-export declare const CenterDot: import("styled-components").StyledComponent<"span", import("@xstyled/system").Theme, {}, never>;
-export declare const StyledRadio: import("styled-components").StyledComponent<"input", import("@xstyled/system").Theme, {
+export declare const CenterDot: import('styled-components').StyledComponent<"span", import('@xstyled/system').Theme, {}, never>;
+export declare const StyledRadio: import('styled-components').StyledComponent<"input", import('@xstyled/system').Theme, {
     disabled: boolean;
 }, never>;
-export declare const Label: import("styled-components").StyledComponent<"label", import("@xstyled/system").Theme, {}, never>;
+export declare const Label: import('styled-components').StyledComponent<"label", import('@xstyled/system').Theme, {}, never>;

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

@@ -1,4 +1,5 @@
 import { ChangeEvent } from 'react';
+
 export type RadioProps = {
     label?: string;
     id?: string;

package/ui/Forms/TextArea/TextArea.d.ts

@@ -1,5 +1,6 @@
-import { ChangeEvent, FocusEvent } from 'react';
+import { FC, ChangeEvent, FocusEvent, ReactNode } from 'react';
 import { SpaceAround } from '../Input/types';
+
 export type Props = {
     name: string;
     label?: string;
@@ -14,7 +15,7 @@ export type Props = {
     resize?: 'none' | 'both' | 'horizontal' | 'vertical' | 'initial' | 'inherit';
     icon?: string;
     rows?: HTMLTextAreaElement['rows'];
-    Footer?: JSX.Element;
+    Footer?: ReactNode;
 };
-declare const TextArea: ({ name, label, value, disabled, error, spaceAround, isInvalid, className, resize, icon, rows, Footer, ...rest }: Props) => JSX.Element;
+declare const TextArea: FC<Props>;
 export default TextArea;

package/ui/Forms/TextArea/TextArea.js

@@ -21,11 +21,11 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { StyledTextArea, TextAreaWrap, InnerWrap, BorderWrap, IconWrap } from './styles';
-import { SpaceAroundWrap } from '../../Elements/SpaceAround';
+import ErrorMessage from '../../Elements/ErrorMessage/ErrorMessage';
 import FaIcon from '../../Elements/Icon/Icon';
 import { FieldLabel } from '../../Elements/Label';
-import ErrorMessage from '../../Elements/ErrorMessage/ErrorMessage';
+import { SpaceAroundWrap } from '../../Elements/SpaceAround';
+import { StyledTextArea, TextAreaWrap, InnerWrap, BorderWrap, IconWrap } from './styles';
 var TextArea = function (_a) {
     var name = _a.name, label = _a.label, value = _a.value, disabled = _a.disabled, error = _a.error, _b = _a.spaceAround, spaceAround = _b === void 0 ? false : _b, _c = _a.isInvalid, isInvalid = _c === void 0 ? undefined : _c, className = _a.className, resize = _a.resize, icon = _a.icon, _d = _a.rows, rows = _d === void 0 ? 4 : _d, Footer = _a.Footer, rest = __rest(_a, ["name", "label", "value", "disabled", "error", "spaceAround", "isInvalid", "className", "resize", "icon", "rows", "Footer"]);
     var $isInvalid = isInvalid !== undefined ? isInvalid : !!error;

package/ui/Forms/TextArea/index.d.ts

@@ -1,2 +1,3 @@
-import TextArea from './TextArea';
+import { default as TextArea } from './TextArea';
+
 export default TextArea;

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

@@ -1,12 +1,12 @@
-export declare const IconWrap: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
-export declare const StyledTextArea: import("styled-components").StyledComponent<"textarea", import("@xstyled/system").Theme, {
-    $resize?: string | undefined;
-    $isInvalid?: boolean | undefined;
-    disabled?: boolean | undefined;
+export declare const IconWrap: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
+export declare const StyledTextArea: import('styled-components').StyledComponent<"textarea", import('@xstyled/system').Theme, {
+    $resize?: string;
+    $isInvalid?: boolean;
+    disabled?: boolean;
 }, never>;
-export declare const TextAreaWrap: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
-export declare const BorderWrap: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
-    $isInvalid?: boolean | undefined;
-    disabled?: boolean | undefined;
+export declare const TextAreaWrap: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
+export declare const BorderWrap: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
+    $isInvalid?: boolean;
+    disabled?: boolean;
 }, never>;
-export declare const InnerWrap: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
+export declare const InnerWrap: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;

package/ui/ThemeProvider/ThemeProvider.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
 import { Props } from './types';
-export declare const LanguageContext: import("react").Context<string>;
+
+export declare const LanguageContext: import('react').Context<string>;
 declare const MailstepThemeProvider: ({ children, theme, preflight, language }: Props) => import("react/jsx-runtime").JSX.Element;
 export default MailstepThemeProvider;

package/ui/ThemeProvider/index.d.ts

@@ -1,5 +1,6 @@
-import ThemeProvider from './ThemeProvider';
-import themes from './themes';
+import { default as ThemeProvider } from './ThemeProvider';
+import { default as themes } from './themes';
+
 export * from './types';
 export { themes };
 export default ThemeProvider;

package/ui/ThemeProvider/themes/default.js

@@ -144,7 +144,7 @@ var defaultTheme = {
         gridShadow: '0px 1px 4px 0px rgba(0, 0, 0, 0.12)',
         tooltipShadow: '0px 2px 20px 0px rgba(0, 0, 0, 0.10)',
     },
-    space: [0, 4, 8, 16, 24, 48, 96, 144, 192, 240],
+    space: [0, 4, 8, 16, 24, 48, 96, 144, 192, 240], // same as xstyled default
     transitions: {
         simpleLong: 'all 2s',
         inputTransition: 'border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out',

package/ui/ThemeProvider/themes/index.d.ts

@@ -150,7 +150,7 @@ declare const themes: {
         };
         zIndices: number[];
     };
-    light: import("..").Theme;
+    light: import('..').Theme;
     mailwise: {
         screens: {
             _: number;

package/ui/ThemeProvider/themes/light.d.ts

@@ -1,3 +1,4 @@
-import { Theme } from "../types";
+import { Theme } from '../types';
+
 declare const lightTheme: Theme;
 export default lightTheme;

package/ui/ThemeProvider/themes/mailwise.js

@@ -156,7 +156,7 @@ var defaultTheme = {
         smooth: '0px 4px 25px 0px #0000001a',
         // redesign:
         dialogShadow: '0px 4px 23px 0px rgba(0, 0, 0, 0.08)',
-        tooltipShadow: '0px 1px 4px 0 #B1B8C3',
+        tooltipShadow: '0px 1px 4px 0 #B1B8C3', // color is grayIII
         headerShadow: '1px 2px 3px #00000029',
         headerShadowB: '1px 1px 3px #00000029',
         headerShadowNotifications: '1px 1px 2px #00000029',

package/ui/ThemeProvider/types.d.ts

@@ -1,4 +1,5 @@
-import React from 'react';
+import { default as React } from 'react';
+
 export type Color = {
     [key: string]: string;
 };

package/ui/index.d.ts

@@ -1,51 +1,52 @@
-import CommonGrid from './Blocks/CommonGrid';
-import CornerDialog from './Blocks/CornerDialog';
-import ImageList from './Blocks/ImageList';
-import LanguageSwitch from './Blocks/LanguageSwitch';
-import LightBox from './Blocks/LightBox';
-import LoginPage from './Blocks/LoginPage';
-import Modal from './Blocks/Modal';
-import Popover from './Blocks/Popover';
-import Scheduler from './Blocks/Scheduler';
-import SideMenu from './Blocks/SideMenu';
-import Stepper from './Blocks/Stepper';
-import Tabs from './Blocks/Tabs';
-import Alert from './Elements/Alert';
-import AsyncSelect from './Elements/AsyncSelect';
-import Avatar from './Elements/Avatar';
-import Badge from './Elements/Badge';
-import BorderedBox from './Elements/BorderedBox';
-import Button from './Elements/Button';
-import Card from './Elements/Card';
-import DatePicker from './Elements/DatePicker';
-import Dropdown from './Elements/Dropdown';
-import DropdownSelect from './Elements/DropdownSelect';
-import ErrorMessage from './Elements/ErrorMessage';
-import Icon from './Elements/Icon';
-import Image from './Elements/Image';
-import Label from './Elements/Label';
-import Line from './Elements/Line';
-import Link from './Elements/Link';
-import Logo from './Elements/Logo';
-import MultiSelect from './Elements/MultiSelect';
-import Pagination from './Elements/Pagination';
-import Portal from './Elements/Portal';
-import ProgressBar from './Elements/ProgressBar';
-import Select from './Elements/Select';
-import SimpleLink from './Elements/SimpleLink';
-import SingleSelect from './Elements/SingleSelect';
-import SpaceAround from './Elements/SpaceAround';
-import Spinner from './Elements/Spinner';
-import Tag from './Elements/Tag';
-import Toast from './Elements/Toast';
-import Toggle from './Elements/Toggle';
-import Typography from './Elements/Typography';
-import Checkbox from './Forms/Checkbox';
-import Input from './Forms/Input';
-import RadioButton from './Forms/RadioButton';
-import TextArea from './Forms/TextArea';
-import ThemeProvider from './ThemeProvider';
-import utils from './utils';
+import { default as CommonGrid } from './Blocks/CommonGrid';
+import { default as CornerDialog } from './Blocks/CornerDialog';
+import { default as ImageList } from './Blocks/ImageList';
+import { default as LanguageSwitch } from './Blocks/LanguageSwitch';
+import { default as LightBox } from './Blocks/LightBox';
+import { default as LoginPage } from './Blocks/LoginPage';
+import { default as Modal } from './Blocks/Modal';
+import { default as Popover } from './Blocks/Popover';
+import { default as Scheduler } from './Blocks/Scheduler';
+import { default as SideMenu } from './Blocks/SideMenu';
+import { default as Stepper } from './Blocks/Stepper';
+import { default as Tabs } from './Blocks/Tabs';
+import { default as Alert } from './Elements/Alert';
+import { default as AsyncSelect } from './Elements/AsyncSelect';
+import { default as Avatar } from './Elements/Avatar';
+import { default as Badge } from './Elements/Badge';
+import { default as BorderedBox } from './Elements/BorderedBox';
+import { default as Button } from './Elements/Button';
+import { default as Card } from './Elements/Card';
+import { default as DatePicker } from './Elements/DatePicker';
+import { default as Dropdown } from './Elements/Dropdown';
+import { default as DropdownSelect } from './Elements/DropdownSelect';
+import { default as ErrorMessage } from './Elements/ErrorMessage';
+import { default as Icon } from './Elements/Icon';
+import { default as Image } from './Elements/Image';
+import { default as Label } from './Elements/Label';
+import { default as Line } from './Elements/Line';
+import { default as Link } from './Elements/Link';
+import { default as Logo } from './Elements/Logo';
+import { default as MultiSelect } from './Elements/MultiSelect';
+import { default as Pagination } from './Elements/Pagination';
+import { default as Portal } from './Elements/Portal';
+import { default as ProgressBar } from './Elements/ProgressBar';
+import { default as Select } from './Elements/Select';
+import { default as SimpleLink } from './Elements/SimpleLink';
+import { default as SingleSelect } from './Elements/SingleSelect';
+import { default as SpaceAround } from './Elements/SpaceAround';
+import { default as Spinner } from './Elements/Spinner';
+import { default as Tag } from './Elements/Tag';
+import { default as Toast } from './Elements/Toast';
+import { default as Toggle } from './Elements/Toggle';
+import { default as Typography } from './Elements/Typography';
+import { default as Checkbox } from './Forms/Checkbox';
+import { default as Input } from './Forms/Input';
+import { default as RadioButton } from './Forms/RadioButton';
+import { default as TextArea } from './Forms/TextArea';
+import { default as ThemeProvider } from './ThemeProvider';
+import { default as utils } from './utils';
+
 export { DropdownSelect, DatePicker, CommonGrid, Popover, SingleSelect, MultiSelect, Select, Card, CornerDialog, ImageList, LightBox, Modal, Tabs, Alert, Avatar, AsyncSelect, Badge, BorderedBox, Button, Dropdown, ErrorMessage, Icon, Image, Label, Line, Link, Logo, Pagination, Portal, ProgressBar, SimpleLink, SpaceAround, Spinner, Tag, Toast, Toggle, Typography, Checkbox, Input, RadioButton, ThemeProvider, utils, TextArea, LoginPage, LanguageSwitch, SideMenu, Stepper, Scheduler };
 export * from './Blocks/CornerDialog';
 export * from './Blocks/ImageList';