react-science 11.2.0 → 12.1.0

package/lib/components/table/table_root.js.map

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-science",
-  "version": "11.2.0",
+  "version": "12.1.0",
   "description": "React components to build scientific applications UI",
   "type": "module",
   "exports": {
@@ -56,10 +56,6 @@
     "@blueprintjs/select": "^5.3.5",
     "@emotion/react": "^11.13.5",
     "@emotion/styled": "^11.13.5",
-    "@popperjs/core": "^2.11.8",
-    "@radix-ui/react-collapsible": "^1.1.1",
-    "@radix-ui/react-radio-group": "^1.2.1",
-    "@tanstack/react-query": "^5.61.5",
     "@tanstack/react-table": "^8.20.5",
     "@tanstack/react-virtual": "^3.10.9",
     "d3-scale-chromatic": "^3.1.0",
@@ -68,7 +64,6 @@
     "react-dropzone": "14.3.5",
     "react-icons": "^5.3.0",
     "react-inspector": "^6.0.2",
-    "react-popper": "^2.3.0",
     "tinycolor2": "^1.6.0",
     "ts-pattern": "^5.5.0",
     "use-resize-observer": "^9.1.0"
@@ -76,6 +71,7 @@
   "devDependencies": {
     "@blueprintjs/core": "^5.16.0",
     "@blueprintjs/icons": "^5.15.0",
+    "@floating-ui/react": "^0.26.28",
     "@playwright/experimental-ct-react": "^1.49.0",
     "@playwright/test": "^1.49.0",
     "@storybook/addon-essentials": "^8.4.5",
@@ -83,6 +79,7 @@
     "@storybook/blocks": "^8.4.5",
     "@storybook/react": "^8.4.5",
     "@storybook/react-vite": "^8.4.5",
+    "@tanstack/react-query": "^5.62.3",
     "@types/babel__core": "^7.20.5",
     "@types/d3-scale-chromatic": "^3.1.0",
     "@types/lodash": "^4.17.13",

package/src/components/accordion/accordion.tsx

@@ -93,6 +93,7 @@ Accordion.Item = function AccordionItem(props: AccordionItemProps) {
         flex: item?.isOpen ? '1 1 1px' : 'none',
         display: 'flex',
         flexDirection: 'column',
+        isolation: 'isolate',
       }}
     >
       <div

package/src/components/forms/index.ts

@@ -1 +1 @@
-export * from './radio-group/index.js';
+export * from './radio-button-group/index.js';

package/src/components/forms/radio-button-group/RadioButton.tsx

@@ -0,0 +1,73 @@
+/** @jsxImportSource @emotion/react */
+import type { RadioProps } from '@blueprintjs/core';
+import styled from '@emotion/styled';
+
+import { enabledColor } from '../styles.js';
+import { useInputId } from '../utils/use_input_id.js';
+
+const HiddenInput = styled.input`
+  // Those styles are taken from the sr-only class in tailwind CSS.
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+
+  // Label associated with the checked input
+  &:checked + label {
+    color: ${enabledColor};
+    border-color: ${enabledColor};
+    opacity: ${(props) => (props.disabled ? 0.25 : 1)};
+    border-width: 1px;
+  }
+
+  // Next label after the one that is checked
+  &:checked + label + input + label {
+    border-left-width: 0;
+  }
+`;
+
+const RadioContent = styled.div<{ large?: boolean }>`
+  place-content: center;
+  padding: ${(props) => (props.large ? '0px 15px' : '0px 7px')};
+  line-height: 0;
+`;
+
+const Label = styled.label<{ large?: boolean; disabled?: boolean }>`
+  display: flex;
+  height: ${(props) => (props.large ? '40px' : '30px')};
+  opacity: ${(props) => (props.disabled ? 0.25 : 1)};
+  border-width: 1px 0 1px 1px;
+  border-color: rgba(0, 0, 0, ${(props) => (props.disabled ? 1 : 0.25)});
+  border-style: solid;
+  cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};
+  white-space: nowrap;
+  &:hover {
+    color: ${enabledColor};
+  }
+`;
+
+export function RadioButton(props: RadioProps) {
+  const { large, disabled, label, name, value, id, checked, onChange } = props;
+  const uniqId = useInputId(id, name);
+  return (
+    <>
+      <HiddenInput
+        checked={checked}
+        id={uniqId}
+        name={name}
+        value={value}
+        type="radio"
+        disabled={disabled}
+        onChange={onChange}
+      />
+      <Label large={large} disabled={disabled} htmlFor={uniqId}>
+        <RadioContent large={large}>{label}</RadioContent>
+      </Label>
+    </>
+  );
+}

package/src/components/forms/radio-button-group/RadioButtonGroup.tsx

@@ -0,0 +1,80 @@
+/** @jsxImportSource @emotion/react */
+import type { RadioGroupProps } from '@blueprintjs/core';
+import { RadioGroup } from '@blueprintjs/core';
+import styled from '@emotion/styled';
+import { Children, cloneElement } from 'react';
+
+import { RadioButton } from './RadioButton.js';
+
+export interface RadioButtonGroupProps extends RadioGroupProps {
+  large?: boolean;
+}
+
+const RadioButtonContainer = styled.div<{ large?: boolean }>`
+  display: flex;
+  & label:first-of-type {
+    border-bottom-left-radius: ${(props) => (props.large ? '6px' : '4px')};
+    border-top-left-radius: ${(props) => (props.large ? '6px' : '4px')};
+  }
+  & label:last-of-type {
+    border-right-width: 1px;
+    border-bottom-right-radius: ${(props) => (props.large ? '6px' : '4px')};
+    border-top-right-radius: ${(props) => (props.large ? '6px' : '4px')};
+  }
+`;
+
+export function RadioButtonGroup(props: RadioButtonGroupProps) {
+  const {
+    disabled: groupDisabled = false,
+    options = [],
+    name,
+    large,
+    selectedValue,
+    onChange,
+    children,
+    ...restProps
+  } = props;
+
+  return (
+    <RadioGroup
+      name={name}
+      selectedValue={selectedValue}
+      onChange={onChange}
+      {...restProps}
+    >
+      <RadioButtonContainer large={large}>
+        {options?.map(({ value, label, disabled }, index) => {
+          return (
+            <RadioButton
+              // eslint-disable-next-line react/no-array-index-key
+              key={index}
+              value={value}
+              label={label}
+              large={large}
+              name={name}
+              onChange={onChange}
+              checked={value === selectedValue}
+              disabled={groupDisabled || disabled}
+            />
+          );
+        })}
+        {Children.map(children, (child) => {
+          if (!child || typeof child !== 'object' || !('type' in child)) {
+            return child;
+          }
+          if (child.type === RadioButton) {
+            return cloneElement(child, {
+              ...child.props,
+              large,
+              name,
+              onChange,
+              checked: child.props.value === selectedValue,
+              disabled: groupDisabled || child.props.disabled,
+            });
+          }
+          return child;
+        })}
+      </RadioButtonContainer>
+    </RadioGroup>
+  );
+}

package/src/components/forms/radio-button-group/index.ts

@@ -0,0 +1,2 @@
+export * from './RadioButtonGroup.js';
+export * from './RadioButton.js';

package/src/components/forms/utils/use_input_id.ts

@@ -0,0 +1,13 @@
+import { useId } from 'react';
+
+export function useInputId(
+  id: string | null | undefined,
+  name: string | null | undefined,
+) {
+  const reactId = useId();
+
+  // If an id is provided, use it
+  // Else if a name is specified, join name with reactId to simplify debug in devtools
+  // else use the id from useId()
+  return id ?? (name ? `${name}_${reactId}` : reactId);
+}

package/src/components/hooks/index.ts

@@ -1,6 +1,5 @@
 export * from './useDoubleClick.js';
 export * from './useHashSearchParams.js';
-export * from './useModifiedPopper.js';
 export * from './useOnClickOutside.js';
 export * from './useOnOff.js';
 export * from './useToggle.js';

package/src/components/info-panel/InfoPanel.tsx

@@ -1,11 +1,12 @@
 /** @jsxImportSource @emotion/react */
-import { Icon, InputGroup } from '@blueprintjs/core';
+import { Classes, Collapse, InputGroup } from '@blueprintjs/core';
 import { css } from '@emotion/react';
-import * as Collapsible from '@radix-ui/react-collapsible';
+import styled from '@emotion/styled';
 import type { CSSProperties } from 'react';
 import { memo, useCallback, useMemo, useState } from 'react';
 import { match, P } from 'ts-pattern';
 
+import { Button } from '../button/Button.js';
 import { SelectedTotal } from '../selected-total/index.js';
 import { createTableColumnHelper, Table } from '../table/index.js';
 import * as ValueRenderers from '../value-renderers/index.js';
@@ -23,27 +24,34 @@ interface InfoPanelProps {
   inputStyle?: CSSProperties;
 }
 
+const AccordionButton = styled(Button, {
+  shouldForwardProp: (propName) => propName !== 'open',
+})<{ open?: boolean }>`
+  z-index: 1;
+  position: sticky;
+  height: 30px;
+  top: 0;
+  .${Classes.ICON} {
+    rotate: ${(props) => (props.open ? '90deg' : '')};
+    transition: all 0.3s ease-in-out;
+  }
+  cursor: pointer;
+  border-bottom: 1px solid #f5f5f5;
+  display: flex;
+  align-items: center;
+  padding: 5px 2px;
+  width: 100%;
+  &.${Classes.MINIMAL} {
+    background-color: white;
+  }
+  :hover {
+    background-color: #f5f5f5;
+  }
+`;
+
 const style = {
   content: css({
     overflow: 'hidden',
-    "&[data-state='open']": {
-      animation: 'slideDown 300ms ease-out',
-    },
-    '&[data-state="closed"]': {
-      animation: 'slideUp 300ms ease-out',
-    },
-    '@keyframes slideDown': {
-      from: {
-        height: 0,
-      },
-      to: { height: 'var(--radix-collapsible-content-height)' },
-    },
-    '@keyframes slideUp': {
-      from: {
-        height: 'var(--radix-collapsible-content-height)',
-      },
-      to: { height: 0 },
-    },
   }),
   container: css({
     padding: '5px 0 0 0',
@@ -51,28 +59,6 @@ const style = {
     display: 'flex',
     flexDirection: 'column',
   }),
-  chevron: css({
-    transition: 'all 0.3s ease-in-out',
-  }),
-  button: css({
-    zIndex: 10,
-    position: 'sticky',
-    height: 30,
-    top: 0,
-    "&[data-state='open'] > span": {
-      rotate: '90deg',
-    },
-    cursor: 'pointer',
-    borderBottom: '1px solid #f5f5f5',
-    backgroundColor: 'white',
-    display: 'flex',
-    alignItems: 'center',
-    padding: '5px 2px',
-    width: '100%',
-    ':hover': {
-      backgroundColor: '#f5f5f5',
-    },
-  }),
 };
 
 interface InfoPanelDatum {
@@ -206,6 +192,9 @@ interface InfoPanelContentProps {
 
 const InfoPanelContent = memo((props: InfoPanelContentProps) => {
   const { filteredData } = props;
+  const [isOpen, setIsOpen] = useState<string[]>(
+    filteredData.map(({ description }) => description),
+  );
   return (
     <div
       style={{
@@ -218,19 +207,25 @@ const InfoPanelContent = memo((props: InfoPanelContentProps) => {
       }}
     >
       {filteredData.map(({ description, data }) => {
+        const open = isOpen.includes(description);
         return (
-          <Collapsible.Root
-            key={description}
-            className="CollapsibleRoot"
-            defaultOpen
-          >
-            <Collapsible.Trigger asChild css={style.button}>
-              <div>
-                <Icon icon="chevron-right" css={style.chevron} />
-                {description}
-              </div>
-            </Collapsible.Trigger>
-            <Collapsible.Content css={style.content}>
+          <div key={description}>
+            <AccordionButton
+              open={open}
+              minimal
+              onClick={() =>
+                setIsOpen((pred) =>
+                  open
+                    ? pred.filter((o) => o !== description)
+                    : [...pred, description],
+                )
+              }
+              alignText="left"
+              icon="chevron-right"
+            >
+              {description}
+            </AccordionButton>
+            <Collapse isOpen={open} css={style.content}>
               <Table
                 data={data}
                 columns={columns}
@@ -238,8 +233,8 @@ const InfoPanelContent = memo((props: InfoPanelContentProps) => {
                 tableProps={{ style: { width: '100%' } }}
                 compact
               />
-            </Collapsible.Content>
-          </Collapsible.Root>
+            </Collapse>
+          </div>
         );
       })}
     </div>

package/src/components/root-layout/root_layout.tsx

@@ -1,12 +1,10 @@
 import { BlueprintProvider, FocusStyleManager } from '@blueprintjs/core';
-import { QueryClientProvider } from '@tanstack/react-query';
 import type { CSSProperties, ReactNode } from 'react';
 import { useCallback, useState } from 'react';
 
 import { AccordionProvider } from '../accordion/index.js';
 
 import { CustomDivPreflight } from './css-reset/customPreflight.js';
-import { queryClient } from './query_client.js';
 import { RootLayoutProvider } from './root_layout_context.provider.js';
 
 FocusStyleManager.onlyShowFocusOnTabs();
@@ -48,9 +46,7 @@ export function RootLayout(props: RootLayoutProps) {
         {...(rootRef ? { portalContainer: rootRef } : undefined)}
       >
         <RootLayoutProvider innerRef={rootRef}>
-          <QueryClientProvider client={queryClient}>
-            <AccordionProvider>{props.children}</AccordionProvider>
-          </QueryClientProvider>
+          <AccordionProvider>{props.children}</AccordionProvider>
         </RootLayoutProvider>
       </BlueprintProvider>
     </CustomDivPreflight>

package/src/components/table/table_header_cell.tsx

@@ -1,6 +1,9 @@
-import type { Header, RowData } from '@tanstack/react-table';
+import { Icon } from '@blueprintjs/core';
+import type { IconName } from '@blueprintjs/icons';
+import type { Header, RowData, SortingFnOption } from '@tanstack/react-table';
 import { flexRender } from '@tanstack/react-table';
-import type { CSSProperties, HTMLAttributes, ReactNode } from 'react';
+import type { HTMLAttributes, ReactNode } from 'react';
+import { match } from 'ts-pattern';
 
 type ThProps = Pick<
   HTMLAttributes<HTMLTableCellElement>,
@@ -32,26 +35,53 @@ export function TableHeaderCell<TData extends RowData>(
 function getThProps<TData extends RowData>(
   header: Header<TData, unknown>,
 ): ThProps {
-  const sorted = header.column.getIsSorted();
-  const canSort = header.column.getCanSort();
-  const style: CSSProperties = {
-    position: 'relative',
-    cursor: canSort ? 'pointer' : undefined,
-  };
-  const onClick = canSort ? header.column.getToggleSortingHandler() : undefined;
-  const children = (
-    <div style={{ display: 'flex', flexDirection: 'row', gap: '5px' }}>
-      <div>
-        {flexRender(header.column.columnDef.header, header.getContext())}
+  const { column } = header;
+
+  const sorted = column.getIsSorted();
+  const canSort = column.getCanSort();
+  const sortingIcon = getSortingIcon(column.columnDef.sortingFn)[
+    sorted || 'asc'
+  ];
+
+  return {
+    onClick: canSort ? column.getToggleSortingHandler() : undefined,
+    style: {
+      position: 'relative',
+      cursor: canSort ? 'pointer' : undefined,
+    },
+    children: (
+      <div style={{ display: 'flex', flexDirection: 'row', gap: '5px' }}>
+        <div>{flexRender(column.columnDef.header, header.getContext())}</div>
+        {sorted && <Icon icon={sortingIcon} />}
       </div>
-      {sorted
-        ? {
-            asc: '🔼',
-            desc: '🔽',
-          }[sorted]
-        : null}
-    </div>
-  );
-
-  return { style, children, onClick };
+    ),
+  };
+}
+
+function getSortingIcon<TData extends RowData>(
+  type: SortingFnOption<TData> | undefined,
+): { asc: IconName; desc: IconName } {
+  return match<
+    SortingFnOption<TData> | undefined,
+    { asc: IconName; desc: IconName }
+  >(type)
+    .with(
+      'auto',
+      'datetime',
+      'alphanumeric',
+      'alphanumericCaseSensitive',
+      () => ({
+        asc: 'sort-asc',
+        desc: 'sort-desc',
+      }),
+    )
+    .with('text', 'textCaseSensitive', () => ({
+      asc: 'sort-alphabetical',
+      desc: 'sort-alphabetical-desc',
+    }))
+    .with('basic', () => ({
+      asc: 'sort-numerical',
+      desc: 'sort-numerical-desc',
+    }))
+    .otherwise(() => ({ asc: 'sort-asc', desc: 'sort-desc' }));
 }

package/src/components/table/table_root.tsx

@@ -18,11 +18,34 @@ import type { HeaderCellRenderer } from './table_header_cell.js';
 import type { TableColumnDef, TableRowTrRenderer } from './table_utils.js';
 import { useTableColumns } from './use_table_columns.js';
 
-// Blueprint's HTMLTable `striped` prop's implementation is based on nth-child odd / even
-// We cannot use that with virtualization, so we override its implementation here.
 const CustomHTMLTable = styled(HTMLTable, {
-  shouldForwardProp: (prop) => prop !== 'striped',
-})`
+  shouldForwardProp: (prop) => prop !== 'striped' && prop !== 'stickyHeader',
+})<{ stickyHeader: boolean }>`
+  // When using a sticky header, ensure that the borders are located below the last header instead of above the first row.
+  ${(props) => {
+    if (!props.stickyHeader) return '';
+
+    return `
+      thead tr:last-child {
+        box-shadow: inset 0 -1px #11141826;
+      }
+    
+      tbody tr:first-child td {
+        box-shadow: ${
+          props.bordered
+            ? 'inset 1px 0 0 0 #11141826 !important'
+            : 'none !important'
+        };
+      }
+    
+      tbody tr:first-child td:first-child {
+        box-shadow: none !important;
+      }
+    `;
+  }}
+
+  // Blueprint's HTMLTable \`striped\` prop's implementation is based on nth-child odd / even
+  // We cannot use that with virtualization, so we override its implementation here.
   tbody tr.odd td {
     background: ${(props) =>
       props.striped ? 'rgba(143, 153, 168, 0.15)' : 'inherit'};
@@ -68,7 +91,16 @@ interface TableBaseProps<TData extends RowData> {
     TableOptions<TData>,
     'data' | 'columns' | 'getCoreRowModel' | 'getSortedRowModel'
   >;
+  /**
+   * Props which are forwarded to the underlying HTML table element.
+   */
   tableProps?: Omit<TableHTMLAttributes<HTMLTableElement>, 'children'>;
+  /**
+   * An alias for `tableProps.className`. Exists to ensure the Table component
+   * can be styled with styled components library (e.g. emotion).
+   * If you use both the alias and `tableProps.className`, they will be merged together.
+   */
+  className?: string;
   /**
    * Override the default row rendering.
    * Make sure to spread the passed `trProps` onto the rendered `<tr>` element.
@@ -113,6 +145,7 @@ export function Table<TData extends RowData>(props: TableProps<TData>) {
 
     reactTable,
     tableProps,
+    className,
     renderRowTr,
     renderHeaderCell,
 
@@ -138,6 +171,16 @@ export function Table<TData extends RowData>(props: TableProps<TData>) {
     overscan: 5,
   });
 
+  // Make the table component compatible with styled components libraries.
+  let finalClassName: string | undefined;
+  if (tableProps?.className && className) {
+    finalClassName = `${tableProps.className} ${className}`;
+  } else if (className) {
+    finalClassName = className;
+  } else {
+    finalClassName = tableProps?.className;
+  }
+
   return (
     <Container virtualizeRows={virtualizeRows} scrollRef={scrollElementRef}>
       <CustomHTMLTable
@@ -145,7 +188,9 @@ export function Table<TData extends RowData>(props: TableProps<TData>) {
         compact={compact}
         interactive={interactive}
         striped={striped}
+        stickyHeader={stickyHeader}
         {...tableProps}
+        className={finalClassName}
       >
         <TableHeader
           sticky={stickyHeader}

package/lib/components/forms/radio-group/ButtonRadioItem.d.ts

@@ -1,3 +0,0 @@
-import type { RadioGroupProps, RadioOption } from './RadioGroup.js';
-export declare function ButtonRadioItem(prop: RadioOption & Pick<RadioGroupProps, 'onSelect' | 'variant' | 'name'>): import("@emotion/react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=ButtonRadioItem.d.ts.map

package/lib/components/forms/radio-group/ButtonRadioItem.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ButtonRadioItem.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/radio-group/ButtonRadioItem.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AA6CpE,wBAAgB,eAAe,CAC7B,IAAI,EAAE,WAAW,GAAG,IAAI,CAAC,eAAe,EAAE,UAAU,GAAG,SAAS,GAAG,MAAM,CAAC,oDAwB3E"}

package/lib/components/forms/radio-group/ButtonRadioItem.js

@@ -1,50 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-/** @jsxImportSource @emotion/react */
-import { css } from '@emotion/react';
-import * as RadioGroup from '@radix-ui/react-radio-group';
-import { enabledColor } from '../styles.js';
-const buttonStyles = {
-    container: css({
-        border: '1px solid rgba(0, 0, 0, 0.25)',
-        borderRightWidth: 0,
-        position: 'relative',
-    }),
-    item: (disabled, variant) => css({
-        opacity: disabled ? 0.25 : 1,
-        padding: variant === 'default' ? '0px 15px' : '0px 7px',
-        width: '100%',
-        height: '100%',
-        cursor: 'pointer',
-        ':hover': {
-            '& > label': {
-                color: disabled ? '' : enabledColor,
-            },
-        },
-    }),
-    indicator: css({
-        position: 'absolute',
-        top: -1,
-        left: -1,
-        right: -1,
-        bottom: -1,
-        zIndex: 10,
-        border: '1px solid',
-        borderColor: enabledColor,
-        '& ~ label': {
-            color: enabledColor,
-        },
-    }),
-    label: (variant) => css({
-        cursor: 'pointer',
-        fontSize: variant === 'small' ? '1em' : '1.125em',
-        lineHeight: variant === 'default' ? '30px' : '22px',
-    }),
-};
-export function ButtonRadioItem(prop) {
-    const { value, label, disabled = false, onSelect, variant, name } = prop;
-    return (_jsx("div", { css: buttonStyles.container, children: _jsxs(RadioGroup.Item, { css: buttonStyles.item(disabled, variant), value: value, id: `${value}${name}`, onClick: () => {
-                if (!disabled)
-                    onSelect?.(prop);
-            }, children: [_jsx(RadioGroup.Indicator, { css: buttonStyles.indicator }), _jsx("label", { css: buttonStyles.label(variant), htmlFor: `${value}${name}`, style: {}, children: label })] }) }));
-}
-//# sourceMappingURL=ButtonRadioItem.js.map

package/lib/components/forms/radio-group/ButtonRadioItem.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ButtonRadioItem.js","sourceRoot":"","sources":["../../../../src/components/forms/radio-group/ButtonRadioItem.tsx"],"names":[],"mappings":";AAAA,sCAAsC;AACtC,OAAO,EAAE,GAAG,EAAE,MAAM,gBAAgB,CAAC;AACrC,OAAO,KAAK,UAAU,MAAM,6BAA6B,CAAC;AAG1D,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAI5C,MAAM,YAAY,GAAG;IACnB,SAAS,EAAE,GAAG,CAAC;QACb,MAAM,EAAE,+BAA+B;QACvC,gBAAgB,EAAE,CAAC;QACnB,QAAQ,EAAE,UAAU;KACrB,CAAC;IACF,IAAI,EAAE,CAAC,QAAiB,EAAE,OAAsB,EAAE,EAAE,CAClD,GAAG,CAAC;QACF,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;QAC5B,OAAO,EAAE,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS;QACvD,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;QACd,MAAM,EAAE,SAAS;QACjB,QAAQ,EAAE;YACR,WAAW,EAAE;gBACX,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY;aACpC;SACF;KACF,CAAC;IAEJ,SAAS,EAAE,GAAG,CAAC;QACb,QAAQ,EAAE,UAAU;QACpB,GAAG,EAAE,CAAC,CAAC;QACP,IAAI,EAAE,CAAC,CAAC;QACR,KAAK,EAAE,CAAC,CAAC;QACT,MAAM,EAAE,CAAC,CAAC;QACV,MAAM,EAAE,EAAE;QACV,MAAM,EAAE,WAAW;QACnB,WAAW,EAAE,YAAY;QAEzB,WAAW,EAAE;YACX,KAAK,EAAE,YAAY;SACpB;KACF,CAAC;IAEF,KAAK,EAAE,CAAC,OAAsB,EAAE,EAAE,CAChC,GAAG,CAAC;QACF,MAAM,EAAE,SAAS;QACjB,QAAQ,EAAE,OAAO,KAAK,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS;QACjD,UAAU,EAAE,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;KACpD,CAAC;CACL,CAAC;AAEF,MAAM,UAAU,eAAe,CAC7B,IAA0E;IAE1E,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,GAAG,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC;IACzE,OAAO,CACL,cAAK,GAAG,EAAE,YAAY,CAAC,SAAS,YAC9B,MAAC,UAAU,CAAC,IAAI,IACd,GAAG,EAAE,YAAY,CAAC,IAAI,CAAC,QAAQ,EAAE,OAAO,CAAC,EACzC,KAAK,EAAE,KAAK,EACZ,EAAE,EAAE,GAAG,KAAK,GAAG,IAAI,EAAE,EACrB,OAAO,EAAE,GAAG,EAAE;gBACZ,IAAI,CAAC,QAAQ;oBAAE,QAAQ,EAAE,CAAC,IAAI,CAAC,CAAC;YAClC,CAAC,aAED,KAAC,UAAU,CAAC,SAAS,IAAC,GAAG,EAAE,YAAY,CAAC,SAAS,GAAI,EACrD,gBACE,GAAG,EAAE,YAAY,CAAC,KAAK,CAAC,OAAO,CAAC,EAChC,OAAO,EAAE,GAAG,KAAK,GAAG,IAAI,EAAE,EAC1B,KAAK,EAAE,EAAE,YAER,KAAK,GACA,IACQ,GACd,CACP,CAAC;AACJ,CAAC"}