@raspberrypifoundation/design-system-react 1.1.10 → 1.1.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/cjs/bundle.js +36 -79
  2. package/dist/esm/bundle.js +36 -79
  3. package/package.json +1 -1
package/dist/cjs/bundle.js CHANGED
@@ -1178,19 +1178,19 @@ styleInject(css_248z$5);
1178
1178
  /* eslint-disable complexity */
1179
1179
  const Button = ({
1180
1180
  text,
1181
- type,
1182
- variant,
1183
- size,
1184
- icon,
1185
- iconOnly,
1186
- iconPosition,
1187
- fullWidth,
1188
- disabled,
1189
1181
  href,
1190
1182
  title,
1191
1183
  className,
1192
- onClick,
1193
- "aria-label": ariaLabel
1184
+ ariaLabel = "",
1185
+ type = "primary",
1186
+ variant = "",
1187
+ size = "default",
1188
+ icon = "",
1189
+ iconOnly = false,
1190
+ iconPosition = "left",
1191
+ fullWidth = false,
1192
+ disabled = false,
1193
+ onClick = () => {}
1194
1194
  }) => {
1195
1195
  const iconButton = icon && iconOnly;
1196
1196
  const classes = classNames(
@@ -1244,25 +1244,13 @@ Button.propTypes = {
1244
1244
  onClick: PropTypes.func,
1245
1245
  text: PropTypes.string,
1246
1246
  iconOnly: PropTypes.bool,
1247
- "aria-label": PropTypes.string,
1247
+ ariaLabel: PropTypes.string,
1248
1248
  title: PropTypes.string,
1249
1249
  iconPosition: PropTypes.oneOf(["left", "right"]),
1250
1250
  size: PropTypes.oneOf(["default", "small"]) // added size prop
1251
1251
  };
1252
- Button.defaultProps = {
1253
- type: "primary",
1254
- variant: "",
1255
- size: "default",
1256
- icon: "",
1257
- iconOnly: false,
1258
- iconPosition: "left",
1259
- fullWidth: false,
1260
- disabled: false,
1261
- onClick: () => {},
1262
- "aria-label": ""
1263
- };
1264
1252
 
1265
- var css_248z$4 = ":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-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 --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: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 --rpf-alert-background-color: var(--rpf-alert-information-highlight);\n --rpf-alert-color: var(--rpf-alert-information);\n}\n\n.rpf-alert {\n align-items: center;\n background-color: var(--rpf-alert-background-color);\n border-color: var(--rpf-alert-color);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: var(--alert-border-width);\n color: var(--rpf-text-primary);\n display: flex;\n gap: var(--space-2);\n margin-block-end: var(--space-2);\n padding-block: var(--space-2);\n padding-inline: var(--space-2);\n text-align: center;\n}\n.rpf-alert__icon {\n align-self: flex-start;\n color: var(--rpf-alert-color);\n font-size: var(--font-size-2);\n}\n.rpf-alert__body {\n font-size: var(--font-size-1);\n font-weight: var(--font-weight-regular);\n line-height: var(--line-height-1-5);\n display: flex;\n flex-direction: column;\n text-align: start;\n}\n.rpf-alert__title {\n font-weight: var(--font-weight-bold);\n margin: 0;\n}\n.rpf-alert__actions {\n display: flex;\n flex-direction: row;\n gap: var(--space-2);\n}\n.rpf-alert__close {\n align-self: flex-start;\n background: none;\n border: none;\n color: inherit;\n cursor: pointer;\n font-size: var(--font-size-2);\n margin-inline-start: auto;\n}\n.rpf-alert--hidden {\n display: none;\n}\n.rpf-alert--error {\n --rpf-alert-background-color: var(--rpf-alert-error-highlight);\n --rpf-alert-color: var(--rpf-alert-error);\n}\n.rpf-alert--error .rpf-alert__icon::after {\n content: \"error_outline\";\n}\n.rpf-alert--information .rpf-alert__icon::after {\n content: \"info\";\n}\n.rpf-alert--warning {\n --rpf-alert-background-color: var(--rpf-alert-warning-highlight);\n --rpf-alert-color: var(--rpf-alert-warning);\n}\n.rpf-alert--warning .rpf-alert__icon::after {\n content: \"warning_amber\";\n}\n.rpf-alert--success {\n --rpf-alert-background-color: var(--rpf-alert-success-highlight);\n --rpf-alert-color: var(--rpf-alert-success);\n}\n.rpf-alert--success .rpf-alert__icon::after {\n content: \"check_circle\";\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-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.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";
1253
+ var css_248z$4 = ":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-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 --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: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 --rpf-alert-background-color: var(--rpf-alert-information-highlight);\n --rpf-alert-color: var(--rpf-alert-information);\n}\n\n.rpf-alert {\n align-items: center;\n background-color: var(--rpf-alert-background-color);\n border-color: var(--rpf-alert-color);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: var(--alert-border-width);\n color: var(--rpf-text-primary);\n display: flex;\n gap: var(--space-2);\n margin-block-end: var(--space-2);\n padding-block: var(--space-2);\n padding-inline: var(--space-2);\n text-align: center;\n}\n.rpf-alert__icon {\n align-self: flex-start;\n color: var(--rpf-alert-color);\n font-size: var(--font-size-2);\n}\n.rpf-alert__body {\n font-size: var(--font-size-1);\n font-weight: var(--font-weight-regular);\n line-height: var(--line-height-1-5);\n display: flex;\n flex-direction: column;\n text-align: start;\n}\n.rpf-alert__title {\n font-weight: var(--font-weight-bold);\n margin: 0;\n}\n.rpf-alert__actions {\n display: flex;\n flex-direction: row;\n gap: var(--space-2);\n}\n.rpf-alert__close {\n align-self: flex-start;\n background: none;\n border: none;\n color: inherit;\n cursor: pointer;\n font-size: var(--font-size-2);\n margin-inline-start: auto;\n}\n.rpf-alert--hidden {\n display: none;\n}\n.rpf-alert--error {\n --rpf-alert-background-color: var(--rpf-alert-error-highlight);\n --rpf-alert-color: var(--rpf-alert-error);\n}\n.rpf-alert--error .rpf-alert__icon::after {\n content: \"error_outline\";\n}\n.rpf-alert--information .rpf-alert__icon::after {\n content: \"info\";\n}\n.rpf-alert--warning {\n --rpf-alert-background-color: var(--rpf-alert-warning-highlight);\n --rpf-alert-color: var(--rpf-alert-warning);\n}\n.rpf-alert--warning .rpf-alert__icon::after {\n content: \"warning_amber\";\n}\n.rpf-alert--success {\n --rpf-alert-background-color: var(--rpf-alert-success-highlight);\n --rpf-alert-color: var(--rpf-alert-success);\n}\n.rpf-alert--success .rpf-alert__icon::after {\n content: \"check_circle\";\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-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.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\np {\n margin-block-end: 0;\n}\n\n.rpf-alert__actions .rpf-button {\n padding-inline-start: 0;\n padding-block-end: 0;\n}\n";
1266
1254
  styleInject(css_248z$4);
1267
1255
 
1268
1256
  /* eslint-disable complexity */
@@ -1282,7 +1270,7 @@ const Alert = ({
1282
1270
  }, title), /*#__PURE__*/React.createElement("p", null, text), actions && actions.length > 0 && /*#__PURE__*/React.createElement("div", {
1283
1271
  className: "rpf-alert__actions"
1284
1272
  }, actions.map(action => /*#__PURE__*/React.createElement(Button, {
1285
- key: action.label,
1273
+ key: action.key || action.label,
1286
1274
  text: action.label,
1287
1275
  size: "small",
1288
1276
  type: "tertiary",
@@ -1304,7 +1292,7 @@ styleInject(css_248z$3);
1304
1292
 
1305
1293
  /* eslint-disable complexity */
1306
1294
  const ProgressBar = ({
1307
- text,
1295
+ text = "",
1308
1296
  percent
1309
1297
  }) => /*#__PURE__*/React.createElement("div", {
1310
1298
  className: "rpf-progress-bar"
@@ -1322,22 +1310,19 @@ ProgressBar.propTypes = {
1322
1310
  text: PropTypes.string,
1323
1311
  percent: PropTypes.number.isRequired
1324
1312
  };
1325
- ProgressBar.defaultProps = {
1326
- text: ""
1327
- };
1328
1313
 
1329
1314
  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";
1330
1315
  styleInject(css_248z$2);
1331
1316
 
1332
1317
  const CheckboxInput = ({
1333
- checked,
1334
- disabled,
1335
- error,
1336
1318
  id,
1337
1319
  label,
1338
1320
  name,
1339
- onChange,
1340
- value
1321
+ checked = false,
1322
+ disabled = false,
1323
+ error = "",
1324
+ onChange = () => {},
1325
+ value = ""
1341
1326
  }) => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("label", {
1342
1327
  className: classNames("rpf-input-checkbox", {
1343
1328
  "rpf-input-checkbox--error": error
@@ -1367,21 +1352,14 @@ CheckboxInput.propTypes = {
1367
1352
  onChange: PropTypes.func,
1368
1353
  value: PropTypes.string
1369
1354
  };
1370
- CheckboxInput.defaultProps = {
1371
- checked: true,
1372
- disabled: false,
1373
- error: "",
1374
- onChange: () => {},
1375
- value: "on"
1376
- };
1377
1355
 
1378
1356
  const InputField = ({
1379
- disabled,
1380
- error,
1381
- hint,
1382
1357
  label,
1383
1358
  name,
1384
- children
1359
+ children,
1360
+ disabled = false,
1361
+ error = "",
1362
+ hint = ""
1385
1363
  }) => /*#__PURE__*/React.createElement("div", {
1386
1364
  className: "rpf-input-field"
1387
1365
  }, (label || hint) && /*#__PURE__*/React.createElement("label", {
@@ -1403,27 +1381,22 @@ InputField.propTypes = {
1403
1381
  label: PropTypes.oneOfType([PropTypes.string, PropTypes.object]).isRequired,
1404
1382
  name: PropTypes.string.isRequired
1405
1383
  };
1406
- InputField.defaultProps = {
1407
- disabled: false,
1408
- error: "",
1409
- hint: ""
1410
- };
1411
1384
 
1412
1385
  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";
1413
1386
  styleInject(css_248z$1);
1414
1387
 
1415
1388
  const SelectInput = ({
1416
- disabled,
1417
- error,
1418
- fullWidth,
1419
- hint,
1420
1389
  id,
1421
1390
  label,
1422
1391
  name,
1423
- onChange,
1424
1392
  options,
1425
- placeholder,
1426
- value
1393
+ disabled = false,
1394
+ error = "",
1395
+ fullWidth = false,
1396
+ hint = "",
1397
+ onChange = () => {},
1398
+ placeholder = "",
1399
+ value = ""
1427
1400
  }) => /*#__PURE__*/React.createElement(InputField, {
1428
1401
  disabled: disabled,
1429
1402
  error: error,
@@ -1461,29 +1434,20 @@ SelectInput.propTypes = {
1461
1434
  placeholder: PropTypes.string,
1462
1435
  value: PropTypes.string
1463
1436
  };
1464
- SelectInput.defaultProps = {
1465
- disabled: false,
1466
- error: "",
1467
- fullWidth: false,
1468
- hint: "",
1469
- onChange: () => {},
1470
- placeholder: "",
1471
- value: ""
1472
- };
1473
1437
 
1474
1438
  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";
1475
1439
  styleInject(css_248z);
1476
1440
 
1477
1441
  const TextInput = ({
1478
- disabled,
1479
- error,
1480
- fullWidth,
1481
- hint,
1482
1442
  id,
1483
1443
  label,
1484
1444
  name,
1485
- onChange,
1486
- value
1445
+ value,
1446
+ disabled = false,
1447
+ error = "",
1448
+ fullWidth = false,
1449
+ hint = "",
1450
+ onChange = () => {}
1487
1451
  }) => /*#__PURE__*/React.createElement(InputField, {
1488
1452
  disabled: disabled,
1489
1453
  error: error,
@@ -1513,13 +1477,6 @@ TextInput.propTypes = {
1513
1477
  onChange: PropTypes.func,
1514
1478
  value: PropTypes.string.isRequired
1515
1479
  };
1516
- TextInput.defaultProps = {
1517
- disabled: false,
1518
- error: "",
1519
- fullWidth: false,
1520
- hint: "",
1521
- onChange: () => {}
1522
- };
1523
1480
 
1524
1481
  exports.Accordion = Accordion;
1525
1482
  exports.Alert = Alert;
package/dist/esm/bundle.js CHANGED
@@ -1176,19 +1176,19 @@ styleInject(css_248z$5);
1176
1176
  /* eslint-disable complexity */
1177
1177
  const Button = ({
1178
1178
  text,
1179
- type,
1180
- variant,
1181
- size,
1182
- icon,
1183
- iconOnly,
1184
- iconPosition,
1185
- fullWidth,
1186
- disabled,
1187
1179
  href,
1188
1180
  title,
1189
1181
  className,
1190
- onClick,
1191
- "aria-label": ariaLabel
1182
+ ariaLabel = "",
1183
+ type = "primary",
1184
+ variant = "",
1185
+ size = "default",
1186
+ icon = "",
1187
+ iconOnly = false,
1188
+ iconPosition = "left",
1189
+ fullWidth = false,
1190
+ disabled = false,
1191
+ onClick = () => {}
1192
1192
  }) => {
1193
1193
  const iconButton = icon && iconOnly;
1194
1194
  const classes = classNames(
@@ -1242,25 +1242,13 @@ Button.propTypes = {
1242
1242
  onClick: PropTypes.func,
1243
1243
  text: PropTypes.string,
1244
1244
  iconOnly: PropTypes.bool,
1245
- "aria-label": PropTypes.string,
1245
+ ariaLabel: PropTypes.string,
1246
1246
  title: PropTypes.string,
1247
1247
  iconPosition: PropTypes.oneOf(["left", "right"]),
1248
1248
  size: PropTypes.oneOf(["default", "small"]) // added size prop
1249
1249
  };
1250
- Button.defaultProps = {
1251
- type: "primary",
1252
- variant: "",
1253
- size: "default",
1254
- icon: "",
1255
- iconOnly: false,
1256
- iconPosition: "left",
1257
- fullWidth: false,
1258
- disabled: false,
1259
- onClick: () => {},
1260
- "aria-label": ""
1261
- };
1262
1250
 
1263
- var css_248z$4 = ":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-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 --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: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 --rpf-alert-background-color: var(--rpf-alert-information-highlight);\n --rpf-alert-color: var(--rpf-alert-information);\n}\n\n.rpf-alert {\n align-items: center;\n background-color: var(--rpf-alert-background-color);\n border-color: var(--rpf-alert-color);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: var(--alert-border-width);\n color: var(--rpf-text-primary);\n display: flex;\n gap: var(--space-2);\n margin-block-end: var(--space-2);\n padding-block: var(--space-2);\n padding-inline: var(--space-2);\n text-align: center;\n}\n.rpf-alert__icon {\n align-self: flex-start;\n color: var(--rpf-alert-color);\n font-size: var(--font-size-2);\n}\n.rpf-alert__body {\n font-size: var(--font-size-1);\n font-weight: var(--font-weight-regular);\n line-height: var(--line-height-1-5);\n display: flex;\n flex-direction: column;\n text-align: start;\n}\n.rpf-alert__title {\n font-weight: var(--font-weight-bold);\n margin: 0;\n}\n.rpf-alert__actions {\n display: flex;\n flex-direction: row;\n gap: var(--space-2);\n}\n.rpf-alert__close {\n align-self: flex-start;\n background: none;\n border: none;\n color: inherit;\n cursor: pointer;\n font-size: var(--font-size-2);\n margin-inline-start: auto;\n}\n.rpf-alert--hidden {\n display: none;\n}\n.rpf-alert--error {\n --rpf-alert-background-color: var(--rpf-alert-error-highlight);\n --rpf-alert-color: var(--rpf-alert-error);\n}\n.rpf-alert--error .rpf-alert__icon::after {\n content: \"error_outline\";\n}\n.rpf-alert--information .rpf-alert__icon::after {\n content: \"info\";\n}\n.rpf-alert--warning {\n --rpf-alert-background-color: var(--rpf-alert-warning-highlight);\n --rpf-alert-color: var(--rpf-alert-warning);\n}\n.rpf-alert--warning .rpf-alert__icon::after {\n content: \"warning_amber\";\n}\n.rpf-alert--success {\n --rpf-alert-background-color: var(--rpf-alert-success-highlight);\n --rpf-alert-color: var(--rpf-alert-success);\n}\n.rpf-alert--success .rpf-alert__icon::after {\n content: \"check_circle\";\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-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.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";
1251
+ var css_248z$4 = ":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-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 --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: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 --rpf-alert-background-color: var(--rpf-alert-information-highlight);\n --rpf-alert-color: var(--rpf-alert-information);\n}\n\n.rpf-alert {\n align-items: center;\n background-color: var(--rpf-alert-background-color);\n border-color: var(--rpf-alert-color);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: var(--alert-border-width);\n color: var(--rpf-text-primary);\n display: flex;\n gap: var(--space-2);\n margin-block-end: var(--space-2);\n padding-block: var(--space-2);\n padding-inline: var(--space-2);\n text-align: center;\n}\n.rpf-alert__icon {\n align-self: flex-start;\n color: var(--rpf-alert-color);\n font-size: var(--font-size-2);\n}\n.rpf-alert__body {\n font-size: var(--font-size-1);\n font-weight: var(--font-weight-regular);\n line-height: var(--line-height-1-5);\n display: flex;\n flex-direction: column;\n text-align: start;\n}\n.rpf-alert__title {\n font-weight: var(--font-weight-bold);\n margin: 0;\n}\n.rpf-alert__actions {\n display: flex;\n flex-direction: row;\n gap: var(--space-2);\n}\n.rpf-alert__close {\n align-self: flex-start;\n background: none;\n border: none;\n color: inherit;\n cursor: pointer;\n font-size: var(--font-size-2);\n margin-inline-start: auto;\n}\n.rpf-alert--hidden {\n display: none;\n}\n.rpf-alert--error {\n --rpf-alert-background-color: var(--rpf-alert-error-highlight);\n --rpf-alert-color: var(--rpf-alert-error);\n}\n.rpf-alert--error .rpf-alert__icon::after {\n content: \"error_outline\";\n}\n.rpf-alert--information .rpf-alert__icon::after {\n content: \"info\";\n}\n.rpf-alert--warning {\n --rpf-alert-background-color: var(--rpf-alert-warning-highlight);\n --rpf-alert-color: var(--rpf-alert-warning);\n}\n.rpf-alert--warning .rpf-alert__icon::after {\n content: \"warning_amber\";\n}\n.rpf-alert--success {\n --rpf-alert-background-color: var(--rpf-alert-success-highlight);\n --rpf-alert-color: var(--rpf-alert-success);\n}\n.rpf-alert--success .rpf-alert__icon::after {\n content: \"check_circle\";\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-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.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\np {\n margin-block-end: 0;\n}\n\n.rpf-alert__actions .rpf-button {\n padding-inline-start: 0;\n padding-block-end: 0;\n}\n";
1264
1252
  styleInject(css_248z$4);
1265
1253
 
1266
1254
  /* eslint-disable complexity */
@@ -1280,7 +1268,7 @@ const Alert = ({
1280
1268
  }, title), /*#__PURE__*/React.createElement("p", null, text), actions && actions.length > 0 && /*#__PURE__*/React.createElement("div", {
1281
1269
  className: "rpf-alert__actions"
1282
1270
  }, actions.map(action => /*#__PURE__*/React.createElement(Button, {
1283
- key: action.label,
1271
+ key: action.key || action.label,
1284
1272
  text: action.label,
1285
1273
  size: "small",
1286
1274
  type: "tertiary",
@@ -1302,7 +1290,7 @@ styleInject(css_248z$3);
1302
1290
 
1303
1291
  /* eslint-disable complexity */
1304
1292
  const ProgressBar = ({
1305
- text,
1293
+ text = "",
1306
1294
  percent
1307
1295
  }) => /*#__PURE__*/React.createElement("div", {
1308
1296
  className: "rpf-progress-bar"
@@ -1320,22 +1308,19 @@ ProgressBar.propTypes = {
1320
1308
  text: PropTypes.string,
1321
1309
  percent: PropTypes.number.isRequired
1322
1310
  };
1323
- ProgressBar.defaultProps = {
1324
- text: ""
1325
- };
1326
1311
 
1327
1312
  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";
1328
1313
  styleInject(css_248z$2);
1329
1314
 
1330
1315
  const CheckboxInput = ({
1331
- checked,
1332
- disabled,
1333
- error,
1334
1316
  id,
1335
1317
  label,
1336
1318
  name,
1337
- onChange,
1338
- value
1319
+ checked = false,
1320
+ disabled = false,
1321
+ error = "",
1322
+ onChange = () => {},
1323
+ value = ""
1339
1324
  }) => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("label", {
1340
1325
  className: classNames("rpf-input-checkbox", {
1341
1326
  "rpf-input-checkbox--error": error
@@ -1365,21 +1350,14 @@ CheckboxInput.propTypes = {
1365
1350
  onChange: PropTypes.func,
1366
1351
  value: PropTypes.string
1367
1352
  };
1368
- CheckboxInput.defaultProps = {
1369
- checked: true,
1370
- disabled: false,
1371
- error: "",
1372
- onChange: () => {},
1373
- value: "on"
1374
- };
1375
1353
 
1376
1354
  const InputField = ({
1377
- disabled,
1378
- error,
1379
- hint,
1380
1355
  label,
1381
1356
  name,
1382
- children
1357
+ children,
1358
+ disabled = false,
1359
+ error = "",
1360
+ hint = ""
1383
1361
  }) => /*#__PURE__*/React.createElement("div", {
1384
1362
  className: "rpf-input-field"
1385
1363
  }, (label || hint) && /*#__PURE__*/React.createElement("label", {
@@ -1401,27 +1379,22 @@ InputField.propTypes = {
1401
1379
  label: PropTypes.oneOfType([PropTypes.string, PropTypes.object]).isRequired,
1402
1380
  name: PropTypes.string.isRequired
1403
1381
  };
1404
- InputField.defaultProps = {
1405
- disabled: false,
1406
- error: "",
1407
- hint: ""
1408
- };
1409
1382
 
1410
1383
  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";
1411
1384
  styleInject(css_248z$1);
1412
1385
 
1413
1386
  const SelectInput = ({
1414
- disabled,
1415
- error,
1416
- fullWidth,
1417
- hint,
1418
1387
  id,
1419
1388
  label,
1420
1389
  name,
1421
- onChange,
1422
1390
  options,
1423
- placeholder,
1424
- value
1391
+ disabled = false,
1392
+ error = "",
1393
+ fullWidth = false,
1394
+ hint = "",
1395
+ onChange = () => {},
1396
+ placeholder = "",
1397
+ value = ""
1425
1398
  }) => /*#__PURE__*/React.createElement(InputField, {
1426
1399
  disabled: disabled,
1427
1400
  error: error,
@@ -1459,29 +1432,20 @@ SelectInput.propTypes = {
1459
1432
  placeholder: PropTypes.string,
1460
1433
  value: PropTypes.string
1461
1434
  };
1462
- SelectInput.defaultProps = {
1463
- disabled: false,
1464
- error: "",
1465
- fullWidth: false,
1466
- hint: "",
1467
- onChange: () => {},
1468
- placeholder: "",
1469
- value: ""
1470
- };
1471
1435
 
1472
1436
  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";
1473
1437
  styleInject(css_248z);
1474
1438
 
1475
1439
  const TextInput = ({
1476
- disabled,
1477
- error,
1478
- fullWidth,
1479
- hint,
1480
1440
  id,
1481
1441
  label,
1482
1442
  name,
1483
- onChange,
1484
- value
1443
+ value,
1444
+ disabled = false,
1445
+ error = "",
1446
+ fullWidth = false,
1447
+ hint = "",
1448
+ onChange = () => {}
1485
1449
  }) => /*#__PURE__*/React.createElement(InputField, {
1486
1450
  disabled: disabled,
1487
1451
  error: error,
@@ -1511,12 +1475,5 @@ TextInput.propTypes = {
1511
1475
  onChange: PropTypes.func,
1512
1476
  value: PropTypes.string.isRequired
1513
1477
  };
1514
- TextInput.defaultProps = {
1515
- disabled: false,
1516
- error: "",
1517
- fullWidth: false,
1518
- hint: "",
1519
- onChange: () => {}
1520
- };
1521
1478
 
1522
1479
  export { Accordion, Alert, Button, CheckboxInput, InputField, ProgressBar, SelectInput, TextInput };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@raspberrypifoundation/design-system-react",
3
- "version": "1.1.10",
3
+ "version": "1.1.11",
4
4
  "description": "",
5
5
  "main": "dist/cjs/bundle.js",
6
6
  "module": "dist/esm/bundle.js",