@abgov/react-components 4.0.0-alpha.65 → 4.0.0-alpha.67

package/lib/container/container.d.ts

@@ -1,5 +1,5 @@
 import React, { FC, ReactNode } from 'react';
-declare type ContainerType = 'interactive' | 'non-interactive' | 'info' | 'error' | 'success' | 'warning';
+declare type ContainerType = 'interactive' | 'non-interactive' | 'info' | 'error' | 'success' | 'important';
 declare type Accent = 'thick' | 'thin' | 'filled';
 declare type ContainerPadding = "relaxed" | "compact";
 interface WCProps {

package/package.json

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

package/react-components.esm.js

@@ -1162,7 +1162,7 @@ function create_fragment$F(ctx) {
       ctx[2]);
       attr(div2, "style", div2_style_value = `--max-content-width: ${
       /*maxcontentwidth*/
-      ctx[3] || "var(--layout-max-content-width)"}`);
+      ctx[3] || "100%"}`);
     },
 
     m(target, anchor) {
@@ -1198,7 +1198,7 @@ function create_fragment$F(ctx) {
       /*maxcontentwidth*/
       8 && div2_style_value !== (div2_style_value = `--max-content-width: ${
       /*maxcontentwidth*/
-      ctx[3] || "var(--layout-max-content-width)"}`)) {
+      ctx[3] || "100%"}`)) {
         attr(div2, "style", div2_style_value);
       }
     },
@@ -6976,7 +6976,7 @@ function create_fragment$k(ctx) {
       attr(div5, "class", "app-footer");
       attr(div5, "style", div5_style_value = `--max-content-width: ${
       /*maxcontentwidth*/
-      ctx[0] || "var(--layout-max-content-width)"}`);
+      ctx[0] || "100%"}`);
     },
 
     m(target, anchor) {
@@ -7038,7 +7038,7 @@ function create_fragment$k(ctx) {
       /*maxcontentwidth*/
       1 && div5_style_value !== (div5_style_value = `--max-content-width: ${
       /*maxcontentwidth*/
-      ctx[0] || "var(--layout-max-content-width)"}`)) {
+      ctx[0] || "100%"}`)) {
         attr(div5, "style", div5_style_value);
       }
     },
@@ -7090,7 +7090,7 @@ function instance$i($$self, $$props, $$invalidate) {
 class Footer extends SvelteElement {
   constructor(options) {
     super();
-    this.shadowRoot.innerHTML = `<style>*{box-sizing:border-box}.app-footer{background-color:var(--color-gray-100);border-top:2px solid var(--color-gray-200);border-bottom:1rem solid var(--goa-color-brand)}.content{padding:2rem 1rem;margin:0 auto;width:min(var(--max-content-width), 100vw)}@media(min-width: 640px){.content{padding:2rem 1.5rem}}.meta-section{display:flex;flex-direction:column;padding:1rem 0}.meta-section.with-meta-links{gap:2rem;justify-content:space-between}.meta-links{display:none}.with-meta-links .meta-links{display:block}.nav-links{display:flex;flex-direction:column;gap:2rem}.abgov{display:flex;flex-direction:column;justify-content:space-between;width:100%}@media(min-width: 640px){.meta-section{flex-direction:row;gap:2rem}.nav-links{flex-direction:row}.abgov{align-items:center;flex-direction:row-reverse}}.abgov.with-meta-links{gap:1rem;flex-direction:column;width:unset}@media(min-width: 640px){.abgov.with-meta-links{align-items:flex-end}}.goa-copyright{white-space:nowrap}a{color:var(--goa-color-text-secondary)}</style>`;
+    this.shadowRoot.innerHTML = `<style>*{box-sizing:border-box}.app-footer{background-color:var(--color-gray-100);border-top:2px solid var(--color-gray-200);border-bottom:1rem solid var(--goa-color-brand)}.content{padding:2rem 1rem;margin:0 auto;width:min(var(--max-content-width), 100%)}@media(min-width: 640px){.content{padding:2rem 1.5rem}}.meta-section{display:flex;flex-direction:column;padding:1rem 0}.meta-section.with-meta-links{gap:2rem;justify-content:space-between}.meta-links{display:none}.with-meta-links .meta-links{display:block}.nav-links{display:flex;flex-direction:column;gap:2rem}.abgov{display:flex;flex-direction:column;justify-content:space-between;width:100%}@media(min-width: 640px){.meta-section{flex-direction:row;gap:2rem}.nav-links{flex-direction:row}.abgov{align-items:center;flex-direction:row-reverse}}.abgov.with-meta-links{gap:1rem;flex-direction:column;width:unset}@media(min-width: 640px){.abgov.with-meta-links{align-items:flex-end}}.goa-copyright{white-space:nowrap}a{color:var(--goa-color-text-secondary)}</style>`;
     init(this, {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
@@ -10225,7 +10225,7 @@ function create_if_block$5(ctx) {
     }
 
   };
-} // (58:8) {#if heading}
+} // (55:8) {#if heading}
 
 
 function create_if_block_3(ctx) {
@@ -10259,7 +10259,7 @@ function create_if_block_3(ctx) {
     }
 
   };
-} // (61:8) {#if isClosable}
+} // (58:8) {#if isClosable}
 
 
 function create_if_block_2$2(ctx) {
@@ -10297,7 +10297,7 @@ function create_if_block_2$2(ctx) {
     }
 
   };
-} // (75:10) {:else}
+} // (72:10) {:else}
 
 
 function create_else_block$1(ctx) {
@@ -10318,7 +10318,7 @@ function create_else_block$1(ctx) {
     }
 
   };
-} // (71:10) {#if isScrollable}
+} // (68:10) {#if isScrollable}
 
 
 function create_if_block_1$3(ctx) {
@@ -10433,9 +10433,6 @@ function instance$b($$self, $$props, $$invalidate) {
   let {
     width
   } = $$props;
-  onMount(() => {
-    console.log("in the modal v2");
-  });
 
   function close(e) {
     if (!isClosable) {
@@ -13629,7 +13626,7 @@ function create_fragment$3(ctx) {
       attr(div, "style", div_style_value = `
     --max-content-width: ${
       /*maxcontentwidth*/
-      ctx[1] || "var(--layout-max-content-width)"};
+      ctx[1] || "100%"};
     --nav-column-width: ${
       /*navcolumnwidth*/
       ctx[0] || "var(--layout-nav-column-width)"};
@@ -13651,7 +13648,7 @@ function create_fragment$3(ctx) {
       3 && div_style_value !== (div_style_value = `
     --max-content-width: ${
       /*maxcontentwidth*/
-      ctx[1] || "var(--layout-max-content-width)"};
+      ctx[1] || "100%"};
     --nav-column-width: ${
       /*navcolumnwidth*/
       ctx[0] || "var(--layout-nav-column-width)"};

package/react-components.umd.js

@@ -1203,7 +1203,7 @@
 	      ctx[2]);
 	      attr(div2, "style", div2_style_value = `--max-content-width: ${
       /*maxcontentwidth*/
-      ctx[3] || "var(--layout-max-content-width)"}`);
+      ctx[3] || "100%"}`);
 	    },
 
 	    m(target, anchor) {
@@ -1239,7 +1239,7 @@
 	      /*maxcontentwidth*/
 	      8 && div2_style_value !== (div2_style_value = `--max-content-width: ${
       /*maxcontentwidth*/
-      ctx[3] || "var(--layout-max-content-width)"}`)) {
+      ctx[3] || "100%"}`)) {
 	        attr(div2, "style", div2_style_value);
 	      }
 	    },
@@ -7022,7 +7022,7 @@
 	      attr(div5, "class", "app-footer");
 	      attr(div5, "style", div5_style_value = `--max-content-width: ${
       /*maxcontentwidth*/
-      ctx[0] || "var(--layout-max-content-width)"}`);
+      ctx[0] || "100%"}`);
 	    },
 
 	    m(target, anchor) {
@@ -7084,7 +7084,7 @@
 	      /*maxcontentwidth*/
 	      1 && div5_style_value !== (div5_style_value = `--max-content-width: ${
       /*maxcontentwidth*/
-      ctx[0] || "var(--layout-max-content-width)"}`)) {
+      ctx[0] || "100%"}`)) {
 	        attr(div5, "style", div5_style_value);
 	      }
 	    },
@@ -7137,7 +7137,7 @@
 	class Footer extends SvelteElement {
 	  constructor(options) {
 	    super();
-	    this.shadowRoot.innerHTML = `<style>*{box-sizing:border-box}.app-footer{background-color:var(--color-gray-100);border-top:2px solid var(--color-gray-200);border-bottom:1rem solid var(--goa-color-brand)}.content{padding:2rem 1rem;margin:0 auto;width:min(var(--max-content-width), 100vw)}@media(min-width: 640px){.content{padding:2rem 1.5rem}}.meta-section{display:flex;flex-direction:column;padding:1rem 0}.meta-section.with-meta-links{gap:2rem;justify-content:space-between}.meta-links{display:none}.with-meta-links .meta-links{display:block}.nav-links{display:flex;flex-direction:column;gap:2rem}.abgov{display:flex;flex-direction:column;justify-content:space-between;width:100%}@media(min-width: 640px){.meta-section{flex-direction:row;gap:2rem}.nav-links{flex-direction:row}.abgov{align-items:center;flex-direction:row-reverse}}.abgov.with-meta-links{gap:1rem;flex-direction:column;width:unset}@media(min-width: 640px){.abgov.with-meta-links{align-items:flex-end}}.goa-copyright{white-space:nowrap}a{color:var(--goa-color-text-secondary)}</style>`;
+	    this.shadowRoot.innerHTML = `<style>*{box-sizing:border-box}.app-footer{background-color:var(--color-gray-100);border-top:2px solid var(--color-gray-200);border-bottom:1rem solid var(--goa-color-brand)}.content{padding:2rem 1rem;margin:0 auto;width:min(var(--max-content-width), 100%)}@media(min-width: 640px){.content{padding:2rem 1.5rem}}.meta-section{display:flex;flex-direction:column;padding:1rem 0}.meta-section.with-meta-links{gap:2rem;justify-content:space-between}.meta-links{display:none}.with-meta-links .meta-links{display:block}.nav-links{display:flex;flex-direction:column;gap:2rem}.abgov{display:flex;flex-direction:column;justify-content:space-between;width:100%}@media(min-width: 640px){.meta-section{flex-direction:row;gap:2rem}.nav-links{flex-direction:row}.abgov{align-items:center;flex-direction:row-reverse}}.abgov.with-meta-links{gap:1rem;flex-direction:column;width:unset}@media(min-width: 640px){.abgov.with-meta-links{align-items:flex-end}}.goa-copyright{white-space:nowrap}a{color:var(--goa-color-text-secondary)}</style>`;
 	    init(this, {
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
@@ -10272,7 +10272,7 @@
 	    }
 
 	  };
-	} // (58:8) {#if heading}
+	} // (55:8) {#if heading}
 
 
 	function create_if_block_3(ctx) {
@@ -10306,7 +10306,7 @@
 	    }
 
 	  };
-	} // (61:8) {#if isClosable}
+	} // (58:8) {#if isClosable}
 
 
 	function create_if_block_2$2(ctx) {
@@ -10344,7 +10344,7 @@
 	    }
 
 	  };
-	} // (75:10) {:else}
+	} // (72:10) {:else}
 
 
 	function create_else_block$1(ctx) {
@@ -10365,7 +10365,7 @@
 	    }
 
 	  };
-	} // (71:10) {#if isScrollable}
+	} // (68:10) {#if isScrollable}
 
 
 	function create_if_block_1$3(ctx) {
@@ -10480,9 +10480,6 @@
 	  let {
 	    width
 	  } = $$props;
-	  onMount(() => {
-	    console.log("in the modal v2");
-	  });
 
 	  function close(e) {
 	    if (!isClosable) {
@@ -13678,7 +13675,7 @@
 	      attr(div, "style", div_style_value = `
     --max-content-width: ${
       /*maxcontentwidth*/
-      ctx[1] || "var(--layout-max-content-width)"};
+      ctx[1] || "100%"};
     --nav-column-width: ${
       /*navcolumnwidth*/
       ctx[0] || "var(--layout-nav-column-width)"};
@@ -13700,7 +13697,7 @@
 	      3 && div_style_value !== (div_style_value = `
     --max-content-width: ${
       /*maxcontentwidth*/
-      ctx[1] || "var(--layout-max-content-width)"};
+      ctx[1] || "100%"};
     --nav-column-width: ${
       /*navcolumnwidth*/
       ctx[0] || "var(--layout-nav-column-width)"};