@dmsi/wedgekit-react 0.0.26 → 0.0.28

package/src/components/Swatch.tsx

@@ -1,5 +1,5 @@
 import { PropsWithChildren } from "react";
-import { Display1, Display2 } from "./Display";
+import { Display1 } from "./Display";
 import { Stack } from "./Stack";
 import clsx from "clsx";
 import { typography } from "../classNames";
@@ -10,11 +10,12 @@ type SwatchProps = PropsWithChildren<{
   className: string;
   colorName: string;
   colorHex: string;
+  id?: string;
 }>;
 
-export const Swatch = ({ className, colorName, colorHex }: SwatchProps) => {
+export const Swatch = ({ className, colorName, colorHex, id }: SwatchProps) => {
   return (
-    <div className="flex flex-col gap-desktop-layout-padding">
+    <div id={id} className="flex flex-col gap-desktop-layout-padding">
       <div
         className={`w-25 h-18 rounded-xl border border-solid border-border-primary-normal ${className}`}
       ></div>
@@ -33,13 +34,23 @@ export const Swatch = ({ className, colorName, colorHex }: SwatchProps) => {
   );
 };
 
-export const Swatches = () => {
+export const Swatches = ({ id }: { id: string }) => {
   return (
-    <Stack elevation={0} items="start" justify="start" sizing="container">
-      <Display1>Color Primitives</Display1>
-
-      <Display1>Branded Colors</Display1>
-      <Paragraph>
+    <Stack
+      id={id}
+      elevation={0}
+      items="start"
+      justify="start"
+      sizing="container"
+    >
+      <Display1 id={id ? `${id}-primitives-title` : undefined}>
+        Color Primitives
+      </Display1>
+
+      <Display1 id={id ? `${id}-branded-title` : undefined}>
+        Branded Colors
+      </Display1>
+      <Paragraph id={id ? `${id}-branded-description` : undefined}>
         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
@@ -47,529 +58,653 @@ export const Swatches = () => {
         get defined by a specific hex value and may use seperate light and dark
         palettes.
       </Paragraph>
-      <Heading3>Brand</Heading3>
+      <Heading3 id={id ? `${id}-brand-heading` : undefined}>Brand</Heading3>
 
       <div className="flex flex-row gap-4">
         <Swatch
+          id={id ? `${id}-brand-500` : undefined}
           className="bg-brand-500"
           colorName="Brand-500"
           colorHex="#9e3004"
         />
         <Swatch
+          id={id ? `${id}-brand-400` : undefined}
           className="bg-brand-400"
           colorName="Brand-400"
           colorHex="#df4405"
         />
         <Swatch
+          id={id ? `${id}-brand-300` : undefined}
           className="bg-brand-300"
           colorName="Brand-300"
           colorHex="#e56937"
         />
         <Swatch
+          id={id ? `${id}-brand-200` : undefined}
           className="bg-brand-200"
           colorName="Brand-200"
           colorHex="#f0a98c"
         />
         <Swatch
+          id={id ? `${id}-brand-100` : undefined}
           className="bg-brand-100"
           colorName="Brand-100"
           colorHex="#fcece6"
         />
       </div>
 
-      <Heading3>Action</Heading3>
+      <Heading3 id={id ? `${id}-action-heading` : undefined}>Action</Heading3>
 
       <div className="flex flex-row gap-4">
         <Swatch
+          id={id ? `${id}-action-500` : undefined}
           className="bg-action-500"
           colorName="Action-500"
           colorHex="#00365a"
         />
         <Swatch
+          id={id ? `${id}-action-400` : undefined}
           className="bg-action-400"
           colorName="Action-400"
           colorHex="#0077c8"
         />
         <Swatch
+          id={id ? `${id}-action-300` : undefined}
           className="bg-action-300"
           colorName="Action-300"
           colorHex="#459ad4"
         />
         <Swatch
+          id={id ? `${id}-action-200` : undefined}
           className="bg-action-200"
           colorName="Action-200"
           colorHex="#d0e5f4"
         />
         <Swatch
+          id={id ? `${id}-action-100` : undefined}
           className="bg-action-100"
           colorName="Action-100"
           colorHex="#e7f2f9"
         />
       </div>
 
-      <Heading3>Link</Heading3>
+      <Heading3 id={id ? `${id}-link-heading` : undefined}>Link</Heading3>
 
       <div className="flex flex-row gap-4">
         <Swatch
+          id={id ? `${id}-link-500` : undefined}
           className="bg-link-500"
           colorName="Link-500"
           colorHex="#00365a"
         />
         <Swatch
+          id={id ? `${id}-link-400` : undefined}
           className="bg-link-400"
           colorName="Link-400"
           colorHex="#0077c8"
         />
         <Swatch
+          id={id ? `${id}-link-300` : undefined}
           className="bg-link-300"
           colorName="Link-300"
           colorHex="#459ad4"
         />
         <Swatch
+          id={id ? `${id}-link-200` : undefined}
           className="bg-link-200"
           colorName="Link-200"
           colorHex="#d0e5f4"
         />
         <Swatch
+          id={id ? `${id}-link-100` : undefined}
           className="bg-link-100"
           colorName="Link-100"
           colorHex="#e7f2f9"
         />
       </div>
 
-      <Display1> Standard Colors</Display1>
-      <Paragraph>
+      <Display1 id={id ? `${id}-standard-colors-title` : undefined}>
+        {" "}
+        Standard Colors
+      </Display1>
+      <Paragraph id={id ? `${id}-standard-colors-description` : undefined}>
         Certain colors should remain constant regardless of branding to help
         ensure legibility and usability.
       </Paragraph>
 
-      <Heading3>Neutral</Heading3>
+      <Heading3 id={id ? `${id}-neutral-heading` : undefined}>Neutral</Heading3>
 
       <div className="flex flex-row gap-4">
         <Swatch
+          id={id ? `${id}-neutral-600` : undefined}
           className="bg-neutral-600"
           colorName="Neutral-600"
           colorHex="#000000"
         />
         <Swatch
+          id={id ? `${id}-neutral-500` : undefined}
           className="bg-neutral-500"
           colorName="Neutral-500"
           colorHex="#1d1e1e"
         />
         <Swatch
+          id={id ? `${id}-neutral-450` : undefined}
           className="bg-neutral-450"
           colorName="Neutral-450"
           colorHex="#3a3a3a"
         />
         <Swatch
+          id={id ? `${id}-neutral-400` : undefined}
           className="bg-neutral-400"
           colorName="Neutral-400"
           colorHex="#6b6d6d"
         />
         <Swatch
+          id={id ? `${id}-neutral-300` : undefined}
           className="bg-neutral-300"
           colorName="Neutral-300"
           colorHex="#c1c1c1"
         />
         <Swatch
+          id={id ? `${id}-neutral-200` : undefined}
           className="bg-neutral-200"
           colorName="Neutral-200"
           colorHex="#ebebeb"
         />
         <Swatch
+          id={id ? `${id}-neutral-100` : undefined}
           className="bg-neutral-100"
           colorName="Neutral-100"
           colorHex="#f7f7f7"
         />
         <Swatch
+          id={id ? `${id}-neutral-000` : undefined}
           className="bg-neutral-000"
           colorName="Neutral-000"
           colorHex="#ffffff"
         />
       </div>
 
-      <Heading3> Success</Heading3>
+      <Heading3 id={id ? `${id}-success-heading` : undefined}>
+        {" "}
+        Success
+      </Heading3>
 
       <div className="flex flex-row gap-4">
         <Swatch
+          id={id ? `${id}-success-500` : undefined}
           className="bg-success-500"
           colorName="Success-500"
           colorHex="#126240"
         />
         <Swatch
+          id={id ? `${id}-success-400` : undefined}
           className="bg-success-400"
           colorName="Success-400"
           colorHex="#27d68b"
         />
         <Swatch
+          id={id ? `${id}-success-300` : undefined}
           className="bg-success-300"
           colorName="Success-300"
           colorHex="#61e1aa"
         />
         <Swatch
+          id={id ? `${id}-success-200` : undefined}
           className="bg-success-200"
           colorName="Success-200"
           colorHex="#d7f7e9"
         />
         <Swatch
+          id={id ? `${id}-success-100` : undefined}
           className="bg-success-100"
           colorName="Success-100"
           colorHex="#eefbf6"
         />
       </div>
 
-      <Heading3> Warning</Heading3>
+      <Heading3 id={id ? `${id}-warning-heading` : undefined}>
+        {" "}
+        Warning
+      </Heading3>
 
       <div className="flex flex-row gap-4">
         <Swatch
+          id={id ? `${id}-warning-500` : undefined}
           className="bg-warning-500"
           colorName="Warning-500"
           colorHex="#91670c"
         />
         <Swatch
+          id={id ? `${id}-warning-400` : undefined}
           className="bg-warning-400"
           colorName="Warning-400"
           colorHex="#f0a913"
         />
         <Swatch
+          id={id ? `${id}-warning-300` : undefined}
           className="bg-warning-300"
           colorName="Warning-300"
           colorHex="#f4c053"
         />
         <Swatch
+          id={id ? `${id}-warning-200` : undefined}
           className="bg-warning-200"
           colorName="Warning-200"
           colorHex="#f9dfa9"
         />
         <Swatch
+          id={id ? `${id}-warning-100` : undefined}
           className="bg-warning-100"
           colorName="Warning-100"
           colorHex="#fcefd4"
         />
       </div>
 
-      <Heading3> Critical</Heading3>
+      <Heading3 id={id ? `${id}-critical-heading` : undefined}>
+        {" "}
+        Critical
+      </Heading3>
 
       <div className="flex flex-row gap-4">
         <Swatch
+          id={id ? `${id}-critical-500` : undefined}
           className="bg-critical-500"
           colorName="Critical-500"
           colorHex="#892615"
         />
         <Swatch
+          id={id ? `${id}-critical-400` : undefined}
           className="bg-critical-400"
           colorName="Critical-400"
           colorHex="#cc391f"
         />
         <Swatch
+          id={id ? `${id}-critical-300` : undefined}
           className="bg-critical-300"
           colorName="Critical-300"
           colorHex="#dd5e48"
         />
         <Swatch
+          id={id ? `${id}-critical-200` : undefined}
           className="bg-critical-200"
           colorName="Critical-200"
           colorHex="#f0b7ad"
         />
         <Swatch
+          id={id ? `${id}-critical-100` : undefined}
           className="bg-critical-100"
           colorName="Critical-100"
           colorHex="#fbedea"
         />
       </div>
 
-      <Heading3>Color order for charts, graphs, etc</Heading3>
+      <Heading3 id={id ? `${id}-chart-heading` : undefined}>
+        Color order for charts, graphs, etc
+      </Heading3>
 
       <div className="flex flex-row gap-4">
         <Swatch
+          id={id ? `${id}-chart-0` : undefined}
           className="bg-chart-0"
           colorName="Action-400"
           colorHex="#0077c8"
         />
         <Swatch
+          id={id ? `${id}-chart-1` : undefined}
           className="bg-chart-1"
           colorName="Brand-400"
           colorHex="#df4405"
         />
         <Swatch
+          id={id ? `${id}-chart-2` : undefined}
           className="bg-chart-2"
           colorName="Teal-400"
           colorHex="#40c1ac"
         />
         <Swatch
+          id={id ? `${id}-chart-3` : undefined}
           className="bg-chart-3"
           colorName="Warning-400"
           colorHex="#f0a913"
         />
         <Swatch
+          id={id ? `${id}-chart-4` : undefined}
           className="bg-chart-4"
           colorName="Neutral-400"
           colorHex="#6b6d6d"
         />
         <Swatch
+          id={id ? `${id}-chart-5` : undefined}
           className="bg-chart-5"
           colorName="Purple-400"
           colorHex="#8d267a"
         />
         <Swatch
+          id={id ? `${id}-chart-6` : undefined}
           className="bg-chart-6"
           colorName="Orange-400"
           colorHex="#cc391f"
         />
       </div>
-      
+
       <br />
-      
-      <Display1>Color Semantics</Display1>
-      <Paragraph>
-        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 “Primary Action Color” 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.
 
+      <Display1 id={id ? `${id}-semantics-title` : undefined}>
+        Color Semantics
+      </Display1>
+      <Paragraph id={id ? `${id}-semantics-description` : undefined}>
+        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 “Primary Action Color” 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.
         <br />
         <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 “background/action” color, which would reference the “color/background/action/normal” token by default, and the other states as defined.
+        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 “background/action” color, which would reference the
+        “color/background/action/normal” token by default, and the other states
+        as defined.
       </Paragraph>
 
-      <Heading2>Text</Heading2>
-      
-      <Heading3>Text/Primary</Heading3>
+      <Heading2 id={id ? `${id}-text-heading` : undefined}>Text</Heading2>
+
+      <Heading3 id={id ? `${id}-text-primary-heading` : undefined}>
+        Text/Primary
+      </Heading3>
 
       <div className="flex flex-row gap-4">
         <Swatch
+          id={id ? `${id}-text-primary-normal` : undefined}
           className="bg-text-primary-normal"
           colorName="Normal"
           colorHex="#1d1e1e"
         />
 
         <Swatch
+          id={id ? `${id}-text-primary-disabled` : undefined}
           className="bg-text-primary-disabled"
           colorName="Disabled"
           colorHex="#c1c1c1"
         />
 
         <Swatch
+          id={id ? `${id}-text-primary-error` : undefined}
           className="bg-text-primary-error"
           colorName="Error"
           colorHex="#cc391f"
         />
       </div>
-      
-      <Heading3>Text/Secondary</Heading3>
+
+      <Heading3 id={id ? `${id}-text-secondary-heading` : undefined}>
+        Text/Secondary
+      </Heading3>
 
       <div className="flex flex-row gap-4">
         <Swatch
+          id={id ? `${id}-text-secondary-normal` : undefined}
           className="bg-text-secondary-normal"
           colorName="Normal"
           colorHex="#6b6d6d"
         />
 
         <Swatch
+          id={id ? `${id}-text-secondary-disabled` : undefined}
           className="bg-text-secondary-disabled"
           colorName="Disabled"
           colorHex="#c1c1c1"
         />
 
         <Swatch
+          id={id ? `${id}-text-secondary-error` : undefined}
           className="bg-text-secondary-error"
           colorName="Error"
           colorHex="#cc391f"
         />
       </div>
-      
-      <Heading3>Text/Brand</Heading3>
+
+      <Heading3 id={id ? `${id}-text-brand-heading` : undefined}>
+        Text/Brand
+      </Heading3>
 
       <div className="flex flex-row gap-4">
         <Swatch
+          id={id ? `${id}-text-brand-normal` : undefined}
           className="bg-brand-400"
           colorName="Normal"
           colorHex="#df4405"
         />
 
         <Swatch
+          id={id ? `${id}-text-brand-disabled` : undefined}
           className="bg-neutral-300"
           colorName="Disabled"
           colorHex="#c1c1c1"
         />
 
         <Swatch
+          id={id ? `${id}-text-brand-error` : undefined}
           className="bg-critical-400"
           colorName="Error"
           colorHex="#cc391f"
         />
       </div>
-      
-      <Heading3>Text/Action Primary</Heading3>
+
+      <Heading3 id={id ? `${id}-text-action-primary-heading` : undefined}>
+        Text/Action Primary
+      </Heading3>
 
       <div className="flex flex-row gap-4">
         <Swatch
+          id={id ? `${id}-text-action-primary-normal` : undefined}
           className="bg-text-action-primary-normal"
           colorName="Normal"
           colorHex="#0077c8"
         />
 
         <Swatch
+          id={id ? `${id}-text-action-primary-hover` : undefined}
           className="bg-text-action-primary-hover"
           colorName="Hover"
           colorHex="#00365a"
         />
 
         <Swatch
+          id={id ? `${id}-text-action-primary-active` : undefined}
           className="bg-text-action-primary-active"
           colorName="Active"
           colorHex="#459ad4"
         />
 
         <Swatch
+          id={id ? `${id}-text-action-primary-disabled` : undefined}
           className="bg-text-action-primary-disabled"
           colorName="Disabled"
           colorHex="#6b6d6d"
         />
       </div>
-      
-      <Heading3>Text/On Action Primary</Heading3>
+
+      <Heading3 id={id ? `${id}-text-on-action-primary-heading` : undefined}>
+        Text/On Action Primary
+      </Heading3>
 
       <div className="flex flex-row gap-4">
         <Swatch
+          id={id ? `${id}-text-on-action-primary-normal` : undefined}
           className="bg-text-on-action-primary-normal"
           colorName="Normal"
           colorHex="#ffffff"
         />
 
         <Swatch
+          id={id ? `${id}-text-on-action-primary-hover` : undefined}
           className="bg-text-on-action-primary-hover"
           colorName="Hover"
           colorHex="#ffffff"
         />
 
         <Swatch
+          id={id ? `${id}-text-on-action-primary-active` : undefined}
           className="bg-text-on-action-primary-active"
           colorName="Active"
           colorHex="#ffffff"
         />
 
         <Swatch
+          id={id ? `${id}-text-on-action-primary-disabled` : undefined}
           className="bg-text-on-action-primary-disabled"
           colorName="Disabled"
           colorHex="#6b6d6d"
         />
       </div>
-      
-      <Heading3>Text/Action Critical</Heading3>
+
+      <Heading3 id={id ? `${id}-text-action-critical-heading` : undefined}>
+        Text/Action Critical
+      </Heading3>
 
       <div className="flex flex-row gap-4">
         <Swatch
+          id={id ? `${id}-text-action-critical-normal` : undefined}
           className="bg-text-action-critical-normal"
           colorName="Normal"
           colorHex="#CC391F"
         />
 
         <Swatch
+          id={id ? `${id}-text-action-critical-hover` : undefined}
           className="bg-text-action-critical-hover"
           colorName="Hover"
           colorHex="#892615"
         />
 
         <Swatch
+          id={id ? `${id}-text-action-critical-active` : undefined}
           className="bg-text-action-critical-active"
           colorName="Active"
           colorHex="#DD5E48"
         />
 
         <Swatch
+          id={id ? `${id}-text-action-critical-disabled` : undefined}
           className="bg-text-action-critical-disabled"
           colorName="Disabled"
           colorHex="#6b6d6d"
         />
       </div>
-      
-      <Heading3>Text/Link</Heading3>
+
+      <Heading3 id={id ? `${id}-text-link-heading` : undefined}>
+        Text/Link
+      </Heading3>
 
       <div className="flex flex-row gap-4">
         <Swatch
+          id={id ? `${id}-text-link-normal` : undefined}
           className="bg-text-link-normal"
           colorName="Normal"
           colorHex="#0077C8"
         />
 
         <Swatch
+          id={id ? `${id}-text-link-hover` : undefined}
           className="bg-text-link-hover"
           colorName="Hover"
           colorHex="#00365A"
         />
 
         <Swatch
+          id={id ? `${id}-text-link-active` : undefined}
           className="bg-text-link-active"
           colorName="Active"
           colorHex="#459AD4"
         />
 
         <Swatch
+          id={id ? `${id}-text-link-disabled` : undefined}
           className="bg-text-link-disabled"
           colorName="Disabled"
           colorHex="#6b6d6d"
         />
       </div>
-      
-      <Heading3>Text/Success</Heading3>
+
+      <Heading3 id={id ? `${id}-text-success-heading` : undefined}>
+        Text/Success
+      </Heading3>
 
       <div className="flex flex-row gap-4">
         <Swatch
+          id={id ? `${id}-text-success-normal` : undefined}
           className="bg-text-success-normal"
           colorName="Normal"
           colorHex="#126240"
         />
 
         <Swatch
+          id={id ? `${id}-text-success-disabled` : undefined}
           className="bg-text-success-disabled"
           colorName="Disabled"
           colorHex="#6B6D6D"
         />
 
         <Swatch
+          id={id ? `${id}-text-success-error` : undefined}
           className="bg-text-success-error"
           colorName="Error"
           colorHex="#CC391F"
         />
       </div>
-      
-      <Heading3>Text/Warning</Heading3>
+
+      <Heading3 id={id ? `${id}-text-warning-heading` : undefined}>
+        Text/Warning
+      </Heading3>
 
       <div className="flex flex-row gap-4">
         <Swatch
+          id={id ? `${id}-text-warning-normal` : undefined}
           className="bg-text-warning-normal"
           colorName="Normal"
           colorHex="#126240"
         />
 
         <Swatch
+          id={id ? `${id}-text-warning-disabled` : undefined}
           className="bg-text-warning-disabled"
           colorName="Disabled"
           colorHex="#6B6D6D"
         />
 
         <Swatch
+          id={id ? `${id}-text-warning-error` : undefined}
           className="bg-text-warning-error"
           colorName="Error"
           colorHex="#CC391F"
         />
       </div>
-      
-      <Heading3>Text/Critical</Heading3>
+
+      <Heading3 id={id ? `${id}-text-critical-heading` : undefined}>
+        Text/Critical
+      </Heading3>
 
       <div className="flex flex-row gap-4">
         <Swatch
+          id={id ? `${id}-text-critical-normal` : undefined}
           className="bg-text-critical-normal"
           colorName="Normal"
           colorHex="#CC391F"
         />
 
         <Swatch
+          id={id ? `${id}-text-critical-disabled` : undefined}
           className="bg-text-critical-disabled"
           colorName="Disabled"
           colorHex="#6B6D6D"
         />
 
         <Swatch
+          id={id ? `${id}-text-critical-error` : undefined}
           className="bg-text-critical-error"
           colorName="Error"
           colorHex="#CC391F"
@@ -577,488 +712,628 @@ export const Swatches = () => {
       </div>
 
       <br />
-      <Heading2>Icon</Heading2>
-      
-      <Heading3>Icon/Primary</Heading3>
+      <Heading2 id={id ? `${id}-icon-heading` : undefined}>Icon</Heading2>
+
+      <Heading3 id={id ? `${id}-icon-primary-heading` : undefined}>
+        Icon/Primary
+      </Heading3>
 
       <div className="flex flex-row gap-4">
         <Swatch
+          id={id ? `${id}-icon-primary-normal` : undefined}
           className="bg-icon-primary-normal"
           colorName="Normal"
           colorHex="#6B6D6D"
         />
-        
+
         <Swatch
+          id={id ? `${id}-icon-primary-disabled` : undefined}
           className="bg-icon-primary-disabled"
           colorName="Disabled"
           colorHex="#C1C1C1"
         />
       </div>
-      
-      <Heading3>Icon/Success</Heading3>
+
+      <Heading3 id={id ? `${id}-icon-success-heading` : undefined}>
+        Icon/Success
+      </Heading3>
 
       <div className="flex flex-row gap-4">
         <Swatch
+          id={id ? `${id}-icon-success-normal` : undefined}
           className="bg-icon-success-normal"
           colorName="Normal"
           colorHex="#27D68B"
         />
-        
+
         <Swatch
+          id={id ? `${id}-icon-success-disabled` : undefined}
           className="bg-icon-success-disabled"
           colorName="Disabled"
           colorHex="#6B6D6D"
         />
       </div>
-      
-      <Heading3>Icon/Warning</Heading3>
+
+      <Heading3 id={id ? `${id}-icon-warning-heading` : undefined}>
+        Icon/Warning
+      </Heading3>
 
       <div className="flex flex-row gap-4">
         <Swatch
+          id={id ? `${id}-icon-warning-normal` : undefined}
           className="bg-icon-warning-normal"
           colorName="Normal"
           colorHex="#F0A913"
         />
-        
+
         <Swatch
+          id={id ? `${id}-icon-warning-disabled` : undefined}
           className="bg-icon-warning-disabled"
           colorName="Disabled"
           colorHex="#6B6D6D"
         />
       </div>
-      
-      <Heading3>Icon/Critical</Heading3>
+
+      <Heading3 id={id ? `${id}-icon-critical-heading` : undefined}>
+        Icon/Critical
+      </Heading3>
 
       <div className="flex flex-row gap-4">
         <Swatch
+          id={id ? `${id}-icon-critical-normal` : undefined}
           className="bg-icon-critical-normal"
           colorName="Normal"
           colorHex="#CC391F"
         />
-        
+
         <Swatch
+          id={id ? `${id}-icon-critical-disabled` : undefined}
           className="bg-icon-critical-disabled"
           colorName="Disabled"
           colorHex="#6B6D6D"
         />
       </div>
-      
-      <Heading3>Icon/Action Primary</Heading3>
+
+      <Heading3 id={id ? `${id}-icon-action-primary-heading` : undefined}>
+        Icon/Action Primary
+      </Heading3>
 
       <div className="flex flex-row gap-4">
         <Swatch
+          id={id ? `${id}-icon-action-primary-normal` : undefined}
           className="bg-icon-action-primary-normal"
           colorName="Normal"
           colorHex="#1D1E1E"
         />
-        
+
         <Swatch
+          id={id ? `${id}-icon-action-primary-hover` : undefined}
           className="bg-icon-action-primary-hover"
           colorName="Hover"
           colorHex="#00365A"
         />
-        
+
         <Swatch
+          id={id ? `${id}-icon-action-primary-active` : undefined}
           className="bg-icon-action-primary-active"
           colorName="Active"
           colorHex="#459AD4"
         />
-        
+
         <Swatch
+          id={id ? `${id}-icon-action-primary-disabled` : undefined}
           className="bg-icon-action-primary-disabled"
           colorName="Disabled"
           colorHex="#C1C1C1"
         />
       </div>
-      
-      <Heading3>Icon/On Action Primary</Heading3>
+
+      <Heading3 id={id ? `${id}-icon-on-action-primary-heading` : undefined}>
+        Icon/On Action Primary
+      </Heading3>
 
       <div className="flex flex-row gap-4">
         <Swatch
+          id={id ? `${id}-icon-on-action-primary-normal` : undefined}
           className="bg-icon-on-action-primary-normal"
           colorName="Normal"
           colorHex="#FFFFFF"
         />
-        
+
         <Swatch
+          id={id ? `${id}-icon-on-action-primary-hover` : undefined}
           className="bg-icon-on-action-primary-hover"
           colorName="Hover"
           colorHex="#FFFFFF"
         />
-        
+
         <Swatch
+          id={id ? `${id}-icon-on-action-primary-active` : undefined}
           className="bg-icon-on-action-primary-active"
           colorName="Active"
           colorHex="#FFFFFF"
         />
-        
+
         <Swatch
+          id={id ? `${id}-icon-on-action-primary-disabled` : undefined}
           className="bg-icon-on-action-primary-disabled"
           colorName="Disabled"
           colorHex="#6B6D6D"
         />
       </div>
-      
-      <Heading3>Icon/Action Secondary</Heading3>
+
+      <Heading3 id={id ? `${id}-icon-action-secondary-heading` : undefined}>
+        Icon/Action Secondary
+      </Heading3>
 
       <div className="flex flex-row gap-4">
         <Swatch
+          id={id ? `${id}-icon-action-secondary-normal` : undefined}
           className="bg-icon-action-secondary-normal"
           colorName="Normal"
           colorHex="#0077C8"
         />
-        
+
         <Swatch
+          id={id ? `${id}-icon-action-secondary-hover` : undefined}
           className="bg-icon-action-secondary-hover"
           colorName="Hover"
           colorHex="#00365A"
         />
-        
+
         <Swatch
+          id={id ? `${id}-icon-action-secondary-active` : undefined}
           className="bg-icon-action-secondary-active"
           colorName="Active"
           colorHex="#459AD4"
         />
-        
+
         <Swatch
+          id={id ? `${id}-icon-action-secondary-disabled` : undefined}
           className="bg-icon-action-secondary-disabled"
           colorName="Disabled"
           colorHex="#6B6D6D"
         />
       </div>
-      
-      <Heading3>Icon/Action Critical</Heading3>
+
+      <Heading3 id={id ? `${id}-icon-action-critical-heading` : undefined}>
+        Icon/Action Critical
+      </Heading3>
 
       <div className="flex flex-row gap-4">
         <Swatch
+          id={id ? `${id}-icon-action-critical-normal` : undefined}
           className="bg-icon-action-critical-normal"
           colorName="Normal"
           colorHex="#CC391F"
         />
-        
+
         <Swatch
+          id={id ? `${id}-icon-action-critical-hover` : undefined}
           className="bg-icon-action-critical-hover"
           colorName="Hover"
           colorHex="#892615"
         />
-        
+
         <Swatch
+          id={id ? `${id}-icon-action-critical-active` : undefined}
           className="bg-icon-action-critical-active"
           colorName="Active"
           colorHex="#DD5E48"
         />
-        
+
         <Swatch
+          id={id ? `${id}-icon-action-critical-disabled` : undefined}
           className="bg-icon-action-critical-disabled"
           colorName="Disabled"
           colorHex="#6B6D6D"
         />
       </div>
-      
-      <Heading3>Icon/Brand Primary</Heading3>
+
+      <Heading3 id={id ? `${id}-icon-brand-primary-heading` : undefined}>
+        Icon/Brand Primary
+      </Heading3>
 
       <div className="flex flex-row gap-4">
         <Swatch
+          id={id ? `${id}-icon-brand-primary-normal` : undefined}
           className="bg-icon-brand-primary-normal"
           colorName="Normal"
           colorHex="#DF4405"
         />
-        
+
         <Swatch
+          id={id ? `${id}-icon-brand-primary-hover` : undefined}
           className="bg-icon-brand-primary-hover"
           colorName="Hover"
           colorHex="#9E3004"
         />
-        
+
         <Swatch
+          id={id ? `${id}-icon-brand-primary-active` : undefined}
           className="bg-icon-brand-primary-active"
           colorName="Active"
           colorHex="#E56937"
         />
-        
+
         <Swatch
+          id={id ? `${id}-icon-brand-primary-disabled` : undefined}
           className="bg-icon-brand-primary-disabled"
           colorName="Disabled"
           colorHex="#C1C1C1"
         />
       </div>
-      
+
       <br />
-      <Heading2>Border</Heading2>
-      
-      <Heading3>Border/Primary</Heading3>
+      <Heading2 id={id ? `${id}-border-heading` : undefined}>Border</Heading2>
+
+      <Heading3 id={id ? `${id}-border-primary-heading` : undefined}>
+        Border/Primary
+      </Heading3>
 
       <div className="flex flex-row gap-4">
         <Swatch
+          id={id ? `${id}-border-primary-normal` : undefined}
           className="bg-border-primary-normal"
           colorName="Normal"
           colorHex="#C1C1C1"
         />
-        
+
         <Swatch
+          id={id ? `${id}-border-primary-focus` : undefined}
           className="bg-border-primary-focus"
           colorName="Focus"
           colorHex="#0077C8"
         />
-        
+
         <Swatch
+          id={id ? `${id}-border-primary-error` : undefined}
           className="bg-border-primary-error"
           colorName="Error"
           colorHex="#CC391F"
         />
       </div>
-      
-      <Heading3>Border/Action</Heading3>
+
+      <Heading3 id={id ? `${id}-border-action-heading` : undefined}>
+        Border/Action
+      </Heading3>
 
       <div className="flex flex-row gap-4">
         <Swatch
+          id={id ? `${id}-border-action-normal` : undefined}
           className="bg-border-action-normal"
           colorName="Normal"
           colorHex="#0077C8"
         />
-        
+
         <Swatch
+          id={id ? `${id}-border-action-hover` : undefined}
           className="bg-border-action-hover"
           colorName="Hover"
           colorHex="#00365A"
         />
-        
+
         <Swatch
+          id={id ? `${id}-border-action-active` : undefined}
           className="bg-border-action-active"
           colorName="Active"
           colorHex="#459AD4"
         />
-        
+
         <Swatch
+          id={id ? `${id}-border-action-disabled` : undefined}
           className="bg-border-action-disabled"
           colorName="Disabled"
           colorHex="#EBEBEB"
         />
       </div>
-      
-      <Heading3>Border/Action Critical</Heading3>
+
+      <Heading3 id={id ? `${id}-border-action-critical-heading` : undefined}>
+        Border/Action Critical
+      </Heading3>
 
       <div className="flex flex-row gap-4">
         <Swatch
+          id={id ? `${id}-border-action-critical-normal` : undefined}
           className="bg-border-action-critical-normal"
           colorName="Normal"
           colorHex="#CC391F"
         />
-        
+
         <Swatch
+          id={id ? `${id}-border-action-critical-hover` : undefined}
           className="bg-border-action-critical-hover"
           colorName="Hover"
           colorHex="#892615"
         />
-        
+
         <Swatch
+          id={id ? `${id}-border-action-critical-active` : undefined}
           className="bg-border-action-critical-active"
           colorName="Active"
           colorHex="#DD5E48"
         />
-        
+
         <Swatch
+          id={id ? `${id}-border-action-critical-disabled` : undefined}
           className="bg-border-action-critical-disabled"
           colorName="Disabled"
           colorHex="#EBEBEB"
         />
       </div>
-      
+
       <br />
-      <Heading2>Background</Heading2>
-      
-      <Heading3>Background/Primary</Heading3>
+      <Heading2 id={id ? `${id}-background-heading` : undefined}>
+        Background
+      </Heading2>
+
+      <Heading3 id={id ? `${id}-background-primary-heading` : undefined}>
+        Background/Primary
+      </Heading3>
 
       <div className="flex flex-row gap-4">
         <Swatch
+          id={id ? `${id}-background-primary-normal` : undefined}
           className="bg-background-primary-normal"
           colorName="Normal"
           colorHex="#FFFFFF"
         />
       </div>
-      
-      <Heading3>Background/Secondary</Heading3>
+
+      <Heading3 id={id ? `${id}-background-secondary-heading` : undefined}>
+        Background/Secondary
+      </Heading3>
 
       <div className="flex flex-row gap-4">
         <Swatch
+          id={id ? `${id}-background-secondary-normal` : undefined}
           className="bg-background-secondary-normal"
           colorName="Normal"
           colorHex="#c1c1c1"
         />
       </div>
-      
-      <Heading3>Background/Brand</Heading3>
+
+      <Heading3 id={id ? `${id}-background-brand-heading` : undefined}>
+        Background/Brand
+      </Heading3>
 
       <div className="flex flex-row gap-4">
         <Swatch
+          id={id ? `${id}-background-brand-normal` : undefined}
           className="bg-background-brand-normal"
           colorName="Normal"
           colorHex="#DF4405"
         />
       </div>
-      
-      <Heading3>Background/Grouped Primary</Heading3>
+
+      <Heading3
+        id={id ? `${id}-background-grouped-primary-heading` : undefined}
+      >
+        Background/Grouped Primary
+      </Heading3>
 
       <div className="flex flex-row gap-4">
         <Swatch
+          id={id ? `${id}-background-grouped-primary-normal` : undefined}
           className="bg-background-grouped-primary-normal"
           colorName="Normal"
           colorHex="#FFFFFF"
         />
       </div>
-      
-      <Heading3>Background/Grouped Secondary</Heading3>
+
+      <Heading3
+        id={id ? `${id}-background-grouped-secondary-heading` : undefined}
+      >
+        Background/Grouped Secondary
+      </Heading3>
 
       <div className="flex flex-row gap-4">
         <Swatch
+          id={id ? `${id}-background-grouped-secondary-normal` : undefined}
           className="bg-background-grouped-secondary-normal"
           colorName="Normal"
           colorHex="#f7f7f7"
         />
       </div>
-      
-      <Heading3>Background/Action Primary</Heading3>
+
+      <Heading3 id={id ? `${id}-background-action-primary-heading` : undefined}>
+        Background/Action Primary
+      </Heading3>
 
       <div className="flex flex-row gap-4">
         <Swatch
+          id={id ? `${id}-background-action-primary-normal` : undefined}
           className="bg-background-action-primary-normal"
           colorName="Normal"
           colorHex="#0077C8"
         />
-        
+
         <Swatch
+          id={id ? `${id}-background-action-primary-hover` : undefined}
           className="bg-background-action-primary-hover"
           colorName="Hover"
           colorHex="#00365A"
         />
-        
+
         <Swatch
+          id={id ? `${id}-background-action-primary-active` : undefined}
           className="bg-background-action-primary-active"
           colorName="Active"
           colorHex="#459AD4"
         />
-        
+
         <Swatch
+          id={id ? `${id}-background-action-primary-disabled` : undefined}
           className="bg-background-action-primary-disabled"
           colorName="Disabled"
           colorHex="#EBEBEB"
         />
       </div>
-      
-      <Heading3>Background/Action Secondary</Heading3>
+
+      <Heading3
+        id={id ? `${id}-background-action-secondary-heading` : undefined}
+      >
+        Background/Action Secondary
+      </Heading3>
 
       <div className="flex flex-row gap-4">
         <Swatch
+          id={id ? `${id}-background-action-secondary-normal` : undefined}
           className="bg-background-action-secondary-normal"
           colorName="Normal"
           colorHex="#FFFFFF"
         />
-        
+
         <Swatch
+          id={id ? `${id}-background-action-secondary-hover` : undefined}
           className="bg-background-action-secondary-hover"
           colorName="Hover"
           colorHex="#E7F2F9"
         />
-        
+
         <Swatch
+          id={id ? `${id}-background-action-secondary-active` : undefined}
           className="bg-background-action-secondary-active"
           colorName="Active"
           colorHex="#FFFFFF"
         />
-        
+
         <Swatch
+          id={id ? `${id}-background-action-secondary-disabled` : undefined}
           className="bg-background-action-secondary-disabled"
           colorName="Disabled"
           colorHex="#EBEBEB"
         />
       </div>
-      
-      <Heading3>Background/Action Critical Primary</Heading3>
+
+      <Heading3
+        id={id ? `${id}-background-action-critical-primary-heading` : undefined}
+      >
+        Background/Action Critical Primary
+      </Heading3>
 
       <div className="flex flex-row gap-4">
         <Swatch
+          id={
+            id ? `${id}-background-action-critical-primary-normal` : undefined
+          }
           className="bg-background-action-critical-primary-normal"
           colorName="Normal"
           colorHex="#CC391F"
         />
-        
+
         <Swatch
+          id={id ? `${id}-background-action-critical-primary-hover` : undefined}
           className="bg-background-action-critical-primary-hover"
           colorName="Hover"
           colorHex="#892615"
         />
-        
+
         <Swatch
+          id={
+            id ? `${id}-background-action-critical-primary-active` : undefined
+          }
           className="bg-background-action-critical-primary-active"
           colorName="Active"
           colorHex="#DD5E48"
         />
-        
+
         <Swatch
+          id={
+            id ? `${id}-background-action-critical-primary-disabled` : undefined
+          }
           className="bg-background-action-critical-primary-disabled"
           colorName="Disabled"
           colorHex="#EBEBEB"
         />
       </div>
-      
-      <Heading3>Background/Action Critical Secondary</Heading3>
+
+      <Heading3
+        id={
+          id ? `${id}-background-action-critical-secondary-heading` : undefined
+        }
+      >
+        Background/Action Critical Secondary
+      </Heading3>
 
       <div className="flex flex-row gap-4">
         <Swatch
+          id={
+            id ? `${id}-background-action-critical-secondary-normal` : undefined
+          }
           className="bg-background-action-critical-secondary-normal"
           colorName="Normal"
           colorHex="#FFFFFF"
         />
-        
+
         <Swatch
+          id={
+            id ? `${id}-background-action-critical-secondary-hover` : undefined
+          }
           className="bg-background-action-critical-secondary-hover"
           colorName="Hover"
           colorHex="#FBEDEA"
         />
-        
+
         <Swatch
+          id={
+            id ? `${id}-background-action-critical-secondary-active` : undefined
+          }
           className="bg-background-action-critical-secondary-active"
           colorName="Active"
           colorHex="#FFFFFF"
         />
-        
+
         <Swatch
+          id={
+            id
+              ? `${id}-background-action-critical-secondary-disabled`
+              : undefined
+          }
           className="bg-background-action-critical-secondary-disabled"
           colorName="Disabled"
           colorHex="#EBEBEB"
         />
       </div>
-      
-      <Heading3>Background/Success</Heading3>
+
+      <Heading3 id={id ? `${id}-background-success-heading` : undefined}>
+        Background/Success
+      </Heading3>
 
       <div className="flex flex-row gap-4">
         <Swatch
+          id={id ? `${id}-background-success-normal` : undefined}
           className="bg-background-success-normal"
           colorName="Normal"
           colorHex="#27D68B"
         />
       </div>
-      
-      <Heading3>Background/Warning</Heading3>
+
+      <Heading3 id={id ? `${id}-background-warning-heading` : undefined}>
+        Background/Warning
+      </Heading3>
 
       <div className="flex flex-row gap-4">
         <Swatch
+          id={id ? `${id}-background-warning-normal` : undefined}
           className="bg-background-warning-normal"
           colorName="Normal"
           colorHex="#F0A913"
         />
       </div>
-      
-      <Heading3>Background/Critical</Heading3>
+
+      <Heading3 id={id ? `${id}-background-critical-heading` : undefined}>
+        Background/Critical
+      </Heading3>
 
       <div className="flex flex-row gap-4">
         <Swatch
+          id={id ? `${id}-background-critical-normal` : undefined}
           className="bg-background-critical-normal"
           colorName="Normal"
           colorHex="#CC391F"
         />
       </div>
-      
     </Stack>
   );
 };