@dmsi/wedgekit-react 0.0.2

package/dist/types.cjs

@@ -0,0 +1,18 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/types.ts
+var types_exports = {};
+module.exports = __toCommonJS(types_exports);

package/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "@dmsi/wedgekit-react",
+  "private": false,
+  "version": "0.0.2",
+  "type": "module",
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "lint": "eslint . --max-warnings 0",
+    "fmt": "prettier --write src/**/*.{ts,tsx,css,json}"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "exports": {
+    "./components/*": {
+      "types": "./src/components/*.tsx",
+      "import": "./dist/components/*.js",
+      "require": "./dist/components/*.cjs"
+    },
+    "./types": {
+      "types": "./src/types.ts",
+      "import": "./dist/types.js",
+      "require": "./dist/types.cjs"
+    },
+    "./styles.css": "./dist/index.css",
+    "./fonts.css": "./dist/fonts.css",
+    "./package.json": "./package.json"
+  },
+  "dependencies": {
+    "@dmsi/wedgekit-react": "*",
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/modifiers": "^9.0.0",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@headlessui/react": "^2.2.4",
+    "@js-temporal/polyfill": "^0.5.1",
+    "@tanstack/react-table": "^8.21.3",
+    "@tanstack/react-virtual": "^3.13.12",
+    "clsx": "^2.1.1",
+    "react-use": "^17.6.0"
+  },
+  "peerDependencies": {
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4.1.11",
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6",
+    "@typescript-eslint/eslint-plugin": "^8.35.1",
+    "eslint": "^9.30.1",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.20",
+    "prettier": "^3.6.2",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "tailwindcss": "^4.1.11",
+    "tsup": "^8.5.0",
+    "typescript": "5.8.3"
+  },
+  "optionalDependencies": {
+    "@rollup/rollup-linux-x64-gnu": "4.42.0",
+    "lightningcss-linux-x64-gnu": "1.30.1"
+  }
+}

package/src/brand.css

@@ -0,0 +1,125 @@
+[data-theme="brand"] {
+  --color-text-primary-normal: var(--color-neutral-000);
+
+  --color-text-primary-disabled: var(--color-neutral-400);
+  --color-text-primary-error: var(--color-critical-200);
+
+  --color-text-secondary-normal: var(--color-neutral-200);
+  --color-text-secondary-disabled: var(--color-neutral-400);
+  --color-text-secondary-error: var(--color-critical-200);
+
+  --color-text-success-normal: var(--color-success-200);
+  --color-text-success-disabled: var(--color-neutral-300);
+  --color-text-success-error: var(--color-critical-200);
+
+  --color-text-warning-normal: var(--color-warning-200);
+  --color-text-warning-disabled: var(--color-neutral-300);
+  --color-text-warning-error: var(--color-critical-200);
+
+  --color-text-link-normal: var(--color-link-000);
+  --color-text-link-hover: var(--color-brand-200);
+  --color-text-link-active: var(--color-brand-200);
+  --color-text-link-disabled: var(--color-neutral-400);
+
+  --color-border-primary-normal: var(--color-brand-200);
+  --color-border-primary-focus: var(--color-neutral-000);
+  --color-border-primary-error: var(--color-critical-300);
+
+  --color-icon-primary-normal: var(--color-brand-200);
+  --color-icon-primary-disabled: var(--color-neutral-400);
+
+  --color-icon-success-normal: var(--color-success-400);
+  --color-icon-success-disabled: var(--color-neutral-400);
+
+  --color-icon-warning-normal: var(--color-warning-400);
+  --color-icon-warning-disabled: var(--color-neutral-400);
+
+  --color-icon-critical-normal: var(--color-critical-400);
+  --color-icon-critical-disabled: var(--color-neutral-400);
+
+  --color-background-primary-normal: var(--color-brand-400);
+  --color-background-grouped-primary-normal: var(--color-brand-400);
+  --color-background-secondary-normal: var(--color-brand-500);
+  --color-background-grouped-secondary-normal: var(--color-brand-500);
+  --color-background-success-normal: var(--color-success-400);
+  --color-background-warning-normal: var(--color-warning-400);
+  --color-background-critical-normal: var(--color-critical-400);
+
+  --color-text-action-primary-normal: var(--color-action-000);
+  --color-text-action-primary-hover: var(--color-brand-200);
+  --color-text-action-primary-active: var(--color-brand-200);
+  --color-text-action-primary-disabled: var(--color-neutral-400);
+
+  --color-text-on-action-primary-normal: var(--color-brand-400);
+  --color-text-on-action-primary-hover: var(--color-brand-200);
+  --color-text-on-action-primary-active: var(--color-brand-200);
+  --color-text-on-action-primary-disabled: var(--color-neutral-400);
+
+  --color-text-action-critical-normal: var(--color-critical-200);
+  --color-text-action-critical-hover: var(--color-critical-300);
+  --color-text-action-critical-active: var(--color-critical-200);
+  --color-text-action-critical-disabled: var(--color-neutral-400);
+
+  --color-border-action-normal: var(--color-neutral-000);
+  --color-border-action-hover: var(--color-brand-200);
+  --color-border-action-active: var(--color-brand-200);
+  --color-border-action-disabled: var(--color-neutral-200);
+
+  --color-text-critical-normal: var(--color-critical-200);
+  --color-text-critical-disabled: var(--color-neutral-300);
+  --color-text-critical-error: var(--color-critical-200);
+
+  --color-border-action-critical-normal: var(--color-critical-200);
+  --color-border-action-critical-hover: var(--color-critical-300);
+  --color-border-action-critical-active: var(--color-critical-200);
+  --color-border-action-critical-disabled: var(--color-neutral-200);
+
+  --color-icon-action-primary-normal: var(--color-neutral-000);
+  --color-icon-action-primary-hover: var(--color-brand-200);
+  --color-icon-action-primary-active: var(--color-brand-100);
+  --color-icon-action-primary-disabled: var(--color-neutral-300);
+
+  --color-icon-action-secondary-normal: var(--color-neutral-000);
+  --color-icon-action-secondary-hover: var(--color-brand-200);
+  --color-icon-action-secondary-active: var(--color-brand-200);
+  --color-icon-action-secondary-disabled: var(--color-neutral-400);
+
+  --color-icon-on-action-primary-normal: var(--color-brand-400);
+  --color-icon-on-action-primary-hover: var(--color-brand-500);
+  --color-icon-on-action-primary-active: var(--color-brand-300);
+  --color-icon-on-action-primary-disabled: var(--color-neutral-400);
+
+  --color-icon-action-critical-normal: var(--color-critical-200);
+  --color-icon-action-critical-hover: var(--color-critical-300);
+  --color-icon-action-critical-active: var(--color-critical-200);
+  --color-icon-action-critical-disabled: var(--color-neutral-400);
+
+  --color-icon-brand-primary-normal: var(--color-neutral-000);
+  --color-icon-brand-primary-hover: var(--color-brand-200);
+  --color-icon-brand-primary-active: var(--color-neutral-000);
+  --color-icon-brand-primary-disabled: var(--color-neutral-300);
+
+  --color-background-action-primary-normal: var(--color-action-000);
+  --color-background-action-primary-hover: var(--color-brand-200);
+  --color-background-action-primary-active: var(--color-neutral-000);
+  --color-background-action-primary-disabled: var(--color-neutral-200);
+
+  --color-background-action-secondary-normal: var(--color-brand-400);
+  --color-background-action-secondary-hover: var(--color-brand-500);
+  --color-background-action-secondary-active: var(--color-brand-400);
+  --color-background-action-secondary-disabled: var(--color-neutral-200);
+
+  --color-background-brand-normal: var(--color-brand-400);
+
+  --color-background-action-critical-primary-normal: var(--color-critical-400);
+  --color-background-action-critical-primary-hover: var(--color-critical-500);
+  --color-background-action-critical-primary-active: var(--color-critical-300);
+  --color-background-action-critical-primary-disabled: var(--color-neutral-200);
+
+  --color-background-action-critical-secondary-normal: var(--color-brand-400);
+  --color-background-action-critical-secondary-hover: var(--color-brand-500);
+  --color-background-action-critical-secondary-active: var(--color-brand-400);
+  --color-background-action-critical-secondary-disabled: var(
+    --color-neutral-200
+  );
+}

package/src/classNames.ts

@@ -0,0 +1,144 @@
+import clsx from "clsx";
+
+export const typography = {
+  display1: clsx(
+    "font-sans font-semibold",
+    "text-display-1-mobile desktop:text-display-1-desktop compact:text-display-1-desktop-compact",
+    "leading-display-1-mobile desktop:leading-display-1-desktop",
+  ),
+
+  display2: clsx(
+    "font-sans font-bold",
+    "text-display-2-mobile desktop:text-display-2-desktop compact:text-display-2-desktop-compact",
+    "leading-display-2-mobile desktop:leading-display-2-desktop",
+  ),
+
+  heading1: clsx(
+    "font-sans font-semibold",
+    "text-heading-1-mobile desktop:text-heading-1-desktop compact:text-heading-1-desktop-compact",
+    "leading-heading-1-mobile desktop:leading-heading-1-desktop",
+  ),
+
+  heading2: clsx(
+    "font-sans font-normal",
+    "text-heading-2-mobile desktop:text-heading-2-desktop compact:text-heading-2-desktop-compact",
+    "leading-heading-2-mobile desktop:leading-heading-2-desktop",
+  ),
+
+  heading3: clsx(
+    "font-sans font-semibold",
+    "text-heading-3-mobile desktop:text-heading-3-desktop compact:text-heading-3-desktop-compact",
+    "leading-heading-3-mobile desktop:leading-heading-3-desktop",
+  ),
+
+  subheader: clsx(
+    "font-sans font-semibold",
+    "text-subheader-mobile desktop:text-subheader-desktop compact:text-subheader-desktop-compact",
+    "leading-subheader-mobile desktop:leading-subheader-desktop",
+  ),
+
+  link: clsx(
+    "font-sans font-normal",
+    "text-link-mobile desktop:text-link-desktop compact:text-link-desktop-compact",
+    "leading-link-mobile desktop:leading-link-desktop",
+  ),
+  buttonLabel: clsx(
+    "font-sans font-semibold",
+    "text-label-mobile desktop:text-label-desktop compact:text-label-desktop-compact",
+    "leading-label-mobile desktop:leading-label-desktop",
+  ),
+
+  label: clsx(
+    "font-sans font-semibold",
+    "text-label-mobile desktop:text-label-desktop compact:text-label-desktop-compact",
+    "leading-label-mobile desktop:leading-label-desktop",
+  ),
+
+  paragraph: clsx(
+    "font-sans font-normal",
+    "text-paragraph-mobile desktop:text-paragraph-desktop compact:text-paragraph-desktop-compact",
+    "leading-paragraph-mobile desktop:leading-paragraph-desktop",
+  ),
+
+  caption: clsx(
+    "font-sans font-normal",
+    "text-caption-mobile desktop:text-caption-desktop compact:text-caption-desktop-compact",
+    "leading-caption-mobile desktop:leading-caption-desktop",
+  ),
+};
+
+export const baseTransition = clsx(
+  "transition-colors duration-100 ease-in-out",
+);
+
+export const componentGap = clsx(
+  "gap-mobile-component-gap desktop:gap-desktop-component-gap compact:gap-desktop-compact-component-gap",
+);
+
+export const paddingUsingComponentGap = clsx(
+  "p-mobile-component-gap desktop:p-desktop-component-gap compact:p-desktop-compact-component-gap",
+);
+
+export const paddingYUsingLayoutGroupGap = clsx(
+  "py-mobile-layout-group-gap desktop:py-desktop-layout-group-gap compact:py-desktop-compact-layout-group-gap",
+);
+
+export const componentPadding = clsx(
+  "p-mobile-component-padding desktop:p-desktop-component-padding compact:p-desktop-compact-component-padding",
+);
+
+export const componentPaddingBottom = clsx(
+  "pb-mobile-component-padding desktop:pb-desktop-component-padding compact:pb-desktop-compact-component-padding",
+);
+
+export const componentPaddingY = clsx(
+  "py-mobile-component-padding desktop:py-desktop-component-padding compact:py-desktop-compact-component-padding",
+);
+
+export const componentPaddingXUsingComponentGap = clsx(
+  "px-mobile-component-gap desktop:px-desktop-component-gap compact:px-desktop-compact-component-gap",
+);
+
+export const componentPaddingYUsingComponentGap = clsx(
+  "py-mobile-component-gap desktop:py-desktop-component-gap compact:py-desktop-compact-component-gap",
+);
+
+export const componentPaddingMinusBorder = clsx(
+  "p-[calc(var(--spacing-mobile-component-padding)_-_1px)] desktop:p-[calc(var(--spacing-desktop-component-padding)_-_1px)] compact:p-[calc(var(--spacing-desktop-compact-component-padding)_-_1px)]",
+);
+
+export const componentPaddingMinus2pxBorder = clsx(
+  "p-[calc(var(--spacing-mobile-component-padding)_-_2px)] desktop:p-[calc(var(--spacing-desktop-component-padding)_-_2px)] compact:p-[calc(var(--spacing-desktop-compact-component-padding)_-_2px)]",
+);
+
+export const layoutPaddingBottom = clsx(
+  "pb-mobile-layout-padding desktop:pb-desktop-layout-padding compact:pb-desktop-compact-layout-padding",
+);
+
+export const layoutPaddingY = clsx(
+  "py-mobile-layout-padding desktop:py-desktop-layout-padding compact:py-desktop-compact-layout-padding",
+);
+
+export const containerPaddingX = clsx(
+  "px-mobile-container-padding desktop:px-desktop-container-padding compact:px-desktop-compact-container-padding",
+);
+
+export const containerPaddingY = clsx(
+  "py-mobile-container-padding desktop:py-desktop-container-padding compact:py-desktop-compact-container-padding",
+);
+
+export const layoutGroupGapPaddingY = clsx(
+  "py-mobile-layout-group-gap desktop:py-desktop-layout-group-gap compact:py-desktop-compact-layout-group-gap",
+);
+
+export const layoutGroupGap = clsx(
+  "gap-mobile-layout-group-gap desktop:gap-desktop-layout-group-gap compact:gap-desktop-compact-layout-group-gap",
+);
+
+export const layoutGap = clsx(
+  "gap-mobile-layout-gap desktop:gap-desktop-layout-gap compact:gap-desktop-compact-layout-gap",
+);
+
+export const gapUsingContainerPadding = clsx(
+  "gap-mobile-container-padding desktop:gap-desktop-container-padding compact:gap-desktop-compact-container-padding",
+);

package/src/components/Breadcrumbs.tsx

@@ -0,0 +1,116 @@
+"use client";
+
+import React, { useLayoutEffect, useState } from "react";
+import clsx from "clsx";
+import { Link } from "./Link";
+
+import { Icon } from "./Icon";
+
+type BreadcrumbsProps = {
+  asCardStyle?: boolean;
+  path?: string; // Optional override for SSR / testing
+  crumbs: BreadcrumbProps[];
+};
+
+type BreadcrumbProps = {
+  href: string;
+  children: React.ReactNode;
+  onClick?: () => void; // Optional click handler
+};
+
+export const Breadcrumb = ({ href, children, onClick }: BreadcrumbProps) => {
+  const linkPadding = clsx(
+    "py-[calc(var(--spacing-mobile-component-padding)_+_3px)] !text-text-link-normal  whitespace-nowrap",
+  );
+
+  return (
+    <li key={href} className="flex items-center">
+      <Link className={linkPadding} href={href} onClick={onClick}>
+        {children}
+      </Link>
+    </li>
+  );
+};
+
+const Chevron = () => (
+  <li className="flex items-center">
+    <Icon name="chevron_right" size={16} />
+  </li>
+);
+
+export const Breadcrumbs = ({
+  asCardStyle,
+
+  crumbs,
+}: BreadcrumbsProps) => {
+  const scrollableElement = React.useRef<HTMLElement | null>(null);
+
+  const [isOverflow, setIsOverflow] = useState(false);
+
+  useLayoutEffect(() => {
+    console.log(scrollableElement.current);
+    scrollableElement.current?.scrollTo({
+      left: scrollableElement.current?.scrollWidth ?? 0,
+      behavior: "instant",
+    });
+
+    updateOverflow();
+    // Scroll to the start of the breadcrumbs when the component mounts
+  }, [scrollableElement, crumbs]);
+
+  const updateOverflow = () => {
+    if (!scrollableElement.current) return;
+
+    // Check if the scrollable element has overflow
+    setIsOverflow(
+      scrollableElement.current.scrollWidth !==
+        scrollableElement.current.clientWidth &&
+        scrollableElement.current.scrollLeft > 0,
+    );
+  };
+
+  return (
+    <nav
+      className={clsx(
+        "relative select-none flex items-center  max-w-full w-full",
+        {
+          "bg-white rounded-base shadow-4 px-desktop-layout-padding":
+            asCardStyle,
+          "px-desktop-container-padding": !asCardStyle,
+        },
+      )}
+      aria-label="Breadcrumb"
+    >
+      <div
+        className={clsx(
+          isOverflow ? "opacity-100" : "opacity-0",
+          "absolute left-6 top-0 h-full w-12 bg-gradient-to-r from-white to-transparent pointer-events-none z-10 transition",
+        )}
+      />
+
+      <ol
+        className="flex items-center overflow-x-scroll"
+        style={{ scrollbarWidth: "none" }}
+        onScroll={updateOverflow}
+        ref={(el) => {
+          scrollableElement.current = el;
+        }}
+      >
+        {crumbs.map((crumb, index) => {
+          const { href, children, onClick } = crumb;
+
+          return (
+            <React.Fragment key={index}>
+              {index > 0 && <Chevron />}
+              <Breadcrumb href={href} onClick={onClick}>
+                {children}
+              </Breadcrumb>
+            </React.Fragment>
+          );
+        })}
+      </ol>
+    </nav>
+  );
+};
+
+Breadcrumbs.displayName = "Breadcrumbs";

package/src/components/Button.tsx

@@ -0,0 +1,210 @@
+import clsx from "clsx";
+import { ReactNode, ButtonHTMLAttributes } from "react";
+import {
+  baseTransition,
+  componentGap,
+  componentPaddingMinus2pxBorder,
+  componentPaddingXUsingComponentGap,
+  paddingUsingComponentGap,
+  typography,
+} from "../classNames";
+import { AsProps } from "../types";
+type Tags = "a" | "button" | React.ElementType;
+
+type BaseButtonProps = Omit<
+  ButtonHTMLAttributes<HTMLButtonElement>,
+  "children"
+> & {
+  as?: Tags;
+  variant?:
+    | "primary"
+    | "secondary"
+    | "tertiary"
+    | "primary-critical"
+    | "secondary-critical"
+    | "tertiary-critical"
+    | "navigation";
+  iconOnly?: boolean;
+  block?: boolean;
+  className?: string;
+  classNameLabel?: string;
+  disabled?: boolean;
+  colorClassName?: string;
+  href?: string;
+};
+
+// At least one of leftIcon, rightIcon, or children must be provided
+type RequireAtLeastOneContent =
+  | { leftIcon: ReactNode; rightIcon?: ReactNode; children?: ReactNode }
+  | { rightIcon: ReactNode; leftIcon?: ReactNode; children?: ReactNode }
+  | { children: ReactNode; leftIcon?: ReactNode; rightIcon?: ReactNode };
+
+export type ButtonProps = BaseButtonProps & RequireAtLeastOneContent;
+
+export const Button = ({
+  variant = "primary",
+  as = "button",
+  block,
+  leftIcon,
+  rightIcon,
+  className,
+  classNameLabel,
+  disabled = false,
+  children,
+  iconOnly = false,
+  colorClassName,
+  href,
+  ...props
+}: AsProps<Tags> & ButtonProps) => {
+  
+  const primaryVariantStyles =
+    variant === "primary" &&
+    clsx(
+      colorClassName?.trim()
+        ? colorClassName
+        : "text-text-on-action-primary-normal",
+      "bg-background-action-primary-normal border-background-action-primary-normal",
+      "hover:bg-background-action-primary-hover hover:border-background-action-primary-hover",
+      "focus:bg-background-action-primary-hover focus:border-background-action-primary-hover focus:outline-0",
+      "active:bg-background-action-primary-active active:border-background-action-primary-active",
+      "disabled:bg-background-action-primary-disabled disabled:border-background-action-primary-disabled disabled:text-text-on-action-primary-disabled",
+    );
+
+  const secondaryVariantStyles =
+    variant === "secondary" &&
+    clsx(
+      colorClassName?.trim()
+        ? colorClassName
+        : "text-text-action-primary-normal",
+      "bg-background-action-secondary-normal border-border-action-normal",
+      "hover:bg-background-action-secondary-hover hover:border-border-action-hover hover:text-text-action-primary-hover",
+      "focus:bg-background-action-secondary-hover focus:border-border-action-hover focus:text-text-action-primary-hover focus:outline-0",
+      "active:bg-background-action-secondary-active active:border-border-action-active active:text-text-action-primary-active",
+      "disabled:bg-background-action-primary-disabled disabled:border-border-action-disabled disabled:text-text-action-primary-disabled",
+    );
+
+  const tertiaryVariantStyles =
+    variant === "tertiary" &&
+    clsx(
+      "bg-transparent border-transparent",
+      iconOnly
+        ? colorClassName?.trim()
+          ? colorClassName
+          : "text-icon-action-primary-normal"
+        : colorClassName?.trim()
+          ? colorClassName
+          : "text-text-action-primary-normal",
+      "bg-transparent border-transparent",
+      "hover:bg-background-action-secondary-hover hover:border-background-action-secondary-hover hover:text-text-action-primary-hover",
+      "focus:bg-background-action-secondary-hover focus:border-background-action-secondary-hover focus:text-text-action-primary-hover focus:outline-0",
+      "active:bg-background-action-secondary-active active:border-transparent active:text-text-action-primary-active",
+      "disabled:bg-transparent disabled:border-transparent disabled:text-text-action-primary-disabled",
+    );
+
+  const primaryCriticalVariantStyles =
+    variant === "primary-critical" &&
+    clsx(
+      colorClassName?.trim()
+        ? colorClassName
+        : "text-text-on-action-primary-normal",
+      "bg-background-action-critical-primary-normal border-background-action-critical-primary-normal",
+      "hover:bg-background-action-critical-primary-hover hover:border-background-action-critical-primary-hover",
+      "focus:bg-background-action-critical-primary-hover focus:border-background-action-critical-primary-hover focus:outline-0",
+      "active:bg-background-action-critical-primary-active active:border-background-action-critical-primary-active",
+      "disabled:bg-background-action-critical-primary-disabled disabled:border-background-action-critical-primary-disabled disabled:text-text-on-action-primary-disabled",
+    );
+
+  const secondaryCriticalVariantStyles =
+    variant === "secondary-critical" &&
+    clsx(
+      colorClassName?.trim()
+        ? colorClassName
+        : "text-text-action-critical-normal",
+      "bg-background-action-critical-secondary-normal border-border-action-critical-normal",
+      "hover:bg-background-action-critical-secondary-hover hover:border-border-action-critical-hover hover:text-text-action-critical-hover",
+      "focus:bg-background-action-critical-secondary-hover focus:border-border-action-critical-hover focus:text-text-action-critical-hover focus:outline-0",
+      "active:bg-background-action-critical-secondary-active active:border-border-action-critical-active active:text-text-action-critical-active",
+      "disabled:bg-background-action-critical-disabled disabled:border-border-action-critical-disabled disabled:text-text-action-critical-disabled",
+    );
+
+  const tertiaryCriticalVariantStyles =
+    variant === "tertiary-critical" &&
+    clsx(
+      colorClassName?.trim()
+        ? colorClassName
+        : "text-text-action-critical-normal",
+      "bg-transparent border-transparent text-text-action-critical-normal",
+      "hover:bg-background-action-critical-secondary-hover hover:border-background-action-critical-secondary-hover hover:text-text-action-critical-hover",
+      "focus:bg-background-action-critical-secondary-hover focus:border-background-action-critical-secondary-hover focus:text-text-action-critical-hover focus:outline-0",
+      "active:bg-background-action-critical-secondary-active active:border-background-action-critical-secondary-active active:text-text-action-critical-active",
+      "disabled:bg-transparent disabled:border-transparent disabled:text-text-action-critical-disabled",
+    );
+
+  const navigationVarianStyles =
+    variant === "navigation" &&
+    clsx(
+      colorClassName?.trim()
+        ? colorClassName
+        : "text-text-on-action-primary-normal",
+      "bg-transparent",
+      "hover:bg-background-on-action-secondary-hover hover:text-brand-text-action-primary-hover", 
+      // "hover:bg-background-action-secondary-hover hover:text-text-action-primary-hover", // Will use this once colors are finalized
+      "focus:bg-background-on-action-secondary-hover focus:text-brand-text-action-primary-hover focus:outline-0",
+      // "focus:bg-background-action-secondary-hover focus:text-text-action-primary-hover", // Will use this once colors are finalized
+      "active:bg-background-on-action-secondary-active active:text-brand-text-action-primary-active",
+      // "active:bg-background-action-secondary-active active:text-text-action-primary-active", // Will use this once colors are finalized
+      "disabled:bg-transparent disabled:text-text-on-action-primary-disabled",
+      "flex-col",
+      paddingUsingComponentGap,
+    );
+
+  const notNavigationVariantStyles =
+    variant !== "navigation" &&
+    clsx("border-2 flex-row", componentPaddingMinus2pxBorder, componentGap);
+
+  const buttonClasses = clsx(
+    disabled ? "cursor-default" : "cursor-pointer",
+    block ? "w-full" : "w-fit",
+    baseTransition,
+    "rounded-sm whitespace-nowrap inline-flex items-center justify-center group/btn",
+    primaryVariantStyles,
+    secondaryVariantStyles,
+    tertiaryVariantStyles,
+    primaryCriticalVariantStyles,
+    secondaryCriticalVariantStyles,
+    tertiaryCriticalVariantStyles,
+
+    navigationVarianStyles,
+    notNavigationVariantStyles,
+    className,
+  );
+
+  const labelClasses = clsx(
+    "min-h-6 flex items-center justify-center",
+    classNameLabel,
+    componentPaddingXUsingComponentGap,
+    typography.buttonLabel,
+  );
+
+  const Element = href ? "a" : as;
+
+  return (
+    <Element
+      type={Element === "button" ? "button" : undefined}
+      className={buttonClasses}
+      {...props}
+      disabled={disabled}
+      href={href}
+    >
+      {leftIcon && leftIcon}
+
+      {!iconOnly && children && (
+        <span className={labelClasses}>{children}</span>
+      )}
+
+      {rightIcon && rightIcon}
+    </Element>
+  );
+};
+
+Button.displayName = "Button";