@elcrm/form 0.1.1 → 0.1.3

package/dist/assets/styles/Tabs.module.css

@@ -0,0 +1 @@
+@layer elcrm-form{.fbr{align-items:stretch;overflow:hidden;gap:0!important;padding:0!important}.fbr:focus-within{background:var(--field-background)!important;border-color:var(--field-border)!important;box-shadow:none!important}.fbr[data-disabled=true]{opacity:.85;cursor:not-allowed}.fbr>div{min-width:0;min-height:var(--field-height);flex:1;padding:0;line-height:normal;overflow:visible}.fbi{width:100%;min-height:var(--field-height);flex-wrap:nowrap;align-items:stretch;display:flex}.fbt{box-sizing:border-box;justify-content:center;align-items:center;gap:var(--field-icon-gap);min-width:0;min-height:var(--field-height);padding:0 var(--field-padding-inline);border:0;border-right:var(--field-tabs-divider);color:var(--field-color);font:inherit;font-size:var(--control-font-size);text-align:center;cursor:pointer;background:0 0;border-radius:0;outline:none;flex:1 1 0;margin:0;font-weight:500;line-height:1.2;transition:background-color .16s,color .16s,opacity .16s;display:inline-flex}.fbt:last-child{border-right:0}.fbt:hover:not(:disabled):not(.fba){background:var(--field-background-focus)}.fbt:focus-visible{box-shadow:inset 0 0 0 2px var(--field-focus-ring);background:var(--field-background-focus);z-index:1;position:relative}.fbt:first-child:focus-visible{border-radius:var(--field-radius) 0 0 var(--field-radius)}.fbt:last-child:focus-visible{border-radius:0 var(--field-radius) var(--field-radius) 0}.fbt:only-child:focus-visible{border-radius:var(--field-radius)}.fbt:disabled{color:var(--field-color-disabled);cursor:not-allowed;opacity:.65}.fba{background:var(--field-tabs-active-bg);color:var(--field-color)}.fba:hover:not(:disabled){background:var(--field-tabs-active-bg)}.fbo{width:var(--field-icon-size);height:var(--field-icon-size);color:var(--field-icon-color);flex:none;justify-content:center;align-items:center;line-height:0;display:inline-flex}.fbo svg{width:var(--field-icon-size);height:var(--field-icon-size);display:block}.fba .fbo{color:var(--field-color)}.fbl{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}}

package/dist/assets/styles/Tags.module.css

@@ -0,0 +1 @@
+@layer elcrm-form{.fgr>div,.fgr .fgi{flex-wrap:wrap;align-items:center;gap:6px;width:100%;min-height:0;padding:0;line-height:normal;display:flex;overflow:visible}.fgi{flex:1;min-width:0}.fgc{background:var(--field-background-focus);border-radius:999px;align-items:center;gap:2px;max-width:100%;padding:0 6px;line-height:1.35;display:inline-flex}.fgl{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.fgm{color:inherit;cursor:pointer;opacity:.65;background:0 0;border:0;padding:0 2px;font-size:16px;line-height:1}.fgm:hover{opacity:1}.fgn{min-width:80px;color:inherit;font:inherit;background:0 0;border:0;outline:none;flex:80px;margin:0;padding:0}}

package/dist/assets/styles/Time.module.css

@@ -0,0 +1 @@
+@layer elcrm-form{.ftr>div{text-wrap:nowrap;align-items:center;min-width:0;display:flex;overflow:visible}.ftr .fti{justify-content:flex-start;align-items:center;gap:4px;width:100%;min-width:0;display:flex}.ftr.ftc .fti{justify-content:center}.ftr .fts{opacity:.65;-webkit-user-select:none;user-select:none;flex:none;padding:0;font-weight:500;transform:translateY(-1px)}.ftr .ftb{color:var(--field-icon-color);cursor:pointer;background:0 0;border:0;outline:none;flex:none;justify-content:center;align-items:center;margin:0;padding:0;line-height:0;display:inline-flex}.ftr .ftb:hover:not(:disabled){color:var(--field-color)}.ftr .ftb:focus-visible{box-shadow:var(--field-focus-shadow);border-radius:6px}.ftr .ftb:disabled{cursor:not-allowed;opacity:.5}.ftr .ftp{box-sizing:border-box;width:2.25ch;min-width:2.25ch;color:inherit;font:inherit;font-variant-numeric:tabular-nums;line-height:inherit;text-align:center;cursor:text;scrollbar-width:none;-ms-overflow-style:none;background:0 0;border:0;border-radius:6px;outline:none;flex:none;min-height:0;margin:0;padding:0;overflow:hidden}.ftr .ftp::-webkit-scrollbar{background:0 0;width:0;height:0;display:none}.ftr .ftp[contenteditable=false]{cursor:not-allowed;opacity:.7}.ftr .ftp:empty:before{content:attr(placeholder);color:var(--field-placeholder);opacity:1;font-weight:400}.ftr .ftp:focus:empty:before{content:none}.ftr .ftp:focus-visible{background:0 0}.ftr.ftc .ftp{text-align:center}}

package/dist/core/Field.d.ts

@@ -9,14 +9,30 @@ export type FieldA11y = {
 };
 /** Хук: id и aria-связи текущего Field (внутри обёртки поля) */
 export declare function useFieldA11y(): FieldA11y | null;
+/** Классы корневого блока поля (`data-field`) */
+export type FieldBlokProps = {
+    className?: string[];
+};
+/** Классы и DOM-пропы капсулы контрола */
+export type FieldControlProps = {
+    className?: string[];
+    props?: Record<string, unknown>;
+};
 interface Input {
-    element_blok?: {
-        className?: string[];
-    };
-    element_input?: {
-        className?: string[];
-        props?: Record<string, unknown>;
-    };
+    /**
+     * Классы корневого блока.
+     * @deprecated используйте `blok` (алиас оставлен для совместимости)
+     */
+    element_blok?: FieldBlokProps;
+    /** Классы корневого блока (`data-field`) */
+    blok?: FieldBlokProps;
+    /**
+     * Капсула контрола.
+     * @deprecated используйте `control`
+     */
+    element_input?: FieldControlProps;
+    /** Капсула контрола (border / focus) */
+    control?: FieldControlProps;
     /** Текст подписи поля */
     label?: string;
     /** id контрола (htmlFor у label); иначе генерируется */
@@ -26,8 +42,8 @@ interface Input {
     after?: ReactNode;
     children?: ReactNode;
     error?: string;
-    /** sm | md — плотность (CSS --field-height) */
-    size?: "sm" | "md";
+    /** s | m | l — высота как у кнопки/поиска (`sm`/`md` — алиасы) */
+    size?: "s" | "m" | "l" | "sm" | "md";
 }
-declare const Field: ({ element_blok, element_input, type, label, id: idProp, error, before, after, children, size, }: Input) => import("react/jsx-runtime").JSX.Element;
+declare const Field: ({ element_blok, blok, element_input, control, type, label, id: idProp, error, before, after, children, size, }: Input) => import("react/jsx-runtime").JSX.Element;
 export default Field;

package/dist/core/Field.js

@@ -5,8 +5,8 @@
     var el = document.createElement("style");
     el.id = "elcrm-form-base-styles";
     el.setAttribute("data-elcrm", "form");
-    el.textContent = "._l_2ps0c_4{min-width:var(--field-width);gap:var(--field-block-gap,0);flex-direction:column;margin:0;padding:0;display:flex;position:relative}._l_2ps0c_4[data-size=sm]{--field-height:32px;--control-height:32px;--field-side-padding:10px;--control-side-padding:10px;--control-inner-padding:0 10px;font-size:13px}._l_2ps0c_4>._t_2ps0c_22,._l_2ps0c_4>._f_2ps0c_22,._l_2ps0c_4>._m_2ps0c_22{margin:0}._l_2ps0c_4[data-field=group] ._f_2ps0c_22>div{cursor:pointer;border-bottom:var(--field-border);padding:var(--field-padding);margin:0}._l_2ps0c_4[data-field=group] ._f_2ps0c_22>div:last-child{border-bottom:0}._l_2ps0c_4 [placeholder]:empty:before{content:attr(placeholder);color:var(--field-placeholder);opacity:1;pointer-events:none;font-style:normal;font-weight:400;display:block}._l_2ps0c_4 [placeholder]:focus:before{display:none}._f_2ps0c_22{box-sizing:border-box;align-items:center;gap:var(--field-icon-gap,10px);border:var(--field-border);border-radius:var(--field-radius);background:var(--field-background);color:var(--field-color);padding:var(--control-inner-padding,0 var(--field-side-padding,14px));transition:border-color .16s,box-shadow .16s,background-color .16s,opacity .16s;display:flex;overflow:hidden}._f_2ps0c_22:hover{border-color:var(--field-border-hover,var(--field-border))}._f_2ps0c_22:focus-within{border-color:var(--field-border-focus,var(--field-border));box-shadow:var(--field-focus-shadow,0 0 0 3px var(--field-focus-ring,#0000));background:var(--field-background-focus,var(--field-background))}._f_2ps0c_22._e_2ps0c_78:focus-within{background:var(--field-error-background);color:var(--field-error-color)}._f_2ps0c_22[data-disabled=true]{background:var(--field-background-disabled,var(--field-background));border-color:var(--field-border-disabled,var(--field-border));color:var(--field-color-disabled,var(--field-placeholder));cursor:not-allowed;opacity:.85}._f_2ps0c_22[data-disabled=true]>*{cursor:not-allowed}._f_2ps0c_22>div{min-height:var(--field-height);line-height:calc(var(--field-height) - 2px);font-size:var(--control-font-size,14px);text-wrap:pretty;outline:0;flex:1;margin:0;padding:0}._f_2ps0c_22>div::selection{background:var(--field-selection-bg,#b3d4fc);color:var(--field-selection-color,inherit)}._f_2ps0c_22>:not(div){box-sizing:border-box;height:var(--field-height);min-height:var(--field-height);max-height:var(--field-height);color:var(--field-icon-color,var(--field-placeholder));flex:none;justify-content:center;align-self:center;align-items:center;display:inline-flex}._f_2ps0c_22>:not(div) svg{width:var(--field-icon-size,20px);height:var(--field-icon-size,20px);flex-shrink:0;display:block}._f_2ps0c_22 input::placeholder,._f_2ps0c_22 textarea::placeholder{color:var(--field-placeholder);opacity:1;font-weight:400}._f_2ps0c_22 input::-webkit-input-placeholder{color:var(--field-placeholder);opacity:1;font-weight:400}._f_2ps0c_22 textarea::-webkit-input-placeholder{color:var(--field-placeholder);opacity:1;font-weight:400}._f_2ps0c_22 input::-moz-placeholder{color:var(--field-placeholder);opacity:1;font-weight:400}._f_2ps0c_22 textarea::-moz-placeholder{color:var(--field-placeholder);opacity:1;font-weight:400}._f_2ps0c_22 input:-webkit-autofill{caret-color:var(--field-color);-webkit-text-fill-color:var(--field-color)!important;color:var(--field-color)!important;-webkit-box-shadow:none!important;box-shadow:none!important;font-size:inherit!important;line-height:inherit!important;background-color:#0000!important;background-image:none!important;transition:background-color 99999s ease-out,background-image 99999s ease-out!important}._f_2ps0c_22 input:-webkit-autofill:hover{caret-color:var(--field-color);-webkit-text-fill-color:var(--field-color)!important;color:var(--field-color)!important;-webkit-box-shadow:none!important;box-shadow:none!important;font-size:inherit!important;line-height:inherit!important;background-color:#0000!important;background-image:none!important;transition:background-color 99999s ease-out,background-image 99999s ease-out!important}._f_2ps0c_22 input:-webkit-autofill:focus{caret-color:var(--field-color);-webkit-text-fill-color:var(--field-color)!important;color:var(--field-color)!important;-webkit-box-shadow:none!important;box-shadow:none!important;font-size:inherit!important;line-height:inherit!important;background-color:#0000!important;background-image:none!important;transition:background-color 99999s ease-out,background-image 99999s ease-out!important}._f_2ps0c_22 input:-webkit-autofill:active{caret-color:var(--field-color);-webkit-text-fill-color:var(--field-color)!important;color:var(--field-color)!important;-webkit-box-shadow:none!important;box-shadow:none!important;font-size:inherit!important;line-height:inherit!important;background-color:#0000!important;background-image:none!important;transition:background-color 99999s ease-out,background-image 99999s ease-out!important}._f_2ps0c_22 input:-webkit-autofill{-webkit-background-clip:text!important;background-clip:text!important}._f_2ps0c_22 [contenteditable=true],._f_2ps0c_22 [contenteditable=plaintext-only],._f_2ps0c_22>div{scrollbar-width:none;-ms-overflow-style:none}._f_2ps0c_22 [contenteditable=true]::-webkit-scrollbar{background:0 0;width:0;height:0;display:none}._f_2ps0c_22 [contenteditable=plaintext-only]::-webkit-scrollbar{background:0 0;width:0;height:0;display:none}._f_2ps0c_22>div::-webkit-scrollbar{background:0 0;width:0;height:0;display:none}._n_2ps0c_199>div{min-height:var(--field-note-height);line-height:var(--field-note-line-height);padding-top:var(--field-note-padding,var(--field-note-padding-top,8px));padding-bottom:var(--field-note-padding,var(--field-note-padding-top,8px));scrollbar-width:none;-ms-overflow-style:none;overflow:hidden auto}._n_2ps0c_199>div::-webkit-scrollbar{background:0 0;width:0;height:0;display:none}._w_2ps0c_216>div{box-sizing:border-box;height:var(--field-height);min-height:var(--field-height);max-height:var(--field-height);text-wrap:nowrap;scrollbar-width:none;-ms-overflow-style:none;overflow:auto hidden}._w_2ps0c_216>div::-webkit-scrollbar{background:0 0;width:0;height:0;display:none}._w_2ps0c_216>div input{box-sizing:border-box;height:100%;min-height:0;max-height:100%;line-height:normal}._time_2ps0c_243>div{text-wrap:nowrap;align-items:center;min-width:0;display:flex;overflow:visible}._time_2ps0c_243 ._timeInner_2ps0c_250{justify-content:flex-start;align-items:center;gap:4px;width:100%;min-width:0;display:flex}._time_2ps0c_243._timeAlignCenter_2ps0c_261 ._timeInner_2ps0c_250{justify-content:center}._time_2ps0c_243 ._timeSep_2ps0c_264{opacity:.65;-webkit-user-select:none;user-select:none;flex:none;padding:0 2px;font-weight:500;transform:translateY(-1px)}._time_2ps0c_243 ._timePickerBtn_2ps0c_272{color:var(--field-icon-color,var(--field-placeholder));cursor:pointer;background:0 0;border:0;outline:none;flex:none;justify-content:center;align-items:center;margin:0;padding:0;line-height:0;display:inline-flex}._time_2ps0c_243 ._timePickerBtn_2ps0c_272:hover:not(:disabled){color:var(--field-color)}._time_2ps0c_243 ._timePickerBtn_2ps0c_272:focus-visible{box-shadow:var(--field-focus-shadow,0 0 0 3px var(--field-focus-ring,#0000));border-radius:6px}._time_2ps0c_243 ._timePickerBtn_2ps0c_272:disabled{cursor:not-allowed;opacity:.5}._time_2ps0c_243 ._timePart_2ps0c_300{box-sizing:border-box;width:2.25ch;min-width:2.25ch;color:inherit;font:inherit;font-variant-numeric:tabular-nums;line-height:inherit;text-align:center;min-height:var(--field-height);cursor:text;scrollbar-width:none;-ms-overflow-style:none;background:0 0;border:0;border-radius:6px;outline:none;flex:none;margin:0;padding:0;overflow:hidden}._time_2ps0c_243 ._timePart_2ps0c_300::-webkit-scrollbar{background:0 0;width:0;height:0;display:none}._time_2ps0c_243 ._timePart_2ps0c_300[contenteditable=false]{cursor:not-allowed;opacity:.7}._time_2ps0c_243 ._timePart_2ps0c_300:empty:before{content:attr(placeholder);color:var(--field-placeholder);opacity:1;font-weight:400}._time_2ps0c_243 ._timePart_2ps0c_300:focus:empty:before{content:none}._time_2ps0c_243 ._timePart_2ps0c_300:focus-visible{background:0 0}._time_2ps0c_243._timeAlignCenter_2ps0c_261 ._timePart_2ps0c_300{text-align:center}._t_2ps0c_22{color:var(--field-label-color);font-size:var(--field-label-size);padding-bottom:var(--field-label-gap,10px);cursor:default;display:block}._nativeWrap_2ps0c_361{flex:1;align-items:center;min-width:0;display:flex}._nativeInput_2ps0c_368{box-sizing:border-box;width:100%;font:inherit;color:inherit;background:0 0;border:none;outline:none;margin:0;padding:0}._nativeInput_2ps0c_368:-webkit-autofill{caret-color:var(--field-color);-webkit-text-fill-color:var(--field-color)!important;color:var(--field-color)!important;-webkit-box-shadow:none!important;box-shadow:none!important;background-color:#0000!important;background-image:none!important;-webkit-background-clip:text!important;background-clip:text!important;transition:background-color 99999s ease-out,background-image 99999s ease-out!important}._nativeInput_2ps0c_368:-webkit-autofill:hover{caret-color:var(--field-color);-webkit-text-fill-color:var(--field-color)!important;color:var(--field-color)!important;-webkit-box-shadow:none!important;box-shadow:none!important;background-color:#0000!important;background-image:none!important;-webkit-background-clip:text!important;background-clip:text!important;transition:background-color 99999s ease-out,background-image 99999s ease-out!important}._nativeInput_2ps0c_368:-webkit-autofill:focus{caret-color:var(--field-color);-webkit-text-fill-color:var(--field-color)!important;color:var(--field-color)!important;-webkit-box-shadow:none!important;box-shadow:none!important;background-color:#0000!important;background-image:none!important;-webkit-background-clip:text!important;background-clip:text!important;transition:background-color 99999s ease-out,background-image 99999s ease-out!important}._nativeInput_2ps0c_368:-webkit-autofill:active{caret-color:var(--field-color);-webkit-text-fill-color:var(--field-color)!important;color:var(--field-color)!important;-webkit-box-shadow:none!important;box-shadow:none!important;background-color:#0000!important;background-image:none!important;-webkit-background-clip:text!important;background-clip:text!important;transition:background-color 99999s ease-out,background-image 99999s ease-out!important}._affix_2ps0c_393{box-sizing:border-box;height:var(--field-height);min-height:var(--field-height);max-height:var(--field-height);color:var(--field-icon-color,var(--field-placeholder));font-size:inherit;-webkit-user-select:none;user-select:none;cursor:pointer;background:0 0;border:0;flex:none;justify-content:center;align-self:center;align-items:center;margin:0;padding:0;line-height:1;display:inline-flex}._affix_2ps0c_393:disabled{cursor:not-allowed;opacity:.6}._affix_2ps0c_393 svg{width:var(--field-icon-size,20px);height:var(--field-icon-size,20px);flex-shrink:0;display:block}._g_2ps0c_426{flex-direction:column}._range_2ps0c_430>div{box-sizing:border-box;min-width:0;min-height:var(--field-height);flex:1;align-items:center;line-height:normal;display:flex}._range_2ps0c_430 ._rangeTrack_2ps0c_439{box-sizing:border-box;width:100%;height:var(--field-range-bar-height,14px);background:var(--field-range-track,#e0e0e0);cursor:pointer;touch-action:none;border-radius:999px;outline:none;flex-shrink:0;position:relative;overflow:hidden}._range_2ps0c_430 ._rangeTrack_2ps0c_439:focus-visible{box-shadow:var(--field-focus-shadow,0 0 0 3px var(--field-focus-ring,#0000))}._range_2ps0c_430 ._rangeTrack_2ps0c_439[data-disabled=true]{cursor:not-allowed;opacity:.55;pointer-events:none}._range_2ps0c_430 ._rangeFill_2ps0c_460{background:var(--field-range-fill,#00b5ad);pointer-events:none;border-radius:999px 0 0 999px;width:0;min-width:0;height:100%}._range_2ps0c_430 ._rangeFillFull_2ps0c_471{border-radius:999px}._checkbox_2ps0c_475>div{min-height:var(--field-height);align-items:flex-start;width:100%;padding:0;line-height:normal;display:flex}._checkbox_2ps0c_475[data-variant=plain]{border-radius:0;overflow:visible;box-shadow:none!important;background:0 0!important;border:none!important;min-height:0!important;padding:0!important}._checkbox_2ps0c_475[data-variant=plain]:hover,._checkbox_2ps0c_475[data-variant=plain]:focus-within{box-shadow:none!important;background:0 0!important;border:none!important}._checkbox_2ps0c_475[data-size=sm]>div{align-items:center;min-height:0}._checkPlainBlok_2ps0c_502{width:100%;min-width:0}._checkControl_2ps0c_507{width:100%;min-height:var(--field-height);color:inherit;font:inherit;text-align:left;cursor:pointer;background:0 0;border:0;outline:none;align-items:flex-start;gap:12px;margin:0;padding:10px 0;display:flex}._checkControl_2ps0c_507:focus-visible{box-shadow:var(--field-focus-shadow,0 0 0 3px var(--field-focus-ring,#0000));border-radius:calc(var(--field-radius) - 2px)}._checkControl_2ps0c_507[data-focus-ring=false]:focus-visible{box-shadow:none}._checkControl_2ps0c_507[aria-disabled=true]{cursor:not-allowed}._checkControl_2ps0c_507[data-size=sm]{border-radius:8px;align-items:center;gap:10px;min-height:0;padding:7px 8px}._checkControl_2ps0c_507[data-size=sm] ._checkBox_2ps0c_540{border-radius:5px;width:18px;height:18px}._checkControl_2ps0c_507[data-size=sm] ._checkMark_2ps0c_545{width:9px;height:5px}._checkControl_2ps0c_507[data-size=sm] ._checkText_2ps0c_549{padding-top:0;font-size:13px;line-height:1.2}._checkControl_2ps0c_507[data-size=sm][data-variant=plain]:hover:not([aria-disabled=true]){background:var(--field-background-focus,#ffffff0f)}._checkBox_2ps0c_540{width:var(--field-check-size,22px);height:var(--field-check-size,22px);border:var(--field-check-box-border,var(--field-border));background:0 0;border-radius:8px;flex:none;justify-content:center;align-items:center;transition:background-color .16s,border-color .16s,opacity .16s;display:inline-flex}._checkMark_2ps0c_545{border-top:none;border-bottom:2px solid #fcfff4;border-left:2px solid #fcfff4;border-right:none;width:11px;height:6px;transform:translateY(-1px)rotate(-45deg)}._checkText_2ps0c_549{min-width:0;color:inherit;font-size:var(--control-font-size,14px);flex:auto;padding-top:2px;line-height:1.25}._checkControl_2ps0c_507[aria-checked=true] ._checkBox_2ps0c_540{background:var(--field-background-active)}._e_2ps0c_78{border-color:var(--field-error-border);background:var(--field-error-background);color:var(--field-error-color)}._m_2ps0c_22{color:var(--field-error-color);font-size:var(--field-error-size,12px);margin-top:var(--field-error-gap,6px);font-style:normal}._display_2ps0c_607>div{color:inherit;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}._displayEmpty_2ps0c_614{color:var(--field-placeholder)}._radio_2ps0c_619>div{width:100%;min-height:var(--field-height);flex-direction:column;align-items:stretch;gap:4px;padding:6px 0;line-height:normal;display:flex}._radioInline_2ps0c_630>div{flex-flow:wrap;align-items:center;gap:8px 16px}._radioItem_2ps0c_637{color:inherit;font:inherit;text-align:left;cursor:pointer;background:0 0;border:0;outline:none;align-items:center;gap:10px;margin:0;padding:4px 0;display:inline-flex}._radioItem_2ps0c_637:focus-visible{box-shadow:var(--field-focus-shadow,0 0 0 3px var(--field-focus-ring,#0000));border-radius:6px}._radioItem_2ps0c_637[aria-disabled=true]{cursor:not-allowed;opacity:.7}._radioDot_2ps0c_660{width:var(--field-radio-size,20px);height:var(--field-radio-size,20px);border:var(--field-check-box-border,var(--field-border));border-radius:50%;flex:none;justify-content:center;align-items:center;display:inline-flex}._radioDotFill_2ps0c_671{background:var(--field-background-active);border-radius:50%;width:10px;height:10px}._radioText_2ps0c_678{font-size:var(--control-font-size,14px);line-height:1.25}._tags_2ps0c_684>div,._tags_2ps0c_684 ._tagsInner_2ps0c_685{width:100%;min-height:var(--field-height);flex-wrap:wrap;align-items:center;gap:4px;padding:0;line-height:normal;display:flex;overflow:visible}._tagsInner_2ps0c_685{flex:1;min-width:0}._tagChip_2ps0c_702{background:var(--field-background-focus,#0000000f);border-radius:999px;align-items:center;gap:2px;max-width:100%;padding:0 6px;line-height:1.35;display:inline-flex}._tagLabel_2ps0c_713{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}._tagRemove_2ps0c_719{color:inherit;cursor:pointer;opacity:.65;background:0 0;border:0;padding:0 2px;font-size:16px;line-height:1}._tagRemove_2ps0c_719:hover{opacity:1}._tagInput_2ps0c_733{min-width:80px;color:inherit;font:inherit;background:0 0;border:0;outline:none;flex:80px;margin:0;padding:0}._rating_2ps0c_746>div{width:100%;min-height:var(--field-height);outline:none;align-items:center;gap:2px;line-height:normal;display:flex}._ratingStar_2ps0c_756{color:var(--field-placeholder);cursor:pointer;font-size:var(--field-rating-size,22px);background:0 0;border:0;outline:none;padding:0 2px;line-height:1}._ratingStar_2ps0c_756:disabled{cursor:not-allowed;opacity:.6}._ratingStar_2ps0c_756:focus-visible{box-shadow:var(--field-focus-shadow,0 0 0 3px var(--field-focus-ring,#0000));border-radius:4px}._ratingStarOn_2ps0c_775{color:var(--field-range-fill,#34c759)}._code_2ps0c_780>div,._code_2ps0c_780 ._codeInner_2ps0c_781{width:100%;min-height:var(--field-height);align-items:center;gap:8px;line-height:normal;display:flex;overflow:visible}._codeInner_2ps0c_781{flex:1;min-width:0}._codeCell_2ps0c_796{box-sizing:border-box;width:var(--field-code-cell-size,36px);height:calc(var(--field-height) - 12px);border:var(--field-border);border-radius:calc(var(--field-radius) - 2px);background:var(--field-background-focus,#0000000a);min-height:32px;color:inherit;font:inherit;font-variant-numeric:tabular-nums;text-align:center;outline:none;padding:0}._codeCell_2ps0c_796:focus{border-color:var(--field-border-focus,var(--field-border));box-shadow:var(--field-focus-shadow,0 0 0 3px var(--field-focus-ring,#0000))}._codeCell_2ps0c_796:disabled{opacity:.6;cursor:not-allowed}._file_2ps0c_821>div,._file_2ps0c_821 ._fileInner_2ps0c_822{width:100%;min-height:var(--field-height);align-items:center;gap:10px;line-height:normal;display:flex;overflow:visible}._fileInner_2ps0c_822{flex:1;min-width:0;position:relative}._fileInput_2ps0c_838{opacity:0;pointer-events:none;width:1px;height:1px;position:absolute}._fileButton_2ps0c_846{background:var(--field-background-focus,#0000000f);color:inherit;font:inherit;cursor:pointer;white-space:nowrap;border:0;border-radius:8px;flex:none;padding:6px 10px;font-size:13px}._fileButton_2ps0c_846:disabled{cursor:not-allowed;opacity:.6}._fileList_2ps0c_863{flex-direction:column;flex:1;gap:2px;min-width:0;display:flex;overflow:hidden}._fileEmpty_2ps0c_872{color:var(--field-placeholder);font-size:13px}._fileItem_2ps0c_877{align-items:baseline;gap:8px;min-width:0;display:flex}._fileName_2ps0c_884{text-overflow:ellipsis;white-space:nowrap;font-size:13px;overflow:hidden}._fileSize_2ps0c_891{color:var(--field-placeholder);font-size:var(--field-error-size,12px);flex:none}._fileClear_2ps0c_897{color:inherit;cursor:pointer;opacity:.65;background:0 0;border:0;flex:none;padding:0 2px;font-size:18px;line-height:1}._fileClear_2ps0c_897:hover{opacity:1}._rich_2ps0c_913{align-items:stretch}._rich_2ps0c_913>div{min-height:var(--field-note-height);line-height:var(--field-note-line-height);flex-direction:column;align-items:flex-start;padding:0;display:flex;overflow:visible}._richWrap_2ps0c_926{flex-direction:column;align-items:flex-start;width:100%;min-width:0;display:flex}._richToolbar_2ps0c_934{box-sizing:border-box;border-bottom:1px solid #00000014;flex-wrap:nowrap;justify-content:flex-start;align-items:center;gap:2px;width:100%;max-width:100%;margin:0;padding:4px 0 6px;display:inline-flex}._richBtn_2ps0c_948{box-sizing:border-box;width:28px;min-width:28px;height:28px;color:inherit;font:inherit;cursor:pointer;background:0 0;border:0;border-radius:6px;flex:none;justify-content:center;align-items:center;margin:0;padding:0;font-size:13px;font-weight:600;line-height:1;display:inline-flex}._richBtn_2ps0c_948:hover:not(:disabled){background:var(--field-background-focus,#0000000f)}._richBtn_2ps0c_948:disabled{opacity:.5;cursor:not-allowed}._richEditor_2ps0c_977{box-sizing:border-box;width:100%;min-height:calc(var(--field-note-height) - 36px);padding:var(--field-note-padding,8px) 0;overflow-wrap:anywhere;line-height:var(--field-note-line-height);scrollbar-width:none;-ms-overflow-style:none;outline:none;overflow:hidden auto}._richEditor_2ps0c_977::-webkit-scrollbar{background:0 0;width:0;height:0;display:none}._richEditor_2ps0c_977:empty:before{content:attr(placeholder);color:var(--field-placeholder);pointer-events:none}._richEditor_2ps0c_977 ul,._richEditor_2ps0c_977 ol{margin:.25em 0;padding-left:1.25em}._dragDrop_2ps0c_1008{align-items:stretch;overflow:visible;box-shadow:none!important;background:0 0!important;border:0!important;padding:0!important}._dragDrop_2ps0c_1008>div{min-height:auto;padding:0;line-height:normal;display:block;overflow:visible}._dragDrop_2ps0c_1008[data-dragging=true]{background:0 0!important}._dragDropInner_2ps0c_1027{flex-direction:column;gap:16px;width:100%;min-width:0;display:flex;position:relative}._dragDropZone_2ps0c_1036{box-sizing:border-box;width:100%;min-height:var(--field-drag-min-height,88px);border:var(--field-drag-border,2px dashed #c7c7cc);border-radius:calc(var(--field-radius) - 2px);color:inherit;font:inherit;text-align:center;cursor:pointer;background:0 0;outline:none;flex-direction:column;justify-content:center;align-items:center;gap:6px;margin:0;padding:18px 14px;transition:border-color .16s,background-color .16s,border-style .16s;display:flex}._dragDropZone_2ps0c_1036:hover:not(:disabled){border-color:var(--field-drag-border-hover,#8e8e93);background:var(--field-background-focus,#00000008)}._dragDropZone_2ps0c_1036[data-dragging=true]{border-color:var(--field-range-fill,#34c759);background:color-mix(in srgb, var(--field-range-fill,#34c759) 10%, transparent);border-style:solid}._dragDropZone_2ps0c_1036:focus-visible{box-shadow:var(--field-focus-shadow,0 0 0 3px var(--field-focus-ring,#0000))}._dragDropZone_2ps0c_1036:disabled{cursor:not-allowed;opacity:.65}._dragDropHint_2ps0c_1074{font-size:var(--control-font-size,14px);color:inherit;line-height:1.35}._dragDropAccept_2ps0c_1080{font-size:var(--field-error-size,12px);color:var(--field-placeholder);letter-spacing:.01em}._dragDropList_2ps0c_1086{flex-direction:column;gap:6px;margin:4px 0 0;padding:0;list-style:none;display:flex}._dragDropItem_2ps0c_1095{background:var(--field-background-focus,#0000000a);border-radius:10px;align-items:center;gap:10px;min-width:0;padding:8px 10px;display:flex}._dragDropMeta_2ps0c_1105{flex-direction:column;flex:1;gap:2px;min-width:0;display:flex}._dragDropName_2ps0c_1113{text-overflow:ellipsis;white-space:nowrap;font-size:var(--control-font-size,14px);color:inherit;line-height:1.3;overflow:hidden}._dragDropSize_2ps0c_1122{font-size:var(--field-error-size,12px);color:var(--field-placeholder);line-height:1.2}._dragDropRemove_2ps0c_1128{width:28px;height:28px;color:var(--field-placeholder);cursor:pointer;background:0 0;border:0;border-radius:8px;flex:none;justify-content:center;align-items:center;padding:0;font-size:18px;line-height:1;display:inline-flex}._dragDropRemove_2ps0c_1128:hover{color:var(--field-error-color,#d70015);background:color-mix(in srgb, var(--field-error-color,#d70015) 10%, transparent)}._dragDropClearAll_2ps0c_1149{color:var(--field-placeholder);font:inherit;font-size:var(--field-error-size,12px);cursor:pointer;background:0 0;border:0;align-self:flex-start;margin-top:2px;padding:2px 0}._dragDropClearAll_2ps0c_1149:hover{color:var(--field-error-color,#d70015)}\n\n._o_5zbqt_4{z-index:var(--elcrm-z-popover,1000);background:0 0;position:fixed;inset:0}._c_5zbqt_15{box-shadow:var(--date-popup-shadow,5px 7px 18px 0 #000000a8);padding:var(--date-popup-padding,10px 12px 12px);background:var(--select-background);z-index:var(--elcrm-z-popover-front,1001);border-radius:var(--date-popup-radius,10px);scrollbar-width:none;-ms-overflow-style:none;max-height:min(92vh,480px);margin:0;display:block;position:fixed;overflow:hidden auto}._c_5zbqt_15::-webkit-scrollbar{background:0 0;width:0;height:0;display:none}._c_5zbqt_15{color:var(--select-color,#333);box-sizing:border-box;min-width:var(--date-popup-min-width,259px)}._c_5zbqt_15 [grid-calendar]{grid-template-columns:repeat(7,1fr);grid-auto-rows:var(--date-popup-row-height,34px);gap:2px;display:grid}._c_5zbqt_15 [grid-calendar]>p{color:var(--field-placeholder);box-sizing:border-box;justify-content:center;align-items:center;margin:0;padding:0;font-size:.75rem;font-weight:500;line-height:1;display:flex}._c_5zbqt_15 [grid-month]{grid-template-columns:1fr 1fr 1fr 1fr;width:250px;display:grid}._c_5zbqt_15 b{border-radius:var(--date-popup-cell-radius,5px);cursor:pointer;text-align:center;padding:8px 5px;font-weight:400;display:block}._c_5zbqt_15 b:hover{background:var(--select-li-hover-bg)}._c_5zbqt_15 p{color:var(--field-placeholder);text-align:center;cursor:default;pointer-events:none;padding:0}._c_5zbqt_15 i{text-align:center;cursor:pointer;border-radius:var(--date-popup-cell-radius,5px);flex:0 30px;padding:9px}._c_5zbqt_15 i:hover{background:var(--select-li-hover-bg)}._c_5zbqt_15 i:before{cursor:pointer;display:block}._c_5zbqt_15 s{align-items:center;gap:4px;padding-bottom:6px;font-style:normal;text-decoration:none;display:flex}._c_5zbqt_15 s h2{text-align:center;min-width:0;color:var(--select-color,#333);cursor:default;flex-wrap:nowrap;flex:auto;justify-content:center;align-items:center;gap:8px;margin:0;padding:0;font-size:16px;font-weight:400;line-height:1.25;display:flex}._c_5zbqt_15 ._dateHeaderMonth_5zbqt_128,._c_5zbqt_15 ._dateHeaderYear_5zbqt_128{cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap;border-radius:6px;padding:2px 8px}._c_5zbqt_15 ._dateHeaderMonth_5zbqt_128:hover,._c_5zbqt_15 ._dateHeaderYear_5zbqt_128:hover{background:var(--select-li-hover-bg)}._c_5zbqt_15 ._dateHeaderDisabled_5zbqt_138{cursor:not-allowed;opacity:.45;pointer-events:none}._c_5zbqt_15 ._dateHeaderDisabled_5zbqt_138[data-active=true],._c_5zbqt_15 ._dateHeaderDisabled_5zbqt_138[data-current=true]{opacity:.45}._c_5zbqt_15 [grid-calendar] b[data-current=true],._c_5zbqt_15 [grid-month] b[data-current=true]{background:color-mix(in srgb, var(--field-background-active) 52%, transparent);font-weight:600}._c_5zbqt_15 [grid-calendar] b[data-active=true]:not([data-current=true]),._c_5zbqt_15 [grid-month] b[data-active=true]:not([data-current=true]){outline:2px solid var(--field-background-active);outline-offset:-2px}._c_5zbqt_15 [grid-calendar] b[data-active=true][data-current=true],._c_5zbqt_15 [grid-month] b[data-active=true][data-current=true]{box-shadow:inset 0 0 0 2px var(--field-background-active)}._c_5zbqt_15 [grid-calendar] p[data-current=true]{background:color-mix(in srgb, var(--field-background-active) 52%, transparent);color:inherit;border-radius:var(--date-popup-cell-radius,5px);font-weight:600}._c_5zbqt_15 [grid-calendar] p[data-active=true]:not([data-current=true]){outline:2px solid var(--field-background-active);outline-offset:-2px;opacity:.85}._c_5zbqt_15 [grid-calendar] p[data-active=true][data-current=true]{box-shadow:inset 0 0 0 2px var(--field-background-active)}._c_5zbqt_15 span{text-align:center;padding:2px}._c_5zbqt_15 span p{color:var(--field-placeholder);padding:8px 5px}._c_5zbqt_15 [grid-calendar]>span{box-sizing:border-box;justify-content:stretch;align-items:stretch;min-height:0;padding:0;display:flex}._c_5zbqt_15 [grid-calendar]>span>b,._c_5zbqt_15 [grid-calendar]>span>p{box-sizing:border-box;border-radius:var(--date-popup-cell-radius,5px);flex:auto;justify-content:center;align-items:center;width:100%;min-height:0;margin:0;padding:0;display:flex}._c_5zbqt_15 ._as_5zbqt_205{cursor:ns-resize}._c_5zbqt_15 ._ap_5zbqt_208{cursor:pointer}\n\n:root{--select-height:52px;--select-icon:calc(var(--select-height) / 1.5);--select-icon-padding:calc((var(--select-height) - var(--select-icon)) / 2);--select-font-size:17px;--select-radius:20px;--select-max-height:300px}._o_ogta0_19{z-index:var(--elcrm-z-popover,1000);background:var(--select-overlay,transparent);position:fixed;inset:0}._l_ogta0_29{background:var(--select-background,#fff);z-index:var(--elcrm-z-popover-front,1001);border-radius:var(--select-radius);max-height:var(--select-max-height);scrollbar-width:none;-ms-overflow-style:none;margin:0;padding:0;display:block;position:fixed;overflow:hidden auto}._l_ogta0_29::-webkit-scrollbar{background:0 0;width:0;height:0;display:none}._l_ogta0_29 ul{width:100%;max-height:var(--select-max-height);scrollbar-width:none;-ms-overflow-style:none;margin:0;padding:0;list-style:none;display:block;overflow:hidden auto}._l_ogta0_29 ul::-webkit-scrollbar{background:0 0;width:0;height:0;display:none}._l_ogta0_29 li{border-bottom:var(--select-separator,1px solid #c6c6c8);cursor:pointer;color:var(--select-color,#000);height:var(--select-height);line-height:var(--select-height);font-size:var(--select-font-size);white-space:nowrap;text-overflow:ellipsis;opacity:1;margin:0;padding:0 14px;display:block;overflow:hidden;text-align:left!important;border-left:0!important}._l_ogta0_29 li[aria-selected=true]{background:var(--select-li-selected-bg,var(--select-li-hover-bg,#f2f2f7))}._l_ogta0_29 li:hover{background:var(--select-li-hover-bg,#f2f2f7)}._l_ogta0_29 li[data-focus=true]{background:var(--select-li-focus-bg,#e5e5ea)}._l_ogta0_29 li:last-child{border-bottom:0}._i_ogta0_105{width:var(--select-icon);height:var(--select-icon);color:var(--field-color);right:var(--select-icon-padding);top:var(--select-icon-padding);position:absolute}._placeholderValue_ogta0_115{color:var(--field-placeholder);font-weight:400}._f_ogta0_120{cursor:pointer}._f_ogta0_120[aria-disabled=true]{cursor:not-allowed}\n\n:root{--color-picker-width:260px;--color-picker-radius:16px;--color-picker-pad:10px;--color-picker-swatch:20px;--color-picker-input-radius:5px;--color-picker-handle:14px}._o_1i8zo_14{z-index:var(--elcrm-z-popover,1000);background:var(--select-overlay,transparent);position:fixed;inset:0}._panel_1i8zo_21{z-index:var(--elcrm-z-popover-front,1001);box-sizing:border-box;width:var(--color-picker-width);padding:var(--color-picker-pad);background:var(--select-background,#2c2c2e);color:var(--select-color,#fff);border-radius:var(--color-picker-radius);flex-direction:column;gap:8px;display:flex;position:fixed;box-shadow:0 8px 28px #00000059}._sv_1i8zo_37{aspect-ratio:1/.55;cursor:crosshair;touch-action:none;border-radius:8px;width:100%;max-height:140px;position:relative;overflow:hidden}._svWhite_1i8zo_48{background:linear-gradient(90deg,#fff,#0000);position:absolute;inset:0}._svBlack_1i8zo_54{background:linear-gradient(#0000,#000);position:absolute;inset:0}._handle_1i8zo_60{width:var(--color-picker-handle);height:var(--color-picker-handle);margin:calc(var(--color-picker-handle) / -2) 0 0 calc(var(--color-picker-handle) / -2);pointer-events:none;box-sizing:border-box;border:2px solid #fff;border-radius:50%;position:absolute;box-shadow:0 0 0 1px #00000059}._slidersRow_1i8zo_72{align-items:center;gap:8px;display:flex}._eyedropper_1i8zo_78{border-radius:var(--color-picker-input-radius);background:var(--field-background,#1c1c1e);width:26px;height:26px;color:var(--field-icon-color,#8e8e93);cursor:pointer;border:none;flex:none;justify-content:center;align-items:center;padding:0;display:inline-flex}._eyedropper_1i8zo_78:hover{color:var(--field-color,#fff)}._sliders_1i8zo_72{flex-direction:column;flex:1;gap:8px;min-width:0;display:flex}._slider_1i8zo_72{cursor:pointer;touch-action:none;border-radius:999px;height:10px;position:relative}._sliderHue_1i8zo_113{background:linear-gradient(90deg,red 0%,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red 100%)}._sliderAlpha_1i8zo_117{background-image:linear-gradient(to right, transparent, var(--alpha-color,#fff)), linear-gradient(45deg, #777 25%, transparent 25%), linear-gradient(-45deg, #777 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #777 75%), linear-gradient(-45deg, transparent 75%, #777 75%);background-color:#bbb;background-position:0 0,0 0,0 4px,4px -4px,-4px 0;background-size:100% 100%,8px 8px,8px 8px,8px 8px,8px 8px}._sliderHandle_1i8zo_125{width:var(--color-picker-handle);height:var(--color-picker-handle);margin:calc(var(--color-picker-handle) / -2) 0 0 calc(var(--color-picker-handle) / -2);pointer-events:none;box-sizing:border-box;background:0 0;border:2px solid #fff;border-radius:50%;position:absolute;top:50%;box-shadow:0 0 0 1px #00000059}._inputs_1i8zo_139{align-items:center;gap:6px;display:flex}._format_1i8zo_145{color:var(--field-placeholder,#8e8e93);flex:none;padding:0 2px;font-size:12px}._input_1i8zo_139{box-sizing:border-box;border-radius:var(--color-picker-input-radius);background:var(--field-background,#1c1c1e);min-width:0;height:28px;color:var(--field-color,#fff);font:inherit;border:none;outline:none;flex:1;padding:0 8px;font-size:13px}._input_1i8zo_139:focus{box-shadow:0 0 0 2px var(--field-focus-ring,#fff3)}._inputAlpha_1i8zo_171{text-align:center;flex:0 0 56px}._palette_1i8zo_176{grid-template-columns:repeat(8,1fr);place-items:center;gap:4px;padding:0;display:grid}._swatchBtn_1i8zo_185{width:var(--color-picker-swatch);height:var(--color-picker-swatch);cursor:pointer;background:var(--swatch,#888);border:none;border-radius:50%;padding:0;transition:transform .12s;box-shadow:inset 0 0 0 1px #0000001f}._swatchBtn_1i8zo_185[aria-checked=true]{z-index:1;box-shadow:inset 0 0 0 1px #00000026, 0 0 0 2px var(--select-background,#2c2c2e), 0 0 0 3px #ffffff59;transform:scale(1.35)}._swatchBtn_1i8zo_185:disabled{cursor:not-allowed;opacity:.5}._trigger_1i8zo_210{cursor:pointer;align-items:center;gap:var(--field-icon-gap,10px);min-width:0;height:var(--field-height,44px);flex:1;display:flex}._trigger_1i8zo_210[aria-disabled=true]{cursor:not-allowed}._preview_1i8zo_224{background-color:var(--preview-color,transparent);background-image:linear-gradient(var(--preview-color,transparent), var(--preview-color,transparent)), linear-gradient(45deg, #c6c6c8 25%, transparent 25%), linear-gradient(-45deg, #c6c6c8 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #c6c6c8 75%), linear-gradient(-45deg, transparent 75%, #c6c6c8 75%);background-position:0 0,0 0,0 3px,3px -3px,-3px 0;background-size:100% 100%,6px 6px,6px 6px,6px 6px,6px 6px;border-radius:50%;flex:none;width:22px;height:22px;box-shadow:inset 0 0 0 1px #00000026}._hexText_1i8zo_237{text-overflow:ellipsis;white-space:nowrap;min-width:0;font-size:var(--control-font-size,17px);flex:1;overflow:hidden}._placeholder_1i8zo_246{color:var(--field-placeholder,#8e8e93);font-weight:400}\n";
+    el.textContent = "@layer elcrm-form{.ffl{min-width:var(--field-width);gap:var(--field-block-gap);flex-direction:column;margin:0;padding:0;display:flex;position:relative}.ffl[data-size=s],.ffl[data-size=sm]{--field-height:var(--control-height-s);--control-height:var(--control-height-s);font-size:13px}.ffl[data-size=l]{--field-height:var(--control-height-l);--control-height:var(--control-height-l)}.ffl>.fft,.ffl>.fff,.ffl>.ffm{margin:0}:is(.ffl[data-field=group],.ffl[data-field=options]) .fff>div{cursor:pointer;border-bottom:var(--field-border);margin:0;padding:0}:is(.ffl[data-field=group],.ffl[data-field=options]) .fff>div:last-child{border-bottom:0}.ffl [placeholder]:empty:before{content:attr(placeholder);color:var(--field-placeholder);opacity:1;pointer-events:none;font-style:normal;font-weight:400;display:block}.ffl [placeholder]:focus:before{display:none}.fff{box-sizing:border-box;align-items:stretch;gap:var(--field-icon-gap);border:var(--field-border);border-radius:var(--field-radius);background:var(--field-background);color:var(--field-color);padding:var(--field-padding);min-height:var(--field-height);transition:border-color .16s,box-shadow .16s,background-color .16s,opacity .16s;display:flex;overflow:hidden}.fff:hover{border-color:var(--field-border-hover)}.fff:focus-within{border-color:var(--field-border-focus);box-shadow:var(--field-focus-shadow);background:var(--field-background-focus)}.fff.ffe:focus-within{background:var(--field-error-background);color:var(--field-error-color)}.fff[data-disabled=true]{background:var(--field-background-disabled);border-color:var(--field-border-disabled);color:var(--field-color-disabled);cursor:not-allowed;opacity:.85;-webkit-user-select:none;user-select:none}.fff[data-disabled=true]>*{cursor:not-allowed;pointer-events:none}.fff[data-disabled=true]:focus-within{border-color:var(--field-border-disabled);box-shadow:none;background:var(--field-background-disabled)}.fff>div{min-width:0;min-height:0;line-height:1.25;font-size:var(--control-font-size);text-wrap:pretty;outline:0;flex:1;margin:0;padding:0}.fff>div::selection{background:var(--field-selection-bg);color:var(--field-selection-color)}.fff>:not(div){box-sizing:border-box;height:auto;min-height:0;max-height:none;color:var(--field-icon-color);flex:none;justify-content:center;align-self:center;align-items:center;display:inline-flex}.fff>:not(div) svg{width:var(--field-icon-size);height:var(--field-icon-size);flex-shrink:0;display:block}.fff input::placeholder,.fff textarea::placeholder{color:var(--field-placeholder);opacity:1;font-weight:400}.fff input::-webkit-input-placeholder{color:var(--field-placeholder);opacity:1;font-weight:400}.fff textarea::-webkit-input-placeholder{color:var(--field-placeholder);opacity:1;font-weight:400}.fff input::-moz-placeholder{color:var(--field-placeholder);opacity:1;font-weight:400}.fff textarea::-moz-placeholder{color:var(--field-placeholder);opacity:1;font-weight:400}.fff input:-webkit-autofill{caret-color:var(--field-color);-webkit-text-fill-color:var(--field-color)!important;color:var(--field-color)!important;-webkit-box-shadow:none!important;box-shadow:none!important;font-size:inherit!important;line-height:inherit!important;background-color:#0000!important;background-image:none!important;transition:background-color 99999s ease-out,background-image 99999s ease-out!important}.fff input:-webkit-autofill:hover{caret-color:var(--field-color);-webkit-text-fill-color:var(--field-color)!important;color:var(--field-color)!important;-webkit-box-shadow:none!important;box-shadow:none!important;font-size:inherit!important;line-height:inherit!important;background-color:#0000!important;background-image:none!important;transition:background-color 99999s ease-out,background-image 99999s ease-out!important}.fff input:-webkit-autofill:focus{caret-color:var(--field-color);-webkit-text-fill-color:var(--field-color)!important;color:var(--field-color)!important;-webkit-box-shadow:none!important;box-shadow:none!important;font-size:inherit!important;line-height:inherit!important;background-color:#0000!important;background-image:none!important;transition:background-color 99999s ease-out,background-image 99999s ease-out!important}.fff input:-webkit-autofill:active{caret-color:var(--field-color);-webkit-text-fill-color:var(--field-color)!important;color:var(--field-color)!important;-webkit-box-shadow:none!important;box-shadow:none!important;font-size:inherit!important;line-height:inherit!important;background-color:#0000!important;background-image:none!important;transition:background-color 99999s ease-out,background-image 99999s ease-out!important}.fff input:-webkit-autofill{-webkit-background-clip:text!important;background-clip:text!important}.fff [contenteditable=true],.fff [contenteditable=plaintext-only],.fff>div{scrollbar-width:none;-ms-overflow-style:none}:is(.fff [contenteditable=true],.fff [contenteditable=plaintext-only],.fff>div)::-webkit-scrollbar{background:0 0;width:0;height:0;display:none}.ffn{min-height:var(--field-note-height);align-items:stretch}.ffn>div{min-height:0;line-height:var(--field-note-line-height);scrollbar-width:none;-ms-overflow-style:none;padding:0;overflow:hidden auto}.ffn>div::-webkit-scrollbar{background:0 0;width:0;height:0;display:none}.ffw>div{box-sizing:border-box;height:auto;min-height:0;max-height:none;line-height:calc(var(--field-height) - 2 * var(--field-padding-block));text-wrap:nowrap;scrollbar-width:none;-ms-overflow-style:none;align-self:stretch;overflow:auto hidden}.ffw>div::-webkit-scrollbar{background:0 0;width:0;height:0;display:none}.ffw>div input{box-sizing:border-box;height:100%;min-height:0;max-height:100%;line-height:normal}.fft{color:var(--field-label-color);font-size:var(--field-label-size);padding-bottom:var(--field-label-gap);cursor:default;display:block}.ffx{flex:1;align-items:center;min-width:0;display:flex}.ffy{box-sizing:border-box;width:100%;font:inherit;color:inherit;background:0 0;border:none;outline:none;margin:0;padding:0}.ffy:-webkit-autofill{caret-color:var(--field-color);-webkit-text-fill-color:var(--field-color)!important;color:var(--field-color)!important;-webkit-box-shadow:none!important;box-shadow:none!important;background-color:#0000!important;background-image:none!important;-webkit-background-clip:text!important;background-clip:text!important;transition:background-color 99999s ease-out,background-image 99999s ease-out!important}.ffy:-webkit-autofill:hover{caret-color:var(--field-color);-webkit-text-fill-color:var(--field-color)!important;color:var(--field-color)!important;-webkit-box-shadow:none!important;box-shadow:none!important;background-color:#0000!important;background-image:none!important;-webkit-background-clip:text!important;background-clip:text!important;transition:background-color 99999s ease-out,background-image 99999s ease-out!important}.ffy:-webkit-autofill:focus{caret-color:var(--field-color);-webkit-text-fill-color:var(--field-color)!important;color:var(--field-color)!important;-webkit-box-shadow:none!important;box-shadow:none!important;background-color:#0000!important;background-image:none!important;-webkit-background-clip:text!important;background-clip:text!important;transition:background-color 99999s ease-out,background-image 99999s ease-out!important}.ffy:-webkit-autofill:active{caret-color:var(--field-color);-webkit-text-fill-color:var(--field-color)!important;color:var(--field-color)!important;-webkit-box-shadow:none!important;box-shadow:none!important;background-color:#0000!important;background-image:none!important;-webkit-background-clip:text!important;background-clip:text!important;transition:background-color 99999s ease-out,background-image 99999s ease-out!important}.ffa{box-sizing:border-box;height:auto;min-height:0;max-height:none;color:var(--field-icon-color);font-size:inherit;-webkit-user-select:none;user-select:none;cursor:pointer;background:0 0;border:0;flex:none;justify-content:center;align-self:center;align-items:center;margin:0;padding:0;line-height:1;display:inline-flex}.ffa:disabled{cursor:not-allowed;opacity:.6}.ffa svg{width:var(--field-icon-size);height:var(--field-icon-size);flex-shrink:0;display:block}.ffg{gap:var(--field-padding-block);flex-direction:column;align-items:stretch}.ffr>div{box-sizing:border-box;flex:1;align-items:center;min-width:0;min-height:0;line-height:normal;display:flex}.ffr .ffk{box-sizing:border-box;width:100%;height:var(--field-range-bar-height);background:var(--field-range-track);cursor:pointer;touch-action:none;border-radius:999px;outline:none;flex-shrink:0;position:relative;overflow:hidden}.ffr .ffk:focus-visible{box-shadow:var(--field-focus-shadow)}.ffr .ffk[data-disabled=true]{cursor:not-allowed;opacity:.55;pointer-events:none}.ffr .ffu{background:var(--field-range-fill);pointer-events:none;border-radius:999px 0 0 999px;width:0;min-width:0;height:100%}.ffr .ffv{border-radius:999px}.ffr[data-variant=line]{border-radius:0;overflow:visible;box-shadow:none!important;background:0 0!important;border:none!important;padding:0!important}.ffr[data-variant=line]:hover,.ffr[data-variant=line]:focus-within{box-shadow:none!important;background:0 0!important;border:none!important}.ffr[data-variant=line]>div{min-height:calc(var(--field-range-thumb-size) + 6px);overflow:visible}.ffr[data-variant=line] .ffk{height:var(--field-range-line-height);background:var(--field-range-track);overflow:visible}.ffr[data-variant=line] .ffu{display:none}.ffr[data-variant=line] .ffh{width:var(--field-range-thumb-size);height:var(--field-range-thumb-size);background:var(--field-range-thumb);pointer-events:none;border-radius:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.ffe{border-color:var(--field-error-border);background:var(--field-error-background);color:var(--field-error-color)}.ffm{color:var(--field-error-color);font-size:var(--field-error-size);margin-top:var(--field-error-gap);font-style:normal}.ffd{cursor:default}.ffd>div{color:inherit;text-overflow:ellipsis;white-space:nowrap;-webkit-user-select:text;user-select:text;overflow:hidden}.ffd[data-multiline=true]>div{white-space:pre-wrap;text-overflow:unset;overflow-wrap:anywhere;overflow-y:auto}.ffz{color:var(--field-placeholder)}}\n\n@layer elcrm-form{.fmo{z-index:var(--elcrm-z-popover);background:0 0;position:fixed;inset:0}.fmc{box-shadow:var(--popup-shadow);padding:var(--date-popup-padding);background:var(--select-background);z-index:var(--elcrm-z-popover-front);border-radius:var(--date-popup-radius);scrollbar-width:none;-ms-overflow-style:none;max-height:min(92vh,480px);margin:0;display:block;position:fixed;overflow:hidden auto}.fmc::-webkit-scrollbar{background:0 0;width:0;height:0;display:none}.fmc{color:var(--select-color);box-sizing:border-box;min-width:var(--date-popup-min-width)}.fmc [grid-calendar]{grid-template-columns:repeat(7,1fr);grid-auto-rows:var(--date-popup-row-height);gap:2px;display:grid}.fmc [grid-calendar]>p{color:var(--field-placeholder);box-sizing:border-box;justify-content:center;align-items:center;margin:0;padding:0;font-size:.75rem;font-weight:500;line-height:1;display:flex}.fmc [grid-month]{grid-template-columns:1fr 1fr 1fr 1fr;width:250px;display:grid}.fmc b{border-radius:var(--date-popup-cell-radius);cursor:pointer;text-align:center;padding:8px 5px;font-weight:400;display:block}.fmc b:hover{background:var(--select-li-hover-bg)}.fmc p{color:var(--field-placeholder);text-align:center;cursor:default;pointer-events:none;padding:0}.fmc i{text-align:center;cursor:pointer;border-radius:var(--date-popup-cell-radius);flex:0 30px;padding:9px}.fmc i:hover{background:var(--select-li-hover-bg)}.fmc i:before{cursor:pointer;display:block}.fmc s{align-items:center;gap:4px;padding-bottom:6px;font-style:normal;text-decoration:none;display:flex}.fmc s h2{text-align:center;min-width:0;color:var(--select-color);cursor:default;flex-wrap:nowrap;flex:auto;justify-content:center;align-items:center;gap:8px;margin:0;padding:0;font-size:16px;font-weight:400;line-height:1.25;display:flex}.fmc .fmh,.fmc .fmy{cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap;border-radius:6px;padding:2px 8px}.fmc .fmh:hover,.fmc .fmy:hover{background:var(--select-li-hover-bg)}.fmc .fmd{cursor:not-allowed;opacity:.45;pointer-events:none}.fmc .fmd[data-active=true],.fmc .fmd[data-current=true]{opacity:.45}.fmc [grid-calendar] b[data-current=true],.fmc [grid-month] b[data-current=true]{background:color-mix(in srgb, var(--field-background-active) 52%, transparent);font-weight:600}.fmc [grid-calendar] b[data-active=true]:not([data-current=true]),.fmc [grid-month] b[data-active=true]:not([data-current=true]){outline:2px solid var(--field-background-active);outline-offset:-2px}.fmc [grid-calendar] b[data-active=true][data-current=true],.fmc [grid-month] b[data-active=true][data-current=true]{box-shadow:inset 0 0 0 2px var(--field-background-active)}.fmc [grid-calendar] p[data-current=true]{background:color-mix(in srgb, var(--field-background-active) 52%, transparent);color:inherit;border-radius:var(--date-popup-cell-radius);font-weight:600}.fmc [grid-calendar] p[data-active=true]:not([data-current=true]){outline:2px solid var(--field-background-active);outline-offset:-2px;opacity:.85}.fmc [grid-calendar] p[data-active=true][data-current=true]{box-shadow:inset 0 0 0 2px var(--field-background-active)}.fmc span{text-align:center;padding:2px}.fmc span p{color:var(--field-placeholder);padding:8px 5px}.fmc [grid-calendar]>span{box-sizing:border-box;justify-content:stretch;align-items:stretch;min-height:0;padding:0;display:flex}.fmc [grid-calendar]>span>b,.fmc [grid-calendar]>span>p{box-sizing:border-box;border-radius:var(--date-popup-cell-radius);flex:auto;justify-content:center;align-items:center;width:100%;min-height:0;margin:0;padding:0;display:flex}.fmc .fms{cursor:ns-resize}.fmc .fmp{cursor:pointer}}\n\n@layer elcrm-form{.fso{z-index:var(--elcrm-z-popover);background:var(--select-overlay);position:fixed;inset:0}.fsl{--select-icon:calc(var(--select-height,52px) / 1.5);--select-icon-padding:calc((var(--select-height,52px) - var(--select-icon)) / 2);background:var(--select-background);box-shadow:var(--popup-shadow);z-index:var(--elcrm-z-popover-front);border-radius:var(--select-radius,20px);max-height:var(--select-max-height,300px);scrollbar-width:none;-ms-overflow-style:none;margin:0;padding:0;display:block;position:fixed;overflow:hidden auto}.fsl::-webkit-scrollbar{background:0 0;width:0;height:0;display:none}.fsl ul{width:100%;max-height:var(--select-max-height,300px);scrollbar-width:none;-ms-overflow-style:none;margin:0;padding:0;list-style:none;display:block;overflow:hidden auto}.fsl ul::-webkit-scrollbar{background:0 0;width:0;height:0;display:none}.fsl li{border-bottom:var(--select-separator);cursor:pointer;padding:0 var(--field-padding-inline);color:var(--select-color);height:var(--select-height,52px);line-height:var(--select-height,52px);font-size:var(--select-font-size,var(--control-font-size));white-space:nowrap;text-overflow:ellipsis;opacity:1;margin:0;display:block;overflow:hidden;text-align:left!important;border-left:0!important}.fsl li[aria-selected=true]{background:var(--select-li-selected-bg)}.fsl li:hover{background:var(--select-li-hover-bg)}.fsl li[data-focus=true]{background:var(--select-li-focus-bg)}.fsl li:last-child{border-bottom:0}.fsi{width:var(--select-icon);height:var(--select-icon);color:var(--field-color);right:var(--select-icon-padding);top:var(--select-icon-padding);position:absolute}.fsp{color:var(--field-placeholder);font-weight:400}.fsf{cursor:pointer}.fsf[aria-disabled=true]{cursor:not-allowed}}\n\n@layer elcrm-form{.fco{z-index:var(--elcrm-z-popover);background:var(--select-overlay);position:fixed;inset:0}.fcp{z-index:var(--elcrm-z-popover-front);box-sizing:border-box;width:var(--color-picker-width);padding:var(--color-picker-pad);background:var(--select-background);color:var(--select-color);border-radius:var(--color-picker-radius);box-shadow:var(--popup-shadow);flex-direction:column;gap:8px;display:flex;position:fixed}.fcv{aspect-ratio:1/.55;cursor:crosshair;touch-action:none;border-radius:8px;width:100%;max-height:140px;position:relative;overflow:hidden}.fcw{background:linear-gradient(90deg,#fff,#0000);position:absolute;inset:0}.fcb{background:linear-gradient(#0000,#000);position:absolute;inset:0}.fch{width:var(--color-picker-handle);height:var(--color-picker-handle);margin:calc(var(--color-picker-handle) / -2) 0 0 calc(var(--color-picker-handle) / -2);pointer-events:none;box-sizing:border-box;border:2px solid #fff;border-radius:50%;position:absolute;box-shadow:0 0 0 1px #00000059}.fcr{align-items:center;gap:8px;display:flex}.fce{border-radius:var(--color-picker-input-radius);background:var(--field-background);width:26px;height:26px;color:var(--field-icon-color);cursor:pointer;border:none;flex:none;justify-content:center;align-items:center;padding:0;display:inline-flex}.fce:hover{color:var(--field-color)}.fcs{flex-direction:column;flex:1;gap:8px;min-width:0;display:flex}.fcl{cursor:pointer;touch-action:none;border-radius:999px;height:10px;position:relative}.fcu{background:linear-gradient(90deg,red 0%,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red 100%)}.fca{background-image:linear-gradient(to right, transparent, var(--alpha-color)), linear-gradient(45deg, #777 25%, transparent 25%), linear-gradient(-45deg, #777 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #777 75%), linear-gradient(-45deg, transparent 75%, #777 75%);background-color:#bbb;background-position:0 0,0 0,0 4px,4px -4px,-4px 0;background-size:100% 100%,8px 8px,8px 8px,8px 8px,8px 8px}.fcd{width:var(--color-picker-handle);height:var(--color-picker-handle);margin:calc(var(--color-picker-handle) / -2) 0 0 calc(var(--color-picker-handle) / -2);pointer-events:none;box-sizing:border-box;background:0 0;border:2px solid #fff;border-radius:50%;position:absolute;top:50%;box-shadow:0 0 0 1px #00000059}.fci{align-items:center;gap:6px;display:flex}.fcf{color:var(--field-placeholder);flex:none;padding:0 2px;font-size:12px}.fcn{box-sizing:border-box;border-radius:var(--color-picker-input-radius);background:var(--field-background);min-width:0;height:28px;color:var(--field-color);font:inherit;border:none;outline:none;flex:1;padding:0 8px;font-size:13px}.fcn:focus{box-shadow:0 0 0 2px var(--field-focus-ring)}.fcx{text-align:center;flex:0 0 56px}.fcy{grid-template-columns:repeat(8,1fr);place-items:center;gap:4px;padding:0;display:grid}.fcz{width:var(--color-picker-swatch);height:var(--color-picker-swatch);cursor:pointer;background:var(--swatch);border:none;border-radius:50%;padding:0;transition:transform .12s;box-shadow:inset 0 0 0 1px #0000001f}.fcz[aria-checked=true]{z-index:1;box-shadow:inset 0 0 0 1px #00000026, 0 0 0 2px var(--select-background), 0 0 0 3px #ffffff59;transform:scale(1.35)}.fcz:disabled{cursor:not-allowed;opacity:.5}.fct{cursor:pointer;align-items:center;gap:var(--field-icon-gap);flex:1;min-width:0;height:auto;min-height:0;display:flex}.fct[aria-disabled=true]{cursor:not-allowed}.fcq{overflow:hidden}.fcq>div{min-width:0}.fcc{background-color:var(--preview-color);background-image:linear-gradient(var(--preview-color), var(--preview-color)), linear-gradient(45deg, #c6c6c8 25%, transparent 25%), linear-gradient(-45deg, #c6c6c8 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #c6c6c8 75%), linear-gradient(-45deg, transparent 75%, #c6c6c8 75%);background-position:0 0,0 0,0 3px,3px -3px,-3px 0;background-size:100% 100%,6px 6px,6px 6px,6px 6px,6px 6px;border-radius:50%;flex:none;width:22px;height:22px;box-shadow:inset 0 0 0 1px #00000026}.fcg{text-overflow:ellipsis;white-space:nowrap;min-width:0;font-size:var(--control-font-size);font-variant-numeric:tabular-nums;flex:1;overflow:hidden}.fct:has(+.fcj){flex:none;margin-left:-1px;padding-left:3px}.fct:has(+.fcj) .fcg{flex:none;width:9ch;min-width:9ch;max-width:9ch}.fcm{color:var(--field-placeholder);font-weight:400}.fcj{scrollbar-width:none;-ms-overflow-style:none;flex-wrap:nowrap;flex:1;align-items:center;gap:4px;min-width:0;max-width:100%;margin-left:0;padding:0 2px;display:flex;overflow:auto hidden}.fcj::-webkit-scrollbar{width:0;height:0;display:none}.fck{cursor:pointer;background:var(--swatch);transform-origin:50%;border:none;border-radius:50%;flex:none;width:18px;min-width:18px;height:18px;padding:0;transition:box-shadow .12s;box-shadow:inset 0 0 0 1px #0000001f}.fck[data-exit=true]{pointer-events:none;animation:.22s ease-in forwards fcq0}.fck:disabled{cursor:not-allowed;opacity:.5}@keyframes fcq0{0%{opacity:1;width:18px;min-width:18px;transform:scale(1)}55%{opacity:.7;transform:scale(.55)}to{opacity:0;width:0;min-width:0;box-shadow:none;margin:0;transform:scale(0)}}.fcc[data-enter=true]{animation:.28s cubic-bezier(.22,1,.36,1) fcq1}@keyframes fcq1{0%{opacity:0;transform:scale(.2)}70%{opacity:1;transform:scale(1.06)}to{opacity:1;transform:scale(1)}}}\n\n@layer elcrm-form{.fkr>div{align-items:center;width:100%;min-height:0;padding:0;line-height:normal;display:flex}.fkr[data-variant=plain]{border-radius:0;overflow:visible;box-shadow:none!important;background:0 0!important;border:none!important;min-height:0!important;padding:0!important}.fkr[data-variant=plain]:hover,.fkr[data-variant=plain]:focus-within{box-shadow:none!important;background:0 0!important;border:none!important}.fkr[data-variant=plain]>div{align-items:flex-start}.fkr[data-size=sm]>div,.fkr[data-size=s]>div{align-items:center;min-height:0}.fkp{width:100%;min-width:0}.fkc{width:100%;min-height:0;color:inherit;font:inherit;text-align:left;cursor:pointer;background:0 0;border:0;outline:none;align-items:center;gap:12px;margin:0;padding:0;display:flex}.fkc[data-align=top]{align-items:flex-start}.fkc[data-align=bottom]{align-items:flex-end}.fkc[data-align=center]{align-items:center}.fkc[data-align=top] .fkb{margin-top:calc((1.25em - var(--field-check-size)) / 2)}.fkc[data-align=bottom] .fkb{margin-bottom:calc((1.25em - var(--field-check-size)) / 2)}.fkc:focus-visible{box-shadow:var(--field-focus-shadow);border-radius:calc(var(--field-radius) - 2px)}.fkc[data-focus-ring=false]:focus-visible{box-shadow:none}.fkc[aria-disabled=true]{cursor:not-allowed}.fkc[data-size=sm],.fkc[data-size=s]{border-radius:8px;align-items:center;gap:10px;min-height:0;padding:0}:is(.fkc[data-size=sm],.fkc[data-size=s]) .fkb{border-radius:5px;width:18px;height:18px}:is(.fkc[data-size=sm],.fkc[data-size=s]) .fkm{width:9px;height:5px}:is(.fkc[data-size=sm],.fkc[data-size=s]) .fkt{padding-top:0;font-size:13px;line-height:1.2}.fkc[data-size=sm][data-variant=plain]:hover:not([aria-disabled=true]),.fkc[data-size=s][data-variant=plain]:hover:not([aria-disabled=true]){background:var(--field-background-focus)}.fkb{width:var(--field-check-size);height:var(--field-check-size);border:var(--field-check-box-border);background:0 0;border-radius:8px;flex:none;justify-content:center;align-items:center;transition:background-color .16s,border-color .16s,opacity .16s;display:inline-flex}.fkm{border-top:none;border-bottom:2px solid #fcfff4;border-left:2px solid #fcfff4;border-right:none;width:11px;height:6px;transform:translateY(-1px)rotate(-45deg)}.fkt{min-width:0;color:inherit;font-size:var(--control-font-size);flex:auto;padding-top:0;line-height:1.25}.fkc[aria-checked=true] .fkb{background:var(--field-background-active)}}\n\n@layer elcrm-form{.frd>div{flex-direction:column;align-items:stretch;gap:4px;width:100%;min-height:0;padding:0;line-height:normal;display:flex}.fri>div{flex-flow:wrap;align-items:center;gap:8px 16px}.frt{color:inherit;font:inherit;text-align:left;cursor:pointer;background:0 0;border:0;outline:none;align-items:center;gap:10px;margin:0;padding:0;display:inline-flex}.frt[data-align=top]{align-items:flex-start}.frt[data-align=bottom]{align-items:flex-end}.frt[data-align=center]{align-items:center}.frt[data-align=top] .fro{margin-top:calc((1.25em - var(--field-radio-size)) / 2)}.frt[data-align=bottom] .fro{margin-bottom:calc((1.25em - var(--field-radio-size)) / 2)}.frt:focus-visible{box-shadow:var(--field-focus-shadow);border-radius:6px}.frt[aria-disabled=true]{cursor:not-allowed;opacity:.7}.fro{width:var(--field-radio-size);height:var(--field-radio-size);border:var(--field-check-box-border);border-radius:50%;flex:none;justify-content:center;align-items:center;display:inline-flex}.frf{background:var(--field-background-active);border-radius:50%;width:10px;height:10px}.frx{font-size:var(--control-font-size);line-height:1.25}}\n\n@layer elcrm-form{.ftr>div{text-wrap:nowrap;align-items:center;min-width:0;display:flex;overflow:visible}.ftr .fti{justify-content:flex-start;align-items:center;gap:4px;width:100%;min-width:0;display:flex}.ftr.ftc .fti{justify-content:center}.ftr .fts{opacity:.65;-webkit-user-select:none;user-select:none;flex:none;padding:0;font-weight:500;transform:translateY(-1px)}.ftr .ftb{color:var(--field-icon-color);cursor:pointer;background:0 0;border:0;outline:none;flex:none;justify-content:center;align-items:center;margin:0;padding:0;line-height:0;display:inline-flex}.ftr .ftb:hover:not(:disabled){color:var(--field-color)}.ftr .ftb:focus-visible{box-shadow:var(--field-focus-shadow);border-radius:6px}.ftr .ftb:disabled{cursor:not-allowed;opacity:.5}.ftr .ftp{box-sizing:border-box;width:2.25ch;min-width:2.25ch;color:inherit;font:inherit;font-variant-numeric:tabular-nums;line-height:inherit;text-align:center;cursor:text;scrollbar-width:none;-ms-overflow-style:none;background:0 0;border:0;border-radius:6px;outline:none;flex:none;min-height:0;margin:0;padding:0;overflow:hidden}.ftr .ftp::-webkit-scrollbar{background:0 0;width:0;height:0;display:none}.ftr .ftp[contenteditable=false]{cursor:not-allowed;opacity:.7}.ftr .ftp:empty:before{content:attr(placeholder);color:var(--field-placeholder);opacity:1;font-weight:400}.ftr .ftp:focus:empty:before{content:none}.ftr .ftp:focus-visible{background:0 0}.ftr.ftc .ftp{text-align:center}}\n\n@layer elcrm-form{.fir>div,.fir .fin{align-items:center;gap:10px;width:100%;min-height:0;line-height:normal;display:flex;overflow:visible}.fin{flex:1;min-width:0;position:relative}.fip{opacity:0;pointer-events:none;width:1px;height:1px;position:absolute}.fib{padding:var(--field-padding);background:var(--field-background-focus);color:inherit;font:inherit;cursor:pointer;white-space:nowrap;border:0;border-radius:8px;flex:none;font-size:13px}.fib:disabled{cursor:not-allowed;opacity:.6}.fil{flex-direction:column;flex:1;gap:2px;min-width:0;display:flex;overflow:hidden}.fie{color:var(--field-placeholder);font-size:13px}.fit{align-items:baseline;gap:8px;min-width:0;display:flex}.fim{text-overflow:ellipsis;white-space:nowrap;font-size:13px;overflow:hidden}.fiz{color:var(--field-placeholder);font-size:var(--field-error-size);flex:none}.fic{color:inherit;cursor:pointer;opacity:.65;background:0 0;border:0;flex:none;padding:0;font-size:18px;line-height:1}.fic:hover{opacity:1}}\n\n@layer elcrm-form{.fgr>div,.fgr .fgi{flex-wrap:wrap;align-items:center;gap:6px;width:100%;min-height:0;padding:0;line-height:normal;display:flex;overflow:visible}.fgi{flex:1;min-width:0}.fgc{background:var(--field-background-focus);border-radius:999px;align-items:center;gap:2px;max-width:100%;padding:0 6px;line-height:1.35;display:inline-flex}.fgl{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.fgm{color:inherit;cursor:pointer;opacity:.65;background:0 0;border:0;padding:0 2px;font-size:16px;line-height:1}.fgm:hover{opacity:1}.fgn{min-width:80px;color:inherit;font:inherit;background:0 0;border:0;outline:none;flex:80px;margin:0;padding:0}}\n\n@layer elcrm-form{.fnr>div{outline:none;align-items:center;gap:2px;width:100%;min-height:0;line-height:normal;display:flex}.fns{color:var(--field-placeholder);cursor:pointer;font-size:var(--field-rating-size);background:0 0;border:0;outline:none;padding:0 2px;line-height:1}.fns:disabled{cursor:not-allowed;opacity:.6}.fns:focus-visible{box-shadow:var(--field-focus-shadow);border-radius:4px}.fno{color:var(--field-range-fill)}}\n\n@layer elcrm-form{.fdr{align-items:stretch;box-shadow:none!important;background:0 0!important;border:0!important;gap:0!important;min-height:0!important;padding:0!important;overflow:visible!important}.fdr:hover,.fdr:focus-within{box-shadow:none!important;background:0 0!important;border:0!important}.fdr[data-disabled=true]{opacity:1;background:0 0!important}.fdr>div{flex:none;min-height:0;padding:0;line-height:normal}.fdi{align-items:center;gap:var(--field-code-gap);width:max-content;max-width:100%;min-height:var(--field-code-size);flex-wrap:nowrap;display:flex}.fdc{box-sizing:border-box;width:var(--field-code-size);height:var(--field-code-size);flex:0 0 var(--field-code-size);border:var(--field-border);border-radius:var(--field-radius);background:var(--field-background);color:var(--field-color);font:inherit;font-size:max(var(--control-font-size), calc(var(--field-code-size) * .42));font-variant-numeric:tabular-nums;line-height:calc(var(--field-code-size) - 2px);text-align:center;outline:none;margin:0;padding:0;transition:border-color .16s,box-shadow .16s,background-color .16s,opacity .16s}.fdc::placeholder{color:var(--field-placeholder);opacity:1;font-weight:400}.fdc:hover:not(:disabled){border-color:var(--field-border-hover)}.fdc:focus{border-color:var(--field-border-focus);box-shadow:var(--field-focus-shadow);background:var(--field-background-focus)}.fdc:disabled{background:var(--field-background-disabled);border-color:var(--field-border-disabled);color:var(--field-color-disabled);cursor:not-allowed;opacity:.85}.fdc::selection{background:var(--field-selection-bg);color:var(--field-selection-color)}.fds{width:.75em;color:var(--field-placeholder);font-size:max(var(--control-font-size), calc(var(--field-code-size) * .35));line-height:var(--field-code-size);text-align:center;-webkit-user-select:none;user-select:none;pointer-events:none;flex:none}}\n\n@layer elcrm-form{.fhr{align-items:stretch}.fhr>div{min-height:var(--field-note-height);line-height:var(--field-note-line-height);flex-direction:column;align-items:flex-start;padding:0;display:flex;overflow:visible}.fhw{flex-direction:column;align-items:flex-start;width:100%;min-width:0;display:flex}.fht{width:100%;max-width:100%;padding:var(--field-padding-block) 0;box-sizing:border-box;border-bottom:1px solid #00000014;flex-wrap:nowrap;justify-content:flex-start;align-items:center;gap:2px;margin:0;display:inline-flex}.fhb{box-sizing:border-box;width:28px;min-width:28px;height:28px;color:inherit;font:inherit;cursor:pointer;background:0 0;border:0;border-radius:6px;flex:none;justify-content:center;align-items:center;margin:0;padding:0;font-size:13px;font-weight:600;line-height:1;display:inline-flex}.fhb:hover:not(:disabled){background:var(--field-background-focus)}.fhb:disabled{opacity:.5;cursor:not-allowed}.fhe{box-sizing:border-box;width:100%;min-height:calc(var(--field-note-height) - 28px - 2 * var(--field-padding-block));overflow-wrap:anywhere;line-height:var(--field-note-line-height);scrollbar-width:none;-ms-overflow-style:none;outline:none;padding:0;overflow:hidden auto}.fhe::-webkit-scrollbar{background:0 0;width:0;height:0;display:none}.fhe:empty:before{content:attr(placeholder);color:var(--field-placeholder);pointer-events:none}.fhe ul,.fhe ol{margin:.25em 0;padding-left:1.25em}}\n\n@layer elcrm-form{.fxr{align-items:stretch;overflow:visible;box-shadow:none!important;background:0 0!important;border:0!important;padding:0!important}.fxr>div{min-height:auto;padding:0;line-height:normal;display:block;overflow:visible}.fxr[data-dragging=true]{background:0 0!important}.fxi{flex-direction:column;gap:16px;width:100%;min-width:0;display:flex;position:relative}.fxi[data-layout=fill],.fxi[data-layout=overlay]{gap:0;height:100%;min-height:0}.fxr[data-layout=fill],.fxr[data-layout=overlay]{width:100%;height:100%}:is(.fxr[data-layout=fill],.fxr[data-layout=overlay])>div{flex-direction:column;align-items:stretch;height:100%;min-height:0;display:flex}.fxz{box-sizing:border-box;width:100%;min-height:var(--field-drag-min-height);padding:var(--field-padding);border:var(--field-drag-border);border-radius:calc(var(--field-radius) - 2px);color:inherit;font:inherit;text-align:center;cursor:pointer;background:0 0;outline:none;flex-direction:column;justify-content:center;align-items:center;gap:6px;margin:0;transition:border-color .16s,background-color .16s,border-style .16s;display:flex}.fxz:hover:not(:disabled){border-color:var(--field-drag-border-hover);background:var(--field-background-focus)}.fxz[data-dragging=true]{border-color:var(--field-range-fill);background:color-mix(in srgb, var(--field-range-fill) 10%, transparent);border-style:solid}.fxz:focus-visible{box-shadow:var(--field-focus-shadow)}.fxz:disabled{cursor:not-allowed;opacity:.65}.fxz[data-layout=fill],.fxz[data-layout=overlay]{flex:auto;height:100%;min-height:100%}.fxz[data-layout=overlay]{padding:var(--field-padding);background:0 0;justify-content:flex-end}.fxz[data-layout=overlay]:hover:not(:disabled){background:var(--field-background-focus)}.fxh{font-size:var(--control-font-size);color:inherit;line-height:1.35}.fxa{font-size:var(--field-error-size);color:var(--field-placeholder);letter-spacing:.01em}.fxl{flex-direction:column;gap:6px;margin:4px 0 0;padding:0;list-style:none;display:flex}.fxt{min-width:0;padding:var(--field-padding);background:var(--field-background-focus);border-radius:10px;align-items:center;gap:10px;display:flex}.fxm{flex-direction:column;flex:1;gap:2px;min-width:0;display:flex}.fxn{text-overflow:ellipsis;white-space:nowrap;font-size:var(--control-font-size);color:inherit;line-height:1.3;overflow:hidden}.fxs{font-size:var(--field-error-size);color:var(--field-placeholder);line-height:1.2}.fxd{width:28px;height:28px;color:var(--field-placeholder);cursor:pointer;background:0 0;border:0;border-radius:8px;flex:none;justify-content:center;align-items:center;padding:0;font-size:18px;line-height:1;display:inline-flex}.fxd:hover{color:var(--field-error-color);background:color-mix(in srgb, var(--field-error-color) 10%, transparent)}.fxc{color:var(--field-placeholder);font:inherit;font-size:var(--field-error-size);cursor:pointer;padding:var(--field-padding-block) 0;background:0 0;border:0;align-self:flex-start;margin-top:2px}.fxc:hover{color:var(--field-error-color)}}\n\n@layer elcrm-form{.fbr{align-items:stretch;overflow:hidden;gap:0!important;padding:0!important}.fbr:focus-within{background:var(--field-background)!important;border-color:var(--field-border)!important;box-shadow:none!important}.fbr[data-disabled=true]{opacity:.85;cursor:not-allowed}.fbr>div{min-width:0;min-height:var(--field-height);flex:1;padding:0;line-height:normal;overflow:visible}.fbi{width:100%;min-height:var(--field-height);flex-wrap:nowrap;align-items:stretch;display:flex}.fbt{box-sizing:border-box;justify-content:center;align-items:center;gap:var(--field-icon-gap);min-width:0;min-height:var(--field-height);padding:0 var(--field-padding-inline);border:0;border-right:var(--field-tabs-divider);color:var(--field-color);font:inherit;font-size:var(--control-font-size);text-align:center;cursor:pointer;background:0 0;border-radius:0;outline:none;flex:1 1 0;margin:0;font-weight:500;line-height:1.2;transition:background-color .16s,color .16s,opacity .16s;display:inline-flex}.fbt:last-child{border-right:0}.fbt:hover:not(:disabled):not(.fba){background:var(--field-background-focus)}.fbt:focus-visible{box-shadow:inset 0 0 0 2px var(--field-focus-ring);background:var(--field-background-focus);z-index:1;position:relative}.fbt:first-child:focus-visible{border-radius:var(--field-radius) 0 0 var(--field-radius)}.fbt:last-child:focus-visible{border-radius:0 var(--field-radius) var(--field-radius) 0}.fbt:only-child:focus-visible{border-radius:var(--field-radius)}.fbt:disabled{color:var(--field-color-disabled);cursor:not-allowed;opacity:.65}.fba{background:var(--field-tabs-active-bg);color:var(--field-color)}.fba:hover:not(:disabled){background:var(--field-tabs-active-bg)}.fbo{width:var(--field-icon-size);height:var(--field-icon-size);color:var(--field-icon-color);flex:none;justify-content:center;align-items:center;line-height:0;display:inline-flex}.fbo svg{width:var(--field-icon-size);height:var(--field-icon-size);display:block}.fba .fbo{color:var(--field-color)}.fbl{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}}\n\n@layer elcrm-form{.fur{gap:var(--field-group-gap);width:var(--field-width);background:0 0;border:0;flex-direction:column;min-width:0;margin:0;padding:0;display:flex}}\n";
     document.head.appendChild(el);
 })();
 
-import e from"../styles/Field.module.js";import{createContext as t,useContext as n,useId as r,useMemo as i}from"react";import{jsx as a,jsxs as o}from"react/jsx-runtime";var s=t(null);function c(){return n(s)}var l=({element_blok:t={className:[]},element_input:n={className:[],props:{}},type:c=`input`,label:l,id:u,error:d,before:f,after:p,children:m,size:h=`md`})=>{let g=r(),_=u||`elcrm-field-${g.replace(/:/g,``)}`,v=`${_}-label`,y=!!(d&&d.length>0),b=y?`${_}-error`:void 0,x=i(()=>({controlId:_,labelId:v,errorId:b,describedBy:b}),[_,v,b]),S=i(()=>[e.l,...t.className||[]].filter(e=>e!==void 0).join(` `),[t.className?.join(` `)]),C=i(()=>[e.f,...n.className||[],y?e.e:``].join(` `),[n.className?.join(` `),y]);return a(s.Provider,{value:x,children:o(`div`,{"data-field":c,"data-size":h,className:S,children:[l?a(`label`,{htmlFor:_,id:v,className:e.t,children:l}):null,f,a(`div`,{className:C,...n.props||{},children:m}),y?a(`div`,{id:b,className:e.m,role:`alert`,children:d}):null,p]})})};export{l as default,c as useFieldA11y};
+import e from"../styles/Field.module.js";import{createContext as t,useContext as n,useId as r,useMemo as i}from"react";import{jsx as a,jsxs as o}from"react/jsx-runtime";var s=t(null);function c(){return n(s)}var l=({element_blok:t,blok:n,element_input:c,control:l,type:u=`input`,label:d,id:f,error:p,before:m,after:h,children:g,size:_=`m`})=>{let v=n??t??{className:[]},y=l??c??{className:[],props:{}},b=_===`s`||_===`sm`?`s`:_===`l`?`l`:`m`,x=r(),S=f||`elcrm-field-${x.replace(/:/g,``)}`,C=`${S}-label`,w=!!(p&&p.length>0),T=w?`${S}-error`:void 0,E=i(()=>({controlId:S,labelId:C,errorId:T,describedBy:T}),[S,C,T]),D=i(()=>[e.l,...v.className||[]].filter(e=>e!==void 0).join(` `),[v.className?.join(` `)]),O=i(()=>[e.f,...y.className||[],w?e.e:``].join(` `),[y.className?.join(` `),w]),k=y.props||{},A=k[`data-disabled`]===`true`,j=k.onMouseDown,M=k.onPointerDown,N=k.onFocus;return a(s.Provider,{value:E,children:o(`div`,{"data-field":u,"data-size":b,className:D,children:[d?a(`label`,{htmlFor:A?void 0:S,id:C,className:e.t,children:d}):null,m,a(`div`,{className:O,...k,...A?{inert:``,"aria-disabled":!0,...d?{"aria-labelledby":C}:{},onMouseDown:e=>{e.preventDefault(),j?.(e)},onPointerDown:e=>{e.preventDefault(),M?.(e)},onFocus:e=>{e.currentTarget.blur(),N?.(e)}}:{},children:g}),w?a(`div`,{id:T,className:e.m,role:`alert`,children:p}):null,h]})})};export{l as default,c as useFieldA11y};

package/dist/dark.css

@@ -2,27 +2,34 @@
   Токены: --control-* (размеры), --field-* (контейнер), --field-selection-* (выделение текста)
   Тёмная тема: фокус и выделение — нейтральные серые (без синего), в духе системного серого UI.
   Фокус: 0px border + --field-focus-ring + --field-background-focus
+
+  Отступы капсулы: один --field-padding (block + inline), масштабируется от --field-height / size.
 */
 [data-theme="dark"] {
     --control-height: 44px;
+    --control-height-s: 32px;
+    --control-height-l: 48px;
     --control-radius: 12px;
-    --control-side-padding: 14px;
-    --control-inner-padding: 0px 15px;
     --control-font-size: 17px;
 
     --field-height: var(--control-height);
     --field-width: 100%;
-    --field-padding: 8px 12px;
+    /* Единый padding капсулы; size s|m|l меняет --field-height → отступы пересчитаются */
+    --field-padding-block: calc(var(--field-height) * 0.18);
+    --field-padding-inline: calc(var(--field-height) * 0.32);
+    --field-padding: var(--field-padding-block) var(--field-padding-inline);
+
     --field-border: 0px solid #38383a;
-    --field-border-hover: 0px solid #48484a;
-    --field-border-focus: 0px solid #636366;
+    /* hover/focus/disabled — только цвет (в CSS: border-color) */
+    --field-border-hover: #48484a;
+    --field-border-focus: #636366;
     --field-focus-ring: rgba(235, 235, 245, 0.22);
     --field-focus-shadow: 0 0 0 3px var(--field-focus-ring);
     --field-radius: var(--control-radius);
     --field-background: #1c1c1e;
     --field-background-focus: rgba(255, 255, 255, 0.06);
     --field-background-disabled: #2c2c2e;
-    --field-border-disabled: 1px solid #48484a;
+    --field-border-disabled: #48484a;
     --field-color-disabled: #636366;
     --field-color: #ffffff;
     --field-placeholder: #8e8e93;
@@ -41,12 +48,11 @@
     --field-icon-color: #8e8e93;
     --field-icon-gap: 10px;
     --field-icon-size: 20px;
-    --field-side-padding: var(--control-side-padding);
+    /* gap колонки label / капсула / error; подпись и ошибка — свои --field-label-gap / --field-error-gap */
     --field-block-gap: 0;
+    /* Textarea/Rich: только мин. высота и интерлиньяж (padding = --field-padding) */
     --field-note-height: 100px;
     --field-note-line-height: 1.5;
-    --field-note-padding: 8px;
-    --field-note-padding-top: 8px;
 
     --field-selection-bg: rgba(235, 235, 245, 0.18);
     --field-selection-color: #ffffff;
@@ -55,8 +61,16 @@
     --field-range-fill: #30d158;
     --field-range-track: #39393d;
     --field-range-bar-height: 14px;
+    --field-range-line-height: 2px;
+    --field-range-thumb-size: 12px;
+    --field-range-thumb: #e4e4e7;
 
-    --field-code-cell-size: 36px;
+    --field-group-gap: 12px;
+    --field-code-gap: 8px;
+    /* размер OTP-ячейки: по умолчанию = высота поля (size s/m/l); можно задать 72px / 5rem */
+    --field-code-size: var(--field-height);
+    --field-tabs-divider: 1px solid #48484a;
+    --field-tabs-active-bg: rgba(255, 255, 255, 0.1);
     --field-rating-size: 22px;
     --field-radio-size: 20px;
 
@@ -64,6 +78,10 @@
     --field-drag-border-hover: #8e8e93;
     --field-drag-min-height: 88px;
 
+    /* Оверлеи (попапы Select / Date / Color); обычно перекрываются inline z-index */
+    --elcrm-z-popover: 1000;
+    --elcrm-z-popover-front: 1001;
+
     /* Списки / календарь: только серые пласты */
     --select-overlay: transparent;
     --select-background: #2c2c2e;
@@ -72,10 +90,16 @@
     --select-li-hover-bg: #3a3a3c;
     --select-li-focus-bg: #48484a;
     --select-li-selected-bg: #48484a;
+    --select-height: 52px;
+    --select-font-size: var(--control-font-size);
+    --select-radius: 20px;
+    --select-max-height: 300px;
+
+    /* Общая тень всплывающих окон (Date / Select / Color / Time) */
+    --popup-shadow: 0 6px 24px 0 #00000040;
 
     /* Календарь (Date popup) */
     --date-popup-radius: 10px;
-    --date-popup-shadow: 5px 7px 18px 0 #000000a8;
     --date-popup-min-width: 259px;
     --date-popup-row-height: 34px;
     --date-popup-cell-radius: 5px;
@@ -85,4 +109,7 @@
     --color-picker-width: 260px;
     --color-picker-radius: 16px;
     --color-picker-input-radius: 5px;
+    --color-picker-pad: 10px;
+    --color-picker-swatch: 20px;
+    --color-picker-handle: 14px;
 }

package/dist/fields/Card.d.ts

@@ -0,0 +1,12 @@
+import { default as React } from 'react';
+import { TInput } from './type';
+export type TCard = TInput & {
+    /** Встроенная проверка Луна (по умолчанию true) */
+    validate?: boolean;
+};
+declare function CardField({ value, form, onValue, onBlur: onBlurField, name, placeholder, label, error, hidden, disabled, className, after, before, maxLength, autoComplete, id, size, validate, }: TCard): import("react/jsx-runtime").JSX.Element | null;
+declare namespace CardField {
+    var displayName: string;
+}
+declare const _default: React.MemoExoticComponent<typeof CardField>;
+export default _default;

package/dist/fields/Card.js

@@ -0,0 +1 @@
+import e from"../styles/Field.module.js";import t,{useFieldA11y as n}from"../core/Field.js";import{useFormFieldState as r}from"../hooks/use.js";import{createFieldEmit as i}from"./emit.js";import{isEmptyTextLike as a}from"./visibility.js";import{cardDigits as o,emptyCardBrandLock as s,formatCardNumber as c,stepCardBrand as l,validateCardNumber as u}from"./cardUtils.js";import d from"react";import{jsx as f,jsxs as p}from"react/jsx-runtime";function m({brand:e}){let t=e===`visa`?`Visa`:e===`mastercard`?`Mastercard`:e===`amex`?`Amex`:e===`mir`?`Мир`:e===`unionpay`?`UnionPay`:`Карта`;return f(`span`,{"aria-hidden":!0,title:t,style:{display:`inline-flex`,alignItems:`center`,justifyContent:`center`,minWidth:36,height:24,padding:`0 4px`,borderRadius:4,fontSize:10,fontWeight:700,letterSpacing:`0.02em`,lineHeight:1,color:`var(--field-color)`,background:`var(--field-background-focus)`,userSelect:`none`},children:e===`visa`?`VISA`:e===`mastercard`?`MC`:e===`amex`?`AMEX`:e===`mir`?`МИР`:e===`unionpay`?`UP`:`••••`})}function h(){return f(`span`,{"aria-hidden":!0,style:{display:`inline-flex`,alignItems:`center`,justifyContent:`center`,width:20,height:20,borderRadius:`50%`,background:`var(--field-error-color)`,color:`#fff`,fontSize:12,fontWeight:700,lineHeight:1,flexShrink:0},children:`i`})}function g({value:n=``,form:u,onValue:g,onBlur:v,name:y=``,placeholder:b=`0000 0000 0000 0000`,label:x=``,error:S=``,hidden:C=!1,disabled:w=!1,className:T=``,after:E,before:D,maxLength:O,autoComplete:k=`cc-number`,id:A,size:j=`m`,validate:M=!0}){let{value:N,version:P}=r(u,y,n),F=!w,[I,L]=d.useState(()=>o(N));d.useEffect(()=>{L(o(N))},[N,P]);let R=I,z=c(R),[B,V]=d.useState(()=>l(o(N),s()));d.useEffect(()=>{V(l(o(N),s()))},[N,P]);let H=B.brand,U=d.useRef(null),[W,G]=d.useState(``),K=S||W,q=i(u,y,g);if(d.useEffect(()=>{let e=U.current;if(!e)return;let t=c(R);e.value!==t&&(e.value=t)},[R,P]),C&&a(R))return null;let J=D!=null&&D!==``?D:f(m,{brand:H}),Y=E!=null&&E!==``?E:K?f(h,{}):null;return p(t,{type:`card`,label:x,error:K,id:A,size:j,element_blok:{className:[T||``]},element_input:{className:[e.w],props:{"data-disabled":w||!F?`true`:void 0,"data-brand":H}},children:[f(`span`,{className:e.a,children:J}),f(_,{inputRef:U,name:y,display:z,placeholder:b,maxLength:O,disabled:w,editable:F,autoComplete:k,label:x,validate:M,emit:q,setDraftDigits:e=>{L(e),V(t=>l(e,t))},setLocalError:G,onBlurField:v}),Y?f(`span`,{className:e.a,children:Y}):null]})}function _({inputRef:t,name:r,display:i,placeholder:a,maxLength:s,disabled:l,editable:d,autoComplete:p,label:m,validate:h,emit:g,setDraftDigits:_,setLocalError:v,onBlurField:y}){let b=n(),x=(e,t)=>{let n=t.value,r=t.selectionStart??n.length,i=o(n.slice(0,r)).length,a=o(e),s=c(a);t.value=s;let l=s.length,u=0;for(let e=0;e<s.length;e++)if(/\d/.test(s[e])&&(u++,u>=i)){l=e+1;break}return t.setSelectionRange(l,l),a};return f(`div`,{className:e.x,children:f(`input`,{id:b?.controlId,ref:t,className:e.y,type:`text`,name:r||void 0,defaultValue:i,placeholder:a,maxLength:s??23,disabled:l,readOnly:!d,autoComplete:p,inputMode:`numeric`,spellCheck:!1,"aria-label":m?void 0:a||`Номер карты`,"aria-describedby":b?.describedBy,"aria-invalid":b?.errorId?!0:void 0,onChange:e=>{let t=x(e.target.value,e.target);_(t),h&&v(``),g(t)},onBlur:e=>{let t=o(e.target.value);e.target.value=c(t),_(t),g(t,!0),h&&v(u(t)),y?.({value:t,name:r})},onKeyDown:e=>{e.key===`Enter`&&e.preventDefault()}})})}g.displayName=`CardField`;var v=d.memo(g);export{v as default};

package/dist/fields/Check.d.ts

@@ -1,6 +1,8 @@
 import { TInput } from './type';
-export type TCheckSize = "sm" | "md";
+export type TCheckSize = "s" | "m" | "l" | "sm" | "md";
 export type TCheckVariant = "field" | "plain";
+/** Выравнивание квадрата относительно текста (многострочный label) */
+export type TCheckAlign = "top" | "center" | "bottom";
 export type TCheck = TInput & {
     /**
      * Плотность: `md` — как поле формы (по умолчанию),
@@ -17,8 +19,10 @@ export type TCheck = TInput & {
      * В popover/меню обычно `false`.
      */
     showFocusRing?: boolean;
+    /** Квадрат: top | center | bottom относительно текста. По умолчанию center */
+    align?: TCheckAlign;
 };
-declare function CheckField({ value, form, onValue, onBlur: onBlurField, name, placeholder, label, error, hidden, disabled, className, after, before, size, variant, showFocusRing, }: TCheck): import("react/jsx-runtime").JSX.Element | null;
+declare function CheckField({ value, form, onValue, onBlur: onBlurField, name, placeholder, label, error, hidden, disabled, className, after, before, size, variant, showFocusRing, align, }: TCheck): import("react/jsx-runtime").JSX.Element | null;
 declare namespace CheckField {
     var displayName: string;
 }

package/dist/fields/Check.js

@@ -1 +1 @@
-import e from"../styles/Field.module.js";import t,{useFieldA11y as n}from"../core/Field.js";import{useFormFieldState as r}from"../hooks/use.js";import i from"react";import{jsx as a,jsxs as o}from"react/jsx-runtime";function s(e){if(e===!0||e===1)return!0;if(typeof e==`string`){let t=e.trim().toLowerCase();return t===`1`||t===`true`||t===`on`||t===`yes`}return!1}function c({value:n=!1,form:c,onValue:u,onBlur:d,name:f=``,placeholder:p=``,label:m=``,error:h=``,hidden:g=!1,disabled:_=!1,className:v=``,after:y=``,before:b=``,size:x=`md`,variant:S=`field`,showFocusRing:C=!0}){let{value:w}=r(c,f,n),T=s(w),E=!_,D=p||``,O=i.useCallback(e=>{let t={value:e,name:f||``};c&&f&&c.setValue(t),u&&u!==c?.onValue&&u(t)},[c,f,u]),k=()=>{E&&O(!T)},A=e=>{E&&(e.key===` `||e.key===`Enter`)&&(e.preventDefault(),k())},j=()=>{!d||!f||d({value:s(c&&f?c.getValue(f,T):T),name:f})};return g&&!T?null:o(t,{type:`checkbox`,label:m,error:h,element_blok:{className:[v||``,S===`plain`?e.checkPlainBlok:``].filter(Boolean)},element_input:{className:[e.checkbox],props:{"data-disabled":_||!E?`true`:void 0,"data-size":x,"data-variant":S}},children:[b?a(`span`,{className:e.affix,children:b}):null,a(`div`,{children:a(l,{checked:T,label:m,text:D,disabled:_,editable:E,size:x,variant:S,showFocusRing:C,toggle:k,onKeyDown:A,onBlur:j})}),y?a(`span`,{className:e.affix,children:y}):null]})}c.displayName=`CheckField`;function l({checked:t,label:r,text:i,disabled:s,editable:c,size:l,variant:u,showFocusRing:d,toggle:f,onKeyDown:p,onBlur:m}){let h=n();return o(`button`,{type:`button`,id:h?.controlId,className:e.checkControl,role:`checkbox`,"aria-checked":t,"aria-label":r?void 0:i||`Чекбокс`,"aria-describedby":h?.describedBy,"aria-invalid":h?.errorId?!0:void 0,"aria-disabled":s||!c?!0:void 0,disabled:s||!c,"data-size":l,"data-variant":u,"data-focus-ring":d?`true`:`false`,onClick:f,onKeyDown:p,onBlur:m,children:[a(`span`,{className:e.checkBox,"aria-hidden":!0,children:t?a(`span`,{className:e.checkMark}):null}),i?a(`span`,{className:e.checkText,children:i}):null]})}export{c as default};
+import e from"../styles/Field.module.js";import t,{useFieldA11y as n}from"../core/Field.js";import{useFormFieldState as r}from"../hooks/use.js";import{createFieldEmit as i}from"./emit.js";import a from"../styles/Check.module.js";import o from"react";import{jsx as s,jsxs as c}from"react/jsx-runtime";function l(e){if(e===!0||e===1)return!0;if(typeof e==`string`){let t=e.trim().toLowerCase();return t===`1`||t===`true`||t===`on`||t===`yes`}return!1}function u({value:n=!1,form:u,onValue:f,onBlur:p,name:m=``,placeholder:h=``,label:g=``,error:_=``,hidden:v=!1,disabled:y=!1,className:b=``,after:x=``,before:S=``,size:C=`m`,variant:w=`field`,showFocusRing:T=!0,align:E=`center`}){let{value:D}=r(u,m,n),O=l(D),k=!y,A=h||``,j=o.useCallback(e=>{i(u,m,f)(e,!0)},[u,m,f]),M=()=>{k&&j(!O)},N=e=>{k&&(e.key===` `||e.key===`Enter`)&&(e.preventDefault(),M())},P=()=>{!p||!m||p({value:l(u&&m?u.getValue(m,O):O),name:m})};return v&&!O?null:c(t,{type:`checkbox`,label:g,error:_,element_blok:{className:[b||``,w===`plain`?a.p:``].filter(Boolean)},element_input:{className:[a.r],props:{"data-disabled":y||!k?`true`:void 0,"data-size":C,"data-variant":w}},children:[S?s(`span`,{className:e.a,children:S}):null,s(`div`,{children:s(d,{checked:O,label:g,text:A,disabled:y,editable:k,size:C,variant:w,showFocusRing:T,align:E,toggle:M,onKeyDown:N,onBlur:P})}),x?s(`span`,{className:e.a,children:x}):null]})}u.displayName=`CheckField`;function d({checked:e,label:t,text:r,disabled:i,editable:o,size:l,variant:u,showFocusRing:d,align:f,toggle:p,onKeyDown:m,onBlur:h}){let g=n();return c(`button`,{type:`button`,id:g?.controlId,className:a.c,role:`checkbox`,"aria-checked":e,"aria-label":t?void 0:r||`Чекбокс`,"aria-describedby":g?.describedBy,"aria-invalid":g?.errorId?!0:void 0,"aria-disabled":i||!o?!0:void 0,disabled:i||!o,"data-size":l,"data-variant":u,"data-align":f,"data-focus-ring":d?`true`:`false`,onClick:p,onKeyDown:m,onBlur:h,children:[s(`span`,{className:a.b,"aria-hidden":!0,children:e?s(`span`,{className:a.m}):null}),r?s(`span`,{className:a.t,children:r}):null]})}export{u as default};

package/dist/fields/Code.d.ts

@@ -1,14 +1,23 @@
 import { TInput } from './type';
-/** CodeField / OTP — код из N ячеек. Значение: строка цифр. */
+/** CodeField / OTP — ряд отдельных ячеек. Значение: строка. */
 export type TCode = TInput & {
     length?: number;
     /** Только цифры (по умолчанию) */
     numeric?: boolean;
+    /**
+     * Разбить ячейки на группы через «-».
+     * Например `group={3}` при `length={6}` → □□□ - □□□.
+     */
+    group?: number;
+    /**
+     * Сторона квадратной ячейки (переопределяет `--field-code-size`).
+     * По умолчанию ячейка = высота поля (`size` → `--field-height`).
+     * Число → px; строка — любое CSS-значение (`"4.5rem"`, `"96px"`).
+     */
+    cellSize?: number | string;
 };
-declare function CodeField({ value, form, onValue, onBlur: onBlurField, name, placeholder, label, error, hidden, disabled, className, after, before, length, numeric, autoComplete, }: TCode): import("react/jsx-runtime").JSX.Element | null;
+declare function CodeField({ value, form, onValue, onBlur: onBlurField, name, placeholder, label, error, hidden, disabled, className, after, before, size, length, numeric, group, cellSize, autoComplete, }: TCode): import("react/jsx-runtime").JSX.Element | null;
 declare namespace CodeField {
     var displayName: string;
 }
-/** Алиас OTP */
-export { CodeField as OtpField };
 export default CodeField;

package/dist/fields/Code.js

@@ -1 +1 @@
-import e from"../styles/Field.module.js";import t from"../core/Field.js";import{useFormFieldState as n}from"../hooks/use.js";import{isEmptyTextLike as r}from"./visibility.js";import i from"react";import{jsx as a,jsxs as o}from"react/jsx-runtime";function s({value:s=``,form:c,onValue:l,onBlur:u,name:d=``,placeholder:f=``,label:p=``,error:m=``,hidden:h=!1,disabled:g=!1,className:_=``,after:v=``,before:y=``,length:b=6,numeric:x=!0,autoComplete:S=`one-time-code`}){let{value:C,version:w}=n(c,d,s),T=!g,E=(x?String(C??``).replace(/\D/g,``):String(C??``)).slice(0,b),D=i.useRef([]);i.useEffect(()=>{},[w]);let O=(e,t=!1)=>{let n={value:e,name:d};c&&d&&(t?c.setValue(n):c.onValue(n)),l&&l!==c?.onValue&&l(n)},k=(e,t)=>{let n=E.padEnd(b,` `).split(``);n[e]=t;let r=n.join(``).replace(/ /g,``).slice(0,b);return O(r,!0),r},A=(e,t)=>{let n=x?t.replace(/\D/g,``):t;if(!n){k(e,``);return}if(n.length>1){let e=n.slice(0,b);O(e,!0);let t=Math.min(e.length,b-1);D.current[t]?.focus();return}k(e,n),e<b-1&&D.current[e+1]?.focus()};return h&&r(E)?null:o(t,{type:`code`,label:p,error:m,element_blok:{className:[_||``]},element_input:{className:[e.code],props:{"data-disabled":g||!T?`true`:void 0}},children:[y?a(`span`,{className:e.affix,children:y}):null,a(`div`,{className:e.codeInner,role:`group`,"aria-label":p||f||`Код`,children:Array.from({length:b},(t,n)=>a(`input`,{ref:e=>{D.current[n]=e},className:e.codeCell,type:`text`,inputMode:x?`numeric`:`text`,autoComplete:n===0?S:`off`,maxLength:b,disabled:g||!T,value:E[n]||``,placeholder:f?f[n]:``,"aria-label":`${n+1} из ${b}`,onChange:e=>A(n,e.target.value),onKeyDown:e=>{e.key===`Backspace`&&!E[n]&&n>0&&(e.preventDefault(),k(n-1,``),D.current[n-1]?.focus()),e.key===`ArrowLeft`&&n>0&&(e.preventDefault(),D.current[n-1]?.focus()),e.key===`ArrowRight`&&n<b-1&&(e.preventDefault(),D.current[n+1]?.focus())},onBlur:()=>{(n===b-1||document.activeElement===document.body)&&u?.({value:E,name:d})},onPaste:e=>{e.preventDefault();let t=e.clipboardData.getData(`text`)||``,n=(x?t.replace(/\D/g,``):t).slice(0,b);O(n,!0),D.current[Math.min(n.length,b-1)]?.focus()}},n))}),v?a(`span`,{className:e.affix,children:v}):null]})}s.displayName=`CodeField`;export{s as default};
+import e from"../styles/Field.module.js";import t from"../core/Field.js";import{useFormFieldState as n}from"../hooks/use.js";import{createFieldEmit as r}from"./emit.js";import{isEmptyTextLike as i}from"./visibility.js";import a from"../styles/Code.module.js";import o from"react";import{jsx as s,jsxs as c}from"react/jsx-runtime";function l(e,t){return e?e.length===1?e:e[t]||`0`:`0`}function u({value:u=``,form:d,onValue:f,onBlur:p,name:m=``,placeholder:h=``,label:g=``,error:_=``,hidden:v=!1,disabled:y=!1,className:b=``,after:x=``,before:S=``,size:C=`m`,length:w=6,numeric:T=!0,group:E,cellSize:D,autoComplete:O=`one-time-code`}){let{value:k,version:A}=n(d,m,u),j=!y,M=(T?String(k??``).replace(/\D/g,``):String(k??``)).slice(0,w),N=o.useRef([]),P=E&&E>0?E:w===6?3:0,F=o.useMemo(()=>{if(D!=null)return{"--field-code-size":typeof D==`number`?`${D}px`:D}},[D]);o.useEffect(()=>{},[A]);let I=r(d,m,f),L=(e,t)=>{let n=M.padEnd(w,` `).split(``);n[e]=t;let r=n.join(``).replace(/ /g,``).slice(0,w);return I(r,!0),r},R=(e,t)=>{let n=T?t.replace(/\D/g,``):t;if(!n){L(e,``);return}if(n.length>1){let e=n.slice(0,w);I(e,!0);let t=Math.min(e.length,w-1);N.current[t]?.focus();return}L(e,n),e<w-1&&N.current[e+1]?.focus()};if(v&&i(M))return null;let z=[];for(let e=0;e<w;e++)P>0&&e>0&&e%P===0&&z.push(s(`span`,{className:a.s,"aria-hidden":!0,children:`-`},`sep-${e}`)),z.push(s(`input`,{ref:t=>{N.current[e]=t},className:a.c,type:`text`,inputMode:T?`numeric`:`text`,autoComplete:e===0?O:`off`,maxLength:1,disabled:y||!j,value:M[e]||``,placeholder:l(h,e),"aria-label":`${e+1} из ${w}`,onChange:t=>R(e,t.target.value),onKeyDown:t=>{t.key===`Backspace`&&!M[e]&&e>0&&(t.preventDefault(),L(e-1,``),N.current[e-1]?.focus()),t.key===`ArrowLeft`&&e>0&&(t.preventDefault(),N.current[e-1]?.focus()),t.key===`ArrowRight`&&e<w-1&&(t.preventDefault(),N.current[e+1]?.focus())},onBlur:()=>{let e=document.activeElement;N.current.some(t=>t===e)||p?.({value:M,name:m})},onPaste:e=>{e.preventDefault();let t=e.clipboardData.getData(`text`)||``,n=(T?t.replace(/\D/g,``):t).slice(0,w);I(n,!0),N.current[Math.min(n.length,w-1)]?.focus()}},e));return c(t,{type:`code`,label:g,error:_,size:C,element_blok:{className:[b||``]},element_input:{className:[a.r],props:{"data-disabled":y||!j?`true`:void 0}},children:[S?s(`span`,{className:e.a,children:S}):null,s(`div`,{className:a.i,role:`group`,"aria-label":g||h||`Код`,style:F,children:z}),x?s(`span`,{className:e.a,children:x}):null]})}u.displayName=`CodeField`;export{u as default};

package/dist/fields/Color.d.ts

@@ -1,23 +1,18 @@
 import { TInput } from './type';
-/** Встроенная палитра (6 колонок), близкая к пресетам UI */
-export declare const DEFAULT_COLOR_PALETTE: string[];
-type Hsva = {
-    h: number;
-    s: number;
-    v: number;
-    a: number;
-};
-/** #RGB / #RRGGBB / #RRGGBBAA → hsva */
-export declare function parseHexColor(input: unknown): Hsva | null;
-/** hsva → #RRGGBB или #RRGGBBAA (alpha < 1) */
-export declare function formatHexColor(hsva: Hsva, withAlpha: boolean): string;
+export { DEFAULT_COLOR_PALETTE, parseHexColor, formatHexColor } from './colorUtils';
+export type { Hsva } from './colorUtils';
 export type TColor = TInput & {
     /** Свои пресеты; иначе встроенная палитра */
     colors?: string[];
     /** Показывать слайдер opacity (по умолчанию true) */
     alpha?: boolean;
+    /**
+     * Палитра сразу в поле (справа от hex).
+     * В попапе пресеты скрываются — там остаётся пикер SV/hue/hex.
+     */
+    inlinePalette?: boolean;
 };
-declare function ColorField({ value, form, onValue, onBlur: onBlurField, name, placeholder, label, error, hidden, disabled, className, after, before, colors, alpha, }: TColor): import("react/jsx-runtime").JSX.Element | null;
+declare function ColorField({ value, form, onValue, onBlur: onBlurField, name, placeholder, label, error, hidden, disabled, className, after, before, colors, alpha, inlinePalette, }: TColor): import("react/jsx-runtime").JSX.Element | null;
 declare namespace ColorField {
     var displayName: string;
 }

package/dist/fields/Color.js

@@ -1 +1 @@
-import e from"../styles/Field.module.js";import t from"../core/Field.js";import{useFormFieldState as n}from"../hooks/use.js";import{acquireOverlayZIndex as r,releaseOverlayZIndex as i}from"../overlayZ.js";import a from"../styles/Color.module.js";import o from"react";import{Fragment as s,jsx as c,jsxs as l}from"react/jsx-runtime";import{createPortal as u}from"react-dom";var d=`#FF2D55.#FF3B30.#FF453A.#FF6961.#FF8A80.#C11F3E.#AF52DE.#BF5AF2.#DA8FFF.#5856D6.#5E5CE6.#7D7AFF.#007AFF.#0A84FF.#409CFF.#64D2FF.#70D7FF.#5AC8FA.#32ADE6.#64D2FF.#40C8E0.#00C7BE.#63E6E2.#66D4CF.#34C759.#30D158.#30DB5B.#4CD964.#6DE6A0.#8EEDB3.#A8E10C.#B5F200.#D0FF00.#E4FF66.#F2FF99.#C6FF00.#FFCC00.#FFD60A.#FFEA00.#FFE066.#FFF3A3.#FFEB3B.#FF9500.#FF9F0A.#FFB340.#FFB340.#FFD580.#FF8C00.#A2845E.#AC8E68.#C4A484.#8E8E93.#636366.#48484A.#3A3A3C.#2C2C2E.#1C1C1E`.split(`.`);function f(e,t,n){return Math.min(n,Math.max(t,e))}function p(e){return Math.round(f(e,0,255)).toString(16).padStart(2,`0`).toUpperCase()}function m(e,t,n){let r=(e%360+360)%360,i=n*t,a=i*(1-Math.abs(r/60%2-1)),o=n-i,s=0,c=0,l=0;return r<60?[s,c,l]=[i,a,0]:r<120?[s,c,l]=[a,i,0]:r<180?[s,c,l]=[0,i,a]:r<240?[s,c,l]=[0,a,i]:r<300?[s,c,l]=[a,0,i]:[s,c,l]=[i,0,a],{r:(s+o)*255,g:(c+o)*255,b:(l+o)*255}}function h(e,t,n){let r=e/255,i=t/255,a=n/255,o=Math.max(r,i,a),s=o-Math.min(r,i,a),c=0;s!==0&&(c=o===r?(i-a)/s%6:o===i?(a-r)/s+2:(r-i)/s+4,c*=60,c<0&&(c+=360));let l=o===0?0:s/o;return{h:c,s:l,v:o}}function g(e){if(typeof e!=`string`)return null;let t=e.trim();if(!t||(t[0]===`#`&&(t=t.slice(1)),![3,4,6,8].includes(t.length))||!/^[0-9a-fA-F]+$/.test(t))return null;let n=0,r=0,i=0,a=1;return t.length===3||t.length===4?(n=parseInt(t[0]+t[0],16),r=parseInt(t[1]+t[1],16),i=parseInt(t[2]+t[2],16),t.length===4&&(a=parseInt(t[3]+t[3],16)/255)):(n=parseInt(t.slice(0,2),16),r=parseInt(t.slice(2,4),16),i=parseInt(t.slice(4,6),16),t.length===8&&(a=parseInt(t.slice(6,8),16)/255)),{...h(n,r,i),a}}function _(e,t){let{r:n,g:r,b:i}=m(e.h,e.s,e.v),a=`#${p(n)}${p(r)}${p(i)}`;return!t||e.a>=.999?a:`${a}${p(e.a*255)}`}function v(e){let{r:t,g:n,b:r}=m(e.h,e.s,e.v),i=Math.round(t),a=Math.round(n),o=Math.round(r);return e.a>=.999?`rgb(${i}, ${a}, ${o})`:`rgba(${i}, ${a}, ${o}, ${Number(e.a.toFixed(3))})`}function y(e){let{r:t,g:n,b:r}=m(e,1,1);return`rgb(${Math.round(t)},${Math.round(n)},${Math.round(r)})`}function b(e){let t=g(e);return t?_(t,t.a<.999):e.toUpperCase()}function x(e){return e==null?!0:typeof e==`string`?e.trim()===``:!1}function S(e){if(!(e instanceof HTMLElement))return!1;let t=e.tagName;return t===`INPUT`||t===`TEXTAREA`||t===`SELECT`?!0:!!e.isContentEditable}function C(e){let t=(e||``).trim();if(!t)return null;let n=g(t)??g(t[0]===`#`?t:`#${t.replace(/^#/,``)}`);if(n)return n;let r=/^rgba?\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})(?:\s*,\s*([\d.]+))?\s*\)$/i.exec(t);if(r){let e=f(Number(r[1]),0,255),t=f(Number(r[2]),0,255),n=f(Number(r[3]),0,255),i=r[4]===void 0?1:f(Number(r[4]),0,1);return{...h(e,t,n),a:i}}return null}function w(){return typeof window<`u`&&`EyeDropper`in window}var T={h:0,s:1,v:.76,a:1};function E({value:r=``,form:i,onValue:f,onBlur:p,name:m=``,placeholder:h=`#000000`,label:v=``,error:y=``,hidden:b=!1,disabled:w=!1,className:E=``,after:O=``,before:k=``,colors:A,alpha:j=!0}){let{value:M}=n(i,m,r),N=typeof M==`string`?M:M==null?``:String(M),[P,F]=o.useState(!1),[I,L]=o.useState(null),[R,z]=o.useState(()=>g(N)??{...T}),[B,V]=o.useState(()=>_(g(N)??T,j)),H=A?.length?A:d,U=g(N),W=U??(x(N)?g(h):null),G=U?_(U,j):``,K=W?_(W,j):`transparent`;o.useEffect(()=>{let e=g(N);e&&(z(e),V(_(e,j)))},[N,j]);let q=o.useCallback((e,t)=>{let n=_(e,j),r={value:n,name:m||``};i&&m&&(t===`live`?i.onValue(r):i.setValue(r)),f&&f!==i?.onValue&&f(r),V(n)},[j,i,m,f]),J=e=>{if(w)return;let t=g(N)??{...R};z(t),V(_(t,j)),L(e.getBoundingClientRect()),F(!0)},Y=()=>{F(!1),p?.({value:_(R,j),name:m||``})};o.useEffect(()=>{if(!P||w)return;let e=``,t=t=>{let n=C(t);if(!n)return!1;let r={...n,a:j?n.a:1},i=_(r,j);return i===e?!0:(e=i,z(r),q(r,`commit`),!0)},n=e=>{S(e.target)||t(e.clipboardData?.getData(`text/plain`)??``)&&(e.preventDefault(),e.stopPropagation())},r=e=>{(e.ctrlKey||e.metaKey)&&(e.key!==`v`&&e.key!==`V`||S(e.target)||navigator.clipboard?.readText&&(e.preventDefault(),navigator.clipboard.readText().then(e=>{t(e)})))};return document.addEventListener(`paste`,n,!0),window.addEventListener(`keydown`,r,!0),()=>{document.removeEventListener(`paste`,n,!0),window.removeEventListener(`keydown`,r,!0)}},[P,w,j,q]);let X=e=>{if(!w){if(!P&&(e.key===`Enter`||e.key===` `||e.key===`ArrowDown`)){e.preventDefault(),J(e.currentTarget);return}P&&e.key===`Escape`&&(e.preventDefault(),Y())}};return b&&x(N)?null:l(s,{children:[l(t,{type:`color`,label:v,error:y,element_blok:{className:[E||``]},element_input:{className:[e.w],props:{"data-disabled":w?`true`:void 0}},children:[k?c(`span`,{className:e.affix,children:k}):null,l(`div`,{className:a.trigger,role:`combobox`,tabIndex:w?-1:0,"aria-expanded":P,"aria-haspopup":`dialog`,"aria-disabled":w,"aria-label":v||`Цвет`,onClick:e=>J(e.currentTarget),onKeyDown:X,children:[c(`span`,{className:a.preview,style:{"--preview-color":K}}),c(`span`,{className:[a.hexText,G?``:a.placeholder].filter(Boolean).join(` `),children:G||h})]}),O?c(`span`,{className:e.affix,children:O}):null]}),P&&u(c(D,{parent:I||void 0,hsva:R,setHsva:z,hexDraft:B,setHexDraft:V,alpha:j,palette:H,onLive:e=>q(e,`live`),onCommit:e=>q(e,`commit`),onClose:Y}),document.body)]})}E.displayName=`ColorField`;function D({parent:e,hsva:t,setHsva:n,hexDraft:u,setHexDraft:d,alpha:p,palette:m,onLive:h,onCommit:y,onClose:x}){let[S]=o.useState(()=>r());if(o.useEffect(()=>()=>i(S),[S]),!e)return null;let C=p?340:300,T=window.innerHeight-e.bottom<C+8?Math.max(8,e.top-C-8):Math.min(window.innerHeight-C-8,e.bottom+8),E=Math.min(Math.max(8,e.left),window.innerWidth-260-8),D=v({...t,a:1}),j=b(_(t,p)),N=(e,t)=>{n(e),t===`live`?h(e):y(e)},P=()=>{let e=g(u);if(!e){d(_(t,p));return}N(e,`commit`)},F=e=>{let n=e.replace(/[^\d]/g,``),r=f(Number(n||0),0,100);N({...t,a:r/100},`commit`)},I=async()=>{if(w())try{let e=window.EyeDropper,n=g((await new e().open()).sRGBHex);n&&N({...n,a:t.a},`commit`)}catch{}};return l(s,{children:[c(`div`,{className:a.o,style:{zIndex:S},onClick:x,"aria-hidden":!0}),l(`div`,{className:a.panel,role:`dialog`,"aria-label":`Выбор цвета`,style:{top:T,left:E,width:260,zIndex:S+1},children:[c(O,{hsva:t,onChange:(e,n,r)=>N({...t,s:e,v:n},r)}),l(`div`,{className:a.slidersRow,children:[w()?c(`button`,{type:`button`,className:a.eyedropper,"aria-label":`Пипетка`,onClick:I,children:c(M,{})}):null,l(`div`,{className:a.sliders,children:[c(k,{h:t.h,onChange:(e,n)=>N({...t,h:e},n)}),p?c(A,{a:t.a,color:D,onChange:(e,n)=>N({...t,a:e},n)}):null]})]}),l(`div`,{className:a.inputs,children:[c(`span`,{className:a.format,children:`Hex`}),c(`input`,{className:a.input,value:u.replace(/^#/,``),spellCheck:!1,"aria-label":`Hex`,onChange:e=>{let t=e.target.value.replace(/[^0-9a-fA-F]/g,``);d(t?`#${t}`:``)},onBlur:P,onKeyDown:e=>{e.key===`Enter`&&(e.preventDefault(),e.target.blur())}}),p?c(`input`,{className:`${a.input} ${a.inputAlpha}`,value:`${Math.round(t.a*100)} %`,"aria-label":`Прозрачность`,onChange:e=>F(e.target.value),onFocus:e=>e.target.select()}):null]}),c(`div`,{className:a.palette,role:`listbox`,"aria-label":`Палитра`,children:m.map(e=>{let t=b(e)===j;return c(`button`,{type:`button`,role:`option`,"aria-checked":t,"aria-label":e,className:a.swatchBtn,style:{"--swatch":e},onClick:()=>{let t=g(e);t&&N({...t,a:p?t.a:1},`commit`)}},e)})})]})]})}function O({hsva:e,onChange:t}){let n=o.useRef(null),r=o.useRef(!1),i=o.useRef(t);i.current=t;let s=(t,r)=>{let i=n.current;if(!i)return{s:e.s,v:e.v};let a=i.getBoundingClientRect();return{s:f((t-a.left)/a.width,0,1),v:f(1-(r-a.top)/a.height,0,1)}};return o.useEffect(()=>{let e=e=>{if(!r.current)return;let{s:t,v:n}=s(e.clientX,e.clientY);i.current(t,n,`live`)},t=e=>{if(!r.current)return;r.current=!1;let{s:t,v:n}=s(e.clientX,e.clientY);i.current(t,n,`commit`)};return window.addEventListener(`pointermove`,e),window.addEventListener(`pointerup`,t),()=>{window.removeEventListener(`pointermove`,e),window.removeEventListener(`pointerup`,t)}},[]),l(`div`,{ref:n,className:a.sv,style:{background:y(e.h)},onPointerDown:e=>{r.current=!0;let{s:t,v:n}=s(e.clientX,e.clientY);i.current(t,n,`live`)},children:[c(`div`,{className:a.svWhite}),c(`div`,{className:a.svBlack}),c(`div`,{className:a.handle,style:{left:`${e.s*100}%`,top:`${(1-e.v)*100}%`,background:v({...e,a:1})}})]})}function k({h:e,onChange:t}){return c(j,{className:`${a.slider} ${a.sliderHue}`,ratio:e/360,onRatio:(e,n)=>t(e*360,n),handleColor:y(e)})}function A({a:e,color:t,onChange:n}){return c(j,{className:`${a.slider} ${a.sliderAlpha}`,style:{"--alpha-color":t},ratio:e,onRatio:n,handleColor:t})}function j({className:e,style:t,ratio:n,onRatio:r,handleColor:i}){let s=o.useRef(null),l=o.useRef(!1),u=(e,t)=>{let n=s.current;if(!n)return;let i=n.getBoundingClientRect();r(f((e-i.left)/i.width,0,1),t)};return o.useEffect(()=>{let e=e=>{l.current&&u(e.clientX,`live`)},t=e=>{l.current&&(l.current=!1,u(e.clientX,`commit`))};return window.addEventListener(`pointermove`,e),window.addEventListener(`pointerup`,t),()=>{window.removeEventListener(`pointermove`,e),window.removeEventListener(`pointerup`,t)}},[r]),c(`div`,{ref:s,className:e,style:t,onPointerDown:e=>{l.current=!0,u(e.clientX,`live`)},children:c(`div`,{className:a.sliderHandle,style:{left:`${f(n,0,1)*100}%`,background:i}})})}function M(){return l(`svg`,{width:`16`,height:`16`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,strokeWidth:`2`,strokeLinecap:`round`,strokeLinejoin:`round`,"aria-hidden":!0,children:[c(`path`,{d:`m2 22 1-1h3l9-9`}),c(`path`,{d:`M3 21v-3l9-9`}),c(`path`,{d:`m15 5 3 3`}),c(`path`,{d:`M17.5 2.5a2.12 2.12 0 0 1 3 3L12 14l-4 1 1-4Z`})]})}export{d as DEFAULT_COLOR_PALETTE,E as default};
+import e from"../styles/Field.module.js";import t from"../core/Field.js";import{useFormFieldState as n}from"../hooks/use.js";import{createFieldEmit as r}from"./emit.js";import i from"../styles/Color.module.js";import{DEFAULT_COLOR_PALETTE as a,formatHexColor as o,isEditablePasteTarget as s,isEmptyColor as c,normalizeHexCompare as l,parseClipboardColor as ee,parseHexColor as u}from"./colorUtils.js";import te from"./ColorPanel.js";import d from"react";import{Fragment as ne,jsx as f,jsxs as p}from"react/jsx-runtime";import{createPortal as re}from"react-dom";var m={h:0,s:1,v:.76,a:1};function h({value:h=``,form:g,onValue:_,onBlur:ie,name:v=``,placeholder:y=`#000000`,label:b=``,error:x=``,hidden:S=!1,disabled:C=!1,className:ae=``,after:w=``,before:T=``,colors:E,alpha:D=!0,inlinePalette:O=!1}){let{value:k}=n(g,v,h),A=typeof k==`string`?k:k==null?``:String(k),[j,M]=d.useState(!1),[oe,N]=d.useState(null),P=d.useRef(null),[F,I]=d.useState(()=>u(A)??{...m}),[L,R]=d.useState(()=>o(u(A)??m,D)),z=d.useCallback(()=>{let e=P.current;if(!e)return;let t=e.getBoundingClientRect();N(e=>e&&e.top===t.top&&e.left===t.left&&e.width===t.width&&e.height===t.height&&e.bottom===t.bottom?e:t)},[]);d.useEffect(()=>{if(!j)return;z();let e=()=>z();return window.addEventListener(`scroll`,e,!0),window.addEventListener(`resize`,e),()=>{window.removeEventListener(`scroll`,e,!0),window.removeEventListener(`resize`,e)}},[j,z]);let B=E?.length?E:a,V=u(A),H=V??(c(A)?u(y):null),U=V?o(V,D):``,W=H?o(H,D):`transparent`;d.useEffect(()=>{let e=u(A);e&&(I(e),R(o(e,D)))},[A,D]);let G=d.useCallback((e,t)=>{let n=o(e,D);r(g,v,_)(n,t===`commit`),R(n)},[D,g,v,_]),[K,q]=d.useState(null),[se,J]=d.useState(!1),Y=d.useRef(null),X=d.useRef(null);d.useEffect(()=>()=>{Y.current&&clearTimeout(Y.current),X.current&&clearTimeout(X.current)},[]);let ce=e=>{if(C)return;let t=u(e);if(!t)return;let n={...t,a:D?t.a:1};I(n),G(n,`commit`)},le=e=>{if(C||K)return;let t=l(e);Z&&t===Z||(q(e),Y.current&&clearTimeout(Y.current),Y.current=setTimeout(()=>{ce(e),q(null),J(!0),X.current&&clearTimeout(X.current),X.current=setTimeout(()=>{J(!1)},280)},220))},Z=V?l(o(V,D)):``,ue=d.useMemo(()=>{if(!O)return[];let e=K?l(K):``;return B.filter(t=>{let n=l(t);return e&&n===e?!0:!(Z&&n===Z)})},[O,B,Z,K]),Q=e=>{if(C)return;let t=u(A)??{...F};I(t),R(o(t,D)),N(e.getBoundingClientRect()),M(!0)},$=()=>{M(!1),ie?.({value:o(F,D),name:v||``})};d.useEffect(()=>{if(!j||C)return;let e=``,t=t=>{let n=ee(t);if(!n)return!1;let r={...n,a:D?n.a:1},i=o(r,D);return i===e?!0:(e=i,I(r),G(r,`commit`),!0)},n=e=>{s(e.target)||t(e.clipboardData?.getData(`text/plain`)??``)&&(e.preventDefault(),e.stopPropagation())},r=e=>{(e.ctrlKey||e.metaKey)&&(e.key!==`v`&&e.key!==`V`||s(e.target)||navigator.clipboard?.readText&&(e.preventDefault(),navigator.clipboard.readText().then(e=>{t(e)})))};return document.addEventListener(`paste`,n,!0),window.addEventListener(`keydown`,r,!0),()=>{document.removeEventListener(`paste`,n,!0),window.removeEventListener(`keydown`,r,!0)}},[j,C,D,G]);let de=e=>{if(!C){if(!j&&(e.key===`Enter`||e.key===` `||e.key===`ArrowDown`)){e.preventDefault(),Q(e.currentTarget);return}j&&e.key===`Escape`&&(e.preventDefault(),$())}};return S&&c(A)?null:p(ne,{children:[p(t,{type:`color`,label:b,error:x,element_blok:{className:[ae||``]},element_input:{className:[e.w,i.q],props:{"data-disabled":C?`true`:void 0}},children:[T?f(`span`,{className:e.a,children:T}):null,p(`div`,{ref:P,className:i.t,role:`combobox`,tabIndex:C?-1:0,"aria-expanded":j,"aria-haspopup":`dialog`,"aria-disabled":C,"aria-label":b||`Цвет`,onClick:e=>Q(e.currentTarget),onKeyDown:de,children:[f(`span`,{className:i.c,"data-enter":se?`true`:void 0,style:{"--preview-color":W}}),f(`span`,{className:[i.g,U?``:i.m].filter(Boolean).join(` `),children:U||y})]}),O?f(`div`,{className:i.j,role:`listbox`,"aria-label":`Палитра`,onClick:e=>e.stopPropagation(),onMouseDown:e=>e.stopPropagation(),children:ue.map(e=>{let t=K!=null&&l(e)===l(K);return f(`button`,{type:`button`,role:`option`,"aria-label":e,disabled:C||!!K,className:i.k,"data-exit":t?`true`:void 0,style:{"--swatch":e},onClick:t=>{t.stopPropagation(),le(e)}},e)})}):null,w?f(`span`,{className:e.a,children:w}):null]}),j&&re(f(te,{parent:oe||void 0,hsva:F,setHsva:I,hexDraft:L,setHexDraft:R,alpha:D,palette:B,showPalette:!O,onLive:e=>G(e,`live`),onCommit:e=>G(e,`commit`),onClose:$}),document.body)]})}h.displayName=`ColorField`;export{h as default};

package/dist/fields/ColorPanel.d.ts

@@ -0,0 +1,16 @@
+import { default as React } from 'react';
+import { Hsva } from './colorUtils';
+export default function ColorPanel({ parent, hsva, setHsva, hexDraft, setHexDraft, alpha, palette, showPalette, onLive, onCommit, onClose, }: {
+    parent?: DOMRect;
+    hsva: Hsva;
+    setHsva: React.Dispatch<React.SetStateAction<Hsva>>;
+    hexDraft: string;
+    setHexDraft: React.Dispatch<React.SetStateAction<string>>;
+    alpha: boolean;
+    palette: string[];
+    /** false — пресеты уже в поле, в попапе не дублируем */
+    showPalette?: boolean;
+    onLive: (next: Hsva) => void;
+    onCommit: (next: Hsva) => void;
+    onClose: () => void;
+}): import("react/jsx-runtime").JSX.Element | null;

package/dist/fields/ColorPanel.js

@@ -0,0 +1 @@
+import{acquireOverlayZIndex as e,releaseOverlayZIndex as t}from"../overlayZ.js";import n from"../styles/Color.module.js";import{clamp as r,cssColor as i,formatHexColor as a,hasEyeDropper as o,hueCss as s,normalizeHexCompare as c,parseHexColor as l}from"./colorUtils.js";import u from"react";import{Fragment as d,jsx as f,jsxs as p}from"react/jsx-runtime";function m({parent:s,hsva:m,setHsva:v,hexDraft:b,setHexDraft:x,alpha:S,palette:C,showPalette:w=!0,onLive:T,onCommit:E,onClose:D}){let[O]=u.useState(()=>e());if(u.useEffect(()=>()=>t(O),[O]),!s)return null;let k=(S?340:300)-(w?0:90),A=window.innerHeight-s.bottom<k+8?s.top-k-8:s.bottom+8;A=Math.min(A,window.innerHeight-k-8),A=Math.max(8,A);let j=Math.min(Math.max(8,s.left),window.innerWidth-260-8),M=i({...m,a:1}),N=c(a(m,S)),P=(e,t)=>{v(e),t===`live`?T(e):E(e)},F=()=>{let e=l(b);if(!e){x(a(m,S));return}P(e,`commit`)},I=e=>{let t=e.replace(/[^\d]/g,``),n=r(Number(t||0),0,100);P({...m,a:n/100},`commit`)},L=async()=>{if(o())try{let e=window.EyeDropper,t=l((await new e().open()).sRGBHex);t&&P({...t,a:m.a},`commit`)}catch{}};return p(d,{children:[f(`div`,{className:n.o,style:{zIndex:O},onClick:D,"aria-hidden":!0}),p(`div`,{className:n.p,role:`dialog`,"aria-label":`Выбор цвета`,style:{top:A,left:j,width:260,zIndex:O+1},children:[f(h,{hsva:m,onChange:(e,t,n)=>P({...m,s:e,v:t},n)}),p(`div`,{className:n.r,children:[o()?f(`button`,{type:`button`,className:n.e,"aria-label":`Пипетка`,onClick:L,children:f(y,{})}):null,p(`div`,{className:n.s,children:[f(g,{h:m.h,onChange:(e,t)=>P({...m,h:e},t)}),S?f(_,{a:m.a,color:M,onChange:(e,t)=>P({...m,a:e},t)}):null]})]}),p(`div`,{className:n.i,children:[f(`span`,{className:n.f,children:`Hex`}),f(`input`,{className:n.n,value:b.replace(/^#/,``),spellCheck:!1,"aria-label":`Hex`,onChange:e=>{let t=e.target.value.replace(/[^0-9a-fA-F]/g,``);x(t?`#${t}`:``)},onBlur:F,onKeyDown:e=>{e.key===`Enter`&&(e.preventDefault(),e.target.blur())}}),S?f(`input`,{className:`${n.n} ${n.x}`,value:`${Math.round(m.a*100)} %`,"aria-label":`Прозрачность`,onChange:e=>I(e.target.value),onFocus:e=>e.target.select()}):null]}),w?f(`div`,{className:n.y,role:`listbox`,"aria-label":`Палитра`,children:C.map(e=>{let t=c(e)===N;return f(`button`,{type:`button`,role:`option`,"aria-checked":t,"aria-label":e,className:n.z,style:{"--swatch":e},onClick:()=>{let t=l(e);t&&P({...t,a:S?t.a:1},`commit`)}},e)})}):null]})]})}function h({hsva:e,onChange:t}){let a=u.useRef(null),o=u.useRef(!1),c=u.useRef(t);c.current=t;let l=(t,n)=>{let i=a.current;if(!i)return{s:e.s,v:e.v};let o=i.getBoundingClientRect();return{s:r((t-o.left)/o.width,0,1),v:r(1-(n-o.top)/o.height,0,1)}};return u.useEffect(()=>{let e=e=>{if(!o.current)return;let{s:t,v:n}=l(e.clientX,e.clientY);c.current(t,n,`live`)},t=e=>{if(!o.current)return;o.current=!1;let{s:t,v:n}=l(e.clientX,e.clientY);c.current(t,n,`commit`)};return window.addEventListener(`pointermove`,e),window.addEventListener(`pointerup`,t),()=>{window.removeEventListener(`pointermove`,e),window.removeEventListener(`pointerup`,t)}},[]),p(`div`,{ref:a,className:n.v,style:{background:s(e.h)},onPointerDown:e=>{o.current=!0;let{s:t,v:n}=l(e.clientX,e.clientY);c.current(t,n,`live`)},children:[f(`div`,{className:n.w}),f(`div`,{className:n.b}),f(`div`,{className:n.h,style:{left:`${e.s*100}%`,top:`${(1-e.v)*100}%`,background:i({...e,a:1})}})]})}function g({h:e,onChange:t}){return f(v,{className:`${n.l} ${n.u}`,ratio:e/360,onRatio:(e,n)=>t(e*360,n),handleColor:s(e)})}function _({a:e,color:t,onChange:r}){return f(v,{className:`${n.l} ${n.a}`,style:{"--alpha-color":t},ratio:e,onRatio:r,handleColor:t})}function v({className:e,style:t,ratio:i,onRatio:a,handleColor:o}){let s=u.useRef(null),c=u.useRef(!1),l=(e,t)=>{let n=s.current;if(!n)return;let i=n.getBoundingClientRect();a(r((e-i.left)/i.width,0,1),t)};return u.useEffect(()=>{let e=e=>{c.current&&l(e.clientX,`live`)},t=e=>{c.current&&(c.current=!1,l(e.clientX,`commit`))};return window.addEventListener(`pointermove`,e),window.addEventListener(`pointerup`,t),()=>{window.removeEventListener(`pointermove`,e),window.removeEventListener(`pointerup`,t)}},[a]),f(`div`,{ref:s,className:e,style:t,onPointerDown:e=>{c.current=!0,l(e.clientX,`live`)},children:f(`div`,{className:n.d,style:{left:`${r(i,0,1)*100}%`,background:o}})})}function y(){return p(`svg`,{width:`16`,height:`16`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,strokeWidth:`2`,strokeLinecap:`round`,strokeLinejoin:`round`,"aria-hidden":!0,children:[f(`path`,{d:`m2 22 1-1h3l9-9`}),f(`path`,{d:`M3 21v-3l9-9`}),f(`path`,{d:`m15 5 3 3`}),f(`path`,{d:`M17.5 2.5a2.12 2.12 0 0 1 3 3L12 14l-4 1 1-4Z`})]})}export{m as default};