@dmsi/wedgekit-react 0.0.550 → 0.0.552

package/src/components/Swatch.tsx

@@ -1,1341 +0,0 @@
-import { PropsWithChildren } from "react";
-import { Display1 } from "./Display";
-import { Stack } from "./Stack";
-import clsx from "clsx";
-import { typography } from "../classNames";
-import { Paragraph } from "./Paragraph";
-import { Heading2, Heading3 } from "./Heading";
-
-type SwatchProps = PropsWithChildren<{
-  className: string;
-  colorName: string;
-  colorHex: string;
-  id?: string;
-}>;
-
-export const Swatch = ({ className, colorName, colorHex, id }: SwatchProps) => {
-  return (
-    <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>
-      <div className="w-full flex flex-col text-center text-label gap-desktop-component-gap">
-        <span className={clsx(typography.paragraph)}>{colorName}</span>
-        <span
-          className={clsx(
-            typography.caption,
-            "text-text-secondary-normal uppercase",
-          )}
-        >
-          {colorHex}
-        </span>
-      </div>
-    </div>
-  );
-};
-
-export const Swatches = ({ id }: { id: string }) => {
-  return (
-    <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
-        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.
-      </Paragraph>
-      <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 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 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 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 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 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 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 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 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 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.
-      </Paragraph>
-
-      <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 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 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 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 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 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 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 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 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 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"
-        />
-      </div>
-
-      <br />
-      <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 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 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 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 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 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 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 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 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 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 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 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 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 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 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
-        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
-        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 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
-        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
-        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
-        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 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 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 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>
-  );
-};
-
-Swatches.displayName = "Swatches";