@telia-ace/alliance-ui 1.0.14 → 1.0.15-next.0

package/voca/components/telia-toggle.js

@@ -1,143 +1,3 @@
-import { p as o, H as s, c as n, h as i } from "../../chunks/index-eef143db.js";
-import { d as c } from "../../chunks/telia-visually-hidden-9015e8cd.js";
-import { d as g } from "../../chunks/telia-vst2-dfb33a56.js";
-const d = '.telia-toggle{align-items:center;box-sizing:border-box;cursor:pointer;display:flex;justify-content:space-between;outline:none;position:relative}.telia-toggle--disabled{cursor:not-allowed}.telia-toggle button{clip:rect(0 0 0 0);clip-path:circle(0%);height:0;margin:0;padding:calc(1.2rem * var(--voca-rem-multiplier)) 0;position:absolute;width:0;}.telia-toggle button[aria-pressed=true]~.telia-toggle__track .telia-toggle__thumb{transform:translateX(calc(calc(calc(2rem * var(--voca-rem-multiplier)) * 2.1) - calc(calc(2rem * var(--voca-rem-multiplier)) * 1.2) + calc(0.2rem * var(--voca-rem-multiplier))))}.telia-toggle button:focus~.telia-toggle__label::before{border-radius:calc(0.2rem * var(--voca-rem-multiplier));box-shadow:0 0 0 calc(0.3rem * var(--voca-rem-multiplier)) #0099ff;bottom:calc(-1 * calc(0.4rem * var(--voca-rem-multiplier)));content:"";display:block;left:calc(-1 * calc(0.4rem * var(--voca-rem-multiplier)));position:absolute;right:calc(-1 * calc(0.4rem * var(--voca-rem-multiplier)));top:calc(-1 * calc(0.4rem * var(--voca-rem-multiplier)));height:calc(100% + calc(0.8rem * var(--voca-rem-multiplier)));width:calc(100% + calc(0.8rem * var(--voca-rem-multiplier)))}.telia-toggle button:focus:not(:focus-visible)~.telia-toggle__label ::before{box-shadow:none;outline:0}.telia-toggle button:active~.telia-toggle__track .telia-toggle__thumb--on{background-color:#29003e;box-shadow:0 0 0 calc(0.8rem * var(--voca-rem-multiplier)) rgba(222, 153, 255, 0.75)}.telia-toggle button:active~.telia-toggle__track .telia-toggle__thumb--off{background-color:#29003e;box-shadow:0 0 0 calc(0.8rem * var(--voca-rem-multiplier)) rgba(222, 153, 255, 0.75)}@media (hover: hover){.telia-toggle button:not(:disabled)~.telia-toggle__track--on:hover .telia-toggle__thumb--on,.telia-toggle button:not(:disabled)~.telia-toggle__thumb--on:hover{background-color:#29003e;box-shadow:0 0 0 calc(0.8rem * var(--voca-rem-multiplier)) rgba(222, 153, 255, 0.75)}.telia-toggle button:not(:disabled)~.telia-toggle__track--off:hover .telia-toggle__thumb--off,.telia-toggle button:not(:disabled)~.telia-toggle__thumb--off:hover{background-color:#29003e;box-shadow:0 0 0 calc(0.8rem * var(--voca-rem-multiplier)) rgba(222, 153, 255, 0.75)}}.telia-toggle button:active:not(:disabled)~.telia-toggle__track .telia-toggle__thumb--on{height:calc(2rem * var(--voca-rem-multiplier));padding:calc(0.6rem * var(--voca-rem-multiplier)) calc(0.9rem * var(--voca-rem-multiplier));transform:translateX(calc(calc(calc(2rem * var(--voca-rem-multiplier)) * 2.1) - calc(calc(2rem * var(--voca-rem-multiplier)) * 1.2) + calc(0.4rem * var(--voca-rem-multiplier))));transition:all 200ms ease;width:calc(2rem * var(--voca-rem-multiplier))}.telia-toggle button:active:not(:disabled)~.telia-toggle__track .telia-toggle__thumb--off{height:calc(2rem * var(--voca-rem-multiplier));padding:calc(calc(2rem * var(--voca-rem-multiplier)) / 2);transform:translateX(0);transition:all 200ms ease;width:calc(2rem * var(--voca-rem-multiplier))}.telia-toggle button:disabled~.telia-toggle__track--on:before,.telia-toggle button:disabled~.telia-toggle__track--off:before{border:calc(0.1rem * var(--voca-rem-multiplier)) solid #c8c8cd}.telia-toggle button:disabled~.telia-toggle__track--on:before{background-color:#c8c8cd}.telia-toggle button:disabled~.telia-toggle__label{color:rgba(0, 0, 0, 0.4)}.telia-toggle button:disabled~.telia-toggle__track .telia-toggle__thumb--on{background-color:#b0b0b5;border:calc(0.1rem * var(--voca-rem-multiplier)) solid #ffffff;box-shadow:none;padding:calc(0.6rem * var(--voca-rem-multiplier)) calc(1rem * var(--voca-rem-multiplier));}.telia-toggle button:disabled~.telia-toggle__track .telia-toggle__thumb--off{background-color:#c8c8cd;border:calc(0.1rem * var(--voca-rem-multiplier)) solid #ffffff;box-shadow:none;padding:calc(1.1rem * var(--voca-rem-multiplier));}.telia-toggle__track{z-index:1;align-items:center;border:calc(1.2rem * var(--voca-rem-multiplier)) solid transparent;box-sizing:content-box;display:flex;height:calc(2rem * var(--voca-rem-multiplier));position:relative;right:0;transition:all 200ms ease;width:calc(calc(2rem * var(--voca-rem-multiplier)) * 2.1)}.telia-toggle__track::before{border:calc(0.1rem * var(--voca-rem-multiplier)) solid #29003e;border-radius:calc(99.9rem * var(--voca-rem-multiplier));z-index:auto;content:" ";display:block;height:100%;position:absolute;width:100%}.telia-toggle__thumb{border-radius:calc(99.9rem * var(--voca-rem-multiplier));z-index:1;background-clip:padding-box;box-sizing:border-box;height:calc(calc(2rem * var(--voca-rem-multiplier)) * 1.2);padding:calc(0.7rem * var(--voca-rem-multiplier)) calc(1.1rem * var(--voca-rem-multiplier));transform:translateX(-0.2rem);transition:all 200ms ease;width:calc(calc(2rem * var(--voca-rem-multiplier)) * 1.2)}.telia-toggle__thumb--on{background-color:#29003e}.telia-toggle__thumb--on.telia-toggle__thumb--dragging{background-color:#29003e;box-shadow:0 0 0 calc(0.8rem * var(--voca-rem-multiplier)) rgba(222, 153, 255, 0.75)}.telia-toggle__thumb--off{background-color:#8c8c90;padding:calc(calc(calc(2rem * var(--voca-rem-multiplier)) * 1.2) / 2)}.telia-toggle__thumb--off.telia-toggle__thumb--dragging{background-color:#29003e;box-shadow:0 0 0 calc(0.8rem * var(--voca-rem-multiplier)) rgba(222, 153, 255, 0.75)}.telia-toggle__thumb--dragging{height:calc(2rem * var(--voca-rem-multiplier));padding:calc(0.6rem * var(--voca-rem-multiplier)) calc(0.9rem * var(--voca-rem-multiplier));width:calc(2rem * var(--voca-rem-multiplier))}.telia-toggle__thumb-line{background-color:#ffffff;border-radius:calc(0.2rem * var(--voca-rem-multiplier));height:100%;width:100%}.telia-toggle--label-none{display:inline-flex}.telia-toggle--label-none .telia-toggle__track{border-left:0;border-right:0}.telia-toggle--label-before .telia-toggle__track{border-right:0}.telia-toggle--label-after .telia-toggle__track{border-left:0}.telia-toggle__label{font-family:"TeliaSans", Helvetica, Arial, "Lucida Grande", sans-serif;font-weight:normal;font-size:calc(1.6rem * var(--voca-rem-multiplier));line-height:1.5;flex:1 1 0;padding:calc(1.2rem * var(--voca-rem-multiplier)) 0}.telia-toggle__label--none{flex:none;padding:0}', h = /* @__PURE__ */ o(class extends s {
-  constructor() {
-    super(), this.__registerHost(), this.__attachShadow(), this.vocaChange = n(this, "vocaChange", 7), this.disabled = !1, this.labelPosition = "before", this.dataTrackingId = "telia-toggle", this.dragged = !1, this.dragging = !1, this.dragStartX = 0, this.dragX = 0, this.eventListeners = {
-      mousemove: this.onDrag.bind(this),
-      touchmove: this.onDrag.bind(this),
-      mouseup: this.endDragEmitChange.bind(this),
-      touchend: this.endDragEmitChange.bind(this)
-    }, this.emitChange = (e) => {
-      this.disabled || (this.internalSelected = !this.internalSelected, this.vocaChange.emit({
-        originalEvent: e,
-        value: this.internalSelected
-      }));
-    };
-  }
-  setInternalSelected(e) {
-    this.internalSelected = e;
-  }
-  componentWillLoad() {
-    this.internalSelected = this.selected, this.remSize = 10, this.trackHeight = 2 * this.remSize, this.thumbMaxDragRange = this.trackHeight * 1.2, this.thumbPressedLineHeight = Math.round(0.83 * this.remSize), this.thumbLineWidth = 0.2 * this.remSize;
-  }
-  addEventListeners() {
-    Object.entries(this.eventListeners).forEach(([e, t]) => {
-      document.addEventListener(e, t);
-    });
-  }
-  removeEventListeners() {
-    Object.entries(this.eventListeners).forEach(([e, t]) => {
-      document.removeEventListener(e, t);
-    });
-  }
-  initDrag(e) {
-    this.stopPrevent(e), this.disabled || (this.addEventListeners(), this.dragging = !0, this.dragStartX = this.getClientX(e), this.dragX = this.getClientX(e));
-  }
-  endDrag(e) {
-    e && this.stopPrevent(e), this.removeEventListeners(), this.dragged = !1, this.dragging = !1, this.dragStartX = 0, this.dragX = 0;
-  }
-  endDragEmitChange(e) {
-    (!this.dragged || this.isDraggedHalfway()) && this.emitChange(e), this.endDrag(e);
-  }
-  onDrag(e) {
-    const t = Math.abs(Math.round(this.dragX - this.dragStartX));
-    this.dragged = t > 0, this.dragX = this.getClientX(e);
-  }
-  getClientX(e) {
-    var t, a, l;
-    return (t = e.clientX) !== null && t !== void 0 ? t : (l = (a = e.touches) === null || a === void 0 ? void 0 : a[0]) === null || l === void 0 ? void 0 : l.clientX;
-  }
-  toggleOnEnter(e) {
-    this.stopPrevent(e), (e.key === "Enter" || e.key === " ") && this.emitChange(e);
-  }
-  onLabelClick(e) {
-    this.stopPrevent(e), e.type === "click" && this.emitChange(e);
-  }
-  stopPrevent(e) {
-    e.cancelable && e.preventDefault(), e.stopPropagation();
-  }
-  getThumbOffset() {
-    const e = Math.round(this.dragX - this.dragStartX), t = this.internalSelected ? this.thumbMaxDragRange : 0, a = e + t;
-    return a > this.thumbMaxDragRange ? this.thumbMaxDragRange : a < 0 ? 0 : a;
-  }
-  isDraggedHalfway() {
-    return this.internalSelected ? this.getThumbOffset() < this.thumbMaxDragRange / 2 : this.getThumbOffset() > this.thumbMaxDragRange / 2;
-  }
-  getValueByState(e, t) {
-    return this.internalSelected ? this.isDraggedHalfway() ? t : e : this.isDraggedHalfway() ? e : t;
-  }
-  calculateThumbPadding() {
-    const e = this.thumbMaxDragRange / 2, t = Math.abs((this.getThumbOffset() - e) / e), l = `${`${(this.trackHeight - this.thumbPressedLineHeight * t) / 2}px`} ${(this.trackHeight - this.thumbLineWidth) / 2}px`, r = `${this.trackHeight / 2}px`;
-    return this.getValueByState(l, r);
-  }
-  getThumbStyle() {
-    const e = this.dragged ? "grabbing" : "inherit", t = this.calculateThumbPadding(), a = `translateX(${this.getThumbOffset()}px)`, l = `all 200ms ease${this.dragged ? ", transform 0ms, padding 0ms" : ""}`;
-    return this.dragging ? { cursor: e, padding: t, transform: a, transition: l } : {};
-  }
-  getThumbClass() {
-    const e = "telia-toggle__thumb", t = this.getValueByState(`${e}--on`, `${e}--off`), a = this.dragging ? ` ${e}--dragging` : "";
-    return `${e} ${t}${a}`;
-  }
-  getTrackClass() {
-    const e = "telia-toggle__track", t = this.getValueByState(`${e}--on`, `${e}--off`);
-    return `${e} ${t}`;
-  }
-  renderLabel() {
-    const e = this.labelPosition ? ` telia-toggle__label--${this.labelPosition}` : "";
-    return this.label && i("span", { class: `telia-toggle__label${e}`, onMouseUp: (t) => this.endDrag(t), onTouchEnd: (t) => this.endDragEmitChange(t), onClick: (t) => this.onLabelClick(t) }, this.labelPosition !== "none" && this.label);
-  }
-  render() {
-    const e = "telia-toggle", t = {
-      [`${e}`]: !0,
-      [`${e}--label-${this.labelPosition}`]: !0,
-      [`${e}--disabled`]: this.disabled
-    };
-    return i("div", { class: t }, i("button", { "aria-pressed": this.internalSelected ? "true" : "false", disabled: this.disabled, "aria-labelledby": this.labelledby, onKeyUp: (a) => this.toggleOnEnter(a) }, i("telia-visually-hidden", null, this.label)), (this.labelPosition === "before" || this.labelPosition === "none") && this.renderLabel(), i("div", { class: this.getTrackClass(), onMouseUp: (a) => this.endDrag(a), onTouchEnd: (a) => this.endDragEmitChange(a), onClick: (a) => this.onLabelClick(a) }, i("div", { style: this.getThumbStyle(), class: this.getThumbClass(), onMouseDown: (a) => this.initDrag(a), onTouchStart: (a) => this.initDrag(a), onMouseUp: (a) => this.endDragEmitChange(a), onTouchEnd: (a) => this.endDragEmitChange(a), onClick: (a) => this.stopPrevent(a) }, i("div", { class: "telia-toggle__thumb-line" })), i("telia-vst", { dataTrackingId: this.dataTrackingId })), this.labelPosition === "after" && this.renderLabel());
-  }
-  static get watchers() {
-    return {
-      selected: ["setInternalSelected"]
-    };
-  }
-  static get style() {
-    return d;
-  }
-}, [1, "telia-toggle", {
-  dataTestid: [1, "data-testid"],
-  selected: [4],
-  disabled: [4],
-  label: [1],
-  labelPosition: [1, "label-position"],
-  labelledby: [1],
-  dragged: [32],
-  dragging: [32],
-  dragStartX: [32],
-  dragX: [32],
-  internalSelected: [32],
-  remSize: [32],
-  trackHeight: [32],
-  thumbMaxDragRange: [32],
-  thumbPressedLineHeight: [32],
-  thumbLineWidth: [32],
-  eventListeners: [32]
-}]);
-function m() {
-  if (typeof customElements > "u")
-    return;
-  ["telia-toggle", "telia-visually-hidden", "telia-vst"].forEach((t) => {
-    switch (t) {
-      case "telia-toggle":
-        customElements.get(t) || customElements.define(t, h);
-        break;
-      case "telia-visually-hidden":
-        customElements.get(t) || c();
-        break;
-      case "telia-vst":
-        customElements.get(t) || g();
-        break;
-    }
-  });
-}
-m();
-//# sourceMappingURL=telia-toggle.js.map
+import '@teliads/components/dist/components/telia-toggle';
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=telia-toggle.js.map

package/voca/components/telia-toggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"telia-toggle.js","sources":["../../../../node_modules/.pnpm/@teliads+components@22.1.0/node_modules/@teliads/components/dist/components/telia-toggle.js"],"sourcesContent":["import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';\nimport { d as defineCustomElement$3 } from './telia-visually-hidden2.js';\nimport { d as defineCustomElement$2 } from './telia-vst2.js';\n\nconst teliaToggleCss = \".telia-toggle{align-items:center;box-sizing:border-box;cursor:pointer;display:flex;justify-content:space-between;outline:none;position:relative}.telia-toggle--disabled{cursor:not-allowed}.telia-toggle button{clip:rect(0 0 0 0);clip-path:circle(0%);height:0;margin:0;padding:calc(1.2rem * var(--voca-rem-multiplier)) 0;position:absolute;width:0;}.telia-toggle button[aria-pressed=true]~.telia-toggle__track .telia-toggle__thumb{transform:translateX(calc(calc(calc(2rem * var(--voca-rem-multiplier)) * 2.1) - calc(calc(2rem * var(--voca-rem-multiplier)) * 1.2) + calc(0.2rem * var(--voca-rem-multiplier))))}.telia-toggle button:focus~.telia-toggle__label::before{border-radius:calc(0.2rem * var(--voca-rem-multiplier));box-shadow:0 0 0 calc(0.3rem * var(--voca-rem-multiplier)) #0099ff;bottom:calc(-1 * calc(0.4rem * var(--voca-rem-multiplier)));content:\\\"\\\";display:block;left:calc(-1 * calc(0.4rem * var(--voca-rem-multiplier)));position:absolute;right:calc(-1 * calc(0.4rem * var(--voca-rem-multiplier)));top:calc(-1 * calc(0.4rem * var(--voca-rem-multiplier)));height:calc(100% + calc(0.8rem * var(--voca-rem-multiplier)));width:calc(100% + calc(0.8rem * var(--voca-rem-multiplier)))}.telia-toggle button:focus:not(:focus-visible)~.telia-toggle__label ::before{box-shadow:none;outline:0}.telia-toggle button:active~.telia-toggle__track .telia-toggle__thumb--on{background-color:#29003e;box-shadow:0 0 0 calc(0.8rem * var(--voca-rem-multiplier)) rgba(222, 153, 255, 0.75)}.telia-toggle button:active~.telia-toggle__track .telia-toggle__thumb--off{background-color:#29003e;box-shadow:0 0 0 calc(0.8rem * var(--voca-rem-multiplier)) rgba(222, 153, 255, 0.75)}@media (hover: hover){.telia-toggle button:not(:disabled)~.telia-toggle__track--on:hover .telia-toggle__thumb--on,.telia-toggle button:not(:disabled)~.telia-toggle__thumb--on:hover{background-color:#29003e;box-shadow:0 0 0 calc(0.8rem * var(--voca-rem-multiplier)) rgba(222, 153, 255, 0.75)}.telia-toggle button:not(:disabled)~.telia-toggle__track--off:hover .telia-toggle__thumb--off,.telia-toggle button:not(:disabled)~.telia-toggle__thumb--off:hover{background-color:#29003e;box-shadow:0 0 0 calc(0.8rem * var(--voca-rem-multiplier)) rgba(222, 153, 255, 0.75)}}.telia-toggle button:active:not(:disabled)~.telia-toggle__track .telia-toggle__thumb--on{height:calc(2rem * var(--voca-rem-multiplier));padding:calc(0.6rem * var(--voca-rem-multiplier)) calc(0.9rem * var(--voca-rem-multiplier));transform:translateX(calc(calc(calc(2rem * var(--voca-rem-multiplier)) * 2.1) - calc(calc(2rem * var(--voca-rem-multiplier)) * 1.2) + calc(0.4rem * var(--voca-rem-multiplier))));transition:all 200ms ease;width:calc(2rem * var(--voca-rem-multiplier))}.telia-toggle button:active:not(:disabled)~.telia-toggle__track .telia-toggle__thumb--off{height:calc(2rem * var(--voca-rem-multiplier));padding:calc(calc(2rem * var(--voca-rem-multiplier)) / 2);transform:translateX(0);transition:all 200ms ease;width:calc(2rem * var(--voca-rem-multiplier))}.telia-toggle button:disabled~.telia-toggle__track--on:before,.telia-toggle button:disabled~.telia-toggle__track--off:before{border:calc(0.1rem * var(--voca-rem-multiplier)) solid #c8c8cd}.telia-toggle button:disabled~.telia-toggle__track--on:before{background-color:#c8c8cd}.telia-toggle button:disabled~.telia-toggle__label{color:rgba(0, 0, 0, 0.4)}.telia-toggle button:disabled~.telia-toggle__track .telia-toggle__thumb--on{background-color:#b0b0b5;border:calc(0.1rem * var(--voca-rem-multiplier)) solid #ffffff;box-shadow:none;padding:calc(0.6rem * var(--voca-rem-multiplier)) calc(1rem * var(--voca-rem-multiplier));}.telia-toggle button:disabled~.telia-toggle__track .telia-toggle__thumb--off{background-color:#c8c8cd;border:calc(0.1rem * var(--voca-rem-multiplier)) solid #ffffff;box-shadow:none;padding:calc(1.1rem * var(--voca-rem-multiplier));}.telia-toggle__track{z-index:1;align-items:center;border:calc(1.2rem * var(--voca-rem-multiplier)) solid transparent;box-sizing:content-box;display:flex;height:calc(2rem * var(--voca-rem-multiplier));position:relative;right:0;transition:all 200ms ease;width:calc(calc(2rem * var(--voca-rem-multiplier)) * 2.1)}.telia-toggle__track::before{border:calc(0.1rem * var(--voca-rem-multiplier)) solid #29003e;border-radius:calc(99.9rem * var(--voca-rem-multiplier));z-index:auto;content:\\\" \\\";display:block;height:100%;position:absolute;width:100%}.telia-toggle__thumb{border-radius:calc(99.9rem * var(--voca-rem-multiplier));z-index:1;background-clip:padding-box;box-sizing:border-box;height:calc(calc(2rem * var(--voca-rem-multiplier)) * 1.2);padding:calc(0.7rem * var(--voca-rem-multiplier)) calc(1.1rem * var(--voca-rem-multiplier));transform:translateX(-0.2rem);transition:all 200ms ease;width:calc(calc(2rem * var(--voca-rem-multiplier)) * 1.2)}.telia-toggle__thumb--on{background-color:#29003e}.telia-toggle__thumb--on.telia-toggle__thumb--dragging{background-color:#29003e;box-shadow:0 0 0 calc(0.8rem * var(--voca-rem-multiplier)) rgba(222, 153, 255, 0.75)}.telia-toggle__thumb--off{background-color:#8c8c90;padding:calc(calc(calc(2rem * var(--voca-rem-multiplier)) * 1.2) / 2)}.telia-toggle__thumb--off.telia-toggle__thumb--dragging{background-color:#29003e;box-shadow:0 0 0 calc(0.8rem * var(--voca-rem-multiplier)) rgba(222, 153, 255, 0.75)}.telia-toggle__thumb--dragging{height:calc(2rem * var(--voca-rem-multiplier));padding:calc(0.6rem * var(--voca-rem-multiplier)) calc(0.9rem * var(--voca-rem-multiplier));width:calc(2rem * var(--voca-rem-multiplier))}.telia-toggle__thumb-line{background-color:#ffffff;border-radius:calc(0.2rem * var(--voca-rem-multiplier));height:100%;width:100%}.telia-toggle--label-none{display:inline-flex}.telia-toggle--label-none .telia-toggle__track{border-left:0;border-right:0}.telia-toggle--label-before .telia-toggle__track{border-right:0}.telia-toggle--label-after .telia-toggle__track{border-left:0}.telia-toggle__label{font-family:\\\"TeliaSans\\\", Helvetica, Arial, \\\"Lucida Grande\\\", sans-serif;font-weight:normal;font-size:calc(1.6rem * var(--voca-rem-multiplier));line-height:1.5;flex:1 1 0;padding:calc(1.2rem * var(--voca-rem-multiplier)) 0}.telia-toggle__label--none{flex:none;padding:0}\";\n\nconst TeliaToggle$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {\n  constructor() {\n    super();\n    this.__registerHost();\n    this.__attachShadow();\n    this.vocaChange = createEvent(this, \"vocaChange\", 7);\n    /** When set, the toggle button is disabled and the change event won't be emitted */\n    this.disabled = false;\n    /** The position of the label. When set to neither after nor before, the label will be hidden but still set as aria-label for the button element */\n    this.labelPosition = 'before';\n    /** Tracking id is used to identify and count Component usage */\n    this.dataTrackingId = 'telia-toggle';\n    this.dragged = false;\n    this.dragging = false;\n    this.dragStartX = 0;\n    this.dragX = 0;\n    this.eventListeners = {\n      mousemove: this.onDrag.bind(this),\n      touchmove: this.onDrag.bind(this),\n      mouseup: this.endDragEmitChange.bind(this),\n      touchend: this.endDragEmitChange.bind(this),\n    };\n    this.emitChange = event => {\n      if (this.disabled)\n        return;\n      this.internalSelected = !this.internalSelected;\n      this.vocaChange.emit({\n        originalEvent: event,\n        value: this.internalSelected,\n      });\n    };\n  }\n  setInternalSelected(newValue) {\n    this.internalSelected = newValue;\n  }\n  componentWillLoad() {\n    this.internalSelected = this.selected;\n    this.remSize = 10;\n    this.trackHeight = 2 * this.remSize;\n    this.thumbMaxDragRange = this.trackHeight * 1.2;\n    this.thumbPressedLineHeight = Math.round(0.83 * this.remSize);\n    this.thumbLineWidth = 0.2 * this.remSize;\n  }\n  addEventListeners() {\n    Object.entries(this.eventListeners).forEach(([eventName, listener]) => {\n      document.addEventListener(eventName, listener);\n    });\n  }\n  removeEventListeners() {\n    Object.entries(this.eventListeners).forEach(([eventName, listener]) => {\n      document.removeEventListener(eventName, listener);\n    });\n  }\n  initDrag(event) {\n    this.stopPrevent(event);\n    if (!this.disabled) {\n      this.addEventListeners();\n      this.dragging = true;\n      this.dragStartX = this.getClientX(event);\n      this.dragX = this.getClientX(event);\n    }\n  }\n  endDrag(event) {\n    event && this.stopPrevent(event);\n    this.removeEventListeners();\n    this.dragged = false;\n    this.dragging = false;\n    this.dragStartX = 0;\n    this.dragX = 0;\n  }\n  endDragEmitChange(event) {\n    if (!this.dragged || this.isDraggedHalfway()) {\n      this.emitChange(event);\n    }\n    this.endDrag(event);\n  }\n  onDrag(event) {\n    const draggedRange = Math.abs(Math.round(this.dragX - this.dragStartX));\n    this.dragged = draggedRange > 0;\n    this.dragX = this.getClientX(event);\n  }\n  getClientX(event) {\n    var _a, _b, _c;\n    return (_a = event.clientX) !== null && _a !== void 0 ? _a : (_c = (_b = event.touches) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.clientX;\n  }\n  toggleOnEnter(event) {\n    this.stopPrevent(event);\n    if (event.key === 'Enter' || event.key === ' ') {\n      this.emitChange(event);\n    }\n  }\n  onLabelClick(event) {\n    this.stopPrevent(event);\n    if (event.type === 'click') {\n      this.emitChange(event);\n    }\n  }\n  stopPrevent(event) {\n    event.cancelable && event.preventDefault();\n    event.stopPropagation();\n  }\n  getThumbOffset() {\n    const diff = Math.round(this.dragX - this.dragStartX);\n    const stateOffset = this.internalSelected ? this.thumbMaxDragRange : 0;\n    const offset = diff + stateOffset;\n    if (offset > this.thumbMaxDragRange) {\n      return this.thumbMaxDragRange;\n    }\n    else if (offset < 0) {\n      return 0;\n    }\n    else {\n      return offset;\n    }\n  }\n  isDraggedHalfway() {\n    return this.internalSelected\n      ? this.getThumbOffset() < this.thumbMaxDragRange / 2\n      : this.getThumbOffset() > this.thumbMaxDragRange / 2;\n  }\n  getValueByState(onValue, offValue) {\n    if (this.internalSelected) {\n      return this.isDraggedHalfway() ? offValue : onValue;\n    }\n    else {\n      return this.isDraggedHalfway() ? onValue : offValue;\n    }\n  }\n  calculateThumbPadding() {\n    const halfDragRange = this.thumbMaxDragRange / 2;\n    const halfwayDraggedPercentage = Math.abs((this.getThumbOffset() - halfDragRange) / halfDragRange);\n    const topBottomPadding = `${(this.trackHeight -\n      this.thumbPressedLineHeight * halfwayDraggedPercentage) /\n      2}px`;\n    const onPadding = `${topBottomPadding} ${(this.trackHeight - this.thumbLineWidth) / 2}px`;\n    const offPadding = `${this.trackHeight / 2}px`;\n    return this.getValueByState(onPadding, offPadding);\n  }\n  getThumbStyle() {\n    const cursor = this.dragged ? 'grabbing' : 'inherit';\n    const padding = this.calculateThumbPadding();\n    const transform = `translateX(${this.getThumbOffset()}px)`;\n    const transition = `all 200ms ease${this.dragged ? ', transform 0ms, padding 0ms' : ''}`;\n    return this.dragging ? { cursor, padding, transform, transition } : {};\n  }\n  getThumbClass() {\n    const thumbBaseClass = 'telia-toggle__thumb';\n    const stateClass = this.getValueByState(`${thumbBaseClass}--on`, `${thumbBaseClass}--off`);\n    const draggingClass = this.dragging ? ` ${thumbBaseClass}--dragging` : '';\n    return `${thumbBaseClass} ${stateClass}${draggingClass}`;\n  }\n  getTrackClass() {\n    const trackBaseClass = 'telia-toggle__track';\n    const stateClass = this.getValueByState(`${trackBaseClass}--on`, `${trackBaseClass}--off`);\n    return `${trackBaseClass} ${stateClass}`;\n  }\n  renderLabel() {\n    const labelPositionClass = this.labelPosition\n      ? ` telia-toggle__label--${this.labelPosition}`\n      : '';\n    return (this.label && (h(\"span\", { class: `telia-toggle__label${labelPositionClass}`, onMouseUp: e => this.endDrag(e), onTouchEnd: e => this.endDragEmitChange(e), onClick: e => this.onLabelClick(e) }, this.labelPosition !== 'none' && this.label)));\n  }\n  render() {\n    const componentClass = 'telia-toggle';\n    const wrapperClasses = {\n      [`${componentClass}`]: true,\n      [`${componentClass}--label-${this.labelPosition}`]: true,\n      [`${componentClass}--disabled`]: this.disabled,\n    };\n    return (h(\"div\", { class: wrapperClasses }, h(\"button\", { \"aria-pressed\": this.internalSelected ? 'true' : 'false', disabled: this.disabled, \"aria-labelledby\": this.labelledby, onKeyUp: e => this.toggleOnEnter(e) }, h(\"telia-visually-hidden\", null, this.label)), (this.labelPosition === 'before' || this.labelPosition === 'none') &&\n      this.renderLabel(), h(\"div\", { class: this.getTrackClass(), onMouseUp: e => this.endDrag(e), onTouchEnd: e => this.endDragEmitChange(e), onClick: e => this.onLabelClick(e) }, h(\"div\", { style: this.getThumbStyle(), class: this.getThumbClass(), onMouseDown: e => this.initDrag(e), onTouchStart: e => this.initDrag(e), onMouseUp: e => this.endDragEmitChange(e), onTouchEnd: e => this.endDragEmitChange(e), onClick: e => this.stopPrevent(e) }, h(\"div\", { class: \"telia-toggle__thumb-line\" })), h(\"telia-vst\", { dataTrackingId: this.dataTrackingId })), this.labelPosition === 'after' && this.renderLabel()));\n  }\n  static get watchers() { return {\n    \"selected\": [\"setInternalSelected\"]\n  }; }\n  static get style() { return teliaToggleCss; }\n}, [1, \"telia-toggle\", {\n    \"dataTestid\": [1, \"data-testid\"],\n    \"selected\": [4],\n    \"disabled\": [4],\n    \"label\": [1],\n    \"labelPosition\": [1, \"label-position\"],\n    \"labelledby\": [1],\n    \"dragged\": [32],\n    \"dragging\": [32],\n    \"dragStartX\": [32],\n    \"dragX\": [32],\n    \"internalSelected\": [32],\n    \"remSize\": [32],\n    \"trackHeight\": [32],\n    \"thumbMaxDragRange\": [32],\n    \"thumbPressedLineHeight\": [32],\n    \"thumbLineWidth\": [32],\n    \"eventListeners\": [32]\n  }]);\nfunction defineCustomElement$1() {\n  if (typeof customElements === \"undefined\") {\n    return;\n  }\n  const components = [\"telia-toggle\", \"telia-visually-hidden\", \"telia-vst\"];\n  components.forEach(tagName => { switch (tagName) {\n    case \"telia-toggle\":\n      if (!customElements.get(tagName)) {\n        customElements.define(tagName, TeliaToggle$1);\n      }\n      break;\n    case \"telia-visually-hidden\":\n      if (!customElements.get(tagName)) {\n        defineCustomElement$3();\n      }\n      break;\n    case \"telia-vst\":\n      if (!customElements.get(tagName)) {\n        defineCustomElement$2();\n      }\n      break;\n  } });\n}\ndefineCustomElement$1();\n\nconst TeliaToggle = TeliaToggle$1;\nconst defineCustomElement = defineCustomElement$1;\n\nexport { TeliaToggle, defineCustomElement };\n"],"names":["teliaToggleCss","TeliaToggle$1","proxyCustomElement","HTMLElement","createEvent","event","newValue","eventName","listener","draggedRange","_a","_b","_c","diff","stateOffset","offset","onValue","offValue","halfDragRange","halfwayDraggedPercentage","onPadding","offPadding","cursor","padding","transform","transition","thumbBaseClass","stateClass","draggingClass","trackBaseClass","labelPositionClass","h","e","componentClass","wrapperClasses","defineCustomElement$1","tagName","defineCustomElement$3","defineCustomElement$2"],"mappings":"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","x_google_ignoreList":[0]}
+{"version":3,"sources":["../../src/voca/components/telia-toggle.ts"],"names":[],"mappings":";AACA,OAAO","sourcesContent":["// This file is generated - see scripts/map-voca-components.js\nimport '@teliads/components/dist/components/telia-toggle';\n"]}

package/voca/components/telia-visually-hidden.d.ts

@@ -1 +1,2 @@
-import '@teliads/components/dist/components/telia-visually-hidden';
+
+export { }

package/voca/components/telia-visually-hidden.js

@@ -1,4 +1,3 @@
-import "../../chunks/telia-visually-hidden-9015e8cd.js";
-import "../../chunks/index-eef143db.js";
-import "../../chunks/telia-vst2-dfb33a56.js";
-//# sourceMappingURL=telia-visually-hidden.js.map
+import '@teliads/components/dist/components/telia-visually-hidden';
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=telia-visually-hidden.js.map

package/voca/components/telia-visually-hidden.js.map

@@ -1 +1 @@
-{"version":3,"file":"telia-visually-hidden.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}
+{"version":3,"sources":["../../src/voca/components/telia-visually-hidden.ts"],"names":[],"mappings":";AACA,OAAO","sourcesContent":["// This file is generated - see scripts/map-voca-components.js\nimport '@teliads/components/dist/components/telia-visually-hidden';\n"]}

package/voca/foundations/component-library-styling.d.ts

@@ -1 +1,2 @@
-import '@teliads/components/dist/telia-component-library/telia-component-library.css';
+
+export { }

package/voca/foundations/component-library-styling.js

@@ -1,3 +1,3 @@
-import "../../style.css";
-
-//# sourceMappingURL=component-library-styling.js.map
+import '@teliads/components/dist/telia-component-library/telia-component-library.css';
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=component-library-styling.js.map

package/voca/foundations/component-library-styling.js.map

@@ -1 +1 @@
-{"version":3,"file":"component-library-styling.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"sources":["../../src/voca/foundations/component-library-styling.ts"],"names":[],"mappings":";AAAA,OAAO","sourcesContent":["import '@teliads/components/dist/telia-component-library/telia-component-library.css';\n"]}

package/voca/foundations/index.d.ts

@@ -1,4 +1,6 @@
-import { borders, breakpoints, colors, grid, layers, motion, shadows, spacing, typography } from '@teliads/components/foundations';
-import focus from '@teliads/components/foundations/focus/variables.json';
-export { borders, breakpoints, colors, grid, layers, motion, shadows, spacing, typography, focus };
-export declare const addCssVariables: () => void;
+export { borders, breakpoints, colors, grid, layers, motion, shadows, spacing, typography } from '@teliads/components/foundations';
+export { default as focus } from '@teliads/components/foundations/focus/variables.json';
+
+declare const addCssVariables: () => void;
+
+export { addCssVariables };

package/voca/foundations/index.js

@@ -1,146 +1,153 @@
-import { t as p, s as a, a as t, m as r, l as d, b as g, c as s, d as e, g as n } from "../../chunks/index-514c4fef.js";
-import { f as c } from "../../chunks/variables-ecb680f0.js";
-const y = () => {
-  const o = "voca-foundations-style-tag", u = document.getElementById(o), i = document.createElement("style");
-  i.id = o;
-  const l = {
+import { typography, spacing, shadows, motion, layers, borders, breakpoints, colors, grid } from '@teliads/components/foundations';
+export { borders, breakpoints, colors, grid, layers, motion, shadows, spacing, typography } from '@teliads/components/foundations';
+import focus from '@teliads/components/foundations/focus/variables.json';
+export { default as focus } from '@teliads/components/foundations/focus/variables.json';
+
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var addCssVariables = /* @__PURE__ */ __name(() => {
+  const styleId = "voca-foundations-style-tag";
+  const existing = document.getElementById(styleId);
+  const element = document.createElement("style");
+  element.id = styleId;
+  const variables = {
     "--font-telia-heading": "TeliaSansHeading, TeliaSans, HelveticaNeue, Helvetica, Arial, sans-serif",
     "--font-telia-sans": "TeliaSans, Helvetica, Arial, Lucida Grande, sans-serif",
-    "--font-normal": p.weightNormal,
-    "--font-medium": p.weightMedium,
-    "--font-bold": p.weightBold,
-    "--spacing-0": a.spacing0,
-    "--spacing-2": a.spacing2,
-    "--spacing-4": a.spacing4,
-    "--spacing-8": a.spacing8,
-    "--spacing-12": a.spacing12,
-    "--spacing-16": a.spacing16,
-    "--spacing-20": a.spacing20,
-    "--spacing-24": a.spacing24,
-    "--spacing-32": a.spacing32,
-    "--spacing-48": a.spacing48,
-    "--spacing-64": a.spacing64,
-    "--spacing-80": a.spacing80,
-    "--spacing-96": a.spacing96,
-    "--spacing-128": a.spacing128,
-    "--box-shadow-none": t.none,
-    "--box-shadow-sm": t.sm,
-    "--box-shadow-md": t.md,
-    "--box-shadow-lg": t.lg,
-    "--duration-50": r.duration50,
-    "--duration-100": r.duration100,
-    "--duration-150": r.duration150,
-    "--duration-200": r.duration200,
-    "--duration-250": r.duration250,
-    "--duration-300": r.duration300,
-    "--duration-350": r.duration350,
-    "--duration-400": r.duration400,
-    "--duration-500": r.duration500,
-    "--duration-1500": r.duration1500,
-    "--duration-2000": r.duration2000,
-    "--timing-ease-in": r.easeIn,
-    "--timing-ease-out": r.easeOut,
-    "--timing-ease-in-out": r.easeInOut,
-    "--layer-base": d.base,
-    "--layer-dropdown": d.dropdown,
-    "--layer-header": d.header,
-    "--layer-modal": d.modal,
-    "--border-width-none": g.widthNone,
-    "--border-width-xs": g.widthXs,
-    "--border-width-sm": g.widthSm,
-    "--border-width-md": g.widthMd,
-    "--border-radius-none": g.radiusNone,
-    "--border-radius-default": g.radiusDefault,
-    "--border-radius-sm": g.radiusSm,
-    "--border-radius-lg": g.radiusLg,
-    "--border-radius-full": g.radiusFull,
-    "--screen-size-sm": s.breakpointSm,
-    "--screen-size-md": s.breakpointMd,
-    "--screen-size-lg": s.breakpointLg,
-    "--screen-size-xl": s.breakpointXl,
-    "--purple-100": e.purple100,
-    "--purple-200": e.purple200,
-    "--purple-300": e.purple300,
-    "--purple-400": e.purple400,
-    "--purple-500": e.purple500,
-    "--purple-600": e.purple600,
-    "--purple-700": e.purple700,
-    "--purple-800": e.purple800,
-    "--purple-850": e.purple850,
-    "--purple-900": e.purple900,
-    "--beige-50": e.beige50,
-    "--beige-100": e.beige100,
-    "--beige-200": e.beige200,
-    "--beige-300": e.beige300,
-    "--beige-400": e.beige400,
-    "--beige-500": e.beige500,
-    "--beige-600": e.beige600,
-    "--beige-700": e.beige700,
-    "--beige-800": e.beige800,
-    "--beige-900": e.beige900,
-    "--gray-50": e.gray50,
-    "--gray-100": e.gray100,
-    "--gray-200": e.gray200,
-    "--gray-300": e.gray300,
-    "--gray-400": e.gray400,
-    "--gray-500": e.gray500,
-    "--gray-600": e.gray600,
-    "--gray-700": e.gray700,
-    "--gray-800": e.gray800,
-    "--gray-900": e.gray900,
-    "--green-100": e.green100,
-    "--green-200": e.green200,
-    "--green-300": e.green300,
-    "--green-400": e.green400,
-    "--green-500": e.green500,
-    "--green-600": e.green600,
-    "--green-700": e.green700,
-    "--green-800": e.green800,
-    "--green-900": e.green900,
-    "--red-100": e.red100,
-    "--red-200": e.red200,
-    "--red-300": e.red300,
-    "--red-400": e.red400,
-    "--red-500": e.red500,
-    "--red-600": e.red600,
-    "--red-700": e.red700,
-    "--red-800": e.red800,
-    "--red-900": e.red900,
-    "--orange-100": e.orange100,
-    "--orange-200": e.orange200,
-    "--orange-300": e.orange300,
-    "--orange-400": e.orange400,
-    "--orange-500": e.orange500,
-    "--orange-600": e.orange600,
-    "--orange-700": e.orange700,
-    "--orange-800": e.orange800,
-    "--orange-900": e.orange900,
-    "--blue-100": e.blue100,
-    "--blue-200": e.blue200,
-    "--blue-300": e.blue300,
-    "--blue-400": e.blue400,
-    "--blue-500": e.blue500,
-    "--blue-600": e.blue600,
-    "--blue-700": e.blue700,
-    "--blue-800": e.blue800,
-    "--blue-900": e.blue900,
-    "--white": e.white,
-    "--black": e.black,
-    "--functional-black": e.functionalBlack,
+    "--font-normal": typography.weightNormal,
+    "--font-medium": typography.weightMedium,
+    "--font-bold": typography.weightBold,
+    "--spacing-0": spacing.spacing0,
+    "--spacing-2": spacing.spacing2,
+    "--spacing-4": spacing.spacing4,
+    "--spacing-8": spacing.spacing8,
+    "--spacing-12": spacing.spacing12,
+    "--spacing-16": spacing.spacing16,
+    "--spacing-20": spacing.spacing20,
+    "--spacing-24": spacing.spacing24,
+    "--spacing-32": spacing.spacing32,
+    "--spacing-48": spacing.spacing48,
+    "--spacing-64": spacing.spacing64,
+    "--spacing-80": spacing.spacing80,
+    "--spacing-96": spacing.spacing96,
+    "--spacing-128": spacing.spacing128,
+    "--box-shadow-none": shadows.none,
+    "--box-shadow-sm": shadows.sm,
+    "--box-shadow-md": shadows.md,
+    "--box-shadow-lg": shadows.lg,
+    "--duration-50": motion.duration50,
+    "--duration-100": motion.duration100,
+    "--duration-150": motion.duration150,
+    "--duration-200": motion.duration200,
+    "--duration-250": motion.duration250,
+    "--duration-300": motion.duration300,
+    "--duration-350": motion.duration350,
+    "--duration-400": motion.duration400,
+    "--duration-500": motion.duration500,
+    "--duration-1500": motion.duration1500,
+    "--duration-2000": motion.duration2000,
+    "--timing-ease-in": motion.easeIn,
+    "--timing-ease-out": motion.easeOut,
+    "--timing-ease-in-out": motion.easeInOut,
+    "--layer-base": layers.base,
+    "--layer-dropdown": layers.dropdown,
+    "--layer-header": layers.header,
+    "--layer-modal": layers.modal,
+    "--border-width-none": borders.widthNone,
+    "--border-width-xs": borders.widthXs,
+    "--border-width-sm": borders.widthSm,
+    "--border-width-md": borders.widthMd,
+    "--border-radius-none": borders.radiusNone,
+    "--border-radius-default": borders.radiusDefault,
+    "--border-radius-sm": borders.radiusSm,
+    "--border-radius-lg": borders.radiusLg,
+    "--border-radius-full": borders.radiusFull,
+    "--screen-size-sm": breakpoints.breakpointSm,
+    "--screen-size-md": breakpoints.breakpointMd,
+    "--screen-size-lg": breakpoints.breakpointLg,
+    "--screen-size-xl": breakpoints.breakpointXl,
+    "--purple-100": colors.purple100,
+    "--purple-200": colors.purple200,
+    "--purple-300": colors.purple300,
+    "--purple-400": colors.purple400,
+    "--purple-500": colors.purple500,
+    "--purple-600": colors.purple600,
+    "--purple-700": colors.purple700,
+    "--purple-800": colors.purple800,
+    "--purple-850": colors.purple850,
+    "--purple-900": colors.purple900,
+    "--beige-50": colors.beige50,
+    "--beige-100": colors.beige100,
+    "--beige-200": colors.beige200,
+    "--beige-300": colors.beige300,
+    "--beige-400": colors.beige400,
+    "--beige-500": colors.beige500,
+    "--beige-600": colors.beige600,
+    "--beige-700": colors.beige700,
+    "--beige-800": colors.beige800,
+    "--beige-900": colors.beige900,
+    "--gray-50": colors.gray50,
+    "--gray-100": colors.gray100,
+    "--gray-200": colors.gray200,
+    "--gray-300": colors.gray300,
+    "--gray-400": colors.gray400,
+    "--gray-500": colors.gray500,
+    "--gray-600": colors.gray600,
+    "--gray-700": colors.gray700,
+    "--gray-800": colors.gray800,
+    "--gray-900": colors.gray900,
+    "--green-100": colors.green100,
+    "--green-200": colors.green200,
+    "--green-300": colors.green300,
+    "--green-400": colors.green400,
+    "--green-500": colors.green500,
+    "--green-600": colors.green600,
+    "--green-700": colors.green700,
+    "--green-800": colors.green800,
+    "--green-900": colors.green900,
+    "--red-100": colors.red100,
+    "--red-200": colors.red200,
+    "--red-300": colors.red300,
+    "--red-400": colors.red400,
+    "--red-500": colors.red500,
+    "--red-600": colors.red600,
+    "--red-700": colors.red700,
+    "--red-800": colors.red800,
+    "--red-900": colors.red900,
+    "--orange-100": colors.orange100,
+    "--orange-200": colors.orange200,
+    "--orange-300": colors.orange300,
+    "--orange-400": colors.orange400,
+    "--orange-500": colors.orange500,
+    "--orange-600": colors.orange600,
+    "--orange-700": colors.orange700,
+    "--orange-800": colors.orange800,
+    "--orange-900": colors.orange900,
+    "--blue-100": colors.blue100,
+    "--blue-200": colors.blue200,
+    "--blue-300": colors.blue300,
+    "--blue-400": colors.blue400,
+    "--blue-500": colors.blue500,
+    "--blue-600": colors.blue600,
+    "--blue-700": colors.blue700,
+    "--blue-800": colors.blue800,
+    "--blue-900": colors.blue900,
+    "--white": colors.white,
+    "--black": colors.black,
+    "--functional-black": colors.functionalBlack,
     /* DEPRECATED */
-    "--grid-gutter": n.gutter,
-    "--grid-gutter-medium": n.gutterMedium,
-    "--grid-gutter-large": n.gutterLarge,
-    "--grid-page-padding": n.pagePadding,
-    "--grid-page-padding-m": n.pagePaddingM,
-    "--grid-page-padding-l": n.pagePaddingL,
-    "--grid-gutter-sm": n.gutter,
-    "--grid-gutter-md": n.gutterMedium,
-    "--grid-gutter-lg": n.gutterLarge,
-    "--grid-page-padding-sm": n.pagePadding,
-    "--grid-page-padding-md": n.pagePaddingM,
-    "--grid-page-padding-lg": n.pagePaddingL,
-    "--grid-page-padding-xl": n.pagePaddingXl,
+    "--grid-gutter": grid.gutter,
+    "--grid-gutter-medium": grid.gutterMedium,
+    "--grid-gutter-large": grid.gutterLarge,
+    "--grid-page-padding": grid.pagePadding,
+    "--grid-page-padding-m": grid.pagePaddingM,
+    "--grid-page-padding-l": grid.pagePaddingL,
+    "--grid-gutter-sm": grid.gutter,
+    "--grid-gutter-md": grid.gutterMedium,
+    "--grid-gutter-lg": grid.gutterLarge,
+    "--grid-page-padding-sm": grid.pagePadding,
+    "--grid-page-padding-md": grid.pagePaddingM,
+    "--grid-page-padding-lg": grid.pagePaddingL,
+    "--grid-page-padding-xl": grid.pagePaddingXl,
     // The following are not available in JS variables for some reason
     "--functional-transparent": "transparent",
     "--transparent-black-50": "rgba(0, 0, 0, 0.05)",
@@ -165,29 +172,21 @@ const y = () => {
     "--transparent-white-800": "rgba(0, 0, 0, 0.8)",
     "--transparent-white-850": "rgba(0, 0, 0, 0.85)",
     "--transparent-white-900": "rgba(0, 0, 0, 0.9)",
-    "--focus-border": `${c.focusBorderWidth} solid ${c.focusColor}`
-  }, m = Object.keys(l).map((b) => `${b}:${l[b]};`).join("");
-  if (i.innerHTML = `
+    "--focus-border": `${focus.focusBorderWidth} solid ${focus.focusColor}`
+  };
+  const variableString = Object.keys(variables).map((key) => `${key}:${variables[key]};`).join("");
+  element.innerHTML = `
         :root {
-            ${m}
+            ${variableString}
         }
-    `, u) {
-    document.head.replaceChild(i, u);
+    `;
+  if (existing) {
+    document.head.replaceChild(element, existing);
     return;
   }
-  return document.head.append(i);
-};
-export {
-  y as addCssVariables,
-  g as borders,
-  s as breakpoints,
-  e as colors,
-  c as focus,
-  n as grid,
-  d as layers,
-  r as motion,
-  t as shadows,
-  a as spacing,
-  p as typography
-};
-//# sourceMappingURL=index.js.map
+  return document.head.append(element);
+}, "addCssVariables");
+
+export { addCssVariables };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=index.js.map