@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.
- package/README.md +7 -102
- package/experimental/experimental/icons/icon.component.d.ts +5 -4
- package/experimental/experimental/index.d.ts +2 -2
- package/experimental/experimental/input/input.component.d.ts +30 -3
- package/experimental/experimental/modal/modal.component.d.ts +1 -1
- package/experimental/react-components.esm.js +131 -553
- package/experimental/react-components.umd.js +143 -552
- package/lib/element-loader/element-loader.d.ts +1 -10
- package/package.json +1 -1
- package/react-components.esm.js +36 -531
- package/react-components.umd.js +36 -531
package/react-components.esm.js
CHANGED
|
@@ -28,7 +28,7 @@ function styleInject(css, ref) {
|
|
|
28
28
|
}
|
|
29
29
|
}
|
|
30
30
|
|
|
31
|
-
var css_248z = ":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\nbody,\ninput,\nbutton,\ntextarea {\n background: #fff;\n font-family: acumin-pro-semi-condensed, sans-serif;\n font-weight: 400;\n font-size: var(--fs-base);\n color: #333; }\n\nbody {\n margin: 0; }\n\n*,\n*:before,\n*:after {\n box-sizing: border-box; }\n\np {\n margin: 0;\n margin-bottom: 1rem; }\n\nhr {\n border-width: 0;\n border-top: 1px solid #ccc;\n padding: 0;\n margin: 0; }\n\nul,\nol {\n padding-left: 0;\n padding-left: 1rem; }\n\nli > ul,\nli > ol,\nli > ul,\nli > ol {\n padding-left: 0;\n margin-top: 0; }\n\ndl {\n margin-top: 0; }\n\ndd {\n margin-left: 0.5rem; }\n\na {\n color: var(--color-primary);\n cursor: pointer; }\n\na:hover {\n color: var(--color-primary--hover); }\n\na:focus {\n outline-width: thin;\n outline-style: solid;\n outline-color: var(--color-primary-d1);\n outline-offset: 0px; }\n\n::-moz-placeholder {\n /* Chrome, Firefox, Opera, Safari 10.1+ */\n color: #999;\n opacity: 1;\n /* Firefox */ }\n\n:-ms-input-placeholder {\n /* Chrome, Firefox, Opera, Safari 10.1+ */\n color: #999;\n opacity: 1;\n /* Firefox */ }\n\n::placeholder {\n /* Chrome, Firefox, Opera, Safari 10.1+ */\n color: #999;\n opacity: 1;\n /* Firefox */ }\n\n:-ms-input-placeholder {\n /* Internet Explorer 10-11 */\n color: #999; }\n\n::-ms-input-placeholder {\n /* Microsoft Edge */\n color: #999; }\n";
|
|
31
|
+
var css_248z = ":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\nbody,\ninput,\nbutton,\ntextarea {\n background: #fff;\n font-family: acumin-pro-semi-condensed, sans-serif;\n font-weight: 400;\n font-size: var(--fs-base);\n color: #333; }\n\nbody {\n margin: 0; }\n\n*,\n*:before,\n*:after {\n box-sizing: border-box; }\n\np {\n margin: 0;\n margin-bottom: 1rem; }\n\nhr {\n border-width: 0;\n border-top: 1px solid #ccc;\n padding: 0;\n margin: 0; }\n\nul,\nol {\n padding-left: 0;\n padding-left: 1rem; }\n\nli > ul,\nli > ol,\nli > ul,\nli > ol {\n padding-left: 0;\n margin-top: 0; }\n\ndl {\n margin-top: 0; }\n\ndd {\n margin-left: 0.5rem; }\n\na {\n color: var(--color-primary);\n cursor: pointer; }\n\na:hover {\n color: var(--color-primary--hover); }\n\na:focus {\n outline-width: thin;\n outline-style: solid;\n outline-color: var(--color-primary-d1);\n outline-offset: 0px; }\n\n::-moz-placeholder {\n /* Chrome, Firefox, Opera, Safari 10.1+ */\n color: #999;\n opacity: 1;\n /* Firefox */ }\n\n:-ms-input-placeholder {\n /* Chrome, Firefox, Opera, Safari 10.1+ */\n color: #999;\n opacity: 1;\n /* Firefox */ }\n\n::placeholder {\n /* Chrome, Firefox, Opera, Safari 10.1+ */\n color: #999;\n opacity: 1;\n /* Firefox */ }\n\n:-ms-input-placeholder {\n /* Internet Explorer 10-11 */\n color: #999; }\n\n::-ms-input-placeholder {\n /* Microsoft Edge */\n color: #999; }\n";
|
|
32
32
|
styleInject(css_248z);
|
|
33
33
|
|
|
34
34
|
var css_248z$1 = "/* typekit ***/\n/* This style is from the alberta design system */\n@import url(\"https://p.typekit.net/p.css?s=1&k=nur5yta&ht=tk&f=26036.26037.26044.26046.26047&a=14638192&app=typekit&e=css\");\n@font-face {\n font-family: 'acumin-pro-semi-condensed';\n src: url(\"https://use.typekit.net/af/3f7b4d/00000000000000003b9acb2d/27/l?subset_id=1&fvd=n4&v=3\") format(\"woff2\"), url(\"https://use.typekit.net/af/3f7b4d/00000000000000003b9acb2d/27/d?subset_id=1&fvd=n4&v=3\") format(\"woff\"), url(\"https://use.typekit.net/af/3f7b4d/00000000000000003b9acb2d/27/a?subset_id=1&fvd=n4&v=3\") format(\"opentype\");\n font-style: normal;\n font-weight: 400; }\n\n@font-face {\n font-family: 'acumin-pro-semi-condensed';\n src: url(\"https://use.typekit.net/af/761912/00000000000000003b9acb2e/27/l?subset_id=1&fvd=i4&v=3\") format(\"woff2\"), url(\"https://use.typekit.net/af/761912/00000000000000003b9acb2e/27/d?subset_id=1&fvd=i4&v=3\") format(\"woff\"), url(\"https://use.typekit.net/af/761912/00000000000000003b9acb2e/27/a?subset_id=1&fvd=i4&v=3\") format(\"opentype\");\n font-style: italic;\n font-weight: 400; }\n\n@font-face {\n font-family: 'acumin-pro-semi-condensed';\n src: url(\"https://use.typekit.net/af/ee7f3d/00000000000000003b9acb33/27/l?subset_id=1&fvd=n7&v=3\") format(\"woff2\"), url(\"https://use.typekit.net/af/ee7f3d/00000000000000003b9acb33/27/d?subset_id=1&fvd=n7&v=3\") format(\"woff\"), url(\"https://use.typekit.net/af/ee7f3d/00000000000000003b9acb33/27/a?subset_id=1&fvd=n7&v=3\") format(\"opentype\");\n font-style: normal;\n font-weight: 700; }\n\n@font-face {\n font-family: 'acumin-pro-semi-condensed';\n src: url(\"https://use.typekit.net/af/503f80/00000000000000003b9acb34/27/l?subset_id=1&fvd=i7&v=3\") format(\"woff2\"), url(\"https://use.typekit.net/af/503f80/00000000000000003b9acb34/27/d?subset_id=1&fvd=i7&v=3\") format(\"woff\"), url(\"https://use.typekit.net/af/503f80/00000000000000003b9acb34/27/a?subset_id=1&fvd=i7&v=3\") format(\"opentype\");\n font-style: italic;\n font-weight: 700; }\n\n@font-face {\n font-family: 'acumin-pro-semi-condensed';\n src: url(\"https://use.typekit.net/af/e60e87/00000000000000003b9acb31/27/l?subset_id=1&fvd=n6&v=3\") format(\"woff2\"), url(\"https://use.typekit.net/af/e60e87/00000000000000003b9acb31/27/d?subset_id=1&fvd=n6&v=3\") format(\"woff\"), url(\"https://use.typekit.net/af/e60e87/00000000000000003b9acb31/27/a?subset_id=1&fvd=n6&v=3\") format(\"opentype\");\n font-style: normal;\n font-weight: 600; }\n";
|
|
@@ -1534,549 +1534,61 @@ GoAHeroBanner.defaultProps = {
|
|
|
1534
1534
|
var css_248z$b = "/* Palette */\n/* Semantic usages */\n.goa-badge-icon {\n font-size: 14px;\n padding: 4px 4px 4px 8px; }\n\n.badge-module_goa-badge__3F6Ve {\n display: inline-flex;\n align-items: center;\n border-radius: 4px;\n padding: 0 0.5rem;\n gap: 4px; }\n\n.badge-module_goa-badge-content__3UN-3 {\n font-size: 14px;\n font-weight: 400; }\n\n.badge-module_goa-badge__3F6Ve.badge-module_badge-information__2r_Eq {\n background-color: #f1f1f1;\n color: #005DAA; }\n\n.badge-module_goa-badge__3F6Ve.badge-module_badge-success__18wcm {\n background-color: #00853f;\n color: #fff; }\n\n.badge-module_goa-badge__3F6Ve.badge-module_badge-warning__20BNM {\n background-color: #feba35;\n color: #333; }\n\n.badge-module_goa-badge__3F6Ve.badge-module_badge-emergency__E4mHn {\n background-color: #ec040b;\n color: #fff; }\n\n.badge-module_goa-badge__3F6Ve.badge-module_badge-dark__1thw- {\n background-color: #333;\n color: #fff; }\n\n.badge-module_goa-badge__3F6Ve.badge-module_badge-midtone__1Gt4T {\n background-color: #767676;\n color: #fff; }\n\n.badge-module_goa-badge__3F6Ve.badge-module_badge-light__B8ZMt {\n background-color: #fff;\n color: #333; }\n\n.badge-module_goa-badge__3F6Ve.badge-module_badge-inactive__35PEw {\n background-color: #fff;\n color: #333; }\n";
|
|
1535
1535
|
styleInject(css_248z$b);
|
|
1536
1536
|
|
|
1537
|
-
var css_248z$c = "/* 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:
|
|
1537
|
+
var css_248z$c = "/* 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";
|
|
1538
1538
|
styleInject(css_248z$c);
|
|
1539
1539
|
|
|
1540
|
-
var css_248z$d = "
|
|
1540
|
+
var css_248z$d = ".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";
|
|
1541
1541
|
styleInject(css_248z$d);
|
|
1542
1542
|
|
|
1543
|
-
var css_248z$e = ".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";
|
|
1544
|
-
styleInject(css_248z$e);
|
|
1545
|
-
|
|
1546
|
-
var css_248z$f = ":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";
|
|
1547
|
-
styleInject(css_248z$f);
|
|
1548
|
-
|
|
1549
|
-
var css_248z$g = ".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";
|
|
1550
|
-
styleInject(css_248z$g);
|
|
1551
|
-
|
|
1552
|
-
var Icons = {
|
|
1553
|
-
barChart: /*#__PURE__*/React.createElement("svg", {
|
|
1554
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
1555
|
-
className: "ionicon",
|
|
1556
|
-
viewBox: "0 0 512 512"
|
|
1557
|
-
}, /*#__PURE__*/React.createElement("title", null, "Bar Chart"), /*#__PURE__*/React.createElement("path", {
|
|
1558
|
-
d: "M32 32v432a16 16 0 0016 16h432",
|
|
1559
|
-
fill: "none",
|
|
1560
|
-
stroke: "currentColor",
|
|
1561
|
-
strokeLinecap: "round",
|
|
1562
|
-
strokeLinejoin: "round",
|
|
1563
|
-
strokeWidth: "32"
|
|
1564
|
-
}), /*#__PURE__*/React.createElement("rect", {
|
|
1565
|
-
x: "96",
|
|
1566
|
-
y: "224",
|
|
1567
|
-
width: "80",
|
|
1568
|
-
height: "192",
|
|
1569
|
-
rx: "20",
|
|
1570
|
-
ry: "20",
|
|
1571
|
-
fill: "none",
|
|
1572
|
-
stroke: "currentColor",
|
|
1573
|
-
strokeLinecap: "round",
|
|
1574
|
-
strokeLinejoin: "round",
|
|
1575
|
-
strokeWidth: "32"
|
|
1576
|
-
}), /*#__PURE__*/React.createElement("rect", {
|
|
1577
|
-
x: "240",
|
|
1578
|
-
y: "176",
|
|
1579
|
-
width: "80",
|
|
1580
|
-
height: "240",
|
|
1581
|
-
rx: "20",
|
|
1582
|
-
ry: "20",
|
|
1583
|
-
fill: "none",
|
|
1584
|
-
stroke: "currentColor",
|
|
1585
|
-
strokeLinecap: "round",
|
|
1586
|
-
strokeLinejoin: "round",
|
|
1587
|
-
strokeWidth: "32"
|
|
1588
|
-
}), /*#__PURE__*/React.createElement("rect", {
|
|
1589
|
-
x: "383.64",
|
|
1590
|
-
y: "112",
|
|
1591
|
-
width: "80",
|
|
1592
|
-
height: "304",
|
|
1593
|
-
rx: "20",
|
|
1594
|
-
ry: "20",
|
|
1595
|
-
fill: "none",
|
|
1596
|
-
stroke: "currentColor",
|
|
1597
|
-
strokeLinecap: "round",
|
|
1598
|
-
strokeLinejoin: "round",
|
|
1599
|
-
strokeWidth: "32"
|
|
1600
|
-
})),
|
|
1601
|
-
build: /*#__PURE__*/React.createElement("svg", {
|
|
1602
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
1603
|
-
className: "ionicon",
|
|
1604
|
-
viewBox: "0 0 512 512"
|
|
1605
|
-
}, /*#__PURE__*/React.createElement("title", null, "Build"), /*#__PURE__*/React.createElement("path", {
|
|
1606
|
-
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",
|
|
1607
|
-
fill: "none",
|
|
1608
|
-
stroke: "currentColor",
|
|
1609
|
-
strokeLinecap: "round",
|
|
1610
|
-
strokeMiterlimit: "10",
|
|
1611
|
-
strokeWidth: "32"
|
|
1612
|
-
}), /*#__PURE__*/React.createElement("circle", {
|
|
1613
|
-
cx: "96",
|
|
1614
|
-
cy: "416",
|
|
1615
|
-
r: "16"
|
|
1616
|
-
})),
|
|
1617
|
-
checkmarkCircle: /*#__PURE__*/React.createElement("svg", {
|
|
1618
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
1619
|
-
className: "ionicon",
|
|
1620
|
-
viewBox: "0 0 512 512"
|
|
1621
|
-
}, /*#__PURE__*/React.createElement("title", null, "Checkmark Circle"), /*#__PURE__*/React.createElement("path", {
|
|
1622
|
-
d: "M448 256c0-106-86-192-192-192S64 150 64 256s86 192 192 192 192-86 192-192z",
|
|
1623
|
-
fill: "none",
|
|
1624
|
-
stroke: "currentColor",
|
|
1625
|
-
strokeMiterlimit: "10",
|
|
1626
|
-
strokeWidth: "32"
|
|
1627
|
-
}), /*#__PURE__*/React.createElement("path", {
|
|
1628
|
-
fill: "none",
|
|
1629
|
-
stroke: "currentColor",
|
|
1630
|
-
strokeLinecap: "round",
|
|
1631
|
-
strokeLinejoin: "round",
|
|
1632
|
-
strokeWidth: "32",
|
|
1633
|
-
d: "M352 176L217.6 336 160 272"
|
|
1634
|
-
})),
|
|
1635
|
-
chevronDown: /*#__PURE__*/React.createElement("svg", {
|
|
1636
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
1637
|
-
className: "ionicon",
|
|
1638
|
-
viewBox: "0 0 512 512"
|
|
1639
|
-
}, /*#__PURE__*/React.createElement("title", null, "Chevron Down"), /*#__PURE__*/React.createElement("path", {
|
|
1640
|
-
fill: "none",
|
|
1641
|
-
stroke: "currentColor",
|
|
1642
|
-
strokeLinecap: "round",
|
|
1643
|
-
strokeLinejoin: "round",
|
|
1644
|
-
strokeWidth: "48",
|
|
1645
|
-
d: "M112 184l144 144 144-144"
|
|
1646
|
-
})),
|
|
1647
|
-
close: /*#__PURE__*/React.createElement("svg", {
|
|
1648
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
1649
|
-
className: "ionicon",
|
|
1650
|
-
viewBox: "0 0 512 512"
|
|
1651
|
-
}, /*#__PURE__*/React.createElement("title", null, "Close"), /*#__PURE__*/React.createElement("path", {
|
|
1652
|
-
fill: "none",
|
|
1653
|
-
stroke: "currentColor",
|
|
1654
|
-
strokeLinecap: "round",
|
|
1655
|
-
strokeLinejoin: "round",
|
|
1656
|
-
strokeWidth: "32",
|
|
1657
|
-
d: "M368 368L144 144M368 144L144 368"
|
|
1658
|
-
})),
|
|
1659
|
-
closeCircle: /*#__PURE__*/React.createElement("svg", {
|
|
1660
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
1661
|
-
className: "ionicon",
|
|
1662
|
-
viewBox: "0 0 512 512"
|
|
1663
|
-
}, /*#__PURE__*/React.createElement("title", null, "Close Circle"), /*#__PURE__*/React.createElement("path", {
|
|
1664
|
-
d: "M448 256c0-106-86-192-192-192S64 150 64 256s86 192 192 192 192-86 192-192z",
|
|
1665
|
-
fill: "none",
|
|
1666
|
-
stroke: "currentColor",
|
|
1667
|
-
strokeMiterlimit: "10",
|
|
1668
|
-
strokeWidth: "32"
|
|
1669
|
-
}), /*#__PURE__*/React.createElement("path", {
|
|
1670
|
-
fill: "none",
|
|
1671
|
-
stroke: "currentColor",
|
|
1672
|
-
strokeLinecap: "round",
|
|
1673
|
-
strokeLinejoin: "round",
|
|
1674
|
-
strokeWidth: "32",
|
|
1675
|
-
d: "M320 320L192 192M192 320l128-128"
|
|
1676
|
-
})),
|
|
1677
|
-
create: /*#__PURE__*/React.createElement("svg", {
|
|
1678
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
1679
|
-
className: "ionicon",
|
|
1680
|
-
viewBox: "0 0 512 512"
|
|
1681
|
-
}, /*#__PURE__*/React.createElement("title", null, "Create"), /*#__PURE__*/React.createElement("path", {
|
|
1682
|
-
d: "M384 224v184a40 40 0 01-40 40H104a40 40 0 01-40-40V168a40 40 0 0140-40h167.48",
|
|
1683
|
-
fill: "none",
|
|
1684
|
-
stroke: "currentColor",
|
|
1685
|
-
strokeLinecap: "round",
|
|
1686
|
-
strokeLinejoin: "round",
|
|
1687
|
-
strokeWidth: "32"
|
|
1688
|
-
}), /*#__PURE__*/React.createElement("path", {
|
|
1689
|
-
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"
|
|
1690
|
-
})),
|
|
1691
|
-
download: /*#__PURE__*/React.createElement("svg", {
|
|
1692
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
1693
|
-
className: "ionicon",
|
|
1694
|
-
viewBox: "0 0 512 512"
|
|
1695
|
-
}, /*#__PURE__*/React.createElement("title", null, "Download"), /*#__PURE__*/React.createElement("path", {
|
|
1696
|
-
d: "M336 176h40a40 40 0 0140 40v208a40 40 0 01-40 40H136a40 40 0 01-40-40V216a40 40 0 0140-40h40",
|
|
1697
|
-
fill: "none",
|
|
1698
|
-
stroke: "currentColor",
|
|
1699
|
-
strokeLinecap: "round",
|
|
1700
|
-
strokeLinejoin: "round",
|
|
1701
|
-
strokeWidth: "32"
|
|
1702
|
-
}), /*#__PURE__*/React.createElement("path", {
|
|
1703
|
-
fill: "none",
|
|
1704
|
-
stroke: "currentColor",
|
|
1705
|
-
strokeLinecap: "round",
|
|
1706
|
-
strokeLinejoin: "round",
|
|
1707
|
-
strokeWidth: "32",
|
|
1708
|
-
d: "M176 272l80 80 80-80M256 48v288"
|
|
1709
|
-
})),
|
|
1710
|
-
pencil: /*#__PURE__*/React.createElement("svg", {
|
|
1711
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
1712
|
-
className: "ionicon",
|
|
1713
|
-
viewBox: "0 0 512 512"
|
|
1714
|
-
}, /*#__PURE__*/React.createElement("title", null, "Pencil"), /*#__PURE__*/React.createElement("path", {
|
|
1715
|
-
fill: "none",
|
|
1716
|
-
stroke: "currentColor",
|
|
1717
|
-
strokeLinecap: "round",
|
|
1718
|
-
strokeLinejoin: "round",
|
|
1719
|
-
strokeWidth: "32",
|
|
1720
|
-
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"
|
|
1721
|
-
})),
|
|
1722
|
-
eye: /*#__PURE__*/React.createElement("svg", {
|
|
1723
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
1724
|
-
className: "ionicon",
|
|
1725
|
-
viewBox: "0 0 512 512"
|
|
1726
|
-
}, /*#__PURE__*/React.createElement("title", null, "Eye"), /*#__PURE__*/React.createElement("path", {
|
|
1727
|
-
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",
|
|
1728
|
-
fill: "none",
|
|
1729
|
-
stroke: "currentColor",
|
|
1730
|
-
strokeLinecap: "round",
|
|
1731
|
-
strokeLinejoin: "round",
|
|
1732
|
-
strokeWidth: "32"
|
|
1733
|
-
}), /*#__PURE__*/React.createElement("circle", {
|
|
1734
|
-
cx: "256",
|
|
1735
|
-
cy: "256",
|
|
1736
|
-
r: "80",
|
|
1737
|
-
fill: "none",
|
|
1738
|
-
stroke: "currentColor",
|
|
1739
|
-
strokeMiterlimit: "10",
|
|
1740
|
-
strokeWidth: "32"
|
|
1741
|
-
})),
|
|
1742
|
-
eyeOff: /*#__PURE__*/React.createElement("svg", {
|
|
1743
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
1744
|
-
className: "ionicon",
|
|
1745
|
-
viewBox: "0 0 512 512"
|
|
1746
|
-
}, /*#__PURE__*/React.createElement("title", null, "Eye Off"), /*#__PURE__*/React.createElement("path", {
|
|
1747
|
-
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"
|
|
1748
|
-
}), /*#__PURE__*/React.createElement("path", {
|
|
1749
|
-
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"
|
|
1750
|
-
})),
|
|
1751
|
-
file: /*#__PURE__*/React.createElement("svg", {
|
|
1752
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
1753
|
-
className: "ionicon",
|
|
1754
|
-
viewBox: "0 0 512 512"
|
|
1755
|
-
}, /*#__PURE__*/React.createElement("title", null, "Document"), /*#__PURE__*/React.createElement("path", {
|
|
1756
|
-
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",
|
|
1757
|
-
fill: "none",
|
|
1758
|
-
stroke: "currentColor",
|
|
1759
|
-
strokeLinejoin: "round",
|
|
1760
|
-
strokeWidth: "32"
|
|
1761
|
-
}), /*#__PURE__*/React.createElement("path", {
|
|
1762
|
-
d: "M256 56v120a32 32 0 0032 32h120",
|
|
1763
|
-
fill: "none",
|
|
1764
|
-
stroke: "currentColor",
|
|
1765
|
-
strokeLinecap: "round",
|
|
1766
|
-
strokeLinejoin: "round",
|
|
1767
|
-
strokeWidth: "32"
|
|
1768
|
-
})),
|
|
1769
|
-
fitness: /*#__PURE__*/React.createElement("svg", {
|
|
1770
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
1771
|
-
className: "ionicon",
|
|
1772
|
-
viewBox: "0 0 512 512"
|
|
1773
|
-
}, /*#__PURE__*/React.createElement("title", null, "Fitness"), /*#__PURE__*/React.createElement("path", {
|
|
1774
|
-
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",
|
|
1775
|
-
fill: "none",
|
|
1776
|
-
stroke: "currentColor",
|
|
1777
|
-
strokeLinecap: "round",
|
|
1778
|
-
strokeLinejoin: "round",
|
|
1779
|
-
strokeWidth: "32"
|
|
1780
|
-
}), /*#__PURE__*/React.createElement("path", {
|
|
1781
|
-
fill: "none",
|
|
1782
|
-
stroke: "currentColor",
|
|
1783
|
-
strokeLinecap: "round",
|
|
1784
|
-
strokeLinejoin: "round",
|
|
1785
|
-
strokeWidth: "32",
|
|
1786
|
-
d: "M48 256h112l48-96 48 160 48-96 32 64h128"
|
|
1787
|
-
})),
|
|
1788
|
-
helpCircle: /*#__PURE__*/React.createElement("svg", {
|
|
1789
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
1790
|
-
className: "ionicon",
|
|
1791
|
-
viewBox: "0 0 512 512"
|
|
1792
|
-
}, /*#__PURE__*/React.createElement("title", null, "Help Circle"), /*#__PURE__*/React.createElement("path", {
|
|
1793
|
-
d: "M256 80a176 176 0 10176 176A176 176 0 00256 80z",
|
|
1794
|
-
fill: "none",
|
|
1795
|
-
stroke: "currentColor",
|
|
1796
|
-
strokeMiterlimit: "10",
|
|
1797
|
-
strokeWidth: "32"
|
|
1798
|
-
}), /*#__PURE__*/React.createElement("path", {
|
|
1799
|
-
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",
|
|
1800
|
-
fill: "none",
|
|
1801
|
-
stroke: "currentColor",
|
|
1802
|
-
strokeLinecap: "round",
|
|
1803
|
-
strokeMiterlimit: "10",
|
|
1804
|
-
strokeWidth: "28"
|
|
1805
|
-
}), /*#__PURE__*/React.createElement("circle", {
|
|
1806
|
-
cx: "250",
|
|
1807
|
-
cy: "348",
|
|
1808
|
-
r: "20"
|
|
1809
|
-
})),
|
|
1810
|
-
home: /*#__PURE__*/React.createElement("svg", {
|
|
1811
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
1812
|
-
className: "ionicon",
|
|
1813
|
-
viewBox: "0 0 512 512"
|
|
1814
|
-
}, /*#__PURE__*/React.createElement("title", null, "Home"), /*#__PURE__*/React.createElement("path", {
|
|
1815
|
-
d: "M80 212v236a16 16 0 0016 16h96V328a24 24 0 0124-24h80a24 24 0 0124 24v136h96a16 16 0 0016-16V212",
|
|
1816
|
-
fill: "none",
|
|
1817
|
-
stroke: "currentColor",
|
|
1818
|
-
strokeLinecap: "round",
|
|
1819
|
-
strokeLinejoin: "round",
|
|
1820
|
-
strokeWidth: "32"
|
|
1821
|
-
}), /*#__PURE__*/React.createElement("path", {
|
|
1822
|
-
d: "M480 256L266.89 52c-5-5.28-16.69-5.34-21.78 0L32 256M400 179V64h-48v69",
|
|
1823
|
-
fill: "none",
|
|
1824
|
-
stroke: "currentColor",
|
|
1825
|
-
strokeLinecap: "round",
|
|
1826
|
-
strokeLinejoin: "round",
|
|
1827
|
-
strokeWidth: "32"
|
|
1828
|
-
})),
|
|
1829
|
-
hourGlass: /*#__PURE__*/React.createElement("svg", {
|
|
1830
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
1831
|
-
className: "ionicon",
|
|
1832
|
-
viewBox: "0 0 512 512"
|
|
1833
|
-
}, /*#__PURE__*/React.createElement("title", null, "Hourglass"), /*#__PURE__*/React.createElement("path", {
|
|
1834
|
-
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",
|
|
1835
|
-
fill: "none",
|
|
1836
|
-
stroke: "currentColor",
|
|
1837
|
-
strokeLinecap: "round",
|
|
1838
|
-
strokeLinejoin: "round",
|
|
1839
|
-
strokeWidth: "32"
|
|
1840
|
-
}), /*#__PURE__*/React.createElement("path", {
|
|
1841
|
-
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"
|
|
1842
|
-
})),
|
|
1843
|
-
logout: /*#__PURE__*/React.createElement("svg", {
|
|
1844
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
1845
|
-
className: "ionicon",
|
|
1846
|
-
viewBox: "0 0 512 512"
|
|
1847
|
-
}, /*#__PURE__*/React.createElement("title", null, "Log Out"), /*#__PURE__*/React.createElement("path", {
|
|
1848
|
-
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",
|
|
1849
|
-
fill: "none",
|
|
1850
|
-
stroke: "currentColor",
|
|
1851
|
-
strokeLinecap: "round",
|
|
1852
|
-
strokeLinejoin: "round",
|
|
1853
|
-
strokeWidth: "32"
|
|
1854
|
-
})),
|
|
1855
|
-
megaphone: /*#__PURE__*/React.createElement("svg", {
|
|
1856
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
1857
|
-
className: "ionicon",
|
|
1858
|
-
viewBox: "0 0 512 512"
|
|
1859
|
-
}, /*#__PURE__*/React.createElement("title", null, "Megaphone"), /*#__PURE__*/React.createElement("path", {
|
|
1860
|
-
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",
|
|
1861
|
-
fill: "none",
|
|
1862
|
-
stroke: "currentColor",
|
|
1863
|
-
strokeLinecap: "round",
|
|
1864
|
-
strokeLinejoin: "round",
|
|
1865
|
-
strokeWidth: "32"
|
|
1866
|
-
}), /*#__PURE__*/React.createElement("path", {
|
|
1867
|
-
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",
|
|
1868
|
-
fill: "none",
|
|
1869
|
-
stroke: "currentColor",
|
|
1870
|
-
strokeLinecap: "round",
|
|
1871
|
-
strokeLinejoin: "round",
|
|
1872
|
-
strokeWidth: "32"
|
|
1873
|
-
})),
|
|
1874
|
-
menu: /*#__PURE__*/React.createElement("svg", {
|
|
1875
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
1876
|
-
className: "ionicon",
|
|
1877
|
-
viewBox: "0 0 512 512"
|
|
1878
|
-
}, /*#__PURE__*/React.createElement("title", null, "Menu"), /*#__PURE__*/React.createElement("path", {
|
|
1879
|
-
fill: "none",
|
|
1880
|
-
stroke: "currentColor",
|
|
1881
|
-
strokeLinecap: "round",
|
|
1882
|
-
strokeMiterlimit: "10",
|
|
1883
|
-
strokeWidth: "32",
|
|
1884
|
-
d: "M80 160h352M80 256h352M80 352h352"
|
|
1885
|
-
})),
|
|
1886
|
-
options: /*#__PURE__*/React.createElement("svg", {
|
|
1887
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
1888
|
-
className: "ionicon",
|
|
1889
|
-
viewBox: "0 0 512 512"
|
|
1890
|
-
}, /*#__PURE__*/React.createElement("title", null, "Options"), /*#__PURE__*/React.createElement("path", {
|
|
1891
|
-
fill: "none",
|
|
1892
|
-
stroke: "currentColor",
|
|
1893
|
-
strokeLinecap: "round",
|
|
1894
|
-
strokeLinejoin: "round",
|
|
1895
|
-
strokeWidth: "32",
|
|
1896
|
-
d: "M368 128h80M64 128h240M368 384h80M64 384h240M208 256h240M64 256h80"
|
|
1897
|
-
}), /*#__PURE__*/React.createElement("circle", {
|
|
1898
|
-
cx: "336",
|
|
1899
|
-
cy: "128",
|
|
1900
|
-
r: "32",
|
|
1901
|
-
fill: "none",
|
|
1902
|
-
stroke: "currentColor",
|
|
1903
|
-
strokeLinecap: "round",
|
|
1904
|
-
strokeLinejoin: "round",
|
|
1905
|
-
strokeWidth: "32"
|
|
1906
|
-
}), /*#__PURE__*/React.createElement("circle", {
|
|
1907
|
-
cx: "176",
|
|
1908
|
-
cy: "256",
|
|
1909
|
-
r: "32",
|
|
1910
|
-
fill: "none",
|
|
1911
|
-
stroke: "currentColor",
|
|
1912
|
-
strokeLinecap: "round",
|
|
1913
|
-
strokeLinejoin: "round",
|
|
1914
|
-
strokeWidth: "32"
|
|
1915
|
-
}), /*#__PURE__*/React.createElement("circle", {
|
|
1916
|
-
cx: "336",
|
|
1917
|
-
cy: "384",
|
|
1918
|
-
r: "32",
|
|
1919
|
-
fill: "none",
|
|
1920
|
-
stroke: "currentColor",
|
|
1921
|
-
strokeLinecap: "round",
|
|
1922
|
-
strokeLinejoin: "round",
|
|
1923
|
-
strokeWidth: "32"
|
|
1924
|
-
})),
|
|
1925
|
-
pauseCircle: /*#__PURE__*/React.createElement("svg", {
|
|
1926
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
1927
|
-
className: "ionicon",
|
|
1928
|
-
viewBox: "0 0 512 512"
|
|
1929
|
-
}, /*#__PURE__*/React.createElement("title", null, "Pause Circle"), /*#__PURE__*/React.createElement("path", {
|
|
1930
|
-
d: "M448 256c0-106-86-192-192-192S64 150 64 256s86 192 192 192 192-86 192-192z",
|
|
1931
|
-
fill: "none",
|
|
1932
|
-
stroke: "currentColor",
|
|
1933
|
-
strokeMiterlimit: "10",
|
|
1934
|
-
strokeWidth: "32"
|
|
1935
|
-
}), /*#__PURE__*/React.createElement("path", {
|
|
1936
|
-
fill: "none",
|
|
1937
|
-
stroke: "currentColor",
|
|
1938
|
-
strokeLinecap: "round",
|
|
1939
|
-
strokeMiterlimit: "10",
|
|
1940
|
-
strokeWidth: "32",
|
|
1941
|
-
d: "M208 192v128M304 192v128"
|
|
1942
|
-
})),
|
|
1943
|
-
personCircle: /*#__PURE__*/React.createElement("svg", {
|
|
1944
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
1945
|
-
className: "ionicon",
|
|
1946
|
-
viewBox: "0 0 512 512"
|
|
1947
|
-
}, /*#__PURE__*/React.createElement("title", null, "Person Circle"), /*#__PURE__*/React.createElement("path", {
|
|
1948
|
-
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"
|
|
1949
|
-
}), /*#__PURE__*/React.createElement("path", {
|
|
1950
|
-
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"
|
|
1951
|
-
})),
|
|
1952
|
-
playCircle: /*#__PURE__*/React.createElement("svg", {
|
|
1953
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
1954
|
-
className: "ionicon",
|
|
1955
|
-
viewBox: "0 0 512 512"
|
|
1956
|
-
}, /*#__PURE__*/React.createElement("title", null, "Play Circle"), /*#__PURE__*/React.createElement("path", {
|
|
1957
|
-
d: "M448 256c0-106-86-192-192-192S64 150 64 256s86 192 192 192 192-86 192-192z",
|
|
1958
|
-
fill: "none",
|
|
1959
|
-
stroke: "currentColor",
|
|
1960
|
-
strokeMiterlimit: "10",
|
|
1961
|
-
strokeWidth: "32"
|
|
1962
|
-
}), /*#__PURE__*/React.createElement("path", {
|
|
1963
|
-
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"
|
|
1964
|
-
})),
|
|
1965
|
-
pulse: /*#__PURE__*/React.createElement("svg", {
|
|
1966
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
1967
|
-
className: "ionicon",
|
|
1968
|
-
viewBox: "0 0 512 512"
|
|
1969
|
-
}, /*#__PURE__*/React.createElement("title", null, "Pulse"), /*#__PURE__*/React.createElement("path", {
|
|
1970
|
-
fill: "none",
|
|
1971
|
-
stroke: "currentColor",
|
|
1972
|
-
strokeLinecap: "round",
|
|
1973
|
-
strokeLinejoin: "round",
|
|
1974
|
-
strokeWidth: "32",
|
|
1975
|
-
d: "M48 320h64l64-256 64 384 64-224 32 96h64"
|
|
1976
|
-
}), /*#__PURE__*/React.createElement("circle", {
|
|
1977
|
-
cx: "432",
|
|
1978
|
-
cy: "320",
|
|
1979
|
-
r: "32",
|
|
1980
|
-
fill: "none",
|
|
1981
|
-
stroke: "currentColor",
|
|
1982
|
-
strokeLinecap: "round",
|
|
1983
|
-
strokeLinejoin: "round",
|
|
1984
|
-
strokeWidth: "32"
|
|
1985
|
-
})),
|
|
1986
|
-
receipt: /*#__PURE__*/React.createElement("svg", {
|
|
1987
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
1988
|
-
className: "ionicon",
|
|
1989
|
-
viewBox: "0 0 512 512"
|
|
1990
|
-
}, /*#__PURE__*/React.createElement("title", null, "Receipt"), /*#__PURE__*/React.createElement("path", {
|
|
1991
|
-
fill: "none",
|
|
1992
|
-
stroke: "currentColor",
|
|
1993
|
-
strokeLinejoin: "round",
|
|
1994
|
-
strokeWidth: "32",
|
|
1995
|
-
d: "M160 336V48l32 16 32-16 31.94 16 32.37-16L320 64l31.79-16 31.93 16L416 48l32.01 16L480 48v224"
|
|
1996
|
-
}), /*#__PURE__*/React.createElement("path", {
|
|
1997
|
-
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",
|
|
1998
|
-
fill: "none",
|
|
1999
|
-
stroke: "currentColor",
|
|
2000
|
-
strokeLinejoin: "round",
|
|
2001
|
-
strokeWidth: "32"
|
|
2002
|
-
}), /*#__PURE__*/React.createElement("path", {
|
|
2003
|
-
fill: "none",
|
|
2004
|
-
stroke: "currentColor",
|
|
2005
|
-
strokeLinecap: "round",
|
|
2006
|
-
strokeLinejoin: "round",
|
|
2007
|
-
strokeWidth: "32",
|
|
2008
|
-
d: "M224 144h192M288 224h128"
|
|
2009
|
-
})),
|
|
2010
|
-
settings: /*#__PURE__*/React.createElement("svg", {
|
|
2011
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
2012
|
-
className: "ionicon",
|
|
2013
|
-
viewBox: "0 0 512 512"
|
|
2014
|
-
}, /*#__PURE__*/React.createElement("title", null, "Settings"), /*#__PURE__*/React.createElement("path", {
|
|
2015
|
-
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",
|
|
2016
|
-
fill: "none",
|
|
2017
|
-
stroke: "currentColor",
|
|
2018
|
-
strokeLinecap: "round",
|
|
2019
|
-
strokeLinejoin: "round",
|
|
2020
|
-
strokeWidth: "32"
|
|
2021
|
-
})),
|
|
2022
|
-
trash: /*#__PURE__*/React.createElement("svg", {
|
|
2023
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
2024
|
-
className: "ionicon",
|
|
2025
|
-
viewBox: "0 0 512 512"
|
|
2026
|
-
}, /*#__PURE__*/React.createElement("title", null, "Trash"), /*#__PURE__*/React.createElement("path", {
|
|
2027
|
-
d: "M112 112l20 320c.95 18.49 14.4 32 32 32h184c17.67 0 30.87-13.51 32-32l20-320",
|
|
2028
|
-
fill: "none",
|
|
2029
|
-
stroke: "currentColor",
|
|
2030
|
-
strokeLinecap: "round",
|
|
2031
|
-
strokeLinejoin: "round",
|
|
2032
|
-
strokeWidth: "32"
|
|
2033
|
-
}), /*#__PURE__*/React.createElement("path", {
|
|
2034
|
-
stroke: "currentColor",
|
|
2035
|
-
strokeLinecap: "round",
|
|
2036
|
-
strokeMiterlimit: "10",
|
|
2037
|
-
strokeWidth: "32",
|
|
2038
|
-
d: "M80 112h352"
|
|
2039
|
-
}), /*#__PURE__*/React.createElement("path", {
|
|
2040
|
-
d: "M192 112V72h0a23.93 23.93 0 0124-24h80a23.93 23.93 0 0124 24h0v40M256 176v224M184 176l8 224M328 176l-8 224",
|
|
2041
|
-
fill: "none",
|
|
2042
|
-
stroke: "currentColor",
|
|
2043
|
-
strokeLinecap: "round",
|
|
2044
|
-
strokeLinejoin: "round",
|
|
2045
|
-
strokeWidth: "32"
|
|
2046
|
-
}))
|
|
2047
|
-
};
|
|
2048
1543
|
function GoAIcon(_ref) {
|
|
2049
1544
|
var type = _ref.type,
|
|
1545
|
+
_ref$style = _ref.style,
|
|
1546
|
+
style = _ref$style === void 0 ? 'outline' : _ref$style,
|
|
2050
1547
|
_ref$size = _ref.size,
|
|
2051
1548
|
size = _ref$size === void 0 ? 'small' : _ref$size;
|
|
2052
|
-
|
|
2053
|
-
var
|
|
2054
|
-
|
|
2055
|
-
};
|
|
1549
|
+
|
|
1550
|
+
var _size = getSize(size);
|
|
1551
|
+
|
|
2056
1552
|
return /*#__PURE__*/React.createElement("div", {
|
|
1553
|
+
style: {
|
|
1554
|
+
width: _size
|
|
1555
|
+
},
|
|
2057
1556
|
className: "goa-icon",
|
|
2058
|
-
style: styles,
|
|
2059
1557
|
"data-testid": "icon-".concat(type)
|
|
2060
|
-
},
|
|
1558
|
+
}, /*#__PURE__*/React.createElement("ion-icon", {
|
|
1559
|
+
style: {
|
|
1560
|
+
fontSize: _size
|
|
1561
|
+
},
|
|
1562
|
+
name: style === 'filled' ? type : "".concat(type, "-").concat(style)
|
|
1563
|
+
}));
|
|
2061
1564
|
}
|
|
2062
1565
|
|
|
2063
1566
|
function getSize(size) {
|
|
2064
1567
|
switch (size) {
|
|
2065
1568
|
case 'small':
|
|
2066
|
-
return
|
|
1569
|
+
return "16px";
|
|
2067
1570
|
|
|
2068
1571
|
case 'medium':
|
|
2069
|
-
return
|
|
1572
|
+
return "24px";
|
|
2070
1573
|
|
|
2071
1574
|
case 'large':
|
|
2072
|
-
return
|
|
1575
|
+
return "32px";
|
|
2073
1576
|
}
|
|
2074
1577
|
}
|
|
2075
1578
|
|
|
2076
|
-
var css_248z$
|
|
1579
|
+
var css_248z$e = ":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";
|
|
1580
|
+
styleInject(css_248z$e);
|
|
1581
|
+
|
|
1582
|
+
var css_248z$f = ".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";
|
|
1583
|
+
styleInject(css_248z$f);
|
|
1584
|
+
|
|
1585
|
+
var css_248z$g = ":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";
|
|
1586
|
+
styleInject(css_248z$g);
|
|
1587
|
+
|
|
1588
|
+
var css_248z$h = ":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";
|
|
2077
1589
|
styleInject(css_248z$h);
|
|
2078
1590
|
|
|
2079
|
-
var css_248z$i = ".goa-scrollable {\n
|
|
1591
|
+
var css_248z$i = ".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";
|
|
2080
1592
|
styleInject(css_248z$i);
|
|
2081
1593
|
|
|
2082
1594
|
var GoAScrollable = function GoAScrollable(_ref) {
|
|
@@ -2094,11 +1606,10 @@ var GoAScrollable = function GoAScrollable(_ref) {
|
|
|
2094
1606
|
padding: "".concat(vPadding !== null && vPadding !== void 0 ? vPadding : 0, "rem ").concat(hPadding !== null && hPadding !== void 0 ? hPadding : 0, "rem")
|
|
2095
1607
|
};
|
|
2096
1608
|
return /*#__PURE__*/React.createElement("div", {
|
|
2097
|
-
className: "goa-scrollable"
|
|
2098
|
-
}, /*#__PURE__*/React.createElement("div", {
|
|
1609
|
+
className: "goa-scrollable",
|
|
2099
1610
|
style: style,
|
|
2100
1611
|
"data-testid": testId
|
|
2101
|
-
}, children)
|
|
1612
|
+
}, children);
|
|
2102
1613
|
};
|
|
2103
1614
|
|
|
2104
1615
|
var css_248z$j = "/* 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";
|
|
@@ -2107,10 +1618,10 @@ styleInject(css_248z$j);
|
|
|
2107
1618
|
var css_248z$k = "/* Root ============================================================================== */\n.modal-root {\n position: fixed;\n top: 0;\n left: 0;\n bottom: 0;\n width: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n z-index: 1000;\n --modal-spacing: 1.75rem;\n --button-min-width: 5rem; }\n\n/* Modal ============================================================================== */\n.modal {\n position: relative;\n background: #fff;\n z-index: 1002;\n box-shadow: 0 15px 25px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.2);\n border-radius: 4px; }\n\n@media (max-width: 639px) {\n .modal {\n width: 90%;\n max-height: 90%; } }\n\n@media (min-width: 640px) {\n .modal {\n margin: 1rem;\n max-height: 80%;\n width: 600px; } }\n\n@media (min-width: 1024px) {\n .modal {\n width: 65ch; } }\n\n/* Modal Container =========================================================================== */\n.modal-container {\n display: flex;\n flex-direction: column;\n height: 100%; }\n\n/* Modal Actions ============================================================================== */\n.modal-actions {\n text-align: right;\n margin: var(--modal-spacing);\n flex: 0 0 auto; }\n\n.modal-actions button {\n min-width: var(--button-min-width); }\n\n@media (max-width: 639px) {\n .modal-actions button + button {\n margin-top: 0.5rem; }\n .modal-actions button {\n display: block;\n width: 100%; } }\n\n@media (min-width: 640px) {\n .modal-actions > button {\n margin-right: 0; }\n .modal-actions > button + button {\n margin-left: 0.5rem; } }\n\n/* Modal Title ============================================================================ */\n.modal-title {\n font-size: var(--fs-xl);\n padding: 1rem var(--modal-spacing);\n margin-right: 40px;\n /* close icon spacing */\n flex: 0 0 auto; }\n\n/* Modal Background ======================================================================= */\n.modal-background {\n position: fixed;\n inset: 0;\n background: rgba(0, 0, 0, 0.5);\n z-index: 1001; }\n\n/* Modal Close Icon ======================================================================= */\n.modal-close {\n position: absolute;\n top: 1rem;\n right: 1rem; }\n";
|
|
2108
1619
|
styleInject(css_248z$k);
|
|
2109
1620
|
|
|
2110
|
-
var css_248z$l = ":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";
|
|
1621
|
+
var css_248z$l = ":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";
|
|
2111
1622
|
styleInject(css_248z$l);
|
|
2112
1623
|
|
|
2113
|
-
var css_248z$m = ":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/* Forms */\n.goa-dropdown-box {\n --color-selected-bg--hover: var(--color-gray-l5);\n --color-selected-text--hover: var(--color-gray-d1);\n position: relative; }\n\n.goa-dropdown-background {\n position: fixed;\n inset: 0;\n opacity: 1; }\n\n.goa-dropdown-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: flex;\n align-items: center;\n justify-content: space-between;\n cursor: pointer; }\n .goa-dropdown-input:hover {\n border-color: var(--color-input-border--hover); }\n .goa-dropdown-input:active, .goa-dropdown-input:focus {\n box-shadow: 0 0 0 3px var(--color-input--focused); }\n .goa-dropdown-input:disabled {\n border-color: var(--color-disabled); }\n .goa-dropdown-input:disabled:hover {\n border-color: var(--color-disabled); }\n .goa-dropdown-input:disabled:focus {\n box-shadow: none; }\n .goa-dropdown-input input {\n line-height: 1.5rem;\n padding: 0;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none; }\n .goa-dropdown-input input,\n .goa-dropdown-input input:hover,\n .goa-dropdown-input input:focus {\n box-shadow: none; }\n\n.goa-dropdown-input--disabled {\n opacity: 0.5;\n cursor: default; }\n .goa-dropdown-input--disabled:hover, .goa-dropdown-input--disabled:focus {\n cursor: default;\n box-shadow: none; }\n\n.goa-dropdown-leading-icon svg {\n width: 80%; }\n\n.goa-dropdown-input input {\n flex: 1 1 auto;\n border: none;\n outline: none;\n cursor: pointer; }\n .goa-dropdown-input input ::-moz-placeholder {\n text-overflow: ellipsis; }\n .goa-dropdown-input input :-ms-input-placeholder {\n text-overflow: ellipsis; }\n .goa-dropdown-input input ::placeholder {\n text-overflow: ellipsis; }\n\n.goa-icon ~ input {\n padding-left: 0.5rem; }\n\n.goa-dropdown-input--disabled input {\n cursor: default; }\n\n.goa-dropdown-list {\n position: absolute;\n left: 0;\n right: 0;\n margin: 0;\n padding: 0;\n list-style-type: none;\n background: var(--color-input-background);\n border-bottom-left-radius: var(--input-border-radius);\n border-bottom-right-radius: var(--input-border-radius);\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 2px 4px rgba(0, 0, 0, 0.1);\n z-index: 99; }\n\n.goa-dropdown-list hr {\n border: none;\n border-top: 1px solid var(--color-gray-l5);\n margin: 0; }\n\n.goa-dropdown-list label {\n font-size: var(--fs-sm);\n font-weight: var(--fw-bold);\n padding-left: 0.5rem; }\n\n.goa-dropdown-option {\n margin: 0;\n padding: 0.5rem;\n cursor: pointer;\n color: var(--color-input); }\n .goa-dropdown-option:hover {\n background: var(--color-selected-bg--hover);\n color: var(--color-primary-d1); }\n .goa-dropdown-option:last-child:hover {\n border-bottom-left-radius: var(--input-border-radius);\n border-bottom-right-radius: var(--input-border-radius); }\n\n.goa-dropdown-option--disabled {\n opacity: 0.5;\n cursor: default; }\n .goa-dropdown-option--disabled:hover {\n cursor: default;\n color: var(--color-selected-text--hover); }\n\n.goa-dropdown-option--selected {\n background: var(--color-primary);\n color: var(--color-white); }\n .goa-dropdown-option--selected:hover {\n background: var(--color-primary-d1);\n color: var(--color-white); }\n\n.dropdown-group-content .goa-dropdown-option {\n padding-left: 1.5rem; }\n\n.goa-state--error .goa-dropdown-input {\n border: 2px solid var(--color-error); }\n";
|
|
1624
|
+
var css_248z$m = ":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/* Forms */\n.goa-dropdown-box {\n --color-selected-bg--hover: var(--color-gray-l5);\n --color-selected-text--hover: var(--color-gray-d1);\n position: relative; }\n\n.goa-dropdown-background {\n position: fixed;\n inset: 0;\n opacity: 1; }\n\n.goa-dropdown-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: flex;\n align-items: center;\n justify-content: space-between;\n cursor: pointer; }\n .goa-dropdown-input:hover {\n border-color: var(--color-input-border--hover); }\n .goa-dropdown-input:active, .goa-dropdown-input:focus {\n box-shadow: 0 0 0 3px var(--color-input--focused); }\n .goa-dropdown-input:disabled {\n border-color: var(--color-disabled); }\n .goa-dropdown-input:disabled:hover {\n border-color: var(--color-disabled); }\n .goa-dropdown-input:disabled:focus {\n box-shadow: none; }\n .goa-dropdown-input input {\n line-height: 1.5rem;\n padding: 0;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none; }\n .goa-dropdown-input input,\n .goa-dropdown-input input:hover,\n .goa-dropdown-input input:focus {\n box-shadow: none; }\n\n.goa-dropdown-input--disabled {\n opacity: 0.5;\n cursor: default; }\n .goa-dropdown-input--disabled:hover, .goa-dropdown-input--disabled:focus {\n cursor: default;\n box-shadow: none; }\n\n.goa-dropdown-leading-icon svg {\n width: 80%; }\n\n.goa-dropdown-input input {\n flex: 1 1 auto;\n border: none;\n outline: none;\n cursor: pointer; }\n .goa-dropdown-input input ::-moz-placeholder {\n text-overflow: ellipsis; }\n .goa-dropdown-input input :-ms-input-placeholder {\n text-overflow: ellipsis; }\n .goa-dropdown-input input ::placeholder {\n text-overflow: ellipsis; }\n\n.goa-icon ~ input {\n padding-left: 0.5rem; }\n\n.goa-dropdown-input--disabled input {\n cursor: default; }\n\n.goa-dropdown-list {\n position: absolute;\n left: 0;\n right: 0;\n margin: 0;\n padding: 0;\n list-style-type: none;\n background: var(--color-input-background);\n border-bottom-left-radius: var(--input-border-radius);\n border-bottom-right-radius: var(--input-border-radius);\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 2px 4px rgba(0, 0, 0, 0.1);\n z-index: 99; }\n\n.goa-dropdown-list hr {\n border: none;\n border-top: 1px solid var(--color-gray-l5);\n margin: 0; }\n\n.goa-dropdown-list label {\n font-size: var(--fs-sm);\n font-weight: var(--fw-bold);\n padding-left: 0.5rem; }\n\n.goa-dropdown-option {\n margin: 0;\n padding: 0.5rem;\n cursor: pointer;\n color: var(--color-input); }\n .goa-dropdown-option:hover {\n background: var(--color-selected-bg--hover);\n color: var(--color-primary-d1); }\n .goa-dropdown-option:last-child:hover {\n border-bottom-left-radius: var(--input-border-radius);\n border-bottom-right-radius: var(--input-border-radius); }\n\n.goa-dropdown-option--disabled {\n opacity: 0.5;\n cursor: default; }\n .goa-dropdown-option--disabled:hover {\n cursor: default;\n color: var(--color-selected-text--hover); }\n\n.goa-dropdown-option--selected {\n background: var(--color-primary);\n color: var(--color-white); }\n .goa-dropdown-option--selected:hover {\n background: var(--color-primary-d1);\n color: var(--color-white); }\n\n.dropdown-group-content .goa-dropdown-option {\n padding-left: 1.5rem; }\n\n.goa-state--error .goa-dropdown-input {\n border: 2px solid var(--color-error); }\n";
|
|
2114
1625
|
styleInject(css_248z$m);
|
|
2115
1626
|
|
|
2116
1627
|
var GoADropdownOption = function GoADropdownOption(props) {
|
|
@@ -2261,7 +1772,7 @@ var GoADropdown = function GoADropdown(_ref) {
|
|
|
2261
1772
|
}, bindChildren())));
|
|
2262
1773
|
};
|
|
2263
1774
|
|
|
2264
|
-
var css_248z$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/* Radio Group */\n.goa-radio-group--horizontal {\n display: flex;\n flex-direction: row; }\n\n.goa-radio-group--vertical {\n display: inline-flex;\n flex-direction: column; }\n\n/* Radio */\nlabel.goa-radio {\n --goa-border-color: var(--color-input-border);\n --goa-border-color--checked: var(--color-primary);\n --goa-radio-color--error: var(--color-error);\n --goa-radio-outline-color: var(--color-input--focused);\n --goa-radio-outline-width: 3px;\n --goa-radio-diameter: 1.5rem;\n --goa-radio-border-width: 1px;\n --goa-radio-border-width--checked: 7px;\n box-sizing: border-box;\n display: flex !important;\n align-items: center;\n min-height: 3rem; }\n\n.goa-radio:hover {\n cursor: pointer; }\n\n.goa-radio *,\n.goa-radio *:before,\n.goa-radio *:after {\n box-sizing: border-box; }\n\n.goa-radio input[type='radio'] {\n display: none; }\n\n.goa-radio-label {\n padding: 0.5rem 1.5rem 0.5rem 0.5rem;\n font-weight: var(--fw-regular); }\n\n.goa-radio-icon {\n display: inline-block;\n height: var(--goa-radio-diameter);\n width: var(--goa-radio-diameter);\n border-radius: 50%;\n background-color: #fff;\n transition: box-shadow 100ms ease-in-out; }\n\n.goa-radio:hover > input:not(:disabled) ~ .goa-radio-icon {\n box-shadow: 0 0 0 var(--goa-radio-outline-width) var(--goa-radio-outline-color); }\n\n.goa-radio--disabled:hover {\n cursor: default; }\n\n/* States */\n/* Checked */\ninput[type='radio']:checked ~ .goa-radio-icon {\n border: var(--goa-radio-border-width--checked) solid var(--goa-border-color--checked); }\n\n/* Not checked */\ninput[type='radio']:not(:checked) ~ .goa-radio-icon {\n border: var(--goa-radio-border-width) solid var(--goa-border-color); }\n\n/* Disabled */\ninput[type='radio']:disabled ~ .goa-radio-icon {\n border: var(--goa-radio-border-width) solid var(--goa-border-color);\n opacity: 0.3; }\n\n/* Disabled and checked */\ninput[type='radio']:disabled:checked ~ .goa-radio-icon {\n border: var(--goa-radio-border-width--checked) solid var(--goa-border-color--checked);\n opacity: 0.3; }\n\n/* Error */\n.goa-state--error input[type='radio']:checked ~ .goa-radio-icon {\n border: 7px solid var(--goa-radio-color--error); }\n\n.goa-state--error input[type='radio']:not(:checked) ~ .goa-radio-icon {\n border: 2px solid var(--goa-radio-color--error); }\n";
|
|
1775
|
+
var css_248z$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/* Radio Group */\n.goa-radio-group--horizontal {\n display: flex;\n flex-direction: row; }\n\n.goa-radio-group--vertical {\n display: inline-flex;\n flex-direction: column; }\n\n/* Radio */\nlabel.goa-radio {\n --goa-border-color: var(--color-input-border);\n --goa-border-color--checked: var(--color-primary);\n --goa-radio-color--error: var(--color-error);\n --goa-radio-outline-color: var(--color-input--focused);\n --goa-radio-outline-width: 3px;\n --goa-radio-diameter: 1.5rem;\n --goa-radio-border-width: 1px;\n --goa-radio-border-width--checked: 7px;\n box-sizing: border-box;\n display: flex !important;\n align-items: center;\n min-height: 3rem; }\n\n.goa-radio:hover {\n cursor: pointer; }\n\n.goa-radio *,\n.goa-radio *:before,\n.goa-radio *:after {\n box-sizing: border-box; }\n\n.goa-radio input[type='radio'] {\n display: none; }\n\n.goa-radio-label {\n padding: 0.5rem 1.5rem 0.5rem 0.5rem;\n font-weight: var(--fw-regular); }\n\n.goa-radio-icon {\n display: inline-block;\n height: var(--goa-radio-diameter);\n width: var(--goa-radio-diameter);\n border-radius: 50%;\n background-color: #fff;\n transition: box-shadow 100ms ease-in-out; }\n\n.goa-radio:hover > input:not(:disabled) ~ .goa-radio-icon {\n box-shadow: 0 0 0 var(--goa-radio-outline-width) var(--goa-radio-outline-color); }\n\n.goa-radio--disabled:hover {\n cursor: default; }\n\n/* States */\n/* Checked */\ninput[type='radio']:checked ~ .goa-radio-icon {\n border: var(--goa-radio-border-width--checked) solid var(--goa-border-color--checked); }\n\n/* Not checked */\ninput[type='radio']:not(:checked) ~ .goa-radio-icon {\n border: var(--goa-radio-border-width) solid var(--goa-border-color); }\n\n/* Disabled */\ninput[type='radio']:disabled ~ .goa-radio-icon {\n border: var(--goa-radio-border-width) solid var(--goa-border-color);\n opacity: 0.3; }\n\n/* Disabled and checked */\ninput[type='radio']:disabled:checked ~ .goa-radio-icon {\n border: var(--goa-radio-border-width--checked) solid var(--goa-border-color--checked);\n opacity: 0.3; }\n\n/* Error */\n.goa-state--error input[type='radio']:checked ~ .goa-radio-icon {\n border: 7px solid var(--goa-radio-color--error); }\n\n.goa-state--error input[type='radio']:not(:checked) ~ .goa-radio-icon {\n border: 2px solid var(--goa-radio-color--error); }\n";
|
|
2265
1776
|
styleInject(css_248z$n);
|
|
2266
1777
|
|
|
2267
1778
|
var GoARadio = function GoARadio(props) {
|
|
@@ -2732,11 +2243,5 @@ var GoAElementLoader = function GoAElementLoader(_ref) {
|
|
|
2732
2243
|
strokeLinecap: "round"
|
|
2733
2244
|
}));
|
|
2734
2245
|
};
|
|
2735
|
-
GoAElementLoader.propTypes = {
|
|
2736
|
-
visible: propTypes.bool,
|
|
2737
|
-
baseColour: propTypes.string,
|
|
2738
|
-
spinnerColour: propTypes.string,
|
|
2739
|
-
size: propTypes.number
|
|
2740
|
-
};
|
|
2741
2246
|
|
|
2742
2247
|
export { GoAButton, GoACallout, GoACard, GoACardGroup, GoACheckbox, GoADropdown, GoADropdownOption, GoAElementLoader, GoAHeader, GoAHeroBanner, GoAHeroBannerContent, GoAHeroBannerLink, GoaMicrositeLogo as GoAMicrositeLogo, GoANotification, GoAPageLoader, GoARadio, GoARadioGroup, GoASkeletonContent, GoASkeletonGridColumnContent, GoASkeletonImageContent };
|