@dmsi/wedgekit-react 0.0.5 → 0.0.7

package/dist/components/Swatch.cjs

@@ -231,11 +231,28 @@ 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,
@@ -243,48 +260,60 @@ var Stack = ({
   centered,
   width,
   maxWidth,
+  minWidth,
   height,
   maxHeight,
   borderColor,
   backgroundColor,
   sizing = "none",
-  overflowY = "inherit"
+  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 !== void 0 ? `${height}px` : void 0,
+        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 ? `${width}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
+        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",
-        "w-full",
-        "flex",
+        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",
-        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",
+        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",
@@ -423,8 +452,8 @@ var Swatch = ({ className, colorName, colorHex }) => {
 };
 var Swatches = () => {
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(Stack, { elevation: 0, items: "start", justify: "start", sizing: "container", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Display1, { children: "Colors" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Display1, { children: " Branded Colors" }),
+    /* @__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: [
@@ -476,7 +505,7 @@ var Swatches = () => {
         {
           className: "bg-action-500",
           colorName: "Action-500",
-          colorHex: "#e7f2f9"
+          colorHex: "#00365a"
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
@@ -484,7 +513,7 @@ var Swatches = () => {
         {
           className: "bg-action-400",
           colorName: "Action-400",
-          colorHex: "#d0e5f4"
+          colorHex: "#0077c8"
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
@@ -500,7 +529,7 @@ var Swatches = () => {
         {
           className: "bg-action-200",
           colorName: "Action-200",
-          colorHex: "#0077c8"
+          colorHex: "#d0e5f4"
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
@@ -508,8 +537,51 @@ var Swatches = () => {
         {
           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" }),
@@ -768,7 +840,884 @@ var Swatches = () => {
           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";