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

package/FilePicker/FilePicker.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 FilePickerStories from './FilePicker.stories';
+import * as FilePickerStories from "./FilePicker.stories";
 
 <Meta of={FilePickerStories} />
 
@@ -13,8 +13,8 @@ The File Picker component allows users to select, preview, and manage files. It
 The FilePicker component is typically used with [Webiny's File Manager](https://www.webiny.com/enterprise-serverless-cms/file-manager) to provide a complete file selection experience.
 
 > ⚠️ **Note**: The FilePicker component is designed to work seamlessly with [Webiny's File Manager](https://www.webiny.com/enterprise-serverless-cms/file-manager).
-In the Storybook example below, we’ve used random images from Picsum for demonstration purposes.
-However, if you use this example code in a real Webiny project, the FilePicker will integrate with the actual File Manager as expected.
+> In the Storybook example below, we’ve used random images from Picsum for demonstration purposes.
+> However, if you use this example code in a real Webiny project, the FilePicker will integrate with the actual File Manager as expected.
 
 <Canvas of={FilePickerStories.Documentation} source={ { code: `
 import React, { useState } from "react";
@@ -23,8 +23,8 @@ import { FileManager } from "@webiny/app-admin/components";
 import type { FileManagerFileItem } from "@webiny/app-admin/base/ui/FileManager";
 
 const FilePickerExample = () => {
-    const [selectedFile, setSelectedFile] = useState<FileItemDto | null>(null);
-    const [validation, setValidation] = useState({ isValid: true, message: "" });
+const [selectedFile, setSelectedFile] = useState<FileItemDto | null>(null);
+const [validation, setValidation] = useState({ isValid: true, message: "" });
 
     return (
         <FileManager
@@ -75,22 +75,23 @@ const FilePickerExample = () => {
             )}
         />
     );
+
 };
 
 export default FilePickerExample;
 
 ` } }
-        additionalActions={[
-            {
-                title: 'Open in GitHub',
-                onClick: () => {
-                    window.open(
-                        'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/FilePicker/FilePicker.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/FilePicker/FilePicker.tsx',
+'_blank'
+);
+},
+}
+]}
 />
 
 <Controls of={FilePickerStories.Documentation} />
@@ -102,60 +103,59 @@ import { FileManager } from "@webiny/app-admin/components";
 import type { FileManagerFileItem } from "@webiny/app-admin/base/ui/FileManager";
 
 const FilePickerExample = () => {
-    const [selectedFile, setSelectedFile] = useState<FileItemDto | null>(null);
-    const [validation, setValidation] = useState({ isValid: true, message: "" });
-
-    return (
-        <FileManager
-            accept={["image/*", "application/pdf"]}
-            onChange={(file: FileManagerFileItem) => {
-                if (file) {
-                    // Convert FileManager file to the format FilePicker expects
-                    const metaItems = file.meta || [];
-                    const getName = () => {
-                        const nameItem = metaItems.find((item: { key: string }) => item.key === "name");
-                        return nameItem ? nameItem.value : "";
-                    };
-                    const getSize = () => {
-                        const sizeItem = metaItems.find((item: { key: string }) => item.key === "size");
-                        return sizeItem ? sizeItem.value : 0;
-                    };
-                    const getType = () => {
-                        const typeItem = metaItems.find((item: { key: string }) => item.key === "type");
-                        return typeItem ? typeItem.value : "";
-                    };
-
-                    setSelectedFile({
-                        id: file.id,
-                        name: getName(),
-                        size: getSize(),
-                        mimeType: getType(),
-                        url: file.src || ""
-                    });
-                    setValidation({ isValid: true, message: "" });
-                }
-            }}
-            render={({ showFileManager }) => (
-                <FilePicker
-                    label="Upload Image"
-                    description="Select a file to upload (JPG, PNG, PDF)"
-                    note="Note: Maximum file size is 5MB"
-                    type="area"
-                    required={true}
-                    value={selectedFile}
-                    onSelectItem={() => showFileManager()}
-                    onRemoveItem={() => {
-                        setSelectedFile(null);
-                        setValidation({ isValid: false, message: "Please select a file" });
-                    }}
-                    onEditItem={() => showFileManager()}
-                    validation={validation}
-                />
-            )}
+  const [selectedFile, setSelectedFile] = useState<FileItemDto | null>(null);
+  const [validation, setValidation] = useState({ isValid: true, message: "" });
+
+  return (
+    <FileManager
+      accept={["image/*", "application/pdf"]}
+      onChange={(file: FileManagerFileItem) => {
+        if (file) {
+          // Convert FileManager file to the format FilePicker expects
+          const metaItems = file.meta || [];
+          const getName = () => {
+            const nameItem = metaItems.find((item: { key: string }) => item.key === "name");
+            return nameItem ? nameItem.value : "";
+          };
+          const getSize = () => {
+            const sizeItem = metaItems.find((item: { key: string }) => item.key === "size");
+            return sizeItem ? sizeItem.value : 0;
+          };
+          const getType = () => {
+            const typeItem = metaItems.find((item: { key: string }) => item.key === "type");
+            return typeItem ? typeItem.value : "";
+          };
+
+          setSelectedFile({
+            id: file.id,
+            name: getName(),
+            size: getSize(),
+            mimeType: getType(),
+            url: file.src || ""
+          });
+          setValidation({ isValid: true, message: "" });
+        }
+      }}
+      render={({ showFileManager }) => (
+        <FilePicker
+          label="Upload Image"
+          description="Select a file to upload (JPG, PNG, PDF)"
+          note="Note: Maximum file size is 5MB"
+          type="area"
+          required={true}
+          value={selectedFile}
+          onSelectItem={() => showFileManager()}
+          onRemoveItem={() => {
+            setSelectedFile(null);
+            setValidation({ isValid: false, message: "Please select a file" });
+          }}
+          onEditItem={() => showFileManager()}
+          validation={validation}
         />
-    );
+      )}
+    />
+  );
 };
 
 export default FilePickerExample;
 ```
-

package/FilePicker/primitives/FilePickerPrimitive.d.ts

@@ -7,7 +7,7 @@ import type { FilePreviewRendererProps, TriggerRendererProps } from "./component
 declare const filePickerVariants: (props?: ({
     type?: "area" | "compact" | null | undefined;
     variant?: "primary" | "secondary" | "ghost" | null | undefined;
-} & import("class-variance-authority/dist/types.js").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface FilePickerPrimitiveProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof filePickerVariants> {
     /**
      * Custom styles for the container.
@@ -83,59 +83,59 @@ declare const FilePickerPrimitive: (({ className, containerStyle, description, d
     }>) => (props: unknown) => React.JSX.Element;
 } & {
     Preview: {
-        Image: (({ value, className, variant, disabled, onRemoveItem, onReplaceItem, onEditItem }: import("./components/index.js").ImagePreviewProps) => React.JSX.Element) & {
-            original: ({ value, className, variant, disabled, onRemoveItem, onReplaceItem, onEditItem }: import("./components/index.js").ImagePreviewProps) => React.JSX.Element;
+        Image: (({ value, className, variant, disabled, onRemoveItem, onReplaceItem, onEditItem }: import("./index.js").ImagePreviewProps) => React.JSX.Element) & {
+            original: ({ value, className, variant, disabled, onRemoveItem, onReplaceItem, onEditItem }: import("./index.js").ImagePreviewProps) => React.JSX.Element;
             originalName: string;
             displayName: string;
         } & {
-            original: (({ value, className, variant, disabled, onRemoveItem, onReplaceItem, onEditItem }: import("./components/index.js").ImagePreviewProps) => React.JSX.Element) & {
-                original: ({ value, className, variant, disabled, onRemoveItem, onReplaceItem, onEditItem }: import("./components/index.js").ImagePreviewProps) => React.JSX.Element;
+            original: (({ value, className, variant, disabled, onRemoveItem, onReplaceItem, onEditItem }: import("./index.js").ImagePreviewProps) => React.JSX.Element) & {
+                original: ({ value, className, variant, disabled, onRemoveItem, onReplaceItem, onEditItem }: import("./index.js").ImagePreviewProps) => React.JSX.Element;
                 originalName: string;
                 displayName: string;
             };
             originalName: string;
             displayName: string;
         } & {
-            createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(({ value, className, variant, disabled, onRemoveItem, onReplaceItem, onEditItem }: import("./components/index.js").ImagePreviewProps) => React.JSX.Element) & {
-                original: ({ value, className, variant, disabled, onRemoveItem, onReplaceItem, onEditItem }: import("./components/index.js").ImagePreviewProps) => React.JSX.Element;
+            createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(({ value, className, variant, disabled, onRemoveItem, onReplaceItem, onEditItem }: import("./index.js").ImagePreviewProps) => React.JSX.Element) & {
+                original: ({ value, className, variant, disabled, onRemoveItem, onReplaceItem, onEditItem }: import("./index.js").ImagePreviewProps) => React.JSX.Element;
                 originalName: string;
                 displayName: string;
             }>) => (props: unknown) => React.JSX.Element;
         };
-        RichItem: (({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, ...props }: import("./components/index.js").RichItemPreviewProps) => React.JSX.Element) & {
-            original: ({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, ...props }: import("./components/index.js").RichItemPreviewProps) => React.JSX.Element;
+        RichItem: (({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, ...props }: import("./index.js").RichItemPreviewProps) => React.JSX.Element) & {
+            original: ({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, ...props }: import("./index.js").RichItemPreviewProps) => React.JSX.Element;
             originalName: string;
             displayName: string;
         } & {
-            original: (({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, ...props }: import("./components/index.js").RichItemPreviewProps) => React.JSX.Element) & {
-                original: ({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, ...props }: import("./components/index.js").RichItemPreviewProps) => React.JSX.Element;
+            original: (({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, ...props }: import("./index.js").RichItemPreviewProps) => React.JSX.Element) & {
+                original: ({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, ...props }: import("./index.js").RichItemPreviewProps) => React.JSX.Element;
                 originalName: string;
                 displayName: string;
             };
             originalName: string;
             displayName: string;
         } & {
-            createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, ...props }: import("./components/index.js").RichItemPreviewProps) => React.JSX.Element) & {
-                original: ({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, ...props }: import("./components/index.js").RichItemPreviewProps) => React.JSX.Element;
+            createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, ...props }: import("./index.js").RichItemPreviewProps) => React.JSX.Element) & {
+                original: ({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, ...props }: import("./index.js").RichItemPreviewProps) => React.JSX.Element;
                 originalName: string;
                 displayName: string;
             }>) => (props: unknown) => React.JSX.Element;
         };
-        TextOnly: (({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, small, variant, value, ...props }: import("./components/index.js").TextOnlyPreviewProps) => React.JSX.Element) & {
-            original: ({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, small, variant, value, ...props }: import("./components/index.js").TextOnlyPreviewProps) => React.JSX.Element;
+        TextOnly: (({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, small, variant, value, ...props }: import("./index.js").TextOnlyPreviewProps) => React.JSX.Element) & {
+            original: ({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, small, variant, value, ...props }: import("./index.js").TextOnlyPreviewProps) => React.JSX.Element;
             originalName: string;
             displayName: string;
         } & {
-            original: (({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, small, variant, value, ...props }: import("./components/index.js").TextOnlyPreviewProps) => React.JSX.Element) & {
-                original: ({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, small, variant, value, ...props }: import("./components/index.js").TextOnlyPreviewProps) => React.JSX.Element;
+            original: (({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, small, variant, value, ...props }: import("./index.js").TextOnlyPreviewProps) => React.JSX.Element) & {
+                original: ({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, small, variant, value, ...props }: import("./index.js").TextOnlyPreviewProps) => React.JSX.Element;
                 originalName: string;
                 displayName: string;
             };
             originalName: string;
             displayName: string;
         } & {
-            createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, small, variant, value, ...props }: import("./components/index.js").TextOnlyPreviewProps) => React.JSX.Element) & {
-                original: ({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, small, variant, value, ...props }: import("./components/index.js").TextOnlyPreviewProps) => React.JSX.Element;
+            createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, small, variant, value, ...props }: import("./index.js").TextOnlyPreviewProps) => React.JSX.Element) & {
+                original: ({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, small, variant, value, ...props }: import("./index.js").TextOnlyPreviewProps) => React.JSX.Element;
                 originalName: string;
                 displayName: string;
             }>) => (props: unknown) => React.JSX.Element;

package/FilePicker/primitives/FilePickerPrimitive.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","cn","cva","makeDecoratable","withStaticProps","FilePickerLabel","FilePickerDescription","Trigger","inputVariants","ImagePreview","RichItemPreview","TextOnlyPreview","FilePreview","FileItem","useFilePicker","filePickerVariants","variants","type","area","compact","variant","primary","secondary","ghost","defaultVariants","BaseFilePickerPrimitive","className","containerStyle","description","disabled","invalid","label","onEditItem","onRemoveItem","onSelectItem","placeholder","renderFilePreview","renderTrigger","value","vm","createElement","style","file","undefined","onReplaceItem","text","DecoratableFilePickerPrimitive","FilePickerPrimitive","Preview","Image","RichItem","TextOnly"],"sources":["FilePickerPrimitive.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn, cva, type VariantProps, makeDecoratable, withStaticProps } from \"~/utils.js\";\nimport { FilePickerLabel, FilePickerDescription, Trigger } from \"./components/index.js\";\nimport type { Label } from \"~/Label/index.js\";\nimport type { InputPrimitiveProps } from \"~/Input/index.js\";\nimport { inputVariants } from \"~/Input/index.js\";\nimport { ImagePreview, RichItemPreview, TextOnlyPreview, FilePreview } from \"./components/index.js\";\nimport { FileItem, type FileItemDto, type FileItemFormatted } from \"../domains/index.js\";\nimport { useFilePicker } from \"./useFilePicker.js\";\nimport type { FilePreviewRendererProps, TriggerRendererProps } from \"./components/types.js\";\n\nconst filePickerVariants = cva(\n    [\n        \"w-full border-sm text-md peer rounded-md\",\n        \"focus-visible:outline-none\",\n        \"data-[disabled=true]:cursor-not-allowed\",\n        \"flex flex-col items-start gap-y-sm-extra\"\n    ],\n    {\n        variants: {\n            type: {\n                area: [\n                    \"px-[calc(var(--padding-sm-extra)-(var(--border-width-sm)))] py-[calc(var(--padding-sm-extra)-(var(--border-width-sm)))]\"\n                ],\n                compact: [\n                    \"py-[calc(var(--padding-xs-plus)-(var(--border-width-sm)))] px-[calc(var(--padding-sm)-(var(--border-width-sm)))]\"\n                ]\n            },\n            variant: {\n                primary: \"\",\n                secondary: \"\",\n                ghost: [\"hover:bg-transparent\"]\n            }\n        },\n        defaultVariants: {\n            type: \"area\",\n            variant: \"primary\"\n        }\n    }\n);\n\ninterface FilePickerPrimitiveProps\n    extends React.HTMLAttributes<HTMLDivElement>,\n        VariantProps<typeof filePickerVariants> {\n    /**\n     * Custom styles for the container.\n     */\n    containerStyle?: React.CSSProperties;\n    /**\n     * Indicates if the file picker is disabled.\n     */\n    disabled?: boolean;\n    /**\n     * Indicates if the input field is invalid.\n     * Refer to `InputPrimitiveProps[\"invalid\"]` for possible values.\n     */\n    invalid?: InputPrimitiveProps[\"invalid\"];\n    /**\n     * Label for the file picker.\n     */\n    label?: React.ReactElement<typeof Label> | React.ReactNode | string;\n    /**\n     * Description for the file picker.\n     */\n    description?: React.ReactNode | string;\n    /**\n     * Callback triggered when an item is edited.\n     */\n    onEditItem?: (item: FileItemFormatted | null) => void;\n    /**\n     * Callback triggered when an item is removed.\n     */\n    onRemoveItem?: (item: FileItemFormatted | null) => void;\n    /**\n     * Callback triggered when an item is selected.\n     */\n    onSelectItem: () => void;\n    /**\n     * Placeholder text for the file picker.\n     */\n    placeholder?: string;\n    /**\n     * Custom renderer for the file preview.\n     */\n    renderFilePreview?: (props: FilePreviewRendererProps) => React.ReactElement<any>;\n    /**\n     * Custom renderer for the trigger.\n     */\n    renderTrigger?: (props: TriggerRendererProps) => React.ReactElement<any>;\n    /**\n     * Custom styles for the file picker.\n     */\n    style?: React.CSSProperties;\n    /**\n     * Value of the selected file.\n     */\n    value?: FileItemDto | string | null;\n}\n\nconst BaseFilePickerPrimitive = ({\n    className,\n    containerStyle,\n    description,\n    disabled,\n    invalid,\n    label,\n    onEditItem,\n    onRemoveItem,\n    onSelectItem,\n    placeholder,\n    renderFilePreview,\n    renderTrigger,\n    type = \"area\",\n    value,\n    variant\n}: FilePickerPrimitiveProps) => {\n    const { vm } = useFilePicker({ value });\n\n    return (\n        <div\n            data-disabled={disabled}\n            className={cn(\n                inputVariants({ variant, invalid }),\n                filePickerVariants({ type, variant }),\n                className\n            )}\n            style={containerStyle}\n        >\n            {type === \"area\" && (label || description) && (\n                <div className={\"w-full\"}>\n                    {label && (\n                        <div className={\"mb-xs\"}>\n                            {typeof label === \"string\" ? (\n                                <FilePickerLabel\n                                    label={label}\n                                    className={\"m-0\"}\n                                    disabled={disabled}\n                                />\n                            ) : (\n                                label\n                            )}\n                        </div>\n                    )}\n                    {description && (\n                        <FilePickerDescription\n                            description={description}\n                            disabled={disabled}\n                            className={\"m-0\"}\n                        />\n                    )}\n                </div>\n            )}\n            {vm.file ? (\n                <FilePreview\n                    disabled={disabled}\n                    onEditItem={onEditItem ? () => onEditItem(vm.file) : undefined}\n                    onRemoveItem={onRemoveItem ? () => onRemoveItem(vm.file) : undefined}\n                    onReplaceItem={onSelectItem}\n                    renderFilePreview={renderFilePreview}\n                    type={type}\n                    value={vm.file}\n                />\n            ) : (\n                <Trigger\n                    disabled={disabled}\n                    onSelectItem={onSelectItem}\n                    renderTrigger={renderTrigger}\n                    text={placeholder}\n                    type={type}\n                    variant={variant}\n                />\n            )}\n        </div>\n    );\n};\n\nconst DecoratableFilePickerPrimitive = makeDecoratable(\n    \"FilePickerPrimitive\",\n    BaseFilePickerPrimitive\n);\n\nconst FilePickerPrimitive = withStaticProps(DecoratableFilePickerPrimitive, {\n    Preview: {\n        Image: ImagePreview,\n        RichItem: RichItemPreview,\n        TextOnly: TextOnlyPreview\n    }\n});\n\nexport { FilePickerPrimitive, FileItem, type FilePickerPrimitiveProps, filePickerVariants };\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","cn","cva","makeDecoratable","withStaticProps","FilePickerLabel","FilePickerDescription","Trigger","inputVariants","ImagePreview","RichItemPreview","TextOnlyPreview","FilePreview","FileItem","useFilePicker","filePickerVariants","variants","type","area","compact","variant","primary","secondary","ghost","defaultVariants","BaseFilePickerPrimitive","className","containerStyle","description","disabled","invalid","label","onEditItem","onRemoveItem","onSelectItem","placeholder","renderFilePreview","renderTrigger","value","vm","createElement","style","file","undefined","onReplaceItem","text","DecoratableFilePickerPrimitive","FilePickerPrimitive","Preview","Image","RichItem","TextOnly"],"sources":["FilePickerPrimitive.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn, cva, type VariantProps, makeDecoratable, withStaticProps } from \"~/utils.js\";\nimport { FilePickerLabel, FilePickerDescription, Trigger } from \"./components/index.js\";\nimport type { Label } from \"~/Label/index.js\";\nimport type { InputPrimitiveProps } from \"~/Input/index.js\";\nimport { inputVariants } from \"~/Input/index.js\";\nimport { ImagePreview, RichItemPreview, TextOnlyPreview, FilePreview } from \"./components/index.js\";\nimport { FileItem, type FileItemDto, type FileItemFormatted } from \"../domains/index.js\";\nimport { useFilePicker } from \"./useFilePicker.js\";\nimport type { FilePreviewRendererProps, TriggerRendererProps } from \"./components/types.js\";\n\nconst filePickerVariants = cva(\n    [\n        \"w-full border-sm text-md peer rounded-md\",\n        \"focus-visible:outline-none\",\n        \"data-[disabled=true]:cursor-not-allowed\",\n        \"flex flex-col items-start gap-y-sm-extra\"\n    ],\n    {\n        variants: {\n            type: {\n                area: [\n                    \"px-[calc(var(--padding-sm-extra)-(var(--border-width-sm)))] py-[calc(var(--padding-sm-extra)-(var(--border-width-sm)))]\"\n                ],\n                compact: [\n                    \"py-[calc(var(--padding-xs-plus)-(var(--border-width-sm)))] px-[calc(var(--padding-sm)-(var(--border-width-sm)))]\"\n                ]\n            },\n            variant: {\n                primary: \"\",\n                secondary: \"\",\n                ghost: [\"hover:bg-transparent\"]\n            }\n        },\n        defaultVariants: {\n            type: \"area\",\n            variant: \"primary\"\n        }\n    }\n);\n\ninterface FilePickerPrimitiveProps\n    extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof filePickerVariants> {\n    /**\n     * Custom styles for the container.\n     */\n    containerStyle?: React.CSSProperties;\n    /**\n     * Indicates if the file picker is disabled.\n     */\n    disabled?: boolean;\n    /**\n     * Indicates if the input field is invalid.\n     * Refer to `InputPrimitiveProps[\"invalid\"]` for possible values.\n     */\n    invalid?: InputPrimitiveProps[\"invalid\"];\n    /**\n     * Label for the file picker.\n     */\n    label?: React.ReactElement<typeof Label> | React.ReactNode | string;\n    /**\n     * Description for the file picker.\n     */\n    description?: React.ReactNode | string;\n    /**\n     * Callback triggered when an item is edited.\n     */\n    onEditItem?: (item: FileItemFormatted | null) => void;\n    /**\n     * Callback triggered when an item is removed.\n     */\n    onRemoveItem?: (item: FileItemFormatted | null) => void;\n    /**\n     * Callback triggered when an item is selected.\n     */\n    onSelectItem: () => void;\n    /**\n     * Placeholder text for the file picker.\n     */\n    placeholder?: string;\n    /**\n     * Custom renderer for the file preview.\n     */\n    renderFilePreview?: (props: FilePreviewRendererProps) => React.ReactElement<any>;\n    /**\n     * Custom renderer for the trigger.\n     */\n    renderTrigger?: (props: TriggerRendererProps) => React.ReactElement<any>;\n    /**\n     * Custom styles for the file picker.\n     */\n    style?: React.CSSProperties;\n    /**\n     * Value of the selected file.\n     */\n    value?: FileItemDto | string | null;\n}\n\nconst BaseFilePickerPrimitive = ({\n    className,\n    containerStyle,\n    description,\n    disabled,\n    invalid,\n    label,\n    onEditItem,\n    onRemoveItem,\n    onSelectItem,\n    placeholder,\n    renderFilePreview,\n    renderTrigger,\n    type = \"area\",\n    value,\n    variant\n}: FilePickerPrimitiveProps) => {\n    const { vm } = useFilePicker({ value });\n\n    return (\n        <div\n            data-disabled={disabled}\n            className={cn(\n                inputVariants({ variant, invalid }),\n                filePickerVariants({ type, variant }),\n                className\n            )}\n            style={containerStyle}\n        >\n            {type === \"area\" && (label || description) && (\n                <div className={\"w-full\"}>\n                    {label && (\n                        <div className={\"mb-xs\"}>\n                            {typeof label === \"string\" ? (\n                                <FilePickerLabel\n                                    label={label}\n                                    className={\"m-0\"}\n                                    disabled={disabled}\n                                />\n                            ) : (\n                                label\n                            )}\n                        </div>\n                    )}\n                    {description && (\n                        <FilePickerDescription\n                            description={description}\n                            disabled={disabled}\n                            className={\"m-0\"}\n                        />\n                    )}\n                </div>\n            )}\n            {vm.file ? (\n                <FilePreview\n                    disabled={disabled}\n                    onEditItem={onEditItem ? () => onEditItem(vm.file) : undefined}\n                    onRemoveItem={onRemoveItem ? () => onRemoveItem(vm.file) : undefined}\n                    onReplaceItem={onSelectItem}\n                    renderFilePreview={renderFilePreview}\n                    type={type}\n                    value={vm.file}\n                />\n            ) : (\n                <Trigger\n                    disabled={disabled}\n                    onSelectItem={onSelectItem}\n                    renderTrigger={renderTrigger}\n                    text={placeholder}\n                    type={type}\n                    variant={variant}\n                />\n            )}\n        </div>\n    );\n};\n\nconst DecoratableFilePickerPrimitive = makeDecoratable(\n    \"FilePickerPrimitive\",\n    BaseFilePickerPrimitive\n);\n\nconst FilePickerPrimitive = withStaticProps(DecoratableFilePickerPrimitive, {\n    Preview: {\n        Image: ImagePreview,\n        RichItem: RichItemPreview,\n        TextOnly: TextOnlyPreview\n    }\n});\n\nexport { FilePickerPrimitive, FileItem, type FilePickerPrimitiveProps, filePickerVariants };\n"],"mappings":"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","ignoreList":[]}

package/FilePicker/primitives/components/Trigger.d.ts

@@ -4,7 +4,7 @@ import type { TriggerDefaultProps } from "../../../FilePicker/primitives/compone
 declare const triggerVariants: (props?: ({
     type?: "area" | "compact" | null | undefined;
     variant?: "primary" | "secondary" | "ghost" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface TriggerProps extends TriggerDefaultProps, VariantProps<typeof triggerVariants> {
     renderTrigger?: (props: any) => React.ReactElement<any>;
 }

package/FilePicker/primitives/components/previews/TextOnlyPreview/TextOnlyPreview.d.ts

@@ -4,7 +4,7 @@ import type { FilePreviewDefaultProps } from "../../types.js";
 import { previewVariants } from "../variants.js";
 declare const textOnlyPreviewVariants: (props?: ({
     small?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types.js").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type TextOnlyPreviewProps = FilePreviewDefaultProps & React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof previewVariants> & VariantProps<typeof textOnlyPreviewVariants>;
 declare const TextOnlyPreview: (({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, small, variant, value, ...props }: TextOnlyPreviewProps) => React.JSX.Element) & {
     original: ({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, small, variant, value, ...props }: TextOnlyPreviewProps) => React.JSX.Element;

package/FilePicker/primitives/components/previews/variants.d.ts

@@ -1,4 +1,4 @@
 export declare const previewVariants: (props?: ({
     variant?: "base" | "transparent" | "light" | null | undefined;
     disabled?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/FilePicker/primitives/components/types.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["types.ts"],"sourcesContent":["import type { VariantProps } from \"~/utils.js\";\nimport type { previewVariants } from \"./previews/variants.js\";\nimport type { FileItemFormatted } from \"../../domains/index.js\";\n\n/**\n * Default properties of a file preview component.\n * They are shared between the default and custom renderers.\n */\nexport interface FilePreviewDefaultProps\n    extends Omit<React.HTMLAttributes<HTMLDivElement>, \"children\">,\n        VariantProps<typeof previewVariants> {\n    onReplaceItem?: () => void;\n    onRemoveItem?: () => void;\n    onEditItem?: () => void;\n    value: FileItemFormatted;\n    disabled?: boolean;\n}\n\n/**\n * Properties that can be used to render a custom file preview component.\n * @see `renderFilePreview` property of the FilePickerPrimitiveProps.\n */\nexport type FilePreviewRendererProps = Omit<FilePreviewDefaultProps, \"type\"> & Record<string, any>;\n\n/**\n * Default properties of a trigger component.\n * They are shared between the default and custom renderers.\n */\nexport interface TriggerDefaultProps extends React.HTMLAttributes<HTMLButtonElement> {\n    disabled?: boolean;\n    text?: string;\n    onSelectItem: () => void;\n}\n\n/**\n * Properties that can be used to render a custom trigger component.\n * @see `renderTrigger` property of the FilePickerPrimitiveProps.\n */\nexport type TriggerRendererProps = TriggerDefaultProps & Record<string, any>;\n"],"mappings":"","ignoreList":[]}
+{"version":3,"names":[],"sources":["types.ts"],"sourcesContent":["import type { VariantProps } from \"~/utils.js\";\nimport type { previewVariants } from \"./previews/variants.js\";\nimport type { FileItemFormatted } from \"../../domains/index.js\";\n\n/**\n * Default properties of a file preview component.\n * They are shared between the default and custom renderers.\n */\nexport interface FilePreviewDefaultProps\n    extends\n        Omit<React.HTMLAttributes<HTMLDivElement>, \"children\">,\n        VariantProps<typeof previewVariants> {\n    onReplaceItem?: () => void;\n    onRemoveItem?: () => void;\n    onEditItem?: () => void;\n    value: FileItemFormatted;\n    disabled?: boolean;\n}\n\n/**\n * Properties that can be used to render a custom file preview component.\n * @see `renderFilePreview` property of the FilePickerPrimitiveProps.\n */\nexport type FilePreviewRendererProps = Omit<FilePreviewDefaultProps, \"type\"> & Record<string, any>;\n\n/**\n * Default properties of a trigger component.\n * They are shared between the default and custom renderers.\n */\nexport interface TriggerDefaultProps extends React.HTMLAttributes<HTMLButtonElement> {\n    disabled?: boolean;\n    text?: string;\n    onSelectItem: () => void;\n}\n\n/**\n * Properties that can be used to render a custom trigger component.\n * @see `renderTrigger` property of the FilePickerPrimitiveProps.\n */\nexport type TriggerRendererProps = TriggerDefaultProps & Record<string, any>;\n"],"mappings":"","ignoreList":[]}

package/FormComponent/Description.d.ts

@@ -3,7 +3,7 @@ import { type TextProps } from "../Text/index.js";
 import { type VariantProps } from "../utils.js";
 declare const formComponentDescriptionVariants: (props?: ({
     disabled?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type FormComponentDescriptionProps = TextProps & VariantProps<typeof formComponentDescriptionVariants> & {
     text?: React.ReactNode;
 };

package/FormComponent/ErrorMessage.d.ts

@@ -3,7 +3,7 @@ import { type TextProps } from "../Text/index.js";
 import { type VariantProps } from "../utils.js";
 declare const formComponentErrorMessageVariants: (props?: ({
     disabled?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type FormComponentErrorMessageProps = TextProps & VariantProps<typeof formComponentErrorMessageVariants> & {
     text?: React.ReactNode;
     invalid?: boolean;

package/FormComponent/Note.d.ts

@@ -3,7 +3,7 @@ import { type TextProps } from "../Text/index.js";
 import { type VariantProps } from "../utils.js";
 declare const formComponentNoteVariants: (props?: ({
     disabled?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type FormComponentNoteProps = TextProps & VariantProps<typeof formComponentNoteVariants> & {
     text?: React.ReactNode;
 };

package/Grid/Grid.d.ts

@@ -4,7 +4,7 @@ declare const columnVariants: (props?: ({
     span?: 1 | 2 | 4 | 3 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | "auto" | null | undefined;
     offset?: 1 | 2 | 4 | 3 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | null | undefined;
     align?: "bottom" | "top" | "middle" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface ColumnProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof columnVariants> {
     children?: React.ReactNode;
 }
@@ -29,7 +29,7 @@ declare const Column: (({ span, align, children, className, offset, ...props }:
 };
 declare const gridVariants: (props?: ({
     gap?: "none" | "small" | "compact" | "micro" | "comfortable" | "spacious" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface GridProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof gridVariants> {
     children: null | React.ReactElement<ColumnProps, typeof Column> | Array<React.ReactElement<ColumnProps, typeof Column>>;
 }

package/Grid/Grid.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","cn","cva","withStaticProps","makeDecoratable","columnVariants","variants","span","auto","offset","align","top","middle","bottom","defaultVariants","ColumnBase","children","className","props","createElement","Object","assign","Column","gridVariants","gap","none","micro","small","compact","comfortable","spacious","GridBase","DecoratableGrid","Grid"],"sources":["Grid.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn, cva, withStaticProps, makeDecoratable, type VariantProps } from \"~/utils.js\";\n\nconst columnVariants = cva(\"\", {\n    variants: {\n        span: {\n            auto: \"col-auto\",\n            1: \"col-span-1\",\n            2: \"col-span-2\",\n            3: \"col-span-3\",\n            4: \"col-span-4\",\n            5: \"col-span-5\",\n            6: \"col-span-6\",\n            7: \"col-span-7\",\n            8: \"col-span-8\",\n            9: \"col-span-9\",\n            10: \"col-span-10\",\n            11: \"col-span-11\",\n            12: \"col-span-12\"\n        },\n        offset: {\n            1: \"col-start-2\",\n            2: \"col-start-3\",\n            3: \"col-start-4\",\n            4: \"col-start-5\",\n            5: \"col-start-6\",\n            6: \"col-start-7\",\n            7: \"col-start-8\",\n            8: \"col-start-9\",\n            9: \"col-start-10\",\n            10: \"col-start-11\",\n            11: \"col-start-12\"\n        },\n        align: {\n            top: \"self-start\",\n            middle: \"self-center\",\n            bottom: \"self-end\"\n        }\n    },\n    defaultVariants: {\n        span: \"auto\"\n    }\n});\n\ninterface ColumnProps\n    extends React.HTMLAttributes<HTMLDivElement>,\n        VariantProps<typeof columnVariants> {\n    children?: React.ReactNode;\n}\n\nconst ColumnBase = ({ span, align, children, className, offset, ...props }: ColumnProps) => {\n    return (\n        <div {...props} className={cn(columnVariants({ span, offset, align }), className)}>\n            {children}\n        </div>\n    );\n};\n\nconst Column = makeDecoratable(\"Column\", ColumnBase);\n\nconst gridVariants = cva(\"grid\", {\n    variants: {\n        gap: {\n            none: \"gap-0\",\n            micro: \"gap-xs\",\n            small: \"gap-sm\",\n            compact: \"gap-md\",\n            comfortable: \"gap-lg\",\n            spacious: \"gap-xl\"\n        }\n    },\n    defaultVariants: {\n        gap: \"comfortable\"\n    }\n});\n\ninterface GridProps\n    extends React.HTMLAttributes<HTMLDivElement>,\n        VariantProps<typeof gridVariants> {\n    children:\n        | null\n        | React.ReactElement<ColumnProps, typeof Column>\n        | Array<React.ReactElement<ColumnProps, typeof Column>>;\n}\n\nconst GridBase = ({ gap, children, className, ...props }: GridProps) => {\n    return (\n        <div {...props} className={cn(\"grid-cols-12\", gridVariants({ gap }), className)}>\n            {children}\n        </div>\n    );\n};\n\nconst DecoratableGrid = makeDecoratable(\"Grid\", GridBase);\n\nconst Grid = withStaticProps(DecoratableGrid, { Column });\n\nexport { Grid, type GridProps, type ColumnProps };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,EAAE,EAAEC,GAAG,EAAEC,eAAe,EAAEC,eAAe;AAElD,MAAMC,cAAc,GAAGH,GAAG,CAAC,EAAE,EAAE;EAC3BI,QAAQ,EAAE;IACNC,IAAI,EAAE;MACFC,IAAI,EAAE,UAAU;MAChB,CAAC,EAAE,YAAY;MACf,CAAC,EAAE,YAAY;MACf,CAAC,EAAE,YAAY;MACf,CAAC,EAAE,YAAY;MACf,CAAC,EAAE,YAAY;MACf,CAAC,EAAE,YAAY;MACf,CAAC,EAAE,YAAY;MACf,CAAC,EAAE,YAAY;MACf,CAAC,EAAE,YAAY;MACf,EAAE,EAAE,aAAa;MACjB,EAAE,EAAE,aAAa;MACjB,EAAE,EAAE;IACR,CAAC;IACDC,MAAM,EAAE;MACJ,CAAC,EAAE,aAAa;MAChB,CAAC,EAAE,aAAa;MAChB,CAAC,EAAE,aAAa;MAChB,CAAC,EAAE,aAAa;MAChB,CAAC,EAAE,aAAa;MAChB,CAAC,EAAE,aAAa;MAChB,CAAC,EAAE,aAAa;MAChB,CAAC,EAAE,aAAa;MAChB,CAAC,EAAE,cAAc;MACjB,EAAE,EAAE,cAAc;MAClB,EAAE,EAAE;IACR,CAAC;IACDC,KAAK,EAAE;MACHC,GAAG,EAAE,YAAY;MACjBC,MAAM,EAAE,aAAa;MACrBC,MAAM,EAAE;IACZ;EACJ,CAAC;EACDC,eAAe,EAAE;IACbP,IAAI,EAAE;EACV;AACJ,CAAC,CAAC;AAQF,MAAMQ,UAAU,GAAGA,CAAC;EAAER,IAAI;EAAEG,KAAK;EAAEM,QAAQ;EAAEC,SAAS;EAAER,MAAM;EAAE,GAAGS;AAAmB,CAAC,KAAK;EACxF,oBACIlB,KAAA,CAAAmB,aAAA,QAAAC,MAAA,CAAAC,MAAA,KAASH,KAAK;IAAED,SAAS,EAAEhB,EAAE,CAACI,cAAc,CAAC;MAAEE,IAAI;MAAEE,MAAM;MAAEC;IAAM,CAAC,CAAC,EAAEO,SAAS;EAAE,IAC7ED,QACA,CAAC;AAEd,CAAC;AAED,MAAMM,MAAM,GAAGlB,eAAe,CAAC,QAAQ,EAAEW,UAAU,CAAC;AAEpD,MAAMQ,YAAY,GAAGrB,GAAG,CAAC,MAAM,EAAE;EAC7BI,QAAQ,EAAE;IACNkB,GAAG,EAAE;MACDC,IAAI,EAAE,OAAO;MACbC,KAAK,EAAE,QAAQ;MACfC,KAAK,EAAE,QAAQ;MACfC,OAAO,EAAE,QAAQ;MACjBC,WAAW,EAAE,QAAQ;MACrBC,QAAQ,EAAE;IACd;EACJ,CAAC;EACDhB,eAAe,EAAE;IACbU,GAAG,EAAE;EACT;AACJ,CAAC,CAAC;AAWF,MAAMO,QAAQ,GAAGA,CAAC;EAAEP,GAAG;EAAER,QAAQ;EAAEC,SAAS;EAAE,GAAGC;AAAiB,CAAC,KAAK;EACpE,oBACIlB,KAAA,CAAAmB,aAAA,QAAAC,MAAA,CAAAC,MAAA,KAASH,KAAK;IAAED,SAAS,EAAEhB,EAAE,CAAC,cAAc,EAAEsB,YAAY,CAAC;MAAEC;IAAI,CAAC,CAAC,EAAEP,SAAS;EAAE,IAC3ED,QACA,CAAC;AAEd,CAAC;AAED,MAAMgB,eAAe,GAAG5B,eAAe,CAAC,MAAM,EAAE2B,QAAQ,CAAC;AAEzD,MAAME,IAAI,GAAG9B,eAAe,CAAC6B,eAAe,EAAE;EAAEV;AAAO,CAAC,CAAC;AAEzD,SAASW,IAAI","ignoreList":[]}
+{"version":3,"names":["React","cn","cva","withStaticProps","makeDecoratable","columnVariants","variants","span","auto","offset","align","top","middle","bottom","defaultVariants","ColumnBase","children","className","props","createElement","Object","assign","Column","gridVariants","gap","none","micro","small","compact","comfortable","spacious","GridBase","DecoratableGrid","Grid"],"sources":["Grid.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn, cva, withStaticProps, makeDecoratable, type VariantProps } from \"~/utils.js\";\n\nconst columnVariants = cva(\"\", {\n    variants: {\n        span: {\n            auto: \"col-auto\",\n            1: \"col-span-1\",\n            2: \"col-span-2\",\n            3: \"col-span-3\",\n            4: \"col-span-4\",\n            5: \"col-span-5\",\n            6: \"col-span-6\",\n            7: \"col-span-7\",\n            8: \"col-span-8\",\n            9: \"col-span-9\",\n            10: \"col-span-10\",\n            11: \"col-span-11\",\n            12: \"col-span-12\"\n        },\n        offset: {\n            1: \"col-start-2\",\n            2: \"col-start-3\",\n            3: \"col-start-4\",\n            4: \"col-start-5\",\n            5: \"col-start-6\",\n            6: \"col-start-7\",\n            7: \"col-start-8\",\n            8: \"col-start-9\",\n            9: \"col-start-10\",\n            10: \"col-start-11\",\n            11: \"col-start-12\"\n        },\n        align: {\n            top: \"self-start\",\n            middle: \"self-center\",\n            bottom: \"self-end\"\n        }\n    },\n    defaultVariants: {\n        span: \"auto\"\n    }\n});\n\ninterface ColumnProps\n    extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof columnVariants> {\n    children?: React.ReactNode;\n}\n\nconst ColumnBase = ({ span, align, children, className, offset, ...props }: ColumnProps) => {\n    return (\n        <div {...props} className={cn(columnVariants({ span, offset, align }), className)}>\n            {children}\n        </div>\n    );\n};\n\nconst Column = makeDecoratable(\"Column\", ColumnBase);\n\nconst gridVariants = cva(\"grid\", {\n    variants: {\n        gap: {\n            none: \"gap-0\",\n            micro: \"gap-xs\",\n            small: \"gap-sm\",\n            compact: \"gap-md\",\n            comfortable: \"gap-lg\",\n            spacious: \"gap-xl\"\n        }\n    },\n    defaultVariants: {\n        gap: \"comfortable\"\n    }\n});\n\ninterface GridProps\n    extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof gridVariants> {\n    children:\n        | null\n        | React.ReactElement<ColumnProps, typeof Column>\n        | Array<React.ReactElement<ColumnProps, typeof Column>>;\n}\n\nconst GridBase = ({ gap, children, className, ...props }: GridProps) => {\n    return (\n        <div {...props} className={cn(\"grid-cols-12\", gridVariants({ gap }), className)}>\n            {children}\n        </div>\n    );\n};\n\nconst DecoratableGrid = makeDecoratable(\"Grid\", GridBase);\n\nconst Grid = withStaticProps(DecoratableGrid, { Column });\n\nexport { Grid, type GridProps, type ColumnProps };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,EAAE,EAAEC,GAAG,EAAEC,eAAe,EAAEC,eAAe;AAElD,MAAMC,cAAc,GAAGH,GAAG,CAAC,EAAE,EAAE;EAC3BI,QAAQ,EAAE;IACNC,IAAI,EAAE;MACFC,IAAI,EAAE,UAAU;MAChB,CAAC,EAAE,YAAY;MACf,CAAC,EAAE,YAAY;MACf,CAAC,EAAE,YAAY;MACf,CAAC,EAAE,YAAY;MACf,CAAC,EAAE,YAAY;MACf,CAAC,EAAE,YAAY;MACf,CAAC,EAAE,YAAY;MACf,CAAC,EAAE,YAAY;MACf,CAAC,EAAE,YAAY;MACf,EAAE,EAAE,aAAa;MACjB,EAAE,EAAE,aAAa;MACjB,EAAE,EAAE;IACR,CAAC;IACDC,MAAM,EAAE;MACJ,CAAC,EAAE,aAAa;MAChB,CAAC,EAAE,aAAa;MAChB,CAAC,EAAE,aAAa;MAChB,CAAC,EAAE,aAAa;MAChB,CAAC,EAAE,aAAa;MAChB,CAAC,EAAE,aAAa;MAChB,CAAC,EAAE,aAAa;MAChB,CAAC,EAAE,aAAa;MAChB,CAAC,EAAE,cAAc;MACjB,EAAE,EAAE,cAAc;MAClB,EAAE,EAAE;IACR,CAAC;IACDC,KAAK,EAAE;MACHC,GAAG,EAAE,YAAY;MACjBC,MAAM,EAAE,aAAa;MACrBC,MAAM,EAAE;IACZ;EACJ,CAAC;EACDC,eAAe,EAAE;IACbP,IAAI,EAAE;EACV;AACJ,CAAC,CAAC;AAOF,MAAMQ,UAAU,GAAGA,CAAC;EAAER,IAAI;EAAEG,KAAK;EAAEM,QAAQ;EAAEC,SAAS;EAAER,MAAM;EAAE,GAAGS;AAAmB,CAAC,KAAK;EACxF,oBACIlB,KAAA,CAAAmB,aAAA,QAAAC,MAAA,CAAAC,MAAA,KAASH,KAAK;IAAED,SAAS,EAAEhB,EAAE,CAACI,cAAc,CAAC;MAAEE,IAAI;MAAEE,MAAM;MAAEC;IAAM,CAAC,CAAC,EAAEO,SAAS;EAAE,IAC7ED,QACA,CAAC;AAEd,CAAC;AAED,MAAMM,MAAM,GAAGlB,eAAe,CAAC,QAAQ,EAAEW,UAAU,CAAC;AAEpD,MAAMQ,YAAY,GAAGrB,GAAG,CAAC,MAAM,EAAE;EAC7BI,QAAQ,EAAE;IACNkB,GAAG,EAAE;MACDC,IAAI,EAAE,OAAO;MACbC,KAAK,EAAE,QAAQ;MACfC,KAAK,EAAE,QAAQ;MACfC,OAAO,EAAE,QAAQ;MACjBC,WAAW,EAAE,QAAQ;MACrBC,QAAQ,EAAE;IACd;EACJ,CAAC;EACDhB,eAAe,EAAE;IACbU,GAAG,EAAE;EACT;AACJ,CAAC,CAAC;AAUF,MAAMO,QAAQ,GAAGA,CAAC;EAAEP,GAAG;EAAER,QAAQ;EAAEC,SAAS;EAAE,GAAGC;AAAiB,CAAC,KAAK;EACpE,oBACIlB,KAAA,CAAAmB,aAAA,QAAAC,MAAA,CAAAC,MAAA,KAASH,KAAK;IAAED,SAAS,EAAEhB,EAAE,CAAC,cAAc,EAAEsB,YAAY,CAAC;MAAEC;IAAI,CAAC,CAAC,EAAEP,SAAS;EAAE,IAC3ED,QACA,CAAC;AAEd,CAAC;AAED,MAAMgB,eAAe,GAAG5B,eAAe,CAAC,MAAM,EAAE2B,QAAQ,CAAC;AAEzD,MAAME,IAAI,GAAG9B,eAAe,CAAC6B,eAAe,EAAE;EAAEV;AAAO,CAAC,CAAC;AAEzD,SAASW,IAAI","ignoreList":[]}