@dmsi/wedgekit-react 0.0.2

package/dist/components/Swatch.cjs

@@ -0,0 +1,1728 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/Swatch.tsx
+var Swatch_exports = {};
+__export(Swatch_exports, {
+  Swatch: () => Swatch,
+  Swatches: () => Swatches
+});
+module.exports = __toCommonJS(Swatch_exports);
+
+// src/components/Display.tsx
+var import_clsx2 = __toESM(require("clsx"), 1);
+
+// src/classNames.ts
+var import_clsx = __toESM(require("clsx"), 1);
+var typography = {
+  display1: (0, import_clsx.default)(
+    "font-sans font-semibold",
+    "text-display-1-mobile desktop:text-display-1-desktop compact:text-display-1-desktop-compact",
+    "leading-display-1-mobile desktop:leading-display-1-desktop"
+  ),
+  display2: (0, import_clsx.default)(
+    "font-sans font-bold",
+    "text-display-2-mobile desktop:text-display-2-desktop compact:text-display-2-desktop-compact",
+    "leading-display-2-mobile desktop:leading-display-2-desktop"
+  ),
+  heading1: (0, import_clsx.default)(
+    "font-sans font-semibold",
+    "text-heading-1-mobile desktop:text-heading-1-desktop compact:text-heading-1-desktop-compact",
+    "leading-heading-1-mobile desktop:leading-heading-1-desktop"
+  ),
+  heading2: (0, import_clsx.default)(
+    "font-sans font-normal",
+    "text-heading-2-mobile desktop:text-heading-2-desktop compact:text-heading-2-desktop-compact",
+    "leading-heading-2-mobile desktop:leading-heading-2-desktop"
+  ),
+  heading3: (0, import_clsx.default)(
+    "font-sans font-semibold",
+    "text-heading-3-mobile desktop:text-heading-3-desktop compact:text-heading-3-desktop-compact",
+    "leading-heading-3-mobile desktop:leading-heading-3-desktop"
+  ),
+  subheader: (0, import_clsx.default)(
+    "font-sans font-semibold",
+    "text-subheader-mobile desktop:text-subheader-desktop compact:text-subheader-desktop-compact",
+    "leading-subheader-mobile desktop:leading-subheader-desktop"
+  ),
+  link: (0, import_clsx.default)(
+    "font-sans font-normal",
+    "text-link-mobile desktop:text-link-desktop compact:text-link-desktop-compact",
+    "leading-link-mobile desktop:leading-link-desktop"
+  ),
+  buttonLabel: (0, import_clsx.default)(
+    "font-sans font-semibold",
+    "text-label-mobile desktop:text-label-desktop compact:text-label-desktop-compact",
+    "leading-label-mobile desktop:leading-label-desktop"
+  ),
+  label: (0, import_clsx.default)(
+    "font-sans font-semibold",
+    "text-label-mobile desktop:text-label-desktop compact:text-label-desktop-compact",
+    "leading-label-mobile desktop:leading-label-desktop"
+  ),
+  paragraph: (0, import_clsx.default)(
+    "font-sans font-normal",
+    "text-paragraph-mobile desktop:text-paragraph-desktop compact:text-paragraph-desktop-compact",
+    "leading-paragraph-mobile desktop:leading-paragraph-desktop"
+  ),
+  caption: (0, import_clsx.default)(
+    "font-sans font-normal",
+    "text-caption-mobile desktop:text-caption-desktop compact:text-caption-desktop-compact",
+    "leading-caption-mobile desktop:leading-caption-desktop"
+  )
+};
+var baseTransition = (0, import_clsx.default)(
+  "transition-colors duration-100 ease-in-out"
+);
+var componentGap = (0, import_clsx.default)(
+  "gap-mobile-component-gap desktop:gap-desktop-component-gap compact:gap-desktop-compact-component-gap"
+);
+var paddingUsingComponentGap = (0, import_clsx.default)(
+  "p-mobile-component-gap desktop:p-desktop-component-gap compact:p-desktop-compact-component-gap"
+);
+var paddingYUsingLayoutGroupGap = (0, import_clsx.default)(
+  "py-mobile-layout-group-gap desktop:py-desktop-layout-group-gap compact:py-desktop-compact-layout-group-gap"
+);
+var componentPadding = (0, import_clsx.default)(
+  "p-mobile-component-padding desktop:p-desktop-component-padding compact:p-desktop-compact-component-padding"
+);
+var componentPaddingBottom = (0, import_clsx.default)(
+  "pb-mobile-component-padding desktop:pb-desktop-component-padding compact:pb-desktop-compact-component-padding"
+);
+var componentPaddingY = (0, import_clsx.default)(
+  "py-mobile-component-padding desktop:py-desktop-component-padding compact:py-desktop-compact-component-padding"
+);
+var componentPaddingXUsingComponentGap = (0, import_clsx.default)(
+  "px-mobile-component-gap desktop:px-desktop-component-gap compact:px-desktop-compact-component-gap"
+);
+var componentPaddingYUsingComponentGap = (0, import_clsx.default)(
+  "py-mobile-component-gap desktop:py-desktop-component-gap compact:py-desktop-compact-component-gap"
+);
+var componentPaddingMinusBorder = (0, import_clsx.default)(
+  "p-[calc(var(--spacing-mobile-component-padding)_-_1px)] desktop:p-[calc(var(--spacing-desktop-component-padding)_-_1px)] compact:p-[calc(var(--spacing-desktop-compact-component-padding)_-_1px)]"
+);
+var componentPaddingMinus2pxBorder = (0, import_clsx.default)(
+  "p-[calc(var(--spacing-mobile-component-padding)_-_2px)] desktop:p-[calc(var(--spacing-desktop-component-padding)_-_2px)] compact:p-[calc(var(--spacing-desktop-compact-component-padding)_-_2px)]"
+);
+var layoutPaddingBottom = (0, import_clsx.default)(
+  "pb-mobile-layout-padding desktop:pb-desktop-layout-padding compact:pb-desktop-compact-layout-padding"
+);
+var layoutPaddingY = (0, import_clsx.default)(
+  "py-mobile-layout-padding desktop:py-desktop-layout-padding compact:py-desktop-compact-layout-padding"
+);
+var containerPaddingX = (0, import_clsx.default)(
+  "px-mobile-container-padding desktop:px-desktop-container-padding compact:px-desktop-compact-container-padding"
+);
+var containerPaddingY = (0, import_clsx.default)(
+  "py-mobile-container-padding desktop:py-desktop-container-padding compact:py-desktop-compact-container-padding"
+);
+var layoutGroupGapPaddingY = (0, import_clsx.default)(
+  "py-mobile-layout-group-gap desktop:py-desktop-layout-group-gap compact:py-desktop-compact-layout-group-gap"
+);
+var layoutGroupGap = (0, import_clsx.default)(
+  "gap-mobile-layout-group-gap desktop:gap-desktop-layout-group-gap compact:gap-desktop-compact-layout-group-gap"
+);
+var layoutGap = (0, import_clsx.default)(
+  "gap-mobile-layout-gap desktop:gap-desktop-layout-gap compact:gap-desktop-compact-layout-gap"
+);
+var gapUsingContainerPadding = (0, import_clsx.default)(
+  "gap-mobile-container-padding desktop:gap-desktop-container-padding compact:gap-desktop-compact-container-padding"
+);
+
+// src/components/Display.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var Display = (_a) => {
+  var _b = _a, {
+    className,
+    children,
+    as,
+    color,
+    align,
+    variant = "display1"
+  } = _b, props = __objRest(_b, [
+    "className",
+    "children",
+    "as",
+    "color",
+    "align",
+    "variant"
+  ]);
+  const defaultElement = variant === "display1" ? "h1" : "h2";
+  const Element = as != null ? as : defaultElement;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    Element,
+    __spreadProps(__spreadValues({
+      className: (0, import_clsx2.default)(
+        typography[variant],
+        className,
+        align === "left" && "text-left",
+        align === "center" && "text-center",
+        align === "right" && "text-right"
+      ),
+      style: __spreadProps(__spreadValues({}, props.style), {
+        color: color ? `var(--color-${color})` : void 0
+      })
+    }, props), {
+      children
+    })
+  );
+};
+Display.displayName = "Display";
+var Display1 = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Display, __spreadProps(__spreadValues({}, props), { variant: "display1" }));
+var Display2 = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Display, __spreadProps(__spreadValues({}, props), { variant: "display2" }));
+Display1.displayName = "Display1";
+Display2.displayName = "Display2";
+
+// src/components/Stack.tsx
+var import_clsx3 = __toESM(require("clsx"), 1);
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var useFlexClassNames = ({ items, justify, grow }) => (0, import_clsx3.default)(
+  "flex",
+  items === "start" && "items-start",
+  grow && "grow",
+  items === "start" && "items-start",
+  items === "center" && "items-center",
+  items === "end" && "items-end",
+  items === "start-center" && "items-start desktop:items-center",
+  justify === "start" && "justify-start",
+  justify === "center" && "justify-center",
+  justify === "end" && "justify-end",
+  justify === "end" && "justify-end",
+  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
+}) => {
+  const flexClassNames = useFlexClassNames({ items, justify, grow });
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "div",
+    {
+      style: {
+        height: height === "full" ? "100%" : height !== void 0 ? `${height}px` : void 0,
+        maxHeight: maxHeight !== void 0 ? `${maxHeight}px` : void 0,
+        maxWidth: maxWidth !== void 0 ? `${maxWidth}px` : void 0,
+        width: width !== void 0 && typeof width === "number" ? `${width}px` : void 0,
+        minWidth: minWidth !== void 0 ? `${minWidth}px` : void 0,
+        border: borderColor ? `1px solid var(--color-${borderColor})` : void 0,
+        backgroundColor: backgroundColor ? `var(--color-${backgroundColor})` : void 0,
+        flexGrow: flexGrow !== void 0 ? flexGrow : void 0,
+        flexShrink: flexShrink !== void 0 ? flexShrink : void 0,
+        position: position !== void 0 ? position : void 0,
+        top: top !== void 0 ? `${top}px` : void 0,
+        left: left !== void 0 ? `${left}px` : void 0
+      },
+      className: (0, import_clsx3.default)(
+        "scrollbar-thin",
+        width !== "fit" && "w-full",
+        width === "full" && "w-full",
+        centered && "mx-auto",
+        overflowY == "auto" && "overflow-y-auto",
+        overflowY == "hidden" && "overflow-y-hidden",
+        overflowY == "scroll" && "overflow-y-scroll",
+        overflowX == "auto" && "overflow-x-auto",
+        overflowX == "hidden" && "overflow-x-hidden",
+        overflowX == "scroll" && "overflow-x-scroll",
+        padding && sizing === "container" && "p-mobile-container-padding desktop:p-desktop-container-padding compact:p-desktop-compact-container-padding",
+        padding && sizing === "layout" && "p-mobile-layout-padding desktop:p-desktop-layout-padding compact:p-desktop-compact-layout-padding",
+        padding && sizing === "layout-group" && "p-mobile-layout-group-padding desktop:p-desktop-layout-group-padding compact:p-desktop-compact-layout-group-padding",
+        padding && sizing === "component" && "p-mobile-component-padding desktop:p-desktop-component-padding compact:p-desktop-compact-component-padding",
+        paddingX && sizing === "container" && "px-mobile-container-padding desktop:px-desktop-container-padding compact:px-desktop-compact-container-padding",
+        paddingX && sizing === "layout" && "px-mobile-layout-padding desktop:px-desktop-layout-padding compact:px-desktop-compact-layout-padding",
+        paddingX && sizing === "layout-group" && "px-mobile-layout-group-padding desktop:px-desktop-layout-group-padding compact:px-desktop-compact-layout-group-padding",
+        paddingX && sizing === "component" && "px-mobile-component-padding desktop:px-desktop-component-padding compact:px-desktop-compact-component-padding",
+        horizontal ? "desktop:flex-row" : "desktop:flex-col",
+        horizontalMobile ? "flex-row" : "flex-col",
+        flexClassNames,
+        sizing === "layout-group" && "gap-mobile-layout-group-gap desktop:gap-desktop-layout-group-gap compact:gap-compact-layout-group-gap",
+        sizing === "layout" && "gap-mobile-layout-gap desktop:gap-desktop-layout-gap compact:gap-compact-layout-gap",
+        sizing === "container" && "gap-mobile-container-gap desktop:gap-desktop-container-gap compact:gap-compact-container-gap",
+        sizing === "component" && "gap-mobile-component-gap desktop:gap-desktop-component-gap compact:gap-compact-component-gap",
+        elevation === 0 && "shadow-none",
+        elevation === 2 && "shadow-2",
+        elevation === 4 && "shadow-4",
+        elevation === 16 && "shadow-16",
+        rounded && "rounded"
+      ),
+      children
+    }
+  );
+};
+
+// src/components/Swatch.tsx
+var import_clsx6 = __toESM(require("clsx"), 1);
+
+// src/components/Paragraph.tsx
+var import_clsx4 = __toESM(require("clsx"), 1);
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var Paragraph = (_a) => {
+  var _b = _a, {
+    className,
+    color,
+    padded,
+    align = "left",
+    tall,
+    addOverflow,
+    children,
+    as = "p"
+  } = _b, props = __objRest(_b, [
+    "className",
+    "color",
+    "padded",
+    "align",
+    "tall",
+    "addOverflow",
+    "children",
+    "as"
+  ]);
+  const Element = as;
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    Element,
+    __spreadProps(__spreadValues({}, props), {
+      className: (0, import_clsx4.default)(
+        typography.paragraph,
+        className,
+        padded && componentPaddingXUsingComponentGap,
+        align === "left" && "text-left",
+        align === "center" && "text-center",
+        align === "right" && "text-right",
+        tall && "!leading-6",
+        addOverflow && "whitespace-nowrap text-ellipsis overflow-hidden"
+      ),
+      style: __spreadProps(__spreadValues({}, props.style), {
+        color: color ? `var(--color-${color})` : void 0
+      }),
+      children
+    })
+  );
+};
+Paragraph.displayName = "Paragraph";
+
+// src/components/Heading.tsx
+var import_clsx5 = __toESM(require("clsx"), 1);
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var Heading = (_a) => {
+  var _b = _a, {
+    className,
+    children,
+    as,
+    color,
+    align,
+    variant = "heading1"
+  } = _b, props = __objRest(_b, [
+    "className",
+    "children",
+    "as",
+    "color",
+    "align",
+    "variant"
+  ]);
+  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({
+      className: (0, import_clsx5.default)(
+        typography[variant],
+        className,
+        align === "left" && "text-left",
+        align === "center" && "text-center",
+        align === "right" && "text-right"
+      ),
+      style: __spreadProps(__spreadValues({}, props.style), {
+        color: color ? `var(--color-${color})` : void 0
+      })
+    }, props), {
+      children
+    })
+  );
+};
+Heading.displayName = "Heading";
+var Heading1 = (props) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Heading, __spreadProps(__spreadValues({}, props), { variant: "heading1" }));
+var Heading2 = (props) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Heading, __spreadProps(__spreadValues({}, props), { variant: "heading2" }));
+var Heading3 = (props) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Heading, __spreadProps(__spreadValues({}, props), { variant: "heading3" }));
+Heading1.displayName = "Heading1";
+Heading2.displayName = "Heading2";
+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: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      "div",
+      {
+        className: `w-25 h-18 rounded-xl border border-solid border-border-primary-normal ${className}`
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "w-full flex flex-col text-center text-label gap-desktop-component-gap", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: (0, import_clsx6.default)(typography.paragraph), children: colorName }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        "span",
+        {
+          className: (0, import_clsx6.default)(
+            typography.caption,
+            "text-text-secondary-normal uppercase"
+          ),
+          children: 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"
+      }
+    ) })
+  ] });
+};
+Swatches.displayName = "Swatches";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Swatch,
+  Swatches
+});