@wistia/ui 0.6.23 → 0.6.24

package/dist/index.d.mts

@@ -399,7 +399,7 @@ type ActionButtonProps = {
     variant?: 'default' | 'gated' | 'menu-down' | 'menu-up';
 } & (Omit<ButtonAsButtonProps, 'fullWidth' | 'isLoading' | 'leftIcon' | 'rightIcon' | 'size' | 'unstyled' | 'variant'> | Omit<ButtonAsLinkProps, 'fullWidth' | 'isLoading' | 'leftIcon' | 'rightIcon' | 'size' | 'unstyled' | 'variant'>);
 /**
- * Action Button component is used as one of a group of main actions on the page.
+ * Action Button component is used as one of a group of main actions on the page. It composes [Button]().
  */
 declare const ActionButton: react.ForwardRefExoticComponent<(Omit<{
     /**
@@ -488,7 +488,7 @@ type BadgeProps = ComponentPropsWithoutRef<'div'> & {
     /**
      * The text to display in the `Badge`
      */
-    label: string;
+    label: ReactNode;
 };
 /**
  * A `Badge` is a compact label, with optional icon, to convey status or context.
@@ -505,7 +505,7 @@ declare const Badge: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProp
     /**
      * The text to display in the `Badge`
      */
-    label: string;
+    label: ReactNode;
 } & react.RefAttributes<HTMLDivElement>>;
 
 type UnknownRecord = Record<string, unknown>;

package/dist/index.d.ts

@@ -399,7 +399,7 @@ type ActionButtonProps = {
     variant?: 'default' | 'gated' | 'menu-down' | 'menu-up';
 } & (Omit<ButtonAsButtonProps, 'fullWidth' | 'isLoading' | 'leftIcon' | 'rightIcon' | 'size' | 'unstyled' | 'variant'> | Omit<ButtonAsLinkProps, 'fullWidth' | 'isLoading' | 'leftIcon' | 'rightIcon' | 'size' | 'unstyled' | 'variant'>);
 /**
- * Action Button component is used as one of a group of main actions on the page.
+ * Action Button component is used as one of a group of main actions on the page. It composes [Button]().
  */
 declare const ActionButton: react.ForwardRefExoticComponent<(Omit<{
     /**
@@ -488,7 +488,7 @@ type BadgeProps = ComponentPropsWithoutRef<'div'> & {
     /**
      * The text to display in the `Badge`
      */
-    label: string;
+    label: ReactNode;
 };
 /**
  * A `Badge` is a compact label, with optional icon, to convey status or context.
@@ -505,7 +505,7 @@ declare const Badge: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProp
     /**
      * The text to display in the `Badge`
      */
-    label: string;
+    label: ReactNode;
 } & react.RefAttributes<HTMLDivElement>>;
 
 type UnknownRecord = Record<string, unknown>;

package/dist/index.mjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.6.23
+ * @license @wistia/ui v0.6.24
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -7559,18 +7559,33 @@ var inputSizeSmall = css20`
   height: 14px;
   min-width: 14px;
   min-height: 14px;
+
+  svg {
+    width: 7px;
+    height: 7px;
+  }
 `;
 var inputSizeMedium = css20`
   width: 16px;
   height: 16px;
   min-width: 16px;
   min-height: 16px;
+
+  svg {
+    width: 9px;
+    height: 9px;
+  }
 `;
 var inputSizeLarge = css20`
   width: 20px;
   height: 20px;
   min-width: 20px;
   min-height: 20px;
+
+  svg {
+    width: 11px;
+    height: 11px;
+  }
 `;
 var getSizeCss = (size) => {
   if (size === "sm") return inputSizeSmall;
@@ -7592,9 +7607,10 @@ var StyledCheckboxInput = styled18.div`
   display: grid;
   place-content: center;
   align-self: flex-start;
+  border-width: 1px;
+  border-style: solid;
+  border-color: ${({ $disabled }) => $disabled ? "var(--wui-color-bg-border-disabled)" : "var(--wui-color-border)"};
   background-color: ${({ $disabled }) => $disabled ? "var(--wui-color-bg-surface-disabled)" : "var(--wui-color-bg-surface)"};
-  border: 1px solid
-    ${({ $disabled }) => $disabled ? "var(--wui-color-icon-disabled)" : "var(--wui-color-border)"};
 
   /* checkmark icon */
   svg {
@@ -7610,6 +7626,7 @@ var StyledHiddenCheckboxInput = styled18.input`
 
   /* 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)"};
   }
 
@@ -10267,17 +10284,17 @@ var RadioIcon = () => /* @__PURE__ */ jsx241(
   "svg",
   {
     fill: "inherit",
-    height: "12",
-    viewBox: "0 0 12 12",
-    width: "12",
+    height: "1",
+    viewBox: "0 0 1 1",
+    width: "1",
     xmlns: "http://www.w3.org/2000/svg",
     children: /* @__PURE__ */ jsx241(
       "circle",
       {
-        cx: "6",
-        cy: "6",
+        cx: "0.5",
+        cy: "0.5",
         fill: "currentColor",
-        r: "4"
+        r: "0.5"
       }
     )
   }
@@ -10287,18 +10304,33 @@ var inputSizeSmall2 = css30`
   height: 14px;
   min-width: 14px;
   min-height: 14px;
+
+  svg {
+    width: 7px;
+    height: 7px;
+  }
 `;
 var inputSizeMedium2 = css30`
   width: 16px;
   height: 16px;
   min-width: 16px;
   min-height: 16px;
+
+  svg {
+    width: 8px;
+    height: 8px;
+  }
 `;
 var inputSizeLarge2 = css30`
   width: 20px;
   height: 20px;
   min-width: 20px;
   min-height: 20px;
+
+  svg {
+    width: 10px;
+    height: 10px;
+  }
 `;
 var getSizeCss2 = (size) => {
   if (size === "sm") return inputSizeSmall2;
@@ -10320,9 +10352,10 @@ var StyledRadioInput = styled49.div`
   display: grid;
   place-content: center;
   align-self: flex-start;
+  border-width: 1px;
+  border-style: solid;
+  border-color: ${({ $disabled }) => $disabled ? "var(--wui-color-bg-border-disabled)" : "var(--wui-color-border)"};
   background-color: ${({ $disabled }) => $disabled ? "var(--wui-color-bg-surface-disabled)" : "var(--wui-color-bg-surface)"};
-  border: 1px solid
-    ${({ $disabled }) => $disabled ? "var(--wui-color-icon-disabled)" : "var(--wui-color-border)"};
 
   /* radio button circle icon */
   svg {
@@ -10336,9 +10369,9 @@ var StyledRadioInput = styled49.div`
 var StyledHiddenRadioInput = styled49.input`
   ${visuallyHiddenStyle}
 
-  /* toggles display of faux-input background-color */
+  /* toggles display of faux-input border-color */
   &:checked + label [data-wui-faux-input='true'] {
-    border-color: ${({ disabled }) => disabled ? "var(--wui-color-bg-surface-disabled)" : "var(--wui-color-bg-fill)"};
+    border-color: ${({ disabled }) => disabled ? "var(--wui-color-bg-border-disabled)" : "var(--wui-color-bg-fill)"};
   }
 
   /* toggles display of RadioIcon */