@tmorrow/cre8-wc 1.1.3 → 1.1.6

package/lib/components/inline-alert/inline-alert.styles.js

@@ -1,4 +1,395 @@
 import { css } from 'lit';
-const styles = css `*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{--cre8-z-index-1: 1;--cre8-z-index-50: 50;--cre8-z-index-100: 100;--cre8-z-index-200: 200;--cre8-z-index-1030: 1030;--cre8-anim-fade-quick: 0.35s;--cre8-anim-ease: ease}@keyframes fadeIn{100%{opacity:1}}@keyframes slideIn{100%{transform:translateX(0)}}@keyframes slideInFwd{100%{width:272px;height:272px}}@keyframes slideOutRight{100%{width:272px;height:272px}}@keyframes slideUp{100%{transform:translateY(0)}}@media(width >= 481px){@keyframes slideInFwd{100%{width:417px;height:417px}}@keyframes slideOutRight{100%{width:417px;height:417px}}}@media(width >= 48rem){@keyframes slideInFwd{100%{width:330px;height:330px}}@keyframes slideOutRight{100%{width:330px;height:330px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 60rem){@keyframes slideInFwd{100%{width:460px;height:460px}}@keyframes slideOutRight{100%{width:460px;height:460px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 75rem){@keyframes slideInFwd{100%{width:592px;height:591px}}@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 87.5rem){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 120px))}}}@media(width >= 2200px){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 592px))}}}span.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple 600ms linear;background-color:var(--ripple-bg-color)}@keyframes ripple{to{transform:scale(4);opacity:1}}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{display:inline-flex}:host([fullWidth]){display:flex}.cre8-c-inline-alert{font-family:var(--cre8-typography-body-default-font-family);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);text-decoration:var(--cre8-typography-body-default-text-decoration);text-transform:var(--cre8-typography-body-default-text-transform);font-weight:normal;display:inline-flex;align-items:flex-start;gap:0.5rem;padding:1rem;color:var(--cre8-color-content-default);background-color:var(--cre8-color-bg-info);border-color:var(--cre8-color-border-info);border-width:var(--cre8-border-width-default);border-style:var(--cre8-border-style-default);border-radius:var(--cre8-border-radius-default)}.cre8-c-inline-alert--full-width{width:100%}.cre8-c-inline-alert--error{background-color:var(--cre8-color-bg-error);border-color:var(--cre8-color-border-error)}.cre8-c-inline-alert--warning{background-color:var(--cre8-color-bg-warning);border-color:var(--cre8-color-border-warning)}.cre8-c-inline-alert--success{background-color:var(--cre8-color-bg-success);border-color:var(--cre8-color-border-success)}.cre8-c-inline-alert--attention{background-color:var(--cre8-color-bg-attention);border-color:var(--cre8-color-border-attention)}.cre8-c-inline-alert--neutral{background-color:var(--cre8-color-bg-subtle);border-color:var(--cre8-color-border-strong)}.cre8-c-inline-alert--transparent{padding:0;border:none;background-color:rgba(0,0,0,0);gap:0.5rem;border-radius:none}.cre8-c-inline-alert--transparent.cre8-c-inline-alert--error{color:var(--cre8-color-content-error)}.cre8-c-inline-alert--transparent.cre8-c-inline-alert--success{color:var(--cre8-color-content-success)}.cre8-c-inline-alert__icon{position:relative;color:var(--cre8-color-content-info-icon);height:1.5rem;width:1.5rem}.cre8-c-inline-alert--error .cre8-c-inline-alert__icon{color:var(--cre8-color-content-error-icon)}.cre8-c-inline-alert--warning .cre8-c-inline-alert__icon{color:var(--cre8-color-content-warning-icon)}.cre8-c-inline-alert--success .cre8-c-inline-alert__icon{color:var(--cre8-color-content-success-icon)}.cre8-c-inline-alert__icon .cre8-c-inline-alert--help,.cre8-c-inline-alert--info .cre8-c-inline-alert__icon{color:var(--cre8-color-content-info-icon)}.cre8-c-inline-alert--attention .cre8-c-inline-alert__icon{color:var(--cre8-color-content-attention-icon)}.cre8-c-inline-alert--neutral .cre8-c-inline-alert__icon{color:var(--cre8-color-content-default)}.cre8-c-inline-alert--transparent .cre8-c-inline-alert__icon{top:0;padding:0.125rem}`;
+const styles = css `
+@charset "UTF-8";
+/**
+ * Border-Box http:/paulirish.com/2012/box-sizing-border-box-ftw/
+ */
+*,
+::slotted(*),
+*:before,
+*:after {
+  box-sizing: border-box;
+}
+
+:root {
+  --size-base-unit: 0.5rem;
+}
+
+/**
+ * RTL support for values logical properties can't automatically adjust for
+ * 1) Percentage based horizontal translate values need to be flipped
+ * 2) Background gradients using "to-right" or "to-left" need to be switched to using deg values.
+ * 3) Inverse items that have 45degs
+ */
+[dir=rtl] {
+  --rtlTranslateX: 50%;
+  /* 1 */
+  --rtlGradientToRight: 270deg;
+  /* 2 */
+  --rtlRotate45Inverse: -45deg;
+  /* 3 */
+}
+
+/**
+ * Visible focus outline for elements on a light background
+ */
+/**
+ * Visible focus outline for elements with an error status
+ */
+/**
+ * Visible focus outline for elements on a dark background
+ */
+/**
+* Focus state for themes that need a dashed outline for focus
+* state
+**/
+/**
+ * Invisible focus outline for elements that need a more visible
+ * focus state for high-contrast mode
+ */
+/**
+ * Visually hidden from display
+ */
+/*
+=======
+Animations
+=======
+*/
+:host {
+  --cre8-z-index-1: 1;
+  --cre8-z-index-50: 50;
+  --cre8-z-index-100: 100;
+  --cre8-z-index-200: 200;
+  --cre8-z-index-1030: 1030;
+  --cre8-anim-fade-quick: 0.35s;
+  --cre8-anim-ease: ease;
+}
+
+@keyframes fadeIn {
+  100% {
+    opacity: 1;
+  }
+}
+@keyframes slideIn {
+  100% {
+    transform: translateX(0);
+  }
+}
+@keyframes slideInFwd {
+  100% {
+    width: 272px;
+    height: 272px;
+  }
+}
+@keyframes slideOutRight {
+  100% {
+    width: 272px;
+    height: 272px;
+  }
+}
+@keyframes slideUp {
+  100% {
+    transform: translateY(0);
+  }
+}
+@media (width >= 481px) {
+  @keyframes slideInFwd {
+    100% {
+      width: 417px;
+      height: 417px;
+    }
+  }
+  @keyframes slideOutRight {
+    100% {
+      width: 417px;
+      height: 417px;
+    }
+  }
+}
+@media (width >= 48rem) {
+  @keyframes slideInFwd {
+    100% {
+      width: 330px;
+      height: 330px;
+    }
+  }
+  @keyframes slideOutRight {
+    100% {
+      width: 330px;
+      height: 330px;
+      transform: translateX(calc(100vw - 45px));
+    }
+  }
+}
+@media (width >= 60rem) {
+  @keyframes slideInFwd {
+    100% {
+      width: 460px;
+      height: 460px;
+    }
+  }
+  @keyframes slideOutRight {
+    100% {
+      width: 460px;
+      height: 460px;
+      transform: translateX(calc(100vw - 45px));
+    }
+  }
+}
+@media (width >= 75rem) {
+  @keyframes slideInFwd {
+    100% {
+      width: 592px;
+      height: 591px;
+    }
+  }
+  @keyframes slideOutRight {
+    100% {
+      width: 592px;
+      height: 591px;
+      transform: translateX(calc(100vw - 45px));
+    }
+  }
+}
+@media (width >= 87.5rem) {
+  @keyframes slideOutRight {
+    100% {
+      width: 592px;
+      height: 591px;
+      transform: translateX(calc(100vw - 120px));
+    }
+  }
+}
+@media (width >= 2200px) {
+  @keyframes slideOutRight {
+    100% {
+      width: 592px;
+      height: 591px;
+      transform: translateX(calc(100vw - 592px));
+    }
+  }
+}
+span.ripple {
+  position: absolute;
+  border-radius: 50%;
+  transform: scale(0);
+  animation: ripple 600ms linear;
+  background-color: var(--ripple-bg-color);
+}
+
+@keyframes ripple {
+  to {
+    transform: scale(4);
+    opacity: 1;
+  }
+}
+:root {
+  --size-base-unit: 0.5rem;
+}
+
+/**
+ * RTL support for values logical properties can't automatically adjust for
+ * 1) Percentage based horizontal translate values need to be flipped
+ * 2) Background gradients using "to-right" or "to-left" need to be switched to using deg values.
+ * 3) Inverse items that have 45degs
+ */
+[dir=rtl] {
+  --rtlTranslateX: 50%;
+  /* 1 */
+  --rtlGradientToRight: 270deg;
+  /* 2 */
+  --rtlRotate45Inverse: -45deg;
+  /* 3 */
+}
+
+/**
+ * Visible focus outline for elements on a light background
+ */
+/**
+ * Visible focus outline for elements with an error status
+ */
+/**
+ * Visible focus outline for elements on a dark background
+ */
+/**
+* Focus state for themes that need a dashed outline for focus
+* state
+**/
+/**
+ * Invisible focus outline for elements that need a more visible
+ * focus state for high-contrast mode
+ */
+/**
+ * Visually hidden from display
+ */
+:host {
+  display: inline-flex;
+}
+
+:host([fullWidth]) {
+  display: flex;
+}
+
+/**
+ * Inline alert
+ */
+.cre8-c-inline-alert {
+  font-family: var(--cre8-typography-body-default-font-family);
+  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);
+  font-weight: normal;
+  display: inline-flex;
+  align-items: flex-start;
+  gap: 0.5rem;
+  padding: 1rem;
+  color: var(--cre8-color-content-default);
+  background-color: var(--cre8-color-bg-info);
+  border-color: var(--cre8-color-border-info);
+  border-width: var(--cre8-border-width-default);
+  border-style: var(--cre8-border-style-default);
+  border-radius: var(--cre8-border-radius-container);
+}
+
+/**
+ * Full-width inline alert
+ */
+.cre8-c-inline-alert--full-width {
+  width: 100%;
+}
+
+/**
+ * Inline alert with error variant
+ */
+.cre8-c-inline-alert--error {
+  background-color: var(--cre8-color-bg-error);
+  border-color: var(--cre8-color-border-error);
+}
+
+/**
+ * Inline alert with warning variant
+ */
+.cre8-c-inline-alert--warning {
+  background-color: var(--cre8-color-bg-warning);
+  border-color: var(--cre8-color-border-warning);
+}
+
+/**
+ * Inline alert with success variant
+ */
+.cre8-c-inline-alert--success {
+  background-color: var(--cre8-color-bg-success);
+  border-color: var(--cre8-color-border-success);
+}
+
+/**
+ * Inline alert with attention variant
+ */
+.cre8-c-inline-alert--attention {
+  background-color: var(--cre8-color-bg-attention);
+  border-color: var(--cre8-color-border-attention);
+}
+
+/**
+ * Inline alert with neutral variant
+ */
+.cre8-c-inline-alert--neutral {
+  background-color: var(--cre8-color-bg-subtle);
+  border-color: var(--cre8-color-border-strong);
+}
+
+/**
+ * Inline alert with variant - transparent
+ */
+.cre8-c-inline-alert--transparent {
+  padding: 0;
+  border: none;
+  background-color: transparent;
+  gap: 0.5rem;
+  border-radius: none;
+}
+
+/**
+ * Inline alert with variant - transparent and error
+ */
+.cre8-c-inline-alert--transparent.cre8-c-inline-alert--error {
+  color: var(--cre8-color-content-error);
+}
+
+/**
+ * Inline alert with variant - transparent and success
+ */
+.cre8-c-inline-alert--transparent.cre8-c-inline-alert--success {
+  color: var(--cre8-color-content-success);
+}
+
+/**
+ * Inline alert icon
+ */
+.cre8-c-inline-alert__icon {
+  position: relative;
+  color: var(--cre8-color-content-info-icon);
+  height: 1.5rem;
+  width: 1.5rem;
+  /**
+   * Inline alert icon for error variant
+   */
+}
+.cre8-c-inline-alert--error .cre8-c-inline-alert__icon {
+  color: var(--cre8-color-content-error-icon);
+}
+.cre8-c-inline-alert__icon {
+  /**
+   * Inline alert icon for warning variant
+   */
+}
+.cre8-c-inline-alert--warning .cre8-c-inline-alert__icon {
+  color: var(--cre8-color-content-warning-icon);
+}
+.cre8-c-inline-alert__icon {
+  /**
+   * Inline alert icon for success variant
+   */
+}
+.cre8-c-inline-alert--success .cre8-c-inline-alert__icon {
+  color: var(--cre8-color-content-success-icon);
+}
+.cre8-c-inline-alert__icon {
+  /**
+   * Inline alert icon for help variant
+   * Inline alert icon for info variant
+   */
+}
+.cre8-c-inline-alert__icon .cre8-c-inline-alert--help, .cre8-c-inline-alert--info .cre8-c-inline-alert__icon {
+  color: var(--cre8-color-content-info-icon);
+}
+.cre8-c-inline-alert__icon {
+  /**
+   * Inline alert icon for attention variant
+   */
+}
+.cre8-c-inline-alert--attention .cre8-c-inline-alert__icon {
+  color: var(--cre8-color-content-attention-icon);
+}
+.cre8-c-inline-alert__icon {
+  /**
+   * Inline alert icon for neutral variant
+   */
+}
+.cre8-c-inline-alert--neutral .cre8-c-inline-alert__icon {
+  color: var(--cre8-color-content-default);
+}
+.cre8-c-inline-alert__icon {
+  /**
+   * Inline alert icon
+   */
+}
+.cre8-c-inline-alert--transparent .cre8-c-inline-alert__icon {
+  top: 0;
+  padding: 0.125rem;
+}/*# sourceMappingURL=inline-alert.module.css.map */`;
 export default styles;
 //# sourceMappingURL=inline-alert.styles.js.map

package/lib/components/inline-alert/inline-alert.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"inline-alert.styles.js","sourceRoot":"","sources":["../../../components/inline-alert/inline-alert.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA,20IAA20I,CAAC;AAC91I,eAAe,MAAM,CAAC","sourcesContent":["import { css } from 'lit';\nconst styles = css`*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{--cre8-z-index-1: 1;--cre8-z-index-50: 50;--cre8-z-index-100: 100;--cre8-z-index-200: 200;--cre8-z-index-1030: 1030;--cre8-anim-fade-quick: 0.35s;--cre8-anim-ease: ease}@keyframes fadeIn{100%{opacity:1}}@keyframes slideIn{100%{transform:translateX(0)}}@keyframes slideInFwd{100%{width:272px;height:272px}}@keyframes slideOutRight{100%{width:272px;height:272px}}@keyframes slideUp{100%{transform:translateY(0)}}@media(width >= 481px){@keyframes slideInFwd{100%{width:417px;height:417px}}@keyframes slideOutRight{100%{width:417px;height:417px}}}@media(width >= 48rem){@keyframes slideInFwd{100%{width:330px;height:330px}}@keyframes slideOutRight{100%{width:330px;height:330px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 60rem){@keyframes slideInFwd{100%{width:460px;height:460px}}@keyframes slideOutRight{100%{width:460px;height:460px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 75rem){@keyframes slideInFwd{100%{width:592px;height:591px}}@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 87.5rem){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 120px))}}}@media(width >= 2200px){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 592px))}}}span.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple 600ms linear;background-color:var(--ripple-bg-color)}@keyframes ripple{to{transform:scale(4);opacity:1}}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{display:inline-flex}:host([fullWidth]){display:flex}.cre8-c-inline-alert{font-family:var(--cre8-typography-body-default-font-family);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);text-decoration:var(--cre8-typography-body-default-text-decoration);text-transform:var(--cre8-typography-body-default-text-transform);font-weight:normal;display:inline-flex;align-items:flex-start;gap:0.5rem;padding:1rem;color:var(--cre8-color-content-default);background-color:var(--cre8-color-bg-info);border-color:var(--cre8-color-border-info);border-width:var(--cre8-border-width-default);border-style:var(--cre8-border-style-default);border-radius:var(--cre8-border-radius-default)}.cre8-c-inline-alert--full-width{width:100%}.cre8-c-inline-alert--error{background-color:var(--cre8-color-bg-error);border-color:var(--cre8-color-border-error)}.cre8-c-inline-alert--warning{background-color:var(--cre8-color-bg-warning);border-color:var(--cre8-color-border-warning)}.cre8-c-inline-alert--success{background-color:var(--cre8-color-bg-success);border-color:var(--cre8-color-border-success)}.cre8-c-inline-alert--attention{background-color:var(--cre8-color-bg-attention);border-color:var(--cre8-color-border-attention)}.cre8-c-inline-alert--neutral{background-color:var(--cre8-color-bg-subtle);border-color:var(--cre8-color-border-strong)}.cre8-c-inline-alert--transparent{padding:0;border:none;background-color:rgba(0,0,0,0);gap:0.5rem;border-radius:none}.cre8-c-inline-alert--transparent.cre8-c-inline-alert--error{color:var(--cre8-color-content-error)}.cre8-c-inline-alert--transparent.cre8-c-inline-alert--success{color:var(--cre8-color-content-success)}.cre8-c-inline-alert__icon{position:relative;color:var(--cre8-color-content-info-icon);height:1.5rem;width:1.5rem}.cre8-c-inline-alert--error .cre8-c-inline-alert__icon{color:var(--cre8-color-content-error-icon)}.cre8-c-inline-alert--warning .cre8-c-inline-alert__icon{color:var(--cre8-color-content-warning-icon)}.cre8-c-inline-alert--success .cre8-c-inline-alert__icon{color:var(--cre8-color-content-success-icon)}.cre8-c-inline-alert__icon .cre8-c-inline-alert--help,.cre8-c-inline-alert--info .cre8-c-inline-alert__icon{color:var(--cre8-color-content-info-icon)}.cre8-c-inline-alert--attention .cre8-c-inline-alert__icon{color:var(--cre8-color-content-attention-icon)}.cre8-c-inline-alert--neutral .cre8-c-inline-alert__icon{color:var(--cre8-color-content-default)}.cre8-c-inline-alert--transparent .cre8-c-inline-alert__icon{top:0;padding:0.125rem}`;\nexport default styles;\n"]}
+{"version":3,"file":"inline-alert.styles.js","sourceRoot":"","sources":["../../../components/inline-alert/inline-alert.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qDAuYmC,CAAC;AACtD,eAAe,MAAM,CAAC","sourcesContent":["import { css } from 'lit';\nconst styles = css`\n@charset \"UTF-8\";\n/**\n * Border-Box http:/paulirish.com/2012/box-sizing-border-box-ftw/\n */\n*,\n::slotted(*),\n*:before,\n*:after {\n  box-sizing: border-box;\n}\n\n:root {\n  --size-base-unit: 0.5rem;\n}\n\n/**\n * RTL support for values logical properties can't automatically adjust for\n * 1) Percentage based horizontal translate values need to be flipped\n * 2) Background gradients using \"to-right\" or \"to-left\" need to be switched to using deg values.\n * 3) Inverse items that have 45degs\n */\n[dir=rtl] {\n  --rtlTranslateX: 50%;\n  /* 1 */\n  --rtlGradientToRight: 270deg;\n  /* 2 */\n  --rtlRotate45Inverse: -45deg;\n  /* 3 */\n}\n\n/**\n * Visible focus outline for elements on a light background\n */\n/**\n * Visible focus outline for elements with an error status\n */\n/**\n * Visible focus outline for elements on a dark background\n */\n/**\n* Focus state for themes that need a dashed outline for focus\n* state\n**/\n/**\n * Invisible focus outline for elements that need a more visible\n * focus state for high-contrast mode\n */\n/**\n * Visually hidden from display\n */\n/*\n=======\nAnimations\n=======\n*/\n:host {\n  --cre8-z-index-1: 1;\n  --cre8-z-index-50: 50;\n  --cre8-z-index-100: 100;\n  --cre8-z-index-200: 200;\n  --cre8-z-index-1030: 1030;\n  --cre8-anim-fade-quick: 0.35s;\n  --cre8-anim-ease: ease;\n}\n\n@keyframes fadeIn {\n  100% {\n    opacity: 1;\n  }\n}\n@keyframes slideIn {\n  100% {\n    transform: translateX(0);\n  }\n}\n@keyframes slideInFwd {\n  100% {\n    width: 272px;\n    height: 272px;\n  }\n}\n@keyframes slideOutRight {\n  100% {\n    width: 272px;\n    height: 272px;\n  }\n}\n@keyframes slideUp {\n  100% {\n    transform: translateY(0);\n  }\n}\n@media (width >= 481px) {\n  @keyframes slideInFwd {\n    100% {\n      width: 417px;\n      height: 417px;\n    }\n  }\n  @keyframes slideOutRight {\n    100% {\n      width: 417px;\n      height: 417px;\n    }\n  }\n}\n@media (width >= 48rem) {\n  @keyframes slideInFwd {\n    100% {\n      width: 330px;\n      height: 330px;\n    }\n  }\n  @keyframes slideOutRight {\n    100% {\n      width: 330px;\n      height: 330px;\n      transform: translateX(calc(100vw - 45px));\n    }\n  }\n}\n@media (width >= 60rem) {\n  @keyframes slideInFwd {\n    100% {\n      width: 460px;\n      height: 460px;\n    }\n  }\n  @keyframes slideOutRight {\n    100% {\n      width: 460px;\n      height: 460px;\n      transform: translateX(calc(100vw - 45px));\n    }\n  }\n}\n@media (width >= 75rem) {\n  @keyframes slideInFwd {\n    100% {\n      width: 592px;\n      height: 591px;\n    }\n  }\n  @keyframes slideOutRight {\n    100% {\n      width: 592px;\n      height: 591px;\n      transform: translateX(calc(100vw - 45px));\n    }\n  }\n}\n@media (width >= 87.5rem) {\n  @keyframes slideOutRight {\n    100% {\n      width: 592px;\n      height: 591px;\n      transform: translateX(calc(100vw - 120px));\n    }\n  }\n}\n@media (width >= 2200px) {\n  @keyframes slideOutRight {\n    100% {\n      width: 592px;\n      height: 591px;\n      transform: translateX(calc(100vw - 592px));\n    }\n  }\n}\nspan.ripple {\n  position: absolute;\n  border-radius: 50%;\n  transform: scale(0);\n  animation: ripple 600ms linear;\n  background-color: var(--ripple-bg-color);\n}\n\n@keyframes ripple {\n  to {\n    transform: scale(4);\n    opacity: 1;\n  }\n}\n:root {\n  --size-base-unit: 0.5rem;\n}\n\n/**\n * RTL support for values logical properties can't automatically adjust for\n * 1) Percentage based horizontal translate values need to be flipped\n * 2) Background gradients using \"to-right\" or \"to-left\" need to be switched to using deg values.\n * 3) Inverse items that have 45degs\n */\n[dir=rtl] {\n  --rtlTranslateX: 50%;\n  /* 1 */\n  --rtlGradientToRight: 270deg;\n  /* 2 */\n  --rtlRotate45Inverse: -45deg;\n  /* 3 */\n}\n\n/**\n * Visible focus outline for elements on a light background\n */\n/**\n * Visible focus outline for elements with an error status\n */\n/**\n * Visible focus outline for elements on a dark background\n */\n/**\n* Focus state for themes that need a dashed outline for focus\n* state\n**/\n/**\n * Invisible focus outline for elements that need a more visible\n * focus state for high-contrast mode\n */\n/**\n * Visually hidden from display\n */\n:host {\n  display: inline-flex;\n}\n\n:host([fullWidth]) {\n  display: flex;\n}\n\n/**\n * Inline alert\n */\n.cre8-c-inline-alert {\n  font-family: var(--cre8-typography-body-default-font-family);\n  font-size: var(--cre8-typography-body-default-font-size);\n  font-weight: var(--cre8-typography-body-default-font-weight);\n  line-height: var(--cre8-typography-body-default-line-height);\n  -webkit-text-decoration: var(--cre8-typography-body-default-text-decoration);\n          text-decoration: var(--cre8-typography-body-default-text-decoration);\n  text-transform: var(--cre8-typography-body-default-text-transform);\n  font-weight: normal;\n  display: inline-flex;\n  align-items: flex-start;\n  gap: 0.5rem;\n  padding: 1rem;\n  color: var(--cre8-color-content-default);\n  background-color: var(--cre8-color-bg-info);\n  border-color: var(--cre8-color-border-info);\n  border-width: var(--cre8-border-width-default);\n  border-style: var(--cre8-border-style-default);\n  border-radius: var(--cre8-border-radius-container);\n}\n\n/**\n * Full-width inline alert\n */\n.cre8-c-inline-alert--full-width {\n  width: 100%;\n}\n\n/**\n * Inline alert with error variant\n */\n.cre8-c-inline-alert--error {\n  background-color: var(--cre8-color-bg-error);\n  border-color: var(--cre8-color-border-error);\n}\n\n/**\n * Inline alert with warning variant\n */\n.cre8-c-inline-alert--warning {\n  background-color: var(--cre8-color-bg-warning);\n  border-color: var(--cre8-color-border-warning);\n}\n\n/**\n * Inline alert with success variant\n */\n.cre8-c-inline-alert--success {\n  background-color: var(--cre8-color-bg-success);\n  border-color: var(--cre8-color-border-success);\n}\n\n/**\n * Inline alert with attention variant\n */\n.cre8-c-inline-alert--attention {\n  background-color: var(--cre8-color-bg-attention);\n  border-color: var(--cre8-color-border-attention);\n}\n\n/**\n * Inline alert with neutral variant\n */\n.cre8-c-inline-alert--neutral {\n  background-color: var(--cre8-color-bg-subtle);\n  border-color: var(--cre8-color-border-strong);\n}\n\n/**\n * Inline alert with variant - transparent\n */\n.cre8-c-inline-alert--transparent {\n  padding: 0;\n  border: none;\n  background-color: transparent;\n  gap: 0.5rem;\n  border-radius: none;\n}\n\n/**\n * Inline alert with variant - transparent and error\n */\n.cre8-c-inline-alert--transparent.cre8-c-inline-alert--error {\n  color: var(--cre8-color-content-error);\n}\n\n/**\n * Inline alert with variant - transparent and success\n */\n.cre8-c-inline-alert--transparent.cre8-c-inline-alert--success {\n  color: var(--cre8-color-content-success);\n}\n\n/**\n * Inline alert icon\n */\n.cre8-c-inline-alert__icon {\n  position: relative;\n  color: var(--cre8-color-content-info-icon);\n  height: 1.5rem;\n  width: 1.5rem;\n  /**\n   * Inline alert icon for error variant\n   */\n}\n.cre8-c-inline-alert--error .cre8-c-inline-alert__icon {\n  color: var(--cre8-color-content-error-icon);\n}\n.cre8-c-inline-alert__icon {\n  /**\n   * Inline alert icon for warning variant\n   */\n}\n.cre8-c-inline-alert--warning .cre8-c-inline-alert__icon {\n  color: var(--cre8-color-content-warning-icon);\n}\n.cre8-c-inline-alert__icon {\n  /**\n   * Inline alert icon for success variant\n   */\n}\n.cre8-c-inline-alert--success .cre8-c-inline-alert__icon {\n  color: var(--cre8-color-content-success-icon);\n}\n.cre8-c-inline-alert__icon {\n  /**\n   * Inline alert icon for help variant\n   * Inline alert icon for info variant\n   */\n}\n.cre8-c-inline-alert__icon .cre8-c-inline-alert--help, .cre8-c-inline-alert--info .cre8-c-inline-alert__icon {\n  color: var(--cre8-color-content-info-icon);\n}\n.cre8-c-inline-alert__icon {\n  /**\n   * Inline alert icon for attention variant\n   */\n}\n.cre8-c-inline-alert--attention .cre8-c-inline-alert__icon {\n  color: var(--cre8-color-content-attention-icon);\n}\n.cre8-c-inline-alert__icon {\n  /**\n   * Inline alert icon for neutral variant\n   */\n}\n.cre8-c-inline-alert--neutral .cre8-c-inline-alert__icon {\n  color: var(--cre8-color-content-default);\n}\n.cre8-c-inline-alert__icon {\n  /**\n   * Inline alert icon\n   */\n}\n.cre8-c-inline-alert--transparent .cre8-c-inline-alert__icon {\n  top: 0;\n  padding: 0.125rem;\n}/*# sourceMappingURL=inline-alert.module.css.map */`;\nexport default styles;\n"]}

package/lib/design-tokens/brands/blue/css/fonts.css

@@ -0,0 +1,31 @@
+@font-face {
+	font-family: 'Value Sans Pro';
+	font-style: normal;
+	font-weight: 400;
+	src: url('../assets/fonts/ValueSansRegular-Pro.woff2') format('woff2');
+	font-display: fallback;
+}
+
+@font-face {
+	font-family: 'Value Sans Pro';
+	font-style: normal;
+	font-weight: 500;
+	src: url('../assets/fonts/ValueSans-Medium-Pro.woff2') format('woff2');
+	font-display: fallback;
+}
+
+@font-face {
+	font-family: 'Value Sans Pro';
+	font-style: normal;
+	font-weight: 700;
+	src: url('../assets/fonts/ValueSans-Bold-Pro.woff2') format('woff2');
+	font-display: fallback;
+}
+
+@font-face {
+	font-family: 'Value Serif Pro';
+	font-style: normal;
+	font-weight: 700;
+	src: url('../assets/fonts/ValueSerif-Bold-Pro.woff2') format('woff2');
+	font-display: fallback;
+}

package/lib/design-tokens/{brands copy/blue/css/tokens_blue.module.js → brands/blue/css/tokens_blue.css}

@@ -1,7 +1,5 @@
-import { css } from 'lit';
-const consumer = css `
-
 @import './tokens_brand.css';
+@import './fonts.css';
 :root{--cre8-typography-display-large-font-family: var(--cre8-font-families-value-serif-pro);
       --cre8-typography-display-large-font-size: var(--cre8-font-size-13);
       --cre8-typography-display-large-font-weight: var(--cre8-font-weights-value-serif-pro-0);
@@ -247,7 +245,4 @@ const consumer = css `
       --cre8-typography-meta-small-font-weight: var(--cre8-font-weights-value-sans-pro-3);
       --cre8-typography-meta-small-line-height: var(--cre8-line-heights-10);
       --cre8-typography-meta-small-text-decoration: var(--cre8-text-decoration-none);
-      --cre8-typography-meta-small-text-transform: var(--cre8-text-case-uppercase);}
-      `;
-export default consumer;
-//# sourceMappingURL=tokens_blue.module.js.map
+      --cre8-typography-meta-small-text-transform: var(--cre8-text-case-uppercase);}