@asphalt-react/radio - npm Package Compare versions

Comparing version 2.10.0 to 2.11.0

dist/index.cjs

@@ -45,5 +45,5 @@ 'use strict';
 
-var css_248z = ".RadioWrap__b23GS {\n  --surface-color: var(--interactive-surface-primary-default, #ffffff);\n  --focus-appearance: var(--focus-outline, 2px solid);\n  --focus-color: var(--interactive-focus, #86afff);\n  --focus: var(--focus-appearance) var(--focus-color);\n  --radio-selected: var(--interactive-selected-default, #3e62fe);\n  --radio-dimensions: 1.25rem;\n  --radio-selected-dimensions: 0.725rem;\n\n  display: inline-flex;\n  align-items: center;\n  position: relative;\n  box-sizing: border-box;\n}\n\n/* Hide the radio accessibly */\n.RadioInput__mNfR9 {\n  /* remove the radio from the page flow, positioning it on top of the SVG */\n  position: absolute;\n  /* set same dimensions as the SVG to make it touch inclusive*/\n  width: var(--radio-dimensions);\n  height: var(--radio-dimensions);\n  opacity: 0;\n  z-index: 1; /* ensure it is on top of the SVG */\n}\n\n.icon__LIzQj {\n  --border-color: var(--interactive-default, #cbcfd7);\n  width: var(--radio-dimensions);\n  height: var(--radio-dimensions);\n  flex: 0 0 auto;\n  background: var(--surface-color);\n  border: 1px solid var(--border-color);\n  border-radius: var(--roundness-full, 62rem);\n  position: relative;\n}\n\n/* Hide the path in the unchecked (default) state */\n.icon__LIzQj::after {\n  content: \"\";\n  display: none;\n  width: var(--radio-selected-dimensions);\n  height: var(--radio-selected-dimensions);\n  border-radius: var(--roundness-full, 62rem);\n  background: var(--radio-selected);\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  box-sizing: border-box;\n}\n\n.label__OpgYg {\n  --label-color: var(--content-secondary, #4f515c);\n  /* add space between radio and label */\n  margin-left: 0.75rem;\n  color: var(--label-color);\n}\n\n/*\nUsing CSS combinators to apply styles in SVG as we depend on\npseudo classes of input element for Radio's state.\nSo, changing the HTML strcuture may require CSS changes as well.\n*/\n\n/*\nSVG is the adjacent sibling of input element\n*/\n.RadioInput__mNfR9:checked + .icon__LIzQj {\n  --border-color: var(--interactive-selected-default, #3e62fe);\n  box-shadow: 0 0 0 4px white inset;\n  border: 1px solid transparent;\n  background: var(--border-color);\n  background-origin: border-box;\n}\n\n.RadioInput__mNfR9:checked + .icon__LIzQj::after {\n  display: block;\n}\n\n.RadioInput__mNfR9:hover + .icon__LIzQj {\n  --surface-color: var(--interactive-surface-primary-hover, #f5f7fa);\n}\n\n.RadioInput__mNfR9:checked:hover + .icon__LIzQj {\n  --surface-color: var(--interactive-surface-primary-hover, #f5f7fa);\n  --border-color: var(--interactive-selected-hover, #638aff);\n}\n\n.RadioInput__mNfR9:checked:hover + .icon__LIzQj::after {\n  --radio-selected: var(--interactive-selected-hover, #638aff);\n}\n\n/* fallback styles for \":is()\" */\n.RadioInput__mNfR9:active + .icon__LIzQj,\n.RadioInput__mNfR9:checked:active + .icon__LIzQj {\n  --border-color: var(--interactive-active, #1c3abb);\n  --surface-color: var(--interactive-surface-primary-active, #d6dce7);\n}\n\n:is(.RadioInput__mNfR9, .RadioInput__mNfR9:checked):active + .icon__LIzQj {\n  --border-color: var(--interactive-active, #1c3abb);\n  --surface-color: var(--interactive-surface-primary-active, #d6dce7);\n}\n\n.RadioInput__mNfR9:checked:active + .icon__LIzQj::after {\n  --radio-selected: var(--interactive-selected-active, #1c3abb);\n}\n\n.RadioInput__mNfR9:focus + .icon__LIzQj {\n  /* fallback style for browsers\n    that don't support :focus-visible */\n  outline: var(--focus);\n}\n\n.RadioInput__mNfR9:focus:not(:focus-visible) + .icon__LIzQj {\n  /* remove the focus indicator on mouse-focus for browsers\n    that do support :focus-visible */\n  outline: none;\n}\n\n.RadioInput__mNfR9:focus-visible + .icon__LIzQj {\n  outline: var(--focus);\n}\n\n/* fallback styles for \":is()\" */\n.RadioWrapDisable__ti5ZS,\n.RadioInput__mNfR9:disabled {\n  cursor: not-allowed;\n}\n\n:is(.RadioWrapDisable__ti5ZS, .RadioInput__mNfR9:disabled) {\n  cursor: not-allowed;\n}\n\n.RadioInput__mNfR9:disabled ~ .label__OpgYg {\n  --label-color: var(--content-disabled, #9a9eaa);\n}\n\n/* fallback styles for \":is()\" */\n.RadioInput__mNfR9:disabled + .icon__LIzQj,\n.RadioInput__mNfR9:checked:disabled + .icon__LIzQj,\n.RadioInput__mNfR9:active:disabled + .icon__LIzQj {\n  --surface-color: var(--interactive-surface-disabled, #f1f3f6);\n  --border-color: var(--interactive-disabled, #eaecf0);\n}\n\n:is(.RadioInput__mNfR9, .RadioInput__mNfR9:checked, .RadioInput__mNfR9:active):disabled + .icon__LIzQj {\n  --surface-color: var(--interactive-surface-disabled, #f1f3f6);\n  --border-color: var(--interactive-disabled, #eaecf0);\n}\n\n/* fallback styles for \":is()\" */\n.RadioInput__mNfR9:disabled + .icon__LIzQj::after,\n.RadioInput__mNfR9:checked:disabled + .icon__LIzQj::after,\n.RadioInput__mNfR9:active:disabled + .icon__LIzQj::after {\n  --radio-selected: var(--content-disabled, #9a9eaa);\n}\n\n:is(.RadioInput__mNfR9, .RadioInput__mNfR9:checked, .RadioInput__mNfR9:active):disabled\n  + .icon__LIzQj::after {\n  --radio-selected: var(--content-disabled, #9a9eaa);\n}\n\n.s__XRd3F {\n  font: var(\n    --text-regular-S,\n    500 0.875rem/1.618 Maison Neue,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n}\n\n.m__fab9Z {\n  font: var(\n    --text-regular-M,\n    500 1rem/1.618 Maison Neue,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n}\n\n.l__3aY-T {\n  font: var(\n    --text-regular-L,\n    500 1.125rem/1.618 Maison Neue,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n}\n\n/* handle rtl direction */\n*[dir=\"rtl\"] .label__OpgYg {\n  margin-right: 0.625rem;\n  margin-left: unset;\n}\n";
+var css_248z = ".RadioWrap__b23GS {\n  --surface-color: var(--interactive-surface-primary-default, #ffffff);\n  --focus-appearance: var(--focus-outline, 2px solid);\n  --focus-color: var(--interactive-focus, #86afff);\n  --focus: var(--focus-appearance) var(--focus-color);\n  --radio-selected: var(--interactive-selected-default, #3e62fe);\n  --radio-surface-color: var(--static-surface-primary, #ffffff);\n  --radio-dimensions: 1.25rem;\n  --radio-selected-dimensions: 0.725rem;\n\n  display: inline-flex;\n  align-items: center;\n  position: relative;\n  box-sizing: border-box;\n}\n\n/* Hide the radio accessibly */\n.RadioInput__mNfR9 {\n  /* remove the radio from the page flow, positioning it on top of the SVG */\n  position: absolute;\n  /* set same dimensions as the SVG to make it touch inclusive*/\n  width: var(--radio-dimensions);\n  height: var(--radio-dimensions);\n  opacity: 0;\n  z-index: 1; /* ensure it is on top of the SVG */\n}\n\n.icon__LIzQj {\n  --border-color: var(--interactive-default, #cbcfd7);\n  width: var(--radio-dimensions);\n  height: var(--radio-dimensions);\n  flex: 0 0 auto;\n  background: var(--surface-color);\n  border: 1px solid var(--border-color);\n  border-radius: var(--roundness-full, 62rem);\n  position: relative;\n}\n\n/* Hide the path in the unchecked (default) state */\n.icon__LIzQj::after {\n  content: \"\";\n  display: none;\n  width: var(--radio-selected-dimensions);\n  height: var(--radio-selected-dimensions);\n  border-radius: var(--roundness-full, 62rem);\n  background: var(--radio-selected);\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  box-sizing: border-box;\n}\n\n.label__OpgYg {\n  --label-color: var(--content-secondary, #4f515c);\n  /* add space between radio and label */\n  margin-left: 0.75rem;\n  color: var(--label-color);\n}\n\n/*\nUsing CSS combinators to apply styles in SVG as we depend on\npseudo classes of input element for Radio's state.\nSo, changing the HTML strcuture may require CSS changes as well.\n*/\n\n/*\nSVG is the adjacent sibling of input element\n*/\n.RadioInput__mNfR9:checked + .icon__LIzQj {\n  --border-color: var(--interactive-selected-default, #3e62fe);\n  box-shadow: 0 0 0 4px var(--radio-surface-color) inset;\n  border: 1px solid transparent;\n  background: var(--border-color);\n  background-origin: border-box;\n}\n\n.RadioInput__mNfR9:checked + .icon__LIzQj::after {\n  display: block;\n}\n\n.RadioInput__mNfR9:hover + .icon__LIzQj {\n  --surface-color: var(--interactive-surface-primary-hover, #f5f7fa);\n}\n\n.RadioInput__mNfR9:checked:hover + .icon__LIzQj {\n  --surface-color: var(--interactive-surface-primary-hover, #f5f7fa);\n  --border-color: var(--interactive-selected-hover, #638aff);\n}\n\n.RadioInput__mNfR9:checked:hover + .icon__LIzQj::after {\n  --radio-selected: var(--interactive-selected-hover, #638aff);\n}\n\n/* fallback styles for \":is()\" */\n.RadioInput__mNfR9:active + .icon__LIzQj,\n.RadioInput__mNfR9:checked:active + .icon__LIzQj {\n  --border-color: var(--interactive-active, #1c3abb);\n  --surface-color: var(--interactive-surface-primary-active, #d6dce7);\n}\n\n:is(.RadioInput__mNfR9, .RadioInput__mNfR9:checked):active + .icon__LIzQj {\n  --border-color: var(--interactive-active, #1c3abb);\n  --surface-color: var(--interactive-surface-primary-active, #d6dce7);\n}\n\n.RadioInput__mNfR9:checked:active + .icon__LIzQj::after {\n  --radio-selected: var(--interactive-selected-active, #1c3abb);\n}\n\n.RadioInput__mNfR9:focus + .icon__LIzQj {\n  /* fallback style for browsers\n    that don't support :focus-visible */\n  outline: var(--focus);\n}\n\n.RadioInput__mNfR9:focus:not(:focus-visible) + .icon__LIzQj {\n  /* remove the focus indicator on mouse-focus for browsers\n    that do support :focus-visible */\n  outline: none;\n}\n\n.RadioInput__mNfR9:focus-visible + .icon__LIzQj {\n  outline: var(--focus);\n}\n\n/* fallback styles for \":is()\" */\n.RadioWrapDisable__ti5ZS,\n.RadioInput__mNfR9:disabled {\n  cursor: not-allowed;\n}\n\n:is(.RadioWrapDisable__ti5ZS, .RadioInput__mNfR9:disabled) {\n  cursor: not-allowed;\n}\n\n.RadioInput__mNfR9:disabled ~ .label__OpgYg {\n  --label-color: var(--content-disabled, #9a9eaa);\n}\n\n/* fallback styles for \":is()\" */\n.RadioInput__mNfR9:disabled + .icon__LIzQj,\n.RadioInput__mNfR9:checked:disabled + .icon__LIzQj,\n.RadioInput__mNfR9:active:disabled + .icon__LIzQj {\n  --surface-color: var(--interactive-surface-disabled, #f1f3f6);\n  --border-color: var(--interactive-disabled, #eaecf0);\n}\n\n:is(.RadioInput__mNfR9, .RadioInput__mNfR9:checked, .RadioInput__mNfR9:active):disabled + .icon__LIzQj {\n  --surface-color: var(--interactive-surface-disabled, #f1f3f6);\n  --border-color: var(--interactive-disabled, #eaecf0);\n}\n\n/* fallback styles for \":is()\" */\n.RadioInput__mNfR9:disabled + .icon__LIzQj::after,\n.RadioInput__mNfR9:checked:disabled + .icon__LIzQj::after,\n.RadioInput__mNfR9:active:disabled + .icon__LIzQj::after {\n  --radio-selected: var(--content-disabled, #9a9eaa);\n}\n\n:is(.RadioInput__mNfR9, .RadioInput__mNfR9:checked, .RadioInput__mNfR9:active):disabled\n  + .icon__LIzQj::after {\n  --radio-selected: var(--content-disabled, #9a9eaa);\n}\n\n.s__XRd3F {\n  font: var(\n    --text-regular-S,\n    500 0.875rem/1.618 Maison Neue,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n}\n\n.m__fab9Z {\n  font: var(\n    --text-regular-M,\n    500 1rem/1.618 Maison Neue,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n}\n\n.l__3aY-T {\n  font: var(\n    --text-regular-L,\n    500 1.125rem/1.618 Maison Neue,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n}\n\n/* handle rtl direction */\n*[dir=\"rtl\"] .label__OpgYg {\n  margin-right: 0.625rem;\n  margin-left: unset;\n}\n";
 var styles = {"RadioWrap":"RadioWrap__b23GS","RadioInput":"RadioInput__mNfR9","icon":"icon__LIzQj","label":"label__OpgYg","RadioWrapDisable":"RadioWrapDisable__ti5ZS","s":"s__XRd3F","m":"m__fab9Z","l":"l__3aY-T"};
-var stylesheet=".RadioWrap__b23GS {\n  --surface-color: var(--interactive-surface-primary-default, #ffffff);\n  --focus-appearance: var(--focus-outline, 2px solid);\n  --focus-color: var(--interactive-focus, #86afff);\n  --focus: var(--focus-appearance) var(--focus-color);\n  --radio-selected: var(--interactive-selected-default, #3e62fe);\n  --radio-dimensions: 1.25rem;\n  --radio-selected-dimensions: 0.725rem;\n\n  display: inline-flex;\n  align-items: center;\n  position: relative;\n  box-sizing: border-box;\n}\n\n/* Hide the radio accessibly */\n.RadioInput__mNfR9 {\n  /* remove the radio from the page flow, positioning it on top of the SVG */\n  position: absolute;\n  /* set same dimensions as the SVG to make it touch inclusive*/\n  width: var(--radio-dimensions);\n  height: var(--radio-dimensions);\n  opacity: 0;\n  z-index: 1; /* ensure it is on top of the SVG */\n}\n\n.icon__LIzQj {\n  --border-color: var(--interactive-default, #cbcfd7);\n  width: var(--radio-dimensions);\n  height: var(--radio-dimensions);\n  flex: 0 0 auto;\n  background: var(--surface-color);\n  border: 1px solid var(--border-color);\n  border-radius: var(--roundness-full, 62rem);\n  position: relative;\n}\n\n/* Hide the path in the unchecked (default) state */\n.icon__LIzQj::after {\n  content: \"\";\n  display: none;\n  width: var(--radio-selected-dimensions);\n  height: var(--radio-selected-dimensions);\n  border-radius: var(--roundness-full, 62rem);\n  background: var(--radio-selected);\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  box-sizing: border-box;\n}\n\n.label__OpgYg {\n  --label-color: var(--content-secondary, #4f515c);\n  /* add space between radio and label */\n  margin-left: 0.75rem;\n  color: var(--label-color);\n}\n\n/*\nUsing CSS combinators to apply styles in SVG as we depend on\npseudo classes of input element for Radio's state.\nSo, changing the HTML strcuture may require CSS changes as well.\n*/\n\n/*\nSVG is the adjacent sibling of input element\n*/\n.RadioInput__mNfR9:checked + .icon__LIzQj {\n  --border-color: var(--interactive-selected-default, #3e62fe);\n  box-shadow: 0 0 0 4px white inset;\n  border: 1px solid transparent;\n  background: var(--border-color);\n  background-origin: border-box;\n}\n\n.RadioInput__mNfR9:checked + .icon__LIzQj::after {\n  display: block;\n}\n\n.RadioInput__mNfR9:hover + .icon__LIzQj {\n  --surface-color: var(--interactive-surface-primary-hover, #f5f7fa);\n}\n\n.RadioInput__mNfR9:checked:hover + .icon__LIzQj {\n  --surface-color: var(--interactive-surface-primary-hover, #f5f7fa);\n  --border-color: var(--interactive-selected-hover, #638aff);\n}\n\n.RadioInput__mNfR9:checked:hover + .icon__LIzQj::after {\n  --radio-selected: var(--interactive-selected-hover, #638aff);\n}\n\n/* fallback styles for \":is()\" */\n.RadioInput__mNfR9:active + .icon__LIzQj,\n.RadioInput__mNfR9:checked:active + .icon__LIzQj {\n  --border-color: var(--interactive-active, #1c3abb);\n  --surface-color: var(--interactive-surface-primary-active, #d6dce7);\n}\n\n:is(.RadioInput__mNfR9, .RadioInput__mNfR9:checked):active + .icon__LIzQj {\n  --border-color: var(--interactive-active, #1c3abb);\n  --surface-color: var(--interactive-surface-primary-active, #d6dce7);\n}\n\n.RadioInput__mNfR9:checked:active + .icon__LIzQj::after {\n  --radio-selected: var(--interactive-selected-active, #1c3abb);\n}\n\n.RadioInput__mNfR9:focus + .icon__LIzQj {\n  /* fallback style for browsers\n    that don't support :focus-visible */\n  outline: var(--focus);\n}\n\n.RadioInput__mNfR9:focus:not(:focus-visible) + .icon__LIzQj {\n  /* remove the focus indicator on mouse-focus for browsers\n    that do support :focus-visible */\n  outline: none;\n}\n\n.RadioInput__mNfR9:focus-visible + .icon__LIzQj {\n  outline: var(--focus);\n}\n\n/* fallback styles for \":is()\" */\n.RadioWrapDisable__ti5ZS,\n.RadioInput__mNfR9:disabled {\n  cursor: not-allowed;\n}\n\n:is(.RadioWrapDisable__ti5ZS, .RadioInput__mNfR9:disabled) {\n  cursor: not-allowed;\n}\n\n.RadioInput__mNfR9:disabled ~ .label__OpgYg {\n  --label-color: var(--content-disabled, #9a9eaa);\n}\n\n/* fallback styles for \":is()\" */\n.RadioInput__mNfR9:disabled + .icon__LIzQj,\n.RadioInput__mNfR9:checked:disabled + .icon__LIzQj,\n.RadioInput__mNfR9:active:disabled + .icon__LIzQj {\n  --surface-color: var(--interactive-surface-disabled, #f1f3f6);\n  --border-color: var(--interactive-disabled, #eaecf0);\n}\n\n:is(.RadioInput__mNfR9, .RadioInput__mNfR9:checked, .RadioInput__mNfR9:active):disabled + .icon__LIzQj {\n  --surface-color: var(--interactive-surface-disabled, #f1f3f6);\n  --border-color: var(--interactive-disabled, #eaecf0);\n}\n\n/* fallback styles for \":is()\" */\n.RadioInput__mNfR9:disabled + .icon__LIzQj::after,\n.RadioInput__mNfR9:checked:disabled + .icon__LIzQj::after,\n.RadioInput__mNfR9:active:disabled + .icon__LIzQj::after {\n  --radio-selected: var(--content-disabled, #9a9eaa);\n}\n\n:is(.RadioInput__mNfR9, .RadioInput__mNfR9:checked, .RadioInput__mNfR9:active):disabled\n  + .icon__LIzQj::after {\n  --radio-selected: var(--content-disabled, #9a9eaa);\n}\n\n.s__XRd3F {\n  font: var(\n    --text-regular-S,\n    500 0.875rem/1.618 Maison Neue,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n}\n\n.m__fab9Z {\n  font: var(\n    --text-regular-M,\n    500 1rem/1.618 Maison Neue,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n}\n\n.l__3aY-T {\n  font: var(\n    --text-regular-L,\n    500 1.125rem/1.618 Maison Neue,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n}\n\n/* handle rtl direction */\n*[dir=\"rtl\"] .label__OpgYg {\n  margin-right: 0.625rem;\n  margin-left: unset;\n}\n";
+var stylesheet=".RadioWrap__b23GS {\n  --surface-color: var(--interactive-surface-primary-default, #ffffff);\n  --focus-appearance: var(--focus-outline, 2px solid);\n  --focus-color: var(--interactive-focus, #86afff);\n  --focus: var(--focus-appearance) var(--focus-color);\n  --radio-selected: var(--interactive-selected-default, #3e62fe);\n  --radio-surface-color: var(--static-surface-primary, #ffffff);\n  --radio-dimensions: 1.25rem;\n  --radio-selected-dimensions: 0.725rem;\n\n  display: inline-flex;\n  align-items: center;\n  position: relative;\n  box-sizing: border-box;\n}\n\n/* Hide the radio accessibly */\n.RadioInput__mNfR9 {\n  /* remove the radio from the page flow, positioning it on top of the SVG */\n  position: absolute;\n  /* set same dimensions as the SVG to make it touch inclusive*/\n  width: var(--radio-dimensions);\n  height: var(--radio-dimensions);\n  opacity: 0;\n  z-index: 1; /* ensure it is on top of the SVG */\n}\n\n.icon__LIzQj {\n  --border-color: var(--interactive-default, #cbcfd7);\n  width: var(--radio-dimensions);\n  height: var(--radio-dimensions);\n  flex: 0 0 auto;\n  background: var(--surface-color);\n  border: 1px solid var(--border-color);\n  border-radius: var(--roundness-full, 62rem);\n  position: relative;\n}\n\n/* Hide the path in the unchecked (default) state */\n.icon__LIzQj::after {\n  content: \"\";\n  display: none;\n  width: var(--radio-selected-dimensions);\n  height: var(--radio-selected-dimensions);\n  border-radius: var(--roundness-full, 62rem);\n  background: var(--radio-selected);\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  box-sizing: border-box;\n}\n\n.label__OpgYg {\n  --label-color: var(--content-secondary, #4f515c);\n  /* add space between radio and label */\n  margin-left: 0.75rem;\n  color: var(--label-color);\n}\n\n/*\nUsing CSS combinators to apply styles in SVG as we depend on\npseudo classes of input element for Radio's state.\nSo, changing the HTML strcuture may require CSS changes as well.\n*/\n\n/*\nSVG is the adjacent sibling of input element\n*/\n.RadioInput__mNfR9:checked + .icon__LIzQj {\n  --border-color: var(--interactive-selected-default, #3e62fe);\n  box-shadow: 0 0 0 4px var(--radio-surface-color) inset;\n  border: 1px solid transparent;\n  background: var(--border-color);\n  background-origin: border-box;\n}\n\n.RadioInput__mNfR9:checked + .icon__LIzQj::after {\n  display: block;\n}\n\n.RadioInput__mNfR9:hover + .icon__LIzQj {\n  --surface-color: var(--interactive-surface-primary-hover, #f5f7fa);\n}\n\n.RadioInput__mNfR9:checked:hover + .icon__LIzQj {\n  --surface-color: var(--interactive-surface-primary-hover, #f5f7fa);\n  --border-color: var(--interactive-selected-hover, #638aff);\n}\n\n.RadioInput__mNfR9:checked:hover + .icon__LIzQj::after {\n  --radio-selected: var(--interactive-selected-hover, #638aff);\n}\n\n/* fallback styles for \":is()\" */\n.RadioInput__mNfR9:active + .icon__LIzQj,\n.RadioInput__mNfR9:checked:active + .icon__LIzQj {\n  --border-color: var(--interactive-active, #1c3abb);\n  --surface-color: var(--interactive-surface-primary-active, #d6dce7);\n}\n\n:is(.RadioInput__mNfR9, .RadioInput__mNfR9:checked):active + .icon__LIzQj {\n  --border-color: var(--interactive-active, #1c3abb);\n  --surface-color: var(--interactive-surface-primary-active, #d6dce7);\n}\n\n.RadioInput__mNfR9:checked:active + .icon__LIzQj::after {\n  --radio-selected: var(--interactive-selected-active, #1c3abb);\n}\n\n.RadioInput__mNfR9:focus + .icon__LIzQj {\n  /* fallback style for browsers\n    that don't support :focus-visible */\n  outline: var(--focus);\n}\n\n.RadioInput__mNfR9:focus:not(:focus-visible) + .icon__LIzQj {\n  /* remove the focus indicator on mouse-focus for browsers\n    that do support :focus-visible */\n  outline: none;\n}\n\n.RadioInput__mNfR9:focus-visible + .icon__LIzQj {\n  outline: var(--focus);\n}\n\n/* fallback styles for \":is()\" */\n.RadioWrapDisable__ti5ZS,\n.RadioInput__mNfR9:disabled {\n  cursor: not-allowed;\n}\n\n:is(.RadioWrapDisable__ti5ZS, .RadioInput__mNfR9:disabled) {\n  cursor: not-allowed;\n}\n\n.RadioInput__mNfR9:disabled ~ .label__OpgYg {\n  --label-color: var(--content-disabled, #9a9eaa);\n}\n\n/* fallback styles for \":is()\" */\n.RadioInput__mNfR9:disabled + .icon__LIzQj,\n.RadioInput__mNfR9:checked:disabled + .icon__LIzQj,\n.RadioInput__mNfR9:active:disabled + .icon__LIzQj {\n  --surface-color: var(--interactive-surface-disabled, #f1f3f6);\n  --border-color: var(--interactive-disabled, #eaecf0);\n}\n\n:is(.RadioInput__mNfR9, .RadioInput__mNfR9:checked, .RadioInput__mNfR9:active):disabled + .icon__LIzQj {\n  --surface-color: var(--interactive-surface-disabled, #f1f3f6);\n  --border-color: var(--interactive-disabled, #eaecf0);\n}\n\n/* fallback styles for \":is()\" */\n.RadioInput__mNfR9:disabled + .icon__LIzQj::after,\n.RadioInput__mNfR9:checked:disabled + .icon__LIzQj::after,\n.RadioInput__mNfR9:active:disabled + .icon__LIzQj::after {\n  --radio-selected: var(--content-disabled, #9a9eaa);\n}\n\n:is(.RadioInput__mNfR9, .RadioInput__mNfR9:checked, .RadioInput__mNfR9:active):disabled\n  + .icon__LIzQj::after {\n  --radio-selected: var(--content-disabled, #9a9eaa);\n}\n\n.s__XRd3F {\n  font: var(\n    --text-regular-S,\n    500 0.875rem/1.618 Maison Neue,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n}\n\n.m__fab9Z {\n  font: var(\n    --text-regular-M,\n    500 1rem/1.618 Maison Neue,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n}\n\n.l__3aY-T {\n  font: var(\n    --text-regular-L,\n    500 1.125rem/1.618 Maison Neue,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n}\n\n/* handle rtl direction */\n*[dir=\"rtl\"] .label__OpgYg {\n  margin-right: 0.625rem;\n  margin-left: unset;\n}\n";
 styleInject(css_248z);
@@ -50,0 +50,0 @@

dist/index.js

@@ -43,5 +43,5 @@ import React, { forwardRef } from 'react';
 
-var css_248z = ".RadioWrap__b23GS {\n  --surface-color: var(--interactive-surface-primary-default, #ffffff);\n  --focus-appearance: var(--focus-outline, 2px solid);\n  --focus-color: var(--interactive-focus, #86afff);\n  --focus: var(--focus-appearance) var(--focus-color);\n  --radio-selected: var(--interactive-selected-default, #3e62fe);\n  --radio-dimensions: 1.25rem;\n  --radio-selected-dimensions: 0.725rem;\n\n  display: inline-flex;\n  align-items: center;\n  position: relative;\n  box-sizing: border-box;\n}\n\n/* Hide the radio accessibly */\n.RadioInput__mNfR9 {\n  /* remove the radio from the page flow, positioning it on top of the SVG */\n  position: absolute;\n  /* set same dimensions as the SVG to make it touch inclusive*/\n  width: var(--radio-dimensions);\n  height: var(--radio-dimensions);\n  opacity: 0;\n  z-index: 1; /* ensure it is on top of the SVG */\n}\n\n.icon__LIzQj {\n  --border-color: var(--interactive-default, #cbcfd7);\n  width: var(--radio-dimensions);\n  height: var(--radio-dimensions);\n  flex: 0 0 auto;\n  background: var(--surface-color);\n  border: 1px solid var(--border-color);\n  border-radius: var(--roundness-full, 62rem);\n  position: relative;\n}\n\n/* Hide the path in the unchecked (default) state */\n.icon__LIzQj::after {\n  content: \"\";\n  display: none;\n  width: var(--radio-selected-dimensions);\n  height: var(--radio-selected-dimensions);\n  border-radius: var(--roundness-full, 62rem);\n  background: var(--radio-selected);\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  box-sizing: border-box;\n}\n\n.label__OpgYg {\n  --label-color: var(--content-secondary, #4f515c);\n  /* add space between radio and label */\n  margin-left: 0.75rem;\n  color: var(--label-color);\n}\n\n/*\nUsing CSS combinators to apply styles in SVG as we depend on\npseudo classes of input element for Radio's state.\nSo, changing the HTML strcuture may require CSS changes as well.\n*/\n\n/*\nSVG is the adjacent sibling of input element\n*/\n.RadioInput__mNfR9:checked + .icon__LIzQj {\n  --border-color: var(--interactive-selected-default, #3e62fe);\n  box-shadow: 0 0 0 4px white inset;\n  border: 1px solid transparent;\n  background: var(--border-color);\n  background-origin: border-box;\n}\n\n.RadioInput__mNfR9:checked + .icon__LIzQj::after {\n  display: block;\n}\n\n.RadioInput__mNfR9:hover + .icon__LIzQj {\n  --surface-color: var(--interactive-surface-primary-hover, #f5f7fa);\n}\n\n.RadioInput__mNfR9:checked:hover + .icon__LIzQj {\n  --surface-color: var(--interactive-surface-primary-hover, #f5f7fa);\n  --border-color: var(--interactive-selected-hover, #638aff);\n}\n\n.RadioInput__mNfR9:checked:hover + .icon__LIzQj::after {\n  --radio-selected: var(--interactive-selected-hover, #638aff);\n}\n\n/* fallback styles for \":is()\" */\n.RadioInput__mNfR9:active + .icon__LIzQj,\n.RadioInput__mNfR9:checked:active + .icon__LIzQj {\n  --border-color: var(--interactive-active, #1c3abb);\n  --surface-color: var(--interactive-surface-primary-active, #d6dce7);\n}\n\n:is(.RadioInput__mNfR9, .RadioInput__mNfR9:checked):active + .icon__LIzQj {\n  --border-color: var(--interactive-active, #1c3abb);\n  --surface-color: var(--interactive-surface-primary-active, #d6dce7);\n}\n\n.RadioInput__mNfR9:checked:active + .icon__LIzQj::after {\n  --radio-selected: var(--interactive-selected-active, #1c3abb);\n}\n\n.RadioInput__mNfR9:focus + .icon__LIzQj {\n  /* fallback style for browsers\n    that don't support :focus-visible */\n  outline: var(--focus);\n}\n\n.RadioInput__mNfR9:focus:not(:focus-visible) + .icon__LIzQj {\n  /* remove the focus indicator on mouse-focus for browsers\n    that do support :focus-visible */\n  outline: none;\n}\n\n.RadioInput__mNfR9:focus-visible + .icon__LIzQj {\n  outline: var(--focus);\n}\n\n/* fallback styles for \":is()\" */\n.RadioWrapDisable__ti5ZS,\n.RadioInput__mNfR9:disabled {\n  cursor: not-allowed;\n}\n\n:is(.RadioWrapDisable__ti5ZS, .RadioInput__mNfR9:disabled) {\n  cursor: not-allowed;\n}\n\n.RadioInput__mNfR9:disabled ~ .label__OpgYg {\n  --label-color: var(--content-disabled, #9a9eaa);\n}\n\n/* fallback styles for \":is()\" */\n.RadioInput__mNfR9:disabled + .icon__LIzQj,\n.RadioInput__mNfR9:checked:disabled + .icon__LIzQj,\n.RadioInput__mNfR9:active:disabled + .icon__LIzQj {\n  --surface-color: var(--interactive-surface-disabled, #f1f3f6);\n  --border-color: var(--interactive-disabled, #eaecf0);\n}\n\n:is(.RadioInput__mNfR9, .RadioInput__mNfR9:checked, .RadioInput__mNfR9:active):disabled + .icon__LIzQj {\n  --surface-color: var(--interactive-surface-disabled, #f1f3f6);\n  --border-color: var(--interactive-disabled, #eaecf0);\n}\n\n/* fallback styles for \":is()\" */\n.RadioInput__mNfR9:disabled + .icon__LIzQj::after,\n.RadioInput__mNfR9:checked:disabled + .icon__LIzQj::after,\n.RadioInput__mNfR9:active:disabled + .icon__LIzQj::after {\n  --radio-selected: var(--content-disabled, #9a9eaa);\n}\n\n:is(.RadioInput__mNfR9, .RadioInput__mNfR9:checked, .RadioInput__mNfR9:active):disabled\n  + .icon__LIzQj::after {\n  --radio-selected: var(--content-disabled, #9a9eaa);\n}\n\n.s__XRd3F {\n  font: var(\n    --text-regular-S,\n    500 0.875rem/1.618 Maison Neue,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n}\n\n.m__fab9Z {\n  font: var(\n    --text-regular-M,\n    500 1rem/1.618 Maison Neue,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n}\n\n.l__3aY-T {\n  font: var(\n    --text-regular-L,\n    500 1.125rem/1.618 Maison Neue,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n}\n\n/* handle rtl direction */\n*[dir=\"rtl\"] .label__OpgYg {\n  margin-right: 0.625rem;\n  margin-left: unset;\n}\n";
+var css_248z = ".RadioWrap__b23GS {\n  --surface-color: var(--interactive-surface-primary-default, #ffffff);\n  --focus-appearance: var(--focus-outline, 2px solid);\n  --focus-color: var(--interactive-focus, #86afff);\n  --focus: var(--focus-appearance) var(--focus-color);\n  --radio-selected: var(--interactive-selected-default, #3e62fe);\n  --radio-surface-color: var(--static-surface-primary, #ffffff);\n  --radio-dimensions: 1.25rem;\n  --radio-selected-dimensions: 0.725rem;\n\n  display: inline-flex;\n  align-items: center;\n  position: relative;\n  box-sizing: border-box;\n}\n\n/* Hide the radio accessibly */\n.RadioInput__mNfR9 {\n  /* remove the radio from the page flow, positioning it on top of the SVG */\n  position: absolute;\n  /* set same dimensions as the SVG to make it touch inclusive*/\n  width: var(--radio-dimensions);\n  height: var(--radio-dimensions);\n  opacity: 0;\n  z-index: 1; /* ensure it is on top of the SVG */\n}\n\n.icon__LIzQj {\n  --border-color: var(--interactive-default, #cbcfd7);\n  width: var(--radio-dimensions);\n  height: var(--radio-dimensions);\n  flex: 0 0 auto;\n  background: var(--surface-color);\n  border: 1px solid var(--border-color);\n  border-radius: var(--roundness-full, 62rem);\n  position: relative;\n}\n\n/* Hide the path in the unchecked (default) state */\n.icon__LIzQj::after {\n  content: \"\";\n  display: none;\n  width: var(--radio-selected-dimensions);\n  height: var(--radio-selected-dimensions);\n  border-radius: var(--roundness-full, 62rem);\n  background: var(--radio-selected);\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  box-sizing: border-box;\n}\n\n.label__OpgYg {\n  --label-color: var(--content-secondary, #4f515c);\n  /* add space between radio and label */\n  margin-left: 0.75rem;\n  color: var(--label-color);\n}\n\n/*\nUsing CSS combinators to apply styles in SVG as we depend on\npseudo classes of input element for Radio's state.\nSo, changing the HTML strcuture may require CSS changes as well.\n*/\n\n/*\nSVG is the adjacent sibling of input element\n*/\n.RadioInput__mNfR9:checked + .icon__LIzQj {\n  --border-color: var(--interactive-selected-default, #3e62fe);\n  box-shadow: 0 0 0 4px var(--radio-surface-color) inset;\n  border: 1px solid transparent;\n  background: var(--border-color);\n  background-origin: border-box;\n}\n\n.RadioInput__mNfR9:checked + .icon__LIzQj::after {\n  display: block;\n}\n\n.RadioInput__mNfR9:hover + .icon__LIzQj {\n  --surface-color: var(--interactive-surface-primary-hover, #f5f7fa);\n}\n\n.RadioInput__mNfR9:checked:hover + .icon__LIzQj {\n  --surface-color: var(--interactive-surface-primary-hover, #f5f7fa);\n  --border-color: var(--interactive-selected-hover, #638aff);\n}\n\n.RadioInput__mNfR9:checked:hover + .icon__LIzQj::after {\n  --radio-selected: var(--interactive-selected-hover, #638aff);\n}\n\n/* fallback styles for \":is()\" */\n.RadioInput__mNfR9:active + .icon__LIzQj,\n.RadioInput__mNfR9:checked:active + .icon__LIzQj {\n  --border-color: var(--interactive-active, #1c3abb);\n  --surface-color: var(--interactive-surface-primary-active, #d6dce7);\n}\n\n:is(.RadioInput__mNfR9, .RadioInput__mNfR9:checked):active + .icon__LIzQj {\n  --border-color: var(--interactive-active, #1c3abb);\n  --surface-color: var(--interactive-surface-primary-active, #d6dce7);\n}\n\n.RadioInput__mNfR9:checked:active + .icon__LIzQj::after {\n  --radio-selected: var(--interactive-selected-active, #1c3abb);\n}\n\n.RadioInput__mNfR9:focus + .icon__LIzQj {\n  /* fallback style for browsers\n    that don't support :focus-visible */\n  outline: var(--focus);\n}\n\n.RadioInput__mNfR9:focus:not(:focus-visible) + .icon__LIzQj {\n  /* remove the focus indicator on mouse-focus for browsers\n    that do support :focus-visible */\n  outline: none;\n}\n\n.RadioInput__mNfR9:focus-visible + .icon__LIzQj {\n  outline: var(--focus);\n}\n\n/* fallback styles for \":is()\" */\n.RadioWrapDisable__ti5ZS,\n.RadioInput__mNfR9:disabled {\n  cursor: not-allowed;\n}\n\n:is(.RadioWrapDisable__ti5ZS, .RadioInput__mNfR9:disabled) {\n  cursor: not-allowed;\n}\n\n.RadioInput__mNfR9:disabled ~ .label__OpgYg {\n  --label-color: var(--content-disabled, #9a9eaa);\n}\n\n/* fallback styles for \":is()\" */\n.RadioInput__mNfR9:disabled + .icon__LIzQj,\n.RadioInput__mNfR9:checked:disabled + .icon__LIzQj,\n.RadioInput__mNfR9:active:disabled + .icon__LIzQj {\n  --surface-color: var(--interactive-surface-disabled, #f1f3f6);\n  --border-color: var(--interactive-disabled, #eaecf0);\n}\n\n:is(.RadioInput__mNfR9, .RadioInput__mNfR9:checked, .RadioInput__mNfR9:active):disabled + .icon__LIzQj {\n  --surface-color: var(--interactive-surface-disabled, #f1f3f6);\n  --border-color: var(--interactive-disabled, #eaecf0);\n}\n\n/* fallback styles for \":is()\" */\n.RadioInput__mNfR9:disabled + .icon__LIzQj::after,\n.RadioInput__mNfR9:checked:disabled + .icon__LIzQj::after,\n.RadioInput__mNfR9:active:disabled + .icon__LIzQj::after {\n  --radio-selected: var(--content-disabled, #9a9eaa);\n}\n\n:is(.RadioInput__mNfR9, .RadioInput__mNfR9:checked, .RadioInput__mNfR9:active):disabled\n  + .icon__LIzQj::after {\n  --radio-selected: var(--content-disabled, #9a9eaa);\n}\n\n.s__XRd3F {\n  font: var(\n    --text-regular-S,\n    500 0.875rem/1.618 Maison Neue,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n}\n\n.m__fab9Z {\n  font: var(\n    --text-regular-M,\n    500 1rem/1.618 Maison Neue,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n}\n\n.l__3aY-T {\n  font: var(\n    --text-regular-L,\n    500 1.125rem/1.618 Maison Neue,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n}\n\n/* handle rtl direction */\n*[dir=\"rtl\"] .label__OpgYg {\n  margin-right: 0.625rem;\n  margin-left: unset;\n}\n";
 var styles = {"RadioWrap":"RadioWrap__b23GS","RadioInput":"RadioInput__mNfR9","icon":"icon__LIzQj","label":"label__OpgYg","RadioWrapDisable":"RadioWrapDisable__ti5ZS","s":"s__XRd3F","m":"m__fab9Z","l":"l__3aY-T"};
-var stylesheet=".RadioWrap__b23GS {\n  --surface-color: var(--interactive-surface-primary-default, #ffffff);\n  --focus-appearance: var(--focus-outline, 2px solid);\n  --focus-color: var(--interactive-focus, #86afff);\n  --focus: var(--focus-appearance) var(--focus-color);\n  --radio-selected: var(--interactive-selected-default, #3e62fe);\n  --radio-dimensions: 1.25rem;\n  --radio-selected-dimensions: 0.725rem;\n\n  display: inline-flex;\n  align-items: center;\n  position: relative;\n  box-sizing: border-box;\n}\n\n/* Hide the radio accessibly */\n.RadioInput__mNfR9 {\n  /* remove the radio from the page flow, positioning it on top of the SVG */\n  position: absolute;\n  /* set same dimensions as the SVG to make it touch inclusive*/\n  width: var(--radio-dimensions);\n  height: var(--radio-dimensions);\n  opacity: 0;\n  z-index: 1; /* ensure it is on top of the SVG */\n}\n\n.icon__LIzQj {\n  --border-color: var(--interactive-default, #cbcfd7);\n  width: var(--radio-dimensions);\n  height: var(--radio-dimensions);\n  flex: 0 0 auto;\n  background: var(--surface-color);\n  border: 1px solid var(--border-color);\n  border-radius: var(--roundness-full, 62rem);\n  position: relative;\n}\n\n/* Hide the path in the unchecked (default) state */\n.icon__LIzQj::after {\n  content: \"\";\n  display: none;\n  width: var(--radio-selected-dimensions);\n  height: var(--radio-selected-dimensions);\n  border-radius: var(--roundness-full, 62rem);\n  background: var(--radio-selected);\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  box-sizing: border-box;\n}\n\n.label__OpgYg {\n  --label-color: var(--content-secondary, #4f515c);\n  /* add space between radio and label */\n  margin-left: 0.75rem;\n  color: var(--label-color);\n}\n\n/*\nUsing CSS combinators to apply styles in SVG as we depend on\npseudo classes of input element for Radio's state.\nSo, changing the HTML strcuture may require CSS changes as well.\n*/\n\n/*\nSVG is the adjacent sibling of input element\n*/\n.RadioInput__mNfR9:checked + .icon__LIzQj {\n  --border-color: var(--interactive-selected-default, #3e62fe);\n  box-shadow: 0 0 0 4px white inset;\n  border: 1px solid transparent;\n  background: var(--border-color);\n  background-origin: border-box;\n}\n\n.RadioInput__mNfR9:checked + .icon__LIzQj::after {\n  display: block;\n}\n\n.RadioInput__mNfR9:hover + .icon__LIzQj {\n  --surface-color: var(--interactive-surface-primary-hover, #f5f7fa);\n}\n\n.RadioInput__mNfR9:checked:hover + .icon__LIzQj {\n  --surface-color: var(--interactive-surface-primary-hover, #f5f7fa);\n  --border-color: var(--interactive-selected-hover, #638aff);\n}\n\n.RadioInput__mNfR9:checked:hover + .icon__LIzQj::after {\n  --radio-selected: var(--interactive-selected-hover, #638aff);\n}\n\n/* fallback styles for \":is()\" */\n.RadioInput__mNfR9:active + .icon__LIzQj,\n.RadioInput__mNfR9:checked:active + .icon__LIzQj {\n  --border-color: var(--interactive-active, #1c3abb);\n  --surface-color: var(--interactive-surface-primary-active, #d6dce7);\n}\n\n:is(.RadioInput__mNfR9, .RadioInput__mNfR9:checked):active + .icon__LIzQj {\n  --border-color: var(--interactive-active, #1c3abb);\n  --surface-color: var(--interactive-surface-primary-active, #d6dce7);\n}\n\n.RadioInput__mNfR9:checked:active + .icon__LIzQj::after {\n  --radio-selected: var(--interactive-selected-active, #1c3abb);\n}\n\n.RadioInput__mNfR9:focus + .icon__LIzQj {\n  /* fallback style for browsers\n    that don't support :focus-visible */\n  outline: var(--focus);\n}\n\n.RadioInput__mNfR9:focus:not(:focus-visible) + .icon__LIzQj {\n  /* remove the focus indicator on mouse-focus for browsers\n    that do support :focus-visible */\n  outline: none;\n}\n\n.RadioInput__mNfR9:focus-visible + .icon__LIzQj {\n  outline: var(--focus);\n}\n\n/* fallback styles for \":is()\" */\n.RadioWrapDisable__ti5ZS,\n.RadioInput__mNfR9:disabled {\n  cursor: not-allowed;\n}\n\n:is(.RadioWrapDisable__ti5ZS, .RadioInput__mNfR9:disabled) {\n  cursor: not-allowed;\n}\n\n.RadioInput__mNfR9:disabled ~ .label__OpgYg {\n  --label-color: var(--content-disabled, #9a9eaa);\n}\n\n/* fallback styles for \":is()\" */\n.RadioInput__mNfR9:disabled + .icon__LIzQj,\n.RadioInput__mNfR9:checked:disabled + .icon__LIzQj,\n.RadioInput__mNfR9:active:disabled + .icon__LIzQj {\n  --surface-color: var(--interactive-surface-disabled, #f1f3f6);\n  --border-color: var(--interactive-disabled, #eaecf0);\n}\n\n:is(.RadioInput__mNfR9, .RadioInput__mNfR9:checked, .RadioInput__mNfR9:active):disabled + .icon__LIzQj {\n  --surface-color: var(--interactive-surface-disabled, #f1f3f6);\n  --border-color: var(--interactive-disabled, #eaecf0);\n}\n\n/* fallback styles for \":is()\" */\n.RadioInput__mNfR9:disabled + .icon__LIzQj::after,\n.RadioInput__mNfR9:checked:disabled + .icon__LIzQj::after,\n.RadioInput__mNfR9:active:disabled + .icon__LIzQj::after {\n  --radio-selected: var(--content-disabled, #9a9eaa);\n}\n\n:is(.RadioInput__mNfR9, .RadioInput__mNfR9:checked, .RadioInput__mNfR9:active):disabled\n  + .icon__LIzQj::after {\n  --radio-selected: var(--content-disabled, #9a9eaa);\n}\n\n.s__XRd3F {\n  font: var(\n    --text-regular-S,\n    500 0.875rem/1.618 Maison Neue,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n}\n\n.m__fab9Z {\n  font: var(\n    --text-regular-M,\n    500 1rem/1.618 Maison Neue,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n}\n\n.l__3aY-T {\n  font: var(\n    --text-regular-L,\n    500 1.125rem/1.618 Maison Neue,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n}\n\n/* handle rtl direction */\n*[dir=\"rtl\"] .label__OpgYg {\n  margin-right: 0.625rem;\n  margin-left: unset;\n}\n";
+var stylesheet=".RadioWrap__b23GS {\n  --surface-color: var(--interactive-surface-primary-default, #ffffff);\n  --focus-appearance: var(--focus-outline, 2px solid);\n  --focus-color: var(--interactive-focus, #86afff);\n  --focus: var(--focus-appearance) var(--focus-color);\n  --radio-selected: var(--interactive-selected-default, #3e62fe);\n  --radio-surface-color: var(--static-surface-primary, #ffffff);\n  --radio-dimensions: 1.25rem;\n  --radio-selected-dimensions: 0.725rem;\n\n  display: inline-flex;\n  align-items: center;\n  position: relative;\n  box-sizing: border-box;\n}\n\n/* Hide the radio accessibly */\n.RadioInput__mNfR9 {\n  /* remove the radio from the page flow, positioning it on top of the SVG */\n  position: absolute;\n  /* set same dimensions as the SVG to make it touch inclusive*/\n  width: var(--radio-dimensions);\n  height: var(--radio-dimensions);\n  opacity: 0;\n  z-index: 1; /* ensure it is on top of the SVG */\n}\n\n.icon__LIzQj {\n  --border-color: var(--interactive-default, #cbcfd7);\n  width: var(--radio-dimensions);\n  height: var(--radio-dimensions);\n  flex: 0 0 auto;\n  background: var(--surface-color);\n  border: 1px solid var(--border-color);\n  border-radius: var(--roundness-full, 62rem);\n  position: relative;\n}\n\n/* Hide the path in the unchecked (default) state */\n.icon__LIzQj::after {\n  content: \"\";\n  display: none;\n  width: var(--radio-selected-dimensions);\n  height: var(--radio-selected-dimensions);\n  border-radius: var(--roundness-full, 62rem);\n  background: var(--radio-selected);\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  box-sizing: border-box;\n}\n\n.label__OpgYg {\n  --label-color: var(--content-secondary, #4f515c);\n  /* add space between radio and label */\n  margin-left: 0.75rem;\n  color: var(--label-color);\n}\n\n/*\nUsing CSS combinators to apply styles in SVG as we depend on\npseudo classes of input element for Radio's state.\nSo, changing the HTML strcuture may require CSS changes as well.\n*/\n\n/*\nSVG is the adjacent sibling of input element\n*/\n.RadioInput__mNfR9:checked + .icon__LIzQj {\n  --border-color: var(--interactive-selected-default, #3e62fe);\n  box-shadow: 0 0 0 4px var(--radio-surface-color) inset;\n  border: 1px solid transparent;\n  background: var(--border-color);\n  background-origin: border-box;\n}\n\n.RadioInput__mNfR9:checked + .icon__LIzQj::after {\n  display: block;\n}\n\n.RadioInput__mNfR9:hover + .icon__LIzQj {\n  --surface-color: var(--interactive-surface-primary-hover, #f5f7fa);\n}\n\n.RadioInput__mNfR9:checked:hover + .icon__LIzQj {\n  --surface-color: var(--interactive-surface-primary-hover, #f5f7fa);\n  --border-color: var(--interactive-selected-hover, #638aff);\n}\n\n.RadioInput__mNfR9:checked:hover + .icon__LIzQj::after {\n  --radio-selected: var(--interactive-selected-hover, #638aff);\n}\n\n/* fallback styles for \":is()\" */\n.RadioInput__mNfR9:active + .icon__LIzQj,\n.RadioInput__mNfR9:checked:active + .icon__LIzQj {\n  --border-color: var(--interactive-active, #1c3abb);\n  --surface-color: var(--interactive-surface-primary-active, #d6dce7);\n}\n\n:is(.RadioInput__mNfR9, .RadioInput__mNfR9:checked):active + .icon__LIzQj {\n  --border-color: var(--interactive-active, #1c3abb);\n  --surface-color: var(--interactive-surface-primary-active, #d6dce7);\n}\n\n.RadioInput__mNfR9:checked:active + .icon__LIzQj::after {\n  --radio-selected: var(--interactive-selected-active, #1c3abb);\n}\n\n.RadioInput__mNfR9:focus + .icon__LIzQj {\n  /* fallback style for browsers\n    that don't support :focus-visible */\n  outline: var(--focus);\n}\n\n.RadioInput__mNfR9:focus:not(:focus-visible) + .icon__LIzQj {\n  /* remove the focus indicator on mouse-focus for browsers\n    that do support :focus-visible */\n  outline: none;\n}\n\n.RadioInput__mNfR9:focus-visible + .icon__LIzQj {\n  outline: var(--focus);\n}\n\n/* fallback styles for \":is()\" */\n.RadioWrapDisable__ti5ZS,\n.RadioInput__mNfR9:disabled {\n  cursor: not-allowed;\n}\n\n:is(.RadioWrapDisable__ti5ZS, .RadioInput__mNfR9:disabled) {\n  cursor: not-allowed;\n}\n\n.RadioInput__mNfR9:disabled ~ .label__OpgYg {\n  --label-color: var(--content-disabled, #9a9eaa);\n}\n\n/* fallback styles for \":is()\" */\n.RadioInput__mNfR9:disabled + .icon__LIzQj,\n.RadioInput__mNfR9:checked:disabled + .icon__LIzQj,\n.RadioInput__mNfR9:active:disabled + .icon__LIzQj {\n  --surface-color: var(--interactive-surface-disabled, #f1f3f6);\n  --border-color: var(--interactive-disabled, #eaecf0);\n}\n\n:is(.RadioInput__mNfR9, .RadioInput__mNfR9:checked, .RadioInput__mNfR9:active):disabled + .icon__LIzQj {\n  --surface-color: var(--interactive-surface-disabled, #f1f3f6);\n  --border-color: var(--interactive-disabled, #eaecf0);\n}\n\n/* fallback styles for \":is()\" */\n.RadioInput__mNfR9:disabled + .icon__LIzQj::after,\n.RadioInput__mNfR9:checked:disabled + .icon__LIzQj::after,\n.RadioInput__mNfR9:active:disabled + .icon__LIzQj::after {\n  --radio-selected: var(--content-disabled, #9a9eaa);\n}\n\n:is(.RadioInput__mNfR9, .RadioInput__mNfR9:checked, .RadioInput__mNfR9:active):disabled\n  + .icon__LIzQj::after {\n  --radio-selected: var(--content-disabled, #9a9eaa);\n}\n\n.s__XRd3F {\n  font: var(\n    --text-regular-S,\n    500 0.875rem/1.618 Maison Neue,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n}\n\n.m__fab9Z {\n  font: var(\n    --text-regular-M,\n    500 1rem/1.618 Maison Neue,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n}\n\n.l__3aY-T {\n  font: var(\n    --text-regular-L,\n    500 1.125rem/1.618 Maison Neue,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n}\n\n/* handle rtl direction */\n*[dir=\"rtl\"] .label__OpgYg {\n  margin-right: 0.625rem;\n  margin-left: unset;\n}\n";
 styleInject(css_248z);
@@ -48,0 +48,0 @@

package.json

 {
   "name": "@asphalt-react/radio",
-  "version": "2.10.0",
+  "version": "2.11.0",
   "description": "Radio",
@@ -52,3 +52,3 @@ "keywords": [
   "license": "UNLICENSED",
-  "gitHead": "53674cc2fc8e635d6f1fbd0522984e755c948b4a"
+  "gitHead": "ccb568000f6ca32f5a052d9f2a1b9f74aab38bd5"
 }

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

31557

1.12%

No dependency changes