@asphalt-react/radio - npm Package Compare versions

Comparing version 2.12.2 to 2.13.0

dist/index.css

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

dist/index.cjs

@@ -0,1 +1,2 @@
+require("./index.css");
 'use strict';
@@ -6,3 +7,2 @@
 var cn = require('classnames');
-var context = require('@asphalt-react/context');
 
@@ -19,33 +19,3 @@ function _extends() {
 
-function styleInject(css, ref) {
-  if ( ref === void 0 ) ref = {};
-  var insertAt = ref.insertAt;
-
-  if (!css || typeof document === 'undefined') { return; }
-
-  var head = document.head || document.getElementsByTagName('head')[0];
-  var style = document.createElement('style');
-  style.type = 'text/css';
-
-  if (insertAt === 'top') {
-    if (head.firstChild) {
-      head.insertBefore(style, head.firstChild);
-    } else {
-      head.appendChild(style);
-    }
-  } else {
-    head.appendChild(style);
-  }
-
-  if (style.styleSheet) {
-    style.styleSheet.cssText = css;
-  } else {
-    style.appendChild(document.createTextNode(css));
-  }
-}
-
-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@media (hover: hover) and (pointer: fine) {\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\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-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@media (hover: hover) and (pointer: fine) {\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\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);
 
@@ -58,4 +28,4 @@ const IconRadio=()=>{return React.createElement("span",{className:cn(styles.icon)})};IconRadio.iconName="IconRadio";
 
-const Radio=React.forwardRef(({label="",size="m",...props},ref)=>{context.sendStyles(stylesheet);const{style,className,...rest}=props;const radioWrap=cn(styles.RadioWrap,styles[sizeClass(size)],{[styles.RadioWrapDisable]:rest.disabled});const radioInputClass=cn(styles.RadioInput);const labelClass=cn(styles.label);const Label=label?"label":"span";return React.createElement(Label,{className:radioWrap,"data-testid":"radio-label"},React.createElement("input",_extends({},rest,{className:radioInputClass,ref:ref,type:"radio"})),React.createElement(IconRadio,null),label&&React.createElement("span",{className:labelClass,"data-testid":"radio-label-text"},label))});Radio.displayName="Radio";Radio.propTypes={label:PropTypes.string,size:PropTypes.oneOf(["s","m","l"])};Radio.defaultProps={size:"m",label:""};
+const Radio=React.forwardRef(({label="",size="m",...props},ref)=>{const{style,className,...rest}=props;const radioWrap=cn(styles.RadioWrap,styles[sizeClass(size)],{[styles.RadioWrapDisable]:rest.disabled});const radioInputClass=cn(styles.RadioInput);const labelClass=cn(styles.label);const Label=label?"label":"span";return React.createElement(Label,{className:radioWrap,"data-testid":"radio-label"},React.createElement("input",_extends({},rest,{className:radioInputClass,ref:ref,type:"radio"})),React.createElement(IconRadio,null),label&&React.createElement("span",{className:labelClass,"data-testid":"radio-label-text"},label))});Radio.displayName="Radio";Radio.propTypes={label:PropTypes.string,size:PropTypes.oneOf(["s","m","l"])};Radio.defaultProps={size:"m",label:""};
 
 exports.Radio = Radio;

dist/index.js

@@ -0,5 +1,5 @@
+import "./index.css";
 import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import cn from 'classnames';
-import { sendStyles } from '@asphalt-react/context';
 
@@ -16,33 +16,3 @@ function _extends() {
 
-function styleInject(css, ref) {
-  if ( ref === void 0 ) ref = {};
-  var insertAt = ref.insertAt;
-
-  if (!css || typeof document === 'undefined') { return; }
-
-  var head = document.head || document.getElementsByTagName('head')[0];
-  var style = document.createElement('style');
-  style.type = 'text/css';
-
-  if (insertAt === 'top') {
-    if (head.firstChild) {
-      head.insertBefore(style, head.firstChild);
-    } else {
-      head.appendChild(style);
-    }
-  } else {
-    head.appendChild(style);
-  }
-
-  if (style.styleSheet) {
-    style.styleSheet.cssText = css;
-  } else {
-    style.appendChild(document.createTextNode(css));
-  }
-}
-
-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@media (hover: hover) and (pointer: fine) {\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\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-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@media (hover: hover) and (pointer: fine) {\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\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);
 
@@ -55,4 +25,4 @@ const IconRadio=()=>{return React.createElement("span",{className:cn(styles.icon)})};IconRadio.iconName="IconRadio";
 
-const Radio=forwardRef(({label="",size="m",...props},ref)=>{sendStyles(stylesheet);const{style,className,...rest}=props;const radioWrap=cn(styles.RadioWrap,styles[sizeClass(size)],{[styles.RadioWrapDisable]:rest.disabled});const radioInputClass=cn(styles.RadioInput);const labelClass=cn(styles.label);const Label=label?"label":"span";return React.createElement(Label,{className:radioWrap,"data-testid":"radio-label"},React.createElement("input",_extends({},rest,{className:radioInputClass,ref:ref,type:"radio"})),React.createElement(IconRadio,null),label&&React.createElement("span",{className:labelClass,"data-testid":"radio-label-text"},label))});Radio.displayName="Radio";Radio.propTypes={label:PropTypes.string,size:PropTypes.oneOf(["s","m","l"])};Radio.defaultProps={size:"m",label:""};
+const Radio=forwardRef(({label="",size="m",...props},ref)=>{const{style,className,...rest}=props;const radioWrap=cn(styles.RadioWrap,styles[sizeClass(size)],{[styles.RadioWrapDisable]:rest.disabled});const radioInputClass=cn(styles.RadioInput);const labelClass=cn(styles.label);const Label=label?"label":"span";return React.createElement(Label,{className:radioWrap,"data-testid":"radio-label"},React.createElement("input",_extends({},rest,{className:radioInputClass,ref:ref,type:"radio"})),React.createElement(IconRadio,null),label&&React.createElement("span",{className:labelClass,"data-testid":"radio-label-text"},label))});Radio.displayName="Radio";Radio.propTypes={label:PropTypes.string,size:PropTypes.oneOf(["s","m","l"])};Radio.defaultProps={size:"m",label:""};
 
 export { Radio };

package.json

 {
   "name": "@asphalt-react/radio",
-  "version": "2.12.2",
+  "version": "2.13.0",
   "description": "Radio",
@@ -41,3 +41,3 @@ "keywords": [
   "devDependencies": {
-    "@asphalt-react/build": "^2.12.0",
+    "@asphalt-react/build": "^2.13.0",
     "@testing-library/react": "^11.2.7",
@@ -47,4 +47,3 @@ "@testing-library/user-event": "~13.0.16"
   "dependencies": {
-    "@asphalt-react/context": "^2.12.0",
-    "@asphalt-react/helper": "^2.12.0",
+    "@asphalt-react/helper": "^2.13.0",
     "classnames": "^2.5.1",
@@ -54,3 +53,6 @@ "prop-types": "^15.8.1"
   "license": "UNLICENSED",
-  "gitHead": "37abc774b63d4cf0a1d699371d887524b1819a4d"
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "gitHead": "6238a81dad8246006beb0bea5148a283f34b22ed"
 }

New alerts

Explicitly Unlicensed Item

License

Something was found which is explicitly marked as unlicensed.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

Explicitly Unlicensed Item

License

Something was found which is explicitly marked as unlicensed.

Found 1 instance in 1 package

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

Dependency count

4

-20%

Number of package files

6

20%

Lines of code

234

21.88%

Number of low supply chain risk alerts

1

-88.89%

Worsened metrics

Total package byte prevSize

12729

-60.11%

Number of medium supply chain risk alerts

1

Infinity%

Dependency changes

• - Removed

  @asphalt-react/context@^2.12.0

• - Removed

  @asphalt-react/context@2.13.0
  (transitive)

• Updated

  @asphalt-react/helper@^2.13.0