@popsure/dirty-swan 0.54.2 → 0.54.3

package/src/lib/components/table/components/TableCell/CTACell/CTACell.tsx

@@ -0,0 +1,40 @@
+import classNames from 'classnames';
+import { ReactNode } from 'react';
+
+export type CTACellProps = {
+  content?: ReactNode;
+  subContent?: ReactNode;
+  grey?: boolean;
+  narrow?: boolean;
+  href: string;
+};
+import styles from './CTACell.module.scss';
+
+export const CTACell = ({
+  content,
+  subContent,
+  grey,
+  narrow,
+  href,
+}: CTACellProps) => {
+  return (
+    <div className="wmn3 ta-center">
+      <p className="p-h3">
+        {content}
+        {subContent && <span className="tc-purple-500"> {subContent}</span>}
+      </p>
+      <a
+        className={classNames('mt16', {
+          'p-btn--primary': !grey,
+          'p-btn--secondary-grey': grey,
+          [styles.narrow]: narrow,
+        })}
+        href={href}
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        Get covered
+      </a>
+    </div>
+  );
+};

package/src/lib/components/table/components/TableCell/TableCell.module.scss

@@ -1,17 +1,6 @@
 @use '../../../../scss/public/colors' as *;
 @use '../../../../scss/public/grid' as *;
 
-.button {
-  min-height: initial;
-  height: initial;
-  width: initial;
-  padding: 0;
-}
-
-.icon {
-  margin: 2px;
-}
-
 .th {
   vertical-align: middle;
   scroll-snap-align: end;
@@ -23,15 +12,6 @@
   }
 }
 
-.thRow {
-  position: sticky;
-  top: 0;
-}
-
-.thCol {
-  text-align: left;
-}
-
 .fixedCell {
   position: sticky;
   left: 0;
@@ -47,26 +27,3 @@
     background-color: $ds-grey-200;
   }
 }
-
-.topLeftCell {
-  position: relative;
-  display: none;
-
-  &:after {
-    content: '';
-    display: block;
-    position: absolute;
-    top: calc(
-      50% + 16px
-    ); // Display bottom border at the same distance regardless of cell height
-
-    height: 4px;
-    width: 100%;
-    max-width: 140px;
-    background-color: $ds-primary-500;
-  }
-
-  @include p-size-tablet {
-    display: flex;
-  }
-}

package/src/lib/components/table/components/TableCell/TableCell.test.tsx

@@ -1,25 +1,39 @@
 import { render, screen } from '../../../../util/testUtils';
-import { TableCell } from './TableCell';
+import { TableCell, TableCellProps } from './TableCell';
 
 const openModal = jest.fn();
 
+const setup = ({ isNavigation, ...rest }: TableCellProps = {}) => render(
+  isNavigation 
+    ? <TableCell {...rest} isNavigation />
+    : (
+      <table>
+        <tbody>
+          <tr>
+            <TableCell {...rest} />
+          </tr>
+        </tbody>
+      </table>  
+    )
+  );
+
 describe('TableCell', () => {
   it('renders the component with boolean true', () => {
-    render(<TableCell checkmarkValue={true} />);
+    setup({ checkmarkValue: true });
 
     expect(screen.getByTitle('Yes')).toBeInTheDocument();
     expect(screen.getByTestId('table-cell-boolean-yes')).toBeInTheDocument();
   });
 
   it('renders the component with boolean false', () => {
-    render(<TableCell checkmarkValue={false} />);
+    setup({ checkmarkValue: false });
 
     expect(screen.getByTitle('No')).toBeInTheDocument();
     expect(screen.getByTestId('table-cell-boolean-no')).toBeInTheDocument();
   });
 
   it('renders the component without boolean', () => {
-    render(<TableCell />);
+    setup();
 
     expect(screen.queryByTitle('Yes')).not.toBeInTheDocument();
     expect(screen.queryByTitle('No')).not.toBeInTheDocument();
@@ -32,42 +46,40 @@ describe('TableCell', () => {
   });
 
   it('renders the component with rating', () => {
-    render(<TableCell rating={{ type: 'star', value: 2 }} />);
+    setup({ rating: { type: 'star', value: 2 } });
 
     expect(screen.getByTitle('2 out of 3')).toBeInTheDocument();
   });
 
   it('renders the component without rating', () => {
-    render(<TableCell />);
+    setup();
 
     expect(screen.queryByTestId('table-cell-rating')).not.toBeInTheDocument();
   });
 
   it('renders the component with text', () => {
-    render(<TableCell content="Sample text" />);
+    setup({ content: "Sample text" });
 
     expect(screen.getByText('Sample text')).toBeInTheDocument();
   });
 
   it('renders the component without text', () => {
-    render(<TableCell />);
+    setup();
 
     expect(screen.queryByTestId('table-cell-text')).not.toBeInTheDocument();
   });
 
   it('renders the component without info', () => {
-    render(<TableCell />);
+    setup();
 
     expect(screen.queryByText('View more info')).not.toBeInTheDocument();
   });
 
   it('calls openModal when info button is clicked', () => {
-    render(
-      <TableCell modalContent="Additional information" openModal={openModal} />
-    );
+    setup({ modalContent: "Additional information", openModal });
 
     // Click info button
-    screen.getByText('View more info').click();
+    screen.getByTestId('ds-table-info-button').click();
 
     // Assert openModal is called with info prop
     expect(openModal).toHaveBeenCalledWith('Additional information');

package/src/lib/components/table/components/TableCell/TableCell.tsx

@@ -1,50 +1,26 @@
-import { ReactNode } from 'react';
-import { Button } from '../../../button';
-import {
-  CheckIcon,
-  InfoIcon,
-  StarFilledIcon,
-  XIcon,
-  ZapFilledIcon,
-} from '../../../icon';
 import classNames from 'classnames';
 
 import styles from './TableCell.module.scss';
+import { BaseCell, BaseCellProps } from './BaseCell/BaseCell';
+import { TableCellData } from '../../types';
+import { CTACell } from './CTACell/CTACell';
+import { ButtonCell } from './ButtonCell/ButtonCell';
 
-interface BaseTableCellProps {
-  align?: 'center' | 'left' | 'right';
-  checkmarkValue?: boolean;
-  content?: ReactNode;
-  modalContent?: ReactNode;
-  openModal?: (modalContent: ReactNode) => void;
-  subContent?: ReactNode;
-  rating?: {
-    value: number;
-    type: 'zap' | 'star';
-  };
-}
-
-interface PositionalTableCellProps {
+type PositionalTableCellProps = {
   isHeader?: boolean;
   isFirstCellInRow?: boolean;
   isTopLeftCell?: boolean;
   isNavigation?: boolean;
-}
+};
 
-export type TableCellProps = BaseTableCellProps & PositionalTableCellProps;
+export type TableCellProps = TableCellData & PositionalTableCellProps;
 
 const TableCell = ({
-  align = 'center',
-  checkmarkValue,
-  content = '',
   isFirstCellInRow = false,
   isHeader = false,
   isNavigation = false,
   isTopLeftCell = false,
-  modalContent = '',
-  openModal,
-  rating,
-  subContent = '',
+  ...cellProps
 }: TableCellProps) => {
   // prettier-ignore
   const Tag = isNavigation
@@ -60,15 +36,6 @@ const TableCell = ({
     scope: thScope,
   };
 
-  const alignClassName = {
-    center: 'ta-center jc-center',
-    left: 'ta-left jc-start',
-    right: 'ta-right',
-  }[align];
-
-  const validRatingValues: number[] = [1, 2, 3];
-  const SelectedIcon = rating?.type === 'zap' ? ZapFilledIcon : StarFilledIcon;
-
   return (
     <Tag
       {...scope}
@@ -78,87 +45,14 @@ const TableCell = ({
         pl32: isFirstCellInRow,
       })}
     >
-      <div className="d-flex fd-column gap8">
-        <div className={classNames('d-flex gap8 ai-center', alignClassName)}>
-          {rating?.value && (
-            <span
-              data-testid="table-cell-rating"
-              title={`${rating?.value} out of 3`}
-            >
-              {validRatingValues.map((value) => (
-                <SelectedIcon
-                  aria-hidden="true"
-                  key={value}
-                  color={value <= rating?.value ? 'primary-500' : 'grey-400'}
-                  className={styles.icon}
-                />
-              ))}
-            </span>
-          )}
-
-          {checkmarkValue !== undefined && (
-            <span title={checkmarkValue ? 'Yes' : 'No'}>
-              {checkmarkValue ? (
-                <CheckIcon
-                  data-testid="table-cell-boolean-yes"
-                  size={24}
-                  aria-hidden
-                  color="primary-500"
-                />
-              ) : (
-                <XIcon
-                  data-testid="table-cell-boolean-no"
-                  size={24}
-                  aria-hidden
-                  color="grey-400"
-                />
-              )}
-            </span>
-          )}
-
-          {content && !isTopLeftCell && (
-            <div className="p-p" data-testid="table-cell-content">
-              {content}
-            </div>
-          )}
-
-          {content && isTopLeftCell && (
-            <div
-              aria-hidden
-              className={classNames(
-                'tc-grey-800 p-h2 p--serif',
-                styles.topLeftCell
-              )}
-            >
-              {content}
-            </div>
-          )}
-
-          {modalContent && openModal && (
-            <Button
-              className={styles.button}
-              hideLabel
-              leftIcon={<InfoIcon size={20} />}
-              onClick={() => openModal(modalContent)}
-              type="button"
-              variant="textColor"
-            >
-              View more info
-            </Button>
-          )}
-        </div>
-
-        {subContent && (
-          <div
-            className={classNames(
-              'd-flex p-p--small tc-grey-500',
-              alignClassName
-            )}
-          >
-            {subContent}
-          </div>
-        )}
-      </div>
+      {!cellProps.type && (
+        <BaseCell
+          {...cellProps}
+          contentFontVariant={isTopLeftCell ? 'BIG_WITH_UNDERLINE' : 'NORMAL'}
+        />
+      )}
+      {cellProps.type === 'CTA' && <CTACell {...cellProps} />}
+      {cellProps.type === 'BUTTON' && <ButtonCell {...cellProps} />}
     </Tag>
   );
 };

package/src/lib/components/table/components/TableContents/TableContents.test.tsx

@@ -1,7 +1,7 @@
 import { render, screen } from '../../../../util/testUtils';
-import { TableContents, TableSectionProps } from './TableContents';
+import { TableContents, TableContentsProps } from './TableContents';
 
-const mockData: TableSectionProps['tableData'] = [
+const mockData: TableContentsProps['tableData'] = [
   {
     rows: [
       [{ content: 'Item 1.1.1' }, { content: 'Item 1.1.2' }],

package/src/lib/components/table/components/TableSection/TableSection.test.tsx

@@ -1,7 +1,7 @@
 import { render, screen } from '../../../../util/testUtils';
-import { TableSection, TableContentProps } from './TableSection';
+import { TableSection, TableSectionProps } from './TableSection';
 
-const tableCellRows: TableContentProps['tableCellRows'] = [
+const tableCellRows: TableSectionProps['tableCellRows'] = [
   [{ content: 'Cell 1.1' }, { content: 'Cell 1.2' }, { content: 'Cell 1.3' }],
   [{ content: 'Cell 2.1' }, { content: 'Cell 2.2' }, { content: 'Cell 2.3' }],
 ];
@@ -10,7 +10,7 @@ const mockTitle = 'Test Table';
 
 const mockOpenModal = jest.fn();
 
-const defaultProps: TableContentProps = {
+const defaultProps: TableSectionProps = {
   tableCellRows,
   title: mockTitle,
   openModal: mockOpenModal,

package/src/lib/components/table/components/TableSection/TableSection.tsx

@@ -2,8 +2,9 @@ import classNames from 'classnames';
 
 import styles from './TableSection.module.scss';
 import { TableCell, TableCellProps } from '../TableCell/TableCell';
-import { ReactNode, useCallback } from 'react';
+import React, { ReactNode, useCallback } from 'react';
 import { ModalData, ModalFunction, TableCellRowData } from '../../types';
+import { Alignment } from '../TableCell/BaseCell/BaseCell';
 
 export interface TableSectionProps {
   className?: string;
@@ -53,21 +54,35 @@ const TableSection = ({
           <tr>
             {headerRow.map((tableCellProps, cellIndex) => {
               const isFirstCellInRow = cellIndex === 0;
+
+              const isBaseCell = !tableCellProps.type;
+
+              let openModal;
+              let align: Alignment = 'left';
+
+              if (isBaseCell) {
+                openModal = (body: ReactNode) =>
+                  handleOpenModal({
+                    cellIndex,
+                    body,
+                    title: tableCellProps?.content,
+                  });
+                align = isFirstCellInRow ? 'left' : 'center';
+              }
+
               return (
                 <TableCell
                   key={cellIndex}
                   isHeader
                   isFirstCellInRow={isFirstCellInRow}
                   isTopLeftCell={isFirstCellInRow}
-                  align={isFirstCellInRow ? 'left' : 'center'}
-                  openModal={(body) =>
-                    handleOpenModal({
-                      cellIndex,
-                      body,
-                      title: tableCellProps?.content,
-                    })
-                  }
                   {...tableCellProps}
+                  {...(isBaseCell
+                    ? {
+                        openModal,
+                        align,
+                      }
+                    : {})}
                 />
               );
             })}
@@ -95,13 +110,25 @@ const TableSection = ({
                         : undefined,
                     });
 
+                  let openModal;
+                  let align: Alignment = 'left';
+
+                  const isBaseCell = !tableCellProps.type;
+
+                  if (isBaseCell) {
+                    openModal = onCelInfoClick;
+                    align = isFirstCellInRow ? 'left' : 'center';
+                  }
+
                   return (
                     <TableCell
-                      align={
-                        isFirstCellInRow && !isSingleCell ? 'left' : 'center'
-                      }
+                      {...(isBaseCell
+                        ? {
+                            openModal,
+                            align,
+                          }
+                        : {})}
                       isFirstCellInRow={isFirstCellInRow}
-                      openModal={onCelInfoClick}
                       key={key}
                       {...tableCellProps}
                     />

package/src/lib/components/table/types.ts

@@ -1,5 +1,12 @@
 import { ReactNode } from 'react';
-import type { TableCellProps } from './components/TableCell/TableCell';
+import { BaseCellProps } from './components/TableCell/BaseCell/BaseCell';
+import { CTACellProps } from './components/TableCell/CTACell/CTACell';
+import { ButtonCellProps } from './components/TableCell/ButtonCell/ButtonCell';
+
+export type TableCellData =
+  | (BaseCellProps & { type?: undefined })
+  | (CTACellProps & { type: 'CTA' })
+  | (ButtonCellProps & { type: 'BUTTON' });
 
 export type TableSectionType = {
   title?: string;
@@ -11,7 +18,7 @@ export type ModalData = {
   body?: ReactNode;
 };
 
-export type TableCellRowData = TableCellProps[];
+export type TableCellRowData = TableCellData[];
 
 export type TableSectionData = {
   section?: TableSectionType;

package/src/lib/components/table/utils/useTableNavigation/useTableNavigation.test.tsx

@@ -11,7 +11,6 @@ const defaultContainerRef = {
 } as unknown as RefObject<HTMLElement>;
 
 describe('useTableNavigation', () => {
-  const columnsLength = 4;
   let onSelectionChanged = jest.fn();
   let containerRef = defaultContainerRef;
 
@@ -25,7 +24,6 @@ describe('useTableNavigation', () => {
       useTableNavigation({
         enabled: false,
         containerRef,
-        columnsLength,
         onSelectionChanged,
       })
     );
@@ -44,7 +42,6 @@ describe('useTableNavigation', () => {
       useTableNavigation({
         enabled: true,
         containerRef,
-        columnsLength,
         onSelectionChanged,
       })
     );
@@ -67,7 +64,6 @@ describe('useTableNavigation', () => {
       useTableNavigation({
         enabled: true,
         containerRef,
-        columnsLength,
         onSelectionChanged,
       })
     );

package/src/lib/components/table/utils/useTableNavigation/useTableNavigation.ts

@@ -8,7 +8,6 @@ interface UseTableNavigationReturn {
 
 interface UseTableNavigationProps {
   containerRef: React.RefObject<HTMLElement>,
-  columnsLength: number,
   enabled?: boolean,
   onSelectionChanged?: (index: number) => void
 }
@@ -16,22 +15,18 @@ interface UseTableNavigationProps {
 export const useTableNavigation = ({
   enabled,
   containerRef,
-  columnsLength,
   onSelectionChanged
 }: UseTableNavigationProps): UseTableNavigationReturn => {
-  const [activeSection, setActiveSection] = useState(1);
-  const [isIncrease, setIsIncrease] = useState<boolean>();
+  const [activeSection, setActiveSection] = useState(0);
 
   const handleScrollToSection = (increase?: boolean) => {
     if (!enabled) {
       return;
     }
 
-    setActiveSection((prevSection) => {
-      setIsIncrease(!!increase);
-
-      return prevSection + (increase ? 1 : -1);
-    });
+    setActiveSection((prevSection) => 
+      prevSection + (increase ? 1 : -1)
+    );
   };
 
   const handleTableScroll = useCallback(() => {
@@ -39,14 +34,12 @@ export const useTableNavigation = ({
       return;
     }
 
-    const scrollLeft = containerRef.current.scrollLeft;
     const containerWidth = containerRef.current.getBoundingClientRect().width;
-    const cellWidth = containerWidth / (columnsLength  - 1);
-    const newValue = Math.floor(scrollLeft / cellWidth * 0.8) + 1;
+    const scrollLeft = containerRef.current.scrollLeft;
+    const cellWidth = containerWidth / 2;
 
-    setIsIncrease(newValue > activeSection);
-    setActiveSection(newValue);
-   }, [activeSection, columnsLength, containerRef, enabled]);
+    setActiveSection(Math.floor(scrollLeft / cellWidth));
+   }, [activeSection, containerRef, enabled]);
 
   const debouncedTableScroll = debounce(handleTableScroll, 150);
 
@@ -61,26 +54,26 @@ export const useTableNavigation = ({
   }, [enabled]);
 
   useEffect(() => {
-    if (!enabled || typeof isIncrease === 'undefined') {
+    if (!enabled) {
       return
     }
 
-    onSelectionChanged?.(activeSection);
+    onSelectionChanged?.(activeSection + 1);
 
     if (containerRef.current) {
       const containerWidth = containerRef.current.getBoundingClientRect().width;
-      const cellWidth = containerWidth / columnsLength;
+      const cellWidth = containerWidth / 2;
 
       containerRef.current.scroll({
         top: 0,
-        left: (cellWidth * activeSection) * (isIncrease ? 1.2 : 0.8),
+        left: cellWidth * activeSection,
         behavior: 'smooth',
       });
     }
   }, [enabled, activeSection]);
 
   return {
-    activeSection,
+    activeSection: activeSection + 1,
     navigateTable: handleScrollToSection,
   }
 }

package/dist/esm/useTableNavigation-8e50b121.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useTableNavigation-8e50b121.js","sources":["../../../src/lib/components/table/utils/useTableNavigation/useTableNavigation.ts"],"sourcesContent":["import debounce from \"lodash.debounce\";\nimport { useCallback, useEffect, useState } from \"react\";\n\ninterface UseTableNavigationReturn {\n  activeSection: number;\n  navigateTable: (increase?: boolean) => void;\n}\n\ninterface UseTableNavigationProps {\n  containerRef: React.RefObject<HTMLElement>,\n  columnsLength: number,\n  enabled?: boolean,\n  onSelectionChanged?: (index: number) => void\n}\n\nexport const useTableNavigation = ({\n  enabled,\n  containerRef,\n  columnsLength,\n  onSelectionChanged\n}: UseTableNavigationProps): UseTableNavigationReturn => {\n  const [activeSection, setActiveSection] = useState(1);\n  const [isIncrease, setIsIncrease] = useState<boolean>();\n\n  const handleScrollToSection = (increase?: boolean) => {\n    if (!enabled) {\n      return;\n    }\n\n    setActiveSection((prevSection) => {\n      setIsIncrease(!!increase);\n\n      return prevSection + (increase ? 1 : -1);\n    });\n  };\n\n  const handleTableScroll = useCallback(() => {\n    if (!containerRef.current || !enabled) {\n      return;\n    }\n\n    const scrollLeft = containerRef.current.scrollLeft;\n    const containerWidth = containerRef.current.getBoundingClientRect().width;\n    const cellWidth = containerWidth / (columnsLength  - 1);\n    const newValue = Math.floor(scrollLeft / cellWidth * 0.8) + 1;\n\n    setIsIncrease(newValue > activeSection);\n    setActiveSection(newValue);\n   }, [activeSection, columnsLength, containerRef, enabled]);\n\n  const debouncedTableScroll = debounce(handleTableScroll, 150);\n\n  useEffect(() => {\n    const container = containerRef.current;\n\n    container?.addEventListener('scroll', debouncedTableScroll, {\n      passive: true,\n    });\n\n    return container?.removeEventListener('scroll', handleTableScroll);\n  }, [enabled]);\n\n  useEffect(() => {\n    if (!enabled || typeof isIncrease === 'undefined') {\n      return\n    }\n\n    onSelectionChanged?.(activeSection);\n\n    if (containerRef.current) {\n      const containerWidth = containerRef.current.getBoundingClientRect().width;\n      const cellWidth = containerWidth / columnsLength;\n\n      containerRef.current.scroll({\n        top: 0,\n        left: (cellWidth * activeSection) * (isIncrease ? 1.2 : 0.8),\n        behavior: 'smooth',\n      });\n    }\n  }, [enabled, activeSection]);\n\n  return {\n    activeSection,\n    navigateTable: handleScrollToSection,\n  }\n}"],"names":["debounce"],"mappings":";;;IAea,kBAAkB,GAAG,UAAC,EAKT;QAJxB,OAAO,aAAA,EACP,YAAY,kBAAA,EACZ,aAAa,mBAAA,EACb,kBAAkB,wBAAA;IAEZ,IAAA,KAAoC,QAAQ,CAAC,CAAC,CAAC,EAA9C,aAAa,QAAA,EAAE,gBAAgB,QAAe,CAAC;IAChD,IAAA,KAA8B,QAAQ,EAAW,EAAhD,UAAU,QAAA,EAAE,aAAa,QAAuB,CAAC;IAExD,IAAM,qBAAqB,GAAG,UAAC,QAAkB;QAC/C,IAAI,CAAC,OAAO,EAAE;YACZ,OAAO;SACR;QAED,gBAAgB,CAAC,UAAC,WAAW;YAC3B,aAAa,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC;YAE1B,OAAO,WAAW,IAAI,QAAQ,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;SAC1C,CAAC,CAAC;KACJ,CAAC;IAEF,IAAM,iBAAiB,GAAG,WAAW,CAAC;QACpC,IAAI,CAAC,YAAY,CAAC,OAAO,IAAI,CAAC,OAAO,EAAE;YACrC,OAAO;SACR;QAED,IAAM,UAAU,GAAG,YAAY,CAAC,OAAO,CAAC,UAAU,CAAC;QACnD,IAAM,cAAc,GAAG,YAAY,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC,KAAK,CAAC;QAC1E,IAAM,SAAS,GAAG,cAAc,IAAI,aAAa,GAAI,CAAC,CAAC,CAAC;QACxD,IAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG,SAAS,GAAG,GAAG,CAAC,GAAG,CAAC,CAAC;QAE9D,aAAa,CAAC,QAAQ,GAAG,aAAa,CAAC,CAAC;QACxC,gBAAgB,CAAC,QAAQ,CAAC,CAAC;KAC3B,EAAE,CAAC,aAAa,EAAE,aAAa,EAAE,YAAY,EAAE,OAAO,CAAC,CAAC,CAAC;IAE3D,IAAM,oBAAoB,GAAGA,eAAQ,CAAC,iBAAiB,EAAE,GAAG,CAAC,CAAC;IAE9D,SAAS,CAAC;QACR,IAAM,SAAS,GAAG,YAAY,CAAC,OAAO,CAAC;QAEvC,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,gBAAgB,CAAC,QAAQ,EAAE,oBAAoB,EAAE;YAC1D,OAAO,EAAE,IAAI;SACd,CAAC,CAAC;QAEH,OAAO,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,mBAAmB,CAAC,QAAQ,EAAE,iBAAiB,CAAC,CAAC;KACpE,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,SAAS,CAAC;QACR,IAAI,CAAC,OAAO,IAAI,OAAO,UAAU,KAAK,WAAW,EAAE;YACjD,OAAM;SACP;QAED,kBAAkB,aAAlB,kBAAkB,uBAAlB,kBAAkB,CAAG,aAAa,CAAC,CAAC;QAEpC,IAAI,YAAY,CAAC,OAAO,EAAE;YACxB,IAAM,cAAc,GAAG,YAAY,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC,KAAK,CAAC;YAC1E,IAAM,SAAS,GAAG,cAAc,GAAG,aAAa,CAAC;YAEjD,YAAY,CAAC,OAAO,CAAC,MAAM,CAAC;gBAC1B,GAAG,EAAE,CAAC;gBACN,IAAI,EAAE,CAAC,SAAS,GAAG,aAAa,KAAK,UAAU,GAAG,GAAG,GAAG,GAAG,CAAC;gBAC5D,QAAQ,EAAE,QAAQ;aACnB,CAAC,CAAC;SACJ;KACF,EAAE,CAAC,OAAO,EAAE,aAAa,CAAC,CAAC,CAAC;IAE7B,OAAO;QACL,aAAa,eAAA;QACb,aAAa,EAAE,qBAAqB;KACrC,CAAA;AACH;;;;"}