@mailstep/design-system 0.8.30 → 0.8.31-beta.2

package/ui/Elements/Tooltip/Tooltip.d.ts

@@ -1,5 +1,6 @@
-import React, { type ReactNode, type FC } from 'react';
-import { type Placement } from '@popperjs/core';
+import { default as React, ReactNode, FC } from 'react';
+import { Placement } from '@popperjs/core';
+
 export type Props = {
     children?: React.ReactNode;
     placement?: Placement;

package/ui/Elements/Tooltip/Tooltip.js

@@ -1,51 +1,25 @@
-import { Paragraph4 } from "../Typography/Typography.js";
-import "../Typography/index.js";
-import Popover from "../../Blocks/Popover/index.js";
-import { useRef, useState } from "react";
-import styled$1 from "@xstyled/styled-components";
-import { jsx, jsxs } from "react/jsx-runtime";
-//#region packages/ui/Elements/Tooltip/Tooltip.tsx
-const Container = styled$1.div`
-  width: fit-content;
-`;
-const TooltipWrapper = styled$1.div`
-  display: flex;
-  flex-direction: column;
-  background-color: white;
-  padding: 8px 10px;
-  margin-top: 4px;
-  border-radius: 8px;
-  box-shadow: tooltipShadow;
-  gap: 2px;
-`;
-const Tooltip = ({ children, placement, title, subtitle }) => {
-	const [visible, setVisible] = useState(false);
-	const ref = useRef(null);
-	const handleMouseEnter = () => {
-		setVisible(true);
-	};
-	const handleMouseLeave = () => {
-		setVisible(false);
-	};
-	return /* @__PURE__ */ jsxs(Container, {
-		ref,
-		onMouseEnter: handleMouseEnter,
-		onMouseLeave: handleMouseLeave,
-		children: [children, visible && /* @__PURE__ */ jsx(Popover, {
-			parentRef: ref,
-			placement: placement ?? "bottom",
-			children: /* @__PURE__ */ jsxs(TooltipWrapper, { children: [title && /* @__PURE__ */ jsx(Paragraph4, {
-				mt: 1,
-				mb: 1,
-				variant: "bold",
-				children: title
-			}), subtitle && /* @__PURE__ */ jsx(Paragraph4, {
-				mt: 1,
-				mb: 1,
-				children: subtitle
-			})] })
-		})]
-	});
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
 };
-//#endregion
-export { Tooltip as default };
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState } from 'react';
+import Popover from '../../Blocks/Popover';
+import { Paragraph4 } from '../Typography';
+import styled from '@xstyled/styled-components';
+var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: fit-content;\n"], ["\n  width: fit-content;\n"])));
+var TooltipWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  background-color: white;\n  padding: 8px 10px;\n  margin-top: 4px;\n  border-radius: 8px;\n  box-shadow: tooltipShadow;\n  gap: 2px;\n"], ["\n  display: flex;\n  flex-direction: column;\n  background-color: white;\n  padding: 8px 10px;\n  margin-top: 4px;\n  border-radius: 8px;\n  box-shadow: tooltipShadow;\n  gap: 2px;\n"])));
+var Tooltip = function (_a) {
+    var children = _a.children, placement = _a.placement, title = _a.title, subtitle = _a.subtitle;
+    var _b = useState(false), visible = _b[0], setVisible = _b[1];
+    var ref = useRef(null);
+    var handleMouseEnter = function () {
+        setVisible(true);
+    };
+    var handleMouseLeave = function () {
+        setVisible(false);
+    };
+    return (_jsxs(Container, { ref: ref, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: [children, visible && (_jsx(Popover, { parentRef: ref, placement: placement !== null && placement !== void 0 ? placement : 'bottom', children: _jsxs(TooltipWrapper, { children: [title && (_jsx(Paragraph4, { mt: 1, mb: 1, variant: "bold", children: title })), subtitle && (_jsx(Paragraph4, { mt: 1, mb: 1, children: subtitle }))] }) }))] }));
+};
+export default Tooltip;
+var templateObject_1, templateObject_2;

package/ui/Elements/Tooltip/index.d.ts

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

package/ui/Elements/Tooltip/index.js

@@ -1,5 +1,3 @@
-import Tooltip from "./Tooltip.js";
-//#region packages/ui/Elements/Tooltip/index.ts
-var Tooltip_default = Tooltip;
-//#endregion
-export { Tooltip, Tooltip_default as default };
+import Tooltip from './Tooltip';
+export { Tooltip };
+export default Tooltip;

package/ui/Elements/Tooltip/stories/Tooltip.stories.d.ts

@@ -1,7 +1,8 @@
-import type { StoryObj } from '@storybook/react-webpack5';
+import { StoryObj } from '@storybook/react-webpack5';
+
 declare const meta: {
     title: string;
-    component: import("react").FC<import("../Tooltip").Props>;
+    component: import('react').FC<import('../Tooltip').Props>;
     tags: string[];
     argTypes: {};
 };

package/ui/Elements/Tooltip/stories/Tooltip.stories.js

@@ -0,0 +1,15 @@
+import Tooltip from '../Tooltip';
+var meta = {
+    title: 'Elements/Tooltip',
+    component: Tooltip,
+    tags: ['autodocs'],
+    argTypes: {},
+};
+export default meta;
+export var Default = {
+    args: {
+        children: '😀',
+        title: 'title',
+        subtitle: 'subtitle',
+    },
+};

package/ui/Elements/Typography/Typography.d.ts

@@ -1,5 +1,6 @@
-import { type FC } from 'react';
-import { type TextProps as BaseTextProps } from '../Text';
+import { FC } from 'react';
+import { TextProps as BaseTextProps } from '../Text';
+
 export declare const Text: FC<BaseTextProps>;
 export declare const Paragraph1: FC<BaseTextProps>;
 export declare const Paragraph2: FC<BaseTextProps>;

package/ui/Elements/Typography/Typography.js

@@ -1,75 +1,46 @@
-import Text$1 from "../Text/Text.js";
-import "../Text/index.js";
-import "react";
-import { jsx } from "react/jsx-runtime";
-//#region packages/ui/Elements/Typography/Typography.tsx
-const Text = ({ as = "p", fontFamily = "primary", fontSize = "10px", variant, ...props }) => /* @__PURE__ */ jsx(Text$1, {
-	as,
-	fontFamily,
-	fontSize,
-	fontWeight: variant,
-	...props
-});
-const BaseHeading = ({ fontFamily = "heading", mb = 2, mt = 2, ...props }) => /* @__PURE__ */ jsx(Text, {
-	fontFamily,
-	mt,
-	mb,
-	...props
-});
-const Paragraph1 = (props) => /* @__PURE__ */ jsx(Text, {
-	fontSize: "18px",
-	...props
-});
-const Paragraph2 = (props) => /* @__PURE__ */ jsx(Text, {
-	fontSize: "16px",
-	...props
-});
-const Paragraph3 = (props) => /* @__PURE__ */ jsx(Text, {
-	fontSize: "14px",
-	...props
-});
-const Paragraph4 = (props) => /* @__PURE__ */ jsx(Text, {
-	fontSize: "12px",
-	...props
-});
-const Paragraph5 = (props) => /* @__PURE__ */ jsx(Text, {
-	fontSize: "10px",
-	...props
-});
-const H1 = (props) => /* @__PURE__ */ jsx(BaseHeading, {
-	fontSize: "32px",
-	as: "h1",
-	...props
-});
-const H2 = (props) => /* @__PURE__ */ jsx(BaseHeading, {
-	fontSize: "24px",
-	as: "h2",
-	...props
-});
-const H3 = (props) => /* @__PURE__ */ jsx(BaseHeading, {
-	fontSize: "21px",
-	as: "h3",
-	...props
-});
-const H4 = (props) => /* @__PURE__ */ jsx(BaseHeading, {
-	fontSize: "18px",
-	as: "h4",
-	...props
-});
-const H5 = (props) => /* @__PURE__ */ jsx(BaseHeading, {
-	fontSize: "16px",
-	as: "h5",
-	...props
-});
-const H6 = (props) => /* @__PURE__ */ jsx(BaseHeading, {
-	fontSize: "14px",
-	as: "h6",
-	...props
-});
-const H7 = (props) => /* @__PURE__ */ jsx(BaseHeading, {
-	fontSize: "12px",
-	as: "h6",
-	...props
-});
-//#endregion
-export { H1, H2, H3, H4, H5, H6, H7, Paragraph1, Paragraph2, Paragraph3, Paragraph4, Paragraph5, Text };
+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 } from "react/jsx-runtime";
+import { Text as BaseText } from '../Text';
+export var Text = function (_a) {
+    var _b = _a.as, as = _b === void 0 ? 'p' : _b, _c = _a.fontFamily, fontFamily = _c === void 0 ? 'primary' : _c, _d = _a.fontSize, fontSize = _d === void 0 ? '10px' : _d, variant = _a.variant, props = __rest(_a, ["as", "fontFamily", "fontSize", "variant"]);
+    return (_jsx(BaseText, __assign({ as: as, fontFamily: fontFamily, fontSize: fontSize, fontWeight: variant }, props)));
+};
+var BaseHeading = function (_a) {
+    var _b = _a.fontFamily, fontFamily = _b === void 0 ? 'heading' : _b, _c = _a.mb, mb = _c === void 0 ? 2 : _c, _d = _a.mt, mt = _d === void 0 ? 2 : _d, props = __rest(_a, ["fontFamily", "mb", "mt"]);
+    return (_jsx(Text, __assign({ fontFamily: fontFamily, mt: mt, mb: mb }, props)));
+};
+// Paragraphs
+export var Paragraph1 = function (props) { return _jsx(Text, __assign({ fontSize: "18px" }, props)); };
+export var Paragraph2 = function (props) { return _jsx(Text, __assign({ fontSize: "16px" }, props)); };
+export var Paragraph3 = function (props) { return _jsx(Text, __assign({ fontSize: "14px" }, props)); };
+export var Paragraph4 = function (props) { return _jsx(Text, __assign({ fontSize: "12px" }, props)); };
+export var Paragraph5 = function (props) { return _jsx(Text, __assign({ fontSize: "10px" }, props)); };
+// Headings
+export var H1 = function (props) { return _jsx(BaseHeading, __assign({ fontSize: "32px", as: "h1" }, props)); };
+export var H2 = function (props) { return _jsx(BaseHeading, __assign({ fontSize: "24px", as: "h2" }, props)); };
+export var H3 = function (props) { return _jsx(BaseHeading, __assign({ fontSize: "21px", as: "h3" }, props)); };
+export var H4 = function (props) { return _jsx(BaseHeading, __assign({ fontSize: "18px", as: "h4" }, props)); };
+export var H5 = function (props) { return _jsx(BaseHeading, __assign({ fontSize: "16px", as: "h5" }, props)); };
+export var H6 = function (props) { return _jsx(BaseHeading, __assign({ fontSize: "14px", as: "h6" }, props)); };
+export var H7 = function (props) { return _jsx(BaseHeading, __assign({ fontSize: "12px", as: "h6" }, props)); };

package/ui/Elements/Typography/index.d.ts

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

package/ui/Elements/Typography/index.js

@@ -1,5 +1,3 @@
-import { H1, H2, H3, H4, H5, H6, H7, Paragraph1, Paragraph2, Paragraph3, Paragraph4, Paragraph5, Text } from "./Typography.js";
-//#region packages/ui/Elements/Typography/index.ts
-var Typography_default = Text;
-//#endregion
-export { H1, H2, H3, H4, H5, H6, H7, Paragraph1, Paragraph2, Paragraph3, Paragraph4, Paragraph5, Text, Typography_default as default };
+import { Text } from './Typography';
+export * from './Typography';
+export default Text;

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

@@ -1,4 +1,5 @@
-import type { StoryObj } from '@storybook/react-webpack5';
+import { StoryObj } from '@storybook/react-webpack5';
+
 declare const meta: {
     title: string;
     tags: string[];

package/ui/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/ui/Forms/Checkbox/Checkbox.d.ts

@@ -1,4 +1,5 @@
-import React from 'react';
-import { type CheckboxProps } from './types';
+import { default as React } from 'react';
+import { CheckboxProps } from './types';
+
 declare const _default: React.NamedExoticComponent<CheckboxProps>;
 export default _default;

package/ui/Forms/Checkbox/Checkbox.js

@@ -1,44 +1,12 @@
-import { CheckIcon, CheckboxWrap, FakeInput, Label } from "./styles.js";
-import { memo, useId } from "react";
-import { th, useTheme } from "@xstyled/styled-components";
-import { jsx, jsxs } from "react/jsx-runtime";
-//#region packages/ui/Forms/Checkbox/Checkbox.tsx
-const Checkbox = ({ name, label, onChange, checked, defaultChecked, size = 4, className, disabled, inputRef, readOnly, minusIcon = false }) => {
-	const theme = useTheme();
-	const themeSize = th.fontSize(size)({ theme });
-	const id = useId();
-	return /* @__PURE__ */ jsxs(CheckboxWrap, {
-		size: themeSize,
-		className,
-		children: [
-			/* @__PURE__ */ jsx("input", {
-				type: "checkbox",
-				ref: inputRef,
-				name,
-				checked,
-				defaultChecked,
-				disabled,
-				onChange,
-				value: "",
-				readOnly,
-				"data-cy": name ? `${name}Checkbox` : void 0,
-				"data-testid": name ? `checkbox-${name}` : void 0,
-				id
-			}),
-			/* @__PURE__ */ jsx(FakeInput, {
-				size: themeSize,
-				children: /* @__PURE__ */ jsx(CheckIcon, {
-					icon: minusIcon ? "minus" : "check",
-					size: themeSize
-				})
-			}),
-			label && /* @__PURE__ */ jsx(Label, {
-				htmlFor: id,
-				children: label
-			})
-		]
-	});
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useId } from 'react';
+import { th, useTheme } from '@xstyled/styled-components';
+import { CheckboxWrap, CheckIcon, FakeInput, Label } from './styles';
+var Checkbox = function (_a) {
+    var name = _a.name, label = _a.label, onChange = _a.onChange, checked = _a.checked, defaultChecked = _a.defaultChecked, _b = _a.size, size = _b === void 0 ? 4 : _b, className = _a.className, disabled = _a.disabled, inputRef = _a.inputRef, readOnly = _a.readOnly, _c = _a.minusIcon, minusIcon = _c === void 0 ? false : _c;
+    var theme = useTheme();
+    var themeSize = th.fontSize(size)({ theme: theme });
+    var id = useId();
+    return (_jsxs(CheckboxWrap, { size: themeSize, className: className, children: [_jsx("input", { type: "checkbox", ref: inputRef, name: name, checked: checked, defaultChecked: defaultChecked, disabled: disabled, onChange: onChange, value: "", readOnly: readOnly, "data-cy": name ? "".concat(name, "Checkbox") : undefined, "data-testid": name ? "checkbox-".concat(name) : undefined, id: id }), _jsx(FakeInput, { size: themeSize, children: _jsx(CheckIcon, { icon: minusIcon ? 'minus' : 'check', size: themeSize }) }), label && _jsx(Label, { htmlFor: id, children: label })] }));
 };
-var Checkbox_default = memo(Checkbox);
-//#endregion
-export { Checkbox_default as default };
+export default memo(Checkbox);

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

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

package/ui/Forms/Checkbox/index.js

@@ -1,5 +1,3 @@
-import Checkbox_default from "./Checkbox.js";
-//#region packages/ui/Forms/Checkbox/index.ts
-var Checkbox_default$1 = Checkbox_default;
-//#endregion
-export { Checkbox_default as Checkbox, Checkbox_default$1 as default };
+import Checkbox from './Checkbox';
+export { Checkbox };
+export default Checkbox;

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

@@ -1,7 +1,8 @@
 import { StoryObj } from '@storybook/react-webpack5';
+
 declare const meta: {
     title: string;
-    component: import("react").NamedExoticComponent<import("../types").CheckboxProps>;
+    component: import('react').NamedExoticComponent<import('../types').CheckboxProps>;
     tags: string[];
     argTypes: {};
 };

package/ui/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 () { return console.log('Clicked'); },
+        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/ui/Forms/Checkbox/styles.d.ts

@@ -1,10 +1,11 @@
-export declare const FakeInput: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
+/// <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<import("react").FC<import("../..").IconProps>, import("@xstyled/system").Theme, {
+export declare const CheckIcon: import('styled-components').StyledComponent<import('react').FC<import('../../Elements/Icon').IconProps>, import('@xstyled/system').Theme, {
     size: string | number;
 }, never>;
-export declare const CheckboxWrap: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
+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<"label", import("@xstyled/system").Theme, {}, never>;
+export declare const Label: import('styled-components').StyledComponent<"label", import('@xstyled/system').Theme, {}, never>;

package/ui/Forms/Checkbox/styles.js

@@ -1,94 +1,26 @@
-import Icon from "../../Elements/Icon/Icon.js";
-import "../../Elements/Icon/index.js";
-import styled$1, { th } from "@xstyled/styled-components";
-//#region packages/ui/Forms/Checkbox/styles.ts
-const FakeInput = styled$1.div`
-  width: ${({ size }) => size};
-  min-width: ${({ size }) => size};
-  height: ${({ size }) => size};
-  border-radius: md;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: all 0.2s ease;
-  transform: rotate(0);
-  overflow: hidden;
-  border: slim;
-  border-color: lightGray5;
-
-  input[type='checkbox']:not(:disabled):hover + & {
-    border-color: gray1;
-  }
-
-  input[type='checkbox']:disabled + & {
-    background-color: white;
-    border-color: lightGray7;
-  }
-
-  input[type='checkbox']:checked:disabled + & {
-    background-color: bgLightGray1;
-    border-color: bgLightGray1;
-  }
-
-  input[type='checkbox']:checked:not(:disabled) + & {
-    transform: rotate(0deg);
-    background-color: red1;
-    border-color: red1;
-  }
-
-  input[type='checkbox']:not(:checked):not(:disabled) + & {
-    transform: rotate(90deg);
-    background-color: white;
-    border-color: lightGray5;
-  }
-`;
-const CheckIcon = styled$1(Icon)`
-  border-radius: lg;
-  transition: all 200ms ease;
-  & svg {
-    width: 70% !important;
-  }
-  & path {
-    fill: none;
-    stroke: none;
-  }
-
-  input[type='checkbox']:not(:disabled):checked + ${FakeInput} & {
-    & path {
-      stroke: white;
-      fill: white;
-    }
-  }
-
-  input[type='checkbox']:disabled:checked + ${FakeInput} & {
-    & path {
-      fill: ${th.color("lightGray5")} !important;
-    }
-  }
-`;
-const CheckboxWrap = styled$1.div`
-  position: relative;
-  display: flex;
-  align-items: center;
-  overflow: hidden;
-
-  input {
-    margin: 0;
-    width: ${({ size }) => size};
-    height: ${({ size }) => size};
-    z-index: 1;
-    position: absolute;
-    opacity: 0;
-    top: 50%;
-    transform: translateY(-50%);
-    left: 0;
-    cursor: pointer;
-  }
-`;
-const Label = styled$1.label`
-  margin: 0;
-  margin-left: 8px;
-  font-size: 14px;
-`;
-//#endregion
-export { CheckIcon, CheckboxWrap, FakeInput, Label };
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { Icon } from '../../Elements/Icon';
+import styled, { th } from '@xstyled/styled-components';
+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.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.d.ts

@@ -1,4 +1,5 @@
-import { type ChangeEvent, type RefObject, type ReactNode } from 'react';
+import { ChangeEvent, RefObject, ReactNode } from 'react';
+
 export type CheckboxProps = {
     name?: string;
     label?: string | ReactNode;

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

@@ -1,3 +1,4 @@
-import { type FC } from 'react';
-import { type InputProps } from './types';
+import { FC } from 'react';
+import { InputProps } from './types';
+
 export declare const Input: FC<InputProps>;