@webiny/admin-ui 0.0.0-unstable.e53eceafb5

package/IconPicker/domains/IconPickerIconFormatter.js

@@ -0,0 +1,13 @@
+export class IconPickerIconFormatter {
+  static formatFontAwesome(icon) {
+    return {
+      prefix: icon.prefix,
+      name: icon.name
+    };
+  }
+  static formatStringValue(icon) {
+    return `${icon.prefix}/${icon.name}`;
+  }
+}
+
+//# sourceMappingURL=IconPickerIconFormatter.js.map

package/IconPicker/domains/IconPickerIconFormatter.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["IconPickerIconFormatter","formatFontAwesome","icon","prefix","name","formatStringValue"],"sources":["IconPickerIconFormatter.tsx"],"sourcesContent":["import type { IconPickerIcon } from \"./IconPickerIcon\";\nimport type { IconName, IconPrefix } from \"@fortawesome/fontawesome-svg-core\";\nimport type { IconPickerFontAwesome } from \"./IconPickerFontAwesome\";\n\nexport class IconPickerIconFormatter {\n    static formatFontAwesome(icon: IconPickerIcon): IconPickerFontAwesome {\n        return {\n            prefix: icon.prefix as IconPrefix,\n            name: icon.name as IconName\n        };\n    }\n\n    static formatStringValue(icon: IconPickerIcon | IconPickerFontAwesome) {\n        return `${icon.prefix}/${icon.name}`;\n    }\n}\n"],"mappings":"AAIA,OAAO,MAAMA,uBAAuB,CAAC;EACjC,OAAOC,iBAAiBA,CAACC,IAAoB,EAAyB;IAClE,OAAO;MACHC,MAAM,EAAED,IAAI,CAACC,MAAoB;MACjCC,IAAI,EAAEF,IAAI,CAACE;IACf,CAAC;EACL;EAEA,OAAOC,iBAAiBA,CAACH,IAA4C,EAAE;IACnE,OAAO,GAAGA,IAAI,CAACC,MAAM,IAAID,IAAI,CAACE,IAAI,EAAE;EACxC;AACJ","ignoreList":[]}

package/IconPicker/domains/ListCache.d.ts

@@ -0,0 +1,29 @@
+export type Constructor<T> = new (...args: any[]) => T;
+export interface IListCachePredicate<T> {
+    (item: T): boolean;
+}
+export interface IListCacheItemUpdater<T> {
+    (item: T): T;
+}
+export interface IListCache<T> {
+    count(): number;
+    clear(): void;
+    hasItems(): boolean;
+    getItems(predicate?: IListCachePredicate<T>): T[];
+    getItem(predicate: IListCachePredicate<T>): T | undefined;
+    addItems(items: T[]): void;
+    updateItems(updater: IListCacheItemUpdater<T>): void;
+    removeItems(predicate: IListCachePredicate<T>): void;
+}
+export declare class ListCache<T> implements IListCache<T> {
+    private state;
+    constructor();
+    count(): number;
+    clear(): void;
+    hasItems(): boolean;
+    getItems(predicate?: IListCachePredicate<T>): T[];
+    getItem(predicate: IListCachePredicate<T>): T | undefined;
+    addItems(items: T[]): void;
+    updateItems(updater: IListCacheItemUpdater<T>): void;
+    removeItems(predicate: IListCachePredicate<T>): void;
+}

package/IconPicker/domains/ListCache.js

@@ -0,0 +1,45 @@
+import { makeAutoObservable, runInAction, toJS } from "mobx";
+export class ListCache {
+  constructor() {
+    this.state = [];
+    makeAutoObservable(this);
+  }
+  count() {
+    return this.state.length;
+  }
+  clear() {
+    runInAction(() => {
+      this.state = [];
+    });
+  }
+  hasItems() {
+    return this.state.length > 0;
+  }
+  getItems(predicate) {
+    if (predicate) {
+      return [...this.state.filter(item => predicate(item)).map(item => toJS(item))];
+    }
+    return [...this.state.map(item => toJS(item))];
+  }
+  getItem(predicate) {
+    const item = this.state.find(item => predicate(item));
+    return item ? toJS(item) : undefined;
+  }
+  addItems(items) {
+    runInAction(() => {
+      this.state = [...this.state, ...items];
+    });
+  }
+  updateItems(updater) {
+    runInAction(() => {
+      this.state = [...this.state.map(item => updater(item))];
+    });
+  }
+  removeItems(predicate) {
+    runInAction(() => {
+      this.state = this.state.filter(item => !predicate(item));
+    });
+  }
+}
+
+//# sourceMappingURL=ListCache.js.map

package/IconPicker/domains/ListCache.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["makeAutoObservable","runInAction","toJS","ListCache","constructor","state","count","length","clear","hasItems","getItems","predicate","filter","item","map","getItem","find","undefined","addItems","items","updateItems","updater","removeItems"],"sources":["ListCache.ts"],"sourcesContent":["import { makeAutoObservable, runInAction, toJS } from \"mobx\";\n\nexport type Constructor<T> = new (...args: any[]) => T;\n\nexport interface IListCachePredicate<T> {\n    (item: T): boolean;\n}\n\nexport interface IListCacheItemUpdater<T> {\n    (item: T): T;\n}\n\nexport interface IListCache<T> {\n    count(): number;\n    clear(): void;\n    hasItems(): boolean;\n    getItems(predicate?: IListCachePredicate<T>): T[];\n    getItem(predicate: IListCachePredicate<T>): T | undefined;\n    addItems(items: T[]): void;\n    updateItems(updater: IListCacheItemUpdater<T>): void;\n    removeItems(predicate: IListCachePredicate<T>): void;\n}\n\nexport class ListCache<T> implements IListCache<T> {\n    private state: T[];\n\n    constructor() {\n        this.state = [];\n\n        makeAutoObservable(this);\n    }\n\n    count() {\n        return this.state.length;\n    }\n\n    clear() {\n        runInAction(() => {\n            this.state = [];\n        });\n    }\n\n    hasItems() {\n        return this.state.length > 0;\n    }\n\n    getItems(predicate?: IListCachePredicate<T>): T[] {\n        if (predicate) {\n            return [...this.state.filter(item => predicate(item)).map(item => toJS(item))];\n        }\n\n        return [...this.state.map(item => toJS(item))];\n    }\n\n    getItem(predicate: IListCachePredicate<T>): T | undefined {\n        const item = this.state.find(item => predicate(item));\n\n        return item ? toJS(item) : undefined;\n    }\n\n    addItems(items: T[]) {\n        runInAction(() => {\n            this.state = [...this.state, ...items];\n        });\n    }\n\n    updateItems(updater: IListCacheItemUpdater<T>) {\n        runInAction(() => {\n            this.state = [...this.state.map(item => updater(item))];\n        });\n    }\n\n    removeItems(predicate: IListCachePredicate<T>) {\n        runInAction(() => {\n            this.state = this.state.filter(item => !predicate(item));\n        });\n    }\n}\n"],"mappings":"AAAA,SAASA,kBAAkB,EAAEC,WAAW,EAAEC,IAAI,QAAQ,MAAM;AAuB5D,OAAO,MAAMC,SAAS,CAA6B;EAG/CC,WAAWA,CAAA,EAAG;IACV,IAAI,CAACC,KAAK,GAAG,EAAE;IAEfL,kBAAkB,CAAC,IAAI,CAAC;EAC5B;EAEAM,KAAKA,CAAA,EAAG;IACJ,OAAO,IAAI,CAACD,KAAK,CAACE,MAAM;EAC5B;EAEAC,KAAKA,CAAA,EAAG;IACJP,WAAW,CAAC,MAAM;MACd,IAAI,CAACI,KAAK,GAAG,EAAE;IACnB,CAAC,CAAC;EACN;EAEAI,QAAQA,CAAA,EAAG;IACP,OAAO,IAAI,CAACJ,KAAK,CAACE,MAAM,GAAG,CAAC;EAChC;EAEAG,QAAQA,CAACC,SAAkC,EAAO;IAC9C,IAAIA,SAAS,EAAE;MACX,OAAO,CAAC,GAAG,IAAI,CAACN,KAAK,CAACO,MAAM,CAACC,IAAI,IAAIF,SAAS,CAACE,IAAI,CAAC,CAAC,CAACC,GAAG,CAACD,IAAI,IAAIX,IAAI,CAACW,IAAI,CAAC,CAAC,CAAC;IAClF;IAEA,OAAO,CAAC,GAAG,IAAI,CAACR,KAAK,CAACS,GAAG,CAACD,IAAI,IAAIX,IAAI,CAACW,IAAI,CAAC,CAAC,CAAC;EAClD;EAEAE,OAAOA,CAACJ,SAAiC,EAAiB;IACtD,MAAME,IAAI,GAAG,IAAI,CAACR,KAAK,CAACW,IAAI,CAACH,IAAI,IAAIF,SAAS,CAACE,IAAI,CAAC,CAAC;IAErD,OAAOA,IAAI,GAAGX,IAAI,CAACW,IAAI,CAAC,GAAGI,SAAS;EACxC;EAEAC,QAAQA,CAACC,KAAU,EAAE;IACjBlB,WAAW,CAAC,MAAM;MACd,IAAI,CAACI,KAAK,GAAG,CAAC,GAAG,IAAI,CAACA,KAAK,EAAE,GAAGc,KAAK,CAAC;IAC1C,CAAC,CAAC;EACN;EAEAC,WAAWA,CAACC,OAAiC,EAAE;IAC3CpB,WAAW,CAAC,MAAM;MACd,IAAI,CAACI,KAAK,GAAG,CAAC,GAAG,IAAI,CAACA,KAAK,CAACS,GAAG,CAACD,IAAI,IAAIQ,OAAO,CAACR,IAAI,CAAC,CAAC,CAAC;IAC3D,CAAC,CAAC;EACN;EAEAS,WAAWA,CAACX,SAAiC,EAAE;IAC3CV,WAAW,CAAC,MAAM;MACd,IAAI,CAACI,KAAK,GAAG,IAAI,CAACA,KAAK,CAACO,MAAM,CAACC,IAAI,IAAI,CAACF,SAAS,CAACE,IAAI,CAAC,CAAC;IAC5D,CAAC,CAAC;EACN;AACJ","ignoreList":[]}

package/IconPicker/domains/index.d.ts

@@ -0,0 +1,5 @@
+export * from "./IconPickerIcon";
+export * from "./IconPickerIconDto";
+export * from "./IconPickerFontAwesome";
+export * from "./IconPickerIconFormatter";
+export * from "./ListCache";

package/IconPicker/domains/index.js

@@ -0,0 +1,7 @@
+export * from "./IconPickerIcon";
+export * from "./IconPickerIconDto";
+export * from "./IconPickerFontAwesome";
+export * from "./IconPickerIconFormatter";
+export * from "./ListCache";
+
+//# sourceMappingURL=index.js.map

package/IconPicker/domains/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./IconPickerIcon\";\nexport * from \"./IconPickerIconDto\";\nexport * from \"./IconPickerFontAwesome\";\nexport * from \"./IconPickerIconFormatter\";\nexport * from \"./ListCache\";\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA","ignoreList":[]}

package/IconPicker/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./IconPicker";
+export type { IconPickerIconDto } from "./domains";

package/IconPicker/index.js

@@ -0,0 +1,4 @@
+export * from "./IconPicker";
+export {};
+
+//# sourceMappingURL=index.js.map

package/IconPicker/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./IconPicker\";\nexport type { IconPickerIconDto } from \"./domains\";\n"],"mappings":"AAAA;AAA6B","ignoreList":[]}

package/IconPicker/primitives/IconPickerPrimitive.d.ts

@@ -0,0 +1,38 @@
+import React from "react";
+import type { InputPrimitiveProps } from "../../Input";
+import { type VariantProps } from "../../utils";
+import type { IconPickerIconDto } from "../domains";
+declare const iconPickerVariants: (props?: ({
+    size?: "md" | "lg" | "xl" | null | undefined;
+    disabled?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+interface IconPickerPrimitiveProps extends VariantProps<typeof iconPickerVariants> {
+    /**
+     * Indicates if the field is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Callback triggered when the value changes.
+     */
+    onChange?: (value: string) => void;
+    /**
+     * List of icons to be displayed in the icon picker.
+     */
+    icons: IconPickerIconDto[];
+    /**
+     * Indicates if the input field is invalid.
+     * Refer to `InputPrimitiveProps["invalid"]` for possible values.
+     */
+    invalid?: InputPrimitiveProps["invalid"];
+    /**
+     * Optional selected icon.
+     */
+    value?: string;
+    /**
+     * Variant of the input field.
+     * Refer to `InputPrimitiveProps["variant"]` for possible values.
+     */
+    variant?: InputPrimitiveProps["variant"];
+}
+declare const IconPickerPrimitive: (props: IconPickerPrimitiveProps) => React.JSX.Element;
+export { IconPickerPrimitive, type IconPickerPrimitiveProps };

package/IconPicker/primitives/IconPickerPrimitive.js

@@ -0,0 +1,71 @@
+import React, { useEffect, useRef } from "react";
+import { inputVariants } from "../../Input";
+import { PopoverPrimitive } from "../../Popover";
+import { cn, cva } from "../../utils";
+import { IconPickerGrid, IconPickerInput, IconPickerTrigger } from "./components";
+import { useIconPicker } from "./useIconPicker";
+const iconPickerVariants = cva("wby-cursor-pointer wby-text-neutral-strong", {
+  variants: {
+    size: {
+      md: "wby-w-16",
+      lg: "wby-w-16",
+      xl: "wby-w-20"
+    },
+    disabled: {
+      true: "wby-pointer-events-none"
+    }
+  },
+  defaultVariants: {
+    size: "lg"
+  }
+});
+const IconPickerPrimitive = props => {
+  const {
+    vm,
+    setListOpenState,
+    searchIcon,
+    setSelectedIcon
+  } = useIconPicker(props);
+  const inputRef = useRef(null);
+  useEffect(() => {
+    setTimeout(() => {
+      if (vm.open && inputRef.current) {
+        inputRef.current.focus();
+      }
+    }, 50);
+  }, [vm.open]);
+  return /*#__PURE__*/React.createElement(PopoverPrimitive, {
+    open: vm.open,
+    onOpenChange: setListOpenState
+  }, /*#__PURE__*/React.createElement(PopoverPrimitive.Trigger, {
+    asChild: true
+  }, /*#__PURE__*/React.createElement("button", {
+    "data-disabled": props.disabled,
+    className: cn(inputVariants({
+      size: props.size,
+      variant: props.variant,
+      invalid: props.invalid
+    }), iconPickerVariants({
+      size: props.size,
+      disabled: props.disabled
+    }))
+  }, /*#__PURE__*/React.createElement(IconPickerTrigger, {
+    value: props.value,
+    size: props.size
+  }))), /*#__PURE__*/React.createElement(PopoverPrimitive.Content, {
+    align: "start",
+    className: "wby-min-w-96",
+    onWheel: e => e.stopPropagation() // Wheel event should not propagate to the parent: this fixes scrolling issues when the IconPicker is placed inside a Dialog.
+  }, /*#__PURE__*/React.createElement(IconPickerInput, {
+    value: vm.searchQuery,
+    onChange: searchIcon,
+    inputRef: inputRef
+  }), /*#__PURE__*/React.createElement(IconPickerGrid, {
+    icons: vm.icons,
+    iconsLength: vm.iconsLength,
+    onIconSelect: setSelectedIcon
+  })));
+};
+export { IconPickerPrimitive };
+
+//# sourceMappingURL=IconPickerPrimitive.js.map

package/IconPicker/primitives/IconPickerPrimitive.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useEffect","useRef","inputVariants","PopoverPrimitive","cn","cva","IconPickerGrid","IconPickerInput","IconPickerTrigger","useIconPicker","iconPickerVariants","variants","size","md","lg","xl","disabled","true","defaultVariants","IconPickerPrimitive","props","vm","setListOpenState","searchIcon","setSelectedIcon","inputRef","setTimeout","open","current","focus","createElement","onOpenChange","Trigger","asChild","className","variant","invalid","value","Content","align","onWheel","e","stopPropagation","searchQuery","onChange","icons","iconsLength","onIconSelect"],"sources":["IconPickerPrimitive.tsx"],"sourcesContent":["import React, { useEffect, useRef } from \"react\";\nimport type { InputPrimitiveProps } from \"~/Input\";\nimport { inputVariants } from \"~/Input\";\nimport { PopoverPrimitive } from \"~/Popover\";\nimport { cn, cva, type VariantProps } from \"~/utils\";\nimport { IconPickerGrid, IconPickerInput, IconPickerTrigger } from \"./components\";\nimport type { IconPickerIconDto } from \"../domains\";\nimport { useIconPicker } from \"./useIconPicker\";\n\nconst iconPickerVariants = cva(\"wby-cursor-pointer wby-text-neutral-strong\", {\n    variants: {\n        size: {\n            md: \"wby-w-16\",\n            lg: \"wby-w-16\",\n            xl: \"wby-w-20\"\n        },\n        disabled: {\n            true: \"wby-pointer-events-none\"\n        }\n    },\n    defaultVariants: {\n        size: \"lg\"\n    }\n});\n\ninterface IconPickerPrimitiveProps extends VariantProps<typeof iconPickerVariants> {\n    /**\n     * Indicates if the field is disabled.\n     */\n    disabled?: boolean;\n    /**\n     * Callback triggered when the value changes.\n     */\n    onChange?: (value: string) => void;\n    /**\n     * List of icons to be displayed in the icon picker.\n     */\n    icons: IconPickerIconDto[];\n    /**\n     * Indicates if the input field is invalid.\n     * Refer to `InputPrimitiveProps[\"invalid\"]` for possible values.\n     */\n    invalid?: InputPrimitiveProps[\"invalid\"];\n    /**\n     * Optional selected icon.\n     */\n    value?: string;\n    /**\n     * Variant of the input field.\n     * Refer to `InputPrimitiveProps[\"variant\"]` for possible values.\n     */\n    variant?: InputPrimitiveProps[\"variant\"];\n}\n\nconst IconPickerPrimitive = (props: IconPickerPrimitiveProps) => {\n    const { vm, setListOpenState, searchIcon, setSelectedIcon } = useIconPicker(props);\n    const inputRef = useRef<HTMLInputElement>(null);\n\n    useEffect(() => {\n        setTimeout(() => {\n            if (vm.open && inputRef.current) {\n                inputRef.current.focus();\n            }\n        }, 50);\n    }, [vm.open]);\n\n    return (\n        <PopoverPrimitive open={vm.open} onOpenChange={setListOpenState}>\n            <PopoverPrimitive.Trigger asChild>\n                <button\n                    data-disabled={props.disabled}\n                    className={cn(\n                        inputVariants({\n                            size: props.size,\n                            variant: props.variant,\n                            invalid: props.invalid\n                        }),\n                        iconPickerVariants({ size: props.size, disabled: props.disabled })\n                    )}\n                >\n                    <IconPickerTrigger value={props.value} size={props.size} />\n                </button>\n            </PopoverPrimitive.Trigger>\n            <PopoverPrimitive.Content\n                align={\"start\"}\n                className={\"wby-min-w-96\"}\n                onWheel={e => e.stopPropagation()} // Wheel event should not propagate to the parent: this fixes scrolling issues when the IconPicker is placed inside a Dialog.\n            >\n                <IconPickerInput value={vm.searchQuery} onChange={searchIcon} inputRef={inputRef} />\n                <IconPickerGrid\n                    icons={vm.icons}\n                    iconsLength={vm.iconsLength}\n                    onIconSelect={setSelectedIcon}\n                />\n            </PopoverPrimitive.Content>\n        </PopoverPrimitive>\n    );\n};\n\nexport { IconPickerPrimitive, type IconPickerPrimitiveProps };\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,SAAS,EAAEC,MAAM,QAAQ,OAAO;AAEhD,SAASC,aAAa;AACtB,SAASC,gBAAgB;AACzB,SAASC,EAAE,EAAEC,GAAG;AAChB,SAASC,cAAc,EAAEC,eAAe,EAAEC,iBAAiB;AAE3D,SAASC,aAAa;AAEtB,MAAMC,kBAAkB,GAAGL,GAAG,CAAC,4CAA4C,EAAE;EACzEM,QAAQ,EAAE;IACNC,IAAI,EAAE;MACFC,EAAE,EAAE,UAAU;MACdC,EAAE,EAAE,UAAU;MACdC,EAAE,EAAE;IACR,CAAC;IACDC,QAAQ,EAAE;MACNC,IAAI,EAAE;IACV;EACJ,CAAC;EACDC,eAAe,EAAE;IACbN,IAAI,EAAE;EACV;AACJ,CAAC,CAAC;AA+BF,MAAMO,mBAAmB,GAAIC,KAA+B,IAAK;EAC7D,MAAM;IAAEC,EAAE;IAAEC,gBAAgB;IAAEC,UAAU;IAAEC;EAAgB,CAAC,GAAGf,aAAa,CAACW,KAAK,CAAC;EAClF,MAAMK,QAAQ,GAAGxB,MAAM,CAAmB,IAAI,CAAC;EAE/CD,SAAS,CAAC,MAAM;IACZ0B,UAAU,CAAC,MAAM;MACb,IAAIL,EAAE,CAACM,IAAI,IAAIF,QAAQ,CAACG,OAAO,EAAE;QAC7BH,QAAQ,CAACG,OAAO,CAACC,KAAK,CAAC,CAAC;MAC5B;IACJ,CAAC,EAAE,EAAE,CAAC;EACV,CAAC,EAAE,CAACR,EAAE,CAACM,IAAI,CAAC,CAAC;EAEb,oBACI5B,KAAA,CAAA+B,aAAA,CAAC3B,gBAAgB;IAACwB,IAAI,EAAEN,EAAE,CAACM,IAAK;IAACI,YAAY,EAAET;EAAiB,gBAC5DvB,KAAA,CAAA+B,aAAA,CAAC3B,gBAAgB,CAAC6B,OAAO;IAACC,OAAO;EAAA,gBAC7BlC,KAAA,CAAA+B,aAAA;IACI,iBAAeV,KAAK,CAACJ,QAAS;IAC9BkB,SAAS,EAAE9B,EAAE,CACTF,aAAa,CAAC;MACVU,IAAI,EAAEQ,KAAK,CAACR,IAAI;MAChBuB,OAAO,EAAEf,KAAK,CAACe,OAAO;MACtBC,OAAO,EAAEhB,KAAK,CAACgB;IACnB,CAAC,CAAC,EACF1B,kBAAkB,CAAC;MAAEE,IAAI,EAAEQ,KAAK,CAACR,IAAI;MAAEI,QAAQ,EAAEI,KAAK,CAACJ;IAAS,CAAC,CACrE;EAAE,gBAEFjB,KAAA,CAAA+B,aAAA,CAACtB,iBAAiB;IAAC6B,KAAK,EAAEjB,KAAK,CAACiB,KAAM;IAACzB,IAAI,EAAEQ,KAAK,CAACR;EAAK,CAAE,CACtD,CACc,CAAC,eAC3Bb,KAAA,CAAA+B,aAAA,CAAC3B,gBAAgB,CAACmC,OAAO;IACrBC,KAAK,EAAE,OAAQ;IACfL,SAAS,EAAE,cAAe;IAC1BM,OAAO,EAAEC,CAAC,IAAIA,CAAC,CAACC,eAAe,CAAC,CAAE,CAAC;EAAA,gBAEnC3C,KAAA,CAAA+B,aAAA,CAACvB,eAAe;IAAC8B,KAAK,EAAEhB,EAAE,CAACsB,WAAY;IAACC,QAAQ,EAAErB,UAAW;IAACE,QAAQ,EAAEA;EAAS,CAAE,CAAC,eACpF1B,KAAA,CAAA+B,aAAA,CAACxB,cAAc;IACXuC,KAAK,EAAExB,EAAE,CAACwB,KAAM;IAChBC,WAAW,EAAEzB,EAAE,CAACyB,WAAY;IAC5BC,YAAY,EAAEvB;EAAgB,CACjC,CACqB,CACZ,CAAC;AAE3B,CAAC;AAED,SAASL,mBAAmB","ignoreList":[]}

package/IconPicker/primitives/IconPickerPrimitive.stories.d.ts

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { IconPickerPrimitive } from "./IconPickerPrimitive";
+declare const meta: Meta<typeof IconPickerPrimitive>;
+export default meta;
+type Story = StoryObj<typeof IconPickerPrimitive>;
+export declare const Default: Story;
+export declare const WithDefaultValue: Story;
+export declare const MediumSize: Story;
+export declare const LargeSize: Story;
+export declare const ExtraLargeSize: Story;
+export declare const PrimaryVariant: Story;
+export declare const PrimaryVariantDisabled: Story;
+export declare const PrimaryVariantInvalid: Story;
+export declare const SecondaryVariant: Story;
+export declare const SecondaryVariantDisabled: Story;
+export declare const SecondaryVariantInvalid: Story;
+export declare const GhostVariant: Story;
+export declare const GhostVariantDisabled: Story;
+export declare const GhostVariantInvalid: Story;

package/IconPicker/primitives/IconPickerPrimitive.stories.js

@@ -0,0 +1,266 @@
+import React, { useState } from "react";
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { fas } from "@fortawesome/free-solid-svg-icons";
+import { IconPickerPrimitive } from "./IconPickerPrimitive";
+const meta = {
+  title: "Components/Form Primitives/IconPicker",
+  component: IconPickerPrimitive,
+  argTypes: {
+    onChange: {
+      action: "onChange"
+    }
+  },
+  render: args => {
+    const [value, setValue] = useState(args.value);
+    return /*#__PURE__*/React.createElement("div", {
+      className: "wby-w-full"
+    }, /*#__PURE__*/React.createElement(IconPickerPrimitive, Object.assign({}, args, {
+      value: value,
+      onChange: setValue
+    })), /*#__PURE__*/React.createElement("div", {
+      className: "wby-mt-4 wby-text-center"
+    }, "Current selected value: ", /*#__PURE__*/React.createElement("pre", null, value)));
+  },
+  parameters: {
+    layout: "padded"
+  }
+};
+
+// @ts-expect-error
+library.add(fas);
+export default meta;
+export const Default = {
+  args: {
+    icons: [{
+      prefix: "fas",
+      name: "trash-restore-alt"
+    }, {
+      prefix: "fas",
+      name: "trash-can-arrow-up"
+    }, {
+      prefix: "fas",
+      name: "naira-sign"
+    }, {
+      prefix: "fas",
+      name: "cart-arrow-down"
+    }, {
+      prefix: "fas",
+      name: "walkie-talkie"
+    }, {
+      prefix: "fas",
+      name: "file-edit"
+    }, {
+      prefix: "fas",
+      name: "file-pen"
+    }, {
+      prefix: "fas",
+      name: "receipt"
+    }, {
+      prefix: "fas",
+      name: "pen-square"
+    }, {
+      prefix: "fas",
+      name: "pencil-square"
+    }, {
+      prefix: "fas",
+      name: "square-pen"
+    }, {
+      prefix: "fas",
+      name: "suitcase-rolling"
+    }, {
+      prefix: "fas",
+      name: "person-circle-exclamation"
+    }, {
+      prefix: "fas",
+      name: "chevron-down"
+    }, {
+      prefix: "fas",
+      name: "battery"
+    }, {
+      prefix: "fas",
+      name: "battery-5"
+    }, {
+      prefix: "fas",
+      name: "battery-full"
+    }, {
+      prefix: "fas",
+      name: "skull-crossbones"
+    }, {
+      prefix: "fas",
+      name: "code-compare"
+    }, {
+      prefix: "fas",
+      name: "list-dots"
+    }, {
+      prefix: "fas",
+      name: "list-ul"
+    }, {
+      prefix: "fas",
+      name: "school-lock"
+    }, {
+      prefix: "fas",
+      name: "tower-cell"
+    }, {
+      prefix: "fas",
+      name: "long-arrow-alt-down"
+    }, {
+      prefix: "fas",
+      name: "down-long"
+    }, {
+      prefix: "fas",
+      name: "ranking-star"
+    }, {
+      prefix: "fas",
+      name: "chess-king"
+    }, {
+      prefix: "fas",
+      name: "person-harassing"
+    }, {
+      prefix: "fas",
+      name: "brazilian-real-sign"
+    }, {
+      prefix: "fas",
+      name: "landmark-alt"
+    }, {
+      prefix: "fas",
+      name: "landmark-dome"
+    }, {
+      prefix: "fas",
+      name: "arrow-up"
+    }, {
+      prefix: "fas",
+      name: "television"
+    }, {
+      prefix: "fas",
+      name: "tv-alt"
+    }, {
+      prefix: "fas",
+      name: "tv"
+    }, {
+      prefix: "fas",
+      name: "shrimp"
+    }, {
+      prefix: "fas",
+      name: "tasks"
+    }, {
+      prefix: "fas",
+      name: "list-check"
+    }, {
+      prefix: "fas",
+      name: "jug-detergent"
+    }, {
+      prefix: "fas",
+      name: "user-circle"
+    }, {
+      prefix: "fas",
+      name: "circle-user"
+    }, {
+      prefix: "fas",
+      name: "user-shield"
+    }, {
+      prefix: "fas",
+      name: "wind"
+    }, {
+      prefix: "fas",
+      name: "car-crash"
+    }, {
+      prefix: "fas",
+      name: "car-burst"
+    }, {
+      prefix: "fas",
+      name: "y"
+    }, {
+      prefix: "fas",
+      name: "snowboarding"
+    }, {
+      prefix: "fas",
+      name: "person-snowboarding"
+    }, {
+      prefix: "fas",
+      name: "shipping-fast"
+    }, {
+      prefix: "fas",
+      name: "truck-fast"
+    }]
+  }
+};
+export const WithDefaultValue = {
+  args: {
+    ...Default.args,
+    value: "fas/panorama"
+  }
+};
+export const MediumSize = {
+  args: {
+    ...Default.args,
+    size: "md"
+  }
+};
+export const LargeSize = {
+  args: {
+    ...Default.args,
+    size: "lg"
+  }
+};
+export const ExtraLargeSize = {
+  args: {
+    ...Default.args,
+    size: "xl"
+  }
+};
+export const PrimaryVariant = {
+  args: {
+    ...Default.args,
+    variant: "primary"
+  }
+};
+export const PrimaryVariantDisabled = {
+  args: {
+    ...PrimaryVariant.args,
+    disabled: true
+  }
+};
+export const PrimaryVariantInvalid = {
+  args: {
+    ...PrimaryVariant.args,
+    invalid: true
+  }
+};
+export const SecondaryVariant = {
+  args: {
+    ...Default.args,
+    variant: "secondary"
+  }
+};
+export const SecondaryVariantDisabled = {
+  args: {
+    ...SecondaryVariant.args,
+    disabled: true
+  }
+};
+export const SecondaryVariantInvalid = {
+  args: {
+    ...SecondaryVariant.args,
+    invalid: true
+  }
+};
+export const GhostVariant = {
+  args: {
+    ...Default.args,
+    variant: "ghost"
+  }
+};
+export const GhostVariantDisabled = {
+  args: {
+    ...GhostVariant.args,
+    disabled: true
+  }
+};
+export const GhostVariantInvalid = {
+  args: {
+    ...GhostVariant.args,
+    invalid: true
+  }
+};
+
+//# sourceMappingURL=IconPickerPrimitive.stories.js.map

package/IconPicker/primitives/IconPickerPrimitive.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useState","library","fas","IconPickerPrimitive","meta","title","component","argTypes","onChange","action","render","args","value","setValue","createElement","className","Object","assign","parameters","layout","add","Default","icons","prefix","name","WithDefaultValue","MediumSize","size","LargeSize","ExtraLargeSize","PrimaryVariant","variant","PrimaryVariantDisabled","disabled","PrimaryVariantInvalid","invalid","SecondaryVariant","SecondaryVariantDisabled","SecondaryVariantInvalid","GhostVariant","GhostVariantDisabled","GhostVariantInvalid"],"sources":["IconPickerPrimitive.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { library } from \"@fortawesome/fontawesome-svg-core\";\nimport { fas } from \"@fortawesome/free-solid-svg-icons\";\nimport { IconPickerPrimitive } from \"./IconPickerPrimitive\";\n\nconst meta: Meta<typeof IconPickerPrimitive> = {\n    title: \"Components/Form Primitives/IconPicker\",\n    component: IconPickerPrimitive,\n    argTypes: {\n        onChange: { action: \"onChange\" }\n    },\n    render: args => {\n        const [value, setValue] = useState(args.value);\n        return (\n            <div className={\"wby-w-full\"}>\n                <IconPickerPrimitive {...args} value={value} onChange={setValue} />\n                <div className={\"wby-mt-4 wby-text-center\"}>\n                    Current selected value: <pre>{value}</pre>\n                </div>\n            </div>\n        );\n    },\n    parameters: {\n        layout: \"padded\"\n    }\n};\n\n// @ts-expect-error\nlibrary.add(fas);\n\nexport default meta;\ntype Story = StoryObj<typeof IconPickerPrimitive>;\n\nexport const Default: Story = {\n    args: {\n        icons: [\n            { prefix: \"fas\", name: \"trash-restore-alt\" },\n            { prefix: \"fas\", name: \"trash-can-arrow-up\" },\n            { prefix: \"fas\", name: \"naira-sign\" },\n            { prefix: \"fas\", name: \"cart-arrow-down\" },\n            { prefix: \"fas\", name: \"walkie-talkie\" },\n            { prefix: \"fas\", name: \"file-edit\" },\n            { prefix: \"fas\", name: \"file-pen\" },\n            { prefix: \"fas\", name: \"receipt\" },\n            { prefix: \"fas\", name: \"pen-square\" },\n            { prefix: \"fas\", name: \"pencil-square\" },\n            { prefix: \"fas\", name: \"square-pen\" },\n            { prefix: \"fas\", name: \"suitcase-rolling\" },\n            { prefix: \"fas\", name: \"person-circle-exclamation\" },\n            { prefix: \"fas\", name: \"chevron-down\" },\n            { prefix: \"fas\", name: \"battery\" },\n            { prefix: \"fas\", name: \"battery-5\" },\n            { prefix: \"fas\", name: \"battery-full\" },\n            { prefix: \"fas\", name: \"skull-crossbones\" },\n            { prefix: \"fas\", name: \"code-compare\" },\n            { prefix: \"fas\", name: \"list-dots\" },\n            { prefix: \"fas\", name: \"list-ul\" },\n            { prefix: \"fas\", name: \"school-lock\" },\n            { prefix: \"fas\", name: \"tower-cell\" },\n            { prefix: \"fas\", name: \"long-arrow-alt-down\" },\n            { prefix: \"fas\", name: \"down-long\" },\n            { prefix: \"fas\", name: \"ranking-star\" },\n            { prefix: \"fas\", name: \"chess-king\" },\n            { prefix: \"fas\", name: \"person-harassing\" },\n            { prefix: \"fas\", name: \"brazilian-real-sign\" },\n            { prefix: \"fas\", name: \"landmark-alt\" },\n            { prefix: \"fas\", name: \"landmark-dome\" },\n            { prefix: \"fas\", name: \"arrow-up\" },\n            { prefix: \"fas\", name: \"television\" },\n            { prefix: \"fas\", name: \"tv-alt\" },\n            { prefix: \"fas\", name: \"tv\" },\n            { prefix: \"fas\", name: \"shrimp\" },\n            { prefix: \"fas\", name: \"tasks\" },\n            { prefix: \"fas\", name: \"list-check\" },\n            { prefix: \"fas\", name: \"jug-detergent\" },\n            { prefix: \"fas\", name: \"user-circle\" },\n            { prefix: \"fas\", name: \"circle-user\" },\n            { prefix: \"fas\", name: \"user-shield\" },\n            { prefix: \"fas\", name: \"wind\" },\n            { prefix: \"fas\", name: \"car-crash\" },\n            { prefix: \"fas\", name: \"car-burst\" },\n            { prefix: \"fas\", name: \"y\" },\n            { prefix: \"fas\", name: \"snowboarding\" },\n            { prefix: \"fas\", name: \"person-snowboarding\" },\n            { prefix: \"fas\", name: \"shipping-fast\" },\n            { prefix: \"fas\", name: \"truck-fast\" }\n        ]\n    }\n};\n\nexport const WithDefaultValue: Story = {\n    args: {\n        ...Default.args,\n        value: \"fas/panorama\"\n    }\n};\n\nexport const MediumSize: Story = {\n    args: {\n        ...Default.args,\n        size: \"md\"\n    }\n};\n\nexport const LargeSize: Story = {\n    args: {\n        ...Default.args,\n        size: \"lg\"\n    }\n};\n\nexport const ExtraLargeSize: Story = {\n    args: {\n        ...Default.args,\n        size: \"xl\"\n    }\n};\n\nexport const PrimaryVariant: Story = {\n    args: {\n        ...Default.args,\n        variant: \"primary\"\n    }\n};\n\nexport const PrimaryVariantDisabled: Story = {\n    args: {\n        ...PrimaryVariant.args,\n        disabled: true\n    }\n};\n\nexport const PrimaryVariantInvalid: Story = {\n    args: {\n        ...PrimaryVariant.args,\n        invalid: true\n    }\n};\n\nexport const SecondaryVariant: Story = {\n    args: {\n        ...Default.args,\n        variant: \"secondary\"\n    }\n};\n\nexport const SecondaryVariantDisabled: Story = {\n    args: {\n        ...SecondaryVariant.args,\n        disabled: true\n    }\n};\n\nexport const SecondaryVariantInvalid: Story = {\n    args: {\n        ...SecondaryVariant.args,\n        invalid: true\n    }\n};\n\nexport const GhostVariant: Story = {\n    args: {\n        ...Default.args,\n        variant: \"ghost\"\n    }\n};\n\nexport const GhostVariantDisabled: Story = {\n    args: {\n        ...GhostVariant.args,\n        disabled: true\n    }\n};\n\nexport const GhostVariantInvalid: Story = {\n    args: {\n        ...GhostVariant.args,\n        invalid: true\n    }\n};\n"],"mappings":"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","ignoreList":[]}

package/IconPicker/primitives/components/IconPickerGrid.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import type { IconPickerFontAwesome } from "../../domains";
+interface IconPickerGridProps {
+    icons: IconPickerFontAwesome[];
+    iconsLength: number;
+    onIconSelect: (value: string) => void;
+}
+declare const IconPickerGrid: (props: IconPickerGridProps) => React.JSX.Element;
+export { IconPickerGrid, type IconPickerGridProps };

package/IconPicker/primitives/components/IconPickerGrid.js

@@ -0,0 +1,59 @@
+import React, { useCallback } from "react";
+import { Grid } from "react-virtualized";
+import { Text } from "../../../Text";
+import { cn } from "../../../utils";
+import { IconPickerIconFormatter } from "../../domains";
+import { IconPickerIcon } from "./IconPickerIcon";
+const COLUMN_COUNT = 5;
+const GRID_WIDTH = 424;
+const GRID_HEIGHT = 270;
+const COLUMN_WIDTH = 80;
+const ROW_HEIGHT = 80;
+const IconPickerGrid = props => {
+  const renderCell = useCallback(() => {
+    return function renderCell({
+      columnIndex,
+      key,
+      rowIndex,
+      style
+    }) {
+      const item = props.icons[rowIndex * COLUMN_COUNT + columnIndex];
+      if (!item) {
+        return null;
+      }
+      return /*#__PURE__*/React.createElement("div", {
+        key: key,
+        style: style,
+        className: cn(["wby-flex wby-flex-col wby-justify-center wby-items-center wby-gap-sm", "wby-text-neutral-strong", "hover:wby-bg-neutral-dimmed hover:wby-text-neutral-strong", "wby-px-xs-plus wby-box-border wby-rounded-xs wby-cursor-pointer wby-overflow-hidden", "wby-transition-colors wby-duration-400 wby-ease-out"]),
+        onClick: () => {
+          if (props.onIconSelect) {
+            props.onIconSelect(IconPickerIconFormatter.formatStringValue(item));
+          }
+        }
+      }, /*#__PURE__*/React.createElement(IconPickerIcon, {
+        name: item.name,
+        prefix: item.prefix,
+        className: "wby-size-lg"
+      }), /*#__PURE__*/React.createElement(Text, {
+        as: "div",
+        size: "sm",
+        className: "wby-w-full wby-truncate wby-text-center wby-text-neutral-muted"
+      }, item.name));
+    };
+  }, [props.icons]);
+  return /*#__PURE__*/React.createElement("div", null, props.iconsLength === 0 ? /*#__PURE__*/React.createElement("div", {
+    className: `wby-px-sm-extra wby-py-md wby-text-neutral-strong`
+  }, /*#__PURE__*/React.createElement(Text, null, "No results found.")) : /*#__PURE__*/React.createElement(Grid, {
+    className: "wby-px-sm-extra wby-py-xs-plus wby-outline-none",
+    cellRenderer: renderCell(),
+    columnCount: COLUMN_COUNT,
+    columnWidth: COLUMN_WIDTH,
+    rowHeight: ROW_HEIGHT,
+    width: GRID_WIDTH,
+    height: GRID_HEIGHT,
+    rowCount: Math.ceil(props.iconsLength / COLUMN_COUNT)
+  }));
+};
+export { IconPickerGrid };
+
+//# sourceMappingURL=IconPickerGrid.js.map

package/IconPicker/primitives/components/IconPickerGrid.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useCallback","Grid","Text","cn","IconPickerIconFormatter","IconPickerIcon","COLUMN_COUNT","GRID_WIDTH","GRID_HEIGHT","COLUMN_WIDTH","ROW_HEIGHT","IconPickerGrid","props","renderCell","columnIndex","key","rowIndex","style","item","icons","createElement","className","onClick","onIconSelect","formatStringValue","name","prefix","as","size","iconsLength","cellRenderer","columnCount","columnWidth","rowHeight","width","height","rowCount","Math","ceil"],"sources":["IconPickerGrid.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport type { GridCellProps } from \"react-virtualized\";\nimport { Grid } from \"react-virtualized\";\nimport { Text } from \"~/Text\";\nimport { cn } from \"~/utils\";\nimport type { IconPickerFontAwesome } from \"../../domains\";\nimport { IconPickerIconFormatter } from \"../../domains\";\nimport { IconPickerIcon } from \"./IconPickerIcon\";\n\nconst COLUMN_COUNT = 5;\nconst GRID_WIDTH = 424;\nconst GRID_HEIGHT = 270;\nconst COLUMN_WIDTH = 80;\nconst ROW_HEIGHT = 80;\n\ninterface IconPickerGridProps {\n    icons: IconPickerFontAwesome[];\n    iconsLength: number;\n    onIconSelect: (value: string) => void;\n}\n\nconst IconPickerGrid = (props: IconPickerGridProps) => {\n    const renderCell = useCallback(() => {\n        return function renderCell({\n            columnIndex,\n            key,\n            rowIndex,\n            style\n        }: GridCellProps): React.ReactNode {\n            const item = props.icons[rowIndex * COLUMN_COUNT + columnIndex];\n            if (!item) {\n                return null;\n            }\n\n            return (\n                <div\n                    key={key}\n                    style={style}\n                    className={cn([\n                        \"wby-flex wby-flex-col wby-justify-center wby-items-center wby-gap-sm\",\n                        \"wby-text-neutral-strong\",\n                        \"hover:wby-bg-neutral-dimmed hover:wby-text-neutral-strong\",\n                        \"wby-px-xs-plus wby-box-border wby-rounded-xs wby-cursor-pointer wby-overflow-hidden\",\n                        \"wby-transition-colors wby-duration-400 wby-ease-out\"\n                    ])}\n                    onClick={() => {\n                        if (props.onIconSelect) {\n                            props.onIconSelect(IconPickerIconFormatter.formatStringValue(item));\n                        }\n                    }}\n                >\n                    <IconPickerIcon\n                        name={item.name}\n                        prefix={item.prefix}\n                        className={\"wby-size-lg\"}\n                    />\n                    <Text\n                        as={\"div\"}\n                        size={\"sm\"}\n                        className={\"wby-w-full wby-truncate wby-text-center wby-text-neutral-muted\"}\n                    >\n                        {item.name}\n                    </Text>\n                </div>\n            );\n        };\n    }, [props.icons]);\n\n    return (\n        <div>\n            {props.iconsLength === 0 ? (\n                <div className={`wby-px-sm-extra wby-py-md wby-text-neutral-strong`}>\n                    <Text>{\"No results found.\"}</Text>\n                </div>\n            ) : (\n                <Grid\n                    className={\"wby-px-sm-extra wby-py-xs-plus wby-outline-none\"}\n                    cellRenderer={renderCell()}\n                    columnCount={COLUMN_COUNT}\n                    columnWidth={COLUMN_WIDTH}\n                    rowHeight={ROW_HEIGHT}\n                    width={GRID_WIDTH}\n                    height={GRID_HEIGHT}\n                    rowCount={Math.ceil(props.iconsLength / COLUMN_COUNT)}\n                />\n            )}\n        </div>\n    );\n};\n\nexport { IconPickerGrid, type IconPickerGridProps };\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,WAAW,QAAQ,OAAO;AAE1C,SAASC,IAAI,QAAQ,mBAAmB;AACxC,SAASC,IAAI;AACb,SAASC,EAAE;AAEX,SAASC,uBAAuB;AAChC,SAASC,cAAc;AAEvB,MAAMC,YAAY,GAAG,CAAC;AACtB,MAAMC,UAAU,GAAG,GAAG;AACtB,MAAMC,WAAW,GAAG,GAAG;AACvB,MAAMC,YAAY,GAAG,EAAE;AACvB,MAAMC,UAAU,GAAG,EAAE;AAQrB,MAAMC,cAAc,GAAIC,KAA0B,IAAK;EACnD,MAAMC,UAAU,GAAGb,WAAW,CAAC,MAAM;IACjC,OAAO,SAASa,UAAUA,CAAC;MACvBC,WAAW;MACXC,GAAG;MACHC,QAAQ;MACRC;IACW,CAAC,EAAmB;MAC/B,MAAMC,IAAI,GAAGN,KAAK,CAACO,KAAK,CAACH,QAAQ,GAAGV,YAAY,GAAGQ,WAAW,CAAC;MAC/D,IAAI,CAACI,IAAI,EAAE;QACP,OAAO,IAAI;MACf;MAEA,oBACInB,KAAA,CAAAqB,aAAA;QACIL,GAAG,EAAEA,GAAI;QACTE,KAAK,EAAEA,KAAM;QACbI,SAAS,EAAElB,EAAE,CAAC,CACV,sEAAsE,EACtE,yBAAyB,EACzB,2DAA2D,EAC3D,qFAAqF,EACrF,qDAAqD,CACxD,CAAE;QACHmB,OAAO,EAAEA,CAAA,KAAM;UACX,IAAIV,KAAK,CAACW,YAAY,EAAE;YACpBX,KAAK,CAACW,YAAY,CAACnB,uBAAuB,CAACoB,iBAAiB,CAACN,IAAI,CAAC,CAAC;UACvE;QACJ;MAAE,gBAEFnB,KAAA,CAAAqB,aAAA,CAACf,cAAc;QACXoB,IAAI,EAAEP,IAAI,CAACO,IAAK;QAChBC,MAAM,EAAER,IAAI,CAACQ,MAAO;QACpBL,SAAS,EAAE;MAAc,CAC5B,CAAC,eACFtB,KAAA,CAAAqB,aAAA,CAAClB,IAAI;QACDyB,EAAE,EAAE,KAAM;QACVC,IAAI,EAAE,IAAK;QACXP,SAAS,EAAE;MAAiE,GAE3EH,IAAI,CAACO,IACJ,CACL,CAAC;IAEd,CAAC;EACL,CAAC,EAAE,CAACb,KAAK,CAACO,KAAK,CAAC,CAAC;EAEjB,oBACIpB,KAAA,CAAAqB,aAAA,cACKR,KAAK,CAACiB,WAAW,KAAK,CAAC,gBACpB9B,KAAA,CAAAqB,aAAA;IAAKC,SAAS,EAAE;EAAoD,gBAChEtB,KAAA,CAAAqB,aAAA,CAAClB,IAAI,QAAE,mBAA0B,CAChC,CAAC,gBAENH,KAAA,CAAAqB,aAAA,CAACnB,IAAI;IACDoB,SAAS,EAAE,iDAAkD;IAC7DS,YAAY,EAAEjB,UAAU,CAAC,CAAE;IAC3BkB,WAAW,EAAEzB,YAAa;IAC1B0B,WAAW,EAAEvB,YAAa;IAC1BwB,SAAS,EAAEvB,UAAW;IACtBwB,KAAK,EAAE3B,UAAW;IAClB4B,MAAM,EAAE3B,WAAY;IACpB4B,QAAQ,EAAEC,IAAI,CAACC,IAAI,CAAC1B,KAAK,CAACiB,WAAW,GAAGvB,YAAY;EAAE,CACzD,CAEJ,CAAC;AAEd,CAAC;AAED,SAASK,cAAc","ignoreList":[]}