@wistia/ui 0.6.20-beta.f693d494.df8ca33 → 0.6.21

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.6.20-beta.f693d494.df8ca33
+ * @license @wistia/ui v0.6.21
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -7648,12 +7648,24 @@ var disabledStyle3 = import_styled_components33.css`
   cursor: not-allowed;
   opacity: 0.5;
 `;
+var inputSizeSmall = import_styled_components33.css`
+  width: 14px;
+  height: 14px;
+  min-width: 14px;
+  min-height: 14px;
+`;
 var inputSizeMedium = import_styled_components33.css`
   width: 16px;
   height: 16px;
   min-width: 16px;
   min-height: 16px;
 `;
+var inputSizeLarge = import_styled_components33.css`
+  width: 20px;
+  height: 20px;
+  min-width: 20px;
+  min-height: 20px;
+`;
 var StyledCheckboxWrapper = import_styled_components33.default.div`
   display: flex;
   margin: 0;
@@ -7663,9 +7675,13 @@ var StyledCheckboxWrapper = import_styled_components33.default.div`
 
   ${({ disabled }) => disabled && disabledStyle3};
 `;
+var getSizeCss = (size) => {
+  if (size === "sm") return inputSizeSmall;
+  if (size === "lg") return inputSizeLarge;
+  return inputSizeMedium;
+};
 var StyledCheckboxInput = import_styled_components33.default.div`
-  /* TODO prop-ify sizes */
-  ${inputSizeMedium}
+  ${({ $size }) => getSizeCss($size)}
   line-height: 0;
   margin: 0;
   border: 1px solid var(--wui-color-border);
@@ -7697,7 +7713,19 @@ var StyledHiddenCheckboxInput = import_styled_components33.default.input`
   }
 `;
 var Checkbox = (0, import_react18.forwardRef)(
-  ({ checked, disabled = false, id, label, description, name, onChange, value, ...props }, ref) => {
+  ({
+    checked,
+    disabled = false,
+    id,
+    label,
+    description,
+    name,
+    onChange,
+    size = "md",
+    value,
+    required = false,
+    ...props
+  }, ref) => {
     const generatedId = (0, import_react18.useId)();
     const computedId = (0, import_type_guards21.isNonEmptyString)(id) ? id : `wistia-ui-checkbox-${generatedId}`;
     return /* @__PURE__ */ (0, import_jsx_runtime201.jsxs)(
@@ -7716,6 +7744,7 @@ var Checkbox = (0, import_react18.forwardRef)(
               id: computedId,
               name,
               onChange,
+              required,
               type: "checkbox",
               value
             }
@@ -7723,7 +7752,14 @@ var Checkbox = (0, import_react18.forwardRef)(
           /* @__PURE__ */ (0, import_jsx_runtime201.jsx)(
             FormControlLabel,
             {
-              controlSlot: /* @__PURE__ */ (0, import_jsx_runtime201.jsx)(StyledCheckboxInput, { "data-wui-faux-input": "true", children: /* @__PURE__ */ (0, import_jsx_runtime201.jsx)(CheckIcon, {}) }),
+              controlSlot: /* @__PURE__ */ (0, import_jsx_runtime201.jsx)(
+                StyledCheckboxInput,
+                {
+                  $size: size,
+                  "data-wui-faux-input": "true",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime201.jsx)(CheckIcon, {})
+                }
+              ),
               description,
               htmlFor: computedId,
               label
@@ -10353,13 +10389,33 @@ var StyledHiddenRadioInput = import_styled_components65.default.input`
     display: block;
   }
 `;
-var StyledRadioInput = import_styled_components65.default.div`
-  line-height: 0;
-  margin: 0;
+var inputSizeSmall2 = import_styled_components65.css`
+  width: 14px;
+  height: 14px;
+  min-width: 14px;
+  min-height: 14px;
+`;
+var inputSizeMedium2 = import_styled_components65.css`
   width: 16px;
-  min-width: 16px;
   height: 16px;
+  min-width: 16px;
   min-height: 16px;
+`;
+var inputSizeLarge2 = import_styled_components65.css`
+  width: 20px;
+  height: 20px;
+  min-width: 20px;
+  min-height: 20px;
+`;
+var getSizeCss2 = (size) => {
+  if (size === "sm") return inputSizeSmall2;
+  if (size === "lg") return inputSizeLarge2;
+  return inputSizeMedium2;
+};
+var StyledRadioInput = import_styled_components65.default.div`
+  ${({ $size }) => getSizeCss2($size)}
+  line-height: 0;
+  margin: 0;
   border: 1px solid var(--wui-color-border);
   border-radius: 50%; /* TODO --wui-border-radius-rounded */
   background-color: var(--wui-color-bg-fill-white);
@@ -10397,7 +10453,9 @@ var Radio = (0, import_react43.forwardRef)(
     description,
     name,
     onChange,
+    size = "md",
     value = "false",
+    required = false,
     ...props
   }, ref) => {
     const generatedId = (0, import_react43.useId)();
@@ -10418,6 +10476,7 @@ var Radio = (0, import_react43.forwardRef)(
               id: computedId,
               name,
               onChange,
+              required,
               type: "radio",
               value
             }
@@ -10425,7 +10484,14 @@ var Radio = (0, import_react43.forwardRef)(
           /* @__PURE__ */ (0, import_jsx_runtime241.jsx)(
             FormControlLabel,
             {
-              controlSlot: /* @__PURE__ */ (0, import_jsx_runtime241.jsx)(StyledRadioInput, { "data-wui-faux-input": "true", children: /* @__PURE__ */ (0, import_jsx_runtime241.jsx)(RadioIcon, {}) }),
+              controlSlot: /* @__PURE__ */ (0, import_jsx_runtime241.jsx)(
+                StyledRadioInput,
+                {
+                  $size: size,
+                  "data-wui-faux-input": "true",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime241.jsx)(RadioIcon, {})
+                }
+              ),
               description,
               htmlFor: computedId,
               label
@@ -11337,10 +11403,17 @@ var TagLabel = import_styled_components83.default.a`
   font-weight: var(--wui-typography-label-4-weight);
   line-height: var(--wui-typography-label-4-line-height);
   border-radius: var(--wui-border-radius-01);
+  display: flex;
   align-items: center;
   color: var(--wui-color-text);
   text-decoration: none;
   padding: var(--wui-space-01);
+  gap: var(--wui-space-01);
+
+  svg {
+    height: 12px;
+    width: 12px;
+  }
 
   :not(:only-child) {
     padding-right: var(--wui-space-01);
@@ -11438,7 +11511,16 @@ var RemoveButton = ({ onClickRemove, onClickRemoveLabel, colorScheme }) => {
   ] });
 };
 var Tag = (0, import_react59.forwardRef)(
-  ({ onClickRemove, colorScheme = "inherit", href, label, onClickRemoveLabel, ...otherProps }, ref) => {
+  ({
+    onClickRemove,
+    colorScheme = "inherit",
+    href,
+    icon,
+    label,
+    onClickRemoveLabel,
+    ...otherProps
+  }, ref) => {
+    const hasIcon = (0, import_type_guards44.isNotNil)(icon);
     const labelProps = (0, import_type_guards44.isNotNil)(href) && (0, import_type_guards44.isNonEmptyString)(href) ? { href, as: "a" } : { as: "span" };
     return /* @__PURE__ */ (0, import_jsx_runtime261.jsxs)(
       StyledTag,
@@ -11447,12 +11529,15 @@ var Tag = (0, import_react59.forwardRef)(
         $colorScheme: colorScheme,
         ...otherProps,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime261.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime261.jsxs)(
             TagLabel,
             {
               ...labelProps,
               $colorScheme: colorScheme,
-              children: label
+              children: [
+                hasIcon ? icon : null,
+                label
+              ]
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime261.jsx)(