@addev-be/ui 0.16.9 → 0.16.10

package/dist/components/forms/Button.js

@@ -30,13 +30,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : 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;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 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)
@@ -52,25 +62,25 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Button = exports.StyledButton = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
+var helpers_1 = require("../../providers/ThemeProvider/helpers");
 var styled_components_1 = __importStar(require("styled-components"));
 exports.StyledButton = styled_components_1.default.button.withConfig({
     shouldForwardProp: function () { return true; },
-})(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: inline-flex;\n  vertical-align: middle;\n  align-items: center;\n  justify-content: center;\n  box-shadow: var(--shadow-sm);\n  /* font-weight: bold; */\n  border-radius: var(--rounded-md);\n  font-family: var(--font-sans);\n  cursor: pointer;\n\n  ", "\n\n  ", "\n\n  &.small {\n    padding: var(--space-1) var(--space-1_5);\n    font-size: var(--text-sm);\n    height: var(--space-6);\n    box-shadow: var(--shadow-sm);\n    svg {\n      margin-right: var(--space-1);\n      width: var(--space-3);\n      height: var(--space-3);\n    }\n  }\n  &.medium {\n    padding: var(--space-2) var(--space-3);\n    font-size: var(--text-base);\n    height: var(--space-8);\n    box-shadow: var(--shadow-sm);\n    svg {\n      margin-right: var(--space-1);\n      width: var(--space-4);\n      height: var(--space-4);\n    }\n  }\n  &.large {\n    padding: var(--space-3) var(--space-4);\n    font-size: var(--text-lg);\n    height: var(--space-10);\n    box-shadow: var(--shadow-sm);\n    svg {\n      margin-right: var(--space-1);\n      width: var(--space-5);\n      height: var(--space-5);\n    }\n  }\n"], ["\n  display: inline-flex;\n  vertical-align: middle;\n  align-items: center;\n  justify-content: center;\n  box-shadow: var(--shadow-sm);\n  /* font-weight: bold; */\n  border-radius: var(--rounded-md);\n  font-family: var(--font-sans);\n  cursor: pointer;\n\n  ", "\n\n  ", "\n\n  &.small {\n    padding: var(--space-1) var(--space-1_5);\n    font-size: var(--text-sm);\n    height: var(--space-6);\n    box-shadow: var(--shadow-sm);\n    svg {\n      margin-right: var(--space-1);\n      width: var(--space-3);\n      height: var(--space-3);\n    }\n  }\n  &.medium {\n    padding: var(--space-2) var(--space-3);\n    font-size: var(--text-base);\n    height: var(--space-8);\n    box-shadow: var(--shadow-sm);\n    svg {\n      margin-right: var(--space-1);\n      width: var(--space-4);\n      height: var(--space-4);\n    }\n  }\n  &.large {\n    padding: var(--space-3) var(--space-4);\n    font-size: var(--text-lg);\n    height: var(--space-10);\n    box-shadow: var(--shadow-sm);\n    svg {\n      margin-right: var(--space-1);\n      width: var(--space-5);\n      height: var(--space-5);\n    }\n  }\n"])), function (_a) {
-    var $color = _a.$color, _b = _a.$bordered, $bordered = _b === void 0 ? true : _b;
-    return $color
-        ? (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n          background-color: var(--color-", "-400);\n          border: ", ";\n          &:hover {\n            background-color: var(--color-", "-300);\n            border: ", ";\n          }\n          color: var(--color-", "-950);\n          svg {\n            fill: var(--color-", "-950);\n          }\n        "], ["\n          background-color: var(--color-", "-400);\n          border: ", ";\n          &:hover {\n            background-color: var(--color-", "-300);\n            border: ", ";\n          }\n          color: var(--color-", "-950);\n          svg {\n            fill: var(--color-", "-950);\n          }\n        "])), $color, $bordered
-            ? "1px solid var(--color-".concat($color, "-500)")
-            : 'none', $color, $bordered
-            ? "1px solid var(--color-".concat($color, "-400)")
-            : 'none', $color, $color) : (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n          background-color: var(--color-neutral-100);\n          border: ", ";\n          &:hover {\n            background-color: var(--color-neutral-200);\n            border: ", ";\n          }\n          color: var(--color-neutral-900);\n          svg {\n            fill: var(--color-neutral-900);\n          }\n        "], ["\n          background-color: var(--color-neutral-100);\n          border: ", ";\n          &:hover {\n            background-color: var(--color-neutral-200);\n            border: ", ";\n          }\n          color: var(--color-neutral-900);\n          svg {\n            fill: var(--color-neutral-900);\n          }\n        "])), $bordered ? "1px solid var(--color-neutral-300)" : 'none', $bordered
-        ? "1px solid var(--color-neutral-400)"
-        : 'none');
+})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: inline-flex;\n  vertical-align: middle;\n  align-items: center;\n  justify-content: center;\n  box-shadow: var(--shadow-sm);\n  /* font-weight: bold; */\n  border-radius: var(--rounded-md);\n  font-family: var(--font-sans);\n  cursor: pointer;\n\n  ", "\n\n  ", "\n\n  &.small {\n    padding: var(--space-1) var(--space-1_5);\n    font-size: var(--text-sm);\n    height: var(--space-6);\n    box-shadow: var(--shadow-sm);\n    svg {\n      margin-right: var(--space-1);\n      width: var(--space-3);\n      height: var(--space-3);\n    }\n  }\n  &.medium {\n    padding: var(--space-2) var(--space-3);\n    font-size: var(--text-base);\n    height: var(--space-8);\n    box-shadow: var(--shadow-sm);\n    font-weight: bold;\n    svg {\n      margin-right: var(--space-1);\n      width: var(--space-4);\n      height: var(--space-4);\n    }\n  }\n  &.large {\n    padding: var(--space-3) var(--space-4);\n    font-size: var(--text-lg);\n    height: var(--space-10);\n    box-shadow: var(--shadow-sm);\n    font-weight: bold;\n    svg {\n      margin-right: var(--space-1);\n      width: var(--space-5);\n      height: var(--space-5);\n    }\n  }\n"], ["\n  display: inline-flex;\n  vertical-align: middle;\n  align-items: center;\n  justify-content: center;\n  box-shadow: var(--shadow-sm);\n  /* font-weight: bold; */\n  border-radius: var(--rounded-md);\n  font-family: var(--font-sans);\n  cursor: pointer;\n\n  ", "\n\n  ", "\n\n  &.small {\n    padding: var(--space-1) var(--space-1_5);\n    font-size: var(--text-sm);\n    height: var(--space-6);\n    box-shadow: var(--shadow-sm);\n    svg {\n      margin-right: var(--space-1);\n      width: var(--space-3);\n      height: var(--space-3);\n    }\n  }\n  &.medium {\n    padding: var(--space-2) var(--space-3);\n    font-size: var(--text-base);\n    height: var(--space-8);\n    box-shadow: var(--shadow-sm);\n    font-weight: bold;\n    svg {\n      margin-right: var(--space-1);\n      width: var(--space-4);\n      height: var(--space-4);\n    }\n  }\n  &.large {\n    padding: var(--space-3) var(--space-4);\n    font-size: var(--text-lg);\n    height: var(--space-10);\n    box-shadow: var(--shadow-sm);\n    font-weight: bold;\n    svg {\n      margin-right: var(--space-1);\n      width: var(--space-5);\n      height: var(--space-5);\n    }\n  }\n"])), function (_a) {
+    var _b = _a.$color, $color = _b === void 0 ? 'base' : _b, _c = _a.$bordered, $bordered = _c === void 0 ? false : _c;
+    var colorWithIntensity = (0, helpers_1.getColorWithIntensity)($color);
+    var colorName = (0, helpers_1.getColor)(colorWithIntensity);
+    var intensity = (0, helpers_1.getIntensity)(colorWithIntensity);
+    return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      background-color: var(--color-", ");\n      border: ", ";\n      &:hover {\n        background-color: var(--color-", ");\n      }\n      color: var(--color-", "-", ");\n      svg {\n        fill: var(--color-", "-", ");\n      }\n    "], ["\n      background-color: var(--color-", ");\n      border: ", ";\n      &:hover {\n        background-color: var(--color-", ");\n      }\n      color: var(--color-", "-", ");\n      svg {\n        fill: var(--color-", "-", ");\n      }\n    "])), colorWithIntensity, $bordered
+        ? "1px solid var(--color-".concat((0, helpers_1.darkenColor)(colorWithIntensity), ");")
+        : 'none', (0, helpers_1.lightenColor)(colorWithIntensity, 100), colorName, intensity > 400 ? 0 : 950, colorName, intensity > 400 ? 0 : 950);
 }, function (_a) {
     var $rounded = _a.$rounded;
     return $rounded && 'border-radius: var(--rounded-full);';
 });
+// eslint-disable-next-line react/display-name
 exports.Button = (0, react_1.forwardRef)(function (_a, ref) {
-    var children = _a.children, _b = _a.size, size = _b === void 0 ? 'medium' : _b, Icon = _a.icon, className = _a.className, _c = _a.rounded, rounded = _c === void 0 ? false : _c, _d = _a.color, color = _d === void 0 ? 'neutral' : _d, _e = _a.bordered, bordered = _e === void 0 ? true : _e, props = __rest(_a, ["children", "size", "icon", "className", "rounded", "color", "bordered"]);
+    var children = _a.children, _b = _a.size, size = _b === void 0 ? 'medium' : _b, Icon = _a.icon, className = _a.className, _c = _a.rounded, rounded = _c === void 0 ? false : _c, _d = _a.color, color = _d === void 0 ? 'base' : _d, _e = _a.bordered, bordered = _e === void 0 ? true : _e, props = __rest(_a, ["children", "size", "icon", "className", "rounded", "color", "bordered"]);
     return ((0, jsx_runtime_1.jsxs)(exports.StyledButton, __assign({ ref: ref, className: "".concat(size, " ").concat(className), "$color": color, "$rounded": rounded, "$bordered": bordered }, props, { children: [Icon && (0, jsx_runtime_1.jsx)(Icon, {}), children] })));
 });
-var templateObject_1, templateObject_2, templateObject_3;
+var templateObject_1, templateObject_2;

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

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

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

@@ -24,10 +24,10 @@ var __rest = (this && this.__rest) || function (s, e) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Checkbox = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
-var InputWithLabel_1 = require("./InputWithLabel");
+var Row_1 = require("./Row");
 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)) }));
+    return ((0, jsx_runtime_1.jsx)(Row_1.FormRow, { label: label, icon: icon, readOnly: props.readOnly, children: (0, jsx_runtime_1.jsx)(styles_1.StyledCheckbox, __assign({}, props)) }));
 };
 exports.Checkbox = Checkbox;

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

@@ -0,0 +1,13 @@
+import { FormRowProps } from './Row';
+import { ForwardedRef, SelectHTMLAttributes } from 'react';
+type CustomSelectProps<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;
+    ref?: ForwardedRef<HTMLSelectElement>;
+};
+export declare const CustomSelect: <T>({ icon, label, items, itemKey, itemLabel, readOnly, onChange, value, ref, ...props }: FormRowProps & Omit<SelectHTMLAttributes<HTMLSelectElement>, "value" | "onChange"> & CustomSelectProps<T>) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,50 @@
+"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.CustomSelect = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var Row_1 = require("./Row");
+var react_1 = require("react");
+var styles_1 = require("./styles");
+var CustomSelect = 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 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);
+            (_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, onSelect: function () { return console.log('selected'); }, children: label }, key));
+            }) }))) }));
+};
+exports.CustomSelect = CustomSelect;

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

@@ -1,9 +1,11 @@
 import { FC, PropsWithChildren } from 'react';
-import { ThemeColorWithIntensity } from '../../../providers/ThemeProvider';
+import { IconFC } from '../../../Icons';
+import { ThemeColorWithIntensity } from '../../../providers/ThemeProvider/types';
 type FormGroupProps = PropsWithChildren<{
     color?: ThemeColorWithIntensity;
     title?: string;
     subTitle?: string;
+    icon?: IconFC;
 }>;
 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;
-    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] }));
+    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] }));
 };
 exports.FormGroup = FormGroup;

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

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

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

@@ -24,9 +24,10 @@ var __rest = (this && this.__rest) || function (s, e) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Input = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
-var InputWithLabel_1 = require("./InputWithLabel");
+var Row_1 = require("./Row");
+var styles_1 = require("./styles");
 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)) }));
+    return ((0, jsx_runtime_1.jsx)(Row_1.FormRow, { label: label, icon: icon, readOnly: props.readOnly, children: props.readOnly ? ((0, jsx_runtime_1.jsx)(styles_1.ReadOnlyValue, { children: props.value || '-' })) : ((0, jsx_runtime_1.jsx)("input", __assign({}, props))) }));
 };
 exports.Input = Input;

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

@@ -0,0 +1,9 @@
+import { FC, PropsWithChildren } from 'react';
+import { IconFC } from '../../../Icons';
+export type FormRowProps = PropsWithChildren<{
+    label?: string;
+    icon?: IconFC;
+    readOnly?: boolean;
+    condensed?: boolean;
+}>;
+export declare const FormRow: FC<FormRowProps>;

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

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormRow = void 0;
+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 })] }));
+};
+exports.FormRow = FormRow;

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

@@ -1,4 +1,5 @@
-import { SelectHTMLAttributes } from 'react';
+import { FormRowProps } from './Row';
+import { ForwardedRef, SelectHTMLAttributes } from 'react';
 type SelectProps<T> = {
     items: T[];
     value: T | null;
@@ -6,12 +7,7 @@ type SelectProps<T> = {
     itemLabel: (item: T, index: number) => string;
     readOnly?: boolean;
     onChange?: (value: T | null) => void;
+    ref?: ForwardedRef<HTMLSelectElement>;
 };
-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 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 {};

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

@@ -24,23 +24,27 @@ var __rest = (this && this.__rest) || function (s, e) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Select = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
+var Row_1 = require("./Row");
 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 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 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; });
+            var selectedItem = items.find(function (item, index) { return itemKey(item, index) == selectedValue_1; });
             onChange(selectedItem !== null && selectedItem !== void 0 ? 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)(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) {
+    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));
-            }) })) }));
+            }) }))) }));
 };
-exports.Select = (0, react_1.forwardRef)(SelectInner);
+exports.Select = Select;

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

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

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

@@ -24,10 +24,11 @@ var __rest = (this && this.__rest) || function (s, e) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TextArea = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
+var Row_1 = require("./Row");
 var AutoTextArea_1 = require("../AutoTextArea");
-var InputWithLabel_1 = require("./InputWithLabel");
+var styles_1 = require("./styles");
 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)) }));
+    return ((0, jsx_runtime_1.jsx)(Row_1.FormRow, { label: label, icon: icon, children: props.readOnly ? ((0, jsx_runtime_1.jsx)(styles_1.ReadOnlyValue, { children: props.value || '-' })) : ((0, jsx_runtime_1.jsx)(AutoTextArea_1.AutoTextArea, __assign({}, props))) }));
 };
 exports.TextArea = TextArea;

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

@@ -1,25 +1,45 @@
 import { FC, PropsWithChildren } from 'react';
+import { FormCondensedFields, FormFields } from './styles';
 import { Checkbox } from './Checkbox';
+import { CustomSelect } from './CustomSelect';
 import { FormGroup } from './FormGroup';
+import { FormRow } from './Row';
 import { Input } from './Input';
 import { Select } from './Select';
 import { TextArea } from './TextArea';
-export type FormProps = PropsWithChildren<{
+export type CardFormProps = PropsWithChildren<{
     onSubmit?: () => void;
 }>;
-export type FormFC = FC<FormProps> & {
+export type CardFormFC = FC<CardFormProps> & {
+    Checkbox: typeof Checkbox;
+    CondensedFields: typeof FormCondensedFields;
+    Fields: typeof FormFields;
     Group: typeof FormGroup;
     Input: typeof Input;
+    Row: typeof FormRow;
     Select: typeof Select;
-    Checkbox: typeof Checkbox;
     TextArea: typeof TextArea;
+    CustomSelect: typeof CustomSelect;
 };
-export declare const Form: {
-    ({ children, onSubmit }: FormProps): import("react/jsx-runtime").JSX.Element;
+export declare const CardForm: {
+    ({ children, onSubmit }: CardFormProps): import("react/jsx-runtime").JSX.Element;
+    Checkbox: FC<{
+        label?: string;
+        icon?: import("../../..").IconFC;
+        readOnly?: boolean;
+        condensed?: boolean;
+    } & {
+        children?: import("react").ReactNode | undefined;
+    } & import("react").InputHTMLAttributes<HTMLInputElement>>;
+    CondensedFields: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+    Fields: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+        $readOnly?: boolean;
+    }>> & string;
     Group: FC<{
         color?: import("../../..").ThemeColorWithIntensity;
         title?: string;
         subTitle?: string;
+        icon?: import("../../..").IconFC;
     } & {
         children?: import("react").ReactNode | undefined;
     }>;
@@ -27,34 +47,25 @@ export declare const Form: {
         label?: string;
         icon?: import("../../..").IconFC;
         readOnly?: boolean;
+        condensed?: 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"> & {
+    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"> & {
         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>>;
+        ref?: import("react").ForwardedRef<HTMLSelectElement>;
+    }) => import("react/jsx-runtime").JSX.Element;
     TextArea: FC<{
         label?: string;
         icon?: import("../../..").IconFC;
         readOnly?: boolean;
+        condensed?: boolean;
     } & {
         children?: import("react").ReactNode | undefined;
     } & import("react").ClassAttributes<HTMLTextAreaElement> & import("react").TextareaHTMLAttributes<HTMLTextAreaElement> & {
@@ -63,4 +74,13 @@ export declare const Form: {
         canGrow?: boolean;
         canShrink?: boolean;
     }>;
+    CustomSelect: <T>({ icon, label, items, itemKey, itemLabel, readOnly, onChange, value, ref, ...props }: import("./Row").FormRowProps & Omit<import("react").SelectHTMLAttributes<HTMLSelectElement>, "value" | "onChange"> & {
+        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;
+        ref?: import("react").ForwardedRef<HTMLSelectElement>;
+    }) => import("react/jsx-runtime").JSX.Element;
 };

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

@@ -1,14 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Form = void 0;
+exports.CardForm = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
+var styles_1 = require("./styles");
 var Checkbox_1 = require("./Checkbox");
+var CustomSelect_1 = require("./CustomSelect");
 var FormGroup_1 = require("./FormGroup");
+var Row_1 = require("./Row");
 var Input_1 = require("./Input");
 var Select_1 = require("./Select");
 var TextArea_1 = require("./TextArea");
-var Form = function (_a) {
+var CardForm = function (_a) {
     var children = _a.children, onSubmit = _a.onSubmit;
     var handleSubmit = (0, react_1.useCallback)(function (e) {
         e.preventDefault();
@@ -16,9 +19,13 @@ var Form = function (_a) {
     }, [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;
+exports.CardForm = CardForm;
+exports.CardForm.Checkbox = Checkbox_1.Checkbox;
+exports.CardForm.CondensedFields = styles_1.FormCondensedFields;
+exports.CardForm.Fields = styles_1.FormFields;
+exports.CardForm.Group = FormGroup_1.FormGroup;
+exports.CardForm.Input = Input_1.Input;
+exports.CardForm.Row = Row_1.FormRow;
+exports.CardForm.Select = Select_1.Select;
+exports.CardForm.TextArea = TextArea_1.TextArea;
+exports.CardForm.CustomSelect = CustomSelect_1.CustomSelect;

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

@@ -1,14 +1,17 @@
-import { ThemeColorWithIntensity } from '../../../providers/ThemeProvider';
+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;
 }>> & 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<{
+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;
-}>;
-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>, {
+}>> & 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>, import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>>, never>, never>> & string;
+export declare const ReadOnlyValue: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const FormFields: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     $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;
+export declare const FormCondensedFields: 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/Form/styles.js

@@ -19,29 +19,41 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : 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;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledCheckbox = exports.InputContainer = exports.inputCss = exports.FormGroupHeader = exports.FormGroupContainer = void 0;
+exports.FormCondensedFields = exports.FormFields = exports.ReadOnlyValue = exports.StyledCheckbox = exports.FormRowContainer = exports.FormRowInputContainer = 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-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;
+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.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) {
+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) {
     var $readOnly = _a.$readOnly;
-    return $readOnly ? 'none' : 'var(--color-neutral-0)';
+    return ($readOnly ? '0' : 'var(--space-2)');
 });
-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;
+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;