@webiny/app-headless-cms 0.0.0-ee-vpcs.549378cf03

package/admin/components/Draggable.js

@@ -0,0 +1,66 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactDnd = require("react-dnd");
+
+var emptyImage = "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==";
+
+var Draggable = function Draggable(props) {
+  var children = props.children,
+      beginDrag = props.beginDrag,
+      endDrag = props.endDrag,
+      target = props.target;
+
+  var _useDrag = (0, _reactDnd.useDrag)({
+    item: {
+      type: "element",
+      target: target
+    },
+    collect: function collect(monitor) {
+      return {
+        isDragging: monitor.isDragging()
+      };
+    },
+    begin: function begin(monitor) {
+      if (typeof beginDrag === "function") {
+        return beginDrag(props, monitor);
+      }
+
+      return beginDrag;
+    },
+    end: function end(item, monitor) {
+      if (typeof endDrag === "function") {
+        return endDrag(item, monitor);
+      }
+
+      return endDrag;
+    }
+  }),
+      _useDrag2 = (0, _slicedToArray2.default)(_useDrag, 3),
+      isDragging = _useDrag2[0].isDragging,
+      drag = _useDrag2[1],
+      preview = _useDrag2[2];
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactDnd.DragPreviewImage, {
+    connect: preview,
+    src: emptyImage
+  }), children({
+    isDragging: isDragging,
+    drag: drag
+  }));
+};
+
+var MemoizedDraggable = /*#__PURE__*/_react.default.memo(Draggable);
+
+var _default = MemoizedDraggable;
+exports.default = _default;

package/admin/components/Draggable.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["emptyImage","Draggable","props","children","beginDrag","endDrag","target","useDrag","item","type","collect","monitor","isDragging","begin","end","drag","preview","MemoizedDraggable","React","memo"],"sources":["Draggable.tsx"],"sourcesContent":["import React, { ReactElement } from \"react\";\nimport { useDrag, DragPreviewImage, ConnectDragSource } from \"react-dnd\";\n\nconst emptyImage = \"data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\";\n\ninterface DraggableChildrenFunctionParams {\n    isDragging: boolean;\n    drag: ConnectDragSource;\n}\nexport interface DraggableChildrenFunction {\n    (params: DraggableChildrenFunctionParams): ReactElement;\n}\n\nexport interface DraggableProps {\n    children: DraggableChildrenFunction;\n    beginDrag?: any;\n    endDrag?: any;\n    target?: string[];\n}\n\nconst Draggable: React.FC<DraggableProps> = props => {\n    const { children, beginDrag, endDrag, target } = props;\n\n    const [{ isDragging }, drag, preview] = useDrag({\n        item: { type: \"element\", target },\n        collect: monitor => ({\n            isDragging: monitor.isDragging()\n        }),\n        begin(monitor) {\n            if (typeof beginDrag === \"function\") {\n                return beginDrag(props, monitor);\n            }\n            return beginDrag;\n        },\n        end(item, monitor) {\n            if (typeof endDrag === \"function\") {\n                return endDrag(item, monitor);\n            }\n            return endDrag;\n        }\n    });\n\n    return (\n        <>\n            <DragPreviewImage connect={preview} src={emptyImage} />\n            {children({ isDragging, drag })}\n        </>\n    );\n};\n\nconst MemoizedDraggable: React.FC<DraggableProps> = React.memo(Draggable);\nexport default MemoizedDraggable;\n"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AAEA,IAAMA,UAAU,GAAG,4EAAnB;;AAiBA,IAAMC,SAAmC,GAAG,SAAtCA,SAAsC,CAAAC,KAAK,EAAI;EACjD,IAAQC,QAAR,GAAiDD,KAAjD,CAAQC,QAAR;EAAA,IAAkBC,SAAlB,GAAiDF,KAAjD,CAAkBE,SAAlB;EAAA,IAA6BC,OAA7B,GAAiDH,KAAjD,CAA6BG,OAA7B;EAAA,IAAsCC,MAAtC,GAAiDJ,KAAjD,CAAsCI,MAAtC;;EAEA,eAAwC,IAAAC,iBAAA,EAAQ;IAC5CC,IAAI,EAAE;MAAEC,IAAI,EAAE,SAAR;MAAmBH,MAAM,EAANA;IAAnB,CADsC;IAE5CI,OAAO,EAAE,iBAAAC,OAAO;MAAA,OAAK;QACjBC,UAAU,EAAED,OAAO,CAACC,UAAR;MADK,CAAL;IAAA,CAF4B;IAK5CC,KAL4C,iBAKtCF,OALsC,EAK7B;MACX,IAAI,OAAOP,SAAP,KAAqB,UAAzB,EAAqC;QACjC,OAAOA,SAAS,CAACF,KAAD,EAAQS,OAAR,CAAhB;MACH;;MACD,OAAOP,SAAP;IACH,CAV2C;IAW5CU,GAX4C,eAWxCN,IAXwC,EAWlCG,OAXkC,EAWzB;MACf,IAAI,OAAON,OAAP,KAAmB,UAAvB,EAAmC;QAC/B,OAAOA,OAAO,CAACG,IAAD,EAAOG,OAAP,CAAd;MACH;;MACD,OAAON,OAAP;IACH;EAhB2C,CAAR,CAAxC;EAAA;EAAA,IAASO,UAAT,gBAASA,UAAT;EAAA,IAAuBG,IAAvB;EAAA,IAA6BC,OAA7B;;EAmBA,oBACI,yEACI,6BAAC,0BAAD;IAAkB,OAAO,EAAEA,OAA3B;IAAoC,GAAG,EAAEhB;EAAzC,EADJ,EAEKG,QAAQ,CAAC;IAAES,UAAU,EAAVA,UAAF;IAAcG,IAAI,EAAJA;EAAd,CAAD,CAFb,CADJ;AAMH,CA5BD;;AA8BA,IAAME,iBAA2C,gBAAGC,cAAA,CAAMC,IAAN,CAAWlB,SAAX,CAApD;;eACegB,iB"}

package/admin/components/DropZone/Center.d.ts

@@ -0,0 +1,13 @@
+import React, { CSSProperties } from "react";
+import { DroppableProps, OnDropCallable } from "../Droppable";
+interface CenterProps {
+    type?: string;
+    onDrop: OnDropCallable;
+    children: React.ReactNode;
+    active?: boolean;
+    highlight?: boolean;
+    style?: CSSProperties;
+    isDroppable?: DroppableProps["isDroppable"];
+}
+declare const Center: React.FC<CenterProps>;
+export default Center;

package/admin/components/DropZone/Center.js

@@ -0,0 +1,71 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+
+var _Droppable = require("./../Droppable");
+
+var getColor = function getColor(_ref) {
+  var isOver = _ref.isOver,
+      isDroppable = _ref.isDroppable;
+
+  if (isOver) {
+    return "var(--mdc-theme-primary)";
+  }
+
+  if (!isDroppable) {
+    return "var(--mdc-theme-background)";
+  }
+
+  return "var(--mdc-theme-secondary)";
+};
+
+var Container = /*#__PURE__*/(0, _styled.default)("div", {
+  label: "Container",
+  target: "e14zhyp10"
+})("background-color:transparent;box-sizing:border-box;height:100%;min-height:100px;position:relative;user-select:none;width:100%;border:2px dashed ", getColor, ";opacity:1;> div{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);margin:0;color:", getColor, ";}");
+
+var getInert = function getInert(isDroppable) {
+  return isDroppable ? {} : {
+    inert: ""
+  };
+};
+
+var Center = function Center(_ref2) {
+  var onDrop = _ref2.onDrop,
+      children = _ref2.children,
+      style = _ref2.style,
+      isDroppable = _ref2.isDroppable;
+  return /*#__PURE__*/_react.default.createElement(_Droppable.Droppable, {
+    onDrop: onDrop,
+    isDroppable: isDroppable
+  }, function (_ref3) {
+    var isOver = _ref3.isOver,
+        drop = _ref3.drop,
+        isDroppable = _ref3.isDroppable;
+    return /*#__PURE__*/_react.default.createElement("div", Object.assign({
+      ref: drop,
+      style: (0, _objectSpread2.default)({
+        width: "100%",
+        height: "100%"
+      }, style),
+      "data-testid": "cms-editor-first-field-area"
+    }, getInert(isDroppable)), /*#__PURE__*/_react.default.createElement(Container, {
+      isOver: isOver,
+      isDroppable: isDroppable
+    }, /*#__PURE__*/_react.default.createElement("div", null, children)));
+  });
+};
+
+var _default = Center;
+exports.default = _default;

package/admin/components/DropZone/Center.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["getColor","isOver","isDroppable","Container","styled","getInert","inert","Center","onDrop","children","style","drop","width","height"],"sources":["Center.tsx"],"sourcesContent":["import React, { CSSProperties } from \"react\";\nimport styled from \"@emotion/styled\";\nimport { Droppable, DroppableProps, OnDropCallable } from \"./../Droppable\";\n\ninterface DroppableFlags {\n    isOver: boolean;\n    isDroppable: boolean;\n}\n\nconst getColor = ({ isOver, isDroppable }: DroppableFlags) => {\n    if (isOver) {\n        return \"var(--mdc-theme-primary)\";\n    }\n\n    if (!isDroppable) {\n        return \"var(--mdc-theme-background)\";\n    }\n\n    return \"var(--mdc-theme-secondary)\";\n};\n\nconst Container = styled.div`\n    background-color: transparent;\n    box-sizing: border-box;\n    height: 100%;\n    min-height: 100px;\n    position: relative;\n    user-select: none;\n    width: 100%;\n    border: 2px dashed ${getColor};\n    opacity: 1;\n    > div {\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        transform: translate(-50%, -50%);\n        margin: 0;\n        color: ${getColor};\n    }\n`;\n\ninterface CenterProps {\n    type?: string;\n    onDrop: OnDropCallable;\n    children: React.ReactNode;\n    active?: boolean;\n    highlight?: boolean;\n    style?: CSSProperties;\n    isDroppable?: DroppableProps[\"isDroppable\"];\n}\n\nconst getInert = (isDroppable: boolean) => {\n    return isDroppable ? {} : { inert: \"\" };\n};\n\nconst Center: React.FC<CenterProps> = ({ onDrop, children, style, isDroppable }) => {\n    return (\n        <Droppable onDrop={onDrop} isDroppable={isDroppable}>\n            {({ isOver, drop, isDroppable }) => (\n                <div\n                    ref={drop}\n                    style={{ width: \"100%\", height: \"100%\", ...style }}\n                    data-testid={\"cms-editor-first-field-area\"}\n                    {...getInert(isDroppable)}\n                >\n                    <Container isOver={isOver} isDroppable={isDroppable}>\n                        <div>{children}</div>\n                    </Container>\n                </div>\n            )}\n        </Droppable>\n    );\n};\n\nexport default Center;\n"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AAOA,IAAMA,QAAQ,GAAG,SAAXA,QAAW,OAA6C;EAAA,IAA1CC,MAA0C,QAA1CA,MAA0C;EAAA,IAAlCC,WAAkC,QAAlCA,WAAkC;;EAC1D,IAAID,MAAJ,EAAY;IACR,OAAO,0BAAP;EACH;;EAED,IAAI,CAACC,WAAL,EAAkB;IACd,OAAO,6BAAP;EACH;;EAED,OAAO,4BAAP;AACH,CAVD;;AAYA,IAAMC,SAAS,oBAAGC,eAAH;EAAA;EAAA;AAAA,uJAQUJ,QARV,wGAgBEA,QAhBF,OAAf;;AA8BA,IAAMK,QAAQ,GAAG,SAAXA,QAAW,CAACH,WAAD,EAA0B;EACvC,OAAOA,WAAW,GAAG,EAAH,GAAQ;IAAEI,KAAK,EAAE;EAAT,CAA1B;AACH,CAFD;;AAIA,IAAMC,MAA6B,GAAG,SAAhCA,MAAgC,QAA8C;EAAA,IAA3CC,MAA2C,SAA3CA,MAA2C;EAAA,IAAnCC,QAAmC,SAAnCA,QAAmC;EAAA,IAAzBC,KAAyB,SAAzBA,KAAyB;EAAA,IAAlBR,WAAkB,SAAlBA,WAAkB;EAChF,oBACI,6BAAC,oBAAD;IAAW,MAAM,EAAEM,MAAnB;IAA2B,WAAW,EAAEN;EAAxC,GACK;IAAA,IAAGD,MAAH,SAAGA,MAAH;IAAA,IAAWU,IAAX,SAAWA,IAAX;IAAA,IAAiBT,WAAjB,SAAiBA,WAAjB;IAAA,oBACG;MACI,GAAG,EAAES,IADT;MAEI,KAAK;QAAIC,KAAK,EAAE,MAAX;QAAmBC,MAAM,EAAE;MAA3B,GAAsCH,KAAtC,CAFT;MAGI,eAAa;IAHjB,GAIQL,QAAQ,CAACH,WAAD,CAJhB,gBAMI,6BAAC,SAAD;MAAW,MAAM,EAAED,MAAnB;MAA2B,WAAW,EAAEC;IAAxC,gBACI,0CAAMO,QAAN,CADJ,CANJ,CADH;EAAA,CADL,CADJ;AAgBH,CAjBD;;eAmBeF,M"}

package/admin/components/DropZone/Horizontal.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import { IsVisibleCallable } from "../Droppable";
+import { DragSource } from "../FieldEditor/FieldEditorContext";
+interface HorizontalProps {
+    onDrop(item: DragSource): void;
+    last?: boolean;
+    isVisible?: IsVisibleCallable;
+    ["data-testid"]?: string;
+}
+declare const Horizontal: React.FC<HorizontalProps>;
+export default Horizontal;

package/admin/components/DropZone/Horizontal.js

@@ -0,0 +1,97 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+
+var _Droppable = require("../Droppable");
+
+var _excluded = ["last", "onDrop", "isVisible"];
+var InnerDiv = /*#__PURE__*/(0, _styled.default)("div", {
+  target: "e1uuull90",
+  label: "InnerDiv"
+})({
+  height: 15,
+  width: "100%",
+  zIndex: 3,
+  borderRadius: 0,
+  boxSizing: "border-box",
+  display: "none",
+  border: "1px dashed black",
+  borderSpacing: 5
+});
+var BackgroundColorDiv = /*#__PURE__*/(0, _styled.default)("div", {
+  target: "e1uuull91",
+  label: "BackgroundColorDiv"
+})({
+  width: "100%",
+  height: "100%"
+});
+var OuterDiv = /*#__PURE__*/(0, _styled.default)("div", {
+  target: "e1uuull92",
+  label: "OuterDiv"
+})({
+  margin: 0,
+  padding: 0,
+  width: "calc(100% + 2px)",
+  zIndex: 10,
+  backgroundColor: "transparent",
+  position: "absolute",
+  display: "flex",
+  justifyContent: "center"
+}, function (props) {
+  var _ref;
+
+  return _ref = {}, (0, _defineProperty2.default)(_ref, props.last ? "bottom" : "top", -15), (0, _defineProperty2.default)(_ref, InnerDiv, (0, _defineProperty2.default)({
+    borderColor: props.isOver ? "var(--mdc-theme-primary)" : "var(--mdc-theme-secondary)",
+    display: props.isDragging ? "block" : "none"
+  }, BackgroundColorDiv, {
+    opacity: 0.5,
+    backgroundColor: props.isOver ? "var(--mdc-theme-primary)" : "var(--mdc-theme-secondary)"
+  })), _ref;
+});
+
+var Horizontal = function Horizontal(_ref2) {
+  var last = _ref2.last,
+      onDrop = _ref2.onDrop,
+      isVisible = _ref2.isVisible,
+      rest = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
+  return /*#__PURE__*/_react.default.createElement(_Droppable.Droppable, {
+    onDrop: onDrop,
+    isVisible: isVisible
+  }, function (_ref3) {
+    var _ref4;
+
+    var isOver = _ref3.isOver,
+        isDragging = _ref3.isDragging,
+        drop = _ref3.drop;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      ref: drop,
+      "data-testid": rest["data-testid"],
+      style: (_ref4 = {
+        /* For dropzone debugging: border: "1px solid blue",*/
+        height: "15px",
+        width: "100%",
+        position: "absolute"
+      }, (0, _defineProperty2.default)(_ref4, last ? "bottom" : "top", 0), (0, _defineProperty2.default)(_ref4, "left", 0), (0, _defineProperty2.default)(_ref4, "zIndex", isDragging ? 1000 : -1), _ref4)
+    }, /*#__PURE__*/_react.default.createElement(OuterDiv, {
+      isOver: isOver,
+      isDragging: isDragging,
+      last: last ? true : false
+    }, /*#__PURE__*/_react.default.createElement(InnerDiv, null, /*#__PURE__*/_react.default.createElement(BackgroundColorDiv, null))));
+  });
+};
+
+var _default = Horizontal;
+exports.default = _default;

package/admin/components/DropZone/Horizontal.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["InnerDiv","styled","height","width","zIndex","borderRadius","boxSizing","display","border","borderSpacing","BackgroundColorDiv","OuterDiv","margin","padding","backgroundColor","position","justifyContent","props","last","borderColor","isOver","isDragging","opacity","Horizontal","onDrop","isVisible","rest","drop"],"sources":["Horizontal.tsx"],"sourcesContent":["import React from \"react\";\nimport styled from \"@emotion/styled\";\nimport { Droppable, IsVisibleCallable } from \"../Droppable\";\nimport { DragSource } from \"~/admin/components/FieldEditor/FieldEditorContext\";\n\nconst InnerDiv = styled(\"div\")({\n    height: 15,\n    width: \"100%\",\n    zIndex: 3,\n    borderRadius: 0,\n    boxSizing: \"border-box\",\n    display: \"none\",\n    border: \"1px dashed black\",\n    borderSpacing: 5\n});\n\nconst BackgroundColorDiv = styled(\"div\")({\n    width: \"100%\",\n    height: \"100%\"\n});\n\ninterface OuterDivProps {\n    isOver: boolean;\n    isDragging: boolean;\n    last: boolean;\n}\n\nconst OuterDiv = styled(\"div\")(\n    {\n        margin: 0,\n        padding: 0,\n        width: \"calc(100% + 2px)\",\n        zIndex: 10,\n        backgroundColor: \"transparent\",\n        position: \"absolute\",\n        display: \"flex\",\n        justifyContent: \"center\"\n    },\n    (props: OuterDivProps) => ({\n        [props.last ? \"bottom\" : \"top\"]: -15,\n        // @ts-ignore\n        [InnerDiv]: {\n            borderColor: props.isOver ? \"var(--mdc-theme-primary)\" : \"var(--mdc-theme-secondary)\",\n            display: props.isDragging ? \"block\" : \"none\",\n            // @ts-ignore\n            [BackgroundColorDiv]: {\n                opacity: 0.5,\n                backgroundColor: props.isOver\n                    ? \"var(--mdc-theme-primary)\"\n                    : \"var(--mdc-theme-secondary)\"\n            }\n        }\n    })\n);\n\ninterface HorizontalProps {\n    onDrop(item: DragSource): void;\n    last?: boolean;\n    isVisible?: IsVisibleCallable;\n    [\"data-testid\"]?: string;\n}\n\nconst Horizontal: React.FC<HorizontalProps> = ({ last, onDrop, isVisible, ...rest }) => {\n    return (\n        <Droppable onDrop={onDrop} isVisible={isVisible}>\n            {({ isOver, isDragging, drop }) => (\n                <div\n                    ref={drop}\n                    data-testid={rest[\"data-testid\"]}\n                    style={{\n                        /* For dropzone debugging: border: \"1px solid blue\",*/\n                        height: \"15px\",\n                        width: \"100%\",\n                        position: \"absolute\",\n                        [last ? \"bottom\" : \"top\"]: 0,\n                        left: 0,\n                        zIndex: isDragging ? 1000 : -1\n                    }}\n                >\n                    <OuterDiv isOver={isOver} isDragging={isDragging} last={last ? true : false}>\n                        <InnerDiv>\n                            <BackgroundColorDiv />\n                        </InnerDiv>\n                    </OuterDiv>\n                </div>\n            )}\n        </Droppable>\n    );\n};\n\nexport default Horizontal;\n"],"mappings":";;;;;;;;;;;;;AAAA;;AACA;;AACA;;;AAGA,IAAMA,QAAQ,oBAAGC,eAAH,EAAU,KAAV;EAAA;EAAA;AAAA,GAAiB;EAC3BC,MAAM,EAAE,EADmB;EAE3BC,KAAK,EAAE,MAFoB;EAG3BC,MAAM,EAAE,CAHmB;EAI3BC,YAAY,EAAE,CAJa;EAK3BC,SAAS,EAAE,YALgB;EAM3BC,OAAO,EAAE,MANkB;EAO3BC,MAAM,EAAE,kBAPmB;EAQ3BC,aAAa,EAAE;AARY,CAAjB,CAAd;AAWA,IAAMC,kBAAkB,oBAAGT,eAAH,EAAU,KAAV;EAAA;EAAA;AAAA,GAAiB;EACrCE,KAAK,EAAE,MAD8B;EAErCD,MAAM,EAAE;AAF6B,CAAjB,CAAxB;AAWA,IAAMS,QAAQ,oBAAGV,eAAH,EAAU,KAAV;EAAA;EAAA;AAAA,GACV;EACIW,MAAM,EAAE,CADZ;EAEIC,OAAO,EAAE,CAFb;EAGIV,KAAK,EAAE,kBAHX;EAIIC,MAAM,EAAE,EAJZ;EAKIU,eAAe,EAAE,aALrB;EAMIC,QAAQ,EAAE,UANd;EAOIR,OAAO,EAAE,MAPb;EAQIS,cAAc,EAAE;AARpB,CADU,EAWV,UAACC,KAAD;EAAA;;EAAA,sDACKA,KAAK,CAACC,IAAN,GAAa,QAAb,GAAwB,KAD7B,EACqC,CAAC,EADtC,uCAGKlB,QAHL;IAIQmB,WAAW,EAAEF,KAAK,CAACG,MAAN,GAAe,0BAAf,GAA4C,4BAJjE;IAKQb,OAAO,EAAEU,KAAK,CAACI,UAAN,GAAmB,OAAnB,GAA6B;EAL9C,GAOSX,kBAPT,EAO8B;IAClBY,OAAO,EAAE,GADS;IAElBR,eAAe,EAAEG,KAAK,CAACG,MAAN,GACX,0BADW,GAEX;EAJY,CAP9B;AAAA,CAXU,CAAd;;AAmCA,IAAMG,UAAqC,GAAG,SAAxCA,UAAwC,QAA0C;EAAA,IAAvCL,IAAuC,SAAvCA,IAAuC;EAAA,IAAjCM,MAAiC,SAAjCA,MAAiC;EAAA,IAAzBC,SAAyB,SAAzBA,SAAyB;EAAA,IAAXC,IAAW;EACpF,oBACI,6BAAC,oBAAD;IAAW,MAAM,EAAEF,MAAnB;IAA2B,SAAS,EAAEC;EAAtC,GACK;IAAA;;IAAA,IAAGL,MAAH,SAAGA,MAAH;IAAA,IAAWC,UAAX,SAAWA,UAAX;IAAA,IAAuBM,IAAvB,SAAuBA,IAAvB;IAAA,oBACG;MACI,GAAG,EAAEA,IADT;MAEI,eAAaD,IAAI,CAAC,aAAD,CAFrB;MAGI,KAAK;QACD;QACAxB,MAAM,EAAE,MAFP;QAGDC,KAAK,EAAE,MAHN;QAIDY,QAAQ,EAAE;MAJT,wCAKAG,IAAI,GAAG,QAAH,GAAc,KALlB,EAK0B,CAL1B,gDAMK,CANL,kDAOOG,UAAU,GAAG,IAAH,GAAU,CAAC,CAP5B;IAHT,gBAaI,6BAAC,QAAD;MAAU,MAAM,EAAED,MAAlB;MAA0B,UAAU,EAAEC,UAAtC;MAAkD,IAAI,EAAEH,IAAI,GAAG,IAAH,GAAU;IAAtE,gBACI,6BAAC,QAAD,qBACI,6BAAC,kBAAD,OADJ,CADJ,CAbJ,CADH;EAAA,CADL,CADJ;AAyBH,CA1BD;;eA4BeK,U"}

package/admin/components/DropZone/Vertical.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import { DragSource } from "../FieldEditor/FieldEditorContext";
+interface VerticalProps {
+    depth?: number;
+    onDrop(item: DragSource): void;
+    last?: boolean;
+    isVisible?: any;
+}
+declare const Vertical: React.FC<VerticalProps>;
+export default Vertical;

package/admin/components/DropZone/Vertical.js

@@ -0,0 +1,93 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+
+var _Droppable = require("../Droppable");
+
+var InnerDivVertical = /*#__PURE__*/(0, _styled.default)("div", {
+  target: "e1yx4w3z0",
+  label: "InnerDivVertical"
+})({
+  position: "absolute",
+  width: 10,
+  height: "100%",
+  zIndex: 3,
+  borderRadius: 0,
+  display: "none",
+  boxSizing: "border-box",
+  border: "1px dashed black",
+  borderSpacing: 5
+});
+var BackgroundColorDiv = /*#__PURE__*/(0, _styled.default)("div", {
+  target: "e1yx4w3z1",
+  label: "BackgroundColorDiv"
+})({
+  width: "100%",
+  height: "100%"
+});
+var OuterDivVertical = /*#__PURE__*/(0, _styled.default)("div", {
+  target: "e1yx4w3z2",
+  label: "OuterDivVertical"
+})({
+  position: "absolute",
+  width: "30%",
+  top: 0,
+  height: "100%",
+  zIndex: 10,
+  backgroundColor: "transparent"
+}, function (props) {
+  var _InnerDivVertical, _ref;
+
+  return _ref = {}, (0, _defineProperty2.default)(_ref, props.last ? "right" : "left", -9), (0, _defineProperty2.default)(_ref, "textAlign", props.last ? "right" : "left"), (0, _defineProperty2.default)(_ref, InnerDivVertical, (_InnerDivVertical = {
+    borderColor: props.isOver ? "var(--mdc-theme-primary)" : "var(--mdc-theme-secondary)"
+  }, (0, _defineProperty2.default)(_InnerDivVertical, props.last ? "right" : "left", -2), (0, _defineProperty2.default)(_InnerDivVertical, "display", props.isDragging ? "block" : "none"), (0, _defineProperty2.default)(_InnerDivVertical, BackgroundColorDiv, {
+    opacity: 0.5,
+    backgroundColor: props.isOver ? "var(--mdc-theme-primary)" : "var(--mdc-theme-secondary)"
+  }), _InnerDivVertical)), _ref;
+});
+
+var Vertical = function Vertical(_ref2) {
+  var depth = _ref2.depth,
+      last = _ref2.last,
+      onDrop = _ref2.onDrop,
+      isVisible = _ref2.isVisible;
+  return /*#__PURE__*/_react.default.createElement(_Droppable.Droppable, {
+    onDrop: onDrop,
+    isVisible: isVisible
+  }, function (_ref3) {
+    var _ref4;
+
+    var isOver = _ref3.isOver,
+        isDragging = _ref3.isDragging,
+        drop = _ref3.drop;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      ref: drop,
+      style: (_ref4 = {
+        /* For dropzone debugging: border: "1px solid blue",*/
+        width: "30%",
+        maxWidth: "100px",
+        height: "100%",
+        position: "absolute",
+        top: 0
+      }, (0, _defineProperty2.default)(_ref4, last ? "right" : "left", 0), (0, _defineProperty2.default)(_ref4, "zIndex", isDragging ? 1000 + (depth || 0) : -1), _ref4)
+    }, /*#__PURE__*/_react.default.createElement(OuterDivVertical, {
+      isOver: isOver,
+      isDragging: isDragging,
+      last: last
+    }, /*#__PURE__*/_react.default.createElement(InnerDivVertical, null, /*#__PURE__*/_react.default.createElement(BackgroundColorDiv, null))));
+  });
+};
+
+var _default = Vertical;
+exports.default = _default;

package/admin/components/DropZone/Vertical.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["InnerDivVertical","styled","position","width","height","zIndex","borderRadius","display","boxSizing","border","borderSpacing","BackgroundColorDiv","OuterDivVertical","top","backgroundColor","props","last","borderColor","isOver","isDragging","opacity","Vertical","depth","onDrop","isVisible","drop","maxWidth"],"sources":["Vertical.tsx"],"sourcesContent":["import React from \"react\";\nimport styled from \"@emotion/styled\";\nimport { Droppable, IsVisibleCallable } from \"../Droppable\";\nimport { DragSource } from \"~/admin/components/FieldEditor/FieldEditorContext\";\n\nconst InnerDivVertical = styled(\"div\")({\n    position: \"absolute\",\n    width: 10,\n    height: \"100%\",\n    zIndex: 3,\n    borderRadius: 0,\n    display: \"none\",\n    boxSizing: \"border-box\",\n    border: \"1px dashed black\",\n    borderSpacing: 5\n});\n\nconst BackgroundColorDiv = styled(\"div\")({\n    width: \"100%\",\n    height: \"100%\"\n});\n\ninterface OuterDivVerticalProps {\n    isOver: boolean;\n    last?: boolean;\n    isVisible?: IsVisibleCallable;\n    isDragging?: boolean;\n}\n\nconst OuterDivVertical = styled(\"div\")(\n    {\n        position: \"absolute\",\n        width: \"30%\",\n        top: 0,\n        height: \"100%\",\n        zIndex: 10,\n        backgroundColor: \"transparent\"\n    },\n    (props: OuterDivVerticalProps) => ({\n        [props.last ? \"right\" : \"left\"]: -9,\n        textAlign: props.last ? \"right\" : \"left\",\n        // @ts-ignore\n        [InnerDivVertical]: {\n            borderColor: props.isOver ? \"var(--mdc-theme-primary)\" : \"var(--mdc-theme-secondary)\",\n            [props.last ? \"right\" : \"left\"]: -2,\n            display: props.isDragging ? \"block\" : \"none\",\n            // @ts-ignore\n            [BackgroundColorDiv]: {\n                opacity: 0.5,\n                backgroundColor: props.isOver\n                    ? \"var(--mdc-theme-primary)\"\n                    : \"var(--mdc-theme-secondary)\"\n            }\n        }\n    })\n);\n\ninterface VerticalProps {\n    depth?: number;\n    onDrop(item: DragSource): void;\n    last?: boolean;\n    isVisible?: any;\n}\n\nconst Vertical: React.FC<VerticalProps> = ({ depth, last, onDrop, isVisible }) => {\n    return (\n        <Droppable onDrop={onDrop} isVisible={isVisible}>\n            {({ isOver, isDragging, drop }) => (\n                <div\n                    ref={drop}\n                    style={{\n                        /* For dropzone debugging: border: \"1px solid blue\",*/\n                        width: \"30%\",\n                        maxWidth: \"100px\",\n                        height: \"100%\",\n                        position: \"absolute\",\n                        top: 0,\n                        [last ? \"right\" : \"left\"]: 0,\n                        zIndex: isDragging ? 1000 + (depth || 0) : -1\n                    }}\n                >\n                    <OuterDivVertical isOver={isOver} isDragging={isDragging} last={last}>\n                        <InnerDivVertical>\n                            <BackgroundColorDiv />\n                        </InnerDivVertical>\n                    </OuterDivVertical>\n                </div>\n            )}\n        </Droppable>\n    );\n};\n\nexport default Vertical;\n"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AAGA,IAAMA,gBAAgB,oBAAGC,eAAH,EAAU,KAAV;EAAA;EAAA;AAAA,GAAiB;EACnCC,QAAQ,EAAE,UADyB;EAEnCC,KAAK,EAAE,EAF4B;EAGnCC,MAAM,EAAE,MAH2B;EAInCC,MAAM,EAAE,CAJ2B;EAKnCC,YAAY,EAAE,CALqB;EAMnCC,OAAO,EAAE,MAN0B;EAOnCC,SAAS,EAAE,YAPwB;EAQnCC,MAAM,EAAE,kBAR2B;EASnCC,aAAa,EAAE;AAToB,CAAjB,CAAtB;AAYA,IAAMC,kBAAkB,oBAAGV,eAAH,EAAU,KAAV;EAAA;EAAA;AAAA,GAAiB;EACrCE,KAAK,EAAE,MAD8B;EAErCC,MAAM,EAAE;AAF6B,CAAjB,CAAxB;AAYA,IAAMQ,gBAAgB,oBAAGX,eAAH,EAAU,KAAV;EAAA;EAAA;AAAA,GAClB;EACIC,QAAQ,EAAE,UADd;EAEIC,KAAK,EAAE,KAFX;EAGIU,GAAG,EAAE,CAHT;EAIIT,MAAM,EAAE,MAJZ;EAKIC,MAAM,EAAE,EALZ;EAMIS,eAAe,EAAE;AANrB,CADkB,EASlB,UAACC,KAAD;EAAA;;EAAA,sDACKA,KAAK,CAACC,IAAN,GAAa,OAAb,GAAuB,MAD5B,EACqC,CAAC,CADtC,oDAEeD,KAAK,CAACC,IAAN,GAAa,OAAb,GAAuB,MAFtC,uCAIKhB,gBAJL;IAKQiB,WAAW,EAAEF,KAAK,CAACG,MAAN,GAAe,0BAAf,GAA4C;EALjE,oDAMSH,KAAK,CAACC,IAAN,GAAa,OAAb,GAAuB,MANhC,EAMyC,CAAC,CAN1C,+DAOiBD,KAAK,CAACI,UAAN,GAAmB,OAAnB,GAA6B,MAP9C,oDASSR,kBATT,EAS8B;IAClBS,OAAO,EAAE,GADS;IAElBN,eAAe,EAAEC,KAAK,CAACG,MAAN,GACX,0BADW,GAEX;EAJY,CAT9B;AAAA,CATkB,CAAtB;;AAmCA,IAAMG,QAAiC,GAAG,SAApCA,QAAoC,QAAwC;EAAA,IAArCC,KAAqC,SAArCA,KAAqC;EAAA,IAA9BN,IAA8B,SAA9BA,IAA8B;EAAA,IAAxBO,MAAwB,SAAxBA,MAAwB;EAAA,IAAhBC,SAAgB,SAAhBA,SAAgB;EAC9E,oBACI,6BAAC,oBAAD;IAAW,MAAM,EAAED,MAAnB;IAA2B,SAAS,EAAEC;EAAtC,GACK;IAAA;;IAAA,IAAGN,MAAH,SAAGA,MAAH;IAAA,IAAWC,UAAX,SAAWA,UAAX;IAAA,IAAuBM,IAAvB,SAAuBA,IAAvB;IAAA,oBACG;MACI,GAAG,EAAEA,IADT;MAEI,KAAK;QACD;QACAtB,KAAK,EAAE,KAFN;QAGDuB,QAAQ,EAAE,OAHT;QAIDtB,MAAM,EAAE,MAJP;QAKDF,QAAQ,EAAE,UALT;QAMDW,GAAG,EAAE;MANJ,wCAOAG,IAAI,GAAG,OAAH,GAAa,MAPjB,EAO0B,CAP1B,kDAQOG,UAAU,GAAG,QAAQG,KAAK,IAAI,CAAjB,CAAH,GAAyB,CAAC,CAR3C;IAFT,gBAaI,6BAAC,gBAAD;MAAkB,MAAM,EAAEJ,MAA1B;MAAkC,UAAU,EAAEC,UAA9C;MAA0D,IAAI,EAAEH;IAAhE,gBACI,6BAAC,gBAAD,qBACI,6BAAC,kBAAD,OADJ,CADJ,CAbJ,CADH;EAAA,CADL,CADJ;AAyBH,CA1BD;;eA4BeK,Q"}

package/admin/components/DropZone/index.d.ts

@@ -0,0 +1,4 @@
+import Center from "./Center";
+import Horizontal from "./Horizontal";
+import Vertical from "./Vertical";
+export { Center, Horizontal, Vertical };

package/admin/components/DropZone/index.js

@@ -0,0 +1,31 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Center", {
+  enumerable: true,
+  get: function get() {
+    return _Center.default;
+  }
+});
+Object.defineProperty(exports, "Horizontal", {
+  enumerable: true,
+  get: function get() {
+    return _Horizontal.default;
+  }
+});
+Object.defineProperty(exports, "Vertical", {
+  enumerable: true,
+  get: function get() {
+    return _Vertical.default;
+  }
+});
+
+var _Center = _interopRequireDefault(require("./Center"));
+
+var _Horizontal = _interopRequireDefault(require("./Horizontal"));
+
+var _Vertical = _interopRequireDefault(require("./Vertical"));

package/admin/components/DropZone/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["import Center from \"./Center\";\nimport Horizontal from \"./Horizontal\";\nimport Vertical from \"./Vertical\";\n\nexport { Center, Horizontal, Vertical };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA"}

package/admin/components/Droppable.d.ts

@@ -0,0 +1,34 @@
+import * as React from "react";
+import { ConnectDropTarget } from "react-dnd";
+import { DragSource } from "./FieldEditor/FieldEditorContext";
+export interface DroppableChildrenFunctionParams {
+    isDragging: boolean;
+    isDroppable: boolean;
+    isOver: boolean;
+    item: any;
+    drop: ConnectDropTarget;
+}
+export interface DroppableChildrenFunction {
+    (params: DroppableChildrenFunctionParams): React.ReactElement;
+}
+interface IsVisibleParams {
+    type: "row" | "field" | "newField";
+    item: any;
+    isDragging: boolean;
+}
+export interface IsVisibleCallable {
+    (params: IsVisibleParams): boolean;
+}
+export interface OnDropCallable {
+    (item: DragSource): void;
+}
+export interface DroppableProps {
+    type?: string;
+    children: DroppableChildrenFunction;
+    isDragging?: boolean;
+    isDroppable?: (item: any) => boolean;
+    isVisible?: IsVisibleCallable;
+    onDrop?: OnDropCallable;
+}
+export declare const Droppable: React.FC<DroppableProps>;
+export {};

package/admin/components/Droppable.js

@@ -0,0 +1,72 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Droppable = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _reactDnd = require("react-dnd");
+
+var DroppableComponent = function DroppableComponent(props) {
+  var children = props.children,
+      onDrop = props.onDrop,
+      _props$isVisible = props.isVisible,
+      isVisible = _props$isVisible === void 0 ? function () {
+    return true;
+  } : _props$isVisible;
+
+  var _useDrop = (0, _reactDnd.useDrop)({
+    accept: "element",
+    collect: function collect(monitor) {
+      return {
+        isOver: monitor.isOver() && monitor.isOver({
+          shallow: true
+        }),
+        item: monitor.getItem()
+      };
+    },
+    drop: function drop(item, monitor) {
+      if (typeof props.isDroppable === "function" && !props.isDroppable(item)) {
+        return;
+      }
+
+      if (typeof onDrop === "function") {
+        return onDrop(monitor.getItem());
+      }
+    }
+  }),
+      _useDrop2 = (0, _slicedToArray2.default)(_useDrop, 2),
+      _useDrop2$ = _useDrop2[0],
+      item = _useDrop2$.item,
+      isOver = _useDrop2$.isOver,
+      drop = _useDrop2[1];
+
+  if (item && !isVisible(item)) {
+    return null;
+  }
+
+  var isDroppable = true;
+
+  if (item) {
+    isDroppable = props.isDroppable ? props.isDroppable(item) : isOver;
+  }
+
+  return children({
+    isDragging: Boolean(item),
+    isOver: isOver,
+    isDroppable: isDroppable,
+    item: item,
+    drop: drop
+  });
+};
+
+var Droppable = /*#__PURE__*/React.memo(DroppableComponent);
+exports.Droppable = Droppable;

package/admin/components/Droppable.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["DroppableComponent","props","children","onDrop","isVisible","useDrop","accept","collect","monitor","isOver","shallow","item","getItem","drop","isDroppable","isDragging","Boolean","Droppable","React","memo"],"sources":["Droppable.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { ConnectDropTarget, useDrop } from \"react-dnd\";\nimport { DragSource } from \"~/admin/components/FieldEditor/FieldEditorContext\";\n\nexport interface DroppableChildrenFunctionParams {\n    isDragging: boolean;\n    isDroppable: boolean;\n    isOver: boolean;\n    item: any;\n    drop: ConnectDropTarget;\n}\nexport interface DroppableChildrenFunction {\n    (params: DroppableChildrenFunctionParams): React.ReactElement;\n}\n\ninterface IsVisibleParams {\n    type: \"row\" | \"field\" | \"newField\";\n    item: any;\n    isDragging: boolean;\n}\nexport interface IsVisibleCallable {\n    (params: IsVisibleParams): boolean;\n}\nexport interface OnDropCallable {\n    (item: DragSource): void;\n}\nexport interface DroppableProps {\n    type?: string;\n    children: DroppableChildrenFunction;\n    isDragging?: boolean;\n    isDroppable?: (item: any) => boolean;\n    isVisible?: IsVisibleCallable;\n    onDrop?: OnDropCallable;\n}\n\nconst DroppableComponent: React.FC<DroppableProps> = props => {\n    const { children, onDrop, isVisible = () => true } = props;\n\n    const [{ item, isOver }, drop] = useDrop({\n        accept: \"element\",\n        collect: monitor => ({\n            isOver: monitor.isOver() && monitor.isOver({ shallow: true }),\n            item: monitor.getItem()\n        }),\n        drop(item, monitor) {\n            if (typeof props.isDroppable === \"function\" && !props.isDroppable(item)) {\n                return;\n            }\n\n            if (typeof onDrop === \"function\") {\n                return onDrop(monitor.getItem());\n            }\n        }\n    });\n\n    if (item && !isVisible(item)) {\n        return null;\n    }\n\n    let isDroppable = true;\n    if (item) {\n        isDroppable = props.isDroppable ? props.isDroppable(item) : isOver;\n    }\n\n    return children({ isDragging: Boolean(item), isOver, isDroppable, item, drop });\n};\n\nexport const Droppable: React.FC<DroppableProps> = React.memo(DroppableComponent);\n"],"mappings":";;;;;;;;;;;;;AAAA;;AACA;;AAkCA,IAAMA,kBAA4C,GAAG,SAA/CA,kBAA+C,CAAAC,KAAK,EAAI;EAC1D,IAAQC,QAAR,GAAqDD,KAArD,CAAQC,QAAR;EAAA,IAAkBC,MAAlB,GAAqDF,KAArD,CAAkBE,MAAlB;EAAA,uBAAqDF,KAArD,CAA0BG,SAA1B;EAAA,IAA0BA,SAA1B,iCAAsC;IAAA,OAAM,IAAN;EAAA,CAAtC;;EAEA,eAAiC,IAAAC,iBAAA,EAAQ;IACrCC,MAAM,EAAE,SAD6B;IAErCC,OAAO,EAAE,iBAAAC,OAAO;MAAA,OAAK;QACjBC,MAAM,EAAED,OAAO,CAACC,MAAR,MAAoBD,OAAO,CAACC,MAAR,CAAe;UAAEC,OAAO,EAAE;QAAX,CAAf,CADX;QAEjBC,IAAI,EAAEH,OAAO,CAACI,OAAR;MAFW,CAAL;IAAA,CAFqB;IAMrCC,IANqC,gBAMhCF,IANgC,EAM1BH,OAN0B,EAMjB;MAChB,IAAI,OAAOP,KAAK,CAACa,WAAb,KAA6B,UAA7B,IAA2C,CAACb,KAAK,CAACa,WAAN,CAAkBH,IAAlB,CAAhD,EAAyE;QACrE;MACH;;MAED,IAAI,OAAOR,MAAP,KAAkB,UAAtB,EAAkC;QAC9B,OAAOA,MAAM,CAACK,OAAO,CAACI,OAAR,EAAD,CAAb;MACH;IACJ;EAdoC,CAAR,CAAjC;EAAA;EAAA;EAAA,IAASD,IAAT,cAASA,IAAT;EAAA,IAAeF,MAAf,cAAeA,MAAf;EAAA,IAAyBI,IAAzB;;EAiBA,IAAIF,IAAI,IAAI,CAACP,SAAS,CAACO,IAAD,CAAtB,EAA8B;IAC1B,OAAO,IAAP;EACH;;EAED,IAAIG,WAAW,GAAG,IAAlB;;EACA,IAAIH,IAAJ,EAAU;IACNG,WAAW,GAAGb,KAAK,CAACa,WAAN,GAAoBb,KAAK,CAACa,WAAN,CAAkBH,IAAlB,CAApB,GAA8CF,MAA5D;EACH;;EAED,OAAOP,QAAQ,CAAC;IAAEa,UAAU,EAAEC,OAAO,CAACL,IAAD,CAArB;IAA6BF,MAAM,EAANA,MAA7B;IAAqCK,WAAW,EAAXA,WAArC;IAAkDH,IAAI,EAAJA,IAAlD;IAAwDE,IAAI,EAAJA;EAAxD,CAAD,CAAf;AACH,CA9BD;;AAgCO,IAAMI,SAAmC,gBAAGC,KAAK,CAACC,IAAN,CAAWnB,kBAAX,CAA5C"}

package/admin/components/FieldEditor/EditFieldDialog/AppearanceTab.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const AppearanceTab: () => JSX.Element;
+export default AppearanceTab;