@react-spectrum/radio 3.0.0-nightly-641446f65-240905

package/dist/vars.cb27d9e2.css

@@ -0,0 +1,370 @@
+.V2HKpq_i18nFontFamily {
+  font-synthesis: weight;
+  font-family: adobe-clean, Source Sans Pro, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Ubuntu, Trebuchet MS, Lucida Grande, sans-serif;
+}
+
+.V2HKpq_i18nFontFamily:lang(ar) {
+  font-family: myriad-arabic, adobe-clean, Source Sans Pro, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Ubuntu, Trebuchet MS, Lucida Grande, sans-serif;
+}
+
+.V2HKpq_i18nFontFamily:lang(he) {
+  font-family: myriad-hebrew, adobe-clean, Source Sans Pro, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Ubuntu, Trebuchet MS, Lucida Grande, sans-serif;
+}
+
+.V2HKpq_i18nFontFamily:lang(zh) {
+  font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Heiti TC Light, sans-serif;
+}
+
+.V2HKpq_i18nFontFamily:lang(zh-Hans) {
+  font-family: adobe-clean-han-simplified-c, source-han-simplified-c, SimSun, Heiti SC Light, sans-serif;
+}
+
+.V2HKpq_i18nFontFamily:lang(zh-Hant) {
+  font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Microsoft JhengHei UI, Microsoft JhengHei, Heiti TC Light, sans-serif;
+}
+
+.V2HKpq_i18nFontFamily:lang(zh-SG), .V2HKpq_i18nFontFamily:lang(zh-CN) {
+  font-family: adobe-clean-han-simplified-c, source-han-simplified-c, SimSun, Heiti SC Light, sans-serif;
+}
+
+.V2HKpq_i18nFontFamily:lang(ko) {
+  font-family: adobe-clean-han-korean, source-han-korean, Malgun Gothic, Apple Gothic, sans-serif;
+}
+
+.V2HKpq_i18nFontFamily:lang(ja) {
+  font-family: adobe-clean-han-japanese, Hiragino Kaku Gothic ProN, ヒラギノ角ゴ ProN W3, Osaka, YuGothic, Yu Gothic, メイリオ, Meiryo, ＭＳ Ｐゴシック, MS PGothic, sans-serif;
+}
+
+.V2HKpq_spectrum-FocusRing-ring {
+  --spectrum-focus-ring-border-radius: var(--spectrum-textfield-border-radius, var(--spectrum-alias-border-radius-regular));
+  --spectrum-focus-ring-gap: var(--spectrum-alias-input-focusring-gap);
+  --spectrum-focus-ring-size: var(--spectrum-alias-input-focusring-size);
+  --spectrum-focus-ring-border-size: 0px;
+  --spectrum-focus-ring-color: var(--spectrum-high-contrast-focus-ring-color, var(--spectrum-alias-focus-ring-color, var(--spectrum-alias-focus-color)));
+}
+
+.V2HKpq_spectrum-FocusRing-ring:after {
+  border-radius: calc(var(--spectrum-focus-ring-border-radius)  + var(--spectrum-focus-ring-gap));
+  content: "";
+  margin: calc(-1 * var(--spectrum-focus-ring-border-size));
+  pointer-events: none;
+  transition: box-shadow var(--spectrum-global-animation-duration-100, .13s) ease-out, margin var(--spectrum-global-animation-duration-100, .13s) ease-out;
+  display: block;
+  position: absolute;
+  inset: 0;
+}
+
+.V2HKpq_spectrum-FocusRing.V2HKpq_focus-ring:after {
+  margin: calc(var(--spectrum-focus-ring-gap) * -1 - var(--spectrum-focus-ring-border-size));
+  box-shadow: 0 0 0 var(--spectrum-focus-ring-size) var(--spectrum-focus-ring-color);
+}
+
+.V2HKpq_spectrum-FocusRing--quiet:after {
+  border-radius: 0;
+}
+
+.V2HKpq_spectrum-FocusRing--quiet.V2HKpq_focus-ring:after {
+  margin: 0 0 calc(var(--spectrum-focus-ring-gap) * -1 - var(--spectrum-focus-ring-border-size)) 0;
+  box-shadow: 0 var(--spectrum-focus-ring-size) 0 var(--spectrum-focus-ring-color);
+}
+
+@media (forced-colors: active) {
+  .V2HKpq_spectrum-FocusRing, .V2HKpq_spectrum-FocusRing-ring, .V2HKpq_spectrum-FocusRing--quiet {
+    --spectrum-high-contrast-focus-ring-color: Highlight;
+  }
+
+  :is(.V2HKpq_spectrum-FocusRing, .V2HKpq_spectrum-FocusRing-ring, .V2HKpq_spectrum-FocusRing--quiet):after {
+    forced-color-adjust: none;
+  }
+}
+
+.V2HKpq_spectrum-Radio {
+  --spectrum-radio-radius: calc(var(--spectrum-radio-circle-diameter, var(--spectrum-global-dimension-size-175)) / 2);
+  --spectrum-radio-border-width-checked: calc(calc(var(--spectrum-radio-circle-diameter, var(--spectrum-global-dimension-size-175)) / 2)  - calc(var(--spectrum-radio-circle-dot-size, var(--spectrum-global-dimension-static-size-50)) / 2));
+  --spectrum-radio-labelbelow-label-margin: var(--spectrum-global-dimension-size-40) 0 0 0;
+  --spectrum-radio-labelbelow-height: auto;
+  --spectrum-radio-label-margin-top: var(--spectrum-global-dimension-size-65);
+  --spectrum-radio-label-line-height: 1.49;
+  --spectrum-radio-emphasized-circle-border-color: var(--spectrum-alias-toggle-color-default);
+  --spectrum-radio-emphasized-circle-border-color-hover: var(--spectrum-alias-toggle-color-hover);
+  --spectrum-radio-emphasized-circle-border-color-key-focus: var(--spectrum-alias-toggle-color-key-focus);
+  --spectrum-radio-quiet-circle-border-color-selected: var(--spectrum-alias-toggle-color-selected);
+  --spectrum-radio-quiet-circle-border-color-selected-hover: var(--spectrum-alias-toggle-color-selected-hover);
+  --spectrum-radio-quiet-circle-border-color-selected-key-focus: var(--spectrum-alias-toggle-color-selected-key-focus);
+  --spectrum-radio-emphasized-circle-border-color-selected: var(--spectrum-accent-color-900);
+  --spectrum-radio-emphasized-circle-border-color-selected-hover: var(--spectrum-accent-color-1000);
+  --spectrum-radio-emphasized-circle-border-color-selected-key-focus: var(--spectrum-accent-color-1000);
+  --spectrum-radio-emphasized-circle-border-color-selected-down: var(--spectrum-accent-color-1100);
+  min-block-size: var(--spectrum-radio-height, var(--spectrum-global-dimension-size-400));
+  vertical-align: top;
+  isolation: isolate;
+  align-items: flex-start;
+  max-inline-size: 100%;
+  margin-inline-end: calc(var(--spectrum-radio-cursor-hit-x, var(--spectrum-global-dimension-size-100)) * 2);
+  display: inline-flex;
+  position: relative;
+}
+
+.V2HKpq_spectrum-Radio-input {
+  box-sizing: border-box;
+  inline-size: calc(100% + var(--spectrum-radio-cursor-hit-x, var(--spectrum-global-dimension-size-100)) * 2);
+  opacity: .0001;
+  z-index: 1;
+  cursor: default;
+  block-size: 100%;
+  margin: 0;
+  padding: 0;
+  font-family: inherit;
+  font-size: 100%;
+  line-height: 1.15;
+  position: absolute;
+  top: 0;
+  overflow: visible;
+}
+
+.V2HKpq_spectrum-Radio-input:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
+  left: calc(var(--spectrum-radio-cursor-hit-x, var(--spectrum-global-dimension-size-100)) * -1);
+}
+
+.V2HKpq_spectrum-Radio-input:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
+  left: calc(var(--spectrum-radio-cursor-hit-x, var(--spectrum-global-dimension-size-100)) * -1);
+}
+
+.V2HKpq_spectrum-Radio-input:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
+  right: calc(var(--spectrum-radio-cursor-hit-x, var(--spectrum-global-dimension-size-100)) * -1);
+}
+
+.V2HKpq_spectrum-Radio-input:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
+  right: calc(var(--spectrum-radio-cursor-hit-x, var(--spectrum-global-dimension-size-100)) * -1);
+}
+
+.V2HKpq_spectrum-Radio-input:disabled {
+  cursor: default;
+}
+
+.V2HKpq_spectrum-Radio-input:checked + .V2HKpq_spectrum-Radio-button:before {
+  border-width: var(--spectrum-radio-border-width-checked);
+}
+
+.V2HKpq_spectrum-Radio-input.V2HKpq_focus-ring + .V2HKpq_spectrum-Radio-button:after {
+  margin: calc(var(--spectrum-alias-focus-ring-gap, var(--spectrum-global-dimension-static-size-25)) * -1);
+}
+
+.V2HKpq_spectrum-Radio-label {
+  text-align: start;
+  font-size: var(--spectrum-radio-text-size, var(--spectrum-alias-font-size-default));
+  line-height: var(--spectrum-radio-label-line-height);
+  transition: color var(--spectrum-global-animation-duration-100, .13s) ease-in-out;
+  margin-block-start: var(--spectrum-radio-label-margin-top);
+  margin-inline-start: var(--spectrum-radio-text-gap, var(--spectrum-global-dimension-size-125));
+}
+
+.V2HKpq_spectrum-Radio-button {
+  box-sizing: border-box;
+  inline-size: var(--spectrum-radio-circle-diameter, var(--spectrum-global-dimension-size-175));
+  block-size: var(--spectrum-radio-circle-diameter, var(--spectrum-global-dimension-size-175));
+  margin: calc((var(--spectrum-radio-height, var(--spectrum-global-dimension-size-400))  - var(--spectrum-radio-circle-diameter, var(--spectrum-global-dimension-size-175))) / 2) 0;
+  flex-grow: 0;
+  flex-shrink: 0;
+  position: relative;
+}
+
+.V2HKpq_spectrum-Radio-button:before {
+  z-index: 0;
+  content: "";
+  box-sizing: border-box;
+  width: var(--spectrum-radio-circle-diameter, var(--spectrum-global-dimension-size-175));
+  height: var(--spectrum-radio-circle-diameter, var(--spectrum-global-dimension-size-175));
+  border-radius: var(--spectrum-radio-radius);
+  border-width: var(--spectrum-radio-circle-border-size, var(--spectrum-alias-border-size-thick));
+  transition: border var(--spectrum-global-animation-duration-100, .13s) ease-in-out, box-shadow var(--spectrum-global-animation-duration-100, .13s) ease-in-out;
+  border-style: solid;
+  display: block;
+  position: absolute;
+}
+
+.V2HKpq_spectrum-Radio-button:after {
+  content: "";
+  margin: var(--spectrum-alias-focus-ring-gap, var(--spectrum-global-dimension-static-size-25));
+  transition: box-shadow var(--spectrum-global-animation-duration-100, .13s) ease-out, margin var(--spectrum-global-animation-duration-100, .13s) ease-out;
+  border-radius: 100%;
+  display: block;
+  position: absolute;
+  inset: 0;
+  transform: translateX(0);
+}
+
+.V2HKpq_spectrum-Radio--labelBelow {
+  block-size: var(--spectrum-radio-labelbelow-height);
+  flex-direction: column;
+  align-items: center;
+  display: inline-flex;
+}
+
+.V2HKpq_spectrum-Radio--labelBelow .V2HKpq_spectrum-Radio-button {
+  flex-shrink: 0;
+  margin: 0;
+}
+
+.V2HKpq_spectrum-Radio--labelBelow .V2HKpq_spectrum-Radio-label {
+  margin: var(--spectrum-radio-labelbelow-label-margin);
+}
+
+.V2HKpq_spectrum-Radio .V2HKpq_spectrum-Radio-input:checked + .V2HKpq_spectrum-Radio-button:before {
+  border-color: var(--spectrum-radio-emphasized-circle-border-color-selected, var(--spectrum-global-color-blue-500));
+}
+
+.V2HKpq_spectrum-Radio-label {
+  color: var(--spectrum-radio-emphasized-text-color, var(--spectrum-alias-text-color));
+}
+
+.V2HKpq_spectrum-Radio-button:before {
+  background-color: var(--spectrum-radio-emphasized-circle-background-color, var(--spectrum-global-color-gray-75));
+  border-color: var(--spectrum-radio-emphasized-circle-border-color, var(--spectrum-global-color-gray-600));
+}
+
+.V2HKpq_spectrum-Radio.V2HKpq_is-hovered .V2HKpq_spectrum-Radio-button:before {
+  border-color: var(--spectrum-radio-emphasized-circle-border-color-hover, var(--spectrum-global-color-gray-700));
+  box-shadow: none;
+}
+
+.V2HKpq_spectrum-Radio.V2HKpq_is-hovered .V2HKpq_spectrum-Radio-input:checked + .V2HKpq_spectrum-Radio-button:before {
+  border-color: var(--spectrum-radio-emphasized-circle-border-color-selected-hover, var(--spectrum-global-color-blue-600));
+}
+
+.V2HKpq_spectrum-Radio.V2HKpq_is-hovered .V2HKpq_spectrum-Radio-label {
+  color: var(--spectrum-radio-emphasized-text-color-hover, var(--spectrum-alias-text-color-hover));
+}
+
+.V2HKpq_spectrum-Radio:active .V2HKpq_spectrum-Radio-button:before {
+  border-color: var(--spectrum-radio-emphasized-circle-border-color-down, var(--spectrum-global-color-gray-800));
+}
+
+.V2HKpq_spectrum-Radio:active .V2HKpq_spectrum-Radio-input:checked + .V2HKpq_spectrum-Radio-button:before {
+  border-color: var(--spectrum-radio-emphasized-circle-border-color-selected-down, var(--spectrum-global-color-blue-700));
+}
+
+.V2HKpq_spectrum-Radio:active .V2HKpq_spectrum-Radio-label {
+  color: var(--spectrum-radio-emphasized-text-color-down, var(--spectrum-alias-text-color-down));
+}
+
+.V2HKpq_spectrum-Radio .V2HKpq_spectrum-Radio-input.V2HKpq_focus-ring:checked + .V2HKpq_spectrum-Radio-button:before, .V2HKpq_spectrum-Radio.V2HKpq_is-hovered .V2HKpq_spectrum-Radio-input.V2HKpq_focus-ring:checked + .V2HKpq_spectrum-Radio-button:before {
+  border-color: var(--spectrum-radio-emphasized-circle-border-color-selected-hover, var(--spectrum-global-color-blue-600));
+}
+
+.V2HKpq_spectrum-Radio--quiet .V2HKpq_spectrum-Radio-input:checked + .V2HKpq_spectrum-Radio-button:before {
+  border-color: var(--spectrum-radio-quiet-circle-border-color-selected, var(--spectrum-global-color-gray-700));
+}
+
+.V2HKpq_spectrum-Radio--quiet.V2HKpq_is-hovered .V2HKpq_spectrum-Radio-input:checked + .V2HKpq_spectrum-Radio-button:before {
+  border-color: var(--spectrum-radio-quiet-circle-border-color-selected-hover, var(--spectrum-global-color-gray-800));
+}
+
+.V2HKpq_spectrum-Radio--quiet:active .V2HKpq_spectrum-Radio-input:checked + .V2HKpq_spectrum-Radio-button:before {
+  border-color: var(--spectrum-radio-quiet-circle-border-color-selected-down, var(--spectrum-global-color-gray-900));
+}
+
+.V2HKpq_spectrum-Radio--quiet .V2HKpq_spectrum-Radio-input.V2HKpq_focus-ring:checked + .V2HKpq_spectrum-Radio-button:before, .V2HKpq_spectrum-Radio--quiet.V2HKpq_is-hovered .V2HKpq_spectrum-Radio-input.V2HKpq_focus-ring:checked + .V2HKpq_spectrum-Radio-button:before {
+  border-color: var(--spectrum-radio-quiet-circle-border-color-selected-key-focus, var(--spectrum-global-color-gray-800));
+}
+
+:is(.V2HKpq_spectrum-Radio, .V2HKpq_spectrum-Radio--quiet).V2HKpq_is-invalid .V2HKpq_spectrum-Radio-button:before, :is(.V2HKpq_spectrum-Radio, .V2HKpq_spectrum-Radio--quiet).V2HKpq_is-invalid .V2HKpq_spectrum-Radio-input:checked + .V2HKpq_spectrum-Radio-button:before {
+  border-color: var(--spectrum-radio-emphasized-circle-border-color-error, var(--spectrum-global-color-red-500));
+}
+
+:is(.V2HKpq_spectrum-Radio, .V2HKpq_spectrum-Radio--quiet).V2HKpq_is-invalid .V2HKpq_spectrum-Radio-label {
+  color: var(--spectrum-radio-emphasized-circle-border-color-error, var(--spectrum-global-color-red-500));
+}
+
+:is(.V2HKpq_spectrum-Radio, .V2HKpq_spectrum-Radio--quiet).V2HKpq_is-invalid.V2HKpq_is-hovered .V2HKpq_spectrum-Radio-input + .V2HKpq_spectrum-Radio-button:before {
+  border-color: var(--spectrum-radio-emphasized-circle-border-color-error-hover, var(--spectrum-global-color-red-600));
+}
+
+:is(.V2HKpq_spectrum-Radio, .V2HKpq_spectrum-Radio--quiet).V2HKpq_is-invalid.V2HKpq_is-hovered .V2HKpq_spectrum-Radio-label {
+  color: var(--spectrum-radio-emphasized-circle-border-color-error-hover, var(--spectrum-global-color-red-600));
+}
+
+:is(.V2HKpq_spectrum-Radio, .V2HKpq_spectrum-Radio--quiet).V2HKpq_is-invalid:active .V2HKpq_spectrum-Radio-input + .V2HKpq_spectrum-Radio-button:before {
+  border-color: var(--spectrum-radio-emphasized-circle-border-color-error-down, var(--spectrum-global-color-red-700));
+}
+
+:is(.V2HKpq_spectrum-Radio, .V2HKpq_spectrum-Radio--quiet).V2HKpq_is-invalid:active .V2HKpq_spectrum-Radio-label {
+  color: var(--spectrum-radio-emphasized-circle-border-color-error-down, var(--spectrum-global-color-red-700));
+}
+
+:is(.V2HKpq_spectrum-Radio, .V2HKpq_spectrum-Radio--quiet).V2HKpq_is-invalid .V2HKpq_spectrum-Radio-input.V2HKpq_focus-ring:not(:checked) + .V2HKpq_spectrum-Radio-button:before {
+  border-color: var(--spectrum-radio-circle-border-color-error-key-focus, var(--spectrum-global-color-red-600));
+}
+
+:is(.V2HKpq_spectrum-Radio, .V2HKpq_spectrum-Radio--quiet).V2HKpq_is-invalid .V2HKpq_spectrum-Radio-input.V2HKpq_focus-ring:checked + .V2HKpq_spectrum-Radio-button:before {
+  border-color: var(--spectrum-radio-circle-border-color-error-selected-key-focus, var(--spectrum-global-color-red-600));
+}
+
+:is(.V2HKpq_spectrum-Radio, .V2HKpq_spectrum-Radio--quiet).V2HKpq_is-invalid.V2HKpq_is-hovered .V2HKpq_spectrum-Radio-input.V2HKpq_focus-ring:not(:checked) + .V2HKpq_spectrum-Radio-button:before {
+  border-color: var(--spectrum-radio-circle-border-color-error-key-focus, var(--spectrum-global-color-red-600));
+}
+
+:is(.V2HKpq_spectrum-Radio, .V2HKpq_spectrum-Radio--quiet).V2HKpq_is-invalid.V2HKpq_is-hovered .V2HKpq_spectrum-Radio-input.V2HKpq_focus-ring:checked + .V2HKpq_spectrum-Radio-button:before {
+  border-color: var(--spectrum-radio-circle-border-color-error-selected-key-focus, var(--spectrum-global-color-red-600));
+}
+
+.V2HKpq_spectrum-Radio-input:disabled + .V2HKpq_spectrum-Radio-button:before {
+  border-color: var(--spectrum-radio-emphasized-circle-border-color-disabled, var(--spectrum-global-color-gray-400)) !important;
+}
+
+.V2HKpq_spectrum-Radio-input:disabled ~ .V2HKpq_spectrum-Radio-label {
+  color: var(--spectrum-radio-emphasized-text-color-disabled, var(--spectrum-alias-text-color-disabled)) !important;
+}
+
+:is(.V2HKpq_spectrum-Radio, .V2HKpq_spectrum-Radio--quiet) .V2HKpq_spectrum-Radio-input.V2HKpq_focus-ring:not(:checked) + .V2HKpq_spectrum-Radio-button:before {
+  border-color: var(--spectrum-radio-circle-border-color-key-focus, var(--spectrum-global-color-gray-700));
+}
+
+:is(.V2HKpq_spectrum-Radio, .V2HKpq_spectrum-Radio--quiet) .V2HKpq_spectrum-Radio-input.V2HKpq_focus-ring + .V2HKpq_spectrum-Radio-button:after {
+  box-shadow: 0 0 0 var(--spectrum-radio-focus-ring-size-key-focus, var(--spectrum-alias-focus-ring-size)) var(--spectrum-radio-focus-ring-color-key-focus, var(--spectrum-alias-focus-ring-color));
+}
+
+:is(.V2HKpq_spectrum-Radio, .V2HKpq_spectrum-Radio--quiet).V2HKpq_is-hovered .V2HKpq_spectrum-Radio-input.V2HKpq_focus-ring:not(:checked) + .V2HKpq_spectrum-Radio-button:before {
+  border-color: var(--spectrum-radio-circle-border-color-key-focus, var(--spectrum-global-color-gray-700));
+}
+
+:is(.V2HKpq_spectrum-Radio, .V2HKpq_spectrum-Radio--quiet).V2HKpq_is-hovered .V2HKpq_spectrum-Radio-input.V2HKpq_focus-ring + .V2HKpq_spectrum-Radio-button:after {
+  box-shadow: 0 0 0 var(--spectrum-radio-focus-ring-size-key-focus, var(--spectrum-alias-focus-ring-size)) var(--spectrum-radio-focus-ring-color-key-focus, var(--spectrum-alias-focus-ring-color));
+}
+
+@media (forced-colors: active) {
+  .V2HKpq_spectrum-Radio {
+    forced-color-adjust: none;
+    --spectrum-radio-circle-border-color-error-key-focus: ButtonText;
+    --spectrum-radio-circle-border-color-error-selected-key-focus: Highlight;
+    --spectrum-radio-circle-border-color-key-focus: Highlight;
+    --spectrum-radio-emphasized-circle-background-color: ButtonFace;
+    --spectrum-radio-emphasized-circle-border-color-disabled: GrayText;
+    --spectrum-radio-emphasized-circle-border-color-down: Highlight;
+    --spectrum-radio-emphasized-circle-border-color-error: ButtonText;
+    --spectrum-radio-emphasized-circle-border-color-error-down: Highlight;
+    --spectrum-radio-emphasized-circle-border-color-error-hover: Highlight;
+    --spectrum-radio-emphasized-circle-border-color-hover: Highlight;
+    --spectrum-radio-emphasized-circle-border-color-selected-down: Highlight;
+    --spectrum-radio-emphasized-circle-border-color-selected-hover: Highlight;
+    --spectrum-radio-emphasized-circle-border-color-selected-key-focus: Highlight;
+    --spectrum-radio-emphasized-circle-border-color-selected: Highlight;
+    --spectrum-radio-emphasized-circle-border-color: ButtonText;
+    --spectrum-radio-emphasized-text-color-disabled: GrayText;
+    --spectrum-radio-emphasized-text-color-down: CanvasText;
+    --spectrum-radio-emphasized-text-color-hover: CanvasText;
+    --spectrum-radio-emphasized-text-color: CanvasText;
+    --spectrum-radio-focus-ring-color-key-focus: ButtonText;
+    --spectrum-radio-quiet-circle-border-color-selected: Highlight;
+    --spectrum-radio-quiet-circle-border-color-selected-down: Highlight;
+    --spectrum-radio-quiet-circle-border-color-selected-hover: Highlight;
+    --spectrum-radio-quiet-circle-border-color-selected-key-focus: Highlight;
+    --spectrum-radio-focus-ring-gap-key-focus: var(--spectrum-global-dimension-static-size-25, 2px);
+    --spectrum-radio-focus-ring-size: var(--spectrum-global-dimension-static-size-40, 3px);
+  }
+
+  .V2HKpq_spectrum-Radio.V2HKpq_is-invalid.V2HKpq_is-hovered .V2HKpq_spectrum-Radio-label, .V2HKpq_spectrum-Radio.V2HKpq_is-invalid:active .V2HKpq_spectrum-Radio-label {
+    color: var(--spectrum-radio-emphasized-circle-border-color-error, var(--spectrum-global-color-red-500));
+  }
+}
+/*# sourceMappingURL=vars.cb27d9e2.css.map */

package/dist/vars.cb27d9e2.css.map

@@ -0,0 +1 @@
+{"mappings":"AA4DA;;;;;AAIE;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAQA;;;;AAIA;;;;AAKF;;;;;;;;AAOE;;;;;;;;;;;AAqBE;;;;;AAQF;;;;AAKE;;;;;AAOJ;EACE;;;;EAIE;;;;;AAMJ;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4CA;;;;;;;;;;;;;;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AA8BE;;;;AAKE;;;;AAOE;;;;AAON;;;;;;;;;AAUA;;;;;;;;;;AAWE;;;;;;;;;;;;;;AAkBA;;;;;;;;;;;AAiBF;;;;;;;AAME;;;;;AAMA;;;;AAkBE;;;;AAMJ;;;;AAKE;;;;;AASI;;;;;AAOA;;;;AAKF;;;;AAOE;;;;AAMA;;;;AAKF;;;;AAOE;;;;AASF;;;;AAME;;;;AAOA;;;;AAQA;;;;AAWA;;;;AAIF;;;;AAME;;;;AAIF;;;;AAME;;;;AAIF;;;;AAOE;;;;AAKA;;;;AALA;;;;AAKA;;;;AASF;;;;AAKF;;;;AAcI;;;;AAKA;;;;AALA;;;;AAKA;;;;AAON;EACE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA6BI","sources":["packages/@adobe/spectrum-css-temp/components/radio/vars.css"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n@import './index.css';\n@import './skin.css';\n"],"names":[],"version":3,"file":"vars.cb27d9e2.css.map"}

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "@react-spectrum/radio",
+  "version": "3.0.0-nightly-641446f65-240905",
+  "description": "Spectrum UI components in React",
+  "license": "Apache-2.0",
+  "main": "dist/main.js",
+  "module": "dist/module.js",
+  "exports": {
+    "types": "./dist/types.d.ts",
+    "import": "./dist/import.mjs",
+    "require": "./dist/main.js"
+  },
+  "types": "dist/types.d.ts",
+  "source": "src/index.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "sideEffects": [
+    "*.css"
+  ],
+  "targets": {
+    "main": {
+      "includeNodeModules": [
+        "@adobe/spectrum-css-temp"
+      ]
+    },
+    "module": {
+      "includeNodeModules": [
+        "@adobe/spectrum-css-temp"
+      ]
+    }
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/adobe/react-spectrum"
+  },
+  "dependencies": {
+    "@react-aria/focus": "^3.0.0-nightly-641446f65-240905",
+    "@react-aria/interactions": "^3.0.0-nightly-641446f65-240905",
+    "@react-aria/radio": "^3.0.0-nightly-641446f65-240905",
+    "@react-spectrum/form": "^3.0.0-nightly-641446f65-240905",
+    "@react-spectrum/label": "^3.0.0-nightly-641446f65-240905",
+    "@react-spectrum/utils": "^3.0.0-nightly-641446f65-240905",
+    "@react-stately/radio": "^3.0.0-nightly-641446f65-240905",
+    "@react-types/radio": "^3.0.0-nightly-641446f65-240905",
+    "@react-types/shared": "^3.0.0-nightly-641446f65-240905",
+    "@swc/helpers": "^0.5.0"
+  },
+  "devDependencies": {
+    "@adobe/spectrum-css-temp": "3.0.0-alpha.1"
+  },
+  "peerDependencies": {
+    "@react-spectrum/provider": "^3.0.0-nightly-641446f65-240905",
+    "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "stableVersion": "3.7.8"
+}

package/src/Radio.tsx

@@ -0,0 +1,89 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {classNames, useFocusableRef, useStyleProps} from '@react-spectrum/utils';
+import {FocusableRef} from '@react-types/shared';
+import {FocusRing} from '@react-aria/focus';
+import React, {forwardRef, useRef} from 'react';
+import {SpectrumRadioProps} from '@react-types/radio';
+import styles from '@adobe/spectrum-css-temp/components/radio/vars.css';
+import {useHover} from '@react-aria/interactions';
+import {useRadio} from '@react-aria/radio';
+import {useRadioProvider} from './context';
+
+function Radio(props: SpectrumRadioProps, ref: FocusableRef<HTMLLabelElement>) {
+  let {
+    isDisabled,
+    children,
+    autoFocus,
+    ...otherProps
+  } = props;
+  let {styleProps} = useStyleProps(otherProps);
+  let {hoverProps, isHovered} = useHover({isDisabled});
+
+  let inputRef = useRef<HTMLInputElement>(null);
+  let domRef = useFocusableRef(ref, inputRef);
+
+  let radioGroupProps = useRadioProvider();
+  let {
+    isEmphasized,
+    state
+  } = radioGroupProps;
+
+  let {inputProps} = useRadio({
+    ...props,
+    ...radioGroupProps,
+    isDisabled
+  }, state, inputRef);
+
+  return (
+    <label
+      {...styleProps}
+      {...hoverProps}
+      ref={domRef}
+      className={
+        classNames(
+          styles,
+          'spectrum-Radio',
+          {
+            // Removing. Pending design feedback.
+            // 'spectrum-Radio--labelBelow': labelPosition === 'bottom',
+            'spectrum-Radio--quiet': !isEmphasized,
+            'is-disabled': isDisabled,
+            'is-invalid': state.isInvalid,
+            'is-hovered': isHovered
+          },
+          styleProps.className
+        )
+      }>
+      <FocusRing focusRingClass={classNames(styles, 'focus-ring')} autoFocus={autoFocus}>
+        <input
+          {...inputProps}
+          ref={inputRef}
+          className={classNames(styles, 'spectrum-Radio-input')} />
+      </FocusRing>
+      <span className={classNames(styles, 'spectrum-Radio-button')} />
+      {children && (
+        <span className={classNames(styles, 'spectrum-Radio-label')}>
+          {children}
+        </span>
+      )}
+    </label>
+  );
+}
+
+/**
+ * Radio buttons allow users to select a single option from a list of mutually exclusive options.
+ * All possible options are exposed up front for users to compare.
+ */
+const _Radio = forwardRef(Radio);
+export {_Radio as Radio};

package/src/RadioGroup.tsx

@@ -0,0 +1,73 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {classNames, useDOMRef} from '@react-spectrum/utils';
+import {DOMRef} from '@react-types/shared';
+import {Field} from '@react-spectrum/label';
+import {RadioContext} from './context';
+import React from 'react';
+import {SpectrumRadioGroupProps} from '@react-types/radio';
+import styles from '@adobe/spectrum-css-temp/components/fieldgroup/vars.css';
+import {useFormProps} from '@react-spectrum/form';
+import {useProviderProps} from '@react-spectrum/provider';
+import {useRadioGroup} from '@react-aria/radio';
+import {useRadioGroupState} from '@react-stately/radio';
+
+function RadioGroup(props: SpectrumRadioGroupProps, ref: DOMRef<HTMLElement>) {
+  props = useProviderProps(props);
+  props = useFormProps(props);
+  let {
+    isEmphasized,
+    children,
+    orientation = 'vertical'
+  } = props;
+
+  let domRef = useDOMRef(ref);
+  let state = useRadioGroupState(props);
+  let {radioGroupProps, ...otherProps} = useRadioGroup(props, state);
+
+  return (
+    <Field
+      {...props}
+      {...otherProps}
+      ref={domRef}
+      wrapperClassName={classNames(styles, 'spectrum-FieldGroup')}
+      elementType="span">
+      <div
+        {...radioGroupProps}
+        className={
+          classNames(
+            styles,
+            'spectrum-FieldGroup-group',
+            {
+              'spectrum-FieldGroup-group--horizontal': orientation === 'horizontal'
+            }
+          )
+        }>
+        <RadioContext.Provider
+          value={{
+            isEmphasized,
+            state
+          }}>
+          {children}
+        </RadioContext.Provider>
+      </div>
+    </Field>
+  );
+}
+
+/**
+ * Radio groups allow users to select a single option from a list of mutually exclusive options.
+ * All possible options are exposed up front for users to compare.
+ */
+const _RadioGroup = React.forwardRef(RadioGroup);
+export {_RadioGroup as RadioGroup};

package/src/context.ts

@@ -0,0 +1,26 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {RadioGroupState} from '@react-stately/radio';
+import React, {useContext} from 'react';
+
+interface RadioGroupContext {
+  isEmphasized?: boolean,
+  name?: string,
+  state: RadioGroupState
+}
+
+export const RadioContext = React.createContext<RadioGroupContext | null>(null);
+
+export function useRadioProvider(): RadioGroupContext {
+  return useContext(RadioContext) || {} as RadioGroupContext;
+}

package/src/index.ts

@@ -0,0 +1,18 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+/// <reference types="css-module-types" />
+
+export {Radio} from './Radio';
+export {RadioGroup} from './RadioGroup';
+export type {SpectrumRadioProps} from '@react-types/radio';
+export type {SpectrumRadioGroupProps} from '@react-types/radio';