@abgov/react-components 3.4.0-beta.29 → 3.4.0-beta.32
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/experimental/experimental/form/form.row.d.ts +2 -0
- package/experimental/experimental/form/index.d.ts +2 -0
- package/experimental/experimental/form/validators.d.ts +10 -2
- package/experimental/experimental/input/input.component.d.ts +1 -1
- package/experimental/react-components.esm.js +9 -8
- package/experimental/react-components.umd.js +9 -8
- package/index.d.ts +2 -1
- package/lib/radio-group/radio-group.d.ts +2 -2
- package/lib/radio-group/radio.d.ts +2 -2
- package/package.json +1 -1
- package/react-components.esm.js +79 -67
- package/react-components.umd.js +79 -67
- package/lib/_common/errorState.d.ts +0 -5
package/react-components.esm.js
CHANGED
|
@@ -28,9 +28,12 @@ function styleInject(css, ref) {
|
|
|
28
28
|
}
|
|
29
29
|
}
|
|
30
30
|
|
|
31
|
-
var css_248z = "
|
|
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-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 --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\nem {\n font-size: var(--fs-xs);\n color: var(--color-gray-l1); }\n\nul,\nol {\n padding-left: 0; }\n\nli > ul,\nli > ol,\nli > ul,\nli > ol {\n padding-left: 0;\n margin-top: 0; }\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
|
+
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";
|
|
35
|
+
styleInject(css_248z$1);
|
|
36
|
+
|
|
34
37
|
function _defineProperty(obj, key, value) {
|
|
35
38
|
if (key in obj) {
|
|
36
39
|
Object.defineProperty(obj, key, {
|
|
@@ -1293,8 +1296,8 @@ if (process.env.NODE_ENV !== 'production') {
|
|
|
1293
1296
|
}
|
|
1294
1297
|
});
|
|
1295
1298
|
|
|
1296
|
-
var css_248z$
|
|
1297
|
-
styleInject(css_248z$
|
|
1299
|
+
var css_248z$2 = "/* Palette */\n/* Semantic usages */\n.goa-callout {\n box-sizing: border-box;\n display: inline-block;\n position: relative;\n width: 100%;\n margin: 24px 0 0;\n padding: 23px 24px 23px 24px;\n border-width: 0;\n border-left-width: 48px;\n border-style: solid;\n border-color: #0070c4;\n background: #f1f1f1;\n /* variants ***/ }\n .goa-callout *:first-child {\n margin-top: 0; }\n .goa-callout *:last-child {\n margin-bottom: 0; }\n .goa-callout.goa--important {\n border-color: #feba35; }\n .goa-callout.goa--emergency {\n border-color: #EC040B; }\n .goa-callout.goa--error {\n border-color: #EC040B; }\n .goa-callout.goa--success {\n border-color: #00853f; }\n .goa-callout:before {\n position: absolute;\n top: 28px;\n left: -36px;\n width: 24px;\n height: 24px;\n content: '';\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,20a9,9,0,1,1,9-9A9,9,0,0,1,12,21Z'/%3E%3Cpath fill='%23fff' d='M15.16,15.5h-2V9a1,1,0,0,0-1-1H9.82a1,1,0,0,0,0,2h1.36V15.5h-2a1,1,0,1,0,0,2h6a1,1,0,0,0,0-2Z'/%3E%3Cpath fill='%23fff' d='M12,7.33A1.29,1.29,0,1,0,10.73,6,1.29,1.29,0,0,0,12,7.33Z'/%3E%3C/svg%3E\");\n background-color: transparent;\n background-repeat: no-repeat;\n background-position: center center; }\n .goa-callout.goa--emergency:before {\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M11,9.41v4.52a1,1,0,0,0,2,0V9.41a1,1,0,0,0-2,0Z'/%3E%3Cpath fill='%23fff' d='M12,16.15a1.29,1.29,0,1,0,1.29,1.29A1.29,1.29,0,0,0,12,16.15Z'/%3E%3Cpath fill='%23fff' d='M22.87,20.14l-10-17.32a1,1,0,0,0-1.74,0l-10,17.32a1,1,0,0,0,0,1,1,1,0,0,0,.87.5H22a1,1,0,0,0,.87-.5A1,1,0,0,0,22.87,20.14Zm-19.14-.5L12,5.32l8.27,14.32Z'/%3E%3C/svg%3E\");\n background-color: transparent;\n background-repeat: no-repeat;\n background-position: center center; }\n .goa-callout.goa--error:before {\n background-image: url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><defs><style>.a{fill:none;}.b{fill:white;}</style></defs><rect class=\"a\" width=\"24\" height=\"24\"/><path class=\"b\" d=\"M48.1,23a11,11,0,1,0-11-11A10.968,10.968,0,0,0,48.1,23Zm0-20a9,9,0,1,1-9,9A8.963,8.963,0,0,1,48.1,3Z\" transform=\"translate(-36)\"/><path class=\"b\" d=\"M43.6,16.4a.967.967,0,0,0,1.4,0l3-3,3,3a.967.967,0,0,0,1.4,0,.967.967,0,0,0,0-1.4l-3-3,3-3A.99.99,0,0,0,51,7.6l-3,3-3-3A.99.99,0,0,0,43.6,9l3,3-3,3A1.2,1.2,0,0,0,43.6,16.4Z\" transform=\"translate(-36)\"/></svg>');\n background-repeat: no-repeat;\n background-size: contain;\n background-position: center center; }\n .goa-callout.goa--important:before {\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,20a9,9,0,1,1,9-9A9,9,0,0,1,12,21Z'/%3E%3Cpath fill='%23000' d='M12,14.46a1,1,0,0,0,1-1V6.57a1,1,0,0,0-2,0v6.89A1,1,0,0,0,12,14.46Z'/%3E%3Cpath fill='%23000' d='M12,15.68A1.29,1.29,0,1,0,13.29,17,1.29,1.29,0,0,0,12,15.68Z'/%3E%3C/svg%3E\");\n background-color: transparent;\n background-repeat: no-repeat;\n background-position: center center; }\n .goa-callout.goa--event:before {\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M3.27,22.85H20.73a2.14,2.14,0,0,0,2.14-2.14V5A2.14,2.14,0,0,0,20.73,2.9h-2.1v2h2.1a.14.14,0,0,1,.14.14V8.31H3.13V5a.14.14,0,0,1,.14-.14H5.48V6.28a1,1,0,1,0,2,0V1.85a1,1,0,1,0-2,0v1H3.27A2.14,2.14,0,0,0,1.13,5V20.71A2.14,2.14,0,0,0,3.27,22.85Zm17.6-12.54v10.4a.14.14,0,0,1-.14.14H3.27a.14.14,0,0,1-.14-.14V10.31Z'/%3E%3Cpath fill='%23fff' d='M16.45,7.28a1,1,0,0,0,1-1V1.85a1,1,0,0,0-2,0v1h-1.8v2h1.8V6.28A1,1,0,0,0,16.45,7.28Z'/%3E%3Cpath fill='%23fff' d='M11.47,7.28a1,1,0,0,0,1-1V1.85a1,1,0,1,0-2,0v1H8.66v2h1.81V6.28A1,1,0,0,0,11.47,7.28Z'/%3E%3Crect fill='%23fff' x='6.67' y='11.52' width='2.33' height='2.33'/%3E%3Crect fill='%23fff' x='11.22' y='11.52' width='2.33' height='2.33'/%3E%3Crect fill='%23fff' x='15.77' y='11.52' width='2.33' height='2.33'/%3E%3Crect fill='%23fff' x='3.64' y='15.83' width='2.33' height='2.33'/%3E%3Crect fill='%23fff' x='8.19' y='15.83' width='2.33' height='2.33'/%3E%3Crect fill='%23fff' x='12.74' y='15.83' width='2.33' height='2.33'/%3E%3C/svg%3E\");\n background-color: transparent;\n background-repeat: no-repeat;\n background-position: center center; }\n .goa-callout.goa--event:before {\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M3.27,22.85H20.73a2.14,2.14,0,0,0,2.14-2.14V5A2.14,2.14,0,0,0,20.73,2.9h-2.1v2h2.1a.14.14,0,0,1,.14.14V8.31H3.13V5a.14.14,0,0,1,.14-.14H5.48V6.28a1,1,0,1,0,2,0V1.85a1,1,0,1,0-2,0v1H3.27A2.14,2.14,0,0,0,1.13,5V20.71A2.14,2.14,0,0,0,3.27,22.85Zm17.6-12.54v10.4a.14.14,0,0,1-.14.14H3.27a.14.14,0,0,1-.14-.14V10.31Z'/%3E%3Cpath fill='%23fff' d='M16.45,7.28a1,1,0,0,0,1-1V1.85a1,1,0,0,0-2,0v1h-1.8v2h1.8V6.28A1,1,0,0,0,16.45,7.28Z'/%3E%3Cpath fill='%23fff' d='M11.47,7.28a1,1,0,0,0,1-1V1.85a1,1,0,1,0-2,0v1H8.66v2h1.81V6.28A1,1,0,0,0,11.47,7.28Z'/%3E%3Crect fill='%23fff' x='6.67' y='11.52' width='2.33' height='2.33'/%3E%3Crect fill='%23fff' x='11.22' y='11.52' width='2.33' height='2.33'/%3E%3Crect fill='%23fff' x='15.77' y='11.52' width='2.33' height='2.33'/%3E%3Crect fill='%23fff' x='3.64' y='15.83' width='2.33' height='2.33'/%3E%3Crect fill='%23fff' x='8.19' y='15.83' width='2.33' height='2.33'/%3E%3Crect fill='%23fff' x='12.74' y='15.83' width='2.33' height='2.33'/%3E%3C/svg%3E\");\n background-color: transparent;\n background-repeat: no-repeat;\n background-position: center center; }\n .goa-callout.goa--success:before {\n background-image: url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><defs><style>.a{fill:none;}.b{fill:white;}</style></defs><g transform=\"translate(-23 -68)\"><rect class=\"a\" width=\"24\" height=\"24\" transform=\"translate(23 68)\"/><path class=\"b\" d=\"M12,23A11,11,0,1,0,1,12,10.968,10.968,0,0,0,12,23ZM12,3a9,9,0,1,1-9,9A8.963,8.963,0,0,1,12,3Z\" transform=\"translate(23 68)\"/><path class=\"b\" d=\"M10.9,16.4a.908.908,0,0,0,.7.3h.1a.842.842,0,0,0,.7-.4L17.6,9a.913.913,0,0,0-.2-1.4,1,1,0,0,0-1.4.3l-4.5,6.3L8,10.5a.99.99,0,0,0-1.4,1.4Z\" transform=\"translate(23 68)\"/></g></svg>');\n background-repeat: no-repeat;\n background-size: contain;\n background-position: center center; }\n .goa-callout .messages {\n margin-bottom: 0;\n margin-top: 1em; }\n";
|
|
1300
|
+
styleInject(css_248z$2);
|
|
1298
1301
|
|
|
1299
1302
|
var GoACallout = function GoACallout(_ref) {
|
|
1300
1303
|
var title = _ref.title,
|
|
@@ -1320,12 +1323,12 @@ GoACallout.propTypes = {
|
|
|
1320
1323
|
content: propTypes.string
|
|
1321
1324
|
};
|
|
1322
1325
|
|
|
1323
|
-
var css_248z$
|
|
1324
|
-
styleInject(css_248z$2);
|
|
1325
|
-
|
|
1326
|
-
var css_248z$3 = ".goa-notifications .title {\n position: absolute;\n overflow: hidden;\n clip: rect(1px, 1px, 1px, 1px);\n left: -10px;\n width: 1px;\n height: 1px;\n white-space: nowrap; }\n\n.goa-notifications ul {\n box-sizing: border-box;\n display: inline-block;\n width: 100%;\n margin: 0;\n padding: 0;\n list-style-type: none; }\n .goa-notifications ul li {\n box-sizing: border-box;\n display: block;\n width: 100%;\n margin: 0;\n padding: 0; }\n";
|
|
1326
|
+
var css_248z$3 = "/* Palette */\n/* Semantic usages */\n.goa-notification {\n box-sizing: border-box;\n display: inline-block;\n position: relative;\n width: 100%;\n padding-left: 72px;\n padding-right: 72px;\n color: #fff;\n background: #0070c4;\n /* variants ***/ }\n .goa-notification.dismissed {\n display: none; }\n @media screen and (min-width: 768px) and (max-width: 1199px) {\n .goa-notification {\n padding-left: 24px;\n padding-right: 24px; } }\n @media screen and (max-width: 767px) {\n .goa-notification {\n padding-left: 24px;\n padding-right: 24px; } }\n .goa-notification .content {\n box-sizing: border-box;\n display: flex;\n width: 100%;\n margin: 0;\n position: relative;\n padding: 0 36px; }\n .goa-notification .content .message {\n flex: 1 0 0;\n box-sizing: border-box;\n min-height: 56px;\n padding: 28px 0; }\n .goa-notification .content .close {\n flex: 0 1 auto;\n color: #fff; }\n .goa-notification a {\n color: #fff; }\n .goa-notification a:hover, .goa-notification a:focus {\n color: #fff;\n text-decoration: none; }\n .goa-notification.goa--event {\n background-color: #00853f; }\n .goa-notification.goa--important {\n background-color: #feba35; }\n .goa-notification.goa--important .message {\n color: #333; }\n .goa-notification.goa--important a {\n color: #333; }\n .goa-notification.goa--important a:hover, .goa-notification.goa--important a:focus {\n color: #333; }\n .goa-notification.goa--emergency {\n background-color: #EC040B; }\n .goa-notification .close {\n align-self: center;\n position: absolute;\n right: 12px;\n cursor: pointer; }\n .goa-notification .close svg {\n fill: #fff;\n color: #fff; }\n .goa-notification .content:before {\n position: absolute;\n top: 50%;\n left: 6px;\n width: 24px;\n height: 24px;\n margin-top: -12px;\n content: '';\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,20a9,9,0,1,1,9-9A9,9,0,0,1,12,21Z'/%3E%3Cpath fill='%23fff' d='M15.16,15.5h-2V9a1,1,0,0,0-1-1H9.82a1,1,0,0,0,0,2h1.36V15.5h-2a1,1,0,1,0,0,2h6a1,1,0,0,0,0-2Z'/%3E%3Cpath fill='%23fff' d='M12,7.33A1.29,1.29,0,1,0,10.73,6,1.29,1.29,0,0,0,12,7.33Z'/%3E%3C/svg%3E\");\n background-color: transparent;\n background-repeat: no-repeat;\n background-position: center center; }\n .goa-notification.goa--emergency .content:before {\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M11,9.41v4.52a1,1,0,0,0,2,0V9.41a1,1,0,0,0-2,0Z'/%3E%3Cpath fill='%23fff' d='M12,16.15a1.29,1.29,0,1,0,1.29,1.29A1.29,1.29,0,0,0,12,16.15Z'/%3E%3Cpath fill='%23fff' d='M22.87,20.14l-10-17.32a1,1,0,0,0-1.74,0l-10,17.32a1,1,0,0,0,0,1,1,1,0,0,0,.87.5H22a1,1,0,0,0,.87-.5A1,1,0,0,0,22.87,20.14Zm-19.14-.5L12,5.32l8.27,14.32Z'/%3E%3C/svg%3E\");\n background-color: transparent;\n background-repeat: no-repeat;\n background-position: center center; }\n .goa-notification.goa--important .content:before {\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,20a9,9,0,1,1,9-9A9,9,0,0,1,12,21Z'/%3E%3Cpath fill='%23000' d='M12,14.46a1,1,0,0,0,1-1V6.57a1,1,0,0,0-2,0v6.89A1,1,0,0,0,12,14.46Z'/%3E%3Cpath fill='%23000' d='M12,15.68A1.29,1.29,0,1,0,13.29,17,1.29,1.29,0,0,0,12,15.68Z'/%3E%3C/svg%3E\");\n background-color: transparent;\n background-repeat: no-repeat;\n background-position: center center; }\n .goa-notification.goa--event .content:before {\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M3.27,22.85H20.73a2.14,2.14,0,0,0,2.14-2.14V5A2.14,2.14,0,0,0,20.73,2.9h-2.1v2h2.1a.14.14,0,0,1,.14.14V8.31H3.13V5a.14.14,0,0,1,.14-.14H5.48V6.28a1,1,0,1,0,2,0V1.85a1,1,0,1,0-2,0v1H3.27A2.14,2.14,0,0,0,1.13,5V20.71A2.14,2.14,0,0,0,3.27,22.85Zm17.6-12.54v10.4a.14.14,0,0,1-.14.14H3.27a.14.14,0,0,1-.14-.14V10.31Z'/%3E%3Cpath fill='%23fff' d='M16.45,7.28a1,1,0,0,0,1-1V1.85a1,1,0,0,0-2,0v1h-1.8v2h1.8V6.28A1,1,0,0,0,16.45,7.28Z'/%3E%3Cpath fill='%23fff' d='M11.47,7.28a1,1,0,0,0,1-1V1.85a1,1,0,1,0-2,0v1H8.66v2h1.81V6.28A1,1,0,0,0,11.47,7.28Z'/%3E%3Crect fill='%23fff' x='6.67' y='11.52' width='2.33' height='2.33'/%3E%3Crect fill='%23fff' x='11.22' y='11.52' width='2.33' height='2.33'/%3E%3Crect fill='%23fff' x='15.77' y='11.52' width='2.33' height='2.33'/%3E%3Crect fill='%23fff' x='3.64' y='15.83' width='2.33' height='2.33'/%3E%3Crect fill='%23fff' x='8.19' y='15.83' width='2.33' height='2.33'/%3E%3Crect fill='%23fff' x='12.74' y='15.83' width='2.33' height='2.33'/%3E%3C/svg%3E\");\n background-color: transparent;\n background-repeat: no-repeat;\n background-position: center center; }\n";
|
|
1327
1327
|
styleInject(css_248z$3);
|
|
1328
1328
|
|
|
1329
|
+
var css_248z$4 = ".goa-notifications .title {\n position: absolute;\n overflow: hidden;\n clip: rect(1px, 1px, 1px, 1px);\n left: -10px;\n width: 1px;\n height: 1px;\n white-space: nowrap; }\n\n.goa-notifications ul {\n box-sizing: border-box;\n display: inline-block;\n width: 100%;\n margin: 0;\n padding: 0;\n list-style-type: none; }\n .goa-notifications ul li {\n box-sizing: border-box;\n display: block;\n width: 100%;\n margin: 0;\n padding: 0; }\n";
|
|
1330
|
+
styleInject(css_248z$4);
|
|
1331
|
+
|
|
1329
1332
|
var GoANotification = function GoANotification(_ref) {
|
|
1330
1333
|
var title = _ref.title,
|
|
1331
1334
|
_ref$type = _ref.type,
|
|
@@ -1389,8 +1392,8 @@ GoANotification.propTypes = {
|
|
|
1389
1392
|
content: propTypes.string
|
|
1390
1393
|
};
|
|
1391
1394
|
|
|
1392
|
-
var css_248z$
|
|
1393
|
-
styleInject(css_248z$
|
|
1395
|
+
var css_248z$5 = "/* Palette */\n/* Semantic usages */\n/* Common button colors */\n/* Primary colors */\n/* Secondary colors */\n/* Tertiary colors */\n/* This style is from the alberta design system */\nbutton.goa-button,\ninput[type='button'].goa-button,\ninput[type='submit'].goa-button {\n box-sizing: border-box;\n min-width: 70px;\n padding: 12px;\n border: 2px solid #0070c4;\n border-radius: 4px;\n background: #0070c4;\n cursor: pointer;\n color: #fff;\n font-size: 18px;\n font-weight: 700;\n line-height: 1em; }\n button.goa-button.btn-small,\n input[type='button'].goa-button.btn-small,\n input[type='submit'].goa-button.btn-small {\n font-size: 16px;\n padding: 8px;\n margin: 12px 12px 0 0; }\n button.goa-button:last-of-type,\n input[type='button'].goa-button:last-of-type,\n input[type='submit'].goa-button:last-of-type {\n margin-right: 0; }\n button.goa-button:disabled, button.goa-button:disabled.goa--secondary, button.goa-button:disabled.goa--tertiary,\n input[type='button'].goa-button:disabled,\n input[type='button'].goa-button:disabled.goa--secondary,\n input[type='button'].goa-button:disabled.goa--tertiary,\n input[type='submit'].goa-button:disabled,\n input[type='submit'].goa-button:disabled.goa--secondary,\n input[type='submit'].goa-button:disabled.goa--tertiary {\n pointer-events: none;\n color: #666;\n background-color: #f1f1f1;\n border-color: #f1f1f1; }\n button.goa-button:hover,\n input[type='button'].goa-button:hover,\n input[type='submit'].goa-button:hover {\n border-color: #004f84;\n background: #004f84; }\n button.goa-button:focus, button.goa-button:active,\n input[type='button'].goa-button:focus,\n input[type='button'].goa-button:active,\n input[type='submit'].goa-button:focus,\n input[type='submit'].goa-button:active {\n border-color: #004f84;\n box-shadow: 0 0 0 3px #feba35;\n background: #004f84;\n outline: none; }\n button.goa-button.goa--secondary,\n input[type='button'].goa-button.goa--secondary,\n input[type='submit'].goa-button.goa--secondary {\n border: 2px solid #0070c4;\n background: #fff;\n color: #0070c4; }\n button.goa-button.goa--secondary:hover,\n input[type='button'].goa-button.goa--secondary:hover,\n input[type='submit'].goa-button.goa--secondary:hover {\n border-color: #004f84;\n background: #fff;\n color: #004f84; }\n button.goa-button.goa--secondary:focus, button.goa-button.goa--secondary:active,\n input[type='button'].goa-button.goa--secondary:focus,\n input[type='button'].goa-button.goa--secondary:active,\n input[type='submit'].goa-button.goa--secondary:focus,\n input[type='submit'].goa-button.goa--secondary:active {\n color: #004f84;\n background-color: #fff;\n border: 2px solid #004f84;\n box-shadow: 0 0 0 3px #feba35;\n outline: none; }\n button.goa-button.goa--tertiary,\n input[type='button'].goa-button.goa--tertiary,\n input[type='submit'].goa-button.goa--tertiary {\n border-color: #dcdcdc;\n background: #fff;\n color: #0070c4; }\n button.goa-button.goa--tertiary:hover,\n input[type='button'].goa-button.goa--tertiary:hover,\n input[type='submit'].goa-button.goa--tertiary:hover {\n background: #fff;\n color: #004f84; }\n button.goa-button.goa--tertiary:focus, button.goa-button.goa--tertiary:active,\n input[type='button'].goa-button.goa--tertiary:focus,\n input[type='button'].goa-button.goa--tertiary:active,\n input[type='submit'].goa-button.goa--tertiary:focus,\n input[type='submit'].goa-button.goa--tertiary:active {\n border: 2px solid #004f84;\n color: #004f84;\n background-color: #fff;\n box-shadow: 0 0 0 3px #feba35;\n outline: none; }\n";
|
|
1396
|
+
styleInject(css_248z$5);
|
|
1394
1397
|
|
|
1395
1398
|
var GoAButton = function GoAButton(_ref) {
|
|
1396
1399
|
var _ref$buttonType = _ref.buttonType,
|
|
@@ -1421,12 +1424,12 @@ GoAButton.propTypes = {
|
|
|
1421
1424
|
onClick: propTypes.func
|
|
1422
1425
|
};
|
|
1423
1426
|
|
|
1424
|
-
var css_248z$
|
|
1425
|
-
styleInject(css_248z$5);
|
|
1426
|
-
|
|
1427
|
-
var css_248z$6 = "a.microsite-link {\n color: inherit;\n text-decoration: none;\n white-space: nowrap;\n display: flex;\n align-items: center;\n height: 66px; }\n a.microsite-link:focus, a.microsite-link:hover, a.microsite-link:active {\n outline: none; }\n a.microsite-link .image-desktop-tablet {\n width: 150px;\n height: 42px;\n display: inline-block;\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='149.351' height='42' viewBox='0 0 149.351 42'%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill:none;%7D.b%7Bclip-path:url(%23a);%7D.c%7Bfill:%2300aad2;%7D.d%7Bfill:%235f6a72;%7D%3C/style%3E%3CclipPath id='a'%3E%3Crect class='a' width='149.351' height='42'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg class='b'%3E%3Crect class='c' width='13.555' height='13.555' transform='translate(135.796 21.524)'/%3E%3Cpath class='d' d='M63.082,33.088c-1.383.138-2.835.277-4.357.346.553-4.357,2.835-10.373,5.671-9.405,1.66.553.761,5.671-1.314,9.059m-3.527,2.974a3.761,3.761,0,0,1-1.245,0,.851.851,0,0,0,.346-.692v-.553c.761,0,1.936-.138,3.389-.277a4.327,4.327,0,0,1-2.49,1.521M76.844,25.688c1.8-1.66,2.7-1.521,2.9-1.106.484.968-1.591,4.357-5.671,6.224a10.328,10.328,0,0,1,2.766-5.118m66.736,1.66c-.207-3.389-3.181-3.942-3.6-2.974-.138.346,1.106.207,1.106,2.628,0,3.942-4.011,9.129-9.129,9.129-5.532,0-6.985-4.357-7.261-6.432-.207-1.452.138-3.458-2.351-3.181-1.729.207-3.25,3.527-5.463,6.362-1.867,2.42-2.7,2.213-2.282.138.553-2.628,2.7-8.714,5.187-9.129,1.176-.207,1.591,1.8,2.075.553s.069-4.011-2.559-4.011c-1.8,0-3.942,1.936-5.74,4.08-1.521,1.936-9.336,13.416-12.656,10.927-1.521-1.176-1.383-5.878-.415-11.411,3.873-1.521,7.123-1.037,8.921-.138.9.415,1.037.346.622-.622-.553-1.452-3.665-3.734-8.575-2.7-.138,0-.207.069-.346.069.415-1.8.83-3.665,1.383-5.463.484-1.66,1.8-4.5-1.729-4.979-1.106-.207-.622.346-1.037,1.867-.692,2.766-1.521,6.362-2.144,10.028a19.745,19.745,0,0,0-7.538,8.091,38.59,38.59,0,0,0,.9-4.772,1.589,1.589,0,0,0-1.245-1.729c-.761-.207-1.729.138-2.628,1.452-2.144,3.043-4.841,7.815-8.99,9.82-2.974,1.452-4.288,0-4.357-2.282a9.869,9.869,0,0,0,1.521-.553c5.394-2.351,7.192-5.947,5.878-8.16-1.314-2.075-4.979-1.452-7.953,1.66a11.175,11.175,0,0,0-2.7,6.5c-1.245.277-2.628.484-4.219.692,2.49-4.08,2.282-9.613-1.383-10.581-4.288-1.106-6.432,3.043-7.331,6.5.346-3.873.9-7.745,1.591-11.549.346-1.66,1.452-4.5-2.075-4.979-1.106-.207-.968.346-.9,1.867.138,2.075-2.144,14.454-.968,19.848-1.521.484-2.144,1.66-.207,2.835,1.383.83,4.357,1.106,7.331-.346a9.3,9.3,0,0,0,2.766-2.144c1.8-.207,3.665-.553,5.394-.83.277,2.42,1.867,4.219,5.463,3.873,5.118-.484,9.682-6.777,11.411-9.82-.346,3.25-2.42,10.373,1.176,10.028,1.383-.138.83-.346.9-1.591.346-4.288,3.873-7.953,7.4-10.166-.622,5.256-.415,9.958,2.006,11.411,4.426,2.766,10.581-4.5,14.039-8.921-1.729,3.942-2.7,8.921-.138,9.682,3.043.9,5.463-4.219,8.3-8.091.346,2.766,2.213,7.607,9.682,7.607,8.022-.069,13.071-4.91,12.863-10.1m-108.3,8.645A66.439,66.439,0,0,1,27.4,32.534a59.168,59.168,0,0,0,6.777-2.974,54.453,54.453,0,0,0,1.106,6.432m20.4,3.873c-.069-.207-.622.069-1.106,0-1.452-.207-3.389-2.213-3.942-5.463-1.037-5.878-.415-11.687,1.314-20.332.346-1.66,1.452-4.5-2.075-5.048-1.106-.138-.553.415-.83,1.867C47.66,17.32,42.4,21.954,37.149,25.066,36.6,17.735,36.8,9.505,38.186,4.526c1.176-4.219,2.559-3.458.83-4.357s-3.734.277-5.325,3.458S24.839,23.89,13.221,35.439C7.273,41.317,1.879,38.274.842,37.375c-.9-.761-1.176.415-.138,1.591,4.772,5.256,11.826,2.282,14.384-.277,7.054-7.054,15.283-22.268,18.6-28.7a98.251,98.251,0,0,0,.277,16.874,50.129,50.129,0,0,1-8.3,3.181c-1.66.415-2.7,1.106-2.7,1.867s1.106,1.521,2.7,2.282c2.835,1.383,11.2,5.256,13.209,6.5,1.729,1.037,2.628.207,3.112-.9.692-1.452-1.176-2.282-2.974-2.766a60.545,60.545,0,0,1-1.66-9.267c4.219-2.628,8.437-6.086,10.788-10.443C47.522,20.916,46,33.3,49.873,38.482a5.451,5.451,0,0,0,4.564,2.213c.968-.069,1.383-.692,1.245-.83' transform='translate(-0.038 0.124)'/%3E%3C/g%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n background-size: contain;\n background-position: center center; }\n @media screen and (max-width: 767px) {\n a.microsite-link .image-desktop-tablet {\n display: none; } }\n @media screen and (min-width: 768px) and (max-width: 1199px) {\n a.microsite-link .image-mobile {\n display: none; } }\n @media screen and (min-width: 1200px) {\n a.microsite-link .image-mobile {\n display: none; } }\n @media screen and (max-width: 767px) {\n a.microsite-link .image-mobile {\n width: 34px;\n height: 34px;\n display: inline-block;\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='16' height='16' viewBox='0 0 16 16'%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill:none;%7D.b%7Bfill:%2300aad2;%7D.c%7Bclip-path:url(%23a);%7D.d%7Bfill:%23fff;%7D%3C/style%3E%3CclipPath id='a'%3E%3Crect class='a' width='14' height='14' transform='translate(-0.345 -0.21)'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg transform='translate(0 -0.135)'%3E%3Ccircle class='b' cx='8' cy='8' r='8' transform='translate(0 0.135)'/%3E%3Cg transform='translate(1.345 1.344)'%3E%3Cg class='c' transform='translate(0 0)'%3E%3Cpath class='d' d='M12.612,13.636a16.24,16.24,0,0,1-1.86-.822,13.436,13.436,0,0,0,1.6-.708,11.312,11.312,0,0,0,.264,1.53M16.032,7.3c-.266-.034-.128.091-.2.442a5.465,5.465,0,0,1-2.8,3.338,16.141,16.141,0,0,1,.249-4.84c.275-1,.6-.813.2-1.022-.427-.22-.887.071-1.258.813A27.247,27.247,0,0,1,7.4,13.522a2.141,2.141,0,0,1-2.918.461c-.206-.174-.282.095-.026.37a2.412,2.412,0,0,0,3.387-.082A32.715,32.715,0,0,0,12.219,7.51a23.541,23.541,0,0,0,.063,3.971,11.464,11.464,0,0,1-1.964.749c-.388.1-.628.26-.635.439-.007.2.253.363.63.541.67.318,2.633,1.246,3.117,1.527.414.24.616.053.739-.207.16-.338-.279-.533-.7-.661a13.175,13.175,0,0,1-.382-2.179,7.143,7.143,0,0,0,2.547-2.454,4.7,4.7,0,0,0,.4-1.133,2.125,2.125,0,0,0,.048-.742s-.007-.054-.048-.059' transform='translate(-3.51 -3.943)'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n background-size: contain;\n background-position: center center; } }\n a.microsite-link .name {\n margin-left: 8px;\n font-size: 16px;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis; }\n @media screen and (min-width: 1200px) {\n a.microsite-link .name {\n margin-left: 28px; } }\n @media screen and (min-width: 768px) and (max-width: 1199px) {\n a.microsite-link .name {\n margin-left: 28px; } }\n";
|
|
1427
|
+
var css_248z$6 = "/* Palette */\n/* Semantic usages */\n.goa-header {\n display: flex;\n align-items: center;\n padding-left: 28px;\n padding-right: 28px; }\n @media screen and (min-width: 768px) and (max-width: 1199px) {\n .goa-header {\n padding-left: 28px;\n padding-right: 28px; } }\n @media screen and (max-width: 767px) {\n .goa-header {\n padding-left: 28px;\n padding-right: 28px; } }\n .goa-header.goa-microsite-header,\n .goa-header > .goa-microsite-header {\n background-color: #fff;\n top: 0;\n display: flex;\n justify-content: space-between; }\n .goa-header.goa-official-site-header,\n .goa-header > .goa-official-site-header {\n font-size: 12px;\n background-color: #f1f1f1;\n line-height: 22px; }\n .goa-header.goa-official-site-header .site-text,\n .goa-header > .goa-official-site-header .site-text {\n white-space: nowrap;\n padding: 0 4px; }\n .goa-header.goa-official-site-header .service-level,\n .goa-header > .goa-official-site-header .service-level {\n padding: 0 3px;\n font-weight: bold;\n vertical-align: baseline;\n text-transform: capitalize; }\n .goa-header.goa-official-site-header .service-level--alpha,\n .goa-header > .goa-official-site-header .service-level--alpha {\n background-color: #feba35;\n color: #333; }\n .goa-header.goa-official-site-header .service-level--beta,\n .goa-header > .goa-official-site-header .service-level--beta {\n background-color: #0081a2;\n color: #fff; }\n .goa-header.goa-official-site-header .service-level--live,\n .goa-header > .goa-official-site-header .service-level--live {\n height: 16px;\n width: 16px;\n padding: 0;\n color: transparent;\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='16' height='16' viewBox='0 0 16 16'%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill:none;%7D.b%7Bfill:%2300aad2;%7D.c%7Bclip-path:url(%23a);%7D.d%7Bfill:%23fff;%7D%3C/style%3E%3CclipPath id='a'%3E%3Crect class='a' width='14' height='14' transform='translate(-0.345 -0.21)'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg transform='translate(0 -0.135)'%3E%3Ccircle class='b' cx='8' cy='8' r='8' transform='translate(0 0.135)'/%3E%3Cg transform='translate(1.345 1.344)'%3E%3Cg class='c' transform='translate(0 0)'%3E%3Cpath class='d' d='M12.612,13.636a16.24,16.24,0,0,1-1.86-.822,13.436,13.436,0,0,0,1.6-.708,11.312,11.312,0,0,0,.264,1.53M16.032,7.3c-.266-.034-.128.091-.2.442a5.465,5.465,0,0,1-2.8,3.338,16.141,16.141,0,0,1,.249-4.84c.275-1,.6-.813.2-1.022-.427-.22-.887.071-1.258.813A27.247,27.247,0,0,1,7.4,13.522a2.141,2.141,0,0,1-2.918.461c-.206-.174-.282.095-.026.37a2.412,2.412,0,0,0,3.387-.082A32.715,32.715,0,0,0,12.219,7.51a23.541,23.541,0,0,0,.063,3.971,11.464,11.464,0,0,1-1.964.749c-.388.1-.628.26-.635.439-.007.2.253.363.63.541.67.318,2.633,1.246,3.117,1.527.414.24.616.053.739-.207.16-.338-.279-.533-.7-.661a13.175,13.175,0,0,1-.382-2.179,7.143,7.143,0,0,0,2.547-2.454,4.7,4.7,0,0,0,.4-1.133,2.125,2.125,0,0,0,.048-.742s-.007-.054-.048-.059' transform='translate(-3.51 -3.943)'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n background-size: contain;\n background-position: center center; }\n .goa-header .web-link {\n color: #0070c4;\n text-align: left; }\n";
|
|
1428
1428
|
styleInject(css_248z$6);
|
|
1429
1429
|
|
|
1430
|
+
var css_248z$7 = "a.microsite-link {\n color: inherit;\n text-decoration: none;\n white-space: nowrap;\n display: flex;\n align-items: center;\n height: 66px; }\n a.microsite-link:focus, a.microsite-link:hover, a.microsite-link:active {\n outline: none; }\n a.microsite-link .image-desktop-tablet {\n width: 150px;\n height: 42px;\n display: inline-block;\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='149.351' height='42' viewBox='0 0 149.351 42'%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill:none;%7D.b%7Bclip-path:url(%23a);%7D.c%7Bfill:%2300aad2;%7D.d%7Bfill:%235f6a72;%7D%3C/style%3E%3CclipPath id='a'%3E%3Crect class='a' width='149.351' height='42'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg class='b'%3E%3Crect class='c' width='13.555' height='13.555' transform='translate(135.796 21.524)'/%3E%3Cpath class='d' d='M63.082,33.088c-1.383.138-2.835.277-4.357.346.553-4.357,2.835-10.373,5.671-9.405,1.66.553.761,5.671-1.314,9.059m-3.527,2.974a3.761,3.761,0,0,1-1.245,0,.851.851,0,0,0,.346-.692v-.553c.761,0,1.936-.138,3.389-.277a4.327,4.327,0,0,1-2.49,1.521M76.844,25.688c1.8-1.66,2.7-1.521,2.9-1.106.484.968-1.591,4.357-5.671,6.224a10.328,10.328,0,0,1,2.766-5.118m66.736,1.66c-.207-3.389-3.181-3.942-3.6-2.974-.138.346,1.106.207,1.106,2.628,0,3.942-4.011,9.129-9.129,9.129-5.532,0-6.985-4.357-7.261-6.432-.207-1.452.138-3.458-2.351-3.181-1.729.207-3.25,3.527-5.463,6.362-1.867,2.42-2.7,2.213-2.282.138.553-2.628,2.7-8.714,5.187-9.129,1.176-.207,1.591,1.8,2.075.553s.069-4.011-2.559-4.011c-1.8,0-3.942,1.936-5.74,4.08-1.521,1.936-9.336,13.416-12.656,10.927-1.521-1.176-1.383-5.878-.415-11.411,3.873-1.521,7.123-1.037,8.921-.138.9.415,1.037.346.622-.622-.553-1.452-3.665-3.734-8.575-2.7-.138,0-.207.069-.346.069.415-1.8.83-3.665,1.383-5.463.484-1.66,1.8-4.5-1.729-4.979-1.106-.207-.622.346-1.037,1.867-.692,2.766-1.521,6.362-2.144,10.028a19.745,19.745,0,0,0-7.538,8.091,38.59,38.59,0,0,0,.9-4.772,1.589,1.589,0,0,0-1.245-1.729c-.761-.207-1.729.138-2.628,1.452-2.144,3.043-4.841,7.815-8.99,9.82-2.974,1.452-4.288,0-4.357-2.282a9.869,9.869,0,0,0,1.521-.553c5.394-2.351,7.192-5.947,5.878-8.16-1.314-2.075-4.979-1.452-7.953,1.66a11.175,11.175,0,0,0-2.7,6.5c-1.245.277-2.628.484-4.219.692,2.49-4.08,2.282-9.613-1.383-10.581-4.288-1.106-6.432,3.043-7.331,6.5.346-3.873.9-7.745,1.591-11.549.346-1.66,1.452-4.5-2.075-4.979-1.106-.207-.968.346-.9,1.867.138,2.075-2.144,14.454-.968,19.848-1.521.484-2.144,1.66-.207,2.835,1.383.83,4.357,1.106,7.331-.346a9.3,9.3,0,0,0,2.766-2.144c1.8-.207,3.665-.553,5.394-.83.277,2.42,1.867,4.219,5.463,3.873,5.118-.484,9.682-6.777,11.411-9.82-.346,3.25-2.42,10.373,1.176,10.028,1.383-.138.83-.346.9-1.591.346-4.288,3.873-7.953,7.4-10.166-.622,5.256-.415,9.958,2.006,11.411,4.426,2.766,10.581-4.5,14.039-8.921-1.729,3.942-2.7,8.921-.138,9.682,3.043.9,5.463-4.219,8.3-8.091.346,2.766,2.213,7.607,9.682,7.607,8.022-.069,13.071-4.91,12.863-10.1m-108.3,8.645A66.439,66.439,0,0,1,27.4,32.534a59.168,59.168,0,0,0,6.777-2.974,54.453,54.453,0,0,0,1.106,6.432m20.4,3.873c-.069-.207-.622.069-1.106,0-1.452-.207-3.389-2.213-3.942-5.463-1.037-5.878-.415-11.687,1.314-20.332.346-1.66,1.452-4.5-2.075-5.048-1.106-.138-.553.415-.83,1.867C47.66,17.32,42.4,21.954,37.149,25.066,36.6,17.735,36.8,9.505,38.186,4.526c1.176-4.219,2.559-3.458.83-4.357s-3.734.277-5.325,3.458S24.839,23.89,13.221,35.439C7.273,41.317,1.879,38.274.842,37.375c-.9-.761-1.176.415-.138,1.591,4.772,5.256,11.826,2.282,14.384-.277,7.054-7.054,15.283-22.268,18.6-28.7a98.251,98.251,0,0,0,.277,16.874,50.129,50.129,0,0,1-8.3,3.181c-1.66.415-2.7,1.106-2.7,1.867s1.106,1.521,2.7,2.282c2.835,1.383,11.2,5.256,13.209,6.5,1.729,1.037,2.628.207,3.112-.9.692-1.452-1.176-2.282-2.974-2.766a60.545,60.545,0,0,1-1.66-9.267c4.219-2.628,8.437-6.086,10.788-10.443C47.522,20.916,46,33.3,49.873,38.482a5.451,5.451,0,0,0,4.564,2.213c.968-.069,1.383-.692,1.245-.83' transform='translate(-0.038 0.124)'/%3E%3C/g%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n background-size: contain;\n background-position: center center; }\n @media screen and (max-width: 767px) {\n a.microsite-link .image-desktop-tablet {\n display: none; } }\n @media screen and (min-width: 768px) and (max-width: 1199px) {\n a.microsite-link .image-mobile {\n display: none; } }\n @media screen and (min-width: 1200px) {\n a.microsite-link .image-mobile {\n display: none; } }\n @media screen and (max-width: 767px) {\n a.microsite-link .image-mobile {\n width: 34px;\n height: 34px;\n display: inline-block;\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='16' height='16' viewBox='0 0 16 16'%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill:none;%7D.b%7Bfill:%2300aad2;%7D.c%7Bclip-path:url(%23a);%7D.d%7Bfill:%23fff;%7D%3C/style%3E%3CclipPath id='a'%3E%3Crect class='a' width='14' height='14' transform='translate(-0.345 -0.21)'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg transform='translate(0 -0.135)'%3E%3Ccircle class='b' cx='8' cy='8' r='8' transform='translate(0 0.135)'/%3E%3Cg transform='translate(1.345 1.344)'%3E%3Cg class='c' transform='translate(0 0)'%3E%3Cpath class='d' d='M12.612,13.636a16.24,16.24,0,0,1-1.86-.822,13.436,13.436,0,0,0,1.6-.708,11.312,11.312,0,0,0,.264,1.53M16.032,7.3c-.266-.034-.128.091-.2.442a5.465,5.465,0,0,1-2.8,3.338,16.141,16.141,0,0,1,.249-4.84c.275-1,.6-.813.2-1.022-.427-.22-.887.071-1.258.813A27.247,27.247,0,0,1,7.4,13.522a2.141,2.141,0,0,1-2.918.461c-.206-.174-.282.095-.026.37a2.412,2.412,0,0,0,3.387-.082A32.715,32.715,0,0,0,12.219,7.51a23.541,23.541,0,0,0,.063,3.971,11.464,11.464,0,0,1-1.964.749c-.388.1-.628.26-.635.439-.007.2.253.363.63.541.67.318,2.633,1.246,3.117,1.527.414.24.616.053.739-.207.16-.338-.279-.533-.7-.661a13.175,13.175,0,0,1-.382-2.179,7.143,7.143,0,0,0,2.547-2.454,4.7,4.7,0,0,0,.4-1.133,2.125,2.125,0,0,0,.048-.742s-.007-.054-.048-.059' transform='translate(-3.51 -3.943)'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n background-size: contain;\n background-position: center center; } }\n a.microsite-link .name {\n margin-left: 8px;\n font-size: 16px;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis; }\n @media screen and (min-width: 1200px) {\n a.microsite-link .name {\n margin-left: 28px; } }\n @media screen and (min-width: 768px) and (max-width: 1199px) {\n a.microsite-link .name {\n margin-left: 28px; } }\n";
|
|
1431
|
+
styleInject(css_248z$7);
|
|
1432
|
+
|
|
1430
1433
|
/* eslint-disable-next-line */
|
|
1431
1434
|
|
|
1432
1435
|
var MicrositeLogo = function MicrositeLogo(props) {
|
|
@@ -1472,8 +1475,8 @@ var GoAHeader = function GoAHeader(props) {
|
|
|
1472
1475
|
}), /*#__PURE__*/React.createElement("div", null, props.children)));
|
|
1473
1476
|
};
|
|
1474
1477
|
|
|
1475
|
-
var css_248z$
|
|
1476
|
-
styleInject(css_248z$
|
|
1478
|
+
var css_248z$8 = ".goa-hero-banner-content {\n font-size: 24px;\n line-height: 32px;\n margin: 0;\n color: #fff; }\n @media screen and (min-width: 768px) and (max-width: 1199px) {\n .goa-hero-banner-content {\n width: 80%; } }\n @media screen and (min-width: 1200px) {\n .goa-hero-banner-content {\n width: 40%; } }\n .goa-hero-banner-content:last-of-type {\n margin-bottom: 28px; }\n";
|
|
1479
|
+
styleInject(css_248z$8);
|
|
1477
1480
|
|
|
1478
1481
|
var GoAHeroBannerContent = function GoAHeroBannerContent(_ref) {
|
|
1479
1482
|
var content = _ref.content,
|
|
@@ -1484,8 +1487,8 @@ var GoAHeroBannerContent = function GoAHeroBannerContent(_ref) {
|
|
|
1484
1487
|
}, children || content);
|
|
1485
1488
|
};
|
|
1486
1489
|
|
|
1487
|
-
var css_248z$
|
|
1488
|
-
styleInject(css_248z$
|
|
1490
|
+
var css_248z$9 = "/* Palette */\n/* Semantic usages */\n/* Palette */\n/* Semantic usages */\n/* Common button colors */\n/* Primary colors */\n/* Secondary colors */\n/* Tertiary colors */\n/* This style is from the alberta design system */\n/* This style is from the alberta design system */\n.goa-link-button.goa-link-button {\n display: inline-block;\n text-decoration: none; }\n .goa-link-button.goa-link-button {\n box-sizing: border-box;\n min-width: 70px;\n padding: 12px;\n border: 2px solid #0070c4;\n border-radius: 4px;\n background: #0070c4;\n cursor: pointer;\n color: #fff;\n font-size: 18px;\n font-weight: 700;\n line-height: 1em; }\n .goa-link-button.goa-link-button.btn-small {\n font-size: 16px;\n padding: 8px;\n margin: 12px 12px 0 0; }\n .goa-link-button.goa-link-button:last-of-type {\n margin-right: 0; }\n .goa-link-button.goa-link-button:disabled, .goa-link-button.goa-link-button:disabled.goa--secondary, .goa-link-button.goa-link-button:disabled.goa--tertiary {\n pointer-events: none;\n color: #666;\n background-color: #f1f1f1;\n border-color: #f1f1f1; }\n .goa-link-button.goa-link-button:hover {\n border-color: #004f84;\n background: #004f84; }\n .goa-link-button.goa-link-button:focus, .goa-link-button.goa-link-button:active {\n border-color: #004f84;\n box-shadow: 0 0 0 3px #feba35;\n background: #004f84;\n outline: none; }\n .goa-link-button.goa-link-button.goa--secondary {\n border: 2px solid #0070c4;\n background: #fff;\n color: #0070c4; }\n .goa-link-button.goa-link-button.goa--secondary:hover {\n border-color: #004f84;\n background: #fff;\n color: #004f84; }\n .goa-link-button.goa-link-button.goa--secondary:focus, .goa-link-button.goa-link-button.goa--secondary:active {\n color: #004f84;\n background-color: #fff;\n border: 2px solid #004f84;\n box-shadow: 0 0 0 3px #feba35;\n outline: none; }\n .goa-link-button.goa-link-button.goa--tertiary {\n border-color: #dcdcdc;\n background: #fff;\n color: #0070c4; }\n .goa-link-button.goa-link-button.goa--tertiary:hover {\n background: #fff;\n color: #004f84; }\n .goa-link-button.goa-link-button.goa--tertiary:focus, .goa-link-button.goa-link-button.goa--tertiary:active {\n border: 2px solid #004f84;\n color: #004f84;\n background-color: #fff;\n box-shadow: 0 0 0 3px #feba35;\n outline: none; }\n .goa-link-button.goa-link-button.right-arrow::after {\n color: #fff;\n margin-left: 8px;\n content: '\\2192'; }\n .goa-link-button.goa-link-button.up-arrow::after {\n color: #fff;\n margin-left: 8px;\n content: '\\2191'; }\n .goa-link-button.goa-link-button:visited, .goa-link-button.goa-link-button:link {\n color: #fff; }\n";
|
|
1491
|
+
styleInject(css_248z$9);
|
|
1489
1492
|
|
|
1490
1493
|
var GoAHeroBannerLink = function GoAHeroBannerLink(_ref) {
|
|
1491
1494
|
var linkText = _ref.linkText,
|
|
@@ -1497,8 +1500,8 @@ var GoAHeroBannerLink = function GoAHeroBannerLink(_ref) {
|
|
|
1497
1500
|
}, linkText)) : /*#__PURE__*/React.createElement(Fragment$1, null);
|
|
1498
1501
|
};
|
|
1499
1502
|
|
|
1500
|
-
var css_248z$
|
|
1501
|
-
styleInject(css_248z$
|
|
1503
|
+
var css_248z$a = "/* Palette */\n/* Semantic usages */\n.goa-hero {\n box-sizing: border-box;\n display: flex;\n justify-content: flex-end;\n align-items: stretch;\n flex-direction: column;\n height: 600px;\n border-bottom: 8px solid #0081a2;\n color: #fff;\n background-position: center center;\n width: 100%;\n padding: 56px 28px; }\n .goa-hero h1 {\n margin: 0 0 28px;\n padding: 0;\n font-size: 48px;\n line-height: 56px;\n font-weight: 700;\n color: #fff; }\n";
|
|
1504
|
+
styleInject(css_248z$a);
|
|
1502
1505
|
|
|
1503
1506
|
var GoAHeroBanner = function GoAHeroBanner(_ref) {
|
|
1504
1507
|
var title = _ref.title,
|
|
@@ -1528,12 +1531,12 @@ GoAHeroBanner.defaultProps = {
|
|
|
1528
1531
|
linkUrl: ''
|
|
1529
1532
|
};
|
|
1530
1533
|
|
|
1531
|
-
var css_248z$
|
|
1532
|
-
styleInject(css_248z$a);
|
|
1533
|
-
|
|
1534
|
-
var css_248z$b = ".goa-icon {\n display: flex;\n}\n\n.goa-icon svg {\n color: #666;\n fill: #666;\n width: 100%;\n height: 100%;\n}\n\n.goa-icon-button {\n cursor: pointer;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n}\n\n/* GoA */\n.goa-icon-button-goa {\n padding: 0.25rem;\n border: 2px solid var(--color-button-tertiary);\n border-radius: 0.5rem;\n color: var(--color-primary);\n fill: var(--color-primary);\n}\n\n.goa-icon-button-goa:hover {\n background-color: var(--color-button-tertiary);\n}\n\n/* Simple */\n.goa-icon-button-simple {\n padding: 0.4rem;\n border-radius: 999px;\n transition: background 200ms ease-in;\n}\n\n.goa-icon-button-simple:hover {\n background: rgba(0, 0, 0, 0.1);\n}\n";
|
|
1534
|
+
var css_248z$b = "/* Palette */\n/* Semantic usages */\n.goa-badge-icon {\n font-size: 14px; }\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: 2px; }\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 = ".goa-icon {\n display: flex;\n}\n\n.goa-icon svg {\n color: #666;\n fill: #666;\n width: 100%;\n height: 100%;\n}\n\n.goa-icon-button {\n cursor: pointer;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n}\n\n/* GoA */\n.goa-icon-button-goa {\n padding: 0.25rem;\n border: 2px solid var(--color-button-tertiary);\n border-radius: 0.5rem;\n color: var(--color-primary);\n fill: var(--color-primary);\n}\n\n.goa-icon-button-goa:hover {\n background-color: var(--color-button-tertiary);\n}\n\n/* Simple */\n.goa-icon-button-simple {\n padding: 0.4rem;\n border-radius: 999px;\n transition: background 200ms ease-in;\n}\n\n.goa-icon-button-simple:hover {\n background: rgba(0, 0, 0, 0.1);\n}\n";
|
|
1538
|
+
styleInject(css_248z$c);
|
|
1539
|
+
|
|
1537
1540
|
var Icons = {
|
|
1538
1541
|
barChart: /*#__PURE__*/React.createElement("svg", {
|
|
1539
1542
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -2058,15 +2061,15 @@ function getSize(size) {
|
|
|
2058
2061
|
}
|
|
2059
2062
|
}
|
|
2060
2063
|
|
|
2061
|
-
var css_248z$
|
|
2062
|
-
styleInject(css_248z$c);
|
|
2063
|
-
|
|
2064
|
-
var css_248z$d = ":root {\n /* font-size */\n --fs-xs: 0.75rem;\n --fs-sm: 0.875rem;\n --fs-base: 1.125rem;\n /* base */\n --fs-lg: 1.25rem;\n /* h4 */\n --fs-xl: 1.5rem;\n /* h3 */\n --fs-2xl: 2.25rem;\n /* h2 */\n --fs-3xl: 3rem;\n /* h1 */\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 --input-padding: 0.5rem;\n --input-border-radius: 0.25rem;\n --input-font-size: calc(18px / 16)rem; }\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-orange: #feba35;\n --color-red: red;\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-l1);\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.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-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";
|
|
2064
|
+
var css_248z$d = ":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 --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-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.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: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 svg {\n width: 80%; }\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";
|
|
2065
2065
|
styleInject(css_248z$d);
|
|
2066
2066
|
|
|
2067
|
-
var css_248z$e = ".
|
|
2067
|
+
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 --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-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.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-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";
|
|
2068
2068
|
styleInject(css_248z$e);
|
|
2069
2069
|
|
|
2070
|
+
var css_248z$f = ".goa-scrollable {\n overflow: hidden;\n height: 100%;\n}\n\n.goa-scrollable > div::-webkit-scrollbar {\n width: 6px;\n}\n\n.goa-scrollable > div::-webkit-scrollbar-track {\n background: #f1f1f1;\n}\n\n.goa-scrollable > div::-webkit-scrollbar-thumb {\n background: #888;\n}\n\n.goa-scrollable > div::-webkit-scrollbar-thumb:hover {\n background: #555;\n}\n";
|
|
2071
|
+
styleInject(css_248z$f);
|
|
2072
|
+
|
|
2070
2073
|
var GoAScrollable = function GoAScrollable(_ref) {
|
|
2071
2074
|
var vertical = _ref.vertical,
|
|
2072
2075
|
horizontal = _ref.horizontal,
|
|
@@ -2089,18 +2092,18 @@ var GoAScrollable = function GoAScrollable(_ref) {
|
|
|
2089
2092
|
}, children));
|
|
2090
2093
|
};
|
|
2091
2094
|
|
|
2092
|
-
var css_248z$
|
|
2093
|
-
styleInject(css_248z$f);
|
|
2094
|
-
|
|
2095
|
-
var css_248z$g = "/* Root ============================================================================== */\n\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}\n\n/* Modal ============================================================================== */\n\n.modal {\n position: relative;\n background: #fff;\n z-index: 1002;\n box-shadow: 6px 6px 6px rgba(0, 0, 0, 0.2);\n border-radius: 4px;\n}\n\n@media (max-width: 639px) {\n .modal {\n width: 90%;\n max-height: 90%;\n }\n}\n\n@media (min-width: 640px) {\n .modal {\n margin: 1rem;\n max-height: 80%;\n width: 600px;\n }\n}\n@media (min-width: 1024px) {\n .modal {\n width: 65ch;\n }\n}\n\n/* Modal Content ============================================================================== */\n\n.modal-content {\n display: flex;\n flex-direction: column;\n height: 100%;\n}\n\n/* Modal Actions ============================================================================== */\n\n.modal-actions {\n text-align: right;\n margin: 1.5rem;\n}\n\n@media (max-width: 639px) {\n .modal-actions button + button {\n margin-top: 0.5rem;\n }\n .modal-actions button {\n display: block;\n width: 100%;\n }\n}\n\n@media (min-width: 640px) {\n .modal-actions > button {\n margin-right: 0;\n }\n .modal-actions > button + button {\n margin-left: 0.5rem;\n }\n}\n\n/* Modal Title ============================================================================ */\n\n.modal-title {\n font-size: var(--fs-xl);\n padding: 1rem 1.5rem;\n margin-right: 40px; /* close icon spacing */\n}\n\n/* Modal Background ======================================================================= */\n\n.modal-background {\n position: fixed;\n inset: 0;\n background: rgba(0, 0, 0, 0.5);\n z-index: 1001;\n}\n\n/* Modal Close Icon ======================================================================= */\n\n.modal-close {\n position: absolute;\n top: 0.5rem;\n right: 0.5rem;\n}\n";
|
|
2095
|
+
var css_248z$g = "/* 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\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\n/* ======= Slide in/out Up */\n\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\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\n/* ======= Slide in/out Down */\n\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\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\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\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\n/* ======= Slide in/out Right */\n\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\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}\n";
|
|
2096
2096
|
styleInject(css_248z$g);
|
|
2097
2097
|
|
|
2098
|
-
var css_248z$h = "/*
|
|
2098
|
+
var css_248z$h = "/* Root ============================================================================== */\n\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}\n\n/* Modal ============================================================================== */\n\n.modal {\n position: relative;\n background: #fff;\n z-index: 1002;\n box-shadow: 6px 6px 6px rgba(0, 0, 0, 0.2);\n border-radius: 4px;\n}\n\n@media (max-width: 639px) {\n .modal {\n width: 90%;\n max-height: 90%;\n }\n}\n\n@media (min-width: 640px) {\n .modal {\n margin: 1rem;\n max-height: 80%;\n width: 600px;\n }\n}\n@media (min-width: 1024px) {\n .modal {\n width: 65ch;\n }\n}\n\n/* Modal Content ============================================================================== */\n\n.modal-content {\n display: flex;\n flex-direction: column;\n height: 100%;\n}\n\n/* Modal Actions ============================================================================== */\n\n.modal-actions {\n text-align: right;\n margin: 1.5rem;\n}\n\n@media (max-width: 639px) {\n .modal-actions button + button {\n margin-top: 0.5rem;\n }\n .modal-actions button {\n display: block;\n width: 100%;\n }\n}\n\n@media (min-width: 640px) {\n .modal-actions > button {\n margin-right: 0;\n }\n .modal-actions > button + button {\n margin-left: 0.5rem;\n }\n}\n\n/* Modal Title ============================================================================ */\n\n.modal-title {\n font-size: var(--fs-xl);\n padding: 1rem 1.5rem;\n margin-right: 40px; /* close icon spacing */\n}\n\n/* Modal Background ======================================================================= */\n\n.modal-background {\n position: fixed;\n inset: 0;\n background: rgba(0, 0, 0, 0.5);\n z-index: 1001;\n}\n\n/* Modal Close Icon ======================================================================= */\n\n.modal-close {\n position: absolute;\n top: 0.5rem;\n right: 0.5rem;\n}\n";
|
|
2099
2099
|
styleInject(css_248z$h);
|
|
2100
2100
|
|
|
2101
|
-
var css_248z$i = ":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-orange: #feba35;\n --color-red:
|
|
2101
|
+
var css_248z$i = ":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-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 --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";
|
|
2102
2102
|
styleInject(css_248z$i);
|
|
2103
2103
|
|
|
2104
|
+
var css_248z$j = ":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-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 --input-padding: 0.5rem;\n --input-border-radius: 0.25rem;\n --input-font-size: var(--fs-base); }\n\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 2px 8px 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\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";
|
|
2105
|
+
styleInject(css_248z$j);
|
|
2106
|
+
|
|
2104
2107
|
var GoADropdownOption = function GoADropdownOption(props) {
|
|
2105
2108
|
var onClick = function onClick() {
|
|
2106
2109
|
if (!props.disabled) {
|
|
@@ -2116,7 +2119,11 @@ var GoADropdownOption = function GoADropdownOption(props) {
|
|
|
2116
2119
|
};
|
|
2117
2120
|
|
|
2118
2121
|
var MAX_HEIGHT = 300;
|
|
2119
|
-
var GoADropdown = function GoADropdown(
|
|
2122
|
+
var GoADropdown = function GoADropdown(_ref) {
|
|
2123
|
+
var _ref$selectedValues = _ref.selectedValues,
|
|
2124
|
+
selectedValues = _ref$selectedValues === void 0 ? [] : _ref$selectedValues,
|
|
2125
|
+
props = _objectWithoutProperties(_ref, ["selectedValues"]);
|
|
2126
|
+
|
|
2120
2127
|
var _useState = useState(false),
|
|
2121
2128
|
_useState2 = _slicedToArray(_useState, 2),
|
|
2122
2129
|
isMenuVisible = _useState2[0],
|
|
@@ -2141,7 +2148,7 @@ var GoADropdown = function GoADropdown(props) {
|
|
|
2141
2148
|
if (child.props.value) {
|
|
2142
2149
|
return React.cloneElement(child, _objectSpread2(_objectSpread2({}, child.props), {}, {
|
|
2143
2150
|
onClick: handleSelection,
|
|
2144
|
-
selected:
|
|
2151
|
+
selected: selectedValues.includes(child.props.value),
|
|
2145
2152
|
_testId: "".concat(props.name, "-dropdown-option--").concat(child.props.value)
|
|
2146
2153
|
}));
|
|
2147
2154
|
}
|
|
@@ -2158,12 +2165,12 @@ var GoADropdown = function GoADropdown(props) {
|
|
|
2158
2165
|
var values;
|
|
2159
2166
|
|
|
2160
2167
|
if (props.multiSelect) {
|
|
2161
|
-
if (
|
|
2162
|
-
values =
|
|
2168
|
+
if (selectedValues.includes(value)) {
|
|
2169
|
+
values = selectedValues.filter(function (v) {
|
|
2163
2170
|
return v !== value;
|
|
2164
2171
|
});
|
|
2165
2172
|
} else {
|
|
2166
|
-
values = [].concat(_toConsumableArray(
|
|
2173
|
+
values = [].concat(_toConsumableArray(selectedValues), [value]);
|
|
2167
2174
|
}
|
|
2168
2175
|
} else {
|
|
2169
2176
|
values = [value];
|
|
@@ -2197,7 +2204,7 @@ var GoADropdown = function GoADropdown(props) {
|
|
|
2197
2204
|
var selectedLabels = React.Children.map(props.children, function (child) {
|
|
2198
2205
|
return child;
|
|
2199
2206
|
}).filter(function (child) {
|
|
2200
|
-
return
|
|
2207
|
+
return selectedValues.includes(child.props.value);
|
|
2201
2208
|
}).map(function (child) {
|
|
2202
2209
|
return child.props.label;
|
|
2203
2210
|
});
|
|
@@ -2245,19 +2252,14 @@ var GoADropdown = function GoADropdown(props) {
|
|
|
2245
2252
|
}, bindChildren())));
|
|
2246
2253
|
};
|
|
2247
2254
|
|
|
2248
|
-
var css_248z$
|
|
2249
|
-
styleInject(css_248z$
|
|
2250
|
-
|
|
2251
|
-
var GoARadio = function GoARadio(_ref) {
|
|
2252
|
-
var _ref$state = _ref.state,
|
|
2253
|
-
state = _ref$state === void 0 ? 'valid' : _ref$state,
|
|
2254
|
-
props = _objectWithoutProperties(_ref, ["state"]);
|
|
2255
|
+
var css_248z$k = ":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-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;\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\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 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";
|
|
2256
|
+
styleInject(css_248z$k);
|
|
2255
2257
|
|
|
2258
|
+
var GoARadio = function GoARadio(props) {
|
|
2256
2259
|
function getCss() {
|
|
2257
2260
|
return classnames({
|
|
2258
2261
|
'goa-radio': true,
|
|
2259
|
-
'goa-radio--disabled': props.disabled
|
|
2260
|
-
'goa-error': state === 'error'
|
|
2262
|
+
'goa-radio--disabled': props.disabled
|
|
2261
2263
|
});
|
|
2262
2264
|
}
|
|
2263
2265
|
|
|
@@ -2278,22 +2280,32 @@ var GoARadio = function GoARadio(_ref) {
|
|
|
2278
2280
|
className: "goa-radio-icon"
|
|
2279
2281
|
}), /*#__PURE__*/React.createElement("span", {
|
|
2280
2282
|
className: "goa-radio-label"
|
|
2281
|
-
}, props.children));
|
|
2283
|
+
}, props.children || props.label));
|
|
2282
2284
|
};
|
|
2283
2285
|
|
|
2284
2286
|
var GoARadioGroup = function GoARadioGroup(_ref) {
|
|
2285
|
-
var
|
|
2287
|
+
var name = _ref.name,
|
|
2286
2288
|
value = _ref.value,
|
|
2287
2289
|
children = _ref.children,
|
|
2288
|
-
orientation = _ref.orientation,
|
|
2289
|
-
|
|
2290
|
+
_ref$orientation = _ref.orientation,
|
|
2291
|
+
orientation = _ref$orientation === void 0 ? 'vertical' : _ref$orientation,
|
|
2292
|
+
onChange = _ref.onChange,
|
|
2293
|
+
childAttrs = _objectWithoutProperties(_ref, ["name", "value", "children", "orientation", "onChange"]);
|
|
2294
|
+
|
|
2295
|
+
function onChangeHandler(value) {
|
|
2296
|
+
onChange(name, value);
|
|
2297
|
+
}
|
|
2290
2298
|
|
|
2291
2299
|
function getChildren() {
|
|
2292
2300
|
return Children.map(children, function (child) {
|
|
2293
|
-
var key = "".concat(
|
|
2301
|
+
var key = "".concat(name, "-").concat(child.props.value);
|
|
2302
|
+
|
|
2303
|
+
var _name = "".concat(name, "-").concat(Date.now());
|
|
2304
|
+
|
|
2294
2305
|
return React.cloneElement(child, _objectSpread2(_objectSpread2({}, childAttrs), {}, {
|
|
2306
|
+
name: _name,
|
|
2295
2307
|
checked: child.props.value === value,
|
|
2296
|
-
onChange:
|
|
2308
|
+
onChange: onChangeHandler,
|
|
2297
2309
|
key: key
|
|
2298
2310
|
}));
|
|
2299
2311
|
});
|
|
@@ -2304,8 +2316,8 @@ var GoARadioGroup = function GoARadioGroup(_ref) {
|
|
|
2304
2316
|
}, getChildren()));
|
|
2305
2317
|
};
|
|
2306
2318
|
|
|
2307
|
-
var css_248z$
|
|
2308
|
-
styleInject(css_248z$
|
|
2319
|
+
var css_248z$l = "@use '../variables/main.css';\n/* Palette */\n/* Semantic usages */\n@-webkit-keyframes pulse {\n 0% {\n opacity: 0.5; }\n 50% {\n opacity: 1; }\n 100% {\n opacity: 0.5; } }\n@keyframes pulse {\n 0% {\n opacity: 0.5; }\n 50% {\n opacity: 1; }\n 100% {\n opacity: 0.5; } }\n\n[data-skeleton] {\n pointer-events: none;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none; }\n [data-skeleton] * {\n border-color: #ddd !important;\n color: transparent !important; }\n [data-skeleton] p,\n [data-skeleton] a {\n background-color: #ddd !important;\n -webkit-animation: pulse 2s infinite ease-in-out;\n animation: pulse 2s infinite ease-in-out;\n display: inline;\n line-height: 0 !important;\n font-size: 50% !important; }\n [data-skeleton] p::after,\n [data-skeleton] a::after {\n content: '' !important;\n display: block !important;\n margin-bottom: 1rem !important;\n background-size: contain; }\n [data-skeleton] h1,\n [data-skeleton] h2,\n [data-skeleton] h3,\n [data-skeleton] h4,\n [data-skeleton] h5,\n [data-skeleton] h6 {\n background-color: #ddd !important;\n -webkit-animation: pulse 2s infinite ease-in-out;\n animation: pulse 2s infinite ease-in-out;\n margin-bottom: 1rem; }\n [data-skeleton] h1 {\n height: calc(0.6 * var(--fs-3xl)) !important; }\n [data-skeleton] h2 {\n height: calc(0.6 * var(--fs-2xl)) !important; }\n [data-skeleton] h3 {\n height: calc(0.6 * var(--fs-xl)) !important; }\n [data-skeleton] h4 {\n height: calc(0.6 * var(--fs-lg)) !important; }\n [data-skeleton] img {\n background-color: #ddd !important;\n -webkit-animation: pulse 2s infinite ease-in-out;\n animation: pulse 2s infinite ease-in-out; }\n\n/* basic styles */\n.skeleton {\n background-color: #ddd !important;\n -webkit-animation: pulse 2s infinite ease-in-out;\n animation: pulse 2s infinite ease-in-out;\n background: #dcdcdc;\n overflow: hidden;\n margin: 10px 0; }\n\n.skeleton.text {\n width: 100%;\n height: 12px;\n border-radius: 4px; }\n\n.skeleton.paragraph {\n width: 100%;\n height: 70px;\n border-radius: 4px; }\n\n.skeleton.title {\n width: 50%;\n height: 20px;\n margin-bottom: 15px;\n border-radius: 4px; }\n\n.skeleton.avatar {\n width: 100px;\n height: 100px;\n border-radius: 50%; }\n\n.skeleton.thumbnail {\n width: 100px;\n height: 100px;\n border-radius: 4px; }\n\n/* skeleton image text */\n.skeleton-image-content {\n display: flex;\n flex-direction: row;\n gap: 30px; }\n\n.skeleton-image-content__text {\n flex: 1 1 auto; }\n\n/* skeleton content */\n.skeleton-content {\n display: grid;\n grid-template-columns: 1fr;\n gap: 30px;\n align-items: left; }\n";
|
|
2320
|
+
styleInject(css_248z$l);
|
|
2309
2321
|
|
|
2310
2322
|
var GoASkeletonElement = function GoASkeletonElement(_ref) {
|
|
2311
2323
|
var _ref$type = _ref.type,
|
|
@@ -2372,8 +2384,8 @@ var GoASkeletonImageContent = function GoASkeletonImageContent(_ref) {
|
|
|
2372
2384
|
}), elements));
|
|
2373
2385
|
};
|
|
2374
2386
|
|
|
2375
|
-
var css_248z$
|
|
2376
|
-
styleInject(css_248z$
|
|
2387
|
+
var css_248z$m = "/* Palette */\n/* Semantic usages */\n@use '../variables/main.css';\n/* Palette */\n/* Semantic usages */\n@-webkit-keyframes pulse {\n 0% {\n opacity: 0.5; }\n 50% {\n opacity: 1; }\n 100% {\n opacity: 0.5; } }\n@keyframes pulse {\n 0% {\n opacity: 0.5; }\n 50% {\n opacity: 1; }\n 100% {\n opacity: 0.5; } }\n\n[data-skeleton] {\n pointer-events: none;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none; }\n [data-skeleton] * {\n border-color: #ddd !important;\n color: transparent !important; }\n [data-skeleton] p,\n [data-skeleton] a {\n background-color: #ddd !important;\n -webkit-animation: pulse 2s infinite ease-in-out;\n animation: pulse 2s infinite ease-in-out;\n display: inline;\n line-height: 0 !important;\n font-size: 50% !important; }\n [data-skeleton] p::after,\n [data-skeleton] a::after {\n content: '' !important;\n display: block !important;\n margin-bottom: 1rem !important;\n background-size: contain; }\n [data-skeleton] h1,\n [data-skeleton] h2,\n [data-skeleton] h3,\n [data-skeleton] h4,\n [data-skeleton] h5,\n [data-skeleton] h6 {\n background-color: #ddd !important;\n -webkit-animation: pulse 2s infinite ease-in-out;\n animation: pulse 2s infinite ease-in-out;\n margin-bottom: 1rem; }\n [data-skeleton] h1 {\n height: calc(0.6 * var(--fs-3xl)) !important; }\n [data-skeleton] h2 {\n height: calc(0.6 * var(--fs-2xl)) !important; }\n [data-skeleton] h3 {\n height: calc(0.6 * var(--fs-xl)) !important; }\n [data-skeleton] h4 {\n height: calc(0.6 * var(--fs-lg)) !important; }\n [data-skeleton] img {\n background-color: #ddd !important;\n -webkit-animation: pulse 2s infinite ease-in-out;\n animation: pulse 2s infinite ease-in-out; }\n\n/* basic styles */\n.skeleton {\n background-color: #ddd !important;\n -webkit-animation: pulse 2s infinite ease-in-out;\n animation: pulse 2s infinite ease-in-out;\n background: #dcdcdc;\n overflow: hidden;\n margin: 10px 0; }\n\n.skeleton.text {\n width: 100%;\n height: 12px;\n border-radius: 4px; }\n\n.skeleton.paragraph {\n width: 100%;\n height: 70px;\n border-radius: 4px; }\n\n.skeleton.title {\n width: 50%;\n height: 20px;\n margin-bottom: 15px;\n border-radius: 4px; }\n\n.skeleton.avatar {\n width: 100px;\n height: 100px;\n border-radius: 50%; }\n\n.skeleton.thumbnail {\n width: 100px;\n height: 100px;\n border-radius: 4px; }\n\n/* skeleton image text */\n.skeleton-image-content {\n display: flex;\n flex-direction: row;\n gap: 30px; }\n\n.skeleton-image-content__text {\n flex: 1 1 auto; }\n\n/* skeleton content */\n.skeleton-content {\n display: grid;\n grid-template-columns: 1fr;\n gap: 30px;\n align-items: left; }\n\n.goa-card {\n box-sizing: border-box;\n background: #fff;\n border: 1px solid #dcdcdc;\n transition: opacity 300ms ease-in-out;\n /* size variants ***/ }\n .goa-card .card-content {\n padding: 28px;\n border-top: 8px solid #0081a2; }\n .goa-card .card-content .goa-title,\n .goa-card .card-content .goa-text,\n .goa-card .card-content .goa-content {\n margin-bottom: 28px; }\n .goa-card .card-content .goa-text {\n color: #333;\n font-size: var(--fs-base);\n line-height: 28px; }\n .goa-card .card-content .goa-footer {\n font-size: var(--fs-base); }\n .goa-card .card-content .goa-title {\n font-size: var(--fs-xl);\n font-weight: 400;\n line-height: 32px; }\n .goa-card .goa-poster {\n position: relative;\n display: block;\n padding: 56.25% 0 0;\n overflow: hidden;\n background: #e5e5e5; }\n .goa-card .goa-poster:empty {\n display: none; }\n .goa-card .goa-poster img,\n .goa-card .goa-poster iframe {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n border: none; }\n .goa-card .goa-poster-image img {\n display: block;\n width: 100%;\n -o-object-fit: cover;\n object-fit: cover; }\n .goa-card.card-auto {\n width: auto; }\n .goa-card.card-auto .card {\n flex-basis: auto;\n width: auto; }\n .goa-card a:hover {\n color: #004f84;\n text-decoration: none; }\n .goa-card a:focus {\n outline: 3px solid #feba35;\n outline-offset: 0; }\n\n.goa-card[data-skeleton] .goa-poster-image {\n background-color: #ddd !important;\n -webkit-animation: pulse 2s infinite ease-in-out;\n animation: pulse 2s infinite ease-in-out;\n padding-bottom: 56.25%; }\n .goa-card[data-skeleton] .goa-poster-image img {\n display: none; }\n\n.goa-card[data-skeleton] .goa-title {\n margin-bottom: 1rem; }\n\n.goa-card[data-skeleton] .goa-footer {\n background-color: #ddd !important;\n -webkit-animation: pulse 2s infinite ease-in-out;\n animation: pulse 2s infinite ease-in-out;\n max-height: 1rem; }\n";
|
|
2388
|
+
styleInject(css_248z$m);
|
|
2377
2389
|
|
|
2378
2390
|
var GoACard = function GoACard(_ref) {
|
|
2379
2391
|
var title = _ref.title,
|
|
@@ -2428,8 +2440,8 @@ var GoACard = function GoACard(_ref) {
|
|
|
2428
2440
|
}, children)));
|
|
2429
2441
|
};
|
|
2430
2442
|
|
|
2431
|
-
var css_248z$
|
|
2432
|
-
styleInject(css_248z$
|
|
2443
|
+
var css_248z$n = "/* Palette */\n/* Semantic usages */\n.goa-card-group {\n margin-top: 14px;\n vertical-align: top; }\n .goa-card-group .card-group-title {\n font-size: 24px;\n font-weight: bold;\n color: #333; }\n .goa-card-group .card-group-basic {\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n align-items: stretch; }\n .goa-card-group .card-group-basic > div {\n margin: 14px 10px; }\n .goa-card-group .card-group-basic-vue > div {\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n align-items: stretch; }\n .goa-card-group .card-group-basic-vue > div > div {\n margin: 14px 10px; }\n .goa-card-group .card-group-column {\n display: inline-block;\n flex-direction: column;\n -moz-column-count: 3;\n column-count: 3;\n flex-wrap: wrap;\n align-items: stretch; }\n .goa-card-group .card-group-column > div {\n margin: 14px; }\n .goa-card-group .card-group-column-vue > div {\n display: inline-block;\n flex-direction: column;\n -moz-column-count: 3;\n column-count: 3;\n flex-wrap: wrap;\n align-items: stretch; }\n .goa-card-group .card-group-column > div > div {\n margin: 14px; }\n";
|
|
2444
|
+
styleInject(css_248z$n);
|
|
2433
2445
|
|
|
2434
2446
|
var GoACardGroup = function GoACardGroup(_ref) {
|
|
2435
2447
|
var _ref$title = _ref.title,
|
|
@@ -2462,8 +2474,8 @@ var GoACardGroup = function GoACardGroup(_ref) {
|
|
|
2462
2474
|
}, getCards()));
|
|
2463
2475
|
};
|
|
2464
2476
|
|
|
2465
|
-
var css_248z$
|
|
2466
|
-
styleInject(css_248z$
|
|
2477
|
+
var css_248z$o = "/* Palette */\n/* Semantic usages */\n.goa-checkbox input[type='checkbox'] {\n border: 0;\n clip: rect(0 0 0 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n width: 1px;\n outline: 0;\n -webkit-appearance: none; }\n\n.goa-checkbox .goa-checkbox-label {\n z-index: 2;\n box-sizing: border-box;\n margin: 0;\n padding: 0 0 0 8px;\n cursor: pointer;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n height: 46px;\n display: flex;\n align-items: center; }\n\n.goa-checkbox.goa-checkbox-disabled {\n opacity: 30%; }\n .goa-checkbox.goa-checkbox-disabled .goa-checkbox-label {\n cursor: default; }\n\n.goa-checkbox.has-error .goa-checkbox-container {\n border: solid 2px #fc1921;\n color: #fc1921; }\n .goa-checkbox.has-error .goa-checkbox-container svg {\n fill: #fc1921; }\n\n.goa-checkbox .goa-checkbox-container {\n box-sizing: border-box;\n border: 1px solid #666;\n border-radius: 2px;\n height: 24px;\n line-height: 24px;\n width: 24px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n padding: 3px; }\n .goa-checkbox .goa-checkbox-container svg {\n display: none;\n flex: 1 1 auto;\n fill: #fff; }\n .goa-checkbox .goa-checkbox-container.goa-checkbox-selected {\n background-color: #0070c4; }\n .goa-checkbox .goa-checkbox-container.goa-checkbox-selected .goa-checkmark {\n display: block !important; }\n .goa-checkbox .goa-checkbox-container.goa-checkbox-selected .goa-indeterminate {\n display: none !important; }\n .goa-checkbox .goa-checkbox-container.goa-checkbox-indeterminate {\n background-color: #0070c4; }\n .goa-checkbox .goa-checkbox-container.goa-checkbox-indeterminate .goa-checkmark {\n display: none; }\n .goa-checkbox .goa-checkbox-container.goa-checkbox-indeterminate .goa-indeterminate {\n display: block; }\n .goa-checkbox .goa-checkbox-container:hover:not(.goa-checkbox-selected):not(.goa-checkbox-indeterminate) {\n background-color: #f1f1f1; }\n .goa-checkbox .goa-checkbox-container:focus-within {\n box-shadow: 0 0 0 3px #feba35;\n outline: none; }\n\n.goa-checkbox.goa-checkbox-label-before .goa-checkbox-container {\n order: 1;\n margin-left: 8px;\n margin-right: auto; }\n\n.goa-checkbox-layout {\n display: inline-flex;\n align-items: center;\n line-height: 2.5rem; }\n";
|
|
2478
|
+
styleInject(css_248z$o);
|
|
2467
2479
|
|
|
2468
2480
|
var GoACheckbox = function GoACheckbox(_ref) {
|
|
2469
2481
|
var _ref$checked = _ref.checked,
|
|
@@ -2538,8 +2550,8 @@ var GoACheckbox = function GoACheckbox(_ref) {
|
|
|
2538
2550
|
}, content || children)));
|
|
2539
2551
|
};
|
|
2540
2552
|
|
|
2541
|
-
var css_248z$
|
|
2542
|
-
styleInject(css_248z$
|
|
2553
|
+
var css_248z$p = "/* Palette */\n/* Semantic usages */\n.svg {\n max-width: 100px; }\n\n.svg--small {\n max-width: 65px; }\n\n@-webkit-keyframes circle-animation {\n 0% {\n stroke-dashoffset: 75;\n transform: rotate(0); }\n 100% {\n stroke-dashoffset: 75;\n transform: rotate(360deg); } }\n\n@keyframes circle-animation {\n 0% {\n stroke-dashoffset: 75;\n transform: rotate(0); }\n 100% {\n stroke-dashoffset: 75;\n transform: rotate(360deg); } }\n\n.base-circle {\n display: block;\n fill: transparent;\n stroke: #c8eef9;\n stroke-width: 7px; }\n\n.progress-circle, .progress-circle--infinite {\n display: block;\n fill: transparent;\n stroke: #0070c4;\n stroke-linecap: round;\n stroke-dasharray: 283;\n stroke-dashoffset: 280;\n stroke-width: 7px;\n transform-origin: 50% 50%; }\n .progress-circle--infinite {\n -webkit-animation: circle-animation 1.2s linear infinite;\n animation: circle-animation 1.2s linear infinite; }\n\n.progress-message, .progress-message--large, .progress-message--small {\n font-style: normal;\n font-weight: normal; }\n .progress-message--large {\n margin-top: 32px;\n font-size: 24px;\n color: #000; }\n .progress-message--small {\n margin-top: 18px;\n font-size: 18px;\n color: #000; }\n\n.progress-container, .progress-container--small, .progress-container--large {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n background: white; }\n .progress-container--large {\n width: 100%;\n height: 100%; }\n";
|
|
2554
|
+
styleInject(css_248z$p);
|
|
2543
2555
|
|
|
2544
2556
|
var GoAPageLoader = function GoAPageLoader(_ref) {
|
|
2545
2557
|
var _ref$type = _ref.type,
|
|
@@ -2638,8 +2650,8 @@ GoAPageLoader.propTypes = {
|
|
|
2638
2650
|
displayType: propTypes.string
|
|
2639
2651
|
};
|
|
2640
2652
|
|
|
2641
|
-
var css_248z$
|
|
2642
|
-
styleInject(css_248z$
|
|
2653
|
+
var css_248z$q = "@-webkit-keyframes rotate {\n 100% {\n transform: rotate(360deg); } }\n\n@keyframes rotate {\n 100% {\n transform: rotate(360deg); } }\n\n.circular-loader {\n -webkit-animation: rotate 1s linear infinite;\n animation: rotate 1s linear infinite; }\n\n.base-circle {\n display: block;\n fill: transparent;\n stroke-width: 7px; }\n\n.rotating-circle {\n -webkit-animation: rotate 1s linear infinite;\n animation: rotate 1s linear infinite;\n display: block;\n fill: transparent;\n stroke-linecap: round;\n stroke-width: 7px;\n transform-origin: 50% 50%; }\n";
|
|
2654
|
+
styleInject(css_248z$q);
|
|
2643
2655
|
|
|
2644
2656
|
var GoAElementLoader = function GoAElementLoader(_ref) {
|
|
2645
2657
|
var _ref$visible = _ref.visible,
|