@webiny/app-admin 0.0.0-unstable.e6f0dc8ca7 → 0.0.0-unstable.eb81deee7e

package/components/IconPicker/IconPickerPresenterProvider.js

@@ -1,19 +1,13 @@
-import React from "react";
-const IconPickerPresenterContext = /*#__PURE__*/React.createContext(undefined);
-export const IconPickerPresenterProvider = ({
-  presenter,
-  children
-}) => {
-  return /*#__PURE__*/React.createElement(IconPickerPresenterContext.Provider, {
-    value: presenter
-  }, children);
-};
-export function useIconPicker() {
-  const context = React.useContext(IconPickerPresenterContext);
-  if (!context) {
-    throw Error(`Missing <IconPickerPresenterProvider> in the component tree!`);
-  }
-  return context;
+import react from "react";
+const IconPickerPresenterContext = /*#__PURE__*/ react.createContext(void 0);
+const IconPickerPresenterProvider = ({ presenter, children })=>/*#__PURE__*/ react.createElement(IconPickerPresenterContext.Provider, {
+        value: presenter
+    }, children);
+function useIconPicker() {
+    const context = react.useContext(IconPickerPresenterContext);
+    if (!context) throw Error("Missing <IconPickerPresenterProvider> in the component tree!");
+    return context;
 }
+export { IconPickerPresenterProvider, useIconPicker };
 
 //# sourceMappingURL=IconPickerPresenterProvider.js.map

package/components/IconPicker/IconPickerPresenterProvider.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","IconPickerPresenterContext","createContext","undefined","IconPickerPresenterProvider","presenter","children","createElement","Provider","value","useIconPicker","context","useContext","Error"],"sources":["IconPickerPresenterProvider.tsx"],"sourcesContent":["import React from \"react\";\n\nimport type { IconPickerPresenterInterface } from \"./IconPickerPresenter.js\";\n\ninterface IconPickerPresenterProviderProps {\n    presenter: IconPickerPresenterInterface;\n    children: React.ReactNode;\n}\n\nconst IconPickerPresenterContext = React.createContext<IconPickerPresenterInterface | undefined>(\n    undefined\n);\n\nexport const IconPickerPresenterProvider = ({\n    presenter,\n    children\n}: IconPickerPresenterProviderProps) => {\n    return (\n        <IconPickerPresenterContext.Provider value={presenter}>\n            {children}\n        </IconPickerPresenterContext.Provider>\n    );\n};\n\nexport function useIconPicker() {\n    const context = React.useContext(IconPickerPresenterContext);\n    if (!context) {\n        throw Error(`Missing <IconPickerPresenterProvider> in the component tree!`);\n    }\n    return context;\n}\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AASzB,MAAMC,0BAA0B,gBAAGD,KAAK,CAACE,aAAa,CAClDC,SACJ,CAAC;AAED,OAAO,MAAMC,2BAA2B,GAAGA,CAAC;EACxCC,SAAS;EACTC;AAC8B,CAAC,KAAK;EACpC,oBACIN,KAAA,CAAAO,aAAA,CAACN,0BAA0B,CAACO,QAAQ;IAACC,KAAK,EAAEJ;EAAU,GACjDC,QACgC,CAAC;AAE9C,CAAC;AAED,OAAO,SAASI,aAAaA,CAAA,EAAG;EAC5B,MAAMC,OAAO,GAAGX,KAAK,CAACY,UAAU,CAACX,0BAA0B,CAAC;EAC5D,IAAI,CAACU,OAAO,EAAE;IACV,MAAME,KAAK,CAAC,8DAA8D,CAAC;EAC/E;EACA,OAAOF,OAAO;AAClB","ignoreList":[]}
+{"version":3,"file":"components/IconPicker/IconPickerPresenterProvider.js","sources":["../../../src/components/IconPicker/IconPickerPresenterProvider.tsx"],"sourcesContent":["import React from \"react\";\n\nimport type { IconPickerPresenterInterface } from \"./IconPickerPresenter.js\";\n\ninterface IconPickerPresenterProviderProps {\n    presenter: IconPickerPresenterInterface;\n    children: React.ReactNode;\n}\n\nconst IconPickerPresenterContext = React.createContext<IconPickerPresenterInterface | undefined>(\n    undefined\n);\n\nexport const IconPickerPresenterProvider = ({\n    presenter,\n    children\n}: IconPickerPresenterProviderProps) => {\n    return (\n        <IconPickerPresenterContext.Provider value={presenter}>\n            {children}\n        </IconPickerPresenterContext.Provider>\n    );\n};\n\nexport function useIconPicker() {\n    const context = React.useContext(IconPickerPresenterContext);\n    if (!context) {\n        throw Error(`Missing <IconPickerPresenterProvider> in the component tree!`);\n    }\n    return context;\n}\n"],"names":["IconPickerPresenterContext","React","undefined","IconPickerPresenterProvider","presenter","children","useIconPicker","context","Error"],"mappings":";AASA,MAAMA,6BAA6B,WAAHA,GAAGC,MAAAA,aAAmB,CAClDC;AAGG,MAAMC,8BAA8B,CAAC,EACxCC,SAAS,EACTC,QAAQ,EACuB,GACxB,WAAP,GACI,oBAACL,2BAA2B,QAAQ;QAAC,OAAOI;OACvCC;AAKN,SAASC;IACZ,MAAMC,UAAUN,MAAAA,UAAgB,CAACD;IACjC,IAAI,CAACO,SACD,MAAMC,MAAM;IAEhB,OAAOD;AACX"}

package/components/IconPicker/IconPickerTab.js

@@ -1,159 +1,116 @@
-import React, { Fragment } from "react";
-import { ReactComponent as SearchIcon } from "@webiny/icons/search.svg";
+import react, { Fragment } from "react";
+import { ReactComponent } from "@webiny/icons/search.svg";
 import { List } from "react-virtualized";
 import groupBy from "lodash/groupBy.js";
-import { Text, DelayedOnChange, Input, Tabs, Icon as IconComponent } from "@webiny/admin-ui";
+import { DelayedOnChange, Icon, Input, Tabs, Text } from "@webiny/admin-ui";
 import { makeDecoratable } from "@webiny/react-composition";
 import { useIconPicker } from "./IconPickerPresenterProvider.js";
 import { useIconType } from "./config/IconType.js";
 import { IconPickerCell, IconPickerRow } from "./components/index.js";
 import { ICON_PICKER_SIZE } from "./types.js";
 const COLUMN_COUNT = 8;
-export const IconPickerTabRenderer = makeDecoratable("IconPickerTabRenderer", () => null);
-const getRows = (icons, size) => {
-  // Group the icons by their category.
-  const groupedObjects = groupBy(icons, "category");
-  const rows = [];
-
-  // Iterate over each category in the grouped icons.
-  for (const key in groupedObjects) {
-    // Skip any group where the key is `undefined` (these icons will be handled separately).
-    if (key !== "undefined") {
-      const rowIcons = groupedObjects[key];
-
-      // Add a row for the category name.
-      rows.push({
-        type: "category-name",
-        name: key
-      });
-
-      // Split the icons in this category into groups of COLUMN_COUNT and add them as rows.
-      while (rowIcons.length) {
+const IconPickerTabRenderer = makeDecoratable("IconPickerTabRenderer", ()=>null);
+const getRows = (icons, size)=>{
+    const groupedObjects = groupBy(icons, "category");
+    const rows = [];
+    for(const key in groupedObjects)if ("undefined" !== key) {
+        const rowIcons = groupedObjects[key];
         rows.push({
-          type: "icons",
-          icons: rowIcons.splice(0, size === ICON_PICKER_SIZE.SMALL ? 6 : COLUMN_COUNT)
+            type: "category-name",
+            name: key
+        });
+        while(rowIcons.length)rows.push({
+            type: "icons",
+            icons: rowIcons.splice(0, size === ICON_PICKER_SIZE.SMALL ? 6 : COLUMN_COUNT)
         });
-      }
     }
-  }
-
-  // Handle icons that don't have a category (key is `undefined`).
-  if (groupedObjects.undefined) {
-    const rowIcons = groupedObjects.undefined;
-
-    // Add a row for the `Uncategorized` category name.
-    rows.push({
-      type: "category-name",
-      name: "Uncategorized"
-    });
-
-    // Split these icons into groups of COLUMN_COUNT and add them as rows.
-    while (rowIcons.length) {
-      rows.push({
-        type: "icons",
-        icons: rowIcons.splice(0, size === ICON_PICKER_SIZE.SMALL ? 6 : COLUMN_COUNT)
-      });
+    if (groupedObjects.undefined) {
+        const rowIcons = groupedObjects.undefined;
+        rows.push({
+            type: "category-name",
+            name: "Uncategorized"
+        });
+        while(rowIcons.length)rows.push({
+            type: "icons",
+            icons: rowIcons.splice(0, size === ICON_PICKER_SIZE.SMALL ? 6 : COLUMN_COUNT)
+        });
     }
-  }
-  return rows;
+    return rows;
 };
-const useIconTypeRows = type => {
-  const presenter = useIconPicker();
-  const icons = presenter.vm.icons.filter(icon => icon.type === type);
-  const rows = getRows(icons, presenter.vm.size);
-  return {
-    isEmpty: rows.length === 0,
-    rows,
-    rowCount: rows.length
-  };
+const useIconTypeRows = (type)=>{
+    const presenter = useIconPicker();
+    const icons = presenter.vm.icons.filter((icon)=>icon.type === type);
+    const rows = getRows(icons, presenter.vm.size);
+    return {
+        isEmpty: 0 === rows.length,
+        rows,
+        rowCount: rows.length
+    };
 };
-const RowRenderer = ({
-  row,
-  style,
-  cellDecorator,
-  onIconClick
-}) => {
-  const presenter = useIconPicker();
-  const value = presenter.vm.selectedIcon;
-  if (row.type === "category-name") {
-    return /*#__PURE__*/React.createElement(IconPickerRow, {
-      style: style
-    }, /*#__PURE__*/React.createElement(Text, {
-      size: "sm",
-      className: "uppercase self-end text-neutral-muted mb-sm"
+const RowRenderer = ({ row, style, cellDecorator, onIconClick })=>{
+    const presenter = useIconPicker();
+    const value = presenter.vm.selectedIcon;
+    if ("category-name" === row.type) return /*#__PURE__*/ react.createElement(IconPickerRow, {
+        style: style
+    }, /*#__PURE__*/ react.createElement(Text, {
+        size: "sm",
+        className: "uppercase self-end text-neutral-muted mb-sm"
     }, row.name));
-  }
-  return /*#__PURE__*/React.createElement(IconPickerRow, {
-    style: style
-  }, row.icons.map((item, itemKey) => /*#__PURE__*/React.createElement(Fragment, {
-    key: itemKey
-  }, cellDecorator(/*#__PURE__*/React.createElement(IconPickerCell, {
-    key: itemKey,
-    icon: item,
-    isActive: item.name === value?.name,
-    onIconClick: () => onIconClick(item)
-  })))));
+    return /*#__PURE__*/ react.createElement(IconPickerRow, {
+        style: style
+    }, row.icons.map((item, itemKey)=>/*#__PURE__*/ react.createElement(Fragment, {
+            key: itemKey
+        }, cellDecorator(/*#__PURE__*/ react.createElement(IconPickerCell, {
+            key: itemKey,
+            icon: item,
+            isActive: item.name === value?.name,
+            onIconClick: ()=>onIconClick(item)
+        })))));
 };
-const noopDecorator = cell => cell;
-export const IconPickerTab = ({
-  label,
-  value,
-  actions,
-  onChange,
-  cellDecorator = noopDecorator
-}) => {
-  const {
-    type
-  } = useIconType();
-  const {
-    isEmpty,
-    rowCount,
-    rows
-  } = useIconTypeRows(type);
-  const presenter = useIconPicker();
-  const size = presenter.vm.size;
-  return /*#__PURE__*/React.createElement(Tabs.Tab, {
-    value: value,
-    trigger: label,
-    content: /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
-      className: "flex items-center justify-center gap-sm"
-    }, /*#__PURE__*/React.createElement(DelayedOnChange, {
-      value: presenter.vm.filter,
-      onChange: value => presenter.setFilter(value)
-    }, ({
-      value,
-      onChange
-    }) => /*#__PURE__*/React.createElement(Input, {
-      value: value,
-      onChange: value => onChange(value),
-      placeholder: "Search icons...",
-      variant: "secondary",
-      size: "md",
-      startIcon: /*#__PURE__*/React.createElement(IconComponent, {
-        icon: /*#__PURE__*/React.createElement(SearchIcon, null),
-        label: "Search icons"
-      })
-    })), actions ? /*#__PURE__*/React.createElement("div", null, actions) : null), /*#__PURE__*/React.createElement("div", {
-      className: "relative"
-    }, isEmpty ? /*#__PURE__*/React.createElement("div", {
-      className: "pt-md text-neutral-strong"
-    }, /*#__PURE__*/React.createElement(Text, null, "No results found.")) : /*#__PURE__*/React.createElement(List, {
-      className: "outline-none",
-      rowRenderer: ({
-        key,
-        ...props
-      }) => /*#__PURE__*/React.createElement(RowRenderer, Object.assign({
-        key: key,
-        row: rows[props.index],
-        cellDecorator: cellDecorator,
-        onIconClick: onChange
-      }, props)),
-      width: size === ICON_PICKER_SIZE.SMALL ? 232 : 312,
-      height: size === ICON_PICKER_SIZE.SMALL ? 240 : 350,
-      rowCount: rowCount,
-      rowHeight: 40
-    })))
-  });
+const noopDecorator = (cell)=>cell;
+const IconPickerTab = ({ label, value, actions, onChange, cellDecorator = noopDecorator })=>{
+    const { type } = useIconType();
+    const { isEmpty, rowCount, rows } = useIconTypeRows(type);
+    const presenter = useIconPicker();
+    const size = presenter.vm.size;
+    return /*#__PURE__*/ react.createElement(Tabs.Tab, {
+        value: value,
+        trigger: label,
+        content: /*#__PURE__*/ react.createElement("div", null, /*#__PURE__*/ react.createElement("div", {
+            className: "flex items-center justify-center gap-sm"
+        }, /*#__PURE__*/ react.createElement(DelayedOnChange, {
+            value: presenter.vm.filter,
+            onChange: (value)=>presenter.setFilter(value)
+        }, ({ value, onChange })=>/*#__PURE__*/ react.createElement(Input, {
+                value: value,
+                onChange: (value)=>onChange(value),
+                placeholder: "Search icons...",
+                variant: "secondary",
+                size: "md",
+                startIcon: /*#__PURE__*/ react.createElement(Icon, {
+                    icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+                    label: "Search icons"
+                })
+            })), actions ? /*#__PURE__*/ react.createElement("div", null, actions) : null), /*#__PURE__*/ react.createElement("div", {
+            className: "relative"
+        }, isEmpty ? /*#__PURE__*/ react.createElement("div", {
+            className: "pt-md text-neutral-strong"
+        }, /*#__PURE__*/ react.createElement(Text, null, "No results found.")) : /*#__PURE__*/ react.createElement(List, {
+            className: "outline-none",
+            rowRenderer: ({ key, ...props })=>/*#__PURE__*/ react.createElement(RowRenderer, {
+                    key: key,
+                    row: rows[props.index],
+                    cellDecorator: cellDecorator,
+                    onIconClick: onChange,
+                    ...props
+                }),
+            width: size === ICON_PICKER_SIZE.SMALL ? 232 : 312,
+            height: size === ICON_PICKER_SIZE.SMALL ? 240 : 350,
+            rowCount: rowCount,
+            rowHeight: 40
+        })))
+    });
 };
+export { IconPickerTab, IconPickerTabRenderer };
 
 //# sourceMappingURL=IconPickerTab.js.map

package/components/IconPicker/IconPickerTab.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Fragment","ReactComponent","SearchIcon","List","groupBy","Text","DelayedOnChange","Input","Tabs","Icon","IconComponent","makeDecoratable","useIconPicker","useIconType","IconPickerCell","IconPickerRow","ICON_PICKER_SIZE","COLUMN_COUNT","IconPickerTabRenderer","getRows","icons","size","groupedObjects","rows","key","rowIcons","push","type","name","length","splice","SMALL","undefined","useIconTypeRows","presenter","vm","filter","icon","isEmpty","rowCount","RowRenderer","row","style","cellDecorator","onIconClick","value","selectedIcon","createElement","className","map","item","itemKey","isActive","noopDecorator","cell","IconPickerTab","label","actions","onChange","Tab","trigger","content","setFilter","placeholder","variant","startIcon","rowRenderer","props","Object","assign","index","width","height","rowHeight"],"sources":["IconPickerTab.tsx"],"sourcesContent":["import React, { Fragment } from \"react\";\nimport { ReactComponent as SearchIcon } from \"@webiny/icons/search.svg\";\nimport { List } from \"react-virtualized\";\nimport groupBy from \"lodash/groupBy.js\";\n\nimport { Text, DelayedOnChange, Input, Tabs, Icon as IconComponent } from \"@webiny/admin-ui\";\nimport { makeDecoratable } from \"@webiny/react-composition\";\n\nimport { useIconPicker } from \"./IconPickerPresenterProvider.js\";\nimport { useIconType } from \"./config/IconType.js\";\nimport { IconPickerCell, IconPickerRow } from \"./components/index.js\";\nimport type { Icon, IconPickerGridRow } from \"./types.js\";\nimport { ICON_PICKER_SIZE } from \"./types.js\";\n\nconst COLUMN_COUNT = 8;\n\nexport const IconPickerTabRenderer = makeDecoratable(\"IconPickerTabRenderer\", () => null);\n\nconst getRows = (icons: Icon[], size?: string) => {\n    // Group the icons by their category.\n    const groupedObjects = groupBy(icons, \"category\");\n    const rows: IconPickerGridRow[] = [];\n\n    // Iterate over each category in the grouped icons.\n    for (const key in groupedObjects) {\n        // Skip any group where the key is `undefined` (these icons will be handled separately).\n        if (key !== \"undefined\") {\n            const rowIcons = groupedObjects[key];\n\n            // Add a row for the category name.\n            rows.push({ type: \"category-name\", name: key });\n\n            // Split the icons in this category into groups of COLUMN_COUNT and add them as rows.\n            while (rowIcons.length) {\n                rows.push({\n                    type: \"icons\",\n                    icons: rowIcons.splice(0, size === ICON_PICKER_SIZE.SMALL ? 6 : COLUMN_COUNT)\n                });\n            }\n        }\n    }\n\n    // Handle icons that don't have a category (key is `undefined`).\n    if (groupedObjects.undefined) {\n        const rowIcons = groupedObjects.undefined;\n\n        // Add a row for the `Uncategorized` category name.\n        rows.push({ type: \"category-name\", name: \"Uncategorized\" });\n\n        // Split these icons into groups of COLUMN_COUNT and add them as rows.\n        while (rowIcons.length) {\n            rows.push({\n                type: \"icons\",\n                icons: rowIcons.splice(0, size === ICON_PICKER_SIZE.SMALL ? 6 : COLUMN_COUNT)\n            });\n        }\n    }\n\n    return rows;\n};\n\nconst useIconTypeRows = (type: string) => {\n    const presenter = useIconPicker();\n    const icons = presenter.vm.icons.filter(icon => icon.type === type);\n    const rows = getRows(icons, presenter.vm.size);\n\n    return {\n        isEmpty: rows.length === 0,\n        rows,\n        rowCount: rows.length\n    };\n};\n\ninterface RenderRowProps {\n    onIconClick: (icon: Icon) => void;\n    style: Record<string, any>;\n    row: IconPickerGridRow;\n    cellDecorator: CellDecorator;\n}\n\nconst RowRenderer = ({ row, style, cellDecorator, onIconClick }: RenderRowProps) => {\n    const presenter = useIconPicker();\n    const value = presenter.vm.selectedIcon;\n\n    if (row.type === \"category-name\") {\n        return (\n            <IconPickerRow style={style}>\n                <Text size={\"sm\"} className={\"uppercase self-end text-neutral-muted mb-sm\"}>\n                    {row.name}\n                </Text>\n            </IconPickerRow>\n        );\n    }\n\n    return (\n        <IconPickerRow style={style}>\n            {row.icons.map((item, itemKey) => (\n                <Fragment key={itemKey}>\n                    {cellDecorator(\n                        <IconPickerCell\n                            key={itemKey}\n                            icon={item}\n                            isActive={item.name === value?.name}\n                            onIconClick={() => onIconClick(item)}\n                        />\n                    )}\n                </Fragment>\n            ))}\n        </IconPickerRow>\n    );\n};\n\ninterface CellDecorator {\n    (cell: React.ReactElement): React.ReactElement;\n}\n\nconst noopDecorator: CellDecorator = cell => cell;\n\nexport interface IconPickerTabProps {\n    label: string;\n    value: string;\n    onChange: (icon: Icon) => void;\n    actions?: React.ReactElement;\n    cellDecorator?: CellDecorator;\n}\n\nexport const IconPickerTab = ({\n    label,\n    value,\n    actions,\n    onChange,\n    cellDecorator = noopDecorator\n}: IconPickerTabProps) => {\n    const { type } = useIconType();\n    const { isEmpty, rowCount, rows } = useIconTypeRows(type);\n    const presenter = useIconPicker();\n    const size = presenter.vm.size;\n\n    return (\n        <Tabs.Tab\n            value={value}\n            trigger={label}\n            content={\n                <div>\n                    <div className={\"flex items-center justify-center gap-sm\"}>\n                        <DelayedOnChange\n                            value={presenter.vm.filter}\n                            onChange={value => presenter.setFilter(value)}\n                        >\n                            {({ value, onChange }) => (\n                                <Input\n                                    value={value}\n                                    onChange={value => onChange(value as unknown as string)}\n                                    placeholder={\"Search icons...\"}\n                                    variant={\"secondary\"}\n                                    size={\"md\"}\n                                    startIcon={\n                                        <IconComponent\n                                            icon={<SearchIcon />}\n                                            label={\"Search icons\"}\n                                        />\n                                    }\n                                />\n                            )}\n                        </DelayedOnChange>\n                        {actions ? <div>{actions}</div> : null}\n                    </div>\n                    <div className={\"relative\"}>\n                        {isEmpty ? (\n                            <div className={\"pt-md text-neutral-strong\"}>\n                                <Text>{\"No results found.\"}</Text>\n                            </div>\n                        ) : (\n                            <List\n                                className={\"outline-none\"}\n                                rowRenderer={({ key, ...props }) => (\n                                    <RowRenderer\n                                        key={key}\n                                        row={rows[props.index]}\n                                        cellDecorator={cellDecorator}\n                                        onIconClick={onChange}\n                                        {...props}\n                                    />\n                                )}\n                                width={size === ICON_PICKER_SIZE.SMALL ? 232 : 312}\n                                height={size === ICON_PICKER_SIZE.SMALL ? 240 : 350}\n                                rowCount={rowCount}\n                                rowHeight={40}\n                            />\n                        )}\n                    </div>\n                </div>\n            }\n        />\n    );\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"components/IconPicker/IconPickerTab.js","sources":["../../../src/components/IconPicker/IconPickerTab.tsx"],"sourcesContent":["import React, { Fragment } from \"react\";\nimport { ReactComponent as SearchIcon } from \"@webiny/icons/search.svg\";\nimport { List } from \"react-virtualized\";\nimport groupBy from \"lodash/groupBy.js\";\n\nimport { Text, DelayedOnChange, Input, Tabs, Icon as IconComponent } from \"@webiny/admin-ui\";\nimport { makeDecoratable } from \"@webiny/react-composition\";\n\nimport { useIconPicker } from \"./IconPickerPresenterProvider.js\";\nimport { useIconType } from \"./config/IconType.js\";\nimport { IconPickerCell, IconPickerRow } from \"./components/index.js\";\nimport type { Icon, IconPickerGridRow } from \"./types.js\";\nimport { ICON_PICKER_SIZE } from \"./types.js\";\n\nconst COLUMN_COUNT = 8;\n\nexport const IconPickerTabRenderer = makeDecoratable(\"IconPickerTabRenderer\", () => null);\n\nconst getRows = (icons: Icon[], size?: string) => {\n    // Group the icons by their category.\n    const groupedObjects = groupBy(icons, \"category\");\n    const rows: IconPickerGridRow[] = [];\n\n    // Iterate over each category in the grouped icons.\n    for (const key in groupedObjects) {\n        // Skip any group where the key is `undefined` (these icons will be handled separately).\n        if (key !== \"undefined\") {\n            const rowIcons = groupedObjects[key];\n\n            // Add a row for the category name.\n            rows.push({ type: \"category-name\", name: key });\n\n            // Split the icons in this category into groups of COLUMN_COUNT and add them as rows.\n            while (rowIcons.length) {\n                rows.push({\n                    type: \"icons\",\n                    icons: rowIcons.splice(0, size === ICON_PICKER_SIZE.SMALL ? 6 : COLUMN_COUNT)\n                });\n            }\n        }\n    }\n\n    // Handle icons that don't have a category (key is `undefined`).\n    if (groupedObjects.undefined) {\n        const rowIcons = groupedObjects.undefined;\n\n        // Add a row for the `Uncategorized` category name.\n        rows.push({ type: \"category-name\", name: \"Uncategorized\" });\n\n        // Split these icons into groups of COLUMN_COUNT and add them as rows.\n        while (rowIcons.length) {\n            rows.push({\n                type: \"icons\",\n                icons: rowIcons.splice(0, size === ICON_PICKER_SIZE.SMALL ? 6 : COLUMN_COUNT)\n            });\n        }\n    }\n\n    return rows;\n};\n\nconst useIconTypeRows = (type: string) => {\n    const presenter = useIconPicker();\n    const icons = presenter.vm.icons.filter(icon => icon.type === type);\n    const rows = getRows(icons, presenter.vm.size);\n\n    return {\n        isEmpty: rows.length === 0,\n        rows,\n        rowCount: rows.length\n    };\n};\n\ninterface RenderRowProps {\n    onIconClick: (icon: Icon) => void;\n    style: Record<string, any>;\n    row: IconPickerGridRow;\n    cellDecorator: CellDecorator;\n}\n\nconst RowRenderer = ({ row, style, cellDecorator, onIconClick }: RenderRowProps) => {\n    const presenter = useIconPicker();\n    const value = presenter.vm.selectedIcon;\n\n    if (row.type === \"category-name\") {\n        return (\n            <IconPickerRow style={style}>\n                <Text size={\"sm\"} className={\"uppercase self-end text-neutral-muted mb-sm\"}>\n                    {row.name}\n                </Text>\n            </IconPickerRow>\n        );\n    }\n\n    return (\n        <IconPickerRow style={style}>\n            {row.icons.map((item, itemKey) => (\n                <Fragment key={itemKey}>\n                    {cellDecorator(\n                        <IconPickerCell\n                            key={itemKey}\n                            icon={item}\n                            isActive={item.name === value?.name}\n                            onIconClick={() => onIconClick(item)}\n                        />\n                    )}\n                </Fragment>\n            ))}\n        </IconPickerRow>\n    );\n};\n\ninterface CellDecorator {\n    (cell: React.ReactElement): React.ReactElement;\n}\n\nconst noopDecorator: CellDecorator = cell => cell;\n\nexport interface IconPickerTabProps {\n    label: string;\n    value: string;\n    onChange: (icon: Icon) => void;\n    actions?: React.ReactElement;\n    cellDecorator?: CellDecorator;\n}\n\nexport const IconPickerTab = ({\n    label,\n    value,\n    actions,\n    onChange,\n    cellDecorator = noopDecorator\n}: IconPickerTabProps) => {\n    const { type } = useIconType();\n    const { isEmpty, rowCount, rows } = useIconTypeRows(type);\n    const presenter = useIconPicker();\n    const size = presenter.vm.size;\n\n    return (\n        <Tabs.Tab\n            value={value}\n            trigger={label}\n            content={\n                <div>\n                    <div className={\"flex items-center justify-center gap-sm\"}>\n                        <DelayedOnChange\n                            value={presenter.vm.filter}\n                            onChange={value => presenter.setFilter(value)}\n                        >\n                            {({ value, onChange }) => (\n                                <Input\n                                    value={value}\n                                    onChange={value => onChange(value as unknown as string)}\n                                    placeholder={\"Search icons...\"}\n                                    variant={\"secondary\"}\n                                    size={\"md\"}\n                                    startIcon={\n                                        <IconComponent\n                                            icon={<SearchIcon />}\n                                            label={\"Search icons\"}\n                                        />\n                                    }\n                                />\n                            )}\n                        </DelayedOnChange>\n                        {actions ? <div>{actions}</div> : null}\n                    </div>\n                    <div className={\"relative\"}>\n                        {isEmpty ? (\n                            <div className={\"pt-md text-neutral-strong\"}>\n                                <Text>{\"No results found.\"}</Text>\n                            </div>\n                        ) : (\n                            <List\n                                className={\"outline-none\"}\n                                rowRenderer={({ key, ...props }) => (\n                                    <RowRenderer\n                                        key={key}\n                                        row={rows[props.index]}\n                                        cellDecorator={cellDecorator}\n                                        onIconClick={onChange}\n                                        {...props}\n                                    />\n                                )}\n                                width={size === ICON_PICKER_SIZE.SMALL ? 232 : 312}\n                                height={size === ICON_PICKER_SIZE.SMALL ? 240 : 350}\n                                rowCount={rowCount}\n                                rowHeight={40}\n                            />\n                        )}\n                    </div>\n                </div>\n            }\n        />\n    );\n};\n"],"names":["COLUMN_COUNT","IconPickerTabRenderer","makeDecoratable","getRows","icons","size","groupedObjects","groupBy","rows","key","rowIcons","ICON_PICKER_SIZE","useIconTypeRows","type","presenter","useIconPicker","icon","RowRenderer","row","style","cellDecorator","onIconClick","value","IconPickerRow","Text","item","itemKey","Fragment","IconPickerCell","noopDecorator","cell","IconPickerTab","label","actions","onChange","useIconType","isEmpty","rowCount","Tabs","DelayedOnChange","Input","IconComponent","SearchIcon","List","props"],"mappings":"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"}

package/components/IconPicker/IconRenderer.js

@@ -1,27 +1,19 @@
-import React from "react";
+import react from "react";
 import { toJS } from "mobx";
-import { makeDecoratable, createVoidComponent } from "@webiny/react-composition";
-export const IconRenderer = makeDecoratable("IconPickerIcon", createVoidComponent());
-const IconContext = /*#__PURE__*/React.createContext(undefined);
-export const IconProvider = ({
-  icon,
-  size = 32,
-  children
-}) => {
-  // I want to use the POJO via the context, to reduce the need of using `observer` HOC everywhere.
-  return /*#__PURE__*/React.createElement(IconContext.Provider, {
-    value: {
-      icon: toJS(icon),
-      size
-    }
-  }, children);
-};
-export function useIcon() {
-  const context = React.useContext(IconContext);
-  if (!context) {
-    throw Error(`Missing <IconProvider> in the component tree!`);
-  }
-  return context;
+import { createVoidComponent, makeDecoratable } from "@webiny/react-composition";
+const IconRenderer = makeDecoratable("IconPickerIcon", createVoidComponent());
+const IconContext = /*#__PURE__*/ react.createContext(void 0);
+const IconProvider = ({ icon, size = 32, children })=>/*#__PURE__*/ react.createElement(IconContext.Provider, {
+        value: {
+            icon: toJS(icon),
+            size
+        }
+    }, children);
+function useIcon() {
+    const context = react.useContext(IconContext);
+    if (!context) throw Error("Missing <IconProvider> in the component tree!");
+    return context;
 }
+export { IconProvider, IconRenderer, useIcon };
 
 //# sourceMappingURL=IconRenderer.js.map

package/components/IconPicker/IconRenderer.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","toJS","makeDecoratable","createVoidComponent","IconRenderer","IconContext","createContext","undefined","IconProvider","icon","size","children","createElement","Provider","value","useIcon","context","useContext","Error"],"sources":["IconRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport { toJS } from \"mobx\";\n\nimport { makeDecoratable, createVoidComponent } from \"@webiny/react-composition\";\n\nimport type { Icon } from \"./types.js\";\n\nexport const IconRenderer = makeDecoratable(\"IconPickerIcon\", createVoidComponent());\n\ninterface IconContext<T extends Icon = Icon> {\n    icon: T;\n    size: number;\n}\n\nconst IconContext = React.createContext<IconContext | undefined>(undefined);\n\ninterface IconProviderProps {\n    icon: Icon;\n    size?: number;\n    children: React.ReactNode;\n}\n\nexport const IconProvider = ({ icon, size = 32, children }: IconProviderProps) => {\n    // I want to use the POJO via the context, to reduce the need of using `observer` HOC everywhere.\n    return (\n        <IconContext.Provider value={{ icon: toJS(icon), size }}>{children}</IconContext.Provider>\n    );\n};\n\nexport function useIcon<T extends Icon = Icon>(): IconContext<T> {\n    const context = React.useContext(IconContext);\n    if (!context) {\n        throw Error(`Missing <IconProvider> in the component tree!`);\n    }\n    return context as IconContext<T>;\n}\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,QAAQ,MAAM;AAE3B,SAASC,eAAe,EAAEC,mBAAmB,QAAQ,2BAA2B;AAIhF,OAAO,MAAMC,YAAY,GAAGF,eAAe,CAAC,gBAAgB,EAAEC,mBAAmB,CAAC,CAAC,CAAC;AAOpF,MAAME,WAAW,gBAAGL,KAAK,CAACM,aAAa,CAA0BC,SAAS,CAAC;AAQ3E,OAAO,MAAMC,YAAY,GAAGA,CAAC;EAAEC,IAAI;EAAEC,IAAI,GAAG,EAAE;EAAEC;AAA4B,CAAC,KAAK;EAC9E;EACA,oBACIX,KAAA,CAAAY,aAAA,CAACP,WAAW,CAACQ,QAAQ;IAACC,KAAK,EAAE;MAAEL,IAAI,EAAER,IAAI,CAACQ,IAAI,CAAC;MAAEC;IAAK;EAAE,GAAEC,QAA+B,CAAC;AAElG,CAAC;AAED,OAAO,SAASI,OAAOA,CAAA,EAA0C;EAC7D,MAAMC,OAAO,GAAGhB,KAAK,CAACiB,UAAU,CAACZ,WAAW,CAAC;EAC7C,IAAI,CAACW,OAAO,EAAE;IACV,MAAME,KAAK,CAAC,+CAA+C,CAAC;EAChE;EACA,OAAOF,OAAO;AAClB","ignoreList":[]}
+{"version":3,"file":"components/IconPicker/IconRenderer.js","sources":["../../../src/components/IconPicker/IconRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport { toJS } from \"mobx\";\n\nimport { makeDecoratable, createVoidComponent } from \"@webiny/react-composition\";\n\nimport type { Icon } from \"./types.js\";\n\nexport const IconRenderer = makeDecoratable(\"IconPickerIcon\", createVoidComponent());\n\ninterface IconContext<T extends Icon = Icon> {\n    icon: T;\n    size: number;\n}\n\nconst IconContext = React.createContext<IconContext | undefined>(undefined);\n\ninterface IconProviderProps {\n    icon: Icon;\n    size?: number;\n    children: React.ReactNode;\n}\n\nexport const IconProvider = ({ icon, size = 32, children }: IconProviderProps) => {\n    // I want to use the POJO via the context, to reduce the need of using `observer` HOC everywhere.\n    return (\n        <IconContext.Provider value={{ icon: toJS(icon), size }}>{children}</IconContext.Provider>\n    );\n};\n\nexport function useIcon<T extends Icon = Icon>(): IconContext<T> {\n    const context = React.useContext(IconContext);\n    if (!context) {\n        throw Error(`Missing <IconProvider> in the component tree!`);\n    }\n    return context as IconContext<T>;\n}\n"],"names":["IconRenderer","makeDecoratable","createVoidComponent","IconContext","React","undefined","IconProvider","icon","size","children","toJS","useIcon","context","Error"],"mappings":";;;AAOO,MAAMA,eAAeC,gBAAgB,kBAAkBC;AAO9D,MAAMC,cAAc,WAAHA,GAAGC,MAAAA,aAAmB,CAA0BC;AAQ1D,MAAMC,eAAe,CAAC,EAAEC,IAAI,EAAEC,OAAO,EAAE,EAAEC,QAAQ,EAAqB,GAElE,WAAP,GACI,oBAACN,YAAY,QAAQ;QAAC,OAAO;YAAE,MAAMO,KAAKH;YAAOC;QAAK;OAAIC;AAI3D,SAASE;IACZ,MAAMC,UAAUR,MAAAA,UAAgB,CAACD;IACjC,IAAI,CAACS,SACD,MAAMC,MAAM;IAEhB,OAAOD;AACX"}

package/components/IconPicker/IconRepository.js

@@ -1,47 +1,48 @@
 import cloneDeep from "lodash/cloneDeep.js";
 import { makeAutoObservable, runInAction } from "mobx";
 import { Loading } from "./Loading.js";
-export class IconRepository {
-  icons = [];
-  constructor(iconTypes, iconPackProviders) {
-    this.iconTypes = iconTypes;
-    this.loading = new Loading(true);
-    this.iconPackProviders = iconPackProviders;
-    makeAutoObservable(this);
-  }
-  async loadIcons() {
-    if (this.icons.length > 0) {
-      return;
+class IconRepository {
+    constructor(iconTypes, iconPackProviders){
+        this.icons = [];
+        this.iconTypes = iconTypes;
+        this.loading = new Loading(true);
+        this.iconPackProviders = iconPackProviders;
+        makeAutoObservable(this);
+    }
+    async loadIcons() {
+        if (this.icons.length > 0) return;
+        const icons = await this.runWithLoading(async ()=>{
+            const icons = await Promise.all(this.iconPackProviders.map((provider)=>provider.getIcons()));
+            return icons.flat();
+        });
+        const iconTypes = this.iconTypes.map((iconType)=>iconType.name);
+        runInAction(()=>{
+            this.icons = icons.filter((icon)=>iconTypes.includes(icon.type));
+        });
+    }
+    getIcons() {
+        return cloneDeep(this.icons);
+    }
+    addIcon(icon) {
+        this.icons = [
+            ...this.icons,
+            icon
+        ];
+    }
+    getIconTypes() {
+        return this.iconTypes;
+    }
+    getLoading() {
+        return {
+            isLoading: this.loading.isLoading,
+            loadingLabel: this.loading.loadingLabel,
+            message: this.loading.feedback
+        };
+    }
+    async runWithLoading(action, loadingLabel, successMessage, failureMessage) {
+        return await this.loading.runCallbackWithLoading(action, loadingLabel, successMessage, failureMessage);
     }
-    const icons = await this.runWithLoading(async () => {
-      const icons = await Promise.all(this.iconPackProviders.map(provider => provider.getIcons()));
-      return icons.flat();
-    });
-    const iconTypes = this.iconTypes.map(iconType => iconType.name);
-    runInAction(() => {
-      // Make sure we only work with known icon types.
-      this.icons = icons.filter(icon => iconTypes.includes(icon.type));
-    });
-  }
-  getIcons() {
-    return cloneDeep(this.icons);
-  }
-  addIcon(icon) {
-    this.icons = [...this.icons, icon];
-  }
-  getIconTypes() {
-    return this.iconTypes;
-  }
-  getLoading() {
-    return {
-      isLoading: this.loading.isLoading,
-      loadingLabel: this.loading.loadingLabel,
-      message: this.loading.feedback
-    };
-  }
-  async runWithLoading(action, loadingLabel, successMessage, failureMessage) {
-    return await this.loading.runCallbackWithLoading(action, loadingLabel, successMessage, failureMessage);
-  }
 }
+export { IconRepository };
 
 //# sourceMappingURL=IconRepository.js.map

package/components/IconPicker/IconRepository.js.map

@@ -1 +1 @@
-{"version":3,"names":["cloneDeep","makeAutoObservable","runInAction","Loading","IconRepository","icons","constructor","iconTypes","iconPackProviders","loading","loadIcons","length","runWithLoading","Promise","all","map","provider","getIcons","flat","iconType","name","filter","icon","includes","type","addIcon","getIconTypes","getLoading","isLoading","loadingLabel","message","feedback","action","successMessage","failureMessage","runCallbackWithLoading"],"sources":["IconRepository.ts"],"sourcesContent":["import cloneDeep from \"lodash/cloneDeep.js\";\nimport { makeAutoObservable, runInAction } from \"mobx\";\n\nimport { Loading } from \"./Loading.js\";\nimport type { IconPackProviderInterface as IconPackProvider, IconType } from \"./config/index.js\";\nimport type { Icon } from \"./types.js\";\n\nexport class IconRepository {\n    private readonly iconPackProviders: IconPackProvider[];\n    private readonly iconTypes: IconType[];\n    private loading: Loading;\n    private icons: Icon[] = [];\n\n    constructor(iconTypes: IconType[], iconPackProviders: IconPackProvider[]) {\n        this.iconTypes = iconTypes;\n        this.loading = new Loading(true);\n        this.iconPackProviders = iconPackProviders;\n        makeAutoObservable(this);\n    }\n\n    async loadIcons() {\n        if (this.icons.length > 0) {\n            return;\n        }\n\n        const icons = await this.runWithLoading(async () => {\n            const icons = await Promise.all(\n                this.iconPackProviders.map(provider => provider.getIcons())\n            );\n            return icons.flat();\n        });\n\n        const iconTypes = this.iconTypes.map(iconType => iconType.name);\n\n        runInAction(() => {\n            // Make sure we only work with known icon types.\n            this.icons = icons.filter(icon => iconTypes.includes(icon.type));\n        });\n    }\n\n    getIcons() {\n        return cloneDeep(this.icons);\n    }\n\n    addIcon(icon: Icon) {\n        this.icons = [...this.icons, icon];\n    }\n\n    getIconTypes() {\n        return this.iconTypes;\n    }\n\n    getLoading() {\n        return {\n            isLoading: this.loading.isLoading,\n            loadingLabel: this.loading.loadingLabel,\n            message: this.loading.feedback\n        };\n    }\n\n    private async runWithLoading<T>(\n        action: () => Promise<T>,\n        loadingLabel?: string,\n        successMessage?: string,\n        failureMessage?: string\n    ) {\n        return await this.loading.runCallbackWithLoading(\n            action,\n            loadingLabel,\n            successMessage,\n            failureMessage\n        );\n    }\n}\n"],"mappings":"AAAA,OAAOA,SAAS,MAAM,qBAAqB;AAC3C,SAASC,kBAAkB,EAAEC,WAAW,QAAQ,MAAM;AAEtD,SAASC,OAAO;AAIhB,OAAO,MAAMC,cAAc,CAAC;EAIhBC,KAAK,GAAW,EAAE;EAE1BC,WAAWA,CAACC,SAAqB,EAAEC,iBAAqC,EAAE;IACtE,IAAI,CAACD,SAAS,GAAGA,SAAS;IAC1B,IAAI,CAACE,OAAO,GAAG,IAAIN,OAAO,CAAC,IAAI,CAAC;IAChC,IAAI,CAACK,iBAAiB,GAAGA,iBAAiB;IAC1CP,kBAAkB,CAAC,IAAI,CAAC;EAC5B;EAEA,MAAMS,SAASA,CAAA,EAAG;IACd,IAAI,IAAI,CAACL,KAAK,CAACM,MAAM,GAAG,CAAC,EAAE;MACvB;IACJ;IAEA,MAAMN,KAAK,GAAG,MAAM,IAAI,CAACO,cAAc,CAAC,YAAY;MAChD,MAAMP,KAAK,GAAG,MAAMQ,OAAO,CAACC,GAAG,CAC3B,IAAI,CAACN,iBAAiB,CAACO,GAAG,CAACC,QAAQ,IAAIA,QAAQ,CAACC,QAAQ,CAAC,CAAC,CAC9D,CAAC;MACD,OAAOZ,KAAK,CAACa,IAAI,CAAC,CAAC;IACvB,CAAC,CAAC;IAEF,MAAMX,SAAS,GAAG,IAAI,CAACA,SAAS,CAACQ,GAAG,CAACI,QAAQ,IAAIA,QAAQ,CAACC,IAAI,CAAC;IAE/DlB,WAAW,CAAC,MAAM;MACd;MACA,IAAI,CAACG,KAAK,GAAGA,KAAK,CAACgB,MAAM,CAACC,IAAI,IAAIf,SAAS,CAACgB,QAAQ,CAACD,IAAI,CAACE,IAAI,CAAC,CAAC;IACpE,CAAC,CAAC;EACN;EAEAP,QAAQA,CAAA,EAAG;IACP,OAAOjB,SAAS,CAAC,IAAI,CAACK,KAAK,CAAC;EAChC;EAEAoB,OAAOA,CAACH,IAAU,EAAE;IAChB,IAAI,CAACjB,KAAK,GAAG,CAAC,GAAG,IAAI,CAACA,KAAK,EAAEiB,IAAI,CAAC;EACtC;EAEAI,YAAYA,CAAA,EAAG;IACX,OAAO,IAAI,CAACnB,SAAS;EACzB;EAEAoB,UAAUA,CAAA,EAAG;IACT,OAAO;MACHC,SAAS,EAAE,IAAI,CAACnB,OAAO,CAACmB,SAAS;MACjCC,YAAY,EAAE,IAAI,CAACpB,OAAO,CAACoB,YAAY;MACvCC,OAAO,EAAE,IAAI,CAACrB,OAAO,CAACsB;IAC1B,CAAC;EACL;EAEA,MAAcnB,cAAcA,CACxBoB,MAAwB,EACxBH,YAAqB,EACrBI,cAAuB,EACvBC,cAAuB,EACzB;IACE,OAAO,MAAM,IAAI,CAACzB,OAAO,CAAC0B,sBAAsB,CAC5CH,MAAM,EACNH,YAAY,EACZI,cAAc,EACdC,cACJ,CAAC;EACL;AACJ","ignoreList":[]}
+{"version":3,"file":"components/IconPicker/IconRepository.js","sources":["../../../src/components/IconPicker/IconRepository.ts"],"sourcesContent":["import cloneDeep from \"lodash/cloneDeep.js\";\nimport { makeAutoObservable, runInAction } from \"mobx\";\n\nimport { Loading } from \"./Loading.js\";\nimport type { IconPackProviderInterface as IconPackProvider, IconType } from \"./config/index.js\";\nimport type { Icon } from \"./types.js\";\n\nexport class IconRepository {\n    private readonly iconPackProviders: IconPackProvider[];\n    private readonly iconTypes: IconType[];\n    private loading: Loading;\n    private icons: Icon[] = [];\n\n    constructor(iconTypes: IconType[], iconPackProviders: IconPackProvider[]) {\n        this.iconTypes = iconTypes;\n        this.loading = new Loading(true);\n        this.iconPackProviders = iconPackProviders;\n        makeAutoObservable(this);\n    }\n\n    async loadIcons() {\n        if (this.icons.length > 0) {\n            return;\n        }\n\n        const icons = await this.runWithLoading(async () => {\n            const icons = await Promise.all(\n                this.iconPackProviders.map(provider => provider.getIcons())\n            );\n            return icons.flat();\n        });\n\n        const iconTypes = this.iconTypes.map(iconType => iconType.name);\n\n        runInAction(() => {\n            // Make sure we only work with known icon types.\n            this.icons = icons.filter(icon => iconTypes.includes(icon.type));\n        });\n    }\n\n    getIcons() {\n        return cloneDeep(this.icons);\n    }\n\n    addIcon(icon: Icon) {\n        this.icons = [...this.icons, icon];\n    }\n\n    getIconTypes() {\n        return this.iconTypes;\n    }\n\n    getLoading() {\n        return {\n            isLoading: this.loading.isLoading,\n            loadingLabel: this.loading.loadingLabel,\n            message: this.loading.feedback\n        };\n    }\n\n    private async runWithLoading<T>(\n        action: () => Promise<T>,\n        loadingLabel?: string,\n        successMessage?: string,\n        failureMessage?: string\n    ) {\n        return await this.loading.runCallbackWithLoading(\n            action,\n            loadingLabel,\n            successMessage,\n            failureMessage\n        );\n    }\n}\n"],"names":["IconRepository","iconTypes","iconPackProviders","Loading","makeAutoObservable","icons","Promise","provider","iconType","runInAction","icon","cloneDeep","action","loadingLabel","successMessage","failureMessage"],"mappings":";;;AAOO,MAAMA;IAMT,YAAYC,SAAqB,EAAEC,iBAAqC,CAAE;aAFlE,KAAK,GAAW,EAAE;QAGtB,IAAI,CAAC,SAAS,GAAGD;QACjB,IAAI,CAAC,OAAO,GAAG,IAAIE,QAAQ;QAC3B,IAAI,CAAC,iBAAiB,GAAGD;QACzBE,mBAAmB,IAAI;IAC3B;IAEA,MAAM,YAAY;QACd,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,GACpB;QAGJ,MAAMC,QAAQ,MAAM,IAAI,CAAC,cAAc,CAAC;YACpC,MAAMA,QAAQ,MAAMC,QAAQ,GAAG,CAC3B,IAAI,CAAC,iBAAiB,CAAC,GAAG,CAACC,CAAAA,WAAYA,SAAS,QAAQ;YAE5D,OAAOF,MAAM,IAAI;QACrB;QAEA,MAAMJ,YAAY,IAAI,CAAC,SAAS,CAAC,GAAG,CAACO,CAAAA,WAAYA,SAAS,IAAI;QAE9DC,YAAY;YAER,IAAI,CAAC,KAAK,GAAGJ,MAAM,MAAM,CAACK,CAAAA,OAAQT,UAAU,QAAQ,CAACS,KAAK,IAAI;QAClE;IACJ;IAEA,WAAW;QACP,OAAOC,UAAU,IAAI,CAAC,KAAK;IAC/B;IAEA,QAAQD,IAAU,EAAE;QAChB,IAAI,CAAC,KAAK,GAAG;eAAI,IAAI,CAAC,KAAK;YAAEA;SAAK;IACtC;IAEA,eAAe;QACX,OAAO,IAAI,CAAC,SAAS;IACzB;IAEA,aAAa;QACT,OAAO;YACH,WAAW,IAAI,CAAC,OAAO,CAAC,SAAS;YACjC,cAAc,IAAI,CAAC,OAAO,CAAC,YAAY;YACvC,SAAS,IAAI,CAAC,OAAO,CAAC,QAAQ;QAClC;IACJ;IAEA,MAAc,eACVE,MAAwB,EACxBC,YAAqB,EACrBC,cAAuB,EACvBC,cAAuB,EACzB;QACE,OAAO,MAAM,IAAI,CAAC,OAAO,CAAC,sBAAsB,CAC5CH,QACAC,cACAC,gBACAC;IAER;AACJ"}