scu-web-components 0.0.97 → 0.0.99

package/dist/chunks/chunk.5II67VMP.js

@@ -0,0 +1,234 @@
+import{a as t}from"./chunk.X4CHYX5J.js";import{a as o,b as r,f as s}from"./chunk.CONKFFEA.js";import{f as a}from"./chunk.PE5ZEEQ2.js";var l=o`
+.card {
+  height: 100%;
+}
+
+.image {
+  background-color: rgba(0, 0, 0, 0);
+  border-radius: 10px 10px 10px 10px;
+  align-self: stretch;
+  display: block;
+  width: 100%;
+  overflow: hidden;
+}
+
+.image-link {
+  width: 100%;
+}
+
+.content {
+  background-color: rgba(0, 0, 0, 0);
+  align-self: stretch;
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: flex-start;
+  align-items: flex-start;
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: var(--scw-spacing-2);
+  padding-bottom: var(--scw-spacing-2);
+  height: 100%;
+}
+.content > *:not(:last-child) {
+  margin-bottom: calc(var(--scw-spacing-1) * 0.5);
+  --margin-bottom: calc( var( --scw-spacing-1 ) * 0.5 );
+}
+.content .super-heading {
+  text-align: LEFT;
+  font: var(--scw-type-text-font);
+  color: var(--scw-color-grey-02);
+  align-self: stretch;
+}
+.content .heading {
+  text-align: LEFT;
+  font: var(--scw-type-text-bold-06-font);
+  color: var(--scw-color-grey-02);
+  align-self: stretch;
+}
+.content .date {
+  text-align: LEFT;
+  font: 400 1rem/1.5rem "Proxima Nova";
+  color: var(--scw-color-grey-02);
+  align-self: stretch;
+}
+.content .tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--scw-spacing-1);
+}
+.content .body {
+  text-align: LEFT;
+  font: var(--scw-type-text-04-font);
+  color: var(--scw-color-grey-03);
+  align-self: stretch;
+  display: block;
+}
+.content .links {
+  background-color: rgba(0, 0, 0, 0);
+  align-self: stretch;
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-start;
+  align-items: center;
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: var(--scw-spacing-1);
+  padding-bottom: 0px;
+}
+.content .links > *:not(:last-child) {
+  margin-right: var(--scw-spacing-1);
+  --margin-right: var( --scw-spacing-1 );
+}
+
+.border {
+  background-color: var(--scw-color-grey-10);
+  border-radius: 8px 8px 8px 8px;
+  border-width: 1px;
+  border-style: solid;
+  border-color: var(--scw-color-grey-08);
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: flex-start;
+  align-items: center;
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+  overflow: hidden;
+}
+.border > *:not(:last-child) {
+  margin-bottom: 0px;
+  --margin-bottom: 0px;
+}
+.border .image {
+  border-radius: 0;
+  overflow: visible;
+}
+.border .content {
+  background-color: rgba(0, 0, 0, 0);
+  align-self: stretch;
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: flex-start;
+  align-items: flex-start;
+  padding-left: var(--scw-spacing-2);
+  padding-right: var(--scw-spacing-2);
+  padding-top: var(--scw-spacing-2);
+  padding-bottom: var(--scw-spacing-2);
+}
+.border .content > *:not(:last-child) {
+  margin-bottom: calc(var(--scw-spacing-1) * 0.5);
+  --margin-bottom: calc( var( --scw-spacing-1 ) * 0.5 );
+}
+.border .content .body {
+  flex: 1 1 auto;
+}
+
+.horizontal {
+  background-color: rgba(0, 0, 0, 0);
+  border-radius: 8px 8px 8px 8px;
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-start;
+  align-items: center;
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+.horizontal > *:not(:last-child) {
+  margin-right: 0px;
+  --margin-right: 0px;
+}
+.horizontal .image-link {
+  width: auto;
+}
+.horizontal .image {
+  background-color: rgba(0, 0, 0, 0);
+  border-radius: 6px 6px 6px 6px;
+  display: inline-block;
+  width: auto;
+  align-self: initial;
+}
+.horizontal .content {
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: flex-start;
+  align-items: flex-start;
+  padding-left: var(--scw-spacing-2);
+  padding-right: 0px;
+  padding-top: var(--scw-spacing-2);
+  padding-bottom: var(--scw-spacing-2);
+  background-color: rgba(0, 0, 0, 0);
+  flex: 1;
+  padding-right: var(--scw-spacing-2);
+}
+.horizontal .content > *:not(:last-child) {
+  margin-bottom: var(--scw-spacing-1);
+  --margin-bottom: var( --scw-spacing-1 );
+}
+.horizontal .border .content {
+  background-color: rgba(0, 0, 0, 0);
+  flex: 1;
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: flex-start;
+  align-items: flex-start;
+  padding-left: var(--scw-spacing-2);
+  padding-right: var(--scw-spacing-2);
+  padding-top: var(--scw-spacing-2);
+  padding-bottom: var(--scw-spacing-2);
+}
+.horizontal .border .content > *:not(:last-child) {
+  margin-bottom: var(--scw-spacing-1);
+  --margin-bottom: var( --scw-spacing-1 );
+}
+
+:host([link-card]) .card .heading:hover {
+  color: var(--scw-theme-color-hover, var(--scw-color-primary));
+}`;var i=class extends s{constructor(){super();this.align="vertical";this.tags=[];this.linkCard=!1;this.element="card"}static get styles(){return[super.styles,l]}renderLink(e,n,d="solid"){return e&&n?t`
+        <scw-link
+          href="${n}"
+          aria-label="${e}"
+          design="${d}">
+        </scw-link>
+      `:t``}renderTags(){return t` ${this.tags.length!==0?t`<div class="tags">
+          ${this.tags.map((e,n)=>t` ${this.tagUrl&&this.tagUrl[n]?t`
+                    <scw-tag
+                      value="${e}"
+                      href="${this.tagUrl[n]}">
+                    </scw-tag>
+                  `:""}`)}
+        </div>`:""}`}render(){return t` <div class="card ${this.border?"border":""} ${this.align}">
+      ${this.linkCard?t` <scw-link
+            class="image-link"
+            aria-label="${this.primaryLabel}"
+            href="${this.primaryLink}"
+            design="plain">
+            <slot
+              class="image"
+              name="image"></slot>
+          </scw-link>`:t`
+            <slot
+              class="image"
+              name="image"></slot>
+          `}
+      <div class="content">
+        ${this.renderTags()}
+        ${this.superHeading?t` <div class="super-heading">${this.superHeading}</div>`:""}
+        ${this.heading?t`
+              ${this.linkCard?t` <scw-link
+                    aria-label="${this.primaryLabel}"
+                    href="${this.primaryLink}"
+                    design="plain">
+                    <div class="heading">${this.heading}</div>
+                  </scw-link>`:t` <div class="heading">${this.heading}</div> `}
+            `:""}
+        ${this.date?t` <div class="date">${this.date}</div>`:""}
+        <slot class="body"></slot>
+        ${this.linkCard?"":t` <div class="links">
+              ${this.renderLink(this.primaryLabel,this.primaryLink)}
+              ${this.renderLink(this.secondaryLabel,this.secondaryLink,"outlined")}
+            </div>`}
+      </div>
+    </div>`}};a([r()],i.prototype,"heading",2),a([r()],i.prototype,"date",2),a([r({type:Boolean,attribute:"show-border"})],i.prototype,"border",2),a([r({type:String,attribute:"align"})],i.prototype,"align",2),a([r({type:String,attribute:"super-heading"})],i.prototype,"superHeading",2),a([r({type:String,attribute:"primary-cta-link"})],i.prototype,"primaryLink",2),a([r({type:String,attribute:"primary-cta-label"})],i.prototype,"primaryLabel",2),a([r({type:String,attribute:"secondary-cta-link"})],i.prototype,"secondaryLink",2),a([r({type:String,attribute:"secondary-cta-label"})],i.prototype,"secondaryLabel",2),a([r({type:Array,attribute:"tag-name"})],i.prototype,"tags",2),a([r({type:Array,attribute:"tag-url"})],i.prototype,"tagUrl",2),a([r({type:Boolean,attribute:"link-card"})],i.prototype,"linkCard",2);export{i as a};

package/dist/chunks/chunk.5UNZSYEF.js

@@ -0,0 +1,64 @@
+import{a,b as o,f as s}from"./chunk.CONKFFEA.js";import{a as i}from"./chunk.G2G2TPJK.js";import{f as r}from"./chunk.PE5ZEEQ2.js";var l=a`
+:host {
+  width: 100%;
+}
+
+scw-link {
+  width: 100%;
+  display: block;
+}
+
+.container {
+  background-color: rgba(0, 0, 0, 0);
+  border-width: 1px;
+  border-style: solid;
+  border-color: var(--scw-color-grey-09);
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-start;
+  align-items: center;
+  padding-left: calc(var(--scw-spacing-1) * 1.5);
+  padding-right: calc(var(--scw-spacing-1) * 1.5);
+  padding-top: calc(var(--scw-spacing-1) * 1.5);
+  padding-bottom: calc(var(--scw-spacing-1) * 1.5);
+  border-bottom: 0;
+  border-left: 0;
+  border-right: 0;
+}
+.container > *:not(:last-child) {
+  margin-right: 0px;
+  --margin-right: 0px;
+}
+.container .label {
+  text-align: LEFT;
+  font: var(--scw-type-text-04-font);
+  color: var(--scw-color-grey-02);
+  flex: 1;
+}
+.container scw-icon {
+  width: 15px;
+  height: 15px;
+}
+
+:host([plain]) .container {
+  background-color: rgba(0, 0, 0, 0);
+  padding-top: 0;
+  padding-bottom: 0;
+  border: 0;
+}
+
+:host scw-link:hover .container {
+  background-color: var(--scw-color-grey-095);
+}`;var n=class extends s{constructor(){super();this.icon=!0;this.href="";this.plain=!1;this.element="mobile-item"}static get styles(){return[super.styles,l]}connectedCallback(){let e=Promise.all([customElements.whenDefined("scw-mobile-nav")]);super.connectedCallback(),this.updateComplete.then(()=>{e.then(()=>{this.menu=this.getElementsByTagName("scw-mobile-nav"),this.requestUpdate()})})}openInnerNav(){if(this.menu&&this.menu.length!=0){let e=this.parentElement,t=this.menu[0];t.navIndex=e.navIndex+1,t.inner=!0,t.ariaLabel=this.ariaLabel,t.toggleOpen()}}hasPopup(){let e=this.nextElementSibling;return!!(e&&e.nodeName.indexOf("scw-mobile-nav")===0)}render(){var t;return i`
+      <scw-link
+        href="${this.href&&((t=this.menu)==null?void 0:t.length)===0?this.href:""}"
+        @click="${this.openInnerNav}"
+        design="plain"
+        aria-label="${this.ariaLabel}">
+        <div class="container">
+          <div class="label">${this.ariaLabel}</div>
+          ${this.menu&&this.menu.length!==0?i`<scw-icon icon="icon-chevron-right"> </scw-icon>`:""}
+        </div>
+      </scw-link>
+      <slot></slot>
+    `}};r([o({type:Boolean,attribute:"icon",reflect:!1})],n.prototype,"icon",2),r([o({type:String,attribute:"href",reflect:!1})],n.prototype,"href",2),r([o({type:Boolean,attribute:"plain",reflect:!1})],n.prototype,"plain",2);export{n as a};

package/dist/chunks/chunk.633HRFGN.js

@@ -0,0 +1,13 @@
+import{a as f}from"./chunk.KILRDKGP.js";import{a as u,b as c,f as d}from"./chunk.CONKFFEA.js";import{a as l}from"./chunk.G2G2TPJK.js";import{f as p}from"./chunk.PE5ZEEQ2.js";var h=u`
+:host {
+  display: block;
+  --gap: initial;
+  --gap-h: var( --scw-spacing-2 );
+  --gap-v: var( --scw-spacing-1 );
+}
+
+:host(.read-only) {
+  --gap-v: var( --scw-spacing-3 );
+}`;function v(a,r,e){r=r||"post";let o=document.createElement("form");o.setAttribute("method",r),o.setAttribute("action",a),o.setAttribute("enctype","multipart/form-data"),o.style.display="none",e.forEach(n=>{var t,s;if(!!(n.name&&n.value))if(((t=n.input)==null?void 0:t.files)&&((s=n.input)==null?void 0:s.files[0]))o.appendChild(n.input);else{let i=document.createElement("input");i.setAttribute("type","hidden"),i.setAttribute("name",n.name),i.setAttribute("value",n.value),o.appendChild(i)}}),document.body.appendChild(o),o.submit()}async function b(a,r,e){return await fetch(a,{method:r||"post",body:e,headers:{Accept:"application/json"}})}var m=class extends d{constructor(){super();this.method="get";this.ajax=!1;this.element="form",this.setAttribute("scw-stack-initial","")}static get styles(){return[super.styles,h]}connectedCallback(){super.connectedCallback(),this.addEventListener("scw-submit-intent",()=>{this.submit()})}findFormElements(){let e=this.querySelectorAll("[form-type]");return Array.from(e)}processData(e){let o=e||this.findFormElements(),n=new FormData;return o.map(t=>{var s,i;t.name&&t.value&&((s=t.input)==null?void 0:s.files)&&((i=t.input)==null?void 0:i.files[0])?n.append(t.name,t.input.files[0]):t.name&&t.value&&n.append(t.name,t.value)}),n}validate(e){let o=e||this.findFormElements(),n=[];return o.map(t=>{t.validate&&(n=[...n,...t.validate()])}),n}findInvalidElements(e){let o=e||this.findFormElements(),n=[];return o.map(t=>{t.invalid&&n.push(t)}),n}async submit(){let e=this.findFormElements(),o=this.validate(e),n=this.processData(e),t=this.findInvalidElements(e),s={validation:o,invalidElements:t,data:Array.from(n.entries()).reduce((i,[y,F])=>(i[y]=F,i),{})};this.action&&t.length===0&&(this.ajax?b(this.action,this.method,n).then(i=>Object.assign(s,{response:i})):v(this.action,this.method,e)),f("scw-submit",this,s)}render(){return l`
+      <slot></slot>
+    `}};p([c({type:String})],m.prototype,"action",2),p([c({type:String})],m.prototype,"method",2),p([c({type:Boolean})],m.prototype,"ajax",2);export{m as a};

package/dist/chunks/chunk.652UZVEU.js

@@ -0,0 +1,211 @@
+import{a as l,b as n,f as s}from"./chunk.CONKFFEA.js";import{a as t}from"./chunk.G2G2TPJK.js";import{f as r}from"./chunk.PE5ZEEQ2.js";var o=l`
+.heading {
+  margin: 0;
+  background-color: rgba(0, 0, 0, 0);
+  align-self: stretch;
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-start;
+  align-items: flex-start;
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: var(--scw-spacing-1);
+}
+.heading > *:not(:last-child) {
+  margin-right: 0px;
+  --margin-right: 0px;
+}
+
+.superHeading {
+  margin: 0;
+  background-color: rgba(0, 0, 0, 0);
+  align-self: stretch;
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-start;
+  align-items: flex-start;
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: var(--scw-spacing-1);
+}
+.superHeading > *:not(:last-child) {
+  margin-right: 0px;
+  --margin-right: 0px;
+}
+
+h1 {
+  text-align: LEFT;
+  font: var(--scw-type-text-extrabold-09-font);
+  color: var(--scw-color-grey-02);
+  flex: 1;
+}
+
+h2 {
+  text-align: LEFT;
+  font: var(--scw-type-text-extrabold-08-font);
+  color: var(--scw-color-grey-02);
+  flex: 1;
+}
+
+h3 {
+  text-align: LEFT;
+  font: var(--scw-type-text-extrabold-07-font);
+  color: var(--scw-color-grey-02);
+  flex: 1;
+}
+
+h4 {
+  text-align: LEFT;
+  font: var(--scw-type-text-extrabold-06-font);
+  color: var(--scw-color-grey-02);
+  flex: 1;
+}
+
+h5 {
+  text-align: LEFT;
+  font: var(--scw-type-text-extrabold-font);
+  color: var(--scw-color-grey-02);
+  flex: 1;
+}
+
+h6 {
+  text-align: LEFT;
+  font: var(--scw-type-text-bold-04-font);
+  color: var(--scw-color-grey-02);
+  flex: 1;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  color: var(--scw-theme-body-color, var(--scw-color-grey-02));
+}
+
+.body {
+  background-color: rgba(0, 0, 0, 0);
+  align-self: stretch;
+}
+.body slot {
+  text-align: LEFT;
+  font: var(--scw-type-text-04-font);
+  color: var(--scw-color-grey-03);
+  flex: 1;
+  color: var(--scw-theme-body-color, var(--scw-color-grey-02));
+}
+
+.default {
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: flex-start;
+  align-items: flex-start;
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+  background-color: rgba(0, 0, 0, 0);
+  align-self: stretch;
+}
+.default > *:not(:last-child) {
+  margin-bottom: 0px;
+  --margin-bottom: 0px;
+}
+.default .links {
+  background-color: rgba(0, 0, 0, 0);
+  align-self: stretch;
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-start;
+  align-items: flex-start;
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+.default .links > *:not(:last-child) {
+  margin-right: calc(var(--scw-spacing-1) * 1.2);
+  --margin-right: calc( var( --scw-spacing-1 ) * 1.2 );
+}
+
+.alignment-center {
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: flex-start;
+  align-items: center;
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+  background-color: rgba(0, 0, 0, 0);
+  align-self: stretch;
+}
+.alignment-center > *:not(:last-child) {
+  margin-bottom: 0px;
+  --margin-bottom: 0px;
+}
+.alignment-center .links {
+  background-color: rgba(0, 0, 0, 0);
+  align-self: stretch;
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: center;
+  align-items: flex-start;
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+.alignment-center .links > *:not(:last-child) {
+  margin-right: calc(var(--scw-spacing-1) * 1.2);
+  --margin-right: calc( var( --scw-spacing-1 ) * 1.2 );
+}
+.alignment-center .body {
+  margin: auto;
+}
+.alignment-center .heading, .alignment-center .superHeading {
+  text-align: center;
+  margin: auto;
+}
+
+@media (max-width: 768px) {
+  h1 {
+    text-align: LEFT;
+    font: var(--scw-type-text-extrabold-08-font);
+    color: var(--scw-color-grey-02);
+    flex: 1;
+  }
+  h2 {
+    text-align: LEFT;
+    font: var(--scw-type-text-extrabold-07-font);
+    color: var(--scw-color-grey-02);
+    flex: 1;
+  }
+  .default .links, .alignment-center .links {
+    flex-direction: column;
+    gap: var(--scw-spacing-1);
+  }
+  .default .links scw-link, .alignment-center .links scw-link {
+    width: 100%;
+  }
+}`;var e=class extends s{constructor(){super();this.headingLevel="h2";this.element="block"}static get styles(){return[super.styles,o]}renderLink(a,i,g="solid"){return a&&i?t`
+        <scw-link
+          href="${i}"
+          aria-label="${a}"
+          design="${g}">
+        </scw-link>
+      `:t``}renderHeading(){if(this.heading)switch(this.headingLevel){case"h2":return t` <h2 class="heading">${this.heading}
+          <slot name="disclosure"></slot></h2>`;case"h3":return t` <h3 class="heading">${this.heading}
+          <slot name="disclosure"></slot></h3>`;case"h4":return t` <h4 class="heading">${this.heading}
+          <slot name="disclosure"></slot></h4>`;case"h5":return t` <h5 class="heading">${this.heading}
+          <slot name="disclosure"></slot></h5>`;case"h6":return t` <h6 class="heading">${this.heading}
+          <slot name="disclosure"></slot></h6>`;default:return t` <h1 class="heading">${this.heading}
+          <slot name="disclosure"></slot></h1>`}return t``}render(){return t`
+      <div class="${this.align==="center"?"alignment-center":"default"}">
+        ${this.superHeading?t` <h6 class="superHeading">${this.superHeading}</h6>`:""}
+        ${this.renderHeading()}
+        <div class="body"><slot></slot></div>
+        <div class="links">
+          ${this.renderLink(this.primaryLabel,this.primaryLink)}
+          ${this.renderLink(this.secondaryLabel,this.secondaryLink,"outlined")}
+        </div>
+      </div>
+    `}};r([n({type:String,attribute:"heading-level",reflect:!1})],e.prototype,"headingLevel",2),r([n({type:String,attribute:"heading",reflect:!0})],e.prototype,"heading",2),r([n({type:String,attribute:"alignment",reflect:!0})],e.prototype,"align",2),r([n({type:String,attribute:"primary-cta-link",reflect:!0})],e.prototype,"primaryLink",2),r([n({type:String,attribute:"primary-cta-label",reflect:!0})],e.prototype,"primaryLabel",2),r([n({type:String,attribute:"secondary-cta-link",reflect:!0})],e.prototype,"secondaryLink",2),r([n({type:String,attribute:"secondary-cta-label",reflect:!0})],e.prototype,"secondaryLabel",2),r([n({type:String,attribute:"super-heading",reflect:!0})],e.prototype,"superHeading",2);export{e as a};

package/dist/chunks/chunk.B6GVGW6X.js

@@ -0,0 +1,159 @@
+import{a as o,b as r,f as c}from"./chunk.CONKFFEA.js";import{a as e}from"./chunk.G2G2TPJK.js";import{f as n}from"./chunk.PE5ZEEQ2.js";var l=o`
+.heading {
+  margin: 0;
+  background-color: rgba(0, 0, 0, 0);
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-start;
+  align-items: flex-start;
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+.heading > *:not(:last-child) {
+  margin-right: 0px;
+  --margin-right: 0px;
+}
+
+.content {
+  background-color: rgba(0, 0, 0, 0);
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: center;
+  align-items: flex-start;
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+.content > *:not(:last-child) {
+  margin-bottom: var(--scw-spacing-1);
+  --margin-bottom: var( --scw-spacing-1 );
+}
+
+h3 {
+  text-align: LEFT;
+  font: var(--scw-type-text-extrabold-07-font);
+  color: var(--scw-color-grey-02);
+  color: var(--scw-theme-color, var(--scw-color-grey-02));
+}
+
+.body {
+  background-color: rgba(0, 0, 0, 0);
+}
+.body slot {
+  text-align: LEFT;
+  font: var(--scw-type-text-04-font);
+  color: var(--scw-color-grey-03);
+  color: var(--scw-theme-body-color, var(--scw-color-grey-02));
+}
+
+.default {
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: center;
+  align-items: flex-start;
+  padding-left: var(--scw-spacing-3);
+  padding-right: var(--scw-spacing-3);
+  padding-top: var(--scw-spacing-3);
+  padding-bottom: var(--scw-spacing-3);
+  background-color: var(--scw-color-primary-092);
+  border-radius: 10px 10px 10px 10px;
+  background-color: var(--scw-theme-color-light, var(--scw-color-primary-092));
+}
+.default > *:not(:last-child) {
+  margin-bottom: 0px;
+  --margin-bottom: 0px;
+}
+.default .links {
+  background-color: rgba(0, 0, 0, 0);
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-start;
+  align-items: center;
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+.default .links > *:not(:last-child) {
+  margin-right: calc(var(--scw-spacing-1) * 1.5);
+  --margin-right: calc( var( --scw-spacing-1 ) * 1.5 );
+}
+
+.alignment-center {
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: center;
+  align-items: center;
+  padding-left: var(--scw-spacing-3);
+  padding-right: var(--scw-spacing-3);
+  padding-top: var(--scw-spacing-3);
+  padding-bottom: var(--scw-spacing-3);
+  background-color: var(--scw-color-primary-092);
+  border-radius: 10px 10px 10px 10px;
+  background-color: var(--scw-theme-color-light, var(--scw-color-primary-092));
+}
+.alignment-center > *:not(:last-child) {
+  margin-bottom: 0px;
+  --margin-bottom: 0px;
+}
+.alignment-center .links {
+  background-color: rgba(0, 0, 0, 0);
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: center;
+  align-items: center;
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+.alignment-center .links > *:not(:last-child) {
+  margin-right: calc(var(--scw-spacing-1) * 1.5);
+  --margin-right: calc( var( --scw-spacing-1 ) * 1.5 );
+}
+.alignment-center .content {
+  background-color: rgba(0, 0, 0, 0);
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: center;
+  align-items: center;
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+.alignment-center .content > *:not(:last-child) {
+  margin-bottom: var(--scw-spacing-1);
+  --margin-bottom: var( --scw-spacing-1 );
+}
+.alignment-center .body {
+  margin: auto;
+}
+.alignment-center .body slot {
+  text-align: center;
+}
+.alignment-center .heading {
+  text-align: center;
+  margin: auto;
+}`;var t=class extends c{constructor(){super();this.element="callout"}static get styles(){return[super.styles,l]}renderLink(i,a,s="solid"){return i&&a?e`
+        <scw-link
+          href="${a}"
+          aria-label="${i}"
+          design="${s}">
+        </scw-link>
+      `:e``}render(){return e`
+      <div class="${this.align==="center"?"alignment-center":"default"}">
+        <div class="content">
+          <h3 class="heading">${this.heading}
+          <slot name="disclosure"></slot></h3>
+          <div class="body"><slot></slot></div>
+          <div class="links">
+            ${this.renderLink(this.primaryLabel,this.primaryLink)}
+            ${this.renderLink(this.secondaryLabel,this.secondaryLink,"outlined")}
+          </div>
+        </div>
+      </div>
+    `}};n([r({type:String,attribute:"heading",reflect:!0})],t.prototype,"heading",2),n([r({type:String,attribute:"alignment",reflect:!0})],t.prototype,"align",2),n([r({type:String,attribute:"primary-cta-link",reflect:!0})],t.prototype,"primaryLink",2),n([r({type:String,attribute:"primary-cta-label",reflect:!0})],t.prototype,"primaryLabel",2),n([r({type:String,attribute:"secondary-cta-link",reflect:!0})],t.prototype,"secondaryLink",2),n([r({type:String,attribute:"secondary-cta-label",reflect:!0})],t.prototype,"secondaryLabel",2);export{t as a};