@vkontakte/vkui 6.5.2 → 6.5.4

package/src/components/CustomSelect/CustomSelect.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { classNames, debounce } from '@vkontakte/vkjs';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
 import { useExternRef } from '../../hooks/useExternRef';
+import { useFocusWithin } from '../../hooks/useFocusWithin';
 import { useDOM } from '../../lib/dom';
 import type { Placement } from '../../lib/floating';
 import { defaultFilterFn, type FilterFn } from '../../lib/select';
@@ -12,24 +13,21 @@ import {
   CustomSelectDropdown,
   CustomSelectDropdownProps,
 } from '../CustomSelectDropdown/CustomSelectDropdown';
+import {
+  CustomSelectOption,
+  type CustomSelectOptionProps,
+} from '../CustomSelectOption/CustomSelectOption';
 import { DropdownIcon } from '../DropdownIcon/DropdownIcon';
 import { FormFieldProps } from '../FormField/FormField';
 import { NativeSelectProps } from '../NativeSelect/NativeSelect';
 import { SelectType } from '../Select/Select';
 import { Footnote } from '../Typography/Footnote/Footnote';
+import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';
 import {
   CustomSelectClearButton,
   type CustomSelectClearButtonProps,
 } from './CustomSelectClearButton';
 import { CustomSelectInput } from './CustomSelectInput';
-import {
-  calculateInputValueFromOptions,
-  defaultRenderOptionFn,
-  findIndexAfter,
-  findIndexBefore,
-  findSelectedIndex,
-} from './helpers';
-import type { CustomSelectOptionInterface, CustomSelectRenderOption } from './types';
 import styles from './CustomSelect.module.css';
 
 const sizeYClassNames = {
@@ -37,6 +35,32 @@ const sizeYClassNames = {
   ['compact']: styles['CustomSelect--sizeY-compact'],
 };
 
+const findIndexAfter = (options: CustomSelectOptionInterface[] = [], startIndex = -1) => {
+  if (startIndex >= options.length - 1) {
+    return -1;
+  }
+  return options.findIndex((option, i) => i > startIndex && !option.disabled);
+};
+
+const findIndexBefore = (
+  options: CustomSelectOptionInterface[] = [],
+  endIndex: number = options.length,
+) => {
+  let result = -1;
+  if (endIndex <= 0) {
+    return result;
+  }
+  for (let i = endIndex - 1; i >= 0; i--) {
+    let option = options[i];
+
+    if (!option.disabled) {
+      result = i;
+      break;
+    }
+  }
+  return result;
+};
+
 const warn = warnOnce('CustomSelect');
 
 const checkOptionsValueType = <T extends CustomSelectOptionInterface>(options: T[]) => {
@@ -48,10 +72,33 @@ const checkOptionsValueType = <T extends CustomSelectOptionInterface>(options: T
   }
 };
 
+function defaultRenderOptionFn<T extends CustomSelectOptionInterface>({
+  option,
+  ...props
+}: CustomSelectRenderOption<T>): React.ReactNode {
+  return <CustomSelectOption {...props} />;
+}
+
 const handleOptionDown: MouseEventHandler = (e: React.MouseEvent<HTMLElement>) => {
   e.preventDefault();
 };
 
+function findSelectedIndex<T extends CustomSelectOptionInterface>(
+  options: T[] = [],
+  value: SelectValue,
+  withClear: boolean,
+) {
+  if (withClear && value === '') {
+    return -1;
+  }
+  return (
+    options.findIndex((item) => {
+      value = typeof item.value === 'number' ? Number(value) : value;
+      return item.value === value;
+    }) ?? -1
+  );
+}
+
 const filter = <T extends CustomSelectOptionInterface>(
   options: SelectProps<T>['options'],
   inputValue: string,
@@ -62,7 +109,21 @@ const filter = <T extends CustomSelectOptionInterface>(
     : options;
 };
 
-export type { CustomSelectClearButtonProps, CustomSelectOptionInterface, CustomSelectRenderOption };
+type SelectValue = React.SelectHTMLAttributes<HTMLSelectElement>['value'];
+
+export interface CustomSelectOptionInterface {
+  value: SelectValue;
+  label: React.ReactElement | string;
+  disabled?: boolean;
+  [index: string]: any;
+}
+
+export interface CustomSelectRenderOption<T extends CustomSelectOptionInterface>
+  extends CustomSelectOptionProps {
+  option: T;
+}
+
+export type { CustomSelectClearButtonProps };
 
 export interface SelectProps<
   OptionInterfaceT extends CustomSelectOptionInterface = CustomSelectOptionInterface,
@@ -222,14 +283,11 @@ export function CustomSelect<OptionInterfaceT extends CustomSelectOptionInterfac
 
   const [focusedOptionIndex, setFocusedOptionIndex] = React.useState<number | undefined>(-1);
   const [isControlledOutside, setIsControlledOutside] = React.useState(props.value !== undefined);
+  const [inputValue, setInputValue] = React.useState('');
   const [nativeSelectValue, setNativeSelectValue] = React.useState(
     () => props.value ?? defaultValue ?? (allowClearButton ? '' : undefined),
   );
 
-  const [inputValue, setInputValue] = React.useState(() =>
-    calculateInputValueFromOptions(optionsProp, nativeSelectValue),
-  );
-
   const [popperPlacement, setPopperPlacement] = React.useState<Placement>(popupDirection);
   const [options, setOptions] = React.useState(optionsProp);
   const [selectedOptionIndex, setSelectedOptionIndex] = React.useState<number | undefined>(
@@ -368,6 +426,7 @@ export function CustomSelect<OptionInterfaceT extends CustomSelectOptionInterfac
   const close = React.useCallback(() => {
     resetKeyboardInput();
 
+    setInputValue('');
     setOpened(false);
     resetFocusedOption();
     onClose?.();
@@ -377,8 +436,8 @@ export function CustomSelect<OptionInterfaceT extends CustomSelectOptionInterfac
     (index: number) => {
       const item = options[index];
 
-      close();
       setNativeSelectValue(item?.value);
+      close();
 
       const shouldTriggerOnChangeWhenControlledAndInnerValueIsOutOfSync =
         isControlledOutside &&
@@ -414,9 +473,7 @@ export function CustomSelect<OptionInterfaceT extends CustomSelectOptionInterfac
     close();
     const event = new Event('focusout', { bubbles: true });
     selectElRef.current?.dispatchEvent(event);
-
-    setInputValue(calculateInputValueFromOptions(optionsProp, nativeSelectValue));
-  }, [close, selectElRef, optionsProp, nativeSelectValue]);
+  }, [close, selectElRef]);
 
   const onFocus = React.useCallback(() => {
     const event = new Event('focusin', { bubbles: true });
@@ -451,40 +508,27 @@ export function CustomSelect<OptionInterfaceT extends CustomSelectOptionInterfac
   );
 
   React.useEffect(
-    function filterOptions() {
+    function updateOptionsAndSelectedOptionIndex() {
+      const value = props.value ?? nativeSelectValue ?? defaultValue;
+
       const options =
         searchable && inputValue !== undefined
           ? filter(optionsProp, inputValue, filterFn)
           : optionsProp;
 
       setOptions(options);
+      setSelectedOptionIndex(findSelectedIndex(options, value, allowClearButton));
     },
-    [filterFn, inputValue, optionsProp, searchable],
-  );
-
-  const selectValue = props.value ?? nativeSelectValue ?? defaultValue;
-  React.useEffect(
-    function updateSelectedOptionIndexOnValueChange() {
-      setSelectedOptionIndex(findSelectedIndex(options, selectValue, allowClearButton));
-    },
-    [selectValue, allowClearButton, options],
-  );
-
-  const prevSelectValueRef = React.useRef(selectValue);
-  React.useEffect(
-    function updateInputValueOnSelectValueChange() {
-      if (prevSelectValueRef.current === selectValue) {
-        return;
-      }
-      setInputValue(calculateInputValueFromOptions(optionsProp, selectValue));
-    },
-    [selectValue, optionsProp],
-  );
-  React.useEffect(
-    function updatePrevSelectValue() {
-      prevSelectValueRef.current = selectValue;
-    },
-    [selectValue],
+    [
+      filterFn,
+      inputValue,
+      nativeSelectValue,
+      optionsProp,
+      defaultValue,
+      props.value,
+      searchable,
+      allowClearButton,
+    ],
   );
 
   const onNativeSelectChange: React.ChangeEventHandler<HTMLSelectElement> = (e) => {
@@ -785,6 +829,7 @@ export function CustomSelect<OptionInterfaceT extends CustomSelectOptionInterfac
   const selectInputAriaProps: React.HTMLAttributes<HTMLElement> = {
     'role': 'combobox',
     'aria-controls': popupAriaId,
+    'aria-owns': popupAriaId,
     'aria-expanded': opened,
     ['aria-activedescendant']:
       ariaActiveDescendantId && opened ? `${popupAriaId}-${ariaActiveDescendantId}` : undefined,
@@ -793,6 +838,8 @@ export function CustomSelect<OptionInterfaceT extends CustomSelectOptionInterfac
     'aria-autocomplete': 'none',
   };
 
+  const focusWithin = useFocusWithin(handleRootRef);
+
   return (
     <div
       className={classNames(
@@ -805,6 +852,9 @@ export function CustomSelect<OptionInterfaceT extends CustomSelectOptionInterfac
       onClick={passClickAndFocusToInputOnClick}
       onMouseDown={preventInputBlurWhenClickInsideFocusedSelectArea}
     >
+      {focusWithin && selected && !opened && (
+        <VisuallyHidden aria-live="polite">{selected.label}</VisuallyHidden>
+      )}
       <CustomSelectInput
         autoComplete="off"
         autoCapitalize="none"
@@ -816,7 +866,7 @@ export function CustomSelect<OptionInterfaceT extends CustomSelectOptionInterfac
         onFocus={onFocus}
         onBlur={onBlur}
         className={openedClassNames}
-        searchable={searchable}
+        readOnly={!searchable}
         fetching={fetching}
         value={inputValue}
         onKeyUp={handleKeyUp}
@@ -826,8 +876,9 @@ export function CustomSelect<OptionInterfaceT extends CustomSelectOptionInterfac
         before={before}
         after={afterIcons}
         selectType={selectType}
-        selectedOptionLabel={selected?.label}
-      />
+      >
+        {selected?.label}
+      </CustomSelectInput>
       <select
         ref={selectElRef}
         name={name}

package/src/components/CustomSelect/CustomSelectInput.module.css

@@ -2,10 +2,11 @@
   position: relative;
 }
 
-.CustomSelectInput__input {
+.CustomSelectInput__el {
   position: absolute;
   inset-block-start: 0;
   inset-inline-start: 0;
+  z-index: var(--vkui_internal--z_index_form_field_element);
   inline-size: 100%;
   block-size: var(--vkui--size_field_height--regular);
   line-height: var(--vkui--size_field_height--regular);
@@ -15,90 +16,63 @@
   box-sizing: border-box;
   box-shadow: none;
   appearance: none;
-  color: inherit;
+  color: var(--vkui--color_text_primary);
   padding-block: 0;
   padding-inline: 12px;
   background: transparent;
-  /*
-   * По типy option.label может принимать React-компонент,
-   * но React-компонент нельзя отрендерить как value в input.
-   * Поэтому мы всегда стараемся прятать input и поверх рисовать конейнер,
-   * в который можно положить label как строку или как React-компонент.
-   * В то же время у input в value лежит текстовое представление
-   * React компонента специально для скринридера.
-   */
-  opacity: 0;
-}
-
-/*
- * Но в режиме searchable, в фокусе мы наоборот, намеренно показываем
- * input и прячем декоративный label, так как нам важно дать пользователю
- * возможность изменить значение input для поиска.
- * А пользователям скринридера надо дать возможность прочитать выбранное значение.
- */
-.CustomSelectInput__input:not(:read-only):focus {
-  opacity: 1;
 }
 
-.CustomSelectInput__input:read-only:not(:disabled) {
+.CustomSelectInput__el--cursor-pointer {
   cursor: pointer;
 }
 
-.CustomSelectInput--sizeY-compact .CustomSelectInput__input {
+.CustomSelectInput--sizeY-compact .CustomSelectInput__el {
   block-size: var(--vkui--size_field_height--compact);
 }
 
 @media (--sizeY-compact) {
-  .CustomSelectInput--sizeY-none .CustomSelectInput__input {
+  .CustomSelectInput--sizeY-none .CustomSelectInput__el {
     block-size: var(--vkui--size_field_height--compact);
   }
 }
 
-.CustomSelectInput--hasBefore .CustomSelectInput__input {
+.CustomSelectInput--hasBefore .CustomSelectInput__el {
   padding-inline-start: 0;
 }
 
-.CustomSelectInput--hasAfter .CustomSelectInput__input {
+.CustomSelectInput--hasAfter .CustomSelectInput__el {
   padding-inline-end: 0;
 }
 
-.CustomSelectInput__input::placeholder {
-  color: var(--vkui--color_text_secondary);
-  /* Для Firefox: взято из Input.module.css */
-  opacity: 1;
+.CustomSelectInput__el:disabled {
+  opacity: var(--vkui--opacity_disable_accessibility);
 }
 
-.CustomSelectInput__label-wrapper {
+.CustomSelectInput__container {
+  z-index: var(--vkui_internal--z_index_form_field_element);
   inline-size: 100%;
   max-block-size: 100%;
   padding-inline: 12px 0;
+  color: var(--vkui--color_text_primary);
   box-sizing: border-box;
   overflow: hidden;
   pointer-events: none;
 }
 
-.CustomSelectInput__input:focus:not(:read-only) ~ .CustomSelectInput__label-wrapper {
-  display: none;
-}
-
-.CustomSelectInput__input:disabled ~ .CustomSelectInput__label-wrapper {
-  opacity: var(--vkui--opacity_disable_accessibility);
-}
-
-.CustomSelectInput--hasBefore .CustomSelectInput__label-wrapper {
+.CustomSelectInput--hasBefore .CustomSelectInput__container {
   padding-inline-start: 0;
 }
 
-.CustomSelectInput--multiline .CustomSelectInput__label-wrapper {
+.CustomSelectInput--multiline .CustomSelectInput__container {
   padding-block: 12px;
 }
 
-.CustomSelectInput--sizeY-compact.CustomSelectInput--multiline .CustomSelectInput__label-wrapper {
+.CustomSelectInput--sizeY-compact.CustomSelectInput--multiline .CustomSelectInput__container {
   padding-block: 8px;
 }
 
 @media (--sizeY-compact) {
-  .CustomSelectInput--sizeY-none.CustomSelectInput--multiline .CustomSelectInput__label-wrapper {
+  .CustomSelectInput--sizeY-none.CustomSelectInput--multiline .CustomSelectInput__container {
     padding-block: 8px;
   }
 }
@@ -110,34 +84,40 @@
   align-items: center;
   flex: 1;
   overflow: hidden;
-  color: var(--vkui--color_text_primary);
-}
-
-.CustomSelectInput--empty .CustomSelectInput__label-wrapper {
-  color: var(--vkui--color_text_secondary);
 }
 
 .CustomSelectInput--hasBefore .CustomSelectInput__input-group {
   border-radius: 0;
 }
 
-.CustomSelectInput__label {
+.CustomSelectInput__title {
   display: block;
 }
 
-.CustomSelectInput:not(.CustomSelectInput--multiline) .CustomSelectInput__label {
+.CustomSelectInput:not(.CustomSelectInput--multiline) .CustomSelectInput__title {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
 
-.CustomSelectInput--align-right .CustomSelectInput__label,
-.CustomSelectInput--align-right .CustomSelectInput__input {
+.CustomSelectInput--empty .CustomSelectInput__title {
+  color: var(--vkui--color_text_secondary);
+}
+
+/* Для доступности placeholder в инпуте задан, но визуально не виден, потому что
+ * для комфортного управления видом плейсходера мы рендерим его отдельно, так же как и лэйбл
+ */
+.CustomSelectInput__el::placeholder {
+  opacity: 0;
+}
+
+.CustomSelectInput--align-right .CustomSelectInput__title,
+.CustomSelectInput--align-right .CustomSelectInput__el {
   text-align: end;
 }
 
-.CustomSelectInput--align-center .CustomSelectInput__label,
-.CustomSelectInput--align-center .CustomSelectInput__input {
+.CustomSelectInput--align-center .CustomSelectInput__title,
+.CustomSelectInput--align-center .CustomSelectInput__el {
   text-align: center;
 }
 
@@ -146,6 +126,6 @@
  * CalendarHeader
  */
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
-:global(.vkuiInternalCalendarHeader__picker) .CustomSelectInput__label-wrapper {
+:global(.vkuiInternalCalendarHeader__picker) .CustomSelectInput__container {
   padding-inline-end: 4px;
 }

package/src/components/CustomSelect/CustomSelectInput.tsx

@@ -2,12 +2,14 @@ import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
 import { useExternRef } from '../../hooks/useExternRef';
+import { useFocusWithin } from '../../hooks/useFocusWithin';
 import { usePlatform } from '../../hooks/usePlatform';
 import { getFormFieldModeFromSelectType } from '../../lib/select';
 import { HasAlign, HasRef, HasRootRef } from '../../types';
 import { FormField, FormFieldProps } from '../FormField/FormField';
 import type { SelectType } from '../Select/Select';
 import { SelectTypography } from '../SelectTypography/SelectTypography';
+import { Text } from '../Typography/Text/Text';
 import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';
 import styles from './CustomSelectInput.module.css';
 
@@ -26,8 +28,6 @@ export interface CustomSelectInputProps
   multiline?: boolean;
   labelTextTestId?: string;
   fetching?: boolean;
-  searchable?: boolean;
-  selectedOptionLabel?: React.ReactElement | string;
 }
 
 /**
@@ -43,35 +43,42 @@ export const CustomSelectInput = ({
   before,
   after,
   status,
-  selectedOptionLabel,
+  children,
+  placeholder,
   selectType = 'default',
   multiline,
   disabled,
   fetching,
   labelTextTestId,
-  searchable,
-  ...restInputProps
+  ...restProps
 }: CustomSelectInputProps): React.ReactNode => {
   const { sizeY = 'none' } = useAdaptivity();
 
-  const handleRootRef = useExternRef(getRootRef);
+  const title = children || placeholder;
+  const showLabelOrPlaceholder = !Boolean(restProps.value);
 
-  const platform = usePlatform();
+  const handleRootRef = useExternRef(getRootRef);
+  const focusWithin = useFocusWithin(handleRootRef);
 
   const input = (
-    <SelectTypography
-      selectType={selectType}
+    <Text
       type="text"
-      {...restInputProps}
+      {...restProps}
       disabled={disabled && !fetching}
-      readOnly={restInputProps.readOnly || !searchable || (disabled && fetching)}
+      readOnly={restProps.readOnly || (disabled && fetching)}
       Component="input"
       normalize={false}
-      className={styles['CustomSelectInput__input']}
+      className={classNames(
+        styles['CustomSelectInput__el'],
+        (restProps.readOnly || (showLabelOrPlaceholder && !focusWithin)) &&
+          styles['CustomSelectInput__el--cursor-pointer'],
+      )}
       getRootRef={getRef}
+      placeholder={children ? '' : placeholder}
     />
   );
 
+  const platform = usePlatform();
   return (
     <FormField
       Component="div"
@@ -80,7 +87,7 @@ export const CustomSelectInput = ({
         styles['CustomSelectInput'],
         align === 'right' && styles['CustomSelectInput--align-right'],
         align === 'center' && styles['CustomSelectInput--align-center'],
-        !selectedOptionLabel && styles['CustomSelectInput--empty'],
+        !children && styles['CustomSelectInput--empty'],
         multiline && styles['CustomSelectInput--multiline'],
         sizeY !== 'regular' && sizeYClassNames[sizeY],
         before && styles['CustomSelectInput--hasBefore'],
@@ -95,6 +102,16 @@ export const CustomSelectInput = ({
       status={status}
     >
       <div className={styles['CustomSelectInput__input-group']}>
+        <div
+          className={classNames(styles['CustomSelectInput__container'], className)}
+          tabIndex={-1}
+          aria-hidden
+          data-testid={labelTextTestId}
+        >
+          <SelectTypography selectType={selectType} className={styles['CustomSelectInput__title']}>
+            {showLabelOrPlaceholder && title}
+          </SelectTypography>
+        </div>
         {/* Чтобы отключить autosuggestion в iOS, тултипы которого начинают всплывать даже когда input
          * в режиме readonly, мы оборачиваем инпут в VisuallyHidden.
          * Тултипы появляются при каждом клике на input.
@@ -104,17 +121,11 @@ export const CustomSelectInput = ({
          * Делаем это только для режима read-only. Потому что проблема именно в режиме read-only.
          * Обертка вокруг инпута обрабатывает клики и передаёт фокус, так что на взаимодействии с инпутом это никак не скажется.
          **/}
-        {!searchable && platform === 'ios' ? <VisuallyHidden>{input}</VisuallyHidden> : input}
-        <div
-          className={classNames(styles['CustomSelectInput__label-wrapper'], className)}
-          tabIndex={-1}
-          aria-hidden
-          data-testid={labelTextTestId}
-        >
-          <SelectTypography selectType={selectType} className={styles['CustomSelectInput__label']}>
-            {selectedOptionLabel || restInputProps.placeholder}
-          </SelectTypography>
-        </div>
+        {restProps.readOnly && platform === 'ios' ? (
+          <VisuallyHidden>{input}</VisuallyHidden>
+        ) : (
+          input
+        )}
       </div>
     </FormField>
   );

package/src/components/ImageBase/ImageBase.module.css

@@ -16,14 +16,25 @@
   background-color: transparent;
 }
 
+.ImageBase__children,
 .ImageBase__border {
-  pointer-events: none;
   position: absolute;
-  z-index: var(--vkui_internal--z_index_image_base_border);
   inset-inline-start: 0;
   inset-block-start: 0;
   inline-size: 100%;
   block-size: 100%;
+}
+
+.ImageBase__children {
+  display: inherit;
+  align-items: inherit;
+  justify-content: inherit;
+  border-radius: inherit;
+}
+
+.ImageBase__border {
+  pointer-events: none;
+  z-index: var(--vkui_internal--z_index_image_base_border);
   box-sizing: border-box;
   transform-origin: left top;
   border: var(--vkui--size_border--regular) solid var(--vkui--color_image_border_alpha);

package/src/components/ImageBase/ImageBase.tsx

@@ -248,7 +248,7 @@ export const ImageBase: React.FC<ImageBaseProps> & {
           />
         )}
         {fallbackIcon && <div className={styles['ImageBase__fallback']}>{fallbackIcon}</div>}
-        {children}
+        {children && <div className={styles['ImageBase__children']}>{children}</div>}
         {!noBorder && <div aria-hidden className={styles['ImageBase__border']} />}
       </Clickable>
     </ImageBaseContext.Provider>

package/dist/cjs/components/CustomSelect/helpers.d.ts

@@ -1,8 +0,0 @@
-import * as React from 'react';
-import type { CustomSelectOptionInterface, CustomSelectRenderOption, SelectValue } from './types';
-export declare const findIndexAfter: (options?: CustomSelectOptionInterface[], startIndex?: number) => number;
-export declare const findIndexBefore: (options?: CustomSelectOptionInterface[], endIndex?: number) => number;
-export declare function findSelectedIndex<T extends CustomSelectOptionInterface>(options: T[] | undefined, value: SelectValue, withClear: boolean): number;
-export declare function calculateInputValueFromOptions<T extends CustomSelectOptionInterface>(options: T[] | undefined, selectValue: SelectValue): string;
-export declare function defaultRenderOptionFn<T extends CustomSelectOptionInterface>({ option, ...props }: CustomSelectRenderOption<T>): React.ReactNode;
-//# sourceMappingURL=helpers.d.ts.map

package/dist/cjs/components/CustomSelect/helpers.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../../src/components/CustomSelect/helpers.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,2BAA2B,EAAE,wBAAwB,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAElG,eAAO,MAAM,cAAc,aAAa,2BAA2B,EAAE,gCAKpE,CAAC;AAEF,eAAO,MAAM,eAAe,aACjB,2BAA2B,EAAE,aAC5B,MAAM,WAejB,CAAC;AAEF,wBAAgB,iBAAiB,CAAC,CAAC,SAAS,2BAA2B,EACrE,OAAO,EAAE,CAAC,EAAE,YAAK,EACjB,KAAK,EAAE,WAAW,EAClB,SAAS,EAAE,OAAO,UAWnB;AAED,wBAAgB,8BAA8B,CAAC,CAAC,SAAS,2BAA2B,EAClF,OAAO,EAAE,CAAC,EAAE,YAAK,EACjB,WAAW,EAAE,WAAW,UAIzB;AAED,wBAAgB,qBAAqB,CAAC,CAAC,SAAS,2BAA2B,EAAE,EAC3E,MAAM,EACN,GAAG,KAAK,EACT,EAAE,wBAAwB,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,SAAS,CAE/C"}