@abgov/react-components 3.4.0-beta.42 → 3.4.0-beta.46

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -195,10 +195,49 @@
195
195
  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
196
196
  }
197
197
 
198
- var css_248z$1 = "/* Palette */\n/* Semantic usages */\n.app-version-header-module_goa-app-version-header__3ngyf {\n display: flex;\n justify-content: center;\n background-color: #dcdcdc; }\n .app-version-header-module_goa-app-version-header__3ngyf .app-version-header-module_content-wrapper__15exd {\n display: flex;\n flex: 1 1 auto;\n margin: 0 24px;\n max-width: 1200px; }\n @media (min-width: 768px) {\n .app-version-header-module_goa-app-version-header__3ngyf .app-version-header-module_content-wrapper__15exd {\n margin: 0 72px; } }\n .app-version-header-module_goa-app-version-header__3ngyf .app-version-header-module_content-wrapper__15exd .app-version-header-module_environment-and-version__1-GPd {\n display: flex;\n flex: 1 1 auto;\n justify-content: center;\n padding-left: 28px; }\n .app-version-header-module_goa-app-version-header__3ngyf .app-version-header-module_content-wrapper__15exd .app-version-header-module_close__1beXI {\n margin-left: auto;\n width: 28px;\n text-align: right;\n color: #0070c4;\n font-weight: bold;\n font-size: small;\n align-self: center;\n cursor: pointer; }\n";
198
+ var css_248z$1 = "/* Palette */\n/* Semantic usages */\n.app-version-header-module_goa-app-version-header__3ngyf {\n display: flex;\n justify-content: center;\n background-color: #dcdcdc; }\n .app-version-header-module_goa-app-version-header__3ngyf .app-version-header-module_content-wrapper__15exd {\n display: flex;\n flex: 1 1 auto;\n margin: 0 24px;\n max-width: 1200px; }\n @media (min-width: 768px) {\n .app-version-header-module_goa-app-version-header__3ngyf .app-version-header-module_content-wrapper__15exd {\n margin: 0 72px; } }\n .app-version-header-module_goa-app-version-header__3ngyf .app-version-header-module_content-wrapper__15exd .app-version-header-module_environment-and-version__1-GPd {\n display: flex;\n flex: 1 1 auto;\n justify-content: center;\n padding-left: 20px; }\n .app-version-header-module_goa-app-version-header__3ngyf .app-version-header-module_content-wrapper__15exd .app-version-header-module_close__1beXI {\n margin-left: auto;\n width: 20px;\n text-align: right;\n font-weight: bold;\n font-size: small;\n align-self: center;\n cursor: pointer;\n display: flex; }\n .app-version-header-module_goa-app-version-header__3ngyf .app-version-header-module_content-wrapper__15exd .app-version-header-module_close__1beXI svg {\n color: #0070c4; }\n";
199
199
  var styles$1 = {"goa-app-version-header":"app-version-header-module_goa-app-version-header__3ngyf","content-wrapper":"app-version-header-module_content-wrapper__15exd","environment-and-version":"app-version-header-module_environment-and-version__1-GPd","close":"app-version-header-module_close__1beXI"};
200
200
  styleInject(css_248z$1);
201
201
 
202
+ var css_248z$2 = ".goa-icon {\n display: flex; }\n\n.goa-icon-button {\n cursor: pointer;\n display: inline-flex;\n align-items: center;\n justify-content: center; }\n\n/* GoA */\n.goa-icon-button-goa {\n padding: 0.25rem;\n border-radius: 0.5rem;\n color: var(--color-primary);\n fill: var(--color-primary);\n cursor: pointer;\n transition: background-color 100ms ease-in, transform 100ms ease-in; }\n\n.goa-icon-button-goa:active {\n transform: scale(0.9); }\n\n.goa-icon-button-goa:hover {\n background-color: var(--color-primary-l1); }\n\n/* Round */\n.goa-icon-button-round {\n padding: 0.4rem;\n border-radius: 999px;\n transition: background-color 100ms ease-in, transform 100ms ease-in;\n cursor: pointer; }\n\n.goa-icon-button-round:active {\n transform: scale(0.9); }\n\n.goa-icon-button-round:hover {\n background: rgba(0, 0, 0, 0.1); }\n";
203
+ styleInject(css_248z$2);
204
+
205
+ function GoAIcon(_ref) {
206
+ var type = _ref.type,
207
+ _ref$style = _ref.style,
208
+ style = _ref$style === void 0 ? 'outline' : _ref$style,
209
+ _ref$size = _ref.size,
210
+ size = _ref$size === void 0 ? 'small' : _ref$size;
211
+
212
+ var _size = getSize(size);
213
+
214
+ return /*#__PURE__*/React__default.createElement("div", {
215
+ style: {
216
+ width: _size
217
+ },
218
+ className: "goa-icon",
219
+ "data-testid": "icon-".concat(type)
220
+ }, /*#__PURE__*/React__default.createElement("ion-icon", {
221
+ style: {
222
+ fontSize: _size
223
+ },
224
+ name: style === 'filled' ? type : "".concat(type, "-").concat(style)
225
+ }));
226
+ }
227
+
228
+ function getSize(size) {
229
+ switch (size) {
230
+ case 'small':
231
+ return "16px";
232
+
233
+ case 'medium':
234
+ return "24px";
235
+
236
+ case 'large':
237
+ return "32px";
238
+ }
239
+ }
240
+
202
241
  var GoAAppVersionHeader = function GoAAppVersionHeader(_ref) {
203
242
  var isProdEnvironment = _ref.isProdEnvironment,
204
243
  environment = _ref.environment,
@@ -223,12 +262,14 @@
223
262
  onClick: function onClick() {
224
263
  return setClosed(true);
225
264
  }
226
- }, "\u2716")));
265
+ }, /*#__PURE__*/React__default.createElement(GoAIcon, {
266
+ type: "close"
267
+ }))));
227
268
  };
228
269
 
229
- var css_248z$2 = ":root {\n /* font-size */\n --fs-xs: 0.75rem;\n --fs-sm: 0.875rem;\n --fs-base: 1.125rem;\n --fs-lg: 1.25rem;\n --fs-xl: 1.5rem;\n --fs-2xl: 2.25rem;\n --fs-3xl: 3rem;\n /* font-weight */\n --fw-thin: 100;\n --fw-light: 300;\n --fw-regular: 400;\n --fw-medium: 500;\n --fw-bold: 700;\n --fw-black: 900;\n /* line-height */\n --lh-xs: 0.875rem;\n --lh-sm: 1rem;\n --lh-base: 1.5rem;\n --lh-lg: 2rem;\n --lh-xl: 2.75rem;\n --lh-2xl: 3.5rem;\n --border-radius-sm: 0.15rem;\n --border-radius: 0.25rem;\n --border-radius-base: 0.25rem;\n --border-radius-lg: 0.5rem;\n --spacing-1: 0.5rem;\n --spacing-2: 0.875rem;\n --spacing-3: 1.75rem;\n --input-padding: 0.5rem;\n --input-border-radius: 0.25rem;\n --input-font-size: var(--fs-base); }\n\n:root {\n --color-white: #fff;\n --color-black: #333;\n --color-gray-l5: #f1f1f1;\n --color-gray-l2: #adadad;\n --color-gray-l1: #dcdcdc;\n --color-gray-d1: #666;\n --color-gray-d3: #333;\n --color-gray-100: #f1f1f1;\n --color-gray-200: #dcdcdc;\n --color-gray-500: #adadad;\n --color-gray-700: #666;\n --color-gray-900: #333;\n --color-tealblue-100: #c8eefa;\n --color-tealblue-500: #0081a2;\n --color-tealblue-900: #005072;\n --color-orange: #feba35;\n --color-red: #ec040b;\n --color-green: hsl(148, 100%, 26%);\n --color-primary: #0070c4;\n --color-primary-d1: #004f84;\n --color-primary--hover: var(--color-primary-d1);\n --color-text: var(--color-gray-d3);\n --color-error: var(--color-red);\n --color-disabled: var(--color-gray-l2);\n --color-input-background: var(--color-white);\n --color-input-border: var(--color-gray-d1);\n --color-input-border--hover: var(--color-primary-d1);\n --color-input: var(--color-gray-d3);\n --color-input--focused: var(--color-orange);\n --color-button-primary: var(--color-primary);\n --color-button-primary--hover: var(--color-primary-d1);\n --color-button-tertiary: var(--color-gray-l2);\n --color-button-tertiary--hover: var(--color-gray-l5); }\n\nh1:first-child,\nh2:first-child,\nh3:first-child {\n margin-top: 0; }\n\n/* Base header margins */\nh1,\nh2,\nh3,\nh4 {\n margin-bottom: 1rem; }\n\n/* Font sizes */\nh1 {\n font-size: var(--fs-3xl);\n line-height: var(--lh-2xl);\n font-weight: var(--fw-bold); }\n\nh2 {\n font-size: var(--fs-2xl);\n line-height: var(--lh-xl);\n font-weight: var(--fw-regular); }\n\nh3 {\n font-size: var(--fs-xl);\n line-height: var(--lh-lg);\n font-weight: var(--fw-regular); }\n\nh4,\nh5,\nh6 {\n font-size: var(--fs-base);\n line-height: var(--lh-base);\n font-weight: var(--fw-bold); }\n\n/* Set top margin to subsequent headers */\nh1 + h2,\nh1 + h3,\nh1 + h4,\nh2 + h3,\nh2 + h4,\nh3 + h4 {\n margin-top: 2rem; }\n\np {\n margin-bottom: 1rem;\n font-size: var(--fs-base); }\n\nhr + h1,\nhr + h2,\nhr + h3 {\n margin-top: 0; }\n\nem {\n font-size: var(--fs-xs);\n line-height: var(--lh-sm);\n color: var(--color-gray); }\n\nsmall {\n font-size: var(--fs-xs);\n font-style: normal;\n color: var(--color-gray); }\n\n.card-module_goa-card__OjjJX {\n --card-spacing: 1rem;\n --card-child-spacing: 0.5rem;\n box-sizing: border-box;\n background: var(--color-white);\n transition: opacity 300ms ease-in-out;\n border-radius: var(--border-radius); }\n .card-module_goa-card__OjjJX a:hover {\n color: var(--color-primary--hover);\n text-decoration: none; }\n .card-module_goa-card__OjjJX a:focus {\n outline: 3px solid var(--color-orange);\n outline-offset: 0; }\n .card-module_goa-card__OjjJX h6 {\n font-size: var(--fs-xs);\n line-height: var(--lh-sm);\n font-weight: var(--fw-base);\n color: var(--color-gray);\n margin: 0;\n padding: 0; }\n\n.card-module_goa-card--tertiary__1BV7k {\n border-radius: var(--border-radius-sm); }\n\n.card-module_goa-card-top__RM4IA {\n border-top-left-radius: var(--border-radius);\n border-top-right-radius: var(--border-radius);\n min-height: 0.5rem; }\n\n.card-module_goa-card-top--primary__g2XEU {\n background-color: var(--color-tealblue-500); }\n\n.card-module_goa-card-top--secondary__mSrLl {\n background-color: var(--color-gray-200); }\n\n.card-module_goa-card-top--tertiary__2fG-A {\n display: none; }\n\n.card-module_goa-card__OjjJX .card-module_goa-card__OjjJX .card-module_goa-card-top--primary__g2XEU,\n.card-module_goa-card__OjjJX .card-module_goa-card__OjjJX .card-module_goa-card-top--secondary__mSrLl {\n min-height: 0.2rem; }\n\n.card-module_goa-card-details__4KtfS > .card-module_goa-card__OjjJX:first-child {\n margin-top: 0; }\n\n.card-module_goa-card-details__4KtfS > .card-module_goa-card__OjjJX h3 {\n font-size: var(--fs-lg); }\n\n.card-module_goa-card-details__4KtfS > .card-module_goa-card__OjjJX {\n margin-top: 1rem; }\n\n.card-module_goa-card-content__3gE5R {\n padding: var(--card-spacing);\n border-top-width: 0;\n border: 1px solid var(--color-gray-200);\n border-bottom-left-radius: var(--border-radius);\n border-bottom-right-radius: var(--border-radius); }\n\n.card-module_goa-card-content--tertiary__1dbYr {\n border-radius: var(--border-radius-sm);\n padding: calc(var(--card-spacing) / 2); }\n\n.card-module_goa-card-details__4KtfS ul {\n margin-left: var(--card-spacing); }\n";
270
+ var css_248z$3 = ":root {\n /* font-size */\n --fs-xs: 0.75rem;\n --fs-sm: 0.875rem;\n --fs-base: 1.125rem;\n --fs-lg: 1.25rem;\n --fs-xl: 1.5rem;\n --fs-2xl: 2.25rem;\n --fs-3xl: 3rem;\n /* font-weight */\n --fw-thin: 100;\n --fw-light: 300;\n --fw-regular: 400;\n --fw-medium: 500;\n --fw-bold: 700;\n --fw-black: 900;\n /* line-height */\n --lh-xs: 0.875rem;\n --lh-sm: 1rem;\n --lh-base: 1.5rem;\n --lh-lg: 2rem;\n --lh-xl: 2.75rem;\n --lh-2xl: 3.5rem;\n --border-radius-sm: 0.15rem;\n --border-radius: 0.25rem;\n --border-radius-base: 0.25rem;\n --border-radius-lg: 0.5rem;\n --spacing-1: 0.5rem;\n --spacing-2: 0.875rem;\n --spacing-3: 1.75rem;\n --input-padding: 0.5rem;\n --input-border-radius: 0.25rem;\n --input-font-size: var(--fs-base); }\n\n:root {\n --color-white: #fff;\n --color-black: #333;\n --color-gray-l5: #f1f1f1;\n --color-gray-l2: #adadad;\n --color-gray-l1: #dcdcdc;\n --color-gray-d1: #666;\n --color-gray-d3: #333;\n --color-gray-100: #f1f1f1;\n --color-gray-200: #dcdcdc;\n --color-gray-500: #adadad;\n --color-gray-700: #666;\n --color-gray-900: #333;\n --color-tealblue-100: #c8eefa;\n --color-tealblue-500: #0081a2;\n --color-tealblue-900: #005072;\n --color-orange: #feba35;\n --color-red: #ec040b;\n --color-green: hsl(148, 100%, 26%);\n --color-primary-l1: #e3f2ff;\n --color-primary: #0070c4;\n --color-primary-d1: #004f84;\n --color-primary--hover: var(--color-primary-d1);\n --color-text: var(--color-gray-d3);\n --color-error: var(--color-red);\n --color-disabled: var(--color-gray-l2);\n --color-input-background: var(--color-white);\n --color-input-border: var(--color-gray-d1);\n --color-input-border--hover: var(--color-primary-d1);\n --color-input: var(--color-gray-d3);\n --color-input--focused: var(--color-orange);\n --color-button-primary: var(--color-primary);\n --color-button-primary--hover: var(--color-primary-d1);\n --color-button-tertiary: var(--color-gray-l2);\n --color-button-tertiary--hover: var(--color-gray-l5); }\n\nh1:first-child,\nh2:first-child,\nh3:first-child {\n margin-top: 0; }\n\n/* Base header margins */\nh1,\nh2,\nh3,\nh4 {\n margin-bottom: 1rem; }\n\n/* Font sizes */\nh1 {\n font-size: var(--fs-3xl);\n line-height: var(--lh-2xl);\n font-weight: var(--fw-bold); }\n\nh2 {\n font-size: var(--fs-2xl);\n line-height: var(--lh-xl);\n font-weight: var(--fw-regular); }\n\nh3 {\n font-size: var(--fs-xl);\n line-height: var(--lh-lg);\n font-weight: var(--fw-regular); }\n\nh4,\nh5,\nh6 {\n font-size: var(--fs-base);\n line-height: var(--lh-base);\n font-weight: var(--fw-bold); }\n\n/* Set top margin to subsequent headers */\nh1 + h2,\nh1 + h3,\nh1 + h4,\nh2 + h3,\nh2 + h4,\nh3 + h4 {\n margin-top: 2rem; }\n\np {\n margin-bottom: 1rem;\n font-size: var(--fs-base); }\n\nhr + h1,\nhr + h2,\nhr + h3 {\n margin-top: 0; }\n\nem {\n font-size: var(--fs-xs);\n line-height: var(--lh-sm);\n color: var(--color-gray); }\n\nsmall {\n font-size: var(--fs-xs);\n font-style: normal;\n color: var(--color-gray); }\n\n.card-module_goa-card__OjjJX {\n --card-spacing: 1rem;\n --card-child-spacing: 0.5rem;\n box-sizing: border-box;\n background: var(--color-white);\n transition: opacity 300ms ease-in-out;\n border-radius: var(--border-radius); }\n .card-module_goa-card__OjjJX a:hover {\n color: var(--color-primary--hover);\n text-decoration: none; }\n .card-module_goa-card__OjjJX a:focus {\n outline: 3px solid var(--color-orange);\n outline-offset: 0; }\n .card-module_goa-card__OjjJX h6 {\n font-size: var(--fs-xs);\n line-height: var(--lh-sm);\n font-weight: var(--fw-base);\n color: var(--color-gray);\n margin: 0;\n padding: 0; }\n\n.card-module_goa-card--tertiary__1BV7k {\n border-radius: var(--border-radius-sm); }\n\n.card-module_goa-card-top__RM4IA {\n border-top-left-radius: var(--border-radius);\n border-top-right-radius: var(--border-radius);\n min-height: 0.5rem; }\n\n.card-module_goa-card-top--primary__g2XEU {\n background-color: var(--color-tealblue-500); }\n\n.card-module_goa-card-top--secondary__mSrLl {\n background-color: var(--color-gray-200); }\n\n.card-module_goa-card-top--tertiary__2fG-A {\n display: none; }\n\n.card-module_goa-card__OjjJX .card-module_goa-card__OjjJX .card-module_goa-card-top--primary__g2XEU,\n.card-module_goa-card__OjjJX .card-module_goa-card__OjjJX .card-module_goa-card-top--secondary__mSrLl {\n min-height: 0.2rem; }\n\n.card-module_goa-card-details__4KtfS > .card-module_goa-card__OjjJX:first-child {\n margin-top: 0; }\n\n.card-module_goa-card-details__4KtfS > .card-module_goa-card__OjjJX h3 {\n font-size: var(--fs-lg); }\n\n.card-module_goa-card-details__4KtfS > .card-module_goa-card__OjjJX {\n margin-top: 1rem; }\n\n.card-module_goa-card-content__3gE5R {\n padding: var(--card-spacing);\n border-top-width: 0;\n border: 1px solid var(--color-gray-200);\n border-bottom-left-radius: var(--border-radius);\n border-bottom-right-radius: var(--border-radius); }\n\n.card-module_goa-card-content--tertiary__1dbYr {\n border-radius: var(--border-radius-sm);\n padding: calc(var(--card-spacing) / 2); }\n\n.card-module_goa-card-details__4KtfS ul {\n margin-left: var(--card-spacing); }\n";
230
271
  var css = {"goa-card":"card-module_goa-card__OjjJX","goa-card--tertiary":"card-module_goa-card--tertiary__1BV7k","goa-card-top":"card-module_goa-card-top__RM4IA","goa-card-top--primary":"card-module_goa-card-top--primary__g2XEU","goa-card-top--secondary":"card-module_goa-card-top--secondary__mSrLl","goa-card-top--tertiary":"card-module_goa-card-top--tertiary__2fG-A","goa-card-details":"card-module_goa-card-details__4KtfS","goa-card-content":"card-module_goa-card-content__3gE5R","goa-card-content--tertiary":"card-module_goa-card-content--tertiary__1dbYr"};
231
- styleInject(css_248z$2);
272
+ styleInject(css_248z$3);
232
273
 
233
274
  var GoACard = function GoACard(_ref) {
234
275
  var title = _ref.title,
@@ -265,8 +306,8 @@
265
306
  }, children)));
266
307
  };
267
308
 
268
- var css_248z$3 = ".goa-flex-row {\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n justify-content: space-between;\n align-items: top;\n margin-bottom: 1.5rem; }\n .goa-flex-row *:last-child {\n margin-bottom: 0; }\n\n.goa-flex-row > * {\n flex: 1 1 30ch; }\n";
269
- styleInject(css_248z$3);
309
+ var css_248z$4 = ".goa-flex-row {\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n justify-content: space-between;\n align-items: top;\n margin-bottom: 1.5rem; }\n .goa-flex-row *:last-child {\n margin-bottom: 0; }\n\n.goa-flex-row > * {\n flex: 1 1 30ch; }\n";
310
+ styleInject(css_248z$4);
270
311
 
271
312
  var GoAFlexRow = function GoAFlexRow(_ref) {
272
313
  var gap = _ref.gap,
@@ -316,8 +357,8 @@
316
357
  }, children);
317
358
  };
318
359
 
319
- var css_248z$4 = ":root {\n --color-white: #fff;\n --color-black: #333;\n --color-gray-l5: #f1f1f1;\n --color-gray-l2: #adadad;\n --color-gray-l1: #dcdcdc;\n --color-gray-d1: #666;\n --color-gray-d3: #333;\n --color-gray-100: #f1f1f1;\n --color-gray-200: #dcdcdc;\n --color-gray-500: #adadad;\n --color-gray-700: #666;\n --color-gray-900: #333;\n --color-tealblue-100: #c8eefa;\n --color-tealblue-500: #0081a2;\n --color-tealblue-900: #005072;\n --color-orange: #feba35;\n --color-red: #ec040b;\n --color-green: hsl(148, 100%, 26%);\n --color-primary: #0070c4;\n --color-primary-d1: #004f84;\n --color-primary--hover: var(--color-primary-d1);\n --color-text: var(--color-gray-d3);\n --color-error: var(--color-red);\n --color-disabled: var(--color-gray-l2);\n --color-input-background: var(--color-white);\n --color-input-border: var(--color-gray-d1);\n --color-input-border--hover: var(--color-primary-d1);\n --color-input: var(--color-gray-d3);\n --color-input--focused: var(--color-orange);\n --color-button-primary: var(--color-primary);\n --color-button-primary--hover: var(--color-primary-d1);\n --color-button-tertiary: var(--color-gray-l2);\n --color-button-tertiary--hover: var(--color-gray-l5); }\n\n:root {\n /* font-size */\n --fs-xs: 0.75rem;\n --fs-sm: 0.875rem;\n --fs-base: 1.125rem;\n --fs-lg: 1.25rem;\n --fs-xl: 1.5rem;\n --fs-2xl: 2.25rem;\n --fs-3xl: 3rem;\n /* font-weight */\n --fw-thin: 100;\n --fw-light: 300;\n --fw-regular: 400;\n --fw-medium: 500;\n --fw-bold: 700;\n --fw-black: 900;\n /* line-height */\n --lh-xs: 0.875rem;\n --lh-sm: 1rem;\n --lh-base: 1.5rem;\n --lh-lg: 2rem;\n --lh-xl: 2.75rem;\n --lh-2xl: 3.5rem;\n --border-radius-sm: 0.15rem;\n --border-radius: 0.25rem;\n --border-radius-base: 0.25rem;\n --border-radius-lg: 0.5rem;\n --spacing-1: 0.5rem;\n --spacing-2: 0.875rem;\n --spacing-3: 1.75rem;\n --input-padding: 0.5rem;\n --input-border-radius: 0.25rem;\n --input-font-size: var(--fs-base); }\n\n.goa-form {\n box-sizing: border-box; }\n\n.goa-form *,\n.goa-form *:before,\n.goa-form *:after {\n box-sizing: inherit; }\n\n.goa-form-row {\n display: flex;\n flex-direction: column;\n justify-content: space-between; }\n\n@media screen and (min-width: 640px) {\n .goa-form-row {\n gap: 1.75rem;\n flex-direction: row; } }\n\n.goa-form-item {\n flex: 1 1 auto;\n margin-bottom: 1rem; }\n .goa-form-item label {\n display: block;\n font-weight: bold;\n color: #333;\n font-size: var(--fs-base);\n line-height: calc(var(--fs-base) + 1rem); }\n .goa-form-item label em {\n color: var(--color-gray-d1);\n font-style: normal;\n font-weight: var(--fw-regular);\n font-size: var(--fs-sm); }\n .goa-form-item input,\n .goa-form-item textarea {\n display: block;\n width: 100%;\n font-size: var(--fs-base); }\n .goa-form-item.goa-state--error .error-msg {\n font-size: var(--fs-sm);\n line-height: calc(var(--fs-sm) + 0.5rem);\n color: var(--color-red); }\n\n.help-msg {\n font-size: var(--fs-sm);\n color: var(--color-gray-d3);\n line-height: calc(var(--fs-sm) + 0.5rem); }\n\n.goa-form-actions {\n display: flex;\n flex-wrap: wrap;\n margin-top: 2rem; }\n .goa-form-actions button,\n .goa-form-actions .goa-link-button {\n margin: 0; }\n @media (max-width: 639px) {\n .goa-form-actions button,\n .goa-form-actions .goa-link-button {\n width: 100%; }\n .goa-form-actions button + button,\n .goa-form-actions button + .goa-link-button,\n .goa-form-actions .goa-link-button + button,\n .goa-form-actions .goa-link-button + .goa-link-button {\n margin-top: 0.5rem; } }\n @media (min-width: 640px) {\n .goa-form-actions button,\n .goa-form-actions .goa-link-button {\n min-width: 6rem; }\n .goa-form-actions button + button,\n .goa-form-actions button + .goa-link-button,\n .goa-form-actions .goa-link-button + button,\n .goa-form-actions .goa-link-button + .goa-link-button {\n margin-left: 0.5rem; } }\n\n.goa-form-actions--left {\n justify-content: flex-start; }\n\n.goa-form-actions--right {\n justify-content: flex-end; }\n";
320
- styleInject(css_248z$4);
360
+ var css_248z$5 = ":root {\n --color-white: #fff;\n --color-black: #333;\n --color-gray-l5: #f1f1f1;\n --color-gray-l2: #adadad;\n --color-gray-l1: #dcdcdc;\n --color-gray-d1: #666;\n --color-gray-d3: #333;\n --color-gray-100: #f1f1f1;\n --color-gray-200: #dcdcdc;\n --color-gray-500: #adadad;\n --color-gray-700: #666;\n --color-gray-900: #333;\n --color-tealblue-100: #c8eefa;\n --color-tealblue-500: #0081a2;\n --color-tealblue-900: #005072;\n --color-orange: #feba35;\n --color-red: #ec040b;\n --color-green: hsl(148, 100%, 26%);\n --color-primary-l1: #e3f2ff;\n --color-primary: #0070c4;\n --color-primary-d1: #004f84;\n --color-primary--hover: var(--color-primary-d1);\n --color-text: var(--color-gray-d3);\n --color-error: var(--color-red);\n --color-disabled: var(--color-gray-l2);\n --color-input-background: var(--color-white);\n --color-input-border: var(--color-gray-d1);\n --color-input-border--hover: var(--color-primary-d1);\n --color-input: var(--color-gray-d3);\n --color-input--focused: var(--color-orange);\n --color-button-primary: var(--color-primary);\n --color-button-primary--hover: var(--color-primary-d1);\n --color-button-tertiary: var(--color-gray-l2);\n --color-button-tertiary--hover: var(--color-gray-l5); }\n\n:root {\n /* font-size */\n --fs-xs: 0.75rem;\n --fs-sm: 0.875rem;\n --fs-base: 1.125rem;\n --fs-lg: 1.25rem;\n --fs-xl: 1.5rem;\n --fs-2xl: 2.25rem;\n --fs-3xl: 3rem;\n /* font-weight */\n --fw-thin: 100;\n --fw-light: 300;\n --fw-regular: 400;\n --fw-medium: 500;\n --fw-bold: 700;\n --fw-black: 900;\n /* line-height */\n --lh-xs: 0.875rem;\n --lh-sm: 1rem;\n --lh-base: 1.5rem;\n --lh-lg: 2rem;\n --lh-xl: 2.75rem;\n --lh-2xl: 3.5rem;\n --border-radius-sm: 0.15rem;\n --border-radius: 0.25rem;\n --border-radius-base: 0.25rem;\n --border-radius-lg: 0.5rem;\n --spacing-1: 0.5rem;\n --spacing-2: 0.875rem;\n --spacing-3: 1.75rem;\n --input-padding: 0.5rem;\n --input-border-radius: 0.25rem;\n --input-font-size: var(--fs-base); }\n\n.goa-form {\n box-sizing: border-box; }\n\n.goa-form *,\n.goa-form *:before,\n.goa-form *:after {\n box-sizing: inherit; }\n\n.goa-form-row {\n display: flex;\n flex-direction: column;\n justify-content: space-between; }\n\n@media screen and (min-width: 640px) {\n .goa-form-row {\n gap: 1.75rem;\n flex-direction: row; } }\n\n.goa-form-item {\n flex: 1 1 auto;\n margin-bottom: 1rem; }\n .goa-form-item label {\n display: block;\n font-weight: bold;\n color: #333;\n font-size: var(--fs-base);\n line-height: calc(var(--fs-base) + 1rem); }\n .goa-form-item label em {\n color: var(--color-gray-d1);\n font-style: normal;\n font-weight: var(--fw-regular);\n font-size: var(--fs-sm); }\n .goa-form-item input,\n .goa-form-item textarea {\n display: block;\n width: 100%;\n font-size: var(--fs-base); }\n .goa-form-item.goa-state--error .error-msg {\n font-size: var(--fs-sm);\n line-height: calc(var(--fs-sm) + 0.5rem);\n color: var(--color-red); }\n\n.help-msg {\n font-size: var(--fs-sm);\n color: var(--color-gray-d3);\n line-height: calc(var(--fs-sm) + 0.5rem); }\n\n.goa-form-actions {\n display: flex;\n flex-wrap: wrap;\n margin-top: 2rem; }\n .goa-form-actions button,\n .goa-form-actions .goa-link-button {\n margin: 0; }\n @media (max-width: 639px) {\n .goa-form-actions button,\n .goa-form-actions .goa-link-button {\n width: 100%; }\n .goa-form-actions button + button,\n .goa-form-actions button + .goa-link-button,\n .goa-form-actions .goa-link-button + button,\n .goa-form-actions .goa-link-button + .goa-link-button {\n margin-top: 0.5rem; } }\n @media (min-width: 640px) {\n .goa-form-actions button,\n .goa-form-actions .goa-link-button {\n min-width: 6rem; }\n .goa-form-actions button + button,\n .goa-form-actions button + .goa-link-button,\n .goa-form-actions .goa-link-button + button,\n .goa-form-actions .goa-link-button + .goa-link-button {\n margin-left: 0.5rem; } }\n\n.goa-form-actions--left {\n justify-content: flex-start; }\n\n.goa-form-actions--right {\n justify-content: flex-end; }\n";
361
+ styleInject(css_248z$5);
321
362
 
322
363
  var GoAForm = function GoAForm(_ref) {
323
364
  var children = _ref.children;
@@ -326,533 +367,6 @@
326
367
  }, children);
327
368
  };
328
369
 
329
- var css_248z$5 = ".goa-icon {\n display: flex; }\n\n.goa-icon svg {\n /* TODO: these colors need to be extracted out and settable via the component [light|dark] */\n color: #333;\n fill: #666;\n width: 100%;\n height: 100%; }\n\n.goa-icon-button {\n cursor: pointer;\n display: inline-flex;\n align-items: center;\n justify-content: center; }\n\n/* GoA */\n.goa-icon-button-goa {\n padding: 0.25rem;\n border-radius: 0.5rem;\n color: var(--color-primary);\n fill: var(--color-primary);\n cursor: pointer;\n transition: background-color 100ms ease-in, transform 100ms ease-in; }\n\n.goa-icon-button-goa:active {\n transform: scale(0.9); }\n\n.goa-icon-button-goa:hover {\n background-color: #eee; }\n\n/* Round */\n.goa-icon-button-round {\n padding: 0.4rem;\n border-radius: 999px;\n transition: background-color 100ms ease-in, transform 100ms ease-in;\n cursor: pointer; }\n\n.goa-icon-button-round:active {\n transform: scale(0.9); }\n\n.goa-icon-button-round:hover {\n background: rgba(0, 0, 0, 0.1); }\n";
330
- styleInject(css_248z$5);
331
-
332
- var Icons = {
333
- barChart: /*#__PURE__*/React__default.createElement("svg", {
334
- xmlns: "http://www.w3.org/2000/svg",
335
- className: "ionicon",
336
- viewBox: "0 0 512 512"
337
- }, /*#__PURE__*/React__default.createElement("title", null, "Bar Chart"), /*#__PURE__*/React__default.createElement("path", {
338
- d: "M32 32v432a16 16 0 0016 16h432",
339
- fill: "none",
340
- stroke: "currentColor",
341
- strokeLinecap: "round",
342
- strokeLinejoin: "round",
343
- strokeWidth: "32"
344
- }), /*#__PURE__*/React__default.createElement("rect", {
345
- x: "96",
346
- y: "224",
347
- width: "80",
348
- height: "192",
349
- rx: "20",
350
- ry: "20",
351
- fill: "none",
352
- stroke: "currentColor",
353
- strokeLinecap: "round",
354
- strokeLinejoin: "round",
355
- strokeWidth: "32"
356
- }), /*#__PURE__*/React__default.createElement("rect", {
357
- x: "240",
358
- y: "176",
359
- width: "80",
360
- height: "240",
361
- rx: "20",
362
- ry: "20",
363
- fill: "none",
364
- stroke: "currentColor",
365
- strokeLinecap: "round",
366
- strokeLinejoin: "round",
367
- strokeWidth: "32"
368
- }), /*#__PURE__*/React__default.createElement("rect", {
369
- x: "383.64",
370
- y: "112",
371
- width: "80",
372
- height: "304",
373
- rx: "20",
374
- ry: "20",
375
- fill: "none",
376
- stroke: "currentColor",
377
- strokeLinecap: "round",
378
- strokeLinejoin: "round",
379
- strokeWidth: "32"
380
- })),
381
- build: /*#__PURE__*/React__default.createElement("svg", {
382
- xmlns: "http://www.w3.org/2000/svg",
383
- className: "ionicon",
384
- viewBox: "0 0 512 512"
385
- }, /*#__PURE__*/React__default.createElement("title", null, "Build"), /*#__PURE__*/React__default.createElement("path", {
386
- d: "M393.87 190a32.1 32.1 0 01-45.25 0l-26.57-26.57a32.09 32.09 0 010-45.26L382.19 58a1 1 0 00-.3-1.64c-38.82-16.64-89.15-8.16-121.11 23.57-30.58 30.35-32.32 76-21.12 115.84a31.93 31.93 0 01-9.06 32.08L64 380a48.17 48.17 0 1068 68l153.86-167a31.93 31.93 0 0131.6-9.13c39.54 10.59 84.54 8.6 114.72-21.19 32.49-32 39.5-88.56 23.75-120.93a1 1 0 00-1.6-.26z",
387
- fill: "none",
388
- stroke: "currentColor",
389
- strokeLinecap: "round",
390
- strokeMiterlimit: "10",
391
- strokeWidth: "32"
392
- }), /*#__PURE__*/React__default.createElement("circle", {
393
- cx: "96",
394
- cy: "416",
395
- r: "16"
396
- })),
397
- checkmarkCircle: /*#__PURE__*/React__default.createElement("svg", {
398
- xmlns: "http://www.w3.org/2000/svg",
399
- className: "ionicon",
400
- viewBox: "0 0 512 512"
401
- }, /*#__PURE__*/React__default.createElement("title", null, "Checkmark Circle"), /*#__PURE__*/React__default.createElement("path", {
402
- d: "M448 256c0-106-86-192-192-192S64 150 64 256s86 192 192 192 192-86 192-192z",
403
- fill: "none",
404
- stroke: "currentColor",
405
- strokeMiterlimit: "10",
406
- strokeWidth: "32"
407
- }), /*#__PURE__*/React__default.createElement("path", {
408
- fill: "none",
409
- stroke: "currentColor",
410
- strokeLinecap: "round",
411
- strokeLinejoin: "round",
412
- strokeWidth: "32",
413
- d: "M352 176L217.6 336 160 272"
414
- })),
415
- chevronDown: /*#__PURE__*/React__default.createElement("svg", {
416
- xmlns: "http://www.w3.org/2000/svg",
417
- className: "ionicon",
418
- viewBox: "0 0 512 512"
419
- }, /*#__PURE__*/React__default.createElement("title", null, "Chevron Down"), /*#__PURE__*/React__default.createElement("path", {
420
- fill: "none",
421
- stroke: "currentColor",
422
- strokeLinecap: "round",
423
- strokeLinejoin: "round",
424
- strokeWidth: "48",
425
- d: "M112 184l144 144 144-144"
426
- })),
427
- close: /*#__PURE__*/React__default.createElement("svg", {
428
- xmlns: "http://www.w3.org/2000/svg",
429
- className: "ionicon",
430
- viewBox: "0 0 512 512"
431
- }, /*#__PURE__*/React__default.createElement("title", null, "Close"), /*#__PURE__*/React__default.createElement("path", {
432
- fill: "none",
433
- stroke: "currentColor",
434
- strokeLinecap: "round",
435
- strokeLinejoin: "round",
436
- strokeWidth: "32",
437
- d: "M368 368L144 144M368 144L144 368"
438
- })),
439
- closeCircle: /*#__PURE__*/React__default.createElement("svg", {
440
- xmlns: "http://www.w3.org/2000/svg",
441
- className: "ionicon",
442
- viewBox: "0 0 512 512"
443
- }, /*#__PURE__*/React__default.createElement("title", null, "Close Circle"), /*#__PURE__*/React__default.createElement("path", {
444
- d: "M448 256c0-106-86-192-192-192S64 150 64 256s86 192 192 192 192-86 192-192z",
445
- fill: "none",
446
- stroke: "currentColor",
447
- strokeMiterlimit: "10",
448
- strokeWidth: "32"
449
- }), /*#__PURE__*/React__default.createElement("path", {
450
- fill: "none",
451
- stroke: "currentColor",
452
- strokeLinecap: "round",
453
- strokeLinejoin: "round",
454
- strokeWidth: "32",
455
- d: "M320 320L192 192M192 320l128-128"
456
- })),
457
- create: /*#__PURE__*/React__default.createElement("svg", {
458
- xmlns: "http://www.w3.org/2000/svg",
459
- className: "ionicon",
460
- viewBox: "0 0 512 512"
461
- }, /*#__PURE__*/React__default.createElement("title", null, "Create"), /*#__PURE__*/React__default.createElement("path", {
462
- d: "M384 224v184a40 40 0 01-40 40H104a40 40 0 01-40-40V168a40 40 0 0140-40h167.48",
463
- fill: "none",
464
- stroke: "currentColor",
465
- strokeLinecap: "round",
466
- strokeLinejoin: "round",
467
- strokeWidth: "32"
468
- }), /*#__PURE__*/React__default.createElement("path", {
469
- d: "M459.94 53.25a16.06 16.06 0 00-23.22-.56L424.35 65a8 8 0 000 11.31l11.34 11.32a8 8 0 0011.34 0l12.06-12c6.1-6.09 6.67-16.01.85-22.38zM399.34 90L218.82 270.2a9 9 0 00-2.31 3.93L208.16 299a3.91 3.91 0 004.86 4.86l24.85-8.35a9 9 0 003.93-2.31L422 112.66a9 9 0 000-12.66l-9.95-10a9 9 0 00-12.71 0z"
470
- })),
471
- download: /*#__PURE__*/React__default.createElement("svg", {
472
- xmlns: "http://www.w3.org/2000/svg",
473
- className: "ionicon",
474
- viewBox: "0 0 512 512"
475
- }, /*#__PURE__*/React__default.createElement("title", null, "Download"), /*#__PURE__*/React__default.createElement("path", {
476
- d: "M336 176h40a40 40 0 0140 40v208a40 40 0 01-40 40H136a40 40 0 01-40-40V216a40 40 0 0140-40h40",
477
- fill: "none",
478
- stroke: "currentColor",
479
- strokeLinecap: "round",
480
- strokeLinejoin: "round",
481
- strokeWidth: "32"
482
- }), /*#__PURE__*/React__default.createElement("path", {
483
- fill: "none",
484
- stroke: "currentColor",
485
- strokeLinecap: "round",
486
- strokeLinejoin: "round",
487
- strokeWidth: "32",
488
- d: "M176 272l80 80 80-80M256 48v288"
489
- })),
490
- pencil: /*#__PURE__*/React__default.createElement("svg", {
491
- xmlns: "http://www.w3.org/2000/svg",
492
- className: "ionicon",
493
- viewBox: "0 0 512 512"
494
- }, /*#__PURE__*/React__default.createElement("title", null, "Pencil"), /*#__PURE__*/React__default.createElement("path", {
495
- fill: "none",
496
- stroke: "currentColor",
497
- strokeLinecap: "round",
498
- strokeLinejoin: "round",
499
- strokeWidth: "32",
500
- d: "M364.13 125.25L87 403l-23 45 44.99-23 277.76-277.13-22.62-22.62zM420.69 68.69l-22.62 22.62 22.62 22.63 22.62-22.63a16 16 0 000-22.62h0a16 16 0 00-22.62 0z"
501
- })),
502
- eye: /*#__PURE__*/React__default.createElement("svg", {
503
- xmlns: "http://www.w3.org/2000/svg",
504
- className: "ionicon",
505
- viewBox: "0 0 512 512"
506
- }, /*#__PURE__*/React__default.createElement("title", null, "Eye"), /*#__PURE__*/React__default.createElement("path", {
507
- d: "M255.66 112c-77.94 0-157.89 45.11-220.83 135.33a16 16 0 00-.27 17.77C82.92 340.8 161.8 400 255.66 400c92.84 0 173.34-59.38 221.79-135.25a16.14 16.14 0 000-17.47C428.89 172.28 347.8 112 255.66 112z",
508
- fill: "none",
509
- stroke: "currentColor",
510
- strokeLinecap: "round",
511
- strokeLinejoin: "round",
512
- strokeWidth: "32"
513
- }), /*#__PURE__*/React__default.createElement("circle", {
514
- cx: "256",
515
- cy: "256",
516
- r: "80",
517
- fill: "none",
518
- stroke: "currentColor",
519
- strokeMiterlimit: "10",
520
- strokeWidth: "32"
521
- })),
522
- eyeOff: /*#__PURE__*/React__default.createElement("svg", {
523
- xmlns: "http://www.w3.org/2000/svg",
524
- className: "ionicon",
525
- viewBox: "0 0 512 512"
526
- }, /*#__PURE__*/React__default.createElement("title", null, "Eye Off"), /*#__PURE__*/React__default.createElement("path", {
527
- d: "M432 448a15.92 15.92 0 01-11.31-4.69l-352-352a16 16 0 0122.62-22.62l352 352A16 16 0 01432 448zM255.66 384c-41.49 0-81.5-12.28-118.92-36.5-34.07-22-64.74-53.51-88.7-91v-.08c19.94-28.57 41.78-52.73 65.24-72.21a2 2 0 00.14-2.94L93.5 161.38a2 2 0 00-2.71-.12c-24.92 21-48.05 46.76-69.08 76.92a31.92 31.92 0 00-.64 35.54c26.41 41.33 60.4 76.14 98.28 100.65C162 402 207.9 416 255.66 416a239.13 239.13 0 0075.8-12.58 2 2 0 00.77-3.31l-21.58-21.58a4 4 0 00-3.83-1 204.8 204.8 0 01-51.16 6.47zM490.84 238.6c-26.46-40.92-60.79-75.68-99.27-100.53C349 110.55 302 96 255.66 96a227.34 227.34 0 00-74.89 12.83 2 2 0 00-.75 3.31l21.55 21.55a4 4 0 003.88 1 192.82 192.82 0 0150.21-6.69c40.69 0 80.58 12.43 118.55 37 34.71 22.4 65.74 53.88 89.76 91a.13.13 0 010 .16 310.72 310.72 0 01-64.12 72.73 2 2 0 00-.15 2.95l19.9 19.89a2 2 0 002.7.13 343.49 343.49 0 0068.64-78.48 32.2 32.2 0 00-.1-34.78z"
528
- }), /*#__PURE__*/React__default.createElement("path", {
529
- d: "M256 160a95.88 95.88 0 00-21.37 2.4 2 2 0 00-1 3.38l112.59 112.56a2 2 0 003.38-1A96 96 0 00256 160zM165.78 233.66a2 2 0 00-3.38 1 96 96 0 00115 115 2 2 0 001-3.38z"
530
- })),
531
- file: /*#__PURE__*/React__default.createElement("svg", {
532
- xmlns: "http://www.w3.org/2000/svg",
533
- className: "ionicon",
534
- viewBox: "0 0 512 512"
535
- }, /*#__PURE__*/React__default.createElement("title", null, "Document"), /*#__PURE__*/React__default.createElement("path", {
536
- d: "M416 221.25V416a48 48 0 01-48 48H144a48 48 0 01-48-48V96a48 48 0 0148-48h98.75a32 32 0 0122.62 9.37l141.26 141.26a32 32 0 019.37 22.62z",
537
- fill: "none",
538
- stroke: "currentColor",
539
- strokeLinejoin: "round",
540
- strokeWidth: "32"
541
- }), /*#__PURE__*/React__default.createElement("path", {
542
- d: "M256 56v120a32 32 0 0032 32h120",
543
- fill: "none",
544
- stroke: "currentColor",
545
- strokeLinecap: "round",
546
- strokeLinejoin: "round",
547
- strokeWidth: "32"
548
- })),
549
- fitness: /*#__PURE__*/React__default.createElement("svg", {
550
- xmlns: "http://www.w3.org/2000/svg",
551
- className: "ionicon",
552
- viewBox: "0 0 512 512"
553
- }, /*#__PURE__*/React__default.createElement("title", null, "Fitness"), /*#__PURE__*/React__default.createElement("path", {
554
- d: "M352.92 80C288 80 256 144 256 144s-32-64-96.92-64c-52.76 0-94.54 44.14-95.08 96.81-1.1 109.33 86.73 187.08 183 252.42a16 16 0 0018 0c96.26-65.34 184.09-143.09 183-252.42-.54-52.67-42.32-96.81-95.08-96.81z",
555
- fill: "none",
556
- stroke: "currentColor",
557
- strokeLinecap: "round",
558
- strokeLinejoin: "round",
559
- strokeWidth: "32"
560
- }), /*#__PURE__*/React__default.createElement("path", {
561
- fill: "none",
562
- stroke: "currentColor",
563
- strokeLinecap: "round",
564
- strokeLinejoin: "round",
565
- strokeWidth: "32",
566
- d: "M48 256h112l48-96 48 160 48-96 32 64h128"
567
- })),
568
- helpCircle: /*#__PURE__*/React__default.createElement("svg", {
569
- xmlns: "http://www.w3.org/2000/svg",
570
- className: "ionicon",
571
- viewBox: "0 0 512 512"
572
- }, /*#__PURE__*/React__default.createElement("title", null, "Help Circle"), /*#__PURE__*/React__default.createElement("path", {
573
- d: "M256 80a176 176 0 10176 176A176 176 0 00256 80z",
574
- fill: "none",
575
- stroke: "currentColor",
576
- strokeMiterlimit: "10",
577
- strokeWidth: "32"
578
- }), /*#__PURE__*/React__default.createElement("path", {
579
- d: "M200 202.29s.84-17.5 19.57-32.57C230.68 160.77 244 158.18 256 158c10.93-.14 20.69 1.67 26.53 4.45 10 4.76 29.47 16.38 29.47 41.09 0 26-17 37.81-36.37 50.8S251 281.43 251 296",
580
- fill: "none",
581
- stroke: "currentColor",
582
- strokeLinecap: "round",
583
- strokeMiterlimit: "10",
584
- strokeWidth: "28"
585
- }), /*#__PURE__*/React__default.createElement("circle", {
586
- cx: "250",
587
- cy: "348",
588
- r: "20"
589
- })),
590
- home: /*#__PURE__*/React__default.createElement("svg", {
591
- xmlns: "http://www.w3.org/2000/svg",
592
- className: "ionicon",
593
- viewBox: "0 0 512 512"
594
- }, /*#__PURE__*/React__default.createElement("title", null, "Home"), /*#__PURE__*/React__default.createElement("path", {
595
- d: "M80 212v236a16 16 0 0016 16h96V328a24 24 0 0124-24h80a24 24 0 0124 24v136h96a16 16 0 0016-16V212",
596
- fill: "none",
597
- stroke: "currentColor",
598
- strokeLinecap: "round",
599
- strokeLinejoin: "round",
600
- strokeWidth: "32"
601
- }), /*#__PURE__*/React__default.createElement("path", {
602
- d: "M480 256L266.89 52c-5-5.28-16.69-5.34-21.78 0L32 256M400 179V64h-48v69",
603
- fill: "none",
604
- stroke: "currentColor",
605
- strokeLinecap: "round",
606
- strokeLinejoin: "round",
607
- strokeWidth: "32"
608
- })),
609
- hourGlass: /*#__PURE__*/React__default.createElement("svg", {
610
- xmlns: "http://www.w3.org/2000/svg",
611
- className: "ionicon",
612
- viewBox: "0 0 512 512"
613
- }, /*#__PURE__*/React__default.createElement("title", null, "Hourglass"), /*#__PURE__*/React__default.createElement("path", {
614
- d: "M145.61 464h220.78c19.8 0 35.55-16.29 33.42-35.06C386.06 308 304 310 304 256s83.11-51 95.8-172.94c2-18.78-13.61-35.06-33.41-35.06H145.61c-19.8 0-35.37 16.28-33.41 35.06C124.89 205 208 201 208 256s-82.06 52-95.8 172.94c-2.14 18.77 13.61 35.06 33.41 35.06z",
615
- fill: "none",
616
- stroke: "currentColor",
617
- strokeLinecap: "round",
618
- strokeLinejoin: "round",
619
- strokeWidth: "32"
620
- }), /*#__PURE__*/React__default.createElement("path", {
621
- d: "M343.3 432H169.13c-15.6 0-20-18-9.06-29.16C186.55 376 240 356.78 240 326V224c0-19.85-38-35-61.51-67.2-3.88-5.31-3.49-12.8 6.37-12.8h142.73c8.41 0 10.23 7.43 6.4 12.75C310.82 189 272 204.05 272 224v102c0 30.53 55.71 47 80.4 76.87 9.95 12.04 6.47 29.13-9.1 29.13z"
622
- })),
623
- logout: /*#__PURE__*/React__default.createElement("svg", {
624
- xmlns: "http://www.w3.org/2000/svg",
625
- className: "ionicon",
626
- viewBox: "0 0 512 512"
627
- }, /*#__PURE__*/React__default.createElement("title", null, "Log Out"), /*#__PURE__*/React__default.createElement("path", {
628
- d: "M304 336v40a40 40 0 01-40 40H104a40 40 0 01-40-40V136a40 40 0 0140-40h152c22.09 0 48 17.91 48 40v40M368 336l80-80-80-80M176 256h256",
629
- fill: "none",
630
- stroke: "currentColor",
631
- strokeLinecap: "round",
632
- strokeLinejoin: "round",
633
- strokeWidth: "32"
634
- })),
635
- megaphone: /*#__PURE__*/React__default.createElement("svg", {
636
- xmlns: "http://www.w3.org/2000/svg",
637
- className: "ionicon",
638
- viewBox: "0 0 512 512"
639
- }, /*#__PURE__*/React__default.createElement("title", null, "Megaphone"), /*#__PURE__*/React__default.createElement("path", {
640
- d: "M407.94 52.22S321.3 160 240 160H80a16 16 0 00-16 16v96a16 16 0 0016 16h160c81.3 0 167.94 108.23 167.94 108.23 6.06 8 24.06 2.52 24.06-9.83V62c0-12.31-17-18.82-24.06-9.78zM64 256s-16-6-16-32 16-32 16-32M448 246s16-4.33 16-22-16-22-16-22M256 160v128M112 160v128",
641
- fill: "none",
642
- stroke: "currentColor",
643
- strokeLinecap: "round",
644
- strokeLinejoin: "round",
645
- strokeWidth: "32"
646
- }), /*#__PURE__*/React__default.createElement("path", {
647
- d: "M144 288v168a8 8 0 008 8h53a16 16 0 0015.29-20.73C211.91 416.39 192 386.08 192 336h16a16 16 0 0016-16v-16a16 16 0 00-16-16h-16",
648
- fill: "none",
649
- stroke: "currentColor",
650
- strokeLinecap: "round",
651
- strokeLinejoin: "round",
652
- strokeWidth: "32"
653
- })),
654
- menu: /*#__PURE__*/React__default.createElement("svg", {
655
- xmlns: "http://www.w3.org/2000/svg",
656
- className: "ionicon",
657
- viewBox: "0 0 512 512"
658
- }, /*#__PURE__*/React__default.createElement("title", null, "Menu"), /*#__PURE__*/React__default.createElement("path", {
659
- fill: "none",
660
- stroke: "currentColor",
661
- strokeLinecap: "round",
662
- strokeMiterlimit: "10",
663
- strokeWidth: "32",
664
- d: "M80 160h352M80 256h352M80 352h352"
665
- })),
666
- options: /*#__PURE__*/React__default.createElement("svg", {
667
- xmlns: "http://www.w3.org/2000/svg",
668
- className: "ionicon",
669
- viewBox: "0 0 512 512"
670
- }, /*#__PURE__*/React__default.createElement("title", null, "Options"), /*#__PURE__*/React__default.createElement("path", {
671
- fill: "none",
672
- stroke: "currentColor",
673
- strokeLinecap: "round",
674
- strokeLinejoin: "round",
675
- strokeWidth: "32",
676
- d: "M368 128h80M64 128h240M368 384h80M64 384h240M208 256h240M64 256h80"
677
- }), /*#__PURE__*/React__default.createElement("circle", {
678
- cx: "336",
679
- cy: "128",
680
- r: "32",
681
- fill: "none",
682
- stroke: "currentColor",
683
- strokeLinecap: "round",
684
- strokeLinejoin: "round",
685
- strokeWidth: "32"
686
- }), /*#__PURE__*/React__default.createElement("circle", {
687
- cx: "176",
688
- cy: "256",
689
- r: "32",
690
- fill: "none",
691
- stroke: "currentColor",
692
- strokeLinecap: "round",
693
- strokeLinejoin: "round",
694
- strokeWidth: "32"
695
- }), /*#__PURE__*/React__default.createElement("circle", {
696
- cx: "336",
697
- cy: "384",
698
- r: "32",
699
- fill: "none",
700
- stroke: "currentColor",
701
- strokeLinecap: "round",
702
- strokeLinejoin: "round",
703
- strokeWidth: "32"
704
- })),
705
- pauseCircle: /*#__PURE__*/React__default.createElement("svg", {
706
- xmlns: "http://www.w3.org/2000/svg",
707
- className: "ionicon",
708
- viewBox: "0 0 512 512"
709
- }, /*#__PURE__*/React__default.createElement("title", null, "Pause Circle"), /*#__PURE__*/React__default.createElement("path", {
710
- d: "M448 256c0-106-86-192-192-192S64 150 64 256s86 192 192 192 192-86 192-192z",
711
- fill: "none",
712
- stroke: "currentColor",
713
- strokeMiterlimit: "10",
714
- strokeWidth: "32"
715
- }), /*#__PURE__*/React__default.createElement("path", {
716
- fill: "none",
717
- stroke: "currentColor",
718
- strokeLinecap: "round",
719
- strokeMiterlimit: "10",
720
- strokeWidth: "32",
721
- d: "M208 192v128M304 192v128"
722
- })),
723
- personCircle: /*#__PURE__*/React__default.createElement("svg", {
724
- xmlns: "http://www.w3.org/2000/svg",
725
- className: "ionicon",
726
- viewBox: "0 0 512 512"
727
- }, /*#__PURE__*/React__default.createElement("title", null, "Person Circle"), /*#__PURE__*/React__default.createElement("path", {
728
- d: "M258.9 48C141.92 46.42 46.42 141.92 48 258.9c1.56 112.19 92.91 203.54 205.1 205.1 117 1.6 212.48-93.9 210.88-210.88C462.44 140.91 371.09 49.56 258.9 48zm126.42 327.25a4 4 0 01-6.14-.32 124.27 124.27 0 00-32.35-29.59C321.37 329 289.11 320 256 320s-65.37 9-90.83 25.34a124.24 124.24 0 00-32.35 29.58 4 4 0 01-6.14.32A175.32 175.32 0 0180 259c-1.63-97.31 78.22-178.76 175.57-179S432 158.81 432 256a175.32 175.32 0 01-46.68 119.25z"
729
- }), /*#__PURE__*/React__default.createElement("path", {
730
- d: "M256 144c-19.72 0-37.55 7.39-50.22 20.82s-19 32-17.57 51.93C191.11 256 221.52 288 256 288s64.83-32 67.79-71.24c1.48-19.74-4.8-38.14-17.68-51.82C293.39 151.44 275.59 144 256 144z"
731
- })),
732
- playCircle: /*#__PURE__*/React__default.createElement("svg", {
733
- xmlns: "http://www.w3.org/2000/svg",
734
- className: "ionicon",
735
- viewBox: "0 0 512 512"
736
- }, /*#__PURE__*/React__default.createElement("title", null, "Play Circle"), /*#__PURE__*/React__default.createElement("path", {
737
- d: "M448 256c0-106-86-192-192-192S64 150 64 256s86 192 192 192 192-86 192-192z",
738
- fill: "none",
739
- stroke: "currentColor",
740
- strokeMiterlimit: "10",
741
- strokeWidth: "32"
742
- }), /*#__PURE__*/React__default.createElement("path", {
743
- d: "M216.32 334.44l114.45-69.14a10.89 10.89 0 000-18.6l-114.45-69.14a10.78 10.78 0 00-16.32 9.31v138.26a10.78 10.78 0 0016.32 9.31z"
744
- })),
745
- pulse: /*#__PURE__*/React__default.createElement("svg", {
746
- xmlns: "http://www.w3.org/2000/svg",
747
- className: "ionicon",
748
- viewBox: "0 0 512 512"
749
- }, /*#__PURE__*/React__default.createElement("title", null, "Pulse"), /*#__PURE__*/React__default.createElement("path", {
750
- fill: "none",
751
- stroke: "currentColor",
752
- strokeLinecap: "round",
753
- strokeLinejoin: "round",
754
- strokeWidth: "32",
755
- d: "M48 320h64l64-256 64 384 64-224 32 96h64"
756
- }), /*#__PURE__*/React__default.createElement("circle", {
757
- cx: "432",
758
- cy: "320",
759
- r: "32",
760
- fill: "none",
761
- stroke: "currentColor",
762
- strokeLinecap: "round",
763
- strokeLinejoin: "round",
764
- strokeWidth: "32"
765
- })),
766
- receipt: /*#__PURE__*/React__default.createElement("svg", {
767
- xmlns: "http://www.w3.org/2000/svg",
768
- className: "ionicon",
769
- viewBox: "0 0 512 512"
770
- }, /*#__PURE__*/React__default.createElement("title", null, "Receipt"), /*#__PURE__*/React__default.createElement("path", {
771
- fill: "none",
772
- stroke: "currentColor",
773
- strokeLinejoin: "round",
774
- strokeWidth: "32",
775
- d: "M160 336V48l32 16 32-16 31.94 16 32.37-16L320 64l31.79-16 31.93 16L416 48l32.01 16L480 48v224"
776
- }), /*#__PURE__*/React__default.createElement("path", {
777
- d: "M480 272v112a80 80 0 01-80 80h0a80 80 0 01-80-80v-48H48a15.86 15.86 0 00-16 16c0 64 6.74 112 80 112h288",
778
- fill: "none",
779
- stroke: "currentColor",
780
- strokeLinejoin: "round",
781
- strokeWidth: "32"
782
- }), /*#__PURE__*/React__default.createElement("path", {
783
- fill: "none",
784
- stroke: "currentColor",
785
- strokeLinecap: "round",
786
- strokeLinejoin: "round",
787
- strokeWidth: "32",
788
- d: "M224 144h192M288 224h128"
789
- })),
790
- settings: /*#__PURE__*/React__default.createElement("svg", {
791
- xmlns: "http://www.w3.org/2000/svg",
792
- className: "ionicon",
793
- viewBox: "0 0 512 512"
794
- }, /*#__PURE__*/React__default.createElement("title", null, "Settings"), /*#__PURE__*/React__default.createElement("path", {
795
- d: "M262.29 192.31a64 64 0 1057.4 57.4 64.13 64.13 0 00-57.4-57.4zM416.39 256a154.34 154.34 0 01-1.53 20.79l45.21 35.46a10.81 10.81 0 012.45 13.75l-42.77 74a10.81 10.81 0 01-13.14 4.59l-44.9-18.08a16.11 16.11 0 00-15.17 1.75A164.48 164.48 0 01325 400.8a15.94 15.94 0 00-8.82 12.14l-6.73 47.89a11.08 11.08 0 01-10.68 9.17h-85.54a11.11 11.11 0 01-10.69-8.87l-6.72-47.82a16.07 16.07 0 00-9-12.22 155.3 155.3 0 01-21.46-12.57 16 16 0 00-15.11-1.71l-44.89 18.07a10.81 10.81 0 01-13.14-4.58l-42.77-74a10.8 10.8 0 012.45-13.75l38.21-30a16.05 16.05 0 006-14.08c-.36-4.17-.58-8.33-.58-12.5s.21-8.27.58-12.35a16 16 0 00-6.07-13.94l-38.19-30A10.81 10.81 0 0149.48 186l42.77-74a10.81 10.81 0 0113.14-4.59l44.9 18.08a16.11 16.11 0 0015.17-1.75A164.48 164.48 0 01187 111.2a15.94 15.94 0 008.82-12.14l6.73-47.89A11.08 11.08 0 01213.23 42h85.54a11.11 11.11 0 0110.69 8.87l6.72 47.82a16.07 16.07 0 009 12.22 155.3 155.3 0 0121.46 12.57 16 16 0 0015.11 1.71l44.89-18.07a10.81 10.81 0 0113.14 4.58l42.77 74a10.8 10.8 0 01-2.45 13.75l-38.21 30a16.05 16.05 0 00-6.05 14.08c.33 4.14.55 8.3.55 12.47z",
796
- fill: "none",
797
- stroke: "currentColor",
798
- strokeLinecap: "round",
799
- strokeLinejoin: "round",
800
- strokeWidth: "32"
801
- })),
802
- trash: /*#__PURE__*/React__default.createElement("svg", {
803
- xmlns: "http://www.w3.org/2000/svg",
804
- className: "ionicon",
805
- viewBox: "0 0 512 512"
806
- }, /*#__PURE__*/React__default.createElement("title", null, "Trash"), /*#__PURE__*/React__default.createElement("path", {
807
- d: "M112 112l20 320c.95 18.49 14.4 32 32 32h184c17.67 0 30.87-13.51 32-32l20-320",
808
- fill: "none",
809
- stroke: "currentColor",
810
- strokeLinecap: "round",
811
- strokeLinejoin: "round",
812
- strokeWidth: "32"
813
- }), /*#__PURE__*/React__default.createElement("path", {
814
- stroke: "currentColor",
815
- strokeLinecap: "round",
816
- strokeMiterlimit: "10",
817
- strokeWidth: "32",
818
- d: "M80 112h352"
819
- }), /*#__PURE__*/React__default.createElement("path", {
820
- d: "M192 112V72h0a23.93 23.93 0 0124-24h80a23.93 23.93 0 0124 24h0v40M256 176v224M184 176l8 224M328 176l-8 224",
821
- fill: "none",
822
- stroke: "currentColor",
823
- strokeLinecap: "round",
824
- strokeLinejoin: "round",
825
- strokeWidth: "32"
826
- }))
827
- };
828
- function GoAIcon(_ref) {
829
- var type = _ref.type,
830
- _ref$size = _ref.size,
831
- size = _ref$size === void 0 ? 'small' : _ref$size;
832
- var pxSize = getSize(size);
833
- var styles = {
834
- width: "".concat(pxSize, "px")
835
- };
836
- return /*#__PURE__*/React__default.createElement("div", {
837
- className: "goa-icon",
838
- style: styles,
839
- "data-testid": "icon-".concat(type)
840
- }, Icons[type]);
841
- }
842
-
843
- function getSize(size) {
844
- switch (size) {
845
- case 'small':
846
- return 20;
847
-
848
- case 'medium':
849
- return 32;
850
-
851
- case 'large':
852
- return 48;
853
- }
854
- }
855
-
856
370
  function GoAIconButton(_ref) {
857
371
  var type = _ref.type,
858
372
  _ref$variant = _ref.variant,
@@ -873,7 +387,7 @@
873
387
  }));
874
388
  }
875
389
 
876
- var css_248z$6 = ":root {\n /* font-size */\n --fs-xs: 0.75rem;\n --fs-sm: 0.875rem;\n --fs-base: 1.125rem;\n --fs-lg: 1.25rem;\n --fs-xl: 1.5rem;\n --fs-2xl: 2.25rem;\n --fs-3xl: 3rem;\n /* font-weight */\n --fw-thin: 100;\n --fw-light: 300;\n --fw-regular: 400;\n --fw-medium: 500;\n --fw-bold: 700;\n --fw-black: 900;\n /* line-height */\n --lh-xs: 0.875rem;\n --lh-sm: 1rem;\n --lh-base: 1.5rem;\n --lh-lg: 2rem;\n --lh-xl: 2.75rem;\n --lh-2xl: 3.5rem;\n --border-radius-sm: 0.15rem;\n --border-radius: 0.25rem;\n --border-radius-base: 0.25rem;\n --border-radius-lg: 0.5rem;\n --spacing-1: 0.5rem;\n --spacing-2: 0.875rem;\n --spacing-3: 1.75rem;\n --input-padding: 0.5rem;\n --input-border-radius: 0.25rem;\n --input-font-size: var(--fs-base); }\n\n:root {\n --color-white: #fff;\n --color-black: #333;\n --color-gray-l5: #f1f1f1;\n --color-gray-l2: #adadad;\n --color-gray-l1: #dcdcdc;\n --color-gray-d1: #666;\n --color-gray-d3: #333;\n --color-gray-100: #f1f1f1;\n --color-gray-200: #dcdcdc;\n --color-gray-500: #adadad;\n --color-gray-700: #666;\n --color-gray-900: #333;\n --color-tealblue-100: #c8eefa;\n --color-tealblue-500: #0081a2;\n --color-tealblue-900: #005072;\n --color-orange: #feba35;\n --color-red: #ec040b;\n --color-green: hsl(148, 100%, 26%);\n --color-primary: #0070c4;\n --color-primary-d1: #004f84;\n --color-primary--hover: var(--color-primary-d1);\n --color-text: var(--color-gray-d3);\n --color-error: var(--color-red);\n --color-disabled: var(--color-gray-l2);\n --color-input-background: var(--color-white);\n --color-input-border: var(--color-gray-d1);\n --color-input-border--hover: var(--color-primary-d1);\n --color-input: var(--color-gray-d3);\n --color-input--focused: var(--color-orange);\n --color-button-primary: var(--color-primary);\n --color-button-primary--hover: var(--color-primary-d1);\n --color-button-tertiary: var(--color-gray-l2);\n --color-button-tertiary--hover: var(--color-gray-l5); }\n\n/* Forms */\n.goa-input {\n position: relative; }\n\n.goa-input-leading-icon {\n position: absolute;\n display: flex;\n align-items: center;\n top: 0;\n bottom: 0;\n left: 0.5rem; }\n\n.goa-input input {\n outline: none;\n transition: box-shadow 0.1s ease-in;\n border: 1px solid var(--color-input-border);\n border-radius: 3px;\n background: white;\n color: var(--color-input);\n padding: var(--input-padding);\n font-size: var(--input-font-size);\n display: block;\n width: 100%;\n line-height: 1.5rem;\n padding: 0.5rem 2rem 0.5rem 0.5rem; }\n .goa-input input:hover {\n border-color: var(--color-input-border--hover); }\n .goa-input input:active, .goa-input input:focus {\n box-shadow: 0 0 0 3px var(--color-input--focused); }\n .goa-input input:disabled {\n border-color: var(--color-disabled); }\n .goa-input input:disabled:hover {\n border-color: var(--color-disabled); }\n .goa-input input:disabled:focus {\n box-shadow: none; }\n\n.goa-input .input--leading-icon {\n padding-left: 2rem; }\n\n.goa-state--error .goa-input input {\n border: 2px solid var(--color-error); }\n";
390
+ var css_248z$6 = ":root {\n /* font-size */\n --fs-xs: 0.75rem;\n --fs-sm: 0.875rem;\n --fs-base: 1.125rem;\n --fs-lg: 1.25rem;\n --fs-xl: 1.5rem;\n --fs-2xl: 2.25rem;\n --fs-3xl: 3rem;\n /* font-weight */\n --fw-thin: 100;\n --fw-light: 300;\n --fw-regular: 400;\n --fw-medium: 500;\n --fw-bold: 700;\n --fw-black: 900;\n /* line-height */\n --lh-xs: 0.875rem;\n --lh-sm: 1rem;\n --lh-base: 1.5rem;\n --lh-lg: 2rem;\n --lh-xl: 2.75rem;\n --lh-2xl: 3.5rem;\n --border-radius-sm: 0.15rem;\n --border-radius: 0.25rem;\n --border-radius-base: 0.25rem;\n --border-radius-lg: 0.5rem;\n --spacing-1: 0.5rem;\n --spacing-2: 0.875rem;\n --spacing-3: 1.75rem;\n --input-padding: 0.5rem;\n --input-border-radius: 0.25rem;\n --input-font-size: var(--fs-base); }\n\n:root {\n --color-white: #fff;\n --color-black: #333;\n --color-gray-l5: #f1f1f1;\n --color-gray-l2: #adadad;\n --color-gray-l1: #dcdcdc;\n --color-gray-d1: #666;\n --color-gray-d3: #333;\n --color-gray-100: #f1f1f1;\n --color-gray-200: #dcdcdc;\n --color-gray-500: #adadad;\n --color-gray-700: #666;\n --color-gray-900: #333;\n --color-tealblue-100: #c8eefa;\n --color-tealblue-500: #0081a2;\n --color-tealblue-900: #005072;\n --color-orange: #feba35;\n --color-red: #ec040b;\n --color-green: hsl(148, 100%, 26%);\n --color-primary-l1: #e3f2ff;\n --color-primary: #0070c4;\n --color-primary-d1: #004f84;\n --color-primary--hover: var(--color-primary-d1);\n --color-text: var(--color-gray-d3);\n --color-error: var(--color-red);\n --color-disabled: var(--color-gray-l2);\n --color-input-background: var(--color-white);\n --color-input-border: var(--color-gray-d1);\n --color-input-border--hover: var(--color-primary-d1);\n --color-input: var(--color-gray-d3);\n --color-input--focused: var(--color-orange);\n --color-button-primary: var(--color-primary);\n --color-button-primary--hover: var(--color-primary-d1);\n --color-button-tertiary: var(--color-gray-l2);\n --color-button-tertiary--hover: var(--color-gray-l5); }\n\n/* Forms */\n.goa-input {\n position: relative; }\n\n.goa-input-leading-icon {\n position: absolute;\n display: flex;\n align-items: center;\n top: 0;\n bottom: 0;\n left: 0.5rem; }\n\n.goa-input input {\n outline: none;\n transition: box-shadow 0.1s ease-in;\n border: 1px solid var(--color-input-border);\n border-radius: 3px;\n background: white;\n color: var(--color-input);\n padding: var(--input-padding);\n font-size: var(--input-font-size);\n display: block;\n width: 100%;\n line-height: 1.5rem;\n padding: 0.5rem 2rem 0.5rem 0.5rem; }\n .goa-input input:hover {\n border-color: var(--color-input-border--hover); }\n .goa-input input:active, .goa-input input:focus {\n box-shadow: 0 0 0 3px var(--color-input--focused); }\n .goa-input input:disabled {\n border-color: var(--color-disabled); }\n .goa-input input:disabled:hover {\n border-color: var(--color-disabled); }\n .goa-input input:disabled:focus {\n box-shadow: none; }\n\n.goa-input .input--leading-icon {\n padding-left: 2rem; }\n\n.goa-state--error .goa-input input {\n border: 2px solid var(--color-error); }\n";
877
391
  styleInject(css_248z$6);
878
392
 
879
393
  var GoAInput = function GoAInput(_ref) {
@@ -895,8 +409,73 @@
895
409
  }
896
410
  })));
897
411
  };
412
+ var GoAInputText = function GoAInputText(props) {
413
+ return /*#__PURE__*/React__default.createElement(GoAInput, Object.assign({}, props, {
414
+ type: "text"
415
+ }));
416
+ };
417
+ var GoAInputPassword = function GoAInputPassword(props) {
418
+ return /*#__PURE__*/React__default.createElement(GoAInput, Object.assign({}, props, {
419
+ type: "password"
420
+ }));
421
+ };
422
+ var GoAInputDate = function GoAInputDate(props) {
423
+ return /*#__PURE__*/React__default.createElement(GoAInput, Object.assign({}, props, {
424
+ type: "date"
425
+ }));
426
+ };
427
+ var GoAInputTime = function GoAInputTime(props) {
428
+ return /*#__PURE__*/React__default.createElement(GoAInput, Object.assign({}, props, {
429
+ type: "time"
430
+ }));
431
+ };
432
+ var GoAInputDateTime = function GoAInputDateTime(props) {
433
+ return /*#__PURE__*/React__default.createElement(GoAInput, Object.assign({}, props, {
434
+ type: "datetime-local"
435
+ }));
436
+ };
437
+ var GoAInputEmail = function GoAInputEmail(props) {
438
+ return /*#__PURE__*/React__default.createElement(GoAInput, Object.assign({}, props, {
439
+ type: "email"
440
+ }));
441
+ };
442
+ var GoAInputSearch = function GoAInputSearch(props) {
443
+ return /*#__PURE__*/React__default.createElement(GoAInput, Object.assign({}, props, {
444
+ type: "search"
445
+ }));
446
+ };
447
+ var GoAInputUrl = function GoAInputUrl(props) {
448
+ return /*#__PURE__*/React__default.createElement(GoAInput, Object.assign({}, props, {
449
+ type: "url"
450
+ }));
451
+ };
452
+ var GoAInputTel = function GoAInputTel(props) {
453
+ return /*#__PURE__*/React__default.createElement(GoAInput, Object.assign({}, props, {
454
+ type: "tel"
455
+ }));
456
+ };
457
+ var GoAInputFile = function GoAInputFile(props) {
458
+ return /*#__PURE__*/React__default.createElement(GoAInput, Object.assign({}, props, {
459
+ type: "file"
460
+ }));
461
+ };
462
+ var GoAInputMonth = function GoAInputMonth(props) {
463
+ return /*#__PURE__*/React__default.createElement(GoAInput, Object.assign({}, props, {
464
+ type: "month"
465
+ }));
466
+ };
467
+ var GoAInputNumber = function GoAInputNumber(props) {
468
+ return /*#__PURE__*/React__default.createElement(GoAInput, Object.assign({}, props, {
469
+ type: "number"
470
+ }));
471
+ };
472
+ var GoAInputRange = function GoAInputRange(props) {
473
+ return /*#__PURE__*/React__default.createElement(GoAInput, Object.assign({}, props, {
474
+ type: "range"
475
+ }));
476
+ };
898
477
 
899
- var css_248z$7 = ".goa-scrollable {\n overflow: hidden;\n height: 100%; }\n\n.goa-scrollable > div::-webkit-scrollbar {\n width: 6px; }\n\n.goa-scrollable > div::-webkit-scrollbar-track {\n background: #f1f1f1; }\n\n.goa-scrollable > div::-webkit-scrollbar-thumb {\n background: #888; }\n\n.goa-scrollable > div::-webkit-scrollbar-thumb:hover {\n background: #555; }\n";
478
+ var css_248z$7 = ".goa-scrollable {\n scroll-behavior: smooth; }\n\n.goa-scrollable::-webkit-scrollbar {\n width: 6px; }\n\n.goa-scrollable::-webkit-scrollbar-track {\n background: #f1f1f1; }\n\n.goa-scrollable::-webkit-scrollbar-thumb {\n background: #888; }\n\n.goa-scrollable::-webkit-scrollbar-thumb:hover {\n background: #555; }\n";
900
479
  styleInject(css_248z$7);
901
480
 
902
481
  var GoAScrollable = function GoAScrollable(_ref) {
@@ -914,11 +493,10 @@
914
493
  padding: "".concat(vPadding !== null && vPadding !== void 0 ? vPadding : 0, "rem ").concat(hPadding !== null && hPadding !== void 0 ? hPadding : 0, "rem")
915
494
  };
916
495
  return /*#__PURE__*/React__default.createElement("div", {
917
- className: "goa-scrollable"
918
- }, /*#__PURE__*/React__default.createElement("div", {
496
+ className: "goa-scrollable",
919
497
  style: style,
920
498
  "data-testid": testId
921
- }, children));
499
+ }, children);
922
500
  };
923
501
 
924
502
  var css_248z$8 = "/* Fade in */\n.fade-in-init {\n display: none; }\n\n.fade-in-start {\n display: block;\n opacity: 0;\n transition: opacity 200ms ease-in; }\n\n.fade-in-active {\n opacity: 1; }\n\n/* Fade out */\n.fade-out-init {\n display: block; }\n\n.fade-out-start {\n display: block;\n opacity: 1;\n transition: opacity 200ms ease-in; }\n\n.fade-out-active {\n opacity: 0; }\n\n/* ======= Slide in/out Up */\n/* Slide in up */\n.slide-in-up-init {\n transition: translateY(0);\n display: none; }\n\n.slide-in-up-start {\n display: block;\n transform: translateY(100vh);\n transition: transform 300ms ease-out; }\n\n.slide-in-up-active {\n transform: translateY(0); }\n\n/* Slide out up */\n.slide-out-up-init {\n transform: translateY(0);\n display: block; }\n\n.slide-out-up-start {\n transition: transform 300ms ease-in; }\n\n.slide-out-up-active {\n transform: translateY(-100vh); }\n\n/* ======= Slide in/out Down */\n/* Slide in down */\n.slide-in-down-init {\n transition: translateY(0);\n display: none; }\n\n.slide-in-down-start {\n display: block;\n transform: translateY(-100vh);\n transition: transform 300ms ease-out; }\n\n.slide-in-down-active {\n transform: translateY(0); }\n\n/* Slide out down */\n.slide-out-down-init {\n transform: translateY(0);\n display: block; }\n\n.slide-out-down-start {\n transform: translateY(0);\n transition: transform 300ms ease-in; }\n\n.slide-out-down-active {\n transform: translateY(100vh); }\n\n/* ======= Slide in/out Left */\n/* Slide in left */\n.slide-in-left-init {\n transition: translateX(0);\n display: none; }\n\n.slide-in-left-start {\n display: block;\n transform: translateX(-100vw);\n transition: transform 300ms ease-out; }\n\n.slide-in-left-active {\n transform: translateX(0); }\n\n/* Slide out left */\n.slide-out-left-init {\n transform: translateX(0);\n display: block; }\n\n.slide-out-left-start {\n transform: translateX(0);\n transition: transform 300ms ease-in; }\n\n.slide-out-left-active {\n transform: translateX(-100vw); }\n\n/* ======= Slide in/out Right */\n/* Slide in left */\n.slide-in-right-init {\n transition: translateX(0);\n display: none; }\n\n.slide-in-right-start {\n display: block;\n transform: translateX(100vw);\n transition: transform 300ms ease-out; }\n\n.slide-in-right-active {\n transform: translateX(0); }\n\n/* Slide out right */\n.slide-out-right-init {\n transform: translateX(0);\n display: block; }\n\n.slide-out-right-start {\n transform: translateX(0);\n transition: transform 300ms ease-in; }\n\n.slide-out-right-active {\n transform: translateX(100vw); }\n";
@@ -1084,23 +662,23 @@
1084
662
  // ***************
1085
663
 
1086
664
  var GoAModalContent = function GoAModalContent(_ref3) {
1087
- var scrollable = _ref3.scrollable,
665
+ var disableScroll = _ref3.disableScroll,
1088
666
  children = _ref3.children,
1089
667
  testId = _ref3.testId;
1090
668
 
1091
- if (scrollable) {
1092
- return /*#__PURE__*/React__default.createElement(GoAScrollable, {
1093
- testId: testId,
1094
- vertical: true,
1095
- hPadding: 1.75
669
+ if (disableScroll) {
670
+ return /*#__PURE__*/React__default.createElement("div", {
671
+ "data-testid": testId,
672
+ style: {
673
+ padding: "0 1.75rem"
674
+ }
1096
675
  }, children);
1097
676
  }
1098
677
 
1099
- return /*#__PURE__*/React__default.createElement("div", {
1100
- "data-testid": testId,
1101
- style: {
1102
- padding: "0 1.75rem"
1103
- }
678
+ return /*#__PURE__*/React__default.createElement(GoAScrollable, {
679
+ testId: testId,
680
+ vertical: true,
681
+ hPadding: 1.75
1104
682
  }, children);
1105
683
  }; // *************
1106
684
  // GoAModalTitle
@@ -1179,7 +757,7 @@
1179
757
  return scrollbarWidth;
1180
758
  }
1181
759
 
1182
- var css_248z$a = ":root {\n /* font-size */\n --fs-xs: 0.75rem;\n --fs-sm: 0.875rem;\n --fs-base: 1.125rem;\n --fs-lg: 1.25rem;\n --fs-xl: 1.5rem;\n --fs-2xl: 2.25rem;\n --fs-3xl: 3rem;\n /* font-weight */\n --fw-thin: 100;\n --fw-light: 300;\n --fw-regular: 400;\n --fw-medium: 500;\n --fw-bold: 700;\n --fw-black: 900;\n /* line-height */\n --lh-xs: 0.875rem;\n --lh-sm: 1rem;\n --lh-base: 1.5rem;\n --lh-lg: 2rem;\n --lh-xl: 2.75rem;\n --lh-2xl: 3.5rem;\n --border-radius-sm: 0.15rem;\n --border-radius: 0.25rem;\n --border-radius-base: 0.25rem;\n --border-radius-lg: 0.5rem;\n --spacing-1: 0.5rem;\n --spacing-2: 0.875rem;\n --spacing-3: 1.75rem;\n --input-padding: 0.5rem;\n --input-border-radius: 0.25rem;\n --input-font-size: var(--fs-base); }\n\n:root {\n --color-white: #fff;\n --color-black: #333;\n --color-gray-l5: #f1f1f1;\n --color-gray-l2: #adadad;\n --color-gray-l1: #dcdcdc;\n --color-gray-d1: #666;\n --color-gray-d3: #333;\n --color-gray-100: #f1f1f1;\n --color-gray-200: #dcdcdc;\n --color-gray-500: #adadad;\n --color-gray-700: #666;\n --color-gray-900: #333;\n --color-tealblue-100: #c8eefa;\n --color-tealblue-500: #0081a2;\n --color-tealblue-900: #005072;\n --color-orange: #feba35;\n --color-red: #ec040b;\n --color-green: hsl(148, 100%, 26%);\n --color-primary: #0070c4;\n --color-primary-d1: #004f84;\n --color-primary--hover: var(--color-primary-d1);\n --color-text: var(--color-gray-d3);\n --color-error: var(--color-red);\n --color-disabled: var(--color-gray-l2);\n --color-input-background: var(--color-white);\n --color-input-border: var(--color-gray-d1);\n --color-input-border--hover: var(--color-primary-d1);\n --color-input: var(--color-gray-d3);\n --color-input--focused: var(--color-orange);\n --color-button-primary: var(--color-primary);\n --color-button-primary--hover: var(--color-primary-d1);\n --color-button-tertiary: var(--color-gray-l2);\n --color-button-tertiary--hover: var(--color-gray-l5); }\n\n/* Forms */\n.goa-textarea {\n outline: none;\n transition: box-shadow 0.1s ease-in;\n border: 1px solid var(--color-input-border);\n border-radius: 3px;\n background: white;\n color: var(--color-input);\n padding: var(--input-padding);\n font-size: var(--input-font-size);\n display: block;\n width: 100%; }\n .goa-textarea:hover {\n border-color: var(--color-input-border--hover); }\n .goa-textarea:active, .goa-textarea:focus {\n box-shadow: 0 0 0 3px var(--color-input--focused); }\n .goa-textarea:disabled {\n border-color: var(--color-disabled); }\n .goa-textarea:disabled:hover {\n border-color: var(--color-disabled); }\n .goa-textarea:disabled:focus {\n box-shadow: none; }\n\n.goa-state--error textarea,\n.goa-state--error textarea:hover {\n border: 2px solid var(--color-red); }\n";
760
+ var css_248z$a = ":root {\n /* font-size */\n --fs-xs: 0.75rem;\n --fs-sm: 0.875rem;\n --fs-base: 1.125rem;\n --fs-lg: 1.25rem;\n --fs-xl: 1.5rem;\n --fs-2xl: 2.25rem;\n --fs-3xl: 3rem;\n /* font-weight */\n --fw-thin: 100;\n --fw-light: 300;\n --fw-regular: 400;\n --fw-medium: 500;\n --fw-bold: 700;\n --fw-black: 900;\n /* line-height */\n --lh-xs: 0.875rem;\n --lh-sm: 1rem;\n --lh-base: 1.5rem;\n --lh-lg: 2rem;\n --lh-xl: 2.75rem;\n --lh-2xl: 3.5rem;\n --border-radius-sm: 0.15rem;\n --border-radius: 0.25rem;\n --border-radius-base: 0.25rem;\n --border-radius-lg: 0.5rem;\n --spacing-1: 0.5rem;\n --spacing-2: 0.875rem;\n --spacing-3: 1.75rem;\n --input-padding: 0.5rem;\n --input-border-radius: 0.25rem;\n --input-font-size: var(--fs-base); }\n\n:root {\n --color-white: #fff;\n --color-black: #333;\n --color-gray-l5: #f1f1f1;\n --color-gray-l2: #adadad;\n --color-gray-l1: #dcdcdc;\n --color-gray-d1: #666;\n --color-gray-d3: #333;\n --color-gray-100: #f1f1f1;\n --color-gray-200: #dcdcdc;\n --color-gray-500: #adadad;\n --color-gray-700: #666;\n --color-gray-900: #333;\n --color-tealblue-100: #c8eefa;\n --color-tealblue-500: #0081a2;\n --color-tealblue-900: #005072;\n --color-orange: #feba35;\n --color-red: #ec040b;\n --color-green: hsl(148, 100%, 26%);\n --color-primary-l1: #e3f2ff;\n --color-primary: #0070c4;\n --color-primary-d1: #004f84;\n --color-primary--hover: var(--color-primary-d1);\n --color-text: var(--color-gray-d3);\n --color-error: var(--color-red);\n --color-disabled: var(--color-gray-l2);\n --color-input-background: var(--color-white);\n --color-input-border: var(--color-gray-d1);\n --color-input-border--hover: var(--color-primary-d1);\n --color-input: var(--color-gray-d3);\n --color-input--focused: var(--color-orange);\n --color-button-primary: var(--color-primary);\n --color-button-primary--hover: var(--color-primary-d1);\n --color-button-tertiary: var(--color-gray-l2);\n --color-button-tertiary--hover: var(--color-gray-l5); }\n\n/* Forms */\n.goa-textarea {\n outline: none;\n transition: box-shadow 0.1s ease-in;\n border: 1px solid var(--color-input-border);\n border-radius: 3px;\n background: white;\n color: var(--color-input);\n padding: var(--input-padding);\n font-size: var(--input-font-size);\n display: block;\n width: 100%; }\n .goa-textarea:hover {\n border-color: var(--color-input-border--hover); }\n .goa-textarea:active, .goa-textarea:focus {\n box-shadow: 0 0 0 3px var(--color-input--focused); }\n .goa-textarea:disabled {\n border-color: var(--color-disabled); }\n .goa-textarea:disabled:hover {\n border-color: var(--color-disabled); }\n .goa-textarea:disabled:focus {\n box-shadow: none; }\n\n.goa-state--error textarea,\n.goa-state--error textarea:hover {\n border: 2px solid var(--color-red); }\n";
1183
761
  styleInject(css_248z$a);
1184
762
 
1185
763
  var GoATextArea = function GoATextArea(_ref) {
@@ -1210,6 +788,19 @@
1210
788
  exports.GoAIcon = GoAIcon;
1211
789
  exports.GoAIconButton = GoAIconButton;
1212
790
  exports.GoAInput = GoAInput;
791
+ exports.GoAInputDate = GoAInputDate;
792
+ exports.GoAInputDateTime = GoAInputDateTime;
793
+ exports.GoAInputEmail = GoAInputEmail;
794
+ exports.GoAInputFile = GoAInputFile;
795
+ exports.GoAInputMonth = GoAInputMonth;
796
+ exports.GoAInputNumber = GoAInputNumber;
797
+ exports.GoAInputPassword = GoAInputPassword;
798
+ exports.GoAInputRange = GoAInputRange;
799
+ exports.GoAInputSearch = GoAInputSearch;
800
+ exports.GoAInputTel = GoAInputTel;
801
+ exports.GoAInputText = GoAInputText;
802
+ exports.GoAInputTime = GoAInputTime;
803
+ exports.GoAInputUrl = GoAInputUrl;
1213
804
  exports.GoAModal = GoAModal;
1214
805
  exports.GoAModalActions = GoAModalActions;
1215
806
  exports.GoAModalContent = GoAModalContent;