easy-email-extensions 2.5.2-beta.1 → 2.6.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.
@@ -1,4 +1,5 @@
1
1
  import { IBlock } from 'easy-email-core';
2
- export declare function Toolbar({ block }: {
2
+ export declare function Toolbar({ block, direction, }: {
3
3
  block: IBlock;
4
+ direction: 'top' | 'bottom';
4
5
  }): JSX.Element;
package/lib/index2.js CHANGED
@@ -55,8 +55,8 @@ var __async = (__this, __arguments, generator2) => {
55
55
  };
56
56
  import * as React from "react";
57
57
  import React__default, { useCallback, useState, useRef, useEffect, useMemo as useMemo$1, createContext, useLayoutEffect as useLayoutEffect$2, Component, useContext, forwardRef, useImperativeHandle, isValidElement as isValidElement$1, PureComponent, createElement, Suspense } from "react";
58
- import { IconFont, Stack as Stack$5, TextStyle, getBlockNodeByIdx, useBlock, getShadowRoot, FIXED_CONTAINER_ID, getEditorRoot, useEditorProps, useFocusIdx, useActiveTab, scrollBlockEleIntoView, useEditorContext, useHoverIdx, BlockAvatarWrapper, getBlockNodes, ActiveTabKeys } from "easy-email-editor";
59
- import { BasicType, ImageManager, getIndexByIdx, getSiblingIdx, BlockManager, getPageIdx, getChildIdx, createBlockDataByType, getParentByIdx, getValueByIdx, MjmlToJson, JsonToMjml, getParentIdx, getNodeIdxFromClassName, getNodeTypeFromClassName } from "easy-email-core";
58
+ import { IconFont, Stack as Stack$5, TextStyle, getBlockNodeByIdx, useBlock, getShadowRoot, FIXED_CONTAINER_ID, getEditorRoot, useEditorProps, useFocusIdx, useActiveTab, scrollBlockEleIntoView, useEditorContext, useHoverIdx, DATA_ATTRIBUTE_DROP_CONTAINER, BlockAvatarWrapper, ActiveTabKeys } from "easy-email-editor";
59
+ import { BasicType, ImageManager, getIndexByIdx, getSiblingIdx, BlockManager, getPageIdx, getChildIdx, createBlockDataByType, getParentByIdx, getValueByIdx, MjmlToJson, JsonToMjml, getParentIdx, getNodeTypeFromClassName } from "easy-email-core";
60
60
  import { useForm as useForm$2, useField, Form as Form$4, version as version$3 } from "react-final-form";
61
61
  import * as ReactDOM from "react-dom";
62
62
  import ReactDOM__default, { findDOMNode as findDOMNode$1, createPortal } from "react-dom";
@@ -53984,12 +53984,50 @@ function FontFamily$1(props) {
53984
53984
  key: item2.value
53985
53985
  }, item2.label))));
53986
53986
  }
53987
- const SelectionRangeContext = React__default.createContext({
53988
- selectionRange: null,
53989
- setSelectionRange: () => {
53990
- }
53987
+ var index$4 = "";
53988
+ const MergeTags$1 = React__default.memo((props) => {
53989
+ const { mergeTags = {} } = useEditorProps();
53990
+ const treeOptions = useMemo$1(() => {
53991
+ const treeData = [];
53992
+ const deep = (key2, title2, parent, mapData = []) => {
53993
+ const currentMapData = {
53994
+ key: `{{${key2}}}`,
53995
+ value: `{{${key2}}}`,
53996
+ title: title2,
53997
+ children: []
53998
+ };
53999
+ mapData.push(currentMapData);
54000
+ const current = parent[key2];
54001
+ if (lodash.exports.isObject(current)) {
54002
+ Object.keys(current).map((childKey) => deep(key2 + "." + childKey, childKey, current, currentMapData.children));
54003
+ }
54004
+ };
54005
+ Object.keys(mergeTags).map((key2) => deep(key2, key2, mergeTags, treeData));
54006
+ return treeData;
54007
+ }, [mergeTags]);
54008
+ const onSelect = useCallback((value) => {
54009
+ return props.onChange(value);
54010
+ }, [props]);
54011
+ return /* @__PURE__ */ React__default.createElement("div", {
54012
+ style: { color: "#333" }
54013
+ }, props.isSelect ? /* @__PURE__ */ React__default.createElement(TreeSelect$2, {
54014
+ value: props.value,
54015
+ size: "small",
54016
+ style: { width: 120 },
54017
+ dropdownStyle: { maxHeight: 400, overflow: "auto" },
54018
+ placeholder: "Please select",
54019
+ treeData: treeOptions,
54020
+ onSelect: (val) => onSelect(val)
54021
+ }) : /* @__PURE__ */ React__default.createElement(Tree$1, {
54022
+ style: { width: 120 },
54023
+ selectedKeys: [],
54024
+ treeData: treeOptions,
54025
+ onSelect: (vals) => onSelect(vals[0])
54026
+ }));
53991
54027
  });
53992
- const SelectionRangeProvider = (props) => {
54028
+ function TextToolbar(props) {
54029
+ const { container: container2 } = props;
54030
+ const { mergeTags } = useEditorProps();
53993
54031
  const [selectionRange, setSelectionRange] = useState(null);
53994
54032
  useEffect(() => {
53995
54033
  const onSelectionChange = () => {
@@ -54006,15 +54044,6 @@ const SelectionRangeProvider = (props) => {
54006
54044
  document.removeEventListener("selectionchange", onSelectionChange);
54007
54045
  };
54008
54046
  }, []);
54009
- return /* @__PURE__ */ React__default.createElement(SelectionRangeContext.Provider, {
54010
- value: {
54011
- selectionRange,
54012
- setSelectionRange
54013
- }
54014
- }, props.children);
54015
- };
54016
- function useSelectionRange() {
54017
- const { selectionRange, setSelectionRange } = useContext(SelectionRangeContext);
54018
54047
  const restoreRange = useCallback((range2) => {
54019
54048
  const selection = getShadowRoot().getSelection();
54020
54049
  selection.removeAllRanges();
@@ -54023,30 +54052,20 @@ function useSelectionRange() {
54023
54052
  newRange.setEnd(range2.endContainer, range2.endOffset);
54024
54053
  selection.addRange(newRange);
54025
54054
  }, []);
54026
- return {
54027
- selectionRange,
54028
- setSelectionRange,
54029
- restoreRange
54030
- };
54031
- }
54032
- function TextToolbar(props) {
54033
- const { container: container2 } = props;
54034
- const { selectionRange: currentRange, restoreRange } = useSelectionRange();
54035
- useEditorProps();
54036
54055
  const execCommand = (cmd, val) => {
54037
54056
  if (!container2) {
54038
54057
  console.error("No container");
54039
54058
  return;
54040
54059
  }
54041
- if (!currentRange) {
54042
- console.error("No currentRange");
54060
+ if (!selectionRange) {
54061
+ console.error("No selectionRange");
54043
54062
  return;
54044
54063
  }
54045
- if (!(container2 == null ? void 0 : container2.contains(currentRange == null ? void 0 : currentRange.commonAncestorContainer)) && container2 !== (currentRange == null ? void 0 : currentRange.commonAncestorContainer)) {
54064
+ if (!(container2 == null ? void 0 : container2.contains(selectionRange == null ? void 0 : selectionRange.commonAncestorContainer)) && container2 !== (selectionRange == null ? void 0 : selectionRange.commonAncestorContainer)) {
54046
54065
  console.error("Not commonAncestorContainer");
54047
54066
  return;
54048
54067
  }
54049
- restoreRange(currentRange);
54068
+ restoreRange(selectionRange);
54050
54069
  if (cmd === "createLink") {
54051
54070
  const linkData = val;
54052
54071
  const target = linkData.blank ? "_blank" : "";
@@ -54136,10 +54155,24 @@ function TextToolbar(props) {
54136
54155
  }),
54137
54156
  title: "Background color"
54138
54157
  })), /* @__PURE__ */ React__default.createElement(Link$1, {
54139
- currentRange,
54158
+ currentRange: selectionRange,
54140
54159
  onChange: (values2) => execCommand("createLink", values2),
54141
54160
  getPopupContainer: getPopoverMountNode
54142
- }), /* @__PURE__ */ React__default.createElement(ToolItem$1, {
54161
+ }), mergeTags && /* @__PURE__ */ React__default.createElement(Tooltip$1, {
54162
+ color: "#fff",
54163
+ placement: "bottom",
54164
+ title: /* @__PURE__ */ React__default.createElement(MergeTags$1, {
54165
+ value: "",
54166
+ onChange: (val) => execCommand("insertHTML", val)
54167
+ }),
54168
+ getPopupContainer: getPopoverMountNode
54169
+ }, /* @__PURE__ */ React__default.createElement(Button$3, {
54170
+ size: "small",
54171
+ title: "Merge tag",
54172
+ icon: /* @__PURE__ */ React__default.createElement(IconFont, {
54173
+ iconName: "icon-merge-tags"
54174
+ })
54175
+ })), /* @__PURE__ */ React__default.createElement(ToolItem$1, {
54143
54176
  onClick: () => execCommand("removeFormat"),
54144
54177
  icon: /* @__PURE__ */ React__default.createElement(IconFont, {
54145
54178
  iconName: "icon-close"
@@ -54452,7 +54485,10 @@ function ContextMenu({
54452
54485
  }), modal);
54453
54486
  }
54454
54487
  function BlockLayer() {
54455
- const { pageData: pageData2, values: values2 } = useEditorContext();
54488
+ const {
54489
+ pageData: pageData2,
54490
+ formState: { values: values2 }
54491
+ } = useEditorContext();
54456
54492
  const { onUploadImage, onAddCollection } = useEditorProps();
54457
54493
  const { focusIdx: focusIdx2, setFocusIdx } = useFocusIdx();
54458
54494
  const { setHoverIdx } = useHoverIdx();
@@ -54534,9 +54570,11 @@ function BlockLayer() {
54534
54570
  return useMemo$1(() => {
54535
54571
  if (!hasFocus)
54536
54572
  return null;
54537
- return /* @__PURE__ */ React__default.createElement("div", {
54573
+ return /* @__PURE__ */ React__default.createElement("div", __spreadValues({
54538
54574
  id: "BlockLayerManager"
54539
- }, /* @__PURE__ */ React__default.createElement(BlockTree, {
54575
+ }, {
54576
+ [DATA_ATTRIBUTE_DROP_CONTAINER]: "true"
54577
+ }), /* @__PURE__ */ React__default.createElement(BlockTree, {
54540
54578
  selectedId: focusIdx2,
54541
54579
  defaultExpandAll: true,
54542
54580
  treeData,
@@ -54761,7 +54799,6 @@ function AddFont() {
54761
54799
  }
54762
54800
  });
54763
54801
  }
54764
- var index$4 = "";
54765
54802
  var index$3 = "";
54766
54803
  const MergeTags = React__default.memo((props) => {
54767
54804
  const { mergeTags = {} } = useEditorProps();
@@ -56672,13 +56709,14 @@ class BlockAttributeConfigurationManager {
56672
56709
  __publicField(BlockAttributeConfigurationManager, "map", __spreadValues({}, blocks));
56673
56710
  function AttributePanel() {
56674
56711
  const { values: values2, focusBlock: focusBlock2 } = useBlock();
56712
+ const { initialized } = useEditorContext();
56675
56713
  const { focusIdx: focusIdx2 } = useFocusIdx();
56676
56714
  const value = getValueByIdx(values2, focusIdx2);
56677
56715
  const Com = focusBlock2 && BlockAttributeConfigurationManager.get(focusBlock2.type);
56678
56716
  const shadowRoot = getShadowRoot();
56679
- if (!value)
56717
+ if (!value || !initialized)
56680
56718
  return null;
56681
- return /* @__PURE__ */ React__default.createElement(PresetColorsProvider, null, /* @__PURE__ */ React__default.createElement(SelectionRangeProvider, null, Com ? /* @__PURE__ */ React__default.createElement(Com, null) : /* @__PURE__ */ React__default.createElement("div", {
56719
+ return /* @__PURE__ */ React__default.createElement(PresetColorsProvider, null, Com ? /* @__PURE__ */ React__default.createElement(Com, null) : /* @__PURE__ */ React__default.createElement("div", {
56682
56720
  style: { marginTop: 200, padding: "0 50px" }
56683
56721
  }, /* @__PURE__ */ React__default.createElement(TextStyle, {
56684
56722
  size: "extraLarge"
@@ -56695,7 +56733,7 @@ function AttributePanel() {
56695
56733
  outline: none;
56696
56734
  cursor: text;
56697
56735
  }
56698
- `), shadowRoot)));
56736
+ `), shadowRoot));
56699
56737
  }
56700
56738
  var index$1 = "";
56701
56739
  const blockItem = "_blockItem_h5aqy_1";
@@ -59096,25 +59134,11 @@ function awaitForElement(idx) {
59096
59134
  });
59097
59135
  return promiseObj;
59098
59136
  }
59099
- const BLOCK_SELECTED_CLASSNAME = "block-selected";
59100
- const BLOCK_HOVER_CLASSNAME = "block-hover";
59101
- const styleZIndex = {
59102
- SELECT_INDEX: 1,
59103
- HOVER_INDEX: 1,
59104
- DRAG_INDEX: 1,
59105
- SELECT_BLOCK_TOOLTIP: 1,
59106
- HOVER_BLOCK_TOOLTIP: 1,
59107
- DRAG_BLOCK_TOOLTIP: 1,
59108
- SELECT_BLOCK_CHILD: 2,
59109
- HOVER_BLOCK_CHILD: 2,
59110
- DRAG_BLOCK_CHILD: 2
59111
- };
59112
- function Toolbar({ block: block2 }) {
59113
- const {
59114
- moveBlock,
59115
- copyBlock,
59116
- removeBlock
59117
- } = useBlock();
59137
+ function Toolbar({
59138
+ block: block2,
59139
+ direction
59140
+ }) {
59141
+ const { moveBlock, copyBlock, removeBlock } = useBlock();
59118
59142
  const { focusIdx: focusIdx2, setFocusIdx } = useFocusIdx();
59119
59143
  const { modal, setModalVisible } = useAddToCollection();
59120
59144
  const isPage = block2.type === BasicType.PAGE;
@@ -59134,7 +59158,7 @@ function Toolbar({ block: block2 }) {
59134
59158
  style: {
59135
59159
  position: "absolute",
59136
59160
  left: 0,
59137
- top: 0,
59161
+ top: direction === "top" ? 0 : "100%",
59138
59162
  fontSize: 14,
59139
59163
  zIndex: 3,
59140
59164
  color: "#000",
@@ -59145,7 +59169,7 @@ function Toolbar({ block: block2 }) {
59145
59169
  }, /* @__PURE__ */ React__default.createElement("div", {
59146
59170
  style: {
59147
59171
  color: "#ffffff",
59148
- transform: "translateY(-100%)",
59172
+ transform: direction === "top" ? "translateY(-100%)" : void 0,
59149
59173
  display: "flex"
59150
59174
  }
59151
59175
  }, /* @__PURE__ */ React__default.createElement("div", {
@@ -59208,6 +59232,7 @@ function FocusTooltip() {
59208
59232
  const [blockNode, setBlockNode] = useState(null);
59209
59233
  const { focusBlock: focusBlock2 } = useBlock();
59210
59234
  const { focusIdx: focusIdx2 } = useFocusIdx();
59235
+ const [direction, setDirection] = useState("top");
59211
59236
  const isPage = (focusBlock2 == null ? void 0 : focusBlock2.type) === BasicType.PAGE;
59212
59237
  useEffect(() => {
59213
59238
  const promiseObj = awaitForElement(focusIdx2);
@@ -59219,17 +59244,33 @@ function FocusTooltip() {
59219
59244
  };
59220
59245
  }, [focusIdx2, focusBlock2]);
59221
59246
  useEffect(() => {
59222
- if (focusBlock2 && focusBlock2.type === BasicType.RAW) {
59223
- setBlockNode(null);
59224
- return;
59225
- }
59226
- if (blockNode && focusBlock2) {
59227
- blockNode.classList.add(BLOCK_SELECTED_CLASSNAME);
59247
+ if (blockNode) {
59248
+ const options2 = {
59249
+ rootMargin: "-24px 0px -24px 0px",
59250
+ root: getShadowRoot().host,
59251
+ threshold: [0, 1e-3, 0.1, 0.999, 0.9, 1]
59252
+ };
59253
+ const checkDirection = (ev) => {
59254
+ const [current] = ev;
59255
+ const { top, bottom } = current.intersectionRect;
59256
+ const rootBounds = current.rootBounds;
59257
+ if (!rootBounds)
59258
+ return;
59259
+ if (rootBounds.bottom === bottom) {
59260
+ setDirection("top");
59261
+ } else if (rootBounds.top === top) {
59262
+ setDirection("bottom");
59263
+ } else {
59264
+ setDirection("top");
59265
+ }
59266
+ };
59267
+ const observer = new IntersectionObserver(checkDirection, options2);
59268
+ observer.observe(blockNode);
59228
59269
  return () => {
59229
- blockNode.classList.remove(BLOCK_SELECTED_CLASSNAME);
59270
+ observer.unobserve(blockNode);
59230
59271
  };
59231
59272
  }
59232
- }, [blockNode, focusBlock2]);
59273
+ }, [blockNode]);
59233
59274
  const block2 = useMemo$1(() => {
59234
59275
  if (!focusBlock2)
59235
59276
  return null;
@@ -59245,9 +59286,14 @@ function FocusTooltip() {
59245
59286
  pointerEvents: "none",
59246
59287
  left: 0,
59247
59288
  top: 0,
59248
- zIndex: styleZIndex.SELECT_BLOCK_TOOLTIP
59289
+ zIndex: 1
59249
59290
  }
59250
- }, /* @__PURE__ */ React__default.createElement(FocusStyle, null), /* @__PURE__ */ React__default.createElement("div", {
59291
+ }, /* @__PURE__ */ React__default.createElement("style", null, `
59292
+ .email-block {
59293
+ position: relative;
59294
+ }
59295
+
59296
+ `), /* @__PURE__ */ React__default.createElement("div", {
59251
59297
  style: {
59252
59298
  position: "absolute",
59253
59299
  zIndex: 9999,
@@ -59279,6 +59325,7 @@ function FocusTooltip() {
59279
59325
  iconName: "icon-move",
59280
59326
  style: { color: "#fff", cursor: "grab" }
59281
59327
  })))), /* @__PURE__ */ React__default.createElement(Toolbar, {
59328
+ direction,
59282
59329
  block: block2
59283
59330
  }), /* @__PURE__ */ React__default.createElement("div", {
59284
59331
  style: {
@@ -59294,27 +59341,27 @@ function FocusTooltip() {
59294
59341
  }
59295
59342
  })), blockNode));
59296
59343
  }
59297
- const FocusStyle = () => {
59298
- return /* @__PURE__ */ React__default.createElement("style", null, `
59299
- .block-selected {
59300
- position: relative;
59301
- z-index: 1;
59302
- }
59303
-
59304
- .block-selected .email-block {
59305
- z-index: 2;
59306
- }
59307
-
59308
- `);
59309
- };
59310
59344
  function HoverTooltip() {
59311
59345
  const { hoverIdx, direction, isDragging } = useHoverIdx();
59312
59346
  const { focusIdx: focusIdx2 } = useFocusIdx();
59347
+ const [isTop, setIsTop] = useState(false);
59348
+ const { initialized } = useEditorContext();
59313
59349
  const [blockNode, setBlockNode] = useState(null);
59350
+ const rootRef = useRef(null);
59314
59351
  useEffect(() => {
59352
+ if (initialized) {
59353
+ rootRef.current = getEditorRoot().getBoundingClientRect();
59354
+ }
59355
+ }, [initialized]);
59356
+ useEffect(() => {
59357
+ const rootBounds = rootRef.current;
59358
+ if (!initialized || !rootBounds)
59359
+ return;
59315
59360
  if (hoverIdx) {
59316
59361
  const promiseObj = awaitForElement(hoverIdx);
59317
59362
  promiseObj.promise.then((blockNode2) => {
59363
+ const { top } = blockNode2.getBoundingClientRect();
59364
+ setIsTop(rootBounds.top === top);
59318
59365
  setBlockNode(blockNode2);
59319
59366
  });
59320
59367
  return () => {
@@ -59323,16 +59370,7 @@ function HoverTooltip() {
59323
59370
  } else {
59324
59371
  setBlockNode(null);
59325
59372
  }
59326
- }, [hoverIdx]);
59327
- useEffect(() => {
59328
- getBlockNodes().forEach((blockNode2) => {
59329
- if (getNodeIdxFromClassName(blockNode2.classList) !== hoverIdx) {
59330
- blockNode2.classList.remove(BLOCK_HOVER_CLASSNAME);
59331
- } else {
59332
- blockNode2.classList.add(BLOCK_HOVER_CLASSNAME);
59333
- }
59334
- });
59335
- }, [hoverIdx]);
59373
+ }, [hoverIdx, initialized]);
59336
59374
  const block2 = useMemo$1(() => {
59337
59375
  return blockNode ? BlockManager.getBlockByType(getNodeTypeFromClassName(blockNode.classList)) : null;
59338
59376
  }, [blockNode]);
@@ -59340,13 +59378,23 @@ function HoverTooltip() {
59340
59378
  return null;
59341
59379
  if (!block2 || !blockNode)
59342
59380
  return null;
59343
- return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, createPortal(/* @__PURE__ */ React__default.createElement(TipNode, {
59381
+ return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, createPortal(/* @__PURE__ */ React__default.createElement("div", {
59382
+ style: {
59383
+ position: "absolute",
59384
+ height: "100%",
59385
+ width: "100%",
59386
+ top: 0,
59387
+ left: 0,
59388
+ zIndex: 2,
59389
+ pointerEvents: "none"
59390
+ }
59391
+ }, /* @__PURE__ */ React__default.createElement(TipNode, {
59344
59392
  type: isDragging ? "drag" : "hover",
59345
59393
  lineWidth: 1,
59346
59394
  title: block2.name,
59347
- direction,
59395
+ direction: isTop ? "noEnoughTop" : direction,
59348
59396
  isDragging
59349
- }), blockNode));
59397
+ })), blockNode));
59350
59398
  }
59351
59399
  function TipNode(props) {
59352
59400
  const { direction, title: title2, lineWidth, type: type2 } = props;
@@ -59373,14 +59421,19 @@ function TipNode(props) {
59373
59421
  left: 0,
59374
59422
  top: 0,
59375
59423
  fontSize: 14,
59376
- zIndex: styleZIndex.HOVER_BLOCK_TOOLTIP,
59424
+ zIndex: 1,
59377
59425
  color: "#000",
59378
59426
  width: "100%",
59379
59427
  height: "100%",
59380
59428
  pointerEvents: "none",
59381
59429
  textAlign: "left"
59382
59430
  }
59383
- }, /* @__PURE__ */ React__default.createElement(HoverStyle, null), /* @__PURE__ */ React__default.createElement("div", {
59431
+ }, /* @__PURE__ */ React__default.createElement("style", null, `
59432
+ .email-block {
59433
+ position: relative;
59434
+ }
59435
+
59436
+ `), /* @__PURE__ */ React__default.createElement("div", {
59384
59437
  style: {
59385
59438
  position: "absolute",
59386
59439
  left: 0,
@@ -59403,7 +59456,7 @@ function TipNode(props) {
59403
59456
  padding: "1px 5px",
59404
59457
  boxSizing: "border-box",
59405
59458
  whiteSpace: "nowrap",
59406
- transform: "translateY(-100%)"
59459
+ transform: "translateX(-100%)"
59407
59460
  }
59408
59461
  }, title2))), props.isDragging && /* @__PURE__ */ React__default.createElement("div", {
59409
59462
  style: __spreadValues({
@@ -59427,28 +59480,13 @@ function TipNode(props) {
59427
59480
  }, positionStyleMap[props.direction || "none"])
59428
59481
  }, dragTitle)));
59429
59482
  }
59430
- const HoverStyle = () => {
59431
- return /* @__PURE__ */ React__default.createElement("style", null, `
59432
- .block-hover {
59433
- position: relative;
59434
- z-index: 1;
59435
- }
59436
- .block-hover .email-block {
59437
- z-index: 2;
59438
- }
59439
-
59440
- .block-dragover {
59441
- position: relative;
59442
- z-index: 2;
59443
- }
59444
-
59445
-
59446
- .block-dragover .email-block {
59447
- z-index: 3;
59448
- }
59449
- `);
59450
- };
59451
59483
  const positionStyleMap = {
59484
+ noEnoughTop: {
59485
+ top: "0%",
59486
+ left: "50%",
59487
+ padding: "1px 5px",
59488
+ transform: "translate(-50%, 0%)"
59489
+ },
59452
59490
  top: {
59453
59491
  top: "0%",
59454
59492
  left: "50%",