@addev-be/ui 0.16.10 → 0.17.0

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

@@ -1,45 +1,25 @@
 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 CardFormProps = PropsWithChildren<{
+export type FormProps = PropsWithChildren<{
     onSubmit?: () => void;
 }>;
-export type CardFormFC = FC<CardFormProps> & {
-    Checkbox: typeof Checkbox;
-    CondensedFields: typeof FormCondensedFields;
-    Fields: typeof FormFields;
+export type FormFC = FC<FormProps> & {
     Group: typeof FormGroup;
     Input: typeof Input;
-    Row: typeof FormRow;
     Select: typeof Select;
+    Checkbox: typeof Checkbox;
     TextArea: typeof TextArea;
-    CustomSelect: typeof CustomSelect;
 };
-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;
+export declare const Form: {
+    ({ children, onSubmit }: FormProps): import("react/jsx-runtime").JSX.Element;
     Group: FC<{
         color?: import("../../..").ThemeColorWithIntensity;
         title?: string;
         subTitle?: string;
-        icon?: import("../../..").IconFC;
     } & {
         children?: import("react").ReactNode | undefined;
     }>;
@@ -47,25 +27,34 @@ export declare const CardForm: {
         label?: string;
         icon?: import("../../..").IconFC;
         readOnly?: boolean;
-        condensed?: boolean;
     } & {
         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>(props: {
+        label?: string;
+        icon?: import("../../..").IconFC;
+        readOnly?: boolean;
+    } & {
+        children?: import("react").ReactNode | undefined;
+    } & Omit<import("react").SelectHTMLAttributes<HTMLSelectElement>, "onChange" | "value"> & {
         items: T[];
         value: T | null;
         itemKey: (item: T, index: number) => string;
         itemLabel: (item: T, index: number) => string;
         readOnly?: boolean;
         onChange?: ((value: T | null) => void) | undefined;
-        ref?: import("react").ForwardedRef<HTMLSelectElement>;
-    }) => import("react/jsx-runtime").JSX.Element;
+    } & import("react").RefAttributes<HTMLSelectElement>) => import("react").JSX.Element | null;
+    Checkbox: FC<{
+        label?: string;
+        icon?: import("../../..").IconFC;
+        readOnly?: boolean;
+    } & {
+        children?: import("react").ReactNode | undefined;
+    } & import("react").InputHTMLAttributes<HTMLInputElement>>;
     TextArea: FC<{
         label?: string;
         icon?: import("../../..").IconFC;
         readOnly?: boolean;
-        condensed?: boolean;
     } & {
         children?: import("react").ReactNode | undefined;
     } & import("react").ClassAttributes<HTMLTextAreaElement> & import("react").TextareaHTMLAttributes<HTMLTextAreaElement> & {
@@ -74,13 +63,4 @@ export declare const CardForm: {
         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,17 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CardForm = void 0;
+exports.Form = 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 CardForm = function (_a) {
+var Form = function (_a) {
     var children = _a.children, onSubmit = _a.onSubmit;
     var handleSubmit = (0, react_1.useCallback)(function (e) {
         e.preventDefault();
@@ -19,13 +16,9 @@ var CardForm = function (_a) {
     }, [onSubmit]);
     return (0, jsx_runtime_1.jsx)("form", { onSubmit: handleSubmit, children: children });
 };
-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;
+exports.Form = Form;
+exports.Form.Group = FormGroup_1.FormGroup;
+exports.Form.Input = Input_1.Input;
+exports.Form.Select = Select_1.Select;
+exports.Form.Checkbox = Checkbox_1.Checkbox;
+exports.Form.TextArea = TextArea_1.TextArea;

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

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

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

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

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

@@ -1,12 +1,8 @@
 import { ButtonProps } from './Button';
-import { ButtonHTMLAttributes, ForwardedRef } from 'react';
+import { ButtonHTMLAttributes } from 'react';
 import { IconFC } from '../../Icons';
-import { ThemeSize } from '../../providers/ThemeProvider/types';
-type IconButtonProps = ButtonProps & {
+import { ThemeSize } from '../../providers';
+export declare const IconButton: (props: ButtonProps & {
     icon: IconFC;
     $iconSize?: ThemeSize;
-};
-export declare const IconButton: ({ icon: Icon, ref, ...props }: IconButtonProps & ButtonHTMLAttributes<HTMLButtonElement> & {
-    ref?: ForwardedRef<HTMLButtonElement>;
-}) => import("react/jsx-runtime").JSX.Element;
-export {};
+} & ButtonHTMLAttributes<HTMLButtonElement> & import("react").RefAttributes<HTMLButtonElement>) => import("react").JSX.Element | null;

package/dist/components/forms/IconButton.js

@@ -32,6 +32,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.IconButton = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var Button_1 = require("./Button");
+var react_1 = require("react");
 var styled_components_1 = __importDefault(require("styled-components"));
 var styles = {
     IconButton: (0, styled_components_1.default)(Button_1.Button).attrs({
@@ -56,9 +57,8 @@ var styles = {
         return "var(--space-".concat($iconSize, ")");
     }),
 };
-var IconButton = function (_a) {
-    var Icon = _a.icon, ref = _a.ref, props = __rest(_a, ["icon", "ref"]);
+exports.IconButton = (0, react_1.forwardRef)(function (_a, ref) {
+    var Icon = _a.icon, props = __rest(_a, ["icon"]);
     return ((0, jsx_runtime_1.jsx)(styles.IconButton, __assign({ ref: ref }, props, { children: (0, jsx_runtime_1.jsx)(Icon, { className: "iconbutton-icon" }) })));
-};
-exports.IconButton = IconButton;
+});
 var templateObject_1;

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

@@ -4,6 +4,5 @@ export * from './Select';
 export * from './IconButton';
 export * from './IndeterminateCheckbox';
 export * from './Form';
-export * from './Form/Row';
+export * from './Form/InputWithLabel';
 export * from './styles';
-export * from './NumberInput';

package/dist/components/forms/index.js

@@ -20,6 +20,5 @@ __exportStar(require("./Select"), exports);
 __exportStar(require("./IconButton"), exports);
 __exportStar(require("./IndeterminateCheckbox"), exports);
 __exportStar(require("./Form"), exports);
-__exportStar(require("./Form/Row"), exports);
+__exportStar(require("./Form/InputWithLabel"), exports);
 __exportStar(require("./styles"), exports);
-__exportStar(require("./NumberInput"), exports);

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

@@ -1,19 +1,7 @@
-import { NumericFormat } from 'react-number-format';
 export declare const inputStyle: import("styled-components").RuleSet<object>;
-export declare const Input: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>> & string;
-export declare const StyledNumericFormat: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react-number-format/types/types").InternalNumberFormatBase & {
-    thousandSeparator?: boolean | string;
-    decimalSeparator?: string;
-    allowedDecimalSeparators?: Array<string>;
-    thousandsGroupStyle?: "thousand" | "lakh" | "wan" | "none";
-    decimalScale?: number;
-    fixedDecimalScale?: boolean;
-    allowNegative?: boolean;
-    allowLeadingZeros?: boolean;
-    suffix?: string;
-    prefix?: string;
-} & Omit<import("react-number-format").InputAttributes, never> & Omit<unknown, "type" | "onFocus" | "onBlur" | "onChange" | "onKeyDown" | "onMouseUp" | "ref" | "value" | "defaultValue" | "prefix" | "inputMode" | "displayType" | "renderText" | "getInputRef" | "valueIsNumericString" | "onValueChange" | "isAllowed" | "thousandSeparator" | "decimalSeparator" | "allowedDecimalSeparators" | "thousandsGroupStyle" | "decimalScale" | "fixedDecimalScale" | "allowNegative" | "allowLeadingZeros" | "suffix"> & {
-    customInput?: import("react").ComponentType<unknown> | undefined;
-}, never>> & string & Omit<typeof NumericFormat, keyof import("react").Component<any, {}, any>>;
-export declare const StyledTextArea: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, never>> & string;
-export declare const StackedLabelContainer: 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 Input: 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 StackedLabelContainer: 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>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}>, never>, never>> & string;

package/dist/components/forms/styles.js

@@ -19,32 +19,21 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-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 __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.StackedLabelContainer = exports.StyledTextArea = exports.StyledNumericFormat = exports.Input = exports.inputStyle = void 0;
+exports.StackedLabelContainer = 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.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);
+exports.inputStyle = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  font-family: inherit;\n  font-size: inherit;\n  color: inherit;\n  border: 1px solid var(--color-gray-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: inherit;\n  font-size: inherit;\n  color: inherit;\n  border: 1px solid var(--color-gray-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.attrs({
+    className: 'Input',
+})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), exports.inputStyle);
 exports.StackedLabelContainer = styled_components_1.default.div.attrs({
     className: 'StackedLabelContainer',
-})(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-1);\n  color: var(--color-gray-900);\n"], ["\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-1);\n  color: var(--color-gray-900);\n"])));
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
+})(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-1);\n  color: var(--color-gray-900);\n"], ["\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-1);\n  color: var(--color-gray-900);\n"])));
+var templateObject_1, templateObject_2, templateObject_3;

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

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

package/dist/components/layout/Columns.js

@@ -8,14 +8,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Column = exports.Columns = void 0;
-var space_1 = require("../../helpers/styled/space");
 var styled_components_1 = __importDefault(require("styled-components"));
-exports.Columns = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: grid;\n  grid-gap: var(--space-6);\n  width: 100%;\n  box-sizing: border-box;\n\n  grid-template-columns: ", ";\n\n  ", ";\n"], ["\n  display: grid;\n  grid-gap: var(--space-6);\n  width: 100%;\n  box-sizing: border-box;\n\n  grid-template-columns: ", ";\n\n  ", ";\n"])), function (_a) {
-    var _b;
-    var _c = _a.columns, columns = _c === void 0 ? 1 : _c, _d = _a.$maxColumnWidth, $maxColumnWidth = _d === void 0 ? '1fr' : _d;
+exports.Columns = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: grid;\n  grid-gap: var(--space-2);\n  grid-template-columns: ", ";\n"], ["\n  display: grid;\n  grid-gap: var(--space-2);\n  grid-template-columns: ", ";\n"])), function (_a) {
+    var columns = _a.columns;
     return typeof columns === 'number'
-        ? "repeat(".concat(columns, ", minmax(0, ").concat($maxColumnWidth, "))")
-        : (_b = columns === null || columns === void 0 ? void 0 : columns.join(' ')) !== null && _b !== void 0 ? _b : 'none';
-}, space_1.space);
-exports.Column = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-6);\n"], ["\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-6);\n"])));
+        ? "repeat(".concat(columns, ", 1fr)")
+        : (columns === null || columns === void 0 ? void 0 : columns.join(' ')) || 'none';
+});
+exports.Column = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-2);\n"], ["\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-2);\n"])));
 var templateObject_1, templateObject_2;

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

@@ -26,23 +26,13 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-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 __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 __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)
@@ -59,7 +49,7 @@ exports.Dropdown = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var styles = __importStar(require("./styles"));
 var react_1 = require("react");
-var hooks_1 = require("../../../providers/hooks");
+var providers_1 = require("../../../providers");
 var getDropdownStyle = function (dropdown) {
     var minHeight = Array.isArray(dropdown.$height)
         ? dropdown.$height[0]
@@ -85,7 +75,7 @@ var getDropdownStyle = function (dropdown) {
 };
 var Dropdown = function (_a) {
     var children = _a.children, onClose = _a.onClose, _b = _a.usePortal, usePortal = _b === void 0 ? true : _b, props = __rest(_a, ["children", "onClose", "usePortal"]);
-    var createPortal = (0, hooks_1.usePortals)().createPortal;
+    var createPortal = (0, providers_1.usePortals)().createPortal;
     var firstClick = (0, react_1.useRef)(true);
     var containerRef = (0, react_1.useRef)(null);
     var style = (0, react_1.useMemo)(function () { return getDropdownStyle(props); }, [props]);

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

@@ -1,4 +1,6 @@
-export declare const DropdownBackdrop: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>, {
+export declare const DropdownBackdrop: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}>, {
     $alpha?: number;
 }>, never>> & string;
 export type DropdownContainerProps = {
@@ -6,6 +8,7 @@ export type DropdownContainerProps = {
     $height: number | number[];
     $zIndex?: number;
     $backdropAlpha?: number;
-    $withBackground?: boolean;
 };
-export declare const DropdownContainer: 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>, DropdownContainerProps>> & string;
+export declare const DropdownContainer: 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>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}>, never>, DropdownContainerProps>> & string;

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

@@ -19,23 +19,13 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-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 __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DropdownContainer = exports.DropdownBackdrop = void 0;
 var styled_components_1 = __importStar(require("styled-components"));
@@ -47,15 +37,12 @@ exports.DropdownBackdrop = styled_components_1.default.div.attrs({
 });
 exports.DropdownContainer = styled_components_1.default.div.attrs({
     className: 'DropdownContainer',
-})(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  background: var(--color-base-0);\n  border-radius: var(--rounded-md);\n  box-shadow: var(--shadow-lg);\n  outline: 1px solid var(--color-base-200);\n\n  position: absolute;\n  z-index: 1001;\n  ", ";\n  ", "\n  ", "\n"], ["\n  background: var(--color-base-0);\n  border-radius: var(--rounded-md);\n  box-shadow: var(--shadow-lg);\n  outline: 1px solid var(--color-base-200);\n\n  position: absolute;\n  z-index: 1001;\n  ", ";\n  ", "\n  ", "\n"])), function (_a) {
+})(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  background: var(--color-neutral-0);\n  border-radius: var(--rounded-md);\n  box-shadow: var(--shadow-lg);\n  outline: 1px solid var(--color-neutral-200);\n\n  position: absolute;\n  z-index: 1001;\n  ", ";\n  ", "\n"], ["\n  background: var(--color-neutral-0);\n  border-radius: var(--rounded-md);\n  box-shadow: var(--shadow-lg);\n  outline: 1px solid var(--color-neutral-200);\n\n  position: absolute;\n  z-index: 1001;\n  ", ";\n  ", "\n"])), function (_a) {
     var $width = _a.$width;
     return ($width ? "".concat($width, "px") : 'auto');
 }, function (_a) {
     var $height = _a.$height;
     return Array.isArray($height)
         ? (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n          min-height: ", "px;\n          max-height: ", "px;\n        "], ["\n          min-height: ", "px;\n          max-height: ", "px;\n        "])), $height[0], $height[1]) : (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n          height: ", ";\n        "], ["\n          height: ", ";\n        "])), $height ? "".concat($height, "px") : 'auto');
-}, function (_a) {
-    var $withBackground = _a.$withBackground;
-    return $withBackground && (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      background: none;\n      box-shadow: none;\n      outline: none;\n    "], ["\n      background: none;\n      box-shadow: none;\n      outline: none;\n    "])));
 });
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

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

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