npm - @webiny/app-website-builder - Versions diffs - 6.0.0-alpha.4 → 6.0.0-rc.0 - Mend

@webiny/app-website-builder 6.0.0-alpha.4 → 6.0.0-rc.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1185) hide show

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/StylesStore.js CHANGED Viewed

@@ -1,12 +1,12 @@
 import { StylesBindingsProcessor } from "@webiny/website-builder-sdk";
-import { BreakpointElementMetadata, ElementMetadata, NullMetadata, StylesMetadata } from "../../../metadata";
-import { Commands } from "../../..";
+import { BreakpointElementMetadata, ElementMetadata, NullMetadata, StylesMetadata } from "../../../metadata/index.js";
+import { Commands } from "../../../index.js";
 import { autorun, makeAutoObservable, runInAction } from "mobx";
 import { InheritanceProcessor } from "@webiny/website-builder-sdk";
 import { BindingsProcessor } from "@webiny/website-builder-sdk";
-import { $getComponentManifestByElementId } from "../../../../editorSdk/utils";
+import { $getComponentManifestByElementId } from "../../../../editorSdk/utils/index.js";
 import { ComponentManifestToAstConverter } from "@webiny/website-builder-sdk";
-import { BASE_BREAKPOINT } from "../../../../constants";
+import { BASE_BREAKPOINT } from "../../../../constants.js";
 export class StylesStore {
   elementMetadata = new NullMetadata();
   devFriendlyStyles = {};

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/StylesStore.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["StylesBindingsProcessor","BreakpointElementMetadata","ElementMetadata","NullMetadata","StylesMetadata","Commands","autorun","makeAutoObservable","runInAction","InheritanceProcessor","BindingsProcessor","$getComponentManifestByElementId","ComponentManifestToAstConverter","BASE_BREAKPOINT","StylesStore","elementMetadata","devFriendlyStyles","localPreviewStyles","undefined","inheritanceMap","rawBindings","constructor","editor","elementId","breakpointNames","manifest","inputsAst","convert","inputs","bindingsProcessor","inheritanceProcessor","document","getDocumentState","read","editorState","getEditorState","breakpoint","currentBreakpoint","calculateStuff","vm","styles","metadata","onChange","cb","stylesProcessor","StylesValueObject","finalStyles","getAll","updatedStyles","createUpdate","updateDocument","applyToDocument","onPreviewChange","structuredClone","executeCommand","PreviewPatchElement","patch","createJsonPatch","bindings","resolvedBindings","getBindings","getInheritanceMap","toDeepStyles","value","set","key","get","unset"],"sources":["StylesStore.ts"],"sourcesContent":["import type { useDocumentEditor } from \"~/DocumentEditor\";\nimport { StylesBindingsProcessor } from \"@webiny/website-builder-sdk\";\nimport type { IMetadata } from \"~/BaseEditor/metadata\";\nimport {\n BreakpointElementMetadata,\n ElementMetadata,\n NullMetadata,\n StylesMetadata\n} from \"~/BaseEditor/metadata\";\nimport { Commands } from \"~/BaseEditor\";\nimport type { Editor } from \"~/editorSdk/Editor\";\nimport { autorun, makeAutoObservable, runInAction } from \"mobx\";\nimport { type InheritanceInfo, InheritanceProcessor } from \"@webiny/website-builder-sdk\";\nimport {\n BindingsProcessor,\n type DocumentElementBindings,\n type Document\n} from \"@webiny/website-builder-sdk\";\nimport { $getComponentManifestByElementId } from \"~/editorSdk/utils\";\nimport { ComponentManifestToAstConverter } from \"@webiny/website-builder-sdk\";\nimport { BASE_BREAKPOINT } from \"~/constants\";\n\nexport type ElementBreakpointStyles = {\n styles: Record<string, any>;\n metadata: IMetadata;\n inheritanceMap: InheritanceInfo[\"styles\"];\n};\n\nexport class StylesStore {\n private editor: ReturnType<typeof useDocumentEditor>;\n private elementId: string;\n private breakpointNames: string[];\n private stylesProcessor: StylesBindingsProcessor \| undefined;\n private elementMetadata: IMetadata = new NullMetadata();\n private devFriendlyStyles: Record<string, any> = {};\n private localPreviewStyles: Record<string, any> \| undefined = undefined;\n private currentBreakpoint: string;\n private inheritanceMap: InheritanceInfo[\"styles\"] = {};\n private rawBindings: DocumentElementBindings = {};\n private bindingsProcessor: BindingsProcessor;\n private inheritanceProcessor: InheritanceProcessor;\n constructor(editor: Editor, elementId: string, breakpointNames: string[]) {\n this.editor = editor;\n this.elementId = elementId;\n this.breakpointNames = breakpointNames;\n\n const manifest = $getComponentManifestByElementId(editor, elementId ?? \"\");\n const inputsAst = ComponentManifestToAstConverter.convert(manifest?.inputs ?? []);\n\n this.bindingsProcessor = new BindingsProcessor(breakpointNames);\n this.inheritanceProcessor = new InheritanceProcessor(breakpointNames, inputsAst);\n\n const document = this.editor.getDocumentState().read();\n const editorState = this.editor.getEditorState().read();\n const breakpoint = editorState.breakpoint ?? BASE_BREAKPOINT;\n this.currentBreakpoint = breakpoint;\n\n // Initial setup.\n this.calculateStuff(document, breakpoint);\n\n autorun(() => {\n const document = this.editor.getDocumentState().read();\n const editorState = this.editor.getEditorState().read();\n const breakpoint = editorState.breakpoint ?? BASE_BREAKPOINT;\n\n runInAction(() => {\n this.currentBreakpoint = breakpoint;\n this.calculateStuff(document, breakpoint);\n });\n });\n\n makeAutoObservable(this);\n }\n\n get vm(): ElementBreakpointStyles {\n return {\n styles: this.localPreviewStyles ?? this.devFriendlyStyles,\n metadata: this.elementMetadata,\n inheritanceMap: this.inheritanceMap\n };\n }\n\n onChange = (cb: (params: { styles: StylesValueObject; metadata: IMetadata }) => void) => {\n if (!this.stylesProcessor) {\n return;\n }\n\n const styles = new StylesValueObject(this.devFriendlyStyles);\n cb({ styles, metadata: this.elementMetadata });\n\n const finalStyles = styles.getAll();\n\n const updatedStyles = this.stylesProcessor.createUpdate(\n finalStyles,\n this.currentBreakpoint\n );\n\n this.editor.updateDocument(document => {\n updatedStyles.applyToDocument(document);\n this.elementMetadata.applyToDocument(document);\n });\n\n this.localPreviewStyles = undefined;\n };\n\n onPreviewChange = (\n cb: (params: { styles: StylesValueObject; metadata: IMetadata }) => void\n ) => {\n if (!this.stylesProcessor) {\n return;\n }\n\n const styles = new StylesValueObject(structuredClone(this.devFriendlyStyles));\n\n cb({ styles, metadata: this.elementMetadata });\n\n const finalStyles = styles.getAll();\n\n this.localPreviewStyles = finalStyles;\n\n const updatedStyles = this.stylesProcessor.createUpdate(\n finalStyles,\n this.currentBreakpoint\n );\n\n this.editor.executeCommand(Commands.PreviewPatchElement, {\n elementId: this.elementId,\n patch: updatedStyles.createJsonPatch(this.rawBindings)\n });\n };\n\n private calculateStuff(document: Document, breakpoint: string) {\n const bindings = document.bindings[this.elementId] ?? {};\n\n this.rawBindings = bindings;\n const resolvedBindings = this.bindingsProcessor.getBindings(bindings, breakpoint);\n\n const inheritanceMap = this.inheritanceProcessor.getInheritanceMap(bindings, breakpoint);\n\n this.inheritanceMap = inheritanceMap.styles;\n\n this.stylesProcessor = new StylesBindingsProcessor(\n this.elementId,\n this.breakpointNames,\n bindings\n );\n\n this.elementMetadata = new StylesMetadata(\n new BreakpointElementMetadata(\n this.breakpointNames,\n breakpoint,\n new ElementMetadata(this.elementId, bindings.metadata)\n )\n );\n\n this.devFriendlyStyles = this.stylesProcessor.toDeepStyles(resolvedBindings.styles);\n }\n}\n\nexport class StylesValueObject {\n private readonly value: Record<string, any>;\n\n constructor(value: any = {}) {\n this.value = value;\n }\n\n set(key: string, value: any) {\n this.value[key] = value;\n }\n\n get(key: string) {\n return this.value[key];\n }\n\n getAll() {\n return this.value;\n }\n\n unset(key: string) {\n delete this.value[key];\n }\n}\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"names":["StylesBindingsProcessor","BreakpointElementMetadata","ElementMetadata","NullMetadata","StylesMetadata","Commands","autorun","makeAutoObservable","runInAction","InheritanceProcessor","BindingsProcessor","$getComponentManifestByElementId","ComponentManifestToAstConverter","BASE_BREAKPOINT","StylesStore","elementMetadata","devFriendlyStyles","localPreviewStyles","undefined","inheritanceMap","rawBindings","constructor","editor","elementId","breakpointNames","manifest","inputsAst","convert","inputs","bindingsProcessor","inheritanceProcessor","document","getDocumentState","read","editorState","getEditorState","breakpoint","currentBreakpoint","calculateStuff","vm","styles","metadata","onChange","cb","stylesProcessor","StylesValueObject","finalStyles","getAll","updatedStyles","createUpdate","updateDocument","applyToDocument","onPreviewChange","structuredClone","executeCommand","PreviewPatchElement","patch","createJsonPatch","bindings","resolvedBindings","getBindings","getInheritanceMap","toDeepStyles","value","set","key","get","unset"],"sources":["StylesStore.ts"],"sourcesContent":["import type { useDocumentEditor } from \"~/DocumentEditor/index.js\";\nimport { StylesBindingsProcessor } from \"@webiny/website-builder-sdk\";\nimport type { IMetadata } from \"~/BaseEditor/metadata/index.js\";\nimport {\n BreakpointElementMetadata,\n ElementMetadata,\n NullMetadata,\n StylesMetadata\n} from \"~/BaseEditor/metadata/index.js\";\nimport { Commands } from \"~/BaseEditor/index.js\";\nimport type { Editor } from \"~/editorSdk/Editor.js\";\nimport { autorun, makeAutoObservable, runInAction } from \"mobx\";\nimport { type InheritanceInfo, InheritanceProcessor } from \"@webiny/website-builder-sdk\";\nimport {\n BindingsProcessor,\n type DocumentElementBindings,\n type Document\n} from \"@webiny/website-builder-sdk\";\nimport { $getComponentManifestByElementId } from \"~/editorSdk/utils/index.js\";\nimport { ComponentManifestToAstConverter } from \"@webiny/website-builder-sdk\";\nimport { BASE_BREAKPOINT } from \"~/constants.js\";\n\nexport type ElementBreakpointStyles = {\n styles: Record<string, any>;\n metadata: IMetadata;\n inheritanceMap: InheritanceInfo[\"styles\"];\n};\n\nexport class StylesStore {\n private editor: ReturnType<typeof useDocumentEditor>;\n private elementId: string;\n private breakpointNames: string[];\n private stylesProcessor: StylesBindingsProcessor \| undefined;\n private elementMetadata: IMetadata = new NullMetadata();\n private devFriendlyStyles: Record<string, any> = {};\n private localPreviewStyles: Record<string, any> \| undefined = undefined;\n private currentBreakpoint: string;\n private inheritanceMap: InheritanceInfo[\"styles\"] = {};\n private rawBindings: DocumentElementBindings = {};\n private bindingsProcessor: BindingsProcessor;\n private inheritanceProcessor: InheritanceProcessor;\n constructor(editor: Editor, elementId: string, breakpointNames: string[]) {\n this.editor = editor;\n this.elementId = elementId;\n this.breakpointNames = breakpointNames;\n\n const manifest = $getComponentManifestByElementId(editor, elementId ?? \"\");\n const inputsAst = ComponentManifestToAstConverter.convert(manifest?.inputs ?? []);\n\n this.bindingsProcessor = new BindingsProcessor(breakpointNames);\n this.inheritanceProcessor = new InheritanceProcessor(breakpointNames, inputsAst);\n\n const document = this.editor.getDocumentState().read();\n const editorState = this.editor.getEditorState().read();\n const breakpoint = editorState.breakpoint ?? BASE_BREAKPOINT;\n this.currentBreakpoint = breakpoint;\n\n // Initial setup.\n this.calculateStuff(document, breakpoint);\n\n autorun(() => {\n const document = this.editor.getDocumentState().read();\n const editorState = this.editor.getEditorState().read();\n const breakpoint = editorState.breakpoint ?? BASE_BREAKPOINT;\n\n runInAction(() => {\n this.currentBreakpoint = breakpoint;\n this.calculateStuff(document, breakpoint);\n });\n });\n\n makeAutoObservable(this);\n }\n\n get vm(): ElementBreakpointStyles {\n return {\n styles: this.localPreviewStyles ?? this.devFriendlyStyles,\n metadata: this.elementMetadata,\n inheritanceMap: this.inheritanceMap\n };\n }\n\n onChange = (cb: (params: { styles: StylesValueObject; metadata: IMetadata }) => void) => {\n if (!this.stylesProcessor) {\n return;\n }\n\n const styles = new StylesValueObject(this.devFriendlyStyles);\n cb({ styles, metadata: this.elementMetadata });\n\n const finalStyles = styles.getAll();\n\n const updatedStyles = this.stylesProcessor.createUpdate(\n finalStyles,\n this.currentBreakpoint\n );\n\n this.editor.updateDocument(document => {\n updatedStyles.applyToDocument(document);\n this.elementMetadata.applyToDocument(document);\n });\n\n this.localPreviewStyles = undefined;\n };\n\n onPreviewChange = (\n cb: (params: { styles: StylesValueObject; metadata: IMetadata }) => void\n ) => {\n if (!this.stylesProcessor) {\n return;\n }\n\n const styles = new StylesValueObject(structuredClone(this.devFriendlyStyles));\n\n cb({ styles, metadata: this.elementMetadata });\n\n const finalStyles = styles.getAll();\n\n this.localPreviewStyles = finalStyles;\n\n const updatedStyles = this.stylesProcessor.createUpdate(\n finalStyles,\n this.currentBreakpoint\n );\n\n this.editor.executeCommand(Commands.PreviewPatchElement, {\n elementId: this.elementId,\n patch: updatedStyles.createJsonPatch(this.rawBindings)\n });\n };\n\n private calculateStuff(document: Document, breakpoint: string) {\n const bindings = document.bindings[this.elementId] ?? {};\n\n this.rawBindings = bindings;\n const resolvedBindings = this.bindingsProcessor.getBindings(bindings, breakpoint);\n\n const inheritanceMap = this.inheritanceProcessor.getInheritanceMap(bindings, breakpoint);\n\n this.inheritanceMap = inheritanceMap.styles;\n\n this.stylesProcessor = new StylesBindingsProcessor(\n this.elementId,\n this.breakpointNames,\n bindings\n );\n\n this.elementMetadata = new StylesMetadata(\n new BreakpointElementMetadata(\n this.breakpointNames,\n breakpoint,\n new ElementMetadata(this.elementId, bindings.metadata)\n )\n );\n\n this.devFriendlyStyles = this.stylesProcessor.toDeepStyles(resolvedBindings.styles);\n }\n}\n\nexport class StylesValueObject {\n private readonly value: Record<string, any>;\n\n constructor(value: any = {}) {\n this.value = value;\n }\n\n set(key: string, value: any) {\n this.value[key] = value;\n }\n\n get(key: string) {\n return this.value[key];\n }\n\n getAll() {\n return this.value;\n }\n\n unset(key: string) {\n delete this.value[key];\n }\n}\n"],"mappings":"AACA,SAASA,uBAAuB,QAAQ,6BAA6B;AAErE,SACIC,yBAAyB,EACzBC,eAAe,EACfC,YAAY,EACZC,cAAc;AAElB,SAASC,QAAQ;AAEjB,SAASC,OAAO,EAAEC,kBAAkB,EAAEC,WAAW,QAAQ,MAAM;AAC/D,SAA+BC,oBAAoB,QAAQ,6BAA6B;AACxF,SACIC,iBAAiB,QAGd,6BAA6B;AACpC,SAASC,gCAAgC;AACzC,SAASC,+BAA+B,QAAQ,6BAA6B;AAC7E,SAASC,eAAe;AAQxB,OAAO,MAAMC,WAAW,CAAC;EAKbC,eAAe,GAAc,IAAIZ,YAAY,CAAC,CAAC;EAC/Ca,iBAAiB,GAAwB,CAAC,CAAC;EAC3CC,kBAAkB,GAAoCC,SAAS;EAE/DC,cAAc,GAA8B,CAAC,CAAC;EAC9CC,WAAW,GAA4B,CAAC,CAAC;EAGjDC,WAAWA,CAACC,MAAc,EAAEC,SAAiB,EAAEC,eAAyB,EAAE;IACtE,IAAI,CAACF,MAAM,GAAGA,MAAM;IACpB,IAAI,CAACC,SAAS,GAAGA,SAAS;IAC1B,IAAI,CAACC,eAAe,GAAGA,eAAe;IAEtC,MAAMC,QAAQ,GAAGd,gCAAgC,CAACW,MAAM,EAAEC,SAAS,IAAI,EAAE,CAAC;IAC1E,MAAMG,SAAS,GAAGd,+BAA+B,CAACe,OAAO,CAACF,QAAQ,EAAEG,MAAM,IAAI,EAAE,CAAC;IAEjF,IAAI,CAACC,iBAAiB,GAAG,IAAInB,iBAAiB,CAACc,eAAe,CAAC;IAC/D,IAAI,CAACM,oBAAoB,GAAG,IAAIrB,oBAAoB,CAACe,eAAe,EAAEE,SAAS,CAAC;IAEhF,MAAMK,QAAQ,GAAG,IAAI,CAACT,MAAM,CAACU,gBAAgB,CAAC,CAAC,CAACC,IAAI,CAAC,CAAC;IACtD,MAAMC,WAAW,GAAG,IAAI,CAACZ,MAAM,CAACa,cAAc,CAAC,CAAC,CAACF,IAAI,CAAC,CAAC;IACvD,MAAMG,UAAU,GAAGF,WAAW,CAACE,UAAU,IAAIvB,eAAe;IAC5D,IAAI,CAACwB,iBAAiB,GAAGD,UAAU;;IAEnC;IACA,IAAI,CAACE,cAAc,CAACP,QAAQ,EAAEK,UAAU,CAAC;IAEzC9B,OAAO,CAAC,MAAM;MACV,MAAMyB,QAAQ,GAAG,IAAI,CAACT,MAAM,CAACU,gBAAgB,CAAC,CAAC,CAACC,IAAI,CAAC,CAAC;MACtD,MAAMC,WAAW,GAAG,IAAI,CAACZ,MAAM,CAACa,cAAc,CAAC,CAAC,CAACF,IAAI,CAAC,CAAC;MACvD,MAAMG,UAAU,GAAGF,WAAW,CAACE,UAAU,IAAIvB,eAAe;MAE5DL,WAAW,CAAC,MAAM;QACd,IAAI,CAAC6B,iBAAiB,GAAGD,UAAU;QACnC,IAAI,CAACE,cAAc,CAACP,QAAQ,EAAEK,UAAU,CAAC;MAC7C,CAAC,CAAC;IACN,CAAC,CAAC;IAEF7B,kBAAkB,CAAC,IAAI,CAAC;EAC5B;EAEA,IAAIgC,EAAEA,CAAA,EAA4B;IAC9B,OAAO;MACHC,MAAM,EAAE,IAAI,CAACvB,kBAAkB,IAAI,IAAI,CAACD,iBAAiB;MACzDyB,QAAQ,EAAE,IAAI,CAAC1B,eAAe;MAC9BI,cAAc,EAAE,IAAI,CAACA;IACzB,CAAC;EACL;EAEAuB,QAAQ,GAAIC,EAAwE,IAAK;IACrF,IAAI,CAAC,IAAI,CAACC,eAAe,EAAE;MACvB;IACJ;IAEA,MAAMJ,MAAM,GAAG,IAAIK,iBAAiB,CAAC,IAAI,CAAC7B,iBAAiB,CAAC;IAC5D2B,EAAE,CAAC;MAAEH,MAAM;MAAEC,QAAQ,EAAE,IAAI,CAAC1B;IAAgB,CAAC,CAAC;IAE9C,MAAM+B,WAAW,GAAGN,MAAM,CAACO,MAAM,CAAC,CAAC;IAEnC,MAAMC,aAAa,GAAG,IAAI,CAACJ,eAAe,CAACK,YAAY,CACnDH,WAAW,EACX,IAAI,CAACT,iBACT,CAAC;IAED,IAAI,CAACf,MAAM,CAAC4B,cAAc,CAACnB,QAAQ,IAAI;MACnCiB,aAAa,CAACG,eAAe,CAACpB,QAAQ,CAAC;MACvC,IAAI,CAAChB,eAAe,CAACoC,eAAe,CAACpB,QAAQ,CAAC;IAClD,CAAC,CAAC;IAEF,IAAI,CAACd,kBAAkB,GAAGC,SAAS;EACvC,CAAC;EAEDkC,eAAe,GACXT,EAAwE,IACvE;IACD,IAAI,CAAC,IAAI,CAACC,eAAe,EAAE;MACvB;IACJ;IAEA,MAAMJ,MAAM,GAAG,IAAIK,iBAAiB,CAACQ,eAAe,CAAC,IAAI,CAACrC,iBAAiB,CAAC,CAAC;IAE7E2B,EAAE,CAAC;MAAEH,MAAM;MAAEC,QAAQ,EAAE,IAAI,CAAC1B;IAAgB,CAAC,CAAC;IAE9C,MAAM+B,WAAW,GAAGN,MAAM,CAACO,MAAM,CAAC,CAAC;IAEnC,IAAI,CAAC9B,kBAAkB,GAAG6B,WAAW;IAErC,MAAME,aAAa,GAAG,IAAI,CAACJ,eAAe,CAACK,YAAY,CACnDH,WAAW,EACX,IAAI,CAACT,iBACT,CAAC;IAED,IAAI,CAACf,MAAM,CAACgC,cAAc,CAACjD,QAAQ,CAACkD,mBAAmB,EAAE;MACrDhC,SAAS,EAAE,IAAI,CAACA,SAAS;MACzBiC,KAAK,EAAER,aAAa,CAACS,eAAe,CAAC,IAAI,CAACrC,WAAW;IACzD,CAAC,CAAC;EACN,CAAC;EAEOkB,cAAcA,CAACP,QAAkB,EAAEK,UAAkB,EAAE;IAC3D,MAAMsB,QAAQ,GAAG3B,QAAQ,CAAC2B,QAAQ,CAAC,IAAI,CAACnC,SAAS,CAAC,IAAI,CAAC,CAAC;IAExD,IAAI,CAACH,WAAW,GAAGsC,QAAQ;IAC3B,MAAMC,gBAAgB,GAAG,IAAI,CAAC9B,iBAAiB,CAAC+B,WAAW,CAACF,QAAQ,EAAEtB,UAAU,CAAC;IAEjF,MAAMjB,cAAc,GAAG,IAAI,CAACW,oBAAoB,CAAC+B,iBAAiB,CAACH,QAAQ,EAAEtB,UAAU,CAAC;IAExF,IAAI,CAACjB,cAAc,GAAGA,cAAc,CAACqB,MAAM;IAE3C,IAAI,CAACI,eAAe,GAAG,IAAI5C,uBAAuB,CAC9C,IAAI,CAACuB,SAAS,EACd,IAAI,CAACC,eAAe,EACpBkC,QACJ,CAAC;IAED,IAAI,CAAC3C,eAAe,GAAG,IAAIX,cAAc,CACrC,IAAIH,yBAAyB,CACzB,IAAI,CAACuB,eAAe,EACpBY,UAAU,EACV,IAAIlC,eAAe,CAAC,IAAI,CAACqB,SAAS,EAAEmC,QAAQ,CAACjB,QAAQ,CACzD,CACJ,CAAC;IAED,IAAI,CAACzB,iBAAiB,GAAG,IAAI,CAAC4B,eAAe,CAACkB,YAAY,CAACH,gBAAgB,CAACnB,MAAM,CAAC;EACvF;AACJ;AAEA,OAAO,MAAMK,iBAAiB,CAAC;EAG3BxB,WAAWA,CAAC0C,KAAU,GAAG,CAAC,CAAC,EAAE;IACzB,IAAI,CAACA,KAAK,GAAGA,KAAK;EACtB;EAEAC,GAAGA,CAACC,GAAW,EAAEF,KAAU,EAAE;IACzB,IAAI,CAACA,KAAK,CAACE,GAAG,CAAC,GAAGF,KAAK;EAC3B;EAEAG,GAAGA,CAACD,GAAW,EAAE;IACb,OAAO,IAAI,CAACF,KAAK,CAACE,GAAG,CAAC;EAC1B;EAEAlB,MAAMA,CAAA,EAAG;IACL,OAAO,IAAI,CAACgB,KAAK;EACrB;EAEAI,KAAKA,CAACF,GAAW,EAAE;IACf,OAAO,IAAI,CAACF,KAAK,CAACE,GAAG,CAAC;EAC1B;AACJ","ignoreList":[]}

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/UnitValue.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["UnitValue","keywords","constructor","valueWithUnit","value","unit","match","isAKeyword","from","isKeyword","includes","String","getValue","defaultValue","toString","setUnit","getUnit","str"],"sources":["UnitValue.ts"],"sourcesContent":["export class UnitValue {\n private value: string;\n private unit: string;\n private keywords = [\"auto\", \"unset\", \"inherit\"];\n\n private constructor(valueWithUnit: string = \"\") {\n const [, value, unit = \"px\"] = valueWithUnit.match(/(\\d+)?(\\S+)?/) ?? [];\n if (this.isAKeyword(unit)) {\n this.value = unit;\n } else {\n this.value = value;\n }\n this.unit = unit;\n }\n\n static from(value: string) {\n return new UnitValue(value);\n }\n\n static isKeyword(unit: string): boolean {\n return new UnitValue(unit).isKeyword();\n }\n\n isKeyword() {\n return this.keywords.includes(String(this.value));\n }\n\n getValue(defaultValue?: string) {\n return this.value ? this.value.toString() : defaultValue ?? \"\";\n }\n\n setUnit(unit: string) {\n if (this.isKeyword()) {\n this.value = \"0\";\n }\n this.unit = unit;\n }\n\n getUnit() {\n return this.unit;\n }\n\n toString() {\n return `${this.value}${this.unit}`;\n }\n\n private isAKeyword(str: string) {\n return this.keywords.includes(str);\n }\n}\n"],"mappings":"AAAA,OAAO,MAAMA,SAAS,CAAC;EAGXC,QAAQ,GAAG,CAAC,MAAM,EAAE,OAAO,EAAE,SAAS,CAAC;EAEvCC,WAAWA,CAACC,aAAqB,GAAG,EAAE,EAAE;IAC5C,MAAM,GAAGC,KAAK,EAAEC,IAAI,GAAG,IAAI,CAAC,GAAGF,aAAa,CAACG,KAAK,CAAC,cAAc,CAAC,IAAI,EAAE;IACxE,IAAI,IAAI,CAACC,UAAU,CAACF,IAAI,CAAC,EAAE;MACvB,IAAI,CAACD,KAAK,GAAGC,IAAI;IACrB,CAAC,MAAM;MACH,IAAI,CAACD,KAAK,GAAGA,KAAK;IACtB;IACA,IAAI,CAACC,IAAI,GAAGA,IAAI;EACpB;EAEA,OAAOG,IAAIA,CAACJ,KAAa,EAAE;IACvB,OAAO,IAAIJ,SAAS,CAACI,KAAK,CAAC;EAC/B;EAEA,OAAOK,SAASA,CAACJ,IAAY,EAAW;IACpC,OAAO,IAAIL,SAAS,CAACK,IAAI,CAAC,CAACI,SAAS,CAAC,CAAC;EAC1C;EAEAA,SAASA,CAAA,EAAG;IACR,OAAO,IAAI,CAACR,QAAQ,CAACS,QAAQ,CAACC,MAAM,CAAC,IAAI,CAACP,KAAK,CAAC,CAAC;EACrD;EAEAQ,QAAQA,CAACC,YAAqB,EAAE;IAC5B,OAAO,IAAI,CAACT,KAAK,GAAG,IAAI,CAACA,KAAK,CAACU,QAAQ,CAAC,CAAC,~~GAAGD~~,YAAY,IAAI,~~EAAE~~;~~EAClE~~;EAEAE,OAAOA,CAACV,IAAY,EAAE;IAClB,IAAI,IAAI,CAACI,SAAS,CAAC,CAAC,EAAE;MAClB,IAAI,CAACL,KAAK,GAAG,GAAG;IACpB;IACA,IAAI,CAACC,IAAI,GAAGA,IAAI;EACpB;EAEAW,OAAOA,CAAA,EAAG;IACN,OAAO,IAAI,CAACX,IAAI;EACpB;EAEAS,QAAQA,CAAA,EAAG;IACP,OAAO,GAAG,IAAI,CAACV,KAAK,GAAG,IAAI,CAACC,IAAI,EAAE;EACtC;EAEQE,UAAUA,CAACU,GAAW,EAAE;IAC5B,OAAO,IAAI,CAAChB,QAAQ,CAACS,QAAQ,CAACO,GAAG,CAAC;EACtC;AACJ","ignoreList":[]}
1	+ {"version":3,"names":["UnitValue","keywords","constructor","valueWithUnit","value","unit","match","isAKeyword","from","isKeyword","includes","String","getValue","defaultValue","toString","setUnit","getUnit","str"],"sources":["UnitValue.ts"],"sourcesContent":["export class UnitValue {\n private value: string;\n private unit: string;\n private keywords = [\"auto\", \"unset\", \"inherit\"];\n\n private constructor(valueWithUnit: string = \"\") {\n const [, value, unit = \"px\"] = valueWithUnit.match(/(\\d+)?(\\S+)?/) ?? [];\n if (this.isAKeyword(unit)) {\n this.value = unit;\n } else {\n this.value = value;\n }\n this.unit = unit;\n }\n\n static from(value: string) {\n return new UnitValue(value);\n }\n\n static isKeyword(unit: string): boolean {\n return new UnitValue(unit).isKeyword();\n }\n\n isKeyword() {\n return this.keywords.includes(String(this.value));\n }\n\n getValue(defaultValue?: string) {\n return this.value ? this.value.toString() : (defaultValue ?? \"\");\n }\n\n setUnit(unit: string) {\n if (this.isKeyword()) {\n this.value = \"0\";\n }\n this.unit = unit;\n }\n\n getUnit() {\n return this.unit;\n }\n\n toString() {\n return `${this.value}${this.unit}`;\n }\n\n private isAKeyword(str: string) {\n return this.keywords.includes(str);\n }\n}\n"],"mappings":"AAAA,OAAO,MAAMA,SAAS,CAAC;EAGXC,QAAQ,GAAG,CAAC,MAAM,EAAE,OAAO,EAAE,SAAS,CAAC;EAEvCC,WAAWA,CAACC,aAAqB,GAAG,EAAE,EAAE;IAC5C,MAAM,GAAGC,KAAK,EAAEC,IAAI,GAAG,IAAI,CAAC,GAAGF,aAAa,CAACG,KAAK,CAAC,cAAc,CAAC,IAAI,EAAE;IACxE,IAAI,IAAI,CAACC,UAAU,CAACF,IAAI,CAAC,EAAE;MACvB,IAAI,CAACD,KAAK,GAAGC,IAAI;IACrB,CAAC,MAAM;MACH,IAAI,CAACD,KAAK,GAAGA,KAAK;IACtB;IACA,IAAI,CAACC,IAAI,GAAGA,IAAI;EACpB;EAEA,OAAOG,IAAIA,CAACJ,KAAa,EAAE;IACvB,OAAO,IAAIJ,SAAS,CAACI,KAAK,CAAC;EAC/B;EAEA,OAAOK,SAASA,CAACJ,IAAY,EAAW;IACpC,OAAO,IAAIL,SAAS,CAACK,IAAI,CAAC,CAACI,SAAS,CAAC,CAAC;EAC1C;EAEAA,SAASA,CAAA,EAAG;IACR,OAAO,IAAI,CAACR,QAAQ,CAACS,QAAQ,CAACC,MAAM,CAAC,IAAI,CAACP,KAAK,CAAC,CAAC;EACrD;EAEAQ,QAAQA,CAACC,YAAqB,EAAE;IAC5B,OAAO,IAAI,CAACT,KAAK,GAAG,IAAI,CAACA,KAAK,CAACU,QAAQ,CAAC,CAAC,GAAID,YAAY,IAAI,EAAG;EACpE;EAEAE,OAAOA,CAACV,IAAY,EAAE;IAClB,IAAI,IAAI,CAACI,SAAS,CAAC,CAAC,EAAE;MAClB,IAAI,CAACL,KAAK,GAAG,GAAG;IACpB;IACA,IAAI,CAACC,IAAI,GAAGA,IAAI;EACpB;EAEAW,OAAOA,CAAA,EAAG;IACN,OAAO,IAAI,CAACX,IAAI;EACpB;EAEAS,QAAQA,CAAA,EAAG;IACP,OAAO,GAAG,IAAI,CAACV,KAAK,GAAG,IAAI,CAACC,IAAI,EAAE;EACtC;EAEQE,UAAUA,CAACU,GAAW,EAAE;IAC5B,OAAO,IAAI,CAAChB,QAAQ,CAACS,QAAQ,CAACO,GAAG,CAAC;EACtC;AACJ","ignoreList":[]}

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/UnitValuePicker.js CHANGED Viewed

@@ -33,9 +33,9 @@ export const UnitValuePicker = props => {
     props.onChangePreview(`${finalValue}${props.unit}`);
   };
   return /*#__PURE__*/React.createElement("div", {
-    className: "wby-flex wby-flex-row wby-space-x-sm"
+    className: "flex flex-row space-x-sm"
   }, /*#__PURE__*/React.createElement("div", {
-    className: "wby-flex-col"
+    className: "flex-col"
   }, /*#__PURE__*/React.createElement(Input, {
     disabled: isAuto,
     size: "md",
@@ -46,7 +46,7 @@ export const UnitValuePicker = props => {
     onBlur: e => setValue(e.target.value),
     autoFocus: true
   })), /*#__PURE__*/React.createElement("div", {
-    className: "wby-flex-col"
+    className: "flex-col"
   }, /*#__PURE__*/React.createElement(Select, {
     size: "md",
     value: props.unit,

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/UnitValuePicker.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["React","useState","Input","Select","Value","from","value","parseInt","capTo100","UnitValuePicker","props","editing","setEditing","defaultValue","isAuto","currentValue","onEnter","setValue","setUnit","unit","includes","onChange","parsedValue","finalValue","isNaN","setPreviewValue","onChangePreview","createElement","className","disabled","size","autoSelect","onBlur","e","target","autoFocus","options","units","displayResetAction"],"sources":["UnitValuePicker.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { Input, Select } from \"@webiny/admin-ui\";\n\nexport type UnitOption = {\n label: string;\n value: string;\n};\n\ninterface UnitValueProps {\n value: string;\n unit: string;\n units: UnitOption[];\n onChange: (value: string) => void;\n onChangePreview: (value: string) => void;\n}\n\nclass Value {\n static from(value: string \| undefined) {\n return value === \"auto\" ? 0 : parseInt(value ?? \"0\");\n }\n}\n\nconst capTo100 = [\"%\", \"vh\", \"vw\"];\n\nexport const UnitValuePicker = (props: UnitValueProps) => {\n const [editing, setEditing] = useState(false);\n\n const defaultValue = editing ? \"\" : 0;\n\n const isAuto = props.value === \"auto\";\n\n const currentValue = Value.from(props.value);\n\n const onEnter = () => {\n setValue(props.value);\n };\n\n const setUnit = (unit: string) => {\n const value = capTo100.includes(unit) && currentValue > 100 ? 100 : currentValue;\n props.onChange(unit === \"auto\" ? \"auto\" : `${value}${unit}`);\n };\n\n const setValue = (value: string) => {\n const parsedValue = Value.from(value);\n const finalValue = isNaN(parsedValue) ? 0 : parsedValue;\n props.onChange(`${finalValue}${props.unit}`);\n };\n\n const setPreviewValue = (value: string) => {\n setEditing(true);\n let finalValue: string \| number = \"\";\n if (value !== \"\") {\n const parsedValue = parseInt(value);\n finalValue = isNaN(parsedValue) ? 0 : parsedValue;\n }\n props.onChangePreview(`${finalValue}${props.unit}`);\n };\n\n return (\n <div className={\"~~wby-~~flex ~~wby-~~flex-row ~~wby-~~space-x-sm\"}>\n <div className={\"~~wby-~~flex-col\"}>\n <Input\n disabled={isAuto}\n size={\"md\"}\n value={isAuto ? \"-\" : props.value ?? defaultValue}\n onEnter={onEnter}\n autoSelect={true}\n onChange={value => setPreviewValue(value)}\n onBlur={e => setValue(e.target.value)}\n autoFocus={true}\n />\n </div>\n <div className={\"~~wby-~~flex-col\"}>\n <Select\n size=\"md\"\n value={props.unit}\n options={props.units}\n onChange={setUnit}\n displayResetAction={false}\n />\n </div>\n </div>\n );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AACvC,SAASC,KAAK,EAAEC,MAAM,QAAQ,kBAAkB;AAehD,MAAMC,KAAK,CAAC;EACR,OAAOC,IAAIA,CAACC,KAAyB,EAAE;IACnC,OAAOA,KAAK,KAAK,MAAM,GAAG,CAAC,GAAGC,QAAQ,CAACD,KAAK,IAAI,GAAG,CAAC;EACxD;AACJ;AAEA,MAAME,QAAQ,GAAG,CAAC,GAAG,EAAE,IAAI,EAAE,IAAI,CAAC;AAElC,OAAO,MAAMC,eAAe,GAAIC,KAAqB,IAAK;EACtD,MAAM,CAACC,OAAO,EAAEC,UAAU,CAAC,GAAGX,QAAQ,CAAC,KAAK,CAAC;EAE7C,MAAMY,YAAY,GAAGF,OAAO,GAAG,EAAE,GAAG,CAAC;EAErC,MAAMG,MAAM,GAAGJ,KAAK,CAACJ,KAAK,KAAK,MAAM;EAErC,MAAMS,YAAY,GAAGX,KAAK,CAACC,IAAI,CAACK,KAAK,CAACJ,KAAK,CAAC;EAE5C,MAAMU,OAAO,GAAGA,CAAA,KAAM;IAClBC,QAAQ,CAACP,KAAK,CAACJ,KAAK,CAAC;EACzB,CAAC;EAED,MAAMY,OAAO,GAAIC,IAAY,IAAK;IAC9B,MAAMb,KAAK,GAAGE,QAAQ,CAACY,QAAQ,CAACD,IAAI,CAAC,IAAIJ,YAAY,GAAG,GAAG,GAAG,GAAG,GAAGA,YAAY;IAChFL,KAAK,CAACW,QAAQ,CAACF,IAAI,KAAK,MAAM,GAAG,MAAM,GAAG,GAAGb,KAAK,GAAGa,IAAI,EAAE,CAAC;EAChE,CAAC;EAED,MAAMF,QAAQ,GAAIX,KAAa,IAAK;IAChC,MAAMgB,WAAW,GAAGlB,KAAK,CAACC,IAAI,CAACC,KAAK,CAAC;IACrC,MAAMiB,UAAU,GAAGC,KAAK,CAACF,WAAW,CAAC,GAAG,CAAC,GAAGA,WAAW;IACvDZ,KAAK,CAACW,QAAQ,CAAC,GAAGE,UAAU,GAAGb,KAAK,CAACS,IAAI,EAAE,CAAC;EAChD,CAAC;EAED,MAAMM,eAAe,GAAInB,KAAa,IAAK;IACvCM,UAAU,CAAC,IAAI,CAAC;IAChB,IAAIW,UAA2B,GAAG,EAAE;IACpC,IAAIjB,KAAK,KAAK,EAAE,EAAE;MACd,MAAMgB,WAAW,GAAGf,QAAQ,CAACD,KAAK,CAAC;MACnCiB,UAAU,GAAGC,KAAK,CAACF,WAAW,CAAC,GAAG,CAAC,GAAGA,WAAW;IACrD;IACAZ,KAAK,CAACgB,eAAe,CAAC,GAAGH,UAAU,GAAGb,KAAK,CAACS,IAAI,EAAE,CAAC;EACvD,CAAC;EAED,oBACInB,KAAA,CAAA2B,aAAA;IAAKC,SAAS,EAAE;~~EAAuC~~,~~gBACnD5B~~,KAAA,CAAA2B,aAAA;IAAKC,SAAS,EAAE;~~EAAe~~,~~gBAC3B5B~~,KAAA,CAAA2B,aAAA,CAACzB,KAAK;IACF2B,QAAQ,EAAEf,MAAO;IACjBgB,IAAI,EAAE,IAAK;IACXxB,KAAK,EAAEQ,MAAM,GAAG,GAAG,~~GAAGJ~~,KAAK,CAACJ,KAAK,IAAIO,~~YAAa~~;~~IAClDG~~,OAAO,EAAEA,OAAQ;IACjBe,UAAU,EAAE,IAAK;IACjBV,QAAQ,EAAEf,KAAK,IAAImB,eAAe,CAACnB,KAAK,CAAE;IAC1C0B,MAAM,EAAEC,CAAC,IAAIhB,QAAQ,CAACgB,CAAC,CAACC,MAAM,CAAC5B,KAAK,CAAE;IACtC6B,SAAS,EAAE;EAAK,CACnB,CACA,CAAC,eACNnC,KAAA,CAAA2B,aAAA;IAAKC,SAAS,EAAE;~~EAAe~~,~~gBAC3B5B~~,KAAA,CAAA2B,aAAA,CAACxB,MAAM;IACH2B,IAAI,EAAC,IAAI;IACTxB,KAAK,EAAEI,KAAK,CAACS,IAAK;IAClBiB,OAAO,EAAE1B,KAAK,CAAC2B,KAAM;IACrBhB,QAAQ,EAAEH,OAAQ;IAClBoB,kBAAkB,EAAE;EAAM,CAC7B,CACA,CACJ,CAAC;AAEd,CAAC","ignoreList":[]}
1	+ {"version":3,"names":["React","useState","Input","Select","Value","from","value","parseInt","capTo100","UnitValuePicker","props","editing","setEditing","defaultValue","isAuto","currentValue","onEnter","setValue","setUnit","unit","includes","onChange","parsedValue","finalValue","isNaN","setPreviewValue","onChangePreview","createElement","className","disabled","size","autoSelect","onBlur","e","target","autoFocus","options","units","displayResetAction"],"sources":["UnitValuePicker.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { Input, Select } from \"@webiny/admin-ui\";\n\nexport type UnitOption = {\n label: string;\n value: string;\n};\n\ninterface UnitValueProps {\n value: string;\n unit: string;\n units: UnitOption[];\n onChange: (value: string) => void;\n onChangePreview: (value: string) => void;\n}\n\nclass Value {\n static from(value: string \| undefined) {\n return value === \"auto\" ? 0 : parseInt(value ?? \"0\");\n }\n}\n\nconst capTo100 = [\"%\", \"vh\", \"vw\"];\n\nexport const UnitValuePicker = (props: UnitValueProps) => {\n const [editing, setEditing] = useState(false);\n\n const defaultValue = editing ? \"\" : 0;\n\n const isAuto = props.value === \"auto\";\n\n const currentValue = Value.from(props.value);\n\n const onEnter = () => {\n setValue(props.value);\n };\n\n const setUnit = (unit: string) => {\n const value = capTo100.includes(unit) && currentValue > 100 ? 100 : currentValue;\n props.onChange(unit === \"auto\" ? \"auto\" : `${value}${unit}`);\n };\n\n const setValue = (value: string) => {\n const parsedValue = Value.from(value);\n const finalValue = isNaN(parsedValue) ? 0 : parsedValue;\n props.onChange(`${finalValue}${props.unit}`);\n };\n\n const setPreviewValue = (value: string) => {\n setEditing(true);\n let finalValue: string \| number = \"\";\n if (value !== \"\") {\n const parsedValue = parseInt(value);\n finalValue = isNaN(parsedValue) ? 0 : parsedValue;\n }\n props.onChangePreview(`${finalValue}${props.unit}`);\n };\n\n return (\n <div className={\"flex flex-row space-x-sm\"}>\n <div className={\"flex-col\"}>\n <Input\n disabled={isAuto}\n size={\"md\"}\n value={isAuto ? \"-\" : (props.value ?? defaultValue)}\n onEnter={onEnter}\n autoSelect={true}\n onChange={value => setPreviewValue(value)}\n onBlur={e => setValue(e.target.value)}\n autoFocus={true}\n />\n </div>\n <div className={\"flex-col\"}>\n <Select\n size=\"md\"\n value={props.unit}\n options={props.units}\n onChange={setUnit}\n displayResetAction={false}\n />\n </div>\n </div>\n );\n};\n"],"mappings":"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","ignoreList":[]}

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/ValueSelector.js CHANGED Viewed

@@ -1,9 +1,9 @@
 import React, { useCallback, useRef, useState } from "react";
 import { cn, DropdownMenu, FormComponentLabel, FormComponentNote, Input, Select, Separator } from "@webiny/admin-ui";
-import { InheritedFrom } from "../InheritanceLabel";
-import { useBreakpoint } from "../../../hooks/useBreakpoint";
-import { BASE_BREAKPOINT } from "../../../../constants";
-import { UnitValue } from "./UnitValue";
+import { InheritedFrom } from "../InheritanceLabel.js";
+import { useBreakpoint } from "../../../hooks/useBreakpoint.js";
+import { BASE_BREAKPOINT } from "../../../../constants.js";
+import { UnitValue } from "./UnitValue.js";
 export const ValueSelector = props => {
   const {
     breakpoint
@@ -51,7 +51,7 @@ export const ValueSelector = props => {
     props.onReset();
     setIsOpen(false);
   };
-  const classNames = cn(["wby-cursor-pointer wby-bg-neutral-base", "wby-border-sm wby-border-solid wby-border-neutral-muted", props.overridden && props.inheritedFrom && "wby-bg-success-default wby-text-neutral-light", props.disabled && "wby-bg-neutral-disabled wby-text-neutral-disabled wby-pointer-events-none", "wby-flex wby-flex-row wby-text-sm wby-mx-auto wby-justify-center wby-rounded-sm wby-py-[1px] wby-px-[2px]"]);
+  const classNames = cn(["cursor-pointer bg-neutral-base", "border-sm border-solid border-neutral-muted", props.overridden && props.inheritedFrom && "bg-success text-neutral-light", props.disabled && "bg-neutral-disabled text-neutral-disabled pointer-events-none", "flex flex-row text-sm mx-auto justify-center rounded-sm py-px px-xxs"]);
   const label = /*#__PURE__*/React.createElement("div", {
     className: classNames,
     onClick: () => setIsOpen(true),
@@ -62,9 +62,9 @@ export const ValueSelector = props => {
   const controls = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FormComponentLabel, {
     text: props.label
   }), /*#__PURE__*/React.createElement("div", {
-    className: "wby-flex wby-flex-row wby-space-x-sm"
+    className: "flex flex-row space-x-sm"
   }, /*#__PURE__*/React.createElement("div", {
-    className: "wby-flex-col"
+    className: "flex-col"
   }, /*#__PURE__*/React.createElement(Input, {
     onKeyDown: trackTyping,
     inputRef: inputRef,
@@ -77,7 +77,7 @@ export const ValueSelector = props => {
     onBlur: e => setValue(e.target.value),
     autoFocus: true
   })), /*#__PURE__*/React.createElement("div", {
-    className: "wby-flex-col"
+    className: "flex-col"
   }, /*#__PURE__*/React.createElement(Select, {
     size: "md",
     value: props.unit,
@@ -93,16 +93,16 @@ export const ValueSelector = props => {
     text: `Hit "Enter" or click outside the menu to close it.`
   }));
   return /*#__PURE__*/React.createElement("div", {
-    className: "wby-flex wby-flex-col wby-w-full"
+    className: "flex flex-col w-full"
   }, /*#__PURE__*/React.createElement(DropdownMenu, {
     open: isOpen,
     onOpenChange: () => setIsOpen(false),
     trigger: label,
     align: "center",
     side: "bottom",
-    className: "wby-shadow-lg"
+    className: "shadow-lg"
   }, /*#__PURE__*/React.createElement("div", {
-    className: "wby-p-sm wby-text-sm",
+    className: "p-sm text-sm",
     style: {
       width: 200
     }

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/ValueSelector.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["React","useCallback","useRef","useState","cn","DropdownMenu","FormComponentLabel","FormComponentNote","Input","Select","Separator","InheritedFrom","useBreakpoint","BASE_BREAKPOINT","UnitValue","ValueSelector","props","breakpoint","editing","setEditing","isOpen","setIsOpen","inputChanged","setInputChanged","inputRef","defaultValue","currentValue","from","value","trackTyping","onEnter","setValue","setUnit","unit","onChange","toString","parsedValue","finalValue","getValue","setTimeout","setPreviewValue","parseInt","isNaN","onChangePreview","onReset","classNames","overridden","inheritedFrom","disabled","label","createElement","className","onClick","style","width","isKeyword","controls","Fragment","text","onKeyDown","size","autoSelect","onBlur","e","target","autoFocus","options","units","current","focus","displayResetAction","open","onOpenChange","trigger","align","side","name","variant","margin","overriddenAt"],"sources":["ValueSelector.tsx"],"sourcesContent":["import React, { useCallback, useRef, useState } from \"react\";\nimport {\n cn,\n DropdownMenu,\n FormComponentLabel,\n FormComponentNote,\n Input,\n Select,\n Separator\n} from \"@webiny/admin-ui\";\nimport { InheritedFrom } from \"~/BaseEditor/defaultConfig/Sidebar/InheritanceLabel\";\nimport { useBreakpoint } from \"~/BaseEditor/hooks/useBreakpoint\";\nimport { BASE_BREAKPOINT } from \"~/constants\";\nimport { UnitValue } from \"./UnitValue\";\n\ntype Option = {\n label: string;\n value: string;\n};\n\ninterface ValueSelectorProps {\n label: React.ReactNode;\n value: string;\n unit: string;\n isKeyword: boolean;\n units: Option[];\n onChange: (value: string) => void;\n onChangePreview: (value: string) => void;\n onReset: () => void;\n inheritedFrom?: string;\n overridden?: boolean;\n disabled?: boolean;\n}\n\nexport const ValueSelector = (props: ValueSelectorProps) => {\n const { breakpoint } = useBreakpoint();\n const [editing, setEditing] = useState(false);\n const [isOpen, setIsOpen] = useState(false);\n const [inputChanged, setInputChanged] = useState(false);\n const inputRef = useRef<HTMLInputElement \| null>(null);\n\n const defaultValue = editing ? \"\" : 0;\n\n const currentValue = UnitValue.from(props.value);\n\n const trackTyping = useCallback(() => {\n setInputChanged(true);\n }, [setInputChanged]);\n\n const onEnter = () => {\n setValue(props.value);\n setIsOpen(false);\n };\n\n const setUnit = (unit: string) => {\n setEditing(false);\n currentValue.setUnit(unit);\n props.onChange(currentValue.toString());\n };\n\n const setValue = (value: string) => {\n const parsedValue = UnitValue.from(value);\n if (!inputChanged) {\n return;\n }\n const finalValue = parsedValue.getValue(\"0\");\n props.onChange(`${finalValue}${props.unit}`);\n\n setInputChanged(false);\n setTimeout(() => {\n setEditing(false);\n }, 20);\n };\n\n const setPreviewValue = (value: string) => {\n setEditing(true);\n let finalValue: string \| number = \"\";\n if (value !== \"\") {\n const parsedValue = parseInt(value);\n finalValue = isNaN(parsedValue) ? 0 : parsedValue;\n }\n props.onChangePreview(`${finalValue}${props.unit}`);\n };\n\n const onReset = () => {\n props.onReset();\n setIsOpen(false);\n };\n\n const classNames = cn([\n \"wby-cursor-pointer wby-bg-neutral-base\",\n \"wby-border-sm wby-border-solid wby-border-neutral-muted\",\n props.overridden && props.inheritedFrom && \"wby-bg-success-default wby-text-neutral-light\",\n props.disabled &&\n \"wby-bg-neutral-disabled wby-text-neutral-disabled wby-pointer-events-none\",\n \"wby-flex wby-flex-row wby-text-sm wby-mx-auto wby-justify-center wby-rounded-sm wby-py-[1px] wby-px-[2px]\"\n ]);\n\n const label = (\n <div className={classNames} onClick={() => setIsOpen(true)} style={{ width: 45 }}>\n {props.value ?? 0} {props.isKeyword ? null : props.unit}\n </div>\n );\n\n const controls = (\n <>\n <FormComponentLabel text={props.label} />\n <div className={\"wby-flex wby-flex-row wby-space-x-sm\"}>\n <div className={\"wby-flex-col\"}>\n <Input\n onKeyDown={trackTyping}\n inputRef={inputRef}\n disabled={props.isKeyword}\n size={\"md\"}\n value={props.isKeyword ? \"-\" : props.value ?? defaultValue}\n onEnter={onEnter}\n autoSelect={true}\n onChange={value => setPreviewValue(value)}\n onBlur={e => setValue(e.target.value)}\n autoFocus={true}\n />\n </div>\n <div className={\"wby-flex-col\"}>\n <Select\n size=\"md\"\n value={props.unit}\n options={props.units}\n onChange={unit => {\n setUnit(unit);\n setTimeout(() => {\n inputRef.current?.focus();\n }, 20);\n }}\n displayResetAction={false}\n />\n </div>\n </div>\n <FormComponentNote text={`Hit \"Enter\" or click outside the menu to close it.`} />\n </>\n );\n\n return (\n <div className={\"wby-flex wby-flex-col wby-w-full\"}>\n <DropdownMenu\n open={isOpen}\n onOpenChange={() => setIsOpen(false)}\n trigger={label}\n align=\"center\"\n side=\"bottom\"\n className={\"wby-shadow-lg\"}\n >\n <div className={\"wby-p-sm wby-text-sm\"} style={{ width: 200 }}>\n {controls}\n {BASE_BREAKPOINT === breakpoint.name ? null : (\n <>\n <Separator variant={\"dimmed\"} margin={\"lg\"} />\n <InheritedFrom\n inheritedFrom={props.inheritedFrom ?? BASE_BREAKPOINT}\n overriddenAt={props.overridden ? breakpoint.name : null}\n onReset={onReset}\n />\n </>\n )}\n </div>\n </DropdownMenu>\n </div>\n );\n};\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"names":["React","useCallback","useRef","useState","cn","DropdownMenu","FormComponentLabel","FormComponentNote","Input","Select","Separator","InheritedFrom","useBreakpoint","BASE_BREAKPOINT","UnitValue","ValueSelector","props","breakpoint","editing","setEditing","isOpen","setIsOpen","inputChanged","setInputChanged","inputRef","defaultValue","currentValue","from","value","trackTyping","onEnter","setValue","setUnit","unit","onChange","toString","parsedValue","finalValue","getValue","setTimeout","setPreviewValue","parseInt","isNaN","onChangePreview","onReset","classNames","overridden","inheritedFrom","disabled","label","createElement","className","onClick","style","width","isKeyword","controls","Fragment","text","onKeyDown","size","autoSelect","onBlur","e","target","autoFocus","options","units","current","focus","displayResetAction","open","onOpenChange","trigger","align","side","name","variant","margin","overriddenAt"],"sources":["ValueSelector.tsx"],"sourcesContent":["import React, { useCallback, useRef, useState } from \"react\";\nimport {\n cn,\n DropdownMenu,\n FormComponentLabel,\n FormComponentNote,\n Input,\n Select,\n Separator\n} from \"@webiny/admin-ui\";\nimport { InheritedFrom } from \"~/BaseEditor/defaultConfig/Sidebar/InheritanceLabel.js\";\nimport { useBreakpoint } from \"~/BaseEditor/hooks/useBreakpoint.js\";\nimport { BASE_BREAKPOINT } from \"~/constants.js\";\nimport { UnitValue } from \"./UnitValue.js\";\n\ntype Option = {\n label: string;\n value: string;\n};\n\ninterface ValueSelectorProps {\n label: React.ReactNode;\n value: string;\n unit: string;\n isKeyword: boolean;\n units: Option[];\n onChange: (value: string) => void;\n onChangePreview: (value: string) => void;\n onReset: () => void;\n inheritedFrom?: string;\n overridden?: boolean;\n disabled?: boolean;\n}\n\nexport const ValueSelector = (props: ValueSelectorProps) => {\n const { breakpoint } = useBreakpoint();\n const [editing, setEditing] = useState(false);\n const [isOpen, setIsOpen] = useState(false);\n const [inputChanged, setInputChanged] = useState(false);\n const inputRef = useRef<HTMLInputElement \| null>(null);\n\n const defaultValue = editing ? \"\" : 0;\n\n const currentValue = UnitValue.from(props.value);\n\n const trackTyping = useCallback(() => {\n setInputChanged(true);\n }, [setInputChanged]);\n\n const onEnter = () => {\n setValue(props.value);\n setIsOpen(false);\n };\n\n const setUnit = (unit: string) => {\n setEditing(false);\n currentValue.setUnit(unit);\n props.onChange(currentValue.toString());\n };\n\n const setValue = (value: string) => {\n const parsedValue = UnitValue.from(value);\n if (!inputChanged) {\n return;\n }\n const finalValue = parsedValue.getValue(\"0\");\n props.onChange(`${finalValue}${props.unit}`);\n\n setInputChanged(false);\n setTimeout(() => {\n setEditing(false);\n }, 20);\n };\n\n const setPreviewValue = (value: string) => {\n setEditing(true);\n let finalValue: string \| number = \"\";\n if (value !== \"\") {\n const parsedValue = parseInt(value);\n finalValue = isNaN(parsedValue) ? 0 : parsedValue;\n }\n props.onChangePreview(`${finalValue}${props.unit}`);\n };\n\n const onReset = () => {\n props.onReset();\n setIsOpen(false);\n };\n\n const classNames = cn([\n \"cursor-pointer bg-neutral-base\",\n \"border-sm border-solid border-neutral-muted\",\n props.overridden && props.inheritedFrom && \"bg-success text-neutral-light\",\n props.disabled && \"bg-neutral-disabled text-neutral-disabled pointer-events-none\",\n \"flex flex-row text-sm mx-auto justify-center rounded-sm py-px px-xxs\"\n ]);\n\n const label = (\n <div className={classNames} onClick={() => setIsOpen(true)} style={{ width: 45 }}>\n {props.value ?? 0} {props.isKeyword ? null : props.unit}\n </div>\n );\n\n const controls = (\n <>\n <FormComponentLabel text={props.label} />\n <div className={\"flex flex-row space-x-sm\"}>\n <div className={\"flex-col\"}>\n <Input\n onKeyDown={trackTyping}\n inputRef={inputRef}\n disabled={props.isKeyword}\n size={\"md\"}\n value={props.isKeyword ? \"-\" : (props.value ?? defaultValue)}\n onEnter={onEnter}\n autoSelect={true}\n onChange={value => setPreviewValue(value)}\n onBlur={e => setValue(e.target.value)}\n autoFocus={true}\n />\n </div>\n <div className={\"flex-col\"}>\n <Select\n size=\"md\"\n value={props.unit}\n options={props.units}\n onChange={unit => {\n setUnit(unit);\n setTimeout(() => {\n inputRef.current?.focus();\n }, 20);\n }}\n displayResetAction={false}\n />\n </div>\n </div>\n <FormComponentNote text={`Hit \"Enter\" or click outside the menu to close it.`} />\n </>\n );\n\n return (\n <div className={\"flex flex-col w-full\"}>\n <DropdownMenu\n open={isOpen}\n onOpenChange={() => setIsOpen(false)}\n trigger={label}\n align=\"center\"\n side=\"bottom\"\n className={\"shadow-lg\"}\n >\n <div className={\"p-sm text-sm\"} style={{ width: 200 }}>\n {controls}\n {BASE_BREAKPOINT === breakpoint.name ? null : (\n <>\n <Separator variant={\"dimmed\"} margin={\"lg\"} />\n <InheritedFrom\n inheritedFrom={props.inheritedFrom ?? BASE_BREAKPOINT}\n overriddenAt={props.overridden ? breakpoint.name : null}\n onReset={onReset}\n />\n </>\n )}\n </div>\n </DropdownMenu>\n </div>\n );\n};\n"],"mappings":"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","ignoreList":[]}

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/useStyleValue.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 export declare const useStyleValue: (elementId: string, propertyName: string, defaultValue?: string) => {
-    store: import("./StylesStore").StylesStore;
+    store: import("./StylesStore.js").StylesStore;
     value: string;
     unit: string;
     isKeyword: boolean;

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/useStyleValue.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { useCallback } from "react";
-import { useStyles } from "./useStyles";
-import { UnitValue } from "./UnitValue";
+import { useStyles } from "./useStyles.js";
+import { UnitValue } from "./UnitValue.js";
 export const useStyleValue = (elementId, propertyName, defaultValue) => {
   const {
     styles,

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/useStyleValue.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["useCallback","useStyles","UnitValue","useStyleValue","elementId","propertyName","defaultValue","styles","onChange","onPreviewChange","inheritanceMap","store","unitValue","from","overridden","inheritedFrom","onValueChange","value","set","onValueChangePreview","onValueReset","unset","getValue","unit","getUnit","isKeyword","onChangePreview","onReset"],"sources":["useStyleValue.ts"],"sourcesContent":["import { useCallback } from \"react\";\nimport { useStyles } from \"./useStyles\";\nimport { UnitValue } from \"./UnitValue\";\n\nexport const useStyleValue = (elementId: string, propertyName: string, defaultValue?: string) => {\n const { styles, onChange, onPreviewChange, inheritanceMap, store } = useStyles(elementId);\n const unitValue = UnitValue.from(styles[propertyName] ?? defaultValue ?? \"\");\n\n const { overridden, inheritedFrom } = inheritanceMap[propertyName] ?? {};\n\n const onValueChange = useCallback(\n (value: string) => {\n onChange(({ styles }) => {\n styles.set(propertyName, value);\n });\n },\n [elementId, propertyName]\n );\n\n const onValueChangePreview = useCallback(\n (value: string) => {\n onPreviewChange(({ styles }) => {\n styles.set(propertyName, value);\n });\n },\n [elementId, propertyName]\n );\n\n const onValueReset = useCallback(() => {\n onChange(({ styles }) => {\n styles.unset(propertyName);\n });\n }, [elementId, propertyName]);\n\n return {\n store,\n value: unitValue.getValue(),\n unit: unitValue.getUnit(),\n isKeyword: unitValue.isKeyword(),\n onChange: onValueChange,\n onChangePreview: onValueChangePreview,\n onReset: onValueReset,\n inheritedFrom,\n overridden\n };\n};\n"],"mappings":"AAAA,SAASA,WAAW,QAAQ,OAAO;AACnC,SAASC,SAAS;AAClB,SAASC,SAAS;AAElB,OAAO,MAAMC,aAAa,GAAGA,CAACC,SAAiB,EAAEC,YAAoB,EAAEC,YAAqB,KAAK;EAC7F,MAAM;IAAEC,MAAM;IAAEC,QAAQ;IAAEC,eAAe;IAAEC,cAAc;IAAEC;EAAM,CAAC,GAAGV,SAAS,CAACG,SAAS,CAAC;EACzF,MAAMQ,SAAS,GAAGV,SAAS,CAACW,IAAI,CAACN,MAAM,CAACF,YAAY,CAAC,IAAIC,YAAY,IAAI,EAAE,CAAC;EAE5E,MAAM;IAAEQ,UAAU;IAAEC;EAAc,CAAC,GAAGL,cAAc,CAACL,YAAY,CAAC,IAAI,CAAC,CAAC;EAExE,MAAMW,aAAa,GAAGhB,WAAW,CAC5BiB,KAAa,IAAK;IACfT,QAAQ,CAAC,CAAC;MAAED;IAAO,CAAC,KAAK;MACrBA,MAAM,CAACW,GAAG,CAACb,YAAY,EAAEY,KAAK,CAAC;IACnC,CAAC,CAAC;EACN,CAAC,EACD,CAACb,SAAS,EAAEC,YAAY,CAC5B,CAAC;EAED,MAAMc,oBAAoB,GAAGnB,WAAW,CACnCiB,KAAa,IAAK;IACfR,eAAe,CAAC,CAAC;MAAEF;IAAO,CAAC,KAAK;MAC5BA,MAAM,CAACW,GAAG,CAACb,YAAY,EAAEY,KAAK,CAAC;IACnC,CAAC,CAAC;EACN,CAAC,EACD,CAACb,SAAS,EAAEC,YAAY,CAC5B,CAAC;EAED,MAAMe,YAAY,GAAGpB,WAAW,CAAC,MAAM;IACnCQ,QAAQ,CAAC,CAAC;MAAED;IAAO,CAAC,KAAK;MACrBA,MAAM,CAACc,KAAK,CAAChB,YAAY,CAAC;IAC9B,CAAC,CAAC;EACN,CAAC,EAAE,CAACD,SAAS,EAAEC,YAAY,CAAC,CAAC;EAE7B,OAAO;IACHM,KAAK;IACLM,KAAK,EAAEL,SAAS,CAACU,QAAQ,CAAC,CAAC;IAC3BC,IAAI,EAAEX,SAAS,CAACY,OAAO,CAAC,CAAC;IACzBC,SAAS,EAAEb,SAAS,CAACa,SAAS,CAAC,CAAC;IAChCjB,QAAQ,EAAEQ,aAAa;IACvBU,eAAe,EAAEP,oBAAoB;IACrCQ,OAAO,EAAEP,YAAY;IACrBL,aAAa;IACbD;EACJ,CAAC;AACL,CAAC","ignoreList":[]}
1	+ {"version":3,"names":["useCallback","useStyles","UnitValue","useStyleValue","elementId","propertyName","defaultValue","styles","onChange","onPreviewChange","inheritanceMap","store","unitValue","from","overridden","inheritedFrom","onValueChange","value","set","onValueChangePreview","onValueReset","unset","getValue","unit","getUnit","isKeyword","onChangePreview","onReset"],"sources":["useStyleValue.ts"],"sourcesContent":["import { useCallback } from \"react\";\nimport { useStyles } from \"./useStyles.js\";\nimport { UnitValue } from \"./UnitValue.js\";\n\nexport const useStyleValue = (elementId: string, propertyName: string, defaultValue?: string) => {\n const { styles, onChange, onPreviewChange, inheritanceMap, store } = useStyles(elementId);\n const unitValue = UnitValue.from(styles[propertyName] ?? defaultValue ?? \"\");\n\n const { overridden, inheritedFrom } = inheritanceMap[propertyName] ?? {};\n\n const onValueChange = useCallback(\n (value: string) => {\n onChange(({ styles }) => {\n styles.set(propertyName, value);\n });\n },\n [elementId, propertyName]\n );\n\n const onValueChangePreview = useCallback(\n (value: string) => {\n onPreviewChange(({ styles }) => {\n styles.set(propertyName, value);\n });\n },\n [elementId, propertyName]\n );\n\n const onValueReset = useCallback(() => {\n onChange(({ styles }) => {\n styles.unset(propertyName);\n });\n }, [elementId, propertyName]);\n\n return {\n store,\n value: unitValue.getValue(),\n unit: unitValue.getUnit(),\n isKeyword: unitValue.isKeyword(),\n onChange: onValueChange,\n onChangePreview: onValueChangePreview,\n onReset: onValueReset,\n inheritedFrom,\n overridden\n };\n};\n"],"mappings":"AAAA,SAASA,WAAW,QAAQ,OAAO;AACnC,SAASC,SAAS;AAClB,SAASC,SAAS;AAElB,OAAO,MAAMC,aAAa,GAAGA,CAACC,SAAiB,EAAEC,YAAoB,EAAEC,YAAqB,KAAK;EAC7F,MAAM;IAAEC,MAAM;IAAEC,QAAQ;IAAEC,eAAe;IAAEC,cAAc;IAAEC;EAAM,CAAC,GAAGV,SAAS,CAACG,SAAS,CAAC;EACzF,MAAMQ,SAAS,GAAGV,SAAS,CAACW,IAAI,CAACN,MAAM,CAACF,YAAY,CAAC,IAAIC,YAAY,IAAI,EAAE,CAAC;EAE5E,MAAM;IAAEQ,UAAU;IAAEC;EAAc,CAAC,GAAGL,cAAc,CAACL,YAAY,CAAC,IAAI,CAAC,CAAC;EAExE,MAAMW,aAAa,GAAGhB,WAAW,CAC5BiB,KAAa,IAAK;IACfT,QAAQ,CAAC,CAAC;MAAED;IAAO,CAAC,KAAK;MACrBA,MAAM,CAACW,GAAG,CAACb,YAAY,EAAEY,KAAK,CAAC;IACnC,CAAC,CAAC;EACN,CAAC,EACD,CAACb,SAAS,EAAEC,YAAY,CAC5B,CAAC;EAED,MAAMc,oBAAoB,GAAGnB,WAAW,CACnCiB,KAAa,IAAK;IACfR,eAAe,CAAC,CAAC;MAAEF;IAAO,CAAC,KAAK;MAC5BA,MAAM,CAACW,GAAG,CAACb,YAAY,EAAEY,KAAK,CAAC;IACnC,CAAC,CAAC;EACN,CAAC,EACD,CAACb,SAAS,EAAEC,YAAY,CAC5B,CAAC;EAED,MAAMe,YAAY,GAAGpB,WAAW,CAAC,MAAM;IACnCQ,QAAQ,CAAC,CAAC;MAAED;IAAO,CAAC,KAAK;MACrBA,MAAM,CAACc,KAAK,CAAChB,YAAY,CAAC;IAC9B,CAAC,CAAC;EACN,CAAC,EAAE,CAACD,SAAS,EAAEC,YAAY,CAAC,CAAC;EAE7B,OAAO;IACHM,KAAK;IACLM,KAAK,EAAEL,SAAS,CAACU,QAAQ,CAAC,CAAC;IAC3BC,IAAI,EAAEX,SAAS,CAACY,OAAO,CAAC,CAAC;IACzBC,SAAS,EAAEb,SAAS,CAACa,SAAS,CAAC,CAAC;IAChCjB,QAAQ,EAAEQ,aAAa;IACvBU,eAAe,EAAEP,oBAAoB;IACrCQ,OAAO,EAAEP,YAAY;IACrBL,aAAa;IACbD;EACJ,CAAC;AACL,CAAC","ignoreList":[]}

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/useStyles.d.ts CHANGED Viewed

@@ -1,19 +1,19 @@
-import { StylesStore, type ElementBreakpointStyles } from "./StylesStore";
+import { StylesStore, type ElementBreakpointStyles } from "./StylesStore.js";
 export type { ElementBreakpointStyles };
 export declare function useStyles(elementId: string): {
     store: StylesStore;
     styles: Record<string, any>;
-    metadata: import("../../../metadata").IMetadata;
+    metadata: import("../../../metadata/IMetadata.js").IMetadata;
     inheritanceMap: Record<string, {
         overridden: boolean;
-        inheritedFrom?: string | undefined;
+        inheritedFrom?: string;
     }>;
     onChange: (cb: (params: {
-        styles: import("./StylesStore").StylesValueObject;
-        metadata: import("../../../metadata").IMetadata;
+        styles: import("./StylesStore.js").StylesValueObject;
+        metadata: import("../../../metadata/IMetadata.js").IMetadata;
     }) => void) => void;
     onPreviewChange: (cb: (params: {
-        styles: import("./StylesStore").StylesValueObject;
-        metadata: import("../../../metadata").IMetadata;
+        styles: import("./StylesStore.js").StylesValueObject;
+        metadata: import("../../../metadata/IMetadata.js").IMetadata;
     }) => void) => void;
 };

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/useStyles.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { useMemo } from "react";
-import { useDocumentEditor } from "../../../../DocumentEditor";
-import { useBreakpoint } from "../../../hooks/useBreakpoint";
-import { StylesStore } from "./StylesStore";
+import { useDocumentEditor } from "../../../../DocumentEditor/index.js";
+import { useBreakpoint } from "../../../hooks/useBreakpoint.js";
+import { StylesStore } from "./StylesStore.js";
 // Singleton store container
 const stylesStores = new Map();

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/useStyles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["useMemo","useDocumentEditor","useBreakpoint","StylesStore","stylesStores","Map","useStyles","elementId","editor","breakpoints","store","cacheKey","join","get","map","bp","name","set","length","styles","vm","metadata","inheritanceMap","onChange","onPreviewChange"],"sources":["useStyles.ts"],"sourcesContent":["import { useMemo } from \"react\";\nimport { useDocumentEditor } from \"~/DocumentEditor\";\nimport { useBreakpoint } from \"~/BaseEditor/hooks/useBreakpoint\";\nimport { StylesStore, type ElementBreakpointStyles } from \"./StylesStore\";\n\n// Singleton store container\nconst stylesStores = new Map<string, StylesStore>();\n\nexport type { ElementBreakpointStyles };\n\nexport function useStyles(elementId: string) {\n const editor = useDocumentEditor();\n const { breakpoints } = useBreakpoint();\n\n const store = useMemo(() => {\n const cacheKey = [elementId, ...breakpoints].join(\";\");\n // Create or get existing store for this element\n let store = stylesStores.get(cacheKey);\n\n if (!store) {\n store = new StylesStore(\n editor,\n elementId,\n breakpoints.map(bp => bp.name)\n );\n stylesStores.set(cacheKey, store);\n }\n\n return store;\n }, [elementId, breakpoints.length]);\n\n return {\n store,\n styles: store.vm.styles,\n metadata: store.vm.metadata,\n inheritanceMap: store.vm.inheritanceMap,\n onChange: store.onChange,\n onPreviewChange: store.onPreviewChange\n };\n}\n"],"mappings":"AAAA,SAASA,OAAO,QAAQ,OAAO;AAC/B,SAASC,iBAAiB;AAC1B,SAASC,aAAa;AACtB,SAASC,WAAW;;AAEpB;AACA,MAAMC,YAAY,GAAG,IAAIC,GAAG,CAAsB,CAAC;AAInD,OAAO,SAASC,SAASA,CAACC,SAAiB,EAAE;EACzC,MAAMC,MAAM,GAAGP,iBAAiB,CAAC,CAAC;EAClC,MAAM;IAAEQ;EAAY,CAAC,GAAGP,aAAa,CAAC,CAAC;EAEvC,MAAMQ,KAAK,GAAGV,OAAO,CAAC,MAAM;IACxB,MAAMW,QAAQ,GAAG,CAACJ,SAAS,EAAE,GAAGE,WAAW,CAAC,CAACG,IAAI,CAAC,GAAG,CAAC;IACtD;IACA,IAAIF,KAAK,GAAGN,YAAY,CAACS,GAAG,CAACF,QAAQ,CAAC;IAEtC,IAAI,CAACD,KAAK,EAAE;MACRA,KAAK,GAAG,IAAIP,WAAW,CACnBK,MAAM,EACND,SAAS,EACTE,WAAW,CAACK,GAAG,CAACC,EAAE,IAAIA,EAAE,CAACC,IAAI,CACjC,CAAC;MACDZ,YAAY,CAACa,GAAG,CAACN,QAAQ,EAAED,KAAK,CAAC;IACrC;IAEA,OAAOA,KAAK;EAChB,CAAC,EAAE,CAACH,SAAS,EAAEE,WAAW,CAACS,MAAM,CAAC,CAAC;EAEnC,OAAO;IACHR,KAAK;IACLS,MAAM,EAAET,KAAK,CAACU,EAAE,CAACD,MAAM;IACvBE,QAAQ,EAAEX,KAAK,CAACU,EAAE,CAACC,QAAQ;IAC3BC,cAAc,EAAEZ,KAAK,CAACU,EAAE,CAACE,cAAc;IACvCC,QAAQ,EAAEb,KAAK,CAACa,QAAQ;IACxBC,eAAe,EAAEd,KAAK,CAACc;EAC3B,CAAC;AACL","ignoreList":[]}
1	+ {"version":3,"names":["useMemo","useDocumentEditor","useBreakpoint","StylesStore","stylesStores","Map","useStyles","elementId","editor","breakpoints","store","cacheKey","join","get","map","bp","name","set","length","styles","vm","metadata","inheritanceMap","onChange","onPreviewChange"],"sources":["useStyles.ts"],"sourcesContent":["import { useMemo } from \"react\";\nimport { useDocumentEditor } from \"~/DocumentEditor/index.js\";\nimport { useBreakpoint } from \"~/BaseEditor/hooks/useBreakpoint.js\";\nimport { StylesStore, type ElementBreakpointStyles } from \"./StylesStore.js\";\n\n// Singleton store container\nconst stylesStores = new Map<string, StylesStore>();\n\nexport type { ElementBreakpointStyles };\n\nexport function useStyles(elementId: string) {\n const editor = useDocumentEditor();\n const { breakpoints } = useBreakpoint();\n\n const store = useMemo(() => {\n const cacheKey = [elementId, ...breakpoints].join(\";\");\n // Create or get existing store for this element\n let store = stylesStores.get(cacheKey);\n\n if (!store) {\n store = new StylesStore(\n editor,\n elementId,\n breakpoints.map(bp => bp.name)\n );\n stylesStores.set(cacheKey, store);\n }\n\n return store;\n }, [elementId, breakpoints.length]);\n\n return {\n store,\n styles: store.vm.styles,\n metadata: store.vm.metadata,\n inheritanceMap: store.vm.inheritanceMap,\n onChange: store.onChange,\n onPreviewChange: store.onPreviewChange\n };\n}\n"],"mappings":"AAAA,SAASA,OAAO,QAAQ,OAAO;AAC/B,SAASC,iBAAiB;AAC1B,SAASC,aAAa;AACtB,SAASC,WAAW;;AAEpB;AACA,MAAMC,YAAY,GAAG,IAAIC,GAAG,CAAsB,CAAC;AAInD,OAAO,SAASC,SAASA,CAACC,SAAiB,EAAE;EACzC,MAAMC,MAAM,GAAGP,iBAAiB,CAAC,CAAC;EAClC,MAAM;IAAEQ;EAAY,CAAC,GAAGP,aAAa,CAAC,CAAC;EAEvC,MAAMQ,KAAK,GAAGV,OAAO,CAAC,MAAM;IACxB,MAAMW,QAAQ,GAAG,CAACJ,SAAS,EAAE,GAAGE,WAAW,CAAC,CAACG,IAAI,CAAC,GAAG,CAAC;IACtD;IACA,IAAIF,KAAK,GAAGN,YAAY,CAACS,GAAG,CAACF,QAAQ,CAAC;IAEtC,IAAI,CAACD,KAAK,EAAE;MACRA,KAAK,GAAG,IAAIP,WAAW,CACnBK,MAAM,EACND,SAAS,EACTE,WAAW,CAACK,GAAG,CAACC,EAAE,IAAIA,EAAE,CAACC,IAAI,CACjC,CAAC;MACDZ,YAAY,CAACa,GAAG,CAACN,QAAQ,EAAED,KAAK,CAAC;IACrC;IAEA,OAAOA,KAAK;EAChB,CAAC,EAAE,CAACH,SAAS,EAAEE,WAAW,CAACS,MAAM,CAAC,CAAC;EAEnC,OAAO;IACHR,KAAK;IACLS,MAAM,EAAET,KAAK,CAACU,EAAE,CAACD,MAAM;IACvBE,QAAQ,EAAEX,KAAK,CAACU,EAAE,CAACC,QAAQ;IAC3BC,cAAc,EAAEZ,KAAK,CAACU,EAAE,CAACE,cAAc;IACvCC,QAAQ,EAAEb,KAAK,CAACa,QAAQ;IACxBC,eAAe,EAAEd,KAAK,CAACc;EAC3B,CAAC;AACL","ignoreList":[]}

package/BaseEditor/defaultConfig/Toolbar/InsertElements/InsertElements.js CHANGED Viewed

@@ -1,9 +1,9 @@
 import React from "react";
 import { Icon, Card } from "@webiny/admin-ui";
-import { useSelectFromEditor } from "../../../hooks/useSelectFromEditor";
-import { InlineSvg } from "./InlineSvg";
-import { Draggable } from "../../../components/Draggable";
-import { useComponentGroups } from "./useComponentGroups";
+import { useSelectFromEditor } from "../../../hooks/useSelectFromEditor.js";
+import { InlineSvg } from "./InlineSvg.js";
+import { Draggable } from "../../../components/Draggable.js";
+import { useComponentGroups } from "./useComponentGroups.js";
 const GroupComponent = ({
   item
 }) => {
@@ -15,17 +15,15 @@ const GroupComponent = ({
     return /*#__PURE__*/React.createElement(React.Fragment, null);
   }
   return /*#__PURE__*/React.createElement("div", {
-    className: "wby-flex wby-flex-row wby-items-center wby-p-sm wby-bg-neutral-light wby-rounded-sm wby-gap-sm wby-cursor-grab"
+    className: "flex flex-row items-center p-sm bg-neutral-light rounded-sm gap-sm cursor-grab fill-neutral-strong"
   }, /*#__PURE__*/React.createElement(Icon, {
     label: "Icon",
     icon: /*#__PURE__*/React.createElement(InlineSvg, {
-      src: component.image,
-      className: "wby-fill-neutral-strong"
+      src: component.image
     }),
-    size: "md",
-    className: "wby-fill-neutral-strong"
+    size: "md"
   }), /*#__PURE__*/React.createElement("div", {
-    className: "wby-text-sm wby-font-medium wby-text-neutral-primary wby-text-center"
+    className: "text-sm font-medium text-neutral-primary text-center"
   }, component.label ?? component.name));
 };
 export const InsertElements = () => {
@@ -37,11 +35,11 @@ export const InsertElements = () => {
     return /*#__PURE__*/React.createElement(Card, {
       key: group.name,
       title: group.label,
-      description: group.description,
-      borderRadius: "none",
-      padding: "compact"
+      description: group.description
+      // borderRadius={"none"}
+      // padding={""}
     }, /*#__PURE__*/React.createElement("div", {
-      className: "wby-flex wby-flex-col wby-gap-sm wby-p-sm wby-justify-start"
+      className: "flex flex-col gap-sm p-sm justify-start"
     }, group.items.map(item => {
       return /*#__PURE__*/React.createElement(Draggable, {
         key: item.name,

package/BaseEditor/defaultConfig/Toolbar/InsertElements/InsertElements.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["React","Icon","Card","useSelectFromEditor","InlineSvg","Draggable","useComponentGroups","GroupComponent","item","components","state","component","name","createElement","Fragment","className","label","icon","src","image","size","InsertElements","groups","map","group","items","length","key","title","description","~~borderRadius","padding","~~type","componentName","dragRef"],"sources":["InsertElements.tsx"],"sourcesContent":["import React from \"react\";\nimport { Icon, Card } from \"@webiny/admin-ui\";\nimport { useSelectFromEditor } from \"~/BaseEditor/hooks/useSelectFromEditor\";\nimport type { ComponentGroupItem, ComponentManifest } from \"@webiny/website-builder-sdk\";\nimport { InlineSvg } from \"~/BaseEditor/defaultConfig/Toolbar/InsertElements/InlineSvg\";\nimport { Draggable } from \"~/BaseEditor/components/Draggable\";\nimport { useComponentGroups } from \"~/BaseEditor/defaultConfig/Toolbar/InsertElements/useComponentGroups\";\n\nconst GroupComponent = ({ item }: { item: ComponentGroupItem }) => {\n const components = useSelectFromEditor<Record<string, ComponentManifest>>(state => {\n return state.components ?? {};\n });\n\n const component = components[item.name];\n\n if (!component) {\n return <></>;\n }\n\n return (\n <div className=\"~~wby-~~flex ~~wby-~~flex-row ~~wby-~~items-center ~~wby-~~p-sm ~~wby-~~bg-neutral-light ~~wby-~~rounded-sm ~~wby-~~gap-sm ~~wby-~~cursor-grab\">\n <Icon\n label=\"Icon\"\n icon={<InlineSvg src={component.image!} ~~className={\"wby-fill-neutral-strong\"~~} ~~/>}\n~~ size={\"md\"}~~\n className={\"wby-fill-neutral-strong\"}\n~~ />\n <div className=\"~~wby-~~text-sm ~~wby-~~font-medium ~~wby-~~text-neutral-primary ~~wby-~~text-center\">\n {component.label ?? component.name}\n </div>\n </div>\n );\n};\n\nexport const InsertElements = () => {\n const groups = useComponentGroups();\n\n return (\n <>\n {groups.map(group => {\n if (!group.items.length) {\n return null;\n }\n\n return (\n <Card\n key={group.name}\n title={group.label}\n description={group.description}\n borderRadius={\"none\"}\n padding={\"~~compact~~\"}\n >\n <div className=\"~~wby-~~flex ~~wby-~~flex-col ~~wby-~~gap-sm ~~wby-~~p-sm ~~wby-~~justify-start\">\n {group.items.map(item => {\n return (\n <Draggable\n key={item.name}\n type=\"ELEMENT\"\n item={{ componentName: item.name }}\n >\n {({ dragRef }) =>\n dragRef(\n <div>\n <GroupComponent item={item} />\n </div>\n )\n }\n </Draggable>\n );\n })}\n </div>\n </Card>\n );\n })}\n </>\n );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,EAAEC,IAAI,QAAQ,kBAAkB;AAC7C,SAASC,mBAAmB;AAE5B,SAASC,SAAS;AAClB,SAASC,SAAS;AAClB,SAASC,kBAAkB;AAE3B,MAAMC,cAAc,GAAGA,CAAC;EAAEC;AAAmC,CAAC,KAAK;EAC/D,MAAMC,UAAU,GAAGN,mBAAmB,CAAoCO,KAAK,IAAI;IAC/E,OAAOA,KAAK,CAACD,UAAU,IAAI,CAAC,CAAC;EACjC,CAAC,CAAC;EAEF,MAAME,SAAS,GAAGF,UAAU,CAACD,IAAI,CAACI,IAAI,CAAC;EAEvC,IAAI,CAACD,SAAS,EAAE;IACZ,oBAAOX,KAAA,CAAAa,aAAA,CAAAb,KAAA,CAAAc,QAAA,MAAI,CAAC;EAChB;EAEA,oBACId,KAAA,CAAAa,aAAA;IAAKE,SAAS,EAAC;~~EAAgH~~,~~gBAC3Hf~~,KAAA,CAAAa,aAAA,CAACZ,IAAI;~~IACDe~~,KAAK,EAAC,MAAM;~~IACZC~~,IAAI,eAAEjB,KAAA,CAAAa,aAAA,CAACT,SAAS;MAACc,GAAG,EAAEP,SAAS,CAACQ~~,KAAO~~;~~MAACJ~~,~~SAAS,EAAE;IAA0B,~~CAAE,CAAE;~~IACjFK~~,IAAI,EAAE~~,IAAK~~;~~IACXL~~,~~SAAS~~,~~EAAE;EAA0B,CACxC,~~CAAC,~~eACFf~~,KAAA,CAAAa,aAAA;IAAKE,SAAS,EAAC;~~EAAsE~~,~~GAChFJ~~,SAAS,CAACK,KAAK,IAAIL,SAAS,CAACC,IAC7B,CACJ,CAAC;AAEd,CAAC;AAED,OAAO,MAAMS,cAAc,GAAGA,CAAA,KAAM;EAChC,MAAMC,MAAM,GAAGhB,kBAAkB,CAAC,CAAC;EAEnC,oBACIN,KAAA,CAAAa,aAAA,CAAAb,KAAA,CAAAc,QAAA,QACKQ,MAAM,CAACC,GAAG,CAACC,KAAK,IAAI;IACjB,IAAI,CAACA,KAAK,CAACC,KAAK,CAACC,MAAM,EAAE;MACrB,OAAO,IAAI;IACf;IAEA,oBACI1B,KAAA,CAAAa,aAAA,CAACX,IAAI;MACDyB,GAAG,EAAEH,KAAK,CAACZ,IAAK;MAChBgB,KAAK,EAAEJ,KAAK,CAACR,KAAM;MACnBa,WAAW,EAAEL,KAAK,CAACK~~,WAAY~~;~~MAC/BC,YAAY,EAAE,MAAO~~;~~MACrBC,OAAO,EAAE~~;~~IAAU~~,~~gBAEnB/B~~,KAAA,CAAAa,aAAA;MAAKE,SAAS,EAAC;~~IAA6D~~,~~GACvES~~,KAAK,CAACC,KAAK,CAACF,GAAG,CAACf,IAAI,IAAI;MACrB,oBACIR,KAAA,CAAAa,aAAA,CAACR,SAAS;QACNsB,GAAG,EAAEnB,IAAI,CAACI,IAAK;~~QACfoB~~,IAAI,EAAC,SAAS;~~QACdxB~~,IAAI,EAAE;~~UAAEyB~~,aAAa,~~EAAEzB~~,IAAI,CAACI;QAAK;MAAE,GAElC,CAAC;~~QAAEsB~~;MAAQ,CAAC,KACTA,OAAO,~~cACHlC~~,KAAA,CAAAa,aAAA,2BACIb,KAAA,CAAAa,aAAA,CAACN,cAAc;QAACC,IAAI,EAAEA;MAAK,CAAE,CAC5B,CACT,CAEG,CAAC;IAEpB,CAAC,CACA,CACH,CAAC;EAEf,CAAC,CACH,CAAC;AAEX,CAAC","ignoreList":[]}
1	+ {"version":3,"names":["React","Icon","Card","useSelectFromEditor","InlineSvg","Draggable","useComponentGroups","GroupComponent","item","components","state","component","name","createElement","Fragment","className","label","icon","src","image","size","InsertElements","groups","map","group","items","length","key","title","description","type","componentName","dragRef"],"sources":["InsertElements.tsx"],"sourcesContent":["import React from \"react\";\nimport { Icon, Card } from \"@webiny/admin-ui\";\nimport { useSelectFromEditor } from \"~/BaseEditor/hooks/useSelectFromEditor.js\";\nimport type { ComponentGroupItem, ComponentManifest } from \"@webiny/website-builder-sdk\";\nimport { InlineSvg } from \"~/BaseEditor/defaultConfig/Toolbar/InsertElements/InlineSvg.js\";\nimport { Draggable } from \"~/BaseEditor/components/Draggable.js\";\nimport { useComponentGroups } from \"~/BaseEditor/defaultConfig/Toolbar/InsertElements/useComponentGroups.js\";\n\nconst GroupComponent = ({ item }: { item: ComponentGroupItem }) => {\n const components = useSelectFromEditor<Record<string, ComponentManifest>>(state => {\n return state.components ?? {};\n });\n\n const component = components[item.name];\n\n if (!component) {\n return <></>;\n }\n\n return (\n <div className=\"flex flex-row items-center p-sm bg-neutral-light rounded-sm gap-sm cursor-grab fill-neutral-strong\">\n <Icon label=\"Icon\" icon={<InlineSvg src={component.image!} />} size={\"md\"} />\n <div className=\"text-sm font-medium text-neutral-primary text-center\">\n {component.label ?? component.name}\n </div>\n </div>\n );\n};\n\nexport const InsertElements = () => {\n const groups = useComponentGroups();\n\n return (\n <>\n {groups.map(group => {\n if (!group.items.length) {\n return null;\n }\n\n return (\n <Card\n key={group.name}\n title={group.label}\n description={group.description}\n // borderRadius={\"none\"}\n // padding={\"\"}\n >\n <div className=\"flex flex-col gap-sm p-sm justify-start\">\n {group.items.map(item => {\n return (\n <Draggable\n key={item.name}\n type=\"ELEMENT\"\n item={{ componentName: item.name }}\n >\n {({ dragRef }) =>\n dragRef(\n <div>\n <GroupComponent item={item} />\n </div>\n )\n }\n </Draggable>\n );\n })}\n </div>\n </Card>\n );\n })}\n </>\n );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,EAAEC,IAAI,QAAQ,kBAAkB;AAC7C,SAASC,mBAAmB;AAE5B,SAASC,SAAS;AAClB,SAASC,SAAS;AAClB,SAASC,kBAAkB;AAE3B,MAAMC,cAAc,GAAGA,CAAC;EAAEC;AAAmC,CAAC,KAAK;EAC/D,MAAMC,UAAU,GAAGN,mBAAmB,CAAoCO,KAAK,IAAI;IAC/E,OAAOA,KAAK,CAACD,UAAU,IAAI,CAAC,CAAC;EACjC,CAAC,CAAC;EAEF,MAAME,SAAS,GAAGF,UAAU,CAACD,IAAI,CAACI,IAAI,CAAC;EAEvC,IAAI,CAACD,SAAS,EAAE;IACZ,oBAAOX,KAAA,CAAAa,aAAA,CAAAb,KAAA,CAAAc,QAAA,MAAI,CAAC;EAChB;EAEA,oBACId,KAAA,CAAAa,aAAA;IAAKE,SAAS,EAAC;EAAoG,gBAC/Gf,KAAA,CAAAa,aAAA,CAACZ,IAAI;IAACe,KAAK,EAAC,MAAM;IAACC,IAAI,eAAEjB,KAAA,CAAAa,aAAA,CAACT,SAAS;MAACc,GAAG,EAAEP,SAAS,CAACQ;IAAO,CAAE,CAAE;IAACC,IAAI,EAAE;EAAK,CAAE,CAAC,eAC7EpB,KAAA,CAAAa,aAAA;IAAKE,SAAS,EAAC;EAAsD,GAChEJ,SAAS,CAACK,KAAK,IAAIL,SAAS,CAACC,IAC7B,CACJ,CAAC;AAEd,CAAC;AAED,OAAO,MAAMS,cAAc,GAAGA,CAAA,KAAM;EAChC,MAAMC,MAAM,GAAGhB,kBAAkB,CAAC,CAAC;EAEnC,oBACIN,KAAA,CAAAa,aAAA,CAAAb,KAAA,CAAAc,QAAA,QACKQ,MAAM,CAACC,GAAG,CAACC,KAAK,IAAI;IACjB,IAAI,CAACA,KAAK,CAACC,KAAK,CAACC,MAAM,EAAE;MACrB,OAAO,IAAI;IACf;IAEA,oBACI1B,KAAA,CAAAa,aAAA,CAACX,IAAI;MACDyB,GAAG,EAAEH,KAAK,CAACZ,IAAK;MAChBgB,KAAK,EAAEJ,KAAK,CAACR,KAAM;MACnBa,WAAW,EAAEL,KAAK,CAACK;MACnB;MACA;IAAA,gBAEA7B,KAAA,CAAAa,aAAA;MAAKE,SAAS,EAAC;IAAyC,GACnDS,KAAK,CAACC,KAAK,CAACF,GAAG,CAACf,IAAI,IAAI;MACrB,oBACIR,KAAA,CAAAa,aAAA,CAACR,SAAS;QACNsB,GAAG,EAAEnB,IAAI,CAACI,IAAK;QACfkB,IAAI,EAAC,SAAS;QACdtB,IAAI,EAAE;UAAEuB,aAAa,EAAEvB,IAAI,CAACI;QAAK;MAAE,GAElC,CAAC;QAAEoB;MAAQ,CAAC,KACTA,OAAO,cACHhC,KAAA,CAAAa,aAAA,2BACIb,KAAA,CAAAa,aAAA,CAACN,cAAc;QAACC,IAAI,EAAEA;MAAK,CAAE,CAC5B,CACT,CAEG,CAAC;IAEpB,CAAC,CACA,CACH,CAAC;EAEf,CAAC,CACH,CAAC;AAEX,CAAC","ignoreList":[]}

package/BaseEditor/defaultConfig/Toolbar/InsertElements/InsertElementsTab.js CHANGED Viewed

@@ -1,8 +1,8 @@
 import React from "react";
 import { Icon, Tabs } from "@webiny/admin-ui";
-import { ScrollableContainer } from "../../../config/Sidebar/ScrollableContainer";
+import { ScrollableContainer } from "../../../config/Sidebar/ScrollableContainer.js";
 import { ReactComponent as InsertIcon } from "@webiny/icons/add_circle_outline.svg";
-import { InsertElements } from "./InsertElements";
+import { InsertElements } from "./InsertElements.js";
 export const InsertElementsTab = () => {
   return /*#__PURE__*/React.createElement(Tabs.Tab, {
     value: "insert",

package/BaseEditor/defaultConfig/Toolbar/InsertElements/InsertElementsTab.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["React","Icon","Tabs","ScrollableContainer","ReactComponent","InsertIcon","InsertElements","InsertElementsTab","createElement","Tab","value","trigger","spacing","icon","label","content"],"sources":["InsertElementsTab.tsx"],"sourcesContent":["import React from \"react\";\nimport { Icon, Tabs } from \"@webiny/admin-ui\";\nimport { ScrollableContainer } from \"~/BaseEditor/config/Sidebar/ScrollableContainer\";\nimport { ReactComponent as InsertIcon } from \"@webiny/icons/add_circle_outline.svg\";\nimport { InsertElements } from \"./InsertElements\";\n\nexport const InsertElementsTab = () => {\n return (\n <Tabs.Tab\n value=\"insert\"\n trigger={\"Insert\"}\n spacing={\"sm\"}\n icon={<Icon icon={<InsertIcon />} label={\"Insert Element\"} />}\n content={\n <ScrollableContainer>\n <InsertElements />\n </ScrollableContainer>\n }\n />\n );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,EAAEC,IAAI,QAAQ,kBAAkB;AAC7C,SAASC,mBAAmB;AAC5B,SAASC,cAAc,IAAIC,UAAU,QAAQ,sCAAsC;AACnF,SAASC,cAAc;AAEvB,OAAO,MAAMC,iBAAiB,GAAGA,CAAA,KAAM;EACnC,oBACIP,KAAA,CAAAQ,aAAA,CAACN,IAAI,CAACO,GAAG;IACLC,KAAK,EAAC,QAAQ;IACdC,OAAO,EAAE,QAAS;IAClBC,OAAO,EAAE,IAAK;IACdC,IAAI,eAAEb,KAAA,CAAAQ,aAAA,CAACP,IAAI;MAACY,IAAI,eAAEb,KAAA,CAAAQ,aAAA,CAACH,UAAU,MAAE,CAAE;MAACS,KAAK,EAAE;IAAiB,CAAE,CAAE;IAC9DC,OAAO,eACHf,KAAA,CAAAQ,aAAA,CAACL,mBAAmB,qBAChBH,KAAA,CAAAQ,aAAA,CAACF,cAAc,MAAE,CACA;EACxB,CACJ,CAAC;AAEV,CAAC","ignoreList":[]}
1	+ {"version":3,"names":["React","Icon","Tabs","ScrollableContainer","ReactComponent","InsertIcon","InsertElements","InsertElementsTab","createElement","Tab","value","trigger","spacing","icon","label","content"],"sources":["InsertElementsTab.tsx"],"sourcesContent":["import React from \"react\";\nimport { Icon, Tabs } from \"@webiny/admin-ui\";\nimport { ScrollableContainer } from \"~/BaseEditor/config/Sidebar/ScrollableContainer.js\";\nimport { ReactComponent as InsertIcon } from \"@webiny/icons/add_circle_outline.svg\";\nimport { InsertElements } from \"./InsertElements.js\";\n\nexport const InsertElementsTab = () => {\n return (\n <Tabs.Tab\n value=\"insert\"\n trigger={\"Insert\"}\n spacing={\"sm\"}\n icon={<Icon icon={<InsertIcon />} label={\"Insert Element\"} />}\n content={\n <ScrollableContainer>\n <InsertElements />\n </ScrollableContainer>\n }\n />\n );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,EAAEC,IAAI,QAAQ,kBAAkB;AAC7C,SAASC,mBAAmB;AAC5B,SAASC,cAAc,IAAIC,UAAU,QAAQ,sCAAsC;AACnF,SAASC,cAAc;AAEvB,OAAO,MAAMC,iBAAiB,GAAGA,CAAA,KAAM;EACnC,oBACIP,KAAA,CAAAQ,aAAA,CAACN,IAAI,CAACO,GAAG;IACLC,KAAK,EAAC,QAAQ;IACdC,OAAO,EAAE,QAAS;IAClBC,OAAO,EAAE,IAAK;IACdC,IAAI,eAAEb,KAAA,CAAAQ,aAAA,CAACP,IAAI;MAACY,IAAI,eAAEb,KAAA,CAAAQ,aAAA,CAACH,UAAU,MAAE,CAAE;MAACS,KAAK,EAAE;IAAiB,CAAE,CAAE;IAC9DC,OAAO,eACHf,KAAA,CAAAQ,aAAA,CAACL,mBAAmB,qBAChBH,KAAA,CAAAQ,aAAA,CAACF,cAAc,MAAE,CACA;EACxB,CACJ,CAAC;AAEV,CAAC","ignoreList":[]}

package/BaseEditor/defaultConfig/Toolbar/InsertElements/index.d.ts CHANGED Viewed

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

package/BaseEditor/defaultConfig/Toolbar/InsertElements/index.js CHANGED Viewed

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

package/BaseEditor/defaultConfig/Toolbar/InsertElements/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./InsertElements\";\n"],"mappings":"AAAA","ignoreList":[]}
1	+ {"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./InsertElements.js\";\n"],"mappings":"AAAA","ignoreList":[]}

package/BaseEditor/defaultConfig/Toolbar/InsertElements/useComponentGroups.js CHANGED Viewed

@@ -1,6 +1,6 @@
-import { useSelectFromEditor } from "../../../hooks/useSelectFromEditor";
+import { useSelectFromEditor } from "../../../hooks/useSelectFromEditor.js";
 import { functionConverter } from "@webiny/website-builder-sdk";
-import { useSelectFromDocument } from "../../../hooks/useSelectFromDocument";
+import { useSelectFromDocument } from "../../../hooks/useSelectFromDocument.js";
 const getComponentFilter = group => {
   if (group.name === "custom") {
     return cmp => !cmp.group;

package/BaseEditor/defaultConfig/Toolbar/InsertElements/useComponentGroups.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["useSelectFromEditor","functionConverter","useSelectFromDocument","getComponentFilter","group","name","cmp","filter","deserialize","useComponentGroups","document","state","groups","Object","values","componentGroups","components","item","hideFromToolbar","map","items","component"],"sources":["useComponentGroups.ts"],"sourcesContent":["import { useSelectFromEditor } from \"~/BaseEditor/hooks/useSelectFromEditor\";\nimport type {\n ComponentGroupFilterContext,\n ComponentManifest,\n SerializedComponentGroup\n} from \"@webiny/website-builder-sdk\";\nimport { functionConverter } from \"@webiny/website-builder-sdk\";\nimport { useSelectFromDocument } from \"~/BaseEditor/hooks/useSelectFromDocument\";\n\ntype WithItems<T> = T & { items: ComponentManifest[] };\n\nconst getComponentFilter = (\n group: SerializedComponentGroup\n): ((cmp: ComponentManifest, context: ComponentGroupFilterContext) => boolean) => {\n if (group.name === \"custom\") {\n return cmp => !cmp.group;\n }\n\n if (group.filter) {\n return functionConverter.deserialize(group.filter!);\n }\n\n return cmp => cmp.group === group.name;\n};\n\nexport const useComponentGroups = () => {\n const document = useSelectFromDocument(document => document);\n\n return useSelectFromEditor<WithItems<SerializedComponentGroup>[]>(state => {\n const groups = Object.values(state.componentGroups);\n const components = Object.values(state.components).filter(item => !item.hideFromToolbar);\n\n return groups.map(group => {\n const filter = getComponentFilter(group);\n\n return {\n ...group,\n items: components.filter(component => {\n return filter(component, { document });\n })\n };\n });\n });\n};\n"],"mappings":"AAAA,SAASA,mBAAmB;AAM5B,SAASC,iBAAiB,QAAQ,6BAA6B;AAC/D,SAASC,qBAAqB;AAI9B,MAAMC,kBAAkB,GACpBC,KAA+B,IAC+C;EAC9E,IAAIA,KAAK,CAACC,IAAI,KAAK,QAAQ,EAAE;IACzB,OAAOC,GAAG,IAAI,CAACA,GAAG,CAACF,KAAK;EAC5B;EAEA,IAAIA,KAAK,CAACG,MAAM,EAAE;IACd,OAAON,iBAAiB,CAACO,WAAW,CAACJ,KAAK,CAACG,MAAO,CAAC;EACvD;EAEA,OAAOD,GAAG,IAAIA,GAAG,CAACF,KAAK,KAAKA,KAAK,CAACC,IAAI;AAC1C,CAAC;AAED,OAAO,MAAMI,kBAAkB,GAAGA,CAAA,KAAM;EACpC,MAAMC,QAAQ,GAAGR,qBAAqB,CAACQ,QAAQ,IAAIA,QAAQ,CAAC;EAE5D,OAAOV,mBAAmB,CAAwCW,KAAK,IAAI;IACvE,MAAMC,MAAM,GAAGC,MAAM,CAACC,MAAM,CAACH,KAAK,CAACI,eAAe,CAAC;IACnD,MAAMC,UAAU,GAAGH,MAAM,CAACC,MAAM,CAACH,KAAK,CAACK,UAAU,CAAC,CAACT,MAAM,CAACU,IAAI,IAAI,CAACA,IAAI,CAACC,eAAe,CAAC;IAExF,OAAON,MAAM,CAACO,GAAG,CAACf,KAAK,IAAI;MACvB,MAAMG,MAAM,GAAGJ,kBAAkB,CAACC,KAAK,CAAC;MAExC,OAAO;QACH,GAAGA,KAAK;QACRgB,KAAK,EAAEJ,UAAU,CAACT,MAAM,CAACc,SAAS,IAAI;UAClC,OAAOd,MAAM,CAACc,SAAS,EAAE;YAAEX;UAAS,CAAC,CAAC;QAC1C,CAAC;MACL,CAAC;IACL,CAAC,CAAC;EACN,CAAC,CAAC;AACN,CAAC","ignoreList":[]}
1	+ {"version":3,"names":["useSelectFromEditor","functionConverter","useSelectFromDocument","getComponentFilter","group","name","cmp","filter","deserialize","useComponentGroups","document","state","groups","Object","values","componentGroups","components","item","hideFromToolbar","map","items","component"],"sources":["useComponentGroups.ts"],"sourcesContent":["import { useSelectFromEditor } from \"~/BaseEditor/hooks/useSelectFromEditor.js\";\nimport type {\n ComponentGroupFilterContext,\n ComponentManifest,\n SerializedComponentGroup\n} from \"@webiny/website-builder-sdk\";\nimport { functionConverter } from \"@webiny/website-builder-sdk\";\nimport { useSelectFromDocument } from \"~/BaseEditor/hooks/useSelectFromDocument.js\";\n\ntype WithItems<T> = T & { items: ComponentManifest[] };\n\nconst getComponentFilter = (\n group: SerializedComponentGroup\n): ((cmp: ComponentManifest, context: ComponentGroupFilterContext) => boolean) => {\n if (group.name === \"custom\") {\n return cmp => !cmp.group;\n }\n\n if (group.filter) {\n return functionConverter.deserialize(group.filter!);\n }\n\n return cmp => cmp.group === group.name;\n};\n\nexport const useComponentGroups = () => {\n const document = useSelectFromDocument(document => document);\n\n return useSelectFromEditor<WithItems<SerializedComponentGroup>[]>(state => {\n const groups = Object.values(state.componentGroups);\n const components = Object.values(state.components).filter(item => !item.hideFromToolbar);\n\n return groups.map(group => {\n const filter = getComponentFilter(group);\n\n return {\n ...group,\n items: components.filter(component => {\n return filter(component, { document });\n })\n };\n });\n });\n};\n"],"mappings":"AAAA,SAASA,mBAAmB;AAM5B,SAASC,iBAAiB,QAAQ,6BAA6B;AAC/D,SAASC,qBAAqB;AAI9B,MAAMC,kBAAkB,GACpBC,KAA+B,IAC+C;EAC9E,IAAIA,KAAK,CAACC,IAAI,KAAK,QAAQ,EAAE;IACzB,OAAOC,GAAG,IAAI,CAACA,GAAG,CAACF,KAAK;EAC5B;EAEA,IAAIA,KAAK,CAACG,MAAM,EAAE;IACd,OAAON,iBAAiB,CAACO,WAAW,CAACJ,KAAK,CAACG,MAAO,CAAC;EACvD;EAEA,OAAOD,GAAG,IAAIA,GAAG,CAACF,KAAK,KAAKA,KAAK,CAACC,IAAI;AAC1C,CAAC;AAED,OAAO,MAAMI,kBAAkB,GAAGA,CAAA,KAAM;EACpC,MAAMC,QAAQ,GAAGR,qBAAqB,CAACQ,QAAQ,IAAIA,QAAQ,CAAC;EAE5D,OAAOV,mBAAmB,CAAwCW,KAAK,IAAI;IACvE,MAAMC,MAAM,GAAGC,MAAM,CAACC,MAAM,CAACH,KAAK,CAACI,eAAe,CAAC;IACnD,MAAMC,UAAU,GAAGH,MAAM,CAACC,MAAM,CAACH,KAAK,CAACK,UAAU,CAAC,CAACT,MAAM,CAACU,IAAI,IAAI,CAACA,IAAI,CAACC,eAAe,CAAC;IAExF,OAAON,MAAM,CAACO,GAAG,CAACf,KAAK,IAAI;MACvB,MAAMG,MAAM,GAAGJ,kBAAkB,CAACC,KAAK,CAAC;MAExC,OAAO;QACH,GAAGA,KAAK;QACRgB,KAAK,EAAEJ,UAAU,CAACT,MAAM,CAACc,SAAS,IAAI;UAClC,OAAOd,MAAM,CAACc,SAAS,EAAE;YAAEX;UAAS,CAAC,CAAC;QAC1C,CAAC;MACL,CAAC;IACL,CAAC,CAAC;EACN,CAAC,CAAC;AACN,CAAC","ignoreList":[]}

package/BaseEditor/defaultConfig/Toolbar/Navigator/Navigator.js CHANGED Viewed

@@ -1,15 +1,15 @@
 import React, { useMemo, useCallback } from "react";
-import get from "lodash/get";
+import get from "lodash/get.js";
 import { observer } from "mobx-react-lite";
 import { Tree, Tooltip } from "@webiny/admin-ui";
 import { ReactComponent as VisibilityNone } from "@webiny/icons/visibility_off.svg";
-import { useActiveElement } from "../../../hooks/useActiveElement";
-import { useSelectFromEditor } from "../../../hooks/useSelectFromEditor";
-import { useDocumentEditor } from "../../../../DocumentEditor";
-import { Commands } from "../../..";
-import { InlineSvg } from "../InsertElements/InlineSvg";
-import { InfoMessage } from "../../Sidebar/InfoMessage";
-import { useStyles } from "../../../hooks/useStyles";
+import { useActiveElement } from "../../../hooks/useActiveElement.js";
+import { useSelectFromEditor } from "../../../hooks/useSelectFromEditor.js";
+import { useDocumentEditor } from "../../../../DocumentEditor/index.js";
+import { Commands } from "../../../index.js";
+import { InlineSvg } from "../InsertElements/InlineSvg.js";
+import { InfoMessage } from "../../Sidebar/InfoMessage.js";
+import { useStyles } from "../../../hooks/useStyles.js";
 // Node type for the Tree component.
@@ -35,7 +35,7 @@ function flattenElements(elements, activeElementId) {
         parent: node.parent,
         icon: node.image ? /*#__PURE__*/React.createElement(InlineSvg, {
           src: node.image,
-          className: "wby-fill-neutral-strong"
+          className: "fill-neutral-strong"
         }) : /*#__PURE__*/React.createElement(React.Fragment, null),
         draggable: node.canDrag
       }
@@ -156,7 +156,7 @@ export const Navigator = observer(() => {
       element: node.icon,
       size: "sm"
     }), node.label, /*#__PURE__*/React.createElement("div", {
-      className: "wby-flex wby-w-full wby-justify-end"
+      className: "flex w-full justify-end"
     }, /*#__PURE__*/React.createElement(ElementActions, {
       elementId: node.id
     })));
@@ -214,7 +214,7 @@ export const Navigator = observer(() => {
   });
 });
 const Placeholder = props => /*#__PURE__*/React.createElement("div", {
-  className: "wby-bg-primary-default",
+  className: "bg-primary",
   style: {
     height: 2,
     zIndex: 999,
@@ -244,11 +244,11 @@ const ElementActions = ({
     return null;
   }
   return /*#__PURE__*/React.createElement("div", {
-    className: "wby-flex"
+    className: "flex"
   }, /*#__PURE__*/React.createElement(Tooltip, {
     trigger: /*#__PURE__*/React.createElement(Tree.Item.Icon, {
       size: "sm",
-      className: "wby-cursor-pointer",
+      className: "cursor-pointer",
       element: /*#__PURE__*/React.createElement(VisibilityNone, null),
       label: "This element is hidden.",
       onClick: unhideElement