@dust-tt/sparkle 0.2.563 → 0.2.564-rc-1

package/src/components/markdown/CodeBlockWithExtendedSupport.tsx

@@ -28,6 +28,35 @@ import {
 import { CommandLineIcon, SparklesIcon } from "@sparkle/icons/app";
 import { cn } from "@sparkle/lib/utils";
 
+const PRETTY_JSON_PREFERENCE_KEY = "pretty-json-preference";
+
+const getPrettyJsonPreference = (): boolean => {
+  if (typeof window === "undefined") {
+    return false;
+  }
+
+  try {
+    const prettyJsonPreference = localStorage.getItem(
+      PRETTY_JSON_PREFERENCE_KEY
+    );
+    return prettyJsonPreference === "true";
+  } catch {
+    return false;
+  }
+};
+
+const setPrettyJsonPreference = (value: boolean): void => {
+  if (typeof window === "undefined") {
+    return;
+  }
+
+  try {
+    localStorage.setItem(PRETTY_JSON_PREFERENCE_KEY, String(value));
+  } catch {
+    // do nothing
+  }
+};
+
 // Helper function to ensure we get hex values
 const toHex = (color: string) => {
   if (color.startsWith("#")) {
@@ -330,7 +359,8 @@ export function CodeBlockWithExtendedSupport({
       try {
         const parsed = JSON.parse(validChildrenContent);
         setParsedJson(parsed);
-        setShowPrettyJson(true);
+        const prettyJsonPreference = getPrettyJsonPreference();
+        setShowPrettyJson(prettyJsonPreference);
       } catch (e) {
         setParsedJson(null);
         setShowPrettyJson(false);
@@ -353,6 +383,7 @@ export function CodeBlockWithExtendedSupport({
         getContentToDownload={getContentToDownload}
         actions={
           <Button
+            className="s-font-sans"
             size="xs"
             variant={"outline"}
             label={showMermaid ? "Markdown" : "Mermaid"}
@@ -361,6 +392,7 @@ export function CodeBlockWithExtendedSupport({
             tooltip={showMermaid ? "Switch to Markdown" : "Switch to Mermaid"}
           />
         }
+        buttonDisplay="inside"
       >
         {showMermaid ? (
           <MermaidGraph chart={validChildrenContent} />
@@ -380,17 +412,23 @@ export function CodeBlockWithExtendedSupport({
         getContentToDownload={getContentToDownload}
         actions={
           <Button
+            className="s-font-sans"
             size="xs"
             variant={"outline"}
             label={showPrettyJson ? "Raw JSON" : "Pretty JSON"}
             icon={showPrettyJson ? CommandLineIcon : SparklesIcon}
-            onClick={() => setShowPrettyJson(!showPrettyJson)}
+            onClick={() => {
+              const newValue = !showPrettyJson;
+              setShowPrettyJson(newValue);
+              setPrettyJsonPreference(newValue);
+            }}
             tooltip={
               showPrettyJson ? "Switch to Raw JSON" : "Switch to Pretty View"
             }
           />
         }
         displayActions="hover"
+        buttonDisplay="inside"
       >
         {showPrettyJson ? (
           <PrettyJsonViewer data={parsedJson} />
@@ -407,6 +445,7 @@ export function CodeBlockWithExtendedSupport({
     <ContentBlockWrapper
       content={validChildrenContent}
       getContentToDownload={getContentToDownload}
+      buttonDisplay="inside"
     >
       <CodeBlock className={className} inline={inline}>
         {children}

package/src/components/markdown/ContentBlockWrapper.tsx

@@ -1,3 +1,4 @@
+import { cva } from "class-variance-authority";
 import React, { useCallback } from "react";
 
 import { Button } from "@sparkle/components/";
@@ -16,6 +17,51 @@ const contentTypeExtensions: Record<SupportedContentType, string> = {
   "text/csv": ".csv",
 };
 
+const wrapperVariants = cva("s-group s-relative s-w-full !s-overflow-visible", {
+  variants: {
+    buttonDisplay: {
+      inside: "s-mt-0",
+      outside: "s-mt-11",
+    },
+  },
+  defaultVariants: {
+    buttonDisplay: "outside",
+  },
+});
+
+const stickyContainerVariants = cva("s-sticky s-z-[1] s-h-0", {
+  variants: {
+    buttonDisplay: {
+      inside: "s-top-0",
+      outside: "s-top-11",
+    },
+  },
+  defaultVariants: {
+    buttonDisplay: "outside",
+  },
+});
+
+const actionsVariants = cva(
+  "s-absolute s-right-2 s-flex s-items-center s-gap-1 s-py-2",
+  {
+    variants: {
+      buttonDisplay: {
+        inside: "",
+        outside: "s-bottom-0 s-h-11",
+      },
+      displayActions: {
+        hover:
+          "s-opacity-0 s-transition-opacity s-duration-200 group-hover:s-opacity-100",
+        always: "",
+      },
+    },
+    defaultVariants: {
+      buttonDisplay: "outside",
+      displayActions: "always",
+    },
+  }
+);
+
 export interface ContentToDownload {
   content: string;
   filename: string;
@@ -37,6 +83,7 @@ interface ContentBlockWrapperProps {
   getContentToDownload?: GetContentToDownloadFunction;
   actions?: React.ReactNode[] | React.ReactNode;
   displayActions?: "hover" | "always";
+  buttonDisplay?: "inside" | "outside";
 }
 
 export function ContentBlockWrapper({
@@ -47,6 +94,7 @@ export function ContentBlockWrapper({
   actions,
   displayActions = "always",
   getContentToDownload,
+  buttonDisplay = "outside",
 }: ContentBlockWrapperProps) {
   const [isCopied, copyToClipboard] = useCopyToClipboard();
 
@@ -92,19 +140,12 @@ export function ContentBlockWrapper({
   return (
     <div
       id="BlockWrapper"
-      className={cn(
-        "s-group s-relative s-mt-11 s-w-full !s-overflow-visible",
-        className
-      )}
+      className={cn(wrapperVariants({ buttonDisplay }), className)}
     >
-      <div className="s-sticky s-top-11 s-z-[1] s-h-0">
+      <div className={stickyContainerVariants({ buttonDisplay })}>
         <div
           id="BlockActions"
-          className={cn(
-            "s-absolute s-bottom-0 s-right-2 s-flex s-h-11 s-items-center s-gap-1 s-py-2",
-            displayActions === "hover" &&
-              "s-opacity-0 s-transition-opacity s-duration-200 group-hover:s-opacity-100"
-          )}
+          className={actionsVariants({ buttonDisplay, displayActions })}
         >
           {actions && actions}
           {getContentToDownload && (

package/src/components/markdown/Markdown.tsx

@@ -29,12 +29,12 @@ import { cn } from "@sparkle/lib/utils";
 
 const sizes = {
   p: "s-copy-sm @sm:s-text-base @sm:s-leading-7",
-  h1: "s-heading-2xl",
-  h2: "s-heading-xl",
-  h3: "s-heading-lg",
-  h4: "s-text-base s-font-semibold",
-  h5: "s-text-sm s-font-semibold",
-  h6: "s-text-sm s-font-regular s-italic",
+  h1: "s-heading-3xl",
+  h2: "s-heading-2xl",
+  h3: "s-heading-xl",
+  h4: "s-heading-lg",
+  h5: "s-text-base s-font-bold",
+  h6: "s-text-base s-font-regular s-italic",
 };
 
 function showUnsupportedDirective() {

package/src/components/markdown/PrettyJsonViewer.tsx

@@ -162,7 +162,7 @@ function JsonValue({
           <div
             key={key}
             className={cn(
-              "s-max-w-full s-border-b s-pb-3 last:s-border-0",
+              "s-max-w-full s-border-b s-pb-3 last:s-border-0 last:s-pb-0",
               "s-border-structure-200 dark:s-border-structure-200-night"
             )}
           >
@@ -211,7 +211,7 @@ export function PrettyJsonViewer({ data, className }: JsonViewerProps) {
     <div
       className={cn(
         "s-bg-structure-50 dark:s-bg-structure-50-night",
-        "s-overflow-hidden s-rounded-lg s-px-4 s-text-base",
+        "s-overflow-hidden s-rounded-lg s-px-4 s-py-4 s-text-base",
         className
       )}
     >

package/src/hooks/index.ts

@@ -1 +1,3 @@
 export * from "./useCopyToClipboard";
+export * from "./useHashParams";
+export * from "./usePaginationFromUrl";

package/src/hooks/useHashParams.ts

@@ -0,0 +1,101 @@
+/**
+ * Original code from : https://www.npmjs.com/package/use-hash-param
+ * ISC License
+ */
+
+import { useCallback, useEffect, useState } from "react";
+
+const getHashSearchParams = (location: Location): [string, URLSearchParams] => {
+  const hash = location.hash.slice(1);
+  const [prefix, query] = hash.split("?");
+
+  return [prefix, new URLSearchParams(query)];
+};
+
+const getHashParam = (key: string, defaultValue?: string) => {
+  if (typeof window === "undefined") {
+    return defaultValue;
+  }
+
+  const [, searchParams] = getHashSearchParams(window.location);
+
+  return searchParams.get(key) ?? defaultValue;
+};
+
+const setHashParam = (
+  key: string,
+  value: string | undefined,
+  shouldReplaceState: boolean
+) => {
+  if (typeof window !== "undefined") {
+    const { pathname, search } = window.location;
+    const [prefix, searchParams] = getHashSearchParams(window.location);
+
+    if (typeof value === "undefined" || value === "") {
+      searchParams.delete(key);
+    } else {
+      searchParams.set(key, value);
+    }
+
+    const hashSearch = searchParams.toString();
+    const hash = hashSearch ? `${prefix}?${hashSearch}` : prefix;
+    const newUrl = `${pathname}${search}#${hash}`;
+
+    if (shouldReplaceState && "replaceState" in history) {
+      history.replaceState(null, "", newUrl);
+    } else {
+      window.location.hash = hash;
+    }
+  }
+};
+
+type Updater = (prevValue?: string) => string;
+
+export type HistoryOptions = "replace" | "push";
+
+type SetterOptions = {
+  history: HistoryOptions;
+};
+type Setter = (value?: string | Updater, options?: SetterOptions) => void;
+
+/**
+ * @param key The parameter-name to use from the hash-string query string.
+ * @param defaultValue A default value to use if the parameter is not specified and on the server.
+ * @returns A two-tuple, the first element is the selected param value (either extracted from the hash param or the default value).
+ *  The second element is a setter function to change the param value.
+ */
+
+export const useHashParam = (
+  key: string,
+  defaultValue?: string
+): [string | undefined, Setter] => {
+  const [innerValue, setInnerValue] = useState<string | undefined>(() =>
+    getHashParam(key, defaultValue)
+  );
+
+  useEffect(() => {
+    const handleHashChange = () =>
+      setInnerValue(getHashParam(key, defaultValue));
+    handleHashChange();
+    window.addEventListener("hashchange", handleHashChange);
+    return () => window.removeEventListener("hashchange", handleHashChange);
+  }, [key]);
+
+  const setValue = useCallback<Setter>(
+    (
+      newValue?: string | Updater,
+      options: SetterOptions = { history: "replace" }
+    ) => {
+      const newInnerValue =
+        typeof newValue === "function"
+          ? newValue(getHashParam(key, defaultValue))
+          : newValue;
+
+      setInnerValue(newInnerValue);
+      setHashParam(key, newInnerValue, options.history === "replace");
+    },
+    [key]
+  );
+
+  return [innerValue || defaultValue, setValue];
+};

package/src/hooks/usePaginationFromUrl.ts

@@ -0,0 +1,46 @@
+import { PaginationState } from "@tanstack/react-table";
+import { useMemo } from "react";
+
+import { HistoryOptions, useHashParam } from "@sparkle/hooks/useHashParams";
+
+const defaultPageSize = 25;
+
+export const usePaginationFromUrl = ({
+  urlPrefix,
+  initialPageSize = defaultPageSize,
+  defaultHistory = "push",
+}: {
+  urlPrefix?: string;
+  initialPageSize?: number;
+  defaultHistory?: HistoryOptions;
+}) => {
+  const [pageIndexParam, setPageIndexParam] = useHashParam(
+    urlPrefix ? `${urlPrefix}PageIndex` : "pageIndex"
+  );
+  const [pageSizeParam, setPageSizeParam] = useHashParam(
+    urlPrefix ? `${urlPrefix}PageSize` : "pageSize"
+  );
+
+  const pageIndex = pageIndexParam ? parseInt(pageIndexParam) : 0;
+  const pageSize = pageSizeParam ? parseInt(pageSizeParam) : initialPageSize;
+
+  const res = useMemo(() => {
+    const pagination: PaginationState = { pageIndex, pageSize };
+
+    const setPagination = (
+      newValue: PaginationState,
+      history?: HistoryOptions
+    ) => {
+      if (newValue.pageIndex !== pageIndex || newValue.pageSize !== pageSize) {
+        setPageIndexParam(newValue.pageIndex.toString(), {
+          history: history ?? defaultHistory,
+        });
+        setPageSizeParam(newValue.pageSize.toString());
+      }
+    };
+
+    return { pagination, setPagination };
+  }, [pageIndex, pageSize, urlPrefix]);
+
+  return res;
+};

package/src/logo/platforms/index.ts

@@ -5,13 +5,10 @@ export { default as ChromeLogo } from "./Chrome";
 export { default as ClaudeLogo } from "./Claude";
 export { default as CohereLogo } from "./Cohere";
 export { default as ConfluenceLogo } from "./Confluence";
-export { default as DatadogLogo } from "./Datadog";
 export { default as DeepseekLogo } from "./Deepseek";
 export { default as DriveLogo } from "./Drive";
 export { default as FigmaLogo } from "./Figma";
 export { default as FireworksLogo } from "./Fireworks";
-export { default as FreshdeskLogo } from "./Freshdesk";
-export { default as FreshserviceLogo } from "./Freshservice";
 export { default as GcalLogo } from "./Gcal";
 export { default as GeminiLogo } from "./Gemini";
 export { default as GithubLogo } from "./Github";

package/src/stories/DataTable.stories.tsx

@@ -20,11 +20,7 @@ import {
   Input,
   ScrollableDataTable,
 } from "@sparkle/components/";
-import {
-  createRadioSelectionColumn,
-  createSelectionColumn,
-  MenuItem,
-} from "@sparkle/components/DataTable";
+import { createSelectionColumn, MenuItem } from "@sparkle/components/DataTable";
 import { FolderIcon } from "@sparkle/icons/app";
 
 const meta = {
@@ -653,59 +649,3 @@ export const DataTableWithRowSelectionExample = () => {
     </div>
   );
 };
-
-export const DataTableWithRadioSelectionExample = () => {
-  const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
-  const [data] = useState<Data[]>(() => createData(0, 10));
-  const [filter, setFilter] = useState("");
-
-  const columnsWithRadioSelection: ColumnDef<Data>[] = useMemo(
-    () => [createRadioSelectionColumn<Data>(), ...columns],
-    []
-  );
-
-  // Get the selected row ID from rowSelection state
-  const selectedRowId = Object.keys(rowSelection).find(
-    (id) => rowSelection[id]
-  );
-
-  return (
-    <div className="s-flex s-w-full s-max-w-4xl s-flex-col s-gap-6">
-      <h3 className="s-text-lg s-font-medium">
-        DataTable with Radio Selection (Single Row)
-      </h3>
-
-      <div className="s-flex s-flex-col s-gap-4">
-        <Input
-          name="filter"
-          placeholder="Filter"
-          value={filter}
-          onChange={(e) => setFilter(e.target.value)}
-        />
-
-        <DataTable
-          data={data}
-          filter={filter}
-          filterColumn="name"
-          columns={columnsWithRadioSelection}
-          rowSelection={rowSelection}
-          setRowSelection={setRowSelection}
-          enableRowSelection={true}
-          enableMultiRowSelection={false}
-          getRowId={(row) => row.name}
-        />
-
-        <div className="s-rounded-md s-border s-bg-muted/50 s-p-2">
-          <h4 className="s-mb-2 s-font-medium">Radio Selection State:</h4>
-          <pre className="s-overflow-auto s-text-xs">
-            {JSON.stringify(rowSelection, null, 2)}
-          </pre>
-          <p className="s-mt-2 s-text-sm">
-            {selectedRowId ? `Selected: ${selectedRowId}` : "No row selected"}{" "}
-            (only one row can be selected at a time)
-          </p>
-        </div>
-      </div>
-    </div>
-  );
-};

package/src/stories/Markdown.stories.tsx

@@ -29,13 +29,6 @@ const example = `
 
 ### Level 3 Title
 
-#### Level 4 Title
-
-##### Level 5 Title
-
-###### Level 6 Title
-
-
 This is a paragraph with **bold** text and *italic* text. This is \`code\` block:
 \`\`\`
 Block 

package/src/stories/Pagination.stories.tsx

@@ -0,0 +1,92 @@
+import type { Meta } from "@storybook/react";
+import React from "react";
+
+import { usePaginationFromUrl } from "@sparkle/hooks/usePaginationFromUrl";
+
+import { Pagination } from "../index_with_tw_base";
+
+const meta = {
+  title: "Components/Pagination",
+  component: Pagination,
+} satisfies Meta<typeof Pagination>;
+
+export default meta;
+export const PaginationSM = () => {
+  const [pagination, setPagination] = React.useState({
+    pageIndex: 0,
+    pageSize: 50,
+  });
+  return (
+    <Pagination
+      rowCount={960}
+      pagination={pagination}
+      setPagination={setPagination}
+    />
+  );
+};
+
+export const PaginationXS = () => {
+  const [pagination, setPagination] = React.useState({
+    pageIndex: 0,
+    pageSize: 50,
+  });
+  return (
+    <Pagination
+      rowCount={960}
+      size="xs"
+      showDetails={false}
+      pagination={pagination}
+      setPagination={setPagination}
+    />
+  );
+};
+
+export const PaginationNoPageButtons = () => {
+  const [pagination, setPagination] = React.useState({
+    pageIndex: 0,
+    pageSize: 50,
+  });
+  return (
+    <Pagination
+      rowCount={960}
+      size="xs"
+      showDetails={false}
+      showPageButtons={false}
+      pagination={pagination}
+      setPagination={setPagination}
+    />
+  );
+};
+
+export const PaginationButtonsDisabled = () => {
+  const [pagination, setPagination] = React.useState({
+    pageIndex: 0,
+    pageSize: 50,
+  });
+  return (
+    <Pagination
+      rowCount={960}
+      pagination={pagination}
+      setPagination={setPagination}
+      disablePaginationNumbers
+    />
+  );
+};
+
+export const PaginationWithUrl = () => {
+  const { pagination, setPagination } = usePaginationFromUrl({
+    urlPrefix: "example",
+    initialPageSize: 50,
+  });
+
+  return (
+    <>
+      <div className="s-p-2">Current hash: {location.hash}</div>
+      <Pagination
+        rowCount={960}
+        pagination={pagination}
+        setPagination={setPagination}
+      />
+    </>
+  );
+};

package/dist/esm/components/MultiPageDialog.d.ts

@@ -1,45 +0,0 @@
-import * as React from "react";
-import { Button } from "../components";
-declare const MULTI_PAGE_DIALOG_SIZES: readonly ["md", "lg", "xl"];
-type MultiPageDialogSizeType = (typeof MULTI_PAGE_DIALOG_SIZES)[number];
-interface MultiPageDialogPage {
-    id: string;
-    title: string;
-    description?: string;
-    icon?: React.ComponentType;
-    content: React.ReactNode;
-}
-declare const MultiPageDialogRoot: React.FC<import("@radix-ui/react-dialog").DialogProps>;
-declare const MultiPageDialogTrigger: React.ForwardRefExoticComponent<import("@radix-ui/react-dialog").DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
-declare const MultiPageDialogClose: React.ForwardRefExoticComponent<import("@radix-ui/react-dialog").DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
-interface MultiPageDialogFooterProps extends React.HTMLAttributes<HTMLDivElement> {
-    leftButton?: React.ComponentProps<typeof Button>;
-    centerButton?: React.ComponentProps<typeof Button>;
-    rightButton?: React.ComponentProps<typeof Button>;
-}
-declare const MultiPageDialogFooter: {
-    ({ className, children, leftButton, centerButton, rightButton, ...props }: MultiPageDialogFooterProps): React.JSX.Element;
-    displayName: string;
-};
-interface MultiPageDialogProps {
-    pages: MultiPageDialogPage[];
-    currentPageId: string;
-    onPageChange: (pageId: string) => void;
-    size?: MultiPageDialogSizeType;
-    trapFocusScope?: boolean;
-    isAlertDialog?: boolean;
-    showNavigation?: boolean;
-    showHeaderNavigation?: boolean;
-    className?: string;
-    disableNext?: boolean;
-    leftButton?: React.ComponentProps<typeof Button>;
-    centerButton?: React.ComponentProps<typeof Button>;
-    rightButton?: React.ComponentProps<typeof Button>;
-    footerContent?: React.ReactNode;
-}
-interface MultiPageDialogContentProps extends MultiPageDialogProps {
-    children?: never;
-}
-declare const MultiPageDialogContent: React.ForwardRefExoticComponent<MultiPageDialogContentProps & React.RefAttributes<HTMLDivElement>>;
-export { MultiPageDialogRoot as MultiPageDialog, MultiPageDialogClose, MultiPageDialogContent, MultiPageDialogFooter, type MultiPageDialogFooterProps, type MultiPageDialogPage, type MultiPageDialogProps, MultiPageDialogTrigger, };
-//# sourceMappingURL=MultiPageDialog.d.ts.map

package/dist/esm/components/MultiPageDialog.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"MultiPageDialog.d.ts","sourceRoot":"","sources":["../../../src/components/MultiPageDialog.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,MAAM,EAAoB,MAAM,qBAAqB,CAAC;AAa/D,QAAA,MAAM,uBAAuB,6BAA8B,CAAC;AAC5D,KAAK,uBAAuB,GAAG,CAAC,OAAO,uBAAuB,CAAC,CAAC,MAAM,CAAC,CAAC;AAqBxE,UAAU,mBAAmB;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC3B,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B;AAED,QAAA,MAAM,mBAAmB,wDAAS,CAAC;AACnC,QAAA,MAAM,sBAAsB,+HAAgB,CAAC;AAC7C,QAAA,MAAM,oBAAoB,6HAAc,CAAC;AAEzC,UAAU,0BACR,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5C,UAAU,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,CAAC;IACjD,YAAY,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,CAAC;IACnD,WAAW,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,CAAC;CACnD;AAED,QAAA,MAAM,qBAAqB;+EAOxB,0BAA0B;;CAmB5B,CAAC;AAIF,UAAU,oBAAoB;IAC5B,KAAK,EAAE,mBAAmB,EAAE,CAAC;IAC7B,aAAa,EAAE,MAAM,CAAC;IACtB,YAAY,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,IAAI,CAAC,EAAE,uBAAuB,CAAC;IAC/B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,CAAC;IACjD,YAAY,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,CAAC;IACnD,WAAW,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,CAAC;IAClD,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACjC;AAED,UAAU,2BAA4B,SAAQ,oBAAoB;IAChE,QAAQ,CAAC,EAAE,KAAK,CAAC;CAClB;AAED,QAAA,MAAM,sBAAsB,oGAoL3B,CAAC;AAIF,OAAO,EACL,mBAAmB,IAAI,eAAe,EACtC,oBAAoB,EACpB,sBAAsB,EACtB,qBAAqB,EACrB,KAAK,0BAA0B,EAC/B,KAAK,mBAAmB,EACxB,KAAK,oBAAoB,EACzB,sBAAsB,GACvB,CAAC"}