@ohos-ports/dxos-react-ui-theme 0.6.7-beta.1

package/dist/lib/browser/index.mjs

@@ -0,0 +1,2300 @@
+// packages/ui/react-ui-theme/src/config/colors.ts
+import { curvePathFromPalette, paletteShadesFromCurve, hex_to_LCH as hexToLch, Lab_to_hex as labToHex } from "@ch-ui/colors";
+var shadeNumbers = (
+  /* [...Array(19)].map((_, i) => 50 + i * 50); */
+  [
+    50,
+    100,
+    150,
+    200,
+    250,
+    300,
+    350,
+    400,
+    450,
+    500,
+    550,
+    600,
+    650,
+    700,
+    750,
+    800,
+    850,
+    900,
+    950
+  ]
+);
+var broadShadeNumbers = [
+  12,
+  25,
+  37,
+  50,
+  75,
+  100,
+  125,
+  150,
+  200,
+  250,
+  300,
+  350,
+  400,
+  450,
+  500,
+  550,
+  600,
+  650,
+  700,
+  750,
+  800,
+  825,
+  850,
+  875,
+  900,
+  925,
+  950,
+  975
+];
+var dtor = Math.PI / 180;
+var paletteConfigs = {
+  red: {
+    keyColor: "#ee003b",
+    darkCp: 1,
+    lightCp: 0.13,
+    hueTorsion: 5.5 * dtor
+  },
+  orange: {
+    keyColor: "#fa6b32",
+    darkCp: 0.725,
+    lightCp: 1,
+    hueTorsion: 13 * dtor
+  },
+  amber: {
+    keyColor: "#f08c00",
+    darkCp: 1,
+    lightCp: 1,
+    hueTorsion: 24 * dtor
+  },
+  yellow: {
+    keyColor: "#ffd900",
+    darkCp: 1,
+    lightCp: 1,
+    hueTorsion: 32 * dtor
+  },
+  lime: {
+    keyColor: "#99c400",
+    darkCp: 1,
+    lightCp: 1,
+    hueTorsion: -3.5 * dtor
+  },
+  green: {
+    keyColor: "#30a908",
+    darkCp: 0.35,
+    lightCp: 0.665,
+    hueTorsion: -10.5 * dtor
+  },
+  emerald: {
+    keyColor: "#15e066",
+    darkCp: 1,
+    lightCp: 0.735,
+    hueTorsion: -7 * dtor
+  },
+  teal: {
+    keyColor: "#00a270",
+    darkCp: 1,
+    lightCp: 0.755,
+    hueTorsion: -12 * dtor
+  },
+  cyan: {
+    keyColor: "#048992",
+    darkCp: 1,
+    lightCp: 0.855,
+    hueTorsion: -15 * dtor
+  },
+  sky: {
+    keyColor: "#007bc2",
+    darkCp: 1,
+    lightCp: 0.64,
+    hueTorsion: 0
+  },
+  blue: {
+    keyColor: "#0058cb",
+    darkCp: 1,
+    lightCp: 0.495,
+    hueTorsion: -7 * dtor
+  },
+  indigo: {
+    keyColor: "#1b45c5",
+    darkCp: 0.495,
+    lightCp: 0.55,
+    hueTorsion: 0
+  },
+  violet: {
+    keyColor: "#080886",
+    darkCp: 0.195,
+    lightCp: 0.635,
+    hueTorsion: -5 * dtor
+  },
+  purple: {
+    keyColor: "#2c0073",
+    darkCp: 0,
+    lightCp: 0.63,
+    hueTorsion: 0
+  },
+  fuchsia: {
+    keyColor: "#6d0085",
+    darkCp: 1,
+    lightCp: 0.695,
+    hueTorsion: 0
+  },
+  pink: {
+    keyColor: "#a5006d",
+    darkCp: 1,
+    lightCp: 0.775,
+    hueTorsion: 0
+  },
+  rose: {
+    keyColor: "#d00054",
+    darkCp: 1,
+    lightCp: 1,
+    hueTorsion: 0
+  },
+  neutral: {
+    keyColor: "#707076",
+    darkCp: 0.8,
+    lightCp: 0.88,
+    hueTorsion: 0
+  },
+  primary: {
+    keyColor: "#1662d9",
+    darkCp: 0.86,
+    lightCp: 1,
+    hueTorsion: -30 * dtor
+  }
+};
+var physicalColors = Object.keys(paletteConfigs).reduce((acc, palette) => {
+  const isBroad = palette === "neutral" || palette === "primary";
+  const paletteConfig = paletteConfigs[palette];
+  const curve = curvePathFromPalette({
+    ...paletteConfig,
+    keyColor: hexToLch(paletteConfig.keyColor)
+  });
+  const defaultShades = paletteShadesFromCurve(curve, 21, [
+    0,
+    100 * (22 / 21)
+  ], 1, 24).reverse();
+  const renderCssValue = (shadeNumber) => {
+    if (shadeNumber > 999) {
+      return "#000000";
+    } else if (shadeNumber < 1) {
+      return "#ffffff";
+    } else if (shadeNumber % 50 === 0) {
+      return labToHex(defaultShades[shadeNumber / 50]);
+    } else {
+      const k2 = shadeNumber % 50 / 50;
+      const k1 = 1 - k2;
+      const [l1, a1, b1] = defaultShades[Math.floor(shadeNumber / 50)];
+      const [l2, a2, b2] = defaultShades[Math.ceil(shadeNumber / 50)];
+      return labToHex([
+        l1 * k1 + l2 * k2,
+        a1 * k1 + a2 * k2,
+        b1 * k1 + b2 * k2
+      ]);
+    }
+  };
+  acc[palette] = (isBroad ? broadShadeNumbers : shadeNumbers).reduce((acc2, shadeNumber) => {
+    acc2[shadeNumber] = renderCssValue(shadeNumber);
+    return acc2;
+  }, {});
+  return acc;
+}, {});
+var semanticColors = {
+  scrim: {
+    light: `${physicalColors.neutral["75"]}A6`,
+    dark: `${physicalColors.neutral["900"]}A6`
+  },
+  attention: {
+    light: "#ffffff",
+    dark: physicalColors.neutral["900"]
+  },
+  deck: {
+    light: physicalColors.neutral["75"],
+    dark: physicalColors.neutral["875"]
+  },
+  base: {
+    light: physicalColors.neutral["25"],
+    dark: physicalColors.neutral["850"],
+    fg: {
+      light: "#000000",
+      dark: "#ffffff"
+    }
+  },
+  fgHover: {
+    light: physicalColors.neutral["900"],
+    dark: physicalColors.neutral["100"]
+  },
+  description: {
+    light: physicalColors.neutral["500"],
+    dark: physicalColors.neutral["400"]
+  },
+  subdued: {
+    light: physicalColors.neutral["700"],
+    dark: physicalColors.neutral["300"]
+  },
+  error: {
+    light: physicalColors.red["700"],
+    dark: physicalColors.red["300"]
+  },
+  baseGlass: {
+    light: `${physicalColors.neutral["12"]}e0`,
+    dark: `${physicalColors.neutral["850"]}e0`
+  },
+  input: {
+    light: physicalColors.neutral["50"],
+    dark: physicalColors.neutral["825"]
+  },
+  modal: {
+    light: "#ffffff",
+    dark: `${physicalColors.neutral["750"]}`
+  },
+  modalSelected: {
+    light: physicalColors.neutral["50"],
+    dark: physicalColors.neutral["825"]
+  },
+  hover: {
+    light: physicalColors.neutral["37"],
+    dark: physicalColors.neutral["800"]
+  },
+  accent: {
+    light: physicalColors.primary["550"],
+    dark: physicalColors.primary["550"],
+    fg: {
+      light: physicalColors.primary["550"],
+      dark: physicalColors.primary["400"]
+    }
+  },
+  accentHover: {
+    light: physicalColors.primary["600"],
+    dark: physicalColors.primary["500"]
+  },
+  accentFocusIndicator: {
+    light: physicalColors.primary["350"],
+    dark: physicalColors.primary["450"]
+  },
+  unAccent: {
+    light: physicalColors.neutral["500"],
+    dark: physicalColors.neutral["400"]
+  },
+  unAccentHover: {
+    light: physicalColors.neutral["400"],
+    dark: physicalColors.neutral["500"]
+  },
+  separator: {
+    light: physicalColors.neutral["50"],
+    dark: physicalColors.neutral["700"]
+  },
+  inverse: {
+    light: "#ffffff",
+    dark: "#ffffff"
+  },
+  transparent: {
+    light: "transparent",
+    dark: "transparent"
+  },
+  unavailable: {
+    light: physicalColors.neutral["100"],
+    dark: physicalColors.neutral["600"]
+  }
+};
+
+// packages/ui/react-ui-theme/src/config/tailwind.ts
+import tailwindcssForms from "@tailwindcss/forms";
+import merge from "lodash.merge";
+import tailwindScrollbar from "tailwind-scrollbar";
+import tailwindColors from "tailwindcss/colors.js";
+import defaultConfig from "tailwindcss/stubs/config.full.js";
+import tailwindcssLogical from "tailwindcss-logical";
+import tailwindcssRadix from "tailwindcss-radix";
+
+// packages/ui/react-ui-theme/src/util/semanticColors.ts
+import plugin from "tailwindcss/plugin.js";
+var semanticColors2 = plugin(({ addUtilities, theme, e }) => {
+  const values = theme("semanticColors");
+  const semanticColorUtilities = Object.entries(values).map(([key, value]) => {
+    return {
+      // TODO(thure): Refactor all of these tokens to simply prefix the properties they apply with `s-` as with `s-accent`.
+      [`.fg-${e(`${key}`)}`]: {
+        color: `${value.fg?.light ?? value.light}`
+      },
+      [`.dark .fg-${e(`${key}`)}`]: {
+        color: `${value.fg?.dark ?? value.dark}`
+      },
+      [`.s-accent-${e(`${key}`)}`]: {
+        accentColor: `${value.fg?.light ?? value.light}`
+      },
+      [`.dark .s-accent-${e(`${key}`)}`]: {
+        accentColor: `${value.fg?.dark ?? value.dark}`
+      },
+      [`.surface-${e(`${key}`)}`]: {
+        backgroundColor: `${value.light}`,
+        "--sticky-bg": `${value.light}`
+      },
+      [`.dark .surface-${e(`${key}`)}`]: {
+        backgroundColor: `${value.dark}`,
+        "--sticky-bg": `${value.dark}`
+      },
+      [`.separator-${e(`${key}`)}`]: {
+        borderColor: `${value.fg?.light ?? value.light}`
+      },
+      [`.dark .separator-${e(`${key}`)}`]: {
+        borderColor: `${value.fg?.dark ?? value.dark}`
+      },
+      [`.s-outline-${e(`${key}`)}`]: {
+        outlineColor: `${value.fg?.light ?? value.light}`
+      },
+      [`.dark .s-outline-${e(`${key}`)}`]: {
+        outlineColor: `${value.fg?.dark ?? value.dark}`
+      }
+    };
+  });
+  addUtilities(semanticColorUtilities);
+});
+
+// packages/ui/react-ui-theme/src/config/tailwind.ts
+var tailwindConfig = ({ env = "production", content = [], extensions = [] }) => ({
+  darkMode: "class",
+  theme: {
+    // Configure fonts in theme.css and package.json.
+    fontFamily: {
+      body: [
+        "Inter Variable",
+        ...defaultConfig.theme.fontFamily.sans
+      ],
+      mono: [
+        "JetBrains Mono Variable",
+        ...defaultConfig.theme.fontFamily.mono
+      ]
+    },
+    extend: merge({
+      screens: {
+        "pointer-fine": {
+          raw: "(pointer: fine)"
+        },
+        "hover-hover": {
+          raw: "(hover: hover)"
+        }
+      },
+      colors: {
+        ...physicalColors,
+        slate: tailwindColors.slate,
+        gray: tailwindColors.gray,
+        zinc: tailwindColors.zinc,
+        stone: tailwindColors.stone,
+        success: physicalColors.emerald,
+        warning: physicalColors.amber,
+        error: physicalColors.rose,
+        info: physicalColors.cyan,
+        transparent: "transparent",
+        current: "currentColor",
+        white: "#ffffff",
+        black: "#000000"
+      },
+      semanticColors,
+      fontSize: {
+        // Base size 16px
+        // Scale 1.125
+        xs: [
+          "0.790rem",
+          {
+            lineHeight: "1rem"
+          }
+        ],
+        sm: [
+          "0.889rem",
+          {
+            lineHeight: "1.25rem"
+          }
+        ],
+        base: [
+          "1rem",
+          {
+            lineHeight: "1.5rem"
+          }
+        ],
+        lg: [
+          "1.125rem",
+          {
+            lineHeight: "1.75rem"
+          }
+        ],
+        xl: [
+          "1.266rem",
+          {
+            lineHeight: "1.75rem"
+          }
+        ],
+        "2xl": [
+          "1.424rem",
+          {
+            lineHeight: "2rem"
+          }
+        ],
+        "3xl": [
+          "1.602rem",
+          {
+            lineHeight: "2.25rem"
+          }
+        ],
+        "4xl": [
+          "1.802rem",
+          {
+            lineHeight: "2.5rem"
+          }
+        ],
+        "5xl": [
+          "2.027rem",
+          {
+            lineHeight: "2.5rem"
+          }
+        ],
+        "6xl": [
+          "2.281rem",
+          {
+            lineHeight: "2.5rem"
+          }
+        ],
+        "7xl": [
+          "2.566rem",
+          {
+            lineHeight: "2.75rem"
+          }
+        ],
+        "8xl": [
+          "2.887rem",
+          {
+            lineHeight: "3rem"
+          }
+        ],
+        "9xl": [
+          "3.247rem",
+          {
+            lineHeight: "3.25rem"
+          }
+        ]
+      },
+      outlineWidth: {
+        3: "3px"
+      },
+      boxShadow: {
+        slider: "0 0 0 5px rgba(0, 0, 0, 0.3)"
+      },
+      transitionProperty: {
+        "max-height": "max-height"
+      },
+      keyframes: {
+        // Popper chrome
+        slideDownAndFade: {
+          from: {
+            opacity: 0,
+            transform: "translateY(-2px)"
+          },
+          to: {
+            opacity: 1,
+            transform: "translateY(0)"
+          }
+        },
+        slideLeftAndFade: {
+          from: {
+            opacity: 0,
+            transform: "translateX(2px)"
+          },
+          to: {
+            opacity: 1,
+            transform: "translateX(0)"
+          }
+        },
+        slideUpAndFade: {
+          from: {
+            opacity: 0,
+            transform: "translateY(2px)"
+          },
+          to: {
+            opacity: 1,
+            transform: "translateY(0)"
+          }
+        },
+        slideRightAndFade: {
+          from: {
+            opacity: 0,
+            transform: "translateX(-2px)"
+          },
+          to: {
+            opacity: 1,
+            transform: "translateX(0)"
+          }
+        },
+        // Toast
+        "toast-hide": {
+          "0%": {
+            opacity: "1"
+          },
+          "100%": {
+            opacity: "0"
+          }
+        },
+        "toast-slide-in-right": {
+          "0%": {
+            transform: "translateX(calc(100% + 1rem))"
+          },
+          "100%": {
+            transform: "translateX(0)"
+          }
+        },
+        "toast-slide-in-bottom": {
+          "0%": {
+            transform: "translateY(calc(100% + 1rem))"
+          },
+          "100%": {
+            transform: "translateY(0)"
+          }
+        },
+        "toast-swipe-out": {
+          "0%": {
+            transform: "translateX(var(--radix-toast-swipe-end-x))"
+          },
+          "100%": {
+            transform: "translateX(calc(100% + 1rem))"
+          }
+        },
+        // Shimmer
+        "shimmer-loop": {
+          "100%": {
+            transform: "translateX(100%)"
+          }
+        },
+        "halo-pulse": {
+          "0%": {
+            opacity: 0.3
+          },
+          "5%": {
+            opacity: 1
+          },
+          "100%": {
+            opacity: 0.3
+          }
+        },
+        "progress-indeterminate": {
+          "0%": {
+            left: 0,
+            width: "0%"
+          },
+          "25%": {
+            left: "25%",
+            width: "50%"
+          },
+          "75%": {
+            left: "50%",
+            width: "100%"
+          },
+          "100%": {
+            left: "100%",
+            width: "0%"
+          }
+        }
+      },
+      animation: {
+        // Popper chrome
+        slideDownAndFade: "slideDownAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)",
+        slideLeftAndFade: "slideLeftAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)",
+        slideUpAndFade: "slideUpAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)",
+        slideRightAndFade: "slideRightAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)",
+        // Toast
+        "toast-hide": "toast-hide 100ms ease-in forwards",
+        "toast-slide-in-right": "toast-slide-in-right 150ms cubic-bezier(0.16, 1, 0.3, 1)",
+        "toast-slide-in-bottom": "toast-slide-in-bottom 150ms cubic-bezier(0.16, 1, 0.3, 1)",
+        "toast-swipe-out": "toast-swipe-out 100ms ease-out forwards",
+        spin: "spin 1.5s linear infinite",
+        "spin-slow": "spin 3s linear infinite",
+        shimmer: "shimmer-loop 2s infinite",
+        "halo-pulse": "halo-pulse 2s ease-out infinite",
+        "progress-indeterminate": "progress-indeterminate 2s ease-out infinite"
+      }
+    }, ...extensions)
+  },
+  plugins: [
+    semanticColors2,
+    tailwindcssLogical,
+    tailwindcssForms,
+    tailwindcssRadix(),
+    // https://adoxography.github.io/tailwind-scrollbar/utilities
+    tailwindScrollbar
+  ],
+  ...env === "development" && {
+    mode: "jit"
+  },
+  content,
+  future: {
+    hoverOnlyWhenSupported: true
+  }
+});
+
+// packages/ui/react-ui-theme/src/styles/fragments/arrow.ts
+var arrow = "fill-[--surface-bg] dark:fill-[--surface-bg]";
+var groupArrow = "fill-[--surface-bg] dark:fill-[--surface-bg]";
+
+// packages/ui/react-ui-theme/src/styles/fragments/density.ts
+var coarseBlockSize = "min-bs-[2.5rem]";
+var coarseTextPadding = "pli-3";
+var coarseButtonPadding = "pli-4";
+var coarseDimensions = `${coarseBlockSize} ${coarseTextPadding}`;
+var coarseButtonDimensions = `${coarseBlockSize} ${coarseButtonPadding}`;
+var fineBlockSize = "min-bs-[2.5rem] pointer-fine:min-bs-[2rem]";
+var fineTextPadding = "pli-2";
+var fineButtonPadding = "pli-2.5";
+var fineDimensions = `${fineBlockSize} ${fineTextPadding}`;
+var fineButtonDimensions = `${fineBlockSize} ${fineButtonPadding}`;
+var densityBlockSize = (density = "coarse") => density === "fine" ? fineBlockSize : coarseBlockSize;
+
+// packages/ui/react-ui-theme/src/styles/fragments/dimensions.ts
+var textBlockWidth = "mli-auto max-is-[60rem]";
+
+// packages/ui/react-ui-theme/src/styles/fragments/disabled.ts
+var staticDisabled = "opacity-40 cursor-not-allowed shadow-none";
+var dataDisabled = "data-[disabled]:opacity-40 data-[disabled]:cursor-not-allowed";
+
+// packages/ui/react-ui-theme/src/styles/fragments/elevation.ts
+var contentElevation = (_) => [
+  "shadow-none"
+];
+var surfaceElevation = ({ elevation }) => [
+  elevation === "group" ? "shadow" : elevation === "chrome" ? "shadow-lg" : "shadow-none"
+];
+
+// packages/ui/react-ui-theme/src/styles/fragments/focus.ts
+var focusRing = "focus:outline-none focus-visible:z-[1] focus-visible:hover:outline-none dark:focus-visible:hover:outline-none focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-primary-350 focus-visible:ring-offset-white dark:focus-visible:ring-primary-450 dark:focus-visible:ring-offset-black";
+var dropRing = "ring-1 ring-offset-0 ring-primary-350 ring-offset-white dark:ring-primary-450 dark:ring-offset-black";
+var dropRingInner = "before:z-10 before:absolute before:inset-0 before:ring-1 before:ring-inset before:ring-primary-350 before:dark:ring-primary-450";
+var subduedFocus = "focus:outline-none focus-visible:outline-none focus:ring-0 ring-0 focus:border-0 border-0";
+var staticFocusRing = "ring-2 ring-offset-0 ring-primary-350 ring-offset-white dark:ring-primary-450 dark:ring-offset-black";
+
+// packages/ui/react-ui-theme/src/styles/fragments/group.ts
+var group = (props) => [
+  props.elevation === "base" ? "bg-transparent border separator-separator" : "surface-modal",
+  surfaceElevation(props)
+];
+
+// packages/ui/react-ui-theme/src/styles/fragments/hover.ts
+var hoverColors = "transition-colors duration-100 linear hover:surface-hover";
+var ghostHover = "hover:surface-hover";
+var subtleHover = "hover:bg-neutral-100/20 dark:hover:bg-neutral-800/20";
+var hoverableControls = "[--controls-opacity:1] hover-hover:[--controls-opacity:0] hover-hover:hover:[--controls-opacity:1]";
+var hoverableFocusedKeyboardControls = "focus-visible:[--controls-opacity:1]";
+var hoverableFocusedWithinControls = "focus-within:[--controls-opacity:1]";
+var hoverableFocusedControls = "focus:[--controls-opacity:1]";
+var staticHoverableControls = "hover-hover:[--controls-opacity:1]";
+var hoverableOpenControlItem = "hover-hover:aria-[expanded=true]:[--controls-opacity:1]";
+var hoverableControlItem = "opacity-[--controls-opacity]";
+
+// packages/ui/react-ui-theme/src/styles/fragments/hue.ts
+var hueTokenValueShades = {
+  cursorLightValue: 400,
+  cursorDarkValue: 300
+};
+var hueTokenThemes = {
+  red: {
+    text: "text-red-550 dark:text-red-300",
+    textHover: "hover:text-red-450 focus-visible:text-red-450 dark:hover:text-red-200 dark:focus-visible:text-red-200",
+    fill: "fill-red-500/60"
+  },
+  orange: {
+    text: "text-orange-550 dark:text-orange-300",
+    textHover: "hover:text-orange-450 focus-visible:text-orange-450 dark:hover:text-orange-200 dark:focus-visible:text-orange-200",
+    fill: "fill-orange-500/60"
+  },
+  amber: {
+    text: "text-amber-550 dark:text-amber-300",
+    textHover: "hover:text-amber-450 focus-visible:text-amber-450 dark:hover:text-amber-200 dark:focus-visible:text-amber-200",
+    fill: "fill-amber-500/60"
+  },
+  yellow: {
+    text: "text-yellow-550 dark:text-yellow-300",
+    textHover: "hover:text-yellow-450 focus-visible:text-yellow-450 dark:hover:text-yellow-200 dark:focus-visible:text-yellow-200",
+    fill: "fill-yellow-500/60"
+  },
+  lime: {
+    text: "text-lime-550 dark:text-lime-300",
+    textHover: "hover:text-lime-450 focus-visible:text-lime-450 dark:hover:text-lime-200 dark:focus-visible:text-lime-200",
+    fill: "fill-lime-500/60"
+  },
+  green: {
+    text: "text-green-550 dark:text-green-300",
+    textHover: "hover:text-green-450 focus-visible:text-green-450 dark:hover:text-green-200 dark:focus-visible:text-green-200",
+    fill: "fill-green-500/60"
+  },
+  emerald: {
+    text: "text-emerald-550 dark:text-emerald-300",
+    textHover: "hover:text-emerald-450 focus-visible:text-emerald-450 dark:hover:text-emerald-200 dark:focus-visible:text-emerald-200",
+    fill: "fill-emerald-500/60"
+  },
+  teal: {
+    text: "text-teal-550 dark:text-teal-300",
+    textHover: "hover:text-teal-450 focus-visible:text-teal-450 dark:hover:text-teal-200 dark:focus-visible:text-teal-200",
+    fill: "fill-teal-500/60"
+  },
+  cyan: {
+    text: "text-cyan-550 dark:text-cyan-300",
+    textHover: "hover:text-cyan-450 focus-visible:text-cyan-450 dark:hover:text-cyan-200 dark:focus-visible:text-cyan-200",
+    fill: "fill-cyan-500/60"
+  },
+  sky: {
+    text: "text-sky-550 dark:text-sky-300",
+    textHover: "hover:text-sky-450 focus-visible:text-sky-450 dark:hover:text-sky-200 dark:focus-visible:text-sky-200",
+    fill: "fill-sky-500/60"
+  },
+  blue: {
+    text: "text-blue-550 dark:text-blue-300",
+    textHover: "hover:text-blue-450 focus-visible:text-blue-450 dark:hover:text-blue-200 dark:focus-visible:text-blue-200",
+    fill: "fill-blue-500/60"
+  },
+  indigo: {
+    text: "text-indigo-550 dark:text-indigo-300",
+    textHover: "hover:text-indigo-450 focus-visible:text-indigo-450 dark:hover:text-indigo-200 dark:focus-visible:text-indigo-200",
+    fill: "fill-indigo-500/60"
+  },
+  violet: {
+    text: "text-violet-550 dark:text-violet-300",
+    textHover: "hover:text-violet-450 focus-visible:text-violet-450 dark:hover:text-violet-200 dark:focus-visible:text-violet-200",
+    fill: "fill-violet-500/60"
+  },
+  purple: {
+    text: "text-purple-550 dark:text-purple-300",
+    textHover: "hover:text-purple-450 focus-visible:text-purple-450 dark:hover:text-purple-200 dark:focus-visible:text-purple-200",
+    fill: "fill-purple-500/60"
+  },
+  fuchsia: {
+    text: "text-fuchsia-550 dark:text-fuchsia-300",
+    textHover: "hover:text-fuchsia-450 focus-visible:text-fuchsia-450 dark:hover:text-fuchsia-200 dark:focus-visible:text-fuchsia-200",
+    fill: "fill-fuchsia-500/60"
+  },
+  pink: {
+    text: "text-pink-550 dark:text-pink-300",
+    textHover: "hover:text-pink-450 focus-visible:text-pink-450 dark:hover:text-pink-200 dark:focus-visible:text-pink-200",
+    fill: "fill-pink-500/60"
+  },
+  rose: {
+    text: "text-rose-550 dark:text-rose-300",
+    textHover: "hover:text-rose-450 focus-visible:text-rose-450 dark:hover:text-rose-200 dark:focus-visible:text-rose-200",
+    fill: "fill-rose-500/60"
+  }
+};
+var hueTokens = Object.keys(hueTokenThemes).reduce((acc, huePalette) => {
+  acc[huePalette] = {
+    ...hueTokenThemes[huePalette],
+    cursorDarkValue: `${physicalColors[huePalette][hueTokenValueShades.cursorDarkValue]}88`,
+    cursorLightValue: physicalColors[huePalette][hueTokenValueShades.cursorLightValue]
+  };
+  return acc;
+}, {});
+var hueTheme = {
+  text: ({ hue }) => hueTokenThemes[hue].text,
+  textHover: ({ hue }) => hueTokenThemes[hue].textHover,
+  fill: ({ hue }) => hueTokenThemes[hue].fill
+};
+
+// packages/ui/react-ui-theme/src/styles/fragments/layout.ts
+var bounceLayout = "fixed inset-0 z-0 overflow-auto overscroll-auto";
+var fixedInsetFlexLayout = "flex flex-col fixed inset-0 overflow-hidden overscroll-none";
+
+// packages/ui/react-ui-theme/src/styles/fragments/motion.ts
+var popperMotion = "will-change-[opacity,transform] data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade";
+var dialogMotion = "will-change-[opacity,transform] animate-slideUpAndFade";
+
+// packages/ui/react-ui-theme/src/styles/fragments/ornament.ts
+var separatorBorderColor = "separator-separator";
+var inlineSeparator = "self-stretch border-ie mli-1";
+var blockSeparator = "self-stretch border-be mlb-1";
+
+// packages/ui/react-ui-theme/src/styles/fragments/selected.ts
+var ghostSelectedCurrent = ghostHover + " aria-[current]:surface-input hover:aria-[current]:surface-hover aria-selected:bg-primary-100 dark:aria-selected:bg-primary-850 hover:aria-selected:bg-primary-150 hover:dark:aria-selected:bg-primary-800 aria-[current]:aria-selected:bg-primary-200 dark:aria-[current]:aria-selected:bg-primary-750 hover:aria-[current]:aria-selected:bg-primary-200 hover:dark:aria-[current]:aria-selected:bg-primary-750";
+var ghostHighlighted = "data-[highlighted]:bg-primary-100 dark:data-[highlighted]:bg-primary-850 hover:data-[highlighted]:bg-primary-150 hover:dark:data-[highlighted]:bg-primary-800";
+var ghostSelectedTrackingInterFromNormal = "tracking-[0.0092em]";
+var ghostSelected = "aria-selected:surface-base aria-selected:fg-accent aria-selected:font-semibold aria-selected:tracking-normal transition-[color,font-variation-settings,letter-spacing]";
+var staticGhostSelectedCurrent = ({ current, selected }) => [
+  current && selected ? "bg-primary-200 dark:bg-primary-750 hover:bg-primary-200 hover:dark:bg-primary-750" : current ? "surface-input hover:surface-hover" : selected ? "bg-primary-100 dark:bg-primary-850 hover:bg-primary-150 hover:dark:bg-primary-800" : ghostHover
+];
+var staticGhostSelected = ({ selected }) => selected ? [
+  "bg-primary-200 dark:bg-primary-750"
+] : [];
+
+// packages/ui/react-ui-theme/src/styles/fragments/shimmer.ts
+var shimmer = "relative before:absolute before:inset-0 before:-translate-x-full before:animate-shimmer before:bg-gradient-to-r before:from-transparent before:via-neutral-100/10 before:to-transparent isolate overflow-hidden";
+var strongShimmer = "relative before:absolute before:inset-0 before:-translate-x-full before:animate-shimmer before:bg-gradient-to-r before:from-transparent before:via-primary-100/80 before:to-transparent isolate overflow-hidden";
+
+// packages/ui/react-ui-theme/src/styles/fragments/surface.ts
+var baseSurface = "base-surface";
+var fixedSurface = "base-surface md:fixed-surface backdrop-blur-md dark:backdrop-blur-lg";
+var fixedBorder = "separator-separator";
+var groupSurface = "base-surface";
+var groupBorder = "separator-separator";
+var modalSurface = "modal-surface";
+var attentionSurface = "attention-surface";
+var accentSurface = "surface-accent fg-inverse";
+
+// packages/ui/react-ui-theme/src/util/mx.ts
+import { extendTailwindMerge, validators as validators2 } from "tailwind-merge";
+
+// packages/ui/react-ui-theme/src/util/withLogical.ts
+import { mergeConfigs, validators } from "tailwind-merge";
+var getLength = () => [
+  validators.isLength,
+  validators.isArbitraryLength
+];
+var getLengthWithAuto = () => [
+  "auto",
+  validators.isLength,
+  validators.isArbitraryLength
+];
+var getLengthWithEmpty = () => [
+  "",
+  validators.isLength,
+  validators.isArbitraryLength
+];
+var getAny = () => [
+  validators.isAny
+];
+var getRounded = () => [
+  "none",
+  "",
+  validators.isTshirtSize,
+  "full",
+  validators.isArbitraryLength
+];
+var classGroupsConfig = {
+  float: [
+    {
+      float: [
+        "start",
+        "end"
+      ]
+    }
+  ],
+  clear: [
+    {
+      clear: [
+        "start",
+        "end"
+      ]
+    }
+  ],
+  resize: [
+    {
+      resize: [
+        "block ",
+        "inline"
+      ]
+    }
+  ],
+  "text-alignment": [
+    {
+      text: [
+        "start",
+        "end"
+      ]
+    }
+  ],
+  "logical.overscroll-b": [
+    {
+      "overscroll-b": [
+        "auto ",
+        "contain",
+        "auto"
+      ]
+    }
+  ],
+  "logical.overscroll-i": [
+    {
+      "overscroll-b": [
+        "auto ",
+        "contain",
+        "auto"
+      ]
+    }
+  ],
+  "logical.bs": [
+    {
+      bs: getLength()
+    }
+  ],
+  "logical.min-bs": [
+    {
+      "min-bs": getAny()
+    }
+  ],
+  "logical.max-bs": [
+    {
+      "max-bs": getAny()
+    }
+  ],
+  "logical.is": [
+    {
+      is: getLength()
+    }
+  ],
+  "logical.min-is": [
+    {
+      "min-is": getAny()
+    }
+  ],
+  "logical.max-is": [
+    {
+      "max-is": getAny()
+    }
+  ],
+  "logical.mlb": [
+    {
+      mlb: getLength()
+    }
+  ],
+  "logical.mli": [
+    {
+      mli: getLength()
+    }
+  ],
+  "logical.mbs": [
+    {
+      mbs: getLength()
+    }
+  ],
+  "logical.mbe": [
+    {
+      mbe: getLength()
+    }
+  ],
+  "logical.mis": [
+    {
+      mis: getLength()
+    }
+  ],
+  "logical.mie": [
+    {
+      mie: getLength()
+    }
+  ],
+  "logical.plb": [
+    {
+      plb: getLength()
+    }
+  ],
+  "logical.pli": [
+    {
+      pli: getLength()
+    }
+  ],
+  "logical.pbs": [
+    {
+      pbs: getLength()
+    }
+  ],
+  "logical.pbe": [
+    {
+      pbe: getLength()
+    }
+  ],
+  "logical.pis": [
+    {
+      pis: getLength()
+    }
+  ],
+  "logical.pie": [
+    {
+      pie: getLength()
+    }
+  ],
+  "logical.space-b": [
+    {
+      "space-b": getLength()
+    }
+  ],
+  "logical.space-i": [
+    {
+      "space-i": getLength()
+    }
+  ],
+  "logical.inset-block": [
+    {
+      "inset-block": getLengthWithAuto()
+    }
+  ],
+  "logical.inset-inline": [
+    {
+      "inset-inline": getLengthWithAuto()
+    }
+  ],
+  "logical.block-start": [
+    {
+      "block-start": getLengthWithAuto()
+    }
+  ],
+  "logical.block-end": [
+    {
+      "block-end": getLengthWithAuto()
+    }
+  ],
+  "logical.inline-start": [
+    {
+      "inline-start": getLengthWithAuto()
+    }
+  ],
+  "logical.inline-end": [
+    {
+      "inline-end": getLengthWithAuto()
+    }
+  ],
+  "logical.border-bs": [
+    {
+      "border-bs": getLengthWithEmpty()
+    }
+  ],
+  "logical.border-be": [
+    {
+      "border-be": getLengthWithEmpty()
+    }
+  ],
+  "logical.border-is": [
+    {
+      "border-is": getLengthWithEmpty()
+    }
+  ],
+  "logical.border-ie": [
+    {
+      "border-ie": getLengthWithEmpty()
+    }
+  ],
+  "logical.border-color-bs": [
+    {
+      "border-bs": getAny()
+    }
+  ],
+  "logical.border-color-be": [
+    {
+      "border-be": getAny()
+    }
+  ],
+  "logical.border-color-is": [
+    {
+      "border-is": getAny()
+    }
+  ],
+  "logical.border-color-ie": [
+    {
+      "border-ie": getAny()
+    }
+  ],
+  "logical.rounded-bs": [
+    {
+      "rounded-bs": getRounded()
+    }
+  ],
+  "logical.rounded-be": [
+    {
+      "rounded-be": getRounded()
+    }
+  ],
+  "logical.rounded-is": [
+    {
+      "rounded-is": getRounded()
+    }
+  ],
+  "logical.rounded-ie": [
+    {
+      "rounded-ie": getRounded()
+    }
+  ],
+  "logical.rounded-ss": [
+    {
+      "rounded-ss": getRounded()
+    }
+  ],
+  "logical.rounded-se": [
+    {
+      "rounded-se": getRounded()
+    }
+  ],
+  "logical.rounded-es": [
+    {
+      "rounded-es": getRounded()
+    }
+  ],
+  "logical.rounded-ee": [
+    {
+      "rounded-ee": getRounded()
+    }
+  ],
+  "logical.divide-b": [
+    {
+      "divide-b": getLengthWithEmpty()
+    }
+  ],
+  "logical.divide-i": [
+    {
+      "divide-i": getLengthWithEmpty()
+    }
+  ]
+};
+var withLogical = (prevConfig) => {
+  return mergeConfigs(prevConfig, {
+    extend: {
+      classGroups: classGroupsConfig,
+      conflictingClassGroups: {
+        "inset-block": [
+          "logical.block-start",
+          "logical.block-end"
+        ],
+        "inset-inline": [
+          "logical.inline-start",
+          "logical.inline-end"
+        ],
+        p: [
+          "logical.plb",
+          "logical.pli",
+          "logical.pbs",
+          "logical.pbe",
+          "logical.pis",
+          "logical.pie"
+        ],
+        pli: [
+          "logical.pis",
+          "logical.pie"
+        ],
+        plb: [
+          "logical.pbs",
+          "logical.pbe"
+        ],
+        m: [
+          "logical.mlb",
+          "logical.mli",
+          "logical.mbs",
+          "logical.mbe",
+          "logical.mis",
+          "logical.mie"
+        ],
+        mli: [
+          "logical.mis",
+          "logical.mie"
+        ],
+        mlb: [
+          "logical.mbs",
+          "logical.mbe"
+        ],
+        overscroll: [
+          "overscroll-i",
+          "overscroll-b"
+        ],
+        rounded: [
+          "logical.rounded-bs",
+          "logical.rounded-be",
+          "logical.rounded-is",
+          "logical.rounded-ie",
+          "logical.rounded-ss",
+          "logical.rounded-se",
+          "logical.rounded-es",
+          "logical.rounded-ee"
+        ],
+        "logical.rounded-bs": [
+          "logical.rounded-ss",
+          "logical.rounded-se"
+        ],
+        "logical.rounded-be": [
+          "logical.rounded-es",
+          "logical.rounded-ee"
+        ],
+        "logical.rounded-is": [
+          "logical.rounded-ss",
+          "logical.rounded-es"
+        ],
+        "logical.rounded-ie": [
+          "logical.rounded-ee",
+          "logical.rounded-se"
+        ],
+        "border-color": [
+          "logical.border-color-bs",
+          "logical.border-color-be",
+          "logical.border-color-is",
+          "logical.border-color-ie"
+        ],
+        border: [
+          "logical.border-bs",
+          "logical.border-be",
+          "logical.border-is",
+          "logical.border-ie"
+        ]
+      }
+    }
+  });
+};
+
+// packages/ui/react-ui-theme/src/util/mx.ts
+var semanticColorClasses = Object.keys(semanticColors);
+var mx = extendTailwindMerge({
+  extend: {
+    classGroups: {
+      "font-family": [
+        "font-body",
+        "font-mono"
+      ],
+      "font-weight": [
+        // App weights
+        "font-thin",
+        "font-extralight",
+        "font-light",
+        "font-normal",
+        "font-medium",
+        "font-semibold",
+        "font-bold",
+        "font-extrabold",
+        "font-black",
+        // Arbitrary numbers
+        validators2.isArbitraryNumber
+      ],
+      foreground: semanticColorClasses.map((value) => `fg-${value}`),
+      surface: semanticColorClasses.map((value) => `surface-${value}`),
+      separator: semanticColorClasses.map((value) => `separator-${value}`)
+    }
+  }
+}, withLogical);
+
+// packages/ui/react-ui-theme/src/styles/fragments/size.ts
+var sizeWidthMap = /* @__PURE__ */ new Map([
+  [
+    0,
+    "is-0"
+  ],
+  [
+    "px",
+    "is-px"
+  ],
+  [
+    0.5,
+    "is-0.5"
+  ],
+  [
+    1,
+    "is-1"
+  ],
+  [
+    1.5,
+    "is-1.5"
+  ],
+  [
+    2,
+    "is-2"
+  ],
+  [
+    2.5,
+    "is-2.5"
+  ],
+  [
+    3,
+    "is-3"
+  ],
+  [
+    3.5,
+    "is-3.5"
+  ],
+  [
+    4,
+    "is-4"
+  ],
+  [
+    5,
+    "is-5"
+  ],
+  [
+    6,
+    "is-6"
+  ],
+  [
+    7,
+    "is-7"
+  ],
+  [
+    8,
+    "is-8"
+  ],
+  [
+    9,
+    "is-9"
+  ],
+  [
+    10,
+    "is-10"
+  ],
+  [
+    11,
+    "is-11"
+  ],
+  [
+    12,
+    "is-12"
+  ],
+  [
+    14,
+    "is-14"
+  ],
+  [
+    16,
+    "is-16"
+  ],
+  [
+    20,
+    "is-20"
+  ],
+  [
+    24,
+    "is-24"
+  ],
+  [
+    28,
+    "is-28"
+  ],
+  [
+    32,
+    "is-32"
+  ],
+  [
+    36,
+    "is-36"
+  ],
+  [
+    40,
+    "is-40"
+  ],
+  [
+    44,
+    "is-44"
+  ],
+  [
+    48,
+    "is-48"
+  ],
+  [
+    52,
+    "is-52"
+  ],
+  [
+    56,
+    "is-56"
+  ],
+  [
+    60,
+    "is-60"
+  ],
+  [
+    64,
+    "is-64"
+  ],
+  [
+    72,
+    "is-72"
+  ],
+  [
+    80,
+    "is-80"
+  ],
+  [
+    96,
+    "is-96"
+  ]
+]);
+var sizeHeightMap = /* @__PURE__ */ new Map([
+  [
+    0,
+    "bs-0"
+  ],
+  [
+    "px",
+    "bs-px"
+  ],
+  [
+    0.5,
+    "bs-0.5"
+  ],
+  [
+    1,
+    "bs-1"
+  ],
+  [
+    1.5,
+    "bs-1.5"
+  ],
+  [
+    2,
+    "bs-2"
+  ],
+  [
+    2.5,
+    "bs-2.5"
+  ],
+  [
+    3,
+    "bs-3"
+  ],
+  [
+    3.5,
+    "bs-3.5"
+  ],
+  [
+    4,
+    "bs-4"
+  ],
+  [
+    5,
+    "bs-5"
+  ],
+  [
+    6,
+    "bs-6"
+  ],
+  [
+    7,
+    "bs-7"
+  ],
+  [
+    8,
+    "bs-8"
+  ],
+  [
+    9,
+    "bs-9"
+  ],
+  [
+    10,
+    "bs-10"
+  ],
+  [
+    11,
+    "bs-11"
+  ],
+  [
+    12,
+    "bs-12"
+  ],
+  [
+    14,
+    "bs-14"
+  ],
+  [
+    16,
+    "bs-16"
+  ],
+  [
+    20,
+    "bs-20"
+  ],
+  [
+    24,
+    "bs-24"
+  ],
+  [
+    28,
+    "bs-28"
+  ],
+  [
+    32,
+    "bs-32"
+  ],
+  [
+    36,
+    "bs-36"
+  ],
+  [
+    40,
+    "bs-40"
+  ],
+  [
+    44,
+    "bs-44"
+  ],
+  [
+    48,
+    "bs-48"
+  ],
+  [
+    52,
+    "bs-52"
+  ],
+  [
+    56,
+    "bs-56"
+  ],
+  [
+    60,
+    "bs-60"
+  ],
+  [
+    64,
+    "bs-64"
+  ],
+  [
+    72,
+    "bs-72"
+  ],
+  [
+    80,
+    "bs-80"
+  ],
+  [
+    96,
+    "bs-96"
+  ]
+]);
+var sizes = new Set(sizeWidthMap.keys());
+var getSizeHeight = sizeHeightMap.get.bind(sizeHeightMap);
+var getSizeWidth = sizeWidthMap.get.bind(sizeWidthMap);
+var getSize = (size) => mx(getSizeHeight(size), getSizeWidth(size));
+var computeSize = (value, defaultSize) => {
+  if (sizes.has(value)) {
+    return value;
+  } else if (value <= 0) {
+    return 0;
+  } else if (value === 1) {
+    return "px";
+  } else {
+    const wholeSeries = Math.floor(value);
+    const halfSeries = Math.floor(value * 2) / 2;
+    const doubleSeries = Math.floor(value / 2) * 2;
+    const quadrupleSeries = Math.floor(value / 4) * 4;
+    if (sizes.has(halfSeries)) {
+      return halfSeries;
+    } else if (sizes.has(wholeSeries)) {
+      return wholeSeries;
+    } else if (sizes.has(doubleSeries)) {
+      return doubleSeries;
+    } else if (sizes.has(quadrupleSeries)) {
+      return quadrupleSeries;
+    } else {
+      return defaultSize;
+    }
+  }
+};
+var sizeValue = (size) => size === "px" ? 1 : size;
+
+// packages/ui/react-ui-theme/src/styles/fragments/text.ts
+var placeholderText = "placeholder-neutral-300 dark:placeholder-neutral-500";
+var staticPlaceholderText = "text-neutral-300 dark:text-neutral-500";
+var descriptionText = "text-xs font-normal fg-description";
+var descriptionTextPrimary = "text-xs font-normal fg-base";
+var chromeText = "text-xs font-normal";
+
+// packages/ui/react-ui-theme/src/styles/fragments/valence.ts
+var successText = "text-xs font-medium text-success-550 dark:text-success-300";
+var infoText = "text-xs font-medium text-info-550 dark:text-info-300";
+var warningText = "text-xs font-medium text-warning-550 dark:text-warning-300";
+var errorText = "text-xs font-medium text-error-550 dark:text-error-300";
+var valenceColorText = (valence) => {
+  switch (valence) {
+    case "success":
+      return successText;
+    case "info":
+      return infoText;
+    case "warning":
+      return warningText;
+    case "error":
+      return errorText;
+    default:
+      return void 0;
+  }
+};
+var neutralMessageColors = "bg-neutral-25 dark:bg-neutral-850";
+var successMessageColors = "shadow-success-500/50 dark:shadow-success-500/50 text-success-600 dark:text-success-100 bg-success-50 dark:bg-success-900";
+var infoMessageColors = "shadow-info-500/50 dark:shadow-info-500/50 text-info-600 dark:text-info-100 bg-info-50 dark:bg-info-900";
+var warningMessageColors = "shadow-warning-500/50 dark:shadow-warning-500/50 text-warning-600 dark:text-warning-100 bg-warning-50 dark:bg-warning-900";
+var errorMessageColors = "shadow-error-500/50 dark:shadow-error-500/50 text-error-600 dark:text-error-100 bg-error-50 dark:bg-error-900";
+var messageValence = (valence) => {
+  switch (valence) {
+    case "success":
+      return successMessageColors;
+    case "info":
+      return infoMessageColors;
+    case "warning":
+      return warningMessageColors;
+    case "error":
+      return errorMessageColors;
+    default:
+      return neutralMessageColors;
+  }
+};
+
+// packages/ui/react-ui-theme/src/styles/components/anchored-overflow.ts
+var anchoredOverflowRoot = (_props, ...etc) => mx("overflow-anchored overflow-auto", ...etc);
+var anchoredOverflowAnchor = (_props, ...etc) => mx("overflow-anchor is-px bs-px", ...etc);
+var anchoredOverflowTheme = {
+  root: anchoredOverflowRoot,
+  anchor: anchoredOverflowAnchor
+};
+
+// packages/ui/react-ui-theme/src/styles/components/avatar.ts
+var avatarRoot = ({ size = 10, inGroup }, ...etc) => mx("relative inline-flex shrink-0", getSize(size), inGroup && (size === "px" || size <= 3 ? "-mie-1" : "-mie-2"), ...etc);
+var avatarLabel = ({ srOnly }, ...etc) => mx(srOnly && "sr-only", ...etc);
+var avatarDescription = ({ srOnly }, ...etc) => mx(descriptionText, srOnly && "sr-only", ...etc);
+var avatarFrame = ({ variant }, ...etc) => mx("is-full bs-full bg-[--surface-bg]", variant === "circle" ? "rounded-full" : "rounded", ...etc);
+var avatarStatusIcon = ({ status, size = 3 }, ...etc) => mx("absolute block-end-0 inline-end-0", getSize(size), status === "inactive" ? "text-warning-350 dark:text-warning-250" : status === "active" ? "text-success-350 dark:text-success-250" : "text-neutral-350 dark:text-neutral-250", ...etc);
+var avatarRing = ({ status, variant, animation }, ...etc) => mx("absolute inset-0 border-2", variant === "circle" ? "rounded-full" : "rounded", status === "current" ? "border-primary-400 dark:border-primary-500" : status === "active" ? "border-success-400 dark:border-success-400" : status === "error" ? "border-error-400 dark:border-error-500" : status === "warning" ? "border-warning-400 dark:border-warning-500" : status === "inactive" ? "separator-separator" : status === "internal" ? "border-fuchsia-600" : "border-[color:var(--surface-bg)]", animation === "pulse" ? "animate-halo-pulse" : "", ...etc);
+var avatarFallbackText = (_props, ...etc) => mx("fill-white", ...etc);
+var avatarGroup = (_props, ...etc) => mx("inline-flex items-center", ...etc);
+var avatarGroupLabel = ({ size, srOnly }, ...etc) => mx(srOnly ? "sr-only" : "rounded-full truncate text-sm leading-none plb-1 pli-2 relative z-[1] flex items-center justify-center", size && getSizeHeight(size), ...etc);
+var avatarGroupDescription = ({ srOnly }, ...etc) => mx(srOnly ? "sr-only" : descriptionText, ...etc);
+var avatarTheme = {
+  root: avatarRoot,
+  label: avatarLabel,
+  description: avatarDescription,
+  statusIcon: avatarStatusIcon,
+  frame: avatarFrame,
+  ring: avatarRing,
+  fallbackText: avatarFallbackText,
+  group: avatarGroup,
+  groupLabel: avatarGroupLabel,
+  groupDescription: avatarGroupDescription
+};
+
+// packages/ui/react-ui-theme/src/styles/components/breadcrumb.ts
+var breadcrumbRoot = (_props, ...etc) => mx("shrink-0 flex items-center", ...etc);
+var breadcrumbList = (_props, ...etc) => mx("contents", ...etc);
+var breadcrumbListItem = (_props, ...etc) => mx("contents", ...etc);
+var breadcrumbCurrent = (_props, ...etc) => mx(...etc);
+var breadcrumbSeparator = (_props, ...etc) => mx("opacity-50", ...etc);
+var breadcrumbTheme = {
+  root: breadcrumbRoot,
+  list: breadcrumbList,
+  listItem: breadcrumbListItem,
+  current: breadcrumbCurrent,
+  separator: breadcrumbSeparator
+};
+
+// packages/ui/react-ui-theme/src/styles/components/button.ts
+var primaryButtonColors = "fg-inverse surface-accent hover:surface-accentHover aria-pressed:bg-primary-500 dark:aria-pressed:bg-primary-500 data-[state=open]:bg-primary-500 dark:data-[state=open]:bg-primary-500 aria-checked:bg-primary-500 dark:aria-checked:bg-primary-500 aria-checked:text-primary-100";
+var staticDefaultButtonColors = "surface-input";
+var defaultButtonColors = staticDefaultButtonColors + " data-[state=open]:surface-input aria-pressed:fg-accent aria-pressed:surface-base aria-checked:fg-accent aria-checked:surface-base";
+var ghostButtonColors = ghostHover + " hover:text-inherit data-[state=open]:surface-input aria-pressed:fg-accent aria-pressed:surface-base aria-checked:fg-accent aria-checked:surface-base";
+var buttonRoot = (_props, ...etc) => {
+  return mx("ch-button ch-focus-ring group", ...etc);
+};
+var buttonGroup = (props, ...etc) => {
+  return mx("inline-flex rounded-sm [&>:first-child]:rounded-is-sm [&>:last-child]:rounded-ie-sm [&>button]:relative", contentElevation({
+    elevation: props.elevation
+  }), ...etc);
+};
+var buttonTheme = {
+  root: buttonRoot,
+  group: buttonGroup
+};
+
+// packages/ui/react-ui-theme/src/styles/components/dialog.ts
+var dialogLayoutFragment = "overflow-auto grid place-items-center p-2 md:p-4 lg:p-8";
+var dialogOverlay = (_props, ...etc) => mx("fixed z-[22] inset-inline-0 block-start-0 bs-[100dvh] surface-scrim", dialogLayoutFragment, ...etc);
+var dialogContent = ({ inOverlayLayout, elevation = "chrome" }, ...etc) => mx(
+  // TODO(thure): `flex` should not be default.
+  "flex flex-col",
+  !inOverlayLayout && "fixed z-[22] top-[50%] left-[50%] -translate-x-[50%] -translate-y-[50%]",
+  "is-[95vw] max-is-full md:max-is-[24rem] border rounded-lg p-4",
+  dialogMotion,
+  surfaceElevation({
+    elevation
+  }),
+  "surface-baseGlass backdrop-blur",
+  groupBorder,
+  focusRing,
+  ...etc
+);
+var dialogTitle = ({ srOnly }, ...etc) => mx("rounded shrink-0 text-xl font-medium", srOnly && "sr-only", ...etc);
+var dialogDescription = ({ srOnly }, ...etc) => mx("mlb-2", descriptionText, srOnly && "sr-only", ...etc);
+var dialogTheme = {
+  overlay: dialogOverlay,
+  content: dialogContent,
+  title: dialogTitle,
+  description: dialogDescription
+};
+
+// packages/ui/react-ui-theme/src/styles/components/menu.ts
+var menuViewport = (_props, ...etc) => mx("rounded-md p-1 max-bs-[--radix-dropdown-menu-content-available-height] overflow-y-auto", ...etc);
+var menuContent = (_props, ...etc) => mx("is-48 rounded-md md:is-56 z-[30]", popperMotion, modalSurface, surfaceElevation({
+  elevation: "group"
+}), ...etc);
+var menuItem = (_props, ...etc) => mx("flex cursor-pointer select-none items-center gap-2 rounded-md px-2 py-2 text-sm", "data-[highlighted]:surface-hover", subduedFocus, dataDisabled, ...etc);
+var menuSeparator = (_props, ...etc) => mx("mlb-1 mli-2 bs-px bg-neutral-75 dark:bg-neutral-700", ...etc);
+var menuGroupLabel = (_props, ...etc) => mx(descriptionText, "select-none pli-2 plb-2", ...etc);
+var menuArrow = (_props, ...etc) => mx(arrow, ...etc);
+var menuTheme = {
+  content: menuContent,
+  viewport: menuViewport,
+  item: menuItem,
+  separator: menuSeparator,
+  groupLabel: menuGroupLabel,
+  arrow: menuArrow
+};
+
+// packages/ui/react-ui-theme/src/styles/components/input.ts
+var neutralInputValence = "";
+var successInputValence = "shadow-success-500/50 dark:shadow-success-600/50";
+var infoInputValence = "shadow-info-500/50 dark:shadow-info-600/50";
+var warningInputValence = "shadow-warning-500/50 dark:shadow-warning-600/50";
+var errorInputValence = "shadow-error-500/50 dark:shadow-error-600/50";
+var textInputSurfaceFocus = "transition-colors surface-input focus:surface-attention border-transparent focus:border-transparent";
+var textInputSurfaceHover = "hover:surface-hover focus:hover:surface-attention";
+var booleanInputSurface = "shadow-inner transition-colors surface-unAccent aria-checked:surface-accent aria-[checked=mixed]:surface-accent";
+var booleanInputSurfaceHover = "hover:surface-unAccentHover hover:aria-checked:surface-accentHover hover:aria-[checked=mixed]:surface-accentHover";
+var inputValence = (valence) => {
+  switch (valence) {
+    case "success":
+      return successInputValence;
+    case "info":
+      return infoInputValence;
+    case "warning":
+      return warningInputValence;
+    case "error":
+      return errorInputValence;
+    default:
+      return null;
+  }
+};
+var sharedSubduedInputStyles = (props) => [
+  "is-full bg-transparent text-current",
+  props.density === "fine" ? fineBlockSize : coarseBlockSize,
+  placeholderText,
+  subduedFocus,
+  props.disabled && staticDisabled
+];
+var sharedDefaultInputStyles = (props) => [
+  "is-full text-base rounded text-[color:var(--surface-text)]",
+  textInputSurfaceFocus,
+  placeholderText,
+  props.density === "fine" ? fineDimensions : coarseDimensions,
+  props.disabled ? staticDisabled : textInputSurfaceHover
+];
+var sharedStaticInputStyles = (props) => [
+  "is-full text-base rounded text-[color:var(--surface-text)]",
+  textInputSurfaceFocus,
+  textInputSurfaceHover,
+  props.focused && "surface-attention",
+  placeholderText,
+  inputValence(props.validationValence),
+  props.disabled && staticDisabled,
+  props.focused && staticFocusRing
+];
+var inputInput = (props, ...etc) => props.variant === "subdued" ? mx(...sharedSubduedInputStyles(props), ...etc) : props.variant === "static" ? mx(...sharedStaticInputStyles(props), ...etc) : mx(...sharedDefaultInputStyles(props), !props.disabled && focusRing, inputValence(props.validationValence) || neutralInputValence, ...etc);
+var inputCheckbox = ({ size = 5 }, ...etc) => mx("ch-checkbox ch-focus-ring", getSize(size), ...etc);
+var inputCheckboxIndicator = ({ size = 5 }, ...etc) => mx(getSize(computeSize(sizeValue(size) * 0.65, 4)), ...etc);
+var inputSwitch = ({ size = 5, disabled }, ...etc) => mx(
+  getSizeHeight(size),
+  getSizeWidth(computeSize(sizeValue(size) * 1.75, 9)),
+  booleanInputSurface,
+  !disabled && booleanInputSurfaceHover,
+  // TODO(burdon): Added m-1 margin to make 40px width to align with 40px icon button.
+  "cursor-pointer shrink-0 rounded-full pli-1 mx-1 relative",
+  focusRing,
+  ...etc
+);
+var inputSwitchThumb = ({ size = 5 }, ...etc) => mx(getSize(size === "px" ? "px" : size - 2), "block bg-white rounded-full separator-separator transition-transform duration-100 will-change-transform data-[state=checked]:translate-x-[100%]", ...etc);
+var inputWithSegmentsInput = (props, ...etc) => mx("font-mono selection:bg-transparent mli-auto", props.disabled && "cursor-not-allowed", ...etc);
+var inputLabel = (props, ...etc) => mx("block text-sm font-medium", props.srOnly && "sr-only", ...etc);
+var inputDescription = (props, ...etc) => mx(descriptionText, props.srOnly && "sr-only", ...etc);
+var inputDescriptionAndValidation = (props, ...etc) => mx("leading-none mlb-1", props.srOnly && "sr-only", ...etc);
+var inputValidation = (props, ...etc) => mx(descriptionText, props.srOnly ? "sr-only" : valenceColorText(props.validationValence), ...etc);
+var inputTheme = {
+  input: inputInput,
+  inputWithSegments: inputWithSegmentsInput,
+  checkbox: inputCheckbox,
+  checkboxIndicator: inputCheckboxIndicator,
+  label: inputLabel,
+  description: inputDescription,
+  validation: inputValidation,
+  switch: inputSwitch,
+  switchThumb: inputSwitchThumb,
+  descriptionAndValidation: inputDescriptionAndValidation
+};
+
+// packages/ui/react-ui-theme/src/styles/components/link.ts
+var linkRoot = ({ variant }, ...etc) => mx("underline decoration-1 underline-offset-2 transition-color rounded-sm", variant === "neutral" ? "text-inherit hover:opacity-90 visited:text-inherit visited:hover:opacity-90" : "fg-accent hover:fg-accentHover visited:fg-accent visited:hover:fg-accentHover", focusRing, ...etc);
+var linkTheme = {
+  root: linkRoot
+};
+
+// packages/ui/react-ui-theme/src/styles/components/list.ts
+var listRoot = (_, ...etc) => mx(...etc);
+var listItem = ({ collapsible }, ...etc) => mx(!collapsible && "flex", ...etc);
+var listItemEndcap = ({ density }, ...etc) => mx(density === "fine" ? getSize(8) : getSize(10), "shrink-0 flex items-start justify-center", ...etc);
+var listItemHeading = ({ density }, ...etc) => mx(densityBlockSize(density), ...etc);
+var listItemDragHandleIcon = (_props, ...etc) => mx(getSize(5), "mbs-2.5", ...etc);
+var listItemOpenTrigger = ({ density }, ...etc) => mx("is-5 rounded flex justify-center items-center", densityBlockSize(density), ghostHover, focusRing, ...etc);
+var listItemOpenTriggerIcon = (_props, ...etc) => {
+  return mx(getSize(5), ...etc);
+};
+var listTheme = {
+  root: listRoot,
+  item: {
+    root: listItem,
+    endcap: listItemEndcap,
+    heading: listItemHeading,
+    dragHandleIcon: listItemDragHandleIcon,
+    openTrigger: listItemOpenTrigger,
+    openTriggerIcon: listItemOpenTriggerIcon
+  }
+};
+
+// packages/ui/react-ui-theme/src/styles/components/main.ts
+var topbarBlockPaddingStart = "pbs-[--topbar-size] sticky-top-from-topbar-bottom";
+var bottombarBlockPaddingEnd = "pbe-[--statusbar-size] sticky-bottom-from-statusbar-bottom";
+var sidebarSlots = {
+  start: {
+    width: "sm:data-[side=is]:is-[270px]",
+    sidebar: "sm:data-[side=is]:-inline-start-[270px]",
+    content: "lg:data-[sidebar-inline-start-state=open]:pis-[270px] lg:data-[sidebar-inline-start-state=open]:scroll-ps-[270px]",
+    notch: "max-is-[270px]"
+  },
+  // TODO(burdon): Maximal size for phone.
+  end: {
+    width: "sm:data-[side=ie]:is-[360px]",
+    sidebar: "sm:data-[side=ie]:-inline-end-[360px]",
+    content: "lg:data-[sidebar-inline-end-state=open]:pie-[360px] lg:data-[sidebar-inline-end-state=open]:scroll-pe-[360px]"
+  }
+};
+var mainSidebar = (_, ...etc) => mx("fixed block-start-0 block-end-0 is-[100vw] z-10 data-[side=ie]:z-20 overscroll-contain overflow-x-hidden overflow-y-auto", "transition-[inset-inline-start,inset-inline-end] duration-0 data-[resizing=false]:duration-200 ease-in-out", `data-[side=is]:-inline-start-[100vw] ${sidebarSlots.start.width} ${sidebarSlots.start.sidebar}`, `data-[side=ie]:-inline-end-[100vw] ${sidebarSlots.end.width} ${sidebarSlots.end.sidebar}`, "data-[side=is]:data-[state=open]:inline-start-0 data-[side=ie]:data-[state=open]:inline-end-0", "data-[side=is]:border-ie data-[side=ie]:border-is", fixedBorder, fixedSurface, ...etc);
+var mainContent = ({ bounce }, ...etc) => mx("transition-[padding-inline-start,padding-inline-end,scroll-padding-start,scroll-padding-end] duration-200 ease-in-out", `pis-0 scroll-ps-0 ${sidebarSlots.start.content}`, `pie-0 scroll-pe-0 ${sidebarSlots.end.content}`, bounce && bounceLayout, ...etc);
+var mainOverlay = (_, ...etc) => mx("fixed inset-0 z-[9] surface-scrim", "transition-opacity duration-200 ease-in-out", "opacity-0 data-[state=open]:opacity-100 lg:data-[state=open]:opacity-100", "hidden data-[state=open]:block lg:data-[state=open]:hidden", ...etc);
+var mainNotch = (_, ...etc) => mx("fixed z-[11] block-end-0 inline-start-0 pbe-[env(safe-area-inset-bottom)] rounded-se-lg min-bs-[var(--rail-size)] is-fit separator-separator surface-base", "transition-[border-width] box-content border-bs border-ie data-[nav-sidebar-state=open]:border-bs-0 data-[nav-sidebar-state=open]:border-ie-0", "pli-1 grid grid-cols-[repeat(auto-fit,var(--rail-action))]", sidebarSlots.start.notch, ...etc);
+var mainTheme = {
+  content: mainContent,
+  sidebar: mainSidebar,
+  overlay: mainOverlay,
+  notch: mainNotch
+};
+
+// packages/ui/react-ui-theme/src/styles/components/message.ts
+var messageRoot = ({ valence, elevation }, ...etc) => mx("p-3 rounded-md max-is-full overflow-auto", contentElevation({
+  elevation
+}), messageValence(valence), ...etc);
+var messageTitle = (_props, ...etc) => mx("text-base font-medium mb-2", ...etc);
+var messageBody = (_props, ...etc) => mx(...etc);
+var messageTheme = {
+  root: messageRoot,
+  title: messageTitle,
+  body: messageBody
+};
+
+// packages/ui/react-ui-theme/src/styles/components/popover.ts
+var popoverViewport = ({ constrainInline, constrainBlock }, ...etc) => mx("p-1 rounded-lg", constrainInline && "max-is-[--radix-popover-content-available-width] overflow-x-auto", constrainBlock && "max-bs-[--radix-popover-content-available-height] overflow-y-auto", ...etc);
+var popoverContent = (_props, ...etc) => mx("z-[30] rounded-lg", modalSurface, surfaceElevation({
+  elevation: "group"
+}), focusRing, ...etc);
+var popoverArrow = (_props, ...etc) => mx(groupArrow, ...etc);
+var popoverTheme = {
+  content: popoverContent,
+  viewport: popoverViewport,
+  arrow: popoverArrow
+};
+
+// packages/ui/react-ui-theme/src/styles/components/scroll-area.ts
+var scrollAreaRoot = (_props, ...etc) => mx("overflow-hidden", ...etc);
+var scrollAreaViewport = (_props, ...etc) => mx("is-full bs-full [&>div]:table-fixed [&>div]:is-full", ...etc);
+var scrollAreaScrollbar = (_props, ...etc) => mx("flex select-none touch-none p-0.5 ease-out", "data-[orientation=vertical]:is-1.5 sm:data-[orientation=vertical]:data-[variant=coarse]:is-3", "data-[orientation=horizontal]:flex-col data-[orientation=horizontal]:bs-1.5 sm:data-[orientation=horizontal]:data-[variant=coarse]:bs-3", "sm:data-[variant=coarse]:surface-separator rounded-full", "[&>div]:surface-unAccent sm:[&[data-variant=coarse]>div]:surface-attention", ...etc);
+var scrollAreaThumb = (_props, ...etc) => mx("flex-1 rounded-full relative", "before:content-[''] before:absolute before:top-1/2 before:left-1/2 before:-translate-x-1/2 before:-translate-y-1/2 before:w-full before:h-full before:min-w-[6px] before:min-h-[6px]", ...etc);
+var scrollAreaCorner = (_props, ...etc) => mx(...etc);
+var scrollAreaTheme = {
+  root: scrollAreaRoot,
+  viewport: scrollAreaViewport,
+  scrollbar: scrollAreaScrollbar,
+  thumb: scrollAreaThumb,
+  corner: scrollAreaCorner
+};
+
+// packages/ui/react-ui-theme/src/styles/components/select.ts
+var selectContent = ({ elevation = "chrome" }, ...etc) => {
+  return mx("p-1 z-[50] rounded", modalSurface, surfaceElevation({
+    elevation
+  }), ...etc);
+};
+var selectItem = (_props, ...etc) => mx("relative flex items-center pis-6 pie-3 plb-1", "text-base leading-none rounded-sm select-none outline-none", ghostHighlighted, ...etc);
+var selectItemIndicator = (_props, ...etc) => mx("absolute inline-start-0 is-6 inline-flex items-center justify-center", ...etc);
+var selectArrow = (_props, ...etc) => mx(arrow, ...etc);
+var selectSeparator = (_props, ...etc) => mx(blockSeparator, separatorBorderColor, ...etc);
+var selectScrollButton = (_props, ...etc) => mx(modalSurface, "flex items-center justify-center cursor-default bs-6 is-full", ...etc);
+var selectTriggerIcon = (_props, ...etc) => mx(getSize(2), ...etc);
+var selectTheme = {
+  content: selectContent,
+  item: selectItem,
+  itemIndicator: selectItemIndicator,
+  arrow: selectArrow,
+  separator: selectSeparator,
+  scrollButton: selectScrollButton,
+  triggerIcon: selectTriggerIcon
+};
+
+// packages/ui/react-ui-theme/src/styles/components/separator.ts
+var separatorRoot = ({ orientation }, ...etc) => mx(orientation === "vertical" ? inlineSeparator : blockSeparator, separatorBorderColor, ...etc);
+var separatorTheme = {
+  root: separatorRoot
+};
+
+// packages/ui/react-ui-theme/src/styles/components/status.ts
+var statusRoot = (_props, ...etc) => mx("relative block bs-1 overflow-hidden rounded-full bg-primary-400/20", ...etc);
+var statusBar = ({ indeterminate }, ...etc) => mx("absolute block inline-start-0 inset-block-0 rounded-full bg-primary-400", indeterminate && "animate-progress-indeterminate", ...etc);
+var statusTheme = {
+  root: statusRoot,
+  bar: statusBar
+};
+
+// packages/ui/react-ui-theme/src/styles/components/tag.ts
+var paletteColorMap = {
+  neutral: "surface-separator text-neutral-800 dark:text-neutral-150",
+  red: "bg-red-200 text-red-800 dark:bg-red-700 dark:text-red-150",
+  orange: "bg-orange-200 text-orange-800 dark:bg-orange-700 dark:text-orange-150",
+  amber: "bg-amber-200 text-amber-800 dark:bg-amber-700 dark:text-amber-150",
+  yellow: "bg-yellow-200 text-yellow-800 dark:bg-yellow-700 dark:text-yellow-150",
+  lime: "bg-lime-200 text-lime-800 dark:bg-lime-700 dark:text-lime-150",
+  green: "bg-green-200 text-green-800 dark:bg-green-700 dark:text-green-150",
+  emerald: "bg-emerald-200 text-emerald-800 dark:bg-emerald-700 dark:text-emerald-150",
+  teal: "bg-teal-200 text-teal-800 dark:bg-teal-700 dark:text-teal-150",
+  cyan: "bg-cyan-200 text-cyan-800 dark:bg-cyan-700 dark:text-cyan-150",
+  sky: "bg-sky-200 text-sky-800 dark:bg-sky-700 dark:text-sky-150",
+  blue: "bg-blue-200 text-blue-800 dark:bg-blue-700 dark:text-blue-150",
+  indigo: "bg-indigo-200 text-indigo-800 dark:bg-indigo-700 dark:text-indigo-150",
+  violet: "bg-violet-200 text-violet-800 dark:bg-violet-700 dark:text-violet-150",
+  purple: "bg-purple-200 text-purple-800 dark:bg-purple-700 dark:text-purple-150",
+  fuchsia: "bg-fuchsia-200 text-fuchsia-800 dark:bg-fuchsia-700 dark:text-fuchsia-150",
+  pink: "bg-pink-200 text-pink-800 dark:bg-pink-700 dark:text-pink-150",
+  rose: "bg-rose-200 text-rose-800 dark:bg-rose-700 dark:text-rose-150",
+  info: "bg-info-200 text-info-800 dark:bg-info-700 dark:text-info-150",
+  success: "bg-success-200 text-success-800 dark:bg-success-700 dark:text-success-150",
+  warning: "bg-warning-200 text-warning-800 dark:bg-warning-700 dark:text-warning-150",
+  error: "bg-error-200 text-error-800 dark:bg-error-700 dark:text-error-150"
+};
+var tagRoot = ({ palette = "neutral" }, ...etc) => mx("text-xs font-semibold pli-2 plb-0.5 rounded cursor-default", paletteColorMap[palette], ...etc);
+var tagTheme = {
+  root: tagRoot
+};
+
+// packages/ui/react-ui-theme/src/styles/components/toast.ts
+var toastViewport = (_props, ...etc) => mx("z-[70] fixed bottom-4 inset-x-4 w-auto md:top-4 md:right-4 md:left-auto md:bottom-auto md:w-full md:max-w-sm rounded-lg flex flex-col gap-2", ...etc);
+var toastRoot = (_props, ...etc) => mx("rounded-lg flex p-2 gap-2", modalSurface, surfaceElevation({
+  elevation: "chrome"
+}), "radix-state-open:animate-toast-slide-in-bottom md:radix-state-open:animate-toast-slide-in-right", "radix-state-closed:animate-toast-hide", "radix-swipe-end:animate-toast-swipe-out", "translate-x-radix-toast-swipe-move-x", "radix-swipe-cancel:translate-x-0 radix-swipe-cancel:duration-200 radix-swipe-cancel:ease-[ease]", focusRing, ...etc);
+var toastBody = (_props, ...etc) => mx("grow flex flex-col gap-1 justify-center pis-2", ...etc);
+var toastActions = (_props, ...etc) => mx("shrink-0 flex flex-col gap-1 justify-center", ...etc);
+var toastTitle = ({ srOnly }, ...etc) => mx("shrink-0 text-md font-medium", srOnly && "sr-only", ...etc);
+var toastDescription = ({ srOnly }, ...etc) => mx(descriptionText, "shrink-0", srOnly && "sr-only", ...etc);
+var toastTheme = {
+  viewport: toastViewport,
+  root: toastRoot,
+  body: toastBody,
+  title: toastTitle,
+  description: toastDescription,
+  actions: toastActions
+};
+
+// packages/ui/react-ui-theme/src/styles/components/toolbar.ts
+var toolbarRoot = (_props, ...etc) => {
+  return mx("flex items-center gap-2 is-full", ...etc);
+};
+var toolbarTheme = {
+  root: toolbarRoot
+};
+
+// packages/ui/react-ui-theme/src/styles/components/tooltip.ts
+var tooltipContent = (_props, ...etc) => mx("inline-flex items-center rounded-md plb-2 pli-3 max-is-64", modalSurface, popperMotion, surfaceElevation({
+  elevation: "group"
+}), chromeText, ...etc);
+var tooltipArrow = (_props, ...etc) => mx(arrow, ...etc);
+var tooltipTheme = {
+  content: tooltipContent,
+  arrow: tooltipArrow
+};
+
+// packages/ui/react-ui-theme/src/styles/components/treegrid.ts
+var levelStyles = /* @__PURE__ */ new Map([
+  [
+    1,
+    "[&>.indent:first-of-type]:pis-0 font-medium"
+  ],
+  [
+    2,
+    "[&>.indent:first-of-type]:pis-0"
+  ],
+  [
+    3,
+    "[&>.indent:first-of-type]:pis-1"
+  ],
+  [
+    4,
+    "[&>.indent:first-of-type]:pis-2"
+  ],
+  [
+    5,
+    "[&>.indent:first-of-type]:pis-3"
+  ],
+  [
+    6,
+    "[&>.indent:first-of-type]:pis-4"
+  ],
+  [
+    7,
+    "[&>.indent:first-of-type]:pis-5"
+  ],
+  [
+    8,
+    "[&>.indent:first-of-type]:pis-6"
+  ]
+]);
+var treegridRoot = (_, ...etc) => mx("grid", ...etc);
+var treegridRow = ({ level = 1 }, ...etc) => mx("contents", levelStyles.get(Math.min(Math.max(Math.round(level), 1), 8)), ...etc);
+var treegridCell = ({ indent }, ...etc) => mx(indent && "indent", ...etc);
+var treegridTheme = {
+  root: treegridRoot,
+  row: treegridRow,
+  cell: treegridCell
+};
+
+// packages/ui/react-ui-theme/src/styles/theme.ts
+import get from "lodash.get";
+var defaultTheme = {
+  themeName: () => "default",
+  anchoredOverflow: anchoredOverflowTheme,
+  avatar: avatarTheme,
+  breadcrumb: breadcrumbTheme,
+  button: buttonTheme,
+  dialog: dialogTheme,
+  menu: menuTheme,
+  input: inputTheme,
+  link: linkTheme,
+  list: listTheme,
+  main: mainTheme,
+  message: messageTheme,
+  popover: popoverTheme,
+  select: selectTheme,
+  scrollArea: scrollAreaTheme,
+  separator: separatorTheme,
+  status: statusTheme,
+  tag: tagTheme,
+  toast: toastTheme,
+  toolbar: toolbarTheme,
+  tooltip: tooltipTheme,
+  treegrid: treegridTheme,
+  hue: hueTheme
+};
+var bindTheme = (theme) => {
+  return (path, defaultClassName, styleProps, ...options) => {
+    const result = get(theme, path);
+    return typeof result === "function" ? result(styleProps, ...options) : defaultClassName;
+  };
+};
+var defaultTx = bindTheme(defaultTheme);
+export {
+  accentSurface,
+  anchoredOverflowAnchor,
+  anchoredOverflowRoot,
+  anchoredOverflowTheme,
+  arrow,
+  attentionSurface,
+  avatarDescription,
+  avatarFallbackText,
+  avatarFrame,
+  avatarGroup,
+  avatarGroupDescription,
+  avatarGroupLabel,
+  avatarLabel,
+  avatarRing,
+  avatarRoot,
+  avatarStatusIcon,
+  avatarTheme,
+  baseSurface,
+  bindTheme,
+  blockSeparator,
+  bottombarBlockPaddingEnd,
+  bounceLayout,
+  breadcrumbCurrent,
+  breadcrumbList,
+  breadcrumbListItem,
+  breadcrumbRoot,
+  breadcrumbSeparator,
+  breadcrumbTheme,
+  buttonGroup,
+  buttonRoot,
+  buttonTheme,
+  chromeText,
+  coarseBlockSize,
+  coarseButtonDimensions,
+  coarseButtonPadding,
+  coarseDimensions,
+  coarseTextPadding,
+  computeSize,
+  contentElevation,
+  dataDisabled,
+  defaultButtonColors,
+  defaultTheme,
+  defaultTx,
+  densityBlockSize,
+  descriptionText,
+  descriptionTextPrimary,
+  dialogContent,
+  dialogDescription,
+  dialogMotion,
+  dialogOverlay,
+  dialogTheme,
+  dialogTitle,
+  dropRing,
+  dropRingInner,
+  errorInputValence,
+  errorMessageColors,
+  errorText,
+  fineBlockSize,
+  fineButtonDimensions,
+  fineButtonPadding,
+  fineDimensions,
+  fineTextPadding,
+  fixedBorder,
+  fixedInsetFlexLayout,
+  fixedSurface,
+  focusRing,
+  getSize,
+  getSizeHeight,
+  getSizeWidth,
+  ghostButtonColors,
+  ghostHighlighted,
+  ghostHover,
+  ghostSelected,
+  ghostSelectedCurrent,
+  ghostSelectedTrackingInterFromNormal,
+  group,
+  groupArrow,
+  groupBorder,
+  groupSurface,
+  hoverColors,
+  hoverableControlItem,
+  hoverableControls,
+  hoverableFocusedControls,
+  hoverableFocusedKeyboardControls,
+  hoverableFocusedWithinControls,
+  hoverableOpenControlItem,
+  hueTheme,
+  hueTokenThemes,
+  hueTokens,
+  infoInputValence,
+  infoMessageColors,
+  infoText,
+  inlineSeparator,
+  inputCheckbox,
+  inputCheckboxIndicator,
+  inputDescription,
+  inputDescriptionAndValidation,
+  inputInput,
+  inputLabel,
+  inputSwitch,
+  inputSwitchThumb,
+  inputTheme,
+  inputValence,
+  inputValidation,
+  inputWithSegmentsInput,
+  linkRoot,
+  linkTheme,
+  listItem,
+  listItemDragHandleIcon,
+  listItemEndcap,
+  listItemHeading,
+  listItemOpenTrigger,
+  listItemOpenTriggerIcon,
+  listRoot,
+  listTheme,
+  mainContent,
+  mainNotch,
+  mainOverlay,
+  mainSidebar,
+  mainTheme,
+  menuArrow,
+  menuContent,
+  menuGroupLabel,
+  menuItem,
+  menuSeparator,
+  menuTheme,
+  menuViewport,
+  messageBody,
+  messageRoot,
+  messageTheme,
+  messageTitle,
+  messageValence,
+  modalSurface,
+  mx,
+  neutralInputValence,
+  neutralMessageColors,
+  paletteConfigs,
+  physicalColors,
+  placeholderText,
+  popoverArrow,
+  popoverContent,
+  popoverTheme,
+  popoverViewport,
+  popperMotion,
+  primaryButtonColors,
+  scrollAreaCorner,
+  scrollAreaRoot,
+  scrollAreaScrollbar,
+  scrollAreaTheme,
+  scrollAreaThumb,
+  scrollAreaViewport,
+  selectArrow,
+  selectContent,
+  selectItem,
+  selectItemIndicator,
+  selectScrollButton,
+  selectSeparator,
+  selectTheme,
+  selectTriggerIcon,
+  semanticColors,
+  separatorBorderColor,
+  separatorRoot,
+  separatorTheme,
+  shimmer,
+  sizeHeightMap,
+  sizeValue,
+  sizeWidthMap,
+  staticDefaultButtonColors,
+  staticDisabled,
+  staticFocusRing,
+  staticGhostSelected,
+  staticGhostSelectedCurrent,
+  staticHoverableControls,
+  staticPlaceholderText,
+  statusBar,
+  statusRoot,
+  statusTheme,
+  strongShimmer,
+  subduedFocus,
+  subtleHover,
+  successInputValence,
+  successMessageColors,
+  successText,
+  surfaceElevation,
+  tagRoot,
+  tagTheme,
+  tailwindConfig,
+  textBlockWidth,
+  toastActions,
+  toastBody,
+  toastDescription,
+  toastRoot,
+  toastTheme,
+  toastTitle,
+  toastViewport,
+  toolbarRoot,
+  toolbarTheme,
+  tooltipArrow,
+  tooltipContent,
+  tooltipTheme,
+  topbarBlockPaddingStart,
+  treegridCell,
+  treegridRoot,
+  treegridRow,
+  treegridTheme,
+  valenceColorText,
+  warningInputValence,
+  warningMessageColors,
+  warningText
+};
+//# sourceMappingURL=index.mjs.map