@hazelcast/ui 1.3.3-next.9 → 2.0.1-canary.0

package/lib/components/Button.d.ts

@@ -0,0 +1,97 @@
+import React, { ButtonHTMLAttributes, HTMLAttributes, ReactElement } from 'react';
+import { IconProps, IconSize } from './Icon';
+import { TooltipProps } from './Tooltip';
+import { LinkRel, LinkTarget } from './Link';
+import { DataTestProp } from '../../src';
+export type ButtonVariant = 'contained' | 'outlined' | 'text';
+export type ButtonColor = 'primary' | 'secondary' | 'warning' | 'brand' | 'authPrimary' | 'authSecondary' | 'light';
+export type ButtonSize = 'medium' | 'small';
+export type ButtonAccessibleIconLeftProps = {
+    iconLeft: IconProps['icon'];
+    iconLeftAriaLabel: string;
+    iconLeftColor?: IconProps['color'];
+    iconLeftClassName?: string;
+} | {
+    iconLeft?: never;
+    iconLeftAriaLabel?: never;
+    iconLeftColor?: never;
+    iconLeftClassName?: never;
+};
+export type ButtonAccessibleIconRightProps = {
+    iconRight: IconProps['icon'];
+    iconRightAriaLabel: string;
+    iconRightColor?: IconProps['color'];
+    iconRightClassName?: string;
+} | {
+    iconRight?: never;
+    iconRightAriaLabel?: never;
+    iconRightColor?: never;
+    iconRightClassName?: never;
+};
+type ButtonNotDisabledProps = {
+    disabled?: never;
+    disabledTooltip?: never;
+    disabledTooltipVisible?: never;
+    disabledTooltipPlacement?: never;
+};
+export type ButtonDisabledProps = {
+    disabledTooltip?: string;
+    disabled: boolean;
+    disabledTooltipVisible?: boolean;
+    disabledTooltipPlacement?: TooltipProps['placement'];
+};
+export type ButtonOutlineType = 'outline' | 'inset';
+export type ButtonCommonProps = {
+    children: string | ReactElement;
+    size?: ButtonSize;
+    iconSize?: IconSize;
+    color?: ButtonColor;
+    capitalize?: boolean;
+    bodyClassName?: string;
+    variant?: ButtonVariant;
+    outlineClassName?: string;
+    outline?: ButtonOutlineType;
+    tooltip?: string;
+    tooltipColor?: TooltipProps['color'];
+    active?: boolean;
+    truncate?: boolean;
+} & (ButtonDisabledProps | ButtonNotDisabledProps) & Pick<HTMLAttributes<HTMLAnchorElement | HTMLButtonElement>, 'className' | 'onClick' | 'tabIndex' | 'style'>;
+export type ButtonTypeAnchorProps = {
+    component: 'a';
+    href: string;
+    target?: LinkTarget;
+    rel?: LinkRel | LinkRel[];
+    type?: never;
+    loading?: never;
+};
+export type ButtonTypeButtonProps = {
+    component?: 'button';
+    href?: never;
+    target?: never;
+    rel?: never;
+    loading?: boolean;
+} & Pick<ButtonHTMLAttributes<HTMLButtonElement>, 'autoFocus' | 'type'>;
+export type ButtonTypeProps = ButtonTypeAnchorProps | ButtonTypeButtonProps;
+export type ButtonProps<T = ButtonTypeProps> = ButtonCommonProps & T & ButtonAccessibleIconLeftProps & ButtonAccessibleIconRightProps & DataTestProp;
+/**
+ * ### Purpose
+ * Make it clear what users should do to continue with their main flow by using buttons to highlight the main actions they can take.
+ * Prioritize the actions on a page and use the button sizes and types to make it clear to users which are the most important. If you have many actions, consider using button links to offer less important ones.
+ *
+ * ### General Info
+ * - Use 4 types of Button: Primary, Secondary, Danger and Transparent
+ * - There are two sizes: `small` with height of `30px` and `medium` with height of `40px`
+ * - Button can stand only with the label, icon on the left side, icon on the right side, icon on both left and right side, or only icon (depends on the type of the button).
+ * - You can use an icon with the label to draw more attention.
+ * - Button label is always in upper-case
+ * - The labels should be actionable (e.g. "EDIT" or "ADD NEW FILTER") and it should be clear from the button label what will happen when the user interacts with it. Make button labels short and clear. Avoid long explanations in the button text.
+ * - You can change underlying semantics with a component property. Typescript will guard you on providing other properties related to the component type.
+ *
+ * ### Usage
+ * - **Primary**: Use primary button for the single primary action on the screen. To call attention to an action on a form, or highlight the strongest call to action on a page. Primary button should only appear once per screen. Not every screen requires a primary button.
+ * - **Secondary**: Use secondary buttons for all remaining actions. Secondary button is the standard button for most use cases.
+ * - **Danger**: Use danger button for potentially destructive actions.
+ * - **Transparent**: Use for IconButton and similar use-cases.
+ */
+export declare const Button: React.ForwardRefExoticComponent<ButtonProps<ButtonTypeProps> & React.RefAttributes<HTMLElement>>;
+export {};

package/lib/components/Button.js

@@ -0,0 +1,64 @@
+import React, { forwardRef } from 'react';
+import cn from 'classnames';
+import mergeRefs from 'react-merge-refs';
+import { useUID } from 'react-uid';
+import { Icon } from './Icon';
+import { TruncatedText } from './TruncatedText';
+import { Tooltip } from './Tooltip';
+import { Loader } from './Loader';
+import styles from './Button.module.scss';
+const capitalizeFirstCharacter = (str) => `${str[0].toUpperCase()}${str.slice(1)}`;
+/**
+ * ### Purpose
+ * Make it clear what users should do to continue with their main flow by using buttons to highlight the main actions they can take.
+ * Prioritize the actions on a page and use the button sizes and types to make it clear to users which are the most important. If you have many actions, consider using button links to offer less important ones.
+ *
+ * ### General Info
+ * - Use 4 types of Button: Primary, Secondary, Danger and Transparent
+ * - There are two sizes: `small` with height of `30px` and `medium` with height of `40px`
+ * - Button can stand only with the label, icon on the left side, icon on the right side, icon on both left and right side, or only icon (depends on the type of the button).
+ * - You can use an icon with the label to draw more attention.
+ * - Button label is always in upper-case
+ * - The labels should be actionable (e.g. "EDIT" or "ADD NEW FILTER") and it should be clear from the button label what will happen when the user interacts with it. Make button labels short and clear. Avoid long explanations in the button text.
+ * - You can change underlying semantics with a component property. Typescript will guard you on providing other properties related to the component type.
+ *
+ * ### Usage
+ * - **Primary**: Use primary button for the single primary action on the screen. To call attention to an action on a form, or highlight the strongest call to action on a page. Primary button should only appear once per screen. Not every screen requires a primary button.
+ * - **Secondary**: Use secondary buttons for all remaining actions. Secondary button is the standard button for most use cases.
+ * - **Danger**: Use danger button for potentially destructive actions.
+ * - **Transparent**: Use for IconButton and similar use-cases.
+ */
+export const Button = forwardRef(({ component: Component = 'button', className, bodyClassName, outlineClassName, outline = 'outline', children, capitalize = true, 
+// Disabled tooltip
+disabled, disabledTooltip, disabledTooltipVisible, disabledTooltipPlacement, 
+// Left icon
+iconLeft, iconLeftAriaLabel, iconLeftColor, iconLeftClassName, 
+// Right icon
+iconRight, iconRightAriaLabel, iconRightColor, iconRightClassName, rel = 'noopener', target, type = 'button', loading, variant = 'contained', color = 'primary', tooltip, size = 'small', active, truncate = true, iconSize: propIconSize, tooltipColor, ...rest }, ref) => {
+    const tooltipId = useUID();
+    const iconSize = propIconSize || (size === 'medium' ? 'smallMedium' : 'small');
+    const relFinal = Array.isArray(rel) ? rel.join(' ') : rel;
+    const loadingAnimationOnRight = loading && iconRight && iconRightAriaLabel && !(iconLeft && iconLeftAriaLabel);
+    return (React.createElement(Tooltip, { id: tooltipId, color: tooltipColor, content: disabled ? disabledTooltip : tooltip, visible: disabled && disabledTooltipVisible, placement: disabledTooltipPlacement }, (tooltipRef, onMouseEnter, onMouseLeave) => (React.createElement(Component, { "data-test": "button", className: cn(styles.button, {
+            [styles[`color${capitalizeFirstCharacter(color)}`]]: true,
+            [styles[`variant${capitalizeFirstCharacter(variant)}`]]: true,
+            [styles.active]: active,
+            [styles[size]]: size !== 'small',
+        }, className), "aria-describedby": disabled ? tooltipId : undefined, disabled: disabled !== null && disabled !== void 0 ? disabled : loading, rel: Component === 'a' ? relFinal : undefined, target: Component === 'a' ? target : undefined, type: Component === 'button' ? type : undefined, ref: mergeRefs([ref, tooltipRef]), ...rest },
+        React.createElement("span", { "data-test": "button-outline", className: cn(styles.outline, { [styles.inset]: outline === 'inset' }, outlineClassName) }),
+        React.createElement("span", { className: cn(styles.body, bodyClassName), onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave },
+            loading && !loadingAnimationOnRight && React.createElement(Loader, { className: styles.iconLeft, size: iconSize }),
+            iconLeft && iconLeftAriaLabel && !loading && (React.createElement(Icon, { icon: iconLeft, ariaLabel: iconLeftAriaLabel, "data-test": "button-icon-left", className: cn(styles.iconLeft, iconLeftClassName), size: iconSize, color: iconLeftColor })),
+            truncate ? (React.createElement(TruncatedText, { text: capitalize && typeof children === 'string' ? children.toUpperCase() : children, 
+                /*
+                If a button is disabled and text is long we don't want to show 2 popups.
+                1. In case a button is disabled and no `disabledTooltipVisible` is enforced, we just hide truncated popup.
+                2. In case a button is disabled and disabledTooltip is hidden with a false flag, there is a space to show
+                the truncated popup -> setting it to undefined will leave the default behaviour.
+              */
+                tooltipVisible: disabled && disabledTooltipVisible !== false ? false : undefined })) : (children),
+            loadingAnimationOnRight && React.createElement(Loader, { className: styles.iconRight, size: iconSize }),
+            !loadingAnimationOnRight && iconRight && iconRightAriaLabel && (React.createElement(Icon, { icon: iconRight, ariaLabel: iconRightAriaLabel, "data-test": "button-icon-right", className: cn(styles.iconRight, iconRightClassName), size: iconSize, color: iconRightColor })))))));
+});
+Button.displayName = 'Button';
+//# sourceMappingURL=Button.js.map

package/lib/components/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../src/components/Button.tsx"],"names":[],"mappings":"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"}

package/lib/components/Button.module.scss

@@ -0,0 +1,329 @@
+@use 'sass:color';
+@use '../../styles/constants' as c;
+@use '../../styles/helpers' as h;
+
+@mixin buttonColor($color: c.$colorPrimary) {
+  color: $color;
+  background-color: $color;
+  border-color: $color;
+}
+
+@mixin disabledButtonColor {
+  color: c.$colorTextSecondary;
+  background-color: c.$colorNeutral;
+  border-color: c.$colorNeutral;
+}
+
+.button {
+  display: inline-block;
+  position: relative;
+  box-sizing: border-box;
+  cursor: pointer;
+  border: none;
+  padding: 0;
+  border-radius: c.$borderRadiusButtonSmall;
+  height: c.$inputHeightSmall;
+  max-width: c.$buttonMaxWidth;
+
+  // for <a> element
+  text-decoration: none;
+
+  @include c.typographyButton('small');
+
+  &.medium {
+    height: c.$grid * 10.75;
+
+    @include c.typographyButton('medium');
+  }
+
+  .outline {
+    position: absolute;
+    border-radius: c.$borderRadiusButtonSmall;
+    pointer-events: none;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    /* doiuse-disable calc */
+    width: calc(100% + #{c.$grid} * 2);
+    height: calc(100% + #{c.$grid} * 2);
+    /* doiuse-enable calc */
+    z-index: c.$zIndex100;
+    visibility: hidden;
+
+    @include h.outlineSimple;
+
+    &.inset {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  &:focus-visible,
+  &.focus {
+    // Do not remove outline for high-contrast modes
+    // https://stackoverflow.com/a/52616313
+    outline: c.$outlineWidth solid transparent;
+
+    .outline {
+      visibility: visible;
+    }
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+  }
+
+  .iconLeft {
+    flex-shrink: 0;
+    margin-right: c.$grid * 2;
+  }
+
+  .iconRight {
+    flex-shrink: 0;
+    margin-left: c.$grid * 2;
+  }
+
+  .body {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    max-width: 100%;
+    width: 100%;
+    height: 100%;
+    padding: 0 c.$grid * 5;
+    box-sizing: border-box;
+  }
+
+  &.color {
+    &Primary {
+      @include buttonColor(c.$colorPrimary);
+
+      &:hover,
+      &.hover,
+      &:focus-visible,
+      &.focus {
+        @include buttonColor(c.$colorPrimaryLight);
+      }
+
+      &:active,
+      &.active {
+        @include buttonColor(c.$colorPrimaryDark);
+      }
+
+      &.variantContained {
+        color: c.$colorNeutralWhite;
+      }
+
+      &:disabled {
+        @include disabledButtonColor;
+      }
+    }
+
+    &Secondary {
+      @include buttonColor(c.$colorError);
+
+      &:hover,
+      &.hover,
+      &:focus-visible,
+      &.focus {
+        @include buttonColor(c.$colorErrorLight);
+      }
+
+      &:active,
+      &.active {
+        @include buttonColor(c.$colorErrorDark);
+      }
+
+      &.variantContained {
+        color: c.$colorNeutralWhite;
+      }
+
+      &:disabled {
+        @include disabledButtonColor;
+      }
+    }
+
+    &Warning {
+      @include buttonColor(c.$colorWarning);
+
+      &:hover,
+      &.hover,
+      &:focus-visible,
+      &.focus {
+        @include buttonColor(c.$colorWarningLight);
+      }
+
+      &:active,
+      &.active {
+        @include buttonColor(c.$colorWarningDark);
+      }
+
+      &.variantContained {
+        color: c.$colorText;
+      }
+
+      &:disabled {
+        @include disabledButtonColor;
+      }
+    }
+
+    &Brand {
+      @include buttonColor(c.$colorBrand);
+
+      &:hover,
+      &.hover,
+      &:focus-visible,
+      &.focus {
+        @include buttonColor(color.adjust(c.$colorBrand, $lightness: 20%));
+      }
+
+      &:active,
+      &.active {
+        @include buttonColor(color.adjust(c.$colorBrand, $lightness: -10%));
+      }
+
+      &.variantContained {
+        color: c.$colorNeutralWhite;
+      }
+
+      &:disabled {
+        @include disabledButtonColor;
+      }
+    }
+
+    &AuthPrimary {
+      @include buttonColor(c.$colorBrandPrimary);
+
+      &:hover,
+      &.hover,
+      &:focus-visible,
+      &.focus {
+        @include buttonColor(color.adjust(c.$colorBrandPrimary, $lightness: 10%));
+      }
+
+      &:active,
+      &.active {
+        @include buttonColor(color.adjust(c.$colorBrandPrimary, $lightness: -10%));
+      }
+
+      &.variantContained {
+        color: c.$colorText;
+      }
+
+      &:disabled {
+        @include disabledButtonColor;
+      }
+    }
+
+    &AuthSecondary {
+      @include buttonColor(c.$colorAuthSecondary);
+
+      border-color: c.$colorNeutralWhite;
+
+      &:hover,
+      &.hover,
+      &:focus-visible,
+      &.focus {
+        @include buttonColor(color.adjust(c.$colorAuthSecondary, $lightness: 10%));
+      }
+
+      &:active,
+      &.active {
+        @include buttonColor(color.adjust(c.$colorAuthSecondary, $lightness: -10%));
+      }
+
+      &.variantContained {
+        color: c.$colorNeutralWhite;
+      }
+
+      &.variantOutlined {
+        border-color: c.$colorAuthSecondary;
+      }
+
+      &:disabled {
+        color: c.$colorText;
+        background-color: c.$colorNeutralWhite;
+      }
+    }
+
+    &Light {
+      @include buttonColor(c.$colorNeutralLighter);
+
+      border-color: c.$colorNeutralLighter;
+
+      &:hover,
+      &.hover,
+      &:focus-visible,
+      &.focus {
+        @include buttonColor(color.adjust(c.$colorBrandText, $lightness: 10%));
+      }
+
+      &:active,
+      &.active {
+        @include buttonColor(c.$colorBrandText);
+      }
+
+      &.variantContained {
+        color: c.$colorText;
+
+        &:disabled {
+          @include disabledButtonColor;
+        }
+      }
+
+      &:disabled {
+        @include buttonColor(c.$colorNeutralLight);
+      }
+    }
+  }
+
+  &.variant {
+    &Outlined {
+      background: none;
+      border-style: solid;
+      border-width: c.$borderWidth;
+
+      .outline {
+        /* Note: We need to take border of 1px into account */
+        /* doiuse-disable calc */
+        width: calc(100% + #{c.$grid} * 2.5);
+        height: calc(100% + #{c.$grid} * 2.5);
+        /* doiuse-enable calc */
+
+        &.inset {
+          /* doiuse-disable calc */
+          width: calc(100% + #{c.$grid});
+          height: calc(100% + #{c.$grid});
+          /* doiuse-enable calc */
+        }
+      }
+
+      &:hover,
+      &.hover,
+      &:active,
+      &.active,
+      &:focus-visible,
+      &.focus,
+      &:disabled,
+      &.disabled {
+        background: none;
+      }
+    }
+
+    &Text {
+      background: none;
+
+      &:hover,
+      &.hover,
+      &:active,
+      &.active,
+      &:focus-visible,
+      &.focus,
+      &:disabled,
+      &.disabled {
+        background: none;
+      }
+    }
+  }
+}

package/lib/components/Calendar/Calendar.d.ts

@@ -0,0 +1,17 @@
+import { FC } from 'react';
+import { ReactDatePickerProps } from 'react-datepicker';
+import { DataTestProp } from '../../../src';
+import { PortalContainer } from '../../utils/portal';
+export type CalendarSize = 'medium' | 'small';
+export type CalendarProps = {
+    containerClassName?: string;
+    date: Date | null;
+    inputLabel?: string;
+    inputClassName?: string;
+    onDateChange: ReactDatePickerProps['onChange'];
+    size?: CalendarSize;
+    container?: PortalContainer;
+    inPortal?: boolean;
+    dateFormat?: string;
+} & Omit<ReactDatePickerProps, 'value' | 'onChange' | 'dateFormat'> & DataTestProp;
+export declare const Calendar: FC<CalendarProps>;

package/lib/components/Calendar/Calendar.js

@@ -0,0 +1,38 @@
+import React, { useMemo } from 'react';
+import cn from 'classnames';
+import { createPortal } from 'react-dom';
+import DatePicker from 'react-datepicker';
+import { CalendarInput } from './components/CalendarInput';
+import { CalendarHeader } from './components/CalendarHeader';
+import { CalendarTime } from './components/CalendarTime';
+import { getPortalContainer } from '../../utils/portal';
+import styles from './Calendar.module.scss';
+const DATE_FORMAT = 'yyyy-MM-dd';
+const TIME_FORMAT = 'HH:mm';
+const CalendarPopperContainer = (container, inPortal) => ({ children }) => {
+    const content = (React.createElement("div", { className: styles.popper },
+        React.createElement("div", { "data-test": "date-picker-popper-container", className: "hz-date-picker-popper-container" }, children)));
+    if (inPortal) {
+        return content;
+    }
+    return container && children ? createPortal(content, container) : null;
+};
+export const Calendar = ({ calendarClassName, className, containerClassName, date, inputLabel, inputClassName, onDateChange, showTimeInput, size = 'medium', container = `body`, inPortal = false, dateFormat = DATE_FORMAT, timeFormat = TIME_FORMAT, 'data-test': dataTest = 'calendar', ...props }) => {
+    const PopperContainer = useMemo(() => CalendarPopperContainer(getPortalContainer(container), inPortal), [container, inPortal]);
+    return (React.createElement("div", { className: cn(styles.container, {
+            [styles.time]: showTimeInput,
+        }, containerClassName) },
+        React.createElement(DatePicker, { ...props, "data-test": dataTest, calendarClassName: cn(styles.calendar, calendarClassName), className: className, 
+            /*
+             * Note: The library instantiates the component using React.cloneElement
+             * Source: https://github.com/Hacker0x01/react-datepicker/blob/master/src/index.jsx#L926
+             */
+            customInput: React.createElement(CalendarInput, { "data-test": `${dataTest}-input`, label: inputLabel, textFieldSize: size, className: inputClassName }), customTimeInput: React.createElement(CalendarTime, { "data-test": `${dataTest}-time` }), dateFormat: showTimeInput ? `${dateFormat} ${timeFormat}` : dateFormat, onChange: onDateChange, popperContainer: PopperContainer, 
+            /*
+             * Note:
+             * 'renderCustomHeader' is the only child component override prop that is not instantiated
+             * via React.cloneElement. So at least we can utilise a typed React.Component over React.ReactNode here
+             */
+            renderCustomHeader: CalendarHeader, selected: date, timeFormat: timeFormat, showPopperArrow: false, showTimeInput: showTimeInput })));
+};
+//# sourceMappingURL=Calendar.js.map

package/lib/components/Calendar/Calendar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Calendar.js","sourceRoot":"","sources":["../../../src/components/Calendar/Calendar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAyB,OAAO,EAAE,MAAM,OAAO,CAAA;AAC7D,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AACxC,OAAO,UAAoC,MAAM,kBAAkB,CAAA;AAGnE,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAA;AAC1D,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAA;AAC5D,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAA;AACxD,OAAO,EAAE,kBAAkB,EAAmB,MAAM,oBAAoB,CAAA;AAExE,OAAO,MAAM,MAAM,wBAAwB,CAAA;AAE3C,MAAM,WAAW,GAAG,YAAY,CAAA;AAChC,MAAM,WAAW,GAAG,OAAO,CAAA;AAE3B,MAAM,uBAAuB,GAC3B,CAAC,SAA6B,EAAE,QAAiB,EAAM,EAAE,CACzD,CAAC,EAAE,QAAQ,EAA8B,EAAE,EAAE;IAC3C,MAAM,OAAO,GAAG,CACd,6BAAK,SAAS,EAAE,MAAM,CAAC,MAAM;QAC3B,0CAAe,8BAA8B,EAAC,SAAS,EAAC,iCAAiC,IACtF,QAAQ,CACL,CACF,CACP,CAAA;IAED,IAAI,QAAQ,EAAE,CAAC;QACb,OAAO,OAAO,CAAA;IAChB,CAAC;IAED,OAAO,SAAS,IAAI,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,IAAI,CAAA;AACxE,CAAC,CAAA;AAiBH,MAAM,CAAC,MAAM,QAAQ,GAAsB,CAAC,EAC1C,iBAAiB,EACjB,SAAS,EACT,kBAAkB,EAClB,IAAI,EACJ,UAAU,EACV,cAAc,EACd,YAAY,EACZ,aAAa,EACb,IAAI,GAAG,QAAQ,EACf,SAAS,GAAG,MAAM,EAClB,QAAQ,GAAG,KAAK,EAChB,UAAU,GAAG,WAAW,EACxB,UAAU,GAAG,WAAW,EACxB,WAAW,EAAE,QAAQ,GAAG,UAAU,EAClC,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,eAAe,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,uBAAuB,CAAC,kBAAkB,CAAC,SAAS,CAAC,EAAE,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAA;IAE9H,OAAO,CACL,6BACE,SAAS,EAAE,EAAE,CACX,MAAM,CAAC,SAAS,EAChB;YACE,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,aAAa;SAC7B,EACD,kBAAkB,CACnB;QAED,oBAAC,UAAU,OACL,KAAK,eACE,QAAQ,EACnB,iBAAiB,EAAE,EAAE,CAAC,MAAM,CAAC,QAAQ,EAAE,iBAAiB,CAAC,EACzD,SAAS,EAAE,SAAS;YACpB;;;eAGG;YACH,WAAW,EAAE,oBAAC,aAAa,iBAAY,GAAG,QAAQ,QAAQ,EAAE,KAAK,EAAE,UAAU,EAAE,aAAa,EAAE,IAAI,EAAE,SAAS,EAAE,cAAc,GAAI,EACjI,eAAe,EAAE,oBAAC,YAAY,iBAAY,GAAG,QAAQ,OAAO,GAAI,EAChE,UAAU,EAAE,aAAa,CAAC,CAAC,CAAC,GAAG,UAAU,IAAI,UAAU,EAAE,CAAC,CAAC,CAAC,UAAU,EACtE,QAAQ,EAAE,YAAY,EACtB,eAAe,EAAE,eAAe;YAChC;;;;eAIG;YACH,kBAAkB,EAAE,cAAc,EAClC,QAAQ,EAAE,IAAI,EACd,UAAU,EAAE,UAAU,EACtB,eAAe,EAAE,KAAK,EACtB,aAAa,EAAE,aAAa,GAC5B,CACE,CACP,CAAA;AACH,CAAC,CAAA"}