@zanichelli/albe-web-components 4.0.4 → 4.2.0

package/dist/collection/deprecated/z-tooltip-deprecated/index.js

@@ -0,0 +1,379 @@
+import { Component, Prop, h, Host, Watch, Element, State, Event, } from "@stencil/core";
+import { PopoverPositions } from "../../beans/index";
+const documentElement = document.documentElement;
+/**
+ * Find the closest scrollable parent of a node.
+ *
+ * @param {Element} element The node
+ */
+function findScrollableParent(element) {
+  let parent = element.parentNode;
+  while (parent && parent !== documentElement) {
+    const { overflow, overflowX, overflowY } = window.getComputedStyle(parent);
+    if (overflow === 'hidden' ||
+      overflowY === 'hidden' ||
+      overflowX === 'hidden') {
+      return parent;
+    }
+    if ((parent.scrollHeight > parent.clientHeight && overflow !== 'visible' && overflowY !== 'visible') ||
+      (parent.scrollWidth > parent.clientWidth && overflow !== 'visible' && overflowX !== 'visible')) {
+      return parent;
+    }
+    parent = parent.parentNode;
+  }
+  return documentElement;
+}
+/**
+ * Calculate computed offset.
+ * It includes matrix transformations.
+ * @param element The target element.
+ * @param targetParentOffset The relative offset parent.
+ * @return A client rect object.
+ */
+function computeOffset(element, targetParentOffset) {
+  const rect = element.getBoundingClientRect();
+  const width = rect.width;
+  const height = rect.height;
+  let top = 0;
+  let left = 0;
+  let offsetParent = element;
+  while (offsetParent && offsetParent != targetParentOffset) {
+    left += offsetParent.offsetLeft;
+    // document.body sometimes has offsetTop == 0 but still has an
+    // offset because of children margins!
+    if (offsetParent === document.body) {
+      top += offsetParent.getBoundingClientRect().top + window.scrollY;
+    }
+    else {
+      top += offsetParent.offsetTop;
+    }
+    if (window.DOMMatrix) {
+      const style = window.getComputedStyle(offsetParent);
+      const transform = style.transform || style.webkitTransform;
+      const domMatrix = new DOMMatrix(transform);
+      if (domMatrix) {
+        left += domMatrix.m41;
+        if (offsetParent !== document.body) {
+          top += domMatrix.m42;
+        }
+      }
+    }
+    if (!offsetParent.offsetParent) {
+      break;
+    }
+    offsetParent = offsetParent.offsetParent;
+  }
+  let parentWidth;
+  let parentHeight;
+  if (offsetParent === document.body) {
+    parentWidth = window.innerWidth;
+    parentHeight = window.innerHeight;
+  }
+  else {
+    parentWidth = offsetParent.offsetWidth;
+    parentHeight = offsetParent.offsetHeight;
+  }
+  const right = parentWidth - left - rect.width;
+  const bottom = parentHeight - top - rect.height;
+  return { top, right, bottom, left, width, height };
+}
+export class ZTooltipDeprecated {
+  constructor() {
+    /** Tooltip position. */
+    this.type = PopoverPositions.AUTO;
+    /**
+     * The open state of the tooltip.
+     */
+    this.open = false;
+  }
+  validateType(newValue) {
+    if (newValue &&
+      Object
+        .values(PopoverPositions)
+        .every((position) => newValue !== position)) {
+      this.type = PopoverPositions.AUTO;
+    }
+  }
+  onPositionChange() {
+    this.positionChange.emit({ position: this.position });
+  }
+  disconnectedCallback() {
+    cancelAnimationFrame(this.animationFrameRequestId);
+  }
+  /**
+   * Setup tooltip behaviors on opening.
+   */
+  onOpen() {
+    cancelAnimationFrame(this.animationFrameRequestId);
+    if (this.content) {
+      return;
+    }
+    if (this.open) {
+      const setPosition = () => {
+        if (this.open) {
+          this.setPosition();
+          this.animationFrameRequestId = requestAnimationFrame(setPosition);
+        }
+      };
+      setPosition();
+    }
+    else {
+      const style = this.host.style;
+      style.removeProperty("top");
+      style.removeProperty("right");
+      style.removeProperty("bottom");
+      style.removeProperty("left");
+    }
+  }
+  /**
+   * Set the position of the tooltip.
+   */
+  setPosition() {
+    let element;
+    if (typeof this.bindTo === "string") {
+      element = this.host.ownerDocument.querySelector(this.bindTo);
+    }
+    else if (this.bindTo) {
+      element = this.bindTo;
+    }
+    else {
+      element = this.host.parentElement;
+    }
+    if (!element) {
+      return;
+    }
+    const scrollContainer = findScrollableParent(element);
+    const scrollingBoundingRect = scrollContainer.getBoundingClientRect();
+    const offsetContainer = this.host.offsetParent;
+    const relativeBoundingRect = offsetContainer ? computeOffset(offsetContainer, scrollContainer) : { top: 0, right: 0, bottom: 0, left: 0 };
+    const boundingRect = computeOffset(element, scrollContainer);
+    const top = boundingRect.top - scrollContainer.scrollTop;
+    const bottom = scrollingBoundingRect.height - (boundingRect.top + boundingRect.height) + scrollContainer.scrollTop;
+    const left = boundingRect.left - scrollContainer.scrollLeft;
+    const right = scrollingBoundingRect.width - (boundingRect.left + boundingRect.width) + scrollContainer.scrollLeft;
+    const overflowBottom = Math.max(0, scrollingBoundingRect.top + scrollingBoundingRect.height - window.innerHeight);
+    const overflowRight = Math.max(0, scrollingBoundingRect.left + scrollingBoundingRect.width - window.innerWidth);
+    const availableTop = Math.min(top, top + scrollingBoundingRect.top);
+    const availableBottom = Math.min(bottom, bottom - overflowBottom);
+    const availableLeft = Math.min(left, left + scrollingBoundingRect.left);
+    const availableRight = Math.min(right, right - overflowRight);
+    const availableHeight = availableTop + availableBottom + boundingRect.height;
+    const availableWidth = availableLeft + availableRight + boundingRect.width;
+    let position = this.type;
+    if (position === PopoverPositions.AUTO) {
+      /**
+       * The `AUTO` position tries to place the tooltip in the "safest" area,
+       * where there's more space available.
+       */
+      const positions = [];
+      if (availableTop / availableHeight > 0.9) {
+        positions.unshift(PopoverPositions.TOP);
+      }
+      else if (availableTop / availableHeight > 0.6) {
+        positions.push(PopoverPositions.TOP);
+      }
+      else if (availableTop / availableHeight < 0.1) {
+        positions.unshift(PopoverPositions.BOTTOM);
+      }
+      else {
+        positions.push(PopoverPositions.BOTTOM);
+      }
+      if (availableLeft / availableWidth > 0.6) {
+        positions.push(PopoverPositions.LEFT);
+      }
+      else if (availableLeft / availableWidth < 0.4) {
+        positions.push(PopoverPositions.RIGHT);
+      }
+      position = positions.join("_");
+    }
+    const style = this.host.style;
+    if (!this.content) {
+      style.position = "absolute";
+    }
+    const offsetTop = boundingRect.top - relativeBoundingRect.top;
+    const offsetRight = boundingRect.right - relativeBoundingRect.right;
+    const offsetBottom = boundingRect.bottom - relativeBoundingRect.bottom;
+    const offsetLeft = boundingRect.left - relativeBoundingRect.left;
+    if (position === PopoverPositions.TOP ||
+      position === PopoverPositions.TOP_RIGHT ||
+      position === PopoverPositions.TOP_LEFT) {
+      style.top = "auto";
+      style.bottom = `${offsetBottom + boundingRect.height}px`;
+    }
+    if (position === PopoverPositions.BOTTOM ||
+      position === PopoverPositions.BOTTOM_RIGHT ||
+      position === PopoverPositions.BOTTOM_LEFT) {
+      style.top = `${offsetTop + boundingRect.height}px`;
+      style.bottom = "auto";
+    }
+    if (position === PopoverPositions.TOP ||
+      position === PopoverPositions.BOTTOM) {
+      style.left = `${offsetLeft +
+        (boundingRect.width / 2) -
+        (this.host.clientWidth / 2)}px`;
+    }
+    if (position === PopoverPositions.TOP_RIGHT ||
+      position === PopoverPositions.BOTTOM_RIGHT) {
+      style.right = "auto";
+      style.left = `${offsetLeft + boundingRect.width}px`;
+    }
+    if (position === PopoverPositions.TOP_LEFT ||
+      position === PopoverPositions.BOTTOM_LEFT) {
+      style.left = "auto";
+      style.right = `${offsetRight + boundingRect.width}px`;
+    }
+    if (position === PopoverPositions.RIGHT ||
+      position === PopoverPositions.LEFT) {
+      style.top = `${offsetTop +
+        (boundingRect.height / 2) -
+        (this.host.clientHeight / 2)}px`;
+      style.bottom = "auto";
+    }
+    if (position === PopoverPositions.RIGHT) {
+      style.right = "auto";
+      style.left = `${offsetLeft + boundingRect.width}px`;
+    }
+    if (position === PopoverPositions.LEFT) {
+      style.left = "auto";
+      style.right = `${offsetRight + boundingRect.width}px`;
+    }
+    this.position = position;
+  }
+  componentWillLoad() {
+    // Keep backward compatibility
+    if (this.content) {
+      this.open = true;
+    }
+    this.validateType(this.type);
+    this.onOpen();
+  }
+  render() {
+    if (this.content) {
+      return (h(Host, { class: "legacy", position: this.type }, this.content));
+    }
+    return (h(Host, { position: this.position },
+      h("slot", null)));
+  }
+  static get is() { return "z-tooltip-deprecated"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["styles.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["styles.css"]
+  }; }
+  static get properties() { return {
+    "content": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "deprecated",
+            "text": undefined
+          }],
+        "text": "Content text."
+      },
+      "attribute": "content",
+      "reflect": false
+    },
+    "type": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "PopoverPositions",
+        "resolved": "PopoverPositions.AUTO | PopoverPositions.BOTTOM | PopoverPositions.BOTTOM_LEFT | PopoverPositions.BOTTOM_RIGHT | PopoverPositions.LEFT | PopoverPositions.LEFT_BOTTOM | PopoverPositions.LEFT_TOP | PopoverPositions.RIGHT | PopoverPositions.RIGHT_BOTTOM | PopoverPositions.RIGHT_TOP | PopoverPositions.TOP | PopoverPositions.TOP_LEFT | PopoverPositions.TOP_RIGHT",
+        "references": {
+          "PopoverPositions": {
+            "location": "import",
+            "path": "../../beans/index"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Tooltip position."
+      },
+      "attribute": "type",
+      "reflect": false,
+      "defaultValue": "PopoverPositions.AUTO"
+    },
+    "open": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The open state of the tooltip."
+      },
+      "attribute": "open",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "bindTo": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string | HTMLElement",
+        "resolved": "HTMLElement | string",
+        "references": {
+          "HTMLElement": {
+            "location": "global"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "The selector or the element bound with the tooltip."
+      },
+      "attribute": "bind-to",
+      "reflect": false
+    }
+  }; }
+  static get states() { return {
+    "position": {}
+  }; }
+  static get events() { return [{
+      "method": "positionChange",
+      "name": "positionChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Position change event."
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+  static get elementRef() { return "host"; }
+  static get watchers() { return [{
+      "propName": "type",
+      "methodName": "validateType"
+    }, {
+      "propName": "position",
+      "methodName": "onPositionChange"
+    }, {
+      "propName": "open",
+      "methodName": "onOpen"
+    }]; }
+}

package/dist/collection/deprecated/z-tooltip-deprecated/styles.css

@@ -0,0 +1,128 @@
+:host {
+  --z-tooltip-theme--surface: var(--color-surface01);
+  --z-tooltip-theme--text: var(--color-text01);
+  --arrow-size: 6px;
+  --edge-offset: calc(-1 * (var(--arrow-size) + calc(var(--space-unit) * 2)));
+
+  position: relative;
+  display: none;
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-unit);
+  min-width: calc(var(--space-unit) * 8);
+  min-height: calc(var(--space-unit) * 4);
+  color: var(--z-tooltip-theme--text);
+  fill: currentColor;
+  font-family: var(--font-family-sans);
+  text-align: center;
+  border-radius: var(--border-radius-small);
+  background: var(--z-tooltip-theme--surface);
+  filter: drop-shadow(0 4px 8px var(--shadow-color-base));
+  will-change: filter;
+}
+
+:host(.legacy) {
+  display: inline-flex;
+  padding: calc(var(--space-unit) * 2);
+  min-width: auto;
+  min-height: auto;
+  max-width: 200px;
+  font-style: italic;
+  line-height: 16px;
+  letter-spacing: 0.32px;
+  font-size: 12px;
+  border: var(--border-size-small) solid var(--gray200);
+  border-radius: var(--border-radius);
+  filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.08));
+}
+
+:host(.legacy)::before {
+  --arrow-size: 14px;
+}
+
+:host([position])::before {
+  --arrow-edge-offset: calc(100% - var(--arrow-size) - var(--space-unit));
+  --arrow-center-x-offset: calc(50% - calc(var(--arrow-size) / 2));
+  --arrow-center-y-offset: calc(100% - calc(var(--arrow-size) / 2));
+
+  content: '';
+  position: absolute;
+  width: var(--arrow-size);
+  height: var(--arrow-size);
+  background: inherit;
+  transform: rotate(45deg);
+}
+
+:host([open][style*='top:']),
+:host([open][style*='inset:']) {
+  display: inline-flex;
+}
+
+:host([position^='top']) {
+  margin-bottom: var(--space-unit);
+}
+
+:host([position='right']) {
+  margin-left: var(--space-unit);
+}
+
+:host([position='top_right']),
+:host([position='bottom_right']) {
+  margin-left: var(--edge-offset);
+}
+
+:host([position^='bottom']) {
+  margin-top: var(--space-unit);
+}
+
+:host([position='left']) {
+  margin-right: var(--space-unit);
+}
+
+:host([position='top_left']),
+:host([position='bottom_left']) {
+  margin-right: var(--edge-offset);
+}
+
+/* Arrow style */
+
+:host([position^='top'])::before {
+  top: var(--arrow-center-y-offset);
+}
+
+:host([position^='bottom'])::before {
+  bottom: var(--arrow-center-y-offset);
+}
+
+:host([position='top'])::before,
+:host([position='bottom'])::before {
+  left: var(--arrow-center-x-offset);
+}
+
+:host([position='right'])::before,
+:host([position='left'])::before {
+  top: var(--arrow-center-x-offset);
+}
+
+:host([position='right'])::before {
+  right: var(--arrow-center-y-offset);
+}
+
+:host([position='top_right'])::before,
+:host([position='bottom_right'])::before {
+  right: var(--arrow-edge-offset);
+}
+
+:host([position='left'])::before {
+  left: var(--arrow-center-y-offset);
+}
+
+:host([position='top_left'])::before,
+:host([position='bottom_left'])::before {
+  left: var(--arrow-edge-offset);
+}
+
+::slotted(*) {
+  flex: 1 auto;
+  overflow: auto;
+}

package/dist/collection/snowflakes/myz/card/z-myz-card-info/index.js

@@ -1,5 +1,5 @@
 import { Component, Prop, h, Event, State } from "@stencil/core";
-import { TooltipPosition } from "../../../../beans";
+import { PopoverPositions } from "../../../../beans";
 import { handleKeyboardSubmit } from "../../../../utils/utils";
 /**
  * @slot  - content
@@ -90,7 +90,7 @@ export class ZMyzCardInfo {
     if (!this.cardData)
       return;
     const { title, year, author, description } = this.cardData;
-    return (h("z-tooltip", { content: `${title} ${year} ${author} ${description}`, type: TooltipPosition.RIGHT, onClick: () => (this.tooltip = false) }));
+    return (h("z-popover", { position: PopoverPositions.RIGHT, onClick: () => (this.tooltip = false) }, `${title} ${year} ${author} ${description}`));
   }
   setExpirationLicenseMessage(type) {
     if ((type === "online" && this.cardData.onlineLicense.expired) ||

package/dist/collection/snowflakes/myz/card/z-myz-card-info/styles.css

@@ -105,7 +105,7 @@
   font-weight: 600;
 }
 
-:host > div > div.content-wrapper > z-tooltip {
+:host > div > div.content-wrapper > z-popover {
   position: absolute;
   top: 0px;
   left: calc(var(--space-unit) * 4);

package/dist/esm/{index-46ca649a.js → index-c1ce8cab.js}

@@ -57,18 +57,22 @@ var InputStatusEnum;
   InputStatusEnum["error"] = "error";
   InputStatusEnum["warning"] = "warning";
 })(InputStatusEnum || (InputStatusEnum = {}));
-var TooltipPosition;
-(function (TooltipPosition) {
-  TooltipPosition["AUTO"] = "auto";
-  TooltipPosition["TOP"] = "top";
-  TooltipPosition["RIGHT"] = "right";
-  TooltipPosition["BOTTOM"] = "bottom";
-  TooltipPosition["LEFT"] = "left";
-  TooltipPosition["TOP_RIGHT"] = "top_right";
-  TooltipPosition["TOP_LEFT"] = "top_left";
-  TooltipPosition["BOTTOM_RIGHT"] = "bottom_right";
-  TooltipPosition["BOTTOM_LEFT"] = "bottom_left";
-})(TooltipPosition || (TooltipPosition = {}));
+var PopoverPositions;
+(function (PopoverPositions) {
+  PopoverPositions["AUTO"] = "auto";
+  PopoverPositions["TOP"] = "top";
+  PopoverPositions["RIGHT"] = "right";
+  PopoverPositions["BOTTOM"] = "bottom";
+  PopoverPositions["LEFT"] = "left";
+  PopoverPositions["TOP_RIGHT"] = "top_right";
+  PopoverPositions["TOP_LEFT"] = "top_left";
+  PopoverPositions["BOTTOM_RIGHT"] = "bottom_right";
+  PopoverPositions["BOTTOM_LEFT"] = "bottom_left";
+  PopoverPositions["RIGHT_TOP"] = "right_top";
+  PopoverPositions["RIGHT_BOTTOM"] = "right_bottom";
+  PopoverPositions["LEFT_TOP"] = "left_top";
+  PopoverPositions["LEFT_BOTTOM"] = "left_bottom";
+})(PopoverPositions || (PopoverPositions = {}));
 var KeyboardKeyCodeEnum;
 (function (KeyboardKeyCodeEnum) {
   KeyboardKeyCodeEnum[KeyboardKeyCodeEnum["TAB"] = 9] = "TAB";
@@ -104,39 +108,6 @@ var ThemeVariant;
   ThemeVariant["dark"] = "dark";
   ThemeVariant["light"] = "light";
 })(ThemeVariant || (ThemeVariant = {}));
-var PopoverPosition;
-(function (PopoverPosition) {
-  PopoverPosition["after-down"] = "after-down";
-  PopoverPosition["after-center"] = "after-center";
-  PopoverPosition["after-up"] = "after-up";
-  PopoverPosition["below-right"] = "below-right";
-  PopoverPosition["below-center"] = "below-center";
-  PopoverPosition["below-left"] = "below-left";
-  PopoverPosition["before-down"] = "before-down";
-  PopoverPosition["before-center"] = "before-center";
-  PopoverPosition["before-up"] = "before-up";
-  PopoverPosition["above-right"] = "above-right";
-  PopoverPosition["above-center"] = "above-center";
-  PopoverPosition["above-left"] = "above-left";
-})(PopoverPosition || (PopoverPosition = {}));
-var PopoverBorderRadius;
-(function (PopoverBorderRadius) {
-  PopoverBorderRadius["none"] = "none";
-  PopoverBorderRadius["small"] = "small";
-  PopoverBorderRadius["medium"] = "medium";
-})(PopoverBorderRadius || (PopoverBorderRadius = {}));
-var PopoverShadow;
-(function (PopoverShadow) {
-  PopoverShadow["shadow-1"] = "shadow-1";
-  PopoverShadow["shadow-2"] = "shadow-2";
-  PopoverShadow["shadow-3"] = "shadow-3";
-  PopoverShadow["shadow-4"] = "shadow-4";
-  PopoverShadow["shadow-6"] = "shadow-6";
-  PopoverShadow["shadow-8"] = "shadow-8";
-  PopoverShadow["shadow-12"] = "shadow-12";
-  PopoverShadow["shadow-16"] = "shadow-16";
-  PopoverShadow["shadow-24"] = "shadow-24";
-})(PopoverShadow || (PopoverShadow = {}));
 var DividerSize;
 (function (DividerSize) {
   DividerSize["small"] = "small";
@@ -312,4 +283,4 @@ var StatusTagStatus;
   StatusTagStatus["default"] = "default";
 })(StatusTagStatus || (StatusTagStatus = {}));
 
-export { AvatarSize as A, ButtonTypeEnum as B, CardVariants as C, DeviceEnum as D, ExpandableListButtonAlign as E, KeyboardKeys as F, PopoverBorderRadius as G, PopoverShadow as H, InputTypeEnum as I, KeyboardCodeEnum as K, LicenseTypeEnum as L, NavigationTabsOrientations as N, OffCanvasVariantsEnum as O, PopoverPosition as P, StatusTagStatus as S, ThemeVariant as T, ZAriaAlertMode as Z, DividerOrientation as a, ButtonVariantEnum as b, ButtonSizeEnum as c, DividerSize as d, TransitionDirectionEnum as e, KeyboardKeyCodeEnum as f, ZDatePickerMode as g, ZDatePickerPosition as h, ZDatePickerModeValues as i, ZChipType as j, TooltipPosition as k, ZFileUploadTypeEnum as l, PocketStatusEnum as m, InputStatusEnum as n, AlertTypesEnum as o, NavigationTabsSizes as p, ZSectionTitleDividerPositions as q, ZTableRowExpandedType as r, ToastNotificationTransitionsEnum as s, ToastNotificationPositionsEnum as t, LabelPositions as u, ListDividerType as v, ListSize as w, Size as x, SortDirectionEnum as y, ExpandableListStyle as z };
+export { AvatarSize as A, ButtonTypeEnum as B, CardVariants as C, DeviceEnum as D, ExpandableListButtonAlign as E, InputTypeEnum as I, KeyboardCodeEnum as K, LabelPositions as L, NavigationTabsOrientations as N, OffCanvasVariantsEnum as O, PopoverPositions as P, StatusTagStatus as S, ThemeVariant as T, ZDatePickerMode as Z, DividerOrientation as a, DividerSize as b, ZDatePickerPosition as c, ZDatePickerModeValues as d, ZAriaAlertMode as e, ButtonVariantEnum as f, ButtonSizeEnum as g, KeyboardKeyCodeEnum as h, ZChipType as i, ZFileUploadTypeEnum as j, PocketStatusEnum as k, InputStatusEnum as l, AlertTypesEnum as m, LicenseTypeEnum as n, NavigationTabsSizes as o, TransitionDirectionEnum as p, KeyboardKeys as q, ZSectionTitleDividerPositions as r, ZTableRowExpandedType as s, ToastNotificationTransitionsEnum as t, ToastNotificationPositionsEnum as u, ListDividerType as v, ListSize as w, Size as x, SortDirectionEnum as y, ExpandableListStyle as z };

package/dist/esm/index.js

@@ -1,5 +1,5 @@
-import { c as colorFromId } from './utils-5d5963ef.js';
-import './index-46ca649a.js';
+import { c as colorFromId } from './utils-99c70c57.js';
+import './index-c1ce8cab.js';
 import './breakpoints-c386984e.js';
 
 const Utils = {