@bitrix24/b24ui-nuxt/dist/shared/b24ui-nuxt.C-CS9MBp.mjs

Bitrix24 UI-Kit for developing web applications REST API for NUXT & VUE

import 'node:url';
import { pascalCase, kebabCase, camelCase } from 'scule';
import { genExport } from 'knitwork';
import { hasNuxtModule, addTypeTemplate, addTemplate, updateTemplates, getLayerDirectories, logger } from '@nuxt/kit';
import { readFile } from 'node:fs/promises';
import { join } from 'pathe';
import { globSync } from 'tinyglobby';
import { defuFn } from 'defu';

const name = "@bitrix24/b24ui-nuxt";
const version = "2.2.1";

function getDefaultConfig(theme) {
  return {
    prefix: theme?.prefix,
    tv: {
      twMergeConfig: {
        prefix: theme?.prefix
      }
    }
  };
}
const defaultOptions = {
  colorMode: true,
  colorModeTypeLight: "light",
  version,
  mdc: true,
  content: false
};

function prefixClasses(classString, prefix) {
  if (!prefix || !classString) {
    return classString;
  }
  return classString.split(" ").filter(Boolean).map((cls) => `${prefix}:${cls}`).join(" ");
}
function isSizeValue(value) {
  return /^(?:[2-9]x[sl]|base|xs|sm|md|lg|1[01]xl|4\.5xl|xl)$/.test(value.trim());
}
function applyPrefixToObject(obj, prefix, context = []) {
  if (!obj || !prefix) {
    return obj;
  }
  const currentKey = context[context.length - 1];
  const compoundVariantsIndex = context.indexOf("compoundVariants");
  const isInCompoundVariant = compoundVariantsIndex !== -1 && !context.slice(compoundVariantsIndex).includes("class");
  const isInDefaultVariants = context.includes("defaultVariants");
  const isComponentSizeValue = typeof obj === "string" && typeof currentKey === "string" && currentKey.endsWith("Size") && isSizeValue(obj);
  if (typeof obj === "string" && (isInCompoundVariant || isInDefaultVariants || isComponentSizeValue)) {
    return obj;
  }
  if (typeof obj === "string") {
    return prefixClasses(obj, prefix);
  }
  if (Array.isArray(obj)) {
    return obj.map((item, index) => applyPrefixToObject(item, prefix, [...context, String(index)]));
  }
  if (typeof obj === "object") {
    const result = {};
    for (const [key, value] of Object.entries(obj)) {
      result[key] = applyPrefixToObject(value, prefix, [...context, key]);
    }
    return result;
  }
  return obj;
}

async function buildComponentDependencyGraph(componentDir, componentPattern) {
  const dependencyGraph = /* @__PURE__ */ new Map();
  const componentFiles = globSync(["**/*.vue"], {
    cwd: componentDir,
    absolute: true
  });
  for (const componentFile of componentFiles) {
    try {
      const content = await readFile(componentFile, "utf-8");
      const componentName = pascalCase(componentFile.split("/").pop().replace(".vue", ""));
      const dependencies = /* @__PURE__ */ new Set();
      const matches = content.matchAll(componentPattern);
      for (const match of matches) {
        const depName = match[1] || match[2];
        if (depName && depName !== componentName) {
          dependencies.add(depName);
        }
      }
      dependencyGraph.set(componentName, dependencies);
    } catch {
    }
  }
  return dependencyGraph;
}
function resolveComponentDependencies(component, dependencyGraph, resolved = /* @__PURE__ */ new Set()) {
  if (resolved.has(component)) {
    return resolved;
  }
  resolved.add(component);
  const dependencies = dependencyGraph.get(component);
  if (dependencies) {
    for (const dep of dependencies) {
      resolveComponentDependencies(dep, dependencyGraph, resolved);
    }
  }
  return resolved;
}
async function detectUsedComponents(dirs, prefix, componentDir, includeComponents) {
  const detectedComponents = /* @__PURE__ */ new Set();
  if (includeComponents && includeComponents.length > 0) {
    for (const component of includeComponents) {
      detectedComponents.add(component);
    }
  }
  const componentPattern = new RegExp(`<(?:Lazy)?${prefix}([A-Z][a-zA-Z]+)|\\b(?:Lazy)?${prefix}([A-Z][a-zA-Z]+)\\b`, "g");
  for (const dir of dirs) {
    const appFiles = globSync(["**/*.{vue,ts,js,tsx,jsx}"], {
      cwd: dir,
      ignore: ["node_modules/**", ".nuxt/**", "dist/**"]
    });
    for (const file of appFiles) {
      try {
        const filePath = join(dir, file);
        const content = await readFile(filePath, "utf-8");
        const matches = content.matchAll(componentPattern);
        for (const match of matches) {
          const componentName = match[1] || match[2];
          if (componentName) {
            detectedComponents.add(componentName);
          }
        }
      } catch {
      }
    }
  }
  if (detectedComponents.size === 0) {
    return void 0;
  }
  const dependencyGraph = await buildComponentDependencyGraph(componentDir, componentPattern);
  const allComponents = /* @__PURE__ */ new Set();
  for (const component of detectedComponents) {
    const resolved = resolveComponentDependencies(component, dependencyGraph);
    for (const resolvedComponent of resolved) {
      allComponents.add(resolvedComponent);
    }
  }
  return allComponents;
}

const accordion$1 = {
  slots: {
    root: "w-full",
    item: "text-(--b24ui-typography-label-color) border-b border-(--ui-color-divider-vibrant-accent-more) last:border-b-0",
    header: "flex",
    trigger: [
      "min-w-0 group flex-1 flex items-center gap-1.5",
      "py-[12px]",
      "font-(--ui-font-weight-medium) text-(length:--ui-font-size-sm) leading-[20px]",
      "focus-visible:outline-(--ui-color-accent-soft-element-blue)",
      "cursor-pointer"
    ].join(" "),
    content: "motion-safe:data-[state=open]:animate-[accordion-down_200ms_ease-out] motion-safe:data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none",
    body: "text-(length:--ui-font-size-sm) pb-[12px]",
    leadingIcon: "shrink-0 size-[20px]",
    trailingIcon: "shrink-0 size-[20px] ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200",
    label: "text-start break-words"
  },
  variants: {
    disabled: {
      true: {
        trigger: "cursor-not-allowed opacity-75"
      }
    }
  }
};

const advice = {
  slots: {
    root: [
      "light",
      "style-outline-accent-1",
      "flex items-end"
    ].join(" "),
    descriptionWrapper: "relative",
    descriptionBorder: "fill-(--b24ui-border-color)",
    descriptionBg: [
      "fill-(--b24ui-background)",
      "dark:fill-(--ui-color-base-6)"
    ].join(" "),
    descriptionAngle: [
      "absolute",
      "w-[14px] h-[12px]"
    ].join(" "),
    description: [
      "grow",
      "w-11/12 py-3 px-md2 ms-2",
      "rounded-[23px]",
      "font-[family-name:var(--ui-font-family-secondary)] text-(length:--ui-font-size-md)/(--ui-font-line-height-md) font-(--ui-font-weight-normal)",
      "border-1",
      "border-(--b24ui-border-color) bg-(--b24ui-background) text-(--b24ui-color)",
      "dark:bg-(--ui-color-base-6)"
    ].join(" "),
    leading: "me-1.5 ms-2 font-(--ui-font-weight-medium) text-(--ui-color-design-plain-content-icon-secondary)",
    leadingIcon: "shrink-0 size-[42px]",
    leadingAvatar: "shrink-0",
    leadingAvatarIcon: "text-(--b24ui-typography-label-color) bg-(--ui-color-base-8)",
    leadingAvatarSize: "lg"
  },
  variants: {
    angle: {
      top: {
        root: "items-start",
        leading: "mt-0.5",
        descriptionAngle: [
          "start-[0.8px] top-[9px]",
          "scale-x-100 -scale-y-100",
          "rtl:-scale-x-100"
        ].join(" ")
      },
      bottom: {
        root: "items-end",
        descriptionAngle: [
          "start-[0.8px] bottom-[9px]",
          "rtl:-scale-x-100"
        ].join(" ")
      }
    }
  },
  defaultVariants: {
    angle: "bottom"
  }
};

const alert = {
  slots: {
    root: [
      "relative overflow-hidden w-full flex",
      "text-(--b24ui-color)",
      "bg-(--b24ui-background)",
      "border-(--b24ui-border-color) border-(length:--b24ui-border-width)",
      "rounded-(--ui-border-radius-md)"
    ].join(" "),
    wrapper: [
      "min-w-0 flex-1 flex flex-col",
      "font-[family-name:var(--ui-font-family-primary)]"
    ].join(" "),
    title: "font-(--ui-font-weight-bold)",
    description: "",
    icon: "shrink-0 size-6",
    avatar: "shrink-0",
    avatarSize: "",
    actions: "flex flex-wrap gap-1.5 shrink-0",
    close: [
      "p-0",
      // @memo change color|bg for btn
      "[--ui-btn-color:var(--b24ui-color)]",
      "hover:bg-(--ui-color-base-white-fixed)/10",
      "focus-visible:bg-(--ui-color-base-white-fixed)/10",
      "-me-1.5 lg:me-0"
    ].join(" ")
  },
  variants: {
    color: {
      "air-primary": { root: "style-filled" },
      "air-primary-success": { root: "style-filled-success" },
      "air-primary-alert": { root: "style-filled-alert" },
      "air-primary-copilot": { root: "style-filled-copilot" },
      "air-primary-warning": { root: "style-filled-warning" },
      "air-secondary": { root: "style-tinted" },
      "air-secondary-alert": { root: "style-tinted-alert" },
      "air-secondary-accent": { root: "style-outline" },
      "air-secondary-accent-1": { root: "style-outline-accent-1" },
      "air-secondary-accent-2": { root: "style-outline-accent-2" },
      "air-tertiary": { root: "style-outline-no-accent" },
      // @deprecate ////
      "default": { root: "style-old-default" },
      "danger": { root: "style-old-danger" },
      "success": { root: "style-old-success" },
      "warning": { root: "style-old-warning" },
      "primary": { root: "style-old-primary" },
      "secondary": { root: "style-old-secondary" },
      "collab": { root: "style-old-collab" },
      "ai": { root: "style-old-ai" }
    },
    size: {
      sm: {
        root: "py-xs ps-sm pe-xs gap-2",
        title: "text-(length:--ui-font-size-sm)/(--ui-font-line-height-lg)",
        description: "text-(length:--ui-font-size-sm)/(--ui-font-line-height-lg)",
        avatarSize: "md"
      },
      md: {
        root: "py-md ps-md pe-xs gap-2.5",
        title: "text-(length:--ui-font-size-md)/(--ui-font-line-height-reset)",
        description: "text-(length:--ui-font-size-md)/(--ui-font-line-height-3xs)",
        avatarSize: "xl"
      }
    },
    orientation: {
      horizontal: {
        root: "items-center",
        actions: "items-center"
      },
      vertical: {
        root: "items-start",
        actions: "items-start mt-2"
      }
    },
    title: {
      true: {
        description: "mt-1"
      }
    },
    inverted: {
      true: "",
      false: ""
    }
  },
  compoundVariants: [
    // region color ////
    {
      inverted: true,
      color: "air-primary",
      class: {
        root: "style-filled-inverted"
      }
    },
    {
      inverted: true,
      color: "air-primary-success",
      class: {
        root: "style-filled-success-inverted"
      }
    },
    {
      inverted: true,
      color: "air-primary-alert",
      class: {
        root: "style-filled-alert-inverted"
      }
    },
    {
      inverted: true,
      color: "air-primary-copilot",
      class: {
        root: "style-filled-copilot-inverted"
      }
    },
    {
      inverted: true,
      color: "air-primary-warning",
      class: {
        root: "style-filled-warning-inverted"
      }
    }
    // endregion ////
  ],
  defaultVariants: {
    color: "air-secondary-accent",
    size: "md",
    inverted: false
  }
};

const avatar = {
  slots: {
    root: [
      "air-secondary-accent",
      "inline-flex items-center justify-center shrink-0",
      "select-none",
      "rounded-full",
      "align-middle",
      "bg-(--ui-color-base-8)",
      "ring ring-(--ui-color-base-7)"
      // 'overflow-hidden'
    ].join(" "),
    image: "h-full w-full rounded-[inherit] object-cover",
    fallback: "font-(--ui-font-weight-medium) text-(--ui-color-design-plain-content-icon-secondary) truncate",
    icon: "text-(--ui-color-design-plain-content-icon-secondary) shrink-0"
  },
  variants: {
    size: {
      "3xs": {
        root: "size-[10px] text-4xs font-(--ui-font-weight-regular)",
        icon: "size-[10px]"
      },
      "2xs": {
        root: "size-[20px] text-(length:--ui-font-size-4xs)/(--ui-font-line-height-reset) font-(--ui-font-weight-regular)",
        icon: "size-[18px]"
      },
      "xs": {
        root: "size-[24px] text-(length:--ui-font-size-3xs)/(--ui-font-line-height-reset) font-(--ui-font-weight-regular)",
        icon: "size-[22px]"
      },
      "sm": {
        root: "size-[28px] text-(length:--ui-font-size-xs)/(--ui-font-line-height-reset)",
        icon: "size-[26px]"
      },
      "md": {
        root: "size-[32px] text-(length:--ui-font-size-sm)/(--ui-font-line-height-reset)",
        icon: "size-[28px]"
      },
      "lg": {
        root: "size-[42px] text-(length:--ui-font-size-2xl)/(--ui-font-line-height-reset)",
        icon: "size-[38px]"
      },
      "xl": {
        root: "ring-2 size-[48px] text-(length:--ui-font-size-2xl)/(--ui-font-line-height-reset)",
        icon: "size-[44px]"
      },
      "2xl": {
        root: "ring-2 size-[60px] text-(length:--ui-font-size-5xl)/(--ui-font-line-height-reset)",
        icon: "size-[56px]"
      },
      "3xl": {
        root: "ring-2 size-[94px] text-[34px]/(--ui-font-line-height-reset)",
        icon: "size-[90px]"
      }
    }
  },
  defaultVariants: {
    size: "md"
  }
};

const avatarGroup = {
  slots: {
    root: "inline-flex justify-end",
    base: "relative rounded-full last:me-0"
  },
  variants: {
    size: {
      "3xs": { base: "-me-0.5" },
      "2xs": { base: "-me-0.5" },
      "xs": { base: "-me-0.5" },
      "sm": { base: "-me-1.5" },
      "md": { base: "-me-1.5" },
      "lg": { base: "-me-1.5" },
      "xl": { base: "-me-2" },
      "2xl": { base: "-me-2" },
      "3xl": { base: "-me-2" }
    }
  },
  defaultVariants: {
    size: "md"
  }
};

const fieldGroupVariant = {
  fieldGroup: {
    horizontal: [
      "focus-visible:outline-none",
      "ring ring-inset ring-0 focus-visible:ring-2",
      "group-[.is-field-group]/items:not-only:first:rounded-e-none group-[.is-field-group]/items:not-only:last:rounded-s-none group-[.is-field-group]/items:not-last:not-first:rounded-none",
      "group-[.is-field-group]/items:not-only:first:border-e-0 group-[.is-field-group]/items:not-only:not-first:border-s-0",
      "focus-visible:z-[1]"
    ].join(" "),
    vertical: [
      "focus-visible:outline-none",
      "ring ring-inset ring-0 focus-visible:ring-2",
      "not-only:first:rounded-b-none not-only:last:rounded-t-none not-last:not-first:rounded-none",
      "focus-visible:z-[1]"
    ].join(" ")
  },
  noSplit: {
    false: [
      "group-[.is-field-group]/items:not-only:not-first:after:content-[''] group-[.is-field-group]/items:not-only:not-first:after:absolute",
      "group-[.is-field-group]/items:not-only:not-first:after:top-[7px] group-[.is-field-group]/items:not-only:not-first:after:bottom-[6px] group-[.is-field-group]/items:not-only:not-first:after:left-0 group-[.is-field-group]/items:not-only:not-first:after:w-px",
      "group-[.is-field-group]/items:not-only:not-first:after:bg-current/30"
    ].join(" ")
  }
};
const fieldGroupVariantWithRoot = {
  fieldGroup: {
    horizontal: {
      root: "group leading-none has-focus-visible:z-[1]",
      base: [
        "focus-visible:outline-none",
        "ring ring-inset ring-1 focus-visible:ring-2",
        "group-not-only:group-first:rounded-e-3xl group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none",
        "group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none",
        "group-not-only:group-first:border-e-0 group-not-only:group-not-first:border-s-0"
      ].join(" ")
    },
    vertical: {
      root: "group has-focus-visible:z-[1]",
      base: [
        "focus-visible:outline-none",
        "ring ring-inset ring-1 focus-visible:ring-2",
        "group-not-only:group-first:rounded-b-none group-not-only:group-last:rounded-t-none group-not-last:group-not-first:rounded-none"
      ].join(" ")
    }
  },
  noSplit: {
    false: [
      "group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute",
      "group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px",
      "group-not-only:not-first:after:bg-current/30"
    ].join(" ")
  }
};
const fieldGroup$1 = {
  base: "relative",
  variants: {
    size: {
      xss: "",
      xs: "",
      sm: "",
      md: "",
      lg: "",
      xl: ""
    },
    orientation: {
      horizontal: "flex flex-row -space-x-px",
      vertical: "flex flex-col -space-y-px"
    }
  }
};

const badge$1 = {
  slots: {
    base: [
      "ui-label__scope --air",
      "select-none",
      "font-[family-name:var(--ui-font-family-secondary)]",
      "font-(--ui-label-font-weight)",
      "text-(length:--ui-label-font-size)/normal",
      "inline-flex items-center",
      "transition-all duration-200 ease-linear",
      "px-(--ui-label-inline-space)",
      "text-(--b24ui-color)",
      "bg-(--b24ui-background)",
      "border-(--b24ui-border-color) border-(length:--b24ui-border-width)"
    ].join(" "),
    wrapper: "h-(--ui-label-height) inline-flex items-center",
    label: "max-w-full whitespace-nowrap text-ellipsis decoration-from-font",
    leadingIcon: "shrink-0",
    leadingAvatar: "shrink-0",
    leadingAvatarSize: "",
    trailingIcon: "shrink-0 cursor-pointer hover:rounded-(--ui-border-radius-circle) hover:bg-current/20"
  },
  variants: {
    ...fieldGroupVariant,
    useLink: {
      true: {
        base: "cursor-pointer",
        wrapper: "group",
        label: "group-hover:underline group-hover:decoration-dashed"
      }
    },
    useClose: {
      true: "pe-2xs",
      false: ""
    },
    leading: {
      true: "ps-1",
      false: ""
    },
    color: {
      "air-primary": { base: "style-filled" },
      "air-primary-success": { base: "style-filled-success" },
      "air-primary-alert": { base: "style-filled-alert" },
      "air-primary-copilot": { base: "style-filled-copilot" },
      "air-primary-warning": { base: "style-filled-warning" },
      "air-secondary": { base: "style-tinted" },
      "air-secondary-alert": { base: "style-tinted-alert" },
      "air-secondary-accent": { base: "style-outline" },
      "air-secondary-accent-1": { base: "style-outline-accent-1" },
      "air-secondary-accent-2": { base: "style-outline-accent-2" },
      "air-tertiary": { base: "style-outline-no-accent" },
      "air-selection": { base: "style-selection" },
      // @deprecate ////
      "default": { base: "style-old-default" },
      "danger": { base: "style-old-danger" },
      "success": { base: "style-old-success" },
      "warning": { base: "style-old-warning" },
      "primary": { base: "style-old-primary" },
      "secondary": { base: "style-old-secondary" },
      "collab": { base: "style-old-collab" },
      "ai": { base: "style-old-ai" }
    },
    size: {
      xss: {
        base: "ui-label-xss gap-0.5",
        wrapper: "gap-0.5",
        label: "underline-offset-1",
        leadingIcon: "size-[12px]",
        leadingAvatarSize: "3xs",
        trailingIcon: "size-[12px]"
      },
      xs: {
        base: "ui-label-xs gap-0.5",
        wrapper: "gap-0.5",
        label: "underline-offset-1",
        leadingIcon: "size-[12px]",
        leadingAvatarSize: "3xs",
        trailingIcon: "size-[12px]"
      },
      sm: {
        base: "ui-label-sm gap-1",
        wrapper: "gap-1",
        label: "underline-offset-1",
        leadingIcon: "size-[14px]",
        leadingAvatarSize: "3xs",
        trailingIcon: "size-[14px]"
      },
      md: {
        base: "ui-label-md gap-1",
        wrapper: "gap-1",
        label: "underline-offset-1",
        leadingIcon: "size-[15px]",
        leadingAvatarSize: "3xs",
        trailingIcon: "size-[15px]"
      },
      lg: {
        base: "ui-label-lg gap-1",
        wrapper: "gap-1",
        label: "",
        leadingIcon: "size-[22px]",
        leadingAvatarSize: "2xs",
        trailingIcon: "size-[22px]"
      },
      xl: {
        base: "ui-label-xl gap-1",
        wrapper: "gap-1",
        label: "",
        leadingIcon: "size-[22px]",
        leadingAvatarSize: "2xs",
        trailingIcon: "size-[22px]"
      }
    },
    square: {
      true: {
        base: "rounded-[calc(var(--ui-label-height)_/_4)] ",
        wrapper: "w-(--ui-label-height)",
        label: "overflow-hidden"
      },
      false: {
        base: "rounded-[calc(var(--ui-label-height)_/_2)]"
      }
    },
    inverted: {
      true: {
        base: "border-(--b24ui-color)"
      },
      false: ""
    }
  },
  compoundVariants: [
    // region color ////
    {
      inverted: true,
      color: "air-primary",
      class: {
        base: "style-filled-inverted"
      }
    },
    {
      inverted: true,
      color: "air-primary-success",
      class: {
        base: "style-filled-success-inverted"
      }
    },
    {
      inverted: true,
      color: "air-primary-alert",
      class: {
        base: "style-filled-alert-inverted"
      }
    },
    {
      inverted: true,
      color: "air-primary-copilot",
      class: {
        base: "style-filled-copilot-inverted"
      }
    },
    {
      inverted: true,
      color: "air-primary-warning",
      class: {
        base: "style-filled-warning-inverted"
      }
    },
    // endregion ////
    // region square ////
    {
      size: "xss",
      square: true,
      class: {
        base: "p-0 ps-0 pe-0",
        wrapper: "px-[2px] gap-0",
        leadingIcon: "size-[6px]"
      }
    },
    {
      size: "xs",
      square: true,
      class: {
        base: "p-0 ps-0 pe-0",
        wrapper: "px-[2px] gap-0",
        leadingIcon: "size-[10px]"
      }
    },
    {
      size: "sm",
      square: true,
      class: {
        base: "p-0 ps-0 pe-0",
        wrapper: "p-[1px] gap-0",
        leadingIcon: "size-[16px]"
      }
    },
    {
      size: "md",
      square: true,
      class: {
        base: "p-0 ps-0 pe-0",
        wrapper: "p-[1px] gap-0",
        leadingIcon: "size-[18px]"
      }
    },
    {
      size: "lg",
      square: true,
      class: {
        base: "p-0 ps-0 pe-0",
        wrapper: "p-[1px] gap-0",
        leadingIcon: "size-[23px]"
      }
    },
    {
      size: "xl",
      square: true,
      class: {
        base: "p-0 ps-0 pe-0",
        wrapper: "p-[1px] gap-0",
        leadingIcon: "size-[28px]"
      }
    },
    // endregion ////
    // region fieldGroup ////
    {
      fieldGroup: ["horizontal", "vertical"],
      size: ["xl", "lg", "md"],
      class: "rounded-(--ui-border-radius-md)"
    },
    {
      fieldGroup: ["horizontal", "vertical"],
      size: "sm",
      class: "rounded-(--ui-border-radius-sm)"
    },
    {
      fieldGroup: ["horizontal", "vertical"],
      size: "xs",
      class: "rounded-(--ui-border-radius-xs)"
    },
    {
      fieldGroup: ["horizontal", "vertical"],
      size: "xss",
      class: "rounded-[5px]"
    }
    // endregion ////
  ],
  defaultVariants: {
    color: "air-primary",
    size: "md",
    square: false,
    inverted: false
  }
};

const banner = {
  slots: {
    root: [
      "relative",
      "z-50",
      "w-full",
      "bg-(--b24ui-background)",
      "transition-colors"
    ].join(" "),
    container: "flex items-center justify-between gap-3 h-12",
    left: "hidden lg:flex-1 lg:flex lg:items-center",
    center: "flex items-center gap-1.5 min-w-0",
    right: "lg:flex-1 flex items-center justify-end",
    icon: [
      "size-5 shrink-0",
      "text-(--b24ui-color)",
      "pointer-events-none"
    ].join(" "),
    title: [
      "text-(length:--ui-font-size-sm)/(--ui-font-line-height-sm)",
      "text-(--b24ui-color)",
      "font-(--ui-font-weight-medium)",
      "truncate"
    ].join(" "),
    actions: "flex gap-1.5 shrink-0 isolate",
    close: [
      // @memo change color|bg for btn
      "[--ui-btn-color:var(--b24ui-color)]",
      "hover:bg-(--ui-color-base-white-fixed)/10",
      "focus-visible:bg-(--ui-color-base-white-fixed)/10",
      "-me-1.5 lg:me-0"
    ].join(" ")
  },
  variants: {
    color: {
      "air-primary": { root: "style-filled" },
      "air-primary-success": { root: "style-filled-success" },
      "air-primary-alert": { root: "style-filled-alert" },
      "air-primary-copilot": { root: "style-filled-copilot" },
      "air-primary-warning": { root: "style-filled-warning" },
      "air-secondary": { root: "style-tinted" },
      "air-secondary-alert": { root: "style-tinted-alert" },
      "air-secondary-accent": { root: "style-outline" },
      "air-secondary-accent-1": { root: "style-outline-accent-1" },
      "air-secondary-accent-2": { root: "style-outline-accent-2" },
      "air-tertiary": { root: "style-outline-no-accent" }
    },
    to: {
      true: ""
    }
  },
  compoundVariants: [
    {
      // color: 'neutral',
      to: true,
      class: {
        root: "hover:bg-(--b24ui-background)/90"
      }
    }
  ],
  defaultVariants: {
    color: "air-primary-alert"
  }
};

const breadcrumb = {
  slots: {
    root: "relative min-w-0",
    list: "flex items-center gap-[6px]",
    item: "flex min-w-0",
    link: [
      "group",
      "relative",
      "flex items-center gap-[6px]",
      "text-(length:--ui-font-size-sm)",
      "min-w-0",
      "-mt-px",
      "focus-visible:outline-(--ui-color-accent-main-primary)"
    ].join(" "),
    linkLeadingIcon: "shrink-0 size-[20px]",
    linkLeadingAvatar: "shrink-0",
    linkLeadingAvatarSize: "2xs",
    linkLabel: "truncate",
    separator: "flex",
    separatorIcon: "shrink-0 size-[20px] text-(--ui-color-base-6)"
  },
  variants: {
    active: {
      true: {
        link: [
          "text-(--ui-color-design-selection-content)",
          "hover:text-(--ui-color-accent-main-primary-alt-2)",
          "hover:underline",
          "font-(--ui-font-weight-semi-bold)"
        ].join(" ")
      },
      false: {
        link: [
          "text-(--b24ui-typography-legend-color)",
          "font-(--ui-font-weight-medium)"
        ].join(" ")
      }
    },
    disabled: {
      true: {
        link: "cursor-not-allowed opacity-30"
      }
    },
    to: {
      true: ""
    }
  },
  compoundVariants: [{
    disabled: false,
    active: false,
    to: true,
    class: {
      link: [
        "hover:text-(--ui-color-accent-main-primary-alt-2)",
        "hover:underline",
        "transition-colors"
      ].join(" ")
    }
  }]
};

const safeList$1 = [
  "invisible"
].join(" ");
const button = {
  slots: {
    base: [
      "ui-btn",
      "font-[family-name:var(--ui-font-family-primary)]",
      "select-none cursor-pointer inline-flex items-center",
      "relative",
      "outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2",
      "disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30",
      "transition duration-0 ease-linear",
      // transition-colors
      "border-(length:--ui-btn-border-width)",
      "text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color)",
      "hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover)",
      "focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover)",
      "active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active)",
      "disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color)",
      "aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color)",
      "focus-visible:outline-(--ui-btn-background)",
      "ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover)",
      "h-(--ui-btn-height)",
      "text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight)"
    ].join(" "),
    baseLoading: "h-full w-full absolute inset-0 flex flex-row flex-nowrap items-center justify-center",
    baseLoadingWaitIcon: "text-(--ui-btn-color) size-[calc(var(--ui-btn-wait-icon-size)_+_7px)]",
    baseLoadingClockIcon: "text-(--ui-btn-color) size-[calc(var(--ui-btn-wait-icon-size)_+_7px)]",
    baseLoadingSpinnerIcon: "text-(--ui-btn-color) size-(--ui-btn-wait-icon-size) animate-spin stroke-2",
    baseLine: [
      "w-full inline-flex items-center justify-center gap-(--ui-btn-icon-space)",
      "ps-(--ui-btn-padding-left) pe-(--ui-btn-padding-right)",
      "h-(--ui-btn-height)"
    ].join(" "),
    label: [
      "h-(--ui-btn-height) max-w-full",
      "inline-flex flex-row items-center",
      "tracking-(--ui-btn-letter-spacing)",
      "overflow-visible",
      "text-clip"
      // 'mt-(--ui-btn-title-compensation)'
    ].join(" "),
    labelInner: [
      "truncate",
      "inline-block",
      "max-w-full",
      "mt-(--ui-btn-title-compensation)"
    ].join(" "),
    leadingIcon: "text-(--ui-btn-color) shrink-0 size-(--ui-btn-icon-size)",
    leadingAvatar: "shrink-0 me-[4px]",
    leadingAvatarSize: "",
    trailingIcon: "text-(--ui-btn-color) shrink-0 size-(--ui-btn-icon-size) mt-(--ui-btn-title-compensation)",
    safeList: safeList$1
  },
  variants: {
    ...fieldGroupVariant,
    color: {
      "air-primary": "--style-filled",
      "air-primary-success": "--style-filled-success",
      "air-primary-alert": "--style-filled-alert",
      "air-primary-copilot": "--style-filled-copilot",
      "air-secondary": "--style-tinted",
      "air-secondary-alert": "--style-tinted-alert",
      "air-secondary-accent": "--style-outline",
      "air-secondary-accent-1": "--style-outline-accent-1",
      "air-secondary-accent-2": "--style-outline-accent-2",
      "air-secondary-no-accent": "--style-outline-no-accent",
      "air-tertiary": "--style-plain",
      "air-tertiary-accent": "--style-plain-accent",
      "air-tertiary-no-accent": "--style-plain-no-accent",
      "air-selection": "--style-selection",
      "air-boost": {
        base: [
          "--style-filled-boost",
          "bg-transparent hover:bg-transparent focus:bg-transparent active:bg-transparent disabled:bg-transparent aria-disabled:bg-transparent",
          "from-0% via-58.65% to-100%",
          "bg-radial-[110.42%_110.42%_at_-10.42%_31.25%] from-(--ui-color-design-filled-boost-bg-gradient-1) via-(--ui-color-design-filled-boost-bg-gradient-2) to-(--ui-color-design-filled-boost-bg-gradient-3)",
          "hover:bg-radial-[110.42%_110.42%_at_-10.42%_31.25%] hover:from-(--hover-color-1) via-(--hover-color-2) hover:via-58.65% hover:to-(--hover-color-3)",
          "focus:bg-radial-[110.42%_110.42%_at_-10.42%_31.25%] focus:from-(--hover-color-1) via-(--hover-color-2) focus:via-58.65% to-(--hover-color-3)",
          "active:bg-radial-[110.42%_110.42%_at_-10.42%_31.25%] active:from-(--active-color-1) via-(--active-color-2) active:via-58.65% to-(--active-color-3)",
          "disabled:bg-radial-[110.42%_110.42%_at_-10.42%_31.25%] disabled:from-(--ui-color-design-filled-boost-bg-gradient-1) via-(--ui-color-design-filled-boost-bg-gradient-2) to-(--ui-color-design-filled-boost-bg-gradient-3)",
          "aria-disabled:bg-radial-[110.42%_110.42%_at_-10.42%_31.25%] aria-disabled:from-(--ui-color-design-filled-boost-bg-gradient-1) aria-disabled:via-(--ui-color-design-filled-boost-bg-gradient-2) aria-disabled:to-(--ui-color-design-filled-boost-bg-gradient-3)"
          // 'bg-(--ui-btn-background-gradient)',
          // 'hover:bg-(--ui-btn-background-gradient-hover)',
          // 'focus:bg-(--ui-btn-background-gradient-hover)',
          // 'active:bg-(--ui-btn-background-gradient-active)',
          // 'disabled:bg-(--ui-btn-background-gradient)',
          // 'aria-disabled:bg-(--ui-btn-background-gradient)'
        ].join(" ")
      },
      // @deprecate ////
      "default": "",
      "danger": "",
      "success": "",
      "warning": "",
      "primary": "",
      "secondary": "",
      "collab": "",
      "ai": "",
      "link": ""
    },
    // @deprecate ////
    depth: {
      light: "",
      normal: "",
      dark: ""
    },
    size: {
      xss: {
        base: "ui-btn-xss",
        leadingAvatarSize: "2xs"
      },
      xs: {
        base: "ui-btn-xs",
        leadingAvatarSize: "2xs"
      },
      sm: {
        base: "ui-btn-sm",
        leadingAvatarSize: "xs"
      },
      md: {
        base: "ui-btn-md",
        leadingAvatarSize: "xs"
      },
      lg: {
        base: "ui-btn-lg",
        leadingAvatarSize: "md"
      },
      xl: {
        base: "ui-btn-xl",
        leadingAvatarSize: "md"
      }
    },
    block: {
      true: {
        base: "w-full"
      }
    },
    rounded: {
      true: "rounded-(--ui-border-radius-lg)",
      false: "rounded-(--ui-btn-radius)"
    },
    leading: {
      true: ""
    },
    active: {
      true: {
        base: ""
      },
      false: {
        base: ""
      }
    },
    useLabel: {
      true: "",
      false: {
        baseLine: "ps-[4px] pe-[4px]",
        leadingAvatar: "me-0"
      }
    },
    useDropdown: {
      true: ""
    },
    useWait: {
      true: ""
    },
    useClock: {
      true: ""
    },
    loading: {
      true: ""
    },
    normalCase: {
      true: "normal-case",
      false: "uppercase"
    },
    isAir: {
      true: "--air",
      // old theme
      false: ""
    }
  },
  compoundVariants: [
    // region default ////
    {
      color: "default",
      depth: "light",
      class: "--style-default-light"
    },
    {
      color: "default",
      depth: "normal",
      class: "--style-default"
    },
    {
      color: "default",
      depth: "dark",
      class: "--style-default-dark"
    },
    // endregion ////
    // region danger ////
    {
      color: "danger",
      depth: "light",
      class: "--style-danger-light"
    },
    {
      color: "danger",
      depth: "normal",
      class: "--style-danger"
    },
    {
      color: "danger",
      depth: "dark",
      class: "--style-danger-dark"
    },
    // endregion ////
    // region success ////
    {
      color: "success",
      depth: "light",
      class: "--style-success-light"
    },
    {
      color: "success",
      depth: "normal",
      class: "--style-success"
    },
    {
      color: "success",
      depth: "dark",
      class: "--style-success-dark"
    },
    // endregion ////
    // region warning ////
    {
      color: "warning",
      depth: "light",
      class: "--style-warning-light"
    },
    {
      color: "warning",
      depth: "normal",
      class: "--style-warning"
    },
    {
      color: "warning",
      depth: "dark",
      class: "--style-warning-dark"
    },
    // endregion ////
    // region primary ////
    {
      color: "primary",
      depth: "light",
      class: "--style-primary-light"
    },
    {
      color: "primary",
      depth: "normal",
      class: "--style-primary"
    },
    {
      color: "primary",
      depth: "dark",
      class: "--style-primary-dark"
    },
    // endregion ////
    // region secondary ////
    {
      color: "secondary",
      depth: "light",
      class: "--style-secondary-light"
    },
    {
      color: "secondary",
      depth: "normal",
      class: "--style-secondary"
    },
    {
      color: "secondary",
      depth: "dark",
      class: "--style-secondary-dark"
    },
    // endregion ////
    // region collab ////
    {
      color: "collab",
      depth: "light",
      class: "--style-collab-light"
    },
    {
      color: "collab",
      depth: "normal",
      class: "--style-collab"
    },
    {
      color: "collab",
      depth: "dark",
      class: "--style-collab-dark"
    },
    // endregion ////
    // region ai ////
    {
      color: "ai",
      depth: "light",
      class: "--style-ai-light"
    },
    {
      color: "ai",
      depth: "normal",
      class: "--style-ai"
    },
    {
      color: "ai",
      depth: "dark",
      class: "--style-ai-dark"
    },
    // endregion ////
    // region link ////
    {
      color: "link",
      depth: "light",
      class: "--style-link-light"
    },
    {
      color: "link",
      depth: "normal",
      class: "--style-link"
    },
    {
      color: "link",
      depth: "dark",
      class: "--style-link-dark"
    },
    // endregion ////
    {
      leading: true,
      useLabel: true,
      useDropdown: false,
      class: {
        baseLine: "ps-[calc(var(--ui-btn-padding-left)_-_var(--ui-btn-icon-compensation))]"
      }
    },
    // endregion ////
    // region size && useDropdown ////
    // @todo ////
    {
      leading: false,
      useLabel: true,
      useDropdown: true,
      class: {
        baseLine: "pe-[calc(var(--ui-btn-padding-right)_-_var(--ui-btn-icon-compensation))]"
      }
    },
    // endregion ////
    // region size && leading && useDropdown ////
    {
      leading: true,
      useLabel: true,
      useDropdown: true,
      class: {
        baseLine: [
          "ps-[calc(var(--ui-btn-padding-left)_-_var(--ui-btn-icon-compensation))]",
          "pe-[calc(var(--ui-btn-padding-right)_-_var(--ui-btn-icon-compensation))]"
        ].join(" ")
      }
    },
    // endregion ////
    // region single icon ////
    {
      leading: true,
      useLabel: false,
      useDropdown: false,
      class: {
        base: [
          "w-(--ui-btn-height)"
        ].join(" ")
      }
    }
    // endregion ////
  ],
  defaultVariants: {
    size: "md",
    color: "air-secondary-no-accent",
    depth: "normal",
    normalCase: true,
    isAir: true
  }
};

const calendar = {
  slots: {
    root: [
      "font-[family-name:var(--ui-font-family-primary)]"
      // 'w-full'
    ].join(" "),
    header: "flex items-center justify-between",
    body: "flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0",
    heading: [
      "mx-auto",
      "text-center",
      "font-(--ui-font-weight-semi-bold)",
      "text-(--b24ui-typography-legend-color)",
      "truncate"
    ].join(" "),
    grid: "w-full border-collapse select-none space-y-1 focus:outline-none",
    gridRow: "grid grid-cols-7 place-items-center",
    gridWeekDaysRow: "mb-1 grid w-full grid-cols-7",
    gridBody: "grid",
    headCell: [
      "font-(--ui-font-weight-normal)",
      "text-(--ui-color-design-plain-na-content)"
      // text-base-500
    ].join(" "),
    cell: "relative text-center cursor-pointer aria-disabled:cursor-not-allowed",
    cellTrigger: [
      "m-0.5 relative",
      "flex items-center justify-center",
      "rounded-full whitespace-nowrap",
      "focus-visible:ring-2 focus:outline-none",
      "text-(--b24ui-typography-label-color)",
      "data-disabled:text-(--ui-color-design-plain-na-content-secondary)",
      "data-unavailable:text-(--ui-color-design-plain-na-content-secondary)",
      "data-outside-view:text-(--ui-color-design-plain-na-content-secondary)",
      "data-[selected]:text-(--b24ui-color)",
      // data-[selected]:text-white
      "focus-visible:ring-(--b24ui-background-hover)",
      "data-[selected]:bg-(--b24ui-background)",
      "data-today:not-data-[selected]:text-(--b24ui-background)",
      "data-[highlighted]:bg-(--b24ui-background)",
      "data-[highlighted]:text-(--b24ui-color)",
      "hover:not-data-[disabled]:not-data-[selected]:bg-(--b24ui-background)",
      "hover:not-data-[disabled]:not-data-[selected]:text-(--b24ui-color)",
      "data-unavailable:line-through",
      "data-unavailable:pointer-events-none",
      "data-today:font-(--ui-font-weight-semi-bold)",
      "transition"
    ].join(" ")
  },
  variants: {
    color: {
      "air-primary": { root: "style-filled" },
      "air-primary-success": { root: "style-filled-success" },
      "air-primary-alert": { root: "style-filled-alert" },
      "air-primary-copilot": { root: "style-filled-copilot" },
      "air-primary-warning": { root: "style-filled-warning" },
      // @deprecate ////
      "default": { root: "style-old-default" },
      "danger": { root: "style-old-danger" },
      "success": { root: "style-old-success" },
      "warning": { root: "style-old-warning" },
      "primary": { root: "style-old-primary" },
      "secondary": { root: "style-old-secondary" },
      "collab": { root: "style-old-collab" },
      "ai": { root: "style-old-ai" }
    },
    size: {
      xs: {
        heading: "text-(length:--ui-font-size-md)",
        cell: "text-(length:--ui-font-size-sm)",
        headCell: "text-[10px]",
        cellTrigger: "size-[28px]",
        body: "space-y-2 pt-2"
      },
      sm: {
        heading: "text-(length:--ui-font-size-md)",
        headCell: "text-(length:--ui-font-size-sm)",
        cell: "text-(length:--ui-font-size-sm)",
        cellTrigger: "size-[28px]"
      },
      md: {
        heading: "text-(length:--ui-font-size-lg)",
        headCell: "text-(length:--ui-font-size-md)",
        cell: "text-(length:--ui-font-size-md)",
        cellTrigger: "size-[32px]"
      },
      lg: {
        heading: "text-(length:--ui-font-size-2xl)",
        headCell: "text-(length:--ui-font-size-lg)",
        cell: "text-(length:--ui-font-size-lg)",
        cellTrigger: "size-[36px] text-(length:--ui-font-size-lg)"
      }
    }
  },
  defaultVariants: {
    size: "md",
    color: "air-primary"
  }
};

const card$1 = {
  slots: {
    root: [
      "overflow-hidden",
      "rounded-(--ui-border-radius-md)"
    ].join(" "),
    header: "p-[24px] sm:px-[22px] sm:py-[15px]",
    body: "p-[24px] sm:px-[22px] sm:py-[15px]",
    footer: "p-[24px] sm:px-[22px] sm:py-[15px]"
  },
  variants: {
    variant: {
      "filled": {
        root: [
          "bg-(--ui-color-design-filled-bg)",
          "border border-(--ui-color-design-filled-stroke) border-(length:--ui-design-filled-stroke-weight)",
          "text-(--ui-color-design-filled-content)"
        ].join(" "),
        header: "border-b border-(--ui-color-design-filled-content-divider) border-b-1",
        footer: "border-t border-(--ui-color-design-filled-content-divider) border-t-1"
      },
      "filled-success": {
        root: [
          "bg-(--ui-color-design-filled-success-bg)",
          "border border-(--ui-color-design-filled-success-stroke) border-(length:--ui-design-filled-success-stroke-weight)",
          "text-(--ui-color-design-filled-success-content)"
        ].join(" "),
        header: "border-b border-(--ui-color-design-filled-success-content-divider) border-b-1",
        footer: "border-t border-(--ui-color-design-filled-success-content-divider) border-t-1"
      },
      "filled-alert": {
        root: [
          "bg-(--ui-color-design-filled-alert-bg)",
          "border border-(--ui-color-design-filled-alert-stroke) border-(length:--ui-design-filled-alert-stroke-weight)",
          "text-(--ui-color-design-filled-alert-content)"
        ].join(" "),
        header: "border-b border-(--ui-color-design-filled-alert-content-divider) border-b-1",
        footer: "border-t border-(--ui-color-design-filled-alert-content-divider) border-t-1"
      },
      "filled-warning": {
        root: [
          "bg-(--ui-color-design-filled-warning-bg)",
          "border border-(--ui-color-design-filled-warning-stroke) border-(length:--ui-design-filled-warning-stroke-weight)",
          "text-(--ui-color-design-filled-warning-content)"
        ].join(" "),
        header: "border-b border-(--ui-color-design-filled-warning-content-divider) border-b-1",
        footer: "border-t border-(--ui-color-design-filled-warning-content-divider) border-t-1"
      },
      "filled-copilot": {
        root: [
          "bg-(--ui-color-design-filled-copilot-bg)",
          "border border-(--ui-color-design-filled-copilot-stroke) border-(length:--ui-design-filled-copilot-stroke-weight)",
          "text-(--ui-color-design-filled-copilot-content)"
        ].join(" "),
        header: "border-b border-(--ui-color-design-filled-copilot-content-divider) border-b-1",
        footer: "border-t border-(--ui-color-design-filled-copilot-content-divider) border-t-1"
      },
      "filled-no-accent": {
        root: [
          "bg-(--ui-color-design-filled-na-bg)",
          "border border-(--ui-color-design-filled-na-stroke) border-(length:--ui-design-filled-na-stroke-weight)",
          "text-(--ui-color-design-filled-na-content)"
        ].join(" "),
        header: "border-b border-(--ui-color-design-filled-na-content-divider) border-b-1",
        footer: "border-t border-(--ui-color-design-filled-na-content-divider) border-t-1"
      },
      "filled-black": {
        root: [
          "bg-(--ui-color-design-filled-black-bg)",
          "border border-(--ui-color-design-filled-black-stroke) border-(length:--ui-design-filled-black-stroke-weight)",
          "text-(--ui-color-design-filled-black-content)"
        ].join(" "),
        header: "border-b border-(--ui-color-design-filled-black-content-divider) border-b-1",
        footer: "border-t border-(--ui-color-design-filled-black-content-divider) border-t-1"
      },
      "tinted": {
        root: [
          "bg-(--ui-color-design-tinted-bg)",
          "border border-(--ui-color-design-tinted-stroke) border-(length:--ui-design-tinted-stroke-weight)",
          "text-(--ui-color-design-tinted-content)"
        ].join(" "),
        header: "border-b border-(--ui-color-design-tinted-content-divider) border-b-1",
        footer: "border-t border-(--ui-color-design-tinted-content-divider) border-t-1"
      },
      "tinted-alt": {
        root: [
          "bg-(--ui-color-design-tinted-bg-alt)",
          "border border-(--ui-color-design-tinted-stroke) border-(length:--ui-design-tinted-stroke-weight)",
          "text-(--ui-color-design-tinted-content)"
        ].join(" "),
        header: "border-b border-(--ui-color-design-tinted-content-divider) border-b-1",
        footer: "border-t border-(--ui-color-design-tinted-content-divider) border-t-1"
      },
      "tinted-accent-1": {
        root: [
          "bg-(--ui-color-design-tinted-a1-bg)",
          "border border-(--ui-color-design-tinted-a1-stroke) border-(length:--ui-design-tinted-a1-stroke-weight)",
          "text-(--ui-color-design-tinted-a1-content)"
        ].join(" "),
        header: "border-b border-(--ui-color-design-tinted-a1-content-divider) border-b-1",
        footer: "border-t border-(--ui-color-design-tinted-a1-content-divider) border-t-1"
      },
      "tinted-success": {
        root: [
          "bg-(--ui-color-design-tinted-success-bg)",
          "border border-(--ui-color-design-tinted-success-stroke) border-(length:--ui-design-tinted-success-stroke-weight)",
          "text-(--ui-color-design-tinted-success-content)"
        ].join(" "),
        header: "border-b border-(--ui-color-design-tinted-success-content-divider) border-b-1",
        footer: "border-t border-(--ui-color-design-tinted-success-content-divider) border-t-1"
      },
      "tinted-alert": {
        root: [
          "bg-(--ui-color-design-tinted-alert-bg)",
          "border border-(--ui-color-design-tinted-alert-stroke) border-(length:--ui-design-tinted-alert-stroke-weight)",
          "text-(--ui-color-design-tinted-alert-content)"
        ].join(" "),
        header: "border-b border-(--ui-color-design-tinted-alert-content-divider) border-b-1",
        footer: "border-t border-(--ui-color-design-tinted-alert-content-divider) border-t-1"
      },
      "tinted-warning": {
        root: [
          "bg-(--ui-color-design-tinted-warning-bg)",
          "border border-(--ui-color-design-tinted-warning-stroke) border-(length:--ui-design-tinted-warning-stroke-weight)",
          "text-(--ui-color-design-tinted-warning-content)"
        ].join(" "),
        header: "border-b border-(--ui-color-design-tinted-warning-content-divider) border-b-1",
        footer: "border-t border-(--ui-color-design-tinted-warning-content-divider) border-t-1"
      },
      "tinted-no-accent": {
        root: [
          "bg-(--ui-color-design-tinted-na-bg)",
          "border border-(--ui-color-design-tinted-na-stroke) border-(length:--ui-design-tinted-na-stroke-weight)",
          "text-(--ui-color-design-tinted-na-content)"
        ].join(" "),
        header: "border-b border-(--ui-color-design-tinted-na-content-divider) border-b-1",
        footer: "border-t border-(--ui-color-design-tinted-na-content-divider) border-t-1"
      },
      "outline": {
        root: [
          "bg-(--ui-color-design-outline-bg)",
          "border border-(--ui-color-design-outline-stroke) border-(length:--ui-design-outline-stroke-weight)",
          "text-(--ui-color-design-outline-content)"
        ].join(" "),
        header: "border-b border-(--ui-color-design-outline-content-divider) border-b-1",
        footer: "border-t border-(--ui-color-design-outline-content-divider) border-t-1"
      },
      "outline-alt": {
        root: [
          "bg-(--ui-color-design-outline-bg-alt)",
          "border border-(--ui-color-design-outline-content-divider) border-(length:--ui-design-outline-stroke-weight-alt)",
          "text-(--ui-color-design-outline-content)"
        ].join(" "),
        header: "border-b border-(--ui-color-design-outline-content-divider) border-b-1",
        footer: "border-t border-(--ui-color-design-outline-content-divider) border-t-1"
      },
      "outline-accent": {
        root: [
          "bg-(--ui-color-design-outline-a1-bg)",
          "border border-(--ui-color-design-outline-a1-stroke) border-(length:--ui-design-outline-a1-stroke-weight)",
          "text-(--ui-color-design-outline-a1-content)"
        ].join(" "),
        header: "border-b border-(--ui-color-design-outline-a1-content-divider) border-b-1",
        footer: "border-t border-(--ui-color-design-outline-a1-content-divider) border-t-1"
      },
      "outline-accent-2": {
        root: [
          "bg-(--ui-color-design-outline-a2-bg)",
          "border border-(--ui-color-design-outline-a2-stroke) border-(length:--ui-design-outline-a2-stroke-weight)",