@abgov/react-components 4.0.0-alpha.61 → 4.0.0-alpha.63

package/index.d.ts

@@ -26,8 +26,7 @@ export * from './lib/microsite-header/microsite-header';
 export * from './lib/modal/modal';
 export * from './lib/notification/notification';
 export * from './lib/page-block/page-block';
-export * from './lib/page/page';
-export * from './lib/page/page';
+export * from './lib/one-column-layout/one-column-layout';
 export * from './lib/radio-group/radio-group';
 export * from './lib/skeleton/skeleton';
 export * from './lib/spinner/spinner';

package/lib/button/button.d.ts

@@ -27,7 +27,7 @@ declare type ButtonProps = {
     disabled?: boolean;
     leadingIcon?: GoAIconType;
     trailingIcon?: GoAIconType;
-    onClick: (e: any) => void;
+    onClick?: (e: any) => void;
     children?: ReactNode;
 };
 export declare const GoAButton: FC<ButtonProps>;

package/lib/container/container.d.ts

@@ -1,11 +1,10 @@
 import React, { FC, ReactNode } from 'react';
 declare type ContainerType = 'interactive' | 'non-interactive' | 'info' | 'error' | 'success' | 'warning';
-declare type HeadingSize = 'large' | 'small' | 'none';
+declare type Accent = 'thick' | 'thin' | 'filled';
 declare type ContainerPadding = "relaxed" | "compact";
 interface WCProps {
     type?: ContainerType;
-    headingsize?: HeadingSize;
-    colored?: boolean;
+    accent?: Accent;
     padding?: ContainerPadding;
 }
 declare global {
@@ -16,10 +15,9 @@ declare global {
     }
 }
 interface Props {
-    headingSize?: HeadingSize;
+    accent?: Accent;
     type?: ContainerType;
     title?: ReactNode;
-    colored?: boolean;
     padding?: ContainerPadding;
     actions?: ReactNode;
     children?: ReactNode;

package/lib/one-column-layout/one-column-layout.d.ts

@@ -0,0 +1,13 @@
+import React, { ReactNode } from "react";
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'goa-one-column-layout': React.HTMLAttributes<HTMLElement>;
+        }
+    }
+}
+export interface PageProps {
+    children?: ReactNode;
+}
+export declare function GoAOneColumnLayout(props: PageProps): JSX.Element;
+export default GoAOneColumnLayout;

package/package.json

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

package/react-components.esm.js

@@ -4513,7 +4513,7 @@ function create_fragment$s(ctx) {
       attr(div0, "class", "title");
       attr(div1, "class", "actions");
       attr(header, "class", header_class_value = "heading--" +
-      /*headingsize*/
+      /*accent*/
       ctx[1]);
       attr(div2, "class", "content");
       attr(div3, "class", div3_class_value = `
@@ -4524,10 +4524,10 @@ function create_fragment$s(ctx) {
     padding--${
       /*padding*/
       ctx[2]}
+    accent--${
+      /*accent*/
+      ctx[1]}
   `);
-      toggle_class(div3, "colored",
-      /*_colored*/
-      ctx[3]);
     },
 
     m(target, anchor) {
@@ -4542,16 +4542,16 @@ function create_fragment$s(ctx) {
 
     p(ctx, [dirty]) {
       if (dirty &
-      /*headingsize*/
+      /*accent*/
       2 && header_class_value !== (header_class_value = "heading--" +
-      /*headingsize*/
+      /*accent*/
       ctx[1])) {
         attr(header, "class", header_class_value);
       }
 
       if (dirty &
-      /*type, padding*/
-      5 && div3_class_value !== (div3_class_value = `
+      /*type, padding, accent*/
+      7 && div3_class_value !== (div3_class_value = `
     goa-container
     goa-container--${
       /*type*/
@@ -4559,17 +4559,12 @@ function create_fragment$s(ctx) {
     padding--${
       /*padding*/
       ctx[2]}
+    accent--${
+      /*accent*/
+      ctx[1]}
   `)) {
         attr(div3, "class", div3_class_value);
       }
-
-      if (dirty &
-      /*type, padding, _colored*/
-      13) {
-        toggle_class(div3, "colored",
-        /*_colored*/
-        ctx[3]);
-      }
     },
 
     i: noop,
@@ -4583,16 +4578,11 @@ function create_fragment$s(ctx) {
 }
 
 function instance$q($$self, $$props, $$invalidate) {
-  let _colored;
-
   let {
-    type = 'non-interactive'
+    type = 'interactive'
   } = $$props;
   let {
-    colored = "false"
-  } = $$props;
-  let {
-    headingsize = 'large'
+    accent = 'filled'
   } = $$props;
   let {
     padding = "relaxed"
@@ -4600,34 +4590,24 @@ function instance$q($$self, $$props, $$invalidate) {
 
   $$self.$$set = $$props => {
     if ('type' in $$props) $$invalidate(0, type = $$props.type);
-    if ('colored' in $$props) $$invalidate(4, colored = $$props.colored);
-    if ('headingsize' in $$props) $$invalidate(1, headingsize = $$props.headingsize);
+    if ('accent' in $$props) $$invalidate(1, accent = $$props.accent);
     if ('padding' in $$props) $$invalidate(2, padding = $$props.padding);
   };
 
-  $$self.$$.update = () => {
-    if ($$self.$$.dirty &
-    /*colored*/
-    16) {
-      $$invalidate(3, _colored = toBoolean(colored));
-    }
-  };
-
-  return [type, headingsize, padding, _colored, colored];
+  return [type, accent, padding];
 }
 
 class Container extends SvelteElement {
   constructor(options) {
     super();
-    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family);font-size:var(--fs-base)}.goa-container{margin-bottom:1rem;box-sizing:border-box}.goa-container *{box-sizing:border-box}header{display:flex;align-items:center;justify-content:space-between;font-weight:700;font-size:var(--fs-base);border-width:1px;border-style:solid;border-top-left-radius:var(--border-radius);border-top-right-radius:var(--border-radius)}.content{border-bottom:1px solid var(--color-gray-200);border-left:1px solid var(--color-gray-200);border-right:1px solid var(--color-gray-200);border-bottom-left-radius:var(--border-radius);border-bottom-right-radius:var(--border-radius)}.goa-container--non-interactive.colored .content{border-color:var(--color-gray-200);background-color:var(--color-gray-100)}.goa-container--important.colored .content{border-color:var(--goa-color-status-warning);background-color:var(--goa-color-status-warning-50)}.goa-container--error.colored .content{border-color:var(--goa-color-status-emergency);background-color:var(--goa-color-status-emergency-50)}.goa-container--success.colored .content{border-color:var(--goa-color-status-success);background-color:var(--goa-color-status-success-50)}.goa-container--info.colored .content{border-color:var(--goa-color-status-info);background-color:var(--goa-color-status-info-50)}.title,.actions{padding:0.5rem 0}.padding--relaxed header{padding:0 1.5rem}.padding--relaxed .content{padding:1.5rem}.padding--compact header,.padding--compact .content{padding:0 1rem}.padding--compact header{padding:0 1rem}.padding--compact .content{padding:1rem}@media screen and (max-width: 480px){.padding--relaxed header{padding:0 1rem}.padding--relaxed .content{padding:1rem}}.goa-container--non-interactive header{background-color:var(--color-gray-100);border-color:var(--color-gray-200);color:var(--color-black)}.goa-container--interactive header{background-color:var(--goa-color-brand);border-color:var(--goa-color-brand);color:var(--color-white)}.goa-container--info header{background-color:var(--goa-color-status-info);border-color:var(--goa-color-status-info);color:var(--color-white)}.goa-container--error header{background-color:var(--goa-color-status-emergency);border-color:var(--goa-color-status-emergency);color:var(--color-white)}.goa-container--success header{background-color:var(--goa-color-status-success);border-color:var(--goa-color-status-success);color:var(--color-white)}.goa-container--important header{background-color:var(--goa-color-status-warning);border-color:var(--goa-color-status-warning);color:var(--color-white)}.heading--large{padding:0.5rem 1.5rem;max-height:3rem;min-height:1rem}.heading--large .title{line-height:2rem}.heading--small{height:0.5rem}.heading--none{display:none}.heading--none~.content{border-top:1px solid var(--color-gray-200);border-top-left-radius:var(--border-radius);border-top-right-radius:var(--border-radius)}.heading--small .title,.heading--small .actions{display:none}.actions{display:flex;align-items:center}</style>`;
+    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family);font-size:var(--fs-base)}.goa-container{margin-bottom:1rem;box-sizing:border-box}.goa-container *{box-sizing:border-box}header{display:flex;align-items:center;justify-content:space-between;font-weight:700;font-size:var(--fs-base);border-width:1px;border-style:solid;border-top-left-radius:var(--border-radius);border-top-right-radius:var(--border-radius)}.content{border-bottom:1px solid var(--color-gray-200);border-left:1px solid var(--color-gray-200);border-right:1px solid var(--color-gray-200);border-bottom-left-radius:var(--border-radius);border-bottom-right-radius:var(--border-radius)}.goa-container--non-interactive.accent--filled .content{border-color:var(--color-gray-200);background-color:var(--color-gray-100)}.goa-container--important.accent--filled .content{border-color:var(--goa-color-status-warning);background-color:var(--goa-color-status-warning-50)}.goa-container--error.accent--filled .content{border-color:var(--goa-color-status-emergency);background-color:var(--goa-color-status-emergency-50)}.goa-container--success.accent--filled .content{border-color:var(--goa-color-status-success);background-color:var(--goa-color-status-success-50)}.goa-container--info.accent--filled .content{border-color:var(--goa-color-status-info);background-color:var(--goa-color-status-info-50)}.title,.actions{padding:0.5rem 0}.padding--relaxed header{padding:0 1.5rem}.padding--relaxed .content{padding:1.5rem}.padding--compact header,.padding--compact .content{padding:0 1rem}.padding--compact header{padding:0 1rem}.padding--compact .content{padding:1rem}@media screen and (max-width: 480px){.padding--relaxed header{padding:0 1rem}.padding--relaxed .content{padding:1rem}}.goa-container--non-interactive header{background-color:var(--color-gray-100);border-color:var(--color-gray-200);color:var(--color-black)}.goa-container--interactive header{background-color:var(--goa-color-brand);border-color:var(--goa-color-brand);color:var(--color-white)}.goa-container--info header{background-color:var(--goa-color-status-info);border-color:var(--goa-color-status-info);color:var(--color-white)}.goa-container--error header{background-color:var(--goa-color-status-emergency);border-color:var(--goa-color-status-emergency);color:var(--color-white)}.goa-container--success header{background-color:var(--goa-color-status-success);border-color:var(--goa-color-status-success);color:var(--color-white)}.goa-container--important header{background-color:var(--goa-color-status-warning);border-color:var(--goa-color-status-warning);color:var(--color-white)}.heading--thick{padding:0.5rem 1.5rem;max-height:3rem;min-height:1rem}.heading--thick .title{line-height:2rem}.heading--thin{height:0.5rem}.heading--filled{display:none}.heading--filled~.content{border-top:1px solid var(--color-gray-200);border-top-left-radius:var(--border-radius);border-top-right-radius:var(--border-radius)}.heading--thin .title,.heading--thin .actions{display:none}.actions{display:flex;align-items:center}</style>`;
     init(this, {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
     }, instance$q, create_fragment$s, safe_not_equal, {
       type: 0,
-      colored: 4,
-      headingsize: 1,
+      accent: 1,
       padding: 2
     }, null);
 
@@ -4644,7 +4624,7 @@ class Container extends SvelteElement {
   }
 
   static get observedAttributes() {
-    return ["type", "colored", "headingsize", "padding"];
+    return ["type", "accent", "padding"];
   }
 
   get type() {
@@ -4658,24 +4638,13 @@ class Container extends SvelteElement {
     flush();
   }
 
-  get colored() {
-    return this.$$.ctx[4];
-  }
-
-  set colored(colored) {
-    this.$$set({
-      colored
-    });
-    flush();
-  }
-
-  get headingsize() {
+  get accent() {
     return this.$$.ctx[1];
   }
 
-  set headingsize(headingsize) {
+  set accent(accent) {
     this.$$set({
-      headingsize
+      accent
     });
     flush();
   }
@@ -5316,7 +5285,7 @@ function create_fragment$r(ctx) {
   };
 }
 
-const MAX_HEIGHT = "300px";
+const MAX_HEIGHT = "276px";
 
 function instance$p($$self, $$props, $$invalidate) {
   let _disabled;
@@ -13551,9 +13520,60 @@ class TextArea extends SvelteElement {
 }
 
 customElements.define("goa-textarea", TextArea);
-/* libs/web-components/src/layouts/two-column-layout/TwoColumnLayout.svelte generated by Svelte v3.49.0 */
+/* libs/web-components/src/layouts/one-column-layout/OneColumnLayout.svelte generated by Svelte v3.49.0 */
 
 function create_fragment$4(ctx) {
+  let div;
+  return {
+    c() {
+      div = element("div");
+      div.innerHTML = `<section class="header"><slot name="header"></slot></section> 
+
+  <main><slot></slot></main> 
+
+  <section class="footer"><slot name="footer"></slot></section>`;
+      this.c = noop;
+      attr(div, "class", "page");
+    },
+
+    m(target, anchor) {
+      insert(target, div, anchor);
+    },
+
+    p: noop,
+    i: noop,
+    o: noop,
+
+    d(detaching) {
+      if (detaching) detach(div);
+    }
+
+  };
+}
+
+class OneColumnLayout extends SvelteElement {
+  constructor(options) {
+    super();
+    this.shadowRoot.innerHTML = `<style>.page{height:100vh;display:flex;flex-direction:column}.header,.footer{flex:0 0 auto}main{flex:1 1 auto}</style>`;
+    init(this, {
+      target: this.shadowRoot,
+      props: attribute_to_object(this.attributes),
+      customElement: true
+    }, null, create_fragment$4, safe_not_equal, {}, null);
+
+    if (options) {
+      if (options.target) {
+        insert(options.target, this, options.anchor);
+      }
+    }
+  }
+
+}
+
+customElements.define("goa-one-column-layout", OneColumnLayout);
+/* libs/web-components/src/layouts/two-column-layout/TwoColumnLayout.svelte generated by Svelte v3.49.0 */
+
+function create_fragment$3(ctx) {
   let div;
   let header;
   let t0;
@@ -13647,7 +13667,7 @@ class TwoColumnLayout extends SvelteElement {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$2, create_fragment$4, safe_not_equal, {
+    }, instance$2, create_fragment$3, safe_not_equal, {
       navcolumnwidth: 0,
       maxcontentwidth: 1
     }, null);
@@ -13695,7 +13715,7 @@ class TwoColumnLayout extends SvelteElement {
 customElements.define("goa-two-column-layout", TwoColumnLayout);
 /* libs/web-components/src/layouts/FullScreenNavbarLayout.svelte generated by Svelte v3.49.0 */
 
-function create_fragment$3(ctx) {
+function create_fragment$2(ctx) {
   let div;
   return {
     c() {
@@ -13739,7 +13759,7 @@ class FullScreenNavbarLayout extends SvelteElement {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, null, create_fragment$3, safe_not_equal, {}, null);
+    }, null, create_fragment$2, safe_not_equal, {}, null);
 
     if (options) {
       if (options.target) {
@@ -13818,7 +13838,7 @@ function create_if_block(ctx) {
   };
 }
 
-function create_fragment$2(ctx) {
+function create_fragment$1(ctx) {
   let goa_container;
   let t0;
   let t1;
@@ -13843,8 +13863,8 @@ function create_fragment$2(ctx) {
       set_custom_element_data(goa_container, "type",
       /*type*/
       ctx[3]);
-      set_custom_element_data(goa_container, "headingsize",
-      /*headingsize*/
+      set_custom_element_data(goa_container, "accent",
+      /*accent*/
       ctx[4]);
     },
 
@@ -13906,10 +13926,10 @@ function create_fragment$2(ctx) {
       }
 
       if (dirty &
-      /*headingsize*/
+      /*accent*/
       16) {
-        set_custom_element_data(goa_container, "headingsize",
-        /*headingsize*/
+        set_custom_element_data(goa_container, "accent",
+        /*accent*/
         ctx[4]);
       }
     },
@@ -13940,7 +13960,7 @@ function instance$1($$self, $$props, $$invalidate) {
     type = "default"
   } = $$props;
   let {
-    headingsize = "large"
+    accent = "thick"
   } = $$props;
 
   $$self.$$set = $$props => {
@@ -13948,10 +13968,10 @@ function instance$1($$self, $$props, $$invalidate) {
     if ('actions' in $$props) $$invalidate(1, actions = $$props.actions);
     if ('content' in $$props) $$invalidate(2, content = $$props.content);
     if ('type' in $$props) $$invalidate(3, type = $$props.type);
-    if ('headingsize' in $$props) $$invalidate(4, headingsize = $$props.headingsize);
+    if ('accent' in $$props) $$invalidate(4, accent = $$props.accent);
   };
 
-  return [title, actions, content, type, headingsize];
+  return [title, actions, content, type, accent];
 }
 
 class ContainerWrapper_test extends SvelteElement {
@@ -13961,12 +13981,12 @@ class ContainerWrapper_test extends SvelteElement {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$1, create_fragment$2, safe_not_equal, {
+    }, instance$1, create_fragment$1, safe_not_equal, {
       title: 0,
       actions: 1,
       content: 2,
       type: 3,
-      headingsize: 4
+      accent: 4
     }, null);
 
     if (options) {
@@ -13982,7 +14002,7 @@ class ContainerWrapper_test extends SvelteElement {
   }
 
   static get observedAttributes() {
-    return ["title", "actions", "content", "type", "headingsize"];
+    return ["title", "actions", "content", "type", "accent"];
   }
 
   get title() {
@@ -14029,13 +14049,13 @@ class ContainerWrapper_test extends SvelteElement {
     flush();
   }
 
-  get headingsize() {
+  get accent() {
     return this.$$.ctx[4];
   }
 
-  set headingsize(headingsize) {
+  set accent(accent) {
     this.$$set({
-      headingsize
+      accent
     });
     flush();
   }
@@ -14045,7 +14065,7 @@ class ContainerWrapper_test extends SvelteElement {
 customElements.define("test-container", ContainerWrapper_test);
 /* libs/web-components/src/components/divider/Divider.svelte generated by Svelte v3.49.0 */
 
-function create_fragment$1(ctx) {
+function create_fragment(ctx) {
   let hr;
   return {
     c() {
@@ -14125,7 +14145,7 @@ class Divider extends SvelteElement {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance, create_fragment$1, safe_not_equal, {
+    }, instance, create_fragment, safe_not_equal, {
       spacing: 1
     }, null);
 
@@ -14159,57 +14179,6 @@ class Divider extends SvelteElement {
 }
 
 customElements.define("goa-divider", Divider);
-/* libs/web-components/src/components/page/Page.svelte generated by Svelte v3.49.0 */
-
-function create_fragment(ctx) {
-  let div;
-  return {
-    c() {
-      div = element("div");
-      div.innerHTML = `<section class="header"><slot name="header"></slot></section> 
-
-  <main><slot></slot></main> 
-
-  <section class="footer"><slot name="footer"></slot></section>`;
-      this.c = noop;
-      attr(div, "class", "page");
-    },
-
-    m(target, anchor) {
-      insert(target, div, anchor);
-    },
-
-    p: noop,
-    i: noop,
-    o: noop,
-
-    d(detaching) {
-      if (detaching) detach(div);
-    }
-
-  };
-}
-
-class Page extends SvelteElement {
-  constructor(options) {
-    super();
-    this.shadowRoot.innerHTML = `<style>.page{height:100vh;display:flex;flex-direction:column}.header,.footer{flex:0 0 auto}main{flex:1 1 auto}</style>`;
-    init(this, {
-      target: this.shadowRoot,
-      props: attribute_to_object(this.attributes),
-      customElement: true
-    }, null, create_fragment, safe_not_equal, {}, null);
-
-    if (options) {
-      if (options.target) {
-        insert(options.target, this, options.anchor);
-      }
-    }
-  }
-
-}
-
-customElements.define("goa-page", Page);
 
 const GoAAppHeader = ({
   heading,
@@ -14348,6 +14317,10 @@ const GoAButton = ({
       return;
     }
 
+    if (!onClick) {
+      return;
+    }
+
     const current = el.current;
 
     const listener = e => {
@@ -14477,9 +14450,8 @@ const GoACircularProgress = ({
 };
 
 const GoAContainer = ({
-  headingSize,
+  accent,
   title,
-  colored: _colored = false,
   padding,
   children,
   actions,
@@ -14488,8 +14460,7 @@ const GoAContainer = ({
   return jsxs("goa-container", Object.assign({
     type: type,
     padding: padding,
-    headingsize: headingSize,
-    colored: _colored
+    accent: accent
   }, {
     children: [title && jsx("div", Object.assign({
       slot: "title"
@@ -15009,8 +14980,8 @@ const GoAPageBlock = props => {
   }), void 0);
 };
 
-function GoAPage(props) {
-  return jsx("goa-page", {
+function GoAOneColumnLayout(props) {
+  return jsx("goa-one-column-layout", {
     children: props.children
   }, void 0);
 }
@@ -15178,4 +15149,4 @@ function GoATwoColumnLayout(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, 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, GoATwoColumnLayout };
+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, GoAOneColumnLayout, GoAPageBlock, GoARadioGroup, GoARadioItem, GoASkeleton, GoASpinner, GoASuccessBadge, GoATextArea, GoATwoColumnLayout };

package/react-components.umd.js

@@ -4555,7 +4555,7 @@
 	      attr(div0, "class", "title");
 	      attr(div1, "class", "actions");
 	      attr(header, "class", header_class_value = "heading--" +
-	      /*headingsize*/
+	      /*accent*/
 	      ctx[1]);
 	      attr(div2, "class", "content");
 	      attr(div3, "class", div3_class_value = `
@@ -4566,10 +4566,10 @@
     padding--${
       /*padding*/
       ctx[2]}
+    accent--${
+      /*accent*/
+      ctx[1]}
   `);
-	      toggle_class(div3, "colored",
-	      /*_colored*/
-	      ctx[3]);
 	    },
 
 	    m(target, anchor) {
@@ -4584,16 +4584,16 @@
 
 	    p(ctx, [dirty]) {
 	      if (dirty &
-	      /*headingsize*/
+	      /*accent*/
 	      2 && header_class_value !== (header_class_value = "heading--" +
-	      /*headingsize*/
+	      /*accent*/
 	      ctx[1])) {
 	        attr(header, "class", header_class_value);
 	      }
 
 	      if (dirty &
-	      /*type, padding*/
-	      5 && div3_class_value !== (div3_class_value = `
+	      /*type, padding, accent*/
+	      7 && div3_class_value !== (div3_class_value = `
     goa-container
     goa-container--${
       /*type*/
@@ -4601,17 +4601,12 @@
     padding--${
       /*padding*/
       ctx[2]}
+    accent--${
+      /*accent*/
+      ctx[1]}
   `)) {
 	        attr(div3, "class", div3_class_value);
 	      }
-
-	      if (dirty &
-	      /*type, padding, _colored*/
-	      13) {
-	        toggle_class(div3, "colored",
-	        /*_colored*/
-	        ctx[3]);
-	      }
 	    },
 
 	    i: noop,
@@ -4625,16 +4620,11 @@
 	}
 
 	function instance$q($$self, $$props, $$invalidate) {
-	  let _colored;
-
 	  let {
-	    type = 'non-interactive'
+	    type = 'interactive'
 	  } = $$props;
 	  let {
-	    colored = "false"
-	  } = $$props;
-	  let {
-	    headingsize = 'large'
+	    accent = 'filled'
 	  } = $$props;
 	  let {
 	    padding = "relaxed"
@@ -4642,34 +4632,24 @@
 
 	  $$self.$$set = $$props => {
 	    if ('type' in $$props) $$invalidate(0, type = $$props.type);
-	    if ('colored' in $$props) $$invalidate(4, colored = $$props.colored);
-	    if ('headingsize' in $$props) $$invalidate(1, headingsize = $$props.headingsize);
+	    if ('accent' in $$props) $$invalidate(1, accent = $$props.accent);
 	    if ('padding' in $$props) $$invalidate(2, padding = $$props.padding);
 	  };
 
-	  $$self.$$.update = () => {
-	    if ($$self.$$.dirty &
-	    /*colored*/
-	    16) {
-	      $$invalidate(3, _colored = toBoolean(colored));
-	    }
-	  };
-
-	  return [type, headingsize, padding, _colored, colored];
+	  return [type, accent, padding];
 	}
 
 	class Container extends SvelteElement {
 	  constructor(options) {
 	    super();
-	    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family);font-size:var(--fs-base)}.goa-container{margin-bottom:1rem;box-sizing:border-box}.goa-container *{box-sizing:border-box}header{display:flex;align-items:center;justify-content:space-between;font-weight:700;font-size:var(--fs-base);border-width:1px;border-style:solid;border-top-left-radius:var(--border-radius);border-top-right-radius:var(--border-radius)}.content{border-bottom:1px solid var(--color-gray-200);border-left:1px solid var(--color-gray-200);border-right:1px solid var(--color-gray-200);border-bottom-left-radius:var(--border-radius);border-bottom-right-radius:var(--border-radius)}.goa-container--non-interactive.colored .content{border-color:var(--color-gray-200);background-color:var(--color-gray-100)}.goa-container--important.colored .content{border-color:var(--goa-color-status-warning);background-color:var(--goa-color-status-warning-50)}.goa-container--error.colored .content{border-color:var(--goa-color-status-emergency);background-color:var(--goa-color-status-emergency-50)}.goa-container--success.colored .content{border-color:var(--goa-color-status-success);background-color:var(--goa-color-status-success-50)}.goa-container--info.colored .content{border-color:var(--goa-color-status-info);background-color:var(--goa-color-status-info-50)}.title,.actions{padding:0.5rem 0}.padding--relaxed header{padding:0 1.5rem}.padding--relaxed .content{padding:1.5rem}.padding--compact header,.padding--compact .content{padding:0 1rem}.padding--compact header{padding:0 1rem}.padding--compact .content{padding:1rem}@media screen and (max-width: 480px){.padding--relaxed header{padding:0 1rem}.padding--relaxed .content{padding:1rem}}.goa-container--non-interactive header{background-color:var(--color-gray-100);border-color:var(--color-gray-200);color:var(--color-black)}.goa-container--interactive header{background-color:var(--goa-color-brand);border-color:var(--goa-color-brand);color:var(--color-white)}.goa-container--info header{background-color:var(--goa-color-status-info);border-color:var(--goa-color-status-info);color:var(--color-white)}.goa-container--error header{background-color:var(--goa-color-status-emergency);border-color:var(--goa-color-status-emergency);color:var(--color-white)}.goa-container--success header{background-color:var(--goa-color-status-success);border-color:var(--goa-color-status-success);color:var(--color-white)}.goa-container--important header{background-color:var(--goa-color-status-warning);border-color:var(--goa-color-status-warning);color:var(--color-white)}.heading--large{padding:0.5rem 1.5rem;max-height:3rem;min-height:1rem}.heading--large .title{line-height:2rem}.heading--small{height:0.5rem}.heading--none{display:none}.heading--none~.content{border-top:1px solid var(--color-gray-200);border-top-left-radius:var(--border-radius);border-top-right-radius:var(--border-radius)}.heading--small .title,.heading--small .actions{display:none}.actions{display:flex;align-items:center}</style>`;
+	    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family);font-size:var(--fs-base)}.goa-container{margin-bottom:1rem;box-sizing:border-box}.goa-container *{box-sizing:border-box}header{display:flex;align-items:center;justify-content:space-between;font-weight:700;font-size:var(--fs-base);border-width:1px;border-style:solid;border-top-left-radius:var(--border-radius);border-top-right-radius:var(--border-radius)}.content{border-bottom:1px solid var(--color-gray-200);border-left:1px solid var(--color-gray-200);border-right:1px solid var(--color-gray-200);border-bottom-left-radius:var(--border-radius);border-bottom-right-radius:var(--border-radius)}.goa-container--non-interactive.accent--filled .content{border-color:var(--color-gray-200);background-color:var(--color-gray-100)}.goa-container--important.accent--filled .content{border-color:var(--goa-color-status-warning);background-color:var(--goa-color-status-warning-50)}.goa-container--error.accent--filled .content{border-color:var(--goa-color-status-emergency);background-color:var(--goa-color-status-emergency-50)}.goa-container--success.accent--filled .content{border-color:var(--goa-color-status-success);background-color:var(--goa-color-status-success-50)}.goa-container--info.accent--filled .content{border-color:var(--goa-color-status-info);background-color:var(--goa-color-status-info-50)}.title,.actions{padding:0.5rem 0}.padding--relaxed header{padding:0 1.5rem}.padding--relaxed .content{padding:1.5rem}.padding--compact header,.padding--compact .content{padding:0 1rem}.padding--compact header{padding:0 1rem}.padding--compact .content{padding:1rem}@media screen and (max-width: 480px){.padding--relaxed header{padding:0 1rem}.padding--relaxed .content{padding:1rem}}.goa-container--non-interactive header{background-color:var(--color-gray-100);border-color:var(--color-gray-200);color:var(--color-black)}.goa-container--interactive header{background-color:var(--goa-color-brand);border-color:var(--goa-color-brand);color:var(--color-white)}.goa-container--info header{background-color:var(--goa-color-status-info);border-color:var(--goa-color-status-info);color:var(--color-white)}.goa-container--error header{background-color:var(--goa-color-status-emergency);border-color:var(--goa-color-status-emergency);color:var(--color-white)}.goa-container--success header{background-color:var(--goa-color-status-success);border-color:var(--goa-color-status-success);color:var(--color-white)}.goa-container--important header{background-color:var(--goa-color-status-warning);border-color:var(--goa-color-status-warning);color:var(--color-white)}.heading--thick{padding:0.5rem 1.5rem;max-height:3rem;min-height:1rem}.heading--thick .title{line-height:2rem}.heading--thin{height:0.5rem}.heading--filled{display:none}.heading--filled~.content{border-top:1px solid var(--color-gray-200);border-top-left-radius:var(--border-radius);border-top-right-radius:var(--border-radius)}.heading--thin .title,.heading--thin .actions{display:none}.actions{display:flex;align-items:center}</style>`;
 	    init(this, {
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
 	    }, instance$q, create_fragment$s, safe_not_equal, {
 	      type: 0,
-	      colored: 4,
-	      headingsize: 1,
+	      accent: 1,
 	      padding: 2
 	    }, null);
 
@@ -4686,7 +4666,7 @@
 	  }
 
 	  static get observedAttributes() {
-	    return ["type", "colored", "headingsize", "padding"];
+	    return ["type", "accent", "padding"];
 	  }
 
 	  get type() {
@@ -4700,24 +4680,13 @@
 	    flush();
 	  }
 
-	  get colored() {
-	    return this.$$.ctx[4];
-	  }
-
-	  set colored(colored) {
-	    this.$$set({
-	      colored
-	    });
-	    flush();
-	  }
-
-	  get headingsize() {
+	  get accent() {
 	    return this.$$.ctx[1];
 	  }
 
-	  set headingsize(headingsize) {
+	  set accent(accent) {
 	    this.$$set({
-	      headingsize
+	      accent
 	    });
 	    flush();
 	  }
@@ -5358,7 +5327,7 @@
 	  };
 	}
 
-	const MAX_HEIGHT = "300px";
+	const MAX_HEIGHT = "276px";
 
 	function instance$p($$self, $$props, $$invalidate) {
 	  const showMenu = _async(function () {
@@ -13600,9 +13569,60 @@
 	}
 
 	customElements.define("goa-textarea", TextArea);
-	/* libs/web-components/src/layouts/two-column-layout/TwoColumnLayout.svelte generated by Svelte v3.49.0 */
+	/* libs/web-components/src/layouts/one-column-layout/OneColumnLayout.svelte generated by Svelte v3.49.0 */
 
 	function create_fragment$4(ctx) {
+	  let div;
+	  return {
+	    c() {
+	      div = element("div");
+	      div.innerHTML = `<section class="header"><slot name="header"></slot></section> 
+
+  <main><slot></slot></main> 
+
+  <section class="footer"><slot name="footer"></slot></section>`;
+	      this.c = noop;
+	      attr(div, "class", "page");
+	    },
+
+	    m(target, anchor) {
+	      insert(target, div, anchor);
+	    },
+
+	    p: noop,
+	    i: noop,
+	    o: noop,
+
+	    d(detaching) {
+	      if (detaching) detach(div);
+	    }
+
+	  };
+	}
+
+	class OneColumnLayout extends SvelteElement {
+	  constructor(options) {
+	    super();
+	    this.shadowRoot.innerHTML = `<style>.page{height:100vh;display:flex;flex-direction:column}.header,.footer{flex:0 0 auto}main{flex:1 1 auto}</style>`;
+	    init(this, {
+	      target: this.shadowRoot,
+	      props: attribute_to_object(this.attributes),
+	      customElement: true
+	    }, null, create_fragment$4, safe_not_equal, {}, null);
+
+	    if (options) {
+	      if (options.target) {
+	        insert(options.target, this, options.anchor);
+	      }
+	    }
+	  }
+
+	}
+
+	customElements.define("goa-one-column-layout", OneColumnLayout);
+	/* libs/web-components/src/layouts/two-column-layout/TwoColumnLayout.svelte generated by Svelte v3.49.0 */
+
+	function create_fragment$3(ctx) {
 	  let div;
 	  let header;
 	  let t0;
@@ -13696,7 +13716,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$2, create_fragment$4, safe_not_equal, {
+	    }, instance$2, create_fragment$3, safe_not_equal, {
 	      navcolumnwidth: 0,
 	      maxcontentwidth: 1
 	    }, null);
@@ -13744,7 +13764,7 @@
 	customElements.define("goa-two-column-layout", TwoColumnLayout);
 	/* libs/web-components/src/layouts/FullScreenNavbarLayout.svelte generated by Svelte v3.49.0 */
 
-	function create_fragment$3(ctx) {
+	function create_fragment$2(ctx) {
 	  let div;
 	  return {
 	    c() {
@@ -13788,7 +13808,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, null, create_fragment$3, safe_not_equal, {}, null);
+	    }, null, create_fragment$2, safe_not_equal, {}, null);
 
 	    if (options) {
 	      if (options.target) {
@@ -13867,7 +13887,7 @@
 	  };
 	}
 
-	function create_fragment$2(ctx) {
+	function create_fragment$1(ctx) {
 	  let goa_container;
 	  let t0;
 	  let t1;
@@ -13892,8 +13912,8 @@
 	      set_custom_element_data(goa_container, "type",
 	      /*type*/
 	      ctx[3]);
-	      set_custom_element_data(goa_container, "headingsize",
-	      /*headingsize*/
+	      set_custom_element_data(goa_container, "accent",
+	      /*accent*/
 	      ctx[4]);
 	    },
 
@@ -13955,10 +13975,10 @@
 	      }
 
 	      if (dirty &
-	      /*headingsize*/
+	      /*accent*/
 	      16) {
-	        set_custom_element_data(goa_container, "headingsize",
-	        /*headingsize*/
+	        set_custom_element_data(goa_container, "accent",
+	        /*accent*/
 	        ctx[4]);
 	      }
 	    },
@@ -13989,7 +14009,7 @@
 	    type = "default"
 	  } = $$props;
 	  let {
-	    headingsize = "large"
+	    accent = "thick"
 	  } = $$props;
 
 	  $$self.$$set = $$props => {
@@ -13997,10 +14017,10 @@
 	    if ('actions' in $$props) $$invalidate(1, actions = $$props.actions);
 	    if ('content' in $$props) $$invalidate(2, content = $$props.content);
 	    if ('type' in $$props) $$invalidate(3, type = $$props.type);
-	    if ('headingsize' in $$props) $$invalidate(4, headingsize = $$props.headingsize);
+	    if ('accent' in $$props) $$invalidate(4, accent = $$props.accent);
 	  };
 
-	  return [title, actions, content, type, headingsize];
+	  return [title, actions, content, type, accent];
 	}
 
 	class ContainerWrapper_test extends SvelteElement {
@@ -14010,12 +14030,12 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$1, create_fragment$2, safe_not_equal, {
+	    }, instance$1, create_fragment$1, safe_not_equal, {
 	      title: 0,
 	      actions: 1,
 	      content: 2,
 	      type: 3,
-	      headingsize: 4
+	      accent: 4
 	    }, null);
 
 	    if (options) {
@@ -14031,7 +14051,7 @@
 	  }
 
 	  static get observedAttributes() {
-	    return ["title", "actions", "content", "type", "headingsize"];
+	    return ["title", "actions", "content", "type", "accent"];
 	  }
 
 	  get title() {
@@ -14078,13 +14098,13 @@
 	    flush();
 	  }
 
-	  get headingsize() {
+	  get accent() {
 	    return this.$$.ctx[4];
 	  }
 
-	  set headingsize(headingsize) {
+	  set accent(accent) {
 	    this.$$set({
-	      headingsize
+	      accent
 	    });
 	    flush();
 	  }
@@ -14094,7 +14114,7 @@
 	customElements.define("test-container", ContainerWrapper_test);
 	/* libs/web-components/src/components/divider/Divider.svelte generated by Svelte v3.49.0 */
 
-	function create_fragment$1(ctx) {
+	function create_fragment(ctx) {
 	  let hr;
 	  return {
 	    c() {
@@ -14174,7 +14194,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance, create_fragment$1, safe_not_equal, {
+	    }, instance, create_fragment, safe_not_equal, {
 	      spacing: 1
 	    }, null);
 
@@ -14208,57 +14228,6 @@
 	}
 
 	customElements.define("goa-divider", Divider);
-	/* libs/web-components/src/components/page/Page.svelte generated by Svelte v3.49.0 */
-
-	function create_fragment(ctx) {
-	  let div;
-	  return {
-	    c() {
-	      div = element("div");
-	      div.innerHTML = `<section class="header"><slot name="header"></slot></section> 
-
-  <main><slot></slot></main> 
-
-  <section class="footer"><slot name="footer"></slot></section>`;
-	      this.c = noop;
-	      attr(div, "class", "page");
-	    },
-
-	    m(target, anchor) {
-	      insert(target, div, anchor);
-	    },
-
-	    p: noop,
-	    i: noop,
-	    o: noop,
-
-	    d(detaching) {
-	      if (detaching) detach(div);
-	    }
-
-	  };
-	}
-
-	class Page extends SvelteElement {
-	  constructor(options) {
-	    super();
-	    this.shadowRoot.innerHTML = `<style>.page{height:100vh;display:flex;flex-direction:column}.header,.footer{flex:0 0 auto}main{flex:1 1 auto}</style>`;
-	    init(this, {
-	      target: this.shadowRoot,
-	      props: attribute_to_object(this.attributes),
-	      customElement: true
-	    }, null, create_fragment, safe_not_equal, {}, null);
-
-	    if (options) {
-	      if (options.target) {
-	        insert(options.target, this, options.anchor);
-	      }
-	    }
-	  }
-
-	}
-
-	customElements.define("goa-page", Page);
 
 	/*! *****************************************************************************
 	Copyright (c) Microsoft Corporation.
@@ -14429,6 +14398,10 @@
 	      return;
 	    }
 
+	    if (!onClick) {
+	      return;
+	    }
+
 	    var current = el.current;
 
 	    var listener = function listener(e) {
@@ -14558,10 +14531,8 @@
 	};
 
 	var GoAContainer = function GoAContainer(_a) {
-	  var headingSize = _a.headingSize,
+	  var accent = _a.accent,
 	      title = _a.title,
-	      _b = _a.colored,
-	      colored = _b === void 0 ? false : _b,
 	      padding = _a.padding,
 	      children = _a.children,
 	      actions = _a.actions,
@@ -14569,8 +14540,7 @@
 	  return jsxRuntime.jsxs("goa-container", __assign({
 	    type: type,
 	    padding: padding,
-	    headingsize: headingSize,
-	    colored: colored
+	    accent: accent
 	  }, {
 	    children: [title && jsxRuntime.jsx("div", __assign({
 	      slot: "title"
@@ -15048,8 +15018,8 @@
 	  }), void 0);
 	};
 
-	function GoAPage(props) {
-	  return jsxRuntime.jsx("goa-page", {
+	function GoAOneColumnLayout(props) {
+	  return jsxRuntime.jsx("goa-one-column-layout", {
 	    children: props.children
 	  }, void 0);
 	}
@@ -15257,7 +15227,7 @@
 	exports.GoAMicrositeHeader = GoAMicrositeHeader;
 	exports.GoAModal = GoAModal;
 	exports.GoANotification = GoANotification;
-	exports.GoAPage = GoAPage;
+	exports.GoAOneColumnLayout = GoAOneColumnLayout;
 	exports.GoAPageBlock = GoAPageBlock;
 	exports.GoARadioGroup = GoARadioGroup;
 	exports.GoARadioItem = GoARadioItem;

package/lib/page/page.d.ts

@@ -1,13 +0,0 @@
-import React, { ReactNode } from "react";
-declare global {
-    namespace JSX {
-        interface IntrinsicElements {
-            'goa-page': React.HTMLAttributes<HTMLElement>;
-        }
-    }
-}
-export interface PageProps {
-    children?: ReactNode;
-}
-export declare function GoAPage(props: PageProps): JSX.Element;
-export default GoAPage;