@tmorrow/cre8-wc 2.3.5 → 2.3.9

package/dist/assets/{text-passage.stories-BnD2hBJy.js → text-passage.stories-NTGzgDSD.js}

@@ -1,4 +1,4 @@
-import{b as l}from"./iframe-DgoqrgRr.js";import{s as a}from"./spread-Cc0YLoqh.js";import"./text-passage-D_pRCxLR.js";import"./heading-TaL9d36K.js";import"./preload-helper-PPVm8Dsz.js";import"./cre8-element-D4jUl3yv.js";import"./_commonjsHelpers-DaWZu8wl.js";const g={title:"cre8 Components/Text Passage",component:"cre8-text-passage",parameters:{status:{type:"inProgress"}},argTypes:{size:{options:["default","small","large"],control:{type:"select"}},inverted:{control:{type:"boolean"}}}},i={render:e=>l`<cre8-text-passage ${a(e)}>
+import{b as l}from"./iframe-DDPT8KPE.js";import{s as a}from"./spread-B6c5bbZ0.js";import"./text-passage-CXhgRa33.js";import"./heading-zzuz3Lhl.js";import"./preload-helper-PPVm8Dsz.js";import"./cre8-element-D6gzFubi.js";import"./_commonjsHelpers-DaWZu8wl.js";const g={title:"cre8 Components/Text Passage",component:"cre8-text-passage",parameters:{status:{type:"inProgress"}},argTypes:{size:{options:["default","small","large"],control:{type:"select"}},inverted:{control:{type:"boolean"}}}},i={render:e=>l`<cre8-text-passage ${a(e)}>
     <p>
       A text passage contains arbitrary text that might come from a CMS. It should live within a container that caps the line length of the text to
       avoid a straining reading experience.

package/dist/assets/{tooltip.stories-DJ8XD6C1.js → tooltip.stories-DmjF7lgI.js}

@@ -1,5 +1,5 @@
-import{a as k,b as c,o as v}from"./iframe-DgoqrgRr.js";import{s as _}from"./spread-Cc0YLoqh.js";import{s as x}from"./story-helpers-BFn_kBYw.js";import"./icon-BmyJ3psE.js";import{C as z,n as a}from"./cre8-element-D4jUl3yv.js";import{e as w}from"./query-BpjciUlk.js";import{n as A}from"./index.browser-BY9c7rfI.js";import{o as C}from"./if-defined-Bh0SnORx.js";import"./preload-helper-PPVm8Dsz.js";import"./_commonjsHelpers-DaWZu8wl.js";import"./base-DVmwUFg0.js";const T=k`.cre8-u-content-knockout-brand {
-  color: var(----cre8-color-content-knockout-brand);
+import{a as k,b as c,o as v}from"./iframe-DDPT8KPE.js";import{s as _}from"./spread-B6c5bbZ0.js";import{s as x}from"./story-helpers-BFn_kBYw.js";import"./icon-CxPUuckL.js";import{C as A,n as a}from"./cre8-element-D6gzFubi.js";import{e as w}from"./query-BpjciUlk.js";import{n as C}from"./index.browser-BY9c7rfI.js";import{o as T}from"./if-defined-D9Db4BBK.js";import"./preload-helper-PPVm8Dsz.js";import"./_commonjsHelpers-DaWZu8wl.js";import"./base-DVmwUFg0.js";const R=k`.cre8-u-content-knockout-brand {
+  color: var(--cre8-color-content-knockout-brand);
 }
 
 .cre8-u-is-hidden {
@@ -72,23 +72,23 @@ import{a as k,b as c,o as v}from"./iframe-DgoqrgRr.js";import{s as _}from"./spre
 }
 
 .cre8-u-margin-sm {
-  margin: size(1) !important;
+  margin: 0.5rem !important;
 }
 
 .cre8-u-margin-md {
-  margin: size(2) !important;
+  margin: 1rem !important;
 }
 
 .cre8-u-margin-lg {
-  margin: size(3) !important;
+  margin: 1.5rem !important;
 }
 
 .cre8-u-margin-xl {
-  margin: size(4) !important;
+  margin: 2rem !important;
 }
 
 .cre8-u-margin-xxl {
-  margin: size(8) !important;
+  margin: 4rem !important;
 }
 
 .cre8-u-margin-top-none {
@@ -96,23 +96,23 @@ import{a as k,b as c,o as v}from"./iframe-DgoqrgRr.js";import{s as _}from"./spre
 }
 
 .cre8-u-margin-top-sm {
-  margin-top: size(1) !important;
+  margin-top: 0.5rem !important;
 }
 
 .cre8-u-margin-top-md {
-  margin-top: size(2) !important;
+  margin-top: 1rem !important;
 }
 
 .cre8-u-margin-top-lg {
-  margin-top: size(3) !important;
+  margin-top: 1.5rem !important;
 }
 
 .cre8-u-margin-top-xl {
-  margin-top: size(4) !important;
+  margin-top: 2rem !important;
 }
 
 .cre8-u-margin-top-xxl {
-  margin-top: size(8) !important;
+  margin-top: 4rem !important;
 }
 
 .cre8-u-margin-right-none {
@@ -120,23 +120,23 @@ import{a as k,b as c,o as v}from"./iframe-DgoqrgRr.js";import{s as _}from"./spre
 }
 
 .cre8-u-margin-right-sm {
-  margin-right: size(1) !important;
+  margin-right: 0.5rem !important;
 }
 
 .cre8-u-margin-right-md {
-  margin-right: size(2) !important;
+  margin-right: 1rem !important;
 }
 
 .cre8-u-margin-right-lg {
-  margin-right: size(3) !important;
+  margin-right: 1.5rem !important;
 }
 
 .cre8-u-margin-right-xl {
-  margin-right: size(4) !important;
+  margin-right: 2rem !important;
 }
 
 .cre8-u-margin-right-xxl {
-  margin-right: size(8) !important;
+  margin-right: 4rem !important;
 }
 
 .cre8-u-margin-bottom-none {
@@ -144,32 +144,32 @@ import{a as k,b as c,o as v}from"./iframe-DgoqrgRr.js";import{s as _}from"./spre
 }
 
 .cre8-u-margin-bottom-sm {
-  margin-bottom: size(1) !important;
+  margin-bottom: 0.5rem !important;
 }
 
 .cre8-u-margin-bottom-md {
-  margin-bottom: size(2) !important;
+  margin-bottom: 1rem !important;
 }
 
 .cre8-u-margin-bottom-lg {
-  margin-bottom: size(3) !important;
+  margin-bottom: 1.5rem !important;
 }
 
 .cre8-u-margin-bottom-xl {
-  margin-bottom: size(4) !important;
+  margin-bottom: 2rem !important;
 }
 
 .cre8-u-margin-bottom-xxl {
-  margin-bottom: size(8) !important;
+  margin-bottom: 4rem !important;
 }
 
 .cre8-u-margin-bottom-xl-xxl {
-  margin-bottom: size(4) !important;
+  margin-bottom: 2rem !important;
 }
 
 @media all and (min-width: 768px) {
   .cre8-u-margin-bottom-xl-xxl {
-    margin-bottom: size(8) !important;
+    margin-bottom: 4rem !important;
   }
 }
 .cre8-u-margin-left-none {
@@ -177,23 +177,23 @@ import{a as k,b as c,o as v}from"./iframe-DgoqrgRr.js";import{s as _}from"./spre
 }
 
 .cre8-u-margin-left-sm {
-  margin-left: size(1) !important;
+  margin-left: 0.5rem !important;
 }
 
 .cre8-u-margin-left-md {
-  margin-left: size(2) !important;
+  margin-left: 1rem !important;
 }
 
 .cre8-u-margin-left-lg {
-  margin-left: size(3) !important;
+  margin-left: 1.5rem !important;
 }
 
 .cre8-u-margin-left-xl {
-  margin-left: size(4) !important;
+  margin-left: 2rem !important;
 }
 
 .cre8-u-margin-left-xxl {
-  margin-left: size(8) !important;
+  margin-left: 4rem !important;
 }
 
 .cre8-u-padding-none {
@@ -201,23 +201,23 @@ import{a as k,b as c,o as v}from"./iframe-DgoqrgRr.js";import{s as _}from"./spre
 }
 
 .cre8-u-padding-sm {
-  padding: size(1) !important;
+  padding: 0.5rem !important;
 }
 
 .cre8-u-padding-md {
-  padding: size(2) !important;
+  padding: 1rem !important;
 }
 
 .cre8-u-padding-lg {
-  padding: size(3) !important;
+  padding: 1.5rem !important;
 }
 
 .cre8-u-padding-xl {
-  padding: size(4) !important;
+  padding: 2rem !important;
 }
 
 .cre8-u-padding-xxl {
-  padding: size(8) !important;
+  padding: 4rem !important;
 }
 
 .cre8-u-padding-top-none {
@@ -225,23 +225,23 @@ import{a as k,b as c,o as v}from"./iframe-DgoqrgRr.js";import{s as _}from"./spre
 }
 
 .cre8-u-padding-top-sm {
-  padding-top: size(1) !important;
+  padding-top: 0.5rem !important;
 }
 
 .cre8-u-padding-top-md {
-  padding-top: size(2) !important;
+  padding-top: 1rem !important;
 }
 
 .cre8-u-padding-top-lg {
-  padding-top: size(3) !important;
+  padding-top: 1.5rem !important;
 }
 
 .cre8-u-padding-top-xl {
-  padding-top: size(4) !important;
+  padding-top: 2rem !important;
 }
 
 .cre8-u-padding-top-xxl {
-  padding-top: size(8) !important;
+  padding-top: 4rem !important;
 }
 
 .cre8-u-padding-right-none {
@@ -249,23 +249,23 @@ import{a as k,b as c,o as v}from"./iframe-DgoqrgRr.js";import{s as _}from"./spre
 }
 
 .cre8-u-padding-right-sm {
-  padding-right: size(1) !important;
+  padding-right: 0.5rem !important;
 }
 
 .cre8-u-padding-right-md {
-  padding-right: size(2) !important;
+  padding-right: 1rem !important;
 }
 
 .cre8-u-padding-right-lg {
-  padding-right: size(3) !important;
+  padding-right: 1.5rem !important;
 }
 
 .cre8-u-padding-right-xl {
-  padding-right: size(4) !important;
+  padding-right: 2rem !important;
 }
 
 .cre8-u-padding-right-xxl {
-  padding-right: size(8) !important;
+  padding-right: 4rem !important;
 }
 
 .cre8-u-padding-bottom-none {
@@ -273,23 +273,23 @@ import{a as k,b as c,o as v}from"./iframe-DgoqrgRr.js";import{s as _}from"./spre
 }
 
 .cre8-u-padding-bottom-sm {
-  padding-bottom: size(1) !important;
+  padding-bottom: 0.5rem !important;
 }
 
 .cre8-u-padding-bottom-md {
-  padding-bottom: size(2) !important;
+  padding-bottom: 1rem !important;
 }
 
 .cre8-u-padding-bottom-lg {
-  padding-bottom: size(3) !important;
+  padding-bottom: 1.5rem !important;
 }
 
 .cre8-u-padding-bottom-xl {
-  padding-bottom: size(4) !important;
+  padding-bottom: 2rem !important;
 }
 
 .cre8-u-padding-bottom-xxl {
-  padding-bottom: size(8) !important;
+  padding-bottom: 4rem !important;
 }
 
 .cre8-u-padding-left-none {
@@ -297,23 +297,23 @@ import{a as k,b as c,o as v}from"./iframe-DgoqrgRr.js";import{s as _}from"./spre
 }
 
 .cre8-u-padding-left-sm {
-  padding-left: size(1) !important;
+  padding-left: 0.5rem !important;
 }
 
 .cre8-u-padding-left-md {
-  padding-left: size(2) !important;
+  padding-left: 1rem !important;
 }
 
 .cre8-u-padding-left-lg {
-  padding-left: size(3) !important;
+  padding-left: 1.5rem !important;
 }
 
 .cre8-u-padding-left-xl {
-  padding-left: size(4) !important;
+  padding-left: 2rem !important;
 }
 
 .cre8-u-padding-left-xxl {
-  padding-left: size(8) !important;
+  padding-left: 4rem !important;
 }
 
 .cre8-u-display-flex {
@@ -329,7 +329,6 @@ body {
   font-size: var(--cre8-typography-body-default-font-size);
   font-weight: var(--cre8-typography-body-default-font-weight);
   line-height: var(--cre8-typography-body-default-line-height);
-  -webkit-text-decoration: var(--cre8-typography-body-default-text-decoration);
   text-decoration: var(--cre8-typography-body-default-text-decoration);
   text-transform: var(--cre8-typography-body-default-text-transform);
   display: flex;
@@ -337,7 +336,7 @@ body {
   padding: 0;
   margin: 0;
   color: var(--cre8-color-content-default);
-  background: var(--background-default);
+  background: var(--cre8-color-bg-default);
 }
 
 @media all and (min-width: 60rem) {
@@ -627,7 +626,7 @@ span.ripple {
   transform: translateX(var(--rtlTranslateX, -50%));
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
+  gap: var(--cre8-spacing-8);
   width: max-content;
   max-width: 17.5rem;
   z-index: 400;
@@ -635,7 +634,7 @@ span.ripple {
   background-color: var(--cre8-color-bg-strong);
   border: var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-strong);
   border-radius: var(--cre8-border-radius-container);
-  padding: 0.5rem;
+  padding: var(--cre8-padding-8);
   /**
    * Active state for tooltip panel
    */
@@ -765,7 +764,7 @@ span.ripple {
  */
 .cre8-c-tooltip__footer {
   display: flex;
-  gap: 1rem;
+  gap: var(--cre8-spacing-16);
   justify-content: flex-end;
   flex-grow: 1;
 }
@@ -786,7 +785,7 @@ svg {
   display: flex;
   height: 1rem;
   width: 1rem;
-}`;var R=Object.defineProperty,o=(p,e,t,r)=>{for(var n=void 0,s=p.length-1,y;s>=0;s--)(y=p[s])&&(n=y(e,t,n)||n);return n&&R(e,t,n),n};const b=class b extends z{constructor(){super(...arguments),this.iconRotateDegree=0,this.removeActive=()=>{this.isActive&&this.toggleActive()}}get isRTL(){return document.dir==="rtl"}updated(){const e=this.shadowRoot.querySelectorAll("slot")[1].assignedNodes().reduce(((t,r)=>`${t}${r.textContent.replace(/\n/g,"").trim()}`),"");document.getElementById(this._uniqueId)&&(document.getElementById(this._uniqueId).textContent=e)}firstUpdated(){if(this.ariaDescribes){this._uniqueId=this._uniqueId||A();const e=new RegExp(`\\b${this._uniqueId}\\b`),t=document.createElement("div");t.setAttribute("role","tooltip"),t.setAttribute("style","position:fixed; left: -1000px; top: -1000px;"),t.id=this._uniqueId;const r=document.getElementById(this.ariaDescribes);r.parentNode.insertBefore(t,r);const n=r?.getAttribute("aria-describedBy");r?.setAttribute("aria-describedby",`${n?`${n.replace(e,"")} `:""}${this._uniqueId}`.trim())}}connectedCallback(){super.connectedCallback(),this.addEventListener("mouseover",this.toggleActive),this.addEventListener("mouseout",this.removeActive)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("mouseover",this.toggleActive),this.removeEventListener("mouseout",this.removeActive)}dynamicPosition(){if(this.isDynamic&&this._Cre8TooltipPanel){const e=document.querySelector("body").getBoundingClientRect(),t=this._Cre8TooltipPanel.getBoundingClientRect(),r=this._Cre8Tooltip.clientHeight+t.height+t.top;t.left<0&&(this.position=this.isRTL?"left":"right"),t.right>=e.width&&(this.position=this.isRTL?"right":"left"),t.top<0&&t.left>0&&t.right<e.width&&(this.position=null),r>=window.innerHeight&&t.bottom>=window.innerHeight&&t.left>=0&&t.right<=e.width&&(this.position="top")}}_handleKeydown(e){this.isActive&&(e.code==="Escape"||e.code==="Tab")&&this.toggleActive(),(e.code==="Enter"||e.code==="Space")&&this.toggleActive()}toggleActive(){this.isActive=!this.isActive,this.isActive?(setTimeout(()=>{this.dynamicPosition()},1),this.dispatchWithLegacyAlias(new CustomEvent("tooltip-open",{detail:{isActive:this.isActive},bubbles:!0,composed:!0}))):this.dispatchWithLegacyAlias(new CustomEvent("tooltip-close",{detail:{isActive:this.isActive},bubbles:!0,composed:!0})),setTimeout(()=>{this.isActive&&this.isDynamic?this.isActiveDynamic=!0:this.isActiveDynamic=!1},2)}render(){const e=this.componentClassNames("cre8-c-tooltip",{"cre8-c-tooltip--top":this.position==="top","cre8-c-tooltip--left":this.position==="left","cre8-c-tooltip--right":this.position==="right","cre8-c-tooltip--knockout":this.knockout,"cre8-is-active":this.isActive,"cre8-is-dynamic":this.isDynamic,"cre8-is-dynamic-active":this.isActiveDynamic});return c`
+}`;var D=Object.defineProperty,i=(p,e,t,r)=>{for(var n=void 0,l=p.length-1,y;l>=0;l--)(y=p[l])&&(n=y(e,t,n)||n);return n&&D(e,t,n),n};const b=class b extends A{constructor(){super(...arguments),this.iconRotateDegree=0,this.removeActive=()=>{this.isActive&&this.toggleActive()}}get isRTL(){return document.dir==="rtl"}updated(){const e=this.shadowRoot.querySelectorAll("slot")[1].assignedNodes().reduce(((t,r)=>`${t}${r.textContent.replace(/\n/g,"").trim()}`),"");document.getElementById(this._uniqueId)&&(document.getElementById(this._uniqueId).textContent=e)}firstUpdated(){if(this.ariaDescribes){this._uniqueId=this._uniqueId||C();const e=new RegExp(`\\b${this._uniqueId}\\b`),t=document.createElement("div");t.setAttribute("role","tooltip"),t.setAttribute("style","position:fixed; left: -1000px; top: -1000px;"),t.id=this._uniqueId;const r=document.getElementById(this.ariaDescribes);r.parentNode.insertBefore(t,r);const n=r?.getAttribute("aria-describedBy");r?.setAttribute("aria-describedby",`${n?`${n.replace(e,"")} `:""}${this._uniqueId}`.trim())}}connectedCallback(){super.connectedCallback(),this.addEventListener("mouseover",this.toggleActive),this.addEventListener("mouseout",this.removeActive)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("mouseover",this.toggleActive),this.removeEventListener("mouseout",this.removeActive)}dynamicPosition(){if(this.isDynamic&&this._Cre8TooltipPanel){const e=document.querySelector("body").getBoundingClientRect(),t=this._Cre8TooltipPanel.getBoundingClientRect(),r=this._Cre8Tooltip.clientHeight+t.height+t.top;t.left<0&&(this.position=this.isRTL?"left":"right"),t.right>=e.width&&(this.position=this.isRTL?"right":"left"),t.top<0&&t.left>0&&t.right<e.width&&(this.position=null),r>=window.innerHeight&&t.bottom>=window.innerHeight&&t.left>=0&&t.right<=e.width&&(this.position="top")}}_handleKeydown(e){this.isActive&&(e.code==="Escape"||e.code==="Tab")&&this.toggleActive(),(e.code==="Enter"||e.code==="Space")&&this.toggleActive()}toggleActive(){this.isActive=!this.isActive,this.isActive?(setTimeout(()=>{this.dynamicPosition()},1),this.dispatchWithLegacyAlias(new CustomEvent("tooltip-open",{detail:{isActive:this.isActive},bubbles:!0,composed:!0}))):this.dispatchWithLegacyAlias(new CustomEvent("tooltip-close",{detail:{isActive:this.isActive},bubbles:!0,composed:!0})),setTimeout(()=>{this.isActive&&this.isDynamic?this.isActiveDynamic=!0:this.isActiveDynamic=!1},2)}render(){const e=this.componentClassNames("cre8-c-tooltip",{"cre8-c-tooltip--top":this.position==="top","cre8-c-tooltip--left":this.position==="left","cre8-c-tooltip--right":this.position==="right","cre8-c-tooltip--knockout":this.knockout,"cre8-is-active":this.isActive,"cre8-is-dynamic":this.isDynamic,"cre8-is-dynamic-active":this.isActiveDynamic});return c`
         <div class="${e}">
             <div 
                 class="cre8-c-tooltip__trigger"
@@ -801,20 +800,20 @@ svg {
             </slot>`:c`<slot name="trigger"></slot>`}
             </div>
             <dialog
-                id=${C(this._uniqueId)}
+                id=${T(this._uniqueId)}
                 aria-labelledby=${this.ariaDescribes}
                 class="cre8-c-tooltip__panel"
                 role="tooltip">
                 <slot></slot>
             </dialog>
         </div>
-      `}};b.styles=[T];let i=b;o([a()],i.prototype,"position");o([a({type:Boolean,reflect:!0})],i.prototype,"knockout");o([a({type:Boolean,reflect:!0})],i.prototype,"isDynamic");o([a({type:Boolean})],i.prototype,"isActiveDynamic");o([a({type:Boolean,reflect:!0})],i.prototype,"isActive");o([a({type:String})],i.prototype,"ariaDescribes");o([a({type:String})],i.prototype,"_uniqueId");o([a()],i.prototype,"svg");o([a({type:Number})],i.prototype,"iconRotateDegree");o([a()],i.prototype,"iconFlipDirection");o([w(".cre8-c-tooltip")],i.prototype,"_Cre8Tooltip");o([w(".cre8-c-tooltip__panel")],i.prototype,"_Cre8TooltipPanel");customElements.get("cre8-tooltip")===void 0&&customElements.define("cre8-tooltip",i);const l=`<svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+      `}};b.styles=[R];let o=b;i([a()],o.prototype,"position");i([a({type:Boolean,reflect:!0})],o.prototype,"knockout");i([a({type:Boolean,reflect:!0})],o.prototype,"isDynamic");i([a({type:Boolean})],o.prototype,"isActiveDynamic");i([a({type:Boolean,reflect:!0})],o.prototype,"isActive");i([a({type:String})],o.prototype,"ariaDescribes");i([a({type:String})],o.prototype,"_uniqueId");i([a()],o.prototype,"svg");i([a({type:Number})],o.prototype,"iconRotateDegree");i([a()],o.prototype,"iconFlipDirection");i([w(".cre8-c-tooltip")],o.prototype,"_Cre8Tooltip");i([w(".cre8-c-tooltip__panel")],o.prototype,"_Cre8TooltipPanel");customElements.get("cre8-tooltip")===void 0&&customElements.define("cre8-tooltip",o);const s=`<svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
 <path d="M8 0C6.41775 0 4.87103 0.469192 3.55544 1.34824C2.23985 2.22729 1.21447 3.47672 0.608967 4.93853C0.00346628 6.40034 -0.15496 8.00887 0.153721 9.56072C0.462403 11.1126 1.22433 12.538 2.34315 13.6569C3.46197 14.7757 4.88743 15.5376 6.43928 15.8463C7.99113 16.155 9.59966 15.9965 11.0615 15.391C12.5233 14.7855 13.7727 13.7602 14.6518 12.4446C15.5308 11.129 16 9.58225 16 8C15.9978 5.87895 15.1542 3.84542 13.6544 2.34562C12.1546 0.845814 10.121 0.00223986 8 0ZM7.69231 3.69231C7.87488 3.69231 8.05334 3.74644 8.20514 3.84787C8.35694 3.9493 8.47526 4.09347 8.54512 4.26214C8.61499 4.43081 8.63327 4.61641 8.59765 4.79547C8.56203 4.97453 8.47412 5.139 8.34502 5.2681C8.21593 5.39719 8.05145 5.48511 7.87239 5.52072C7.69333 5.55634 7.50773 5.53806 7.33906 5.46819C7.17039 5.39833 7.02623 5.28002 6.9248 5.12822C6.82337 4.97642 6.76923 4.79795 6.76923 4.61538C6.76923 4.37057 6.86649 4.13578 7.0396 3.96267C7.21271 3.78956 7.44749 3.69231 7.69231 3.69231ZM8.61539 12.3077C8.28897 12.3077 7.97591 12.178 7.7451 11.9472C7.51429 11.7164 7.38462 11.4033 7.38462 11.0769V8C7.22141 8 7.06488 7.93516 6.94947 7.81976C6.83407 7.70435 6.76923 7.54782 6.76923 7.38461C6.76923 7.2214 6.83407 7.06488 6.94947 6.94947C7.06488 6.83406 7.22141 6.76923 7.38462 6.76923C7.71104 6.76923 8.02409 6.8989 8.2549 7.12971C8.48572 7.36053 8.61539 7.67358 8.61539 8V11.0769C8.7786 11.0769 8.93512 11.1418 9.05053 11.2572C9.16594 11.3726 9.23077 11.5291 9.23077 11.6923C9.23077 11.8555 9.16594 12.012 9.05053 12.1274C8.93512 12.2429 8.7786 12.3077 8.61539 12.3077Z"/>
 </svg>
-`,q={title:"cre8 Components/Tooltip",component:"cre8-tooltip",parameters:{status:{type:"inProgress"},layout:"centered",actions:{handles:["tooltip-open","tooltip-close"]}},render:({linkText:p,linkURL:e,default:t,trigger:r,dynamicPosition:n,...s})=>e!=="/?path=/story/cre8-components-tooltip--position-dynamic"?c`
+`,q={title:"cre8 Components/Tooltip",component:"cre8-tooltip",parameters:{status:{type:"inProgress"},layout:"centered",actions:{handles:["tooltip-open","tooltip-close"]}},render:({linkText:p,linkURL:e,default:t,trigger:r,dynamicPosition:n,...l})=>e!=="/?path=/story/cre8-components-tooltip--position-dynamic"?c`
       <div style="display:flex; flex-direction: row; padding:70px; align-items:center;">
         <a id="whadayacallit-default-link" href="${e}">${p}</a>
-        <cre8-tooltip ${_(s)} ariaDescribes="whadayacallit-default-link">
+        <cre8-tooltip ${_(l)} ariaDescribes="whadayacallit-default-link">
           ${v(x(r,"cre8-icon"))}
           ${v(x(t))}
         </cre8-tooltip>
@@ -822,27 +821,27 @@ svg {
         <div style="padding: 3rem; height: 100vh; width: 100%; display: flex; flex-direction: column; justify-content: space-between; align-items: center; position: relative; overflow: hidden;">
           <a id="whadayacallit-dynamic-link" href="/?path=/story/cre8-components-tooltip--position-dynamic">A URL-ologist</a>
           <div style="display: flex; width: 100%; align-items: center; justify-content: center;">
-            <cre8-tooltip ?isDynamic=${s.isDynamic} position="top" ariaDescribes="whadayacallit-dynamic-link" svg="${l}">
+            <cre8-tooltip ?isDynamic=${l.isDynamic} position="top" ariaDescribes="whadayacallit-dynamic-link" svg="${s}">
               A doctor who fixes websites
             </cre8-tooltip>
           </div>
           <div style="display: flex; width: 100%; align-items: center; justify-content: space-between;">
-            <cre8-tooltip ?isDynamic=${s.isDynamic} position="left" ariaDescribes="whadayacallit-dynamic-link"
-            svg="${l}">
+            <cre8-tooltip ?isDynamic=${l.isDynamic} position="left" ariaDescribes="whadayacallit-dynamic-link"
+            svg="${s}">
               A doctor who fixes name servers
             </cre8-tooltip>
-            <cre8-tooltip ?isDynamic=${s.isDynamic} position="right" ariaDescribes="whadayacallit-dynamic-link"
-            svg="${l}">
+            <cre8-tooltip ?isDynamic=${l.isDynamic} position="right" ariaDescribes="whadayacallit-dynamic-link"
+            svg="${s}">
               A branch of anthropology that studies domain name registrations
             </cre8-tooltip>
           </div>
           <div style="display: flex; width: 100%; align-items: center; justify-content: center;">
-           <cre8-tooltip ?isDynamic=${s.isDynamic} id="bottom-tooltip" ariaDescribes="whadayacallit-dynamic-link" svg="${l}">
+           <cre8-tooltip ?isDynamic=${l.isDynamic} id="bottom-tooltip" ariaDescribes="whadayacallit-dynamic-link" svg="${s}">
               Internet Corporation for Assigned Names and Numbers
             </cre8-tooltip>
           </div>
         </div>
-      `,args:{ariaDescribes:"whadayacallit-default-link"},argTypes:{ariaDescribes:{control:"text"},close:{table:{disable:!0}},isActive:{table:{disable:!0}},isActiveDynamic:{table:{disable:!0}},isDynamic:{control:"boolean"},isRTL:{table:{disable:!0}},knockout:{control:"boolean"},linkText:{table:{disable:!0}},linkURL:{table:{disable:!0}},open:{table:{disable:!0}},position:{options:["default","top","right","left"]},removeActive:{table:{disable:!0}},svg:{control:"text"},iconRotateDegree:{control:"text"},iconFlipDirection:{options:["vertical","horizontal","both"]}}},m={args:{linkText:"Trouble",linkURL:"/?path=/story/cre8-components-tooltip--default",default:"<span>Something <strong>easy</strong> to get into, but hard to get out of reallyreallylongwordthatshouldbreaktomakethetextwindownotoverflow</span>",svg:l}},g={args:{knockout:!0,linkText:"An iWitness",linkURL:"/?path=/story/cre8-components-tooltip--knockout",default:"Someone that saw an iPhone being stolen",svg:l}},h={args:{position:"top",linkText:"A plain bagel",linkURL:"/?path=/story/cre8-components-tooltip--position-top",default:"A bagel that can fly",svg:l}},u={args:{position:"left",linkText:"An undercover cop",linkURL:"/?path=/story/cre8-components-tooltip--position-left",default:"A policeman in bed",svg:l}},f={args:{position:"right",linkText:"An umbrella",linkURL:"/?path=/story/cre8-components-tooltip--position-right",default:"Something that goes up when the rain comes down",svg:l}},d={args:{isDynamic:!0,linkText:"A URL-ologist",linkURL:"/?path=/story/cre8-components-tooltip--position-dynamic"}};d.parameters={layout:"fullscreen"};m.parameters={...m.parameters,docs:{...m.parameters?.docs,source:{originalSource:`{
+      `,args:{ariaDescribes:"whadayacallit-default-link"},argTypes:{ariaDescribes:{control:"text"},close:{table:{disable:!0}},isActive:{table:{disable:!0}},isActiveDynamic:{table:{disable:!0}},isDynamic:{control:"boolean"},isRTL:{table:{disable:!0}},knockout:{control:"boolean"},linkText:{table:{disable:!0}},linkURL:{table:{disable:!0}},open:{table:{disable:!0}},position:{options:["default","top","right","left"]},removeActive:{table:{disable:!0}},svg:{control:"text"},iconRotateDegree:{control:"text"},iconFlipDirection:{options:["vertical","horizontal","both"]}}},m={args:{linkText:"Trouble",linkURL:"/?path=/story/cre8-components-tooltip--default",default:"<span>Something <strong>easy</strong> to get into, but hard to get out of reallyreallylongwordthatshouldbreaktomakethetextwindownotoverflow</span>",svg:s}},g={args:{knockout:!0,linkText:"An iWitness",linkURL:"/?path=/story/cre8-components-tooltip--knockout",default:"Someone that saw an iPhone being stolen",svg:s}},h={args:{position:"top",linkText:"A plain bagel",linkURL:"/?path=/story/cre8-components-tooltip--position-top",default:"A bagel that can fly",svg:s}},u={args:{position:"left",linkText:"An undercover cop",linkURL:"/?path=/story/cre8-components-tooltip--position-left",default:"A policeman in bed",svg:s}},f={args:{position:"right",linkText:"An umbrella",linkURL:"/?path=/story/cre8-components-tooltip--position-right",default:"Something that goes up when the rain comes down",svg:s}},d={args:{isDynamic:!0,linkText:"A URL-ologist",linkURL:"/?path=/story/cre8-components-tooltip--position-dynamic"}};d.parameters={layout:"fullscreen"};m.parameters={...m.parameters,docs:{...m.parameters?.docs,source:{originalSource:`{
   args: {
     linkText: 'Trouble',
     linkURL: '/?path=/story/cre8-components-tooltip--default',