@webiny/app-website-builder 6.4.12-beta.5 → 6.5.0-beta.0

package/inputRenderers/LexicalInput/TypographyDropDown.js.map

@@ -1 +1 @@
-{"version":3,"file":"inputRenderers/LexicalInput/TypographyDropDown.js","sources":["../../../src/inputRenderers/LexicalInput/TypographyDropDown.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport { $getNearestNodeOfType } from \"@lexical/utils\";\nimport {\n    DropDown,\n    DropDownItem,\n    useCurrentSelection,\n    useCurrentElement,\n    useTypographyAction\n} from \"@webiny/lexical-editor\";\nimport {\n    $isHeadingNode,\n    $isParagraphNode,\n    $isQuoteNode,\n    $isListNode,\n    ListNode\n} from \"@webiny/lexical-nodes\";\nimport { useWebsiteBuilderTheme } from \"~/BaseEditor/components/index.js\";\nimport type { TypographyStyle } from \"@webiny/website-builder-sdk/types/WebsiteBuilderTheme.js\";\n\nexport const TypographyDropDown = () => {\n    const { value, applyTypography } = useTypographyAction();\n    const { theme } = useWebsiteBuilderTheme();\n    const [styles, setStyles] = useState<TypographyStyle[]>([]);\n    const { element } = useCurrentElement();\n    const { rangeSelection } = useCurrentSelection();\n\n    const getAllTextStyles = (): TypographyStyle[] => {\n        if (!theme?.typography) {\n            return [];\n        }\n        const headingsStyles = theme.typography?.headings || [];\n        const paragraphStyles = theme.typography?.paragraphs || [];\n        return [...headingsStyles, ...paragraphStyles];\n    };\n\n    useEffect(() => {\n        // In static toolbar typography, styles always need to be visible.\n        if (theme?.typography) {\n            setStyles(getAllTextStyles());\n        }\n    }, [theme?.typography]);\n\n    const getListStyles = (tag: string): TypographyStyle[] => {\n        const listStyles = theme?.typography.lists?.filter(x => x.tag === tag) || [];\n        if (listStyles.length > 0) {\n            return listStyles;\n        }\n\n        const fallbackTag = tag === \"ul\" ? \"ol\" : \"ul\";\n        return theme?.typography.lists?.filter(x => x.tag === fallbackTag) || [];\n    };\n\n    useEffect(() => {\n        if (!element || !rangeSelection) {\n            return;\n        }\n\n        if ($isParagraphNode(element) || $isHeadingNode(element)) {\n            setStyles(getAllTextStyles());\n        } else if ($isListNode(element)) {\n            let type;\n            try {\n                const anchorNode = rangeSelection.anchor.getNode();\n                const parentList = $getNearestNodeOfType<ListNode>(anchorNode, ListNode);\n                if (parentList) {\n                    type = parentList.getListType();\n                }\n            } catch {\n                type = element.getListType();\n            }\n\n            if (type === \"bullet\") {\n                setStyles(getListStyles(\"ul\"));\n            } else {\n                setStyles(getListStyles(\"ol\"));\n            }\n        } else if ($isQuoteNode(element)) {\n            setStyles(theme?.typography?.quotes || []);\n        } else {\n            setStyles([]);\n        }\n    }, [element]);\n\n    return (\n        <>\n            {!!styles?.length ? (\n                <DropDown\n                    buttonClassName=\"toolbar-item typography-dropdown\"\n                    buttonAriaLabel={\"Typography formatting options\"}\n                    buttonLabel={value?.label || \"Typography\"}\n                    stopCloseOnClickSelf={true}\n                    disabled={false}\n                    showScroll={true}\n                >\n                    {styles?.map(option => (\n                        <DropDownItem\n                            className={`item typography-item ${\n                                value?.id === option.id ? \"active dropdown-item-active\" : \"\"\n                            }`}\n                            onClick={() => applyTypography(option)}\n                            key={option.id}\n                        >\n                            <span className=\"text\">{option.label}</span>\n                        </DropDownItem>\n                    ))}\n                </DropDown>\n            ) : null}\n        </>\n    );\n};\n"],"names":["TypographyDropDown","value","applyTypography","useTypographyAction","theme","useWebsiteBuilderTheme","styles","setStyles","useState","element","useCurrentElement","rangeSelection","useCurrentSelection","getAllTextStyles","headingsStyles","paragraphStyles","useEffect","getListStyles","tag","listStyles","x","fallbackTag","$isParagraphNode","$isHeadingNode","$isListNode","type","anchorNode","parentList","$getNearestNodeOfType","ListNode","$isQuoteNode","DropDown","option","DropDownItem"],"mappings":";;;;;AAmBO,MAAMA,qBAAqB;IAC9B,MAAM,EAAEC,KAAK,EAAEC,eAAe,EAAE,GAAGC;IACnC,MAAM,EAAEC,KAAK,EAAE,GAAGC;IAClB,MAAM,CAACC,QAAQC,UAAU,GAAGC,SAA4B,EAAE;IAC1D,MAAM,EAAEC,OAAO,EAAE,GAAGC;IACpB,MAAM,EAAEC,cAAc,EAAE,GAAGC;IAE3B,MAAMC,mBAAmB;QACrB,IAAI,CAACT,OAAO,YACR,OAAO,EAAE;QAEb,MAAMU,iBAAiBV,MAAM,UAAU,EAAE,YAAY,EAAE;QACvD,MAAMW,kBAAkBX,MAAM,UAAU,EAAE,cAAc,EAAE;QAC1D,OAAO;eAAIU;eAAmBC;SAAgB;IAClD;IAEAC,UAAU;QAEN,IAAIZ,OAAO,YACPG,UAAUM;IAElB,GAAG;QAACT,OAAO;KAAW;IAEtB,MAAMa,gBAAgB,CAACC;QACnB,MAAMC,aAAaf,OAAO,WAAW,OAAO,OAAOgB,CAAAA,IAAKA,EAAE,GAAG,KAAKF,QAAQ,EAAE;QAC5E,IAAIC,WAAW,MAAM,GAAG,GACpB,OAAOA;QAGX,MAAME,cAAcH,AAAQ,SAARA,MAAe,OAAO;QAC1C,OAAOd,OAAO,WAAW,OAAO,OAAOgB,CAAAA,IAAKA,EAAE,GAAG,KAAKC,gBAAgB,EAAE;IAC5E;IAEAL,UAAU;QACN,IAAI,CAACP,WAAW,CAACE,gBACb;QAGJ,IAAIW,iBAAiBb,YAAYc,eAAed,UAC5CF,UAAUM;aACP,IAAIW,YAAYf,UAAU;YAC7B,IAAIgB;YACJ,IAAI;gBACA,MAAMC,aAAaf,eAAe,MAAM,CAAC,OAAO;gBAChD,MAAMgB,aAAaC,sBAAgCF,YAAYG;gBAC/D,IAAIF,YACAF,OAAOE,WAAW,WAAW;YAErC,EAAE,OAAM;gBACJF,OAAOhB,QAAQ,WAAW;YAC9B;YAEa,aAATgB,OACAlB,UAAUU,cAAc,SAExBV,UAAUU,cAAc;QAEhC,OAAWa,aAAarB,WACpBF,UAAUH,OAAO,YAAY,UAAU,EAAE,IAEzCG,UAAU,EAAE;IAEpB,GAAG;QAACE;KAAQ;IAEZ,OAAO,WAAP,GACI,0CACK,AAAEH,QAAQ,SAAS,WAAT,GACP,oBAACyB,UAAQA;QACL,iBAAgB;QAChB,iBAAiB;QACjB,aAAa9B,OAAO,SAAS;QAC7B,sBAAsB;QACtB,UAAU;QACV,YAAY;OAEXK,QAAQ,IAAI0B,CAAAA,SAAAA,WAAAA,GACT,oBAACC,cAAYA;YACT,WAAW,CAAC,qBAAqB,EAC7BhC,OAAO,OAAO+B,OAAO,EAAE,GAAG,gCAAgC,IAC5D;YACF,SAAS,IAAM9B,gBAAgB8B;YAC/B,KAAKA,OAAO,EAAE;yBAEd,oBAAC;YAAK,WAAU;WAAQA,OAAO,KAAK,OAIhD;AAGhB"}
+{"version":3,"file":"inputRenderers/LexicalInput/TypographyDropDown.js","sources":["../../../src/inputRenderers/LexicalInput/TypographyDropDown.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport { $getNearestNodeOfType } from \"@lexical/utils\";\nimport {\n    DropDown,\n    DropDownItem,\n    useCurrentSelection,\n    useCurrentElement,\n    useTypographyAction\n} from \"@webiny/lexical-editor\";\nimport {\n    $isHeadingNode,\n    $isParagraphNode,\n    $isQuoteNode,\n    $isListNode,\n    ListNode\n} from \"@webiny/lexical-nodes\";\nimport { useWebsiteBuilderTheme } from \"~/BaseEditor/components/index.js\";\nimport type { TypographyStyle } from \"@webiny/website-builder-sdk/types/WebsiteBuilderTheme.js\";\n\nexport const TypographyDropDown = () => {\n    const { value, applyTypography } = useTypographyAction();\n    const { theme } = useWebsiteBuilderTheme();\n    const [styles, setStyles] = useState<TypographyStyle[]>([]);\n    const { element } = useCurrentElement();\n    const { rangeSelection } = useCurrentSelection();\n\n    const getAllTextStyles = (): TypographyStyle[] => {\n        if (!theme?.typography) {\n            return [];\n        }\n        const headingsStyles = theme.typography?.headings || [];\n        const paragraphStyles = theme.typography?.paragraphs || [];\n        return [...headingsStyles, ...paragraphStyles];\n    };\n\n    useEffect(() => {\n        // In static toolbar typography, styles always need to be visible.\n        if (theme?.typography) {\n            setStyles(getAllTextStyles());\n        }\n    }, [theme?.typography]);\n\n    const getListStyles = (tag: string): TypographyStyle[] => {\n        const listStyles = theme?.typography.lists?.filter(x => x.tag === tag) || [];\n        if (listStyles.length > 0) {\n            return listStyles;\n        }\n\n        const fallbackTag = tag === \"ul\" ? \"ol\" : \"ul\";\n        return theme?.typography.lists?.filter(x => x.tag === fallbackTag) || [];\n    };\n\n    useEffect(() => {\n        if (!element || !rangeSelection) {\n            return;\n        }\n\n        if ($isParagraphNode(element) || $isHeadingNode(element)) {\n            setStyles(getAllTextStyles());\n        } else if ($isListNode(element)) {\n            let type;\n            try {\n                const anchorNode = rangeSelection.anchor.getNode();\n                const parentList = $getNearestNodeOfType<ListNode>(anchorNode, ListNode);\n                if (parentList) {\n                    type = parentList.getListType();\n                }\n            } catch {\n                type = element.getListType();\n            }\n\n            if (type === \"bullet\") {\n                setStyles(getListStyles(\"ul\"));\n            } else {\n                setStyles(getListStyles(\"ol\"));\n            }\n        } else if ($isQuoteNode(element)) {\n            setStyles(theme?.typography?.quotes || []);\n        } else {\n            setStyles([]);\n        }\n    }, [element]);\n\n    return (\n        <>\n            {!!styles?.length ? (\n                <DropDown\n                    buttonClassName=\"toolbar-item typography-dropdown block-type-dropdown\"\n                    buttonAriaLabel={\"Typography formatting options\"}\n                    buttonLabel={value?.label || \"Typography\"}\n                    stopCloseOnClickSelf={true}\n                    disabled={false}\n                    showScroll={true}\n                >\n                    {styles?.map(option => (\n                        <DropDownItem\n                            className=\"item typography-item\"\n                            selected={value?.id === option.id}\n                            onClick={() => applyTypography(option)}\n                            key={option.id}\n                        >\n                            <span className=\"text\">{option.label}</span>\n                        </DropDownItem>\n                    ))}\n                </DropDown>\n            ) : null}\n        </>\n    );\n};\n"],"names":["TypographyDropDown","value","applyTypography","useTypographyAction","theme","useWebsiteBuilderTheme","styles","setStyles","useState","element","useCurrentElement","rangeSelection","useCurrentSelection","getAllTextStyles","headingsStyles","paragraphStyles","useEffect","getListStyles","tag","listStyles","x","fallbackTag","$isParagraphNode","$isHeadingNode","$isListNode","type","anchorNode","parentList","$getNearestNodeOfType","ListNode","$isQuoteNode","DropDown","option","DropDownItem"],"mappings":";;;;;AAmBO,MAAMA,qBAAqB;IAC9B,MAAM,EAAEC,KAAK,EAAEC,eAAe,EAAE,GAAGC;IACnC,MAAM,EAAEC,KAAK,EAAE,GAAGC;IAClB,MAAM,CAACC,QAAQC,UAAU,GAAGC,SAA4B,EAAE;IAC1D,MAAM,EAAEC,OAAO,EAAE,GAAGC;IACpB,MAAM,EAAEC,cAAc,EAAE,GAAGC;IAE3B,MAAMC,mBAAmB;QACrB,IAAI,CAACT,OAAO,YACR,OAAO,EAAE;QAEb,MAAMU,iBAAiBV,MAAM,UAAU,EAAE,YAAY,EAAE;QACvD,MAAMW,kBAAkBX,MAAM,UAAU,EAAE,cAAc,EAAE;QAC1D,OAAO;eAAIU;eAAmBC;SAAgB;IAClD;IAEAC,UAAU;QAEN,IAAIZ,OAAO,YACPG,UAAUM;IAElB,GAAG;QAACT,OAAO;KAAW;IAEtB,MAAMa,gBAAgB,CAACC;QACnB,MAAMC,aAAaf,OAAO,WAAW,OAAO,OAAOgB,CAAAA,IAAKA,EAAE,GAAG,KAAKF,QAAQ,EAAE;QAC5E,IAAIC,WAAW,MAAM,GAAG,GACpB,OAAOA;QAGX,MAAME,cAAcH,AAAQ,SAARA,MAAe,OAAO;QAC1C,OAAOd,OAAO,WAAW,OAAO,OAAOgB,CAAAA,IAAKA,EAAE,GAAG,KAAKC,gBAAgB,EAAE;IAC5E;IAEAL,UAAU;QACN,IAAI,CAACP,WAAW,CAACE,gBACb;QAGJ,IAAIW,iBAAiBb,YAAYc,eAAed,UAC5CF,UAAUM;aACP,IAAIW,YAAYf,UAAU;YAC7B,IAAIgB;YACJ,IAAI;gBACA,MAAMC,aAAaf,eAAe,MAAM,CAAC,OAAO;gBAChD,MAAMgB,aAAaC,sBAAgCF,YAAYG;gBAC/D,IAAIF,YACAF,OAAOE,WAAW,WAAW;YAErC,EAAE,OAAM;gBACJF,OAAOhB,QAAQ,WAAW;YAC9B;YAEa,aAATgB,OACAlB,UAAUU,cAAc,SAExBV,UAAUU,cAAc;QAEhC,OAAWa,aAAarB,WACpBF,UAAUH,OAAO,YAAY,UAAU,EAAE,IAEzCG,UAAU,EAAE;IAEpB,GAAG;QAACE;KAAQ;IAEZ,OAAO,WAAP,GACI,0CACK,AAAEH,QAAQ,SAAS,WAAT,GACP,oBAACyB,UAAQA;QACL,iBAAgB;QAChB,iBAAiB;QACjB,aAAa9B,OAAO,SAAS;QAC7B,sBAAsB;QACtB,UAAU;QACV,YAAY;OAEXK,QAAQ,IAAI0B,CAAAA,SAAAA,WAAAA,GACT,oBAACC,cAAYA;YACT,WAAU;YACV,UAAUhC,OAAO,OAAO+B,OAAO,EAAE;YACjC,SAAS,IAAM9B,gBAAgB8B;YAC/B,KAAKA,OAAO,EAAE;yBAEd,oBAAC;YAAK,WAAU;WAAQA,OAAO,KAAK,OAIhD;AAGhB"}

package/inputRenderers/LexicalInput/wbStaticToolbar.css

@@ -1,11 +1,19 @@
+/*
+ * Mirrors @webiny/lexical-editor's StaticToolbar.css, scoped to `.wb-static-toolbar`.
+ * The dropdown menu (`.lexical-dropdown`) is styled by the shared file (always imported),
+ * so only the toolbar rules + website-builder-only bits live here.
+ */
 .wb-static-toolbar {
   display: flex;
   position: relative;
   padding: 4px;
   vertical-align: middle;
-  border: 1px solid #eee;
+  border: 1px solid var(--border-color-neutral-muted);
+  /* No divider between toolbar and body: the body carries the bottom border. */
+  border-bottom: none;
+  border-radius: var(--radius-md) var(--radius-md) 0 0;
   will-change: transform;
-  background: #fff;
+  background: var(--color-neutral-base);
   flex-wrap: wrap;
   z-index: 1;
 }
@@ -13,8 +21,10 @@
 .wb-static-toolbar button.popup-item {
   border: 0;
   display: flex;
-  background: #fff;
-  border-radius: 10px;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border-radius: var(--radius-md);
   padding: 8px;
   cursor: pointer;
   vertical-align: middle;
@@ -28,43 +38,33 @@
   margin-right: 2px;
 }
 
-.wb-static-toolbar button.popup-item i.format {
-  background-size: contain;
-  display: inline-block;
-  height: 18px;
-  width: 18px;
-  margin-top: 2px;
-  vertical-align: -0.25em;
+.wb-static-toolbar button.popup-item .format {
   display: flex;
-}
-
-.wb-static-toolbar button.popup-item:disabled i.format {
-  opacity: 0.2;
+  height: 16px;
+  width: 16px;
+  flex-shrink: 0;
 }
 
 .wb-static-toolbar button.popup-item.active {
-  background-color: rgba(223, 232, 250, 0.3);
-}
-
-.wb-static-toolbar button.popup-item.active i {
-  opacity: 1;
+  background-color: var(--color-primary-subtle);
 }
 
 .wb-static-toolbar .popup-item:hover:not([disabled]) {
-  background-color: #eee;
+  /* Matches admin-ui ghost IconButton hover (bg-neutral-dark/5). */
+  background-color: color-mix(in oklab, var(--color-neutral-dark) 5%, transparent);
 }
 
 .wb-static-toolbar select.popup-item {
   border: 0;
   display: flex;
-  border-radius: 10px;
+  border-radius: var(--radius-md);
   padding: 8px;
   vertical-align: middle;
   -webkit-appearance: none;
   -moz-appearance: none;
   width: 70px;
   font-size: 14px;
-  color: #777;
+  color: var(--text-color-neutral-strong);
   text-overflow: ellipsis;
 }
 
@@ -76,12 +76,11 @@
 .wb-static-toolbar .popup-item .text {
   display: flex;
   line-height: 20px;
-  width: 200px;
+  width: 70px;
   vertical-align: middle;
   font-size: 14px;
-  color: #777;
+  color: var(--text-color-neutral-strong);
   text-overflow: ellipsis;
-  width: 70px;
   overflow: hidden;
   height: 20px;
   text-align: left;
@@ -89,25 +88,20 @@
 
 .wb-static-toolbar .popup-item .icon {
   display: flex;
-  width: 20px;
-  height: 20px;
+  width: 16px;
+  height: 16px;
   user-select: none;
-  line-height: 16px;
-  background-size: contain;
 }
 
-.wb-static-toolbar i.chevron-down {
-  margin-top: 3px;
+.wb-static-toolbar .chevron-down {
   width: 16px;
   height: 16px;
   display: flex;
+  flex-shrink: 0;
   user-select: none;
 }
 
-.wb-static-toolbar i.chevron-down.inside {
-  width: 16px;
-  height: 16px;
-  display: flex;
+.wb-static-toolbar .chevron-down.inside {
   margin-left: -25px;
   margin-top: 11px;
   margin-right: 10px;
@@ -116,30 +110,20 @@
 
 .wb-static-toolbar .divider {
   width: 1px;
-  background-color: #eee;
+  background-color: var(--border-color-neutral-dimmed);
   margin: 0 4px;
 }
 
-.wb-static-toolbar .icon.bullet-list,
-.wb-static-toolbar .icon.bullet {
-  background-image: url("./icons/list-ul.svg");
-}
-
-.wb-static-toolbar .icon.numbered-list,
-.wb-static-toolbar .icon.number {
-  background-image: url("./icons/list-ol.svg");
-}
-
 .wb-static-toolbar .link-editor .button.active,
 .wb-static-toolbar .button.active {
-  background-color: rgb(223, 232, 250);
+  background-color: var(--color-primary-subtle);
 }
 
 .wb-static-toolbar button.toolbar-item {
   border: 0;
   display: flex;
   background: none;
-  border-radius: 10px;
+  border-radius: var(--radius-md);
   padding: 8px;
   cursor: pointer;
   vertical-align: middle;
@@ -156,33 +140,26 @@
   margin-right: 2px;
 }
 
-.wb-static-toolbar button.toolbar-item i.format {
-  background-size: contain;
-  display: inline-block;
-  height: 18px;
-  width: 18px;
-  vertical-align: -0.25em;
+.wb-static-toolbar button.toolbar-item .format {
   display: flex;
-  opacity: 0.6;
+  height: 16px;
+  width: 16px;
+  flex-shrink: 0;
 }
 
 .wb-static-toolbar button.toolbar-item:disabled .icon,
 .wb-static-toolbar button.toolbar-item:disabled .text,
-.wb-static-toolbar button.toolbar-item:disabled i.format,
 .wb-static-toolbar button.toolbar-item:disabled .chevron-down {
   opacity: 0.2;
 }
 
 .wb-static-toolbar button.toolbar-item.active {
-  background-color: rgba(223, 232, 250, 0.3);
-}
-
-.wb-static-toolbar button.toolbar-item.active i {
-  opacity: 1;
+  background-color: var(--color-primary-subtle);
 }
 
 .wb-static-toolbar .toolbar-item:hover:not([disabled]) {
-  background-color: #eee;
+  /* Matches admin-ui ghost IconButton hover (bg-neutral-dark/5). */
+  background-color: color-mix(in oklab, var(--color-neutral-dark) 5%, transparent);
 }
 
 .wb-static-toolbar .toolbar-item.font-family .text {
@@ -194,12 +171,20 @@
   width: 150px;
 }
 
+/* Fixed-width label so the trigger doesn't resize as the selected heading changes. */
+.wb-static-toolbar .block-type-dropdown .dropdown-button-text {
+  width: 92px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
 .wb-static-toolbar .toolbar-item .text {
   display: flex;
   line-height: 20px;
   vertical-align: middle;
   font-size: 14px;
-  color: #777;
+  color: var(--text-color-neutral-strong);
   text-overflow: ellipsis;
   overflow: hidden;
   height: 20px;
@@ -209,56 +194,40 @@
 
 .wb-static-toolbar .toolbar-item .icon {
   display: flex;
-  width: 20px;
-  height: 20px;
-  user-select: none;
-  margin-right: 8px;
-  line-height: 16px;
-  background-size: contain;
-}
-
-.wb-static-toolbar i.chevron-down {
-  margin-top: 3px;
   width: 16px;
   height: 16px;
-  display: flex;
   user-select: none;
 }
 
-.wb-static-toolbar i.chevron-down.inside {
-  width: 16px;
-  height: 16px;
-  display: flex;
-  margin-left: -25px;
-  margin-top: 11px;
-  margin-right: 10px;
-  pointer-events: none;
+/*
+ * Toolbar icons are inline SVGs from @webiny/icons (shared action components);
+ * color via `fill`.
+ */
+.wb-static-toolbar .format,
+.wb-static-toolbar .icon {
+  fill: var(--fill-neutral-xstrong);
 }
 
-.wb-static-toolbar .divider {
-  width: 1px;
-  background-color: #eee;
-  margin: 0 4px;
+.wb-static-toolbar .chevron-down {
+  fill: var(--fill-neutral-strong);
 }
 
-.lexical-dropdown-container {
-  position: absolute;
-  bottom: -5px;
-  left: 0;
-}
-
-.wb-static-toolbar button.item i {
-  opacity: 0.6;
-}
-
-.wb-static-toolbar button.item.dropdown-item-active {
-  background-color: rgba(223, 232, 250, 0.3);
-}
-
-.wb-static-toolbar button.item.dropdown-item-active i {
-  opacity: 1;
+.wb-static-toolbar button:disabled .format,
+.wb-static-toolbar button:disabled .icon,
+.wb-static-toolbar button:disabled .chevron-down {
+  fill: var(--fill-neutral-disabled);
 }
 
+/* Website-builder-only: fullscreen/expand toggle (still a background-image glyph). */
 .wb-static-toolbar i.expand {
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
   background-image: url("./icons/fullscreen.svg");
 }
+
+.lexical-dropdown-container {
+  position: absolute;
+  bottom: -5px;
+  left: 0;
+}

package/inputRenderers/ObjectInput/DrawerDepthContext.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Tracks how deeply nested the current object panel is. Used to compute stacking order and width -
+ * a nested object opens a new panel that renders over its parent within the sidebar.
+ */
+export declare const DrawerDepthContext: import("react").Context<number>;
+export declare const useDrawerDepth: () => number;

package/inputRenderers/ObjectInput/DrawerDepthContext.js

@@ -0,0 +1,6 @@
+import { createContext, useContext } from "react";
+const DrawerDepthContext = createContext(0);
+const useDrawerDepth = ()=>useContext(DrawerDepthContext);
+export { DrawerDepthContext, useDrawerDepth };
+
+//# sourceMappingURL=DrawerDepthContext.js.map

package/inputRenderers/ObjectInput/DrawerDepthContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"inputRenderers/ObjectInput/DrawerDepthContext.js","sources":["../../../src/inputRenderers/ObjectInput/DrawerDepthContext.ts"],"sourcesContent":["import { createContext, useContext } from \"react\";\n\n/**\n * Tracks how deeply nested the current object panel is. Used to compute stacking order and width -\n * a nested object opens a new panel that renders over its parent within the sidebar.\n */\nexport const DrawerDepthContext = createContext(0);\n\nexport const useDrawerDepth = () => useContext(DrawerDepthContext);\n"],"names":["DrawerDepthContext","createContext","useDrawerDepth","useContext"],"mappings":";AAMO,MAAMA,qBAAqBC,cAAc;AAEzC,MAAMC,iBAAiB,IAAMC,WAAWH"}

package/inputRenderers/ObjectInput/ObjectAddButton.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+interface ObjectAddButtonProps {
+    text?: string;
+    onClick: () => void;
+}
+/**
+ * The "Add" button shown below a list of object rows.
+ */
+export declare const ObjectAddButton: ({ text, onClick }: ObjectAddButtonProps) => React.JSX.Element;
+export {};

package/inputRenderers/ObjectInput/ObjectAddButton.js

@@ -0,0 +1,13 @@
+import react from "react";
+import { Button } from "@webiny/admin-ui";
+import { ReactComponent } from "@webiny/icons/add.svg";
+const ObjectAddButton = ({ text = "Add", onClick })=>/*#__PURE__*/ react.createElement("div", null, /*#__PURE__*/ react.createElement(Button, {
+        variant: "ghost",
+        size: "sm",
+        icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+        text: text,
+        onClick: onClick
+    }));
+export { ObjectAddButton };
+
+//# sourceMappingURL=ObjectAddButton.js.map

package/inputRenderers/ObjectInput/ObjectAddButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"inputRenderers/ObjectInput/ObjectAddButton.js","sources":["../../../src/inputRenderers/ObjectInput/ObjectAddButton.tsx"],"sourcesContent":["import React from \"react\";\nimport { Button } from \"@webiny/admin-ui\";\nimport { ReactComponent as AddIcon } from \"@webiny/icons/add.svg\";\n\ninterface ObjectAddButtonProps {\n    text?: string;\n    onClick: () => void;\n}\n\n/**\n * The \"Add\" button shown below a list of object rows.\n */\nexport const ObjectAddButton = ({ text = \"Add\", onClick }: ObjectAddButtonProps) => {\n    return (\n        <div>\n            <Button\n                variant={\"ghost\"}\n                size={\"sm\"}\n                icon={<AddIcon />}\n                text={text}\n                onClick={onClick}\n            />\n        </div>\n    );\n};\n"],"names":["ObjectAddButton","text","onClick","Button","AddIcon"],"mappings":";;;AAYO,MAAMA,kBAAkB,CAAC,EAAEC,OAAO,KAAK,EAAEC,OAAO,EAAwB,GACpE,WAAP,GACI,oBAAC,2BACG,oBAACC,QAAMA;QACH,SAAS;QACT,MAAM;QACN,oBAAM,oBAACC,gBAAOA;QACd,MAAMH;QACN,SAASC"}

package/inputRenderers/ObjectInput/ObjectEmptyState.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+interface ObjectEmptyStateProps {
+    text?: string;
+    addText?: string;
+    onAdd: () => void;
+}
+/**
+ * The empty placeholder shown when a list object field has no items yet.
+ */
+export declare const ObjectEmptyState: ({ text, addText, onAdd }: ObjectEmptyStateProps) => React.JSX.Element;
+export {};

package/inputRenderers/ObjectInput/ObjectEmptyState.js

@@ -0,0 +1,18 @@
+import react from "react";
+import { Button, Text } from "@webiny/admin-ui";
+import { ReactComponent } from "@webiny/icons/add.svg";
+const ObjectEmptyState = ({ text = "Add your first item here", addText = "Add", onAdd })=>/*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-col items-center justify-center gap-sm rounded-md border border-dashed border-neutral-dimmed px-sm py-lg"
+    }, /*#__PURE__*/ react.createElement(Text, {
+        size: "sm",
+        className: "text-neutral-strong"
+    }, text), /*#__PURE__*/ react.createElement(Button, {
+        variant: "secondary",
+        size: "sm",
+        icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+        text: addText,
+        onClick: onAdd
+    }));
+export { ObjectEmptyState };
+
+//# sourceMappingURL=ObjectEmptyState.js.map

package/inputRenderers/ObjectInput/ObjectEmptyState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"inputRenderers/ObjectInput/ObjectEmptyState.js","sources":["../../../src/inputRenderers/ObjectInput/ObjectEmptyState.tsx"],"sourcesContent":["import React from \"react\";\nimport { Button, Text } from \"@webiny/admin-ui\";\nimport { ReactComponent as AddIcon } from \"@webiny/icons/add.svg\";\n\ninterface ObjectEmptyStateProps {\n    text?: string;\n    addText?: string;\n    onAdd: () => void;\n}\n\n/**\n * The empty placeholder shown when a list object field has no items yet.\n */\nexport const ObjectEmptyState = ({\n    text = \"Add your first item here\",\n    addText = \"Add\",\n    onAdd\n}: ObjectEmptyStateProps) => {\n    return (\n        <div\n            className={\n                \"flex flex-col items-center justify-center gap-sm rounded-md border border-dashed border-neutral-dimmed px-sm py-lg\"\n            }\n        >\n            <Text size={\"sm\"} className={\"text-neutral-strong\"}>\n                {text}\n            </Text>\n            <Button\n                variant={\"secondary\"}\n                size={\"sm\"}\n                icon={<AddIcon />}\n                text={addText}\n                onClick={onAdd}\n            />\n        </div>\n    );\n};\n"],"names":["ObjectEmptyState","text","addText","onAdd","Text","Button","AddIcon"],"mappings":";;;AAaO,MAAMA,mBAAmB,CAAC,EAC7BC,OAAO,0BAA0B,EACjCC,UAAU,KAAK,EACfC,KAAK,EACe,GACb,WAAP,GACI,oBAAC;QACG,WACI;qBAGJ,oBAACC,MAAIA;QAAC,MAAM;QAAM,WAAW;OACxBH,OAAAA,WAAAA,GAEL,oBAACI,QAAMA;QACH,SAAS;QACT,MAAM;QACN,oBAAM,oBAACC,gBAAOA;QACd,MAAMJ;QACN,SAASC"}

package/inputRenderers/ObjectInput/ObjectFieldHeader.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+interface ObjectFieldHeaderProps {
+    label?: React.ReactNode;
+    description?: React.ReactNode;
+}
+/**
+ * The bold field label with its description stacked below it, shown above a list of object rows.
+ */
+export declare const ObjectFieldHeader: ({ label, description }: ObjectFieldHeaderProps) => React.JSX.Element | null;
+export {};

package/inputRenderers/ObjectInput/ObjectFieldHeader.js

@@ -0,0 +1,17 @@
+import react from "react";
+import { Label, Text } from "@webiny/admin-ui";
+const ObjectFieldHeader = ({ label, description })=>{
+    if (!label) return null;
+    return /*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-col"
+    }, /*#__PURE__*/ react.createElement(Label, {
+        text: label,
+        className: "pb-xs"
+    }), description ? /*#__PURE__*/ react.createElement(Text, {
+        size: "sm",
+        className: "font-normal text-neutral-strong"
+    }, description) : null);
+};
+export { ObjectFieldHeader };
+
+//# sourceMappingURL=ObjectFieldHeader.js.map

package/inputRenderers/ObjectInput/ObjectFieldHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"inputRenderers/ObjectInput/ObjectFieldHeader.js","sources":["../../../src/inputRenderers/ObjectInput/ObjectFieldHeader.tsx"],"sourcesContent":["import React from \"react\";\nimport { Label, Text } from \"@webiny/admin-ui\";\n\ninterface ObjectFieldHeaderProps {\n    label?: React.ReactNode;\n    description?: React.ReactNode;\n}\n\n/**\n * The bold field label with its description stacked below it, shown above a list of object rows.\n */\nexport const ObjectFieldHeader = ({ label, description }: ObjectFieldHeaderProps) => {\n    if (!label) {\n        return null;\n    }\n\n    return (\n        <div className={\"flex flex-col\"}>\n            <Label text={label} className={\"pb-xs\"} />\n            {description ? (\n                <Text size={\"sm\"} className={\"font-normal text-neutral-strong\"}>\n                    {description}\n                </Text>\n            ) : null}\n        </div>\n    );\n};\n"],"names":["ObjectFieldHeader","label","description","Label","Text"],"mappings":";;AAWO,MAAMA,oBAAoB,CAAC,EAAEC,KAAK,EAAEC,WAAW,EAA0B;IAC5E,IAAI,CAACD,OACD,OAAO;IAGX,OAAO,WAAP,GACI,oBAAC;QAAI,WAAW;qBACZ,oBAACE,OAAKA;QAAC,MAAMF;QAAO,WAAW;QAC9BC,cAAc,WAAdA,GACG,oBAACE,MAAIA;QAAC,MAAM;QAAM,WAAW;OACxBF,eAEL;AAGhB"}

package/inputRenderers/ObjectInput/ObjectFieldPanel.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+interface ObjectFieldPanelProps {
+    open: boolean;
+    onClose: () => void;
+    title: React.ReactNode;
+    depth: number;
+    children: React.ReactNode;
+}
+/**
+ * A panel holding an object's fields. It is portaled into the editor sidebar and overlays it
+ * (right-aligned, slightly narrower so the backdrop shows as a thin strip on the left). A nested
+ * object opens another, narrower panel over this one with its own backdrop; backdrops stack and
+ * persist, so each deeper level dims its parent further. Closes on the header button, its own
+ * backdrop, or Escape.
+ */
+export declare const ObjectFieldPanel: ({ open, onClose, title, depth, children }: ObjectFieldPanelProps) => React.ReactPortal | null;
+export {};

package/inputRenderers/ObjectInput/ObjectFieldPanel.js

@@ -0,0 +1,93 @@
+import react, { useEffect, useState } from "react";
+import { createPortal } from "react-dom";
+import { Button, Text } from "@webiny/admin-ui";
+import { ReactComponent } from "@webiny/icons/close.svg";
+import { DrawerDepthContext } from "./DrawerDepthContext.js";
+const PANEL_WIDTH = 312;
+const NEST_INSET = 16;
+const TRANSITION_MS = 250;
+const ANCHOR_SELECTOR = "[data-role='wb-object-panel-anchor']";
+const Z_BASE = 50;
+const ObjectFieldPanel = ({ open, onClose, title, depth, children })=>{
+    const [host] = useState(()=>"u" > typeof document ? document.querySelector(ANCHOR_SELECTOR) : null);
+    const [rendered, setRendered] = useState(open);
+    const [entered, setEntered] = useState(false);
+    useEffect(()=>{
+        if (open) return void setRendered(true);
+        setEntered(false);
+        const timeout = setTimeout(()=>setRendered(false), TRANSITION_MS);
+        return ()=>clearTimeout(timeout);
+    }, [
+        open
+    ]);
+    useEffect(()=>{
+        if (!rendered || !open) return;
+        let inner = 0;
+        const outer = requestAnimationFrame(()=>{
+            inner = requestAnimationFrame(()=>setEntered(true));
+        });
+        return ()=>{
+            cancelAnimationFrame(outer);
+            cancelAnimationFrame(inner);
+        };
+    }, [
+        rendered,
+        open
+    ]);
+    useEffect(()=>{
+        if (!open) return;
+        const onKeyDown = (event)=>{
+            if ("Escape" === event.key) onClose();
+        };
+        window.addEventListener("keydown", onKeyDown);
+        return ()=>window.removeEventListener("keydown", onKeyDown);
+    }, [
+        open,
+        onClose
+    ]);
+    if (!rendered || !host) return null;
+    const panelZIndex = Z_BASE + 2 * depth;
+    const panelWidth = PANEL_WIDTH - depth * NEST_INSET;
+    return /*#__PURE__*/ createPortal(/*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement("div", {
+        className: "absolute top-0 bottom-0 left-0",
+        style: {
+            width: "50%",
+            backgroundColor: "rgba(25, 28, 32, 0.2)",
+            zIndex: panelZIndex - 1,
+            opacity: entered ? 1 : 0,
+            transition: "opacity 200ms ease"
+        },
+        onClick: onClose
+    }), /*#__PURE__*/ react.createElement("div", {
+        className: "absolute top-0 bottom-0 right-0 flex shadow-lg",
+        style: {
+            width: panelWidth,
+            zIndex: panelZIndex,
+            transform: entered ? "translateX(0)" : "translateX(100%)",
+            transition: "transform 250ms ease"
+        }
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "w-px h-full shrink-0 bg-neutral-dimmed"
+    }), /*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-col flex-1 min-w-0 bg-neutral-base"
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "flex items-center justify-between gap-sm px-md py-md"
+    }, /*#__PURE__*/ react.createElement(Text, {
+        size: "md",
+        className: "font-semibold truncate text-neutral-primary"
+    }, title), /*#__PURE__*/ react.createElement(Button, {
+        variant: "ghost",
+        size: "sm",
+        icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+        onClick: onClose
+    })), /*#__PURE__*/ react.createElement("div", {
+        className: "flex-1 overflow-y-auto p-md"
+    }, /*#__PURE__*/ react.createElement(DrawerDepthContext.Provider, {
+        value: depth + 1
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-col gap-md"
+    }, children)))))), host);
+};
+export { ObjectFieldPanel };
+
+//# sourceMappingURL=ObjectFieldPanel.js.map

package/inputRenderers/ObjectInput/ObjectFieldPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"inputRenderers/ObjectInput/ObjectFieldPanel.js","sources":["../../../src/inputRenderers/ObjectInput/ObjectFieldPanel.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { Button, Text } from \"@webiny/admin-ui\";\nimport { ReactComponent as CloseIcon } from \"@webiny/icons/close.svg\";\nimport { DrawerDepthContext } from \"./DrawerDepthContext.js\";\n\n/**\n * Width of the first object-field panel. Slightly narrower than the editor sidebar (329px) so the\n * backdrop shows as a thin strip on its left edge.\n */\nconst PANEL_WIDTH = 312;\n\n/**\n * Each nested panel is this much narrower than its parent, so the stack of open panels is visible\n * (the dimmed parent peeks out on the left).\n */\nconst NEST_INSET = 16;\n\n/**\n * Duration of the enter/exit transitions. The panel stays mounted this long after closing so the\n * slide-out / fade-out can play before it unmounts.\n */\nconst TRANSITION_MS = 250;\n\n/**\n * The editor sidebar carries this attribute (see `config/Sidebar/Sidebar.tsx`). Object panels are\n * portaled into it and overlay it, so they stay confined to the sidebar (no app-wide overlay).\n */\nconst ANCHOR_SELECTOR = \"[data-role='wb-object-panel-anchor']\";\n\n/**\n * Base z-index for object panels. Each level of nesting adds 2: one slot for the panel and one for\n * its backdrop, which sits directly beneath it. Backdrops stack, so each deeper panel dims the\n * parent panel a little more.\n */\nconst Z_BASE = 50;\n\ninterface ObjectFieldPanelProps {\n    open: boolean;\n    onClose: () => void;\n    title: React.ReactNode;\n    depth: number;\n    children: React.ReactNode;\n}\n\n/**\n * A panel holding an object's fields. It is portaled into the editor sidebar and overlays it\n * (right-aligned, slightly narrower so the backdrop shows as a thin strip on the left). A nested\n * object opens another, narrower panel over this one with its own backdrop; backdrops stack and\n * persist, so each deeper level dims its parent further. Closes on the header button, its own\n * backdrop, or Escape.\n */\nexport const ObjectFieldPanel = ({\n    open,\n    onClose,\n    title,\n    depth,\n    children\n}: ObjectFieldPanelProps) => {\n    const [host] = useState<HTMLElement | null>(() =>\n        typeof document !== \"undefined\"\n            ? document.querySelector<HTMLElement>(ANCHOR_SELECTOR)\n            : null\n    );\n    const [rendered, setRendered] = useState(open);\n    const [entered, setEntered] = useState(false);\n\n    // Mount on open; on close, play the exit transition (slide out + fade out) before unmounting.\n    useEffect(() => {\n        if (open) {\n            setRendered(true);\n            return;\n        }\n        setEntered(false);\n        const timeout = setTimeout(() => setRendered(false), TRANSITION_MS);\n        return () => clearTimeout(timeout);\n    }, [open]);\n\n    // Enter transition: once mounted and open, flip to the on-screen state after the browser paints\n    // the initial off-screen / transparent state. A double rAF guarantees that first paint.\n    useEffect(() => {\n        if (!rendered || !open) {\n            return;\n        }\n        let inner = 0;\n        const outer = requestAnimationFrame(() => {\n            inner = requestAnimationFrame(() => setEntered(true));\n        });\n        return () => {\n            cancelAnimationFrame(outer);\n            cancelAnimationFrame(inner);\n        };\n    }, [rendered, open]);\n\n    useEffect(() => {\n        if (!open) {\n            return;\n        }\n        const onKeyDown = (event: KeyboardEvent) => {\n            if (event.key === \"Escape\") {\n                onClose();\n            }\n        };\n        window.addEventListener(\"keydown\", onKeyDown);\n        return () => window.removeEventListener(\"keydown\", onKeyDown);\n    }, [open, onClose]);\n\n    if (!rendered || !host) {\n        return null;\n    }\n\n    const panelZIndex = Z_BASE + depth * 2;\n    const panelWidth = PANEL_WIDTH - depth * NEST_INSET;\n\n    return createPortal(\n        <>\n            <div\n                className={\"absolute top-0 bottom-0 left-0\"}\n                style={{\n                    width: \"50%\",\n                    backgroundColor: \"rgba(25, 28, 32, 0.2)\",\n                    zIndex: panelZIndex - 1,\n                    opacity: entered ? 1 : 0,\n                    transition: \"opacity 200ms ease\"\n                }}\n                onClick={onClose}\n            />\n            <div\n                className={\"absolute top-0 bottom-0 right-0 flex shadow-lg\"}\n                style={{\n                    width: panelWidth,\n                    zIndex: panelZIndex,\n                    transform: entered ? \"translateX(0)\" : \"translateX(100%)\",\n                    transition: \"transform 250ms ease\"\n                }}\n            >\n                <div className={\"w-px h-full shrink-0 bg-neutral-dimmed\"} />\n                <div className={\"flex flex-col flex-1 min-w-0 bg-neutral-base\"}>\n                    <div className={\"flex items-center justify-between gap-sm px-md py-md\"}>\n                        <Text size={\"md\"} className={\"font-semibold truncate text-neutral-primary\"}>\n                            {title}\n                        </Text>\n                        <Button\n                            variant={\"ghost\"}\n                            size={\"sm\"}\n                            icon={<CloseIcon />}\n                            onClick={onClose}\n                        />\n                    </div>\n                    <div className={\"flex-1 overflow-y-auto p-md\"}>\n                        <DrawerDepthContext.Provider value={depth + 1}>\n                            <div className={\"flex flex-col gap-md\"}>{children}</div>\n                        </DrawerDepthContext.Provider>\n                    </div>\n                </div>\n            </div>\n        </>,\n        host\n    );\n};\n"],"names":["PANEL_WIDTH","NEST_INSET","TRANSITION_MS","ANCHOR_SELECTOR","Z_BASE","ObjectFieldPanel","open","onClose","title","depth","children","host","useState","document","rendered","setRendered","entered","setEntered","useEffect","timeout","setTimeout","clearTimeout","inner","outer","requestAnimationFrame","cancelAnimationFrame","onKeyDown","event","window","panelZIndex","panelWidth","createPortal","Text","Button","CloseIcon","DrawerDepthContext"],"mappings":";;;;;AAUA,MAAMA,cAAc;AAMpB,MAAMC,aAAa;AAMnB,MAAMC,gBAAgB;AAMtB,MAAMC,kBAAkB;AAOxB,MAAMC,SAAS;AAiBR,MAAMC,mBAAmB,CAAC,EAC7BC,IAAI,EACJC,OAAO,EACPC,KAAK,EACLC,KAAK,EACLC,QAAQ,EACY;IACpB,MAAM,CAACC,KAAK,GAAGC,SAA6B,IACxC,AAAoB,MAApB,OAAOC,WACDA,SAAS,aAAa,CAAcV,mBACpC;IAEV,MAAM,CAACW,UAAUC,YAAY,GAAGH,SAASN;IACzC,MAAM,CAACU,SAASC,WAAW,GAAGL,SAAS;IAGvCM,UAAU;QACN,IAAIZ,MAAM,YACNS,YAAY;QAGhBE,WAAW;QACX,MAAME,UAAUC,WAAW,IAAML,YAAY,QAAQb;QACrD,OAAO,IAAMmB,aAAaF;IAC9B,GAAG;QAACb;KAAK;IAITY,UAAU;QACN,IAAI,CAACJ,YAAY,CAACR,MACd;QAEJ,IAAIgB,QAAQ;QACZ,MAAMC,QAAQC,sBAAsB;YAChCF,QAAQE,sBAAsB,IAAMP,WAAW;QACnD;QACA,OAAO;YACHQ,qBAAqBF;YACrBE,qBAAqBH;QACzB;IACJ,GAAG;QAACR;QAAUR;KAAK;IAEnBY,UAAU;QACN,IAAI,CAACZ,MACD;QAEJ,MAAMoB,YAAY,CAACC;YACf,IAAIA,AAAc,aAAdA,MAAM,GAAG,EACTpB;QAER;QACAqB,OAAO,gBAAgB,CAAC,WAAWF;QACnC,OAAO,IAAME,OAAO,mBAAmB,CAAC,WAAWF;IACvD,GAAG;QAACpB;QAAMC;KAAQ;IAElB,IAAI,CAACO,YAAY,CAACH,MACd,OAAO;IAGX,MAAMkB,cAAczB,SAASK,AAAQ,IAARA;IAC7B,MAAMqB,aAAa9B,cAAcS,QAAQR;IAEzC,OAAO,WAAP,GAAO8B,aAAa,WAADA,GACf,wDACI,oBAAC;QACG,WAAW;QACX,OAAO;YACH,OAAO;YACP,iBAAiB;YACjB,QAAQF,cAAc;YACtB,SAASb,UAAU,IAAI;YACvB,YAAY;QAChB;QACA,SAAST;sBAEb,oBAAC;QACG,WAAW;QACX,OAAO;YACH,OAAOuB;YACP,QAAQD;YACR,WAAWb,UAAU,kBAAkB;YACvC,YAAY;QAChB;qBAEA,oBAAC;QAAI,WAAW;sBAChB,oBAAC;QAAI,WAAW;qBACZ,oBAAC;QAAI,WAAW;qBACZ,oBAACgB,MAAIA;QAAC,MAAM;QAAM,WAAW;OACxBxB,QAAAA,WAAAA,GAEL,oBAACyB,QAAMA;QACH,SAAS;QACT,MAAM;QACN,oBAAM,oBAACC,gBAASA;QAChB,SAAS3B;uBAGjB,oBAAC;QAAI,WAAW;qBACZ,oBAAC4B,mBAAmB,QAAQ;QAAC,OAAO1B,QAAQ;qBACxC,oBAAC;QAAI,WAAW;OAAyBC,gBAM7DC;AAER"}

package/inputRenderers/ObjectInput/ObjectInputRenderer.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import type { ElementInputRendererProps } from "../../BaseEditor/config/ElementInput.js";
+/**
+ * Renderer for object fields (`Webiny/Object`). Routes to the single or list variant; both recurse
+ * back into the generic `InputField` for their child inputs.
+ */
+export declare const ObjectInputRenderer: ({ node, element, bindings }: ElementInputRendererProps) => React.JSX.Element | null;

package/inputRenderers/ObjectInput/ObjectInputRenderer.js

@@ -0,0 +1,19 @@
+import react from "react";
+import { ObjectField } from "../../BaseEditor/defaultConfig/Sidebar/ElementSettings/ObjectField.js";
+import { ObjectListField } from "../../BaseEditor/defaultConfig/Sidebar/ElementSettings/ObjectListField.js";
+const ObjectInputRenderer = ({ node, element, bindings })=>{
+    if (!node || !element) return null;
+    if (node.list) return /*#__PURE__*/ react.createElement(ObjectListField, {
+        element: element,
+        node: node,
+        bindings: bindings
+    });
+    return /*#__PURE__*/ react.createElement(ObjectField, {
+        element: element,
+        node: node,
+        bindings: bindings
+    });
+};
+export { ObjectInputRenderer };
+
+//# sourceMappingURL=ObjectInputRenderer.js.map

package/inputRenderers/ObjectInput/ObjectInputRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"inputRenderers/ObjectInput/ObjectInputRenderer.js","sources":["../../../src/inputRenderers/ObjectInput/ObjectInputRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport type { ElementInputRendererProps } from \"~/BaseEditor/config/ElementInput.js\";\nimport { ObjectField } from \"~/BaseEditor/defaultConfig/Sidebar/ElementSettings/ObjectField.js\";\nimport { ObjectListField } from \"~/BaseEditor/defaultConfig/Sidebar/ElementSettings/ObjectListField.js\";\n\n/**\n * Renderer for object fields (`Webiny/Object`). Routes to the single or list variant; both recurse\n * back into the generic `InputField` for their child inputs.\n */\nexport const ObjectInputRenderer = ({ node, element, bindings }: ElementInputRendererProps) => {\n    if (!node || !element) {\n        return null;\n    }\n\n    if (node.list) {\n        return <ObjectListField element={element} node={node} bindings={bindings} />;\n    }\n\n    return <ObjectField element={element} node={node} bindings={bindings} />;\n};\n"],"names":["ObjectInputRenderer","node","element","bindings","ObjectListField","ObjectField"],"mappings":";;;AASO,MAAMA,sBAAsB,CAAC,EAAEC,IAAI,EAAEC,OAAO,EAAEC,QAAQ,EAA6B;IACtF,IAAI,CAACF,QAAQ,CAACC,SACV,OAAO;IAGX,IAAID,KAAK,IAAI,EACT,OAAO,WAAP,GAAO,oBAACG,iBAAeA;QAAC,SAASF;QAAS,MAAMD;QAAM,UAAUE;;IAGpE,OAAO,WAAP,GAAO,oBAACE,aAAWA;QAAC,SAASH;QAAS,MAAMD;QAAM,UAAUE;;AAChE"}

package/inputRenderers/ObjectInput/ObjectRow.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+interface ObjectRowProps {
+    title: React.ReactNode;
+    onOpen: () => void;
+    actions?: React.ReactNode;
+}
+/**
+ * A clickable row representing an object (a single object field, or one item of a list). Resting,
+ * it shows the title. On hover it tints and reveals its trailing actions (reorder / remove) - rows
+ * without actions (a single object field) just tint.
+ */
+export declare const ObjectRow: ({ title, onOpen, actions }: ObjectRowProps) => React.JSX.Element;
+export {};