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

package/FilePicker/primitives/FilePickerPrimitive.stories.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useState","FilePickerPrimitive","getRandomNumber","min","max","Math","floor","random","getFile","width","height","fileSize","name","mimeType","size","url","meta","title","component","argTypes","onSelectItem","action","onEditItem","onRemoveItem","disabled","control","defaultValue","parameters","layout","render","args","selectedFile","setSelectedFile","value","createElement","Object","assign","alert","Default","label","AreaType","type","AreaPrimaryVariant","variant","AreaPrimaryVariantDisabled","AreaPrimaryVariantInvalid","invalid","AreaSecondaryVariant","AreaSecondaryVariantDisabled","AreaSecondaryVariantInvalid","AreaGhostVariant","AreaGhostVariantDisabled","AreaGhostVariantInvalid","AreaWithImagePreview","renderFilePreview","props","Preview","Image","AreaWithImagePreviewLight","AreaWithImagePreviewBase","AreaWithImagePreviewTransparent","AreaWithRichItemPreview","RichItem","AreaWithRichItemPreviewLight","AreaWithRichItemPreviewBase","AreaWithRichItemPreviewTransparent","AreaWithRichItemThumbnailPreview","preview","AreaWithRichItemFileTypePreview","AreaWithRichItemFileTypePlaceholder","AreaWithTextOnlyPreview","TextOnly","AreaWithTextOnlyPreviewLight","AreaWithTextOnlyPreviewBase","AreaWithTextOnlyPreviewTransparent","CompactType","CompactPrimaryVariant","CompactPrimaryVariantDisabled","CompactPrimaryVariantInvalid","CompactSecondaryVariant","CompactSecondaryVariantDisabled","CompactSecondaryVariantInvalid","CompactGhostVariant","CompactGhostVariantDisabled","CompactGhostVariantInvalid","CompactWithTextOnlyPreviewSmall","small"],"sources":["FilePickerPrimitive.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { FilePickerPrimitive } from \"./FilePickerPrimitive.js\";\nimport type { FileItemDto } from \"~/FilePicker//index.js\";\n\nconst getRandomNumber = (min: number, max: number): number =>\n    Math.floor(Math.random() * (max - min + 1)) + min;\n\nconst getFile = (): FileItemDto => {\n    const width = getRandomNumber(500, 2000); // Random width between 500 and 2000\n    const height = getRandomNumber(500, 2000); // Random height between 500 and 2000\n    const fileSize = getRandomNumber(500000, 5000000); // Random file size between 500KB and 5MB\n\n    return {\n        name: \"selected-file.jpg\",\n        mimeType: \"image/jpeg\",\n        size: fileSize,\n        url: `https://picsum.photos/${width}/${height}`\n    };\n};\n\nconst meta: Meta<typeof FilePickerPrimitive> = {\n    title: \"Components/Form Primitives/FilePicker\",\n    component: FilePickerPrimitive,\n    argTypes: {\n        onSelectItem: { action: \"onSelectItem\" },\n        onEditItem: { action: \"onEditItem\" },\n        onRemoveItem: { action: \"onRemoveItem\" },\n        disabled: {\n            control: \"boolean\",\n            defaultValue: false\n        }\n    },\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [selectedFile, setSelectedFile] = useState(args.value);\n        return (\n            <FilePickerPrimitive\n                {...args}\n                value={selectedFile}\n                onSelectItem={() => setSelectedFile(getFile())}\n                onRemoveItem={() => setSelectedFile(null)}\n                onEditItem={() => alert(`Editing File`)}\n            />\n        );\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof FilePickerPrimitive>;\n\nexport const Default: Story = {\n    args: {\n        label: \"Upload background image\"\n    }\n};\n\nexport const AreaType: Story = {\n    args: {\n        ...Default.args,\n        type: \"area\"\n    }\n};\n\nexport const AreaPrimaryVariant: Story = {\n    args: {\n        ...AreaType.args,\n        variant: \"primary\"\n    }\n};\n\nexport const AreaPrimaryVariantDisabled: Story = {\n    args: {\n        ...AreaPrimaryVariant.args,\n        disabled: true\n    }\n};\n\nexport const AreaPrimaryVariantInvalid: Story = {\n    args: {\n        ...AreaPrimaryVariant.args,\n        invalid: true\n    }\n};\n\nexport const AreaSecondaryVariant: Story = {\n    args: {\n        ...AreaType.args,\n        variant: \"secondary\"\n    }\n};\n\nexport const AreaSecondaryVariantDisabled: Story = {\n    args: {\n        ...AreaSecondaryVariant.args,\n        disabled: true\n    }\n};\n\nexport const AreaSecondaryVariantInvalid: Story = {\n    args: {\n        ...AreaSecondaryVariant.args,\n        invalid: true\n    }\n};\n\nexport const AreaGhostVariant: Story = {\n    args: {\n        ...AreaType.args,\n        variant: \"ghost\"\n    }\n};\n\nexport const AreaGhostVariantDisabled: Story = {\n    args: {\n        ...AreaGhostVariant.args,\n        disabled: true\n    }\n};\n\nexport const AreaGhostVariantInvalid: Story = {\n    args: {\n        ...AreaGhostVariant.args,\n        invalid: true\n    }\n};\n\nexport const AreaWithImagePreview: Story = {\n    args: {\n        ...AreaType.args,\n        renderFilePreview: props => <FilePickerPrimitive.Preview.Image {...props} />\n    }\n};\n\nexport const AreaWithImagePreviewLight: Story = {\n    args: {\n        ...AreaWithImagePreview.args,\n        renderFilePreview: props => (\n            <FilePickerPrimitive.Preview.Image variant={\"light\"} {...props} />\n        )\n    }\n};\n\nexport const AreaWithImagePreviewBase: Story = {\n    args: {\n        ...AreaWithImagePreview.args,\n        renderFilePreview: props => (\n            <FilePickerPrimitive.Preview.Image variant={\"base\"} {...props} />\n        )\n    }\n};\n\nexport const AreaWithImagePreviewTransparent: Story = {\n    args: {\n        ...AreaWithImagePreview.args,\n        renderFilePreview: props => (\n            <FilePickerPrimitive.Preview.Image variant={\"transparent\"} {...props} />\n        )\n    }\n};\n\nexport const AreaWithRichItemPreview: Story = {\n    args: {\n        ...AreaType.args,\n        renderFilePreview: props => <FilePickerPrimitive.Preview.RichItem {...props} />\n    }\n};\n\nexport const AreaWithRichItemPreviewLight: Story = {\n    args: {\n        ...AreaWithRichItemPreview.args,\n        renderFilePreview: props => (\n            <FilePickerPrimitive.Preview.RichItem variant={\"light\"} {...props} />\n        )\n    }\n};\n\nexport const AreaWithRichItemPreviewBase: Story = {\n    args: {\n        ...AreaWithRichItemPreview.args,\n        renderFilePreview: props => (\n            <FilePickerPrimitive.Preview.RichItem variant={\"base\"} {...props} />\n        )\n    }\n};\n\nexport const AreaWithRichItemPreviewTransparent: Story = {\n    args: {\n        ...AreaWithRichItemPreview.args,\n        renderFilePreview: props => (\n            <FilePickerPrimitive.Preview.RichItem variant={\"transparent\"} {...props} />\n        )\n    }\n};\n\nexport const AreaWithRichItemThumbnailPreview: Story = {\n    args: {\n        ...AreaType.args,\n        renderFilePreview: props => (\n            <FilePickerPrimitive.Preview.RichItem preview={\"thumbnail\"} {...props} />\n        )\n    }\n};\n\nexport const AreaWithRichItemFileTypePreview: Story = {\n    args: {\n        ...AreaType.args,\n        value: {\n            name: \"export.csv\",\n            url: \"export.csv\",\n            mimeType: \"text/csv\",\n            size: 100000\n        },\n        renderFilePreview: props => (\n            <FilePickerPrimitive.Preview.RichItem preview={\"file-type\"} {...props} />\n        )\n    }\n};\n\nexport const AreaWithRichItemFileTypePlaceholder: Story = {\n    args: {\n        ...AreaType.args,\n        renderFilePreview: props => (\n            <FilePickerPrimitive.Preview.RichItem preview={\"placeholder\"} {...props} />\n        )\n    }\n};\n\nexport const AreaWithTextOnlyPreview: Story = {\n    args: {\n        ...AreaType.args,\n        renderFilePreview: props => <FilePickerPrimitive.Preview.TextOnly {...props} />\n    }\n};\n\nexport const AreaWithTextOnlyPreviewLight: Story = {\n    args: {\n        ...AreaWithTextOnlyPreview.args,\n        renderFilePreview: props => (\n            <FilePickerPrimitive.Preview.TextOnly variant={\"light\"} {...props} />\n        )\n    }\n};\n\nexport const AreaWithTextOnlyPreviewBase: Story = {\n    args: {\n        ...AreaWithTextOnlyPreview.args,\n        renderFilePreview: props => (\n            <FilePickerPrimitive.Preview.TextOnly variant={\"base\"} {...props} />\n        )\n    }\n};\n\nexport const AreaWithTextOnlyPreviewTransparent: Story = {\n    args: {\n        ...AreaWithTextOnlyPreview.args,\n        renderFilePreview: props => (\n            <FilePickerPrimitive.Preview.TextOnly variant={\"transparent\"} {...props} />\n        )\n    }\n};\n\nexport const CompactType: Story = {\n    args: {\n        ...Default.args,\n        type: \"compact\"\n    }\n};\n\nexport const CompactPrimaryVariant: Story = {\n    args: {\n        ...CompactType.args,\n        variant: \"primary\"\n    }\n};\n\nexport const CompactPrimaryVariantDisabled: Story = {\n    args: {\n        ...CompactPrimaryVariant.args,\n        disabled: true\n    }\n};\n\nexport const CompactPrimaryVariantInvalid: Story = {\n    args: {\n        ...CompactPrimaryVariant.args,\n        invalid: true\n    }\n};\n\nexport const CompactSecondaryVariant: Story = {\n    args: {\n        ...CompactType.args,\n        variant: \"secondary\"\n    }\n};\n\nexport const CompactSecondaryVariantDisabled: Story = {\n    args: {\n        ...CompactSecondaryVariant.args,\n        disabled: true\n    }\n};\n\nexport const CompactSecondaryVariantInvalid: Story = {\n    args: {\n        ...CompactSecondaryVariant.args,\n        invalid: true\n    }\n};\n\nexport const CompactGhostVariant: Story = {\n    args: {\n        ...CompactType.args,\n        variant: \"ghost\"\n    }\n};\n\nexport const CompactGhostVariantDisabled: Story = {\n    args: {\n        ...CompactGhostVariant.args,\n        disabled: true\n    }\n};\n\nexport const CompactGhostVariantInvalid: Story = {\n    args: {\n        ...CompactGhostVariant.args,\n        invalid: true\n    }\n};\n\nexport const CompactWithTextOnlyPreviewSmall: Story = {\n    args: {\n        ...CompactType.args,\n        renderFilePreview: props => <FilePickerPrimitive.Preview.TextOnly {...props} small={true} />\n    }\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"FilePicker/primitives/FilePickerPrimitive.stories.js","sources":["../../../src/FilePicker/primitives/FilePickerPrimitive.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { FilePickerPrimitive } from \"./FilePickerPrimitive.js\";\nimport type { FileItemDto } from \"~/FilePicker//index.js\";\n\nconst getRandomNumber = (min: number, max: number): number =>\n    Math.floor(Math.random() * (max - min + 1)) + min;\n\nconst getFile = (): FileItemDto => {\n    const width = getRandomNumber(500, 2000); // Random width between 500 and 2000\n    const height = getRandomNumber(500, 2000); // Random height between 500 and 2000\n    const fileSize = getRandomNumber(500000, 5000000); // Random file size between 500KB and 5MB\n\n    return {\n        name: \"selected-file.jpg\",\n        mimeType: \"image/jpeg\",\n        size: fileSize,\n        url: `https://picsum.photos/${width}/${height}`\n    };\n};\n\nconst meta: Meta<typeof FilePickerPrimitive> = {\n    title: \"Components/Form Primitives/FilePicker\",\n    component: FilePickerPrimitive,\n    argTypes: {\n        onSelectItem: { action: \"onSelectItem\" },\n        onEditItem: { action: \"onEditItem\" },\n        onRemoveItem: { action: \"onRemoveItem\" },\n        disabled: {\n            control: \"boolean\",\n            defaultValue: false\n        }\n    },\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [selectedFile, setSelectedFile] = useState(args.value);\n        return (\n            <FilePickerPrimitive\n                {...args}\n                value={selectedFile}\n                onSelectItem={() => setSelectedFile(getFile())}\n                onRemoveItem={() => setSelectedFile(null)}\n                onEditItem={() => alert(`Editing File`)}\n            />\n        );\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof FilePickerPrimitive>;\n\nexport const Default: Story = {\n    args: {\n        label: \"Upload background image\"\n    }\n};\n\nexport const AreaType: Story = {\n    args: {\n        ...Default.args,\n        type: \"area\"\n    }\n};\n\nexport const AreaPrimaryVariant: Story = {\n    args: {\n        ...AreaType.args,\n        variant: \"primary\"\n    }\n};\n\nexport const AreaPrimaryVariantDisabled: Story = {\n    args: {\n        ...AreaPrimaryVariant.args,\n        disabled: true\n    }\n};\n\nexport const AreaPrimaryVariantInvalid: Story = {\n    args: {\n        ...AreaPrimaryVariant.args,\n        invalid: true\n    }\n};\n\nexport const AreaSecondaryVariant: Story = {\n    args: {\n        ...AreaType.args,\n        variant: \"secondary\"\n    }\n};\n\nexport const AreaSecondaryVariantDisabled: Story = {\n    args: {\n        ...AreaSecondaryVariant.args,\n        disabled: true\n    }\n};\n\nexport const AreaSecondaryVariantInvalid: Story = {\n    args: {\n        ...AreaSecondaryVariant.args,\n        invalid: true\n    }\n};\n\nexport const AreaGhostVariant: Story = {\n    args: {\n        ...AreaType.args,\n        variant: \"ghost\"\n    }\n};\n\nexport const AreaGhostVariantDisabled: Story = {\n    args: {\n        ...AreaGhostVariant.args,\n        disabled: true\n    }\n};\n\nexport const AreaGhostVariantInvalid: Story = {\n    args: {\n        ...AreaGhostVariant.args,\n        invalid: true\n    }\n};\n\nexport const AreaWithImagePreview: Story = {\n    args: {\n        ...AreaType.args,\n        renderFilePreview: props => <FilePickerPrimitive.Preview.Image {...props} />\n    }\n};\n\nexport const AreaWithImagePreviewLight: Story = {\n    args: {\n        ...AreaWithImagePreview.args,\n        renderFilePreview: props => (\n            <FilePickerPrimitive.Preview.Image variant={\"light\"} {...props} />\n        )\n    }\n};\n\nexport const AreaWithImagePreviewBase: Story = {\n    args: {\n        ...AreaWithImagePreview.args,\n        renderFilePreview: props => (\n            <FilePickerPrimitive.Preview.Image variant={\"base\"} {...props} />\n        )\n    }\n};\n\nexport const AreaWithImagePreviewTransparent: Story = {\n    args: {\n        ...AreaWithImagePreview.args,\n        renderFilePreview: props => (\n            <FilePickerPrimitive.Preview.Image variant={\"transparent\"} {...props} />\n        )\n    }\n};\n\nexport const AreaWithRichItemPreview: Story = {\n    args: {\n        ...AreaType.args,\n        renderFilePreview: props => <FilePickerPrimitive.Preview.RichItem {...props} />\n    }\n};\n\nexport const AreaWithRichItemPreviewLight: Story = {\n    args: {\n        ...AreaWithRichItemPreview.args,\n        renderFilePreview: props => (\n            <FilePickerPrimitive.Preview.RichItem variant={\"light\"} {...props} />\n        )\n    }\n};\n\nexport const AreaWithRichItemPreviewBase: Story = {\n    args: {\n        ...AreaWithRichItemPreview.args,\n        renderFilePreview: props => (\n            <FilePickerPrimitive.Preview.RichItem variant={\"base\"} {...props} />\n        )\n    }\n};\n\nexport const AreaWithRichItemPreviewTransparent: Story = {\n    args: {\n        ...AreaWithRichItemPreview.args,\n        renderFilePreview: props => (\n            <FilePickerPrimitive.Preview.RichItem variant={\"transparent\"} {...props} />\n        )\n    }\n};\n\nexport const AreaWithRichItemThumbnailPreview: Story = {\n    args: {\n        ...AreaType.args,\n        renderFilePreview: props => (\n            <FilePickerPrimitive.Preview.RichItem preview={\"thumbnail\"} {...props} />\n        )\n    }\n};\n\nexport const AreaWithRichItemFileTypePreview: Story = {\n    args: {\n        ...AreaType.args,\n        value: {\n            name: \"export.csv\",\n            url: \"export.csv\",\n            mimeType: \"text/csv\",\n            size: 100000\n        },\n        renderFilePreview: props => (\n            <FilePickerPrimitive.Preview.RichItem preview={\"file-type\"} {...props} />\n        )\n    }\n};\n\nexport const AreaWithRichItemFileTypePlaceholder: Story = {\n    args: {\n        ...AreaType.args,\n        renderFilePreview: props => (\n            <FilePickerPrimitive.Preview.RichItem preview={\"placeholder\"} {...props} />\n        )\n    }\n};\n\nexport const AreaWithTextOnlyPreview: Story = {\n    args: {\n        ...AreaType.args,\n        renderFilePreview: props => <FilePickerPrimitive.Preview.TextOnly {...props} />\n    }\n};\n\nexport const AreaWithTextOnlyPreviewLight: Story = {\n    args: {\n        ...AreaWithTextOnlyPreview.args,\n        renderFilePreview: props => (\n            <FilePickerPrimitive.Preview.TextOnly variant={\"light\"} {...props} />\n        )\n    }\n};\n\nexport const AreaWithTextOnlyPreviewBase: Story = {\n    args: {\n        ...AreaWithTextOnlyPreview.args,\n        renderFilePreview: props => (\n            <FilePickerPrimitive.Preview.TextOnly variant={\"base\"} {...props} />\n        )\n    }\n};\n\nexport const AreaWithTextOnlyPreviewTransparent: Story = {\n    args: {\n        ...AreaWithTextOnlyPreview.args,\n        renderFilePreview: props => (\n            <FilePickerPrimitive.Preview.TextOnly variant={\"transparent\"} {...props} />\n        )\n    }\n};\n\nexport const CompactType: Story = {\n    args: {\n        ...Default.args,\n        type: \"compact\"\n    }\n};\n\nexport const CompactPrimaryVariant: Story = {\n    args: {\n        ...CompactType.args,\n        variant: \"primary\"\n    }\n};\n\nexport const CompactPrimaryVariantDisabled: Story = {\n    args: {\n        ...CompactPrimaryVariant.args,\n        disabled: true\n    }\n};\n\nexport const CompactPrimaryVariantInvalid: Story = {\n    args: {\n        ...CompactPrimaryVariant.args,\n        invalid: true\n    }\n};\n\nexport const CompactSecondaryVariant: Story = {\n    args: {\n        ...CompactType.args,\n        variant: \"secondary\"\n    }\n};\n\nexport const CompactSecondaryVariantDisabled: Story = {\n    args: {\n        ...CompactSecondaryVariant.args,\n        disabled: true\n    }\n};\n\nexport const CompactSecondaryVariantInvalid: Story = {\n    args: {\n        ...CompactSecondaryVariant.args,\n        invalid: true\n    }\n};\n\nexport const CompactGhostVariant: Story = {\n    args: {\n        ...CompactType.args,\n        variant: \"ghost\"\n    }\n};\n\nexport const CompactGhostVariantDisabled: Story = {\n    args: {\n        ...CompactGhostVariant.args,\n        disabled: true\n    }\n};\n\nexport const CompactGhostVariantInvalid: Story = {\n    args: {\n        ...CompactGhostVariant.args,\n        invalid: true\n    }\n};\n\nexport const CompactWithTextOnlyPreviewSmall: Story = {\n    args: {\n        ...CompactType.args,\n        renderFilePreview: props => <FilePickerPrimitive.Preview.TextOnly {...props} small={true} />\n    }\n};\n"],"names":["getRandomNumber","min","max","Math","getFile","width","height","fileSize","meta","FilePickerPrimitive","args","selectedFile","setSelectedFile","useState","alert","Default","AreaType","AreaPrimaryVariant","AreaPrimaryVariantDisabled","AreaPrimaryVariantInvalid","AreaSecondaryVariant","AreaSecondaryVariantDisabled","AreaSecondaryVariantInvalid","AreaGhostVariant","AreaGhostVariantDisabled","AreaGhostVariantInvalid","AreaWithImagePreview","props","AreaWithImagePreviewLight","AreaWithImagePreviewBase","AreaWithImagePreviewTransparent","AreaWithRichItemPreview","AreaWithRichItemPreviewLight","AreaWithRichItemPreviewBase","AreaWithRichItemPreviewTransparent","AreaWithRichItemThumbnailPreview","AreaWithRichItemFileTypePreview","AreaWithRichItemFileTypePlaceholder","AreaWithTextOnlyPreview","AreaWithTextOnlyPreviewLight","AreaWithTextOnlyPreviewBase","AreaWithTextOnlyPreviewTransparent","CompactType","CompactPrimaryVariant","CompactPrimaryVariantDisabled","CompactPrimaryVariantInvalid","CompactSecondaryVariant","CompactSecondaryVariantDisabled","CompactSecondaryVariantInvalid","CompactGhostVariant","CompactGhostVariantDisabled","CompactGhostVariantInvalid","CompactWithTextOnlyPreviewSmall"],"mappings":"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"}

package/FilePicker/primitives/components/Description.js

@@ -1,18 +1,12 @@
-import * as React from "react";
 import { FormComponentDescription } from "../../../FormComponent/index.js";
-const FilePickerDescription = ({
-  description,
-  disabled,
-  className
-}) => {
-  if (!description) {
-    return null;
-  }
-  return /*#__PURE__*/React.createElement(FormComponentDescription, {
-    text: description,
-    disabled: disabled,
-    className: className
-  });
+import * as __rspack_external_react from "react";
+const FilePickerDescription = ({ description, disabled, className })=>{
+    if (!description) return null;
+    return /*#__PURE__*/ __rspack_external_react.createElement(FormComponentDescription, {
+        text: description,
+        disabled: disabled,
+        className: className
+    });
 };
 export { FilePickerDescription };
 

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

@@ -1 +1 @@
-{"version":3,"names":["React","FormComponentDescription","FilePickerDescription","description","disabled","className","createElement","text"],"sources":["Description.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { FormComponentDescription, type FormComponentProps } from \"~/FormComponent/index.js\";\n\ntype FilePickerDescriptionProps = Pick<FormComponentProps, \"description\" | \"disabled\"> & {\n    invalid?: boolean;\n    className?: string;\n};\n\nconst FilePickerDescription = ({\n    description,\n    disabled,\n    className\n}: FilePickerDescriptionProps) => {\n    if (!description) {\n        return null;\n    }\n\n    return (\n        <FormComponentDescription text={description} disabled={disabled} className={className} />\n    );\n};\n\nexport { FilePickerDescription, type FilePickerDescriptionProps };\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,wBAAwB;AAOjC,MAAMC,qBAAqB,GAAGA,CAAC;EAC3BC,WAAW;EACXC,QAAQ;EACRC;AACwB,CAAC,KAAK;EAC9B,IAAI,CAACF,WAAW,EAAE;IACd,OAAO,IAAI;EACf;EAEA,oBACIH,KAAA,CAAAM,aAAA,CAACL,wBAAwB;IAACM,IAAI,EAAEJ,WAAY;IAACC,QAAQ,EAAEA,QAAS;IAACC,SAAS,EAAEA;EAAU,CAAE,CAAC;AAEjG,CAAC;AAED,SAASH,qBAAqB","ignoreList":[]}
+{"version":3,"file":"FilePicker/primitives/components/Description.js","sources":["../../../../src/FilePicker/primitives/components/Description.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { FormComponentDescription, type FormComponentProps } from \"~/FormComponent/index.js\";\n\ntype FilePickerDescriptionProps = Pick<FormComponentProps, \"description\" | \"disabled\"> & {\n    invalid?: boolean;\n    className?: string;\n};\n\nconst FilePickerDescription = ({\n    description,\n    disabled,\n    className\n}: FilePickerDescriptionProps) => {\n    if (!description) {\n        return null;\n    }\n\n    return (\n        <FormComponentDescription text={description} disabled={disabled} className={className} />\n    );\n};\n\nexport { FilePickerDescription, type FilePickerDescriptionProps };\n"],"names":["FilePickerDescription","description","disabled","className","FormComponentDescription"],"mappings":";;AAQA,MAAMA,wBAAwB,CAAC,EAC3BC,WAAW,EACXC,QAAQ,EACRC,SAAS,EACgB;IACzB,IAAI,CAACF,aACD,OAAO;IAGX,OAAO,WAAP,GACI,sCAACG,0BAAwBA;QAAC,MAAMH;QAAa,UAAUC;QAAU,WAAWC;;AAEpF"}

package/FilePicker/primitives/components/Label.js

@@ -1,24 +1,15 @@
-import * as React from "react";
 import { FormComponentLabel } from "../../../FormComponent/index.js";
-const FilePickerLabel = ({
-  label,
-  hint,
-  required,
-  disabled,
-  invalid,
-  className
-}) => {
-  if (!label) {
-    return null;
-  }
-  return /*#__PURE__*/React.createElement(FormComponentLabel, {
-    text: label,
-    hint: hint,
-    required: required,
-    disabled: disabled,
-    className: className,
-    invalid: invalid
-  });
+import * as __rspack_external_react from "react";
+const FilePickerLabel = ({ label, hint, required, disabled, invalid, className })=>{
+    if (!label) return null;
+    return /*#__PURE__*/ __rspack_external_react.createElement(FormComponentLabel, {
+        text: label,
+        hint: hint,
+        required: required,
+        disabled: disabled,
+        className: className,
+        invalid: invalid
+    });
 };
 export { FilePickerLabel };
 

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

@@ -1 +1 @@
-{"version":3,"names":["React","FormComponentLabel","FilePickerLabel","label","hint","required","disabled","invalid","className","createElement","text"],"sources":["Label.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { FormComponentLabel, type FormComponentProps } from \"~/FormComponent/index.js\";\n\ntype FilePickerLabelProps = Pick<FormComponentProps, \"label\" | \"disabled\" | \"required\" | \"hint\"> & {\n    invalid?: boolean;\n    className?: string;\n};\n\nconst FilePickerLabel = ({\n    label,\n    hint,\n    required,\n    disabled,\n    invalid,\n    className\n}: FilePickerLabelProps) => {\n    if (!label) {\n        return null;\n    }\n\n    return (\n        <FormComponentLabel\n            text={label}\n            hint={hint}\n            required={required}\n            disabled={disabled}\n            className={className}\n            invalid={invalid}\n        />\n    );\n};\n\nexport { FilePickerLabel, type FilePickerLabelProps };\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,kBAAkB;AAO3B,MAAMC,eAAe,GAAGA,CAAC;EACrBC,KAAK;EACLC,IAAI;EACJC,QAAQ;EACRC,QAAQ;EACRC,OAAO;EACPC;AACkB,CAAC,KAAK;EACxB,IAAI,CAACL,KAAK,EAAE;IACR,OAAO,IAAI;EACf;EAEA,oBACIH,KAAA,CAAAS,aAAA,CAACR,kBAAkB;IACfS,IAAI,EAAEP,KAAM;IACZC,IAAI,EAAEA,IAAK;IACXC,QAAQ,EAAEA,QAAS;IACnBC,QAAQ,EAAEA,QAAS;IACnBE,SAAS,EAAEA,SAAU;IACrBD,OAAO,EAAEA;EAAQ,CACpB,CAAC;AAEV,CAAC;AAED,SAASL,eAAe","ignoreList":[]}
+{"version":3,"file":"FilePicker/primitives/components/Label.js","sources":["../../../../src/FilePicker/primitives/components/Label.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { FormComponentLabel, type FormComponentProps } from \"~/FormComponent/index.js\";\n\ntype FilePickerLabelProps = Pick<FormComponentProps, \"label\" | \"disabled\" | \"required\" | \"hint\"> & {\n    invalid?: boolean;\n    className?: string;\n};\n\nconst FilePickerLabel = ({\n    label,\n    hint,\n    required,\n    disabled,\n    invalid,\n    className\n}: FilePickerLabelProps) => {\n    if (!label) {\n        return null;\n    }\n\n    return (\n        <FormComponentLabel\n            text={label}\n            hint={hint}\n            required={required}\n            disabled={disabled}\n            className={className}\n            invalid={invalid}\n        />\n    );\n};\n\nexport { FilePickerLabel, type FilePickerLabelProps };\n"],"names":["FilePickerLabel","label","hint","required","disabled","invalid","className","FormComponentLabel"],"mappings":";;AAQA,MAAMA,kBAAkB,CAAC,EACrBC,KAAK,EACLC,IAAI,EACJC,QAAQ,EACRC,QAAQ,EACRC,OAAO,EACPC,SAAS,EACU;IACnB,IAAI,CAACL,OACD,OAAO;IAGX,OAAO,WAAP,GACI,sCAACM,oBAAkBA;QACf,MAAMN;QACN,MAAMC;QACN,UAAUC;QACV,UAAUC;QACV,WAAWE;QACX,SAASD;;AAGrB"}

package/FilePicker/primitives/components/Trigger.js

@@ -1,78 +1,95 @@
-import * as React from "react";
-import { ReactComponent as ImageIcon } from "@webiny/icons/image.svg";
+import { ReactComponent } from "@webiny/icons/image.svg";
 import { cn, cva } from "../../../utils.js";
 import { Icon } from "../../../Icon/index.js";
 import { Text } from "../../../Text/index.js";
-const triggerVariants = cva(["w-full flex items-center justify-center", "data-[disabled=true]:cursor-not-allowed data-[disabled=true]:bg-neutral-disabled", "focus-visible:outline-none  focus-visible:ring-primary-dimmed", "text-neutral-strong data-[disabled=true]:text-neutral-disabled", "fill-neutral-strong data-[disabled=true]:fill-neutral-disabled"], {
-  variants: {
-    type: {
-      area: "px-xs py-md-extra rounded-md focus-visible:ring-lg",
-      compact: "px-sm py-xs rounded-sm focus-visible:ring-md"
+import * as __rspack_external_react from "react";
+const triggerVariants = cva([
+    "w-full flex items-center justify-center",
+    "data-[disabled=true]:cursor-not-allowed data-[disabled=true]:bg-neutral-disabled",
+    "focus-visible:outline-none  focus-visible:ring-primary-dimmed",
+    "text-neutral-strong data-[disabled=true]:text-neutral-disabled",
+    "fill-neutral-strong data-[disabled=true]:fill-neutral-disabled"
+], {
+    variants: {
+        type: {
+            area: "px-xs py-md-extra rounded-md focus-visible:ring-lg",
+            compact: "px-sm py-xs rounded-sm focus-visible:ring-md"
+        },
+        variant: {
+            primary: [
+                "bg-neutral-subtle",
+                "hover:bg-neutral-light"
+            ],
+            secondary: [
+                "bg-neutral-base",
+                "hover:bg-neutral-base"
+            ],
+            ghost: [
+                "bg-neutral-subtle",
+                "hover:bg-neutral-light"
+            ]
+        }
     },
-    variant: {
-      primary: ["bg-neutral-subtle", "hover:bg-neutral-light"],
-      secondary: ["bg-neutral-base", "hover:bg-neutral-base"],
-      ghost: ["bg-neutral-subtle", "hover:bg-neutral-light"]
+    compoundVariants: [
+        {
+            type: "area",
+            variant: "primary",
+            className: [
+                "bg-neutral-subtle",
+                "hover:bg-neutral-light"
+            ]
+        },
+        {
+            type: "area",
+            variant: "secondary",
+            className: [
+                "bg-neutral-base",
+                "hover:bg-neutral-base"
+            ]
+        },
+        {
+            type: "area",
+            variant: "ghost",
+            className: [
+                "bg-neutral-subtle",
+                "hover:bg-neutral-light",
+                "data-[disabled=true]:bg-neutral-base"
+            ]
+        }
+    ],
+    defaultVariants: {
+        type: "area",
+        variant: "primary"
     }
-  },
-  compoundVariants: [
-  // Combination of `type = area` and different `variant`
-  {
-    type: "area",
-    variant: "primary",
-    className: ["bg-neutral-subtle", "hover:bg-neutral-light"]
-  }, {
-    type: "area",
-    variant: "secondary",
-    className: ["bg-neutral-base", "hover:bg-neutral-base"]
-  }, {
-    type: "area",
-    variant: "ghost",
-    className: ["bg-neutral-subtle", "hover:bg-neutral-light", "data-[disabled=true]:bg-neutral-base"]
-  }],
-  defaultVariants: {
-    type: "area",
-    variant: "primary"
-  }
 });
-const Trigger = ({
-  renderTrigger,
-  type,
-  variant,
-  text,
-  className,
-  disabled,
-  onSelectItem,
-  ...props
-}) => {
-  if (typeof renderTrigger === "function") {
-    return renderTrigger({
-      disabled,
-      text,
-      onSelectItem,
-      ...props
+const Trigger = ({ renderTrigger, type, variant, text, className, disabled, onSelectItem, ...props })=>{
+    if ("function" == typeof renderTrigger) return renderTrigger({
+        disabled,
+        text,
+        onSelectItem,
+        ...props
     });
-  }
-  const label = text ?? "Select from library";
-  return /*#__PURE__*/React.createElement("button", Object.assign({
-    "data-role": "select-image",
-    "data-disabled": disabled,
-    disabled: disabled,
-    onClick: onSelectItem,
-    className: cn(triggerVariants({
-      type,
-      variant
-    }), className)
-  }, props), /*#__PURE__*/React.createElement("span", {
-    className: "inline-flex items-center justify-center whitespace-nowrap gap-xs"
-  }, /*#__PURE__*/React.createElement(Icon, {
-    icon: /*#__PURE__*/React.createElement(ImageIcon, null),
-    label: label,
-    color: "inherit"
-  }), /*#__PURE__*/React.createElement(Text, {
-    size: "sm",
-    className: "leading-none"
-  }, label)));
+    const label = text ?? "Select from library";
+    return /*#__PURE__*/ __rspack_external_react.createElement("button", {
+        "data-role": "select-image",
+        "data-disabled": disabled,
+        disabled: disabled,
+        onClick: onSelectItem,
+        className: cn(triggerVariants({
+            type,
+            variant
+        }), className),
+        ...props
+    }, /*#__PURE__*/ __rspack_external_react.createElement("span", {
+        className: "inline-flex items-center justify-center whitespace-nowrap gap-xs"
+    }, /*#__PURE__*/ __rspack_external_react.createElement(Icon, {
+        icon: /*#__PURE__*/ __rspack_external_react.createElement(ReactComponent, null),
+        label: label,
+        color: "inherit"
+    }), /*#__PURE__*/ __rspack_external_react.createElement(Text, {
+        size: "sm",
+        className: "leading-none"
+    }, label)));
 };
 export { Trigger, triggerVariants };
 

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

@@ -1 +1 @@
-{"version":3,"names":["React","ReactComponent","ImageIcon","cn","cva","Icon","Text","triggerVariants","variants","type","area","compact","variant","primary","secondary","ghost","compoundVariants","className","defaultVariants","Trigger","renderTrigger","text","disabled","onSelectItem","props","label","createElement","Object","assign","onClick","icon","color","size"],"sources":["Trigger.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { ReactComponent as ImageIcon } from \"@webiny/icons/image.svg\";\nimport { cn, cva, type VariantProps } from \"~/utils.js\";\nimport type { TriggerDefaultProps } from \"~/FilePicker/primitives/components/types.js\";\nimport { Icon } from \"~/Icon/index.js\";\nimport { Text } from \"~/Text/index.js\";\n\nconst triggerVariants = cva(\n    [\n        \"w-full flex items-center justify-center\",\n        \"data-[disabled=true]:cursor-not-allowed data-[disabled=true]:bg-neutral-disabled\",\n        \"focus-visible:outline-none  focus-visible:ring-primary-dimmed\",\n        \"text-neutral-strong data-[disabled=true]:text-neutral-disabled\",\n        \"fill-neutral-strong data-[disabled=true]:fill-neutral-disabled\"\n    ],\n    {\n        variants: {\n            type: {\n                area: \"px-xs py-md-extra rounded-md focus-visible:ring-lg\",\n                compact: \"px-sm py-xs rounded-sm focus-visible:ring-md\"\n            },\n            variant: {\n                primary: [\"bg-neutral-subtle\", \"hover:bg-neutral-light\"],\n                secondary: [\"bg-neutral-base\", \"hover:bg-neutral-base\"],\n                ghost: [\"bg-neutral-subtle\", \"hover:bg-neutral-light\"]\n            }\n        },\n        compoundVariants: [\n            // Combination of `type = area` and different `variant`\n            {\n                type: \"area\",\n                variant: \"primary\",\n                className: [\"bg-neutral-subtle\", \"hover:bg-neutral-light\"]\n            },\n            {\n                type: \"area\",\n                variant: \"secondary\",\n                className: [\"bg-neutral-base\", \"hover:bg-neutral-base\"]\n            },\n            {\n                type: \"area\",\n                variant: \"ghost\",\n                className: [\n                    \"bg-neutral-subtle\",\n                    \"hover:bg-neutral-light\",\n                    \"data-[disabled=true]:bg-neutral-base\"\n                ]\n            }\n        ],\n        defaultVariants: {\n            type: \"area\",\n            variant: \"primary\"\n        }\n    }\n);\n\ninterface TriggerProps extends TriggerDefaultProps, VariantProps<typeof triggerVariants> {\n    renderTrigger?: (props: any) => React.ReactElement<any>;\n}\n\nconst Trigger = ({\n    renderTrigger,\n    type,\n    variant,\n    text,\n    className,\n    disabled,\n    onSelectItem,\n    ...props\n}: TriggerProps) => {\n    if (typeof renderTrigger === \"function\") {\n        return renderTrigger({ disabled, text, onSelectItem, ...props });\n    }\n\n    const label = text ?? \"Select from library\";\n\n    return (\n        <button\n            data-role={\"select-image\"}\n            data-disabled={disabled}\n            disabled={disabled}\n            onClick={onSelectItem}\n            className={cn(triggerVariants({ type, variant }), className)}\n            {...props}\n        >\n            <span className={\"inline-flex items-center justify-center whitespace-nowrap gap-xs\"}>\n                <Icon icon={<ImageIcon />} label={label} color={\"inherit\"} />\n                <Text size={\"sm\"} className={\"leading-none\"}>\n                    {label}\n                </Text>\n            </span>\n        </button>\n    );\n};\n\nexport { Trigger, type TriggerProps, triggerVariants };\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,cAAc,IAAIC,SAAS,QAAQ,yBAAyB;AACrE,SAASC,EAAE,EAAEC,GAAG;AAEhB,SAASC,IAAI;AACb,SAASC,IAAI;AAEb,MAAMC,eAAe,GAAGH,GAAG,CACvB,CACI,yCAAyC,EACzC,kFAAkF,EAClF,+DAA+D,EAC/D,gEAAgE,EAChE,gEAAgE,CACnE,EACD;EACII,QAAQ,EAAE;IACNC,IAAI,EAAE;MACFC,IAAI,EAAE,oDAAoD;MAC1DC,OAAO,EAAE;IACb,CAAC;IACDC,OAAO,EAAE;MACLC,OAAO,EAAE,CAAC,mBAAmB,EAAE,wBAAwB,CAAC;MACxDC,SAAS,EAAE,CAAC,iBAAiB,EAAE,uBAAuB,CAAC;MACvDC,KAAK,EAAE,CAAC,mBAAmB,EAAE,wBAAwB;IACzD;EACJ,CAAC;EACDC,gBAAgB,EAAE;EACd;EACA;IACIP,IAAI,EAAE,MAAM;IACZG,OAAO,EAAE,SAAS;IAClBK,SAAS,EAAE,CAAC,mBAAmB,EAAE,wBAAwB;EAC7D,CAAC,EACD;IACIR,IAAI,EAAE,MAAM;IACZG,OAAO,EAAE,WAAW;IACpBK,SAAS,EAAE,CAAC,iBAAiB,EAAE,uBAAuB;EAC1D,CAAC,EACD;IACIR,IAAI,EAAE,MAAM;IACZG,OAAO,EAAE,OAAO;IAChBK,SAAS,EAAE,CACP,mBAAmB,EACnB,wBAAwB,EACxB,sCAAsC;EAE9C,CAAC,CACJ;EACDC,eAAe,EAAE;IACbT,IAAI,EAAE,MAAM;IACZG,OAAO,EAAE;EACb;AACJ,CACJ,CAAC;AAMD,MAAMO,OAAO,GAAGA,CAAC;EACbC,aAAa;EACbX,IAAI;EACJG,OAAO;EACPS,IAAI;EACJJ,SAAS;EACTK,QAAQ;EACRC,YAAY;EACZ,GAAGC;AACO,CAAC,KAAK;EAChB,IAAI,OAAOJ,aAAa,KAAK,UAAU,EAAE;IACrC,OAAOA,aAAa,CAAC;MAAEE,QAAQ;MAAED,IAAI;MAAEE,YAAY;MAAE,GAAGC;IAAM,CAAC,CAAC;EACpE;EAEA,MAAMC,KAAK,GAAGJ,IAAI,IAAI,qBAAqB;EAE3C,oBACIrB,KAAA,CAAA0B,aAAA,WAAAC,MAAA,CAAAC,MAAA;IACI,aAAW,cAAe;IAC1B,iBAAeN,QAAS;IACxBA,QAAQ,EAAEA,QAAS;IACnBO,OAAO,EAAEN,YAAa;IACtBN,SAAS,EAAEd,EAAE,CAACI,eAAe,CAAC;MAAEE,IAAI;MAAEG;IAAQ,CAAC,CAAC,EAAEK,SAAS;EAAE,GACzDO,KAAK,gBAETxB,KAAA,CAAA0B,aAAA;IAAMT,SAAS,EAAE;EAAmE,gBAChFjB,KAAA,CAAA0B,aAAA,CAACrB,IAAI;IAACyB,IAAI,eAAE9B,KAAA,CAAA0B,aAAA,CAACxB,SAAS,MAAE,CAAE;IAACuB,KAAK,EAAEA,KAAM;IAACM,KAAK,EAAE;EAAU,CAAE,CAAC,eAC7D/B,KAAA,CAAA0B,aAAA,CAACpB,IAAI;IAAC0B,IAAI,EAAE,IAAK;IAACf,SAAS,EAAE;EAAe,GACvCQ,KACC,CACJ,CACF,CAAC;AAEjB,CAAC;AAED,SAASN,OAAO,EAAqBZ,eAAe","ignoreList":[]}
+{"version":3,"file":"FilePicker/primitives/components/Trigger.js","sources":["../../../../src/FilePicker/primitives/components/Trigger.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { ReactComponent as ImageIcon } from \"@webiny/icons/image.svg\";\nimport { cn, cva, type VariantProps } from \"~/utils.js\";\nimport type { TriggerDefaultProps } from \"~/FilePicker/primitives/components/types.js\";\nimport { Icon } from \"~/Icon/index.js\";\nimport { Text } from \"~/Text/index.js\";\n\nconst triggerVariants = cva(\n    [\n        \"w-full flex items-center justify-center\",\n        \"data-[disabled=true]:cursor-not-allowed data-[disabled=true]:bg-neutral-disabled\",\n        \"focus-visible:outline-none  focus-visible:ring-primary-dimmed\",\n        \"text-neutral-strong data-[disabled=true]:text-neutral-disabled\",\n        \"fill-neutral-strong data-[disabled=true]:fill-neutral-disabled\"\n    ],\n    {\n        variants: {\n            type: {\n                area: \"px-xs py-md-extra rounded-md focus-visible:ring-lg\",\n                compact: \"px-sm py-xs rounded-sm focus-visible:ring-md\"\n            },\n            variant: {\n                primary: [\"bg-neutral-subtle\", \"hover:bg-neutral-light\"],\n                secondary: [\"bg-neutral-base\", \"hover:bg-neutral-base\"],\n                ghost: [\"bg-neutral-subtle\", \"hover:bg-neutral-light\"]\n            }\n        },\n        compoundVariants: [\n            // Combination of `type = area` and different `variant`\n            {\n                type: \"area\",\n                variant: \"primary\",\n                className: [\"bg-neutral-subtle\", \"hover:bg-neutral-light\"]\n            },\n            {\n                type: \"area\",\n                variant: \"secondary\",\n                className: [\"bg-neutral-base\", \"hover:bg-neutral-base\"]\n            },\n            {\n                type: \"area\",\n                variant: \"ghost\",\n                className: [\n                    \"bg-neutral-subtle\",\n                    \"hover:bg-neutral-light\",\n                    \"data-[disabled=true]:bg-neutral-base\"\n                ]\n            }\n        ],\n        defaultVariants: {\n            type: \"area\",\n            variant: \"primary\"\n        }\n    }\n);\n\ninterface TriggerProps extends TriggerDefaultProps, VariantProps<typeof triggerVariants> {\n    renderTrigger?: (props: any) => React.ReactElement<any>;\n}\n\nconst Trigger = ({\n    renderTrigger,\n    type,\n    variant,\n    text,\n    className,\n    disabled,\n    onSelectItem,\n    ...props\n}: TriggerProps) => {\n    if (typeof renderTrigger === \"function\") {\n        return renderTrigger({ disabled, text, onSelectItem, ...props });\n    }\n\n    const label = text ?? \"Select from library\";\n\n    return (\n        <button\n            data-role={\"select-image\"}\n            data-disabled={disabled}\n            disabled={disabled}\n            onClick={onSelectItem}\n            className={cn(triggerVariants({ type, variant }), className)}\n            {...props}\n        >\n            <span className={\"inline-flex items-center justify-center whitespace-nowrap gap-xs\"}>\n                <Icon icon={<ImageIcon />} label={label} color={\"inherit\"} />\n                <Text size={\"sm\"} className={\"leading-none\"}>\n                    {label}\n                </Text>\n            </span>\n        </button>\n    );\n};\n\nexport { Trigger, type TriggerProps, triggerVariants };\n"],"names":["triggerVariants","cva","Trigger","renderTrigger","type","variant","text","className","disabled","onSelectItem","props","label","cn","Icon","ImageIcon","Text"],"mappings":";;;;;AAOA,MAAMA,kBAAkBC,IACpB;IACI;IACA;IACA;IACA;IACA;CACH,EACD;IACI,UAAU;QACN,MAAM;YACF,MAAM;YACN,SAAS;QACb;QACA,SAAS;YACL,SAAS;gBAAC;gBAAqB;aAAyB;YACxD,WAAW;gBAAC;gBAAmB;aAAwB;YACvD,OAAO;gBAAC;gBAAqB;aAAyB;QAC1D;IACJ;IACA,kBAAkB;QAEd;YACI,MAAM;YACN,SAAS;YACT,WAAW;gBAAC;gBAAqB;aAAyB;QAC9D;QACA;YACI,MAAM;YACN,SAAS;YACT,WAAW;gBAAC;gBAAmB;aAAwB;QAC3D;QACA;YACI,MAAM;YACN,SAAS;YACT,WAAW;gBACP;gBACA;gBACA;aACH;QACL;KACH;IACD,iBAAiB;QACb,MAAM;QACN,SAAS;IACb;AACJ;AAOJ,MAAMC,UAAU,CAAC,EACbC,aAAa,EACbC,IAAI,EACJC,OAAO,EACPC,IAAI,EACJC,SAAS,EACTC,QAAQ,EACRC,YAAY,EACZ,GAAGC,OACQ;IACX,IAAI,AAAyB,cAAzB,OAAOP,eACP,OAAOA,cAAc;QAAEK;QAAUF;QAAMG;QAAc,GAAGC,KAAK;IAAC;IAGlE,MAAMC,QAAQL,QAAQ;IAEtB,OAAO,WAAP,GACI,sCAAC;QACG,aAAW;QACX,iBAAeE;QACf,UAAUA;QACV,SAASC;QACT,WAAWG,GAAGZ,gBAAgB;YAAEI;YAAMC;QAAQ,IAAIE;QACjD,GAAGG,KAAK;qBAET,sCAAC;QAAK,WAAW;qBACb,sCAACG,MAAIA;QAAC,oBAAM,sCAACC,gBAASA;QAAK,OAAOH;QAAO,OAAO;sBAChD,sCAACI,MAAIA;QAAC,MAAM;QAAM,WAAW;OACxBJ;AAKrB"}

package/FilePicker/primitives/components/index.js

@@ -2,5 +2,3 @@ export * from "./previews/index.js";
 export * from "./Description.js";
 export * from "./Label.js";
 export * from "./Trigger.js";
-
-//# sourceMappingURL=index.js.map

package/FilePicker/primitives/components/previews/FilePreview.js

@@ -1,17 +1,9 @@
-import * as React from "react";
-import { RichItemPreview, TextOnlyPreview } from "../previews/index.js";
-const FilePreview = ({
-  type,
-  renderFilePreview,
-  ...props
-}) => {
-  if (typeof renderFilePreview === "function") {
-    return renderFilePreview(props);
-  }
-  if (type === "compact") {
-    return /*#__PURE__*/React.createElement(TextOnlyPreview, props);
-  }
-  return /*#__PURE__*/React.createElement(RichItemPreview, props);
+import { RichItemPreview, TextOnlyPreview } from "./index.js";
+import * as __rspack_external_react from "react";
+const FilePreview = ({ type, renderFilePreview, ...props })=>{
+    if ("function" == typeof renderFilePreview) return renderFilePreview(props);
+    if ("compact" === type) return /*#__PURE__*/ __rspack_external_react.createElement(TextOnlyPreview, props);
+    return /*#__PURE__*/ __rspack_external_react.createElement(RichItemPreview, props);
 };
 export { FilePreview };
 

package/FilePicker/primitives/components/previews/FilePreview.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","RichItemPreview","TextOnlyPreview","FilePreview","type","renderFilePreview","props","createElement"],"sources":["FilePreview.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { type VariantProps } from \"~/utils.js\";\nimport type { filePickerVariants } from \"~/FilePicker/index.js\";\nimport type { FilePreviewDefaultProps } from \"../types.js\";\nimport { RichItemPreview, TextOnlyPreview } from \"../previews/index.js\";\n\ntype FilePreviewProps = FilePreviewDefaultProps & {\n    type: VariantProps<typeof filePickerVariants>[\"type\"];\n    renderFilePreview?: (props: any) => React.ReactElement<any>;\n};\n\nconst FilePreview = ({ type, renderFilePreview, ...props }: FilePreviewProps) => {\n    if (typeof renderFilePreview === \"function\") {\n        return renderFilePreview(props);\n    }\n\n    if (type === \"compact\") {\n        return <TextOnlyPreview {...props} />;\n    }\n\n    return <RichItemPreview {...props} />;\n};\n\nexport { FilePreview, type FilePreviewProps };\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAI9B,SAASC,eAAe,EAAEC,eAAe;AAOzC,MAAMC,WAAW,GAAGA,CAAC;EAAEC,IAAI;EAAEC,iBAAiB;EAAE,GAAGC;AAAwB,CAAC,KAAK;EAC7E,IAAI,OAAOD,iBAAiB,KAAK,UAAU,EAAE;IACzC,OAAOA,iBAAiB,CAACC,KAAK,CAAC;EACnC;EAEA,IAAIF,IAAI,KAAK,SAAS,EAAE;IACpB,oBAAOJ,KAAA,CAAAO,aAAA,CAACL,eAAe,EAAKI,KAAQ,CAAC;EACzC;EAEA,oBAAON,KAAA,CAAAO,aAAA,CAACN,eAAe,EAAKK,KAAQ,CAAC;AACzC,CAAC;AAED,SAASH,WAAW","ignoreList":[]}
+{"version":3,"file":"FilePicker/primitives/components/previews/FilePreview.js","sources":["../../../../../src/FilePicker/primitives/components/previews/FilePreview.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { type VariantProps } from \"~/utils.js\";\nimport type { filePickerVariants } from \"~/FilePicker/index.js\";\nimport type { FilePreviewDefaultProps } from \"../types.js\";\nimport { RichItemPreview, TextOnlyPreview } from \"../previews/index.js\";\n\ntype FilePreviewProps = FilePreviewDefaultProps & {\n    type: VariantProps<typeof filePickerVariants>[\"type\"];\n    renderFilePreview?: (props: any) => React.ReactElement<any>;\n};\n\nconst FilePreview = ({ type, renderFilePreview, ...props }: FilePreviewProps) => {\n    if (typeof renderFilePreview === \"function\") {\n        return renderFilePreview(props);\n    }\n\n    if (type === \"compact\") {\n        return <TextOnlyPreview {...props} />;\n    }\n\n    return <RichItemPreview {...props} />;\n};\n\nexport { FilePreview, type FilePreviewProps };\n"],"names":["FilePreview","type","renderFilePreview","props","TextOnlyPreview","RichItemPreview"],"mappings":";;AAWA,MAAMA,cAAc,CAAC,EAAEC,IAAI,EAAEC,iBAAiB,EAAE,GAAGC,OAAyB;IACxE,IAAI,AAA6B,cAA7B,OAAOD,mBACP,OAAOA,kBAAkBC;IAG7B,IAAIF,AAAS,cAATA,MACA,OAAO,WAAP,GAAO,sCAACG,iBAAoBD;IAGhC,OAAO,WAAP,GAAO,sCAACE,iBAAoBF;AAChC"}

package/FilePicker/primitives/components/previews/ImagePreview/ImagePreview.js

@@ -1,38 +1,28 @@
-import React from "react";
+import react from "react";
 import { cn, makeDecoratable } from "../../../../../utils.js";
 import { previewVariants } from "../variants.js";
 import { ItemActions } from "../ItemActions.js";
-const DecoratableImagePreview = ({
-  value,
-  className,
-  variant,
-  disabled,
-  onRemoveItem,
-  onReplaceItem,
-  onEditItem
-}) => {
-  return /*#__PURE__*/React.createElement("div", {
-    className: cn("flex justify-center items-center py-sm rounded-md relative", previewVariants({
-      variant
-    }), className),
-    "data-testid": "image-preview"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "cursor-pointer size-[128px] flex justify-center items-center",
-    "data-role": "select-image",
-    onClick: onReplaceItem
-  }, /*#__PURE__*/React.createElement("img", {
-    src: value.url,
-    alt: value.name,
-    className: "object-contain size-full"
-  })), /*#__PURE__*/React.createElement("div", {
-    className: "absolute top-1 right-1.5"
-  }, /*#__PURE__*/React.createElement(ItemActions, {
-    onRemoveItem: onRemoveItem,
-    onEditItem: onEditItem,
-    disabled: disabled,
-    className: "flex-col"
-  })));
-};
+const DecoratableImagePreview = ({ value, className, variant, disabled, onRemoveItem, onReplaceItem, onEditItem })=>/*#__PURE__*/ react.createElement("div", {
+        className: cn("flex justify-center items-center py-sm rounded-md relative", previewVariants({
+            variant
+        }), className),
+        "data-testid": "image-preview"
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "cursor-pointer size-[128px] flex justify-center items-center",
+        "data-role": "select-image",
+        onClick: onReplaceItem
+    }, /*#__PURE__*/ react.createElement("img", {
+        src: value.url,
+        alt: value.name,
+        className: "object-contain size-full"
+    })), /*#__PURE__*/ react.createElement("div", {
+        className: "absolute top-1 right-1.5"
+    }, /*#__PURE__*/ react.createElement(ItemActions, {
+        onRemoveItem: onRemoveItem,
+        onEditItem: onEditItem,
+        disabled: disabled,
+        className: "flex-col"
+    })));
 const ImagePreview = makeDecoratable("FileImagePreview", DecoratableImagePreview);
 export { ImagePreview };
 

package/FilePicker/primitives/components/previews/ImagePreview/ImagePreview.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","cn","makeDecoratable","previewVariants","ItemActions","DecoratableImagePreview","value","className","variant","disabled","onRemoveItem","onReplaceItem","onEditItem","createElement","onClick","src","url","alt","name","ImagePreview"],"sources":["ImagePreview.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn, makeDecoratable } from \"~/utils.js\";\nimport { previewVariants } from \"../variants.js\";\nimport type { FilePreviewDefaultProps } from \"../../types.js\";\nimport { ItemActions } from \"~/FilePicker/primitives/components/previews/ItemActions.js\";\n\ntype ImagePreviewProps = FilePreviewDefaultProps;\n\nconst DecoratableImagePreview = ({\n    value,\n    className,\n    variant,\n    disabled,\n    onRemoveItem,\n    onReplaceItem,\n    onEditItem\n}: ImagePreviewProps) => {\n    return (\n        <div\n            className={cn(\n                \"flex justify-center items-center py-sm rounded-md relative\",\n                previewVariants({ variant }),\n                className\n            )}\n            data-testid={\"image-preview\"}\n        >\n            <div\n                className={\"cursor-pointer size-[128px] flex justify-center items-center\"}\n                data-role={\"select-image\"}\n                onClick={onReplaceItem}\n            >\n                <img src={value.url} alt={value.name} className={\"object-contain size-full\"} />\n            </div>\n            <div className={\"absolute top-1 right-1.5\"}>\n                <ItemActions\n                    onRemoveItem={onRemoveItem}\n                    onEditItem={onEditItem}\n                    disabled={disabled}\n                    className={\"flex-col\"}\n                />\n            </div>\n        </div>\n    );\n};\n\nconst ImagePreview = makeDecoratable(\"FileImagePreview\", DecoratableImagePreview);\n\nexport { ImagePreview, type ImagePreviewProps };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,EAAE,EAAEC,eAAe;AAC5B,SAASC,eAAe;AAExB,SAASC,WAAW;AAIpB,MAAMC,uBAAuB,GAAGA,CAAC;EAC7BC,KAAK;EACLC,SAAS;EACTC,OAAO;EACPC,QAAQ;EACRC,YAAY;EACZC,aAAa;EACbC;AACe,CAAC,KAAK;EACrB,oBACIZ,KAAA,CAAAa,aAAA;IACIN,SAAS,EAAEN,EAAE,CACT,4DAA4D,EAC5DE,eAAe,CAAC;MAAEK;IAAQ,CAAC,CAAC,EAC5BD,SACJ,CAAE;IACF,eAAa;EAAgB,gBAE7BP,KAAA,CAAAa,aAAA;IACIN,SAAS,EAAE,8DAA+D;IAC1E,aAAW,cAAe;IAC1BO,OAAO,EAAEH;EAAc,gBAEvBX,KAAA,CAAAa,aAAA;IAAKE,GAAG,EAAET,KAAK,CAACU,GAAI;IAACC,GAAG,EAAEX,KAAK,CAACY,IAAK;IAACX,SAAS,EAAE;EAA2B,CAAE,CAC7E,CAAC,eACNP,KAAA,CAAAa,aAAA;IAAKN,SAAS,EAAE;EAA2B,gBACvCP,KAAA,CAAAa,aAAA,CAACT,WAAW;IACRM,YAAY,EAAEA,YAAa;IAC3BE,UAAU,EAAEA,UAAW;IACvBH,QAAQ,EAAEA,QAAS;IACnBF,SAAS,EAAE;EAAW,CACzB,CACA,CACJ,CAAC;AAEd,CAAC;AAED,MAAMY,YAAY,GAAGjB,eAAe,CAAC,kBAAkB,EAAEG,uBAAuB,CAAC;AAEjF,SAASc,YAAY","ignoreList":[]}
+{"version":3,"file":"FilePicker/primitives/components/previews/ImagePreview/ImagePreview.js","sources":["../../../../../../src/FilePicker/primitives/components/previews/ImagePreview/ImagePreview.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn, makeDecoratable } from \"~/utils.js\";\nimport { previewVariants } from \"../variants.js\";\nimport type { FilePreviewDefaultProps } from \"../../types.js\";\nimport { ItemActions } from \"~/FilePicker/primitives/components/previews/ItemActions.js\";\n\ntype ImagePreviewProps = FilePreviewDefaultProps;\n\nconst DecoratableImagePreview = ({\n    value,\n    className,\n    variant,\n    disabled,\n    onRemoveItem,\n    onReplaceItem,\n    onEditItem\n}: ImagePreviewProps) => {\n    return (\n        <div\n            className={cn(\n                \"flex justify-center items-center py-sm rounded-md relative\",\n                previewVariants({ variant }),\n                className\n            )}\n            data-testid={\"image-preview\"}\n        >\n            <div\n                className={\"cursor-pointer size-[128px] flex justify-center items-center\"}\n                data-role={\"select-image\"}\n                onClick={onReplaceItem}\n            >\n                <img src={value.url} alt={value.name} className={\"object-contain size-full\"} />\n            </div>\n            <div className={\"absolute top-1 right-1.5\"}>\n                <ItemActions\n                    onRemoveItem={onRemoveItem}\n                    onEditItem={onEditItem}\n                    disabled={disabled}\n                    className={\"flex-col\"}\n                />\n            </div>\n        </div>\n    );\n};\n\nconst ImagePreview = makeDecoratable(\"FileImagePreview\", DecoratableImagePreview);\n\nexport { ImagePreview, type ImagePreviewProps };\n"],"names":["DecoratableImagePreview","value","className","variant","disabled","onRemoveItem","onReplaceItem","onEditItem","cn","previewVariants","ItemActions","ImagePreview","makeDecoratable"],"mappings":";;;;AAQA,MAAMA,0BAA0B,CAAC,EAC7BC,KAAK,EACLC,SAAS,EACTC,OAAO,EACPC,QAAQ,EACRC,YAAY,EACZC,aAAa,EACbC,UAAU,EACM,GACT,WAAP,GACI,oBAAC;QACG,WAAWC,GACP,8DACAC,gBAAgB;YAAEN;QAAQ,IAC1BD;QAEJ,eAAa;qBAEb,oBAAC;QACG,WAAW;QACX,aAAW;QACX,SAASI;qBAET,oBAAC;QAAI,KAAKL,MAAM,GAAG;QAAE,KAAKA,MAAM,IAAI;QAAE,WAAW;uBAErD,oBAAC;QAAI,WAAW;qBACZ,oBAACS,aAAWA;QACR,cAAcL;QACd,YAAYE;QACZ,UAAUH;QACV,WAAW;;AAO/B,MAAMO,eAAeC,gBAAgB,oBAAoBZ"}

package/FilePicker/primitives/components/previews/ImagePreview/index.js

@@ -1,3 +1 @@
 export * from "./ImagePreview.js";
-
-//# sourceMappingURL=index.js.map

package/FilePicker/primitives/components/previews/ItemActions.js

@@ -1,60 +1,53 @@
-import React from "react";
-import { ReactComponent as ReplaceIcon } from "@webiny/icons/file_upload.svg";
-import { ReactComponent as EditIcon } from "@webiny/icons/edit.svg";
-import { ReactComponent as TrashIcon } from "@webiny/icons/delete.svg";
+import react from "react";
+import { ReactComponent } from "@webiny/icons/file_upload.svg";
+import { ReactComponent as edit_svg_ReactComponent } from "@webiny/icons/edit.svg";
+import { ReactComponent as delete_svg_ReactComponent } from "@webiny/icons/delete.svg";
 import { IconButton } from "../../../../Button/index.js";
 import { Icon } from "../../../../Icon/index.js";
 import { cn } from "../../../../utils.js";
-const ItemActions = ({
-  disabled,
-  onRemoveItem,
-  onEditItem,
-  onReplaceItem,
-  small,
-  className,
-  ...props
-}) => {
-  const iconSize = small ? "default" : "lg";
-  const buttonSize = small ? "xs" : "sm";
-  return /*#__PURE__*/React.createElement("div", Object.assign({}, props, {
-    className: cn("flex justify-center items-center gap-xs", className)
-  }), small && onReplaceItem && /*#__PURE__*/React.createElement(IconButton, {
-    icon: /*#__PURE__*/React.createElement(Icon, {
-      icon: /*#__PURE__*/React.createElement(ReplaceIcon, null),
-      label: "Replace",
-      size: "md",
-      color: "neutral-light"
-    }),
-    variant: "ghost",
-    size: buttonSize,
-    iconSize: iconSize,
-    onClick: onReplaceItem,
-    disabled: disabled
-  }), onEditItem && /*#__PURE__*/React.createElement(IconButton, {
-    icon: /*#__PURE__*/React.createElement(Icon, {
-      icon: /*#__PURE__*/React.createElement(EditIcon, null),
-      label: "Edit",
-      size: "md",
-      color: "neutral-light"
-    }),
-    variant: "ghost",
-    size: buttonSize,
-    iconSize: iconSize,
-    onClick: onEditItem,
-    disabled: disabled
-  }), onRemoveItem && /*#__PURE__*/React.createElement(IconButton, {
-    icon: /*#__PURE__*/React.createElement(Icon, {
-      icon: /*#__PURE__*/React.createElement(TrashIcon, null),
-      label: "Remove",
-      size: "md",
-      color: "neutral-light"
-    }),
-    variant: "ghost",
-    size: buttonSize,
-    iconSize: iconSize,
-    onClick: onRemoveItem,
-    disabled: disabled
-  }));
+const ItemActions = ({ disabled, onRemoveItem, onEditItem, onReplaceItem, small, className, ...props })=>{
+    const iconSize = small ? "default" : "lg";
+    const buttonSize = small ? "xs" : "sm";
+    return /*#__PURE__*/ react.createElement("div", {
+        ...props,
+        className: cn("flex justify-center items-center gap-xs", className)
+    }, small && onReplaceItem && /*#__PURE__*/ react.createElement(IconButton, {
+        icon: /*#__PURE__*/ react.createElement(Icon, {
+            icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+            label: "Replace",
+            size: "md",
+            color: "neutral-light"
+        }),
+        variant: "ghost",
+        size: buttonSize,
+        iconSize: iconSize,
+        onClick: onReplaceItem,
+        disabled: disabled
+    }), onEditItem && /*#__PURE__*/ react.createElement(IconButton, {
+        icon: /*#__PURE__*/ react.createElement(Icon, {
+            icon: /*#__PURE__*/ react.createElement(edit_svg_ReactComponent, null),
+            label: "Edit",
+            size: "md",
+            color: "neutral-light"
+        }),
+        variant: "ghost",
+        size: buttonSize,
+        iconSize: iconSize,
+        onClick: onEditItem,
+        disabled: disabled
+    }), onRemoveItem && /*#__PURE__*/ react.createElement(IconButton, {
+        icon: /*#__PURE__*/ react.createElement(Icon, {
+            icon: /*#__PURE__*/ react.createElement(delete_svg_ReactComponent, null),
+            label: "Remove",
+            size: "md",
+            color: "neutral-light"
+        }),
+        variant: "ghost",
+        size: buttonSize,
+        iconSize: iconSize,
+        onClick: onRemoveItem,
+        disabled: disabled
+    }));
 };
 export { ItemActions };