@raspberrypifoundation/design-system-react 1.1.12 → 1.1.14

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 +11 -13
  2. package/dist/esm/bundle.js +11 -13
  3. package/package.json +1 -1
package/dist/cjs/bundle.js CHANGED
@@ -1147,7 +1147,7 @@ const Accordion = ({
1147
1147
  content,
1148
1148
  title,
1149
1149
  className,
1150
- id
1150
+ id = "accordion"
1151
1151
  }) => {
1152
1152
  const classes = classNames("rpf-accordion", className);
1153
1153
  return /*#__PURE__*/React.createElement("details", {
@@ -1168,9 +1168,6 @@ Accordion.propTypes = {
1168
1168
  id: PropTypes.string,
1169
1169
  className: PropTypes.string
1170
1170
  };
1171
- Accordion.defaultProps = {
1172
- id: "accordion"
1173
- };
1174
1171
 
1175
1172
  var css_248z$5 = ":root, :host {\n --rpf-brand-black: hsla(60, 4%, 11%, 1);\n --rpf-brand-leaf: hsla(123, 43%, 48%, 1);\n --rpf-brand-raspberry: hsla(342, 71%, 47%, 1);\n --rpf-raspberry-50: hsla(338, 57%, 97%, 1);\n --rpf-raspberry-100: hsla(342, 62%, 96%, 1);\n --rpf-raspberry-200: hsla(344, 73%, 93%, 1);\n --rpf-raspberry-400: hsla(341, 63%, 84%, 1);\n --rpf-raspberry-500: hsla(343, 62%, 68%, 1);\n --rpf-raspberry-600: hsla(343, 64%, 58%, 1);\n --rpf-raspberry-800: hsla(342, 71%, 47%, 1);\n --rpf-raspberry-900: hsla(340, 78%, 36%, 1);\n}\n\n:root, :host {\n --rpf-red-100: hsla(4, 89%, 96%, 1);\n --rpf-red-200: hsla(1, 87%, 91%, 1);\n --rpf-red-400: hsla(1, 87%, 82%, 1);\n --rpf-red-600: hsla(1, 87%, 72%, 1);\n --rpf-red-800: hsla(1, 87%, 63%, 1);\n --rpf-red-900: hsla(1, 52%, 50%, 1);\n --rpf-green-100: hsla(125, 41%, 95%, 1);\n --rpf-green-200: hsla(122, 39%, 87%, 1);\n --rpf-green-400: hsla(123, 40%, 74%, 1);\n --rpf-green-600: hsla(123, 40%, 61%, 1);\n --rpf-green-800: hsla(123, 43%, 48%, 1);\n --rpf-green-900: hsla(123, 43%, 34%, 1);\n --rpf-teal-100: hsla(176, 55%, 94%, 1);\n --rpf-teal-200: hsla(174, 55%, 85%, 1);\n --rpf-teal-400: hsla(174, 55%, 70%, 1);\n --rpf-teal-600: hsla(174, 56%, 56%, 1);\n --rpf-teal-800: hsla(174, 81%, 41%, 1);\n --rpf-teal-900: hsla(174, 81%, 27%, 1);\n --rpf-orange-100: hsla(31, 100%, 95%, 1);\n --rpf-orange-200: hsla(32, 100%, 88%, 1);\n --rpf-orange-400: hsla(31, 100%, 77%, 1);\n --rpf-orange-600: hsla(31, 99%, 65%, 1);\n --rpf-orange-800: hsla(31, 99%, 54%, 1);\n --rpf-orange-900: hsla(31, 85%, 35%, 1);\n --rpf-yellow-100: hsla(51, 100%, 95%, 1);\n --rpf-yellow-200: hsla(52, 100%, 87%, 1);\n --rpf-yellow-400: hsla(51, 100%, 75%, 1);\n --rpf-yellow-600: hsla(52, 100%, 63%, 1);\n --rpf-yellow-800: hsla(52, 100%, 50%, 1);\n --rpf-yellow-900: hsla(52, 100%, 26%, 1);\n --rpf-purple-100: hsla(282, 36%, 95%, 1);\n --rpf-purple-200: hsla(279, 38%, 87%, 1);\n --rpf-purple-400: hsla(279, 38%, 73%, 1);\n --rpf-purple-600: hsla(279, 37%, 60%, 1);\n --rpf-purple-800: hsla(279, 43%, 47%, 1);\n --rpf-purple-900: hsla(280, 43%, 37%, 1);\n --rpf-navy-100: hsla(235, 38%, 94%, 1);\n --rpf-navy-200: hsla(234, 38%, 84%, 1);\n --rpf-navy-400: hsla(235, 38%, 69%, 1);\n --rpf-navy-600: hsla(235, 38%, 53%, 1);\n --rpf-navy-800: hsla(235, 63%, 37%, 1);\n --rpf-navy-900: hsla(234, 63%, 30%, 1);\n --rpf-blue-100: hsla(203, 86%, 95%, 1);\n --rpf-blue-200: hsla(204, 88%, 87%, 1);\n --rpf-blue-400: hsla(204, 88%, 74%, 1);\n --rpf-blue-600: hsla(204, 89%, 60%, 1);\n --rpf-blue-800: hsla(204, 100%, 47%, 1);\n --rpf-blue-900: hsla(204, 99%, 37%, 1);\n}\n\n:root, :host {\n --rpf-white: hsla(0, 0%, 100%, 1);\n --rpf-off-white: hsla(225, 25%, 97%, 1);\n --rpf-grey-50: hsla(210, 8%, 95%, 1);\n --rpf-grey-100: hsla(228, 10%, 90%, 1);\n --rpf-grey-150: hsla(223, 9%, 85%, 1);\n --rpf-grey-200: hsla(228, 10%, 80%, 1);\n --rpf-grey-300: hsla(229, 9%, 75%, 1);\n --rpf-grey-400: hsla(229, 8%, 61%, 1);\n --rpf-grey-500: hsla(229, 9%, 42%, 1);\n --rpf-grey-600: hsla(228, 9%, 32%, 1);\n --rpf-grey-700: hsla(228, 9%, 22%, 1);\n --rpf-grey-800: hsla(232, 9%, 18%, 1);\n --rpf-grey-850: hsla(228, 9%, 15%, 1);\n --rpf-grey-900: hsla(228, 9%, 10%, 1);\n --rpf-grey-950: hsla(228, 8%, 5%, 1);\n --rpf-black: hsla(0, 0%, 0%, 1);\n}\n\n:root, :host {\n --rpf-alert-error-highlight: hsla(0, 88%, 99%, 1);\n --rpf-alert-error: hsla(0, 88%, 33%, 1);\n --rpf-alert-information-highlight: hsla(225, 64%, 99%, 1);\n --rpf-alert-information: hsla(225, 64%, 33%, 1);\n --rpf-alert-success-highlight: hsla(136, 90%, 99%, 1);\n --rpf-alert-success: hsla(136, 90%, 20%, 1);\n --rpf-alert-warning-highlight: hsla(26, 70%, 99%, 1);\n --rpf-alert-warning: hsla(26, 70%, 29%, 1);\n}\n\n:root, :host {\n --font-size-0-5: 0.5rem;\n --font-size-0-75: 0.75rem;\n --font-size-1: 1rem;\n --font-size-1-5: 1.25rem;\n --font-size-2: 1.5rem;\n --font-size-3: 2rem;\n --font-size-4: 2.5rem;\n --font-size-5: 3rem;\n --font-size-6: 3.5rem;\n --font-size-7: 4rem;\n --font-size-8: 4.5rem;\n --font-size-9: 5rem;\n}\n\n:root, :host {\n --font-weight-regular: 400;\n --font-weight-bold: 700;\n}\n\n:root, :host {\n --border-radius: var(--space-1);\n --border-width-sm: 1px;\n --border-width-md: 2px;\n --border-width-lg: 3px;\n --alert-border-width: var(--border-width-md);\n --fieldset-border-width: var(--border-width-md);\n --input-border-width: var(--border-width-md);\n}\n\n:root, :host {\n --space-0-125: 0.0625rem;\n --space-0-25: 0.125rem;\n --space-0-5: 0.25rem;\n --space-1: 0.5rem;\n --space-1-5: 0.75rem;\n --space-2: 1rem;\n --space-3: 1.5rem;\n --space-4: 2rem;\n --space-5: 2.5rem;\n --space-6: 3rem;\n --space-7: 3.5rem;\n --space-8: 4rem;\n --space-9: 4.5rem;\n --space-10: 5rem;\n}\n\n.rpf-button {\n --rpf-button-background-color: var(--rpf-navy-800);\n --rpf-button-background-color-hover: var(--rpf-navy-900);\n --rpf-button-background-color-active: var(--rpf-navy-600);\n --rpf-button-background-color-disabled: var(--rpf-grey-600);\n --rpf-button-text-color: var(--rpf-white);\n --rpf-button-border-radius: var(--border-radius);\n --rpf-button-lg-height: 48px;\n --rpf-button-sm-height: 32px;\n /* 44px min-height to meet WCAG AAA target size requirements */\n --rpf-button-min-target-size: 44px;\n all: unset;\n align-items: center;\n box-sizing: border-box;\n color: var(--rpf-button-text-color);\n /*\n * We've decided to follow the masses on this and have a pointer on buttons.\n * Google, Facebook, Twitter, Mozilla, and Microsoft amongst many others have a pointer on buttons.\n */\n cursor: pointer;\n display: flex;\n font-size: var(--font-size-1-5);\n font-weight: var(--font-weight-bold);\n gap: var(--space-1);\n min-block-size: var(--rpf-button-lg-height);\n padding: var(--space-1) var(--space-2);\n position: relative;\n text-align: center;\n text-decoration: none;\n /* Fixes a rendering error that sometimes occurs due to negative z-index */\n transform: scale(1);\n inline-size: fit-content;\n /* A bit of a hack to allow for separate visual and target heights */\n}\n.rpf-button::before {\n background-color: var(--rpf-button-background-color);\n border-color: var(--rpf-button-background-color);\n border-radius: var(--rpf-button-border-radius);\n border-style: solid;\n border-width: 2px;\n content: \"\";\n display: block;\n inset: 0;\n position: absolute;\n /* To ensure it renders under its siblings */\n z-index: -1;\n}\n.rpf-button:hover::before {\n background-color: var(--rpf-button-background-color-hover);\n border-color: var(--rpf-button-background-color-hover);\n}\n.rpf-button:active::before {\n background-color: var(--rpf-button-background-color-active);\n border-color: var(--rpf-button-background-color-active);\n}\n.rpf-button:focus-visible::before {\n outline: 2px solid var(--rpf-button-background-color);\n outline-offset: 3px;\n}\n.rpf-button:disabled, .rpf-button--disabled {\n cursor: default;\n}\n.rpf-button:disabled::before, .rpf-button:disabled:hover::before, .rpf-button--disabled::before, .rpf-button--disabled:hover::before {\n border-color: var(--rpf-button-background-color-disabled);\n background-color: var(--rpf-button-background-color-disabled);\n}\n.rpf-button--secondary {\n color: var(--rpf-button-background-color);\n}\n.rpf-button--secondary::before {\n background-color: var(--rpf-button-text-color);\n}\n.rpf-button--secondary:hover {\n color: var(--rpf-button-background-color-hover);\n}\n.rpf-button--secondary:hover::before {\n background-color: var(--rpf-button-text-color);\n border-color: var(--rpf-button-background-color-hover);\n}\n.rpf-button--secondary:active {\n color: var(--rpf-button-background-color-active);\n}\n.rpf-button--secondary:active::before {\n background-color: var(--rpf-button-text-color);\n border-color: var(--rpf-button-background-color-active);\n}\n.rpf-button--secondary:disabled, .rpf-button--secondary.rpf-button--disabled {\n color: var(--rpf-button-background-color-disabled);\n}\n.rpf-button--secondary:disabled:hover::before, .rpf-button--secondary:disabled:before, .rpf-button--secondary.rpf-button--disabled:hover::before, .rpf-button--secondary.rpf-button--disabled:before {\n background-color: var(--rpf-button-text-color);\n border-color: var(--rpf-button-background-color-disabled);\n}\n.rpf-button--tertiary {\n color: var(--rpf-button-background-color);\n}\n.rpf-button--tertiary::before {\n background-color: transparent;\n border-color: transparent;\n}\n.rpf-button--tertiary:hover {\n color: var(--rpf-button-background-color-hover);\n}\n.rpf-button--tertiary:hover::before {\n background-color: transparent;\n border-color: transparent;\n}\n.rpf-button--tertiary:active {\n color: var(--rpf-button-background-color-active);\n}\n.rpf-button--tertiary:active::before {\n background-color: transparent;\n}\n.rpf-button--tertiary:disabled, .rpf-button--tertiary.rpf-button--disabled {\n color: var(--rpf-button-background-color-disabled);\n}\n.rpf-button--tertiary:disabled::before, .rpf-button--tertiary:disabled:hover::before, .rpf-button--tertiary.rpf-button--disabled::before, .rpf-button--tertiary.rpf-button--disabled:hover::before {\n background-color: transparent;\n border-color: transparent;\n}\n.rpf-button--danger {\n --rpf-button-background-color: var(--rpf-alert-error);\n --rpf-button-background-color-hover: var(--rpf-alert-error);\n --rpf-button-background-color-active: var(--rpf-red-900);\n}\n.rpf-button--icon-only {\n block-size: var(--rpf-button-lg-height);\n line-height: var(--rpf-button-lg-height);\n padding: 0;\n text-align: center;\n inline-size: var(--rpf-button-lg-height);\n}\n.rpf-button--icon-only .rpf-button__icon {\n margin: 0 auto;\n}\n.rpf-button--sm {\n font-size: var(--font-size-1);\n min-block-size: var(--rpf-button-min-target-size);\n padding: var(--space-1) var(--space-1);\n /* To account for 32px visual height and 44px target height */\n}\n.rpf-button--sm::before {\n inset: calc((var(--rpf-button-min-target-size) - var(--rpf-button-sm-height)) / 2) 0;\n}\n.rpf-button--sm.rpf-button--icon-only {\n block-size: var(--rpf-button-min-target-size);\n line-height: var(--rpf-button-min-target-size);\n padding: 0;\n inline-size: var(--rpf-button-min-target-size);\n}\n.rpf-button--sm.rpf-button--icon-only::before {\n inset: calc((var(--rpf-button-min-target-size) - var(--rpf-button-sm-height)) / 2);\n}\n.rpf-button--sm .material-symbols-sharp {\n font-size: 20px;\n font-variation-settings: \"OPSZ\" 20;\n}\n.rpf-button--full-width {\n justify-content: center;\n inline-size: 100%;\n}\n";
1176
1173
  styleInject(css_248z$5);
@@ -1181,7 +1178,6 @@ const Button = ({
1181
1178
  href,
1182
1179
  title,
1183
1180
  className,
1184
- ariaLabel = "",
1185
1181
  type = "primary",
1186
1182
  variant = "",
1187
1183
  size = "default",
@@ -1190,7 +1186,8 @@ const Button = ({
1190
1186
  iconPosition = "left",
1191
1187
  fullWidth = false,
1192
1188
  disabled = false,
1193
- onClick = () => {}
1189
+ onClick = () => {},
1190
+ "aria-label": ariaLabel = ""
1194
1191
  }) => {
1195
1192
  const iconButton = icon && iconOnly;
1196
1193
  const classes = classNames(
@@ -1222,17 +1219,17 @@ const Button = ({
1222
1219
  if (href) {
1223
1220
  return /*#__PURE__*/React.createElement(reactRouterDom.Link, {
1224
1221
  className: classes,
1225
- "aria-label": ariaLabel,
1226
1222
  to: href,
1227
- onClick: onClick
1223
+ onClick: onClick,
1224
+ "aria-label": ariaLabel
1228
1225
  }, content);
1229
1226
  }
1230
1227
  return /*#__PURE__*/React.createElement("button", {
1231
1228
  className: classes,
1232
1229
  title: title,
1233
- "aria-label": ariaLabel,
1234
1230
  onClick: onClick,
1235
- disabled: disabled
1231
+ disabled: disabled,
1232
+ "aria-label": ariaLabel
1236
1233
  }, content);
1237
1234
  };
1238
1235
  Button.propTypes = {
@@ -1244,13 +1241,14 @@ Button.propTypes = {
1244
1241
  onClick: PropTypes.func,
1245
1242
  text: PropTypes.string,
1246
1243
  iconOnly: PropTypes.bool,
1247
- ariaLabel: PropTypes.string,
1248
1244
  title: PropTypes.string,
1249
1245
  iconPosition: PropTypes.oneOf(["left", "right"]),
1250
- size: PropTypes.oneOf(["default", "small"]) // added size prop
1246
+ size: PropTypes.oneOf(["default", "small"]),
1247
+ // added size prop
1248
+ "aria-label": PropTypes.string
1251
1249
  };
1252
1250
 
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\n.rpf-alert__body p {\n margin-block-end: 0;\n}\n.rpf-alert__actions .rpf-button {\n padding-inline-start: 0;\n padding-block-end: 0;\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";
1254
1252
  styleInject(css_248z$4);
1255
1253
 
1256
1254
  /* eslint-disable complexity */
package/dist/esm/bundle.js CHANGED
@@ -1145,7 +1145,7 @@ const Accordion = ({
1145
1145
  content,
1146
1146
  title,
1147
1147
  className,
1148
- id
1148
+ id = "accordion"
1149
1149
  }) => {
1150
1150
  const classes = classNames("rpf-accordion", className);
1151
1151
  return /*#__PURE__*/React.createElement("details", {
@@ -1166,9 +1166,6 @@ Accordion.propTypes = {
1166
1166
  id: PropTypes.string,
1167
1167
  className: PropTypes.string
1168
1168
  };
1169
- Accordion.defaultProps = {
1170
- id: "accordion"
1171
- };
1172
1169
 
1173
1170
  var css_248z$5 = ":root, :host {\n --rpf-brand-black: hsla(60, 4%, 11%, 1);\n --rpf-brand-leaf: hsla(123, 43%, 48%, 1);\n --rpf-brand-raspberry: hsla(342, 71%, 47%, 1);\n --rpf-raspberry-50: hsla(338, 57%, 97%, 1);\n --rpf-raspberry-100: hsla(342, 62%, 96%, 1);\n --rpf-raspberry-200: hsla(344, 73%, 93%, 1);\n --rpf-raspberry-400: hsla(341, 63%, 84%, 1);\n --rpf-raspberry-500: hsla(343, 62%, 68%, 1);\n --rpf-raspberry-600: hsla(343, 64%, 58%, 1);\n --rpf-raspberry-800: hsla(342, 71%, 47%, 1);\n --rpf-raspberry-900: hsla(340, 78%, 36%, 1);\n}\n\n:root, :host {\n --rpf-red-100: hsla(4, 89%, 96%, 1);\n --rpf-red-200: hsla(1, 87%, 91%, 1);\n --rpf-red-400: hsla(1, 87%, 82%, 1);\n --rpf-red-600: hsla(1, 87%, 72%, 1);\n --rpf-red-800: hsla(1, 87%, 63%, 1);\n --rpf-red-900: hsla(1, 52%, 50%, 1);\n --rpf-green-100: hsla(125, 41%, 95%, 1);\n --rpf-green-200: hsla(122, 39%, 87%, 1);\n --rpf-green-400: hsla(123, 40%, 74%, 1);\n --rpf-green-600: hsla(123, 40%, 61%, 1);\n --rpf-green-800: hsla(123, 43%, 48%, 1);\n --rpf-green-900: hsla(123, 43%, 34%, 1);\n --rpf-teal-100: hsla(176, 55%, 94%, 1);\n --rpf-teal-200: hsla(174, 55%, 85%, 1);\n --rpf-teal-400: hsla(174, 55%, 70%, 1);\n --rpf-teal-600: hsla(174, 56%, 56%, 1);\n --rpf-teal-800: hsla(174, 81%, 41%, 1);\n --rpf-teal-900: hsla(174, 81%, 27%, 1);\n --rpf-orange-100: hsla(31, 100%, 95%, 1);\n --rpf-orange-200: hsla(32, 100%, 88%, 1);\n --rpf-orange-400: hsla(31, 100%, 77%, 1);\n --rpf-orange-600: hsla(31, 99%, 65%, 1);\n --rpf-orange-800: hsla(31, 99%, 54%, 1);\n --rpf-orange-900: hsla(31, 85%, 35%, 1);\n --rpf-yellow-100: hsla(51, 100%, 95%, 1);\n --rpf-yellow-200: hsla(52, 100%, 87%, 1);\n --rpf-yellow-400: hsla(51, 100%, 75%, 1);\n --rpf-yellow-600: hsla(52, 100%, 63%, 1);\n --rpf-yellow-800: hsla(52, 100%, 50%, 1);\n --rpf-yellow-900: hsla(52, 100%, 26%, 1);\n --rpf-purple-100: hsla(282, 36%, 95%, 1);\n --rpf-purple-200: hsla(279, 38%, 87%, 1);\n --rpf-purple-400: hsla(279, 38%, 73%, 1);\n --rpf-purple-600: hsla(279, 37%, 60%, 1);\n --rpf-purple-800: hsla(279, 43%, 47%, 1);\n --rpf-purple-900: hsla(280, 43%, 37%, 1);\n --rpf-navy-100: hsla(235, 38%, 94%, 1);\n --rpf-navy-200: hsla(234, 38%, 84%, 1);\n --rpf-navy-400: hsla(235, 38%, 69%, 1);\n --rpf-navy-600: hsla(235, 38%, 53%, 1);\n --rpf-navy-800: hsla(235, 63%, 37%, 1);\n --rpf-navy-900: hsla(234, 63%, 30%, 1);\n --rpf-blue-100: hsla(203, 86%, 95%, 1);\n --rpf-blue-200: hsla(204, 88%, 87%, 1);\n --rpf-blue-400: hsla(204, 88%, 74%, 1);\n --rpf-blue-600: hsla(204, 89%, 60%, 1);\n --rpf-blue-800: hsla(204, 100%, 47%, 1);\n --rpf-blue-900: hsla(204, 99%, 37%, 1);\n}\n\n:root, :host {\n --rpf-white: hsla(0, 0%, 100%, 1);\n --rpf-off-white: hsla(225, 25%, 97%, 1);\n --rpf-grey-50: hsla(210, 8%, 95%, 1);\n --rpf-grey-100: hsla(228, 10%, 90%, 1);\n --rpf-grey-150: hsla(223, 9%, 85%, 1);\n --rpf-grey-200: hsla(228, 10%, 80%, 1);\n --rpf-grey-300: hsla(229, 9%, 75%, 1);\n --rpf-grey-400: hsla(229, 8%, 61%, 1);\n --rpf-grey-500: hsla(229, 9%, 42%, 1);\n --rpf-grey-600: hsla(228, 9%, 32%, 1);\n --rpf-grey-700: hsla(228, 9%, 22%, 1);\n --rpf-grey-800: hsla(232, 9%, 18%, 1);\n --rpf-grey-850: hsla(228, 9%, 15%, 1);\n --rpf-grey-900: hsla(228, 9%, 10%, 1);\n --rpf-grey-950: hsla(228, 8%, 5%, 1);\n --rpf-black: hsla(0, 0%, 0%, 1);\n}\n\n:root, :host {\n --rpf-alert-error-highlight: hsla(0, 88%, 99%, 1);\n --rpf-alert-error: hsla(0, 88%, 33%, 1);\n --rpf-alert-information-highlight: hsla(225, 64%, 99%, 1);\n --rpf-alert-information: hsla(225, 64%, 33%, 1);\n --rpf-alert-success-highlight: hsla(136, 90%, 99%, 1);\n --rpf-alert-success: hsla(136, 90%, 20%, 1);\n --rpf-alert-warning-highlight: hsla(26, 70%, 99%, 1);\n --rpf-alert-warning: hsla(26, 70%, 29%, 1);\n}\n\n:root, :host {\n --font-size-0-5: 0.5rem;\n --font-size-0-75: 0.75rem;\n --font-size-1: 1rem;\n --font-size-1-5: 1.25rem;\n --font-size-2: 1.5rem;\n --font-size-3: 2rem;\n --font-size-4: 2.5rem;\n --font-size-5: 3rem;\n --font-size-6: 3.5rem;\n --font-size-7: 4rem;\n --font-size-8: 4.5rem;\n --font-size-9: 5rem;\n}\n\n:root, :host {\n --font-weight-regular: 400;\n --font-weight-bold: 700;\n}\n\n:root, :host {\n --border-radius: var(--space-1);\n --border-width-sm: 1px;\n --border-width-md: 2px;\n --border-width-lg: 3px;\n --alert-border-width: var(--border-width-md);\n --fieldset-border-width: var(--border-width-md);\n --input-border-width: var(--border-width-md);\n}\n\n:root, :host {\n --space-0-125: 0.0625rem;\n --space-0-25: 0.125rem;\n --space-0-5: 0.25rem;\n --space-1: 0.5rem;\n --space-1-5: 0.75rem;\n --space-2: 1rem;\n --space-3: 1.5rem;\n --space-4: 2rem;\n --space-5: 2.5rem;\n --space-6: 3rem;\n --space-7: 3.5rem;\n --space-8: 4rem;\n --space-9: 4.5rem;\n --space-10: 5rem;\n}\n\n.rpf-button {\n --rpf-button-background-color: var(--rpf-navy-800);\n --rpf-button-background-color-hover: var(--rpf-navy-900);\n --rpf-button-background-color-active: var(--rpf-navy-600);\n --rpf-button-background-color-disabled: var(--rpf-grey-600);\n --rpf-button-text-color: var(--rpf-white);\n --rpf-button-border-radius: var(--border-radius);\n --rpf-button-lg-height: 48px;\n --rpf-button-sm-height: 32px;\n /* 44px min-height to meet WCAG AAA target size requirements */\n --rpf-button-min-target-size: 44px;\n all: unset;\n align-items: center;\n box-sizing: border-box;\n color: var(--rpf-button-text-color);\n /*\n * We've decided to follow the masses on this and have a pointer on buttons.\n * Google, Facebook, Twitter, Mozilla, and Microsoft amongst many others have a pointer on buttons.\n */\n cursor: pointer;\n display: flex;\n font-size: var(--font-size-1-5);\n font-weight: var(--font-weight-bold);\n gap: var(--space-1);\n min-block-size: var(--rpf-button-lg-height);\n padding: var(--space-1) var(--space-2);\n position: relative;\n text-align: center;\n text-decoration: none;\n /* Fixes a rendering error that sometimes occurs due to negative z-index */\n transform: scale(1);\n inline-size: fit-content;\n /* A bit of a hack to allow for separate visual and target heights */\n}\n.rpf-button::before {\n background-color: var(--rpf-button-background-color);\n border-color: var(--rpf-button-background-color);\n border-radius: var(--rpf-button-border-radius);\n border-style: solid;\n border-width: 2px;\n content: \"\";\n display: block;\n inset: 0;\n position: absolute;\n /* To ensure it renders under its siblings */\n z-index: -1;\n}\n.rpf-button:hover::before {\n background-color: var(--rpf-button-background-color-hover);\n border-color: var(--rpf-button-background-color-hover);\n}\n.rpf-button:active::before {\n background-color: var(--rpf-button-background-color-active);\n border-color: var(--rpf-button-background-color-active);\n}\n.rpf-button:focus-visible::before {\n outline: 2px solid var(--rpf-button-background-color);\n outline-offset: 3px;\n}\n.rpf-button:disabled, .rpf-button--disabled {\n cursor: default;\n}\n.rpf-button:disabled::before, .rpf-button:disabled:hover::before, .rpf-button--disabled::before, .rpf-button--disabled:hover::before {\n border-color: var(--rpf-button-background-color-disabled);\n background-color: var(--rpf-button-background-color-disabled);\n}\n.rpf-button--secondary {\n color: var(--rpf-button-background-color);\n}\n.rpf-button--secondary::before {\n background-color: var(--rpf-button-text-color);\n}\n.rpf-button--secondary:hover {\n color: var(--rpf-button-background-color-hover);\n}\n.rpf-button--secondary:hover::before {\n background-color: var(--rpf-button-text-color);\n border-color: var(--rpf-button-background-color-hover);\n}\n.rpf-button--secondary:active {\n color: var(--rpf-button-background-color-active);\n}\n.rpf-button--secondary:active::before {\n background-color: var(--rpf-button-text-color);\n border-color: var(--rpf-button-background-color-active);\n}\n.rpf-button--secondary:disabled, .rpf-button--secondary.rpf-button--disabled {\n color: var(--rpf-button-background-color-disabled);\n}\n.rpf-button--secondary:disabled:hover::before, .rpf-button--secondary:disabled:before, .rpf-button--secondary.rpf-button--disabled:hover::before, .rpf-button--secondary.rpf-button--disabled:before {\n background-color: var(--rpf-button-text-color);\n border-color: var(--rpf-button-background-color-disabled);\n}\n.rpf-button--tertiary {\n color: var(--rpf-button-background-color);\n}\n.rpf-button--tertiary::before {\n background-color: transparent;\n border-color: transparent;\n}\n.rpf-button--tertiary:hover {\n color: var(--rpf-button-background-color-hover);\n}\n.rpf-button--tertiary:hover::before {\n background-color: transparent;\n border-color: transparent;\n}\n.rpf-button--tertiary:active {\n color: var(--rpf-button-background-color-active);\n}\n.rpf-button--tertiary:active::before {\n background-color: transparent;\n}\n.rpf-button--tertiary:disabled, .rpf-button--tertiary.rpf-button--disabled {\n color: var(--rpf-button-background-color-disabled);\n}\n.rpf-button--tertiary:disabled::before, .rpf-button--tertiary:disabled:hover::before, .rpf-button--tertiary.rpf-button--disabled::before, .rpf-button--tertiary.rpf-button--disabled:hover::before {\n background-color: transparent;\n border-color: transparent;\n}\n.rpf-button--danger {\n --rpf-button-background-color: var(--rpf-alert-error);\n --rpf-button-background-color-hover: var(--rpf-alert-error);\n --rpf-button-background-color-active: var(--rpf-red-900);\n}\n.rpf-button--icon-only {\n block-size: var(--rpf-button-lg-height);\n line-height: var(--rpf-button-lg-height);\n padding: 0;\n text-align: center;\n inline-size: var(--rpf-button-lg-height);\n}\n.rpf-button--icon-only .rpf-button__icon {\n margin: 0 auto;\n}\n.rpf-button--sm {\n font-size: var(--font-size-1);\n min-block-size: var(--rpf-button-min-target-size);\n padding: var(--space-1) var(--space-1);\n /* To account for 32px visual height and 44px target height */\n}\n.rpf-button--sm::before {\n inset: calc((var(--rpf-button-min-target-size) - var(--rpf-button-sm-height)) / 2) 0;\n}\n.rpf-button--sm.rpf-button--icon-only {\n block-size: var(--rpf-button-min-target-size);\n line-height: var(--rpf-button-min-target-size);\n padding: 0;\n inline-size: var(--rpf-button-min-target-size);\n}\n.rpf-button--sm.rpf-button--icon-only::before {\n inset: calc((var(--rpf-button-min-target-size) - var(--rpf-button-sm-height)) / 2);\n}\n.rpf-button--sm .material-symbols-sharp {\n font-size: 20px;\n font-variation-settings: \"OPSZ\" 20;\n}\n.rpf-button--full-width {\n justify-content: center;\n inline-size: 100%;\n}\n";
1174
1171
  styleInject(css_248z$5);
@@ -1179,7 +1176,6 @@ const Button = ({
1179
1176
  href,
1180
1177
  title,
1181
1178
  className,
1182
- ariaLabel = "",
1183
1179
  type = "primary",
1184
1180
  variant = "",
1185
1181
  size = "default",
@@ -1188,7 +1184,8 @@ const Button = ({
1188
1184
  iconPosition = "left",
1189
1185
  fullWidth = false,
1190
1186
  disabled = false,
1191
- onClick = () => {}
1187
+ onClick = () => {},
1188
+ "aria-label": ariaLabel = ""
1192
1189
  }) => {
1193
1190
  const iconButton = icon && iconOnly;
1194
1191
  const classes = classNames(
@@ -1220,17 +1217,17 @@ const Button = ({
1220
1217
  if (href) {
1221
1218
  return /*#__PURE__*/React.createElement(Link, {
1222
1219
  className: classes,
1223
- "aria-label": ariaLabel,
1224
1220
  to: href,
1225
- onClick: onClick
1221
+ onClick: onClick,
1222
+ "aria-label": ariaLabel
1226
1223
  }, content);
1227
1224
  }
1228
1225
  return /*#__PURE__*/React.createElement("button", {
1229
1226
  className: classes,
1230
1227
  title: title,
1231
- "aria-label": ariaLabel,
1232
1228
  onClick: onClick,
1233
- disabled: disabled
1229
+ disabled: disabled,
1230
+ "aria-label": ariaLabel
1234
1231
  }, content);
1235
1232
  };
1236
1233
  Button.propTypes = {
@@ -1242,13 +1239,14 @@ Button.propTypes = {
1242
1239
  onClick: PropTypes.func,
1243
1240
  text: PropTypes.string,
1244
1241
  iconOnly: PropTypes.bool,
1245
- ariaLabel: PropTypes.string,
1246
1242
  title: PropTypes.string,
1247
1243
  iconPosition: PropTypes.oneOf(["left", "right"]),
1248
- size: PropTypes.oneOf(["default", "small"]) // added size prop
1244
+ size: PropTypes.oneOf(["default", "small"]),
1245
+ // added size prop
1246
+ "aria-label": PropTypes.string
1249
1247
  };
1250
1248
 
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\n.rpf-alert__body p {\n margin-block-end: 0;\n}\n.rpf-alert__actions .rpf-button {\n padding-inline-start: 0;\n padding-block-end: 0;\n}\n";
1249
+ 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";
1252
1250
  styleInject(css_248z$4);
1253
1251
 
1254
1252
  /* eslint-disable complexity */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@raspberrypifoundation/design-system-react",
3
- "version": "1.1.12",
3
+ "version": "1.1.14",
4
4
  "description": "",
5
5
  "main": "dist/cjs/bundle.js",
6
6
  "module": "dist/esm/bundle.js",