@raspberrypifoundation/design-system-react 1.1.13 → 1.1.14

package/dist/cjs/bundle.js

@@ -1147,7 +1147,7 @@ const Accordion = ({
   content,
   title,
   className,
-  id
+  id = "accordion"
 }) => {
   const classes = classNames("rpf-accordion", className);
   return /*#__PURE__*/React.createElement("details", {
@@ -1168,9 +1168,6 @@ Accordion.propTypes = {
   id: PropTypes.string,
   className: PropTypes.string
 };
-Accordion.defaultProps = {
-  id: "accordion"
-};
 
 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";
 styleInject(css_248z$5);

package/dist/esm/bundle.js

@@ -1145,7 +1145,7 @@ const Accordion = ({
   content,
   title,
   className,
-  id
+  id = "accordion"
 }) => {
   const classes = classNames("rpf-accordion", className);
   return /*#__PURE__*/React.createElement("details", {
@@ -1166,9 +1166,6 @@ Accordion.propTypes = {
   id: PropTypes.string,
   className: PropTypes.string
 };
-Accordion.defaultProps = {
-  id: "accordion"
-};
 
 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";
 styleInject(css_248z$5);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@raspberrypifoundation/design-system-react",
-  "version": "1.1.13",
+  "version": "1.1.14",
   "description": "",
   "main": "dist/cjs/bundle.js",
   "module": "dist/esm/bundle.js",