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

package/Alert/AlertIcon.js

@@ -1,91 +1,95 @@
-import * as React from "react";
 import { cva } from "../utils.js";
-import { ReactComponent as InfoIcon } from "@webiny/icons/info.svg";
-import { ReactComponent as WarningIcon } from "@webiny/icons/warning_amber.svg";
-import { ReactComponent as SuccessIcon } from "@webiny/icons/check_circle.svg";
+import { ReactComponent } from "@webiny/icons/info.svg";
+import { ReactComponent as warning_amber_svg_ReactComponent } from "@webiny/icons/warning_amber.svg";
+import { ReactComponent as check_circle_svg_ReactComponent } from "@webiny/icons/check_circle.svg";
 import { useAlertProps } from "./AlertPropsProvider.js";
 import { Icon } from "../Icon/Icon.js";
+import * as __rspack_external_react from "react";
 const VARIANT_ICON_MAP = {
-  info: InfoIcon,
-  success: SuccessIcon,
-  warning: InfoIcon,
-  danger: WarningIcon
+    info: ReactComponent,
+    success: check_circle_svg_ReactComponent,
+    warning: ReactComponent,
+    danger: warning_amber_svg_ReactComponent
 };
 const alertIconVariants = cva("size-md", {
-  variants: {
-    type: {
-      info: "",
-      success: "",
-      warning: "",
-      danger: ""
+    variants: {
+        type: {
+            info: "",
+            success: "",
+            warning: "",
+            danger: ""
+        },
+        variant: {
+            strong: "",
+            subtle: ""
+        }
     },
-    variant: {
-      strong: "",
-      subtle: ""
-    }
-  },
-  defaultVariants: {
-    type: "info",
-    variant: "subtle"
-  },
-  compoundVariants: [{
-    type: "info",
-    variant: "strong",
-    className: "fill-neutral-base"
-  }, {
-    type: "info",
-    variant: "subtle",
-    className: "fill-neutral-xstrong"
-  }, {
-    type: "success",
-    variant: "strong",
-    className: "fill-neutral-base"
-  }, {
-    type: "success",
-    variant: "subtle",
-    className: "fill-success"
-  }, {
-    type: "warning",
-    variant: "strong",
-    className: "fill-neutral-xstrong"
-  }, {
-    type: "warning",
-    variant: "subtle",
-    className: "fill-warning"
-  }, {
-    type: "danger",
-    variant: "strong",
-    className: "fill-neutral-base"
-  }, {
-    type: "danger",
-    variant: "subtle",
-    className: "fill-destructive"
-  }]
+    defaultVariants: {
+        type: "info",
+        variant: "subtle"
+    },
+    compoundVariants: [
+        {
+            type: "info",
+            variant: "strong",
+            className: "fill-neutral-base"
+        },
+        {
+            type: "info",
+            variant: "subtle",
+            className: "fill-neutral-xstrong"
+        },
+        {
+            type: "success",
+            variant: "strong",
+            className: "fill-neutral-base"
+        },
+        {
+            type: "success",
+            variant: "subtle",
+            className: "fill-success"
+        },
+        {
+            type: "warning",
+            variant: "strong",
+            className: "fill-neutral-xstrong"
+        },
+        {
+            type: "warning",
+            variant: "subtle",
+            className: "fill-warning"
+        },
+        {
+            type: "danger",
+            variant: "strong",
+            className: "fill-neutral-base"
+        },
+        {
+            type: "danger",
+            variant: "subtle",
+            className: "fill-destructive"
+        }
+    ]
 });
-export const AlertIcon = () => {
-  const {
-    icon,
-    type,
-    variant
-  } = useAlertProps();
-  if (icon === null) {
-    return null;
-  }
-  let iconElement = icon;
-  if (!iconElement) {
-    const IconComponent = VARIANT_ICON_MAP[type || "info"];
-    iconElement = /*#__PURE__*/React.createElement(IconComponent, null);
-  }
-  return /*#__PURE__*/React.createElement("div", {
-    className: "py-xs"
-  }, /*#__PURE__*/React.createElement(Icon, {
-    label: "Alert icon",
-    icon: iconElement,
-    className: alertIconVariants({
-      type,
-      variant
-    })
-  }));
+const AlertIcon = ()=>{
+    const { icon, type, variant } = useAlertProps();
+    if (null === icon) return null;
+    let iconElement = icon;
+    if (!iconElement) {
+        const IconComponent = VARIANT_ICON_MAP[type || "info"];
+        iconElement = /*#__PURE__*/ __rspack_external_react.createElement(IconComponent, null);
+    }
+    return /*#__PURE__*/ __rspack_external_react.createElement("div", {
+        className: "py-xs"
+    }, /*#__PURE__*/ __rspack_external_react.createElement(Icon, {
+        label: "Alert icon",
+        icon: iconElement,
+        className: alertIconVariants({
+            type,
+            variant
+        })
+    }));
 };
+export { AlertIcon };
 
 //# sourceMappingURL=AlertIcon.js.map

package/Alert/AlertIcon.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","cva","ReactComponent","InfoIcon","WarningIcon","SuccessIcon","useAlertProps","Icon","VARIANT_ICON_MAP","info","success","warning","danger","alertIconVariants","variants","type","variant","strong","subtle","defaultVariants","compoundVariants","className","AlertIcon","icon","iconElement","IconComponent","createElement","label"],"sources":["AlertIcon.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cva } from \"~/utils.js\";\nimport { ReactComponent as InfoIcon } from \"@webiny/icons/info.svg\";\nimport { ReactComponent as WarningIcon } from \"@webiny/icons/warning_amber.svg\";\nimport { ReactComponent as SuccessIcon } from \"@webiny/icons/check_circle.svg\";\nimport { useAlertProps } from \"./AlertPropsProvider.js\";\nimport { Icon } from \"~/Icon/Icon.js\";\n\nconst VARIANT_ICON_MAP = {\n    info: InfoIcon,\n    success: SuccessIcon,\n    warning: InfoIcon,\n    danger: WarningIcon\n};\n\nconst alertIconVariants = cva(\"size-md\", {\n    variants: {\n        type: { info: \"\", success: \"\", warning: \"\", danger: \"\" },\n        variant: { strong: \"\", subtle: \"\" }\n    },\n    defaultVariants: {\n        type: \"info\",\n        variant: \"subtle\"\n    },\n    compoundVariants: [\n        { type: \"info\", variant: \"strong\", className: \"fill-neutral-base\" },\n        { type: \"info\", variant: \"subtle\", className: \"fill-neutral-xstrong\" },\n        { type: \"success\", variant: \"strong\", className: \"fill-neutral-base\" },\n        { type: \"success\", variant: \"subtle\", className: \"fill-success\" },\n        { type: \"warning\", variant: \"strong\", className: \"fill-neutral-xstrong\" },\n        { type: \"warning\", variant: \"subtle\", className: \"fill-warning\" },\n        { type: \"danger\", variant: \"strong\", className: \"fill-neutral-base\" },\n        { type: \"danger\", variant: \"subtle\", className: \"fill-destructive\" }\n    ]\n});\n\nexport const AlertIcon = () => {\n    const { icon, type, variant } = useAlertProps();\n    if (icon === null) {\n        return null;\n    }\n\n    let iconElement = icon;\n    if (!iconElement) {\n        const IconComponent = VARIANT_ICON_MAP[type || \"info\"];\n        iconElement = <IconComponent />;\n    }\n\n    return (\n        <div className={\"py-xs\"}>\n            <Icon\n                label={\"Alert icon\"}\n                icon={iconElement}\n                className={alertIconVariants({ type, variant })}\n            />\n        </div>\n    );\n};\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,GAAG;AACZ,SAASC,cAAc,IAAIC,QAAQ,QAAQ,wBAAwB;AACnE,SAASD,cAAc,IAAIE,WAAW,QAAQ,iCAAiC;AAC/E,SAASF,cAAc,IAAIG,WAAW,QAAQ,gCAAgC;AAC9E,SAASC,aAAa;AACtB,SAASC,IAAI;AAEb,MAAMC,gBAAgB,GAAG;EACrBC,IAAI,EAAEN,QAAQ;EACdO,OAAO,EAAEL,WAAW;EACpBM,OAAO,EAAER,QAAQ;EACjBS,MAAM,EAAER;AACZ,CAAC;AAED,MAAMS,iBAAiB,GAAGZ,GAAG,CAAC,SAAS,EAAE;EACrCa,QAAQ,EAAE;IACNC,IAAI,EAAE;MAAEN,IAAI,EAAE,EAAE;MAAEC,OAAO,EAAE,EAAE;MAAEC,OAAO,EAAE,EAAE;MAAEC,MAAM,EAAE;IAAG,CAAC;IACxDI,OAAO,EAAE;MAAEC,MAAM,EAAE,EAAE;MAAEC,MAAM,EAAE;IAAG;EACtC,CAAC;EACDC,eAAe,EAAE;IACbJ,IAAI,EAAE,MAAM;IACZC,OAAO,EAAE;EACb,CAAC;EACDI,gBAAgB,EAAE,CACd;IAAEL,IAAI,EAAE,MAAM;IAAEC,OAAO,EAAE,QAAQ;IAAEK,SAAS,EAAE;EAAoB,CAAC,EACnE;IAAEN,IAAI,EAAE,MAAM;IAAEC,OAAO,EAAE,QAAQ;IAAEK,SAAS,EAAE;EAAuB,CAAC,EACtE;IAAEN,IAAI,EAAE,SAAS;IAAEC,OAAO,EAAE,QAAQ;IAAEK,SAAS,EAAE;EAAoB,CAAC,EACtE;IAAEN,IAAI,EAAE,SAAS;IAAEC,OAAO,EAAE,QAAQ;IAAEK,SAAS,EAAE;EAAe,CAAC,EACjE;IAAEN,IAAI,EAAE,SAAS;IAAEC,OAAO,EAAE,QAAQ;IAAEK,SAAS,EAAE;EAAuB,CAAC,EACzE;IAAEN,IAAI,EAAE,SAAS;IAAEC,OAAO,EAAE,QAAQ;IAAEK,SAAS,EAAE;EAAe,CAAC,EACjE;IAAEN,IAAI,EAAE,QAAQ;IAAEC,OAAO,EAAE,QAAQ;IAAEK,SAAS,EAAE;EAAoB,CAAC,EACrE;IAAEN,IAAI,EAAE,QAAQ;IAAEC,OAAO,EAAE,QAAQ;IAAEK,SAAS,EAAE;EAAmB,CAAC;AAE5E,CAAC,CAAC;AAEF,OAAO,MAAMC,SAAS,GAAGA,CAAA,KAAM;EAC3B,MAAM;IAAEC,IAAI;IAAER,IAAI;IAAEC;EAAQ,CAAC,GAAGV,aAAa,CAAC,CAAC;EAC/C,IAAIiB,IAAI,KAAK,IAAI,EAAE;IACf,OAAO,IAAI;EACf;EAEA,IAAIC,WAAW,GAAGD,IAAI;EACtB,IAAI,CAACC,WAAW,EAAE;IACd,MAAMC,aAAa,GAAGjB,gBAAgB,CAACO,IAAI,IAAI,MAAM,CAAC;IACtDS,WAAW,gBAAGxB,KAAA,CAAA0B,aAAA,CAACD,aAAa,MAAE,CAAC;EACnC;EAEA,oBACIzB,KAAA,CAAA0B,aAAA;IAAKL,SAAS,EAAE;EAAQ,gBACpBrB,KAAA,CAAA0B,aAAA,CAACnB,IAAI;IACDoB,KAAK,EAAE,YAAa;IACpBJ,IAAI,EAAEC,WAAY;IAClBH,SAAS,EAAER,iBAAiB,CAAC;MAAEE,IAAI;MAAEC;IAAQ,CAAC;EAAE,CACnD,CACA,CAAC;AAEd,CAAC","ignoreList":[]}
+{"version":3,"file":"Alert/AlertIcon.js","sources":["../../src/Alert/AlertIcon.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cva } from \"~/utils.js\";\nimport { ReactComponent as InfoIcon } from \"@webiny/icons/info.svg\";\nimport { ReactComponent as WarningIcon } from \"@webiny/icons/warning_amber.svg\";\nimport { ReactComponent as SuccessIcon } from \"@webiny/icons/check_circle.svg\";\nimport { useAlertProps } from \"./AlertPropsProvider.js\";\nimport { Icon } from \"~/Icon/Icon.js\";\n\nconst VARIANT_ICON_MAP = {\n    info: InfoIcon,\n    success: SuccessIcon,\n    warning: InfoIcon,\n    danger: WarningIcon\n};\n\nconst alertIconVariants = cva(\"size-md\", {\n    variants: {\n        type: { info: \"\", success: \"\", warning: \"\", danger: \"\" },\n        variant: { strong: \"\", subtle: \"\" }\n    },\n    defaultVariants: {\n        type: \"info\",\n        variant: \"subtle\"\n    },\n    compoundVariants: [\n        { type: \"info\", variant: \"strong\", className: \"fill-neutral-base\" },\n        { type: \"info\", variant: \"subtle\", className: \"fill-neutral-xstrong\" },\n        { type: \"success\", variant: \"strong\", className: \"fill-neutral-base\" },\n        { type: \"success\", variant: \"subtle\", className: \"fill-success\" },\n        { type: \"warning\", variant: \"strong\", className: \"fill-neutral-xstrong\" },\n        { type: \"warning\", variant: \"subtle\", className: \"fill-warning\" },\n        { type: \"danger\", variant: \"strong\", className: \"fill-neutral-base\" },\n        { type: \"danger\", variant: \"subtle\", className: \"fill-destructive\" }\n    ]\n});\n\nexport const AlertIcon = () => {\n    const { icon, type, variant } = useAlertProps();\n    if (icon === null) {\n        return null;\n    }\n\n    let iconElement = icon;\n    if (!iconElement) {\n        const IconComponent = VARIANT_ICON_MAP[type || \"info\"];\n        iconElement = <IconComponent />;\n    }\n\n    return (\n        <div className={\"py-xs\"}>\n            <Icon\n                label={\"Alert icon\"}\n                icon={iconElement}\n                className={alertIconVariants({ type, variant })}\n            />\n        </div>\n    );\n};\n"],"names":["VARIANT_ICON_MAP","InfoIcon","SuccessIcon","WarningIcon","alertIconVariants","cva","AlertIcon","icon","type","variant","useAlertProps","iconElement","IconComponent","Icon"],"mappings":";;;;;;;AAQA,MAAMA,mBAAmB;IACrB,MAAMC;IACN,SAASC;IACT,SAASD;IACT,QAAQE;AACZ;AAEA,MAAMC,oBAAoBC,IAAI,WAAW;IACrC,UAAU;QACN,MAAM;YAAE,MAAM;YAAI,SAAS;YAAI,SAAS;YAAI,QAAQ;QAAG;QACvD,SAAS;YAAE,QAAQ;YAAI,QAAQ;QAAG;IACtC;IACA,iBAAiB;QACb,MAAM;QACN,SAAS;IACb;IACA,kBAAkB;QACd;YAAE,MAAM;YAAQ,SAAS;YAAU,WAAW;QAAoB;QAClE;YAAE,MAAM;YAAQ,SAAS;YAAU,WAAW;QAAuB;QACrE;YAAE,MAAM;YAAW,SAAS;YAAU,WAAW;QAAoB;QACrE;YAAE,MAAM;YAAW,SAAS;YAAU,WAAW;QAAe;QAChE;YAAE,MAAM;YAAW,SAAS;YAAU,WAAW;QAAuB;QACxE;YAAE,MAAM;YAAW,SAAS;YAAU,WAAW;QAAe;QAChE;YAAE,MAAM;YAAU,SAAS;YAAU,WAAW;QAAoB;QACpE;YAAE,MAAM;YAAU,SAAS;YAAU,WAAW;QAAmB;KACtE;AACL;AAEO,MAAMC,YAAY;IACrB,MAAM,EAAEC,IAAI,EAAEC,IAAI,EAAEC,OAAO,EAAE,GAAGC;IAChC,IAAIH,AAAS,SAATA,MACA,OAAO;IAGX,IAAII,cAAcJ;IAClB,IAAI,CAACI,aAAa;QACd,MAAMC,gBAAgBZ,gBAAgB,CAACQ,QAAQ,OAAO;QACtDG,cAAc,WAAdA,GAAc,sCAACC,eAAAA;IACnB;IAEA,OAAO,WAAP,GACI,sCAAC;QAAI,WAAW;qBACZ,sCAACC,MAAIA;QACD,OAAO;QACP,MAAMF;QACN,WAAWP,kBAAkB;YAAEI;YAAMC;QAAQ;;AAI7D"}

package/Alert/AlertPropsProvider.js.map

@@ -1 +1 @@
-{"version":3,"names":["createComponentPropsProvider","AlertPropsProvider","useAlertProps"],"sources":["AlertPropsProvider.ts"],"sourcesContent":["import { createComponentPropsProvider } from \"~/utils.js\";\nimport { type AlertProps } from \"./Alert.js\";\n\nconst [AlertPropsProvider, useAlertProps] = createComponentPropsProvider<AlertProps>();\n\nexport { AlertPropsProvider, useAlertProps };\n"],"mappings":"AAAA,SAASA,4BAA4B;AAGrC,MAAM,CAACC,kBAAkB,EAAEC,aAAa,CAAC,GAAGF,4BAA4B,CAAa,CAAC;AAEtF,SAASC,kBAAkB,EAAEC,aAAa","ignoreList":[]}
+{"version":3,"file":"Alert/AlertPropsProvider.js","sources":["../../src/Alert/AlertPropsProvider.ts"],"sourcesContent":["import { createComponentPropsProvider } from \"~/utils.js\";\nimport { type AlertProps } from \"./Alert.js\";\n\nconst [AlertPropsProvider, useAlertProps] = createComponentPropsProvider<AlertProps>();\n\nexport { AlertPropsProvider, useAlertProps };\n"],"names":["AlertPropsProvider","useAlertProps","createComponentPropsProvider"],"mappings":";AAGA,MAAM,CAACA,oBAAoBC,cAAc,GAAGC"}

package/Alert/AlertSwatchBox.js

@@ -1,21 +1,17 @@
-import * as React from "react";
 import { useAlertProps } from "./AlertPropsProvider.js";
-export const AlertSwatchBox = () => {
-  const {
-    swatchColor,
-    swatchColorIcon
-  } = useAlertProps();
-  if (!swatchColor || swatchColorIcon === false) {
-    return null;
-  }
-  return /*#__PURE__*/React.createElement("div", {
-    className: "h-lg flex items-center"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "size-md rounded-xs",
-    style: {
-      backgroundColor: swatchColor
-    }
-  }));
+import * as __rspack_external_react from "react";
+const AlertSwatchBox = ()=>{
+    const { swatchColor, swatchColorIcon } = useAlertProps();
+    if (!swatchColor || false === swatchColorIcon) return null;
+    return /*#__PURE__*/ __rspack_external_react.createElement("div", {
+        className: "h-lg flex items-center"
+    }, /*#__PURE__*/ __rspack_external_react.createElement("div", {
+        className: "size-md rounded-xs",
+        style: {
+            backgroundColor: swatchColor
+        }
+    }));
 };
+export { AlertSwatchBox };
 
 //# sourceMappingURL=AlertSwatchBox.js.map

package/Alert/AlertSwatchBox.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useAlertProps","AlertSwatchBox","swatchColor","swatchColorIcon","createElement","className","style","backgroundColor"],"sources":["AlertSwatchBox.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { useAlertProps } from \"./AlertPropsProvider.js\";\n\nexport const AlertSwatchBox = () => {\n    const { swatchColor, swatchColorIcon } = useAlertProps();\n\n    if (!swatchColor || swatchColorIcon === false) {\n        return null;\n    }\n\n    return (\n        <div className={\"h-lg flex items-center\"}>\n            <div className={\"size-md rounded-xs\"} style={{ backgroundColor: swatchColor }} />\n        </div>\n    );\n};\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,aAAa;AAEtB,OAAO,MAAMC,cAAc,GAAGA,CAAA,KAAM;EAChC,MAAM;IAAEC,WAAW;IAAEC;EAAgB,CAAC,GAAGH,aAAa,CAAC,CAAC;EAExD,IAAI,CAACE,WAAW,IAAIC,eAAe,KAAK,KAAK,EAAE;IAC3C,OAAO,IAAI;EACf;EAEA,oBACIJ,KAAA,CAAAK,aAAA;IAAKC,SAAS,EAAE;EAAyB,gBACrCN,KAAA,CAAAK,aAAA;IAAKC,SAAS,EAAE,oBAAqB;IAACC,KAAK,EAAE;MAAEC,eAAe,EAAEL;IAAY;EAAE,CAAE,CAC/E,CAAC;AAEd,CAAC","ignoreList":[]}
+{"version":3,"file":"Alert/AlertSwatchBox.js","sources":["../../src/Alert/AlertSwatchBox.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { useAlertProps } from \"./AlertPropsProvider.js\";\n\nexport const AlertSwatchBox = () => {\n    const { swatchColor, swatchColorIcon } = useAlertProps();\n\n    if (!swatchColor || swatchColorIcon === false) {\n        return null;\n    }\n\n    return (\n        <div className={\"h-lg flex items-center\"}>\n            <div className={\"size-md rounded-xs\"} style={{ backgroundColor: swatchColor }} />\n        </div>\n    );\n};\n"],"names":["AlertSwatchBox","swatchColor","swatchColorIcon","useAlertProps"],"mappings":";;AAGO,MAAMA,iBAAiB;IAC1B,MAAM,EAAEC,WAAW,EAAEC,eAAe,EAAE,GAAGC;IAEzC,IAAI,CAACF,eAAeC,AAAoB,UAApBA,iBAChB,OAAO;IAGX,OAAO,WAAP,GACI,sCAAC;QAAI,WAAW;qBACZ,sCAAC;QAAI,WAAW;QAAsB,OAAO;YAAE,iBAAiBD;QAAY;;AAGxF"}

package/Alert/constants.js

@@ -1,8 +1,9 @@
-export const DEFAULT_TYPE = "info";
-export const DEFAULT_VARIANT = "subtle";
-export const defaultVariants = {
-  type: DEFAULT_TYPE,
-  variant: DEFAULT_VARIANT
+const DEFAULT_TYPE = "info";
+const DEFAULT_VARIANT = "subtle";
+const defaultVariants = {
+    type: DEFAULT_TYPE,
+    variant: DEFAULT_VARIANT
 };
+export { DEFAULT_TYPE, DEFAULT_VARIANT, defaultVariants };
 
 //# sourceMappingURL=constants.js.map

package/Alert/constants.js.map

@@ -1 +1 @@
-{"version":3,"names":["DEFAULT_TYPE","DEFAULT_VARIANT","defaultVariants","type","variant"],"sources":["constants.ts"],"sourcesContent":["export const DEFAULT_TYPE = \"info\";\nexport const DEFAULT_VARIANT = \"subtle\";\n\nexport const defaultVariants = {\n    type: DEFAULT_TYPE,\n    variant: DEFAULT_VARIANT\n} as const;\n"],"mappings":"AAAA,OAAO,MAAMA,YAAY,GAAG,MAAM;AAClC,OAAO,MAAMC,eAAe,GAAG,QAAQ;AAEvC,OAAO,MAAMC,eAAe,GAAG;EAC3BC,IAAI,EAAEH,YAAY;EAClBI,OAAO,EAAEH;AACb,CAAU","ignoreList":[]}
+{"version":3,"file":"Alert/constants.js","sources":["../../src/Alert/constants.ts"],"sourcesContent":["export const DEFAULT_TYPE = \"info\";\nexport const DEFAULT_VARIANT = \"subtle\";\n\nexport const defaultVariants = {\n    type: DEFAULT_TYPE,\n    variant: DEFAULT_VARIANT\n} as const;\n"],"names":["DEFAULT_TYPE","DEFAULT_VARIANT","defaultVariants"],"mappings":"AAAO,MAAMA,eAAe;AACrB,MAAMC,kBAAkB;AAExB,MAAMC,kBAAkB;IAC3B,MAAMF;IACN,SAASC;AACb"}

package/Alert/index.js

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

package/AutoComplete/AutoComplete.d.ts

@@ -2,21 +2,21 @@ import React from "react";
 import type { AutoCompletePrimitiveProps } from "./primitives/index.js";
 import type { FormComponentProps } from "../FormComponent/index.js";
 type AutoCompleteProps = AutoCompletePrimitiveProps & FormComponentProps;
-declare const AutoComplete: (({ label, description, note, required, disabled, validation, ...props }: AutoCompleteProps) => React.JSX.Element) & {
-    original: ({ label, description, note, required, disabled, validation, ...props }: AutoCompleteProps) => React.JSX.Element;
+declare const AutoComplete: (({ label, description, note, hint, required, disabled, validation, ...props }: AutoCompleteProps) => React.JSX.Element) & {
+    original: ({ label, description, note, hint, required, disabled, validation, ...props }: AutoCompleteProps) => React.JSX.Element;
     originalName: string;
     displayName: string;
 } & {
-    original: (({ label, description, note, required, disabled, validation, ...props }: AutoCompleteProps) => React.JSX.Element) & {
-        original: ({ label, description, note, required, disabled, validation, ...props }: AutoCompleteProps) => React.JSX.Element;
+    original: (({ label, description, note, hint, required, disabled, validation, ...props }: AutoCompleteProps) => React.JSX.Element) & {
+        original: ({ label, description, note, hint, required, disabled, validation, ...props }: AutoCompleteProps) => React.JSX.Element;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(({ label, description, note, required, disabled, validation, ...props }: AutoCompleteProps) => React.JSX.Element) & {
-        original: ({ label, description, note, required, disabled, validation, ...props }: AutoCompleteProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(({ label, description, note, hint, required, disabled, validation, ...props }: AutoCompleteProps) => React.JSX.Element) & {
+        original: ({ label, description, note, hint, required, disabled, validation, ...props }: AutoCompleteProps) => React.JSX.Element;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;

package/AutoComplete/AutoComplete.js

@@ -1,54 +1,43 @@
-import React, { useMemo, useState, useEffect, useRef } from "react";
+import react, { useEffect, useMemo, useRef, useState } from "react";
 import { makeDecoratable } from "../utils.js";
 import { AutoCompletePrimitive } from "./primitives/index.js";
 import { FormComponentDescription, FormComponentErrorMessage, FormComponentLabel, FormComponentNote } from "../FormComponent/index.js";
-const DecoratableAutoComplete = ({
-  label,
-  description,
-  note,
-  required,
-  disabled,
-  validation,
-  ...props
-}) => {
-  const {
-    isValid: validationIsValid,
-    message: validationMessage
-  } = validation || {};
-  const invalid = useMemo(() => validationIsValid === false, [validationIsValid]);
-
-  // Retrieve the internally generated ID from cmdk's <Command.Input> to sync with the external <label>
-  const inputRef = useRef(null);
-  const [inputId, setInputId] = useState();
-  useEffect(() => {
-    if (inputRef.current?.id) {
-      setInputId(inputRef.current.id);
-    }
-  }, []);
-  return /*#__PURE__*/React.createElement("div", {
-    className: "w-full"
-  }, /*#__PURE__*/React.createElement(FormComponentLabel, {
-    text: label,
-    required: required,
-    disabled: disabled,
-    invalid: invalid,
-    htmlFor: inputId
-  }), /*#__PURE__*/React.createElement(FormComponentDescription, {
-    text: description,
-    disabled: disabled
-  }), /*#__PURE__*/React.createElement(AutoCompletePrimitive, Object.assign({}, props, {
-    inputRef: inputRef,
-    disabled: disabled,
-    label: label,
-    invalid: invalid
-  })), /*#__PURE__*/React.createElement(FormComponentErrorMessage, {
-    text: validationMessage,
-    invalid: invalid,
-    disabled: disabled
-  }), /*#__PURE__*/React.createElement(FormComponentNote, {
-    text: note,
-    disabled: disabled
-  }));
+const DecoratableAutoComplete = ({ label, description, note, hint, required, disabled, validation, ...props })=>{
+    const { isValid: validationIsValid, message: validationMessage } = validation || {};
+    const invalid = useMemo(()=>false === validationIsValid, [
+        validationIsValid
+    ]);
+    const inputRef = useRef(null);
+    const [inputId, setInputId] = useState();
+    useEffect(()=>{
+        if (inputRef.current?.id) setInputId(inputRef.current.id);
+    }, []);
+    return /*#__PURE__*/ react.createElement("div", {
+        className: "w-full"
+    }, /*#__PURE__*/ react.createElement(FormComponentLabel, {
+        text: label,
+        hint: hint,
+        required: required,
+        disabled: disabled,
+        invalid: invalid,
+        htmlFor: inputId
+    }), /*#__PURE__*/ react.createElement(FormComponentDescription, {
+        text: description,
+        disabled: disabled
+    }), /*#__PURE__*/ react.createElement(AutoCompletePrimitive, {
+        ...props,
+        inputRef: inputRef,
+        disabled: disabled,
+        label: label,
+        invalid: invalid
+    }), /*#__PURE__*/ react.createElement(FormComponentErrorMessage, {
+        text: validationMessage,
+        invalid: invalid,
+        disabled: disabled
+    }), /*#__PURE__*/ react.createElement(FormComponentNote, {
+        text: note,
+        disabled: disabled
+    }));
 };
 const AutoComplete = makeDecoratable("AutoComplete", DecoratableAutoComplete);
 export { AutoComplete };

package/AutoComplete/AutoComplete.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useMemo","useState","useEffect","useRef","makeDecoratable","AutoCompletePrimitive","FormComponentDescription","FormComponentErrorMessage","FormComponentLabel","FormComponentNote","DecoratableAutoComplete","label","description","note","required","disabled","validation","props","isValid","validationIsValid","message","validationMessage","invalid","inputRef","inputId","setInputId","current","id","createElement","className","text","htmlFor","Object","assign","AutoComplete"],"sources":["AutoComplete.tsx"],"sourcesContent":["import React, { useMemo, useState, useEffect, useRef } from \"react\";\nimport { makeDecoratable } from \"~/utils.js\";\nimport type { AutoCompletePrimitiveProps } from \"./primitives/index.js\";\nimport { AutoCompletePrimitive } from \"./primitives/index.js\";\nimport type { FormComponentProps } from \"~/FormComponent/index.js\";\nimport {\n    FormComponentDescription,\n    FormComponentErrorMessage,\n    FormComponentLabel,\n    FormComponentNote\n} from \"~/FormComponent/index.js\";\n\ntype AutoCompleteProps = AutoCompletePrimitiveProps & FormComponentProps;\n\nconst DecoratableAutoComplete = ({\n    label,\n    description,\n    note,\n    required,\n    disabled,\n    validation,\n    ...props\n}: AutoCompleteProps) => {\n    const { isValid: validationIsValid, message: validationMessage } = validation || {};\n    const invalid = useMemo(() => validationIsValid === false, [validationIsValid]);\n\n    // Retrieve the internally generated ID from cmdk's <Command.Input> to sync with the external <label>\n    const inputRef = useRef<HTMLInputElement>(null);\n    const [inputId, setInputId] = useState<string>();\n\n    useEffect(() => {\n        if (inputRef.current?.id) {\n            setInputId(inputRef.current.id);\n        }\n    }, []);\n\n    return (\n        <div className={\"w-full\"}>\n            <FormComponentLabel\n                text={label}\n                required={required}\n                disabled={disabled}\n                invalid={invalid}\n                htmlFor={inputId}\n            />\n            <FormComponentDescription text={description} disabled={disabled} />\n            <AutoCompletePrimitive\n                {...props}\n                inputRef={inputRef}\n                disabled={disabled}\n                label={label}\n                invalid={invalid}\n            />\n            <FormComponentErrorMessage\n                text={validationMessage}\n                invalid={invalid}\n                disabled={disabled}\n            />\n            <FormComponentNote text={note} disabled={disabled} />\n        </div>\n    );\n};\n\nconst AutoComplete = makeDecoratable(\"AutoComplete\", DecoratableAutoComplete);\n\nexport { AutoComplete };\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,OAAO,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,MAAM,QAAQ,OAAO;AACnE,SAASC,eAAe;AAExB,SAASC,qBAAqB;AAE9B,SACIC,wBAAwB,EACxBC,yBAAyB,EACzBC,kBAAkB,EAClBC,iBAAiB;AAKrB,MAAMC,uBAAuB,GAAGA,CAAC;EAC7BC,KAAK;EACLC,WAAW;EACXC,IAAI;EACJC,QAAQ;EACRC,QAAQ;EACRC,UAAU;EACV,GAAGC;AACY,CAAC,KAAK;EACrB,MAAM;IAAEC,OAAO,EAAEC,iBAAiB;IAAEC,OAAO,EAAEC;EAAkB,CAAC,GAAGL,UAAU,IAAI,CAAC,CAAC;EACnF,MAAMM,OAAO,GAAGtB,OAAO,CAAC,MAAMmB,iBAAiB,KAAK,KAAK,EAAE,CAACA,iBAAiB,CAAC,CAAC;;EAE/E;EACA,MAAMI,QAAQ,GAAGpB,MAAM,CAAmB,IAAI,CAAC;EAC/C,MAAM,CAACqB,OAAO,EAAEC,UAAU,CAAC,GAAGxB,QAAQ,CAAS,CAAC;EAEhDC,SAAS,CAAC,MAAM;IACZ,IAAIqB,QAAQ,CAACG,OAAO,EAAEC,EAAE,EAAE;MACtBF,UAAU,CAACF,QAAQ,CAACG,OAAO,CAACC,EAAE,CAAC;IACnC;EACJ,CAAC,EAAE,EAAE,CAAC;EAEN,oBACI5B,KAAA,CAAA6B,aAAA;IAAKC,SAAS,EAAE;EAAS,gBACrB9B,KAAA,CAAA6B,aAAA,CAACpB,kBAAkB;IACfsB,IAAI,EAAEnB,KAAM;IACZG,QAAQ,EAAEA,QAAS;IACnBC,QAAQ,EAAEA,QAAS;IACnBO,OAAO,EAAEA,OAAQ;IACjBS,OAAO,EAAEP;EAAQ,CACpB,CAAC,eACFzB,KAAA,CAAA6B,aAAA,CAACtB,wBAAwB;IAACwB,IAAI,EAAElB,WAAY;IAACG,QAAQ,EAAEA;EAAS,CAAE,CAAC,eACnEhB,KAAA,CAAA6B,aAAA,CAACvB,qBAAqB,EAAA2B,MAAA,CAAAC,MAAA,KACdhB,KAAK;IACTM,QAAQ,EAAEA,QAAS;IACnBR,QAAQ,EAAEA,QAAS;IACnBJ,KAAK,EAAEA,KAAM;IACbW,OAAO,EAAEA;EAAQ,EACpB,CAAC,eACFvB,KAAA,CAAA6B,aAAA,CAACrB,yBAAyB;IACtBuB,IAAI,EAAET,iBAAkB;IACxBC,OAAO,EAAEA,OAAQ;IACjBP,QAAQ,EAAEA;EAAS,CACtB,CAAC,eACFhB,KAAA,CAAA6B,aAAA,CAACnB,iBAAiB;IAACqB,IAAI,EAAEjB,IAAK;IAACE,QAAQ,EAAEA;EAAS,CAAE,CACnD,CAAC;AAEd,CAAC;AAED,MAAMmB,YAAY,GAAG9B,eAAe,CAAC,cAAc,EAAEM,uBAAuB,CAAC;AAE7E,SAASwB,YAAY","ignoreList":[]}
+{"version":3,"file":"AutoComplete/AutoComplete.js","sources":["../../src/AutoComplete/AutoComplete.tsx"],"sourcesContent":["import React, { useMemo, useState, useEffect, useRef } from \"react\";\nimport { makeDecoratable } from \"~/utils.js\";\nimport type { AutoCompletePrimitiveProps } from \"./primitives/index.js\";\nimport { AutoCompletePrimitive } from \"./primitives/index.js\";\nimport type { FormComponentProps } from \"~/FormComponent/index.js\";\nimport {\n    FormComponentDescription,\n    FormComponentErrorMessage,\n    FormComponentLabel,\n    FormComponentNote\n} from \"~/FormComponent/index.js\";\n\ntype AutoCompleteProps = AutoCompletePrimitiveProps & FormComponentProps;\n\nconst DecoratableAutoComplete = ({\n    label,\n    description,\n    note,\n    hint,\n    required,\n    disabled,\n    validation,\n    ...props\n}: AutoCompleteProps) => {\n    const { isValid: validationIsValid, message: validationMessage } = validation || {};\n    const invalid = useMemo(() => validationIsValid === false, [validationIsValid]);\n\n    // Retrieve the internally generated ID from cmdk's <Command.Input> to sync with the external <label>\n    const inputRef = useRef<HTMLInputElement>(null);\n    const [inputId, setInputId] = useState<string>();\n\n    useEffect(() => {\n        if (inputRef.current?.id) {\n            setInputId(inputRef.current.id);\n        }\n    }, []);\n\n    return (\n        <div className={\"w-full\"}>\n            <FormComponentLabel\n                text={label}\n                hint={hint}\n                required={required}\n                disabled={disabled}\n                invalid={invalid}\n                htmlFor={inputId}\n            />\n            <FormComponentDescription text={description} disabled={disabled} />\n            <AutoCompletePrimitive\n                {...props}\n                inputRef={inputRef}\n                disabled={disabled}\n                label={label}\n                invalid={invalid}\n            />\n            <FormComponentErrorMessage\n                text={validationMessage}\n                invalid={invalid}\n                disabled={disabled}\n            />\n            <FormComponentNote text={note} disabled={disabled} />\n        </div>\n    );\n};\n\nconst AutoComplete = makeDecoratable(\"AutoComplete\", DecoratableAutoComplete);\n\nexport { AutoComplete };\n"],"names":["DecoratableAutoComplete","label","description","note","hint","required","disabled","validation","props","validationIsValid","validationMessage","invalid","useMemo","inputRef","useRef","inputId","setInputId","useState","useEffect","FormComponentLabel","FormComponentDescription","AutoCompletePrimitive","FormComponentErrorMessage","FormComponentNote","AutoComplete","makeDecoratable"],"mappings":";;;;AAcA,MAAMA,0BAA0B,CAAC,EAC7BC,KAAK,EACLC,WAAW,EACXC,IAAI,EACJC,IAAI,EACJC,QAAQ,EACRC,QAAQ,EACRC,UAAU,EACV,GAAGC,OACa;IAChB,MAAM,EAAE,SAASC,iBAAiB,EAAE,SAASC,iBAAiB,EAAE,GAAGH,cAAc,CAAC;IAClF,MAAMI,UAAUC,QAAQ,IAAMH,AAAsB,UAAtBA,mBAA6B;QAACA;KAAkB;IAG9E,MAAMI,WAAWC,OAAyB;IAC1C,MAAM,CAACC,SAASC,WAAW,GAAGC;IAE9BC,UAAU;QACN,IAAIL,SAAS,OAAO,EAAE,IAClBG,WAAWH,SAAS,OAAO,CAAC,EAAE;IAEtC,GAAG,EAAE;IAEL,OAAO,WAAP,GACI,oBAAC;QAAI,WAAW;qBACZ,oBAACM,oBAAkBA;QACf,MAAMlB;QACN,MAAMG;QACN,UAAUC;QACV,UAAUC;QACV,SAASK;QACT,SAASI;sBAEb,oBAACK,0BAAwBA;QAAC,MAAMlB;QAAa,UAAUI;sBACvD,oBAACe,uBAAqBA;QACjB,GAAGb,KAAK;QACT,UAAUK;QACV,UAAUP;QACV,OAAOL;QACP,SAASU;sBAEb,oBAACW,2BAAyBA;QACtB,MAAMZ;QACN,SAASC;QACT,UAAUL;sBAEd,oBAACiB,mBAAiBA;QAAC,MAAMpB;QAAM,UAAUG;;AAGrD;AAEA,MAAMkB,eAAeC,gBAAgB,gBAAgBzB"}

package/AutoComplete/AutoComplete.mdx

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