@abgov/react-components 4.0.0-alpha.134 → 4.0.0-alpha.135

package/package.json

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

package/react-components.esm.js

@@ -10599,7 +10599,7 @@ function create_if_block$b(ctx) {
     16) show_if = null;
     if (show_if == null) show_if = !!Object.keys(
     /*_iconOverrides*/
-    ctx[13]).includes(
+    ctx[12]).includes(
     /*type*/
     ctx[4]);
     if (show_if) return create_if_block_1$5;
@@ -10639,7 +10639,7 @@ function create_if_block$b(ctx) {
     }
 
   };
-} // (62:4) {:else}
+} // (60:4) {:else}
 
 
 function create_else_block$4(ctx) {
@@ -10688,7 +10688,7 @@ function create_else_block$4(ctx) {
     }
 
   };
-} // (57:4) {#if Object.keys(_iconOverrides).includes(type)}
+} // (55:4) {#if Object.keys(_iconOverrides).includes(type)}
 
 
 function create_if_block_1$5(ctx) {
@@ -10696,7 +10696,7 @@ function create_if_block_1$5(ctx) {
   let html_tag;
   let raw_value =
   /*_iconOverrides*/
-  ctx[13][
+  ctx[12][
   /*type*/
   ctx[4]] + "";
   let t;
@@ -10723,7 +10723,7 @@ function create_if_block_1$5(ctx) {
       /*type*/
       16 && raw_value !== (raw_value =
       /*_iconOverrides*/
-      ctx[13][
+      ctx[12][
       /*type*/
       ctx[4]] + "")) html_tag.p(raw_value);
     },
@@ -10749,10 +10749,10 @@ function create_fragment$l(ctx) {
       attr(div, "class", "goa-icon");
       attr(div, "data-testid",
       /*testid*/
-      ctx[10]);
+      ctx[9]);
       attr(div, "title",
       /*title*/
-      ctx[9]);
+      ctx[8]);
       attr(div, "style", div_style_value = `
     ${calculateMargin(
       /*mt*/
@@ -10765,20 +10765,17 @@ function create_fragment$l(ctx) {
       ctx[3])}
     --size: ${
       /*_size*/
-      ctx[11]};
+      ctx[10]};
     --fill-color: ${
       /*fillcolor*/
       ctx[6]};
-    --hover-color: ${
-      /*hovercolor*/
-      ctx[7]};
     --opacity: ${
       /*opacity*/
-      ctx[8]};
+      ctx[7]};
   `);
       toggle_class(div, "inverted",
       /*isInverted*/
-      ctx[12]);
+      ctx[11]);
     },
 
     m(target, anchor) {
@@ -10804,23 +10801,23 @@ function create_fragment$l(ctx) {
 
       if (dirty &
       /*testid*/
-      1024) {
+      512) {
         attr(div, "data-testid",
         /*testid*/
-        ctx[10]);
+        ctx[9]);
       }
 
       if (dirty &
       /*title*/
-      512) {
+      256) {
         attr(div, "title",
         /*title*/
-        ctx[9]);
+        ctx[8]);
       }
 
       if (dirty &
-      /*mt, mr, mb, ml, _size, fillcolor, hovercolor, opacity*/
-      2511 && div_style_value !== (div_style_value = `
+      /*mt, mr, mb, ml, _size, fillcolor, opacity*/
+      1231 && div_style_value !== (div_style_value = `
     ${calculateMargin(
       /*mt*/
       ctx[0],
@@ -10832,26 +10829,23 @@ function create_fragment$l(ctx) {
       ctx[3])}
     --size: ${
       /*_size*/
-      ctx[11]};
+      ctx[10]};
     --fill-color: ${
       /*fillcolor*/
       ctx[6]};
-    --hover-color: ${
-      /*hovercolor*/
-      ctx[7]};
     --opacity: ${
       /*opacity*/
-      ctx[8]};
+      ctx[7]};
   `)) {
         attr(div, "style", div_style_value);
       }
 
       if (dirty &
       /*isInverted*/
-      4096) {
+      2048) {
         toggle_class(div, "inverted",
         /*isInverted*/
-        ctx[12]);
+        ctx[11]);
       }
     },
 
@@ -10898,9 +10892,6 @@ function instance$j($$self, $$props, $$invalidate) {
   let {
     fillcolor = ""
   } = $$props;
-  let {
-    hovercolor = ""
-  } = $$props;
   let {
     opacity = 1
   } = $$props;
@@ -10929,27 +10920,26 @@ function instance$j($$self, $$props, $$invalidate) {
     if ('mb' in $$props) $$invalidate(2, mb = $$props.mb);
     if ('ml' in $$props) $$invalidate(3, ml = $$props.ml);
     if ('type' in $$props) $$invalidate(4, type = $$props.type);
-    if ('size' in $$props) $$invalidate(14, size = $$props.size);
+    if ('size' in $$props) $$invalidate(13, size = $$props.size);
     if ('theme' in $$props) $$invalidate(5, theme = $$props.theme);
-    if ('inverted' in $$props) $$invalidate(15, inverted = $$props.inverted);
+    if ('inverted' in $$props) $$invalidate(14, inverted = $$props.inverted);
     if ('fillcolor' in $$props) $$invalidate(6, fillcolor = $$props.fillcolor);
-    if ('hovercolor' in $$props) $$invalidate(7, hovercolor = $$props.hovercolor);
-    if ('opacity' in $$props) $$invalidate(8, opacity = $$props.opacity);
-    if ('title' in $$props) $$invalidate(9, title = $$props.title);
-    if ('testid' in $$props) $$invalidate(10, testid = $$props.testid);
+    if ('opacity' in $$props) $$invalidate(7, opacity = $$props.opacity);
+    if ('title' in $$props) $$invalidate(8, title = $$props.title);
+    if ('testid' in $$props) $$invalidate(9, testid = $$props.testid);
   };
 
   $$self.$$.update = () => {
     if ($$self.$$.dirty &
     /*inverted*/
-    32768) {
-      $$invalidate(12, isInverted = toBoolean(inverted));
+    16384) {
+      $$invalidate(11, isInverted = toBoolean(inverted));
     }
 
     if ($$self.$$.dirty &
     /*size*/
-    16384) {
-      $$invalidate(11, _size = {
+    8192) {
+      $$invalidate(10, _size = {
         small: "1.25rem",
         medium: "1.5rem",
         large: "2rem"
@@ -10957,13 +10947,13 @@ function instance$j($$self, $$props, $$invalidate) {
     }
   };
 
-  return [mt, mr, mb, ml, type, theme, fillcolor, hovercolor, opacity, title, testid, _size, isInverted, _iconOverrides, size, inverted];
+  return [mt, mr, mb, ml, type, theme, fillcolor, opacity, title, testid, _size, isInverted, _iconOverrides, size, inverted];
 }
 
 class Icon extends SvelteElement {
   constructor(options) {
     super();
-    this.shadowRoot.innerHTML = `<style>:host{display:inline-flex;align-items:center}ion-icon{pointer-events:none;width:100%;height:100%}.goa-icon{width:var(--size);height:var(--size);fill:var(--fill-color);color:var(--fill-color);opacity:var(--opacity);display:inline-flex;align-items:center;justify-content:center}.goa-icon:hover ion-icon{fill:var(--hover-color);color:var(--hover-color)}.icon-override{display:flex;flex-direction:column;align-items:center}.icon-override *{fill:var(--goa-color-interactive-default)}.inverted *{color:#fff;fill:#fff}</style>`;
+    this.shadowRoot.innerHTML = `<style>:host{display:inline-flex;align-items:center}ion-icon{pointer-events:none;width:100%;height:100%}.goa-icon{width:var(--size);height:var(--size);fill:var(--fill-color);color:var(--fill-color);opacity:var(--opacity);display:inline-flex;align-items:center;justify-content:center}.icon-override{display:flex;flex-direction:column;align-items:center}.icon-override *{fill:var(--goa-color-interactive-default)}.inverted *{color:#fff;fill:#fff}</style>`;
     init(this, {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
@@ -10974,14 +10964,13 @@ class Icon extends SvelteElement {
       mb: 2,
       ml: 3,
       type: 4,
-      size: 14,
+      size: 13,
       theme: 5,
-      inverted: 15,
+      inverted: 14,
       fillcolor: 6,
-      hovercolor: 7,
-      opacity: 8,
-      title: 9,
-      testid: 10
+      opacity: 7,
+      title: 8,
+      testid: 9
     }, null);
 
     if (options) {
@@ -10997,7 +10986,7 @@ class Icon extends SvelteElement {
   }
 
   static get observedAttributes() {
-    return ["mt", "mr", "mb", "ml", "type", "size", "theme", "inverted", "fillcolor", "hovercolor", "opacity", "title", "testid"];
+    return ["mt", "mr", "mb", "ml", "type", "size", "theme", "inverted", "fillcolor", "opacity", "title", "testid"];
   }
 
   get mt() {
@@ -11056,7 +11045,7 @@ class Icon extends SvelteElement {
   }
 
   get size() {
-    return this.$$.ctx[14];
+    return this.$$.ctx[13];
   }
 
   set size(size) {
@@ -11078,7 +11067,7 @@ class Icon extends SvelteElement {
   }
 
   get inverted() {
-    return this.$$.ctx[15];
+    return this.$$.ctx[14];
   }
 
   set inverted(inverted) {
@@ -11099,19 +11088,8 @@ class Icon extends SvelteElement {
     flush();
   }
 
-  get hovercolor() {
-    return this.$$.ctx[7];
-  }
-
-  set hovercolor(hovercolor) {
-    this.$$set({
-      hovercolor
-    });
-    flush();
-  }
-
   get opacity() {
-    return this.$$.ctx[8];
+    return this.$$.ctx[7];
   }
 
   set opacity(opacity) {
@@ -11122,7 +11100,7 @@ class Icon extends SvelteElement {
   }
 
   get title() {
-    return this.$$.ctx[9];
+    return this.$$.ctx[8];
   }
 
   set title(title) {
@@ -11133,7 +11111,7 @@ class Icon extends SvelteElement {
   }
 
   get testid() {
-    return this.$$.ctx[10];
+    return this.$$.ctx[9];
   }
 
   set testid(testid) {

package/react-components.umd.js

@@ -10645,7 +10645,7 @@
 	    16) show_if = null;
 	    if (show_if == null) show_if = !!Object.keys(
 	    /*_iconOverrides*/
-	    ctx[13]).includes(
+	    ctx[12]).includes(
 	    /*type*/
 	    ctx[4]);
 	    if (show_if) return create_if_block_1$5;
@@ -10685,7 +10685,7 @@
 	    }
 
 	  };
-	} // (62:4) {:else}
+	} // (60:4) {:else}
 
 
 	function create_else_block$4(ctx) {
@@ -10734,7 +10734,7 @@
 	    }
 
 	  };
-	} // (57:4) {#if Object.keys(_iconOverrides).includes(type)}
+	} // (55:4) {#if Object.keys(_iconOverrides).includes(type)}
 
 
 	function create_if_block_1$5(ctx) {
@@ -10742,7 +10742,7 @@
 	  let html_tag;
 	  let raw_value =
 	  /*_iconOverrides*/
-	  ctx[13][
+	  ctx[12][
 	  /*type*/
 	  ctx[4]] + "";
 	  let t;
@@ -10769,7 +10769,7 @@
 	      /*type*/
 	      16 && raw_value !== (raw_value =
 	      /*_iconOverrides*/
-	      ctx[13][
+	      ctx[12][
 	      /*type*/
 	      ctx[4]] + "")) html_tag.p(raw_value);
 	    },
@@ -10795,10 +10795,10 @@
 	      attr(div, "class", "goa-icon");
 	      attr(div, "data-testid",
 	      /*testid*/
-	      ctx[10]);
+	      ctx[9]);
 	      attr(div, "title",
 	      /*title*/
-	      ctx[9]);
+	      ctx[8]);
 	      attr(div, "style", div_style_value = `
     ${calculateMargin(
       /*mt*/
@@ -10811,20 +10811,17 @@
       ctx[3])}
     --size: ${
       /*_size*/
-      ctx[11]};
+      ctx[10]};
     --fill-color: ${
       /*fillcolor*/
       ctx[6]};
-    --hover-color: ${
-      /*hovercolor*/
-      ctx[7]};
     --opacity: ${
       /*opacity*/
-      ctx[8]};
+      ctx[7]};
   `);
 	      toggle_class(div, "inverted",
 	      /*isInverted*/
-	      ctx[12]);
+	      ctx[11]);
 	    },
 
 	    m(target, anchor) {
@@ -10850,23 +10847,23 @@
 
 	      if (dirty &
 	      /*testid*/
-	      1024) {
+	      512) {
 	        attr(div, "data-testid",
 	        /*testid*/
-	        ctx[10]);
+	        ctx[9]);
 	      }
 
 	      if (dirty &
 	      /*title*/
-	      512) {
+	      256) {
 	        attr(div, "title",
 	        /*title*/
-	        ctx[9]);
+	        ctx[8]);
 	      }
 
 	      if (dirty &
-	      /*mt, mr, mb, ml, _size, fillcolor, hovercolor, opacity*/
-	      2511 && div_style_value !== (div_style_value = `
+	      /*mt, mr, mb, ml, _size, fillcolor, opacity*/
+	      1231 && div_style_value !== (div_style_value = `
     ${calculateMargin(
       /*mt*/
       ctx[0],
@@ -10878,26 +10875,23 @@
       ctx[3])}
     --size: ${
       /*_size*/
-      ctx[11]};
+      ctx[10]};
     --fill-color: ${
       /*fillcolor*/
       ctx[6]};
-    --hover-color: ${
-      /*hovercolor*/
-      ctx[7]};
     --opacity: ${
       /*opacity*/
-      ctx[8]};
+      ctx[7]};
   `)) {
 	        attr(div, "style", div_style_value);
 	      }
 
 	      if (dirty &
 	      /*isInverted*/
-	      4096) {
+	      2048) {
 	        toggle_class(div, "inverted",
 	        /*isInverted*/
-	        ctx[12]);
+	        ctx[11]);
 	      }
 	    },
 
@@ -10944,9 +10938,6 @@
 	  let {
 	    fillcolor = ""
 	  } = $$props;
-	  let {
-	    hovercolor = ""
-	  } = $$props;
 	  let {
 	    opacity = 1
 	  } = $$props;
@@ -10975,27 +10966,26 @@
 	    if ('mb' in $$props) $$invalidate(2, mb = $$props.mb);
 	    if ('ml' in $$props) $$invalidate(3, ml = $$props.ml);
 	    if ('type' in $$props) $$invalidate(4, type = $$props.type);
-	    if ('size' in $$props) $$invalidate(14, size = $$props.size);
+	    if ('size' in $$props) $$invalidate(13, size = $$props.size);
 	    if ('theme' in $$props) $$invalidate(5, theme = $$props.theme);
-	    if ('inverted' in $$props) $$invalidate(15, inverted = $$props.inverted);
+	    if ('inverted' in $$props) $$invalidate(14, inverted = $$props.inverted);
 	    if ('fillcolor' in $$props) $$invalidate(6, fillcolor = $$props.fillcolor);
-	    if ('hovercolor' in $$props) $$invalidate(7, hovercolor = $$props.hovercolor);
-	    if ('opacity' in $$props) $$invalidate(8, opacity = $$props.opacity);
-	    if ('title' in $$props) $$invalidate(9, title = $$props.title);
-	    if ('testid' in $$props) $$invalidate(10, testid = $$props.testid);
+	    if ('opacity' in $$props) $$invalidate(7, opacity = $$props.opacity);
+	    if ('title' in $$props) $$invalidate(8, title = $$props.title);
+	    if ('testid' in $$props) $$invalidate(9, testid = $$props.testid);
 	  };
 
 	  $$self.$$.update = () => {
 	    if ($$self.$$.dirty &
 	    /*inverted*/
-	    32768) {
-	      $$invalidate(12, isInverted = toBoolean(inverted));
+	    16384) {
+	      $$invalidate(11, isInverted = toBoolean(inverted));
 	    }
 
 	    if ($$self.$$.dirty &
 	    /*size*/
-	    16384) {
-	      $$invalidate(11, _size = {
+	    8192) {
+	      $$invalidate(10, _size = {
 	        small: "1.25rem",
 	        medium: "1.5rem",
 	        large: "2rem"
@@ -11003,13 +10993,13 @@
 	    }
 	  };
 
-	  return [mt, mr, mb, ml, type, theme, fillcolor, hovercolor, opacity, title, testid, _size, isInverted, _iconOverrides, size, inverted];
+	  return [mt, mr, mb, ml, type, theme, fillcolor, opacity, title, testid, _size, isInverted, _iconOverrides, size, inverted];
 	}
 
 	class Icon extends SvelteElement {
 	  constructor(options) {
 	    super();
-	    this.shadowRoot.innerHTML = `<style>:host{display:inline-flex;align-items:center}ion-icon{pointer-events:none;width:100%;height:100%}.goa-icon{width:var(--size);height:var(--size);fill:var(--fill-color);color:var(--fill-color);opacity:var(--opacity);display:inline-flex;align-items:center;justify-content:center}.goa-icon:hover ion-icon{fill:var(--hover-color);color:var(--hover-color)}.icon-override{display:flex;flex-direction:column;align-items:center}.icon-override *{fill:var(--goa-color-interactive-default)}.inverted *{color:#fff;fill:#fff}</style>`;
+	    this.shadowRoot.innerHTML = `<style>:host{display:inline-flex;align-items:center}ion-icon{pointer-events:none;width:100%;height:100%}.goa-icon{width:var(--size);height:var(--size);fill:var(--fill-color);color:var(--fill-color);opacity:var(--opacity);display:inline-flex;align-items:center;justify-content:center}.icon-override{display:flex;flex-direction:column;align-items:center}.icon-override *{fill:var(--goa-color-interactive-default)}.inverted *{color:#fff;fill:#fff}</style>`;
 	    init(this, {
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
@@ -11020,14 +11010,13 @@
 	      mb: 2,
 	      ml: 3,
 	      type: 4,
-	      size: 14,
+	      size: 13,
 	      theme: 5,
-	      inverted: 15,
+	      inverted: 14,
 	      fillcolor: 6,
-	      hovercolor: 7,
-	      opacity: 8,
-	      title: 9,
-	      testid: 10
+	      opacity: 7,
+	      title: 8,
+	      testid: 9
 	    }, null);
 
 	    if (options) {
@@ -11043,7 +11032,7 @@
 	  }
 
 	  static get observedAttributes() {
-	    return ["mt", "mr", "mb", "ml", "type", "size", "theme", "inverted", "fillcolor", "hovercolor", "opacity", "title", "testid"];
+	    return ["mt", "mr", "mb", "ml", "type", "size", "theme", "inverted", "fillcolor", "opacity", "title", "testid"];
 	  }
 
 	  get mt() {
@@ -11102,7 +11091,7 @@
 	  }
 
 	  get size() {
-	    return this.$$.ctx[14];
+	    return this.$$.ctx[13];
 	  }
 
 	  set size(size) {
@@ -11124,7 +11113,7 @@
 	  }
 
 	  get inverted() {
-	    return this.$$.ctx[15];
+	    return this.$$.ctx[14];
 	  }
 
 	  set inverted(inverted) {
@@ -11145,19 +11134,8 @@
 	    flush();
 	  }
 
-	  get hovercolor() {
-	    return this.$$.ctx[7];
-	  }
-
-	  set hovercolor(hovercolor) {
-	    this.$$set({
-	      hovercolor
-	    });
-	    flush();
-	  }
-
 	  get opacity() {
-	    return this.$$.ctx[8];
+	    return this.$$.ctx[7];
 	  }
 
 	  set opacity(opacity) {
@@ -11168,7 +11146,7 @@
 	  }
 
 	  get title() {
-	    return this.$$.ctx[9];
+	    return this.$$.ctx[8];
 	  }
 
 	  set title(title) {
@@ -11179,7 +11157,7 @@
 	  }
 
 	  get testid() {
-	    return this.$$.ctx[10];
+	    return this.$$.ctx[9];
 	  }
 
 	  set testid(testid) {