@wistia/ui 0.6.2 → 0.6.3-beta.4625fea3.f2024d4

package/dist/index.d.mts

@@ -1,6 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
 import { ReactNode, Dispatch, SetStateAction, ComponentPropsWithoutRef, JSX, ComponentPropsWithRef, MouseEvent, ElementType, ChangeEvent, ForwardedRef, Ref, InputHTMLAttributes, RefObject, ForwardRefExoticComponent, RefAttributes } from 'react';
+import * as react_router from 'react-router';
 import { LinkProps as LinkProps$1 } from 'react-router-dom';
 import { CollapsibleContentProps as CollapsibleContentProps$1 } from '@radix-ui/react-collapsible';
 import * as styled_components from 'styled-components';
@@ -261,7 +262,7 @@ type BaseButtonProps = {
      */
     variant?: ButtonVariants;
 };
-type ButtonAsLinkProps = BaseButtonProps & ComponentPropsWithRef<'a'> & {
+type ButtonAsLinkProps = BaseButtonProps & ComponentPropsWithRef<'a'> & LinkProps & {
     href: string | undefined;
     children: ReactNode;
     /**
@@ -287,7 +288,63 @@ type ButtonProps = ButtonAsButtonProps | ButtonAsLinkProps;
  * action, or performing a delete operation. It replaces the HTML `<button>` element,
  * unless an `href` attribute is passed, in which it will render an `<a>` element.
  */
-declare const Button: react.ForwardRefExoticComponent<(Omit<ButtonAsLinkProps, "ref"> | Omit<ButtonAsButtonProps, "ref">) & react.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+declare const Button: react.ForwardRefExoticComponent<(Omit<BaseButtonProps & Omit<react.DetailedHTMLProps<react.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & {
+    ref?: ((instance: HTMLAnchorElement | null) => void | react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | react.RefObject<HTMLAnchorElement> | null | undefined;
+} & {
+    beforeAction?: (() => Promise<void>) | (() => void);
+    children: ReactNode;
+    colorScheme?: ColorSchemeTypes;
+    disabled?: boolean;
+    leftIcon?: JSX.Element | undefined;
+    rightIcon?: JSX.Element | undefined;
+    type?: LinkTypes | undefined;
+    underline?: boolean;
+} & Omit<react_router.LinkProps, "to"> & {
+    href: string | undefined;
+    type?: LinkTypes;
+} & {
+    href: string | undefined;
+    children: ReactNode;
+    /**
+     * This just allows pathrough to beforeAction for link
+     * @ignore
+     */
+    beforeAction?: (() => Promise<void>) | (() => void);
+    /**
+     * This just allows pathrough to beforeAction for link
+     * @ignore
+     */
+    type?: LinkTypes;
+}, "ref"> | Omit<BaseButtonProps & Omit<react.DetailedHTMLProps<react.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & {
+    ref?: ((instance: HTMLAnchorElement | null) => void | react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | react.RefObject<HTMLAnchorElement> | null | undefined;
+} & {
+    beforeAction?: (() => Promise<void>) | (() => void);
+    children: ReactNode;
+    colorScheme?: ColorSchemeTypes;
+    disabled?: boolean;
+    leftIcon?: JSX.Element | undefined;
+    rightIcon?: JSX.Element | undefined;
+    type?: LinkTypes | undefined;
+    underline?: boolean;
+} & Omit<react.DetailedHTMLProps<react.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void | react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | react.RefObject<HTMLButtonElement> | null | undefined;
+} & {
+    href?: never;
+    type?: "button" | "reset" | "submit";
+} & {
+    href: string | undefined;
+    children: ReactNode;
+    /**
+     * This just allows pathrough to beforeAction for link
+     * @ignore
+     */
+    beforeAction?: (() => Promise<void>) | (() => void);
+    /**
+     * This just allows pathrough to beforeAction for link
+     * @ignore
+     */
+    type?: LinkTypes;
+}, "ref"> | Omit<ButtonAsButtonProps, "ref">) & react.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
 
 type ToastProps = ComponentPropsWithoutRef<'div'> & {
     /**
@@ -990,6 +1047,11 @@ type FormProps<T> = Omit<ComponentPropsWithoutRef<'form'>, 'action' | 'aria-labe
      * The action to be performed when the form is submitted. It can be asynchronous.
      */
     action?: Action;
+    /**
+     * Sets the default label position for all `FormFields` within the form. Will be ignored if labelPosition
+     * is set on the `FormField` itself.
+     */
+    labelPosition?: 'block' | 'inline';
     /**
      * The form elements used in the form
      */
@@ -1015,7 +1077,7 @@ type FormProps<T> = Omit<ComponentPropsWithoutRef<'form'>, 'action' | 'aria-labe
  * x
  */
 declare const FormComponent: {
-    <T>({ children, action, values, validate, fullWidth, ...props }: FormProps<T>, forwardedRef?: Ref<HTMLFormElement>): JSX.Element;
+    <T>({ children, action, values, labelPosition, validate, fullWidth, ...props }: FormProps<T>, forwardedRef?: Ref<HTMLFormElement>): JSX.Element;
     displayName: string;
 };
 declare const Form: <T>(props: FormProps<T> & {
@@ -1052,12 +1114,16 @@ type FormFieldProps = ComponentPropsWithoutRef<'div'> & {
      * A value that overrides the basic value. This should pair with `onChange`.
      */
     value?: string;
+    /**
+     * Setting to `inline` will have the label and input appear on the same line. Setting to `block` will have the label above the input.
+     */
+    labelPosition?: 'block' | 'inline';
 };
 /**
  * Component description goes here
  */
 declare const FormField: {
-    ({ children, label, name, error, value, ...props }: FormFieldProps): JSX.Element;
+    ({ children, label, name, error, value, labelPosition, id, ...props }: FormFieldProps): JSX.Element;
     displayName: string;
 };
 
@@ -1633,6 +1699,57 @@ type MenuItemButtonProps = ButtonProps & {
 
 declare const MenuItem: react.ForwardRefExoticComponent<(Omit<DropdownMenuItemProps & BaseButtonProps & Omit<react.DetailedHTMLProps<react.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & {
     ref?: ((instance: HTMLAnchorElement | null) => void | react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | react.RefObject<HTMLAnchorElement> | null | undefined;
+} & {
+    beforeAction?: (() => Promise<void>) | (() => void);
+    children: react.ReactNode;
+    colorScheme?: ColorSchemeTypes;
+    disabled?: boolean;
+    leftIcon?: react.JSX.Element | undefined;
+    rightIcon?: react.JSX.Element | undefined;
+    type?: LinkTypes | undefined;
+    underline?: boolean;
+} & Omit<react_router.LinkProps, "to"> & {
+    href: string | undefined;
+    type?: LinkTypes;
+} & {
+    href: string | undefined;
+    children: react.ReactNode;
+    beforeAction?: (() => Promise<void>) | (() => void);
+    type?: LinkTypes;
+} & {
+    appearance?: "dangerous" | "default" | "gated";
+    badge?: react.JSX.Element;
+    children?: react.ReactNode;
+    command?: react.ReactNode;
+    icon?: ButtonProps["leftIcon"];
+    leftIcon?: ButtonProps["leftIcon"];
+    rightIcon?: ButtonProps["rightIcon"];
+    fullWidth?: never;
+    asChild?: never;
+    variant?: never;
+    size?: never;
+    unstyled?: never;
+} & {
+    /**
+     * Treats the menu item as a link when provided
+     */
+    href?: MenuItemButtonProps["href"];
+}, "ref"> | Omit<DropdownMenuItemProps & BaseButtonProps & Omit<react.DetailedHTMLProps<react.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & {
+    ref?: ((instance: HTMLAnchorElement | null) => void | react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | react.RefObject<HTMLAnchorElement> | null | undefined;
+} & {
+    beforeAction?: (() => Promise<void>) | (() => void);
+    children: react.ReactNode;
+    colorScheme?: ColorSchemeTypes;
+    disabled?: boolean;
+    leftIcon?: react.JSX.Element | undefined;
+    rightIcon?: react.JSX.Element | undefined;
+    type?: LinkTypes | undefined;
+    underline?: boolean;
+} & Omit<react.DetailedHTMLProps<react.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void | react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | react.RefObject<HTMLButtonElement> | null | undefined;
+} & {
+    href?: never;
+    type?: "button" | "reset" | "submit";
 } & {
     href: string | undefined;
     children: react.ReactNode;
@@ -2425,7 +2542,7 @@ type SelectOptionProps = {
      */
     children: ReactNode;
     /**
-     * The value to set
+     * The value to set. Leave this empty to define a placeholder option.
      */
     value: string;
     /**

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
 import { ReactNode, Dispatch, SetStateAction, ComponentPropsWithoutRef, JSX, ComponentPropsWithRef, MouseEvent, ElementType, ChangeEvent, ForwardedRef, Ref, InputHTMLAttributes, RefObject, ForwardRefExoticComponent, RefAttributes } from 'react';
+import * as react_router from 'react-router';
 import { LinkProps as LinkProps$1 } from 'react-router-dom';
 import { CollapsibleContentProps as CollapsibleContentProps$1 } from '@radix-ui/react-collapsible';
 import * as styled_components from 'styled-components';
@@ -261,7 +262,7 @@ type BaseButtonProps = {
      */
     variant?: ButtonVariants;
 };
-type ButtonAsLinkProps = BaseButtonProps & ComponentPropsWithRef<'a'> & {
+type ButtonAsLinkProps = BaseButtonProps & ComponentPropsWithRef<'a'> & LinkProps & {
     href: string | undefined;
     children: ReactNode;
     /**
@@ -287,7 +288,63 @@ type ButtonProps = ButtonAsButtonProps | ButtonAsLinkProps;
  * action, or performing a delete operation. It replaces the HTML `<button>` element,
  * unless an `href` attribute is passed, in which it will render an `<a>` element.
  */
-declare const Button: react.ForwardRefExoticComponent<(Omit<ButtonAsLinkProps, "ref"> | Omit<ButtonAsButtonProps, "ref">) & react.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+declare const Button: react.ForwardRefExoticComponent<(Omit<BaseButtonProps & Omit<react.DetailedHTMLProps<react.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & {
+    ref?: ((instance: HTMLAnchorElement | null) => void | react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | react.RefObject<HTMLAnchorElement> | null | undefined;
+} & {
+    beforeAction?: (() => Promise<void>) | (() => void);
+    children: ReactNode;
+    colorScheme?: ColorSchemeTypes;
+    disabled?: boolean;
+    leftIcon?: JSX.Element | undefined;
+    rightIcon?: JSX.Element | undefined;
+    type?: LinkTypes | undefined;
+    underline?: boolean;
+} & Omit<react_router.LinkProps, "to"> & {
+    href: string | undefined;
+    type?: LinkTypes;
+} & {
+    href: string | undefined;
+    children: ReactNode;
+    /**
+     * This just allows pathrough to beforeAction for link
+     * @ignore
+     */
+    beforeAction?: (() => Promise<void>) | (() => void);
+    /**
+     * This just allows pathrough to beforeAction for link
+     * @ignore
+     */
+    type?: LinkTypes;
+}, "ref"> | Omit<BaseButtonProps & Omit<react.DetailedHTMLProps<react.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & {
+    ref?: ((instance: HTMLAnchorElement | null) => void | react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | react.RefObject<HTMLAnchorElement> | null | undefined;
+} & {
+    beforeAction?: (() => Promise<void>) | (() => void);
+    children: ReactNode;
+    colorScheme?: ColorSchemeTypes;
+    disabled?: boolean;
+    leftIcon?: JSX.Element | undefined;
+    rightIcon?: JSX.Element | undefined;
+    type?: LinkTypes | undefined;
+    underline?: boolean;
+} & Omit<react.DetailedHTMLProps<react.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void | react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | react.RefObject<HTMLButtonElement> | null | undefined;
+} & {
+    href?: never;
+    type?: "button" | "reset" | "submit";
+} & {
+    href: string | undefined;
+    children: ReactNode;
+    /**
+     * This just allows pathrough to beforeAction for link
+     * @ignore
+     */
+    beforeAction?: (() => Promise<void>) | (() => void);
+    /**
+     * This just allows pathrough to beforeAction for link
+     * @ignore
+     */
+    type?: LinkTypes;
+}, "ref"> | Omit<ButtonAsButtonProps, "ref">) & react.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
 
 type ToastProps = ComponentPropsWithoutRef<'div'> & {
     /**
@@ -990,6 +1047,11 @@ type FormProps<T> = Omit<ComponentPropsWithoutRef<'form'>, 'action' | 'aria-labe
      * The action to be performed when the form is submitted. It can be asynchronous.
      */
     action?: Action;
+    /**
+     * Sets the default label position for all `FormFields` within the form. Will be ignored if labelPosition
+     * is set on the `FormField` itself.
+     */
+    labelPosition?: 'block' | 'inline';
     /**
      * The form elements used in the form
      */
@@ -1015,7 +1077,7 @@ type FormProps<T> = Omit<ComponentPropsWithoutRef<'form'>, 'action' | 'aria-labe
  * x
  */
 declare const FormComponent: {
-    <T>({ children, action, values, validate, fullWidth, ...props }: FormProps<T>, forwardedRef?: Ref<HTMLFormElement>): JSX.Element;
+    <T>({ children, action, values, labelPosition, validate, fullWidth, ...props }: FormProps<T>, forwardedRef?: Ref<HTMLFormElement>): JSX.Element;
     displayName: string;
 };
 declare const Form: <T>(props: FormProps<T> & {
@@ -1052,12 +1114,16 @@ type FormFieldProps = ComponentPropsWithoutRef<'div'> & {
      * A value that overrides the basic value. This should pair with `onChange`.
      */
     value?: string;
+    /**
+     * Setting to `inline` will have the label and input appear on the same line. Setting to `block` will have the label above the input.
+     */
+    labelPosition?: 'block' | 'inline';
 };
 /**
  * Component description goes here
  */
 declare const FormField: {
-    ({ children, label, name, error, value, ...props }: FormFieldProps): JSX.Element;
+    ({ children, label, name, error, value, labelPosition, id, ...props }: FormFieldProps): JSX.Element;
     displayName: string;
 };
 
@@ -1633,6 +1699,57 @@ type MenuItemButtonProps = ButtonProps & {
 
 declare const MenuItem: react.ForwardRefExoticComponent<(Omit<DropdownMenuItemProps & BaseButtonProps & Omit<react.DetailedHTMLProps<react.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & {
     ref?: ((instance: HTMLAnchorElement | null) => void | react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | react.RefObject<HTMLAnchorElement> | null | undefined;
+} & {
+    beforeAction?: (() => Promise<void>) | (() => void);
+    children: react.ReactNode;
+    colorScheme?: ColorSchemeTypes;
+    disabled?: boolean;
+    leftIcon?: react.JSX.Element | undefined;
+    rightIcon?: react.JSX.Element | undefined;
+    type?: LinkTypes | undefined;
+    underline?: boolean;
+} & Omit<react_router.LinkProps, "to"> & {
+    href: string | undefined;
+    type?: LinkTypes;
+} & {
+    href: string | undefined;
+    children: react.ReactNode;
+    beforeAction?: (() => Promise<void>) | (() => void);
+    type?: LinkTypes;
+} & {
+    appearance?: "dangerous" | "default" | "gated";
+    badge?: react.JSX.Element;
+    children?: react.ReactNode;
+    command?: react.ReactNode;
+    icon?: ButtonProps["leftIcon"];
+    leftIcon?: ButtonProps["leftIcon"];
+    rightIcon?: ButtonProps["rightIcon"];
+    fullWidth?: never;
+    asChild?: never;
+    variant?: never;
+    size?: never;
+    unstyled?: never;
+} & {
+    /**
+     * Treats the menu item as a link when provided
+     */
+    href?: MenuItemButtonProps["href"];
+}, "ref"> | Omit<DropdownMenuItemProps & BaseButtonProps & Omit<react.DetailedHTMLProps<react.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & {
+    ref?: ((instance: HTMLAnchorElement | null) => void | react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | react.RefObject<HTMLAnchorElement> | null | undefined;
+} & {
+    beforeAction?: (() => Promise<void>) | (() => void);
+    children: react.ReactNode;
+    colorScheme?: ColorSchemeTypes;
+    disabled?: boolean;
+    leftIcon?: react.JSX.Element | undefined;
+    rightIcon?: react.JSX.Element | undefined;
+    type?: LinkTypes | undefined;
+    underline?: boolean;
+} & Omit<react.DetailedHTMLProps<react.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void | react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | react.RefObject<HTMLButtonElement> | null | undefined;
+} & {
+    href?: never;
+    type?: "button" | "reset" | "submit";
 } & {
     href: string | undefined;
     children: react.ReactNode;
@@ -2425,7 +2542,7 @@ type SelectOptionProps = {
      */
     children: ReactNode;
     /**
-     * The value to set
+     * The value to set. Leave this empty to define a placeholder option.
      */
     value: string;
     /**

package/dist/index.mjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.6.2
+ * @license @wistia/ui v0.6.3-beta.4625fea3.f2024d4
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -1192,7 +1192,7 @@ var typographyTokens = css7`
   --wui-typography-heading-2-family: var(--wui-typography-family-brand);
   --wui-typography-heading-2-line-height: 38px;
   --wui-typography-heading-2-size: 32px;
-  --wui-typography-heading-2-weight: var(--wui-typography-weight-brand-bold);
+  --wui-typography-heading-2-weight: var(--wui-typography-weight-brand-black);
 
   /* Heading 3 */
   --wui-typography-heading-3-family: var(--wui-typography-family-brand);
@@ -8044,9 +8044,18 @@ var FormContext = createContext2({
   values: {},
   errors: {},
   hasSubmitted: false,
-  formId: ""
+  formId: "",
+  labelPosition: "block"
 });
-var FormComponent = ({ children, action, values = {}, validate, fullWidth = false, ...props }, forwardedRef) => {
+var FormComponent = ({
+  children,
+  action,
+  values = {},
+  labelPosition = "block",
+  validate,
+  fullWidth = false,
+  ...props
+}, forwardedRef) => {
   const [errors, setErrors] = useState6({});
   const [hasSubmitted, setHasSubmitted] = useState6(false);
   const innerRef = useRef5();
@@ -8098,19 +8107,20 @@ var FormComponent = ({ children, action, values = {}, validate, fullWidth = fals
       values,
       errors,
       hasSubmitted,
-      formId: id
+      formId: id,
+      labelPosition
     };
-  }, [values, errors, id, hasSubmitted]);
+  }, [labelPosition, values, errors, id, hasSubmitted]);
   return (
     // @ts-expect-error - generic context providers are a giant pain
     /* @__PURE__ */ jsx189(FormContext.Provider, { value: context, children: /* @__PURE__ */ jsx189(
       Stack,
       {
-        gap: "space-05",
         ...props,
         ref,
         $fullWidth: fullWidth,
         as: StyledForm,
+        gap: "space-05",
         id,
         onBlur: handleBlur,
         onReset: handleReset,
@@ -8164,7 +8174,7 @@ import { useContext as useContext2, useRef as useRef6 } from "react";
 import { isArray, isNotUndefined as isNotUndefined6 } from "@wistia/type-guards";
 import { jsx as jsx190, jsxs as jsxs18 } from "react/jsx-runtime";
 var ErrorItem = ({ name, error, formId }) => {
-  return /* @__PURE__ */ jsx190("li", { children: /* @__PURE__ */ jsx190(Link, { href: `${formId}-${name}`, children: error }) }, name);
+  return /* @__PURE__ */ jsx190("li", { children: /* @__PURE__ */ jsx190(Link, { href: `#${formId}-${name}`, children: error }) }, name);
 };
 var FormErrorSummary = ({ description }) => {
   const ref = useRef6(null);
@@ -8260,14 +8270,30 @@ var CheckboxGroup = ({
 CheckboxGroup.displayName = "CheckboxGroup";
 
 // src/components/FormField/FormField.tsx
-import { jsx as jsx193, jsxs as jsxs20 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx193, jsxs as jsxs20 } from "react/jsx-runtime";
 var StyledFormField = styled33.div`
   --form-field-spacing: var(--wui-space-01);
+  --form-field-spacing-inline: var(--wui-space-02);
   --form-field-error-color: var(--wui-color-text-secondary-error);
 
-  display: flex;
-  flex-direction: column;
+  display: grid;
   gap: var(--form-field-spacing);
+  justify-content: flex-start;
+  align-items: center;
+  grid-template-columns: auto 1fr;
+  grid-template-rows: auto 1fr;
+
+  &[data-label-position='inline'] {
+    gap: var(--form-field-spacing-inline);
+    grid-template-columns: minmax(auto, 1fr) 1fr;
+    grid-template-rows: 1fr auto;
+  }
+
+  &[data-label-position='block'] {
+    gap: var(--form-field-spacing);
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr;
+  }
 `;
 var StyledErrorList = styled33.ul`
   margin: 0;
@@ -8307,18 +8333,20 @@ var FormField = ({
   name,
   error,
   value,
+  labelPosition,
+  id,
   ...props
 }) => {
   const formState = useContext3(FormContext);
   const checkboxGroup = useContext3(CheckboxGroupContext);
-  const id = props.id ?? `${formState.formId}-${name}`;
-  const isInlineLabel = children.type === Checkbox;
+  const isIntegratedLabel = children.type === Checkbox;
+  const computedId = id ?? `${formState.formId}-${name}`;
   const computedError = error ?? formState.errors[name];
   const defaultValue = formState.values[name];
   let childProps = {
     name,
-    id,
-    label: isInlineLabel ? label : void 0,
+    id: computedId,
+    label: isIntegratedLabel ? label : void 0,
     ...props
   };
   if (isUndefined4(value) && isNotUndefined7(defaultValue)) {
@@ -8342,21 +8370,31 @@ var FormField = ({
       name: computedName,
       onChange: handleChange,
       "aria-invalid": isNotNil11(error),
-      "aria-describedby": isNotNil11(error) ? `${id}-error` : void 0
+      "aria-describedby": isNotNil11(error) ? `${computedId}-error` : void 0
     };
   }
   Children4.only(children);
-  return /* @__PURE__ */ jsxs20(StyledFormField, { ...props, children: [
-    !isInlineLabel && /* @__PURE__ */ jsx193(Label, { htmlFor: id, children: label }),
-    cloneElement4(children, childProps),
-    isNotNil11(computedError) ? /* @__PURE__ */ jsx193(
-      ErrorMessages,
-      {
-        errors: computedError,
-        id: `${id}-error`
-      }
-    ) : null
-  ] });
+  return /* @__PURE__ */ jsxs20(
+    StyledFormField,
+    {
+      ...props,
+      "data-label-position": labelPosition ?? formState.labelPosition,
+      children: [
+        !isIntegratedLabel && /* @__PURE__ */ jsx193(Label, { htmlFor: computedId, children: label }),
+        cloneElement4(children, childProps),
+        isNotNil11(computedError) ? /* @__PURE__ */ jsxs20(Fragment6, { children: [
+          /* @__PURE__ */ jsx193("div", {}),
+          /* @__PURE__ */ jsx193(
+            ErrorMessages,
+            {
+              errors: computedError,
+              id: `${computedId}-error`
+            }
+          )
+        ] }) : null
+      ]
+    }
+  );
 };
 FormField.displayName = "FormField";
 
@@ -9854,7 +9892,7 @@ var TabItem = forwardRef21(
 TabItem.displayName = "TabItem";
 
 // src/components/Tabs/extractTabItems.ts
-import { Children as Children6, Fragment as Fragment6, isValidElement as isValidElement2 } from "react";
+import { Children as Children6, Fragment as Fragment7, isValidElement as isValidElement2 } from "react";
 var extractTabItems = (children) => {
   const tabItems = [];
   Children6.forEach(children, (child) => {
@@ -9863,7 +9901,7 @@ var extractTabItems = (children) => {
     }
     if (typeof child.type !== "string" && child.type.displayName === "Tab") {
       tabItems.push(child);
-    } else if (child.type === Fragment6) {
+    } else if (child.type === Fragment7) {
       const fragmentElement = child;
       tabItems.push(...extractTabItems(fragmentElement.props.children));
     } else if ((child.props.children ?? null) != null) {
@@ -10024,7 +10062,7 @@ Tab.displayName = "Tab";
 import { forwardRef as forwardRef24 } from "react";
 import styled54 from "styled-components";
 import { isNil as isNil15, isNotNil as isNotNil22, isNonEmptyString as isNonEmptyString4 } from "@wistia/type-guards";
-import { Fragment as Fragment7, jsx as jsx220, jsxs as jsxs34 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx220, jsxs as jsxs34 } from "react/jsx-runtime";
 var TagLabel = styled54.a`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   font-size: var(--wui-typography-label-4-size);
@@ -10109,7 +10147,7 @@ var RemoveButton = ({ onClickRemove, onClickRemoveLabel, colorScheme }) => {
       "for accessibility, onClickRemoveLabel must be provided if onClickRemove is provided"
     );
   }
-  return /* @__PURE__ */ jsxs34(Fragment7, { children: [
+  return /* @__PURE__ */ jsxs34(Fragment8, { children: [
     /* @__PURE__ */ jsx220(TagDivider, { $colorScheme: colorScheme }),
     /* @__PURE__ */ jsxs34(
       StyledRemoveButton,
@@ -10340,6 +10378,7 @@ var StyledContent3 = styled56(Content4)`
   border-radius: var(--wui-select-content-border-radius);
   padding: var(--wui-select-option-padding);
   min-width: 200px;
+  z-index: var(--wui-zindex-menu);
 `;
 var Select = forwardRef25(
   ({