@contentstack/live-preview-utils 2.0.4 → 3.0.0

package/dist/legacy/livePreview/editButton/editButton.js

@@ -0,0 +1,408 @@
+import "../../chunk-5WRI5ZAA.js";
+
+// src/livePreview/editButton/editButton.ts
+import { effect } from "@preact/signals";
+import { inIframe } from "../../common/inIframe.js";
+import Config from "../../configManager/configManager.js";
+import { addCslpOutline, extractDetailsFromCslp } from "../../cslp/index.js";
+import { cslpTagStyles } from "./editButton.style.js";
+import { PublicLogger } from "../../logger/logger.js";
+import {
+  ILivePreviewWindowType
+} from "../../types/types.js";
+import livePreviewPostMessage from "../eventManager/livePreviewEventManager.js";
+import { EDIT_BUTTON_TOOLTIP_ID } from "./editButton.constant.js";
+import { isOpeningInTimeline } from "../../utils/index.js";
+function calculateEditButtonPosition(currentHoveredElement, cslpButtonPosition) {
+  const editButtonPosition = {
+    upperBoundOfTooltip: 0,
+    leftBoundOfTooltip: 0
+  };
+  const currentRectOfElement = currentHoveredElement.getBoundingClientRect();
+  try {
+    const buttonMeasurementValues = {
+      width: 72,
+      halfWidth: 36,
+      height: 40,
+      basicMargin: 5,
+      widthWithMargin: 77
+    };
+    switch (cslpButtonPosition) {
+      case "top-center":
+        editButtonPosition.upperBoundOfTooltip = currentRectOfElement.top - buttonMeasurementValues.height;
+        editButtonPosition.leftBoundOfTooltip = currentRectOfElement.width / 2 - buttonMeasurementValues.halfWidth + currentRectOfElement.left;
+        break;
+      case "top-right":
+        editButtonPosition.upperBoundOfTooltip = currentRectOfElement.top - buttonMeasurementValues.height;
+        editButtonPosition.leftBoundOfTooltip = currentRectOfElement.right - buttonMeasurementValues.width;
+        break;
+      case "right":
+        editButtonPosition.upperBoundOfTooltip = currentRectOfElement.top - buttonMeasurementValues.basicMargin;
+        editButtonPosition.leftBoundOfTooltip = currentRectOfElement.right + buttonMeasurementValues.basicMargin;
+        break;
+      case "bottom":
+        editButtonPosition.upperBoundOfTooltip = currentRectOfElement.bottom + buttonMeasurementValues.basicMargin;
+        editButtonPosition.leftBoundOfTooltip = currentRectOfElement.left - buttonMeasurementValues.basicMargin;
+        break;
+      case "bottom-left":
+        editButtonPosition.upperBoundOfTooltip = currentRectOfElement.bottom + buttonMeasurementValues.basicMargin;
+        editButtonPosition.leftBoundOfTooltip = currentRectOfElement.left - buttonMeasurementValues.basicMargin;
+        break;
+      case "bottom-center":
+        editButtonPosition.upperBoundOfTooltip = currentRectOfElement.bottom + buttonMeasurementValues.basicMargin;
+        editButtonPosition.leftBoundOfTooltip = currentRectOfElement.width / 2 - buttonMeasurementValues.halfWidth + currentRectOfElement.left;
+        break;
+      case "bottom-right":
+        editButtonPosition.upperBoundOfTooltip = currentRectOfElement.bottom + buttonMeasurementValues.basicMargin;
+        editButtonPosition.leftBoundOfTooltip = currentRectOfElement.right - buttonMeasurementValues.width;
+        break;
+      case "left":
+        editButtonPosition.upperBoundOfTooltip = currentRectOfElement.top - buttonMeasurementValues.basicMargin;
+        editButtonPosition.leftBoundOfTooltip = currentRectOfElement.left - buttonMeasurementValues.widthWithMargin;
+        break;
+      // default position => top, top-left or any other string
+      default:
+        editButtonPosition.upperBoundOfTooltip = currentRectOfElement.top - buttonMeasurementValues.height;
+        editButtonPosition.leftBoundOfTooltip = currentRectOfElement.left - buttonMeasurementValues.basicMargin;
+        break;
+    }
+    return editButtonPosition;
+  } catch (error) {
+    PublicLogger.error(error);
+    return editButtonPosition;
+  }
+}
+var createSingularEditButton = (editCallback) => {
+  const singularEditButton = document.createElement("div");
+  singularEditButton.classList.add("cslp-tooltip-child", "singular");
+  singularEditButton.setAttribute(
+    "data-test-id",
+    "cslp-singular-edit-button"
+  );
+  singularEditButton.innerHTML = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M8.1 3.5L0.3 11.3C0.1 11.5 0 11.7 0 12V15C0 15.6 0.4 16 1 16H4C4.3 16 4.5 15.9 4.7 15.7L12.5 7.9L8.1 3.5Z" fill="#718096"></path>
+      <path d="M15.7 3.3L12.7 0.3C12.3 -0.1 11.7 -0.1 11.3 0.3L9.5 2.1L13.9 6.5L15.7 4.7C16.1 4.3 16.1 3.7 15.7 3.3Z" fill="#718096"></path>
+    </svg>Edit`;
+  singularEditButton.addEventListener("click", editCallback);
+  return singularEditButton;
+};
+var createMultipleEditButton = (editCallback, linkCallback) => {
+  const multipleEditButton = document.createElement("div");
+  multipleEditButton.classList.add("cslp-tooltip-child");
+  multipleEditButton.setAttribute("data-title", "Edit");
+  multipleEditButton.setAttribute(
+    "data-test-id",
+    "cslp-multiple-edit-button"
+  );
+  multipleEditButton.innerHTML = ` <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M8.1 3.5L0.3 11.3C0.1 11.5 0 11.7 0 12V15C0 15.6 0.4 16 1 16H4C4.3 16 4.5 15.9 4.7 15.7L12.5 7.9L8.1 3.5Z" fill="#718096"></path>
+      <path d="M15.7 3.3L12.7 0.3C12.3 -0.1 11.7 -0.1 11.3 0.3L9.5 2.1L13.9 6.5L15.7 4.7C16.1 4.3 16.1 3.7 15.7 3.3Z" fill="#718096"></path>
+    </svg>`;
+  multipleEditButton.addEventListener("click", editCallback);
+  const multipleExternalLinkButton = document.createElement("div");
+  multipleExternalLinkButton.classList.add("cslp-tooltip-child");
+  multipleExternalLinkButton.setAttribute("data-title", "Go to link");
+  multipleExternalLinkButton.setAttribute(
+    "data-test-id",
+    "cslp-multiple-external-link-button"
+  );
+  multipleExternalLinkButton.innerHTML = ` <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M2.66654 2.66758H13.3332V13.3342H6.66654V16.0009H13.3332C14.0405 16.0009 14.7187 15.72 15.2188 15.2199C15.7189 14.7198 15.9999 14.0415 15.9999 13.3342V2.66758C15.9999 1.96034 15.7189 1.28206 15.2188 0.781964C14.7187 0.281867 14.0405 0.000915527 13.3332 0.000915527H2.66654C1.9593 0.000915527 1.28102 0.281867 0.780927 0.781964C0.280829 1.28206 -0.00012207 1.96034 -0.00012207 2.66758V9.33425H2.66654V2.66758Z" fill="#718096" />
+      <path d="M6.94263 7.05734L0.999958 13L2.88529 14.8853L8.82796 8.94267L10.8853 11V5.00001H4.88529L6.94263 7.05734Z" fill="#718096" />
+    </svg>`;
+  multipleExternalLinkButton.addEventListener("click", linkCallback);
+  const multipleEditFragment = document.createDocumentFragment();
+  multipleEditFragment.appendChild(multipleEditButton);
+  multipleEditFragment.appendChild(multipleExternalLinkButton);
+  const multipleDiv = document.createElement("div");
+  multipleDiv.appendChild(multipleEditFragment);
+  multipleDiv.classList.add(cslpTagStyles()["multiple"]);
+  return multipleDiv;
+};
+function getEditButtonPosition(currentHoveredElement, defaultPosition) {
+  if (!currentHoveredElement)
+    return { upperBoundOfTooltip: 0, leftBoundOfTooltip: 0 };
+  const cslpButtonPosition = currentHoveredElement.getAttribute(
+    "data-cslp-button-position"
+  );
+  if (cslpButtonPosition) {
+    return calculateEditButtonPosition(
+      currentHoveredElement,
+      cslpButtonPosition
+    );
+  }
+  return calculateEditButtonPosition(
+    currentHoveredElement,
+    defaultPosition || "top"
+  );
+}
+function shouldRenderEditButton() {
+  var _a, _b;
+  const config = Config.get();
+  if (!config.editButton.enable) {
+    if (config.editButton.enable === void 0)
+      PublicLogger.error(
+        "enable key is required inside editButton object"
+      );
+    return false;
+  }
+  try {
+    const currentLocation = new URL(window.location.href);
+    const cslpButtonQueryValue = currentLocation.searchParams.get("cslp-buttons");
+    if (cslpButtonQueryValue !== null && config.editButton.includeByQueryParameter !== false)
+      return cslpButtonQueryValue === "false" ? false : true;
+  } catch (error) {
+    PublicLogger.error(error);
+  }
+  const iFrameCheck = inIframe();
+  if ((_a = config.editButton.exclude) == null ? void 0 : _a.find(
+    (exclude) => exclude === "outsideLivePreviewPortal"
+  )) {
+    return false;
+  }
+  if (iFrameCheck && ((_b = config.editButton.exclude) == null ? void 0 : _b.find(
+    (exclude) => exclude === "insideLivePreviewPortal"
+  ))) {
+    return false;
+  } else if (iFrameCheck) {
+    if (config.windowType === "builder") {
+      return false;
+    }
+    return true;
+  }
+  return true;
+}
+function toggleEditButtonElement() {
+  var _a;
+  const render = shouldRenderEditButton();
+  const exists = doesEditButtonExist();
+  if (render && !exists) {
+    LivePreviewEditButton.livePreviewEditButton = new LivePreviewEditButton();
+  } else if (!render && exists) {
+    (_a = LivePreviewEditButton.livePreviewEditButton) == null ? void 0 : _a.destroy();
+  }
+}
+function doesEditButtonExist() {
+  return document.getElementById(EDIT_BUTTON_TOOLTIP_ID) !== null;
+}
+var LivePreviewEditButton = class {
+  constructor() {
+    this.tooltip = null;
+    this.typeOfCurrentChild = "singular";
+    this.tooltipChild = {
+      singular: null,
+      multiple: null
+    };
+    this.createCslpTooltip = this.createCslpTooltip.bind(this);
+    this.updateTooltipPosition = this.updateTooltipPosition.bind(this);
+    this.addEditStyleOnHover = this.addEditStyleOnHover.bind(this);
+    this.scrollHandler = this.scrollHandler.bind(this);
+    this.generateRedirectUrl = this.generateRedirectUrl.bind(this);
+    this.linkClickHandler = this.linkClickHandler.bind(this);
+    this.destroy = this.destroy.bind(this);
+    if (this.createCslpTooltip()) {
+      this.updateTooltipPosition();
+      window.addEventListener("scroll", this.updateTooltipPosition);
+      window.addEventListener("mouseover", this.addEditStyleOnHover);
+    }
+  }
+  createCslpTooltip() {
+    const editButton = Config.get().editButton;
+    if (!document.getElementById(EDIT_BUTTON_TOOLTIP_ID) && editButton.enable && shouldRenderEditButton()) {
+      const tooltip = document.createElement("button");
+      this.tooltip = tooltip;
+      this.tooltip.classList.add(cslpTagStyles()["cslp-tooltip"]);
+      this.tooltip.setAttribute("data-test-id", "cs-cslp-tooltip");
+      this.tooltip.id = EDIT_BUTTON_TOOLTIP_ID;
+      window.document.body.insertAdjacentElement(
+        "beforeend",
+        this.tooltip
+      );
+      this.tooltipChild.singular = createSingularEditButton(
+        this.scrollHandler
+      );
+      this.tooltipChild.multiple = createMultipleEditButton(
+        this.scrollHandler,
+        this.linkClickHandler
+      );
+      this.tooltip.appendChild(this.tooltipChild.singular);
+      return true;
+    }
+    return false;
+  }
+  updateTooltipPosition() {
+    var _a;
+    const editButton = Config.get().editButton;
+    const elements = Config.get().elements;
+    if (!elements.highlightedElement || !this.tooltip) return false;
+    const currentRectOfElement = elements.highlightedElement.getBoundingClientRect();
+    const currentRectOfParentOfElement = (_a = this.tooltip.parentElement) == null ? void 0 : _a.getBoundingClientRect();
+    if (currentRectOfElement && currentRectOfParentOfElement) {
+      const editButtonPosition = getEditButtonPosition(
+        elements.highlightedElement,
+        editButton.position
+      );
+      let upperBoundOfTooltip = editButtonPosition.upperBoundOfTooltip;
+      const leftBoundOfTooltip = editButtonPosition.leftBoundOfTooltip;
+      if (upperBoundOfTooltip < 0) {
+        if (currentRectOfElement.top < 0)
+          upperBoundOfTooltip = currentRectOfElement.top;
+        else upperBoundOfTooltip = 0;
+      }
+      this.tooltip.style.top = upperBoundOfTooltip + "px";
+      this.tooltip.style.zIndex = elements.highlightedElement.style.zIndex || "200";
+      this.tooltip.style.left = leftBoundOfTooltip + "px";
+      if (this.tooltipChild.singular && this.tooltipChild.multiple) {
+        if (elements.highlightedElement.hasAttribute("href") && this.typeOfCurrentChild !== "multiple") {
+          this.tooltip.innerHTML = "";
+          this.tooltip.appendChild(this.tooltipChild.multiple);
+          this.typeOfCurrentChild = "multiple";
+        } else if (this.typeOfCurrentChild !== "singular") {
+          this.tooltip.innerHTML = "";
+          this.tooltip.appendChild(this.tooltipChild.singular);
+          this.typeOfCurrentChild = "singular";
+        }
+      }
+      return true;
+    }
+    return false;
+  }
+  addEditStyleOnHover(e) {
+    const updateTooltipPosition = ({
+      cslpTag,
+      highlightedElement
+    }) => {
+      var _a, _b;
+      if (this.updateTooltipPosition()) {
+        (_a = this.tooltip) == null ? void 0 : _a.setAttribute("current-data-cslp", cslpTag);
+        (_b = this.tooltip) == null ? void 0 : _b.setAttribute(
+          "current-href",
+          highlightedElement.getAttribute("href") ?? ""
+        );
+      }
+    };
+    const editButton = Config.get().editButton;
+    const windowType = Config.get().windowType;
+    if ((windowType === ILivePreviewWindowType.PREVIEW || windowType === ILivePreviewWindowType.INDEPENDENT) && editButton.enable) {
+      addCslpOutline(e, updateTooltipPosition);
+    }
+  }
+  scrollHandler() {
+    var _a;
+    if (!this.tooltip) return;
+    const cslpTag = this.tooltip.getAttribute("current-data-cslp");
+    if (cslpTag) {
+      const { content_type_uid, entry_uid, locale, variant, fieldPathWithIndex } = extractDetailsFromCslp(cslpTag);
+      if (inIframe()) {
+        (_a = livePreviewPostMessage) == null ? void 0 : _a.send("scroll", {
+          field: fieldPathWithIndex,
+          content_type_uid,
+          entry_uid,
+          variant,
+          locale
+        });
+      } else {
+        try {
+          const redirectUrl = this.generateRedirectUrl(
+            content_type_uid,
+            locale,
+            entry_uid,
+            variant,
+            fieldPathWithIndex
+          );
+          window.open(redirectUrl, "_blank");
+        } catch (error) {
+          PublicLogger.error(error);
+        }
+      }
+    }
+  }
+  /**
+   * Generates the redirect URL for editing a specific entry in the Live Preview SDK.
+   * @param content_type_uid - The UID of the content type.
+   * @param locale - The locale of the entry (default: "en-us").
+   * @param entry_uid - The UID of the entry.
+   * @param preview_field - The field to be previewed.
+   * @returns The redirect URL for editing the entry.
+   */
+  generateRedirectUrl(content_type_uid, locale = "en-us", entry_uid, variant, preview_field) {
+    const config = Config.get();
+    if (!config.stackDetails.apiKey) {
+      throw `To use edit tags, you must provide the stack API key. Specify the API key while initializing the Live Preview SDK.
+
+                ContentstackLivePreview.init({
+                    ...,
+                    stackDetails: {
+                        apiKey: 'your-api-key'
+                    },
+                    ...
+                })`;
+    }
+    if (!config.stackDetails.environment) {
+      throw `To use edit tags, you must provide the preview environment. Specify the preview environment while initializing the Live Preview SDK.
+
+                ContentstackLivePreview.init({
+                    ...,
+                    stackDetails: {
+                        environment: 'Your-environment'
+                    },
+                    ...
+                })`;
+    }
+    const protocol = String(config.clientUrlParams.protocol);
+    const host = String(config.clientUrlParams.host);
+    const port = String(config.clientUrlParams.port);
+    const environment = String(config.stackDetails.environment);
+    const branch = String(config.stackDetails.branch || "main");
+    let urlHash = `!/stack/${config.stackDetails.apiKey}/content-type/${content_type_uid}/${locale ?? "en-us"}/entry/${entry_uid}`;
+    if (variant) {
+      urlHash += `/variant/${variant}/edit`;
+    } else {
+      urlHash += `/edit`;
+    }
+    const url = new URL(`${protocol}://${host}`);
+    url.port = port;
+    url.hash = urlHash;
+    if (config.stackDetails.branch) {
+      url.searchParams.append("branch", branch);
+    }
+    url.searchParams.append("preview-field", preview_field);
+    url.searchParams.append("preview-locale", locale ?? "en-us");
+    url.searchParams.append("preview-environment", environment);
+    return `${url.origin}/${url.hash}${url.search}`;
+  }
+  linkClickHandler() {
+    if (!this.tooltip) return;
+    const hrefAttribute = this.tooltip.getAttribute("current-href");
+    if (hrefAttribute) {
+      window.location.assign(hrefAttribute);
+    }
+  }
+  /**
+   * Destroys the edit button by removing event listeners and removing the tooltip.
+   */
+  destroy() {
+    var _a;
+    window.removeEventListener("scroll", this.updateTooltipPosition);
+    window.removeEventListener("mouseover", this.addEditStyleOnHover);
+    (_a = this.tooltip) == null ? void 0 : _a.remove();
+  }
+};
+LivePreviewEditButton.livePreviewEditButton = null;
+effect(function handleWindowTypeChange() {
+  if (typeof window === "undefined") return;
+  Config.get().windowType;
+  if (LivePreviewEditButton && !isOpeningInTimeline()) {
+    toggleEditButtonElement();
+  }
+});
+export {
+  LivePreviewEditButton,
+  createMultipleEditButton,
+  createSingularEditButton,
+  doesEditButtonExist,
+  getEditButtonPosition,
+  shouldRenderEditButton,
+  toggleEditButtonElement
+};
+//# sourceMappingURL=editButton.js.map

package/dist/legacy/livePreview/editButton/editButton.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/livePreview/editButton/editButton.ts"],"sourcesContent":["import { effect } from \"@preact/signals\";\nimport { inIframe } from \"../../common/inIframe\";\nimport Config from \"../../configManager/configManager\";\nimport { addCslpOutline, extractDetailsFromCslp } from \"../../cslp\";\nimport { cslpTagStyles } from \"./editButton.style\";\nimport { PublicLogger } from \"../../logger/logger\";\nimport {\n    type IEditButtonPosition,\n    ILivePreviewWindowType,\n} from \"../../types/types\";\nimport livePreviewPostMessage from \"../eventManager/livePreviewEventManager\";\nimport { EDIT_BUTTON_TOOLTIP_ID } from \"./editButton.constant\";\nimport { isOpeningInTimeline } from \"../../utils\";\n\nfunction calculateEditButtonPosition(\n    currentHoveredElement: HTMLElement,\n    cslpButtonPosition: string\n): IEditButtonPosition {\n    const editButtonPosition: IEditButtonPosition = {\n        upperBoundOfTooltip: 0,\n        leftBoundOfTooltip: 0,\n    };\n    const currentRectOfElement = currentHoveredElement.getBoundingClientRect();\n    try {\n        const buttonMeasurementValues = {\n            width: 72,\n            halfWidth: 36,\n            height: 40,\n            basicMargin: 5,\n            widthWithMargin: 77,\n        };\n\n        switch (cslpButtonPosition) {\n            case \"top-center\":\n                editButtonPosition.upperBoundOfTooltip =\n                    currentRectOfElement.top - buttonMeasurementValues.height;\n                editButtonPosition.leftBoundOfTooltip =\n                    currentRectOfElement.width / 2 -\n                    buttonMeasurementValues.halfWidth +\n                    currentRectOfElement.left;\n                break;\n            case \"top-right\":\n                editButtonPosition.upperBoundOfTooltip =\n                    currentRectOfElement.top - buttonMeasurementValues.height;\n                editButtonPosition.leftBoundOfTooltip =\n                    currentRectOfElement.right - buttonMeasurementValues.width;\n                break;\n            case \"right\":\n                editButtonPosition.upperBoundOfTooltip =\n                    currentRectOfElement.top -\n                    buttonMeasurementValues.basicMargin;\n                editButtonPosition.leftBoundOfTooltip =\n                    currentRectOfElement.right +\n                    buttonMeasurementValues.basicMargin;\n                break;\n            case \"bottom\":\n                editButtonPosition.upperBoundOfTooltip =\n                    currentRectOfElement.bottom +\n                    buttonMeasurementValues.basicMargin;\n                editButtonPosition.leftBoundOfTooltip =\n                    currentRectOfElement.left -\n                    buttonMeasurementValues.basicMargin;\n                break;\n            case \"bottom-left\":\n                editButtonPosition.upperBoundOfTooltip =\n                    currentRectOfElement.bottom +\n                    buttonMeasurementValues.basicMargin;\n                editButtonPosition.leftBoundOfTooltip =\n                    currentRectOfElement.left -\n                    buttonMeasurementValues.basicMargin;\n                break;\n            case \"bottom-center\":\n                editButtonPosition.upperBoundOfTooltip =\n                    currentRectOfElement.bottom +\n                    buttonMeasurementValues.basicMargin;\n                editButtonPosition.leftBoundOfTooltip =\n                    currentRectOfElement.width / 2 -\n                    buttonMeasurementValues.halfWidth +\n                    currentRectOfElement.left;\n                break;\n            case \"bottom-right\":\n                editButtonPosition.upperBoundOfTooltip =\n                    currentRectOfElement.bottom +\n                    buttonMeasurementValues.basicMargin;\n                editButtonPosition.leftBoundOfTooltip =\n                    currentRectOfElement.right - buttonMeasurementValues.width;\n                break;\n            case \"left\":\n                editButtonPosition.upperBoundOfTooltip =\n                    currentRectOfElement.top -\n                    buttonMeasurementValues.basicMargin;\n                editButtonPosition.leftBoundOfTooltip =\n                    currentRectOfElement.left -\n                    buttonMeasurementValues.widthWithMargin;\n                break;\n            // default position => top, top-left or any other string\n            default:\n                editButtonPosition.upperBoundOfTooltip =\n                    currentRectOfElement.top - buttonMeasurementValues.height;\n                editButtonPosition.leftBoundOfTooltip =\n                    currentRectOfElement.left -\n                    buttonMeasurementValues.basicMargin;\n                break;\n        }\n        return editButtonPosition;\n    } catch (error) {\n        PublicLogger.error(error);\n        return editButtonPosition;\n    }\n}\n\nexport const createSingularEditButton = (\n    editCallback: (e: MouseEvent) => void\n): HTMLDivElement => {\n    const singularEditButton = document.createElement(\"div\");\n    singularEditButton.classList.add(\"cslp-tooltip-child\", \"singular\");\n    singularEditButton.setAttribute(\n        \"data-test-id\",\n        \"cslp-singular-edit-button\"\n    );\n    singularEditButton.innerHTML = `<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M8.1 3.5L0.3 11.3C0.1 11.5 0 11.7 0 12V15C0 15.6 0.4 16 1 16H4C4.3 16 4.5 15.9 4.7 15.7L12.5 7.9L8.1 3.5Z\" fill=\"#718096\"></path>\n      <path d=\"M15.7 3.3L12.7 0.3C12.3 -0.1 11.7 -0.1 11.3 0.3L9.5 2.1L13.9 6.5L15.7 4.7C16.1 4.3 16.1 3.7 15.7 3.3Z\" fill=\"#718096\"></path>\n    </svg>Edit`;\n\n    singularEditButton.addEventListener(\"click\", editCallback);\n\n    return singularEditButton;\n};\n\nexport const createMultipleEditButton = (\n    editCallback: (e: MouseEvent) => void,\n    linkCallback: (e: MouseEvent) => void\n): HTMLDivElement => {\n    const multipleEditButton = document.createElement(\"div\");\n    multipleEditButton.classList.add(\"cslp-tooltip-child\");\n    multipleEditButton.setAttribute(\"data-title\", \"Edit\");\n    multipleEditButton.setAttribute(\n        \"data-test-id\",\n        \"cslp-multiple-edit-button\"\n    );\n    multipleEditButton.innerHTML = ` <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M8.1 3.5L0.3 11.3C0.1 11.5 0 11.7 0 12V15C0 15.6 0.4 16 1 16H4C4.3 16 4.5 15.9 4.7 15.7L12.5 7.9L8.1 3.5Z\" fill=\"#718096\"></path>\n      <path d=\"M15.7 3.3L12.7 0.3C12.3 -0.1 11.7 -0.1 11.3 0.3L9.5 2.1L13.9 6.5L15.7 4.7C16.1 4.3 16.1 3.7 15.7 3.3Z\" fill=\"#718096\"></path>\n    </svg>`;\n\n    multipleEditButton.addEventListener(\"click\", editCallback);\n\n    const multipleExternalLinkButton = document.createElement(\"div\");\n    multipleExternalLinkButton.classList.add(\"cslp-tooltip-child\");\n    multipleExternalLinkButton.setAttribute(\"data-title\", \"Go to link\");\n    multipleExternalLinkButton.setAttribute(\n        \"data-test-id\",\n        \"cslp-multiple-external-link-button\"\n    );\n    multipleExternalLinkButton.innerHTML = ` <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M2.66654 2.66758H13.3332V13.3342H6.66654V16.0009H13.3332C14.0405 16.0009 14.7187 15.72 15.2188 15.2199C15.7189 14.7198 15.9999 14.0415 15.9999 13.3342V2.66758C15.9999 1.96034 15.7189 1.28206 15.2188 0.781964C14.7187 0.281867 14.0405 0.000915527 13.3332 0.000915527H2.66654C1.9593 0.000915527 1.28102 0.281867 0.780927 0.781964C0.280829 1.28206 -0.00012207 1.96034 -0.00012207 2.66758V9.33425H2.66654V2.66758Z\" fill=\"#718096\" />\n      <path d=\"M6.94263 7.05734L0.999958 13L2.88529 14.8853L8.82796 8.94267L10.8853 11V5.00001H4.88529L6.94263 7.05734Z\" fill=\"#718096\" />\n    </svg>`;\n\n    multipleExternalLinkButton.addEventListener(\"click\", linkCallback);\n\n    const multipleEditFragment = document.createDocumentFragment();\n    multipleEditFragment.appendChild(multipleEditButton);\n    multipleEditFragment.appendChild(multipleExternalLinkButton);\n\n    const multipleDiv = document.createElement(\"div\");\n    multipleDiv.appendChild(multipleEditFragment);\n    multipleDiv.classList.add(cslpTagStyles()[\"multiple\"]);\n\n    return multipleDiv;\n};\n\nexport function getEditButtonPosition(\n    currentHoveredElement: HTMLElement | null,\n    defaultPosition: string | undefined\n): IEditButtonPosition {\n    if (!currentHoveredElement)\n        return { upperBoundOfTooltip: 0, leftBoundOfTooltip: 0 };\n\n    const cslpButtonPosition = currentHoveredElement.getAttribute(\n        \"data-cslp-button-position\"\n    );\n    if (cslpButtonPosition) {\n        return calculateEditButtonPosition(\n            currentHoveredElement,\n            cslpButtonPosition\n        );\n    }\n\n    // NOTE: position \"top\" and \"top-left\" will be the position of edit button if no default position passed in config\n    return calculateEditButtonPosition(\n        currentHoveredElement,\n        defaultPosition || \"top\"\n    );\n}\n\nexport function shouldRenderEditButton(): boolean {\n    const config = Config.get();\n\n    if (!config.editButton.enable) {\n        if (config.editButton.enable === undefined)\n            PublicLogger.error(\n                \"enable key is required inside editButton object\"\n            );\n        return false;\n    }\n\n    // return boolean in case of cslp-buttons query added in url\n    try {\n        const currentLocation = new URL(window.location.href);\n        const cslpButtonQueryValue =\n            currentLocation.searchParams.get(\"cslp-buttons\");\n\n        if (\n            cslpButtonQueryValue !== null &&\n            config.editButton.includeByQueryParameter !== false\n        )\n            return cslpButtonQueryValue === \"false\" ? false : true;\n    } catch (error) {\n        PublicLogger.error(error);\n    }\n\n    const iFrameCheck = inIframe();\n\n    // case outside live preview\n    if (\n        config.editButton.exclude?.find(\n            (exclude) => exclude === \"outsideLivePreviewPortal\"\n        )\n    ) {\n        return false;\n    }\n\n    // case if inside live preview\n    if (\n        iFrameCheck &&\n        config.editButton.exclude?.find(\n            (exclude) => exclude === \"insideLivePreviewPortal\"\n        )\n    ) {\n        return false;\n    } else if (iFrameCheck) {\n        // case if inside visual builder\n        if (config.windowType === \"builder\") {\n            return false;\n        }\n\n        // case if independent site\n        return true;\n    }\n\n    // Priority list => 1. cslpEditButton query value 2.  Inside live preview  3. renderCslpButtonByDefault value selected by user\n    return true;\n}\n\nexport function toggleEditButtonElement() {\n    const render = shouldRenderEditButton();\n    const exists = doesEditButtonExist();\n\n    if (render && !exists) {\n        LivePreviewEditButton.livePreviewEditButton =\n            new LivePreviewEditButton();\n    } else if (!render && exists) {\n        LivePreviewEditButton.livePreviewEditButton?.destroy();\n    }\n}\n\nexport function doesEditButtonExist() {\n    return document.getElementById(EDIT_BUTTON_TOOLTIP_ID) !== null;\n}\n\nexport class LivePreviewEditButton {\n    private tooltip: HTMLButtonElement | null = null;\n    private typeOfCurrentChild: \"singular\" | \"multiple\" = \"singular\";\n    private tooltipChild: {\n        singular: HTMLDivElement | null;\n        multiple: HTMLDivElement | null;\n    } = {\n        singular: null,\n        multiple: null,\n    };\n    static livePreviewEditButton: LivePreviewEditButton | null = null;\n\n    constructor() {\n        this.createCslpTooltip = this.createCslpTooltip.bind(this);\n        this.updateTooltipPosition = this.updateTooltipPosition.bind(this);\n        this.addEditStyleOnHover = this.addEditStyleOnHover.bind(this);\n        this.scrollHandler = this.scrollHandler.bind(this);\n        this.generateRedirectUrl = this.generateRedirectUrl.bind(this);\n        this.linkClickHandler = this.linkClickHandler.bind(this);\n        this.destroy = this.destroy.bind(this);\n\n        if (this.createCslpTooltip()) {\n            this.updateTooltipPosition();\n\n            window.addEventListener(\"scroll\", this.updateTooltipPosition);\n            window.addEventListener(\"mouseover\", this.addEditStyleOnHover);\n        }\n    }\n\n    private createCslpTooltip(): boolean {\n        const editButton = Config.get().editButton;\n\n        if (\n            !document.getElementById(EDIT_BUTTON_TOOLTIP_ID) &&\n            editButton.enable &&\n            shouldRenderEditButton()\n        ) {\n            const tooltip = document.createElement(\"button\");\n            this.tooltip = tooltip;\n\n            this.tooltip.classList.add(cslpTagStyles()[\"cslp-tooltip\"]);\n            this.tooltip.setAttribute(\"data-test-id\", \"cs-cslp-tooltip\");\n            this.tooltip.id = EDIT_BUTTON_TOOLTIP_ID;\n\n            window.document.body.insertAdjacentElement(\n                \"beforeend\",\n                this.tooltip\n            );\n\n            this.tooltipChild.singular = createSingularEditButton(\n                this.scrollHandler\n            );\n            this.tooltipChild.multiple = createMultipleEditButton(\n                this.scrollHandler,\n                this.linkClickHandler\n            );\n\n            this.tooltip.appendChild(this.tooltipChild.singular);\n            return true;\n        }\n        return false;\n    }\n\n    private updateTooltipPosition() {\n        const editButton = Config.get().editButton;\n        const elements = Config.get().elements;\n\n        if (!elements.highlightedElement || !this.tooltip) return false;\n\n        const currentRectOfElement =\n            elements.highlightedElement.getBoundingClientRect();\n        const currentRectOfParentOfElement =\n            this.tooltip.parentElement?.getBoundingClientRect();\n\n        if (currentRectOfElement && currentRectOfParentOfElement) {\n            const editButtonPosition = getEditButtonPosition(\n                elements.highlightedElement as HTMLElement,\n                editButton.position\n            );\n\n            let upperBoundOfTooltip = editButtonPosition.upperBoundOfTooltip;\n            const leftBoundOfTooltip = editButtonPosition.leftBoundOfTooltip;\n\n            // if scrolled and element is still visible, make sure tooltip is also visible\n            if (upperBoundOfTooltip < 0) {\n                if (currentRectOfElement.top < 0)\n                    upperBoundOfTooltip = currentRectOfElement.top;\n                else upperBoundOfTooltip = 0;\n            }\n\n            this.tooltip.style.top = upperBoundOfTooltip + \"px\";\n            this.tooltip.style.zIndex =\n                elements.highlightedElement.style.zIndex || \"200\";\n            this.tooltip.style.left = leftBoundOfTooltip + \"px\";\n\n            if (this.tooltipChild.singular && this.tooltipChild.multiple) {\n                if (\n                    elements.highlightedElement.hasAttribute(\"href\") &&\n                    this.typeOfCurrentChild !== \"multiple\"\n                ) {\n                    this.tooltip.innerHTML = \"\";\n                    this.tooltip.appendChild(this.tooltipChild.multiple);\n                    this.typeOfCurrentChild = \"multiple\";\n                } else if (this.typeOfCurrentChild !== \"singular\") {\n                    this.tooltip.innerHTML = \"\";\n                    this.tooltip.appendChild(this.tooltipChild.singular);\n                    this.typeOfCurrentChild = \"singular\";\n                }\n            }\n            return true;\n        }\n\n        return false;\n    }\n\n    private addEditStyleOnHover(e: MouseEvent) {\n        const updateTooltipPosition: Parameters<typeof addCslpOutline>[\"1\"] = ({\n            cslpTag,\n            highlightedElement,\n        }) => {\n            if (this.updateTooltipPosition()) {\n                this.tooltip?.setAttribute(\"current-data-cslp\", cslpTag);\n                this.tooltip?.setAttribute(\n                    \"current-href\",\n                    highlightedElement.getAttribute(\"href\") ?? \"\"\n                );\n            }\n        };\n\n        const editButton = Config.get().editButton;\n        const windowType = Config.get().windowType;\n\n        if (\n            (windowType === ILivePreviewWindowType.PREVIEW ||\n                windowType === ILivePreviewWindowType.INDEPENDENT) &&\n            editButton.enable\n        ) {\n            addCslpOutline(e, updateTooltipPosition);\n        }\n    }\n\n    private scrollHandler() {\n        if (!this.tooltip) return;\n\n        const cslpTag = this.tooltip.getAttribute(\"current-data-cslp\");\n\n        if (cslpTag) {\n            const { content_type_uid, entry_uid, locale, variant, fieldPathWithIndex } =\n                extractDetailsFromCslp(cslpTag);\n\n            if (inIframe()) {\n                livePreviewPostMessage?.send(\"scroll\", {\n                    field: fieldPathWithIndex,\n                    content_type_uid,\n                    entry_uid,\n                    variant,\n                    locale,\n                });\n            } else {\n                try {\n                    // Redirect to Contentstack edit page\n                    const redirectUrl = this.generateRedirectUrl(\n                        content_type_uid,\n                        locale,\n                        entry_uid,\n                        variant,\n                        fieldPathWithIndex\n                    );\n\n                    window.open(redirectUrl, \"_blank\");\n                } catch (error) {\n                    PublicLogger.error(error);\n                }\n            }\n        }\n    }\n\n    /**\n     * Generates the redirect URL for editing a specific entry in the Live Preview SDK.\n     * @param content_type_uid - The UID of the content type.\n     * @param locale - The locale of the entry (default: \"en-us\").\n     * @param entry_uid - The UID of the entry.\n     * @param preview_field - The field to be previewed.\n     * @returns The redirect URL for editing the entry.\n     */\n    private generateRedirectUrl(\n        content_type_uid: string,\n        locale = \"en-us\",\n        entry_uid: string,\n        variant: string | undefined,\n        preview_field: string\n    ): string {\n        const config = Config.get();\n\n        if (!config.stackDetails.apiKey) {\n            throw `To use edit tags, you must provide the stack API key. Specify the API key while initializing the Live Preview SDK.\n\n                ContentstackLivePreview.init({\n                    ...,\n                    stackDetails: {\n                        apiKey: 'your-api-key'\n                    },\n                    ...\n                })`;\n        }\n\n        if (!config.stackDetails.environment) {\n            throw `To use edit tags, you must provide the preview environment. Specify the preview environment while initializing the Live Preview SDK.\n\n                ContentstackLivePreview.init({\n                    ...,\n                    stackDetails: {\n                        environment: 'Your-environment'\n                    },\n                    ...\n                })`;\n        }\n\n        const protocol = String(config.clientUrlParams.protocol);\n        const host = String(config.clientUrlParams.host);\n        const port = String(config.clientUrlParams.port);\n        const environment = String(config.stackDetails.environment);\n        const branch = String(config.stackDetails.branch || \"main\");\n\n        let urlHash = `!/stack/${\n            config.stackDetails.apiKey\n        }/content-type/${content_type_uid}/${\n            locale ?? \"en-us\"\n        }/entry/${entry_uid}`;\n\n        if (variant) {\n            urlHash += `/variant/${variant}/edit`;\n        } else {\n            urlHash += `/edit`;\n        }\n\n        const url = new URL(`${protocol}://${host}`);\n        url.port = port;\n        url.hash = urlHash;\n        if (config.stackDetails.branch) {\n            url.searchParams.append(\"branch\", branch);\n        }\n        url.searchParams.append(\"preview-field\", preview_field);\n        url.searchParams.append(\"preview-locale\", locale ?? \"en-us\");\n        url.searchParams.append(\"preview-environment\", environment);\n\n        return `${url.origin}/${url.hash}${url.search}`;\n    }\n\n    private linkClickHandler() {\n        if (!this.tooltip) return;\n        const hrefAttribute = this.tooltip.getAttribute(\"current-href\");\n\n        if (hrefAttribute) {\n            window.location.assign(hrefAttribute);\n        }\n    }\n\n    /**\n     * Destroys the edit button by removing event listeners and removing the tooltip.\n     */\n    destroy(): void {\n        window.removeEventListener(\"scroll\", this.updateTooltipPosition);\n        window.removeEventListener(\"mouseover\", this.addEditStyleOnHover);\n        this.tooltip?.remove();\n    }\n}\n\neffect(function handleWindowTypeChange() {\n    // we need to specify when to run this effect.\n    // here, we run it when the value of windowType changes\n    if (typeof window === \"undefined\") return;\n    Config.get().windowType;\n    if (LivePreviewEditButton && !isOpeningInTimeline()) {\n        toggleEditButtonElement();\n    }\n});\n"],"mappings":"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","names":[]}

package/dist/{modern/styles/live_preview.cjs → legacy/livePreview/editButton/editButton.style.cjs}

@@ -17,35 +17,26 @@ var __copyProps = (to, from, except, desc) => {
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// src/styles/live_preview.ts
-var live_preview_exports = {};
-__export(live_preview_exports, {
-  livePreviewStyles: () => livePreviewStyles
+// src/livePreview/editButton/editButton.style.ts
+var editButton_style_exports = {};
+__export(editButton_style_exports, {
+  cslpTagStyles: () => cslpTagStyles
 });
-module.exports = __toCommonJS(live_preview_exports);
+module.exports = __toCommonJS(editButton_style_exports);
 var import_goober = require("goober");
-var livePreviewStyles = () => {
+function cslpTagStyles() {
   return {
     "cslp-edit-mode": import_goober.css`
             outline: 1px dashed #6c5ce7 !important;
             position: relative !important;
         `,
     "cslp-tooltip": import_goober.css`
-            background: transparent;
-            height: 35px;
-            width: 72px;
-            position: fixed;
-            z-index: 200 !important;
-            top: -100%;
-            border: 0;
-            display: flex;
-            padding: 0;
-        `,
-    "cslp-tooltip-inner-container": import_goober.css`
             padding: 0;
             display: flex;
             outline: none;
             border: none;
+            z-index: 200 !important;
+            position: fixed;
             margin: 0;
             height: 35px;
             width: 72px;
@@ -60,7 +51,7 @@ var livePreviewStyles = () => {
             align-items: center;
             box-shadow: 0px 8px 20px 0px #2222221a;
             box-sizing: border-box;
-
+            top: -100%;
             & div {
                 display: flex;
                 justify-content: space-around;
@@ -112,9 +103,9 @@ var livePreviewStyles = () => {
             }
         `
   };
-};
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  livePreviewStyles
+  cslpTagStyles
 });
-//# sourceMappingURL=live_preview.cjs.map
+//# sourceMappingURL=editButton.style.cjs.map

package/dist/legacy/livePreview/editButton/editButton.style.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/livePreview/editButton/editButton.style.ts"],"sourcesContent":["import { css } from \"goober\";\n\nexport function cslpTagStyles() {\n    return {\n        \"cslp-edit-mode\": css`\n            outline: 1px dashed #6c5ce7 !important;\n            position: relative !important;\n        `,\n        \"cslp-tooltip\": css`\n            padding: 0;\n            display: flex;\n            outline: none;\n            border: none;\n            z-index: 200 !important;\n            position: fixed;\n            margin: 0;\n            height: 35px;\n            width: 72px;\n            background: white;\n            font-weight: 400 !important;\n            color: #718096 !important;\n            transition: background 0.2s;\n            text-align: center !important;\n            border-radius: 8px !important;\n            font-size: 14px !important;\n            justify-content: space-around;\n            align-items: center;\n            box-shadow: 0px 8px 20px 0px #2222221a;\n            box-sizing: border-box;\n            top: -100%;\n            & div {\n                display: flex;\n                justify-content: space-around;\n                border-radius: 6px !important;\n                cursor: pointer;\n            }\n\n            & div.cslp-tooltip-child:hover {\n                background: #edf2f7;\n            }\n\n            & div.cslp-tooltip-child:active:hover {\n                background: #c7d0e1;\n            }\n\n            & > div {\n                display: flex;\n                justify-content: space-evenly;\n                white-space: nowrap;\n                width: 70px;\n            }\n\n            & .cslp-tooltip-child.singular {\n                padding: 9px 1px;\n            }\n        `,\n        multiple: css`\n            & div.cslp-tooltip-child {\n                padding: 9px;\n            }\n\n            & div.cslp-tooltip-child:before {\n                opacity: 0;\n                font-size: 12px;\n                font-weight: 400;\n                pointer-events: none;\n                content: attr(data-title);\n                color: white;\n                padding: 5px 10px;\n                border-radius: 4px;\n                position: absolute;\n                background: #4a5568;\n                top: -30px;\n                transition: 0.2s all ease-in-out;\n            }\n\n            & div.cslp-tooltip-child:hover:before {\n                opacity: 1;\n            }\n        `,\n    } as const;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAAoB;AAEb,SAAS,gBAAgB;AAC5B,SAAO;AAAA,IACH,kBAAkB;AAAA;AAAA;AAAA;AAAA,IAIlB,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAgDhB,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAwBd;AACJ;","names":[]}

package/dist/legacy/livePreview/editButton/editButton.style.d.cts

@@ -0,0 +1,7 @@
+declare function cslpTagStyles(): {
+    readonly "cslp-edit-mode": string;
+    readonly "cslp-tooltip": string;
+    readonly multiple: string;
+};
+
+export { cslpTagStyles };

package/dist/legacy/livePreview/editButton/editButton.style.d.ts

@@ -0,0 +1,7 @@
+declare function cslpTagStyles(): {
+    readonly "cslp-edit-mode": string;
+    readonly "cslp-tooltip": string;
+    readonly multiple: string;
+};
+
+export { cslpTagStyles };

package/dist/{modern/styles/live_preview.js → legacy/livePreview/editButton/editButton.style.js}

@@ -1,27 +1,20 @@
-// src/styles/live_preview.ts
+import "../../chunk-5WRI5ZAA.js";
+
+// src/livePreview/editButton/editButton.style.ts
 import { css } from "goober";
-var livePreviewStyles = () => {
+function cslpTagStyles() {
   return {
     "cslp-edit-mode": css`
             outline: 1px dashed #6c5ce7 !important;
             position: relative !important;
         `,
     "cslp-tooltip": css`
-            background: transparent;
-            height: 35px;
-            width: 72px;
-            position: fixed;
-            z-index: 200 !important;
-            top: -100%;
-            border: 0;
-            display: flex;
-            padding: 0;
-        `,
-    "cslp-tooltip-inner-container": css`
             padding: 0;
             display: flex;
             outline: none;
             border: none;
+            z-index: 200 !important;
+            position: fixed;
             margin: 0;
             height: 35px;
             width: 72px;
@@ -36,7 +29,7 @@ var livePreviewStyles = () => {
             align-items: center;
             box-shadow: 0px 8px 20px 0px #2222221a;
             box-sizing: border-box;
-
+            top: -100%;
             & div {
                 display: flex;
                 justify-content: space-around;
@@ -88,8 +81,8 @@ var livePreviewStyles = () => {
             }
         `
   };
-};
+}
 export {
-  livePreviewStyles
+  cslpTagStyles
 };
-//# sourceMappingURL=live_preview.js.map
+//# sourceMappingURL=editButton.style.js.map

package/dist/legacy/livePreview/editButton/editButton.style.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/livePreview/editButton/editButton.style.ts"],"sourcesContent":["import { css } from \"goober\";\n\nexport function cslpTagStyles() {\n    return {\n        \"cslp-edit-mode\": css`\n            outline: 1px dashed #6c5ce7 !important;\n            position: relative !important;\n        `,\n        \"cslp-tooltip\": css`\n            padding: 0;\n            display: flex;\n            outline: none;\n            border: none;\n            z-index: 200 !important;\n            position: fixed;\n            margin: 0;\n            height: 35px;\n            width: 72px;\n            background: white;\n            font-weight: 400 !important;\n            color: #718096 !important;\n            transition: background 0.2s;\n            text-align: center !important;\n            border-radius: 8px !important;\n            font-size: 14px !important;\n            justify-content: space-around;\n            align-items: center;\n            box-shadow: 0px 8px 20px 0px #2222221a;\n            box-sizing: border-box;\n            top: -100%;\n            & div {\n                display: flex;\n                justify-content: space-around;\n                border-radius: 6px !important;\n                cursor: pointer;\n            }\n\n            & div.cslp-tooltip-child:hover {\n                background: #edf2f7;\n            }\n\n            & div.cslp-tooltip-child:active:hover {\n                background: #c7d0e1;\n            }\n\n            & > div {\n                display: flex;\n                justify-content: space-evenly;\n                white-space: nowrap;\n                width: 70px;\n            }\n\n            & .cslp-tooltip-child.singular {\n                padding: 9px 1px;\n            }\n        `,\n        multiple: css`\n            & div.cslp-tooltip-child {\n                padding: 9px;\n            }\n\n            & div.cslp-tooltip-child:before {\n                opacity: 0;\n                font-size: 12px;\n                font-weight: 400;\n                pointer-events: none;\n                content: attr(data-title);\n                color: white;\n                padding: 5px 10px;\n                border-radius: 4px;\n                position: absolute;\n                background: #4a5568;\n                top: -30px;\n                transition: 0.2s all ease-in-out;\n            }\n\n            & div.cslp-tooltip-child:hover:before {\n                opacity: 1;\n            }\n        `,\n    } as const;\n}\n"],"mappings":";;;AAAA,SAAS,WAAW;AAEb,SAAS,gBAAgB;AAC5B,SAAO;AAAA,IACH,kBAAkB;AAAA;AAAA;AAAA;AAAA,IAIlB,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAgDhB,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAwBd;AACJ;","names":[]}