@hh.ru/magritte-ui-input 9.0.12 → 9.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (17) hide show
  1. package/BaseInput.js +1 -1
  2. package/DateTimeInput.d.ts +2 -1
  3. package/DateTimeInput.js +7 -5
  4. package/DateTimeInput.js.map +1 -1
  5. package/UncontrolledDateTimeInput.d.ts +2 -1
  6. package/UncontrolledDateTimeInput.js +1 -1
  7. package/index.css +99 -99
  8. package/{index.esm-LrCm-Ziw.js → index.esm-DX-FtELq.js} +179 -2
  9. package/{index.esm-LrCm-Ziw.js.map → index.esm-DX-FtELq.js.map} +1 -1
  10. package/index.js +1 -1
  11. package/maskito-exports.d.ts +1 -1
  12. package/maskito-exports.js +1 -1
  13. package/package.json +5 -5
  14. package/types.d.ts +2 -0
  15. package/useDateTimeMask.d.ts +1 -1
  16. package/useDateTimeMask.js +14 -7
  17. package/useDateTimeMask.js.map +1 -1
package/BaseInput.js CHANGED
@@ -12,7 +12,7 @@ import { useFocus } from './useFocus.js';
12
12
  import { useInputAriaProps } from './useInputAriaProps.js';
13
13
  import { Text } from '@hh.ru/magritte-ui-typography';
14
14
 
15
- var styles = {"input":"magritte-input___LVTID_9-0-12","label":"magritte-label___YlOQk_9-0-12","elevated":"magritte-elevated___kPcsM_9-0-12","focused":"magritte-focused___dxrHD_9-0-12","invalid":"magritte-invalid___L5MVa_9-0-12","disabled":"magritte-disabled___0NH6E_9-0-12","position-container":"magritte-position-container___kZnvZ_9-0-12","positionContainer":"magritte-position-container___kZnvZ_9-0-12","field":"magritte-field___9S8Tw_9-0-12","hint":"magritte-hint___EFGK0_9-0-12","additional-value":"magritte-additional-value___9Kyap_9-0-12","additionalValue":"magritte-additional-value___9Kyap_9-0-12","label_elevated":"magritte-label_elevated___PVcpC_9-0-12","labelElevated":"magritte-label_elevated___PVcpC_9-0-12","fixed-placeholder":"magritte-fixed-placeholder___PYJIH_9-0-12","fixedPlaceholder":"magritte-fixed-placeholder___PYJIH_9-0-12","icon":"magritte-icon___HEDsQ_9-0-12","focus-visible":"magritte-focus-visible___QvCO1_9-0-12","focusVisible":"magritte-focus-visible___QvCO1_9-0-12","right-container":"magritte-right-container___N0B0o_9-0-12","rightContainer":"magritte-right-container___N0B0o_9-0-12","with-icon":"magritte-with-icon___TPBe2_9-0-12","withIcon":"magritte-with-icon___TPBe2_9-0-12","large":"magritte-large___9frRh_9-0-12","small":"magritte-small___iQL4F_9-0-12","autofill-helper":"magritte-autofill-helper___WFjOW_9-0-12","autofillHelper":"magritte-autofill-helper___WFjOW_9-0-12","content-container":"magritte-content-container___s-0kX_9-0-12","contentContainer":"magritte-content-container___s-0kX_9-0-12","rigging-container":"magritte-rigging-container___Up9Lb_9-0-12","riggingContainer":"magritte-rigging-container___Up9Lb_9-0-12","input__mask":"magritte-input__mask___CHda2_9-0-12","inputMask":"magritte-input__mask___CHda2_9-0-12","value-ghost":"magritte-value-ghost___IXNZj_9-0-12","valueGhost":"magritte-value-ghost___IXNZj_9-0-12","hint-container":"magritte-hint-container___rGsD8_9-0-12","hintContainer":"magritte-hint-container___rGsD8_9-0-12","counter":"magritte-counter___Bld3Q_9-0-12","value-container":"magritte-value-container___6ReT7_9-0-12","valueContainer":"magritte-value-container___6ReT7_9-0-12"};
15
+ var styles = {"input":"magritte-input___LVTID_9-1-0","label":"magritte-label___YlOQk_9-1-0","elevated":"magritte-elevated___kPcsM_9-1-0","focused":"magritte-focused___dxrHD_9-1-0","invalid":"magritte-invalid___L5MVa_9-1-0","disabled":"magritte-disabled___0NH6E_9-1-0","position-container":"magritte-position-container___kZnvZ_9-1-0","positionContainer":"magritte-position-container___kZnvZ_9-1-0","field":"magritte-field___9S8Tw_9-1-0","hint":"magritte-hint___EFGK0_9-1-0","additional-value":"magritte-additional-value___9Kyap_9-1-0","additionalValue":"magritte-additional-value___9Kyap_9-1-0","label_elevated":"magritte-label_elevated___PVcpC_9-1-0","labelElevated":"magritte-label_elevated___PVcpC_9-1-0","fixed-placeholder":"magritte-fixed-placeholder___PYJIH_9-1-0","fixedPlaceholder":"magritte-fixed-placeholder___PYJIH_9-1-0","icon":"magritte-icon___HEDsQ_9-1-0","focus-visible":"magritte-focus-visible___QvCO1_9-1-0","focusVisible":"magritte-focus-visible___QvCO1_9-1-0","right-container":"magritte-right-container___N0B0o_9-1-0","rightContainer":"magritte-right-container___N0B0o_9-1-0","with-icon":"magritte-with-icon___TPBe2_9-1-0","withIcon":"magritte-with-icon___TPBe2_9-1-0","large":"magritte-large___9frRh_9-1-0","small":"magritte-small___iQL4F_9-1-0","autofill-helper":"magritte-autofill-helper___WFjOW_9-1-0","autofillHelper":"magritte-autofill-helper___WFjOW_9-1-0","content-container":"magritte-content-container___s-0kX_9-1-0","contentContainer":"magritte-content-container___s-0kX_9-1-0","rigging-container":"magritte-rigging-container___Up9Lb_9-1-0","riggingContainer":"magritte-rigging-container___Up9Lb_9-1-0","input__mask":"magritte-input__mask___CHda2_9-1-0","inputMask":"magritte-input__mask___CHda2_9-1-0","value-ghost":"magritte-value-ghost___IXNZj_9-1-0","valueGhost":"magritte-value-ghost___IXNZj_9-1-0","hint-container":"magritte-hint-container___rGsD8_9-1-0","hintContainer":"magritte-hint-container___rGsD8_9-1-0","counter":"magritte-counter___Bld3Q_9-1-0","value-container":"magritte-value-container___6ReT7_9-1-0","valueContainer":"magritte-value-container___6ReT7_9-1-0"};
16
16
 
17
17
  const matchIconSize = (size, icon) => {
18
18
  return icon &&
package/DateTimeInput.d.ts CHANGED
@@ -5,4 +5,5 @@ export declare const DateTimeInput: import("react").ForwardRefExoticComponent<im
5
5
  timeRounding?: import("@hh.ru/magritte-ui-input/types").TimeInputRounding;
6
6
  onButtonClick?: (event: import("react").MouseEvent<HTMLButtonElement, MouseEvent>) => void;
7
7
  hideMask?: boolean;
8
- } & import("@hh.ru/magritte-ui-input/types").ControlledProps & Omit<InputHTMLAttributes<HTMLInputElement>, "onButtonClick" | keyof import("@hh.ru/magritte-ui-input/types").InputBaseProps | keyof import("@hh.ru/magritte-ui-input/types").ControlledProps | "dateMask" | "timeMask" | "timeRounding" | "hideMask"> & import("react").RefAttributes<HTMLInputElement>>;
8
+ range?: boolean;
9
+ } & import("@hh.ru/magritte-ui-input/types").ControlledProps & Omit<InputHTMLAttributes<HTMLInputElement>, "onButtonClick" | keyof import("@hh.ru/magritte-ui-input/types").InputBaseProps | keyof import("@hh.ru/magritte-ui-input/types").ControlledProps | "range" | "dateMask" | "timeMask" | "timeRounding" | "hideMask"> & import("react").RefAttributes<HTMLInputElement>>;
package/DateTimeInput.js CHANGED
@@ -13,10 +13,10 @@ import '@hh.ru/magritte-ui-form-helper';
13
13
  import './useFocus.js';
14
14
  import './useInputAriaProps.js';
15
15
  import '@hh.ru/magritte-ui-typography';
16
- import './index.esm-LrCm-Ziw.js';
16
+ import './index.esm-DX-FtELq.js';
17
17
 
18
- const DateTimeInput = forwardRef(({ dateMask, timeMask, timeRounding, onButtonClick, hideMask, size, ...props }, ref) => {
19
- const maskedInputRef = useDateTimeMask(dateMask, timeMask, timeRounding);
18
+ const DateTimeInput = forwardRef(({ dateMask, timeMask, timeRounding, onButtonClick, hideMask, size, range, ...props }, ref) => {
19
+ const maskedInputRef = useDateTimeMask(dateMask, timeMask, timeRounding, range);
20
20
  const inputRef = useMultipleRefs(maskedInputRef, ref);
21
21
  const onBlur = dateMask === 'dd'
22
22
  ? (event) => {
@@ -42,8 +42,10 @@ const DateTimeInput = forwardRef(({ dateMask, timeMask, timeRounding, onButtonCl
42
42
  if (timeMask) {
43
43
  parts.push('00:00');
44
44
  }
45
- return parts.join(', ');
46
- }, [dateMask, timeMask, hideMask]);
45
+ const placeholder = parts.join(', ');
46
+ const rangeAllowed = range && dateMask !== 'dd' && !timeMask;
47
+ return rangeAllowed ? [placeholder, placeholder].join(' – ') : placeholder;
48
+ }, [dateMask, timeMask, hideMask, range]);
47
49
  return (jsx(BaseInput, { type: "text", inputMode: "decimal", fixedPlaceholder: maskedPlaceholder, ...props, ...((onButtonClick &&
48
50
  (size === 'small'
49
51
  ? {
package/DateTimeInput.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"DateTimeInput.js","sources":["../src/DateTimeInput.tsx"],"sourcesContent":["import { InputHTMLAttributes, forwardRef, useMemo, FocusEventHandler } from 'react';\n\nimport { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';\nimport {\n CalendarOutlinedSize16,\n ClockOutlinedSize16,\n CalendarOutlinedSize24,\n ClockOutlinedSize24,\n} from '@hh.ru/magritte-ui-icon/icon';\nimport { BaseInput } from '@hh.ru/magritte-ui-input/BaseInput';\nimport { ControlledDateTimeInputProps } from '@hh.ru/magritte-ui-input/types';\nimport { useDateTimeMask } from '@hh.ru/magritte-ui-input/useDateTimeMask';\n\nexport const DateTimeInput = forwardRef<\n HTMLInputElement,\n ControlledDateTimeInputProps & Omit<InputHTMLAttributes<HTMLInputElement>, keyof ControlledDateTimeInputProps>\n>(({ dateMask, timeMask, timeRounding, onButtonClick, hideMask, size, ...props }, ref) => {\n const maskedInputRef = useDateTimeMask(dateMask, timeMask, timeRounding);\n const inputRef = useMultipleRefs(maskedInputRef, ref);\n\n const onBlur: FocusEventHandler<HTMLInputElement> | undefined =\n dateMask === 'dd'\n ? (event) => {\n if (props.value.length === 1) {\n if (props.value === '0') {\n props.onChange('');\n } else {\n props.onChange(props.value.padStart(2, '0'));\n }\n }\n props.onBlur?.(event);\n }\n : props.onBlur;\n\n const maskedPlaceholder = useMemo(() => {\n if (hideMask) {\n return undefined;\n }\n const parts = [];\n\n if (dateMask) {\n parts.push(dateMask.replace(/d/g, 'Д').replace(/m/g, 'М').replace(/y/g, 'Г'));\n }\n if (timeMask) {\n parts.push('00:00');\n }\n\n return parts.join(', ');\n }, [dateMask, timeMask, hideMask]);\n\n return (\n <BaseInput\n type=\"text\"\n inputMode=\"decimal\"\n fixedPlaceholder={maskedPlaceholder}\n {...props}\n {...((onButtonClick &&\n (size === 'small'\n ? {\n buttonIcon: timeMask && !dateMask ? ClockOutlinedSize16 : CalendarOutlinedSize16,\n onButtonClick,\n }\n : {\n buttonIcon: timeMask && !dateMask ? ClockOutlinedSize24 : CalendarOutlinedSize24,\n onButtonClick,\n })) ??\n {})}\n ref={inputRef}\n size={size}\n autoComplete=\"off\"\n onBlur={onBlur}\n />\n );\n});\n\nDateTimeInput.displayName = 'DateTimeInput';\n"],"names":["_jsx"],"mappings":";;;;;;;;;;;;;;;;AAaa,MAAA,aAAa,GAAG,UAAU,CAGrC,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,YAAY,EAAE,aAAa,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,KAAI;IACrF,MAAM,cAAc,GAAG,eAAe,CAAC,QAAQ,EAAE,QAAQ,EAAE,YAAY,CAAC,CAAC;IACzE,MAAM,QAAQ,GAAG,eAAe,CAAC,cAAc,EAAE,GAAG,CAAC,CAAC;AAEtD,IAAA,MAAM,MAAM,GACR,QAAQ,KAAK,IAAI;AACb,UAAE,CAAC,KAAK,KAAI;YACN,IAAI,KAAK,CAAC,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE;AAC1B,gBAAA,IAAI,KAAK,CAAC,KAAK,KAAK,GAAG,EAAE;AACrB,oBAAA,KAAK,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;iBACtB;qBAAM;AACH,oBAAA,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC;iBAChD;aACJ;AACD,YAAA,KAAK,CAAC,MAAM,GAAG,KAAK,CAAC,CAAC;SACzB;AACH,UAAE,KAAK,CAAC,MAAM,CAAC;AAEvB,IAAA,MAAM,iBAAiB,GAAG,OAAO,CAAC,MAAK;QACnC,IAAI,QAAQ,EAAE;AACV,YAAA,OAAO,SAAS,CAAC;SACpB;QACD,MAAM,KAAK,GAAG,EAAE,CAAC;QAEjB,IAAI,QAAQ,EAAE;YACV,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC,OAAO,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC,OAAO,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC,CAAC;SACjF;QACD,IAAI,QAAQ,EAAE;AACV,YAAA,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;SACvB;AAED,QAAA,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC3B,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEnC,QACIA,IAAC,SAAS,EAAA,EACN,IAAI,EAAC,MAAM,EACX,SAAS,EAAC,SAAS,EACnB,gBAAgB,EAAE,iBAAiB,EAAA,GAC/B,KAAK,EACL,IAAC,CAAC,aAAa;aACd,IAAI,KAAK,OAAO;AACb,kBAAE;AACI,oBAAA,UAAU,EAAE,QAAQ,IAAI,CAAC,QAAQ,GAAG,mBAAmB,GAAG,sBAAsB;oBAChF,aAAa;AAChB,iBAAA;AACH,kBAAE;AACI,oBAAA,UAAU,EAAE,QAAQ,IAAI,CAAC,QAAQ,GAAG,mBAAmB,GAAG,sBAAsB;oBAChF,aAAa;AAChB,iBAAA,CAAC;AACR,YAAA,EAAE,GACN,GAAG,EAAE,QAAQ,EACb,IAAI,EAAE,IAAI,EACV,YAAY,EAAC,KAAK,EAClB,MAAM,EAAE,MAAM,EAAA,CAChB,EACJ;AACN,CAAC,EAAE;AAEH,aAAa,CAAC,WAAW,GAAG,eAAe;;;;"}
1
+ {"version":3,"file":"DateTimeInput.js","sources":["../src/DateTimeInput.tsx"],"sourcesContent":["import { InputHTMLAttributes, forwardRef, useMemo, FocusEventHandler } from 'react';\n\nimport { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';\nimport {\n CalendarOutlinedSize16,\n ClockOutlinedSize16,\n CalendarOutlinedSize24,\n ClockOutlinedSize24,\n} from '@hh.ru/magritte-ui-icon/icon';\nimport { BaseInput } from '@hh.ru/magritte-ui-input/BaseInput';\nimport { ControlledDateTimeInputProps } from '@hh.ru/magritte-ui-input/types';\nimport { useDateTimeMask } from '@hh.ru/magritte-ui-input/useDateTimeMask';\n\nexport const DateTimeInput = forwardRef<\n HTMLInputElement,\n ControlledDateTimeInputProps & Omit<InputHTMLAttributes<HTMLInputElement>, keyof ControlledDateTimeInputProps>\n>(({ dateMask, timeMask, timeRounding, onButtonClick, hideMask, size, range, ...props }, ref) => {\n const maskedInputRef = useDateTimeMask(dateMask, timeMask, timeRounding, range);\n const inputRef = useMultipleRefs(maskedInputRef, ref);\n\n const onBlur: FocusEventHandler<HTMLInputElement> | undefined =\n dateMask === 'dd'\n ? (event) => {\n if (props.value.length === 1) {\n if (props.value === '0') {\n props.onChange('');\n } else {\n props.onChange(props.value.padStart(2, '0'));\n }\n }\n props.onBlur?.(event);\n }\n : props.onBlur;\n\n const maskedPlaceholder = useMemo(() => {\n if (hideMask) {\n return undefined;\n }\n const parts = [];\n\n if (dateMask) {\n parts.push(dateMask.replace(/d/g, 'Д').replace(/m/g, 'М').replace(/y/g, 'Г'));\n }\n if (timeMask) {\n parts.push('00:00');\n }\n\n const placeholder = parts.join(', ');\n const rangeAllowed = range && dateMask !== 'dd' && !timeMask;\n return rangeAllowed ? [placeholder, placeholder].join(' – ') : placeholder;\n }, [dateMask, timeMask, hideMask, range]);\n\n return (\n <BaseInput\n type=\"text\"\n inputMode=\"decimal\"\n fixedPlaceholder={maskedPlaceholder}\n {...props}\n {...((onButtonClick &&\n (size === 'small'\n ? {\n buttonIcon: timeMask && !dateMask ? ClockOutlinedSize16 : CalendarOutlinedSize16,\n onButtonClick,\n }\n : {\n buttonIcon: timeMask && !dateMask ? ClockOutlinedSize24 : CalendarOutlinedSize24,\n onButtonClick,\n })) ??\n {})}\n ref={inputRef}\n size={size}\n autoComplete=\"off\"\n onBlur={onBlur}\n />\n );\n});\n\nDateTimeInput.displayName = 'DateTimeInput';\n"],"names":["_jsx"],"mappings":";;;;;;;;;;;;;;;;AAaO,MAAM,aAAa,GAAG,UAAU,CAGrC,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,YAAY,EAAE,aAAa,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,KAAI;AAC5F,IAAA,MAAM,cAAc,GAAG,eAAe,CAAC,QAAQ,EAAE,QAAQ,EAAE,YAAY,EAAE,KAAK,CAAC,CAAC;IAChF,MAAM,QAAQ,GAAG,eAAe,CAAC,cAAc,EAAE,GAAG,CAAC,CAAC;AAEtD,IAAA,MAAM,MAAM,GACR,QAAQ,KAAK,IAAI;AACb,UAAE,CAAC,KAAK,KAAI;YACN,IAAI,KAAK,CAAC,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE;AAC1B,gBAAA,IAAI,KAAK,CAAC,KAAK,KAAK,GAAG,EAAE;AACrB,oBAAA,KAAK,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;iBACtB;qBAAM;AACH,oBAAA,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC;iBAChD;aACJ;AACD,YAAA,KAAK,CAAC,MAAM,GAAG,KAAK,CAAC,CAAC;SACzB;AACH,UAAE,KAAK,CAAC,MAAM,CAAC;AAEvB,IAAA,MAAM,iBAAiB,GAAG,OAAO,CAAC,MAAK;QACnC,IAAI,QAAQ,EAAE;AACV,YAAA,OAAO,SAAS,CAAC;SACpB;QACD,MAAM,KAAK,GAAG,EAAE,CAAC;QAEjB,IAAI,QAAQ,EAAE;YACV,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC,OAAO,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC,OAAO,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC,CAAC;SACjF;QACD,IAAI,QAAQ,EAAE;AACV,YAAA,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;SACvB;QAED,MAAM,WAAW,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACrC,MAAM,YAAY,GAAG,KAAK,IAAI,QAAQ,KAAK,IAAI,IAAI,CAAC,QAAQ,CAAC;AAC7D,QAAA,OAAO,YAAY,GAAG,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,WAAW,CAAC;KAC9E,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,CAAC,CAAC,CAAC;IAE1C,QACIA,IAAC,SAAS,EAAA,EACN,IAAI,EAAC,MAAM,EACX,SAAS,EAAC,SAAS,EACnB,gBAAgB,EAAE,iBAAiB,EAAA,GAC/B,KAAK,EACL,IAAC,CAAC,aAAa;aACd,IAAI,KAAK,OAAO;AACb,kBAAE;AACI,oBAAA,UAAU,EAAE,QAAQ,IAAI,CAAC,QAAQ,GAAG,mBAAmB,GAAG,sBAAsB;oBAChF,aAAa;AAChB,iBAAA;AACH,kBAAE;AACI,oBAAA,UAAU,EAAE,QAAQ,IAAI,CAAC,QAAQ,GAAG,mBAAmB,GAAG,sBAAsB;oBAChF,aAAa;AAChB,iBAAA,CAAC;AACR,YAAA,EAAE,GACN,GAAG,EAAE,QAAQ,EACb,IAAI,EAAE,IAAI,EACV,YAAY,EAAC,KAAK,EAClB,MAAM,EAAE,MAAM,EAAA,CAChB,EACJ;AACN,CAAC,EAAE;AAEH,aAAa,CAAC,WAAW,GAAG,eAAe;;;;"}
package/UncontrolledDateTimeInput.d.ts CHANGED
@@ -5,4 +5,5 @@ export declare const UncontrolledDateTimeInput: import("react").ForwardRefExotic
5
5
  timeRounding?: import("@hh.ru/magritte-ui-input/types").TimeInputRounding;
6
6
  onButtonClick?: (event: import("react").MouseEvent<HTMLButtonElement, MouseEvent>) => void;
7
7
  hideMask?: boolean;
8
- } & Partial<import("@hh.ru/magritte-ui-input/types").ControlledProps> & Omit<InputHTMLAttributes<HTMLInputElement>, "onButtonClick" | keyof import("@hh.ru/magritte-ui-input/types").InputBaseProps | keyof import("@hh.ru/magritte-ui-input/types").ControlledProps | "dateMask" | "timeMask" | "timeRounding" | "hideMask"> & import("react").RefAttributes<HTMLInputElement>>;
8
+ range?: boolean;
9
+ } & Partial<import("@hh.ru/magritte-ui-input/types").ControlledProps> & Omit<InputHTMLAttributes<HTMLInputElement>, "onButtonClick" | keyof import("@hh.ru/magritte-ui-input/types").InputBaseProps | keyof import("@hh.ru/magritte-ui-input/types").ControlledProps | "range" | "dateMask" | "timeMask" | "timeRounding" | "hideMask"> & import("react").RefAttributes<HTMLInputElement>>;
package/UncontrolledDateTimeInput.js CHANGED
@@ -15,7 +15,7 @@ import './useFocus.js';
15
15
  import './useInputAriaProps.js';
16
16
  import '@hh.ru/magritte-ui-typography';
17
17
  import './useDateTimeMask.js';
18
- import './index.esm-LrCm-Ziw.js';
18
+ import './index.esm-DX-FtELq.js';
19
19
 
20
20
  const UncontrolledDateTimeInput = forwardRef(({ value, onChange, ...restProps }, ref) => {
21
21
  const [currentValue, changeHandler] = useUncontrolledInput(value, onChange);
package/index.css CHANGED
@@ -90,22 +90,22 @@
90
90
  --magritte-color-component-input-stroke-state-field-focused-v23-2-2:#7195AF;
91
91
  --magritte-color-component-input-icon-content-v23-2-2:#AABBCA;
92
92
  }
93
- .magritte-input___LVTID_9-0-12{
93
+ .magritte-input___LVTID_9-1-0{
94
94
  display:inline-block;
95
95
  width:100%;
96
96
  --animation-100-duration:var(--magritte-semantic-animation-ease-in-out-100-duration-v23-2-2);
97
97
  --animation-200-duration:var(--magritte-semantic-animation-ease-in-out-200-duration-v23-2-2);
98
98
  }
99
- .magritte-input___LVTID_9-0-12:has(input:autofill) .magritte-label___YlOQk_9-0-12{
99
+ .magritte-input___LVTID_9-1-0:has(input:autofill) .magritte-label___YlOQk_9-1-0{
100
100
  display:none;
101
101
  }
102
- .magritte-input___LVTID_9-0-12.magritte-elevated___kPcsM_9-0-12:has(input:autofill) .magritte-label___YlOQk_9-0-12{
102
+ .magritte-input___LVTID_9-1-0.magritte-elevated___kPcsM_9-1-0:has(input:autofill) .magritte-label___YlOQk_9-1-0{
103
103
  display:block;
104
104
  transform:translateY(calc(0px - ((18px + 22px) / 2) + (18px / 2)));
105
105
  transition-duration:0ms;
106
106
  color:var(--magritte-color-component-input-text-label-v23-2-2);
107
107
  }
108
- .magritte-input___LVTID_9-0-12.magritte-elevated___kPcsM_9-0-12:has(input:autofill) .magritte-label___YlOQk_9-0-12 > *{
108
+ .magritte-input___LVTID_9-1-0.magritte-elevated___kPcsM_9-1-0:has(input:autofill) .magritte-label___YlOQk_9-1-0 > *{
109
109
  font-family:"hh sans";
110
110
  font-weight:400;
111
111
  line-height:18px;
@@ -116,200 +116,200 @@
116
116
  text-decoration:none;
117
117
  }
118
118
  @media (min-width: 1020px){
119
- body.magritte-old-layout .magritte-input___LVTID_9-0-12:not(.magritte-focused___dxrHD_9-0-12):not(.magritte-invalid___L5MVa_9-0-12):not(.magritte-disabled___0NH6E_9-0-12):hover{
119
+ body.magritte-old-layout .magritte-input___LVTID_9-1-0:not(.magritte-focused___dxrHD_9-1-0):not(.magritte-invalid___L5MVa_9-1-0):not(.magritte-disabled___0NH6E_9-1-0):hover{
120
120
  --magritte-ui-form-helper-description-color-override:var(--magritte-color-component-input-text-state-description-hovered-v23-2-2);
121
121
  }
122
- body.magritte-old-layout .magritte-input___LVTID_9-0-12:not(.magritte-focused___dxrHD_9-0-12):not(.magritte-invalid___L5MVa_9-0-12):not(.magritte-disabled___0NH6E_9-0-12):hover .magritte-position-container___kZnvZ_9-0-12{
122
+ body.magritte-old-layout .magritte-input___LVTID_9-1-0:not(.magritte-focused___dxrHD_9-1-0):not(.magritte-invalid___L5MVa_9-1-0):not(.magritte-disabled___0NH6E_9-1-0):hover .magritte-position-container___kZnvZ_9-1-0{
123
123
  background-color:var(--magritte-color-component-input-background-state-field-hovered-v23-2-2);
124
124
  box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-hovered-v23-2-2);
125
125
  }
126
- body.magritte-old-layout .magritte-input___LVTID_9-0-12:not(.magritte-focused___dxrHD_9-0-12):not(.magritte-invalid___L5MVa_9-0-12):not(.magritte-disabled___0NH6E_9-0-12):hover .magritte-field___9S8Tw_9-0-12{
126
+ body.magritte-old-layout .magritte-input___LVTID_9-1-0:not(.magritte-focused___dxrHD_9-1-0):not(.magritte-invalid___L5MVa_9-1-0):not(.magritte-disabled___0NH6E_9-1-0):hover .magritte-field___9S8Tw_9-1-0{
127
127
  color:var(--magritte-color-component-input-text-state-content-hovered-v23-2-2);
128
128
  -webkit-text-fill-color:var(--magritte-color-component-input-text-state-content-hovered-v23-2-2);
129
129
  opacity:1;
130
130
  }
131
- body.magritte-old-layout .magritte-input___LVTID_9-0-12:not(.magritte-focused___dxrHD_9-0-12):not(.magritte-invalid___L5MVa_9-0-12):not(.magritte-disabled___0NH6E_9-0-12):hover .magritte-hint___EFGK0_9-0-12{
131
+ body.magritte-old-layout .magritte-input___LVTID_9-1-0:not(.magritte-focused___dxrHD_9-1-0):not(.magritte-invalid___L5MVa_9-1-0):not(.magritte-disabled___0NH6E_9-1-0):hover .magritte-hint___EFGK0_9-1-0{
132
132
  --magritte-ui-text-color-override:'magritte-color-component-input-text-state-description-hovered';
133
133
  color:var(--magritte-color-component-input-text-state-description-hovered-v23-2-2);
134
134
  }
135
- body.magritte-old-layout .magritte-input___LVTID_9-0-12:not(.magritte-focused___dxrHD_9-0-12):not(.magritte-invalid___L5MVa_9-0-12):not(.magritte-disabled___0NH6E_9-0-12):hover .magritte-additional-value___9Kyap_9-0-12{
135
+ body.magritte-old-layout .magritte-input___LVTID_9-1-0:not(.magritte-focused___dxrHD_9-1-0):not(.magritte-invalid___L5MVa_9-1-0):not(.magritte-disabled___0NH6E_9-1-0):hover .magritte-additional-value___9Kyap_9-1-0{
136
136
  --magritte-ui-text-color-override:var(--magritte-color-component-input-text-state-content-hovered-v23-2-2);
137
137
  }
138
- body.magritte-old-layout .magritte-input___LVTID_9-0-12:not(.magritte-focused___dxrHD_9-0-12):not(.magritte-invalid___L5MVa_9-0-12):not(.magritte-disabled___0NH6E_9-0-12):hover .magritte-label_elevated___PVcpC_9-0-12{
138
+ body.magritte-old-layout .magritte-input___LVTID_9-1-0:not(.magritte-focused___dxrHD_9-1-0):not(.magritte-invalid___L5MVa_9-1-0):not(.magritte-disabled___0NH6E_9-1-0):hover .magritte-label_elevated___PVcpC_9-1-0{
139
139
  color:var(--magritte-color-component-input-text-state-label-hovered-v23-2-2);
140
140
  }
141
- body.magritte-old-layout .magritte-input___LVTID_9-0-12:not(.magritte-focused___dxrHD_9-0-12):not(.magritte-invalid___L5MVa_9-0-12):not(.magritte-disabled___0NH6E_9-0-12):hover .magritte-label___YlOQk_9-0-12:not(.magritte-label_elevated___PVcpC_9-0-12),
142
- body.magritte-old-layout .magritte-input___LVTID_9-0-12:not(.magritte-focused___dxrHD_9-0-12):not(.magritte-invalid___L5MVa_9-0-12):not(.magritte-disabled___0NH6E_9-0-12):hover .magritte-fixed-placeholder___PYJIH_9-0-12{
141
+ body.magritte-old-layout .magritte-input___LVTID_9-1-0:not(.magritte-focused___dxrHD_9-1-0):not(.magritte-invalid___L5MVa_9-1-0):not(.magritte-disabled___0NH6E_9-1-0):hover .magritte-label___YlOQk_9-1-0:not(.magritte-label_elevated___PVcpC_9-1-0),
142
+ body.magritte-old-layout .magritte-input___LVTID_9-1-0:not(.magritte-focused___dxrHD_9-1-0):not(.magritte-invalid___L5MVa_9-1-0):not(.magritte-disabled___0NH6E_9-1-0):hover .magritte-fixed-placeholder___PYJIH_9-1-0{
143
143
  color:var(--magritte-color-component-input-text-state-placeholder-hovered-v23-2-2);
144
144
  }
145
- body.magritte-old-layout .magritte-input___LVTID_9-0-12:not(.magritte-focused___dxrHD_9-0-12):not(.magritte-invalid___L5MVa_9-0-12):not(.magritte-disabled___0NH6E_9-0-12):hover .magritte-icon___HEDsQ_9-0-12{
145
+ body.magritte-old-layout .magritte-input___LVTID_9-1-0:not(.magritte-focused___dxrHD_9-1-0):not(.magritte-invalid___L5MVa_9-1-0):not(.magritte-disabled___0NH6E_9-1-0):hover .magritte-icon___HEDsQ_9-1-0{
146
146
  --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-content-hovered-v23-2-2);
147
147
  }
148
148
  }
149
149
  @media (min-width: 1024px){
150
- body:not(.magritte-old-layout) .magritte-input___LVTID_9-0-12:not(.magritte-focused___dxrHD_9-0-12):not(.magritte-invalid___L5MVa_9-0-12):not(.magritte-disabled___0NH6E_9-0-12):hover{
150
+ body:not(.magritte-old-layout) .magritte-input___LVTID_9-1-0:not(.magritte-focused___dxrHD_9-1-0):not(.magritte-invalid___L5MVa_9-1-0):not(.magritte-disabled___0NH6E_9-1-0):hover{
151
151
  --magritte-ui-form-helper-description-color-override:var(--magritte-color-component-input-text-state-description-hovered-v23-2-2);
152
152
  }
153
- body:not(.magritte-old-layout) .magritte-input___LVTID_9-0-12:not(.magritte-focused___dxrHD_9-0-12):not(.magritte-invalid___L5MVa_9-0-12):not(.magritte-disabled___0NH6E_9-0-12):hover .magritte-position-container___kZnvZ_9-0-12{
153
+ body:not(.magritte-old-layout) .magritte-input___LVTID_9-1-0:not(.magritte-focused___dxrHD_9-1-0):not(.magritte-invalid___L5MVa_9-1-0):not(.magritte-disabled___0NH6E_9-1-0):hover .magritte-position-container___kZnvZ_9-1-0{
154
154
  background-color:var(--magritte-color-component-input-background-state-field-hovered-v23-2-2);
155
155
  box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-hovered-v23-2-2);
156
156
  }
157
- body:not(.magritte-old-layout) .magritte-input___LVTID_9-0-12:not(.magritte-focused___dxrHD_9-0-12):not(.magritte-invalid___L5MVa_9-0-12):not(.magritte-disabled___0NH6E_9-0-12):hover .magritte-field___9S8Tw_9-0-12{
157
+ body:not(.magritte-old-layout) .magritte-input___LVTID_9-1-0:not(.magritte-focused___dxrHD_9-1-0):not(.magritte-invalid___L5MVa_9-1-0):not(.magritte-disabled___0NH6E_9-1-0):hover .magritte-field___9S8Tw_9-1-0{
158
158
  color:var(--magritte-color-component-input-text-state-content-hovered-v23-2-2);
159
159
  -webkit-text-fill-color:var(--magritte-color-component-input-text-state-content-hovered-v23-2-2);
160
160
  opacity:1;
161
161
  }
162
- body:not(.magritte-old-layout) .magritte-input___LVTID_9-0-12:not(.magritte-focused___dxrHD_9-0-12):not(.magritte-invalid___L5MVa_9-0-12):not(.magritte-disabled___0NH6E_9-0-12):hover .magritte-hint___EFGK0_9-0-12{
162
+ body:not(.magritte-old-layout) .magritte-input___LVTID_9-1-0:not(.magritte-focused___dxrHD_9-1-0):not(.magritte-invalid___L5MVa_9-1-0):not(.magritte-disabled___0NH6E_9-1-0):hover .magritte-hint___EFGK0_9-1-0{
163
163
  --magritte-ui-text-color-override:'magritte-color-component-input-text-state-description-hovered';
164
164
  color:var(--magritte-color-component-input-text-state-description-hovered-v23-2-2);
165
165
  }
166
- body:not(.magritte-old-layout) .magritte-input___LVTID_9-0-12:not(.magritte-focused___dxrHD_9-0-12):not(.magritte-invalid___L5MVa_9-0-12):not(.magritte-disabled___0NH6E_9-0-12):hover .magritte-additional-value___9Kyap_9-0-12{
166
+ body:not(.magritte-old-layout) .magritte-input___LVTID_9-1-0:not(.magritte-focused___dxrHD_9-1-0):not(.magritte-invalid___L5MVa_9-1-0):not(.magritte-disabled___0NH6E_9-1-0):hover .magritte-additional-value___9Kyap_9-1-0{
167
167
  --magritte-ui-text-color-override:var(--magritte-color-component-input-text-state-content-hovered-v23-2-2);
168
168
  }
169
- body:not(.magritte-old-layout) .magritte-input___LVTID_9-0-12:not(.magritte-focused___dxrHD_9-0-12):not(.magritte-invalid___L5MVa_9-0-12):not(.magritte-disabled___0NH6E_9-0-12):hover .magritte-label_elevated___PVcpC_9-0-12{
169
+ body:not(.magritte-old-layout) .magritte-input___LVTID_9-1-0:not(.magritte-focused___dxrHD_9-1-0):not(.magritte-invalid___L5MVa_9-1-0):not(.magritte-disabled___0NH6E_9-1-0):hover .magritte-label_elevated___PVcpC_9-1-0{
170
170
  color:var(--magritte-color-component-input-text-state-label-hovered-v23-2-2);
171
171
  }
172
- body:not(.magritte-old-layout) .magritte-input___LVTID_9-0-12:not(.magritte-focused___dxrHD_9-0-12):not(.magritte-invalid___L5MVa_9-0-12):not(.magritte-disabled___0NH6E_9-0-12):hover .magritte-label___YlOQk_9-0-12:not(.magritte-label_elevated___PVcpC_9-0-12),
173
- body:not(.magritte-old-layout) .magritte-input___LVTID_9-0-12:not(.magritte-focused___dxrHD_9-0-12):not(.magritte-invalid___L5MVa_9-0-12):not(.magritte-disabled___0NH6E_9-0-12):hover .magritte-fixed-placeholder___PYJIH_9-0-12{
172
+ body:not(.magritte-old-layout) .magritte-input___LVTID_9-1-0:not(.magritte-focused___dxrHD_9-1-0):not(.magritte-invalid___L5MVa_9-1-0):not(.magritte-disabled___0NH6E_9-1-0):hover .magritte-label___YlOQk_9-1-0:not(.magritte-label_elevated___PVcpC_9-1-0),
173
+ body:not(.magritte-old-layout) .magritte-input___LVTID_9-1-0:not(.magritte-focused___dxrHD_9-1-0):not(.magritte-invalid___L5MVa_9-1-0):not(.magritte-disabled___0NH6E_9-1-0):hover .magritte-fixed-placeholder___PYJIH_9-1-0{
174
174
  color:var(--magritte-color-component-input-text-state-placeholder-hovered-v23-2-2);
175
175
  }
176
- body:not(.magritte-old-layout) .magritte-input___LVTID_9-0-12:not(.magritte-focused___dxrHD_9-0-12):not(.magritte-invalid___L5MVa_9-0-12):not(.magritte-disabled___0NH6E_9-0-12):hover .magritte-icon___HEDsQ_9-0-12{
176
+ body:not(.magritte-old-layout) .magritte-input___LVTID_9-1-0:not(.magritte-focused___dxrHD_9-1-0):not(.magritte-invalid___L5MVa_9-1-0):not(.magritte-disabled___0NH6E_9-1-0):hover .magritte-icon___HEDsQ_9-1-0{
177
177
  --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-content-hovered-v23-2-2);
178
178
  }
179
179
  }
180
- .magritte-input___LVTID_9-0-12.magritte-focused___dxrHD_9-0-12{
180
+ .magritte-input___LVTID_9-1-0.magritte-focused___dxrHD_9-1-0{
181
181
  --magritte-ui-form-helper-description-color-override:var(--magritte-color-component-input-text-state-description-focused-v23-2-2);
182
182
  }
183
- .magritte-input___LVTID_9-0-12.magritte-focused___dxrHD_9-0-12 .magritte-position-container___kZnvZ_9-0-12{
183
+ .magritte-input___LVTID_9-1-0.magritte-focused___dxrHD_9-1-0 .magritte-position-container___kZnvZ_9-1-0{
184
184
  background-color:var(--magritte-color-component-input-background-state-field-focused-v23-2-2);
185
185
  box-shadow:inset 0 0 0 2px var(--magritte-color-component-input-stroke-state-field-focused-v23-2-2);
186
186
  }
187
- .magritte-input___LVTID_9-0-12.magritte-focused___dxrHD_9-0-12 .magritte-field___9S8Tw_9-0-12{
187
+ .magritte-input___LVTID_9-1-0.magritte-focused___dxrHD_9-1-0 .magritte-field___9S8Tw_9-1-0{
188
188
  color:var(--magritte-color-component-input-text-state-content-focused-v23-2-2);
189
189
  -webkit-text-fill-color:var(--magritte-color-component-input-text-state-content-focused-v23-2-2);
190
190
  opacity:1;
191
191
  }
192
- .magritte-input___LVTID_9-0-12.magritte-focused___dxrHD_9-0-12 .magritte-hint___EFGK0_9-0-12{
192
+ .magritte-input___LVTID_9-1-0.magritte-focused___dxrHD_9-1-0 .magritte-hint___EFGK0_9-1-0{
193
193
  --magritte-ui-text-color-override:'magritte-color-component-input-text-state-description-focused';
194
194
  color:var(--magritte-color-component-input-text-state-description-focused-v23-2-2);
195
195
  }
196
- .magritte-input___LVTID_9-0-12.magritte-focused___dxrHD_9-0-12 .magritte-additional-value___9Kyap_9-0-12{
196
+ .magritte-input___LVTID_9-1-0.magritte-focused___dxrHD_9-1-0 .magritte-additional-value___9Kyap_9-1-0{
197
197
  --magritte-ui-text-color-override:var(--magritte-color-component-input-text-state-content-focused-v23-2-2);
198
198
  }
199
- .magritte-input___LVTID_9-0-12.magritte-focused___dxrHD_9-0-12 .magritte-label_elevated___PVcpC_9-0-12{
199
+ .magritte-input___LVTID_9-1-0.magritte-focused___dxrHD_9-1-0 .magritte-label_elevated___PVcpC_9-1-0{
200
200
  color:var(--magritte-color-component-input-text-state-label-focused-v23-2-2);
201
201
  }
202
- .magritte-input___LVTID_9-0-12.magritte-focused___dxrHD_9-0-12 .magritte-label___YlOQk_9-0-12:not(.magritte-label_elevated___PVcpC_9-0-12),
203
- .magritte-input___LVTID_9-0-12.magritte-focused___dxrHD_9-0-12 .magritte-fixed-placeholder___PYJIH_9-0-12{
202
+ .magritte-input___LVTID_9-1-0.magritte-focused___dxrHD_9-1-0 .magritte-label___YlOQk_9-1-0:not(.magritte-label_elevated___PVcpC_9-1-0),
203
+ .magritte-input___LVTID_9-1-0.magritte-focused___dxrHD_9-1-0 .magritte-fixed-placeholder___PYJIH_9-1-0{
204
204
  color:var(--magritte-color-component-input-text-state-placeholder-focused-v23-2-2);
205
205
  }
206
- .magritte-input___LVTID_9-0-12.magritte-focused___dxrHD_9-0-12 .magritte-icon___HEDsQ_9-0-12{
206
+ .magritte-input___LVTID_9-1-0.magritte-focused___dxrHD_9-1-0 .magritte-icon___HEDsQ_9-1-0{
207
207
  --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-content-focused-v23-2-2);
208
208
  }
209
- .magritte-input___LVTID_9-0-12.magritte-invalid___L5MVa_9-0-12{
209
+ .magritte-input___LVTID_9-1-0.magritte-invalid___L5MVa_9-1-0{
210
210
  --magritte-ui-form-helper-error-color-override:var(--magritte-color-component-input-text-state-description-invalid-v23-2-2);
211
211
  }
212
- .magritte-input___LVTID_9-0-12.magritte-invalid___L5MVa_9-0-12 .magritte-position-container___kZnvZ_9-0-12{
212
+ .magritte-input___LVTID_9-1-0.magritte-invalid___L5MVa_9-1-0 .magritte-position-container___kZnvZ_9-1-0{
213
213
  background-color:var(--magritte-color-component-input-background-state-field-invalid-v23-2-2);
214
214
  box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-invalid-v23-2-2);
215
215
  }
216
- .magritte-input___LVTID_9-0-12.magritte-invalid___L5MVa_9-0-12 .magritte-field___9S8Tw_9-0-12{
216
+ .magritte-input___LVTID_9-1-0.magritte-invalid___L5MVa_9-1-0 .magritte-field___9S8Tw_9-1-0{
217
217
  color:var(--magritte-color-component-input-text-state-content-invalid-v23-2-2);
218
218
  -webkit-text-fill-color:var(--magritte-color-component-input-text-state-content-invalid-v23-2-2);
219
219
  opacity:1;
220
220
  }
221
- .magritte-input___LVTID_9-0-12.magritte-invalid___L5MVa_9-0-12 .magritte-hint___EFGK0_9-0-12{
221
+ .magritte-input___LVTID_9-1-0.magritte-invalid___L5MVa_9-1-0 .magritte-hint___EFGK0_9-1-0{
222
222
  --magritte-ui-text-color-override:'magritte-color-component-input-text-state-description-invalid';
223
223
  color:var(--magritte-color-component-input-text-state-description-invalid-v23-2-2);
224
224
  }
225
- .magritte-input___LVTID_9-0-12.magritte-invalid___L5MVa_9-0-12 .magritte-additional-value___9Kyap_9-0-12{
225
+ .magritte-input___LVTID_9-1-0.magritte-invalid___L5MVa_9-1-0 .magritte-additional-value___9Kyap_9-1-0{
226
226
  --magritte-ui-text-color-override:var(--magritte-color-component-input-text-state-content-invalid-v23-2-2);
227
227
  }
228
- .magritte-input___LVTID_9-0-12.magritte-invalid___L5MVa_9-0-12 .magritte-label_elevated___PVcpC_9-0-12{
228
+ .magritte-input___LVTID_9-1-0.magritte-invalid___L5MVa_9-1-0 .magritte-label_elevated___PVcpC_9-1-0{
229
229
  color:var(--magritte-color-component-input-text-state-label-invalid-v23-2-2);
230
230
  }
231
- .magritte-input___LVTID_9-0-12.magritte-invalid___L5MVa_9-0-12 .magritte-label___YlOQk_9-0-12:not(.magritte-label_elevated___PVcpC_9-0-12),
232
- .magritte-input___LVTID_9-0-12.magritte-invalid___L5MVa_9-0-12 .magritte-fixed-placeholder___PYJIH_9-0-12{
231
+ .magritte-input___LVTID_9-1-0.magritte-invalid___L5MVa_9-1-0 .magritte-label___YlOQk_9-1-0:not(.magritte-label_elevated___PVcpC_9-1-0),
232
+ .magritte-input___LVTID_9-1-0.magritte-invalid___L5MVa_9-1-0 .magritte-fixed-placeholder___PYJIH_9-1-0{
233
233
  color:var(--magritte-color-component-input-text-state-placeholder-invalid-v23-2-2);
234
234
  }
235
- .magritte-input___LVTID_9-0-12.magritte-invalid___L5MVa_9-0-12 .magritte-icon___HEDsQ_9-0-12{
235
+ .magritte-input___LVTID_9-1-0.magritte-invalid___L5MVa_9-1-0 .magritte-icon___HEDsQ_9-1-0{
236
236
  --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-content-invalid-v23-2-2);
237
237
  }
238
- .magritte-input___LVTID_9-0-12.magritte-invalid___L5MVa_9-0-12.magritte-focused___dxrHD_9-0-12{
238
+ .magritte-input___LVTID_9-1-0.magritte-invalid___L5MVa_9-1-0.magritte-focused___dxrHD_9-1-0{
239
239
  --magritte-ui-form-helper-error-color-override:var(--magritte-color-component-input-text-state-description-invalid-v23-2-2);
240
240
  }
241
- .magritte-input___LVTID_9-0-12.magritte-invalid___L5MVa_9-0-12.magritte-focused___dxrHD_9-0-12 .magritte-position-container___kZnvZ_9-0-12{
241
+ .magritte-input___LVTID_9-1-0.magritte-invalid___L5MVa_9-1-0.magritte-focused___dxrHD_9-1-0 .magritte-position-container___kZnvZ_9-1-0{
242
242
  background-color:var(--magritte-color-component-input-background-state-field-invalid-v23-2-2);
243
243
  box-shadow:inset 0 0 0 2px var(--magritte-color-component-input-stroke-state-field-invalid-v23-2-2);
244
244
  }
245
- .magritte-input___LVTID_9-0-12.magritte-invalid___L5MVa_9-0-12.magritte-focused___dxrHD_9-0-12 .magritte-field___9S8Tw_9-0-12{
245
+ .magritte-input___LVTID_9-1-0.magritte-invalid___L5MVa_9-1-0.magritte-focused___dxrHD_9-1-0 .magritte-field___9S8Tw_9-1-0{
246
246
  color:var(--magritte-color-component-input-text-state-content-invalid-v23-2-2);
247
247
  -webkit-text-fill-color:var(--magritte-color-component-input-text-state-content-invalid-v23-2-2);
248
248
  opacity:1;
249
249
  }
250
- .magritte-input___LVTID_9-0-12.magritte-invalid___L5MVa_9-0-12.magritte-focused___dxrHD_9-0-12 .magritte-hint___EFGK0_9-0-12{
250
+ .magritte-input___LVTID_9-1-0.magritte-invalid___L5MVa_9-1-0.magritte-focused___dxrHD_9-1-0 .magritte-hint___EFGK0_9-1-0{
251
251
  --magritte-ui-text-color-override:'magritte-color-component-input-text-state-description-invalid';
252
252
  color:var(--magritte-color-component-input-text-state-description-invalid-v23-2-2);
253
253
  }
254
- .magritte-input___LVTID_9-0-12.magritte-invalid___L5MVa_9-0-12.magritte-focused___dxrHD_9-0-12 .magritte-additional-value___9Kyap_9-0-12{
254
+ .magritte-input___LVTID_9-1-0.magritte-invalid___L5MVa_9-1-0.magritte-focused___dxrHD_9-1-0 .magritte-additional-value___9Kyap_9-1-0{
255
255
  --magritte-ui-text-color-override:var(--magritte-color-component-input-text-state-content-invalid-v23-2-2);
256
256
  }
257
- .magritte-input___LVTID_9-0-12.magritte-invalid___L5MVa_9-0-12.magritte-focused___dxrHD_9-0-12 .magritte-label_elevated___PVcpC_9-0-12{
257
+ .magritte-input___LVTID_9-1-0.magritte-invalid___L5MVa_9-1-0.magritte-focused___dxrHD_9-1-0 .magritte-label_elevated___PVcpC_9-1-0{
258
258
  color:var(--magritte-color-component-input-text-state-label-invalid-v23-2-2);
259
259
  }
260
- .magritte-input___LVTID_9-0-12.magritte-invalid___L5MVa_9-0-12.magritte-focused___dxrHD_9-0-12 .magritte-label___YlOQk_9-0-12:not(.magritte-label_elevated___PVcpC_9-0-12),
261
- .magritte-input___LVTID_9-0-12.magritte-invalid___L5MVa_9-0-12.magritte-focused___dxrHD_9-0-12 .magritte-fixed-placeholder___PYJIH_9-0-12{
260
+ .magritte-input___LVTID_9-1-0.magritte-invalid___L5MVa_9-1-0.magritte-focused___dxrHD_9-1-0 .magritte-label___YlOQk_9-1-0:not(.magritte-label_elevated___PVcpC_9-1-0),
261
+ .magritte-input___LVTID_9-1-0.magritte-invalid___L5MVa_9-1-0.magritte-focused___dxrHD_9-1-0 .magritte-fixed-placeholder___PYJIH_9-1-0{
262
262
  color:var(--magritte-color-component-input-text-state-placeholder-invalid-v23-2-2);
263
263
  }
264
- .magritte-input___LVTID_9-0-12.magritte-invalid___L5MVa_9-0-12.magritte-focused___dxrHD_9-0-12 .magritte-icon___HEDsQ_9-0-12{
264
+ .magritte-input___LVTID_9-1-0.magritte-invalid___L5MVa_9-1-0.magritte-focused___dxrHD_9-1-0 .magritte-icon___HEDsQ_9-1-0{
265
265
  --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-content-invalid-v23-2-2);
266
266
  }
267
- .magritte-input___LVTID_9-0-12.magritte-focus-visible___QvCO1_9-0-12 .magritte-position-container___kZnvZ_9-0-12{
267
+ .magritte-input___LVTID_9-1-0.magritte-focus-visible___QvCO1_9-1-0 .magritte-position-container___kZnvZ_9-1-0{
268
268
  outline:var(--magritte-color-component-input-stroke-state-accent-focused-accessible-v23-2-2) solid 4px;
269
269
  }
270
- .magritte-input___LVTID_9-0-12.magritte-focus-visible___QvCO1_9-0-12.magritte-invalid___L5MVa_9-0-12 .magritte-position-container___kZnvZ_9-0-12{
270
+ .magritte-input___LVTID_9-1-0.magritte-focus-visible___QvCO1_9-1-0.magritte-invalid___L5MVa_9-1-0 .magritte-position-container___kZnvZ_9-1-0{
271
271
  outline-color:var(--magritte-color-component-input-stroke-state-negative-focused-accessible-v23-2-2);
272
272
  }
273
- .magritte-input___LVTID_9-0-12.magritte-disabled___0NH6E_9-0-12{
273
+ .magritte-input___LVTID_9-1-0.magritte-disabled___0NH6E_9-1-0{
274
274
  --magritte-ui-form-helper-description-color-override:var(--magritte-color-component-input-text-state-description-disabled-v23-2-2);
275
275
  }
276
- .magritte-input___LVTID_9-0-12.magritte-disabled___0NH6E_9-0-12 .magritte-position-container___kZnvZ_9-0-12{
276
+ .magritte-input___LVTID_9-1-0.magritte-disabled___0NH6E_9-1-0 .magritte-position-container___kZnvZ_9-1-0{
277
277
  background-color:var(--magritte-color-component-input-background-state-field-disabled-v23-2-2);
278
278
  box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-disabled-v23-2-2);
279
279
  }
280
- .magritte-input___LVTID_9-0-12.magritte-disabled___0NH6E_9-0-12 .magritte-field___9S8Tw_9-0-12{
280
+ .magritte-input___LVTID_9-1-0.magritte-disabled___0NH6E_9-1-0 .magritte-field___9S8Tw_9-1-0{
281
281
  color:var(--magritte-color-component-input-text-state-content-disabled-v23-2-2);
282
282
  -webkit-text-fill-color:var(--magritte-color-component-input-text-state-content-disabled-v23-2-2);
283
283
  opacity:1;
284
284
  }
285
- .magritte-input___LVTID_9-0-12.magritte-disabled___0NH6E_9-0-12 .magritte-hint___EFGK0_9-0-12{
285
+ .magritte-input___LVTID_9-1-0.magritte-disabled___0NH6E_9-1-0 .magritte-hint___EFGK0_9-1-0{
286
286
  --magritte-ui-text-color-override:'magritte-color-component-input-text-state-description-disabled';
287
287
  color:var(--magritte-color-component-input-text-state-description-disabled-v23-2-2);
288
288
  }
289
- .magritte-input___LVTID_9-0-12.magritte-disabled___0NH6E_9-0-12 .magritte-additional-value___9Kyap_9-0-12{
289
+ .magritte-input___LVTID_9-1-0.magritte-disabled___0NH6E_9-1-0 .magritte-additional-value___9Kyap_9-1-0{
290
290
  --magritte-ui-text-color-override:var(--magritte-color-component-input-text-state-content-disabled-v23-2-2);
291
291
  }
292
- .magritte-input___LVTID_9-0-12.magritte-disabled___0NH6E_9-0-12 .magritte-label_elevated___PVcpC_9-0-12{
292
+ .magritte-input___LVTID_9-1-0.magritte-disabled___0NH6E_9-1-0 .magritte-label_elevated___PVcpC_9-1-0{
293
293
  color:var(--magritte-color-component-input-text-state-label-disabled-v23-2-2);
294
294
  }
295
- .magritte-input___LVTID_9-0-12.magritte-disabled___0NH6E_9-0-12 .magritte-label___YlOQk_9-0-12:not(.magritte-label_elevated___PVcpC_9-0-12),
296
- .magritte-input___LVTID_9-0-12.magritte-disabled___0NH6E_9-0-12 .magritte-fixed-placeholder___PYJIH_9-0-12{
295
+ .magritte-input___LVTID_9-1-0.magritte-disabled___0NH6E_9-1-0 .magritte-label___YlOQk_9-1-0:not(.magritte-label_elevated___PVcpC_9-1-0),
296
+ .magritte-input___LVTID_9-1-0.magritte-disabled___0NH6E_9-1-0 .magritte-fixed-placeholder___PYJIH_9-1-0{
297
297
  color:var(--magritte-color-component-input-text-state-placeholder-disabled-v23-2-2);
298
298
  }
299
- .magritte-input___LVTID_9-0-12.magritte-disabled___0NH6E_9-0-12 .magritte-icon___HEDsQ_9-0-12{
299
+ .magritte-input___LVTID_9-1-0.magritte-disabled___0NH6E_9-1-0 .magritte-icon___HEDsQ_9-1-0{
300
300
  --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-content-disabled-v23-2-2);
301
301
  }
302
- .magritte-input___LVTID_9-0-12.magritte-disabled___0NH6E_9-0-12 .magritte-right-container___N0B0o_9-0-12{
302
+ .magritte-input___LVTID_9-1-0.magritte-disabled___0NH6E_9-1-0 .magritte-right-container___N0B0o_9-1-0{
303
303
  --magritte-counter-background-color:var(--magritte-color-component-input-counter-background-state-content-disabled-v23-2-2);
304
304
  --magritte-counter-label-color:var(--magritte-color-component-input-counter-text-state-content-disabled-v23-2-2);
305
305
  }
306
306
  @media (prefers-reduced-motion){
307
- .magritte-input___LVTID_9-0-12{
307
+ .magritte-input___LVTID_9-1-0{
308
308
  --animation-100-duration:1ms;
309
309
  --animation-200-duration:1ms;
310
310
  }
311
311
  }
312
- .magritte-position-container___kZnvZ_9-0-12{
312
+ .magritte-position-container___kZnvZ_9-1-0{
313
313
  cursor:text;
314
314
  display:flex;
315
315
  align-items:center;
@@ -321,23 +321,23 @@
321
321
  box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-field-v23-2-2);
322
322
  padding:4px 4px 4px 16px;
323
323
  }
324
- .magritte-with-icon___TPBe2_9-0-12 .magritte-position-container___kZnvZ_9-0-12{
324
+ .magritte-with-icon___TPBe2_9-1-0 .magritte-position-container___kZnvZ_9-1-0{
325
325
  padding-left:12px;
326
326
  }
327
- .magritte-large___9frRh_9-0-12 .magritte-position-container___kZnvZ_9-0-12{
327
+ .magritte-large___9frRh_9-1-0 .magritte-position-container___kZnvZ_9-1-0{
328
328
  padding:8px 8px 8px 16px;
329
329
  }
330
- .magritte-small___iQL4F_9-0-12 .magritte-position-container___kZnvZ_9-0-12{
330
+ .magritte-small___iQL4F_9-1-0 .magritte-position-container___kZnvZ_9-1-0{
331
331
  padding:0 2px 0 12px;
332
332
  }
333
- .magritte-right-container___N0B0o_9-0-12{
333
+ .magritte-right-container___N0B0o_9-1-0{
334
334
  display:flex;
335
335
  align-items:center;
336
336
  justify-content:center;
337
337
  --magritte-counter-background-color:var(--magritte-color-component-input-counter-background-content-v23-2-2);
338
338
  --magritte-counter-label-color:var(--magritte-color-component-input-counter-text-content-v23-2-2);
339
339
  }
340
- .magritte-autofill-helper___WFjOW_9-0-12{
340
+ .magritte-autofill-helper___WFjOW_9-1-0{
341
341
  position:absolute;
342
342
  left:1px;
343
343
  top:1px;
@@ -347,17 +347,17 @@
347
347
  border-radius:11px;
348
348
  display:none;
349
349
  }
350
- .magritte-autofill-helper___WFjOW_9-0-12:has(+ .magritte-content-container___s-0kX_9-0-12 .magritte-field___9S8Tw_9-0-12:autofill){
350
+ .magritte-autofill-helper___WFjOW_9-1-0:has(+ .magritte-content-container___s-0kX_9-1-0 .magritte-field___9S8Tw_9-1-0:autofill){
351
351
  display:block;
352
352
  }
353
- .magritte-autofill-helper___WFjOW_9-0-12:has(+ .magritte-content-container___s-0kX_9-0-12 .magritte-field___9S8Tw_9-0-12:autofill:focus){
353
+ .magritte-autofill-helper___WFjOW_9-1-0:has(+ .magritte-content-container___s-0kX_9-1-0 .magritte-field___9S8Tw_9-1-0:autofill:focus){
354
354
  border-radius:10px;
355
355
  left:2px;
356
356
  top:2px;
357
357
  width:calc(100% - 2px * 2);
358
358
  height:calc(100% - 2px * 2);
359
359
  }
360
- .magritte-field___9S8Tw_9-0-12{
360
+ .magritte-field___9S8Tw_9-1-0{
361
361
  position:absolute;
362
362
  inset:0;
363
363
  background:none;
@@ -379,7 +379,7 @@
379
379
  text-transform:none;
380
380
  text-decoration:none;
381
381
  }
382
- .magritte-small___iQL4F_9-0-12 .magritte-field___9S8Tw_9-0-12{
382
+ .magritte-small___iQL4F_9-1-0 .magritte-field___9S8Tw_9-1-0{
383
383
  font-family:"hh sans";
384
384
  font-weight:400;
385
385
  line-height:20px;
@@ -389,13 +389,13 @@
389
389
  text-transform:none;
390
390
  text-decoration:none;
391
391
  }
392
- .magritte-field___9S8Tw_9-0-12:autofill{
392
+ .magritte-field___9S8Tw_9-1-0:autofill{
393
393
  box-shadow:inset 0 0 40px 40px #e7f2ff;
394
394
  }
395
- .magritte-field___9S8Tw_9-0-12::-ms-reveal{
395
+ .magritte-field___9S8Tw_9-1-0::-ms-reveal{
396
396
  display:none;
397
397
  }
398
- .magritte-icon___HEDsQ_9-0-12{
398
+ .magritte-icon___HEDsQ_9-1-0{
399
399
  display:flex;
400
400
  align-items:center;
401
401
  position:absolute;
@@ -405,21 +405,21 @@
405
405
  z-index:1;
406
406
  --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-content-v23-2-2);
407
407
  }
408
- .magritte-with-icon___TPBe2_9-0-12 .magritte-field___9S8Tw_9-0-12,
409
- .magritte-with-icon___TPBe2_9-0-12 .magritte-additional-value___9Kyap_9-0-12{
408
+ .magritte-with-icon___TPBe2_9-1-0 .magritte-field___9S8Tw_9-1-0,
409
+ .magritte-with-icon___TPBe2_9-1-0 .magritte-additional-value___9Kyap_9-1-0{
410
410
  padding-left:calc(24px + 12px);
411
411
  }
412
- .magritte-with-icon___TPBe2_9-0-12 .magritte-rigging-container___Up9Lb_9-0-12{
412
+ .magritte-with-icon___TPBe2_9-1-0 .magritte-rigging-container___Up9Lb_9-1-0{
413
413
  left:calc(24px + 12px);
414
414
  }
415
- .magritte-with-icon___TPBe2_9-0-12.magritte-small___iQL4F_9-0-12 .magritte-field___9S8Tw_9-0-12,
416
- .magritte-with-icon___TPBe2_9-0-12.magritte-small___iQL4F_9-0-12 .magritte-additional-value___9Kyap_9-0-12{
415
+ .magritte-with-icon___TPBe2_9-1-0.magritte-small___iQL4F_9-1-0 .magritte-field___9S8Tw_9-1-0,
416
+ .magritte-with-icon___TPBe2_9-1-0.magritte-small___iQL4F_9-1-0 .magritte-additional-value___9Kyap_9-1-0{
417
417
  padding-left:calc(16px + 10px);
418
418
  }
419
- .magritte-with-icon___TPBe2_9-0-12.magritte-small___iQL4F_9-0-12 .magritte-rigging-container___Up9Lb_9-0-12{
419
+ .magritte-with-icon___TPBe2_9-1-0.magritte-small___iQL4F_9-1-0 .magritte-rigging-container___Up9Lb_9-1-0{
420
420
  left:calc(16px + 10px);
421
421
  }
422
- .magritte-rigging-container___Up9Lb_9-0-12{
422
+ .magritte-rigging-container___Up9Lb_9-1-0{
423
423
  display:flex;
424
424
  align-items:center;
425
425
  position:absolute;
@@ -427,8 +427,8 @@
427
427
  inset:0;
428
428
  pointer-events:none;
429
429
  }
430
- .magritte-label___YlOQk_9-0-12,
431
- .magritte-fixed-placeholder___PYJIH_9-0-12{
430
+ .magritte-label___YlOQk_9-1-0,
431
+ .magritte-fixed-placeholder___PYJIH_9-1-0{
432
432
  white-space:nowrap;
433
433
  overflow:hidden;
434
434
  text-overflow:ellipsis;
@@ -446,8 +446,8 @@
446
446
  text-transform:none;
447
447
  text-decoration:none;
448
448
  }
449
- .magritte-small___iQL4F_9-0-12 .magritte-label___YlOQk_9-0-12,
450
- .magritte-small___iQL4F_9-0-12 .magritte-fixed-placeholder___PYJIH_9-0-12{
449
+ .magritte-small___iQL4F_9-1-0 .magritte-label___YlOQk_9-1-0,
450
+ .magritte-small___iQL4F_9-1-0 .magritte-fixed-placeholder___PYJIH_9-1-0{
451
451
  font-family:"hh sans";
452
452
  font-weight:400;
453
453
  line-height:20px;
@@ -457,11 +457,11 @@
457
457
  text-transform:none;
458
458
  text-decoration:none;
459
459
  }
460
- .magritte-label___YlOQk_9-0-12{
460
+ .magritte-label___YlOQk_9-1-0{
461
461
  display:block;
462
462
  transition-property:transform, color, font-size, letter-spacing;
463
463
  }
464
- .magritte-label_elevated___PVcpC_9-0-12{
464
+ .magritte-label_elevated___PVcpC_9-1-0{
465
465
  font-family:"hh sans";
466
466
  font-weight:400;
467
467
  line-height:18px;
@@ -473,7 +473,7 @@
473
473
  color:var(--magritte-color-component-input-text-label-v23-2-2);
474
474
  transform:translateY(calc(0px - 22px / 2));
475
475
  }
476
- .magritte-input__mask___CHda2_9-0-12{
476
+ .magritte-input__mask___CHda2_9-1-0{
477
477
  position:absolute;
478
478
  width:100%;
479
479
  pointer-events:none;
@@ -483,17 +483,17 @@
483
483
  text-overflow:ellipsis;
484
484
  --magritte-ui-text-color-override:var(--magritte-color-component-input-text-content-v23-2-2);
485
485
  }
486
- .magritte-value-ghost___IXNZj_9-0-12{
486
+ .magritte-value-ghost___IXNZj_9-1-0{
487
487
  visibility:hidden;
488
488
  white-space:pre;
489
489
  }
490
- .magritte-hint-container___rGsD8_9-0-12{
490
+ .magritte-hint-container___rGsD8_9-1-0{
491
491
  display:flex;
492
492
  flex-grow:1;
493
493
  align-items:center;
494
494
  min-width:0;
495
495
  }
496
- .magritte-hint___EFGK0_9-0-12{
496
+ .magritte-hint___EFGK0_9-1-0{
497
497
  --magritte-ui-text-color-override:var(--magritte-color-component-input-text-description-v23-2-2);
498
498
  color:var(--magritte-color-component-input-text-description-v23-2-2);
499
499
  overflow:hidden;
@@ -503,30 +503,30 @@
503
503
  z-index:1;
504
504
  padding-right:4px;
505
505
  }
506
- .magritte-content-container___s-0kX_9-0-12{
506
+ .magritte-content-container___s-0kX_9-1-0{
507
507
  position:relative;
508
508
  flex:1 0 auto;
509
509
  display:flex;
510
510
  padding:8px 12px 8px 0;
511
511
  max-width:100%;
512
512
  }
513
- .magritte-elevated___kPcsM_9-0-12 .magritte-content-container___s-0kX_9-0-12{
513
+ .magritte-elevated___kPcsM_9-1-0 .magritte-content-container___s-0kX_9-1-0{
514
514
  padding-top:18px;
515
515
  padding-bottom:0;
516
516
  }
517
- .magritte-small___iQL4F_9-0-12 .magritte-content-container___s-0kX_9-0-12{
517
+ .magritte-small___iQL4F_9-1-0 .magritte-content-container___s-0kX_9-1-0{
518
518
  padding-right:10px;
519
519
  }
520
- .magritte-counter___Bld3Q_9-0-12{
520
+ .magritte-counter___Bld3Q_9-1-0{
521
521
  padding:0 8px;
522
522
  z-index:1;
523
523
  }
524
- .magritte-value-container___6ReT7_9-0-12{
524
+ .magritte-value-container___6ReT7_9-1-0{
525
525
  position:relative;
526
526
  display:grid;
527
527
  width:100%;
528
528
  }
529
- .magritte-additional-value___9Kyap_9-0-12{
529
+ .magritte-additional-value___9Kyap_9-1-0{
530
530
  display:flex;
531
531
  align-items:center;
532
532
  grid-area:1 / 1;
@@ -536,6 +536,6 @@
536
536
  color:transparent;
537
537
  min-height:24px;
538
538
  }
539
- .magritte-elevated___kPcsM_9-0-12 .magritte-additional-value___9Kyap_9-0-12{
539
+ .magritte-elevated___kPcsM_9-1-0 .magritte-additional-value___9Kyap_9-1-0{
540
540
  min-height:22px;
541
541
  }