@arquimedes.co/eureka-forms 2.0.24 → 2.0.25

package/dist/Shared/RoundedCheckBox/RoundedCheckBox.stories.d.ts

@@ -0,0 +1,21 @@
+import type { StoryObj } from '@storybook/react';
+import RoundedCheckBox from './RoundedCheckBox';
+declare const meta: {
+    component: typeof RoundedCheckBox;
+    tags: string[];
+    args: {
+        checkedColor: string;
+        uncheckedColor: string;
+        disabledColor: string;
+        size: string;
+        errorColor: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Uncheked: Story;
+export declare const Checked: Story;
+export declare const Error: Story;
+export declare const Disabled: Story;
+export declare const ErrorColor: Story;
+export declare const DifferentColors: Story;

package/dist/Shared/RoundedCheckBox/RoundedCheckBox.stories.js

@@ -0,0 +1,50 @@
+import RoundedCheckBox from './RoundedCheckBox';
+var meta = {
+    component: RoundedCheckBox,
+    tags: ['autodocs'],
+    args: {
+        checkedColor: '#3d5a7f',
+        uncheckedColor: '#787878',
+        disabledColor: '#A0A0A0',
+        size: '1.5rem',
+        errorColor: '#cc2936',
+    },
+};
+export default meta;
+export var Uncheked = {
+    args: {
+        checked: false,
+    },
+};
+export var Checked = {
+    args: {
+        checked: true,
+    },
+};
+export var Error = {
+    args: {
+        checked: false,
+        error: true,
+    },
+};
+export var Disabled = {
+    args: {
+        checked: false,
+        disabled: true,
+    },
+};
+export var ErrorColor = {
+    args: {
+        checked: false,
+        error: true,
+        errorColor: 'blue',
+    },
+};
+export var DifferentColors = {
+    args: {
+        checked: true,
+        checkedColor: 'red',
+        uncheckedColor: 'blue',
+        disabledColor: '#A0A0A0',
+    },
+};

package/dist/Shared/RoundedDatePicker/RoundedDatePicker.d.ts

@@ -37,12 +37,13 @@ interface StyleProps {
     /** Height of the component */
     height?: string;
 }
-interface RoundedDatePickerProps extends StyleProps {
+interface RoundedDatePickerProps extends Omit<DatePickerProps, 'ref'>, StyleProps {
+    ref?: React.RefObject<HTMLDivElement>;
 }
 /**
  * Generic datepicker with apps designs. Is class do to the use in the react-hook-forms library
  */
-declare class RoundedDatePicker extends React.Component<RoundedDatePickerProps & DatePickerProps> {
+declare class RoundedDatePicker extends React.Component<RoundedDatePickerProps> {
     render(): JSX.Element;
 }
 export default RoundedDatePicker;

package/dist/Shared/RoundedDatePicker/RoundedDatePicker.js

@@ -215,7 +215,7 @@ var useDatePickerDialogStyles = function (props) {
     }); });
 };
 function CustomDatePicker(_a) {
-    var _b = _a.focusColor, focusColor = _b === void 0 ? '#3d5a7f' : _b, _c = _a.secondaryColor, secondaryColor = _c === void 0 ? '#98c1d9' : _c, _d = _a.outlineColor, outlineColor = _d === void 0 ? '#0000003b' : _d, _e = _a.backgroundColor, backgroundColor = _e === void 0 ? 'white' : _e, _f = _a.textColor, textColor = _f === void 0 ? '#293241' : _f, _g = _a.contrastColor, contrastColor = _g === void 0 ? '#ee6c4d' : _g, _h = _a.accentColor, accentColor = _h === void 0 ? '#293241' : _h, _j = _a.errorColor, errorColor = _j === void 0 ? '#cc2936' : _j, _k = _a.borderRadius, borderRadius = _k === void 0 ? 10 : _k, _l = _a.padding, padding = _l === void 0 ? '6px 0px 6px 12px' : _l, _m = _a.fontSize, fontSize = _m === void 0 ? '1rem' : _m, _o = _a.shrunkenFontSize, shrunkenFontSize = _o === void 0 ? '1rem' : _o, _p = _a.helperTextColor, helperTextColor = _p === void 0 ? '#989898' : _p, _q = _a.fontWeight, fontWeight = _q === void 0 ? '300' : _q, _r = _a.height, height = _r === void 0 ? '31px' : _r, _s = _a.cantEdit, cantEdit = _s === void 0 ? false : _s, _t = _a.pickTime, pickTime = _t === void 0 ? false : _t, onChange = _a.onChange, required = _a.required, others = __rest(_a, ["focusColor", "secondaryColor", "outlineColor", "backgroundColor", "textColor", "contrastColor", "accentColor", "errorColor", "borderRadius", "padding", "fontSize", "shrunkenFontSize", "helperTextColor", "fontWeight", "height", "cantEdit", "pickTime", "onChange", "required"]);
+    var ref = _a.ref, _b = _a.focusColor, focusColor = _b === void 0 ? '#3d5a7f' : _b, _c = _a.secondaryColor, secondaryColor = _c === void 0 ? '#98c1d9' : _c, _d = _a.outlineColor, outlineColor = _d === void 0 ? '#0000003b' : _d, _e = _a.backgroundColor, backgroundColor = _e === void 0 ? '#ffffff' : _e, _f = _a.textColor, textColor = _f === void 0 ? '#293241' : _f, _g = _a.contrastColor, contrastColor = _g === void 0 ? '#ee6c4d' : _g, _h = _a.accentColor, accentColor = _h === void 0 ? '#293241' : _h, _j = _a.errorColor, errorColor = _j === void 0 ? '#cc2936' : _j, _k = _a.borderRadius, borderRadius = _k === void 0 ? 10 : _k, _l = _a.padding, padding = _l === void 0 ? '6px 0px 6px 12px' : _l, _m = _a.fontSize, fontSize = _m === void 0 ? '1rem' : _m, _o = _a.shrunkenFontSize, shrunkenFontSize = _o === void 0 ? '1rem' : _o, _p = _a.helperTextColor, helperTextColor = _p === void 0 ? '#989898' : _p, _q = _a.fontWeight, fontWeight = _q === void 0 ? '300' : _q, _r = _a.height, height = _r === void 0 ? '31px' : _r, _s = _a.cantEdit, cantEdit = _s === void 0 ? false : _s, _t = _a.pickTime, pickTime = _t === void 0 ? false : _t, onChange = _a.onChange, required = _a.required, others = __rest(_a, ["ref", "focusColor", "secondaryColor", "outlineColor", "backgroundColor", "textColor", "contrastColor", "accentColor", "errorColor", "borderRadius", "padding", "fontSize", "shrunkenFontSize", "helperTextColor", "fontWeight", "height", "cantEdit", "pickTime", "onChange", "required"]);
     var classes = useDatePickerStyles({
         padding: padding,
         cantEdit: cantEdit,
@@ -282,7 +282,7 @@ function CustomDatePicker(_a) {
         height: height,
     })();
     if (pickTime) {
-        return (_jsx(DateTimePicker, __assign({}, others, { inputVariant: "outlined", size: "small", disabled: cantEdit, fullWidth: true, onChange: onChange, placeholder: format(new Date(), 'Pp', { locale: getLocale() }), format: "Pp", required: required, InputLabelProps: { classes: labelClasses }, DialogProps: {
+        return (_jsx(DateTimePicker, __assign({}, others, { ref: ref, inputVariant: "outlined", "data-testid": "date-picker", size: "small", disabled: cantEdit, fullWidth: true, onChange: onChange, placeholder: format(new Date(), 'Pp', { locale: getLocale() }), format: "Pp", required: required, InputLabelProps: { classes: labelClasses }, DialogProps: {
                 disableEnforceFocus: true,
                 className: datePicker,
                 cancelLabel: '',
@@ -307,7 +307,7 @@ function CustomDatePicker(_a) {
             }, variant: "dialog" })));
     }
     else {
-        return (_jsx(DatePicker, __assign({}, others, { inputVariant: "outlined", size: "small", disabled: cantEdit, fullWidth: true, onChange: onChange, placeholder: format(new Date(), 'P', { locale: getLocale() }), format: "P", required: required, InputLabelProps: { classes: labelClasses }, DialogProps: {
+        return (_jsx(DatePicker, __assign({}, others, { ref: ref, "data-testid": "date-picker", inputVariant: "outlined", size: "small", disabled: cantEdit, fullWidth: true, onChange: onChange, placeholder: format(new Date(), 'P', { locale: getLocale() }), format: "P", required: required, InputLabelProps: { classes: labelClasses }, DialogProps: {
                 disableEnforceFocus: true,
                 className: datePicker,
                 cancelLabel: '',

package/dist/Shared/RoundedDatePicker/RoundedDatePicker.stories.d.ts

@@ -0,0 +1,36 @@
+import type { StoryObj } from '@storybook/react';
+import RoundedDatePicker from './RoundedDatePicker';
+declare const meta: {
+    component: typeof RoundedDatePicker;
+    tags: string[];
+    args: {
+        focusColor: string;
+        secondaryColor: string;
+        helperTextColor: string;
+        outlineColor: string;
+        backgroundColor: string;
+        textColor: string;
+        contrastColor: string;
+        accentColor: string;
+        errorColor: string;
+        fontSize: string;
+        fontWeight: string;
+        cantEdit: false;
+    };
+    parameters: {
+        date: Date;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Empty: Story;
+export declare const Default: Story;
+export declare const ValueAndLabel: Story;
+export declare const Full: Story;
+export declare const FullDateTime: Story;
+export declare const Error: Story;
+export declare const Menu: Story;
+export declare const DateTimeDateMenu: Story;
+export declare const DateTimeTimeMenu: Story;
+export declare const ErrorColor: Story;
+export declare const DifferentColors: Story;

package/dist/Shared/RoundedDatePicker/RoundedDatePicker.stories.js

@@ -0,0 +1,223 @@
+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 __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useArgs } from '@storybook/preview-api';
+import RoundedDatePicker from './RoundedDatePicker';
+import { within, screen } from '@storybook/testing-library';
+import { userEvent } from '@storybook/testing-library';
+var meta = {
+    component: RoundedDatePicker,
+    tags: ['autodocs'],
+    args: {
+        focusColor: '#3d5a7f',
+        secondaryColor: '#98c1d9',
+        helperTextColor: '#989898',
+        outlineColor: '#0000003b',
+        backgroundColor: '#ffffff',
+        textColor: '#293241',
+        contrastColor: '#ee6c4d',
+        accentColor: '#293241',
+        errorColor: '#cc2936',
+        fontSize: '1rem',
+        fontWeight: '300',
+        cantEdit: false,
+    },
+    parameters: {
+        date: new Date('07-21-2021'),
+    },
+};
+export default meta;
+export var Empty = {
+    args: {
+        value: null,
+    },
+};
+export var Default = {
+    args: {
+        label: 'Label',
+        value: new Date('07-21-2021'),
+    },
+};
+export var ValueAndLabel = {
+    args: {
+        label: 'Label',
+        value: null,
+    },
+    render: function Component(args) {
+        var _a = useArgs(), setArgs = _a[1];
+        var onValueChange = function (value) {
+            var _a;
+            (_a = args.onChange) === null || _a === void 0 ? void 0 : _a.call(args, value);
+            setArgs({ value: value });
+        };
+        return (_jsx(RoundedDatePicker, __assign({}, args, { ref: args.ref, onChange: onValueChange })));
+    },
+};
+export var Full = {
+    args: {
+        label: 'Label',
+        value: null,
+        helperText: 'Helper text',
+    },
+};
+export var FullDateTime = {
+    args: {
+        label: 'Label',
+        value: null,
+        helperText: 'Helper text',
+        pickTime: true,
+    },
+};
+export var Error = {
+    args: {
+        label: 'Label',
+        value: null,
+        helperText: 'Helper text',
+        error: true,
+    },
+};
+export var Menu = {
+    args: {
+        label: 'Label',
+        value: null,
+    },
+    play: function (_a) {
+        var canvasElement = _a.canvasElement;
+        return __awaiter(void 0, void 0, void 0, function () {
+            var canvas, selector;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        canvas = within(canvasElement);
+                        selector = canvas.getByTestId('date-picker');
+                        return [4 /*yield*/, userEvent.click(selector)];
+                    case 1:
+                        _b.sent();
+                        return [2 /*return*/];
+                }
+            });
+        });
+    },
+};
+export var DateTimeDateMenu = {
+    args: {
+        label: 'Label',
+        value: null,
+        pickTime: true,
+    },
+    play: function (_a) {
+        var canvasElement = _a.canvasElement;
+        return __awaiter(void 0, void 0, void 0, function () {
+            var canvas, selector;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        canvas = within(canvasElement);
+                        selector = canvas.getByTestId('date-picker');
+                        return [4 /*yield*/, userEvent.click(selector)];
+                    case 1:
+                        _b.sent();
+                        return [2 /*return*/];
+                }
+            });
+        });
+    },
+};
+export var DateTimeTimeMenu = {
+    args: {
+        label: 'Label',
+        value: null,
+        pickTime: true,
+    },
+    play: function (_a) {
+        var canvasElement = _a.canvasElement;
+        return __awaiter(void 0, void 0, void 0, function () {
+            var canvas, selector, time;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        canvas = within(canvasElement);
+                        selector = canvas.getByTestId('date-picker');
+                        return [4 /*yield*/, userEvent.click(selector)];
+                    case 1:
+                        _b.sent();
+                        time = screen.getByText('12', {
+                            selector: 'h3',
+                        });
+                        return [4 /*yield*/, userEvent.click(time)];
+                    case 2:
+                        _b.sent();
+                        return [2 /*return*/];
+                }
+            });
+        });
+    },
+};
+export var ErrorColor = {
+    args: {
+        label: 'Label',
+        value: null,
+        helperText: 'Helper text',
+        error: true,
+        errorColor: 'blue',
+    },
+};
+export var DifferentColors = {
+    args: {
+        label: 'Label',
+        value: null,
+        helperText: 'Helper text',
+        helperTextColor: 'green',
+        outlineColor: 'purple',
+        backgroundColor: 'red',
+        textColor: 'blue',
+    },
+    render: function Component(args) {
+        return _jsx(RoundedDatePicker, __assign({}, args, { ref: args.ref }));
+    },
+};

package/dist/Shared/RoundedSelect/RoundedSelect.stories.d.ts

@@ -0,0 +1,28 @@
+import type { StoryObj } from '@storybook/react';
+import RoundedSelect from './RoundedSelect';
+declare const meta: {
+    component: typeof RoundedSelect;
+    tags: string[];
+    args: {
+        focusColor: string;
+        helperTextColor: string;
+        outlineColor: string;
+        backgroundColor: string;
+        color: string;
+        readOnly: false;
+        borderRadius: number;
+        fontSize: string;
+        errorColor: string;
+        fontWeight: string;
+        cantEdit: false;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Empty: Story;
+export declare const Default: Story;
+export declare const ValueAndLabel: Story;
+export declare const Full: Story;
+export declare const Error: Story;
+export declare const ErrorColor: Story;
+export declare const DifferentColors: Story;

package/dist/Shared/RoundedSelect/RoundedSelect.stories.js

@@ -0,0 +1,91 @@
+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);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useArgs } from '@storybook/preview-api';
+import RoundedSelect from './RoundedSelect';
+import { MenuItem } from '@material-ui/core';
+var meta = {
+    component: RoundedSelect,
+    tags: ['autodocs'],
+    args: {
+        focusColor: '#3d5a7f',
+        helperTextColor: '#989898',
+        outlineColor: '#0000003b',
+        backgroundColor: '#ffffff',
+        color: '#293241',
+        readOnly: false,
+        borderRadius: 10,
+        fontSize: '1rem',
+        errorColor: '#cc2936',
+        fontWeight: '300',
+        cantEdit: false,
+    },
+};
+export default meta;
+export var Empty = {
+    args: {},
+};
+export var Default = {
+    args: {
+        label: 'Label',
+    },
+};
+export var ValueAndLabel = {
+    args: {
+        label: 'Label',
+        value: 'option',
+    },
+    render: function Component(args) {
+        var _a = useArgs(), setArgs = _a[1];
+        var onValueChange = function (value) {
+            var _a;
+            (_a = args.handleUpdate) === null || _a === void 0 ? void 0 : _a.call(args, value);
+            setArgs({ value: value });
+        };
+        return (_jsx(RoundedSelect, __assign({}, args, { handleUpdate: onValueChange }, { children: _jsx(MenuItem, __assign({ value: 'option', style: { whiteSpace: 'normal' } }, { children: "Option" })) })));
+    },
+};
+export var Full = {
+    args: {
+        label: 'Label',
+        helperText: 'Helper text',
+    },
+};
+export var Error = {
+    args: {
+        label: 'Label',
+        helperText: 'Helper text',
+        error: true,
+    },
+};
+export var ErrorColor = {
+    args: {
+        label: 'Label',
+        helperText: 'Helper text',
+        error: true,
+        errorColor: 'blue',
+    },
+};
+export var DifferentColors = {
+    args: {
+        label: 'Label',
+        value: 'option',
+        helperText: 'Helper text',
+        helperTextColor: 'green',
+        outlineColor: 'purple',
+        backgroundColor: 'red',
+        color: 'blue',
+    },
+    render: function Component(args) {
+        return (_jsx(RoundedSelect, __assign({}, args, { children: _jsx(MenuItem, __assign({ value: 'option', style: { whiteSpace: 'normal' } }, { children: "Option" })) })));
+    },
+};

package/dist/Shared/RoundedSmartSelect/RoundedSmartSelect.d.ts

@@ -41,8 +41,6 @@ export interface RoundedSmartSelectProps extends Omit<TextFieldProps, 'color' |
     handleUpdate?: (value: any) => void;
     /** Strig to place in the label */
     label: string;
-    /** Minimum width in px of the component */
-    minWidth?: number;
     /** The helper Text to display */
     helperText?: string;
     /** The margin around the selector */

package/dist/Shared/RoundedSmartSelect/RoundedSmartSelect.js

@@ -161,7 +161,7 @@ export default function RoundedSmartSelect(_a) {
     };
     var textFieldClasses = useTextfieldStyles(props)();
     if (searchable) {
-        return (_jsx(Autocomplete, { onFocus: onFocus, size: "small", fullWidth: true, openOnFocus: true, freeSolo: creatable, disabled: cantEdit || disabled, popupIcon: loading ? (_jsx(CircularProgress, { size: 22, style: { color: '#757575', marginTop: 1 } })) : showIcon && icon ? (icon) : undefined, onOpen: function () { }, loading: loading, loadingText: 'Cargando...', closeIcon: false, options: options !== null && options !== void 0 ? options : [], getOptionLabel: function (option) {
+        return (_jsx(Autocomplete, { onFocus: onFocus, "data-testid": "smart-select", size: "small", fullWidth: true, openOnFocus: true, freeSolo: creatable, disabled: cantEdit || disabled, popupIcon: loading ? (_jsx(CircularProgress, { size: 22, style: { color: '#757575', marginTop: 1 } })) : showIcon && icon ? (icon) : undefined, onOpen: function () { }, loading: loading, loadingText: 'Cargando...', closeIcon: false, options: options !== null && options !== void 0 ? options : [], getOptionLabel: function (option) {
                 var _a, _b;
                 // Value selected with enter, right from the input
                 if (typeof option === 'string') {
@@ -216,7 +216,7 @@ export default function RoundedSmartSelect(_a) {
             }, renderInput: function (params) { return (_jsx(TextField, __assign({ classes: textFieldClasses }, params, { inputRef: inputRef, onBlur: onBlur, name: name, variant: "outlined", label: label, required: required, error: !hidden && error, helperText: hidden ? undefined : helperText }))); }, noOptionsText: "No hay opciones" }));
     }
     else {
-        return (_jsxs(RoundedSelect, __assign({ onBlur: onBlur, onFocus: onFocus, inputRef: inputRef, name: name, fullWidth: true, handleUpdate: function (event) {
+        return (_jsxs(RoundedSelect, __assign({ onBlur: onBlur, onFocus: onFocus, "data-testid": "smart-select", inputRef: inputRef, name: name, fullWidth: true, handleUpdate: function (event) {
                 handleUpdate === null || handleUpdate === void 0 ? void 0 : handleUpdate(options === null || options === void 0 ? void 0 : options.find(function (option) {
                     return getValueString(option) === event.target.value;
                 }));
@@ -231,6 +231,6 @@ export default function RoundedSmartSelect(_a) {
                     ? function (props) {
                         return cloneElement(icon, props);
                     }
-                    : undefined, showIcon: showIcon }, { children: [_jsx(MenuItem, __assign({ value: '', style: { whiteSpace: 'normal' } }, { children: _jsx("em", { children: options ? 'Sin Seleccionar' : 'Cargando...' }) }), 'EMPTY'), options === null || options === void 0 ? void 0 : options.map(function (option) { return (_jsx(MenuItem, __assign({ value: getValueString(option), style: { whiteSpace: 'normal' } }, { children: option.label }), getValueString(option))); }), options === undefined && value && !loading && (_jsx(MenuItem, __assign({ value: getValueString(value), style: { whiteSpace: 'normal' } }, { children: (_b = value.label) !== null && _b !== void 0 ? _b : '' }), getValueString(value)))] })));
+                    : undefined, showIcon: showIcon }, { children: [_jsx(MenuItem, __assign({ value: '', "data-testid": 'smart-select-empty', style: { whiteSpace: 'normal' } }, { children: _jsx("em", { children: options ? 'Sin Seleccionar' : 'Cargando...' }) }), 'EMPTY'), options === null || options === void 0 ? void 0 : options.map(function (option) { return (_jsx(MenuItem, __assign({ value: getValueString(option), style: { whiteSpace: 'normal' }, "data-testid": 'smart-select-' + getValueString(option) }, { children: option.label }), getValueString(option))); }), options === undefined && value && !loading && (_jsx(MenuItem, __assign({ value: getValueString(value), style: { whiteSpace: 'normal' } }, { children: (_b = value.label) !== null && _b !== void 0 ? _b : '' }), getValueString(value)))] })));
     }
 }

package/dist/Shared/RoundedSmartSelect/RoundedSmartSelect.stories.d.ts

@@ -0,0 +1,36 @@
+import type { StoryObj } from '@storybook/react';
+import RoundedSmartSelect from './RoundedSmartSelect';
+declare const meta: {
+    component: typeof RoundedSmartSelect;
+    tags: string[];
+    args: {
+        searchable: false;
+        focusColor: string;
+        helperTextColor: string;
+        outlineColor: string;
+        backgroundColor: string;
+        color: string;
+        readOnly: false;
+        borderRadius: number;
+        fontSize: string;
+        errorColor: string;
+        fontWeight: string;
+        cantEdit: false;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Empty: Story;
+export declare const Default: Story;
+export declare const Focused: Story;
+export declare const FocusedSearchable: Story;
+export declare const SearchableWithOptions: Story;
+export declare const SearchableWithSearchAndOptions: Story;
+export declare const Loading: Story;
+export declare const LoadingOpened: Story;
+export declare const SearchableLoadingOpened: Story;
+export declare const WithValueandLabel: Story;
+export declare const Full: Story;
+export declare const Error: Story;
+export declare const ErrorColor: Story;
+export declare const DifferentColors: Story;