@webiny/app-admin 0.0.0-unstable.bca7b3e350 → 0.0.0-unstable.c27f4d8a31

package/components/IconPicker/IconRepository.js

@@ -0,0 +1,47 @@
+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;
+    }
+    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);
+  }
+}
+
+//# sourceMappingURL=IconRepository.js.map

package/components/IconPicker/IconRepository.js.map

@@ -0,0 +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":[]}

package/components/IconPicker/IconRepository.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/IconPicker/IconRepository.test.js

@@ -0,0 +1,67 @@
+import { describe, it, expect } from "vitest";
+import { IconRepository } from "./IconRepository.js";
+const mockIconTypes = [{
+  name: "icon"
+}, {
+  name: "emoji"
+}, {
+  name: "custom"
+}];
+const mockIcons = [{
+  type: "emoji",
+  name: "thumbs_up",
+  value: "👍",
+  category: "People & Body",
+  skinToneSupport: true
+}, {
+  type: "icon",
+  name: "regular_address-book",
+  value: '<path fill="currentColor" d="M384 48c8.8 0 16 7.2 16 16v384c0 8.8-7.2 16-16 16H96c-8.8 0-16-7.2-16-16V64c0-8.8 7.2-16 16-16h288zM96 0C60.7 0 32 28.7 32 64v384c0 35.3 28.7 64 64 64h288c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64H96zm144 256a64 64 0 1 0 0-128a64 64 0 1 0 0 128zm-32 32c-44.2 0-80 35.8-80 80c0 8.8 7.2 16 16 16h192c8.8 0 16-7.2 16-16c0-44.2-35.8-80-80-80h-64zM512 80c0-8.8-7.2-16-16-16s-16 7.2-16 16v64c0 8.8 7.2 16 16 16s16-7.2 16-16V80zm-16 112c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16s16-7.2 16-16v-64c0-8.8-7.2-16-16-16zm16 144c0-8.8-7.2-16-16-16s-16 7.2-16 16v64c0 8.8 7.2 16 16 16s16-7.2 16-16v-64z"/>',
+  category: "Business"
+}];
+const mockIconPackProviders = [{
+  name: "mock_icons",
+  getIcons: async () => {
+    return mockIcons;
+  }
+}];
+describe("IconRepository", () => {
+  const icon = {
+    type: "icon",
+    name: "solid_bullseye",
+    value: '<path fill="currentColor" d="M448 256a192 192 0 1 0-384 0a192 192 0 1 0 384 0zM0 256a256 256 0 1 1 512 0a256 256 0 1 1-512 0zm256 80a80 80 0 1 0 0-160a80 80 0 1 0 0 160zm0-224a144 144 0 1 1 0 288a144 144 0 1 1 0-288zm-32 144a32 32 0 1 1 64 0a32 32 0 1 1-64 0z"/>',
+    category: "Business",
+    color: "#282fe6"
+  };
+  it("should create an IconRepository and load icons and iconTypes", async () => {
+    // create repository
+    const repository = new IconRepository(mockIconTypes, mockIconPackProviders);
+
+    // repository should get the expected iconTypes array
+    expect(repository.getIconTypes()).toEqual(mockIconTypes);
+
+    // getIcons should return empty array
+    expect(repository.getIcons()).toEqual([]);
+
+    // load icons
+    await repository.loadIcons();
+
+    // getIcons should return the expected icons array
+    expect(repository.getIcons()).toEqual(mockIcons);
+  });
+  it("should create an IconRepository and add icon", () => {
+    // create repository
+    const repository = new IconRepository(mockIconTypes, mockIconPackProviders);
+
+    // getIcons should return empty array
+    expect(repository.getIcons()).toEqual([]);
+
+    // add icon
+    repository.addIcon(icon);
+
+    // getIcons should return the expected icons array
+    expect(repository.getIcons()).toEqual([icon]);
+  });
+});
+
+//# sourceMappingURL=IconRepository.test.js.map

package/components/IconPicker/IconRepository.test.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["describe","it","expect","IconRepository","mockIconTypes","name","mockIcons","type","value","category","skinToneSupport","mockIconPackProviders","getIcons","icon","color","repository","getIconTypes","toEqual","loadIcons","addIcon"],"sources":["IconRepository.test.ts"],"sourcesContent":["import { describe, it, expect } from \"vitest\";\nimport { IconRepository } from \"./IconRepository.js\";\nimport type { Icon } from \"./types.js\";\n\nconst mockIconTypes = [{ name: \"icon\" }, { name: \"emoji\" }, { name: \"custom\" }];\n\nconst mockIcons: Icon[] = [\n    {\n        type: \"emoji\",\n        name: \"thumbs_up\",\n        value: \"👍\",\n        category: \"People & Body\",\n        skinToneSupport: true\n    },\n    {\n        type: \"icon\",\n        name: \"regular_address-book\",\n        value: '<path fill=\"currentColor\" d=\"M384 48c8.8 0 16 7.2 16 16v384c0 8.8-7.2 16-16 16H96c-8.8 0-16-7.2-16-16V64c0-8.8 7.2-16 16-16h288zM96 0C60.7 0 32 28.7 32 64v384c0 35.3 28.7 64 64 64h288c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64H96zm144 256a64 64 0 1 0 0-128a64 64 0 1 0 0 128zm-32 32c-44.2 0-80 35.8-80 80c0 8.8 7.2 16 16 16h192c8.8 0 16-7.2 16-16c0-44.2-35.8-80-80-80h-64zM512 80c0-8.8-7.2-16-16-16s-16 7.2-16 16v64c0 8.8 7.2 16 16 16s16-7.2 16-16V80zm-16 112c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16s16-7.2 16-16v-64c0-8.8-7.2-16-16-16zm16 144c0-8.8-7.2-16-16-16s-16 7.2-16 16v64c0 8.8 7.2 16 16 16s16-7.2 16-16v-64z\"/>',\n        category: \"Business\"\n    }\n];\n\nconst mockIconPackProviders = [\n    {\n        name: \"mock_icons\",\n        getIcons: async () => {\n            return mockIcons;\n        }\n    }\n];\n\ndescribe(\"IconRepository\", () => {\n    const icon: Icon = {\n        type: \"icon\",\n        name: \"solid_bullseye\",\n        value: '<path fill=\"currentColor\" d=\"M448 256a192 192 0 1 0-384 0a192 192 0 1 0 384 0zM0 256a256 256 0 1 1 512 0a256 256 0 1 1-512 0zm256 80a80 80 0 1 0 0-160a80 80 0 1 0 0 160zm0-224a144 144 0 1 1 0 288a144 144 0 1 1 0-288zm-32 144a32 32 0 1 1 64 0a32 32 0 1 1-64 0z\"/>',\n        category: \"Business\",\n        color: \"#282fe6\"\n    };\n\n    it(\"should create an IconRepository and load icons and iconTypes\", async () => {\n        // create repository\n        const repository = new IconRepository(mockIconTypes, mockIconPackProviders);\n\n        // repository should get the expected iconTypes array\n        expect(repository.getIconTypes()).toEqual(mockIconTypes);\n\n        // getIcons should return empty array\n        expect(repository.getIcons()).toEqual([]);\n\n        // load icons\n        await repository.loadIcons();\n\n        // getIcons should return the expected icons array\n        expect(repository.getIcons()).toEqual(mockIcons);\n    });\n\n    it(\"should create an IconRepository and add icon\", () => {\n        // create repository\n        const repository = new IconRepository(mockIconTypes, mockIconPackProviders);\n\n        // getIcons should return empty array\n        expect(repository.getIcons()).toEqual([]);\n\n        // add icon\n        repository.addIcon(icon);\n\n        // getIcons should return the expected icons array\n        expect(repository.getIcons()).toEqual([icon]);\n    });\n});\n"],"mappings":"AAAA,SAASA,QAAQ,EAAEC,EAAE,EAAEC,MAAM,QAAQ,QAAQ;AAC7C,SAASC,cAAc;AAGvB,MAAMC,aAAa,GAAG,CAAC;EAAEC,IAAI,EAAE;AAAO,CAAC,EAAE;EAAEA,IAAI,EAAE;AAAQ,CAAC,EAAE;EAAEA,IAAI,EAAE;AAAS,CAAC,CAAC;AAE/E,MAAMC,SAAiB,GAAG,CACtB;EACIC,IAAI,EAAE,OAAO;EACbF,IAAI,EAAE,WAAW;EACjBG,KAAK,EAAE,IAAI;EACXC,QAAQ,EAAE,eAAe;EACzBC,eAAe,EAAE;AACrB,CAAC,EACD;EACIH,IAAI,EAAE,MAAM;EACZF,IAAI,EAAE,sBAAsB;EAC5BG,KAAK,EAAE,inBAAinB;EACxnBC,QAAQ,EAAE;AACd,CAAC,CACJ;AAED,MAAME,qBAAqB,GAAG,CAC1B;EACIN,IAAI,EAAE,YAAY;EAClBO,QAAQ,EAAE,MAAAA,CAAA,KAAY;IAClB,OAAON,SAAS;EACpB;AACJ,CAAC,CACJ;AAEDN,QAAQ,CAAC,gBAAgB,EAAE,MAAM;EAC7B,MAAMa,IAAU,GAAG;IACfN,IAAI,EAAE,MAAM;IACZF,IAAI,EAAE,gBAAgB;IACtBG,KAAK,EAAE,wQAAwQ;IAC/QC,QAAQ,EAAE,UAAU;IACpBK,KAAK,EAAE;EACX,CAAC;EAEDb,EAAE,CAAC,8DAA8D,EAAE,YAAY;IAC3E;IACA,MAAMc,UAAU,GAAG,IAAIZ,cAAc,CAACC,aAAa,EAAEO,qBAAqB,CAAC;;IAE3E;IACAT,MAAM,CAACa,UAAU,CAACC,YAAY,CAAC,CAAC,CAAC,CAACC,OAAO,CAACb,aAAa,CAAC;;IAExD;IACAF,MAAM,CAACa,UAAU,CAACH,QAAQ,CAAC,CAAC,CAAC,CAACK,OAAO,CAAC,EAAE,CAAC;;IAEzC;IACA,MAAMF,UAAU,CAACG,SAAS,CAAC,CAAC;;IAE5B;IACAhB,MAAM,CAACa,UAAU,CAACH,QAAQ,CAAC,CAAC,CAAC,CAACK,OAAO,CAACX,SAAS,CAAC;EACpD,CAAC,CAAC;EAEFL,EAAE,CAAC,8CAA8C,EAAE,MAAM;IACrD;IACA,MAAMc,UAAU,GAAG,IAAIZ,cAAc,CAACC,aAAa,EAAEO,qBAAqB,CAAC;;IAE3E;IACAT,MAAM,CAACa,UAAU,CAACH,QAAQ,CAAC,CAAC,CAAC,CAACK,OAAO,CAAC,EAAE,CAAC;;IAEzC;IACAF,UAAU,CAACI,OAAO,CAACN,IAAI,CAAC;;IAExB;IACAX,MAAM,CAACa,UAAU,CAACH,QAAQ,CAAC,CAAC,CAAC,CAACK,OAAO,CAAC,CAACJ,IAAI,CAAC,CAAC;EACjD,CAAC,CAAC;AACN,CAAC,CAAC","ignoreList":[]}

package/components/IconPicker/IconRepositoryFactory.d.ts

@@ -0,0 +1,9 @@
+import { IconRepository } from "./IconRepository.js";
+import type { IconPackProviderInterface as IconPackProvider, IconType } from "./config/index.js";
+declare class IconRepositoryFactory {
+    private cache;
+    getRepository(iconTypes: IconType[], iconPackProviders: IconPackProvider[]): IconRepository;
+    private getCacheKey;
+}
+export declare const iconRepositoryFactory: IconRepositoryFactory;
+export {};

package/components/IconPicker/IconRepositoryFactory.js

@@ -0,0 +1,17 @@
+import { IconRepository } from "./IconRepository.js";
+class IconRepositoryFactory {
+  cache = new Map();
+  getRepository(iconTypes, iconPackProviders) {
+    const cacheKey = this.getCacheKey(iconTypes, iconPackProviders);
+    if (!this.cache.has(cacheKey)) {
+      this.cache.set(cacheKey, new IconRepository(iconTypes, iconPackProviders));
+    }
+    return this.cache.get(cacheKey);
+  }
+  getCacheKey(iconTypes, iconPackProviders) {
+    return [...iconTypes.map(iconType => iconType.name).sort(), ...iconPackProviders.map(provider => provider.name).sort()].join("#");
+  }
+}
+export const iconRepositoryFactory = new IconRepositoryFactory();
+
+//# sourceMappingURL=IconRepositoryFactory.js.map

package/components/IconPicker/IconRepositoryFactory.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["IconRepository","IconRepositoryFactory","cache","Map","getRepository","iconTypes","iconPackProviders","cacheKey","getCacheKey","has","set","get","map","iconType","name","sort","provider","join","iconRepositoryFactory"],"sources":["IconRepositoryFactory.ts"],"sourcesContent":["import { IconRepository } from \"./IconRepository.js\";\nimport type { IconPackProviderInterface as IconPackProvider, IconType } from \"./config/index.js\";\n\nclass IconRepositoryFactory {\n    private cache: Map<string, IconRepository> = new Map();\n\n    getRepository(iconTypes: IconType[], iconPackProviders: IconPackProvider[]) {\n        const cacheKey = this.getCacheKey(iconTypes, iconPackProviders);\n\n        if (!this.cache.has(cacheKey)) {\n            this.cache.set(cacheKey, new IconRepository(iconTypes, iconPackProviders));\n        }\n\n        return this.cache.get(cacheKey) as IconRepository;\n    }\n\n    private getCacheKey(iconTypes: IconType[], iconPackProviders: IconPackProvider[]) {\n        return [\n            ...iconTypes.map(iconType => iconType.name).sort(),\n            ...iconPackProviders.map(provider => provider.name).sort()\n        ].join(\"#\");\n    }\n}\n\nexport const iconRepositoryFactory = new IconRepositoryFactory();\n"],"mappings":"AAAA,SAASA,cAAc;AAGvB,MAAMC,qBAAqB,CAAC;EAChBC,KAAK,GAAgC,IAAIC,GAAG,CAAC,CAAC;EAEtDC,aAAaA,CAACC,SAAqB,EAAEC,iBAAqC,EAAE;IACxE,MAAMC,QAAQ,GAAG,IAAI,CAACC,WAAW,CAACH,SAAS,EAAEC,iBAAiB,CAAC;IAE/D,IAAI,CAAC,IAAI,CAACJ,KAAK,CAACO,GAAG,CAACF,QAAQ,CAAC,EAAE;MAC3B,IAAI,CAACL,KAAK,CAACQ,GAAG,CAACH,QAAQ,EAAE,IAAIP,cAAc,CAACK,SAAS,EAAEC,iBAAiB,CAAC,CAAC;IAC9E;IAEA,OAAO,IAAI,CAACJ,KAAK,CAACS,GAAG,CAACJ,QAAQ,CAAC;EACnC;EAEQC,WAAWA,CAACH,SAAqB,EAAEC,iBAAqC,EAAE;IAC9E,OAAO,CACH,GAAGD,SAAS,CAACO,GAAG,CAACC,QAAQ,IAAIA,QAAQ,CAACC,IAAI,CAAC,CAACC,IAAI,CAAC,CAAC,EAClD,GAAGT,iBAAiB,CAACM,GAAG,CAACI,QAAQ,IAAIA,QAAQ,CAACF,IAAI,CAAC,CAACC,IAAI,CAAC,CAAC,CAC7D,CAACE,IAAI,CAAC,GAAG,CAAC;EACf;AACJ;AAEA,OAAO,MAAMC,qBAAqB,GAAG,IAAIjB,qBAAqB,CAAC,CAAC","ignoreList":[]}

package/components/IconPicker/Loading.d.ts

@@ -0,0 +1,14 @@
+export declare class Loading {
+    private _isLoading;
+    private _loadingLabel;
+    private _feedback;
+    private _success;
+    constructor(isLoading?: boolean);
+    startLoading(label?: string): void;
+    stopLoadingWithSuccess(message?: string): void;
+    stopLoadingWithError(message?: string): void;
+    get isLoading(): boolean;
+    get loadingLabel(): string;
+    get feedback(): string;
+    runCallbackWithLoading<T>(callback: () => Promise<T>, loadingLabel?: string, successMessage?: string, failureMessage?: string): Promise<T>;
+}

package/components/IconPicker/Loading.js

@@ -0,0 +1,50 @@
+import { makeAutoObservable } from "mobx";
+export class Loading {
+  constructor(isLoading = false) {
+    this._isLoading = isLoading;
+    this._loadingLabel = "";
+    this._feedback = "";
+    this._success = false;
+    makeAutoObservable(this);
+  }
+  startLoading(label) {
+    this._isLoading = true;
+    this._loadingLabel = label || "";
+    this._feedback = "";
+    this._success = false;
+  }
+  stopLoadingWithSuccess(message) {
+    this._isLoading = false;
+    this._loadingLabel = "";
+    this._feedback = message || "";
+    this._success = true;
+  }
+  stopLoadingWithError(message) {
+    this._isLoading = false;
+    this._loadingLabel = "";
+    this._feedback = message || "";
+    this._success = false;
+  }
+  get isLoading() {
+    return this._isLoading;
+  }
+  get loadingLabel() {
+    return this._loadingLabel;
+  }
+  get feedback() {
+    return this._feedback;
+  }
+  async runCallbackWithLoading(callback, loadingLabel, successMessage, failureMessage) {
+    try {
+      this.startLoading(loadingLabel);
+      const result = await callback();
+      this.stopLoadingWithSuccess(successMessage);
+      return result;
+    } catch (e) {
+      this.stopLoadingWithError(e.message || failureMessage);
+      throw e;
+    }
+  }
+}
+
+//# sourceMappingURL=Loading.js.map

package/components/IconPicker/Loading.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["makeAutoObservable","Loading","constructor","isLoading","_isLoading","_loadingLabel","_feedback","_success","startLoading","label","stopLoadingWithSuccess","message","stopLoadingWithError","loadingLabel","feedback","runCallbackWithLoading","callback","successMessage","failureMessage","result","e"],"sources":["Loading.ts"],"sourcesContent":["import { makeAutoObservable } from \"mobx\";\n\nexport class Loading {\n    private _isLoading: boolean;\n    private _loadingLabel: string;\n    private _feedback: string;\n    private _success: boolean;\n\n    constructor(isLoading = false) {\n        this._isLoading = isLoading;\n        this._loadingLabel = \"\";\n        this._feedback = \"\";\n        this._success = false;\n        makeAutoObservable(this);\n    }\n\n    startLoading(label?: string) {\n        this._isLoading = true;\n        this._loadingLabel = label || \"\";\n        this._feedback = \"\";\n        this._success = false;\n    }\n\n    stopLoadingWithSuccess(message?: string) {\n        this._isLoading = false;\n        this._loadingLabel = \"\";\n        this._feedback = message || \"\";\n        this._success = true;\n    }\n\n    stopLoadingWithError(message?: string) {\n        this._isLoading = false;\n        this._loadingLabel = \"\";\n        this._feedback = message || \"\";\n        this._success = false;\n    }\n\n    get isLoading() {\n        return this._isLoading;\n    }\n\n    get loadingLabel() {\n        return this._loadingLabel;\n    }\n\n    get feedback() {\n        return this._feedback;\n    }\n\n    async runCallbackWithLoading<T>(\n        callback: () => Promise<T>,\n        loadingLabel?: string,\n        successMessage?: string,\n        failureMessage?: string\n    ): Promise<T> {\n        try {\n            this.startLoading(loadingLabel);\n            const result = await callback();\n            this.stopLoadingWithSuccess(successMessage);\n            return result;\n        } catch (e) {\n            this.stopLoadingWithError(e.message || failureMessage);\n            throw e;\n        }\n    }\n}\n"],"mappings":"AAAA,SAASA,kBAAkB,QAAQ,MAAM;AAEzC,OAAO,MAAMC,OAAO,CAAC;EAMjBC,WAAWA,CAACC,SAAS,GAAG,KAAK,EAAE;IAC3B,IAAI,CAACC,UAAU,GAAGD,SAAS;IAC3B,IAAI,CAACE,aAAa,GAAG,EAAE;IACvB,IAAI,CAACC,SAAS,GAAG,EAAE;IACnB,IAAI,CAACC,QAAQ,GAAG,KAAK;IACrBP,kBAAkB,CAAC,IAAI,CAAC;EAC5B;EAEAQ,YAAYA,CAACC,KAAc,EAAE;IACzB,IAAI,CAACL,UAAU,GAAG,IAAI;IACtB,IAAI,CAACC,aAAa,GAAGI,KAAK,IAAI,EAAE;IAChC,IAAI,CAACH,SAAS,GAAG,EAAE;IACnB,IAAI,CAACC,QAAQ,GAAG,KAAK;EACzB;EAEAG,sBAAsBA,CAACC,OAAgB,EAAE;IACrC,IAAI,CAACP,UAAU,GAAG,KAAK;IACvB,IAAI,CAACC,aAAa,GAAG,EAAE;IACvB,IAAI,CAACC,SAAS,GAAGK,OAAO,IAAI,EAAE;IAC9B,IAAI,CAACJ,QAAQ,GAAG,IAAI;EACxB;EAEAK,oBAAoBA,CAACD,OAAgB,EAAE;IACnC,IAAI,CAACP,UAAU,GAAG,KAAK;IACvB,IAAI,CAACC,aAAa,GAAG,EAAE;IACvB,IAAI,CAACC,SAAS,GAAGK,OAAO,IAAI,EAAE;IAC9B,IAAI,CAACJ,QAAQ,GAAG,KAAK;EACzB;EAEA,IAAIJ,SAASA,CAAA,EAAG;IACZ,OAAO,IAAI,CAACC,UAAU;EAC1B;EAEA,IAAIS,YAAYA,CAAA,EAAG;IACf,OAAO,IAAI,CAACR,aAAa;EAC7B;EAEA,IAAIS,QAAQA,CAAA,EAAG;IACX,OAAO,IAAI,CAACR,SAAS;EACzB;EAEA,MAAMS,sBAAsBA,CACxBC,QAA0B,EAC1BH,YAAqB,EACrBI,cAAuB,EACvBC,cAAuB,EACb;IACV,IAAI;MACA,IAAI,CAACV,YAAY,CAACK,YAAY,CAAC;MAC/B,MAAMM,MAAM,GAAG,MAAMH,QAAQ,CAAC,CAAC;MAC/B,IAAI,CAACN,sBAAsB,CAACO,cAAc,CAAC;MAC3C,OAAOE,MAAM;IACjB,CAAC,CAAC,OAAOC,CAAC,EAAE;MACR,IAAI,CAACR,oBAAoB,CAACQ,CAAC,CAACT,OAAO,IAAIO,cAAc,CAAC;MACtD,MAAME,CAAC;IACX;EACJ;AACJ","ignoreList":[]}

package/components/IconPicker/components/IconPickerCell.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import { type VariantProps } from "@webiny/admin-ui";
+import type { Icon } from "../../../components/IconPicker/index.js";
+declare const iconPickerCellVariants: (props?: ({
+    isActive?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+interface IconPickerCellProps extends VariantProps<typeof iconPickerCellVariants> {
+    icon: Icon;
+    onIconClick: (icon: Icon) => void;
+}
+declare const IconPickerCell: ({ isActive, icon, onIconClick }: IconPickerCellProps) => React.JSX.Element;
+export { IconPickerCell, type IconPickerCellProps };

package/components/IconPicker/components/IconPickerCell.js

@@ -0,0 +1,27 @@
+import React from "react";
+import { cn, cva } from "@webiny/admin-ui";
+import { IconProvider, IconRenderer } from "../IconRenderer.js";
+const iconPickerCellVariants = cva(["flex justify-center items-center", "rounded-md cursor-pointer size-xl p-xs", "hover:bg-neutral-dimmed transition-all duration-500 ease-out"], {
+  variants: {
+    isActive: {
+      true: "bg-neutral-dimmed"
+    }
+  }
+});
+const IconPickerCell = ({
+  isActive,
+  icon,
+  onIconClick
+}) => {
+  return /*#__PURE__*/React.createElement("div", {
+    className: cn(iconPickerCellVariants({
+      isActive
+    })),
+    onClick: () => onIconClick(icon)
+  }, /*#__PURE__*/React.createElement(IconProvider, {
+    icon: icon
+  }, /*#__PURE__*/React.createElement(IconRenderer, null)));
+};
+export { IconPickerCell };
+
+//# sourceMappingURL=IconPickerCell.js.map

package/components/IconPicker/components/IconPickerCell.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","cn","cva","IconProvider","IconRenderer","iconPickerCellVariants","variants","isActive","true","IconPickerCell","icon","onIconClick","createElement","className","onClick"],"sources":["IconPickerCell.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn, cva, type VariantProps } from \"@webiny/admin-ui\";\nimport type { Icon } from \"~/components/IconPicker/index.js\";\nimport { IconProvider, IconRenderer } from \"~/components/IconPicker/IconRenderer.js\";\n\nconst iconPickerCellVariants = cva(\n    [\n        \"flex justify-center items-center\",\n        \"rounded-md cursor-pointer size-xl p-xs\",\n        \"hover:bg-neutral-dimmed transition-all duration-500 ease-out\"\n    ],\n    {\n        variants: {\n            isActive: {\n                true: \"bg-neutral-dimmed\"\n            }\n        }\n    }\n);\n\ninterface IconPickerCellProps extends VariantProps<typeof iconPickerCellVariants> {\n    icon: Icon;\n    onIconClick: (icon: Icon) => void;\n}\n\nconst IconPickerCell = ({ isActive, icon, onIconClick }: IconPickerCellProps) => {\n    return (\n        <div className={cn(iconPickerCellVariants({ isActive }))} onClick={() => onIconClick(icon)}>\n            <IconProvider icon={icon}>\n                <IconRenderer />\n            </IconProvider>\n        </div>\n    );\n};\n\nexport { IconPickerCell, type IconPickerCellProps };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,EAAE,EAAEC,GAAG,QAA2B,kBAAkB;AAE7D,SAASC,YAAY,EAAEC,YAAY;AAEnC,MAAMC,sBAAsB,GAAGH,GAAG,CAC9B,CACI,kCAAkC,EAClC,wCAAwC,EACxC,8DAA8D,CACjE,EACD;EACII,QAAQ,EAAE;IACNC,QAAQ,EAAE;MACNC,IAAI,EAAE;IACV;EACJ;AACJ,CACJ,CAAC;AAOD,MAAMC,cAAc,GAAGA,CAAC;EAAEF,QAAQ;EAAEG,IAAI;EAAEC;AAAiC,CAAC,KAAK;EAC7E,oBACIX,KAAA,CAAAY,aAAA;IAAKC,SAAS,EAAEZ,EAAE,CAACI,sBAAsB,CAAC;MAAEE;IAAS,CAAC,CAAC,CAAE;IAACO,OAAO,EAAEA,CAAA,KAAMH,WAAW,CAACD,IAAI;EAAE,gBACvFV,KAAA,CAAAY,aAAA,CAACT,YAAY;IAACO,IAAI,EAAEA;EAAK,gBACrBV,KAAA,CAAAY,aAAA,CAACR,YAAY,MAAE,CACL,CACb,CAAC;AAEd,CAAC;AAED,SAASK,cAAc","ignoreList":[]}

package/components/IconPicker/components/IconPickerContent.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import type { IconType } from "../../../components/IconPicker/config/index.js";
+interface IconPickerContentProps {
+    loading?: boolean;
+    iconTypes: IconType[];
+    activeTab?: string;
+    removeIcon: () => void;
+    removable?: boolean;
+}
+declare const IconPickerContent: ({ activeTab, iconTypes, loading, removeIcon, removable }: IconPickerContentProps) => React.JSX.Element;
+export { IconPickerContent, type IconPickerContentProps };

package/components/IconPicker/components/IconPickerContent.js

@@ -0,0 +1,41 @@
+import React from "react";
+import { ReactComponent as DeleteIcon } from "@webiny/icons/delete.svg";
+import { Button, Icon, OverlayLoader, Tabs } from "@webiny/admin-ui";
+import { IconTypeProvider } from "../config/IconType.js";
+import { IconPickerTabRenderer } from "../IconPickerTab.js";
+const IconPickerContent = ({
+  activeTab,
+  iconTypes,
+  loading,
+  removeIcon,
+  removable
+}) => {
+  return /*#__PURE__*/React.createElement("div", {
+    className: "relative"
+  }, loading && /*#__PURE__*/React.createElement(OverlayLoader, {
+    size: "sm"
+  }), /*#__PURE__*/React.createElement(Tabs, {
+    size: "sm",
+    spacing: "sm",
+    defaultValue: activeTab,
+    separator: true,
+    tabs: iconTypes.map(iconType => /*#__PURE__*/React.createElement(IconTypeProvider, {
+      key: iconType.name,
+      type: iconType.name
+    }, /*#__PURE__*/React.createElement(IconPickerTabRenderer, null)))
+  }), removable && /*#__PURE__*/React.createElement("div", {
+    className: "flex flex-col px-sm py-sm border-solid border-t-sm border-neutral-muted"
+  }, /*#__PURE__*/React.createElement(Button, {
+    size: "md",
+    variant: "secondary",
+    text: "Remove",
+    icon: /*#__PURE__*/React.createElement(Icon, {
+      icon: /*#__PURE__*/React.createElement(DeleteIcon, null),
+      label: "Remove"
+    }),
+    onClick: removeIcon
+  })));
+};
+export { IconPickerContent };
+
+//# sourceMappingURL=IconPickerContent.js.map

package/components/IconPicker/components/IconPickerContent.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","ReactComponent","DeleteIcon","Button","Icon","OverlayLoader","Tabs","IconTypeProvider","IconPickerTabRenderer","IconPickerContent","activeTab","iconTypes","loading","removeIcon","removable","createElement","className","size","spacing","defaultValue","separator","tabs","map","iconType","key","name","type","variant","text","icon","label","onClick"],"sources":["IconPickerContent.tsx"],"sourcesContent":["import React from \"react\";\nimport { ReactComponent as DeleteIcon } from \"@webiny/icons/delete.svg\";\nimport { Button, Icon, OverlayLoader, Tabs } from \"@webiny/admin-ui\";\nimport { IconTypeProvider } from \"~/components/IconPicker/config/IconType.js\";\nimport { IconPickerTabRenderer } from \"~/components/IconPicker/IconPickerTab.js\";\nimport type { IconType } from \"~/components/IconPicker/config/index.js\";\n\ninterface IconPickerContentProps {\n    loading?: boolean;\n    iconTypes: IconType[];\n    activeTab?: string;\n    removeIcon: () => void;\n    removable?: boolean;\n}\n\nconst IconPickerContent = ({\n    activeTab,\n    iconTypes,\n    loading,\n    removeIcon,\n    removable\n}: IconPickerContentProps) => {\n    return (\n        <div className={\"relative\"}>\n            {loading && <OverlayLoader size={\"sm\"} />}\n            <Tabs\n                size={\"sm\"}\n                spacing={\"sm\"}\n                defaultValue={activeTab}\n                separator={true}\n                tabs={iconTypes.map(iconType => (\n                    <IconTypeProvider key={iconType.name} type={iconType.name}>\n                        <IconPickerTabRenderer />\n                    </IconTypeProvider>\n                ))}\n            />\n            {removable && (\n                <div\n                    className={\n                        \"flex flex-col px-sm py-sm border-solid border-t-sm border-neutral-muted\"\n                    }\n                >\n                    <Button\n                        size={\"md\"}\n                        variant={\"secondary\"}\n                        text={\"Remove\"}\n                        icon={<Icon icon={<DeleteIcon />} label={\"Remove\"} />}\n                        onClick={removeIcon}\n                    />\n                </div>\n            )}\n        </div>\n    );\n};\n\nexport { IconPickerContent, type IconPickerContentProps };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,cAAc,IAAIC,UAAU,QAAQ,0BAA0B;AACvE,SAASC,MAAM,EAAEC,IAAI,EAAEC,aAAa,EAAEC,IAAI,QAAQ,kBAAkB;AACpE,SAASC,gBAAgB;AACzB,SAASC,qBAAqB;AAW9B,MAAMC,iBAAiB,GAAGA,CAAC;EACvBC,SAAS;EACTC,SAAS;EACTC,OAAO;EACPC,UAAU;EACVC;AACoB,CAAC,KAAK;EAC1B,oBACId,KAAA,CAAAe,aAAA;IAAKC,SAAS,EAAE;EAAW,GACtBJ,OAAO,iBAAIZ,KAAA,CAAAe,aAAA,CAACV,aAAa;IAACY,IAAI,EAAE;EAAK,CAAE,CAAC,eACzCjB,KAAA,CAAAe,aAAA,CAACT,IAAI;IACDW,IAAI,EAAE,IAAK;IACXC,OAAO,EAAE,IAAK;IACdC,YAAY,EAAET,SAAU;IACxBU,SAAS,EAAE,IAAK;IAChBC,IAAI,EAAEV,SAAS,CAACW,GAAG,CAACC,QAAQ,iBACxBvB,KAAA,CAAAe,aAAA,CAACR,gBAAgB;MAACiB,GAAG,EAAED,QAAQ,CAACE,IAAK;MAACC,IAAI,EAAEH,QAAQ,CAACE;IAAK,gBACtDzB,KAAA,CAAAe,aAAA,CAACP,qBAAqB,MAAE,CACV,CACrB;EAAE,CACN,CAAC,EACDM,SAAS,iBACNd,KAAA,CAAAe,aAAA;IACIC,SAAS,EACL;EACH,gBAEDhB,KAAA,CAAAe,aAAA,CAACZ,MAAM;IACHc,IAAI,EAAE,IAAK;IACXU,OAAO,EAAE,WAAY;IACrBC,IAAI,EAAE,QAAS;IACfC,IAAI,eAAE7B,KAAA,CAAAe,aAAA,CAACX,IAAI;MAACyB,IAAI,eAAE7B,KAAA,CAAAe,aAAA,CAACb,UAAU,MAAE,CAAE;MAAC4B,KAAK,EAAE;IAAS,CAAE,CAAE;IACtDC,OAAO,EAAElB;EAAW,CACvB,CACA,CAER,CAAC;AAEd,CAAC;AAED,SAASJ,iBAAiB","ignoreList":[]}

package/components/IconPicker/components/IconPickerRow.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+type IconPickerRowProps = React.ButtonHTMLAttributes<HTMLDivElement>;
+declare const IconPickerRow: ({ children, className, ...props }: IconPickerRowProps) => React.JSX.Element;
+export { IconPickerRow, type IconPickerRowProps };

package/components/IconPicker/components/IconPickerRow.js

@@ -0,0 +1,14 @@
+import React from "react";
+import { cn } from "@webiny/admin-ui";
+const IconPickerRow = ({
+  children,
+  className,
+  ...props
+}) => {
+  return /*#__PURE__*/React.createElement("div", Object.assign({}, props, {
+    className: cn("flex items-center gap-sm", className)
+  }), children);
+};
+export { IconPickerRow };
+
+//# sourceMappingURL=IconPickerRow.js.map

package/components/IconPicker/components/IconPickerRow.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","cn","IconPickerRow","children","className","props","createElement","Object","assign"],"sources":["IconPickerRow.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn } from \"@webiny/admin-ui\";\n\ntype IconPickerRowProps = React.ButtonHTMLAttributes<HTMLDivElement>;\n\nconst IconPickerRow = ({ children, className, ...props }: IconPickerRowProps) => {\n    return (\n        <div {...props} className={cn(\"flex items-center gap-sm\", className)}>\n            {children}\n        </div>\n    );\n};\n\nexport { IconPickerRow, type IconPickerRowProps };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,EAAE,QAAQ,kBAAkB;AAIrC,MAAMC,aAAa,GAAGA,CAAC;EAAEC,QAAQ;EAAEC,SAAS;EAAE,GAAGC;AAA0B,CAAC,KAAK;EAC7E,oBACIL,KAAA,CAAAM,aAAA,QAAAC,MAAA,CAAAC,MAAA,KAASH,KAAK;IAAED,SAAS,EAAEH,EAAE,CAAC,0BAA0B,EAAEG,SAAS;EAAE,IAChED,QACA,CAAC;AAEd,CAAC;AAED,SAASD,aAAa","ignoreList":[]}

package/components/IconPicker/components/IconPickerTrigger.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import { inputVariants, type VariantProps } from "@webiny/admin-ui";
+import type { Icon } from "../../../components/IconPicker/types.js";
+declare const iconPickerTriggerVariants: (props?: ({
+    size?: "md" | "lg" | "xl" | null | undefined;
+    disabled?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+interface IconPickerTriggerProps extends VariantProps<typeof inputVariants>, VariantProps<typeof iconPickerTriggerVariants> {
+    icon: Icon | null;
+    disabled?: boolean;
+}
+declare const IconPickerTrigger: (props: IconPickerTriggerProps) => React.JSX.Element;
+export { IconPickerTrigger, type IconPickerTriggerProps };

package/components/IconPicker/components/IconPickerTrigger.js

@@ -0,0 +1,52 @@
+import React from "react";
+import { ReactComponent as EmptyIcon } from "@webiny/icons/remove.svg";
+import { ReactComponent as ChevronDown } from "@webiny/icons/keyboard_arrow_down.svg";
+import { cn, cva, Icon as IconComponent, inputVariants } from "@webiny/admin-ui";
+import { IconProvider, IconRenderer } from "../IconRenderer.js";
+const iconPickerTriggerVariants = cva("cursor-pointer fill-neutral-xstrong", {
+  variants: {
+    size: {
+      md: "w-3xl",
+      lg: "w-3xl",
+      xl: "w-[76px]"
+    },
+    disabled: {
+      true: "pointer-events-none"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+const IconPickerTrigger = props => {
+  return /*#__PURE__*/React.createElement("div", {
+    "data-disabled": props.disabled,
+    className: cn(inputVariants({
+      size: props.size,
+      variant: props.variant,
+      invalid: props.invalid
+    }), iconPickerTriggerVariants({
+      size: props.size,
+      disabled: props.disabled
+    }))
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "flex items-center gap-xs"
+  }, /*#__PURE__*/React.createElement("div", null, props.icon ? /*#__PURE__*/React.createElement(IconProvider, {
+    icon: props.icon,
+    size: 24
+  }, /*#__PURE__*/React.createElement(IconComponent, {
+    icon: /*#__PURE__*/React.createElement(IconRenderer, null),
+    label: props.icon.name
+  })) : /*#__PURE__*/React.createElement(IconComponent, {
+    icon: /*#__PURE__*/React.createElement(EmptyIcon, null),
+    label: "Search icons",
+    size: "lg"
+  })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(IconComponent, {
+    size: "sm",
+    icon: /*#__PURE__*/React.createElement(ChevronDown, null),
+    label: "Open list"
+  }))));
+};
+export { IconPickerTrigger };
+
+//# sourceMappingURL=IconPickerTrigger.js.map

package/components/IconPicker/components/IconPickerTrigger.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","ReactComponent","EmptyIcon","ChevronDown","cn","cva","Icon","IconComponent","inputVariants","IconProvider","IconRenderer","iconPickerTriggerVariants","variants","size","md","lg","xl","disabled","true","defaultVariants","IconPickerTrigger","props","createElement","className","variant","invalid","icon","label","name"],"sources":["IconPickerTrigger.tsx"],"sourcesContent":["import React from \"react\";\nimport { ReactComponent as EmptyIcon } from \"@webiny/icons/remove.svg\";\nimport { ReactComponent as ChevronDown } from \"@webiny/icons/keyboard_arrow_down.svg\";\nimport { cn, cva, Icon as IconComponent, inputVariants, type VariantProps } from \"@webiny/admin-ui\";\nimport { IconProvider, IconRenderer } from \"~/components/IconPicker/IconRenderer.js\";\nimport type { Icon } from \"~/components/IconPicker/types.js\";\n\nconst iconPickerTriggerVariants = cva(\"cursor-pointer fill-neutral-xstrong\", {\n    variants: {\n        size: {\n            md: \"w-3xl\",\n            lg: \"w-3xl\",\n            xl: \"w-[76px]\"\n        },\n        disabled: {\n            true: \"pointer-events-none\"\n        }\n    },\n    defaultVariants: {\n        size: \"md\"\n    }\n});\n\ninterface IconPickerTriggerProps\n    extends VariantProps<typeof inputVariants>,\n        VariantProps<typeof iconPickerTriggerVariants> {\n    icon: Icon | null;\n    disabled?: boolean;\n}\n\nconst IconPickerTrigger = (props: IconPickerTriggerProps) => {\n    return (\n        <div\n            data-disabled={props.disabled}\n            className={cn(\n                inputVariants({\n                    size: props.size,\n                    variant: props.variant,\n                    invalid: props.invalid\n                }),\n                iconPickerTriggerVariants({ size: props.size, disabled: props.disabled })\n            )}\n        >\n            <div className={\"flex items-center gap-xs\"}>\n                <div>\n                    {props.icon ? (\n                        <IconProvider icon={props.icon} size={24}>\n                            <IconComponent icon={<IconRenderer />} label={props.icon.name} />\n                        </IconProvider>\n                    ) : (\n                        <IconComponent icon={<EmptyIcon />} label={\"Search icons\"} size={\"lg\"} />\n                    )}\n                </div>\n                <div>\n                    <IconComponent size={\"sm\"} icon={<ChevronDown />} label={\"Open list\"} />\n                </div>\n            </div>\n        </div>\n    );\n};\n\nexport { IconPickerTrigger, type IconPickerTriggerProps };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,cAAc,IAAIC,SAAS,QAAQ,0BAA0B;AACtE,SAASD,cAAc,IAAIE,WAAW,QAAQ,uCAAuC;AACrF,SAASC,EAAE,EAAEC,GAAG,EAAEC,IAAI,IAAIC,aAAa,EAAEC,aAAa,QAA2B,kBAAkB;AACnG,SAASC,YAAY,EAAEC,YAAY;AAGnC,MAAMC,yBAAyB,GAAGN,GAAG,CAAC,qCAAqC,EAAE;EACzEO,QAAQ,EAAE;IACNC,IAAI,EAAE;MACFC,EAAE,EAAE,OAAO;MACXC,EAAE,EAAE,OAAO;MACXC,EAAE,EAAE;IACR,CAAC;IACDC,QAAQ,EAAE;MACNC,IAAI,EAAE;IACV;EACJ,CAAC;EACDC,eAAe,EAAE;IACbN,IAAI,EAAE;EACV;AACJ,CAAC,CAAC;AASF,MAAMO,iBAAiB,GAAIC,KAA6B,IAAK;EACzD,oBACIrB,KAAA,CAAAsB,aAAA;IACI,iBAAeD,KAAK,CAACJ,QAAS;IAC9BM,SAAS,EAAEnB,EAAE,CACTI,aAAa,CAAC;MACVK,IAAI,EAAEQ,KAAK,CAACR,IAAI;MAChBW,OAAO,EAAEH,KAAK,CAACG,OAAO;MACtBC,OAAO,EAAEJ,KAAK,CAACI;IACnB,CAAC,CAAC,EACFd,yBAAyB,CAAC;MAAEE,IAAI,EAAEQ,KAAK,CAACR,IAAI;MAAEI,QAAQ,EAAEI,KAAK,CAACJ;IAAS,CAAC,CAC5E;EAAE,gBAEFjB,KAAA,CAAAsB,aAAA;IAAKC,SAAS,EAAE;EAA2B,gBACvCvB,KAAA,CAAAsB,aAAA,cACKD,KAAK,CAACK,IAAI,gBACP1B,KAAA,CAAAsB,aAAA,CAACb,YAAY;IAACiB,IAAI,EAAEL,KAAK,CAACK,IAAK;IAACb,IAAI,EAAE;EAAG,gBACrCb,KAAA,CAAAsB,aAAA,CAACf,aAAa;IAACmB,IAAI,eAAE1B,KAAA,CAAAsB,aAAA,CAACZ,YAAY,MAAE,CAAE;IAACiB,KAAK,EAAEN,KAAK,CAACK,IAAI,CAACE;EAAK,CAAE,CACtD,CAAC,gBAEf5B,KAAA,CAAAsB,aAAA,CAACf,aAAa;IAACmB,IAAI,eAAE1B,KAAA,CAAAsB,aAAA,CAACpB,SAAS,MAAE,CAAE;IAACyB,KAAK,EAAE,cAAe;IAACd,IAAI,EAAE;EAAK,CAAE,CAE3E,CAAC,eACNb,KAAA,CAAAsB,aAAA,2BACItB,KAAA,CAAAsB,aAAA,CAACf,aAAa;IAACM,IAAI,EAAE,IAAK;IAACa,IAAI,eAAE1B,KAAA,CAAAsB,aAAA,CAACnB,WAAW,MAAE,CAAE;IAACwB,KAAK,EAAE;EAAY,CAAE,CACtE,CACJ,CACJ,CAAC;AAEd,CAAC;AAED,SAASP,iBAAiB","ignoreList":[]}

package/components/IconPicker/components/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./IconPickerCell.js";
+export * from "./IconPickerContent.js";
+export * from "./IconPickerRow.js";
+export * from "./IconPickerTrigger.js";

package/components/IconPicker/components/index.js

@@ -0,0 +1,6 @@
+export * from "./IconPickerCell.js";
+export * from "./IconPickerContent.js";
+export * from "./IconPickerRow.js";
+export * from "./IconPickerTrigger.js";
+
+//# sourceMappingURL=index.js.map

package/components/IconPicker/components/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./IconPickerCell.js\";\nexport * from \"./IconPickerContent.js\";\nexport * from \"./IconPickerRow.js\";\nexport * from \"./IconPickerTrigger.js\";\n"],"mappings":"AAAA;AACA;AACA;AACA","ignoreList":[]}

package/components/IconPicker/config/Emojis.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const Emojis: () => React.JSX.Element;

package/components/IconPicker/config/Emojis.js

@@ -0,0 +1,24 @@
+import React from "react";
+import { IconPickerConfig } from "./index.js";
+export const Emojis = () => {
+  return /*#__PURE__*/React.createElement(IconPickerConfig, null, /*#__PURE__*/React.createElement(IconPickerConfig.IconPack, {
+    name: "default_emojis",
+    provider: async () => {
+      const emojisJson = await import(/* webpackChunkName: "iconpicker-emojis" */
+      "unicode-emoji-json/data-by-emoji.json");
+      const emojis = emojisJson.default;
+      return Object.keys(emojis).map(key => {
+        const emoji = emojis[key];
+        return {
+          type: "emoji",
+          name: emoji.slug,
+          value: key,
+          category: emoji.group,
+          skinToneSupport: emoji.skin_tone_support
+        };
+      });
+    }
+  }));
+};
+
+//# sourceMappingURL=Emojis.js.map

package/components/IconPicker/config/Emojis.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","IconPickerConfig","Emojis","createElement","IconPack","name","provider","emojisJson","emojis","default","Object","keys","map","key","emoji","type","slug","value","category","group","skinToneSupport","skin_tone_support"],"sources":["Emojis.tsx"],"sourcesContent":["import React from \"react\";\nimport { IconPickerConfig } from \"./index.js\";\n\ntype EmojiSet = {\n    [key: string]: {\n        name: string;\n        slug: string;\n        group: string;\n        emoji_version: string;\n        unicode_version: string;\n        skin_tone_support: boolean;\n    };\n};\n\nexport const Emojis = () => {\n    return (\n        <IconPickerConfig>\n            <IconPickerConfig.IconPack\n                name=\"default_emojis\"\n                provider={async () => {\n                    const emojisJson = await import(\n                        /* webpackChunkName: \"iconpicker-emojis\" */\n                        \"unicode-emoji-json/data-by-emoji.json\"\n                    );\n\n                    const emojis: EmojiSet = emojisJson.default;\n\n                    return Object.keys(emojis).map(key => {\n                        const emoji = emojis[key];\n                        return {\n                            type: \"emoji\",\n                            name: emoji.slug,\n                            value: key,\n                            category: emoji.group,\n                            skinToneSupport: emoji.skin_tone_support\n                        };\n                    });\n                }}\n            />\n        </IconPickerConfig>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,gBAAgB;AAazB,OAAO,MAAMC,MAAM,GAAGA,CAAA,KAAM;EACxB,oBACIF,KAAA,CAAAG,aAAA,CAACF,gBAAgB,qBACbD,KAAA,CAAAG,aAAA,CAACF,gBAAgB,CAACG,QAAQ;IACtBC,IAAI,EAAC,gBAAgB;IACrBC,QAAQ,EAAE,MAAAA,CAAA,KAAY;MAClB,MAAMC,UAAU,GAAG,MAAM,MAAM,CAC3B;MACA,uCACJ,CAAC;MAED,MAAMC,MAAgB,GAAGD,UAAU,CAACE,OAAO;MAE3C,OAAOC,MAAM,CAACC,IAAI,CAACH,MAAM,CAAC,CAACI,GAAG,CAACC,GAAG,IAAI;QAClC,MAAMC,KAAK,GAAGN,MAAM,CAACK,GAAG,CAAC;QACzB,OAAO;UACHE,IAAI,EAAE,OAAO;UACbV,IAAI,EAAES,KAAK,CAACE,IAAI;UAChBC,KAAK,EAAEJ,GAAG;UACVK,QAAQ,EAAEJ,KAAK,CAACK,KAAK;UACrBC,eAAe,EAAEN,KAAK,CAACO;QAC3B,CAAC;MACL,CAAC,CAAC;IACN;EAAE,CACL,CACa,CAAC;AAE3B,CAAC","ignoreList":[]}

package/components/IconPicker/config/FontAwesomeIcons.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const FontAwesomeIcons: () => React.JSX.Element;

package/components/IconPicker/config/FontAwesomeIcons.js

@@ -0,0 +1,61 @@
+import React from "react";
+import { IconPickerConfig } from "./index.js";
+export const FontAwesomeIcons = () => {
+  return /*#__PURE__*/React.createElement(IconPickerConfig, null, /*#__PURE__*/React.createElement(IconPickerConfig.IconPack, {
+    name: "fa6_brands",
+    provider: async () => {
+      const fa6Brands = await import(/* webpackChunkName: "iconpicker-fa6-brands" */
+      "@iconify/json/json/fa6-brands.json");
+      const icons = fa6Brands.icons;
+      const categories = fa6Brands.categories;
+      return Object.keys(icons).map(key => {
+        const icon = icons[key];
+        return {
+          type: "icon",
+          name: `fa6_brands_${key}`,
+          value: icon.body,
+          category: Object.keys(categories).find(categoryKey => categories[categoryKey].includes(key)),
+          width: icon.width
+        };
+      });
+    }
+  }), /*#__PURE__*/React.createElement(IconPickerConfig.IconPack, {
+    name: "fa6_regular",
+    provider: async () => {
+      const fa6Regular = await import(/* webpackChunkName: "iconpicker-fa6-regular" */
+      "@iconify/json/json/fa6-regular.json");
+      const icons = fa6Regular.icons;
+      const categories = fa6Regular.categories;
+      return Object.keys(icons).map(key => {
+        const icon = icons[key];
+        return {
+          type: "icon",
+          name: `fa6_regular_${key}`,
+          value: icon.body,
+          category: Object.keys(categories).find(categoryKey => categories[categoryKey].includes(key)),
+          width: icon.width
+        };
+      });
+    }
+  }), /*#__PURE__*/React.createElement(IconPickerConfig.IconPack, {
+    name: "fa6_solid",
+    provider: async () => {
+      const fa6Solid = await import(/* webpackChunkName: "iconpicker-fa6-solid" */
+      "@iconify/json/json/fa6-solid.json");
+      const icons = fa6Solid.icons;
+      const categories = fa6Solid.categories;
+      return Object.keys(icons).map(key => {
+        const icon = icons[key];
+        return {
+          type: "icon",
+          name: `fa6_solid_${key}`,
+          value: icon.body,
+          category: Object.keys(categories).find(categoryKey => categories[categoryKey].includes(key)),
+          width: icon.width
+        };
+      });
+    }
+  }));
+};
+
+//# sourceMappingURL=FontAwesomeIcons.js.map

package/components/IconPicker/config/FontAwesomeIcons.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","IconPickerConfig","FontAwesomeIcons","createElement","IconPack","name","provider","fa6Brands","icons","categories","Object","keys","map","key","icon","type","value","body","category","find","categoryKey","includes","width","fa6Regular","fa6Solid"],"sources":["FontAwesomeIcons.tsx"],"sourcesContent":["import React from \"react\";\nimport { IconPickerConfig } from \"./index.js\";\n\ntype FaIconSet = {\n    [key: string]: {\n        body: string;\n        width?: number;\n    };\n};\n\ntype FaCategorySet = {\n    [key: string]: string[];\n};\n\nexport const FontAwesomeIcons = () => {\n    return (\n        <IconPickerConfig>\n            {/* Default Icons Providers */}\n            <IconPickerConfig.IconPack\n                name=\"fa6_brands\"\n                provider={async () => {\n                    const fa6Brands = await import(\n                        /* webpackChunkName: \"iconpicker-fa6-brands\" */\n                        \"@iconify/json/json/fa6-brands.json\"\n                    );\n\n                    const icons: FaIconSet = fa6Brands.icons;\n                    const categories: FaCategorySet = fa6Brands.categories;\n\n                    return Object.keys(icons).map(key => {\n                        const icon = icons[key];\n                        return {\n                            type: \"icon\",\n                            name: `fa6_brands_${key}`,\n                            value: icon.body,\n                            category: Object.keys(categories).find(categoryKey =>\n                                categories[categoryKey].includes(key)\n                            ),\n                            width: icon.width\n                        };\n                    });\n                }}\n            />\n            <IconPickerConfig.IconPack\n                name=\"fa6_regular\"\n                provider={async () => {\n                    const fa6Regular = await import(\n                        /* webpackChunkName: \"iconpicker-fa6-regular\" */\n                        \"@iconify/json/json/fa6-regular.json\"\n                    );\n\n                    const icons: FaIconSet = fa6Regular.icons;\n                    const categories: FaCategorySet = fa6Regular.categories;\n\n                    return Object.keys(icons).map(key => {\n                        const icon = icons[key];\n                        return {\n                            type: \"icon\",\n                            name: `fa6_regular_${key}`,\n                            value: icon.body,\n                            category: Object.keys(categories).find(categoryKey =>\n                                categories[categoryKey].includes(key)\n                            ),\n                            width: icon.width\n                        };\n                    });\n                }}\n            />\n            <IconPickerConfig.IconPack\n                name=\"fa6_solid\"\n                provider={async () => {\n                    const fa6Solid = await import(\n                        /* webpackChunkName: \"iconpicker-fa6-solid\" */\n                        \"@iconify/json/json/fa6-solid.json\"\n                    );\n\n                    const icons: FaIconSet = fa6Solid.icons;\n                    const categories: FaCategorySet = fa6Solid.categories;\n\n                    return Object.keys(icons).map(key => {\n                        const icon = icons[key];\n                        return {\n                            type: \"icon\",\n                            name: `fa6_solid_${key}`,\n                            value: icon.body,\n                            category: Object.keys(categories).find(categoryKey =>\n                                categories[categoryKey].includes(key)\n                            ),\n                            width: icon.width\n                        };\n                    });\n                }}\n            />\n        </IconPickerConfig>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,gBAAgB;AAazB,OAAO,MAAMC,gBAAgB,GAAGA,CAAA,KAAM;EAClC,oBACIF,KAAA,CAAAG,aAAA,CAACF,gBAAgB,qBAEbD,KAAA,CAAAG,aAAA,CAACF,gBAAgB,CAACG,QAAQ;IACtBC,IAAI,EAAC,YAAY;IACjBC,QAAQ,EAAE,MAAAA,CAAA,KAAY;MAClB,MAAMC,SAAS,GAAG,MAAM,MAAM,CAC1B;MACA,oCACJ,CAAC;MAED,MAAMC,KAAgB,GAAGD,SAAS,CAACC,KAAK;MACxC,MAAMC,UAAyB,GAAGF,SAAS,CAACE,UAAU;MAEtD,OAAOC,MAAM,CAACC,IAAI,CAACH,KAAK,CAAC,CAACI,GAAG,CAACC,GAAG,IAAI;QACjC,MAAMC,IAAI,GAAGN,KAAK,CAACK,GAAG,CAAC;QACvB,OAAO;UACHE,IAAI,EAAE,MAAM;UACZV,IAAI,EAAE,cAAcQ,GAAG,EAAE;UACzBG,KAAK,EAAEF,IAAI,CAACG,IAAI;UAChBC,QAAQ,EAAER,MAAM,CAACC,IAAI,CAACF,UAAU,CAAC,CAACU,IAAI,CAACC,WAAW,IAC9CX,UAAU,CAACW,WAAW,CAAC,CAACC,QAAQ,CAACR,GAAG,CACxC,CAAC;UACDS,KAAK,EAAER,IAAI,CAACQ;QAChB,CAAC;MACL,CAAC,CAAC;IACN;EAAE,CACL,CAAC,eACFtB,KAAA,CAAAG,aAAA,CAACF,gBAAgB,CAACG,QAAQ;IACtBC,IAAI,EAAC,aAAa;IAClBC,QAAQ,EAAE,MAAAA,CAAA,KAAY;MAClB,MAAMiB,UAAU,GAAG,MAAM,MAAM,CAC3B;MACA,qCACJ,CAAC;MAED,MAAMf,KAAgB,GAAGe,UAAU,CAACf,KAAK;MACzC,MAAMC,UAAyB,GAAGc,UAAU,CAACd,UAAU;MAEvD,OAAOC,MAAM,CAACC,IAAI,CAACH,KAAK,CAAC,CAACI,GAAG,CAACC,GAAG,IAAI;QACjC,MAAMC,IAAI,GAAGN,KAAK,CAACK,GAAG,CAAC;QACvB,OAAO;UACHE,IAAI,EAAE,MAAM;UACZV,IAAI,EAAE,eAAeQ,GAAG,EAAE;UAC1BG,KAAK,EAAEF,IAAI,CAACG,IAAI;UAChBC,QAAQ,EAAER,MAAM,CAACC,IAAI,CAACF,UAAU,CAAC,CAACU,IAAI,CAACC,WAAW,IAC9CX,UAAU,CAACW,WAAW,CAAC,CAACC,QAAQ,CAACR,GAAG,CACxC,CAAC;UACDS,KAAK,EAAER,IAAI,CAACQ;QAChB,CAAC;MACL,CAAC,CAAC;IACN;EAAE,CACL,CAAC,eACFtB,KAAA,CAAAG,aAAA,CAACF,gBAAgB,CAACG,QAAQ;IACtBC,IAAI,EAAC,WAAW;IAChBC,QAAQ,EAAE,MAAAA,CAAA,KAAY;MAClB,MAAMkB,QAAQ,GAAG,MAAM,MAAM,CACzB;MACA,mCACJ,CAAC;MAED,MAAMhB,KAAgB,GAAGgB,QAAQ,CAAChB,KAAK;MACvC,MAAMC,UAAyB,GAAGe,QAAQ,CAACf,UAAU;MAErD,OAAOC,MAAM,CAACC,IAAI,CAACH,KAAK,CAAC,CAACI,GAAG,CAACC,GAAG,IAAI;QACjC,MAAMC,IAAI,GAAGN,KAAK,CAACK,GAAG,CAAC;QACvB,OAAO;UACHE,IAAI,EAAE,MAAM;UACZV,IAAI,EAAE,aAAaQ,GAAG,EAAE;UACxBG,KAAK,EAAEF,IAAI,CAACG,IAAI;UAChBC,QAAQ,EAAER,MAAM,CAACC,IAAI,CAACF,UAAU,CAAC,CAACU,IAAI,CAACC,WAAW,IAC9CX,UAAU,CAACW,WAAW,CAAC,CAACC,QAAQ,CAACR,GAAG,CACxC,CAAC;UACDS,KAAK,EAAER,IAAI,CAACQ;QAChB,CAAC;MACL,CAAC,CAAC;IACN;EAAE,CACL,CACa,CAAC;AAE3B,CAAC","ignoreList":[]}

package/components/IconPicker/config/IconPackProvider.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import type { Icon } from "../../../components/IconPicker/types.js";
+export type IconPackProviderProps = {
+    name: string;
+    provider: () => Promise<Icon[]> | Icon[];
+};
+export declare const IconPackProvider: ({ name, provider }: IconPackProviderProps) => React.JSX.Element;