@mailstep/design-system 0.2.0-beta.1 → 0.2.0-beta.2

package/Elements/Text/stories/Text.stories.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: (props: import("..").TextProps) => JSX.Element;
+    tags: string[];
+    argTypes: {};
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const FontSize: Story;
+export declare const FontWeight: Story;
+export declare const VariantMedium: Story;
+export declare const VariantSemibold: Story;
+export declare const VariantBold: Story;

package/Elements/Text/stories/Text.stories.js

@@ -0,0 +1,43 @@
+import Text from '../Text';
+var meta = {
+    title: 'Elements/Text',
+    component: Text,
+    tags: ['autodocs'],
+    argTypes: {},
+};
+export default meta;
+export var Default = {
+    args: {
+        children: 'This is a text',
+    },
+};
+export var FontSize = {
+    args: {
+        children: 'This is a text font-size 10',
+        fontSize: 10,
+    },
+};
+export var FontWeight = {
+    args: {
+        children: 'This is a text font-weight bold',
+        fontWeight: 'bold',
+    },
+};
+export var VariantMedium = {
+    args: {
+        children: 'This is a text font-weight bold',
+        variant: 'medium',
+    },
+};
+export var VariantSemibold = {
+    args: {
+        children: 'This is a text font-weight bold',
+        variant: 'semiBold',
+    },
+};
+export var VariantBold = {
+    args: {
+        children: 'This is a text font-weight bold',
+        variant: 'bold',
+    },
+};

package/Elements/Text/types.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+export type TextProps = {
+    children?: string | number | JSX.Element | (JSX.Element | undefined)[];
+    fontSize?: number;
+    fontWeight?: string;
+    variant?: 'normal' | 'medium' | 'semiBold' | 'bold';
+    mt?: string | number;
+    mr?: string | number;
+    mb?: string | number;
+    ml?: string | number;
+    mx?: string | number;
+    my?: string | number;
+};

package/Elements/Text/types.js

@@ -0,0 +1 @@
+export {};

package/Elements/Toast/Toast.d.ts

@@ -0,0 +1,11 @@
+import { ToastOptions } from 'react-toastify';
+export type ToastType = 'info' | 'success' | 'error' | 'warning';
+export type CustomToastProps = ToastOptions & {
+    closeToast?: () => void;
+    toastProps?: ToastOptions;
+    title?: string;
+    text?: string;
+    type: ToastType;
+};
+declare const Toast: ({ closeToast, title, text, type }: CustomToastProps) => JSX.Element;
+export default Toast;

package/Elements/Toast/Toast.js

@@ -0,0 +1,24 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from '@xstyled/styled-components';
+import { th } from '@xstyled/styled-components';
+import { Icon } from '../Icon';
+var toastTitleMap = {
+    info: 'Info',
+    success: 'Success',
+    error: 'Error',
+    warning: 'Warning',
+};
+var Title = styled.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: block;\n  margin-bottom: 5px;\n  line-height: 18px;\n  font-weight: 700;\n  color: ", ";\n"], ["\n  display: block;\n  margin-bottom: 5px;\n  line-height: 18px;\n  font-weight: 700;\n  color: ", ";\n"])), th('colors.blue2'));
+var Text = styled.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: block;\n  font-size: 12px;\n  line-height: 18px;\n  font-weight: 500;\n  color: ", ";\n"], ["\n  display: block;\n  font-size: 12px;\n  line-height: 18px;\n  font-weight: 500;\n  color: ", ";\n"])), th('colors.gray1'));
+var ContentWrapper = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n"], ["\n  display: flex;\n  justify-content: space-between;\n"])));
+var CloseWrapper = styled.span(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  margin-left: 15px;\n\n  svg {\n    cursor: pointer;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  margin-left: 15px;\n\n  svg {\n    cursor: pointer;\n  }\n"])));
+var Toast = function (_a) {
+    var closeToast = _a.closeToast, title = _a.title, text = _a.text, type = _a.type;
+    return (_jsxs(ContentWrapper, { children: [_jsxs("div", { children: [_jsx(Title, { children: title || toastTitleMap[type] }), text && _jsx(Text, { children: text })] }), _jsx(CloseWrapper, { children: _jsx("div", { onClick: closeToast, children: _jsx(Icon, { icon: "close" }) }) })] }));
+};
+export default Toast;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/Elements/Toast/index.d.ts

@@ -0,0 +1,4 @@
+import Toast from './Toast';
+export type { ToastType } from './Toast';
+export { Toast };
+export default Toast;

package/Elements/Toast/index.js

@@ -0,0 +1,3 @@
+import Toast from './Toast';
+export { Toast };
+export default Toast;

package/Elements/Toggle/Toggle.d.ts

@@ -0,0 +1,3 @@
+import { Props } from './types';
+declare const Toggle: ({ onChange, label, name, checked, defaultChecked, spaceAround, disabled, labelPosition, variant, spaceBetween, ...rest }: Props) => JSX.Element;
+export default Toggle;

package/Elements/Toggle/Toggle.js

@@ -0,0 +1,52 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+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);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled, { css } from '@xstyled/styled-components';
+import { FieldLabel } from '../Label';
+import { SpaceAroundWrap } from '../SpaceAround';
+var StyledSpaceAroundWrap = styled(SpaceAroundWrap)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
+    var $labelPosition = _a.$labelPosition;
+    return ($labelPosition === 'left' ? 'display: flex; align-items: center; margin-top: 1rem' : '');
+});
+var StyledFieldLabel = styled(FieldLabel)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
+    var labelPosition = _a.labelPosition;
+    return (labelPosition === 'left' ? 'margin-bottom: 0; margin-right: 1rem;' : '');
+});
+var disabledStyles = css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  opacity: 0.4;\n"], ["\n  opacity: 0.4;\n"])));
+var StyledToggle = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  aspect-ratio: 1 / 1;\n  width: 100%;\n  height: 100%;\n  border-radius: 7px;\n  background-color: lightGray5;\n  border: 3px solid;\n  border-color: lightGray5;\n  position: relative;\n  transition: all 100ms ease-out;\n\n  ", "\n\n  input:checked + & {\n    background-color: red1;\n    border-color: red1;\n\n    & > span {\n      transform: translate(75%, -50%);\n      background-color: white;\n    }\n  }\n"], ["\n  aspect-ratio: 1 / 1;\n  width: 100%;\n  height: 100%;\n  border-radius: 7px;\n  background-color: lightGray5;\n  border: 3px solid;\n  border-color: lightGray5;\n  position: relative;\n  transition: all 100ms ease-out;\n\n  ", "\n\n  input:checked + & {\n    background-color: red1;\n    border-color: red1;\n\n    & > span {\n      transform: translate(75%, -50%);\n      background-color: white;\n    }\n  }\n"])), function (props) { return (props.disabled ? disabledStyles : ''); });
+var StyledDot = styled.span(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  aspect-ratio: 1 / 1;\n  background-color: white;\n  border-radius: 50%;\n  position: absolute;\n  top: 50%;\n  left: 10%;\n  transform: translate(-20%, -50%);\n  transition: all 100ms ease-out;\n"], ["\n  aspect-ratio: 1 / 1;\n  background-color: white;\n  border-radius: 50%;\n  position: absolute;\n  top: 50%;\n  left: 10%;\n  transform: translate(-20%, -50%);\n  transition: all 100ms ease-out;\n"])));
+var HiddenInput = styled.input(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  opacity: 0;\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  left: 0;\n  top: 0;\n  border-radius: 7px;\n  z-index: 1;\n  margin: 0;\n\n  ", "\n"], ["\n  opacity: 0;\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  left: 0;\n  top: 0;\n  border-radius: 7px;\n  z-index: 1;\n  margin: 0;\n\n  ", "\n"])), function (_a) {
+    var $enabled = _a.$enabled;
+    return ($enabled ? 'cursor: pointer;' : '');
+});
+var Wrapper = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  position: relative;\n  border-radius: 8px;\n  overflow: hidden;\n  flex-shrink: 0;\n  &[data-appearance='primary'] {\n    width: 24px;\n    height: 14px;\n    ", " {\n      height: 10px;\n    }\n  }\n  &[data-appearance='grid'] {\n    width: 28px;\n    height: 16px;\n    ", " {\n      height: 12px;\n    }\n  }\n"], ["\n  position: relative;\n  border-radius: 8px;\n  overflow: hidden;\n  flex-shrink: 0;\n  &[data-appearance='primary'] {\n    width: 24px;\n    height: 14px;\n    ", " {\n      height: 10px;\n    }\n  }\n  &[data-appearance='grid'] {\n    width: 28px;\n    height: 16px;\n    ", " {\n      height: 12px;\n    }\n  }\n"])), StyledDot, StyledDot);
+var Toggle = function (_a) {
+    var onChange = _a.onChange, label = _a.label, name = _a.name, checked = _a.checked, defaultChecked = _a.defaultChecked, _b = _a.spaceAround, spaceAround = _b === void 0 ? false : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, _d = _a.labelPosition, labelPosition = _d === void 0 ? 'default' : _d, _e = _a.variant, variant = _e === void 0 ? 'primary' : _e, _f = _a.spaceBetween, spaceBetween = _f === void 0 ? false : _f, rest = __rest(_a, ["onChange", "label", "name", "checked", "defaultChecked", "spaceAround", "disabled", "labelPosition", "variant", "spaceBetween"]);
+    return (_jsxs(StyledSpaceAroundWrap, { spaceBetween: spaceBetween, spaceAround: spaceAround, "$labelPosition": labelPosition, children: [label && (_jsx(StyledFieldLabel, { htmlFor: name, labelPosition: labelPosition, children: label })), _jsxs(Wrapper, { "data-appearance": variant, children: [_jsx(HiddenInput, { name: name, type: "checkbox", checked: checked, "$enabled": !disabled, defaultChecked: defaultChecked, onChange: !disabled ? onChange : undefined, disabled: disabled, "data-cy": "".concat(name, "Switch") }), _jsx(StyledToggle, __assign({ active: !!checked, disabled: disabled }, rest, { children: _jsx(StyledDot, {}) }))] })] }));
+};
+export default Toggle;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/Elements/Toggle/index.d.ts

@@ -0,0 +1,3 @@
+import Toggle from './Toggle';
+export { Toggle };
+export default Toggle;

package/Elements/Toggle/index.js

@@ -0,0 +1,3 @@
+import Toggle from './Toggle';
+export { Toggle };
+export default Toggle;

package/Elements/Toggle/stories/Toggle.stories.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: ({ onChange, label, name, checked, defaultChecked, spaceAround, disabled, labelPosition, variant, spaceBetween, ...rest }: import("../types").Props) => JSX.Element;
+    tags: string[];
+    argTypes: {};
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Checked: Story;
+export declare const Disabled: Story;
+export declare const VariantGrid: Story;

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

@@ -0,0 +1,33 @@
+import Toggle from '../Toggle';
+var meta = {
+    title: 'Elements/Toggle',
+    component: Toggle,
+    tags: ['autodocs'],
+    argTypes: {},
+};
+export default meta;
+export var Default = {
+    args: {
+        label: 'Label',
+    },
+};
+export var Checked = {
+    args: {
+        label: 'Label',
+        checked: true,
+    },
+};
+export var Disabled = {
+    args: {
+        label: 'Label',
+        checked: true,
+        disabled: true,
+    },
+};
+export var VariantGrid = {
+    args: {
+        label: 'Label',
+        checked: true,
+        variant: 'grid',
+    },
+};

package/Elements/Toggle/types.d.ts

@@ -0,0 +1,21 @@
+import { ChangeEvent } from 'react';
+type SpaceAroundProps = {
+    marginTop?: number;
+    marginRight?: number;
+    marginBottom?: number;
+    marginLeft?: number;
+};
+type SpaceAround = boolean | SpaceAroundProps;
+export type Props = {
+    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+    label?: string;
+    name?: string;
+    checked?: boolean;
+    defaultChecked?: boolean;
+    spaceAround?: SpaceAround;
+    spaceBetween?: boolean;
+    disabled?: boolean;
+    labelPosition?: 'default' | 'left';
+    variant?: 'primary' | 'grid';
+};
+export {};

package/Elements/Toggle/types.js

@@ -0,0 +1 @@
+export {};

package/Elements/Typography/Typography.d.ts

@@ -0,0 +1,117 @@
+import { TextProps as BaseTextProps } from '../Text';
+export declare const Text: {
+    (props: BaseTextProps): JSX.Element;
+    defaultProps: {
+        fontFamily: string;
+    };
+};
+export declare const Paragraph1: {
+    (props: BaseTextProps): JSX.Element;
+    defaultProps: {
+        as: string;
+        fontFamily: string;
+        fontSize: string;
+    };
+};
+export declare const Paragraph2: {
+    (props: BaseTextProps): JSX.Element;
+    defaultProps: {
+        as: string;
+        fontFamily: string;
+        fontSize: string;
+    };
+};
+export declare const Paragraph3: {
+    (props: BaseTextProps): JSX.Element;
+    defaultProps: {
+        as: string;
+        fontFamily: string;
+        fontSize: string;
+    };
+};
+export declare const Paragraph4: {
+    (props: BaseTextProps): JSX.Element;
+    defaultProps: {
+        as: string;
+        fontFamily: string;
+        fontSize: string;
+    };
+};
+export declare const Paragraph5: {
+    (props: BaseTextProps): JSX.Element;
+    defaultProps: {
+        as: string;
+        fontFamily: string;
+        fontSize: string;
+    };
+};
+export declare const H1: {
+    (props: BaseTextProps): JSX.Element;
+    defaultProps: {
+        as: string;
+        fontFamily: string;
+        fontSize: string;
+        mt: number;
+        mb: number;
+    };
+};
+export declare const H2: {
+    (props: BaseTextProps): JSX.Element;
+    defaultProps: {
+        as: string;
+        fontFamily: string;
+        fontSize: string;
+        mt: number;
+        mb: number;
+    };
+};
+export declare const H3: {
+    (props: BaseTextProps): JSX.Element;
+    defaultProps: {
+        as: string;
+        fontFamily: string;
+        fontSize: string;
+        mt: number;
+        mb: number;
+    };
+};
+export declare const H4: {
+    (props: BaseTextProps): JSX.Element;
+    defaultProps: {
+        as: string;
+        fontFamily: string;
+        fontSize: string;
+        mt: number;
+        mb: number;
+    };
+};
+export declare const H5: {
+    (props: BaseTextProps): JSX.Element;
+    defaultProps: {
+        as: string;
+        fontFamily: string;
+        fontSize: string;
+        mt: number;
+        mb: number;
+    };
+};
+export declare const H6: {
+    (props: BaseTextProps): JSX.Element;
+    defaultProps: {
+        as: string;
+        fontFamily: string;
+        fontSize: string;
+        mt: number;
+        mb: number;
+    };
+};
+export declare const H7: {
+    (props: BaseTextProps): JSX.Element;
+    defaultProps: {
+        as: string;
+        fontFamily: string;
+        fontSize: string;
+        mt: number;
+        mb: number;
+    };
+};

package/Elements/Typography/Typography.js

@@ -0,0 +1,41 @@
+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";
+import { Text as BaseText } from '../Text';
+export var Text = function (props) { return _jsx(BaseText, __assign({}, props, { fontWeight: props.variant })); };
+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' };
+// 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 };

package/Elements/Typography/index.d.ts

@@ -0,0 +1,3 @@
+import { Text } from './Typography';
+export * from './Typography';
+export default Text;

package/Elements/Typography/index.js

@@ -0,0 +1,3 @@
+import { Text } from './Typography';
+export * from './Typography';
+export default Text;

package/Elements/Typography/stories/Typography.stories.d.ts

@@ -0,0 +1,20 @@
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    tags: string[];
+    argTypes: {};
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Heading1: Story;
+export declare const Heading2: Story;
+export declare const Heading3: Story;
+export declare const Heading4: Story;
+export declare const Heading5: Story;
+export declare const Heading6: Story;
+export declare const Heading7: Story;
+export declare const P1: Story;
+export declare const P2: Story;
+export declare const P3: Story;
+export declare const P4: Story;
+export declare const P5: Story;

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

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { H1, H2, H3, H4, H5, H6, H7, Paragraph1, Paragraph2, Paragraph3, Paragraph4, Paragraph5 } from '../';
+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" }); } };

package/Forms/Checkbox/Checkbox.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { CheckboxProps } from './types';
+declare const _default: import("react").MemoExoticComponent<({ name, label, onChange, checked, defaultChecked, size, className, disabled, inputRef, readOnly, minusIcon, }: CheckboxProps) => JSX.Element>;
+export default _default;

package/Forms/Checkbox/Checkbox.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo } from 'react';
+import { CheckboxWrap, CheckIcon, FakeInput, Label } from './styles';
+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 = useTheme();
+    var themeSize = th.fontSize(size)({ theme: theme });
+    return (_jsxs(CheckboxWrap, { size: themeSize, className: className, children: [_jsx("input", { type: "checkbox", ref: inputRef, name: name, checked: checked, defaultChecked: defaultChecked, disabled: disabled, onChange: onChange, value: "", readOnly: readOnly, "data-cy": name && "".concat(name, "Checkbox") }), _jsx(FakeInput, { size: themeSize, children: _jsx(CheckIcon, { icon: minusIcon ? 'minus' : 'check', size: themeSize }) }), label && _jsx(Label, { children: label })] }));
+};
+export default memo(Checkbox);

package/Forms/Checkbox/index.d.ts

@@ -0,0 +1,3 @@
+import Checkbox from './Checkbox';
+export { Checkbox };
+export default Checkbox;

package/Forms/Checkbox/index.js

@@ -0,0 +1,3 @@
+import Checkbox from './Checkbox';
+export { Checkbox };
+export default Checkbox;

package/Forms/Checkbox/stories/Checkbox.stories.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: import("react").MemoExoticComponent<({ name, label, onChange, checked, defaultChecked, size, className, disabled, inputRef, readOnly, minusIcon, }: import("../types").CheckboxProps) => JSX.Element>;
+    tags: string[];
+    argTypes: {};
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const CheckboxChecked: Story;
+export declare const CheckboxUnchecked: Story;
+export declare const CheckboxDisabled: Story;
+export declare const CheckboxWithMinusIcon: Story;

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

@@ -0,0 +1,35 @@
+import Checkbox from '../Checkbox';
+var meta = {
+    title: 'Forms/Checkbox',
+    component: Checkbox,
+    tags: ['autodocs'],
+    argTypes: {},
+};
+export default meta;
+export var CheckboxChecked = {
+    args: {
+        checked: true,
+        onChange: function () { },
+        label: 'Checked',
+    },
+};
+export var CheckboxUnchecked = {
+    args: {
+        checked: false,
+        label: 'Unchecked',
+    },
+};
+export var CheckboxDisabled = {
+    args: {
+        checked: true,
+        label: 'Disabled',
+        disabled: true,
+    },
+};
+export var CheckboxWithMinusIcon = {
+    args: {
+        checked: true,
+        label: 'Minus Icon',
+        minusIcon: true,
+    },
+};

package/Forms/Checkbox/styles.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+export declare const FakeInput: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
+    size: string | number;
+}, never>;
+export declare const CheckIcon: import("styled-components").StyledComponent<({ icon, fill, style, size, className, secondaryColor, fixedWidth, spinning, }: import("../../Elements/Icon").IconProps) => JSX.Element, import("@xstyled/system").Theme, {
+    size: string | number;
+}, never>;
+export declare const CheckboxWrap: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
+    size: string | number;
+}, never>;
+export declare const Label: import("styled-components").StyledComponent<"span", import("@xstyled/system").Theme, {}, never>;

package/Forms/Checkbox/styles.js

@@ -0,0 +1,26 @@
+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 size = _a.size;
+    return size;
+}, function (_a) {
+    var size = _a.size;
+    return size;
+}, function (_a) {
+    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) {
+    var size = _a.size;
+    return size;
+}, function (_a) {
+    var size = _a.size;
+    return size;
+});
+export var Label = styled.span(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  margin: 0;\n  margin-left: 8px;\n  font-size: 14px;\n"], ["\n  margin: 0;\n  margin-left: 8px;\n  font-size: 14px;\n"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/Forms/Checkbox/types.d.ts

@@ -0,0 +1,16 @@
+import { ChangeEvent, RefObject } from 'react';
+export type CheckboxProps = {
+    name?: string;
+    label?: string | JSX.Element;
+    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+    checked?: boolean;
+    defaultChecked?: boolean;
+    disabled?: boolean;
+    color?: string;
+    unsetColor?: string;
+    size?: number;
+    className?: string;
+    inputRef?: RefObject<HTMLInputElement>;
+    readOnly?: boolean;
+    minusIcon?: boolean;
+};

package/Forms/Checkbox/types.js

@@ -0,0 +1 @@
+export {};

package/Forms/Input/Input.d.ts

@@ -0,0 +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;