@webiny/app-admin 6.3.0 → 6.4.0-beta.0

package/components/IconPicker/plugins/emojisPlugin.js

@@ -1,127 +1,102 @@
-import React, { useState } from "react";
+import react, { useState } from "react";
 import { observer } from "mobx-react-lite";
-import { cn, PopoverPrimitive } from "@webiny/admin-ui";
+import { PopoverPrimitive, cn } from "@webiny/admin-ui";
 import { useIcon } from "../index.js";
 import { IconPickerTab } from "../IconPickerTab.js";
 import { IconProvider } from "../IconRenderer.js";
 import { useIconPicker } from "../IconPickerPresenterProvider.js";
 import { IconPickerConfig } from "../config/index.js";
-const SKIN_TONES = ["", "\u{1f3fb}", "\u{1f3fc}", "\u{1f3fd}", "\u{1f3fe}", "\u{1f3ff}"];
-const SkinToneSelectWrapper = props => {
-  return /*#__PURE__*/React.createElement("div", {
-    className: cn("size-xl rounded-sm pointer border-solid border-sm border-neutral-muted flex justify-center items-center text-center")
-  }, props.children);
+const SKIN_TONES = [
+    "",
+    "\uD83C\uDFFB",
+    "\uD83C\uDFFC",
+    "\uD83C\uDFFD",
+    "\uD83C\uDFFE",
+    "\uD83C\uDFFF"
+];
+const SkinToneSelectWrapper = (props)=>/*#__PURE__*/ react.createElement("div", {
+        className: cn("size-xl rounded-sm pointer border-solid border-sm border-neutral-muted flex justify-center items-center text-center")
+    }, props.children);
+const Emoji = ()=>{
+    const { icon, size } = useIcon();
+    return /*#__PURE__*/ react.createElement("div", {
+        style: {
+            display: "inline-block",
+            width: `${size}px`,
+            height: `${size}px`,
+            fontSize: `${4 * size / 5}px`,
+            lineHeight: `${size}px`,
+            color: "black"
+        }
+    }, icon.skinTone ? icon.value + icon.skinTone : icon.value);
 };
-
-/**
- * NOTE: Avoid using `@emotion/styled` in icon renderer components across all plugins.
- * This is crucial for serializing component rendering into a string value as plain HTML,
- * which is necessary for usage in the website application. Please use inline styles here
- * to ensure proper serialization.
- */
-
-const Emoji = () => {
-  const {
-    icon,
-    size
-  } = useIcon();
-  return /*#__PURE__*/React.createElement("div", {
-    style: {
-      display: "inline-block",
-      width: `${size}px`,
-      height: `${size}px`,
-      fontSize: `${size * 4 / 5}px`,
-      lineHeight: `${size}px`,
-      color: "black"
-    }
-  }, icon.skinTone ? icon.value + icon.skinTone : icon.value);
+const SkinToneSelect = ({ icon, hasSkinToneSupport, onChange })=>{
+    const [open, setOpen] = useState(false);
+    if (!icon || !isEmoji(icon)) return /*#__PURE__*/ react.createElement(SkinToneSelectWrapper, null);
+    if (!hasSkinToneSupport) return /*#__PURE__*/ react.createElement(SkinToneSelectWrapper, null, /*#__PURE__*/ react.createElement(IconProvider, {
+        icon: icon,
+        size: 24
+    }, /*#__PURE__*/ react.createElement(Emoji, null)));
+    return /*#__PURE__*/ react.createElement(PopoverPrimitive, {
+        open: open,
+        onOpenChange: (open)=>setOpen(open)
+    }, /*#__PURE__*/ react.createElement(PopoverPrimitive.Trigger, {
+        className: "outline-none"
+    }, /*#__PURE__*/ react.createElement(SkinToneSelectWrapper, null, /*#__PURE__*/ react.createElement(IconProvider, {
+        icon: icon,
+        size: 24
+    }, /*#__PURE__*/ react.createElement(Emoji, null)))), /*#__PURE__*/ react.createElement(PopoverPrimitive.Content, null, /*#__PURE__*/ react.createElement("div", {
+        className: "bg-neutral-base grid gap-xs p-xs text-center"
+    }, SKIN_TONES.map((skinTone, index)=>/*#__PURE__*/ react.createElement("div", {
+            key: index,
+            onClick: ()=>{
+                onChange(skinTone);
+            },
+            className: "cursor-pointer"
+        }, /*#__PURE__*/ react.createElement(IconProvider, {
+            icon: {
+                ...icon,
+                skinTone
+            },
+            size: 24
+        }, /*#__PURE__*/ react.createElement(Emoji, null)))))));
 };
-const SkinToneSelect = ({
-  icon,
-  hasSkinToneSupport,
-  onChange
-}) => {
-  const [open, setOpen] = useState(false);
-  if (!icon || !isEmoji(icon)) {
-    return /*#__PURE__*/React.createElement(SkinToneSelectWrapper, null);
-  }
-  if (!hasSkinToneSupport) {
-    return /*#__PURE__*/React.createElement(SkinToneSelectWrapper, null, /*#__PURE__*/React.createElement(IconProvider, {
-      icon: icon,
-      size: 24
-    }, /*#__PURE__*/React.createElement(Emoji, null)));
-  }
-  return /*#__PURE__*/React.createElement(PopoverPrimitive, {
-    open: open,
-    onOpenChange: open => setOpen(open)
-  }, /*#__PURE__*/React.createElement(PopoverPrimitive.Trigger, {
-    className: "outline-none"
-  }, /*#__PURE__*/React.createElement(SkinToneSelectWrapper, null, /*#__PURE__*/React.createElement(IconProvider, {
-    icon: icon,
-    size: 24
-  }, /*#__PURE__*/React.createElement(Emoji, null)))), /*#__PURE__*/React.createElement(PopoverPrimitive.Content, null, /*#__PURE__*/React.createElement("div", {
-    className: "bg-neutral-base grid gap-xs p-xs text-center"
-  }, SKIN_TONES.map((skinTone, index) => /*#__PURE__*/React.createElement("div", {
-    key: index,
-    onClick: () => {
-      onChange(skinTone);
-    },
-    className: "cursor-pointer"
-  }, /*#__PURE__*/React.createElement(IconProvider, {
-    icon: {
-      ...icon,
-      skinTone
-    },
-    size: 24
-  }, /*#__PURE__*/React.createElement(Emoji, null)))))));
+const isEmoji = (icon)=>{
+    if (!icon) return false;
+    return "emoji" === icon.type;
 };
-
-/**
- * @see https://www.typescriptlang.org/docs/handbook/2/narrowing.html#using-type-predicates
- */
-const isEmoji = icon => {
-  if (!icon) {
-    return false;
-  }
-  return icon.type === "emoji";
-};
-const EmojiTab = observer(() => {
-  const presenter = useIconPicker();
-  const {
-    selectedIcon
-  } = presenter.vm;
-  const onSkinToneChange = skinTone => {
-    if (isEmoji(selectedIcon)) {
-      presenter.setIcon({
-        ...selectedIcon,
-        skinTone
-      });
-    }
-  };
-  const onIconSelect = icon => {
-    presenter.setIcon(icon);
-    presenter.closeMenu();
-  };
-  const hasSkinToneSupport = isEmoji(selectedIcon) ? selectedIcon.skinToneSupport : false;
-  return /*#__PURE__*/React.createElement(IconPickerTab, {
-    value: "emoji",
-    label: "Emojis",
-    onChange: onIconSelect,
-    actions: /*#__PURE__*/React.createElement(SkinToneSelect, {
-      icon: selectedIcon,
-      hasSkinToneSupport: hasSkinToneSupport,
-      onChange: onSkinToneChange
-    })
-  });
+const EmojiTab = observer(()=>{
+    const presenter = useIconPicker();
+    const { selectedIcon } = presenter.vm;
+    const onSkinToneChange = (skinTone)=>{
+        if (isEmoji(selectedIcon)) presenter.setIcon({
+            ...selectedIcon,
+            skinTone
+        });
+    };
+    const onIconSelect = (icon)=>{
+        presenter.setIcon(icon);
+        presenter.closeMenu();
+    };
+    const hasSkinToneSupport = isEmoji(selectedIcon) ? selectedIcon.skinToneSupport : false;
+    return /*#__PURE__*/ react.createElement(IconPickerTab, {
+        value: "emoji",
+        label: "Emojis",
+        onChange: onIconSelect,
+        actions: /*#__PURE__*/ react.createElement(SkinToneSelect, {
+            icon: selectedIcon,
+            hasSkinToneSupport: hasSkinToneSupport,
+            onChange: onSkinToneChange
+        })
+    });
 });
-export const EmojiPlugin = () => {
-  return /*#__PURE__*/React.createElement(IconPickerConfig, null, /*#__PURE__*/React.createElement(IconPickerConfig.IconType, {
-    name: "emoji"
-  }, /*#__PURE__*/React.createElement(IconPickerConfig.IconType.Icon, {
-    element: /*#__PURE__*/React.createElement(Emoji, null)
-  }), /*#__PURE__*/React.createElement(IconPickerConfig.IconType.Tab, {
-    element: /*#__PURE__*/React.createElement(EmojiTab, null)
-  })));
-};
+const EmojiPlugin = ()=>/*#__PURE__*/ react.createElement(IconPickerConfig, null, /*#__PURE__*/ react.createElement(IconPickerConfig.IconType, {
+        name: "emoji"
+    }, /*#__PURE__*/ react.createElement(IconPickerConfig.IconType.Icon, {
+        element: /*#__PURE__*/ react.createElement(Emoji, null)
+    }), /*#__PURE__*/ react.createElement(IconPickerConfig.IconType.Tab, {
+        element: /*#__PURE__*/ react.createElement(EmojiTab, null)
+    })));
+export { EmojiPlugin };
 
 //# sourceMappingURL=emojisPlugin.js.map

package/components/IconPicker/plugins/emojisPlugin.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useState","observer","cn","PopoverPrimitive","useIcon","IconPickerTab","IconProvider","useIconPicker","IconPickerConfig","SKIN_TONES","SkinToneSelectWrapper","props","createElement","className","children","Emoji","icon","size","style","display","width","height","fontSize","lineHeight","color","skinTone","value","SkinToneSelect","hasSkinToneSupport","onChange","open","setOpen","isEmoji","onOpenChange","Trigger","Content","map","index","key","onClick","type","EmojiTab","presenter","selectedIcon","vm","onSkinToneChange","setIcon","onIconSelect","closeMenu","skinToneSupport","label","actions","EmojiPlugin","IconType","name","Icon","element","Tab"],"sources":["emojisPlugin.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { cn, PopoverPrimitive } from \"@webiny/admin-ui\";\nimport { useIcon } from \"../index.js\";\nimport { IconPickerTab } from \"../IconPickerTab.js\";\nimport { IconProvider } from \"../IconRenderer.js\";\nimport { useIconPicker } from \"../IconPickerPresenterProvider.js\";\nimport { IconPickerConfig } from \"../config/index.js\";\nimport type { Icon } from \"../types.js\";\n\nconst SKIN_TONES = [\"\", \"\\u{1f3fb}\", \"\\u{1f3fc}\", \"\\u{1f3fd}\", \"\\u{1f3fe}\", \"\\u{1f3ff}\"];\n\nconst SkinToneSelectWrapper = (props: React.HTMLAttributes<HTMLDivElement>) => {\n    return (\n        <div\n            className={cn(\n                \"size-xl rounded-sm pointer border-solid border-sm border-neutral-muted flex justify-center items-center text-center\"\n            )}\n        >\n            {props.children}\n        </div>\n    );\n};\n\n/**\n * NOTE: Avoid using `@emotion/styled` in icon renderer components across all plugins.\n * This is crucial for serializing component rendering into a string value as plain HTML,\n * which is necessary for usage in the website application. Please use inline styles here\n * to ensure proper serialization.\n */\n\ninterface Emoji extends Icon {\n    skinTone: string;\n    skinToneSupport: boolean;\n}\n\nconst Emoji = () => {\n    const { icon, size } = useIcon<Emoji>();\n\n    return (\n        <div\n            style={{\n                display: \"inline-block\",\n                width: `${size}px`,\n                height: `${size}px`,\n                fontSize: `${(size * 4) / 5}px`,\n                lineHeight: `${size}px`,\n                color: \"black\"\n            }}\n        >\n            {icon.skinTone ? icon.value + icon.skinTone : icon.value}\n        </div>\n    );\n};\n\ninterface SkinToneSelectProps {\n    icon: Icon | null;\n    hasSkinToneSupport: boolean;\n    onChange: (skinTone: string) => void;\n}\n\nconst SkinToneSelect = ({ icon, hasSkinToneSupport, onChange }: SkinToneSelectProps) => {\n    const [open, setOpen] = useState(false);\n\n    if (!icon || !isEmoji(icon)) {\n        return <SkinToneSelectWrapper />;\n    }\n\n    if (!hasSkinToneSupport) {\n        return (\n            <SkinToneSelectWrapper>\n                <IconProvider icon={icon} size={24}>\n                    <Emoji />\n                </IconProvider>\n            </SkinToneSelectWrapper>\n        );\n    }\n\n    return (\n        <PopoverPrimitive open={open} onOpenChange={open => setOpen(open)}>\n            <PopoverPrimitive.Trigger className={\"outline-none\"}>\n                <SkinToneSelectWrapper>\n                    <IconProvider icon={icon} size={24}>\n                        <Emoji />\n                    </IconProvider>\n                </SkinToneSelectWrapper>\n            </PopoverPrimitive.Trigger>\n            <PopoverPrimitive.Content>\n                <div className={\"bg-neutral-base grid gap-xs p-xs text-center\"}>\n                    {SKIN_TONES.map((skinTone, index) => (\n                        <div\n                            key={index}\n                            onClick={() => {\n                                onChange(skinTone);\n                            }}\n                            className={\"cursor-pointer\"}\n                        >\n                            <IconProvider icon={{ ...icon, skinTone }} size={24}>\n                                <Emoji />\n                            </IconProvider>\n                        </div>\n                    ))}\n                </div>\n            </PopoverPrimitive.Content>\n        </PopoverPrimitive>\n    );\n};\n\n/**\n * @see https://www.typescriptlang.org/docs/handbook/2/narrowing.html#using-type-predicates\n */\nconst isEmoji = (icon: Icon | null): icon is Emoji => {\n    if (!icon) {\n        return false;\n    }\n    return icon.type === \"emoji\";\n};\n\nconst EmojiTab = observer(() => {\n    const presenter = useIconPicker();\n    const { selectedIcon } = presenter.vm;\n\n    const onSkinToneChange = (skinTone: string) => {\n        if (isEmoji(selectedIcon)) {\n            presenter.setIcon({ ...selectedIcon, skinTone });\n        }\n    };\n\n    const onIconSelect = (icon: Icon) => {\n        presenter.setIcon(icon);\n        presenter.closeMenu();\n    };\n\n    const hasSkinToneSupport = isEmoji(selectedIcon) ? selectedIcon.skinToneSupport : false;\n\n    return (\n        <IconPickerTab\n            value={\"emoji\"}\n            label={\"Emojis\"}\n            onChange={onIconSelect}\n            actions={\n                <SkinToneSelect\n                    icon={selectedIcon}\n                    hasSkinToneSupport={hasSkinToneSupport}\n                    onChange={onSkinToneChange}\n                />\n            }\n        />\n    );\n});\n\nexport const EmojiPlugin = () => {\n    return (\n        <IconPickerConfig>\n            <IconPickerConfig.IconType name={\"emoji\"}>\n                <IconPickerConfig.IconType.Icon element={<Emoji />} />\n                <IconPickerConfig.IconType.Tab element={<EmojiTab />} />\n            </IconPickerConfig.IconType>\n        </IconPickerConfig>\n    );\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"components/IconPicker/plugins/emojisPlugin.js","sources":["../../../../src/components/IconPicker/plugins/emojisPlugin.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { cn, PopoverPrimitive } from \"@webiny/admin-ui\";\nimport { useIcon } from \"../index.js\";\nimport { IconPickerTab } from \"../IconPickerTab.js\";\nimport { IconProvider } from \"../IconRenderer.js\";\nimport { useIconPicker } from \"../IconPickerPresenterProvider.js\";\nimport { IconPickerConfig } from \"../config/index.js\";\nimport type { Icon } from \"../types.js\";\n\nconst SKIN_TONES = [\"\", \"\\u{1f3fb}\", \"\\u{1f3fc}\", \"\\u{1f3fd}\", \"\\u{1f3fe}\", \"\\u{1f3ff}\"];\n\nconst SkinToneSelectWrapper = (props: React.HTMLAttributes<HTMLDivElement>) => {\n    return (\n        <div\n            className={cn(\n                \"size-xl rounded-sm pointer border-solid border-sm border-neutral-muted flex justify-center items-center text-center\"\n            )}\n        >\n            {props.children}\n        </div>\n    );\n};\n\n/**\n * NOTE: Avoid using `@emotion/styled` in icon renderer components across all plugins.\n * This is crucial for serializing component rendering into a string value as plain HTML,\n * which is necessary for usage in the website application. Please use inline styles here\n * to ensure proper serialization.\n */\n\ninterface Emoji extends Icon {\n    skinTone: string;\n    skinToneSupport: boolean;\n}\n\nconst Emoji = () => {\n    const { icon, size } = useIcon<Emoji>();\n\n    return (\n        <div\n            style={{\n                display: \"inline-block\",\n                width: `${size}px`,\n                height: `${size}px`,\n                fontSize: `${(size * 4) / 5}px`,\n                lineHeight: `${size}px`,\n                color: \"black\"\n            }}\n        >\n            {icon.skinTone ? icon.value + icon.skinTone : icon.value}\n        </div>\n    );\n};\n\ninterface SkinToneSelectProps {\n    icon: Icon | null;\n    hasSkinToneSupport: boolean;\n    onChange: (skinTone: string) => void;\n}\n\nconst SkinToneSelect = ({ icon, hasSkinToneSupport, onChange }: SkinToneSelectProps) => {\n    const [open, setOpen] = useState(false);\n\n    if (!icon || !isEmoji(icon)) {\n        return <SkinToneSelectWrapper />;\n    }\n\n    if (!hasSkinToneSupport) {\n        return (\n            <SkinToneSelectWrapper>\n                <IconProvider icon={icon} size={24}>\n                    <Emoji />\n                </IconProvider>\n            </SkinToneSelectWrapper>\n        );\n    }\n\n    return (\n        <PopoverPrimitive open={open} onOpenChange={open => setOpen(open)}>\n            <PopoverPrimitive.Trigger className={\"outline-none\"}>\n                <SkinToneSelectWrapper>\n                    <IconProvider icon={icon} size={24}>\n                        <Emoji />\n                    </IconProvider>\n                </SkinToneSelectWrapper>\n            </PopoverPrimitive.Trigger>\n            <PopoverPrimitive.Content>\n                <div className={\"bg-neutral-base grid gap-xs p-xs text-center\"}>\n                    {SKIN_TONES.map((skinTone, index) => (\n                        <div\n                            key={index}\n                            onClick={() => {\n                                onChange(skinTone);\n                            }}\n                            className={\"cursor-pointer\"}\n                        >\n                            <IconProvider icon={{ ...icon, skinTone }} size={24}>\n                                <Emoji />\n                            </IconProvider>\n                        </div>\n                    ))}\n                </div>\n            </PopoverPrimitive.Content>\n        </PopoverPrimitive>\n    );\n};\n\n/**\n * @see https://www.typescriptlang.org/docs/handbook/2/narrowing.html#using-type-predicates\n */\nconst isEmoji = (icon: Icon | null): icon is Emoji => {\n    if (!icon) {\n        return false;\n    }\n    return icon.type === \"emoji\";\n};\n\nconst EmojiTab = observer(() => {\n    const presenter = useIconPicker();\n    const { selectedIcon } = presenter.vm;\n\n    const onSkinToneChange = (skinTone: string) => {\n        if (isEmoji(selectedIcon)) {\n            presenter.setIcon({ ...selectedIcon, skinTone });\n        }\n    };\n\n    const onIconSelect = (icon: Icon) => {\n        presenter.setIcon(icon);\n        presenter.closeMenu();\n    };\n\n    const hasSkinToneSupport = isEmoji(selectedIcon) ? selectedIcon.skinToneSupport : false;\n\n    return (\n        <IconPickerTab\n            value={\"emoji\"}\n            label={\"Emojis\"}\n            onChange={onIconSelect}\n            actions={\n                <SkinToneSelect\n                    icon={selectedIcon}\n                    hasSkinToneSupport={hasSkinToneSupport}\n                    onChange={onSkinToneChange}\n                />\n            }\n        />\n    );\n});\n\nexport const EmojiPlugin = () => {\n    return (\n        <IconPickerConfig>\n            <IconPickerConfig.IconType name={\"emoji\"}>\n                <IconPickerConfig.IconType.Icon element={<Emoji />} />\n                <IconPickerConfig.IconType.Tab element={<EmojiTab />} />\n            </IconPickerConfig.IconType>\n        </IconPickerConfig>\n    );\n};\n"],"names":["SKIN_TONES","SkinToneSelectWrapper","props","cn","Emoji","icon","size","useIcon","SkinToneSelect","hasSkinToneSupport","onChange","open","setOpen","useState","isEmoji","IconProvider","PopoverPrimitive","skinTone","index","EmojiTab","observer","presenter","useIconPicker","selectedIcon","onSkinToneChange","onIconSelect","IconPickerTab","EmojiPlugin","IconPickerConfig"],"mappings":";;;;;;;;AAUA,MAAMA,aAAa;IAAC;IAAI;IAAa;IAAa;IAAa;IAAa;CAAY;AAExF,MAAMC,wBAAwB,CAACC,QACpB,WAAP,GACI,oBAAC;QACG,WAAWC,GACP;OAGHD,MAAM,QAAQ;AAiB3B,MAAME,QAAQ;IACV,MAAM,EAAEC,IAAI,EAAEC,IAAI,EAAE,GAAGC;IAEvB,OAAO,WAAP,GACI,oBAAC;QACG,OAAO;YACH,SAAS;YACT,OAAO,GAAGD,KAAK,EAAE,CAAC;YAClB,QAAQ,GAAGA,KAAK,EAAE,CAAC;YACnB,UAAU,GAAIA,AAAO,IAAPA,OAAY,EAAE,EAAE,CAAC;YAC/B,YAAY,GAAGA,KAAK,EAAE,CAAC;YACvB,OAAO;QACX;OAECD,KAAK,QAAQ,GAAGA,KAAK,KAAK,GAAGA,KAAK,QAAQ,GAAGA,KAAK,KAAK;AAGpE;AAQA,MAAMG,iBAAiB,CAAC,EAAEH,IAAI,EAAEI,kBAAkB,EAAEC,QAAQ,EAAuB;IAC/E,MAAM,CAACC,MAAMC,QAAQ,GAAGC,SAAS;IAEjC,IAAI,CAACR,QAAQ,CAACS,QAAQT,OAClB,OAAO,WAAP,GAAO,oBAACJ,uBAAqBA;IAGjC,IAAI,CAACQ,oBACD,OAAO,WAAP,GACI,oBAACR,uBAAqBA,MAAAA,WAAAA,GAClB,oBAACc,cAAYA;QAAC,MAAMV;QAAM,MAAM;qBAC5B,oBAACD,OAAKA;IAMtB,OAAO,WAAP,GACI,oBAACY,kBAAgBA;QAAC,MAAML;QAAM,cAAcA,CAAAA,OAAQC,QAAQD;qBACxD,oBAACK,iBAAiB,OAAO;QAAC,WAAW;qBACjC,oBAACf,uBAAqBA,MAAAA,WAAAA,GAClB,oBAACc,cAAYA;QAAC,MAAMV;QAAM,MAAM;qBAC5B,oBAACD,OAAKA,UAAAA,WAAAA,GAIlB,oBAACY,iBAAiB,OAAO,sBACrB,oBAAC;QAAI,WAAW;OACXhB,WAAW,GAAG,CAAC,CAACiB,UAAUC,QAAAA,WAAAA,GACvB,oBAAC;YACG,KAAKA;YACL,SAAS;gBACLR,SAASO;YACb;YACA,WAAW;yBAEX,oBAACF,cAAYA;YAAC,MAAM;gBAAE,GAAGV,IAAI;gBAAEY;YAAS;YAAG,MAAM;yBAC7C,oBAACb,OAAKA;AAQtC;AAKA,MAAMU,UAAU,CAACT;IACb,IAAI,CAACA,MACD,OAAO;IAEX,OAAOA,AAAc,YAAdA,KAAK,IAAI;AACpB;AAEA,MAAMc,WAAWC,SAAS;IACtB,MAAMC,YAAYC;IAClB,MAAM,EAAEC,YAAY,EAAE,GAAGF,UAAU,EAAE;IAErC,MAAMG,mBAAmB,CAACP;QACtB,IAAIH,QAAQS,eACRF,UAAU,OAAO,CAAC;YAAE,GAAGE,YAAY;YAAEN;QAAS;IAEtD;IAEA,MAAMQ,eAAe,CAACpB;QAClBgB,UAAU,OAAO,CAAChB;QAClBgB,UAAU,SAAS;IACvB;IAEA,MAAMZ,qBAAqBK,QAAQS,gBAAgBA,aAAa,eAAe,GAAG;IAElF,OAAO,WAAP,GACI,oBAACG,eAAaA;QACV,OAAO;QACP,OAAO;QACP,UAAUD;QACV,uBACI,oBAACjB,gBAAcA;YACX,MAAMe;YACN,oBAAoBd;YACpB,UAAUe;;;AAK9B;AAEO,MAAMG,cAAc,IAChB,WAAP,GACI,oBAACC,kBAAgBA,MAAAA,WAAAA,GACb,oBAACA,iBAAiB,QAAQ;QAAC,MAAM;qBAC7B,oBAACA,iBAAiB,QAAQ,CAAC,IAAI;QAAC,uBAAS,oBAACxB,OAAKA;sBAC/C,oBAACwB,iBAAiB,QAAQ,CAAC,GAAG;QAAC,uBAAS,oBAACT,UAAQA"}

package/components/IconPicker/plugins/graphql.js

@@ -1,11 +1,5 @@
-import gql from "graphql-tag";
-
-/**
- * ###########################
- * List Custom Icons Query Response
- */
-
-export const LIST_CUSTOM_ICONS = gql`
+import graphql_tag from "graphql-tag";
+const LIST_CUSTOM_ICONS = graphql_tag`
     query ListCustomIcons($limit: Int!) {
         fileManager {
             listFiles(where: { tags_startsWith: "scope:iconPicker" }, limit: $limit) {
@@ -23,5 +17,6 @@ export const LIST_CUSTOM_ICONS = gql`
         }
     }
 `;
+export { LIST_CUSTOM_ICONS };
 
 //# sourceMappingURL=graphql.js.map

package/components/IconPicker/plugins/graphql.js.map

@@ -1 +1 @@
-{"version":3,"names":["gql","LIST_CUSTOM_ICONS"],"sources":["graphql.ts"],"sourcesContent":["import gql from \"graphql-tag\";\n\n/**\n * ###########################\n * List Custom Icons Query Response\n */\nexport interface ListCustomIconsQueryResponse {\n    fileManager: {\n        listFiles: {\n            data: [{ name: string; src: string }] | null;\n            error: { message: string; data: Record<string, any>; code: string } | null;\n        };\n    };\n}\n\nexport const LIST_CUSTOM_ICONS = gql`\n    query ListCustomIcons($limit: Int!) {\n        fileManager {\n            listFiles(where: { tags_startsWith: \"scope:iconPicker\" }, limit: $limit) {\n                data {\n                    name\n                    src\n                    tags\n                }\n                error {\n                    code\n                    data\n                    message\n                }\n            }\n        }\n    }\n`;\n"],"mappings":"AAAA,OAAOA,GAAG,MAAM,aAAa;;AAE7B;AACA;AACA;AACA;;AAUA,OAAO,MAAMC,iBAAiB,GAAGD,GAAG;AACpC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
+{"version":3,"file":"components/IconPicker/plugins/graphql.js","sources":["../../../../src/components/IconPicker/plugins/graphql.ts"],"sourcesContent":["import gql from \"graphql-tag\";\n\n/**\n * ###########################\n * List Custom Icons Query Response\n */\nexport interface ListCustomIconsQueryResponse {\n    fileManager: {\n        listFiles: {\n            data: [{ name: string; src: string }] | null;\n            error: { message: string; data: Record<string, any>; code: string } | null;\n        };\n    };\n}\n\nexport const LIST_CUSTOM_ICONS = gql`\n    query ListCustomIcons($limit: Int!) {\n        fileManager {\n            listFiles(where: { tags_startsWith: \"scope:iconPicker\" }, limit: $limit) {\n                data {\n                    name\n                    src\n                    tags\n                }\n                error {\n                    code\n                    data\n                    message\n                }\n            }\n        }\n    }\n`;\n"],"names":["LIST_CUSTOM_ICONS","gql"],"mappings":";AAeO,MAAMA,oBAAoBC,WAAG,CAAC;;;;;;;;;;;;;;;;;AAiBrC,CAAC"}

package/components/IconPicker/plugins/iconsPlugin.js

@@ -1,115 +1,84 @@
-import React, { useState, useEffect } from "react";
+import react, { useEffect, useState } from "react";
 import { observer } from "mobx-react-lite";
-import { DelayedOnChange, ColorPicker } from "@webiny/admin-ui";
+import { ColorPicker, DelayedOnChange } from "@webiny/admin-ui";
 import { useIcon } from "../index.js";
 import { IconPickerTab } from "../IconPickerTab.js";
 import { useIconPicker } from "../IconPickerPresenterProvider.js";
 import { IconPickerConfig } from "../config/index.js";
-
-/**
- * NOTE: Avoid using `@emotion/styled` in icon renderer components across all plugins.
- * This is crucial for serializing component rendering into a string value as plain HTML,
- * which is necessary for usage in the website application. Please use inline styles here
- * to ensure proper serialization.
- */
-
-const IconSvg = () => {
-  const {
-    icon,
-    size
-  } = useIcon();
-  return /*#__PURE__*/React.createElement("svg", {
-    width: size,
-    height: size,
-    viewBox: `0 0 ${icon.width || 512} 512`,
-    color: icon?.color || "inherit",
-    dangerouslySetInnerHTML: {
-      __html: icon.value || ""
-    },
-    style: {
-      verticalAlign: "middle",
-      width: "100%",
-      height: "100%"
-    }
-  });
-};
-const IconColorPicker = ({
-  color,
-  onChange
-}) => {
-  return /*#__PURE__*/React.createElement(DelayedOnChange, {
-    value: color,
-    onChange: onChange
-  }, ({
-    value,
-    onChange
-  }) => /*#__PURE__*/React.createElement(ColorPicker, {
-    align: "end",
-    value: value,
-    onChange: onChange
-  }));
+const IconSvg = ()=>{
+    const { icon, size } = useIcon();
+    return /*#__PURE__*/ react.createElement("svg", {
+        width: size,
+        height: size,
+        viewBox: `0 0 ${icon.width || 512} 512`,
+        color: icon?.color || "inherit",
+        dangerouslySetInnerHTML: {
+            __html: icon.value || ""
+        },
+        style: {
+            verticalAlign: "middle",
+            width: "100%",
+            height: "100%"
+        }
+    });
 };
-
-/**
- * @see https://www.typescriptlang.org/docs/handbook/2/narrowing.html#using-type-predicates
- */
-const isSimpleIcon = icon => {
-  if (!icon) {
-    return false;
-  }
-  return icon.type === "icon";
+const IconColorPicker = ({ color, onChange })=>/*#__PURE__*/ react.createElement(DelayedOnChange, {
+        value: color,
+        onChange: onChange
+    }, ({ value, onChange })=>/*#__PURE__*/ react.createElement(ColorPicker, {
+            align: "end",
+            value: value,
+            onChange: onChange
+        }));
+const isSimpleIcon = (icon)=>{
+    if (!icon) return false;
+    return "icon" === icon.type;
 };
-const IconTab = observer(() => {
-  const presenter = useIconPicker();
-  const {
-    selectedIcon
-  } = presenter.vm;
-  const [color, setColor] = useState("inherit");
-  useEffect(() => {
-    if (color === "inherit" && isSimpleIcon(selectedIcon)) {
-      setColor(selectedIcon.color);
-    }
-  }, [selectedIcon]);
-  const onColorChange = color => {
-    setColor(color);
-    if (isSimpleIcon(selectedIcon)) {
-      presenter.setIcon({
-        ...selectedIcon,
-        color
-      });
-    }
-  };
-  const onIconSelect = icon => {
-    // Set icon and assign current color.
-    presenter.setIcon({
-      ...icon,
-      color
+const IconTab = observer(()=>{
+    const presenter = useIconPicker();
+    const { selectedIcon } = presenter.vm;
+    const [color, setColor] = useState("inherit");
+    useEffect(()=>{
+        if ("inherit" === color && isSimpleIcon(selectedIcon)) setColor(selectedIcon.color);
+    }, [
+        selectedIcon
+    ]);
+    const onColorChange = (color)=>{
+        setColor(color);
+        if (isSimpleIcon(selectedIcon)) presenter.setIcon({
+            ...selectedIcon,
+            color
+        });
+    };
+    const onIconSelect = (icon)=>{
+        presenter.setIcon({
+            ...icon,
+            color
+        });
+        presenter.closeMenu();
+    };
+    return /*#__PURE__*/ react.createElement(IconPickerTab, {
+        value: "icon",
+        label: "Icons",
+        onChange: onIconSelect,
+        cellDecorator: (cell)=>/*#__PURE__*/ react.createElement("span", {
+                style: {
+                    color
+                }
+            }, cell),
+        actions: /*#__PURE__*/ react.createElement(IconColorPicker, {
+            color: color,
+            onChange: onColorChange
+        })
     });
-    presenter.closeMenu();
-  };
-  return /*#__PURE__*/React.createElement(IconPickerTab, {
-    value: "icon",
-    label: "Icons",
-    onChange: onIconSelect,
-    cellDecorator: cell => /*#__PURE__*/React.createElement("span", {
-      style: {
-        color
-      }
-    }, cell),
-    actions: /*#__PURE__*/React.createElement(IconColorPicker, {
-      color: color,
-      onChange: onColorChange
-    })
-  });
 });
-export const SimpleIconPlugin = () => {
-  return /*#__PURE__*/React.createElement(IconPickerConfig, null, /*#__PURE__*/React.createElement(IconPickerConfig.IconType, {
-    name: "icon"
-  }, /*#__PURE__*/React.createElement(IconPickerConfig.IconType.Icon, {
-    element: /*#__PURE__*/React.createElement(IconSvg, null)
-  }), /*#__PURE__*/React.createElement(IconPickerConfig.IconType.Tab, {
-    element: /*#__PURE__*/React.createElement(IconTab, null)
-  })));
-};
+const SimpleIconPlugin = ()=>/*#__PURE__*/ react.createElement(IconPickerConfig, null, /*#__PURE__*/ react.createElement(IconPickerConfig.IconType, {
+        name: "icon"
+    }, /*#__PURE__*/ react.createElement(IconPickerConfig.IconType.Icon, {
+        element: /*#__PURE__*/ react.createElement(IconSvg, null)
+    }), /*#__PURE__*/ react.createElement(IconPickerConfig.IconType.Tab, {
+        element: /*#__PURE__*/ react.createElement(IconTab, null)
+    })));
+export { SimpleIconPlugin };
 
 //# sourceMappingURL=iconsPlugin.js.map

package/components/IconPicker/plugins/iconsPlugin.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useState","useEffect","observer","DelayedOnChange","ColorPicker","useIcon","IconPickerTab","useIconPicker","IconPickerConfig","IconSvg","icon","size","createElement","width","height","viewBox","color","dangerouslySetInnerHTML","__html","value","style","verticalAlign","IconColorPicker","onChange","align","isSimpleIcon","type","IconTab","presenter","selectedIcon","vm","setColor","onColorChange","setIcon","onIconSelect","closeMenu","label","cellDecorator","cell","actions","SimpleIconPlugin","IconType","name","Icon","element","Tab"],"sources":["iconsPlugin.tsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { DelayedOnChange, ColorPicker } from \"@webiny/admin-ui\";\n\nimport { useIcon } from \"../index.js\";\nimport { IconPickerTab } from \"../IconPickerTab.js\";\nimport { useIconPicker } from \"../IconPickerPresenterProvider.js\";\nimport { IconPickerConfig } from \"../config/index.js\";\nimport type { Icon } from \"../types.js\";\n\n/**\n * NOTE: Avoid using `@emotion/styled` in icon renderer components across all plugins.\n * This is crucial for serializing component rendering into a string value as plain HTML,\n * which is necessary for usage in the website application. Please use inline styles here\n * to ensure proper serialization.\n */\n\ninterface SimpleIcon extends Icon {\n    color: string;\n}\n\nconst IconSvg = () => {\n    const { icon, size } = useIcon<SimpleIcon>();\n\n    return (\n        <svg\n            width={size}\n            height={size}\n            viewBox={`0 0 ${icon.width || 512} 512`}\n            color={icon?.color || \"inherit\"}\n            dangerouslySetInnerHTML={{ __html: icon.value || \"\" }}\n            style={{\n                verticalAlign: \"middle\",\n                width: \"100%\",\n                height: \"100%\"\n            }}\n        />\n    );\n};\n\ninterface IconColorPickerProps {\n    color: string;\n    onChange: (value: string) => void;\n}\n\nconst IconColorPicker = ({ color, onChange }: IconColorPickerProps) => {\n    return (\n        <DelayedOnChange value={color} onChange={onChange}>\n            {({ value, onChange }) => (\n                <ColorPicker align={\"end\"} value={value} onChange={onChange} />\n            )}\n        </DelayedOnChange>\n    );\n};\n\n/**\n * @see https://www.typescriptlang.org/docs/handbook/2/narrowing.html#using-type-predicates\n */\nconst isSimpleIcon = (icon: Icon | null): icon is SimpleIcon => {\n    if (!icon) {\n        return false;\n    }\n    return icon.type === \"icon\";\n};\n\nconst IconTab = observer(() => {\n    const presenter = useIconPicker();\n    const { selectedIcon } = presenter.vm;\n\n    const [color, setColor] = useState(\"inherit\");\n\n    useEffect(() => {\n        if (color === \"inherit\" && isSimpleIcon(selectedIcon)) {\n            setColor(selectedIcon.color);\n        }\n    }, [selectedIcon]);\n\n    const onColorChange = (color: string) => {\n        setColor(color);\n\n        if (isSimpleIcon(selectedIcon)) {\n            presenter.setIcon({ ...selectedIcon, color });\n        }\n    };\n\n    const onIconSelect = (icon: Icon) => {\n        // Set icon and assign current color.\n        presenter.setIcon({ ...icon, color });\n        presenter.closeMenu();\n    };\n\n    return (\n        <IconPickerTab\n            value={\"icon\"}\n            label={\"Icons\"}\n            onChange={onIconSelect}\n            cellDecorator={cell => <span style={{ color }}>{cell}</span>}\n            actions={<IconColorPicker color={color} onChange={onColorChange} />}\n        />\n    );\n});\n\nexport const SimpleIconPlugin = () => {\n    return (\n        <IconPickerConfig>\n            <IconPickerConfig.IconType name={\"icon\"}>\n                <IconPickerConfig.IconType.Icon element={<IconSvg />} />\n                <IconPickerConfig.IconType.Tab element={<IconTab />} />\n            </IconPickerConfig.IconType>\n        </IconPickerConfig>\n    );\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"components/IconPicker/plugins/iconsPlugin.js","sources":["../../../../src/components/IconPicker/plugins/iconsPlugin.tsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { DelayedOnChange, ColorPicker } from \"@webiny/admin-ui\";\n\nimport { useIcon } from \"../index.js\";\nimport { IconPickerTab } from \"../IconPickerTab.js\";\nimport { useIconPicker } from \"../IconPickerPresenterProvider.js\";\nimport { IconPickerConfig } from \"../config/index.js\";\nimport type { Icon } from \"../types.js\";\n\n/**\n * NOTE: Avoid using `@emotion/styled` in icon renderer components across all plugins.\n * This is crucial for serializing component rendering into a string value as plain HTML,\n * which is necessary for usage in the website application. Please use inline styles here\n * to ensure proper serialization.\n */\n\ninterface SimpleIcon extends Icon {\n    color: string;\n}\n\nconst IconSvg = () => {\n    const { icon, size } = useIcon<SimpleIcon>();\n\n    return (\n        <svg\n            width={size}\n            height={size}\n            viewBox={`0 0 ${icon.width || 512} 512`}\n            color={icon?.color || \"inherit\"}\n            dangerouslySetInnerHTML={{ __html: icon.value || \"\" }}\n            style={{\n                verticalAlign: \"middle\",\n                width: \"100%\",\n                height: \"100%\"\n            }}\n        />\n    );\n};\n\ninterface IconColorPickerProps {\n    color: string;\n    onChange: (value: string) => void;\n}\n\nconst IconColorPicker = ({ color, onChange }: IconColorPickerProps) => {\n    return (\n        <DelayedOnChange value={color} onChange={onChange}>\n            {({ value, onChange }) => (\n                <ColorPicker align={\"end\"} value={value} onChange={onChange} />\n            )}\n        </DelayedOnChange>\n    );\n};\n\n/**\n * @see https://www.typescriptlang.org/docs/handbook/2/narrowing.html#using-type-predicates\n */\nconst isSimpleIcon = (icon: Icon | null): icon is SimpleIcon => {\n    if (!icon) {\n        return false;\n    }\n    return icon.type === \"icon\";\n};\n\nconst IconTab = observer(() => {\n    const presenter = useIconPicker();\n    const { selectedIcon } = presenter.vm;\n\n    const [color, setColor] = useState(\"inherit\");\n\n    useEffect(() => {\n        if (color === \"inherit\" && isSimpleIcon(selectedIcon)) {\n            setColor(selectedIcon.color);\n        }\n    }, [selectedIcon]);\n\n    const onColorChange = (color: string) => {\n        setColor(color);\n\n        if (isSimpleIcon(selectedIcon)) {\n            presenter.setIcon({ ...selectedIcon, color });\n        }\n    };\n\n    const onIconSelect = (icon: Icon) => {\n        // Set icon and assign current color.\n        presenter.setIcon({ ...icon, color });\n        presenter.closeMenu();\n    };\n\n    return (\n        <IconPickerTab\n            value={\"icon\"}\n            label={\"Icons\"}\n            onChange={onIconSelect}\n            cellDecorator={cell => <span style={{ color }}>{cell}</span>}\n            actions={<IconColorPicker color={color} onChange={onColorChange} />}\n        />\n    );\n});\n\nexport const SimpleIconPlugin = () => {\n    return (\n        <IconPickerConfig>\n            <IconPickerConfig.IconType name={\"icon\"}>\n                <IconPickerConfig.IconType.Icon element={<IconSvg />} />\n                <IconPickerConfig.IconType.Tab element={<IconTab />} />\n            </IconPickerConfig.IconType>\n        </IconPickerConfig>\n    );\n};\n"],"names":["IconSvg","icon","size","useIcon","IconColorPicker","color","onChange","DelayedOnChange","value","ColorPicker","isSimpleIcon","IconTab","observer","presenter","useIconPicker","selectedIcon","setColor","useState","useEffect","onColorChange","onIconSelect","IconPickerTab","cell","SimpleIconPlugin","IconPickerConfig"],"mappings":";;;;;;;AAqBA,MAAMA,UAAU;IACZ,MAAM,EAAEC,IAAI,EAAEC,IAAI,EAAE,GAAGC;IAEvB,OAAO,WAAP,GACI,oBAAC;QACG,OAAOD;QACP,QAAQA;QACR,SAAS,CAAC,IAAI,EAAED,KAAK,KAAK,IAAI,IAAI,IAAI,CAAC;QACvC,OAAOA,MAAM,SAAS;QACtB,yBAAyB;YAAE,QAAQA,KAAK,KAAK,IAAI;QAAG;QACpD,OAAO;YACH,eAAe;YACf,OAAO;YACP,QAAQ;QACZ;;AAGZ;AAOA,MAAMG,kBAAkB,CAAC,EAAEC,KAAK,EAAEC,QAAQ,EAAwB,GACvD,WAAP,GACI,oBAACC,iBAAeA;QAAC,OAAOF;QAAO,UAAUC;OACpC,CAAC,EAAEE,KAAK,EAAEF,QAAQ,EAAE,iBACjB,oBAACG,aAAWA;YAAC,OAAO;YAAO,OAAOD;YAAO,UAAUF;;AASnE,MAAMI,eAAe,CAACT;IAClB,IAAI,CAACA,MACD,OAAO;IAEX,OAAOA,AAAc,WAAdA,KAAK,IAAI;AACpB;AAEA,MAAMU,UAAUC,SAAS;IACrB,MAAMC,YAAYC;IAClB,MAAM,EAAEC,YAAY,EAAE,GAAGF,UAAU,EAAE;IAErC,MAAM,CAACR,OAAOW,SAAS,GAAGC,SAAS;IAEnCC,UAAU;QACN,IAAIb,AAAU,cAAVA,SAAuBK,aAAaK,eACpCC,SAASD,aAAa,KAAK;IAEnC,GAAG;QAACA;KAAa;IAEjB,MAAMI,gBAAgB,CAACd;QACnBW,SAASX;QAET,IAAIK,aAAaK,eACbF,UAAU,OAAO,CAAC;YAAE,GAAGE,YAAY;YAAEV;QAAM;IAEnD;IAEA,MAAMe,eAAe,CAACnB;QAElBY,UAAU,OAAO,CAAC;YAAE,GAAGZ,IAAI;YAAEI;QAAM;QACnCQ,UAAU,SAAS;IACvB;IAEA,OAAO,WAAP,GACI,oBAACQ,eAAaA;QACV,OAAO;QACP,OAAO;QACP,UAAUD;QACV,eAAeE,CAAAA,OAAAA,WAAAA,GAAQ,oBAAC;gBAAK,OAAO;oBAAEjB;gBAAM;eAAIiB;QAChD,uBAAS,oBAAClB,iBAAeA;YAAC,OAAOC;YAAO,UAAUc;;;AAG9D;AAEO,MAAMI,mBAAmB,IACrB,WAAP,GACI,oBAACC,kBAAgBA,MAAAA,WAAAA,GACb,oBAACA,iBAAiB,QAAQ;QAAC,MAAM;qBAC7B,oBAACA,iBAAiB,QAAQ,CAAC,IAAI;QAAC,uBAAS,oBAACxB,SAAOA;sBACjD,oBAACwB,iBAAiB,QAAQ,CAAC,GAAG;QAAC,uBAAS,oBAACb,SAAOA"}

package/components/IconPicker/types.js

@@ -1,10 +1,7 @@
-/**
- * We want to have an abstract type, which does not define specifics of each possible icon (like color or skin tone).
- */
-
-export let ICON_PICKER_SIZE = /*#__PURE__*/function (ICON_PICKER_SIZE) {
-  ICON_PICKER_SIZE["SMALL"] = "sm";
-  return ICON_PICKER_SIZE;
+var types_ICON_PICKER_SIZE = /*#__PURE__*/ function(ICON_PICKER_SIZE) {
+    ICON_PICKER_SIZE["SMALL"] = "sm";
+    return ICON_PICKER_SIZE;
 }({});
+export { types_ICON_PICKER_SIZE as ICON_PICKER_SIZE };
 
 //# sourceMappingURL=types.js.map

package/components/IconPicker/types.js.map

@@ -1 +1 @@
-{"version":3,"names":["ICON_PICKER_SIZE"],"sources":["types.ts"],"sourcesContent":["/**\n * We want to have an abstract type, which does not define specifics of each possible icon (like color or skin tone).\n */\nexport type Icon = {\n    type: \"icon\" | \"emoji\" | \"custom\" | (string & {});\n    name: string;\n    value?: string;\n    [key: string]: any;\n};\n\ntype IconsRow = {\n    type: \"icons\";\n    icons: Icon[];\n};\n\ntype CategoryNameRow = {\n    type: \"category-name\";\n    name: string;\n};\n\nexport type IconPickerGridRow = IconsRow | CategoryNameRow;\n\nexport enum ICON_PICKER_SIZE {\n    SMALL = \"sm\"\n}\n"],"mappings":"AAAA;AACA;AACA;;AAoBA,WAAYA,gBAAgB,0BAAhBA,gBAAgB;EAAhBA,gBAAgB;EAAA,OAAhBA,gBAAgB;AAAA","ignoreList":[]}
+{"version":3,"file":"components/IconPicker/types.js","sources":["../../../src/components/IconPicker/types.ts"],"sourcesContent":["/**\n * We want to have an abstract type, which does not define specifics of each possible icon (like color or skin tone).\n */\nexport type Icon = {\n    type: \"icon\" | \"emoji\" | \"custom\" | (string & {});\n    name: string;\n    value?: string;\n    [key: string]: any;\n};\n\ntype IconsRow = {\n    type: \"icons\";\n    icons: Icon[];\n};\n\ntype CategoryNameRow = {\n    type: \"category-name\";\n    name: string;\n};\n\nexport type IconPickerGridRow = IconsRow | CategoryNameRow;\n\nexport enum ICON_PICKER_SIZE {\n    SMALL = \"sm\"\n}\n"],"names":["ICON_PICKER_SIZE"],"mappings":"AAsBO,IAAKA,yBAAgBA,WAAAA,GAAAA,SAAhBA,gBAAgB;;WAAhBA"}