@dmsi/wedgekit-react 0.0.1241 → 1.0.0

package/dist/components/Swatch.cjs

@@ -1,2089 +0,0 @@
-"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"
-  ),
-  breadcrumb: (0, import_clsx.default)(
-    "font-sans font-normal",
-    "text-paragraph-mobile desktop:text-paragraph-desktop compact:text-paragraph-desktop-compact",
-    "leading-mobile-breadcrumb desktop:leading-desktop-breadcrumb"
-  )
-};
-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 paddingXUsingLayoutGroupGap = (0, import_clsx.default)(
-  "px-mobile-layout-group-gap desktop:px-desktop-layout-group-gap compact:px-desktop-compact-layout-group-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 componentPaddingX = (0, import_clsx.default)(
-  "px-mobile-component-padding desktop:px-desktop-component-padding compact:px-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 componentPaddingYUsingComponentGap2xMobile = (0, import_clsx.default)(
-  "py-[calc(var(--spacing-mobile-component-gap)_+_8px)] 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 componentPaddingMinusBorderDesktop = (0, import_clsx.default)(
-  "p-[calc(var(--spacing-desktop-component-padding)_-_1px)]"
-);
-var layoutPaddding = (0, import_clsx.default)(
-  "p-mobile-layout-padding desktop:p-desktop-layout-padding compact:p-desktop-compact-layout-padding"
-);
-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 layoutPaddingX = (0, import_clsx.default)(
-  "px-mobile-layout-padding desktop:px-desktop-layout-padding compact:px-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",
-    id,
-    testid
-  } = _b, props = __objRest(_b, [
-    "className",
-    "children",
-    "as",
-    "color",
-    "align",
-    "variant",
-    "id",
-    "testid"
-  ]);
-  const defaultElement = variant === "display1" ? "h1" : "h2";
-  const Element = as != null ? as : defaultElement;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    Element,
-    __spreadProps(__spreadValues({
-      id,
-      "data-testid": testid,
-      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 getFlexClassNames = ({ 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 useGapClassNames = (sizing) => {
-  return (0, import_clsx3.default)(
-    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"
-  );
-};
-var Stack = (_a) => {
-  var _b = _a, {
-    children,
-    items,
-    justify,
-    grow,
-    padding,
-    paddingX,
-    paddingY,
-    paddingBottom,
-    paddingTop,
-    paddingLeft,
-    paddingRight,
-    margin,
-    marginX,
-    marginY,
-    horizontal,
-    horizontalMobile,
-    elevation = 0,
-    rounded,
-    centered,
-    width,
-    minHeight,
-    maxWidth,
-    minWidth,
-    height,
-    maxHeight,
-    borderColor,
-    borderTopColor,
-    borderRightColor,
-    borderBottomColor,
-    borderLeftColor,
-    backgroundColor,
-    sizing = "none",
-    overflowY = "inherit",
-    overflowX = "inherit",
-    flexShrink,
-    flexGrow,
-    position,
-    top,
-    left,
-    id,
-    noGap,
-    marginTop,
-    marginBottom,
-    testid,
-    bottom,
-    zIndex,
-    flexWrap,
-    className,
-    unclipEdges
-  } = _b, props = __objRest(_b, [
-    "children",
-    "items",
-    "justify",
-    "grow",
-    "padding",
-    "paddingX",
-    "paddingY",
-    "paddingBottom",
-    "paddingTop",
-    "paddingLeft",
-    "paddingRight",
-    "margin",
-    "marginX",
-    "marginY",
-    "horizontal",
-    "horizontalMobile",
-    "elevation",
-    "rounded",
-    "centered",
-    "width",
-    "minHeight",
-    "maxWidth",
-    "minWidth",
-    "height",
-    "maxHeight",
-    "borderColor",
-    "borderTopColor",
-    "borderRightColor",
-    "borderBottomColor",
-    "borderLeftColor",
-    "backgroundColor",
-    "sizing",
-    "overflowY",
-    "overflowX",
-    "flexShrink",
-    "flexGrow",
-    "position",
-    "top",
-    "left",
-    "id",
-    "noGap",
-    "marginTop",
-    "marginBottom",
-    "testid",
-    "bottom",
-    "zIndex",
-    "flexWrap",
-    "className",
-    "unclipEdges"
-  ]);
-  var _a2, _b2, _c, _d, _e, _f, _g;
-  const flexClassNames = getFlexClassNames({ items, justify, grow });
-  const gapClassNames = useGapClassNames(sizing);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-    "div",
-    __spreadProps(__spreadValues({
-      id,
-      "data-testid": testid
-    }, props), {
-      style: __spreadValues({
-        height: height === "screen" ? "100vh" : height === "full" ? "100%" : height === void 0 ? void 0 : height === "fit" ? "fit-content" : typeof height === "string" && isNaN(+height) ? height : `${height}px`,
-        maxHeight: maxHeight !== void 0 ? isNaN(+maxHeight) ? maxHeight : `${maxHeight}px` : (_a2 = props.style) == null ? void 0 : _a2.maxHeight,
-        maxWidth: maxWidth !== void 0 ? isNaN(+maxWidth) ? maxWidth : `${maxWidth}px` : (_b2 = props.style) == null ? void 0 : _b2.maxWidth,
-        minHeight: minHeight !== void 0 ? isNaN(+minHeight) ? minHeight : `${minHeight}px` : (_c = props.style) == null ? void 0 : _c.minHeight,
-        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,
-        borderTop: borderTopColor ? `1px solid var(--color-${borderTopColor})` : void 0,
-        borderRight: borderRightColor ? `1px solid var(--color-${borderRightColor})` : void 0,
-        borderBottom: borderBottomColor ? `1px solid var(--color-${borderBottomColor})` : void 0,
-        borderLeft: borderLeftColor ? `1px solid var(--color-${borderLeftColor})` : 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,
-        bottom: bottom !== void 0 ? `${bottom}px` : void 0,
-        left: left !== void 0 ? `${left}px` : void 0,
-        borderBlock: (_d = props.style) == null ? void 0 : _d.borderBlock,
-        marginInline: (_e = props.style) == null ? void 0 : _e.marginInline,
-        zIndex: zIndex !== void 0 ? zIndex : void 0,
-        flexWrap,
-        paddingInline: (_f = props.style) == null ? void 0 : _f.paddingInline,
-        gap: (_g = props.style) == null ? void 0 : _g.gap
-      }, props.style),
-      className: (0, import_clsx3.default)(
-        "scrollbar-thin",
-        "max-w-screen",
-        width !== "fit" && "w-full",
-        width === "full" && "w-full",
-        width === "max" && "w-max",
-        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",
-        paddingY && sizing === "container" && "py-mobile-container-padding desktop:py-desktop-container-padding compact:py-desktop-compact-container-padding",
-        paddingY && sizing === "layout" && "py-mobile-layout-padding desktop:py-desktop-layout-padding compact:py-desktop-compact-layout-padding",
-        paddingY && sizing === "layout-group" && paddingYUsingLayoutGroupGap,
-        paddingY && sizing === "component" && "py-mobile-component-padding desktop:py-desktop-component-padding compact:py-desktop-compact-component-padding",
-        paddingBottom && sizing === "container" && "pb-mobile-container-padding desktop:pb-desktop-container-padding compact:pb-desktop-compact-container-padding",
-        paddingBottom && sizing === "layout" && "pb-mobile-layout-padding desktop:pb-desktop-layout-padding compact:pb-desktop-compact-layout-padding",
-        paddingBottom && sizing === "layout-group" && "pb-mobile-layout-group-padding desktop:pb-desktop-layout-group-padding compact:pb-desktop-compact-layout-group-padding",
-        paddingBottom && sizing === "component" && "pb-mobile-component-padding desktop:pb-desktop-component-padding compact:pb-desktop-compact-component-padding",
-        paddingTop && sizing === "container" && "pt-mobile-container-padding desktop:pt-desktop-container-padding compact:pt-desktop-compact-container-padding",
-        paddingTop && sizing === "layout" && "pt-mobile-layout-padding desktop:pt-desktop-layout-padding compact:pt-desktop-compact-layout-padding",
-        paddingTop && sizing === "layout-group" && "pt-mobile-layout-group-padding desktop:pt-desktop-layout-group-padding compact:pt-desktop-compact-layout-group-padding",
-        paddingTop && sizing === "component" && "pt-mobile-component-padding desktop:pt-desktop-component-padding compact:pt-desktop-compact-component-padding",
-        paddingLeft && sizing === "container" && "pl-mobile-container-padding desktop:pl-desktop-container-padding compact:pl-desktop-compact-container-padding",
-        paddingLeft && sizing === "layout" && "pl-mobile-layout-padding desktop:pl-desktop-layout-padding compact:pl-desktop-compact-layout-padding",
-        paddingLeft && sizing === "layout-group" && "pl-mobile-layout-group-padding desktop:pl-desktop-layout-group-padding compact:pl-desktop-compact-layout-group-padding",
-        paddingLeft && sizing === "component" && "pl-mobile-component-padding desktop:pl-desktop-component-padding compact:pl-desktop-compact-component-padding",
-        paddingRight && sizing === "container" && "pr-mobile-container-padding desktop:pr-desktop-container-padding compact:pr-desktop-compact-container-padding",
-        paddingRight && sizing === "layout" && "pr-mobile-layout-padding desktop:pr-desktop-layout-padding compact:pr-desktop-compact-layout-padding",
-        paddingRight && sizing === "layout-group" && "pr-mobile-layout-group-padding desktop:pr-desktop-layout-group-padding compact:pr-desktop-compact-layout-group-padding",
-        paddingRight && sizing === "component" && "pr-mobile-component-padding desktop:pr-desktop-component-padding compact:pr-desktop-compact-component-padding",
-        margin && sizing === "container" && "m-mobile-container-padding desktop:m-desktop-container-padding compact:m-compact-container-padding",
-        marginX && sizing === "container" && "mx-mobile-container-padding desktop:mx-desktop-container-padding compact:mx-compact-container-padding",
-        marginTop && sizing === "container" && "mt-mobile-container-padding desktop:mt-desktop-container-padding compact:mt-compact-container-padding",
-        marginBottom && sizing === "container" && "mb-mobile-container-padding desktop:mb-desktop-container-padding compact:mb-compact-container-padding",
-        marginY && sizing === "container" && "my-mobile-container-padding desktop:my-desktop-container-padding compact:my-compact-container-padding",
-        horizontal ? "desktop:flex-row" : "desktop:flex-col",
-        horizontalMobile ? "flex-row" : "flex-col",
-        flexClassNames,
-        !noGap && gapClassNames,
-        elevation === 0 && "shadow-none",
-        elevation === 2 && "shadow-2",
-        elevation === 4 && "shadow-4",
-        elevation === 16 && "shadow-16",
-        rounded && "rounded",
-        unclipEdges && "-m-0.75 p-1",
-        className
-      ),
-      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",
-    id,
-    testid
-  } = _b, props = __objRest(_b, [
-    "className",
-    "color",
-    "padded",
-    "align",
-    "tall",
-    "addOverflow",
-    "children",
-    "as",
-    "id",
-    "testid"
-  ]);
-  const Element = as;
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-    Element,
-    __spreadProps(__spreadValues({
-      id,
-      "data-testid": testid
-    }, 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",
-    id,
-    testid
-  } = _b, props = __objRest(_b, [
-    "className",
-    "children",
-    "as",
-    "color",
-    "align",
-    "variant",
-    "id",
-    "testid"
-  ]);
-  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,
-      "data-testid": testid,
-      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, 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",
-      {
-        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 = ({ 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:
-0 && (module.exports = {
-  Swatch,
-  Swatches
-});