@webiny/app-admin 0.0.0-unstable.b14eaecf38 → 0.0.0-unstable.b6d7105cee

package/config/createAdminConfig.js

@@ -0,0 +1,63 @@
+import react, { useContext, useEffect, useMemo, useState } from "react";
+import { Compose, makeDecoratable } from "@webiny/react-composition";
+import { Properties, toObject, useDebugConfig } from "@webiny/react-properties";
+const createHOC = (newChildren)=>(BaseComponent)=>function({ children }) {
+            return /*#__PURE__*/ react.createElement(BaseComponent, null, newChildren, children);
+        };
+const createAdminConfig_name = "AdminConfig";
+function createAdminConfig() {
+    const ApplyPublicConfig = makeDecoratable(`${createAdminConfig_name}Apply<Public>`, ({ children })=>/*#__PURE__*/ react.createElement(react.Fragment, null, children));
+    const ApplyProtectedConfig = makeDecoratable(`${createAdminConfig_name}Apply<Protected>`, ({ children })=>/*#__PURE__*/ react.createElement(react.Fragment, null, children));
+    const PublicConfig = ({ children })=>/*#__PURE__*/ react.createElement(Compose, {
+            component: ApplyPublicConfig,
+            with: createHOC(children)
+        });
+    const ProtectedConfig = ({ children })=>/*#__PURE__*/ react.createElement(Compose, {
+            component: ApplyProtectedConfig,
+            with: createHOC(children)
+        });
+    const defaultContext = {
+        name: createAdminConfig_name,
+        properties: []
+    };
+    const ViewContext = /*#__PURE__*/ react.createContext(defaultContext);
+    const WithConfig = ({ onProperties, children })=>{
+        const [properties, setProperties] = useState([]);
+        useDebugConfig(createAdminConfig_name, properties);
+        const context = {
+            name: createAdminConfig_name,
+            properties
+        };
+        useEffect(()=>{
+            if ("function" == typeof onProperties) onProperties(properties);
+        }, [
+            properties
+        ]);
+        const stateUpdater = (properties)=>{
+            setProperties(properties);
+        };
+        return /*#__PURE__*/ react.createElement(ViewContext.Provider, {
+            value: context
+        }, /*#__PURE__*/ react.createElement(Properties, {
+            onChange: stateUpdater,
+            name: createAdminConfig_name
+        }, children));
+    };
+    function useConfig() {
+        const { properties } = useContext(ViewContext);
+        return useMemo(()=>toObject(properties), [
+            properties
+        ]);
+    }
+    return {
+        WithConfig,
+        PrivateConfig: ProtectedConfig,
+        PublicConfig,
+        ApplyPublicConfig,
+        ApplyProtectedConfig,
+        useConfig
+    };
+}
+export { createAdminConfig };
+
+//# sourceMappingURL=createAdminConfig.js.map

package/config/createAdminConfig.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"config/createAdminConfig.js","sources":["../../src/config/createAdminConfig.tsx"],"sourcesContent":["import React, { useContext, useEffect, useMemo, useState } from \"react\";\nimport type { Decorator } from \"@webiny/react-composition\";\nimport { Compose, makeDecoratable } from \"@webiny/react-composition\";\nimport type { GenericComponent } from \"@webiny/react-composition/types.js\";\nimport type { Property } from \"@webiny/react-properties\";\nimport { Properties, toObject, useDebugConfig } from \"@webiny/react-properties\";\n\nconst createHOC = (\n    newChildren: React.ReactNode\n): Decorator<GenericComponent<{ children?: React.ReactNode }>> => {\n    return BaseComponent => {\n        return function ConfigHOC({ children }) {\n            return (\n                <BaseComponent>\n                    {newChildren}\n                    {children}\n                </BaseComponent>\n            );\n        };\n    };\n};\n\nexport interface WithConfigProps {\n    children: React.ReactNode;\n    onProperties?(properties: Property[]): void;\n}\n\ninterface ConfigApplyProps {\n    children?: React.ReactNode;\n}\n\nexport interface ConfigProps {\n    children: React.ReactNode;\n}\n\nconst name = \"AdminConfig\";\n\nexport function createAdminConfig<TConfig>() {\n    /**\n     * This component is used when we want to mount all composed configs.\n     */\n    const ApplyPublicConfig = makeDecoratable(\n        `${name}Apply<Public>`,\n        ({ children }: ConfigApplyProps) => {\n            return <>{children}</>;\n        }\n    );\n\n    const ApplyProtectedConfig = makeDecoratable(\n        `${name}Apply<Protected>`,\n        ({ children }: ConfigApplyProps) => {\n            return <>{children}</>;\n        }\n    );\n\n    /**\n     * This component is used to configure the component (it can be mounted many times).\n     */\n    const PublicConfig = ({ children }: ConfigProps) => {\n        return <Compose component={ApplyPublicConfig} with={createHOC(children)} />;\n    };\n\n    const ProtectedConfig = ({ children }: ConfigProps) => {\n        return <Compose component={ApplyProtectedConfig} with={createHOC(children)} />;\n    };\n\n    interface ViewContext {\n        name: string;\n        properties: Property[];\n    }\n\n    const defaultContext = { name, properties: [] };\n\n    const ViewContext = React.createContext<ViewContext>(defaultContext);\n\n    const WithConfig = ({ onProperties, children }: WithConfigProps) => {\n        const [properties, setProperties] = useState<Property[]>([]);\n        useDebugConfig(name, properties);\n        const context = { name, properties };\n\n        useEffect(() => {\n            if (typeof onProperties === \"function\") {\n                onProperties(properties);\n            }\n        }, [properties]);\n\n        const stateUpdater = (properties: Property[]) => {\n            setProperties(properties);\n        };\n\n        return (\n            <ViewContext.Provider value={context}>\n                <Properties onChange={stateUpdater} name={name}>\n                    {children}\n                </Properties>\n            </ViewContext.Provider>\n        );\n    };\n\n    function useConfig<TExtra extends object>(): TConfig & TExtra {\n        const { properties } = useContext(ViewContext);\n        return useMemo(() => toObject<TConfig & TExtra>(properties), [properties]);\n    }\n\n    return {\n        WithConfig,\n        PrivateConfig: ProtectedConfig,\n        PublicConfig,\n        ApplyPublicConfig,\n        ApplyProtectedConfig,\n        useConfig\n    };\n}\n"],"names":["createHOC","newChildren","BaseComponent","children","name","createAdminConfig","ApplyPublicConfig","makeDecoratable","ApplyProtectedConfig","PublicConfig","Compose","ProtectedConfig","defaultContext","ViewContext","React","WithConfig","onProperties","properties","setProperties","useState","useDebugConfig","context","useEffect","stateUpdater","Properties","useConfig","useContext","useMemo","toObject"],"mappings":";;;AAOA,MAAMA,YAAY,CACdC,cAEOC,CAAAA,gBACI,SAAmB,EAAEC,QAAQ,EAAE;YAClC,OAAO,WAAP,GACI,oBAACD,eAAAA,MACID,aACAE;QAGb;AAiBR,MAAMC,yBAAO;AAEN,SAASC;IAIZ,MAAMC,oBAAoBC,gBACtB,GAAGH,uBAAK,aAAa,CAAC,EACtB,CAAC,EAAED,QAAQ,EAAoB,GACpB,WAAP,GAAO,0CAAGA;IAIlB,MAAMK,uBAAuBD,gBACzB,GAAGH,uBAAK,gBAAgB,CAAC,EACzB,CAAC,EAAED,QAAQ,EAAoB,GACpB,WAAP,GAAO,0CAAGA;IAOlB,MAAMM,eAAe,CAAC,EAAEN,QAAQ,EAAe,GACpC,WAAP,GAAO,oBAACO,SAAOA;YAAC,WAAWJ;YAAmB,MAAMN,UAAUG;;IAGlE,MAAMQ,kBAAkB,CAAC,EAAER,QAAQ,EAAe,GACvC,WAAP,GAAO,oBAACO,SAAOA;YAAC,WAAWF;YAAsB,MAAMR,UAAUG;;IAQrE,MAAMS,iBAAiB;QAAER,MAAAA;QAAM,YAAY,EAAE;IAAC;IAE9C,MAAMS,cAAc,WAAdA,GAAcC,MAAAA,aAAmB,CAAcF;IAErD,MAAMG,aAAa,CAAC,EAAEC,YAAY,EAAEb,QAAQ,EAAmB;QAC3D,MAAM,CAACc,YAAYC,cAAc,GAAGC,SAAqB,EAAE;QAC3DC,eAAehB,wBAAMa;QACrB,MAAMI,UAAU;YAAEjB,MAAAA;YAAMa;QAAW;QAEnCK,UAAU;YACN,IAAI,AAAwB,cAAxB,OAAON,cACPA,aAAaC;QAErB,GAAG;YAACA;SAAW;QAEf,MAAMM,eAAe,CAACN;YAClBC,cAAcD;QAClB;QAEA,OAAO,WAAP,GACI,oBAACJ,YAAY,QAAQ;YAAC,OAAOQ;yBACzB,oBAACG,YAAUA;YAAC,UAAUD;YAAc,MAAMnB;WACrCD;IAIjB;IAEA,SAASsB;QACL,MAAM,EAAER,UAAU,EAAE,GAAGS,WAAWb;QAClC,OAAOc,QAAQ,IAAMC,SAA2BX,aAAa;YAACA;SAAW;IAC7E;IAEA,OAAO;QACHF;QACA,eAAeJ;QACfF;QACAH;QACAE;QACAiB;IACJ;AACJ"}

package/config/table/Column.d.ts

@@ -0,0 +1,34 @@
+import type { ReactElement } from "react";
+import React from "react";
+import { createUseTableRow } from "../../components/Table/useTableRow.js";
+export interface ColumnConfig {
+    cell: string | ReactElement;
+    className: string;
+    header: string | ReactElement;
+    hideable: boolean;
+    name: string;
+    resizable: boolean;
+    size: number;
+    sortable: boolean;
+    truncate: boolean;
+    visible: boolean;
+}
+export interface ColumnProps {
+    after?: string;
+    before?: string;
+    cell?: string | ReactElement;
+    className?: string;
+    truncate?: boolean;
+    header?: string | ReactElement;
+    hideable?: boolean;
+    name: string;
+    path?: string;
+    remove?: boolean;
+    resizable?: boolean;
+    size?: number;
+    sortable?: boolean;
+    visible?: boolean;
+}
+export declare const Column: React.FC<ColumnProps> & {
+    createUseTableRow: typeof createUseTableRow;
+};

package/config/table/Column.js

@@ -0,0 +1,69 @@
+import react from "react";
+import { Property, useIdGenerator } from "@webiny/react-properties";
+import { createUseTableRow } from "../../components/Table/useTableRow.js";
+const BaseColumn = ({ after, before, cell, className, header, hideable = true, truncate = true, name, path = "", remove = false, resizable = true, size = 100, sortable = false, visible = true })=>{
+    const getId = useIdGenerator("tableColumn");
+    const placeAfter = void 0 !== after ? getId(after) : void 0;
+    const placeBefore = void 0 !== before ? getId(before) : void 0;
+    return /*#__PURE__*/ react.createElement(Property, {
+        id: "table",
+        name: "table"
+    }, /*#__PURE__*/ react.createElement(Property, {
+        id: getId(name),
+        name: "columns",
+        remove: remove,
+        array: true,
+        before: placeBefore,
+        after: placeAfter
+    }, /*#__PURE__*/ react.createElement(Property, {
+        id: getId(name, "name"),
+        name: "name",
+        value: name
+    }), /*#__PURE__*/ react.createElement(Property, {
+        id: getId(name, "path"),
+        name: "path",
+        value: path
+    }), /*#__PURE__*/ react.createElement(Property, {
+        id: getId(name, "sortable"),
+        name: "sortable",
+        value: sortable
+    }), /*#__PURE__*/ react.createElement(Property, {
+        id: getId(name, "resizable"),
+        name: "resizable",
+        value: resizable
+    }), /*#__PURE__*/ react.createElement(Property, {
+        id: getId(name, "truncate"),
+        name: "truncate",
+        value: truncate
+    }), /*#__PURE__*/ react.createElement(Property, {
+        id: getId(name, "hideable"),
+        name: "hideable",
+        value: hideable
+    }), /*#__PURE__*/ react.createElement(Property, {
+        id: getId(name, "size"),
+        name: "size",
+        value: size
+    }), /*#__PURE__*/ react.createElement(Property, {
+        id: getId(name, "visible"),
+        name: "visible",
+        value: visible
+    }), header ? /*#__PURE__*/ react.createElement(Property, {
+        id: getId(name, "header"),
+        name: "header",
+        value: header
+    }) : null, cell ? /*#__PURE__*/ react.createElement(Property, {
+        id: getId(name, "cell"),
+        name: "cell",
+        value: cell
+    }) : null, className ? /*#__PURE__*/ react.createElement(Property, {
+        id: getId(name, "className"),
+        name: "className",
+        value: className
+    }) : null));
+};
+const Column = Object.assign(BaseColumn, {
+    createUseTableRow: createUseTableRow
+});
+export { Column };
+
+//# sourceMappingURL=Column.js.map

package/config/table/Column.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"config/table/Column.js","sources":["../../../src/config/table/Column.tsx"],"sourcesContent":["import type { ReactElement } from \"react\";\nimport React from \"react\";\nimport { Property, useIdGenerator } from \"@webiny/react-properties\";\nimport { createUseTableRow } from \"~/components/Table/useTableRow.js\";\n\nexport interface ColumnConfig {\n    cell: string | ReactElement;\n    className: string;\n    header: string | ReactElement;\n    hideable: boolean;\n    name: string;\n    resizable: boolean;\n    size: number;\n    sortable: boolean;\n    truncate: boolean;\n    visible: boolean;\n}\n\nexport interface ColumnProps {\n    after?: string;\n    before?: string;\n    cell?: string | ReactElement;\n    className?: string;\n    truncate?: boolean;\n    header?: string | ReactElement;\n    hideable?: boolean;\n    name: string;\n    path?: string;\n    remove?: boolean;\n    resizable?: boolean;\n    size?: number;\n    sortable?: boolean;\n    visible?: boolean;\n}\n\nconst BaseColumn: React.FC<ColumnProps> = ({\n    after = undefined,\n    before = undefined,\n    cell,\n    className = undefined,\n    header = undefined,\n    hideable = true,\n    truncate = true,\n    name,\n    path = \"\",\n    remove = false,\n    resizable = true,\n    size = 100,\n    sortable = false,\n    visible = true\n}) => {\n    const getId = useIdGenerator(\"tableColumn\");\n\n    const placeAfter = after !== undefined ? getId(after) : undefined;\n    const placeBefore = before !== undefined ? getId(before) : undefined;\n\n    return (\n        <Property id=\"table\" name={\"table\"}>\n            <Property\n                id={getId(name)}\n                name={\"columns\"}\n                remove={remove}\n                array={true}\n                before={placeBefore}\n                after={placeAfter}\n            >\n                <Property id={getId(name, \"name\")} name={\"name\"} value={name} />\n                <Property id={getId(name, \"path\")} name={\"path\"} value={path} />\n                <Property id={getId(name, \"sortable\")} name={\"sortable\"} value={sortable} />\n                <Property id={getId(name, \"resizable\")} name={\"resizable\"} value={resizable} />\n                <Property id={getId(name, \"truncate\")} name={\"truncate\"} value={truncate} />\n                <Property id={getId(name, \"hideable\")} name={\"hideable\"} value={hideable} />\n                <Property id={getId(name, \"size\")} name={\"size\"} value={size} />\n                <Property id={getId(name, \"visible\")} name={\"visible\"} value={visible} />\n                {header ? (\n                    <Property id={getId(name, \"header\")} name={\"header\"} value={header} />\n                ) : null}\n                {cell ? <Property id={getId(name, \"cell\")} name={\"cell\"} value={cell} /> : null}\n                {className ? (\n                    <Property id={getId(name, \"className\")} name={\"className\"} value={className} />\n                ) : null}\n            </Property>\n        </Property>\n    );\n};\n\nexport const Column = Object.assign(BaseColumn, { createUseTableRow });\n"],"names":["BaseColumn","after","before","cell","className","header","hideable","truncate","name","path","remove","resizable","size","sortable","visible","getId","useIdGenerator","placeAfter","undefined","placeBefore","Property","Column","Object","createUseTableRow"],"mappings":";;;AAmCA,MAAMA,aAAoC,CAAC,EACvCC,KAAiB,EACjBC,MAAkB,EAClBC,IAAI,EACJC,SAAqB,EACrBC,MAAkB,EAClBC,WAAW,IAAI,EACfC,WAAW,IAAI,EACfC,IAAI,EACJC,OAAO,EAAE,EACTC,SAAS,KAAK,EACdC,YAAY,IAAI,EAChBC,OAAO,GAAG,EACVC,WAAW,KAAK,EAChBC,UAAU,IAAI,EACjB;IACG,MAAMC,QAAQC,eAAe;IAE7B,MAAMC,aAAahB,AAAUiB,WAAVjB,QAAsBc,MAAMd,SAASiB;IACxD,MAAMC,cAAcjB,AAAWgB,WAAXhB,SAAuBa,MAAMb,UAAUgB;IAE3D,OAAO,WAAP,GACI,oBAACE,UAAQA;QAAC,IAAG;QAAQ,MAAM;qBACvB,oBAACA,UAAQA;QACL,IAAIL,MAAMP;QACV,MAAM;QACN,QAAQE;QACR,OAAO;QACP,QAAQS;QACR,OAAOF;qBAEP,oBAACG,UAAQA;QAAC,IAAIL,MAAMP,MAAM;QAAS,MAAM;QAAQ,OAAOA;sBACxD,oBAACY,UAAQA;QAAC,IAAIL,MAAMP,MAAM;QAAS,MAAM;QAAQ,OAAOC;sBACxD,oBAACW,UAAQA;QAAC,IAAIL,MAAMP,MAAM;QAAa,MAAM;QAAY,OAAOK;sBAChE,oBAACO,UAAQA;QAAC,IAAIL,MAAMP,MAAM;QAAc,MAAM;QAAa,OAAOG;sBAClE,oBAACS,UAAQA;QAAC,IAAIL,MAAMP,MAAM;QAAa,MAAM;QAAY,OAAOD;sBAChE,oBAACa,UAAQA;QAAC,IAAIL,MAAMP,MAAM;QAAa,MAAM;QAAY,OAAOF;sBAChE,oBAACc,UAAQA;QAAC,IAAIL,MAAMP,MAAM;QAAS,MAAM;QAAQ,OAAOI;sBACxD,oBAACQ,UAAQA;QAAC,IAAIL,MAAMP,MAAM;QAAY,MAAM;QAAW,OAAOM;QAC7DT,SAAS,WAATA,GACG,oBAACe,UAAQA;QAAC,IAAIL,MAAMP,MAAM;QAAW,MAAM;QAAU,OAAOH;SAC5D,MACHF,OAAO,WAAPA,GAAO,oBAACiB,UAAQA;QAAC,IAAIL,MAAMP,MAAM;QAAS,MAAM;QAAQ,OAAOL;SAAW,MAC1EC,YAAY,WAAZA,GACG,oBAACgB,UAAQA;QAAC,IAAIL,MAAMP,MAAM;QAAc,MAAM;QAAa,OAAOJ;SAClE;AAIpB;AAEO,MAAMiB,SAASC,OAAO,MAAM,CAACtB,YAAY;IAAEuB,mBAAiBA;AAAC"}

package/config/table/Sorting.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+export interface SortingConfig {
+    field: string;
+    order: "asc" | "desc";
+}
+export interface SortingProps {
+    name: string;
+    field: string;
+    order?: "asc" | "desc";
+}
+export declare const Sorting: ({ name, field, order }: SortingProps) => React.JSX.Element;

package/config/table/Sorting.js

@@ -0,0 +1,28 @@
+import react from "react";
+import { Property, useIdGenerator } from "@webiny/react-properties";
+const Sorting = ({ name, field, order = "desc" })=>{
+    const getId = useIdGenerator("tableSorting");
+    return /*#__PURE__*/ react.createElement(Property, {
+        id: "table",
+        name: "table"
+    }, /*#__PURE__*/ react.createElement(Property, {
+        id: getId(name),
+        name: "sorting",
+        array: true
+    }, /*#__PURE__*/ react.createElement(Property, {
+        id: getId(name, "name"),
+        name: "name",
+        value: name
+    }), /*#__PURE__*/ react.createElement(Property, {
+        id: getId(name, "field"),
+        name: "field",
+        value: field
+    }), /*#__PURE__*/ react.createElement(Property, {
+        id: getId(name, "order"),
+        name: "order",
+        value: order
+    })));
+};
+export { Sorting };
+
+//# sourceMappingURL=Sorting.js.map

package/config/table/Sorting.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"config/table/Sorting.js","sources":["../../../src/config/table/Sorting.tsx"],"sourcesContent":["import React from \"react\";\nimport { Property, useIdGenerator } from \"@webiny/react-properties\";\n\nexport interface SortingConfig {\n    field: string;\n    order: \"asc\" | \"desc\";\n}\n\nexport interface SortingProps {\n    name: string;\n    field: string;\n    order?: \"asc\" | \"desc\";\n}\n\nexport const Sorting = ({ name, field, order = \"desc\" }: SortingProps) => {\n    const getId = useIdGenerator(\"tableSorting\");\n\n    return (\n        <Property id=\"table\" name={\"table\"}>\n            <Property id={getId(name)} name={\"sorting\"} array={true}>\n                <Property id={getId(name, \"name\")} name={\"name\"} value={name} />\n                <Property id={getId(name, \"field\")} name={\"field\"} value={field} />\n                <Property id={getId(name, \"order\")} name={\"order\"} value={order} />\n            </Property>\n        </Property>\n    );\n};\n"],"names":["Sorting","name","field","order","getId","useIdGenerator","Property"],"mappings":";;AAcO,MAAMA,UAAU,CAAC,EAAEC,IAAI,EAAEC,KAAK,EAAEC,QAAQ,MAAM,EAAgB;IACjE,MAAMC,QAAQC,eAAe;IAE7B,OAAO,WAAP,GACI,oBAACC,UAAQA;QAAC,IAAG;QAAQ,MAAM;qBACvB,oBAACA,UAAQA;QAAC,IAAIF,MAAMH;QAAO,MAAM;QAAW,OAAO;qBAC/C,oBAACK,UAAQA;QAAC,IAAIF,MAAMH,MAAM;QAAS,MAAM;QAAQ,OAAOA;sBACxD,oBAACK,UAAQA;QAAC,IAAIF,MAAMH,MAAM;QAAU,MAAM;QAAS,OAAOC;sBAC1D,oBAACI,UAAQA;QAAC,IAAIF,MAAMH,MAAM;QAAU,MAAM;QAAS,OAAOE;;AAI1E"}

package/config/table/index.d.ts

@@ -0,0 +1,13 @@
+import type { ColumnConfig } from "./Column.js";
+import type { SortingConfig } from "./Sorting.js";
+import { Sorting } from "./Sorting.js";
+export interface TableConfig {
+    columns: ColumnConfig[];
+    sorting: SortingConfig[];
+}
+export declare const Table: {
+    Column: import("react").FC<import("./Column.js").ColumnProps> & {
+        createUseTableRow: typeof import("../../index.js").createUseTableRow;
+    };
+    Sorting: typeof Sorting;
+};

package/config/table/index.js

@@ -0,0 +1,9 @@
+import { Column } from "./Column.js";
+import { Sorting } from "./Sorting.js";
+const Table = {
+    Column: Column,
+    Sorting: Sorting
+};
+export { Table };
+
+//# sourceMappingURL=index.js.map

package/config/table/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"config/table/index.js","sources":["../../../src/config/table/index.ts"],"sourcesContent":["import type { ColumnConfig } from \"./Column.js\";\nimport { Column } from \"./Column.js\";\nimport type { SortingConfig } from \"./Sorting.js\";\nimport { Sorting } from \"./Sorting.js\";\nexport interface TableConfig {\n    columns: ColumnConfig[];\n    sorting: SortingConfig[];\n}\n\nexport const Table = {\n    Column,\n    Sorting\n};\n"],"names":["Table","Column","Sorting"],"mappings":";;AASO,MAAMA,QAAQ;IACjBC,QAAMA;IACNC,SAAOA;AACX"}

package/css/tokens.css

@@ -0,0 +1,379 @@
+.wa-lx-ltr {
+  text-align: inherit;
+}
+.wa-lx-rtl {
+  text-align: inherit;
+}
+.wa-lx-paragraph {
+}
+
+.wa-lx-quote {
+}
+
+.wa-lx-h1,
+.wa-lx-h2,
+.wa-lx-h3,
+.wa-lx-h4,
+.wa-lx-h5,
+.wa-lx-h6 {
+}
+
+.wa-lx-textBold {
+  font-weight: bold;
+}
+
+.wa-lx-textItalic {
+  font-style: italic;
+}
+.wa-lx-textUnderline {
+  text-decoration: underline;
+}
+.wa-lx-textStrikethrough {
+  text-decoration: line-through;
+}
+.wa-lx-textUnderlineStrikethrough {
+  text-decoration: underline line-through;
+}
+
+.wa-lx-textSubscript {
+  font-size: 0.8em;
+  vertical-align: sub !important;
+}
+
+.wa-lx-textSuperscript {
+  font-size: 0.8em;
+  vertical-align: super;
+}
+
+.wa-lx-textCode {
+  background-color: rgb(240, 242, 245);
+  padding: 1px 0.25rem;
+  font-family: Menlo, Consolas, Monaco, monospace;
+  font-size: 94%;
+}
+.wa-lx-hashtag {
+  background-color: rgba(88, 144, 255, 0.15);
+  border-bottom: 1px solid rgba(88, 144, 255, 0.3);
+}
+.wa-lx-link {
+  color: var(--wa-theme-color1);
+  text-decoration: none;
+  > * {
+    color: inherit !important;
+  }
+}
+.wa-lx-link:hover {
+  text-decoration: underline;
+}
+.wa-lx-code {
+  background-color: rgb(240, 242, 245);
+  font-family: Menlo, Consolas, Monaco, monospace;
+  display: block;
+  padding: 8px 8px 8px 52px;
+  line-height: 1.53;
+  font-size: 13px;
+  margin: 8px 0;
+  tab-size: 2;
+  /* white-space: pre; */
+  overflow-x: auto;
+  position: relative;
+}
+.wa-lx-code:before {
+  content: attr(data-gutter);
+  position: absolute;
+  background-color: #eee;
+  left: 0;
+  top: 0;
+  border-right: 1px solid #ccc;
+  padding: 8px;
+  color: #777;
+  white-space: pre-wrap;
+  text-align: right;
+  min-width: 25px;
+}
+.wa-lx-table {
+  border-collapse: collapse;
+  border-spacing: 0;
+  max-width: 100%;
+  overflow-y: scroll;
+  table-layout: fixed;
+  width: calc(100% - 25px);
+  margin: 30px 0;
+}
+.wa-lx-tableSelected {
+  outline: 2px solid rgb(60, 132, 244);
+}
+.wa-lx-tableCell {
+  border: 1px solid #bbb;
+  min-width: 75px;
+  vertical-align: top;
+  text-align: start;
+  padding: 6px 8px;
+  position: relative;
+  cursor: default;
+  outline: none;
+}
+.wa-lx-tableCellSortedIndicator {
+  display: block;
+  opacity: 0.5;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 4px;
+  background-color: #999;
+}
+.wa-lx-tableCellResizer {
+  position: absolute;
+  right: -4px;
+  height: 100%;
+  width: 8px;
+  cursor: ew-resize;
+  z-index: 10;
+  top: 0;
+}
+.wa-lx-tableCellHeader {
+  background-color: #f2f3f5;
+  text-align: start;
+}
+.wa-lx-tableCellSelected {
+  background-color: #c9dbf0;
+}
+.wa-lx-tableCellPrimarySelected {
+  border: 2px solid rgb(60, 132, 244);
+  display: block;
+  height: calc(100% - 2px);
+  position: absolute;
+  width: calc(100% - 2px);
+  left: -1px;
+  top: -1px;
+  z-index: 2;
+}
+.wa-lx-tableCellEditing {
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
+  border-radius: 3px;
+}
+.wa-lx-tableAddColumns {
+  position: absolute;
+  top: 0;
+  width: 20px;
+  background-color: #eee;
+  height: 100%;
+  right: 0;
+  animation: table-controls 0.2s ease;
+  border: 0;
+  cursor: pointer;
+}
+
+.wa-lx-tableAddColumns:hover {
+  background-color: #c9dbf0;
+}
+.wa-lx-tableAddRows {
+  position: absolute;
+  bottom: -25px;
+  width: calc(100% - 25px);
+  background-color: #eee;
+  height: 20px;
+  left: 0;
+  animation: table-controls 0.2s ease;
+  border: 0;
+  cursor: pointer;
+}
+.wa-lx-tableAddRows:hover {
+  background-color: #c9dbf0;
+}
+@keyframes table-controls {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.wa-lx-tableCellResizeRuler {
+  display: block;
+  position: absolute;
+  width: 1px;
+  background-color: rgb(60, 132, 244);
+  height: 100%;
+  top: 0;
+}
+.wa-lx-tableCellActionButtonContainer {
+  display: block;
+  right: 5px;
+  top: 6px;
+  position: absolute;
+  z-index: 4;
+  width: 20px;
+  height: 20px;
+}
+.wa-lx-tableCellActionButton {
+  background-color: #eee;
+  display: block;
+  border: 0;
+  border-radius: 20px;
+  width: 20px;
+  height: 20px;
+  color: #222;
+  cursor: pointer;
+}
+.wa-lx-tableCellActionButton:hover {
+  background-color: #ddd;
+}
+.wa-lx-characterLimit {
+  display: inline;
+  background-color: #ffbbbb !important;
+}
+.wa-lx-ol1 {
+  padding: 0;
+  margin: 0 0 0 16px;
+  list-style: decimal inside;
+}
+.wa-lx-ol2 {
+  padding: 0;
+  margin: 0 0 0 16px;
+  list-style: upper-alpha inside;
+}
+.wa-lx-ol3 {
+  list-style: initial;
+  list-style: auto;
+  padding: 0;
+  margin: 0 0 0 16px;
+  list-style-type: lower-alpha;
+  list-style-position: inside;
+}
+.wa-lx-ol4 {
+  padding: 0;
+  margin: 0 0 0 16px;
+  list-style: upper-roman inside;
+}
+.wa-lx-ol5 {
+  padding: 0;
+  margin: 0 0 0 16px;
+  list-style: lower-roman inside;
+}
+.wa-lx-ul {
+  padding: 0;
+  margin: 0 0 0 16px;
+  list-style: inside;
+}
+.wa-lx-listItem {
+  margin: 0 32px;
+}
+.wa-lx-listItemChecked,
+.wa-lx-listItemUnchecked {
+  position: relative;
+  margin-left: 8px;
+  margin-right: 8px;
+  padding-left: 24px;
+  padding-right: 24px;
+  list-style-type: none;
+  outline: none;
+}
+.wa-lx-listItemChecked {
+  text-decoration: line-through;
+}
+.wa-lx-listItemUnchecked:before,
+.wa-lx-listItemChecked:before {
+  content: "";
+  width: 16px;
+  height: 16px;
+  top: 2px;
+  left: 0;
+  cursor: pointer;
+  display: block;
+  background-size: cover;
+  position: absolute;
+}
+.wa-lx-listItemUnchecked[dir="rtl"]:before,
+.wa-lx-listItemChecked[dir="rtl"]:before {
+  left: auto;
+  right: 0;
+}
+.wa-lx-listItemUnchecked:focus:before,
+.wa-lx-listItemChecked:focus:before {
+  box-shadow: 0 0 0 2px #a6cdfe;
+  border-radius: 2px;
+}
+.wa-lx-listItemUnchecked:before {
+  border: 1px solid #999;
+  border-radius: 2px;
+}
+.wa-lx-listItemChecked:before {
+  border: 1px solid rgb(61, 135, 245);
+  border-radius: 2px;
+  background-color: #3d87f5;
+  background-repeat: no-repeat;
+}
+.wa-lx-listItemChecked:after {
+  content: "";
+  cursor: pointer;
+  border-color: #fff;
+  border-style: solid;
+  position: absolute;
+  display: block;
+  top: 6px;
+  width: 3px;
+  left: 7px;
+  height: 6px;
+  transform: rotate(45deg);
+  border-width: 0 2px 2px 0;
+}
+.wa-lx-nestedListItem {
+  list-style-type: none;
+}
+.wa-lx-nestedListItem:before,
+.wa-lx-nestedListItem:after {
+  display: none;
+}
+.wa-lx-tokenComment {
+  color: slategray;
+}
+.wa-lx-tokenPunctuation {
+  color: #999;
+}
+.wa-lx-tokenProperty {
+  color: #905;
+}
+.wa-lx-tokenSelector {
+  color: #690;
+}
+.wa-lx-tokenOperator {
+  color: #9a6e3a;
+}
+.wa-lx-tokenAttr {
+  color: #07a;
+}
+.wa-lx-tokenVariable {
+  color: #e90;
+}
+.wa-lx-tokenFunction {
+  color: #dd4a68;
+}
+.wa-lx-mark {
+  background: rgba(255, 212, 0, 0.14);
+  border-bottom: 2px solid rgba(255, 212, 0, 0.3);
+  padding-bottom: 2px;
+}
+.wa-lx-markOverlap {
+  background: rgba(255, 212, 0, 0.3);
+  border-bottom: 2px solid rgba(255, 212, 0, 0.7);
+}
+.wa-lx-mark.selected {
+  background: rgba(255, 212, 0, 0.5);
+  border-bottom: 2px solid rgba(255, 212, 0, 1);
+}
+.wa-lx-markOverlap.selected {
+  background: rgba(255, 212, 0, 0.7);
+  border-bottom: 2px solid rgba(255, 212, 0, 0.7);
+}
+.wa-lx-embedBlock {
+  user-select: none;
+}
+.wa-lx-embedBlockFocus {
+  outline: 2px solid rgb(60, 132, 244);
+}
+
+.wa-lx-placeholder {
+  text-align: left;
+}