@dmsi/wedgekit-react 0.0.26 → 0.0.27

package/dist/components/Swatch.cjs

@@ -202,20 +202,23 @@ var Display = (_a) => {
     as,
     color,
     align,
-    variant = "display1"
+    variant = "display1",
+    id
   } = _b, props = __objRest(_b, [
     "className",
     "children",
     "as",
     "color",
     "align",
-    "variant"
+    "variant",
+    "id"
   ]);
   const defaultElement = variant === "display1" ? "h1" : "h2";
   const Element = as != null ? as : defaultElement;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     Element,
     __spreadProps(__spreadValues({
+      id,
       className: (0, import_clsx2.default)(
         typography[variant],
         className,
@@ -255,38 +258,70 @@ var useFlexClassNames = ({ items, justify, grow }) => (0, import_clsx3.default)(
   justify === "between" && "justify-between",
   justify === "around" && "justify-around"
 );
-var Stack = ({
-  children,
-  items,
-  justify,
-  grow,
-  padding,
-  paddingX,
-  horizontal,
-  horizontalMobile,
-  elevation = 0,
-  rounded,
-  centered,
-  width,
-  maxWidth,
-  minWidth,
-  height,
-  maxHeight,
-  borderColor,
-  backgroundColor,
-  sizing = "none",
-  overflowY = "inherit",
-  overflowX = "inherit",
-  flexShrink,
-  flexGrow,
-  position,
-  top,
-  left
-}) => {
+var Stack = (_a) => {
+  var _b = _a, {
+    children,
+    items,
+    justify,
+    grow,
+    padding,
+    paddingX,
+    horizontal,
+    horizontalMobile,
+    elevation = 0,
+    rounded,
+    centered,
+    width,
+    maxWidth,
+    minWidth,
+    height,
+    maxHeight,
+    borderColor,
+    backgroundColor,
+    sizing = "none",
+    overflowY = "inherit",
+    overflowX = "inherit",
+    flexShrink,
+    flexGrow,
+    position,
+    top,
+    left,
+    id
+  } = _b, props = __objRest(_b, [
+    "children",
+    "items",
+    "justify",
+    "grow",
+    "padding",
+    "paddingX",
+    "horizontal",
+    "horizontalMobile",
+    "elevation",
+    "rounded",
+    "centered",
+    "width",
+    "maxWidth",
+    "minWidth",
+    "height",
+    "maxHeight",
+    "borderColor",
+    "backgroundColor",
+    "sizing",
+    "overflowY",
+    "overflowX",
+    "flexShrink",
+    "flexGrow",
+    "position",
+    "top",
+    "left",
+    "id"
+  ]);
   const flexClassNames = useFlexClassNames({ items, justify, grow });
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     "div",
-    {
+    __spreadProps(__spreadValues({
+      id
+    }, props), {
       style: {
         height: height === "full" ? "100%" : height !== void 0 ? `${height}px` : void 0,
         maxHeight: maxHeight !== void 0 ? `${maxHeight}px` : void 0,
@@ -334,7 +369,7 @@ var Stack = ({
         rounded && "rounded"
       ),
       children
-    }
+    })
   );
 };
 
@@ -353,7 +388,8 @@ var Paragraph = (_a) => {
     tall,
     addOverflow,
     children,
-    as = "p"
+    as = "p",
+    id
   } = _b, props = __objRest(_b, [
     "className",
     "color",
@@ -362,12 +398,15 @@ var Paragraph = (_a) => {
     "tall",
     "addOverflow",
     "children",
-    "as"
+    "as",
+    "id"
   ]);
   const Element = as;
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     Element,
-    __spreadProps(__spreadValues({}, props), {
+    __spreadProps(__spreadValues({
+      id
+    }, props), {
       className: (0, import_clsx4.default)(
         typography.paragraph,
         className,
@@ -397,20 +436,23 @@ var Heading = (_a) => {
     as,
     color,
     align,
-    variant = "heading1"
+    variant = "heading1",
+    id
   } = _b, props = __objRest(_b, [
     "className",
     "children",
     "as",
     "color",
     "align",
-    "variant"
+    "variant",
+    "id"
   ]);
   const defaultElement = variant === "heading1" ? "h1" : variant === "heading2" ? "h2" : "h3";
   const Element = as != null ? as : defaultElement;
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     Element,
     __spreadProps(__spreadValues({
+      id,
       className: (0, import_clsx5.default)(
         typography[variant],
         className,
@@ -436,8 +478,8 @@ Heading3.displayName = "Heading3";
 
 // src/components/Swatch.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
-var Swatch = ({ className, colorName, colorHex }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-col gap-desktop-layout-padding", children: [
+var Swatch = ({ className, colorName, colorHex, id }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { id, className: "flex flex-col gap-desktop-layout-padding", children: [
     /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       "div",
       {
@@ -459,1275 +501,1469 @@ var Swatch = ({ className, colorName, colorHex }) => {
     ] })
   ] });
 };
-var Swatches = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(Stack, { elevation: 0, items: "start", justify: "start", sizing: "container", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Display1, { children: "Color Primitives" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Display1, { children: "Branded Colors" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.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__ */ (0, import_jsx_runtime5.jsx)(Heading3, { children: "Brand" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-row gap-4", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Swatch,
-        {
-          className: "bg-brand-500",
-          colorName: "Brand-500",
-          colorHex: "#9e3004"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Swatch,
-        {
-          className: "bg-brand-400",
-          colorName: "Brand-400",
-          colorHex: "#df4405"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Swatch,
-        {
-          className: "bg-brand-300",
-          colorName: "Brand-300",
-          colorHex: "#e56937"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Swatch,
-        {
-          className: "bg-brand-200",
-          colorName: "Brand-200",
-          colorHex: "#f0a98c"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Swatch,
-        {
-          className: "bg-brand-100",
-          colorName: "Brand-100",
-          colorHex: "#fcece6"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Heading3, { children: "Action" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-row gap-4", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Swatch,
-        {
-          className: "bg-action-500",
-          colorName: "Action-500",
-          colorHex: "#00365a"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Swatch,
-        {
-          className: "bg-action-400",
-          colorName: "Action-400",
-          colorHex: "#0077c8"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Swatch,
-        {
-          className: "bg-action-300",
-          colorName: "Action-300",
-          colorHex: "#459ad4"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Swatch,
-        {
-          className: "bg-action-200",
-          colorName: "Action-200",
-          colorHex: "#d0e5f4"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Swatch,
-        {
-          className: "bg-action-100",
-          colorName: "Action-100",
-          colorHex: "#e7f2f9"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Heading3, { children: "Link" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-row gap-4", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Swatch,
-        {
-          className: "bg-link-500",
-          colorName: "Link-500",
-          colorHex: "#00365a"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Swatch,
-        {
-          className: "bg-link-400",
-          colorName: "Link-400",
-          colorHex: "#0077c8"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Swatch,
-        {
-          className: "bg-link-300",
-          colorName: "Link-300",
-          colorHex: "#459ad4"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Swatch,
-        {
-          className: "bg-link-200",
-          colorName: "Link-200",
-          colorHex: "#d0e5f4"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Swatch,
-        {
-          className: "bg-link-100",
-          colorName: "Link-100",
-          colorHex: "#e7f2f9"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Display1, { children: " Standard Colors" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Paragraph, { children: "Certain colors should remain constant regardless of branding to help ensure legibility and usability." }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Heading3, { children: "Neutral" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-row gap-4", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Swatch,
-        {
-          className: "bg-neutral-600",
-          colorName: "Neutral-600",
-          colorHex: "#000000"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Swatch,
-        {
-          className: "bg-neutral-500",
-          colorName: "Neutral-500",
-          colorHex: "#1d1e1e"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Swatch,
-        {
-          className: "bg-neutral-450",
-          colorName: "Neutral-450",
-          colorHex: "#3a3a3a"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Swatch,
-        {
-          className: "bg-neutral-400",
-          colorName: "Neutral-400",
-          colorHex: "#6b6d6d"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Swatch,
-        {
-          className: "bg-neutral-300",
-          colorName: "Neutral-300",
-          colorHex: "#c1c1c1"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Swatch,
-        {
-          className: "bg-neutral-200",
-          colorName: "Neutral-200",
-          colorHex: "#ebebeb"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Swatch,
-        {
-          className: "bg-neutral-100",
-          colorName: "Neutral-100",
-          colorHex: "#f7f7f7"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Swatch,
-        {
-          className: "bg-neutral-000",
-          colorName: "Neutral-000",
-          colorHex: "#ffffff"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Heading3, { children: " Success" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-row gap-4", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Swatch,
-        {
-          className: "bg-success-500",
-          colorName: "Success-500",
-          colorHex: "#126240"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Swatch,
-        {
-          className: "bg-success-400",
-          colorName: "Success-400",
-          colorHex: "#27d68b"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Swatch,
-        {
-          className: "bg-success-300",
-          colorName: "Success-300",
-          colorHex: "#61e1aa"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Swatch,
-        {
-          className: "bg-success-200",
-          colorName: "Success-200",
-          colorHex: "#d7f7e9"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Swatch,
-        {
-          className: "bg-success-100",
-          colorName: "Success-100",
-          colorHex: "#eefbf6"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Heading3, { children: " Warning" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-row gap-4", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Swatch,
-        {
-          className: "bg-warning-500",
-          colorName: "Warning-500",
-          colorHex: "#91670c"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Swatch,
-        {
-          className: "bg-warning-400",
-          colorName: "Warning-400",
-          colorHex: "#f0a913"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Swatch,
-        {
-          className: "bg-warning-300",
-          colorName: "Warning-300",
-          colorHex: "#f4c053"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Swatch,
-        {
-          className: "bg-warning-200",
-          colorName: "Warning-200",
-          colorHex: "#f9dfa9"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Swatch,
-        {
-          className: "bg-warning-100",
-          colorName: "Warning-100",
-          colorHex: "#fcefd4"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Heading3, { children: " Critical" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-row gap-4", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Swatch,
-        {
-          className: "bg-critical-500",
-          colorName: "Critical-500",
-          colorHex: "#892615"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Swatch,
-        {
-          className: "bg-critical-400",
-          colorName: "Critical-400",
-          colorHex: "#cc391f"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Swatch,
-        {
-          className: "bg-critical-300",
-          colorName: "Critical-300",
-          colorHex: "#dd5e48"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Swatch,
-        {
-          className: "bg-critical-200",
-          colorName: "Critical-200",
-          colorHex: "#f0b7ad"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Swatch,
-        {
-          className: "bg-critical-100",
-          colorName: "Critical-100",
-          colorHex: "#fbedea"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Heading3, { children: "Color order for charts, graphs, etc" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-row gap-4", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Swatch,
-        {
-          className: "bg-chart-0",
-          colorName: "Action-400",
-          colorHex: "#0077c8"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Swatch,
-        {
-          className: "bg-chart-1",
-          colorName: "Brand-400",
-          colorHex: "#df4405"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Swatch,
-        {
-          className: "bg-chart-2",
-          colorName: "Teal-400",
-          colorHex: "#40c1ac"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Swatch,
-        {
-          className: "bg-chart-3",
-          colorName: "Warning-400",
-          colorHex: "#f0a913"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Swatch,
-        {
-          className: "bg-chart-4",
-          colorName: "Neutral-400",
-          colorHex: "#6b6d6d"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Swatch,
-        {
-          className: "bg-chart-5",
-          colorName: "Purple-400",
-          colorHex: "#8d267a"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Swatch,
-        {
-          className: "bg-chart-6",
-          colorName: "Orange-400",
-          colorHex: "#cc391f"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("br", {}),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Display1, { children: "Color Semantics" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.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__ */ (0, import_jsx_runtime5.jsx)("br", {}),
-      /* @__PURE__ */ (0, import_jsx_runtime5.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__ */ (0, import_jsx_runtime5.jsx)(Heading2, { children: "Text" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Heading3, { children: "Text/Primary" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-row gap-4", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Swatch,
-        {
-          className: "bg-text-primary-normal",
-          colorName: "Normal",
-          colorHex: "#1d1e1e"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Swatch,
-        {
-          className: "bg-text-primary-disabled",
-          colorName: "Disabled",
-          colorHex: "#c1c1c1"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Swatch,
-        {
-          className: "bg-text-primary-error",
-          colorName: "Error",
-          colorHex: "#cc391f"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Heading3, { children: "Text/Secondary" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-row gap-4", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Swatch,
-        {
-          className: "bg-text-secondary-normal",
-          colorName: "Normal",
-          colorHex: "#6b6d6d"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Swatch,
-        {
-          className: "bg-text-secondary-disabled",
-          colorName: "Disabled",
-          colorHex: "#c1c1c1"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Swatch,
-        {
-          className: "bg-text-secondary-error",
-          colorName: "Error",
-          colorHex: "#cc391f"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Heading3, { children: "Text/Brand" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-row gap-4", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Swatch,
-        {
-          className: "bg-brand-400",
-          colorName: "Normal",
-          colorHex: "#df4405"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Swatch,
-        {
-          className: "bg-neutral-300",
-          colorName: "Disabled",
-          colorHex: "#c1c1c1"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Swatch,
-        {
-          className: "bg-critical-400",
-          colorName: "Error",
-          colorHex: "#cc391f"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Heading3, { children: "Text/Action Primary" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-row gap-4", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Swatch,
-        {
-          className: "bg-text-action-primary-normal",
-          colorName: "Normal",
-          colorHex: "#0077c8"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Swatch,
-        {
-          className: "bg-text-action-primary-hover",
-          colorName: "Hover",
-          colorHex: "#00365a"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Swatch,
-        {
-          className: "bg-text-action-primary-active",
-          colorName: "Active",
-          colorHex: "#459ad4"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Swatch,
-        {
-          className: "bg-text-action-primary-disabled",
-          colorName: "Disabled",
-          colorHex: "#6b6d6d"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Heading3, { children: "Text/On Action Primary" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-row gap-4", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Swatch,
-        {
-          className: "bg-text-on-action-primary-normal",
-          colorName: "Normal",
-          colorHex: "#ffffff"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Swatch,
-        {
-          className: "bg-text-on-action-primary-hover",
-          colorName: "Hover",
-          colorHex: "#ffffff"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Swatch,
-        {
-          className: "bg-text-on-action-primary-active",
-          colorName: "Active",
-          colorHex: "#ffffff"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Swatch,
-        {
-          className: "bg-text-on-action-primary-disabled",
-          colorName: "Disabled",
-          colorHex: "#6b6d6d"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Heading3, { children: "Text/Action Critical" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-row gap-4", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Swatch,
-        {
-          className: "bg-text-action-critical-normal",
-          colorName: "Normal",
-          colorHex: "#CC391F"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Swatch,
-        {
-          className: "bg-text-action-critical-hover",
-          colorName: "Hover",
-          colorHex: "#892615"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Swatch,
-        {
-          className: "bg-text-action-critical-active",
-          colorName: "Active",
-          colorHex: "#DD5E48"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Swatch,
-        {
-          className: "bg-text-action-critical-disabled",
-          colorName: "Disabled",
-          colorHex: "#6b6d6d"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Heading3, { children: "Text/Link" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-row gap-4", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Swatch,
-        {
-          className: "bg-text-link-normal",
-          colorName: "Normal",
-          colorHex: "#0077C8"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Swatch,
-        {
-          className: "bg-text-link-hover",
-          colorName: "Hover",
-          colorHex: "#00365A"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Swatch,
-        {
-          className: "bg-text-link-active",
-          colorName: "Active",
-          colorHex: "#459AD4"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Swatch,
-        {
-          className: "bg-text-link-disabled",
-          colorName: "Disabled",
-          colorHex: "#6b6d6d"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Heading3, { children: "Text/Success" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-row gap-4", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Swatch,
-        {
-          className: "bg-text-success-normal",
-          colorName: "Normal",
-          colorHex: "#126240"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Swatch,
-        {
-          className: "bg-text-success-disabled",
-          colorName: "Disabled",
-          colorHex: "#6B6D6D"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Swatch,
-        {
-          className: "bg-text-success-error",
-          colorName: "Error",
-          colorHex: "#CC391F"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Heading3, { children: "Text/Warning" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-row gap-4", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Swatch,
-        {
-          className: "bg-text-warning-normal",
-          colorName: "Normal",
-          colorHex: "#126240"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Swatch,
-        {
-          className: "bg-text-warning-disabled",
-          colorName: "Disabled",
-          colorHex: "#6B6D6D"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Swatch,
-        {
-          className: "bg-text-warning-error",
-          colorName: "Error",
-          colorHex: "#CC391F"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Heading3, { children: "Text/Critical" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-row gap-4", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Swatch,
-        {
-          className: "bg-text-critical-normal",
-          colorName: "Normal",
-          colorHex: "#CC391F"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Swatch,
-        {
-          className: "bg-text-critical-disabled",
-          colorName: "Disabled",
-          colorHex: "#6B6D6D"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Swatch,
-        {
-          className: "bg-text-critical-error",
-          colorName: "Error",
-          colorHex: "#CC391F"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("br", {}),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Heading2, { children: "Icon" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Heading3, { children: "Icon/Primary" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-row gap-4", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Swatch,
-        {
-          className: "bg-icon-primary-normal",
-          colorName: "Normal",
-          colorHex: "#6B6D6D"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Swatch,
-        {
-          className: "bg-icon-primary-disabled",
-          colorName: "Disabled",
-          colorHex: "#C1C1C1"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Heading3, { children: "Icon/Success" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-row gap-4", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Swatch,
-        {
-          className: "bg-icon-success-normal",
-          colorName: "Normal",
-          colorHex: "#27D68B"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Swatch,
-        {
-          className: "bg-icon-success-disabled",
-          colorName: "Disabled",
-          colorHex: "#6B6D6D"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Heading3, { children: "Icon/Warning" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-row gap-4", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Swatch,
-        {
-          className: "bg-icon-warning-normal",
-          colorName: "Normal",
-          colorHex: "#F0A913"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Swatch,
-        {
-          className: "bg-icon-warning-disabled",
-          colorName: "Disabled",
-          colorHex: "#6B6D6D"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Heading3, { children: "Icon/Critical" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-row gap-4", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Swatch,
-        {
-          className: "bg-icon-critical-normal",
-          colorName: "Normal",
-          colorHex: "#CC391F"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Swatch,
-        {
-          className: "bg-icon-critical-disabled",
-          colorName: "Disabled",
-          colorHex: "#6B6D6D"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Heading3, { children: "Icon/Action Primary" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-row gap-4", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Swatch,
-        {
-          className: "bg-icon-action-primary-normal",
-          colorName: "Normal",
-          colorHex: "#1D1E1E"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Swatch,
-        {
-          className: "bg-icon-action-primary-hover",
-          colorName: "Hover",
-          colorHex: "#00365A"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Swatch,
-        {
-          className: "bg-icon-action-primary-active",
-          colorName: "Active",
-          colorHex: "#459AD4"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Swatch,
-        {
-          className: "bg-icon-action-primary-disabled",
-          colorName: "Disabled",
-          colorHex: "#C1C1C1"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Heading3, { children: "Icon/On Action Primary" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-row gap-4", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Swatch,
-        {
-          className: "bg-icon-on-action-primary-normal",
-          colorName: "Normal",
-          colorHex: "#FFFFFF"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Swatch,
-        {
-          className: "bg-icon-on-action-primary-hover",
-          colorName: "Hover",
-          colorHex: "#FFFFFF"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Swatch,
-        {
-          className: "bg-icon-on-action-primary-active",
-          colorName: "Active",
-          colorHex: "#FFFFFF"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Swatch,
-        {
-          className: "bg-icon-on-action-primary-disabled",
-          colorName: "Disabled",
-          colorHex: "#6B6D6D"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Heading3, { children: "Icon/Action Secondary" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-row gap-4", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Swatch,
-        {
-          className: "bg-icon-action-secondary-normal",
-          colorName: "Normal",
-          colorHex: "#0077C8"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Swatch,
-        {
-          className: "bg-icon-action-secondary-hover",
-          colorName: "Hover",
-          colorHex: "#00365A"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Swatch,
-        {
-          className: "bg-icon-action-secondary-active",
-          colorName: "Active",
-          colorHex: "#459AD4"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Swatch,
-        {
-          className: "bg-icon-action-secondary-disabled",
-          colorName: "Disabled",
-          colorHex: "#6B6D6D"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Heading3, { children: "Icon/Action Critical" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-row gap-4", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Swatch,
-        {
-          className: "bg-icon-action-critical-normal",
-          colorName: "Normal",
-          colorHex: "#CC391F"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Swatch,
-        {
-          className: "bg-icon-action-critical-hover",
-          colorName: "Hover",
-          colorHex: "#892615"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Swatch,
-        {
-          className: "bg-icon-action-critical-active",
-          colorName: "Active",
-          colorHex: "#DD5E48"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Swatch,
-        {
-          className: "bg-icon-action-critical-disabled",
-          colorName: "Disabled",
-          colorHex: "#6B6D6D"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Heading3, { children: "Icon/Brand Primary" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-row gap-4", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Swatch,
-        {
-          className: "bg-icon-brand-primary-normal",
-          colorName: "Normal",
-          colorHex: "#DF4405"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Swatch,
-        {
-          className: "bg-icon-brand-primary-hover",
-          colorName: "Hover",
-          colorHex: "#9E3004"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Swatch,
-        {
-          className: "bg-icon-brand-primary-active",
-          colorName: "Active",
-          colorHex: "#E56937"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Swatch,
-        {
-          className: "bg-icon-brand-primary-disabled",
-          colorName: "Disabled",
-          colorHex: "#C1C1C1"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("br", {}),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Heading2, { children: "Border" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Heading3, { children: "Border/Primary" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-row gap-4", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Swatch,
-        {
-          className: "bg-border-primary-normal",
-          colorName: "Normal",
-          colorHex: "#C1C1C1"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Swatch,
-        {
-          className: "bg-border-primary-focus",
-          colorName: "Focus",
-          colorHex: "#0077C8"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Swatch,
-        {
-          className: "bg-border-primary-error",
-          colorName: "Error",
-          colorHex: "#CC391F"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Heading3, { children: "Border/Action" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-row gap-4", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Swatch,
-        {
-          className: "bg-border-action-normal",
-          colorName: "Normal",
-          colorHex: "#0077C8"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Swatch,
-        {
-          className: "bg-border-action-hover",
-          colorName: "Hover",
-          colorHex: "#00365A"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Swatch,
-        {
-          className: "bg-border-action-active",
-          colorName: "Active",
-          colorHex: "#459AD4"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Swatch,
-        {
-          className: "bg-border-action-disabled",
-          colorName: "Disabled",
-          colorHex: "#EBEBEB"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Heading3, { children: "Border/Action Critical" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-row gap-4", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Swatch,
-        {
-          className: "bg-border-action-critical-normal",
-          colorName: "Normal",
-          colorHex: "#CC391F"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Swatch,
-        {
-          className: "bg-border-action-critical-hover",
-          colorName: "Hover",
-          colorHex: "#892615"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Swatch,
-        {
-          className: "bg-border-action-critical-active",
-          colorName: "Active",
-          colorHex: "#DD5E48"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Swatch,
-        {
-          className: "bg-border-action-critical-disabled",
-          colorName: "Disabled",
-          colorHex: "#EBEBEB"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("br", {}),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Heading2, { children: "Background" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Heading3, { children: "Background/Primary" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "flex flex-row gap-4", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-      Swatch,
-      {
-        className: "bg-background-primary-normal",
-        colorName: "Normal",
-        colorHex: "#FFFFFF"
-      }
-    ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Heading3, { children: "Background/Secondary" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "flex flex-row gap-4", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-      Swatch,
-      {
-        className: "bg-background-secondary-normal",
-        colorName: "Normal",
-        colorHex: "#c1c1c1"
-      }
-    ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Heading3, { children: "Background/Brand" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "flex flex-row gap-4", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-      Swatch,
-      {
-        className: "bg-background-brand-normal",
-        colorName: "Normal",
-        colorHex: "#DF4405"
-      }
-    ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Heading3, { children: "Background/Grouped Primary" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "flex flex-row gap-4", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-      Swatch,
-      {
-        className: "bg-background-grouped-primary-normal",
-        colorName: "Normal",
-        colorHex: "#FFFFFF"
-      }
-    ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Heading3, { children: "Background/Grouped Secondary" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "flex flex-row gap-4", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-      Swatch,
-      {
-        className: "bg-background-grouped-secondary-normal",
-        colorName: "Normal",
-        colorHex: "#f7f7f7"
-      }
-    ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Heading3, { children: "Background/Action Primary" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-row gap-4", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Swatch,
-        {
-          className: "bg-background-action-primary-normal",
-          colorName: "Normal",
-          colorHex: "#0077C8"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Swatch,
-        {
-          className: "bg-background-action-primary-hover",
-          colorName: "Hover",
-          colorHex: "#00365A"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Swatch,
-        {
-          className: "bg-background-action-primary-active",
-          colorName: "Active",
-          colorHex: "#459AD4"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Swatch,
-        {
-          className: "bg-background-action-primary-disabled",
-          colorName: "Disabled",
-          colorHex: "#EBEBEB"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Heading3, { children: "Background/Action Secondary" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-row gap-4", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Swatch,
-        {
-          className: "bg-background-action-secondary-normal",
-          colorName: "Normal",
-          colorHex: "#FFFFFF"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Swatch,
-        {
-          className: "bg-background-action-secondary-hover",
-          colorName: "Hover",
-          colorHex: "#E7F2F9"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Swatch,
-        {
-          className: "bg-background-action-secondary-active",
-          colorName: "Active",
-          colorHex: "#FFFFFF"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Swatch,
-        {
-          className: "bg-background-action-secondary-disabled",
-          colorName: "Disabled",
-          colorHex: "#EBEBEB"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Heading3, { children: "Background/Action Critical Primary" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-row gap-4", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Swatch,
-        {
-          className: "bg-background-action-critical-primary-normal",
-          colorName: "Normal",
-          colorHex: "#CC391F"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Swatch,
-        {
-          className: "bg-background-action-critical-primary-hover",
-          colorName: "Hover",
-          colorHex: "#892615"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Swatch,
-        {
-          className: "bg-background-action-critical-primary-active",
-          colorName: "Active",
-          colorHex: "#DD5E48"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Swatch,
-        {
-          className: "bg-background-action-critical-primary-disabled",
-          colorName: "Disabled",
-          colorHex: "#EBEBEB"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Heading3, { children: "Background/Action Critical Secondary" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-row gap-4", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Swatch,
-        {
-          className: "bg-background-action-critical-secondary-normal",
-          colorName: "Normal",
-          colorHex: "#FFFFFF"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Swatch,
-        {
-          className: "bg-background-action-critical-secondary-hover",
-          colorName: "Hover",
-          colorHex: "#FBEDEA"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Swatch,
-        {
-          className: "bg-background-action-critical-secondary-active",
-          colorName: "Active",
-          colorHex: "#FFFFFF"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Swatch,
-        {
-          className: "bg-background-action-critical-secondary-disabled",
-          colorName: "Disabled",
-          colorHex: "#EBEBEB"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Heading3, { children: "Background/Success" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "flex flex-row gap-4", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-      Swatch,
-      {
-        className: "bg-background-success-normal",
-        colorName: "Normal",
-        colorHex: "#27D68B"
-      }
-    ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Heading3, { children: "Background/Warning" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "flex flex-row gap-4", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-      Swatch,
-      {
-        className: "bg-background-warning-normal",
-        colorName: "Normal",
-        colorHex: "#F0A913"
-      }
-    ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Heading3, { children: "Background/Critical" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "flex flex-row gap-4", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-      Swatch,
-      {
-        className: "bg-background-critical-normal",
-        colorName: "Normal",
-        colorHex: "#CC391F"
-      }
-    ) })
-  ] });
+var Swatches = ({ id }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    Stack,
+    {
+      id,
+      elevation: 0,
+      items: "start",
+      justify: "start",
+      sizing: "container",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Display1, { id: id ? `${id}-primitives-title` : void 0, children: "Color Primitives" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Display1, { id: id ? `${id}-branded-title` : void 0, children: "Branded Colors" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Paragraph, { id: id ? `${id}-branded-description` : void 0, 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__ */ (0, import_jsx_runtime5.jsx)(Heading3, { id: id ? `${id}-brand-heading` : void 0, children: "Brand" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-row gap-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Swatch,
+            {
+              id: id ? `${id}-brand-500` : void 0,
+              className: "bg-brand-500",
+              colorName: "Brand-500",
+              colorHex: "#9e3004"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Swatch,
+            {
+              id: id ? `${id}-brand-400` : void 0,
+              className: "bg-brand-400",
+              colorName: "Brand-400",
+              colorHex: "#df4405"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Swatch,
+            {
+              id: id ? `${id}-brand-300` : void 0,
+              className: "bg-brand-300",
+              colorName: "Brand-300",
+              colorHex: "#e56937"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Swatch,
+            {
+              id: id ? `${id}-brand-200` : void 0,
+              className: "bg-brand-200",
+              colorName: "Brand-200",
+              colorHex: "#f0a98c"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Swatch,
+            {
+              id: id ? `${id}-brand-100` : void 0,
+              className: "bg-brand-100",
+              colorName: "Brand-100",
+              colorHex: "#fcece6"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Heading3, { id: id ? `${id}-action-heading` : void 0, children: "Action" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-row gap-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Swatch,
+            {
+              id: id ? `${id}-action-500` : void 0,
+              className: "bg-action-500",
+              colorName: "Action-500",
+              colorHex: "#00365a"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Swatch,
+            {
+              id: id ? `${id}-action-400` : void 0,
+              className: "bg-action-400",
+              colorName: "Action-400",
+              colorHex: "#0077c8"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Swatch,
+            {
+              id: id ? `${id}-action-300` : void 0,
+              className: "bg-action-300",
+              colorName: "Action-300",
+              colorHex: "#459ad4"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Swatch,
+            {
+              id: id ? `${id}-action-200` : void 0,
+              className: "bg-action-200",
+              colorName: "Action-200",
+              colorHex: "#d0e5f4"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Swatch,
+            {
+              id: id ? `${id}-action-100` : void 0,
+              className: "bg-action-100",
+              colorName: "Action-100",
+              colorHex: "#e7f2f9"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Heading3, { id: id ? `${id}-link-heading` : void 0, children: "Link" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-row gap-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Swatch,
+            {
+              id: id ? `${id}-link-500` : void 0,
+              className: "bg-link-500",
+              colorName: "Link-500",
+              colorHex: "#00365a"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Swatch,
+            {
+              id: id ? `${id}-link-400` : void 0,
+              className: "bg-link-400",
+              colorName: "Link-400",
+              colorHex: "#0077c8"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Swatch,
+            {
+              id: id ? `${id}-link-300` : void 0,
+              className: "bg-link-300",
+              colorName: "Link-300",
+              colorHex: "#459ad4"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Swatch,
+            {
+              id: id ? `${id}-link-200` : void 0,
+              className: "bg-link-200",
+              colorName: "Link-200",
+              colorHex: "#d0e5f4"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Swatch,
+            {
+              id: id ? `${id}-link-100` : void 0,
+              className: "bg-link-100",
+              colorName: "Link-100",
+              colorHex: "#e7f2f9"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(Display1, { id: id ? `${id}-standard-colors-title` : void 0, children: [
+          " ",
+          "Standard Colors"
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Paragraph, { id: id ? `${id}-standard-colors-description` : void 0, children: "Certain colors should remain constant regardless of branding to help ensure legibility and usability." }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Heading3, { id: id ? `${id}-neutral-heading` : void 0, children: "Neutral" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-row gap-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Swatch,
+            {
+              id: id ? `${id}-neutral-600` : void 0,
+              className: "bg-neutral-600",
+              colorName: "Neutral-600",
+              colorHex: "#000000"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Swatch,
+            {
+              id: id ? `${id}-neutral-500` : void 0,
+              className: "bg-neutral-500",
+              colorName: "Neutral-500",
+              colorHex: "#1d1e1e"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Swatch,
+            {
+              id: id ? `${id}-neutral-450` : void 0,
+              className: "bg-neutral-450",
+              colorName: "Neutral-450",
+              colorHex: "#3a3a3a"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Swatch,
+            {
+              id: id ? `${id}-neutral-400` : void 0,
+              className: "bg-neutral-400",
+              colorName: "Neutral-400",
+              colorHex: "#6b6d6d"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Swatch,
+            {
+              id: id ? `${id}-neutral-300` : void 0,
+              className: "bg-neutral-300",
+              colorName: "Neutral-300",
+              colorHex: "#c1c1c1"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Swatch,
+            {
+              id: id ? `${id}-neutral-200` : void 0,
+              className: "bg-neutral-200",
+              colorName: "Neutral-200",
+              colorHex: "#ebebeb"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Swatch,
+            {
+              id: id ? `${id}-neutral-100` : void 0,
+              className: "bg-neutral-100",
+              colorName: "Neutral-100",
+              colorHex: "#f7f7f7"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Swatch,
+            {
+              id: id ? `${id}-neutral-000` : void 0,
+              className: "bg-neutral-000",
+              colorName: "Neutral-000",
+              colorHex: "#ffffff"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(Heading3, { id: id ? `${id}-success-heading` : void 0, children: [
+          " ",
+          "Success"
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-row gap-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Swatch,
+            {
+              id: id ? `${id}-success-500` : void 0,
+              className: "bg-success-500",
+              colorName: "Success-500",
+              colorHex: "#126240"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Swatch,
+            {
+              id: id ? `${id}-success-400` : void 0,
+              className: "bg-success-400",
+              colorName: "Success-400",
+              colorHex: "#27d68b"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Swatch,
+            {
+              id: id ? `${id}-success-300` : void 0,
+              className: "bg-success-300",
+              colorName: "Success-300",
+              colorHex: "#61e1aa"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Swatch,
+            {
+              id: id ? `${id}-success-200` : void 0,
+              className: "bg-success-200",
+              colorName: "Success-200",
+              colorHex: "#d7f7e9"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Swatch,
+            {
+              id: id ? `${id}-success-100` : void 0,
+              className: "bg-success-100",
+              colorName: "Success-100",
+              colorHex: "#eefbf6"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(Heading3, { id: id ? `${id}-warning-heading` : void 0, children: [
+          " ",
+          "Warning"
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-row gap-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Swatch,
+            {
+              id: id ? `${id}-warning-500` : void 0,
+              className: "bg-warning-500",
+              colorName: "Warning-500",
+              colorHex: "#91670c"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Swatch,
+            {
+              id: id ? `${id}-warning-400` : void 0,
+              className: "bg-warning-400",
+              colorName: "Warning-400",
+              colorHex: "#f0a913"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Swatch,
+            {
+              id: id ? `${id}-warning-300` : void 0,
+              className: "bg-warning-300",
+              colorName: "Warning-300",
+              colorHex: "#f4c053"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Swatch,
+            {
+              id: id ? `${id}-warning-200` : void 0,
+              className: "bg-warning-200",
+              colorName: "Warning-200",
+              colorHex: "#f9dfa9"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Swatch,
+            {
+              id: id ? `${id}-warning-100` : void 0,
+              className: "bg-warning-100",
+              colorName: "Warning-100",
+              colorHex: "#fcefd4"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(Heading3, { id: id ? `${id}-critical-heading` : void 0, children: [
+          " ",
+          "Critical"
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-row gap-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Swatch,
+            {
+              id: id ? `${id}-critical-500` : void 0,
+              className: "bg-critical-500",
+              colorName: "Critical-500",
+              colorHex: "#892615"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Swatch,
+            {
+              id: id ? `${id}-critical-400` : void 0,
+              className: "bg-critical-400",
+              colorName: "Critical-400",
+              colorHex: "#cc391f"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Swatch,
+            {
+              id: id ? `${id}-critical-300` : void 0,
+              className: "bg-critical-300",
+              colorName: "Critical-300",
+              colorHex: "#dd5e48"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Swatch,
+            {
+              id: id ? `${id}-critical-200` : void 0,
+              className: "bg-critical-200",
+              colorName: "Critical-200",
+              colorHex: "#f0b7ad"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Swatch,
+            {
+              id: id ? `${id}-critical-100` : void 0,
+              className: "bg-critical-100",
+              colorName: "Critical-100",
+              colorHex: "#fbedea"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Heading3, { id: id ? `${id}-chart-heading` : void 0, children: "Color order for charts, graphs, etc" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-row gap-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Swatch,
+            {
+              id: id ? `${id}-chart-0` : void 0,
+              className: "bg-chart-0",
+              colorName: "Action-400",
+              colorHex: "#0077c8"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Swatch,
+            {
+              id: id ? `${id}-chart-1` : void 0,
+              className: "bg-chart-1",
+              colorName: "Brand-400",
+              colorHex: "#df4405"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Swatch,
+            {
+              id: id ? `${id}-chart-2` : void 0,
+              className: "bg-chart-2",
+              colorName: "Teal-400",
+              colorHex: "#40c1ac"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Swatch,
+            {
+              id: id ? `${id}-chart-3` : void 0,
+              className: "bg-chart-3",
+              colorName: "Warning-400",
+              colorHex: "#f0a913"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Swatch,
+            {
+              id: id ? `${id}-chart-4` : void 0,
+              className: "bg-chart-4",
+              colorName: "Neutral-400",
+              colorHex: "#6b6d6d"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Swatch,
+            {
+              id: id ? `${id}-chart-5` : void 0,
+              className: "bg-chart-5",
+              colorName: "Purple-400",
+              colorHex: "#8d267a"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Swatch,
+            {
+              id: id ? `${id}-chart-6` : void 0,
+              className: "bg-chart-6",
+              colorName: "Orange-400",
+              colorHex: "#cc391f"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("br", {}),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Display1, { id: id ? `${id}-semantics-title` : void 0, children: "Color Semantics" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(Paragraph, { id: id ? `${id}-semantics-description` : void 0, 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__ */ (0, import_jsx_runtime5.jsx)("br", {}),
+          /* @__PURE__ */ (0, import_jsx_runtime5.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__ */ (0, import_jsx_runtime5.jsx)(Heading2, { id: id ? `${id}-text-heading` : void 0, children: "Text" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Heading3, { id: id ? `${id}-text-primary-heading` : void 0, children: "Text/Primary" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-row gap-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Swatch,
+            {
+              id: id ? `${id}-text-primary-normal` : void 0,
+              className: "bg-text-primary-normal",
+              colorName: "Normal",
+              colorHex: "#1d1e1e"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Swatch,
+            {
+              id: id ? `${id}-text-primary-disabled` : void 0,
+              className: "bg-text-primary-disabled",
+              colorName: "Disabled",
+              colorHex: "#c1c1c1"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Swatch,
+            {
+              id: id ? `${id}-text-primary-error` : void 0,
+              className: "bg-text-primary-error",
+              colorName: "Error",
+              colorHex: "#cc391f"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Heading3, { id: id ? `${id}-text-secondary-heading` : void 0, children: "Text/Secondary" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-row gap-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Swatch,
+            {
+              id: id ? `${id}-text-secondary-normal` : void 0,
+              className: "bg-text-secondary-normal",
+              colorName: "Normal",
+              colorHex: "#6b6d6d"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Swatch,
+            {
+              id: id ? `${id}-text-secondary-disabled` : void 0,
+              className: "bg-text-secondary-disabled",
+              colorName: "Disabled",
+              colorHex: "#c1c1c1"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Swatch,
+            {
+              id: id ? `${id}-text-secondary-error` : void 0,
+              className: "bg-text-secondary-error",
+              colorName: "Error",
+              colorHex: "#cc391f"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Heading3, { id: id ? `${id}-text-brand-heading` : void 0, children: "Text/Brand" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-row gap-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Swatch,
+            {
+              id: id ? `${id}-text-brand-normal` : void 0,
+              className: "bg-brand-400",
+              colorName: "Normal",
+              colorHex: "#df4405"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Swatch,
+            {
+              id: id ? `${id}-text-brand-disabled` : void 0,
+              className: "bg-neutral-300",
+              colorName: "Disabled",
+              colorHex: "#c1c1c1"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Swatch,
+            {
+              id: id ? `${id}-text-brand-error` : void 0,
+              className: "bg-critical-400",
+              colorName: "Error",
+              colorHex: "#cc391f"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Heading3, { id: id ? `${id}-text-action-primary-heading` : void 0, children: "Text/Action Primary" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-row gap-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Swatch,
+            {
+              id: id ? `${id}-text-action-primary-normal` : void 0,
+              className: "bg-text-action-primary-normal",
+              colorName: "Normal",
+              colorHex: "#0077c8"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Swatch,
+            {
+              id: id ? `${id}-text-action-primary-hover` : void 0,
+              className: "bg-text-action-primary-hover",
+              colorName: "Hover",
+              colorHex: "#00365a"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Swatch,
+            {
+              id: id ? `${id}-text-action-primary-active` : void 0,
+              className: "bg-text-action-primary-active",
+              colorName: "Active",
+              colorHex: "#459ad4"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Swatch,
+            {
+              id: id ? `${id}-text-action-primary-disabled` : void 0,
+              className: "bg-text-action-primary-disabled",
+              colorName: "Disabled",
+              colorHex: "#6b6d6d"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Heading3, { id: id ? `${id}-text-on-action-primary-heading` : void 0, children: "Text/On Action Primary" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-row gap-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Swatch,
+            {
+              id: id ? `${id}-text-on-action-primary-normal` : void 0,
+              className: "bg-text-on-action-primary-normal",
+              colorName: "Normal",
+              colorHex: "#ffffff"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Swatch,
+            {
+              id: id ? `${id}-text-on-action-primary-hover` : void 0,
+              className: "bg-text-on-action-primary-hover",
+              colorName: "Hover",
+              colorHex: "#ffffff"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Swatch,
+            {
+              id: id ? `${id}-text-on-action-primary-active` : void 0,
+              className: "bg-text-on-action-primary-active",
+              colorName: "Active",
+              colorHex: "#ffffff"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Swatch,
+            {
+              id: id ? `${id}-text-on-action-primary-disabled` : void 0,
+              className: "bg-text-on-action-primary-disabled",
+              colorName: "Disabled",
+              colorHex: "#6b6d6d"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Heading3, { id: id ? `${id}-text-action-critical-heading` : void 0, children: "Text/Action Critical" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-row gap-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Swatch,
+            {
+              id: id ? `${id}-text-action-critical-normal` : void 0,
+              className: "bg-text-action-critical-normal",
+              colorName: "Normal",
+              colorHex: "#CC391F"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Swatch,
+            {
+              id: id ? `${id}-text-action-critical-hover` : void 0,
+              className: "bg-text-action-critical-hover",
+              colorName: "Hover",
+              colorHex: "#892615"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Swatch,
+            {
+              id: id ? `${id}-text-action-critical-active` : void 0,
+              className: "bg-text-action-critical-active",
+              colorName: "Active",
+              colorHex: "#DD5E48"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Swatch,
+            {
+              id: id ? `${id}-text-action-critical-disabled` : void 0,
+              className: "bg-text-action-critical-disabled",
+              colorName: "Disabled",
+              colorHex: "#6b6d6d"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Heading3, { id: id ? `${id}-text-link-heading` : void 0, children: "Text/Link" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-row gap-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Swatch,
+            {
+              id: id ? `${id}-text-link-normal` : void 0,
+              className: "bg-text-link-normal",
+              colorName: "Normal",
+              colorHex: "#0077C8"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Swatch,
+            {
+              id: id ? `${id}-text-link-hover` : void 0,
+              className: "bg-text-link-hover",
+              colorName: "Hover",
+              colorHex: "#00365A"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Swatch,
+            {
+              id: id ? `${id}-text-link-active` : void 0,
+              className: "bg-text-link-active",
+              colorName: "Active",
+              colorHex: "#459AD4"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Swatch,
+            {
+              id: id ? `${id}-text-link-disabled` : void 0,
+              className: "bg-text-link-disabled",
+              colorName: "Disabled",
+              colorHex: "#6b6d6d"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Heading3, { id: id ? `${id}-text-success-heading` : void 0, children: "Text/Success" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-row gap-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Swatch,
+            {
+              id: id ? `${id}-text-success-normal` : void 0,
+              className: "bg-text-success-normal",
+              colorName: "Normal",
+              colorHex: "#126240"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Swatch,
+            {
+              id: id ? `${id}-text-success-disabled` : void 0,
+              className: "bg-text-success-disabled",
+              colorName: "Disabled",
+              colorHex: "#6B6D6D"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Swatch,
+            {
+              id: id ? `${id}-text-success-error` : void 0,
+              className: "bg-text-success-error",
+              colorName: "Error",
+              colorHex: "#CC391F"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Heading3, { id: id ? `${id}-text-warning-heading` : void 0, children: "Text/Warning" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-row gap-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Swatch,
+            {
+              id: id ? `${id}-text-warning-normal` : void 0,
+              className: "bg-text-warning-normal",
+              colorName: "Normal",
+              colorHex: "#126240"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Swatch,
+            {
+              id: id ? `${id}-text-warning-disabled` : void 0,
+              className: "bg-text-warning-disabled",
+              colorName: "Disabled",
+              colorHex: "#6B6D6D"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Swatch,
+            {
+              id: id ? `${id}-text-warning-error` : void 0,
+              className: "bg-text-warning-error",
+              colorName: "Error",
+              colorHex: "#CC391F"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Heading3, { id: id ? `${id}-text-critical-heading` : void 0, children: "Text/Critical" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-row gap-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Swatch,
+            {
+              id: id ? `${id}-text-critical-normal` : void 0,
+              className: "bg-text-critical-normal",
+              colorName: "Normal",
+              colorHex: "#CC391F"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Swatch,
+            {
+              id: id ? `${id}-text-critical-disabled` : void 0,
+              className: "bg-text-critical-disabled",
+              colorName: "Disabled",
+              colorHex: "#6B6D6D"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Swatch,
+            {
+              id: id ? `${id}-text-critical-error` : void 0,
+              className: "bg-text-critical-error",
+              colorName: "Error",
+              colorHex: "#CC391F"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("br", {}),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Heading2, { id: id ? `${id}-icon-heading` : void 0, children: "Icon" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Heading3, { id: id ? `${id}-icon-primary-heading` : void 0, children: "Icon/Primary" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-row gap-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Swatch,
+            {
+              id: id ? `${id}-icon-primary-normal` : void 0,
+              className: "bg-icon-primary-normal",
+              colorName: "Normal",
+              colorHex: "#6B6D6D"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Swatch,
+            {
+              id: id ? `${id}-icon-primary-disabled` : void 0,
+              className: "bg-icon-primary-disabled",
+              colorName: "Disabled",
+              colorHex: "#C1C1C1"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Heading3, { id: id ? `${id}-icon-success-heading` : void 0, children: "Icon/Success" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-row gap-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Swatch,
+            {
+              id: id ? `${id}-icon-success-normal` : void 0,
+              className: "bg-icon-success-normal",
+              colorName: "Normal",
+              colorHex: "#27D68B"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Swatch,
+            {
+              id: id ? `${id}-icon-success-disabled` : void 0,
+              className: "bg-icon-success-disabled",
+              colorName: "Disabled",
+              colorHex: "#6B6D6D"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Heading3, { id: id ? `${id}-icon-warning-heading` : void 0, children: "Icon/Warning" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-row gap-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Swatch,
+            {
+              id: id ? `${id}-icon-warning-normal` : void 0,
+              className: "bg-icon-warning-normal",
+              colorName: "Normal",
+              colorHex: "#F0A913"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Swatch,
+            {
+              id: id ? `${id}-icon-warning-disabled` : void 0,
+              className: "bg-icon-warning-disabled",
+              colorName: "Disabled",
+              colorHex: "#6B6D6D"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Heading3, { id: id ? `${id}-icon-critical-heading` : void 0, children: "Icon/Critical" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-row gap-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Swatch,
+            {
+              id: id ? `${id}-icon-critical-normal` : void 0,
+              className: "bg-icon-critical-normal",
+              colorName: "Normal",
+              colorHex: "#CC391F"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Swatch,
+            {
+              id: id ? `${id}-icon-critical-disabled` : void 0,
+              className: "bg-icon-critical-disabled",
+              colorName: "Disabled",
+              colorHex: "#6B6D6D"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Heading3, { id: id ? `${id}-icon-action-primary-heading` : void 0, children: "Icon/Action Primary" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-row gap-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Swatch,
+            {
+              id: id ? `${id}-icon-action-primary-normal` : void 0,
+              className: "bg-icon-action-primary-normal",
+              colorName: "Normal",
+              colorHex: "#1D1E1E"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Swatch,
+            {
+              id: id ? `${id}-icon-action-primary-hover` : void 0,
+              className: "bg-icon-action-primary-hover",
+              colorName: "Hover",
+              colorHex: "#00365A"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Swatch,
+            {
+              id: id ? `${id}-icon-action-primary-active` : void 0,
+              className: "bg-icon-action-primary-active",
+              colorName: "Active",
+              colorHex: "#459AD4"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Swatch,
+            {
+              id: id ? `${id}-icon-action-primary-disabled` : void 0,
+              className: "bg-icon-action-primary-disabled",
+              colorName: "Disabled",
+              colorHex: "#C1C1C1"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Heading3, { id: id ? `${id}-icon-on-action-primary-heading` : void 0, children: "Icon/On Action Primary" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-row gap-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Swatch,
+            {
+              id: id ? `${id}-icon-on-action-primary-normal` : void 0,
+              className: "bg-icon-on-action-primary-normal",
+              colorName: "Normal",
+              colorHex: "#FFFFFF"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Swatch,
+            {
+              id: id ? `${id}-icon-on-action-primary-hover` : void 0,
+              className: "bg-icon-on-action-primary-hover",
+              colorName: "Hover",
+              colorHex: "#FFFFFF"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Swatch,
+            {
+              id: id ? `${id}-icon-on-action-primary-active` : void 0,
+              className: "bg-icon-on-action-primary-active",
+              colorName: "Active",
+              colorHex: "#FFFFFF"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Swatch,
+            {
+              id: id ? `${id}-icon-on-action-primary-disabled` : void 0,
+              className: "bg-icon-on-action-primary-disabled",
+              colorName: "Disabled",
+              colorHex: "#6B6D6D"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Heading3, { id: id ? `${id}-icon-action-secondary-heading` : void 0, children: "Icon/Action Secondary" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-row gap-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Swatch,
+            {
+              id: id ? `${id}-icon-action-secondary-normal` : void 0,
+              className: "bg-icon-action-secondary-normal",
+              colorName: "Normal",
+              colorHex: "#0077C8"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Swatch,
+            {
+              id: id ? `${id}-icon-action-secondary-hover` : void 0,
+              className: "bg-icon-action-secondary-hover",
+              colorName: "Hover",
+              colorHex: "#00365A"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Swatch,
+            {
+              id: id ? `${id}-icon-action-secondary-active` : void 0,
+              className: "bg-icon-action-secondary-active",
+              colorName: "Active",
+              colorHex: "#459AD4"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Swatch,
+            {
+              id: id ? `${id}-icon-action-secondary-disabled` : void 0,
+              className: "bg-icon-action-secondary-disabled",
+              colorName: "Disabled",
+              colorHex: "#6B6D6D"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Heading3, { id: id ? `${id}-icon-action-critical-heading` : void 0, children: "Icon/Action Critical" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-row gap-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Swatch,
+            {
+              id: id ? `${id}-icon-action-critical-normal` : void 0,
+              className: "bg-icon-action-critical-normal",
+              colorName: "Normal",
+              colorHex: "#CC391F"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Swatch,
+            {
+              id: id ? `${id}-icon-action-critical-hover` : void 0,
+              className: "bg-icon-action-critical-hover",
+              colorName: "Hover",
+              colorHex: "#892615"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Swatch,
+            {
+              id: id ? `${id}-icon-action-critical-active` : void 0,
+              className: "bg-icon-action-critical-active",
+              colorName: "Active",
+              colorHex: "#DD5E48"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Swatch,
+            {
+              id: id ? `${id}-icon-action-critical-disabled` : void 0,
+              className: "bg-icon-action-critical-disabled",
+              colorName: "Disabled",
+              colorHex: "#6B6D6D"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Heading3, { id: id ? `${id}-icon-brand-primary-heading` : void 0, children: "Icon/Brand Primary" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-row gap-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Swatch,
+            {
+              id: id ? `${id}-icon-brand-primary-normal` : void 0,
+              className: "bg-icon-brand-primary-normal",
+              colorName: "Normal",
+              colorHex: "#DF4405"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Swatch,
+            {
+              id: id ? `${id}-icon-brand-primary-hover` : void 0,
+              className: "bg-icon-brand-primary-hover",
+              colorName: "Hover",
+              colorHex: "#9E3004"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Swatch,
+            {
+              id: id ? `${id}-icon-brand-primary-active` : void 0,
+              className: "bg-icon-brand-primary-active",
+              colorName: "Active",
+              colorHex: "#E56937"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Swatch,
+            {
+              id: id ? `${id}-icon-brand-primary-disabled` : void 0,
+              className: "bg-icon-brand-primary-disabled",
+              colorName: "Disabled",
+              colorHex: "#C1C1C1"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("br", {}),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Heading2, { id: id ? `${id}-border-heading` : void 0, children: "Border" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Heading3, { id: id ? `${id}-border-primary-heading` : void 0, children: "Border/Primary" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-row gap-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Swatch,
+            {
+              id: id ? `${id}-border-primary-normal` : void 0,
+              className: "bg-border-primary-normal",
+              colorName: "Normal",
+              colorHex: "#C1C1C1"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Swatch,
+            {
+              id: id ? `${id}-border-primary-focus` : void 0,
+              className: "bg-border-primary-focus",
+              colorName: "Focus",
+              colorHex: "#0077C8"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Swatch,
+            {
+              id: id ? `${id}-border-primary-error` : void 0,
+              className: "bg-border-primary-error",
+              colorName: "Error",
+              colorHex: "#CC391F"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Heading3, { id: id ? `${id}-border-action-heading` : void 0, children: "Border/Action" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-row gap-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Swatch,
+            {
+              id: id ? `${id}-border-action-normal` : void 0,
+              className: "bg-border-action-normal",
+              colorName: "Normal",
+              colorHex: "#0077C8"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Swatch,
+            {
+              id: id ? `${id}-border-action-hover` : void 0,
+              className: "bg-border-action-hover",
+              colorName: "Hover",
+              colorHex: "#00365A"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Swatch,
+            {
+              id: id ? `${id}-border-action-active` : void 0,
+              className: "bg-border-action-active",
+              colorName: "Active",
+              colorHex: "#459AD4"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Swatch,
+            {
+              id: id ? `${id}-border-action-disabled` : void 0,
+              className: "bg-border-action-disabled",
+              colorName: "Disabled",
+              colorHex: "#EBEBEB"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Heading3, { id: id ? `${id}-border-action-critical-heading` : void 0, children: "Border/Action Critical" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-row gap-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Swatch,
+            {
+              id: id ? `${id}-border-action-critical-normal` : void 0,
+              className: "bg-border-action-critical-normal",
+              colorName: "Normal",
+              colorHex: "#CC391F"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Swatch,
+            {
+              id: id ? `${id}-border-action-critical-hover` : void 0,
+              className: "bg-border-action-critical-hover",
+              colorName: "Hover",
+              colorHex: "#892615"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Swatch,
+            {
+              id: id ? `${id}-border-action-critical-active` : void 0,
+              className: "bg-border-action-critical-active",
+              colorName: "Active",
+              colorHex: "#DD5E48"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Swatch,
+            {
+              id: id ? `${id}-border-action-critical-disabled` : void 0,
+              className: "bg-border-action-critical-disabled",
+              colorName: "Disabled",
+              colorHex: "#EBEBEB"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("br", {}),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Heading2, { id: id ? `${id}-background-heading` : void 0, children: "Background" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Heading3, { id: id ? `${id}-background-primary-heading` : void 0, children: "Background/Primary" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "flex flex-row gap-4", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          Swatch,
+          {
+            id: id ? `${id}-background-primary-normal` : void 0,
+            className: "bg-background-primary-normal",
+            colorName: "Normal",
+            colorHex: "#FFFFFF"
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Heading3, { id: id ? `${id}-background-secondary-heading` : void 0, children: "Background/Secondary" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "flex flex-row gap-4", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          Swatch,
+          {
+            id: id ? `${id}-background-secondary-normal` : void 0,
+            className: "bg-background-secondary-normal",
+            colorName: "Normal",
+            colorHex: "#c1c1c1"
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Heading3, { id: id ? `${id}-background-brand-heading` : void 0, children: "Background/Brand" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "flex flex-row gap-4", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          Swatch,
+          {
+            id: id ? `${id}-background-brand-normal` : void 0,
+            className: "bg-background-brand-normal",
+            colorName: "Normal",
+            colorHex: "#DF4405"
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          Heading3,
+          {
+            id: id ? `${id}-background-grouped-primary-heading` : void 0,
+            children: "Background/Grouped Primary"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "flex flex-row gap-4", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          Swatch,
+          {
+            id: id ? `${id}-background-grouped-primary-normal` : void 0,
+            className: "bg-background-grouped-primary-normal",
+            colorName: "Normal",
+            colorHex: "#FFFFFF"
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          Heading3,
+          {
+            id: id ? `${id}-background-grouped-secondary-heading` : void 0,
+            children: "Background/Grouped Secondary"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "flex flex-row gap-4", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          Swatch,
+          {
+            id: id ? `${id}-background-grouped-secondary-normal` : void 0,
+            className: "bg-background-grouped-secondary-normal",
+            colorName: "Normal",
+            colorHex: "#f7f7f7"
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Heading3, { id: id ? `${id}-background-action-primary-heading` : void 0, children: "Background/Action Primary" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-row gap-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Swatch,
+            {
+              id: id ? `${id}-background-action-primary-normal` : void 0,
+              className: "bg-background-action-primary-normal",
+              colorName: "Normal",
+              colorHex: "#0077C8"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Swatch,
+            {
+              id: id ? `${id}-background-action-primary-hover` : void 0,
+              className: "bg-background-action-primary-hover",
+              colorName: "Hover",
+              colorHex: "#00365A"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Swatch,
+            {
+              id: id ? `${id}-background-action-primary-active` : void 0,
+              className: "bg-background-action-primary-active",
+              colorName: "Active",
+              colorHex: "#459AD4"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Swatch,
+            {
+              id: id ? `${id}-background-action-primary-disabled` : void 0,
+              className: "bg-background-action-primary-disabled",
+              colorName: "Disabled",
+              colorHex: "#EBEBEB"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          Heading3,
+          {
+            id: id ? `${id}-background-action-secondary-heading` : void 0,
+            children: "Background/Action Secondary"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-row gap-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Swatch,
+            {
+              id: id ? `${id}-background-action-secondary-normal` : void 0,
+              className: "bg-background-action-secondary-normal",
+              colorName: "Normal",
+              colorHex: "#FFFFFF"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Swatch,
+            {
+              id: id ? `${id}-background-action-secondary-hover` : void 0,
+              className: "bg-background-action-secondary-hover",
+              colorName: "Hover",
+              colorHex: "#E7F2F9"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Swatch,
+            {
+              id: id ? `${id}-background-action-secondary-active` : void 0,
+              className: "bg-background-action-secondary-active",
+              colorName: "Active",
+              colorHex: "#FFFFFF"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Swatch,
+            {
+              id: id ? `${id}-background-action-secondary-disabled` : void 0,
+              className: "bg-background-action-secondary-disabled",
+              colorName: "Disabled",
+              colorHex: "#EBEBEB"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          Heading3,
+          {
+            id: id ? `${id}-background-action-critical-primary-heading` : void 0,
+            children: "Background/Action Critical Primary"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-row gap-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Swatch,
+            {
+              id: id ? `${id}-background-action-critical-primary-normal` : void 0,
+              className: "bg-background-action-critical-primary-normal",
+              colorName: "Normal",
+              colorHex: "#CC391F"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Swatch,
+            {
+              id: id ? `${id}-background-action-critical-primary-hover` : void 0,
+              className: "bg-background-action-critical-primary-hover",
+              colorName: "Hover",
+              colorHex: "#892615"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Swatch,
+            {
+              id: id ? `${id}-background-action-critical-primary-active` : void 0,
+              className: "bg-background-action-critical-primary-active",
+              colorName: "Active",
+              colorHex: "#DD5E48"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Swatch,
+            {
+              id: id ? `${id}-background-action-critical-primary-disabled` : void 0,
+              className: "bg-background-action-critical-primary-disabled",
+              colorName: "Disabled",
+              colorHex: "#EBEBEB"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          Heading3,
+          {
+            id: id ? `${id}-background-action-critical-secondary-heading` : void 0,
+            children: "Background/Action Critical Secondary"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-row gap-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Swatch,
+            {
+              id: id ? `${id}-background-action-critical-secondary-normal` : void 0,
+              className: "bg-background-action-critical-secondary-normal",
+              colorName: "Normal",
+              colorHex: "#FFFFFF"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Swatch,
+            {
+              id: id ? `${id}-background-action-critical-secondary-hover` : void 0,
+              className: "bg-background-action-critical-secondary-hover",
+              colorName: "Hover",
+              colorHex: "#FBEDEA"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Swatch,
+            {
+              id: id ? `${id}-background-action-critical-secondary-active` : void 0,
+              className: "bg-background-action-critical-secondary-active",
+              colorName: "Active",
+              colorHex: "#FFFFFF"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Swatch,
+            {
+              id: id ? `${id}-background-action-critical-secondary-disabled` : void 0,
+              className: "bg-background-action-critical-secondary-disabled",
+              colorName: "Disabled",
+              colorHex: "#EBEBEB"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Heading3, { id: id ? `${id}-background-success-heading` : void 0, children: "Background/Success" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "flex flex-row gap-4", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          Swatch,
+          {
+            id: id ? `${id}-background-success-normal` : void 0,
+            className: "bg-background-success-normal",
+            colorName: "Normal",
+            colorHex: "#27D68B"
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Heading3, { id: id ? `${id}-background-warning-heading` : void 0, children: "Background/Warning" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "flex flex-row gap-4", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          Swatch,
+          {
+            id: id ? `${id}-background-warning-normal` : void 0,
+            className: "bg-background-warning-normal",
+            colorName: "Normal",
+            colorHex: "#F0A913"
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Heading3, { id: id ? `${id}-background-critical-heading` : void 0, children: "Background/Critical" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "flex flex-row gap-4", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          Swatch,
+          {
+            id: id ? `${id}-background-critical-normal` : void 0,
+            className: "bg-background-critical-normal",
+            colorName: "Normal",
+            colorHex: "#CC391F"
+          }
+        ) })
+      ]
+    }
+  );
 };
 Swatches.displayName = "Swatches";
 // Annotate the CommonJS export names for ESM import in node: