@abgov/react-components 4.0.0-alpha.34 → 4.0.0-alpha.35

package/index.d.ts

@@ -2,7 +2,7 @@
  * IMPORTANT: Do NOT export experimental components in this file.
  */
 import '@abgov/web-components';
-import { GoABadge, GoAInfoBadge, GoAEmergencyBadge, GoASuccessBadge, GoAWarningBadge } from './lib/badge/badge';
+import { GoABadge, GoAInfoBadge, GoAEmergencyBadge, GoASuccessBadge, GoAImportantBadge } from './lib/badge/badge';
 import { GoAInput, GoAInputText, GoAInputPassword, GoAInputDate, GoAInputTime, GoAInputDateTime, GoAInputEmail, GoAInputSearch, GoAInputUrl, GoAInputTel, GoAInputFile, GoAInputMonth, GoAInputNumber, GoAInputRange } from './lib/input/input';
 import { GoAAppHeader } from './lib/app-header/app-header';
 import { GoAButton } from './lib/button/button';
@@ -37,4 +37,4 @@ export * from './lib/page/page';
 export * from './lib/divider/divider';
 export type { GoAIconType };
 export type { GoABadgeType };
-export { GoAAppHeader, GoABadge, GoAButton, GoAButtonGroup, GoACallout, GoACheckbox, GoAChip, GoACircularProgress, GoAContainer, GoADropdown, GoADropdownOption, GoAEmergencyBadge, GoAFlexRow, GoAFormItem, GoAHeroBanner, GoAHeroBannerActions, GoAIcon, GoAIconButton, GoAInfoBadge, GoAInput, GoAInputDate, GoAInputDateTime, GoAInputEmail, GoAInputFile, GoAInputMonth, GoAInputNumber, GoAInputPassword, GoAInputRange, GoAInputSearch, GoAInputTel, GoAInputText, GoAInputTime, GoAInputUrl, GoAMicrositeHeader, GoAModal, GoANotification, GoAPageBlock, GoARadioGroup, GoARadioItem, GoASkeleton, GoASpinner, GoASuccessBadge, GoATextArea, GoAWarningBadge, };
+export { GoAAppHeader, GoABadge, GoAButton, GoAButtonGroup, GoACallout, GoACheckbox, GoAChip, GoACircularProgress, GoAContainer, GoADropdown, GoADropdownOption, GoAEmergencyBadge, GoAFlexRow, GoAFormItem, GoAHeroBanner, GoAHeroBannerActions, GoAIcon, GoAIconButton, GoAInfoBadge, GoAInput, GoAInputDate, GoAInputDateTime, GoAInputEmail, GoAInputFile, GoAInputMonth, GoAInputNumber, GoAInputPassword, GoAInputRange, GoAInputSearch, GoAInputTel, GoAInputText, GoAInputTime, GoAInputUrl, GoAMicrositeHeader, GoAModal, GoANotification, GoAPageBlock, GoARadioGroup, GoARadioItem, GoASkeleton, GoASpinner, GoASuccessBadge, GoATextArea, GoAImportantBadge, };

package/lib/badge/badge.d.ts

@@ -1,15 +1,14 @@
 import React, { FC } from 'react';
-import { GoAIconType } from '../icons';
-export declare type GoABadgeType = 'information' | 'success' | 'warning' | 'emergency' | 'dark' | 'midtone' | 'light' | 'inactive';
+export declare type GoABadgeType = 'information' | 'success' | 'important' | 'emergency' | 'dark' | 'midtone' | 'light';
 interface GoABadgeProps {
     type: GoABadgeType;
-    icon?: GoAIconType;
+    icon?: boolean;
     content?: string;
     testId?: string;
 }
 interface WCProps {
     type: GoABadgeType;
-    icon?: GoAIconType;
+    icon?: boolean;
     content?: string;
     testid?: string;
 }
@@ -23,6 +22,6 @@ declare global {
 export declare const GoABadge: FC<GoABadgeProps>;
 export declare const GoAInfoBadge: FC<GoABadgeProps>;
 export declare const GoASuccessBadge: FC<GoABadgeProps>;
-export declare const GoAWarningBadge: FC<GoABadgeProps>;
+export declare const GoAImportantBadge: FC<GoABadgeProps>;
 export declare const GoAEmergencyBadge: FC<GoABadgeProps>;
 export {};

package/lib/button/button.d.ts

@@ -3,7 +3,7 @@ import './button.css';
 import { GoAIconType } from '../icons';
 export declare type ButtonType = 'primary' | 'secondary' | 'tertiary' | 'start';
 export declare type ButtonSize = 'compact' | '';
-export declare type ButtonVariant = '' | 'danger';
+export declare type ButtonVariant = '' | 'destructive';
 interface WCProps {
     type?: ButtonType;
     size?: ButtonSize;

package/lib/microsite-header/microsite-header.d.ts

@@ -8,12 +8,12 @@ declare global {
 }
 export declare type ServiceLevel = 'alpha' | 'beta' | 'live';
 interface WebComponentProps {
-    level: ServiceLevel;
+    type: ServiceLevel;
     version?: string;
     feedbackurl?: string;
 }
 export interface HeaderProps {
-    level: ServiceLevel;
+    type: ServiceLevel;
     version?: string;
     feedbackUrl?: string;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/react-components",
-  "version": "4.0.0-alpha.34",
+  "version": "4.0.0-alpha.35",
   "description": "Government of Alberta - UI components for React",
   "bugs": {
     "url": "https://github.com/GovAlta/ui-components/issues"

package/react-components.esm.js

@@ -1674,7 +1674,7 @@ function instance$x($$self, $$props, $$invalidate) {
     1) {
       $$invalidate(4, iconType = {
         success: "checkmark-circle",
-        warning: "alert-circle",
+        important: "alert-circle",
         information: "information-circle",
         emergency: "warning",
         dark: "information-circle",
@@ -1690,7 +1690,7 @@ function instance$x($$self, $$props, $$invalidate) {
 class Badge extends SvelteElement {
   constructor(options) {
     super();
-    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.goa-badge{display:inline-flex;align-items:center;border-radius:0.25rem;padding:3px 0.5rem;gap:0.25rem;font-weight:var(--fw-regular);margin:0.25rem}.icon-only{padding:0.25rem}.goa-badge-content{text-transform:capitalize;font-size:var(--fs-sm);line-height:var(--lh-sm);padding-bottom:var(--font-valign-fix)}.goa-badge.badge-information{background-color:var(--color-gray-100);color:var(--goa-color-status-info)}.goa-badge.badge-success{background-color:var(--goa-color-status-success);color:var(--goa-color-text-light)}.goa-badge.badge-warning{background-color:var(--goa-color-status-warning);color:var(--goa-color-text)}.goa-badge.badge-emergency{background-color:var(--goa-color-status-emergency);color:var(--goa-color-text-light)}.goa-badge.badge-dark{background-color:var(--color-black);color:var(--goa-color-text-light)}.goa-badge.badge-midtone{background-color:var(--color-gray-600);color:var(--goa-color-text-light)}.goa-badge.badge-light{background-color:var(--color-white);color:var(--goa-color-text)}</style>`;
+    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.goa-badge{display:inline-flex;align-items:center;border-radius:0.25rem;padding:3px 0.5rem;gap:0.25rem;font-weight:var(--fw-regular);margin:0.25rem}.icon-only{padding:0.25rem}.goa-badge-content{text-transform:capitalize;font-size:var(--fs-sm);line-height:var(--lh-sm);padding-bottom:var(--font-valign-fix)}.goa-badge.badge-information{background-color:var(--color-gray-100);color:var(--goa-color-status-info)}.goa-badge.badge-success{background-color:var(--goa-color-status-success);color:var(--goa-color-text-light)}.goa-badge.badge-important{background-color:var(--goa-color-status-warning);color:var(--goa-color-text)}.goa-badge.badge-emergency{background-color:var(--goa-color-status-emergency);color:var(--goa-color-text-light)}.goa-badge.badge-dark{background-color:var(--color-black);color:var(--goa-color-text-light)}.goa-badge.badge-midtone{background-color:var(--color-gray-600);color:var(--goa-color-text-light)}.goa-badge.badge-light{background-color:var(--color-white);color:var(--goa-color-text)}</style>`;
     init(this, {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
@@ -9957,7 +9957,7 @@ function create_if_block_3(ctx) {
       div1 = element("div");
       div1.innerHTML = `An official site of the <a href="https://www.alberta.ca/index.aspx">Alberta Government</a>`;
       attr(div0, "class", "service-level service-level--live");
-      attr(div1, "data-testid", "level");
+      attr(div1, "data-testid", "type");
       attr(div1, "class", "site-text");
     },
 
@@ -9974,13 +9974,13 @@ function create_if_block_3(ctx) {
     }
 
   };
-} // (34:2) {#if ["alpha", "beta"].includes(level)}
+} // (34:2) {#if ["alpha", "beta"].includes(type)}
 
 
 function create_if_block_1$3(ctx) {
   let div0;
   let t0_value = capitalize(
-  /*level*/
+  /*type*/
   ctx[0]) + "";
   let t0;
   let div0_class_value;
@@ -10003,9 +10003,9 @@ function create_if_block_1$3(ctx) {
       a.textContent = "Alberta Government";
       t4 = text(" service\n      ");
       if (if_block) if_block.c();
-      attr(div0, "data-testid", "level");
+      attr(div0, "data-testid", "type");
       attr(div0, "class", div0_class_value = "service-level service-level--" +
-      /*level*/
+      /*type*/
       ctx[0].toLowerCase());
       attr(a, "href", "https://www.alberta.ca/index.aspx");
       attr(div1, "data-testid", "site-text");
@@ -10025,15 +10025,15 @@ function create_if_block_1$3(ctx) {
 
     p(ctx, dirty) {
       if (dirty &
-      /*level*/
+      /*type*/
       1 && t0_value !== (t0_value = capitalize(
-      /*level*/
+      /*type*/
       ctx[0]) + "")) set_data(t0, t0_value);
 
       if (dirty &
-      /*level*/
+      /*type*/
       1 && div0_class_value !== (div0_class_value = "service-level service-level--" +
-      /*level*/
+      /*type*/
       ctx[0].toLowerCase())) {
         attr(div0, "class", div0_class_value);
       }
@@ -10144,13 +10144,13 @@ function create_fragment$c(ctx) {
   let header;
   let t0;
   let show_if = ["alpha", "beta"].includes(
-  /*level*/
+  /*type*/
   ctx[0]);
   let t1;
   let div;
   let t2;
   let if_block0 =
-  /*level*/
+  /*type*/
   ctx[0] === "live" && create_if_block_3();
   let if_block1 = show_if && create_if_block_1$3(ctx);
   let if_block2 =
@@ -10184,7 +10184,7 @@ function create_fragment$c(ctx) {
 
     p(ctx, [dirty]) {
       if (
-      /*level*/
+      /*type*/
       ctx[0] === "live") {
         if (if_block0) ;else {
           if_block0 = create_if_block_3();
@@ -10197,9 +10197,9 @@ function create_fragment$c(ctx) {
       }
 
       if (dirty &
-      /*level*/
+      /*type*/
       1) show_if = ["alpha", "beta"].includes(
-      /*level*/
+      /*type*/
       ctx[0]);
 
       if (show_if) {
@@ -10251,7 +10251,7 @@ function capitalize(val) {
 
 function instance$a($$self, $$props, $$invalidate) {
   let {
-    level
+    type
   } = $$props;
   let {
     version
@@ -10261,24 +10261,24 @@ function instance$a($$self, $$props, $$invalidate) {
   } = $$props;
 
   $$self.$$set = $$props => {
-    if ('level' in $$props) $$invalidate(0, level = $$props.level);
+    if ('type' in $$props) $$invalidate(0, type = $$props.type);
     if ('version' in $$props) $$invalidate(1, version = $$props.version);
     if ('feedbackurl' in $$props) $$invalidate(2, feedbackurl = $$props.feedbackurl);
   };
 
-  return [level, version, feedbackurl];
+  return [type, version, feedbackurl];
 }
 
 class MicrositeHeader extends SvelteElement {
   constructor(options) {
     super();
-    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}a{color:var(--goa-color-interactive);cursor:pointer}a:hover{color:var(--goa-color-interactive--hover)}a:focus{outline-width:thin;outline-style:solid;outline-color:var(--goa-color-interactive--hover);outline-offset:0px}.goa-official-site-header{display:flex;font-size:var(--fs-sm);background-color:var(--color-gray-100);align-items:center;justify-content:space-between;padding:0.5rem 1.5rem}@media(max-width: 640px){.goa-official-site-header{padding:0.5rem 1rem;align-items:start}}.spacer{flex:1 1 auto}.version{color:var(--goa-color-text-secondary);padding-left:1rem;line-height:1.25rem}.service-level{font-weight:bold;padding:0.25rem;display:flex;margin-right:1rem;line-height:initial}.service-level--alpha{background-color:var(--goa-color-status-warning);color:var(--goa-color-text)}.service-level--beta{background-color:var(--goa-color-brand);color:var(--goa-color-text-light)}.service-level--live{padding:0}.site-text{color:var(--goa-color-text);line-height:1.25rem}</style>`;
+    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}a{color:var(--goa-color-interactive);cursor:pointer}a:hover{color:var(--goa-color-interactive--hover)}a:focus{outline-width:thin;outline-style:solid;outline-color:var(--goa-color-interactive--hover);outline-offset:0px}.goa-official-site-header{display:flex;font-size:var(--fs-sm);background-color:var(--color-gray-100);align-items:center;justify-content:space-between;padding:0.5rem 1.5rem}@media(max-width: 640px){.goa-official-site-header{padding:0.5rem 1rem;align-items:start}}.spacer{flex:1 1 auto}.version{color:var(--goa-color-text-secondary);padding-left:1rem;line-height:1.25rem}.service-type{font-weight:bold;padding:0.25rem;display:flex;margin-right:1rem;line-height:initial}.service-type--alpha{background-color:var(--goa-color-status-warning);color:var(--goa-color-text)}.service-type--beta{background-color:var(--goa-color-brand);color:var(--goa-color-text-light)}.service-type--live{padding:0}.site-text{color:var(--goa-color-text);line-height:1.25rem}</style>`;
     init(this, {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
     }, instance$a, create_fragment$c, safe_not_equal, {
-      level: 0,
+      type: 0,
       version: 1,
       feedbackurl: 2
     }, null);
@@ -10296,16 +10296,16 @@ class MicrositeHeader extends SvelteElement {
   }
 
   static get observedAttributes() {
-    return ["level", "version", "feedbackurl"];
+    return ["type", "version", "feedbackurl"];
   }
 
-  get level() {
+  get type() {
     return this.$$.ctx[0];
   }
 
-  set level(level) {
+  set type(type) {
     this.$$set({
-      level
+      type
     });
     flush();
   }
@@ -13766,44 +13766,48 @@ const GoABadge = ({
 };
 const GoAInfoBadge = ({
   content,
-  testId
+  testId,
+  icon
 }) => {
   return jsx(GoABadge, {
     type: "information",
-    icon: "information-circle",
+    icon: icon,
     content: content,
     testId: testId
   }, void 0);
 };
 const GoASuccessBadge = ({
   content,
-  testId
+  testId,
+  icon
 }) => {
   return jsx(GoABadge, {
     type: "success",
-    icon: "checkmark-circle",
+    icon: icon,
     content: content,
     testId: testId
   }, void 0);
 };
-const GoAWarningBadge = ({
+const GoAImportantBadge = ({
   content,
-  testId
+  testId,
+  icon
 }) => {
   return jsx(GoABadge, {
-    type: "warning",
-    icon: "warning",
+    type: "important",
+    icon: icon,
     content: content,
     testId: testId
   }, void 0);
 };
 const GoAEmergencyBadge = ({
   content,
-  testId
+  testId,
+  icon
 }) => {
   return jsx(GoABadge, {
     type: "emergency",
-    icon: "alert-circle",
+    icon: icon,
     content: content,
     testId: testId
   }, void 0);
@@ -14378,12 +14382,12 @@ const GoAIconButton = ({
 };
 
 const GoAMicrositeHeader = ({
-  level,
+  type,
   version,
   feedbackUrl
 }) => {
   return jsx("goa-microsite-header", {
-    level: level,
+    type: type,
     version: version,
     feedbackurl: feedbackUrl
   }, void 0);
@@ -14648,4 +14652,4 @@ function GoADivider(props) {
   }, void 0);
 }
 
-export { GoAAppFooter, GoAAppFooterMetaSection, GoAAppFooterNavSection, GoAAppHeader, GoABadge, GoAButton, GoAButtonGroup, GoACallout, GoACheckbox, GoAChip, GoACircularProgress, GoAContainer, GoADivider, GoADropdown, GoADropdownOption, GoAEmergencyBadge, GoAFlexCol, GoAFlexRow, GoAFormItem, GoAHeroBanner, GoAHeroBannerActions, GoAIcon, GoAIconButton, GoAInfoBadge, GoAInput, GoAInputDate, GoAInputDateTime, GoAInputEmail, GoAInputFile, GoAInputMonth, GoAInputNumber, GoAInputPassword, GoAInputRange, GoAInputSearch, GoAInputTel, GoAInputText, GoAInputTime, GoAInputUrl, GoAMicrositeHeader, GoAModal, GoANotification, GoAPage, GoAPageBlock, GoARadioGroup, GoARadioItem, GoASkeleton, GoASpinner, GoASuccessBadge, GoATextArea, GoAWarningBadge };
+export { GoAAppFooter, GoAAppFooterMetaSection, GoAAppFooterNavSection, GoAAppHeader, GoABadge, GoAButton, GoAButtonGroup, GoACallout, GoACheckbox, GoAChip, GoACircularProgress, GoAContainer, GoADivider, GoADropdown, GoADropdownOption, GoAEmergencyBadge, GoAFlexCol, GoAFlexRow, GoAFormItem, GoAHeroBanner, GoAHeroBannerActions, GoAIcon, GoAIconButton, GoAImportantBadge, GoAInfoBadge, GoAInput, GoAInputDate, GoAInputDateTime, GoAInputEmail, GoAInputFile, GoAInputMonth, GoAInputNumber, GoAInputPassword, GoAInputRange, GoAInputSearch, GoAInputTel, GoAInputText, GoAInputTime, GoAInputUrl, GoAMicrositeHeader, GoAModal, GoANotification, GoAPage, GoAPageBlock, GoARadioGroup, GoARadioItem, GoASkeleton, GoASpinner, GoASuccessBadge, GoATextArea };

package/react-components.umd.js

@@ -1730,7 +1730,7 @@
 	    1) {
 	      $$invalidate(4, iconType = {
 	        success: "checkmark-circle",
-	        warning: "alert-circle",
+	        important: "alert-circle",
 	        information: "information-circle",
 	        emergency: "warning",
 	        dark: "information-circle",
@@ -1746,7 +1746,7 @@
 	class Badge extends SvelteElement {
 	  constructor(options) {
 	    super();
-	    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.goa-badge{display:inline-flex;align-items:center;border-radius:0.25rem;padding:3px 0.5rem;gap:0.25rem;font-weight:var(--fw-regular);margin:0.25rem}.icon-only{padding:0.25rem}.goa-badge-content{text-transform:capitalize;font-size:var(--fs-sm);line-height:var(--lh-sm);padding-bottom:var(--font-valign-fix)}.goa-badge.badge-information{background-color:var(--color-gray-100);color:var(--goa-color-status-info)}.goa-badge.badge-success{background-color:var(--goa-color-status-success);color:var(--goa-color-text-light)}.goa-badge.badge-warning{background-color:var(--goa-color-status-warning);color:var(--goa-color-text)}.goa-badge.badge-emergency{background-color:var(--goa-color-status-emergency);color:var(--goa-color-text-light)}.goa-badge.badge-dark{background-color:var(--color-black);color:var(--goa-color-text-light)}.goa-badge.badge-midtone{background-color:var(--color-gray-600);color:var(--goa-color-text-light)}.goa-badge.badge-light{background-color:var(--color-white);color:var(--goa-color-text)}</style>`;
+	    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.goa-badge{display:inline-flex;align-items:center;border-radius:0.25rem;padding:3px 0.5rem;gap:0.25rem;font-weight:var(--fw-regular);margin:0.25rem}.icon-only{padding:0.25rem}.goa-badge-content{text-transform:capitalize;font-size:var(--fs-sm);line-height:var(--lh-sm);padding-bottom:var(--font-valign-fix)}.goa-badge.badge-information{background-color:var(--color-gray-100);color:var(--goa-color-status-info)}.goa-badge.badge-success{background-color:var(--goa-color-status-success);color:var(--goa-color-text-light)}.goa-badge.badge-important{background-color:var(--goa-color-status-warning);color:var(--goa-color-text)}.goa-badge.badge-emergency{background-color:var(--goa-color-status-emergency);color:var(--goa-color-text-light)}.goa-badge.badge-dark{background-color:var(--color-black);color:var(--goa-color-text-light)}.goa-badge.badge-midtone{background-color:var(--color-gray-600);color:var(--goa-color-text-light)}.goa-badge.badge-light{background-color:var(--color-white);color:var(--goa-color-text)}</style>`;
 	    init(this, {
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
@@ -10003,7 +10003,7 @@
 	      div1 = element("div");
 	      div1.innerHTML = `An official site of the <a href="https://www.alberta.ca/index.aspx">Alberta Government</a>`;
 	      attr(div0, "class", "service-level service-level--live");
-	      attr(div1, "data-testid", "level");
+	      attr(div1, "data-testid", "type");
 	      attr(div1, "class", "site-text");
 	    },
 
@@ -10020,13 +10020,13 @@
 	    }
 
 	  };
-	} // (34:2) {#if ["alpha", "beta"].includes(level)}
+	} // (34:2) {#if ["alpha", "beta"].includes(type)}
 
 
 	function create_if_block_1$3(ctx) {
 	  let div0;
 	  let t0_value = capitalize(
-	  /*level*/
+	  /*type*/
 	  ctx[0]) + "";
 	  let t0;
 	  let div0_class_value;
@@ -10049,9 +10049,9 @@
 	      a.textContent = "Alberta Government";
 	      t4 = text(" service\n      ");
 	      if (if_block) if_block.c();
-	      attr(div0, "data-testid", "level");
+	      attr(div0, "data-testid", "type");
 	      attr(div0, "class", div0_class_value = "service-level service-level--" +
-	      /*level*/
+	      /*type*/
 	      ctx[0].toLowerCase());
 	      attr(a, "href", "https://www.alberta.ca/index.aspx");
 	      attr(div1, "data-testid", "site-text");
@@ -10071,15 +10071,15 @@
 
 	    p(ctx, dirty) {
 	      if (dirty &
-	      /*level*/
+	      /*type*/
 	      1 && t0_value !== (t0_value = capitalize(
-	      /*level*/
+	      /*type*/
 	      ctx[0]) + "")) set_data(t0, t0_value);
 
 	      if (dirty &
-	      /*level*/
+	      /*type*/
 	      1 && div0_class_value !== (div0_class_value = "service-level service-level--" +
-	      /*level*/
+	      /*type*/
 	      ctx[0].toLowerCase())) {
 	        attr(div0, "class", div0_class_value);
 	      }
@@ -10190,13 +10190,13 @@
 	  let header;
 	  let t0;
 	  let show_if = ["alpha", "beta"].includes(
-	  /*level*/
+	  /*type*/
 	  ctx[0]);
 	  let t1;
 	  let div;
 	  let t2;
 	  let if_block0 =
-	  /*level*/
+	  /*type*/
 	  ctx[0] === "live" && create_if_block_3();
 	  let if_block1 = show_if && create_if_block_1$3(ctx);
 	  let if_block2 =
@@ -10230,7 +10230,7 @@
 
 	    p(ctx, [dirty]) {
 	      if (
-	      /*level*/
+	      /*type*/
 	      ctx[0] === "live") {
 	        if (if_block0) ;else {
 	          if_block0 = create_if_block_3();
@@ -10243,9 +10243,9 @@
 	      }
 
 	      if (dirty &
-	      /*level*/
+	      /*type*/
 	      1) show_if = ["alpha", "beta"].includes(
-	      /*level*/
+	      /*type*/
 	      ctx[0]);
 
 	      if (show_if) {
@@ -10297,7 +10297,7 @@
 
 	function instance$a($$self, $$props, $$invalidate) {
 	  let {
-	    level
+	    type
 	  } = $$props;
 	  let {
 	    version
@@ -10307,24 +10307,24 @@
 	  } = $$props;
 
 	  $$self.$$set = $$props => {
-	    if ('level' in $$props) $$invalidate(0, level = $$props.level);
+	    if ('type' in $$props) $$invalidate(0, type = $$props.type);
 	    if ('version' in $$props) $$invalidate(1, version = $$props.version);
 	    if ('feedbackurl' in $$props) $$invalidate(2, feedbackurl = $$props.feedbackurl);
 	  };
 
-	  return [level, version, feedbackurl];
+	  return [type, version, feedbackurl];
 	}
 
 	class MicrositeHeader extends SvelteElement {
 	  constructor(options) {
 	    super();
-	    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}a{color:var(--goa-color-interactive);cursor:pointer}a:hover{color:var(--goa-color-interactive--hover)}a:focus{outline-width:thin;outline-style:solid;outline-color:var(--goa-color-interactive--hover);outline-offset:0px}.goa-official-site-header{display:flex;font-size:var(--fs-sm);background-color:var(--color-gray-100);align-items:center;justify-content:space-between;padding:0.5rem 1.5rem}@media(max-width: 640px){.goa-official-site-header{padding:0.5rem 1rem;align-items:start}}.spacer{flex:1 1 auto}.version{color:var(--goa-color-text-secondary);padding-left:1rem;line-height:1.25rem}.service-level{font-weight:bold;padding:0.25rem;display:flex;margin-right:1rem;line-height:initial}.service-level--alpha{background-color:var(--goa-color-status-warning);color:var(--goa-color-text)}.service-level--beta{background-color:var(--goa-color-brand);color:var(--goa-color-text-light)}.service-level--live{padding:0}.site-text{color:var(--goa-color-text);line-height:1.25rem}</style>`;
+	    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}a{color:var(--goa-color-interactive);cursor:pointer}a:hover{color:var(--goa-color-interactive--hover)}a:focus{outline-width:thin;outline-style:solid;outline-color:var(--goa-color-interactive--hover);outline-offset:0px}.goa-official-site-header{display:flex;font-size:var(--fs-sm);background-color:var(--color-gray-100);align-items:center;justify-content:space-between;padding:0.5rem 1.5rem}@media(max-width: 640px){.goa-official-site-header{padding:0.5rem 1rem;align-items:start}}.spacer{flex:1 1 auto}.version{color:var(--goa-color-text-secondary);padding-left:1rem;line-height:1.25rem}.service-type{font-weight:bold;padding:0.25rem;display:flex;margin-right:1rem;line-height:initial}.service-type--alpha{background-color:var(--goa-color-status-warning);color:var(--goa-color-text)}.service-type--beta{background-color:var(--goa-color-brand);color:var(--goa-color-text-light)}.service-type--live{padding:0}.site-text{color:var(--goa-color-text);line-height:1.25rem}</style>`;
 	    init(this, {
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
 	    }, instance$a, create_fragment$c, safe_not_equal, {
-	      level: 0,
+	      type: 0,
 	      version: 1,
 	      feedbackurl: 2
 	    }, null);
@@ -10342,16 +10342,16 @@
 	  }
 
 	  static get observedAttributes() {
-	    return ["level", "version", "feedbackurl"];
+	    return ["type", "version", "feedbackurl"];
 	  }
 
-	  get level() {
+	  get type() {
 	    return this.$$.ctx[0];
 	  }
 
-	  set level(level) {
+	  set type(type) {
 	    this.$$set({
-	      level
+	      type
 	    });
 	    flush();
 	  }
@@ -13813,40 +13813,44 @@
 	};
 	var GoAInfoBadge = function GoAInfoBadge(_a) {
 	  var content = _a.content,
-	      testId = _a.testId;
+	      testId = _a.testId,
+	      icon = _a.icon;
 	  return jsxRuntime.jsx(GoABadge, {
 	    type: "information",
-	    icon: "information-circle",
+	    icon: icon,
 	    content: content,
 	    testId: testId
 	  }, void 0);
 	};
 	var GoASuccessBadge = function GoASuccessBadge(_a) {
 	  var content = _a.content,
-	      testId = _a.testId;
+	      testId = _a.testId,
+	      icon = _a.icon;
 	  return jsxRuntime.jsx(GoABadge, {
 	    type: "success",
-	    icon: "checkmark-circle",
+	    icon: icon,
 	    content: content,
 	    testId: testId
 	  }, void 0);
 	};
-	var GoAWarningBadge = function GoAWarningBadge(_a) {
+	var GoAImportantBadge = function GoAImportantBadge(_a) {
 	  var content = _a.content,
-	      testId = _a.testId;
+	      testId = _a.testId,
+	      icon = _a.icon;
 	  return jsxRuntime.jsx(GoABadge, {
-	    type: "warning",
-	    icon: "warning",
+	    type: "important",
+	    icon: icon,
 	    content: content,
 	    testId: testId
 	  }, void 0);
 	};
 	var GoAEmergencyBadge = function GoAEmergencyBadge(_a) {
 	  var content = _a.content,
-	      testId = _a.testId;
+	      testId = _a.testId,
+	      icon = _a.icon;
 	  return jsxRuntime.jsx(GoABadge, {
 	    type: "emergency",
-	    icon: "alert-circle",
+	    icon: icon,
 	    content: content,
 	    testId: testId
 	  }, void 0);
@@ -14430,11 +14434,11 @@
 	};
 
 	var GoAMicrositeHeader = function GoAMicrositeHeader(_a) {
-	  var level = _a.level,
+	  var type = _a.type,
 	      version = _a.version,
 	      feedbackUrl = _a.feedbackUrl;
 	  return jsxRuntime.jsx("goa-microsite-header", {
-	    level: level,
+	    type: type,
 	    version: version,
 	    feedbackurl: feedbackUrl
 	  }, void 0);
@@ -14716,6 +14720,7 @@
 	exports.GoAHeroBannerActions = GoAHeroBannerActions;
 	exports.GoAIcon = GoAIcon;
 	exports.GoAIconButton = GoAIconButton;
+	exports.GoAImportantBadge = GoAImportantBadge;
 	exports.GoAInfoBadge = GoAInfoBadge;
 	exports.GoAInput = GoAInput;
 	exports.GoAInputDate = GoAInputDate;
@@ -14742,7 +14747,6 @@
 	exports.GoASpinner = GoASpinner;
 	exports.GoASuccessBadge = GoASuccessBadge;
 	exports.GoATextArea = GoATextArea;
-	exports.GoAWarningBadge = GoAWarningBadge;
 
 	Object.defineProperty(exports, '__esModule', { value: true });