import * as dataTypes from "tailwindcss/lib/util/dataTypes.js";
import plugin from "tailwindcss/plugin.js";
import { camelToKebab } from "../../utils/camelToKebab.js";
import { objectEntries } from "../../utils/objectEntries.js";
import { objectKeys } from "../../utils/objectKeys.js";
import { componentsCSSProps, getCSSPropRawValue, componentsCSSPropsContainerName } from "./cssProps.js";
import { cssStates, cssStateVariables } from "./cssStates.js";
const componentNames = objectKeys(componentsCSSProps).filter((componentName) => componentName !== "dummy");
const isComponentName = (componentName) => componentNames.includes(componentName);
const customPlugin = plugin(function({
  theme,
  addBase,
  addComponents,
  addUtilities,
  matchComponents,
  matchUtilities,
  addVariant,
  matchVariant,
  e: escape
}) {
  const themeValues = {
    spacing: theme("spacing") ?? {},
    colors: theme("colors") ?? {},
    opacity: theme("opacity") ?? {},
    fontWeight: theme("fontWeight") ?? {},
    translate: theme("translate") ?? {},
    rotate: theme("rotate") ?? {},
    scale: theme("scale") ?? {},
    transitionDuration: theme("transitionDuration") ?? {},
    transitionDelay: theme("transitionDelay") ?? {},
    transitionTimingFunction: theme("transitionTimingFunction") ?? {}
  };
  addBase({
    ":root": {
      "--gds-color-black": "0 0 0",
      // #000000
      "--gds-color-white": "255 255 255",
      // #FFFFFF
      "--gds-color-space-100": "243 243 244",
      // #F3F3F4
      "--gds-color-space-200": "219 219 219",
      // #DBDBDB (TODO: Why is this one perfectly gray but not `space-100`?)
      "--gds-color-space-300": "197 196 198",
      // #C5C4C6
      "--gds-color-space-400": "182 181 185",
      // #B6B5B9
      "--gds-color-space-500": "167 165 174",
      // #A7A5AE
      "--gds-color-space-600": "145 143 157",
      // #918F9D
      "--gds-color-space-700": "132 129 146",
      // #848192
      "--gds-color-space-800": "117 114 133",
      // #757285
      "--gds-color-space-900": "102 99 120",
      // #666378
      "--gds-color-space-1000": "89 85 108",
      // #59556C
      "--gds-color-space-1100": "73 70 93",
      // #49465D
      "--gds-color-space-1200": "58 55 77",
      // #3A374D
      "--gds-color-space-1300": "45 42 63",
      // #2D2A3F
      "--gds-color-space-1400": "36 34 54",
      // #242236
      "--gds-color-space-1500": "29 26 48",
      // #1D1A30
      "--gds-color-space-1600": "22 19 42",
      // #16132A
      "--gds-color-space-1700": "12 10 29",
      // #0C0A1D
      "--gds-color-space-1800": "8 6 24",
      // #080618
      "--gds-color-purple-100": "226 219 255",
      // #E2DBFF
      "--gds-color-purple-200": "197 183 255",
      // #C5B7FF
      "--gds-color-purple-300": "169 148 255",
      // #A994FF
      "--gds-color-purple-400": "140 112 255",
      // #8C70FF
      "--gds-color-purple-500": "111 76 255",
      // #6F4CFF
      "--gds-color-purple-600": "101 69 232",
      // #6545E8
      "--gds-color-purple-700": "81 56 186",
      // #5138BA
      "--gds-color-purple-800": "61 43 140",
      // #3D2B8C
      "--gds-color-purple-900": "51 36 118",
      // #332476
      "--gds-color-purple-1000": "40 28 92",
      // #281C5C
      "--gds-color-purple-1100": "25 18 58",
      // #19123A
      "--gds-color-purple-1200": "20 15 47",
      // #140F2F
      "--gds-color-starfield-100": "219 244 230",
      // #DBF4E6
      "--gds-color-starfield-200": "183 234 205",
      // #B7EACD
      "--gds-color-starfield-300": "147 223 179",
      // #93DFB3
      "--gds-color-starfield-400": "111 213 154",
      // #6FD59A
      "--gds-color-starfield-500": "75 202 129",
      // #4BCA81
      "--gds-color-starfield-600": "62 163 108",
      // #3EA36C
      "--gds-color-starfield-700": "49 125 88",
      // #317D58
      "--gds-color-starfield-800": "37 86 67",
      // #255643
      "--gds-color-starfield-900": "24 48 47",
      // #18302F
      "--gds-color-starfield-1000": "17 34 33",
      // #112221
      "--gds-color-starfield-1100": "14 27 27",
      // #0E1B1B
      "--gds-color-solar-100": "255 238 204",
      // #FFEECC
      "--gds-color-solar-200": "255 220 153",
      // #FFDC99
      "--gds-color-solar-300": "255 203 103",
      // #FFCB67
      "--gds-color-solar-400": "255 185 52",
      // #FFB934
      "--gds-color-solar-500": "255 168 1",
      // #FFA801
      "--gds-color-solar-600": "206 136 6",
      // #CE8806
      "--gds-color-solar-700": "157 104 11",
      // #9D680B
      "--gds-color-solar-800": "109 73 16",
      // #6D4910
      "--gds-color-solar-900": "60 41 21",
      // #3C2915
      "--gds-color-solar-1000": "39 27 27",
      // #271B1B
      "--gds-color-solar-1100": "29 22 26",
      // #1D161A
      "--gds-color-sonja-100": "251 219 226",
      // #FBDBE2
      "--gds-color-sonja-200": "248 183 197",
      // #F8B7C5
      "--gds-color-sonja-300": "244 146 167",
      // #F492A7
      "--gds-color-sonja-400": "241 110 138",
      // #F16E8A
      "--gds-color-sonja-500": "237 74 109",
      // #ED4A6D
      "--gds-color-sonja-600": "192 61 92",
      // #C03D5C
      "--gds-color-sonja-700": "147 48 76",
      // #93304C
      "--gds-color-sonja-800": "101 35 59",
      // #65233B
      "--gds-color-sonja-900": "56 22 43",
      // #38162B
      "--gds-color-sonja-1000": "37 14 37",
      // #250E25
      "--gds-color-sonja-1100": "24 11 29",
      // #180B1D
      "--gds-color-galactic-100": "219 236 255",
      // #DBECFF
      "--gds-color-galactic-200": "183 216 255",
      // #B7D8FF
      "--gds-color-galactic-300": "148 197 255",
      // #94C5FF
      "--gds-color-galactic-400": "112 177 255",
      // #70B1FF
      "--gds-color-galactic-500": "76 158 255",
      // #4C9EFF
      "--gds-color-galactic-600": "63 128 209",
      // #3F80D1
      "--gds-color-galactic-700": "50 98 163",
      // #3262A3
      "--gds-color-galactic-800": "37 69 118",
      // #254576
      "--gds-color-galactic-900": "24 39 72",
      // #182748
      "--gds-color-galactic-1000": "15 25 46",
      // #0F192E
      "--gds-color-galactic-1100": "13 21 38",
      // #0D1526
      "--gds-color-focus": "111 76 255",
      // same as `purple-500`
      "--gds-color-placeholder": "132 129 146",
      // same as `space-700`
      "--gds-color-white-4": "22 20 38",
      // #161426,
      "--gds-color-white-8": "32 30 48",
      // #201E30,
      "--gds-color-white-12": "42 39 57",
      // #2A2739,
      "--gds-color-midnight": "12 10 29",
      // #0C0A1D
      "--gds-color-midnight-dark": "12 10 25",
      // #0C0A19,
      "--gds-color-purple": "111 76 255",
      // #6F4CFF
      "--gds-color-blue": "76 102 255",
      // #4C66FF
      "--gds-color-turquoise": "102 216 255",
      // #66D8FF
      "--gds-color-green": "75 202 129",
      // #4BCA81
      "--gds-color-yellow": "255 168 1",
      // #FFA801
      "--gds-color-red": "237 74 109",
      // #ED4A6D
      "--gds-color-pink": "255 121 198",
      // #FF79C6
      "--gds-color-gray": "73 71 85",
      // #494755
      "--gds-color-overlay": "27 24 52"
      // #1B1834
    }
  });
  addUtilities(
    Object.fromEntries(
      Object.entries(themeValues.fontWeight).map(([key, value]) => [
        `.font-${key}`,
        { fontWeight: value, "--gds-font-weight": value }
      ])
    )
  );
  addUtilities({
    ".italic": {
      fontStyle: "italic",
      fontVariationSettings: '"slnt" -11, "ital" 1'
    },
    ".not-italic": {
      fontStyle: "normal",
      fontVariationSettings: "initial"
    }
  });
  addComponents({
    ".text-h128": {
      "@apply font-sans font-medium text-128 text-balance": ""
    },
    ".text-h96": {
      "@apply font-sans font-medium text-96 text-balance": ""
    },
    ".text-h64": {
      "@apply font-sans font-medium text-64 text-balance": ""
    },
    ".text-h48": {
      "@apply font-sans font-medium text-48 text-balance": ""
    },
    ".text-h40": {
      "@apply font-sans font-medium text-40 text-balance": ""
    },
    ".text-h32": {
      "@apply font-sans font-medium text-32 text-balance": ""
    },
    ".text-h24": {
      "@apply font-sans font-medium text-24 text-balance": ""
    },
    ".text-h20": {
      "@apply font-sans font-medium text-20 text-balance": ""
    },
    ".text-h18": {
      "@apply font-sans font-medium text-18 text-balance": ""
    },
    ".text-h16": {
      "@apply font-sans font-medium text-16 text-balance": ""
    },
    ".text-h14": {
      "@apply font-sans font-medium text-14 text-balance": ""
    },
    ".text-h12": {
      "@apply font-sans font-medium text-12 text-balance": ""
    },
    ".text-p32": {
      "@apply font-sans font-regular text-32 text-pretty": ""
    },
    ".text-p24": {
      "@apply font-sans font-regular text-24 text-pretty": ""
    },
    ".text-p20": {
      "@apply font-sans font-regular text-20 text-pretty": ""
    },
    ".text-p18": {
      "@apply font-sans font-regular text-18 text-pretty": ""
    },
    ".text-p16": {
      "@apply font-sans font-regular text-16 text-pretty": ""
    },
    ".text-p14": {
      "@apply font-sans font-regular text-14 text-pretty": ""
    },
    ".text-p12": {
      "@apply font-sans font-regular text-12 text-pretty": ""
    },
    ".text-c16": {
      "@apply font-sans font-medium text-16 leading-6 uppercase tracking-caption": ""
    },
    ".text-c14": {
      "@apply font-sans font-medium text-14 leading-5 uppercase tracking-caption": ""
    },
    ".text-c12": {
      "@apply font-sans font-medium text-12 leading-4 uppercase tracking-caption": ""
    },
    ".text-c10": {
      "@apply font-sans font-medium text-10 leading-3 uppercase tracking-caption": ""
    },
    ".text-m20": {
      "@apply font-mono font-regular text-20": ""
    },
    ".text-m18": {
      "@apply font-mono font-regular text-18": ""
    },
    ".text-m16": {
      "@apply font-mono font-regular text-16": ""
    },
    ".text-m14": {
      "@apply font-mono font-regular text-14": ""
    },
    ".text-m12": {
      "@apply font-mono font-regular text-12": ""
    }
  });
  addUtilities({
    ".pointer-events-none > *": {
      "--gds-pointer-events": "none"
    },
    ".pointer-events-auto > *": {
      "--gds-pointer-events": "auto"
    },
    ".pointer-events-none": {
      "--gds-previous-pointer-events": "var(--gds-pointer-events)",
      "pointer-events": "none"
    },
    ".pointer-events-auto": {
      "--gds-previous-pointer-events": "var(--gds-pointer-events)",
      "pointer-events": "auto"
    },
    ".pointer-events-previous": {
      "--gds-previous-pointer-events": "revert",
      "--gds-pointer-events": "var(--gds-previous-pointer-events)",
      "pointer-events": "var(--gds-pointer-events)"
    }
  });
  const animateKeyframes = ["from", "via", "to"];
  const animateProperties = {
    color: {
      propertyName: "color",
      type: "color",
      values: themeValues.colors,
      defaultValue: "currentColor"
    },
    bg: {
      propertyName: "background-color",
      type: "color",
      values: themeValues.colors,
      defaultValue: "transparent"
    },
    border: {
      propertyName: "border-color",
      type: "color",
      values: themeValues.colors,
      defaultValue: "transparent"
    },
    outline: {
      propertyName: "outline-color",
      type: "color",
      values: themeValues.colors,
      defaultValue: "transparent"
    },
    opacity: {
      propertyName: "opacity",
      values: themeValues.opacity,
      defaultValue: "1"
    },
    "translate-x": {
      propertyName: "transform",
      values: themeValues.translate,
      defaultValue: "0"
    },
    "translate-y": {
      propertyName: "transform",
      values: themeValues.translate,
      defaultValue: "0"
    },
    rotate: {
      propertyName: "transform",
      values: themeValues.rotate,
      defaultValue: "0"
    },
    scale: {
      propertyName: "transform",
      values: themeValues.scale,
      defaultValue: "1",
      isShorthandFor: ["scale-x", "scale-y"]
    },
    "scale-x": {
      propertyName: "transform",
      values: themeValues.scale,
      defaultValue: "1"
    },
    "scale-y": {
      propertyName: "transform",
      values: themeValues.scale,
      defaultValue: "1"
    }
  };
  const animationsToGenerate = objectEntries(animateProperties).reduce(
    (result, [propertyShortName, property]) => {
      if (property.propertyName !== "transform" && !("isShorthandFor" in property)) {
        return [...result, propertyShortName];
      }
      return result;
    },
    ["", "transform"]
  );
  animationsToGenerate.forEach((animation) => {
    const variantsToGenerate = ["", "with-via"];
    variantsToGenerate.forEach((variant) => {
      const keyframes = variant === "with-via" ? {
        "0%": "from",
        "50%": "via",
        "100%": "to"
      } : {
        "0%": "from",
        "100%": "to"
      };
      const propertiesToAnimate = animation === "" ? animationsToGenerate.filter((animation2) => animation2 !== "") : [animation];
      addBase({
        [`@keyframes gds-animate${animation ? `-${animation}` : ""}${variant ? `-${variant}` : ""}`]: Object.fromEntries(
          Object.entries(keyframes).map(([keyframePercentage, keyframe]) => [
            keyframePercentage,
            Object.fromEntries(
              propertiesToAnimate.map((propertyToAnimate) => {
                const propertyName = propertyToAnimate === "transform" ? "transform" : animateProperties[propertyToAnimate].propertyName;
                const propertyValue = propertyToAnimate === "transform" ? `translate(var(--gds-animate-translate-x-${keyframe}), var(--gds-animate-translate-y-${keyframe})) rotate(var(--gds-animate-rotate-${keyframe})) scaleX(var(--gds-animate-scale-x-${keyframe})) scaleY(var(--gds-animate-scale-y-${keyframe}))` : `var(--gds-animate-${propertyToAnimate}-${keyframe})`;
                return [propertyName, propertyValue];
              })
            )
          ])
        )
      });
    });
  });
  objectEntries(animateProperties).forEach(([propertyShortName, property]) => {
    animateKeyframes.forEach((keyframe) => {
      addBase({
        [`@property --gds-animate-${propertyShortName}-${keyframe}`]: {
          syntax: `"*"`,
          inherits: "false",
          "initial-value": property.defaultValue
        }
      });
      const animationSuffix = keyframe === "via" ? "-with-via" : "";
      matchComponents(
        {
          [`animate-${propertyShortName}-${keyframe}`]: (value) => {
            return {
              ...Object.fromEntries(
                (property.isShorthandFor ?? [propertyShortName]).map((propertyToAnimate) => [
                  `--gds-animate-${propertyToAnimate}-${keyframe}`,
                  value
                ])
              ),
              [`--gds-animate-animation${animationSuffix}`]: `gds-animate-${property.propertyName === "transform" ? "transform" : propertyShortName}${animationSuffix}`,
              animation: `var(--gds-animate-animation-with-via, var(--gds-animate-animation)) var(--gds-animate-duration, 1s) var(--gds-animate-timing-function, ${themeValues.transitionTimingFunction.DEFAULT})`
            };
          }
        },
        {
          type: property.type ?? "any",
          values: property.values
        }
      );
    });
  });
  addUtilities({
    ".animate": {
      "--gds-animate-animation": "gds-animate"
    },
    ".animate-with-via": {
      "--gds-animate-animation-with-via": "gds-animate-with-via"
    },
    ".animate-running": {
      animationPlayState: "running"
    },
    ".animate-paused": {
      animationPlayState: "paused"
    },
    ".animate-normal": {
      animationDirection: "normal"
    },
    ".animate-reverse": {
      animationDirection: "reverse"
    },
    ".animate-alternate": {
      animationDirection: "alternate"
    },
    ".animate-fill-none": {
      animationFillMode: "none"
    },
    ".animate-fill-forwards": {
      animationFillMode: "forwards"
    },
    ".animate-fill-backwards": {
      animationFillMode: "backwards"
    },
    ".animate-fill-both": {
      animationFillMode: "both"
    }
  });
  matchUtilities(
    {
      "animate-duration": (value) => ({
        animationDuration: value,
        "--gds-animate-duration": value
      })
    },
    {
      values: themeValues.transitionDuration
    }
  );
  matchUtilities(
    {
      "animate-delay": (value) => ({
        animationDelay: value
      })
    },
    {
      values: themeValues.transitionDelay
    }
  );
  matchUtilities(
    {
      "animate-ease": (value) => ({
        animationTimingFunction: value,
        "--gds-animate-timing-function": value
      })
    },
    {
      values: themeValues.transitionTimingFunction
    }
  );
  matchUtilities(
    {
      "animate-repeat": (value) => ({
        animationIterationCount: value
      })
    },
    {
      values: {
        "1": "1",
        infinite: "infinite"
      }
    }
  );
  addUtilities({
    // The default `outline-none` resets the outline width and offset to 2px, which are not the values we want (see `globalStyles.css`)
    ".outline-none": {
      outline: "1px solid transparent",
      outlineOffset: "1px"
    },
    ".scrollbar-none": {
      scrollbarWidth: "none",
      "&::-webkit-scrollbar": {
        display: "none"
      }
    },
    ".scrollbar-thin": {
      scrollbarWidth: "thin"
    },
    ".scrollbar-width-auto": {
      scrollbarWidth: "auto"
    },
    // Copied from Tailwind 4
    ".transition-allow-discrete": {
      transitionBehavior: "allow-discrete"
    },
    ".transition-behavior-normal": {
      transitionBehavior: "normal"
    }
  });
  addComponents({
    ".border-bg": {
      "@apply border-transparent bg-origin-border": "",
      "mask-image": "linear-gradient(#fff 0 0), linear-gradient(#fff 0 0)",
      "mask-clip": "padding-box, border-box",
      "mask-composite": "exclude, exclude"
    },
    ".gradient-mask-x": {
      "@supports (animation-timeline: scroll(x self))": {
        "--gds-gradient-mask-size": "32px",
        "--gds-gradient-mask-offset": "0px",
        "animation-name": "gradient-mask-left, gradient-mask-right",
        "animation-timing-function": "linear, linear",
        "animation-timeline": "scroll(x self), scroll(x self)",
        "animation-range": "0 calc(var(--gds-gradient-mask-size) / 2), calc(100% - calc(var(--gds-gradient-mask-size) / 2)) 100%",
        "animation-fill-mode": "both, both",
        "mask-image": "linear-gradient(to right, var(--gds-gradient-mask-left) var(--gds-gradient-mask-offset), black calc(var(--gds-gradient-mask-offset) + var(--gds-gradient-mask-size)), black calc(100% - var(--gds-gradient-mask-size) - var(--gds-gradient-mask-offset)), var(--gds-gradient-mask-right) calc(100% - var(--gds-gradient-mask-offset)))",
        "&.gradient-mask-reverse": {
          "mask-image": "linear-gradient(to right, var(--gds-gradient-mask-right) var(--gds-gradient-mask-offset), black calc(var(--gds-gradient-mask-offset) + var(--gds-gradient-mask-size)), black calc(100% - var(--gds-gradient-mask-size) - var(--gds-gradient-mask-offset)), var(--gds-gradient-mask-left) calc(100% - var(--gds-gradient-mask-offset)))"
        }
      }
    },
    ".gradient-mask-y": {
      "@supports (animation-timeline: scroll(y self))": {
        "--gds-gradient-mask-size": "32px",
        "--gds-gradient-mask-offset": "0px",
        "animation-name": "gradient-mask-top, gradient-mask-bottom",
        "animation-timing-function": "linear, linear",
        "animation-timeline": "scroll(y self), scroll(y self)",
        "animation-range": "0 calc(var(--gds-gradient-mask-size) / 2), calc(100% - calc(var(--gds-gradient-mask-size) / 2)) 100%",
        "animation-fill-mode": "both, both",
        "mask-image": "linear-gradient(to bottom, var(--gds-gradient-mask-top) var(--gds-gradient-mask-offset), black calc(var(--gds-gradient-mask-offset) + var(--gds-gradient-mask-size)), black calc(100% - var(--gds-gradient-mask-size) - var(--gds-gradient-mask-offset)), var(--gds-gradient-mask-bottom) calc(100% - var(--gds-gradient-mask-offset)))",
        "&.gradient-mask-reverse": {
          "mask-image": "linear-gradient(to bottom, var(--gds-gradient-mask-bottom) var(--gds-gradient-mask-offset), black calc(var(--gds-gradient-mask-offset) + var(--gds-gradient-mask-size)), black calc(100% - var(--gds-gradient-mask-size) - var(--gds-gradient-mask-offset)), var(--gds-gradient-mask-top) calc(100% - var(--gds-gradient-mask-offset)))"
        }
      }
    }
  });
  matchUtilities(
    {
      "gradient-mask": (value) => ({
        "--gds-gradient-mask-size": value
      }),
      "gradient-mask-offset": (value) => ({
        "--gds-gradient-mask-offset": value
      })
    },
    {
      values: themeValues.spacing
    }
  );
  matchUtilities(
    {
      "@container": (value, { modifier }) => {
        return {
          "container-type": value,
          "container-name": modifier
        };
      }
    },
    {
      values: {
        size: "size",
        "scroll-state": "scroll-state"
      },
      modifiers: "any"
    }
  );
  const undocumentedAddVariant = addVariant;
  const undocumentedMatchVariant = matchVariant;
  undocumentedAddVariant("-", "html :where(&)", { before: "first" });
  undocumentedAddVariant("--", ":where(&)", { before: "first" });
  const getPointerStateSelector = (state) => `:is([data-gds-state-pointer=${state}], :not([data-gds-state-pointer]):where(${state === "idle" ? ":not(:hover, :active)" : state === "hover" ? ":hover" : ":is(:hover:active, [data-gds-active] :active)"}))`;
  const idleSelector = getPointerStateSelector("idle");
  const hoverSelector = getPointerStateSelector("hover");
  const activeSelector = getPointerStateSelector("active");
  const getFocusStateSelector = (visible, within) => `${within ? ":has" : ":is"}([data-gds-state-focus=true], :not([data-gds-state-focus]):where(${visible ? ":focus-visible" : ":focus"}))`;
  const focusSelector = getFocusStateSelector(false, false);
  const focusWithinSelector = getFocusStateSelector(false, true);
  const focusVisibleSelector = getFocusStateSelector(true, false);
  const focusVisibleWithinSelector = getFocusStateSelector(true, true);
  const openSelector = `:is([data-gds-state-open=true], :not([data-gds-state-open]):where([open], :popover-open, :open, [aria-expanded=true]))`;
  const blankSelector = `:is([data-gds-state-blank=true], :not([data-gds-state-blank]):where(input:placeholder-shown, textarea:placeholder-shown, :not(input, textarea)[data-placeholder-shown]))`;
  const getCheckedStateSelector = (checked) => `:is([data-gds-state-checked=${checked === "indeterminate" ? "indeterminate" : checked}], :not([data-gds-state-checked]):where(${checked !== "indeterminate" ? `${checked ? ":checked" : ":not(:checked)"}:not([aria-checked], [aria-selected]), ` : ""}[aria-checked=${checked === "indeterminate" ? "mixed" : checked}]${checked !== "indeterminate" ? `, [aria-selected=${checked}]` : ""}))`;
  const checkedSelector = getCheckedStateSelector(true);
  const indeterminateSelector = getCheckedStateSelector("indeterminate");
  const uncheckedSelector = getCheckedStateSelector(false);
  const getDisabledStateSelector = (disabled) => `:is([data-gds-state-disabled=${disabled === "read-only" ? "read-only" : disabled}], :not([data-gds-state-disabled]):where(${disabled === true ? ":is" : ":not"}(:disabled, [aria-disabled=true])${disabled !== true ? `${disabled === "read-only" ? ":is" : ":not"}([aria-readonly=true])` : ""}))`;
  const enabledSelector = getDisabledStateSelector(false);
  const disabledSelector = getDisabledStateSelector(true);
  const readOnlySelector = getDisabledStateSelector("read-only");
  const getClickableSelector = (selector) => `:is(:is(a[href], [role='link'], button, [role='button'], [role^='menuitem'], [role='option'], [role='tab'])${selector ?? ""}, :where(label:has(:is(input[type='checkbox'], input[type='radio']:not(:checked))${selector ?? ""})))`;
  const pseudoVariants = {
    first: "&:first-child",
    last: "&:last-child",
    only: "&:only-child",
    odd: "&:nth-child(odd)",
    even: "&:nth-child(even)",
    "first-of-type": "&:first-of-type",
    "last-of-type": "&:last-of-type",
    "only-of-type": "&:only-of-type",
    visited: "&:visited",
    target: "&:target",
    open: `&${openSelector}`,
    // overridden, default is `&[open]`
    default: "&:default",
    checked: `&${checkedSelector}`,
    // overridden, default is `&:checked`
    indeterminate: `&${indeterminateSelector}`,
    // overridden, default is `&:indeterminate`
    unchecked: `&${uncheckedSelector}`,
    // custom, different from `not-checked` which can still be indeterminate
    "placeholder-shown": "&:placeholder-shown",
    autofill: "&:autofill",
    optional: "&:optional",
    required: "&:required",
    valid: "&:valid",
    invalid: "&:invalid",
    "user-valid": "&:user-valid",
    // custom, copied from Tailwind 4
    "user-invalid": "&:user-invalid",
    // custom, copied from Tailwind 4
    "in-range": "&:in-range",
    "out-of-range": "&:out-of-range",
    "read-only": `&${readOnlySelector}`,
    // overridden, default is `&:read-only`
    empty: "&:empty",
    blank: `&${blankSelector}`,
    // custom
    idle: `&${idleSelector}`,
    // custom
    "hocus-within": `&:is(${hoverSelector}, ${focusWithinSelector})`,
    // custom
    "hocus-visible-within": `&:is(${hoverSelector}, ${focusVisibleWithinSelector})`,
    // custom
    hocus: `&:is(${hoverSelector}, ${focusSelector})`,
    // custom
    "hocus-visible": `&:is(${hoverSelector}, ${focusVisibleSelector})`,
    // custom
    "focus-within": `&${focusWithinSelector}`,
    // overridden, default is `&:focus-within`
    "focus-visible-within": `&${focusVisibleWithinSelector}`,
    // custom
    hover: `&${hoverSelector}`,
    // overridden, default is `&:hover`
    focus: `&${focusSelector}`,
    // overridden, default is `&:focus`
    "focus-visible": `&${focusVisibleSelector}`,
    // overridden, default is `&:focus-visible`
    active: `&${activeSelector}`,
    // overridden, default is `&:active`
    enabled: `&${enabledSelector}`,
    // overridden, default is `&:enabled`
    disabled: `&${disabledSelector}`,
    // overridden, default is `&:disabled`
    inert: "&[inert]",
    // custom, copied from Tailwind 4
    "icon-only": "&:only-child:where(:is(.gds-icon, .gds-Icon):not(.gds-icon *))"
    // custom, `gds-Icon` is for legacy interoperability
  };
  const customPseudoVariants = [
    "unchecked",
    "user-valid",
    "user-invalid",
    "blank",
    "idle",
    "hocus-within",
    "hocus-visible-within",
    "hocus",
    "hocus-visible",
    "focus-visible-within",
    "inert",
    "icon-only"
  ];
  let previousVariant = null;
  for (const [variant, selector] of objectEntries(pseudoVariants).reverse()) {
    if (variant.startsWith("clickable")) continue;
    if (customPseudoVariants.includes(variant)) {
      undocumentedAddVariant(variant, selector, previousVariant ? { before: previousVariant } : void 0);
    } else {
      undocumentedAddVariant(variant, selector, { before: variant });
    }
    previousVariant = variant;
  }
  addVariant("**", ":is(& *)");
  addVariant("starting", "@starting-style");
  addVariant("can-hover", "@media (hover: hover)");
  addVariant("cannot-hover", "@media (hover: none)");
  addVariant("safari", "@supports (-webkit-hyphens: none)");
  addVariant("not-safari", "@supports not (-webkit-hyphens: none)");
  addVariant("firefox", "@supports (-moz-orient: inline)");
  addVariant("not-firefox", "@supports not (-moz-orient: inline)");
  const normalizeSelector = (selector) => {
    let normalizedSelector = dataTypes.normalize(selector);
    if (normalizedSelector.startsWith("&")) {
      normalizedSelector = normalizedSelector.slice(1);
    }
    return normalizedSelector.trim();
  };
  const normalizeAttributeSelector = (attributeSelector) => {
    return dataTypes.normalizeAttributeSelectors(dataTypes.normalize(attributeSelector));
  };
  const is = (selector) => {
    const normalizedSelector = normalizeSelector(selector);
    if (/^[+~>]/.test(normalizedSelector)) {
      return normalizedSelector;
    }
    return normalizedSelector ? `:is(${normalizedSelector})` : "";
  };
  const isNot = (selector) => {
    const normalizedSelector = normalizeSelector(selector);
    return normalizedSelector ? `:not(${normalizedSelector})` : "";
  };
  const isClickable = (selector) => {
    const normalizedSelector = normalizeSelector(selector);
    if (normalizedSelector === enabledSelector || normalizedSelector === disabledSelector) {
      return getClickableSelector(normalizedSelector);
    } else {
      return getClickableSelector(`${enabledSelector}${is(normalizedSelector)}`);
    }
  };
  const isClickableNot = (selector) => {
    const normalizedSelector = normalizeSelector(selector);
    if (normalizedSelector === enabledSelector) {
      return getClickableSelector(disabledSelector);
    } else if (normalizedSelector === disabledSelector) {
      return getClickableSelector(enabledSelector);
    } else {
      return getClickableSelector(`${enabledSelector}${isNot(normalizedSelector)}`);
    }
  };
  const isState = (state) => {
    switch (state) {
      case "not-open":
        return isNot(pseudoVariants["open"]);
      case "not-blank":
        return isNot(pseudoVariants["blank"]);
      case "not-focus":
        return isNot(pseudoVariants["focus"]);
      default:
        return is(pseudoVariants[state]);
    }
  };
  const groupSelector = (modifier) => modifier ? `.${escape(`group/${modifier}`)}` : ".group";
  const peerSelector = (modifier) => modifier ? `.${escape(`peer/${modifier}`)}` : ".peer";
  const nestedSelector = (modifier) => modifier ? `.${escape(`nested/${modifier}`)}` : "";
  const noValueExceptDefault = { values: { DEFAULT: "" } };
  const valuesFromPseudoVariants = { values: pseudoVariants };
  const valuesFromPseudoVariantsWithDefault = { values: { DEFAULT: "", ...pseudoVariants } };
  matchVariant("is", (selector) => `&${is(selector)}`);
  matchVariant("data", (attributeSelector) => `&[data-${normalizeAttributeSelector(attributeSelector)}]`);
  matchVariant("clickable", (selector) => `&${isClickable(selector)}`, valuesFromPseudoVariantsWithDefault);
  matchVariant("clickable-not", (selector) => `&${isClickableNot(selector)}`, valuesFromPseudoVariants);
  matchVariant("not", (selector) => `&${isNot(selector)}`, valuesFromPseudoVariants);
  matchVariant("not-data", (attributeSelector) => `&:not([data-${normalizeAttributeSelector(attributeSelector)}])`);
  matchVariant("not-clickable", (selector) => `&:not(${isClickable(selector)})`, valuesFromPseudoVariantsWithDefault);
  matchVariant("in", (selector) => `&:is(${is(selector)} *)`, valuesFromPseudoVariants);
  matchVariant("in-data", (attributeSelector) => `&:is([data-${normalizeAttributeSelector(attributeSelector)}] *)`);
  matchVariant("in-clickable", (selector) => `&:is(${isClickable(selector)} *)`, valuesFromPseudoVariantsWithDefault);
  matchVariant("in-clickable-not", (selector) => `&:is(${isClickableNot(selector)} *)`, valuesFromPseudoVariants);
  componentNames.forEach((componentName) => {
    matchVariant(
      `in-${componentName}`,
      (selector) => `&:is(.gds-${componentName}${is(selector)} *)`,
      noValueExceptDefault
    );
    cssStates.forEach((state) => {
      matchVariant(
        `in-${componentName}-${state}`,
        (selector) => `&:is(.gds-${componentName}${isState(state)}${is(selector)} *)`,
        noValueExceptDefault
      );
    });
  });
  matchVariant("not-in", (selector) => `&:not(${is(selector)} *)`, valuesFromPseudoVariants);
  matchVariant("not-in-data", (attributeSelector) => `&:not([data-${normalizeAttributeSelector(attributeSelector)}] *)`);
  matchVariant(
    "not-in-clickable",
    (selector) => `&:not(${isClickable(selector)} *)`,
    valuesFromPseudoVariantsWithDefault
  );
  componentNames.forEach((componentName) => {
    matchVariant(
      `not-in-${componentName}`,
      (selector) => `&:not(.gds-${componentName}${is(selector)} *)`,
      noValueExceptDefault
    );
    cssStates.forEach((state) => {
      matchVariant(
        `not-in-${componentName}-${state}`,
        (selector) => `&:not(.gds-${componentName}${isState(state)}${is(selector)} *)`,
        noValueExceptDefault
      );
    });
  });
  matchVariant("has", (selector) => `&:has(${is(selector)})`, valuesFromPseudoVariants);
  matchVariant("has-data", (attributeSelector) => `&:has([data-${normalizeAttributeSelector(attributeSelector)}])`);
  matchVariant("has-clickable", (selector) => `&:has(${isClickable(selector)})`, valuesFromPseudoVariantsWithDefault);
  matchVariant("has-clickable-not", (selector) => `&:has(${isClickableNot(selector)})`, valuesFromPseudoVariants);
  componentNames.forEach((componentName) => {
    matchVariant(
      `has-${componentName}`,
      (selector) => `&:has(.gds-${componentName}${is(selector)})`,
      noValueExceptDefault
    );
    cssStates.forEach((state) => {
      matchVariant(
        `has-${componentName}-${state}`,
        (selector) => `&:has(.gds-${componentName}${isState(state)}${is(selector)})`,
        noValueExceptDefault
      );
    });
  });
  matchVariant(
    "has-nested",
    (selector, { modifier }) => !selector && !modifier ? null : `&:has(${nestedSelector(modifier)}${is(selector)})`,
    valuesFromPseudoVariantsWithDefault
  );
  matchVariant(
    "has-nested-data",
    (attributeSelector, { modifier }) => `&:has(${nestedSelector(modifier)}[data-${normalizeAttributeSelector(attributeSelector)}])`
  );
  matchVariant(
    "has-nested-clickable",
    (selector, { modifier }) => `&:has(${nestedSelector(modifier)}${isClickable(selector)})`,
    valuesFromPseudoVariantsWithDefault
  );
  matchVariant(
    "has-nested-not",
    (selector, { modifier }) => `&:has(${nestedSelector(modifier)}${isNot(selector)})`,
    valuesFromPseudoVariants
  );
  matchVariant("not-has", (selector) => `&:not(:has(${is(selector)}))`, valuesFromPseudoVariants);
  matchVariant(
    "not-has-data",
    (attributeSelector) => `&:not(:has([data-${normalizeAttributeSelector(attributeSelector)}])`
  );
  matchVariant(
    "not-has-clickable",
    (selector) => `&:not(:has(${isClickable(selector)}))`,
    valuesFromPseudoVariantsWithDefault
  );
  componentNames.forEach((componentName) => {
    matchVariant(
      `not-has-${componentName}`,
      (selector) => `&:not(:has(.gds-${componentName}${is(selector)}))`,
      noValueExceptDefault
    );
    cssStates.forEach((state) => {
      matchVariant(
        `not-has-${componentName}-${state}`,
        (selector) => `&:not(:has(.gds-${componentName}${isState(state)}${is(selector)}))`,
        noValueExceptDefault
      );
    });
  });
  matchVariant(
    "not-has-nested",
    (selector, { modifier }) => !selector && !modifier ? null : `&:not(:has(${nestedSelector(modifier)}${is(selector)}))`,
    valuesFromPseudoVariantsWithDefault
  );
  matchVariant(
    "not-has-nested-data",
    (attributeSelector, { modifier }) => `&:not(:has(${nestedSelector(modifier)}[data-${normalizeAttributeSelector(attributeSelector)}]))`
  );
  matchVariant(
    "not-has-nested-clickable",
    (selector, { modifier }) => `&:not(:has(${nestedSelector(modifier)}${isClickable(selector)}))`,
    valuesFromPseudoVariantsWithDefault
  );
  matchVariant(
    "group",
    (selector, { modifier }) => `&:is(${groupSelector(modifier)}${is(selector)} *)`,
    valuesFromPseudoVariants
  );
  matchVariant(
    "group-data",
    (attributeSelector, { modifier }) => `&:is(${groupSelector(modifier)}[data-${normalizeAttributeSelector(attributeSelector)}] *)`
  );
  matchVariant(
    "group-clickable",
    (selector, { modifier }) => `&:is(${groupSelector(modifier)}${isClickable(selector)} *)`,
    valuesFromPseudoVariantsWithDefault
  );
  matchVariant(
    "group-not",
    (selector, { modifier }) => `&:is(${groupSelector(modifier)}${isNot(selector)} *)`,
    valuesFromPseudoVariants
  );
  matchVariant(
    "group-not-data",
    (attributeSelector, { modifier }) => `&:is(${groupSelector(modifier)}:not([data-${normalizeAttributeSelector(attributeSelector)}]) *)`
  );
  matchVariant(
    "group-not-clickable",
    (selector, { modifier }) => `&:is(${groupSelector(modifier)}:not(${isClickable(selector)}) *)`,
    valuesFromPseudoVariantsWithDefault
  );
  matchVariant(
    "in-group",
    (selector, { modifier }) => selector ? null : `&:is(${groupSelector(modifier)} *)`,
    noValueExceptDefault
  );
  matchVariant(
    "not-in-group",
    (selector, { modifier }) => `&:not(${groupSelector(modifier)}${is(selector)} *)`,
    valuesFromPseudoVariantsWithDefault
  );
  matchVariant(
    "not-in-group-data",
    (attributeSelector, { modifier }) => `&:not(${groupSelector(modifier)}[data-${normalizeAttributeSelector(attributeSelector)}] *)`
  );
  matchVariant(
    "group-has",
    (selector, { modifier }) => `&:is(${groupSelector(modifier)}:has(${is(selector)}) *)`,
    valuesFromPseudoVariants
  );
  matchVariant(
    "group-has-data",
    (attributeSelector, { modifier }) => `&:is(${groupSelector(modifier)}:has([data-${normalizeAttributeSelector(attributeSelector)}]) *)`
  );
  matchVariant(
    "group-has-clickable",
    (selector, { modifier }) => `&:is(${groupSelector(modifier)}:has(${isClickable(selector)}) *)`,
    valuesFromPseudoVariantsWithDefault
  );
  componentNames.forEach((componentName) => {
    matchVariant(
      `group-has-${componentName}`,
      (selector, { modifier }) => `&:is(${groupSelector(modifier)}:has(.gds-${componentName}${is(selector)}) *)`,
      noValueExceptDefault
    );
    cssStates.forEach((state) => {
      matchVariant(
        `group-has-${componentName}-${state}`,
        (selector, { modifier }) => `&:is(${groupSelector(modifier)}:has(.gds-${componentName}${isState(state)}${is(selector)}) *)`,
        noValueExceptDefault
      );
    });
  });
  matchVariant(
    "group-has-nested",
    (selector, { modifier }) => !selector && !modifier ? null : `&:is(${groupSelector(modifier)}:has(${nestedSelector(modifier)}${is(selector)}) *)`,
    valuesFromPseudoVariantsWithDefault
  );
  matchVariant(
    "group-has-nested-data",
    (attributeSelector, { modifier }) => `&:is(${groupSelector(modifier)}:has(${nestedSelector(modifier)}[data-${normalizeAttributeSelector(attributeSelector)}]) *)`
  );
  matchVariant(
    "group-has-nested-clickable",
    (selector, { modifier }) => `&:is(${groupSelector(modifier)}:has(${nestedSelector(modifier)}${isClickable(selector)}) *)`,
    valuesFromPseudoVariantsWithDefault
  );
  matchVariant(
    "group-has-nested-not",
    (selector, { modifier }) => `&:is(${groupSelector(modifier)}:has(${nestedSelector(modifier)}${isNot(selector)}) *)`,
    valuesFromPseudoVariants
  );
  matchVariant(
    "group-not-has",
    (selector, { modifier }) => `&:is(${groupSelector(modifier)}:not(:has(${is(selector)})) *)`,
    valuesFromPseudoVariants
  );
  matchVariant(
    "group-not-has-data",
    (attributeSelector, { modifier }) => `&:is(${groupSelector(modifier)}:not(:has([data-${normalizeAttributeSelector(attributeSelector)}])) *)`
  );
  matchVariant(
    "group-not-has-clickable",
    (selector, { modifier }) => `&:is(${groupSelector(modifier)}:not(:has(${isClickable(selector)})) *)`,
    valuesFromPseudoVariantsWithDefault
  );
  componentNames.forEach((componentName) => {
    matchVariant(
      `group-not-has-${componentName}`,
      (selector, { modifier }) => `&:is(${groupSelector(modifier)}:not(:has(.gds-${componentName}${is(selector)})) *)`,
      noValueExceptDefault
    );
    cssStates.forEach((state) => {
      matchVariant(
        `group-not-has-${componentName}-${state}`,
        (selector, { modifier }) => `&:is(${groupSelector(modifier)}:not(:has(.gds-${componentName}${isState(state)}${is(selector)})) *)`,
        noValueExceptDefault
      );
    });
  });
  matchVariant(
    "nearest-group",
    (selector, { modifier }) => `@scope (${groupSelector(modifier)}) to (${groupSelector(modifier)}) { &:is(:scope${is(selector)} *) }`,
    valuesFromPseudoVariants
  );
  matchVariant(
    "nearest-group-not",
    (selector, { modifier }) => `@scope (${groupSelector(modifier)}) to (${groupSelector(modifier)}) { &:is(:scope${isNot(selector)} *) }`,
    valuesFromPseudoVariants
  );
  matchVariant(
    "peer",
    (selector, { modifier }) => `&:is(${peerSelector(modifier)}${is(selector)} ~ *)`,
    valuesFromPseudoVariantsWithDefault
  );
  matchVariant(
    "peer-not",
    (selector, { modifier }) => `&:is(${peerSelector(modifier)}${isNot(selector)} ~ *)`,
    valuesFromPseudoVariants
  );
  matchVariant(
    "not-peer",
    (selector, { modifier }) => `&:not(${peerSelector(modifier)}${is(selector)} ~ *)`,
    valuesFromPseudoVariantsWithDefault
  );
  matchVariant(
    "nested",
    (selector, { modifier }) => selector || !modifier ? null : `& :merge(${nestedSelector(modifier)})`,
    noValueExceptDefault
  );
  componentNames.forEach((componentName) => {
    addVariant(`nested-${componentName}`, `& :merge(.gds-${componentName})`);
  });
  matchVariant(
    "@style",
    (condition, { modifier }) => `@container ${modifier ?? ""} style(${condition.replace("=", ":")})`
  );
  const isCSSState = (state) => cssStates.includes(state);
  const getCSSStateVariable = (state) => {
    if (isCSSState(state)) {
      for (const [variableName, { values }] of objectEntries(cssStateVariables)) {
        if (state in values) {
          return {
            name: variableName,
            value: String(values[state])
          };
        }
      }
    }
    const [stateName, stateValue] = state.split("=");
    return { name: stateName, value: stateValue ?? "" };
  };
  objectEntries(cssStateVariables).forEach(([variableName, { values, defaultValue }]) => {
    addBase({
      [`@property --gds-state-${variableName}`]: {
        syntax: `"${[.../* @__PURE__ */ new Set([...Object.values(values), defaultValue])].map((value) => String(value)).join(" | ")}"`,
        inherits: "false",
        "initial-value": String(defaultValue)
      }
    });
  });
  const valuesStates = { values: Object.fromEntries(cssStates.map((state) => [state, state])) };
  matchUtilities(
    {
      state: (state) => {
        const stateVariable = getCSSStateVariable(state);
        return {
          [`--gds-state-${stateVariable.name}`]: stateVariable.value
        };
      }
    },
    valuesStates
  );
  for (const variant of ["@state", "@state-not"]) {
    undocumentedMatchVariant(
      variant,
      (state, { modifier, container: postCssContainer }) => {
        const selectors = [];
        const postCssContainerString = String(postCssContainer);
        const isNewSelector = !postCssContainerString.includes("__not_new");
        const isExistingStyleQuerySelector = !isNewSelector && postCssContainerString.startsWith("@container");
        const isExistingFallbackSelector = !isNewSelector && !isExistingStyleQuerySelector;
        const containerName = modifier ?? "";
        const stateVariables = [getCSSStateVariable(state)];
        if (state === "hover") {
          stateVariables.push(getCSSStateVariable("active"));
        }
        if (isNewSelector || isExistingStyleQuerySelector) {
          selectors.push(
            `@container ${containerName} ${variant === "@state-not" ? "not" : ""} (${stateVariables.map(
              (stateVariable) => `style(--gds-state-${stateVariable.name}${stateVariable.value ? `: ${stateVariable.value}` : ""})`
            ).join(" or ")}) { & }`
          );
        }
        if (containerName) {
          const fallbackSelector = `&:where(.gds-${containerName}${variant === "@state-not" ? ":not" : ":is"}(${stateVariables.map(
            (stateVariable) => `[data-gds-state-${stateVariable.name}${stateVariable.value ? `=${escape(stateVariable.value)}` : ""}]`
          ).join(", ")}) *)`;
          if (isNewSelector) {
            postCssContainer.append({ text: "__not_new" });
            selectors.push(`@supports not (view-transition-name: none) { ${fallbackSelector} }`);
          } else if (isExistingFallbackSelector) {
            selectors.push(fallbackSelector);
          }
        }
        if (selectors.length === 1) return selectors[0];
        return selectors;
      },
      valuesStates
    );
  }
  const componentsCSSPropsByPropName = objectEntries(componentsCSSProps).reduce((result, [componentName, props]) => {
    objectEntries(props).forEach(([propName, prop]) => {
      if (!result[propName]) {
        result[propName] = {};
      }
      result[propName][componentName] = prop;
    });
    return result;
  }, {});
  const propNames = Object.keys(componentsCSSPropsByPropName);
  propNames.forEach((propName) => {
    const kebabCasePropName = camelToKebab(propName);
    addBase({
      [`@property --gds-default-${kebabCasePropName}`]: {
        syntax: `"*"`,
        inherits: "false"
      },
      [`@property --gds-passed-${kebabCasePropName}`]: {
        syntax: `"*"`,
        inherits: "false"
      },
      [`@property --gds-prop-${kebabCasePropName}`]: {
        syntax: `"*"`,
        inherits: "false"
      }
    });
  });
  objectEntries(componentsCSSProps).forEach(([componentName, props]) => {
    if (componentName === "dummy") return;
    objectEntries(props).forEach(([propName, prop]) => {
      const kebabCasePropName = camelToKebab(propName);
      addBase({
        [`@property --gds-${componentName}-${kebabCasePropName}`]: {
          syntax: (() => {
            switch (prop.type) {
              case "values":
                return `"${prop.values.map((value) => getCSSPropRawValue(prop, value)).join(" | ")}"`;
              case "number":
                return `"<number>"`;
              case "length":
                return `"<length-percentage>"`;
              case "color":
                return `"<color>"`;
            }
          })(),
          /**
           * We want this to inherit to access the value on nested elements, especially for non-`values` props (since `values` props are not
           * usually accessed on nested elements other than through style queries, which doesn't require the property to inherit). There are
           * two downsides to this, which seem acceptable:
           * 1. Performance is slightly worse, but non-registered custom properties always inherit and people don't hesitate to use them.
           * 2. An invalid value will fall back to the parent's value instead of the initial value. However, this is an edge case because an
           *    invalid value is a mistake in the first place, not to mention that the exact same custom property won't be set on the parent
           *    most of the time anyway (there would have to be an ancestor that is the same component, which rarely makes sense).
           */
          inherits: "true",
          "initial-value": (() => {
            if (prop.type === "length" && typeof prop.defaultValue === "string" && /(cap|ch|em|ex|ic|lh)$/.test(prop.defaultValue)) {
              return "100%";
            }
            return getCSSPropRawValue(prop, prop.defaultValue);
          })()
        }
      });
    });
    addComponents({
      [`.gds-${componentName}`]: {
        "container-name": componentsCSSPropsContainerName[componentName] ?? componentName,
        ...objectEntries(props).reduce((rules, [propName, prop]) => {
          const kebabCasePropName = camelToKebab(propName);
          return {
            ...rules,
            [`--gds-passed-or-default-${kebabCasePropName}`]: `var(--gds-passed-${kebabCasePropName}, var(--gds-default-${kebabCasePropName}, ${getCSSPropRawValue(prop, prop.defaultValue)}))`,
            [`--gds-${componentName}-${kebabCasePropName}`]: `var(--gds-prop-${kebabCasePropName}, var(--gds-passed-or-default-${kebabCasePropName}))`
          };
        }, {})
      }
    });
  });
  objectEntries(componentsCSSPropsByPropName).forEach(([propName, components]) => {
    const kebabCasePropName = camelToKebab(propName);
    const propTypes = Object.values(components).map((componentProps) => componentProps.type);
    const propValues = Object.values(components).flatMap((componentProps) => componentProps.values ?? []).map(String);
    const matchUtilitiesType = ["any"];
    if (propTypes.includes("number")) {
      matchUtilitiesType.unshift("number");
    }
    if (propTypes.includes("length")) {
      matchUtilitiesType.unshift("length");
    }
    if (propTypes.includes("color")) {
      matchUtilitiesType.unshift("color");
    }
    const matchUtilitiesValues = {
      inherit: "inherit"
    };
    if (propTypes.includes("values")) {
      propValues.forEach((value) => {
        matchUtilitiesValues[value] = `gds-${value}`;
      });
    }
    if (propTypes.includes("length")) {
      Object.entries(themeValues.spacing).forEach(([key, value]) => {
        matchUtilitiesValues[key] = value;
      });
    }
    if (propTypes.includes("color")) {
      Object.entries(themeValues.colors).forEach(([key, value]) => {
        matchUtilitiesValues[key] = value;
      });
    }
    matchUtilities(
      Object.fromEntries(
        ["prop", "default"].map((utilityType) => [
          `${utilityType}-${kebabCasePropName}`,
          (value) => ({
            [`--gds-${utilityType}-${kebabCasePropName}`]: value
          })
        ])
      ),
      {
        type: matchUtilitiesType,
        values: matchUtilitiesValues
      }
    );
  });
  undocumentedMatchVariant(
    "@prop",
    (kebabCasePropNameAndValue, { modifier: componentName, container: postCssContainer }) => {
      if (!Array.isArray(kebabCasePropNameAndValue) || !isComponentName(componentName)) return [];
      const [kebabCasePropName, value] = kebabCasePropNameAndValue;
      const selectors = [];
      const postCssContainerString = String(postCssContainer);
      const isNewSelector = !postCssContainerString.includes("__not_new");
      const isExistingStyleQuerySelector = !isNewSelector && postCssContainerString.startsWith("@container");
      const isExistingFallbackSelector = !isNewSelector && !isExistingStyleQuerySelector;
      if (isNewSelector || isExistingStyleQuerySelector) {
        selectors.push(
          `@container ${componentsCSSPropsContainerName[componentName] ?? componentName} style(--gds-${componentName}-${kebabCasePropName}: gds-${value}) { & }`
        );
      }
      const fallbackSelector = `&:where(.gds-${componentName}[data-gds-prop-polyfill-${kebabCasePropName}=${escape(String(value))}] *)`;
      if (isNewSelector) {
        postCssContainer.append({ text: "__not_new" });
        selectors.push(`@supports not (view-transition-name: none) { ${fallbackSelector} }`);
      } else if (isExistingFallbackSelector) {
        selectors.push(fallbackSelector);
      }
      if (selectors.length === 1) return selectors[0];
      return selectors;
    },
    {
      values: Object.fromEntries(
        objectEntries(componentsCSSPropsByPropName).flatMap(([propName, components]) => {
          const kebabCasePropName = camelToKebab(propName);
          const propValues = Object.values(components).flatMap((componentProps) => componentProps.values ?? []);
          if (propValues.length === 0) return [];
          return propValues.map((value) => [`${kebabCasePropName}-${value}`, [kebabCasePropName, value]]);
        })
      )
    }
  );
  matchUtilities(
    {
      ...Object.fromEntries(
        ["if-prop", "children-if-prop"].map((utilityType) => [
          utilityType,
          (value, { modifier: componentName }) => {
            if (!isComponentName(componentName)) return null;
            const declarations = `${value},a=a()`.split(/(?:\),)?[a-zA-Z0-9-]+=[a-zA-Z0-9-]+\(/g);
            declarations.shift();
            const conditions = (value.match(/[a-zA-Z0-9-]+=[a-zA-Z0-9-]+/g) ?? []).flatMap((condition) => {
              const [ifProp, ifValue] = condition.split("=");
              const declaration = declarations.shift();
              if (!ifProp || !ifValue || !declaration) return [];
              const [thenProperty, thenValue] = declaration.split(":");
              if (!thenProperty || !thenValue) return [];
              return [{ ifProp, ifValue, thenProperty, thenValue }];
            });
            if (conditions.length === 0) return null;
            if (conditions.some((condition) => condition.thenProperty !== conditions[0].thenProperty)) return null;
            return Object.fromEntries(
              conditions.map((condition) => {
                return [
                  /**
                   * The `:where()` is to ensure that the unimportant variants work as expected with these utilities, because any selector part
                   * added by a utility seems to be generated at the end of the final selector (after variants are applied), affecting specificity
                   * in ways that variants can't control.
                   */
                  `&:where(.gds-${componentName}[data-gds-prop-polyfill-${condition.ifProp}=${escape(condition.ifValue)}])${utilityType === "children-if-prop" ? " > *" : ""}`,
                  {
                    [condition.thenProperty]: condition.thenValue
                  }
                ];
              })
            );
          }
        ])
      )
    },
    {
      modifiers: "any"
    }
  );
  for (let i = 1; i <= 5; i++) {
    addVariant("+".repeat(i), `&:is(:is(:scope, ${"#i".repeat(i)}) *)`);
  }
});
export {
  customPlugin
};
