@addev-be/ui 2.5.17 → 2.6.0

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

@@ -0,0 +1,71 @@
+"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.BillitIdentifier = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var styles_1 = require("./styles");
+var react_1 = require("react");
+var BillitIdentifier = function (_a) {
+    var _b = _a.value, value = _b === void 0 ? '' : _b, onChange = _a.onChange, inputProps = __rest(_a, ["value", "onChange"]);
+    var parseValue = function (fullValue) {
+        if (!fullValue) {
+            return ['', ''];
+        }
+        var match = fullValue.match(/^(VAT|GLN):(.*)$/);
+        if (match) {
+            return [match[1], match[2]];
+        }
+        return ['', fullValue];
+    };
+    var _c = parseValue(value), prefix = _c[0], textValue = _c[1];
+    var _d = (0, react_1.useState)(prefix), localPrefix = _d[0], setLocalPrefix = _d[1];
+    var _e = (0, react_1.useState)(textValue), localValue = _e[0], setLocalValue = _e[1];
+    (0, react_1.useEffect)(function () {
+        var _a = parseValue(value), newPrefix = _a[0], newValue = _a[1];
+        setLocalPrefix(newPrefix);
+        setLocalValue(newValue);
+    }, [value]);
+    var handlePrefixChange = function (newPrefix) {
+        setLocalPrefix(newPrefix);
+        if (newPrefix === '') {
+            onChange === null || onChange === void 0 ? void 0 : onChange('');
+        }
+        else {
+            var fullValue = "".concat(newPrefix, ":").concat(localValue);
+            onChange === null || onChange === void 0 ? void 0 : onChange(fullValue);
+        }
+    };
+    var handleValueChange = function (newValue) {
+        setLocalValue(newValue);
+        if (localPrefix === '') {
+            onChange === null || onChange === void 0 ? void 0 : onChange('');
+        }
+        else {
+            var fullValue = "".concat(localPrefix, ":").concat(newValue);
+            onChange === null || onChange === void 0 ? void 0 : onChange(fullValue);
+        }
+    };
+    return ((0, jsx_runtime_1.jsx)(styles_1.BillitIdentifierContainer, { children: (0, jsx_runtime_1.jsxs)(styles_1.BillitIdentifierWrapper, { children: [(0, jsx_runtime_1.jsxs)("select", { value: localPrefix, onChange: function (e) { return handlePrefixChange(e.target.value); }, children: [(0, jsx_runtime_1.jsx)("option", { value: "", children: "(Aucun)" }), (0, jsx_runtime_1.jsx)("option", { value: "VAT", children: "VAT" }), (0, jsx_runtime_1.jsx)("option", { value: "GLN", children: "GLN" })] }), (0, jsx_runtime_1.jsx)("input", __assign({}, inputProps, { type: "text", value: localValue, onChange: function (e) { return handleValueChange(e.target.value); } }))] }) }));
+};
+exports.BillitIdentifier = BillitIdentifier;

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

@@ -0,0 +1,2 @@
+export declare const BillitIdentifierContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const BillitIdentifierWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

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

@@ -0,0 +1,15 @@
+"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.BillitIdentifierWrapper = exports.BillitIdentifierContainer = void 0;
+var styles_1 = require("../styles");
+var styled_components_1 = __importDefault(require("styled-components"));
+exports.BillitIdentifierContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  width: 100%;\n  position: relative;\n"], ["\n  display: flex;\n  width: 100%;\n  position: relative;\n"])));
+exports.BillitIdentifierWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  width: 100%;\n\n  & > select {\n    ", "\n    width: auto;\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n    border-right: none;\n    flex-shrink: 0;\n    padding-right: var(--space-2);\n    background-color: var(--color-base-100);\n\n    &:focus {\n      outline: none;\n    }\n  }\n\n  & > input {\n    ", "\n    border-top-left-radius: 0;\n    border-bottom-left-radius: 0;\n    flex: 1;\n\n    &:focus {\n      outline: none;\n    }\n  }\n\n  &:focus-within {\n    outline: 2px solid var(--color-primary-500);\n  }\n"], ["\n  display: flex;\n  width: 100%;\n\n  & > select {\n    ", "\n    width: auto;\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n    border-right: none;\n    flex-shrink: 0;\n    padding-right: var(--space-2);\n    background-color: var(--color-base-100);\n\n    &:focus {\n      outline: none;\n    }\n  }\n\n  & > input {\n    ", "\n    border-top-left-radius: 0;\n    border-bottom-left-radius: 0;\n    flex: 1;\n\n    &:focus {\n      outline: none;\n    }\n  }\n\n  &:focus-within {\n    outline: 2px solid var(--color-primary-500);\n  }\n"])), styles_1.inputStyle, styles_1.inputStyle);
+var templateObject_1, templateObject_2;

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

@@ -6,6 +6,7 @@ type FormGroupProps = PropsWithChildren<{
     title?: string;
     subTitle?: string;
     icon?: IconFC;
+    columns?: number;
 }>;
 export declare const FormGroup: FC<FormGroupProps>;
 export {};

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

@@ -4,7 +4,7 @@ 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, Icon = _a.icon;
-    return ((0, jsx_runtime_1.jsxs)(styles_1.FormGroupContainer, { color: color, children: [(title || subTitle) && ((0, jsx_runtime_1.jsxs)(styles_1.FormGroupHeader, { children: [Icon && (0, jsx_runtime_1.jsx)(Icon, {}), title && (0, jsx_runtime_1.jsx)("h3", { children: title }), subTitle && (0, jsx_runtime_1.jsx)("h4", { children: subTitle })] })), children] }));
+    var children = _a.children, color = _a.color, title = _a.title, subTitle = _a.subTitle, Icon = _a.icon, columns = _a.columns;
+    return ((0, jsx_runtime_1.jsxs)(styles_1.FormGroupContainer, { "$color": color, "$columns": columns, children: [(title || subTitle) && ((0, jsx_runtime_1.jsxs)(styles_1.FormGroupHeader, { "$columns": columns, children: [Icon && (0, jsx_runtime_1.jsx)(Icon, {}), 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/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/Row.js

@@ -5,6 +5,6 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var styles_1 = require("./styles");
 var FormRow = function (_a) {
     var label = _a.label, Icon = _a.icon, readOnly = _a.readOnly, children = _a.children;
-    return ((0, jsx_runtime_1.jsxs)(styles_1.FormRowContainer, { className: readOnly ? 'read-only' : '', children: [(label || Icon) && ((0, jsx_runtime_1.jsxs)(styles_1.FormRowLabel, { children: [Icon && (0, jsx_runtime_1.jsx)(Icon, {}), label] })), (0, jsx_runtime_1.jsx)(styles_1.FormRowInputContainer, { children: children })] }));
+    return ((0, jsx_runtime_1.jsxs)(styles_1.FormRowContainer, { className: readOnly ? 'read-only' : '', children: [(label || Icon) && ((0, jsx_runtime_1.jsxs)(styles_1.FormRowLabel, { children: [Icon && (0, jsx_runtime_1.jsx)(Icon, {}), label] })), children] }));
 };
 exports.FormRow = FormRow;

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

@@ -8,6 +8,8 @@ type SelectProps<T> = {
     readOnly?: boolean;
     onChange?: (value: T | null) => void;
     ref?: ForwardedRef<HTMLSelectElement>;
+    allowNull?: boolean;
+    nullText?: string;
 };
-export declare const Select: <T>({ icon, label, items, itemKey, itemLabel, readOnly, onChange, value, ref, ...props }: FormRowProps & Omit<SelectHTMLAttributes<HTMLSelectElement>, "value" | "onChange"> & SelectProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const Select: <T>({ icon, label, items, itemKey, itemLabel, readOnly, onChange, value, ref, allowNull, nullText, ...props }: FormRowProps & Omit<SelectHTMLAttributes<HTMLSelectElement>, "value" | "onChange"> & SelectProps<T>) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -28,23 +28,32 @@ var Row_1 = require("./Row");
 var react_1 = require("react");
 var styles_1 = require("./styles");
 var Select = function (_a) {
-    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, ref = _a.ref, props = __rest(_a, ["icon", "label", "items", "itemKey", "itemLabel", "readOnly", "onChange", "value", "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, ref = _a.ref, _b = _a.allowNull, allowNull = _b === void 0 ? false : _b, _c = _a.nullText, nullText = _c === void 0 ? 'Aucun(e)' : _c, props = __rest(_a, ["icon", "label", "items", "itemKey", "itemLabel", "readOnly", "onChange", "value", "ref", "allowNull", "nullText"]);
     var selectRef = (0, react_1.useRef)(null);
     (0, react_1.useImperativeHandle)(ref, function () { return selectRef.current; }, []);
     var onSelectChange = (0, react_1.useCallback)(function (event) {
         var _a;
         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);
+            if (allowNull && selectedValue_1 === null) {
+                onChange(null);
+            }
+            else {
+                var selectedItem = items.find(function (item, index) { return itemKey(item, index) == selectedValue_1; });
+                onChange(selectedItem || null);
+            }
             (_a = selectRef.current) === null || _a === void 0 ? void 0 : _a.blur();
         }
-    }, [items, itemKey, onChange]);
-    var selectedValue = value ? itemKey(value, -1) : undefined;
-    return ((0, jsx_runtime_1.jsx)(Row_1.FormRow, { label: label, icon: icon, readOnly: readOnly, children: readOnly ? ((0, jsx_runtime_1.jsx)(styles_1.ReadOnlyValue, { children: (value !== null ? itemLabel(value, 0) : '-') || '-' })) : ((0, jsx_runtime_1.jsx)("select", __assign({}, props, { disabled: readOnly, value: selectedValue, onChange: onSelectChange, ref: selectRef, 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));
-            }) }))) }));
+    }, [items, itemKey, onChange, allowNull]);
+    var selectedValue = value
+        ? itemKey(value, -1)
+        : allowNull
+            ? null
+            : undefined;
+    return ((0, jsx_runtime_1.jsx)(Row_1.FormRow, { label: label, icon: icon, readOnly: readOnly, children: readOnly ? ((0, jsx_runtime_1.jsx)(styles_1.ReadOnlyValue, { children: (value !== null ? itemLabel(value, 0) : '-') || '-' })) : ((0, jsx_runtime_1.jsxs)("select", __assign({}, props, { disabled: readOnly, value: selectedValue || '', onChange: onSelectChange, ref: selectRef, children: [allowNull && ((0, jsx_runtime_1.jsx)("option", { disabled: !allowNull, value: "", children: nullText })), 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 = Select;

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

@@ -40,6 +40,7 @@ export declare const CardForm: {
         title?: string;
         subTitle?: string;
         icon?: import("../../..").IconFC;
+        columns?: number;
     } & {
         children?: import("react").ReactNode | undefined;
     }>;
@@ -52,7 +53,7 @@ export declare const CardForm: {
         children?: import("react").ReactNode | undefined;
     } & import("react").InputHTMLAttributes<HTMLInputElement>>;
     Row: FC<import("./Row").FormRowProps>;
-    Select: <T>({ icon, label, items, itemKey, itemLabel, readOnly, onChange, value, ref, ...props }: import("./Row").FormRowProps & Omit<import("react").SelectHTMLAttributes<HTMLSelectElement>, "value" | "onChange"> & {
+    Select: <T>({ icon, label, items, itemKey, itemLabel, readOnly, onChange, value, ref, allowNull, nullText, ...props }: import("./Row").FormRowProps & Omit<import("react").SelectHTMLAttributes<HTMLSelectElement>, "value" | "onChange"> & {
         items: T[];
         value: T | null;
         itemKey: (item: T, index: number) => string;
@@ -60,6 +61,8 @@ export declare const CardForm: {
         readOnly?: boolean;
         onChange?: ((value: T | null) => void) | undefined;
         ref?: import("react").ForwardedRef<HTMLSelectElement>;
+        allowNull?: boolean;
+        nullText?: string;
     }) => import("react/jsx-runtime").JSX.Element;
     TextArea: FC<{
         label?: string;

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

@@ -1,11 +1,13 @@
 import { ThemeColorWithIntensity } from '../../../providers/ThemeProvider/types';
 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;
+    $color?: ThemeColorWithIntensity;
+    $columns?: number;
+}>> & string;
+export declare const FormGroupHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $columns?: number;
 }>> & 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<object>;
 export declare const FormRowLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
-export declare const FormRowInputContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const FormRowContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, {
     $readOnly?: boolean;
 }>> & string;

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

@@ -37,23 +37,28 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FormCondensedFields = exports.FormFields = exports.ReadOnlyValue = exports.StyledCheckbox = exports.FormRowContainer = exports.FormRowInputContainer = exports.FormRowLabel = exports.inputCss = exports.FormGroupHeader = exports.FormGroupContainer = void 0;
+exports.FormCondensedFields = exports.FormFields = exports.ReadOnlyValue = exports.StyledCheckbox = exports.FormRowContainer = exports.FormRowLabel = 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-base-100);\n  border-radius: var(--rounded-md);\n  box-shadow: var(--shadow-md);\n\n  // Ensure children are not larger than the container\n  min-width: 0;\n\n  padding: var(--space-2);\n  gap: var(--space-1);\n\n  ", " {\n    padding: var(--space-4);\n    gap: var(--space-2);\n  }\n\n  margin: 0;\n  border: 1px solid var(--color-base-300);\n  border-left: 8px solid ", ";\n"], ["\n  display: flex;\n  flex-direction: column;\n  background: var(--color-base-100);\n  border-radius: var(--rounded-md);\n  box-shadow: var(--shadow-md);\n\n  // Ensure children are not larger than the container\n  min-width: 0;\n\n  padding: var(--space-2);\n  gap: var(--space-1);\n\n  ", " {\n    padding: var(--space-4);\n    gap: var(--space-2);\n  }\n\n  margin: 0;\n  border: 1px solid var(--color-base-300);\n  border-left: 8px solid ", ";\n"])), responsive_1.mediaQueries.lgUp, function (_a) {
-    var _b = _a.color, color = _b === void 0 ? 'base' : _b;
-    return "var(--color-".concat(color, ")");
+exports.FormGroupContainer = styled_components_1.default.fieldset(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: grid;\n  grid-template-columns: repeat(", ", 1fr);\n\n  background: var(--color-base-50);\n  border-radius: var(--rounded-md);\n  box-shadow: var(--shadow-md);\n\n  // Ensure children are not larger than the container\n  min-width: 0;\n\n  padding: var(--space-2);\n  gap: var(--space-1);\n\n  ", " {\n    padding: var(--space-4);\n    gap: var(--space-2);\n  }\n\n  margin: 0;\n  border: 1px solid var(--color-base-200);\n  border-left: 8px solid ", ";\n"], ["\n  display: grid;\n  grid-template-columns: repeat(", ", 1fr);\n\n  background: var(--color-base-50);\n  border-radius: var(--rounded-md);\n  box-shadow: var(--shadow-md);\n\n  // Ensure children are not larger than the container\n  min-width: 0;\n\n  padding: var(--space-2);\n  gap: var(--space-1);\n\n  ", " {\n    padding: var(--space-4);\n    gap: var(--space-2);\n  }\n\n  margin: 0;\n  border: 1px solid var(--color-base-200);\n  border-left: 8px solid ", ";\n"])), function (_a) {
+    var _b = _a.$columns, $columns = _b === void 0 ? 1 : _b;
+    return $columns;
+}, responsive_1.mediaQueries.lgUp, function (_a) {
+    var _b = _a.$color, $color = _b === void 0 ? 'base' : _b;
+    return "var(--color-".concat($color, ")");
 });
-exports.FormGroupHeader = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: var(--space-2);\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-text-500);\n  }\n\n  & > svg {\n    width: var(--space-6);\n    height: var(--space-6);\n  }\n"], ["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: var(--space-2);\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-text-500);\n  }\n\n  & > svg {\n    width: var(--space-6);\n    height: var(--space-6);\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: var(--color-text-800);\n  background: var(--color-base-0);\n\n  box-sizing: border-box;\n  width: 100%;\n  padding: var(--space-1);\n  ", " {\n    text-align: right;\n  }\n\n  &:focus {\n    outline: none;\n  }\n"], ["\n  font-family: inherit;\n  font-size: var(--text-base);\n\n  border: none;\n  color: var(--color-text-800);\n  background: var(--color-base-0);\n\n  box-sizing: border-box;\n  width: 100%;\n  padding: var(--space-1);\n  ", " {\n    text-align: right;\n  }\n\n  &:focus {\n    outline: none;\n  }\n"])), responsive_1.mediaQueries.lgUp);
-exports.FormRowLabel = styled_components_1.default.span(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  color: var(--color-text-500);\n  font-size: var(--text-base);\n  padding: var(--space-1) 0;\n  display: flex;\n  flex-direction: row;\n  gap: var(--space-2);\n  line-height: 1.25;\n  font-weight: bold;\n  align-self: flex-start;\n\n  & > svg {\n    width: var(--space-4);\n    height: var(--space-4);\n    fill: var(--color-base-500);\n    flex-shrink: 0;\n  }\n"], ["\n  color: var(--color-text-500);\n  font-size: var(--text-base);\n  padding: var(--space-1) 0;\n  display: flex;\n  flex-direction: row;\n  gap: var(--space-2);\n  line-height: 1.25;\n  font-weight: bold;\n  align-self: flex-start;\n\n  & > svg {\n    width: var(--space-4);\n    height: var(--space-4);\n    fill: var(--color-base-500);\n    flex-shrink: 0;\n  }\n"])));
-exports.FormRowInputContainer = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  flex: 1;\n  text-align: right;\n\n  ", " {\n    width: 100%;\n    text-align: left;\n  }\n\n  & > select,\n  & > input,\n  & > textarea {\n    ", "\n  }\n\n  & > select:focus > option {\n    text-align: left;\n  }\n"], ["\n  flex: 1;\n  text-align: right;\n\n  ", " {\n    width: 100%;\n    text-align: left;\n  }\n\n  & > select,\n  & > input,\n  & > textarea {\n    ", "\n  }\n\n  & > select:focus > option {\n    text-align: left;\n  }\n"])), responsive_1.mediaQueries.mdDown, exports.inputCss);
-exports.FormRowContainer = styled_components_1.default.label(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 0;\n  padding: var(--space-2);\n\n  ", " {\n    flex-direction: row;\n    gap: var(--space-2);\n    padding: var(--space-1) var(--space-2);\n  }\n\n  border: 1px solid var(--color-base-200);\n  background: var(--color-base-0);\n  &:focus-within {\n    outline: 2px solid var(--color-primary-500);\n    z-index: 1;\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-base-300);\n    }\n\n    & > div > select,\n    & > div > select[disabled],\n    & > div > input,\n    & > div > textarea {\n      background: none;\n      color: var(--color-text-800);\n    }\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 0;\n  padding: var(--space-2);\n\n  ", " {\n    flex-direction: row;\n    gap: var(--space-2);\n    padding: var(--space-1) var(--space-2);\n  }\n\n  border: 1px solid var(--color-base-200);\n  background: var(--color-base-0);\n  &:focus-within {\n    outline: 2px solid var(--color-primary-500);\n    z-index: 1;\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-base-300);\n    }\n\n    & > div > select,\n    & > div > select[disabled],\n    & > div > input,\n    & > div > textarea {\n      background: none;\n      color: var(--color-text-800);\n    }\n  }\n"])), responsive_1.mediaQueries.lgUp);
-exports.StyledCheckbox = styled_components_1.default.input.attrs({ type: 'checkbox' })(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  width: var(--space-4);\n  height: var(--space-4);\n"], ["\n  width: var(--space-4);\n  height: var(--space-4);\n"])));
-exports.ReadOnlyValue = styled_components_1.default.span(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  font-size: var(--text-lg);\n  padding: var(--space-1) 0;\n"], ["\n  font-size: var(--text-lg);\n  padding: var(--space-1) 0;\n"])));
-exports.FormFields = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n"], ["\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n"])), function (_a) {
+exports.FormGroupHeader = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: var(--space-2);\n  grid-column: span ", ";\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-text-500);\n  }\n\n  & > svg {\n    width: var(--space-6);\n    height: var(--space-6);\n  }\n"], ["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: var(--space-2);\n  grid-column: span ", ";\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-text-500);\n  }\n\n  & > svg {\n    width: var(--space-6);\n    height: var(--space-6);\n  }\n"])), function (_a) {
+    var _b = _a.$columns, $columns = _b === void 0 ? 1 : _b;
+    return $columns;
+});
+exports.inputCss = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  font-family: var(--font-input);\n  font-size: var(--text-base);\n  font-weight: 500;\n\n  border: 1px solid var(--color-base-300);\n  color: var(--color-text-800);\n  background: var(--color-base-0);\n\n  box-sizing: border-box;\n  width: 100%;\n  padding: var(--space-2);\n  border-radius: var(--rounded-md);\n"], ["\n  font-family: var(--font-input);\n  font-size: var(--text-base);\n  font-weight: 500;\n\n  border: 1px solid var(--color-base-300);\n  color: var(--color-text-800);\n  background: var(--color-base-0);\n\n  box-sizing: border-box;\n  width: 100%;\n  padding: var(--space-2);\n  border-radius: var(--rounded-md);\n"])));
+exports.FormRowLabel = styled_components_1.default.span(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  color: var(--color-base-600);\n  font-size: var(--text-sm);\n  text-transform: uppercase;\n  padding: var(--space-1) 0;\n  display: flex;\n  flex-direction: row;\n  gap: var(--space-2);\n  line-height: 1.25;\n  font-weight: normal;\n  align-self: flex-start;\n\n  & > svg {\n    width: var(--space-4);\n    height: var(--space-4);\n    fill: var(--color-base-500);\n    flex-shrink: 0;\n  }\n"], ["\n  color: var(--color-base-600);\n  font-size: var(--text-sm);\n  text-transform: uppercase;\n  padding: var(--space-1) 0;\n  display: flex;\n  flex-direction: row;\n  gap: var(--space-2);\n  line-height: 1.25;\n  font-weight: normal;\n  align-self: flex-start;\n\n  & > svg {\n    width: var(--space-4);\n    height: var(--space-4);\n    fill: var(--color-base-500);\n    flex-shrink: 0;\n  }\n"])));
+exports.FormRowContainer = styled_components_1.default.label(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 0;\n  padding: var(--space-2);\n\n  & > select,\n  & > input,\n  & > textarea {\n    ", "\n  }\n\n  &.read-only {\n    & > select,\n    & > select[disabled],\n    & > input,\n    & > textarea {\n      background: none;\n      color: var(--color-text-800);\n    }\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 0;\n  padding: var(--space-2);\n\n  & > select,\n  & > input,\n  & > textarea {\n    ", "\n  }\n\n  &.read-only {\n    & > select,\n    & > select[disabled],\n    & > input,\n    & > textarea {\n      background: none;\n      color: var(--color-text-800);\n    }\n  }\n"])), exports.inputCss);
+exports.StyledCheckbox = styled_components_1.default.input.attrs({ type: 'checkbox' })(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  width: var(--space-4);\n  height: var(--space-4);\n"], ["\n  width: var(--space-4);\n  height: var(--space-4);\n"])));
+exports.ReadOnlyValue = styled_components_1.default.span(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  padding: var(--space-1) 0;\n  font-weight: 500;\n"], ["\n  padding: var(--space-1) 0;\n  font-weight: 500;\n"])));
+exports.FormFields = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n"], ["\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n"])), function (_a) {
     var $readOnly = _a.$readOnly;
     return ($readOnly ? '0' : 'var(--space-2)');
 });
-exports.FormCondensedFields = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n\n  ", " & > ", " {\n    padding: var(--space-0_5) var(--space-2);\n  }\n\n  > ", ":not(.read-only) + ", ":not(.read-only) {\n    border-top: none;\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n\n  ", " & > ", " {\n    padding: var(--space-0_5) var(--space-2);\n  }\n\n  > ", ":not(.read-only) + ", ":not(.read-only) {\n    border-top: none;\n  }\n"])), responsive_1.mediaQueries.lgUp, exports.FormRowContainer, exports.FormRowContainer, exports.FormRowContainer);
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;
+exports.FormCondensedFields = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n\n  ", " & > ", " {\n    padding: var(--space-0_5) var(--space-2);\n  }\n\n  > ", ":not(.read-only) + ", ":not(.read-only) {\n    border-top: none;\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n\n  ", " & > ", " {\n    padding: var(--space-0_5) var(--space-2);\n  }\n\n  > ", ":not(.read-only) + ", ":not(.read-only) {\n    border-top: none;\n  }\n"])), responsive_1.mediaQueries.lgUp, exports.FormRowContainer, exports.FormRowContainer, exports.FormRowContainer);
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;

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/styles.js

@@ -40,7 +40,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.StackedLabelContainer = exports.StyledTextArea = exports.StyledNumericFormat = exports.Input = exports.inputStyle = void 0;
 var styled_components_1 = __importStar(require("styled-components"));
 var react_number_format_1 = require("react-number-format");
-exports.inputStyle = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  font-family: var(--font-sans);\n  font-size: inherit;\n  color: var(--color-text-800);\n  background-color: var(--color-base-0);\n  border: 1px solid var(--color-base-300);\n  border-radius: var(--rounded-md);\n  padding: var(--space-1);\n  width: 100%;\n  box-sizing: border-box;\n\n  &:focus {\n    outline: 2px solid var(--color-primary-500);\n  }\n"], ["\n  font-family: var(--font-sans);\n  font-size: inherit;\n  color: var(--color-text-800);\n  background-color: var(--color-base-0);\n  border: 1px solid var(--color-base-300);\n  border-radius: var(--rounded-md);\n  padding: var(--space-1);\n  width: 100%;\n  box-sizing: border-box;\n\n  &:focus {\n    outline: 2px solid var(--color-primary-500);\n  }\n"])));
+exports.inputStyle = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  font-family: var(--font-input);\n  font-size: inherit;\n  color: var(--color-text-800);\n  background-color: var(--color-base-0);\n  border: 1px solid var(--color-base-300);\n  border-radius: var(--rounded-md);\n  padding: var(--space-1);\n  width: 100%;\n  box-sizing: border-box;\n\n  &:focus {\n    outline: 2px solid var(--color-primary-500);\n  }\n"], ["\n  font-family: var(--font-input);\n  font-size: inherit;\n  color: var(--color-text-800);\n  background-color: var(--color-base-0);\n  border: 1px solid var(--color-base-300);\n  border-radius: var(--rounded-md);\n  padding: var(--space-1);\n  width: 100%;\n  box-sizing: border-box;\n\n  &:focus {\n    outline: 2px solid var(--color-primary-500);\n  }\n"])));
 exports.Input = styled_components_1.default.input(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), exports.inputStyle);
 exports.StyledNumericFormat = (0, styled_components_1.default)(react_number_format_1.NumericFormat)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", "\n  text-align: right;\n"], ["\n  ", "\n  text-align: right;\n"])), exports.inputStyle);
 exports.StyledTextArea = styled_components_1.default.textarea(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  ", "\n  display: block;\n"], ["\n  ", "\n  display: block;\n"])), exports.inputStyle);

package/dist/components/ui/Card/index.d.ts

@@ -1,6 +1,7 @@
 import { CardFooter, CardHeader } from './styles';
 import { FC, HTMLAttributes } from 'react';
-type CardFC = FC<HTMLAttributes<HTMLDivElement>> & {
+import { SpaceProps } from '../../../helpers/styled/space';
+type CardFC = FC<HTMLAttributes<HTMLDivElement> & SpaceProps> & {
     Header: typeof CardHeader;
     Footer: typeof CardFooter;
 };

package/dist/components/ui/Card/styles.d.ts

@@ -1,3 +1,4 @@
-export declare const CardContainer: 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").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>, never>, never>> & string;
+import { SpaceProps } from '../../../helpers/styled/space';
+export declare const CardContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>, never>, SpaceProps>> & string;
 export declare const CardHeader: 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").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>, never>, never>> & string;
 export declare const CardFooter: 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").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>, never>, never>> & string;

package/dist/components/ui/Card/styles.js

@@ -8,10 +8,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CardFooter = exports.CardHeader = exports.CardContainer = void 0;
+var space_1 = require("../../../helpers/styled/space");
 var styled_components_1 = __importDefault(require("styled-components"));
 exports.CardContainer = styled_components_1.default.div.attrs({
     className: 'CardContainer',
-})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  background-color: var(--color-base-0);\n  border-radius: var(--rounded-md);\n  box-shadow: var(--shadow-md);\n  padding: var(--space-4);\n  border: 1px solid var(--color-base-100);\n"], ["\n  display: flex;\n  flex-direction: column;\n  background-color: var(--color-base-0);\n  border-radius: var(--rounded-md);\n  box-shadow: var(--shadow-md);\n  padding: var(--space-4);\n  border: 1px solid var(--color-base-100);\n"])));
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  background-color: var(--color-base-50);\n  border-radius: var(--rounded-md);\n  box-shadow: var(--shadow-md);\n  padding: var(--space-4);\n  border: 1px solid var(--color-base-200);\n\n  ", "\n"], ["\n  display: flex;\n  flex-direction: column;\n  background-color: var(--color-base-50);\n  border-radius: var(--rounded-md);\n  box-shadow: var(--shadow-md);\n  padding: var(--space-4);\n  border: 1px solid var(--color-base-200);\n\n  ", "\n"])), space_1.space);
 exports.CardHeader = styled_components_1.default.div.attrs({
     className: 'CardHeader',
 })(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding-bottom: var(--space-2);\n  border-bottom: 1px solid var(--color-base-200);\n  margin-bottom: var(--space-2);\n  gap: var(--space-2);\n"], ["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding-bottom: var(--space-2);\n  border-bottom: 1px solid var(--color-base-200);\n  margin-bottom: var(--space-2);\n  gap: var(--space-2);\n"])));

package/dist/components/ui/TabsView/TabsList.d.ts

@@ -2,6 +2,7 @@ import { FC } from 'react';
 import { SpaceProps } from '../../../helpers/styled/space';
 import { Tab } from './types';
 type TabsListProps = {
+    card?: boolean;
     tabs: Tab[];
     selectedIndex?: number;
     onSelectedIndexChanged?: (index: number) => void;

package/dist/components/ui/TabsView/TabsList.js

@@ -26,8 +26,9 @@ exports.TabsList = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
 var styles_1 = require("./styles");
+var Card_1 = require("../Card");
 var TabsList = function (_a) {
-    var tabs = _a.tabs, selectedIndex = _a.selectedIndex, onSelectedIndexChanged = _a.onSelectedIndexChanged, spaceProps = __rest(_a, ["tabs", "selectedIndex", "onSelectedIndexChanged"]);
+    var card = _a.card, tabs = _a.tabs, selectedIndex = _a.selectedIndex, onSelectedIndexChanged = _a.onSelectedIndexChanged, spaceProps = __rest(_a, ["card", "tabs", "selectedIndex", "onSelectedIndexChanged"]);
     var _b = (0, react_1.useState)(selectedIndex !== null && selectedIndex !== void 0 ? selectedIndex : 0), activeIndex = _b[0], setActiveIndex = _b[1];
     (0, react_1.useEffect)(function () {
         setActiveIndex(selectedIndex !== null && selectedIndex !== void 0 ? selectedIndex : 0);
@@ -35,6 +36,7 @@ var TabsList = function (_a) {
     (0, react_1.useEffect)(function () {
         onSelectedIndexChanged === null || onSelectedIndexChanged === void 0 ? void 0 : onSelectedIndexChanged(activeIndex);
     }, [activeIndex, onSelectedIndexChanged]);
-    return ((0, jsx_runtime_1.jsx)(styles_1.TabsListContainer, __assign({}, spaceProps, { children: tabs.map(function (tab, index) { return ((0, jsx_runtime_1.jsxs)(styles_1.TabContainer, { "$color": tab.color, "$isActive": activeIndex === index, onClick: function () { return setActiveIndex(index); }, children: [tab.icon ? (0, jsx_runtime_1.jsx)(tab.icon, {}) : null, tab.tabName] }, index)); }) })));
+    var tabsList = ((0, jsx_runtime_1.jsx)(styles_1.TabsListContainer, __assign({}, spaceProps, { children: tabs.map(function (tab, index) { return ((0, jsx_runtime_1.jsxs)(styles_1.TabContainer, { "$color": tab.color, "$isActive": activeIndex === index, onClick: function () { return setActiveIndex(index); }, children: [tab.icon ? (0, jsx_runtime_1.jsx)(tab.icon, {}) : null, tab.tabName] }, index)); }) })));
+    return card ? (0, jsx_runtime_1.jsx)(Card_1.Card, { p: "2", children: tabsList }) : tabsList;
 };
 exports.TabsList = TabsList;

package/dist/components/ui/TabsView/TabsView.d.ts

@@ -1,9 +1,11 @@
 import { FC } from 'react';
+import { SpaceProps } from '../../../helpers/styled/space';
 import { Tab } from './types';
 type TabsViewProps = {
     tabs: Tab[];
     overflow?: boolean;
     onSelectedTabChanged?: (tab: Tab, index: number) => void;
-};
+    card?: boolean;
+} & SpaceProps;
 export declare const TabsView: FC<TabsViewProps>;
 export {};

package/dist/components/ui/TabsView/TabsView.js

@@ -6,12 +6,12 @@ var react_1 = require("react");
 var styles_1 = require("./styles");
 var TabsList_1 = require("./TabsList");
 var TabsView = function (_a) {
-    var tabs = _a.tabs, _b = _a.overflow, overflow = _b === void 0 ? false : _b, onSelectedTabChanged = _a.onSelectedTabChanged;
+    var tabs = _a.tabs, _b = _a.overflow, overflow = _b === void 0 ? false : _b, onSelectedTabChanged = _a.onSelectedTabChanged, card = _a.card;
     var _c = (0, react_1.useState)(0), activeIndex = _c[0], setActiveIndex = _c[1];
     var activeTab = tabs[activeIndex];
     (0, react_1.useEffect)(function () {
         onSelectedTabChanged === null || onSelectedTabChanged === void 0 ? void 0 : onSelectedTabChanged(tabs[activeIndex], activeIndex);
     }, [activeIndex, tabs, onSelectedTabChanged]);
-    return ((0, jsx_runtime_1.jsxs)(styles_1.TabsViewContainer, { children: [(0, jsx_runtime_1.jsx)(TabsList_1.TabsList, { tabs: tabs, selectedIndex: activeIndex, onSelectedIndexChanged: setActiveIndex, p: "2" }), (0, jsx_runtime_1.jsx)(styles_1.TabContentContainer, { "$isOverflow": overflow, children: activeTab.content })] }));
+    return ((0, jsx_runtime_1.jsxs)(styles_1.TabsViewContainer, { children: [(0, jsx_runtime_1.jsx)(TabsList_1.TabsList, { card: card, tabs: tabs, selectedIndex: activeIndex, onSelectedIndexChanged: setActiveIndex, p: card ? '0' : '2' }), (0, jsx_runtime_1.jsx)(styles_1.TabContentContainer, { "$isOverflow": overflow, children: activeTab.content })] }));
 };
 exports.TabsView = TabsView;

package/dist/components/ui/TabsView/styles.js

@@ -39,16 +39,16 @@ var __importStar = (this && this.__importStar) || (function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TabContentContainer = exports.TabContainer = exports.TabsListContainer = exports.TabsViewContainer = void 0;
 var space_1 = require("../../../helpers/styled/space");
-var styled_components_1 = __importStar(require("styled-components"));
 var helpers_1 = require("../../../providers/ThemeProvider/helpers");
-exports.TabsViewContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n"], ["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n"])));
-exports.TabsListContainer = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  gap: var(--space-4);\n  flex-shrink: 0;\n  overflow-x: scroll;\n  scrollbar-width: none;\n  font-size: var(--text-lg);\n  white-space: nowrap;\n\n  ", "\n"], ["\n  display: flex;\n  gap: var(--space-4);\n  flex-shrink: 0;\n  overflow-x: scroll;\n  scrollbar-width: none;\n  font-size: var(--text-lg);\n  white-space: nowrap;\n\n  ", "\n"])), space_1.space);
+var styled_components_1 = __importStar(require("styled-components"));
+exports.TabsViewContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  gap: var(--space-4);\n"], ["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  gap: var(--space-4);\n"])));
+exports.TabsListContainer = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  gap: var(--space-4);\n  flex-shrink: 0;\n  overflow-x: scroll;\n  scrollbar-width: none;\n  font-size: var(--text-base);\n  white-space: nowrap;\n\n  ", "\n"], ["\n  display: flex;\n  gap: var(--space-4);\n  flex-shrink: 0;\n  overflow-x: scroll;\n  scrollbar-width: none;\n  font-size: var(--text-base);\n  white-space: nowrap;\n\n  ", "\n"])), space_1.space);
 exports.TabContainer = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  height: var(--space-8);\n  gap: var(--space-2);\n  cursor: pointer;\n  padding: 0 var(--space-2);\n  color: var(--color-text-800);\n\n  svg {\n    height: var(--space-4);\n    width: var(--space-4);\n    fill: var(--color-base-800);\n  }\n\n  ", ";\n\n  ", "\n"], ["\n  display: flex;\n  align-items: center;\n  height: var(--space-8);\n  gap: var(--space-2);\n  cursor: pointer;\n  padding: 0 var(--space-2);\n  color: var(--color-text-800);\n\n  svg {\n    height: var(--space-4);\n    width: var(--space-4);\n    fill: var(--color-base-800);\n  }\n\n  ", ";\n\n  ", "\n"])), function (_a) {
     var _b = _a.$color, $color = _b === void 0 ? 'primary' : _b;
     return (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    &:hover {\n      color: var(--color-", ");\n      svg {\n        fill: var(--color-", ");\n      }\n    }\n  "], ["\n    &:hover {\n      color: var(--color-", ");\n      svg {\n        fill: var(--color-", ");\n      }\n    }\n  "])), (0, helpers_1.getColorWithIntensity)($color, 500), (0, helpers_1.getColorWithIntensity)($color, 500));
 }, function (_a) {
     var $isActive = _a.$isActive, _b = _a.$color, $color = _b === void 0 ? 'primary' : _b;
-    return $isActive && (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      border-bottom: var(--space-0_5) solid;\n      color: var(--color-", ");\n      svg {\n        fill: var(--color-", ");\n      }\n    "], ["\n      border-bottom: var(--space-0_5) solid;\n      color: var(--color-", ");\n      svg {\n        fill: var(--color-", ");\n      }\n    "])), (0, helpers_1.getColorWithIntensity)($color, 500), (0, helpers_1.getColorWithIntensity)($color, 500));
+    return $isActive && (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      background: radial-gradient(\n        ellipse at bottom center,\n        var(--color-", "-50) 0%,\n        transparent 80%\n      );\n      border-bottom: var(--space-0_5) solid;\n      color: var(--color-", ");\n      svg {\n        fill: var(--color-", ");\n      }\n    "], ["\n      background: radial-gradient(\n        ellipse at bottom center,\n        var(--color-", "-50) 0%,\n        transparent 80%\n      );\n      border-bottom: var(--space-0_5) solid;\n      color: var(--color-", ");\n      svg {\n        fill: var(--color-", ");\n      }\n    "])), (0, helpers_1.getColor)($color), (0, helpers_1.getColorWithIntensity)($color, 500), (0, helpers_1.getColorWithIntensity)($color, 500));
 });
 exports.TabContentContainer = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  display: flex;\n  height: 100%;\n\n  ", "\n"], ["\n  display: flex;\n  height: 100%;\n\n  ", "\n"])), function (_a) {
     var $isOverflow = _a.$isOverflow;

package/dist/config/types.d.ts

@@ -0,0 +1,11 @@
+export type EnvType = 'dev' | 'test' | 'staging' | 'prod';
+export type Config = {
+    webSocketUrl: string;
+    httpServerUrl: `${string}/`;
+    invoicingEnabled?: boolean;
+};
+type DeepPartial<T> = T extends object ? {
+    [P in keyof T]?: DeepPartial<T[P]>;
+} : T;
+export type PartialConfig = DeepPartial<Config>;
+export {};

package/dist/config/types.js

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

package/dist/helpers/react.d.ts

@@ -0,0 +1,2 @@
+import { ForwardRefExoticComponent, ForwardRefRenderFunction, PropsWithoutRef, RefAttributes } from 'react';
+export declare const forwardRefGeneric: <T, P = {}>(render: ForwardRefRenderFunction<T, PropsWithoutRef<P>>) => ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<T>>;

package/dist/helpers/react.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.forwardRefGeneric = void 0;
+var react_1 = require("react");
+var forwardRefGeneric = function (render) {
+    return (0, react_1.forwardRef)(render);
+};
+exports.forwardRefGeneric = forwardRefGeneric;

package/dist/helpers/styled/index.d.ts

@@ -0,0 +1 @@
+export * from './space';

package/dist/helpers/styled/index.js

@@ -0,0 +1,17 @@
+"use strict";
+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 __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("./space"), exports);

package/dist/hooks/useMutableState.d.ts

@@ -1,8 +1,10 @@
+import { Dispatch } from 'react';
 import { DeepPartial } from '../types';
-export type PartialSetStateAction<T> = (partialValue: DeepPartial<T>) => void;
+export type PartialSetStateAction<T> = DeepPartial<T> | ((state: T) => DeepPartial<T>);
 export type UseMutableStateReturn<T> = readonly [
     T,
     React.Dispatch<React.SetStateAction<T>>,
-    PartialSetStateAction<T>
+    Dispatch<PartialSetStateAction<T>>
 ];
-export declare const useMutableState: <T>(initialValue?: T | (() => T)) => readonly [T, import("react").Dispatch<import("react").SetStateAction<T>>, (partialValue: DeepPartial<T>) => void];
+export declare const isDispatchFunction: <T>(value: PartialSetStateAction<T>) => value is (state: T) => DeepPartial<T>;
+export declare const useMutableState: <T>(initialValue?: T | (() => T)) => readonly [T, Dispatch<import("react").SetStateAction<T>>, Dispatch<PartialSetStateAction<T>>];

package/dist/hooks/useMutableState.js

@@ -1,13 +1,20 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useMutableState = void 0;
+exports.useMutableState = exports.isDispatchFunction = void 0;
 var react_1 = require("react");
 var lodash_1 = require("lodash");
+var isDispatchFunction = function (value) { return typeof value === 'function'; };
+exports.isDispatchFunction = isDispatchFunction;
 var useMutableState = function (initialValue) {
     if (initialValue === void 0) { initialValue = {}; }
     var _a = (0, react_1.useState)(initialValue), value = _a[0], setValue = _a[1];
     var setPartialValue = (0, react_1.useCallback)(function (partialValue) {
-        setValue(function (value) { return (0, lodash_1.defaultsDeep)({}, partialValue, value); });
+        setValue(function (value) {
+            var resolvedPartialValue = (0, exports.isDispatchFunction)(partialValue)
+                ? partialValue(value)
+                : partialValue;
+            return (0, lodash_1.defaultsDeep)({}, resolvedPartialValue, value);
+        });
     }, []);
     return (0, react_1.useMemo)(function () { return [value, setValue, setPartialValue]; }, [setPartialValue, value]);
 };

package/dist/hooks/useMutableState.test.d.ts

@@ -0,0 +1,4 @@
+/**
+ * @vitest-environment jsdom
+ */
+export {};