diff --git a/.gitignore b/.gitignore
index 0206be8c..b18cc5dc 100644
--- a/.gitignore
+++ b/.gitignore
@@ -16,5 +16,6 @@ docs/build
 dist
 node_modules
 packages/atomic-fuel/libs
+.vscode
 
 
diff --git a/packages/atomic-elements/src/components/Banners/ActionBanner/ActionBanner.component.tsx b/packages/atomic-elements/src/components/Banners/ActionBanner/ActionBanner.component.tsx
index eedf9e42..0478126d 100644
--- a/packages/atomic-elements/src/components/Banners/ActionBanner/ActionBanner.component.tsx
+++ b/packages/atomic-elements/src/components/Banners/ActionBanner/ActionBanner.component.tsx
@@ -8,7 +8,7 @@ import {
 } from "../../../types";
 import { MaterialIcon } from "../../Icons/MaterialIcon";
 import { Banner, BannerVariants } from "../Banner";
-import { ButtonVariants } from "../../Buttons/Buttons.types";
+import { ButtonVariants } from "../../Buttons/Button";
 
 export interface ActionBannerProps extends HasChildren, HasClassName {
   readonly variant?: BannerVariants;
diff --git a/packages/atomic-elements/src/components/Buttons/Button/Button.component.tsx b/packages/atomic-elements/src/components/Buttons/Button/Button.component.tsx
index dc61d15f..05f94be7 100644
--- a/packages/atomic-elements/src/components/Buttons/Button/Button.component.tsx
+++ b/packages/atomic-elements/src/components/Buttons/Button/Button.component.tsx
@@ -1,61 +1,90 @@
 import { forwardRef } from "react";
 import { AriaButtonOptions } from "@react-aria/button";
-import { mergeProps } from "@react-aria/utils";
+import { mergeProps, useObjectRef } from "@react-aria/utils";
 
 import { SpinnerLoader } from "../../Loaders/SpinnerLoader";
 import {
-  BaseProps,
-  HasChildren,
+  ExtendedSize,
   HasVariant,
   LoadingProps,
+  RenderBaseProps,
+  SuggestStrings,
 } from "../../../types";
-import { StyledButton } from "./Button.styles";
-import { ButtonVariants } from "../Buttons.types";
-import useForwardedRef from "../../../hooks/useForwardedRef";
-import { useFocusRing } from "../../../hooks/useFocusRing";
+import { useFocusRing } from "@hooks/useFocusRing";
 import { useRenderProps } from "@hooks/useRenderProps";
 import { useButtonLink } from "@hooks/useButtonLink";
-import { useContextProps } from "@hooks/useContextProps";
+import { useContextPropsV2 } from "@hooks/useContextProps";
+import { StyledButton } from "./Button.styles";
 import { ButtonContext } from "./Button.context";
 
-export type ButtonProps = AriaButtonOptions<"button"> &
-  LoadingProps &
-  BaseProps &
-  HasChildren &
-  HasVariant<ButtonVariants> & {
-    as?: "button" | "a";
-  };
+export type ButtonVariants = SuggestStrings<
+  | "primary"
+  | "secondary"
+  | "link"
+  | "success"
+  | "error"
+  | "inverted"
+  | "content"
+  | "border"
+  | "ghost"
+>;
+
+interface ButtonRenderProps {
+  isLoading: boolean;
+  isPressed: boolean;
+  isFocusVisible: boolean;
+  isFocused: boolean;
+}
+
+export interface ButtonProps
+  extends AriaButtonOptions<"button">,
+    LoadingProps,
+    RenderBaseProps<ButtonRenderProps>,
+    HasVariant<ButtonVariants> {
+  as?: "button" | "a";
+  size?: ExtendedSize;
+}
 
+/** A button component that can be used to trigger actions or events
+ *
+ * @example <Button onPress={() => alert("Hello, world!")}>Click me</Button>
+ */
 export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
-  (props, ref) => {
+  function Button(props, forwardedRef) {
+    [props, forwardedRef] = useContextPropsV2(
+      ButtonContext,
+      props,
+      forwardedRef
+    );
+
+    const ref = useObjectRef(forwardedRef);
+
     const {
-      children,
-      size = "auto",
-      variant = "primary",
       isLoading = false,
       loadingLabel,
       loadingComplete = false,
-      className,
       as = props.href ? "a" : "button",
-    } = useContextProps(ButtonContext, props);
+      variant = "primary",
+      size = "auto",
+    } = props;
 
-    const internalRef = useForwardedRef<HTMLButtonElement>(ref);
     const { buttonProps, isPressed } = useButtonLink(
       {
         ...props,
         elementType: as,
         "aria-label": isLoading ? loadingLabel : props["aria-label"],
       },
-      internalRef
+      ref
     );
 
-    const { focusProps } = useFocusRing();
+    const { focusProps, isFocusVisible, isFocused } = useFocusRing();
 
     const renderProps = useRenderProps({
       componentClassName: "aje-btn",
-      className,
+      ...props,
       variant,
       size,
+      values: { isPressed, isLoading, isFocusVisible, isFocused },
       selectors: {
         "data-pressed": isPressed,
         "data-loading": isLoading,
@@ -65,7 +94,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
     return (
       <StyledButton
         as={as}
-        ref={internalRef}
+        ref={ref}
         {...mergeProps(buttonProps, focusProps, renderProps)}
       >
         {isLoading && (
@@ -74,12 +103,8 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
             placement="absolute center"
           />
         )}
-        {children}
+        {renderProps.children}
       </StyledButton>
     );
   }
 );
-
-Button.displayName = "Button";
-
-export default Button;
diff --git a/packages/atomic-elements/src/components/Buttons/Button/Button.context.ts b/packages/atomic-elements/src/components/Buttons/Button/Button.context.ts
index 60b485ad..29a63a1c 100644
--- a/packages/atomic-elements/src/components/Buttons/Button/Button.context.ts
+++ b/packages/atomic-elements/src/components/Buttons/Button/Button.context.ts
@@ -1,8 +1,8 @@
 import React from "react";
 import { ButtonProps } from ".";
-import { IconButtonProps } from "../IconButton";
 import { createComponentContext } from "@utils/index";
+import { HasIcon } from '../../../types';
 
 export const ButtonContext = createComponentContext<
-  ButtonProps & IconButtonProps
+  ButtonProps & HasIcon
 >();
diff --git a/packages/atomic-elements/src/components/Buttons/Button/Button.stories.tsx b/packages/atomic-elements/src/components/Buttons/Button/Button.stories.tsx
index d307482a..7b6d7a23 100644
--- a/packages/atomic-elements/src/components/Buttons/Button/Button.stories.tsx
+++ b/packages/atomic-elements/src/components/Buttons/Button/Button.stories.tsx
@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from "@storybook/react";
 import { Button } from ".";
-import { PressableArgTypes } from "@sb/helpers";
+import { PressableArgTypes, RenderPropsArgTypes } from "@sb/helpers";
 import { MaterialIcon } from "@components/Icons/MaterialIcon";
 import { getCssProps } from "@sb/cssprops";
 
@@ -13,6 +13,7 @@ const meta: Meta<typeof Button> = {
   },
   argTypes: {
     ...PressableArgTypes,
+    ...RenderPropsArgTypes,
     children: {
       control: "text",
     },
@@ -48,11 +49,6 @@ const meta: Meta<typeof Button> = {
       description:
         "If true, the button will be excluded from the tab order and will not be focusable via keyboard navigation.",
     },
-    // elementType: {
-    //   control: "text",
-    //   description:
-    //     "The type of element to render. By default, it will render a button element.",
-    // },
   },
 };
 
diff --git a/packages/atomic-elements/src/components/Buttons/Button/Button.styles.ts b/packages/atomic-elements/src/components/Buttons/Button/Button.styles.ts
index 3ed80009..d79dcf15 100644
--- a/packages/atomic-elements/src/components/Buttons/Button/Button.styles.ts
+++ b/packages/atomic-elements/src/components/Buttons/Button/Button.styles.ts
@@ -1,7 +1,133 @@
 import styled from "styled-components";
-import { BaseStyledButton } from "../Buttons.styles";
 import mixins from "@styles/mixins";
 
-export const StyledButton = styled(BaseStyledButton)`
+export const StyledButton = styled.button`
   ${mixins.SizingX}
+  ${mixins.Bold}
+  ${mixins.FocusVisible(2)}
+  padding: var(--btn-padding-vert) var(--btn-padding-horiz);
+  border-radius: var(--btn-border-radius);
+  font-size: var(--btn-font-size);
+  min-height: var(--btn-height);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--btn-icon-gap);
+  text-decoration: none;
+  transition:
+    background 100ms ease,
+    color 100ms ease,
+    transform 100ms ease,
+    box-shadow 100ms ease;
+
+  color: var(--btn-text-clr);
+  background-color: var(--btn-bg-clr);
+  border: var(--btn-border, none);
+  box-shadow: var(--btn-shadow, none);
+  --loader-clr: var(--btn-text-clr);
+
+  &:hover {
+    cursor: pointer;
+    color: var(--btn-hover-text-clr);
+    background-color: var(--btn-hover-bg-clr);
+    box-shadow: var(--btn-hover-shadow);
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+
+  &[data-pressed] {
+    transform: var(--btn-pressed-transform);
+  }
+
+  &[data-loading] {
+    position: relative;
+    color: transparent;
+
+    .aje-spinner,
+    .aje-three-dot-loader {
+      --loader-clr: var(--btn-text-clr);
+      --loader-size: 1em;
+    }
+  }
+
+  &.aje-btn--primary {
+    --btn-text-clr: var(--text-clr-inverted);
+    --btn-bg-clr: var(--accent-clr);
+    --btn-hover-text-clr: var(--btn-text-clr);
+    --btn-hover-bg-clr: var(--accent-clr-alt);
+  }
+
+  &.aje-btn--secondary {
+    --btn-text-clr: var(--text-clr-alt);
+    --btn-bg-clr: var(--neutral100);
+    --btn-hover-text-clr: var(--text-clr);
+    --btn-hover-bg-clr: var(--neutral200);
+    --btn-border: var(--border);
+  }
+
+  &.aje-btn--link {
+    --btn-text-clr: var(--primary700);
+    --btn-bg-clr: var(--neutral50);
+    --btn-hover-text-clr: var(--text-clr);
+    --btn-hover-bg-clr: var(--neutral100);
+    text-decoration: underline;
+  }
+
+  &.aje-btn--error {
+    --btn-text-clr: var(--text-clr-inverted);
+    --btn-bg-clr: var(--error700);
+    --btn-hover-text-clr: var(--btn-text-clr);
+    --btn-hover-bg-clr: var(--error800);
+  }
+
+  &.aje-btn--success {
+    --btn-text-clr: var(--text-clr-inverted);
+    --btn-bg-clr: var(--success700);
+    --btn-hover-text-clr: var(--btn-text-clr);
+    --btn-hover-bg-clr: var(--success800);
+  }
+
+  &.aje-btn--inverted {
+    --btn-text-clr: var(--text-clr);
+    --btn-bg-clr: var(--neutral50);
+    --btn-hover-text-clr: var(--btn-text-clr);
+    --btn-hover-bg-clr: var(--btn-bg-clr);
+    --btn-hover-shadow: 0 1px 3px hsla(221, 39%, 11%, 0.5);
+  }
+
+  &.aje-btn--content {
+    --btn-text-clr: var(--text-clr);
+    --btn-bg-clr: transparent;
+    --btn-hover-text-clr: var(--btn-text-clr);
+    --btn-hover-bg-clr: transparent;
+    --btn-hover-shadow: none;
+    --btn-padding-horiz: 0px;
+    --btn-padding-vert: 0px;
+    --btn-height: auto;
+  }
+
+  &.aje-btn--border {
+    --btn-text-clr: var(--text-clr-alt);
+    --btn-bg-clr: var(--neutral50);
+    --btn-hover-text-clr: var(--text-clr);
+    --btn-hover-bg-clr: var(--neutral100);
+    --btn-border: var(--border);
+  }
+
+  &.aje-btn--ghost {
+    --btn-text-clr: var(--text-clr-alt);
+    --btn-bg-clr: transparent;
+    --btn-hover-text-clr: var(--text-clr);
+    --btn-hover-bg-clr: var(--neutral100);
+    --btn-border: transparent;
+  }
+
+  & > i {
+    color: inherit;
+    font-size: var(--btn-icon-size);
+    margin-left: calc(var(--btn-padding-horiz) / -2.5);
+  }
 `;
diff --git a/packages/atomic-elements/src/components/Buttons/Button/__snapshots__/Button.spec.tsx.snap b/packages/atomic-elements/src/components/Buttons/Button/__snapshots__/Button.spec.tsx.snap
index 57e01472..d59f0362 100644
--- a/packages/atomic-elements/src/components/Buttons/Button/__snapshots__/Button.spec.tsx.snap
+++ b/packages/atomic-elements/src/components/Buttons/Button/__snapshots__/Button.spec.tsx.snap
@@ -3,7 +3,7 @@
 exports[`Button > matches snapshots > changes variant 1`] = `
 <DocumentFragment>
   <button
-    class="sc-kLhKbu sc-ixGGxD ccUbiV iksruy aje-btn aje-btn--secondary is-auto"
+    class="sc-kLhKbu dlRhmD aje-btn aje-btn--secondary is-auto"
     type="button"
   >
     Click Me
@@ -14,7 +14,7 @@ exports[`Button > matches snapshots > changes variant 1`] = `
 exports[`Button > matches snapshots > loading completed state 1`] = `
 <DocumentFragment>
   <button
-    class="sc-kLhKbu sc-ixGGxD ccUbiV iksruy aje-btn aje-btn--primary is-auto"
+    class="sc-kLhKbu dlRhmD aje-btn aje-btn--primary is-auto"
     data-loading="true"
     type="button"
   >
@@ -35,7 +35,7 @@ exports[`Button > matches snapshots > loading completed state 1`] = `
 exports[`Button > matches snapshots > loading state 1`] = `
 <DocumentFragment>
   <button
-    class="sc-kLhKbu sc-ixGGxD ccUbiV iksruy aje-btn aje-btn--primary is-auto"
+    class="sc-kLhKbu dlRhmD aje-btn aje-btn--primary is-auto"
     data-loading="true"
     type="button"
   >
@@ -74,7 +74,7 @@ exports[`Button > matches snapshots > loading state 1`] = `
 exports[`Button > matches snapshots > normal display 1`] = `
 <DocumentFragment>
   <button
-    class="sc-kLhKbu sc-ixGGxD ccUbiV iksruy aje-btn aje-btn--primary is-auto"
+    class="sc-kLhKbu dlRhmD aje-btn aje-btn--primary is-auto"
     type="button"
   >
     Click Me
diff --git a/packages/atomic-elements/src/components/Buttons/Button/index.tsx b/packages/atomic-elements/src/components/Buttons/Button/index.tsx
index b05ba6f0..6441a741 100644
--- a/packages/atomic-elements/src/components/Buttons/Button/index.tsx
+++ b/packages/atomic-elements/src/components/Buttons/Button/index.tsx
@@ -1,2 +1,2 @@
 export { Button } from "./Button.component";
-export type { ButtonProps } from "./Button.component";
+export type { ButtonProps, ButtonVariants } from "./Button.component";
diff --git a/packages/atomic-elements/src/components/Buttons/ButtonGroup/ButtonGroup.component.tsx b/packages/atomic-elements/src/components/Buttons/ButtonGroup/ButtonGroup.component.tsx
index f576758b..20f1b352 100644
--- a/packages/atomic-elements/src/components/Buttons/ButtonGroup/ButtonGroup.component.tsx
+++ b/packages/atomic-elements/src/components/Buttons/ButtonGroup/ButtonGroup.component.tsx
@@ -1,29 +1,23 @@
 import React from "react";
-import { HasVariant } from "../../../types";
-import { ButtonVariants } from "../Buttons.types";
 import { Group, GroupProps } from "../../Layout/Group";
-
-export interface SharedProps extends HasVariant<ButtonVariants> {
-  isDisabled?: boolean;
-}
-
-export interface ButtonGroupChildProps extends SharedProps {
-  buttonVariant?: ButtonVariants;
-}
-
-export type ButtonGroupChild = React.ReactElement<ButtonGroupChildProps>;
+import { ButtonContext } from "../Button/Button.context";
+import { ButtonProps } from "../Button/Button.component";
+import { HasIcon } from "../../../types";
 
 export interface ButtonGroupProps
-  extends SharedProps,
-    Omit<GroupProps, "children"> {
-  children: ButtonGroupChild | ButtonGroupChild[];
+  extends Omit<ButtonProps, "className" | "id">,
+    HasIcon,
+    Omit<GroupProps, "children" | "size"> {
+  children: React.ReactNode;
 }
 
-/** Wrapper around the  [Group Component](/docs/layouts-group--overview)
- * Used to group several buttons / icon buttons / icon menus together into a visual & logical group.
+/** Group a set of buttoons together & provide a common context to all buttons in the group
  *
- * In addition to the normal behavior of the Group component, this component also passes down several
- * of it's props to it's children as defaults.
+ * @example
+ * <ButtonGroup variant="border" isDisabled>
+ *   <Button>Button 1</Button>
+ *   <Button>Button 2</Button>
+ * </ButtonGroup>
  */
 export function ButtonGroup(props: ButtonGroupProps) {
   const {
@@ -31,30 +25,22 @@ export function ButtonGroup(props: ButtonGroupProps) {
     isMerged,
     className,
     id,
-    size,
     gap,
     direction = "row",
-    ...overrides
+    ...buttonProps
   } = props;
 
-  const mergedPropsChildren = React.Children.map(children, (child) => {
-    return React.cloneElement(child, {
-      ...overrides,
-      buttonVariant: props.variant,
-      ...child.props,
-    });
-  });
-
   return (
-    <Group
-      isMerged={isMerged}
-      className={className}
-      id={id}
-      size={size}
-      gap={gap}
-      direction={direction}
-    >
-      {mergedPropsChildren}
-    </Group>
+    <ButtonContext.Provider value={buttonProps}>
+      <Group
+        isMerged={isMerged}
+        className={className}
+        id={id}
+        gap={gap}
+        direction={direction}
+      >
+        {children}
+      </Group>
+    </ButtonContext.Provider>
   );
 }
diff --git a/packages/atomic-elements/src/components/Buttons/ButtonGroup/index.tsx b/packages/atomic-elements/src/components/Buttons/ButtonGroup/index.tsx
index 46a85760..3e59c056 100644
--- a/packages/atomic-elements/src/components/Buttons/ButtonGroup/index.tsx
+++ b/packages/atomic-elements/src/components/Buttons/ButtonGroup/index.tsx
@@ -1,6 +1,2 @@
 export { ButtonGroup } from "./ButtonGroup.component";
-export type {
-  ButtonGroupProps,
-  ButtonGroupChild,
-  ButtonGroupChildProps,
-} from "./ButtonGroup.component";
+export type { ButtonGroupProps } from "./ButtonGroup.component";
diff --git a/packages/atomic-elements/src/components/Buttons/Buttons.styles.ts b/packages/atomic-elements/src/components/Buttons/Buttons.styles.ts
deleted file mode 100644
index 65482b63..00000000
--- a/packages/atomic-elements/src/components/Buttons/Buttons.styles.ts
+++ /dev/null
@@ -1,132 +0,0 @@
-import styled from "styled-components";
-import mixins from "../../styles/mixins";
-
-export const BaseStyledButton = styled.button`
-  ${mixins.Bold}
-  ${mixins.FocusVisible(2)}
-  padding: var(--btn-padding-vert) var(--btn-padding-horiz);
-  border-radius: var(--btn-border-radius);
-  font-size: var(--btn-font-size);
-  min-height: var(--btn-height);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--btn-icon-gap);
-  text-decoration: none;
-  transition:
-    background 100ms ease,
-    color 100ms ease,
-    transform 100ms ease,
-    box-shadow 100ms ease;
-
-  color: var(--btn-text-clr);
-  background-color: var(--btn-bg-clr);
-  border: var(--btn-border, none);
-  box-shadow: var(--btn-shadow, none);
-  --loader-clr: var(--btn-text-clr);
-
-  &:hover {
-    cursor: pointer;
-    color: var(--btn-hover-text-clr);
-    background-color: var(--btn-hover-bg-clr);
-    box-shadow: var(--btn-hover-shadow);
-  }
-
-  &:disabled {
-    opacity: 0.5;
-    pointer-events: none;
-  }
-
-  &[data-pressed] {
-    transform: var(--btn-pressed-transform);
-  }
-
-  &[data-loading] {
-    position: relative;
-    color: transparent;
-
-    .aje-spinner,
-    .aje-three-dot-loader {
-      --loader-clr: var(--btn-text-clr);
-      --loader-size: 1em;
-    }
-  }
-
-  &.aje-btn--primary {
-    --btn-text-clr: var(--text-clr-inverted);
-    --btn-bg-clr: var(--accent-clr);
-    --btn-hover-text-clr: var(--btn-text-clr);
-    --btn-hover-bg-clr: var(--accent-clr-alt);
-  }
-
-  &.aje-btn--secondary {
-    --btn-text-clr: var(--text-clr-alt);
-    --btn-bg-clr: var(--neutral100);
-    --btn-hover-text-clr: var(--text-clr);
-    --btn-hover-bg-clr: var(--neutral200);
-    --btn-border: var(--border);
-  }
-
-  &.aje-btn--link {
-    --btn-text-clr: var(--primary700);
-    --btn-bg-clr: var(--neutral50);
-    --btn-hover-text-clr: var(--text-clr);
-    --btn-hover-bg-clr: var(--neutral100);
-    text-decoration: underline;
-  }
-
-  &.aje-btn--error {
-    --btn-text-clr: var(--text-clr-inverted);
-    --btn-bg-clr: var(--error700);
-    --btn-hover-text-clr: var(--btn-text-clr);
-    --btn-hover-bg-clr: var(--error800);
-  }
-
-  &.aje-btn--success {
-    --btn-text-clr: var(--text-clr-inverted);
-    --btn-bg-clr: var(--success700);
-    --btn-hover-text-clr: var(--btn-text-clr);
-    --btn-hover-bg-clr: var(--success800);
-  }
-
-  &.aje-btn--inverted {
-    --btn-text-clr: var(--text-clr);
-    --btn-bg-clr: var(--neutral50);
-    --btn-hover-text-clr: var(--btn-text-clr);
-    --btn-hover-bg-clr: var(--btn-bg-clr);
-    --btn-hover-shadow: 0 1px 3px hsla(221, 39%, 11%, 0.5);
-  }
-
-  &.aje-btn--content {
-    --btn-text-clr: var(--text-clr);
-    --btn-bg-clr: transparent;
-    --btn-hover-text-clr: var(--btn-text-clr);
-    --btn-hover-bg-clr: transparent;
-    --btn-hover-shadow: none;
-    --btn-padding-horiz: 0px;
-    --btn-padding-vert: 0px;
-    --btn-height: auto;
-  }
-
-  &.aje-btn--border {
-    --btn-text-clr: var(--text-clr-alt);
-    --btn-bg-clr: var(--neutral50);
-    --btn-hover-text-clr: var(--text-clr);
-    --btn-hover-bg-clr: var(--neutral100);
-    --btn-border: var(--border);
-  }
-
-  &.aje-btn--ghost {
-    --btn-text-clr: var(--text-clr-alt);
-    --btn-bg-clr: transparent;
-    --btn-hover-text-clr: var(--text-clr);
-    --btn-hover-bg-clr: var(--neutral100);
-    --btn-border: transparent;
-  }
-
-  & > i {
-    color: inherit;
-    font-size: var(--btn-icon-size);
-    margin-left: calc(var(--btn-padding-horiz) / -2.5);
-  }
-`;
diff --git a/packages/atomic-elements/src/components/Buttons/Buttons.types.ts b/packages/atomic-elements/src/components/Buttons/Buttons.types.ts
deleted file mode 100644
index 0fdec885..00000000
--- a/packages/atomic-elements/src/components/Buttons/Buttons.types.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { SuggestStrings } from "../../types";
-
-export type ButtonVariants = SuggestStrings<
-  | "primary"
-  | "secondary"
-  | "link"
-  | "success"
-  | "error"
-  | "inverted"
-  | "content"
-  | "border"
-  | "ghost"
->;
diff --git a/packages/atomic-elements/src/components/Buttons/IconButton/IconButton.component.tsx b/packages/atomic-elements/src/components/Buttons/IconButton/IconButton.component.tsx
index 0d507532..3973b9a9 100644
--- a/packages/atomic-elements/src/components/Buttons/IconButton/IconButton.component.tsx
+++ b/packages/atomic-elements/src/components/Buttons/IconButton/IconButton.component.tsx
@@ -1,79 +1,48 @@
 import { forwardRef } from "react";
-import { mergeProps } from "@react-aria/utils";
 import { HasIcon } from "../../../types";
-import { SpinnerLoader } from "../../Loaders/SpinnerLoader";
 import { MaterialIcon } from "../../Icons/MaterialIcon";
 import { StyledIconButton } from "./IconButton.styles";
-import { useForwardedRef } from "../../../hooks/useForwardedRef";
-import { useRenderProps } from "@hooks/useRenderProps";
 import { ButtonProps } from "../Button";
-import { useFocusRing } from "../../../hooks/useFocusRing";
-import { useButtonLink } from "@hooks/useButtonLink";
 import { useContextPropsV2 } from "@hooks/useContextProps";
 import { ButtonContext } from "../Button/Button.context";
 
-export type IconButtonProps = Omit<ButtonProps, "children"> & HasIcon;
+export interface IconButtonProps
+  extends Omit<ButtonProps, "children">,
+    HasIcon {}
 
-/** Similar to the Button component, but is intended to display just an icon instead of text.
- * Because of this, you should provide an `aria-label` for accessiblity */
+/** A button designed for displaying a single icon. The button has no text content,
+ * so you should provide an aria-label for accessiblity
+ *
+ * @example <IconButton icon="add" aria-label="Add" onPress={() => alert("Hello, world!")} />
+ * */
 export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
-  (props, ref) => {
-    [props, ref] = useContextPropsV2(ButtonContext, props as any, ref);
+  function IconButton(props, forwardedRef) {
+    [props, forwardedRef] = useContextPropsV2(
+      ButtonContext,
+      props,
+      forwardedRef
+    );
 
     const {
       icon,
-      isLoading,
-      loadingComplete,
-      loadingLabel,
-      variant = "border",
-      iconVariant = "default",
-      className,
+      iconVariant,
       size = "medium",
-      as = props.href ? "a" : "button",
+      variant = "border",
+      as,
+      ...rest
     } = props;
 
-    const innerRef = useForwardedRef<HTMLButtonElement>(ref);
-    const { buttonProps, isPressed } = useButtonLink(
-      {
-        ...props,
-        elementType: as,
-        "aria-label": isLoading ? loadingLabel : props["aria-label"],
-      },
-      innerRef
-    );
-
-    const { focusProps } = useFocusRing();
-
-    const renderProps = useRenderProps({
-      componentClassName: "aje-btn",
-      className: ["aje-btn--icon", className],
-      size,
-      variant,
-      selectors: {
-        "data-loading": isLoading,
-        "data-pressed": isPressed,
-      },
-    });
-
     return (
+      // @ts-expect-error - forwardedAs isn't being typed correctly
       <StyledIconButton
-        type="button"
-        as={as}
-        ref={innerRef}
-        {...mergeProps(buttonProps, focusProps, renderProps)}
+        {...rest}
+        size={size}
+        variant={variant}
+        ref={forwardedRef}
+        forwardedAs={as}
       >
-        {isLoading && (
-          <SpinnerLoader
-            isLoading={!loadingComplete}
-            placement="absolute center"
-          />
-        )}
         <MaterialIcon icon={icon} variant={iconVariant} size={size} />
       </StyledIconButton>
     );
   }
 );
-
-IconButton.displayName = "IconButton";
-
-export default IconButton;
diff --git a/packages/atomic-elements/src/components/Buttons/IconButton/IconButton.styles.ts b/packages/atomic-elements/src/components/Buttons/IconButton/IconButton.styles.ts
index a6032697..48a5a07c 100644
--- a/packages/atomic-elements/src/components/Buttons/IconButton/IconButton.styles.ts
+++ b/packages/atomic-elements/src/components/Buttons/IconButton/IconButton.styles.ts
@@ -1,9 +1,7 @@
 import styled from "styled-components";
-import { BaseStyledButton } from "../Buttons.styles";
-import mixins from "@styles/mixins";
+import { Button } from '../Button';
 
-export const StyledIconButton = styled(BaseStyledButton)`
-  ${mixins.Sizing}
+export const StyledIconButton = styled(Button)`
   --size-sm-x: 30px;
   --size-sm-y: 30px;
   --size-md-x: 40px;
diff --git a/packages/atomic-elements/src/components/Buttons/IconButton/__snapshots__/IconButton.spec.tsx.snap b/packages/atomic-elements/src/components/Buttons/IconButton/__snapshots__/IconButton.spec.tsx.snap
index b72c51ff..d2b973e8 100644
--- a/packages/atomic-elements/src/components/Buttons/IconButton/__snapshots__/IconButton.spec.tsx.snap
+++ b/packages/atomic-elements/src/components/Buttons/IconButton/__snapshots__/IconButton.spec.tsx.snap
@@ -4,12 +4,12 @@ exports[`matches snapshot 1`] = `
 <DocumentFragment>
   <button
     aria-label="More Button"
-    class="sc-ixGGxD sc-khLCKb jaxoaH hXPODb aje-btn aje-btn--icon aje-btn--border is-medium"
+    class="sc-ixGGxD hnVyCZ aje-btn sc-khLCKb fwcJqo aje-btn--border is-medium"
     type="button"
   >
     <i
       aria-hidden="true"
-      class="sc-kLhKbu gELXHy aje-icon material-icons is-medium"
+      class="sc-blHHSb GNRNu aje-icon material-icons is-medium"
     >
       more_vert
     </i>
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 1803f61e..ea3d100c 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
@@ -40,14 +40,14 @@ exports[`matches snapshots > matches default variant 1`] = `
         aria-haspopup="listbox"
         aria-label="Show suggestions"
         aria-labelledby="react-aria-:r0: react-aria-:r3:"
-        class="sc-ixGGxD sc-khLCKb jaxoaH hXPODb aje-btn aje-btn--icon aje-btn--content is-auto"
+        class="sc-ixGGxD hnVyCZ aje-btn sc-khLCKb fwcJqo aje-btn--content is-auto"
         id="react-aria-:r0:"
         tabindex="-1"
         type="button"
       >
         <i
           aria-hidden="true"
-          class="sc-kLhKbu gELXHy aje-icon material-icons is-auto"
+          class="sc-blHHSb GNRNu aje-icon material-icons is-auto"
         >
           search
         </i>
@@ -87,14 +87,14 @@ exports[`matches snapshots > matches floating variant 1`] = `
           aria-haspopup="listbox"
           aria-label="Show suggestions"
           aria-labelledby="react-aria-:r9: react-aria-:rc:"
-          class="sc-ixGGxD sc-khLCKb jaxoaH hXPODb aje-btn aje-btn--icon aje-btn--content is-auto"
+          class="sc-ixGGxD hnVyCZ aje-btn sc-khLCKb fwcJqo aje-btn--content is-auto"
           id="react-aria-:r9:"
           tabindex="-1"
           type="button"
         >
           <i
             aria-hidden="true"
-            class="sc-kLhKbu gELXHy aje-icon material-icons is-auto"
+            class="sc-blHHSb GNRNu aje-icon material-icons is-auto"
           >
             search
           </i>
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 c2cc62f6..6d84ae98 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
@@ -3,7 +3,7 @@
 exports[`matches snapshots > matches default variant 1`] = `
 <DocumentFragment>
   <div
-    class="sc-eUlrpB ecftEH aje-select sc-bMTdWJ fErLam aje-select aje-select--default"
+    class="sc-eUlrpB ecftEH aje-select sc-hbtGpV fPxRoz aje-select aje-select--default"
   >
     <div
       aria-hidden="true"
@@ -45,7 +45,7 @@ exports[`matches snapshots > matches default variant 1`] = `
       aria-expanded="false"
       aria-haspopup="listbox"
       aria-labelledby="react-aria-:r7: react-aria-:r3:"
-      class="sc-ovuCP sc-hJRrWL jDlmat ikrVwe aje-btn sc-fwzISk gsuoQe aje-btn--dropdown is-medium"
+      class="sc-ovuCP jXkAbD aje-btn sc-hJRrWL hJvkfR aje-btn--dropdown is-medium"
       id="react-aria-:r2:"
       type="button"
     >
@@ -57,7 +57,7 @@ exports[`matches snapshots > matches default variant 1`] = `
       </span>
       <i
         aria-hidden="true"
-        class="sc-cEzcPc csQlNh aje-icon material-icons is-medium"
+        class="sc-khLCKb gRpvEI aje-icon material-icons is-medium"
       >
         arrow_drop_down
       </i>
@@ -69,7 +69,7 @@ exports[`matches snapshots > matches default variant 1`] = `
 exports[`matches snapshots > matches floating variant 1`] = `
 <DocumentFragment>
   <div
-    class="sc-eUlrpB ecftEH aje-select sc-bMTdWJ fErLam aje-select aje-select--floating aje-select--floating"
+    class="sc-eUlrpB ecftEH aje-select sc-hbtGpV fPxRoz aje-select aje-select--floating aje-select--floating"
   >
     <div
       aria-hidden="true"
@@ -102,13 +102,13 @@ exports[`matches snapshots > matches floating variant 1`] = `
       </label>
     </div>
     <div
-      class="sc-hbtGpV fgifvA"
+      class="sc-fwzISk ABzRF"
     >
       <button
         aria-expanded="false"
         aria-haspopup="listbox"
         aria-labelledby="react-aria-:rf: react-aria-:rb:"
-        class="sc-ovuCP sc-hJRrWL jDlmat ikrVwe aje-btn sc-fwzISk gsuoQe aje-btn--dropdown is-medium"
+        class="sc-ovuCP jXkAbD aje-btn sc-hJRrWL hJvkfR aje-btn--dropdown is-medium"
         id="react-aria-:ra:"
         type="button"
       >
@@ -118,7 +118,7 @@ exports[`matches snapshots > matches floating variant 1`] = `
         />
         <i
           aria-hidden="true"
-          class="sc-cEzcPc csQlNh aje-icon material-icons is-medium"
+          class="sc-khLCKb gRpvEI aje-icon material-icons is-medium"
         >
           arrow_drop_down
         </i>
diff --git a/packages/atomic-elements/src/components/Dropdowns/IconMenu/IconMenu.component.tsx b/packages/atomic-elements/src/components/Dropdowns/IconMenu/IconMenu.component.tsx
index 04942259..08177ab3 100644
--- a/packages/atomic-elements/src/components/Dropdowns/IconMenu/IconMenu.component.tsx
+++ b/packages/atomic-elements/src/components/Dropdowns/IconMenu/IconMenu.component.tsx
@@ -5,8 +5,8 @@ import { BaseProps, CanHaveIcon, LoadingProps } from "../../../types";
 import { Popover } from "../../Overlays/Popover";
 import { MenuTrigger } from "../Menu/MenuTrigger";
 import { Menu, MenuSectionProps } from "../Menu";
-import { IconButton } from "../../Buttons/IconButton";
-import { ButtonVariants } from "../../Buttons/Buttons.types";
+import { IconButton } from "@components/Buttons/IconButton";
+import { ButtonVariants } from "@components/Buttons/Button";
 import { ItemProps } from "@components/Collection";
 import { CollectionChildren } from "@react-types/shared";
 
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 3767771b..66229fd0 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
@@ -3,7 +3,7 @@
 exports[`MultiSelect > matches default variant 1`] = `
 <DocumentFragment>
   <div
-    class="sc-fwzISk hoMxeV aje-multiselect sc-hbtGpV jzArLu"
+    class="sc-hJRrWL eQYRpW aje-multiselect sc-fwzISk etxnkv"
   >
     <label
       class="sc-egkSDF eRgKMR"
@@ -16,14 +16,14 @@ exports[`MultiSelect > matches default variant 1`] = `
       aria-expanded="false"
       aria-haspopup="listbox"
       aria-labelledby="react-aria-:r7: react-aria-:r3:"
-      class="sc-ovuCP sc-geXuza jDlmat iViSrT aje-btn sc-hJRrWL hJvkfR aje-btn--dropdown is-medium"
+      class="sc-ovuCP jXkAbD aje-btn sc-geXuza jnQWUQ aje-btn--dropdown is-medium"
       id="react-aria-:r2:"
       type="button"
     >
       Select an option
       <i
         aria-hidden="true"
-        class="sc-cEzcPc csQlNh aje-icon material-icons is-medium"
+        class="sc-khLCKb gRpvEI aje-icon material-icons is-medium"
       >
         arrow_drop_down
       </i>
@@ -35,7 +35,7 @@ exports[`MultiSelect > matches default variant 1`] = `
 exports[`MultiSelect > matches floating variant 1`] = `
 <DocumentFragment>
   <div
-    class="sc-fwzISk hoMxeV aje-multiselect sc-hbtGpV jzArLu aje-multiselect--floating"
+    class="sc-hJRrWL eQYRpW aje-multiselect sc-fwzISk etxnkv aje-multiselect--floating"
   >
     <div
       class="sc-eUlrpB imBDzj"
@@ -44,13 +44,13 @@ exports[`MultiSelect > matches floating variant 1`] = `
         aria-expanded="false"
         aria-haspopup="listbox"
         aria-labelledby="react-aria-:rf: react-aria-:rb:"
-        class="sc-ovuCP sc-geXuza jDlmat iViSrT aje-btn sc-hJRrWL hJvkfR aje-btn--dropdown is-medium"
+        class="sc-ovuCP jXkAbD aje-btn sc-geXuza jnQWUQ aje-btn--dropdown is-medium"
         id="react-aria-:ra:"
         type="button"
       >
         <i
           aria-hidden="true"
-          class="sc-cEzcPc csQlNh aje-icon material-icons is-medium"
+          class="sc-khLCKb gRpvEI aje-icon material-icons is-medium"
         >
           arrow_drop_down
         </i>
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 717153c4..69bd4854 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
@@ -3,20 +3,20 @@
 exports[`MultiSelectField > matches snapshots > when closed 1`] = `
 <DocumentFragment>
   <div
-    class="sc-hJRrWL eQYRpW aje-multiselect"
+    class="sc-geXuza fHtZYP aje-multiselect"
   >
     <button
       aria-expanded="false"
       aria-haspopup="listbox"
       aria-labelledby="react-aria-:r7: react-aria-:r3:"
-      class="sc-ovuCP sc-eUlrpB jDlmat bboez aje-btn sc-geXuza jnQWUQ aje-btn--dropdown is-medium"
+      class="sc-ovuCP jXkAbD aje-btn sc-eUlrpB fpFA-DM aje-btn--dropdown is-medium"
       id="react-aria-:r2:"
       type="button"
     >
       Open up
       <i
         aria-hidden="true"
-        class="sc-cEzcPc csQlNh aje-icon material-icons is-medium"
+        class="sc-khLCKb gRpvEI aje-icon material-icons is-medium"
       >
         arrow_drop_down
       </i>
@@ -28,14 +28,14 @@ exports[`MultiSelectField > matches snapshots > when closed 1`] = `
 exports[`MultiSelectField > matches snapshots > when open 1`] = `
 <DocumentFragment>
   <div
-    class="sc-hJRrWL eQYRpW aje-multiselect"
+    class="sc-geXuza fHtZYP aje-multiselect"
   >
     <button
       aria-controls="react-aria-:r9:"
       aria-expanded="true"
       aria-haspopup="listbox"
       aria-labelledby="react-aria-:rf: react-aria-:rb:"
-      class="sc-ovuCP sc-eUlrpB jDlmat bboez aje-btn sc-geXuza jnQWUQ aje-btn--dropdown is-medium"
+      class="sc-ovuCP jXkAbD aje-btn sc-eUlrpB fpFA-DM aje-btn--dropdown is-medium"
       data-pressed="true"
       id="react-aria-:ra:"
       type="button"
@@ -43,7 +43,7 @@ exports[`MultiSelectField > matches snapshots > when open 1`] = `
       Open up
       <i
         aria-hidden="true"
-        class="sc-cEzcPc csQlNh aje-icon material-icons is-medium"
+        class="sc-khLCKb gRpvEI aje-icon material-icons is-medium"
       >
         arrow_drop_down
       </i>
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 5846fa55..2c7cf313 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
@@ -44,7 +44,7 @@ exports[`SelectField > matches snapshots > when closed 1`] = `
       aria-expanded="false"
       aria-haspopup="listbox"
       aria-labelledby="react-aria-:r7: react-aria-:r3:"
-      class="sc-ovuCP sc-hJRrWL jDlmat ikrVwe aje-btn sc-fwzISk gsuoQe aje-btn--dropdown is-medium"
+      class="sc-ovuCP jXkAbD aje-btn sc-hJRrWL hJvkfR aje-btn--dropdown is-medium"
       id="react-aria-:r2:"
       type="button"
     >
@@ -54,7 +54,7 @@ exports[`SelectField > matches snapshots > when closed 1`] = `
       />
       <i
         aria-hidden="true"
-        class="sc-cEzcPc csQlNh aje-icon material-icons is-medium"
+        class="sc-khLCKb gRpvEI aje-icon material-icons is-medium"
       >
         arrow_drop_down
       </i>
@@ -108,7 +108,7 @@ exports[`SelectField > matches snapshots > when open 1`] = `
       aria-expanded="true"
       aria-haspopup="listbox"
       aria-labelledby="react-aria-:rf: react-aria-:rb:"
-      class="sc-ovuCP sc-hJRrWL jDlmat ikrVwe aje-btn sc-fwzISk gsuoQe aje-btn--dropdown is-medium"
+      class="sc-ovuCP jXkAbD aje-btn sc-hJRrWL hJvkfR aje-btn--dropdown is-medium"
       data-pressed="true"
       id="react-aria-:ra:"
       type="button"
@@ -119,7 +119,7 @@ exports[`SelectField > matches snapshots > when open 1`] = `
       />
       <i
         aria-hidden="true"
-        class="sc-cEzcPc csQlNh aje-icon material-icons is-medium"
+        class="sc-khLCKb gRpvEI aje-icon material-icons is-medium"
       >
         arrow_drop_down
       </i>
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 e847e041..68ff1b3a 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
@@ -23,12 +23,12 @@ exports[`matches snapshot > displays with search button 1`] = `
         value=""
       />
       <button
-        class="sc-ixGGxD sc-khLCKb jaxoaH hXPODb aje-btn aje-btn--icon aje-btn--content is-medium"
+        class="sc-ixGGxD hnVyCZ aje-btn sc-khLCKb fwcJqo aje-btn--content is-medium"
         type="button"
       >
         <i
           aria-hidden="true"
-          class="sc-kLhKbu gELXHy aje-icon material-icons is-medium"
+          class="sc-blHHSb GNRNu aje-icon material-icons is-medium"
         >
           search
         </i>
@@ -61,12 +61,12 @@ exports[`matches snapshot > displays without button 1`] = `
         value=""
       />
       <button
-        class="sc-ixGGxD sc-khLCKb jaxoaH hXPODb aje-btn aje-btn--icon aje-btn--content is-medium"
+        class="sc-ixGGxD hnVyCZ aje-btn sc-khLCKb fwcJqo aje-btn--content is-medium"
         type="button"
       >
         <i
           aria-hidden="true"
-          class="sc-kLhKbu gELXHy aje-icon material-icons is-medium"
+          class="sc-blHHSb GNRNu aje-icon material-icons is-medium"
         >
           search
         </i>
diff --git a/packages/atomic-elements/src/components/Internal/DropdownButton.tsx b/packages/atomic-elements/src/components/Internal/DropdownButton.tsx
index 487ffa2c..30a17055 100644
--- a/packages/atomic-elements/src/components/Internal/DropdownButton.tsx
+++ b/packages/atomic-elements/src/components/Internal/DropdownButton.tsx
@@ -1,6 +1,7 @@
 import styled from "styled-components";
 import { Button, ButtonProps } from "@components/Buttons/Button";
 import { MaterialIcon } from "@components/Icons/MaterialIcon";
+import React from "react";
 
 export const StyledButton = styled(Button)`
   justify-content: space-between;
@@ -36,7 +37,7 @@ export function DropdownButton(props: ButtonProps) {
       {...props}
       variant={variant === "ghost" ? "dropdown-ghost" : variant}
     >
-      {props.children}
+      {props.children as React.ReactNode}
       <MaterialIcon icon="arrow_drop_down" />
     </StyledButton>
   );
diff --git a/packages/atomic-elements/src/components/Layout/Table/__snapshots__/Table.spec.tsx.snap b/packages/atomic-elements/src/components/Layout/Table/__snapshots__/Table.spec.tsx.snap
index e05cb49d..ed4af706 100644
--- a/packages/atomic-elements/src/components/Layout/Table/__snapshots__/Table.spec.tsx.snap
+++ b/packages/atomic-elements/src/components/Layout/Table/__snapshots__/Table.spec.tsx.snap
@@ -44,12 +44,12 @@ exports[`Table > Snapshots > Should match the snapshot when searchable 1`] = `
                     value="search"
                   />
                   <button
-                    class="sc-jtQUzJ sc-cEzcPc cipAo wabHi aje-btn aje-btn--icon aje-btn--content is-small"
+                    class="sc-jtQUzJ dHBwgm aje-btn sc-cEzcPc jiGxDd aje-btn--content is-small"
                     type="button"
                   >
                     <i
                       aria-hidden="true"
-                      class="sc-cHqXqK cswpJl aje-icon material-icons is-small"
+                      class="sc-kLhKbu gELXHy aje-icon material-icons is-small"
                     >
                       close
                     </i>
@@ -91,7 +91,7 @@ exports[`Table > Snapshots > Should match the snapshot when searchable 1`] = `
               tabindex="-1"
             >
               <div
-                class="sc-kLhKbu kNHYgZ aje-flex"
+                class="sc-ixGGxD fqzOIT aje-flex"
               >
                 <span
                   class="sc-iuUfFv hBsQNL aje-table__cell__content"
@@ -107,7 +107,7 @@ exports[`Table > Snapshots > Should match the snapshot when searchable 1`] = `
               tabindex="-1"
             >
               <div
-                class="sc-kLhKbu kNHYgZ aje-flex"
+                class="sc-ixGGxD fqzOIT aje-flex"
               >
                 <span
                   class="sc-iuUfFv hBsQNL aje-table__cell__content"
@@ -132,7 +132,7 @@ exports[`Table > Snapshots > Should match the snapshot when searchable 1`] = `
               tabindex="-1"
             >
               <div
-                class="sc-kLhKbu kNHYgZ aje-flex"
+                class="sc-ixGGxD fqzOIT aje-flex"
               >
                 <span
                   class="sc-iuUfFv hBsQNL aje-table__cell__content"
@@ -148,7 +148,7 @@ exports[`Table > Snapshots > Should match the snapshot when searchable 1`] = `
               tabindex="-1"
             >
               <div
-                class="sc-kLhKbu kNHYgZ aje-flex"
+                class="sc-ixGGxD fqzOIT aje-flex"
               >
                 <span
                   class="sc-iuUfFv hBsQNL aje-table__cell__content"
@@ -208,12 +208,12 @@ exports[`Table > Snapshots > Should match the snapshot when searchable 1`] = `
                   value="search"
                 />
                 <button
-                  class="sc-jtQUzJ sc-cEzcPc cipAo wabHi aje-btn aje-btn--icon aje-btn--content is-small"
+                  class="sc-jtQUzJ dHBwgm aje-btn sc-cEzcPc jiGxDd aje-btn--content is-small"
                   type="button"
                 >
                   <i
                     aria-hidden="true"
-                    class="sc-cHqXqK cswpJl aje-icon material-icons is-small"
+                    class="sc-kLhKbu gELXHy aje-icon material-icons is-small"
                   >
                     close
                   </i>
@@ -255,7 +255,7 @@ exports[`Table > Snapshots > Should match the snapshot when searchable 1`] = `
             tabindex="-1"
           >
             <div
-              class="sc-kLhKbu kNHYgZ aje-flex"
+              class="sc-ixGGxD fqzOIT aje-flex"
             >
               <span
                 class="sc-iuUfFv hBsQNL aje-table__cell__content"
@@ -271,7 +271,7 @@ exports[`Table > Snapshots > Should match the snapshot when searchable 1`] = `
             tabindex="-1"
           >
             <div
-              class="sc-kLhKbu kNHYgZ aje-flex"
+              class="sc-ixGGxD fqzOIT aje-flex"
             >
               <span
                 class="sc-iuUfFv hBsQNL aje-table__cell__content"
@@ -296,7 +296,7 @@ exports[`Table > Snapshots > Should match the snapshot when searchable 1`] = `
             tabindex="-1"
           >
             <div
-              class="sc-kLhKbu kNHYgZ aje-flex"
+              class="sc-ixGGxD fqzOIT aje-flex"
             >
               <span
                 class="sc-iuUfFv hBsQNL aje-table__cell__content"
@@ -312,7 +312,7 @@ exports[`Table > Snapshots > Should match the snapshot when searchable 1`] = `
             tabindex="-1"
           >
             <div
-              class="sc-kLhKbu kNHYgZ aje-flex"
+              class="sc-ixGGxD fqzOIT aje-flex"
             >
               <span
                 class="sc-iuUfFv hBsQNL aje-table__cell__content"
@@ -423,24 +423,24 @@ exports[`Table > Snapshots > should match the snapshot 1`] = `
                     value=""
                   />
                   <button
-                    class="sc-jtQUzJ sc-cEzcPc cipAo wabHi aje-btn aje-btn--icon aje-btn--content is-small"
+                    class="sc-jtQUzJ dHBwgm aje-btn sc-cEzcPc jiGxDd aje-btn--content is-small"
                     type="button"
                   >
                     <i
                       aria-hidden="true"
-                      class="sc-cHqXqK cswpJl aje-icon material-icons is-small"
+                      class="sc-kLhKbu gELXHy aje-icon material-icons is-small"
                     >
                       close
                     </i>
                   </button>
                 </div>
                 <button
-                  class="sc-jtQUzJ sc-cEzcPc cipAo wabHi aje-btn aje-btn--icon aje-btn--content is-small"
+                  class="sc-jtQUzJ dHBwgm aje-btn sc-cEzcPc jiGxDd aje-btn--content is-small"
                   type="button"
                 >
                   <i
                     aria-hidden="true"
-                    class="sc-cHqXqK cswpJl aje-icon material-icons is-small"
+                    class="sc-kLhKbu gELXHy aje-icon material-icons is-small"
                   >
                     search
                   </i>
@@ -481,7 +481,7 @@ exports[`Table > Snapshots > should match the snapshot 1`] = `
               tabindex="-1"
             >
               <div
-                class="sc-kLhKbu kNHYgZ aje-flex"
+                class="sc-ixGGxD fqzOIT aje-flex"
               >
                 <span
                   class="sc-iuUfFv hBsQNL aje-table__cell__content"
@@ -497,7 +497,7 @@ exports[`Table > Snapshots > should match the snapshot 1`] = `
               tabindex="-1"
             >
               <div
-                class="sc-kLhKbu kNHYgZ aje-flex"
+                class="sc-ixGGxD fqzOIT aje-flex"
               >
                 <span
                   class="sc-iuUfFv hBsQNL aje-table__cell__content"
@@ -522,7 +522,7 @@ exports[`Table > Snapshots > should match the snapshot 1`] = `
               tabindex="-1"
             >
               <div
-                class="sc-kLhKbu kNHYgZ aje-flex"
+                class="sc-ixGGxD fqzOIT aje-flex"
               >
                 <span
                   class="sc-iuUfFv hBsQNL aje-table__cell__content"
@@ -538,7 +538,7 @@ exports[`Table > Snapshots > should match the snapshot 1`] = `
               tabindex="-1"
             >
               <div
-                class="sc-kLhKbu kNHYgZ aje-flex"
+                class="sc-ixGGxD fqzOIT aje-flex"
               >
                 <span
                   class="sc-iuUfFv hBsQNL aje-table__cell__content"
@@ -598,24 +598,24 @@ exports[`Table > Snapshots > should match the snapshot 1`] = `
                   value=""
                 />
                 <button
-                  class="sc-jtQUzJ sc-cEzcPc cipAo wabHi aje-btn aje-btn--icon aje-btn--content is-small"
+                  class="sc-jtQUzJ dHBwgm aje-btn sc-cEzcPc jiGxDd aje-btn--content is-small"
                   type="button"
                 >
                   <i
                     aria-hidden="true"
-                    class="sc-cHqXqK cswpJl aje-icon material-icons is-small"
+                    class="sc-kLhKbu gELXHy aje-icon material-icons is-small"
                   >
                     close
                   </i>
                 </button>
               </div>
               <button
-                class="sc-jtQUzJ sc-cEzcPc cipAo wabHi aje-btn aje-btn--icon aje-btn--content is-small"
+                class="sc-jtQUzJ dHBwgm aje-btn sc-cEzcPc jiGxDd aje-btn--content is-small"
                 type="button"
               >
                 <i
                   aria-hidden="true"
-                  class="sc-cHqXqK cswpJl aje-icon material-icons is-small"
+                  class="sc-kLhKbu gELXHy aje-icon material-icons is-small"
                 >
                   search
                 </i>
@@ -656,7 +656,7 @@ exports[`Table > Snapshots > should match the snapshot 1`] = `
             tabindex="-1"
           >
             <div
-              class="sc-kLhKbu kNHYgZ aje-flex"
+              class="sc-ixGGxD fqzOIT aje-flex"
             >
               <span
                 class="sc-iuUfFv hBsQNL aje-table__cell__content"
@@ -672,7 +672,7 @@ exports[`Table > Snapshots > should match the snapshot 1`] = `
             tabindex="-1"
           >
             <div
-              class="sc-kLhKbu kNHYgZ aje-flex"
+              class="sc-ixGGxD fqzOIT aje-flex"
             >
               <span
                 class="sc-iuUfFv hBsQNL aje-table__cell__content"
@@ -697,7 +697,7 @@ exports[`Table > Snapshots > should match the snapshot 1`] = `
             tabindex="-1"
           >
             <div
-              class="sc-kLhKbu kNHYgZ aje-flex"
+              class="sc-ixGGxD fqzOIT aje-flex"
             >
               <span
                 class="sc-iuUfFv hBsQNL aje-table__cell__content"
@@ -713,7 +713,7 @@ exports[`Table > Snapshots > should match the snapshot 1`] = `
             tabindex="-1"
           >
             <div
-              class="sc-kLhKbu kNHYgZ aje-flex"
+              class="sc-ixGGxD fqzOIT aje-flex"
             >
               <span
                 class="sc-iuUfFv hBsQNL aje-table__cell__content"
@@ -825,24 +825,24 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
                     value=""
                   />
                   <button
-                    class="sc-jtQUzJ sc-cEzcPc cipAo wabHi aje-btn aje-btn--icon aje-btn--content is-small"
+                    class="sc-jtQUzJ dHBwgm aje-btn sc-cEzcPc jiGxDd aje-btn--content is-small"
                     type="button"
                   >
                     <i
                       aria-hidden="true"
-                      class="sc-cHqXqK cswpJl aje-icon material-icons is-small"
+                      class="sc-kLhKbu gELXHy aje-icon material-icons is-small"
                     >
                       close
                     </i>
                   </button>
                 </div>
                 <button
-                  class="sc-jtQUzJ sc-cEzcPc cipAo wabHi aje-btn aje-btn--icon aje-btn--content is-small"
+                  class="sc-jtQUzJ dHBwgm aje-btn sc-cEzcPc jiGxDd aje-btn--content is-small"
                   type="button"
                 >
                   <i
                     aria-hidden="true"
-                    class="sc-cHqXqK cswpJl aje-icon material-icons is-small"
+                    class="sc-kLhKbu gELXHy aje-icon material-icons is-small"
                   >
                     search
                   </i>
@@ -2099,24 +2099,24 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
                   value=""
                 />
                 <button
-                  class="sc-jtQUzJ sc-cEzcPc cipAo wabHi aje-btn aje-btn--icon aje-btn--content is-small"
+                  class="sc-jtQUzJ dHBwgm aje-btn sc-cEzcPc jiGxDd aje-btn--content is-small"
                   type="button"
                 >
                   <i
                     aria-hidden="true"
-                    class="sc-cHqXqK cswpJl aje-icon material-icons is-small"
+                    class="sc-kLhKbu gELXHy aje-icon material-icons is-small"
                   >
                     close
                   </i>
                 </button>
               </div>
               <button
-                class="sc-jtQUzJ sc-cEzcPc cipAo wabHi aje-btn aje-btn--icon aje-btn--content is-small"
+                class="sc-jtQUzJ dHBwgm aje-btn sc-cEzcPc jiGxDd aje-btn--content is-small"
                 type="button"
               >
                 <i
                   aria-hidden="true"
-                  class="sc-cHqXqK cswpJl aje-icon material-icons is-small"
+                  class="sc-kLhKbu gELXHy aje-icon material-icons is-small"
                 >
                   search
                 </i>
@@ -3424,24 +3424,24 @@ exports[`Table > Snapshots > should match the snapshot with pagination 1`] = `
                     value=""
                   />
                   <button
-                    class="sc-jtQUzJ sc-cEzcPc cipAo wabHi aje-btn aje-btn--icon aje-btn--content is-small"
+                    class="sc-jtQUzJ dHBwgm aje-btn sc-cEzcPc jiGxDd aje-btn--content is-small"
                     type="button"
                   >
                     <i
                       aria-hidden="true"
-                      class="sc-cHqXqK cswpJl aje-icon material-icons is-small"
+                      class="sc-kLhKbu gELXHy aje-icon material-icons is-small"
                     >
                       close
                     </i>
                   </button>
                 </div>
                 <button
-                  class="sc-jtQUzJ sc-cEzcPc cipAo wabHi aje-btn aje-btn--icon aje-btn--content is-small"
+                  class="sc-jtQUzJ dHBwgm aje-btn sc-cEzcPc jiGxDd aje-btn--content is-small"
                   type="button"
                 >
                   <i
                     aria-hidden="true"
-                    class="sc-cHqXqK cswpJl aje-icon material-icons is-small"
+                    class="sc-kLhKbu gELXHy aje-icon material-icons is-small"
                   >
                     search
                   </i>
@@ -3482,7 +3482,7 @@ exports[`Table > Snapshots > should match the snapshot with pagination 1`] = `
               tabindex="-1"
             >
               <div
-                class="sc-kLhKbu kNHYgZ aje-flex"
+                class="sc-ixGGxD fqzOIT aje-flex"
               >
                 <span
                   class="sc-iuUfFv hBsQNL aje-table__cell__content"
@@ -3498,7 +3498,7 @@ exports[`Table > Snapshots > should match the snapshot with pagination 1`] = `
               tabindex="-1"
             >
               <div
-                class="sc-kLhKbu kNHYgZ aje-flex"
+                class="sc-ixGGxD fqzOIT aje-flex"
               >
                 <span
                   class="sc-iuUfFv hBsQNL aje-table__cell__content"
@@ -3523,7 +3523,7 @@ exports[`Table > Snapshots > should match the snapshot with pagination 1`] = `
               tabindex="-1"
             >
               <div
-                class="sc-kLhKbu kNHYgZ aje-flex"
+                class="sc-ixGGxD fqzOIT aje-flex"
               >
                 <span
                   class="sc-iuUfFv hBsQNL aje-table__cell__content"
@@ -3539,7 +3539,7 @@ exports[`Table > Snapshots > should match the snapshot with pagination 1`] = `
               tabindex="-1"
             >
               <div
-                class="sc-kLhKbu kNHYgZ aje-flex"
+                class="sc-ixGGxD fqzOIT aje-flex"
               >
                 <span
                   class="sc-iuUfFv hBsQNL aje-table__cell__content"
@@ -3555,11 +3555,11 @@ exports[`Table > Snapshots > should match the snapshot with pagination 1`] = `
         class="sc-dprtRQ fpLNau aje-table__bottom"
       >
         <div
-          class="sc-kLhKbu gIEVSm aje-flex"
+          class="sc-ixGGxD lfkMXE aje-flex"
           style="height: 100%;"
         >
           <div
-            class="sc-eWPXlR hdjNtL aje-select sc-eDHQDy kuHUDx aje-select aje-select--ghost aje-select--ghost is-auto"
+            class="sc-eWPXlR hdjNtL aje-select sc-iqyJx cJamVH aje-select aje-select--ghost aje-select--ghost is-auto"
           >
             <div
               aria-hidden="true"
@@ -3606,7 +3606,7 @@ exports[`Table > Snapshots > should match the snapshot with pagination 1`] = `
               aria-haspopup="listbox"
               aria-label="Select page size"
               aria-labelledby="react-aria-:rd: react-aria-:r8: react-aria-:r9:"
-              class="sc-jtQUzJ sc-lnsxGb cipAo hegzZT aje-btn sc-jSSkKI btCqZz aje-btn--dropdown is-auto"
+              class="sc-jtQUzJ dHBwgm aje-btn sc-lnsxGb ertuho aje-btn--dropdown is-auto"
               id="react-aria-:r8:"
               type="button"
             >
@@ -3618,7 +3618,7 @@ exports[`Table > Snapshots > should match the snapshot with pagination 1`] = `
               </span>
               <i
                 aria-hidden="true"
-                class="sc-cHqXqK cswpJl aje-icon material-icons is-medium"
+                class="sc-kLhKbu gELXHy aje-icon material-icons is-medium"
               >
                 arrow_drop_down
               </i>
@@ -3628,54 +3628,54 @@ exports[`Table > Snapshots > should match the snapshot with pagination 1`] = `
             class="aje-pagination"
           >
             <div
-              class="sc-kLhKbu gTdSnB aje-flex"
+              class="sc-ixGGxD hmhcuX aje-flex"
             >
               <button
                 aria-label="First Page"
-                class="sc-jtQUzJ sc-cEzcPc cipAo wabHi aje-btn aje-btn--icon aje-btn--ghost is-medium"
+                class="sc-jtQUzJ dHBwgm aje-btn sc-cEzcPc jiGxDd aje-btn--ghost is-medium"
                 disabled=""
                 type="button"
               >
                 <i
                   aria-hidden="true"
-                  class="sc-cHqXqK cswpJl aje-icon material-icons is-medium"
+                  class="sc-kLhKbu gELXHy aje-icon material-icons is-medium"
                 >
                   first_page
                 </i>
               </button>
               <button
                 aria-label="Previous Page"
-                class="sc-jtQUzJ sc-cEzcPc cipAo wabHi aje-btn aje-btn--icon aje-btn--ghost is-medium"
+                class="sc-jtQUzJ dHBwgm aje-btn sc-cEzcPc jiGxDd aje-btn--ghost is-medium"
                 disabled=""
                 type="button"
               >
                 <i
                   aria-hidden="true"
-                  class="sc-cHqXqK cswpJl aje-icon material-icons is-medium"
+                  class="sc-kLhKbu gELXHy aje-icon material-icons is-medium"
                 >
                   chevron_left
                 </i>
               </button>
               <button
                 aria-label="Next Page"
-                class="sc-jtQUzJ sc-cEzcPc cipAo wabHi aje-btn aje-btn--icon aje-btn--ghost is-medium"
+                class="sc-jtQUzJ dHBwgm aje-btn sc-cEzcPc jiGxDd aje-btn--ghost is-medium"
                 type="button"
               >
                 <i
                   aria-hidden="true"
-                  class="sc-cHqXqK cswpJl aje-icon material-icons is-medium"
+                  class="sc-kLhKbu gELXHy aje-icon material-icons is-medium"
                 >
                   chevron_right
                 </i>
               </button>
               <button
                 aria-label="Last Page"
-                class="sc-jtQUzJ sc-cEzcPc cipAo wabHi aje-btn aje-btn--icon aje-btn--ghost is-medium"
+                class="sc-jtQUzJ dHBwgm aje-btn sc-cEzcPc jiGxDd aje-btn--ghost is-medium"
                 type="button"
               >
                 <i
                   aria-hidden="true"
-                  class="sc-cHqXqK cswpJl aje-icon material-icons is-medium"
+                  class="sc-kLhKbu gELXHy aje-icon material-icons is-medium"
                 >
                   last_page
                 </i>
@@ -3733,24 +3733,24 @@ exports[`Table > Snapshots > should match the snapshot with pagination 1`] = `
                   value=""
                 />
                 <button
-                  class="sc-jtQUzJ sc-cEzcPc cipAo wabHi aje-btn aje-btn--icon aje-btn--content is-small"
+                  class="sc-jtQUzJ dHBwgm aje-btn sc-cEzcPc jiGxDd aje-btn--content is-small"
                   type="button"
                 >
                   <i
                     aria-hidden="true"
-                    class="sc-cHqXqK cswpJl aje-icon material-icons is-small"
+                    class="sc-kLhKbu gELXHy aje-icon material-icons is-small"
                   >
                     close
                   </i>
                 </button>
               </div>
               <button
-                class="sc-jtQUzJ sc-cEzcPc cipAo wabHi aje-btn aje-btn--icon aje-btn--content is-small"
+                class="sc-jtQUzJ dHBwgm aje-btn sc-cEzcPc jiGxDd aje-btn--content is-small"
                 type="button"
               >
                 <i
                   aria-hidden="true"
-                  class="sc-cHqXqK cswpJl aje-icon material-icons is-small"
+                  class="sc-kLhKbu gELXHy aje-icon material-icons is-small"
                 >
                   search
                 </i>
@@ -3791,7 +3791,7 @@ exports[`Table > Snapshots > should match the snapshot with pagination 1`] = `
             tabindex="-1"
           >
             <div
-              class="sc-kLhKbu kNHYgZ aje-flex"
+              class="sc-ixGGxD fqzOIT aje-flex"
             >
               <span
                 class="sc-iuUfFv hBsQNL aje-table__cell__content"
@@ -3807,7 +3807,7 @@ exports[`Table > Snapshots > should match the snapshot with pagination 1`] = `
             tabindex="-1"
           >
             <div
-              class="sc-kLhKbu kNHYgZ aje-flex"
+              class="sc-ixGGxD fqzOIT aje-flex"
             >
               <span
                 class="sc-iuUfFv hBsQNL aje-table__cell__content"
@@ -3832,7 +3832,7 @@ exports[`Table > Snapshots > should match the snapshot with pagination 1`] = `
             tabindex="-1"
           >
             <div
-              class="sc-kLhKbu kNHYgZ aje-flex"
+              class="sc-ixGGxD fqzOIT aje-flex"
             >
               <span
                 class="sc-iuUfFv hBsQNL aje-table__cell__content"
@@ -3848,7 +3848,7 @@ exports[`Table > Snapshots > should match the snapshot with pagination 1`] = `
             tabindex="-1"
           >
             <div
-              class="sc-kLhKbu kNHYgZ aje-flex"
+              class="sc-ixGGxD fqzOIT aje-flex"
             >
               <span
                 class="sc-iuUfFv hBsQNL aje-table__cell__content"
@@ -3864,11 +3864,11 @@ exports[`Table > Snapshots > should match the snapshot with pagination 1`] = `
       class="sc-dprtRQ fpLNau aje-table__bottom"
     >
       <div
-        class="sc-kLhKbu gIEVSm aje-flex"
+        class="sc-ixGGxD lfkMXE aje-flex"
         style="height: 100%;"
       >
         <div
-          class="sc-eWPXlR hdjNtL aje-select sc-eDHQDy kuHUDx aje-select aje-select--ghost aje-select--ghost is-auto"
+          class="sc-eWPXlR hdjNtL aje-select sc-iqyJx cJamVH aje-select aje-select--ghost aje-select--ghost is-auto"
         >
           <div
             aria-hidden="true"
@@ -3915,7 +3915,7 @@ exports[`Table > Snapshots > should match the snapshot with pagination 1`] = `
             aria-haspopup="listbox"
             aria-label="Select page size"
             aria-labelledby="react-aria-:rd: react-aria-:r8: react-aria-:r9:"
-            class="sc-jtQUzJ sc-lnsxGb cipAo hegzZT aje-btn sc-jSSkKI btCqZz aje-btn--dropdown is-auto"
+            class="sc-jtQUzJ dHBwgm aje-btn sc-lnsxGb ertuho aje-btn--dropdown is-auto"
             id="react-aria-:r8:"
             type="button"
           >
@@ -3927,7 +3927,7 @@ exports[`Table > Snapshots > should match the snapshot with pagination 1`] = `
             </span>
             <i
               aria-hidden="true"
-              class="sc-cHqXqK cswpJl aje-icon material-icons is-medium"
+              class="sc-kLhKbu gELXHy aje-icon material-icons is-medium"
             >
               arrow_drop_down
             </i>
@@ -3937,54 +3937,54 @@ exports[`Table > Snapshots > should match the snapshot with pagination 1`] = `
           class="aje-pagination"
         >
           <div
-            class="sc-kLhKbu gTdSnB aje-flex"
+            class="sc-ixGGxD hmhcuX aje-flex"
           >
             <button
               aria-label="First Page"
-              class="sc-jtQUzJ sc-cEzcPc cipAo wabHi aje-btn aje-btn--icon aje-btn--ghost is-medium"
+              class="sc-jtQUzJ dHBwgm aje-btn sc-cEzcPc jiGxDd aje-btn--ghost is-medium"
               disabled=""
               type="button"
             >
               <i
                 aria-hidden="true"
-                class="sc-cHqXqK cswpJl aje-icon material-icons is-medium"
+                class="sc-kLhKbu gELXHy aje-icon material-icons is-medium"
               >
                 first_page
               </i>
             </button>
             <button
               aria-label="Previous Page"
-              class="sc-jtQUzJ sc-cEzcPc cipAo wabHi aje-btn aje-btn--icon aje-btn--ghost is-medium"
+              class="sc-jtQUzJ dHBwgm aje-btn sc-cEzcPc jiGxDd aje-btn--ghost is-medium"
               disabled=""
               type="button"
             >
               <i
                 aria-hidden="true"
-                class="sc-cHqXqK cswpJl aje-icon material-icons is-medium"
+                class="sc-kLhKbu gELXHy aje-icon material-icons is-medium"
               >
                 chevron_left
               </i>
             </button>
             <button
               aria-label="Next Page"
-              class="sc-jtQUzJ sc-cEzcPc cipAo wabHi aje-btn aje-btn--icon aje-btn--ghost is-medium"
+              class="sc-jtQUzJ dHBwgm aje-btn sc-cEzcPc jiGxDd aje-btn--ghost is-medium"
               type="button"
             >
               <i
                 aria-hidden="true"
-                class="sc-cHqXqK cswpJl aje-icon material-icons is-medium"
+                class="sc-kLhKbu gELXHy aje-icon material-icons is-medium"
               >
                 chevron_right
               </i>
             </button>
             <button
               aria-label="Last Page"
-              class="sc-jtQUzJ sc-cEzcPc cipAo wabHi aje-btn aje-btn--icon aje-btn--ghost is-medium"
+              class="sc-jtQUzJ dHBwgm aje-btn sc-cEzcPc jiGxDd aje-btn--ghost is-medium"
               type="button"
             >
               <i
                 aria-hidden="true"
-                class="sc-cHqXqK cswpJl aje-icon material-icons is-medium"
+                class="sc-kLhKbu gELXHy aje-icon material-icons is-medium"
               >
                 last_page
               </i>
diff --git a/packages/atomic-elements/src/components/Loaders/LoadingStatus/__snapshots__/LoadingStatus.spec.tsx.snap b/packages/atomic-elements/src/components/Loaders/LoadingStatus/__snapshots__/LoadingStatus.spec.tsx.snap
index 1939b098..30d674a0 100644
--- a/packages/atomic-elements/src/components/Loaders/LoadingStatus/__snapshots__/LoadingStatus.spec.tsx.snap
+++ b/packages/atomic-elements/src/components/Loaders/LoadingStatus/__snapshots__/LoadingStatus.spec.tsx.snap
@@ -18,7 +18,7 @@ exports[`LoadingStatus > matches error snapshot 1`] = `
     </div>
     <button
       aria-label="dismiss error"
-      class="sc-jwIPbr sc-cHqXqK diMdNC fjWYSO aje-btn aje-btn--icon aje-banner__dismiss aje-btn--banner is-medium"
+      class="sc-jwIPbr cfypkI aje-btn sc-cHqXqK gkldit aje-banner__dismiss aje-btn--banner is-medium"
       type="button"
     >
       <i
diff --git a/packages/atomic-elements/src/components/Overlays/OverlayTrigger/__snapshots__/OverlayTrigger.spec.tsx.snap b/packages/atomic-elements/src/components/Overlays/OverlayTrigger/__snapshots__/OverlayTrigger.spec.tsx.snap
index 1759f9bf..71644594 100644
--- a/packages/atomic-elements/src/components/Overlays/OverlayTrigger/__snapshots__/OverlayTrigger.spec.tsx.snap
+++ b/packages/atomic-elements/src/components/Overlays/OverlayTrigger/__snapshots__/OverlayTrigger.spec.tsx.snap
@@ -4,7 +4,7 @@ exports[`OverlayTrigger > Matches the closed snapshot 1`] = `
 <DocumentFragment>
   <button
     aria-expanded="false"
-    class="sc-kLhKbu sc-ixGGxD ccUbiV iksruy aje-btn aje-btn--primary is-auto"
+    class="sc-kLhKbu dlRhmD aje-btn aje-btn--primary is-auto"
     type="button"
   >
     Trigger
@@ -17,7 +17,7 @@ exports[`OverlayTrigger > Matches the open snapshot 1`] = `
   <button
     aria-controls="react-aria-:r1:"
     aria-expanded="true"
-    class="sc-kLhKbu sc-ixGGxD ccUbiV iksruy aje-btn aje-btn--primary is-auto"
+    class="sc-kLhKbu dlRhmD aje-btn aje-btn--primary is-auto"
     data-focus-visible="true"
     data-pressed="true"
     type="button"
diff --git a/packages/atomic-elements/src/components/Pagination/Pagination/Pagination.component.tsx b/packages/atomic-elements/src/components/Pagination/Pagination/Pagination.component.tsx
index 7dd24c95..71524d3a 100644
--- a/packages/atomic-elements/src/components/Pagination/Pagination/Pagination.component.tsx
+++ b/packages/atomic-elements/src/components/Pagination/Pagination/Pagination.component.tsx
@@ -3,12 +3,11 @@ import { useControlledState } from "@react-stately/utils";
 import { AriaLabelProps, ExtendedSize, RenderBaseProps } from "../../../types";
 import { useRenderProps } from "@hooks/useRenderProps";
 import { IconButton } from "@components/Buttons/IconButton";
-import { ButtonVariants } from "../..//Buttons/Buttons.types";
+import { ButtonVariants, ButtonProps } from "@components/Buttons/Button";
 import { PageProps, PageState } from "../Pagination.types";
 import { ButtonContext } from "@components/Buttons/Button/Button.context";
 import { PaginationContext } from "./Pagination.context";
 import { Button } from "@components/Buttons/Button";
-import { ButtonProps } from "../../Buttons/Button";
 import { IconButtonProps } from "../../Buttons/IconButton";
 import { CustomSelectProps } from "../../Dropdowns/CustomSelect";
 import { CustomSelect } from "@components/Dropdowns/CustomSelect";
diff --git a/packages/atomic-elements/src/types/common.ts b/packages/atomic-elements/src/types/common.ts
index fd126507..78af2377 100644
--- a/packages/atomic-elements/src/types/common.ts
+++ b/packages/atomic-elements/src/types/common.ts
@@ -46,21 +46,15 @@ export interface HasVariant<Variants> {
 
 export type CanHaveVariant<Variants> = Partial<HasVariant<Variants>>;
 
-export type LoadingProps =
-  | {
-      /** When loading is true, the content will be replaced with a spinner.
-       * When it is false, the content will be shown normally */
-      isLoading?: false;
-      /** aria accessiblity label to inform screen-readers that it is loading */
-      loadingLabel?: never;
-      /** Transitions the loading spinner to a checkmark */
-      loadingComplete?: never;
-    }
-  | {
-      isLoading: true;
-      loadingLabel?: string;
-      loadingComplete?: boolean;
-    };
+export type LoadingProps = {
+  /** When loading is true, the content will be replaced with a spinner.
+   * When it is false, the content will be shown normally */
+  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 SortDirection = "ascending" | "descending" | undefined;
 
diff --git a/packages/atomic-fuel/src/types.d.ts b/packages/atomic-fuel/src/types.d.ts
deleted file mode 100644
index dba4ceb3..00000000
--- a/packages/atomic-fuel/src/types.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-declare module 'classnames';
\ No newline at end of file