@wistia/ui 0.15.14-beta.1e41934b.72b042b → 0.15.14-beta.701deb7c.dd1faf8

package/dist/index.d.mts

@@ -589,7 +589,7 @@ type BadgeProps = ComponentPropsWithoutRef<'div'> & {
     /**
      * The text to display in the `Badge`
      */
-    label: ReactNode;
+    label?: ReactNode;
     /**
      * The variant of the `Badge`
      */
@@ -610,7 +610,7 @@ declare const Badge: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProp
     /**
      * The text to display in the `Badge`
      */
-    label: ReactNode;
+    label?: ReactNode;
     /**
      * The variant of the `Badge`
      */
@@ -2373,6 +2373,10 @@ type FormFieldProps = ComponentPropsWithoutRef<'div'> & {
      * The name attribute of the field. It will map to the form data passed into `useFormState`.
      */
     name: string;
+    /**
+     * Use if label describes a required form component
+     */
+    required?: boolean;
     /**
      * A value that overrides the basic value. This should pair with `onChange`.
      */
@@ -2386,7 +2390,7 @@ type FormFieldProps = ComponentPropsWithoutRef<'div'> & {
  * FormField is a compound component that combines a label, form control, and optional description and error message.
  */
 declare const FormField: {
-    ({ children, description, error, id, label, labelPosition, name, value, ...props }: FormFieldProps): JSX$1.Element;
+    ({ children, description, error, id, label, labelPosition, name, required, value, ...props }: FormFieldProps): JSX$1.Element;
     displayName: string;
 };
 

package/dist/index.d.ts

@@ -589,7 +589,7 @@ type BadgeProps = ComponentPropsWithoutRef<'div'> & {
     /**
      * The text to display in the `Badge`
      */
-    label: ReactNode;
+    label?: ReactNode;
     /**
      * The variant of the `Badge`
      */
@@ -610,7 +610,7 @@ declare const Badge: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProp
     /**
      * The text to display in the `Badge`
      */
-    label: ReactNode;
+    label?: ReactNode;
     /**
      * The variant of the `Badge`
      */
@@ -2373,6 +2373,10 @@ type FormFieldProps = ComponentPropsWithoutRef<'div'> & {
      * The name attribute of the field. It will map to the form data passed into `useFormState`.
      */
     name: string;
+    /**
+     * Use if label describes a required form component
+     */
+    required?: boolean;
     /**
      * A value that overrides the basic value. This should pair with `onChange`.
      */
@@ -2386,7 +2390,7 @@ type FormFieldProps = ComponentPropsWithoutRef<'div'> & {
  * FormField is a compound component that combines a label, form control, and optional description and error message.
  */
 declare const FormField: {
-    ({ children, description, error, id, label, labelPosition, name, value, ...props }: FormFieldProps): JSX$1.Element;
+    ({ children, description, error, id, label, labelPosition, name, required, value, ...props }: FormFieldProps): JSX$1.Element;
     displayName: string;
 };
 

package/dist/index.mjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.15.14-beta.1e41934b.72b042b
+ * @license @wistia/ui v0.15.14-beta.701deb7c.dd1faf8
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -8255,7 +8255,7 @@ Avatar.displayName = "Avatar_UI";
 // src/components/Badge/Badge.tsx
 import { forwardRef as forwardRef4 } from "react";
 import styled10 from "styled-components";
-import { isNotNil as isNotNil9 } from "@wistia/type-guards";
+import { isNonEmptyString as isNonEmptyString2, isNotNil as isNotNil9 } from "@wistia/type-guards";
 import { jsx as jsx205, jsxs as jsxs12 } from "react/jsx-runtime";
 var StyledBadge = styled10.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
@@ -8296,7 +8296,7 @@ var Badge = forwardRef4(
         $variant: variant,
         children: [
           hasIcon ? icon : null,
-          /* @__PURE__ */ jsx205("span", { children: label })
+          isNonEmptyString2(label) && /* @__PURE__ */ jsx205("span", { children: label })
         ]
       }
     );
@@ -9361,7 +9361,7 @@ var Center = forwardRef9(
 Center.displayName = "Center_UI";
 
 // src/components/Checkbox/Checkbox.tsx
-import { isNonEmptyString as isNonEmptyString3, isNotUndefined as isNotUndefined7 } from "@wistia/type-guards";
+import { isNonEmptyString as isNonEmptyString4, isNotUndefined as isNotUndefined7 } from "@wistia/type-guards";
 import { forwardRef as forwardRef12, useId as useId2 } from "react";
 import styled27, { css as css26 } from "styled-components";
 
@@ -9491,7 +9491,7 @@ import { isArray } from "@wistia/type-guards";
 // src/components/FormGroup/FormGroup.tsx
 import styled25 from "styled-components";
 import { useRef as useRef7 } from "react";
-import { isNonEmptyString as isNonEmptyString2, isNotNil as isNotNil16 } from "@wistia/type-guards";
+import { isNonEmptyString as isNonEmptyString3, isNotNil as isNotNil16 } from "@wistia/type-guards";
 
 // src/components/Stack/Stack.tsx
 import { forwardRef as forwardRef10 } from "react";
@@ -9546,8 +9546,8 @@ var FormGroup = ({
   ...props
 }) => {
   const ref = useRef7(null);
-  const hasLabel = isNotNil16(label) && isNonEmptyString2(label);
-  const hasDescription = isNotNil16(description) && isNonEmptyString2(description);
+  const hasLabel = isNotNil16(label) && isNonEmptyString3(label);
+  const hasDescription = isNotNil16(description) && isNonEmptyString3(description);
   return /* @__PURE__ */ jsxs17(
     Stack,
     {
@@ -9849,7 +9849,7 @@ var Checkbox = forwardRef12(
     ...props
   }, ref) => {
     const generatedId = useId2();
-    const computedId = isNonEmptyString3(id) ? id : `wistia-ui-checkbox-${generatedId}`;
+    const computedId = isNonEmptyString4(id) ? id : `wistia-ui-checkbox-${generatedId}`;
     const checkboxGroupContext = useCheckboxGroup();
     const contextName = checkboxGroupContext?.name;
     const contextOnChange = checkboxGroupContext?.onChange;
@@ -11318,7 +11318,7 @@ import { useCallback as useCallback12 } from "react";
 // src/components/Switch/Switch.tsx
 import { forwardRef as forwardRef14, useId as useId3 } from "react";
 import styled43, { css as css28 } from "styled-components";
-import { isNonEmptyString as isNonEmptyString4 } from "@wistia/type-guards";
+import { isNonEmptyString as isNonEmptyString5 } from "@wistia/type-guards";
 import { jsx as jsx245, jsxs as jsxs28 } from "react/jsx-runtime";
 var switchHeightMap = {
   sm: 16,
@@ -11410,7 +11410,7 @@ var Switch = forwardRef14(
     ...props
   }, ref) => {
     const generatedId = useId3();
-    const computedId = isNonEmptyString4(id) ? id : `wistia-ui-switch-${generatedId}`;
+    const computedId = isNonEmptyString5(id) ? id : `wistia-ui-switch-${generatedId}`;
     return /* @__PURE__ */ jsxs28(
       StyledSwitchWrapper,
       {
@@ -12433,7 +12433,7 @@ import { isArray as isArray2, isString as isString3 } from "@wistia/type-guards"
 // src/components/Tag/Tag.tsx
 import { forwardRef as forwardRef16 } from "react";
 import styled49 from "styled-components";
-import { isNil as isNil15, isNotNil as isNotNil19, isNonEmptyString as isNonEmptyString5 } from "@wistia/type-guards";
+import { isNil as isNil15, isNotNil as isNotNil19, isNonEmptyString as isNonEmptyString6 } from "@wistia/type-guards";
 import { Fragment as Fragment7, jsx as jsx255, jsxs as jsxs33 } from "react/jsx-runtime";
 var TagLabel = styled49.a`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
@@ -12552,7 +12552,7 @@ var RemoveButton = ({ onClickRemove, onClickRemoveLabel, colorScheme }) => {
 var Tag = forwardRef16(
   ({ onClickRemove, colorScheme = "inherit", href, icon, label, onClickRemoveLabel, ...props }, ref) => {
     const hasIcon = isNotNil19(icon);
-    const labelProps = isNotNil19(href) && isNonEmptyString5(href) ? { href, as: "a" } : { as: "span" };
+    const labelProps = isNotNil19(href) && isNonEmptyString6(href) ? { href, as: "a" } : { as: "span" };
     return /* @__PURE__ */ jsxs33(
       StyledTag,
       {
@@ -14175,7 +14175,7 @@ import { isNotNil as isNotNil26 } from "@wistia/type-guards";
 
 // src/components/EditableText/EditableTextRoot.tsx
 import { createContext as createContext7, useMemo as useMemo13, useState as useState19, useCallback as useCallback16, useId as useId4 } from "react";
-import { isNonEmptyString as isNonEmptyString6 } from "@wistia/type-guards";
+import { isNonEmptyString as isNonEmptyString7 } from "@wistia/type-guards";
 import styled63 from "styled-components";
 import { jsx as jsx277 } from "react/jsx-runtime";
 var StyledEditableTextRoot = styled63.div`
@@ -14210,7 +14210,7 @@ var EditableTextRoot = ({
   const [isEditing, setIsEditing] = useState19(false);
   const value = isControlled ? controlledValue : internalValue;
   const generatedId = useId4();
-  const computedId = isNonEmptyString6(id) ? id : `wistia-ui-editable-text-${generatedId}`;
+  const computedId = isNonEmptyString7(id) ? id : `wistia-ui-editable-text-${generatedId}`;
   const handleSetIsEditing = useCallback16(
     (editing) => {
       if (editing && !isEditing) {
@@ -14787,6 +14787,7 @@ var FormField = ({
   label,
   labelPosition,
   name,
+  required = false,
   value,
   ...props
 }) => {
@@ -14836,7 +14837,14 @@ var FormField = ({
       ...props,
       "data-label-position": labelPosition ?? formState.labelPosition,
       children: [
-        !isIntegratedLabel && /* @__PURE__ */ jsx283(Label, { htmlFor: computedId, children: label }),
+        !isIntegratedLabel && /* @__PURE__ */ jsx283(
+          Label,
+          {
+            htmlFor: computedId,
+            required,
+            children: label
+          }
+        ),
         isNotNil28(description) ? /* @__PURE__ */ jsx283(FormControlLabelDescription, { id: descriptionId, children: description }) : null,
         cloneElement8(children, childProps),
         isNotNil28(computedError) ? /* @__PURE__ */ jsxs46(Fragment9, { children: [
@@ -15983,7 +15991,7 @@ var ProgressBar = ({
 ProgressBar.displayName = "ProgressBar_UI";
 
 // src/components/Radio/Radio.tsx
-import { isNonEmptyString as isNonEmptyString7, isNotUndefined as isNotUndefined13 } from "@wistia/type-guards";
+import { isNonEmptyString as isNonEmptyString8, isNotUndefined as isNotUndefined13 } from "@wistia/type-guards";
 import { forwardRef as forwardRef27, useId as useId5 } from "react";
 import styled82, { css as css41 } from "styled-components";
 import { jsx as jsx300, jsxs as jsxs55 } from "react/jsx-runtime";
@@ -16083,7 +16091,7 @@ var Radio = forwardRef27(
     ...props
   }, ref) => {
     const generatedId = useId5();
-    const computedId = isNonEmptyString7(id) ? id : `wistia-ui-radio-${generatedId}`;
+    const computedId = isNonEmptyString8(id) ? id : `wistia-ui-radio-${generatedId}`;
     const radioGroupContext = useRadioGroup();
     const contextName = radioGroupContext?.name;
     const contextOnChange = radioGroupContext?.onChange;
@@ -16137,7 +16145,7 @@ import { forwardRef as forwardRef29 } from "react";
 // src/components/RadioCard/RadioCardRoot.tsx
 import { forwardRef as forwardRef28, useId as useId6 } from "react";
 import styled83, { css as css42 } from "styled-components";
-import { isNonEmptyString as isNonEmptyString8, isNotUndefined as isNotUndefined14 } from "@wistia/type-guards";
+import { isNonEmptyString as isNonEmptyString9, isNotUndefined as isNotUndefined14 } from "@wistia/type-guards";
 import { jsx as jsx301, jsxs as jsxs56 } from "react/jsx-runtime";
 var checkedStyles = css42`
   --wui-radio-card-border-color: var(--wui-color-focus-ring);
@@ -16259,7 +16267,7 @@ var RadioCardRoot = forwardRef28(
     ...props
   }, ref) => {
     const generatedId = useId6();
-    const computedId = isNonEmptyString8(id) ? id : `wistia-ui-radio-${generatedId}`;
+    const computedId = isNonEmptyString9(id) ? id : `wistia-ui-radio-${generatedId}`;
     const radioGroupContext = useRadioGroup();
     const contextName = radioGroupContext?.name;
     const contextOnChange = radioGroupContext?.onChange;
@@ -16856,6 +16864,7 @@ var StyledTrigger2 = styled91(Trigger3)`
   outline: 1px solid var(--wui-input-color-border);
   outline-offset: -2px;
   border-radius: var(--wui-input-border-radius);
+  min-width: 200px;
   text-align: left;
   display: inline-flex;
   align-items: center;
@@ -16999,7 +17008,6 @@ var StyledItem = styled92(Item)`
   align-items: ${({ $checkmarkVerticalAlign }) => $checkmarkVerticalAlign === "center" ? "center" : "flex-start"};
   background-color: transparent;
   display: flex;
-  gap: var(--wui-space-01);
   padding: var(--wui-select-option-padding);
   justify-content: space-between;
   font-size: var(--font-size);
@@ -17077,7 +17085,7 @@ import {
   Thumb as RadixSliderThumb
 } from "@radix-ui/react-slider";
 import styled94 from "styled-components";
-import { isNonEmptyString as isNonEmptyString9 } from "@wistia/type-guards";
+import { isNonEmptyString as isNonEmptyString10 } from "@wistia/type-guards";
 import { jsx as jsx312, jsxs as jsxs64 } from "react/jsx-runtime";
 var SliderContainer = styled94.div`
   --wui-slider-track-color: var(--wui-gray-6);
@@ -17156,7 +17164,7 @@ var Slider = ({
   "data-testid": dataTestId = "ui-slider",
   ...otherProps
 }) => {
-  if (!(isNonEmptyString9(ariaLabel) || isNonEmptyString9(ariaLabelledby))) {
+  if (!(isNonEmptyString10(ariaLabel) || isNonEmptyString10(ariaLabelledby))) {
     throw new Error(
       "UI Slider: Sliders should have an accessible name. Add a label using the aria-label or aria-labelledby prop."
     );