@spaced-out/ui-design-system 0.4.12 → 0.4.13-beta.0

package/lib/components/PromptChip/PromptChip.stories.js

@@ -0,0 +1,242 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports._WithRightSlot = exports._WithInfoIcon = exports._Default = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _typography = require("../../types/typography");
+var _Button = require("../Button");
+var _PromptChip = require("./PromptChip");
+var _PromptChipStoriesModule = _interopRequireDefault(require("./PromptChip.stories.module.css"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const typeOptions = [...Object.values(_PromptChip.PROMPT_CHIP_TYPE)];
+const colorOptions = [...Object.values(_typography.TEXT_COLORS)];
+var _default = exports.default = {
+  tags: ['autodocs'],
+  title: 'AI Prompt Components/Prompt Chip',
+  component: _PromptChip.PromptChip,
+  argTypes: {
+    type: {
+      options: typeOptions,
+      description: 'Type of PromptChip. It will have different Border and background color for different type',
+      control: {
+        type: 'select'
+      },
+      table: {
+        type: {
+          summary: 'enum'
+        },
+        defaultValue: {
+          summary: _PromptChip.PROMPT_CHIP_TYPE.primary
+        }
+      }
+    },
+    onClick: {
+      description: '**onClick** handler that is applied to the wrapper div element',
+      action: 'clicked',
+      table: {
+        type: {
+          summary: '(SyntheticEvent<HTMLElement>) => mixed'
+        }
+      }
+    },
+    iconType: {
+      description: 'Type of Left Icon. Type represents 4 unique icon styles :- Solid, Regular, Duotone and Brands',
+      options: ['regular', 'solid', 'duotone', 'brands'],
+      control: {
+        type: 'select'
+      },
+      table: {
+        type: {
+          summary: 'string'
+        },
+        defaultValue: {
+          summary: 'solid'
+        }
+      }
+    },
+    iconName: {
+      description: 'Icon Name represents name of icon as supported by fontawesome',
+      type: {
+        required: true
+      },
+      table: {
+        type: {
+          summary: 'string'
+        },
+        defaultValue: {
+          summary: 'lightbulb'
+        }
+      }
+    },
+    iconColor: {
+      description: 'Same set of colors as supported in text',
+      options: colorOptions,
+      control: {
+        type: 'select'
+      },
+      table: {
+        type: {
+          summary: 'string'
+        },
+        defaultValue: {
+          summary: 'clickable'
+        }
+      }
+    },
+    classNames: {
+      description: 'External classNames to be applied',
+      control: {
+        type: 'object'
+      },
+      table: {
+        type: {
+          summary: '{wrapper?: string, icon?: string, children?: string, container?: string}'
+        }
+      }
+    },
+    dismissable: {
+      description: 'Close Icon will appear in right side in case it is true',
+      name: 'dismissable',
+      options: [false, true],
+      control: 'boolean',
+      table: {
+        type: {
+          summary: 'boolean'
+        },
+        defaultValue: {
+          summary: false
+        }
+      }
+    },
+    onDismiss: {
+      description: '**onDismiss** handler that is applied to close icon of prompt chip.',
+      action: 'onDismiss',
+      table: {
+        type: {
+          summary: '(SyntheticEvent<HTMLElement>) => mixed'
+        }
+      }
+    },
+    selfDismiss: {
+      description: `This prop is valid only in case dismissable is true.
+      It handles whether the dismissal should be handled by the component or it will just pass callback onclick of closeIcon and dismissal will be handled externally`,
+      name: 'selfDismiss',
+      options: [false, true],
+      control: 'boolean',
+      table: {
+        type: {
+          summary: 'boolean'
+        },
+        defaultValue: {
+          summary: false
+        }
+      }
+    },
+    showInfoIcon: {
+      description: `Info icon will appear on the right in case it is true`,
+      name: 'showInfoIcon',
+      options: [false, true],
+      control: 'boolean',
+      table: {
+        type: {
+          summary: 'boolean'
+        },
+        defaultValue: {
+          summary: false
+        }
+      }
+    },
+    infoIconTooltip: {
+      description: `Tooltip props to use on the info icon. This prop is valid only in case showInfoIcon is true.`,
+      name: 'infoIconTooltip',
+      control: {
+        type: 'object'
+      },
+      table: {
+        type: {
+          summary: 'TooltipProps'
+        }
+      }
+    },
+    children: {
+      description: 'The content of the PromptChip',
+      table: {
+        type: {
+          summary: 'React.Component | string'
+        }
+      }
+    },
+    rightSlot: {
+      description: 'The content on the right side of PromptChip',
+      table: {
+        type: {
+          summary: 'React.Component | string'
+        }
+      }
+    }
+  },
+  parameters: {
+    docs: {
+      subtitle: 'Generates a Prompt Chip component',
+      description: {
+        component: `
+\`\`\`jsx
+import { PromptChip } from "@spaced-out/ui-design-system/lib/components/PromptChip";
+\`\`\`
+**PromptChip** 
+
+Use this component to easily display a set of interactive prompt chips that users can select by clicking on them. Each chip represents a prompt or option, allowing users to make a quick selection in a compact and visually appealing way. 
+
+**Usage:**
+  
+\`\`\`jsx
+<PromptChip
+  children='Would you like to schedule a meeting with the candidate?'
+/>
+\`\`\`
+        `
+      }
+    },
+    storySource: {
+      componentPath: '/src/components/PromptChip/PromptChip.jsx'
+    }
+  }
+};
+const _Default = args => /*#__PURE__*/React.createElement("div", {
+  className: _PromptChipStoriesModule.default.storyContainer
+}, /*#__PURE__*/React.createElement(_PromptChip.PromptChip, args));
+exports._Default = _Default;
+_Default.args = {
+  children: 'Would you like to schedule a meeting with the candidate?'
+};
+const _WithRightSlot = args => /*#__PURE__*/React.createElement("div", {
+  className: _PromptChipStoriesModule.default.storyContainer
+}, /*#__PURE__*/React.createElement(_PromptChip.PromptChip, args));
+exports._WithRightSlot = _WithRightSlot;
+_WithRightSlot.args = {
+  children: 'The quick brown fox jumps over the lazy dog',
+  type: 'secondary',
+  onClick: null,
+  rightSlot: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_Button.Button, {
+    type: "secondary",
+    size: "small",
+    children: "Secondary"
+  }), /*#__PURE__*/React.createElement(_Button.Button, {
+    size: "small",
+    children: "Primary"
+  }))
+};
+const _WithInfoIcon = args => /*#__PURE__*/React.createElement("div", {
+  className: _PromptChipStoriesModule.default.storyContainer
+}, /*#__PURE__*/React.createElement(_PromptChip.PromptChip, args));
+exports._WithInfoIcon = _WithInfoIcon;
+_WithInfoIcon.args = {
+  children: 'The quick brown fox jumps over the lazy dog',
+  infoIconTooltip: {
+    title: 'This is info icon'
+  },
+  showInfoIcon: true
+};

package/lib/components/PromptChip/PromptChip.stories.tsx

@@ -0,0 +1,202 @@
+import * as React from 'react';
+
+import {TEXT_COLORS} from '../../types/typography';
+import {Button} from '../Button';
+
+import type {PromptChipProps} from './PromptChip';
+import {PROMPT_CHIP_TYPE, PromptChip} from './PromptChip';
+
+import css from './PromptChip.stories.module.css';
+
+
+const typeOptions: Array<unknown> = [...Object.values(PROMPT_CHIP_TYPE)];
+const colorOptions: Array<unknown> = [...Object.values(TEXT_COLORS)];
+
+export default {
+  tags: ['autodocs'],
+  title: 'AI Prompt Components/Prompt Chip',
+  component: PromptChip,
+  argTypes: {
+    type: {
+      options: typeOptions,
+      description:
+        'Type of PromptChip. It will have different Border and background color for different type',
+      control: {
+        type: 'select',
+      },
+      table: {
+        type: {summary: 'enum'},
+        defaultValue: {summary: PROMPT_CHIP_TYPE.primary},
+      },
+    },
+    onClick: {
+      description:
+        '**onClick** handler that is applied to the wrapper div element',
+      action: 'clicked',
+      table: {
+        type: {summary: '(SyntheticEvent<HTMLElement>) => mixed'},
+      },
+    },
+    iconType: {
+      description:
+        'Type of Left Icon. Type represents 4 unique icon styles :- Solid, Regular, Duotone and Brands',
+      options: ['regular', 'solid', 'duotone', 'brands'],
+      control: {type: 'select'},
+      table: {
+        type: {summary: 'string'},
+        defaultValue: {summary: 'solid'},
+      },
+    },
+    iconName: {
+      description:
+        'Icon Name represents name of icon as supported by fontawesome',
+      type: {required: true},
+      table: {
+        type: {summary: 'string'},
+        defaultValue: {summary: 'lightbulb'},
+      },
+    },
+    iconColor: {
+      description: 'Same set of colors as supported in text',
+      options: colorOptions,
+      control: {type: 'select'},
+      table: {
+        type: {summary: 'string'},
+        defaultValue: {summary: 'clickable'},
+      },
+    },
+    classNames: {
+      description: 'External classNames to be applied',
+      control: {
+        type: 'object',
+      },
+      table: {
+        type: {
+          summary:
+            '{wrapper?: string, icon?: string, children?: string, container?: string}',
+        },
+      },
+    },
+    dismissable: {
+      description: 'Close Icon will appear in right side in case it is true',
+      name: 'dismissable',
+      options: [false, true],
+      control: 'boolean',
+      table: {
+        type: {summary: 'boolean'},
+        defaultValue: {summary: false},
+      },
+    },
+    onDismiss: {
+      description:
+        '**onDismiss** handler that is applied to close icon of prompt chip.',
+      action: 'onDismiss',
+      table: {
+        type: {summary: '(SyntheticEvent<HTMLElement>) => mixed'},
+      },
+    },
+    selfDismiss: {
+      description: `This prop is valid only in case dismissable is true.
+      It handles whether the dismissal should be handled by the component or it will just pass callback onclick of closeIcon and dismissal will be handled externally`,
+      name: 'selfDismiss',
+      options: [false, true],
+      control: 'boolean',
+      table: {
+        type: {summary: 'boolean'},
+        defaultValue: {summary: false},
+      },
+    },
+    showInfoIcon: {
+      description: `Info icon will appear on the right in case it is true`,
+      name: 'showInfoIcon',
+      options: [false, true],
+      control: 'boolean',
+      table: {
+        type: {summary: 'boolean'},
+        defaultValue: {summary: false},
+      },
+    },
+    infoIconTooltip: {
+      description: `Tooltip props to use on the info icon. This prop is valid only in case showInfoIcon is true.`,
+      name: 'infoIconTooltip',
+      control: {
+        type: 'object',
+      },
+      table: {
+        type: {summary: 'TooltipProps'},
+      },
+    },
+    children: {
+      description: 'The content of the PromptChip',
+      table: {
+        type: {summary: 'React.Component | string'},
+      },
+    },
+    rightSlot: {
+      description: 'The content on the right side of PromptChip',
+      table: {
+        type: {summary: 'React.Component | string'},
+      },
+    },
+  },
+  parameters: {
+    docs: {
+      subtitle: 'Generates a Prompt Chip component',
+      description: {
+        component: `
+\`\`\`jsx
+import { PromptChip } from "@spaced-out/ui-design-system/lib/components/PromptChip";
+\`\`\`
+**PromptChip** 
+
+Use this component to easily display a set of interactive prompt chips that users can select by clicking on them. Each chip represents a prompt or option, allowing users to make a quick selection in a compact and visually appealing way. 
+
+**Usage:**
+  
+\`\`\`jsx
+<PromptChip
+  children='Would you like to schedule a meeting with the candidate?'
+/>
+\`\`\`
+        `,
+      },
+    },
+    storySource: {
+      componentPath: '/src/components/PromptChip/PromptChip.jsx',
+    },
+  },
+};
+
+export const _Default = (args: PromptChipProps) => (<div className={css.storyContainer}>
+  <PromptChip {...args} />
+</div>);
+
+_Default.args = {
+  children: 'Would you like to schedule a meeting with the candidate?',
+};
+
+export const _WithRightSlot = (args: PromptChipProps) => (<div className={css.storyContainer}>
+  <PromptChip {...args} />
+</div>);
+
+_WithRightSlot.args = {
+  children: 'The quick brown fox jumps over the lazy dog',
+  type: 'secondary',
+  onClick: null,
+  rightSlot: ((<>
+    <Button type="secondary" size="small" children="Secondary" />
+    <Button size="small" children="Primary" />
+  </>) as React.ReactElement<React.ComponentProps<React.ComponentType>>),
+};
+
+export const _WithInfoIcon = (args: PromptChipProps) => (<div className={css.storyContainer}>
+  <PromptChip {...args} />
+</div>);
+
+_WithInfoIcon.args = {
+  children: 'The quick brown fox jumps over the lazy dog',
+  infoIconTooltip: {
+    title: 'This is info icon',
+  },
+  showInfoIcon: true,
+};

package/lib/components/PromptChip/PromptChip.tsx

@@ -0,0 +1,166 @@
+import {Flow} from 'flow-to-typescript-codemod';
+
+import * as React from 'react';
+
+import type {ColorTypes} from '../../types/typography';
+import {TEXT_COLORS} from '../../types/typography';
+import {classify} from '../../utils/classify';
+import {ConditionalWrapper} from '../ConditionalWrapper';
+import type {IconType} from '../Icon';
+import {CloseIcon, Icon, ICON_SIZE, ICON_TYPE} from '../Icon';
+import type {BaseTooltipProps} from '../Tooltip';
+import {Tooltip} from '../Tooltip';
+
+import css from './PromptChip.module.css';
+
+
+type ClassNames = Readonly<{
+  icon?: string;
+  wrapper?: string;
+  children?: string;
+  container?: string;
+}>;
+
+export const PROMPT_CHIP_TYPE = Object.freeze({
+  primary: 'primary',
+  secondary: 'secondary',
+});
+
+export type PromptChipType = typeof PROMPT_CHIP_TYPE[keyof typeof PROMPT_CHIP_TYPE];
+export type PromptChipProps = ({
+  classNames?: ClassNames;
+} & ({
+  onDismiss?: ((arg1: React.SyntheticEvent<HTMLElement>) => unknown) | null | undefined;
+  dismissable: true;
+  selfDismiss?: boolean;
+} | {
+  dismissable?: false;
+}) & {
+  type?: PromptChipType;
+  onClick?: ((arg1: React.SyntheticEvent<HTMLElement>) => unknown) | null | undefined;
+  iconName?: string;
+  iconType?: IconType;
+  children?: React.ReactNode;
+  iconColor?: ColorTypes;
+  rightSlot?: React.ReactNode;
+  showInfoIcon?: boolean;
+  infoIconTooltip?: BaseTooltipProps;
+});
+
+export const PromptChip: Flow.AbstractComponent<PromptChipProps, HTMLDivElement> = React.forwardRef<HTMLDivElement, PromptChipProps>((props: PromptChipProps, ref) => {
+  const {
+    type = PROMPT_CHIP_TYPE.primary,
+    onClick,
+    iconType = ICON_TYPE.solid,
+    iconName = 'lightbulb',
+    children,
+    iconColor,
+    rightSlot,
+// @ts-ignore - TS2339 - Property 'onDismiss' does not exist on type 'PromptChipProps'.
+    onDismiss,
+    classNames,
+    dismissable,
+// @ts-ignore - TS2339 - Property 'selfDismiss' does not exist on type 'PromptChipProps'.
+    selfDismiss,
+    showInfoIcon,
+    infoIconTooltip,
+  } = props;
+  const [dismissed, setDismissed] = React.useState(false);
+  const closeClickHandler = (e: React.SyntheticEvent<HTMLElement>) => {
+    e.stopPropagation();
+    onDismiss?.(e);
+    selfDismiss && setDismissed(true);
+  };
+
+  return (
+    <>
+      {!dismissed && (
+        <div
+          ref={ref}
+          data-testid="Prompt-Chip"
+          className={classify(
+            css.promptChipWrapper,
+            {
+              [css.primary]: type === PROMPT_CHIP_TYPE.primary,
+              [css.secondary]: type === PROMPT_CHIP_TYPE.secondary,
+            },
+            classNames?.wrapper,
+          )}
+          onClick={(event) => {
+            onClick?.(event);
+          }}
+          tabIndex={onClick ? 0 : undefined}
+          role="button"
+        >
+          <div
+            className={classify(
+              css.promptChipContainer,
+              {
+                [css.promptChipContainerHover]: !!onClick,
+              },
+              classNames?.container,
+            )}
+          >
+            <div className={css.leftSection}>
+{ /* @ts-ignore - TS2769 - No overload matches this call. */}
+              <Icon
+                size={ICON_SIZE.small}
+                name={iconName}
+                type={iconType}
+                color={iconColor}
+                className={classify(
+                  {
+                    [css.chipIconDefaultColor]: !iconColor,
+                  },
+                  classNames?.icon,
+                )}
+              />
+              {!!children && (
+                <div
+                  className={classify(
+                    css.childrenWrapper,
+                    classNames?.children,
+                  )}
+                >
+                  {children}
+                </div>
+              )}
+            </div>
+            <div className={css.rightSection}>
+              {rightSlot ? rightSlot : null}
+              {!!showInfoIcon && (
+                <ConditionalWrapper
+                  condition={
+                    infoIconTooltip &&
+                    typeof infoIconTooltip === 'object' &&
+                    Object.keys(infoIconTooltip).length > 0
+                  }
+                  wrapper={(children) => (
+                    <Tooltip {...infoIconTooltip}>{children}</Tooltip>
+                  )}
+                >
+                  <Icon
+// @ts-ignore - TS2769 - No overload matches this call.
+                    size={ICON_SIZE.small}
+                    name="info-circle"
+                    color={TEXT_COLORS.primary}
+                    className={classNames?.icon}
+                  />
+                </ConditionalWrapper>
+              )}
+              {!!dismissable && (
+                <CloseIcon
+// @ts-ignore - TS2769 - No overload matches this call.
+                  size={ICON_SIZE.small}
+                  onClick={closeClickHandler}
+                  ariaLabel="Dismiss"
+                  className={css.dismissIcon}
+                />
+              )}
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+});

package/lib/components/PromptChip/index.d.ts

@@ -0,0 +1,2 @@
+export * from './PromptChip';
+//# sourceMappingURL=index.d.ts.map

package/lib/components/PromptChip/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/PromptChip/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}

package/lib/components/PromptChip/index.ts

@@ -0,0 +1 @@
+export * from './PromptChip';

package/lib/components/PromptInput/PromptInput.d.ts

@@ -0,0 +1,38 @@
+import { Flow } from 'flow-to-typescript-codemod';
+import * as React from 'react';
+import type { IconType } from '../Icon';
+type ClassNames = Readonly<{
+    wrapper?: string;
+    inputBox?: string;
+    textarea?: string;
+    buttonWrapper?: string;
+    buttonIcon?: string;
+    buttonText?: string;
+}>;
+export type PromptInputProps = {
+    value?: string;
+    onInputChange?: (evt: React.ChangeEvent<HTMLInputElement>, isEnter?: boolean) => unknown;
+    onInputFocus?: (e: React.ChangeEvent<HTMLInputElement>) => unknown;
+    onInputBlur?: (e: React.ChangeEvent<HTMLInputElement>) => unknown;
+    onInputKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => unknown;
+    inputName?: string;
+    inputDisabled?: boolean;
+    inputPlaceholder?: string;
+    inputLocked?: boolean;
+    inputError?: boolean;
+    inputErrorText?: string;
+    helperContent?: React.ReactNode;
+    textCountLimit?: number;
+    classNames?: ClassNames;
+    withPadding?: boolean;
+    buttonText?: string;
+    buttonDisabled?: boolean;
+    onButtonClick?: ((arg1: React.SyntheticEvent<HTMLElement>) => unknown) | null | undefined;
+    buttonAriaLabel?: string;
+    isButtonLoading?: boolean;
+    buttonIconLeftName?: string;
+    buttonIconLeftType?: IconType;
+};
+export declare const PromptInput: Flow.AbstractComponent<PromptInputProps, HTMLDivElement>;
+export {};
+//# sourceMappingURL=PromptInput.d.ts.map

package/lib/components/PromptInput/PromptInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PromptInput.d.ts","sourceRoot":"","sources":["../../../src/components/PromptInput/PromptInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAEhD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AAiBtC,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC,CAAC;AAEH,MAAM,MAAM,gBAAgB,GAAG;IAE7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,EAAE,OAAO,CAAC,EAAE,OAAO,KAAK,OAAO,CAAC;IACzF,YAAY,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,OAAO,CAAC;IACnE,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,OAAO,CAAC;IAClE,cAAc,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,KAAK,OAAO,CAAC;IACvE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,aAAa,CAAC,EAAE,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,KAAK,OAAO,CAAC,GAAG,IAAI,GAAG,SAAS,CAAC;IAC1F,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,kBAAkB,CAAC,EAAE,QAAQ,CAAC;CAC/B,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,IAAI,CAAC,iBAAiB,CAAC,gBAAgB,EAAE,cAAc,CAgI/E,CAAC"}