@raspberrypifoundation/design-system-react 1.1.0 → 1.1.1
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/dist/cjs/bundle.js +280 -9
- package/dist/esm/bundle.js +275 -10
- package/package.json +1 -1
package/dist/cjs/bundle.js
CHANGED
|
@@ -4,7 +4,7 @@ function getDefaultExportFromCjs (x) {
|
|
|
4
4
|
return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
|
|
5
5
|
}
|
|
6
6
|
|
|
7
|
-
var classnames
|
|
7
|
+
var classnames = {exports: {}};
|
|
8
8
|
|
|
9
9
|
/*!
|
|
10
10
|
Copyright (c) 2018 Jed Watson.
|
|
@@ -79,10 +79,10 @@ var classnames$1 = {exports: {}};
|
|
|
79
79
|
window.classNames = classNames;
|
|
80
80
|
}
|
|
81
81
|
}());
|
|
82
|
-
} (classnames
|
|
82
|
+
} (classnames));
|
|
83
83
|
|
|
84
|
-
var classnamesExports = classnames
|
|
85
|
-
var
|
|
84
|
+
var classnamesExports = classnames.exports;
|
|
85
|
+
var classNames = /*@__PURE__*/getDefaultExportFromCjs(classnamesExports);
|
|
86
86
|
|
|
87
87
|
var propTypes = {exports: {}};
|
|
88
88
|
|
|
@@ -3887,11 +3887,57 @@ function styleInject(css, ref) {
|
|
|
3887
3887
|
}
|
|
3888
3888
|
}
|
|
3889
3889
|
|
|
3890
|
-
var css_248z$
|
|
3891
|
-
styleInject(css_248z$
|
|
3890
|
+
var css_248z$6 = "@font-face {\n font-family: \"Material Symbols Outlined\";\n font-style: normal;\n font-weight: 100 700;\n font-display: block;\n src: url(\"./material-symbols-outlined.woff2\") format(\"woff2\");\n}\n.material-symbols-outlined {\n font-family: \"Material Symbols Outlined\";\n font-weight: normal;\n font-style: normal;\n font-size: 24px;\n line-height: 1;\n letter-spacing: normal;\n text-transform: none;\n display: inline-block;\n white-space: nowrap;\n word-wrap: normal;\n direction: ltr;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n text-rendering: optimizeLegibility;\n font-feature-settings: \"liga\";\n}\n\n@font-face {\n font-family: \"Material Symbols Rounded\";\n font-style: normal;\n font-weight: 100 700;\n font-display: block;\n src: url(\"./material-symbols-rounded.woff2\") format(\"woff2\");\n}\n.material-symbols-rounded {\n font-family: \"Material Symbols Rounded\";\n font-weight: normal;\n font-style: normal;\n font-size: 24px;\n line-height: 1;\n letter-spacing: normal;\n text-transform: none;\n display: inline-block;\n white-space: nowrap;\n word-wrap: normal;\n direction: ltr;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n text-rendering: optimizeLegibility;\n font-feature-settings: \"liga\";\n}\n\n@font-face {\n font-family: \"Material Symbols Sharp\";\n font-style: normal;\n font-weight: 100 700;\n font-display: block;\n src: url(\"./material-symbols-sharp.woff2\") format(\"woff2\");\n}\n.material-symbols-sharp {\n font-family: \"Material Symbols Sharp\";\n font-weight: normal;\n font-style: normal;\n font-size: 24px;\n line-height: 1;\n letter-spacing: normal;\n text-transform: none;\n display: inline-block;\n white-space: nowrap;\n word-wrap: normal;\n direction: ltr;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n text-rendering: optimizeLegibility;\n font-feature-settings: \"liga\";\n}\n";
|
|
3891
|
+
styleInject(css_248z$6);
|
|
3892
3892
|
|
|
3893
|
-
var css_248z = ":root, :host {\n --rpf-brand-black: hsla(60, 4%, 11%, 1);\n --rpf-brand-leaf: hsla(123, 43%, 48%, 1);\n --rpf-brand-raspberry: hsla(342, 71%, 47%, 1);\n --rpf-raspberry-50: hsla(338, 57%, 97%, 1);\n --rpf-raspberry-100: hsla(342, 62%, 96%, 1);\n --rpf-raspberry-200: hsla(344, 73%, 93%, 1);\n --rpf-raspberry-400: hsla(341, 63%, 84%, 1);\n --rpf-raspberry-500: hsla(343, 62%, 68%, 1);\n --rpf-raspberry-600: hsla(343, 64%, 58%, 1);\n --rpf-raspberry-800: hsla(342, 71%, 47%, 1);\n --rpf-raspberry-900: hsla(340, 78%, 36%, 1);\n}\n\n:root, :host {\n --rpf-red-100: hsla(4, 89%, 96%, 1);\n --rpf-red-200: hsla(1, 87%, 91%, 1);\n --rpf-red-400: hsla(1, 87%, 82%, 1);\n --rpf-red-600: hsla(1, 87%, 72%, 1);\n --rpf-red-800: hsla(1, 87%, 63%, 1);\n --rpf-red-900: hsla(1, 52%, 50%, 1);\n --rpf-green-100: hsla(125, 41%, 95%, 1);\n --rpf-green-200: hsla(122, 39%, 87%, 1);\n --rpf-green-400: hsla(123, 40%, 74%, 1);\n --rpf-green-600: hsla(123, 40%, 61%, 1);\n --rpf-green-800: hsla(123, 43%, 48%, 1);\n --rpf-green-900: hsla(123, 43%, 34%, 1);\n --rpf-teal-100: hsla(176, 55%, 94%, 1);\n --rpf-teal-200: hsla(174, 55%, 85%, 1);\n --rpf-teal-400: hsla(174, 55%, 70%, 1);\n --rpf-teal-600: hsla(174, 56%, 56%, 1);\n --rpf-teal-800: hsla(174, 81%, 41%, 1);\n --rpf-teal-900: hsla(174, 81%, 27%, 1);\n --rpf-orange-100: hsla(31, 100%, 95%, 1);\n --rpf-orange-200: hsla(32, 100%, 88%, 1);\n --rpf-orange-400: hsla(31, 100%, 77%, 1);\n --rpf-orange-600: hsla(31, 99%, 65%, 1);\n --rpf-orange-800: hsla(31, 99%, 54%, 1);\n --rpf-orange-900: hsla(31, 85%, 35%, 1);\n --rpf-yellow-100: hsla(51, 100%, 95%, 1);\n --rpf-yellow-200: hsla(52, 100%, 87%, 1);\n --rpf-yellow-400: hsla(51, 100%, 75%, 1);\n --rpf-yellow-600: hsla(52, 100%, 63%, 1);\n --rpf-yellow-800: hsla(52, 100%, 50%, 1);\n --rpf-yellow-900: hsla(52, 100%, 26%, 1);\n --rpf-purple-100: hsla(282, 36%, 95%, 1);\n --rpf-purple-200: hsla(279, 38%, 87%, 1);\n --rpf-purple-400: hsla(279, 38%, 73%, 1);\n --rpf-purple-600: hsla(279, 37%, 60%, 1);\n --rpf-purple-800: hsla(279, 43%, 47%, 1);\n --rpf-purple-900: hsla(280, 43%, 37%, 1);\n --rpf-navy-100: hsla(235, 38%, 94%, 1);\n --rpf-navy-200: hsla(234, 38%, 84%, 1);\n --rpf-navy-400: hsla(235, 38%, 69%, 1);\n --rpf-navy-600: hsla(235, 38%, 53%, 1);\n --rpf-navy-800: hsla(235, 63%, 37%, 1);\n --rpf-navy-900: hsla(234, 63%, 30%, 1);\n --rpf-blue-100: hsla(203, 86%, 95%, 1);\n --rpf-blue-200: hsla(204, 88%, 87%, 1);\n --rpf-blue-400: hsla(204, 88%, 74%, 1);\n --rpf-blue-600: hsla(204, 89%, 60%, 1);\n --rpf-blue-800: hsla(204, 100%, 47%, 1);\n --rpf-blue-900: hsla(204, 99%, 37%, 1);\n}\n\n:root, :host {\n --rpf-white: hsla(0, 0%, 100%, 1);\n --rpf-off-white: hsla(225, 25%, 97%, 1);\n --rpf-grey-50: hsla(210, 8%, 95%, 1);\n --rpf-grey-100: hsla(228, 10%, 90%, 1);\n --rpf-grey-150: hsla(223, 9%, 85%, 1);\n --rpf-grey-200: hsla(228, 10%, 80%, 1);\n --rpf-grey-300: hsla(229, 9%, 75%, 1);\n --rpf-grey-400: hsla(229, 8%, 61%, 1);\n --rpf-grey-500: hsla(229, 9%, 42%, 1);\n --rpf-grey-600: hsla(228, 9%, 32%, 1);\n --rpf-grey-700: hsla(228, 9%, 22%, 1);\n --rpf-grey-800: hsla(232, 9%, 18%, 1);\n --rpf-grey-850: hsla(228, 9%, 15%, 1);\n --rpf-grey-900: hsla(228, 9%, 10%, 1);\n --rpf-grey-950: hsla(228, 8%, 5%, 1);\n --rpf-black: hsla(0, 0%, 0%, 1);\n}\n\n:root, :host {\n --rpf-alert-error-highlight: hsla(0, 88%, 99%, 1);\n --rpf-alert-error: hsla(0, 88%, 33%, 1);\n --rpf-alert-information-highlight: hsla(225, 64%, 99%, 1);\n --rpf-alert-information: hsla(225, 64%, 33%, 1);\n --rpf-alert-success-highlight: hsla(136, 90%, 99%, 1);\n --rpf-alert-success: hsla(136, 90%, 20%, 1);\n --rpf-alert-warning-highlight: hsla(26, 70%, 99%, 1);\n --rpf-alert-warning: hsla(26, 70%, 29%, 1);\n}\n\n:root, :host {\n --font-size-0-5: 0.5rem;\n --font-size-0-75: 0.75rem;\n --font-size-1: 1rem;\n --font-size-1-5: 1.25rem;\n --font-size-2: 1.5rem;\n --font-size-3: 2rem;\n --font-size-4: 2.5rem;\n --font-size-5: 3rem;\n --font-size-6: 3.5rem;\n --font-size-7: 4rem;\n --font-size-8: 4.5rem;\n --font-size-9: 5rem;\n}\n\n:root, :host {\n --font-weight-regular: 400;\n --font-weight-bold: 700;\n}\n\n:root, :host {\n --border-radius: var(--space-1);\n --border-width-sm: 1px;\n --border-width-md: 2px;\n --border-width-lg: 3px;\n --alert-border-width: var(--border-width-md);\n --fieldset-border-width: var(--border-width-md);\n --input-border-width: var(--border-width-md);\n}\n\n:root, :host {\n --space-0-125: 0.0625rem;\n --space-0-25: 0.125rem;\n --space-0-5: 0.25rem;\n --space-1: 0.5rem;\n --space-1-5: 0.75rem;\n --space-2: 1rem;\n --space-3: 1.5rem;\n --space-4: 2rem;\n --space-5: 2.5rem;\n --space-6: 3rem;\n --space-7: 3.5rem;\n --space-8: 4rem;\n --space-9: 4.5rem;\n --space-10: 5rem;\n}\n\n.rpf-button {\n --rpf-button-background-color: var(--rpf-navy-800);\n --rpf-button-background-color-hover: var(--rpf-navy-900);\n --rpf-button-background-color-active: var(--rpf-navy-600);\n --rpf-button-background-color-disabled: var(--rpf-grey-600);\n --rpf-button-text-color: var(--rpf-white);\n --rpf-button-border-radius: var(--border-radius);\n --rpf-button-lg-height: 48px;\n --rpf-button-sm-height: 32px;\n /* 44px min-height to meet WCAG AAA target size requirements */\n --rpf-button-min-target-size: 44px;\n all: unset;\n align-items: center;\n box-sizing: border-box;\n color: var(--rpf-button-text-color);\n /*\n * We've decided to follow the masses on this and have a pointer on buttons.\n * Google, Facebook, Twitter, Mozilla, and Microsoft amongst many others have a pointer on buttons.\n */\n cursor: pointer;\n display: flex;\n font-size: var(--font-size-1-5);\n font-weight: var(--font-weight-bold);\n gap: var(--space-1);\n min-block-size: var(--rpf-button-lg-height);\n padding: var(--space-1) var(--space-2);\n position: relative;\n text-align: center;\n text-decoration: none;\n /* Fixes a rendering error that sometimes occurs due to negative z-index */\n transform: scale(1);\n inline-size: fit-content;\n /* A bit of a hack to allow for separate visual and target heights */\n}\n.rpf-button::before {\n background-color: var(--rpf-button-background-color);\n border-color: var(--rpf-button-background-color);\n border-radius: var(--rpf-button-border-radius);\n border-style: solid;\n border-width: 2px;\n content: \"\";\n display: block;\n inset: 0;\n position: absolute;\n /* To ensure it renders under its siblings */\n z-index: -1;\n}\n.rpf-button:hover::before {\n background-color: var(--rpf-button-background-color-hover);\n border-color: var(--rpf-button-background-color-hover);\n}\n.rpf-button:active::before {\n background-color: var(--rpf-button-background-color-active);\n border-color: var(--rpf-button-background-color-active);\n}\n.rpf-button:focus-visible::before {\n outline: 2px solid var(--rpf-button-background-color);\n outline-offset: 3px;\n}\n.rpf-button:disabled, .rpf-button--disabled {\n cursor: default;\n}\n.rpf-button:disabled::before, .rpf-button:disabled:hover::before, .rpf-button--disabled::before, .rpf-button--disabled:hover::before {\n border-color: var(--rpf-button-background-color-disabled);\n background-color: var(--rpf-button-background-color-disabled);\n}\n.rpf-button--secondary {\n color: var(--rpf-button-background-color);\n}\n.rpf-button--secondary::before {\n background-color: var(--rpf-button-text-color);\n}\n.rpf-button--secondary:hover {\n color: var(--rpf-button-background-color-hover);\n}\n.rpf-button--secondary:hover::before {\n background-color: var(--rpf-button-text-color);\n border-color: var(--rpf-button-background-color-hover);\n}\n.rpf-button--secondary:active {\n color: var(--rpf-button-background-color-active);\n}\n.rpf-button--secondary:active::before {\n background-color: var(--rpf-button-text-color);\n border-color: var(--rpf-button-background-color-active);\n}\n.rpf-button--secondary:disabled, .rpf-button--secondary.rpf-button--disabled {\n color: var(--rpf-button-background-color-disabled);\n}\n.rpf-button--secondary:disabled:hover::before, .rpf-button--secondary:disabled:before, .rpf-button--secondary.rpf-button--disabled:hover::before, .rpf-button--secondary.rpf-button--disabled:before {\n background-color: var(--rpf-button-text-color);\n border-color: var(--rpf-button-background-color-disabled);\n}\n.rpf-button--tertiary {\n color: var(--rpf-button-background-color);\n}\n.rpf-button--tertiary::before {\n background-color: transparent;\n border-color: transparent;\n}\n.rpf-button--tertiary:hover {\n color: var(--rpf-button-background-color-hover);\n}\n.rpf-button--tertiary:hover::before {\n background-color: transparent;\n border-color: transparent;\n}\n.rpf-button--tertiary:active {\n color: var(--rpf-button-background-color-active);\n}\n.rpf-button--tertiary:active::before {\n background-color: transparent;\n}\n.rpf-button--tertiary:disabled, .rpf-button--tertiary.rpf-button--disabled {\n color: var(--rpf-button-background-color-disabled);\n}\n.rpf-button--tertiary:disabled::before, .rpf-button--tertiary:disabled:hover::before, .rpf-button--tertiary.rpf-button--disabled::before, .rpf-button--tertiary.rpf-button--disabled:hover::before {\n background-color: transparent;\n border-color: transparent;\n}\n.rpf-button--danger {\n --rpf-button-background-color: var(--rpf-alert-error);\n --rpf-button-background-color-hover: var(--rpf-alert-error);\n --rpf-button-background-color-active: var(--rpf-red-900);\n}\n.rpf-button--icon-only {\n block-size: var(--rpf-button-lg-height);\n line-height: var(--rpf-button-lg-height);\n padding: 0;\n text-align: center;\n inline-size: var(--rpf-button-lg-height);\n}\n.rpf-button--icon-only .rpf-button__icon {\n margin: 0 auto;\n}\n.rpf-button--sm {\n font-size: var(--font-size-1);\n min-block-size: var(--rpf-button-min-target-size);\n padding: var(--space-1) var(--space-1);\n /* To account for 32px visual height and 44px target height */\n}\n.rpf-button--sm::before {\n inset: calc((var(--rpf-button-min-target-size) - var(--rpf-button-sm-height)) / 2) 0;\n}\n.rpf-button--sm.rpf-button--icon-only {\n block-size: var(--rpf-button-min-target-size);\n line-height: var(--rpf-button-min-target-size);\n padding: 0;\n inline-size: var(--rpf-button-min-target-size);\n}\n.rpf-button--sm.rpf-button--icon-only::before {\n inset: calc((var(--rpf-button-min-target-size) - var(--rpf-button-sm-height)) / 2);\n}\n.rpf-button--sm .material-symbols-sharp {\n font-size: 20px;\n font-variation-settings: \"OPSZ\" 20;\n}\n.rpf-button--full-width {\n justify-content: center;\n inline-size: 100%;\n}\n";
|
|
3894
|
-
styleInject(css_248z);
|
|
3893
|
+
var css_248z$5 = ":root, :host {\n --rpf-text-primary: hsla(0, 0%, 13%, 1);\n --rpf-text-primary-darkmode: var(--rpf-white);\n --rpf-text-secondary: hsla(200, 9%, 33%, 1);\n --rpf-text-secondary-darkmode: hsla(0, 0%, 80%, 1);\n}\n\n:root, :host {\n --rpf-red-100: hsla(4, 89%, 96%, 1);\n --rpf-red-200: hsla(1, 87%, 91%, 1);\n --rpf-red-400: hsla(1, 87%, 82%, 1);\n --rpf-red-600: hsla(1, 87%, 72%, 1);\n --rpf-red-800: hsla(1, 87%, 63%, 1);\n --rpf-red-900: hsla(1, 52%, 50%, 1);\n --rpf-green-100: hsla(125, 41%, 95%, 1);\n --rpf-green-200: hsla(122, 39%, 87%, 1);\n --rpf-green-400: hsla(123, 40%, 74%, 1);\n --rpf-green-600: hsla(123, 40%, 61%, 1);\n --rpf-green-800: hsla(123, 43%, 48%, 1);\n --rpf-green-900: hsla(123, 43%, 34%, 1);\n --rpf-teal-100: hsla(176, 55%, 94%, 1);\n --rpf-teal-200: hsla(174, 55%, 85%, 1);\n --rpf-teal-400: hsla(174, 55%, 70%, 1);\n --rpf-teal-600: hsla(174, 56%, 56%, 1);\n --rpf-teal-800: hsla(174, 81%, 41%, 1);\n --rpf-teal-900: hsla(174, 81%, 27%, 1);\n --rpf-orange-100: hsla(31, 100%, 95%, 1);\n --rpf-orange-200: hsla(32, 100%, 88%, 1);\n --rpf-orange-400: hsla(31, 100%, 77%, 1);\n --rpf-orange-600: hsla(31, 99%, 65%, 1);\n --rpf-orange-800: hsla(31, 99%, 54%, 1);\n --rpf-orange-900: hsla(31, 85%, 35%, 1);\n --rpf-yellow-100: hsla(51, 100%, 95%, 1);\n --rpf-yellow-200: hsla(52, 100%, 87%, 1);\n --rpf-yellow-400: hsla(51, 100%, 75%, 1);\n --rpf-yellow-600: hsla(52, 100%, 63%, 1);\n --rpf-yellow-800: hsla(52, 100%, 50%, 1);\n --rpf-yellow-900: hsla(52, 100%, 26%, 1);\n --rpf-purple-100: hsla(282, 36%, 95%, 1);\n --rpf-purple-200: hsla(279, 38%, 87%, 1);\n --rpf-purple-400: hsla(279, 38%, 73%, 1);\n --rpf-purple-600: hsla(279, 37%, 60%, 1);\n --rpf-purple-800: hsla(279, 43%, 47%, 1);\n --rpf-purple-900: hsla(280, 43%, 37%, 1);\n --rpf-navy-100: hsla(235, 38%, 94%, 1);\n --rpf-navy-200: hsla(234, 38%, 84%, 1);\n --rpf-navy-400: hsla(235, 38%, 69%, 1);\n --rpf-navy-600: hsla(235, 38%, 53%, 1);\n --rpf-navy-800: hsla(235, 63%, 37%, 1);\n --rpf-navy-900: hsla(234, 63%, 30%, 1);\n --rpf-blue-100: hsla(203, 86%, 95%, 1);\n --rpf-blue-200: hsla(204, 88%, 87%, 1);\n --rpf-blue-400: hsla(204, 88%, 74%, 1);\n --rpf-blue-600: hsla(204, 89%, 60%, 1);\n --rpf-blue-800: hsla(204, 100%, 47%, 1);\n --rpf-blue-900: hsla(204, 99%, 37%, 1);\n}\n\n:root, :host {\n --font-size-0-5: 0.5rem;\n --font-size-0-75: 0.75rem;\n --font-size-1: 1rem;\n --font-size-1-5: 1.25rem;\n --font-size-2: 1.5rem;\n --font-size-3: 2rem;\n --font-size-4: 2.5rem;\n --font-size-5: 3rem;\n --font-size-6: 3.5rem;\n --font-size-7: 4rem;\n --font-size-8: 4.5rem;\n --font-size-9: 5rem;\n}\n\n:root, :host {\n --font-weight-regular: 400;\n --font-weight-bold: 700;\n}\n\n:root, :host {\n --line-height-0-75: 0.75rem;\n --line-height-1: 1rem;\n --line-height-1-5: 1.5rem;\n --line-height-2: 2rem;\n --line-height-2-5: 2.5rem;\n --line-height-3: 3rem;\n --line-height-3-5: 3.5rem;\n --line-height-4: 4rem;\n --line-height-4-5: 4.5rem;\n --line-height-5: 5rem;\n --line-height-5-5: 5.5rem;\n --line-height-6: 6rem;\n --line-height-6-5: 6.5rem;\n}\n\n:root, :host {\n --border-radius: var(--space-1);\n --border-width-sm: 1px;\n --border-width-md: 2px;\n --border-width-lg: 3px;\n --alert-border-width: var(--border-width-md);\n --fieldset-border-width: var(--border-width-md);\n --input-border-width: var(--border-width-md);\n}\n\n:root, :host {\n --rpf-brand-black: hsla(60, 4%, 11%, 1);\n --rpf-brand-leaf: hsla(123, 43%, 48%, 1);\n --rpf-brand-raspberry: hsla(342, 71%, 47%, 1);\n --rpf-raspberry-50: hsla(338, 57%, 97%, 1);\n --rpf-raspberry-100: hsla(342, 62%, 96%, 1);\n --rpf-raspberry-200: hsla(344, 73%, 93%, 1);\n --rpf-raspberry-400: hsla(341, 63%, 84%, 1);\n --rpf-raspberry-500: hsla(343, 62%, 68%, 1);\n --rpf-raspberry-600: hsla(343, 64%, 58%, 1);\n --rpf-raspberry-800: hsla(342, 71%, 47%, 1);\n --rpf-raspberry-900: hsla(340, 78%, 36%, 1);\n}\n\n:root, :host {\n --rpf-white: hsla(0, 0%, 100%, 1);\n --rpf-off-white: hsla(225, 25%, 97%, 1);\n --rpf-grey-50: hsla(210, 8%, 95%, 1);\n --rpf-grey-100: hsla(228, 10%, 90%, 1);\n --rpf-grey-150: hsla(223, 9%, 85%, 1);\n --rpf-grey-200: hsla(228, 10%, 80%, 1);\n --rpf-grey-300: hsla(229, 9%, 75%, 1);\n --rpf-grey-400: hsla(229, 8%, 61%, 1);\n --rpf-grey-500: hsla(229, 9%, 42%, 1);\n --rpf-grey-600: hsla(228, 9%, 32%, 1);\n --rpf-grey-700: hsla(228, 9%, 22%, 1);\n --rpf-grey-800: hsla(232, 9%, 18%, 1);\n --rpf-grey-850: hsla(228, 9%, 15%, 1);\n --rpf-grey-900: hsla(228, 9%, 10%, 1);\n --rpf-grey-950: hsla(228, 8%, 5%, 1);\n --rpf-black: hsla(0, 0%, 0%, 1);\n}\n\n:root, :host {\n --space-0-125: 0.0625rem;\n --space-0-25: 0.125rem;\n --space-0-5: 0.25rem;\n --space-1: 0.5rem;\n --space-1-5: 0.75rem;\n --space-2: 1rem;\n --space-3: 1.5rem;\n --space-4: 2rem;\n --space-5: 2.5rem;\n --space-6: 3rem;\n --space-7: 3.5rem;\n --space-8: 4rem;\n --space-9: 4.5rem;\n --space-10: 5rem;\n}\n\n.rpf-accordion {\n --background-color: var(--rpf-white);\n --border-color: var(--rpf-grey-50);\n --border-width: var(--border-width-sm);\n --text-color: var(--rpf-text-primary);\n --icon-color: var(--rpf-navy-800);\n background: var(--background-color);\n border-block-start: var(--border-width) solid var(--border-color);\n}\n.rpf-accordion:last-of-type {\n border-block-end: var(--border-width) solid var(--border-color);\n}\n.rpf-accordion__container {\n border-block-start: var(--border-width) solid var(--border-color);\n}\n.rpf-accordion__container:first-of-type {\n border-block-start: none;\n}\n.rpf-accordion__text {\n font-size: var(--font-size-1);\n font-weight: var(--font-weight-regular);\n line-height: var(--line-height-1-5);\n color: var(--text-color);\n margin: 0;\n padding-block-end: var(--space-2);\n padding-block-start: var(--space-1);\n padding-inline: var(--space-2);\n}\n.rpf-accordion__title {\n font-size: var(--font-size-1-5);\n font-weight: var(--font-weight-bold);\n line-height: var(--line-height-1-5);\n align-items: center;\n color: var(--text-color);\n cursor: pointer;\n display: flex;\n justify-content: space-between;\n list-style: none;\n padding-block: var(--space-2);\n padding-inline: var(--space-2);\n}\n.rpf-accordion__title::marker {\n display: none;\n}\n.rpf-accordion__title:focus-visible {\n outline: var(--border-width-lg) solid var(--rpf-brand-raspberry);\n}\n.rpf-accordion__icon {\n background: transparent;\n display: block;\n block-size: var(--space-0-25);\n margin-block-start: 0;\n margin-inline-start: var(--space-2);\n position: relative;\n inline-size: var(--space-2);\n}\n.rpf-accordion__icon::before, .rpf-accordion__icon::after {\n background: var(--icon-color);\n border-radius: var(--border-radius);\n content: \"\";\n block-size: var(--space-0-25);\n position: absolute;\n transition: all 0.3s;\n inline-size: var(--space-2);\n}\n.rpf-accordion__icon::before {\n transform: rotate(90deg);\n}\n.rpf-accordion[open] .rpf-accordion__icon::before, .rpf-accordion__container[open] .rpf-accordion__icon::before {\n transform: rotate(180deg);\n}\n";
|
|
3894
|
+
styleInject(css_248z$5);
|
|
3895
|
+
|
|
3896
|
+
const Accordion = ({
|
|
3897
|
+
content,
|
|
3898
|
+
title,
|
|
3899
|
+
className,
|
|
3900
|
+
id
|
|
3901
|
+
}) => {
|
|
3902
|
+
const [expanded, setExpanded] = reactExports.useState(false);
|
|
3903
|
+
const classes = classNames("rpf-accordion", {
|
|
3904
|
+
"rpf-accordion--open": expanded
|
|
3905
|
+
}, className);
|
|
3906
|
+
const toggleExpanded = () => {
|
|
3907
|
+
setExpanded(!expanded);
|
|
3908
|
+
};
|
|
3909
|
+
return /*#__PURE__*/React.createElement("details", {
|
|
3910
|
+
className: classes,
|
|
3911
|
+
onClick: toggleExpanded,
|
|
3912
|
+
id: `${id}`,
|
|
3913
|
+
"aria-labelledby": id
|
|
3914
|
+
}, /*#__PURE__*/React.createElement("summary", {
|
|
3915
|
+
className: "rpf-accordion__title",
|
|
3916
|
+
role: "button",
|
|
3917
|
+
"aria-expanded": expanded,
|
|
3918
|
+
"aria-controls": `${id}-content`
|
|
3919
|
+
}, title, /*#__PURE__*/React.createElement("span", {
|
|
3920
|
+
className: "rpf-accordion__icon"
|
|
3921
|
+
})), /*#__PURE__*/React.createElement("p", {
|
|
3922
|
+
className: "rpf-accordion__text",
|
|
3923
|
+
id: `${id}-content`,
|
|
3924
|
+
"data-testid": "content"
|
|
3925
|
+
}, content));
|
|
3926
|
+
};
|
|
3927
|
+
Accordion.propTypes = {
|
|
3928
|
+
content: PropTypes.string.isRequired,
|
|
3929
|
+
title: PropTypes.string.isRequired,
|
|
3930
|
+
id: PropTypes.string.isRequired,
|
|
3931
|
+
className: PropTypes.string
|
|
3932
|
+
};
|
|
3933
|
+
Accordion.defaultProps = {
|
|
3934
|
+
title: "",
|
|
3935
|
+
content: "",
|
|
3936
|
+
id: "accordion"
|
|
3937
|
+
};
|
|
3938
|
+
|
|
3939
|
+
var css_248z$4 = ":root, :host {\n --rpf-brand-black: hsla(60, 4%, 11%, 1);\n --rpf-brand-leaf: hsla(123, 43%, 48%, 1);\n --rpf-brand-raspberry: hsla(342, 71%, 47%, 1);\n --rpf-raspberry-50: hsla(338, 57%, 97%, 1);\n --rpf-raspberry-100: hsla(342, 62%, 96%, 1);\n --rpf-raspberry-200: hsla(344, 73%, 93%, 1);\n --rpf-raspberry-400: hsla(341, 63%, 84%, 1);\n --rpf-raspberry-500: hsla(343, 62%, 68%, 1);\n --rpf-raspberry-600: hsla(343, 64%, 58%, 1);\n --rpf-raspberry-800: hsla(342, 71%, 47%, 1);\n --rpf-raspberry-900: hsla(340, 78%, 36%, 1);\n}\n\n:root, :host {\n --rpf-red-100: hsla(4, 89%, 96%, 1);\n --rpf-red-200: hsla(1, 87%, 91%, 1);\n --rpf-red-400: hsla(1, 87%, 82%, 1);\n --rpf-red-600: hsla(1, 87%, 72%, 1);\n --rpf-red-800: hsla(1, 87%, 63%, 1);\n --rpf-red-900: hsla(1, 52%, 50%, 1);\n --rpf-green-100: hsla(125, 41%, 95%, 1);\n --rpf-green-200: hsla(122, 39%, 87%, 1);\n --rpf-green-400: hsla(123, 40%, 74%, 1);\n --rpf-green-600: hsla(123, 40%, 61%, 1);\n --rpf-green-800: hsla(123, 43%, 48%, 1);\n --rpf-green-900: hsla(123, 43%, 34%, 1);\n --rpf-teal-100: hsla(176, 55%, 94%, 1);\n --rpf-teal-200: hsla(174, 55%, 85%, 1);\n --rpf-teal-400: hsla(174, 55%, 70%, 1);\n --rpf-teal-600: hsla(174, 56%, 56%, 1);\n --rpf-teal-800: hsla(174, 81%, 41%, 1);\n --rpf-teal-900: hsla(174, 81%, 27%, 1);\n --rpf-orange-100: hsla(31, 100%, 95%, 1);\n --rpf-orange-200: hsla(32, 100%, 88%, 1);\n --rpf-orange-400: hsla(31, 100%, 77%, 1);\n --rpf-orange-600: hsla(31, 99%, 65%, 1);\n --rpf-orange-800: hsla(31, 99%, 54%, 1);\n --rpf-orange-900: hsla(31, 85%, 35%, 1);\n --rpf-yellow-100: hsla(51, 100%, 95%, 1);\n --rpf-yellow-200: hsla(52, 100%, 87%, 1);\n --rpf-yellow-400: hsla(51, 100%, 75%, 1);\n --rpf-yellow-600: hsla(52, 100%, 63%, 1);\n --rpf-yellow-800: hsla(52, 100%, 50%, 1);\n --rpf-yellow-900: hsla(52, 100%, 26%, 1);\n --rpf-purple-100: hsla(282, 36%, 95%, 1);\n --rpf-purple-200: hsla(279, 38%, 87%, 1);\n --rpf-purple-400: hsla(279, 38%, 73%, 1);\n --rpf-purple-600: hsla(279, 37%, 60%, 1);\n --rpf-purple-800: hsla(279, 43%, 47%, 1);\n --rpf-purple-900: hsla(280, 43%, 37%, 1);\n --rpf-navy-100: hsla(235, 38%, 94%, 1);\n --rpf-navy-200: hsla(234, 38%, 84%, 1);\n --rpf-navy-400: hsla(235, 38%, 69%, 1);\n --rpf-navy-600: hsla(235, 38%, 53%, 1);\n --rpf-navy-800: hsla(235, 63%, 37%, 1);\n --rpf-navy-900: hsla(234, 63%, 30%, 1);\n --rpf-blue-100: hsla(203, 86%, 95%, 1);\n --rpf-blue-200: hsla(204, 88%, 87%, 1);\n --rpf-blue-400: hsla(204, 88%, 74%, 1);\n --rpf-blue-600: hsla(204, 89%, 60%, 1);\n --rpf-blue-800: hsla(204, 100%, 47%, 1);\n --rpf-blue-900: hsla(204, 99%, 37%, 1);\n}\n\n:root, :host {\n --rpf-white: hsla(0, 0%, 100%, 1);\n --rpf-off-white: hsla(225, 25%, 97%, 1);\n --rpf-grey-50: hsla(210, 8%, 95%, 1);\n --rpf-grey-100: hsla(228, 10%, 90%, 1);\n --rpf-grey-150: hsla(223, 9%, 85%, 1);\n --rpf-grey-200: hsla(228, 10%, 80%, 1);\n --rpf-grey-300: hsla(229, 9%, 75%, 1);\n --rpf-grey-400: hsla(229, 8%, 61%, 1);\n --rpf-grey-500: hsla(229, 9%, 42%, 1);\n --rpf-grey-600: hsla(228, 9%, 32%, 1);\n --rpf-grey-700: hsla(228, 9%, 22%, 1);\n --rpf-grey-800: hsla(232, 9%, 18%, 1);\n --rpf-grey-850: hsla(228, 9%, 15%, 1);\n --rpf-grey-900: hsla(228, 9%, 10%, 1);\n --rpf-grey-950: hsla(228, 8%, 5%, 1);\n --rpf-black: hsla(0, 0%, 0%, 1);\n}\n\n:root, :host {\n --rpf-alert-error-highlight: hsla(0, 88%, 99%, 1);\n --rpf-alert-error: hsla(0, 88%, 33%, 1);\n --rpf-alert-information-highlight: hsla(225, 64%, 99%, 1);\n --rpf-alert-information: hsla(225, 64%, 33%, 1);\n --rpf-alert-success-highlight: hsla(136, 90%, 99%, 1);\n --rpf-alert-success: hsla(136, 90%, 20%, 1);\n --rpf-alert-warning-highlight: hsla(26, 70%, 99%, 1);\n --rpf-alert-warning: hsla(26, 70%, 29%, 1);\n}\n\n:root, :host {\n --font-size-0-5: 0.5rem;\n --font-size-0-75: 0.75rem;\n --font-size-1: 1rem;\n --font-size-1-5: 1.25rem;\n --font-size-2: 1.5rem;\n --font-size-3: 2rem;\n --font-size-4: 2.5rem;\n --font-size-5: 3rem;\n --font-size-6: 3.5rem;\n --font-size-7: 4rem;\n --font-size-8: 4.5rem;\n --font-size-9: 5rem;\n}\n\n:root, :host {\n --font-weight-regular: 400;\n --font-weight-bold: 700;\n}\n\n:root, :host {\n --border-radius: var(--space-1);\n --border-width-sm: 1px;\n --border-width-md: 2px;\n --border-width-lg: 3px;\n --alert-border-width: var(--border-width-md);\n --fieldset-border-width: var(--border-width-md);\n --input-border-width: var(--border-width-md);\n}\n\n:root, :host {\n --space-0-125: 0.0625rem;\n --space-0-25: 0.125rem;\n --space-0-5: 0.25rem;\n --space-1: 0.5rem;\n --space-1-5: 0.75rem;\n --space-2: 1rem;\n --space-3: 1.5rem;\n --space-4: 2rem;\n --space-5: 2.5rem;\n --space-6: 3rem;\n --space-7: 3.5rem;\n --space-8: 4rem;\n --space-9: 4.5rem;\n --space-10: 5rem;\n}\n\n.rpf-button {\n --rpf-button-background-color: var(--rpf-navy-800);\n --rpf-button-background-color-hover: var(--rpf-navy-900);\n --rpf-button-background-color-active: var(--rpf-navy-600);\n --rpf-button-background-color-disabled: var(--rpf-grey-600);\n --rpf-button-text-color: var(--rpf-white);\n --rpf-button-border-radius: var(--border-radius);\n --rpf-button-lg-height: 48px;\n --rpf-button-sm-height: 32px;\n /* 44px min-height to meet WCAG AAA target size requirements */\n --rpf-button-min-target-size: 44px;\n all: unset;\n align-items: center;\n box-sizing: border-box;\n color: var(--rpf-button-text-color);\n /*\n * We've decided to follow the masses on this and have a pointer on buttons.\n * Google, Facebook, Twitter, Mozilla, and Microsoft amongst many others have a pointer on buttons.\n */\n cursor: pointer;\n display: flex;\n font-size: var(--font-size-1-5);\n font-weight: var(--font-weight-bold);\n gap: var(--space-1);\n min-block-size: var(--rpf-button-lg-height);\n padding: var(--space-1) var(--space-2);\n position: relative;\n text-align: center;\n text-decoration: none;\n /* Fixes a rendering error that sometimes occurs due to negative z-index */\n transform: scale(1);\n inline-size: fit-content;\n /* A bit of a hack to allow for separate visual and target heights */\n}\n.rpf-button::before {\n background-color: var(--rpf-button-background-color);\n border-color: var(--rpf-button-background-color);\n border-radius: var(--rpf-button-border-radius);\n border-style: solid;\n border-width: 2px;\n content: \"\";\n display: block;\n inset: 0;\n position: absolute;\n /* To ensure it renders under its siblings */\n z-index: -1;\n}\n.rpf-button:hover::before {\n background-color: var(--rpf-button-background-color-hover);\n border-color: var(--rpf-button-background-color-hover);\n}\n.rpf-button:active::before {\n background-color: var(--rpf-button-background-color-active);\n border-color: var(--rpf-button-background-color-active);\n}\n.rpf-button:focus-visible::before {\n outline: 2px solid var(--rpf-button-background-color);\n outline-offset: 3px;\n}\n.rpf-button:disabled, .rpf-button--disabled {\n cursor: default;\n}\n.rpf-button:disabled::before, .rpf-button:disabled:hover::before, .rpf-button--disabled::before, .rpf-button--disabled:hover::before {\n border-color: var(--rpf-button-background-color-disabled);\n background-color: var(--rpf-button-background-color-disabled);\n}\n.rpf-button--secondary {\n color: var(--rpf-button-background-color);\n}\n.rpf-button--secondary::before {\n background-color: var(--rpf-button-text-color);\n}\n.rpf-button--secondary:hover {\n color: var(--rpf-button-background-color-hover);\n}\n.rpf-button--secondary:hover::before {\n background-color: var(--rpf-button-text-color);\n border-color: var(--rpf-button-background-color-hover);\n}\n.rpf-button--secondary:active {\n color: var(--rpf-button-background-color-active);\n}\n.rpf-button--secondary:active::before {\n background-color: var(--rpf-button-text-color);\n border-color: var(--rpf-button-background-color-active);\n}\n.rpf-button--secondary:disabled, .rpf-button--secondary.rpf-button--disabled {\n color: var(--rpf-button-background-color-disabled);\n}\n.rpf-button--secondary:disabled:hover::before, .rpf-button--secondary:disabled:before, .rpf-button--secondary.rpf-button--disabled:hover::before, .rpf-button--secondary.rpf-button--disabled:before {\n background-color: var(--rpf-button-text-color);\n border-color: var(--rpf-button-background-color-disabled);\n}\n.rpf-button--tertiary {\n color: var(--rpf-button-background-color);\n}\n.rpf-button--tertiary::before {\n background-color: transparent;\n border-color: transparent;\n}\n.rpf-button--tertiary:hover {\n color: var(--rpf-button-background-color-hover);\n}\n.rpf-button--tertiary:hover::before {\n background-color: transparent;\n border-color: transparent;\n}\n.rpf-button--tertiary:active {\n color: var(--rpf-button-background-color-active);\n}\n.rpf-button--tertiary:active::before {\n background-color: transparent;\n}\n.rpf-button--tertiary:disabled, .rpf-button--tertiary.rpf-button--disabled {\n color: var(--rpf-button-background-color-disabled);\n}\n.rpf-button--tertiary:disabled::before, .rpf-button--tertiary:disabled:hover::before, .rpf-button--tertiary.rpf-button--disabled::before, .rpf-button--tertiary.rpf-button--disabled:hover::before {\n background-color: transparent;\n border-color: transparent;\n}\n.rpf-button--danger {\n --rpf-button-background-color: var(--rpf-alert-error);\n --rpf-button-background-color-hover: var(--rpf-alert-error);\n --rpf-button-background-color-active: var(--rpf-red-900);\n}\n.rpf-button--icon-only {\n block-size: var(--rpf-button-lg-height);\n line-height: var(--rpf-button-lg-height);\n padding: 0;\n text-align: center;\n inline-size: var(--rpf-button-lg-height);\n}\n.rpf-button--icon-only .rpf-button__icon {\n margin: 0 auto;\n}\n.rpf-button--sm {\n font-size: var(--font-size-1);\n min-block-size: var(--rpf-button-min-target-size);\n padding: var(--space-1) var(--space-1);\n /* To account for 32px visual height and 44px target height */\n}\n.rpf-button--sm::before {\n inset: calc((var(--rpf-button-min-target-size) - var(--rpf-button-sm-height)) / 2) 0;\n}\n.rpf-button--sm.rpf-button--icon-only {\n block-size: var(--rpf-button-min-target-size);\n line-height: var(--rpf-button-min-target-size);\n padding: 0;\n inline-size: var(--rpf-button-min-target-size);\n}\n.rpf-button--sm.rpf-button--icon-only::before {\n inset: calc((var(--rpf-button-min-target-size) - var(--rpf-button-sm-height)) / 2);\n}\n.rpf-button--sm .material-symbols-sharp {\n font-size: 20px;\n font-variation-settings: \"OPSZ\" 20;\n}\n.rpf-button--full-width {\n justify-content: center;\n inline-size: 100%;\n}\n";
|
|
3940
|
+
styleInject(css_248z$4);
|
|
3895
3941
|
|
|
3896
3942
|
/* eslint-disable complexity */
|
|
3897
3943
|
const Button = ({
|
|
@@ -3911,7 +3957,7 @@ const Button = ({
|
|
|
3911
3957
|
"aria-label": ariaLabel
|
|
3912
3958
|
}) => {
|
|
3913
3959
|
const iconButton = icon && iconOnly;
|
|
3914
|
-
const classes =
|
|
3960
|
+
const classes = classNames(
|
|
3915
3961
|
// Static classes
|
|
3916
3962
|
"rpf-button",
|
|
3917
3963
|
// Conditional classes
|
|
@@ -3974,4 +4020,229 @@ Button.defaultProps = {
|
|
|
3974
4020
|
"aria-label": ""
|
|
3975
4021
|
};
|
|
3976
4022
|
|
|
4023
|
+
var css_248z$3 = ":root, :host {\n --space-0-125: 0.0625rem;\n --space-0-25: 0.125rem;\n --space-0-5: 0.25rem;\n --space-1: 0.5rem;\n --space-1-5: 0.75rem;\n --space-2: 1rem;\n --space-3: 1.5rem;\n --space-4: 2rem;\n --space-5: 2.5rem;\n --space-6: 3rem;\n --space-7: 3.5rem;\n --space-8: 4rem;\n --space-9: 4.5rem;\n --space-10: 5rem;\n}\n\n:root, :host {\n --rpf-white: hsla(0, 0%, 100%, 1);\n --rpf-off-white: hsla(225, 25%, 97%, 1);\n --rpf-grey-50: hsla(210, 8%, 95%, 1);\n --rpf-grey-100: hsla(228, 10%, 90%, 1);\n --rpf-grey-150: hsla(223, 9%, 85%, 1);\n --rpf-grey-200: hsla(228, 10%, 80%, 1);\n --rpf-grey-300: hsla(229, 9%, 75%, 1);\n --rpf-grey-400: hsla(229, 8%, 61%, 1);\n --rpf-grey-500: hsla(229, 9%, 42%, 1);\n --rpf-grey-600: hsla(228, 9%, 32%, 1);\n --rpf-grey-700: hsla(228, 9%, 22%, 1);\n --rpf-grey-800: hsla(232, 9%, 18%, 1);\n --rpf-grey-850: hsla(228, 9%, 15%, 1);\n --rpf-grey-900: hsla(228, 9%, 10%, 1);\n --rpf-grey-950: hsla(228, 8%, 5%, 1);\n --rpf-black: hsla(0, 0%, 0%, 1);\n}\n\n:root, :host {\n --rpf-red-100: hsla(4, 89%, 96%, 1);\n --rpf-red-200: hsla(1, 87%, 91%, 1);\n --rpf-red-400: hsla(1, 87%, 82%, 1);\n --rpf-red-600: hsla(1, 87%, 72%, 1);\n --rpf-red-800: hsla(1, 87%, 63%, 1);\n --rpf-red-900: hsla(1, 52%, 50%, 1);\n --rpf-green-100: hsla(125, 41%, 95%, 1);\n --rpf-green-200: hsla(122, 39%, 87%, 1);\n --rpf-green-400: hsla(123, 40%, 74%, 1);\n --rpf-green-600: hsla(123, 40%, 61%, 1);\n --rpf-green-800: hsla(123, 43%, 48%, 1);\n --rpf-green-900: hsla(123, 43%, 34%, 1);\n --rpf-teal-100: hsla(176, 55%, 94%, 1);\n --rpf-teal-200: hsla(174, 55%, 85%, 1);\n --rpf-teal-400: hsla(174, 55%, 70%, 1);\n --rpf-teal-600: hsla(174, 56%, 56%, 1);\n --rpf-teal-800: hsla(174, 81%, 41%, 1);\n --rpf-teal-900: hsla(174, 81%, 27%, 1);\n --rpf-orange-100: hsla(31, 100%, 95%, 1);\n --rpf-orange-200: hsla(32, 100%, 88%, 1);\n --rpf-orange-400: hsla(31, 100%, 77%, 1);\n --rpf-orange-600: hsla(31, 99%, 65%, 1);\n --rpf-orange-800: hsla(31, 99%, 54%, 1);\n --rpf-orange-900: hsla(31, 85%, 35%, 1);\n --rpf-yellow-100: hsla(51, 100%, 95%, 1);\n --rpf-yellow-200: hsla(52, 100%, 87%, 1);\n --rpf-yellow-400: hsla(51, 100%, 75%, 1);\n --rpf-yellow-600: hsla(52, 100%, 63%, 1);\n --rpf-yellow-800: hsla(52, 100%, 50%, 1);\n --rpf-yellow-900: hsla(52, 100%, 26%, 1);\n --rpf-purple-100: hsla(282, 36%, 95%, 1);\n --rpf-purple-200: hsla(279, 38%, 87%, 1);\n --rpf-purple-400: hsla(279, 38%, 73%, 1);\n --rpf-purple-600: hsla(279, 37%, 60%, 1);\n --rpf-purple-800: hsla(279, 43%, 47%, 1);\n --rpf-purple-900: hsla(280, 43%, 37%, 1);\n --rpf-navy-100: hsla(235, 38%, 94%, 1);\n --rpf-navy-200: hsla(234, 38%, 84%, 1);\n --rpf-navy-400: hsla(235, 38%, 69%, 1);\n --rpf-navy-600: hsla(235, 38%, 53%, 1);\n --rpf-navy-800: hsla(235, 63%, 37%, 1);\n --rpf-navy-900: hsla(234, 63%, 30%, 1);\n --rpf-blue-100: hsla(203, 86%, 95%, 1);\n --rpf-blue-200: hsla(204, 88%, 87%, 1);\n --rpf-blue-400: hsla(204, 88%, 74%, 1);\n --rpf-blue-600: hsla(204, 89%, 60%, 1);\n --rpf-blue-800: hsla(204, 100%, 47%, 1);\n --rpf-blue-900: hsla(204, 99%, 37%, 1);\n}\n\n:root, :host {\n --font-size-0-5: 0.5rem;\n --font-size-0-75: 0.75rem;\n --font-size-1: 1rem;\n --font-size-1-5: 1.25rem;\n --font-size-2: 1.5rem;\n --font-size-3: 2rem;\n --font-size-4: 2.5rem;\n --font-size-5: 3rem;\n --font-size-6: 3.5rem;\n --font-size-7: 4rem;\n --font-size-8: 4.5rem;\n --font-size-9: 5rem;\n}\n\n:root, :host {\n --font-weight-regular: 400;\n --font-weight-bold: 700;\n}\n\n:root, :host {\n --line-height-0-75: 0.75rem;\n --line-height-1: 1rem;\n --line-height-1-5: 1.5rem;\n --line-height-2: 2rem;\n --line-height-2-5: 2.5rem;\n --line-height-3: 3rem;\n --line-height-3-5: 3.5rem;\n --line-height-4: 4rem;\n --line-height-4-5: 4.5rem;\n --line-height-5: 5rem;\n --line-height-5-5: 5.5rem;\n --line-height-6: 6rem;\n --line-height-6-5: 6.5rem;\n}\n\n:root {\n --color-progress-bar-complete: var(--rpf-navy-800);\n --color-progress-bar-incomplete: var(--rpf-grey-150);\n}\n\n.rpf-progress-bar {\n align-items: center;\n display: flex;\n gap: var(--space-3);\n}\n.rpf-progress-bar__step {\n font-size: var(--font-size-1);\n font-weight: var(--font-weight-regular);\n line-height: var(--line-height-1-5);\n flex: 1 0 auto;\n inline-size: max-content;\n}\n.rpf-progress-bar__bar {\n background: var(--color-progress-bar-incomplete);\n block-size: 6px;\n border-radius: 6px;\n inline-size: 100%;\n overflow: hidden;\n}\n.rpf-progress-bar__progress {\n background: var(--color-progress-bar-complete);\n block-size: 100%;\n border-radius: 6px;\n}\n";
|
|
4024
|
+
styleInject(css_248z$3);
|
|
4025
|
+
|
|
4026
|
+
/* eslint-disable complexity */
|
|
4027
|
+
const ProgressBar = ({
|
|
4028
|
+
text,
|
|
4029
|
+
percent
|
|
4030
|
+
}) => /*#__PURE__*/React.createElement("div", {
|
|
4031
|
+
className: "rpf-progress-bar"
|
|
4032
|
+
}, text && /*#__PURE__*/React.createElement("div", {
|
|
4033
|
+
className: "rpf-progress-bar__step"
|
|
4034
|
+
}, text), /*#__PURE__*/React.createElement("div", {
|
|
4035
|
+
className: "rpf-progress-bar__bar"
|
|
4036
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
4037
|
+
className: "rpf-progress-bar__progress",
|
|
4038
|
+
style: {
|
|
4039
|
+
width: `${percent}%`
|
|
4040
|
+
}
|
|
4041
|
+
})));
|
|
4042
|
+
ProgressBar.propTypes = {
|
|
4043
|
+
text: PropTypes.string,
|
|
4044
|
+
percent: PropTypes.number.isRequired
|
|
4045
|
+
};
|
|
4046
|
+
ProgressBar.defaultProps = {
|
|
4047
|
+
text: ""
|
|
4048
|
+
};
|
|
4049
|
+
|
|
4050
|
+
var css_248z$2 = ":root, :host {\n --border-radius: var(--space-1);\n --border-width-sm: 1px;\n --border-width-md: 2px;\n --border-width-lg: 3px;\n --alert-border-width: var(--border-width-md);\n --fieldset-border-width: var(--border-width-md);\n --input-border-width: var(--border-width-md);\n}\n\n:root, :host {\n --rpf-alert-error-highlight: hsla(0, 88%, 99%, 1);\n --rpf-alert-error: hsla(0, 88%, 33%, 1);\n --rpf-alert-information-highlight: hsla(225, 64%, 99%, 1);\n --rpf-alert-information: hsla(225, 64%, 33%, 1);\n --rpf-alert-success-highlight: hsla(136, 90%, 99%, 1);\n --rpf-alert-success: hsla(136, 90%, 20%, 1);\n --rpf-alert-warning-highlight: hsla(26, 70%, 99%, 1);\n --rpf-alert-warning: hsla(26, 70%, 29%, 1);\n}\n\n:root, :host {\n --rpf-white: hsla(0, 0%, 100%, 1);\n --rpf-off-white: hsla(225, 25%, 97%, 1);\n --rpf-grey-50: hsla(210, 8%, 95%, 1);\n --rpf-grey-100: hsla(228, 10%, 90%, 1);\n --rpf-grey-150: hsla(223, 9%, 85%, 1);\n --rpf-grey-200: hsla(228, 10%, 80%, 1);\n --rpf-grey-300: hsla(229, 9%, 75%, 1);\n --rpf-grey-400: hsla(229, 8%, 61%, 1);\n --rpf-grey-500: hsla(229, 9%, 42%, 1);\n --rpf-grey-600: hsla(228, 9%, 32%, 1);\n --rpf-grey-700: hsla(228, 9%, 22%, 1);\n --rpf-grey-800: hsla(232, 9%, 18%, 1);\n --rpf-grey-850: hsla(228, 9%, 15%, 1);\n --rpf-grey-900: hsla(228, 9%, 10%, 1);\n --rpf-grey-950: hsla(228, 8%, 5%, 1);\n --rpf-black: hsla(0, 0%, 0%, 1);\n}\n\n:root, :host {\n --rpf-red-100: hsla(4, 89%, 96%, 1);\n --rpf-red-200: hsla(1, 87%, 91%, 1);\n --rpf-red-400: hsla(1, 87%, 82%, 1);\n --rpf-red-600: hsla(1, 87%, 72%, 1);\n --rpf-red-800: hsla(1, 87%, 63%, 1);\n --rpf-red-900: hsla(1, 52%, 50%, 1);\n --rpf-green-100: hsla(125, 41%, 95%, 1);\n --rpf-green-200: hsla(122, 39%, 87%, 1);\n --rpf-green-400: hsla(123, 40%, 74%, 1);\n --rpf-green-600: hsla(123, 40%, 61%, 1);\n --rpf-green-800: hsla(123, 43%, 48%, 1);\n --rpf-green-900: hsla(123, 43%, 34%, 1);\n --rpf-teal-100: hsla(176, 55%, 94%, 1);\n --rpf-teal-200: hsla(174, 55%, 85%, 1);\n --rpf-teal-400: hsla(174, 55%, 70%, 1);\n --rpf-teal-600: hsla(174, 56%, 56%, 1);\n --rpf-teal-800: hsla(174, 81%, 41%, 1);\n --rpf-teal-900: hsla(174, 81%, 27%, 1);\n --rpf-orange-100: hsla(31, 100%, 95%, 1);\n --rpf-orange-200: hsla(32, 100%, 88%, 1);\n --rpf-orange-400: hsla(31, 100%, 77%, 1);\n --rpf-orange-600: hsla(31, 99%, 65%, 1);\n --rpf-orange-800: hsla(31, 99%, 54%, 1);\n --rpf-orange-900: hsla(31, 85%, 35%, 1);\n --rpf-yellow-100: hsla(51, 100%, 95%, 1);\n --rpf-yellow-200: hsla(52, 100%, 87%, 1);\n --rpf-yellow-400: hsla(51, 100%, 75%, 1);\n --rpf-yellow-600: hsla(52, 100%, 63%, 1);\n --rpf-yellow-800: hsla(52, 100%, 50%, 1);\n --rpf-yellow-900: hsla(52, 100%, 26%, 1);\n --rpf-purple-100: hsla(282, 36%, 95%, 1);\n --rpf-purple-200: hsla(279, 38%, 87%, 1);\n --rpf-purple-400: hsla(279, 38%, 73%, 1);\n --rpf-purple-600: hsla(279, 37%, 60%, 1);\n --rpf-purple-800: hsla(279, 43%, 47%, 1);\n --rpf-purple-900: hsla(280, 43%, 37%, 1);\n --rpf-navy-100: hsla(235, 38%, 94%, 1);\n --rpf-navy-200: hsla(234, 38%, 84%, 1);\n --rpf-navy-400: hsla(235, 38%, 69%, 1);\n --rpf-navy-600: hsla(235, 38%, 53%, 1);\n --rpf-navy-800: hsla(235, 63%, 37%, 1);\n --rpf-navy-900: hsla(234, 63%, 30%, 1);\n --rpf-blue-100: hsla(203, 86%, 95%, 1);\n --rpf-blue-200: hsla(204, 88%, 87%, 1);\n --rpf-blue-400: hsla(204, 88%, 74%, 1);\n --rpf-blue-600: hsla(204, 89%, 60%, 1);\n --rpf-blue-800: hsla(204, 100%, 47%, 1);\n --rpf-blue-900: hsla(204, 99%, 37%, 1);\n}\n\n:root, :host {\n --rpf-text-primary: hsla(0, 0%, 13%, 1);\n --rpf-text-primary-darkmode: var(--rpf-white);\n --rpf-text-secondary: hsla(200, 9%, 33%, 1);\n --rpf-text-secondary-darkmode: hsla(0, 0%, 80%, 1);\n}\n\n:root, :host {\n --rpf-input-background-color: var(--rpf-white);\n --rpf-input-background-color-disabled: var(--rpf-grey-50);\n --rpf-input-background-color-readonly: var(--rpf-grey-50);\n --rpf-input-color-error: var(--rpf-alert-error);\n --rpf-input-color: var(--rpf-text-primary);\n --rpf-input-outline-color: var(--rpf-blue-800);\n}\n\n:root, :host {\n --font-size-0-5: 0.5rem;\n --font-size-0-75: 0.75rem;\n --font-size-1: 1rem;\n --font-size-1-5: 1.25rem;\n --font-size-2: 1.5rem;\n --font-size-3: 2rem;\n --font-size-4: 2.5rem;\n --font-size-5: 3rem;\n --font-size-6: 3.5rem;\n --font-size-7: 4rem;\n --font-size-8: 4.5rem;\n --font-size-9: 5rem;\n}\n\n:root, :host {\n --space-0-125: 0.0625rem;\n --space-0-25: 0.125rem;\n --space-0-5: 0.25rem;\n --space-1: 0.5rem;\n --space-1-5: 0.75rem;\n --space-2: 1rem;\n --space-3: 1.5rem;\n --space-4: 2rem;\n --space-5: 2.5rem;\n --space-6: 3rem;\n --space-7: 3.5rem;\n --space-8: 4rem;\n --space-9: 4.5rem;\n --space-10: 5rem;\n}\n\n.rpf-input-field {\n margin-block-end: var(--space-3);\n}\n\n.rpf-input {\n all: unset;\n background-color: var(--rpf-input-background-color);\n border: var(--input-border-width) solid var(--rpf-input-color);\n border-radius: var(--border-radius);\n box-sizing: border-box;\n color: var(--rpf-input-color);\n display: flex;\n font-size: var(--font-size-1);\n line-height: var(--line-height-2);\n padding-block: calc(var(--space-1) - 2px);\n padding-inline: var(--space-1-5);\n max-width: 50ch;\n min-width: 240px;\n width: 100%;\n}\n.rpf-input:focus-visible {\n outline: 3px solid var(--rpf-input-outline-color);\n}\n.rpf-input:disabled, .rpf-input--disabled {\n background-color: var(--rpf-input-background-color-disabled);\n border-color: var(--rpf-input-background-color-disabled);\n}\n.rpf-input--error {\n border-color: var(--rpf-input-color-error);\n}\n.rpf-input--full-width {\n max-width: none;\n}\n\n:root, :host {\n --font-weight-regular: 400;\n --font-weight-bold: 700;\n}\n\n:root, :host {\n --line-height-0-75: 0.75rem;\n --line-height-1: 1rem;\n --line-height-1-5: 1.5rem;\n --line-height-2: 2rem;\n --line-height-2-5: 2.5rem;\n --line-height-3: 3rem;\n --line-height-3-5: 3.5rem;\n --line-height-4: 4rem;\n --line-height-4-5: 4.5rem;\n --line-height-5: 5rem;\n --line-height-5-5: 5.5rem;\n --line-height-6: 6rem;\n --line-height-6-5: 6.5rem;\n}\n\n:root {\n --rpf-label-hint-color: var(--rpf-text-secondary);\n --rpf-label-text-color: var(--rpf-text-primary);\n --rpf-label-text-color-disabled: var(--rpf-grey-500);\n}\n\n.rpf-label {\n all: unset;\n color: var(--rpf-label-text-color);\n display: flex;\n flex-direction: column;\n font-weight: var(--font-weight-bold);\n padding-block-end: var(--space-1);\n font-size: var(--font-size-1);\n line-height: var(--line-height-1-5);\n}\n.rpf-label__hint {\n color: var(--rpf-label-hint-color);\n font-size: var(--font-size-1);\n font-weight: var(--font-weight-regular);\n}\n.rpf-label--disabled {\n color: var(--rpf-label-text-color-disabled);\n}\n.rpf-label--disabled .rpf-label__hint {\n color: var(--rpf-label-text-color-disabled);\n}\n\n.rpf-input-checkbox {\n --rpf-input-checkbox-hit-target: 44px;\n --rpf-input-checkbox-size: var(--space-3);\n align-items: center;\n border-radius: var(--space-1);\n box-sizing: border-box;\n display: flex;\n gap: var(--space-1-5);\n margin-block-end: var(--space-1);\n max-width: 50ch;\n min-height: var(--rpf-input-checkbox-hit-target);\n min-width: 240px;\n padding-block: calc((var(--rpf-input-checkbox-hit-target) - var(--rpf-input-checkbox-size)) / 2);\n padding-inline: var(--space-1);\n width: 100%;\n}\n.rpf-input-checkbox input[type=checkbox] {\n align-self: flex-start;\n appearance: none;\n background: var(--rpf-white);\n border: var(--space-0-25) solid var(--rpf-grey-850);\n border-radius: var(--space-0-5);\n flex-shrink: 0;\n height: var(--rpf-input-checkbox-size);\n margin: 0;\n width: var(--rpf-input-checkbox-size);\n}\n.rpf-input-checkbox input[type=checkbox]:checked {\n background: var(--rpf-grey-850);\n background-image: url('data:image/svg+xml;utf8,<svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M7.95834 15.0003L3.20834 10.2503L4.39584 9.06283L7.95834 12.6253L15.6042 4.97949L16.7917 6.16699L7.95834 15.0003Z\" fill=\"white\"/></svg>');\n}\n.rpf-input-checkbox input[type=checkbox]:disabled {\n border-color: var(--rpf-grey-600);\n}\n.rpf-input-checkbox input[type=checkbox]:disabled:checked {\n background-color: var(--rpf-grey-600);\n}\n.rpf-input-checkbox.rpf-input--full-width {\n max-width: none;\n}\n.rpf-input-checkbox:has(> input[type=checkbox]:disabled), .rpf-input-checkbox--disabled {\n background-color: var(--rpf-input-background-color-disabled);\n color: var(--rpf-grey-400);\n}\n.rpf-input-checkbox:has(> input[type=checkbox]:focus-visible) {\n outline: 3px solid var(--rpf-input-outline-color);\n}\n.rpf-input-checkbox:has(> input[type=checkbox]:focus-visible) > input[type=checkbox]:focus-visible {\n outline: none;\n}\n\n:root {\n --rpf-message-text-color: var(--rpf-alert-error);\n}\n\n.rpf-error-message {\n all: unset;\n align-items: center;\n color: var(--rpf-message-text-color);\n display: flex;\n font-weight: var(--font-weight-bold);\n padding-block-end: var(--space-1);\n}\n.rpf-error-message__icon {\n margin-inline-end: var(--space-1);\n padding-block: var(--space-1);\n}\n";
|
|
4051
|
+
styleInject(css_248z$2);
|
|
4052
|
+
|
|
4053
|
+
const CheckboxInput = ({
|
|
4054
|
+
checked,
|
|
4055
|
+
disabled,
|
|
4056
|
+
error,
|
|
4057
|
+
id,
|
|
4058
|
+
label,
|
|
4059
|
+
name,
|
|
4060
|
+
onChange,
|
|
4061
|
+
value
|
|
4062
|
+
}) => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("label", {
|
|
4063
|
+
class: classNames("rpf-input-checkbox", {
|
|
4064
|
+
"rpf-input-checkbox--error": error
|
|
4065
|
+
})
|
|
4066
|
+
}, /*#__PURE__*/React.createElement("input", {
|
|
4067
|
+
checked: !!checked,
|
|
4068
|
+
disabled: disabled,
|
|
4069
|
+
id: id,
|
|
4070
|
+
name: name,
|
|
4071
|
+
onChange: onChange,
|
|
4072
|
+
type: "checkbox",
|
|
4073
|
+
value: value
|
|
4074
|
+
}), /*#__PURE__*/React.createElement("span", {
|
|
4075
|
+
class: "checkmark"
|
|
4076
|
+
}), label), error && /*#__PURE__*/React.createElement("div", {
|
|
4077
|
+
class: "rpf-error-message"
|
|
4078
|
+
}, /*#__PURE__*/React.createElement("span", {
|
|
4079
|
+
class: "rpf-error-message__icon material-symbols-sharp"
|
|
4080
|
+
}, "error"), error));
|
|
4081
|
+
CheckboxInput.propTypes = {
|
|
4082
|
+
checked: PropTypes.bool,
|
|
4083
|
+
disabled: PropTypes.bool,
|
|
4084
|
+
error: PropTypes.string,
|
|
4085
|
+
id: PropTypes.string.isRequired,
|
|
4086
|
+
label: PropTypes.string.isRequired,
|
|
4087
|
+
name: PropTypes.string.isRequired,
|
|
4088
|
+
onChange: PropTypes.func,
|
|
4089
|
+
value: PropTypes.string
|
|
4090
|
+
};
|
|
4091
|
+
CheckboxInput.defaultProps = {
|
|
4092
|
+
checked: true,
|
|
4093
|
+
disabled: false,
|
|
4094
|
+
error: "default",
|
|
4095
|
+
onChange: () => {},
|
|
4096
|
+
value: "on"
|
|
4097
|
+
};
|
|
4098
|
+
|
|
4099
|
+
const InputField = ({
|
|
4100
|
+
disabled,
|
|
4101
|
+
error,
|
|
4102
|
+
hint,
|
|
4103
|
+
label,
|
|
4104
|
+
name,
|
|
4105
|
+
children
|
|
4106
|
+
}) => /*#__PURE__*/React.createElement("div", {
|
|
4107
|
+
className: "rpf-input-field"
|
|
4108
|
+
}, (label || hint) && /*#__PURE__*/React.createElement("label", {
|
|
4109
|
+
htmlFor: name,
|
|
4110
|
+
className: classNames("rpf-label", {
|
|
4111
|
+
"rpf-label--disabled": disabled
|
|
4112
|
+
})
|
|
4113
|
+
}, label, /*#__PURE__*/React.createElement("small", {
|
|
4114
|
+
className: "rpf-label__hint"
|
|
4115
|
+
}, hint)), children, error && /*#__PURE__*/React.createElement("div", {
|
|
4116
|
+
className: "rpf-error-message"
|
|
4117
|
+
}, /*#__PURE__*/React.createElement("span", {
|
|
4118
|
+
className: "rpf-error-message__icon material-symbols-sharp"
|
|
4119
|
+
}, "error"), error));
|
|
4120
|
+
InputField.propTypes = {
|
|
4121
|
+
disabled: PropTypes.bool,
|
|
4122
|
+
error: PropTypes.string,
|
|
4123
|
+
hint: PropTypes.string,
|
|
4124
|
+
label: PropTypes.string.isRequired,
|
|
4125
|
+
name: PropTypes.string.isRequired
|
|
4126
|
+
};
|
|
4127
|
+
InputField.defaultProps = {
|
|
4128
|
+
disabled: false,
|
|
4129
|
+
error: "default",
|
|
4130
|
+
hint: ""
|
|
4131
|
+
};
|
|
4132
|
+
|
|
4133
|
+
var css_248z$1 = ":root, :host {\n --rpf-alert-error-highlight: hsla(0, 88%, 99%, 1);\n --rpf-alert-error: hsla(0, 88%, 33%, 1);\n --rpf-alert-information-highlight: hsla(225, 64%, 99%, 1);\n --rpf-alert-information: hsla(225, 64%, 33%, 1);\n --rpf-alert-success-highlight: hsla(136, 90%, 99%, 1);\n --rpf-alert-success: hsla(136, 90%, 20%, 1);\n --rpf-alert-warning-highlight: hsla(26, 70%, 99%, 1);\n --rpf-alert-warning: hsla(26, 70%, 29%, 1);\n}\n\n:root, :host {\n --font-weight-regular: 400;\n --font-weight-bold: 700;\n}\n\n:root, :host {\n --space-0-125: 0.0625rem;\n --space-0-25: 0.125rem;\n --space-0-5: 0.25rem;\n --space-1: 0.5rem;\n --space-1-5: 0.75rem;\n --space-2: 1rem;\n --space-3: 1.5rem;\n --space-4: 2rem;\n --space-5: 2.5rem;\n --space-6: 3rem;\n --space-7: 3.5rem;\n --space-8: 4rem;\n --space-9: 4.5rem;\n --space-10: 5rem;\n}\n\n:root {\n --rpf-message-text-color: var(--rpf-alert-error);\n}\n\n.rpf-error-message {\n all: unset;\n align-items: center;\n color: var(--rpf-message-text-color);\n display: flex;\n font-weight: var(--font-weight-bold);\n padding-block-end: var(--space-1);\n}\n.rpf-error-message__icon {\n margin-inline-end: var(--space-1);\n padding-block: var(--space-1);\n}\n\n:root, :host {\n --rpf-white: hsla(0, 0%, 100%, 1);\n --rpf-off-white: hsla(225, 25%, 97%, 1);\n --rpf-grey-50: hsla(210, 8%, 95%, 1);\n --rpf-grey-100: hsla(228, 10%, 90%, 1);\n --rpf-grey-150: hsla(223, 9%, 85%, 1);\n --rpf-grey-200: hsla(228, 10%, 80%, 1);\n --rpf-grey-300: hsla(229, 9%, 75%, 1);\n --rpf-grey-400: hsla(229, 8%, 61%, 1);\n --rpf-grey-500: hsla(229, 9%, 42%, 1);\n --rpf-grey-600: hsla(228, 9%, 32%, 1);\n --rpf-grey-700: hsla(228, 9%, 22%, 1);\n --rpf-grey-800: hsla(232, 9%, 18%, 1);\n --rpf-grey-850: hsla(228, 9%, 15%, 1);\n --rpf-grey-900: hsla(228, 9%, 10%, 1);\n --rpf-grey-950: hsla(228, 8%, 5%, 1);\n --rpf-black: hsla(0, 0%, 0%, 1);\n}\n\n:root, :host {\n --rpf-text-primary: hsla(0, 0%, 13%, 1);\n --rpf-text-primary-darkmode: var(--rpf-white);\n --rpf-text-secondary: hsla(200, 9%, 33%, 1);\n --rpf-text-secondary-darkmode: hsla(0, 0%, 80%, 1);\n}\n\n:root, :host {\n --line-height-0-75: 0.75rem;\n --line-height-1: 1rem;\n --line-height-1-5: 1.5rem;\n --line-height-2: 2rem;\n --line-height-2-5: 2.5rem;\n --line-height-3: 3rem;\n --line-height-3-5: 3.5rem;\n --line-height-4: 4rem;\n --line-height-4-5: 4.5rem;\n --line-height-5: 5rem;\n --line-height-5-5: 5.5rem;\n --line-height-6: 6rem;\n --line-height-6-5: 6.5rem;\n}\n\n:root {\n --rpf-label-hint-color: var(--rpf-text-secondary);\n --rpf-label-text-color: var(--rpf-text-primary);\n --rpf-label-text-color-disabled: var(--rpf-grey-500);\n}\n\n.rpf-label {\n all: unset;\n color: var(--rpf-label-text-color);\n display: flex;\n flex-direction: column;\n font-weight: var(--font-weight-bold);\n padding-block-end: var(--space-1);\n font-size: var(--font-size-1);\n line-height: var(--line-height-1-5);\n}\n.rpf-label__hint {\n color: var(--rpf-label-hint-color);\n font-size: var(--font-size-1);\n font-weight: var(--font-weight-regular);\n}\n.rpf-label--disabled {\n color: var(--rpf-label-text-color-disabled);\n}\n.rpf-label--disabled .rpf-label__hint {\n color: var(--rpf-label-text-color-disabled);\n}\n\n.rpf-input.rpf-input-select {\n background-image: url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'><path fill='%23212121' d='m12 15.375-6-6 1.4-1.4 4.6 4.6 4.6-4.6 1.4 1.4-6 6Z'/></svg>\");\n background-repeat: no-repeat;\n background-position: center right var(--space-1-5);\n}\nhtml[dir=rtl] .rpf-input.rpf-input-select {\n background-position: center left var(--space-1-5);\n}\n.rpf-input.rpf-input-select:disabled, .rpf-input.rpf-input-select--disabled {\n background-image: none;\n}\n\n:root, :host {\n --border-radius: var(--space-1);\n --border-width-sm: 1px;\n --border-width-md: 2px;\n --border-width-lg: 3px;\n --alert-border-width: var(--border-width-md);\n --fieldset-border-width: var(--border-width-md);\n --input-border-width: var(--border-width-md);\n}\n\n:root, :host {\n --rpf-red-100: hsla(4, 89%, 96%, 1);\n --rpf-red-200: hsla(1, 87%, 91%, 1);\n --rpf-red-400: hsla(1, 87%, 82%, 1);\n --rpf-red-600: hsla(1, 87%, 72%, 1);\n --rpf-red-800: hsla(1, 87%, 63%, 1);\n --rpf-red-900: hsla(1, 52%, 50%, 1);\n --rpf-green-100: hsla(125, 41%, 95%, 1);\n --rpf-green-200: hsla(122, 39%, 87%, 1);\n --rpf-green-400: hsla(123, 40%, 74%, 1);\n --rpf-green-600: hsla(123, 40%, 61%, 1);\n --rpf-green-800: hsla(123, 43%, 48%, 1);\n --rpf-green-900: hsla(123, 43%, 34%, 1);\n --rpf-teal-100: hsla(176, 55%, 94%, 1);\n --rpf-teal-200: hsla(174, 55%, 85%, 1);\n --rpf-teal-400: hsla(174, 55%, 70%, 1);\n --rpf-teal-600: hsla(174, 56%, 56%, 1);\n --rpf-teal-800: hsla(174, 81%, 41%, 1);\n --rpf-teal-900: hsla(174, 81%, 27%, 1);\n --rpf-orange-100: hsla(31, 100%, 95%, 1);\n --rpf-orange-200: hsla(32, 100%, 88%, 1);\n --rpf-orange-400: hsla(31, 100%, 77%, 1);\n --rpf-orange-600: hsla(31, 99%, 65%, 1);\n --rpf-orange-800: hsla(31, 99%, 54%, 1);\n --rpf-orange-900: hsla(31, 85%, 35%, 1);\n --rpf-yellow-100: hsla(51, 100%, 95%, 1);\n --rpf-yellow-200: hsla(52, 100%, 87%, 1);\n --rpf-yellow-400: hsla(51, 100%, 75%, 1);\n --rpf-yellow-600: hsla(52, 100%, 63%, 1);\n --rpf-yellow-800: hsla(52, 100%, 50%, 1);\n --rpf-yellow-900: hsla(52, 100%, 26%, 1);\n --rpf-purple-100: hsla(282, 36%, 95%, 1);\n --rpf-purple-200: hsla(279, 38%, 87%, 1);\n --rpf-purple-400: hsla(279, 38%, 73%, 1);\n --rpf-purple-600: hsla(279, 37%, 60%, 1);\n --rpf-purple-800: hsla(279, 43%, 47%, 1);\n --rpf-purple-900: hsla(280, 43%, 37%, 1);\n --rpf-navy-100: hsla(235, 38%, 94%, 1);\n --rpf-navy-200: hsla(234, 38%, 84%, 1);\n --rpf-navy-400: hsla(235, 38%, 69%, 1);\n --rpf-navy-600: hsla(235, 38%, 53%, 1);\n --rpf-navy-800: hsla(235, 63%, 37%, 1);\n --rpf-navy-900: hsla(234, 63%, 30%, 1);\n --rpf-blue-100: hsla(203, 86%, 95%, 1);\n --rpf-blue-200: hsla(204, 88%, 87%, 1);\n --rpf-blue-400: hsla(204, 88%, 74%, 1);\n --rpf-blue-600: hsla(204, 89%, 60%, 1);\n --rpf-blue-800: hsla(204, 100%, 47%, 1);\n --rpf-blue-900: hsla(204, 99%, 37%, 1);\n}\n\n:root, :host {\n --rpf-input-background-color: var(--rpf-white);\n --rpf-input-background-color-disabled: var(--rpf-grey-50);\n --rpf-input-background-color-readonly: var(--rpf-grey-50);\n --rpf-input-color-error: var(--rpf-alert-error);\n --rpf-input-color: var(--rpf-text-primary);\n --rpf-input-outline-color: var(--rpf-blue-800);\n}\n\n:root, :host {\n --font-size-0-5: 0.5rem;\n --font-size-0-75: 0.75rem;\n --font-size-1: 1rem;\n --font-size-1-5: 1.25rem;\n --font-size-2: 1.5rem;\n --font-size-3: 2rem;\n --font-size-4: 2.5rem;\n --font-size-5: 3rem;\n --font-size-6: 3.5rem;\n --font-size-7: 4rem;\n --font-size-8: 4.5rem;\n --font-size-9: 5rem;\n}\n\n.rpf-input-field {\n margin-block-end: var(--space-3);\n}\n\n.rpf-input {\n all: unset;\n background-color: var(--rpf-input-background-color);\n border: var(--input-border-width) solid var(--rpf-input-color);\n border-radius: var(--border-radius);\n box-sizing: border-box;\n color: var(--rpf-input-color);\n display: flex;\n font-size: var(--font-size-1);\n line-height: var(--line-height-2);\n padding-block: calc(var(--space-1) - 2px);\n padding-inline: var(--space-1-5);\n max-width: 50ch;\n min-width: 240px;\n width: 100%;\n}\n.rpf-input:focus-visible {\n outline: 3px solid var(--rpf-input-outline-color);\n}\n.rpf-input:disabled, .rpf-input--disabled {\n background-color: var(--rpf-input-background-color-disabled);\n border-color: var(--rpf-input-background-color-disabled);\n}\n.rpf-input--error {\n border-color: var(--rpf-input-color-error);\n}\n.rpf-input--full-width {\n max-width: none;\n}\n";
|
|
4134
|
+
styleInject(css_248z$1);
|
|
4135
|
+
|
|
4136
|
+
const SelectInput = ({
|
|
4137
|
+
disabled,
|
|
4138
|
+
error,
|
|
4139
|
+
fullWidth,
|
|
4140
|
+
hint,
|
|
4141
|
+
id,
|
|
4142
|
+
label,
|
|
4143
|
+
name,
|
|
4144
|
+
onChange,
|
|
4145
|
+
options,
|
|
4146
|
+
selected
|
|
4147
|
+
}) => /*#__PURE__*/React.createElement(InputField, {
|
|
4148
|
+
disabled: disabled,
|
|
4149
|
+
error: error,
|
|
4150
|
+
hint: hint,
|
|
4151
|
+
label: label,
|
|
4152
|
+
name: name
|
|
4153
|
+
}, /*#__PURE__*/React.createElement("select", {
|
|
4154
|
+
className: classNames("rpf-input rpf-input-select", {
|
|
4155
|
+
"rpf-input--error": error,
|
|
4156
|
+
"rpf-input--full-width": fullWidth
|
|
4157
|
+
}),
|
|
4158
|
+
disabled: disabled,
|
|
4159
|
+
id: id,
|
|
4160
|
+
name: name,
|
|
4161
|
+
onChange: onChange,
|
|
4162
|
+
type: "text",
|
|
4163
|
+
value: selected
|
|
4164
|
+
}, !selected && /*#__PURE__*/React.createElement("option", {
|
|
4165
|
+
selected: true,
|
|
4166
|
+
disabled: true
|
|
4167
|
+
}), options.map(option => /*#__PURE__*/React.createElement("option", {
|
|
4168
|
+
value: option.key,
|
|
4169
|
+
key: option.key
|
|
4170
|
+
}, option.value))));
|
|
4171
|
+
SelectInput.propTypes = {
|
|
4172
|
+
disabled: PropTypes.bool,
|
|
4173
|
+
error: PropTypes.string,
|
|
4174
|
+
fullWidth: PropTypes.bool,
|
|
4175
|
+
hint: PropTypes.string,
|
|
4176
|
+
id: PropTypes.string.isRequired,
|
|
4177
|
+
label: PropTypes.string.isRequired,
|
|
4178
|
+
name: PropTypes.string.isRequired,
|
|
4179
|
+
onChange: PropTypes.func,
|
|
4180
|
+
options: PropTypes.array.isRequired,
|
|
4181
|
+
selected: PropTypes.string
|
|
4182
|
+
};
|
|
4183
|
+
SelectInput.defaultProps = {
|
|
4184
|
+
disabled: false,
|
|
4185
|
+
error: "default",
|
|
4186
|
+
fullWidth: false,
|
|
4187
|
+
hint: "",
|
|
4188
|
+
onChange: () => {},
|
|
4189
|
+
selected: ""
|
|
4190
|
+
};
|
|
4191
|
+
|
|
4192
|
+
var css_248z = ":root, :host {\n --border-radius: var(--space-1);\n --border-width-sm: 1px;\n --border-width-md: 2px;\n --border-width-lg: 3px;\n --alert-border-width: var(--border-width-md);\n --fieldset-border-width: var(--border-width-md);\n --input-border-width: var(--border-width-md);\n}\n\n:root, :host {\n --rpf-alert-error-highlight: hsla(0, 88%, 99%, 1);\n --rpf-alert-error: hsla(0, 88%, 33%, 1);\n --rpf-alert-information-highlight: hsla(225, 64%, 99%, 1);\n --rpf-alert-information: hsla(225, 64%, 33%, 1);\n --rpf-alert-success-highlight: hsla(136, 90%, 99%, 1);\n --rpf-alert-success: hsla(136, 90%, 20%, 1);\n --rpf-alert-warning-highlight: hsla(26, 70%, 99%, 1);\n --rpf-alert-warning: hsla(26, 70%, 29%, 1);\n}\n\n:root, :host {\n --rpf-white: hsla(0, 0%, 100%, 1);\n --rpf-off-white: hsla(225, 25%, 97%, 1);\n --rpf-grey-50: hsla(210, 8%, 95%, 1);\n --rpf-grey-100: hsla(228, 10%, 90%, 1);\n --rpf-grey-150: hsla(223, 9%, 85%, 1);\n --rpf-grey-200: hsla(228, 10%, 80%, 1);\n --rpf-grey-300: hsla(229, 9%, 75%, 1);\n --rpf-grey-400: hsla(229, 8%, 61%, 1);\n --rpf-grey-500: hsla(229, 9%, 42%, 1);\n --rpf-grey-600: hsla(228, 9%, 32%, 1);\n --rpf-grey-700: hsla(228, 9%, 22%, 1);\n --rpf-grey-800: hsla(232, 9%, 18%, 1);\n --rpf-grey-850: hsla(228, 9%, 15%, 1);\n --rpf-grey-900: hsla(228, 9%, 10%, 1);\n --rpf-grey-950: hsla(228, 8%, 5%, 1);\n --rpf-black: hsla(0, 0%, 0%, 1);\n}\n\n:root, :host {\n --rpf-red-100: hsla(4, 89%, 96%, 1);\n --rpf-red-200: hsla(1, 87%, 91%, 1);\n --rpf-red-400: hsla(1, 87%, 82%, 1);\n --rpf-red-600: hsla(1, 87%, 72%, 1);\n --rpf-red-800: hsla(1, 87%, 63%, 1);\n --rpf-red-900: hsla(1, 52%, 50%, 1);\n --rpf-green-100: hsla(125, 41%, 95%, 1);\n --rpf-green-200: hsla(122, 39%, 87%, 1);\n --rpf-green-400: hsla(123, 40%, 74%, 1);\n --rpf-green-600: hsla(123, 40%, 61%, 1);\n --rpf-green-800: hsla(123, 43%, 48%, 1);\n --rpf-green-900: hsla(123, 43%, 34%, 1);\n --rpf-teal-100: hsla(176, 55%, 94%, 1);\n --rpf-teal-200: hsla(174, 55%, 85%, 1);\n --rpf-teal-400: hsla(174, 55%, 70%, 1);\n --rpf-teal-600: hsla(174, 56%, 56%, 1);\n --rpf-teal-800: hsla(174, 81%, 41%, 1);\n --rpf-teal-900: hsla(174, 81%, 27%, 1);\n --rpf-orange-100: hsla(31, 100%, 95%, 1);\n --rpf-orange-200: hsla(32, 100%, 88%, 1);\n --rpf-orange-400: hsla(31, 100%, 77%, 1);\n --rpf-orange-600: hsla(31, 99%, 65%, 1);\n --rpf-orange-800: hsla(31, 99%, 54%, 1);\n --rpf-orange-900: hsla(31, 85%, 35%, 1);\n --rpf-yellow-100: hsla(51, 100%, 95%, 1);\n --rpf-yellow-200: hsla(52, 100%, 87%, 1);\n --rpf-yellow-400: hsla(51, 100%, 75%, 1);\n --rpf-yellow-600: hsla(52, 100%, 63%, 1);\n --rpf-yellow-800: hsla(52, 100%, 50%, 1);\n --rpf-yellow-900: hsla(52, 100%, 26%, 1);\n --rpf-purple-100: hsla(282, 36%, 95%, 1);\n --rpf-purple-200: hsla(279, 38%, 87%, 1);\n --rpf-purple-400: hsla(279, 38%, 73%, 1);\n --rpf-purple-600: hsla(279, 37%, 60%, 1);\n --rpf-purple-800: hsla(279, 43%, 47%, 1);\n --rpf-purple-900: hsla(280, 43%, 37%, 1);\n --rpf-navy-100: hsla(235, 38%, 94%, 1);\n --rpf-navy-200: hsla(234, 38%, 84%, 1);\n --rpf-navy-400: hsla(235, 38%, 69%, 1);\n --rpf-navy-600: hsla(235, 38%, 53%, 1);\n --rpf-navy-800: hsla(235, 63%, 37%, 1);\n --rpf-navy-900: hsla(234, 63%, 30%, 1);\n --rpf-blue-100: hsla(203, 86%, 95%, 1);\n --rpf-blue-200: hsla(204, 88%, 87%, 1);\n --rpf-blue-400: hsla(204, 88%, 74%, 1);\n --rpf-blue-600: hsla(204, 89%, 60%, 1);\n --rpf-blue-800: hsla(204, 100%, 47%, 1);\n --rpf-blue-900: hsla(204, 99%, 37%, 1);\n}\n\n:root, :host {\n --rpf-text-primary: hsla(0, 0%, 13%, 1);\n --rpf-text-primary-darkmode: var(--rpf-white);\n --rpf-text-secondary: hsla(200, 9%, 33%, 1);\n --rpf-text-secondary-darkmode: hsla(0, 0%, 80%, 1);\n}\n\n:root, :host {\n --rpf-input-background-color: var(--rpf-white);\n --rpf-input-background-color-disabled: var(--rpf-grey-50);\n --rpf-input-background-color-readonly: var(--rpf-grey-50);\n --rpf-input-color-error: var(--rpf-alert-error);\n --rpf-input-color: var(--rpf-text-primary);\n --rpf-input-outline-color: var(--rpf-blue-800);\n}\n\n:root, :host {\n --font-size-0-5: 0.5rem;\n --font-size-0-75: 0.75rem;\n --font-size-1: 1rem;\n --font-size-1-5: 1.25rem;\n --font-size-2: 1.5rem;\n --font-size-3: 2rem;\n --font-size-4: 2.5rem;\n --font-size-5: 3rem;\n --font-size-6: 3.5rem;\n --font-size-7: 4rem;\n --font-size-8: 4.5rem;\n --font-size-9: 5rem;\n}\n\n:root, :host {\n --space-0-125: 0.0625rem;\n --space-0-25: 0.125rem;\n --space-0-5: 0.25rem;\n --space-1: 0.5rem;\n --space-1-5: 0.75rem;\n --space-2: 1rem;\n --space-3: 1.5rem;\n --space-4: 2rem;\n --space-5: 2.5rem;\n --space-6: 3rem;\n --space-7: 3.5rem;\n --space-8: 4rem;\n --space-9: 4.5rem;\n --space-10: 5rem;\n}\n\n.rpf-input-field {\n margin-block-end: var(--space-3);\n}\n\n.rpf-input {\n all: unset;\n background-color: var(--rpf-input-background-color);\n border: var(--input-border-width) solid var(--rpf-input-color);\n border-radius: var(--border-radius);\n box-sizing: border-box;\n color: var(--rpf-input-color);\n display: flex;\n font-size: var(--font-size-1);\n line-height: var(--line-height-2);\n padding-block: calc(var(--space-1) - 2px);\n padding-inline: var(--space-1-5);\n max-width: 50ch;\n min-width: 240px;\n width: 100%;\n}\n.rpf-input:focus-visible {\n outline: 3px solid var(--rpf-input-outline-color);\n}\n.rpf-input:disabled, .rpf-input--disabled {\n background-color: var(--rpf-input-background-color-disabled);\n border-color: var(--rpf-input-background-color-disabled);\n}\n.rpf-input--error {\n border-color: var(--rpf-input-color-error);\n}\n.rpf-input--full-width {\n max-width: none;\n}\n\n:root, :host {\n --font-weight-regular: 400;\n --font-weight-bold: 700;\n}\n\n:root, :host {\n --line-height-0-75: 0.75rem;\n --line-height-1: 1rem;\n --line-height-1-5: 1.5rem;\n --line-height-2: 2rem;\n --line-height-2-5: 2.5rem;\n --line-height-3: 3rem;\n --line-height-3-5: 3.5rem;\n --line-height-4: 4rem;\n --line-height-4-5: 4.5rem;\n --line-height-5: 5rem;\n --line-height-5-5: 5.5rem;\n --line-height-6: 6rem;\n --line-height-6-5: 6.5rem;\n}\n\n:root {\n --rpf-label-hint-color: var(--rpf-text-secondary);\n --rpf-label-text-color: var(--rpf-text-primary);\n --rpf-label-text-color-disabled: var(--rpf-grey-500);\n}\n\n.rpf-label {\n all: unset;\n color: var(--rpf-label-text-color);\n display: flex;\n flex-direction: column;\n font-weight: var(--font-weight-bold);\n padding-block-end: var(--space-1);\n font-size: var(--font-size-1);\n line-height: var(--line-height-1-5);\n}\n.rpf-label__hint {\n color: var(--rpf-label-hint-color);\n font-size: var(--font-size-1);\n font-weight: var(--font-weight-regular);\n}\n.rpf-label--disabled {\n color: var(--rpf-label-text-color-disabled);\n}\n.rpf-label--disabled .rpf-label__hint {\n color: var(--rpf-label-text-color-disabled);\n}\n\n:root {\n --rpf-message-text-color: var(--rpf-alert-error);\n}\n\n.rpf-error-message {\n all: unset;\n align-items: center;\n color: var(--rpf-message-text-color);\n display: flex;\n font-weight: var(--font-weight-bold);\n padding-block-end: var(--space-1);\n}\n.rpf-error-message__icon {\n margin-inline-end: var(--space-1);\n padding-block: var(--space-1);\n}\n";
|
|
4193
|
+
styleInject(css_248z);
|
|
4194
|
+
|
|
4195
|
+
const TextInput = ({
|
|
4196
|
+
disabled,
|
|
4197
|
+
error,
|
|
4198
|
+
fullWidth,
|
|
4199
|
+
hint,
|
|
4200
|
+
id,
|
|
4201
|
+
label,
|
|
4202
|
+
name,
|
|
4203
|
+
onChange,
|
|
4204
|
+
value
|
|
4205
|
+
}) => /*#__PURE__*/React.createElement(InputField, {
|
|
4206
|
+
disabled: disabled,
|
|
4207
|
+
error: error,
|
|
4208
|
+
hint: hint,
|
|
4209
|
+
label: label,
|
|
4210
|
+
name: name
|
|
4211
|
+
}, /*#__PURE__*/React.createElement("input", {
|
|
4212
|
+
className: classNames("rpf-input rpf-input-text", {
|
|
4213
|
+
"rpf-input--error": error,
|
|
4214
|
+
"rpf-input--full-width": fullWidth
|
|
4215
|
+
}),
|
|
4216
|
+
disabled: disabled,
|
|
4217
|
+
id: id,
|
|
4218
|
+
name: name,
|
|
4219
|
+
onChange: onChange,
|
|
4220
|
+
type: "text",
|
|
4221
|
+
value: value
|
|
4222
|
+
}));
|
|
4223
|
+
TextInput.propTypes = {
|
|
4224
|
+
disabled: PropTypes.bool,
|
|
4225
|
+
error: PropTypes.string,
|
|
4226
|
+
fullWidth: PropTypes.bool,
|
|
4227
|
+
hint: PropTypes.string,
|
|
4228
|
+
id: PropTypes.string.isRequired,
|
|
4229
|
+
label: PropTypes.string.isRequired,
|
|
4230
|
+
name: PropTypes.string.isRequired,
|
|
4231
|
+
onChange: PropTypes.func,
|
|
4232
|
+
value: PropTypes.string.isRequired
|
|
4233
|
+
};
|
|
4234
|
+
TextInput.defaultProps = {
|
|
4235
|
+
disabled: false,
|
|
4236
|
+
error: "default",
|
|
4237
|
+
fullWidth: false,
|
|
4238
|
+
hint: "",
|
|
4239
|
+
onChange: () => {}
|
|
4240
|
+
};
|
|
4241
|
+
|
|
4242
|
+
exports.Accordion = Accordion;
|
|
3977
4243
|
exports.Button = Button;
|
|
4244
|
+
exports.CheckboxInput = CheckboxInput;
|
|
4245
|
+
exports.InputField = InputField;
|
|
4246
|
+
exports.ProgressBar = ProgressBar;
|
|
4247
|
+
exports.SelectInput = SelectInput;
|
|
4248
|
+
exports.TextInput = TextInput;
|
package/dist/esm/bundle.js
CHANGED
|
@@ -2,7 +2,7 @@ function getDefaultExportFromCjs (x) {
|
|
|
2
2
|
return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
|
|
3
3
|
}
|
|
4
4
|
|
|
5
|
-
var classnames
|
|
5
|
+
var classnames = {exports: {}};
|
|
6
6
|
|
|
7
7
|
/*!
|
|
8
8
|
Copyright (c) 2018 Jed Watson.
|
|
@@ -77,10 +77,10 @@ var classnames$1 = {exports: {}};
|
|
|
77
77
|
window.classNames = classNames;
|
|
78
78
|
}
|
|
79
79
|
}());
|
|
80
|
-
} (classnames
|
|
80
|
+
} (classnames));
|
|
81
81
|
|
|
82
|
-
var classnamesExports = classnames
|
|
83
|
-
var
|
|
82
|
+
var classnamesExports = classnames.exports;
|
|
83
|
+
var classNames = /*@__PURE__*/getDefaultExportFromCjs(classnamesExports);
|
|
84
84
|
|
|
85
85
|
var propTypes = {exports: {}};
|
|
86
86
|
|
|
@@ -3885,11 +3885,57 @@ function styleInject(css, ref) {
|
|
|
3885
3885
|
}
|
|
3886
3886
|
}
|
|
3887
3887
|
|
|
3888
|
-
var css_248z$
|
|
3889
|
-
styleInject(css_248z$
|
|
3888
|
+
var css_248z$6 = "@font-face {\n font-family: \"Material Symbols Outlined\";\n font-style: normal;\n font-weight: 100 700;\n font-display: block;\n src: url(\"./material-symbols-outlined.woff2\") format(\"woff2\");\n}\n.material-symbols-outlined {\n font-family: \"Material Symbols Outlined\";\n font-weight: normal;\n font-style: normal;\n font-size: 24px;\n line-height: 1;\n letter-spacing: normal;\n text-transform: none;\n display: inline-block;\n white-space: nowrap;\n word-wrap: normal;\n direction: ltr;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n text-rendering: optimizeLegibility;\n font-feature-settings: \"liga\";\n}\n\n@font-face {\n font-family: \"Material Symbols Rounded\";\n font-style: normal;\n font-weight: 100 700;\n font-display: block;\n src: url(\"./material-symbols-rounded.woff2\") format(\"woff2\");\n}\n.material-symbols-rounded {\n font-family: \"Material Symbols Rounded\";\n font-weight: normal;\n font-style: normal;\n font-size: 24px;\n line-height: 1;\n letter-spacing: normal;\n text-transform: none;\n display: inline-block;\n white-space: nowrap;\n word-wrap: normal;\n direction: ltr;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n text-rendering: optimizeLegibility;\n font-feature-settings: \"liga\";\n}\n\n@font-face {\n font-family: \"Material Symbols Sharp\";\n font-style: normal;\n font-weight: 100 700;\n font-display: block;\n src: url(\"./material-symbols-sharp.woff2\") format(\"woff2\");\n}\n.material-symbols-sharp {\n font-family: \"Material Symbols Sharp\";\n font-weight: normal;\n font-style: normal;\n font-size: 24px;\n line-height: 1;\n letter-spacing: normal;\n text-transform: none;\n display: inline-block;\n white-space: nowrap;\n word-wrap: normal;\n direction: ltr;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n text-rendering: optimizeLegibility;\n font-feature-settings: \"liga\";\n}\n";
|
|
3889
|
+
styleInject(css_248z$6);
|
|
3890
3890
|
|
|
3891
|
-
var css_248z = ":root, :host {\n --rpf-brand-black: hsla(60, 4%, 11%, 1);\n --rpf-brand-leaf: hsla(123, 43%, 48%, 1);\n --rpf-brand-raspberry: hsla(342, 71%, 47%, 1);\n --rpf-raspberry-50: hsla(338, 57%, 97%, 1);\n --rpf-raspberry-100: hsla(342, 62%, 96%, 1);\n --rpf-raspberry-200: hsla(344, 73%, 93%, 1);\n --rpf-raspberry-400: hsla(341, 63%, 84%, 1);\n --rpf-raspberry-500: hsla(343, 62%, 68%, 1);\n --rpf-raspberry-600: hsla(343, 64%, 58%, 1);\n --rpf-raspberry-800: hsla(342, 71%, 47%, 1);\n --rpf-raspberry-900: hsla(340, 78%, 36%, 1);\n}\n\n:root, :host {\n --rpf-red-100: hsla(4, 89%, 96%, 1);\n --rpf-red-200: hsla(1, 87%, 91%, 1);\n --rpf-red-400: hsla(1, 87%, 82%, 1);\n --rpf-red-600: hsla(1, 87%, 72%, 1);\n --rpf-red-800: hsla(1, 87%, 63%, 1);\n --rpf-red-900: hsla(1, 52%, 50%, 1);\n --rpf-green-100: hsla(125, 41%, 95%, 1);\n --rpf-green-200: hsla(122, 39%, 87%, 1);\n --rpf-green-400: hsla(123, 40%, 74%, 1);\n --rpf-green-600: hsla(123, 40%, 61%, 1);\n --rpf-green-800: hsla(123, 43%, 48%, 1);\n --rpf-green-900: hsla(123, 43%, 34%, 1);\n --rpf-teal-100: hsla(176, 55%, 94%, 1);\n --rpf-teal-200: hsla(174, 55%, 85%, 1);\n --rpf-teal-400: hsla(174, 55%, 70%, 1);\n --rpf-teal-600: hsla(174, 56%, 56%, 1);\n --rpf-teal-800: hsla(174, 81%, 41%, 1);\n --rpf-teal-900: hsla(174, 81%, 27%, 1);\n --rpf-orange-100: hsla(31, 100%, 95%, 1);\n --rpf-orange-200: hsla(32, 100%, 88%, 1);\n --rpf-orange-400: hsla(31, 100%, 77%, 1);\n --rpf-orange-600: hsla(31, 99%, 65%, 1);\n --rpf-orange-800: hsla(31, 99%, 54%, 1);\n --rpf-orange-900: hsla(31, 85%, 35%, 1);\n --rpf-yellow-100: hsla(51, 100%, 95%, 1);\n --rpf-yellow-200: hsla(52, 100%, 87%, 1);\n --rpf-yellow-400: hsla(51, 100%, 75%, 1);\n --rpf-yellow-600: hsla(52, 100%, 63%, 1);\n --rpf-yellow-800: hsla(52, 100%, 50%, 1);\n --rpf-yellow-900: hsla(52, 100%, 26%, 1);\n --rpf-purple-100: hsla(282, 36%, 95%, 1);\n --rpf-purple-200: hsla(279, 38%, 87%, 1);\n --rpf-purple-400: hsla(279, 38%, 73%, 1);\n --rpf-purple-600: hsla(279, 37%, 60%, 1);\n --rpf-purple-800: hsla(279, 43%, 47%, 1);\n --rpf-purple-900: hsla(280, 43%, 37%, 1);\n --rpf-navy-100: hsla(235, 38%, 94%, 1);\n --rpf-navy-200: hsla(234, 38%, 84%, 1);\n --rpf-navy-400: hsla(235, 38%, 69%, 1);\n --rpf-navy-600: hsla(235, 38%, 53%, 1);\n --rpf-navy-800: hsla(235, 63%, 37%, 1);\n --rpf-navy-900: hsla(234, 63%, 30%, 1);\n --rpf-blue-100: hsla(203, 86%, 95%, 1);\n --rpf-blue-200: hsla(204, 88%, 87%, 1);\n --rpf-blue-400: hsla(204, 88%, 74%, 1);\n --rpf-blue-600: hsla(204, 89%, 60%, 1);\n --rpf-blue-800: hsla(204, 100%, 47%, 1);\n --rpf-blue-900: hsla(204, 99%, 37%, 1);\n}\n\n:root, :host {\n --rpf-white: hsla(0, 0%, 100%, 1);\n --rpf-off-white: hsla(225, 25%, 97%, 1);\n --rpf-grey-50: hsla(210, 8%, 95%, 1);\n --rpf-grey-100: hsla(228, 10%, 90%, 1);\n --rpf-grey-150: hsla(223, 9%, 85%, 1);\n --rpf-grey-200: hsla(228, 10%, 80%, 1);\n --rpf-grey-300: hsla(229, 9%, 75%, 1);\n --rpf-grey-400: hsla(229, 8%, 61%, 1);\n --rpf-grey-500: hsla(229, 9%, 42%, 1);\n --rpf-grey-600: hsla(228, 9%, 32%, 1);\n --rpf-grey-700: hsla(228, 9%, 22%, 1);\n --rpf-grey-800: hsla(232, 9%, 18%, 1);\n --rpf-grey-850: hsla(228, 9%, 15%, 1);\n --rpf-grey-900: hsla(228, 9%, 10%, 1);\n --rpf-grey-950: hsla(228, 8%, 5%, 1);\n --rpf-black: hsla(0, 0%, 0%, 1);\n}\n\n:root, :host {\n --rpf-alert-error-highlight: hsla(0, 88%, 99%, 1);\n --rpf-alert-error: hsla(0, 88%, 33%, 1);\n --rpf-alert-information-highlight: hsla(225, 64%, 99%, 1);\n --rpf-alert-information: hsla(225, 64%, 33%, 1);\n --rpf-alert-success-highlight: hsla(136, 90%, 99%, 1);\n --rpf-alert-success: hsla(136, 90%, 20%, 1);\n --rpf-alert-warning-highlight: hsla(26, 70%, 99%, 1);\n --rpf-alert-warning: hsla(26, 70%, 29%, 1);\n}\n\n:root, :host {\n --font-size-0-5: 0.5rem;\n --font-size-0-75: 0.75rem;\n --font-size-1: 1rem;\n --font-size-1-5: 1.25rem;\n --font-size-2: 1.5rem;\n --font-size-3: 2rem;\n --font-size-4: 2.5rem;\n --font-size-5: 3rem;\n --font-size-6: 3.5rem;\n --font-size-7: 4rem;\n --font-size-8: 4.5rem;\n --font-size-9: 5rem;\n}\n\n:root, :host {\n --font-weight-regular: 400;\n --font-weight-bold: 700;\n}\n\n:root, :host {\n --border-radius: var(--space-1);\n --border-width-sm: 1px;\n --border-width-md: 2px;\n --border-width-lg: 3px;\n --alert-border-width: var(--border-width-md);\n --fieldset-border-width: var(--border-width-md);\n --input-border-width: var(--border-width-md);\n}\n\n:root, :host {\n --space-0-125: 0.0625rem;\n --space-0-25: 0.125rem;\n --space-0-5: 0.25rem;\n --space-1: 0.5rem;\n --space-1-5: 0.75rem;\n --space-2: 1rem;\n --space-3: 1.5rem;\n --space-4: 2rem;\n --space-5: 2.5rem;\n --space-6: 3rem;\n --space-7: 3.5rem;\n --space-8: 4rem;\n --space-9: 4.5rem;\n --space-10: 5rem;\n}\n\n.rpf-button {\n --rpf-button-background-color: var(--rpf-navy-800);\n --rpf-button-background-color-hover: var(--rpf-navy-900);\n --rpf-button-background-color-active: var(--rpf-navy-600);\n --rpf-button-background-color-disabled: var(--rpf-grey-600);\n --rpf-button-text-color: var(--rpf-white);\n --rpf-button-border-radius: var(--border-radius);\n --rpf-button-lg-height: 48px;\n --rpf-button-sm-height: 32px;\n /* 44px min-height to meet WCAG AAA target size requirements */\n --rpf-button-min-target-size: 44px;\n all: unset;\n align-items: center;\n box-sizing: border-box;\n color: var(--rpf-button-text-color);\n /*\n * We've decided to follow the masses on this and have a pointer on buttons.\n * Google, Facebook, Twitter, Mozilla, and Microsoft amongst many others have a pointer on buttons.\n */\n cursor: pointer;\n display: flex;\n font-size: var(--font-size-1-5);\n font-weight: var(--font-weight-bold);\n gap: var(--space-1);\n min-block-size: var(--rpf-button-lg-height);\n padding: var(--space-1) var(--space-2);\n position: relative;\n text-align: center;\n text-decoration: none;\n /* Fixes a rendering error that sometimes occurs due to negative z-index */\n transform: scale(1);\n inline-size: fit-content;\n /* A bit of a hack to allow for separate visual and target heights */\n}\n.rpf-button::before {\n background-color: var(--rpf-button-background-color);\n border-color: var(--rpf-button-background-color);\n border-radius: var(--rpf-button-border-radius);\n border-style: solid;\n border-width: 2px;\n content: \"\";\n display: block;\n inset: 0;\n position: absolute;\n /* To ensure it renders under its siblings */\n z-index: -1;\n}\n.rpf-button:hover::before {\n background-color: var(--rpf-button-background-color-hover);\n border-color: var(--rpf-button-background-color-hover);\n}\n.rpf-button:active::before {\n background-color: var(--rpf-button-background-color-active);\n border-color: var(--rpf-button-background-color-active);\n}\n.rpf-button:focus-visible::before {\n outline: 2px solid var(--rpf-button-background-color);\n outline-offset: 3px;\n}\n.rpf-button:disabled, .rpf-button--disabled {\n cursor: default;\n}\n.rpf-button:disabled::before, .rpf-button:disabled:hover::before, .rpf-button--disabled::before, .rpf-button--disabled:hover::before {\n border-color: var(--rpf-button-background-color-disabled);\n background-color: var(--rpf-button-background-color-disabled);\n}\n.rpf-button--secondary {\n color: var(--rpf-button-background-color);\n}\n.rpf-button--secondary::before {\n background-color: var(--rpf-button-text-color);\n}\n.rpf-button--secondary:hover {\n color: var(--rpf-button-background-color-hover);\n}\n.rpf-button--secondary:hover::before {\n background-color: var(--rpf-button-text-color);\n border-color: var(--rpf-button-background-color-hover);\n}\n.rpf-button--secondary:active {\n color: var(--rpf-button-background-color-active);\n}\n.rpf-button--secondary:active::before {\n background-color: var(--rpf-button-text-color);\n border-color: var(--rpf-button-background-color-active);\n}\n.rpf-button--secondary:disabled, .rpf-button--secondary.rpf-button--disabled {\n color: var(--rpf-button-background-color-disabled);\n}\n.rpf-button--secondary:disabled:hover::before, .rpf-button--secondary:disabled:before, .rpf-button--secondary.rpf-button--disabled:hover::before, .rpf-button--secondary.rpf-button--disabled:before {\n background-color: var(--rpf-button-text-color);\n border-color: var(--rpf-button-background-color-disabled);\n}\n.rpf-button--tertiary {\n color: var(--rpf-button-background-color);\n}\n.rpf-button--tertiary::before {\n background-color: transparent;\n border-color: transparent;\n}\n.rpf-button--tertiary:hover {\n color: var(--rpf-button-background-color-hover);\n}\n.rpf-button--tertiary:hover::before {\n background-color: transparent;\n border-color: transparent;\n}\n.rpf-button--tertiary:active {\n color: var(--rpf-button-background-color-active);\n}\n.rpf-button--tertiary:active::before {\n background-color: transparent;\n}\n.rpf-button--tertiary:disabled, .rpf-button--tertiary.rpf-button--disabled {\n color: var(--rpf-button-background-color-disabled);\n}\n.rpf-button--tertiary:disabled::before, .rpf-button--tertiary:disabled:hover::before, .rpf-button--tertiary.rpf-button--disabled::before, .rpf-button--tertiary.rpf-button--disabled:hover::before {\n background-color: transparent;\n border-color: transparent;\n}\n.rpf-button--danger {\n --rpf-button-background-color: var(--rpf-alert-error);\n --rpf-button-background-color-hover: var(--rpf-alert-error);\n --rpf-button-background-color-active: var(--rpf-red-900);\n}\n.rpf-button--icon-only {\n block-size: var(--rpf-button-lg-height);\n line-height: var(--rpf-button-lg-height);\n padding: 0;\n text-align: center;\n inline-size: var(--rpf-button-lg-height);\n}\n.rpf-button--icon-only .rpf-button__icon {\n margin: 0 auto;\n}\n.rpf-button--sm {\n font-size: var(--font-size-1);\n min-block-size: var(--rpf-button-min-target-size);\n padding: var(--space-1) var(--space-1);\n /* To account for 32px visual height and 44px target height */\n}\n.rpf-button--sm::before {\n inset: calc((var(--rpf-button-min-target-size) - var(--rpf-button-sm-height)) / 2) 0;\n}\n.rpf-button--sm.rpf-button--icon-only {\n block-size: var(--rpf-button-min-target-size);\n line-height: var(--rpf-button-min-target-size);\n padding: 0;\n inline-size: var(--rpf-button-min-target-size);\n}\n.rpf-button--sm.rpf-button--icon-only::before {\n inset: calc((var(--rpf-button-min-target-size) - var(--rpf-button-sm-height)) / 2);\n}\n.rpf-button--sm .material-symbols-sharp {\n font-size: 20px;\n font-variation-settings: \"OPSZ\" 20;\n}\n.rpf-button--full-width {\n justify-content: center;\n inline-size: 100%;\n}\n";
|
|
3892
|
-
styleInject(css_248z);
|
|
3891
|
+
var css_248z$5 = ":root, :host {\n --rpf-text-primary: hsla(0, 0%, 13%, 1);\n --rpf-text-primary-darkmode: var(--rpf-white);\n --rpf-text-secondary: hsla(200, 9%, 33%, 1);\n --rpf-text-secondary-darkmode: hsla(0, 0%, 80%, 1);\n}\n\n:root, :host {\n --rpf-red-100: hsla(4, 89%, 96%, 1);\n --rpf-red-200: hsla(1, 87%, 91%, 1);\n --rpf-red-400: hsla(1, 87%, 82%, 1);\n --rpf-red-600: hsla(1, 87%, 72%, 1);\n --rpf-red-800: hsla(1, 87%, 63%, 1);\n --rpf-red-900: hsla(1, 52%, 50%, 1);\n --rpf-green-100: hsla(125, 41%, 95%, 1);\n --rpf-green-200: hsla(122, 39%, 87%, 1);\n --rpf-green-400: hsla(123, 40%, 74%, 1);\n --rpf-green-600: hsla(123, 40%, 61%, 1);\n --rpf-green-800: hsla(123, 43%, 48%, 1);\n --rpf-green-900: hsla(123, 43%, 34%, 1);\n --rpf-teal-100: hsla(176, 55%, 94%, 1);\n --rpf-teal-200: hsla(174, 55%, 85%, 1);\n --rpf-teal-400: hsla(174, 55%, 70%, 1);\n --rpf-teal-600: hsla(174, 56%, 56%, 1);\n --rpf-teal-800: hsla(174, 81%, 41%, 1);\n --rpf-teal-900: hsla(174, 81%, 27%, 1);\n --rpf-orange-100: hsla(31, 100%, 95%, 1);\n --rpf-orange-200: hsla(32, 100%, 88%, 1);\n --rpf-orange-400: hsla(31, 100%, 77%, 1);\n --rpf-orange-600: hsla(31, 99%, 65%, 1);\n --rpf-orange-800: hsla(31, 99%, 54%, 1);\n --rpf-orange-900: hsla(31, 85%, 35%, 1);\n --rpf-yellow-100: hsla(51, 100%, 95%, 1);\n --rpf-yellow-200: hsla(52, 100%, 87%, 1);\n --rpf-yellow-400: hsla(51, 100%, 75%, 1);\n --rpf-yellow-600: hsla(52, 100%, 63%, 1);\n --rpf-yellow-800: hsla(52, 100%, 50%, 1);\n --rpf-yellow-900: hsla(52, 100%, 26%, 1);\n --rpf-purple-100: hsla(282, 36%, 95%, 1);\n --rpf-purple-200: hsla(279, 38%, 87%, 1);\n --rpf-purple-400: hsla(279, 38%, 73%, 1);\n --rpf-purple-600: hsla(279, 37%, 60%, 1);\n --rpf-purple-800: hsla(279, 43%, 47%, 1);\n --rpf-purple-900: hsla(280, 43%, 37%, 1);\n --rpf-navy-100: hsla(235, 38%, 94%, 1);\n --rpf-navy-200: hsla(234, 38%, 84%, 1);\n --rpf-navy-400: hsla(235, 38%, 69%, 1);\n --rpf-navy-600: hsla(235, 38%, 53%, 1);\n --rpf-navy-800: hsla(235, 63%, 37%, 1);\n --rpf-navy-900: hsla(234, 63%, 30%, 1);\n --rpf-blue-100: hsla(203, 86%, 95%, 1);\n --rpf-blue-200: hsla(204, 88%, 87%, 1);\n --rpf-blue-400: hsla(204, 88%, 74%, 1);\n --rpf-blue-600: hsla(204, 89%, 60%, 1);\n --rpf-blue-800: hsla(204, 100%, 47%, 1);\n --rpf-blue-900: hsla(204, 99%, 37%, 1);\n}\n\n:root, :host {\n --font-size-0-5: 0.5rem;\n --font-size-0-75: 0.75rem;\n --font-size-1: 1rem;\n --font-size-1-5: 1.25rem;\n --font-size-2: 1.5rem;\n --font-size-3: 2rem;\n --font-size-4: 2.5rem;\n --font-size-5: 3rem;\n --font-size-6: 3.5rem;\n --font-size-7: 4rem;\n --font-size-8: 4.5rem;\n --font-size-9: 5rem;\n}\n\n:root, :host {\n --font-weight-regular: 400;\n --font-weight-bold: 700;\n}\n\n:root, :host {\n --line-height-0-75: 0.75rem;\n --line-height-1: 1rem;\n --line-height-1-5: 1.5rem;\n --line-height-2: 2rem;\n --line-height-2-5: 2.5rem;\n --line-height-3: 3rem;\n --line-height-3-5: 3.5rem;\n --line-height-4: 4rem;\n --line-height-4-5: 4.5rem;\n --line-height-5: 5rem;\n --line-height-5-5: 5.5rem;\n --line-height-6: 6rem;\n --line-height-6-5: 6.5rem;\n}\n\n:root, :host {\n --border-radius: var(--space-1);\n --border-width-sm: 1px;\n --border-width-md: 2px;\n --border-width-lg: 3px;\n --alert-border-width: var(--border-width-md);\n --fieldset-border-width: var(--border-width-md);\n --input-border-width: var(--border-width-md);\n}\n\n:root, :host {\n --rpf-brand-black: hsla(60, 4%, 11%, 1);\n --rpf-brand-leaf: hsla(123, 43%, 48%, 1);\n --rpf-brand-raspberry: hsla(342, 71%, 47%, 1);\n --rpf-raspberry-50: hsla(338, 57%, 97%, 1);\n --rpf-raspberry-100: hsla(342, 62%, 96%, 1);\n --rpf-raspberry-200: hsla(344, 73%, 93%, 1);\n --rpf-raspberry-400: hsla(341, 63%, 84%, 1);\n --rpf-raspberry-500: hsla(343, 62%, 68%, 1);\n --rpf-raspberry-600: hsla(343, 64%, 58%, 1);\n --rpf-raspberry-800: hsla(342, 71%, 47%, 1);\n --rpf-raspberry-900: hsla(340, 78%, 36%, 1);\n}\n\n:root, :host {\n --rpf-white: hsla(0, 0%, 100%, 1);\n --rpf-off-white: hsla(225, 25%, 97%, 1);\n --rpf-grey-50: hsla(210, 8%, 95%, 1);\n --rpf-grey-100: hsla(228, 10%, 90%, 1);\n --rpf-grey-150: hsla(223, 9%, 85%, 1);\n --rpf-grey-200: hsla(228, 10%, 80%, 1);\n --rpf-grey-300: hsla(229, 9%, 75%, 1);\n --rpf-grey-400: hsla(229, 8%, 61%, 1);\n --rpf-grey-500: hsla(229, 9%, 42%, 1);\n --rpf-grey-600: hsla(228, 9%, 32%, 1);\n --rpf-grey-700: hsla(228, 9%, 22%, 1);\n --rpf-grey-800: hsla(232, 9%, 18%, 1);\n --rpf-grey-850: hsla(228, 9%, 15%, 1);\n --rpf-grey-900: hsla(228, 9%, 10%, 1);\n --rpf-grey-950: hsla(228, 8%, 5%, 1);\n --rpf-black: hsla(0, 0%, 0%, 1);\n}\n\n:root, :host {\n --space-0-125: 0.0625rem;\n --space-0-25: 0.125rem;\n --space-0-5: 0.25rem;\n --space-1: 0.5rem;\n --space-1-5: 0.75rem;\n --space-2: 1rem;\n --space-3: 1.5rem;\n --space-4: 2rem;\n --space-5: 2.5rem;\n --space-6: 3rem;\n --space-7: 3.5rem;\n --space-8: 4rem;\n --space-9: 4.5rem;\n --space-10: 5rem;\n}\n\n.rpf-accordion {\n --background-color: var(--rpf-white);\n --border-color: var(--rpf-grey-50);\n --border-width: var(--border-width-sm);\n --text-color: var(--rpf-text-primary);\n --icon-color: var(--rpf-navy-800);\n background: var(--background-color);\n border-block-start: var(--border-width) solid var(--border-color);\n}\n.rpf-accordion:last-of-type {\n border-block-end: var(--border-width) solid var(--border-color);\n}\n.rpf-accordion__container {\n border-block-start: var(--border-width) solid var(--border-color);\n}\n.rpf-accordion__container:first-of-type {\n border-block-start: none;\n}\n.rpf-accordion__text {\n font-size: var(--font-size-1);\n font-weight: var(--font-weight-regular);\n line-height: var(--line-height-1-5);\n color: var(--text-color);\n margin: 0;\n padding-block-end: var(--space-2);\n padding-block-start: var(--space-1);\n padding-inline: var(--space-2);\n}\n.rpf-accordion__title {\n font-size: var(--font-size-1-5);\n font-weight: var(--font-weight-bold);\n line-height: var(--line-height-1-5);\n align-items: center;\n color: var(--text-color);\n cursor: pointer;\n display: flex;\n justify-content: space-between;\n list-style: none;\n padding-block: var(--space-2);\n padding-inline: var(--space-2);\n}\n.rpf-accordion__title::marker {\n display: none;\n}\n.rpf-accordion__title:focus-visible {\n outline: var(--border-width-lg) solid var(--rpf-brand-raspberry);\n}\n.rpf-accordion__icon {\n background: transparent;\n display: block;\n block-size: var(--space-0-25);\n margin-block-start: 0;\n margin-inline-start: var(--space-2);\n position: relative;\n inline-size: var(--space-2);\n}\n.rpf-accordion__icon::before, .rpf-accordion__icon::after {\n background: var(--icon-color);\n border-radius: var(--border-radius);\n content: \"\";\n block-size: var(--space-0-25);\n position: absolute;\n transition: all 0.3s;\n inline-size: var(--space-2);\n}\n.rpf-accordion__icon::before {\n transform: rotate(90deg);\n}\n.rpf-accordion[open] .rpf-accordion__icon::before, .rpf-accordion__container[open] .rpf-accordion__icon::before {\n transform: rotate(180deg);\n}\n";
|
|
3892
|
+
styleInject(css_248z$5);
|
|
3893
|
+
|
|
3894
|
+
const Accordion = ({
|
|
3895
|
+
content,
|
|
3896
|
+
title,
|
|
3897
|
+
className,
|
|
3898
|
+
id
|
|
3899
|
+
}) => {
|
|
3900
|
+
const [expanded, setExpanded] = reactExports.useState(false);
|
|
3901
|
+
const classes = classNames("rpf-accordion", {
|
|
3902
|
+
"rpf-accordion--open": expanded
|
|
3903
|
+
}, className);
|
|
3904
|
+
const toggleExpanded = () => {
|
|
3905
|
+
setExpanded(!expanded);
|
|
3906
|
+
};
|
|
3907
|
+
return /*#__PURE__*/React.createElement("details", {
|
|
3908
|
+
className: classes,
|
|
3909
|
+
onClick: toggleExpanded,
|
|
3910
|
+
id: `${id}`,
|
|
3911
|
+
"aria-labelledby": id
|
|
3912
|
+
}, /*#__PURE__*/React.createElement("summary", {
|
|
3913
|
+
className: "rpf-accordion__title",
|
|
3914
|
+
role: "button",
|
|
3915
|
+
"aria-expanded": expanded,
|
|
3916
|
+
"aria-controls": `${id}-content`
|
|
3917
|
+
}, title, /*#__PURE__*/React.createElement("span", {
|
|
3918
|
+
className: "rpf-accordion__icon"
|
|
3919
|
+
})), /*#__PURE__*/React.createElement("p", {
|
|
3920
|
+
className: "rpf-accordion__text",
|
|
3921
|
+
id: `${id}-content`,
|
|
3922
|
+
"data-testid": "content"
|
|
3923
|
+
}, content));
|
|
3924
|
+
};
|
|
3925
|
+
Accordion.propTypes = {
|
|
3926
|
+
content: PropTypes.string.isRequired,
|
|
3927
|
+
title: PropTypes.string.isRequired,
|
|
3928
|
+
id: PropTypes.string.isRequired,
|
|
3929
|
+
className: PropTypes.string
|
|
3930
|
+
};
|
|
3931
|
+
Accordion.defaultProps = {
|
|
3932
|
+
title: "",
|
|
3933
|
+
content: "",
|
|
3934
|
+
id: "accordion"
|
|
3935
|
+
};
|
|
3936
|
+
|
|
3937
|
+
var css_248z$4 = ":root, :host {\n --rpf-brand-black: hsla(60, 4%, 11%, 1);\n --rpf-brand-leaf: hsla(123, 43%, 48%, 1);\n --rpf-brand-raspberry: hsla(342, 71%, 47%, 1);\n --rpf-raspberry-50: hsla(338, 57%, 97%, 1);\n --rpf-raspberry-100: hsla(342, 62%, 96%, 1);\n --rpf-raspberry-200: hsla(344, 73%, 93%, 1);\n --rpf-raspberry-400: hsla(341, 63%, 84%, 1);\n --rpf-raspberry-500: hsla(343, 62%, 68%, 1);\n --rpf-raspberry-600: hsla(343, 64%, 58%, 1);\n --rpf-raspberry-800: hsla(342, 71%, 47%, 1);\n --rpf-raspberry-900: hsla(340, 78%, 36%, 1);\n}\n\n:root, :host {\n --rpf-red-100: hsla(4, 89%, 96%, 1);\n --rpf-red-200: hsla(1, 87%, 91%, 1);\n --rpf-red-400: hsla(1, 87%, 82%, 1);\n --rpf-red-600: hsla(1, 87%, 72%, 1);\n --rpf-red-800: hsla(1, 87%, 63%, 1);\n --rpf-red-900: hsla(1, 52%, 50%, 1);\n --rpf-green-100: hsla(125, 41%, 95%, 1);\n --rpf-green-200: hsla(122, 39%, 87%, 1);\n --rpf-green-400: hsla(123, 40%, 74%, 1);\n --rpf-green-600: hsla(123, 40%, 61%, 1);\n --rpf-green-800: hsla(123, 43%, 48%, 1);\n --rpf-green-900: hsla(123, 43%, 34%, 1);\n --rpf-teal-100: hsla(176, 55%, 94%, 1);\n --rpf-teal-200: hsla(174, 55%, 85%, 1);\n --rpf-teal-400: hsla(174, 55%, 70%, 1);\n --rpf-teal-600: hsla(174, 56%, 56%, 1);\n --rpf-teal-800: hsla(174, 81%, 41%, 1);\n --rpf-teal-900: hsla(174, 81%, 27%, 1);\n --rpf-orange-100: hsla(31, 100%, 95%, 1);\n --rpf-orange-200: hsla(32, 100%, 88%, 1);\n --rpf-orange-400: hsla(31, 100%, 77%, 1);\n --rpf-orange-600: hsla(31, 99%, 65%, 1);\n --rpf-orange-800: hsla(31, 99%, 54%, 1);\n --rpf-orange-900: hsla(31, 85%, 35%, 1);\n --rpf-yellow-100: hsla(51, 100%, 95%, 1);\n --rpf-yellow-200: hsla(52, 100%, 87%, 1);\n --rpf-yellow-400: hsla(51, 100%, 75%, 1);\n --rpf-yellow-600: hsla(52, 100%, 63%, 1);\n --rpf-yellow-800: hsla(52, 100%, 50%, 1);\n --rpf-yellow-900: hsla(52, 100%, 26%, 1);\n --rpf-purple-100: hsla(282, 36%, 95%, 1);\n --rpf-purple-200: hsla(279, 38%, 87%, 1);\n --rpf-purple-400: hsla(279, 38%, 73%, 1);\n --rpf-purple-600: hsla(279, 37%, 60%, 1);\n --rpf-purple-800: hsla(279, 43%, 47%, 1);\n --rpf-purple-900: hsla(280, 43%, 37%, 1);\n --rpf-navy-100: hsla(235, 38%, 94%, 1);\n --rpf-navy-200: hsla(234, 38%, 84%, 1);\n --rpf-navy-400: hsla(235, 38%, 69%, 1);\n --rpf-navy-600: hsla(235, 38%, 53%, 1);\n --rpf-navy-800: hsla(235, 63%, 37%, 1);\n --rpf-navy-900: hsla(234, 63%, 30%, 1);\n --rpf-blue-100: hsla(203, 86%, 95%, 1);\n --rpf-blue-200: hsla(204, 88%, 87%, 1);\n --rpf-blue-400: hsla(204, 88%, 74%, 1);\n --rpf-blue-600: hsla(204, 89%, 60%, 1);\n --rpf-blue-800: hsla(204, 100%, 47%, 1);\n --rpf-blue-900: hsla(204, 99%, 37%, 1);\n}\n\n:root, :host {\n --rpf-white: hsla(0, 0%, 100%, 1);\n --rpf-off-white: hsla(225, 25%, 97%, 1);\n --rpf-grey-50: hsla(210, 8%, 95%, 1);\n --rpf-grey-100: hsla(228, 10%, 90%, 1);\n --rpf-grey-150: hsla(223, 9%, 85%, 1);\n --rpf-grey-200: hsla(228, 10%, 80%, 1);\n --rpf-grey-300: hsla(229, 9%, 75%, 1);\n --rpf-grey-400: hsla(229, 8%, 61%, 1);\n --rpf-grey-500: hsla(229, 9%, 42%, 1);\n --rpf-grey-600: hsla(228, 9%, 32%, 1);\n --rpf-grey-700: hsla(228, 9%, 22%, 1);\n --rpf-grey-800: hsla(232, 9%, 18%, 1);\n --rpf-grey-850: hsla(228, 9%, 15%, 1);\n --rpf-grey-900: hsla(228, 9%, 10%, 1);\n --rpf-grey-950: hsla(228, 8%, 5%, 1);\n --rpf-black: hsla(0, 0%, 0%, 1);\n}\n\n:root, :host {\n --rpf-alert-error-highlight: hsla(0, 88%, 99%, 1);\n --rpf-alert-error: hsla(0, 88%, 33%, 1);\n --rpf-alert-information-highlight: hsla(225, 64%, 99%, 1);\n --rpf-alert-information: hsla(225, 64%, 33%, 1);\n --rpf-alert-success-highlight: hsla(136, 90%, 99%, 1);\n --rpf-alert-success: hsla(136, 90%, 20%, 1);\n --rpf-alert-warning-highlight: hsla(26, 70%, 99%, 1);\n --rpf-alert-warning: hsla(26, 70%, 29%, 1);\n}\n\n:root, :host {\n --font-size-0-5: 0.5rem;\n --font-size-0-75: 0.75rem;\n --font-size-1: 1rem;\n --font-size-1-5: 1.25rem;\n --font-size-2: 1.5rem;\n --font-size-3: 2rem;\n --font-size-4: 2.5rem;\n --font-size-5: 3rem;\n --font-size-6: 3.5rem;\n --font-size-7: 4rem;\n --font-size-8: 4.5rem;\n --font-size-9: 5rem;\n}\n\n:root, :host {\n --font-weight-regular: 400;\n --font-weight-bold: 700;\n}\n\n:root, :host {\n --border-radius: var(--space-1);\n --border-width-sm: 1px;\n --border-width-md: 2px;\n --border-width-lg: 3px;\n --alert-border-width: var(--border-width-md);\n --fieldset-border-width: var(--border-width-md);\n --input-border-width: var(--border-width-md);\n}\n\n:root, :host {\n --space-0-125: 0.0625rem;\n --space-0-25: 0.125rem;\n --space-0-5: 0.25rem;\n --space-1: 0.5rem;\n --space-1-5: 0.75rem;\n --space-2: 1rem;\n --space-3: 1.5rem;\n --space-4: 2rem;\n --space-5: 2.5rem;\n --space-6: 3rem;\n --space-7: 3.5rem;\n --space-8: 4rem;\n --space-9: 4.5rem;\n --space-10: 5rem;\n}\n\n.rpf-button {\n --rpf-button-background-color: var(--rpf-navy-800);\n --rpf-button-background-color-hover: var(--rpf-navy-900);\n --rpf-button-background-color-active: var(--rpf-navy-600);\n --rpf-button-background-color-disabled: var(--rpf-grey-600);\n --rpf-button-text-color: var(--rpf-white);\n --rpf-button-border-radius: var(--border-radius);\n --rpf-button-lg-height: 48px;\n --rpf-button-sm-height: 32px;\n /* 44px min-height to meet WCAG AAA target size requirements */\n --rpf-button-min-target-size: 44px;\n all: unset;\n align-items: center;\n box-sizing: border-box;\n color: var(--rpf-button-text-color);\n /*\n * We've decided to follow the masses on this and have a pointer on buttons.\n * Google, Facebook, Twitter, Mozilla, and Microsoft amongst many others have a pointer on buttons.\n */\n cursor: pointer;\n display: flex;\n font-size: var(--font-size-1-5);\n font-weight: var(--font-weight-bold);\n gap: var(--space-1);\n min-block-size: var(--rpf-button-lg-height);\n padding: var(--space-1) var(--space-2);\n position: relative;\n text-align: center;\n text-decoration: none;\n /* Fixes a rendering error that sometimes occurs due to negative z-index */\n transform: scale(1);\n inline-size: fit-content;\n /* A bit of a hack to allow for separate visual and target heights */\n}\n.rpf-button::before {\n background-color: var(--rpf-button-background-color);\n border-color: var(--rpf-button-background-color);\n border-radius: var(--rpf-button-border-radius);\n border-style: solid;\n border-width: 2px;\n content: \"\";\n display: block;\n inset: 0;\n position: absolute;\n /* To ensure it renders under its siblings */\n z-index: -1;\n}\n.rpf-button:hover::before {\n background-color: var(--rpf-button-background-color-hover);\n border-color: var(--rpf-button-background-color-hover);\n}\n.rpf-button:active::before {\n background-color: var(--rpf-button-background-color-active);\n border-color: var(--rpf-button-background-color-active);\n}\n.rpf-button:focus-visible::before {\n outline: 2px solid var(--rpf-button-background-color);\n outline-offset: 3px;\n}\n.rpf-button:disabled, .rpf-button--disabled {\n cursor: default;\n}\n.rpf-button:disabled::before, .rpf-button:disabled:hover::before, .rpf-button--disabled::before, .rpf-button--disabled:hover::before {\n border-color: var(--rpf-button-background-color-disabled);\n background-color: var(--rpf-button-background-color-disabled);\n}\n.rpf-button--secondary {\n color: var(--rpf-button-background-color);\n}\n.rpf-button--secondary::before {\n background-color: var(--rpf-button-text-color);\n}\n.rpf-button--secondary:hover {\n color: var(--rpf-button-background-color-hover);\n}\n.rpf-button--secondary:hover::before {\n background-color: var(--rpf-button-text-color);\n border-color: var(--rpf-button-background-color-hover);\n}\n.rpf-button--secondary:active {\n color: var(--rpf-button-background-color-active);\n}\n.rpf-button--secondary:active::before {\n background-color: var(--rpf-button-text-color);\n border-color: var(--rpf-button-background-color-active);\n}\n.rpf-button--secondary:disabled, .rpf-button--secondary.rpf-button--disabled {\n color: var(--rpf-button-background-color-disabled);\n}\n.rpf-button--secondary:disabled:hover::before, .rpf-button--secondary:disabled:before, .rpf-button--secondary.rpf-button--disabled:hover::before, .rpf-button--secondary.rpf-button--disabled:before {\n background-color: var(--rpf-button-text-color);\n border-color: var(--rpf-button-background-color-disabled);\n}\n.rpf-button--tertiary {\n color: var(--rpf-button-background-color);\n}\n.rpf-button--tertiary::before {\n background-color: transparent;\n border-color: transparent;\n}\n.rpf-button--tertiary:hover {\n color: var(--rpf-button-background-color-hover);\n}\n.rpf-button--tertiary:hover::before {\n background-color: transparent;\n border-color: transparent;\n}\n.rpf-button--tertiary:active {\n color: var(--rpf-button-background-color-active);\n}\n.rpf-button--tertiary:active::before {\n background-color: transparent;\n}\n.rpf-button--tertiary:disabled, .rpf-button--tertiary.rpf-button--disabled {\n color: var(--rpf-button-background-color-disabled);\n}\n.rpf-button--tertiary:disabled::before, .rpf-button--tertiary:disabled:hover::before, .rpf-button--tertiary.rpf-button--disabled::before, .rpf-button--tertiary.rpf-button--disabled:hover::before {\n background-color: transparent;\n border-color: transparent;\n}\n.rpf-button--danger {\n --rpf-button-background-color: var(--rpf-alert-error);\n --rpf-button-background-color-hover: var(--rpf-alert-error);\n --rpf-button-background-color-active: var(--rpf-red-900);\n}\n.rpf-button--icon-only {\n block-size: var(--rpf-button-lg-height);\n line-height: var(--rpf-button-lg-height);\n padding: 0;\n text-align: center;\n inline-size: var(--rpf-button-lg-height);\n}\n.rpf-button--icon-only .rpf-button__icon {\n margin: 0 auto;\n}\n.rpf-button--sm {\n font-size: var(--font-size-1);\n min-block-size: var(--rpf-button-min-target-size);\n padding: var(--space-1) var(--space-1);\n /* To account for 32px visual height and 44px target height */\n}\n.rpf-button--sm::before {\n inset: calc((var(--rpf-button-min-target-size) - var(--rpf-button-sm-height)) / 2) 0;\n}\n.rpf-button--sm.rpf-button--icon-only {\n block-size: var(--rpf-button-min-target-size);\n line-height: var(--rpf-button-min-target-size);\n padding: 0;\n inline-size: var(--rpf-button-min-target-size);\n}\n.rpf-button--sm.rpf-button--icon-only::before {\n inset: calc((var(--rpf-button-min-target-size) - var(--rpf-button-sm-height)) / 2);\n}\n.rpf-button--sm .material-symbols-sharp {\n font-size: 20px;\n font-variation-settings: \"OPSZ\" 20;\n}\n.rpf-button--full-width {\n justify-content: center;\n inline-size: 100%;\n}\n";
|
|
3938
|
+
styleInject(css_248z$4);
|
|
3893
3939
|
|
|
3894
3940
|
/* eslint-disable complexity */
|
|
3895
3941
|
const Button = ({
|
|
@@ -3909,7 +3955,7 @@ const Button = ({
|
|
|
3909
3955
|
"aria-label": ariaLabel
|
|
3910
3956
|
}) => {
|
|
3911
3957
|
const iconButton = icon && iconOnly;
|
|
3912
|
-
const classes =
|
|
3958
|
+
const classes = classNames(
|
|
3913
3959
|
// Static classes
|
|
3914
3960
|
"rpf-button",
|
|
3915
3961
|
// Conditional classes
|
|
@@ -3972,4 +4018,223 @@ Button.defaultProps = {
|
|
|
3972
4018
|
"aria-label": ""
|
|
3973
4019
|
};
|
|
3974
4020
|
|
|
3975
|
-
|
|
4021
|
+
var css_248z$3 = ":root, :host {\n --space-0-125: 0.0625rem;\n --space-0-25: 0.125rem;\n --space-0-5: 0.25rem;\n --space-1: 0.5rem;\n --space-1-5: 0.75rem;\n --space-2: 1rem;\n --space-3: 1.5rem;\n --space-4: 2rem;\n --space-5: 2.5rem;\n --space-6: 3rem;\n --space-7: 3.5rem;\n --space-8: 4rem;\n --space-9: 4.5rem;\n --space-10: 5rem;\n}\n\n:root, :host {\n --rpf-white: hsla(0, 0%, 100%, 1);\n --rpf-off-white: hsla(225, 25%, 97%, 1);\n --rpf-grey-50: hsla(210, 8%, 95%, 1);\n --rpf-grey-100: hsla(228, 10%, 90%, 1);\n --rpf-grey-150: hsla(223, 9%, 85%, 1);\n --rpf-grey-200: hsla(228, 10%, 80%, 1);\n --rpf-grey-300: hsla(229, 9%, 75%, 1);\n --rpf-grey-400: hsla(229, 8%, 61%, 1);\n --rpf-grey-500: hsla(229, 9%, 42%, 1);\n --rpf-grey-600: hsla(228, 9%, 32%, 1);\n --rpf-grey-700: hsla(228, 9%, 22%, 1);\n --rpf-grey-800: hsla(232, 9%, 18%, 1);\n --rpf-grey-850: hsla(228, 9%, 15%, 1);\n --rpf-grey-900: hsla(228, 9%, 10%, 1);\n --rpf-grey-950: hsla(228, 8%, 5%, 1);\n --rpf-black: hsla(0, 0%, 0%, 1);\n}\n\n:root, :host {\n --rpf-red-100: hsla(4, 89%, 96%, 1);\n --rpf-red-200: hsla(1, 87%, 91%, 1);\n --rpf-red-400: hsla(1, 87%, 82%, 1);\n --rpf-red-600: hsla(1, 87%, 72%, 1);\n --rpf-red-800: hsla(1, 87%, 63%, 1);\n --rpf-red-900: hsla(1, 52%, 50%, 1);\n --rpf-green-100: hsla(125, 41%, 95%, 1);\n --rpf-green-200: hsla(122, 39%, 87%, 1);\n --rpf-green-400: hsla(123, 40%, 74%, 1);\n --rpf-green-600: hsla(123, 40%, 61%, 1);\n --rpf-green-800: hsla(123, 43%, 48%, 1);\n --rpf-green-900: hsla(123, 43%, 34%, 1);\n --rpf-teal-100: hsla(176, 55%, 94%, 1);\n --rpf-teal-200: hsla(174, 55%, 85%, 1);\n --rpf-teal-400: hsla(174, 55%, 70%, 1);\n --rpf-teal-600: hsla(174, 56%, 56%, 1);\n --rpf-teal-800: hsla(174, 81%, 41%, 1);\n --rpf-teal-900: hsla(174, 81%, 27%, 1);\n --rpf-orange-100: hsla(31, 100%, 95%, 1);\n --rpf-orange-200: hsla(32, 100%, 88%, 1);\n --rpf-orange-400: hsla(31, 100%, 77%, 1);\n --rpf-orange-600: hsla(31, 99%, 65%, 1);\n --rpf-orange-800: hsla(31, 99%, 54%, 1);\n --rpf-orange-900: hsla(31, 85%, 35%, 1);\n --rpf-yellow-100: hsla(51, 100%, 95%, 1);\n --rpf-yellow-200: hsla(52, 100%, 87%, 1);\n --rpf-yellow-400: hsla(51, 100%, 75%, 1);\n --rpf-yellow-600: hsla(52, 100%, 63%, 1);\n --rpf-yellow-800: hsla(52, 100%, 50%, 1);\n --rpf-yellow-900: hsla(52, 100%, 26%, 1);\n --rpf-purple-100: hsla(282, 36%, 95%, 1);\n --rpf-purple-200: hsla(279, 38%, 87%, 1);\n --rpf-purple-400: hsla(279, 38%, 73%, 1);\n --rpf-purple-600: hsla(279, 37%, 60%, 1);\n --rpf-purple-800: hsla(279, 43%, 47%, 1);\n --rpf-purple-900: hsla(280, 43%, 37%, 1);\n --rpf-navy-100: hsla(235, 38%, 94%, 1);\n --rpf-navy-200: hsla(234, 38%, 84%, 1);\n --rpf-navy-400: hsla(235, 38%, 69%, 1);\n --rpf-navy-600: hsla(235, 38%, 53%, 1);\n --rpf-navy-800: hsla(235, 63%, 37%, 1);\n --rpf-navy-900: hsla(234, 63%, 30%, 1);\n --rpf-blue-100: hsla(203, 86%, 95%, 1);\n --rpf-blue-200: hsla(204, 88%, 87%, 1);\n --rpf-blue-400: hsla(204, 88%, 74%, 1);\n --rpf-blue-600: hsla(204, 89%, 60%, 1);\n --rpf-blue-800: hsla(204, 100%, 47%, 1);\n --rpf-blue-900: hsla(204, 99%, 37%, 1);\n}\n\n:root, :host {\n --font-size-0-5: 0.5rem;\n --font-size-0-75: 0.75rem;\n --font-size-1: 1rem;\n --font-size-1-5: 1.25rem;\n --font-size-2: 1.5rem;\n --font-size-3: 2rem;\n --font-size-4: 2.5rem;\n --font-size-5: 3rem;\n --font-size-6: 3.5rem;\n --font-size-7: 4rem;\n --font-size-8: 4.5rem;\n --font-size-9: 5rem;\n}\n\n:root, :host {\n --font-weight-regular: 400;\n --font-weight-bold: 700;\n}\n\n:root, :host {\n --line-height-0-75: 0.75rem;\n --line-height-1: 1rem;\n --line-height-1-5: 1.5rem;\n --line-height-2: 2rem;\n --line-height-2-5: 2.5rem;\n --line-height-3: 3rem;\n --line-height-3-5: 3.5rem;\n --line-height-4: 4rem;\n --line-height-4-5: 4.5rem;\n --line-height-5: 5rem;\n --line-height-5-5: 5.5rem;\n --line-height-6: 6rem;\n --line-height-6-5: 6.5rem;\n}\n\n:root {\n --color-progress-bar-complete: var(--rpf-navy-800);\n --color-progress-bar-incomplete: var(--rpf-grey-150);\n}\n\n.rpf-progress-bar {\n align-items: center;\n display: flex;\n gap: var(--space-3);\n}\n.rpf-progress-bar__step {\n font-size: var(--font-size-1);\n font-weight: var(--font-weight-regular);\n line-height: var(--line-height-1-5);\n flex: 1 0 auto;\n inline-size: max-content;\n}\n.rpf-progress-bar__bar {\n background: var(--color-progress-bar-incomplete);\n block-size: 6px;\n border-radius: 6px;\n inline-size: 100%;\n overflow: hidden;\n}\n.rpf-progress-bar__progress {\n background: var(--color-progress-bar-complete);\n block-size: 100%;\n border-radius: 6px;\n}\n";
|
|
4022
|
+
styleInject(css_248z$3);
|
|
4023
|
+
|
|
4024
|
+
/* eslint-disable complexity */
|
|
4025
|
+
const ProgressBar = ({
|
|
4026
|
+
text,
|
|
4027
|
+
percent
|
|
4028
|
+
}) => /*#__PURE__*/React.createElement("div", {
|
|
4029
|
+
className: "rpf-progress-bar"
|
|
4030
|
+
}, text && /*#__PURE__*/React.createElement("div", {
|
|
4031
|
+
className: "rpf-progress-bar__step"
|
|
4032
|
+
}, text), /*#__PURE__*/React.createElement("div", {
|
|
4033
|
+
className: "rpf-progress-bar__bar"
|
|
4034
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
4035
|
+
className: "rpf-progress-bar__progress",
|
|
4036
|
+
style: {
|
|
4037
|
+
width: `${percent}%`
|
|
4038
|
+
}
|
|
4039
|
+
})));
|
|
4040
|
+
ProgressBar.propTypes = {
|
|
4041
|
+
text: PropTypes.string,
|
|
4042
|
+
percent: PropTypes.number.isRequired
|
|
4043
|
+
};
|
|
4044
|
+
ProgressBar.defaultProps = {
|
|
4045
|
+
text: ""
|
|
4046
|
+
};
|
|
4047
|
+
|
|
4048
|
+
var css_248z$2 = ":root, :host {\n --border-radius: var(--space-1);\n --border-width-sm: 1px;\n --border-width-md: 2px;\n --border-width-lg: 3px;\n --alert-border-width: var(--border-width-md);\n --fieldset-border-width: var(--border-width-md);\n --input-border-width: var(--border-width-md);\n}\n\n:root, :host {\n --rpf-alert-error-highlight: hsla(0, 88%, 99%, 1);\n --rpf-alert-error: hsla(0, 88%, 33%, 1);\n --rpf-alert-information-highlight: hsla(225, 64%, 99%, 1);\n --rpf-alert-information: hsla(225, 64%, 33%, 1);\n --rpf-alert-success-highlight: hsla(136, 90%, 99%, 1);\n --rpf-alert-success: hsla(136, 90%, 20%, 1);\n --rpf-alert-warning-highlight: hsla(26, 70%, 99%, 1);\n --rpf-alert-warning: hsla(26, 70%, 29%, 1);\n}\n\n:root, :host {\n --rpf-white: hsla(0, 0%, 100%, 1);\n --rpf-off-white: hsla(225, 25%, 97%, 1);\n --rpf-grey-50: hsla(210, 8%, 95%, 1);\n --rpf-grey-100: hsla(228, 10%, 90%, 1);\n --rpf-grey-150: hsla(223, 9%, 85%, 1);\n --rpf-grey-200: hsla(228, 10%, 80%, 1);\n --rpf-grey-300: hsla(229, 9%, 75%, 1);\n --rpf-grey-400: hsla(229, 8%, 61%, 1);\n --rpf-grey-500: hsla(229, 9%, 42%, 1);\n --rpf-grey-600: hsla(228, 9%, 32%, 1);\n --rpf-grey-700: hsla(228, 9%, 22%, 1);\n --rpf-grey-800: hsla(232, 9%, 18%, 1);\n --rpf-grey-850: hsla(228, 9%, 15%, 1);\n --rpf-grey-900: hsla(228, 9%, 10%, 1);\n --rpf-grey-950: hsla(228, 8%, 5%, 1);\n --rpf-black: hsla(0, 0%, 0%, 1);\n}\n\n:root, :host {\n --rpf-red-100: hsla(4, 89%, 96%, 1);\n --rpf-red-200: hsla(1, 87%, 91%, 1);\n --rpf-red-400: hsla(1, 87%, 82%, 1);\n --rpf-red-600: hsla(1, 87%, 72%, 1);\n --rpf-red-800: hsla(1, 87%, 63%, 1);\n --rpf-red-900: hsla(1, 52%, 50%, 1);\n --rpf-green-100: hsla(125, 41%, 95%, 1);\n --rpf-green-200: hsla(122, 39%, 87%, 1);\n --rpf-green-400: hsla(123, 40%, 74%, 1);\n --rpf-green-600: hsla(123, 40%, 61%, 1);\n --rpf-green-800: hsla(123, 43%, 48%, 1);\n --rpf-green-900: hsla(123, 43%, 34%, 1);\n --rpf-teal-100: hsla(176, 55%, 94%, 1);\n --rpf-teal-200: hsla(174, 55%, 85%, 1);\n --rpf-teal-400: hsla(174, 55%, 70%, 1);\n --rpf-teal-600: hsla(174, 56%, 56%, 1);\n --rpf-teal-800: hsla(174, 81%, 41%, 1);\n --rpf-teal-900: hsla(174, 81%, 27%, 1);\n --rpf-orange-100: hsla(31, 100%, 95%, 1);\n --rpf-orange-200: hsla(32, 100%, 88%, 1);\n --rpf-orange-400: hsla(31, 100%, 77%, 1);\n --rpf-orange-600: hsla(31, 99%, 65%, 1);\n --rpf-orange-800: hsla(31, 99%, 54%, 1);\n --rpf-orange-900: hsla(31, 85%, 35%, 1);\n --rpf-yellow-100: hsla(51, 100%, 95%, 1);\n --rpf-yellow-200: hsla(52, 100%, 87%, 1);\n --rpf-yellow-400: hsla(51, 100%, 75%, 1);\n --rpf-yellow-600: hsla(52, 100%, 63%, 1);\n --rpf-yellow-800: hsla(52, 100%, 50%, 1);\n --rpf-yellow-900: hsla(52, 100%, 26%, 1);\n --rpf-purple-100: hsla(282, 36%, 95%, 1);\n --rpf-purple-200: hsla(279, 38%, 87%, 1);\n --rpf-purple-400: hsla(279, 38%, 73%, 1);\n --rpf-purple-600: hsla(279, 37%, 60%, 1);\n --rpf-purple-800: hsla(279, 43%, 47%, 1);\n --rpf-purple-900: hsla(280, 43%, 37%, 1);\n --rpf-navy-100: hsla(235, 38%, 94%, 1);\n --rpf-navy-200: hsla(234, 38%, 84%, 1);\n --rpf-navy-400: hsla(235, 38%, 69%, 1);\n --rpf-navy-600: hsla(235, 38%, 53%, 1);\n --rpf-navy-800: hsla(235, 63%, 37%, 1);\n --rpf-navy-900: hsla(234, 63%, 30%, 1);\n --rpf-blue-100: hsla(203, 86%, 95%, 1);\n --rpf-blue-200: hsla(204, 88%, 87%, 1);\n --rpf-blue-400: hsla(204, 88%, 74%, 1);\n --rpf-blue-600: hsla(204, 89%, 60%, 1);\n --rpf-blue-800: hsla(204, 100%, 47%, 1);\n --rpf-blue-900: hsla(204, 99%, 37%, 1);\n}\n\n:root, :host {\n --rpf-text-primary: hsla(0, 0%, 13%, 1);\n --rpf-text-primary-darkmode: var(--rpf-white);\n --rpf-text-secondary: hsla(200, 9%, 33%, 1);\n --rpf-text-secondary-darkmode: hsla(0, 0%, 80%, 1);\n}\n\n:root, :host {\n --rpf-input-background-color: var(--rpf-white);\n --rpf-input-background-color-disabled: var(--rpf-grey-50);\n --rpf-input-background-color-readonly: var(--rpf-grey-50);\n --rpf-input-color-error: var(--rpf-alert-error);\n --rpf-input-color: var(--rpf-text-primary);\n --rpf-input-outline-color: var(--rpf-blue-800);\n}\n\n:root, :host {\n --font-size-0-5: 0.5rem;\n --font-size-0-75: 0.75rem;\n --font-size-1: 1rem;\n --font-size-1-5: 1.25rem;\n --font-size-2: 1.5rem;\n --font-size-3: 2rem;\n --font-size-4: 2.5rem;\n --font-size-5: 3rem;\n --font-size-6: 3.5rem;\n --font-size-7: 4rem;\n --font-size-8: 4.5rem;\n --font-size-9: 5rem;\n}\n\n:root, :host {\n --space-0-125: 0.0625rem;\n --space-0-25: 0.125rem;\n --space-0-5: 0.25rem;\n --space-1: 0.5rem;\n --space-1-5: 0.75rem;\n --space-2: 1rem;\n --space-3: 1.5rem;\n --space-4: 2rem;\n --space-5: 2.5rem;\n --space-6: 3rem;\n --space-7: 3.5rem;\n --space-8: 4rem;\n --space-9: 4.5rem;\n --space-10: 5rem;\n}\n\n.rpf-input-field {\n margin-block-end: var(--space-3);\n}\n\n.rpf-input {\n all: unset;\n background-color: var(--rpf-input-background-color);\n border: var(--input-border-width) solid var(--rpf-input-color);\n border-radius: var(--border-radius);\n box-sizing: border-box;\n color: var(--rpf-input-color);\n display: flex;\n font-size: var(--font-size-1);\n line-height: var(--line-height-2);\n padding-block: calc(var(--space-1) - 2px);\n padding-inline: var(--space-1-5);\n max-width: 50ch;\n min-width: 240px;\n width: 100%;\n}\n.rpf-input:focus-visible {\n outline: 3px solid var(--rpf-input-outline-color);\n}\n.rpf-input:disabled, .rpf-input--disabled {\n background-color: var(--rpf-input-background-color-disabled);\n border-color: var(--rpf-input-background-color-disabled);\n}\n.rpf-input--error {\n border-color: var(--rpf-input-color-error);\n}\n.rpf-input--full-width {\n max-width: none;\n}\n\n:root, :host {\n --font-weight-regular: 400;\n --font-weight-bold: 700;\n}\n\n:root, :host {\n --line-height-0-75: 0.75rem;\n --line-height-1: 1rem;\n --line-height-1-5: 1.5rem;\n --line-height-2: 2rem;\n --line-height-2-5: 2.5rem;\n --line-height-3: 3rem;\n --line-height-3-5: 3.5rem;\n --line-height-4: 4rem;\n --line-height-4-5: 4.5rem;\n --line-height-5: 5rem;\n --line-height-5-5: 5.5rem;\n --line-height-6: 6rem;\n --line-height-6-5: 6.5rem;\n}\n\n:root {\n --rpf-label-hint-color: var(--rpf-text-secondary);\n --rpf-label-text-color: var(--rpf-text-primary);\n --rpf-label-text-color-disabled: var(--rpf-grey-500);\n}\n\n.rpf-label {\n all: unset;\n color: var(--rpf-label-text-color);\n display: flex;\n flex-direction: column;\n font-weight: var(--font-weight-bold);\n padding-block-end: var(--space-1);\n font-size: var(--font-size-1);\n line-height: var(--line-height-1-5);\n}\n.rpf-label__hint {\n color: var(--rpf-label-hint-color);\n font-size: var(--font-size-1);\n font-weight: var(--font-weight-regular);\n}\n.rpf-label--disabled {\n color: var(--rpf-label-text-color-disabled);\n}\n.rpf-label--disabled .rpf-label__hint {\n color: var(--rpf-label-text-color-disabled);\n}\n\n.rpf-input-checkbox {\n --rpf-input-checkbox-hit-target: 44px;\n --rpf-input-checkbox-size: var(--space-3);\n align-items: center;\n border-radius: var(--space-1);\n box-sizing: border-box;\n display: flex;\n gap: var(--space-1-5);\n margin-block-end: var(--space-1);\n max-width: 50ch;\n min-height: var(--rpf-input-checkbox-hit-target);\n min-width: 240px;\n padding-block: calc((var(--rpf-input-checkbox-hit-target) - var(--rpf-input-checkbox-size)) / 2);\n padding-inline: var(--space-1);\n width: 100%;\n}\n.rpf-input-checkbox input[type=checkbox] {\n align-self: flex-start;\n appearance: none;\n background: var(--rpf-white);\n border: var(--space-0-25) solid var(--rpf-grey-850);\n border-radius: var(--space-0-5);\n flex-shrink: 0;\n height: var(--rpf-input-checkbox-size);\n margin: 0;\n width: var(--rpf-input-checkbox-size);\n}\n.rpf-input-checkbox input[type=checkbox]:checked {\n background: var(--rpf-grey-850);\n background-image: url('data:image/svg+xml;utf8,<svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M7.95834 15.0003L3.20834 10.2503L4.39584 9.06283L7.95834 12.6253L15.6042 4.97949L16.7917 6.16699L7.95834 15.0003Z\" fill=\"white\"/></svg>');\n}\n.rpf-input-checkbox input[type=checkbox]:disabled {\n border-color: var(--rpf-grey-600);\n}\n.rpf-input-checkbox input[type=checkbox]:disabled:checked {\n background-color: var(--rpf-grey-600);\n}\n.rpf-input-checkbox.rpf-input--full-width {\n max-width: none;\n}\n.rpf-input-checkbox:has(> input[type=checkbox]:disabled), .rpf-input-checkbox--disabled {\n background-color: var(--rpf-input-background-color-disabled);\n color: var(--rpf-grey-400);\n}\n.rpf-input-checkbox:has(> input[type=checkbox]:focus-visible) {\n outline: 3px solid var(--rpf-input-outline-color);\n}\n.rpf-input-checkbox:has(> input[type=checkbox]:focus-visible) > input[type=checkbox]:focus-visible {\n outline: none;\n}\n\n:root {\n --rpf-message-text-color: var(--rpf-alert-error);\n}\n\n.rpf-error-message {\n all: unset;\n align-items: center;\n color: var(--rpf-message-text-color);\n display: flex;\n font-weight: var(--font-weight-bold);\n padding-block-end: var(--space-1);\n}\n.rpf-error-message__icon {\n margin-inline-end: var(--space-1);\n padding-block: var(--space-1);\n}\n";
|
|
4049
|
+
styleInject(css_248z$2);
|
|
4050
|
+
|
|
4051
|
+
const CheckboxInput = ({
|
|
4052
|
+
checked,
|
|
4053
|
+
disabled,
|
|
4054
|
+
error,
|
|
4055
|
+
id,
|
|
4056
|
+
label,
|
|
4057
|
+
name,
|
|
4058
|
+
onChange,
|
|
4059
|
+
value
|
|
4060
|
+
}) => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("label", {
|
|
4061
|
+
class: classNames("rpf-input-checkbox", {
|
|
4062
|
+
"rpf-input-checkbox--error": error
|
|
4063
|
+
})
|
|
4064
|
+
}, /*#__PURE__*/React.createElement("input", {
|
|
4065
|
+
checked: !!checked,
|
|
4066
|
+
disabled: disabled,
|
|
4067
|
+
id: id,
|
|
4068
|
+
name: name,
|
|
4069
|
+
onChange: onChange,
|
|
4070
|
+
type: "checkbox",
|
|
4071
|
+
value: value
|
|
4072
|
+
}), /*#__PURE__*/React.createElement("span", {
|
|
4073
|
+
class: "checkmark"
|
|
4074
|
+
}), label), error && /*#__PURE__*/React.createElement("div", {
|
|
4075
|
+
class: "rpf-error-message"
|
|
4076
|
+
}, /*#__PURE__*/React.createElement("span", {
|
|
4077
|
+
class: "rpf-error-message__icon material-symbols-sharp"
|
|
4078
|
+
}, "error"), error));
|
|
4079
|
+
CheckboxInput.propTypes = {
|
|
4080
|
+
checked: PropTypes.bool,
|
|
4081
|
+
disabled: PropTypes.bool,
|
|
4082
|
+
error: PropTypes.string,
|
|
4083
|
+
id: PropTypes.string.isRequired,
|
|
4084
|
+
label: PropTypes.string.isRequired,
|
|
4085
|
+
name: PropTypes.string.isRequired,
|
|
4086
|
+
onChange: PropTypes.func,
|
|
4087
|
+
value: PropTypes.string
|
|
4088
|
+
};
|
|
4089
|
+
CheckboxInput.defaultProps = {
|
|
4090
|
+
checked: true,
|
|
4091
|
+
disabled: false,
|
|
4092
|
+
error: "default",
|
|
4093
|
+
onChange: () => {},
|
|
4094
|
+
value: "on"
|
|
4095
|
+
};
|
|
4096
|
+
|
|
4097
|
+
const InputField = ({
|
|
4098
|
+
disabled,
|
|
4099
|
+
error,
|
|
4100
|
+
hint,
|
|
4101
|
+
label,
|
|
4102
|
+
name,
|
|
4103
|
+
children
|
|
4104
|
+
}) => /*#__PURE__*/React.createElement("div", {
|
|
4105
|
+
className: "rpf-input-field"
|
|
4106
|
+
}, (label || hint) && /*#__PURE__*/React.createElement("label", {
|
|
4107
|
+
htmlFor: name,
|
|
4108
|
+
className: classNames("rpf-label", {
|
|
4109
|
+
"rpf-label--disabled": disabled
|
|
4110
|
+
})
|
|
4111
|
+
}, label, /*#__PURE__*/React.createElement("small", {
|
|
4112
|
+
className: "rpf-label__hint"
|
|
4113
|
+
}, hint)), children, error && /*#__PURE__*/React.createElement("div", {
|
|
4114
|
+
className: "rpf-error-message"
|
|
4115
|
+
}, /*#__PURE__*/React.createElement("span", {
|
|
4116
|
+
className: "rpf-error-message__icon material-symbols-sharp"
|
|
4117
|
+
}, "error"), error));
|
|
4118
|
+
InputField.propTypes = {
|
|
4119
|
+
disabled: PropTypes.bool,
|
|
4120
|
+
error: PropTypes.string,
|
|
4121
|
+
hint: PropTypes.string,
|
|
4122
|
+
label: PropTypes.string.isRequired,
|
|
4123
|
+
name: PropTypes.string.isRequired
|
|
4124
|
+
};
|
|
4125
|
+
InputField.defaultProps = {
|
|
4126
|
+
disabled: false,
|
|
4127
|
+
error: "default",
|
|
4128
|
+
hint: ""
|
|
4129
|
+
};
|
|
4130
|
+
|
|
4131
|
+
var css_248z$1 = ":root, :host {\n --rpf-alert-error-highlight: hsla(0, 88%, 99%, 1);\n --rpf-alert-error: hsla(0, 88%, 33%, 1);\n --rpf-alert-information-highlight: hsla(225, 64%, 99%, 1);\n --rpf-alert-information: hsla(225, 64%, 33%, 1);\n --rpf-alert-success-highlight: hsla(136, 90%, 99%, 1);\n --rpf-alert-success: hsla(136, 90%, 20%, 1);\n --rpf-alert-warning-highlight: hsla(26, 70%, 99%, 1);\n --rpf-alert-warning: hsla(26, 70%, 29%, 1);\n}\n\n:root, :host {\n --font-weight-regular: 400;\n --font-weight-bold: 700;\n}\n\n:root, :host {\n --space-0-125: 0.0625rem;\n --space-0-25: 0.125rem;\n --space-0-5: 0.25rem;\n --space-1: 0.5rem;\n --space-1-5: 0.75rem;\n --space-2: 1rem;\n --space-3: 1.5rem;\n --space-4: 2rem;\n --space-5: 2.5rem;\n --space-6: 3rem;\n --space-7: 3.5rem;\n --space-8: 4rem;\n --space-9: 4.5rem;\n --space-10: 5rem;\n}\n\n:root {\n --rpf-message-text-color: var(--rpf-alert-error);\n}\n\n.rpf-error-message {\n all: unset;\n align-items: center;\n color: var(--rpf-message-text-color);\n display: flex;\n font-weight: var(--font-weight-bold);\n padding-block-end: var(--space-1);\n}\n.rpf-error-message__icon {\n margin-inline-end: var(--space-1);\n padding-block: var(--space-1);\n}\n\n:root, :host {\n --rpf-white: hsla(0, 0%, 100%, 1);\n --rpf-off-white: hsla(225, 25%, 97%, 1);\n --rpf-grey-50: hsla(210, 8%, 95%, 1);\n --rpf-grey-100: hsla(228, 10%, 90%, 1);\n --rpf-grey-150: hsla(223, 9%, 85%, 1);\n --rpf-grey-200: hsla(228, 10%, 80%, 1);\n --rpf-grey-300: hsla(229, 9%, 75%, 1);\n --rpf-grey-400: hsla(229, 8%, 61%, 1);\n --rpf-grey-500: hsla(229, 9%, 42%, 1);\n --rpf-grey-600: hsla(228, 9%, 32%, 1);\n --rpf-grey-700: hsla(228, 9%, 22%, 1);\n --rpf-grey-800: hsla(232, 9%, 18%, 1);\n --rpf-grey-850: hsla(228, 9%, 15%, 1);\n --rpf-grey-900: hsla(228, 9%, 10%, 1);\n --rpf-grey-950: hsla(228, 8%, 5%, 1);\n --rpf-black: hsla(0, 0%, 0%, 1);\n}\n\n:root, :host {\n --rpf-text-primary: hsla(0, 0%, 13%, 1);\n --rpf-text-primary-darkmode: var(--rpf-white);\n --rpf-text-secondary: hsla(200, 9%, 33%, 1);\n --rpf-text-secondary-darkmode: hsla(0, 0%, 80%, 1);\n}\n\n:root, :host {\n --line-height-0-75: 0.75rem;\n --line-height-1: 1rem;\n --line-height-1-5: 1.5rem;\n --line-height-2: 2rem;\n --line-height-2-5: 2.5rem;\n --line-height-3: 3rem;\n --line-height-3-5: 3.5rem;\n --line-height-4: 4rem;\n --line-height-4-5: 4.5rem;\n --line-height-5: 5rem;\n --line-height-5-5: 5.5rem;\n --line-height-6: 6rem;\n --line-height-6-5: 6.5rem;\n}\n\n:root {\n --rpf-label-hint-color: var(--rpf-text-secondary);\n --rpf-label-text-color: var(--rpf-text-primary);\n --rpf-label-text-color-disabled: var(--rpf-grey-500);\n}\n\n.rpf-label {\n all: unset;\n color: var(--rpf-label-text-color);\n display: flex;\n flex-direction: column;\n font-weight: var(--font-weight-bold);\n padding-block-end: var(--space-1);\n font-size: var(--font-size-1);\n line-height: var(--line-height-1-5);\n}\n.rpf-label__hint {\n color: var(--rpf-label-hint-color);\n font-size: var(--font-size-1);\n font-weight: var(--font-weight-regular);\n}\n.rpf-label--disabled {\n color: var(--rpf-label-text-color-disabled);\n}\n.rpf-label--disabled .rpf-label__hint {\n color: var(--rpf-label-text-color-disabled);\n}\n\n.rpf-input.rpf-input-select {\n background-image: url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'><path fill='%23212121' d='m12 15.375-6-6 1.4-1.4 4.6 4.6 4.6-4.6 1.4 1.4-6 6Z'/></svg>\");\n background-repeat: no-repeat;\n background-position: center right var(--space-1-5);\n}\nhtml[dir=rtl] .rpf-input.rpf-input-select {\n background-position: center left var(--space-1-5);\n}\n.rpf-input.rpf-input-select:disabled, .rpf-input.rpf-input-select--disabled {\n background-image: none;\n}\n\n:root, :host {\n --border-radius: var(--space-1);\n --border-width-sm: 1px;\n --border-width-md: 2px;\n --border-width-lg: 3px;\n --alert-border-width: var(--border-width-md);\n --fieldset-border-width: var(--border-width-md);\n --input-border-width: var(--border-width-md);\n}\n\n:root, :host {\n --rpf-red-100: hsla(4, 89%, 96%, 1);\n --rpf-red-200: hsla(1, 87%, 91%, 1);\n --rpf-red-400: hsla(1, 87%, 82%, 1);\n --rpf-red-600: hsla(1, 87%, 72%, 1);\n --rpf-red-800: hsla(1, 87%, 63%, 1);\n --rpf-red-900: hsla(1, 52%, 50%, 1);\n --rpf-green-100: hsla(125, 41%, 95%, 1);\n --rpf-green-200: hsla(122, 39%, 87%, 1);\n --rpf-green-400: hsla(123, 40%, 74%, 1);\n --rpf-green-600: hsla(123, 40%, 61%, 1);\n --rpf-green-800: hsla(123, 43%, 48%, 1);\n --rpf-green-900: hsla(123, 43%, 34%, 1);\n --rpf-teal-100: hsla(176, 55%, 94%, 1);\n --rpf-teal-200: hsla(174, 55%, 85%, 1);\n --rpf-teal-400: hsla(174, 55%, 70%, 1);\n --rpf-teal-600: hsla(174, 56%, 56%, 1);\n --rpf-teal-800: hsla(174, 81%, 41%, 1);\n --rpf-teal-900: hsla(174, 81%, 27%, 1);\n --rpf-orange-100: hsla(31, 100%, 95%, 1);\n --rpf-orange-200: hsla(32, 100%, 88%, 1);\n --rpf-orange-400: hsla(31, 100%, 77%, 1);\n --rpf-orange-600: hsla(31, 99%, 65%, 1);\n --rpf-orange-800: hsla(31, 99%, 54%, 1);\n --rpf-orange-900: hsla(31, 85%, 35%, 1);\n --rpf-yellow-100: hsla(51, 100%, 95%, 1);\n --rpf-yellow-200: hsla(52, 100%, 87%, 1);\n --rpf-yellow-400: hsla(51, 100%, 75%, 1);\n --rpf-yellow-600: hsla(52, 100%, 63%, 1);\n --rpf-yellow-800: hsla(52, 100%, 50%, 1);\n --rpf-yellow-900: hsla(52, 100%, 26%, 1);\n --rpf-purple-100: hsla(282, 36%, 95%, 1);\n --rpf-purple-200: hsla(279, 38%, 87%, 1);\n --rpf-purple-400: hsla(279, 38%, 73%, 1);\n --rpf-purple-600: hsla(279, 37%, 60%, 1);\n --rpf-purple-800: hsla(279, 43%, 47%, 1);\n --rpf-purple-900: hsla(280, 43%, 37%, 1);\n --rpf-navy-100: hsla(235, 38%, 94%, 1);\n --rpf-navy-200: hsla(234, 38%, 84%, 1);\n --rpf-navy-400: hsla(235, 38%, 69%, 1);\n --rpf-navy-600: hsla(235, 38%, 53%, 1);\n --rpf-navy-800: hsla(235, 63%, 37%, 1);\n --rpf-navy-900: hsla(234, 63%, 30%, 1);\n --rpf-blue-100: hsla(203, 86%, 95%, 1);\n --rpf-blue-200: hsla(204, 88%, 87%, 1);\n --rpf-blue-400: hsla(204, 88%, 74%, 1);\n --rpf-blue-600: hsla(204, 89%, 60%, 1);\n --rpf-blue-800: hsla(204, 100%, 47%, 1);\n --rpf-blue-900: hsla(204, 99%, 37%, 1);\n}\n\n:root, :host {\n --rpf-input-background-color: var(--rpf-white);\n --rpf-input-background-color-disabled: var(--rpf-grey-50);\n --rpf-input-background-color-readonly: var(--rpf-grey-50);\n --rpf-input-color-error: var(--rpf-alert-error);\n --rpf-input-color: var(--rpf-text-primary);\n --rpf-input-outline-color: var(--rpf-blue-800);\n}\n\n:root, :host {\n --font-size-0-5: 0.5rem;\n --font-size-0-75: 0.75rem;\n --font-size-1: 1rem;\n --font-size-1-5: 1.25rem;\n --font-size-2: 1.5rem;\n --font-size-3: 2rem;\n --font-size-4: 2.5rem;\n --font-size-5: 3rem;\n --font-size-6: 3.5rem;\n --font-size-7: 4rem;\n --font-size-8: 4.5rem;\n --font-size-9: 5rem;\n}\n\n.rpf-input-field {\n margin-block-end: var(--space-3);\n}\n\n.rpf-input {\n all: unset;\n background-color: var(--rpf-input-background-color);\n border: var(--input-border-width) solid var(--rpf-input-color);\n border-radius: var(--border-radius);\n box-sizing: border-box;\n color: var(--rpf-input-color);\n display: flex;\n font-size: var(--font-size-1);\n line-height: var(--line-height-2);\n padding-block: calc(var(--space-1) - 2px);\n padding-inline: var(--space-1-5);\n max-width: 50ch;\n min-width: 240px;\n width: 100%;\n}\n.rpf-input:focus-visible {\n outline: 3px solid var(--rpf-input-outline-color);\n}\n.rpf-input:disabled, .rpf-input--disabled {\n background-color: var(--rpf-input-background-color-disabled);\n border-color: var(--rpf-input-background-color-disabled);\n}\n.rpf-input--error {\n border-color: var(--rpf-input-color-error);\n}\n.rpf-input--full-width {\n max-width: none;\n}\n";
|
|
4132
|
+
styleInject(css_248z$1);
|
|
4133
|
+
|
|
4134
|
+
const SelectInput = ({
|
|
4135
|
+
disabled,
|
|
4136
|
+
error,
|
|
4137
|
+
fullWidth,
|
|
4138
|
+
hint,
|
|
4139
|
+
id,
|
|
4140
|
+
label,
|
|
4141
|
+
name,
|
|
4142
|
+
onChange,
|
|
4143
|
+
options,
|
|
4144
|
+
selected
|
|
4145
|
+
}) => /*#__PURE__*/React.createElement(InputField, {
|
|
4146
|
+
disabled: disabled,
|
|
4147
|
+
error: error,
|
|
4148
|
+
hint: hint,
|
|
4149
|
+
label: label,
|
|
4150
|
+
name: name
|
|
4151
|
+
}, /*#__PURE__*/React.createElement("select", {
|
|
4152
|
+
className: classNames("rpf-input rpf-input-select", {
|
|
4153
|
+
"rpf-input--error": error,
|
|
4154
|
+
"rpf-input--full-width": fullWidth
|
|
4155
|
+
}),
|
|
4156
|
+
disabled: disabled,
|
|
4157
|
+
id: id,
|
|
4158
|
+
name: name,
|
|
4159
|
+
onChange: onChange,
|
|
4160
|
+
type: "text",
|
|
4161
|
+
value: selected
|
|
4162
|
+
}, !selected && /*#__PURE__*/React.createElement("option", {
|
|
4163
|
+
selected: true,
|
|
4164
|
+
disabled: true
|
|
4165
|
+
}), options.map(option => /*#__PURE__*/React.createElement("option", {
|
|
4166
|
+
value: option.key,
|
|
4167
|
+
key: option.key
|
|
4168
|
+
}, option.value))));
|
|
4169
|
+
SelectInput.propTypes = {
|
|
4170
|
+
disabled: PropTypes.bool,
|
|
4171
|
+
error: PropTypes.string,
|
|
4172
|
+
fullWidth: PropTypes.bool,
|
|
4173
|
+
hint: PropTypes.string,
|
|
4174
|
+
id: PropTypes.string.isRequired,
|
|
4175
|
+
label: PropTypes.string.isRequired,
|
|
4176
|
+
name: PropTypes.string.isRequired,
|
|
4177
|
+
onChange: PropTypes.func,
|
|
4178
|
+
options: PropTypes.array.isRequired,
|
|
4179
|
+
selected: PropTypes.string
|
|
4180
|
+
};
|
|
4181
|
+
SelectInput.defaultProps = {
|
|
4182
|
+
disabled: false,
|
|
4183
|
+
error: "default",
|
|
4184
|
+
fullWidth: false,
|
|
4185
|
+
hint: "",
|
|
4186
|
+
onChange: () => {},
|
|
4187
|
+
selected: ""
|
|
4188
|
+
};
|
|
4189
|
+
|
|
4190
|
+
var css_248z = ":root, :host {\n --border-radius: var(--space-1);\n --border-width-sm: 1px;\n --border-width-md: 2px;\n --border-width-lg: 3px;\n --alert-border-width: var(--border-width-md);\n --fieldset-border-width: var(--border-width-md);\n --input-border-width: var(--border-width-md);\n}\n\n:root, :host {\n --rpf-alert-error-highlight: hsla(0, 88%, 99%, 1);\n --rpf-alert-error: hsla(0, 88%, 33%, 1);\n --rpf-alert-information-highlight: hsla(225, 64%, 99%, 1);\n --rpf-alert-information: hsla(225, 64%, 33%, 1);\n --rpf-alert-success-highlight: hsla(136, 90%, 99%, 1);\n --rpf-alert-success: hsla(136, 90%, 20%, 1);\n --rpf-alert-warning-highlight: hsla(26, 70%, 99%, 1);\n --rpf-alert-warning: hsla(26, 70%, 29%, 1);\n}\n\n:root, :host {\n --rpf-white: hsla(0, 0%, 100%, 1);\n --rpf-off-white: hsla(225, 25%, 97%, 1);\n --rpf-grey-50: hsla(210, 8%, 95%, 1);\n --rpf-grey-100: hsla(228, 10%, 90%, 1);\n --rpf-grey-150: hsla(223, 9%, 85%, 1);\n --rpf-grey-200: hsla(228, 10%, 80%, 1);\n --rpf-grey-300: hsla(229, 9%, 75%, 1);\n --rpf-grey-400: hsla(229, 8%, 61%, 1);\n --rpf-grey-500: hsla(229, 9%, 42%, 1);\n --rpf-grey-600: hsla(228, 9%, 32%, 1);\n --rpf-grey-700: hsla(228, 9%, 22%, 1);\n --rpf-grey-800: hsla(232, 9%, 18%, 1);\n --rpf-grey-850: hsla(228, 9%, 15%, 1);\n --rpf-grey-900: hsla(228, 9%, 10%, 1);\n --rpf-grey-950: hsla(228, 8%, 5%, 1);\n --rpf-black: hsla(0, 0%, 0%, 1);\n}\n\n:root, :host {\n --rpf-red-100: hsla(4, 89%, 96%, 1);\n --rpf-red-200: hsla(1, 87%, 91%, 1);\n --rpf-red-400: hsla(1, 87%, 82%, 1);\n --rpf-red-600: hsla(1, 87%, 72%, 1);\n --rpf-red-800: hsla(1, 87%, 63%, 1);\n --rpf-red-900: hsla(1, 52%, 50%, 1);\n --rpf-green-100: hsla(125, 41%, 95%, 1);\n --rpf-green-200: hsla(122, 39%, 87%, 1);\n --rpf-green-400: hsla(123, 40%, 74%, 1);\n --rpf-green-600: hsla(123, 40%, 61%, 1);\n --rpf-green-800: hsla(123, 43%, 48%, 1);\n --rpf-green-900: hsla(123, 43%, 34%, 1);\n --rpf-teal-100: hsla(176, 55%, 94%, 1);\n --rpf-teal-200: hsla(174, 55%, 85%, 1);\n --rpf-teal-400: hsla(174, 55%, 70%, 1);\n --rpf-teal-600: hsla(174, 56%, 56%, 1);\n --rpf-teal-800: hsla(174, 81%, 41%, 1);\n --rpf-teal-900: hsla(174, 81%, 27%, 1);\n --rpf-orange-100: hsla(31, 100%, 95%, 1);\n --rpf-orange-200: hsla(32, 100%, 88%, 1);\n --rpf-orange-400: hsla(31, 100%, 77%, 1);\n --rpf-orange-600: hsla(31, 99%, 65%, 1);\n --rpf-orange-800: hsla(31, 99%, 54%, 1);\n --rpf-orange-900: hsla(31, 85%, 35%, 1);\n --rpf-yellow-100: hsla(51, 100%, 95%, 1);\n --rpf-yellow-200: hsla(52, 100%, 87%, 1);\n --rpf-yellow-400: hsla(51, 100%, 75%, 1);\n --rpf-yellow-600: hsla(52, 100%, 63%, 1);\n --rpf-yellow-800: hsla(52, 100%, 50%, 1);\n --rpf-yellow-900: hsla(52, 100%, 26%, 1);\n --rpf-purple-100: hsla(282, 36%, 95%, 1);\n --rpf-purple-200: hsla(279, 38%, 87%, 1);\n --rpf-purple-400: hsla(279, 38%, 73%, 1);\n --rpf-purple-600: hsla(279, 37%, 60%, 1);\n --rpf-purple-800: hsla(279, 43%, 47%, 1);\n --rpf-purple-900: hsla(280, 43%, 37%, 1);\n --rpf-navy-100: hsla(235, 38%, 94%, 1);\n --rpf-navy-200: hsla(234, 38%, 84%, 1);\n --rpf-navy-400: hsla(235, 38%, 69%, 1);\n --rpf-navy-600: hsla(235, 38%, 53%, 1);\n --rpf-navy-800: hsla(235, 63%, 37%, 1);\n --rpf-navy-900: hsla(234, 63%, 30%, 1);\n --rpf-blue-100: hsla(203, 86%, 95%, 1);\n --rpf-blue-200: hsla(204, 88%, 87%, 1);\n --rpf-blue-400: hsla(204, 88%, 74%, 1);\n --rpf-blue-600: hsla(204, 89%, 60%, 1);\n --rpf-blue-800: hsla(204, 100%, 47%, 1);\n --rpf-blue-900: hsla(204, 99%, 37%, 1);\n}\n\n:root, :host {\n --rpf-text-primary: hsla(0, 0%, 13%, 1);\n --rpf-text-primary-darkmode: var(--rpf-white);\n --rpf-text-secondary: hsla(200, 9%, 33%, 1);\n --rpf-text-secondary-darkmode: hsla(0, 0%, 80%, 1);\n}\n\n:root, :host {\n --rpf-input-background-color: var(--rpf-white);\n --rpf-input-background-color-disabled: var(--rpf-grey-50);\n --rpf-input-background-color-readonly: var(--rpf-grey-50);\n --rpf-input-color-error: var(--rpf-alert-error);\n --rpf-input-color: var(--rpf-text-primary);\n --rpf-input-outline-color: var(--rpf-blue-800);\n}\n\n:root, :host {\n --font-size-0-5: 0.5rem;\n --font-size-0-75: 0.75rem;\n --font-size-1: 1rem;\n --font-size-1-5: 1.25rem;\n --font-size-2: 1.5rem;\n --font-size-3: 2rem;\n --font-size-4: 2.5rem;\n --font-size-5: 3rem;\n --font-size-6: 3.5rem;\n --font-size-7: 4rem;\n --font-size-8: 4.5rem;\n --font-size-9: 5rem;\n}\n\n:root, :host {\n --space-0-125: 0.0625rem;\n --space-0-25: 0.125rem;\n --space-0-5: 0.25rem;\n --space-1: 0.5rem;\n --space-1-5: 0.75rem;\n --space-2: 1rem;\n --space-3: 1.5rem;\n --space-4: 2rem;\n --space-5: 2.5rem;\n --space-6: 3rem;\n --space-7: 3.5rem;\n --space-8: 4rem;\n --space-9: 4.5rem;\n --space-10: 5rem;\n}\n\n.rpf-input-field {\n margin-block-end: var(--space-3);\n}\n\n.rpf-input {\n all: unset;\n background-color: var(--rpf-input-background-color);\n border: var(--input-border-width) solid var(--rpf-input-color);\n border-radius: var(--border-radius);\n box-sizing: border-box;\n color: var(--rpf-input-color);\n display: flex;\n font-size: var(--font-size-1);\n line-height: var(--line-height-2);\n padding-block: calc(var(--space-1) - 2px);\n padding-inline: var(--space-1-5);\n max-width: 50ch;\n min-width: 240px;\n width: 100%;\n}\n.rpf-input:focus-visible {\n outline: 3px solid var(--rpf-input-outline-color);\n}\n.rpf-input:disabled, .rpf-input--disabled {\n background-color: var(--rpf-input-background-color-disabled);\n border-color: var(--rpf-input-background-color-disabled);\n}\n.rpf-input--error {\n border-color: var(--rpf-input-color-error);\n}\n.rpf-input--full-width {\n max-width: none;\n}\n\n:root, :host {\n --font-weight-regular: 400;\n --font-weight-bold: 700;\n}\n\n:root, :host {\n --line-height-0-75: 0.75rem;\n --line-height-1: 1rem;\n --line-height-1-5: 1.5rem;\n --line-height-2: 2rem;\n --line-height-2-5: 2.5rem;\n --line-height-3: 3rem;\n --line-height-3-5: 3.5rem;\n --line-height-4: 4rem;\n --line-height-4-5: 4.5rem;\n --line-height-5: 5rem;\n --line-height-5-5: 5.5rem;\n --line-height-6: 6rem;\n --line-height-6-5: 6.5rem;\n}\n\n:root {\n --rpf-label-hint-color: var(--rpf-text-secondary);\n --rpf-label-text-color: var(--rpf-text-primary);\n --rpf-label-text-color-disabled: var(--rpf-grey-500);\n}\n\n.rpf-label {\n all: unset;\n color: var(--rpf-label-text-color);\n display: flex;\n flex-direction: column;\n font-weight: var(--font-weight-bold);\n padding-block-end: var(--space-1);\n font-size: var(--font-size-1);\n line-height: var(--line-height-1-5);\n}\n.rpf-label__hint {\n color: var(--rpf-label-hint-color);\n font-size: var(--font-size-1);\n font-weight: var(--font-weight-regular);\n}\n.rpf-label--disabled {\n color: var(--rpf-label-text-color-disabled);\n}\n.rpf-label--disabled .rpf-label__hint {\n color: var(--rpf-label-text-color-disabled);\n}\n\n:root {\n --rpf-message-text-color: var(--rpf-alert-error);\n}\n\n.rpf-error-message {\n all: unset;\n align-items: center;\n color: var(--rpf-message-text-color);\n display: flex;\n font-weight: var(--font-weight-bold);\n padding-block-end: var(--space-1);\n}\n.rpf-error-message__icon {\n margin-inline-end: var(--space-1);\n padding-block: var(--space-1);\n}\n";
|
|
4191
|
+
styleInject(css_248z);
|
|
4192
|
+
|
|
4193
|
+
const TextInput = ({
|
|
4194
|
+
disabled,
|
|
4195
|
+
error,
|
|
4196
|
+
fullWidth,
|
|
4197
|
+
hint,
|
|
4198
|
+
id,
|
|
4199
|
+
label,
|
|
4200
|
+
name,
|
|
4201
|
+
onChange,
|
|
4202
|
+
value
|
|
4203
|
+
}) => /*#__PURE__*/React.createElement(InputField, {
|
|
4204
|
+
disabled: disabled,
|
|
4205
|
+
error: error,
|
|
4206
|
+
hint: hint,
|
|
4207
|
+
label: label,
|
|
4208
|
+
name: name
|
|
4209
|
+
}, /*#__PURE__*/React.createElement("input", {
|
|
4210
|
+
className: classNames("rpf-input rpf-input-text", {
|
|
4211
|
+
"rpf-input--error": error,
|
|
4212
|
+
"rpf-input--full-width": fullWidth
|
|
4213
|
+
}),
|
|
4214
|
+
disabled: disabled,
|
|
4215
|
+
id: id,
|
|
4216
|
+
name: name,
|
|
4217
|
+
onChange: onChange,
|
|
4218
|
+
type: "text",
|
|
4219
|
+
value: value
|
|
4220
|
+
}));
|
|
4221
|
+
TextInput.propTypes = {
|
|
4222
|
+
disabled: PropTypes.bool,
|
|
4223
|
+
error: PropTypes.string,
|
|
4224
|
+
fullWidth: PropTypes.bool,
|
|
4225
|
+
hint: PropTypes.string,
|
|
4226
|
+
id: PropTypes.string.isRequired,
|
|
4227
|
+
label: PropTypes.string.isRequired,
|
|
4228
|
+
name: PropTypes.string.isRequired,
|
|
4229
|
+
onChange: PropTypes.func,
|
|
4230
|
+
value: PropTypes.string.isRequired
|
|
4231
|
+
};
|
|
4232
|
+
TextInput.defaultProps = {
|
|
4233
|
+
disabled: false,
|
|
4234
|
+
error: "default",
|
|
4235
|
+
fullWidth: false,
|
|
4236
|
+
hint: "",
|
|
4237
|
+
onChange: () => {}
|
|
4238
|
+
};
|
|
4239
|
+
|
|
4240
|
+
export { Accordion, Button, CheckboxInput, InputField, ProgressBar, SelectInput, TextInput };
|