From 1e5c48fabb0d88caa549b768f59a2b7331d63cb0 Mon Sep 17 00:00:00 2001
From: Sean Collings <sean.collings@atomicjolt.com>
Date: Tue, 1 Sep 2026 12:47:40 -0600
Subject: [PATCH 1/8] feat: add Loading component and implement support for it
 in input-like fields

---
 .../Feedback/Loading/Loading.component.tsx    |  42 ++
 .../Feedback/Loading/Loading.context.ts       |  18 +
 .../src/components/Feedback/Loading/index.tsx |   3 +
 .../ErrorMessage/ErrorMessage.component.tsx   |  21 +-
 .../Fields/Atoms/Input/Input.component.tsx    |  43 +-
 .../Fields/Atoms/Label/Label.component.tsx    |   9 +-
 .../Atoms/Message/Message.component.tsx       |   9 +-
 .../Atoms/TextArea/TextArea.component.tsx     |  48 ++-
 .../ComboInput/ComboInput.component.tsx       |  41 +-
 .../Fields/ComboInput/ComboInput.types.ts     |   5 +-
 .../Fields/TextField/TextField.component.tsx  |  19 +-
 .../src/components/Internal/BaseButton.tsx    |   3 +
 .../atomic-elements/src/components/index.ts   |   2 +
 packages/atomic-elements/src/i18n/en-US.ts    |   1 +
 packages/atomic-elements/src/types/common.ts  |   2 -
 playground/src/tabs/Fields.tsx                | 378 +++++++++---------
 16 files changed, 437 insertions(+), 207 deletions(-)
 create mode 100644 packages/atomic-elements/src/components/Feedback/Loading/Loading.component.tsx
 create mode 100644 packages/atomic-elements/src/components/Feedback/Loading/Loading.context.ts
 create mode 100644 packages/atomic-elements/src/components/Feedback/Loading/index.tsx

diff --git a/packages/atomic-elements/src/components/Feedback/Loading/Loading.component.tsx b/packages/atomic-elements/src/components/Feedback/Loading/Loading.component.tsx
new file mode 100644
index 000000000..3395774d7
--- /dev/null
+++ b/packages/atomic-elements/src/components/Feedback/Loading/Loading.component.tsx
@@ -0,0 +1,42 @@
+import React, { useMemo } from "react";
+import { VisuallyHidden } from "@react-aria/visually-hidden";
+import { BaseProps, LoadingProps } from "../../../types";
+import { LoadingContext } from "./Loading.context";
+import { useRenderProps } from "@hooks";
+import { useTranslations } from "@hooks/useTranslations";
+
+export interface LoadingProviderProps extends BaseProps, LoadingProps {
+  children?: React.ReactNode;
+}
+
+/** Provides an ambient loading state to descendant components.
+ * Any component that reads its loading state with `useLoading` will
+ * pick this up unless it is given its own local loading props, which
+ * take priority over the ambient state. */
+export function Loading(props: LoadingProviderProps) {
+  const { isLoading, loadingLabel } = props;
+
+  const t = useTranslations();
+
+  const value = useMemo<LoadingProps>(
+    () => ({ isLoading, loadingLabel: t("loading") }),
+    [isLoading, loadingLabel]
+  );
+
+  const renderProps = useRenderProps<LoadingProps>({
+    componentClassName: "aje-loading",
+    values: value,
+    ...props,
+  });
+
+  return (
+    <LoadingContext.Provider value={value}>
+      <div {...renderProps} aria-busy={isLoading ? "true" : undefined}>
+        <VisuallyHidden role="status" aria-live="polite">
+          {isLoading ? loadingLabel : ""}
+        </VisuallyHidden>
+        {renderProps.children}
+      </div>
+    </LoadingContext.Provider>
+  );
+}
diff --git a/packages/atomic-elements/src/components/Feedback/Loading/Loading.context.ts b/packages/atomic-elements/src/components/Feedback/Loading/Loading.context.ts
new file mode 100644
index 000000000..d33bdf5a9
--- /dev/null
+++ b/packages/atomic-elements/src/components/Feedback/Loading/Loading.context.ts
@@ -0,0 +1,18 @@
+import { createContext, useContext } from "react";
+import { LoadingProps } from "../../../types";
+
+export const LoadingContext = createContext<LoadingProps | undefined>(
+  undefined
+);
+
+/** Reads the ambient loading state provided by the nearest `Loading`
+ * ancestor and merges it with the given local loading props.
+ * Local props take priority over the ambient state. */
+export function useLoading(props: LoadingProps = {}): LoadingProps {
+  const context = useContext(LoadingContext);
+
+  return {
+    isLoading: props.isLoading ?? context?.isLoading,
+    loadingLabel: props.loadingLabel ?? context?.loadingLabel,
+  };
+}
diff --git a/packages/atomic-elements/src/components/Feedback/Loading/index.tsx b/packages/atomic-elements/src/components/Feedback/Loading/index.tsx
new file mode 100644
index 000000000..a7f678206
--- /dev/null
+++ b/packages/atomic-elements/src/components/Feedback/Loading/index.tsx
@@ -0,0 +1,3 @@
+export { Loading } from "./Loading.component";
+export type { LoadingProviderProps } from "./Loading.component";
+export { LoadingContext, useLoading } from "./Loading.context";
diff --git a/packages/atomic-elements/src/components/Fields/Atoms/ErrorMessage/ErrorMessage.component.tsx b/packages/atomic-elements/src/components/Fields/Atoms/ErrorMessage/ErrorMessage.component.tsx
index 07a6e9e05..348bfeeb6 100644
--- a/packages/atomic-elements/src/components/Fields/Atoms/ErrorMessage/ErrorMessage.component.tsx
+++ b/packages/atomic-elements/src/components/Fields/Atoms/ErrorMessage/ErrorMessage.component.tsx
@@ -5,6 +5,7 @@ import { ElementWrapperProps } from "../../../../types";
 import { useContextProps } from "@hooks/useContextProps";
 import { useRenderProps } from "@hooks";
 import { ErrorMessageContext } from "./ErrorMessage.context";
+import { filterDOMProps } from "@react-aria/utils";
 
 /** A styled error message */
 export const StyledErrorMessage = styled.p`
@@ -26,7 +27,14 @@ export const ErrorMessage = React.forwardRef(function ErrorMessage(
   ref: React.Ref<HTMLParagraphElement>
 ) {
   [props, ref] = useContextProps(ErrorMessageContext, props, ref);
-  const { className, size = "medium", as = "p", isInvalid, ...rest } = props;
+  const {
+    className,
+    size = "medium",
+    as = "p",
+    isInvalid,
+    children,
+    ...rest
+  } = props;
 
   const renderProps = useRenderProps({
     componentClassName: className,
@@ -35,5 +43,14 @@ export const ErrorMessage = React.forwardRef(function ErrorMessage(
 
   if (!isInvalid) return;
 
-  return <StyledErrorMessage as={as} ref={ref} {...renderProps} {...rest} />;
+  return (
+    <StyledErrorMessage
+      as={as}
+      ref={ref}
+      {...renderProps}
+      {...filterDOMProps(rest)}
+    >
+      {children}
+    </StyledErrorMessage>
+  );
 });
diff --git a/packages/atomic-elements/src/components/Fields/Atoms/Input/Input.component.tsx b/packages/atomic-elements/src/components/Fields/Atoms/Input/Input.component.tsx
index 1a1ca4771..373cec7b5 100644
--- a/packages/atomic-elements/src/components/Fields/Atoms/Input/Input.component.tsx
+++ b/packages/atomic-elements/src/components/Fields/Atoms/Input/Input.component.tsx
@@ -1,11 +1,14 @@
 import React, { forwardRef } from "react";
 import styled from "styled-components";
+import { filterDOMProps } from "@react-aria/utils";
 import mixins from "../../../../styles/mixins";
-import { ElementWrapperProps } from "../../../../types";
+import { ElementWrapperProps, LoadingProps } from "../../../../types";
 import { useContextProps } from "@hooks/useContextProps";
 import { useRenderProps } from "@hooks";
 import { InputContext } from "./Input.context";
 import { SlotProps } from "@hooks/useSlottedContext";
+import { SkeletonLoader } from "@components/Feedback/SkeletonLoader";
+import { useLoading } from "@components/Feedback/Loading";
 
 const StyledInput = styled.input`
   ${mixins.Regular}
@@ -13,12 +16,19 @@ const StyledInput = styled.input`
   ${mixins.SizingX}
 `;
 
+const StyledLoadingInput = styled(SkeletonLoader)`
+  ${mixins.SizingX}
+  height: var(--input-height);
+  display: block;
+`;
+
 export interface InputProps
   extends Omit<
       ElementWrapperProps<React.InputHTMLAttributes<HTMLInputElement>>,
       "slot"
     >,
-    SlotProps {}
+    SlotProps,
+    LoadingProps {}
 
 /** The input element for a field. */
 export const Input = forwardRef(function Input(
@@ -27,7 +37,15 @@ export const Input = forwardRef(function Input(
 ) {
   [props, ref] = useContextProps(InputContext, props, ref);
 
-  const { className, size, style, ...rest } = props;
+  const { isLoading, loadingLabel } = useLoading(props);
+  const {
+    className,
+    size,
+    style,
+    isLoading: _isLoading,
+    loadingLabel: _loadingLabel,
+    ...rest
+  } = props;
 
   const renderProps = useRenderProps({
     componentClassName: className,
@@ -35,6 +53,25 @@ export const Input = forwardRef(function Input(
     style,
   });
 
+  if (isLoading) {
+    return (
+      <StyledLoadingInput
+        className={renderProps.className}
+        style={renderProps.style}
+        title={loadingLabel}
+      >
+        <rect
+          x="0"
+          y="0"
+          width="100%"
+          height="100%"
+          rx="var(--input-border-radius)"
+          ry="var(--input-border-radius)"
+        />
+      </StyledLoadingInput>
+    );
+  }
+
   return (
     <StyledInput
       ref={ref}
diff --git a/packages/atomic-elements/src/components/Fields/Atoms/Label/Label.component.tsx b/packages/atomic-elements/src/components/Fields/Atoms/Label/Label.component.tsx
index aeb520fce..82b9db1b8 100644
--- a/packages/atomic-elements/src/components/Fields/Atoms/Label/Label.component.tsx
+++ b/packages/atomic-elements/src/components/Fields/Atoms/Label/Label.component.tsx
@@ -5,6 +5,7 @@ import { ElementWrapperProps } from "../../../../types";
 import { useContextProps } from "@hooks/useContextProps";
 import { LabelContext } from "./Label.context";
 import { useRenderProps } from "@hooks";
+import { filterDOMProps } from "@react-aria/utils";
 
 const StyledLabel = styled.label<{ $paddingBottom: string }>`
   ${mixins.Bold}
@@ -30,12 +31,16 @@ export const Label = React.forwardRef(function Label(
 ) {
   [props, ref] = useContextProps(LabelContext, props, ref);
 
-  const { className, size, as = "label", ...rest } = props;
+  const { className, size, as = "label", children, ...rest } = props;
 
   const renderProps = useRenderProps({
     componentClassName: className,
     size,
   });
 
-  return <StyledLabel as={as} ref={ref} {...renderProps} {...rest} />;
+  return (
+    <StyledLabel as={as} ref={ref} {...renderProps} {...filterDOMProps(rest)}>
+      {children}
+    </StyledLabel>
+  );
 });
diff --git a/packages/atomic-elements/src/components/Fields/Atoms/Message/Message.component.tsx b/packages/atomic-elements/src/components/Fields/Atoms/Message/Message.component.tsx
index 238e2124c..c197fa5eb 100644
--- a/packages/atomic-elements/src/components/Fields/Atoms/Message/Message.component.tsx
+++ b/packages/atomic-elements/src/components/Fields/Atoms/Message/Message.component.tsx
@@ -5,6 +5,7 @@ import { ElementWrapperProps } from "../../../../types";
 import { useContextProps } from "@hooks/useContextProps";
 import { useRenderProps } from "@hooks";
 import { MessageContext } from "./Message.context";
+import { filterDOMProps } from "@react-aria/utils";
 
 export const StyledMessage = styled.p`
   ${mixins.Regular}
@@ -25,12 +26,16 @@ export const Message = React.forwardRef(function Message(
   ref: React.Ref<HTMLParagraphElement>
 ) {
   [props, ref] = useContextProps(MessageContext, props, ref);
-  const { as, className, size = "auto", ...rest } = props;
+  const { as, className, size = "auto", children, ...rest } = props;
 
   const renderProps = useRenderProps({
     componentClassName: className,
     size,
   });
 
-  return <StyledMessage as={as} ref={ref} {...renderProps} {...rest} />;
+  return (
+    <StyledMessage as={as} ref={ref} {...renderProps} {...filterDOMProps(rest)}>
+      {children}
+    </StyledMessage>
+  );
 });
diff --git a/packages/atomic-elements/src/components/Fields/Atoms/TextArea/TextArea.component.tsx b/packages/atomic-elements/src/components/Fields/Atoms/TextArea/TextArea.component.tsx
index 7055f1e86..71f83c793 100644
--- a/packages/atomic-elements/src/components/Fields/Atoms/TextArea/TextArea.component.tsx
+++ b/packages/atomic-elements/src/components/Fields/Atoms/TextArea/TextArea.component.tsx
@@ -1,14 +1,27 @@
 import React, { forwardRef } from "react";
-import { ElementWrapperProps } from "../../../../types";
+import styled from "styled-components";
+import mixins from "../../../../styles/mixins";
+import { ElementWrapperProps, LoadingProps } from "../../../../types";
 import { StyledTextArea } from "./TextArea.styles";
 import { useContextProps } from "@hooks/useContextProps";
 import { useRenderProps } from "@hooks";
 import { TextAreaContext } from "./TextArea.context";
+import { SkeletonLoader } from "@components/Feedback/SkeletonLoader";
+import { useLoading } from "@components/Feedback/Loading";
+
+const StyledLoadingTextArea = styled(SkeletonLoader)`
+  ${mixins.Border("input")}
+  min-width: 200px;
+  min-height: var(--textarea-height, 80px);
+  width: 100%;
+  display: block;
+`;
 
 export interface TextAreaProps
   extends ElementWrapperProps<
-    React.TextareaHTMLAttributes<HTMLTextAreaElement>
-  > {}
+      React.TextareaHTMLAttributes<HTMLTextAreaElement>
+    >,
+    LoadingProps {}
 
 /** A wrapped `<textarea />` element */
 export const TextArea = forwardRef(function TextArea(
@@ -17,7 +30,15 @@ export const TextArea = forwardRef(function TextArea(
 ) {
   [props, ref] = useContextProps(TextAreaContext, props, ref);
 
-  const { className, size, style, ...rest } = props;
+  const { isLoading, loadingLabel } = useLoading(props);
+  const {
+    className,
+    size,
+    style,
+    isLoading: _isLoading,
+    loadingLabel: _loadingLabel,
+    ...rest
+  } = props;
 
   const renderProps = useRenderProps({
     componentClassName: className,
@@ -25,5 +46,24 @@ export const TextArea = forwardRef(function TextArea(
     style,
   });
 
+  if (isLoading) {
+    return (
+      <StyledLoadingTextArea
+        className={renderProps.className}
+        style={renderProps.style}
+        title={loadingLabel}
+      >
+        <rect
+          x="0"
+          y="0"
+          width="100%"
+          height="100%"
+          rx="var(--input-border-radius)"
+          ry="var(--input-border-radius)"
+        />
+      </StyledLoadingTextArea>
+    );
+  }
+
   return <StyledTextArea ref={ref} {...renderProps} {...rest} />;
 });
diff --git a/packages/atomic-elements/src/components/Fields/ComboInput/ComboInput.component.tsx b/packages/atomic-elements/src/components/Fields/ComboInput/ComboInput.component.tsx
index 603eff128..86f9fc472 100644
--- a/packages/atomic-elements/src/components/Fields/ComboInput/ComboInput.component.tsx
+++ b/packages/atomic-elements/src/components/Fields/ComboInput/ComboInput.component.tsx
@@ -1,9 +1,19 @@
 import React from "react";
+import styled from "styled-components";
+import mixins from "@styles/mixins";
 import { useContextProps } from "@hooks/useContextProps";
 import { useRenderProps } from "@hooks/useRenderProps";
 import { ComboInputContext } from "./ComboInput.context";
 import { ComboInputProps } from "./ComboInput.types";
 import { StyledComboInput } from "./ComboInput.styles";
+import { SkeletonLoader } from "@components/Feedback/SkeletonLoader";
+import { useLoading } from "@components/Feedback/Loading";
+
+const StyledLoadingComboInput = styled(SkeletonLoader)`
+  ${mixins.SizingX}
+  height: var(--input-height);
+  display: block;
+`;
 
 /**
  * ComboInput is a wrapper component designed to provide an input-like interface
@@ -17,7 +27,17 @@ export const ComboInput = React.forwardRef(function ComboInput(
 ) {
   [props, ref] = useContextProps(ComboInputContext, props, ref);
 
-  const { className, style, padding, children, inputRef, ...rest } = props;
+  const { isLoading, loadingLabel } = useLoading(props);
+  const {
+    className,
+    style,
+    padding,
+    children,
+    inputRef,
+    isLoading: _isLoading,
+    loadingLabel: _loadingLabel,
+    ...rest
+  } = props;
 
   const renderProps = useRenderProps({
     componentClassName: "aje-combo-input",
@@ -27,6 +47,25 @@ export const ComboInput = React.forwardRef(function ComboInput(
     ...rest,
   });
 
+  if (isLoading) {
+    return (
+      <StyledLoadingComboInput
+        className={renderProps.className}
+        style={renderProps.style}
+        title={loadingLabel}
+      >
+        <rect
+          x="0"
+          y="0"
+          width="100%"
+          height="100%"
+          rx="var(--input-border-radius)"
+          ry="var(--input-border-radius)"
+        />
+      </StyledLoadingComboInput>
+    );
+  }
+
   return (
     <StyledComboInput
       ref={ref}
diff --git a/packages/atomic-elements/src/components/Fields/ComboInput/ComboInput.types.ts b/packages/atomic-elements/src/components/Fields/ComboInput/ComboInput.types.ts
index 2d3cc0c78..87d09b135 100644
--- a/packages/atomic-elements/src/components/Fields/ComboInput/ComboInput.types.ts
+++ b/packages/atomic-elements/src/components/Fields/ComboInput/ComboInput.types.ts
@@ -1,10 +1,11 @@
-import { ElementWrapper, RenderBaseProps } from "../../../types";
+import { ElementWrapper, LoadingProps, RenderBaseProps } from "../../../types";
 
 export type PaddingSide = "left" | "right" | "both";
 
 export interface ComboInputProps
   extends RenderBaseProps<never>,
-    ElementWrapper<HTMLDivElement> {
+    ElementWrapper<HTMLDivElement>,
+    LoadingProps {
   /** ref to the input element that this virtual input should focus when clicked
    * When `ComboInput` is used within a `Field` component, this prop is automatically
    * provided
diff --git a/packages/atomic-elements/src/components/Fields/TextField/TextField.component.tsx b/packages/atomic-elements/src/components/Fields/TextField/TextField.component.tsx
index 24ae423ca..dd8ce2fbb 100644
--- a/packages/atomic-elements/src/components/Fields/TextField/TextField.component.tsx
+++ b/packages/atomic-elements/src/components/Fields/TextField/TextField.component.tsx
@@ -1,7 +1,7 @@
 import { useCallback, useRef, useState } from "react";
 import { AriaTextFieldProps, useTextField } from "@react-aria/textfield";
 import { FieldProps } from "../Field";
-import { AriaProps } from "../../../types";
+import { AriaProps, LoadingProps } from "../../../types";
 import { StyledField } from "../Field.styles";
 import { Provider } from "../../Internal/Provider";
 import {
@@ -17,13 +17,22 @@ import { TextAreaContext } from "../Atoms/TextArea";
 
 export interface TextFieldProps
   extends FieldProps,
-    Omit<AriaProps<AriaTextFieldProps>, "placeholder"> {}
+    Omit<AriaProps<AriaTextFieldProps>, "placeholder">,
+    LoadingProps {}
 
 /** Provides the accessbility implementation for a
  * text field and its associated label, error message, and description.
  * */
 export function TextField(props: TextFieldProps) {
-  const { type = "text", isDisabled, isRequired, isReadOnly, name } = props;
+  const {
+    type = "text",
+    isDisabled,
+    isRequired,
+    isReadOnly,
+    name,
+    isLoading,
+    loadingLabel,
+  } = props;
 
   const [inputElementType, setInputElementType] = useState<
     "input" | "textarea" | null
@@ -83,6 +92,8 @@ export function TextField(props: TextFieldProps) {
     readOnly: isReadOnly,
     name,
     ref: inputOrTextAreaRef,
+    isLoading,
+    loadingLabel,
   };
 
   return (
@@ -92,7 +103,7 @@ export function TextField(props: TextFieldProps) {
           [FieldLabelContext.Provider, labelProps],
           [FieldMessageContext.Provider, descriptionProps],
           [FieldErrorContext.Provider, { ...errorMessageProps, isInvalid }],
-          [ComboInputContext.Provider, { inputRef }],
+          [ComboInputContext.Provider, { inputRef, isLoading, loadingLabel }],
           [FieldInputContext.Provider, inputCtx],
           [TextAreaContext.Provider, inputCtx],
         ]}
diff --git a/packages/atomic-elements/src/components/Internal/BaseButton.tsx b/packages/atomic-elements/src/components/Internal/BaseButton.tsx
index fde812ac5..285c7207f 100644
--- a/packages/atomic-elements/src/components/Internal/BaseButton.tsx
+++ b/packages/atomic-elements/src/components/Internal/BaseButton.tsx
@@ -41,6 +41,9 @@ export interface ButtonProps
     SlotProps {
   as?: "button" | "a";
   size?: ExtendedSize;
+
+  /** Transitions the loading spinner to a checkmark */
+  loadingComplete?: boolean;
 }
 
 export interface BaseButtonProps extends ButtonProps {
diff --git a/packages/atomic-elements/src/components/index.ts b/packages/atomic-elements/src/components/index.ts
index a196aeec2..2c77894cd 100644
--- a/packages/atomic-elements/src/components/index.ts
+++ b/packages/atomic-elements/src/components/index.ts
@@ -50,6 +50,7 @@ export { SpinnerLoader } from "./Feedback/SpinnerLoader";
 export { ThreeDotLoader } from "./Feedback/ThreeDotLoader";
 export { SkeletonLoader } from "./Feedback/SkeletonLoader";
 export { LoadingStatus } from "./Feedback/LoadingStatus";
+export { Loading, LoadingContext, useLoading } from "./Feedback/Loading";
 export { ProgressCircle } from "./Feedback/ProgressCircle";
 export { ErrorBoundary } from "./Feedback/ErrorBoundary";
 
@@ -162,6 +163,7 @@ export type { SpinnerLoaderProps } from "./Feedback/SpinnerLoader";
 export type { ThreeDotLoaderProps } from "./Feedback/ThreeDotLoader";
 export type { SkeletonLoaderProps } from "./Feedback/SkeletonLoader";
 export type { LoadingStatusProps } from "./Feedback/LoadingStatus";
+export type { LoadingProviderProps } from "./Feedback/Loading";
 export type { ProgressCircleProps } from "./Feedback/ProgressCircle";
 export type { ErrorBoundaryProps } from "./Feedback/ErrorBoundary";
 export type { ModalProps } from "./Overlays/Modal";
diff --git a/packages/atomic-elements/src/i18n/en-US.ts b/packages/atomic-elements/src/i18n/en-US.ts
index c38024895..9f7695e0f 100644
--- a/packages/atomic-elements/src/i18n/en-US.ts
+++ b/packages/atomic-elements/src/i18n/en-US.ts
@@ -6,4 +6,5 @@ export default {
   "today": "Today",
   "select.placeholder": "Select an option",
   "back": "Back",
+  "loading": "Loading"
 }
diff --git a/packages/atomic-elements/src/types/common.ts b/packages/atomic-elements/src/types/common.ts
index 106b08c4e..cecbe1f3e 100644
--- a/packages/atomic-elements/src/types/common.ts
+++ b/packages/atomic-elements/src/types/common.ts
@@ -52,8 +52,6 @@ export type LoadingProps = {
   isLoading?: boolean;
   /** aria accessiblity label to inform screen-readers that it is loading */
   loadingLabel?: string;
-  /** Transitions the loading spinner to a checkmark */
-  loadingComplete?: boolean;
 };
 
 export type SuggestStrings<T> = T | (string & {});
diff --git a/playground/src/tabs/Fields.tsx b/playground/src/tabs/Fields.tsx
index cee69c265..c1145428f 100644
--- a/playground/src/tabs/Fields.tsx
+++ b/playground/src/tabs/Fields.tsx
@@ -13,13 +13,14 @@ import {
   TextAreaInput,
   TextInput,
   TimeInput,
-  FieldErrorMessage,
-  FieldMessage,
-  FieldInput,
+  ErrorMessage,
+  Message,
+  Input,
   ComboInput,
-  FieldLabel,
+  Label,
   TextField,
-} from "@atomicjolt/atomic-elements";
+  Loading,
+} from "../elements";
 
 export default function Fields() {
   const [value, setValue] = useState("");
@@ -28,6 +29,7 @@ export default function Fields() {
   const [isRequired, setIsRequired] = useState(false);
   const [isReadOnly, setIsReadOnly] = useState(false);
   const [isInvalid, setIsInvalid] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
 
   return (
     <div>
@@ -46,191 +48,197 @@ export default function Fields() {
       <CheckBox isSelected={isInvalid} onChange={setIsInvalid}>
         Invalid
       </CheckBox>
-      <hr />
-
-      <ChipGroup
-        onRemove={(key) => console.log(key)}
-        label="Label"
-        message="message"
-        error="error"
-        disabledKeys={["shopping"]}
-        selectionMode="multiple"
-        isDisabled={isDisabled}
-        isInvalid={isInvalid}
-        isRequired={isRequired}
-      >
-        <Item key="news">News</Item>
-        <Item key="travel">Travel</Item>
-        <Item key="gaming">Gaming</Item>
-        <Item key="shopping">Shopping</Item>
-      </ChipGroup>
-
-      <hr />
-
-      <TextField
-        size="large"
-        value={value}
-        onChange={setValue}
-        isDisabled={isDisabled}
-        isRequired={isRequired}
-        isReadOnly={isReadOnly}
-        isInvalid={isInvalid}
-      >
-        <FieldLabel>Label</FieldLabel>
-        <FieldMessage>Message</FieldMessage>
-        <ComboInput padding="both">
-          <MaterialIcon icon="search" />
-          <FieldInput placeholder="placeholder" />
-        </ComboInput>
-        <FieldErrorMessage>Error</FieldErrorMessage>
-      </TextField>
 
-      <hr />
-
-      <TextInput
-        label="Label"
-        message="Message"
-        error="Error"
-        isDisabled={isDisabled}
-        isRequired={isRequired}
-        isInvalid={isInvalid}
-        isReadOnly={isReadOnly}
-        onChange={setValue}
-        value={value}
-        size="large"
-      />
-
-      <hr />
-      <SearchInput
-        label="Label"
-        message="Message"
-        error="Error"
-        isDisabled={isDisabled}
-        isRequired={isRequired}
-        isInvalid={isInvalid}
-        isReadOnly={isReadOnly}
-        onChange={setValue}
-        value={value}
-        size="large"
-        onSubmit={(value) => console.log(value)}
-      />
-
-      <hr />
-
-      <NumberInput
-        label="Label"
-        message="Message"
-        error="Error"
-        isDisabled={isDisabled}
-        isRequired={isRequired}
-        isInvalid={isInvalid}
-        isReadOnly={isReadOnly}
-        onChange={setNumber}
-        value={number}
-        size="large"
-        maxValue={10}
-      />
-
-      <hr />
-
-      <CheckBox
-        isDisabled={isDisabled}
-        isInvalid={isInvalid}
-        isReadOnly={isReadOnly}
-        isRequired={isRequired}
-        message="message"
-        error="Error"
-      >
-        CheckBox
+      <CheckBox isSelected={isLoading} onChange={setIsLoading}>
+        Loading
       </CheckBox>
 
+      <h2>Value: {value}</h2>
       <hr />
 
-      <TextAreaInput
-        label="Label"
-        message="Message"
-        error="Error"
-        isDisabled={isDisabled}
-        isRequired={isRequired}
-        isInvalid={isInvalid}
-        isReadOnly={isReadOnly}
-        onChange={setValue}
-        value={value}
-        size="large"
-      />
-
-      <hr />
-
-      <DateInput
-        isDisabled={isDisabled}
-        isInvalid={isInvalid}
-        isReadOnly={isReadOnly}
-        isRequired={isRequired}
-        message="message"
-        error="Error"
-        label="Label"
-      />
-
-      <hr />
-
-      <DatePicker
-        isDisabled={isDisabled}
-        isInvalid={isInvalid}
-        isReadOnly={isReadOnly}
-        isRequired={isRequired}
-        message="message"
-        error="Error"
-        label="Label"
-      />
-
-      <hr />
-
-      <TimeInput
-        isDisabled={isDisabled}
-        isInvalid={isInvalid}
-        isReadOnly={isReadOnly}
-        isRequired={isRequired}
-        message="message"
-        error="Error"
-        label="Label"
-      />
-
-      <hr />
-
-      <ComboBox
-        isDisabled={isDisabled}
-        isInvalid={isInvalid}
-        isReadOnly={isReadOnly}
-        isRequired={isRequired}
-        message="message"
-        error="Error"
-        label="Label"
-        placeholder="Select an item"
-      >
-        <Item>Item 1</Item>
-        <Item>Item 2</Item>
-        <Item>Item 3</Item>
-      </ComboBox>
-
-      <hr />
-
-      <CustomSelect
-        isDisabled={isDisabled}
-        isInvalid={isInvalid}
-        isRequired={isRequired}
-        isReadOnly={isReadOnly}
-        message="message"
-        error="Error"
-        label="Label"
-        placeholder="Select an item"
-        variant="floating"
-      >
-        <Item>Item 1</Item>
-        <Item>Item 2</Item>
-        <Item>Item 3</Item>
-      </CustomSelect>
-
-      <h2>Value: {value}</h2>
+      <Loading isLoading={isLoading}>
+        <ChipGroup
+          onRemove={(key) => console.log(key)}
+          label="Label"
+          message="message"
+          error="error"
+          disabledKeys={["shopping"]}
+          selectionMode="multiple"
+          isDisabled={isDisabled}
+          isInvalid={isInvalid}
+          isRequired={isRequired}
+        >
+          <Item key="news">News</Item>
+          <Item key="travel">Travel</Item>
+          <Item key="gaming">Gaming</Item>
+          <Item key="shopping">Shopping</Item>
+        </ChipGroup>
+
+        <hr />
+
+        <TextField
+          size="large"
+          value={value}
+          onChange={setValue}
+          isDisabled={isDisabled}
+          isRequired={isRequired}
+          isReadOnly={isReadOnly}
+          isInvalid={isInvalid}
+        >
+          <Label>Label</Label>
+          <Message>Message</Message>
+          <ComboInput padding="both">
+            <MaterialIcon icon="search" />
+            <Input placeholder="placeholder" />
+          </ComboInput>
+          <ErrorMessage>Error</ErrorMessage>
+        </TextField>
+
+        <hr />
+
+        <TextInput
+          label="Label"
+          message="Message"
+          error="Error"
+          isDisabled={isDisabled}
+          isRequired={isRequired}
+          isInvalid={isInvalid}
+          isReadOnly={isReadOnly}
+          onChange={setValue}
+          value={value}
+          size="large"
+        />
+
+        <hr />
+        <SearchInput
+          label="Label"
+          message="Message"
+          error="Error"
+          isDisabled={isDisabled}
+          isRequired={isRequired}
+          isInvalid={isInvalid}
+          isReadOnly={isReadOnly}
+          onChange={setValue}
+          value={value}
+          size="large"
+          onSubmit={(value) => console.log(value)}
+        />
+
+        <hr />
+
+        <NumberInput
+          label="Label"
+          message="Message"
+          error="Error"
+          isDisabled={isDisabled}
+          isRequired={isRequired}
+          isInvalid={isInvalid}
+          isReadOnly={isReadOnly}
+          onChange={setNumber}
+          value={number}
+          size="large"
+          maxValue={10}
+        />
+
+        <hr />
+
+        <CheckBox
+          isDisabled={isDisabled}
+          isInvalid={isInvalid}
+          isReadOnly={isReadOnly}
+          isRequired={isRequired}
+          message="message"
+          error="Error"
+        >
+          CheckBox
+        </CheckBox>
+
+        <hr />
+
+        <TextAreaInput
+          label="Label"
+          message="Message"
+          error="Error"
+          isDisabled={isDisabled}
+          isRequired={isRequired}
+          isInvalid={isInvalid}
+          isReadOnly={isReadOnly}
+          onChange={setValue}
+          value={value}
+          size="large"
+        />
+
+        <hr />
+
+        <DateInput
+          isDisabled={isDisabled}
+          isInvalid={isInvalid}
+          isReadOnly={isReadOnly}
+          isRequired={isRequired}
+          message="message"
+          error="Error"
+          label="Label"
+        />
+
+        <hr />
+
+        <DatePicker
+          isDisabled={isDisabled}
+          isInvalid={isInvalid}
+          isReadOnly={isReadOnly}
+          isRequired={isRequired}
+          message="message"
+          error="Error"
+          label="Label"
+        />
+
+        <hr />
+
+        <TimeInput
+          isDisabled={isDisabled}
+          isInvalid={isInvalid}
+          isReadOnly={isReadOnly}
+          isRequired={isRequired}
+          message="message"
+          error="Error"
+          label="Label"
+        />
+
+        <hr />
+
+        <ComboBox
+          isDisabled={isDisabled}
+          isInvalid={isInvalid}
+          isReadOnly={isReadOnly}
+          isRequired={isRequired}
+          message="message"
+          error="Error"
+          label="Label"
+          placeholder="Select an item"
+        >
+          <Item>Item 1</Item>
+          <Item>Item 2</Item>
+          <Item>Item 3</Item>
+        </ComboBox>
+
+        <hr />
+
+        <CustomSelect
+          isDisabled={isDisabled}
+          isInvalid={isInvalid}
+          isRequired={isRequired}
+          isReadOnly={isReadOnly}
+          message="message"
+          error="Error"
+          label="Label"
+          placeholder="Select an item"
+          variant="floating"
+        >
+          <Item>Item 1</Item>
+          <Item>Item 2</Item>
+          <Item>Item 3</Item>
+        </CustomSelect>
+      </Loading>
     </div>
   );
 }

From 9c1bb49568f662cf1474ad1042832c1b3864d6d8 Mon Sep 17 00:00:00 2001
From: Sean Collings <sean.collings@atomicjolt.com>
Date: Tue, 1 Sep 2026 14:35:30 -0600
Subject: [PATCH 2/8] feat: add support for isLoading to a bunch of different
 components

---
 .../Content/Table/components/TableBody.tsx    |   4 +-
 .../Dropdowns/Combobox/ComboBox.component.tsx |  32 +-
 .../Dropdowns/Combobox/Combobox.styles.ts     |   8 +
 .../CustomSelect/CustomSelect.component.tsx   |  32 +-
 .../CustomSelect/CustomSelect.styles.ts       |   8 +
 .../MultiSelect/MultiSelect.component.tsx     |  33 +-
 .../MultiSelect/MultiSelect.styles.ts         |   8 +
 .../LoadingStatus/LoadingStatus.component.tsx |   4 +-
 .../Atoms/TextArea/TextArea.component.tsx     |  13 +-
 .../Fields/Atoms/TextArea/TextArea.styles.ts  |   9 +
 .../ComboBoxField/ComboBoxField.component.tsx |   7 +-
 .../ComboBoxField/ComboBoxField.types.ts      |   5 +-
 .../ComboInput/ComboInput.component.tsx       |  14 +-
 .../Fields/ComboInput/ComboInput.styles.ts    |   7 +
 .../NumberField/NumberField.component.tsx     |  13 +-
 .../SearchField/SearchField.component.tsx     |  13 +-
 .../Inputs/Checkbox/Checkbox.component.tsx    |  28 +-
 .../Inputs/Checkbox/Checkbox.styles.ts        |  18 ++
 .../Inputs/FileInput/FileInput.component.tsx  |  16 +
 .../Inputs/FileInput/FileInput.styles.ts      |   7 +
 .../RadioGroup/RadioGroup.component.tsx       |  39 ++-
 .../Inputs/RadioGroup/RadioGroup.styles.ts    |  13 +
 .../ToggleSwitch/ToggleSwitch.component.tsx   |  36 ++-
 .../ToggleSwitch/ToggleSwitch.styles.ts       |   7 +
 .../src/components/Internal/BaseButton.tsx    |   5 +-
 packages/atomic-elements/src/types/fields.ts  |   5 +-
 playground/src/Playground.tsx                 |  12 +-
 playground/src/tabs/Fields.tsx                |   1 -
 playground/src/tabs/Loading.tsx               |  38 ---
 playground/src/tabs/LoadingStates.tsx         | 285 ++++++++++++++++++
 30 files changed, 624 insertions(+), 96 deletions(-)
 delete mode 100644 playground/src/tabs/Loading.tsx
 create mode 100644 playground/src/tabs/LoadingStates.tsx

diff --git a/packages/atomic-elements/src/components/Content/Table/components/TableBody.tsx b/packages/atomic-elements/src/components/Content/Table/components/TableBody.tsx
index e37f80788..66f3bf117 100644
--- a/packages/atomic-elements/src/components/Content/Table/components/TableBody.tsx
+++ b/packages/atomic-elements/src/components/Content/Table/components/TableBody.tsx
@@ -9,6 +9,7 @@ import { LoadingTableRows } from "./Loading";
 import { EmptyTable } from "./EmptyTable";
 import { TableStateContext } from "../Table.context";
 import { useCollectionRenderer } from "@hooks/useCollectionRenderer";
+import { useLoading } from "@components/Feedback/Loading";
 
 export interface TableBodyProps<T> extends LoadingProps {
   renderEmpty?: (() => React.ReactNode) | React.ReactNode;
@@ -26,7 +27,8 @@ export const TableBody = createBranchComponent(
     body: Node<T>
   ) {
     const state = useContext(TableStateContext)!;
-    const { isLoading, loadingRows = 10 } = props;
+    const { loadingRows = 10 } = props;
+    const { isLoading } = useLoading({ isLoading: props.isLoading });
 
     const renderProps = useRenderProps({
       componentClassName: "aje-table__body",
diff --git a/packages/atomic-elements/src/components/Dropdowns/Combobox/ComboBox.component.tsx b/packages/atomic-elements/src/components/Dropdowns/Combobox/ComboBox.component.tsx
index ad2102577..633cc1b34 100644
--- a/packages/atomic-elements/src/components/Dropdowns/Combobox/ComboBox.component.tsx
+++ b/packages/atomic-elements/src/components/Dropdowns/Combobox/ComboBox.component.tsx
@@ -14,7 +14,11 @@ import { ListBox } from "../ListBox";
 import { ComboInput, Input } from "../../Fields";
 import { MaterialIcon } from "@components/Icons/MaterialIcon";
 import { FloatingFieldInputWrapper } from "@components/Internal/FloatingFieldInputWrapper";
-import { StyledComboBoxField } from "./Combobox.styles";
+import {
+  StyledComboBoxField,
+  StyledLoadingComboBox,
+} from "./Combobox.styles";
+import { useLoading } from "@components/Feedback/Loading";
 
 export interface ComboBoxProps<T>
   extends AriaProps<AriaComboBoxProps<T>>,
@@ -45,6 +49,32 @@ export const ComboBox = forwardRef(function ComboBox<T extends object>(
     dropdownPlacement = "bottom start",
   } = props;
 
+  const { isLoading, loadingLabel } = useLoading(props);
+
+  if (isLoading) {
+    return (
+      <StyledComboBoxField {...props} ref={ref}>
+        <FloatingFieldInputWrapper
+          label={label}
+          message={message}
+          error={error}
+          floating={variant === "floating"}
+        >
+          <StyledLoadingComboBox title={loadingLabel}>
+            <rect
+              x="0"
+              y="0"
+              width="100%"
+              height="100%"
+              rx="var(--input-border-radius)"
+              ry="var(--input-border-radius)"
+            />
+          </StyledLoadingComboBox>
+        </FloatingFieldInputWrapper>
+      </StyledComboBoxField>
+    );
+  }
+
   return (
     <StyledComboBoxField {...props} ref={ref}>
       <FloatingFieldInputWrapper
diff --git a/packages/atomic-elements/src/components/Dropdowns/Combobox/Combobox.styles.ts b/packages/atomic-elements/src/components/Dropdowns/Combobox/Combobox.styles.ts
index 7246312a9..a80e7a5de 100644
--- a/packages/atomic-elements/src/components/Dropdowns/Combobox/Combobox.styles.ts
+++ b/packages/atomic-elements/src/components/Dropdowns/Combobox/Combobox.styles.ts
@@ -1,6 +1,14 @@
 import styled from "styled-components";
 import { FloatingDropdown } from "../Dropdowns.styles";
 import { ComboBoxField } from "@components/Fields/ComboBoxField";
+import { SkeletonLoader } from "@components/Feedback/SkeletonLoader";
+
+export const StyledLoadingComboBox = styled(SkeletonLoader)`
+  width: 200px;
+  max-width: 100%;
+  height: var(--input-height, 40px);
+  display: block;
+`;
 
 export const StyledComboBoxField = styled(ComboBoxField)`
   &.aje-combobox--floating {
diff --git a/packages/atomic-elements/src/components/Dropdowns/CustomSelect/CustomSelect.component.tsx b/packages/atomic-elements/src/components/Dropdowns/CustomSelect/CustomSelect.component.tsx
index 63064c669..6bd9eafee 100644
--- a/packages/atomic-elements/src/components/Dropdowns/CustomSelect/CustomSelect.component.tsx
+++ b/packages/atomic-elements/src/components/Dropdowns/CustomSelect/CustomSelect.component.tsx
@@ -12,9 +12,13 @@ import { Popover } from "../../Overlays/Popover";
 import { ListBox } from "../ListBox";
 import { SelectField } from "@components/Fields/SelectField";
 import { FloatingFieldInputWrapper } from "@components/Internal/FloatingFieldInputWrapper";
-import { StyledSelectField } from "./CustomSelect.styles";
+import {
+  StyledLoadingSelect,
+  StyledSelectField,
+} from "./CustomSelect.styles";
 import { Button } from "@components/Buttons/Button";
 import { MaterialIcon } from "@components/Icons/MaterialIcon";
+import { useLoading } from "@components/Feedback/Loading";
 
 export type CustomSelectVariants = "default" | "floating" | "ghost";
 
@@ -48,6 +52,8 @@ export const CustomSelect = forwardRef(function CustomSelect<T extends object>(
 
   const placeholder = props.placeholder ?? t("select.placeholder");
 
+  const { isLoading, loadingLabel } = useLoading(props);
+
   const renderProps = useRenderProps({
     componentClassName: "aje-select",
     variant,
@@ -55,6 +61,30 @@ export const CustomSelect = forwardRef(function CustomSelect<T extends object>(
 
   const buttonVariant = buttonVariantMap[variant] ?? "dropdown";
 
+  if (isLoading) {
+    return (
+      <StyledSelectField {...props} {...renderProps} ref={ref}>
+        <FloatingFieldInputWrapper
+          floating={variant === "floating"}
+          label={label}
+          message={message}
+          error={error}
+        >
+          <StyledLoadingSelect title={loadingLabel}>
+            <rect
+              x="0"
+              y="0"
+              width="100%"
+              height="100%"
+              rx="var(--input-border-radius)"
+              ry="var(--input-border-radius)"
+            />
+          </StyledLoadingSelect>
+        </FloatingFieldInputWrapper>
+      </StyledSelectField>
+    );
+  }
+
   return (
     <StyledSelectField {...props} {...renderProps} ref={ref}>
       <FloatingFieldInputWrapper
diff --git a/packages/atomic-elements/src/components/Dropdowns/CustomSelect/CustomSelect.styles.ts b/packages/atomic-elements/src/components/Dropdowns/CustomSelect/CustomSelect.styles.ts
index 9fdcf75ee..4e01c776c 100644
--- a/packages/atomic-elements/src/components/Dropdowns/CustomSelect/CustomSelect.styles.ts
+++ b/packages/atomic-elements/src/components/Dropdowns/CustomSelect/CustomSelect.styles.ts
@@ -2,6 +2,14 @@ import styled from "styled-components";
 import mixins from "../../../styles/mixins";
 import { FloatingDropdown } from "../Dropdowns.styles";
 import { SelectField } from "@components/Fields/SelectField";
+import { SkeletonLoader } from "@components/Feedback/SkeletonLoader";
+
+export const StyledLoadingSelect = styled(SkeletonLoader)`
+  width: 200px;
+  max-width: 100%;
+  height: var(--input-height, 40px);
+  display: block;
+`;
 
 export const StyledSelectField = styled(SelectField)`
   &.aje-select--floating {
diff --git a/packages/atomic-elements/src/components/Dropdowns/MultiSelect/MultiSelect.component.tsx b/packages/atomic-elements/src/components/Dropdowns/MultiSelect/MultiSelect.component.tsx
index 37cd6d0a0..0f6b62df2 100644
--- a/packages/atomic-elements/src/components/Dropdowns/MultiSelect/MultiSelect.component.tsx
+++ b/packages/atomic-elements/src/components/Dropdowns/MultiSelect/MultiSelect.component.tsx
@@ -7,8 +7,13 @@ import { Button } from "@components/Buttons/Button";
 import { MaterialIcon } from "@components/Icons/MaterialIcon";
 import { useRenderProps } from "@hooks/useRenderProps";
 import { MultiSelectStateContext } from "@components/Fields/MultiSelectField";
-import { ButtonText, StyledMultiSelectField } from "./MultiSelect.styles";
+import {
+  ButtonText,
+  StyledLoadingMultiSelect,
+  StyledMultiSelectField,
+} from "./MultiSelect.styles";
 import { AriaMultiSelectProps } from "../../Fields/MultiSelectField";
+import { useLoading } from "@components/Feedback/Loading";
 
 export interface MultiSelectProps<T extends object>
   extends AriaProps<AriaMultiSelectProps<T>>,
@@ -38,6 +43,8 @@ export function MultiSelect<T extends object>(props: MultiSelectProps<T>) {
     dropdownPlacement = "bottom start",
   } = props;
 
+  const { isLoading, loadingLabel } = useLoading(props);
+
   const renderProps = useRenderProps({
     componentClassName: "aje-multiselect",
     variant,
@@ -45,6 +52,30 @@ export function MultiSelect<T extends object>(props: MultiSelectProps<T>) {
 
   const buttonVariant = buttonVariantMap[variant] ?? "dropdown";
 
+  if (isLoading) {
+    return (
+      <StyledMultiSelectField {...props} {...renderProps} ref={ref}>
+        <FloatingFieldInputWrapper
+          label={label}
+          message={message}
+          error={error}
+          floating={variant === "floating"}
+        >
+          <StyledLoadingMultiSelect title={loadingLabel}>
+            <rect
+              x="0"
+              y="0"
+              width="100%"
+              height="100%"
+              rx="var(--input-border-radius)"
+              ry="var(--input-border-radius)"
+            />
+          </StyledLoadingMultiSelect>
+        </FloatingFieldInputWrapper>
+      </StyledMultiSelectField>
+    );
+  }
+
   return (
     <StyledMultiSelectField {...props} {...renderProps} ref={ref}>
       <FloatingFieldInputWrapper
diff --git a/packages/atomic-elements/src/components/Dropdowns/MultiSelect/MultiSelect.styles.ts b/packages/atomic-elements/src/components/Dropdowns/MultiSelect/MultiSelect.styles.ts
index fe98ed978..f39015fc8 100644
--- a/packages/atomic-elements/src/components/Dropdowns/MultiSelect/MultiSelect.styles.ts
+++ b/packages/atomic-elements/src/components/Dropdowns/MultiSelect/MultiSelect.styles.ts
@@ -1,6 +1,14 @@
 import styled from "styled-components";
 import { MultiSelectField } from "@components/Fields/MultiSelectField";
 import { FloatingDropdown } from "../Dropdowns.styles";
+import { SkeletonLoader } from "@components/Feedback/SkeletonLoader";
+
+export const StyledLoadingMultiSelect = styled(SkeletonLoader)`
+  width: 200px;
+  max-width: 100%;
+  height: var(--input-height, 40px);
+  display: block;
+`;
 
 export const StyledMultiSelectField = styled(MultiSelectField)`
   &.aje-multiselect--floating {
diff --git a/packages/atomic-elements/src/components/Feedback/LoadingStatus/LoadingStatus.component.tsx b/packages/atomic-elements/src/components/Feedback/LoadingStatus/LoadingStatus.component.tsx
index 95b8b0eb0..1581470e7 100644
--- a/packages/atomic-elements/src/components/Feedback/LoadingStatus/LoadingStatus.component.tsx
+++ b/packages/atomic-elements/src/components/Feedback/LoadingStatus/LoadingStatus.component.tsx
@@ -3,6 +3,7 @@ import { ThreeDotLoader } from "../ThreeDotLoader";
 import { ErrorBanner } from "../../Banners/DismissableBanner";
 import { ErrorStateProps, LoaderPlacement } from "../Loader/Loader.types";
 import { LoaderProps } from "../Loader";
+import { useLoading } from "../Loading";
 
 export interface LoadingStatusProps<T> {
   readonly children?: React.ReactNode | ((data: T) => React.ReactNode);
@@ -53,7 +54,6 @@ export function LoadingStatus<T>(
   props: LoadingStatusProps<T>
 ): React.ReactNode | null {
   const {
-    isLoading = false,
     renderLoading: Loading = ThreeDotLoader,
     loadingMessage = null,
     loadingPlacement = "center",
@@ -65,6 +65,8 @@ export function LoadingStatus<T>(
     fallback,
   } = props;
 
+  const { isLoading = false } = useLoading(props);
+
   if (error) {
     return typeof ErrorComp === "function" ? (
       <ErrorComp error={error} />
diff --git a/packages/atomic-elements/src/components/Fields/Atoms/TextArea/TextArea.component.tsx b/packages/atomic-elements/src/components/Fields/Atoms/TextArea/TextArea.component.tsx
index 71f83c793..680aa26cf 100644
--- a/packages/atomic-elements/src/components/Fields/Atoms/TextArea/TextArea.component.tsx
+++ b/packages/atomic-elements/src/components/Fields/Atoms/TextArea/TextArea.component.tsx
@@ -1,22 +1,11 @@
 import React, { forwardRef } from "react";
-import styled from "styled-components";
-import mixins from "../../../../styles/mixins";
 import { ElementWrapperProps, LoadingProps } from "../../../../types";
-import { StyledTextArea } from "./TextArea.styles";
+import { StyledLoadingTextArea, StyledTextArea } from "./TextArea.styles";
 import { useContextProps } from "@hooks/useContextProps";
 import { useRenderProps } from "@hooks";
 import { TextAreaContext } from "./TextArea.context";
-import { SkeletonLoader } from "@components/Feedback/SkeletonLoader";
 import { useLoading } from "@components/Feedback/Loading";
 
-const StyledLoadingTextArea = styled(SkeletonLoader)`
-  ${mixins.Border("input")}
-  min-width: 200px;
-  min-height: var(--textarea-height, 80px);
-  width: 100%;
-  display: block;
-`;
-
 export interface TextAreaProps
   extends ElementWrapperProps<
       React.TextareaHTMLAttributes<HTMLTextAreaElement>
diff --git a/packages/atomic-elements/src/components/Fields/Atoms/TextArea/TextArea.styles.ts b/packages/atomic-elements/src/components/Fields/Atoms/TextArea/TextArea.styles.ts
index 15f76ed6e..ebdbf44ec 100644
--- a/packages/atomic-elements/src/components/Fields/Atoms/TextArea/TextArea.styles.ts
+++ b/packages/atomic-elements/src/components/Fields/Atoms/TextArea/TextArea.styles.ts
@@ -1,5 +1,14 @@
 import mixins from "@styles/mixins";
 import styled from "styled-components";
+import { SkeletonLoader } from "@components/Feedback/SkeletonLoader";
+
+export const StyledLoadingTextArea = styled(SkeletonLoader)`
+  ${mixins.Border("input")}
+  min-width: 200px;
+  min-height: var(--textarea-height, 80px);
+  width: 100%;
+  display: block;
+`;
 
 export const StyledTextArea = styled.textarea`
   ${mixins.Regular}
diff --git a/packages/atomic-elements/src/components/Fields/ComboBoxField/ComboBoxField.component.tsx b/packages/atomic-elements/src/components/Fields/ComboBoxField/ComboBoxField.component.tsx
index 7fa42eae1..b3d7d69e6 100644
--- a/packages/atomic-elements/src/components/Fields/ComboBoxField/ComboBoxField.component.tsx
+++ b/packages/atomic-elements/src/components/Fields/ComboBoxField/ComboBoxField.component.tsx
@@ -61,6 +61,8 @@ function ComboBoxFieldInner<T extends object>(
     isDisabled,
     isRequired,
     isReadOnly,
+    isLoading,
+    loadingLabel,
     size = "medium",
   } = props;
   const { contains } = useFilter({ sensitivity: "base" });
@@ -119,7 +121,10 @@ function ComboBoxFieldInner<T extends object>(
           [FieldMessageContext.Provider, descriptionProps],
           [FieldErrorContext.Provider, { ...errorMessageProps, isInvalid }],
           [FieldInputContext.Provider, { ...inputProps, ref: inputRef }],
-          [ComboInputContext.Provider, { inputRef, ref: inputWrapperRef }],
+          [
+            ComboInputContext.Provider,
+            { inputRef, ref: inputWrapperRef, isLoading, loadingLabel },
+          ],
           [OverlayTriggerStateContext.Provider, state],
           [
             PopoverContext.Provider,
diff --git a/packages/atomic-elements/src/components/Fields/ComboBoxField/ComboBoxField.types.ts b/packages/atomic-elements/src/components/Fields/ComboBoxField/ComboBoxField.types.ts
index 384ce8b43..0ed1804ae 100644
--- a/packages/atomic-elements/src/components/Fields/ComboBoxField/ComboBoxField.types.ts
+++ b/packages/atomic-elements/src/components/Fields/ComboBoxField/ComboBoxField.types.ts
@@ -1,12 +1,13 @@
 import { BaseCollection } from "@react-aria/collections";
 import { SingleSelection } from "@react-types/shared";
 import { MenuTriggerAction } from "@react-types/combobox";
-import { Key } from "../../../types";
+import { Key, LoadingProps } from "../../../types";
 import { FieldProps } from "../Field";
 
 export interface ComboBoxFieldProps<T>
   extends Omit<SingleSelection, "disallowEmptySelection" | "onSelectionChange">,
-    Omit<FieldProps, "children"> {
+    Omit<FieldProps, "children">,
+    LoadingProps {
   children?: React.ReactNode;
 
   /** Hangler called when the selection changes */
diff --git a/packages/atomic-elements/src/components/Fields/ComboInput/ComboInput.component.tsx b/packages/atomic-elements/src/components/Fields/ComboInput/ComboInput.component.tsx
index 86f9fc472..b7ea7f477 100644
--- a/packages/atomic-elements/src/components/Fields/ComboInput/ComboInput.component.tsx
+++ b/packages/atomic-elements/src/components/Fields/ComboInput/ComboInput.component.tsx
@@ -1,20 +1,14 @@
 import React from "react";
-import styled from "styled-components";
-import mixins from "@styles/mixins";
 import { useContextProps } from "@hooks/useContextProps";
 import { useRenderProps } from "@hooks/useRenderProps";
 import { ComboInputContext } from "./ComboInput.context";
 import { ComboInputProps } from "./ComboInput.types";
-import { StyledComboInput } from "./ComboInput.styles";
-import { SkeletonLoader } from "@components/Feedback/SkeletonLoader";
+import {
+  StyledComboInput,
+  StyledLoadingComboInput,
+} from "./ComboInput.styles";
 import { useLoading } from "@components/Feedback/Loading";
 
-const StyledLoadingComboInput = styled(SkeletonLoader)`
-  ${mixins.SizingX}
-  height: var(--input-height);
-  display: block;
-`;
-
 /**
  * ComboInput is a wrapper component designed to provide an input-like interface
  * that focuses the actual input element when clicked. It is ideal for building
diff --git a/packages/atomic-elements/src/components/Fields/ComboInput/ComboInput.styles.ts b/packages/atomic-elements/src/components/Fields/ComboInput/ComboInput.styles.ts
index 98d5cc56f..8edc8cb5b 100644
--- a/packages/atomic-elements/src/components/Fields/ComboInput/ComboInput.styles.ts
+++ b/packages/atomic-elements/src/components/Fields/ComboInput/ComboInput.styles.ts
@@ -1,6 +1,13 @@
 import mixins from "@styles/mixins";
 import styled from "styled-components";
 import { PaddingSide } from "./ComboInput.types";
+import { SkeletonLoader } from "@components/Feedback/SkeletonLoader";
+
+export const StyledLoadingComboInput = styled(SkeletonLoader)`
+  ${mixins.SizingX}
+  height: var(--input-height);
+  display: block;
+`;
 
 export const StyledComboInput = styled.div<{ $paddingSide?: PaddingSide }>`
   ${mixins.Regular}
diff --git a/packages/atomic-elements/src/components/Fields/NumberField/NumberField.component.tsx b/packages/atomic-elements/src/components/Fields/NumberField/NumberField.component.tsx
index 0e79b56c4..e9bbfc102 100644
--- a/packages/atomic-elements/src/components/Fields/NumberField/NumberField.component.tsx
+++ b/packages/atomic-elements/src/components/Fields/NumberField/NumberField.component.tsx
@@ -5,7 +5,7 @@ import { useNumberFieldState } from "react-stately";
 import { useRenderProps } from "@hooks/useRenderProps";
 import { ButtonContext } from "@components/Buttons/Button/Button.context";
 import { FieldProps } from "../Field";
-import { AriaProps } from "../../../types";
+import { AriaProps, LoadingProps } from "../../../types";
 import { StyledField } from "../Field.styles";
 import { Provider } from "../../Internal/Provider";
 import {
@@ -19,11 +19,13 @@ import { ComboInputContext } from "../ComboInput";
 
 export interface NumberFieldProps
   extends FieldProps,
-    Omit<AriaProps<AriaNumberFieldProps>, "placeholder"> {}
+    Omit<AriaProps<AriaNumberFieldProps>, "placeholder">,
+    LoadingProps {}
 
 /** Provides the accessbility implementation for a number field and its associated label, error message, and description. */
 export function NumberField(props: NumberFieldProps) {
-  const { isDisabled, isRequired, isReadOnly, name } = props;
+  const { isDisabled, isRequired, isReadOnly, name, isLoading, loadingLabel } =
+    props;
 
   const inputRef = useRef<HTMLInputElement | null>(null);
 
@@ -75,7 +77,10 @@ export function NumberField(props: NumberFieldProps) {
               },
             },
           ],
-          [ComboInputContext.Provider, { inputRef }],
+          [
+            ComboInputContext.Provider,
+            { inputRef, isLoading, loadingLabel },
+          ],
           [
             FieldInputContext.Provider,
             {
diff --git a/packages/atomic-elements/src/components/Fields/SearchField/SearchField.component.tsx b/packages/atomic-elements/src/components/Fields/SearchField/SearchField.component.tsx
index c0e01d951..97f1fdad9 100644
--- a/packages/atomic-elements/src/components/Fields/SearchField/SearchField.component.tsx
+++ b/packages/atomic-elements/src/components/Fields/SearchField/SearchField.component.tsx
@@ -1,7 +1,7 @@
 import React, { useRef } from "react";
 import { AriaSearchFieldProps, useSearchField } from "@react-aria/searchfield";
 import { useSearchFieldState } from "react-stately";
-import { AriaProps } from "../../../types";
+import { AriaProps, LoadingProps } from "../../../types";
 import { FieldProps } from "../Field";
 import { StyledField } from "../Field.styles";
 import { Provider } from "../../Internal/Provider";
@@ -18,16 +18,19 @@ import { useTranslations } from "@hooks/useTranslations";
 import { DEFAULT_SLOT } from "@hooks/useSlottedContext";
 import { useContextProps } from "@hooks/useContextProps";
 import { SearchFieldContext } from "./SearchField.context";
+import { ComboInputContext } from "../ComboInput";
 
 export interface SearchFieldProps
   extends FieldProps,
-    Omit<AriaProps<AriaSearchFieldProps>, "placeholder"> {}
+    Omit<AriaProps<AriaSearchFieldProps>, "placeholder">,
+    LoadingProps {}
 
 /** SearchField component - provides the foundation for search functionality */
 export const SearchField = React.forwardRef<HTMLDivElement, SearchFieldProps>(
   function SearchField(props, ref) {
     [props, ref] = useContextProps(SearchFieldContext, props, ref);
-    const { isDisabled, isRequired, isReadOnly, name } = props;
+    const { isDisabled, isRequired, isReadOnly, name, isLoading, loadingLabel } =
+      props;
 
     const inputRef = useRef<HTMLInputElement>(null);
     const state = useSearchFieldState(props);
@@ -76,6 +79,10 @@ export const SearchField = React.forwardRef<HTMLDivElement, SearchFieldProps>(
             [FieldInputContext.Provider, inputCtx],
             [FieldMessageContext.Provider, descriptionProps],
             [FieldErrorContext.Provider, { ...errorMessageProps, isInvalid }],
+            [
+              ComboInputContext.Provider,
+              { inputRef, isLoading, loadingLabel },
+            ],
             [
               ButtonContext.Provider,
               {
diff --git a/packages/atomic-elements/src/components/Inputs/Checkbox/Checkbox.component.tsx b/packages/atomic-elements/src/components/Inputs/Checkbox/Checkbox.component.tsx
index 9bc21649b..644771d8c 100644
--- a/packages/atomic-elements/src/components/Inputs/Checkbox/Checkbox.component.tsx
+++ b/packages/atomic-elements/src/components/Inputs/Checkbox/Checkbox.component.tsx
@@ -6,16 +6,22 @@ import {
   AriaProps,
   FieldStatusProps,
   HelpTextProps,
+  LoadingProps,
   RenderBaseProps,
 } from "../../../types";
 import { HiddenInput } from "../Inputs.styles";
-import { CheckBoxLabel, CheckboxWrapper } from "./Checkbox.styles";
+import {
+  CheckBoxLabel,
+  CheckboxWrapper,
+  StyledLoadingCheckbox,
+} from "./Checkbox.styles";
 import { ErrorMessage, Message } from "../../Fields";
 import { useContextProps } from "@hooks/useContextProps";
 import { CheckBoxContext } from "./Checkbox.context";
 import { SlotProps } from "@hooks/useSlottedContext";
 import { useRenderProps } from "@hooks";
 import { RequiredMarker } from "@components/Internal/RequiredMarker";
+import { useLoading } from "@components/Feedback/Loading";
 
 interface CheckBoxRenderProps {
   isSelected: boolean;
@@ -31,6 +37,7 @@ export interface CheckBoxProps
     Omit<HelpTextProps, "label">,
     FieldStatusProps,
     RenderBaseProps<CheckBoxRenderProps>,
+    LoadingProps,
     SlotProps {
   name?: string;
 }
@@ -59,6 +66,8 @@ export const CheckBox = React.forwardRef<HTMLInputElement, CheckBoxProps>(
       ref
     );
 
+    const { isLoading, loadingLabel } = useLoading(props);
+
     const renderProps = useRenderProps({
       componentClassName: "aje-checkbox",
       values: {
@@ -76,6 +85,7 @@ export const CheckBox = React.forwardRef<HTMLInputElement, CheckBoxProps>(
         "data-disabled": isDisabled,
         "data-readonly": isReadOnly,
         "data-required": isRequired,
+        "data-loading": isLoading,
       },
       ...props,
     });
@@ -89,8 +99,24 @@ export const CheckBox = React.forwardRef<HTMLInputElement, CheckBoxProps>(
           ref={ref}
           aria-checked={ariaChecked}
           name={name}
+          disabled={isLoading || inputProps.disabled}
         />
         <CheckBoxLabel {...labelProps} $rtl={direction === "rtl"}>
+          {isLoading && (
+            <StyledLoadingCheckbox
+              $rtl={direction === "rtl"}
+              title={loadingLabel}
+            >
+              <rect
+                x="0"
+                y="0"
+                width="100%"
+                height="100%"
+                rx="var(--checkbox-border-radius, 0)"
+                ry="var(--checkbox-border-radius, 0)"
+              />
+            </StyledLoadingCheckbox>
+          )}
           {renderProps.children}
           {isRequired && <RequiredMarker />}
           {message && <Message>{message}</Message>}
diff --git a/packages/atomic-elements/src/components/Inputs/Checkbox/Checkbox.styles.ts b/packages/atomic-elements/src/components/Inputs/Checkbox/Checkbox.styles.ts
index ec51d2dee..73db05679 100644
--- a/packages/atomic-elements/src/components/Inputs/Checkbox/Checkbox.styles.ts
+++ b/packages/atomic-elements/src/components/Inputs/Checkbox/Checkbox.styles.ts
@@ -2,6 +2,15 @@ import styled from "styled-components";
 import { DirectionProps } from "../../../types";
 import mixins from "@styles/mixins";
 import { direction } from "@styles/utils";
+import { SkeletonLoader } from "@components/Feedback/SkeletonLoader";
+
+export const StyledLoadingCheckbox = styled(SkeletonLoader)<DirectionProps>`
+  position: absolute;
+  top: 2px;
+  width: var(--checkbox-size);
+  height: var(--checkbox-size);
+  ${direction({ ltr: "left: 2px;", rtl: "right: 2px;" })}
+`;
 
 export const CheckBoxLabel = styled.span<DirectionProps>`
   ${mixins.Regular}
@@ -81,4 +90,13 @@ export const CheckboxWrapper = styled.div<DirectionProps>`
     cursor: auto;
     opacity: 0.5;
   }
+
+  &[data-loading] ${CheckBoxLabel} {
+    cursor: auto;
+
+    &:before,
+    &:after {
+      visibility: hidden;
+    }
+  }
 `;
diff --git a/packages/atomic-elements/src/components/Inputs/FileInput/FileInput.component.tsx b/packages/atomic-elements/src/components/Inputs/FileInput/FileInput.component.tsx
index a25551757..f8eca5e05 100644
--- a/packages/atomic-elements/src/components/Inputs/FileInput/FileInput.component.tsx
+++ b/packages/atomic-elements/src/components/Inputs/FileInput/FileInput.component.tsx
@@ -11,11 +11,13 @@ import {
   FileInputStrong,
   FileInputWrapper,
   StyledFileInputButton,
+  StyledLoadingFileInput,
 } from "./FileInput.styles";
 import { ErrorMessage, Message } from "../../Fields";
 import { FileTrigger } from "@components/Buttons/FileTrigger";
 import { useFocusRing } from "@hooks/useFocusRing";
 import { DropZone } from "@components/DragAndDrop/DropZone";
+import { useLoading } from "@components/Feedback/Loading";
 
 export interface FileInputProps
   extends Omit<FieldInputProps, "isReadOnly">,
@@ -56,9 +58,13 @@ export const FileInput = React.forwardRef<HTMLInputElement, FileInputProps>(
       id = inputId,
       acceptedFileTypes,
       name,
+      isLoading: _isLoading,
+      loadingLabel: _loadingLabel,
       ...rest
     } = props;
 
+    const { isLoading, loadingLabel } = useLoading(props);
+
     const renderProps = useRenderProps({
       componentClassName: "aje-input__file",
       className,
@@ -70,6 +76,16 @@ export const FileInput = React.forwardRef<HTMLInputElement, FileInputProps>(
       },
     });
 
+    if (isLoading) {
+      return (
+        <FileInputWrapper {...renderProps}>
+          <StyledLoadingFileInput title={loadingLabel}>
+            <rect x="0" y="0" width="100%" height="100%" rx="5" ry="5" />
+          </StyledLoadingFileInput>
+        </FileInputWrapper>
+      );
+    }
+
     return (
       <FileInputWrapper {...renderProps} {...rest}>
         <DropZone
diff --git a/packages/atomic-elements/src/components/Inputs/FileInput/FileInput.styles.ts b/packages/atomic-elements/src/components/Inputs/FileInput/FileInput.styles.ts
index 3f8b37fbb..e2ed4b342 100644
--- a/packages/atomic-elements/src/components/Inputs/FileInput/FileInput.styles.ts
+++ b/packages/atomic-elements/src/components/Inputs/FileInput/FileInput.styles.ts
@@ -1,5 +1,12 @@
 import styled from "styled-components";
 import mixins from "../../../styles/mixins";
+import { SkeletonLoader } from "@components/Feedback/SkeletonLoader";
+
+export const StyledLoadingFileInput = styled(SkeletonLoader)`
+  width: 287px;
+  height: 38px;
+  display: inline-block;
+`;
 
 export const FileInputSpan = styled.span`
   width: 200px;
diff --git a/packages/atomic-elements/src/components/Inputs/RadioGroup/RadioGroup.component.tsx b/packages/atomic-elements/src/components/Inputs/RadioGroup/RadioGroup.component.tsx
index ca7e0ca5d..c782d77cf 100644
--- a/packages/atomic-elements/src/components/Inputs/RadioGroup/RadioGroup.component.tsx
+++ b/packages/atomic-elements/src/components/Inputs/RadioGroup/RadioGroup.component.tsx
@@ -6,21 +6,30 @@ import {
   FieldStatusProps,
   RenderBaseProps,
   HelpTextProps,
+  LoadingProps,
 } from "../../../types";
 import { RadioGroupContext } from "./context";
-import { RadioGroupWrapper } from "./RadioGroup.styles";
+import {
+  RadioGroupWrapper,
+  StyledLoadingOptions,
+  StyledLoadingOption,
+} from "./RadioGroup.styles";
 import { Label, ErrorMessage, Message } from "../../Fields";
 import { useRenderProps } from "@hooks/useRenderProps";
 import { RequiredMarker } from "@components/Internal/RequiredMarker";
+import { useLoading } from "@components/Feedback/Loading";
 
 export interface RadioGroupsProps
   extends AriaProps<AriaRadioGroupProps>,
     HelpTextProps,
     FieldStatusProps,
-    RenderBaseProps<FieldStatusProps> {
+    RenderBaseProps<FieldStatusProps>,
+    LoadingProps {
   name?: string;
 }
 
+const LOADING_OPTION_COUNT = 3;
+
 /**
  *
  * Radio groups should be used for a choice selection of 3-5 options. There may be a few cases where you can use
@@ -36,6 +45,8 @@ export function RadioGroup(props: RadioGroupsProps) {
   const { radioGroupProps, labelProps, descriptionProps, errorMessageProps } =
     useRadioGroup(props, state);
 
+  const { isLoading, loadingLabel } = useLoading(props);
+
   const renderProps = useRenderProps({
     componentClassName: "aje-radio-group",
     ...props,
@@ -53,6 +64,30 @@ export function RadioGroup(props: RadioGroupsProps) {
     },
   });
 
+  if (isLoading) {
+    return (
+      <RadioGroupWrapper
+        {...radioGroupProps}
+        {...renderProps}
+        name={props.name}
+      >
+        <Label as="legend" {...labelProps}>
+          {label}
+        </Label>
+        <StyledLoadingOptions>
+          {Array.from({ length: LOADING_OPTION_COUNT }).map((_, index) => (
+            <StyledLoadingOption
+              key={index}
+              title={index === 0 ? loadingLabel : undefined}
+            >
+              <rect x="0" y="0" width="100%" height="100%" rx="4" ry="4" />
+            </StyledLoadingOption>
+          ))}
+        </StyledLoadingOptions>
+      </RadioGroupWrapper>
+    );
+  }
+
   return (
     <RadioGroupWrapper {...radioGroupProps} {...renderProps} name={props.name}>
       <Label as="legend" {...labelProps}>
diff --git a/packages/atomic-elements/src/components/Inputs/RadioGroup/RadioGroup.styles.ts b/packages/atomic-elements/src/components/Inputs/RadioGroup/RadioGroup.styles.ts
index affddb3aa..dcd268e93 100644
--- a/packages/atomic-elements/src/components/Inputs/RadioGroup/RadioGroup.styles.ts
+++ b/packages/atomic-elements/src/components/Inputs/RadioGroup/RadioGroup.styles.ts
@@ -2,6 +2,19 @@ import styled from "styled-components";
 import { DirectionProps } from "../../../types";
 import mixins from "@styles/mixins";
 import { direction } from "@styles/utils";
+import { SkeletonLoader } from "@components/Feedback/SkeletonLoader";
+
+export const StyledLoadingOptions = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+`;
+
+export const StyledLoadingOption = styled(SkeletonLoader)`
+  width: 160px;
+  height: var(--radio-label-height);
+  display: block;
+`;
 
 export const RadioLabel = styled.span<DirectionProps>`
   ${mixins.Regular}
diff --git a/packages/atomic-elements/src/components/Inputs/ToggleSwitch/ToggleSwitch.component.tsx b/packages/atomic-elements/src/components/Inputs/ToggleSwitch/ToggleSwitch.component.tsx
index 86a0797cc..14b804905 100644
--- a/packages/atomic-elements/src/components/Inputs/ToggleSwitch/ToggleSwitch.component.tsx
+++ b/packages/atomic-elements/src/components/Inputs/ToggleSwitch/ToggleSwitch.component.tsx
@@ -5,23 +5,26 @@ import type { AriaLabelingProps } from "@react-types/shared";
 import { useSwitch, AriaSwitchProps } from "@react-aria/switch";
 import { VisuallyHidden } from "@react-aria/visually-hidden";
 
-import { AriaProps, BaseProps, FieldDomProps } from "../../../types";
+import { AriaProps, BaseProps, FieldDomProps, LoadingProps } from "../../../types";
 import {
   ToggleSwitchIcon,
   ToggleSwitchContainer,
   ToggleSwitchLabel,
   ToggleSwitchWrapper,
+  StyledLoadingToggleSwitch,
 } from "./ToggleSwitch.styles";
 import { useForwardedRef } from "../../../hooks/useForwardedRef";
 import { useFirstStateChange } from "../../../hooks/util";
 import { useFocusRing } from "../../../hooks/useFocusRing";
 import { fieldStatusSelectors, useRenderProps } from "@hooks/useRenderProps";
+import { useLoading } from "@components/Feedback/Loading";
 
 export interface ToggleSwitchProps
   extends AriaProps<AriaSwitchProps>,
     AriaLabelingProps,
     FieldDomProps,
-    BaseProps {
+    BaseProps,
+    LoadingProps {
   /** The position of the children relative to the switch */
   childrenPosition?: "left" | "right";
   isDisabled?: boolean;
@@ -45,11 +48,12 @@ export const ToggleSwitch = React.forwardRef<
   const changed = useFirstStateChange(state.isSelected);
 
   const { childrenPosition = "left" } = props;
+  const { isLoading, loadingLabel } = useLoading(props);
 
   const renderProps = useRenderProps({
     componentClassName: "aje-toggle-switch",
     ...props,
-    selectors: fieldStatusSelectors(props),
+    selectors: { ...fieldStatusSelectors(props), "data-loading": isLoading },
   });
 
   return (
@@ -63,14 +67,32 @@ export const ToggleSwitch = React.forwardRef<
         })}
       >
         <VisuallyHidden>
-          <input {...inputProps} {...focusProps} ref={internalRef} />
+          <input
+            {...inputProps}
+            {...focusProps}
+            ref={internalRef}
+            disabled={isLoading || inputProps.disabled}
+          />
         </VisuallyHidden>
 
         {childrenPosition === "left" && renderProps.children}
 
-        <ToggleSwitchContainer data-focus-visible={isFocusVisible}>
-          <ToggleSwitchIcon />
-        </ToggleSwitchContainer>
+        {isLoading ? (
+          <StyledLoadingToggleSwitch title={loadingLabel}>
+            <rect
+              x="0"
+              y="0"
+              width="100%"
+              height="100%"
+              rx="calc(var(--toggle-size) / 2)"
+              ry="calc(var(--toggle-size) / 2)"
+            />
+          </StyledLoadingToggleSwitch>
+        ) : (
+          <ToggleSwitchContainer data-focus-visible={isFocusVisible}>
+            <ToggleSwitchIcon />
+          </ToggleSwitchContainer>
+        )}
 
         {childrenPosition === "right" && renderProps.children}
       </ToggleSwitchLabel>
diff --git a/packages/atomic-elements/src/components/Inputs/ToggleSwitch/ToggleSwitch.styles.ts b/packages/atomic-elements/src/components/Inputs/ToggleSwitch/ToggleSwitch.styles.ts
index ee2f36e31..903bdf24c 100644
--- a/packages/atomic-elements/src/components/Inputs/ToggleSwitch/ToggleSwitch.styles.ts
+++ b/packages/atomic-elements/src/components/Inputs/ToggleSwitch/ToggleSwitch.styles.ts
@@ -1,5 +1,12 @@
 import styled, { keyframes } from "styled-components";
 import mixins from "../../../styles/mixins";
+import { SkeletonLoader } from "@components/Feedback/SkeletonLoader";
+
+export const StyledLoadingToggleSwitch = styled(SkeletonLoader)`
+  width: calc(var(--toggle-size) * 1.666);
+  height: var(--toggle-size);
+  display: inline-block;
+`;
 
 const squishy = keyframes`
   0% {
diff --git a/packages/atomic-elements/src/components/Internal/BaseButton.tsx b/packages/atomic-elements/src/components/Internal/BaseButton.tsx
index 285c7207f..6f9bdda00 100644
--- a/packages/atomic-elements/src/components/Internal/BaseButton.tsx
+++ b/packages/atomic-elements/src/components/Internal/BaseButton.tsx
@@ -13,6 +13,7 @@ import { SpinnerLoader } from "@components/Feedback/SpinnerLoader";
 import { useRenderProps } from "@hooks";
 import { useFocusRing } from "@hooks/useFocusRing";
 import { useButtonLink } from "@hooks/useButtonLink";
+import { useLoading } from "@components/Feedback/Loading";
 
 export type ButtonVariants = SuggestStrings<
   | "primary"
@@ -57,14 +58,14 @@ export const BaseButton = forwardRef<HTMLButtonElement, BaseButtonProps>(
 
     const {
       Component,
-      isLoading = false,
-      loadingLabel,
       loadingComplete = false,
       as = props.href ? "a" : "button",
       variant = "primary",
       size = "auto",
     } = props;
 
+    const { isLoading = false, loadingLabel } = useLoading(props);
+
     const { buttonProps, isPressed } = useButtonLink(
       {
         ...props,
diff --git a/packages/atomic-elements/src/types/fields.ts b/packages/atomic-elements/src/types/fields.ts
index f6f37e44d..8e65d1610 100644
--- a/packages/atomic-elements/src/types/fields.ts
+++ b/packages/atomic-elements/src/types/fields.ts
@@ -1,4 +1,4 @@
-import { BaseProps } from "./common";
+import { BaseProps, LoadingProps } from "./common";
 
 export interface HelpMessageProps {
   /** For additional information (ex. date format mm/dd/yy) */
@@ -48,4 +48,5 @@ export interface FieldInputProps
   extends BaseProps,
     HelpTextProps,
     FieldStatusProps,
-    FieldDomProps {}
+    FieldDomProps,
+    LoadingProps {}
diff --git a/playground/src/Playground.tsx b/playground/src/Playground.tsx
index 11dfa280a..fbed8e400 100644
--- a/playground/src/Playground.tsx
+++ b/playground/src/Playground.tsx
@@ -9,7 +9,7 @@ import Aria from "./tabs/Aria";
 import Localization from "./tabs/Localization";
 import Overlays from "./tabs/Overlays";
 import Fields from "./tabs/Fields";
-import Loading from "./tabs/Loading";
+import LoadingStates from "./tabs/LoadingStates";
 import Links from "./tabs/Links";
 import { DateAndTime } from "./tabs/DateAndTime";
 import { Home } from "./tabs/Home";
@@ -28,8 +28,8 @@ function Playground() {
           <Tabs.Tab id="localization">Localization</Tabs.Tab>
           <Tabs.Tab id="overlays">Overlays</Tabs.Tab>
           <Tabs.Tab id="fields">Fields</Tabs.Tab>
+          <Tabs.Tab id="loadingstates">Loading States</Tabs.Tab>
           <Tabs.Tab id="dateandtime">Date and Time</Tabs.Tab>
-          <Tabs.Tab id="loading">Loading</Tabs.Tab>
           <Tabs.Tab id="links">Links</Tabs.Tab>
           <Tabs.Tab id="aria">Aria</Tabs.Tab>
         </Tabs.List>
@@ -62,12 +62,12 @@ function Playground() {
           <Fields />
         </Tabs.Panel>
 
-        <Tabs.Panel id="dateandtime">
-          <DateAndTime />
+        <Tabs.Panel id="loadingstates">
+          <LoadingStates />
         </Tabs.Panel>
 
-        <Tabs.Panel id="loading">
-          <Loading />
+        <Tabs.Panel id="dateandtime">
+          <DateAndTime />
         </Tabs.Panel>
 
         <Tabs.Panel id="links">
diff --git a/playground/src/tabs/Fields.tsx b/playground/src/tabs/Fields.tsx
index c1145428f..1d4bd31df 100644
--- a/playground/src/tabs/Fields.tsx
+++ b/playground/src/tabs/Fields.tsx
@@ -232,7 +232,6 @@ export default function Fields() {
           error="Error"
           label="Label"
           placeholder="Select an item"
-          variant="floating"
         >
           <Item>Item 1</Item>
           <Item>Item 2</Item>
diff --git a/playground/src/tabs/Loading.tsx b/playground/src/tabs/Loading.tsx
deleted file mode 100644
index 725097e3e..000000000
--- a/playground/src/tabs/Loading.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import React, { useState } from "react";
-import { Button, LoadingStatus } from "@atomicjolt/atomic-elements";
-
-interface Data {
-  name: string;
-  age: number;
-}
-
-const data: Data = {
-  name: "John Doe",
-  age: 30,
-};
-
-export default function Loading() {
-  const [isLoading, setIsLoading] = useState(false);
-  const [maybeData, setMaybeData] = useState<Data | null>(null);
-
-  return (
-    <div>
-      <Button onPress={() => setIsLoading(!isLoading)}>Toggle Loading</Button>
-      <Button
-        onPress={() => {
-          if (maybeData === null) setMaybeData(data);
-          else setMaybeData(null);
-        }}
-      >
-        Toggle Data
-      </Button>
-      <LoadingStatus
-        isLoading={isLoading}
-        data={maybeData}
-        fallback={<div>No data available</div>}
-      >
-        {(data) => <div>{data.age}</div>}
-      </LoadingStatus>
-    </div>
-  );
-}
diff --git a/playground/src/tabs/LoadingStates.tsx b/playground/src/tabs/LoadingStates.tsx
new file mode 100644
index 000000000..db4b54af0
--- /dev/null
+++ b/playground/src/tabs/LoadingStates.tsx
@@ -0,0 +1,285 @@
+import React, { useState } from "react";
+import {
+  Button,
+  CheckBox,
+  ComboBox,
+  CustomSelect,
+  FileInput,
+  Flex,
+  Heading,
+  IconButton,
+  Item,
+  Loading,
+  LoadingStatus,
+  MultiSelect,
+  NumberInput,
+  Radio,
+  RadioGroup,
+  SearchInput,
+  Strong,
+  Table,
+  Text,
+  TextAreaInput,
+  TextInput,
+  ToggleSwitch,
+} from "../elements";
+
+interface Data {
+  name: string;
+  age: number;
+}
+
+const data: Data = {
+  name: "John Doe",
+  age: 30,
+};
+
+export default function LoadingStates() {
+  const [isLoading, setIsLoading] = useState(false);
+  const [number, setNumber] = useState(0);
+  const [maybeData, setMaybeData] = useState<Data | null>(null);
+
+  return (
+    <div style={{ padding: "16px" }}>
+      <ToggleSwitch isSelected={isLoading} onChange={setIsLoading}>
+        Loading
+      </ToggleSwitch>
+      <hr />
+      <Heading as="h2" $size="7">
+        Local isLoading prop
+      </Heading>
+      <Text as="p" $size="3">
+        Each component below is passed isLoading directly.
+      </Text>
+      <Heading as="h3" $size="5">
+        Button / IconButton
+      </Heading>
+      <Flex $gap="2">
+        <Button isLoading={isLoading} loadingLabel="Loading">
+          Submit
+        </Button>{" "}
+        <IconButton
+          icon="add"
+          aria-label="Add"
+          isLoading={isLoading}
+          loadingLabel="Loading"
+        />
+      </Flex>
+      <hr />
+      <Heading as="h3" $size="5">
+        CheckBox / ToggleSwitch / RadioGroup
+      </Heading>
+      <CheckBox isLoading={isLoading} loadingLabel="Loading">
+        Subscribe to newsletter
+      </CheckBox>
+      <br />
+      <ToggleSwitch isLoading={isLoading} loadingLabel="Loading">
+        Enable notifications
+      </ToggleSwitch>
+      <br />
+      <RadioGroup
+        label="Favorite color"
+        isLoading={isLoading}
+        loadingLabel="Loading"
+      >
+        <Radio value="red">Red</Radio>
+        <Radio value="green">Green</Radio>
+        <Radio value="blue">Blue</Radio>
+      </RadioGroup>
+      <hr />
+      <Heading as="h3" $size="5">
+        FileInput
+      </Heading>
+      <FileInput label="Upload" isLoading={isLoading} loadingLabel="Loading" />
+      <hr />
+      <Heading as="h3" $size="5">
+        CustomSelect / MultiSelect / ComboBox
+      </Heading>
+      <CustomSelect
+        label="Custom Select"
+        placeholder="Select an item"
+        isLoading={isLoading}
+        loadingLabel="Loading"
+      >
+        <Item>Item 1</Item>
+        <Item>Item 2</Item>
+        <Item>Item 3</Item>
+      </CustomSelect>
+      <br />
+      <MultiSelect
+        label="Multi Select"
+        isLoading={isLoading}
+        loadingLabel="Loading"
+      >
+        <Item>Item 1</Item>
+        <Item>Item 2</Item>
+        <Item>Item 3</Item>
+      </MultiSelect>
+      <br />
+      <ComboBox
+        label="Combo Box"
+        placeholder="Select an item"
+        isLoading={isLoading}
+        loadingLabel="Loading"
+      >
+        <Item>Item 1</Item>
+        <Item>Item 2</Item>
+        <Item>Item 3</Item>
+      </ComboBox>
+      <hr />
+      <Heading as="h3" $size="5">
+        NumberInput / SearchInput / TextInput / TextAreaInput
+      </Heading>
+      <NumberInput
+        label="Number"
+        value={number}
+        onChange={setNumber}
+        isLoading={isLoading}
+        loadingLabel="Loading"
+      />
+      <br />
+      <SearchInput
+        label="Search"
+        onSubmit={(value) => console.log(value)}
+        isLoading={isLoading}
+        loadingLabel="Loading"
+      />
+      <br />
+      <TextInput label="Text" isLoading={isLoading} loadingLabel="Loading" />
+      <br />
+      <TextAreaInput
+        label="Text Area"
+        isLoading={isLoading}
+        loadingLabel="Loading"
+      />
+      <hr />
+      <Heading as="h3" $size="5">
+        Table
+      </Heading>
+      <Table aria-label="Table">
+        <Table.Header>
+          <Table.Column id="foo">Foo</Table.Column>
+          <Table.Column id="bar">Bar</Table.Column>
+          <Table.Column id="baz">Baz</Table.Column>
+        </Table.Header>
+        <Table.Body isLoading={isLoading} loadingRows={3}>
+          <Table.Row id="row 1">
+            <Table.Cell>Foo 1</Table.Cell>
+            <Table.Cell>Bar 1</Table.Cell>
+            <Table.Cell>Baz 1</Table.Cell>
+          </Table.Row>
+          <Table.Row id="row 2">
+            <Table.Cell>Foo 2</Table.Cell>
+            <Table.Cell>Bar 2</Table.Cell>
+            <Table.Cell>Baz 2</Table.Cell>
+          </Table.Row>
+          <Table.Row id="row 3">
+            <Table.Cell>Foo 3</Table.Cell>
+            <Table.Cell>Bar 3</Table.Cell>
+            <Table.Cell>Baz 3</Table.Cell>
+          </Table.Row>
+        </Table.Body>
+      </Table>
+      <hr />
+      <Heading as="h3" $size="5">
+        LoadingStatus
+      </Heading>
+      <ToggleSwitch
+        isSelected={maybeData != null}
+        onChange={(isSelected) => setMaybeData(isSelected ? data : null)}
+      >
+        Toggle Data
+      </ToggleSwitch>
+      <LoadingStatus
+        isLoading={isLoading}
+        data={maybeData}
+        fallback={
+          <Text $size="4" as="div">
+            No data available
+          </Text>
+        }
+      >
+        {(data) => (
+          <Text $size="4" as="div">
+            The user's age is: <Strong>{data.age}</Strong>
+          </Text>
+        )}
+      </LoadingStatus>
+      <hr />
+      <Heading as="h2" $size="7">
+        Ambient Loading provider
+      </Heading>
+      <Text as="p" $size="3">
+        Everything below is wrapped in a single Loading provider — none of these
+        components are passed isLoading directly, they all pick it up from
+        context.
+      </Text>
+      <Loading isLoading={isLoading}>
+        <Flex $gap="2">
+          <Button>Submit</Button> <IconButton icon="add" aria-label="Add" />
+        </Flex>
+        <br />
+        <br />
+        <CheckBox>Subscribe to newsletter</CheckBox>
+        <br />
+        <ToggleSwitch>Enable notifications</ToggleSwitch>
+        <br />
+        <RadioGroup label="Favorite color">
+          <Radio value="red">Red</Radio>
+          <Radio value="green">Green</Radio>
+          <Radio value="blue">Blue</Radio>
+        </RadioGroup>
+        <hr />
+        <FileInput label="Upload" />
+        <hr />
+        <CustomSelect label="Custom Select" placeholder="Select an item">
+          <Item>Item 1</Item>
+          <Item>Item 2</Item>
+          <Item>Item 3</Item>
+        </CustomSelect>
+        <br />
+        <MultiSelect label="Multi Select">
+          <Item>Item 1</Item>
+          <Item>Item 2</Item>
+          <Item>Item 3</Item>
+        </MultiSelect>
+        <br />
+        <ComboBox label="Combo Box" placeholder="Select an item">
+          <Item>Item 1</Item>
+          <Item>Item 2</Item>
+          <Item>Item 3</Item>
+        </ComboBox>
+        <hr />
+        <NumberInput label="Number" />
+        <br />
+        <SearchInput label="Search" onSubmit={(value) => console.log(value)} />
+        <br />
+        <TextInput label="Text" />
+        <br />
+        <TextAreaInput label="Text Area" />
+        <hr />
+        <ToggleSwitch
+          isSelected={maybeData != null}
+          onChange={(isSelected) => setMaybeData(isSelected ? data : null)}
+          isLoading={false}
+        >
+          Toggle Data
+        </ToggleSwitch>
+        <LoadingStatus
+          data={maybeData}
+          fallback={
+            <Text $size="4" as="div">
+              No data available
+            </Text>
+          }
+        >
+          {(data) => (
+            <Text $size="4" as="div">
+              The user's age is: <Strong>{data.age}</Strong>
+            </Text>
+          )}
+        </LoadingStatus>
+      </Loading>
+    </div>
+  );
+}

From a05a43f69a479c1ce4ccfc33b3449f89f847ca23 Mon Sep 17 00:00:00 2001
From: Sean Collings <sean.collings@atomicjolt.com>
Date: Tue, 1 Sep 2026 14:49:36 -0600
Subject: [PATCH 3/8] fix: Dropdown loading sizes

---
 .../Dropdowns/Combobox/ComboBox.component.tsx | 18 +++--
 .../Dropdowns/Combobox/Combobox.styles.ts     |  2 +-
 .../CustomSelect/CustomSelect.component.tsx   |  8 +-
 .../CustomSelect/CustomSelect.styles.ts       |  2 +-
 .../MultiSelect/MultiSelect.component.tsx     |  3 +
 .../MultiSelect/MultiSelect.styles.ts         |  2 +-
 playground/src/tabs/LoadingStates.tsx         | 80 ++++++++++++++-----
 7 files changed, 82 insertions(+), 33 deletions(-)

diff --git a/packages/atomic-elements/src/components/Dropdowns/Combobox/ComboBox.component.tsx b/packages/atomic-elements/src/components/Dropdowns/Combobox/ComboBox.component.tsx
index 633cc1b34..30994708d 100644
--- a/packages/atomic-elements/src/components/Dropdowns/Combobox/ComboBox.component.tsx
+++ b/packages/atomic-elements/src/components/Dropdowns/Combobox/ComboBox.component.tsx
@@ -1,5 +1,5 @@
+import React, { forwardRef, type JSX } from "react";
 import { AriaComboBoxProps } from "@react-aria/combobox";
-
 import {
   AriaProps,
   CanHaveIcon,
@@ -14,10 +14,8 @@ import { ListBox } from "../ListBox";
 import { ComboInput, Input } from "../../Fields";
 import { MaterialIcon } from "@components/Icons/MaterialIcon";
 import { FloatingFieldInputWrapper } from "@components/Internal/FloatingFieldInputWrapper";
-import {
-  StyledComboBoxField,
-  StyledLoadingComboBox,
-} from "./Combobox.styles";
+import { StyledComboBoxField, StyledLoadingComboBox } from "./Combobox.styles";
+import { useRenderProps } from "@hooks";
 import { useLoading } from "@components/Feedback/Loading";
 
 export interface ComboBoxProps<T>
@@ -31,8 +29,6 @@ export interface ComboBoxProps<T>
 }
 
 /** Combox combinds a text input field with a dropdown list of options for the user to select from */
-import React, { forwardRef, type JSX } from "react";
-
 export const ComboBox = forwardRef(function ComboBox<T extends object>(
   props: ComboBoxProps<T>,
   ref: React.Ref<HTMLInputElement>
@@ -47,10 +43,18 @@ export const ComboBox = forwardRef(function ComboBox<T extends object>(
     variant = "default",
     maxHeight = 300,
     dropdownPlacement = "bottom start",
+    size = "medium",
   } = props;
 
   const { isLoading, loadingLabel } = useLoading(props);
 
+  const renderProps = useRenderProps({
+    componentClassName: "aje-combobox",
+    variant,
+    size,
+    ...props,
+  });
+
   if (isLoading) {
     return (
       <StyledComboBoxField {...props} ref={ref}>
diff --git a/packages/atomic-elements/src/components/Dropdowns/Combobox/Combobox.styles.ts b/packages/atomic-elements/src/components/Dropdowns/Combobox/Combobox.styles.ts
index a80e7a5de..ccf6ed737 100644
--- a/packages/atomic-elements/src/components/Dropdowns/Combobox/Combobox.styles.ts
+++ b/packages/atomic-elements/src/components/Dropdowns/Combobox/Combobox.styles.ts
@@ -4,7 +4,7 @@ import { ComboBoxField } from "@components/Fields/ComboBoxField";
 import { SkeletonLoader } from "@components/Feedback/SkeletonLoader";
 
 export const StyledLoadingComboBox = styled(SkeletonLoader)`
-  width: 200px;
+  width: var(--size-x);
   max-width: 100%;
   height: var(--input-height, 40px);
   display: block;
diff --git a/packages/atomic-elements/src/components/Dropdowns/CustomSelect/CustomSelect.component.tsx b/packages/atomic-elements/src/components/Dropdowns/CustomSelect/CustomSelect.component.tsx
index 6bd9eafee..056316c57 100644
--- a/packages/atomic-elements/src/components/Dropdowns/CustomSelect/CustomSelect.component.tsx
+++ b/packages/atomic-elements/src/components/Dropdowns/CustomSelect/CustomSelect.component.tsx
@@ -12,10 +12,7 @@ import { Popover } from "../../Overlays/Popover";
 import { ListBox } from "../ListBox";
 import { SelectField } from "@components/Fields/SelectField";
 import { FloatingFieldInputWrapper } from "@components/Internal/FloatingFieldInputWrapper";
-import {
-  StyledLoadingSelect,
-  StyledSelectField,
-} from "./CustomSelect.styles";
+import { StyledLoadingSelect, StyledSelectField } from "./CustomSelect.styles";
 import { Button } from "@components/Buttons/Button";
 import { MaterialIcon } from "@components/Icons/MaterialIcon";
 import { useLoading } from "@components/Feedback/Loading";
@@ -46,6 +43,7 @@ export const CustomSelect = forwardRef(function CustomSelect<T extends object>(
     variant = "default",
     maxHeight = 300,
     dropdownPlacement = "bottom start",
+    size = "medium",
   } = props;
 
   const t = useTranslations();
@@ -57,6 +55,8 @@ export const CustomSelect = forwardRef(function CustomSelect<T extends object>(
   const renderProps = useRenderProps({
     componentClassName: "aje-select",
     variant,
+    size,
+    ...props,
   });
 
   const buttonVariant = buttonVariantMap[variant] ?? "dropdown";
diff --git a/packages/atomic-elements/src/components/Dropdowns/CustomSelect/CustomSelect.styles.ts b/packages/atomic-elements/src/components/Dropdowns/CustomSelect/CustomSelect.styles.ts
index 4e01c776c..15e722e40 100644
--- a/packages/atomic-elements/src/components/Dropdowns/CustomSelect/CustomSelect.styles.ts
+++ b/packages/atomic-elements/src/components/Dropdowns/CustomSelect/CustomSelect.styles.ts
@@ -5,7 +5,7 @@ import { SelectField } from "@components/Fields/SelectField";
 import { SkeletonLoader } from "@components/Feedback/SkeletonLoader";
 
 export const StyledLoadingSelect = styled(SkeletonLoader)`
-  width: 200px;
+  width: var(--size-x);
   max-width: 100%;
   height: var(--input-height, 40px);
   display: block;
diff --git a/packages/atomic-elements/src/components/Dropdowns/MultiSelect/MultiSelect.component.tsx b/packages/atomic-elements/src/components/Dropdowns/MultiSelect/MultiSelect.component.tsx
index 0f6b62df2..35fd955e8 100644
--- a/packages/atomic-elements/src/components/Dropdowns/MultiSelect/MultiSelect.component.tsx
+++ b/packages/atomic-elements/src/components/Dropdowns/MultiSelect/MultiSelect.component.tsx
@@ -41,6 +41,7 @@ export function MultiSelect<T extends object>(props: MultiSelectProps<T>) {
     variant = "default",
     maxHeight = 300,
     dropdownPlacement = "bottom start",
+    size = "medium",
   } = props;
 
   const { isLoading, loadingLabel } = useLoading(props);
@@ -48,6 +49,8 @@ export function MultiSelect<T extends object>(props: MultiSelectProps<T>) {
   const renderProps = useRenderProps({
     componentClassName: "aje-multiselect",
     variant,
+    size,
+    ...props,
   });
 
   const buttonVariant = buttonVariantMap[variant] ?? "dropdown";
diff --git a/packages/atomic-elements/src/components/Dropdowns/MultiSelect/MultiSelect.styles.ts b/packages/atomic-elements/src/components/Dropdowns/MultiSelect/MultiSelect.styles.ts
index f39015fc8..24117d5d9 100644
--- a/packages/atomic-elements/src/components/Dropdowns/MultiSelect/MultiSelect.styles.ts
+++ b/packages/atomic-elements/src/components/Dropdowns/MultiSelect/MultiSelect.styles.ts
@@ -4,7 +4,7 @@ import { FloatingDropdown } from "../Dropdowns.styles";
 import { SkeletonLoader } from "@components/Feedback/SkeletonLoader";
 
 export const StyledLoadingMultiSelect = styled(SkeletonLoader)`
-  width: 200px;
+  width: var(--size-x);
   max-width: 100%;
   height: var(--input-height, 40px);
   display: block;
diff --git a/playground/src/tabs/LoadingStates.tsx b/playground/src/tabs/LoadingStates.tsx
index db4b54af0..fe6dc2e8a 100644
--- a/playground/src/tabs/LoadingStates.tsx
+++ b/playground/src/tabs/LoadingStates.tsx
@@ -4,6 +4,7 @@ import {
   CheckBox,
   ComboBox,
   CustomSelect,
+  ExtendedSize,
   FileInput,
   Flex,
   Heading,
@@ -22,7 +23,7 @@ import {
   TextAreaInput,
   TextInput,
   ToggleSwitch,
-} from "../elements";
+} from "@atomicjolt/atomic-elements";
 
 interface Data {
   name: string;
@@ -35,15 +36,30 @@ const data: Data = {
 };
 
 export default function LoadingStates() {
+  const [size, setSize] = useState<ExtendedSize>("medium");
   const [isLoading, setIsLoading] = useState(false);
   const [number, setNumber] = useState(0);
   const [maybeData, setMaybeData] = useState<Data | null>(null);
 
   return (
     <div style={{ padding: "16px" }}>
-      <ToggleSwitch isSelected={isLoading} onChange={setIsLoading}>
-        Loading
-      </ToggleSwitch>
+      <Flex $gap="2" $direction="column">
+        <ToggleSwitch isSelected={isLoading} onChange={setIsLoading}>
+          Loading
+        </ToggleSwitch>
+
+        <CustomSelect
+          label="Size"
+          selectedKey={size}
+          onSelectionChange={(key) => setSize(key as ExtendedSize)}
+        >
+          <Item id="small">Small</Item>
+          <Item id="medium">Medium</Item>
+          <Item id="large">Large</Item>
+          <Item id="auto">Auto</Item>
+          <Item id="full">Full</Item>
+        </CustomSelect>
+      </Flex>
       <hr />
       <Heading as="h2" $size="7">
         Local isLoading prop
@@ -55,12 +71,13 @@ export default function LoadingStates() {
         Button / IconButton
       </Heading>
       <Flex $gap="2">
-        <Button isLoading={isLoading} loadingLabel="Loading">
+        <Button size={size} isLoading={isLoading} loadingLabel="Loading">
           Submit
         </Button>{" "}
         <IconButton
           icon="add"
           aria-label="Add"
+          size={size}
           isLoading={isLoading}
           loadingLabel="Loading"
         />
@@ -73,7 +90,7 @@ export default function LoadingStates() {
         Subscribe to newsletter
       </CheckBox>
       <br />
-      <ToggleSwitch isLoading={isLoading} loadingLabel="Loading">
+      <ToggleSwitch size={size} isLoading={isLoading} loadingLabel="Loading">
         Enable notifications
       </ToggleSwitch>
       <br />
@@ -90,7 +107,12 @@ export default function LoadingStates() {
       <Heading as="h3" $size="5">
         FileInput
       </Heading>
-      <FileInput label="Upload" isLoading={isLoading} loadingLabel="Loading" />
+      <FileInput
+        label="Upload"
+        size={size}
+        isLoading={isLoading}
+        loadingLabel="Loading"
+      />
       <hr />
       <Heading as="h3" $size="5">
         CustomSelect / MultiSelect / ComboBox
@@ -98,6 +120,7 @@ export default function LoadingStates() {
       <CustomSelect
         label="Custom Select"
         placeholder="Select an item"
+        size={size}
         isLoading={isLoading}
         loadingLabel="Loading"
       >
@@ -108,6 +131,7 @@ export default function LoadingStates() {
       <br />
       <MultiSelect
         label="Multi Select"
+        size={size}
         isLoading={isLoading}
         loadingLabel="Loading"
       >
@@ -119,6 +143,7 @@ export default function LoadingStates() {
       <ComboBox
         label="Combo Box"
         placeholder="Select an item"
+        size={size}
         isLoading={isLoading}
         loadingLabel="Loading"
       >
@@ -134,6 +159,7 @@ export default function LoadingStates() {
         label="Number"
         value={number}
         onChange={setNumber}
+        size={size}
         isLoading={isLoading}
         loadingLabel="Loading"
       />
@@ -141,14 +167,21 @@ export default function LoadingStates() {
       <SearchInput
         label="Search"
         onSubmit={(value) => console.log(value)}
+        size={size}
         isLoading={isLoading}
         loadingLabel="Loading"
       />
       <br />
-      <TextInput label="Text" isLoading={isLoading} loadingLabel="Loading" />
+      <TextInput
+        label="Text"
+        size={size}
+        isLoading={isLoading}
+        loadingLabel="Loading"
+      />
       <br />
       <TextAreaInput
         label="Text Area"
+        size={size}
         isLoading={isLoading}
         loadingLabel="Loading"
       />
@@ -156,7 +189,7 @@ export default function LoadingStates() {
       <Heading as="h3" $size="5">
         Table
       </Heading>
-      <Table aria-label="Table">
+      <Table aria-label="Table" size={size}>
         <Table.Header>
           <Table.Column id="foo">Foo</Table.Column>
           <Table.Column id="bar">Bar</Table.Column>
@@ -216,13 +249,14 @@ export default function LoadingStates() {
       </Text>
       <Loading isLoading={isLoading}>
         <Flex $gap="2">
-          <Button>Submit</Button> <IconButton icon="add" aria-label="Add" />
+          <Button size={size}>Submit</Button>{" "}
+          <IconButton icon="add" aria-label="Add" size={size} />
         </Flex>
         <br />
         <br />
         <CheckBox>Subscribe to newsletter</CheckBox>
         <br />
-        <ToggleSwitch>Enable notifications</ToggleSwitch>
+        <ToggleSwitch size={size}>Enable notifications</ToggleSwitch>
         <br />
         <RadioGroup label="Favorite color">
           <Radio value="red">Red</Radio>
@@ -230,33 +264,41 @@ export default function LoadingStates() {
           <Radio value="blue">Blue</Radio>
         </RadioGroup>
         <hr />
-        <FileInput label="Upload" />
+        <FileInput label="Upload" size={size} />
         <hr />
-        <CustomSelect label="Custom Select" placeholder="Select an item">
+        <CustomSelect
+          label="Custom Select"
+          placeholder="Select an item"
+          size={size}
+        >
           <Item>Item 1</Item>
           <Item>Item 2</Item>
           <Item>Item 3</Item>
         </CustomSelect>
         <br />
-        <MultiSelect label="Multi Select">
+        <MultiSelect label="Multi Select" size={size}>
           <Item>Item 1</Item>
           <Item>Item 2</Item>
           <Item>Item 3</Item>
         </MultiSelect>
         <br />
-        <ComboBox label="Combo Box" placeholder="Select an item">
+        <ComboBox label="Combo Box" placeholder="Select an item" size={size}>
           <Item>Item 1</Item>
           <Item>Item 2</Item>
           <Item>Item 3</Item>
         </ComboBox>
         <hr />
-        <NumberInput label="Number" />
+        <NumberInput label="Number" size={size} />
         <br />
-        <SearchInput label="Search" onSubmit={(value) => console.log(value)} />
+        <SearchInput
+          label="Search"
+          onSubmit={(value) => console.log(value)}
+          size={size}
+        />
         <br />
-        <TextInput label="Text" />
+        <TextInput label="Text" size={size} />
         <br />
-        <TextAreaInput label="Text Area" />
+        <TextAreaInput label="Text Area" size={size} />
         <hr />
         <ToggleSwitch
           isSelected={maybeData != null}

From 6177a138da3d9ff68a837b9aea9f7656261bd029 Mon Sep 17 00:00:00 2001
From: Sean Collings <sean.collings@atomicjolt.com>
Date: Tue, 1 Sep 2026 15:01:50 -0600
Subject: [PATCH 4/8] feat: add Loading storybook stories

---
 .storybook/utils/helpers.tsx                  | 12 +++
 .../Dropdowns/Combobox/Combobox.stories.tsx   |  8 ++
 .../CustomSelect/CustomSelect.stories.tsx     |  8 ++
 .../MultiSelect/MultiSelect.stories.tsx       |  8 ++
 .../Feedback/Loading/Loading.stories.tsx      | 94 +++++++++++++++++++
 .../Fields/Atoms/Input/Input.stories.tsx      | 23 ++++-
 .../Atoms/TextArea/TextArea.stories.tsx       | 22 +++++
 .../Fields/ComboInput/ComboInput.stories.tsx  | 20 ++++
 .../Fields/TextField/TextField.stories.tsx    |  8 ++
 .../Inputs/Checkbox/Checkbox.stories.tsx      |  8 ++
 .../Inputs/FileInput/FileInput.stories.tsx    |  8 ++
 .../NumberInput/NumberInput.stories.tsx       |  8 ++
 .../Inputs/RadioGroup/RadioGroup.stories.tsx  |  8 ++
 .../SearchInput/SearchInput.stories.tsx       |  8 ++
 .../TextAreaInput/TextAreaInput.stories.tsx   |  8 ++
 .../Inputs/TextInput/TextInput.stories.tsx    |  8 ++
 .../ToggleSwitch/ToggleSwitch.stories.tsx     | 20 ++++
 17 files changed, 278 insertions(+), 1 deletion(-)
 create mode 100644 packages/atomic-elements/src/components/Feedback/Loading/Loading.stories.tsx

diff --git a/.storybook/utils/helpers.tsx b/.storybook/utils/helpers.tsx
index c71ef9843..5875a657c 100644
--- a/.storybook/utils/helpers.tsx
+++ b/.storybook/utils/helpers.tsx
@@ -31,6 +31,18 @@ export const FieldStateControls: ArgTypes = {
       category: "Field State",
     },
   },
+  isLoading: {
+    control: "boolean",
+    table: {
+      category: "Field State",
+    },
+  },
+  loadingLabel: {
+    control: "text",
+    table: {
+      category: "Field State",
+    },
+  },
 };
 
 export const InputControls: ArgTypes = {
diff --git a/packages/atomic-elements/src/components/Dropdowns/Combobox/Combobox.stories.tsx b/packages/atomic-elements/src/components/Dropdowns/Combobox/Combobox.stories.tsx
index 55476df9e..1a36d586d 100644
--- a/packages/atomic-elements/src/components/Dropdowns/Combobox/Combobox.stories.tsx
+++ b/packages/atomic-elements/src/components/Dropdowns/Combobox/Combobox.stories.tsx
@@ -85,6 +85,14 @@ export const Floating: Story = {
   },
 };
 
+export const Loading: Story = {
+  args: {
+    ...Primary.args,
+    isLoading: true,
+    loadingLabel: "Loading",
+  },
+};
+
 export const PrefixIcon: Story = {
   args: {
     ...Primary.args,
diff --git a/packages/atomic-elements/src/components/Dropdowns/CustomSelect/CustomSelect.stories.tsx b/packages/atomic-elements/src/components/Dropdowns/CustomSelect/CustomSelect.stories.tsx
index bd543fff8..e4d87d236 100644
--- a/packages/atomic-elements/src/components/Dropdowns/CustomSelect/CustomSelect.stories.tsx
+++ b/packages/atomic-elements/src/components/Dropdowns/CustomSelect/CustomSelect.stories.tsx
@@ -100,6 +100,14 @@ export const Floating: Story = {
   },
 };
 
+export const Loading: Story = {
+  args: {
+    ...Primary.args,
+    isLoading: true,
+    loadingLabel: "Loading",
+  },
+};
+
 export const WithCustomContent: Story = {
   args: {
     ...Primary.args,
diff --git a/packages/atomic-elements/src/components/Dropdowns/MultiSelect/MultiSelect.stories.tsx b/packages/atomic-elements/src/components/Dropdowns/MultiSelect/MultiSelect.stories.tsx
index 3f86df42f..e23af71cd 100644
--- a/packages/atomic-elements/src/components/Dropdowns/MultiSelect/MultiSelect.stories.tsx
+++ b/packages/atomic-elements/src/components/Dropdowns/MultiSelect/MultiSelect.stories.tsx
@@ -74,3 +74,11 @@ export const Floating: Story = {
     variant: "floating",
   },
 };
+
+export const Loading: Story = {
+  args: {
+    ...Default.args,
+    isLoading: true,
+    loadingLabel: "Loading",
+  },
+};
diff --git a/packages/atomic-elements/src/components/Feedback/Loading/Loading.stories.tsx b/packages/atomic-elements/src/components/Feedback/Loading/Loading.stories.tsx
new file mode 100644
index 000000000..59c48f0f3
--- /dev/null
+++ b/packages/atomic-elements/src/components/Feedback/Loading/Loading.stories.tsx
@@ -0,0 +1,94 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { Loading } from ".";
+import { Button } from "@components/Buttons/Button";
+import { CheckBox } from "@components/Inputs/Checkbox";
+import { NumberInput } from "@components/Inputs/NumberInput";
+import { SearchInput } from "@components/Inputs/SearchInput";
+import { TextInput } from "@components/Inputs/TextInput";
+
+const meta: Meta<typeof Loading> = {
+  title: "Feedback/Loading",
+  component: Loading,
+  argTypes: {
+    isLoading: {
+      control: "boolean",
+    },
+    loadingLabel: {
+      control: "text",
+    },
+    children: {
+      control: false,
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Loading>;
+
+export const Primary: Story = {
+  args: {
+    isLoading: true,
+    loadingLabel: "Loading",
+    children: <TextInput label="Name" placeholder="Jane Doe" />,
+  },
+};
+
+export const NotLoading: Story = {
+  args: {
+    ...Primary.args,
+    isLoading: false,
+  },
+};
+
+export const WrappingMultipleComponents: Story = {
+  args: {
+    isLoading: true,
+    loadingLabel: "Loading",
+    children: (
+      <>
+        <Button>Submit</Button>
+        <CheckBox>Subscribe to updates</CheckBox>
+      </>
+    ),
+  },
+};
+
+/**
+ * A more realistic example: a form with several different field types, all wrapped
+ * in a single `Loading` provider. None of the fields are passed `isLoading` directly -
+ * they all pick up the ambient state from context. Toggle the switch to see every
+ * field switch to its loading skeleton at once.
+ */
+export const ExampleForm: Story = {
+  args: {
+    isLoading: true,
+    loadingLabel: "Loading",
+    children: (
+      <>
+        <TextInput label="Name" isRequired />
+
+        <br />
+
+        <TextInput label="Email" isRequired />
+
+        <br />
+
+        <NumberInput label="Age" minValue={0} maxValue={120} />
+
+        <br />
+
+        <SearchInput label="Search contacts" onSubmit={() => {}} />
+
+        <br />
+
+        <CheckBox>Subscribe to updates</CheckBox>
+
+        <br />
+        <br />
+
+        <Button>Save</Button>
+      </>
+    ),
+  },
+};
diff --git a/packages/atomic-elements/src/components/Fields/Atoms/Input/Input.stories.tsx b/packages/atomic-elements/src/components/Fields/Atoms/Input/Input.stories.tsx
index b5cd3d102..7695f40f4 100644
--- a/packages/atomic-elements/src/components/Fields/Atoms/Input/Input.stories.tsx
+++ b/packages/atomic-elements/src/components/Fields/Atoms/Input/Input.stories.tsx
@@ -7,7 +7,20 @@ export default {
   parameters: {
     layout: "centered",
   },
-  argTypes: {},
+  argTypes: {
+    isLoading: {
+      control: "boolean",
+      table: {
+        category: "Field State",
+      },
+    },
+    loadingLabel: {
+      control: "text",
+      table: {
+        category: "Field State",
+      },
+    },
+  },
 } as Meta<typeof Input>;
 
 type Story = StoryObj<typeof Input>;
@@ -18,3 +31,11 @@ export const Primary: Story = {
     type: "text",
   },
 };
+
+export const Loading: Story = {
+  args: {
+    ...Primary.args,
+    isLoading: true,
+    loadingLabel: "Loading",
+  },
+};
diff --git a/packages/atomic-elements/src/components/Fields/Atoms/TextArea/TextArea.stories.tsx b/packages/atomic-elements/src/components/Fields/Atoms/TextArea/TextArea.stories.tsx
index 84499f5a7..2cb99fa2c 100644
--- a/packages/atomic-elements/src/components/Fields/Atoms/TextArea/TextArea.stories.tsx
+++ b/packages/atomic-elements/src/components/Fields/Atoms/TextArea/TextArea.stories.tsx
@@ -7,6 +7,20 @@ export default {
   parameters: {
     layout: "centered",
   },
+  argTypes: {
+    isLoading: {
+      control: "boolean",
+      table: {
+        category: "Field State",
+      },
+    },
+    loadingLabel: {
+      control: "text",
+      table: {
+        category: "Field State",
+      },
+    },
+  },
 } as Meta<typeof TextArea>;
 
 type Story = StoryObj<typeof TextArea>;
@@ -16,3 +30,11 @@ export const Primary: Story = {
     placeholder: "Placeholder",
   },
 };
+
+export const Loading: Story = {
+  args: {
+    ...Primary.args,
+    isLoading: true,
+    loadingLabel: "Loading",
+  },
+};
diff --git a/packages/atomic-elements/src/components/Fields/ComboInput/ComboInput.stories.tsx b/packages/atomic-elements/src/components/Fields/ComboInput/ComboInput.stories.tsx
index e902bf36d..586523f02 100644
--- a/packages/atomic-elements/src/components/Fields/ComboInput/ComboInput.stories.tsx
+++ b/packages/atomic-elements/src/components/Fields/ComboInput/ComboInput.stories.tsx
@@ -21,6 +21,18 @@ export default {
       control: "select",
       options: ["left", "right", "both"],
     },
+    isLoading: {
+      control: "boolean",
+      table: {
+        category: "Field State",
+      },
+    },
+    loadingLabel: {
+      control: "text",
+      table: {
+        category: "Field State",
+      },
+    },
   },
 } as Meta<typeof ComboInput>;
 
@@ -36,6 +48,14 @@ export const Primary: Story = {
   },
 };
 
+export const Loading: Story = {
+  args: {
+    ...Primary.args,
+    isLoading: true,
+    loadingLabel: "Loading",
+  },
+};
+
 export const NumberInputWithSearch: Story = {
   render: (args) => <ComboInput {...args}></ComboInput>,
   args: {
diff --git a/packages/atomic-elements/src/components/Fields/TextField/TextField.stories.tsx b/packages/atomic-elements/src/components/Fields/TextField/TextField.stories.tsx
index 46d2f4080..18fea1727 100644
--- a/packages/atomic-elements/src/components/Fields/TextField/TextField.stories.tsx
+++ b/packages/atomic-elements/src/components/Fields/TextField/TextField.stories.tsx
@@ -70,6 +70,14 @@ export const ForTextArea: Story = {
   },
 };
 
+export const Loading: Story = {
+  args: {
+    ...Primary.args,
+    isLoading: true,
+    loadingLabel: "Loading",
+  },
+};
+
 export const WithButton: Story = {
   args: {
     ...Primary.args,
diff --git a/packages/atomic-elements/src/components/Inputs/Checkbox/Checkbox.stories.tsx b/packages/atomic-elements/src/components/Inputs/Checkbox/Checkbox.stories.tsx
index 1a3e9e9d5..3afe94a1a 100644
--- a/packages/atomic-elements/src/components/Inputs/Checkbox/Checkbox.stories.tsx
+++ b/packages/atomic-elements/src/components/Inputs/Checkbox/Checkbox.stories.tsx
@@ -69,3 +69,11 @@ export const Primary: Story = {
     children: "Checkbox Label",
   },
 };
+
+export const Loading: Story = {
+  args: {
+    ...Primary.args,
+    isLoading: true,
+    loadingLabel: "Loading",
+  },
+};
diff --git a/packages/atomic-elements/src/components/Inputs/FileInput/FileInput.stories.tsx b/packages/atomic-elements/src/components/Inputs/FileInput/FileInput.stories.tsx
index 37e00f9ba..0b66321be 100644
--- a/packages/atomic-elements/src/components/Inputs/FileInput/FileInput.stories.tsx
+++ b/packages/atomic-elements/src/components/Inputs/FileInput/FileInput.stories.tsx
@@ -32,3 +32,11 @@ export const WithFile: Story = {
     file: new File(["test"], "test.txt"),
   },
 };
+
+export const Loading: Story = {
+  args: {
+    ...Primary.args,
+    isLoading: true,
+    loadingLabel: "Loading",
+  },
+};
diff --git a/packages/atomic-elements/src/components/Inputs/NumberInput/NumberInput.stories.tsx b/packages/atomic-elements/src/components/Inputs/NumberInput/NumberInput.stories.tsx
index fb77e70a8..e49c65a92 100644
--- a/packages/atomic-elements/src/components/Inputs/NumberInput/NumberInput.stories.tsx
+++ b/packages/atomic-elements/src/components/Inputs/NumberInput/NumberInput.stories.tsx
@@ -90,3 +90,11 @@ export const FormatAsUnit: Story = {
     },
   },
 };
+
+export const Loading: Story = {
+  args: {
+    ...Primary.args,
+    isLoading: true,
+    loadingLabel: "Loading",
+  },
+};
diff --git a/packages/atomic-elements/src/components/Inputs/RadioGroup/RadioGroup.stories.tsx b/packages/atomic-elements/src/components/Inputs/RadioGroup/RadioGroup.stories.tsx
index 571370faa..161f064fb 100644
--- a/packages/atomic-elements/src/components/Inputs/RadioGroup/RadioGroup.stories.tsx
+++ b/packages/atomic-elements/src/components/Inputs/RadioGroup/RadioGroup.stories.tsx
@@ -90,3 +90,11 @@ export const WithDisabledOptions: Story = {
     ],
   },
 };
+
+export const Loading: Story = {
+  args: {
+    ...Primary.args,
+    isLoading: true,
+    loadingLabel: "Loading",
+  },
+};
diff --git a/packages/atomic-elements/src/components/Inputs/SearchInput/SearchInput.stories.tsx b/packages/atomic-elements/src/components/Inputs/SearchInput/SearchInput.stories.tsx
index cf2d17431..e38bbf8f4 100644
--- a/packages/atomic-elements/src/components/Inputs/SearchInput/SearchInput.stories.tsx
+++ b/packages/atomic-elements/src/components/Inputs/SearchInput/SearchInput.stories.tsx
@@ -30,3 +30,11 @@ export const Primary: Story = {
     onSubmit: fn(),
   },
 };
+
+export const Loading: Story = {
+  args: {
+    ...Primary.args,
+    isLoading: true,
+    loadingLabel: "Loading",
+  },
+};
diff --git a/packages/atomic-elements/src/components/Inputs/TextAreaInput/TextAreaInput.stories.tsx b/packages/atomic-elements/src/components/Inputs/TextAreaInput/TextAreaInput.stories.tsx
index 85228a53e..facf8ec3a 100644
--- a/packages/atomic-elements/src/components/Inputs/TextAreaInput/TextAreaInput.stories.tsx
+++ b/packages/atomic-elements/src/components/Inputs/TextAreaInput/TextAreaInput.stories.tsx
@@ -28,3 +28,11 @@ export const Primary: Story = {
     message: "1000 characters",
   },
 };
+
+export const Loading: Story = {
+  args: {
+    ...Primary.args,
+    isLoading: true,
+    loadingLabel: "Loading",
+  },
+};
diff --git a/packages/atomic-elements/src/components/Inputs/TextInput/TextInput.stories.tsx b/packages/atomic-elements/src/components/Inputs/TextInput/TextInput.stories.tsx
index c1cd837c4..f7e0372fd 100644
--- a/packages/atomic-elements/src/components/Inputs/TextInput/TextInput.stories.tsx
+++ b/packages/atomic-elements/src/components/Inputs/TextInput/TextInput.stories.tsx
@@ -40,3 +40,11 @@ export const Floating: Story = {
     variant: "floating",
   },
 };
+
+export const Loading: Story = {
+  args: {
+    ...Primary.args,
+    isLoading: true,
+    loadingLabel: "Loading",
+  },
+};
diff --git a/packages/atomic-elements/src/components/Inputs/ToggleSwitch/ToggleSwitch.stories.tsx b/packages/atomic-elements/src/components/Inputs/ToggleSwitch/ToggleSwitch.stories.tsx
index 635dbe355..5258fa905 100644
--- a/packages/atomic-elements/src/components/Inputs/ToggleSwitch/ToggleSwitch.stories.tsx
+++ b/packages/atomic-elements/src/components/Inputs/ToggleSwitch/ToggleSwitch.stories.tsx
@@ -10,6 +10,18 @@ const meta: Meta<typeof ToggleSwitch> = {
     cssprops: getCssProps("Toggle"),
   },
   argTypes: {
+    isLoading: {
+      control: "boolean",
+      table: {
+        category: "Field State",
+      },
+    },
+    loadingLabel: {
+      control: "text",
+      table: {
+        category: "Field State",
+      },
+    },
     onChange: {
       control: false,
       table: {
@@ -37,3 +49,11 @@ export const Primary: Story = {
     children: "Toggle switch",
   },
 };
+
+export const Loading: Story = {
+  args: {
+    ...Primary.args,
+    isLoading: true,
+    loadingLabel: "Loading",
+  },
+};

From 97347410866ea20066d09ed0abf1f73725610905 Mon Sep 17 00:00:00 2001
From: Sean Collings <sean.collings@atomicjolt.com>
Date: Tue, 1 Sep 2026 15:03:09 -0600
Subject: [PATCH 5/8] chore: add changest

---
 .changeset/thick-tires-yawn.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/thick-tires-yawn.md

diff --git a/.changeset/thick-tires-yawn.md b/.changeset/thick-tires-yawn.md
new file mode 100644
index 000000000..11ea7e38c
--- /dev/null
+++ b/.changeset/thick-tires-yawn.md
@@ -0,0 +1,5 @@
+---
+"@atomicjolt/atomic-elements": minor
+---
+
+Add <Loading> component and support for loading states to a number of components

From d64655afed4069ee9b359f72ef1b229791d62dd1 Mon Sep 17 00:00:00 2001
From: Sean Collings <sean.collings@atomicjolt.com>
Date: Tue, 1 Sep 2026 15:08:57 -0600
Subject: [PATCH 6/8] chore: update snapshots

---
 .../__snapshots__/ChipGroup.spec.tsx.snap     |  10 +-
 .../Table/__snapshots__/Table.spec.tsx.snap   | 636 +++++++++---------
 .../__snapshots__/Combobox.spec.tsx.snap      |  16 +-
 .../__snapshots__/CustomSelect.spec.tsx.snap  |  18 +-
 .../__snapshots__/ListBox.spec.tsx.snap       |   8 +-
 .../__snapshots__/MultiSelect.spec.tsx.snap   |  18 +-
 .../Select/__snapshots__/Select.spec.tsx.snap |   1 -
 .../ChipGroupField.spec.tsx.snap              |  16 +-
 .../__snapshots__/DateField.spec.tsx.snap     | 112 +--
 .../MultiSelectField.spec.tsx.snap            |   8 +-
 .../__snapshots__/SelectField.spec.tsx.snap   |  12 +-
 .../__snapshots__/CheckBox.spec.tsx.snap      |   6 +-
 .../__snapshots__/DateInput.spec.tsx.snap     | 392 +++++------
 .../__snapshots__/DatePicker.spec.tsx.snap    | 440 ++++++------
 .../__snapshots__/RadioGroup.spec.tsx.snap    |  22 +-
 .../__snapshots__/SearchInput.spec.tsx.snap   |  22 +-
 .../__snapshots__/TextAreaInput.spec.tsx.snap |   5 +-
 .../__snapshots__/TextInput.spec.tsx.snap     |  12 +-
 18 files changed, 872 insertions(+), 882 deletions(-)

diff --git a/packages/atomic-elements/src/components/Chips/ChipGroup/__snapshots__/ChipGroup.spec.tsx.snap b/packages/atomic-elements/src/components/Chips/ChipGroup/__snapshots__/ChipGroup.spec.tsx.snap
index 0224fb630..f345b37fd 100644
--- a/packages/atomic-elements/src/components/Chips/ChipGroup/__snapshots__/ChipGroup.spec.tsx.snap
+++ b/packages/atomic-elements/src/components/Chips/ChipGroup/__snapshots__/ChipGroup.spec.tsx.snap
@@ -6,10 +6,10 @@ exports[`ChipGroup > matches snapshot 1`] = `
     data-react-aria-hidden="true"
   />
   <div
-    class="sc-bjLslk gYNvEP aje-chip-group"
+    class="sc-fKwzVe fdNiPE aje-chip-group"
   >
     <label
-      class="sc-bdDsCe kKMboh"
+      class="sc-bdDsCe bLPJOA"
       id="react-aria-:r1:"
     >
       My Chip Group
@@ -19,7 +19,7 @@ exports[`ChipGroup > matches snapshot 1`] = `
       aria-labelledby="react-aria-:r1:"
       aria-live="off"
       aria-relevant="additions"
-      class="sc-ieCSdj lmMnXf"
+      class="sc-bCgoVd zQafC"
       data-collection="react-aria-:r5:"
       id="react-aria-:r0:"
       role="grid"
@@ -27,7 +27,7 @@ exports[`ChipGroup > matches snapshot 1`] = `
     >
       <div
         aria-label="Item"
-        class="sc-hHopjF jeiOnT aje-chip"
+        class="sc-cxxQMU eMnPiM aje-chip"
         data-collection="react-aria-:r5:"
         data-key="react-aria-1"
         id="react-aria-:r0:-react-aria-1"
@@ -36,7 +36,7 @@ exports[`ChipGroup > matches snapshot 1`] = `
       >
         <div
           aria-colindex="1"
-          class="sc-dILkzW knTmYa"
+          class="sc-ivKqQM hZfdyg"
           role="gridcell"
         >
           Item
diff --git a/packages/atomic-elements/src/components/Content/Table/__snapshots__/Table.spec.tsx.snap b/packages/atomic-elements/src/components/Content/Table/__snapshots__/Table.spec.tsx.snap
index 53500bebf..37300b757 100644
--- a/packages/atomic-elements/src/components/Content/Table/__snapshots__/Table.spec.tsx.snap
+++ b/packages/atomic-elements/src/components/Content/Table/__snapshots__/Table.spec.tsx.snap
@@ -11,13 +11,13 @@ exports[`Table > Snapshots > Should match the snapshot when searchable 1`] = `
       <table
         aria-describedby=""
         aria-label="table"
-        class="sc-ivKqQM dvdTUR aje-table"
+        class="sc-giQkEn lnLxOL aje-table"
         data-collection="react-aria-:re:"
         role="grid"
         tabindex="0"
       >
         <thead
-          class="sc-giQkEn hpXlZv aje-table__header"
+          class="sc-ikBzZv jhKIUW aje-table__header"
           role="rowgroup"
         >
           <tr
@@ -26,7 +26,7 @@ exports[`Table > Snapshots > Should match the snapshot when searchable 1`] = `
           >
             <th
               aria-colindex="1"
-              class="sc-bYgEKt ljtAAl aje-table__column"
+              class="sc-hiunUN dJuUyV aje-table__column"
               data-collection="react-aria-:re:"
               data-key="a"
               data-searchable="true"
@@ -37,29 +37,29 @@ exports[`Table > Snapshots > Should match the snapshot when searchable 1`] = `
               tabindex="-1"
             >
               <div
-                class="sc-ezjgic kswyAg"
+                class="sc-jJwPsw iZUnjr"
               >
                 Column 1
                 <div
                   aria-expanded="true"
-                  class="sc-eCQgVK lhFnxc aje-combo-input sc-ikBzZv dACBcu"
+                  class="sc-qdQOe kPUMiD aje-combo-input sc-cBEgGa brMiEN"
                 >
                   <input
                     aria-label="Search a"
-                    class="sc-hKVpXn ecqUOI"
+                    class="sc-gKkgUA bzpolP"
                     role="search"
                     slot="search"
                     value="search"
                   />
                   <button
-                    class="sc-fuztkK sc-qdQOe fTXzHK iFSkaa aje-btn aje-icon-btn aje-btn--content is-small"
+                    class="sc-dYjPD sc-bqqMSY hHQCzc dIQBXN aje-btn aje-icon-btn aje-btn--content is-small"
                     data-icon-button="true"
                     tabindex="0"
                     type="button"
                   >
                     <i
                       aria-hidden="true"
-                      class="sc-iCECmn erxnfb aje-icon material-icons is-small"
+                      class="sc-crPgjm bIBcHh aje-icon material-icons is-small"
                     >
                       close
                     </i>
@@ -69,7 +69,7 @@ exports[`Table > Snapshots > Should match the snapshot when searchable 1`] = `
             </th>
             <th
               aria-colindex="2"
-              class="sc-bYgEKt ljtAAl aje-table__column"
+              class="sc-hiunUN dJuUyV aje-table__column"
               data-collection="react-aria-:re:"
               data-key="b"
               data-sort-visibility="selected"
@@ -78,7 +78,7 @@ exports[`Table > Snapshots > Should match the snapshot when searchable 1`] = `
               tabindex="-1"
             >
               <div
-                class="sc-ezjgic kswyAg"
+                class="sc-jJwPsw iZUnjr"
               >
                 Column 2
               </div>
@@ -86,19 +86,19 @@ exports[`Table > Snapshots > Should match the snapshot when searchable 1`] = `
           </tr>
         </thead>
         <tbody
-          class="sc-hiunUN aje-table__body"
+          class="sc-jcgtOs aje-table__body"
           role="rowgroup"
         >
           <tr
             aria-labelledby="react-aria-:rd:-react-aria-6-a"
-            class="sc-cxxQMU kPmlSu aje-table__row"
+            class="sc-ezjgic bZStHI aje-table__row"
             data-collection="react-aria-:re:"
             data-key="react-aria-6"
             role="row"
             tabindex="-1"
           >
             <th
-              class="sc-gXvOjn dTIEYA aje-table__cell"
+              class="sc-caHARj lcRrQB aje-table__cell"
               data-collection="react-aria-:re:"
               data-key="react-aria-4"
               id="react-aria-:rd:-react-aria-6-a"
@@ -108,7 +108,7 @@ exports[`Table > Snapshots > Should match the snapshot when searchable 1`] = `
               Row 1, Cell 1
             </th>
             <td
-              class="sc-cBEgGa kYcIRW aje-table__cell"
+              class="sc-iUlCMS iIkvIm aje-table__cell"
               data-collection="react-aria-:re:"
               data-key="react-aria-5"
               id="react-aria-:rl:"
@@ -120,14 +120,14 @@ exports[`Table > Snapshots > Should match the snapshot when searchable 1`] = `
           </tr>
           <tr
             aria-labelledby="react-aria-:rd:-react-aria-9-a"
-            class="sc-cxxQMU kPmlSu aje-table__row"
+            class="sc-ezjgic bZStHI aje-table__row"
             data-collection="react-aria-:re:"
             data-key="react-aria-9"
             role="row"
             tabindex="-1"
           >
             <th
-              class="sc-gXvOjn dTIEYA aje-table__cell"
+              class="sc-caHARj lcRrQB aje-table__cell"
               data-collection="react-aria-:re:"
               data-key="react-aria-7"
               id="react-aria-:rd:-react-aria-9-a"
@@ -137,7 +137,7 @@ exports[`Table > Snapshots > Should match the snapshot when searchable 1`] = `
               Row 2, Cell 1
             </th>
             <td
-              class="sc-cBEgGa kYcIRW aje-table__cell"
+              class="sc-iUlCMS iIkvIm aje-table__cell"
               data-collection="react-aria-:re:"
               data-key="react-aria-8"
               id="react-aria-:rp:"
@@ -158,13 +158,13 @@ exports[`Table > Snapshots > Should match the snapshot when searchable 1`] = `
     <table
       aria-describedby=""
       aria-label="table"
-      class="sc-ivKqQM dvdTUR aje-table"
+      class="sc-giQkEn lnLxOL aje-table"
       data-collection="react-aria-:re:"
       role="grid"
       tabindex="0"
     >
       <thead
-        class="sc-giQkEn hpXlZv aje-table__header"
+        class="sc-ikBzZv jhKIUW aje-table__header"
         role="rowgroup"
       >
         <tr
@@ -173,7 +173,7 @@ exports[`Table > Snapshots > Should match the snapshot when searchable 1`] = `
         >
           <th
             aria-colindex="1"
-            class="sc-bYgEKt ljtAAl aje-table__column"
+            class="sc-hiunUN dJuUyV aje-table__column"
             data-collection="react-aria-:re:"
             data-key="a"
             data-searchable="true"
@@ -184,29 +184,29 @@ exports[`Table > Snapshots > Should match the snapshot when searchable 1`] = `
             tabindex="-1"
           >
             <div
-              class="sc-ezjgic kswyAg"
+              class="sc-jJwPsw iZUnjr"
             >
               Column 1
               <div
                 aria-expanded="true"
-                class="sc-eCQgVK lhFnxc aje-combo-input sc-ikBzZv dACBcu"
+                class="sc-qdQOe kPUMiD aje-combo-input sc-cBEgGa brMiEN"
               >
                 <input
                   aria-label="Search a"
-                  class="sc-hKVpXn ecqUOI"
+                  class="sc-gKkgUA bzpolP"
                   role="search"
                   slot="search"
                   value="search"
                 />
                 <button
-                  class="sc-fuztkK sc-qdQOe fTXzHK iFSkaa aje-btn aje-icon-btn aje-btn--content is-small"
+                  class="sc-dYjPD sc-bqqMSY hHQCzc dIQBXN aje-btn aje-icon-btn aje-btn--content is-small"
                   data-icon-button="true"
                   tabindex="0"
                   type="button"
                 >
                   <i
                     aria-hidden="true"
-                    class="sc-iCECmn erxnfb aje-icon material-icons is-small"
+                    class="sc-crPgjm bIBcHh aje-icon material-icons is-small"
                   >
                     close
                   </i>
@@ -216,7 +216,7 @@ exports[`Table > Snapshots > Should match the snapshot when searchable 1`] = `
           </th>
           <th
             aria-colindex="2"
-            class="sc-bYgEKt ljtAAl aje-table__column"
+            class="sc-hiunUN dJuUyV aje-table__column"
             data-collection="react-aria-:re:"
             data-key="b"
             data-sort-visibility="selected"
@@ -225,7 +225,7 @@ exports[`Table > Snapshots > Should match the snapshot when searchable 1`] = `
             tabindex="-1"
           >
             <div
-              class="sc-ezjgic kswyAg"
+              class="sc-jJwPsw iZUnjr"
             >
               Column 2
             </div>
@@ -233,19 +233,19 @@ exports[`Table > Snapshots > Should match the snapshot when searchable 1`] = `
         </tr>
       </thead>
       <tbody
-        class="sc-hiunUN aje-table__body"
+        class="sc-jcgtOs aje-table__body"
         role="rowgroup"
       >
         <tr
           aria-labelledby="react-aria-:rd:-react-aria-6-a"
-          class="sc-cxxQMU kPmlSu aje-table__row"
+          class="sc-ezjgic bZStHI aje-table__row"
           data-collection="react-aria-:re:"
           data-key="react-aria-6"
           role="row"
           tabindex="-1"
         >
           <th
-            class="sc-gXvOjn dTIEYA aje-table__cell"
+            class="sc-caHARj lcRrQB aje-table__cell"
             data-collection="react-aria-:re:"
             data-key="react-aria-4"
             id="react-aria-:rd:-react-aria-6-a"
@@ -255,7 +255,7 @@ exports[`Table > Snapshots > Should match the snapshot when searchable 1`] = `
             Row 1, Cell 1
           </th>
           <td
-            class="sc-cBEgGa kYcIRW aje-table__cell"
+            class="sc-iUlCMS iIkvIm aje-table__cell"
             data-collection="react-aria-:re:"
             data-key="react-aria-5"
             id="react-aria-:rl:"
@@ -267,14 +267,14 @@ exports[`Table > Snapshots > Should match the snapshot when searchable 1`] = `
         </tr>
         <tr
           aria-labelledby="react-aria-:rd:-react-aria-9-a"
-          class="sc-cxxQMU kPmlSu aje-table__row"
+          class="sc-ezjgic bZStHI aje-table__row"
           data-collection="react-aria-:re:"
           data-key="react-aria-9"
           role="row"
           tabindex="-1"
         >
           <th
-            class="sc-gXvOjn dTIEYA aje-table__cell"
+            class="sc-caHARj lcRrQB aje-table__cell"
             data-collection="react-aria-:re:"
             data-key="react-aria-7"
             id="react-aria-:rd:-react-aria-9-a"
@@ -284,7 +284,7 @@ exports[`Table > Snapshots > Should match the snapshot when searchable 1`] = `
             Row 2, Cell 1
           </th>
           <td
-            class="sc-cBEgGa kYcIRW aje-table__cell"
+            class="sc-iUlCMS iIkvIm aje-table__cell"
             data-collection="react-aria-:re:"
             data-key="react-aria-8"
             id="react-aria-:rp:"
@@ -362,13 +362,13 @@ exports[`Table > Snapshots > should match the snapshot 1`] = `
       <table
         aria-describedby=""
         aria-label="table"
-        class="sc-ivKqQM dvdTUR aje-table"
+        class="sc-giQkEn lnLxOL aje-table"
         data-collection="react-aria-:r1:"
         role="grid"
         tabindex="0"
       >
         <thead
-          class="sc-giQkEn hpXlZv aje-table__header"
+          class="sc-ikBzZv jhKIUW aje-table__header"
           role="rowgroup"
         >
           <tr
@@ -377,7 +377,7 @@ exports[`Table > Snapshots > should match the snapshot 1`] = `
           >
             <th
               aria-colindex="1"
-              class="sc-bYgEKt ljtAAl aje-table__column"
+              class="sc-hiunUN dJuUyV aje-table__column"
               data-collection="react-aria-:r1:"
               data-key="a"
               data-searchable="true"
@@ -387,44 +387,44 @@ exports[`Table > Snapshots > should match the snapshot 1`] = `
               tabindex="-1"
             >
               <div
-                class="sc-ezjgic kswyAg"
+                class="sc-jJwPsw iZUnjr"
               >
                 Column 1
                 <div
                   aria-expanded="false"
-                  class="sc-eCQgVK lhFnxc aje-combo-input sc-ikBzZv dACBcu"
+                  class="sc-qdQOe kPUMiD aje-combo-input sc-cBEgGa brMiEN"
                 >
                   <input
                     aria-label="Search a"
-                    class="sc-hKVpXn ecqUOI"
+                    class="sc-gKkgUA bzpolP"
                     disabled=""
                     role="search"
                     slot="search"
                     value=""
                   />
                   <button
-                    class="sc-fuztkK sc-qdQOe fTXzHK iFSkaa aje-btn aje-icon-btn aje-btn--content is-small"
+                    class="sc-dYjPD sc-bqqMSY hHQCzc dIQBXN aje-btn aje-icon-btn aje-btn--content is-small"
                     data-icon-button="true"
                     tabindex="0"
                     type="button"
                   >
                     <i
                       aria-hidden="true"
-                      class="sc-iCECmn erxnfb aje-icon material-icons is-small"
+                      class="sc-crPgjm bIBcHh aje-icon material-icons is-small"
                     >
                       close
                     </i>
                   </button>
                 </div>
                 <button
-                  class="sc-fuztkK sc-qdQOe fTXzHK iFSkaa aje-btn aje-icon-btn aje-btn--content is-small"
+                  class="sc-dYjPD sc-bqqMSY hHQCzc dIQBXN aje-btn aje-icon-btn aje-btn--content is-small"
                   data-icon-button="true"
                   tabindex="0"
                   type="button"
                 >
                   <i
                     aria-hidden="true"
-                    class="sc-iCECmn erxnfb aje-icon material-icons is-small"
+                    class="sc-crPgjm bIBcHh aje-icon material-icons is-small"
                   >
                     search
                   </i>
@@ -433,7 +433,7 @@ exports[`Table > Snapshots > should match the snapshot 1`] = `
             </th>
             <th
               aria-colindex="2"
-              class="sc-bYgEKt ljtAAl aje-table__column"
+              class="sc-hiunUN dJuUyV aje-table__column"
               data-collection="react-aria-:r1:"
               data-key="b"
               data-sort-visibility="selected"
@@ -442,7 +442,7 @@ exports[`Table > Snapshots > should match the snapshot 1`] = `
               tabindex="-1"
             >
               <div
-                class="sc-ezjgic kswyAg"
+                class="sc-jJwPsw iZUnjr"
               >
                 Column 2
               </div>
@@ -450,19 +450,19 @@ exports[`Table > Snapshots > should match the snapshot 1`] = `
           </tr>
         </thead>
         <tbody
-          class="sc-hiunUN aje-table__body"
+          class="sc-jcgtOs aje-table__body"
           role="rowgroup"
         >
           <tr
             aria-labelledby="react-aria-:r0:-react-aria-6-a"
-            class="sc-cxxQMU kPmlSu aje-table__row"
+            class="sc-ezjgic bZStHI aje-table__row"
             data-collection="react-aria-:r1:"
             data-key="react-aria-6"
             role="row"
             tabindex="-1"
           >
             <th
-              class="sc-gXvOjn dTIEYA aje-table__cell"
+              class="sc-caHARj lcRrQB aje-table__cell"
               data-collection="react-aria-:r1:"
               data-key="react-aria-4"
               id="react-aria-:r0:-react-aria-6-a"
@@ -472,7 +472,7 @@ exports[`Table > Snapshots > should match the snapshot 1`] = `
               Row 1, Cell 1
             </th>
             <td
-              class="sc-cBEgGa kYcIRW aje-table__cell"
+              class="sc-iUlCMS iIkvIm aje-table__cell"
               data-collection="react-aria-:r1:"
               data-key="react-aria-5"
               id="react-aria-:r8:"
@@ -484,14 +484,14 @@ exports[`Table > Snapshots > should match the snapshot 1`] = `
           </tr>
           <tr
             aria-labelledby="react-aria-:r0:-react-aria-9-a"
-            class="sc-cxxQMU kPmlSu aje-table__row"
+            class="sc-ezjgic bZStHI aje-table__row"
             data-collection="react-aria-:r1:"
             data-key="react-aria-9"
             role="row"
             tabindex="-1"
           >
             <th
-              class="sc-gXvOjn dTIEYA aje-table__cell"
+              class="sc-caHARj lcRrQB aje-table__cell"
               data-collection="react-aria-:r1:"
               data-key="react-aria-7"
               id="react-aria-:r0:-react-aria-9-a"
@@ -501,7 +501,7 @@ exports[`Table > Snapshots > should match the snapshot 1`] = `
               Row 2, Cell 1
             </th>
             <td
-              class="sc-cBEgGa kYcIRW aje-table__cell"
+              class="sc-iUlCMS iIkvIm aje-table__cell"
               data-collection="react-aria-:r1:"
               data-key="react-aria-8"
               id="react-aria-:rc:"
@@ -522,13 +522,13 @@ exports[`Table > Snapshots > should match the snapshot 1`] = `
     <table
       aria-describedby=""
       aria-label="table"
-      class="sc-ivKqQM dvdTUR aje-table"
+      class="sc-giQkEn lnLxOL aje-table"
       data-collection="react-aria-:r1:"
       role="grid"
       tabindex="0"
     >
       <thead
-        class="sc-giQkEn hpXlZv aje-table__header"
+        class="sc-ikBzZv jhKIUW aje-table__header"
         role="rowgroup"
       >
         <tr
@@ -537,7 +537,7 @@ exports[`Table > Snapshots > should match the snapshot 1`] = `
         >
           <th
             aria-colindex="1"
-            class="sc-bYgEKt ljtAAl aje-table__column"
+            class="sc-hiunUN dJuUyV aje-table__column"
             data-collection="react-aria-:r1:"
             data-key="a"
             data-searchable="true"
@@ -547,44 +547,44 @@ exports[`Table > Snapshots > should match the snapshot 1`] = `
             tabindex="-1"
           >
             <div
-              class="sc-ezjgic kswyAg"
+              class="sc-jJwPsw iZUnjr"
             >
               Column 1
               <div
                 aria-expanded="false"
-                class="sc-eCQgVK lhFnxc aje-combo-input sc-ikBzZv dACBcu"
+                class="sc-qdQOe kPUMiD aje-combo-input sc-cBEgGa brMiEN"
               >
                 <input
                   aria-label="Search a"
-                  class="sc-hKVpXn ecqUOI"
+                  class="sc-gKkgUA bzpolP"
                   disabled=""
                   role="search"
                   slot="search"
                   value=""
                 />
                 <button
-                  class="sc-fuztkK sc-qdQOe fTXzHK iFSkaa aje-btn aje-icon-btn aje-btn--content is-small"
+                  class="sc-dYjPD sc-bqqMSY hHQCzc dIQBXN aje-btn aje-icon-btn aje-btn--content is-small"
                   data-icon-button="true"
                   tabindex="0"
                   type="button"
                 >
                   <i
                     aria-hidden="true"
-                    class="sc-iCECmn erxnfb aje-icon material-icons is-small"
+                    class="sc-crPgjm bIBcHh aje-icon material-icons is-small"
                   >
                     close
                   </i>
                 </button>
               </div>
               <button
-                class="sc-fuztkK sc-qdQOe fTXzHK iFSkaa aje-btn aje-icon-btn aje-btn--content is-small"
+                class="sc-dYjPD sc-bqqMSY hHQCzc dIQBXN aje-btn aje-icon-btn aje-btn--content is-small"
                 data-icon-button="true"
                 tabindex="0"
                 type="button"
               >
                 <i
                   aria-hidden="true"
-                  class="sc-iCECmn erxnfb aje-icon material-icons is-small"
+                  class="sc-crPgjm bIBcHh aje-icon material-icons is-small"
                 >
                   search
                 </i>
@@ -593,7 +593,7 @@ exports[`Table > Snapshots > should match the snapshot 1`] = `
           </th>
           <th
             aria-colindex="2"
-            class="sc-bYgEKt ljtAAl aje-table__column"
+            class="sc-hiunUN dJuUyV aje-table__column"
             data-collection="react-aria-:r1:"
             data-key="b"
             data-sort-visibility="selected"
@@ -602,7 +602,7 @@ exports[`Table > Snapshots > should match the snapshot 1`] = `
             tabindex="-1"
           >
             <div
-              class="sc-ezjgic kswyAg"
+              class="sc-jJwPsw iZUnjr"
             >
               Column 2
             </div>
@@ -610,19 +610,19 @@ exports[`Table > Snapshots > should match the snapshot 1`] = `
         </tr>
       </thead>
       <tbody
-        class="sc-hiunUN aje-table__body"
+        class="sc-jcgtOs aje-table__body"
         role="rowgroup"
       >
         <tr
           aria-labelledby="react-aria-:r0:-react-aria-6-a"
-          class="sc-cxxQMU kPmlSu aje-table__row"
+          class="sc-ezjgic bZStHI aje-table__row"
           data-collection="react-aria-:r1:"
           data-key="react-aria-6"
           role="row"
           tabindex="-1"
         >
           <th
-            class="sc-gXvOjn dTIEYA aje-table__cell"
+            class="sc-caHARj lcRrQB aje-table__cell"
             data-collection="react-aria-:r1:"
             data-key="react-aria-4"
             id="react-aria-:r0:-react-aria-6-a"
@@ -632,7 +632,7 @@ exports[`Table > Snapshots > should match the snapshot 1`] = `
             Row 1, Cell 1
           </th>
           <td
-            class="sc-cBEgGa kYcIRW aje-table__cell"
+            class="sc-iUlCMS iIkvIm aje-table__cell"
             data-collection="react-aria-:r1:"
             data-key="react-aria-5"
             id="react-aria-:r8:"
@@ -644,14 +644,14 @@ exports[`Table > Snapshots > should match the snapshot 1`] = `
         </tr>
         <tr
           aria-labelledby="react-aria-:r0:-react-aria-9-a"
-          class="sc-cxxQMU kPmlSu aje-table__row"
+          class="sc-ezjgic bZStHI aje-table__row"
           data-collection="react-aria-:r1:"
           data-key="react-aria-9"
           role="row"
           tabindex="-1"
         >
           <th
-            class="sc-gXvOjn dTIEYA aje-table__cell"
+            class="sc-caHARj lcRrQB aje-table__cell"
             data-collection="react-aria-:r1:"
             data-key="react-aria-7"
             id="react-aria-:r0:-react-aria-9-a"
@@ -661,7 +661,7 @@ exports[`Table > Snapshots > should match the snapshot 1`] = `
             Row 2, Cell 1
           </th>
           <td
-            class="sc-cBEgGa kYcIRW aje-table__cell"
+            class="sc-iUlCMS iIkvIm aje-table__cell"
             data-collection="react-aria-:r1:"
             data-key="react-aria-8"
             id="react-aria-:rc:"
@@ -739,13 +739,13 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
       <table
         aria-describedby=""
         aria-label="table"
-        class="sc-ivKqQM dvdTUR aje-table"
+        class="sc-giQkEn lnLxOL aje-table"
         data-collection="react-aria-:rr:"
         role="grid"
         tabindex="0"
       >
         <thead
-          class="sc-giQkEn hpXlZv aje-table__header"
+          class="sc-ikBzZv jhKIUW aje-table__header"
           role="rowgroup"
         >
           <tr
@@ -754,7 +754,7 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
           >
             <th
               aria-colindex="1"
-              class="sc-bYgEKt ljtAAl aje-table__column"
+              class="sc-hiunUN dJuUyV aje-table__column"
               data-collection="react-aria-:rr:"
               data-key="a"
               data-searchable="true"
@@ -764,44 +764,44 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
               tabindex="-1"
             >
               <div
-                class="sc-ezjgic kswyAg"
+                class="sc-jJwPsw iZUnjr"
               >
                 Column 1
                 <div
                   aria-expanded="false"
-                  class="sc-eCQgVK lhFnxc aje-combo-input sc-ikBzZv dACBcu"
+                  class="sc-qdQOe kPUMiD aje-combo-input sc-cBEgGa brMiEN"
                 >
                   <input
                     aria-label="Search a"
-                    class="sc-hKVpXn ecqUOI"
+                    class="sc-gKkgUA bzpolP"
                     disabled=""
                     role="search"
                     slot="search"
                     value=""
                   />
                   <button
-                    class="sc-fuztkK sc-qdQOe fTXzHK iFSkaa aje-btn aje-icon-btn aje-btn--content is-small"
+                    class="sc-dYjPD sc-bqqMSY hHQCzc dIQBXN aje-btn aje-icon-btn aje-btn--content is-small"
                     data-icon-button="true"
                     tabindex="0"
                     type="button"
                   >
                     <i
                       aria-hidden="true"
-                      class="sc-iCECmn erxnfb aje-icon material-icons is-small"
+                      class="sc-crPgjm bIBcHh aje-icon material-icons is-small"
                     >
                       close
                     </i>
                   </button>
                 </div>
                 <button
-                  class="sc-fuztkK sc-qdQOe fTXzHK iFSkaa aje-btn aje-icon-btn aje-btn--content is-small"
+                  class="sc-dYjPD sc-bqqMSY hHQCzc dIQBXN aje-btn aje-icon-btn aje-btn--content is-small"
                   data-icon-button="true"
                   tabindex="0"
                   type="button"
                 >
                   <i
                     aria-hidden="true"
-                    class="sc-iCECmn erxnfb aje-icon material-icons is-small"
+                    class="sc-crPgjm bIBcHh aje-icon material-icons is-small"
                   >
                     search
                   </i>
@@ -810,7 +810,7 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
             </th>
             <th
               aria-colindex="2"
-              class="sc-bYgEKt ljtAAl aje-table__column"
+              class="sc-hiunUN dJuUyV aje-table__column"
               data-collection="react-aria-:rr:"
               data-key="b"
               data-sort-visibility="selected"
@@ -819,7 +819,7 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
               tabindex="-1"
             >
               <div
-                class="sc-ezjgic kswyAg"
+                class="sc-jJwPsw iZUnjr"
               >
                 Column 2
               </div>
@@ -827,19 +827,19 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
           </tr>
         </thead>
         <tbody
-          class="sc-hiunUN aje-table__body"
+          class="sc-jcgtOs aje-table__body"
           data-loading="true"
           role="rowgroup"
         >
           <tr
-            class="sc-cxxQMU kPmlSu"
+            class="sc-ezjgic bZStHI"
           >
             <td
-              class="sc-cBEgGa kYcIRW"
+              class="sc-iUlCMS iIkvIm"
             >
               <svg
                 aria-labelledby=":rv:-aria"
-                class="sc-kgohyr kmNOSy aje-skeleton-loader sc-ciCrSJ gtAOoi"
+                class="sc-hKVpXn icWWvx aje-skeleton-loader sc-iBjNZB kgvISf"
                 role="img"
               >
                 <rect
@@ -869,15 +869,15 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
                     id=":rv:-animated-diff"
                   >
                     <stop
-                      class="sc-fKwzVe gTpKTn"
+                      class="sc-eCQgVK bOcrcx"
                       offset="0%"
                     />
                     <stop
-                      class="sc-bCgoVd LTccX"
+                      class="sc-jSppWd fLOjNm"
                       offset="50%"
                     />
                     <stop
-                      class="sc-fKwzVe gTpKTn"
+                      class="sc-eCQgVK bOcrcx"
                       offset="100%"
                     />
                     <animatetransform
@@ -892,11 +892,11 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
               </svg>
             </td>
             <td
-              class="sc-cBEgGa kYcIRW"
+              class="sc-iUlCMS iIkvIm"
             >
               <svg
                 aria-labelledby=":r10:-aria"
-                class="sc-kgohyr kmNOSy aje-skeleton-loader sc-ciCrSJ gtAOoi"
+                class="sc-hKVpXn icWWvx aje-skeleton-loader sc-iBjNZB kgvISf"
                 role="img"
               >
                 <rect
@@ -926,15 +926,15 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
                     id=":r10:-animated-diff"
                   >
                     <stop
-                      class="sc-fKwzVe gTpKTn"
+                      class="sc-eCQgVK bOcrcx"
                       offset="0%"
                     />
                     <stop
-                      class="sc-bCgoVd LTccX"
+                      class="sc-jSppWd fLOjNm"
                       offset="50%"
                     />
                     <stop
-                      class="sc-fKwzVe gTpKTn"
+                      class="sc-eCQgVK bOcrcx"
                       offset="100%"
                     />
                     <animatetransform
@@ -950,14 +950,14 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
             </td>
           </tr>
           <tr
-            class="sc-cxxQMU kPmlSu"
+            class="sc-ezjgic bZStHI"
           >
             <td
-              class="sc-cBEgGa kYcIRW"
+              class="sc-iUlCMS iIkvIm"
             >
               <svg
                 aria-labelledby=":r11:-aria"
-                class="sc-kgohyr kmNOSy aje-skeleton-loader sc-ciCrSJ gtAOoi"
+                class="sc-hKVpXn icWWvx aje-skeleton-loader sc-iBjNZB kgvISf"
                 role="img"
               >
                 <rect
@@ -987,15 +987,15 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
                     id=":r11:-animated-diff"
                   >
                     <stop
-                      class="sc-fKwzVe gTpKTn"
+                      class="sc-eCQgVK bOcrcx"
                       offset="0%"
                     />
                     <stop
-                      class="sc-bCgoVd LTccX"
+                      class="sc-jSppWd fLOjNm"
                       offset="50%"
                     />
                     <stop
-                      class="sc-fKwzVe gTpKTn"
+                      class="sc-eCQgVK bOcrcx"
                       offset="100%"
                     />
                     <animatetransform
@@ -1010,11 +1010,11 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
               </svg>
             </td>
             <td
-              class="sc-cBEgGa kYcIRW"
+              class="sc-iUlCMS iIkvIm"
             >
               <svg
                 aria-labelledby=":r12:-aria"
-                class="sc-kgohyr kmNOSy aje-skeleton-loader sc-ciCrSJ gtAOoi"
+                class="sc-hKVpXn icWWvx aje-skeleton-loader sc-iBjNZB kgvISf"
                 role="img"
               >
                 <rect
@@ -1044,15 +1044,15 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
                     id=":r12:-animated-diff"
                   >
                     <stop
-                      class="sc-fKwzVe gTpKTn"
+                      class="sc-eCQgVK bOcrcx"
                       offset="0%"
                     />
                     <stop
-                      class="sc-bCgoVd LTccX"
+                      class="sc-jSppWd fLOjNm"
                       offset="50%"
                     />
                     <stop
-                      class="sc-fKwzVe gTpKTn"
+                      class="sc-eCQgVK bOcrcx"
                       offset="100%"
                     />
                     <animatetransform
@@ -1068,14 +1068,14 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
             </td>
           </tr>
           <tr
-            class="sc-cxxQMU kPmlSu"
+            class="sc-ezjgic bZStHI"
           >
             <td
-              class="sc-cBEgGa kYcIRW"
+              class="sc-iUlCMS iIkvIm"
             >
               <svg
                 aria-labelledby=":r13:-aria"
-                class="sc-kgohyr kmNOSy aje-skeleton-loader sc-ciCrSJ gtAOoi"
+                class="sc-hKVpXn icWWvx aje-skeleton-loader sc-iBjNZB kgvISf"
                 role="img"
               >
                 <rect
@@ -1105,15 +1105,15 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
                     id=":r13:-animated-diff"
                   >
                     <stop
-                      class="sc-fKwzVe gTpKTn"
+                      class="sc-eCQgVK bOcrcx"
                       offset="0%"
                     />
                     <stop
-                      class="sc-bCgoVd LTccX"
+                      class="sc-jSppWd fLOjNm"
                       offset="50%"
                     />
                     <stop
-                      class="sc-fKwzVe gTpKTn"
+                      class="sc-eCQgVK bOcrcx"
                       offset="100%"
                     />
                     <animatetransform
@@ -1128,11 +1128,11 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
               </svg>
             </td>
             <td
-              class="sc-cBEgGa kYcIRW"
+              class="sc-iUlCMS iIkvIm"
             >
               <svg
                 aria-labelledby=":r14:-aria"
-                class="sc-kgohyr kmNOSy aje-skeleton-loader sc-ciCrSJ gtAOoi"
+                class="sc-hKVpXn icWWvx aje-skeleton-loader sc-iBjNZB kgvISf"
                 role="img"
               >
                 <rect
@@ -1162,15 +1162,15 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
                     id=":r14:-animated-diff"
                   >
                     <stop
-                      class="sc-fKwzVe gTpKTn"
+                      class="sc-eCQgVK bOcrcx"
                       offset="0%"
                     />
                     <stop
-                      class="sc-bCgoVd LTccX"
+                      class="sc-jSppWd fLOjNm"
                       offset="50%"
                     />
                     <stop
-                      class="sc-fKwzVe gTpKTn"
+                      class="sc-eCQgVK bOcrcx"
                       offset="100%"
                     />
                     <animatetransform
@@ -1186,14 +1186,14 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
             </td>
           </tr>
           <tr
-            class="sc-cxxQMU kPmlSu"
+            class="sc-ezjgic bZStHI"
           >
             <td
-              class="sc-cBEgGa kYcIRW"
+              class="sc-iUlCMS iIkvIm"
             >
               <svg
                 aria-labelledby=":r15:-aria"
-                class="sc-kgohyr kmNOSy aje-skeleton-loader sc-ciCrSJ gtAOoi"
+                class="sc-hKVpXn icWWvx aje-skeleton-loader sc-iBjNZB kgvISf"
                 role="img"
               >
                 <rect
@@ -1223,15 +1223,15 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
                     id=":r15:-animated-diff"
                   >
                     <stop
-                      class="sc-fKwzVe gTpKTn"
+                      class="sc-eCQgVK bOcrcx"
                       offset="0%"
                     />
                     <stop
-                      class="sc-bCgoVd LTccX"
+                      class="sc-jSppWd fLOjNm"
                       offset="50%"
                     />
                     <stop
-                      class="sc-fKwzVe gTpKTn"
+                      class="sc-eCQgVK bOcrcx"
                       offset="100%"
                     />
                     <animatetransform
@@ -1246,11 +1246,11 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
               </svg>
             </td>
             <td
-              class="sc-cBEgGa kYcIRW"
+              class="sc-iUlCMS iIkvIm"
             >
               <svg
                 aria-labelledby=":r16:-aria"
-                class="sc-kgohyr kmNOSy aje-skeleton-loader sc-ciCrSJ gtAOoi"
+                class="sc-hKVpXn icWWvx aje-skeleton-loader sc-iBjNZB kgvISf"
                 role="img"
               >
                 <rect
@@ -1280,15 +1280,15 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
                     id=":r16:-animated-diff"
                   >
                     <stop
-                      class="sc-fKwzVe gTpKTn"
+                      class="sc-eCQgVK bOcrcx"
                       offset="0%"
                     />
                     <stop
-                      class="sc-bCgoVd LTccX"
+                      class="sc-jSppWd fLOjNm"
                       offset="50%"
                     />
                     <stop
-                      class="sc-fKwzVe gTpKTn"
+                      class="sc-eCQgVK bOcrcx"
                       offset="100%"
                     />
                     <animatetransform
@@ -1304,14 +1304,14 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
             </td>
           </tr>
           <tr
-            class="sc-cxxQMU kPmlSu"
+            class="sc-ezjgic bZStHI"
           >
             <td
-              class="sc-cBEgGa kYcIRW"
+              class="sc-iUlCMS iIkvIm"
             >
               <svg
                 aria-labelledby=":r17:-aria"
-                class="sc-kgohyr kmNOSy aje-skeleton-loader sc-ciCrSJ gtAOoi"
+                class="sc-hKVpXn icWWvx aje-skeleton-loader sc-iBjNZB kgvISf"
                 role="img"
               >
                 <rect
@@ -1341,15 +1341,15 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
                     id=":r17:-animated-diff"
                   >
                     <stop
-                      class="sc-fKwzVe gTpKTn"
+                      class="sc-eCQgVK bOcrcx"
                       offset="0%"
                     />
                     <stop
-                      class="sc-bCgoVd LTccX"
+                      class="sc-jSppWd fLOjNm"
                       offset="50%"
                     />
                     <stop
-                      class="sc-fKwzVe gTpKTn"
+                      class="sc-eCQgVK bOcrcx"
                       offset="100%"
                     />
                     <animatetransform
@@ -1364,11 +1364,11 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
               </svg>
             </td>
             <td
-              class="sc-cBEgGa kYcIRW"
+              class="sc-iUlCMS iIkvIm"
             >
               <svg
                 aria-labelledby=":r18:-aria"
-                class="sc-kgohyr kmNOSy aje-skeleton-loader sc-ciCrSJ gtAOoi"
+                class="sc-hKVpXn icWWvx aje-skeleton-loader sc-iBjNZB kgvISf"
                 role="img"
               >
                 <rect
@@ -1398,15 +1398,15 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
                     id=":r18:-animated-diff"
                   >
                     <stop
-                      class="sc-fKwzVe gTpKTn"
+                      class="sc-eCQgVK bOcrcx"
                       offset="0%"
                     />
                     <stop
-                      class="sc-bCgoVd LTccX"
+                      class="sc-jSppWd fLOjNm"
                       offset="50%"
                     />
                     <stop
-                      class="sc-fKwzVe gTpKTn"
+                      class="sc-eCQgVK bOcrcx"
                       offset="100%"
                     />
                     <animatetransform
@@ -1422,14 +1422,14 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
             </td>
           </tr>
           <tr
-            class="sc-cxxQMU kPmlSu"
+            class="sc-ezjgic bZStHI"
           >
             <td
-              class="sc-cBEgGa kYcIRW"
+              class="sc-iUlCMS iIkvIm"
             >
               <svg
                 aria-labelledby=":r19:-aria"
-                class="sc-kgohyr kmNOSy aje-skeleton-loader sc-ciCrSJ gtAOoi"
+                class="sc-hKVpXn icWWvx aje-skeleton-loader sc-iBjNZB kgvISf"
                 role="img"
               >
                 <rect
@@ -1459,15 +1459,15 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
                     id=":r19:-animated-diff"
                   >
                     <stop
-                      class="sc-fKwzVe gTpKTn"
+                      class="sc-eCQgVK bOcrcx"
                       offset="0%"
                     />
                     <stop
-                      class="sc-bCgoVd LTccX"
+                      class="sc-jSppWd fLOjNm"
                       offset="50%"
                     />
                     <stop
-                      class="sc-fKwzVe gTpKTn"
+                      class="sc-eCQgVK bOcrcx"
                       offset="100%"
                     />
                     <animatetransform
@@ -1482,11 +1482,11 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
               </svg>
             </td>
             <td
-              class="sc-cBEgGa kYcIRW"
+              class="sc-iUlCMS iIkvIm"
             >
               <svg
                 aria-labelledby=":r1a:-aria"
-                class="sc-kgohyr kmNOSy aje-skeleton-loader sc-ciCrSJ gtAOoi"
+                class="sc-hKVpXn icWWvx aje-skeleton-loader sc-iBjNZB kgvISf"
                 role="img"
               >
                 <rect
@@ -1516,15 +1516,15 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
                     id=":r1a:-animated-diff"
                   >
                     <stop
-                      class="sc-fKwzVe gTpKTn"
+                      class="sc-eCQgVK bOcrcx"
                       offset="0%"
                     />
                     <stop
-                      class="sc-bCgoVd LTccX"
+                      class="sc-jSppWd fLOjNm"
                       offset="50%"
                     />
                     <stop
-                      class="sc-fKwzVe gTpKTn"
+                      class="sc-eCQgVK bOcrcx"
                       offset="100%"
                     />
                     <animatetransform
@@ -1540,14 +1540,14 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
             </td>
           </tr>
           <tr
-            class="sc-cxxQMU kPmlSu"
+            class="sc-ezjgic bZStHI"
           >
             <td
-              class="sc-cBEgGa kYcIRW"
+              class="sc-iUlCMS iIkvIm"
             >
               <svg
                 aria-labelledby=":r1b:-aria"
-                class="sc-kgohyr kmNOSy aje-skeleton-loader sc-ciCrSJ gtAOoi"
+                class="sc-hKVpXn icWWvx aje-skeleton-loader sc-iBjNZB kgvISf"
                 role="img"
               >
                 <rect
@@ -1577,15 +1577,15 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
                     id=":r1b:-animated-diff"
                   >
                     <stop
-                      class="sc-fKwzVe gTpKTn"
+                      class="sc-eCQgVK bOcrcx"
                       offset="0%"
                     />
                     <stop
-                      class="sc-bCgoVd LTccX"
+                      class="sc-jSppWd fLOjNm"
                       offset="50%"
                     />
                     <stop
-                      class="sc-fKwzVe gTpKTn"
+                      class="sc-eCQgVK bOcrcx"
                       offset="100%"
                     />
                     <animatetransform
@@ -1600,11 +1600,11 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
               </svg>
             </td>
             <td
-              class="sc-cBEgGa kYcIRW"
+              class="sc-iUlCMS iIkvIm"
             >
               <svg
                 aria-labelledby=":r1c:-aria"
-                class="sc-kgohyr kmNOSy aje-skeleton-loader sc-ciCrSJ gtAOoi"
+                class="sc-hKVpXn icWWvx aje-skeleton-loader sc-iBjNZB kgvISf"
                 role="img"
               >
                 <rect
@@ -1634,15 +1634,15 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
                     id=":r1c:-animated-diff"
                   >
                     <stop
-                      class="sc-fKwzVe gTpKTn"
+                      class="sc-eCQgVK bOcrcx"
                       offset="0%"
                     />
                     <stop
-                      class="sc-bCgoVd LTccX"
+                      class="sc-jSppWd fLOjNm"
                       offset="50%"
                     />
                     <stop
-                      class="sc-fKwzVe gTpKTn"
+                      class="sc-eCQgVK bOcrcx"
                       offset="100%"
                     />
                     <animatetransform
@@ -1658,14 +1658,14 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
             </td>
           </tr>
           <tr
-            class="sc-cxxQMU kPmlSu"
+            class="sc-ezjgic bZStHI"
           >
             <td
-              class="sc-cBEgGa kYcIRW"
+              class="sc-iUlCMS iIkvIm"
             >
               <svg
                 aria-labelledby=":r1d:-aria"
-                class="sc-kgohyr kmNOSy aje-skeleton-loader sc-ciCrSJ gtAOoi"
+                class="sc-hKVpXn icWWvx aje-skeleton-loader sc-iBjNZB kgvISf"
                 role="img"
               >
                 <rect
@@ -1695,15 +1695,15 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
                     id=":r1d:-animated-diff"
                   >
                     <stop
-                      class="sc-fKwzVe gTpKTn"
+                      class="sc-eCQgVK bOcrcx"
                       offset="0%"
                     />
                     <stop
-                      class="sc-bCgoVd LTccX"
+                      class="sc-jSppWd fLOjNm"
                       offset="50%"
                     />
                     <stop
-                      class="sc-fKwzVe gTpKTn"
+                      class="sc-eCQgVK bOcrcx"
                       offset="100%"
                     />
                     <animatetransform
@@ -1718,11 +1718,11 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
               </svg>
             </td>
             <td
-              class="sc-cBEgGa kYcIRW"
+              class="sc-iUlCMS iIkvIm"
             >
               <svg
                 aria-labelledby=":r1e:-aria"
-                class="sc-kgohyr kmNOSy aje-skeleton-loader sc-ciCrSJ gtAOoi"
+                class="sc-hKVpXn icWWvx aje-skeleton-loader sc-iBjNZB kgvISf"
                 role="img"
               >
                 <rect
@@ -1752,15 +1752,15 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
                     id=":r1e:-animated-diff"
                   >
                     <stop
-                      class="sc-fKwzVe gTpKTn"
+                      class="sc-eCQgVK bOcrcx"
                       offset="0%"
                     />
                     <stop
-                      class="sc-bCgoVd LTccX"
+                      class="sc-jSppWd fLOjNm"
                       offset="50%"
                     />
                     <stop
-                      class="sc-fKwzVe gTpKTn"
+                      class="sc-eCQgVK bOcrcx"
                       offset="100%"
                     />
                     <animatetransform
@@ -1776,14 +1776,14 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
             </td>
           </tr>
           <tr
-            class="sc-cxxQMU kPmlSu"
+            class="sc-ezjgic bZStHI"
           >
             <td
-              class="sc-cBEgGa kYcIRW"
+              class="sc-iUlCMS iIkvIm"
             >
               <svg
                 aria-labelledby=":r1f:-aria"
-                class="sc-kgohyr kmNOSy aje-skeleton-loader sc-ciCrSJ gtAOoi"
+                class="sc-hKVpXn icWWvx aje-skeleton-loader sc-iBjNZB kgvISf"
                 role="img"
               >
                 <rect
@@ -1813,15 +1813,15 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
                     id=":r1f:-animated-diff"
                   >
                     <stop
-                      class="sc-fKwzVe gTpKTn"
+                      class="sc-eCQgVK bOcrcx"
                       offset="0%"
                     />
                     <stop
-                      class="sc-bCgoVd LTccX"
+                      class="sc-jSppWd fLOjNm"
                       offset="50%"
                     />
                     <stop
-                      class="sc-fKwzVe gTpKTn"
+                      class="sc-eCQgVK bOcrcx"
                       offset="100%"
                     />
                     <animatetransform
@@ -1836,11 +1836,11 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
               </svg>
             </td>
             <td
-              class="sc-cBEgGa kYcIRW"
+              class="sc-iUlCMS iIkvIm"
             >
               <svg
                 aria-labelledby=":r1g:-aria"
-                class="sc-kgohyr kmNOSy aje-skeleton-loader sc-ciCrSJ gtAOoi"
+                class="sc-hKVpXn icWWvx aje-skeleton-loader sc-iBjNZB kgvISf"
                 role="img"
               >
                 <rect
@@ -1870,15 +1870,15 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
                     id=":r1g:-animated-diff"
                   >
                     <stop
-                      class="sc-fKwzVe gTpKTn"
+                      class="sc-eCQgVK bOcrcx"
                       offset="0%"
                     />
                     <stop
-                      class="sc-bCgoVd LTccX"
+                      class="sc-jSppWd fLOjNm"
                       offset="50%"
                     />
                     <stop
-                      class="sc-fKwzVe gTpKTn"
+                      class="sc-eCQgVK bOcrcx"
                       offset="100%"
                     />
                     <animatetransform
@@ -1894,14 +1894,14 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
             </td>
           </tr>
           <tr
-            class="sc-cxxQMU kPmlSu"
+            class="sc-ezjgic bZStHI"
           >
             <td
-              class="sc-cBEgGa kYcIRW"
+              class="sc-iUlCMS iIkvIm"
             >
               <svg
                 aria-labelledby=":r1h:-aria"
-                class="sc-kgohyr kmNOSy aje-skeleton-loader sc-ciCrSJ gtAOoi"
+                class="sc-hKVpXn icWWvx aje-skeleton-loader sc-iBjNZB kgvISf"
                 role="img"
               >
                 <rect
@@ -1931,15 +1931,15 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
                     id=":r1h:-animated-diff"
                   >
                     <stop
-                      class="sc-fKwzVe gTpKTn"
+                      class="sc-eCQgVK bOcrcx"
                       offset="0%"
                     />
                     <stop
-                      class="sc-bCgoVd LTccX"
+                      class="sc-jSppWd fLOjNm"
                       offset="50%"
                     />
                     <stop
-                      class="sc-fKwzVe gTpKTn"
+                      class="sc-eCQgVK bOcrcx"
                       offset="100%"
                     />
                     <animatetransform
@@ -1954,11 +1954,11 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
               </svg>
             </td>
             <td
-              class="sc-cBEgGa kYcIRW"
+              class="sc-iUlCMS iIkvIm"
             >
               <svg
                 aria-labelledby=":r1i:-aria"
-                class="sc-kgohyr kmNOSy aje-skeleton-loader sc-ciCrSJ gtAOoi"
+                class="sc-hKVpXn icWWvx aje-skeleton-loader sc-iBjNZB kgvISf"
                 role="img"
               >
                 <rect
@@ -1988,15 +1988,15 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
                     id=":r1i:-animated-diff"
                   >
                     <stop
-                      class="sc-fKwzVe gTpKTn"
+                      class="sc-eCQgVK bOcrcx"
                       offset="0%"
                     />
                     <stop
-                      class="sc-bCgoVd LTccX"
+                      class="sc-jSppWd fLOjNm"
                       offset="50%"
                     />
                     <stop
-                      class="sc-fKwzVe gTpKTn"
+                      class="sc-eCQgVK bOcrcx"
                       offset="100%"
                     />
                     <animatetransform
@@ -2022,13 +2022,13 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
     <table
       aria-describedby=""
       aria-label="table"
-      class="sc-ivKqQM dvdTUR aje-table"
+      class="sc-giQkEn lnLxOL aje-table"
       data-collection="react-aria-:rr:"
       role="grid"
       tabindex="0"
     >
       <thead
-        class="sc-giQkEn hpXlZv aje-table__header"
+        class="sc-ikBzZv jhKIUW aje-table__header"
         role="rowgroup"
       >
         <tr
@@ -2037,7 +2037,7 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
         >
           <th
             aria-colindex="1"
-            class="sc-bYgEKt ljtAAl aje-table__column"
+            class="sc-hiunUN dJuUyV aje-table__column"
             data-collection="react-aria-:rr:"
             data-key="a"
             data-searchable="true"
@@ -2047,44 +2047,44 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
             tabindex="-1"
           >
             <div
-              class="sc-ezjgic kswyAg"
+              class="sc-jJwPsw iZUnjr"
             >
               Column 1
               <div
                 aria-expanded="false"
-                class="sc-eCQgVK lhFnxc aje-combo-input sc-ikBzZv dACBcu"
+                class="sc-qdQOe kPUMiD aje-combo-input sc-cBEgGa brMiEN"
               >
                 <input
                   aria-label="Search a"
-                  class="sc-hKVpXn ecqUOI"
+                  class="sc-gKkgUA bzpolP"
                   disabled=""
                   role="search"
                   slot="search"
                   value=""
                 />
                 <button
-                  class="sc-fuztkK sc-qdQOe fTXzHK iFSkaa aje-btn aje-icon-btn aje-btn--content is-small"
+                  class="sc-dYjPD sc-bqqMSY hHQCzc dIQBXN aje-btn aje-icon-btn aje-btn--content is-small"
                   data-icon-button="true"
                   tabindex="0"
                   type="button"
                 >
                   <i
                     aria-hidden="true"
-                    class="sc-iCECmn erxnfb aje-icon material-icons is-small"
+                    class="sc-crPgjm bIBcHh aje-icon material-icons is-small"
                   >
                     close
                   </i>
                 </button>
               </div>
               <button
-                class="sc-fuztkK sc-qdQOe fTXzHK iFSkaa aje-btn aje-icon-btn aje-btn--content is-small"
+                class="sc-dYjPD sc-bqqMSY hHQCzc dIQBXN aje-btn aje-icon-btn aje-btn--content is-small"
                 data-icon-button="true"
                 tabindex="0"
                 type="button"
               >
                 <i
                   aria-hidden="true"
-                  class="sc-iCECmn erxnfb aje-icon material-icons is-small"
+                  class="sc-crPgjm bIBcHh aje-icon material-icons is-small"
                 >
                   search
                 </i>
@@ -2093,7 +2093,7 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
           </th>
           <th
             aria-colindex="2"
-            class="sc-bYgEKt ljtAAl aje-table__column"
+            class="sc-hiunUN dJuUyV aje-table__column"
             data-collection="react-aria-:rr:"
             data-key="b"
             data-sort-visibility="selected"
@@ -2102,7 +2102,7 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
             tabindex="-1"
           >
             <div
-              class="sc-ezjgic kswyAg"
+              class="sc-jJwPsw iZUnjr"
             >
               Column 2
             </div>
@@ -2110,19 +2110,19 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
         </tr>
       </thead>
       <tbody
-        class="sc-hiunUN aje-table__body"
+        class="sc-jcgtOs aje-table__body"
         data-loading="true"
         role="rowgroup"
       >
         <tr
-          class="sc-cxxQMU kPmlSu"
+          class="sc-ezjgic bZStHI"
         >
           <td
-            class="sc-cBEgGa kYcIRW"
+            class="sc-iUlCMS iIkvIm"
           >
             <svg
               aria-labelledby=":rv:-aria"
-              class="sc-kgohyr kmNOSy aje-skeleton-loader sc-ciCrSJ gtAOoi"
+              class="sc-hKVpXn icWWvx aje-skeleton-loader sc-iBjNZB kgvISf"
               role="img"
             >
               <rect
@@ -2152,15 +2152,15 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
                   id=":rv:-animated-diff"
                 >
                   <stop
-                    class="sc-fKwzVe gTpKTn"
+                    class="sc-eCQgVK bOcrcx"
                     offset="0%"
                   />
                   <stop
-                    class="sc-bCgoVd LTccX"
+                    class="sc-jSppWd fLOjNm"
                     offset="50%"
                   />
                   <stop
-                    class="sc-fKwzVe gTpKTn"
+                    class="sc-eCQgVK bOcrcx"
                     offset="100%"
                   />
                   <animatetransform
@@ -2175,11 +2175,11 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
             </svg>
           </td>
           <td
-            class="sc-cBEgGa kYcIRW"
+            class="sc-iUlCMS iIkvIm"
           >
             <svg
               aria-labelledby=":r10:-aria"
-              class="sc-kgohyr kmNOSy aje-skeleton-loader sc-ciCrSJ gtAOoi"
+              class="sc-hKVpXn icWWvx aje-skeleton-loader sc-iBjNZB kgvISf"
               role="img"
             >
               <rect
@@ -2209,15 +2209,15 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
                   id=":r10:-animated-diff"
                 >
                   <stop
-                    class="sc-fKwzVe gTpKTn"
+                    class="sc-eCQgVK bOcrcx"
                     offset="0%"
                   />
                   <stop
-                    class="sc-bCgoVd LTccX"
+                    class="sc-jSppWd fLOjNm"
                     offset="50%"
                   />
                   <stop
-                    class="sc-fKwzVe gTpKTn"
+                    class="sc-eCQgVK bOcrcx"
                     offset="100%"
                   />
                   <animatetransform
@@ -2233,14 +2233,14 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
           </td>
         </tr>
         <tr
-          class="sc-cxxQMU kPmlSu"
+          class="sc-ezjgic bZStHI"
         >
           <td
-            class="sc-cBEgGa kYcIRW"
+            class="sc-iUlCMS iIkvIm"
           >
             <svg
               aria-labelledby=":r11:-aria"
-              class="sc-kgohyr kmNOSy aje-skeleton-loader sc-ciCrSJ gtAOoi"
+              class="sc-hKVpXn icWWvx aje-skeleton-loader sc-iBjNZB kgvISf"
               role="img"
             >
               <rect
@@ -2270,15 +2270,15 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
                   id=":r11:-animated-diff"
                 >
                   <stop
-                    class="sc-fKwzVe gTpKTn"
+                    class="sc-eCQgVK bOcrcx"
                     offset="0%"
                   />
                   <stop
-                    class="sc-bCgoVd LTccX"
+                    class="sc-jSppWd fLOjNm"
                     offset="50%"
                   />
                   <stop
-                    class="sc-fKwzVe gTpKTn"
+                    class="sc-eCQgVK bOcrcx"
                     offset="100%"
                   />
                   <animatetransform
@@ -2293,11 +2293,11 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
             </svg>
           </td>
           <td
-            class="sc-cBEgGa kYcIRW"
+            class="sc-iUlCMS iIkvIm"
           >
             <svg
               aria-labelledby=":r12:-aria"
-              class="sc-kgohyr kmNOSy aje-skeleton-loader sc-ciCrSJ gtAOoi"
+              class="sc-hKVpXn icWWvx aje-skeleton-loader sc-iBjNZB kgvISf"
               role="img"
             >
               <rect
@@ -2327,15 +2327,15 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
                   id=":r12:-animated-diff"
                 >
                   <stop
-                    class="sc-fKwzVe gTpKTn"
+                    class="sc-eCQgVK bOcrcx"
                     offset="0%"
                   />
                   <stop
-                    class="sc-bCgoVd LTccX"
+                    class="sc-jSppWd fLOjNm"
                     offset="50%"
                   />
                   <stop
-                    class="sc-fKwzVe gTpKTn"
+                    class="sc-eCQgVK bOcrcx"
                     offset="100%"
                   />
                   <animatetransform
@@ -2351,14 +2351,14 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
           </td>
         </tr>
         <tr
-          class="sc-cxxQMU kPmlSu"
+          class="sc-ezjgic bZStHI"
         >
           <td
-            class="sc-cBEgGa kYcIRW"
+            class="sc-iUlCMS iIkvIm"
           >
             <svg
               aria-labelledby=":r13:-aria"
-              class="sc-kgohyr kmNOSy aje-skeleton-loader sc-ciCrSJ gtAOoi"
+              class="sc-hKVpXn icWWvx aje-skeleton-loader sc-iBjNZB kgvISf"
               role="img"
             >
               <rect
@@ -2388,15 +2388,15 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
                   id=":r13:-animated-diff"
                 >
                   <stop
-                    class="sc-fKwzVe gTpKTn"
+                    class="sc-eCQgVK bOcrcx"
                     offset="0%"
                   />
                   <stop
-                    class="sc-bCgoVd LTccX"
+                    class="sc-jSppWd fLOjNm"
                     offset="50%"
                   />
                   <stop
-                    class="sc-fKwzVe gTpKTn"
+                    class="sc-eCQgVK bOcrcx"
                     offset="100%"
                   />
                   <animatetransform
@@ -2411,11 +2411,11 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
             </svg>
           </td>
           <td
-            class="sc-cBEgGa kYcIRW"
+            class="sc-iUlCMS iIkvIm"
           >
             <svg
               aria-labelledby=":r14:-aria"
-              class="sc-kgohyr kmNOSy aje-skeleton-loader sc-ciCrSJ gtAOoi"
+              class="sc-hKVpXn icWWvx aje-skeleton-loader sc-iBjNZB kgvISf"
               role="img"
             >
               <rect
@@ -2445,15 +2445,15 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
                   id=":r14:-animated-diff"
                 >
                   <stop
-                    class="sc-fKwzVe gTpKTn"
+                    class="sc-eCQgVK bOcrcx"
                     offset="0%"
                   />
                   <stop
-                    class="sc-bCgoVd LTccX"
+                    class="sc-jSppWd fLOjNm"
                     offset="50%"
                   />
                   <stop
-                    class="sc-fKwzVe gTpKTn"
+                    class="sc-eCQgVK bOcrcx"
                     offset="100%"
                   />
                   <animatetransform
@@ -2469,14 +2469,14 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
           </td>
         </tr>
         <tr
-          class="sc-cxxQMU kPmlSu"
+          class="sc-ezjgic bZStHI"
         >
           <td
-            class="sc-cBEgGa kYcIRW"
+            class="sc-iUlCMS iIkvIm"
           >
             <svg
               aria-labelledby=":r15:-aria"
-              class="sc-kgohyr kmNOSy aje-skeleton-loader sc-ciCrSJ gtAOoi"
+              class="sc-hKVpXn icWWvx aje-skeleton-loader sc-iBjNZB kgvISf"
               role="img"
             >
               <rect
@@ -2506,15 +2506,15 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
                   id=":r15:-animated-diff"
                 >
                   <stop
-                    class="sc-fKwzVe gTpKTn"
+                    class="sc-eCQgVK bOcrcx"
                     offset="0%"
                   />
                   <stop
-                    class="sc-bCgoVd LTccX"
+                    class="sc-jSppWd fLOjNm"
                     offset="50%"
                   />
                   <stop
-                    class="sc-fKwzVe gTpKTn"
+                    class="sc-eCQgVK bOcrcx"
                     offset="100%"
                   />
                   <animatetransform
@@ -2529,11 +2529,11 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
             </svg>
           </td>
           <td
-            class="sc-cBEgGa kYcIRW"
+            class="sc-iUlCMS iIkvIm"
           >
             <svg
               aria-labelledby=":r16:-aria"
-              class="sc-kgohyr kmNOSy aje-skeleton-loader sc-ciCrSJ gtAOoi"
+              class="sc-hKVpXn icWWvx aje-skeleton-loader sc-iBjNZB kgvISf"
               role="img"
             >
               <rect
@@ -2563,15 +2563,15 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
                   id=":r16:-animated-diff"
                 >
                   <stop
-                    class="sc-fKwzVe gTpKTn"
+                    class="sc-eCQgVK bOcrcx"
                     offset="0%"
                   />
                   <stop
-                    class="sc-bCgoVd LTccX"
+                    class="sc-jSppWd fLOjNm"
                     offset="50%"
                   />
                   <stop
-                    class="sc-fKwzVe gTpKTn"
+                    class="sc-eCQgVK bOcrcx"
                     offset="100%"
                   />
                   <animatetransform
@@ -2587,14 +2587,14 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
           </td>
         </tr>
         <tr
-          class="sc-cxxQMU kPmlSu"
+          class="sc-ezjgic bZStHI"
         >
           <td
-            class="sc-cBEgGa kYcIRW"
+            class="sc-iUlCMS iIkvIm"
           >
             <svg
               aria-labelledby=":r17:-aria"
-              class="sc-kgohyr kmNOSy aje-skeleton-loader sc-ciCrSJ gtAOoi"
+              class="sc-hKVpXn icWWvx aje-skeleton-loader sc-iBjNZB kgvISf"
               role="img"
             >
               <rect
@@ -2624,15 +2624,15 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
                   id=":r17:-animated-diff"
                 >
                   <stop
-                    class="sc-fKwzVe gTpKTn"
+                    class="sc-eCQgVK bOcrcx"
                     offset="0%"
                   />
                   <stop
-                    class="sc-bCgoVd LTccX"
+                    class="sc-jSppWd fLOjNm"
                     offset="50%"
                   />
                   <stop
-                    class="sc-fKwzVe gTpKTn"
+                    class="sc-eCQgVK bOcrcx"
                     offset="100%"
                   />
                   <animatetransform
@@ -2647,11 +2647,11 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
             </svg>
           </td>
           <td
-            class="sc-cBEgGa kYcIRW"
+            class="sc-iUlCMS iIkvIm"
           >
             <svg
               aria-labelledby=":r18:-aria"
-              class="sc-kgohyr kmNOSy aje-skeleton-loader sc-ciCrSJ gtAOoi"
+              class="sc-hKVpXn icWWvx aje-skeleton-loader sc-iBjNZB kgvISf"
               role="img"
             >
               <rect
@@ -2681,15 +2681,15 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
                   id=":r18:-animated-diff"
                 >
                   <stop
-                    class="sc-fKwzVe gTpKTn"
+                    class="sc-eCQgVK bOcrcx"
                     offset="0%"
                   />
                   <stop
-                    class="sc-bCgoVd LTccX"
+                    class="sc-jSppWd fLOjNm"
                     offset="50%"
                   />
                   <stop
-                    class="sc-fKwzVe gTpKTn"
+                    class="sc-eCQgVK bOcrcx"
                     offset="100%"
                   />
                   <animatetransform
@@ -2705,14 +2705,14 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
           </td>
         </tr>
         <tr
-          class="sc-cxxQMU kPmlSu"
+          class="sc-ezjgic bZStHI"
         >
           <td
-            class="sc-cBEgGa kYcIRW"
+            class="sc-iUlCMS iIkvIm"
           >
             <svg
               aria-labelledby=":r19:-aria"
-              class="sc-kgohyr kmNOSy aje-skeleton-loader sc-ciCrSJ gtAOoi"
+              class="sc-hKVpXn icWWvx aje-skeleton-loader sc-iBjNZB kgvISf"
               role="img"
             >
               <rect
@@ -2742,15 +2742,15 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
                   id=":r19:-animated-diff"
                 >
                   <stop
-                    class="sc-fKwzVe gTpKTn"
+                    class="sc-eCQgVK bOcrcx"
                     offset="0%"
                   />
                   <stop
-                    class="sc-bCgoVd LTccX"
+                    class="sc-jSppWd fLOjNm"
                     offset="50%"
                   />
                   <stop
-                    class="sc-fKwzVe gTpKTn"
+                    class="sc-eCQgVK bOcrcx"
                     offset="100%"
                   />
                   <animatetransform
@@ -2765,11 +2765,11 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
             </svg>
           </td>
           <td
-            class="sc-cBEgGa kYcIRW"
+            class="sc-iUlCMS iIkvIm"
           >
             <svg
               aria-labelledby=":r1a:-aria"
-              class="sc-kgohyr kmNOSy aje-skeleton-loader sc-ciCrSJ gtAOoi"
+              class="sc-hKVpXn icWWvx aje-skeleton-loader sc-iBjNZB kgvISf"
               role="img"
             >
               <rect
@@ -2799,15 +2799,15 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
                   id=":r1a:-animated-diff"
                 >
                   <stop
-                    class="sc-fKwzVe gTpKTn"
+                    class="sc-eCQgVK bOcrcx"
                     offset="0%"
                   />
                   <stop
-                    class="sc-bCgoVd LTccX"
+                    class="sc-jSppWd fLOjNm"
                     offset="50%"
                   />
                   <stop
-                    class="sc-fKwzVe gTpKTn"
+                    class="sc-eCQgVK bOcrcx"
                     offset="100%"
                   />
                   <animatetransform
@@ -2823,14 +2823,14 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
           </td>
         </tr>
         <tr
-          class="sc-cxxQMU kPmlSu"
+          class="sc-ezjgic bZStHI"
         >
           <td
-            class="sc-cBEgGa kYcIRW"
+            class="sc-iUlCMS iIkvIm"
           >
             <svg
               aria-labelledby=":r1b:-aria"
-              class="sc-kgohyr kmNOSy aje-skeleton-loader sc-ciCrSJ gtAOoi"
+              class="sc-hKVpXn icWWvx aje-skeleton-loader sc-iBjNZB kgvISf"
               role="img"
             >
               <rect
@@ -2860,15 +2860,15 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
                   id=":r1b:-animated-diff"
                 >
                   <stop
-                    class="sc-fKwzVe gTpKTn"
+                    class="sc-eCQgVK bOcrcx"
                     offset="0%"
                   />
                   <stop
-                    class="sc-bCgoVd LTccX"
+                    class="sc-jSppWd fLOjNm"
                     offset="50%"
                   />
                   <stop
-                    class="sc-fKwzVe gTpKTn"
+                    class="sc-eCQgVK bOcrcx"
                     offset="100%"
                   />
                   <animatetransform
@@ -2883,11 +2883,11 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
             </svg>
           </td>
           <td
-            class="sc-cBEgGa kYcIRW"
+            class="sc-iUlCMS iIkvIm"
           >
             <svg
               aria-labelledby=":r1c:-aria"
-              class="sc-kgohyr kmNOSy aje-skeleton-loader sc-ciCrSJ gtAOoi"
+              class="sc-hKVpXn icWWvx aje-skeleton-loader sc-iBjNZB kgvISf"
               role="img"
             >
               <rect
@@ -2917,15 +2917,15 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
                   id=":r1c:-animated-diff"
                 >
                   <stop
-                    class="sc-fKwzVe gTpKTn"
+                    class="sc-eCQgVK bOcrcx"
                     offset="0%"
                   />
                   <stop
-                    class="sc-bCgoVd LTccX"
+                    class="sc-jSppWd fLOjNm"
                     offset="50%"
                   />
                   <stop
-                    class="sc-fKwzVe gTpKTn"
+                    class="sc-eCQgVK bOcrcx"
                     offset="100%"
                   />
                   <animatetransform
@@ -2941,14 +2941,14 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
           </td>
         </tr>
         <tr
-          class="sc-cxxQMU kPmlSu"
+          class="sc-ezjgic bZStHI"
         >
           <td
-            class="sc-cBEgGa kYcIRW"
+            class="sc-iUlCMS iIkvIm"
           >
             <svg
               aria-labelledby=":r1d:-aria"
-              class="sc-kgohyr kmNOSy aje-skeleton-loader sc-ciCrSJ gtAOoi"
+              class="sc-hKVpXn icWWvx aje-skeleton-loader sc-iBjNZB kgvISf"
               role="img"
             >
               <rect
@@ -2978,15 +2978,15 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
                   id=":r1d:-animated-diff"
                 >
                   <stop
-                    class="sc-fKwzVe gTpKTn"
+                    class="sc-eCQgVK bOcrcx"
                     offset="0%"
                   />
                   <stop
-                    class="sc-bCgoVd LTccX"
+                    class="sc-jSppWd fLOjNm"
                     offset="50%"
                   />
                   <stop
-                    class="sc-fKwzVe gTpKTn"
+                    class="sc-eCQgVK bOcrcx"
                     offset="100%"
                   />
                   <animatetransform
@@ -3001,11 +3001,11 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
             </svg>
           </td>
           <td
-            class="sc-cBEgGa kYcIRW"
+            class="sc-iUlCMS iIkvIm"
           >
             <svg
               aria-labelledby=":r1e:-aria"
-              class="sc-kgohyr kmNOSy aje-skeleton-loader sc-ciCrSJ gtAOoi"
+              class="sc-hKVpXn icWWvx aje-skeleton-loader sc-iBjNZB kgvISf"
               role="img"
             >
               <rect
@@ -3035,15 +3035,15 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
                   id=":r1e:-animated-diff"
                 >
                   <stop
-                    class="sc-fKwzVe gTpKTn"
+                    class="sc-eCQgVK bOcrcx"
                     offset="0%"
                   />
                   <stop
-                    class="sc-bCgoVd LTccX"
+                    class="sc-jSppWd fLOjNm"
                     offset="50%"
                   />
                   <stop
-                    class="sc-fKwzVe gTpKTn"
+                    class="sc-eCQgVK bOcrcx"
                     offset="100%"
                   />
                   <animatetransform
@@ -3059,14 +3059,14 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
           </td>
         </tr>
         <tr
-          class="sc-cxxQMU kPmlSu"
+          class="sc-ezjgic bZStHI"
         >
           <td
-            class="sc-cBEgGa kYcIRW"
+            class="sc-iUlCMS iIkvIm"
           >
             <svg
               aria-labelledby=":r1f:-aria"
-              class="sc-kgohyr kmNOSy aje-skeleton-loader sc-ciCrSJ gtAOoi"
+              class="sc-hKVpXn icWWvx aje-skeleton-loader sc-iBjNZB kgvISf"
               role="img"
             >
               <rect
@@ -3096,15 +3096,15 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
                   id=":r1f:-animated-diff"
                 >
                   <stop
-                    class="sc-fKwzVe gTpKTn"
+                    class="sc-eCQgVK bOcrcx"
                     offset="0%"
                   />
                   <stop
-                    class="sc-bCgoVd LTccX"
+                    class="sc-jSppWd fLOjNm"
                     offset="50%"
                   />
                   <stop
-                    class="sc-fKwzVe gTpKTn"
+                    class="sc-eCQgVK bOcrcx"
                     offset="100%"
                   />
                   <animatetransform
@@ -3119,11 +3119,11 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
             </svg>
           </td>
           <td
-            class="sc-cBEgGa kYcIRW"
+            class="sc-iUlCMS iIkvIm"
           >
             <svg
               aria-labelledby=":r1g:-aria"
-              class="sc-kgohyr kmNOSy aje-skeleton-loader sc-ciCrSJ gtAOoi"
+              class="sc-hKVpXn icWWvx aje-skeleton-loader sc-iBjNZB kgvISf"
               role="img"
             >
               <rect
@@ -3153,15 +3153,15 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
                   id=":r1g:-animated-diff"
                 >
                   <stop
-                    class="sc-fKwzVe gTpKTn"
+                    class="sc-eCQgVK bOcrcx"
                     offset="0%"
                   />
                   <stop
-                    class="sc-bCgoVd LTccX"
+                    class="sc-jSppWd fLOjNm"
                     offset="50%"
                   />
                   <stop
-                    class="sc-fKwzVe gTpKTn"
+                    class="sc-eCQgVK bOcrcx"
                     offset="100%"
                   />
                   <animatetransform
@@ -3177,14 +3177,14 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
           </td>
         </tr>
         <tr
-          class="sc-cxxQMU kPmlSu"
+          class="sc-ezjgic bZStHI"
         >
           <td
-            class="sc-cBEgGa kYcIRW"
+            class="sc-iUlCMS iIkvIm"
           >
             <svg
               aria-labelledby=":r1h:-aria"
-              class="sc-kgohyr kmNOSy aje-skeleton-loader sc-ciCrSJ gtAOoi"
+              class="sc-hKVpXn icWWvx aje-skeleton-loader sc-iBjNZB kgvISf"
               role="img"
             >
               <rect
@@ -3214,15 +3214,15 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
                   id=":r1h:-animated-diff"
                 >
                   <stop
-                    class="sc-fKwzVe gTpKTn"
+                    class="sc-eCQgVK bOcrcx"
                     offset="0%"
                   />
                   <stop
-                    class="sc-bCgoVd LTccX"
+                    class="sc-jSppWd fLOjNm"
                     offset="50%"
                   />
                   <stop
-                    class="sc-fKwzVe gTpKTn"
+                    class="sc-eCQgVK bOcrcx"
                     offset="100%"
                   />
                   <animatetransform
@@ -3237,11 +3237,11 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
             </svg>
           </td>
           <td
-            class="sc-cBEgGa kYcIRW"
+            class="sc-iUlCMS iIkvIm"
           >
             <svg
               aria-labelledby=":r1i:-aria"
-              class="sc-kgohyr kmNOSy aje-skeleton-loader sc-ciCrSJ gtAOoi"
+              class="sc-hKVpXn icWWvx aje-skeleton-loader sc-iBjNZB kgvISf"
               role="img"
             >
               <rect
@@ -3271,15 +3271,15 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
                   id=":r1i:-animated-diff"
                 >
                   <stop
-                    class="sc-fKwzVe gTpKTn"
+                    class="sc-eCQgVK bOcrcx"
                     offset="0%"
                   />
                   <stop
-                    class="sc-bCgoVd LTccX"
+                    class="sc-jSppWd fLOjNm"
                     offset="50%"
                   />
                   <stop
-                    class="sc-fKwzVe gTpKTn"
+                    class="sc-eCQgVK bOcrcx"
                     offset="100%"
                   />
                   <animatetransform
diff --git a/packages/atomic-elements/src/components/Dropdowns/Combobox/__snapshots__/Combobox.spec.tsx.snap b/packages/atomic-elements/src/components/Dropdowns/Combobox/__snapshots__/Combobox.spec.tsx.snap
index ae33c2a52..6ca90afa3 100644
--- a/packages/atomic-elements/src/components/Dropdowns/Combobox/__snapshots__/Combobox.spec.tsx.snap
+++ b/packages/atomic-elements/src/components/Dropdowns/Combobox/__snapshots__/Combobox.spec.tsx.snap
@@ -6,11 +6,10 @@ exports[`matches snapshots > matches default variant 1`] = `
     data-react-aria-hidden="true"
   />
   <div
-    class="sc-ivKqQM hinzSz aje-combobox sc-cxxQMU hpfxDi is-medium"
+    class="sc-bYgEKt giTbGw aje-combobox sc-ikBzZv blVAzm is-medium"
   >
     <label
       class="sc-crPgjm gzYIYu"
-      for="react-aria-:r3:"
       id="react-aria-:r4:"
     >
       Text Label
@@ -22,7 +21,7 @@ exports[`matches snapshots > matches default variant 1`] = `
       message
     </p>
     <div
-      class="sc-hCcPtG rkCyy aje-combo-input"
+      class="sc-dILkzW FPczG aje-combo-input"
     >
       <input
         aria-autocomplete="list"
@@ -31,7 +30,7 @@ exports[`matches snapshots > matches default variant 1`] = `
         aria-labelledby="react-aria-:r4:"
         autocomplete="off"
         autocorrect="off"
-        class="sc-krVzYl ePxwJv is-full"
+        class="sc-fFCZOx iabstJ is-full"
         id="react-aria-:r3:"
         role="combobox"
         spellcheck="false"
@@ -68,13 +67,13 @@ exports[`matches snapshots > matches floating variant 1`] = `
     data-react-aria-hidden="true"
   />
   <div
-    class="sc-ivKqQM hinzSz aje-combobox sc-cxxQMU hpfxDi aje-combobox--floating is-medium"
+    class="sc-bYgEKt giTbGw aje-combobox sc-ikBzZv blVAzm aje-combobox--floating is-medium"
   >
     <div
-      class="sc-bCgoVd kvFozl"
+      class="sc-ezjgic inJFVa"
     >
       <div
-        class="sc-hCcPtG rkCyy aje-combo-input"
+        class="sc-dILkzW FPczG aje-combo-input"
       >
         <input
           aria-autocomplete="list"
@@ -83,7 +82,7 @@ exports[`matches snapshots > matches floating variant 1`] = `
           aria-labelledby="react-aria-:re:"
           autocomplete="off"
           autocorrect="off"
-          class="sc-krVzYl ePxwJv is-full"
+          class="sc-fFCZOx iabstJ is-full"
           id="react-aria-:rd:"
           role="combobox"
           spellcheck="false"
@@ -112,7 +111,6 @@ exports[`matches snapshots > matches floating variant 1`] = `
       </div>
       <label
         class="sc-crPgjm gzYIYu"
-        for="react-aria-:rd:"
         id="react-aria-:re:"
       >
         Text Label
diff --git a/packages/atomic-elements/src/components/Dropdowns/CustomSelect/__snapshots__/CustomSelect.spec.tsx.snap b/packages/atomic-elements/src/components/Dropdowns/CustomSelect/__snapshots__/CustomSelect.spec.tsx.snap
index c8971f989..ad7bfd5d7 100644
--- a/packages/atomic-elements/src/components/Dropdowns/CustomSelect/__snapshots__/CustomSelect.spec.tsx.snap
+++ b/packages/atomic-elements/src/components/Dropdowns/CustomSelect/__snapshots__/CustomSelect.spec.tsx.snap
@@ -6,7 +6,7 @@ exports[`matches snapshots > matches default variant 1`] = `
     data-react-aria-hidden="true"
   />
   <div
-    class="sc-bCgoVd iZtvlV aje-select sc-llQYOh bdcNlC aje-select aje-select--default"
+    class="sc-ezjgic klbIcq aje-select sc-jJwPsw clWTja aje-select aje-select--default is-medium"
   >
     <div
       aria-hidden="true"
@@ -43,20 +43,20 @@ exports[`matches snapshots > matches default variant 1`] = `
       aria-expanded="false"
       aria-haspopup="listbox"
       aria-labelledby="react-aria-:r7: react-aria-:r3:"
-      class="sc-jrIDTr hLlmew aje-btn aje-btn--dropdown is-medium"
+      class="sc-krVzYl ecatrr aje-btn aje-btn--dropdown is-medium"
       id="react-aria-:r2:"
       tabindex="0"
       type="button"
     >
       <span
-        class="sc-ivKqQM gCaYRv"
+        class="sc-bYgEKt eEAwxI"
         id="react-aria-:r7:"
       >
         Select an option
       </span>
       <i
         aria-hidden="true"
-        class="sc-qdQOe fAeGwC aje-icon material-icons is-medium"
+        class="sc-bqqMSY cFveTB aje-icon material-icons is-medium"
         style="margin-left: auto;"
       >
         arrow_drop_down
@@ -72,7 +72,7 @@ exports[`matches snapshots > matches floating variant 1`] = `
     data-react-aria-hidden="true"
   />
   <div
-    class="sc-bCgoVd iZtvlV aje-select sc-llQYOh bdcNlC aje-select aje-select--floating aje-select--floating"
+    class="sc-ezjgic klbIcq aje-select sc-jJwPsw clWTja aje-select aje-select--floating is-medium aje-select--floating"
   >
     <div
       aria-hidden="true"
@@ -100,24 +100,24 @@ exports[`matches snapshots > matches floating variant 1`] = `
       </label>
     </div>
     <div
-      class="sc-cxxQMU gZUQNc"
+      class="sc-kLEbxe iOXjCz"
     >
       <button
         aria-expanded="false"
         aria-haspopup="listbox"
         aria-labelledby="react-aria-:rf: react-aria-:rb:"
-        class="sc-jrIDTr hLlmew aje-btn aje-btn--dropdown is-medium"
+        class="sc-krVzYl ecatrr aje-btn aje-btn--dropdown is-medium"
         id="react-aria-:ra:"
         tabindex="0"
         type="button"
       >
         <span
-          class="sc-ivKqQM gCaYRv"
+          class="sc-bYgEKt eEAwxI"
           id="react-aria-:rf:"
         />
         <i
           aria-hidden="true"
-          class="sc-qdQOe fAeGwC aje-icon material-icons is-medium"
+          class="sc-bqqMSY cFveTB aje-icon material-icons is-medium"
           style="margin-left: auto;"
         >
           arrow_drop_down
diff --git a/packages/atomic-elements/src/components/Dropdowns/ListBox/__snapshots__/ListBox.spec.tsx.snap b/packages/atomic-elements/src/components/Dropdowns/ListBox/__snapshots__/ListBox.spec.tsx.snap
index a293badcb..0f09de929 100644
--- a/packages/atomic-elements/src/components/Dropdowns/ListBox/__snapshots__/ListBox.spec.tsx.snap
+++ b/packages/atomic-elements/src/components/Dropdowns/ListBox/__snapshots__/ListBox.spec.tsx.snap
@@ -6,14 +6,14 @@ exports[`ListBox > matches snapshots > when closed 1`] = `
     data-react-aria-hidden="true"
   />
   <ul
-    class="sc-ieCSdj fVkCXx aje-listbox is-medium"
+    class="sc-bCgoVd gbpOgQ aje-listbox is-medium"
     data-collection="react-aria-:r0:"
     id="react-aria-:r1:"
     role="listbox"
     tabindex="0"
   >
     <li
-      class="sc-dlwHGs bdSoZQ aje-listbox__item"
+      class="sc-llQYOh bEnfPM aje-listbox__item"
       data-collection="react-aria-:r0:"
       data-key="1"
       id="react-aria-:r1:-option-1"
@@ -23,7 +23,7 @@ exports[`ListBox > matches snapshots > when closed 1`] = `
       Item 1
     </li>
     <li
-      class="sc-dlwHGs bdSoZQ aje-listbox__item"
+      class="sc-llQYOh bEnfPM aje-listbox__item"
       data-collection="react-aria-:r0:"
       data-key="2"
       id="react-aria-:r1:-option-2"
@@ -33,7 +33,7 @@ exports[`ListBox > matches snapshots > when closed 1`] = `
       Item 2
     </li>
     <li
-      class="sc-dlwHGs bdSoZQ aje-listbox__item"
+      class="sc-llQYOh bEnfPM aje-listbox__item"
       data-collection="react-aria-:r0:"
       data-key="3"
       id="react-aria-:r1:-option-3"
diff --git a/packages/atomic-elements/src/components/Dropdowns/MultiSelect/__snapshots__/MultiSelect.spec.tsx.snap b/packages/atomic-elements/src/components/Dropdowns/MultiSelect/__snapshots__/MultiSelect.spec.tsx.snap
index c93441afb..969f1212a 100644
--- a/packages/atomic-elements/src/components/Dropdowns/MultiSelect/__snapshots__/MultiSelect.spec.tsx.snap
+++ b/packages/atomic-elements/src/components/Dropdowns/MultiSelect/__snapshots__/MultiSelect.spec.tsx.snap
@@ -6,11 +6,10 @@ exports[`MultiSelect > matches default variant 1`] = `
     data-react-aria-hidden="true"
   />
   <div
-    class="sc-ivKqQM hinzSz aje-multiselect sc-cxxQMU biZliu aje-multiselect aje-multiselect--default"
+    class="sc-bYgEKt giTbGw aje-multiselect sc-ikBzZv eKosIW aje-multiselect aje-multiselect--default is-medium"
   >
     <label
       class="sc-dkXsAU bCsPXP"
-      for="react-aria-:r2:"
       id="react-aria-:r3:"
     >
       label
@@ -19,19 +18,19 @@ exports[`MultiSelect > matches default variant 1`] = `
       aria-expanded="false"
       aria-haspopup="listbox"
       aria-labelledby="react-aria-:r7: react-aria-:r3:"
-      class="sc-jrIDTr hLlmew aje-btn aje-btn--dropdown is-medium"
+      class="sc-krVzYl ecatrr aje-btn aje-btn--dropdown is-medium"
       id="react-aria-:r2:"
       tabindex="0"
       type="button"
     >
       <span
-        class="sc-llQYOh iZcyGh"
+        class="sc-jJwPsw jrTTIZ"
       >
         Select an option
       </span>
       <i
         aria-hidden="true"
-        class="sc-qdQOe fAeGwC aje-icon material-icons is-medium"
+        class="sc-bqqMSY cFveTB aje-icon material-icons is-medium"
         style="margin-left: auto;"
       >
         arrow_drop_down
@@ -47,23 +46,23 @@ exports[`MultiSelect > matches floating variant 1`] = `
     data-react-aria-hidden="true"
   />
   <div
-    class="sc-ivKqQM hinzSz aje-multiselect sc-cxxQMU biZliu aje-multiselect aje-multiselect--floating aje-multiselect--floating"
+    class="sc-bYgEKt giTbGw aje-multiselect sc-ikBzZv eKosIW aje-multiselect aje-multiselect--floating is-medium aje-multiselect--floating"
   >
     <div
-      class="sc-bCgoVd kvFozl"
+      class="sc-ezjgic inJFVa"
     >
       <button
         aria-expanded="false"
         aria-haspopup="listbox"
         aria-labelledby="react-aria-:rf: react-aria-:rb:"
-        class="sc-jrIDTr hLlmew aje-btn aje-btn--dropdown is-medium"
+        class="sc-krVzYl ecatrr aje-btn aje-btn--dropdown is-medium"
         id="react-aria-:ra:"
         tabindex="0"
         type="button"
       >
         <i
           aria-hidden="true"
-          class="sc-qdQOe fAeGwC aje-icon material-icons is-medium"
+          class="sc-bqqMSY cFveTB aje-icon material-icons is-medium"
           style="margin-left: auto;"
         >
           arrow_drop_down
@@ -71,7 +70,6 @@ exports[`MultiSelect > matches floating variant 1`] = `
       </button>
       <label
         class="sc-dkXsAU bCsPXP"
-        for="react-aria-:ra:"
         id="react-aria-:rb:"
       >
         label
diff --git a/packages/atomic-elements/src/components/Dropdowns/Select/__snapshots__/Select.spec.tsx.snap b/packages/atomic-elements/src/components/Dropdowns/Select/__snapshots__/Select.spec.tsx.snap
index 3443392e7..c0079cada 100644
--- a/packages/atomic-elements/src/components/Dropdowns/Select/__snapshots__/Select.spec.tsx.snap
+++ b/packages/atomic-elements/src/components/Dropdowns/Select/__snapshots__/Select.spec.tsx.snap
@@ -7,7 +7,6 @@ exports[`matches snapshot 1`] = `
   >
     <label
       class="sc-dkXsAU bCsPXP"
-      for="select-:r0:-select"
     >
       Label
     </label>
diff --git a/packages/atomic-elements/src/components/Fields/ChipGroupField/__snapshots__/ChipGroupField.spec.tsx.snap b/packages/atomic-elements/src/components/Fields/ChipGroupField/__snapshots__/ChipGroupField.spec.tsx.snap
index a5f3ea0f6..545e3f88a 100644
--- a/packages/atomic-elements/src/components/Fields/ChipGroupField/__snapshots__/ChipGroupField.spec.tsx.snap
+++ b/packages/atomic-elements/src/components/Fields/ChipGroupField/__snapshots__/ChipGroupField.spec.tsx.snap
@@ -6,14 +6,14 @@ exports[`ChipGroupField > matches snapshot 1`] = `
     data-react-aria-hidden="true"
   />
   <div
-    class="sc-bjLslk gYNvEP aje-chip-group"
+    class="sc-fKwzVe fdNiPE aje-chip-group"
   >
     <div
       aria-atomic="false"
       aria-labelledby="react-aria-:r1:"
       aria-live="off"
       aria-relevant="additions"
-      class="sc-ieCSdj lmMnXf"
+      class="sc-bCgoVd zQafC"
       data-collection="react-aria-:r5:"
       id="react-aria-:r0:"
       role="grid"
@@ -21,7 +21,7 @@ exports[`ChipGroupField > matches snapshot 1`] = `
     >
       <div
         aria-label="Item 1"
-        class="sc-hHopjF jeiOnT aje-chip"
+        class="sc-cxxQMU eMnPiM aje-chip"
         data-collection="react-aria-:r5:"
         data-key="react-aria-1"
         id="react-aria-:r0:-react-aria-1"
@@ -30,7 +30,7 @@ exports[`ChipGroupField > matches snapshot 1`] = `
       >
         <div
           aria-colindex="1"
-          class="sc-dILkzW knTmYa"
+          class="sc-ivKqQM hZfdyg"
           role="gridcell"
         >
           Item 1
@@ -38,7 +38,7 @@ exports[`ChipGroupField > matches snapshot 1`] = `
       </div>
       <div
         aria-label="Item 2"
-        class="sc-hHopjF jeiOnT aje-chip"
+        class="sc-cxxQMU eMnPiM aje-chip"
         data-collection="react-aria-:r5:"
         data-key="react-aria-2"
         id="react-aria-:r0:-react-aria-2"
@@ -47,7 +47,7 @@ exports[`ChipGroupField > matches snapshot 1`] = `
       >
         <div
           aria-colindex="1"
-          class="sc-dILkzW knTmYa"
+          class="sc-ivKqQM hZfdyg"
           role="gridcell"
         >
           Item 2
@@ -55,7 +55,7 @@ exports[`ChipGroupField > matches snapshot 1`] = `
       </div>
       <div
         aria-label="Item 3"
-        class="sc-hHopjF jeiOnT aje-chip"
+        class="sc-cxxQMU eMnPiM aje-chip"
         data-collection="react-aria-:r5:"
         data-key="react-aria-3"
         id="react-aria-:r0:-react-aria-3"
@@ -64,7 +64,7 @@ exports[`ChipGroupField > matches snapshot 1`] = `
       >
         <div
           aria-colindex="1"
-          class="sc-dILkzW knTmYa"
+          class="sc-ivKqQM hZfdyg"
           role="gridcell"
         >
           Item 3
diff --git a/packages/atomic-elements/src/components/Fields/DateField/__snapshots__/DateField.spec.tsx.snap b/packages/atomic-elements/src/components/Fields/DateField/__snapshots__/DateField.spec.tsx.snap
index 72a0ad47a..ca9c6bd0c 100644
--- a/packages/atomic-elements/src/components/Fields/DateField/__snapshots__/DateField.spec.tsx.snap
+++ b/packages/atomic-elements/src/components/Fields/DateField/__snapshots__/DateField.spec.tsx.snap
@@ -6,17 +6,17 @@ exports[`DateField > matches snapshots > basic composition 1`] = `
     class="sc-bdDsCe disTus aje-datefield"
   >
     <label
-      class="sc-hKVpXn btlNHk"
+      class="sc-fuztkK dZgNGq"
       id="react-aria-:r1:"
     >
       Date
     </label>
     <div
-      class="sc-fuztkK kbsgtd aje-combo-input"
+      class="sc-dYjPD ffUWuX aje-combo-input"
     >
       <div
         aria-labelledby="react-aria-:r1:"
-        class="sc-gKkgUA ehZry aje-input__date-segments"
+        class="sc-kEbgWM hOsfAb aje-input__date-segments"
         id="react-aria-:r0:"
         role="group"
         style="unicode-bidi: isolate;"
@@ -29,7 +29,7 @@ exports[`DateField > matches snapshots > basic composition 1`] = `
           aria-valuenow="3"
           aria-valuetext="Empty"
           autocorrect="off"
-          class="sc-iCECmn cMzUyD aje-input__segment placeholder"
+          class="sc-iqkkDd hsTKdU aje-input__segment placeholder"
           contenteditable="true"
           data-placeholder="true"
           enterkeyhint="next"
@@ -44,7 +44,7 @@ exports[`DateField > matches snapshots > basic composition 1`] = `
         </div>
         <div
           aria-hidden="true"
-          class="sc-iCECmn cMzUyD aje-input__segment"
+          class="sc-iqkkDd hsTKdU aje-input__segment"
         >
           /
         </div>
@@ -56,7 +56,7 @@ exports[`DateField > matches snapshots > basic composition 1`] = `
           aria-valuenow="15"
           aria-valuetext="Empty"
           autocorrect="off"
-          class="sc-iCECmn cMzUyD aje-input__segment placeholder"
+          class="sc-iqkkDd hsTKdU aje-input__segment placeholder"
           contenteditable="true"
           data-placeholder="true"
           enterkeyhint="next"
@@ -71,7 +71,7 @@ exports[`DateField > matches snapshots > basic composition 1`] = `
         </div>
         <div
           aria-hidden="true"
-          class="sc-iCECmn cMzUyD aje-input__segment"
+          class="sc-iqkkDd hsTKdU aje-input__segment"
         >
           /
         </div>
@@ -83,7 +83,7 @@ exports[`DateField > matches snapshots > basic composition 1`] = `
           aria-valuenow="2024"
           aria-valuetext="Empty"
           autocorrect="off"
-          class="sc-iCECmn cMzUyD aje-input__segment placeholder"
+          class="sc-iqkkDd hsTKdU aje-input__segment placeholder"
           contenteditable="true"
           data-placeholder="true"
           enterkeyhint="next"
@@ -109,18 +109,18 @@ exports[`DateField > matches snapshots > disabled state 1`] = `
     data-disabled="true"
   >
     <label
-      class="sc-hKVpXn btlNHk"
+      class="sc-fuztkK dZgNGq"
       id="react-aria-:r1e:"
     >
       Date
     </label>
     <div
-      class="sc-fuztkK kbsgtd aje-combo-input"
+      class="sc-dYjPD ffUWuX aje-combo-input"
     >
       <div
         aria-disabled="true"
         aria-labelledby="react-aria-:r1e:"
-        class="sc-gKkgUA ehZry aje-input__date-segments"
+        class="sc-kEbgWM hOsfAb aje-input__date-segments"
         id="react-aria-:r1d:"
         role="group"
         style="unicode-bidi: isolate;"
@@ -133,7 +133,7 @@ exports[`DateField > matches snapshots > disabled state 1`] = `
           aria-valuemin="1"
           aria-valuenow="3"
           aria-valuetext="Empty"
-          class="sc-iCECmn cMzUyD aje-input__segment placeholder"
+          class="sc-iqkkDd hsTKdU aje-input__segment placeholder"
           contenteditable="false"
           data-placeholder="true"
           id="react-aria-:r1i:"
@@ -144,7 +144,7 @@ exports[`DateField > matches snapshots > disabled state 1`] = `
         </div>
         <div
           aria-hidden="true"
-          class="sc-iCECmn cMzUyD aje-input__segment"
+          class="sc-iqkkDd hsTKdU aje-input__segment"
         >
           /
         </div>
@@ -156,7 +156,7 @@ exports[`DateField > matches snapshots > disabled state 1`] = `
           aria-valuemin="1"
           aria-valuenow="15"
           aria-valuetext="Empty"
-          class="sc-iCECmn cMzUyD aje-input__segment placeholder"
+          class="sc-iqkkDd hsTKdU aje-input__segment placeholder"
           contenteditable="false"
           data-placeholder="true"
           id="react-aria-:r1m:"
@@ -167,7 +167,7 @@ exports[`DateField > matches snapshots > disabled state 1`] = `
         </div>
         <div
           aria-hidden="true"
-          class="sc-iCECmn cMzUyD aje-input__segment"
+          class="sc-iqkkDd hsTKdU aje-input__segment"
         >
           /
         </div>
@@ -179,7 +179,7 @@ exports[`DateField > matches snapshots > disabled state 1`] = `
           aria-valuemin="1"
           aria-valuenow="2024"
           aria-valuetext="Empty"
-          class="sc-iCECmn cMzUyD aje-input__segment placeholder"
+          class="sc-iqkkDd hsTKdU aje-input__segment placeholder"
           contenteditable="false"
           data-placeholder="true"
           id="react-aria-:r1q:"
@@ -201,17 +201,17 @@ exports[`DateField > matches snapshots > required state 1`] = `
     data-required="true"
   >
     <label
-      class="sc-hKVpXn btlNHk"
+      class="sc-fuztkK dZgNGq"
       id="react-aria-:r1t:"
     >
       Date
     </label>
     <div
-      class="sc-fuztkK kbsgtd aje-combo-input"
+      class="sc-dYjPD ffUWuX aje-combo-input"
     >
       <div
         aria-labelledby="react-aria-:r1t:"
-        class="sc-gKkgUA ehZry aje-input__date-segments"
+        class="sc-kEbgWM hOsfAb aje-input__date-segments"
         id="react-aria-:r1s:"
         role="group"
         style="unicode-bidi: isolate;"
@@ -225,7 +225,7 @@ exports[`DateField > matches snapshots > required state 1`] = `
           aria-valuenow="3"
           aria-valuetext="Empty"
           autocorrect="off"
-          class="sc-iCECmn cMzUyD aje-input__segment placeholder"
+          class="sc-iqkkDd hsTKdU aje-input__segment placeholder"
           contenteditable="true"
           data-placeholder="true"
           enterkeyhint="next"
@@ -240,7 +240,7 @@ exports[`DateField > matches snapshots > required state 1`] = `
         </div>
         <div
           aria-hidden="true"
-          class="sc-iCECmn cMzUyD aje-input__segment"
+          class="sc-iqkkDd hsTKdU aje-input__segment"
         >
           /
         </div>
@@ -253,7 +253,7 @@ exports[`DateField > matches snapshots > required state 1`] = `
           aria-valuenow="15"
           aria-valuetext="Empty"
           autocorrect="off"
-          class="sc-iCECmn cMzUyD aje-input__segment placeholder"
+          class="sc-iqkkDd hsTKdU aje-input__segment placeholder"
           contenteditable="true"
           data-placeholder="true"
           enterkeyhint="next"
@@ -268,7 +268,7 @@ exports[`DateField > matches snapshots > required state 1`] = `
         </div>
         <div
           aria-hidden="true"
-          class="sc-iCECmn cMzUyD aje-input__segment"
+          class="sc-iqkkDd hsTKdU aje-input__segment"
         >
           /
         </div>
@@ -281,7 +281,7 @@ exports[`DateField > matches snapshots > required state 1`] = `
           aria-valuenow="2024"
           aria-valuetext="Empty"
           autocorrect="off"
-          class="sc-iCECmn cMzUyD aje-input__segment placeholder"
+          class="sc-iqkkDd hsTKdU aje-input__segment placeholder"
           contenteditable="true"
           data-placeholder="true"
           enterkeyhint="next"
@@ -306,17 +306,17 @@ exports[`DateField > matches snapshots > with granularity hour 1`] = `
     class="sc-bdDsCe disTus aje-datefield"
   >
     <label
-      class="sc-hKVpXn btlNHk"
+      class="sc-fuztkK dZgNGq"
       id="react-aria-:r2c:"
     >
       Date and Time
     </label>
     <div
-      class="sc-fuztkK kbsgtd aje-combo-input"
+      class="sc-dYjPD ffUWuX aje-combo-input"
     >
       <div
         aria-labelledby="react-aria-:r2c:"
-        class="sc-gKkgUA ehZry aje-input__date-segments"
+        class="sc-kEbgWM hOsfAb aje-input__date-segments"
         id="react-aria-:r2b:"
         role="group"
         style="unicode-bidi: isolate;"
@@ -329,7 +329,7 @@ exports[`DateField > matches snapshots > with granularity hour 1`] = `
           aria-valuenow="3"
           aria-valuetext="Empty"
           autocorrect="off"
-          class="sc-iCECmn cMzUyD aje-input__segment placeholder"
+          class="sc-iqkkDd hsTKdU aje-input__segment placeholder"
           contenteditable="true"
           data-placeholder="true"
           enterkeyhint="next"
@@ -344,7 +344,7 @@ exports[`DateField > matches snapshots > with granularity hour 1`] = `
         </div>
         <div
           aria-hidden="true"
-          class="sc-iCECmn cMzUyD aje-input__segment"
+          class="sc-iqkkDd hsTKdU aje-input__segment"
         >
           /
         </div>
@@ -356,7 +356,7 @@ exports[`DateField > matches snapshots > with granularity hour 1`] = `
           aria-valuenow="15"
           aria-valuetext="Empty"
           autocorrect="off"
-          class="sc-iCECmn cMzUyD aje-input__segment placeholder"
+          class="sc-iqkkDd hsTKdU aje-input__segment placeholder"
           contenteditable="true"
           data-placeholder="true"
           enterkeyhint="next"
@@ -371,7 +371,7 @@ exports[`DateField > matches snapshots > with granularity hour 1`] = `
         </div>
         <div
           aria-hidden="true"
-          class="sc-iCECmn cMzUyD aje-input__segment"
+          class="sc-iqkkDd hsTKdU aje-input__segment"
         >
           /
         </div>
@@ -383,7 +383,7 @@ exports[`DateField > matches snapshots > with granularity hour 1`] = `
           aria-valuenow="2024"
           aria-valuetext="Empty"
           autocorrect="off"
-          class="sc-iCECmn cMzUyD aje-input__segment placeholder"
+          class="sc-iqkkDd hsTKdU aje-input__segment placeholder"
           contenteditable="true"
           data-placeholder="true"
           enterkeyhint="next"
@@ -398,13 +398,13 @@ exports[`DateField > matches snapshots > with granularity hour 1`] = `
         </div>
         <div
           aria-hidden="true"
-          class="sc-iCECmn cMzUyD aje-input__segment"
+          class="sc-iqkkDd hsTKdU aje-input__segment"
         >
           , 
         </div>
         <div
           aria-hidden="true"
-          class="sc-iCECmn cMzUyD aje-input__segment"
+          class="sc-iqkkDd hsTKdU aje-input__segment"
         >
           ⁦
         </div>
@@ -416,7 +416,7 @@ exports[`DateField > matches snapshots > with granularity hour 1`] = `
           aria-valuenow="0"
           aria-valuetext="Empty"
           autocorrect="off"
-          class="sc-iCECmn cMzUyD aje-input__segment placeholder"
+          class="sc-iqkkDd hsTKdU aje-input__segment placeholder"
           contenteditable="true"
           data-placeholder="true"
           enterkeyhint="next"
@@ -431,13 +431,13 @@ exports[`DateField > matches snapshots > with granularity hour 1`] = `
         </div>
         <div
           aria-hidden="true"
-          class="sc-iCECmn cMzUyD aje-input__segment"
+          class="sc-iqkkDd hsTKdU aje-input__segment"
         >
           ⁩
         </div>
         <div
           aria-hidden="true"
-          class="sc-iCECmn cMzUyD aje-input__segment"
+          class="sc-iqkkDd hsTKdU aje-input__segment"
         >
            
         </div>
@@ -449,7 +449,7 @@ exports[`DateField > matches snapshots > with granularity hour 1`] = `
           aria-valuenow="0"
           aria-valuetext="Empty"
           autocorrect="off"
-          class="sc-iCECmn cMzUyD aje-input__segment placeholder"
+          class="sc-iqkkDd hsTKdU aje-input__segment placeholder"
           contenteditable="true"
           data-placeholder="true"
           enterkeyhint="next"
@@ -474,24 +474,24 @@ exports[`DateField > matches snapshots > with message and error 1`] = `
     data-invalid="true"
   >
     <label
-      class="sc-hKVpXn btlNHk"
+      class="sc-fuztkK dZgNGq"
       id="react-aria-:rv:"
     >
       Date
     </label>
     <p
-      class="sc-jSppWd hCVIqy is-auto"
+      class="sc-jrIDTr coCtLn is-auto"
       id="react-aria-:r11:"
     >
       Enter your birth date
     </p>
     <div
-      class="sc-fuztkK kbsgtd aje-combo-input"
+      class="sc-dYjPD ffUWuX aje-combo-input"
     >
       <div
         aria-describedby="react-aria-:r11: react-aria-:r12:"
         aria-labelledby="react-aria-:rv:"
-        class="sc-gKkgUA ehZry aje-input__date-segments"
+        class="sc-kEbgWM hOsfAb aje-input__date-segments"
         id="react-aria-:ru:"
         role="group"
         style="unicode-bidi: isolate;"
@@ -506,7 +506,7 @@ exports[`DateField > matches snapshots > with message and error 1`] = `
           aria-valuenow="3"
           aria-valuetext="Empty"
           autocorrect="off"
-          class="sc-iCECmn cMzUyD aje-input__segment placeholder"
+          class="sc-iqkkDd hsTKdU aje-input__segment placeholder"
           contenteditable="true"
           data-placeholder="true"
           enterkeyhint="next"
@@ -521,7 +521,7 @@ exports[`DateField > matches snapshots > with message and error 1`] = `
         </div>
         <div
           aria-hidden="true"
-          class="sc-iCECmn cMzUyD aje-input__segment"
+          class="sc-iqkkDd hsTKdU aje-input__segment"
         >
           /
         </div>
@@ -535,7 +535,7 @@ exports[`DateField > matches snapshots > with message and error 1`] = `
           aria-valuenow="15"
           aria-valuetext="Empty"
           autocorrect="off"
-          class="sc-iCECmn cMzUyD aje-input__segment placeholder"
+          class="sc-iqkkDd hsTKdU aje-input__segment placeholder"
           contenteditable="true"
           data-placeholder="true"
           enterkeyhint="next"
@@ -550,7 +550,7 @@ exports[`DateField > matches snapshots > with message and error 1`] = `
         </div>
         <div
           aria-hidden="true"
-          class="sc-iCECmn cMzUyD aje-input__segment"
+          class="sc-iqkkDd hsTKdU aje-input__segment"
         >
           /
         </div>
@@ -564,7 +564,7 @@ exports[`DateField > matches snapshots > with message and error 1`] = `
           aria-valuenow="2024"
           aria-valuetext="Empty"
           autocorrect="off"
-          class="sc-iCECmn cMzUyD aje-input__segment placeholder"
+          class="sc-iqkkDd hsTKdU aje-input__segment placeholder"
           contenteditable="true"
           data-placeholder="true"
           enterkeyhint="next"
@@ -580,7 +580,7 @@ exports[`DateField > matches snapshots > with message and error 1`] = `
       </div>
     </div>
     <p
-      class="sc-eCQgVK gmnXRP is-medium"
+      class="sc-qdQOe kvVxzY is-medium"
       id="react-aria-:r12:"
     >
       Please enter a valid date
@@ -595,18 +595,18 @@ exports[`DateField > matches snapshots > with value 1`] = `
     class="sc-bdDsCe disTus aje-datefield"
   >
     <label
-      class="sc-hKVpXn btlNHk"
+      class="sc-fuztkK dZgNGq"
       id="react-aria-:rg:"
     >
       Date
     </label>
     <div
-      class="sc-fuztkK kbsgtd aje-combo-input"
+      class="sc-dYjPD ffUWuX aje-combo-input"
     >
       <div
         aria-describedby="react-aria-description-0"
         aria-labelledby="react-aria-:rg:"
-        class="sc-gKkgUA ehZry aje-input__date-segments"
+        class="sc-kEbgWM hOsfAb aje-input__date-segments"
         id="react-aria-:rf:"
         role="group"
         style="unicode-bidi: isolate;"
@@ -620,7 +620,7 @@ exports[`DateField > matches snapshots > with value 1`] = `
           aria-valuenow="1"
           aria-valuetext="1 – January"
           autocorrect="off"
-          class="sc-iCECmn cMzUyD aje-input__segment"
+          class="sc-iqkkDd hsTKdU aje-input__segment"
           contenteditable="true"
           enterkeyhint="next"
           id="react-aria-:rk:"
@@ -634,7 +634,7 @@ exports[`DateField > matches snapshots > with value 1`] = `
         </div>
         <div
           aria-hidden="true"
-          class="sc-iCECmn cMzUyD aje-input__segment"
+          class="sc-iqkkDd hsTKdU aje-input__segment"
         >
           /
         </div>
@@ -646,7 +646,7 @@ exports[`DateField > matches snapshots > with value 1`] = `
           aria-valuenow="15"
           aria-valuetext="15"
           autocorrect="off"
-          class="sc-iCECmn cMzUyD aje-input__segment"
+          class="sc-iqkkDd hsTKdU aje-input__segment"
           contenteditable="true"
           enterkeyhint="next"
           id="react-aria-:ro:"
@@ -660,7 +660,7 @@ exports[`DateField > matches snapshots > with value 1`] = `
         </div>
         <div
           aria-hidden="true"
-          class="sc-iCECmn cMzUyD aje-input__segment"
+          class="sc-iqkkDd hsTKdU aje-input__segment"
         >
           /
         </div>
@@ -672,7 +672,7 @@ exports[`DateField > matches snapshots > with value 1`] = `
           aria-valuenow="2023"
           aria-valuetext="2023"
           autocorrect="off"
-          class="sc-iCECmn cMzUyD aje-input__segment"
+          class="sc-iqkkDd hsTKdU aje-input__segment"
           contenteditable="true"
           enterkeyhint="next"
           id="react-aria-:rs:"
diff --git a/packages/atomic-elements/src/components/Fields/MultiSelectField/__snapshots__/MultiSelectField.spec.tsx.snap b/packages/atomic-elements/src/components/Fields/MultiSelectField/__snapshots__/MultiSelectField.spec.tsx.snap
index d91e3ecd1..e6bbbd707 100644
--- a/packages/atomic-elements/src/components/Fields/MultiSelectField/__snapshots__/MultiSelectField.spec.tsx.snap
+++ b/packages/atomic-elements/src/components/Fields/MultiSelectField/__snapshots__/MultiSelectField.spec.tsx.snap
@@ -6,13 +6,13 @@ exports[`MultiSelectField > matches snapshots > when closed 1`] = `
     data-react-aria-hidden="true"
   />
   <div
-    class="sc-bCgoVd iZtvlV aje-multiselect"
+    class="sc-ezjgic klbIcq aje-multiselect"
   >
     <button
       aria-expanded="false"
       aria-haspopup="listbox"
       aria-labelledby="react-aria-:r7: react-aria-:r3:"
-      class="sc-jrIDTr hLlmew aje-btn aje-btn--dropdown is-medium"
+      class="sc-krVzYl ecatrr aje-btn aje-btn--dropdown is-medium"
       id="react-aria-:r2:"
       tabindex="0"
       type="button"
@@ -29,14 +29,14 @@ exports[`MultiSelectField > matches snapshots > when open 1`] = `
     data-react-aria-hidden="true"
   />
   <div
-    class="sc-bCgoVd iZtvlV aje-multiselect"
+    class="sc-ezjgic klbIcq aje-multiselect"
   >
     <button
       aria-controls="react-aria-:r9:"
       aria-expanded="true"
       aria-haspopup="listbox"
       aria-labelledby="react-aria-:rf: react-aria-:rb:"
-      class="sc-jrIDTr hLlmew aje-btn aje-btn--dropdown is-medium"
+      class="sc-krVzYl ecatrr aje-btn aje-btn--dropdown is-medium"
       data-pressed="true"
       id="react-aria-:ra:"
       tabindex="0"
diff --git a/packages/atomic-elements/src/components/Fields/SelectField/__snapshots__/SelectField.spec.tsx.snap b/packages/atomic-elements/src/components/Fields/SelectField/__snapshots__/SelectField.spec.tsx.snap
index 5585e1ca7..5fb2604cd 100644
--- a/packages/atomic-elements/src/components/Fields/SelectField/__snapshots__/SelectField.spec.tsx.snap
+++ b/packages/atomic-elements/src/components/Fields/SelectField/__snapshots__/SelectField.spec.tsx.snap
@@ -6,7 +6,7 @@ exports[`SelectField > matches snapshots > when closed 1`] = `
     data-react-aria-hidden="true"
   />
   <div
-    class="sc-bCgoVd iZtvlV aje-select"
+    class="sc-ezjgic klbIcq aje-select"
   >
     <div
       aria-hidden="true"
@@ -42,13 +42,13 @@ exports[`SelectField > matches snapshots > when closed 1`] = `
       aria-expanded="false"
       aria-haspopup="listbox"
       aria-labelledby="react-aria-:r7: react-aria-:r3:"
-      class="sc-jrIDTr hLlmew aje-btn aje-btn--dropdown is-medium"
+      class="sc-krVzYl ecatrr aje-btn aje-btn--dropdown is-medium"
       id="react-aria-:r2:"
       tabindex="0"
       type="button"
     >
       <span
-        class="sc-ivKqQM gCaYRv"
+        class="sc-bYgEKt eEAwxI"
         id="react-aria-:r7:"
       />
     </button>
@@ -62,7 +62,7 @@ exports[`SelectField > matches snapshots > when open 1`] = `
     data-react-aria-hidden="true"
   />
   <div
-    class="sc-bCgoVd iZtvlV aje-select"
+    class="sc-ezjgic klbIcq aje-select"
   >
     <div
       aria-hidden="true"
@@ -99,14 +99,14 @@ exports[`SelectField > matches snapshots > when open 1`] = `
       aria-expanded="true"
       aria-haspopup="listbox"
       aria-labelledby="react-aria-:rf: react-aria-:rb:"
-      class="sc-jrIDTr hLlmew aje-btn aje-btn--dropdown is-medium"
+      class="sc-krVzYl ecatrr aje-btn aje-btn--dropdown is-medium"
       data-pressed="true"
       id="react-aria-:ra:"
       tabindex="0"
       type="button"
     >
       <span
-        class="sc-ivKqQM gCaYRv"
+        class="sc-bYgEKt eEAwxI"
         id="react-aria-:rf:"
       />
     </button>
diff --git a/packages/atomic-elements/src/components/Inputs/Checkbox/__snapshots__/CheckBox.spec.tsx.snap b/packages/atomic-elements/src/components/Inputs/Checkbox/__snapshots__/CheckBox.spec.tsx.snap
index 12c1a0414..f76a3a17b 100644
--- a/packages/atomic-elements/src/components/Inputs/Checkbox/__snapshots__/CheckBox.spec.tsx.snap
+++ b/packages/atomic-elements/src/components/Inputs/Checkbox/__snapshots__/CheckBox.spec.tsx.snap
@@ -3,15 +3,15 @@
 exports[`CheckBox > Snapshots > should match snapshot 1`] = `
 <DocumentFragment>
   <div
-    class="sc-dlwHGs ekETHh aje-checkbox"
+    class="sc-iJSMbW iwMSDL aje-checkbox"
   >
     <input
-      class="sc-dILkzW kgnFqo"
+      class="sc-ivKqQM cvosQy"
       tabindex="0"
       type="checkbox"
     />
     <span
-      class="sc-hHopjF hdqHiw"
+      class="sc-llQYOh iiGobg"
     />
   </div>
 </DocumentFragment>
diff --git a/packages/atomic-elements/src/components/Inputs/DateAndTimes/DateInput/__snapshots__/DateInput.spec.tsx.snap b/packages/atomic-elements/src/components/Inputs/DateAndTimes/DateInput/__snapshots__/DateInput.spec.tsx.snap
index 2d9ae34ae..112b839e0 100644
--- a/packages/atomic-elements/src/components/Inputs/DateAndTimes/DateInput/__snapshots__/DateInput.spec.tsx.snap
+++ b/packages/atomic-elements/src/components/Inputs/DateAndTimes/DateInput/__snapshots__/DateInput.spec.tsx.snap
@@ -3,7 +3,7 @@
 exports[`DateInput > matches snapshots > 24 hour cycle 1`] = `
 <DocumentFragment>
   <div
-    class="sc-gKkgUA kDJWYP aje-datefield aje-input__date is-medium"
+    class="sc-iqkkDd kdRpNH aje-datefield aje-input__date is-medium"
     style="min-width: var(--size-x);"
   >
     <label
@@ -19,12 +19,12 @@ exports[`DateInput > matches snapshots > 24 hour cycle 1`] = `
       Select a date
     </p>
     <div
-      class="sc-eCQgVK lhFnxc aje-combo-input"
+      class="sc-qdQOe kPUMiD aje-combo-input"
     >
       <div
         aria-describedby="react-aria-:r77:"
         aria-labelledby="react-aria-:r75:"
-        class="sc-folSZX iJJEZG aje-input__date-segments"
+        class="sc-dlwHGs bXJHod aje-input__date-segments"
         id="react-aria-:r74:"
         role="group"
         style="unicode-bidi: isolate;"
@@ -38,7 +38,7 @@ exports[`DateInput > matches snapshots > 24 hour cycle 1`] = `
           aria-valuenow="3"
           aria-valuetext="Empty"
           autocorrect="off"
-          class="sc-fFCZOx dVqKiC aje-input__segment placeholder"
+          class="sc-kgohyr euVzjU aje-input__segment placeholder"
           contenteditable="true"
           data-placeholder="true"
           enterkeyhint="next"
@@ -53,7 +53,7 @@ exports[`DateInput > matches snapshots > 24 hour cycle 1`] = `
         </div>
         <div
           aria-hidden="true"
-          class="sc-fFCZOx dVqKiC aje-input__segment"
+          class="sc-kgohyr euVzjU aje-input__segment"
         >
           /
         </div>
@@ -65,7 +65,7 @@ exports[`DateInput > matches snapshots > 24 hour cycle 1`] = `
           aria-valuenow="15"
           aria-valuetext="Empty"
           autocorrect="off"
-          class="sc-fFCZOx dVqKiC aje-input__segment placeholder"
+          class="sc-kgohyr euVzjU aje-input__segment placeholder"
           contenteditable="true"
           data-placeholder="true"
           enterkeyhint="next"
@@ -80,7 +80,7 @@ exports[`DateInput > matches snapshots > 24 hour cycle 1`] = `
         </div>
         <div
           aria-hidden="true"
-          class="sc-fFCZOx dVqKiC aje-input__segment"
+          class="sc-kgohyr euVzjU aje-input__segment"
         >
           /
         </div>
@@ -92,7 +92,7 @@ exports[`DateInput > matches snapshots > 24 hour cycle 1`] = `
           aria-valuenow="2024"
           aria-valuetext="Empty"
           autocorrect="off"
-          class="sc-fFCZOx dVqKiC aje-input__segment placeholder"
+          class="sc-kgohyr euVzjU aje-input__segment placeholder"
           contenteditable="true"
           data-placeholder="true"
           enterkeyhint="next"
@@ -107,13 +107,13 @@ exports[`DateInput > matches snapshots > 24 hour cycle 1`] = `
         </div>
         <div
           aria-hidden="true"
-          class="sc-fFCZOx dVqKiC aje-input__segment"
+          class="sc-kgohyr euVzjU aje-input__segment"
         >
           , 
         </div>
         <div
           aria-hidden="true"
-          class="sc-fFCZOx dVqKiC aje-input__segment"
+          class="sc-kgohyr euVzjU aje-input__segment"
         >
           ⁦
         </div>
@@ -125,7 +125,7 @@ exports[`DateInput > matches snapshots > 24 hour cycle 1`] = `
           aria-valuenow="0"
           aria-valuetext="Empty"
           autocorrect="off"
-          class="sc-fFCZOx dVqKiC aje-input__segment placeholder"
+          class="sc-kgohyr euVzjU aje-input__segment placeholder"
           contenteditable="true"
           data-placeholder="true"
           enterkeyhint="next"
@@ -140,7 +140,7 @@ exports[`DateInput > matches snapshots > 24 hour cycle 1`] = `
         </div>
         <div
           aria-hidden="true"
-          class="sc-fFCZOx dVqKiC aje-input__segment"
+          class="sc-kgohyr euVzjU aje-input__segment"
         >
           ⁩
         </div>
@@ -153,7 +153,7 @@ exports[`DateInput > matches snapshots > 24 hour cycle 1`] = `
 exports[`DateInput > matches snapshots > day granularity 1`] = `
 <DocumentFragment>
   <div
-    class="sc-gKkgUA kDJWYP aje-datefield aje-input__date is-medium"
+    class="sc-iqkkDd kdRpNH aje-datefield aje-input__date is-medium"
     style="min-width: var(--size-x);"
   >
     <label
@@ -169,12 +169,12 @@ exports[`DateInput > matches snapshots > day granularity 1`] = `
       Select a date
     </p>
     <div
-      class="sc-eCQgVK lhFnxc aje-combo-input"
+      class="sc-qdQOe kPUMiD aje-combo-input"
     >
       <div
         aria-describedby="react-aria-:r1g:"
         aria-labelledby="react-aria-:r1e:"
-        class="sc-folSZX iJJEZG aje-input__date-segments"
+        class="sc-dlwHGs bXJHod aje-input__date-segments"
         id="react-aria-:r1d:"
         role="group"
         style="unicode-bidi: isolate;"
@@ -188,7 +188,7 @@ exports[`DateInput > matches snapshots > day granularity 1`] = `
           aria-valuenow="3"
           aria-valuetext="Empty"
           autocorrect="off"
-          class="sc-fFCZOx dVqKiC aje-input__segment placeholder"
+          class="sc-kgohyr euVzjU aje-input__segment placeholder"
           contenteditable="true"
           data-placeholder="true"
           enterkeyhint="next"
@@ -203,7 +203,7 @@ exports[`DateInput > matches snapshots > day granularity 1`] = `
         </div>
         <div
           aria-hidden="true"
-          class="sc-fFCZOx dVqKiC aje-input__segment"
+          class="sc-kgohyr euVzjU aje-input__segment"
         >
           /
         </div>
@@ -215,7 +215,7 @@ exports[`DateInput > matches snapshots > day granularity 1`] = `
           aria-valuenow="15"
           aria-valuetext="Empty"
           autocorrect="off"
-          class="sc-fFCZOx dVqKiC aje-input__segment placeholder"
+          class="sc-kgohyr euVzjU aje-input__segment placeholder"
           contenteditable="true"
           data-placeholder="true"
           enterkeyhint="next"
@@ -230,7 +230,7 @@ exports[`DateInput > matches snapshots > day granularity 1`] = `
         </div>
         <div
           aria-hidden="true"
-          class="sc-fFCZOx dVqKiC aje-input__segment"
+          class="sc-kgohyr euVzjU aje-input__segment"
         >
           /
         </div>
@@ -242,7 +242,7 @@ exports[`DateInput > matches snapshots > day granularity 1`] = `
           aria-valuenow="2024"
           aria-valuetext="Empty"
           autocorrect="off"
-          class="sc-fFCZOx dVqKiC aje-input__segment placeholder"
+          class="sc-kgohyr euVzjU aje-input__segment placeholder"
           contenteditable="true"
           data-placeholder="true"
           enterkeyhint="next"
@@ -264,7 +264,7 @@ exports[`DateInput > matches snapshots > day granularity 1`] = `
 exports[`DateInput > matches snapshots > default variant 1`] = `
 <DocumentFragment>
   <div
-    class="sc-gKkgUA kDJWYP aje-datefield aje-input__date is-medium"
+    class="sc-iqkkDd kdRpNH aje-datefield aje-input__date is-medium"
     style="min-width: var(--size-x);"
   >
     <label
@@ -280,12 +280,12 @@ exports[`DateInput > matches snapshots > default variant 1`] = `
       Select a date
     </p>
     <div
-      class="sc-eCQgVK lhFnxc aje-combo-input"
+      class="sc-qdQOe kPUMiD aje-combo-input"
     >
       <div
         aria-describedby="react-aria-:r3:"
         aria-labelledby="react-aria-:r1:"
-        class="sc-folSZX iJJEZG aje-input__date-segments"
+        class="sc-dlwHGs bXJHod aje-input__date-segments"
         id="react-aria-:r0:"
         role="group"
         style="unicode-bidi: isolate;"
@@ -299,7 +299,7 @@ exports[`DateInput > matches snapshots > default variant 1`] = `
           aria-valuenow="3"
           aria-valuetext="Empty"
           autocorrect="off"
-          class="sc-fFCZOx dVqKiC aje-input__segment placeholder"
+          class="sc-kgohyr euVzjU aje-input__segment placeholder"
           contenteditable="true"
           data-placeholder="true"
           enterkeyhint="next"
@@ -314,7 +314,7 @@ exports[`DateInput > matches snapshots > default variant 1`] = `
         </div>
         <div
           aria-hidden="true"
-          class="sc-fFCZOx dVqKiC aje-input__segment"
+          class="sc-kgohyr euVzjU aje-input__segment"
         >
           /
         </div>
@@ -326,7 +326,7 @@ exports[`DateInput > matches snapshots > default variant 1`] = `
           aria-valuenow="15"
           aria-valuetext="Empty"
           autocorrect="off"
-          class="sc-fFCZOx dVqKiC aje-input__segment placeholder"
+          class="sc-kgohyr euVzjU aje-input__segment placeholder"
           contenteditable="true"
           data-placeholder="true"
           enterkeyhint="next"
@@ -341,7 +341,7 @@ exports[`DateInput > matches snapshots > default variant 1`] = `
         </div>
         <div
           aria-hidden="true"
-          class="sc-fFCZOx dVqKiC aje-input__segment"
+          class="sc-kgohyr euVzjU aje-input__segment"
         >
           /
         </div>
@@ -353,7 +353,7 @@ exports[`DateInput > matches snapshots > default variant 1`] = `
           aria-valuenow="2024"
           aria-valuetext="Empty"
           autocorrect="off"
-          class="sc-fFCZOx dVqKiC aje-input__segment placeholder"
+          class="sc-kgohyr euVzjU aje-input__segment placeholder"
           contenteditable="true"
           data-placeholder="true"
           enterkeyhint="next"
@@ -375,7 +375,7 @@ exports[`DateInput > matches snapshots > default variant 1`] = `
 exports[`DateInput > matches snapshots > disabled state 1`] = `
 <DocumentFragment>
   <div
-    class="sc-gKkgUA kDJWYP aje-datefield aje-input__date is-medium"
+    class="sc-iqkkDd kdRpNH aje-datefield aje-input__date is-medium"
     data-disabled="true"
     style="min-width: var(--size-x);"
   >
@@ -392,13 +392,13 @@ exports[`DateInput > matches snapshots > disabled state 1`] = `
       Select a date
     </p>
     <div
-      class="sc-eCQgVK lhFnxc aje-combo-input"
+      class="sc-qdQOe kPUMiD aje-combo-input"
     >
       <div
         aria-describedby="react-aria-:r4s:"
         aria-disabled="true"
         aria-labelledby="react-aria-:r4q:"
-        class="sc-folSZX iJJEZG aje-input__date-segments"
+        class="sc-dlwHGs bXJHod aje-input__date-segments"
         data-disabled="true"
         id="react-aria-:r4p:"
         role="group"
@@ -413,7 +413,7 @@ exports[`DateInput > matches snapshots > disabled state 1`] = `
           aria-valuemin="1"
           aria-valuenow="3"
           aria-valuetext="Empty"
-          class="sc-fFCZOx dVqKiC aje-input__segment placeholder"
+          class="sc-kgohyr euVzjU aje-input__segment placeholder"
           contenteditable="false"
           data-placeholder="true"
           id="react-aria-:r4u:"
@@ -424,7 +424,7 @@ exports[`DateInput > matches snapshots > disabled state 1`] = `
         </div>
         <div
           aria-hidden="true"
-          class="sc-fFCZOx dVqKiC aje-input__segment"
+          class="sc-kgohyr euVzjU aje-input__segment"
         >
           /
         </div>
@@ -436,7 +436,7 @@ exports[`DateInput > matches snapshots > disabled state 1`] = `
           aria-valuemin="1"
           aria-valuenow="15"
           aria-valuetext="Empty"
-          class="sc-fFCZOx dVqKiC aje-input__segment placeholder"
+          class="sc-kgohyr euVzjU aje-input__segment placeholder"
           contenteditable="false"
           data-placeholder="true"
           id="react-aria-:r52:"
@@ -447,7 +447,7 @@ exports[`DateInput > matches snapshots > disabled state 1`] = `
         </div>
         <div
           aria-hidden="true"
-          class="sc-fFCZOx dVqKiC aje-input__segment"
+          class="sc-kgohyr euVzjU aje-input__segment"
         >
           /
         </div>
@@ -459,7 +459,7 @@ exports[`DateInput > matches snapshots > disabled state 1`] = `
           aria-valuemin="1"
           aria-valuenow="2024"
           aria-valuetext="Empty"
-          class="sc-fFCZOx dVqKiC aje-input__segment placeholder"
+          class="sc-kgohyr euVzjU aje-input__segment placeholder"
           contenteditable="false"
           data-placeholder="true"
           id="react-aria-:r56:"
@@ -477,7 +477,7 @@ exports[`DateInput > matches snapshots > disabled state 1`] = `
 exports[`DateInput > matches snapshots > hour granularity 1`] = `
 <DocumentFragment>
   <div
-    class="sc-gKkgUA kDJWYP aje-datefield aje-input__date is-medium"
+    class="sc-iqkkDd kdRpNH aje-datefield aje-input__date is-medium"
     style="min-width: var(--size-x);"
   >
     <label
@@ -493,12 +493,12 @@ exports[`DateInput > matches snapshots > hour granularity 1`] = `
       Select a date
     </p>
     <div
-      class="sc-eCQgVK lhFnxc aje-combo-input"
+      class="sc-qdQOe kPUMiD aje-combo-input"
     >
       <div
         aria-describedby="react-aria-:r1v:"
         aria-labelledby="react-aria-:r1t:"
-        class="sc-folSZX iJJEZG aje-input__date-segments"
+        class="sc-dlwHGs bXJHod aje-input__date-segments"
         id="react-aria-:r1s:"
         role="group"
         style="unicode-bidi: isolate;"
@@ -512,7 +512,7 @@ exports[`DateInput > matches snapshots > hour granularity 1`] = `
           aria-valuenow="3"
           aria-valuetext="Empty"
           autocorrect="off"
-          class="sc-fFCZOx dVqKiC aje-input__segment placeholder"
+          class="sc-kgohyr euVzjU aje-input__segment placeholder"
           contenteditable="true"
           data-placeholder="true"
           enterkeyhint="next"
@@ -527,7 +527,7 @@ exports[`DateInput > matches snapshots > hour granularity 1`] = `
         </div>
         <div
           aria-hidden="true"
-          class="sc-fFCZOx dVqKiC aje-input__segment"
+          class="sc-kgohyr euVzjU aje-input__segment"
         >
           /
         </div>
@@ -539,7 +539,7 @@ exports[`DateInput > matches snapshots > hour granularity 1`] = `
           aria-valuenow="15"
           aria-valuetext="Empty"
           autocorrect="off"
-          class="sc-fFCZOx dVqKiC aje-input__segment placeholder"
+          class="sc-kgohyr euVzjU aje-input__segment placeholder"
           contenteditable="true"
           data-placeholder="true"
           enterkeyhint="next"
@@ -554,7 +554,7 @@ exports[`DateInput > matches snapshots > hour granularity 1`] = `
         </div>
         <div
           aria-hidden="true"
-          class="sc-fFCZOx dVqKiC aje-input__segment"
+          class="sc-kgohyr euVzjU aje-input__segment"
         >
           /
         </div>
@@ -566,7 +566,7 @@ exports[`DateInput > matches snapshots > hour granularity 1`] = `
           aria-valuenow="2024"
           aria-valuetext="Empty"
           autocorrect="off"
-          class="sc-fFCZOx dVqKiC aje-input__segment placeholder"
+          class="sc-kgohyr euVzjU aje-input__segment placeholder"
           contenteditable="true"
           data-placeholder="true"
           enterkeyhint="next"
@@ -581,13 +581,13 @@ exports[`DateInput > matches snapshots > hour granularity 1`] = `
         </div>
         <div
           aria-hidden="true"
-          class="sc-fFCZOx dVqKiC aje-input__segment"
+          class="sc-kgohyr euVzjU aje-input__segment"
         >
           , 
         </div>
         <div
           aria-hidden="true"
-          class="sc-fFCZOx dVqKiC aje-input__segment"
+          class="sc-kgohyr euVzjU aje-input__segment"
         >
           ⁦
         </div>
@@ -599,7 +599,7 @@ exports[`DateInput > matches snapshots > hour granularity 1`] = `
           aria-valuenow="0"
           aria-valuetext="Empty"
           autocorrect="off"
-          class="sc-fFCZOx dVqKiC aje-input__segment placeholder"
+          class="sc-kgohyr euVzjU aje-input__segment placeholder"
           contenteditable="true"
           data-placeholder="true"
           enterkeyhint="next"
@@ -614,13 +614,13 @@ exports[`DateInput > matches snapshots > hour granularity 1`] = `
         </div>
         <div
           aria-hidden="true"
-          class="sc-fFCZOx dVqKiC aje-input__segment"
+          class="sc-kgohyr euVzjU aje-input__segment"
         >
           ⁩
         </div>
         <div
           aria-hidden="true"
-          class="sc-fFCZOx dVqKiC aje-input__segment"
+          class="sc-kgohyr euVzjU aje-input__segment"
         >
            
         </div>
@@ -632,7 +632,7 @@ exports[`DateInput > matches snapshots > hour granularity 1`] = `
           aria-valuenow="0"
           aria-valuetext="Empty"
           autocorrect="off"
-          class="sc-fFCZOx dVqKiC aje-input__segment placeholder"
+          class="sc-kgohyr euVzjU aje-input__segment placeholder"
           contenteditable="true"
           data-placeholder="true"
           enterkeyhint="next"
@@ -653,7 +653,7 @@ exports[`DateInput > matches snapshots > hour granularity 1`] = `
 exports[`DateInput > matches snapshots > invalid state 1`] = `
 <DocumentFragment>
   <div
-    class="sc-gKkgUA kDJWYP aje-datefield aje-input__date is-medium"
+    class="sc-iqkkDd kdRpNH aje-datefield aje-input__date is-medium"
     data-invalid="true"
     style="min-width: var(--size-x);"
   >
@@ -670,12 +670,12 @@ exports[`DateInput > matches snapshots > invalid state 1`] = `
       Select a date
     </p>
     <div
-      class="sc-eCQgVK lhFnxc aje-combo-input"
+      class="sc-qdQOe kPUMiD aje-combo-input"
     >
       <div
         aria-describedby="react-aria-:r69: react-aria-:r6a:"
         aria-labelledby="react-aria-:r67:"
-        class="sc-folSZX iJJEZG aje-input__date-segments"
+        class="sc-dlwHGs bXJHod aje-input__date-segments"
         data-invalid="true"
         id="react-aria-:r66:"
         role="group"
@@ -691,7 +691,7 @@ exports[`DateInput > matches snapshots > invalid state 1`] = `
           aria-valuenow="3"
           aria-valuetext="Empty"
           autocorrect="off"
-          class="sc-fFCZOx dVqKiC aje-input__segment placeholder"
+          class="sc-kgohyr euVzjU aje-input__segment placeholder"
           contenteditable="true"
           data-placeholder="true"
           enterkeyhint="next"
@@ -706,7 +706,7 @@ exports[`DateInput > matches snapshots > invalid state 1`] = `
         </div>
         <div
           aria-hidden="true"
-          class="sc-fFCZOx dVqKiC aje-input__segment"
+          class="sc-kgohyr euVzjU aje-input__segment"
         >
           /
         </div>
@@ -720,7 +720,7 @@ exports[`DateInput > matches snapshots > invalid state 1`] = `
           aria-valuenow="15"
           aria-valuetext="Empty"
           autocorrect="off"
-          class="sc-fFCZOx dVqKiC aje-input__segment placeholder"
+          class="sc-kgohyr euVzjU aje-input__segment placeholder"
           contenteditable="true"
           data-placeholder="true"
           enterkeyhint="next"
@@ -735,7 +735,7 @@ exports[`DateInput > matches snapshots > invalid state 1`] = `
         </div>
         <div
           aria-hidden="true"
-          class="sc-fFCZOx dVqKiC aje-input__segment"
+          class="sc-kgohyr euVzjU aje-input__segment"
         >
           /
         </div>
@@ -749,7 +749,7 @@ exports[`DateInput > matches snapshots > invalid state 1`] = `
           aria-valuenow="2024"
           aria-valuetext="Empty"
           autocorrect="off"
-          class="sc-fFCZOx dVqKiC aje-input__segment placeholder"
+          class="sc-kgohyr euVzjU aje-input__segment placeholder"
           contenteditable="true"
           data-placeholder="true"
           enterkeyhint="next"
@@ -777,7 +777,7 @@ exports[`DateInput > matches snapshots > invalid state 1`] = `
 exports[`DateInput > matches snapshots > large size 1`] = `
 <DocumentFragment>
   <div
-    class="sc-gKkgUA kDJWYP aje-datefield aje-input__date is-large"
+    class="sc-iqkkDd kdRpNH aje-datefield aje-input__date is-large"
     style="min-width: var(--size-x);"
   >
     <label
@@ -793,12 +793,12 @@ exports[`DateInput > matches snapshots > large size 1`] = `
       Select a date
     </p>
     <div
-      class="sc-eCQgVK lhFnxc aje-combo-input"
+      class="sc-qdQOe kPUMiD aje-combo-input"
     >
       <div
         aria-describedby="react-aria-:r8s:"
         aria-labelledby="react-aria-:r8q:"
-        class="sc-folSZX iJJEZG aje-input__date-segments"
+        class="sc-dlwHGs bXJHod aje-input__date-segments"
         id="react-aria-:r8p:"
         role="group"
         style="unicode-bidi: isolate;"
@@ -812,7 +812,7 @@ exports[`DateInput > matches snapshots > large size 1`] = `
           aria-valuenow="3"
           aria-valuetext="Empty"
           autocorrect="off"
-          class="sc-fFCZOx dVqKiC aje-input__segment placeholder"
+          class="sc-kgohyr euVzjU aje-input__segment placeholder"
           contenteditable="true"
           data-placeholder="true"
           enterkeyhint="next"
@@ -827,7 +827,7 @@ exports[`DateInput > matches snapshots > large size 1`] = `
         </div>
         <div
           aria-hidden="true"
-          class="sc-fFCZOx dVqKiC aje-input__segment"
+          class="sc-kgohyr euVzjU aje-input__segment"
         >
           /
         </div>
@@ -839,7 +839,7 @@ exports[`DateInput > matches snapshots > large size 1`] = `
           aria-valuenow="15"
           aria-valuetext="Empty"
           autocorrect="off"
-          class="sc-fFCZOx dVqKiC aje-input__segment placeholder"
+          class="sc-kgohyr euVzjU aje-input__segment placeholder"
           contenteditable="true"
           data-placeholder="true"
           enterkeyhint="next"
@@ -854,7 +854,7 @@ exports[`DateInput > matches snapshots > large size 1`] = `
         </div>
         <div
           aria-hidden="true"
-          class="sc-fFCZOx dVqKiC aje-input__segment"
+          class="sc-kgohyr euVzjU aje-input__segment"
         >
           /
         </div>
@@ -866,7 +866,7 @@ exports[`DateInput > matches snapshots > large size 1`] = `
           aria-valuenow="2024"
           aria-valuetext="Empty"
           autocorrect="off"
-          class="sc-fFCZOx dVqKiC aje-input__segment placeholder"
+          class="sc-kgohyr euVzjU aje-input__segment placeholder"
           contenteditable="true"
           data-placeholder="true"
           enterkeyhint="next"
@@ -888,7 +888,7 @@ exports[`DateInput > matches snapshots > large size 1`] = `
 exports[`DateInput > matches snapshots > medium size 1`] = `
 <DocumentFragment>
   <div
-    class="sc-gKkgUA kDJWYP aje-datefield aje-input__date is-medium"
+    class="sc-iqkkDd kdRpNH aje-datefield aje-input__date is-medium"
     style="min-width: var(--size-x);"
   >
     <label
@@ -904,12 +904,12 @@ exports[`DateInput > matches snapshots > medium size 1`] = `
       Select a date
     </p>
     <div
-      class="sc-eCQgVK lhFnxc aje-combo-input"
+      class="sc-qdQOe kPUMiD aje-combo-input"
     >
       <div
         aria-describedby="react-aria-:r8d:"
         aria-labelledby="react-aria-:r8b:"
-        class="sc-folSZX iJJEZG aje-input__date-segments"
+        class="sc-dlwHGs bXJHod aje-input__date-segments"
         id="react-aria-:r8a:"
         role="group"
         style="unicode-bidi: isolate;"
@@ -923,7 +923,7 @@ exports[`DateInput > matches snapshots > medium size 1`] = `
           aria-valuenow="3"
           aria-valuetext="Empty"
           autocorrect="off"
-          class="sc-fFCZOx dVqKiC aje-input__segment placeholder"
+          class="sc-kgohyr euVzjU aje-input__segment placeholder"
           contenteditable="true"
           data-placeholder="true"
           enterkeyhint="next"
@@ -938,7 +938,7 @@ exports[`DateInput > matches snapshots > medium size 1`] = `
         </div>
         <div
           aria-hidden="true"
-          class="sc-fFCZOx dVqKiC aje-input__segment"
+          class="sc-kgohyr euVzjU aje-input__segment"
         >
           /
         </div>
@@ -950,7 +950,7 @@ exports[`DateInput > matches snapshots > medium size 1`] = `
           aria-valuenow="15"
           aria-valuetext="Empty"
           autocorrect="off"
-          class="sc-fFCZOx dVqKiC aje-input__segment placeholder"
+          class="sc-kgohyr euVzjU aje-input__segment placeholder"
           contenteditable="true"
           data-placeholder="true"
           enterkeyhint="next"
@@ -965,7 +965,7 @@ exports[`DateInput > matches snapshots > medium size 1`] = `
         </div>
         <div
           aria-hidden="true"
-          class="sc-fFCZOx dVqKiC aje-input__segment"
+          class="sc-kgohyr euVzjU aje-input__segment"
         >
           /
         </div>
@@ -977,7 +977,7 @@ exports[`DateInput > matches snapshots > medium size 1`] = `
           aria-valuenow="2024"
           aria-valuetext="Empty"
           autocorrect="off"
-          class="sc-fFCZOx dVqKiC aje-input__segment placeholder"
+          class="sc-kgohyr euVzjU aje-input__segment placeholder"
           contenteditable="true"
           data-placeholder="true"
           enterkeyhint="next"
@@ -999,15 +999,15 @@ exports[`DateInput > matches snapshots > medium size 1`] = `
 exports[`DateInput > matches snapshots > minimal props 1`] = `
 <DocumentFragment>
   <div
-    class="sc-gKkgUA kDJWYP aje-datefield aje-input__date is-medium"
+    class="sc-iqkkDd kdRpNH aje-datefield aje-input__date is-medium"
     style="min-width: var(--size-x);"
   >
     <div
-      class="sc-eCQgVK lhFnxc aje-combo-input"
+      class="sc-qdQOe kPUMiD aje-combo-input"
     >
       <div
         aria-labelledby="react-aria-:rb5:"
-        class="sc-folSZX iJJEZG aje-input__date-segments"
+        class="sc-dlwHGs bXJHod aje-input__date-segments"
         id="react-aria-:rb4:"
         role="group"
         style="unicode-bidi: isolate;"
@@ -1020,7 +1020,7 @@ exports[`DateInput > matches snapshots > minimal props 1`] = `
           aria-valuenow="3"
           aria-valuetext="Empty"
           autocorrect="off"
-          class="sc-fFCZOx dVqKiC aje-input__segment placeholder"
+          class="sc-kgohyr euVzjU aje-input__segment placeholder"
           contenteditable="true"
           data-placeholder="true"
           enterkeyhint="next"
@@ -1035,7 +1035,7 @@ exports[`DateInput > matches snapshots > minimal props 1`] = `
         </div>
         <div
           aria-hidden="true"
-          class="sc-fFCZOx dVqKiC aje-input__segment"
+          class="sc-kgohyr euVzjU aje-input__segment"
         >
           /
         </div>
@@ -1047,7 +1047,7 @@ exports[`DateInput > matches snapshots > minimal props 1`] = `
           aria-valuenow="15"
           aria-valuetext="Empty"
           autocorrect="off"
-          class="sc-fFCZOx dVqKiC aje-input__segment placeholder"
+          class="sc-kgohyr euVzjU aje-input__segment placeholder"
           contenteditable="true"
           data-placeholder="true"
           enterkeyhint="next"
@@ -1062,7 +1062,7 @@ exports[`DateInput > matches snapshots > minimal props 1`] = `
         </div>
         <div
           aria-hidden="true"
-          class="sc-fFCZOx dVqKiC aje-input__segment"
+          class="sc-kgohyr euVzjU aje-input__segment"
         >
           /
         </div>
@@ -1074,7 +1074,7 @@ exports[`DateInput > matches snapshots > minimal props 1`] = `
           aria-valuenow="2024"
           aria-valuetext="Empty"
           autocorrect="off"
-          class="sc-fFCZOx dVqKiC aje-input__segment placeholder"
+          class="sc-kgohyr euVzjU aje-input__segment placeholder"
           contenteditable="true"
           data-placeholder="true"
           enterkeyhint="next"
@@ -1096,7 +1096,7 @@ exports[`DateInput > matches snapshots > minimal props 1`] = `
 exports[`DateInput > matches snapshots > minute granularity 1`] = `
 <DocumentFragment>
   <div
-    class="sc-gKkgUA kDJWYP aje-datefield aje-input__date is-medium"
+    class="sc-iqkkDd kdRpNH aje-datefield aje-input__date is-medium"
     style="min-width: var(--size-x);"
   >
     <label
@@ -1112,12 +1112,12 @@ exports[`DateInput > matches snapshots > minute granularity 1`] = `
       Select a date
     </p>
     <div
-      class="sc-eCQgVK lhFnxc aje-combo-input"
+      class="sc-qdQOe kPUMiD aje-combo-input"
     >
       <div
         aria-describedby="react-aria-:r2q:"
         aria-labelledby="react-aria-:r2o:"
-        class="sc-folSZX iJJEZG aje-input__date-segments"
+        class="sc-dlwHGs bXJHod aje-input__date-segments"
         id="react-aria-:r2n:"
         role="group"
         style="unicode-bidi: isolate;"
@@ -1131,7 +1131,7 @@ exports[`DateInput > matches snapshots > minute granularity 1`] = `
           aria-valuenow="3"
           aria-valuetext="Empty"
           autocorrect="off"
-          class="sc-fFCZOx dVqKiC aje-input__segment placeholder"
+          class="sc-kgohyr euVzjU aje-input__segment placeholder"
           contenteditable="true"
           data-placeholder="true"
           enterkeyhint="next"
@@ -1146,7 +1146,7 @@ exports[`DateInput > matches snapshots > minute granularity 1`] = `
         </div>
         <div
           aria-hidden="true"
-          class="sc-fFCZOx dVqKiC aje-input__segment"
+          class="sc-kgohyr euVzjU aje-input__segment"
         >
           /
         </div>
@@ -1158,7 +1158,7 @@ exports[`DateInput > matches snapshots > minute granularity 1`] = `
           aria-valuenow="15"
           aria-valuetext="Empty"
           autocorrect="off"
-          class="sc-fFCZOx dVqKiC aje-input__segment placeholder"
+          class="sc-kgohyr euVzjU aje-input__segment placeholder"
           contenteditable="true"
           data-placeholder="true"
           enterkeyhint="next"
@@ -1173,7 +1173,7 @@ exports[`DateInput > matches snapshots > minute granularity 1`] = `
         </div>
         <div
           aria-hidden="true"
-          class="sc-fFCZOx dVqKiC aje-input__segment"
+          class="sc-kgohyr euVzjU aje-input__segment"
         >
           /
         </div>
@@ -1185,7 +1185,7 @@ exports[`DateInput > matches snapshots > minute granularity 1`] = `
           aria-valuenow="2024"
           aria-valuetext="Empty"
           autocorrect="off"
-          class="sc-fFCZOx dVqKiC aje-input__segment placeholder"
+          class="sc-kgohyr euVzjU aje-input__segment placeholder"
           contenteditable="true"
           data-placeholder="true"
           enterkeyhint="next"
@@ -1200,13 +1200,13 @@ exports[`DateInput > matches snapshots > minute granularity 1`] = `
         </div>
         <div
           aria-hidden="true"
-          class="sc-fFCZOx dVqKiC aje-input__segment"
+          class="sc-kgohyr euVzjU aje-input__segment"
         >
           , 
         </div>
         <div
           aria-hidden="true"
-          class="sc-fFCZOx dVqKiC aje-input__segment"
+          class="sc-kgohyr euVzjU aje-input__segment"
         >
           ⁦
         </div>
@@ -1218,7 +1218,7 @@ exports[`DateInput > matches snapshots > minute granularity 1`] = `
           aria-valuenow="0"
           aria-valuetext="Empty"
           autocorrect="off"
-          class="sc-fFCZOx dVqKiC aje-input__segment placeholder"
+          class="sc-kgohyr euVzjU aje-input__segment placeholder"
           contenteditable="true"
           data-placeholder="true"
           enterkeyhint="next"
@@ -1233,7 +1233,7 @@ exports[`DateInput > matches snapshots > minute granularity 1`] = `
         </div>
         <div
           aria-hidden="true"
-          class="sc-fFCZOx dVqKiC aje-input__segment"
+          class="sc-kgohyr euVzjU aje-input__segment"
         >
           :
         </div>
@@ -1245,7 +1245,7 @@ exports[`DateInput > matches snapshots > minute granularity 1`] = `
           aria-valuenow="0"
           aria-valuetext="Empty"
           autocorrect="off"
-          class="sc-fFCZOx dVqKiC aje-input__segment placeholder"
+          class="sc-kgohyr euVzjU aje-input__segment placeholder"
           contenteditable="true"
           data-placeholder="true"
           enterkeyhint="next"
@@ -1260,13 +1260,13 @@ exports[`DateInput > matches snapshots > minute granularity 1`] = `
         </div>
         <div
           aria-hidden="true"
-          class="sc-fFCZOx dVqKiC aje-input__segment"
+          class="sc-kgohyr euVzjU aje-input__segment"
         >
           ⁩
         </div>
         <div
           aria-hidden="true"
-          class="sc-fFCZOx dVqKiC aje-input__segment"
+          class="sc-kgohyr euVzjU aje-input__segment"
         >
            
         </div>
@@ -1278,7 +1278,7 @@ exports[`DateInput > matches snapshots > minute granularity 1`] = `
           aria-valuenow="0"
           aria-valuetext="Empty"
           autocorrect="off"
-          class="sc-fFCZOx dVqKiC aje-input__segment placeholder"
+          class="sc-kgohyr euVzjU aje-input__segment placeholder"
           contenteditable="true"
           data-placeholder="true"
           enterkeyhint="next"
@@ -1299,7 +1299,7 @@ exports[`DateInput > matches snapshots > minute granularity 1`] = `
 exports[`DateInput > matches snapshots > readonly state 1`] = `
 <DocumentFragment>
   <div
-    class="sc-gKkgUA kDJWYP aje-datefield aje-input__date is-medium"
+    class="sc-iqkkDd kdRpNH aje-datefield aje-input__date is-medium"
     data-readonly="true"
     style="min-width: var(--size-x);"
   >
@@ -1316,12 +1316,12 @@ exports[`DateInput > matches snapshots > readonly state 1`] = `
       Select a date
     </p>
     <div
-      class="sc-eCQgVK lhFnxc aje-combo-input"
+      class="sc-qdQOe kPUMiD aje-combo-input"
     >
       <div
         aria-describedby="react-aria-:r5q:"
         aria-labelledby="react-aria-:r5o:"
-        class="sc-folSZX iJJEZG aje-input__date-segments"
+        class="sc-dlwHGs bXJHod aje-input__date-segments"
         data-readonly="true"
         id="react-aria-:r5n:"
         role="group"
@@ -1336,7 +1336,7 @@ exports[`DateInput > matches snapshots > readonly state 1`] = `
           aria-valuemin="1"
           aria-valuenow="3"
           aria-valuetext="Empty"
-          class="sc-fFCZOx dVqKiC aje-input__segment placeholder"
+          class="sc-kgohyr euVzjU aje-input__segment placeholder"
           contenteditable="false"
           data-placeholder="true"
           id="react-aria-:r5s:"
@@ -1348,7 +1348,7 @@ exports[`DateInput > matches snapshots > readonly state 1`] = `
         </div>
         <div
           aria-hidden="true"
-          class="sc-fFCZOx dVqKiC aje-input__segment"
+          class="sc-kgohyr euVzjU aje-input__segment"
         >
           /
         </div>
@@ -1360,7 +1360,7 @@ exports[`DateInput > matches snapshots > readonly state 1`] = `
           aria-valuemin="1"
           aria-valuenow="15"
           aria-valuetext="Empty"
-          class="sc-fFCZOx dVqKiC aje-input__segment placeholder"
+          class="sc-kgohyr euVzjU aje-input__segment placeholder"
           contenteditable="false"
           data-placeholder="true"
           id="react-aria-:r60:"
@@ -1372,7 +1372,7 @@ exports[`DateInput > matches snapshots > readonly state 1`] = `
         </div>
         <div
           aria-hidden="true"
-          class="sc-fFCZOx dVqKiC aje-input__segment"
+          class="sc-kgohyr euVzjU aje-input__segment"
         >
           /
         </div>
@@ -1384,7 +1384,7 @@ exports[`DateInput > matches snapshots > readonly state 1`] = `
           aria-valuemin="1"
           aria-valuenow="2024"
           aria-valuetext="Empty"
-          class="sc-fFCZOx dVqKiC aje-input__segment placeholder"
+          class="sc-kgohyr euVzjU aje-input__segment placeholder"
           contenteditable="false"
           data-placeholder="true"
           id="react-aria-:r64:"
@@ -1403,7 +1403,7 @@ exports[`DateInput > matches snapshots > readonly state 1`] = `
 exports[`DateInput > matches snapshots > required state 1`] = `
 <DocumentFragment>
   <div
-    class="sc-gKkgUA kDJWYP aje-datefield aje-input__date is-medium"
+    class="sc-iqkkDd kdRpNH aje-datefield aje-input__date is-medium"
     data-required="true"
     style="min-width: var(--size-x);"
   >
@@ -1420,12 +1420,12 @@ exports[`DateInput > matches snapshots > required state 1`] = `
       Select a date
     </p>
     <div
-      class="sc-eCQgVK lhFnxc aje-combo-input"
+      class="sc-qdQOe kPUMiD aje-combo-input"
     >
       <div
         aria-describedby="react-aria-:r5b:"
         aria-labelledby="react-aria-:r59:"
-        class="sc-folSZX iJJEZG aje-input__date-segments"
+        class="sc-dlwHGs bXJHod aje-input__date-segments"
         data-required="true"
         id="react-aria-:r58:"
         role="group"
@@ -1441,7 +1441,7 @@ exports[`DateInput > matches snapshots > required state 1`] = `
           aria-valuenow="3"
           aria-valuetext="Empty"
           autocorrect="off"
-          class="sc-fFCZOx dVqKiC aje-input__segment placeholder"
+          class="sc-kgohyr euVzjU aje-input__segment placeholder"
           contenteditable="true"
           data-placeholder="true"
           enterkeyhint="next"
@@ -1456,7 +1456,7 @@ exports[`DateInput > matches snapshots > required state 1`] = `
         </div>
         <div
           aria-hidden="true"
-          class="sc-fFCZOx dVqKiC aje-input__segment"
+          class="sc-kgohyr euVzjU aje-input__segment"
         >
           /
         </div>
@@ -1469,7 +1469,7 @@ exports[`DateInput > matches snapshots > required state 1`] = `
           aria-valuenow="15"
           aria-valuetext="Empty"
           autocorrect="off"
-          class="sc-fFCZOx dVqKiC aje-input__segment placeholder"
+          class="sc-kgohyr euVzjU aje-input__segment placeholder"
           contenteditable="true"
           data-placeholder="true"
           enterkeyhint="next"
@@ -1484,7 +1484,7 @@ exports[`DateInput > matches snapshots > required state 1`] = `
         </div>
         <div
           aria-hidden="true"
-          class="sc-fFCZOx dVqKiC aje-input__segment"
+          class="sc-kgohyr euVzjU aje-input__segment"
         >
           /
         </div>
@@ -1497,7 +1497,7 @@ exports[`DateInput > matches snapshots > required state 1`] = `
           aria-valuenow="2024"
           aria-valuetext="Empty"
           autocorrect="off"
-          class="sc-fFCZOx dVqKiC aje-input__segment placeholder"
+          class="sc-kgohyr euVzjU aje-input__segment placeholder"
           contenteditable="true"
           data-placeholder="true"
           enterkeyhint="next"
@@ -1519,7 +1519,7 @@ exports[`DateInput > matches snapshots > required state 1`] = `
 exports[`DateInput > matches snapshots > second granularity 1`] = `
 <DocumentFragment>
   <div
-    class="sc-gKkgUA kDJWYP aje-datefield aje-input__date is-medium"
+    class="sc-iqkkDd kdRpNH aje-datefield aje-input__date is-medium"
     style="min-width: var(--size-x);"
   >
     <label
@@ -1535,12 +1535,12 @@ exports[`DateInput > matches snapshots > second granularity 1`] = `
       Select a date
     </p>
     <div
-      class="sc-eCQgVK lhFnxc aje-combo-input"
+      class="sc-qdQOe kPUMiD aje-combo-input"
     >
       <div
         aria-describedby="react-aria-:r3p:"
         aria-labelledby="react-aria-:r3n:"
-        class="sc-folSZX iJJEZG aje-input__date-segments"
+        class="sc-dlwHGs bXJHod aje-input__date-segments"
         id="react-aria-:r3m:"
         role="group"
         style="unicode-bidi: isolate;"
@@ -1554,7 +1554,7 @@ exports[`DateInput > matches snapshots > second granularity 1`] = `
           aria-valuenow="3"
           aria-valuetext="Empty"
           autocorrect="off"
-          class="sc-fFCZOx dVqKiC aje-input__segment placeholder"
+          class="sc-kgohyr euVzjU aje-input__segment placeholder"
           contenteditable="true"
           data-placeholder="true"
           enterkeyhint="next"
@@ -1569,7 +1569,7 @@ exports[`DateInput > matches snapshots > second granularity 1`] = `
         </div>
         <div
           aria-hidden="true"
-          class="sc-fFCZOx dVqKiC aje-input__segment"
+          class="sc-kgohyr euVzjU aje-input__segment"
         >
           /
         </div>
@@ -1581,7 +1581,7 @@ exports[`DateInput > matches snapshots > second granularity 1`] = `
           aria-valuenow="15"
           aria-valuetext="Empty"
           autocorrect="off"
-          class="sc-fFCZOx dVqKiC aje-input__segment placeholder"
+          class="sc-kgohyr euVzjU aje-input__segment placeholder"
           contenteditable="true"
           data-placeholder="true"
           enterkeyhint="next"
@@ -1596,7 +1596,7 @@ exports[`DateInput > matches snapshots > second granularity 1`] = `
         </div>
         <div
           aria-hidden="true"
-          class="sc-fFCZOx dVqKiC aje-input__segment"
+          class="sc-kgohyr euVzjU aje-input__segment"
         >
           /
         </div>
@@ -1608,7 +1608,7 @@ exports[`DateInput > matches snapshots > second granularity 1`] = `
           aria-valuenow="2024"
           aria-valuetext="Empty"
           autocorrect="off"
-          class="sc-fFCZOx dVqKiC aje-input__segment placeholder"
+          class="sc-kgohyr euVzjU aje-input__segment placeholder"
           contenteditable="true"
           data-placeholder="true"
           enterkeyhint="next"
@@ -1623,13 +1623,13 @@ exports[`DateInput > matches snapshots > second granularity 1`] = `
         </div>
         <div
           aria-hidden="true"
-          class="sc-fFCZOx dVqKiC aje-input__segment"
+          class="sc-kgohyr euVzjU aje-input__segment"
         >
           , 
         </div>
         <div
           aria-hidden="true"
-          class="sc-fFCZOx dVqKiC aje-input__segment"
+          class="sc-kgohyr euVzjU aje-input__segment"
         >
           ⁦
         </div>
@@ -1641,7 +1641,7 @@ exports[`DateInput > matches snapshots > second granularity 1`] = `
           aria-valuenow="0"
           aria-valuetext="Empty"
           autocorrect="off"
-          class="sc-fFCZOx dVqKiC aje-input__segment placeholder"
+          class="sc-kgohyr euVzjU aje-input__segment placeholder"
           contenteditable="true"
           data-placeholder="true"
           enterkeyhint="next"
@@ -1656,7 +1656,7 @@ exports[`DateInput > matches snapshots > second granularity 1`] = `
         </div>
         <div
           aria-hidden="true"
-          class="sc-fFCZOx dVqKiC aje-input__segment"
+          class="sc-kgohyr euVzjU aje-input__segment"
         >
           :
         </div>
@@ -1668,7 +1668,7 @@ exports[`DateInput > matches snapshots > second granularity 1`] = `
           aria-valuenow="0"
           aria-valuetext="Empty"
           autocorrect="off"
-          class="sc-fFCZOx dVqKiC aje-input__segment placeholder"
+          class="sc-kgohyr euVzjU aje-input__segment placeholder"
           contenteditable="true"
           data-placeholder="true"
           enterkeyhint="next"
@@ -1683,7 +1683,7 @@ exports[`DateInput > matches snapshots > second granularity 1`] = `
         </div>
         <div
           aria-hidden="true"
-          class="sc-fFCZOx dVqKiC aje-input__segment"
+          class="sc-kgohyr euVzjU aje-input__segment"
         >
           :
         </div>
@@ -1695,7 +1695,7 @@ exports[`DateInput > matches snapshots > second granularity 1`] = `
           aria-valuenow="0"
           aria-valuetext="Empty"
           autocorrect="off"
-          class="sc-fFCZOx dVqKiC aje-input__segment placeholder"
+          class="sc-kgohyr euVzjU aje-input__segment placeholder"
           contenteditable="true"
           data-placeholder="true"
           enterkeyhint="next"
@@ -1710,13 +1710,13 @@ exports[`DateInput > matches snapshots > second granularity 1`] = `
         </div>
         <div
           aria-hidden="true"
-          class="sc-fFCZOx dVqKiC aje-input__segment"
+          class="sc-kgohyr euVzjU aje-input__segment"
         >
           ⁩
         </div>
         <div
           aria-hidden="true"
-          class="sc-fFCZOx dVqKiC aje-input__segment"
+          class="sc-kgohyr euVzjU aje-input__segment"
         >
            
         </div>
@@ -1728,7 +1728,7 @@ exports[`DateInput > matches snapshots > second granularity 1`] = `
           aria-valuenow="0"
           aria-valuetext="Empty"
           autocorrect="off"
-          class="sc-fFCZOx dVqKiC aje-input__segment placeholder"
+          class="sc-kgohyr euVzjU aje-input__segment placeholder"
           contenteditable="true"
           data-placeholder="true"
           enterkeyhint="next"
@@ -1749,7 +1749,7 @@ exports[`DateInput > matches snapshots > second granularity 1`] = `
 exports[`DateInput > matches snapshots > small size 1`] = `
 <DocumentFragment>
   <div
-    class="sc-gKkgUA kDJWYP aje-datefield aje-input__date is-small"
+    class="sc-iqkkDd kdRpNH aje-datefield aje-input__date is-small"
     style="min-width: var(--size-x);"
   >
     <label
@@ -1765,12 +1765,12 @@ exports[`DateInput > matches snapshots > small size 1`] = `
       Select a date
     </p>
     <div
-      class="sc-eCQgVK lhFnxc aje-combo-input"
+      class="sc-qdQOe kPUMiD aje-combo-input"
     >
       <div
         aria-describedby="react-aria-:r7u:"
         aria-labelledby="react-aria-:r7s:"
-        class="sc-folSZX iJJEZG aje-input__date-segments"
+        class="sc-dlwHGs bXJHod aje-input__date-segments"
         id="react-aria-:r7r:"
         role="group"
         style="unicode-bidi: isolate;"
@@ -1784,7 +1784,7 @@ exports[`DateInput > matches snapshots > small size 1`] = `
           aria-valuenow="3"
           aria-valuetext="Empty"
           autocorrect="off"
-          class="sc-fFCZOx dVqKiC aje-input__segment placeholder"
+          class="sc-kgohyr euVzjU aje-input__segment placeholder"
           contenteditable="true"
           data-placeholder="true"
           enterkeyhint="next"
@@ -1799,7 +1799,7 @@ exports[`DateInput > matches snapshots > small size 1`] = `
         </div>
         <div
           aria-hidden="true"
-          class="sc-fFCZOx dVqKiC aje-input__segment"
+          class="sc-kgohyr euVzjU aje-input__segment"
         >
           /
         </div>
@@ -1811,7 +1811,7 @@ exports[`DateInput > matches snapshots > small size 1`] = `
           aria-valuenow="15"
           aria-valuetext="Empty"
           autocorrect="off"
-          class="sc-fFCZOx dVqKiC aje-input__segment placeholder"
+          class="sc-kgohyr euVzjU aje-input__segment placeholder"
           contenteditable="true"
           data-placeholder="true"
           enterkeyhint="next"
@@ -1826,7 +1826,7 @@ exports[`DateInput > matches snapshots > small size 1`] = `
         </div>
         <div
           aria-hidden="true"
-          class="sc-fFCZOx dVqKiC aje-input__segment"
+          class="sc-kgohyr euVzjU aje-input__segment"
         >
           /
         </div>
@@ -1838,7 +1838,7 @@ exports[`DateInput > matches snapshots > small size 1`] = `
           aria-valuenow="2024"
           aria-valuetext="Empty"
           autocorrect="off"
-          class="sc-fFCZOx dVqKiC aje-input__segment placeholder"
+          class="sc-kgohyr euVzjU aje-input__segment placeholder"
           contenteditable="true"
           data-placeholder="true"
           enterkeyhint="next"
@@ -1860,7 +1860,7 @@ exports[`DateInput > matches snapshots > small size 1`] = `
 exports[`DateInput > matches snapshots > with default value 1`] = `
 <DocumentFragment>
   <div
-    class="sc-gKkgUA kDJWYP aje-datefield aje-input__date is-medium"
+    class="sc-iqkkDd kdRpNH aje-datefield aje-input__date is-medium"
     style="min-width: var(--size-x);"
   >
     <label
@@ -1876,12 +1876,12 @@ exports[`DateInput > matches snapshots > with default value 1`] = `
       Select a date
     </p>
     <div
-      class="sc-eCQgVK lhFnxc aje-combo-input"
+      class="sc-qdQOe kPUMiD aje-combo-input"
     >
       <div
         aria-describedby="react-aria-description-1 react-aria-:r11:"
         aria-labelledby="react-aria-:rv:"
-        class="sc-folSZX iJJEZG aje-input__date-segments"
+        class="sc-dlwHGs bXJHod aje-input__date-segments"
         id="react-aria-:ru:"
         role="group"
         style="unicode-bidi: isolate;"
@@ -1895,7 +1895,7 @@ exports[`DateInput > matches snapshots > with default value 1`] = `
           aria-valuenow="12"
           aria-valuetext="12 – December"
           autocorrect="off"
-          class="sc-fFCZOx dVqKiC aje-input__segment"
+          class="sc-kgohyr euVzjU aje-input__segment"
           contenteditable="true"
           enterkeyhint="next"
           id="react-aria-:r13:"
@@ -1909,7 +1909,7 @@ exports[`DateInput > matches snapshots > with default value 1`] = `
         </div>
         <div
           aria-hidden="true"
-          class="sc-fFCZOx dVqKiC aje-input__segment"
+          class="sc-kgohyr euVzjU aje-input__segment"
         >
           /
         </div>
@@ -1921,7 +1921,7 @@ exports[`DateInput > matches snapshots > with default value 1`] = `
           aria-valuenow="25"
           aria-valuetext="25"
           autocorrect="off"
-          class="sc-fFCZOx dVqKiC aje-input__segment"
+          class="sc-kgohyr euVzjU aje-input__segment"
           contenteditable="true"
           enterkeyhint="next"
           id="react-aria-:r17:"
@@ -1935,7 +1935,7 @@ exports[`DateInput > matches snapshots > with default value 1`] = `
         </div>
         <div
           aria-hidden="true"
-          class="sc-fFCZOx dVqKiC aje-input__segment"
+          class="sc-kgohyr euVzjU aje-input__segment"
         >
           /
         </div>
@@ -1947,7 +1947,7 @@ exports[`DateInput > matches snapshots > with default value 1`] = `
           aria-valuenow="2023"
           aria-valuetext="2023"
           autocorrect="off"
-          class="sc-fFCZOx dVqKiC aje-input__segment"
+          class="sc-kgohyr euVzjU aje-input__segment"
           contenteditable="true"
           enterkeyhint="next"
           id="react-aria-:r1b:"
@@ -1968,7 +1968,7 @@ exports[`DateInput > matches snapshots > with default value 1`] = `
 exports[`DateInput > matches snapshots > with leading zeros 1`] = `
 <DocumentFragment>
   <div
-    class="sc-gKkgUA kDJWYP aje-datefield aje-input__date is-medium"
+    class="sc-iqkkDd kdRpNH aje-datefield aje-input__date is-medium"
     style="min-width: var(--size-x);"
   >
     <label
@@ -1984,12 +1984,12 @@ exports[`DateInput > matches snapshots > with leading zeros 1`] = `
       Select a date
     </p>
     <div
-      class="sc-eCQgVK lhFnxc aje-combo-input"
+      class="sc-qdQOe kPUMiD aje-combo-input"
     >
       <div
         aria-describedby="react-aria-:r6o:"
         aria-labelledby="react-aria-:r6m:"
-        class="sc-folSZX iJJEZG aje-input__date-segments"
+        class="sc-dlwHGs bXJHod aje-input__date-segments"
         id="react-aria-:r6l:"
         role="group"
         style="unicode-bidi: isolate;"
@@ -2003,7 +2003,7 @@ exports[`DateInput > matches snapshots > with leading zeros 1`] = `
           aria-valuenow="3"
           aria-valuetext="Empty"
           autocorrect="off"
-          class="sc-fFCZOx dVqKiC aje-input__segment placeholder"
+          class="sc-kgohyr euVzjU aje-input__segment placeholder"
           contenteditable="true"
           data-placeholder="true"
           enterkeyhint="next"
@@ -2018,7 +2018,7 @@ exports[`DateInput > matches snapshots > with leading zeros 1`] = `
         </div>
         <div
           aria-hidden="true"
-          class="sc-fFCZOx dVqKiC aje-input__segment"
+          class="sc-kgohyr euVzjU aje-input__segment"
         >
           /
         </div>
@@ -2030,7 +2030,7 @@ exports[`DateInput > matches snapshots > with leading zeros 1`] = `
           aria-valuenow="15"
           aria-valuetext="Empty"
           autocorrect="off"
-          class="sc-fFCZOx dVqKiC aje-input__segment placeholder"
+          class="sc-kgohyr euVzjU aje-input__segment placeholder"
           contenteditable="true"
           data-placeholder="true"
           enterkeyhint="next"
@@ -2045,7 +2045,7 @@ exports[`DateInput > matches snapshots > with leading zeros 1`] = `
         </div>
         <div
           aria-hidden="true"
-          class="sc-fFCZOx dVqKiC aje-input__segment"
+          class="sc-kgohyr euVzjU aje-input__segment"
         >
           /
         </div>
@@ -2057,7 +2057,7 @@ exports[`DateInput > matches snapshots > with leading zeros 1`] = `
           aria-valuenow="2024"
           aria-valuetext="Empty"
           autocorrect="off"
-          class="sc-fFCZOx dVqKiC aje-input__segment placeholder"
+          class="sc-kgohyr euVzjU aje-input__segment placeholder"
           contenteditable="true"
           data-placeholder="true"
           enterkeyhint="next"
@@ -2079,7 +2079,7 @@ exports[`DateInput > matches snapshots > with leading zeros 1`] = `
 exports[`DateInput > matches snapshots > with min and max values 1`] = `
 <DocumentFragment>
   <div
-    class="sc-gKkgUA kDJWYP aje-datefield aje-input__date is-medium"
+    class="sc-iqkkDd kdRpNH aje-datefield aje-input__date is-medium"
     style="min-width: var(--size-x);"
   >
     <label
@@ -2095,12 +2095,12 @@ exports[`DateInput > matches snapshots > with min and max values 1`] = `
       Select a date
     </p>
     <div
-      class="sc-eCQgVK lhFnxc aje-combo-input"
+      class="sc-qdQOe kPUMiD aje-combo-input"
     >
       <div
         aria-describedby="react-aria-:r9b:"
         aria-labelledby="react-aria-:r99:"
-        class="sc-folSZX iJJEZG aje-input__date-segments"
+        class="sc-dlwHGs bXJHod aje-input__date-segments"
         id="react-aria-:r98:"
         role="group"
         style="unicode-bidi: isolate;"
@@ -2114,7 +2114,7 @@ exports[`DateInput > matches snapshots > with min and max values 1`] = `
           aria-valuenow="3"
           aria-valuetext="Empty"
           autocorrect="off"
-          class="sc-fFCZOx dVqKiC aje-input__segment placeholder"
+          class="sc-kgohyr euVzjU aje-input__segment placeholder"
           contenteditable="true"
           data-placeholder="true"
           enterkeyhint="next"
@@ -2129,7 +2129,7 @@ exports[`DateInput > matches snapshots > with min and max values 1`] = `
         </div>
         <div
           aria-hidden="true"
-          class="sc-fFCZOx dVqKiC aje-input__segment"
+          class="sc-kgohyr euVzjU aje-input__segment"
         >
           /
         </div>
@@ -2141,7 +2141,7 @@ exports[`DateInput > matches snapshots > with min and max values 1`] = `
           aria-valuenow="15"
           aria-valuetext="Empty"
           autocorrect="off"
-          class="sc-fFCZOx dVqKiC aje-input__segment placeholder"
+          class="sc-kgohyr euVzjU aje-input__segment placeholder"
           contenteditable="true"
           data-placeholder="true"
           enterkeyhint="next"
@@ -2156,7 +2156,7 @@ exports[`DateInput > matches snapshots > with min and max values 1`] = `
         </div>
         <div
           aria-hidden="true"
-          class="sc-fFCZOx dVqKiC aje-input__segment"
+          class="sc-kgohyr euVzjU aje-input__segment"
         >
           /
         </div>
@@ -2168,7 +2168,7 @@ exports[`DateInput > matches snapshots > with min and max values 1`] = `
           aria-valuenow="2024"
           aria-valuetext="Empty"
           autocorrect="off"
-          class="sc-fFCZOx dVqKiC aje-input__segment placeholder"
+          class="sc-kgohyr euVzjU aje-input__segment placeholder"
           contenteditable="true"
           data-placeholder="true"
           enterkeyhint="next"
@@ -2190,7 +2190,7 @@ exports[`DateInput > matches snapshots > with min and max values 1`] = `
 exports[`DateInput > matches snapshots > with value 1`] = `
 <DocumentFragment>
   <div
-    class="sc-gKkgUA kDJWYP aje-datefield aje-input__date is-medium"
+    class="sc-iqkkDd kdRpNH aje-datefield aje-input__date is-medium"
     style="min-width: var(--size-x);"
   >
     <label
@@ -2206,12 +2206,12 @@ exports[`DateInput > matches snapshots > with value 1`] = `
       Select a date
     </p>
     <div
-      class="sc-eCQgVK lhFnxc aje-combo-input"
+      class="sc-qdQOe kPUMiD aje-combo-input"
     >
       <div
         aria-describedby="react-aria-description-0 react-aria-:ri:"
         aria-labelledby="react-aria-:rg:"
-        class="sc-folSZX iJJEZG aje-input__date-segments"
+        class="sc-dlwHGs bXJHod aje-input__date-segments"
         id="react-aria-:rf:"
         role="group"
         style="unicode-bidi: isolate;"
@@ -2225,7 +2225,7 @@ exports[`DateInput > matches snapshots > with value 1`] = `
           aria-valuenow="1"
           aria-valuetext="1 – January"
           autocorrect="off"
-          class="sc-fFCZOx dVqKiC aje-input__segment"
+          class="sc-kgohyr euVzjU aje-input__segment"
           contenteditable="true"
           enterkeyhint="next"
           id="react-aria-:rk:"
@@ -2239,7 +2239,7 @@ exports[`DateInput > matches snapshots > with value 1`] = `
         </div>
         <div
           aria-hidden="true"
-          class="sc-fFCZOx dVqKiC aje-input__segment"
+          class="sc-kgohyr euVzjU aje-input__segment"
         >
           /
         </div>
@@ -2251,7 +2251,7 @@ exports[`DateInput > matches snapshots > with value 1`] = `
           aria-valuenow="15"
           aria-valuetext="15"
           autocorrect="off"
-          class="sc-fFCZOx dVqKiC aje-input__segment"
+          class="sc-kgohyr euVzjU aje-input__segment"
           contenteditable="true"
           enterkeyhint="next"
           id="react-aria-:ro:"
@@ -2265,7 +2265,7 @@ exports[`DateInput > matches snapshots > with value 1`] = `
         </div>
         <div
           aria-hidden="true"
-          class="sc-fFCZOx dVqKiC aje-input__segment"
+          class="sc-kgohyr euVzjU aje-input__segment"
         >
           /
         </div>
@@ -2277,7 +2277,7 @@ exports[`DateInput > matches snapshots > with value 1`] = `
           aria-valuenow="2023"
           aria-valuetext="2023"
           autocorrect="off"
-          class="sc-fFCZOx dVqKiC aje-input__segment"
+          class="sc-kgohyr euVzjU aje-input__segment"
           contenteditable="true"
           enterkeyhint="next"
           id="react-aria-:rs:"
@@ -2298,7 +2298,7 @@ exports[`DateInput > matches snapshots > with value 1`] = `
 exports[`DateInput > matches snapshots > without error 1`] = `
 <DocumentFragment>
   <div
-    class="sc-gKkgUA kDJWYP aje-datefield aje-input__date is-medium"
+    class="sc-iqkkDd kdRpNH aje-datefield aje-input__date is-medium"
     style="min-width: var(--size-x);"
   >
     <label
@@ -2314,12 +2314,12 @@ exports[`DateInput > matches snapshots > without error 1`] = `
       Select a date
     </p>
     <div
-      class="sc-eCQgVK lhFnxc aje-combo-input"
+      class="sc-qdQOe kPUMiD aje-combo-input"
     >
       <div
         aria-describedby="react-aria-:rao:"
         aria-labelledby="react-aria-:ram:"
-        class="sc-folSZX iJJEZG aje-input__date-segments"
+        class="sc-dlwHGs bXJHod aje-input__date-segments"
         id="react-aria-:ral:"
         role="group"
         style="unicode-bidi: isolate;"
@@ -2333,7 +2333,7 @@ exports[`DateInput > matches snapshots > without error 1`] = `
           aria-valuenow="3"
           aria-valuetext="Empty"
           autocorrect="off"
-          class="sc-fFCZOx dVqKiC aje-input__segment placeholder"
+          class="sc-kgohyr euVzjU aje-input__segment placeholder"
           contenteditable="true"
           data-placeholder="true"
           enterkeyhint="next"
@@ -2348,7 +2348,7 @@ exports[`DateInput > matches snapshots > without error 1`] = `
         </div>
         <div
           aria-hidden="true"
-          class="sc-fFCZOx dVqKiC aje-input__segment"
+          class="sc-kgohyr euVzjU aje-input__segment"
         >
           /
         </div>
@@ -2360,7 +2360,7 @@ exports[`DateInput > matches snapshots > without error 1`] = `
           aria-valuenow="15"
           aria-valuetext="Empty"
           autocorrect="off"
-          class="sc-fFCZOx dVqKiC aje-input__segment placeholder"
+          class="sc-kgohyr euVzjU aje-input__segment placeholder"
           contenteditable="true"
           data-placeholder="true"
           enterkeyhint="next"
@@ -2375,7 +2375,7 @@ exports[`DateInput > matches snapshots > without error 1`] = `
         </div>
         <div
           aria-hidden="true"
-          class="sc-fFCZOx dVqKiC aje-input__segment"
+          class="sc-kgohyr euVzjU aje-input__segment"
         >
           /
         </div>
@@ -2387,7 +2387,7 @@ exports[`DateInput > matches snapshots > without error 1`] = `
           aria-valuenow="2024"
           aria-valuetext="Empty"
           autocorrect="off"
-          class="sc-fFCZOx dVqKiC aje-input__segment placeholder"
+          class="sc-kgohyr euVzjU aje-input__segment placeholder"
           contenteditable="true"
           data-placeholder="true"
           enterkeyhint="next"
@@ -2409,7 +2409,7 @@ exports[`DateInput > matches snapshots > without error 1`] = `
 exports[`DateInput > matches snapshots > without label 1`] = `
 <DocumentFragment>
   <div
-    class="sc-gKkgUA kDJWYP aje-datefield aje-input__date is-medium"
+    class="sc-iqkkDd kdRpNH aje-datefield aje-input__date is-medium"
     style="min-width: var(--size-x);"
   >
     <p
@@ -2419,12 +2419,12 @@ exports[`DateInput > matches snapshots > without label 1`] = `
       Select a date
     </p>
     <div
-      class="sc-eCQgVK lhFnxc aje-combo-input"
+      class="sc-qdQOe kPUMiD aje-combo-input"
     >
       <div
         aria-describedby="react-aria-:r9q:"
         aria-labelledby="react-aria-:r9o:"
-        class="sc-folSZX iJJEZG aje-input__date-segments"
+        class="sc-dlwHGs bXJHod aje-input__date-segments"
         id="react-aria-:r9n:"
         role="group"
         style="unicode-bidi: isolate;"
@@ -2438,7 +2438,7 @@ exports[`DateInput > matches snapshots > without label 1`] = `
           aria-valuenow="3"
           aria-valuetext="Empty"
           autocorrect="off"
-          class="sc-fFCZOx dVqKiC aje-input__segment placeholder"
+          class="sc-kgohyr euVzjU aje-input__segment placeholder"
           contenteditable="true"
           data-placeholder="true"
           enterkeyhint="next"
@@ -2453,7 +2453,7 @@ exports[`DateInput > matches snapshots > without label 1`] = `
         </div>
         <div
           aria-hidden="true"
-          class="sc-fFCZOx dVqKiC aje-input__segment"
+          class="sc-kgohyr euVzjU aje-input__segment"
         >
           /
         </div>
@@ -2465,7 +2465,7 @@ exports[`DateInput > matches snapshots > without label 1`] = `
           aria-valuenow="15"
           aria-valuetext="Empty"
           autocorrect="off"
-          class="sc-fFCZOx dVqKiC aje-input__segment placeholder"
+          class="sc-kgohyr euVzjU aje-input__segment placeholder"
           contenteditable="true"
           data-placeholder="true"
           enterkeyhint="next"
@@ -2480,7 +2480,7 @@ exports[`DateInput > matches snapshots > without label 1`] = `
         </div>
         <div
           aria-hidden="true"
-          class="sc-fFCZOx dVqKiC aje-input__segment"
+          class="sc-kgohyr euVzjU aje-input__segment"
         >
           /
         </div>
@@ -2492,7 +2492,7 @@ exports[`DateInput > matches snapshots > without label 1`] = `
           aria-valuenow="2024"
           aria-valuetext="Empty"
           autocorrect="off"
-          class="sc-fFCZOx dVqKiC aje-input__segment placeholder"
+          class="sc-kgohyr euVzjU aje-input__segment placeholder"
           contenteditable="true"
           data-placeholder="true"
           enterkeyhint="next"
@@ -2514,7 +2514,7 @@ exports[`DateInput > matches snapshots > without label 1`] = `
 exports[`DateInput > matches snapshots > without message 1`] = `
 <DocumentFragment>
   <div
-    class="sc-gKkgUA kDJWYP aje-datefield aje-input__date is-medium"
+    class="sc-iqkkDd kdRpNH aje-datefield aje-input__date is-medium"
     style="min-width: var(--size-x);"
   >
     <label
@@ -2524,11 +2524,11 @@ exports[`DateInput > matches snapshots > without message 1`] = `
       Date Input
     </label>
     <div
-      class="sc-eCQgVK lhFnxc aje-combo-input"
+      class="sc-qdQOe kPUMiD aje-combo-input"
     >
       <div
         aria-labelledby="react-aria-:ra7:"
-        class="sc-folSZX iJJEZG aje-input__date-segments"
+        class="sc-dlwHGs bXJHod aje-input__date-segments"
         id="react-aria-:ra6:"
         role="group"
         style="unicode-bidi: isolate;"
@@ -2541,7 +2541,7 @@ exports[`DateInput > matches snapshots > without message 1`] = `
           aria-valuenow="3"
           aria-valuetext="Empty"
           autocorrect="off"
-          class="sc-fFCZOx dVqKiC aje-input__segment placeholder"
+          class="sc-kgohyr euVzjU aje-input__segment placeholder"
           contenteditable="true"
           data-placeholder="true"
           enterkeyhint="next"
@@ -2556,7 +2556,7 @@ exports[`DateInput > matches snapshots > without message 1`] = `
         </div>
         <div
           aria-hidden="true"
-          class="sc-fFCZOx dVqKiC aje-input__segment"
+          class="sc-kgohyr euVzjU aje-input__segment"
         >
           /
         </div>
@@ -2568,7 +2568,7 @@ exports[`DateInput > matches snapshots > without message 1`] = `
           aria-valuenow="15"
           aria-valuetext="Empty"
           autocorrect="off"
-          class="sc-fFCZOx dVqKiC aje-input__segment placeholder"
+          class="sc-kgohyr euVzjU aje-input__segment placeholder"
           contenteditable="true"
           data-placeholder="true"
           enterkeyhint="next"
@@ -2583,7 +2583,7 @@ exports[`DateInput > matches snapshots > without message 1`] = `
         </div>
         <div
           aria-hidden="true"
-          class="sc-fFCZOx dVqKiC aje-input__segment"
+          class="sc-kgohyr euVzjU aje-input__segment"
         >
           /
         </div>
@@ -2595,7 +2595,7 @@ exports[`DateInput > matches snapshots > without message 1`] = `
           aria-valuenow="2024"
           aria-valuetext="Empty"
           autocorrect="off"
-          class="sc-fFCZOx dVqKiC aje-input__segment placeholder"
+          class="sc-kgohyr euVzjU aje-input__segment placeholder"
           contenteditable="true"
           data-placeholder="true"
           enterkeyhint="next"
diff --git a/packages/atomic-elements/src/components/Inputs/DateAndTimes/DatePicker/__snapshots__/DatePicker.spec.tsx.snap b/packages/atomic-elements/src/components/Inputs/DateAndTimes/DatePicker/__snapshots__/DatePicker.spec.tsx.snap
index 66e7388c5..dbbbacadc 100644
--- a/packages/atomic-elements/src/components/Inputs/DateAndTimes/DatePicker/__snapshots__/DatePicker.spec.tsx.snap
+++ b/packages/atomic-elements/src/components/Inputs/DateAndTimes/DatePicker/__snapshots__/DatePicker.spec.tsx.snap
@@ -6,7 +6,7 @@ exports[`DatePicker > matches snapshots > 24 hour cycle 1`] = `
     class="aje-date-picker"
   >
     <div
-      class="sc-kgohyr dcgWfH aje-datefield is-medium"
+      class="sc-iJSMbW egcThr aje-datefield is-medium"
       id="react-aria-:ra6:"
       style="min-width: var(--size-x);"
     >
@@ -23,10 +23,10 @@ exports[`DatePicker > matches snapshots > 24 hour cycle 1`] = `
         Select a date
       </p>
       <div
-        class="sc-hHopjF lbIfIi aje-combo-input"
+        class="sc-ivKqQM dsWfek aje-combo-input"
       >
         <div
-          class="sc-fKwzVe fGeCLx aje-input__date-segments"
+          class="sc-giQkEn flCHxB aje-input__date-segments"
           id="react-aria-:ra6:"
           role="presentation"
           style="unicode-bidi: isolate;"
@@ -40,7 +40,7 @@ exports[`DatePicker > matches snapshots > 24 hour cycle 1`] = `
             aria-valuenow="3"
             aria-valuetext="Empty"
             autocorrect="off"
-            class="sc-bCgoVd jAtiqP aje-input__segment placeholder"
+            class="sc-ezjgic bwmyOk aje-input__segment placeholder"
             contenteditable="true"
             data-placeholder="true"
             enterkeyhint="next"
@@ -55,7 +55,7 @@ exports[`DatePicker > matches snapshots > 24 hour cycle 1`] = `
           </div>
           <div
             aria-hidden="true"
-            class="sc-bCgoVd jAtiqP aje-input__segment"
+            class="sc-ezjgic bwmyOk aje-input__segment"
           >
             /
           </div>
@@ -67,7 +67,7 @@ exports[`DatePicker > matches snapshots > 24 hour cycle 1`] = `
             aria-valuenow="15"
             aria-valuetext="Empty"
             autocorrect="off"
-            class="sc-bCgoVd jAtiqP aje-input__segment placeholder"
+            class="sc-ezjgic bwmyOk aje-input__segment placeholder"
             contenteditable="true"
             data-placeholder="true"
             enterkeyhint="next"
@@ -82,7 +82,7 @@ exports[`DatePicker > matches snapshots > 24 hour cycle 1`] = `
           </div>
           <div
             aria-hidden="true"
-            class="sc-bCgoVd jAtiqP aje-input__segment"
+            class="sc-ezjgic bwmyOk aje-input__segment"
           >
             /
           </div>
@@ -94,7 +94,7 @@ exports[`DatePicker > matches snapshots > 24 hour cycle 1`] = `
             aria-valuenow="2024"
             aria-valuetext="Empty"
             autocorrect="off"
-            class="sc-bCgoVd jAtiqP aje-input__segment placeholder"
+            class="sc-ezjgic bwmyOk aje-input__segment placeholder"
             contenteditable="true"
             data-placeholder="true"
             enterkeyhint="next"
@@ -109,13 +109,13 @@ exports[`DatePicker > matches snapshots > 24 hour cycle 1`] = `
           </div>
           <div
             aria-hidden="true"
-            class="sc-bCgoVd jAtiqP aje-input__segment"
+            class="sc-ezjgic bwmyOk aje-input__segment"
           >
             , 
           </div>
           <div
             aria-hidden="true"
-            class="sc-bCgoVd jAtiqP aje-input__segment"
+            class="sc-ezjgic bwmyOk aje-input__segment"
           >
             ⁦
           </div>
@@ -127,7 +127,7 @@ exports[`DatePicker > matches snapshots > 24 hour cycle 1`] = `
             aria-valuenow="0"
             aria-valuetext="Empty"
             autocorrect="off"
-            class="sc-bCgoVd jAtiqP aje-input__segment placeholder"
+            class="sc-ezjgic bwmyOk aje-input__segment placeholder"
             contenteditable="true"
             data-placeholder="true"
             enterkeyhint="next"
@@ -142,7 +142,7 @@ exports[`DatePicker > matches snapshots > 24 hour cycle 1`] = `
           </div>
           <div
             aria-hidden="true"
-            class="sc-bCgoVd jAtiqP aje-input__segment"
+            class="sc-ezjgic bwmyOk aje-input__segment"
           >
             ⁩
           </div>
@@ -179,7 +179,7 @@ exports[`DatePicker > matches snapshots > day granularity 1`] = `
     class="aje-date-picker"
   >
     <div
-      class="sc-kgohyr dcgWfH aje-datefield is-medium"
+      class="sc-iJSMbW egcThr aje-datefield is-medium"
       id="react-aria-:r27:"
       style="min-width: var(--size-x);"
     >
@@ -196,10 +196,10 @@ exports[`DatePicker > matches snapshots > day granularity 1`] = `
         Select a date
       </p>
       <div
-        class="sc-hHopjF lbIfIi aje-combo-input"
+        class="sc-ivKqQM dsWfek aje-combo-input"
       >
         <div
-          class="sc-fKwzVe fGeCLx aje-input__date-segments"
+          class="sc-giQkEn flCHxB aje-input__date-segments"
           id="react-aria-:r27:"
           role="presentation"
           style="unicode-bidi: isolate;"
@@ -213,7 +213,7 @@ exports[`DatePicker > matches snapshots > day granularity 1`] = `
             aria-valuenow="3"
             aria-valuetext="Empty"
             autocorrect="off"
-            class="sc-bCgoVd jAtiqP aje-input__segment placeholder"
+            class="sc-ezjgic bwmyOk aje-input__segment placeholder"
             contenteditable="true"
             data-placeholder="true"
             enterkeyhint="next"
@@ -228,7 +228,7 @@ exports[`DatePicker > matches snapshots > day granularity 1`] = `
           </div>
           <div
             aria-hidden="true"
-            class="sc-bCgoVd jAtiqP aje-input__segment"
+            class="sc-ezjgic bwmyOk aje-input__segment"
           >
             /
           </div>
@@ -240,7 +240,7 @@ exports[`DatePicker > matches snapshots > day granularity 1`] = `
             aria-valuenow="15"
             aria-valuetext="Empty"
             autocorrect="off"
-            class="sc-bCgoVd jAtiqP aje-input__segment placeholder"
+            class="sc-ezjgic bwmyOk aje-input__segment placeholder"
             contenteditable="true"
             data-placeholder="true"
             enterkeyhint="next"
@@ -255,7 +255,7 @@ exports[`DatePicker > matches snapshots > day granularity 1`] = `
           </div>
           <div
             aria-hidden="true"
-            class="sc-bCgoVd jAtiqP aje-input__segment"
+            class="sc-ezjgic bwmyOk aje-input__segment"
           >
             /
           </div>
@@ -267,7 +267,7 @@ exports[`DatePicker > matches snapshots > day granularity 1`] = `
             aria-valuenow="2024"
             aria-valuetext="Empty"
             autocorrect="off"
-            class="sc-bCgoVd jAtiqP aje-input__segment placeholder"
+            class="sc-ezjgic bwmyOk aje-input__segment placeholder"
             contenteditable="true"
             data-placeholder="true"
             enterkeyhint="next"
@@ -313,7 +313,7 @@ exports[`DatePicker > matches snapshots > default variant 1`] = `
     class="aje-date-picker"
   >
     <div
-      class="sc-kgohyr dcgWfH aje-datefield is-medium"
+      class="sc-iJSMbW egcThr aje-datefield is-medium"
       id="react-aria-:r2:"
       style="min-width: var(--size-x);"
     >
@@ -330,10 +330,10 @@ exports[`DatePicker > matches snapshots > default variant 1`] = `
         Select a date
       </p>
       <div
-        class="sc-hHopjF lbIfIi aje-combo-input"
+        class="sc-ivKqQM dsWfek aje-combo-input"
       >
         <div
-          class="sc-fKwzVe fGeCLx aje-input__date-segments"
+          class="sc-giQkEn flCHxB aje-input__date-segments"
           id="react-aria-:r2:"
           role="presentation"
           style="unicode-bidi: isolate;"
@@ -347,7 +347,7 @@ exports[`DatePicker > matches snapshots > default variant 1`] = `
             aria-valuenow="3"
             aria-valuetext="Empty"
             autocorrect="off"
-            class="sc-bCgoVd jAtiqP aje-input__segment placeholder"
+            class="sc-ezjgic bwmyOk aje-input__segment placeholder"
             contenteditable="true"
             data-placeholder="true"
             enterkeyhint="next"
@@ -362,7 +362,7 @@ exports[`DatePicker > matches snapshots > default variant 1`] = `
           </div>
           <div
             aria-hidden="true"
-            class="sc-bCgoVd jAtiqP aje-input__segment"
+            class="sc-ezjgic bwmyOk aje-input__segment"
           >
             /
           </div>
@@ -374,7 +374,7 @@ exports[`DatePicker > matches snapshots > default variant 1`] = `
             aria-valuenow="15"
             aria-valuetext="Empty"
             autocorrect="off"
-            class="sc-bCgoVd jAtiqP aje-input__segment placeholder"
+            class="sc-ezjgic bwmyOk aje-input__segment placeholder"
             contenteditable="true"
             data-placeholder="true"
             enterkeyhint="next"
@@ -389,7 +389,7 @@ exports[`DatePicker > matches snapshots > default variant 1`] = `
           </div>
           <div
             aria-hidden="true"
-            class="sc-bCgoVd jAtiqP aje-input__segment"
+            class="sc-ezjgic bwmyOk aje-input__segment"
           >
             /
           </div>
@@ -401,7 +401,7 @@ exports[`DatePicker > matches snapshots > default variant 1`] = `
             aria-valuenow="2024"
             aria-valuetext="Empty"
             autocorrect="off"
-            class="sc-bCgoVd jAtiqP aje-input__segment placeholder"
+            class="sc-ezjgic bwmyOk aje-input__segment placeholder"
             contenteditable="true"
             data-placeholder="true"
             enterkeyhint="next"
@@ -448,7 +448,7 @@ exports[`DatePicker > matches snapshots > disabled state 1`] = `
     data-disabled="true"
   >
     <div
-      class="sc-kgohyr dcgWfH aje-datefield is-medium"
+      class="sc-iJSMbW egcThr aje-datefield is-medium"
       data-disabled="true"
       id="react-aria-:r6j:"
       style="min-width: var(--size-x);"
@@ -466,10 +466,10 @@ exports[`DatePicker > matches snapshots > disabled state 1`] = `
         Select a date
       </p>
       <div
-        class="sc-hHopjF lbIfIi aje-combo-input"
+        class="sc-ivKqQM dsWfek aje-combo-input"
       >
         <div
-          class="sc-fKwzVe fGeCLx aje-input__date-segments"
+          class="sc-giQkEn flCHxB aje-input__date-segments"
           id="react-aria-:r6j:"
           role="presentation"
           style="unicode-bidi: isolate;"
@@ -483,7 +483,7 @@ exports[`DatePicker > matches snapshots > disabled state 1`] = `
             aria-valuemin="1"
             aria-valuenow="3"
             aria-valuetext="Empty"
-            class="sc-bCgoVd jAtiqP aje-input__segment placeholder"
+            class="sc-ezjgic bwmyOk aje-input__segment placeholder"
             contenteditable="false"
             data-placeholder="true"
             id="react-aria-:r6u:"
@@ -494,7 +494,7 @@ exports[`DatePicker > matches snapshots > disabled state 1`] = `
           </div>
           <div
             aria-hidden="true"
-            class="sc-bCgoVd jAtiqP aje-input__segment"
+            class="sc-ezjgic bwmyOk aje-input__segment"
           >
             /
           </div>
@@ -506,7 +506,7 @@ exports[`DatePicker > matches snapshots > disabled state 1`] = `
             aria-valuemin="1"
             aria-valuenow="15"
             aria-valuetext="Empty"
-            class="sc-bCgoVd jAtiqP aje-input__segment placeholder"
+            class="sc-ezjgic bwmyOk aje-input__segment placeholder"
             contenteditable="false"
             data-placeholder="true"
             id="react-aria-:r72:"
@@ -517,7 +517,7 @@ exports[`DatePicker > matches snapshots > disabled state 1`] = `
           </div>
           <div
             aria-hidden="true"
-            class="sc-bCgoVd jAtiqP aje-input__segment"
+            class="sc-ezjgic bwmyOk aje-input__segment"
           >
             /
           </div>
@@ -529,7 +529,7 @@ exports[`DatePicker > matches snapshots > disabled state 1`] = `
             aria-valuemin="1"
             aria-valuenow="2024"
             aria-valuetext="Empty"
-            class="sc-bCgoVd jAtiqP aje-input__segment placeholder"
+            class="sc-ezjgic bwmyOk aje-input__segment placeholder"
             contenteditable="false"
             data-placeholder="true"
             id="react-aria-:r76:"
@@ -571,7 +571,7 @@ exports[`DatePicker > matches snapshots > hour granularity 1`] = `
     class="aje-date-picker"
   >
     <div
-      class="sc-kgohyr dcgWfH aje-datefield is-medium"
+      class="sc-iJSMbW egcThr aje-datefield is-medium"
       id="react-aria-:r2u:"
       style="min-width: var(--size-x);"
     >
@@ -588,10 +588,10 @@ exports[`DatePicker > matches snapshots > hour granularity 1`] = `
         Select a date
       </p>
       <div
-        class="sc-hHopjF lbIfIi aje-combo-input"
+        class="sc-ivKqQM dsWfek aje-combo-input"
       >
         <div
-          class="sc-fKwzVe fGeCLx aje-input__date-segments"
+          class="sc-giQkEn flCHxB aje-input__date-segments"
           id="react-aria-:r2u:"
           role="presentation"
           style="unicode-bidi: isolate;"
@@ -605,7 +605,7 @@ exports[`DatePicker > matches snapshots > hour granularity 1`] = `
             aria-valuenow="3"
             aria-valuetext="Empty"
             autocorrect="off"
-            class="sc-bCgoVd jAtiqP aje-input__segment placeholder"
+            class="sc-ezjgic bwmyOk aje-input__segment placeholder"
             contenteditable="true"
             data-placeholder="true"
             enterkeyhint="next"
@@ -620,7 +620,7 @@ exports[`DatePicker > matches snapshots > hour granularity 1`] = `
           </div>
           <div
             aria-hidden="true"
-            class="sc-bCgoVd jAtiqP aje-input__segment"
+            class="sc-ezjgic bwmyOk aje-input__segment"
           >
             /
           </div>
@@ -632,7 +632,7 @@ exports[`DatePicker > matches snapshots > hour granularity 1`] = `
             aria-valuenow="15"
             aria-valuetext="Empty"
             autocorrect="off"
-            class="sc-bCgoVd jAtiqP aje-input__segment placeholder"
+            class="sc-ezjgic bwmyOk aje-input__segment placeholder"
             contenteditable="true"
             data-placeholder="true"
             enterkeyhint="next"
@@ -647,7 +647,7 @@ exports[`DatePicker > matches snapshots > hour granularity 1`] = `
           </div>
           <div
             aria-hidden="true"
-            class="sc-bCgoVd jAtiqP aje-input__segment"
+            class="sc-ezjgic bwmyOk aje-input__segment"
           >
             /
           </div>
@@ -659,7 +659,7 @@ exports[`DatePicker > matches snapshots > hour granularity 1`] = `
             aria-valuenow="2024"
             aria-valuetext="Empty"
             autocorrect="off"
-            class="sc-bCgoVd jAtiqP aje-input__segment placeholder"
+            class="sc-ezjgic bwmyOk aje-input__segment placeholder"
             contenteditable="true"
             data-placeholder="true"
             enterkeyhint="next"
@@ -674,13 +674,13 @@ exports[`DatePicker > matches snapshots > hour granularity 1`] = `
           </div>
           <div
             aria-hidden="true"
-            class="sc-bCgoVd jAtiqP aje-input__segment"
+            class="sc-ezjgic bwmyOk aje-input__segment"
           >
             , 
           </div>
           <div
             aria-hidden="true"
-            class="sc-bCgoVd jAtiqP aje-input__segment"
+            class="sc-ezjgic bwmyOk aje-input__segment"
           >
             ⁦
           </div>
@@ -692,7 +692,7 @@ exports[`DatePicker > matches snapshots > hour granularity 1`] = `
             aria-valuenow="0"
             aria-valuetext="Empty"
             autocorrect="off"
-            class="sc-bCgoVd jAtiqP aje-input__segment placeholder"
+            class="sc-ezjgic bwmyOk aje-input__segment placeholder"
             contenteditable="true"
             data-placeholder="true"
             enterkeyhint="next"
@@ -707,13 +707,13 @@ exports[`DatePicker > matches snapshots > hour granularity 1`] = `
           </div>
           <div
             aria-hidden="true"
-            class="sc-bCgoVd jAtiqP aje-input__segment"
+            class="sc-ezjgic bwmyOk aje-input__segment"
           >
             ⁩
           </div>
           <div
             aria-hidden="true"
-            class="sc-bCgoVd jAtiqP aje-input__segment"
+            class="sc-ezjgic bwmyOk aje-input__segment"
           >
              
           </div>
@@ -725,7 +725,7 @@ exports[`DatePicker > matches snapshots > hour granularity 1`] = `
             aria-valuenow="0"
             aria-valuetext="Empty"
             autocorrect="off"
-            class="sc-bCgoVd jAtiqP aje-input__segment placeholder"
+            class="sc-ezjgic bwmyOk aje-input__segment placeholder"
             contenteditable="true"
             data-placeholder="true"
             enterkeyhint="next"
@@ -771,7 +771,7 @@ exports[`DatePicker > matches snapshots > invalid state 1`] = `
     data-invalid="true"
   >
     <div
-      class="sc-kgohyr dcgWfH aje-datefield is-medium"
+      class="sc-iJSMbW egcThr aje-datefield is-medium"
       data-invalid="true"
       id="react-aria-:r8o:"
       style="min-width: var(--size-x);"
@@ -789,10 +789,10 @@ exports[`DatePicker > matches snapshots > invalid state 1`] = `
         Select a date
       </p>
       <div
-        class="sc-hHopjF lbIfIi aje-combo-input"
+        class="sc-ivKqQM dsWfek aje-combo-input"
       >
         <div
-          class="sc-fKwzVe fGeCLx aje-input__date-segments"
+          class="sc-giQkEn flCHxB aje-input__date-segments"
           id="react-aria-:r8o:"
           role="presentation"
           style="unicode-bidi: isolate;"
@@ -807,7 +807,7 @@ exports[`DatePicker > matches snapshots > invalid state 1`] = `
             aria-valuenow="3"
             aria-valuetext="Empty"
             autocorrect="off"
-            class="sc-bCgoVd jAtiqP aje-input__segment placeholder"
+            class="sc-ezjgic bwmyOk aje-input__segment placeholder"
             contenteditable="true"
             data-placeholder="true"
             enterkeyhint="next"
@@ -822,7 +822,7 @@ exports[`DatePicker > matches snapshots > invalid state 1`] = `
           </div>
           <div
             aria-hidden="true"
-            class="sc-bCgoVd jAtiqP aje-input__segment"
+            class="sc-ezjgic bwmyOk aje-input__segment"
           >
             /
           </div>
@@ -836,7 +836,7 @@ exports[`DatePicker > matches snapshots > invalid state 1`] = `
             aria-valuenow="15"
             aria-valuetext="Empty"
             autocorrect="off"
-            class="sc-bCgoVd jAtiqP aje-input__segment placeholder"
+            class="sc-ezjgic bwmyOk aje-input__segment placeholder"
             contenteditable="true"
             data-placeholder="true"
             enterkeyhint="next"
@@ -851,7 +851,7 @@ exports[`DatePicker > matches snapshots > invalid state 1`] = `
           </div>
           <div
             aria-hidden="true"
-            class="sc-bCgoVd jAtiqP aje-input__segment"
+            class="sc-ezjgic bwmyOk aje-input__segment"
           >
             /
           </div>
@@ -865,7 +865,7 @@ exports[`DatePicker > matches snapshots > invalid state 1`] = `
             aria-valuenow="2024"
             aria-valuetext="Empty"
             autocorrect="off"
-            class="sc-bCgoVd jAtiqP aje-input__segment placeholder"
+            class="sc-ezjgic bwmyOk aje-input__segment placeholder"
             contenteditable="true"
             data-placeholder="true"
             enterkeyhint="next"
@@ -917,7 +917,7 @@ exports[`DatePicker > matches snapshots > large calendar size 1`] = `
     class="aje-date-picker"
   >
     <div
-      class="sc-kgohyr dcgWfH aje-datefield is-medium"
+      class="sc-iJSMbW egcThr aje-datefield is-medium"
       id="react-aria-:reo:"
       style="min-width: var(--size-x);"
     >
@@ -934,10 +934,10 @@ exports[`DatePicker > matches snapshots > large calendar size 1`] = `
         Select a date
       </p>
       <div
-        class="sc-hHopjF lbIfIi aje-combo-input"
+        class="sc-ivKqQM dsWfek aje-combo-input"
       >
         <div
-          class="sc-fKwzVe fGeCLx aje-input__date-segments"
+          class="sc-giQkEn flCHxB aje-input__date-segments"
           id="react-aria-:reo:"
           role="presentation"
           style="unicode-bidi: isolate;"
@@ -951,7 +951,7 @@ exports[`DatePicker > matches snapshots > large calendar size 1`] = `
             aria-valuenow="3"
             aria-valuetext="Empty"
             autocorrect="off"
-            class="sc-bCgoVd jAtiqP aje-input__segment placeholder"
+            class="sc-ezjgic bwmyOk aje-input__segment placeholder"
             contenteditable="true"
             data-placeholder="true"
             enterkeyhint="next"
@@ -966,7 +966,7 @@ exports[`DatePicker > matches snapshots > large calendar size 1`] = `
           </div>
           <div
             aria-hidden="true"
-            class="sc-bCgoVd jAtiqP aje-input__segment"
+            class="sc-ezjgic bwmyOk aje-input__segment"
           >
             /
           </div>
@@ -978,7 +978,7 @@ exports[`DatePicker > matches snapshots > large calendar size 1`] = `
             aria-valuenow="15"
             aria-valuetext="Empty"
             autocorrect="off"
-            class="sc-bCgoVd jAtiqP aje-input__segment placeholder"
+            class="sc-ezjgic bwmyOk aje-input__segment placeholder"
             contenteditable="true"
             data-placeholder="true"
             enterkeyhint="next"
@@ -993,7 +993,7 @@ exports[`DatePicker > matches snapshots > large calendar size 1`] = `
           </div>
           <div
             aria-hidden="true"
-            class="sc-bCgoVd jAtiqP aje-input__segment"
+            class="sc-ezjgic bwmyOk aje-input__segment"
           >
             /
           </div>
@@ -1005,7 +1005,7 @@ exports[`DatePicker > matches snapshots > large calendar size 1`] = `
             aria-valuenow="2024"
             aria-valuetext="Empty"
             autocorrect="off"
-            class="sc-bCgoVd jAtiqP aje-input__segment placeholder"
+            class="sc-ezjgic bwmyOk aje-input__segment placeholder"
             contenteditable="true"
             data-placeholder="true"
             enterkeyhint="next"
@@ -1051,7 +1051,7 @@ exports[`DatePicker > matches snapshots > large size 1`] = `
     class="aje-date-picker is-large"
   >
     <div
-      class="sc-kgohyr dcgWfH aje-datefield is-large"
+      class="sc-iJSMbW egcThr aje-datefield is-large"
       id="react-aria-:rcj:"
       style="min-width: var(--size-x);"
     >
@@ -1068,10 +1068,10 @@ exports[`DatePicker > matches snapshots > large size 1`] = `
         Select a date
       </p>
       <div
-        class="sc-hHopjF lbIfIi aje-combo-input"
+        class="sc-ivKqQM dsWfek aje-combo-input"
       >
         <div
-          class="sc-fKwzVe fGeCLx aje-input__date-segments"
+          class="sc-giQkEn flCHxB aje-input__date-segments"
           id="react-aria-:rcj:"
           role="presentation"
           style="unicode-bidi: isolate;"
@@ -1085,7 +1085,7 @@ exports[`DatePicker > matches snapshots > large size 1`] = `
             aria-valuenow="3"
             aria-valuetext="Empty"
             autocorrect="off"
-            class="sc-bCgoVd jAtiqP aje-input__segment placeholder"
+            class="sc-ezjgic bwmyOk aje-input__segment placeholder"
             contenteditable="true"
             data-placeholder="true"
             enterkeyhint="next"
@@ -1100,7 +1100,7 @@ exports[`DatePicker > matches snapshots > large size 1`] = `
           </div>
           <div
             aria-hidden="true"
-            class="sc-bCgoVd jAtiqP aje-input__segment"
+            class="sc-ezjgic bwmyOk aje-input__segment"
           >
             /
           </div>
@@ -1112,7 +1112,7 @@ exports[`DatePicker > matches snapshots > large size 1`] = `
             aria-valuenow="15"
             aria-valuetext="Empty"
             autocorrect="off"
-            class="sc-bCgoVd jAtiqP aje-input__segment placeholder"
+            class="sc-ezjgic bwmyOk aje-input__segment placeholder"
             contenteditable="true"
             data-placeholder="true"
             enterkeyhint="next"
@@ -1127,7 +1127,7 @@ exports[`DatePicker > matches snapshots > large size 1`] = `
           </div>
           <div
             aria-hidden="true"
-            class="sc-bCgoVd jAtiqP aje-input__segment"
+            class="sc-ezjgic bwmyOk aje-input__segment"
           >
             /
           </div>
@@ -1139,7 +1139,7 @@ exports[`DatePicker > matches snapshots > large size 1`] = `
             aria-valuenow="2024"
             aria-valuetext="Empty"
             autocorrect="off"
-            class="sc-bCgoVd jAtiqP aje-input__segment placeholder"
+            class="sc-ezjgic bwmyOk aje-input__segment placeholder"
             contenteditable="true"
             data-placeholder="true"
             enterkeyhint="next"
@@ -1185,7 +1185,7 @@ exports[`DatePicker > matches snapshots > medium calendar size 1`] = `
     class="aje-date-picker"
   >
     <div
-      class="sc-kgohyr dcgWfH aje-datefield is-medium"
+      class="sc-iJSMbW egcThr aje-datefield is-medium"
       id="react-aria-:re1:"
       style="min-width: var(--size-x);"
     >
@@ -1202,10 +1202,10 @@ exports[`DatePicker > matches snapshots > medium calendar size 1`] = `
         Select a date
       </p>
       <div
-        class="sc-hHopjF lbIfIi aje-combo-input"
+        class="sc-ivKqQM dsWfek aje-combo-input"
       >
         <div
-          class="sc-fKwzVe fGeCLx aje-input__date-segments"
+          class="sc-giQkEn flCHxB aje-input__date-segments"
           id="react-aria-:re1:"
           role="presentation"
           style="unicode-bidi: isolate;"
@@ -1219,7 +1219,7 @@ exports[`DatePicker > matches snapshots > medium calendar size 1`] = `
             aria-valuenow="3"
             aria-valuetext="Empty"
             autocorrect="off"
-            class="sc-bCgoVd jAtiqP aje-input__segment placeholder"
+            class="sc-ezjgic bwmyOk aje-input__segment placeholder"
             contenteditable="true"
             data-placeholder="true"
             enterkeyhint="next"
@@ -1234,7 +1234,7 @@ exports[`DatePicker > matches snapshots > medium calendar size 1`] = `
           </div>
           <div
             aria-hidden="true"
-            class="sc-bCgoVd jAtiqP aje-input__segment"
+            class="sc-ezjgic bwmyOk aje-input__segment"
           >
             /
           </div>
@@ -1246,7 +1246,7 @@ exports[`DatePicker > matches snapshots > medium calendar size 1`] = `
             aria-valuenow="15"
             aria-valuetext="Empty"
             autocorrect="off"
-            class="sc-bCgoVd jAtiqP aje-input__segment placeholder"
+            class="sc-ezjgic bwmyOk aje-input__segment placeholder"
             contenteditable="true"
             data-placeholder="true"
             enterkeyhint="next"
@@ -1261,7 +1261,7 @@ exports[`DatePicker > matches snapshots > medium calendar size 1`] = `
           </div>
           <div
             aria-hidden="true"
-            class="sc-bCgoVd jAtiqP aje-input__segment"
+            class="sc-ezjgic bwmyOk aje-input__segment"
           >
             /
           </div>
@@ -1273,7 +1273,7 @@ exports[`DatePicker > matches snapshots > medium calendar size 1`] = `
             aria-valuenow="2024"
             aria-valuetext="Empty"
             autocorrect="off"
-            class="sc-bCgoVd jAtiqP aje-input__segment placeholder"
+            class="sc-ezjgic bwmyOk aje-input__segment placeholder"
             contenteditable="true"
             data-placeholder="true"
             enterkeyhint="next"
@@ -1319,7 +1319,7 @@ exports[`DatePicker > matches snapshots > medium size 1`] = `
     class="aje-date-picker is-medium"
   >
     <div
-      class="sc-kgohyr dcgWfH aje-datefield is-medium"
+      class="sc-iJSMbW egcThr aje-datefield is-medium"
       id="react-aria-:rbs:"
       style="min-width: var(--size-x);"
     >
@@ -1336,10 +1336,10 @@ exports[`DatePicker > matches snapshots > medium size 1`] = `
         Select a date
       </p>
       <div
-        class="sc-hHopjF lbIfIi aje-combo-input"
+        class="sc-ivKqQM dsWfek aje-combo-input"
       >
         <div
-          class="sc-fKwzVe fGeCLx aje-input__date-segments"
+          class="sc-giQkEn flCHxB aje-input__date-segments"
           id="react-aria-:rbs:"
           role="presentation"
           style="unicode-bidi: isolate;"
@@ -1353,7 +1353,7 @@ exports[`DatePicker > matches snapshots > medium size 1`] = `
             aria-valuenow="3"
             aria-valuetext="Empty"
             autocorrect="off"
-            class="sc-bCgoVd jAtiqP aje-input__segment placeholder"
+            class="sc-ezjgic bwmyOk aje-input__segment placeholder"
             contenteditable="true"
             data-placeholder="true"
             enterkeyhint="next"
@@ -1368,7 +1368,7 @@ exports[`DatePicker > matches snapshots > medium size 1`] = `
           </div>
           <div
             aria-hidden="true"
-            class="sc-bCgoVd jAtiqP aje-input__segment"
+            class="sc-ezjgic bwmyOk aje-input__segment"
           >
             /
           </div>
@@ -1380,7 +1380,7 @@ exports[`DatePicker > matches snapshots > medium size 1`] = `
             aria-valuenow="15"
             aria-valuetext="Empty"
             autocorrect="off"
-            class="sc-bCgoVd jAtiqP aje-input__segment placeholder"
+            class="sc-ezjgic bwmyOk aje-input__segment placeholder"
             contenteditable="true"
             data-placeholder="true"
             enterkeyhint="next"
@@ -1395,7 +1395,7 @@ exports[`DatePicker > matches snapshots > medium size 1`] = `
           </div>
           <div
             aria-hidden="true"
-            class="sc-bCgoVd jAtiqP aje-input__segment"
+            class="sc-ezjgic bwmyOk aje-input__segment"
           >
             /
           </div>
@@ -1407,7 +1407,7 @@ exports[`DatePicker > matches snapshots > medium size 1`] = `
             aria-valuenow="2024"
             aria-valuetext="Empty"
             autocorrect="off"
-            class="sc-bCgoVd jAtiqP aje-input__segment placeholder"
+            class="sc-ezjgic bwmyOk aje-input__segment placeholder"
             contenteditable="true"
             data-placeholder="true"
             enterkeyhint="next"
@@ -1453,7 +1453,7 @@ exports[`DatePicker > matches snapshots > minimal props 1`] = `
     class="aje-date-picker"
   >
     <div
-      class="sc-kgohyr dcgWfH aje-datefield is-medium"
+      class="sc-iJSMbW egcThr aje-datefield is-medium"
       id="react-aria-:rib:"
       style="min-width: var(--size-x);"
     >
@@ -1462,10 +1462,10 @@ exports[`DatePicker > matches snapshots > minimal props 1`] = `
         id="react-aria-:rii:"
       />
       <div
-        class="sc-hHopjF lbIfIi aje-combo-input"
+        class="sc-ivKqQM dsWfek aje-combo-input"
       >
         <div
-          class="sc-fKwzVe fGeCLx aje-input__date-segments"
+          class="sc-giQkEn flCHxB aje-input__date-segments"
           id="react-aria-:rib:"
           role="presentation"
           style="unicode-bidi: isolate;"
@@ -1478,7 +1478,7 @@ exports[`DatePicker > matches snapshots > minimal props 1`] = `
             aria-valuenow="3"
             aria-valuetext="Empty"
             autocorrect="off"
-            class="sc-bCgoVd jAtiqP aje-input__segment placeholder"
+            class="sc-ezjgic bwmyOk aje-input__segment placeholder"
             contenteditable="true"
             data-placeholder="true"
             enterkeyhint="next"
@@ -1493,7 +1493,7 @@ exports[`DatePicker > matches snapshots > minimal props 1`] = `
           </div>
           <div
             aria-hidden="true"
-            class="sc-bCgoVd jAtiqP aje-input__segment"
+            class="sc-ezjgic bwmyOk aje-input__segment"
           >
             /
           </div>
@@ -1505,7 +1505,7 @@ exports[`DatePicker > matches snapshots > minimal props 1`] = `
             aria-valuenow="15"
             aria-valuetext="Empty"
             autocorrect="off"
-            class="sc-bCgoVd jAtiqP aje-input__segment placeholder"
+            class="sc-ezjgic bwmyOk aje-input__segment placeholder"
             contenteditable="true"
             data-placeholder="true"
             enterkeyhint="next"
@@ -1520,7 +1520,7 @@ exports[`DatePicker > matches snapshots > minimal props 1`] = `
           </div>
           <div
             aria-hidden="true"
-            class="sc-bCgoVd jAtiqP aje-input__segment"
+            class="sc-ezjgic bwmyOk aje-input__segment"
           >
             /
           </div>
@@ -1532,7 +1532,7 @@ exports[`DatePicker > matches snapshots > minimal props 1`] = `
             aria-valuenow="2024"
             aria-valuetext="Empty"
             autocorrect="off"
-            class="sc-bCgoVd jAtiqP aje-input__segment placeholder"
+            class="sc-ezjgic bwmyOk aje-input__segment placeholder"
             contenteditable="true"
             data-placeholder="true"
             enterkeyhint="next"
@@ -1577,7 +1577,7 @@ exports[`DatePicker > matches snapshots > minute granularity 1`] = `
     class="aje-date-picker"
   >
     <div
-      class="sc-kgohyr dcgWfH aje-datefield is-medium"
+      class="sc-iJSMbW egcThr aje-datefield is-medium"
       id="react-aria-:r41:"
       style="min-width: var(--size-x);"
     >
@@ -1594,10 +1594,10 @@ exports[`DatePicker > matches snapshots > minute granularity 1`] = `
         Select a date
       </p>
       <div
-        class="sc-hHopjF lbIfIi aje-combo-input"
+        class="sc-ivKqQM dsWfek aje-combo-input"
       >
         <div
-          class="sc-fKwzVe fGeCLx aje-input__date-segments"
+          class="sc-giQkEn flCHxB aje-input__date-segments"
           id="react-aria-:r41:"
           role="presentation"
           style="unicode-bidi: isolate;"
@@ -1611,7 +1611,7 @@ exports[`DatePicker > matches snapshots > minute granularity 1`] = `
             aria-valuenow="3"
             aria-valuetext="Empty"
             autocorrect="off"
-            class="sc-bCgoVd jAtiqP aje-input__segment placeholder"
+            class="sc-ezjgic bwmyOk aje-input__segment placeholder"
             contenteditable="true"
             data-placeholder="true"
             enterkeyhint="next"
@@ -1626,7 +1626,7 @@ exports[`DatePicker > matches snapshots > minute granularity 1`] = `
           </div>
           <div
             aria-hidden="true"
-            class="sc-bCgoVd jAtiqP aje-input__segment"
+            class="sc-ezjgic bwmyOk aje-input__segment"
           >
             /
           </div>
@@ -1638,7 +1638,7 @@ exports[`DatePicker > matches snapshots > minute granularity 1`] = `
             aria-valuenow="15"
             aria-valuetext="Empty"
             autocorrect="off"
-            class="sc-bCgoVd jAtiqP aje-input__segment placeholder"
+            class="sc-ezjgic bwmyOk aje-input__segment placeholder"
             contenteditable="true"
             data-placeholder="true"
             enterkeyhint="next"
@@ -1653,7 +1653,7 @@ exports[`DatePicker > matches snapshots > minute granularity 1`] = `
           </div>
           <div
             aria-hidden="true"
-            class="sc-bCgoVd jAtiqP aje-input__segment"
+            class="sc-ezjgic bwmyOk aje-input__segment"
           >
             /
           </div>
@@ -1665,7 +1665,7 @@ exports[`DatePicker > matches snapshots > minute granularity 1`] = `
             aria-valuenow="2024"
             aria-valuetext="Empty"
             autocorrect="off"
-            class="sc-bCgoVd jAtiqP aje-input__segment placeholder"
+            class="sc-ezjgic bwmyOk aje-input__segment placeholder"
             contenteditable="true"
             data-placeholder="true"
             enterkeyhint="next"
@@ -1680,13 +1680,13 @@ exports[`DatePicker > matches snapshots > minute granularity 1`] = `
           </div>
           <div
             aria-hidden="true"
-            class="sc-bCgoVd jAtiqP aje-input__segment"
+            class="sc-ezjgic bwmyOk aje-input__segment"
           >
             , 
           </div>
           <div
             aria-hidden="true"
-            class="sc-bCgoVd jAtiqP aje-input__segment"
+            class="sc-ezjgic bwmyOk aje-input__segment"
           >
             ⁦
           </div>
@@ -1698,7 +1698,7 @@ exports[`DatePicker > matches snapshots > minute granularity 1`] = `
             aria-valuenow="0"
             aria-valuetext="Empty"
             autocorrect="off"
-            class="sc-bCgoVd jAtiqP aje-input__segment placeholder"
+            class="sc-ezjgic bwmyOk aje-input__segment placeholder"
             contenteditable="true"
             data-placeholder="true"
             enterkeyhint="next"
@@ -1713,7 +1713,7 @@ exports[`DatePicker > matches snapshots > minute granularity 1`] = `
           </div>
           <div
             aria-hidden="true"
-            class="sc-bCgoVd jAtiqP aje-input__segment"
+            class="sc-ezjgic bwmyOk aje-input__segment"
           >
             :
           </div>
@@ -1725,7 +1725,7 @@ exports[`DatePicker > matches snapshots > minute granularity 1`] = `
             aria-valuenow="0"
             aria-valuetext="Empty"
             autocorrect="off"
-            class="sc-bCgoVd jAtiqP aje-input__segment placeholder"
+            class="sc-ezjgic bwmyOk aje-input__segment placeholder"
             contenteditable="true"
             data-placeholder="true"
             enterkeyhint="next"
@@ -1740,13 +1740,13 @@ exports[`DatePicker > matches snapshots > minute granularity 1`] = `
           </div>
           <div
             aria-hidden="true"
-            class="sc-bCgoVd jAtiqP aje-input__segment"
+            class="sc-ezjgic bwmyOk aje-input__segment"
           >
             ⁩
           </div>
           <div
             aria-hidden="true"
-            class="sc-bCgoVd jAtiqP aje-input__segment"
+            class="sc-ezjgic bwmyOk aje-input__segment"
           >
              
           </div>
@@ -1758,7 +1758,7 @@ exports[`DatePicker > matches snapshots > minute granularity 1`] = `
             aria-valuenow="0"
             aria-valuetext="Empty"
             autocorrect="off"
-            class="sc-bCgoVd jAtiqP aje-input__segment placeholder"
+            class="sc-ezjgic bwmyOk aje-input__segment placeholder"
             contenteditable="true"
             data-placeholder="true"
             enterkeyhint="next"
@@ -1804,7 +1804,7 @@ exports[`DatePicker > matches snapshots > readonly state 1`] = `
     data-readonly="true"
   >
     <div
-      class="sc-kgohyr dcgWfH aje-datefield is-medium"
+      class="sc-iJSMbW egcThr aje-datefield is-medium"
       data-readonly="true"
       id="react-aria-:r81:"
       style="min-width: var(--size-x);"
@@ -1822,10 +1822,10 @@ exports[`DatePicker > matches snapshots > readonly state 1`] = `
         Select a date
       </p>
       <div
-        class="sc-hHopjF lbIfIi aje-combo-input"
+        class="sc-ivKqQM dsWfek aje-combo-input"
       >
         <div
-          class="sc-fKwzVe fGeCLx aje-input__date-segments"
+          class="sc-giQkEn flCHxB aje-input__date-segments"
           id="react-aria-:r81:"
           role="presentation"
           style="unicode-bidi: isolate;"
@@ -1839,7 +1839,7 @@ exports[`DatePicker > matches snapshots > readonly state 1`] = `
             aria-valuemin="1"
             aria-valuenow="3"
             aria-valuetext="Empty"
-            class="sc-bCgoVd jAtiqP aje-input__segment placeholder"
+            class="sc-ezjgic bwmyOk aje-input__segment placeholder"
             contenteditable="false"
             data-placeholder="true"
             id="react-aria-:r8c:"
@@ -1851,7 +1851,7 @@ exports[`DatePicker > matches snapshots > readonly state 1`] = `
           </div>
           <div
             aria-hidden="true"
-            class="sc-bCgoVd jAtiqP aje-input__segment"
+            class="sc-ezjgic bwmyOk aje-input__segment"
           >
             /
           </div>
@@ -1863,7 +1863,7 @@ exports[`DatePicker > matches snapshots > readonly state 1`] = `
             aria-valuemin="1"
             aria-valuenow="15"
             aria-valuetext="Empty"
-            class="sc-bCgoVd jAtiqP aje-input__segment placeholder"
+            class="sc-ezjgic bwmyOk aje-input__segment placeholder"
             contenteditable="false"
             data-placeholder="true"
             id="react-aria-:r8g:"
@@ -1875,7 +1875,7 @@ exports[`DatePicker > matches snapshots > readonly state 1`] = `
           </div>
           <div
             aria-hidden="true"
-            class="sc-bCgoVd jAtiqP aje-input__segment"
+            class="sc-ezjgic bwmyOk aje-input__segment"
           >
             /
           </div>
@@ -1887,7 +1887,7 @@ exports[`DatePicker > matches snapshots > readonly state 1`] = `
             aria-valuemin="1"
             aria-valuenow="2024"
             aria-valuetext="Empty"
-            class="sc-bCgoVd jAtiqP aje-input__segment placeholder"
+            class="sc-ezjgic bwmyOk aje-input__segment placeholder"
             contenteditable="false"
             data-placeholder="true"
             id="react-aria-:r8k:"
@@ -1931,7 +1931,7 @@ exports[`DatePicker > matches snapshots > required state 1`] = `
     data-required="true"
   >
     <div
-      class="sc-kgohyr dcgWfH aje-datefield is-medium"
+      class="sc-iJSMbW egcThr aje-datefield is-medium"
       data-required="true"
       id="react-aria-:r7a:"
       style="min-width: var(--size-x);"
@@ -1949,10 +1949,10 @@ exports[`DatePicker > matches snapshots > required state 1`] = `
         Select a date
       </p>
       <div
-        class="sc-hHopjF lbIfIi aje-combo-input"
+        class="sc-ivKqQM dsWfek aje-combo-input"
       >
         <div
-          class="sc-fKwzVe fGeCLx aje-input__date-segments"
+          class="sc-giQkEn flCHxB aje-input__date-segments"
           id="react-aria-:r7a:"
           role="presentation"
           style="unicode-bidi: isolate;"
@@ -1967,7 +1967,7 @@ exports[`DatePicker > matches snapshots > required state 1`] = `
             aria-valuenow="3"
             aria-valuetext="Empty"
             autocorrect="off"
-            class="sc-bCgoVd jAtiqP aje-input__segment placeholder"
+            class="sc-ezjgic bwmyOk aje-input__segment placeholder"
             contenteditable="true"
             data-placeholder="true"
             enterkeyhint="next"
@@ -1982,7 +1982,7 @@ exports[`DatePicker > matches snapshots > required state 1`] = `
           </div>
           <div
             aria-hidden="true"
-            class="sc-bCgoVd jAtiqP aje-input__segment"
+            class="sc-ezjgic bwmyOk aje-input__segment"
           >
             /
           </div>
@@ -1995,7 +1995,7 @@ exports[`DatePicker > matches snapshots > required state 1`] = `
             aria-valuenow="15"
             aria-valuetext="Empty"
             autocorrect="off"
-            class="sc-bCgoVd jAtiqP aje-input__segment placeholder"
+            class="sc-ezjgic bwmyOk aje-input__segment placeholder"
             contenteditable="true"
             data-placeholder="true"
             enterkeyhint="next"
@@ -2010,7 +2010,7 @@ exports[`DatePicker > matches snapshots > required state 1`] = `
           </div>
           <div
             aria-hidden="true"
-            class="sc-bCgoVd jAtiqP aje-input__segment"
+            class="sc-ezjgic bwmyOk aje-input__segment"
           >
             /
           </div>
@@ -2023,7 +2023,7 @@ exports[`DatePicker > matches snapshots > required state 1`] = `
             aria-valuenow="2024"
             aria-valuetext="Empty"
             autocorrect="off"
-            class="sc-bCgoVd jAtiqP aje-input__segment placeholder"
+            class="sc-ezjgic bwmyOk aje-input__segment placeholder"
             contenteditable="true"
             data-placeholder="true"
             enterkeyhint="next"
@@ -2069,7 +2069,7 @@ exports[`DatePicker > matches snapshots > second granularity 1`] = `
     class="aje-date-picker"
   >
     <div
-      class="sc-kgohyr dcgWfH aje-datefield is-medium"
+      class="sc-iJSMbW egcThr aje-datefield is-medium"
       id="react-aria-:r58:"
       style="min-width: var(--size-x);"
     >
@@ -2086,10 +2086,10 @@ exports[`DatePicker > matches snapshots > second granularity 1`] = `
         Select a date
       </p>
       <div
-        class="sc-hHopjF lbIfIi aje-combo-input"
+        class="sc-ivKqQM dsWfek aje-combo-input"
       >
         <div
-          class="sc-fKwzVe fGeCLx aje-input__date-segments"
+          class="sc-giQkEn flCHxB aje-input__date-segments"
           id="react-aria-:r58:"
           role="presentation"
           style="unicode-bidi: isolate;"
@@ -2103,7 +2103,7 @@ exports[`DatePicker > matches snapshots > second granularity 1`] = `
             aria-valuenow="3"
             aria-valuetext="Empty"
             autocorrect="off"
-            class="sc-bCgoVd jAtiqP aje-input__segment placeholder"
+            class="sc-ezjgic bwmyOk aje-input__segment placeholder"
             contenteditable="true"
             data-placeholder="true"
             enterkeyhint="next"
@@ -2118,7 +2118,7 @@ exports[`DatePicker > matches snapshots > second granularity 1`] = `
           </div>
           <div
             aria-hidden="true"
-            class="sc-bCgoVd jAtiqP aje-input__segment"
+            class="sc-ezjgic bwmyOk aje-input__segment"
           >
             /
           </div>
@@ -2130,7 +2130,7 @@ exports[`DatePicker > matches snapshots > second granularity 1`] = `
             aria-valuenow="15"
             aria-valuetext="Empty"
             autocorrect="off"
-            class="sc-bCgoVd jAtiqP aje-input__segment placeholder"
+            class="sc-ezjgic bwmyOk aje-input__segment placeholder"
             contenteditable="true"
             data-placeholder="true"
             enterkeyhint="next"
@@ -2145,7 +2145,7 @@ exports[`DatePicker > matches snapshots > second granularity 1`] = `
           </div>
           <div
             aria-hidden="true"
-            class="sc-bCgoVd jAtiqP aje-input__segment"
+            class="sc-ezjgic bwmyOk aje-input__segment"
           >
             /
           </div>
@@ -2157,7 +2157,7 @@ exports[`DatePicker > matches snapshots > second granularity 1`] = `
             aria-valuenow="2024"
             aria-valuetext="Empty"
             autocorrect="off"
-            class="sc-bCgoVd jAtiqP aje-input__segment placeholder"
+            class="sc-ezjgic bwmyOk aje-input__segment placeholder"
             contenteditable="true"
             data-placeholder="true"
             enterkeyhint="next"
@@ -2172,13 +2172,13 @@ exports[`DatePicker > matches snapshots > second granularity 1`] = `
           </div>
           <div
             aria-hidden="true"
-            class="sc-bCgoVd jAtiqP aje-input__segment"
+            class="sc-ezjgic bwmyOk aje-input__segment"
           >
             , 
           </div>
           <div
             aria-hidden="true"
-            class="sc-bCgoVd jAtiqP aje-input__segment"
+            class="sc-ezjgic bwmyOk aje-input__segment"
           >
             ⁦
           </div>
@@ -2190,7 +2190,7 @@ exports[`DatePicker > matches snapshots > second granularity 1`] = `
             aria-valuenow="0"
             aria-valuetext="Empty"
             autocorrect="off"
-            class="sc-bCgoVd jAtiqP aje-input__segment placeholder"
+            class="sc-ezjgic bwmyOk aje-input__segment placeholder"
             contenteditable="true"
             data-placeholder="true"
             enterkeyhint="next"
@@ -2205,7 +2205,7 @@ exports[`DatePicker > matches snapshots > second granularity 1`] = `
           </div>
           <div
             aria-hidden="true"
-            class="sc-bCgoVd jAtiqP aje-input__segment"
+            class="sc-ezjgic bwmyOk aje-input__segment"
           >
             :
           </div>
@@ -2217,7 +2217,7 @@ exports[`DatePicker > matches snapshots > second granularity 1`] = `
             aria-valuenow="0"
             aria-valuetext="Empty"
             autocorrect="off"
-            class="sc-bCgoVd jAtiqP aje-input__segment placeholder"
+            class="sc-ezjgic bwmyOk aje-input__segment placeholder"
             contenteditable="true"
             data-placeholder="true"
             enterkeyhint="next"
@@ -2232,7 +2232,7 @@ exports[`DatePicker > matches snapshots > second granularity 1`] = `
           </div>
           <div
             aria-hidden="true"
-            class="sc-bCgoVd jAtiqP aje-input__segment"
+            class="sc-ezjgic bwmyOk aje-input__segment"
           >
             :
           </div>
@@ -2244,7 +2244,7 @@ exports[`DatePicker > matches snapshots > second granularity 1`] = `
             aria-valuenow="0"
             aria-valuetext="Empty"
             autocorrect="off"
-            class="sc-bCgoVd jAtiqP aje-input__segment placeholder"
+            class="sc-ezjgic bwmyOk aje-input__segment placeholder"
             contenteditable="true"
             data-placeholder="true"
             enterkeyhint="next"
@@ -2259,13 +2259,13 @@ exports[`DatePicker > matches snapshots > second granularity 1`] = `
           </div>
           <div
             aria-hidden="true"
-            class="sc-bCgoVd jAtiqP aje-input__segment"
+            class="sc-ezjgic bwmyOk aje-input__segment"
           >
             ⁩
           </div>
           <div
             aria-hidden="true"
-            class="sc-bCgoVd jAtiqP aje-input__segment"
+            class="sc-ezjgic bwmyOk aje-input__segment"
           >
              
           </div>
@@ -2277,7 +2277,7 @@ exports[`DatePicker > matches snapshots > second granularity 1`] = `
             aria-valuenow="0"
             aria-valuetext="Empty"
             autocorrect="off"
-            class="sc-bCgoVd jAtiqP aje-input__segment placeholder"
+            class="sc-ezjgic bwmyOk aje-input__segment placeholder"
             contenteditable="true"
             data-placeholder="true"
             enterkeyhint="next"
@@ -2322,7 +2322,7 @@ exports[`DatePicker > matches snapshots > small calendar size 1`] = `
     class="aje-date-picker"
   >
     <div
-      class="sc-kgohyr dcgWfH aje-datefield is-medium"
+      class="sc-iJSMbW egcThr aje-datefield is-medium"
       id="react-aria-:rda:"
       style="min-width: var(--size-x);"
     >
@@ -2339,10 +2339,10 @@ exports[`DatePicker > matches snapshots > small calendar size 1`] = `
         Select a date
       </p>
       <div
-        class="sc-hHopjF lbIfIi aje-combo-input"
+        class="sc-ivKqQM dsWfek aje-combo-input"
       >
         <div
-          class="sc-fKwzVe fGeCLx aje-input__date-segments"
+          class="sc-giQkEn flCHxB aje-input__date-segments"
           id="react-aria-:rda:"
           role="presentation"
           style="unicode-bidi: isolate;"
@@ -2356,7 +2356,7 @@ exports[`DatePicker > matches snapshots > small calendar size 1`] = `
             aria-valuenow="3"
             aria-valuetext="Empty"
             autocorrect="off"
-            class="sc-bCgoVd jAtiqP aje-input__segment placeholder"
+            class="sc-ezjgic bwmyOk aje-input__segment placeholder"
             contenteditable="true"
             data-placeholder="true"
             enterkeyhint="next"
@@ -2371,7 +2371,7 @@ exports[`DatePicker > matches snapshots > small calendar size 1`] = `
           </div>
           <div
             aria-hidden="true"
-            class="sc-bCgoVd jAtiqP aje-input__segment"
+            class="sc-ezjgic bwmyOk aje-input__segment"
           >
             /
           </div>
@@ -2383,7 +2383,7 @@ exports[`DatePicker > matches snapshots > small calendar size 1`] = `
             aria-valuenow="15"
             aria-valuetext="Empty"
             autocorrect="off"
-            class="sc-bCgoVd jAtiqP aje-input__segment placeholder"
+            class="sc-ezjgic bwmyOk aje-input__segment placeholder"
             contenteditable="true"
             data-placeholder="true"
             enterkeyhint="next"
@@ -2398,7 +2398,7 @@ exports[`DatePicker > matches snapshots > small calendar size 1`] = `
           </div>
           <div
             aria-hidden="true"
-            class="sc-bCgoVd jAtiqP aje-input__segment"
+            class="sc-ezjgic bwmyOk aje-input__segment"
           >
             /
           </div>
@@ -2410,7 +2410,7 @@ exports[`DatePicker > matches snapshots > small calendar size 1`] = `
             aria-valuenow="2024"
             aria-valuetext="Empty"
             autocorrect="off"
-            class="sc-bCgoVd jAtiqP aje-input__segment placeholder"
+            class="sc-ezjgic bwmyOk aje-input__segment placeholder"
             contenteditable="true"
             data-placeholder="true"
             enterkeyhint="next"
@@ -2456,7 +2456,7 @@ exports[`DatePicker > matches snapshots > small size 1`] = `
     class="aje-date-picker is-small"
   >
     <div
-      class="sc-kgohyr dcgWfH aje-datefield is-small"
+      class="sc-iJSMbW egcThr aje-datefield is-small"
       id="react-aria-:rb5:"
       style="min-width: var(--size-x);"
     >
@@ -2473,10 +2473,10 @@ exports[`DatePicker > matches snapshots > small size 1`] = `
         Select a date
       </p>
       <div
-        class="sc-hHopjF lbIfIi aje-combo-input"
+        class="sc-ivKqQM dsWfek aje-combo-input"
       >
         <div
-          class="sc-fKwzVe fGeCLx aje-input__date-segments"
+          class="sc-giQkEn flCHxB aje-input__date-segments"
           id="react-aria-:rb5:"
           role="presentation"
           style="unicode-bidi: isolate;"
@@ -2490,7 +2490,7 @@ exports[`DatePicker > matches snapshots > small size 1`] = `
             aria-valuenow="3"
             aria-valuetext="Empty"
             autocorrect="off"
-            class="sc-bCgoVd jAtiqP aje-input__segment placeholder"
+            class="sc-ezjgic bwmyOk aje-input__segment placeholder"
             contenteditable="true"
             data-placeholder="true"
             enterkeyhint="next"
@@ -2505,7 +2505,7 @@ exports[`DatePicker > matches snapshots > small size 1`] = `
           </div>
           <div
             aria-hidden="true"
-            class="sc-bCgoVd jAtiqP aje-input__segment"
+            class="sc-ezjgic bwmyOk aje-input__segment"
           >
             /
           </div>
@@ -2517,7 +2517,7 @@ exports[`DatePicker > matches snapshots > small size 1`] = `
             aria-valuenow="15"
             aria-valuetext="Empty"
             autocorrect="off"
-            class="sc-bCgoVd jAtiqP aje-input__segment placeholder"
+            class="sc-ezjgic bwmyOk aje-input__segment placeholder"
             contenteditable="true"
             data-placeholder="true"
             enterkeyhint="next"
@@ -2532,7 +2532,7 @@ exports[`DatePicker > matches snapshots > small size 1`] = `
           </div>
           <div
             aria-hidden="true"
-            class="sc-bCgoVd jAtiqP aje-input__segment"
+            class="sc-ezjgic bwmyOk aje-input__segment"
           >
             /
           </div>
@@ -2544,7 +2544,7 @@ exports[`DatePicker > matches snapshots > small size 1`] = `
             aria-valuenow="2024"
             aria-valuetext="Empty"
             autocorrect="off"
-            class="sc-bCgoVd jAtiqP aje-input__segment placeholder"
+            class="sc-ezjgic bwmyOk aje-input__segment placeholder"
             contenteditable="true"
             data-placeholder="true"
             enterkeyhint="next"
@@ -2590,7 +2590,7 @@ exports[`DatePicker > matches snapshots > with default value 1`] = `
     class="aje-date-picker"
   >
     <div
-      class="sc-kgohyr dcgWfH aje-datefield is-medium"
+      class="sc-iJSMbW egcThr aje-datefield is-medium"
       id="react-aria-:r1g:"
       style="min-width: var(--size-x);"
     >
@@ -2607,10 +2607,10 @@ exports[`DatePicker > matches snapshots > with default value 1`] = `
         Select a date
       </p>
       <div
-        class="sc-hHopjF lbIfIi aje-combo-input"
+        class="sc-ivKqQM dsWfek aje-combo-input"
       >
         <div
-          class="sc-fKwzVe fGeCLx aje-input__date-segments"
+          class="sc-giQkEn flCHxB aje-input__date-segments"
           id="react-aria-:r1g:"
           role="presentation"
           style="unicode-bidi: isolate;"
@@ -2624,7 +2624,7 @@ exports[`DatePicker > matches snapshots > with default value 1`] = `
             aria-valuenow="12"
             aria-valuetext="12 – December"
             autocorrect="off"
-            class="sc-bCgoVd jAtiqP aje-input__segment"
+            class="sc-ezjgic bwmyOk aje-input__segment"
             contenteditable="true"
             enterkeyhint="next"
             id="react-aria-:r1r:"
@@ -2638,7 +2638,7 @@ exports[`DatePicker > matches snapshots > with default value 1`] = `
           </div>
           <div
             aria-hidden="true"
-            class="sc-bCgoVd jAtiqP aje-input__segment"
+            class="sc-ezjgic bwmyOk aje-input__segment"
           >
             /
           </div>
@@ -2650,7 +2650,7 @@ exports[`DatePicker > matches snapshots > with default value 1`] = `
             aria-valuenow="25"
             aria-valuetext="25"
             autocorrect="off"
-            class="sc-bCgoVd jAtiqP aje-input__segment"
+            class="sc-ezjgic bwmyOk aje-input__segment"
             contenteditable="true"
             enterkeyhint="next"
             id="react-aria-:r1v:"
@@ -2664,7 +2664,7 @@ exports[`DatePicker > matches snapshots > with default value 1`] = `
           </div>
           <div
             aria-hidden="true"
-            class="sc-bCgoVd jAtiqP aje-input__segment"
+            class="sc-ezjgic bwmyOk aje-input__segment"
           >
             /
           </div>
@@ -2676,7 +2676,7 @@ exports[`DatePicker > matches snapshots > with default value 1`] = `
             aria-valuenow="2023"
             aria-valuetext="2023"
             autocorrect="off"
-            class="sc-bCgoVd jAtiqP aje-input__segment"
+            class="sc-ezjgic bwmyOk aje-input__segment"
             contenteditable="true"
             enterkeyhint="next"
             id="react-aria-:r23:"
@@ -2721,7 +2721,7 @@ exports[`DatePicker > matches snapshots > with leading zeros 1`] = `
     class="aje-date-picker"
   >
     <div
-      class="sc-kgohyr dcgWfH aje-datefield is-medium"
+      class="sc-iJSMbW egcThr aje-datefield is-medium"
       id="react-aria-:r9f:"
       style="min-width: var(--size-x);"
     >
@@ -2738,10 +2738,10 @@ exports[`DatePicker > matches snapshots > with leading zeros 1`] = `
         Select a date
       </p>
       <div
-        class="sc-hHopjF lbIfIi aje-combo-input"
+        class="sc-ivKqQM dsWfek aje-combo-input"
       >
         <div
-          class="sc-fKwzVe fGeCLx aje-input__date-segments"
+          class="sc-giQkEn flCHxB aje-input__date-segments"
           id="react-aria-:r9f:"
           role="presentation"
           style="unicode-bidi: isolate;"
@@ -2755,7 +2755,7 @@ exports[`DatePicker > matches snapshots > with leading zeros 1`] = `
             aria-valuenow="3"
             aria-valuetext="Empty"
             autocorrect="off"
-            class="sc-bCgoVd jAtiqP aje-input__segment placeholder"
+            class="sc-ezjgic bwmyOk aje-input__segment placeholder"
             contenteditable="true"
             data-placeholder="true"
             enterkeyhint="next"
@@ -2770,7 +2770,7 @@ exports[`DatePicker > matches snapshots > with leading zeros 1`] = `
           </div>
           <div
             aria-hidden="true"
-            class="sc-bCgoVd jAtiqP aje-input__segment"
+            class="sc-ezjgic bwmyOk aje-input__segment"
           >
             /
           </div>
@@ -2782,7 +2782,7 @@ exports[`DatePicker > matches snapshots > with leading zeros 1`] = `
             aria-valuenow="15"
             aria-valuetext="Empty"
             autocorrect="off"
-            class="sc-bCgoVd jAtiqP aje-input__segment placeholder"
+            class="sc-ezjgic bwmyOk aje-input__segment placeholder"
             contenteditable="true"
             data-placeholder="true"
             enterkeyhint="next"
@@ -2797,7 +2797,7 @@ exports[`DatePicker > matches snapshots > with leading zeros 1`] = `
           </div>
           <div
             aria-hidden="true"
-            class="sc-bCgoVd jAtiqP aje-input__segment"
+            class="sc-ezjgic bwmyOk aje-input__segment"
           >
             /
           </div>
@@ -2809,7 +2809,7 @@ exports[`DatePicker > matches snapshots > with leading zeros 1`] = `
             aria-valuenow="2024"
             aria-valuetext="Empty"
             autocorrect="off"
-            class="sc-bCgoVd jAtiqP aje-input__segment placeholder"
+            class="sc-ezjgic bwmyOk aje-input__segment placeholder"
             contenteditable="true"
             data-placeholder="true"
             enterkeyhint="next"
@@ -2855,7 +2855,7 @@ exports[`DatePicker > matches snapshots > with min and max values 1`] = `
     class="aje-date-picker"
   >
     <div
-      class="sc-kgohyr dcgWfH aje-datefield is-medium"
+      class="sc-iJSMbW egcThr aje-datefield is-medium"
       id="react-aria-:rff:"
       style="min-width: var(--size-x);"
     >
@@ -2872,10 +2872,10 @@ exports[`DatePicker > matches snapshots > with min and max values 1`] = `
         Select a date
       </p>
       <div
-        class="sc-hHopjF lbIfIi aje-combo-input"
+        class="sc-ivKqQM dsWfek aje-combo-input"
       >
         <div
-          class="sc-fKwzVe fGeCLx aje-input__date-segments"
+          class="sc-giQkEn flCHxB aje-input__date-segments"
           id="react-aria-:rff:"
           role="presentation"
           style="unicode-bidi: isolate;"
@@ -2889,7 +2889,7 @@ exports[`DatePicker > matches snapshots > with min and max values 1`] = `
             aria-valuenow="3"
             aria-valuetext="Empty"
             autocorrect="off"
-            class="sc-bCgoVd jAtiqP aje-input__segment placeholder"
+            class="sc-ezjgic bwmyOk aje-input__segment placeholder"
             contenteditable="true"
             data-placeholder="true"
             enterkeyhint="next"
@@ -2904,7 +2904,7 @@ exports[`DatePicker > matches snapshots > with min and max values 1`] = `
           </div>
           <div
             aria-hidden="true"
-            class="sc-bCgoVd jAtiqP aje-input__segment"
+            class="sc-ezjgic bwmyOk aje-input__segment"
           >
             /
           </div>
@@ -2916,7 +2916,7 @@ exports[`DatePicker > matches snapshots > with min and max values 1`] = `
             aria-valuenow="15"
             aria-valuetext="Empty"
             autocorrect="off"
-            class="sc-bCgoVd jAtiqP aje-input__segment placeholder"
+            class="sc-ezjgic bwmyOk aje-input__segment placeholder"
             contenteditable="true"
             data-placeholder="true"
             enterkeyhint="next"
@@ -2931,7 +2931,7 @@ exports[`DatePicker > matches snapshots > with min and max values 1`] = `
           </div>
           <div
             aria-hidden="true"
-            class="sc-bCgoVd jAtiqP aje-input__segment"
+            class="sc-ezjgic bwmyOk aje-input__segment"
           >
             /
           </div>
@@ -2943,7 +2943,7 @@ exports[`DatePicker > matches snapshots > with min and max values 1`] = `
             aria-valuenow="2024"
             aria-valuetext="Empty"
             autocorrect="off"
-            class="sc-bCgoVd jAtiqP aje-input__segment placeholder"
+            class="sc-ezjgic bwmyOk aje-input__segment placeholder"
             contenteditable="true"
             data-placeholder="true"
             enterkeyhint="next"
@@ -2989,7 +2989,7 @@ exports[`DatePicker > matches snapshots > with value 1`] = `
     class="aje-date-picker"
   >
     <div
-      class="sc-kgohyr dcgWfH aje-datefield is-medium"
+      class="sc-iJSMbW egcThr aje-datefield is-medium"
       id="react-aria-:rp:"
       style="min-width: var(--size-x);"
     >
@@ -3006,10 +3006,10 @@ exports[`DatePicker > matches snapshots > with value 1`] = `
         Select a date
       </p>
       <div
-        class="sc-hHopjF lbIfIi aje-combo-input"
+        class="sc-ivKqQM dsWfek aje-combo-input"
       >
         <div
-          class="sc-fKwzVe fGeCLx aje-input__date-segments"
+          class="sc-giQkEn flCHxB aje-input__date-segments"
           id="react-aria-:rp:"
           role="presentation"
           style="unicode-bidi: isolate;"
@@ -3023,7 +3023,7 @@ exports[`DatePicker > matches snapshots > with value 1`] = `
             aria-valuenow="1"
             aria-valuetext="1 – January"
             autocorrect="off"
-            class="sc-bCgoVd jAtiqP aje-input__segment"
+            class="sc-ezjgic bwmyOk aje-input__segment"
             contenteditable="true"
             enterkeyhint="next"
             id="react-aria-:r14:"
@@ -3037,7 +3037,7 @@ exports[`DatePicker > matches snapshots > with value 1`] = `
           </div>
           <div
             aria-hidden="true"
-            class="sc-bCgoVd jAtiqP aje-input__segment"
+            class="sc-ezjgic bwmyOk aje-input__segment"
           >
             /
           </div>
@@ -3049,7 +3049,7 @@ exports[`DatePicker > matches snapshots > with value 1`] = `
             aria-valuenow="15"
             aria-valuetext="15"
             autocorrect="off"
-            class="sc-bCgoVd jAtiqP aje-input__segment"
+            class="sc-ezjgic bwmyOk aje-input__segment"
             contenteditable="true"
             enterkeyhint="next"
             id="react-aria-:r18:"
@@ -3063,7 +3063,7 @@ exports[`DatePicker > matches snapshots > with value 1`] = `
           </div>
           <div
             aria-hidden="true"
-            class="sc-bCgoVd jAtiqP aje-input__segment"
+            class="sc-ezjgic bwmyOk aje-input__segment"
           >
             /
           </div>
@@ -3075,7 +3075,7 @@ exports[`DatePicker > matches snapshots > with value 1`] = `
             aria-valuenow="2023"
             aria-valuetext="2023"
             autocorrect="off"
-            class="sc-bCgoVd jAtiqP aje-input__segment"
+            class="sc-ezjgic bwmyOk aje-input__segment"
             contenteditable="true"
             enterkeyhint="next"
             id="react-aria-:r1c:"
@@ -3120,7 +3120,7 @@ exports[`DatePicker > matches snapshots > without error 1`] = `
     class="aje-date-picker"
   >
     <div
-      class="sc-kgohyr dcgWfH aje-datefield is-medium"
+      class="sc-iJSMbW egcThr aje-datefield is-medium"
       id="react-aria-:rhk:"
       style="min-width: var(--size-x);"
     >
@@ -3137,10 +3137,10 @@ exports[`DatePicker > matches snapshots > without error 1`] = `
         Select a date
       </p>
       <div
-        class="sc-hHopjF lbIfIi aje-combo-input"
+        class="sc-ivKqQM dsWfek aje-combo-input"
       >
         <div
-          class="sc-fKwzVe fGeCLx aje-input__date-segments"
+          class="sc-giQkEn flCHxB aje-input__date-segments"
           id="react-aria-:rhk:"
           role="presentation"
           style="unicode-bidi: isolate;"
@@ -3154,7 +3154,7 @@ exports[`DatePicker > matches snapshots > without error 1`] = `
             aria-valuenow="3"
             aria-valuetext="Empty"
             autocorrect="off"
-            class="sc-bCgoVd jAtiqP aje-input__segment placeholder"
+            class="sc-ezjgic bwmyOk aje-input__segment placeholder"
             contenteditable="true"
             data-placeholder="true"
             enterkeyhint="next"
@@ -3169,7 +3169,7 @@ exports[`DatePicker > matches snapshots > without error 1`] = `
           </div>
           <div
             aria-hidden="true"
-            class="sc-bCgoVd jAtiqP aje-input__segment"
+            class="sc-ezjgic bwmyOk aje-input__segment"
           >
             /
           </div>
@@ -3181,7 +3181,7 @@ exports[`DatePicker > matches snapshots > without error 1`] = `
             aria-valuenow="15"
             aria-valuetext="Empty"
             autocorrect="off"
-            class="sc-bCgoVd jAtiqP aje-input__segment placeholder"
+            class="sc-ezjgic bwmyOk aje-input__segment placeholder"
             contenteditable="true"
             data-placeholder="true"
             enterkeyhint="next"
@@ -3196,7 +3196,7 @@ exports[`DatePicker > matches snapshots > without error 1`] = `
           </div>
           <div
             aria-hidden="true"
-            class="sc-bCgoVd jAtiqP aje-input__segment"
+            class="sc-ezjgic bwmyOk aje-input__segment"
           >
             /
           </div>
@@ -3208,7 +3208,7 @@ exports[`DatePicker > matches snapshots > without error 1`] = `
             aria-valuenow="2024"
             aria-valuetext="Empty"
             autocorrect="off"
-            class="sc-bCgoVd jAtiqP aje-input__segment placeholder"
+            class="sc-ezjgic bwmyOk aje-input__segment placeholder"
             contenteditable="true"
             data-placeholder="true"
             enterkeyhint="next"
@@ -3254,7 +3254,7 @@ exports[`DatePicker > matches snapshots > without label 1`] = `
     class="aje-date-picker"
   >
     <div
-      class="sc-kgohyr dcgWfH aje-datefield is-medium"
+      class="sc-iJSMbW egcThr aje-datefield is-medium"
       id="react-aria-:rg6:"
       style="min-width: var(--size-x);"
     >
@@ -3269,10 +3269,10 @@ exports[`DatePicker > matches snapshots > without label 1`] = `
         Select a date
       </p>
       <div
-        class="sc-hHopjF lbIfIi aje-combo-input"
+        class="sc-ivKqQM dsWfek aje-combo-input"
       >
         <div
-          class="sc-fKwzVe fGeCLx aje-input__date-segments"
+          class="sc-giQkEn flCHxB aje-input__date-segments"
           id="react-aria-:rg6:"
           role="presentation"
           style="unicode-bidi: isolate;"
@@ -3286,7 +3286,7 @@ exports[`DatePicker > matches snapshots > without label 1`] = `
             aria-valuenow="3"
             aria-valuetext="Empty"
             autocorrect="off"
-            class="sc-bCgoVd jAtiqP aje-input__segment placeholder"
+            class="sc-ezjgic bwmyOk aje-input__segment placeholder"
             contenteditable="true"
             data-placeholder="true"
             enterkeyhint="next"
@@ -3301,7 +3301,7 @@ exports[`DatePicker > matches snapshots > without label 1`] = `
           </div>
           <div
             aria-hidden="true"
-            class="sc-bCgoVd jAtiqP aje-input__segment"
+            class="sc-ezjgic bwmyOk aje-input__segment"
           >
             /
           </div>
@@ -3313,7 +3313,7 @@ exports[`DatePicker > matches snapshots > without label 1`] = `
             aria-valuenow="15"
             aria-valuetext="Empty"
             autocorrect="off"
-            class="sc-bCgoVd jAtiqP aje-input__segment placeholder"
+            class="sc-ezjgic bwmyOk aje-input__segment placeholder"
             contenteditable="true"
             data-placeholder="true"
             enterkeyhint="next"
@@ -3328,7 +3328,7 @@ exports[`DatePicker > matches snapshots > without label 1`] = `
           </div>
           <div
             aria-hidden="true"
-            class="sc-bCgoVd jAtiqP aje-input__segment"
+            class="sc-ezjgic bwmyOk aje-input__segment"
           >
             /
           </div>
@@ -3340,7 +3340,7 @@ exports[`DatePicker > matches snapshots > without label 1`] = `
             aria-valuenow="2024"
             aria-valuetext="Empty"
             autocorrect="off"
-            class="sc-bCgoVd jAtiqP aje-input__segment placeholder"
+            class="sc-ezjgic bwmyOk aje-input__segment placeholder"
             contenteditable="true"
             data-placeholder="true"
             enterkeyhint="next"
@@ -3386,7 +3386,7 @@ exports[`DatePicker > matches snapshots > without message 1`] = `
     class="aje-date-picker"
   >
     <div
-      class="sc-kgohyr dcgWfH aje-datefield is-medium"
+      class="sc-iJSMbW egcThr aje-datefield is-medium"
       id="react-aria-:rgt:"
       style="min-width: var(--size-x);"
     >
@@ -3397,10 +3397,10 @@ exports[`DatePicker > matches snapshots > without message 1`] = `
         Date Picker
       </label>
       <div
-        class="sc-hHopjF lbIfIi aje-combo-input"
+        class="sc-ivKqQM dsWfek aje-combo-input"
       >
         <div
-          class="sc-fKwzVe fGeCLx aje-input__date-segments"
+          class="sc-giQkEn flCHxB aje-input__date-segments"
           id="react-aria-:rgt:"
           role="presentation"
           style="unicode-bidi: isolate;"
@@ -3413,7 +3413,7 @@ exports[`DatePicker > matches snapshots > without message 1`] = `
             aria-valuenow="3"
             aria-valuetext="Empty"
             autocorrect="off"
-            class="sc-bCgoVd jAtiqP aje-input__segment placeholder"
+            class="sc-ezjgic bwmyOk aje-input__segment placeholder"
             contenteditable="true"
             data-placeholder="true"
             enterkeyhint="next"
@@ -3428,7 +3428,7 @@ exports[`DatePicker > matches snapshots > without message 1`] = `
           </div>
           <div
             aria-hidden="true"
-            class="sc-bCgoVd jAtiqP aje-input__segment"
+            class="sc-ezjgic bwmyOk aje-input__segment"
           >
             /
           </div>
@@ -3440,7 +3440,7 @@ exports[`DatePicker > matches snapshots > without message 1`] = `
             aria-valuenow="15"
             aria-valuetext="Empty"
             autocorrect="off"
-            class="sc-bCgoVd jAtiqP aje-input__segment placeholder"
+            class="sc-ezjgic bwmyOk aje-input__segment placeholder"
             contenteditable="true"
             data-placeholder="true"
             enterkeyhint="next"
@@ -3455,7 +3455,7 @@ exports[`DatePicker > matches snapshots > without message 1`] = `
           </div>
           <div
             aria-hidden="true"
-            class="sc-bCgoVd jAtiqP aje-input__segment"
+            class="sc-ezjgic bwmyOk aje-input__segment"
           >
             /
           </div>
@@ -3467,7 +3467,7 @@ exports[`DatePicker > matches snapshots > without message 1`] = `
             aria-valuenow="2024"
             aria-valuetext="Empty"
             autocorrect="off"
-            class="sc-bCgoVd jAtiqP aje-input__segment placeholder"
+            class="sc-ezjgic bwmyOk aje-input__segment placeholder"
             contenteditable="true"
             data-placeholder="true"
             enterkeyhint="next"
diff --git a/packages/atomic-elements/src/components/Inputs/RadioGroup/__snapshots__/RadioGroup.spec.tsx.snap b/packages/atomic-elements/src/components/Inputs/RadioGroup/__snapshots__/RadioGroup.spec.tsx.snap
index a1169727d..8fe72c5c8 100644
--- a/packages/atomic-elements/src/components/Inputs/RadioGroup/__snapshots__/RadioGroup.spec.tsx.snap
+++ b/packages/atomic-elements/src/components/Inputs/RadioGroup/__snapshots__/RadioGroup.spec.tsx.snap
@@ -5,63 +5,63 @@ exports[`matches snapshot 1`] = `
   <fieldset
     aria-labelledby="react-aria-:r1:"
     aria-orientation="vertical"
-    class="sc-dkXsAU cXvGZw aje-radio-group"
+    class="sc-iCECmn hcaOQf aje-radio-group"
     id="react-aria-:r0:"
     name="radiogroup"
     role="radiogroup"
   >
     <legend
-      class="sc-hKVpXn btlNHk"
+      class="sc-fuztkK dZgNGq"
       id="react-aria-:r1:"
     >
       Label
     </legend>
     <div
-      class="sc-gtcBCx dvHqTg aje-radio"
+      class="sc-gKkgUA fWPtmk aje-radio"
       data-selected="true"
     >
       <input
         checked=""
-        class="sc-kgohyr kuZEsr"
+        class="sc-ezjgic bKLnNL"
         name="radiogroup"
         tabindex="0"
         type="radio"
         value="opt1"
       />
       <span
-        class="sc-bdDsCe imHgRD aje-checkbox__label"
+        class="sc-jSppWd crseom aje-checkbox__label"
       >
         Option 1
       </span>
     </div>
     <div
-      class="sc-gtcBCx dvHqTg aje-radio"
+      class="sc-gKkgUA fWPtmk aje-radio"
     >
       <input
-        class="sc-kgohyr kuZEsr"
+        class="sc-ezjgic bKLnNL"
         name="radiogroup"
         tabindex="-1"
         type="radio"
         value="opt2"
       />
       <span
-        class="sc-bdDsCe imHgRD aje-checkbox__label"
+        class="sc-jSppWd crseom aje-checkbox__label"
       >
         Option 2
       </span>
     </div>
     <div
-      class="sc-gtcBCx dvHqTg aje-radio"
+      class="sc-gKkgUA fWPtmk aje-radio"
     >
       <input
-        class="sc-kgohyr kuZEsr"
+        class="sc-ezjgic bKLnNL"
         name="radiogroup"
         tabindex="-1"
         type="radio"
         value="opt3"
       />
       <span
-        class="sc-bdDsCe imHgRD aje-checkbox__label"
+        class="sc-jSppWd crseom aje-checkbox__label"
       >
         Option 3
       </span>
diff --git a/packages/atomic-elements/src/components/Inputs/SearchInput/__snapshots__/SearchInput.spec.tsx.snap b/packages/atomic-elements/src/components/Inputs/SearchInput/__snapshots__/SearchInput.spec.tsx.snap
index 43029f4f8..ff82fc633 100644
--- a/packages/atomic-elements/src/components/Inputs/SearchInput/__snapshots__/SearchInput.spec.tsx.snap
+++ b/packages/atomic-elements/src/components/Inputs/SearchInput/__snapshots__/SearchInput.spec.tsx.snap
@@ -3,21 +3,20 @@
 exports[`matches snapshot > displays with search button 1`] = `
 <DocumentFragment>
   <div
-    class="sc-gKkgUA kDJWYP aje-field__search is-medium"
+    class="sc-iqkkDd kdRpNH aje-field__search is-medium"
   >
     <label
       class="sc-bdDsCe bLPJOA"
-      for="react-aria-:r5:"
       id="react-aria-:r6:"
     >
       search
     </label>
     <div
-      class="sc-eCQgVK lhFnxc aje-combo-input"
+      class="sc-qdQOe kPUMiD aje-combo-input"
     >
       <input
         aria-labelledby="react-aria-:r6:"
-        class="sc-hKVpXn ecqUOI"
+        class="sc-gKkgUA bzpolP"
         id="react-aria-:r5:"
         tabindex="0"
         type="search"
@@ -25,14 +24,14 @@ exports[`matches snapshot > displays with search button 1`] = `
       />
       <button
         aria-label="search"
-        class="sc-fuztkK sc-qdQOe fTXzHK iFSkaa aje-btn aje-icon-btn aje-btn--content is-medium"
+        class="sc-dYjPD sc-bqqMSY hHQCzc dIQBXN aje-btn aje-icon-btn aje-btn--content is-medium"
         data-icon-button="true"
         tabindex="0"
         type="button"
       >
         <i
           aria-hidden="true"
-          class="sc-iCECmn erxnfb aje-icon material-icons is-medium"
+          class="sc-crPgjm bIBcHh aje-icon material-icons is-medium"
         >
           search
         </i>
@@ -45,21 +44,20 @@ exports[`matches snapshot > displays with search button 1`] = `
 exports[`matches snapshot > displays without button 1`] = `
 <DocumentFragment>
   <div
-    class="sc-gKkgUA kDJWYP aje-field__search is-medium"
+    class="sc-iqkkDd kdRpNH aje-field__search is-medium"
   >
     <label
       class="sc-bdDsCe bLPJOA"
-      for="react-aria-:r0:"
       id="react-aria-:r1:"
     >
       search
     </label>
     <div
-      class="sc-eCQgVK lhFnxc aje-combo-input"
+      class="sc-qdQOe kPUMiD aje-combo-input"
     >
       <input
         aria-labelledby="react-aria-:r1:"
-        class="sc-hKVpXn ecqUOI"
+        class="sc-gKkgUA bzpolP"
         id="react-aria-:r0:"
         tabindex="0"
         type="search"
@@ -67,14 +65,14 @@ exports[`matches snapshot > displays without button 1`] = `
       />
       <button
         aria-label="search"
-        class="sc-fuztkK sc-qdQOe fTXzHK iFSkaa aje-btn aje-icon-btn aje-btn--content is-medium"
+        class="sc-dYjPD sc-bqqMSY hHQCzc dIQBXN aje-btn aje-icon-btn aje-btn--content is-medium"
         data-icon-button="true"
         tabindex="0"
         type="button"
       >
         <i
           aria-hidden="true"
-          class="sc-iCECmn erxnfb aje-icon material-icons is-medium"
+          class="sc-crPgjm bIBcHh aje-icon material-icons is-medium"
         >
           search
         </i>
diff --git a/packages/atomic-elements/src/components/Inputs/TextAreaInput/__snapshots__/TextAreaInput.spec.tsx.snap b/packages/atomic-elements/src/components/Inputs/TextAreaInput/__snapshots__/TextAreaInput.spec.tsx.snap
index b237b3811..418c7efc8 100644
--- a/packages/atomic-elements/src/components/Inputs/TextAreaInput/__snapshots__/TextAreaInput.spec.tsx.snap
+++ b/packages/atomic-elements/src/components/Inputs/TextAreaInput/__snapshots__/TextAreaInput.spec.tsx.snap
@@ -3,19 +3,18 @@
 exports[`TextAreaInput > matches snapshot 1`] = `
 <DocumentFragment>
   <div
-    class="sc-gKkgUA kDJWYP aje-input__text sc-bjLslk eZYAlJ aje-input__textarea is-medium"
+    class="sc-iqkkDd kdRpNH aje-input__text sc-fKwzVe kZFxGS aje-input__textarea is-medium"
     data-resize="both"
   >
     <label
       class="sc-bdDsCe bLPJOA"
-      for="react-aria-:r0:"
       id="react-aria-:r1:"
     >
       label
     </label>
     <textarea
       aria-labelledby="react-aria-:r1:"
-      class="sc-jSppWd iwpqdX"
+      class="sc-kEbgWM beNCco"
       data-resize="both"
       id="react-aria-:r0:"
       tabindex="0"
diff --git a/packages/atomic-elements/src/components/Inputs/TextInput/__snapshots__/TextInput.spec.tsx.snap b/packages/atomic-elements/src/components/Inputs/TextInput/__snapshots__/TextInput.spec.tsx.snap
index a5918449d..420d34581 100644
--- a/packages/atomic-elements/src/components/Inputs/TextInput/__snapshots__/TextInput.spec.tsx.snap
+++ b/packages/atomic-elements/src/components/Inputs/TextInput/__snapshots__/TextInput.spec.tsx.snap
@@ -3,12 +3,11 @@
 exports[`matches snapshot > default variant 1`] = `
 <DocumentFragment>
   <div
-    class="sc-gKkgUA kDJWYP aje-input__text sc-bjLslk dKimQG aje-input--default is-medium"
+    class="sc-iqkkDd kdRpNH aje-input__text sc-fKwzVe gSKwJm aje-input--default is-medium"
     data-has-value="true"
   >
     <label
       class="sc-bdDsCe bLPJOA"
-      for="react-aria-:r0:"
       id="react-aria-:r1:"
     >
       Text Label
@@ -22,7 +21,7 @@ exports[`matches snapshot > default variant 1`] = `
     <input
       aria-describedby="react-aria-:r3:"
       aria-labelledby="react-aria-:r1:"
-      class="sc-hKVpXn ecqUOI"
+      class="sc-gKkgUA bzpolP"
       id="react-aria-:r0:"
       placeholder="placeholder"
       tabindex="0"
@@ -36,16 +35,16 @@ exports[`matches snapshot > default variant 1`] = `
 exports[`matches snapshot > floating variant 1`] = `
 <DocumentFragment>
   <div
-    class="sc-gKkgUA kDJWYP aje-input__text sc-bjLslk dKimQG aje-input--floating is-medium"
+    class="sc-iqkkDd kdRpNH aje-input__text sc-fKwzVe gSKwJm aje-input--floating is-medium"
     data-has-value="true"
   >
     <div
-      class="sc-hHopjF hsjTPt"
+      class="sc-cxxQMU gZUQNc"
     >
       <input
         aria-describedby="react-aria-:r8:"
         aria-labelledby="react-aria-:r6:"
-        class="sc-hKVpXn ecqUOI"
+        class="sc-gKkgUA bzpolP"
         id="react-aria-:r5:"
         placeholder="placeholder"
         tabindex="0"
@@ -54,7 +53,6 @@ exports[`matches snapshot > floating variant 1`] = `
       />
       <label
         class="sc-bdDsCe bLPJOA"
-        for="react-aria-:r5:"
         id="react-aria-:r6:"
       >
         Text Label

From 142d3fb1064184579850b8b8f25ff102c08c8507 Mon Sep 17 00:00:00 2001
From: Sean Collings <sean.collings@atomicjolt.com>
Date: Thu, 17 Sep 2026 10:42:01 -0600
Subject: [PATCH 7/8] Potential fix for pull request finding

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
---
 .../components/Fields/Atoms/Label/Label.component.tsx  | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/packages/atomic-elements/src/components/Fields/Atoms/Label/Label.component.tsx b/packages/atomic-elements/src/components/Fields/Atoms/Label/Label.component.tsx
index 82b9db1b8..b9c6f1384 100644
--- a/packages/atomic-elements/src/components/Fields/Atoms/Label/Label.component.tsx
+++ b/packages/atomic-elements/src/components/Fields/Atoms/Label/Label.component.tsx
@@ -38,9 +38,13 @@ export const Label = React.forwardRef(function Label(
     size,
   });
 
-  return (
-    <StyledLabel as={as} ref={ref} {...renderProps} {...filterDOMProps(rest)}>
+    <StyledLabel
+      as={as}
+      ref={ref}
+      {...renderProps}
+      {...filterDOMProps(rest)}
+      htmlFor={rest.htmlFor}
+    >
       {children}
     </StyledLabel>
-  );
 });

From 14a2d193c472c7e65c65acbe31d7d12410e9f037 Mon Sep 17 00:00:00 2001
From: Sean Collings <sean.collings@atomicjolt.com>
Date: Thu, 17 Sep 2026 10:49:00 -0600
Subject: [PATCH 8/8] fix: ensure hmtlFor prop is passed down to element in
 Label

---
 .../Dropdowns/Combobox/__snapshots__/Combobox.spec.tsx.snap     | 2 ++
 .../MultiSelect/__snapshots__/MultiSelect.spec.tsx.snap         | 2 ++
 .../Dropdowns/Select/__snapshots__/Select.spec.tsx.snap         | 1 +
 .../src/components/Fields/Atoms/Label/Label.component.tsx       | 2 ++
 .../Inputs/SearchInput/__snapshots__/SearchInput.spec.tsx.snap  | 2 ++
 .../TextAreaInput/__snapshots__/TextAreaInput.spec.tsx.snap     | 1 +
 .../Inputs/TextInput/__snapshots__/TextInput.spec.tsx.snap      | 2 ++
 7 files changed, 12 insertions(+)

diff --git a/packages/atomic-elements/src/components/Dropdowns/Combobox/__snapshots__/Combobox.spec.tsx.snap b/packages/atomic-elements/src/components/Dropdowns/Combobox/__snapshots__/Combobox.spec.tsx.snap
index 6ca90afa3..704178eaa 100644
--- a/packages/atomic-elements/src/components/Dropdowns/Combobox/__snapshots__/Combobox.spec.tsx.snap
+++ b/packages/atomic-elements/src/components/Dropdowns/Combobox/__snapshots__/Combobox.spec.tsx.snap
@@ -10,6 +10,7 @@ exports[`matches snapshots > matches default variant 1`] = `
   >
     <label
       class="sc-crPgjm gzYIYu"
+      for="react-aria-:r3:"
       id="react-aria-:r4:"
     >
       Text Label
@@ -111,6 +112,7 @@ exports[`matches snapshots > matches floating variant 1`] = `
       </div>
       <label
         class="sc-crPgjm gzYIYu"
+        for="react-aria-:rd:"
         id="react-aria-:re:"
       >
         Text Label
diff --git a/packages/atomic-elements/src/components/Dropdowns/MultiSelect/__snapshots__/MultiSelect.spec.tsx.snap b/packages/atomic-elements/src/components/Dropdowns/MultiSelect/__snapshots__/MultiSelect.spec.tsx.snap
index 969f1212a..a9c3af0f9 100644
--- a/packages/atomic-elements/src/components/Dropdowns/MultiSelect/__snapshots__/MultiSelect.spec.tsx.snap
+++ b/packages/atomic-elements/src/components/Dropdowns/MultiSelect/__snapshots__/MultiSelect.spec.tsx.snap
@@ -10,6 +10,7 @@ exports[`MultiSelect > matches default variant 1`] = `
   >
     <label
       class="sc-dkXsAU bCsPXP"
+      for="react-aria-:r2:"
       id="react-aria-:r3:"
     >
       label
@@ -70,6 +71,7 @@ exports[`MultiSelect > matches floating variant 1`] = `
       </button>
       <label
         class="sc-dkXsAU bCsPXP"
+        for="react-aria-:ra:"
         id="react-aria-:rb:"
       >
         label
diff --git a/packages/atomic-elements/src/components/Dropdowns/Select/__snapshots__/Select.spec.tsx.snap b/packages/atomic-elements/src/components/Dropdowns/Select/__snapshots__/Select.spec.tsx.snap
index c0079cada..3443392e7 100644
--- a/packages/atomic-elements/src/components/Dropdowns/Select/__snapshots__/Select.spec.tsx.snap
+++ b/packages/atomic-elements/src/components/Dropdowns/Select/__snapshots__/Select.spec.tsx.snap
@@ -7,6 +7,7 @@ exports[`matches snapshot 1`] = `
   >
     <label
       class="sc-dkXsAU bCsPXP"
+      for="select-:r0:-select"
     >
       Label
     </label>
diff --git a/packages/atomic-elements/src/components/Fields/Atoms/Label/Label.component.tsx b/packages/atomic-elements/src/components/Fields/Atoms/Label/Label.component.tsx
index b9c6f1384..84563870d 100644
--- a/packages/atomic-elements/src/components/Fields/Atoms/Label/Label.component.tsx
+++ b/packages/atomic-elements/src/components/Fields/Atoms/Label/Label.component.tsx
@@ -38,6 +38,7 @@ export const Label = React.forwardRef(function Label(
     size,
   });
 
+  return (
     <StyledLabel
       as={as}
       ref={ref}
@@ -47,4 +48,5 @@ export const Label = React.forwardRef(function Label(
     >
       {children}
     </StyledLabel>
+  );
 });
diff --git a/packages/atomic-elements/src/components/Inputs/SearchInput/__snapshots__/SearchInput.spec.tsx.snap b/packages/atomic-elements/src/components/Inputs/SearchInput/__snapshots__/SearchInput.spec.tsx.snap
index ff82fc633..a82bce5ec 100644
--- a/packages/atomic-elements/src/components/Inputs/SearchInput/__snapshots__/SearchInput.spec.tsx.snap
+++ b/packages/atomic-elements/src/components/Inputs/SearchInput/__snapshots__/SearchInput.spec.tsx.snap
@@ -7,6 +7,7 @@ exports[`matches snapshot > displays with search button 1`] = `
   >
     <label
       class="sc-bdDsCe bLPJOA"
+      for="react-aria-:r5:"
       id="react-aria-:r6:"
     >
       search
@@ -48,6 +49,7 @@ exports[`matches snapshot > displays without button 1`] = `
   >
     <label
       class="sc-bdDsCe bLPJOA"
+      for="react-aria-:r0:"
       id="react-aria-:r1:"
     >
       search
diff --git a/packages/atomic-elements/src/components/Inputs/TextAreaInput/__snapshots__/TextAreaInput.spec.tsx.snap b/packages/atomic-elements/src/components/Inputs/TextAreaInput/__snapshots__/TextAreaInput.spec.tsx.snap
index 418c7efc8..986964690 100644
--- a/packages/atomic-elements/src/components/Inputs/TextAreaInput/__snapshots__/TextAreaInput.spec.tsx.snap
+++ b/packages/atomic-elements/src/components/Inputs/TextAreaInput/__snapshots__/TextAreaInput.spec.tsx.snap
@@ -8,6 +8,7 @@ exports[`TextAreaInput > matches snapshot 1`] = `
   >
     <label
       class="sc-bdDsCe bLPJOA"
+      for="react-aria-:r0:"
       id="react-aria-:r1:"
     >
       label
diff --git a/packages/atomic-elements/src/components/Inputs/TextInput/__snapshots__/TextInput.spec.tsx.snap b/packages/atomic-elements/src/components/Inputs/TextInput/__snapshots__/TextInput.spec.tsx.snap
index 420d34581..15c90d9cc 100644
--- a/packages/atomic-elements/src/components/Inputs/TextInput/__snapshots__/TextInput.spec.tsx.snap
+++ b/packages/atomic-elements/src/components/Inputs/TextInput/__snapshots__/TextInput.spec.tsx.snap
@@ -8,6 +8,7 @@ exports[`matches snapshot > default variant 1`] = `
   >
     <label
       class="sc-bdDsCe bLPJOA"
+      for="react-aria-:r0:"
       id="react-aria-:r1:"
     >
       Text Label
@@ -53,6 +54,7 @@ exports[`matches snapshot > floating variant 1`] = `
       />
       <label
         class="sc-bdDsCe bLPJOA"
+        for="react-aria-:r5:"
         id="react-aria-:r6:"
       >
         Text Label