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

package/lib/chip/chip.d.ts

@@ -1,10 +1,12 @@
 import React from 'react';
+declare type ChipVariant = "filter";
 interface WCProps {
     ref: React.RefObject<HTMLElement>;
     leadingicon: string;
     error: boolean;
     deletable: boolean;
     content: string;
+    variant?: string;
 }
 declare global {
     namespace JSX {
@@ -19,6 +21,7 @@ interface Props {
     leadingIcon?: string;
     error?: boolean;
     content: string;
+    variant?: ChipVariant;
 }
-export declare const GoAChip: ({ leadingIcon, deletable, error, content, onClick }: Props) => JSX.Element;
+export declare const GoAChip: ({ leadingIcon, deletable, error, variant, content, onClick }: Props) => JSX.Element;
 export default GoAChip;

package/lib/input/input.d.ts

@@ -1,6 +1,6 @@
 import React, { FC } from 'react';
 import { GoAIconType } from '../..';
-declare type GoAInputType = "text" | "number" | "password" | "email" | "date" | "datetime-local" | "month" | "range" | "search" | "tel" | "time" | "url" | "week";
+declare type GoAInputType = "text" | "password" | "email" | "number" | "date" | "datetime-local" | "month" | "range" | "search" | "tel" | "time" | "url" | "week";
 declare type GoAAutoCapitalize = "on" | "off" | "none" | "sentences" | "words" | "characters";
 interface WCProps {
     ref?: React.MutableRefObject<HTMLInputElement | null>;
@@ -24,8 +24,8 @@ interface WCProps {
     prefix?: string;
     suffix?: string;
     testid?: string;
-    min?: string;
-    max?: string;
+    min?: string | number;
+    max?: string | number;
     step?: number;
 }
 declare global {
@@ -35,10 +35,8 @@ declare global {
         }
     }
 }
-export interface InputProps {
+interface BaseProps {
     name: string;
-    value: string;
-    onChange: (name: string, value: string) => void;
     id?: string;
     disabled?: boolean;
     autoCapitalize?: GoAAutoCapitalize;
@@ -56,8 +54,26 @@ export interface InputProps {
     prefix?: string;
     suffix?: string;
     testId?: string;
-    min?: string;
-    max?: string;
+}
+export interface InputProps extends BaseProps {
+    onChange: (name: string, value: string) => void;
+    value: string;
+    min?: number | string;
+    max?: number | string;
+    step?: number;
+}
+interface NumberInputProps extends BaseProps {
+    onChange: (name: string, value: number) => void;
+    value: number;
+    min?: number;
+    max?: number;
+    step?: number;
+}
+interface DateInputProps extends BaseProps {
+    onChange: (name: string, value: Date) => void;
+    value: string | Date;
+    min?: string | Date;
+    max?: string | Date;
     step?: number;
 }
 export declare const GoAInput: FC<InputProps & {
@@ -65,25 +81,15 @@ export declare const GoAInput: FC<InputProps & {
 }>;
 export declare const GoAInputText: FC<InputProps>;
 export declare const GoAInputPassword: FC<InputProps>;
-export declare const GoAInputDate: FC<Omit<InputProps, "value"> & {
-    value: Date | string;
-}>;
-export declare const GoAInputTime: FC<Omit<InputProps, "value"> & {
-    value: Date | string;
-}>;
-export declare const GoAInputDateTime: FC<Omit<InputProps, "value"> & {
-    value: Date;
-}>;
+export declare const GoAInputDate: FC<DateInputProps>;
+export declare const GoAInputTime: FC<DateInputProps>;
+export declare const GoAInputDateTime: FC<DateInputProps>;
 export declare const GoAInputEmail: FC<InputProps>;
 export declare const GoAInputSearch: FC<InputProps>;
 export declare const GoAInputUrl: FC<InputProps>;
 export declare const GoAInputTel: FC<InputProps>;
 export declare const GoAInputFile: FC<InputProps>;
 export declare const GoAInputMonth: FC<InputProps>;
-export declare const GoAInputNumber: FC<Omit<InputProps, "value" | "min" | "max"> & {
-    value: number;
-    min?: number;
-    max?: number;
-}>;
+export declare const GoAInputNumber: FC<NumberInputProps>;
 export declare const GoAInputRange: FC<InputProps>;
 export default GoAInput;

package/package.json

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

package/react-components.esm.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useRef, useEffect } from 'react';
-import { format } from 'date-fns';
+import { parseISO, format } from 'date-fns';
 
 function noop() {}
 
@@ -3456,7 +3456,7 @@ function create_if_block_1$8(ctx) {
     }
 
   };
-} // (42:2) {#if _deletable}
+} // (44:2) {#if _deletable}
 
 
 function create_if_block$e(ctx) {
@@ -3472,14 +3472,14 @@ function create_if_block$e(ctx) {
       set_custom_element_data(goa_icon, "type", "close-circle");
       set_custom_element_data(goa_icon, "fillcolor", goa_icon_fillcolor_value =
       /*_error*/
-      ctx[4] ? "var(--goa-color-status-emergency)" :
+      ctx[5] ? "var(--goa-color-status-emergency)" :
       /*_hovering*/
-      ctx[3] ? "var(--goa-color-interactive--hover)" : "var(--color-gray-600)");
+      ctx[4] ? "var(--goa-color-interactive--hover)" : "var(--color-gray-600)");
       set_custom_element_data(goa_icon, "opacity", goa_icon_opacity_value =
       /*_error*/
-      ctx[4] ?
+      ctx[5] ?
       /*_hovering*/
-      ctx[3] ? 1 : 0.5 : 1);
+      ctx[4] ? 1 : 0.5 : 1);
     },
 
     m(target, anchor) {
@@ -3489,21 +3489,21 @@ function create_if_block$e(ctx) {
     p(ctx, dirty) {
       if (dirty &
       /*_error, _hovering*/
-      24 && goa_icon_fillcolor_value !== (goa_icon_fillcolor_value =
+      48 && goa_icon_fillcolor_value !== (goa_icon_fillcolor_value =
       /*_error*/
-      ctx[4] ? "var(--goa-color-status-emergency)" :
+      ctx[5] ? "var(--goa-color-status-emergency)" :
       /*_hovering*/
-      ctx[3] ? "var(--goa-color-interactive--hover)" : "var(--color-gray-600)")) {
+      ctx[4] ? "var(--goa-color-interactive--hover)" : "var(--color-gray-600)")) {
         set_custom_element_data(goa_icon, "fillcolor", goa_icon_fillcolor_value);
       }
 
       if (dirty &
       /*_error, _hovering*/
-      24 && goa_icon_opacity_value !== (goa_icon_opacity_value =
+      48 && goa_icon_opacity_value !== (goa_icon_opacity_value =
       /*_error*/
-      ctx[4] ?
+      ctx[5] ?
       /*_hovering*/
-      ctx[3] ? 1 : 0.5 : 1)) {
+      ctx[4] ? 1 : 0.5 : 1)) {
         set_custom_element_data(goa_icon, "opacity", goa_icon_opacity_value);
       }
     },
@@ -3528,7 +3528,7 @@ function create_fragment$u(ctx) {
   ctx[0] && create_if_block_1$8(ctx);
   let if_block1 =
   /*_deletable*/
-  ctx[5] && create_if_block$e(ctx);
+  ctx[6] && create_if_block$e(ctx);
   return {
     c() {
       div1 = element("div");
@@ -3547,10 +3547,13 @@ function create_fragment$u(ctx) {
       attr(div1, "tabindex", "0");
       toggle_class(div1, "deletable",
       /*_deletable*/
-      ctx[5]);
+      ctx[6]);
       toggle_class(div1, "error",
       /*_error*/
-      ctx[4]);
+      ctx[5]);
+      toggle_class(div1, "variant",
+      /*variant*/
+      ctx[2]);
     },
 
     m(target, anchor) {
@@ -3563,20 +3566,20 @@ function create_fragment$u(ctx) {
       if (if_block1) if_block1.m(div1, null);
       /*div1_binding*/
 
-      ctx[9](div1);
+      ctx[10](div1);
 
       if (!mounted) {
         dispose = [listen(div1, "click",
         /*click_handler*/
-        ctx[10]), listen(div1, "mouseover",
+        ctx[11]), listen(div1, "mouseover",
         /*mouseover_handler*/
-        ctx[11]), listen(div1, "mouseout",
+        ctx[12]), listen(div1, "mouseout",
         /*mouseout_handler*/
-        ctx[12]), listen(div1, "focus",
+        ctx[13]), listen(div1, "focus",
         /*focus_handler*/
-        ctx[13]), listen(div1, "blur",
+        ctx[14]), listen(div1, "blur",
         /*blur_handler*/
-        ctx[14])];
+        ctx[15])];
         mounted = true;
       }
     },
@@ -3605,7 +3608,7 @@ function create_fragment$u(ctx) {
 
       if (
       /*_deletable*/
-      ctx[5]) {
+      ctx[6]) {
         if (if_block1) {
           if_block1.p(ctx, dirty);
         } else {
@@ -3620,18 +3623,26 @@ function create_fragment$u(ctx) {
 
       if (dirty &
       /*_deletable*/
-      32) {
+      64) {
         toggle_class(div1, "deletable",
         /*_deletable*/
-        ctx[5]);
+        ctx[6]);
       }
 
       if (dirty &
       /*_error*/
-      16) {
+      32) {
         toggle_class(div1, "error",
         /*_error*/
-        ctx[4]);
+        ctx[5]);
+      }
+
+      if (dirty &
+      /*variant*/
+      4) {
+        toggle_class(div1, "variant",
+        /*variant*/
+        ctx[2]);
       }
     },
 
@@ -3644,7 +3655,7 @@ function create_fragment$u(ctx) {
       if (if_block1) if_block1.d();
       /*div1_binding*/
 
-      ctx[9](null);
+      ctx[10](null);
       mounted = false;
       run_all(dispose);
     }
@@ -3665,6 +3676,9 @@ function instance$s($$self, $$props, $$invalidate) {
   let {
     content
   } = $$props;
+  let {
+    variant
+  } = $$props;
   let el;
   let _hovering = false; // booleans
 
@@ -3683,42 +3697,43 @@ function instance$s($$self, $$props, $$invalidate) {
   function div1_binding($$value) {
     binding_callbacks[$$value ? 'unshift' : 'push'](() => {
       el = $$value;
-      $$invalidate(2, el);
+      $$invalidate(3, el);
     });
   }
 
   const click_handler = e => _deletable && onDelete(e);
 
-  const mouseover_handler = () => $$invalidate(3, _hovering = true);
+  const mouseover_handler = () => $$invalidate(4, _hovering = true);
 
-  const mouseout_handler = () => $$invalidate(3, _hovering = false);
+  const mouseout_handler = () => $$invalidate(4, _hovering = false);
 
-  const focus_handler = () => $$invalidate(3, _hovering = false);
+  const focus_handler = () => $$invalidate(4, _hovering = false);
 
-  const blur_handler = () => $$invalidate(3, _hovering = false);
+  const blur_handler = () => $$invalidate(4, _hovering = false);
 
   $$self.$$set = $$props => {
     if ('leadingicon' in $$props) $$invalidate(0, leadingicon = $$props.leadingicon);
-    if ('error' in $$props) $$invalidate(7, error = $$props.error);
-    if ('deletable' in $$props) $$invalidate(8, deletable = $$props.deletable);
+    if ('error' in $$props) $$invalidate(8, error = $$props.error);
+    if ('deletable' in $$props) $$invalidate(9, deletable = $$props.deletable);
     if ('content' in $$props) $$invalidate(1, content = $$props.content);
+    if ('variant' in $$props) $$invalidate(2, variant = $$props.variant);
   };
 
   $$self.$$.update = () => {
     if ($$self.$$.dirty &
     /*error*/
-    128) {
-      $$invalidate(4, _error = toBoolean(error));
+    256) {
+      $$invalidate(5, _error = toBoolean(error));
     }
 
     if ($$self.$$.dirty &
     /*deletable*/
-    256) {
-      $$invalidate(5, _deletable = toBoolean(deletable));
+    512) {
+      $$invalidate(6, _deletable = toBoolean(deletable));
     }
   };
 
-  return [leadingicon, content, el, _hovering, _error, _deletable, onDelete, error, deletable, div1_binding, click_handler, mouseover_handler, mouseout_handler, focus_handler, blur_handler];
+  return [leadingicon, content, variant, el, _hovering, _error, _deletable, onDelete, error, deletable, div1_binding, click_handler, mouseover_handler, mouseout_handler, focus_handler, blur_handler];
 }
 
 class Chip extends SvelteElement {
@@ -3731,9 +3746,10 @@ class Chip extends SvelteElement {
       customElement: true
     }, instance$s, create_fragment$u, safe_not_equal, {
       leadingicon: 0,
-      error: 7,
-      deletable: 8,
-      content: 1
+      error: 8,
+      deletable: 9,
+      content: 1,
+      variant: 2
     }, null);
 
     if (options) {
@@ -3749,7 +3765,7 @@ class Chip extends SvelteElement {
   }
 
   static get observedAttributes() {
-    return ["leadingicon", "error", "deletable", "content"];
+    return ["leadingicon", "error", "deletable", "content", "variant"];
   }
 
   get leadingicon() {
@@ -3764,7 +3780,7 @@ class Chip extends SvelteElement {
   }
 
   get error() {
-    return this.$$.ctx[7];
+    return this.$$.ctx[8];
   }
 
   set error(error) {
@@ -3775,7 +3791,7 @@ class Chip extends SvelteElement {
   }
 
   get deletable() {
-    return this.$$.ctx[8];
+    return this.$$.ctx[9];
   }
 
   set deletable(deletable) {
@@ -3796,6 +3812,17 @@ class Chip extends SvelteElement {
     flush();
   }
 
+  get variant() {
+    return this.$$.ctx[2];
+  }
+
+  set variant(variant) {
+    this.$$set({
+      variant
+    });
+    flush();
+  }
+
 }
 
 customElements.define("goa-chip", Chip);
@@ -14406,6 +14433,7 @@ const GoAChip = ({
   leadingIcon: _leadingIcon = "",
   deletable: _deletable = false,
   error: _error = false,
+  variant,
   content,
   onClick
 }) => {
@@ -14429,7 +14457,8 @@ const GoAChip = ({
     leadingicon: _leadingIcon,
     error: _error,
     deletable: _deletable,
-    content: content
+    content: content,
+    variant: variant
   }, void 0);
 };
 
@@ -14799,38 +14828,55 @@ const GoAInputPassword = props => {
 const GoAInputDate = _a => {
   var {
     value,
-    min,
-    max
+    min = "",
+    max = ""
   } = _a,
       props = __rest(_a, ["value", "min", "max"]);
 
-  const _value = typeof value === "string" ? new Date(value) : value;
+  const _format = value => {
+    return format(value, "yyyy-MM-dd");
+  };
+
+  const _value = _format(typeof value === "string" ? parseISO(value) : value);
+
+  const _min = min && _format(typeof min === "string" ? parseISO(min) : min);
 
-  const _min = min ? format(new Date(min), "yyyy-MM-dd") : "";
+  const _max = max && _format(typeof max === "string" ? parseISO(max) : max);
 
-  const _max = max ? format(new Date(max), "yyyy-MM-dd") : "";
+  const onDateChange = (name, value) => {
+    props.onChange(name, parseISO(value));
+  };
 
   return jsx(GoAInput, Object.assign({}, props, {
+    onChange: onDateChange,
     min: _min,
     max: _max,
-    value: format(_value, "yyyy-MM-dd"),
+    value: _value,
     type: "date"
   }), void 0);
 };
 const GoAInputTime = _a => {
   var {
-    value
+    value,
+    min = "",
+    max = ""
   } = _a,
-      props = __rest(_a, ["value"]);
+      props = __rest(_a, ["value", "min", "max"]);
+
+  const onDateChange = (name, value) => {
+    props.onChange(name, parseISO(value));
+  };
 
   try {
-    const d = typeof value === "string" ? new Date(value) : value;
+    const d = typeof value === "string" ? parseISO(value) : value;
     return jsx(GoAInput, Object.assign({}, props, {
+      onChange: onDateChange,
       value: format(d, "hh:mm"),
       type: "time"
     }), void 0);
   } catch (e) {
     return jsx(GoAInput, Object.assign({}, props, {
+      onChange: onDateChange,
       value: value,
       type: "time"
     }), void 0);
@@ -14838,12 +14884,20 @@ const GoAInputTime = _a => {
 };
 const GoAInputDateTime = _a => {
   var {
-    value
+    value,
+    min = "",
+    max = ""
   } = _a,
-      props = __rest(_a, ["value"]);
+      props = __rest(_a, ["value", "min", "max"]);
+
+  const d = typeof value === "string" ? parseISO(value) : value;
+
+  const onDateChange = (name, value) => {
+    props.onChange(name, parseISO(value));
+  };
 
-  const d = typeof value === "string" ? new Date(value) : value;
   return jsx(GoAInput, Object.assign({}, props, {
+    onChange: onDateChange,
     value: format(d, "yyyy-MM-dd'T'hh:mm"),
     type: "datetime-local"
   }), void 0);
@@ -14887,13 +14941,18 @@ const GoAInputMonth = props => {
 };
 const GoAInputNumber = _a => {
   var {
-    min,
-    max,
+    min = Number.MIN_VALUE,
+    max = Number.MAX_VALUE,
     value
   } = _a,
       props = __rest(_a, ["min", "max", "value"]);
 
+  const onNumberChange = (name, value) => {
+    props.onChange(name, parseInt(value));
+  };
+
   return jsx(GoAInput, Object.assign({}, props, {
+    onChange: onNumberChange,
     min: min === null || min === void 0 ? void 0 : min.toString(),
     max: max === null || max === void 0 ? void 0 : max.toString(),
     value: value.toString(),

package/react-components.umd.js

@@ -3497,7 +3497,7 @@
 	    }
 
 	  };
-	} // (42:2) {#if _deletable}
+	} // (44:2) {#if _deletable}
 
 
 	function create_if_block$e(ctx) {
@@ -3513,14 +3513,14 @@
 	      set_custom_element_data(goa_icon, "type", "close-circle");
 	      set_custom_element_data(goa_icon, "fillcolor", goa_icon_fillcolor_value =
 	      /*_error*/
-	      ctx[4] ? "var(--goa-color-status-emergency)" :
+	      ctx[5] ? "var(--goa-color-status-emergency)" :
 	      /*_hovering*/
-	      ctx[3] ? "var(--goa-color-interactive--hover)" : "var(--color-gray-600)");
+	      ctx[4] ? "var(--goa-color-interactive--hover)" : "var(--color-gray-600)");
 	      set_custom_element_data(goa_icon, "opacity", goa_icon_opacity_value =
 	      /*_error*/
-	      ctx[4] ?
+	      ctx[5] ?
 	      /*_hovering*/
-	      ctx[3] ? 1 : 0.5 : 1);
+	      ctx[4] ? 1 : 0.5 : 1);
 	    },
 
 	    m(target, anchor) {
@@ -3530,21 +3530,21 @@
 	    p(ctx, dirty) {
 	      if (dirty &
 	      /*_error, _hovering*/
-	      24 && goa_icon_fillcolor_value !== (goa_icon_fillcolor_value =
+	      48 && goa_icon_fillcolor_value !== (goa_icon_fillcolor_value =
 	      /*_error*/
-	      ctx[4] ? "var(--goa-color-status-emergency)" :
+	      ctx[5] ? "var(--goa-color-status-emergency)" :
 	      /*_hovering*/
-	      ctx[3] ? "var(--goa-color-interactive--hover)" : "var(--color-gray-600)")) {
+	      ctx[4] ? "var(--goa-color-interactive--hover)" : "var(--color-gray-600)")) {
 	        set_custom_element_data(goa_icon, "fillcolor", goa_icon_fillcolor_value);
 	      }
 
 	      if (dirty &
 	      /*_error, _hovering*/
-	      24 && goa_icon_opacity_value !== (goa_icon_opacity_value =
+	      48 && goa_icon_opacity_value !== (goa_icon_opacity_value =
 	      /*_error*/
-	      ctx[4] ?
+	      ctx[5] ?
 	      /*_hovering*/
-	      ctx[3] ? 1 : 0.5 : 1)) {
+	      ctx[4] ? 1 : 0.5 : 1)) {
 	        set_custom_element_data(goa_icon, "opacity", goa_icon_opacity_value);
 	      }
 	    },
@@ -3569,7 +3569,7 @@
 	  ctx[0] && create_if_block_1$8(ctx);
 	  let if_block1 =
 	  /*_deletable*/
-	  ctx[5] && create_if_block$e(ctx);
+	  ctx[6] && create_if_block$e(ctx);
 	  return {
 	    c() {
 	      div1 = element("div");
@@ -3588,10 +3588,13 @@
 	      attr(div1, "tabindex", "0");
 	      toggle_class(div1, "deletable",
 	      /*_deletable*/
-	      ctx[5]);
+	      ctx[6]);
 	      toggle_class(div1, "error",
 	      /*_error*/
-	      ctx[4]);
+	      ctx[5]);
+	      toggle_class(div1, "variant",
+	      /*variant*/
+	      ctx[2]);
 	    },
 
 	    m(target, anchor) {
@@ -3604,20 +3607,20 @@
 	      if (if_block1) if_block1.m(div1, null);
 	      /*div1_binding*/
 
-	      ctx[9](div1);
+	      ctx[10](div1);
 
 	      if (!mounted) {
 	        dispose = [listen(div1, "click",
 	        /*click_handler*/
-	        ctx[10]), listen(div1, "mouseover",
+	        ctx[11]), listen(div1, "mouseover",
 	        /*mouseover_handler*/
-	        ctx[11]), listen(div1, "mouseout",
+	        ctx[12]), listen(div1, "mouseout",
 	        /*mouseout_handler*/
-	        ctx[12]), listen(div1, "focus",
+	        ctx[13]), listen(div1, "focus",
 	        /*focus_handler*/
-	        ctx[13]), listen(div1, "blur",
+	        ctx[14]), listen(div1, "blur",
 	        /*blur_handler*/
-	        ctx[14])];
+	        ctx[15])];
 	        mounted = true;
 	      }
 	    },
@@ -3646,7 +3649,7 @@
 
 	      if (
 	      /*_deletable*/
-	      ctx[5]) {
+	      ctx[6]) {
 	        if (if_block1) {
 	          if_block1.p(ctx, dirty);
 	        } else {
@@ -3661,18 +3664,26 @@
 
 	      if (dirty &
 	      /*_deletable*/
-	      32) {
+	      64) {
 	        toggle_class(div1, "deletable",
 	        /*_deletable*/
-	        ctx[5]);
+	        ctx[6]);
 	      }
 
 	      if (dirty &
 	      /*_error*/
-	      16) {
+	      32) {
 	        toggle_class(div1, "error",
 	        /*_error*/
-	        ctx[4]);
+	        ctx[5]);
+	      }
+
+	      if (dirty &
+	      /*variant*/
+	      4) {
+	        toggle_class(div1, "variant",
+	        /*variant*/
+	        ctx[2]);
 	      }
 	    },
 
@@ -3685,7 +3696,7 @@
 	      if (if_block1) if_block1.d();
 	      /*div1_binding*/
 
-	      ctx[9](null);
+	      ctx[10](null);
 	      mounted = false;
 	      run_all(dispose);
 	    }
@@ -3706,6 +3717,9 @@
 	  let {
 	    content
 	  } = $$props;
+	  let {
+	    variant
+	  } = $$props;
 	  let el;
 	  let _hovering = false; // booleans
 
@@ -3724,42 +3738,43 @@
 	  function div1_binding($$value) {
 	    binding_callbacks[$$value ? 'unshift' : 'push'](() => {
 	      el = $$value;
-	      $$invalidate(2, el);
+	      $$invalidate(3, el);
 	    });
 	  }
 
 	  const click_handler = e => _deletable && onDelete(e);
 
-	  const mouseover_handler = () => $$invalidate(3, _hovering = true);
+	  const mouseover_handler = () => $$invalidate(4, _hovering = true);
 
-	  const mouseout_handler = () => $$invalidate(3, _hovering = false);
+	  const mouseout_handler = () => $$invalidate(4, _hovering = false);
 
-	  const focus_handler = () => $$invalidate(3, _hovering = false);
+	  const focus_handler = () => $$invalidate(4, _hovering = false);
 
-	  const blur_handler = () => $$invalidate(3, _hovering = false);
+	  const blur_handler = () => $$invalidate(4, _hovering = false);
 
 	  $$self.$$set = $$props => {
 	    if ('leadingicon' in $$props) $$invalidate(0, leadingicon = $$props.leadingicon);
-	    if ('error' in $$props) $$invalidate(7, error = $$props.error);
-	    if ('deletable' in $$props) $$invalidate(8, deletable = $$props.deletable);
+	    if ('error' in $$props) $$invalidate(8, error = $$props.error);
+	    if ('deletable' in $$props) $$invalidate(9, deletable = $$props.deletable);
 	    if ('content' in $$props) $$invalidate(1, content = $$props.content);
+	    if ('variant' in $$props) $$invalidate(2, variant = $$props.variant);
 	  };
 
 	  $$self.$$.update = () => {
 	    if ($$self.$$.dirty &
 	    /*error*/
-	    128) {
-	      $$invalidate(4, _error = toBoolean(error));
+	    256) {
+	      $$invalidate(5, _error = toBoolean(error));
 	    }
 
 	    if ($$self.$$.dirty &
 	    /*deletable*/
-	    256) {
-	      $$invalidate(5, _deletable = toBoolean(deletable));
+	    512) {
+	      $$invalidate(6, _deletable = toBoolean(deletable));
 	    }
 	  };
 
-	  return [leadingicon, content, el, _hovering, _error, _deletable, onDelete, error, deletable, div1_binding, click_handler, mouseover_handler, mouseout_handler, focus_handler, blur_handler];
+	  return [leadingicon, content, variant, el, _hovering, _error, _deletable, onDelete, error, deletable, div1_binding, click_handler, mouseover_handler, mouseout_handler, focus_handler, blur_handler];
 	}
 
 	class Chip extends SvelteElement {
@@ -3772,9 +3787,10 @@
 	      customElement: true
 	    }, instance$s, create_fragment$u, safe_not_equal, {
 	      leadingicon: 0,
-	      error: 7,
-	      deletable: 8,
-	      content: 1
+	      error: 8,
+	      deletable: 9,
+	      content: 1,
+	      variant: 2
 	    }, null);
 
 	    if (options) {
@@ -3790,7 +3806,7 @@
 	  }
 
 	  static get observedAttributes() {
-	    return ["leadingicon", "error", "deletable", "content"];
+	    return ["leadingicon", "error", "deletable", "content", "variant"];
 	  }
 
 	  get leadingicon() {
@@ -3805,7 +3821,7 @@
 	  }
 
 	  get error() {
-	    return this.$$.ctx[7];
+	    return this.$$.ctx[8];
 	  }
 
 	  set error(error) {
@@ -3816,7 +3832,7 @@
 	  }
 
 	  get deletable() {
-	    return this.$$.ctx[8];
+	    return this.$$.ctx[9];
 	  }
 
 	  set deletable(deletable) {
@@ -3837,6 +3853,17 @@
 	    flush();
 	  }
 
+	  get variant() {
+	    return this.$$.ctx[2];
+	  }
+
+	  set variant(variant) {
+	    this.$$set({
+	      variant
+	    });
+	    flush();
+	  }
+
 	}
 
 	customElements.define("goa-chip", Chip);
@@ -14489,6 +14516,7 @@
 	      deletable = _c === void 0 ? false : _c,
 	      _d = _a.error,
 	      error = _d === void 0 ? false : _d,
+	      variant = _a.variant,
 	      content = _a.content,
 	      onClick = _a.onClick;
 	  var el = react.useRef(null);
@@ -14511,7 +14539,8 @@
 	    leadingicon: leadingIcon,
 	    error: error,
 	    deletable: deletable,
-	    content: content
+	    content: content,
+	    variant: variant
 	  }, void 0);
 	};
 
@@ -14844,46 +14873,73 @@
 	};
 	var GoAInputDate = function GoAInputDate(_a) {
 	  var value = _a.value,
-	      min = _a.min,
-	      max = _a.max,
+	      _b = _a.min,
+	      min = _b === void 0 ? "" : _b,
+	      _c = _a.max,
+	      max = _c === void 0 ? "" : _c,
 	      props = __rest(_a, ["value", "min", "max"]);
 
-	  var _value = typeof value === "string" ? new Date(value) : value;
+	  var _format = function _format(value) {
+	    return dateFns.format(value, "yyyy-MM-dd");
+	  };
+
+	  var _value = _format(typeof value === "string" ? dateFns.parseISO(value) : value);
 
-	  var _min = min ? dateFns.format(new Date(min), "yyyy-MM-dd") : "";
+	  var _min = min && _format(typeof min === "string" ? dateFns.parseISO(min) : min);
 
-	  var _max = max ? dateFns.format(new Date(max), "yyyy-MM-dd") : "";
+	  var _max = max && _format(typeof max === "string" ? dateFns.parseISO(max) : max);
+
+	  var onDateChange = function onDateChange(name, value) {
+	    props.onChange(name, dateFns.parseISO(value));
+	  };
 
 	  return jsxRuntime.jsx(GoAInput, __assign({}, props, {
+	    onChange: onDateChange,
 	    min: _min,
 	    max: _max,
-	    value: dateFns.format(_value, "yyyy-MM-dd"),
+	    value: _value,
 	    type: "date"
 	  }), void 0);
 	};
 	var GoAInputTime = function GoAInputTime(_a) {
-	  var value = _a.value,
-	      props = __rest(_a, ["value"]);
+	  var value = _a.value;
+	      _a.min;
+	      _a.max;
+	      var props = __rest(_a, ["value", "min", "max"]);
+
+	  var onDateChange = function onDateChange(name, value) {
+	    props.onChange(name, dateFns.parseISO(value));
+	  };
 
 	  try {
-	    var d = typeof value === "string" ? new Date(value) : value;
+	    var d = typeof value === "string" ? dateFns.parseISO(value) : value;
 	    return jsxRuntime.jsx(GoAInput, __assign({}, props, {
+	      onChange: onDateChange,
 	      value: dateFns.format(d, "hh:mm"),
 	      type: "time"
 	    }), void 0);
 	  } catch (e) {
 	    return jsxRuntime.jsx(GoAInput, __assign({}, props, {
+	      onChange: onDateChange,
 	      value: value,
 	      type: "time"
 	    }), void 0);
 	  }
 	};
 	var GoAInputDateTime = function GoAInputDateTime(_a) {
-	  var value = _a.value,
-	      props = __rest(_a, ["value"]);
+	  var value = _a.value;
+	      _a.min;
+	      _a.max;
+	      var props = __rest(_a, ["value", "min", "max"]);
+
+	  var d = typeof value === "string" ? dateFns.parseISO(value) : value;
+
+	  var onDateChange = function onDateChange(name, value) {
+	    props.onChange(name, dateFns.parseISO(value));
+	  };
 
-	  var d = typeof value === "string" ? new Date(value) : value;
 	  return jsxRuntime.jsx(GoAInput, __assign({}, props, {
+	    onChange: onDateChange,
 	    value: dateFns.format(d, "yyyy-MM-dd'T'hh:mm"),
 	    type: "datetime-local"
 	  }), void 0);
@@ -14928,12 +14984,19 @@
 	  }), void 0);
 	};
 	var GoAInputNumber = function GoAInputNumber(_a) {
-	  var min = _a.min,
-	      max = _a.max,
+	  var _b = _a.min,
+	      min = _b === void 0 ? Number.MIN_VALUE : _b,
+	      _c = _a.max,
+	      max = _c === void 0 ? Number.MAX_VALUE : _c,
 	      value = _a.value,
 	      props = __rest(_a, ["min", "max", "value"]);
 
+	  var onNumberChange = function onNumberChange(name, value) {
+	    props.onChange(name, parseInt(value));
+	  };
+
 	  return jsxRuntime.jsx(GoAInput, __assign({}, props, {
+	    onChange: onNumberChange,
 	    min: min === null || min === void 0 ? void 0 : min.toString(),
 	    max: max === null || max === void 0 ? void 0 : max.toString(),
 	    value: value.toString(),