@dmsi/wedgekit-react 0.0.2

package/dist/components/Swatch.js

@@ -0,0 +1,1319 @@
+import {
+  Stack
+} from "../chunk-U42SKNR6.js";
+import {
+  Display1
+} from "../chunk-27KIIUAR.js";
+import {
+  Heading2,
+  Heading3
+} from "../chunk-TYI74BSP.js";
+import {
+  Paragraph
+} from "../chunk-K3IKUSZW.js";
+import {
+  typography
+} from "../chunk-KX3O6GJ6.js";
+import "../chunk-ORMEWXMH.js";
+
+// src/components/Swatch.tsx
+import clsx from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Swatch = ({ className, colorName, colorHex }) => {
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-desktop-layout-padding", children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `w-25 h-18 rounded-xl border border-solid border-border-primary-normal ${className}`
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "w-full flex flex-col text-center text-label gap-desktop-component-gap", children: [
+      /* @__PURE__ */ jsx("span", { className: clsx(typography.paragraph), children: colorName }),
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: clsx(
+            typography.caption,
+            "text-text-secondary-normal uppercase"
+          ),
+          children: colorHex
+        }
+      )
+    ] })
+  ] });
+};
+var Swatches = () => {
+  return /* @__PURE__ */ jsxs(Stack, { elevation: 0, items: "start", justify: "start", sizing: "container", children: [
+    /* @__PURE__ */ jsx(Display1, { children: "Color Primitives" }),
+    /* @__PURE__ */ jsx(Display1, { children: "Branded Colors" }),
+    /* @__PURE__ */ jsx(Paragraph, { children: "As different customers with their own brands become more integrated with the Millwork eCatalog, we want to be able to offer some customization of the UI to align with their branding. There can be different palettes swapped out depending on brand, but these are the color variables that get defined by a specific hex value and may use seperate light and dark palettes." }),
+    /* @__PURE__ */ jsx(Heading3, { children: "Brand" }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-row gap-4", children: [
+      /* @__PURE__ */ jsx(
+        Swatch,
+        {
+          className: "bg-brand-500",
+          colorName: "Brand-500",
+          colorHex: "#9e3004"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Swatch,
+        {
+          className: "bg-brand-400",
+          colorName: "Brand-400",
+          colorHex: "#df4405"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Swatch,
+        {
+          className: "bg-brand-300",
+          colorName: "Brand-300",
+          colorHex: "#e56937"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Swatch,
+        {
+          className: "bg-brand-200",
+          colorName: "Brand-200",
+          colorHex: "#f0a98c"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Swatch,
+        {
+          className: "bg-brand-100",
+          colorName: "Brand-100",
+          colorHex: "#fcece6"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(Heading3, { children: "Action" }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-row gap-4", children: [
+      /* @__PURE__ */ jsx(
+        Swatch,
+        {
+          className: "bg-action-500",
+          colorName: "Action-500",
+          colorHex: "#00365a"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Swatch,
+        {
+          className: "bg-action-400",
+          colorName: "Action-400",
+          colorHex: "#0077c8"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Swatch,
+        {
+          className: "bg-action-300",
+          colorName: "Action-300",
+          colorHex: "#459ad4"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Swatch,
+        {
+          className: "bg-action-200",
+          colorName: "Action-200",
+          colorHex: "#d0e5f4"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Swatch,
+        {
+          className: "bg-action-100",
+          colorName: "Action-100",
+          colorHex: "#e7f2f9"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(Heading3, { children: "Link" }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-row gap-4", children: [
+      /* @__PURE__ */ jsx(
+        Swatch,
+        {
+          className: "bg-link-500",
+          colorName: "Link-500",
+          colorHex: "#00365a"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Swatch,
+        {
+          className: "bg-link-400",
+          colorName: "Link-400",
+          colorHex: "#0077c8"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Swatch,
+        {
+          className: "bg-link-300",
+          colorName: "Link-300",
+          colorHex: "#459ad4"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Swatch,
+        {
+          className: "bg-link-200",
+          colorName: "Link-200",
+          colorHex: "#d0e5f4"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Swatch,
+        {
+          className: "bg-link-100",
+          colorName: "Link-100",
+          colorHex: "#e7f2f9"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(Display1, { children: " Standard Colors" }),
+    /* @__PURE__ */ jsx(Paragraph, { children: "Certain colors should remain constant regardless of branding to help ensure legibility and usability." }),
+    /* @__PURE__ */ jsx(Heading3, { children: "Neutral" }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-row gap-4", children: [
+      /* @__PURE__ */ jsx(
+        Swatch,
+        {
+          className: "bg-neutral-600",
+          colorName: "Neutral-600",
+          colorHex: "#000000"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Swatch,
+        {
+          className: "bg-neutral-500",
+          colorName: "Neutral-500",
+          colorHex: "#1d1e1e"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Swatch,
+        {
+          className: "bg-neutral-450",
+          colorName: "Neutral-450",
+          colorHex: "#3a3a3a"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Swatch,
+        {
+          className: "bg-neutral-400",
+          colorName: "Neutral-400",
+          colorHex: "#6b6d6d"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Swatch,
+        {
+          className: "bg-neutral-300",
+          colorName: "Neutral-300",
+          colorHex: "#c1c1c1"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Swatch,
+        {
+          className: "bg-neutral-200",
+          colorName: "Neutral-200",
+          colorHex: "#ebebeb"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Swatch,
+        {
+          className: "bg-neutral-100",
+          colorName: "Neutral-100",
+          colorHex: "#f7f7f7"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Swatch,
+        {
+          className: "bg-neutral-000",
+          colorName: "Neutral-000",
+          colorHex: "#ffffff"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(Heading3, { children: " Success" }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-row gap-4", children: [
+      /* @__PURE__ */ jsx(
+        Swatch,
+        {
+          className: "bg-success-500",
+          colorName: "Success-500",
+          colorHex: "#126240"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Swatch,
+        {
+          className: "bg-success-400",
+          colorName: "Success-400",
+          colorHex: "#27d68b"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Swatch,
+        {
+          className: "bg-success-300",
+          colorName: "Success-300",
+          colorHex: "#61e1aa"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Swatch,
+        {
+          className: "bg-success-200",
+          colorName: "Success-200",
+          colorHex: "#d7f7e9"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Swatch,
+        {
+          className: "bg-success-100",
+          colorName: "Success-100",
+          colorHex: "#eefbf6"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(Heading3, { children: " Warning" }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-row gap-4", children: [
+      /* @__PURE__ */ jsx(
+        Swatch,
+        {
+          className: "bg-warning-500",
+          colorName: "Warning-500",
+          colorHex: "#91670c"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Swatch,
+        {
+          className: "bg-warning-400",
+          colorName: "Warning-400",
+          colorHex: "#f0a913"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Swatch,
+        {
+          className: "bg-warning-300",
+          colorName: "Warning-300",
+          colorHex: "#f4c053"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Swatch,
+        {
+          className: "bg-warning-200",
+          colorName: "Warning-200",
+          colorHex: "#f9dfa9"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Swatch,
+        {
+          className: "bg-warning-100",
+          colorName: "Warning-100",
+          colorHex: "#fcefd4"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(Heading3, { children: " Critical" }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-row gap-4", children: [
+      /* @__PURE__ */ jsx(
+        Swatch,
+        {
+          className: "bg-critical-500",
+          colorName: "Critical-500",
+          colorHex: "#892615"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Swatch,
+        {
+          className: "bg-critical-400",
+          colorName: "Critical-400",
+          colorHex: "#cc391f"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Swatch,
+        {
+          className: "bg-critical-300",
+          colorName: "Critical-300",
+          colorHex: "#dd5e48"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Swatch,
+        {
+          className: "bg-critical-200",
+          colorName: "Critical-200",
+          colorHex: "#f0b7ad"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Swatch,
+        {
+          className: "bg-critical-100",
+          colorName: "Critical-100",
+          colorHex: "#fbedea"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(Heading3, { children: "Color order for charts, graphs, etc" }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-row gap-4", children: [
+      /* @__PURE__ */ jsx(
+        Swatch,
+        {
+          className: "bg-chart-0",
+          colorName: "Action-400",
+          colorHex: "#0077c8"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Swatch,
+        {
+          className: "bg-chart-1",
+          colorName: "Brand-400",
+          colorHex: "#df4405"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Swatch,
+        {
+          className: "bg-chart-2",
+          colorName: "Teal-400",
+          colorHex: "#40c1ac"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Swatch,
+        {
+          className: "bg-chart-3",
+          colorName: "Warning-400",
+          colorHex: "#f0a913"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Swatch,
+        {
+          className: "bg-chart-4",
+          colorName: "Neutral-400",
+          colorHex: "#6b6d6d"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Swatch,
+        {
+          className: "bg-chart-5",
+          colorName: "Purple-400",
+          colorHex: "#8d267a"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Swatch,
+        {
+          className: "bg-chart-6",
+          colorName: "Orange-400",
+          colorHex: "#cc391f"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("br", {}),
+    /* @__PURE__ */ jsx(Display1, { children: "Color Semantics" }),
+    /* @__PURE__ */ jsxs(Paragraph, { children: [
+      "Because we aim to support custom branding and eventually color modes (dark/light modes), color tokens are used so that we can talk about specific color usages without tying them to specific color values. We can call a color a \u201CPrimary Action Color\u201D and it does not matter if it is blue or green or purple for a specific brand, we can all know what color use we are referring to. These colors are not define by a specific hex value but by the color variables defined in the color palette. These definitions can change between color mode.",
+      /* @__PURE__ */ jsx("br", {}),
+      /* @__PURE__ */ jsx("br", {}),
+      "Tokens are generally referenced by their Name, assuming a normal state unless otherwise specified. For example: A button may be called out to use a \u201Cbackground/action\u201D color, which would reference the \u201Ccolor/background/action/normal\u201D token by default, and the other states as defined."
+    ] }),
+    /* @__PURE__ */ jsx(Heading2, { children: "Text" }),
+    /* @__PURE__ */ jsx(Heading3, { children: "Text/Primary" }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-row gap-4", children: [
+      /* @__PURE__ */ jsx(
+        Swatch,
+        {
+          className: "bg-text-primary-normal",
+          colorName: "Normal",
+          colorHex: "#1d1e1e"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Swatch,
+        {
+          className: "bg-text-primary-disabled",
+          colorName: "Disabled",
+          colorHex: "#c1c1c1"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Swatch,
+        {
+          className: "bg-text-primary-error",
+          colorName: "Error",
+          colorHex: "#cc391f"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(Heading3, { children: "Text/Secondary" }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-row gap-4", children: [
+      /* @__PURE__ */ jsx(
+        Swatch,
+        {
+          className: "bg-text-secondary-normal",
+          colorName: "Normal",
+          colorHex: "#6b6d6d"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Swatch,
+        {
+          className: "bg-text-secondary-disabled",
+          colorName: "Disabled",
+          colorHex: "#c1c1c1"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Swatch,
+        {
+          className: "bg-text-secondary-error",
+          colorName: "Error",
+          colorHex: "#cc391f"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(Heading3, { children: "Text/Brand" }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-row gap-4", children: [
+      /* @__PURE__ */ jsx(
+        Swatch,
+        {
+          className: "bg-brand-400",
+          colorName: "Normal",
+          colorHex: "#df4405"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Swatch,
+        {
+          className: "bg-neutral-300",
+          colorName: "Disabled",
+          colorHex: "#c1c1c1"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Swatch,
+        {
+          className: "bg-critical-400",
+          colorName: "Error",
+          colorHex: "#cc391f"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(Heading3, { children: "Text/Action Primary" }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-row gap-4", children: [
+      /* @__PURE__ */ jsx(
+        Swatch,
+        {
+          className: "bg-text-action-primary-normal",
+          colorName: "Normal",
+          colorHex: "#0077c8"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Swatch,
+        {
+          className: "bg-text-action-primary-hover",
+          colorName: "Hover",
+          colorHex: "#00365a"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Swatch,
+        {
+          className: "bg-text-action-primary-active",
+          colorName: "Active",
+          colorHex: "#459ad4"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Swatch,
+        {
+          className: "bg-text-action-primary-disabled",
+          colorName: "Disabled",
+          colorHex: "#6b6d6d"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(Heading3, { children: "Text/On Action Primary" }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-row gap-4", children: [
+      /* @__PURE__ */ jsx(
+        Swatch,
+        {
+          className: "bg-text-on-action-primary-normal",
+          colorName: "Normal",
+          colorHex: "#ffffff"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Swatch,
+        {
+          className: "bg-text-on-action-primary-hover",
+          colorName: "Hover",
+          colorHex: "#ffffff"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Swatch,
+        {
+          className: "bg-text-on-action-primary-active",
+          colorName: "Active",
+          colorHex: "#ffffff"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Swatch,
+        {
+          className: "bg-text-on-action-primary-disabled",
+          colorName: "Disabled",
+          colorHex: "#6b6d6d"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(Heading3, { children: "Text/Action Critical" }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-row gap-4", children: [
+      /* @__PURE__ */ jsx(
+        Swatch,
+        {
+          className: "bg-text-action-critical-normal",
+          colorName: "Normal",
+          colorHex: "#CC391F"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Swatch,
+        {
+          className: "bg-text-action-critical-hover",
+          colorName: "Hover",
+          colorHex: "#892615"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Swatch,
+        {
+          className: "bg-text-action-critical-active",
+          colorName: "Active",
+          colorHex: "#DD5E48"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Swatch,
+        {
+          className: "bg-text-action-critical-disabled",
+          colorName: "Disabled",
+          colorHex: "#6b6d6d"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(Heading3, { children: "Text/Link" }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-row gap-4", children: [
+      /* @__PURE__ */ jsx(
+        Swatch,
+        {
+          className: "bg-text-link-normal",
+          colorName: "Normal",
+          colorHex: "#0077C8"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Swatch,
+        {
+          className: "bg-text-link-hover",
+          colorName: "Hover",
+          colorHex: "#00365A"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Swatch,
+        {
+          className: "bg-text-link-active",
+          colorName: "Active",
+          colorHex: "#459AD4"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Swatch,
+        {
+          className: "bg-text-link-disabled",
+          colorName: "Disabled",
+          colorHex: "#6b6d6d"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(Heading3, { children: "Text/Success" }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-row gap-4", children: [
+      /* @__PURE__ */ jsx(
+        Swatch,
+        {
+          className: "bg-text-success-normal",
+          colorName: "Normal",
+          colorHex: "#126240"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Swatch,
+        {
+          className: "bg-text-success-disabled",
+          colorName: "Disabled",
+          colorHex: "#6B6D6D"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Swatch,
+        {
+          className: "bg-text-success-error",
+          colorName: "Error",
+          colorHex: "#CC391F"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(Heading3, { children: "Text/Warning" }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-row gap-4", children: [
+      /* @__PURE__ */ jsx(
+        Swatch,
+        {
+          className: "bg-text-warning-normal",
+          colorName: "Normal",
+          colorHex: "#126240"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Swatch,
+        {
+          className: "bg-text-warning-disabled",
+          colorName: "Disabled",
+          colorHex: "#6B6D6D"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Swatch,
+        {
+          className: "bg-text-warning-error",
+          colorName: "Error",
+          colorHex: "#CC391F"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(Heading3, { children: "Text/Critical" }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-row gap-4", children: [
+      /* @__PURE__ */ jsx(
+        Swatch,
+        {
+          className: "bg-text-critical-normal",
+          colorName: "Normal",
+          colorHex: "#CC391F"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Swatch,
+        {
+          className: "bg-text-critical-disabled",
+          colorName: "Disabled",
+          colorHex: "#6B6D6D"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Swatch,
+        {
+          className: "bg-text-critical-error",
+          colorName: "Error",
+          colorHex: "#CC391F"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("br", {}),
+    /* @__PURE__ */ jsx(Heading2, { children: "Icon" }),
+    /* @__PURE__ */ jsx(Heading3, { children: "Icon/Primary" }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-row gap-4", children: [
+      /* @__PURE__ */ jsx(
+        Swatch,
+        {
+          className: "bg-icon-primary-normal",
+          colorName: "Normal",
+          colorHex: "#6B6D6D"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Swatch,
+        {
+          className: "bg-icon-primary-disabled",
+          colorName: "Disabled",
+          colorHex: "#C1C1C1"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(Heading3, { children: "Icon/Success" }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-row gap-4", children: [
+      /* @__PURE__ */ jsx(
+        Swatch,
+        {
+          className: "bg-icon-success-normal",
+          colorName: "Normal",
+          colorHex: "#27D68B"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Swatch,
+        {
+          className: "bg-icon-success-disabled",
+          colorName: "Disabled",
+          colorHex: "#6B6D6D"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(Heading3, { children: "Icon/Warning" }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-row gap-4", children: [
+      /* @__PURE__ */ jsx(
+        Swatch,
+        {
+          className: "bg-icon-warning-normal",
+          colorName: "Normal",
+          colorHex: "#F0A913"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Swatch,
+        {
+          className: "bg-icon-warning-disabled",
+          colorName: "Disabled",
+          colorHex: "#6B6D6D"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(Heading3, { children: "Icon/Critical" }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-row gap-4", children: [
+      /* @__PURE__ */ jsx(
+        Swatch,
+        {
+          className: "bg-icon-critical-normal",
+          colorName: "Normal",
+          colorHex: "#CC391F"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Swatch,
+        {
+          className: "bg-icon-critical-disabled",
+          colorName: "Disabled",
+          colorHex: "#6B6D6D"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(Heading3, { children: "Icon/Action Primary" }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-row gap-4", children: [
+      /* @__PURE__ */ jsx(
+        Swatch,
+        {
+          className: "bg-icon-action-primary-normal",
+          colorName: "Normal",
+          colorHex: "#1D1E1E"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Swatch,
+        {
+          className: "bg-icon-action-primary-hover",
+          colorName: "Hover",
+          colorHex: "#00365A"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Swatch,
+        {
+          className: "bg-icon-action-primary-active",
+          colorName: "Active",
+          colorHex: "#459AD4"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Swatch,
+        {
+          className: "bg-icon-action-primary-disabled",
+          colorName: "Disabled",
+          colorHex: "#C1C1C1"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(Heading3, { children: "Icon/On Action Primary" }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-row gap-4", children: [
+      /* @__PURE__ */ jsx(
+        Swatch,
+        {
+          className: "bg-icon-on-action-primary-normal",
+          colorName: "Normal",
+          colorHex: "#FFFFFF"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Swatch,
+        {
+          className: "bg-icon-on-action-primary-hover",
+          colorName: "Hover",
+          colorHex: "#FFFFFF"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Swatch,
+        {
+          className: "bg-icon-on-action-primary-active",
+          colorName: "Active",
+          colorHex: "#FFFFFF"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Swatch,
+        {
+          className: "bg-icon-on-action-primary-disabled",
+          colorName: "Disabled",
+          colorHex: "#6B6D6D"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(Heading3, { children: "Icon/Action Secondary" }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-row gap-4", children: [
+      /* @__PURE__ */ jsx(
+        Swatch,
+        {
+          className: "bg-icon-action-secondary-normal",
+          colorName: "Normal",
+          colorHex: "#0077C8"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Swatch,
+        {
+          className: "bg-icon-action-secondary-hover",
+          colorName: "Hover",
+          colorHex: "#00365A"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Swatch,
+        {
+          className: "bg-icon-action-secondary-active",
+          colorName: "Active",
+          colorHex: "#459AD4"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Swatch,
+        {
+          className: "bg-icon-action-secondary-disabled",
+          colorName: "Disabled",
+          colorHex: "#6B6D6D"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(Heading3, { children: "Icon/Action Critical" }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-row gap-4", children: [
+      /* @__PURE__ */ jsx(
+        Swatch,
+        {
+          className: "bg-icon-action-critical-normal",
+          colorName: "Normal",
+          colorHex: "#CC391F"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Swatch,
+        {
+          className: "bg-icon-action-critical-hover",
+          colorName: "Hover",
+          colorHex: "#892615"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Swatch,
+        {
+          className: "bg-icon-action-critical-active",
+          colorName: "Active",
+          colorHex: "#DD5E48"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Swatch,
+        {
+          className: "bg-icon-action-critical-disabled",
+          colorName: "Disabled",
+          colorHex: "#6B6D6D"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(Heading3, { children: "Icon/Brand Primary" }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-row gap-4", children: [
+      /* @__PURE__ */ jsx(
+        Swatch,
+        {
+          className: "bg-icon-brand-primary-normal",
+          colorName: "Normal",
+          colorHex: "#DF4405"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Swatch,
+        {
+          className: "bg-icon-brand-primary-hover",
+          colorName: "Hover",
+          colorHex: "#9E3004"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Swatch,
+        {
+          className: "bg-icon-brand-primary-active",
+          colorName: "Active",
+          colorHex: "#E56937"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Swatch,
+        {
+          className: "bg-icon-brand-primary-disabled",
+          colorName: "Disabled",
+          colorHex: "#C1C1C1"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("br", {}),
+    /* @__PURE__ */ jsx(Heading2, { children: "Border" }),
+    /* @__PURE__ */ jsx(Heading3, { children: "Border/Primary" }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-row gap-4", children: [
+      /* @__PURE__ */ jsx(
+        Swatch,
+        {
+          className: "bg-border-primary-normal",
+          colorName: "Normal",
+          colorHex: "#C1C1C1"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Swatch,
+        {
+          className: "bg-border-primary-focus",
+          colorName: "Focus",
+          colorHex: "#0077C8"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Swatch,
+        {
+          className: "bg-border-primary-error",
+          colorName: "Error",
+          colorHex: "#CC391F"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(Heading3, { children: "Border/Action" }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-row gap-4", children: [
+      /* @__PURE__ */ jsx(
+        Swatch,
+        {
+          className: "bg-border-action-normal",
+          colorName: "Normal",
+          colorHex: "#0077C8"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Swatch,
+        {
+          className: "bg-border-action-hover",
+          colorName: "Hover",
+          colorHex: "#00365A"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Swatch,
+        {
+          className: "bg-border-action-active",
+          colorName: "Active",
+          colorHex: "#459AD4"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Swatch,
+        {
+          className: "bg-border-action-disabled",
+          colorName: "Disabled",
+          colorHex: "#EBEBEB"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(Heading3, { children: "Border/Action Critical" }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-row gap-4", children: [
+      /* @__PURE__ */ jsx(
+        Swatch,
+        {
+          className: "bg-border-action-critical-normal",
+          colorName: "Normal",
+          colorHex: "#CC391F"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Swatch,
+        {
+          className: "bg-border-action-critical-hover",
+          colorName: "Hover",
+          colorHex: "#892615"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Swatch,
+        {
+          className: "bg-border-action-critical-active",
+          colorName: "Active",
+          colorHex: "#DD5E48"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Swatch,
+        {
+          className: "bg-border-action-critical-disabled",
+          colorName: "Disabled",
+          colorHex: "#EBEBEB"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("br", {}),
+    /* @__PURE__ */ jsx(Heading2, { children: "Background" }),
+    /* @__PURE__ */ jsx(Heading3, { children: "Background/Primary" }),
+    /* @__PURE__ */ jsx("div", { className: "flex flex-row gap-4", children: /* @__PURE__ */ jsx(
+      Swatch,
+      {
+        className: "bg-background-primary-normal",
+        colorName: "Normal",
+        colorHex: "#FFFFFF"
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Heading3, { children: "Background/Secondary" }),
+    /* @__PURE__ */ jsx("div", { className: "flex flex-row gap-4", children: /* @__PURE__ */ jsx(
+      Swatch,
+      {
+        className: "bg-background-secondary-normal",
+        colorName: "Normal",
+        colorHex: "#c1c1c1"
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Heading3, { children: "Background/Brand" }),
+    /* @__PURE__ */ jsx("div", { className: "flex flex-row gap-4", children: /* @__PURE__ */ jsx(
+      Swatch,
+      {
+        className: "bg-background-brand-normal",
+        colorName: "Normal",
+        colorHex: "#DF4405"
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Heading3, { children: "Background/Grouped Primary" }),
+    /* @__PURE__ */ jsx("div", { className: "flex flex-row gap-4", children: /* @__PURE__ */ jsx(
+      Swatch,
+      {
+        className: "bg-background-grouped-primary-normal",
+        colorName: "Normal",
+        colorHex: "#FFFFFF"
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Heading3, { children: "Background/Grouped Secondary" }),
+    /* @__PURE__ */ jsx("div", { className: "flex flex-row gap-4", children: /* @__PURE__ */ jsx(
+      Swatch,
+      {
+        className: "bg-background-grouped-secondary-normal",
+        colorName: "Normal",
+        colorHex: "#f7f7f7"
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Heading3, { children: "Background/Action Primary" }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-row gap-4", children: [
+      /* @__PURE__ */ jsx(
+        Swatch,
+        {
+          className: "bg-background-action-primary-normal",
+          colorName: "Normal",
+          colorHex: "#0077C8"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Swatch,
+        {
+          className: "bg-background-action-primary-hover",
+          colorName: "Hover",
+          colorHex: "#00365A"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Swatch,
+        {
+          className: "bg-background-action-primary-active",
+          colorName: "Active",
+          colorHex: "#459AD4"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Swatch,
+        {
+          className: "bg-background-action-primary-disabled",
+          colorName: "Disabled",
+          colorHex: "#EBEBEB"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(Heading3, { children: "Background/Action Secondary" }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-row gap-4", children: [
+      /* @__PURE__ */ jsx(
+        Swatch,
+        {
+          className: "bg-background-action-secondary-normal",
+          colorName: "Normal",
+          colorHex: "#FFFFFF"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Swatch,
+        {
+          className: "bg-background-action-secondary-hover",
+          colorName: "Hover",
+          colorHex: "#E7F2F9"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Swatch,
+        {
+          className: "bg-background-action-secondary-active",
+          colorName: "Active",
+          colorHex: "#FFFFFF"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Swatch,
+        {
+          className: "bg-background-action-secondary-disabled",
+          colorName: "Disabled",
+          colorHex: "#EBEBEB"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(Heading3, { children: "Background/Action Critical Primary" }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-row gap-4", children: [
+      /* @__PURE__ */ jsx(
+        Swatch,
+        {
+          className: "bg-background-action-critical-primary-normal",
+          colorName: "Normal",
+          colorHex: "#CC391F"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Swatch,
+        {
+          className: "bg-background-action-critical-primary-hover",
+          colorName: "Hover",
+          colorHex: "#892615"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Swatch,
+        {
+          className: "bg-background-action-critical-primary-active",
+          colorName: "Active",
+          colorHex: "#DD5E48"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Swatch,
+        {
+          className: "bg-background-action-critical-primary-disabled",
+          colorName: "Disabled",
+          colorHex: "#EBEBEB"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(Heading3, { children: "Background/Action Critical Secondary" }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-row gap-4", children: [
+      /* @__PURE__ */ jsx(
+        Swatch,
+        {
+          className: "bg-background-action-critical-secondary-normal",
+          colorName: "Normal",
+          colorHex: "#FFFFFF"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Swatch,
+        {
+          className: "bg-background-action-critical-secondary-hover",
+          colorName: "Hover",
+          colorHex: "#FBEDEA"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Swatch,
+        {
+          className: "bg-background-action-critical-secondary-active",
+          colorName: "Active",
+          colorHex: "#FFFFFF"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Swatch,
+        {
+          className: "bg-background-action-critical-secondary-disabled",
+          colorName: "Disabled",
+          colorHex: "#EBEBEB"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(Heading3, { children: "Background/Success" }),
+    /* @__PURE__ */ jsx("div", { className: "flex flex-row gap-4", children: /* @__PURE__ */ jsx(
+      Swatch,
+      {
+        className: "bg-background-success-normal",
+        colorName: "Normal",
+        colorHex: "#27D68B"
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Heading3, { children: "Background/Warning" }),
+    /* @__PURE__ */ jsx("div", { className: "flex flex-row gap-4", children: /* @__PURE__ */ jsx(
+      Swatch,
+      {
+        className: "bg-background-warning-normal",
+        colorName: "Normal",
+        colorHex: "#F0A913"
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Heading3, { children: "Background/Critical" }),
+    /* @__PURE__ */ jsx("div", { className: "flex flex-row gap-4", children: /* @__PURE__ */ jsx(
+      Swatch,
+      {
+        className: "bg-background-critical-normal",
+        colorName: "Normal",
+        colorHex: "#CC391F"
+      }
+    ) })
+  ] });
+};
+Swatches.displayName = "Swatches";
+export {
+  Swatch,
+  Swatches
+};