@webiny/admin-ui 6.0.0-alpha.0 → 6.0.0-alpha.2

package/IconPicker/IconPicker.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
-import { IconPickerPrimitiveProps } from "./primitives";
-import { FormComponentProps } from "../FormComponent";
+import type { IconPickerPrimitiveProps } from "./primitives";
+import type { FormComponentProps } from "../FormComponent";
 type IconPickerProps = IconPickerPrimitiveProps & FormComponentProps;
 declare const IconPicker: (({ label, description, note, required, disabled, validation, ...props }: IconPickerProps) => React.JSX.Element) & {
     original: ({ label, description, note, required, disabled, validation, ...props }: IconPickerProps) => React.JSX.Element;

package/IconPicker/IconPicker.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useMemo","makeDecoratable","IconPickerPrimitive","FormComponentDescription","FormComponentErrorMessage","FormComponentLabel","FormComponentNote","DecoratableIconPicker","label","description","note","required","disabled","validation","props","isValid","validationIsValid","message","validationMessage","invalid","createElement","className","text","Object","assign","IconPicker"],"sources":["IconPicker.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { makeDecoratable } from \"~/utils\";\nimport { IconPickerPrimitive, IconPickerPrimitiveProps } from \"./primitives\";\nimport {\n    FormComponentDescription,\n    FormComponentErrorMessage,\n    FormComponentLabel,\n    FormComponentNote,\n    FormComponentProps\n} from \"~/FormComponent\";\n\ntype IconPickerProps = IconPickerPrimitiveProps & FormComponentProps;\n\nconst DecoratableIconPicker = ({\n    label,\n    description,\n    note,\n    required,\n    disabled,\n    validation,\n    ...props\n}: IconPickerProps) => {\n    const { isValid: validationIsValid, message: validationMessage } = validation || {};\n    const invalid = useMemo(() => validationIsValid === false, [validationIsValid]);\n\n    return (\n        <div className={\"wby-w-full\"}>\n            <FormComponentLabel\n                text={label}\n                required={required}\n                disabled={disabled}\n                invalid={invalid}\n            />\n            <FormComponentDescription text={description} disabled={disabled} />\n            <IconPickerPrimitive {...props} disabled={disabled} invalid={invalid} />\n            <FormComponentErrorMessage\n                text={validationMessage}\n                invalid={invalid}\n                disabled={disabled}\n            />\n            <FormComponentNote text={note} disabled={disabled} />\n        </div>\n    );\n};\nconst IconPicker = makeDecoratable(\"IconPicker\", DecoratableIconPicker);\n\nexport { IconPicker, type IconPickerProps };\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AACtC,SAASC,eAAe;AACxB,SAASC,mBAAmB;AAC5B,SACIC,wBAAwB,EACxBC,yBAAyB,EACzBC,kBAAkB,EAClBC,iBAAiB;AAMrB,MAAMC,qBAAqB,GAAGA,CAAC;EAC3BC,KAAK;EACLC,WAAW;EACXC,IAAI;EACJC,QAAQ;EACRC,QAAQ;EACRC,UAAU;EACV,GAAGC;AACU,CAAC,KAAK;EACnB,MAAM;IAAEC,OAAO,EAAEC,iBAAiB;IAAEC,OAAO,EAAEC;EAAkB,CAAC,GAAGL,UAAU,IAAI,CAAC,CAAC;EACnF,MAAMM,OAAO,GAAGnB,OAAO,CAAC,MAAMgB,iBAAiB,KAAK,KAAK,EAAE,CAACA,iBAAiB,CAAC,CAAC;EAE/E,oBACIjB,KAAA,CAAAqB,aAAA;IAAKC,SAAS,EAAE;EAAa,gBACzBtB,KAAA,CAAAqB,aAAA,CAACf,kBAAkB;IACfiB,IAAI,EAAEd,KAAM;IACZG,QAAQ,EAAEA,QAAS;IACnBC,QAAQ,EAAEA,QAAS;IACnBO,OAAO,EAAEA;EAAQ,CACpB,CAAC,eACFpB,KAAA,CAAAqB,aAAA,CAACjB,wBAAwB;IAACmB,IAAI,EAAEb,WAAY;IAACG,QAAQ,EAAEA;EAAS,CAAE,CAAC,eACnEb,KAAA,CAAAqB,aAAA,CAAClB,mBAAmB,EAAAqB,MAAA,CAAAC,MAAA,KAAKV,KAAK;IAAEF,QAAQ,EAAEA,QAAS;IAACO,OAAO,EAAEA;EAAQ,EAAE,CAAC,eACxEpB,KAAA,CAAAqB,aAAA,CAAChB,yBAAyB;IACtBkB,IAAI,EAAEJ,iBAAkB;IACxBC,OAAO,EAAEA,OAAQ;IACjBP,QAAQ,EAAEA;EAAS,CACtB,CAAC,eACFb,KAAA,CAAAqB,aAAA,CAACd,iBAAiB;IAACgB,IAAI,EAAEZ,IAAK;IAACE,QAAQ,EAAEA;EAAS,CAAE,CACnD,CAAC;AAEd,CAAC;AACD,MAAMa,UAAU,GAAGxB,eAAe,CAAC,YAAY,EAAEM,qBAAqB,CAAC;AAEvE,SAASkB,UAAU","ignoreList":[]}
+{"version":3,"names":["React","useMemo","makeDecoratable","IconPickerPrimitive","FormComponentDescription","FormComponentErrorMessage","FormComponentLabel","FormComponentNote","DecoratableIconPicker","label","description","note","required","disabled","validation","props","isValid","validationIsValid","message","validationMessage","invalid","createElement","className","text","Object","assign","IconPicker"],"sources":["IconPicker.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { makeDecoratable } from \"~/utils\";\nimport type { IconPickerPrimitiveProps } from \"./primitives\";\nimport { IconPickerPrimitive } from \"./primitives\";\nimport type { FormComponentProps } from \"~/FormComponent\";\nimport {\n    FormComponentDescription,\n    FormComponentErrorMessage,\n    FormComponentLabel,\n    FormComponentNote\n} from \"~/FormComponent\";\n\ntype IconPickerProps = IconPickerPrimitiveProps & FormComponentProps;\n\nconst DecoratableIconPicker = ({\n    label,\n    description,\n    note,\n    required,\n    disabled,\n    validation,\n    ...props\n}: IconPickerProps) => {\n    const { isValid: validationIsValid, message: validationMessage } = validation || {};\n    const invalid = useMemo(() => validationIsValid === false, [validationIsValid]);\n\n    return (\n        <div className={\"wby-w-full\"}>\n            <FormComponentLabel\n                text={label}\n                required={required}\n                disabled={disabled}\n                invalid={invalid}\n            />\n            <FormComponentDescription text={description} disabled={disabled} />\n            <IconPickerPrimitive {...props} disabled={disabled} invalid={invalid} />\n            <FormComponentErrorMessage\n                text={validationMessage}\n                invalid={invalid}\n                disabled={disabled}\n            />\n            <FormComponentNote text={note} disabled={disabled} />\n        </div>\n    );\n};\nconst IconPicker = makeDecoratable(\"IconPicker\", DecoratableIconPicker);\n\nexport { IconPicker, type IconPickerProps };\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AACtC,SAASC,eAAe;AAExB,SAASC,mBAAmB;AAE5B,SACIC,wBAAwB,EACxBC,yBAAyB,EACzBC,kBAAkB,EAClBC,iBAAiB;AAKrB,MAAMC,qBAAqB,GAAGA,CAAC;EAC3BC,KAAK;EACLC,WAAW;EACXC,IAAI;EACJC,QAAQ;EACRC,QAAQ;EACRC,UAAU;EACV,GAAGC;AACU,CAAC,KAAK;EACnB,MAAM;IAAEC,OAAO,EAAEC,iBAAiB;IAAEC,OAAO,EAAEC;EAAkB,CAAC,GAAGL,UAAU,IAAI,CAAC,CAAC;EACnF,MAAMM,OAAO,GAAGnB,OAAO,CAAC,MAAMgB,iBAAiB,KAAK,KAAK,EAAE,CAACA,iBAAiB,CAAC,CAAC;EAE/E,oBACIjB,KAAA,CAAAqB,aAAA;IAAKC,SAAS,EAAE;EAAa,gBACzBtB,KAAA,CAAAqB,aAAA,CAACf,kBAAkB;IACfiB,IAAI,EAAEd,KAAM;IACZG,QAAQ,EAAEA,QAAS;IACnBC,QAAQ,EAAEA,QAAS;IACnBO,OAAO,EAAEA;EAAQ,CACpB,CAAC,eACFpB,KAAA,CAAAqB,aAAA,CAACjB,wBAAwB;IAACmB,IAAI,EAAEb,WAAY;IAACG,QAAQ,EAAEA;EAAS,CAAE,CAAC,eACnEb,KAAA,CAAAqB,aAAA,CAAClB,mBAAmB,EAAAqB,MAAA,CAAAC,MAAA,KAAKV,KAAK;IAAEF,QAAQ,EAAEA,QAAS;IAACO,OAAO,EAAEA;EAAQ,EAAE,CAAC,eACxEpB,KAAA,CAAAqB,aAAA,CAAChB,yBAAyB;IACtBkB,IAAI,EAAEJ,iBAAkB;IACxBC,OAAO,EAAEA,OAAQ;IACjBP,QAAQ,EAAEA;EAAS,CACtB,CAAC,eACFb,KAAA,CAAAqB,aAAA,CAACd,iBAAiB;IAACgB,IAAI,EAAEZ,IAAK;IAACE,QAAQ,EAAEA;EAAS,CAAE,CACnD,CAAC;AAEd,CAAC;AACD,MAAMa,UAAU,GAAGxB,eAAe,CAAC,YAAY,EAAEM,qBAAqB,CAAC;AAEvE,SAASkB,UAAU","ignoreList":[]}

package/IconPicker/domains/IconPickerFontAwesome.d.ts

@@ -1,4 +1,4 @@
-import { IconName, IconPrefix } from "@fortawesome/fontawesome-svg-core";
+import type { IconName, IconPrefix } from "@fortawesome/fontawesome-svg-core";
 export interface IconPickerFontAwesome {
     prefix: IconPrefix;
     name: IconName;

package/IconPicker/domains/IconPickerFontAwesome.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["IconPickerFontAwesome.ts"],"sourcesContent":["import { IconName, IconPrefix } from \"@fortawesome/fontawesome-svg-core\";\n\nexport interface IconPickerFontAwesome {\n    prefix: IconPrefix;\n    name: IconName;\n}\n"],"mappings":"","ignoreList":[]}
+{"version":3,"names":[],"sources":["IconPickerFontAwesome.ts"],"sourcesContent":["import type { IconName, IconPrefix } from \"@fortawesome/fontawesome-svg-core\";\n\nexport interface IconPickerFontAwesome {\n    prefix: IconPrefix;\n    name: IconName;\n}\n"],"mappings":"","ignoreList":[]}

package/IconPicker/domains/IconPickerIcon.d.ts

@@ -1,4 +1,4 @@
-import { IconPickerIconDto } from "./IconPickerIconDto";
+import type { IconPickerIconDto } from "./IconPickerIconDto";
 export declare class IconPickerIcon {
     private readonly _prefix;
     private readonly _name;

package/IconPicker/domains/IconPickerIcon.js.map

@@ -1 +1 @@
-{"version":3,"names":["IconPickerIcon","constructor","data","_prefix","prefix","_name","name","create","createFromString","value","includes","values","split"],"sources":["IconPickerIcon.tsx"],"sourcesContent":["import { IconPickerIconDto } from \"./IconPickerIconDto\";\n\nexport class IconPickerIcon {\n    private readonly _prefix: string;\n    private readonly _name: string;\n\n    protected constructor(data: { prefix: string; name: string }) {\n        this._prefix = data.prefix;\n        this._name = data.name;\n    }\n\n    static create(data: IconPickerIconDto) {\n        return new IconPickerIcon({\n            prefix: data.prefix,\n            name: data.name\n        });\n    }\n\n    static createFromString(value?: string) {\n        if (typeof value === \"string\" && value.includes(\"/\")) {\n            const values = value.split(\"/\");\n            return new IconPickerIcon({\n                prefix: values[0],\n                name: values[1]\n            });\n        } else {\n            return new IconPickerIcon({\n                prefix: \"fas\",\n                name: \"star\"\n            });\n        }\n    }\n\n    get prefix() {\n        return this._prefix;\n    }\n\n    get name() {\n        return this._name;\n    }\n}\n"],"mappings":"AAEA,OAAO,MAAMA,cAAc,CAAC;EAIdC,WAAWA,CAACC,IAAsC,EAAE;IAC1D,IAAI,CAACC,OAAO,GAAGD,IAAI,CAACE,MAAM;IAC1B,IAAI,CAACC,KAAK,GAAGH,IAAI,CAACI,IAAI;EAC1B;EAEA,OAAOC,MAAMA,CAACL,IAAuB,EAAE;IACnC,OAAO,IAAIF,cAAc,CAAC;MACtBI,MAAM,EAAEF,IAAI,CAACE,MAAM;MACnBE,IAAI,EAAEJ,IAAI,CAACI;IACf,CAAC,CAAC;EACN;EAEA,OAAOE,gBAAgBA,CAACC,KAAc,EAAE;IACpC,IAAI,OAAOA,KAAK,KAAK,QAAQ,IAAIA,KAAK,CAACC,QAAQ,CAAC,GAAG,CAAC,EAAE;MAClD,MAAMC,MAAM,GAAGF,KAAK,CAACG,KAAK,CAAC,GAAG,CAAC;MAC/B,OAAO,IAAIZ,cAAc,CAAC;QACtBI,MAAM,EAAEO,MAAM,CAAC,CAAC,CAAC;QACjBL,IAAI,EAAEK,MAAM,CAAC,CAAC;MAClB,CAAC,CAAC;IACN,CAAC,MAAM;MACH,OAAO,IAAIX,cAAc,CAAC;QACtBI,MAAM,EAAE,KAAK;QACbE,IAAI,EAAE;MACV,CAAC,CAAC;IACN;EACJ;EAEA,IAAIF,MAAMA,CAAA,EAAG;IACT,OAAO,IAAI,CAACD,OAAO;EACvB;EAEA,IAAIG,IAAIA,CAAA,EAAG;IACP,OAAO,IAAI,CAACD,KAAK;EACrB;AACJ","ignoreList":[]}
+{"version":3,"names":["IconPickerIcon","constructor","data","_prefix","prefix","_name","name","create","createFromString","value","includes","values","split"],"sources":["IconPickerIcon.tsx"],"sourcesContent":["import type { IconPickerIconDto } from \"./IconPickerIconDto\";\n\nexport class IconPickerIcon {\n    private readonly _prefix: string;\n    private readonly _name: string;\n\n    protected constructor(data: { prefix: string; name: string }) {\n        this._prefix = data.prefix;\n        this._name = data.name;\n    }\n\n    static create(data: IconPickerIconDto) {\n        return new IconPickerIcon({\n            prefix: data.prefix,\n            name: data.name\n        });\n    }\n\n    static createFromString(value?: string) {\n        if (typeof value === \"string\" && value.includes(\"/\")) {\n            const values = value.split(\"/\");\n            return new IconPickerIcon({\n                prefix: values[0],\n                name: values[1]\n            });\n        } else {\n            return new IconPickerIcon({\n                prefix: \"fas\",\n                name: \"star\"\n            });\n        }\n    }\n\n    get prefix() {\n        return this._prefix;\n    }\n\n    get name() {\n        return this._name;\n    }\n}\n"],"mappings":"AAEA,OAAO,MAAMA,cAAc,CAAC;EAIdC,WAAWA,CAACC,IAAsC,EAAE;IAC1D,IAAI,CAACC,OAAO,GAAGD,IAAI,CAACE,MAAM;IAC1B,IAAI,CAACC,KAAK,GAAGH,IAAI,CAACI,IAAI;EAC1B;EAEA,OAAOC,MAAMA,CAACL,IAAuB,EAAE;IACnC,OAAO,IAAIF,cAAc,CAAC;MACtBI,MAAM,EAAEF,IAAI,CAACE,MAAM;MACnBE,IAAI,EAAEJ,IAAI,CAACI;IACf,CAAC,CAAC;EACN;EAEA,OAAOE,gBAAgBA,CAACC,KAAc,EAAE;IACpC,IAAI,OAAOA,KAAK,KAAK,QAAQ,IAAIA,KAAK,CAACC,QAAQ,CAAC,GAAG,CAAC,EAAE;MAClD,MAAMC,MAAM,GAAGF,KAAK,CAACG,KAAK,CAAC,GAAG,CAAC;MAC/B,OAAO,IAAIZ,cAAc,CAAC;QACtBI,MAAM,EAAEO,MAAM,CAAC,CAAC,CAAC;QACjBL,IAAI,EAAEK,MAAM,CAAC,CAAC;MAClB,CAAC,CAAC;IACN,CAAC,MAAM;MACH,OAAO,IAAIX,cAAc,CAAC;QACtBI,MAAM,EAAE,KAAK;QACbE,IAAI,EAAE;MACV,CAAC,CAAC;IACN;EACJ;EAEA,IAAIF,MAAMA,CAAA,EAAG;IACT,OAAO,IAAI,CAACD,OAAO;EACvB;EAEA,IAAIG,IAAIA,CAAA,EAAG;IACP,OAAO,IAAI,CAACD,KAAK;EACrB;AACJ","ignoreList":[]}

package/IconPicker/domains/IconPickerIconFormatter.d.ts

@@ -1,5 +1,5 @@
-import { IconPickerIcon } from "./IconPickerIcon";
-import { IconPickerFontAwesome } from "./IconPickerFontAwesome";
+import type { IconPickerIcon } from "./IconPickerIcon";
+import type { IconPickerFontAwesome } from "./IconPickerFontAwesome";
 export declare class IconPickerIconFormatter {
     static formatFontAwesome(icon: IconPickerIcon): IconPickerFontAwesome;
     static formatStringValue(icon: IconPickerIcon | IconPickerFontAwesome): string;

package/IconPicker/domains/IconPickerIconFormatter.js.map

@@ -1 +1 @@
-{"version":3,"names":["IconPickerIconFormatter","formatFontAwesome","icon","prefix","name","formatStringValue"],"sources":["IconPickerIconFormatter.tsx"],"sourcesContent":["import { IconPickerIcon } from \"./IconPickerIcon\";\nimport { IconName, IconPrefix } from \"@fortawesome/fontawesome-svg-core\";\nimport { 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":[]}
+{"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/primitives/IconPickerPrimitive.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
-import { InputPrimitiveProps } from "../../Input";
+import type { InputPrimitiveProps } from "../../Input";
 import { type VariantProps } from "../../utils";
-import { IconPickerIconDto } from "../domains";
+import type { IconPickerIconDto } from "../domains";
 declare const iconPickerVariants: (props?: ({
     size?: "md" | "lg" | "xl" | null | undefined;
     disabled?: boolean | null | undefined;

package/IconPicker/primitives/IconPickerPrimitive.js.map

@@ -1 +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 { InputPrimitiveProps, inputVariants } from \"~/Input\";\nimport { PopoverPrimitive } from \"~/Popover\";\nimport { cn, cva, type VariantProps } from \"~/utils\";\nimport { IconPickerGrid, IconPickerInput, IconPickerTrigger } from \"./components\";\nimport { 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;AAChD,SAA8BC,aAAa;AAC3C,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":[]}
+{"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/components/IconPickerGrid.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { IconPickerFontAwesome } from "../../domains";
+import type { IconPickerFontAwesome } from "../../domains";
 interface IconPickerGridProps {
     icons: IconPickerFontAwesome[];
     iconsLength: number;

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

@@ -1 +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 { Grid, GridCellProps } from \"react-virtualized\";\nimport { Text } from \"~/Text\";\nimport { cn } from \"~/utils\";\nimport { IconPickerFontAwesome, 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;AAC1C,SAASC,IAAI,QAAuB,mBAAmB;AACvD,SAASC,IAAI;AACb,SAASC,EAAE;AACX,SAAgCC,uBAAuB;AACvD,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":[]}
+{"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":[]}

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { IconName, IconPrefix } from "@fortawesome/fontawesome-svg-core";
+import type { IconName, IconPrefix } from "@fortawesome/fontawesome-svg-core";
 interface IconPickerIconProps extends React.HTMLAttributes<HTMLDivElement> {
     name: IconName;
     prefix: IconPrefix;

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

@@ -1 +1 @@
-{"version":3,"names":["React","FontAwesomeIcon","IconPickerIcon","name","prefix","props","createElement","icon","size","className"],"sources":["IconPickerIcon.tsx"],"sourcesContent":["import React from \"react\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { IconName, IconPrefix } from \"@fortawesome/fontawesome-svg-core\";\n\ninterface IconPickerIconProps extends React.HTMLAttributes<HTMLDivElement> {\n    name: IconName;\n    prefix: IconPrefix;\n}\n\nconst IconPickerIcon = ({ name, prefix, ...props }: IconPickerIconProps) => {\n    return (\n        <div {...props}>\n            <FontAwesomeIcon\n                icon={[prefix, name]}\n                size={\"2x\"}\n                className={\"wby-block wby-size-full\"}\n            />\n        </div>\n    );\n};\n\nexport { IconPickerIcon, type IconPickerIconProps };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,eAAe,QAAQ,gCAAgC;AAQhE,MAAMC,cAAc,GAAGA,CAAC;EAAEC,IAAI;EAAEC,MAAM;EAAE,GAAGC;AAA2B,CAAC,KAAK;EACxE,oBACIL,KAAA,CAAAM,aAAA,QAASD,KAAK,eACVL,KAAA,CAAAM,aAAA,CAACL,eAAe;IACZM,IAAI,EAAE,CAACH,MAAM,EAAED,IAAI,CAAE;IACrBK,IAAI,EAAE,IAAK;IACXC,SAAS,EAAE;EAA0B,CACxC,CACA,CAAC;AAEd,CAAC;AAED,SAASP,cAAc","ignoreList":[]}
+{"version":3,"names":["React","FontAwesomeIcon","IconPickerIcon","name","prefix","props","createElement","icon","size","className"],"sources":["IconPickerIcon.tsx"],"sourcesContent":["import React from \"react\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport type { IconName, IconPrefix } from \"@fortawesome/fontawesome-svg-core\";\n\ninterface IconPickerIconProps extends React.HTMLAttributes<HTMLDivElement> {\n    name: IconName;\n    prefix: IconPrefix;\n}\n\nconst IconPickerIcon = ({ name, prefix, ...props }: IconPickerIconProps) => {\n    return (\n        <div {...props}>\n            <FontAwesomeIcon\n                icon={[prefix, name]}\n                size={\"2x\"}\n                className={\"wby-block wby-size-full\"}\n            />\n        </div>\n    );\n};\n\nexport { IconPickerIcon, type IconPickerIconProps };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,eAAe,QAAQ,gCAAgC;AAQhE,MAAMC,cAAc,GAAGA,CAAC;EAAEC,IAAI;EAAEC,MAAM;EAAE,GAAGC;AAA2B,CAAC,KAAK;EACxE,oBACIL,KAAA,CAAAM,aAAA,QAASD,KAAK,eACVL,KAAA,CAAAM,aAAA,CAACL,eAAe;IACZM,IAAI,EAAE,CAACH,MAAM,EAAED,IAAI,CAAE;IACrBK,IAAI,EAAE,IAAK;IACXC,SAAS,EAAE;EAA0B,CACxC,CACA,CAAC;AAEd,CAAC;AAED,SAASP,cAAc","ignoreList":[]}

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

@@ -1 +1 @@
-{"version":3,"names":["React","useCallback","ReactComponent","SearchIcon","Input","Icon","DelayedOnChange","cn","IconPickerInput","props","onInputChange","value","cb","onChange","createElement","className","inputRef","placeholder","variant","size","startIcon","icon","label"],"sources":["IconPickerInput.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport { ReactComponent as SearchIcon } from \"@webiny/icons/search.svg\";\nimport { Input } from \"~/Input\";\nimport { Icon } from \"~/Icon\";\nimport { DelayedOnChange, OnChangeCallable } from \"~/DelayedOnChange\";\nimport { cn } from \"~/utils\";\n\ninterface IconPickerInputProps {\n    value: string;\n    onChange: (value: string) => void;\n    inputRef: React.RefObject<HTMLInputElement>;\n}\n\nconst IconPickerInput = (props: IconPickerInputProps) => {\n    const onInputChange = useCallback<OnChangeCallable>(\n        (value, cb) => {\n            props.onChange(value);\n            if (cb) {\n                cb(value);\n            }\n        },\n        [props.onChange]\n    );\n\n    return (\n        <DelayedOnChange value={props.value} onChange={onInputChange}>\n            {({ value, onChange }) => (\n                <div className={cn(\"wby-p-xs-plus wby-pb-0\")}>\n                    <Input\n                        inputRef={props.inputRef}\n                        value={value}\n                        onChange={onChange}\n                        placeholder={\"Search icons...\"}\n                        variant={\"secondary\"}\n                        size={\"md\"}\n                        startIcon={<Icon icon={<SearchIcon />} label={\"Search icons\"} />}\n                    />\n                </div>\n            )}\n        </DelayedOnChange>\n    );\n};\n\nexport { IconPickerInput, type IconPickerInputProps };\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,WAAW,QAAQ,OAAO;AAC1C,SAASC,cAAc,IAAIC,UAAU,QAAQ,0BAA0B;AACvE,SAASC,KAAK;AACd,SAASC,IAAI;AACb,SAASC,eAAe;AACxB,SAASC,EAAE;AAQX,MAAMC,eAAe,GAAIC,KAA2B,IAAK;EACrD,MAAMC,aAAa,GAAGT,WAAW,CAC7B,CAACU,KAAK,EAAEC,EAAE,KAAK;IACXH,KAAK,CAACI,QAAQ,CAACF,KAAK,CAAC;IACrB,IAAIC,EAAE,EAAE;MACJA,EAAE,CAACD,KAAK,CAAC;IACb;EACJ,CAAC,EACD,CAACF,KAAK,CAACI,QAAQ,CACnB,CAAC;EAED,oBACIb,KAAA,CAAAc,aAAA,CAACR,eAAe;IAACK,KAAK,EAAEF,KAAK,CAACE,KAAM;IAACE,QAAQ,EAAEH;EAAc,GACxD,CAAC;IAAEC,KAAK;IAAEE;EAAS,CAAC,kBACjBb,KAAA,CAAAc,aAAA;IAAKC,SAAS,EAAER,EAAE,CAAC,wBAAwB;EAAE,gBACzCP,KAAA,CAAAc,aAAA,CAACV,KAAK;IACFY,QAAQ,EAAEP,KAAK,CAACO,QAAS;IACzBL,KAAK,EAAEA,KAAM;IACbE,QAAQ,EAAEA,QAAS;IACnBI,WAAW,EAAE,iBAAkB;IAC/BC,OAAO,EAAE,WAAY;IACrBC,IAAI,EAAE,IAAK;IACXC,SAAS,eAAEpB,KAAA,CAAAc,aAAA,CAACT,IAAI;MAACgB,IAAI,eAAErB,KAAA,CAAAc,aAAA,CAACX,UAAU,MAAE,CAAE;MAACmB,KAAK,EAAE;IAAe,CAAE;EAAE,CACpE,CACA,CAEI,CAAC;AAE1B,CAAC;AAED,SAASd,eAAe","ignoreList":[]}
+{"version":3,"names":["React","useCallback","ReactComponent","SearchIcon","Input","Icon","DelayedOnChange","cn","IconPickerInput","props","onInputChange","value","cb","onChange","createElement","className","inputRef","placeholder","variant","size","startIcon","icon","label"],"sources":["IconPickerInput.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport { ReactComponent as SearchIcon } from \"@webiny/icons/search.svg\";\nimport { Input } from \"~/Input\";\nimport { Icon } from \"~/Icon\";\nimport type { OnChangeCallable } from \"~/DelayedOnChange\";\nimport { DelayedOnChange } from \"~/DelayedOnChange\";\nimport { cn } from \"~/utils\";\n\ninterface IconPickerInputProps {\n    value: string;\n    onChange: (value: string) => void;\n    inputRef: React.RefObject<HTMLInputElement>;\n}\n\nconst IconPickerInput = (props: IconPickerInputProps) => {\n    const onInputChange = useCallback<OnChangeCallable>(\n        (value, cb) => {\n            props.onChange(value);\n            if (cb) {\n                cb(value);\n            }\n        },\n        [props.onChange]\n    );\n\n    return (\n        <DelayedOnChange value={props.value} onChange={onInputChange}>\n            {({ value, onChange }) => (\n                <div className={cn(\"wby-p-xs-plus wby-pb-0\")}>\n                    <Input\n                        inputRef={props.inputRef}\n                        value={value}\n                        onChange={onChange}\n                        placeholder={\"Search icons...\"}\n                        variant={\"secondary\"}\n                        size={\"md\"}\n                        startIcon={<Icon icon={<SearchIcon />} label={\"Search icons\"} />}\n                    />\n                </div>\n            )}\n        </DelayedOnChange>\n    );\n};\n\nexport { IconPickerInput, type IconPickerInputProps };\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,WAAW,QAAQ,OAAO;AAC1C,SAASC,cAAc,IAAIC,UAAU,QAAQ,0BAA0B;AACvE,SAASC,KAAK;AACd,SAASC,IAAI;AAEb,SAASC,eAAe;AACxB,SAASC,EAAE;AAQX,MAAMC,eAAe,GAAIC,KAA2B,IAAK;EACrD,MAAMC,aAAa,GAAGT,WAAW,CAC7B,CAACU,KAAK,EAAEC,EAAE,KAAK;IACXH,KAAK,CAACI,QAAQ,CAACF,KAAK,CAAC;IACrB,IAAIC,EAAE,EAAE;MACJA,EAAE,CAACD,KAAK,CAAC;IACb;EACJ,CAAC,EACD,CAACF,KAAK,CAACI,QAAQ,CACnB,CAAC;EAED,oBACIb,KAAA,CAAAc,aAAA,CAACR,eAAe;IAACK,KAAK,EAAEF,KAAK,CAACE,KAAM;IAACE,QAAQ,EAAEH;EAAc,GACxD,CAAC;IAAEC,KAAK;IAAEE;EAAS,CAAC,kBACjBb,KAAA,CAAAc,aAAA;IAAKC,SAAS,EAAER,EAAE,CAAC,wBAAwB;EAAE,gBACzCP,KAAA,CAAAc,aAAA,CAACV,KAAK;IACFY,QAAQ,EAAEP,KAAK,CAACO,QAAS;IACzBL,KAAK,EAAEA,KAAM;IACbE,QAAQ,EAAEA,QAAS;IACnBI,WAAW,EAAE,iBAAkB;IAC/BC,OAAO,EAAE,WAAY;IACrBC,IAAI,EAAE,IAAK;IACXC,SAAS,eAAEpB,KAAA,CAAAc,aAAA,CAACT,IAAI;MAACgB,IAAI,eAAErB,KAAA,CAAAc,aAAA,CAACX,UAAU,MAAE,CAAE;MAACmB,KAAK,EAAE;IAAe,CAAE;EAAE,CACpE,CACA,CAEI,CAAC;AAE1B,CAAC;AAED,SAASd,eAAe","ignoreList":[]}

package/IconPicker/primitives/presenters/IconPickerPresenter.d.ts

@@ -1,4 +1,4 @@
-import { IconPickerIconDto, IconPickerFontAwesome } from "../../domains";
+import type { IconPickerIconDto, IconPickerFontAwesome } from "../../domains";
 interface IconPickerParams {
     icons: IconPickerIconDto[];
     onChange?: (value: string) => void;

package/IconPicker/primitives/presenters/IconPickerPresenter.js.map

@@ -1 +1 @@
-{"version":3,"names":["makeAutoObservable","IconPickerIcon","IconPickerIconFormatter","ListCache","IconPickerPresenter","open","icons","searchQuery","params","undefined","constructor","init","clear","addItems","map","icon","create","vm","getIcons","formatFontAwesome","iconsLength","length","setListOpenState","searchIcon","value","setSelectedIcon","onChange","getItems","name","includes"],"sources":["IconPickerPresenter.ts"],"sourcesContent":["import { makeAutoObservable } from \"mobx\";\nimport {\n    IconPickerIcon,\n    IconPickerIconDto,\n    IconPickerFontAwesome,\n    IconPickerIconFormatter,\n    ListCache\n} from \"../../domains\";\n\ninterface IconPickerParams {\n    icons: IconPickerIconDto[];\n    onChange?: (value: string) => void;\n}\n\ninterface IIconPickerPresenter {\n    vm: {\n        open: boolean;\n        icons: IconPickerFontAwesome[];\n        iconsLength: number;\n        searchQuery: string;\n    };\n    init: (params: IconPickerParams) => void;\n    setListOpenState: (open: boolean) => void;\n    searchIcon: (value: string) => void;\n    setSelectedIcon: (icon: string) => void;\n}\n\nclass IconPickerPresenter implements IIconPickerPresenter {\n    private open = false;\n    private icons = new ListCache<IconPickerIcon>();\n    private searchQuery = \"\";\n    private params?: IconPickerParams = undefined;\n\n    constructor() {\n        makeAutoObservable(this);\n    }\n\n    public init = (params: IconPickerParams) => {\n        this.params = params;\n        this.icons.clear();\n        this.icons.addItems(params.icons.map(icon => IconPickerIcon.create(icon)));\n    };\n\n    get vm() {\n        return {\n            open: this.open,\n            searchQuery: this.searchQuery,\n            icons: this.getIcons().map(icon => IconPickerIconFormatter.formatFontAwesome(icon)),\n            iconsLength: this.getIcons().length || 0\n        };\n    }\n\n    public setListOpenState = (open: boolean) => {\n        this.open = open;\n    };\n\n    public searchIcon = (value: string) => {\n        this.searchQuery = value;\n    };\n\n    public setSelectedIcon = (icon: string) => {\n        this.setListOpenState(false);\n        this.params?.onChange?.(icon);\n    };\n\n    private getIcons = () => {\n        if (this.searchQuery) {\n            return this.icons.getItems(icon => icon.name.includes(this.searchQuery));\n        }\n\n        return this.icons.getItems();\n    };\n}\n\nexport { IconPickerPresenter, type IIconPickerPresenter, type IconPickerParams };\n"],"mappings":"AAAA,SAASA,kBAAkB,QAAQ,MAAM;AACzC,SACIC,cAAc,EAGdC,uBAAuB,EACvBC,SAAS;AAqBb,MAAMC,mBAAmB,CAAiC;EAC9CC,IAAI,GAAG,KAAK;EACZC,KAAK,GAAG,IAAIH,SAAS,CAAiB,CAAC;EACvCI,WAAW,GAAG,EAAE;EAChBC,MAAM,GAAsBC,SAAS;EAE7CC,WAAWA,CAAA,EAAG;IACVV,kBAAkB,CAAC,IAAI,CAAC;EAC5B;EAEOW,IAAI,GAAIH,MAAwB,IAAK;IACxC,IAAI,CAACA,MAAM,GAAGA,MAAM;IACpB,IAAI,CAACF,KAAK,CAACM,KAAK,CAAC,CAAC;IAClB,IAAI,CAACN,KAAK,CAACO,QAAQ,CAACL,MAAM,CAACF,KAAK,CAACQ,GAAG,CAACC,IAAI,IAAId,cAAc,CAACe,MAAM,CAACD,IAAI,CAAC,CAAC,CAAC;EAC9E,CAAC;EAED,IAAIE,EAAEA,CAAA,EAAG;IACL,OAAO;MACHZ,IAAI,EAAE,IAAI,CAACA,IAAI;MACfE,WAAW,EAAE,IAAI,CAACA,WAAW;MAC7BD,KAAK,EAAE,IAAI,CAACY,QAAQ,CAAC,CAAC,CAACJ,GAAG,CAACC,IAAI,IAAIb,uBAAuB,CAACiB,iBAAiB,CAACJ,IAAI,CAAC,CAAC;MACnFK,WAAW,EAAE,IAAI,CAACF,QAAQ,CAAC,CAAC,CAACG,MAAM,IAAI;IAC3C,CAAC;EACL;EAEOC,gBAAgB,GAAIjB,IAAa,IAAK;IACzC,IAAI,CAACA,IAAI,GAAGA,IAAI;EACpB,CAAC;EAEMkB,UAAU,GAAIC,KAAa,IAAK;IACnC,IAAI,CAACjB,WAAW,GAAGiB,KAAK;EAC5B,CAAC;EAEMC,eAAe,GAAIV,IAAY,IAAK;IACvC,IAAI,CAACO,gBAAgB,CAAC,KAAK,CAAC;IAC5B,IAAI,CAACd,MAAM,EAAEkB,QAAQ,GAAGX,IAAI,CAAC;EACjC,CAAC;EAEOG,QAAQ,GAAGA,CAAA,KAAM;IACrB,IAAI,IAAI,CAACX,WAAW,EAAE;MAClB,OAAO,IAAI,CAACD,KAAK,CAACqB,QAAQ,CAACZ,IAAI,IAAIA,IAAI,CAACa,IAAI,CAACC,QAAQ,CAAC,IAAI,CAACtB,WAAW,CAAC,CAAC;IAC5E;IAEA,OAAO,IAAI,CAACD,KAAK,CAACqB,QAAQ,CAAC,CAAC;EAChC,CAAC;AACL;AAEA,SAASvB,mBAAmB","ignoreList":[]}
+{"version":3,"names":["makeAutoObservable","IconPickerIcon","IconPickerIconFormatter","ListCache","IconPickerPresenter","open","icons","searchQuery","params","undefined","constructor","init","clear","addItems","map","icon","create","vm","getIcons","formatFontAwesome","iconsLength","length","setListOpenState","searchIcon","value","setSelectedIcon","onChange","getItems","name","includes"],"sources":["IconPickerPresenter.ts"],"sourcesContent":["import { makeAutoObservable } from \"mobx\";\nimport type { IconPickerIconDto, IconPickerFontAwesome } from \"../../domains\";\nimport { IconPickerIcon, IconPickerIconFormatter, ListCache } from \"../../domains\";\n\ninterface IconPickerParams {\n    icons: IconPickerIconDto[];\n    onChange?: (value: string) => void;\n}\n\ninterface IIconPickerPresenter {\n    vm: {\n        open: boolean;\n        icons: IconPickerFontAwesome[];\n        iconsLength: number;\n        searchQuery: string;\n    };\n    init: (params: IconPickerParams) => void;\n    setListOpenState: (open: boolean) => void;\n    searchIcon: (value: string) => void;\n    setSelectedIcon: (icon: string) => void;\n}\n\nclass IconPickerPresenter implements IIconPickerPresenter {\n    private open = false;\n    private icons = new ListCache<IconPickerIcon>();\n    private searchQuery = \"\";\n    private params?: IconPickerParams = undefined;\n\n    constructor() {\n        makeAutoObservable(this);\n    }\n\n    public init = (params: IconPickerParams) => {\n        this.params = params;\n        this.icons.clear();\n        this.icons.addItems(params.icons.map(icon => IconPickerIcon.create(icon)));\n    };\n\n    get vm() {\n        return {\n            open: this.open,\n            searchQuery: this.searchQuery,\n            icons: this.getIcons().map(icon => IconPickerIconFormatter.formatFontAwesome(icon)),\n            iconsLength: this.getIcons().length || 0\n        };\n    }\n\n    public setListOpenState = (open: boolean) => {\n        this.open = open;\n    };\n\n    public searchIcon = (value: string) => {\n        this.searchQuery = value;\n    };\n\n    public setSelectedIcon = (icon: string) => {\n        this.setListOpenState(false);\n        this.params?.onChange?.(icon);\n    };\n\n    private getIcons = () => {\n        if (this.searchQuery) {\n            return this.icons.getItems(icon => icon.name.includes(this.searchQuery));\n        }\n\n        return this.icons.getItems();\n    };\n}\n\nexport { IconPickerPresenter, type IIconPickerPresenter, type IconPickerParams };\n"],"mappings":"AAAA,SAASA,kBAAkB,QAAQ,MAAM;AAEzC,SAASC,cAAc,EAAEC,uBAAuB,EAAEC,SAAS;AAoB3D,MAAMC,mBAAmB,CAAiC;EAC9CC,IAAI,GAAG,KAAK;EACZC,KAAK,GAAG,IAAIH,SAAS,CAAiB,CAAC;EACvCI,WAAW,GAAG,EAAE;EAChBC,MAAM,GAAsBC,SAAS;EAE7CC,WAAWA,CAAA,EAAG;IACVV,kBAAkB,CAAC,IAAI,CAAC;EAC5B;EAEOW,IAAI,GAAIH,MAAwB,IAAK;IACxC,IAAI,CAACA,MAAM,GAAGA,MAAM;IACpB,IAAI,CAACF,KAAK,CAACM,KAAK,CAAC,CAAC;IAClB,IAAI,CAACN,KAAK,CAACO,QAAQ,CAACL,MAAM,CAACF,KAAK,CAACQ,GAAG,CAACC,IAAI,IAAId,cAAc,CAACe,MAAM,CAACD,IAAI,CAAC,CAAC,CAAC;EAC9E,CAAC;EAED,IAAIE,EAAEA,CAAA,EAAG;IACL,OAAO;MACHZ,IAAI,EAAE,IAAI,CAACA,IAAI;MACfE,WAAW,EAAE,IAAI,CAACA,WAAW;MAC7BD,KAAK,EAAE,IAAI,CAACY,QAAQ,CAAC,CAAC,CAACJ,GAAG,CAACC,IAAI,IAAIb,uBAAuB,CAACiB,iBAAiB,CAACJ,IAAI,CAAC,CAAC;MACnFK,WAAW,EAAE,IAAI,CAACF,QAAQ,CAAC,CAAC,CAACG,MAAM,IAAI;IAC3C,CAAC;EACL;EAEOC,gBAAgB,GAAIjB,IAAa,IAAK;IACzC,IAAI,CAACA,IAAI,GAAGA,IAAI;EACpB,CAAC;EAEMkB,UAAU,GAAIC,KAAa,IAAK;IACnC,IAAI,CAACjB,WAAW,GAAGiB,KAAK;EAC5B,CAAC;EAEMC,eAAe,GAAIV,IAAY,IAAK;IACvC,IAAI,CAACO,gBAAgB,CAAC,KAAK,CAAC;IAC5B,IAAI,CAACd,MAAM,EAAEkB,QAAQ,GAAGX,IAAI,CAAC;EACjC,CAAC;EAEOG,QAAQ,GAAGA,CAAA,KAAM;IACrB,IAAI,IAAI,CAACX,WAAW,EAAE;MAClB,OAAO,IAAI,CAACD,KAAK,CAACqB,QAAQ,CAACZ,IAAI,IAAIA,IAAI,CAACa,IAAI,CAACC,QAAQ,CAAC,IAAI,CAACtB,WAAW,CAAC,CAAC;IAC5E;IAEA,OAAO,IAAI,CAACD,KAAK,CAACqB,QAAQ,CAAC,CAAC;EAChC,CAAC;AACL;AAEA,SAASvB,mBAAmB","ignoreList":[]}

package/IconPicker/primitives/useIconPicker.d.ts

@@ -1,4 +1,4 @@
-import { IconPickerPrimitiveProps } from "./IconPickerPrimitive";
+import type { IconPickerPrimitiveProps } from "./IconPickerPrimitive";
 export declare const useIconPicker: (props: IconPickerPrimitiveProps) => {
     vm: {
         open: boolean;

package/IconPicker/primitives/useIconPicker.js.map

@@ -1 +1 @@
-{"version":3,"names":["useEffect","useMemo","useState","autorun","IconPickerPresenter","useIconPicker","props","params","icons","onChange","presenter","vm","setVm","init","setListOpenState","searchIcon","setSelectedIcon"],"sources":["useIconPicker.ts"],"sourcesContent":["import { useEffect, useMemo, useState } from \"react\";\nimport { autorun } from \"mobx\";\nimport { IconPickerParams, IconPickerPresenter } from \"./presenters\";\nimport { IconPickerPrimitiveProps } from \"./IconPickerPrimitive\";\n\nexport const useIconPicker = (props: IconPickerPrimitiveProps) => {\n    const params: IconPickerParams = useMemo(\n        () => ({\n            icons: props.icons,\n            onChange: props.onChange\n        }),\n        [props.icons, props.onChange]\n    );\n\n    const presenter = useMemo(() => {\n        return new IconPickerPresenter();\n    }, []);\n\n    const [vm, setVm] = useState(presenter.vm);\n\n    useEffect(() => {\n        presenter.init(params);\n    }, [params, presenter]);\n\n    useEffect(() => {\n        return autorun(() => {\n            setVm(presenter.vm);\n        });\n    }, [presenter]);\n\n    return {\n        vm,\n        setListOpenState: presenter.setListOpenState,\n        searchIcon: presenter.searchIcon,\n        setSelectedIcon: presenter.setSelectedIcon\n    };\n};\n"],"mappings":"AAAA,SAASA,SAAS,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,OAAO;AACpD,SAASC,OAAO,QAAQ,MAAM;AAC9B,SAA2BC,mBAAmB;AAG9C,OAAO,MAAMC,aAAa,GAAIC,KAA+B,IAAK;EAC9D,MAAMC,MAAwB,GAAGN,OAAO,CACpC,OAAO;IACHO,KAAK,EAAEF,KAAK,CAACE,KAAK;IAClBC,QAAQ,EAAEH,KAAK,CAACG;EACpB,CAAC,CAAC,EACF,CAACH,KAAK,CAACE,KAAK,EAAEF,KAAK,CAACG,QAAQ,CAChC,CAAC;EAED,MAAMC,SAAS,GAAGT,OAAO,CAAC,MAAM;IAC5B,OAAO,IAAIG,mBAAmB,CAAC,CAAC;EACpC,CAAC,EAAE,EAAE,CAAC;EAEN,MAAM,CAACO,EAAE,EAAEC,KAAK,CAAC,GAAGV,QAAQ,CAACQ,SAAS,CAACC,EAAE,CAAC;EAE1CX,SAAS,CAAC,MAAM;IACZU,SAAS,CAACG,IAAI,CAACN,MAAM,CAAC;EAC1B,CAAC,EAAE,CAACA,MAAM,EAAEG,SAAS,CAAC,CAAC;EAEvBV,SAAS,CAAC,MAAM;IACZ,OAAOG,OAAO,CAAC,MAAM;MACjBS,KAAK,CAACF,SAAS,CAACC,EAAE,CAAC;IACvB,CAAC,CAAC;EACN,CAAC,EAAE,CAACD,SAAS,CAAC,CAAC;EAEf,OAAO;IACHC,EAAE;IACFG,gBAAgB,EAAEJ,SAAS,CAACI,gBAAgB;IAC5CC,UAAU,EAAEL,SAAS,CAACK,UAAU;IAChCC,eAAe,EAAEN,SAAS,CAACM;EAC/B,CAAC;AACL,CAAC","ignoreList":[]}
+{"version":3,"names":["useEffect","useMemo","useState","autorun","IconPickerPresenter","useIconPicker","props","params","icons","onChange","presenter","vm","setVm","init","setListOpenState","searchIcon","setSelectedIcon"],"sources":["useIconPicker.ts"],"sourcesContent":["import { useEffect, useMemo, useState } from \"react\";\nimport { autorun } from \"mobx\";\nimport type { IconPickerParams } from \"./presenters\";\nimport { IconPickerPresenter } from \"./presenters\";\nimport type { IconPickerPrimitiveProps } from \"./IconPickerPrimitive\";\n\nexport const useIconPicker = (props: IconPickerPrimitiveProps) => {\n    const params: IconPickerParams = useMemo(\n        () => ({\n            icons: props.icons,\n            onChange: props.onChange\n        }),\n        [props.icons, props.onChange]\n    );\n\n    const presenter = useMemo(() => {\n        return new IconPickerPresenter();\n    }, []);\n\n    const [vm, setVm] = useState(presenter.vm);\n\n    useEffect(() => {\n        presenter.init(params);\n    }, [params, presenter]);\n\n    useEffect(() => {\n        return autorun(() => {\n            setVm(presenter.vm);\n        });\n    }, [presenter]);\n\n    return {\n        vm,\n        setListOpenState: presenter.setListOpenState,\n        searchIcon: presenter.searchIcon,\n        setSelectedIcon: presenter.setSelectedIcon\n    };\n};\n"],"mappings":"AAAA,SAASA,SAAS,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,OAAO;AACpD,SAASC,OAAO,QAAQ,MAAM;AAE9B,SAASC,mBAAmB;AAG5B,OAAO,MAAMC,aAAa,GAAIC,KAA+B,IAAK;EAC9D,MAAMC,MAAwB,GAAGN,OAAO,CACpC,OAAO;IACHO,KAAK,EAAEF,KAAK,CAACE,KAAK;IAClBC,QAAQ,EAAEH,KAAK,CAACG;EACpB,CAAC,CAAC,EACF,CAACH,KAAK,CAACE,KAAK,EAAEF,KAAK,CAACG,QAAQ,CAChC,CAAC;EAED,MAAMC,SAAS,GAAGT,OAAO,CAAC,MAAM;IAC5B,OAAO,IAAIG,mBAAmB,CAAC,CAAC;EACpC,CAAC,EAAE,EAAE,CAAC;EAEN,MAAM,CAACO,EAAE,EAAEC,KAAK,CAAC,GAAGV,QAAQ,CAACQ,SAAS,CAACC,EAAE,CAAC;EAE1CX,SAAS,CAAC,MAAM;IACZU,SAAS,CAACG,IAAI,CAACN,MAAM,CAAC;EAC1B,CAAC,EAAE,CAACA,MAAM,EAAEG,SAAS,CAAC,CAAC;EAEvBV,SAAS,CAAC,MAAM;IACZ,OAAOG,OAAO,CAAC,MAAM;MACjBS,KAAK,CAACF,SAAS,CAACC,EAAE,CAAC;IACvB,CAAC,CAAC;EACN,CAAC,EAAE,CAACD,SAAS,CAAC,CAAC;EAEf,OAAO;IACHC,EAAE;IACFG,gBAAgB,EAAEJ,SAAS,CAACI,gBAAgB;IAC5CC,UAAU,EAAEL,SAAS,CAACK,UAAU;IAChCC,eAAe,EAAEN,SAAS,CAACM;EAC/B,CAAC;AACL,CAAC","ignoreList":[]}

package/Input/InputPrimitive.d.ts

@@ -1,18 +1,11 @@
 import * as React from "react";
-import { Icon as BaseIcon } from "../Icon";
+import type { Icon as BaseIcon } from "../Icon";
 import { type VariantProps } from "../utils";
-/**
- * Icon
- */
-declare const inputIconVariants: (props?: ({
-    inputSize?: "md" | "lg" | "xl" | null | undefined;
-    position?: "end" | "start" | null | undefined;
-    disabled?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-interface InputIconProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof inputIconVariants> {
+interface InputIconProps extends React.HTMLAttributes<HTMLDivElement> {
     icon: React.ReactElement;
+    inputSize?: VariantProps<typeof inputVariants>["size"];
 }
-declare const InputIcon: ({ icon, disabled, position, inputSize, className }: InputIconProps) => React.JSX.Element;
+declare const InputIcon: ({ icon, inputSize, className }: InputIconProps) => React.JSX.Element;
 /**
  * Input
  *
@@ -23,7 +16,6 @@ declare const InputIcon: ({ icon, disabled, position, inputSize, className }: In
 declare const inputVariants: (props?: ({
     size?: "md" | "lg" | "xl" | null | undefined;
     variant?: "primary" | "secondary" | "ghost" | "ghost-negative" | null | undefined;
-    iconPosition?: "both" | "end" | "start" | null | undefined;
     invalid?: boolean | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 type InputPrimitiveProps<TValue = any> = Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "onChange"> & VariantProps<typeof inputVariants> & {
@@ -64,7 +56,6 @@ type InputPrimitiveProps<TValue = any> = Omit<React.InputHTMLAttributes<HTMLInpu
      */
     autoSelect?: boolean;
 };
-declare const getIconPosition: (startIcon?: InputPrimitiveProps["startIcon"], endIcon?: InputPrimitiveProps["endIcon"]) => "start" | "end" | "both" | undefined;
 declare const InputPrimitive: (({ autoSelect, className, disabled, endIcon, forwardEventOnChange, inputRef, invalid, maxLength, onChange: originalOnChange, onEnter, onEscape, onKeyDown: originalOnKeyDown, onFocus: originalOnFocus, size, startIcon, value, variant, ...props }: InputPrimitiveProps) => React.JSX.Element) & {
     original: ({ autoSelect, className, disabled, endIcon, forwardEventOnChange, inputRef, invalid, maxLength, onChange: originalOnChange, onEnter, onEscape, onKeyDown: originalOnKeyDown, onFocus: originalOnFocus, size, startIcon, value, variant, ...props }: InputPrimitiveProps) => React.JSX.Element;
     originalName: string;
@@ -84,4 +75,4 @@ declare const InputPrimitive: (({ autoSelect, className, disabled, endIcon, forw
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;
 };
-export { InputIcon, InputPrimitive, getIconPosition, inputVariants, inputIconVariants, type InputIconProps, type InputPrimitiveProps };
+export { InputIcon, InputPrimitive, inputVariants, type InputIconProps, type InputPrimitiveProps };

package/Input/InputPrimitive.js

@@ -1,70 +1,12 @@
 import * as React from "react";
 import { cn, cva, makeDecoratable } from "../utils";
-
-/**
- * Icon
- */
-const inputIconVariants = cva("wby-absolute wby-fill-neutral-xstrong", {
-  variants: {
-    // Define dummy variants to be used in combination with `compoundVariants` below.
-    inputSize: {
-      md: "wby-top-sm",
-      lg: "wby-top-sm-extra",
-      xl: "wby-top-md"
-    },
-    position: {
-      start: "",
-      end: ""
-    },
-    disabled: {
-      true: "wby-fill-neutral-disabled"
-    }
-  },
-  defaultVariants: {
-    inputSize: "lg",
-    position: "start"
-  },
-  compoundVariants: [
-  // The icon position is `absolute` and is adjusted horizontally across its parent using left and right.
-  {
-    inputSize: "md",
-    position: "start",
-    class: "wby-left-[calc(theme(spacing.sm-plus)-theme(borderWidth.sm))]"
-  }, {
-    inputSize: "md",
-    position: "end",
-    class: "wby-right-[calc(theme(spacing.sm-plus)-theme(borderWidth.sm))]"
-  }, {
-    inputSize: "lg",
-    position: "start",
-    class: "wby-left-[calc(theme(spacing.sm-plus)-theme(borderWidth.sm))]"
-  }, {
-    inputSize: "lg",
-    position: "end",
-    class: "wby-right-[calc(theme(spacing.sm-plus)-theme(borderWidth.sm))]"
-  }, {
-    inputSize: "xl",
-    position: "start",
-    class: "wby-left-[calc(theme(spacing.md)-theme(borderWidth.sm))]"
-  }, {
-    inputSize: "xl",
-    position: "end",
-    class: "wby-right-[calc(theme(spacing.md)-theme(borderWidth.sm))]"
-  }]
-});
 const InputIcon = ({
   icon,
-  disabled,
-  position,
   inputSize,
   className
 }) => {
   return /*#__PURE__*/React.createElement("div", {
-    className: cn(inputIconVariants({
-      position,
-      disabled,
-      inputSize
-    }), className)
+    className: cn("wby-fill-inherit", className)
   }, /*#__PURE__*/React.cloneElement(icon, {
     ...icon.props,
     size: inputSize === "xl" ? "lg" : "sm" // Map icon size based on the input size.
@@ -78,7 +20,7 @@ const InputIcon = ({
  * because these variants can be used by both input and div elements. The last one is used by `MultiAutocomplete` component,
  * where the `inputVariants` is used to style a div that wraps multiple elements (input, Tags, icons, etc.)
  */
-const inputVariants = cva(["wby-w-full wby-border-sm wby-text-md wby-peer", "focus-visible:wby-outline-none", "disabled:wby-cursor-not-allowed data-[disabled=true]:wby-cursor-not-allowed", "file:wby-bg-transparent file:wby-border-none file:wby-text-sm file:wby-font-semibold"], {
+const inputVariants = cva(["wby-relative wby-flex wby-items-center wby-gap-sm wby-w-full", "wby-border-sm wby-text-md", "has-[:disabled]:wby-cursor-not-allowed data-[disabled=true]:wby-cursor-not-allowed"], {
   variants: {
     size: {
       md: ["wby-rounded-md", "wby-py-[calc(theme(padding.xs-plus)-theme(borderWidth.sm))] wby-px-[calc(theme(padding.sm-extra)-theme(borderWidth.sm))]"],
@@ -86,47 +28,16 @@ const inputVariants = cva(["wby-w-full wby-border-sm wby-text-md wby-peer", "foc
       xl: ["wby-rounded-lg wby-leading-6", "wby-py-[calc(theme(padding.md)-theme(borderWidth.sm))] wby-px-[calc(theme(padding.md)-theme(borderWidth.sm))]"]
     },
     variant: {
-      primary: ["wby-bg-neutral-base wby-border-neutral-muted wby-text-neutral-strong placeholder:wby-text-neutral-dimmed", "hover:wby-border-neutral-strong", "focus:wby-border-neutral-black", "data-[focused=true]:wby-border-neutral-black", "disabled:wby-bg-neutral-disabled disabled:wby-border-neutral-dimmed disabled:wby-text-neutral-disabled disabled:placeholder:wby-text-neutral-disabled", "data-[disabled=true]:wby-bg-neutral-disabled data-[disabled=true]:wby-border-neutral-dimmed data-[disabled=true]:wby-text-neutral-disabled data-[disabled=true]:placeholder:wby-text-neutral-disabled"],
-      secondary: ["wby-bg-neutral-light wby-border-neutral-subtle wby-text-neutral-strong placeholder:wby-text-neutral-dimmed", "hover:wby-bg-neutral-dimmed", "focus:wby-bg-neutral-base focus:wby-border-neutral-black", "data-[focused=true]:wby-bg-neutral-base data-[focused=true]:wby-border-neutral-black", "disabled:wby-bg-neutral-disabled disabled:wby-text-neutral-disabled disabled:placeholder:wby-text-neutral-disabled", "data-[disabled=true]:wby-bg-neutral-disabled data-[disabled=true]:wby-text-neutral-disabled data-[disabled=true]:placeholder:wby-text-neutral-disabled"],
-      ghost: ["wby-bg-transparent wby-border-transparent wby-text-neutral-strong placeholder:wby-text-neutral-dimmed", "hover:wby-bg-neutral-dark/5", "focus:wby-bg-neutral-dark/5", "data-[focused=true]:wby-bg-neutral-dark/5", "disabled:wby-bg-transparent disabled:wby-text-neutral-disabled disabled:placeholder:wby-text-neutral-disabled", "data-[disabled=true]:wby-bg-transparent data-[disabled=true]:wby-text-neutral-disabled data-[disabled=true]:placeholder:wby-text-neutral-disabled"],
-      "ghost-negative": ["wby-bg-transparent wby-border-transparent wby-text-neutral-light/50 placeholder:wby-text-neutral-light/50", "hover:wby-bg-neutral-base/20", "focus:wby-bg-neutral-base focus:wby-text-neutral-primary focus:placeholder:wby-text-neutral-dimmed", "data-[focused=true]:wby-bg-neutral-base data-[focused=true]:wby-bg-neutral-primary data-[focused=true]:placeholder:wby-text-neutral-dimmed", "disabled:wby-bg-transparent disabled:wby-text-neutral-disabled/50 disabled:placeholder:wby-text-neutral-disabled/50", "data-[disabled=true]:wby-bg-transparent data-[disabled=true]:wby-text-neutral-disabled/50 data-[disabled=true]:placeholder:wby-text-neutral-disabled/50"]
-    },
-    iconPosition: {
-      start: "wby-pl-[calc(theme(padding.xl)-theme(borderWidth.sm))]",
-      end: "wby-pr-[calc(theme(padding.xl)-theme(borderWidth.sm))]",
-      both: ["wby-pl-[calc(theme(padding.xl)-theme(borderWidth.sm))]", "wby-pr-[calc(theme(padding.xl)-theme(borderWidth.sm))]"]
+      primary: ["wby-bg-neutral-base wby-border-neutral-muted wby-text-neutral-strong placeholder:wby-text-neutral-dimmed wby-fill-neutral-xstrong", "hover:wby-border-neutral-strong", "focus-within:!wby-border-neutral-black", "data-[focused=true]:!wby-border-neutral-black", "has-[:disabled]:wby-bg-neutral-disabled has-[:disabled]:wby-border-neutral-muted has-[:disabled]:hover:wby-border-neutral-muted has-[:disabled]:wby-text-neutral-disabled has-[:disabled]:placeholder:wby-text-neutral-disabled has-[:disabled]:wby-fill-neutral-disabled", "data-[disabled=true]:wby-bg-neutral-disabled data-[disabled=true]:wby-border-neutral-muted data-[disabled=true]:wby-text-neutral-disabled data-[disabled=true]:placeholder:wby-text-neutral-disabled data-[disabled=true]:wby-fill-neutral-disabled"],
+      secondary: ["wby-bg-neutral-light wby-border-neutral-subtle wby-text-neutral-strong placeholder:wby-text-neutral-dimmed wby-fill-neutral-xstrong", "hover:wby-bg-neutral-dimmed", "focus-within:!wby-bg-neutral-base focus-within:!wby-border-neutral-black", "data-[focused=true]:!wby-bg-neutral-base data-[focused=true]:!wby-border-neutral-black", "has-[:disabled]:wby-bg-neutral-disabled has-[:disabled]:wby-text-neutral-disabled has-[:disabled]:placeholder:wby-text-neutral-disabled has-[:disabled]:wby-fill-neutral-disabled", "data-[disabled=true]:wby-bg-neutral-disabled data-[disabled=true]:wby-text-neutral-disabled data-[disabled=true]:placeholder:wby-text-neutral-disabled data-[disabled=true]:wby-fill-neutral-disabled"],
+      ghost: ["wby-bg-transparent wby-border-transparent wby-text-neutral-strong placeholder:wby-text-neutral-dimmed", "hover:wby-bg-neutral-dark/5", "focus-within:!wby-bg-neutral-dark/5", "data-[focused=true]:!wby-bg-neutral-dark/5", "has-[:disabled]:wby-bg-transparent has-[:disabled]:wby-text-neutral-disabled has-[:disabled]:placeholder:wby-text-neutral-disabled has-[:disabled]:wby-fill-neutral-disabled", "data-[disabled=true]:wby-bg-transparent data-[disabled=true]:wby-text-neutral-disabled data-[disabled=true]:placeholder:wby-text-neutral-disabled data-[disabled=true]:wby-fill-neutral-disabled"],
+      "ghost-negative": ["wby-bg-transparent wby-border-transparent wby-text-neutral-light/50 placeholder:wby-text-neutral-light/50 wby-fill-neutral-base/50", "hover:wby-bg-neutral-base/20", "focus-within:!wby-bg-neutral-base focus-within:!wby-text-neutral-primary focus-within:!placeholder:wby-text-neutral-dimmed focus-within:!wby-fill-neutral-xstrong", "data-[focused=true]:!wby-bg-neutral-base data-[focused=true]:!wby-text-neutral-primary data-[focused=true]:!placeholder:wby-text-neutral-dimmed data-[focused=true]:!wby-fill-neutral-xstrong", "has-[:disabled]:wby-bg-transparent has-[:disabled]:wby-text-neutral-disabled/50 has-[:disabled]:placeholder:wby-text-neutral-disabled/50", "data-[disabled=true]:wby-bg-transparent data-[disabled=true]:wby-text-neutral-disabled/50 data-[disabled=true]:placeholder:wby-text-neutral-disabled/50"]
     },
     invalid: {
       true: ""
     }
   },
   compoundVariants: [
-  // Prevent text overlap with icons, add extra padding for icons.
-  {
-    size: "lg",
-    iconPosition: "start",
-    class: "wby-pl-[calc(theme(padding.xl)-theme(borderWidth.sm))]"
-  }, {
-    size: "lg",
-    iconPosition: "end",
-    class: "wby-pr-[calc(theme(padding.xl)-theme(borderWidth.sm))]"
-  }, {
-    size: "lg",
-    iconPosition: "both",
-    class: ["wby-pl-[calc(theme(padding.xl)-theme(borderWidth.sm))]", "wby-pr-[calc(theme(padding.xl)-theme(borderWidth.sm))]"]
-  }, {
-    size: "xl",
-    iconPosition: "start",
-    class: "wby-pl-[calc(theme(padding.xxl)+theme(padding.xs)-theme(borderWidth.sm))]"
-  }, {
-    size: "xl",
-    iconPosition: "end",
-    class: "wby-pr-[calc(theme(padding.xxl)+theme(padding.xs)-theme(borderWidth.sm))]"
-  }, {
-    size: "xl",
-    iconPosition: "both",
-    class: ["wby-pl-[calc(theme(padding.xxl)+theme(padding.xs)-theme(borderWidth.sm))]", "wby-pr-[calc(theme(padding.xxl)+theme(padding.xs)-theme(borderWidth.sm))]"]
-  },
   // Add specific classNames in case of invalid inputs: note the difference between the ghost and the other variants.
   {
     variant: "primary",
@@ -143,25 +54,13 @@ const inputVariants = cva(["wby-w-full wby-border-sm wby-text-md wby-peer", "foc
   }, {
     variant: "ghost-negative",
     invalid: true,
-    class: "!wby-border-destructive-default !wby-bg-destructive-subtle wby-text-neutral-primary placeholder:wby-text-neutral-dimmed"
+    class: "!wby-border-destructive-default !wby-bg-destructive-subtle wby-text-neutral-primary placeholder:wby-text-neutral-dimmed !wby-fill-neutral-xstrong"
   }],
   defaultVariants: {
     size: "lg",
     variant: "primary"
   }
 });
-const getIconPosition = (startIcon, endIcon) => {
-  if (startIcon && endIcon) {
-    return "both";
-  }
-  if (startIcon) {
-    return "start";
-  }
-  if (endIcon) {
-    return "end";
-  }
-  return;
-};
 const DecoratableInputPrimitive = ({
   autoSelect,
   className,
@@ -182,7 +81,6 @@ const DecoratableInputPrimitive = ({
   variant,
   ...props
 }) => {
-  const iconPosition = getIconPosition(startIcon, endIcon);
   const onChange = React.useCallback(event => {
     if (!originalOnChange) {
       return;
@@ -211,20 +109,16 @@ const DecoratableInputPrimitive = ({
     }
   }, [originalOnFocus, autoSelect]);
   return /*#__PURE__*/React.createElement("div", {
-    className: cn("wby-relative wby-flex wby-items-center wby-w-full", className)
-  }, startIcon && /*#__PURE__*/React.createElement(InputIcon, {
-    disabled: disabled,
-    icon: startIcon,
-    inputSize: size,
-    position: "start"
-  }), /*#__PURE__*/React.createElement("input", Object.assign({}, props, {
-    ref: inputRef,
     className: cn(inputVariants({
       variant,
       size,
-      iconPosition,
       invalid
-    })),
+    }), className)
+  }, startIcon && /*#__PURE__*/React.createElement(InputIcon, {
+    icon: startIcon
+  }), /*#__PURE__*/React.createElement("input", Object.assign({}, props, {
+    ref: inputRef,
+    className: cn(["wby-w-full wby-bg-transparent wby-border-none wby-text-md wby-peer", "focus-visible:wby-outline-none", "disabled:wby-cursor-not-allowed", "file:wby-text-sm file:wby-font-semibold"]),
     disabled: disabled,
     size: maxLength,
     onChange: onChange,
@@ -232,13 +126,10 @@ const DecoratableInputPrimitive = ({
     value: value ?? "",
     onFocus: onFocus
   })), endIcon && /*#__PURE__*/React.createElement(InputIcon, {
-    disabled: disabled,
-    icon: endIcon,
-    inputSize: size,
-    position: "end"
+    icon: endIcon
   }));
 };
 const InputPrimitive = makeDecoratable("InputPrimitive", DecoratableInputPrimitive);
-export { InputIcon, InputPrimitive, getIconPosition, inputVariants, inputIconVariants };
+export { InputIcon, InputPrimitive, inputVariants };
 
 //# sourceMappingURL=InputPrimitive.js.map