@hh.ru/magritte-ui-chips-trigger 2.0.5 → 2.0.6

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 (4) hide show
  1. package/ChipsTrigger.js +2 -2
  2. package/ChipsTrigger.js.map +1 -1
  3. package/index.css +142 -142
  4. package/package.json +6 -6
package/ChipsTrigger.js CHANGED
@@ -9,7 +9,7 @@ import { FormHelper } from '@hh.ru/magritte-ui-form-helper';
9
9
  import { ChevronDownOutlinedSize24 } from '@hh.ru/magritte-ui-icon/icon';
10
10
  import { useFocus } from '@hh.ru/magritte-ui-input/useFocus';
11
11
 
12
- var styles = {"root":"magritte-root___-zVdz_2-0-5","focused":"magritte-focused___0Uzyu_2-0-5","invalid":"magritte-invalid___tVzQV_2-0-5","disabled":"magritte-disabled___UeqcV_2-0-5","field":"magritte-field___rlEmn_2-0-5","focus-visible":"magritte-focus-visible___ifvAP_2-0-5","focusVisible":"magritte-focus-visible___ifvAP_2-0-5","large":"magritte-large___JIrIy_2-0-5","icon":"magritte-icon___fDMiz_2-0-5","medium":"magritte-medium___Xk-XB_2-0-5","scrollable-area":"magritte-scrollable-area___-xMF2_2-0-5","scrollableArea":"magritte-scrollable-area___-xMF2_2-0-5","chips-and-input":"magritte-chips-and-input___qg-Ba_2-0-5","chipsAndInput":"magritte-chips-and-input___qg-Ba_2-0-5","icon_expanded":"magritte-icon_expanded___RaOT-_2-0-5","iconExpanded":"magritte-icon_expanded___RaOT-_2-0-5"};
12
+ var styles = {"root":"magritte-root___-zVdz_2-0-6","focused":"magritte-focused___0Uzyu_2-0-6","invalid":"magritte-invalid___tVzQV_2-0-6","disabled":"magritte-disabled___UeqcV_2-0-6","field":"magritte-field___rlEmn_2-0-6","focus-visible":"magritte-focus-visible___ifvAP_2-0-6","focusVisible":"magritte-focus-visible___ifvAP_2-0-6","large":"magritte-large___JIrIy_2-0-6","icon":"magritte-icon___fDMiz_2-0-6","medium":"magritte-medium___Xk-XB_2-0-6","scrollable-area":"magritte-scrollable-area___-xMF2_2-0-6","scrollableArea":"magritte-scrollable-area___-xMF2_2-0-6","chips-and-input":"magritte-chips-and-input___qg-Ba_2-0-6","chipsAndInput":"magritte-chips-and-input___qg-Ba_2-0-6","icon_expanded":"magritte-icon_expanded___RaOT-_2-0-6","iconExpanded":"magritte-icon_expanded___RaOT-_2-0-6"};
13
13
 
14
14
  const focusOnLastChip = (event, chipsContainer, input) => {
15
15
  if (!chipsContainer || !input) {
@@ -126,7 +126,7 @@ const ChipsTrigger = forwardRef(({ size = 'large', placeholder, disabled, expand
126
126
  }, tabIndex: disabled ? -1 : 0, children: [jsx("div", { style: scrollableAreaStyle, className: styles.scrollableArea, children: jsxs("div", { ref: chipsContainerRef, className: styles.chipsAndInput, children: [state.chips.map((chip, index) => {
127
127
  return (jsx(CustomChip, { Element: "button", size: "small", disabled: disabled, onDelete: () => {
128
128
  deleteHandler(index);
129
- }, children: chip.label ?? chip.value }, `${chip}-${index}`));
129
+ }, children: chip.label ?? chip.value }, `${chip.value}-${index}`));
130
130
  }), jsx("input", { ref: inputRefCallback, className: styles.field, type: "text", disabled: disabled, value: state.value, placeholder: state.chips.length === 0 ? placeholder : '', onKeyDown: keyDownHandler, onFocus: focusHandler, onBlur: blurHandler, onChange: changeHandler })] }) }), jsx("div", { className: classnames(styles.icon, {
131
131
  [styles.iconExpanded]: expanded || externalExpanded,
132
132
  }), children: jsx(ChevronDownOutlinedSize24, {}) })] }), jsx(FormHelper, { description: description, errorMessage: errorMessage, disabled: disabled, invalid: invalid })] }));
package/ChipsTrigger.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ChipsTrigger.js","sources":["../src/ChipsTrigger.tsx"],"sourcesContent":["import {\n forwardRef,\n InputHTMLAttributes,\n useState,\n useCallback,\n KeyboardEventHandler,\n useRef,\n SyntheticEvent,\n useEffect,\n} from 'react';\nimport classnames from 'classnames';\n\nimport { findNextFocusableElement, keyboardKeys, keyboardMatch } from '@hh.ru/magritte-common-keyboard';\nimport { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';\nimport { CustomChip } from '@hh.ru/magritte-ui-chips';\nimport { ChipsTriggerProps } from '@hh.ru/magritte-ui-chips-trigger/types';\nimport { FormHelper } from '@hh.ru/magritte-ui-form-helper';\nimport { ChevronDownOutlinedSize24 } from '@hh.ru/magritte-ui-icon/icon';\nimport { useFocus } from '@hh.ru/magritte-ui-input/useFocus';\n\nimport styles from './chips-trigger.less';\n\nconst focusOnLastChip = (event: SyntheticEvent, chipsContainer: HTMLElement | null, input: HTMLElement | null) => {\n if (!chipsContainer || !input) {\n return;\n }\n const nextFocusableElement = findNextFocusableElement(chipsContainer, input, 'left', 'list');\n if (nextFocusableElement !== null) {\n event.preventDefault();\n nextFocusableElement.focus();\n }\n};\n\ntype State = {\n hadFocusWhenClicked: boolean;\n wasExpandedWhenClicked: boolean;\n};\n\nexport const ChipsTrigger = forwardRef<\n HTMLInputElement,\n ChipsTriggerProps & Omit<InputHTMLAttributes<HTMLInputElement>, keyof ChipsTriggerProps>\n>(\n (\n {\n size = 'large',\n placeholder,\n disabled,\n expanded: externalExpanded,\n toggleExpanded: toggleExternalExpanded,\n state,\n invalid,\n maxHeight,\n description,\n errorMessage,\n wrapperRef,\n onChange,\n onFocus,\n onBlur,\n onKeyDown,\n onChangeInput: onChangeInputExternal,\n allowArbitraryValues = true,\n },\n ref\n ) => {\n const [expanded, setExpanded] = useState(false);\n const [isFocusVisible, setFocusVisible] = useState(false);\n const stateRef = useRef<State>({ hadFocusWhenClicked: false, wasExpandedWhenClicked: false });\n\n const chipsRootRef = useRef<HTMLDivElement>(null);\n const chipsRootRefCallback = useMultipleRefs(wrapperRef, chipsRootRef);\n const chipsContainerRef = useRef<HTMLDivElement>(null);\n const inputRef = useRef<HTMLInputElement>(null);\n const inputRefCallback = useMultipleRefs(ref, inputRef);\n\n const onChangeInput = useCallback(\n (value: string) => {\n onChange({\n value,\n chips: state.chips,\n eventType: 'changeInputValue',\n });\n onChangeInputExternal?.(value);\n },\n [state.chips, onChange, onChangeInputExternal]\n );\n const { changeHandler, focusHandler, blurHandler, isFocused } = useFocus(onChangeInput, onFocus, onBlur);\n\n useEffect(() => {\n if (inputRef.current) {\n setFocusVisible(isFocused && inputRef.current.classList.contains('focus-visible'));\n }\n }, [isFocused]);\n\n const deleteHandler = useCallback(\n (index: number) => {\n state.chips.splice(index, 1);\n onChange({\n value: state.value,\n chips: [...state.chips],\n eventType: 'removeChipByCross',\n });\n // не теряем фокус с инпута\n inputRef.current?.focus();\n },\n [onChange, state.chips, state.value]\n );\n\n const keyDownHandler = useCallback<KeyboardEventHandler>(\n (event) => {\n // создаем новый чипс и затираем текстовый инпут\n if (allowArbitraryValues && keyboardMatch(event.nativeEvent, keyboardKeys.Enter)) {\n if (state.value.length === 0) {\n return;\n }\n onChange({\n value: '',\n chips: [...state.chips, { value: state.value }],\n eventType: 'addChipByEnter',\n });\n onChangeInputExternal?.('');\n }\n // удаляем последний созданный чипс\n if (state.value === '' && keyboardMatch(event.nativeEvent, keyboardKeys.Backspace)) {\n state.chips.pop();\n onChange({\n value: state.value,\n chips: [...state.chips],\n eventType: 'removeChipByBackspace',\n });\n }\n // пытаемся найти ближайший чипс для фокуса\n if (state.value === '' && keyboardMatch(event.nativeEvent, keyboardKeys.ArrowLeft)) {\n focusOnLastChip(event, chipsContainerRef.current, inputRef.current);\n }\n },\n [allowArbitraryValues, onChange, onChangeInputExternal, state]\n );\n\n // при выставлении высоты учитваем падинги\n // иначе высота будет больше значения свойства\n const scrollableAreaStyle = maxHeight\n ? { maxHeight: `${maxHeight - (size === 'medium' ? 16 : 24)}px` }\n : undefined;\n\n return (\n <>\n <div\n ref={chipsRootRefCallback}\n className={classnames(styles.root, styles[size], {\n [styles.focused]: isFocused,\n [styles.focusVisible]: isFocusVisible,\n [styles.disabled]: !!disabled,\n [styles.invalid]: !!invalid,\n })}\n onFocus={() => {\n if (disabled) {\n return;\n }\n if (!inputRef.current) {\n return;\n }\n setExpanded(true);\n // добавляем .focus() еще и тут\n // чтобы не сбрасывать фокус во время клика по chip\n // или по клику на враппер\n if (document.activeElement === chipsRootRef.current) {\n inputRef.current.focus();\n }\n }}\n onBlur={(event) => {\n stateRef.current.hadFocusWhenClicked &&=\n event.relatedTarget === chipsRootRef.current || event.relatedTarget === inputRef.current;\n setExpanded(false);\n }}\n onKeyDown={onKeyDown}\n onMouseDown={() => {\n // при повторном клике по инпуту в фокусе нужно закрыть дроп\n // при этом клик может прийтись на обертку, из-за чего инпут поймает blur и повторный фокус\n // что усложняет проверку того, что инпут уже был в фокусе в момент клика\n // поэтому в цепочке mouseDown -> blur -> focus -> click храним флаг, что фокус не вышел за пределы компонента\n stateRef.current.hadFocusWhenClicked = document.activeElement === inputRef.current;\n stateRef.current.wasExpandedWhenClicked = !!externalExpanded;\n }}\n onClick={() => {\n if (\n stateRef.current.hadFocusWhenClicked &&\n stateRef.current.wasExpandedWhenClicked === externalExpanded\n ) {\n toggleExternalExpanded?.();\n }\n stateRef.current.hadFocusWhenClicked = false;\n stateRef.current.wasExpandedWhenClicked = false;\n }}\n tabIndex={disabled ? -1 : 0}\n >\n <div style={scrollableAreaStyle} className={styles.scrollableArea}>\n <div ref={chipsContainerRef} className={styles.chipsAndInput}>\n {state.chips.map((chip, index) => {\n return (\n <CustomChip\n Element=\"button\"\n key={`${chip}-${index}`}\n size=\"small\"\n disabled={disabled}\n onDelete={() => {\n deleteHandler(index);\n }}\n >\n {chip.label ?? chip.value}\n </CustomChip>\n );\n })}\n <input\n ref={inputRefCallback}\n className={styles.field}\n type=\"text\"\n disabled={disabled}\n value={state.value}\n placeholder={state.chips.length === 0 ? placeholder : ''}\n onKeyDown={keyDownHandler}\n onFocus={focusHandler}\n onBlur={blurHandler}\n onChange={changeHandler}\n />\n </div>\n </div>\n <div\n className={classnames(styles.icon, {\n [styles.iconExpanded]: expanded || externalExpanded,\n })}\n >\n <ChevronDownOutlinedSize24 />\n </div>\n </div>\n <FormHelper\n description={description}\n errorMessage={errorMessage}\n disabled={disabled}\n invalid={invalid}\n />\n </>\n );\n }\n);\n\nChipsTrigger.displayName = 'ChipsTrigger';\n"],"names":["_jsxs","_Fragment","_jsx"],"mappings":"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"}
1
+ {"version":3,"file":"ChipsTrigger.js","sources":["../src/ChipsTrigger.tsx"],"sourcesContent":["import {\n forwardRef,\n InputHTMLAttributes,\n useState,\n useCallback,\n KeyboardEventHandler,\n useRef,\n SyntheticEvent,\n useEffect,\n} from 'react';\nimport classnames from 'classnames';\n\nimport { findNextFocusableElement, keyboardKeys, keyboardMatch } from '@hh.ru/magritte-common-keyboard';\nimport { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';\nimport { CustomChip } from '@hh.ru/magritte-ui-chips';\nimport { ChipsTriggerProps } from '@hh.ru/magritte-ui-chips-trigger/types';\nimport { FormHelper } from '@hh.ru/magritte-ui-form-helper';\nimport { ChevronDownOutlinedSize24 } from '@hh.ru/magritte-ui-icon/icon';\nimport { useFocus } from '@hh.ru/magritte-ui-input/useFocus';\n\nimport styles from './chips-trigger.less';\n\nconst focusOnLastChip = (event: SyntheticEvent, chipsContainer: HTMLElement | null, input: HTMLElement | null) => {\n if (!chipsContainer || !input) {\n return;\n }\n const nextFocusableElement = findNextFocusableElement(chipsContainer, input, 'left', 'list');\n if (nextFocusableElement !== null) {\n event.preventDefault();\n nextFocusableElement.focus();\n }\n};\n\ntype State = {\n hadFocusWhenClicked: boolean;\n wasExpandedWhenClicked: boolean;\n};\n\nexport const ChipsTrigger = forwardRef<\n HTMLInputElement,\n ChipsTriggerProps & Omit<InputHTMLAttributes<HTMLInputElement>, keyof ChipsTriggerProps>\n>(\n (\n {\n size = 'large',\n placeholder,\n disabled,\n expanded: externalExpanded,\n toggleExpanded: toggleExternalExpanded,\n state,\n invalid,\n maxHeight,\n description,\n errorMessage,\n wrapperRef,\n onChange,\n onFocus,\n onBlur,\n onKeyDown,\n onChangeInput: onChangeInputExternal,\n allowArbitraryValues = true,\n },\n ref\n ) => {\n const [expanded, setExpanded] = useState(false);\n const [isFocusVisible, setFocusVisible] = useState(false);\n const stateRef = useRef<State>({ hadFocusWhenClicked: false, wasExpandedWhenClicked: false });\n\n const chipsRootRef = useRef<HTMLDivElement>(null);\n const chipsRootRefCallback = useMultipleRefs(wrapperRef, chipsRootRef);\n const chipsContainerRef = useRef<HTMLDivElement>(null);\n const inputRef = useRef<HTMLInputElement>(null);\n const inputRefCallback = useMultipleRefs(ref, inputRef);\n\n const onChangeInput = useCallback(\n (value: string) => {\n onChange({\n value,\n chips: state.chips,\n eventType: 'changeInputValue',\n });\n onChangeInputExternal?.(value);\n },\n [state.chips, onChange, onChangeInputExternal]\n );\n const { changeHandler, focusHandler, blurHandler, isFocused } = useFocus(onChangeInput, onFocus, onBlur);\n\n useEffect(() => {\n if (inputRef.current) {\n setFocusVisible(isFocused && inputRef.current.classList.contains('focus-visible'));\n }\n }, [isFocused]);\n\n const deleteHandler = useCallback(\n (index: number) => {\n state.chips.splice(index, 1);\n onChange({\n value: state.value,\n chips: [...state.chips],\n eventType: 'removeChipByCross',\n });\n // не теряем фокус с инпута\n inputRef.current?.focus();\n },\n [onChange, state.chips, state.value]\n );\n\n const keyDownHandler = useCallback<KeyboardEventHandler>(\n (event) => {\n // создаем новый чипс и затираем текстовый инпут\n if (allowArbitraryValues && keyboardMatch(event.nativeEvent, keyboardKeys.Enter)) {\n if (state.value.length === 0) {\n return;\n }\n onChange({\n value: '',\n chips: [...state.chips, { value: state.value }],\n eventType: 'addChipByEnter',\n });\n onChangeInputExternal?.('');\n }\n // удаляем последний созданный чипс\n if (state.value === '' && keyboardMatch(event.nativeEvent, keyboardKeys.Backspace)) {\n state.chips.pop();\n onChange({\n value: state.value,\n chips: [...state.chips],\n eventType: 'removeChipByBackspace',\n });\n }\n // пытаемся найти ближайший чипс для фокуса\n if (state.value === '' && keyboardMatch(event.nativeEvent, keyboardKeys.ArrowLeft)) {\n focusOnLastChip(event, chipsContainerRef.current, inputRef.current);\n }\n },\n [allowArbitraryValues, onChange, onChangeInputExternal, state]\n );\n\n // при выставлении высоты учитваем падинги\n // иначе высота будет больше значения свойства\n const scrollableAreaStyle = maxHeight\n ? { maxHeight: `${maxHeight - (size === 'medium' ? 16 : 24)}px` }\n : undefined;\n\n return (\n <>\n <div\n ref={chipsRootRefCallback}\n className={classnames(styles.root, styles[size], {\n [styles.focused]: isFocused,\n [styles.focusVisible]: isFocusVisible,\n [styles.disabled]: !!disabled,\n [styles.invalid]: !!invalid,\n })}\n onFocus={() => {\n if (disabled) {\n return;\n }\n if (!inputRef.current) {\n return;\n }\n setExpanded(true);\n // добавляем .focus() еще и тут\n // чтобы не сбрасывать фокус во время клика по chip\n // или по клику на враппер\n if (document.activeElement === chipsRootRef.current) {\n inputRef.current.focus();\n }\n }}\n onBlur={(event) => {\n stateRef.current.hadFocusWhenClicked &&=\n event.relatedTarget === chipsRootRef.current || event.relatedTarget === inputRef.current;\n setExpanded(false);\n }}\n onKeyDown={onKeyDown}\n onMouseDown={() => {\n // при повторном клике по инпуту в фокусе нужно закрыть дроп\n // при этом клик может прийтись на обертку, из-за чего инпут поймает blur и повторный фокус\n // что усложняет проверку того, что инпут уже был в фокусе в момент клика\n // поэтому в цепочке mouseDown -> blur -> focus -> click храним флаг, что фокус не вышел за пределы компонента\n stateRef.current.hadFocusWhenClicked = document.activeElement === inputRef.current;\n stateRef.current.wasExpandedWhenClicked = !!externalExpanded;\n }}\n onClick={() => {\n if (\n stateRef.current.hadFocusWhenClicked &&\n stateRef.current.wasExpandedWhenClicked === externalExpanded\n ) {\n toggleExternalExpanded?.();\n }\n stateRef.current.hadFocusWhenClicked = false;\n stateRef.current.wasExpandedWhenClicked = false;\n }}\n tabIndex={disabled ? -1 : 0}\n >\n <div style={scrollableAreaStyle} className={styles.scrollableArea}>\n <div ref={chipsContainerRef} className={styles.chipsAndInput}>\n {state.chips.map((chip, index) => {\n return (\n <CustomChip\n Element=\"button\"\n key={`${chip.value}-${index}`}\n size=\"small\"\n disabled={disabled}\n onDelete={() => {\n deleteHandler(index);\n }}\n >\n {chip.label ?? chip.value}\n </CustomChip>\n );\n })}\n <input\n ref={inputRefCallback}\n className={styles.field}\n type=\"text\"\n disabled={disabled}\n value={state.value}\n placeholder={state.chips.length === 0 ? placeholder : ''}\n onKeyDown={keyDownHandler}\n onFocus={focusHandler}\n onBlur={blurHandler}\n onChange={changeHandler}\n />\n </div>\n </div>\n <div\n className={classnames(styles.icon, {\n [styles.iconExpanded]: expanded || externalExpanded,\n })}\n >\n <ChevronDownOutlinedSize24 />\n </div>\n </div>\n <FormHelper\n description={description}\n errorMessage={errorMessage}\n disabled={disabled}\n invalid={invalid}\n />\n </>\n );\n }\n);\n\nChipsTrigger.displayName = 'ChipsTrigger';\n"],"names":["_jsxs","_Fragment","_jsx"],"mappings":"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"}
package/index.css CHANGED
@@ -1,73 +1,73 @@
1
1
  :root{
2
- --magritte-color-component-input-stroke-state-field-hovered-v19-1-1:#CCD5DF;
3
- --magritte-color-component-input-stroke-state-field-focused-v19-1-1:#0070ff;
4
- --magritte-color-component-input-stroke-state-accent-focused-accessible-v19-1-1:#0070ff7a;
5
- --magritte-color-component-input-stroke-state-field-invalid-v19-1-1:#ff4d3a;
6
- --magritte-color-component-input-stroke-state-negative-focused-accessible-v19-1-1:#ff4d3a7a;
7
- --magritte-color-component-input-stroke-state-field-disabled-v19-1-1:#EEF1F7;
8
- --magritte-color-component-input-background-field-v19-1-1:#ffffff;
9
- --magritte-color-component-input-background-state-field-hovered-v19-1-1:#ffffff;
10
- --magritte-color-component-input-background-state-field-focused-v19-1-1:#ffffff;
11
- --magritte-color-component-input-background-state-field-invalid-v19-1-1:#ffffff;
12
- --magritte-color-component-input-background-state-field-disabled-v19-1-1:#F4F6FB;
13
- --magritte-color-component-input-stroke-field-v19-1-1:#DCE3EB;
14
- --magritte-color-component-input-text-state-placeholder-disabled-v19-1-1:#AABBCA;
15
- --magritte-color-component-input-text-state-placeholder-hovered-v19-1-1:#768694;
16
- --magritte-color-component-input-text-state-placeholder-focused-v19-1-1:#AABBCA;
17
- --magritte-color-component-input-text-state-placeholder-invalid-v19-1-1:#AABBCA;
18
- --magritte-color-component-input-icon-chevron-v19-1-1:#AABBCA;
19
- --magritte-color-component-input-icon-state-chevron-focused-v19-1-1:#000000;
20
- --magritte-color-component-input-icon-state-chevron-hovered-v19-1-1:#6a7885;
21
- --magritte-color-component-input-icon-state-chevron-disabled-v19-1-1:#AABBCA;
22
- --magritte-color-component-input-icon-state-chevron-invalid-v19-1-1:#AABBCA;
23
- --magritte-color-component-input-text-placeholder-v19-1-1:#AABBCA;
24
- --magritte-color-component-input-chips-background-state-neutral-disable-v19-1-1:#DCE3EB;
25
- --magritte-color-component-input-chips-text-state-neutral-disable-v19-1-1:#96aabb;
2
+ --magritte-color-component-input-stroke-state-field-hovered-v19-1-2:#CCD5DF;
3
+ --magritte-color-component-input-stroke-state-field-focused-v19-1-2:#0070ff;
4
+ --magritte-color-component-input-stroke-state-accent-focused-accessible-v19-1-2:#0070ff7a;
5
+ --magritte-color-component-input-stroke-state-field-invalid-v19-1-2:#ff4d3a;
6
+ --magritte-color-component-input-stroke-state-negative-focused-accessible-v19-1-2:#ff4d3a7a;
7
+ --magritte-color-component-input-stroke-state-field-disabled-v19-1-2:#EEF1F7;
8
+ --magritte-color-component-input-background-field-v19-1-2:#ffffff;
9
+ --magritte-color-component-input-background-state-field-hovered-v19-1-2:#ffffff;
10
+ --magritte-color-component-input-background-state-field-focused-v19-1-2:#ffffff;
11
+ --magritte-color-component-input-background-state-field-invalid-v19-1-2:#ffffff;
12
+ --magritte-color-component-input-background-state-field-disabled-v19-1-2:#F4F6FB;
13
+ --magritte-color-component-input-stroke-field-v19-1-2:#DCE3EB;
14
+ --magritte-color-component-input-text-state-placeholder-disabled-v19-1-2:#AABBCA;
15
+ --magritte-color-component-input-text-state-placeholder-hovered-v19-1-2:#768694;
16
+ --magritte-color-component-input-text-state-placeholder-focused-v19-1-2:#AABBCA;
17
+ --magritte-color-component-input-text-state-placeholder-invalid-v19-1-2:#AABBCA;
18
+ --magritte-color-component-input-icon-chevron-v19-1-2:#AABBCA;
19
+ --magritte-color-component-input-icon-state-chevron-focused-v19-1-2:#000000;
20
+ --magritte-color-component-input-icon-state-chevron-hovered-v19-1-2:#6a7885;
21
+ --magritte-color-component-input-icon-state-chevron-disabled-v19-1-2:#AABBCA;
22
+ --magritte-color-component-input-icon-state-chevron-invalid-v19-1-2:#AABBCA;
23
+ --magritte-color-component-input-text-placeholder-v19-1-2:#AABBCA;
24
+ --magritte-color-component-input-chips-background-state-neutral-disable-v19-1-2:#DCE3EB;
25
+ --magritte-color-component-input-chips-text-state-neutral-disable-v19-1-2:#96aabb;
26
26
  }
27
27
  :root{
28
- --magritte-typography-label-2-regular-font-family-v19-1-1:"Inter";
29
- --magritte-typography-label-2-regular-font-weight-v19-1-1:400;
30
- --magritte-typography-label-2-regular-line-height-v19-1-1:22px;
31
- --magritte-typography-label-2-regular-font-size-v19-1-1:16px;
32
- --magritte-typography-label-2-regular-letter-spacing-v19-1-1:0em;
33
- --magritte-typography-label-2-regular-text-indent-v19-1-1:0px;
34
- --magritte-typography-label-2-regular-text-transform-v19-1-1:none;
35
- --magritte-typography-label-2-regular-text-decoration-v19-1-1:none;
36
- --magritte-semantic-animation-ease-in-out-100-timing-function-v19-1-1:cubic-bezier(0.25, 0.1, 0.25, 1);
37
- --magritte-semantic-animation-ease-in-out-100-duration-v19-1-1:100ms;
38
- --magritte-static-space-100-v19-1-1:4px;
39
- --magritte-static-space-200-v19-1-1:8px;
40
- --magritte-static-space-300-v19-1-1:12px;
41
- --magritte-static-space-400-v19-1-1:16px;
42
- --magritte-core-border-radius-3-x-v19-1-1:12px;
28
+ --magritte-typography-label-2-regular-font-family-v19-1-2:"Inter";
29
+ --magritte-typography-label-2-regular-font-weight-v19-1-2:400;
30
+ --magritte-typography-label-2-regular-line-height-v19-1-2:22px;
31
+ --magritte-typography-label-2-regular-font-size-v19-1-2:16px;
32
+ --magritte-typography-label-2-regular-letter-spacing-v19-1-2:0em;
33
+ --magritte-typography-label-2-regular-text-indent-v19-1-2:0px;
34
+ --magritte-typography-label-2-regular-text-transform-v19-1-2:none;
35
+ --magritte-typography-label-2-regular-text-decoration-v19-1-2:none;
36
+ --magritte-semantic-animation-ease-in-out-100-timing-function-v19-1-2:cubic-bezier(0.25, 0.1, 0.25, 1);
37
+ --magritte-semantic-animation-ease-in-out-100-duration-v19-1-2:100ms;
38
+ --magritte-static-space-100-v19-1-2:4px;
39
+ --magritte-static-space-200-v19-1-2:8px;
40
+ --magritte-static-space-300-v19-1-2:12px;
41
+ --magritte-static-space-400-v19-1-2:16px;
42
+ --magritte-core-border-radius-3-x-v19-1-2:12px;
43
43
  }
44
44
  .magritte-night-theme{
45
- --magritte-color-component-input-stroke-state-field-hovered-v19-1-1:#3B3B3B;
46
- --magritte-color-component-input-stroke-state-field-focused-v19-1-1:#0070ff;
47
- --magritte-color-component-input-stroke-state-accent-focused-accessible-v19-1-1:#0070ff7a;
48
- --magritte-color-component-input-stroke-state-field-invalid-v19-1-1:#ff4d3a;
49
- --magritte-color-component-input-stroke-state-negative-focused-accessible-v19-1-1:#ff4d3a7a;
50
- --magritte-color-component-input-stroke-state-field-disabled-v19-1-1:#111;
51
- --magritte-color-component-input-background-field-v19-1-1:#1B1B1B;
52
- --magritte-color-component-input-background-state-field-hovered-v19-1-1:#1B1B1B;
53
- --magritte-color-component-input-background-state-field-focused-v19-1-1:#1B1B1B;
54
- --magritte-color-component-input-background-state-field-invalid-v19-1-1:#1B1B1B;
55
- --magritte-color-component-input-background-state-field-disabled-v19-1-1:#111;
56
- --magritte-color-component-input-stroke-field-v19-1-1:#303030;
57
- --magritte-color-component-input-text-placeholder-v19-1-1:#535353;
58
- --magritte-color-component-input-text-state-placeholder-disabled-v19-1-1:#474747;
59
- --magritte-color-component-input-text-state-placeholder-hovered-v19-1-1:#5E5E5E;
60
- --magritte-color-component-input-text-state-placeholder-focused-v19-1-1:#535353;
61
- --magritte-color-component-input-text-state-placeholder-invalid-v19-1-1:#535353;
62
- --magritte-color-component-input-icon-state-chevron-disabled-v19-1-1:#474747;
63
- --magritte-color-component-input-icon-state-chevron-hovered-v19-1-1:#848484;
64
- --magritte-color-component-input-icon-state-chevron-focused-v19-1-1:#ffffff;
65
- --magritte-color-component-input-icon-state-chevron-invalid-v19-1-1:#474747;
66
- --magritte-color-component-input-icon-chevron-v19-1-1:#5E5E5E;
67
- --magritte-color-component-input-chips-background-state-neutral-disable-v19-1-1:#1B1B1B;
68
- --magritte-color-component-input-chips-text-state-neutral-disable-v19-1-1:#474747;
69
- }
70
- .magritte-root___-zVdz_2-0-5{
45
+ --magritte-color-component-input-stroke-state-field-hovered-v19-1-2:#3B3B3B;
46
+ --magritte-color-component-input-stroke-state-field-focused-v19-1-2:#0070ff;
47
+ --magritte-color-component-input-stroke-state-accent-focused-accessible-v19-1-2:#0070ff7a;
48
+ --magritte-color-component-input-stroke-state-field-invalid-v19-1-2:#ff4d3a;
49
+ --magritte-color-component-input-stroke-state-negative-focused-accessible-v19-1-2:#ff4d3a7a;
50
+ --magritte-color-component-input-stroke-state-field-disabled-v19-1-2:#111;
51
+ --magritte-color-component-input-background-field-v19-1-2:#1B1B1B;
52
+ --magritte-color-component-input-background-state-field-hovered-v19-1-2:#1B1B1B;
53
+ --magritte-color-component-input-background-state-field-focused-v19-1-2:#1B1B1B;
54
+ --magritte-color-component-input-background-state-field-invalid-v19-1-2:#1B1B1B;
55
+ --magritte-color-component-input-background-state-field-disabled-v19-1-2:#111;
56
+ --magritte-color-component-input-stroke-field-v19-1-2:#303030;
57
+ --magritte-color-component-input-text-placeholder-v19-1-2:#535353;
58
+ --magritte-color-component-input-text-state-placeholder-disabled-v19-1-2:#474747;
59
+ --magritte-color-component-input-text-state-placeholder-hovered-v19-1-2:#5E5E5E;
60
+ --magritte-color-component-input-text-state-placeholder-focused-v19-1-2:#535353;
61
+ --magritte-color-component-input-text-state-placeholder-invalid-v19-1-2:#535353;
62
+ --magritte-color-component-input-icon-state-chevron-disabled-v19-1-2:#474747;
63
+ --magritte-color-component-input-icon-state-chevron-hovered-v19-1-2:#848484;
64
+ --magritte-color-component-input-icon-state-chevron-focused-v19-1-2:#ffffff;
65
+ --magritte-color-component-input-icon-state-chevron-invalid-v19-1-2:#474747;
66
+ --magritte-color-component-input-icon-chevron-v19-1-2:#5E5E5E;
67
+ --magritte-color-component-input-chips-background-state-neutral-disable-v19-1-2:#1B1B1B;
68
+ --magritte-color-component-input-chips-text-state-neutral-disable-v19-1-2:#474747;
69
+ }
70
+ .magritte-root___-zVdz_2-0-6{
71
71
  display:inline-flex;
72
72
  position:relative;
73
73
  width:100%;
@@ -76,130 +76,130 @@
76
76
  white-space:nowrap;
77
77
  appearance:none;
78
78
  overflow-y:auto;
79
- background-color:var(--magritte-color-component-input-background-field-v19-1-1);
80
- box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-field-v19-1-1);
81
- border-radius:var(--magritte-core-border-radius-3-x-v19-1-1);
82
- --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-chevron-v19-1-1);
79
+ background-color:var(--magritte-color-component-input-background-field-v19-1-2);
80
+ box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-field-v19-1-2);
81
+ border-radius:var(--magritte-core-border-radius-3-x-v19-1-2);
82
+ --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-chevron-v19-1-2);
83
83
  }
84
84
  @media (min-width: 1020px){
85
- body.magritte-old-layout .magritte-root___-zVdz_2-0-5:not(.magritte-focused___0Uzyu_2-0-5):not(.magritte-invalid___tVzQV_2-0-5):not(.magritte-disabled___UeqcV_2-0-5):hover{
86
- background-color:var(--magritte-color-component-input-background-state-field-hovered-v19-1-1);
87
- box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-hovered-v19-1-1);
88
- --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-chevron-hovered-v19-1-1);
85
+ body.magritte-old-layout .magritte-root___-zVdz_2-0-6:not(.magritte-focused___0Uzyu_2-0-6):not(.magritte-invalid___tVzQV_2-0-6):not(.magritte-disabled___UeqcV_2-0-6):hover{
86
+ background-color:var(--magritte-color-component-input-background-state-field-hovered-v19-1-2);
87
+ box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-hovered-v19-1-2);
88
+ --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-chevron-hovered-v19-1-2);
89
89
  }
90
- body.magritte-old-layout .magritte-root___-zVdz_2-0-5:not(.magritte-focused___0Uzyu_2-0-5):not(.magritte-invalid___tVzQV_2-0-5):not(.magritte-disabled___UeqcV_2-0-5):hover .magritte-field___rlEmn_2-0-5::placeholder{
91
- color:var(--magritte-color-component-input-text-state-placeholder-hovered-v19-1-1);
90
+ body.magritte-old-layout .magritte-root___-zVdz_2-0-6:not(.magritte-focused___0Uzyu_2-0-6):not(.magritte-invalid___tVzQV_2-0-6):not(.magritte-disabled___UeqcV_2-0-6):hover .magritte-field___rlEmn_2-0-6::placeholder{
91
+ color:var(--magritte-color-component-input-text-state-placeholder-hovered-v19-1-2);
92
92
  }
93
93
  }
94
94
  @media (min-width: 1024px){
95
- body:not(.magritte-old-layout) .magritte-root___-zVdz_2-0-5:not(.magritte-focused___0Uzyu_2-0-5):not(.magritte-invalid___tVzQV_2-0-5):not(.magritte-disabled___UeqcV_2-0-5):hover{
96
- background-color:var(--magritte-color-component-input-background-state-field-hovered-v19-1-1);
97
- box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-hovered-v19-1-1);
98
- --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-chevron-hovered-v19-1-1);
95
+ body:not(.magritte-old-layout) .magritte-root___-zVdz_2-0-6:not(.magritte-focused___0Uzyu_2-0-6):not(.magritte-invalid___tVzQV_2-0-6):not(.magritte-disabled___UeqcV_2-0-6):hover{
96
+ background-color:var(--magritte-color-component-input-background-state-field-hovered-v19-1-2);
97
+ box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-hovered-v19-1-2);
98
+ --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-chevron-hovered-v19-1-2);
99
99
  }
100
- body:not(.magritte-old-layout) .magritte-root___-zVdz_2-0-5:not(.magritte-focused___0Uzyu_2-0-5):not(.magritte-invalid___tVzQV_2-0-5):not(.magritte-disabled___UeqcV_2-0-5):hover .magritte-field___rlEmn_2-0-5::placeholder{
101
- color:var(--magritte-color-component-input-text-state-placeholder-hovered-v19-1-1);
100
+ body:not(.magritte-old-layout) .magritte-root___-zVdz_2-0-6:not(.magritte-focused___0Uzyu_2-0-6):not(.magritte-invalid___tVzQV_2-0-6):not(.magritte-disabled___UeqcV_2-0-6):hover .magritte-field___rlEmn_2-0-6::placeholder{
101
+ color:var(--magritte-color-component-input-text-state-placeholder-hovered-v19-1-2);
102
102
  }
103
103
  }
104
- .magritte-root___-zVdz_2-0-5:not(.magritte-disabled___UeqcV_2-0-5){
104
+ .magritte-root___-zVdz_2-0-6:not(.magritte-disabled___UeqcV_2-0-6){
105
105
  cursor:text;
106
106
  }
107
- .magritte-root___-zVdz_2-0-5.magritte-focused___0Uzyu_2-0-5{
108
- background-color:var(--magritte-color-component-input-background-state-field-focused-v19-1-1);
109
- box-shadow:inset 0 0 0 2px var(--magritte-color-component-input-stroke-state-field-focused-v19-1-1);
110
- --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-chevron-focused-v19-1-1);
107
+ .magritte-root___-zVdz_2-0-6.magritte-focused___0Uzyu_2-0-6{
108
+ background-color:var(--magritte-color-component-input-background-state-field-focused-v19-1-2);
109
+ box-shadow:inset 0 0 0 2px var(--magritte-color-component-input-stroke-state-field-focused-v19-1-2);
110
+ --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-chevron-focused-v19-1-2);
111
111
  }
112
- .magritte-root___-zVdz_2-0-5.magritte-focused___0Uzyu_2-0-5 .magritte-field___rlEmn_2-0-5::placeholder{
113
- color:var(--magritte-color-component-input-text-state-placeholder-focused-v19-1-1);
112
+ .magritte-root___-zVdz_2-0-6.magritte-focused___0Uzyu_2-0-6 .magritte-field___rlEmn_2-0-6::placeholder{
113
+ color:var(--magritte-color-component-input-text-state-placeholder-focused-v19-1-2);
114
114
  }
115
- .magritte-root___-zVdz_2-0-5.magritte-invalid___tVzQV_2-0-5{
116
- background-color:var(--magritte-color-component-input-background-state-field-invalid-v19-1-1);
117
- box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-invalid-v19-1-1);
118
- --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-chevron-invalid-v19-1-1);
115
+ .magritte-root___-zVdz_2-0-6.magritte-invalid___tVzQV_2-0-6{
116
+ background-color:var(--magritte-color-component-input-background-state-field-invalid-v19-1-2);
117
+ box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-invalid-v19-1-2);
118
+ --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-chevron-invalid-v19-1-2);
119
119
  }
120
- .magritte-root___-zVdz_2-0-5.magritte-invalid___tVzQV_2-0-5 .magritte-field___rlEmn_2-0-5::placeholder{
121
- color:var(--magritte-color-component-input-text-state-placeholder-invalid-v19-1-1);
120
+ .magritte-root___-zVdz_2-0-6.magritte-invalid___tVzQV_2-0-6 .magritte-field___rlEmn_2-0-6::placeholder{
121
+ color:var(--magritte-color-component-input-text-state-placeholder-invalid-v19-1-2);
122
122
  }
123
- .magritte-root___-zVdz_2-0-5.magritte-disabled___UeqcV_2-0-5{
124
- background-color:var(--magritte-color-component-input-background-state-field-disabled-v19-1-1);
125
- box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-disabled-v19-1-1);
126
- --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-chevron-disabled-v19-1-1);
127
- --magritte-ui-chip-text-color-override:var(--magritte-color-component-input-chips-text-state-neutral-disable-v19-1-1);
128
- --magritte-ui-chip-background-color-override:var(--magritte-color-component-input-chips-background-state-neutral-disable-v19-1-1);
123
+ .magritte-root___-zVdz_2-0-6.magritte-disabled___UeqcV_2-0-6{
124
+ background-color:var(--magritte-color-component-input-background-state-field-disabled-v19-1-2);
125
+ box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-disabled-v19-1-2);
126
+ --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-chevron-disabled-v19-1-2);
127
+ --magritte-ui-chip-text-color-override:var(--magritte-color-component-input-chips-text-state-neutral-disable-v19-1-2);
128
+ --magritte-ui-chip-background-color-override:var(--magritte-color-component-input-chips-background-state-neutral-disable-v19-1-2);
129
129
  }
130
- .magritte-root___-zVdz_2-0-5.magritte-disabled___UeqcV_2-0-5 .magritte-field___rlEmn_2-0-5::placeholder{
131
- color:var(--magritte-color-component-input-text-state-placeholder-disabled-v19-1-1);
130
+ .magritte-root___-zVdz_2-0-6.magritte-disabled___UeqcV_2-0-6 .magritte-field___rlEmn_2-0-6::placeholder{
131
+ color:var(--magritte-color-component-input-text-state-placeholder-disabled-v19-1-2);
132
132
  }
133
- .magritte-root___-zVdz_2-0-5.magritte-focus-visible___ifvAP_2-0-5{
134
- outline:var(--magritte-color-component-input-stroke-state-accent-focused-accessible-v19-1-1) solid 4px;
133
+ .magritte-root___-zVdz_2-0-6.magritte-focus-visible___ifvAP_2-0-6{
134
+ outline:var(--magritte-color-component-input-stroke-state-accent-focused-accessible-v19-1-2) solid 4px;
135
135
  }
136
- .magritte-root___-zVdz_2-0-5.magritte-focus-visible___ifvAP_2-0-5.magritte-invalid___tVzQV_2-0-5{
137
- outline-color:var(--magritte-color-component-input-stroke-state-negative-focused-accessible-v19-1-1);
136
+ .magritte-root___-zVdz_2-0-6.magritte-focus-visible___ifvAP_2-0-6.magritte-invalid___tVzQV_2-0-6{
137
+ outline-color:var(--magritte-color-component-input-stroke-state-negative-focused-accessible-v19-1-2);
138
138
  }
139
- .magritte-large___JIrIy_2-0-5{
140
- padding:var(--magritte-static-space-300-v19-1-1);
139
+ .magritte-large___JIrIy_2-0-6{
140
+ padding:var(--magritte-static-space-300-v19-1-2);
141
141
  }
142
- .magritte-large___JIrIy_2-0-5 .magritte-field___rlEmn_2-0-5{
143
- padding-left:var(--magritte-static-space-100-v19-1-1);
142
+ .magritte-large___JIrIy_2-0-6 .magritte-field___rlEmn_2-0-6{
143
+ padding-left:var(--magritte-static-space-100-v19-1-2);
144
144
  }
145
- .magritte-large___JIrIy_2-0-5 .magritte-icon___fDMiz_2-0-5{
146
- top:var(--magritte-static-space-300-v19-1-1);
147
- right:var(--magritte-static-space-400-v19-1-1);
145
+ .magritte-large___JIrIy_2-0-6 .magritte-icon___fDMiz_2-0-6{
146
+ top:var(--magritte-static-space-300-v19-1-2);
147
+ right:var(--magritte-static-space-400-v19-1-2);
148
148
  }
149
- .magritte-medium___Xk-XB_2-0-5{
150
- padding:var(--magritte-static-space-200-v19-1-1);
149
+ .magritte-medium___Xk-XB_2-0-6{
150
+ padding:var(--magritte-static-space-200-v19-1-2);
151
151
  }
152
- .magritte-medium___Xk-XB_2-0-5 .magritte-field___rlEmn_2-0-5{
153
- padding-left:var(--magritte-static-space-100-v19-1-1);
152
+ .magritte-medium___Xk-XB_2-0-6 .magritte-field___rlEmn_2-0-6{
153
+ padding-left:var(--magritte-static-space-100-v19-1-2);
154
154
  }
155
- .magritte-medium___Xk-XB_2-0-5 .magritte-icon___fDMiz_2-0-5{
156
- top:var(--magritte-static-space-200-v19-1-1);
157
- right:var(--magritte-static-space-300-v19-1-1);
155
+ .magritte-medium___Xk-XB_2-0-6 .magritte-icon___fDMiz_2-0-6{
156
+ top:var(--magritte-static-space-200-v19-1-2);
157
+ right:var(--magritte-static-space-300-v19-1-2);
158
158
  }
159
- .magritte-scrollable-area___-xMF2_2-0-5{
159
+ .magritte-scrollable-area___-xMF2_2-0-6{
160
160
  display:flex;
161
161
  align-items:flex-start;
162
162
  overflow-y:auto;
163
163
  width:100%;
164
164
  padding-right:24px;
165
165
  }
166
- .magritte-chips-and-input___qg-Ba_2-0-5{
166
+ .magritte-chips-and-input___qg-Ba_2-0-6{
167
167
  display:flex;
168
168
  gap:6px;
169
169
  flex-wrap:wrap;
170
170
  align-items:center;
171
171
  width:100%;
172
- margin-right:var(--magritte-static-space-300-v19-1-1);
172
+ margin-right:var(--magritte-static-space-300-v19-1-2);
173
173
  }
174
- .magritte-field___rlEmn_2-0-5{
174
+ .magritte-field___rlEmn_2-0-6{
175
175
  border:0;
176
176
  background:none;
177
177
  flex-grow:1;
178
178
  height:32px;
179
179
  width:50px;
180
180
  outline:none;
181
- font-family:var(--magritte-typography-label-2-regular-font-family-v19-1-1);
182
- font-weight:var(--magritte-typography-label-2-regular-font-weight-v19-1-1);
183
- line-height:var(--magritte-typography-label-2-regular-line-height-v19-1-1);
184
- font-size:var(--magritte-typography-label-2-regular-font-size-v19-1-1);
185
- letter-spacing:var(--magritte-typography-label-2-regular-letter-spacing-v19-1-1);
186
- text-indent:var(--magritte-typography-label-2-regular-text-indent-v19-1-1);
187
- text-transform:var(--magritte-typography-label-2-regular-text-transform-v19-1-1);
188
- text-decoration:var(--magritte-typography-label-2-regular-text-decoration-v19-1-1);
189
- }
190
- .magritte-field___rlEmn_2-0-5::placeholder{
191
- color:var(--magritte-color-component-input-text-placeholder-v19-1-1);
192
- }
193
- .magritte-icon___fDMiz_2-0-5{
181
+ font-family:var(--magritte-typography-label-2-regular-font-family-v19-1-2);
182
+ font-weight:var(--magritte-typography-label-2-regular-font-weight-v19-1-2);
183
+ line-height:var(--magritte-typography-label-2-regular-line-height-v19-1-2);
184
+ font-size:var(--magritte-typography-label-2-regular-font-size-v19-1-2);
185
+ letter-spacing:var(--magritte-typography-label-2-regular-letter-spacing-v19-1-2);
186
+ text-indent:var(--magritte-typography-label-2-regular-text-indent-v19-1-2);
187
+ text-transform:var(--magritte-typography-label-2-regular-text-transform-v19-1-2);
188
+ text-decoration:var(--magritte-typography-label-2-regular-text-decoration-v19-1-2);
189
+ }
190
+ .magritte-field___rlEmn_2-0-6::placeholder{
191
+ color:var(--magritte-color-component-input-text-placeholder-v19-1-2);
192
+ }
193
+ .magritte-icon___fDMiz_2-0-6{
194
194
  display:inline-flex;
195
195
  margin-left:auto;
196
- padding:var(--magritte-static-space-100-v19-1-1) 0;
196
+ padding:var(--magritte-static-space-100-v19-1-2) 0;
197
197
  position:absolute;
198
198
  transition-property:transform;
199
- transition-duration:var(--magritte-semantic-animation-ease-in-out-100-duration-v19-1-1);
200
- transition-timing-function:var(--magritte-semantic-animation-ease-in-out-100-timing-function-v19-1-1);
199
+ transition-duration:var(--magritte-semantic-animation-ease-in-out-100-duration-v19-1-2);
200
+ transition-timing-function:var(--magritte-semantic-animation-ease-in-out-100-timing-function-v19-1-2);
201
201
  }
202
- .magritte-icon_expanded___RaOT-_2-0-5{
202
+ .magritte-icon_expanded___RaOT-_2-0-6{
203
203
  transform:rotate(-180deg);
204
- --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-chevron-focused-v19-1-1);
204
+ --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-chevron-focused-v19-1-2);
205
205
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hh.ru/magritte-ui-chips-trigger",
3
- "version": "2.0.5",
3
+ "version": "2.0.6",
4
4
  "main": "index.js",
5
5
  "types": "index.d.ts",
6
6
  "sideEffects": [
@@ -29,10 +29,10 @@
29
29
  "dependencies": {
30
30
  "@hh.ru/magritte-common-keyboard": "4.0.2",
31
31
  "@hh.ru/magritte-common-use-multiple-refs": "1.1.4",
32
- "@hh.ru/magritte-ui-chips": "5.2.18",
33
- "@hh.ru/magritte-ui-form-helper": "1.0.11",
34
- "@hh.ru/magritte-ui-icon": "7.9.1",
35
- "@hh.ru/magritte-ui-input": "7.0.1"
32
+ "@hh.ru/magritte-ui-chips": "5.2.19",
33
+ "@hh.ru/magritte-ui-form-helper": "1.0.12",
34
+ "@hh.ru/magritte-ui-icon": "7.9.2",
35
+ "@hh.ru/magritte-ui-input": "7.0.2"
36
36
  },
37
- "gitHead": "f16f39dabf580281a2a9c2a7038d27a037f9a5ef"
37
+ "gitHead": "1ac30fb3b6ed8df5e0683e4551925b6ab8bf08d9"
38
38
  }