@umami/react-zen 0.125.0 → 0.126.0

package/dist/index.css

@@ -3222,60 +3222,57 @@ body a.Button_button__YTAxZ {
 }
 
 /* virtual-css:css:d2946ea0055c0d1ebfac02670168114b */
-.Toast_toast__YjU0N {
+.Toast_toast__ODE0M {
   display: grid;
   grid-template-areas: "icon title action" "icon description action";
   grid-template-columns: auto 1fr auto;
   grid-auto-columns: auto;
   align-items: center;
-  background-color: var(--background-color);
+  color: var(--base-color-1);
+  background-color: var(--base-color-12);
   border-radius: var(--border-radius);
   box-shadow: var(--box-shadow-3);
   padding: var(--spacing-4) var(--spacing-5);
   border: var(--border);
   position: relative;
 }
-.Toast_toast__YjU0N:has(.Toast_icon__YmFhZ) {
+.Toast_toast__ODE0M:has(.Toast_icon__ZmRlO) {
   grid-template-columns: auto 1fr auto;
   column-gap: var(--gap);
 }
-.Toast_icon__YmFhZ {
+.Toast_icon__ZmRlO {
   grid-area: icon;
 }
-.Toast_icon__YmFhZ:empty {
+.Toast_icon__ZmRlO:empty {
   display: none;
 }
-.Toast_title__OGRhM {
+.Toast_title__OGFiM {
   grid-area: title;
-  color: var(--font-color);
   font-weight: 700;
 }
-.Toast_description__MDBkN {
+.Toast_description__OTAxY {
   grid-area: description;
 }
-.Toast_action__MjUxO {
+.Toast_action__YzYxM {
   grid-area: action;
   border: 0;
   background: transparent;
 }
-.Toast_close__ZDVjN {
+.Toast_close__ZmMzM {
+  grid-area: action;
   display: none;
   color: currentColor;
-  position: absolute;
-  right: var(--spacing-3);
-  top: 50%;
-  transform: translateY(-50%);
 }
-.Toast_toast__YjU0N:hover .Toast_close__ZDVjN {
+.Toast_toast__ODE0M:hover .Toast_close__ZmMzM {
   display: block;
   cursor: pointer;
 }
-.Toast_toast__YjU0N.Toast_info__ZDRhY {
-  color: var(--primary-font-color);
-  background: var(--primary-color);
+.Toast_toast__ODE0M.Toast_success__Y2ZhZ {
+  color: var(--success-font-color);
+  background: var(--success-color);
   border: 0;
 }
-.Toast_toast__YjU0N.Toast_error__NmEwO {
+.Toast_toast__ODE0M.Toast_error__YzE0Y {
   color: var(--danger-font-color);
   background: var(--danger-color);
   border: 0;
@@ -4376,55 +4373,89 @@ body a.Button_button__YTAxZ {
 }
 
 /* virtual-css:css:e3e6aca5943038cfd68ddbab1d1ccf5e */
-.RadioGroup_radiogroup__ZDJlY {
+.RadioGroup_radiogroup__ZjliM {
+  display: grid;
   font-size: var(--font-size);
   color: var(--font-color);
 }
-.RadioGroup_inputs__OTc1Y {
+.RadioGroup_inputs__NjA4N {
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-4);
+  gap: var(--spacing-3);
 }
-.RadioGroup_radiogroup__ZDJlY[data-orientation=vertical] .RadioGroup_inputs__OTc1Y {
+.RadioGroup_radiogroup__ZjliM[data-orientation=vertical] .RadioGroup_inputs__NjA4N {
   flex-direction: column;
 }
-.RadioGroup_radiogroup__ZDJlY[data-orientation=horizontal] .RadioGroup_inputs__OTc1Y {
+.RadioGroup_radiogroup__ZjliM[data-orientation=horizontal] .RadioGroup_inputs__NjA4N {
   flex-direction: row;
-  gap: var(--spacing-6);
 }
-.RadioGroup_radio__ZDJiM {
+.RadioGroup_radio__MmE2Z {
   display: flex;
   align-items: center;
   gap: var(--gap);
   forced-color-adjust: none;
-}
-.RadioGroup_radio__ZDJiM:before {
-  content: "";
-  display: block;
-  width: 20px;
-  height: 20px;
-  box-sizing: border-box;
-  border: var(--border);
-  background: var(--background-color);
-  border-radius: 20px;
+  cursor: pointer;
   transition: all 200ms;
-  box-shadow: var(--box-shadow);
-}
-.RadioGroup_radio__ZDJiM[data-pressed]:before {
-  border-color: var(--border-color);
-}
-.RadioGroup_radio__ZDJiM[data-selected]:before {
-  border-color: var(--primary-color);
-  border-width: 7px;
 }
-.RadioGroup_radio__ZDJiM[data-selected][data-pressed]:before {
-  border-color: var(--primary-color);
-}
-.RadioGroup_radio__ZDJiM[data-disabled] {
-  color: var(--font-color-muted);
+.RadioGroup_radiogroup__ZjliM.RadioGroup_variant-circle__NzliY {
+  &[data-orientation=horizontal] .RadioGroup_inputs__NjA4N {
+    gap: var(--spacing-6);
+  }
+  & .RadioGroup_radio__MmE2Z:before {
+    content: "";
+    display: block;
+    width: 20px;
+    height: 20px;
+    box-sizing: border-box;
+    border: var(--border);
+    background: var(--background-color);
+    border-radius: 20px;
+    transition: all 200ms;
+    box-shadow: var(--box-shadow);
+  }
+  & .RadioGroup_radio__MmE2Z[data-pressed]:before {
+    border-color: var(--border-color);
+  }
+  & .RadioGroup_radio__MmE2Z[data-selected]:before {
+    border-color: var(--primary-color);
+    border-width: 7px;
+  }
+  & .RadioGroup_radio__MmE2Z[data-selected][data-pressed]:before {
+    border-color: var(--primary-color);
+  }
+  & .RadioGroup_radio__MmE2Z[data-disabled] {
+    color: var(--font-color-muted);
+    cursor: default;
+  }
+  & .RadioGroup_radio__MmE2Z[data-disabled]:before {
+    background-color: var(--base-color-3);
+  }
 }
-.RadioGroup_radio__ZDJiM[data-disabled]:before {
-  background-color: var(--base-color-4);
+.RadioGroup_radiogroup__ZjliM.RadioGroup_variant-box__Mjk3N {
+  & .RadioGroup_radio__MmE2Z {
+    justify-content: center;
+    padding: var(--padding);
+    border: var(--border);
+    border-radius: var(--border-radius);
+  }
+  & .RadioGroup_radio__MmE2Z[data-pressed] {
+    border-color: var(--border-color);
+  }
+  & .RadioGroup_radio__MmE2Z[data-selected] {
+    color: var(--primary-color);
+    border-color: var(--primary-color);
+  }
+  & .RadioGroup_radio__MmE2Z[data-selected][data-pressed] {
+    color: var(--primary-color);
+    border-color: var(--primary-color);
+  }
+  & .RadioGroup_radio__MmE2Z[data-disabled] {
+    color: var(--font-color-muted);
+    cursor: default;
+  }
+  & .RadioGroup_radio__MmE2Z[data-disabled] {
+    background-color: var(--base-color-3);
+  }
 }
 
 /* virtual-css:css:851dd5366a20c382ffec60997ee93e35 */

package/dist/index.d.mts

@@ -180,7 +180,7 @@ interface ToastProps extends HTMLAttributes<HTMLDivElement> {
     title?: string;
     actions?: string[];
     allowClose?: boolean;
-    variant?: 'info' | 'error';
+    variant?: 'success' | 'error';
     onClose?: (action?: string) => void;
 }
 declare function Toast({ id, message, title, actions, allowClose, variant, className, children, onClose, ...props }: ToastProps): react.JSX.Element;
@@ -205,12 +205,13 @@ declare function useTheme(defaultTheme?: string): {
     setTheme: typeof setTheme;
 };
 
+type ToastVariant = 'success' | 'error';
 interface ToastOptions {
     duration?: number;
     title?: string;
     actions?: string[];
     allowClose?: boolean;
-    variant?: 'info' | 'error';
+    variant?: ToastVariant;
     onClose?: (action?: string) => void;
 }
 interface ToastState extends ToastOptions {
@@ -509,8 +510,9 @@ declare function ProgressCircle({ className, showValue, ...props }: ProgressCirc
 
 interface RadioGroupProps extends RadioGroupProps$1 {
     label?: string;
+    variant?: 'circle' | 'box';
 }
-declare function RadioGroup({ label, children, className, ...props }: RadioGroupProps): react.JSX.Element;
+declare function RadioGroup({ variant, label, children, className, ...props }: RadioGroupProps): react.JSX.Element;
 
 declare function Radio({ children, className, ...props }: RadioProps): react.JSX.Element;
 

package/dist/index.d.ts

@@ -180,7 +180,7 @@ interface ToastProps extends HTMLAttributes<HTMLDivElement> {
     title?: string;
     actions?: string[];
     allowClose?: boolean;
-    variant?: 'info' | 'error';
+    variant?: 'success' | 'error';
     onClose?: (action?: string) => void;
 }
 declare function Toast({ id, message, title, actions, allowClose, variant, className, children, onClose, ...props }: ToastProps): react.JSX.Element;
@@ -205,12 +205,13 @@ declare function useTheme(defaultTheme?: string): {
     setTheme: typeof setTheme;
 };
 
+type ToastVariant = 'success' | 'error';
 interface ToastOptions {
     duration?: number;
     title?: string;
     actions?: string[];
     allowClose?: boolean;
-    variant?: 'info' | 'error';
+    variant?: ToastVariant;
     onClose?: (action?: string) => void;
 }
 interface ToastState extends ToastOptions {
@@ -509,8 +510,9 @@ declare function ProgressCircle({ className, showValue, ...props }: ProgressCirc
 
 interface RadioGroupProps extends RadioGroupProps$1 {
     label?: string;
+    variant?: 'circle' | 'box';
 }
-declare function RadioGroup({ label, children, className, ...props }: RadioGroupProps): react.JSX.Element;
+declare function RadioGroup({ variant, label, children, className, ...props }: RadioGroupProps): react.JSX.Element;
 
 declare function Radio({ children, className, ...props }: RadioProps): react.JSX.Element;
 

package/dist/index.js

@@ -26248,7 +26248,7 @@ function FormSubmitButton({
 var import_classnames9 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\toast\Toast.module.css
-var Toast_default = { "toast": "Toast_toast__YjU0N", "icon": "Toast_icon__YmFhZ", "title": "Toast_title__OGRhM", "description": "Toast_description__MDBkN", "action": "Toast_action__MjUxO", "close": "Toast_close__ZDVjN", "info": "Toast_info__ZDRhY", "error": "Toast_error__NmEwO" };
+var Toast_default = { "toast": "Toast_toast__ODE0M", "icon": "Toast_icon__ZmRlO", "title": "Toast_title__OGFiM", "description": "Toast_description__OTAxY", "action": "Toast_action__YzYxM", "close": "Toast_close__ZmMzM", "success": "Toast_success__Y2ZhZ", "error": "Toast_error__YzE0Y" };
 
 // src/components/toast/Toast.tsx
 var import_jsx_runtime18 = require("react/jsx-runtime");
@@ -26270,15 +26270,24 @@ function Toast({
     title && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: Toast_default.title, children: title }),
     message && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: Toast_default.description, children: message }),
     hasActions && actions.map((action) => {
-      return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Button2, { className: Toast_default.action, onPress: () => onClose?.(action), children: action }, action);
+      return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        Button2,
+        {
+          variant: "outline",
+          className: Toast_default.action,
+          onPress: () => onClose?.(action),
+          children: action
+        },
+        action
+      );
     }),
     !hasActions && allowClose && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       Icon2,
       {
-        size: "sm",
         "aria-hidden": true,
-        className: Toast_default.close,
         "aria-label": "Close",
+        size: "sm",
+        className: Toast_default.close,
         onClick: () => onClose?.(TOAST_CLOSE_ACTION),
         children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(X, {})
       }
@@ -31230,18 +31239,32 @@ function ProgressCircle({ className, showValue, ...props }) {
 var import_classnames42 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\RadioGroup.module.css
-var RadioGroup_default = { "radiogroup": "RadioGroup_radiogroup__ZDJlY", "inputs": "RadioGroup_inputs__OTc1Y", "radio": "RadioGroup_radio__ZDJiM" };
+var RadioGroup_default = { "radiogroup": "RadioGroup_radiogroup__ZjliM", "inputs": "RadioGroup_inputs__NjA4N", "radio": "RadioGroup_radio__MmE2Z", "variant-circle": "RadioGroup_variant-circle__NzliY", "variant-box": "RadioGroup_variant-box__Mjk3N" };
 
 // src/components/RadioGroup.tsx
 var import_jsx_runtime56 = require("react/jsx-runtime");
-function RadioGroup2({ label, children, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)($b6c3ddc6086f204d$export$a98f0dcb43a68a25, { ...props, className: (0, import_classnames42.default)(RadioGroup_default.radiogroup, className), children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Label2, { children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: RadioGroup_default.inputs, children })
-  ] });
+function RadioGroup2({
+  variant = "circle",
+  label,
+  children,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
+    $b6c3ddc6086f204d$export$a98f0dcb43a68a25,
+    {
+      "aria-label": "RadioGroup",
+      ...props,
+      className: (0, import_classnames42.default)(RadioGroup_default.radiogroup, RadioGroup_default[`variant-${variant}`], className),
+      children: [
+        label && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Label2, { children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: RadioGroup_default.inputs, children })
+      ]
+    }
+  );
 }
 function Radio2({ children, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)($b6c3ddc6086f204d$export$d7b12c4107be0d61, { ...props, className: (0, import_classnames42.default)(RadioGroup_default.radio, className), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)($b6c3ddc6086f204d$export$d7b12c4107be0d61, { "aria-label": "Radio", ...props, className: (0, import_classnames42.default)(RadioGroup_default.radio, className), children });
 }
 
 // src/components/SearchField.tsx

package/dist/index.mjs

@@ -26135,7 +26135,7 @@ function FormSubmitButton({
 var import_classnames9 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\toast\Toast.module.css
-var Toast_default = { "toast": "Toast_toast__YjU0N", "icon": "Toast_icon__YmFhZ", "title": "Toast_title__OGRhM", "description": "Toast_description__MDBkN", "action": "Toast_action__MjUxO", "close": "Toast_close__ZDVjN", "info": "Toast_info__ZDRhY", "error": "Toast_error__NmEwO" };
+var Toast_default = { "toast": "Toast_toast__ODE0M", "icon": "Toast_icon__ZmRlO", "title": "Toast_title__OGFiM", "description": "Toast_description__OTAxY", "action": "Toast_action__YzYxM", "close": "Toast_close__ZmMzM", "success": "Toast_success__Y2ZhZ", "error": "Toast_error__YzE0Y" };
 
 // src/components/toast/Toast.tsx
 import { jsx as jsx18, jsxs as jsxs9 } from "react/jsx-runtime";
@@ -26157,15 +26157,24 @@ function Toast({
     title && /* @__PURE__ */ jsx18("div", { className: Toast_default.title, children: title }),
     message && /* @__PURE__ */ jsx18("div", { className: Toast_default.description, children: message }),
     hasActions && actions.map((action) => {
-      return /* @__PURE__ */ jsx18(Button2, { className: Toast_default.action, onPress: () => onClose?.(action), children: action }, action);
+      return /* @__PURE__ */ jsx18(
+        Button2,
+        {
+          variant: "outline",
+          className: Toast_default.action,
+          onPress: () => onClose?.(action),
+          children: action
+        },
+        action
+      );
     }),
     !hasActions && allowClose && /* @__PURE__ */ jsx18(
       Icon2,
       {
-        size: "sm",
         "aria-hidden": true,
-        className: Toast_default.close,
         "aria-label": "Close",
+        size: "sm",
+        className: Toast_default.close,
         onClick: () => onClose?.(TOAST_CLOSE_ACTION),
         children: /* @__PURE__ */ jsx18(X, {})
       }
@@ -31121,18 +31130,32 @@ function ProgressCircle({ className, showValue, ...props }) {
 var import_classnames42 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\RadioGroup.module.css
-var RadioGroup_default = { "radiogroup": "RadioGroup_radiogroup__ZDJlY", "inputs": "RadioGroup_inputs__OTc1Y", "radio": "RadioGroup_radio__ZDJiM" };
+var RadioGroup_default = { "radiogroup": "RadioGroup_radiogroup__ZjliM", "inputs": "RadioGroup_inputs__NjA4N", "radio": "RadioGroup_radio__MmE2Z", "variant-circle": "RadioGroup_variant-circle__NzliY", "variant-box": "RadioGroup_variant-box__Mjk3N" };
 
 // src/components/RadioGroup.tsx
 import { jsx as jsx56, jsxs as jsxs31 } from "react/jsx-runtime";
-function RadioGroup2({ label, children, className, ...props }) {
-  return /* @__PURE__ */ jsxs31($b6c3ddc6086f204d$export$a98f0dcb43a68a25, { ...props, className: (0, import_classnames42.default)(RadioGroup_default.radiogroup, className), children: [
-    label && /* @__PURE__ */ jsx56(Label2, { children: label }),
-    /* @__PURE__ */ jsx56("div", { className: RadioGroup_default.inputs, children })
-  ] });
+function RadioGroup2({
+  variant = "circle",
+  label,
+  children,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs31(
+    $b6c3ddc6086f204d$export$a98f0dcb43a68a25,
+    {
+      "aria-label": "RadioGroup",
+      ...props,
+      className: (0, import_classnames42.default)(RadioGroup_default.radiogroup, RadioGroup_default[`variant-${variant}`], className),
+      children: [
+        label && /* @__PURE__ */ jsx56(Label2, { children: label }),
+        /* @__PURE__ */ jsx56("div", { className: RadioGroup_default.inputs, children })
+      ]
+    }
+  );
 }
 function Radio2({ children, className, ...props }) {
-  return /* @__PURE__ */ jsx56($b6c3ddc6086f204d$export$d7b12c4107be0d61, { ...props, className: (0, import_classnames42.default)(RadioGroup_default.radio, className), children });
+  return /* @__PURE__ */ jsx56($b6c3ddc6086f204d$export$d7b12c4107be0d61, { "aria-label": "Radio", ...props, className: (0, import_classnames42.default)(RadioGroup_default.radio, className), children });
 }
 
 // src/components/SearchField.tsx

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umami/react-zen",
-  "version": "0.125.0",
+  "version": "0.126.0",
   "description": "Modern, minimalist React component library",
   "author": "Umami <hello@umami.is>",
   "license": "MIT",

package/styles.css

@@ -237,7 +237,7 @@ html[data-theme='dark'], .dark-theme {
   --highlight-font-color: var(--font-color);
 
   --success-color: var(--accent-color-green);
-  --success-font-color: var(--base-color-1);
+  --success-font-color: var(--base-color-12);
 
   --danger-color: var(--accent-color-red);
   --danger-font-color: var(--base-color-12);
@@ -3540,60 +3540,57 @@ body a.Button_button__YTAxZ {
 }
 
 /* virtual-css:css:d2946ea0055c0d1ebfac02670168114b */
-.Toast_toast__YjU0N {
+.Toast_toast__ODE0M {
   display: grid;
   grid-template-areas: "icon title action" "icon description action";
   grid-template-columns: auto 1fr auto;
   grid-auto-columns: auto;
   align-items: center;
-  background-color: var(--background-color);
+  color: var(--base-color-1);
+  background-color: var(--base-color-12);
   border-radius: var(--border-radius);
   box-shadow: var(--box-shadow-3);
   padding: var(--spacing-4) var(--spacing-5);
   border: var(--border);
   position: relative;
 }
-.Toast_toast__YjU0N:has(.Toast_icon__YmFhZ) {
+.Toast_toast__ODE0M:has(.Toast_icon__ZmRlO) {
   grid-template-columns: auto 1fr auto;
   column-gap: var(--gap);
 }
-.Toast_icon__YmFhZ {
+.Toast_icon__ZmRlO {
   grid-area: icon;
 }
-.Toast_icon__YmFhZ:empty {
+.Toast_icon__ZmRlO:empty {
   display: none;
 }
-.Toast_title__OGRhM {
+.Toast_title__OGFiM {
   grid-area: title;
-  color: var(--font-color);
   font-weight: 700;
 }
-.Toast_description__MDBkN {
+.Toast_description__OTAxY {
   grid-area: description;
 }
-.Toast_action__MjUxO {
+.Toast_action__YzYxM {
   grid-area: action;
   border: 0;
   background: transparent;
 }
-.Toast_close__ZDVjN {
+.Toast_close__ZmMzM {
+  grid-area: action;
   display: none;
   color: currentColor;
-  position: absolute;
-  right: var(--spacing-3);
-  top: 50%;
-  transform: translateY(-50%);
 }
-.Toast_toast__YjU0N:hover .Toast_close__ZDVjN {
+.Toast_toast__ODE0M:hover .Toast_close__ZmMzM {
   display: block;
   cursor: pointer;
 }
-.Toast_toast__YjU0N.Toast_info__ZDRhY {
-  color: var(--primary-font-color);
-  background: var(--primary-color);
+.Toast_toast__ODE0M.Toast_success__Y2ZhZ {
+  color: var(--success-font-color);
+  background: var(--success-color);
   border: 0;
 }
-.Toast_toast__YjU0N.Toast_error__NmEwO {
+.Toast_toast__ODE0M.Toast_error__YzE0Y {
   color: var(--danger-font-color);
   background: var(--danger-color);
   border: 0;
@@ -4694,55 +4691,89 @@ body a.Button_button__YTAxZ {
 }
 
 /* virtual-css:css:e3e6aca5943038cfd68ddbab1d1ccf5e */
-.RadioGroup_radiogroup__ZDJlY {
+.RadioGroup_radiogroup__ZjliM {
+  display: grid;
   font-size: var(--font-size);
   color: var(--font-color);
 }
-.RadioGroup_inputs__OTc1Y {
+.RadioGroup_inputs__NjA4N {
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-4);
+  gap: var(--spacing-3);
 }
-.RadioGroup_radiogroup__ZDJlY[data-orientation=vertical] .RadioGroup_inputs__OTc1Y {
+.RadioGroup_radiogroup__ZjliM[data-orientation=vertical] .RadioGroup_inputs__NjA4N {
   flex-direction: column;
 }
-.RadioGroup_radiogroup__ZDJlY[data-orientation=horizontal] .RadioGroup_inputs__OTc1Y {
+.RadioGroup_radiogroup__ZjliM[data-orientation=horizontal] .RadioGroup_inputs__NjA4N {
   flex-direction: row;
-  gap: var(--spacing-6);
 }
-.RadioGroup_radio__ZDJiM {
+.RadioGroup_radio__MmE2Z {
   display: flex;
   align-items: center;
   gap: var(--gap);
   forced-color-adjust: none;
-}
-.RadioGroup_radio__ZDJiM:before {
-  content: "";
-  display: block;
-  width: 20px;
-  height: 20px;
-  box-sizing: border-box;
-  border: var(--border);
-  background: var(--background-color);
-  border-radius: 20px;
+  cursor: pointer;
   transition: all 200ms;
-  box-shadow: var(--box-shadow);
-}
-.RadioGroup_radio__ZDJiM[data-pressed]:before {
-  border-color: var(--border-color);
-}
-.RadioGroup_radio__ZDJiM[data-selected]:before {
-  border-color: var(--primary-color);
-  border-width: 7px;
-}
-.RadioGroup_radio__ZDJiM[data-selected][data-pressed]:before {
-  border-color: var(--primary-color);
 }
-.RadioGroup_radio__ZDJiM[data-disabled] {
-  color: var(--font-color-muted);
+.RadioGroup_radiogroup__ZjliM.RadioGroup_variant-circle__NzliY {
+  &[data-orientation=horizontal] .RadioGroup_inputs__NjA4N {
+    gap: var(--spacing-6);
+  }
+  & .RadioGroup_radio__MmE2Z:before {
+    content: "";
+    display: block;
+    width: 20px;
+    height: 20px;
+    box-sizing: border-box;
+    border: var(--border);
+    background: var(--background-color);
+    border-radius: 20px;
+    transition: all 200ms;
+    box-shadow: var(--box-shadow);
+  }
+  & .RadioGroup_radio__MmE2Z[data-pressed]:before {
+    border-color: var(--border-color);
+  }
+  & .RadioGroup_radio__MmE2Z[data-selected]:before {
+    border-color: var(--primary-color);
+    border-width: 7px;
+  }
+  & .RadioGroup_radio__MmE2Z[data-selected][data-pressed]:before {
+    border-color: var(--primary-color);
+  }
+  & .RadioGroup_radio__MmE2Z[data-disabled] {
+    color: var(--font-color-muted);
+    cursor: default;
+  }
+  & .RadioGroup_radio__MmE2Z[data-disabled]:before {
+    background-color: var(--base-color-3);
+  }
 }
-.RadioGroup_radio__ZDJiM[data-disabled]:before {
-  background-color: var(--base-color-4);
+.RadioGroup_radiogroup__ZjliM.RadioGroup_variant-box__Mjk3N {
+  & .RadioGroup_radio__MmE2Z {
+    justify-content: center;
+    padding: var(--padding);
+    border: var(--border);
+    border-radius: var(--border-radius);
+  }
+  & .RadioGroup_radio__MmE2Z[data-pressed] {
+    border-color: var(--border-color);
+  }
+  & .RadioGroup_radio__MmE2Z[data-selected] {
+    color: var(--primary-color);
+    border-color: var(--primary-color);
+  }
+  & .RadioGroup_radio__MmE2Z[data-selected][data-pressed] {
+    color: var(--primary-color);
+    border-color: var(--primary-color);
+  }
+  & .RadioGroup_radio__MmE2Z[data-disabled] {
+    color: var(--font-color-muted);
+    cursor: default;
+  }
+  & .RadioGroup_radio__MmE2Z[data-disabled] {
+    background-color: var(--base-color-3);
+  }
 }
 
 /* virtual-css:css:851dd5366a20c382ffec60997ee93e35 */