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

package/Accordion/components/AccordionTrigger.js

@@ -1,59 +1,79 @@
-import * as React from "react";
-import { ReactComponent as KeyboardArrowDownIcon } from "@webiny/icons/keyboard_arrow_down.svg";
-import { Collapsible as CollapsiblePrimitive } from "radix-ui";
-import { cn } from "../../utils";
-import { AccordionItemAction } from "./AccordionItemAction";
-import { Icon } from "../../Icon";
-import { AccordionItemDragHandle } from "./AccordionItemDragHandle";
-const AccordionTrigger = ({
-  title,
-  description,
-  actions,
-  icon,
-  interactive = true,
-  draggable
-}) => {
-  // The following three attributes are required for the trigger to act as a button.
-  // We can't use the default button element here because the content of the trigger
-  // can also contain one or more buttons.
-  const divAsButtonProps = React.useMemo(() => {
-    return {
-      role: "button",
-      tabIndex: interactive ? 0 : -1,
-      // Disable keyboard interaction if not interactive
-      onKeyDown: e => {
-        if (e.key === "Enter" || e.key === " ") {
-          e.preventDefault();
-          e.currentTarget.click();
-        }
-      }
-    };
-  }, [interactive]);
-  return /*#__PURE__*/React.createElement(CollapsiblePrimitive.Trigger, {
-    asChild: true,
-    onClick: e => !interactive && e.preventDefault() // Prevent clicking if not interactive
-  }, /*#__PURE__*/React.createElement("div", Object.assign({}, divAsButtonProps, {
-    className: cn("wby-group/trigger wby-w-full wby-flex wby-items-center wby-cursor-pointer wby-relative", "focus-visible:wby-outline-none focus-visible:wby-border-none focus-visible:wby-ring-sm focus-visible:wby-ring-primary-dimmed", "hover:wby-bg-neutral-dimmed", "group-[.wby-accordion-variant-container]:wby-rounded-lg", "[&[data-state=open]_[data-role=open-close-indicator]]:wby-rotate-180", interactive ? "wby-cursor-pointer" : "wby-cursor-default")
-  }), draggable ? /*#__PURE__*/React.createElement(AccordionItemDragHandle, null) : null, /*#__PURE__*/React.createElement("div", {
-    className: "wby-w-full wby-flex wby-justify-between wby-items-center wby-px-md wby-py-sm-extra"
-  }, icon && /*#__PURE__*/React.createElement("div", {
-    className: "wby-mr-md"
-  }, icon), /*#__PURE__*/React.createElement("div", {
-    className: "wby-flex wby-flex-col wby-gap-xxs wby-flex-grow wby-text-left"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "wby-text-md wby-font-semibold webiny_accordion-item-title"
-  }, title), /*#__PURE__*/React.createElement("div", {
-    className: "wby-text-sm wby-text-neutral-strong"
-  }, description)), /*#__PURE__*/React.createElement("div", {
-    className: "wby-flex wby-gap-xs"
-  }, actions, actions && interactive && /*#__PURE__*/React.createElement(AccordionItemAction.Separator, null), interactive && /*#__PURE__*/React.createElement(Icon, {
-    size: "lg",
-    className: "wby-transition",
-    color: "neutral-strong",
-    "data-role": "open-close-indicator",
-    label: "Open/close indicator",
-    icon: /*#__PURE__*/React.createElement(KeyboardArrowDownIcon, null)
-  })))));
+import { ReactComponent } from "@webiny/icons/keyboard_arrow_down.svg";
+import { ReactComponent as lock_svg_ReactComponent } from "@webiny/icons/lock.svg";
+import { Collapsible } from "radix-ui";
+import { cn } from "../../utils.js";
+import { useAccordionItemProps } from "./AccordionItem.js";
+import { useAccordionProps } from "./AccordionPropsProvider.js";
+import { AccordionItemAction } from "./AccordionItemAction.js";
+import { Icon } from "../../Icon/index.js";
+import { AccordionItemDragHandle } from "./AccordionItemDragHandle.js";
+import * as __rspack_external_react from "react";
+const OpenCloseIndicator = ()=>/*#__PURE__*/ __rspack_external_react.createElement(Icon, {
+        size: "md",
+        className: "transition",
+        color: "neutral-strong",
+        "data-role": "open-close-indicator",
+        label: "Open/close indicator",
+        icon: /*#__PURE__*/ __rspack_external_react.createElement(ReactComponent, null)
+    });
+const AccordionTrigger = ()=>{
+    const { title, subtitle, description, colorMark, actions, icon, interactive = true, locked, draggable, dragHandleRef } = useAccordionItemProps();
+    const accordionProps = useAccordionProps();
+    const openClosedIndicatorPosition = accordionProps.openClosedIndicatorPosition || "right";
+    const divAsButtonProps = __rspack_external_react.useMemo(()=>({
+            role: "button",
+            tabIndex: interactive ? 0 : -1,
+            onKeyDown: (e)=>{
+                if ("Enter" === e.key || " " === e.key) {
+                    e.preventDefault();
+                    e.currentTarget.click();
+                }
+            }
+        }), [
+        interactive
+    ]);
+    return /*#__PURE__*/ __rspack_external_react.createElement(Collapsible.Trigger, {
+        asChild: true,
+        onClick: (e)=>!interactive && e.preventDefault()
+    }, /*#__PURE__*/ __rspack_external_react.createElement("div", {
+        ...divAsButtonProps,
+        className: cn("group/trigger w-full flex items-center relative min-h-[62px]", "focus-visible:outline-none focus-visible:border-none focus-visible:ring-sm focus-visible:ring-primary-dimmed", "group-[.accordion-variant-container]:rounded-lg", "[&[data-state=open]_[data-role=open-close-indicator]]:rotate-180 border-l-accent", interactive ? "cursor-pointer" : "cursor-default")
+    }, draggable ? /*#__PURE__*/ __rspack_external_react.createElement(AccordionItemDragHandle, {
+        dragHandleRef: dragHandleRef
+    }) : null, colorMark && /*#__PURE__*/ __rspack_external_react.createElement("div", {
+        style: {
+            backgroundColor: colorMark
+        },
+        className: "block w-[4px] h-[48px] rounded-sm ml-sm"
+    }), /*#__PURE__*/ __rspack_external_react.createElement("div", {
+        className: "w-full flex justify-between items-center px-md py-sm-extra"
+    }, "left" === openClosedIndicatorPosition ? /*#__PURE__*/ __rspack_external_react.createElement(__rspack_external_react.Fragment, null, interactive && !locked ? /*#__PURE__*/ __rspack_external_react.createElement("div", {
+        className: "mr-md"
+    }, /*#__PURE__*/ __rspack_external_react.createElement(OpenCloseIndicator, null)) : null) : /*#__PURE__*/ __rspack_external_react.createElement(__rspack_external_react.Fragment, null, icon ? /*#__PURE__*/ __rspack_external_react.createElement("div", {
+        className: "mr-md"
+    }, icon) : null), /*#__PURE__*/ __rspack_external_react.createElement("div", {
+        className: "flex flex-col gap-xxs flex-grow text-left"
+    }, /*#__PURE__*/ __rspack_external_react.createElement("div", {
+        className: "flex gap-xs"
+    }, /*#__PURE__*/ __rspack_external_react.createElement("div", {
+        className: "text-md font-semibold webiny_accordion-item-title"
+    }, title), subtitle && /*#__PURE__*/ __rspack_external_react.createElement("div", {
+        className: "text-neutral-muted text-md"
+    }, subtitle)), /*#__PURE__*/ __rspack_external_react.createElement("div", {
+        className: "text-sm text-neutral-strong"
+    }, description)), "right" === openClosedIndicatorPosition ? /*#__PURE__*/ __rspack_external_react.createElement("div", {
+        className: "flex gap-xs items-center"
+    }, locked ? /*#__PURE__*/ __rspack_external_react.createElement(Icon, {
+        label: "Locked",
+        icon: /*#__PURE__*/ __rspack_external_react.createElement(lock_svg_ReactComponent, null),
+        color: "neutral-light"
+    }) : /*#__PURE__*/ __rspack_external_react.createElement(__rspack_external_react.Fragment, null, actions, actions && interactive ? /*#__PURE__*/ __rspack_external_react.createElement(AccordionItemAction.Separator, null) : null, interactive ? /*#__PURE__*/ __rspack_external_react.createElement(OpenCloseIndicator, null) : null)) : /*#__PURE__*/ __rspack_external_react.createElement("div", {
+        className: "flex gap-xs items-center"
+    }, locked ? /*#__PURE__*/ __rspack_external_react.createElement(Icon, {
+        label: "Locked",
+        icon: /*#__PURE__*/ __rspack_external_react.createElement(lock_svg_ReactComponent, null),
+        color: "neutral-light"
+    }) : /*#__PURE__*/ __rspack_external_react.createElement(__rspack_external_react.Fragment, null, actions)))));
 };
 export { AccordionTrigger };
 

package/Accordion/components/AccordionTrigger.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","ReactComponent","KeyboardArrowDownIcon","Collapsible","CollapsiblePrimitive","cn","AccordionItemAction","Icon","AccordionItemDragHandle","AccordionTrigger","title","description","actions","icon","interactive","draggable","divAsButtonProps","useMemo","role","tabIndex","onKeyDown","e","key","preventDefault","currentTarget","click","createElement","Trigger","asChild","onClick","Object","assign","className","Separator","size","color","label"],"sources":["AccordionTrigger.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { ReactComponent as KeyboardArrowDownIcon } from \"@webiny/icons/keyboard_arrow_down.svg\";\nimport { Collapsible as CollapsiblePrimitive } from \"radix-ui\";\nimport { cn } from \"~/utils\";\nimport { type AccordionItemProps } from \"./AccordionItem\";\nimport { AccordionItemAction } from \"./AccordionItemAction\";\nimport { Icon } from \"~/Icon\";\nimport { AccordionItemDragHandle } from \"~/Accordion/components/AccordionItemDragHandle\";\n\ntype AccordionTriggerProps = Pick<\n    AccordionItemProps,\n    \"title\" | \"description\" | \"icon\" | \"handle\" | \"interactive\" | \"actions\" | \"draggable\"\n>;\n\nconst AccordionTrigger = ({\n    title,\n    description,\n    actions,\n    icon,\n    interactive = true,\n    draggable\n}: AccordionTriggerProps) => {\n    // The following three attributes are required for the trigger to act as a button.\n    // We can't use the default button element here because the content of the trigger\n    // can also contain one or more buttons.\n    const divAsButtonProps = React.useMemo<React.HTMLAttributes<HTMLDivElement>>(() => {\n        return {\n            role: \"button\",\n            tabIndex: interactive ? 0 : -1, // Disable keyboard interaction if not interactive\n            onKeyDown: e => {\n                if (e.key === \"Enter\" || e.key === \" \") {\n                    e.preventDefault();\n                    e.currentTarget.click();\n                }\n            }\n        };\n    }, [interactive]);\n\n    return (\n        <CollapsiblePrimitive.Trigger\n            asChild\n            onClick={e => !interactive && e.preventDefault()} // Prevent clicking if not interactive\n        >\n            <div\n                {...divAsButtonProps}\n                className={cn(\n                    \"wby-group/trigger wby-w-full wby-flex wby-items-center wby-cursor-pointer wby-relative\",\n                    \"focus-visible:wby-outline-none focus-visible:wby-border-none focus-visible:wby-ring-sm focus-visible:wby-ring-primary-dimmed\",\n                    \"hover:wby-bg-neutral-dimmed\",\n                    \"group-[.wby-accordion-variant-container]:wby-rounded-lg\",\n                    \"[&[data-state=open]_[data-role=open-close-indicator]]:wby-rotate-180\",\n                    interactive ? \"wby-cursor-pointer\" : \"wby-cursor-default\"\n                )}\n            >\n                {draggable ? <AccordionItemDragHandle /> : null}\n                <div\n                    className={\n                        \"wby-w-full wby-flex wby-justify-between wby-items-center wby-px-md wby-py-sm-extra\"\n                    }\n                >\n                    {icon && <div className={\"wby-mr-md\"}>{icon}</div>}\n                    <div\n                        className={\"wby-flex wby-flex-col wby-gap-xxs wby-flex-grow wby-text-left\"}\n                    >\n                        <div\n                            className={\"wby-text-md wby-font-semibold webiny_accordion-item-title\"}\n                        >\n                            {title}\n                        </div>\n                        <div className={\"wby-text-sm wby-text-neutral-strong\"}>{description}</div>\n                    </div>\n                    <div className={\"wby-flex wby-gap-xs\"}>\n                        {actions}\n\n                        {/* No need to show the separator if there are no actions and the item is not interactive. */}\n                        {actions && interactive && <AccordionItemAction.Separator />}\n\n                        {interactive && (\n                            <Icon\n                                size={\"lg\"}\n                                className={\"wby-transition\"}\n                                color={\"neutral-strong\"}\n                                data-role={\"open-close-indicator\"}\n                                label={\"Open/close indicator\"}\n                                icon={<KeyboardArrowDownIcon />}\n                            />\n                        )}\n                    </div>\n                </div>\n            </div>\n        </CollapsiblePrimitive.Trigger>\n    );\n};\n\nexport { AccordionTrigger };\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,cAAc,IAAIC,qBAAqB,QAAQ,uCAAuC;AAC/F,SAASC,WAAW,IAAIC,oBAAoB,QAAQ,UAAU;AAC9D,SAASC,EAAE;AAEX,SAASC,mBAAmB;AAC5B,SAASC,IAAI;AACb,SAASC,uBAAuB;AAOhC,MAAMC,gBAAgB,GAAGA,CAAC;EACtBC,KAAK;EACLC,WAAW;EACXC,OAAO;EACPC,IAAI;EACJC,WAAW,GAAG,IAAI;EAClBC;AACmB,CAAC,KAAK;EACzB;EACA;EACA;EACA,MAAMC,gBAAgB,GAAGhB,KAAK,CAACiB,OAAO,CAAuC,MAAM;IAC/E,OAAO;MACHC,IAAI,EAAE,QAAQ;MACdC,QAAQ,EAAEL,WAAW,GAAG,CAAC,GAAG,CAAC,CAAC;MAAE;MAChCM,SAAS,EAAEC,CAAC,IAAI;QACZ,IAAIA,CAAC,CAACC,GAAG,KAAK,OAAO,IAAID,CAAC,CAACC,GAAG,KAAK,GAAG,EAAE;UACpCD,CAAC,CAACE,cAAc,CAAC,CAAC;UAClBF,CAAC,CAACG,aAAa,CAACC,KAAK,CAAC,CAAC;QAC3B;MACJ;IACJ,CAAC;EACL,CAAC,EAAE,CAACX,WAAW,CAAC,CAAC;EAEjB,oBACId,KAAA,CAAA0B,aAAA,CAACtB,oBAAoB,CAACuB,OAAO;IACzBC,OAAO;IACPC,OAAO,EAAER,CAAC,IAAI,CAACP,WAAW,IAAIO,CAAC,CAACE,cAAc,CAAC,CAAE,CAAC;EAAA,gBAElDvB,KAAA,CAAA0B,aAAA,QAAAI,MAAA,CAAAC,MAAA,KACQf,gBAAgB;IACpBgB,SAAS,EAAE3B,EAAE,CACT,wFAAwF,EACxF,8HAA8H,EAC9H,6BAA6B,EAC7B,yDAAyD,EACzD,sEAAsE,EACtES,WAAW,GAAG,oBAAoB,GAAG,oBACzC;EAAE,IAEDC,SAAS,gBAAGf,KAAA,CAAA0B,aAAA,CAAClB,uBAAuB,MAAE,CAAC,GAAG,IAAI,eAC/CR,KAAA,CAAA0B,aAAA;IACIM,SAAS,EACL;EACH,GAEAnB,IAAI,iBAAIb,KAAA,CAAA0B,aAAA;IAAKM,SAAS,EAAE;EAAY,GAAEnB,IAAU,CAAC,eAClDb,KAAA,CAAA0B,aAAA;IACIM,SAAS,EAAE;EAAgE,gBAE3EhC,KAAA,CAAA0B,aAAA;IACIM,SAAS,EAAE;EAA4D,GAEtEtB,KACA,CAAC,eACNV,KAAA,CAAA0B,aAAA;IAAKM,SAAS,EAAE;EAAsC,GAAErB,WAAiB,CACxE,CAAC,eACNX,KAAA,CAAA0B,aAAA;IAAKM,SAAS,EAAE;EAAsB,GACjCpB,OAAO,EAGPA,OAAO,IAAIE,WAAW,iBAAId,KAAA,CAAA0B,aAAA,CAACpB,mBAAmB,CAAC2B,SAAS,MAAE,CAAC,EAE3DnB,WAAW,iBACRd,KAAA,CAAA0B,aAAA,CAACnB,IAAI;IACD2B,IAAI,EAAE,IAAK;IACXF,SAAS,EAAE,gBAAiB;IAC5BG,KAAK,EAAE,gBAAiB;IACxB,aAAW,sBAAuB;IAClCC,KAAK,EAAE,sBAAuB;IAC9BvB,IAAI,eAAEb,KAAA,CAAA0B,aAAA,CAACxB,qBAAqB,MAAE;EAAE,CACnC,CAEJ,CACJ,CACJ,CACqB,CAAC;AAEvC,CAAC;AAED,SAASO,gBAAgB","ignoreList":[]}
+{"version":3,"file":"Accordion/components/AccordionTrigger.js","sources":["../../../src/Accordion/components/AccordionTrigger.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { ReactComponent as KeyboardArrowDownIcon } from \"@webiny/icons/keyboard_arrow_down.svg\";\nimport { ReactComponent as LockIcon } from \"@webiny/icons/lock.svg\";\nimport { Collapsible as CollapsiblePrimitive } from \"radix-ui\";\nimport { cn } from \"~/utils.js\";\nimport { useAccordionItemProps } from \"./AccordionItem.js\";\nimport { useAccordionProps } from \"./AccordionPropsProvider.js\";\nimport { AccordionItemAction } from \"./AccordionItemAction.js\";\nimport { Icon } from \"~/Icon/index.js\";\nimport { AccordionItemDragHandle } from \"~/Accordion/components/AccordionItemDragHandle.js\";\n\nconst OpenCloseIndicator = () => {\n    return (\n        <Icon\n            size={\"md\"}\n            className={\"transition\"}\n            color={\"neutral-strong\"}\n            data-role={\"open-close-indicator\"}\n            label={\"Open/close indicator\"}\n            icon={<KeyboardArrowDownIcon />}\n        />\n    );\n};\n\nconst AccordionTrigger = () => {\n    const {\n        title,\n        subtitle,\n        description,\n        colorMark,\n        actions,\n        icon,\n        interactive = true,\n        locked,\n        draggable,\n        dragHandleRef\n    } = useAccordionItemProps();\n\n    const accordionProps = useAccordionProps();\n    const openClosedIndicatorPosition = accordionProps.openClosedIndicatorPosition || \"right\";\n    // The following three attributes are required for the trigger to act as a button.\n    // We can't use the default button element here because the content of the trigger\n    // can also contain one or more buttons.\n    const divAsButtonProps = React.useMemo<React.HTMLAttributes<HTMLDivElement>>(() => {\n        return {\n            role: \"button\",\n            tabIndex: interactive ? 0 : -1, // Disable keyboard interaction if not interactive\n            onKeyDown: e => {\n                if (e.key === \"Enter\" || e.key === \" \") {\n                    e.preventDefault();\n                    e.currentTarget.click();\n                }\n            }\n        };\n    }, [interactive]);\n\n    return (\n        <CollapsiblePrimitive.Trigger\n            asChild\n            onClick={e => !interactive && e.preventDefault()} // Prevent clicking if not interactive\n        >\n            <div\n                {...divAsButtonProps}\n                className={cn(\n                    \"group/trigger w-full flex items-center relative min-h-[62px]\",\n                    \"focus-visible:outline-none focus-visible:border-none focus-visible:ring-sm focus-visible:ring-primary-dimmed\",\n                    \"group-[.accordion-variant-container]:rounded-lg\",\n                    \"[&[data-state=open]_[data-role=open-close-indicator]]:rotate-180 border-l-accent\",\n                    interactive ? \"cursor-pointer\" : \"cursor-default\"\n                )}\n            >\n                {draggable ? <AccordionItemDragHandle dragHandleRef={dragHandleRef} /> : null}\n                {colorMark && (\n                    <div\n                        style={{ backgroundColor: colorMark }}\n                        className={\"block w-[4px] h-[48px] rounded-sm ml-sm\"}\n                    />\n                )}\n                <div className={\"w-full flex justify-between items-center px-md py-sm-extra\"}>\n                    {/* Left side: icon or indicator based on position */}\n                    {openClosedIndicatorPosition === \"left\" ? (\n                        <>\n                            {interactive && !locked ? (\n                                <div className={\"mr-md\"}>\n                                    <OpenCloseIndicator />\n                                </div>\n                            ) : null}\n                        </>\n                    ) : (\n                        <>{icon ? <div className={\"mr-md\"}>{icon}</div> : null}</>\n                    )}\n\n                    {/* Center: title, subtitle, description */}\n                    <div className={\"flex flex-col gap-xxs flex-grow text-left\"}>\n                        <div className={\"flex gap-xs\"}>\n                            <div className={\"text-md font-semibold webiny_accordion-item-title\"}>\n                                {title}\n                            </div>\n                            {subtitle && (\n                                <div className={\"text-neutral-muted text-md\"}>{subtitle}</div>\n                            )}\n                        </div>\n\n                        <div className={\"text-sm text-neutral-strong\"}>{description}</div>\n                    </div>\n\n                    {/* Right side: actions and indicator (or locked icon) */}\n                    {openClosedIndicatorPosition === \"right\" ? (\n                        <div className={\"flex gap-xs items-center\"}>\n                            {locked ? (\n                                <Icon label=\"Locked\" icon={<LockIcon />} color={\"neutral-light\"} />\n                            ) : (\n                                <>\n                                    {actions}\n                                    {/* No need to show the separator if there are no actions and the item is not interactive. */}\n                                    {actions && interactive ? (\n                                        <AccordionItemAction.Separator />\n                                    ) : null}\n                                    {interactive ? <OpenCloseIndicator /> : null}\n                                </>\n                            )}\n                        </div>\n                    ) : (\n                        <div className={\"flex gap-xs items-center\"}>\n                            {locked ? (\n                                <Icon label=\"Locked\" icon={<LockIcon />} color={\"neutral-light\"} />\n                            ) : (\n                                <>{actions}</>\n                            )}\n                        </div>\n                    )}\n                </div>\n            </div>\n        </CollapsiblePrimitive.Trigger>\n    );\n};\n\nexport { AccordionTrigger };\n"],"names":["OpenCloseIndicator","Icon","KeyboardArrowDownIcon","AccordionTrigger","title","subtitle","description","colorMark","actions","icon","interactive","locked","draggable","dragHandleRef","useAccordionItemProps","accordionProps","useAccordionProps","openClosedIndicatorPosition","divAsButtonProps","React","e","CollapsiblePrimitive","cn","AccordionItemDragHandle","LockIcon","AccordionItemAction"],"mappings":";;;;;;;;;;AAWA,MAAMA,qBAAqB,IAChB,WAAP,GACI,sCAACC,MAAIA;QACD,MAAM;QACN,WAAW;QACX,OAAO;QACP,aAAW;QACX,OAAO;QACP,oBAAM,sCAACC,gBAAqBA;;AAKxC,MAAMC,mBAAmB;IACrB,MAAM,EACFC,KAAK,EACLC,QAAQ,EACRC,WAAW,EACXC,SAAS,EACTC,OAAO,EACPC,IAAI,EACJC,cAAc,IAAI,EAClBC,MAAM,EACNC,SAAS,EACTC,aAAa,EAChB,GAAGC;IAEJ,MAAMC,iBAAiBC;IACvB,MAAMC,8BAA8BF,eAAe,2BAA2B,IAAI;IAIlF,MAAMG,mBAAmBC,wBAAAA,OAAa,CAAuC,IAClE;YACH,MAAM;YACN,UAAUT,cAAc,IAAI;YAC5B,WAAWU,CAAAA;gBACP,IAAIA,AAAU,YAAVA,EAAE,GAAG,IAAgBA,AAAU,QAAVA,EAAE,GAAG,EAAU;oBACpCA,EAAE,cAAc;oBAChBA,EAAE,aAAa,CAAC,KAAK;gBACzB;YACJ;QACJ,IACD;QAACV;KAAY;IAEhB,OAAO,WAAP,GACI,sCAACW,YAAAA,OAA4B;QACzB;QACA,SAASD,CAAAA,IAAK,CAACV,eAAeU,EAAE,cAAc;qBAE9C,sCAAC;QACI,GAAGF,gBAAgB;QACpB,WAAWI,GACP,gEACA,gHACA,mDACA,oFACAZ,cAAc,mBAAmB;OAGpCE,YAAY,WAAZA,GAAY,sCAACW,yBAAuBA;QAAC,eAAeV;SAAoB,MACxEN,aAAa,WAAbA,GACG,sCAAC;QACG,OAAO;YAAE,iBAAiBA;QAAU;QACpC,WAAW;sBAGnB,sCAAC;QAAI,WAAW;OAEXU,AAAgC,WAAhCA,8BAAyC,WAAT,GAC7B,8EACKP,eAAe,CAACC,SAAS,WAATA,GACb,sCAAC;QAAI,WAAW;qBACZ,sCAACX,oBAAkBA,SAEvB,sBAGR,8EAAGS,OAAO,WAAPA,GAAO,sCAAC;QAAI,WAAW;OAAUA,QAAc,qBAItD,sCAAC;QAAI,WAAW;qBACZ,sCAAC;QAAI,WAAW;qBACZ,sCAAC;QAAI,WAAW;OACXL,QAEJC,YAAY,WAAZA,GACG,sCAAC;QAAI,WAAW;OAA+BA,YAAAA,WAAAA,GAIvD,sCAAC;QAAI,WAAW;OAAgCC,eAInDW,AAAgC,YAAhCA,8BAA0C,WAAV,GAC7B,sCAAC;QAAI,WAAW;OACXN,SAAS,WAATA,GACG,sCAACV,MAAIA;QAAC,OAAM;QAAS,oBAAM,sCAACuB,yBAAQA;QAAK,OAAO;uBAEhD,8EACKhB,SAEAA,WAAWE,cAAc,WAAdA,GACR,sCAACe,oBAAoB,SAAS,UAC9B,MACHf,cAAc,WAAdA,GAAc,sCAACV,oBAAkBA,QAAM,uBAKpD,sCAAC;QAAI,WAAW;OACXW,SAAS,WAATA,GACG,sCAACV,MAAIA;QAAC,OAAM;QAAS,oBAAM,sCAACuB,yBAAQA;QAAK,OAAO;uBAEhD,8EAAGhB;AAQnC"}

package/Accordion/index.d.ts

@@ -1 +1 @@
-export * from "./Accordion";
+export * from "./Accordion.js";

package/Accordion/index.js

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

package/AdminUiProvider/AdminUiProvider.d.ts

@@ -0,0 +1,22 @@
+import React from "react";
+import { type LinkComponent } from "../index.js";
+import type { FileUrlFormatter } from "./FileUrlFormatter.js";
+export type CompileMarkdown = (markdown: React.ReactNode) => React.ReactNode;
+export interface AdminUiContextValue {
+    linkComponent: LinkComponent;
+    compileMarkdown: CompileMarkdown;
+    fileUrlFormatter: FileUrlFormatter;
+}
+export declare const AdminUiContext: React.Context<AdminUiContextValue | undefined>;
+interface MarkdownCompiler {
+    (markdown: string): React.ReactNode;
+}
+export interface AdminUiProviderProps {
+    linkComponent?: LinkComponent;
+    markdownCompiler?: MarkdownCompiler;
+    fileUrlFormatter?: FileUrlFormatter;
+    children: React.ReactNode;
+}
+export declare const AdminUiProvider: ({ children, ...props }: AdminUiProviderProps) => React.JSX.Element;
+export declare const useAdminUi: () => AdminUiContextValue;
+export {};

package/AdminUiProvider/AdminUiProvider.js

@@ -0,0 +1,54 @@
+import react, { useCallback, useEffect, useMemo, useRef } from "react";
+import { Toast } from "../Toast/index.js";
+import { Tooltip } from "../Tooltip/index.js";
+import { DefaultLinkComponent } from "../index.js";
+const passthrough = (markdown)=>markdown;
+const passthroughFileUrlFormatter = {
+    format (_url) {}
+};
+const AdminUiContext = /*#__PURE__*/ react.createContext(void 0);
+const AdminUiProvider = ({ children, ...props })=>{
+    const linkComponent = props.linkComponent ?? DefaultLinkComponent;
+    const markdownCompiler = props.markdownCompiler ?? passthrough;
+    const fileUrlFormatter = props.fileUrlFormatter ?? passthroughFileUrlFormatter;
+    const cacheRef = useRef(new Map());
+    useEffect(()=>{
+        cacheRef.current.clear();
+    }, [
+        markdownCompiler
+    ]);
+    const compileMarkdown = useCallback((markdown)=>{
+        if (!markdownCompiler) return markdown;
+        if (/*#__PURE__*/ react.isValidElement(markdown)) return markdown;
+        if ("string" == typeof markdown) {
+            const cached = cacheRef.current.get(markdown);
+            if (void 0 !== cached) return cached;
+            const compiled = markdownCompiler(markdown);
+            cacheRef.current.set(markdown, compiled);
+            return compiled;
+        }
+        return markdown;
+    }, [
+        markdownCompiler
+    ]);
+    const contextValue = useMemo(()=>({
+            linkComponent,
+            compileMarkdown,
+            fileUrlFormatter
+        }), [
+        linkComponent,
+        compileMarkdown,
+        fileUrlFormatter
+    ]);
+    return /*#__PURE__*/ react.createElement(AdminUiContext.Provider, {
+        value: contextValue
+    }, /*#__PURE__*/ react.createElement(Tooltip.Provider, null, children), /*#__PURE__*/ react.createElement(Toast.Provider, null));
+};
+const useAdminUi = ()=>{
+    const context = react.useContext(AdminUiContext);
+    if (!context) throw new Error("AdminUiProvider is missing from the component tree.");
+    return context;
+};
+export { AdminUiContext, AdminUiProvider, useAdminUi };
+
+//# sourceMappingURL=AdminUiProvider.js.map

package/AdminUiProvider/AdminUiProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AdminUiProvider/AdminUiProvider.js","sources":["../../src/AdminUiProvider/AdminUiProvider.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useRef } from \"react\";\nimport { Toast } from \"~/Toast/index.js\";\nimport { Tooltip } from \"~/Tooltip/index.js\";\nimport { type LinkComponent, DefaultLinkComponent } from \"~/index.js\";\nimport type { FileUrlFormatter } from \"./FileUrlFormatter.js\";\n\nexport type CompileMarkdown = (markdown: React.ReactNode) => React.ReactNode;\n\nexport interface AdminUiContextValue {\n    linkComponent: LinkComponent;\n    compileMarkdown: CompileMarkdown;\n    fileUrlFormatter: FileUrlFormatter;\n}\n\nconst passthrough = (markdown: string) => markdown;\n\nconst passthroughFileUrlFormatter: FileUrlFormatter = {\n    format(_url: URL): void {\n        // passthrough — no-op\n    }\n};\n\nexport const AdminUiContext = React.createContext<AdminUiContextValue | undefined>(undefined);\n\ninterface MarkdownCompiler {\n    (markdown: string): React.ReactNode;\n}\n\nexport interface AdminUiProviderProps {\n    linkComponent?: LinkComponent;\n    markdownCompiler?: MarkdownCompiler;\n    fileUrlFormatter?: FileUrlFormatter;\n    children: React.ReactNode;\n}\n\nexport const AdminUiProvider = ({ children, ...props }: AdminUiProviderProps) => {\n    const linkComponent = props.linkComponent ?? DefaultLinkComponent;\n    const markdownCompiler = props.markdownCompiler ?? passthrough;\n    const fileUrlFormatter = props.fileUrlFormatter ?? passthroughFileUrlFormatter;\n\n    // Cache to store compiled markdown results\n    const cacheRef = useRef(new Map<string, React.ReactNode>());\n\n    // Clear cache when markdownCompiler changes\n    useEffect(() => {\n        cacheRef.current.clear();\n    }, [markdownCompiler]);\n\n    const compileMarkdown = useCallback(\n        (markdown: React.ReactNode) => {\n            if (!markdownCompiler) {\n                return markdown;\n            }\n\n            if (React.isValidElement(markdown)) {\n                return markdown;\n            }\n\n            if (typeof markdown === \"string\") {\n                // Check cache first\n                const cached = cacheRef.current.get(markdown);\n                if (cached !== undefined) {\n                    return cached;\n                }\n\n                // Compile and cache\n                const compiled = markdownCompiler(markdown);\n                cacheRef.current.set(markdown, compiled);\n                return compiled;\n            }\n\n            return markdown;\n        },\n        [markdownCompiler]\n    );\n\n    const contextValue = useMemo(\n        () => ({ linkComponent, compileMarkdown, fileUrlFormatter }),\n        [linkComponent, compileMarkdown, fileUrlFormatter]\n    );\n\n    return (\n        <AdminUiContext.Provider value={contextValue}>\n            <Tooltip.Provider>{children}</Tooltip.Provider>\n            <Toast.Provider />\n        </AdminUiContext.Provider>\n    );\n};\n\nexport const useAdminUi = () => {\n    const context = React.useContext(AdminUiContext);\n    if (!context) {\n        throw new Error(\"AdminUiProvider is missing from the component tree.\");\n    }\n    return context;\n};\n"],"names":["passthrough","markdown","passthroughFileUrlFormatter","_url","AdminUiContext","React","undefined","AdminUiProvider","children","props","linkComponent","DefaultLinkComponent","markdownCompiler","fileUrlFormatter","cacheRef","useRef","Map","useEffect","compileMarkdown","useCallback","cached","compiled","contextValue","useMemo","Tooltip","Toast","useAdminUi","context","Error"],"mappings":";;;;AAcA,MAAMA,cAAc,CAACC,WAAqBA;AAE1C,MAAMC,8BAAgD;IAClD,QAAOC,IAAS,GAEhB;AACJ;AAEO,MAAMC,iBAAiB,WAAHA,GAAGC,MAAAA,aAAmB,CAAkCC;AAa5E,MAAMC,kBAAkB,CAAC,EAAEC,QAAQ,EAAE,GAAGC,OAA6B;IACxE,MAAMC,gBAAgBD,MAAM,aAAa,IAAIE;IAC7C,MAAMC,mBAAmBH,MAAM,gBAAgB,IAAIT;IACnD,MAAMa,mBAAmBJ,MAAM,gBAAgB,IAAIP;IAGnD,MAAMY,WAAWC,OAAO,IAAIC;IAG5BC,UAAU;QACNH,SAAS,OAAO,CAAC,KAAK;IAC1B,GAAG;QAACF;KAAiB;IAErB,MAAMM,kBAAkBC,YACpB,CAAClB;QACG,IAAI,CAACW,kBACD,OAAOX;QAGX,IAAI,WAAJ,GAAII,MAAAA,cAAoB,CAACJ,WACrB,OAAOA;QAGX,IAAI,AAAoB,YAApB,OAAOA,UAAuB;YAE9B,MAAMmB,SAASN,SAAS,OAAO,CAAC,GAAG,CAACb;YACpC,IAAImB,AAAWd,WAAXc,QACA,OAAOA;YAIX,MAAMC,WAAWT,iBAAiBX;YAClCa,SAAS,OAAO,CAAC,GAAG,CAACb,UAAUoB;YAC/B,OAAOA;QACX;QAEA,OAAOpB;IACX,GACA;QAACW;KAAiB;IAGtB,MAAMU,eAAeC,QACjB,IAAO;YAAEb;YAAeQ;YAAiBL;QAAiB,IAC1D;QAACH;QAAeQ;QAAiBL;KAAiB;IAGtD,OAAO,WAAP,GACI,oBAACT,eAAe,QAAQ;QAAC,OAAOkB;qBAC5B,oBAACE,QAAQ,QAAQ,QAAEhB,WAAAA,WAAAA,GACnB,oBAACiB,MAAM,QAAQ;AAG3B;AAEO,MAAMC,aAAa;IACtB,MAAMC,UAAUtB,MAAAA,UAAgB,CAACD;IACjC,IAAI,CAACuB,SACD,MAAM,IAAIC,MAAM;IAEpB,OAAOD;AACX"}

package/AdminUiProvider/FileUrlFormatter.d.ts

@@ -0,0 +1,7 @@
+export interface FileUrlParams {
+    width?: number;
+    [key: string]: unknown;
+}
+export interface FileUrlFormatter {
+    format(url: URL, params?: FileUrlParams): void;
+}

package/AdminUiProvider/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./AdminUiProvider.js";
+export * from "./FileUrlFormatter.js";

package/AdminUiProvider/index.js

@@ -0,0 +1,2 @@
+export * from "./AdminUiProvider.js";
+export * from "./FileUrlFormatter.js";

package/Alert/Alert.d.ts

@@ -1,68 +1,73 @@
 import * as React from "react";
-import { type VariantProps } from "../utils";
-import { type ButtonProps } from "../Button";
+import { type VariantProps } from "../utils.js";
+import { type ButtonProps } from "../Button/index.js";
 declare const alertVariants: (props?: ({
-    type?: "info" | "success" | "warning" | "danger" | null | undefined;
+    type?: "danger" | "info" | "success" | "warning" | null | undefined;
     variant?: "strong" | "subtle" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface AlertProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof alertVariants> {
     showCloseButton?: boolean;
+    icon?: React.ReactElement | null;
     onClose?: () => void;
     actions?: React.ReactElement<typeof AlertAction>;
+    swatchColor?: string;
+    swatchColorIcon?: boolean;
 }
-declare const AlertAction: ((props: ButtonProps) => React.JSX.Element) & {
-    original: (props: ButtonProps) => React.JSX.Element;
+declare const AlertActionBase: (props: ButtonProps) => React.JSX.Element;
+declare const AlertAction: typeof AlertActionBase & {
+    original: typeof AlertActionBase;
     originalName: string;
     displayName: string;
 } & {
-    original: ((props: ButtonProps) => React.JSX.Element) & {
-        original: (props: ButtonProps) => React.JSX.Element;
+    original: typeof AlertActionBase & {
+        original: typeof AlertActionBase;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<((props: ButtonProps) => React.JSX.Element) & {
-        original: (props: ButtonProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<typeof AlertActionBase & {
+        original: typeof AlertActionBase;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;
 };
-declare const Alert: (({ className, type, variant, showCloseButton, onClose, actions, children, ...props }: AlertProps) => React.JSX.Element) & {
-    original: ({ className, type, variant, showCloseButton, onClose, actions, children, ...props }: AlertProps) => React.JSX.Element;
+declare const AlertBase: (props: AlertProps) => React.JSX.Element;
+declare const Alert: typeof AlertBase & {
+    original: typeof AlertBase;
     originalName: string;
     displayName: string;
 } & {
-    original: (({ className, type, variant, showCloseButton, onClose, actions, children, ...props }: AlertProps) => React.JSX.Element) & {
-        original: ({ className, type, variant, showCloseButton, onClose, actions, children, ...props }: AlertProps) => React.JSX.Element;
+    original: typeof AlertBase & {
+        original: typeof AlertBase;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ className, type, variant, showCloseButton, onClose, actions, children, ...props }: AlertProps) => React.JSX.Element) & {
-        original: ({ className, type, variant, showCloseButton, onClose, actions, children, ...props }: AlertProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<typeof AlertBase & {
+        original: typeof AlertBase;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;
 } & {
-    Action: ((props: ButtonProps) => React.JSX.Element) & {
-        original: (props: ButtonProps) => React.JSX.Element;
+    Action: typeof AlertActionBase & {
+        original: typeof AlertActionBase;
         originalName: string;
         displayName: string;
     } & {
-        original: ((props: ButtonProps) => React.JSX.Element) & {
-            original: (props: ButtonProps) => React.JSX.Element;
+        original: typeof AlertActionBase & {
+            original: typeof AlertActionBase;
             originalName: string;
             displayName: string;
         };
         originalName: string;
         displayName: string;
     } & {
-        createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<((props: ButtonProps) => React.JSX.Element) & {
-            original: (props: ButtonProps) => React.JSX.Element;
+        createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<typeof AlertActionBase & {
+            original: typeof AlertActionBase;
             originalName: string;
             displayName: string;
         }>) => (props: unknown) => React.JSX.Element;