@webiny/admin-ui 6.2.0 → 6.3.0-beta.0

package/Accordion/components/AccordionContent.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Collapsible","CollapsiblePrimitive","cva","cn","useAccordionItemProps","accordionContentVariants","variants","withIcon","true","false","withHandle","compoundVariants","className","defaultVariants","AccordionContent","children","props","itemProps","icon","handle","createElement","Content","Object","assign"],"sources":["AccordionContent.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Collapsible as CollapsiblePrimitive } from \"radix-ui\";\nimport { cva, cn } from \"~/utils.js\";\nimport { useAccordionItemProps } from \"./AccordionItem.js\";\n\nconst accordionContentVariants = cva(\n    [\n        \"overflow-hidden text-md pr-xxl\",\n        \"transition-all\",\n        \"data-[state=closed]:animate-collapsible-up\",\n        \"data-[state=open]:animate-collapsible-down\"\n    ],\n    {\n        variants: {\n            withIcon: {\n                true: \"pl-xxl\",\n                false: \"pl-md\"\n            },\n            withHandle: {\n                true: \"pl-5\"\n            }\n        },\n        compoundVariants: [\n            {\n                withIcon: true,\n                withHandle: true,\n                className: \"pl-14\"\n            }\n        ],\n        defaultVariants: {\n            withIcon: false,\n            withHandle: false\n        }\n    }\n);\n\nexport interface AccordionContentProps\n    extends React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Content> {}\n\nexport const AccordionContent = ({ children, className, ...props }: AccordionContentProps) => {\n    const itemProps = useAccordionItemProps();\n    const withIcon = !!itemProps.icon;\n    const withHandle = !!itemProps.handle;\n\n    return (\n        <CollapsiblePrimitive.Content\n            {...props}\n            className={cn(accordionContentVariants({ withHandle, withIcon }), className)}\n        >\n            <div data-accordion={\"content\"} className=\"pt-sm pb-lg\">\n                {children}\n            </div>\n        </CollapsiblePrimitive.Content>\n    );\n};\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,WAAW,IAAIC,oBAAoB,QAAQ,UAAU;AAC9D,SAASC,GAAG,EAAEC,EAAE;AAChB,SAASC,qBAAqB;AAE9B,MAAMC,wBAAwB,GAAGH,GAAG,CAChC,CACI,gCAAgC,EAChC,gBAAgB,EAChB,4CAA4C,EAC5C,4CAA4C,CAC/C,EACD;EACII,QAAQ,EAAE;IACNC,QAAQ,EAAE;MACNC,IAAI,EAAE,QAAQ;MACdC,KAAK,EAAE;IACX,CAAC;IACDC,UAAU,EAAE;MACRF,IAAI,EAAE;IACV;EACJ,CAAC;EACDG,gBAAgB,EAAE,CACd;IACIJ,QAAQ,EAAE,IAAI;IACdG,UAAU,EAAE,IAAI;IAChBE,SAAS,EAAE;EACf,CAAC,CACJ;EACDC,eAAe,EAAE;IACbN,QAAQ,EAAE,KAAK;IACfG,UAAU,EAAE;EAChB;AACJ,CACJ,CAAC;AAKD,OAAO,MAAMI,gBAAgB,GAAGA,CAAC;EAAEC,QAAQ;EAAEH,SAAS;EAAE,GAAGI;AAA6B,CAAC,KAAK;EAC1F,MAAMC,SAAS,GAAGb,qBAAqB,CAAC,CAAC;EACzC,MAAMG,QAAQ,GAAG,CAAC,CAACU,SAAS,CAACC,IAAI;EACjC,MAAMR,UAAU,GAAG,CAAC,CAACO,SAAS,CAACE,MAAM;EAErC,oBACIpB,KAAA,CAAAqB,aAAA,CAACnB,oBAAoB,CAACoB,OAAO,EAAAC,MAAA,CAAAC,MAAA,KACrBP,KAAK;IACTJ,SAAS,EAAET,EAAE,CAACE,wBAAwB,CAAC;MAAEK,UAAU;MAAEH;IAAS,CAAC,CAAC,EAAEK,SAAS;EAAE,iBAE7Eb,KAAA,CAAAqB,aAAA;IAAK,kBAAgB,SAAU;IAACR,SAAS,EAAC;EAAa,GAClDG,QACA,CACqB,CAAC;AAEvC,CAAC","ignoreList":[]}
+{"version":3,"names":["React","Collapsible","CollapsiblePrimitive","cva","cn","useAccordionItemProps","accordionContentVariants","variants","withIcon","true","false","withHandle","compoundVariants","className","defaultVariants","AccordionContent","children","props","itemProps","icon","handle","createElement","Content","Object","assign"],"sources":["AccordionContent.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Collapsible as CollapsiblePrimitive } from \"radix-ui\";\nimport { cva, cn } from \"~/utils.js\";\nimport { useAccordionItemProps } from \"./AccordionItem.js\";\n\nconst accordionContentVariants = cva(\n    [\n        \"overflow-hidden text-md pr-xxl\",\n        \"transition-all\",\n        \"data-[state=closed]:animate-collapsible-up\",\n        \"data-[state=open]:animate-collapsible-down\"\n    ],\n    {\n        variants: {\n            withIcon: {\n                true: \"pl-xxl\",\n                false: \"pl-md\"\n            },\n            withHandle: {\n                true: \"pl-5\"\n            }\n        },\n        compoundVariants: [\n            {\n                withIcon: true,\n                withHandle: true,\n                className: \"pl-14\"\n            }\n        ],\n        defaultVariants: {\n            withIcon: false,\n            withHandle: false\n        }\n    }\n);\n\nexport interface AccordionContentProps extends React.ComponentPropsWithoutRef<\n    typeof CollapsiblePrimitive.Content\n> {}\n\nexport const AccordionContent = ({ children, className, ...props }: AccordionContentProps) => {\n    const itemProps = useAccordionItemProps();\n    const withIcon = !!itemProps.icon;\n    const withHandle = !!itemProps.handle;\n\n    return (\n        <CollapsiblePrimitive.Content\n            {...props}\n            className={cn(accordionContentVariants({ withHandle, withIcon }), className)}\n        >\n            <div data-accordion={\"content\"} className=\"pt-sm pb-lg\">\n                {children}\n            </div>\n        </CollapsiblePrimitive.Content>\n    );\n};\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,WAAW,IAAIC,oBAAoB,QAAQ,UAAU;AAC9D,SAASC,GAAG,EAAEC,EAAE;AAChB,SAASC,qBAAqB;AAE9B,MAAMC,wBAAwB,GAAGH,GAAG,CAChC,CACI,gCAAgC,EAChC,gBAAgB,EAChB,4CAA4C,EAC5C,4CAA4C,CAC/C,EACD;EACII,QAAQ,EAAE;IACNC,QAAQ,EAAE;MACNC,IAAI,EAAE,QAAQ;MACdC,KAAK,EAAE;IACX,CAAC;IACDC,UAAU,EAAE;MACRF,IAAI,EAAE;IACV;EACJ,CAAC;EACDG,gBAAgB,EAAE,CACd;IACIJ,QAAQ,EAAE,IAAI;IACdG,UAAU,EAAE,IAAI;IAChBE,SAAS,EAAE;EACf,CAAC,CACJ;EACDC,eAAe,EAAE;IACbN,QAAQ,EAAE,KAAK;IACfG,UAAU,EAAE;EAChB;AACJ,CACJ,CAAC;AAMD,OAAO,MAAMI,gBAAgB,GAAGA,CAAC;EAAEC,QAAQ;EAAEH,SAAS;EAAE,GAAGI;AAA6B,CAAC,KAAK;EAC1F,MAAMC,SAAS,GAAGb,qBAAqB,CAAC,CAAC;EACzC,MAAMG,QAAQ,GAAG,CAAC,CAACU,SAAS,CAACC,IAAI;EACjC,MAAMR,UAAU,GAAG,CAAC,CAACO,SAAS,CAACE,MAAM;EAErC,oBACIpB,KAAA,CAAAqB,aAAA,CAACnB,oBAAoB,CAACoB,OAAO,EAAAC,MAAA,CAAAC,MAAA,KACrBP,KAAK;IACTJ,SAAS,EAAET,EAAE,CAACE,wBAAwB,CAAC;MAAEK,UAAU;MAAEH;IAAS,CAAC,CAAC,EAAEK,SAAS;EAAE,iBAE7Eb,KAAA,CAAAqB,aAAA;IAAK,kBAAgB,SAAU;IAACR,SAAS,EAAC;EAAa,GAClDG,QACA,CACqB,CAAC;AAEvC,CAAC","ignoreList":[]}

package/Alert/Alert.d.ts

@@ -4,7 +4,7 @@ import { type ButtonProps } from "../Button/index.js";
 declare const alertVariants: (props?: ({
     type?: "info" | "success" | "warning" | "danger" | null | undefined;
     variant?: "strong" | "subtle" | null | undefined;
-} & import("class-variance-authority/dist/types.js").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface AlertProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof alertVariants> {
     showCloseButton?: boolean;
     icon?: React.ReactElement | null;

package/Alert/Alert.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useMemo","cn","cva","makeDecoratable","withStaticProps","Button","AlertIcon","AlertSwatchBox","AlertPropsProvider","useAlertProps","AlertCloseButton","defaultVariants","useAdminUi","alertVariants","variants","type","info","success","warning","danger","variant","strong","subtle","compoundVariants","className","AlertActionBase","props","alertVariant","createElement","Object","assign","text","size","AlertAction","AlertBase","swatchColor","actions","children","rootRestProps","compileMarkdown","backgroundColor","role","style","Alert","Action"],"sources":["Alert.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { useMemo } from \"react\";\nimport { cn, cva, makeDecoratable, type VariantProps, withStaticProps } from \"~/utils.js\";\nimport { Button, type ButtonProps } from \"~/Button/index.js\";\nimport { AlertIcon } from \"./AlertIcon.js\";\nimport { AlertSwatchBox } from \"./AlertSwatchBox.js\";\nimport { AlertPropsProvider, useAlertProps } from \"./AlertPropsProvider.js\";\nimport { AlertCloseButton } from \"./AlertCloseButton.js\";\nimport { defaultVariants } from \"./constants.js\";\nimport { useAdminUi } from \"~/AdminUiProvider/index.js\";\n\nconst alertVariants = cva(\n    \"flex gap-sm-plus items-start w-full rounded-lg text-md py-sm-extra pl-md pr-sm-plus [&_a]:font-semibold [&_a]:underline\",\n    {\n        variants: {\n            type: { info: \"\", success: \"\", warning: \"\", danger: \"\" },\n            variant: { strong: \"\", subtle: \"\" }\n        },\n        defaultVariants,\n        compoundVariants: [\n            {\n                type: \"info\",\n                variant: \"strong\",\n                className: \"bg-neutral-dark text-neutral-light [&_a]:text-neutral-light!\"\n            },\n            {\n                type: \"info\",\n                variant: \"subtle\",\n                className: \"bg-neutral-dimmed text-neutral-primary [&_a]:text-neutral-primary!\"\n            },\n            {\n                type: \"success\",\n                variant: \"strong\",\n                className: \"bg-secondary text-neutral-light [&_a]:text-neutral-light!\"\n            },\n            {\n                type: \"success\",\n                variant: \"subtle\",\n                className: \"bg-success-subtle text-neutral-primary [&_a]:text-neutral-primary!\"\n            },\n            {\n                type: \"warning\",\n                variant: \"strong\",\n                className: \"bg-warning text-neutral-primary [&_a]:text-neutral-primary!\"\n            },\n            {\n                type: \"warning\",\n                variant: \"subtle\",\n                className: \"bg-warning-subtle text-neutral-primary [&_a]:text-neutral-primary!\"\n            },\n            {\n                type: \"danger\",\n                variant: \"strong\",\n                className: \"bg-destructive text-neutral-light [&_a]:text-neutral-light!\"\n            },\n            {\n                type: \"danger\",\n                variant: \"subtle\",\n                className: \"bg-destructive-subtle text-neutral-primary [&_a]:text-neutral-primary!\"\n            }\n        ]\n    }\n);\n\nexport interface AlertProps\n    extends React.HTMLAttributes<HTMLDivElement>,\n        VariantProps<typeof alertVariants> {\n    showCloseButton?: boolean;\n    icon?: React.ReactElement | null;\n    onClose?: () => void;\n    actions?: React.ReactElement<typeof AlertAction>;\n    swatchColor?: string;\n    swatchColorIcon?: boolean;\n}\n\nconst AlertActionBase = (props: ButtonProps) => {\n    const { variant: alertVariant } = useAlertProps();\n    return (\n        <Button\n            text={\"Button\"}\n            variant={alertVariant === \"strong\" ? \"secondary\" : \"tertiary\"}\n            size={\"sm\"}\n            {...props}\n        />\n    );\n};\n\nconst AlertAction = makeDecoratable(\"AlertAction\", AlertActionBase);\n\nconst AlertBase = (props: AlertProps) => {\n    const { className, type, variant, swatchColor, actions, children, ...rootRestProps } = props;\n    const { compileMarkdown } = useAdminUi();\n\n    const backgroundColor = useMemo(() => {\n        if (!swatchColor) {\n            return;\n        }\n\n        return swatchColor + \"66\";\n    }, [swatchColor]);\n\n    return (\n        <AlertPropsProvider props={props}>\n            <div\n                role=\"alert\"\n                className={cn(alertVariants({ type, variant }), className)}\n                style={{ backgroundColor }}\n                {...rootRestProps}\n            >\n                <AlertSwatchBox />\n                <AlertIcon />\n                <div className={\"grow py-xxs\"}>{compileMarkdown(children)}</div>\n                {actions && <div className={\"flex gap-sm\"}>{actions}</div>}\n                <AlertCloseButton />\n            </div>\n        </AlertPropsProvider>\n    );\n};\n\nconst Alert = withStaticProps(makeDecoratable(\"AlertBase\", AlertBase), {\n    Action: AlertAction\n});\n\nexport { Alert };\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,OAAO,QAAQ,OAAO;AAC/B,SAASC,EAAE,EAAEC,GAAG,EAAEC,eAAe,EAAqBC,eAAe;AACrE,SAASC,MAAM;AACf,SAASC,SAAS;AAClB,SAASC,cAAc;AACvB,SAASC,kBAAkB,EAAEC,aAAa;AAC1C,SAASC,gBAAgB;AACzB,SAASC,eAAe;AACxB,SAASC,UAAU;AAEnB,MAAMC,aAAa,GAAGX,GAAG,CACrB,yHAAyH,EACzH;EACIY,QAAQ,EAAE;IACNC,IAAI,EAAE;MAAEC,IAAI,EAAE,EAAE;MAAEC,OAAO,EAAE,EAAE;MAAEC,OAAO,EAAE,EAAE;MAAEC,MAAM,EAAE;IAAG,CAAC;IACxDC,OAAO,EAAE;MAAEC,MAAM,EAAE,EAAE;MAAEC,MAAM,EAAE;IAAG;EACtC,CAAC;EACDX,eAAe;EACfY,gBAAgB,EAAE,CACd;IACIR,IAAI,EAAE,MAAM;IACZK,OAAO,EAAE,QAAQ;IACjBI,SAAS,EAAE;EACf,CAAC,EACD;IACIT,IAAI,EAAE,MAAM;IACZK,OAAO,EAAE,QAAQ;IACjBI,SAAS,EAAE;EACf,CAAC,EACD;IACIT,IAAI,EAAE,SAAS;IACfK,OAAO,EAAE,QAAQ;IACjBI,SAAS,EAAE;EACf,CAAC,EACD;IACIT,IAAI,EAAE,SAAS;IACfK,OAAO,EAAE,QAAQ;IACjBI,SAAS,EAAE;EACf,CAAC,EACD;IACIT,IAAI,EAAE,SAAS;IACfK,OAAO,EAAE,QAAQ;IACjBI,SAAS,EAAE;EACf,CAAC,EACD;IACIT,IAAI,EAAE,SAAS;IACfK,OAAO,EAAE,QAAQ;IACjBI,SAAS,EAAE;EACf,CAAC,EACD;IACIT,IAAI,EAAE,QAAQ;IACdK,OAAO,EAAE,QAAQ;IACjBI,SAAS,EAAE;EACf,CAAC,EACD;IACIT,IAAI,EAAE,QAAQ;IACdK,OAAO,EAAE,QAAQ;IACjBI,SAAS,EAAE;EACf,CAAC;AAET,CACJ,CAAC;AAaD,MAAMC,eAAe,GAAIC,KAAkB,IAAK;EAC5C,MAAM;IAAEN,OAAO,EAAEO;EAAa,CAAC,GAAGlB,aAAa,CAAC,CAAC;EACjD,oBACIV,KAAA,CAAA6B,aAAA,CAACvB,MAAM,EAAAwB,MAAA,CAAAC,MAAA;IACHC,IAAI,EAAE,QAAS;IACfX,OAAO,EAAEO,YAAY,KAAK,QAAQ,GAAG,WAAW,GAAG,UAAW;IAC9DK,IAAI,EAAE;EAAK,GACPN,KAAK,CACZ,CAAC;AAEV,CAAC;AAED,MAAMO,WAAW,GAAG9B,eAAe,CAAC,aAAa,EAAEsB,eAAe,CAAC;AAEnE,MAAMS,SAAS,GAAIR,KAAiB,IAAK;EACrC,MAAM;IAAEF,SAAS;IAAET,IAAI;IAAEK,OAAO;IAAEe,WAAW;IAAEC,OAAO;IAAEC,QAAQ;IAAE,GAAGC;EAAc,CAAC,GAAGZ,KAAK;EAC5F,MAAM;IAAEa;EAAgB,CAAC,GAAG3B,UAAU,CAAC,CAAC;EAExC,MAAM4B,eAAe,GAAGxC,OAAO,CAAC,MAAM;IAClC,IAAI,CAACmC,WAAW,EAAE;MACd;IACJ;IAEA,OAAOA,WAAW,GAAG,IAAI;EAC7B,CAAC,EAAE,CAACA,WAAW,CAAC,CAAC;EAEjB,oBACIpC,KAAA,CAAA6B,aAAA,CAACpB,kBAAkB;IAACkB,KAAK,EAAEA;EAAM,gBAC7B3B,KAAA,CAAA6B,aAAA,QAAAC,MAAA,CAAAC,MAAA;IACIW,IAAI,EAAC,OAAO;IACZjB,SAAS,EAAEvB,EAAE,CAACY,aAAa,CAAC;MAAEE,IAAI;MAAEK;IAAQ,CAAC,CAAC,EAAEI,SAAS,CAAE;IAC3DkB,KAAK,EAAE;MAAEF;IAAgB;EAAE,GACvBF,aAAa,gBAEjBvC,KAAA,CAAA6B,aAAA,CAACrB,cAAc,MAAE,CAAC,eAClBR,KAAA,CAAA6B,aAAA,CAACtB,SAAS,MAAE,CAAC,eACbP,KAAA,CAAA6B,aAAA;IAAKJ,SAAS,EAAE;EAAc,GAAEe,eAAe,CAACF,QAAQ,CAAO,CAAC,EAC/DD,OAAO,iBAAIrC,KAAA,CAAA6B,aAAA;IAAKJ,SAAS,EAAE;EAAc,GAAEY,OAAa,CAAC,eAC1DrC,KAAA,CAAA6B,aAAA,CAAClB,gBAAgB,MAAE,CAClB,CACW,CAAC;AAE7B,CAAC;AAED,MAAMiC,KAAK,GAAGvC,eAAe,CAACD,eAAe,CAAC,WAAW,EAAE+B,SAAS,CAAC,EAAE;EACnEU,MAAM,EAAEX;AACZ,CAAC,CAAC;AAEF,SAASU,KAAK","ignoreList":[]}
+{"version":3,"names":["React","useMemo","cn","cva","makeDecoratable","withStaticProps","Button","AlertIcon","AlertSwatchBox","AlertPropsProvider","useAlertProps","AlertCloseButton","defaultVariants","useAdminUi","alertVariants","variants","type","info","success","warning","danger","variant","strong","subtle","compoundVariants","className","AlertActionBase","props","alertVariant","createElement","Object","assign","text","size","AlertAction","AlertBase","swatchColor","actions","children","rootRestProps","compileMarkdown","backgroundColor","role","style","Alert","Action"],"sources":["Alert.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { useMemo } from \"react\";\nimport { cn, cva, makeDecoratable, type VariantProps, withStaticProps } from \"~/utils.js\";\nimport { Button, type ButtonProps } from \"~/Button/index.js\";\nimport { AlertIcon } from \"./AlertIcon.js\";\nimport { AlertSwatchBox } from \"./AlertSwatchBox.js\";\nimport { AlertPropsProvider, useAlertProps } from \"./AlertPropsProvider.js\";\nimport { AlertCloseButton } from \"./AlertCloseButton.js\";\nimport { defaultVariants } from \"./constants.js\";\nimport { useAdminUi } from \"~/AdminUiProvider/index.js\";\n\nconst alertVariants = cva(\n    \"flex gap-sm-plus items-start w-full rounded-lg text-md py-sm-extra pl-md pr-sm-plus [&_a]:font-semibold [&_a]:underline\",\n    {\n        variants: {\n            type: { info: \"\", success: \"\", warning: \"\", danger: \"\" },\n            variant: { strong: \"\", subtle: \"\" }\n        },\n        defaultVariants,\n        compoundVariants: [\n            {\n                type: \"info\",\n                variant: \"strong\",\n                className: \"bg-neutral-dark text-neutral-light [&_a]:text-neutral-light!\"\n            },\n            {\n                type: \"info\",\n                variant: \"subtle\",\n                className: \"bg-neutral-dimmed text-neutral-primary [&_a]:text-neutral-primary!\"\n            },\n            {\n                type: \"success\",\n                variant: \"strong\",\n                className: \"bg-secondary text-neutral-light [&_a]:text-neutral-light!\"\n            },\n            {\n                type: \"success\",\n                variant: \"subtle\",\n                className: \"bg-success-subtle text-neutral-primary [&_a]:text-neutral-primary!\"\n            },\n            {\n                type: \"warning\",\n                variant: \"strong\",\n                className: \"bg-warning text-neutral-primary [&_a]:text-neutral-primary!\"\n            },\n            {\n                type: \"warning\",\n                variant: \"subtle\",\n                className: \"bg-warning-subtle text-neutral-primary [&_a]:text-neutral-primary!\"\n            },\n            {\n                type: \"danger\",\n                variant: \"strong\",\n                className: \"bg-destructive text-neutral-light [&_a]:text-neutral-light!\"\n            },\n            {\n                type: \"danger\",\n                variant: \"subtle\",\n                className: \"bg-destructive-subtle text-neutral-primary [&_a]:text-neutral-primary!\"\n            }\n        ]\n    }\n);\n\nexport interface AlertProps\n    extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof alertVariants> {\n    showCloseButton?: boolean;\n    icon?: React.ReactElement | null;\n    onClose?: () => void;\n    actions?: React.ReactElement<typeof AlertAction>;\n    swatchColor?: string;\n    swatchColorIcon?: boolean;\n}\n\nconst AlertActionBase = (props: ButtonProps) => {\n    const { variant: alertVariant } = useAlertProps();\n    return (\n        <Button\n            text={\"Button\"}\n            variant={alertVariant === \"strong\" ? \"secondary\" : \"tertiary\"}\n            size={\"sm\"}\n            {...props}\n        />\n    );\n};\n\nconst AlertAction = makeDecoratable(\"AlertAction\", AlertActionBase);\n\nconst AlertBase = (props: AlertProps) => {\n    const { className, type, variant, swatchColor, actions, children, ...rootRestProps } = props;\n    const { compileMarkdown } = useAdminUi();\n\n    const backgroundColor = useMemo(() => {\n        if (!swatchColor) {\n            return;\n        }\n\n        return swatchColor + \"66\";\n    }, [swatchColor]);\n\n    return (\n        <AlertPropsProvider props={props}>\n            <div\n                role=\"alert\"\n                className={cn(alertVariants({ type, variant }), className)}\n                style={{ backgroundColor }}\n                {...rootRestProps}\n            >\n                <AlertSwatchBox />\n                <AlertIcon />\n                <div className={\"grow py-xxs\"}>{compileMarkdown(children)}</div>\n                {actions && <div className={\"flex gap-sm\"}>{actions}</div>}\n                <AlertCloseButton />\n            </div>\n        </AlertPropsProvider>\n    );\n};\n\nconst Alert = withStaticProps(makeDecoratable(\"AlertBase\", AlertBase), {\n    Action: AlertAction\n});\n\nexport { Alert };\n"],"mappings":"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","ignoreList":[]}

package/Alert/Alert.mdx

@@ -1,6 +1,6 @@
-import { Canvas, Meta, Controls } from '@storybook/addon-docs/blocks';
+import { Canvas, Meta, Controls } from "@storybook/addon-docs/blocks";
 
-import * as AlertStories from './Alert.stories';
+import * as AlertStories from "./Alert.stories";
 
 <Meta of={AlertStories} />
 
@@ -18,33 +18,33 @@ import React from "react";
 import { Alert } from "@webiny/admin-ui";
 
 const AlertExample = () => {
-    return (
-        <Alert type={"info"}>
-            <>
-                This type of notification is suitable for general usage where there’s no need for
-                accent. And <a href={"#"}>this thing here</a> is a short link.
-            </>
-        </Alert>
-    );
-};
+return (
+
+<Alert type={"info"}>
+  <>
+    This type of notification is suitable for general usage where there’s no need for accent. And{" "}
+    <a href={"#"}>this thing here</a> is a short link.
+  </>
+</Alert>
+); };
 
 export default AlertExample;
 
 ` } }
-        additionalActions={[
-            {
-                title: 'Open in GitHub',
-                onClick: () => {
-                    window.open(
-                        'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/Alert/Alert.tsx',
-                        '_blank'
-                    );
-                },
-            }
-        ]}
+additionalActions={[
+{
+title: 'Open in GitHub',
+onClick: () => {
+window.open(
+'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/Alert/Alert.tsx',
+'_blank'
+);
+},
+}
+]}
 />
 
-<Controls of={AlertStories.Documentation} exclude={"children"}/>
+<Controls of={AlertStories.Documentation} exclude={"children"} />
 
 ```tsx
 import React from "react";
@@ -52,14 +52,14 @@ import React from "react";
 import { Alert } from "@webiny/admin-ui";
 
 const AlertExample = () => {
-    return (
-        <Alert type={"info"}>
-            <>
-                This type of notification is suitable for general usage where there’s no need for
-                accent. And <a href={"#"}>this thing here</a> is a short link.
-            </>
-        </Alert>
-    );
+  return (
+    <Alert type={"info"}>
+      <>
+        This type of notification is suitable for general usage where there’s no need for accent.
+        And <a href={"#"}>this thing here</a> is a short link.
+      </>
+    </Alert>
+  );
 };
 
 export default AlertExample;
@@ -72,121 +72,118 @@ export default AlertExample;
 <Canvas of={AlertStories.Info} source={ { code: `
 // Code for an Info banner
 
-import { Alert } from '@webiny/admin-ui';
+import { Alert } from "@webiny/admin-ui";
 
 <Alert type={"info"}>
-    <>
-        This type of notification is suitable for general usage where there’s no need for
-        accent. And <a href={"#"}>this thing here</a> is a short link.
-    </>
+  <>
+    This type of notification is suitable for general usage where there’s no need for accent. And{" "}
+    <a href={"#"}>this thing here</a> is a short link.
+  </>
 </Alert>
-` } }
-/>
+` } } />
 
 ### Success
 
 <Canvas of={AlertStories.Success} source={ { code: `
 // Code for a Success banner
 
-import { Alert } from '@webiny/admin-ui';
+import { Alert } from "@webiny/admin-ui";
 
 <Alert type={"success"}>
-    <>
-        This is a success alert, used when something occurred successfully. And{" "}
-        <a href={"#"}>this thing here</a> is a short link.
-    </>
+  <>
+    This is a success alert, used when something occurred successfully. And{" "}
+    <a href={"#"}>this thing here</a> is a short link.
+  </>
 </Alert>
-` } }
-/>
-
+` } } />
 
 ### Warning
 
 <Canvas of={AlertStories.Warning} source={ { code: `
 // Code for a Warning banner
 
-import { Alert } from '@webiny/admin-ui';
+import { Alert } from "@webiny/admin-ui";
 
 <Alert type={"warning"}>
-    <>
-        This is a warning alert, used when something of strong relevance needs to be
-        communicated. And <a href={"#"}>this thing here</a> is a short link.
-    </>
+  <>
+    This is a warning alert, used when something of strong relevance needs to be communicated. And{" "}
+    <a href={"#"}>this thing here</a> is a short link.
+  </>
 </Alert>
-` } }
-/>
+` } } />
 
 ### Danger
 
 <Canvas of={AlertStories.Danger} source={ { code: `
 // Code for a Danger banner
 
-import { Alert } from '@webiny/admin-ui';
+import { Alert } from "@webiny/admin-ui";
 
 <Alert type={"danger"}>
-    <>
-        This is a danger alert, used when something critical needs to be communicated. And{" "}
-        <a href={"#"}>this thing here</a> is a short link.
-    </>
+  <>
+    This is a danger alert, used when something critical needs to be communicated. And{" "}
+    <a href={"#"}>this thing here</a> is a short link.
+  </>
 </Alert>
-` } }
-/>
+` } } />
 
 ### With Close Button
 
 <Canvas of={AlertStories.WithCloseButton} source={ { code: `
 // Code for a banner with a Close Button and an onClose action
 
-import { Alert } from '@webiny/admin-ui';
+import { Alert } from "@webiny/admin-ui";
 
 <Alert type={"info"} showCloseButton={true} onClose={() => alert("Close button clicked.")}>
-    <>
-        An alert that can be closed.
-    </>
+  <>An alert that can be closed.</>
 </Alert>
-` } }
-/>
+` } } />
 
 ### With Action
 
 <Canvas of={AlertStories.WithAction} source={ { code: `
 // Code for a banner with a close button and a action button
 
-import { Alert } from '@webiny/admin-ui';
+import { Alert } from "@webiny/admin-ui";
 
-<Alert type={"info"} showCloseButton={true} onClose={() => alert("Close button clicked.")}
-        actions={(
-            <Alert.Action text={"Button"} onClick={() => alert("Custom action button clicked.")} />
-        )}>
-    <>
-        An alert that can be closed and also has action button.
-    </>
+<Alert
+  type={"info"}
+  showCloseButton={true}
+  onClose={() => alert("Close button clicked.")}
+  actions={<Alert.Action text={"Button"} onClick={() => alert("Custom action button clicked.")} />}
+>
+  <>An alert that can be closed and also has action button.</>
 </Alert>
-` } }
-/>
+` } } />
 
 ## Anatomy
 
 ### Options
-<img src="/images/storybook/alert/options.png" alt="Options"/>
+
+<img src="/images/storybook/alert/options.png" alt="Options" />
 
 ### Style
-<img src="/images/storybook/alert/style.png" alt="Style"/>
+
+<img src="/images/storybook/alert/style.png" alt="Style" />
 
 ### Type
-<img src="/images/storybook/alert/type.png" alt="Type"/>
+
+<img src="/images/storybook/alert/type.png" alt="Type" />
 
 ### Examples
-<img src="/images/storybook/alert/examples.png" alt="Examples"/>
+
+<img src="/images/storybook/alert/examples.png" alt="Examples" />
 
 ## Usage
 
 ### Full width banner
-<img src="/images/storybook/alert/full-width-banner.png" alt="Full width banner"/>
 
+<img src="/images/storybook/alert/full-width-banner.png" alt="Full width banner" />
 
 ### Floating element
-<img src="/images/storybook/alert/floating-element.png" alt="Floating element"/>
+
+<img src="/images/storybook/alert/floating-element.png" alt="Floating element" />
 
 ### Nested element
-<img src="/images/storybook/alert/nested-element.png" alt="Nested element"/>
+
+<img src="/images/storybook/alert/nested-element.png" alt="Nested element" />

package/AutoComplete/AutoComplete.mdx

@@ -1,6 +1,6 @@
-import { Canvas, Meta, Controls } from '@storybook/addon-docs/blocks';
+import { Canvas, Meta, Controls } from "@storybook/addon-docs/blocks";
 
-import * as AutoCompleteStories from './AutoComplete.stories';
+import * as AutoCompleteStories from "./AutoComplete.stories";
 
 <Meta of={AutoCompleteStories} />
 
@@ -15,8 +15,8 @@ import React, { useState } from "react";
 import { AutoComplete } from "@webiny/admin-ui";
 
 const TimezoneSelector = () => {
-    const [value, setValue] = useState("");
-    const [validation, setValidation] = useState({ isValid: true, message: "" });
+const [value, setValue] = useState("");
+const [validation, setValidation] = useState({ isValid: true, message: "" });
 
     const handleValueChange = (newValue: string) => {
         setValue(newValue);
@@ -47,63 +47,64 @@ const TimezoneSelector = () => {
             validation={validation}
         />
     );
+
 };
 
 export default TimezoneSelector;
 
 ` } }
-        additionalActions={[
-            {
-                title: 'Open in GitHub',
-                onClick: () => {
-                    window.open(
-                        'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/AutoComplete/AutoComplete.tsx',
-                        '_blank'
-                    );
-                },
-            }
-        ]}
+additionalActions={[
+{
+title: 'Open in GitHub',
+onClick: () => {
+window.open(
+'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/AutoComplete/AutoComplete.tsx',
+'_blank'
+);
+},
+}
+]}
 />
 
-<Controls of={AutoCompleteStories.Documentation}/>
+<Controls of={AutoCompleteStories.Documentation} />
 
 ```tsx
 import React, { useState } from "react";
 import { AutoComplete } from "@webiny/admin-ui";
 
 const TimezoneSelector = () => {
-    const [value, setValue] = useState("");
-    const [validation, setValidation] = useState({ isValid: true, message: "" });
-
-    const handleValueChange = (newValue: string) => {
-        setValue(newValue);
-
-        if (!newValue) {
-            setValidation({ isValid: false, message: "This field is required" });
-        } else {
-            setValidation({ isValid: true, message: "" });
-        }
-    };
-
-    const timezones = [
-        "Eastern Standard Time (EST)",
-        "Central Standard Time (CST)",
-        "Pacific Standard Time (PST)",
-        "Greenwich Mean Time (GMT)"
-    ];
-
-    return (
-        <AutoComplete
-            label="Time Zone"
-            required={true}
-            description="Select your timezone from the list"
-            placeholder="Select timezone..."
-            options={timezones}
-            value={value}
-            onValueChange={handleValueChange}
-            validation={validation}
-        />
-    );
+  const [value, setValue] = useState("");
+  const [validation, setValidation] = useState({ isValid: true, message: "" });
+
+  const handleValueChange = (newValue: string) => {
+    setValue(newValue);
+
+    if (!newValue) {
+      setValidation({ isValid: false, message: "This field is required" });
+    } else {
+      setValidation({ isValid: true, message: "" });
+    }
+  };
+
+  const timezones = [
+    "Eastern Standard Time (EST)",
+    "Central Standard Time (CST)",
+    "Pacific Standard Time (PST)",
+    "Greenwich Mean Time (GMT)"
+  ];
+
+  return (
+    <AutoComplete
+      label="Time Zone"
+      required={true}
+      description="Select your timezone from the list"
+      placeholder="Select timezone..."
+      options={timezones}
+      value={value}
+      onValueChange={handleValueChange}
+      validation={validation}
+    />
+  );
 };
 
 export default TimezoneSelector;
@@ -112,24 +113,31 @@ export default TimezoneSelector;
 ## Anatomy
 
 ### Input Anatomy
-<img src="/images/storybook/autocomplete/input-anatomy.png" alt="Input Anatomy"/>
+
+<img src="/images/storybook/autocomplete/input-anatomy.png" alt="Input Anatomy" />
 
 ### Style
-<img src="/images/storybook/autocomplete/style.png" alt="Style"/>
+
+<img src="/images/storybook/autocomplete/style.png" alt="Style" />
 
 ### Option
-<img src="/images/storybook/autocomplete/option.png" alt="Option"/>
+
+<img src="/images/storybook/autocomplete/option.png" alt="Option" />
 
 ### States and Styles
-<img src="/images/storybook/autocomplete/states-and-styles.png" alt="States and Styles"/>
+
+<img src="/images/storybook/autocomplete/states-and-styles.png" alt="States and Styles" />
 
 ### Label Anatomy
-<img src="/images/storybook/autocomplete/label-anatomy.png" alt="Label Anatomy"/>
+
+<img src="/images/storybook/autocomplete/label-anatomy.png" alt="Label Anatomy" />
 
 ### Label Properties
-<img src="/images/storybook/autocomplete/label-properties.png" alt="Label Properties"/>
+
+<img src="/images/storybook/autocomplete/label-properties.png" alt="Label Properties" />
 
 ## Usage
 
 ### Used in forms
-<img src="/images/storybook/autocomplete/used-in-forms.png" alt="Used in forms"/>
+
+<img src="/images/storybook/autocomplete/used-in-forms.png" alt="Used in forms" />

package/Avatar/Avatar.d.ts

@@ -9,7 +9,7 @@ interface AvatarProps extends React.ComponentPropsWithoutRef<typeof AvatarPrimit
 declare const avatarVariants: (props?: ({
     size?: "sm" | "md" | "lg" | "xl" | null | undefined;
     variant?: "strong" | "light" | "subtle" | "quiet" | "outlined" | null | undefined;
-} & import("class-variance-authority/dist/types.js").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare const Avatar: (({ image, fallback, className, size, variant, ...props }: AvatarProps) => React.JSX.Element) & {
     original: ({ image, fallback, className, size, variant, ...props }: AvatarProps) => React.JSX.Element;
     originalName: string;

package/Avatar/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Avatar","AvatarPrimitive","withStaticProps","cn","makeDecoratable","cva","AvatarFallback","AvatarImage","avatarVariants","variants","size","sm","md","lg","xl","variant","strong","subtle","light","quiet","outlined","defaultVariants","AvatarBase","image","fallback","className","props","createElement","Root","Object","assign","Fallback","Image"],"sources":["Avatar.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Avatar as AvatarPrimitive } from \"radix-ui\";\nimport { withStaticProps, cn, makeDecoratable, cva, type VariantProps } from \"~/utils.js\";\nimport {\n    AvatarFallback,\n    AvatarImage,\n    type AvatarFallbackProps,\n    type AvatarImageProps\n} from \"./components/index.js\";\n\ninterface AvatarProps\n    extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>,\n        VariantProps<typeof avatarVariants> {\n    image?: React.ReactElement<AvatarImageProps>;\n    fallback?: React.ReactElement<AvatarFallbackProps>;\n}\n\nconst avatarVariants = cva(\"relative flex shrink-0 overflow-hidden\", {\n    variants: {\n        size: {\n            sm: \"text-h6 rounded-sm size-lg [&_svg]:size-md\",\n            md: \"text-h6 rounded-md size-xl [&_svg]:size-lg\",\n            lg: \"text-h6 rounded-md size-[40px] [&_svg]:size-lg\",\n            xl: \"text-h4 rounded-lg size-xxl [&_svg]:size-lg\"\n        },\n        variant: {\n            strong: \"bg-primary text-neutral-light [&_svg]:fill-neutral-base\",\n            subtle: \"bg-neutral-light text-neutral-primary [&_svg]:fill-neutral-xstrong\",\n            light: \"bg-neutral-dimmed text-neutral-primary [&_svg]:fill-neutral-xstrong\",\n            quiet: \"bg-transparent text-neutral-primary [&_svg]:fill-neutral-xstrong\",\n            outlined:\n                \"bg-neutral-base border-neutral-muted! border-sm text-accent-primary [&_svg]:fill-neutral-xstrong\"\n        }\n    },\n    defaultVariants: {\n        size: \"md\",\n        variant: \"strong\"\n    }\n});\n\nconst AvatarBase = ({ image, fallback, className, size, variant, ...props }: AvatarProps) => {\n    return (\n        <AvatarPrimitive.Root\n            className={cn(avatarVariants({ variant, size }), className)}\n            {...props}\n        >\n            {image}\n            {fallback}\n        </AvatarPrimitive.Root>\n    );\n};\n\nconst Avatar = withStaticProps(makeDecoratable(\"Avatar\", AvatarBase), {\n    Fallback: AvatarFallback,\n    Image: AvatarImage\n});\n\nexport { Avatar, type AvatarProps, type AvatarImageProps, type AvatarFallbackProps };\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,MAAM,IAAIC,eAAe,QAAQ,UAAU;AACpD,SAASC,eAAe,EAAEC,EAAE,EAAEC,eAAe,EAAEC,GAAG;AAClD,SACIC,cAAc,EACdC,WAAW;AAYf,MAAMC,cAAc,GAAGH,GAAG,CAAC,wCAAwC,EAAE;EACjEI,QAAQ,EAAE;IACNC,IAAI,EAAE;MACFC,EAAE,EAAE,4CAA4C;MAChDC,EAAE,EAAE,4CAA4C;MAChDC,EAAE,EAAE,gDAAgD;MACpDC,EAAE,EAAE;IACR,CAAC;IACDC,OAAO,EAAE;MACLC,MAAM,EAAE,yDAAyD;MACjEC,MAAM,EAAE,oEAAoE;MAC5EC,KAAK,EAAE,qEAAqE;MAC5EC,KAAK,EAAE,kEAAkE;MACzEC,QAAQ,EACJ;IACR;EACJ,CAAC;EACDC,eAAe,EAAE;IACbX,IAAI,EAAE,IAAI;IACVK,OAAO,EAAE;EACb;AACJ,CAAC,CAAC;AAEF,MAAMO,UAAU,GAAGA,CAAC;EAAEC,KAAK;EAAEC,QAAQ;EAAEC,SAAS;EAAEf,IAAI;EAAEK,OAAO;EAAE,GAAGW;AAAmB,CAAC,KAAK;EACzF,oBACI3B,KAAA,CAAA4B,aAAA,CAAC1B,eAAe,CAAC2B,IAAI,EAAAC,MAAA,CAAAC,MAAA;IACjBL,SAAS,EAAEtB,EAAE,CAACK,cAAc,CAAC;MAAEO,OAAO;MAAEL;IAAK,CAAC,CAAC,EAAEe,SAAS;EAAE,GACxDC,KAAK,GAERH,KAAK,EACLC,QACiB,CAAC;AAE/B,CAAC;AAED,MAAMxB,MAAM,GAAGE,eAAe,CAACE,eAAe,CAAC,QAAQ,EAAEkB,UAAU,CAAC,EAAE;EAClES,QAAQ,EAAEzB,cAAc;EACxB0B,KAAK,EAAEzB;AACX,CAAC,CAAC;AAEF,SAASP,MAAM","ignoreList":[]}
+{"version":3,"names":["React","Avatar","AvatarPrimitive","withStaticProps","cn","makeDecoratable","cva","AvatarFallback","AvatarImage","avatarVariants","variants","size","sm","md","lg","xl","variant","strong","subtle","light","quiet","outlined","defaultVariants","AvatarBase","image","fallback","className","props","createElement","Root","Object","assign","Fallback","Image"],"sources":["Avatar.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Avatar as AvatarPrimitive } from \"radix-ui\";\nimport { withStaticProps, cn, makeDecoratable, cva, type VariantProps } from \"~/utils.js\";\nimport {\n    AvatarFallback,\n    AvatarImage,\n    type AvatarFallbackProps,\n    type AvatarImageProps\n} from \"./components/index.js\";\n\ninterface AvatarProps\n    extends\n        React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>,\n        VariantProps<typeof avatarVariants> {\n    image?: React.ReactElement<AvatarImageProps>;\n    fallback?: React.ReactElement<AvatarFallbackProps>;\n}\n\nconst avatarVariants = cva(\"relative flex shrink-0 overflow-hidden\", {\n    variants: {\n        size: {\n            sm: \"text-h6 rounded-sm size-lg [&_svg]:size-md\",\n            md: \"text-h6 rounded-md size-xl [&_svg]:size-lg\",\n            lg: \"text-h6 rounded-md size-[40px] [&_svg]:size-lg\",\n            xl: \"text-h4 rounded-lg size-xxl [&_svg]:size-lg\"\n        },\n        variant: {\n            strong: \"bg-primary text-neutral-light [&_svg]:fill-neutral-base\",\n            subtle: \"bg-neutral-light text-neutral-primary [&_svg]:fill-neutral-xstrong\",\n            light: \"bg-neutral-dimmed text-neutral-primary [&_svg]:fill-neutral-xstrong\",\n            quiet: \"bg-transparent text-neutral-primary [&_svg]:fill-neutral-xstrong\",\n            outlined:\n                \"bg-neutral-base border-neutral-muted! border-sm text-accent-primary [&_svg]:fill-neutral-xstrong\"\n        }\n    },\n    defaultVariants: {\n        size: \"md\",\n        variant: \"strong\"\n    }\n});\n\nconst AvatarBase = ({ image, fallback, className, size, variant, ...props }: AvatarProps) => {\n    return (\n        <AvatarPrimitive.Root\n            className={cn(avatarVariants({ variant, size }), className)}\n            {...props}\n        >\n            {image}\n            {fallback}\n        </AvatarPrimitive.Root>\n    );\n};\n\nconst Avatar = withStaticProps(makeDecoratable(\"Avatar\", AvatarBase), {\n    Fallback: AvatarFallback,\n    Image: AvatarImage\n});\n\nexport { Avatar, type AvatarProps, type AvatarImageProps, type AvatarFallbackProps };\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,MAAM,IAAIC,eAAe,QAAQ,UAAU;AACpD,SAASC,eAAe,EAAEC,EAAE,EAAEC,eAAe,EAAEC,GAAG;AAClD,SACIC,cAAc,EACdC,WAAW;AAaf,MAAMC,cAAc,GAAGH,GAAG,CAAC,wCAAwC,EAAE;EACjEI,QAAQ,EAAE;IACNC,IAAI,EAAE;MACFC,EAAE,EAAE,4CAA4C;MAChDC,EAAE,EAAE,4CAA4C;MAChDC,EAAE,EAAE,gDAAgD;MACpDC,EAAE,EAAE;IACR,CAAC;IACDC,OAAO,EAAE;MACLC,MAAM,EAAE,yDAAyD;MACjEC,MAAM,EAAE,oEAAoE;MAC5EC,KAAK,EAAE,qEAAqE;MAC5EC,KAAK,EAAE,kEAAkE;MACzEC,QAAQ,EACJ;IACR;EACJ,CAAC;EACDC,eAAe,EAAE;IACbX,IAAI,EAAE,IAAI;IACVK,OAAO,EAAE;EACb;AACJ,CAAC,CAAC;AAEF,MAAMO,UAAU,GAAGA,CAAC;EAAEC,KAAK;EAAEC,QAAQ;EAAEC,SAAS;EAAEf,IAAI;EAAEK,OAAO;EAAE,GAAGW;AAAmB,CAAC,KAAK;EACzF,oBACI3B,KAAA,CAAA4B,aAAA,CAAC1B,eAAe,CAAC2B,IAAI,EAAAC,MAAA,CAAAC,MAAA;IACjBL,SAAS,EAAEtB,EAAE,CAACK,cAAc,CAAC;MAAEO,OAAO;MAAEL;IAAK,CAAC,CAAC,EAAEe,SAAS;EAAE,GACxDC,KAAK,GAERH,KAAK,EACLC,QACiB,CAAC;AAE/B,CAAC;AAED,MAAMxB,MAAM,GAAGE,eAAe,CAACE,eAAe,CAAC,QAAQ,EAAEkB,UAAU,CAAC,EAAE;EAClES,QAAQ,EAAEzB,cAAc;EACxB0B,KAAK,EAAEzB;AACX,CAAC,CAAC;AAEF,SAASP,MAAM","ignoreList":[]}