@wistia/ui 0.14.17 → 0.14.18

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.14.17
+ * @license @wistia/ui v0.14.18
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -9021,7 +9021,6 @@ var StyledFormControlLabelDescription = import_styled_components37.default.div`
   font-size: var(--wui-typography-body-4-size);
   font-weight: var(--wui-typography-body-4-weight);
   line-height: var(--wui-typography-body-4-line-height);
-  margin-top: var(--wui-space-01);
 
   ${({ $disabled }) => $disabled && disabledStyle}
 `;
@@ -9080,12 +9079,12 @@ var StyledFormControlLabel = import_styled_components39.default.label`
   cursor: pointer;
   display: flex;
   align-items: center;
-  gap: var(--wui-space-01);
+  gap: var(--wui-space-02);
   width: 100%;
   color: var(--wui-color-tex);
   font-size: var(--wui-typography-label-3-size);
   font-weight: var(--wui-typography-label-3-weight);
-  line-height: var(--wui-typography-label-3-line-height);
+  line-height: var(--wui-typography-body-3-line-height);
   justify-content: ${({ $align }) => $align === "left" ? "flex-start" : "space-between"};
 
   ${({ $disabled }) => $disabled && disabledStyle2}
@@ -9168,11 +9167,9 @@ var Stack = makePolymorphic(StackComponent);
 // src/components/FormGroup/FormGroup.tsx
 var import_jsx_runtime218 = require("react/jsx-runtime");
 var StyledFieldset = import_styled_components41.default.fieldset`
+  padding: 0;
+  margin: 0;
   border: 0;
-
-  /* * {
-    outline: 1px solid red;
-  } */
 `;
 var StyledLegend = import_styled_components41.default.legend`
   padding-inline: 0;
@@ -9180,10 +9177,6 @@ var StyledLegend = import_styled_components41.default.legend`
   flex-direction: column;
   gap: var(--wui-space-01);
   margin-bottom: var(--wui-space-02);
-
-  &:has([data-wui-form-group-description]) {
-    margin-bottom: var(--wui-space-01);
-  }
 `;
 var FormGroup = ({
   children,
@@ -9389,43 +9382,22 @@ var CheckIcon = () => /* @__PURE__ */ (0, import_jsx_runtime221.jsx)(
       "path",
       {
         d: "M3.47281 7.19303L0.377565 4.07999C0.191609 3.89297 0.191609 3.58973 0.377565 3.40268L1.05098 2.72537C1.23694 2.53833 1.53847 2.53833 1.72442 2.72537L3.80953 4.82245L8.27558 0.330729C8.46154 0.143704 8.76306 0.143704 8.94902 0.330729L9.62244 1.00804C9.8084 1.19506 9.8084 1.49831 9.62244 1.68535L4.14624 7.19305C3.96027 7.38008 3.65876 7.38008 3.47281 7.19303Z",
-        fill: "currentColor"
+        fill: "var(--wui-checkbox-icon-color)"
       }
     )
   }
 );
 var sizeSmall = import_styled_components43.css`
-  width: 14px;
-  height: 14px;
-  min-width: 14px;
-  min-height: 14px;
-
-  svg {
-    width: 7px;
-    height: 7px;
-  }
+  --wui-checkbox-size: 14px;
+  --wui-checkbox-icon-size: 7px;
 `;
 var sizeMedium = import_styled_components43.css`
-  width: 16px;
-  height: 16px;
-  min-width: 16px;
-  min-height: 16px;
-
-  svg {
-    width: 9px;
-    height: 9px;
-  }
+  --wui-checkbox-size: 16px;
+  --wui-checkbox-icon-size: 9px;
 `;
 var sizeLarge = import_styled_components43.css`
-  width: 20px;
-  height: 20px;
-  min-width: 20px;
-  min-height: 20px;
-
-  svg {
-    width: 11px;
-    height: 11px;
-  }
+  --wui-checkbox-size: 20px;
+  --wui-checkbox-icon-size: 11px;
 `;
 var getSizeCss = (size) => {
   if (size === "sm") return sizeSmall;
@@ -9433,6 +9405,36 @@ var getSizeCss = (size) => {
   return sizeMedium;
 };
 var StyledCheckboxWrapper = import_styled_components43.default.div`
+  --wui-checkbox-background-color: var(--wui-color-bg-surface);
+  --wui-checkbox-border-color: var(--wui-color-border-secondary);
+  --wui-checkbox-icon-color: transparent;
+  --wui-checkbox-outline-color: transparent;
+
+  &:hover {
+    --wui-checkbox-border-color: var(--wui-color-border-secondary-hover);
+  }
+
+  &:has(input:checked) {
+    --wui-checkbox-background-color: var(--wui-color-bg-fill);
+    --wui-checkbox-border-color: transparent;
+    --wui-checkbox-icon-color: var(--wui-color-bg-fill-white);
+  }
+
+  &:has(input:disabled) {
+    --wui-checkbox-background-color: var(--wui-color-bg-surface-disabled);
+    --wui-checkbox-border-color: var(--wui-color-border-secondary);
+
+    &:has(input:checked) {
+      --wui-checkbox-icon-color: var(--wui-color-icon-disabled);
+    }
+  }
+
+  &:has(input:focus-visible) {
+    [data-wui-faux-input='true'] {
+      --wui-checkbox-outline-color: var(--wui-color-focus-ring);
+    }
+  }
+
   display: flex;
   margin: 0;
 
@@ -9441,7 +9443,6 @@ var StyledCheckboxWrapper = import_styled_components43.default.div`
 `;
 var StyledCheckboxInput = import_styled_components43.default.div`
   ${({ $size }) => getSizeCss($size)}
-  line-height: 0;
   margin: 0;
   border-radius: var(--wui-border-radius-01);
   display: grid;
@@ -9449,31 +9450,27 @@ var StyledCheckboxInput = import_styled_components43.default.div`
   align-self: flex-start;
   border-width: 1px;
   border-style: solid;
-  border-color: ${({ $disabled }) => $disabled ? "var(--wui-color-border-disabled)" : "var(--wui-color-border)"};
-  background-color: ${({ $disabled }) => $disabled ? "var(--wui-color-bg-surface-disabled)" : "var(--wui-color-bg-surface)"};
+  border-color: var(--wui-checkbox-border-color);
+  background-color: var(--wui-checkbox-background-color);
+  outline-color: var(--wui-checkbox-outline-color);
+  outline-width: 2px;
+  outline-style: solid;
+  outline-offset: 1px;
+  transition: all var(--wui-motion-duration-01) var(--wui-motion-ease);
+  margin-top: calc(calc(1lh - var(--wui-checkbox-size)) / 2);
+  width: var(--wui-checkbox-size);
+  height: var(--wui-checkbox-size);
+  min-width: var(--wui-checkbox-size);
+  min-height: var(--wui-checkbox-size);
 
-  /* checkmark icon */
+  /* checkbox icon */
   svg {
-    display: none;
-
-    path {
-      fill: ${({ $disabled }) => $disabled ? "var(--wui-color-icon-disabled)" : "var(--wui-color-bg-fill-white)"};
-    }
+    width: var(--wui-checkbox-icon-size);
+    height: var(--wui-checkbox-icon-size);
   }
 `;
 var StyledHiddenCheckboxInput = import_styled_components43.default.input`
   ${visuallyHiddenStyle}
-
-  /* toggles display of faux-input background-color */
-  &:checked + label [data-wui-faux-input='true'] {
-    border-color: ${({ disabled }) => disabled ? void 0 : "var(--wui-color-bg-fill)"};
-    background-color: ${({ disabled }) => disabled ? "var(--wui-color-bg-surface-disabled)" : "var(--wui-color-bg-fill)"};
-  }
-
-  /* toggles display of CheckIcon */
-  &:checked + label svg {
-    display: block;
-  }
 `;
 var Checkbox = (0, import_react38.forwardRef)(
   ({
@@ -9499,42 +9496,49 @@ var Checkbox = (0, import_react38.forwardRef)(
     const checkboxName = name ?? contextName;
     const handleOnChange = onChange ?? contextOnChange;
     const isChecked = (0, import_type_guards31.isNotUndefined)(value) && contextValue ? contextValue.includes(value) : checked;
-    return /* @__PURE__ */ (0, import_jsx_runtime221.jsxs)(StyledCheckboxWrapper, { disabled, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime221.jsx)(
-        StyledHiddenCheckboxInput,
-        {
-          ...props,
-          ref,
-          checked: isChecked,
-          disabled,
-          id: computedId,
-          name: checkboxName,
-          onChange: handleOnChange,
-          required,
-          type: "checkbox",
-          value
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime221.jsx)(
-        FormControlLabel,
-        {
-          controlSlot: /* @__PURE__ */ (0, import_jsx_runtime221.jsx)(
-            StyledCheckboxInput,
+    return /* @__PURE__ */ (0, import_jsx_runtime221.jsxs)(
+      StyledCheckboxWrapper,
+      {
+        $hideLabel: hideLabel,
+        disabled,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime221.jsx)(
+            StyledHiddenCheckboxInput,
             {
-              $disabled: disabled,
-              $size: size,
-              "data-wui-faux-input": "true",
-              children: /* @__PURE__ */ (0, import_jsx_runtime221.jsx)(CheckIcon, {})
+              ...props,
+              ref,
+              checked: isChecked,
+              disabled,
+              id: computedId,
+              name: checkboxName,
+              onChange: handleOnChange,
+              required,
+              type: "checkbox",
+              value
             }
           ),
-          description,
-          disabled,
-          hideLabel,
-          htmlFor: computedId,
-          label
-        }
-      )
-    ] });
+          /* @__PURE__ */ (0, import_jsx_runtime221.jsx)(
+            FormControlLabel,
+            {
+              controlSlot: /* @__PURE__ */ (0, import_jsx_runtime221.jsx)(
+                StyledCheckboxInput,
+                {
+                  $disabled: disabled,
+                  $size: size,
+                  "data-wui-faux-input": "true",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime221.jsx)(CheckIcon, {})
+                }
+              ),
+              description,
+              disabled,
+              hideLabel,
+              htmlFor: computedId,
+              label
+            }
+          )
+        ]
+      }
+    );
   }
 );
 Checkbox.displayName = "Checkbox_UI";
@@ -10939,106 +10943,78 @@ var import_react45 = require("react");
 var import_styled_components59 = __toESM(require("styled-components"));
 var import_type_guards34 = require("@wistia/type-guards");
 var import_jsx_runtime243 = require("react/jsx-runtime");
-var sizeSmall2 = import_styled_components59.css`
-  --wui-size-small-width: 24px;
-  --wui-size-small-height: 14px;
-
-  width: var(--wui-size-small-width);
-  height: var(--wui-size-small-height);
-  min-width: var(--wui-size-small-width);
-  min-height: var(--wui-size-small-height);
-  border-radius: calc(var(--wui-size-small-height) / 2);
-
-  &::after {
-    width: calc(var(--wui-size-small-width) / 2);
-    height: calc(var(--wui-size-small-width) / 2);
-  }
+var switchHeightMap = {
+  sm: 16,
+  md: 20,
+  lg: 24
+};
+var getSizeCss2 = (size) => import_styled_components59.css`
+  --wui-switch-height: ${switchHeightMap[size]}px;
 `;
-var sizeMedium2 = import_styled_components59.css`
-  --wui-size-medium-width: 32px;
-  --wui-size-medium-height: 18px;
-
-  width: var(--wui-size-medium-width);
-  height: var(--wui-size-medium-height);
-  min-width: var(--wui-size-medium-width);
-  min-height: var(--wui-size-medium-height);
-  border-radius: calc(var(--wui-size-medium-height) / 2);
+var StyledSwitchWrapper = import_styled_components59.default.div`
+  ${({ $size }) => getSizeCss2($size)}
+  --wui-switch-border-offset: 2px;
+  --wui-switch-background-color: var(--wui-color-bg-surface-tertiary);
+  --wui-switch-border-color: transparent;
+  --wui-switch-thumb-color: var(--wui-color-icon-on-fill);
+  --wui-switch-thumb-margin-left: 0px;
+  --wui-switch-thumb-size: calc(var(--wui-switch-height) - var(--wui-switch-border-offset) * 2);
+  --wui-switch-width: calc(var(--wui-switch-thumb-size) * 2 + var(--wui-switch-border-offset) * 2);
+  --wui-switch-thumb-position: var(--wui-switch-border-offset);
+  --wui-switch-outline-color: transparent;
 
-  &::after {
-    width: calc(var(--wui-size-medium-width) / 2);
-    height: calc(var(--wui-size-medium-width) / 2);
+  &:has(input:checked) {
+    --wui-switch-background-color: var(--wui-color-bg-fill);
+    --wui-switch-thumb-position: calc(
+      var(--wui-switch-width) - var(--wui-switch-thumb-size) - var(--wui-switch-border-offset)
+    );
   }
-`;
-var sizeLarge2 = import_styled_components59.css`
-  --wui-size-large-width: 40px;
-  --wui-size-large-height: 22px;
 
-  width: var(--wui-size-large-width);
-  height: var(--wui-size-large-height);
-  min-width: var(--wui-size-large-width);
-  min-height: var(--wui-size-large-height);
-  border-radius: calc(var(--wui-size-large-height) / 2);
+  &:has(input:disabled) {
+    --wui-switch-background-color: var(--wui-color-bg-surface-tertiary);
+    --wui-switch-thumb-color: var(--wui-color-bg-surface-disabled);
+  }
 
-  &::after {
-    width: calc(var(--wui-size-large-width) / 2);
-    height: calc(var(--wui-size-large-width) / 2);
+  &:has(input:focus-visible) {
+    --wui-switch-outline-color: var(--wui-color-focus-ring);
   }
-`;
-var getSizeCss2 = (size) => {
-  if (size === "sm") return sizeSmall2;
-  if (size === "lg") return sizeLarge2;
-  return sizeMedium2;
-};
-var StyledSwitchWrapper = import_styled_components59.default.div`
+
   display: flex;
   margin: 0;
 
   /* TODO this solves a problem but potentially causes and a11y issue */
   user-select: none;
 `;
-var StyledSwitchInput = import_styled_components59.default.div`
-  ${({ $size }) => getSizeCss2($size)}
-  line-height: 0;
-  margin: 0;
-  display: grid;
-  place-content: center;
-  align-self: flex-start;
-  position: relative;
-  transition: all 0.2s ease-in-out;
-  border-width: 1px;
-  border-style: solid;
-  border-color: ${({ $disabled }) => $disabled ? "var(--wui-color-border-disabled)" : "var(--wui-color-border)"}; /* "off state" border */
-
-  background-color: ${({ $disabled }) => $disabled ? "var(--wui-color-bg-surface-disabled)" : "var(--wui-color-bg-surface-secondary)"}; /* "off state" background */
-
-  &::after {
-    content: '';
-    position: absolute;
-    left: 0;
-    top: 50%;
-    transform: translateY(-50%);
-    border-radius: 50%;
-    box-shadow: 1px 0 1px rgb(0 0 0 / 10%); /* "off state" shadow - cast horizontally right */
-    background-color: ${({ $disabled }) => $disabled ? "var(--wui-color-bg-surface-disabled)" : "var(--wui-color-bg-fill-white)"}; /* "off state" dot color */
-
-    transition: all 0.2s ease-in-out;
-  }
+var StyledSwitchTrack = import_styled_components59.default.div`
+  width: var(--wui-switch-width);
+  height: var(--wui-switch-height);
+  min-width: var(--wui-switch-width);
+  min-height: var(--wui-switch-height);
+  border-radius: var(--wui-border-radius-rounded);
+  display: flex;
+  align-items: center;
+  outline-width: 2px;
+  outline-offset: 2px;
+  outline-style: solid;
+  outline-color: var(--wui-switch-outline-color);
+  transition:
+    background-color var(--wui-motion-duration-03) var(--wui-motion-ease-out),
+    outline-color var(--wui-motion-duration-03) var(--wui-motion-ease-out);
+  background-color: var(--wui-switch-background-color);
+  margin-top: calc(calc(1lh - var(--wui-switch-height)) / 2);
+`;
+var StyledSwitchThumb = import_styled_components59.default.div`
+  border-radius: var(--wui-border-radius-rounded);
+  background-color: var(--wui-switch-thumb-color);
+  transition:
+    margin var(--wui-motion-duration-03) var(--wui-motion-ease-out),
+    background-color var(--wui-motion-duration-03) var(--wui-motion-ease-out);
+  width: var(--wui-switch-thumb-size);
+  height: var(--wui-switch-thumb-size);
+  margin-left: var(--wui-switch-thumb-position);
 `;
 var StyledHiddenSwitchInput = import_styled_components59.default.input`
   ${visuallyHiddenStyle}
-
-  /* toggles display of faux-input background-color and toggle position */
-  &:checked + label [data-wui-faux-input='true'] {
-    border-color: ${({ disabled }) => disabled ? void 0 : "var(--wui-color-bg-fill)"}; /* "on state" border */
-
-    background-color: ${({ disabled }) => disabled ? "var(--wui-color-bg-surface-disabled)" : "var(--wui-color-bg-fill)"}; /* "on state" background */
-
-    &::after {
-      transform: translate(calc(100% - 2px), -50%); /* 2px is the border width */
-      box-shadow: -1px 0 1px rgb(0 0 0 / 10%); /* "on state" shadow - cast horizontally left */
-      background-color: ${({ disabled }) => disabled ? "var(--wui-color-bg-surface-disabled)" : "var(--wui-color-bg-fill-white)"}; /* "on state" dot color */
-    }
-  }
 `;
 var Switch = (0, import_react45.forwardRef)(
   ({
@@ -11058,43 +11034,50 @@ var Switch = (0, import_react45.forwardRef)(
   }, ref) => {
     const generatedId = (0, import_react45.useId)();
     const computedId = (0, import_type_guards34.isNonEmptyString)(id) ? id : `wistia-ui-switch-${generatedId}`;
-    return /* @__PURE__ */ (0, import_jsx_runtime243.jsxs)(StyledSwitchWrapper, { $disabled: disabled, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime243.jsx)(
-        StyledHiddenSwitchInput,
-        {
-          ...props,
-          ref,
-          checked,
-          disabled,
-          id: computedId,
-          name,
-          onChange,
-          required,
-          type: "checkbox",
-          value
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime243.jsx)(
-        FormControlLabel,
-        {
-          align,
-          controlSlot: /* @__PURE__ */ (0, import_jsx_runtime243.jsx)(
-            StyledSwitchInput,
+    return /* @__PURE__ */ (0, import_jsx_runtime243.jsxs)(
+      StyledSwitchWrapper,
+      {
+        $disabled: disabled,
+        $hideLabel: hideLabel,
+        $size: size,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime243.jsx)(
+            StyledHiddenSwitchInput,
             {
-              $disabled: disabled,
-              $size: size,
-              "data-testid": "wui-faux-input",
-              "data-wui-faux-input": "true"
+              ...props,
+              ref,
+              checked,
+              disabled,
+              id: computedId,
+              name,
+              onChange,
+              required,
+              type: "checkbox",
+              value
             }
           ),
-          description,
-          disabled,
-          hideLabel,
-          htmlFor: computedId,
-          label
-        }
-      )
-    ] });
+          /* @__PURE__ */ (0, import_jsx_runtime243.jsx)(
+            FormControlLabel,
+            {
+              align,
+              controlSlot: /* @__PURE__ */ (0, import_jsx_runtime243.jsx)(
+                StyledSwitchTrack,
+                {
+                  "data-testid": "wui-faux-input",
+                  "data-wui-faux-input": "true",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime243.jsx)(StyledSwitchThumb, {})
+                }
+              ),
+              description,
+              disabled,
+              hideLabel,
+              htmlFor: computedId,
+              label
+            }
+          )
+        ]
+      }
+    );
   }
 );
 Switch.displayName = "Switch_UI";
@@ -14845,64 +14828,51 @@ var import_react72 = require("react");
 var import_styled_components93 = __toESM(require("styled-components"));
 var import_type_guards53 = require("@wistia/type-guards");
 var import_jsx_runtime286 = require("react/jsx-runtime");
-var RadioIcon = () => /* @__PURE__ */ (0, import_jsx_runtime286.jsx)(
-  "svg",
-  {
-    fill: "inherit",
-    height: "1",
-    viewBox: "0 0 1 1",
-    width: "1",
-    xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime286.jsx)(
-      "circle",
-      {
-        cx: "0.5",
-        cy: "0.5",
-        fill: "currentColor",
-        r: "0.5"
-      }
-    )
+var sizeSmall2 = import_styled_components93.css`
+  --wui-radio-size: 14px;
+  --wui-radio-icon-size: 7px;
+`;
+var sizeMedium2 = import_styled_components93.css`
+  --wui-radio-size: 16px;
+  --wui-radio-icon-size: 8px;
+`;
+var sizeLarge2 = import_styled_components93.css`
+  --wui-radio-size: 20px;
+  --wui-radio-icon-size: 10px;
+`;
+var getSizeCss3 = (size) => {
+  if (size === "sm") return sizeSmall2;
+  if (size === "lg") return sizeLarge2;
+  return sizeMedium2;
+};
+var StyledRadioWrapper = import_styled_components93.default.div`
+  --wui-radio-background-color: var(--wui-color-bg-surface);
+  --wui-radio-border-color: var(--wui-color-border-secondary);
+  --wui-radio-icon-color: transparent;
+  --wui-radio-outline-color: transparent;
+
+  &:hover {
+    --wui-radio-border-color: var(--wui-color-border-secondary-hover);
   }
-);
-var sizeSmall3 = import_styled_components93.css`
-  width: 14px;
-  height: 14px;
-  min-width: 14px;
-  min-height: 14px;
 
-  svg {
-    width: 7px;
-    height: 7px;
+  &:has(input:checked) {
+    --wui-radio-border-color: var(--wui-color-focus-ring);
+    --wui-radio-icon-color: var(--wui-color-focus-ring);
   }
-`;
-var sizeMedium3 = import_styled_components93.css`
-  width: 16px;
-  height: 16px;
-  min-width: 16px;
-  min-height: 16px;
 
-  svg {
-    width: 8px;
-    height: 8px;
+  &:has(input:focus-visible) {
+    --wui-radio-outline-color: var(--wui-color-focus-ring);
   }
-`;
-var sizeLarge3 = import_styled_components93.css`
-  width: 20px;
-  height: 20px;
-  min-width: 20px;
-  min-height: 20px;
 
-  svg {
-    width: 10px;
-    height: 10px;
+  &:has(input:disabled) {
+    --wui-radio-background-color: var(--wui-color-bg-surface-disabled);
+    --wui-radio-border-color: var(--wui-color-border-secondary);
+
+    &:has(input:checked) {
+      --wui-radio-icon-color: var(--wui-color-icon-disabled);
+    }
   }
-`;
-var getSizeCss3 = (size) => {
-  if (size === "sm") return sizeSmall3;
-  if (size === "lg") return sizeLarge3;
-  return sizeMedium3;
-};
-var StyledRadioWrapper = import_styled_components93.default.div`
+
   display: flex;
   margin: 0;
 
@@ -14911,38 +14881,33 @@ var StyledRadioWrapper = import_styled_components93.default.div`
 `;
 var StyledRadioInput = import_styled_components93.default.div`
   ${({ $size }) => getSizeCss3($size)}
-  line-height: 0;
-  margin: 0;
-  border-radius: 50%; /* TODO --wui-border-radius-rounded */
-  display: grid;
-  place-content: center;
   align-self: flex-start;
-  border-width: 1px;
-  border-style: solid;
-  border-color: ${({ $disabled }) => $disabled ? "var(--wui-color-border-disabled)" : "var(--wui-color-border)"};
-  background-color: ${({ $disabled }) => $disabled ? "var(--wui-color-bg-surface-disabled)" : "var(--wui-color-bg-surface)"};
-
-  /* radio button circle icon */
-  svg {
-    display: none;
+  width: var(--wui-radio-size);
+  height: var(--wui-radio-size);
+  min-width: var(--wui-radio-size);
+  min-height: var(--wui-radio-size);
+  background-color: var(--wui-radio-background-color);
+  box-shadow: inset 0 0 0 1px var(--wui-radio-border-color);
+  border-radius: 100%;
+  position: relative;
+  cursor: pointer;
+  transition: box-shadow var(--wui-motion-duration-03) var(--wui-motion-ease);
+  margin-top: calc(calc(1lh - var(--wui-radio-size)) / 2);
 
-    circle {
-      fill: ${({ $disabled }) => $disabled ? "var(--wui-color-icon-disabled)" : "var(--wui-color-bg-fill)"};
-    }
+  &::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 50%;
+    height: 50%;
+    background-color: var(--wui-radio-icon-color);
+    border-radius: 100%;
+    transform: translate(-50%, -50%);
   }
 `;
 var StyledHiddenRadioInput = import_styled_components93.default.input`
   ${visuallyHiddenStyle}
-
-  /* toggles display of faux-input border-color */
-  &:checked + label [data-wui-faux-input='true'] {
-    border-color: ${({ disabled }) => disabled ? "var(--wui-color-border-disabled)" : "var(--wui-color-bg-fill)"};
-  }
-
-  /* toggles display of RadioIcon */
-  &:checked + label svg {
-    display: block;
-  }
 `;
 var Radio = (0, import_react72.forwardRef)(
   ({
@@ -14972,6 +14937,7 @@ var Radio = (0, import_react72.forwardRef)(
       StyledRadioWrapper,
       {
         $disabled: disabled,
+        $hideLabel: hideLabel,
         "aria-invalid": props["aria-invalid"],
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime286.jsx)(
@@ -14992,15 +14958,7 @@ var Radio = (0, import_react72.forwardRef)(
           /* @__PURE__ */ (0, import_jsx_runtime286.jsx)(
             FormControlLabel,
             {
-              controlSlot: /* @__PURE__ */ (0, import_jsx_runtime286.jsx)(
-                StyledRadioInput,
-                {
-                  $disabled: disabled,
-                  $size: size,
-                  "data-wui-faux-input": "true",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime286.jsx)(RadioIcon, {})
-                }
-              ),
+              controlSlot: /* @__PURE__ */ (0, import_jsx_runtime286.jsx)(StyledRadioInput, { $size: size }),
               description,
               disabled,
               hideLabel,