@webiny/admin-ui 0.0.0-unstable.7be00a75a9 → 0.0.0-unstable.7c2def32a7

package/EmptyState/illustrations/SelectIllustration.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyState/illustrations/SelectIllustration.js","sources":["../../../src/EmptyState/illustrations/SelectIllustration.tsx"],"sourcesContent":["import React from \"react\";\n\nexport const SelectIllustration = (props: React.SVGProps<SVGSVGElement>) => (\n    <svg viewBox=\"0 0 145 120\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n        <g>\n            <g>\n                <g filter=\"url(#es_select_filter0_d_6795_48832)\">\n                    <path\n                        d=\"M9.83984 16.4211C9.83984 12.0029 13.4216 8.42114 17.8398 8.42114H126.84C131.258 8.42114 134.84 12.0029 134.84 16.4211V100.421C134.84 104.839 131.258 108.421 126.84 108.421H17.8398C13.4216 108.421 9.83984 104.839 9.83984 100.421V16.4211Z\"\n                        fill=\"white\"\n                    />\n                </g>\n                <rect\n                    x=\"21.0376\"\n                    y=\"35.5716\"\n                    width=\"30.1421\"\n                    height=\"6.06791\"\n                    rx=\"1.71\"\n                    fill=\"#F0F1F3\"\n                />\n                <rect\n                    x=\"21.0376\"\n                    y=\"54.0071\"\n                    width=\"30.1421\"\n                    height=\"6.06791\"\n                    rx=\"1.71\"\n                    fill=\"#F0F1F3\"\n                />\n                <rect\n                    x=\"21.0376\"\n                    y=\"44.5868\"\n                    width=\"30.1421\"\n                    height=\"6.47244\"\n                    rx=\"1.71\"\n                    fill=\"#FA5723\"\n                />\n                <rect\n                    x=\"21.0376\"\n                    y=\"63.0223\"\n                    width=\"30.1421\"\n                    height=\"6.47244\"\n                    rx=\"1.71\"\n                    fill=\"#F0F1F3\"\n                />\n                <rect\n                    x=\"59.0981\"\n                    y=\"35.5716\"\n                    width=\"64.1833\"\n                    height=\"57.6158\"\n                    rx=\"1.71\"\n                    fill=\"#F0F1F3\"\n                />\n                <ellipse cx=\"20.7858\" cy=\"18.8146\" rx=\"2.47525\" ry=\"2.5\" fill=\"#FA5723\" />\n                <ellipse cx=\"28.8302\" cy=\"18.8146\" rx=\"2.47525\" ry=\"2.5\" fill=\"#FA5723\" />\n                <ellipse cx=\"37.4933\" cy=\"18.8146\" rx=\"2.47525\" ry=\"2.5\" fill=\"#FA5723\" />\n            </g>\n        </g>\n        <defs>\n            <filter\n                id=\"es_select_filter0_d_6795_48832\"\n                x=\"-0.000156403\"\n                y=\"-2.15769e-05\"\n                width=\"144.68\"\n                height=\"119.68\"\n                filterUnits=\"userSpaceOnUse\"\n                colorInterpolationFilters=\"sRGB\"\n            >\n                <feFlood floodOpacity=\"0\" result=\"BackgroundImageFix\" />\n                <feColorMatrix\n                    in=\"SourceAlpha\"\n                    type=\"matrix\"\n                    values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\n                    result=\"hardAlpha\"\n                />\n                <feOffset dy=\"1.41884\" />\n                <feGaussianBlur stdDeviation=\"4.92\" />\n                <feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0\" />\n                <feBlend\n                    mode=\"normal\"\n                    in2=\"BackgroundImageFix\"\n                    result=\"effect1_dropShadow_6795_48832\"\n                />\n                <feBlend\n                    mode=\"normal\"\n                    in=\"SourceGraphic\"\n                    in2=\"effect1_dropShadow_6795_48832\"\n                    result=\"shape\"\n                />\n            </filter>\n        </defs>\n    </svg>\n);\n"],"names":["SelectIllustration","props"],"mappings":";AAEO,MAAMA,qBAAqB,CAACC,QAAAA,WAAAA,GAC/B,oBAAC;QAAI,SAAQ;QAAc,MAAK;QAAO,OAAM;QAA8B,GAAGA,KAAK;qBAC/E,oBAAC,yBACG,oBAAC,yBACG,oBAAC;QAAE,QAAO;qBACN,oBAAC;QACG,GAAE;QACF,MAAK;uBAGb,oBAAC;QACG,GAAE;QACF,GAAE;QACF,OAAM;QACN,QAAO;QACP,IAAG;QACH,MAAK;sBAET,oBAAC;QACG,GAAE;QACF,GAAE;QACF,OAAM;QACN,QAAO;QACP,IAAG;QACH,MAAK;sBAET,oBAAC;QACG,GAAE;QACF,GAAE;QACF,OAAM;QACN,QAAO;QACP,IAAG;QACH,MAAK;sBAET,oBAAC;QACG,GAAE;QACF,GAAE;QACF,OAAM;QACN,QAAO;QACP,IAAG;QACH,MAAK;sBAET,oBAAC;QACG,GAAE;QACF,GAAE;QACF,OAAM;QACN,QAAO;QACP,IAAG;QACH,MAAK;sBAET,oBAAC;QAAQ,IAAG;QAAU,IAAG;QAAU,IAAG;QAAU,IAAG;QAAM,MAAK;sBAC9D,oBAAC;QAAQ,IAAG;QAAU,IAAG;QAAU,IAAG;QAAU,IAAG;QAAM,MAAK;sBAC9D,oBAAC;QAAQ,IAAG;QAAU,IAAG;QAAU,IAAG;QAAU,IAAG;QAAM,MAAK;wBAGtE,oBAAC,4BACG,oBAAC;QACG,IAAG;QACH,GAAE;QACF,GAAE;QACF,OAAM;QACN,QAAO;QACP,aAAY;QACZ,2BAA0B;qBAE1B,oBAAC;QAAQ,cAAa;QAAI,QAAO;sBACjC,oBAAC;QACG,IAAG;QACH,MAAK;QACL,QAAO;QACP,QAAO;sBAEX,oBAAC;QAAS,IAAG;sBACb,oBAAC;QAAe,cAAa;sBAC7B,oBAAC;QAAc,MAAK;QAAS,QAAO;sBACpC,oBAAC;QACG,MAAK;QACL,KAAI;QACJ,QAAO;sBAEX,oBAAC;QACG,MAAK;QACL,IAAG;QACH,KAAI;QACJ,QAAO"}

package/EmptyState/illustrations/TableIllustration.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const TableIllustration: (props: React.SVGProps<SVGSVGElement>) => React.JSX.Element;

package/EmptyState/illustrations/TableIllustration.js

@@ -0,0 +1,233 @@
+import react from "react";
+const TableIllustration = (props)=>/*#__PURE__*/ react.createElement("svg", {
+        viewBox: "0 0 145 120",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        ...props
+    }, /*#__PURE__*/ react.createElement("g", null, /*#__PURE__*/ react.createElement("g", null, /*#__PURE__*/ react.createElement("g", null, /*#__PURE__*/ react.createElement("g", {
+        filter: "url(#es_table_filter0_d_6795_48832)"
+    }, /*#__PURE__*/ react.createElement("path", {
+        d: "M9.83984 16.4212C9.83984 12.0029 13.4216 8.42116 17.8398 8.42116H126.84C131.258 8.42116 134.84 12.0029 134.84 16.4212V100.421C134.84 104.839 131.258 108.421 126.84 108.421H17.8398C13.4216 108.421 9.83984 104.839 9.83984 100.421V16.4212Z",
+        fill: "white"
+    })), /*#__PURE__*/ react.createElement("ellipse", {
+        cx: "20.7853",
+        cy: "18.8145",
+        rx: "2.47525",
+        ry: "2.5",
+        fill: "#FA5723"
+    }), /*#__PURE__*/ react.createElement("ellipse", {
+        cx: "28.8302",
+        cy: "18.8145",
+        rx: "2.47525",
+        ry: "2.5",
+        fill: "#FA5723"
+    }), /*#__PURE__*/ react.createElement("ellipse", {
+        cx: "37.4938",
+        cy: "18.8145",
+        rx: "2.47525",
+        ry: "2.5",
+        fill: "#FA5723"
+    }), /*#__PURE__*/ react.createElement("rect", {
+        x: "18.3101",
+        y: "38.553",
+        width: "24.953",
+        height: "6.04586",
+        rx: "1.71",
+        fill: "#F0F1F3"
+    }), /*#__PURE__*/ react.createElement("rect", {
+        x: "18.3101",
+        y: "56.6906",
+        width: "24.953",
+        height: "7.0535",
+        rx: "1.71",
+        fill: "#F0F1F3"
+    }), /*#__PURE__*/ react.createElement("rect", {
+        x: "18.3101",
+        y: "47.6218",
+        width: "24.953",
+        height: "6.04586",
+        rx: "1.71",
+        fill: "#F0F1F3"
+    }), /*#__PURE__*/ react.createElement("rect", {
+        x: "18.3101",
+        y: "66.767",
+        width: "24.953",
+        height: "7.0535",
+        rx: "1.71",
+        fill: "#F0F1F3"
+    }), /*#__PURE__*/ react.createElement("rect", {
+        x: "45.9531",
+        y: "38.553",
+        width: "24.953",
+        height: "6.04586",
+        rx: "1.71",
+        fill: "#F0F1F3"
+    }), /*#__PURE__*/ react.createElement("rect", {
+        x: "45.9531",
+        y: "56.8422",
+        width: "24.953",
+        height: "7.0535",
+        rx: "1.71",
+        fill: "#F0F1F3"
+    }), /*#__PURE__*/ react.createElement("rect", {
+        x: "45.9531",
+        y: "47.6976",
+        width: "24.953",
+        height: "6.04586",
+        rx: "1.71",
+        fill: "#F0F1F3"
+    }), /*#__PURE__*/ react.createElement("rect", {
+        x: "45.9531",
+        y: "66.9944",
+        width: "24.953",
+        height: "7.0535",
+        rx: "1.71",
+        fill: "#F0F1F3"
+    }), /*#__PURE__*/ react.createElement("rect", {
+        x: "73.4009",
+        y: "38.553",
+        width: "24.953",
+        height: "6.04586",
+        rx: "1.71",
+        fill: "#F0F1F3"
+    }), /*#__PURE__*/ react.createElement("rect", {
+        x: "73.4009",
+        y: "56.8422",
+        width: "24.953",
+        height: "7.0535",
+        rx: "1.71",
+        fill: "#F0F1F3"
+    }), /*#__PURE__*/ react.createElement("rect", {
+        x: "73.4009",
+        y: "47.6976",
+        width: "24.953",
+        height: "6.04586",
+        rx: "1.71",
+        fill: "#F0F1F3"
+    }), /*#__PURE__*/ react.createElement("rect", {
+        x: "73.4009",
+        y: "66.9944",
+        width: "24.953",
+        height: "7.0535",
+        rx: "1.71",
+        fill: "#F0F1F3"
+    }), /*#__PURE__*/ react.createElement("rect", {
+        x: "100.85",
+        y: "38.553",
+        width: "24.953",
+        height: "6.04586",
+        rx: "1.71",
+        fill: "#F0F1F3"
+    }), /*#__PURE__*/ react.createElement("rect", {
+        x: "100.85",
+        y: "56.8422",
+        width: "24.953",
+        height: "7.0535",
+        rx: "1.71",
+        fill: "#F0F1F3"
+    }), /*#__PURE__*/ react.createElement("rect", {
+        x: "100.85",
+        y: "47.6976",
+        width: "24.953",
+        height: "6.04586",
+        rx: "1.71",
+        fill: "#F0F1F3"
+    }), /*#__PURE__*/ react.createElement("rect", {
+        x: "100.85",
+        y: "66.9944",
+        width: "24.953",
+        height: "7.0535",
+        rx: "1.71",
+        fill: "#F0F1F3"
+    }), /*#__PURE__*/ react.createElement("rect", {
+        x: "18.3101",
+        y: "76.8435",
+        width: "24.953",
+        height: "7.0535",
+        rx: "1.71",
+        fill: "#F0F1F3"
+    }), /*#__PURE__*/ react.createElement("rect", {
+        x: "18.3101",
+        y: "86.9199",
+        width: "24.953",
+        height: "7.0535",
+        rx: "1.71",
+        fill: "#F0F1F3"
+    }), /*#__PURE__*/ react.createElement("rect", {
+        x: "45.9531",
+        y: "77.1466",
+        width: "24.953",
+        height: "7.0535",
+        rx: "1.71",
+        fill: "#F0F1F3"
+    }), /*#__PURE__*/ react.createElement("rect", {
+        x: "45.9531",
+        y: "87.2988",
+        width: "24.953",
+        height: "7.0535",
+        rx: "1.71",
+        fill: "#F0F1F3"
+    }), /*#__PURE__*/ react.createElement("rect", {
+        x: "73.4009",
+        y: "77.1466",
+        width: "24.953",
+        height: "7.0535",
+        rx: "1.71",
+        fill: "#F0F1F3"
+    }), /*#__PURE__*/ react.createElement("rect", {
+        x: "73.4009",
+        y: "87.2988",
+        width: "24.953",
+        height: "7.0535",
+        rx: "1.71",
+        fill: "#F0F1F3"
+    }), /*#__PURE__*/ react.createElement("rect", {
+        x: "100.85",
+        y: "77.1466",
+        width: "24.953",
+        height: "7.0535",
+        rx: "1.71",
+        fill: "#F0F1F3"
+    }), /*#__PURE__*/ react.createElement("rect", {
+        x: "100.85",
+        y: "87.2988",
+        width: "24.953",
+        height: "7.0535",
+        rx: "1.71",
+        fill: "#F0F1F3"
+    })))), /*#__PURE__*/ react.createElement("defs", null, /*#__PURE__*/ react.createElement("filter", {
+        id: "es_table_filter0_d_6795_48832",
+        x: "-0.000156403",
+        y: "-6.31809e-06",
+        width: "144.68",
+        height: "119.68",
+        filterUnits: "userSpaceOnUse",
+        colorInterpolationFilters: "sRGB"
+    }, /*#__PURE__*/ react.createElement("feFlood", {
+        floodOpacity: "0",
+        result: "BackgroundImageFix"
+    }), /*#__PURE__*/ react.createElement("feColorMatrix", {
+        in: "SourceAlpha",
+        type: "matrix",
+        values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0",
+        result: "hardAlpha"
+    }), /*#__PURE__*/ react.createElement("feOffset", {
+        dy: "1.41884"
+    }), /*#__PURE__*/ react.createElement("feGaussianBlur", {
+        stdDeviation: "4.92"
+    }), /*#__PURE__*/ react.createElement("feColorMatrix", {
+        type: "matrix",
+        values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"
+    }), /*#__PURE__*/ react.createElement("feBlend", {
+        mode: "normal",
+        in2: "BackgroundImageFix",
+        result: "effect1_dropShadow_6795_48832"
+    }), /*#__PURE__*/ react.createElement("feBlend", {
+        mode: "normal",
+        in: "SourceGraphic",
+        in2: "effect1_dropShadow_6795_48832",
+        result: "shape"
+    }))));
+export { TableIllustration };
+
+//# sourceMappingURL=TableIllustration.js.map

package/EmptyState/illustrations/TableIllustration.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyState/illustrations/TableIllustration.js","sources":["../../../src/EmptyState/illustrations/TableIllustration.tsx"],"sourcesContent":["import React from \"react\";\n\nexport const TableIllustration = (props: React.SVGProps<SVGSVGElement>) => (\n    <svg viewBox=\"0 0 145 120\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n        <g>\n            <g>\n                <g>\n                    <g filter=\"url(#es_table_filter0_d_6795_48832)\">\n                        <path\n                            d=\"M9.83984 16.4212C9.83984 12.0029 13.4216 8.42116 17.8398 8.42116H126.84C131.258 8.42116 134.84 12.0029 134.84 16.4212V100.421C134.84 104.839 131.258 108.421 126.84 108.421H17.8398C13.4216 108.421 9.83984 104.839 9.83984 100.421V16.4212Z\"\n                            fill=\"white\"\n                        />\n                    </g>\n                    <ellipse cx=\"20.7853\" cy=\"18.8145\" rx=\"2.47525\" ry=\"2.5\" fill=\"#FA5723\" />\n                    <ellipse cx=\"28.8302\" cy=\"18.8145\" rx=\"2.47525\" ry=\"2.5\" fill=\"#FA5723\" />\n                    <ellipse cx=\"37.4938\" cy=\"18.8145\" rx=\"2.47525\" ry=\"2.5\" fill=\"#FA5723\" />\n                    <rect\n                        x=\"18.3101\"\n                        y=\"38.553\"\n                        width=\"24.953\"\n                        height=\"6.04586\"\n                        rx=\"1.71\"\n                        fill=\"#F0F1F3\"\n                    />\n                    <rect\n                        x=\"18.3101\"\n                        y=\"56.6906\"\n                        width=\"24.953\"\n                        height=\"7.0535\"\n                        rx=\"1.71\"\n                        fill=\"#F0F1F3\"\n                    />\n                    <rect\n                        x=\"18.3101\"\n                        y=\"47.6218\"\n                        width=\"24.953\"\n                        height=\"6.04586\"\n                        rx=\"1.71\"\n                        fill=\"#F0F1F3\"\n                    />\n                    <rect\n                        x=\"18.3101\"\n                        y=\"66.767\"\n                        width=\"24.953\"\n                        height=\"7.0535\"\n                        rx=\"1.71\"\n                        fill=\"#F0F1F3\"\n                    />\n                    <rect\n                        x=\"45.9531\"\n                        y=\"38.553\"\n                        width=\"24.953\"\n                        height=\"6.04586\"\n                        rx=\"1.71\"\n                        fill=\"#F0F1F3\"\n                    />\n                    <rect\n                        x=\"45.9531\"\n                        y=\"56.8422\"\n                        width=\"24.953\"\n                        height=\"7.0535\"\n                        rx=\"1.71\"\n                        fill=\"#F0F1F3\"\n                    />\n                    <rect\n                        x=\"45.9531\"\n                        y=\"47.6976\"\n                        width=\"24.953\"\n                        height=\"6.04586\"\n                        rx=\"1.71\"\n                        fill=\"#F0F1F3\"\n                    />\n                    <rect\n                        x=\"45.9531\"\n                        y=\"66.9944\"\n                        width=\"24.953\"\n                        height=\"7.0535\"\n                        rx=\"1.71\"\n                        fill=\"#F0F1F3\"\n                    />\n                    <rect\n                        x=\"73.4009\"\n                        y=\"38.553\"\n                        width=\"24.953\"\n                        height=\"6.04586\"\n                        rx=\"1.71\"\n                        fill=\"#F0F1F3\"\n                    />\n                    <rect\n                        x=\"73.4009\"\n                        y=\"56.8422\"\n                        width=\"24.953\"\n                        height=\"7.0535\"\n                        rx=\"1.71\"\n                        fill=\"#F0F1F3\"\n                    />\n                    <rect\n                        x=\"73.4009\"\n                        y=\"47.6976\"\n                        width=\"24.953\"\n                        height=\"6.04586\"\n                        rx=\"1.71\"\n                        fill=\"#F0F1F3\"\n                    />\n                    <rect\n                        x=\"73.4009\"\n                        y=\"66.9944\"\n                        width=\"24.953\"\n                        height=\"7.0535\"\n                        rx=\"1.71\"\n                        fill=\"#F0F1F3\"\n                    />\n                    <rect\n                        x=\"100.85\"\n                        y=\"38.553\"\n                        width=\"24.953\"\n                        height=\"6.04586\"\n                        rx=\"1.71\"\n                        fill=\"#F0F1F3\"\n                    />\n                    <rect\n                        x=\"100.85\"\n                        y=\"56.8422\"\n                        width=\"24.953\"\n                        height=\"7.0535\"\n                        rx=\"1.71\"\n                        fill=\"#F0F1F3\"\n                    />\n                    <rect\n                        x=\"100.85\"\n                        y=\"47.6976\"\n                        width=\"24.953\"\n                        height=\"6.04586\"\n                        rx=\"1.71\"\n                        fill=\"#F0F1F3\"\n                    />\n                    <rect\n                        x=\"100.85\"\n                        y=\"66.9944\"\n                        width=\"24.953\"\n                        height=\"7.0535\"\n                        rx=\"1.71\"\n                        fill=\"#F0F1F3\"\n                    />\n                    <rect\n                        x=\"18.3101\"\n                        y=\"76.8435\"\n                        width=\"24.953\"\n                        height=\"7.0535\"\n                        rx=\"1.71\"\n                        fill=\"#F0F1F3\"\n                    />\n                    <rect\n                        x=\"18.3101\"\n                        y=\"86.9199\"\n                        width=\"24.953\"\n                        height=\"7.0535\"\n                        rx=\"1.71\"\n                        fill=\"#F0F1F3\"\n                    />\n                    <rect\n                        x=\"45.9531\"\n                        y=\"77.1466\"\n                        width=\"24.953\"\n                        height=\"7.0535\"\n                        rx=\"1.71\"\n                        fill=\"#F0F1F3\"\n                    />\n                    <rect\n                        x=\"45.9531\"\n                        y=\"87.2988\"\n                        width=\"24.953\"\n                        height=\"7.0535\"\n                        rx=\"1.71\"\n                        fill=\"#F0F1F3\"\n                    />\n                    <rect\n                        x=\"73.4009\"\n                        y=\"77.1466\"\n                        width=\"24.953\"\n                        height=\"7.0535\"\n                        rx=\"1.71\"\n                        fill=\"#F0F1F3\"\n                    />\n                    <rect\n                        x=\"73.4009\"\n                        y=\"87.2988\"\n                        width=\"24.953\"\n                        height=\"7.0535\"\n                        rx=\"1.71\"\n                        fill=\"#F0F1F3\"\n                    />\n                    <rect\n                        x=\"100.85\"\n                        y=\"77.1466\"\n                        width=\"24.953\"\n                        height=\"7.0535\"\n                        rx=\"1.71\"\n                        fill=\"#F0F1F3\"\n                    />\n                    <rect\n                        x=\"100.85\"\n                        y=\"87.2988\"\n                        width=\"24.953\"\n                        height=\"7.0535\"\n                        rx=\"1.71\"\n                        fill=\"#F0F1F3\"\n                    />\n                </g>\n            </g>\n        </g>\n        <defs>\n            <filter\n                id=\"es_table_filter0_d_6795_48832\"\n                x=\"-0.000156403\"\n                y=\"-6.31809e-06\"\n                width=\"144.68\"\n                height=\"119.68\"\n                filterUnits=\"userSpaceOnUse\"\n                colorInterpolationFilters=\"sRGB\"\n            >\n                <feFlood floodOpacity=\"0\" result=\"BackgroundImageFix\" />\n                <feColorMatrix\n                    in=\"SourceAlpha\"\n                    type=\"matrix\"\n                    values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\n                    result=\"hardAlpha\"\n                />\n                <feOffset dy=\"1.41884\" />\n                <feGaussianBlur stdDeviation=\"4.92\" />\n                <feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0\" />\n                <feBlend\n                    mode=\"normal\"\n                    in2=\"BackgroundImageFix\"\n                    result=\"effect1_dropShadow_6795_48832\"\n                />\n                <feBlend\n                    mode=\"normal\"\n                    in=\"SourceGraphic\"\n                    in2=\"effect1_dropShadow_6795_48832\"\n                    result=\"shape\"\n                />\n            </filter>\n        </defs>\n    </svg>\n);\n"],"names":["TableIllustration","props"],"mappings":"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"}

package/EmptyState/illustrations/UploadIllustration.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const UploadIllustration: (props: React.SVGProps<SVGSVGElement>) => React.JSX.Element;

package/EmptyState/illustrations/UploadIllustration.js

@@ -0,0 +1,77 @@
+import react from "react";
+const UploadIllustration = (props)=>/*#__PURE__*/ react.createElement("svg", {
+        viewBox: "0 0 145 120",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        ...props
+    }, /*#__PURE__*/ react.createElement("g", null, /*#__PURE__*/ react.createElement("g", null, /*#__PURE__*/ react.createElement("g", null, /*#__PURE__*/ react.createElement("g", {
+        filter: "url(#es_upload_filter0_d_6795_48832)"
+    }, /*#__PURE__*/ react.createElement("path", {
+        d: "M9.83984 16.4211C9.83984 12.0029 13.4216 8.42114 17.8398 8.42114H126.84C131.258 8.42114 134.84 12.0029 134.84 16.4211V100.421C134.84 104.839 131.258 108.421 126.84 108.421H17.8398C13.4216 108.421 9.83984 104.839 9.83984 100.421V16.4211Z",
+        fill: "white"
+    })), /*#__PURE__*/ react.createElement("ellipse", {
+        cx: "20.7853",
+        cy: "18.8145",
+        rx: "2.47525",
+        ry: "2.5",
+        fill: "#FA5723"
+    }), /*#__PURE__*/ react.createElement("ellipse", {
+        cx: "28.8302",
+        cy: "18.8145",
+        rx: "2.47525",
+        ry: "2.5",
+        fill: "#FA5723"
+    }), /*#__PURE__*/ react.createElement("ellipse", {
+        cx: "37.4938",
+        cy: "18.8145",
+        rx: "2.47525",
+        ry: "2.5",
+        fill: "#FA5723"
+    }), /*#__PURE__*/ react.createElement("g", {
+        clipPath: "url(#es_upload_clip0_6795_48832)"
+    }, /*#__PURE__*/ react.createElement("path", {
+        d: "M89.2764 58.5558C87.8065 50.8348 81.2568 45.0385 73.3885 45.0385C67.1415 45.0385 61.7158 48.7088 59.0138 54.0799C52.5074 54.796 47.4492 60.5028 47.4492 67.4181C47.4492 74.8257 53.2639 80.8458 60.4189 80.8458H88.5198C94.4858 80.8458 99.3278 75.8328 99.3278 69.656C99.3278 63.7478 94.8965 58.9586 89.2764 58.5558ZM88.5198 76.3699H60.4189C55.6417 76.3699 51.7724 72.364 51.7724 67.4181C51.7724 62.8303 55.0797 59.0034 59.4678 58.5334L61.7807 58.2872L62.8615 56.1612C64.915 52.0657 68.9356 49.5144 73.3885 49.5144C79.0519 49.5144 83.9372 53.677 85.0396 59.4286L85.6881 62.7855L88.9953 63.0317C92.3675 63.2555 95.0046 66.1872 95.0046 69.656C95.0046 73.3487 92.0864 76.3699 88.5198 76.3699ZM64.7421 65.1801H70.2542V71.894H76.5229V65.1801H82.035L73.3885 56.2283L64.7421 65.1801Z",
+        fill: "#BEC3CC"
+    }))))), /*#__PURE__*/ react.createElement("defs", null, /*#__PURE__*/ react.createElement("filter", {
+        id: "es_upload_filter0_d_6795_48832",
+        x: "-0.000156403",
+        y: "-2.15769e-05",
+        width: "144.68",
+        height: "119.68",
+        filterUnits: "userSpaceOnUse",
+        colorInterpolationFilters: "sRGB"
+    }, /*#__PURE__*/ react.createElement("feFlood", {
+        floodOpacity: "0",
+        result: "BackgroundImageFix"
+    }), /*#__PURE__*/ react.createElement("feColorMatrix", {
+        in: "SourceAlpha",
+        type: "matrix",
+        values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0",
+        result: "hardAlpha"
+    }), /*#__PURE__*/ react.createElement("feOffset", {
+        dy: "1.41884"
+    }), /*#__PURE__*/ react.createElement("feGaussianBlur", {
+        stdDeviation: "4.92"
+    }), /*#__PURE__*/ react.createElement("feColorMatrix", {
+        type: "matrix",
+        values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"
+    }), /*#__PURE__*/ react.createElement("feBlend", {
+        mode: "normal",
+        in2: "BackgroundImageFix",
+        result: "effect1_dropShadow_6795_48832"
+    }), /*#__PURE__*/ react.createElement("feBlend", {
+        mode: "normal",
+        in: "SourceGraphic",
+        in2: "effect1_dropShadow_6795_48832",
+        result: "shape"
+    })), /*#__PURE__*/ react.createElement("clipPath", {
+        id: "es_upload_clip0_6795_48832"
+    }, /*#__PURE__*/ react.createElement("rect", {
+        width: "51.8786",
+        height: "53.7109",
+        fill: "white",
+        transform: "translate(47.4492 36.0867)"
+    }))));
+export { UploadIllustration };
+
+//# sourceMappingURL=UploadIllustration.js.map

package/EmptyState/illustrations/UploadIllustration.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyState/illustrations/UploadIllustration.js","sources":["../../../src/EmptyState/illustrations/UploadIllustration.tsx"],"sourcesContent":["import React from \"react\";\n\nexport const UploadIllustration = (props: React.SVGProps<SVGSVGElement>) => (\n    <svg viewBox=\"0 0 145 120\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n        <g>\n            <g>\n                <g>\n                    <g filter=\"url(#es_upload_filter0_d_6795_48832)\">\n                        <path\n                            d=\"M9.83984 16.4211C9.83984 12.0029 13.4216 8.42114 17.8398 8.42114H126.84C131.258 8.42114 134.84 12.0029 134.84 16.4211V100.421C134.84 104.839 131.258 108.421 126.84 108.421H17.8398C13.4216 108.421 9.83984 104.839 9.83984 100.421V16.4211Z\"\n                            fill=\"white\"\n                        />\n                    </g>\n                    <ellipse cx=\"20.7853\" cy=\"18.8145\" rx=\"2.47525\" ry=\"2.5\" fill=\"#FA5723\" />\n                    <ellipse cx=\"28.8302\" cy=\"18.8145\" rx=\"2.47525\" ry=\"2.5\" fill=\"#FA5723\" />\n                    <ellipse cx=\"37.4938\" cy=\"18.8145\" rx=\"2.47525\" ry=\"2.5\" fill=\"#FA5723\" />\n                    <g clipPath=\"url(#es_upload_clip0_6795_48832)\">\n                        <path\n                            d=\"M89.2764 58.5558C87.8065 50.8348 81.2568 45.0385 73.3885 45.0385C67.1415 45.0385 61.7158 48.7088 59.0138 54.0799C52.5074 54.796 47.4492 60.5028 47.4492 67.4181C47.4492 74.8257 53.2639 80.8458 60.4189 80.8458H88.5198C94.4858 80.8458 99.3278 75.8328 99.3278 69.656C99.3278 63.7478 94.8965 58.9586 89.2764 58.5558ZM88.5198 76.3699H60.4189C55.6417 76.3699 51.7724 72.364 51.7724 67.4181C51.7724 62.8303 55.0797 59.0034 59.4678 58.5334L61.7807 58.2872L62.8615 56.1612C64.915 52.0657 68.9356 49.5144 73.3885 49.5144C79.0519 49.5144 83.9372 53.677 85.0396 59.4286L85.6881 62.7855L88.9953 63.0317C92.3675 63.2555 95.0046 66.1872 95.0046 69.656C95.0046 73.3487 92.0864 76.3699 88.5198 76.3699ZM64.7421 65.1801H70.2542V71.894H76.5229V65.1801H82.035L73.3885 56.2283L64.7421 65.1801Z\"\n                            fill=\"#BEC3CC\"\n                        />\n                    </g>\n                </g>\n            </g>\n        </g>\n        <defs>\n            <filter\n                id=\"es_upload_filter0_d_6795_48832\"\n                x=\"-0.000156403\"\n                y=\"-2.15769e-05\"\n                width=\"144.68\"\n                height=\"119.68\"\n                filterUnits=\"userSpaceOnUse\"\n                colorInterpolationFilters=\"sRGB\"\n            >\n                <feFlood floodOpacity=\"0\" result=\"BackgroundImageFix\" />\n                <feColorMatrix\n                    in=\"SourceAlpha\"\n                    type=\"matrix\"\n                    values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\n                    result=\"hardAlpha\"\n                />\n                <feOffset dy=\"1.41884\" />\n                <feGaussianBlur stdDeviation=\"4.92\" />\n                <feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0\" />\n                <feBlend\n                    mode=\"normal\"\n                    in2=\"BackgroundImageFix\"\n                    result=\"effect1_dropShadow_6795_48832\"\n                />\n                <feBlend\n                    mode=\"normal\"\n                    in=\"SourceGraphic\"\n                    in2=\"effect1_dropShadow_6795_48832\"\n                    result=\"shape\"\n                />\n            </filter>\n            <clipPath id=\"es_upload_clip0_6795_48832\">\n                <rect\n                    width=\"51.8786\"\n                    height=\"53.7109\"\n                    fill=\"white\"\n                    transform=\"translate(47.4492 36.0867)\"\n                />\n            </clipPath>\n        </defs>\n    </svg>\n);\n"],"names":["UploadIllustration","props"],"mappings":";AAEO,MAAMA,qBAAqB,CAACC,QAAAA,WAAAA,GAC/B,oBAAC;QAAI,SAAQ;QAAc,MAAK;QAAO,OAAM;QAA8B,GAAGA,KAAK;qBAC/E,oBAAC,yBACG,oBAAC,yBACG,oBAAC,yBACG,oBAAC;QAAE,QAAO;qBACN,oBAAC;QACG,GAAE;QACF,MAAK;uBAGb,oBAAC;QAAQ,IAAG;QAAU,IAAG;QAAU,IAAG;QAAU,IAAG;QAAM,MAAK;sBAC9D,oBAAC;QAAQ,IAAG;QAAU,IAAG;QAAU,IAAG;QAAU,IAAG;QAAM,MAAK;sBAC9D,oBAAC;QAAQ,IAAG;QAAU,IAAG;QAAU,IAAG;QAAU,IAAG;QAAM,MAAK;sBAC9D,oBAAC;QAAE,UAAS;qBACR,oBAAC;QACG,GAAE;QACF,MAAK;0BAMzB,oBAAC,4BACG,oBAAC;QACG,IAAG;QACH,GAAE;QACF,GAAE;QACF,OAAM;QACN,QAAO;QACP,aAAY;QACZ,2BAA0B;qBAE1B,oBAAC;QAAQ,cAAa;QAAI,QAAO;sBACjC,oBAAC;QACG,IAAG;QACH,MAAK;QACL,QAAO;QACP,QAAO;sBAEX,oBAAC;QAAS,IAAG;sBACb,oBAAC;QAAe,cAAa;sBAC7B,oBAAC;QAAc,MAAK;QAAS,QAAO;sBACpC,oBAAC;QACG,MAAK;QACL,KAAI;QACJ,QAAO;sBAEX,oBAAC;QACG,MAAK;QACL,IAAG;QACH,KAAI;QACJ,QAAO;uBAGf,oBAAC;QAAS,IAAG;qBACT,oBAAC;QACG,OAAM;QACN,QAAO;QACP,MAAK;QACL,WAAU"}

package/EmptyState/illustrations/index.d.ts

@@ -0,0 +1,6 @@
+export { ContentIllustration } from "./ContentIllustration.js";
+export { TableIllustration } from "./TableIllustration.js";
+export { ListingIllustration } from "./ListingIllustration.js";
+export { LayoutIllustration } from "./LayoutIllustration.js";
+export { UploadIllustration } from "./UploadIllustration.js";
+export { SelectIllustration } from "./SelectIllustration.js";

package/EmptyState/illustrations/index.js

@@ -0,0 +1,6 @@
+export { ContentIllustration } from "./ContentIllustration.js";
+export { TableIllustration } from "./TableIllustration.js";
+export { ListingIllustration } from "./ListingIllustration.js";
+export { LayoutIllustration } from "./LayoutIllustration.js";
+export { UploadIllustration } from "./UploadIllustration.js";
+export { SelectIllustration } from "./SelectIllustration.js";

package/EmptyState/index.d.ts

@@ -0,0 +1 @@
+export * from "./EmptyState.js";

package/EmptyState/index.js

@@ -0,0 +1 @@
+export * from "./EmptyState.js";

package/FilePicker/FilePicker.d.ts

@@ -2,60 +2,61 @@ import React from "react";
 import { type FilePickerPrimitiveProps } from "./primitives/index.js";
 import { type FormComponentProps } from "../FormComponent/index.js";
 type FilePickerProps = FilePickerPrimitiveProps & Omit<FormComponentProps, "value">;
-declare const FilePicker: (({ label, hint, description, note, required, disabled, validation, validate, onBlur: originalOnBlur, type, ...props }: FilePickerProps) => React.JSX.Element) & {
-    original: ({ label, hint, description, note, required, disabled, validation, validate, onBlur: originalOnBlur, type, ...props }: FilePickerProps) => React.JSX.Element;
+declare const BaseFilePicker: ({ label, hint, description, note, required, disabled, validation, validate, onBlur: originalOnBlur, type, ...props }: FilePickerProps) => React.JSX.Element;
+declare const FilePicker: typeof BaseFilePicker & {
+    original: typeof BaseFilePicker;
     originalName: string;
     displayName: string;
 } & {
-    original: (({ label, hint, description, note, required, disabled, validation, validate, onBlur: originalOnBlur, type, ...props }: FilePickerProps) => React.JSX.Element) & {
-        original: ({ label, hint, description, note, required, disabled, validation, validate, onBlur: originalOnBlur, type, ...props }: FilePickerProps) => React.JSX.Element;
+    original: typeof BaseFilePicker & {
+        original: typeof BaseFilePicker;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(({ label, hint, description, note, required, disabled, validation, validate, onBlur: originalOnBlur, type, ...props }: FilePickerProps) => React.JSX.Element) & {
-        original: ({ label, hint, description, note, required, disabled, validation, validate, onBlur: originalOnBlur, type, ...props }: FilePickerProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<typeof BaseFilePicker & {
+        original: typeof BaseFilePicker;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;
 } & {
     Preview: {
-        Image: (({ value, className, variant, disabled, onRemoveItem, onReplaceItem, onEditItem }: import("~/FilePicker/primitives/components/index.js").ImagePreviewProps) => React.JSX.Element) & {
-            original: ({ value, className, variant, disabled, onRemoveItem, onReplaceItem, onEditItem }: import("~/FilePicker/primitives/components/index.js").ImagePreviewProps) => React.JSX.Element;
+        Image: (({ value, className, variant, disabled, onRemoveItem, onReplaceItem, onEditItem, renderImage }: import("~/FilePicker/primitives/components/index.js").ImagePreviewProps) => React.JSX.Element) & {
+            original: ({ value, className, variant, disabled, onRemoveItem, onReplaceItem, onEditItem, renderImage }: import("~/FilePicker/primitives/components/index.js").ImagePreviewProps) => React.JSX.Element;
             originalName: string;
             displayName: string;
         } & {
-            original: (({ value, className, variant, disabled, onRemoveItem, onReplaceItem, onEditItem }: import("~/FilePicker/primitives/components/index.js").ImagePreviewProps) => React.JSX.Element) & {
-                original: ({ value, className, variant, disabled, onRemoveItem, onReplaceItem, onEditItem }: import("~/FilePicker/primitives/components/index.js").ImagePreviewProps) => React.JSX.Element;
+            original: (({ value, className, variant, disabled, onRemoveItem, onReplaceItem, onEditItem, renderImage }: import("~/FilePicker/primitives/components/index.js").ImagePreviewProps) => React.JSX.Element) & {
+                original: ({ value, className, variant, disabled, onRemoveItem, onReplaceItem, onEditItem, renderImage }: import("~/FilePicker/primitives/components/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("~/FilePicker/primitives/components/index.js").ImagePreviewProps) => React.JSX.Element) & {
-                original: ({ value, className, variant, disabled, onRemoveItem, onReplaceItem, onEditItem }: import("~/FilePicker/primitives/components/index.js").ImagePreviewProps) => React.JSX.Element;
+            createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(({ value, className, variant, disabled, onRemoveItem, onReplaceItem, onEditItem, renderImage }: import("~/FilePicker/primitives/components/index.js").ImagePreviewProps) => React.JSX.Element) & {
+                original: ({ value, className, variant, disabled, onRemoveItem, onReplaceItem, onEditItem, renderImage }: import("~/FilePicker/primitives/components/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("~/FilePicker/primitives/components/index.js").RichItemPreviewProps) => React.JSX.Element) & {
-            original: ({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, ...props }: import("~/FilePicker/primitives/components/index.js").RichItemPreviewProps) => React.JSX.Element;
+        RichItem: (({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, renderImage, ...props }: import("~/FilePicker/primitives/components/index.js").RichItemPreviewProps) => React.JSX.Element) & {
+            original: ({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, renderImage, ...props }: import("~/FilePicker/primitives/components/index.js").RichItemPreviewProps) => React.JSX.Element;
             originalName: string;
             displayName: string;
         } & {
-            original: (({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, ...props }: import("~/FilePicker/primitives/components/index.js").RichItemPreviewProps) => React.JSX.Element) & {
-                original: ({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, ...props }: import("~/FilePicker/primitives/components/index.js").RichItemPreviewProps) => React.JSX.Element;
+            original: (({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, renderImage, ...props }: import("~/FilePicker/primitives/components/index.js").RichItemPreviewProps) => React.JSX.Element) & {
+                original: ({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, renderImage, ...props }: import("~/FilePicker/primitives/components/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("~/FilePicker/primitives/components/index.js").RichItemPreviewProps) => React.JSX.Element) & {
-                original: ({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, ...props }: import("~/FilePicker/primitives/components/index.js").RichItemPreviewProps) => React.JSX.Element;
+            createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, renderImage, ...props }: import("~/FilePicker/primitives/components/index.js").RichItemPreviewProps) => React.JSX.Element) & {
+                original: ({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, renderImage, ...props }: import("~/FilePicker/primitives/components/index.js").RichItemPreviewProps) => React.JSX.Element;
                 originalName: string;
                 displayName: string;
             }>) => (props: unknown) => React.JSX.Element;

package/FilePicker/FilePicker.stories.d.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react-webpack5";
+import type { Meta, StoryObj } from "@storybook/react";
 import { FilePicker } from "../FilePicker/index.js";
 declare const meta: Meta<typeof FilePicker>;
 export default meta;
@@ -22,4 +22,10 @@ export declare const CompactWithErrors: Story;
 export declare const CompactDisabled: Story;
 export declare const CompactWithValidateFunction: Story;
 export declare const CompactFullExample: Story;
+/**
+ * Reproduces the Website Builder style sidebar at its 206px value column: the preview stacks,
+ * the file name truncates in the middle so the extension and version suffix survive, and the
+ * actions spell themselves out instead of costing a fixed block of the row.
+ */
+export declare const CompactWithLongFileNameInNarrowContainer: Story;
 export declare const Documentation: Story;

package/FilePicker/FilePicker.stories.js

@@ -210,6 +210,29 @@ const CompactFullExample = {
         }
     }
 };
+const CompactWithLongFileNameInNarrowContainer = {
+    args: {
+        ...Compact.args
+    },
+    render: (args)=>{
+        const [selectedFile, setSelectedFile] = useState({
+            name: "tide-cc-statuses-2026-08-21-final-v2.png",
+            mimeType: "image/png",
+            size: 674161,
+            url: "https://picsum.photos/1200/800"
+        });
+        return /*#__PURE__*/ react.createElement("div", {
+            style: {
+                width: 206
+            }
+        }, /*#__PURE__*/ react.createElement(FilePicker, {
+            ...args,
+            value: selectedFile,
+            onSelectItem: ()=>setSelectedFile(getFile()),
+            onRemoveItem: ()=>setSelectedFile(null)
+        }));
+    }
+};
 const Documentation = {
     render: (args)=>{
         const [selectedFile, setSelectedFile] = useState(args.value);
@@ -324,6 +347,6 @@ const Documentation = {
     }
 };
 export default FilePicker_stories;
-export { AreaDisabled, AreaFullExample, AreaType, AreaWithDescription, AreaWithErrors, AreaWithLabel, AreaWithLabelRequired, AreaWithNotes, AreaWithValidateFunction, Compact, CompactDisabled, CompactFullExample, CompactWithDescription, CompactWithErrors, CompactWithLabel, CompactWithLabelRequired, CompactWithNotes, CompactWithValidateFunction, Default, Documentation };
+export { AreaDisabled, AreaFullExample, AreaType, AreaWithDescription, AreaWithErrors, AreaWithLabel, AreaWithLabelRequired, AreaWithNotes, AreaWithValidateFunction, Compact, CompactDisabled, CompactFullExample, CompactWithDescription, CompactWithErrors, CompactWithLabel, CompactWithLabelRequired, CompactWithLongFileNameInNarrowContainer, CompactWithNotes, CompactWithValidateFunction, Default, Documentation };
 
 //# sourceMappingURL=FilePicker.stories.js.map

package/FilePicker/FilePicker.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilePicker/FilePicker.stories.js","sources":["../../src/FilePicker/FilePicker.stories.tsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { type FileItemDto, FilePicker } 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 FilePicker> = {\n    title: \"Components/Form/FilePicker\",\n    component: FilePicker,\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            <FilePicker\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 FilePicker>;\n\nexport const Default: Story = {};\n\nexport const AreaType: Story = {\n    args: {\n        ...Default.args,\n        type: \"area\"\n    }\n};\n\nexport const AreaWithLabel: Story = {\n    args: {\n        ...AreaType.args,\n        label: \"Any field label\"\n    }\n};\n\nexport const AreaWithLabelRequired: Story = {\n    args: {\n        ...AreaType.args,\n        label: \"Any field label\",\n        required: true\n    }\n};\n\nexport const AreaWithDescription: Story = {\n    args: {\n        ...AreaType.args,\n        description: \"Provide the required information for processing your request.\"\n    }\n};\n\nexport const AreaWithNotes: Story = {\n    args: {\n        ...AreaType.args,\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\"\n    }\n};\n\nexport const AreaWithErrors: Story = {\n    args: {\n        ...AreaType.args,\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const AreaDisabled: Story = {\n    args: {\n        ...AreaType.args,\n        label: \"Any field label\",\n        disabled: true\n    }\n};\n\nexport const AreaWithValidateFunction: Story = {\n    args: {\n        ...AreaType.args\n    },\n    render: args => {\n        const [validation, setValidation] = useState<any>({ isValid: true, message: undefined });\n\n        const validate = async () => {\n            setValidation({ isValid: false, message: \"Any custom error message.\" });\n        };\n\n        return <FilePicker {...args} validate={validate} validation={validation} />;\n    }\n};\n\nexport const AreaFullExample: Story = {\n    args: {\n        ...AreaType.args,\n        label: \"Any field label\",\n        required: true,\n        description: \"Provide the required information for processing your request.\",\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\",\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const Compact: Story = {\n    args: {\n        ...Default.args,\n        type: \"compact\"\n    }\n};\n\nexport const CompactWithLabel: Story = {\n    args: {\n        ...Compact.args,\n        label: \"Any field label\"\n    }\n};\n\nexport const CompactWithLabelRequired: Story = {\n    args: {\n        ...Compact.args,\n        label: \"Any field label\",\n        required: true\n    }\n};\n\nexport const CompactWithDescription: Story = {\n    args: {\n        ...Compact.args,\n        description: \"Provide the required information for processing your request.\"\n    }\n};\n\nexport const CompactWithNotes: Story = {\n    args: {\n        ...Compact.args,\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\"\n    }\n};\n\nexport const CompactWithErrors: Story = {\n    args: {\n        ...Compact.args,\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const CompactDisabled: Story = {\n    args: {\n        ...Compact.args,\n        label: \"Any field label\",\n        disabled: true\n    }\n};\n\nexport const CompactWithValidateFunction: Story = {\n    args: {\n        ...Compact.args\n    },\n    render: args => {\n        const [validation, setValidation] = useState<any>({ isValid: true, message: undefined });\n\n        const validate = async () => {\n            setValidation({ isValid: false, message: \"Any custom error message.\" });\n        };\n\n        return <FilePicker {...args} validate={validate} validation={validation} />;\n    }\n};\n\nexport const CompactFullExample: Story = {\n    args: {\n        ...Compact.args,\n        label: \"Any field label\",\n        required: true,\n        description: \"Provide the required information for processing your request.\",\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\",\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const Documentation: Story = {\n    render: args => {\n        const [selectedFile, setSelectedFile] = useState(args.value);\n        const [validation, setValidation] = useState({ isValid: true, message: \"\" });\n\n        // Update value when args.value changes\n        useEffect(() => {\n            setSelectedFile(args.value);\n        }, [args.value]);\n\n        const handleSelect = () => {\n            setSelectedFile(getFile());\n            setValidation({ isValid: true, message: \"\" });\n        };\n\n        const handleEdit = (file: any) => {\n            if (file) {\n                console.log(\"Editing file:\", file);\n                alert(`Editing File: ${file.name}`);\n            }\n        };\n\n        const handleRemove = () => {\n            setSelectedFile(null);\n\n            if (args.required) {\n                setValidation({ isValid: false, message: \"Please select a file\" });\n            }\n        };\n\n        // Validate on required change or value change\n        useEffect(() => {\n            if (args.required && !selectedFile) {\n                setValidation({ isValid: false, message: \"Please select a file\" });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        }, [args.required, selectedFile]);\n\n        return (\n            <FilePicker\n                {...args}\n                value={selectedFile}\n                onSelectItem={handleSelect}\n                onRemoveItem={handleRemove}\n                onEditItem={handleEdit}\n                validation={validation}\n            />\n        );\n    },\n    args: {\n        label: \"Upload Image\",\n        required: true,\n        disabled: false,\n        description: \"Select a file to upload (JPG, PNG, PDF)\",\n        note: \"Note: Maximum file size is 5MB\",\n        type: \"area\",\n        value: null,\n        validation: undefined,\n        onSelectItem: undefined,\n        onEditItem: undefined,\n        onRemoveItem: undefined\n    },\n    argTypes: {\n        label: {\n            description: \"Label text for the file picker\",\n            control: \"text\"\n        },\n        required: {\n            description: \"Makes the field required when set to true\",\n            control: \"boolean\"\n        },\n        disabled: {\n            description: \"Disables the file picker when set to true\",\n            control: \"boolean\"\n        },\n        description: {\n            description: \"Additional description text below the field\",\n            control: \"text\"\n        },\n        note: {\n            description: \"Additional note text below the field\",\n            control: \"text\"\n        },\n        type: {\n            description: \"The visual style of the file picker\",\n            control: \"radio\",\n            options: [\"area\", \"compact\"]\n        },\n        value: {\n            description: \"The currently selected file\",\n            control: \"object\"\n        },\n        validation: {\n            description:\n                \"Object containing validation state and message. Please refer to the example code for details on usage.\"\n        },\n        onSelectItem: {\n            description: \"Function called when a file is selected\"\n        },\n        onEditItem: {\n            description: \"Function called when a file is edited\"\n        },\n        onRemoveItem: {\n            description: \"Function called when a file is removed\"\n        }\n    }\n};\n"],"names":["getRandomNumber","min","max","Math","getFile","width","height","fileSize","meta","FilePicker","args","selectedFile","setSelectedFile","useState","alert","Default","AreaType","AreaWithLabel","AreaWithLabelRequired","AreaWithDescription","AreaWithNotes","AreaWithErrors","AreaDisabled","AreaWithValidateFunction","validation","setValidation","undefined","validate","AreaFullExample","Compact","CompactWithLabel","CompactWithLabelRequired","CompactWithDescription","CompactWithNotes","CompactWithErrors","CompactDisabled","CompactWithValidateFunction","CompactFullExample","Documentation","useEffect","handleSelect","handleEdit","file","console","handleRemove"],"mappings":"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"}
+{"version":3,"file":"FilePicker/FilePicker.stories.js","sources":["../../src/FilePicker/FilePicker.stories.tsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { type FileItemDto, FilePicker } 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 FilePicker> = {\n    title: \"Components/Form/FilePicker\",\n    component: FilePicker,\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            <FilePicker\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 FilePicker>;\n\nexport const Default: Story = {};\n\nexport const AreaType: Story = {\n    args: {\n        ...Default.args,\n        type: \"area\"\n    }\n};\n\nexport const AreaWithLabel: Story = {\n    args: {\n        ...AreaType.args,\n        label: \"Any field label\"\n    }\n};\n\nexport const AreaWithLabelRequired: Story = {\n    args: {\n        ...AreaType.args,\n        label: \"Any field label\",\n        required: true\n    }\n};\n\nexport const AreaWithDescription: Story = {\n    args: {\n        ...AreaType.args,\n        description: \"Provide the required information for processing your request.\"\n    }\n};\n\nexport const AreaWithNotes: Story = {\n    args: {\n        ...AreaType.args,\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\"\n    }\n};\n\nexport const AreaWithErrors: Story = {\n    args: {\n        ...AreaType.args,\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const AreaDisabled: Story = {\n    args: {\n        ...AreaType.args,\n        label: \"Any field label\",\n        disabled: true\n    }\n};\n\nexport const AreaWithValidateFunction: Story = {\n    args: {\n        ...AreaType.args\n    },\n    render: args => {\n        const [validation, setValidation] = useState<any>({ isValid: true, message: undefined });\n\n        const validate = async () => {\n            setValidation({ isValid: false, message: \"Any custom error message.\" });\n        };\n\n        return <FilePicker {...args} validate={validate} validation={validation} />;\n    }\n};\n\nexport const AreaFullExample: Story = {\n    args: {\n        ...AreaType.args,\n        label: \"Any field label\",\n        required: true,\n        description: \"Provide the required information for processing your request.\",\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\",\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const Compact: Story = {\n    args: {\n        ...Default.args,\n        type: \"compact\"\n    }\n};\n\nexport const CompactWithLabel: Story = {\n    args: {\n        ...Compact.args,\n        label: \"Any field label\"\n    }\n};\n\nexport const CompactWithLabelRequired: Story = {\n    args: {\n        ...Compact.args,\n        label: \"Any field label\",\n        required: true\n    }\n};\n\nexport const CompactWithDescription: Story = {\n    args: {\n        ...Compact.args,\n        description: \"Provide the required information for processing your request.\"\n    }\n};\n\nexport const CompactWithNotes: Story = {\n    args: {\n        ...Compact.args,\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\"\n    }\n};\n\nexport const CompactWithErrors: Story = {\n    args: {\n        ...Compact.args,\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const CompactDisabled: Story = {\n    args: {\n        ...Compact.args,\n        label: \"Any field label\",\n        disabled: true\n    }\n};\n\nexport const CompactWithValidateFunction: Story = {\n    args: {\n        ...Compact.args\n    },\n    render: args => {\n        const [validation, setValidation] = useState<any>({ isValid: true, message: undefined });\n\n        const validate = async () => {\n            setValidation({ isValid: false, message: \"Any custom error message.\" });\n        };\n\n        return <FilePicker {...args} validate={validate} validation={validation} />;\n    }\n};\n\nexport const CompactFullExample: Story = {\n    args: {\n        ...Compact.args,\n        label: \"Any field label\",\n        required: true,\n        description: \"Provide the required information for processing your request.\",\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\",\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\n/**\n * Reproduces the Website Builder style sidebar at its 206px value column: the preview stacks,\n * the file name truncates in the middle so the extension and version suffix survive, and the\n * actions spell themselves out instead of costing a fixed block of the row.\n */\nexport const CompactWithLongFileNameInNarrowContainer: Story = {\n    args: {\n        ...Compact.args\n    },\n    render: args => {\n        const [selectedFile, setSelectedFile] = useState<FileItemDto | null>({\n            name: \"tide-cc-statuses-2026-08-21-final-v2.png\",\n            mimeType: \"image/png\",\n            size: 674161,\n            url: \"https://picsum.photos/1200/800\"\n        });\n\n        return (\n            <div style={{ width: 206 }}>\n                <FilePicker\n                    {...args}\n                    value={selectedFile}\n                    onSelectItem={() => setSelectedFile(getFile())}\n                    onRemoveItem={() => setSelectedFile(null)}\n                />\n            </div>\n        );\n    }\n};\n\nexport const Documentation: Story = {\n    render: args => {\n        const [selectedFile, setSelectedFile] = useState(args.value);\n        const [validation, setValidation] = useState({ isValid: true, message: \"\" });\n\n        // Update value when args.value changes\n        useEffect(() => {\n            setSelectedFile(args.value);\n        }, [args.value]);\n\n        const handleSelect = () => {\n            setSelectedFile(getFile());\n            setValidation({ isValid: true, message: \"\" });\n        };\n\n        const handleEdit = (file: any) => {\n            if (file) {\n                console.log(\"Editing file:\", file);\n                alert(`Editing File: ${file.name}`);\n            }\n        };\n\n        const handleRemove = () => {\n            setSelectedFile(null);\n\n            if (args.required) {\n                setValidation({ isValid: false, message: \"Please select a file\" });\n            }\n        };\n\n        // Validate on required change or value change\n        useEffect(() => {\n            if (args.required && !selectedFile) {\n                setValidation({ isValid: false, message: \"Please select a file\" });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        }, [args.required, selectedFile]);\n\n        return (\n            <FilePicker\n                {...args}\n                value={selectedFile}\n                onSelectItem={handleSelect}\n                onRemoveItem={handleRemove}\n                onEditItem={handleEdit}\n                validation={validation}\n            />\n        );\n    },\n    args: {\n        label: \"Upload Image\",\n        required: true,\n        disabled: false,\n        description: \"Select a file to upload (JPG, PNG, PDF)\",\n        note: \"Note: Maximum file size is 5MB\",\n        type: \"area\",\n        value: null,\n        validation: undefined,\n        onSelectItem: undefined,\n        onEditItem: undefined,\n        onRemoveItem: undefined\n    },\n    argTypes: {\n        label: {\n            description: \"Label text for the file picker\",\n            control: \"text\"\n        },\n        required: {\n            description: \"Makes the field required when set to true\",\n            control: \"boolean\"\n        },\n        disabled: {\n            description: \"Disables the file picker when set to true\",\n            control: \"boolean\"\n        },\n        description: {\n            description: \"Additional description text below the field\",\n            control: \"text\"\n        },\n        note: {\n            description: \"Additional note text below the field\",\n            control: \"text\"\n        },\n        type: {\n            description: \"The visual style of the file picker\",\n            control: \"radio\",\n            options: [\"area\", \"compact\"]\n        },\n        value: {\n            description: \"The currently selected file\",\n            control: \"object\"\n        },\n        validation: {\n            description:\n                \"Object containing validation state and message. Please refer to the example code for details on usage.\"\n        },\n        onSelectItem: {\n            description: \"Function called when a file is selected\"\n        },\n        onEditItem: {\n            description: \"Function called when a file is edited\"\n        },\n        onRemoveItem: {\n            description: \"Function called when a file is removed\"\n        }\n    }\n};\n"],"names":["getRandomNumber","min","max","Math","getFile","width","height","fileSize","meta","FilePicker","args","selectedFile","setSelectedFile","useState","alert","Default","AreaType","AreaWithLabel","AreaWithLabelRequired","AreaWithDescription","AreaWithNotes","AreaWithErrors","AreaDisabled","AreaWithValidateFunction","validation","setValidation","undefined","validate","AreaFullExample","Compact","CompactWithLabel","CompactWithLabelRequired","CompactWithDescription","CompactWithNotes","CompactWithErrors","CompactDisabled","CompactWithValidateFunction","CompactFullExample","CompactWithLongFileNameInNarrowContainer","Documentation","useEffect","handleSelect","handleEdit","file","console","handleRemove"],"mappings":"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"}