@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.
Files changed (11) hide show
  1. package/README.md +7 -102
  2. package/experimental/experimental/icons/icon.component.d.ts +5 -4
  3. package/experimental/experimental/index.d.ts +2 -2
  4. package/experimental/experimental/input/input.component.d.ts +30 -3
  5. package/experimental/experimental/modal/modal.component.d.ts +1 -1
  6. package/experimental/react-components.esm.js +131 -553
  7. package/experimental/react-components.umd.js +143 -552
  8. package/lib/element-loader/element-loader.d.ts +1 -10
  9. package/package.json +1 -1
  10. package/react-components.esm.js +36 -531
  11. package/react-components.umd.js +36 -531
package/experimental/react-components.esm.js CHANGED
@@ -189,10 +189,49 @@ function _nonIterableRest() {
189
189
  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
190
190
  }
191
191
 
192
- 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";
192
+ 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";
193
193
  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"};
194
194
  styleInject(css_248z$1);
195
195
 
196
+ 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";
197
+ styleInject(css_248z$2);
198
+
199
+ function GoAIcon(_ref) {
200
+ var type = _ref.type,
201
+ _ref$style = _ref.style,
202
+ style = _ref$style === void 0 ? 'outline' : _ref$style,
203
+ _ref$size = _ref.size,
204
+ size = _ref$size === void 0 ? 'small' : _ref$size;
205
+
206
+ var _size = getSize(size);
207
+
208
+ return /*#__PURE__*/React.createElement("div", {
209
+ style: {
210
+ width: _size
211
+ },
212
+ className: "goa-icon",
213
+ "data-testid": "icon-".concat(type)
214
+ }, /*#__PURE__*/React.createElement("ion-icon", {
215
+ style: {
216
+ fontSize: _size
217
+ },
218
+ name: style === 'filled' ? type : "".concat(type, "-").concat(style)
219
+ }));
220
+ }
221
+
222
+ function getSize(size) {
223
+ switch (size) {
224
+ case 'small':
225
+ return "16px";
226
+
227
+ case 'medium':
228
+ return "24px";
229
+
230
+ case 'large':
231
+ return "32px";
232
+ }
233
+ }
234
+
196
235
  var GoAAppVersionHeader = function GoAAppVersionHeader(_ref) {
197
236
  var isProdEnvironment = _ref.isProdEnvironment,
198
237
  environment = _ref.environment,
@@ -217,12 +256,14 @@ var GoAAppVersionHeader = function GoAAppVersionHeader(_ref) {
217
256
  onClick: function onClick() {
218
257
  return setClosed(true);
219
258
  }
220
- }, "\u2716")));
259
+ }, /*#__PURE__*/React.createElement(GoAIcon, {
260
+ type: "close"
261
+ }))));
221
262
  };
222
263
 
223
- 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";
264
+ 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";
224
265
  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"};
225
- styleInject(css_248z$2);
266
+ styleInject(css_248z$3);
226
267
 
227
268
  var GoACard = function GoACard(_ref) {
228
269
  var title = _ref.title,
@@ -259,8 +300,8 @@ var GoACard = function GoACard(_ref) {
259
300
  }, children)));
260
301
  };
261
302
 
262
- 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";
263
- styleInject(css_248z$3);
303
+ 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";
304
+ styleInject(css_248z$4);
264
305
 
265
306
  var GoAFlexRow = function GoAFlexRow(_ref) {
266
307
  var gap = _ref.gap,
@@ -310,8 +351,8 @@ var GoAFormActions = function GoAFormActions(_ref) {
310
351
  }, children);
311
352
  };
312
353
 
313
- 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";
314
- styleInject(css_248z$4);
354
+ 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";
355
+ styleInject(css_248z$5);
315
356
 
316
357
  var GoAForm = function GoAForm(_ref) {
317
358
  var children = _ref.children;
@@ -320,533 +361,6 @@ var GoAForm = function GoAForm(_ref) {
320
361
  }, children);
321
362
  };
322
363
 
323
- 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";
324
- styleInject(css_248z$5);
325
-
326
- var Icons = {
327
- barChart: /*#__PURE__*/React.createElement("svg", {
328
- xmlns: "http://www.w3.org/2000/svg",
329
- className: "ionicon",
330
- viewBox: "0 0 512 512"
331
- }, /*#__PURE__*/React.createElement("title", null, "Bar Chart"), /*#__PURE__*/React.createElement("path", {
332
- d: "M32 32v432a16 16 0 0016 16h432",
333
- fill: "none",
334
- stroke: "currentColor",
335
- strokeLinecap: "round",
336
- strokeLinejoin: "round",
337
- strokeWidth: "32"
338
- }), /*#__PURE__*/React.createElement("rect", {
339
- x: "96",
340
- y: "224",
341
- width: "80",
342
- height: "192",
343
- rx: "20",
344
- ry: "20",
345
- fill: "none",
346
- stroke: "currentColor",
347
- strokeLinecap: "round",
348
- strokeLinejoin: "round",
349
- strokeWidth: "32"
350
- }), /*#__PURE__*/React.createElement("rect", {
351
- x: "240",
352
- y: "176",
353
- width: "80",
354
- height: "240",
355
- rx: "20",
356
- ry: "20",
357
- fill: "none",
358
- stroke: "currentColor",
359
- strokeLinecap: "round",
360
- strokeLinejoin: "round",
361
- strokeWidth: "32"
362
- }), /*#__PURE__*/React.createElement("rect", {
363
- x: "383.64",
364
- y: "112",
365
- width: "80",
366
- height: "304",
367
- rx: "20",
368
- ry: "20",
369
- fill: "none",
370
- stroke: "currentColor",
371
- strokeLinecap: "round",
372
- strokeLinejoin: "round",
373
- strokeWidth: "32"
374
- })),
375
- build: /*#__PURE__*/React.createElement("svg", {
376
- xmlns: "http://www.w3.org/2000/svg",
377
- className: "ionicon",
378
- viewBox: "0 0 512 512"
379
- }, /*#__PURE__*/React.createElement("title", null, "Build"), /*#__PURE__*/React.createElement("path", {
380
- 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",
381
- fill: "none",
382
- stroke: "currentColor",
383
- strokeLinecap: "round",
384
- strokeMiterlimit: "10",
385
- strokeWidth: "32"
386
- }), /*#__PURE__*/React.createElement("circle", {
387
- cx: "96",
388
- cy: "416",
389
- r: "16"
390
- })),
391
- checkmarkCircle: /*#__PURE__*/React.createElement("svg", {
392
- xmlns: "http://www.w3.org/2000/svg",
393
- className: "ionicon",
394
- viewBox: "0 0 512 512"
395
- }, /*#__PURE__*/React.createElement("title", null, "Checkmark Circle"), /*#__PURE__*/React.createElement("path", {
396
- d: "M448 256c0-106-86-192-192-192S64 150 64 256s86 192 192 192 192-86 192-192z",
397
- fill: "none",
398
- stroke: "currentColor",
399
- strokeMiterlimit: "10",
400
- strokeWidth: "32"
401
- }), /*#__PURE__*/React.createElement("path", {
402
- fill: "none",
403
- stroke: "currentColor",
404
- strokeLinecap: "round",
405
- strokeLinejoin: "round",
406
- strokeWidth: "32",
407
- d: "M352 176L217.6 336 160 272"
408
- })),
409
- chevronDown: /*#__PURE__*/React.createElement("svg", {
410
- xmlns: "http://www.w3.org/2000/svg",
411
- className: "ionicon",
412
- viewBox: "0 0 512 512"
413
- }, /*#__PURE__*/React.createElement("title", null, "Chevron Down"), /*#__PURE__*/React.createElement("path", {
414
- fill: "none",
415
- stroke: "currentColor",
416
- strokeLinecap: "round",
417
- strokeLinejoin: "round",
418
- strokeWidth: "48",
419
- d: "M112 184l144 144 144-144"
420
- })),
421
- close: /*#__PURE__*/React.createElement("svg", {
422
- xmlns: "http://www.w3.org/2000/svg",
423
- className: "ionicon",
424
- viewBox: "0 0 512 512"
425
- }, /*#__PURE__*/React.createElement("title", null, "Close"), /*#__PURE__*/React.createElement("path", {
426
- fill: "none",
427
- stroke: "currentColor",
428
- strokeLinecap: "round",
429
- strokeLinejoin: "round",
430
- strokeWidth: "32",
431
- d: "M368 368L144 144M368 144L144 368"
432
- })),
433
- closeCircle: /*#__PURE__*/React.createElement("svg", {
434
- xmlns: "http://www.w3.org/2000/svg",
435
- className: "ionicon",
436
- viewBox: "0 0 512 512"
437
- }, /*#__PURE__*/React.createElement("title", null, "Close Circle"), /*#__PURE__*/React.createElement("path", {
438
- d: "M448 256c0-106-86-192-192-192S64 150 64 256s86 192 192 192 192-86 192-192z",
439
- fill: "none",
440
- stroke: "currentColor",
441
- strokeMiterlimit: "10",
442
- strokeWidth: "32"
443
- }), /*#__PURE__*/React.createElement("path", {
444
- fill: "none",
445
- stroke: "currentColor",
446
- strokeLinecap: "round",
447
- strokeLinejoin: "round",
448
- strokeWidth: "32",
449
- d: "M320 320L192 192M192 320l128-128"
450
- })),
451
- create: /*#__PURE__*/React.createElement("svg", {
452
- xmlns: "http://www.w3.org/2000/svg",
453
- className: "ionicon",
454
- viewBox: "0 0 512 512"
455
- }, /*#__PURE__*/React.createElement("title", null, "Create"), /*#__PURE__*/React.createElement("path", {
456
- d: "M384 224v184a40 40 0 01-40 40H104a40 40 0 01-40-40V168a40 40 0 0140-40h167.48",
457
- fill: "none",
458
- stroke: "currentColor",
459
- strokeLinecap: "round",
460
- strokeLinejoin: "round",
461
- strokeWidth: "32"
462
- }), /*#__PURE__*/React.createElement("path", {
463
- 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"
464
- })),
465
- download: /*#__PURE__*/React.createElement("svg", {
466
- xmlns: "http://www.w3.org/2000/svg",
467
- className: "ionicon",
468
- viewBox: "0 0 512 512"
469
- }, /*#__PURE__*/React.createElement("title", null, "Download"), /*#__PURE__*/React.createElement("path", {
470
- d: "M336 176h40a40 40 0 0140 40v208a40 40 0 01-40 40H136a40 40 0 01-40-40V216a40 40 0 0140-40h40",
471
- fill: "none",
472
- stroke: "currentColor",
473
- strokeLinecap: "round",
474
- strokeLinejoin: "round",
475
- strokeWidth: "32"
476
- }), /*#__PURE__*/React.createElement("path", {
477
- fill: "none",
478
- stroke: "currentColor",
479
- strokeLinecap: "round",
480
- strokeLinejoin: "round",
481
- strokeWidth: "32",
482
- d: "M176 272l80 80 80-80M256 48v288"
483
- })),
484
- pencil: /*#__PURE__*/React.createElement("svg", {
485
- xmlns: "http://www.w3.org/2000/svg",
486
- className: "ionicon",
487
- viewBox: "0 0 512 512"
488
- }, /*#__PURE__*/React.createElement("title", null, "Pencil"), /*#__PURE__*/React.createElement("path", {
489
- fill: "none",
490
- stroke: "currentColor",
491
- strokeLinecap: "round",
492
- strokeLinejoin: "round",
493
- strokeWidth: "32",
494
- 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"
495
- })),
496
- eye: /*#__PURE__*/React.createElement("svg", {
497
- xmlns: "http://www.w3.org/2000/svg",
498
- className: "ionicon",
499
- viewBox: "0 0 512 512"
500
- }, /*#__PURE__*/React.createElement("title", null, "Eye"), /*#__PURE__*/React.createElement("path", {
501
- 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",
502
- fill: "none",
503
- stroke: "currentColor",
504
- strokeLinecap: "round",
505
- strokeLinejoin: "round",
506
- strokeWidth: "32"
507
- }), /*#__PURE__*/React.createElement("circle", {
508
- cx: "256",
509
- cy: "256",
510
- r: "80",
511
- fill: "none",
512
- stroke: "currentColor",
513
- strokeMiterlimit: "10",
514
- strokeWidth: "32"
515
- })),
516
- eyeOff: /*#__PURE__*/React.createElement("svg", {
517
- xmlns: "http://www.w3.org/2000/svg",
518
- className: "ionicon",
519
- viewBox: "0 0 512 512"
520
- }, /*#__PURE__*/React.createElement("title", null, "Eye Off"), /*#__PURE__*/React.createElement("path", {
521
- 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"
522
- }), /*#__PURE__*/React.createElement("path", {
523
- 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"
524
- })),
525
- file: /*#__PURE__*/React.createElement("svg", {
526
- xmlns: "http://www.w3.org/2000/svg",
527
- className: "ionicon",
528
- viewBox: "0 0 512 512"
529
- }, /*#__PURE__*/React.createElement("title", null, "Document"), /*#__PURE__*/React.createElement("path", {
530
- 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",
531
- fill: "none",
532
- stroke: "currentColor",
533
- strokeLinejoin: "round",
534
- strokeWidth: "32"
535
- }), /*#__PURE__*/React.createElement("path", {
536
- d: "M256 56v120a32 32 0 0032 32h120",
537
- fill: "none",
538
- stroke: "currentColor",
539
- strokeLinecap: "round",
540
- strokeLinejoin: "round",
541
- strokeWidth: "32"
542
- })),
543
- fitness: /*#__PURE__*/React.createElement("svg", {
544
- xmlns: "http://www.w3.org/2000/svg",
545
- className: "ionicon",
546
- viewBox: "0 0 512 512"
547
- }, /*#__PURE__*/React.createElement("title", null, "Fitness"), /*#__PURE__*/React.createElement("path", {
548
- 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",
549
- fill: "none",
550
- stroke: "currentColor",
551
- strokeLinecap: "round",
552
- strokeLinejoin: "round",
553
- strokeWidth: "32"
554
- }), /*#__PURE__*/React.createElement("path", {
555
- fill: "none",
556
- stroke: "currentColor",
557
- strokeLinecap: "round",
558
- strokeLinejoin: "round",
559
- strokeWidth: "32",
560
- d: "M48 256h112l48-96 48 160 48-96 32 64h128"
561
- })),
562
- helpCircle: /*#__PURE__*/React.createElement("svg", {
563
- xmlns: "http://www.w3.org/2000/svg",
564
- className: "ionicon",
565
- viewBox: "0 0 512 512"
566
- }, /*#__PURE__*/React.createElement("title", null, "Help Circle"), /*#__PURE__*/React.createElement("path", {
567
- d: "M256 80a176 176 0 10176 176A176 176 0 00256 80z",
568
- fill: "none",
569
- stroke: "currentColor",
570
- strokeMiterlimit: "10",
571
- strokeWidth: "32"
572
- }), /*#__PURE__*/React.createElement("path", {
573
- 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",
574
- fill: "none",
575
- stroke: "currentColor",
576
- strokeLinecap: "round",
577
- strokeMiterlimit: "10",
578
- strokeWidth: "28"
579
- }), /*#__PURE__*/React.createElement("circle", {
580
- cx: "250",
581
- cy: "348",
582
- r: "20"
583
- })),
584
- home: /*#__PURE__*/React.createElement("svg", {
585
- xmlns: "http://www.w3.org/2000/svg",
586
- className: "ionicon",
587
- viewBox: "0 0 512 512"
588
- }, /*#__PURE__*/React.createElement("title", null, "Home"), /*#__PURE__*/React.createElement("path", {
589
- d: "M80 212v236a16 16 0 0016 16h96V328a24 24 0 0124-24h80a24 24 0 0124 24v136h96a16 16 0 0016-16V212",
590
- fill: "none",
591
- stroke: "currentColor",
592
- strokeLinecap: "round",
593
- strokeLinejoin: "round",
594
- strokeWidth: "32"
595
- }), /*#__PURE__*/React.createElement("path", {
596
- d: "M480 256L266.89 52c-5-5.28-16.69-5.34-21.78 0L32 256M400 179V64h-48v69",
597
- fill: "none",
598
- stroke: "currentColor",
599
- strokeLinecap: "round",
600
- strokeLinejoin: "round",
601
- strokeWidth: "32"
602
- })),
603
- hourGlass: /*#__PURE__*/React.createElement("svg", {
604
- xmlns: "http://www.w3.org/2000/svg",
605
- className: "ionicon",
606
- viewBox: "0 0 512 512"
607
- }, /*#__PURE__*/React.createElement("title", null, "Hourglass"), /*#__PURE__*/React.createElement("path", {
608
- 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",
609
- fill: "none",
610
- stroke: "currentColor",
611
- strokeLinecap: "round",
612
- strokeLinejoin: "round",
613
- strokeWidth: "32"
614
- }), /*#__PURE__*/React.createElement("path", {
615
- 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"
616
- })),
617
- logout: /*#__PURE__*/React.createElement("svg", {
618
- xmlns: "http://www.w3.org/2000/svg",
619
- className: "ionicon",
620
- viewBox: "0 0 512 512"
621
- }, /*#__PURE__*/React.createElement("title", null, "Log Out"), /*#__PURE__*/React.createElement("path", {
622
- 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",
623
- fill: "none",
624
- stroke: "currentColor",
625
- strokeLinecap: "round",
626
- strokeLinejoin: "round",
627
- strokeWidth: "32"
628
- })),
629
- megaphone: /*#__PURE__*/React.createElement("svg", {
630
- xmlns: "http://www.w3.org/2000/svg",
631
- className: "ionicon",
632
- viewBox: "0 0 512 512"
633
- }, /*#__PURE__*/React.createElement("title", null, "Megaphone"), /*#__PURE__*/React.createElement("path", {
634
- 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",
635
- fill: "none",
636
- stroke: "currentColor",
637
- strokeLinecap: "round",
638
- strokeLinejoin: "round",
639
- strokeWidth: "32"
640
- }), /*#__PURE__*/React.createElement("path", {
641
- 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",
642
- fill: "none",
643
- stroke: "currentColor",
644
- strokeLinecap: "round",
645
- strokeLinejoin: "round",
646
- strokeWidth: "32"
647
- })),
648
- menu: /*#__PURE__*/React.createElement("svg", {
649
- xmlns: "http://www.w3.org/2000/svg",
650
- className: "ionicon",
651
- viewBox: "0 0 512 512"
652
- }, /*#__PURE__*/React.createElement("title", null, "Menu"), /*#__PURE__*/React.createElement("path", {
653
- fill: "none",
654
- stroke: "currentColor",
655
- strokeLinecap: "round",
656
- strokeMiterlimit: "10",
657
- strokeWidth: "32",
658
- d: "M80 160h352M80 256h352M80 352h352"
659
- })),
660
- options: /*#__PURE__*/React.createElement("svg", {
661
- xmlns: "http://www.w3.org/2000/svg",
662
- className: "ionicon",
663
- viewBox: "0 0 512 512"
664
- }, /*#__PURE__*/React.createElement("title", null, "Options"), /*#__PURE__*/React.createElement("path", {
665
- fill: "none",
666
- stroke: "currentColor",
667
- strokeLinecap: "round",
668
- strokeLinejoin: "round",
669
- strokeWidth: "32",
670
- d: "M368 128h80M64 128h240M368 384h80M64 384h240M208 256h240M64 256h80"
671
- }), /*#__PURE__*/React.createElement("circle", {
672
- cx: "336",
673
- cy: "128",
674
- r: "32",
675
- fill: "none",
676
- stroke: "currentColor",
677
- strokeLinecap: "round",
678
- strokeLinejoin: "round",
679
- strokeWidth: "32"
680
- }), /*#__PURE__*/React.createElement("circle", {
681
- cx: "176",
682
- cy: "256",
683
- r: "32",
684
- fill: "none",
685
- stroke: "currentColor",
686
- strokeLinecap: "round",
687
- strokeLinejoin: "round",
688
- strokeWidth: "32"
689
- }), /*#__PURE__*/React.createElement("circle", {
690
- cx: "336",
691
- cy: "384",
692
- r: "32",
693
- fill: "none",
694
- stroke: "currentColor",
695
- strokeLinecap: "round",
696
- strokeLinejoin: "round",
697
- strokeWidth: "32"
698
- })),
699
- pauseCircle: /*#__PURE__*/React.createElement("svg", {
700
- xmlns: "http://www.w3.org/2000/svg",
701
- className: "ionicon",
702
- viewBox: "0 0 512 512"
703
- }, /*#__PURE__*/React.createElement("title", null, "Pause Circle"), /*#__PURE__*/React.createElement("path", {
704
- d: "M448 256c0-106-86-192-192-192S64 150 64 256s86 192 192 192 192-86 192-192z",
705
- fill: "none",
706
- stroke: "currentColor",
707
- strokeMiterlimit: "10",
708
- strokeWidth: "32"
709
- }), /*#__PURE__*/React.createElement("path", {
710
- fill: "none",
711
- stroke: "currentColor",
712
- strokeLinecap: "round",
713
- strokeMiterlimit: "10",
714
- strokeWidth: "32",
715
- d: "M208 192v128M304 192v128"
716
- })),
717
- personCircle: /*#__PURE__*/React.createElement("svg", {
718
- xmlns: "http://www.w3.org/2000/svg",
719
- className: "ionicon",
720
- viewBox: "0 0 512 512"
721
- }, /*#__PURE__*/React.createElement("title", null, "Person Circle"), /*#__PURE__*/React.createElement("path", {
722
- 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"
723
- }), /*#__PURE__*/React.createElement("path", {
724
- 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"
725
- })),
726
- playCircle: /*#__PURE__*/React.createElement("svg", {
727
- xmlns: "http://www.w3.org/2000/svg",
728
- className: "ionicon",
729
- viewBox: "0 0 512 512"
730
- }, /*#__PURE__*/React.createElement("title", null, "Play Circle"), /*#__PURE__*/React.createElement("path", {
731
- d: "M448 256c0-106-86-192-192-192S64 150 64 256s86 192 192 192 192-86 192-192z",
732
- fill: "none",
733
- stroke: "currentColor",
734
- strokeMiterlimit: "10",
735
- strokeWidth: "32"
736
- }), /*#__PURE__*/React.createElement("path", {
737
- 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"
738
- })),
739
- pulse: /*#__PURE__*/React.createElement("svg", {
740
- xmlns: "http://www.w3.org/2000/svg",
741
- className: "ionicon",
742
- viewBox: "0 0 512 512"
743
- }, /*#__PURE__*/React.createElement("title", null, "Pulse"), /*#__PURE__*/React.createElement("path", {
744
- fill: "none",
745
- stroke: "currentColor",
746
- strokeLinecap: "round",
747
- strokeLinejoin: "round",
748
- strokeWidth: "32",
749
- d: "M48 320h64l64-256 64 384 64-224 32 96h64"
750
- }), /*#__PURE__*/React.createElement("circle", {
751
- cx: "432",
752
- cy: "320",
753
- r: "32",
754
- fill: "none",
755
- stroke: "currentColor",
756
- strokeLinecap: "round",
757
- strokeLinejoin: "round",
758
- strokeWidth: "32"
759
- })),
760
- receipt: /*#__PURE__*/React.createElement("svg", {
761
- xmlns: "http://www.w3.org/2000/svg",
762
- className: "ionicon",
763
- viewBox: "0 0 512 512"
764
- }, /*#__PURE__*/React.createElement("title", null, "Receipt"), /*#__PURE__*/React.createElement("path", {
765
- fill: "none",
766
- stroke: "currentColor",
767
- strokeLinejoin: "round",
768
- strokeWidth: "32",
769
- d: "M160 336V48l32 16 32-16 31.94 16 32.37-16L320 64l31.79-16 31.93 16L416 48l32.01 16L480 48v224"
770
- }), /*#__PURE__*/React.createElement("path", {
771
- 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",
772
- fill: "none",
773
- stroke: "currentColor",
774
- strokeLinejoin: "round",
775
- strokeWidth: "32"
776
- }), /*#__PURE__*/React.createElement("path", {
777
- fill: "none",
778
- stroke: "currentColor",
779
- strokeLinecap: "round",
780
- strokeLinejoin: "round",
781
- strokeWidth: "32",
782
- d: "M224 144h192M288 224h128"
783
- })),
784
- settings: /*#__PURE__*/React.createElement("svg", {
785
- xmlns: "http://www.w3.org/2000/svg",
786
- className: "ionicon",
787
- viewBox: "0 0 512 512"
788
- }, /*#__PURE__*/React.createElement("title", null, "Settings"), /*#__PURE__*/React.createElement("path", {
789
- 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",
790
- fill: "none",
791
- stroke: "currentColor",
792
- strokeLinecap: "round",
793
- strokeLinejoin: "round",
794
- strokeWidth: "32"
795
- })),
796
- trash: /*#__PURE__*/React.createElement("svg", {
797
- xmlns: "http://www.w3.org/2000/svg",
798
- className: "ionicon",
799
- viewBox: "0 0 512 512"
800
- }, /*#__PURE__*/React.createElement("title", null, "Trash"), /*#__PURE__*/React.createElement("path", {
801
- d: "M112 112l20 320c.95 18.49 14.4 32 32 32h184c17.67 0 30.87-13.51 32-32l20-320",
802
- fill: "none",
803
- stroke: "currentColor",
804
- strokeLinecap: "round",
805
- strokeLinejoin: "round",
806
- strokeWidth: "32"
807
- }), /*#__PURE__*/React.createElement("path", {
808
- stroke: "currentColor",
809
- strokeLinecap: "round",
810
- strokeMiterlimit: "10",
811
- strokeWidth: "32",
812
- d: "M80 112h352"
813
- }), /*#__PURE__*/React.createElement("path", {
814
- d: "M192 112V72h0a23.93 23.93 0 0124-24h80a23.93 23.93 0 0124 24h0v40M256 176v224M184 176l8 224M328 176l-8 224",
815
- fill: "none",
816
- stroke: "currentColor",
817
- strokeLinecap: "round",
818
- strokeLinejoin: "round",
819
- strokeWidth: "32"
820
- }))
821
- };
822
- function GoAIcon(_ref) {
823
- var type = _ref.type,
824
- _ref$size = _ref.size,
825
- size = _ref$size === void 0 ? 'small' : _ref$size;
826
- var pxSize = getSize(size);
827
- var styles = {
828
- width: "".concat(pxSize, "px")
829
- };
830
- return /*#__PURE__*/React.createElement("div", {
831
- className: "goa-icon",
832
- style: styles,
833
- "data-testid": "icon-".concat(type)
834
- }, Icons[type]);
835
- }
836
-
837
- function getSize(size) {
838
- switch (size) {
839
- case 'small':
840
- return 20;
841
-
842
- case 'medium':
843
- return 32;
844
-
845
- case 'large':
846
- return 48;
847
- }
848
- }
849
-
850
364
  function GoAIconButton(_ref) {
851
365
  var type = _ref.type,
852
366
  _ref$variant = _ref.variant,
@@ -867,7 +381,7 @@ function GoAIconButton(_ref) {
867
381
  }));
868
382
  }
869
383
 
870
- 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";
384
+ 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";
871
385
  styleInject(css_248z$6);
872
386
 
873
387
  var GoAInput = function GoAInput(_ref) {
@@ -889,8 +403,73 @@ var GoAInput = function GoAInput(_ref) {
889
403
  }
890
404
  })));
891
405
  };
406
+ var GoAInputText = function GoAInputText(props) {
407
+ return /*#__PURE__*/React.createElement(GoAInput, Object.assign({}, props, {
408
+ type: "text"
409
+ }));
410
+ };
411
+ var GoAInputPassword = function GoAInputPassword(props) {
412
+ return /*#__PURE__*/React.createElement(GoAInput, Object.assign({}, props, {
413
+ type: "password"
414
+ }));
415
+ };
416
+ var GoAInputDate = function GoAInputDate(props) {
417
+ return /*#__PURE__*/React.createElement(GoAInput, Object.assign({}, props, {
418
+ type: "date"
419
+ }));
420
+ };
421
+ var GoAInputTime = function GoAInputTime(props) {
422
+ return /*#__PURE__*/React.createElement(GoAInput, Object.assign({}, props, {
423
+ type: "time"
424
+ }));
425
+ };
426
+ var GoAInputDateTime = function GoAInputDateTime(props) {
427
+ return /*#__PURE__*/React.createElement(GoAInput, Object.assign({}, props, {
428
+ type: "datetime-local"
429
+ }));
430
+ };
431
+ var GoAInputEmail = function GoAInputEmail(props) {
432
+ return /*#__PURE__*/React.createElement(GoAInput, Object.assign({}, props, {
433
+ type: "email"
434
+ }));
435
+ };
436
+ var GoAInputSearch = function GoAInputSearch(props) {
437
+ return /*#__PURE__*/React.createElement(GoAInput, Object.assign({}, props, {
438
+ type: "search"
439
+ }));
440
+ };
441
+ var GoAInputUrl = function GoAInputUrl(props) {
442
+ return /*#__PURE__*/React.createElement(GoAInput, Object.assign({}, props, {
443
+ type: "url"
444
+ }));
445
+ };
446
+ var GoAInputTel = function GoAInputTel(props) {
447
+ return /*#__PURE__*/React.createElement(GoAInput, Object.assign({}, props, {
448
+ type: "tel"
449
+ }));
450
+ };
451
+ var GoAInputFile = function GoAInputFile(props) {
452
+ return /*#__PURE__*/React.createElement(GoAInput, Object.assign({}, props, {
453
+ type: "file"
454
+ }));
455
+ };
456
+ var GoAInputMonth = function GoAInputMonth(props) {
457
+ return /*#__PURE__*/React.createElement(GoAInput, Object.assign({}, props, {
458
+ type: "month"
459
+ }));
460
+ };
461
+ var GoAInputNumber = function GoAInputNumber(props) {
462
+ return /*#__PURE__*/React.createElement(GoAInput, Object.assign({}, props, {
463
+ type: "number"
464
+ }));
465
+ };
466
+ var GoAInputRange = function GoAInputRange(props) {
467
+ return /*#__PURE__*/React.createElement(GoAInput, Object.assign({}, props, {
468
+ type: "range"
469
+ }));
470
+ };
892
471
 
893
- 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";
472
+ 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";
894
473
  styleInject(css_248z$7);
895
474
 
896
475
  var GoAScrollable = function GoAScrollable(_ref) {
@@ -908,11 +487,10 @@ var GoAScrollable = function GoAScrollable(_ref) {
908
487
  padding: "".concat(vPadding !== null && vPadding !== void 0 ? vPadding : 0, "rem ").concat(hPadding !== null && hPadding !== void 0 ? hPadding : 0, "rem")
909
488
  };
910
489
  return /*#__PURE__*/React.createElement("div", {
911
- className: "goa-scrollable"
912
- }, /*#__PURE__*/React.createElement("div", {
490
+ className: "goa-scrollable",
913
491
  style: style,
914
492
  "data-testid": testId
915
- }, children));
493
+ }, children);
916
494
  };
917
495
 
918
496
  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";
@@ -1078,23 +656,23 @@ var GoAModalActions = function GoAModalActions(_ref2) {
1078
656
  // ***************
1079
657
 
1080
658
  var GoAModalContent = function GoAModalContent(_ref3) {
1081
- var scrollable = _ref3.scrollable,
659
+ var disableScroll = _ref3.disableScroll,
1082
660
  children = _ref3.children,
1083
661
  testId = _ref3.testId;
1084
662
 
1085
- if (scrollable) {
1086
- return /*#__PURE__*/React.createElement(GoAScrollable, {
1087
- testId: testId,
1088
- vertical: true,
1089
- hPadding: 1.75
663
+ if (disableScroll) {
664
+ return /*#__PURE__*/React.createElement("div", {
665
+ "data-testid": testId,
666
+ style: {
667
+ padding: "0 1.75rem"
668
+ }
1090
669
  }, children);
1091
670
  }
1092
671
 
1093
- return /*#__PURE__*/React.createElement("div", {
1094
- "data-testid": testId,
1095
- style: {
1096
- padding: "0 1.75rem"
1097
- }
672
+ return /*#__PURE__*/React.createElement(GoAScrollable, {
673
+ testId: testId,
674
+ vertical: true,
675
+ hPadding: 1.75
1098
676
  }, children);
1099
677
  }; // *************
1100
678
  // GoAModalTitle
@@ -1173,7 +751,7 @@ function calculateScrollbarWidth() {
1173
751
  return scrollbarWidth;
1174
752
  }
1175
753
 
1176
- 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";
754
+ 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";
1177
755
  styleInject(css_248z$a);
1178
756
 
1179
757
  var GoATextArea = function GoATextArea(_ref) {
@@ -1194,4 +772,4 @@ var GoATextArea = function GoATextArea(_ref) {
1194
772
  });
1195
773
  };
1196
774
 
1197
- export { GoAAppVersionHeader, GoABadge, GoACard, GoAFlexRow, GoAForm, GoAFormActions, GoAFormItem, GoAIcon, GoAIconButton, GoAInput, GoAModal, GoAModalActions, GoAModalContent, GoAModalTitle, GoAScrollable, GoATextArea, GoATransition, GoATransitionSequence };
775
+ export { GoAAppVersionHeader, GoABadge, GoACard, GoAFlexRow, GoAForm, GoAFormActions, GoAFormItem, GoAIcon, GoAIconButton, GoAInput, GoAInputDate, GoAInputDateTime, GoAInputEmail, GoAInputFile, GoAInputMonth, GoAInputNumber, GoAInputPassword, GoAInputRange, GoAInputSearch, GoAInputTel, GoAInputText, GoAInputTime, GoAInputUrl, GoAModal, GoAModalActions, GoAModalContent, GoAModalTitle, GoAScrollable, GoATextArea, GoATransition, GoATransitionSequence };