@webiny/admin-ui 0.0.0-unstable.a4637c5ce6 → 0.0.0-unstable.a4f3e4ea8b

package/FillViewport/FillViewport.d.ts

@@ -0,0 +1,63 @@
+import React from "react";
+type FillViewportProps = React.HTMLAttributes<HTMLDivElement>;
+declare const BaseFillViewportHeight: ({ children, style: userStyle, ...rest }: FillViewportProps) => React.JSX.Element;
+declare const BaseFillViewportWidth: ({ children, style: userStyle, ...rest }: FillViewportProps) => React.JSX.Element;
+declare const BaseFillViewport: ({ children, style: userStyle, ...rest }: FillViewportProps) => React.JSX.Element;
+declare const FillViewportHeight: typeof BaseFillViewportHeight & {
+    original: typeof BaseFillViewportHeight;
+    originalName: string;
+    displayName: string;
+} & {
+    original: typeof BaseFillViewportHeight & {
+        original: typeof BaseFillViewportHeight;
+        originalName: string;
+        displayName: string;
+    };
+    originalName: string;
+    displayName: string;
+} & {
+    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<typeof BaseFillViewportHeight & {
+        original: typeof BaseFillViewportHeight;
+        originalName: string;
+        displayName: string;
+    }>) => (props: unknown) => React.JSX.Element;
+};
+declare const FillViewportWidth: typeof BaseFillViewportWidth & {
+    original: typeof BaseFillViewportWidth;
+    originalName: string;
+    displayName: string;
+} & {
+    original: typeof BaseFillViewportWidth & {
+        original: typeof BaseFillViewportWidth;
+        originalName: string;
+        displayName: string;
+    };
+    originalName: string;
+    displayName: string;
+} & {
+    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<typeof BaseFillViewportWidth & {
+        original: typeof BaseFillViewportWidth;
+        originalName: string;
+        displayName: string;
+    }>) => (props: unknown) => React.JSX.Element;
+};
+declare const FillViewport: typeof BaseFillViewport & {
+    original: typeof BaseFillViewport;
+    originalName: string;
+    displayName: string;
+} & {
+    original: typeof BaseFillViewport & {
+        original: typeof BaseFillViewport;
+        originalName: string;
+        displayName: string;
+    };
+    originalName: string;
+    displayName: string;
+} & {
+    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<typeof BaseFillViewport & {
+        original: typeof BaseFillViewport;
+        originalName: string;
+        displayName: string;
+    }>) => (props: unknown) => React.JSX.Element;
+};
+export { FillViewportHeight, FillViewportWidth, FillViewport };

package/FillViewport/FillViewport.js

@@ -0,0 +1,67 @@
+import react, { useEffect, useRef, useState } from "react";
+import { makeDecoratable } from "../utils.js";
+function useFillViewportStyle(axis) {
+    const ref = useRef(null);
+    const [style, setStyle] = useState();
+    useEffect(()=>{
+        const el = ref.current;
+        if (!el) return;
+        const measure = ()=>{
+            const rect = el.getBoundingClientRect();
+            const next = {};
+            if ("width" === axis || "both" === axis) next.width = window.innerWidth - rect.left;
+            if ("height" === axis || "both" === axis) next.height = window.innerHeight - rect.top;
+            setStyle(next);
+        };
+        measure();
+        const ro = new ResizeObserver(measure);
+        ro.observe(document.documentElement);
+        return ()=>ro.disconnect();
+    }, []);
+    return {
+        ref,
+        style
+    };
+}
+const BaseFillViewportHeight = ({ children, style: userStyle, ...rest })=>{
+    const { ref, style } = useFillViewportStyle("height");
+    return /*#__PURE__*/ react.createElement("div", {
+        ...rest,
+        ref: ref,
+        "data-fill-viewport": "height",
+        style: void 0 !== style ? {
+            height: style.height,
+            ...userStyle
+        } : userStyle
+    }, children);
+};
+const BaseFillViewportWidth = ({ children, style: userStyle, ...rest })=>{
+    const { ref, style } = useFillViewportStyle("width");
+    return /*#__PURE__*/ react.createElement("div", {
+        ...rest,
+        ref: ref,
+        "data-fill-viewport": "width",
+        style: void 0 !== style ? {
+            width: style.width,
+            ...userStyle
+        } : userStyle
+    }, children);
+};
+const BaseFillViewport = ({ children, style: userStyle, ...rest })=>{
+    const { ref, style } = useFillViewportStyle("both");
+    return /*#__PURE__*/ react.createElement("div", {
+        ...rest,
+        ref: ref,
+        "data-fill-viewport": "both",
+        style: void 0 !== style ? {
+            ...style,
+            ...userStyle
+        } : userStyle
+    }, children);
+};
+const FillViewportHeight = makeDecoratable("FillViewportHeight", BaseFillViewportHeight);
+const FillViewportWidth = makeDecoratable("FillViewportWidth", BaseFillViewportWidth);
+const FillViewport = makeDecoratable("FillViewport", BaseFillViewport);
+export { FillViewport, FillViewportHeight, FillViewportWidth };
+
+//# sourceMappingURL=FillViewport.js.map

package/FillViewport/FillViewport.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FillViewport/FillViewport.js","sources":["../../src/FillViewport/FillViewport.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from \"react\";\nimport { makeDecoratable } from \"~/utils.js\";\n\ninterface FillViewportStyle {\n    width?: number;\n    height?: number;\n}\n\nfunction useFillViewportStyle(axis: \"width\" | \"height\" | \"both\") {\n    const ref = useRef<HTMLDivElement>(null);\n    const [style, setStyle] = useState<FillViewportStyle>();\n\n    useEffect(() => {\n        const el = ref.current;\n        if (!el) {\n            return;\n        }\n\n        const measure = () => {\n            const rect = el.getBoundingClientRect();\n            const next: FillViewportStyle = {};\n\n            if (axis === \"width\" || axis === \"both\") {\n                next.width = window.innerWidth - rect.left;\n            }\n\n            if (axis === \"height\" || axis === \"both\") {\n                next.height = window.innerHeight - rect.top;\n            }\n\n            setStyle(next);\n        };\n\n        measure();\n\n        const ro = new ResizeObserver(measure);\n        ro.observe(document.documentElement);\n\n        return () => ro.disconnect();\n    }, []);\n\n    return { ref, style };\n}\n\ntype FillViewportProps = React.HTMLAttributes<HTMLDivElement>;\n\nconst BaseFillViewportHeight = ({ children, style: userStyle, ...rest }: FillViewportProps) => {\n    const { ref, style } = useFillViewportStyle(\"height\");\n\n    return (\n        <div\n            {...rest}\n            ref={ref}\n            data-fill-viewport=\"height\"\n            style={style !== undefined ? { height: style.height, ...userStyle } : userStyle}\n        >\n            {children}\n        </div>\n    );\n};\n\nconst BaseFillViewportWidth = ({ children, style: userStyle, ...rest }: FillViewportProps) => {\n    const { ref, style } = useFillViewportStyle(\"width\");\n\n    return (\n        <div\n            {...rest}\n            ref={ref}\n            data-fill-viewport=\"width\"\n            style={style !== undefined ? { width: style.width, ...userStyle } : userStyle}\n        >\n            {children}\n        </div>\n    );\n};\n\nconst BaseFillViewport = ({ children, style: userStyle, ...rest }: FillViewportProps) => {\n    const { ref, style } = useFillViewportStyle(\"both\");\n\n    return (\n        <div\n            {...rest}\n            ref={ref}\n            data-fill-viewport=\"both\"\n            style={style !== undefined ? { ...style, ...userStyle } : userStyle}\n        >\n            {children}\n        </div>\n    );\n};\n\nconst FillViewportHeight = makeDecoratable(\"FillViewportHeight\", BaseFillViewportHeight);\nconst FillViewportWidth = makeDecoratable(\"FillViewportWidth\", BaseFillViewportWidth);\nconst FillViewport = makeDecoratable(\"FillViewport\", BaseFillViewport);\n\nexport { FillViewportHeight, FillViewportWidth, FillViewport };\n"],"names":["useFillViewportStyle","axis","ref","useRef","style","setStyle","useState","useEffect","el","measure","rect","next","window","ro","ResizeObserver","document","BaseFillViewportHeight","children","userStyle","rest","undefined","BaseFillViewportWidth","BaseFillViewport","FillViewportHeight","makeDecoratable","FillViewportWidth","FillViewport"],"mappings":";;AAQA,SAASA,qBAAqBC,IAAiC;IAC3D,MAAMC,MAAMC,OAAuB;IACnC,MAAM,CAACC,OAAOC,SAAS,GAAGC;IAE1BC,UAAU;QACN,MAAMC,KAAKN,IAAI,OAAO;QACtB,IAAI,CAACM,IACD;QAGJ,MAAMC,UAAU;YACZ,MAAMC,OAAOF,GAAG,qBAAqB;YACrC,MAAMG,OAA0B,CAAC;YAEjC,IAAIV,AAAS,YAATA,QAAoBA,AAAS,WAATA,MACpBU,KAAK,KAAK,GAAGC,OAAO,UAAU,GAAGF,KAAK,IAAI;YAG9C,IAAIT,AAAS,aAATA,QAAqBA,AAAS,WAATA,MACrBU,KAAK,MAAM,GAAGC,OAAO,WAAW,GAAGF,KAAK,GAAG;YAG/CL,SAASM;QACb;QAEAF;QAEA,MAAMI,KAAK,IAAIC,eAAeL;QAC9BI,GAAG,OAAO,CAACE,SAAS,eAAe;QAEnC,OAAO,IAAMF,GAAG,UAAU;IAC9B,GAAG,EAAE;IAEL,OAAO;QAAEX;QAAKE;IAAM;AACxB;AAIA,MAAMY,yBAAyB,CAAC,EAAEC,QAAQ,EAAE,OAAOC,SAAS,EAAE,GAAGC,MAAyB;IACtF,MAAM,EAAEjB,GAAG,EAAEE,KAAK,EAAE,GAAGJ,qBAAqB;IAE5C,OAAO,WAAP,GACI,oBAAC;QACI,GAAGmB,IAAI;QACR,KAAKjB;QACL,sBAAmB;QACnB,OAAOE,AAAUgB,WAAVhB,QAAsB;YAAE,QAAQA,MAAM,MAAM;YAAE,GAAGc,SAAS;QAAC,IAAIA;OAErED;AAGb;AAEA,MAAMI,wBAAwB,CAAC,EAAEJ,QAAQ,EAAE,OAAOC,SAAS,EAAE,GAAGC,MAAyB;IACrF,MAAM,EAAEjB,GAAG,EAAEE,KAAK,EAAE,GAAGJ,qBAAqB;IAE5C,OAAO,WAAP,GACI,oBAAC;QACI,GAAGmB,IAAI;QACR,KAAKjB;QACL,sBAAmB;QACnB,OAAOE,AAAUgB,WAAVhB,QAAsB;YAAE,OAAOA,MAAM,KAAK;YAAE,GAAGc,SAAS;QAAC,IAAIA;OAEnED;AAGb;AAEA,MAAMK,mBAAmB,CAAC,EAAEL,QAAQ,EAAE,OAAOC,SAAS,EAAE,GAAGC,MAAyB;IAChF,MAAM,EAAEjB,GAAG,EAAEE,KAAK,EAAE,GAAGJ,qBAAqB;IAE5C,OAAO,WAAP,GACI,oBAAC;QACI,GAAGmB,IAAI;QACR,KAAKjB;QACL,sBAAmB;QACnB,OAAOE,AAAUgB,WAAVhB,QAAsB;YAAE,GAAGA,KAAK;YAAE,GAAGc,SAAS;QAAC,IAAIA;OAEzDD;AAGb;AAEA,MAAMM,qBAAqBC,gBAAgB,sBAAsBR;AACjE,MAAMS,oBAAoBD,gBAAgB,qBAAqBH;AAC/D,MAAMK,eAAeF,gBAAgB,gBAAgBF"}

package/FillViewport/index.d.ts

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

package/FillViewport/index.js

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

package/FormComponent/Description.d.ts

@@ -1,27 +1,28 @@
 import React from "react";
-import { type TextProps } from "../Text";
-import { type VariantProps } from "../utils";
+import { type TextProps } from "../Text/index.js";
+import { type VariantProps } from "../utils.js";
 declare const formComponentDescriptionVariants: (props?: ({
     disabled?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type FormComponentDescriptionProps = TextProps & VariantProps<typeof formComponentDescriptionVariants> & {
     text?: React.ReactNode;
 };
-declare const FormComponentDescription: (({ text, disabled, className, ...props }: FormComponentDescriptionProps) => React.JSX.Element | null) & {
-    original: ({ text, disabled, className, ...props }: FormComponentDescriptionProps) => React.JSX.Element | null;
+declare const DecoratableFormComponentDescription: ({ text, disabled, className, ...props }: FormComponentDescriptionProps) => React.JSX.Element | null;
+declare const FormComponentDescription: typeof DecoratableFormComponentDescription & {
+    original: typeof DecoratableFormComponentDescription;
     originalName: string;
     displayName: string;
 } & {
-    original: (({ text, disabled, className, ...props }: FormComponentDescriptionProps) => React.JSX.Element | null) & {
-        original: ({ text, disabled, className, ...props }: FormComponentDescriptionProps) => React.JSX.Element | null;
+    original: typeof DecoratableFormComponentDescription & {
+        original: typeof DecoratableFormComponentDescription;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ text, disabled, className, ...props }: FormComponentDescriptionProps) => React.JSX.Element | null) & {
-        original: ({ text, disabled, className, ...props }: FormComponentDescriptionProps) => React.JSX.Element | null;
+    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<typeof DecoratableFormComponentDescription & {
+        original: typeof DecoratableFormComponentDescription;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;

package/FormComponent/Description.js

@@ -1,29 +1,25 @@
-import React from "react";
-import { Text } from "../Text";
-import { cn, cva, makeDecoratable } from "../utils";
-const formComponentDescriptionVariants = cva("wby-mb-sm wby-text-neutral-strong", {
-  variants: {
-    disabled: {
-      true: "wby-text-neutral-disabled"
+import react from "react";
+import { Text } from "../Text/index.js";
+import { cn, cva, makeDecoratable } from "../utils.js";
+import { useAdminUi } from "../AdminUiProvider/index.js";
+const formComponentDescriptionVariants = cva("mb-sm text-neutral-strong", {
+    variants: {
+        disabled: {
+            true: "text-neutral-disabled"
+        }
     }
-  }
 });
-const DecoratableFormComponentDescription = ({
-  text,
-  disabled,
-  className,
-  ...props
-}) => {
-  if (!text) {
-    return null;
-  }
-  return /*#__PURE__*/React.createElement(Text, Object.assign({}, props, {
-    size: "sm",
-    as: "div",
-    className: cn(formComponentDescriptionVariants({
-      disabled
-    }), className)
-  }), text);
+const DecoratableFormComponentDescription = ({ text, disabled, className, ...props })=>{
+    const { compileMarkdown } = useAdminUi();
+    if (!text) return null;
+    return /*#__PURE__*/ react.createElement(Text, {
+        ...props,
+        size: "sm",
+        as: "div",
+        className: cn(formComponentDescriptionVariants({
+            disabled
+        }), className)
+    }, compileMarkdown(text));
 };
 const FormComponentDescription = makeDecoratable("FormComponentDescription", DecoratableFormComponentDescription);
 export { FormComponentDescription };

package/FormComponent/Description.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Text","cn","cva","makeDecoratable","formComponentDescriptionVariants","variants","disabled","true","DecoratableFormComponentDescription","text","className","props","createElement","Object","assign","size","as","FormComponentDescription"],"sources":["Description.tsx"],"sourcesContent":["import React from \"react\";\nimport { Text, type TextProps } from \"~/Text\";\nimport { cn, cva, makeDecoratable, type VariantProps } from \"~/utils\";\n\nconst formComponentDescriptionVariants = cva(\"wby-mb-sm wby-text-neutral-strong\", {\n    variants: {\n        disabled: {\n            true: \"wby-text-neutral-disabled\"\n        }\n    }\n});\n\ntype FormComponentDescriptionProps = TextProps &\n    VariantProps<typeof formComponentDescriptionVariants> & {\n        text?: React.ReactNode;\n    };\n\nconst DecoratableFormComponentDescription = ({\n    text,\n    disabled,\n    className,\n    ...props\n}: FormComponentDescriptionProps) => {\n    if (!text) {\n        return null;\n    }\n\n    return (\n        <Text\n            {...props}\n            size={\"sm\"}\n            as={\"div\"}\n            className={cn(formComponentDescriptionVariants({ disabled }), className)}\n        >\n            {text}\n        </Text>\n    );\n};\n\nconst FormComponentDescription = makeDecoratable(\n    \"FormComponentDescription\",\n    DecoratableFormComponentDescription\n);\n\nexport { FormComponentDescription, type FormComponentDescriptionProps };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI;AACb,SAASC,EAAE,EAAEC,GAAG,EAAEC,eAAe;AAEjC,MAAMC,gCAAgC,GAAGF,GAAG,CAAC,mCAAmC,EAAE;EAC9EG,QAAQ,EAAE;IACNC,QAAQ,EAAE;MACNC,IAAI,EAAE;IACV;EACJ;AACJ,CAAC,CAAC;AAOF,MAAMC,mCAAmC,GAAGA,CAAC;EACzCC,IAAI;EACJH,QAAQ;EACRI,SAAS;EACT,GAAGC;AACwB,CAAC,KAAK;EACjC,IAAI,CAACF,IAAI,EAAE;IACP,OAAO,IAAI;EACf;EAEA,oBACIV,KAAA,CAAAa,aAAA,CAACZ,IAAI,EAAAa,MAAA,CAAAC,MAAA,KACGH,KAAK;IACTI,IAAI,EAAE,IAAK;IACXC,EAAE,EAAE,KAAM;IACVN,SAAS,EAAET,EAAE,CAACG,gCAAgC,CAAC;MAAEE;IAAS,CAAC,CAAC,EAAEI,SAAS;EAAE,IAExED,IACC,CAAC;AAEf,CAAC;AAED,MAAMQ,wBAAwB,GAAGd,eAAe,CAC5C,0BAA0B,EAC1BK,mCACJ,CAAC;AAED,SAASS,wBAAwB","ignoreList":[]}
+{"version":3,"file":"FormComponent/Description.js","sources":["../../src/FormComponent/Description.tsx"],"sourcesContent":["import React from \"react\";\nimport { Text, type TextProps } from \"~/Text/index.js\";\nimport { cn, cva, makeDecoratable, type VariantProps } from \"~/utils.js\";\nimport { useAdminUi } from \"~/AdminUiProvider/index.js\";\n\nconst formComponentDescriptionVariants = cva(\"mb-sm text-neutral-strong\", {\n    variants: {\n        disabled: {\n            true: \"text-neutral-disabled\"\n        }\n    }\n});\n\ntype FormComponentDescriptionProps = TextProps &\n    VariantProps<typeof formComponentDescriptionVariants> & {\n        text?: React.ReactNode;\n    };\n\nconst DecoratableFormComponentDescription = ({\n    text,\n    disabled,\n    className,\n    ...props\n}: FormComponentDescriptionProps) => {\n    const { compileMarkdown } = useAdminUi();\n\n    if (!text) {\n        return null;\n    }\n\n    return (\n        <Text\n            {...props}\n            size={\"sm\"}\n            as={\"div\"}\n            className={cn(formComponentDescriptionVariants({ disabled }), className)}\n        >\n            {compileMarkdown(text)}\n        </Text>\n    );\n};\n\nconst FormComponentDescription = makeDecoratable(\n    \"FormComponentDescription\",\n    DecoratableFormComponentDescription\n);\n\nexport { FormComponentDescription, type FormComponentDescriptionProps };\n"],"names":["formComponentDescriptionVariants","cva","DecoratableFormComponentDescription","text","disabled","className","props","compileMarkdown","useAdminUi","Text","cn","FormComponentDescription","makeDecoratable"],"mappings":";;;;AAKA,MAAMA,mCAAmCC,IAAI,6BAA6B;IACtE,UAAU;QACN,UAAU;YACN,MAAM;QACV;IACJ;AACJ;AAOA,MAAMC,sCAAsC,CAAC,EACzCC,IAAI,EACJC,QAAQ,EACRC,SAAS,EACT,GAAGC,OACyB;IAC5B,MAAM,EAAEC,eAAe,EAAE,GAAGC;IAE5B,IAAI,CAACL,MACD,OAAO;IAGX,OAAO,WAAP,GACI,oBAACM,MAAIA;QACA,GAAGH,KAAK;QACT,MAAM;QACN,IAAI;QACJ,WAAWI,GAAGV,iCAAiC;YAAEI;QAAS,IAAIC;OAE7DE,gBAAgBJ;AAG7B;AAEA,MAAMQ,2BAA2BC,gBAC7B,4BACAV"}

package/FormComponent/ErrorMessage.d.ts

@@ -1,28 +1,29 @@
 import React from "react";
-import { type TextProps } from "../Text";
-import { type VariantProps } from "../utils";
+import { type TextProps } from "../Text/index.js";
+import { type VariantProps } from "../utils.js";
 declare const formComponentErrorMessageVariants: (props?: ({
     disabled?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type FormComponentErrorMessageProps = TextProps & VariantProps<typeof formComponentErrorMessageVariants> & {
     text?: React.ReactNode;
     invalid?: boolean;
 };
-declare const FormComponentErrorMessage: (({ invalid, disabled, className, text, ...props }: FormComponentErrorMessageProps) => React.JSX.Element | null) & {
-    original: ({ invalid, disabled, className, text, ...props }: FormComponentErrorMessageProps) => React.JSX.Element | null;
+declare const DecoratableFormComponentErrorMessage: ({ invalid, disabled, className, text, ...props }: FormComponentErrorMessageProps) => React.JSX.Element | null;
+declare const FormComponentErrorMessage: typeof DecoratableFormComponentErrorMessage & {
+    original: typeof DecoratableFormComponentErrorMessage;
     originalName: string;
     displayName: string;
 } & {
-    original: (({ invalid, disabled, className, text, ...props }: FormComponentErrorMessageProps) => React.JSX.Element | null) & {
-        original: ({ invalid, disabled, className, text, ...props }: FormComponentErrorMessageProps) => React.JSX.Element | null;
+    original: typeof DecoratableFormComponentErrorMessage & {
+        original: typeof DecoratableFormComponentErrorMessage;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ invalid, disabled, className, text, ...props }: FormComponentErrorMessageProps) => React.JSX.Element | null) & {
-        original: ({ invalid, disabled, className, text, ...props }: FormComponentErrorMessageProps) => React.JSX.Element | null;
+    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<typeof DecoratableFormComponentErrorMessage & {
+        original: typeof DecoratableFormComponentErrorMessage;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;

package/FormComponent/ErrorMessage.js

@@ -1,30 +1,23 @@
-import React from "react";
-import { Text } from "../Text";
-import { cn, cva, makeDecoratable } from "../utils";
-const formComponentErrorMessageVariants = cva("wby-mt-xs wby-text-destructive-primary wby-font-semibold", {
-  variants: {
-    disabled: {
-      true: "wby-text-destructive-muted"
+import react from "react";
+import { Text } from "../Text/index.js";
+import { cn, cva, makeDecoratable } from "../utils.js";
+const formComponentErrorMessageVariants = cva("mt-xs text-destructive-primary font-semibold", {
+    variants: {
+        disabled: {
+            true: "text-destructive-muted"
+        }
     }
-  }
 });
-const DecoratableFormComponentErrorMessage = ({
-  invalid,
-  disabled,
-  className,
-  text,
-  ...props
-}) => {
-  if (!invalid || !text) {
-    return null;
-  }
-  return /*#__PURE__*/React.createElement(Text, Object.assign({}, props, {
-    size: "sm",
-    as: "div",
-    className: cn(formComponentErrorMessageVariants({
-      disabled
-    }), className)
-  }), text);
+const DecoratableFormComponentErrorMessage = ({ invalid, disabled, className, text, ...props })=>{
+    if (!invalid || !text) return null;
+    return /*#__PURE__*/ react.createElement(Text, {
+        ...props,
+        size: "sm",
+        as: "div",
+        className: cn(formComponentErrorMessageVariants({
+            disabled
+        }), className)
+    }, text);
 };
 const FormComponentErrorMessage = makeDecoratable("FormComponentErrorMessage", DecoratableFormComponentErrorMessage);
 export { FormComponentErrorMessage };

package/FormComponent/ErrorMessage.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Text","cn","cva","makeDecoratable","formComponentErrorMessageVariants","variants","disabled","true","DecoratableFormComponentErrorMessage","invalid","className","text","props","createElement","Object","assign","size","as","FormComponentErrorMessage"],"sources":["ErrorMessage.tsx"],"sourcesContent":["import React from \"react\";\nimport { Text, type TextProps } from \"~/Text\";\nimport { cn, cva, makeDecoratable, type VariantProps } from \"~/utils\";\n\nconst formComponentErrorMessageVariants = cva(\n    \"wby-mt-xs wby-text-destructive-primary wby-font-semibold\",\n    {\n        variants: {\n            disabled: {\n                true: \"wby-text-destructive-muted\"\n            }\n        }\n    }\n);\n\ntype FormComponentErrorMessageProps = TextProps &\n    VariantProps<typeof formComponentErrorMessageVariants> & {\n        text?: React.ReactNode;\n        invalid?: boolean;\n    };\n\nconst DecoratableFormComponentErrorMessage = ({\n    invalid,\n    disabled,\n    className,\n    text,\n    ...props\n}: FormComponentErrorMessageProps) => {\n    if (!invalid || !text) {\n        return null;\n    }\n\n    return (\n        <Text\n            {...props}\n            size={\"sm\"}\n            as={\"div\"}\n            className={cn(formComponentErrorMessageVariants({ disabled }), className)}\n        >\n            {text}\n        </Text>\n    );\n};\n\nconst FormComponentErrorMessage = makeDecoratable(\n    \"FormComponentErrorMessage\",\n    DecoratableFormComponentErrorMessage\n);\n\nexport { FormComponentErrorMessage, type FormComponentErrorMessageProps };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI;AACb,SAASC,EAAE,EAAEC,GAAG,EAAEC,eAAe;AAEjC,MAAMC,iCAAiC,GAAGF,GAAG,CACzC,0DAA0D,EAC1D;EACIG,QAAQ,EAAE;IACNC,QAAQ,EAAE;MACNC,IAAI,EAAE;IACV;EACJ;AACJ,CACJ,CAAC;AAQD,MAAMC,oCAAoC,GAAGA,CAAC;EAC1CC,OAAO;EACPH,QAAQ;EACRI,SAAS;EACTC,IAAI;EACJ,GAAGC;AACyB,CAAC,KAAK;EAClC,IAAI,CAACH,OAAO,IAAI,CAACE,IAAI,EAAE;IACnB,OAAO,IAAI;EACf;EAEA,oBACIZ,KAAA,CAAAc,aAAA,CAACb,IAAI,EAAAc,MAAA,CAAAC,MAAA,KACGH,KAAK;IACTI,IAAI,EAAE,IAAK;IACXC,EAAE,EAAE,KAAM;IACVP,SAAS,EAAET,EAAE,CAACG,iCAAiC,CAAC;MAAEE;IAAS,CAAC,CAAC,EAAEI,SAAS;EAAE,IAEzEC,IACC,CAAC;AAEf,CAAC;AAED,MAAMO,yBAAyB,GAAGf,eAAe,CAC7C,2BAA2B,EAC3BK,oCACJ,CAAC;AAED,SAASU,yBAAyB","ignoreList":[]}
+{"version":3,"file":"FormComponent/ErrorMessage.js","sources":["../../src/FormComponent/ErrorMessage.tsx"],"sourcesContent":["import React from \"react\";\nimport { Text, type TextProps } from \"~/Text/index.js\";\nimport { cn, cva, makeDecoratable, type VariantProps } from \"~/utils.js\";\n\nconst formComponentErrorMessageVariants = cva(\"mt-xs text-destructive-primary font-semibold\", {\n    variants: {\n        disabled: {\n            true: \"text-destructive-muted\"\n        }\n    }\n});\n\ntype FormComponentErrorMessageProps = TextProps &\n    VariantProps<typeof formComponentErrorMessageVariants> & {\n        text?: React.ReactNode;\n        invalid?: boolean;\n    };\n\nconst DecoratableFormComponentErrorMessage = ({\n    invalid,\n    disabled,\n    className,\n    text,\n    ...props\n}: FormComponentErrorMessageProps) => {\n    if (!invalid || !text) {\n        return null;\n    }\n\n    return (\n        <Text\n            {...props}\n            size={\"sm\"}\n            as={\"div\"}\n            className={cn(formComponentErrorMessageVariants({ disabled }), className)}\n        >\n            {text}\n        </Text>\n    );\n};\n\nconst FormComponentErrorMessage = makeDecoratable(\n    \"FormComponentErrorMessage\",\n    DecoratableFormComponentErrorMessage\n);\n\nexport { FormComponentErrorMessage, type FormComponentErrorMessageProps };\n"],"names":["formComponentErrorMessageVariants","cva","DecoratableFormComponentErrorMessage","invalid","disabled","className","text","props","Text","cn","FormComponentErrorMessage","makeDecoratable"],"mappings":";;;AAIA,MAAMA,oCAAoCC,IAAI,gDAAgD;IAC1F,UAAU;QACN,UAAU;YACN,MAAM;QACV;IACJ;AACJ;AAQA,MAAMC,uCAAuC,CAAC,EAC1CC,OAAO,EACPC,QAAQ,EACRC,SAAS,EACTC,IAAI,EACJ,GAAGC,OAC0B;IAC7B,IAAI,CAACJ,WAAW,CAACG,MACb,OAAO;IAGX,OAAO,WAAP,GACI,oBAACE,MAAIA;QACA,GAAGD,KAAK;QACT,MAAM;QACN,IAAI;QACJ,WAAWE,GAAGT,kCAAkC;YAAEI;QAAS,IAAIC;OAE9DC;AAGb;AAEA,MAAMI,4BAA4BC,gBAC9B,6BACAT"}

package/FormComponent/FormComponent.d.ts

@@ -1,5 +1,5 @@
 import type React from "react";
-import type { Label } from "../Label";
+import type { Label } from "../Label/index.js";
 interface FormComponentProps<TValue = any> {
     /**
      * Label for the form component, which can be a React element of type `Label` or any React node.
@@ -13,6 +13,10 @@ interface FormComponentProps<TValue = any> {
      * Note or supplementary information to display below the form component.
      */
     note?: React.ReactNode;
+    /**
+     * Hint to be displayed in a tooltip.
+     */
+    hint?: React.ReactNode;
     /**
      * Indicates whether the form component is required.
      */

package/FormComponent/FormComponent.js

@@ -1,3 +0,0 @@
-export {};
-
-//# sourceMappingURL=FormComponent.js.map

package/FormComponent/Label.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { Label } from "../Label";
+import { Label } from "../Label/index.js";
 interface FormComponentLabelProps extends React.HTMLAttributes<HTMLDivElement> {
     text?: React.ReactElement<typeof Label> | React.ReactNode;
     invalid?: boolean;
@@ -8,21 +8,22 @@ interface FormComponentLabelProps extends React.HTMLAttributes<HTMLDivElement> {
     hint?: React.ReactNode;
     htmlFor?: string;
 }
-declare const FormComponentLabel: (({ htmlFor, text, required, disabled, hint, invalid, className, ...props }: FormComponentLabelProps) => React.JSX.Element | null) & {
-    original: ({ htmlFor, text, required, disabled, hint, invalid, className, ...props }: FormComponentLabelProps) => React.JSX.Element | null;
+declare const DecoratableFormComponentLabel: ({ htmlFor, text, required, disabled, hint, invalid, className, ...props }: FormComponentLabelProps) => React.JSX.Element | null;
+declare const FormComponentLabel: typeof DecoratableFormComponentLabel & {
+    original: typeof DecoratableFormComponentLabel;
     originalName: string;
     displayName: string;
 } & {
-    original: (({ htmlFor, text, required, disabled, hint, invalid, className, ...props }: FormComponentLabelProps) => React.JSX.Element | null) & {
-        original: ({ htmlFor, text, required, disabled, hint, invalid, className, ...props }: FormComponentLabelProps) => React.JSX.Element | null;
+    original: typeof DecoratableFormComponentLabel & {
+        original: typeof DecoratableFormComponentLabel;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ htmlFor, text, required, disabled, hint, invalid, className, ...props }: FormComponentLabelProps) => React.JSX.Element | null) & {
-        original: ({ htmlFor, text, required, disabled, hint, invalid, className, ...props }: FormComponentLabelProps) => React.JSX.Element | null;
+    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<typeof DecoratableFormComponentLabel & {
+        original: typeof DecoratableFormComponentLabel;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;

package/FormComponent/Label.js

@@ -1,46 +1,41 @@
-import React, { useMemo } from "react";
-import { cn, makeDecoratable } from "../utils";
-import { Label } from "../Label";
-const DecoratableFormComponentLabel = ({
-  htmlFor,
-  text,
-  required,
-  disabled,
-  hint,
-  invalid,
-  className,
-  ...props
-}) => {
-  // UseMemo correctly to memoize the rendered label
-  const renderLabel = useMemo(() => {
-    if (!text) {
-      return null;
-    }
-    if (/*#__PURE__*/React.isValidElement(text) && text.type === Label) {
-      return /*#__PURE__*/React.cloneElement(text, {
-        ...text.props,
-        htmlFor: text.props.htmlFor ?? htmlFor,
-        required: text.props.required ?? required,
-        disabled: text.props.disabled ?? disabled,
-        hint: text.props.hint ?? hint,
-        invalid: text.props.invalid ?? invalid
-      });
-    }
-    return /*#__PURE__*/React.createElement(Label, {
-      htmlFor: htmlFor,
-      text: text,
-      required: required,
-      disabled: disabled,
-      hint: hint,
-      invalid: invalid
-    });
-  }, [text, required, disabled, hint, invalid, htmlFor]);
-  if (!renderLabel) {
-    return null;
-  }
-  return /*#__PURE__*/React.createElement("div", Object.assign({}, props, {
-    className: cn("wby-mb-xs", className)
-  }), renderLabel);
+import react, { useMemo } from "react";
+import { cn, makeDecoratable } from "../utils.js";
+import { Label } from "../Label/index.js";
+const DecoratableFormComponentLabel = ({ htmlFor, text, required, disabled, hint, invalid, className, ...props })=>{
+    const renderLabel = useMemo(()=>{
+        if (!text) return null;
+        if (/*#__PURE__*/ react.isValidElement(text) && text.type === Label) {
+            const textProps = text.props;
+            return /*#__PURE__*/ react.cloneElement(text, {
+                ...textProps,
+                htmlFor: textProps.htmlFor ?? htmlFor,
+                required: textProps.required ?? required,
+                disabled: textProps.disabled ?? disabled,
+                hint: textProps.hint ?? hint,
+                invalid: textProps.invalid ?? invalid
+            });
+        }
+        return /*#__PURE__*/ react.createElement(Label, {
+            htmlFor: htmlFor,
+            text: text,
+            required: required,
+            disabled: disabled,
+            hint: hint,
+            invalid: invalid
+        });
+    }, [
+        text,
+        required,
+        disabled,
+        hint,
+        invalid,
+        htmlFor
+    ]);
+    if (!renderLabel) return null;
+    return /*#__PURE__*/ react.createElement("div", {
+        ...props,
+        className: cn("mb-xs", className)
+    }, renderLabel);
 };
 const FormComponentLabel = makeDecoratable("FormComponentLabel", DecoratableFormComponentLabel);
 export { FormComponentLabel };

package/FormComponent/Label.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useMemo","cn","makeDecoratable","Label","DecoratableFormComponentLabel","htmlFor","text","required","disabled","hint","invalid","className","props","renderLabel","isValidElement","type","cloneElement","createElement","Object","assign","FormComponentLabel"],"sources":["Label.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { cn, makeDecoratable } from \"~/utils\";\nimport type { LabelProps } from \"~/Label\";\nimport { Label } from \"~/Label\";\n\ninterface FormComponentLabelProps extends React.HTMLAttributes<HTMLDivElement> {\n    text?: React.ReactElement<typeof Label> | React.ReactNode;\n    invalid?: boolean;\n    required?: boolean;\n    disabled?: boolean;\n    hint?: React.ReactNode;\n    htmlFor?: string;\n}\n\nconst DecoratableFormComponentLabel = ({\n    htmlFor,\n    text,\n    required,\n    disabled,\n    hint,\n    invalid,\n    className,\n    ...props\n}: FormComponentLabelProps) => {\n    // UseMemo correctly to memoize the rendered label\n    const renderLabel = useMemo(() => {\n        if (!text) {\n            return null;\n        }\n\n        if (React.isValidElement(text) && text.type === Label) {\n            return React.cloneElement(text as React.ReactElement<LabelProps>, {\n                ...text.props,\n                htmlFor: text.props.htmlFor ?? htmlFor,\n                required: text.props.required ?? required,\n                disabled: text.props.disabled ?? disabled,\n                hint: text.props.hint ?? hint,\n                invalid: text.props.invalid ?? invalid\n            });\n        }\n\n        return (\n            <Label\n                htmlFor={htmlFor}\n                text={text}\n                required={required}\n                disabled={disabled}\n                hint={hint}\n                invalid={invalid}\n            />\n        );\n    }, [text, required, disabled, hint, invalid, htmlFor]);\n\n    if (!renderLabel) {\n        return null;\n    }\n\n    return (\n        <div {...props} className={cn(\"wby-mb-xs\", className)}>\n            {renderLabel}\n        </div>\n    );\n};\n\nconst FormComponentLabel = makeDecoratable(\"FormComponentLabel\", DecoratableFormComponentLabel);\n\nexport { FormComponentLabel, type FormComponentLabelProps };\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AACtC,SAASC,EAAE,EAAEC,eAAe;AAE5B,SAASC,KAAK;AAWd,MAAMC,6BAA6B,GAAGA,CAAC;EACnCC,OAAO;EACPC,IAAI;EACJC,QAAQ;EACRC,QAAQ;EACRC,IAAI;EACJC,OAAO;EACPC,SAAS;EACT,GAAGC;AACkB,CAAC,KAAK;EAC3B;EACA,MAAMC,WAAW,GAAGb,OAAO,CAAC,MAAM;IAC9B,IAAI,CAACM,IAAI,EAAE;MACP,OAAO,IAAI;IACf;IAEA,IAAI,aAAAP,KAAK,CAACe,cAAc,CAACR,IAAI,CAAC,IAAIA,IAAI,CAACS,IAAI,KAAKZ,KAAK,EAAE;MACnD,oBAAOJ,KAAK,CAACiB,YAAY,CAACV,IAAI,EAAoC;QAC9D,GAAGA,IAAI,CAACM,KAAK;QACbP,OAAO,EAAEC,IAAI,CAACM,KAAK,CAACP,OAAO,IAAIA,OAAO;QACtCE,QAAQ,EAAED,IAAI,CAACM,KAAK,CAACL,QAAQ,IAAIA,QAAQ;QACzCC,QAAQ,EAAEF,IAAI,CAACM,KAAK,CAACJ,QAAQ,IAAIA,QAAQ;QACzCC,IAAI,EAAEH,IAAI,CAACM,KAAK,CAACH,IAAI,IAAIA,IAAI;QAC7BC,OAAO,EAAEJ,IAAI,CAACM,KAAK,CAACF,OAAO,IAAIA;MACnC,CAAC,CAAC;IACN;IAEA,oBACIX,KAAA,CAAAkB,aAAA,CAACd,KAAK;MACFE,OAAO,EAAEA,OAAQ;MACjBC,IAAI,EAAEA,IAAK;MACXC,QAAQ,EAAEA,QAAS;MACnBC,QAAQ,EAAEA,QAAS;MACnBC,IAAI,EAAEA,IAAK;MACXC,OAAO,EAAEA;IAAQ,CACpB,CAAC;EAEV,CAAC,EAAE,CAACJ,IAAI,EAAEC,QAAQ,EAAEC,QAAQ,EAAEC,IAAI,EAAEC,OAAO,EAAEL,OAAO,CAAC,CAAC;EAEtD,IAAI,CAACQ,WAAW,EAAE;IACd,OAAO,IAAI;EACf;EAEA,oBACId,KAAA,CAAAkB,aAAA,QAAAC,MAAA,CAAAC,MAAA,KAASP,KAAK;IAAED,SAAS,EAAEV,EAAE,CAAC,WAAW,EAAEU,SAAS;EAAE,IACjDE,WACA,CAAC;AAEd,CAAC;AAED,MAAMO,kBAAkB,GAAGlB,eAAe,CAAC,oBAAoB,EAAEE,6BAA6B,CAAC;AAE/F,SAASgB,kBAAkB","ignoreList":[]}
+{"version":3,"file":"FormComponent/Label.js","sources":["../../src/FormComponent/Label.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { cn, makeDecoratable } from \"~/utils.js\";\nimport type { LabelProps } from \"~/Label/index.js\";\nimport { Label } from \"~/Label/index.js\";\nimport type { GenericRecord } from \"@webiny/utils\";\n\ninterface FormComponentLabelProps extends React.HTMLAttributes<HTMLDivElement> {\n    text?: React.ReactElement<typeof Label> | React.ReactNode;\n    invalid?: boolean;\n    required?: boolean;\n    disabled?: boolean;\n    hint?: React.ReactNode;\n    htmlFor?: string;\n}\n\nconst DecoratableFormComponentLabel = ({\n    htmlFor,\n    text,\n    required,\n    disabled,\n    hint,\n    invalid,\n    className,\n    ...props\n}: FormComponentLabelProps) => {\n    // UseMemo correctly to memoize the rendered label\n    const renderLabel = useMemo(() => {\n        if (!text) {\n            return null;\n        }\n\n        if (React.isValidElement(text) && text.type === Label) {\n            const textProps = text.props as GenericRecord;\n            return React.cloneElement(text as React.ReactElement<LabelProps>, {\n                ...textProps,\n                htmlFor: textProps.htmlFor ?? htmlFor,\n                required: textProps.required ?? required,\n                disabled: textProps.disabled ?? disabled,\n                hint: textProps.hint ?? hint,\n                invalid: textProps.invalid ?? invalid\n            });\n        }\n\n        return (\n            <Label\n                htmlFor={htmlFor}\n                text={text}\n                required={required}\n                disabled={disabled}\n                hint={hint}\n                invalid={invalid}\n            />\n        );\n    }, [text, required, disabled, hint, invalid, htmlFor]);\n\n    if (!renderLabel) {\n        return null;\n    }\n\n    return (\n        <div {...props} className={cn(\"mb-xs\", className)}>\n            {renderLabel}\n        </div>\n    );\n};\n\nconst FormComponentLabel = makeDecoratable(\"FormComponentLabel\", DecoratableFormComponentLabel);\n\nexport { FormComponentLabel, type FormComponentLabelProps };\n"],"names":["DecoratableFormComponentLabel","htmlFor","text","required","disabled","hint","invalid","className","props","renderLabel","useMemo","React","Label","textProps","cn","FormComponentLabel","makeDecoratable"],"mappings":";;;AAeA,MAAMA,gCAAgC,CAAC,EACnCC,OAAO,EACPC,IAAI,EACJC,QAAQ,EACRC,QAAQ,EACRC,IAAI,EACJC,OAAO,EACPC,SAAS,EACT,GAAGC,OACmB;IAEtB,MAAMC,cAAcC,QAAQ;QACxB,IAAI,CAACR,MACD,OAAO;QAGX,IAAI,WAAJ,GAAIS,MAAAA,cAAoB,CAACT,SAASA,KAAK,IAAI,KAAKU,OAAO;YACnD,MAAMC,YAAYX,KAAK,KAAK;YAC5B,OAAO,WAAP,GAAOS,MAAAA,YAAkB,CAACT,MAAwC;gBAC9D,GAAGW,SAAS;gBACZ,SAASA,UAAU,OAAO,IAAIZ;gBAC9B,UAAUY,UAAU,QAAQ,IAAIV;gBAChC,UAAUU,UAAU,QAAQ,IAAIT;gBAChC,MAAMS,UAAU,IAAI,IAAIR;gBACxB,SAASQ,UAAU,OAAO,IAAIP;YAClC;QACJ;QAEA,OAAO,WAAP,GACI,oBAACM,OAAKA;YACF,SAASX;YACT,MAAMC;YACN,UAAUC;YACV,UAAUC;YACV,MAAMC;YACN,SAASC;;IAGrB,GAAG;QAACJ;QAAMC;QAAUC;QAAUC;QAAMC;QAASL;KAAQ;IAErD,IAAI,CAACQ,aACD,OAAO;IAGX,OAAO,WAAP,GACI,oBAAC;QAAK,GAAGD,KAAK;QAAE,WAAWM,GAAG,SAASP;OAClCE;AAGb;AAEA,MAAMM,qBAAqBC,gBAAgB,sBAAsBhB"}

package/FormComponent/Note.d.ts

@@ -1,27 +1,28 @@
 import React from "react";
-import { type TextProps } from "../Text";
-import { type VariantProps } from "../utils";
+import { type TextProps } from "../Text/index.js";
+import { type VariantProps } from "../utils.js";
 declare const formComponentNoteVariants: (props?: ({
     disabled?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type FormComponentNoteProps = TextProps & VariantProps<typeof formComponentNoteVariants> & {
     text?: React.ReactNode;
 };
-declare const FormComponentNote: (({ disabled, text, className, ...props }: FormComponentNoteProps) => React.JSX.Element | null) & {
-    original: ({ disabled, text, className, ...props }: FormComponentNoteProps) => React.JSX.Element | null;
+declare const DecoratableFormComponentNote: ({ disabled, text, className, ...props }: FormComponentNoteProps) => React.JSX.Element | null;
+declare const FormComponentNote: typeof DecoratableFormComponentNote & {
+    original: typeof DecoratableFormComponentNote;
     originalName: string;
     displayName: string;
 } & {
-    original: (({ disabled, text, className, ...props }: FormComponentNoteProps) => React.JSX.Element | null) & {
-        original: ({ disabled, text, className, ...props }: FormComponentNoteProps) => React.JSX.Element | null;
+    original: typeof DecoratableFormComponentNote & {
+        original: typeof DecoratableFormComponentNote;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ disabled, text, className, ...props }: FormComponentNoteProps) => React.JSX.Element | null) & {
-        original: ({ disabled, text, className, ...props }: FormComponentNoteProps) => React.JSX.Element | null;
+    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<typeof DecoratableFormComponentNote & {
+        original: typeof DecoratableFormComponentNote;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;

package/FormComponent/Note.js

@@ -1,29 +1,25 @@
-import React from "react";
-import { Text } from "../Text";
-import { cn, cva, makeDecoratable } from "../utils";
-const formComponentNoteVariants = cva("wby-mt-sm wby-text-neutral-strong", {
-  variants: {
-    disabled: {
-      true: "wby-text-neutral-disabled"
+import react from "react";
+import { Text } from "../Text/index.js";
+import { cn, cva, makeDecoratable } from "../utils.js";
+import { useAdminUi } from "../AdminUiProvider/index.js";
+const formComponentNoteVariants = cva("mt-sm text-neutral-strong", {
+    variants: {
+        disabled: {
+            true: "text-neutral-disabled"
+        }
     }
-  }
 });
-const DecoratableFormComponentNote = ({
-  disabled,
-  text,
-  className,
-  ...props
-}) => {
-  if (!text) {
-    return null;
-  }
-  return /*#__PURE__*/React.createElement(Text, Object.assign({}, props, {
-    size: "sm",
-    as: "div",
-    className: cn(formComponentNoteVariants({
-      disabled
-    }), className)
-  }), text);
+const DecoratableFormComponentNote = ({ disabled, text, className, ...props })=>{
+    const { compileMarkdown } = useAdminUi();
+    if (!text) return null;
+    return /*#__PURE__*/ react.createElement(Text, {
+        ...props,
+        size: "sm",
+        as: "div",
+        className: cn(formComponentNoteVariants({
+            disabled
+        }), className)
+    }, compileMarkdown(text));
 };
 const FormComponentNote = makeDecoratable("FormComponentNote", DecoratableFormComponentNote);
 export { FormComponentNote };