@webiny/app-website-builder 0.0.0-unstable.eb196ccd2f → 0.0.0-unstable.eb81deee7e

package/inputRenderers/LexicalInput/wbStaticToolbar.css

@@ -1,264 +1,233 @@
+/*
+ * 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;
-    will-change: transform;
-    background: #fff;
-    flex-wrap: wrap;
-    z-index: 1;
+  display: flex;
+  position: relative;
+  padding: 4px;
+  vertical-align: middle;
+  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: var(--color-neutral-base);
+  flex-wrap: wrap;
+  z-index: 1;
 }
 
 .wb-static-toolbar button.popup-item {
-    border: 0;
-    display: flex;
-    background: #fff;
-    border-radius: 10px;
-    padding: 8px;
-    cursor: pointer;
-    vertical-align: middle;
+  border: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border-radius: var(--radius-md);
+  padding: 8px;
+  cursor: pointer;
+  vertical-align: middle;
 }
 
 .wb-static-toolbar button.popup-item:disabled {
-    cursor: not-allowed;
+  cursor: not-allowed;
 }
 
 .wb-static-toolbar button.popup-item.spaced {
-    margin-right: 2px;
+  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;
-    display: flex;
-}
-
-.wb-static-toolbar button.popup-item:disabled i.format {
-    opacity: 0.2;
+.wb-static-toolbar button.popup-item .format {
+  display: flex;
+  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;
-    padding: 8px;
-    vertical-align: middle;
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    width: 70px;
-    font-size: 14px;
-    color: #777;
-    text-overflow: ellipsis;
+  border: 0;
+  display: flex;
+  border-radius: var(--radius-md);
+  padding: 8px;
+  vertical-align: middle;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  width: 70px;
+  font-size: 14px;
+  color: var(--text-color-neutral-strong);
+  text-overflow: ellipsis;
 }
 
 .wb-static-toolbar select.code-language {
-    text-transform: capitalize;
-    width: 130px;
+  text-transform: capitalize;
+  width: 130px;
 }
 
 .wb-static-toolbar .popup-item .text {
-    display: flex;
-    line-height: 20px;
-    width: 200px;
-    vertical-align: middle;
-    font-size: 14px;
-    color: #777;
-    text-overflow: ellipsis;
-    width: 70px;
-    overflow: hidden;
-    height: 20px;
-    text-align: left;
+  display: flex;
+  line-height: 20px;
+  width: 70px;
+  vertical-align: middle;
+  font-size: 14px;
+  color: var(--text-color-neutral-strong);
+  text-overflow: ellipsis;
+  overflow: hidden;
+  height: 20px;
+  text-align: left;
 }
 
 .wb-static-toolbar .popup-item .icon {
-    display: flex;
-    width: 20px;
-    height: 20px;
-    user-select: none;
-    line-height: 16px;
-    background-size: contain;
+  display: flex;
+  width: 16px;
+  height: 16px;
+  user-select: none;
 }
 
-.wb-static-toolbar i.chevron-down {
-    margin-top: 3px;
-    width: 16px;
-    height: 16px;
-    display: flex;
-    user-select: none;
+.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;
-    margin-left: -25px;
-    margin-top: 11px;
-    margin-right: 10px;
-    pointer-events: none;
+.wb-static-toolbar .chevron-down.inside {
+  margin-left: -25px;
+  margin-top: 11px;
+  margin-right: 10px;
+  pointer-events: none;
 }
 
 .wb-static-toolbar .divider {
-    width: 1px;
-    background-color: #eee;
-    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");
+  width: 1px;
+  background-color: var(--border-color-neutral-dimmed);
+  margin: 0 4px;
 }
 
 .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;
-    padding: 8px;
-    cursor: pointer;
-    vertical-align: middle;
-    flex-shrink: 0;
-    align-items: center;
-    justify-content: space-between;
+  border: 0;
+  display: flex;
+  background: none;
+  border-radius: var(--radius-md);
+  padding: 8px;
+  cursor: pointer;
+  vertical-align: middle;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: space-between;
 }
 
 .wb-static-toolbar button.toolbar-item:disabled {
-    cursor: not-allowed;
+  cursor: not-allowed;
 }
 
 .wb-static-toolbar button.toolbar-item.spaced {
-    margin-right: 2px;
+  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;
-    display: flex;
-    opacity: 0.6;
+.wb-static-toolbar button.toolbar-item .format {
+  display: flex;
+  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;
+  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 {
-    display: block;
-    max-width: 40px;
+  display: block;
+  max-width: 40px;
 }
 
 .wb-static-toolbar .code-language {
-    width: 150px;
+  width: 150px;
 }
 
-.wb-static-toolbar .toolbar-item .text {
-    display: flex;
-    line-height: 20px;
-    vertical-align: middle;
-    font-size: 14px;
-    color: #777;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    height: 20px;
-    text-align: left;
-    padding-right: 10px;
+/* 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 .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;
+.wb-static-toolbar .toolbar-item .text {
+  display: flex;
+  line-height: 20px;
+  vertical-align: middle;
+  font-size: 14px;
+  color: var(--text-color-neutral-strong);
+  text-overflow: ellipsis;
+  overflow: hidden;
+  height: 20px;
+  text-align: left;
+  padding-right: 10px;
 }
 
-.wb-static-toolbar .divider {
-    width: 1px;
-    background-color: #eee;
-    margin: 0 4px;
+.wb-static-toolbar .toolbar-item .icon {
+  display: flex;
+  width: 16px;
+  height: 16px;
+  user-select: none;
 }
 
-.lexical-dropdown-container {
-    position: absolute;
-    bottom: -5px;
-    left: 0;
+/*
+ * 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 button.item i {
-    opacity: 0.6;
+.wb-static-toolbar .chevron-down {
+  fill: var(--fill-neutral-strong);
 }
 
-.wb-static-toolbar button.item.dropdown-item-active {
-    background-color: rgba(223, 232, 250, 0.3);
+.wb-static-toolbar button:disabled .format,
+.wb-static-toolbar button:disabled .icon,
+.wb-static-toolbar button:disabled .chevron-down {
+  fill: var(--fill-neutral-disabled);
 }
 
-.wb-static-toolbar button.item.dropdown-item-active i {
-    opacity: 1;
+/* 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");
 }
 
-.wb-static-toolbar i.expand {
-    background-image: url("./icons/fullscreen.svg");
+.lexical-dropdown-container {
+  position: absolute;
+  bottom: -5px;
+  left: 0;
 }

package/inputRenderers/NumberInput.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
-import type { ElementInputRendererProps } from "../BaseEditor";
+import type { ElementInputRendererProps } from "../BaseEditor/index.js";
 export declare const NumberInputRenderer: ({ value, onChange, input, label }: ElementInputRendererProps) => React.JSX.Element;

package/inputRenderers/NumberInput.js

@@ -1,31 +1,27 @@
-import React, { useCallback } from "react";
+import react, { useCallback } from "react";
 import { Input } from "@webiny/admin-ui";
-export const NumberInputRenderer = ({
-  value,
-  onChange,
-  input,
-  label
-}) => {
-  const localOnChange = useCallback(value => {
-    const number = parseInt(value);
-    const minValue = input.minValue;
-    if (minValue && number < minValue) {
-      return;
-    }
-    onChange(({
-      value
-    }) => {
-      value.set(number);
+const NumberInputRenderer = ({ value, onChange, input, label })=>{
+    const localOnChange = useCallback((value)=>{
+        const number = parseInt(value);
+        const minValue = input.minValue;
+        if (minValue && number < minValue) return;
+        onChange(({ value })=>{
+            value.set(number);
+        });
+    }, [
+        onChange
+    ]);
+    return /*#__PURE__*/ react.createElement(Input, {
+        type: "number",
+        size: "md",
+        variant: "secondary",
+        value: value,
+        onChange: localOnChange,
+        label: label,
+        description: input.description,
+        note: input.helperText
     });
-  }, [onChange]);
-  return /*#__PURE__*/React.createElement(Input, {
-    type: "number",
-    value: value,
-    onChange: localOnChange,
-    label: label,
-    description: input.description,
-    note: input.helperText
-  });
 };
+export { NumberInputRenderer };
 
 //# sourceMappingURL=NumberInput.js.map

package/inputRenderers/NumberInput.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useCallback","Input","NumberInputRenderer","value","onChange","input","label","localOnChange","number","parseInt","minValue","set","createElement","type","description","note","helperText"],"sources":["NumberInput.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport { Input } from \"@webiny/admin-ui\";\nimport type { ElementInputRendererProps } from \"~/BaseEditor\";\nimport type { NumberInput } from \"@webiny/website-builder-sdk\";\n\nexport const NumberInputRenderer = ({\n    value,\n    onChange,\n    input,\n    label\n}: ElementInputRendererProps) => {\n    const localOnChange = useCallback(\n        (value: string) => {\n            const number = parseInt(value);\n            const minValue = (input as NumberInput).minValue;\n\n            if (minValue && number < minValue) {\n                return;\n            }\n\n            onChange(({ value }) => {\n                value.set(number);\n            });\n        },\n        [onChange]\n    );\n    return (\n        <Input\n            type={\"number\"}\n            value={value}\n            onChange={localOnChange}\n            label={label}\n            description={input.description}\n            note={input.helperText}\n        />\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,WAAW,QAAQ,OAAO;AAC1C,SAASC,KAAK,QAAQ,kBAAkB;AAIxC,OAAO,MAAMC,mBAAmB,GAAGA,CAAC;EAChCC,KAAK;EACLC,QAAQ;EACRC,KAAK;EACLC;AACuB,CAAC,KAAK;EAC7B,MAAMC,aAAa,GAAGP,WAAW,CAC5BG,KAAa,IAAK;IACf,MAAMK,MAAM,GAAGC,QAAQ,CAACN,KAAK,CAAC;IAC9B,MAAMO,QAAQ,GAAIL,KAAK,CAAiBK,QAAQ;IAEhD,IAAIA,QAAQ,IAAIF,MAAM,GAAGE,QAAQ,EAAE;MAC/B;IACJ;IAEAN,QAAQ,CAAC,CAAC;MAAED;IAAM,CAAC,KAAK;MACpBA,KAAK,CAACQ,GAAG,CAACH,MAAM,CAAC;IACrB,CAAC,CAAC;EACN,CAAC,EACD,CAACJ,QAAQ,CACb,CAAC;EACD,oBACIL,KAAA,CAAAa,aAAA,CAACX,KAAK;IACFY,IAAI,EAAE,QAAS;IACfV,KAAK,EAAEA,KAAM;IACbC,QAAQ,EAAEG,aAAc;IACxBD,KAAK,EAAEA,KAAM;IACbQ,WAAW,EAAET,KAAK,CAACS,WAAY;IAC/BC,IAAI,EAAEV,KAAK,CAACW;EAAW,CAC1B,CAAC;AAEV,CAAC","ignoreList":[]}
+{"version":3,"file":"inputRenderers/NumberInput.js","sources":["../../src/inputRenderers/NumberInput.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport { Input } from \"@webiny/admin-ui\";\nimport type { ElementInputRendererProps } from \"~/BaseEditor/index.js\";\nimport type { NumberInput } from \"@webiny/website-builder-sdk\";\n\nexport const NumberInputRenderer = ({\n    value,\n    onChange,\n    input,\n    label\n}: ElementInputRendererProps) => {\n    const localOnChange = useCallback(\n        (value: string) => {\n            const number = parseInt(value);\n            const minValue = (input as NumberInput).minValue;\n\n            if (minValue && number < minValue) {\n                return;\n            }\n\n            onChange(({ value }) => {\n                value.set(number);\n            });\n        },\n        [onChange]\n    );\n    return (\n        <Input\n            type={\"number\"}\n            size={\"md\"}\n            variant={\"secondary\"}\n            value={value}\n            onChange={localOnChange}\n            label={label}\n            description={input.description}\n            note={input.helperText}\n        />\n    );\n};\n"],"names":["NumberInputRenderer","value","onChange","input","label","localOnChange","useCallback","number","parseInt","minValue","Input"],"mappings":";;AAKO,MAAMA,sBAAsB,CAAC,EAChCC,KAAK,EACLC,QAAQ,EACRC,KAAK,EACLC,KAAK,EACmB;IACxB,MAAMC,gBAAgBC,YAClB,CAACL;QACG,MAAMM,SAASC,SAASP;QACxB,MAAMQ,WAAYN,MAAsB,QAAQ;QAEhD,IAAIM,YAAYF,SAASE,UACrB;QAGJP,SAAS,CAAC,EAAED,KAAK,EAAE;YACfA,MAAM,GAAG,CAACM;QACd;IACJ,GACA;QAACL;KAAS;IAEd,OAAO,WAAP,GACI,oBAACQ,OAAKA;QACF,MAAM;QACN,MAAM;QACN,SAAS;QACT,OAAOT;QACP,UAAUI;QACV,OAAOD;QACP,aAAaD,MAAM,WAAW;QAC9B,MAAMA,MAAM,UAAU;;AAGlC"}

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 {};