@conatel-sa/react-ui 0.2.4 → 0.2.5

package/dist/icons.umd.js

@@ -36,6 +36,7 @@ var ReactLibraryIcons = (() => {
   var {
     useContext,
     useEffect,
+    useLayoutEffect,
     useMemo,
     useState,
     useRef,

package/dist/index.css

@@ -1 +1,215 @@
 @import"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap";:root{--font-sans: "Poppins", system-ui, -apple-system, sans-serif;--font-mono: "JetBrains Mono", "Fira Code", monospace;--text-xs: .75rem;--text-sm: .8125rem;--text-base: .9375rem;--text-lg: 1.0625rem;--text-xl: 1.25rem;--text-2xl: 1.5rem;--text-3xl: 1.875rem;--text-4xl: 2.25rem;--leading-tight: 1.25;--leading-snug: 1.375;--leading-normal: 1.5;--leading-relaxed: 1.625;--weight-light: 300;--weight-regular: 400;--weight-medium: 500;--weight-semibold: 600;--weight-bold: 700;--space-0: 0;--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.25rem;--space-6: 1.5rem;--space-8: 2rem;--space-10: 2.5rem;--space-12: 3rem;--space-16: 4rem;--radius-none: 0;--radius-sm: 4px;--radius-md: 6px;--radius-lg: 8px;--radius-xl: 12px;--radius-2xl: 16px;--radius-full: 9999px;--shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, .05);--shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);--z-base: 0;--z-raised: 10;--z-dropdown: 100;--z-sticky: 200;--z-overlay: 300;--z-modal: 400;--z-toast: 500;--z-tooltip: 600;--duration-fast: .1s;--duration-base: .15s;--duration-slow: .25s;--ease-default: cubic-bezier(.4, 0, .2, 1);--ease-in: cubic-bezier(.4, 0, 1, 1);--ease-out: cubic-bezier(0, 0, .2, 1);--color-success: #16a34a;--color-success-light: #dcfce7;--color-warning: #d97706;--color-warning-light: #fef3c7;--color-error: #dc2626;--color-error-light: #fee2e2;--color-info: #2563eb;--color-info-light: #dbeafe}.theme-conatel{--color-brand: #CC032E;--color-brand-hover: #a80025;--color-brand-active: #8a001e;--color-brand-light: #fce8ec;--color-brand-contrast: #ffffff;--color-accent: #757578;--color-accent-hover: #5e5e60;--color-accent-light: #f3f3f3;--color-primary: var(--color-brand);--color-primary-hover: var(--color-brand-hover);--color-primary-active: var(--color-brand-active);--color-primary-light: var(--color-brand-light);--color-primary-contrast: var(--color-brand-contrast);--color-secondary: var(--color-accent);--color-secondary-hover: var(--color-accent-hover);--color-secondary-light: var(--color-accent-light);--color-secondary-contrast: #ffffff;--color-neutral-50: #fafafa;--color-neutral-100: #f5f5f5;--color-neutral-200: #e5e5e5;--color-neutral-300: #d4d4d4;--color-neutral-400: #a3a3a3;--color-neutral-500: #737373;--color-neutral-600: #525252;--color-neutral-700: #404040;--color-neutral-800: #262626;--color-neutral-900: #171717;--color-bg: #ffffff;--color-bg-alt: #f9f9f9;--color-surface: #ffffff;--color-surface-raised: #ffffff;--color-overlay: rgba(0, 0, 0, .45);--color-text: #1a1a1a;--color-text-muted: #6b6b6b;--color-text-subtle: #9b9b9b;--color-text-inverse: #ffffff;--color-text-link: var(--color-brand);--color-text-link-hover: var(--color-brand-hover);--color-border: #e0e0e0;--color-border-strong: #b0b0b0;--color-border-focus: var(--color-brand);--focus-ring: 0 0 0 3px rgba(204, 3, 46, .25);--input-bg: #ffffff;--input-border: var(--color-border);--input-border-focus: var(--color-brand);--input-radius: var(--radius-md);--btn-radius: var(--radius-md);--card-bg: var(--color-surface);--card-border: var(--color-border);--card-radius: var(--radius-lg);--card-shadow: var(--shadow-sm);--badge-radius: var(--radius-full);--badge-primary-bg: var(--color-brand-light);--badge-primary-text: var(--color-brand)}.theme-vivion{--color-brand: #009CDE;--color-brand-hover: #007ab5;--color-brand-active: #005e8f;--color-brand-light: #e5f5fd;--color-brand-contrast: #ffffff;--color-accent: #BCC0C3;--color-accent-hover: #9ea3a7;--color-accent-light: #f4f5f5;--color-tertiary: #4F4F50;--color-tertiary-hover: #383839;--color-primary: var(--color-brand);--color-primary-hover: var(--color-brand-hover);--color-primary-active: var(--color-brand-active);--color-primary-light: var(--color-brand-light);--color-primary-contrast: var(--color-brand-contrast);--color-secondary: var(--color-accent);--color-secondary-hover: var(--color-accent-hover);--color-secondary-light: var(--color-accent-light);--color-secondary-contrast: #1a1a1a;--color-neutral-50: #fafafa;--color-neutral-100: #f5f5f5;--color-neutral-200: #e5e5e5;--color-neutral-300: #d4d4d4;--color-neutral-400: #a3a3a3;--color-neutral-500: #737373;--color-neutral-600: #525252;--color-neutral-700: #404040;--color-neutral-800: #262626;--color-neutral-900: #171717;--color-bg: #ffffff;--color-bg-alt: #f8fafc;--color-surface: #ffffff;--color-surface-raised: #ffffff;--color-overlay: rgba(0, 0, 0, .45);--color-text: #1a1a1a;--color-text-muted: #4F4F50;--color-text-subtle: #9b9b9b;--color-text-inverse: #ffffff;--color-text-link: var(--color-brand);--color-text-link-hover: var(--color-brand-hover);--color-border: #e0e0e0;--color-border-strong: #b0b0b0;--color-border-focus: var(--color-brand);--focus-ring: 0 0 0 3px rgba(0, 156, 222, .25);--input-bg: #ffffff;--input-border: var(--color-border);--input-border-focus: var(--color-brand);--input-radius: var(--radius-md);--btn-radius: var(--radius-md);--card-bg: var(--color-surface);--card-border: var(--color-border);--card-radius: var(--radius-lg);--card-shadow: var(--shadow-sm);--badge-radius: var(--radius-full);--badge-primary-bg: var(--color-brand-light);--badge-primary-text: var(--color-brand)}._button_s015b_1{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);border:1.5px solid transparent;border-radius:var(--btn-radius, var(--radius-md));font-family:var(--font-sans);font-weight:var(--weight-medium);line-height:var(--leading-tight);cursor:pointer;transition:background-color var(--duration-fast) var(--ease-default),border-color var(--duration-fast) var(--ease-default),color var(--duration-fast) var(--ease-default),box-shadow var(--duration-fast) var(--ease-default);text-decoration:none;white-space:nowrap;-webkit-user-select:none;user-select:none;outline:none}._button_s015b_1:focus-visible{box-shadow:var(--focus-ring)}._button_s015b_1:disabled,._button_s015b_1._loading_s015b_28{opacity:.5;cursor:not-allowed;pointer-events:none}._fullWidth_s015b_34{width:100%}._sm_s015b_39{padding:var(--space-1) var(--space-3);font-size:var(--text-sm)}._md_s015b_44{padding:var(--space-2) var(--space-4);font-size:var(--text-base)}._lg_s015b_49{padding:var(--space-3) var(--space-6);font-size:var(--text-lg)}._primary_s015b_55{background-color:var(--color-primary);color:var(--color-primary-contrast);border-color:var(--color-primary)}._primary_s015b_55:hover:not(:disabled){background-color:var(--color-primary-hover);border-color:var(--color-primary-hover)}._primary_s015b_55:active:not(:disabled){background-color:var(--color-primary-active);border-color:var(--color-primary-active)}._secondary_s015b_71{background-color:transparent;color:var(--color-primary);border-color:var(--color-primary)}._secondary_s015b_71:hover:not(:disabled){background-color:var(--color-primary-light)}._secondary_s015b_71:active:not(:disabled){background-color:var(--color-primary-light);border-color:var(--color-primary-active);color:var(--color-primary-active)}._ghost_s015b_87{background-color:transparent;color:var(--color-text);border-color:transparent}._ghost_s015b_87:hover:not(:disabled){background-color:var(--color-neutral-100)}._ghost_s015b_87:active:not(:disabled){background-color:var(--color-neutral-200)}._danger_s015b_101{background-color:var(--color-error);color:#fff;border-color:var(--color-error)}._danger_s015b_101:hover:not(:disabled){filter:brightness(.9)}._success_s015b_111{background-color:var(--color-success);color:#fff;border-color:var(--color-success)}._success_s015b_111:hover:not(:disabled){filter:brightness(.9)}._info_s015b_121{background-color:var(--color-info);color:#fff;border-color:var(--color-info)}._info_s015b_121:hover:not(:disabled){filter:brightness(.9)}._warning_s015b_131{background-color:var(--color-warning);color:#fff;border-color:var(--color-warning)}._warning_s015b_131:hover:not(:disabled){filter:brightness(.9)}._icon_s015b_142{display:inline-flex;align-items:center;flex-shrink:0;font-size:1.1em}._spinner_s015b_150{width:1em;height:1em;border:2px solid currentColor;border-right-color:transparent;border-radius:var(--radius-full);animation:_spin_s015b_150 .6s linear infinite;flex-shrink:0}@keyframes _spin_s015b_150{to{transform:rotate(360deg)}}._heading_11ibi_1{font-family:var(--font-sans);font-weight:var(--weight-bold);line-height:var(--leading-tight);color:var(--color-text);margin:0}._light_11ibi_9{font-weight:var(--weight-medium)}._size-xs_11ibi_14{font-size:var(--text-xs)}._size-sm_11ibi_18{font-size:var(--text-sm)}._size-md_11ibi_22{font-size:var(--text-base)}._size-lg_11ibi_26{font-size:var(--text-lg)}._size-xl_11ibi_30{font-size:var(--text-xl)}._size-2xl_11ibi_34{font-size:var(--text-2xl)}._size-3xl_11ibi_38{font-size:var(--text-3xl)}._size-4xl_11ibi_42{font-size:var(--text-4xl)}._text_23jwr_1{font-family:var(--font-sans);line-height:var(--leading-normal);margin:0}._size-xs_23jwr_8{font-size:var(--text-xs)}._size-sm_23jwr_12{font-size:var(--text-sm)}._size-base_23jwr_16{font-size:var(--text-base)}._size-lg_23jwr_20{font-size:var(--text-lg)}._weight-light_23jwr_25{font-weight:var(--weight-light)}._weight-regular_23jwr_29{font-weight:var(--weight-regular)}._weight-medium_23jwr_33{font-weight:var(--weight-medium)}._weight-semibold_23jwr_37{font-weight:var(--weight-semibold)}._weight-bold_23jwr_41{font-weight:var(--weight-bold)}._color-default_23jwr_46{color:var(--color-text)}._color-muted_23jwr_50{color:var(--color-text-muted)}._color-subtle_23jwr_54{color:var(--color-text-subtle)}._color-inverse_23jwr_58{color:var(--color-text-inverse)}._color-primary_23jwr_62{color:var(--color-primary)}._color-error_23jwr_66{color:var(--color-error)}._align-left_23jwr_71{text-align:left}._align-center_23jwr_75{text-align:center}._align-right_23jwr_79{text-align:right}._wrapper_1gdyv_1{position:relative;display:inline-flex;align-items:center}._fullWidth_1gdyv_7,._fullWidth_1gdyv_7 ._input_1gdyv_8{width:100%}._input_1gdyv_8{font-family:var(--font-sans);font-size:var(--text-base);font-weight:var(--weight-regular);color:var(--color-text);background:var(--input-bg, var(--color-bg));border:1.5px solid var(--input-border, var(--color-border));border-radius:var(--input-radius, var(--radius-md));padding:var(--space-2) var(--space-3);outline:none;transition:border-color var(--duration-fast) var(--ease-default),box-shadow var(--duration-fast) var(--ease-default);width:100%}._input_1gdyv_8::placeholder{color:var(--color-text-subtle)}._input_1gdyv_8:focus{border-color:var(--input-border-focus, var(--color-primary));box-shadow:var(--focus-ring)}._input_1gdyv_8:disabled{opacity:.5;cursor:not-allowed;background:var(--color-neutral-100)}._error_1gdyv_44 ._input_1gdyv_8{border-color:var(--color-error)}._error_1gdyv_44 ._input_1gdyv_8:focus{border-color:var(--color-error);box-shadow:0 0 0 3px rgba(var(--color-error),.2)}._iconLeft_1gdyv_54,._iconRight_1gdyv_55{position:absolute;display:flex;align-items:center;color:var(--color-text-muted);pointer-events:none;font-size:1rem}._iconLeft_1gdyv_54{left:var(--space-3)}._iconRight_1gdyv_55{right:var(--space-3)}._hasIconLeft_1gdyv_72{padding-left:calc(var(--space-3) * 2 + 1rem)}._hasIconRight_1gdyv_76{padding-right:calc(var(--space-3) * 2 + 1rem)}._disabled_1gdyv_80{opacity:.5}._textarea_fomu3_1{font-family:var(--font-sans);font-size:var(--text-base);font-weight:var(--weight-regular);color:var(--color-text);background:var(--input-bg, var(--color-bg));border:1.5px solid var(--input-border, var(--color-border));border-radius:var(--input-radius, var(--radius-md));padding:var(--space-2) var(--space-3);outline:none;resize:vertical;min-height:100px;transition:border-color var(--duration-fast) var(--ease-default),box-shadow var(--duration-fast) var(--ease-default)}._textarea_fomu3_1::placeholder{color:var(--color-text-subtle)}._textarea_fomu3_1:focus{border-color:var(--input-border-focus, var(--color-primary));box-shadow:var(--focus-ring)}._textarea_fomu3_1:disabled{opacity:.5;cursor:not-allowed;background:var(--color-neutral-100)}._error_fomu3_33{border-color:var(--color-error)}._fullWidth_fomu3_37{width:100%}._wrapper_13qfs_1{position:relative;display:inline-block}._fullWidth_13qfs_6,._fullWidth_13qfs_6 ._select_13qfs_7{width:100%}._select_13qfs_7{font-family:var(--font-sans);font-size:var(--text-base);font-weight:var(--weight-regular);color:var(--color-text);background:var(--input-bg, var(--color-bg));border:1.5px solid var(--input-border, var(--color-border));border-radius:var(--input-radius, var(--radius-md));padding:var(--space-2) var(--space-8) var(--space-2) var(--space-3);outline:none;cursor:pointer;-moz-appearance:none;appearance:none;-webkit-appearance:none;width:100%;transition:border-color var(--duration-fast) var(--ease-default),box-shadow var(--duration-fast) var(--ease-default)}._select_13qfs_7:focus{border-color:var(--input-border-focus, var(--color-primary));box-shadow:var(--focus-ring)}._select_13qfs_7:disabled{opacity:.5;cursor:not-allowed;background:var(--color-neutral-100)}._error_13qfs_41{border-color:var(--color-error)}._arrow_13qfs_45{position:absolute;right:var(--space-3);top:50%;transform:translateY(-50%);pointer-events:none;color:var(--color-text-muted);font-size:.85rem}._wrapper_199wu_1{display:inline-flex;align-items:center;gap:var(--space-2);cursor:pointer;-webkit-user-select:none;user-select:none}._disabled_199wu_9{opacity:.5;cursor:not-allowed}._input_199wu_15{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}._box_199wu_24{flex-shrink:0;width:1.125rem;height:1.125rem;border:1.5px solid var(--color-border-strong);border-radius:var(--radius-sm);background:var(--color-bg);display:flex;align-items:center;justify-content:center;transition:border-color var(--duration-fast) var(--ease-default),background var(--duration-fast) var(--ease-default)}._box_199wu_24:after{content:"";display:block;width:.3rem;height:.55rem;border:2px solid #fff;border-top:none;border-left:none;transform:rotate(45deg) translateY(-1px);opacity:0;transition:opacity var(--duration-fast) var(--ease-default)}._input_199wu_15:checked+._box_199wu_24{background:var(--color-primary);border-color:var(--color-primary)}._input_199wu_15:checked+._box_199wu_24:after{opacity:1}._input_199wu_15:focus-visible+._box_199wu_24{box-shadow:var(--focus-ring);border-color:var(--color-primary)}._error_199wu_69 ._box_199wu_24{border-color:var(--color-error)}._label_199wu_73{font-family:var(--font-sans);font-size:var(--text-base);color:var(--color-text);line-height:var(--leading-normal)}._wrapper_1yn7j_1{display:inline-flex;align-items:center;gap:var(--space-2);cursor:pointer;-webkit-user-select:none;user-select:none}._disabled_1yn7j_9{opacity:.5;cursor:not-allowed}._input_1yn7j_14{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}._track_1yn7j_23{flex-shrink:0;position:relative;display:inline-block;background:var(--color-border-strong);border-radius:var(--radius-full);transition:background var(--duration-fast) var(--ease-default)}._input_1yn7j_14:checked~._track_1yn7j_23{background:var(--color-primary)}._input_1yn7j_14:focus-visible~._track_1yn7j_23{box-shadow:var(--focus-ring)}._thumb_1yn7j_41{position:absolute;top:50%;transform:translateY(-50%);background:#fff;border-radius:var(--radius-full);box-shadow:var(--shadow-xs);transition:left var(--duration-fast) var(--ease-default)}._sm_1yn7j_52 ._track_1yn7j_23{width:2rem;height:1.1rem}._sm_1yn7j_52 ._thumb_1yn7j_41{width:.8rem;height:.8rem;left:.15rem}._sm_1yn7j_52 ._input_1yn7j_14:checked~._track_1yn7j_23 ._thumb_1yn7j_41{left:calc(100% - .8rem - .15rem)}._md_1yn7j_67 ._track_1yn7j_23{width:2.5rem;height:1.375rem}._md_1yn7j_67 ._thumb_1yn7j_41{width:1rem;height:1rem;left:.2rem}._md_1yn7j_67 ._input_1yn7j_14:checked~._track_1yn7j_23 ._thumb_1yn7j_41{left:calc(100% - 1.2rem)}._lg_1yn7j_82 ._track_1yn7j_23{width:3rem;height:1.625rem}._lg_1yn7j_82 ._thumb_1yn7j_41{width:1.2rem;height:1.2rem;left:.2rem}._lg_1yn7j_82 ._input_1yn7j_14:checked~._track_1yn7j_23 ._thumb_1yn7j_41{left:calc(100% - 1.4rem)}._label_1yn7j_97{font-family:var(--font-sans);font-size:var(--text-base);color:var(--color-text);line-height:var(--leading-normal)}._field_14vgz_1{display:flex;flex-direction:column;gap:var(--space-1)}._label_14vgz_7{font-family:var(--font-sans);font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--color-text);line-height:var(--leading-normal)}._required_14vgz_15{color:var(--color-error)}._control_14vgz_19{display:flex;flex-direction:column}._hint_14vgz_24{font-family:var(--font-sans);font-size:var(--text-sm);color:var(--color-text-muted);margin:0;line-height:var(--leading-normal)}._error_14vgz_32{font-family:var(--font-sans);font-size:var(--text-sm);color:var(--color-error);margin:0;line-height:var(--leading-normal)}._badge_107ff_1{display:inline-flex;align-items:center;gap:var(--space-1);border-radius:var(--badge-radius, var(--radius-full));font-family:var(--font-sans);font-weight:var(--weight-medium);line-height:1;white-space:nowrap}._sm_107ff_13{padding:.3rem var(--space-2);font-size:var(--text-xs)}._md_107ff_18{padding:.25rem var(--space-2);font-size:var(--text-sm)}._default_107ff_24{background:var(--color-neutral-100);color:var(--color-text-muted)}._primary_107ff_29{background:var(--badge-primary-bg, var(--color-primary-light));color:var(--badge-primary-text, var(--color-primary))}._success_107ff_34{background:var(--color-success-light);color:var(--color-success)}._warning_107ff_39{background:var(--color-warning-light);color:var(--color-warning)}._error_107ff_44{background:var(--color-error-light);color:var(--color-error)}._info_107ff_49{background:var(--color-info-light);color:var(--color-info)}._dot_107ff_55{display:inline-block;width:.5rem;height:.5rem;border-radius:var(--radius-full)}._dot-default_107ff_62{background:var(--color-neutral-400)}._dot-primary_107ff_66{background:var(--color-primary)}._dot-success_107ff_70{background:var(--color-success)}._dot-warning_107ff_74{background:var(--color-warning)}._dot-error_107ff_78{background:var(--color-error)}._dot-info_107ff_82{background:var(--color-info)}._alert_180sy_1{display:flex;align-items:flex-start;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);border-left:4px solid;font-family:var(--font-sans)}._info_180sy_11{background:var(--color-info-light);border-color:var(--color-info);color:var(--color-text)}._success_180sy_17{background:var(--color-success-light);border-color:var(--color-success);color:var(--color-text)}._warning_180sy_23{background:var(--color-warning-light);border-color:var(--color-warning);color:var(--color-text)}._error_180sy_29{background:var(--color-error-light);border-color:var(--color-error);color:var(--color-text)}._icon_180sy_35{flex-shrink:0;font-size:1.25rem;display:flex;margin-top:.05rem}._info_180sy_11 ._icon_180sy_35{color:var(--color-info)}._success_180sy_17 ._icon_180sy_35{color:var(--color-success)}._warning_180sy_23 ._icon_180sy_35{color:var(--color-warning)}._error_180sy_29 ._icon_180sy_35{color:var(--color-error)}._body_180sy_58{flex:1;display:flex;flex-direction:column;gap:var(--space-1)}._title_180sy_65{font-weight:var(--weight-semibold);font-size:var(--text-sm);margin:0;color:var(--color-text)}._message_180sy_72{font-size:var(--text-sm);color:var(--color-text-muted);line-height:var(--leading-normal)}._close_180sy_78{flex-shrink:0;background:none;border:none;cursor:pointer;color:var(--color-text-muted);font-size:.875rem;padding:0;line-height:1;display:flex;align-items:center;justify-content:center;opacity:.6;transition:opacity var(--duration-fast) var(--ease-default)}._close_180sy_78:hover{opacity:1}@keyframes _spin_vxqk3_11{0%{transform:rotate(0)}to{transform:rotate(360deg)}}._spinner_vxqk3_11{animation:_spin_vxqk3_11 .8s linear infinite;color:var(--color-primary)}._xs_vxqk3_17{width:.75rem;height:.75rem}._sm_vxqk3_22{width:1rem;height:1rem}._md_vxqk3_27{width:1.5rem;height:1.5rem}._lg_vxqk3_32{width:2rem;height:2rem}._xl_vxqk3_37{width:3rem;height:3rem}._track_vxqk3_42{stroke:currentColor;opacity:.2}._arc_vxqk3_47{stroke:currentColor;stroke-dasharray:40 100}._wrapper_jkqgi_1{display:flex;flex-direction:column;gap:var(--space-1);width:100%}._header_jkqgi_8{display:flex;justify-content:space-between;align-items:baseline}._label_jkqgi_14{font-family:var(--font-sans);font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--color-text)}._value_jkqgi_21{font-family:var(--font-sans);font-size:var(--text-sm);color:var(--color-text-muted)}._track_jkqgi_27{width:100%;background:var(--color-neutral-200);border-radius:var(--radius-full);overflow:hidden}._sm_jkqgi_34{height:4px}._md_jkqgi_38{height:8px}._lg_jkqgi_42{height:12px}._bar_jkqgi_46{height:100%;border-radius:var(--radius-full);transition:width var(--duration-base) var(--ease-out)}._primary_jkqgi_52{background:var(--color-primary)}._success_jkqgi_56{background:var(--color-success)}._warning_jkqgi_60{background:var(--color-warning)}._error_jkqgi_64{background:var(--color-error)}._card_mck7p_1{background:var(--card-bg, var(--color-surface));border-radius:var(--card-radius, var(--radius-lg));overflow:hidden;transition:box-shadow var(--duration-fast) var(--ease-default)}._bordered_mck7p_8{border:1px solid var(--card-border, var(--color-border))}._shadow_mck7p_12{box-shadow:var(--card-shadow, var(--shadow-sm))}._padded_mck7p_16{padding:var(--space-5)}._hoverable_mck7p_20:hover{box-shadow:var(--shadow-md);transform:translateY(-1px)}._header_mck7p_25{padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--color-border);display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)}._body_mck7p_34{padding:var(--space-5)}._footer_mck7p_38{padding:var(--space-4) var(--space-5);border-top:1px solid var(--color-border);display:flex;align-items:center;gap:var(--space-2)}@keyframes _fadeIn_w87fm_1{0%{opacity:0}to{opacity:1}}@keyframes _slideUp_w87fm_1{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}._backdrop_w87fm_23{position:fixed;top:0;right:0;bottom:0;left:0;background:var(--color-overlay, rgba(0, 0, 0, .45));display:flex;align-items:center;justify-content:center;z-index:var(--z-modal, 400);padding:var(--space-4);animation:_fadeIn_w87fm_1 var(--duration-fast) var(--ease-out)}._dialog_w87fm_35{background:var(--color-surface);border-radius:var(--radius-xl);box-shadow:var(--shadow-xl);display:flex;flex-direction:column;max-height:90vh;width:100%;outline:none;animation:_slideUp_w87fm_1 var(--duration-base) var(--ease-out);overflow:hidden}._sm_w87fm_49{max-width:28rem}._md_w87fm_53{max-width:36rem}._lg_w87fm_57{max-width:48rem}._xl_w87fm_61{max-width:64rem}._full_w87fm_65{max-width:100%;max-height:100vh;border-radius:0}._header_w87fm_72{display:flex;align-items:center;justify-content:space-between;padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--color-border);flex-shrink:0}._title_w87fm_81{font-family:var(--font-sans);font-size:var(--text-lg);font-weight:var(--weight-semibold);color:var(--color-text)}._closeBtn_w87fm_88{background:none;border:none;cursor:pointer;color:var(--color-text-muted);font-size:1rem;padding:var(--space-1);border-radius:var(--radius-sm);display:flex;align-items:center;transition:color var(--duration-fast) var(--ease-default)}._closeBtn_w87fm_88:hover{color:var(--color-text)}._closeBtn_w87fm_88:focus-visible{outline:none;box-shadow:var(--focus-ring)}._body_w87fm_111{padding:var(--space-5);overflow-y:auto;flex:1}._footer_w87fm_118{padding:var(--space-4) var(--space-5);border-top:1px solid var(--color-border);display:flex;align-items:center;justify-content:flex-end;gap:var(--space-2);flex-shrink:0}._tabs_18z4f_1{display:flex;flex-direction:column}._tabList_18z4f_6{display:flex;border-bottom:2px solid var(--color-border);gap:0;overflow-x:auto}._tab_18z4f_1{padding:var(--space-2) var(--space-4);font-family:var(--font-sans);font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--color-text-muted);background:none;border:none;border-bottom:2px solid transparent;margin-bottom:-2px;cursor:pointer;white-space:nowrap;transition:color var(--duration-fast) var(--ease-default),border-color var(--duration-fast) var(--ease-default)}._tab_18z4f_1:hover:not(:disabled){color:var(--color-text)}._tab_18z4f_1:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--radius-sm) var(--radius-sm) 0 0}._tab_18z4f_1._active_18z4f_40{color:var(--color-primary);border-bottom-color:var(--color-primary)}._tab_18z4f_1:disabled{opacity:.4;cursor:not-allowed}._panel_18z4f_50{padding:var(--space-4) 0;outline:none}._navbar_1m6ra_1{background:var(--color-surface);border-bottom:1px solid var(--color-border);width:100%;position:sticky;top:0;z-index:var(--z-sticky, 300)}._transparent_1m6ra_10{background:transparent;border-color:transparent}._inner_1m6ra_15{max-width:1280px;margin:0 auto;padding:0 var(--space-5);height:4rem;display:flex;align-items:center;gap:var(--space-6)}._brand_1m6ra_25{flex-shrink:0}._nav_1m6ra_1{display:flex;align-items:center;gap:var(--space-1);flex:1}._actions_1m6ra_36{display:flex;align-items:center;gap:var(--space-2);margin-left:auto}._navItem_1m6ra_43{font-family:var(--font-sans);font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--color-text-muted);text-decoration:none;padding:var(--space-1) var(--space-3);border-radius:var(--radius-md);transition:color var(--duration-fast) var(--ease-default),background var(--duration-fast) var(--ease-default)}._navItem_1m6ra_43:hover{color:var(--color-text);background:var(--color-neutral-100)}._navItem_1m6ra_43._active_1m6ra_60{color:var(--color-primary);background:var(--color-primary-light)}._wrapper_1wt6l_1{width:100%;overflow-x:auto;border:1px solid var(--color-border);border-radius:var(--radius-lg)}._table_1wt6l_8{width:100%;border-collapse:collapse;font-family:var(--font-sans);font-size:var(--text-sm)}._thead_1wt6l_16{background:var(--color-neutral-50)}._headerCell_1wt6l_20{text-align:left;font-weight:var(--weight-semibold);color:var(--color-text-muted);padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--color-border);white-space:nowrap}._stickyHeader_1wt6l_29 ._thead_1wt6l_16 ._headerCell_1wt6l_20{position:sticky;top:0;background:var(--color-neutral-50);z-index:1}._sortable_1wt6l_36{cursor:pointer;-webkit-user-select:none;user-select:none}._sortable_1wt6l_36:hover{background:var(--color-neutral-100)}._headerContent_1wt6l_45{display:inline-flex;align-items:center;gap:var(--space-1)}._sortIcon_1wt6l_51{font-size:.75rem;color:var(--color-text-subtle)}._cell_1wt6l_57{padding:var(--space-3) var(--space-4);color:var(--color-text);border-bottom:1px solid var(--color-border);vertical-align:middle}._align-left_1wt6l_65{text-align:left}._align-center_1wt6l_69{text-align:center}._align-right_1wt6l_73{text-align:right}._row_1wt6l_78:last-child ._cell_1wt6l_57{border-bottom:none}._row_1wt6l_78:hover ._cell_1wt6l_57{background:var(--color-neutral-50)}._clickable_1wt6l_86{cursor:pointer}._selected_1wt6l_90 ._cell_1wt6l_57{background:var(--color-primary-light)}._striped_1wt6l_95 tbody tr:nth-child(2n) ._cell_1wt6l_57{background:var(--color-neutral-50)}._dense_1wt6l_99 ._cell_1wt6l_57,._dense_1wt6l_99 ._headerCell_1wt6l_20{padding:var(--space-2) var(--space-3)}._bordered_1wt6l_104 ._cell_1wt6l_57,._bordered_1wt6l_104 ._headerCell_1wt6l_20{border:1px solid var(--color-border)}._wrapper_ocp5v_1{position:relative;display:inline-flex;align-items:center;justify-content:center;overflow:visible;flex-shrink:0}._circle_ocp5v_11{border-radius:var(--radius-full)}._square_ocp5v_15{border-radius:var(--radius-md)}._xs_ocp5v_20{width:1.5rem;height:1.5rem;font-size:.55rem}._sm_ocp5v_26{width:2rem;height:2rem;font-size:.7rem}._md_ocp5v_32{width:2.5rem;height:2.5rem;font-size:.875rem}._lg_ocp5v_38{width:3.5rem;height:3.5rem;font-size:1.25rem}._xl_ocp5v_44{width:5rem;height:5rem;font-size:1.75rem}._img_ocp5v_50{width:100%;height:100%;object-fit:cover;border-radius:inherit}._initials_ocp5v_57{font-family:var(--font-sans);font-weight:var(--weight-semibold);color:var(--color-primary-contrast);background:var(--color-primary);border-radius:inherit;width:100%;height:100%;display:flex;align-items:center;justify-content:center;text-transform:uppercase}._status_ocp5v_72{position:absolute;bottom:2%;right:2%;width:25%;height:25%;min-width:8px;min-height:8px;border-radius:var(--radius-full);border:2px solid var(--color-bg)}._status-online_ocp5v_84{background:var(--color-success)}._status-away_ocp5v_88{background:var(--color-warning)}._status-busy_ocp5v_92{background:var(--color-error)}._status-offline_ocp5v_96{background:var(--color-neutral-400)}._horizontal_3x1p9_1{border:none;border-top:1px solid var(--color-border);margin:var(--space-4) 0}._vertical_3x1p9_7{display:inline-block;width:1px;height:1em;background:var(--color-border);vertical-align:middle;margin:0 var(--space-2)}._withLabel_3x1p9_16{display:flex;align-items:center;gap:var(--space-3);margin:var(--space-4) 0}._line_3x1p9_23{flex:1;height:1px;background:var(--color-border)}._labelText_3x1p9_29{font-family:var(--font-sans);font-size:var(--text-xs);font-weight:var(--weight-medium);color:var(--color-text-subtle);white-space:nowrap;text-transform:uppercase;letter-spacing:.05em}._wrapper_k3ofb_1{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:var(--space-12, 3rem) var(--space-6);gap:var(--space-3)}._illustration_k3ofb_11{font-size:4rem;color:var(--color-neutral-300);margin-bottom:var(--space-2)}._title_k3ofb_17{font-family:var(--font-sans);font-size:var(--text-lg);font-weight:var(--weight-semibold);color:var(--color-text);margin:0}._description_k3ofb_25{font-family:var(--font-sans);font-size:var(--text-base);color:var(--color-text-muted);margin:0;max-width:32rem;line-height:var(--leading-relaxed)}._action_k3ofb_34{margin-top:var(--space-2)}._sidebar_1hxle_1{display:flex;flex-direction:column;width:var(--sidebar-width, 240px);min-height:100vh;background-color:var(--color-surface);border-right:1px solid var(--color-border);transition:width var(--duration-slow) var(--ease-default);overflow:hidden;flex-shrink:0}._collapsed_1hxle_13{width:64px}._brand_1hxle_17{padding:var(--space-4) var(--space-4) var(--space-2);border-bottom:1px solid var(--color-border);flex-shrink:0;overflow:hidden}._nav_1hxle_24{flex:1;overflow-y:auto;padding:var(--space-2) var(--space-2);display:flex;flex-direction:column;gap:var(--space-1)}._bottom_1hxle_33{flex-shrink:0;border-top:1px solid var(--color-border);display:flex;flex-direction:column}._footer_1hxle_40{padding:var(--space-3) var(--space-4);overflow:hidden}._collapseBtn_1hxle_45{display:flex;align-items:center;justify-content:center;width:100%;padding:var(--space-2);background:none;border:none;cursor:pointer;color:var(--color-text-muted);font-size:var(--text-base);transition:color var(--duration-fast) var(--ease-default),background-color var(--duration-fast) var(--ease-default);outline:none}._collapseBtn_1hxle_45:hover{color:var(--color-text);background-color:var(--color-neutral-100)}._collapseBtn_1hxle_45:focus-visible{box-shadow:var(--focus-ring)}._item_1kjfi_1{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);border:none;background:none;color:var(--color-text-muted);font-family:var(--font-sans);font-size:var(--text-sm);font-weight:var(--weight-medium);text-decoration:none;cursor:pointer;width:100%;text-align:left;white-space:nowrap;transition:background-color var(--duration-fast) var(--ease-default),color var(--duration-fast) var(--ease-default);outline:none}._item_1kjfi_1:hover{background-color:var(--color-neutral-100);color:var(--color-text)}._item_1kjfi_1:focus-visible{box-shadow:var(--focus-ring)}._item_1kjfi_1._active_1kjfi_33{background-color:var(--color-primary-light);color:var(--color-primary);font-weight:var(--weight-semibold)}._item_1kjfi_1._collapsed_1kjfi_39{justify-content:center;padding:var(--space-2)}._icon_1kjfi_44{display:inline-flex;align-items:center;flex-shrink:0;font-size:1.1em}._label_1kjfi_51{flex:1;overflow:hidden;text-overflow:ellipsis}._toast_hjvoc_1{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);font-family:var(--font-sans);font-size:var(--text-sm);font-weight:var(--weight-medium);min-width:280px;max-width:400px;color:#fff;animation:_slideIn_hjvoc_1 var(--duration-slow) var(--ease-out)}@keyframes _slideIn_hjvoc_1{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}._success_hjvoc_28{background-color:var(--color-success)}._error_hjvoc_32{background-color:var(--color-error)}._warning_hjvoc_36{background-color:var(--color-warning)}._info_hjvoc_40{background-color:var(--color-info)}._icon_hjvoc_44{flex-shrink:0;font-size:var(--text-base);line-height:1}._message_hjvoc_50{flex:1;line-height:var(--leading-normal)}._close_hjvoc_55{flex-shrink:0;background:none;border:none;color:inherit;cursor:pointer;font-size:var(--text-sm);opacity:.8;padding:0;line-height:1;border-radius:var(--radius-sm);transition:opacity var(--duration-fast) var(--ease-default)}._close_hjvoc_55:hover{opacity:1}._close_hjvoc_55:focus-visible{box-shadow:var(--focus-ring);outline:none}._container_1a1az_1{position:fixed;z-index:var(--z-toast);display:flex;flex-direction:column;gap:var(--space-2);pointer-events:none;padding:var(--space-4)}._container_1a1az_1>*{pointer-events:all}._top_right_1a1az_16{top:0;right:0;align-items:flex-end}._top_left_1a1az_22{top:0;left:0;align-items:flex-start}._bottom_right_1a1az_28{bottom:0;right:0;align-items:flex-end;flex-direction:column-reverse}._bottom_left_1a1az_35{bottom:0;left:0;align-items:flex-start;flex-direction:column-reverse}._top_center_1a1az_42{top:0;left:50%;transform:translate(-50%);align-items:center}._bottom_center_1a1az_49{bottom:0;left:50%;transform:translate(-50%);align-items:center;flex-direction:column-reverse}._root_1m7ae_1{display:inline-flex;align-items:center;gap:var(--space-2);flex-wrap:wrap}._sm_1m7ae_9 ._btn_1m7ae_9{width:28px;height:28px;font-size:var(--text-xs)}._md_1m7ae_15 ._btn_1m7ae_9{width:36px;height:36px;font-size:var(--text-sm)}._lg_1m7ae_21 ._btn_1m7ae_9{width:44px;height:44px;font-size:var(--text-base)}._btn_1m7ae_9{display:inline-flex;align-items:center;justify-content:center;border:1.5px solid var(--color-border);border-radius:var(--radius-md);background-color:var(--color-surface);color:var(--color-text-muted);font-family:var(--font-sans);font-weight:var(--weight-semibold);cursor:pointer;transition:background-color var(--duration-fast) var(--ease-default),border-color var(--duration-fast) var(--ease-default),color var(--duration-fast) var(--ease-default);outline:none}._btn_1m7ae_9:hover:not(:disabled){border-color:var(--color-primary);color:var(--color-primary);background-color:var(--color-primary-light)}._btn_1m7ae_9:focus-visible{box-shadow:var(--focus-ring)}._btn_1m7ae_9._active_1m7ae_55{background-color:var(--color-primary);border-color:var(--color-primary);color:var(--color-primary-contrast)}._disabled_1m7ae_61{opacity:.5;pointer-events:none}._selectedLabel_1m7ae_66{font-family:var(--font-sans);font-size:var(--text-sm);color:var(--color-text-muted);margin-left:var(--space-2);font-style:italic}
+/* __APP_CHROME__ */
+/**
+ * Estilos de formulario alineados al shell de app (mismas clases que en ia-agents).
+ * Variables: heredan de .theme-conatel / .theme-vivion (ThemeProvider).
+ * Importar después de dist/index.css si se empaqueta aparte; en build se concatena a index.css.
+ */
+
+/**
+ * Alias con mismos nombres que apps tipo ia-agents (globals.css).
+ * El ThemeProvider en runtime (index.umd) define --color-brand / --color-brand-light pero NO --color-primary.
+ * Sin estos alias, bordes/fondos/accent quedan inválidos → inputs “sin caja”, paneles transparentes.
+ */
+.theme-conatel,
+.theme-vivion {
+  font-family: var(--font-sans), system-ui, -apple-system, sans-serif;
+  color: var(--color-text);
+  -webkit-font-smoothing: antialiased;
+  --color-danger: var(--color-error);
+  --color-primary: var(--color-brand);
+  --color-primary-light: var(--color-brand-light);
+  --color-bg-primary: var(--color-surface);
+  --color-bg-tertiary: var(--color-surface);
+  --color-text-primary: var(--color-text);
+  --color-text-secondary: var(--color-text-muted);
+  --color-accent-bg: var(--color-brand-light);
+  --color-bg-hover: var(--color-bg-alt);
+}
+
+/* Login / cambio clave: label arriba del campo (como text-xs + font-semibold en la app) */
+.form-label-app {
+  font-family: var(--font-sans), system-ui, sans-serif;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  display: block;
+  margin-bottom: 0.5rem;
+  font-weight: 600;
+  color: var(--color-text-primary);
+}
+
+/* Settings / catálogo: label de selects (como 0.8125rem + text-secondary en ia-agents) */
+.form-label-dropdown {
+  font-family: var(--font-sans), system-ui, sans-serif;
+  font-size: 0.8125rem;
+  line-height: 1.25rem;
+  display: block;
+  margin-bottom: 0.25rem;
+  font-weight: 600;
+  color: var(--color-text-secondary);
+}
+
+.form-input,
+.form-select {
+  width: 100%;
+  padding: 0.75rem 1rem;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  font-family: var(--font-sans), system-ui, sans-serif;
+  font-size: 1rem;
+  transition:
+    border-color var(--duration-fast) var(--ease-default),
+    box-shadow var(--duration-fast) var(--ease-default),
+    background-color var(--duration-fast) var(--ease-default);
+  /* Superficie blanca de campo (como ia-agents --color-bg-tertiary en inputs) */
+  background-color: var(--color-bg-tertiary);
+  color: var(--color-text);
+  box-sizing: border-box;
+}
+
+button.form-select {
+  text-align: left;
+  cursor: pointer;
+  appearance: none;
+  -webkit-appearance: none;
+  font: inherit;
+  line-height: 1.25;
+  margin: 0;
+  /* Misma “altura de control” que .form-input (padding 0.75rem + texto ~1rem) */
+  min-height: 2.75rem;
+  align-items: center;
+}
+
+/* Cancelar tipo modal/settings: borde rojo (outline danger) */
+button.app-btn-outline-danger {
+  border: 1px solid var(--color-error) !important;
+  color: var(--color-error) !important;
+  background: transparent !important;
+}
+
+button.app-btn-outline-danger:hover:not(:disabled) {
+  background: var(--color-error-light) !important;
+}
+
+.required-mark,
+.form-label-app .required-mark {
+  color: var(--color-danger, var(--color-error));
+  font-weight: 600;
+}
+
+.form-input::placeholder {
+  color: var(--color-text-subtle);
+}
+
+.form-input[type='checkbox'],
+.form-input[type='radio'],
+input[type='checkbox'].form-input,
+input[type='radio'].form-input {
+  width: auto;
+  min-width: 1rem;
+  padding: 0;
+  border: none;
+  background: transparent;
+  accent-color: var(--color-primary);
+}
+
+.form-input:focus,
+.form-select:focus {
+  outline: none;
+  border-color: var(--color-primary);
+  box-shadow: var(--focus-ring);
+}
+
+.form-select:hover:not(:disabled) {
+  background-color: var(--color-bg-alt);
+}
+
+.form-select:disabled,
+.form-input:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.input-password-wrap:focus-within {
+  outline: none;
+  border-color: var(--color-primary);
+  box-shadow: var(--focus-ring);
+}
+
+.input-with-icon {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.input-with-icon .material-symbols-outlined {
+  position: absolute;
+  left: 1rem;
+  color: var(--color-text-muted);
+  font-size: 1.25rem;
+  pointer-events: none;
+}
+
+.input-with-icon .form-input {
+  padding-left: 3rem;
+}
+
+.input-with-icon .form-select {
+  padding-left: 3rem !important;
+}
+
+.form-group {
+  margin-bottom: var(--space-4, 1rem);
+  text-align: left;
+}
+
+/* Ancho completo en columnas / flex (evita inputs “angostos”) */
+.form-group .input-with-icon,
+.form-group .input-password-wrap.form-input {
+  width: 100%;
+  max-width: 100%;
+}
+
+.form-group .input-with-icon .form-input {
+  min-width: 0;
+}
+
+.btn-lg {
+  padding: 1rem;
+  font-size: 1.125rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+/* Panel lista desplegable: fondo opaco y stacking (evita “fantasma” sobre contenido siguiente) */
+.form-dropdown-panel {
+  background-color: var(--color-bg-primary);
+  z-index: var(--z-dropdown, 200);
+  isolation: isolate;
+}
+
+/**
+ * Checkbox (lib en index.umd): el tilde ::after usa rotate(45deg) translateY(-1px) y queda descentrado.
+ * Centrado con position absolute + inset 0 + margin auto. !important gana al CSS module (. _box_*:after).
+ */
+label:has(> input[type='checkbox'][class*='_input_']) > span[class*='_box_'] {
+  position: relative !important;
+}
+
+label:has(> input[type='checkbox'][class*='_input_']) > span[class*='_box_']::after {
+  position: absolute !important;
+  inset: 0 !important;
+  margin: auto !important;
+  display: block !important;
+  width: 0.3rem !important;
+  height: 0.55rem !important;
+  border: 2px solid #fff !important;
+  border-top: none !important;
+  border-left: none !important;
+  transform: rotate(45deg) !important;
+  transform-origin: center center !important;
+}

package/dist/metrics.umd.js

@@ -31,6 +31,7 @@ var ReactLibraryMetrics = (() => {
   var {
     useContext,
     useEffect,
+    useLayoutEffect,
     useMemo,
     useState,
     useRef,

package/dist/status.umd.js

@@ -30,6 +30,7 @@ var ReactLibraryStatus = (() => {
   var {
     useContext,
     useEffect,
+    useLayoutEffect,
     useMemo,
     useState,
     useRef,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conatel-sa/react-ui",
-  "version": "0.2.4",
+  "version": "0.2.5",
   "description": "Biblioteca de componentes React para productos Conatel y Vivion. Incluye más de 20 componentes UI con theming. Subpaquetes opcionales: ./icons, ./forms, ./cards, ./dialogs, ./metrics, ./status.",
   "main": "dist/index.umd.js",
   "module": "dist/index.mjs",