@addev-be/ui 0.19.1 → 0.19.3

package/dist/components/forms/Form/Checkbox.js

@@ -0,0 +1,33 @@
+"use strict";
+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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Checkbox = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var InputWithLabel_1 = require("./InputWithLabel");
+var styles_1 = require("./styles");
+var Checkbox = function (_a) {
+    var label = _a.label, icon = _a.icon, props = __rest(_a, ["label", "icon"]);
+    return ((0, jsx_runtime_1.jsx)(InputWithLabel_1.InputWithLabel, { label: label, icon: icon, children: (0, jsx_runtime_1.jsx)(styles_1.StyledCheckbox, __assign({}, props)) }));
+};
+exports.Checkbox = Checkbox;

package/dist/components/forms/Form/FormGroup.d.ts

@@ -0,0 +1,9 @@
+import { FC, PropsWithChildren } from 'react';
+import { ThemeColorWithIntensity } from '../../../providers/ThemeProvider';
+type FormGroupProps = PropsWithChildren<{
+    color?: ThemeColorWithIntensity;
+    title?: string;
+    subTitle?: string;
+}>;
+export declare const FormGroup: FC<FormGroupProps>;
+export {};

package/dist/components/forms/Form/FormGroup.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormGroup = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var styles_1 = require("./styles");
+var FormGroup = function (_a) {
+    var children = _a.children, color = _a.color, title = _a.title, subTitle = _a.subTitle;
+    return ((0, jsx_runtime_1.jsxs)(styles_1.FormGroupContainer, { color: color, children: [(title || subTitle) && ((0, jsx_runtime_1.jsxs)(styles_1.FormGroupHeader, { children: [title && (0, jsx_runtime_1.jsx)("h3", { children: title }), subTitle && (0, jsx_runtime_1.jsx)("h4", { children: subTitle })] })), children] }));
+};
+exports.FormGroup = FormGroup;

package/dist/components/forms/Form/Input.d.ts

@@ -0,0 +1,3 @@
+import { FC, InputHTMLAttributes } from 'react';
+import { InputContainerProps } from './types';
+export declare const Input: FC<InputContainerProps & InputHTMLAttributes<HTMLInputElement>>;

package/dist/components/forms/Form/Input.js

@@ -0,0 +1,32 @@
+"use strict";
+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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Input = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var InputWithLabel_1 = require("./InputWithLabel");
+var Input = function (_a) {
+    var label = _a.label, icon = _a.icon, props = __rest(_a, ["label", "icon"]);
+    return ((0, jsx_runtime_1.jsx)(InputWithLabel_1.InputWithLabel, { label: label, icon: icon, readOnly: props.readOnly, children: (0, jsx_runtime_1.jsx)("input", __assign({}, props)) }));
+};
+exports.Input = Input;

package/dist/components/forms/Form/InputWithLabel.d.ts

@@ -0,0 +1,2 @@
+import { InputContainerProps } from './types';
+export declare const InputWithLabel: ({ label, icon: Icon, readOnly, children, }: InputContainerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/forms/Form/InputWithLabel.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InputWithLabel = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var styles_1 = require("./styles");
+var InputWithLabel = function (_a) {
+    var label = _a.label, Icon = _a.icon, readOnly = _a.readOnly, children = _a.children;
+    return ((0, jsx_runtime_1.jsxs)(styles_1.InputContainer, { className: readOnly ? 'read-only' : '', children: [(label || Icon) && ((0, jsx_runtime_1.jsxs)("span", { children: [Icon && (0, jsx_runtime_1.jsx)(Icon, {}), label] })), children] }));
+};
+exports.InputWithLabel = InputWithLabel;

package/dist/components/forms/Form/Select.d.ts

@@ -0,0 +1,17 @@
+import { SelectHTMLAttributes } from 'react';
+type SelectProps<T> = {
+    items: T[];
+    value: T | null;
+    itemKey: (item: T, index: number) => string;
+    itemLabel: (item: T, index: number) => string;
+    readOnly?: boolean;
+    onChange?: (value: T | null) => void;
+};
+export declare const Select: <T>(props: {
+    label?: string;
+    icon?: import("../../..").IconFC;
+    readOnly?: boolean;
+} & {
+    children?: import("react").ReactNode | undefined;
+} & Omit<SelectHTMLAttributes<HTMLSelectElement>, "onChange" | "value"> & SelectProps<T> & import("react").RefAttributes<HTMLSelectElement>) => import("react").JSX.Element | null;
+export {};

package/dist/components/forms/Form/Select.js

@@ -0,0 +1,46 @@
+"use strict";
+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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Select = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var InputWithLabel_1 = require("./InputWithLabel");
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+var SelectInner = function (_a, ref) {
+    var icon = _a.icon, label = _a.label, items = _a.items, itemKey = _a.itemKey, itemLabel = _a.itemLabel, readOnly = _a.readOnly, onChange = _a.onChange, value = _a.value, props = __rest(_a, ["icon", "label", "items", "itemKey", "itemLabel", "readOnly", "onChange", "value"]);
+    var onSelectChange = (0, react_1.useCallback)(function (event) {
+        if (onChange) {
+            var selectedValue_1 = event.target.value;
+            var selectedItem = items.find(function (item, index) { return itemKey(item, index) === selectedValue_1; });
+            onChange(selectedItem !== null && selectedItem !== void 0 ? selectedItem : null);
+        }
+    }, [items, itemKey, onChange]);
+    var selectedValue = value ? itemKey(value, -1) : undefined;
+    return ((0, jsx_runtime_1.jsx)(InputWithLabel_1.InputWithLabel, { label: label, icon: icon, readOnly: readOnly, children: (0, jsx_runtime_1.jsx)("select", __assign({}, props, { disabled: readOnly, value: selectedValue, onChange: onSelectChange, ref: ref, children: items.map(function (item, index) {
+                var key = itemKey(item, index);
+                var label = itemLabel(item, index);
+                return ((0, jsx_runtime_1.jsx)("option", { value: key, children: label }, key));
+            }) })) }));
+};
+exports.Select = (0, react_1.forwardRef)(SelectInner);

package/dist/components/forms/Form/TextArea.d.ts

@@ -0,0 +1,4 @@
+import { ComponentProps, FC } from 'react';
+import { AutoTextArea } from '../AutoTextArea';
+import { InputContainerProps } from './types';
+export declare const TextArea: FC<InputContainerProps & ComponentProps<typeof AutoTextArea>>;

package/dist/components/forms/Form/TextArea.js

@@ -0,0 +1,33 @@
+"use strict";
+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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextArea = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var AutoTextArea_1 = require("../AutoTextArea");
+var InputWithLabel_1 = require("./InputWithLabel");
+var TextArea = function (_a) {
+    var label = _a.label, icon = _a.icon, props = __rest(_a, ["label", "icon"]);
+    return ((0, jsx_runtime_1.jsx)(InputWithLabel_1.InputWithLabel, { label: label, icon: icon, children: (0, jsx_runtime_1.jsx)(AutoTextArea_1.AutoTextArea, __assign({}, props)) }));
+};
+exports.TextArea = TextArea;

package/dist/components/forms/Form/index.d.ts

@@ -0,0 +1,66 @@
+import { FC, PropsWithChildren } from 'react';
+import { Checkbox } from './Checkbox';
+import { FormGroup } from './FormGroup';
+import { Input } from './Input';
+import { Select } from './Select';
+import { TextArea } from './TextArea';
+export type FormProps = PropsWithChildren<{
+    onSubmit?: () => void;
+}>;
+export type FormFC = FC<FormProps> & {
+    Group: typeof FormGroup;
+    Input: typeof Input;
+    Select: typeof Select;
+    Checkbox: typeof Checkbox;
+    TextArea: typeof TextArea;
+};
+export declare const Form: {
+    ({ children, onSubmit }: FormProps): import("react/jsx-runtime").JSX.Element;
+    Group: FC<{
+        color?: import("../../..").ThemeColorWithIntensity;
+        title?: string;
+        subTitle?: string;
+    } & {
+        children?: import("react").ReactNode | undefined;
+    }>;
+    Input: FC<{
+        label?: string;
+        icon?: import("../../..").IconFC;
+        readOnly?: boolean;
+    } & {
+        children?: import("react").ReactNode | undefined;
+    } & import("react").InputHTMLAttributes<HTMLInputElement>>;
+    Select: <T>(props: {
+        label?: string;
+        icon?: import("../../..").IconFC;
+        readOnly?: boolean;
+    } & {
+        children?: import("react").ReactNode | undefined;
+    } & Omit<import("react").SelectHTMLAttributes<HTMLSelectElement>, "onChange" | "value"> & {
+        items: T[];
+        value: T | null;
+        itemKey: (item: T, index: number) => string;
+        itemLabel: (item: T, index: number) => string;
+        readOnly?: boolean;
+        onChange?: ((value: T | null) => void) | undefined;
+    } & import("react").RefAttributes<HTMLSelectElement>) => import("react").JSX.Element | null;
+    Checkbox: FC<{
+        label?: string;
+        icon?: import("../../..").IconFC;
+        readOnly?: boolean;
+    } & {
+        children?: import("react").ReactNode | undefined;
+    } & import("react").InputHTMLAttributes<HTMLInputElement>>;
+    TextArea: FC<{
+        label?: string;
+        icon?: import("../../..").IconFC;
+        readOnly?: boolean;
+    } & {
+        children?: import("react").ReactNode | undefined;
+    } & import("react").ClassAttributes<HTMLTextAreaElement> & import("react").TextareaHTMLAttributes<HTMLTextAreaElement> & {
+        minRows?: number;
+        maxRows?: number;
+        canGrow?: boolean;
+        canShrink?: boolean;
+    }>;
+};

package/dist/components/forms/Form/index.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Form = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var Checkbox_1 = require("./Checkbox");
+var FormGroup_1 = require("./FormGroup");
+var Input_1 = require("./Input");
+var Select_1 = require("./Select");
+var TextArea_1 = require("./TextArea");
+var Form = function (_a) {
+    var children = _a.children, onSubmit = _a.onSubmit;
+    var handleSubmit = (0, react_1.useCallback)(function (e) {
+        e.preventDefault();
+        onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit();
+    }, [onSubmit]);
+    return (0, jsx_runtime_1.jsx)("form", { onSubmit: handleSubmit, children: children });
+};
+exports.Form = Form;
+exports.Form.Group = FormGroup_1.FormGroup;
+exports.Form.Input = Input_1.Input;
+exports.Form.Select = Select_1.Select;
+exports.Form.Checkbox = Checkbox_1.Checkbox;
+exports.Form.TextArea = TextArea_1.TextArea;

package/dist/components/forms/Form/styles.d.ts

@@ -0,0 +1,14 @@
+import { ThemeColorWithIntensity } from '../../../providers/ThemeProvider';
+export declare const FormGroupContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").FieldsetHTMLAttributes<HTMLFieldSetElement>, HTMLFieldSetElement>, {
+    color?: ThemeColorWithIntensity;
+}>> & string;
+export declare const FormGroupHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const inputCss: import("styled-components").RuleSet<{
+    $readOnly?: boolean;
+}>;
+export declare const InputContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, {
+    $readOnly?: boolean;
+}>> & string;
+export declare const StyledCheckbox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
+    ref?: ((instance: HTMLInputElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLInputElement> | null | undefined;
+}>, never>, never>> & string;

package/dist/components/forms/Form/styles.js

@@ -0,0 +1,47 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledCheckbox = exports.InputContainer = exports.inputCss = exports.FormGroupHeader = exports.FormGroupContainer = void 0;
+var styled_components_1 = __importStar(require("styled-components"));
+var responsive_1 = require("../../../helpers/responsive");
+exports.FormGroupContainer = styled_components_1.default.fieldset(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  background: var(--color-neutral-100);\n  border-radius: var(--rounded-md);\n  box-shadow: var(--shadow-md);\n  padding: var(--space-4);\n  margin: 0;\n  border: 1px solid var(--color-neutral-100);\n  gap: var(--space-2);\n  border-left: 8px solid ", ";\n"], ["\n  display: flex;\n  flex-direction: column;\n  background: var(--color-neutral-100);\n  border-radius: var(--rounded-md);\n  box-shadow: var(--shadow-md);\n  padding: var(--space-4);\n  margin: 0;\n  border: 1px solid var(--color-neutral-100);\n  gap: var(--space-2);\n  border-left: 8px solid ", ";\n"])), function (_a) {
+    var _b = _a.color, color = _b === void 0 ? 'neutral' : _b;
+    return "var(--color-".concat(color, ")");
+});
+exports.FormGroupHeader = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-1);\n  margin-bottom: var(--space-1);\n\n  & > h3 {\n    margin: 0;\n    font-size: var(--text-lg);\n    font-weight: bold;\n  }\n  & > h4 {\n    margin: 0;\n    font-size: var(--text-sm);\n    font-weight: var(--font-normal);\n    color: var(--color-neutral-500);\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-1);\n  margin-bottom: var(--space-1);\n\n  & > h3 {\n    margin: 0;\n    font-size: var(--text-lg);\n    font-weight: bold;\n  }\n  & > h4 {\n    margin: 0;\n    font-size: var(--text-sm);\n    font-weight: var(--font-normal);\n    color: var(--color-neutral-500);\n  }\n"])));
+exports.inputCss = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  font-family: inherit;\n  font-size: var(--text-base);\n\n  border: none;\n  color: ", ";\n  background: ", ";\n\n  padding: var(--space-1);\n  width: 100%;\n  text-align: right;\n\n  &:focus {\n    outline: none;\n  }\n"], ["\n  font-family: inherit;\n  font-size: var(--text-base);\n\n  border: none;\n  color: ", ";\n  background: ", ";\n\n  padding: var(--space-1);\n  width: 100%;\n  text-align: right;\n\n  &:focus {\n    outline: none;\n  }\n"])), function (_a) {
+    var $readOnly = _a.$readOnly;
+    return $readOnly ? 'var(--color-neutral-800)' : 'var(--color-neutral-900)';
+}, function (_a) {
+    var $readOnly = _a.$readOnly;
+    return $readOnly ? 'none' : 'var(--color-neutral-0)';
+});
+exports.InputContainer = styled_components_1.default.label(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  ", " {\n    flex-direction: row;\n  }\n\n  align-items: flex-start;\n  gap: var(--space-2);\n  padding: var(--space-1) var(--space-2);\n\n  border: 1px solid var(--color-neutral-200);\n  background: var(--color-neutral-0);\n  &:focus-within {\n    outline: 2px solid var(--color-primary-500);\n  }\n\n  &.read-only {\n    background: none;\n    border: none;\n    &:focus-within {\n      outline: none;\n    }\n\n    & + & {\n      border-top: 1px solid var(--color-neutral-300);\n      padding-top: var(--space-4);\n    }\n  }\n\n  & > span {\n    color: var(--color-neutral-500);\n    font-size: var(--text-base);\n    padding: var(--space-1);\n    display: flex;\n    flex-direction: row;\n    gap: var(--space-2);\n    line-height: 1.25;\n\n    & > svg {\n      width: var(--space-4);\n      height: var(--space-4);\n      fill: var(--color-neutral-500);\n      flex-shrink: 0;\n    }\n  }\n\n  & > div {\n    flex: 1;\n  }\n\n  & > select,\n  & > input,\n  & > textarea {\n    ", "\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  ", " {\n    flex-direction: row;\n  }\n\n  align-items: flex-start;\n  gap: var(--space-2);\n  padding: var(--space-1) var(--space-2);\n\n  border: 1px solid var(--color-neutral-200);\n  background: var(--color-neutral-0);\n  &:focus-within {\n    outline: 2px solid var(--color-primary-500);\n  }\n\n  &.read-only {\n    background: none;\n    border: none;\n    &:focus-within {\n      outline: none;\n    }\n\n    & + & {\n      border-top: 1px solid var(--color-neutral-300);\n      padding-top: var(--space-4);\n    }\n  }\n\n  & > span {\n    color: var(--color-neutral-500);\n    font-size: var(--text-base);\n    padding: var(--space-1);\n    display: flex;\n    flex-direction: row;\n    gap: var(--space-2);\n    line-height: 1.25;\n\n    & > svg {\n      width: var(--space-4);\n      height: var(--space-4);\n      fill: var(--color-neutral-500);\n      flex-shrink: 0;\n    }\n  }\n\n  & > div {\n    flex: 1;\n  }\n\n  & > select,\n  & > input,\n  & > textarea {\n    ", "\n  }\n"])), responsive_1.mediaQueries.mdUp, exports.inputCss);
+exports.StyledCheckbox = styled_components_1.default.input.attrs({ type: 'checkbox' })(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  width: var(--space-4);\n  height: var(--space-4);\n"], ["\n  width: var(--space-4);\n  height: var(--space-4);\n"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/dist/components/forms/Form/types.d.ts

@@ -0,0 +1,7 @@
+import { IconFC } from '../../../Icons';
+import { PropsWithChildren } from 'react';
+export type InputContainerProps = PropsWithChildren<{
+    label?: string;
+    icon?: IconFC;
+    readOnly?: boolean;
+}>;

package/dist/components/forms/Form/types.js

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

package/dist/components/forms/IconButton.d.ts

@@ -1,7 +1,8 @@
 import { ButtonProps } from './Button';
 import { ButtonHTMLAttributes } from 'react';
 import { IconFC } from '../../Icons';
+import { ThemeSize } from '../../providers';
 export declare const IconButton: (props: ButtonProps & {
     icon: IconFC;
-    $iconSize?: string;
+    $iconSize?: ThemeSize;
 } & ButtonHTMLAttributes<HTMLButtonElement> & import("react").RefAttributes<HTMLButtonElement>) => import("react").JSX.Element | null;

package/dist/components/forms/IconButton.js

@@ -38,23 +38,23 @@ var styles = {
     IconButton: (0, styled_components_1.default)(Button_1.Button).attrs({
         className: 'IconButton',
     })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    &.small {\n      padding: var(--space-1);\n      height: var(--space-6);\n      width: var(--space-6);\n      svg {\n        margin-right: 0;\n        width: ", ";\n        height: ", ";\n      }\n    }\n    &.medium {\n      padding: var(--space-2);\n      height: var(--space-8);\n      width: var(--space-8);\n      svg {\n        margin-right: 0;\n        width: ", ";\n        height: ", ";\n      }\n    }\n    &.large {\n      padding: var(--space-3);\n      height: var(--space-10);\n      width: var(--space-10);\n      svg {\n        margin-right: 0;\n        width: ", ";\n        height: ", ";\n      }\n    }\n  "], ["\n    &.small {\n      padding: var(--space-1);\n      height: var(--space-6);\n      width: var(--space-6);\n      svg {\n        margin-right: 0;\n        width: ", ";\n        height: ", ";\n      }\n    }\n    &.medium {\n      padding: var(--space-2);\n      height: var(--space-8);\n      width: var(--space-8);\n      svg {\n        margin-right: 0;\n        width: ", ";\n        height: ", ";\n      }\n    }\n    &.large {\n      padding: var(--space-3);\n      height: var(--space-10);\n      width: var(--space-10);\n      svg {\n        margin-right: 0;\n        width: ", ";\n        height: ", ";\n      }\n    }\n  "])), function (_a) {
-        var _b = _a.$iconSize, $iconSize = _b === void 0 ? 'var(--space-4)' : _b;
-        return $iconSize;
+        var _b = _a.$iconSize, $iconSize = _b === void 0 ? '5' : _b;
+        return "var(--space-".concat($iconSize, ")");
     }, function (_a) {
-        var _b = _a.$iconSize, $iconSize = _b === void 0 ? 'var(--space-4)' : _b;
-        return $iconSize;
+        var _b = _a.$iconSize, $iconSize = _b === void 0 ? '5' : _b;
+        return "var(--space-".concat($iconSize, ")");
     }, function (_a) {
-        var _b = _a.$iconSize, $iconSize = _b === void 0 ? 'var(--space-5)' : _b;
-        return $iconSize;
+        var _b = _a.$iconSize, $iconSize = _b === void 0 ? '6' : _b;
+        return "var(--space-".concat($iconSize, ")");
     }, function (_a) {
-        var _b = _a.$iconSize, $iconSize = _b === void 0 ? 'var(--space-5)' : _b;
-        return $iconSize;
+        var _b = _a.$iconSize, $iconSize = _b === void 0 ? '6' : _b;
+        return "var(--space-".concat($iconSize, ")");
     }, function (_a) {
-        var _b = _a.$iconSize, $iconSize = _b === void 0 ? 'var(--space-6)' : _b;
-        return $iconSize;
+        var _b = _a.$iconSize, $iconSize = _b === void 0 ? '8' : _b;
+        return "var(--space-".concat($iconSize, ")");
     }, function (_a) {
-        var _b = _a.$iconSize, $iconSize = _b === void 0 ? 'var(--space-6)' : _b;
-        return $iconSize;
+        var _b = _a.$iconSize, $iconSize = _b === void 0 ? '8' : _b;
+        return "var(--space-".concat($iconSize, ")");
     }),
 };
 exports.IconButton = (0, react_1.forwardRef)(function (_a, ref) {

package/dist/components/forms/Select.d.ts

@@ -1,10 +1,9 @@
 import { SelectHTMLAttributes } from 'react';
-type SelectProps<T> = {
+type PropGetter<T> = (item: T) => string;
+export type SelectProps<T> = {
     items: T[];
-    itemKey: keyof T | ((item: T) => string);
-    itemLabel: keyof T | ((item: T) => string);
+    itemKey: PropGetter<T>;
+    itemLabel: PropGetter<T>;
 };
-export declare const Select: <T extends {
-    [k: string]: any;
-}>({ items, itemKey, itemLabel, ...props }: SelectProps<T> & SelectHTMLAttributes<HTMLSelectElement>) => import("react/jsx-runtime").JSX.Element;
+export declare const Select: <T>({ items, itemKey, itemLabel, ...props }: SelectProps<T> & SelectHTMLAttributes<HTMLSelectElement>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/forms/Select.js

@@ -34,14 +34,11 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var styles_1 = require("./styles");
 var styled_components_1 = __importDefault(require("styled-components"));
 var StyledSelect = styled_components_1.default.select(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), styles_1.inputStyle);
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 var Select = function (_a) {
     var items = _a.items, itemKey = _a.itemKey, itemLabel = _a.itemLabel, props = __rest(_a, ["items", "itemKey", "itemLabel"]);
-    var keyGetter = typeof itemKey === 'function' ? itemKey : function (item) { return item[itemKey]; };
-    var labelGetter = typeof itemLabel === 'function' ? itemLabel : function (item) { return item[itemLabel]; };
     return ((0, jsx_runtime_1.jsx)(StyledSelect, __assign({}, props, { children: items.map(function (item) {
-            var key = keyGetter(item);
-            var label = labelGetter(item);
+            var key = itemKey(item);
+            var label = itemLabel(item);
             return ((0, jsx_runtime_1.jsx)("option", { value: key, children: label }, key));
         }) })));
 };

package/dist/components/forms/index.d.ts

@@ -1,5 +1,8 @@
+export * from './AutoTextArea';
 export * from './Button';
 export * from './Select';
 export * from './IconButton';
 export * from './IndeterminateCheckbox';
+export * from './Form';
+export * from './Form/InputWithLabel';
 export * from './styles';

package/dist/components/forms/index.js

@@ -14,8 +14,11 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./AutoTextArea"), exports);
 __exportStar(require("./Button"), exports);
 __exportStar(require("./Select"), exports);
 __exportStar(require("./IconButton"), exports);
 __exportStar(require("./IndeterminateCheckbox"), exports);
+__exportStar(require("./Form"), exports);
+__exportStar(require("./Form/InputWithLabel"), exports);
 __exportStar(require("./styles"), exports);

package/dist/components/layout/Columns.d.ts

@@ -0,0 +1,5 @@
+export type ColumnsProps = {
+    columns?: number | string[];
+};
+export declare const Columns: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ColumnsProps>> & string;
+export declare const Column: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/components/layout/Columns.js

@@ -0,0 +1,19 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Column = exports.Columns = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+exports.Columns = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: grid;\n  grid-gap: var(--space-2);\n  grid-template-columns: ", ";\n"], ["\n  display: grid;\n  grid-gap: var(--space-2);\n  grid-template-columns: ", ";\n"])), function (_a) {
+    var columns = _a.columns;
+    return typeof columns === 'number'
+        ? "repeat(".concat(columns, ", 1fr)")
+        : (columns === null || columns === void 0 ? void 0 : columns.join(' ')) || 'none';
+});
+exports.Column = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-2);\n"], ["\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-2);\n"])));
+var templateObject_1, templateObject_2;

package/dist/components/layout/Dropdown/index.d.ts

@@ -5,6 +5,7 @@ type DropdownProps = PropsWithChildren<styles.DropdownContainerProps & {
     $autoPositionX?: boolean;
     $autoPositionY?: boolean;
     onClose?: () => void;
+    usePortal?: boolean;
     style?: CSSProperties;
 }>;
 export declare const Dropdown: FC<DropdownProps>;

package/dist/components/layout/Dropdown/index.js

@@ -74,12 +74,33 @@ var getDropdownStyle = function (dropdown) {
     return dropdownStyle;
 };
 var Dropdown = function (_a) {
-    var children = _a.children, onClose = _a.onClose, $backdropAlpha = _a.$backdropAlpha, props = __rest(_a, ["children", "onClose", "$backdropAlpha"]);
+    var children = _a.children, onClose = _a.onClose, _b = _a.usePortal, usePortal = _b === void 0 ? true : _b, props = __rest(_a, ["children", "onClose", "usePortal"]);
     var createPortal = (0, providers_1.usePortals)().createPortal;
+    var firstClick = (0, react_1.useRef)(true);
+    var containerRef = (0, react_1.useRef)(null);
     var style = (0, react_1.useMemo)(function () { return getDropdownStyle(props); }, [props]);
+    var onDocumentClick = (0, react_1.useCallback)(function (ev) {
+        if (firstClick.current) {
+            firstClick.current = false;
+            return;
+        }
+        if (containerRef.current &&
+            !containerRef.current.contains(ev.target)) {
+            return onClose === null || onClose === void 0 ? void 0 : onClose();
+        }
+    }, [onClose]);
+    (0, react_1.useEffect)(function () {
+        if (containerRef.current) {
+            document.addEventListener('click', onDocumentClick);
+            return function () {
+                document.removeEventListener('click', onDocumentClick);
+            };
+        }
+    }, [onDocumentClick]);
     var modalPortal = (0, react_1.useMemo)(function () {
-        return createPortal((0, jsx_runtime_1.jsx)(styles.DropdownBackdrop, { onClick: onClose, "$alpha": $backdropAlpha, children: (0, jsx_runtime_1.jsx)(styles.DropdownContainer, __assign({}, props, { style: style, children: children })) }));
-    }, [$backdropAlpha, children, createPortal, onClose, props, style]);
+        var content = ((0, jsx_runtime_1.jsx)(styles.DropdownContainer, __assign({ ref: containerRef }, props, { style: style, children: children })));
+        return usePortal ? createPortal(content) : content;
+    }, [children, createPortal, props, style, usePortal]);
     return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: modalPortal });
 };
 exports.Dropdown = Dropdown;

package/dist/components/layout/Grid/index.d.ts

@@ -0,0 +1,6 @@
+import { GridContainer, GridItemContainer } from './styles';
+type GridFC = typeof GridContainer & {
+    Item: typeof GridItemContainer;
+};
+export declare const Grid: GridFC;
+export {};

package/dist/components/layout/Grid/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Grid = void 0;
+var styles_1 = require("./styles");
+exports.Grid = styles_1.GridContainer;
+exports.Grid.Item = styles_1.GridItemContainer;

package/dist/components/layout/Grid/styles.d.ts

@@ -0,0 +1,14 @@
+type GridProps = {
+    columns?: number;
+};
+export declare const GridContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, GridProps>> & string;
+type GridItemProps = {
+    row?: number;
+    col?: number;
+    rowSpan?: number;
+    colSpan?: number;
+};
+export declare const GridItemContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}>, GridItemProps>, never>> & string;
+export {};