import { statusToColorMap_default } from './chunk-FCFWJ4SP.js';
import XMarkIcon from '@heroicons/react/20/solid/XMarkIcon';
import { extendTailwindMerge, twMerge as twMerge$1 } from 'tailwind-merge';
import { transform, map, mergeWith, get, pick } from 'lodash-es';
import { createClassed, classed as classed$1, deriveClassed } from '@tw-classed/react';
import { createClassed as createClassed$1 } from '@tw-classed/core';
import clsx4 from 'clsx';
import createVariatGroupTransfomer from 'tailwind-group-variant';
import React, { useState } from 'react';
import { jsx, jsxs } from 'react/jsx-runtime';

var twMerge = extendTailwindMerge({
  classGroups: {
    "font-size": [
      {
        // Fixes incorect merging of text size
        text: ["h1", "h2", "h3", "h4", "h5", "h6"]
      }
    ]
  }
});
var { classed } = createClassed({ merger: twMerge });
createClassed$1({ merger: twMerge });
var classedVariantMap = (variantMap) => variantMap;
function generateCompoundVariants(compoundVariantPropMap) {
  const { commonVariantProps, compoundVariantMapLists } = transform(
    compoundVariantPropMap,
    (result, value, key) => {
      if (typeof value === "boolean" || typeof value === "string") {
        result.commonVariantProps[key] = value;
        return result;
      }
      const compoundVariantMapList = map(value, (className, variantMapKey) => ({
        [key]: variantMapKey,
        class: className
      }));
      result.compoundVariantMapLists.push(compoundVariantMapList);
      return result;
    },
    {
      commonVariantProps: {},
      compoundVariantMapLists: []
    }
  );
  return compoundVariantMapLists.flat().map(({ class: cls, ...props }) => {
    return {
      ...commonVariantProps,
      class: twMerge(cls, compoundVariantPropMap.className),
      ...props
    };
  });
}

// src/utils/notEmpty.ts
function notEmpty(value) {
  return value !== null && value !== void 0;
}

// src/utils/classed/expandVariant.ts
createVariatGroupTransfomer({});
function mergeVariants(variants, overrides) {
  const variantArray = Array.isArray(variants) ? variants : Object.values(variants);
  const mergerFn = (objectValue, sourceValue) => twMerge$1(`${objectValue || ""}`, `${sourceValue}`);
  const mergedVariants = mergeWith({}, ...[...variantArray, overrides], mergerFn);
  return mergedVariants;
}
var colorVariants = {
  textBgContrast: {
    primary: clsx4("text-content-inverse-intense"),
    neutral: clsx4("text-content-inverse-intense"),
    inverse: clsx4("text-content-inverse-intense dark:text-surface-inverse-50"),
    success: clsx4("text-content-inverse-intense"),
    danger: clsx4("text-content-inverse-intense"),
    caution: clsx4("text-content-inverse-intense"),
    surface: clsx4("text-content-moderate dark:text-content-inverse-intense"),
    "various-blue": clsx4("text-content-inverse-intense"),
    "various-emerald": clsx4("text-content-inverse-intense"),
    "various-orange": clsx4("text-content-inverse-intense"),
    "various-fuchsia": clsx4("text-content-inverse-intense"),
    "various-yellow": clsx4("text-content-inverse-intense"),
    "various-rose": clsx4("text-content-inverse-intense"),
    "various-cyan": clsx4("text-content-inverse-intense"),
    "various-violet": clsx4("text-content-inverse-intense"),
    "various-teal": clsx4("text-content-inverse-intense"),
    "various-pink": clsx4("text-content-inverse-intense"),
    "various-lime": clsx4("text-content-inverse-intense"),
    "various-gray": clsx4("text-content-inverse-intense")
  },
  bg: {
    primary: clsx4("bg-primary"),
    neutral: clsx4("bg-neutral-600"),
    success: clsx4("bg-success"),
    danger: clsx4("bg-danger"),
    caution: clsx4("bg-caution"),
    inverse: clsx4("bg-neutral-900", "dark:bg-content-inverse-intense"),
    surface: clsx4("bg-surface dark:bg-surface-inverse-100"),
    "surface-soft": clsx4("bg-surface-soft", "dark:bg-surface-inverse-soft"),
    "surface-light": clsx4("bg-surface-light", "dark:bg-surface-inverse-light"),
    "surface-dark": clsx4("bg-surface-dark", "dark:bg-surface-inverse-dark"),
    "various-blue": clsx4("bg-palette-various-blue"),
    "various-emerald": clsx4("bg-palette-various-emerald"),
    "various-orange": clsx4("bg-palette-various-orange"),
    "various-fuchsia": clsx4("bg-palette-various-fuchsia"),
    "various-yellow": clsx4("bg-palette-various-yellow"),
    "various-rose": clsx4("bg-palette-various-rose"),
    "various-cyan": clsx4("bg-palette-various-cyan"),
    "various-violet": clsx4("bg-palette-various-violet"),
    "various-teal": clsx4("bg-palette-various-teal"),
    "various-pink": clsx4("bg-palette-various-pink"),
    "various-lime": clsx4("bg-palette-various-lime"),
    "various-gray": clsx4("bg-palette-various-gray")
  },
  bgHighlight: {
    primary: clsx4("bg-primary-light/10"),
    neutral: clsx4("bg-neutral-400/10"),
    success: clsx4("bg-success-light/10"),
    danger: clsx4("bg-danger-light/10"),
    caution: clsx4("bg-caution-light/10"),
    "various-blue": clsx4("bg-palette-various-blue-light/10"),
    "various-emerald": clsx4("bg-palette-various-emerald-light/10"),
    "various-orange": clsx4("bg-palette-various-orange-light/10"),
    "various-fuchsia": clsx4("bg-palette-various-fuchsia-light/10"),
    "various-yellow": clsx4("bg-palette-various-yellow-light/10"),
    "various-rose": clsx4("bg-palette-various-rose-light/10"),
    "various-cyan": clsx4("bg-palette-various-cyan-light/10"),
    "various-violet": clsx4("bg-palette-various-violet-light/10"),
    "various-teal": clsx4("bg-palette-various-teal-light/10"),
    "various-pink": clsx4("bg-palette-various-pink-light/10"),
    "various-lime": clsx4("bg-palette-various-lime-light/10"),
    "various-gray": clsx4("bg-palette-various-gray-light/10"),
    inverse: clsx4("bg-surface-inverse/10", "dark:bg-surface/10"),
    surface: clsx4("bg-surface/10", "dark:bg-surface-inverse-50/30")
  },
  bgHoverHighlightDark: {
    primary: clsx4("hover:bg-primary-light/20"),
    neutral: clsx4("hover:bg-neutral-400/20"),
    success: clsx4("hover:bg-success-light/20"),
    danger: clsx4("hover:bg-danger-light/20"),
    caution: clsx4("hover:bg-caution-light/20"),
    "various-blue": clsx4("hover:bg-palette-various-blue-light/20"),
    "various-emerald": clsx4("hover:bg-palette-various-emerald-light/20"),
    "various-orange": clsx4("hover:bg-palette-various-orange-light/20"),
    "various-fuchsia": clsx4("hover:bg-palette-various-fuchsia-light/20"),
    "various-yellow": clsx4("hover:bg-palette-various-yellow-light/20"),
    "various-rose": clsx4("hover:bg-palette-various-rose-light/20"),
    "various-cyan": clsx4("hover:bg-palette-various-cyan-light/20"),
    "various-violet": clsx4("hover:bg-palette-various-violet-light/20"),
    "various-teal": clsx4("hover:bg-palette-various-teal-light/20"),
    "various-pink": clsx4("hover:bg-palette-various-pink-light/20"),
    "various-lime": clsx4("hover:bg-palette-various-lime-light/20"),
    "various-gray": clsx4("hover:bg-palette-various-gray-light/20"),
    inverse: clsx4("hover:bg-surface-inverse/20", "dark:hover:bg-surface/20"),
    surface: clsx4("hover:bg-surface/20", "dark:hover:bg-surface-inverse-soft/20")
  },
  hoverDark: {
    primary: clsx4("hover:bg-primary-dark"),
    neutral: clsx4("hover:bg-neutral-600"),
    success: clsx4("hover:bg-success-dark"),
    danger: clsx4("hover:bg-danger-dark"),
    caution: clsx4("hover:bg-caution-dark"),
    inverse: clsx4("hover:bg-surface-inverse-dark dark:hover:bg-surface-dark"),
    surface: clsx4("hover:bg-surface-100 hover:dark:bg-surface-inverse-400"),
    "surface-soft": clsx4("hover:bg-surface-light", "hover:dark:bg-surface-inverse-light"),
    "surface-light": clsx4("hover:bg-surface-dark", "hover:dark:bg-surface-inverse-dark"),
    "surface-dark": clsx4("hover:bg-surface-900", "hover:dark:bg-surface-inverse-900"),
    "various-blue": clsx4("hover:bg-palette-various-blue-dark"),
    "various-emerald": clsx4("hover:bg-palette-various-emerald-dark"),
    "various-orange": clsx4("hover:bg-palette-various-orange-dark"),
    "various-fuchsia": clsx4("hover:bg-palette-various-fuchsia-dark"),
    "various-yellow": clsx4("hover:bg-palette-various-yellow-dark"),
    "various-rose": clsx4("hover:bg-palette-various-rose-dark"),
    "various-cyan": clsx4("hover:bg-palette-various-cyan-dark"),
    "various-violet": clsx4("hover:bg-palette-various-violet-dark"),
    "various-teal": clsx4("hover:bg-palette-various-teal-dark"),
    "various-pink": clsx4("hover:bg-palette-various-pink-dark"),
    "various-lime": clsx4("hover:bg-palette-various-lime-dark"),
    "various-gray": clsx4("hover:bg-palette-various-gray-dark")
  },
  border: {
    primary: clsx4("border-primary"),
    neutral: clsx4("border-neutral"),
    success: clsx4("border-success"),
    danger: clsx4("border-danger"),
    caution: clsx4("border-caution"),
    surface: clsx4("border-black/20 dark:border-white/20"),
    inverse: clsx4("border-black/10 dark:border-white/60"),
    "various-blue": clsx4("border-palette-various-blue"),
    "various-emerald": clsx4("border-palette-various-emerald"),
    "various-orange": clsx4("border-palette-various-orange"),
    "various-fuchsia": clsx4("border-palette-various-fuchsia"),
    "various-yellow": clsx4("border-palette-various-yellow"),
    "various-rose": clsx4("border-palette-various-rose"),
    "various-cyan": clsx4("border-palette-various-cyan"),
    "various-violet": clsx4("border-palette-various-violet"),
    "various-teal": clsx4("border-palette-various-teal"),
    "various-pink": clsx4("border-palette-various-pink"),
    "various-lime": clsx4("border-palette-various-lime"),
    "various-gray": clsx4("border-palette-various-gray")
  },
  focusBorder: {
    neutral: clsx4("focus:border-neutral-light"),
    primary: clsx4("focus:border-primary-light"),
    success: clsx4("focus:border-success-light"),
    danger: clsx4("focus:border-danger-light"),
    caution: clsx4("focus:border-caution-light"),
    inverse: clsx4("focus:border-surface-inverse dark:focus:border-surface"),
    surface: clsx4(""),
    "various-blue": clsx4("focus:border-palette-various-blue"),
    "various-emerald": clsx4("focus:border-palette-various-emerald"),
    "various-orange": clsx4("focus:border-palette-various-orange"),
    "various-fuchsia": clsx4("focus:border-palette-various-fuchsia"),
    "various-yellow": clsx4("focus:border-palette-various-yellow"),
    "various-rose": clsx4("focus:border-palette-various-rose"),
    "various-cyan": clsx4("focus:border-palette-various-cyan"),
    "various-violet": clsx4("focus:border-palette-various-violet"),
    "various-teal": clsx4("focus:border-palette-various-teal"),
    "various-pink": clsx4("focus:border-palette-various-pink"),
    "various-lime": clsx4("focus:border-palette-various-lime"),
    "various-gray": clsx4("focus:border-palette-various-gray")
  },
  focusRing: {
    neutral: clsx4("focus:ring-neutral"),
    primary: clsx4("focus:ring-primary"),
    success: clsx4("focus:ring-success"),
    danger: clsx4("focus:ring-danger"),
    caution: clsx4("focus:ring-caution"),
    surface: clsx4("focus:ring-black/10 dark:focus:ring-white/10"),
    inverse: clsx4("focus:ring-surface-inverse dark:focus:ring-surface"),
    "various-blue": clsx4("focus:ring-palette-various-blue"),
    "various-emerald": clsx4("focus:ring-palette-various-emerald"),
    "various-orange": clsx4("focus:ring-palette-various-orange"),
    "various-fuchsia": clsx4("focus:ring-palette-various-fuchsia"),
    "various-yellow": clsx4("focus:ring-palette-various-yellow"),
    "various-rose": clsx4("focus:ring-palette-various-rose"),
    "various-cyan": clsx4("focus:ring-palette-various-cyan"),
    "various-violet": clsx4("focus:ring-palette-various-violet"),
    "various-teal": clsx4("focus:ring-palette-various-teal"),
    "various-pink": clsx4("focus:ring-palette-various-pink"),
    "various-lime": clsx4("focus:ring-palette-various-lime"),
    "various-gray": clsx4("focus:ring-palette-various-gray")
  },
  ring: {
    neutral: clsx4("ring-neutral-300 dark:ring-neutral-400"),
    primary: clsx4("ring-primary"),
    success: clsx4("ring-success"),
    danger: clsx4("ring-danger"),
    caution: clsx4("ring-caution"),
    surface: clsx4("dark:ring-surface-inverse-200 ring-black/10"),
    inverse: clsx4("ring-surface-inverse dark:ring-surface"),
    "various-blue": clsx4("ring-palette-various-blue"),
    "various-emerald": clsx4("ring-palette-various-emerald"),
    "various-orange": clsx4("ring-palette-various-orange"),
    "various-fuchsia": clsx4("ring-palette-various-fuchsia"),
    "various-yellow": clsx4("ring-palette-various-yellow"),
    "various-rose": clsx4("ring-palette-various-rose"),
    "various-cyan": clsx4("ring-palette-various-cyan"),
    "various-violet": clsx4("ring-palette-various-violet"),
    "various-teal": clsx4("ring-palette-various-teal"),
    "various-pink": clsx4("ring-palette-various-pink"),
    "various-lime": clsx4("ring-palette-various-lime"),
    "various-gray": clsx4("ring-palette-various-gray")
  },
  fill: {
    primary: clsx4("fill-primary"),
    neutral: clsx4("fill-neutral"),
    "neutral-light": clsx4("fill-neutral-light"),
    success: clsx4("fill-success"),
    danger: clsx4("fill-danger"),
    caution: clsx4("fill-caution"),
    inverse: clsx4("fill-surface-inverse", "dark:fill-surface"),
    surface: clsx4("fill-surface", "dark:fill-surface-inverse-soft"),
    "surface-soft": clsx4("fill-surface-soft", "dark:fill-surface-inverse-soft"),
    "surface-light": clsx4("fill-surface-light", "dark:fill-surface-inverse-light"),
    "surface-dark": clsx4("fill-surface-dark", "dark:fill-surface-inverse-dark"),
    "various-blue": clsx4("fill-palette-various-blue"),
    "various-emerald": clsx4("fill-palette-various-emerald"),
    "various-orange": clsx4("fill-palette-various-orange"),
    "various-fuchsia": clsx4("fill-palette-various-fuchsia"),
    "various-yellow": clsx4("fill-palette-various-yellow"),
    "various-rose": clsx4("fill-palette-various-rose"),
    "various-cyan": clsx4("fill-palette-various-cyan"),
    "various-violet": clsx4("fill-palette-various-violet"),
    "various-teal": clsx4("fill-palette-various-teal"),
    "various-pink": clsx4("fill-palette-various-pink"),
    "various-lime": clsx4("fill-palette-various-lime"),
    "various-gray": clsx4("fill-palette-various-gray"),
    transparent: clsx4("fill-transparent")
  },
  shadow: {
    primary: clsx4("shadow-primary/50", "dark:shadow-primary-800/60"),
    neutral: clsx4("shadow-neutral-500/50", "dark:shadow-neutral-800/80"),
    success: clsx4("shadow-success/50", "dark:shadow-success-800/60"),
    danger: clsx4("shadow-danger/50", "dark:shadow-danger-800/60"),
    caution: clsx4("shadow-caution/50", "dark:shadow-caution-800/60"),
    inverse: clsx4("shadow-surface-inverse/50", "dark:shadow-surface-inverse-50/80"),
    surface: clsx4("shadow-surface-800", "dark:shadow-neutral-800/80"),
    "surface-soft": clsx4("shadow-surface-soft/50", "dark:shadow-surface-soft/60"),
    "surface-light": clsx4("shadow-surface-light/50", "dark:shadow-surface-light/60"),
    "surface-dark": clsx4("shadow-surface-dark/50", "dark:shadow-surface-dark/60"),
    "various-blue": clsx4(
      "shadow-palette-various-blue/50",
      "dark:shadow-palette-various-blue-800/60"
    ),
    "various-emerald": clsx4(
      "shadow-palette-various-emerald/50",
      "dark:shadow-palette-various-emerald-800/60"
    ),
    "various-orange": clsx4(
      "shadow-palette-various-orange/50",
      "dark:shadow-palette-various-orange-800/60"
    ),
    "various-fuchsia": clsx4(
      "shadow-palette-various-fuchsia/50",
      "dark:shadow-palette-various-fuchsia-800/60"
    ),
    "various-yellow": clsx4(
      "shadow-palette-various-yellow/50",
      "dark:shadow-palette-various-yellow-800/60"
    ),
    "various-rose": clsx4(
      "shadow-palette-various-rose/50",
      "dark:shadow-palette-various-rose-800/60"
    ),
    "various-cyan": clsx4(
      "shadow-palette-various-cyan/50",
      "dark:shadow-palette-various-cyan-800/60"
    ),
    "various-violet": clsx4(
      "shadow-palette-various-violet/50",
      "dark:shadow-palette-various-violet-800/60"
    ),
    "various-teal": clsx4(
      "shadow-palette-various-teal/50",
      "dark:shadow-palette-various-teal-800/60"
    ),
    "various-pink": clsx4(
      "shadow-palette-various-pink/50",
      "dark:shadow-palette-various-pink-800/60"
    ),
    "various-lime": clsx4(
      "shadow-palette-various-lime/50",
      "dark:shadow-palette-various-lime-800/60"
    ),
    "various-gray": clsx4(
      "shadow-palette-various-gray/50",
      "dark:shadow-palette-various-gray-800/60"
    )
  },
  gradient: {
    primary: clsx4("from-primary-300 via-primary-500  to-primary-700"),
    neutral: clsx4(
      "from-neutral-300 via-neutral-400  to-neutral-700",
      "dark:to-surface-inverse dark:from-neutral-300  dark:via-neutral-600"
    ),
    success: clsx4("from-success-300 via-success-500  to-success-700"),
    danger: clsx4("from-danger-300 via-danger-500  to-danger-600"),
    caution: clsx4("from-caution-300 via-caution-500  to-caution-600"),
    "various-blue": clsx4(
      "from-palette-various-blue-300 via-palette-various-blue-500  to-palette-various-blue-600"
    ),
    "various-emerald": clsx4(
      "from-palette-various-emerald-300 via-palette-various-emerald-500  to-palette-various-emerald-600"
    ),
    "various-orange": clsx4(
      "from-palette-various-orange-300 via-palette-various-orange-500  to-palette-various-orange-600"
    ),
    "various-fuchsia": clsx4(
      "from-palette-various-fuchsia-300 via-palette-various-fuchsia-500  to-palette-various-fuchsia-600"
    ),
    "various-yellow": clsx4(
      "from-palette-various-yellow-300 via-palette-various-yellow-500  to-palette-various-yellow-600"
    ),
    "various-rose": clsx4(
      "from-palette-various-rose-300 via-palette-various-rose-500  to-palette-various-rose-600"
    ),
    "various-cyan": clsx4(
      "from-palette-various-cyan-300 via-palette-various-cyan-500  to-palette-various-cyan-600"
    ),
    "various-violet": clsx4(
      "from-palette-various-violet-300 via-palette-various-violet-500  to-palette-various-violet-600"
    ),
    "various-teal": clsx4(
      "from-palette-various-teal-300 via-palette-various-teal-500  to-palette-various-teal-600"
    ),
    "various-pink": clsx4(
      "from-palette-various-pink-300 via-palette-various-pink-500  to-palette-various-pink-600"
    ),
    "various-lime": clsx4(
      "from-palette-various-lime-300 via-palette-various-lime-500  to-palette-various-lime-600"
    ),
    "various-gray": clsx4(
      "from-palette-various-gray-300 via-palette-various-gray-500  to-palette-various-gray-600"
    ),
    inverse: clsx4(
      "to-surface-inverse from-neutral-300",
      "dark:from-surface-50  dark:to-neutral-400 "
    ),
    surface: clsx4(
      "from-surface-50  via-surface-200 to-surface-900",
      "dark:via-surface-inverse-300 dark:to-surface-inverse-900 dark:from-neutral-500"
    ),
    "surface-soft": clsx4(
      "from-surface-soft",
      "dark:from-surface-inverse-soft dark:to-surface-inverse-soft"
    ),
    "surface-light": clsx4(
      "from-surface-light",
      "dark:from-surface-inverse-light dark:to-surface-inverse-light"
    ),
    "surface-dark": clsx4(
      "from-surface-dark",
      "dark:from-surface-inverse-dark dark:to-surface-inverse-dark"
    )
  }
};
var colorToTWTokenMap = {
  primary: "primary",
  danger: "danger",
  success: "success",
  caution: "caution",
  inverse: "inverse",
  surface: "surface",
  neutral: "neutral",
  blue: "various-blue",
  green: "various-emerald",
  red: "various-red",
  yellow: "various-yellow",
  orange: "various-orange",
  fuchsia: "various-fuchsia",
  rose: "various-rose",
  cyan: "various-cyan",
  violet: "various-violet",
  teal: "various-teal",
  pink: "various-pink",
  lime: "various-lime",
  gray: "various-gray"
};
({
  primary: "filled-accent-primary",
  secondary: "filled-accent-secondary",
  inverse: "filled-accent-inverse",
  heart: "filled-accent-heart",
  info: "filled-accent-info",
  success: "filled-accent-success",
  danger: "filled-accent-danger",
  caution: "filled-accent-caution",
  surface: "filled-accent-surface",
  blue: clsx4("filled-accent-palette-various-blue"),
  neutral: clsx4("filled-accent-palette-various-neutral"),
  green: clsx4("filled-accent-palette-various-green"),
  red: clsx4("filled-accent-palette-various-red"),
  yellow: clsx4("filled-accent-palette-various-yellow"),
  orange: clsx4("filled-accent-palette-various-orange"),
  fuchsia: clsx4("filled-accent-palette-various-fuchsia"),
  rose: clsx4("filled-accent-palette-various-rose"),
  cyan: clsx4("filled-accent-palette-various-cyan"),
  violet: clsx4("filled-accent-palette-various-violet"),
  teal: clsx4("filled-accent-palette-various-teal"),
  pink: clsx4("filled-accent-palette-various-pink"),
  lime: clsx4("filled-accent-palette-various-lime"),
  gray: clsx4("filled-accent-palette-various-gray")
});

// src/utils/hash.ts
function stringToArrayElement(str, arr, fallback) {
  if (!str)
    return fallback;
  const hash = hashCode(str);
  const index = Math.abs(hash % arr.length);
  return arr[index];
}
function hashCode(s) {
  const A = 54059;
  const B = 76963;
  const C = 86969;
  const hash = 37;
  let h = hash;
  for (let i = 0; i < s.length; i++) {
    h = h * A ^ s.charCodeAt(i) * B;
  }
  h = h * C % 4294967296;
  return h;
}

// src/utils/stringToDistinctColorClass.ts
var distinctColors = {
  bg: {
    fallback: "bg-neutral-500",
    colors: [
      "bg-palette-various-blue",
      "bg-palette-various-emerald",
      "bg-palette-various-orange",
      "bg-palette-various-fuchsia",
      "bg-palette-various-yellow",
      "bg-palette-various-rose",
      "bg-palette-various-cyan",
      "bg-palette-various-violet",
      "bg-palette-various-teal",
      "bg-palette-various-pink",
      "bg-palette-various-lime",
      "bg-palette-various-gray"
    ]
  },
  text: {
    fallback: "text-neutral-500",
    colors: [
      "text-palette-various-blue",
      "text-palette-various-emerald",
      "text-palette-various-orange",
      "text-palette-various-fuchsia",
      "text-palette-various-yellow",
      "text-palette-various-rose",
      "text-palette-various-cyan",
      "text-palette-various-violet",
      "text-palette-various-teal",
      "text-palette-various-pink",
      "text-palette-various-lime",
      "text-palette-various-gray"
    ]
  }
};
function stringToDistinctColorClass(str, classTokensMap, options) {
  const { forceDefaultClass } = options ?? {};
  const classTokenKeys = Object.entries(classTokensMap).map(([key, value]) => {
    return value ? key : void 0;
  }).filter(notEmpty);
  const classArr = classTokenKeys.map((key) => {
    const { colors, fallback: defaultFallback } = distinctColors[key];
    const defaultClassTokenValue = classTokensMap[key];
    const defaultClassToken = typeof defaultClassTokenValue === "string" ? defaultClassTokenValue : void 0;
    const fallback = defaultClassToken ?? defaultFallback;
    if (forceDefaultClass) {
      return fallback;
    }
    const element = stringToArrayElement(str, colors, fallback);
    return element;
  });
  return classArr.join(" ");
}
async function fetchStatusColor(label, picked) {
  if (!label)
    return void 0;
  const response = await import('./statusToColorMap-BJSWR7PY.js');
  const { default: statusColorMap } = response;
  function getColorName() {
    const word = label?.toLowerCase() ?? "";
    if (word in statusColorMap) {
      return get(statusColorMap, word);
    }
    const wordParts = word.split(" ");
    const wordMatch = wordParts.find((word2) => word2 in statusToColorMap_default);
    return wordMatch ? get(statusColorMap, wordMatch) : void 0;
  }
  const colorName = getColorName();
  if (!colorName)
    return void 0;
  const colorToken = get(colorToTWTokenMap, colorName);
  if (!colorToken)
    return void 0;
  const colors = mergeVariants(pick(colorVariants, Object.keys(picked)));
  const colorClass = get(colors, colorToken) || void 0;
  return colorClass;
}
var sizeVariants = {
  width: {
    xs: clsx4("w-28"),
    sm: clsx4("w-34"),
    md: clsx4("w-40"),
    lg: clsx4("w-48")
  },
  height: {
    xs: clsx4("h-28"),
    sm: clsx4("h-34"),
    md: clsx4("h-40"),
    lg: clsx4("h-48")
  },
  inlineWidth: {
    xs: clsx4("w-16 text-xs"),
    sm: clsx4("w-20 text-xs"),
    md: clsx4("w-22 text-xs"),
    lg: clsx4("w-26 text-xs")
  },
  inlineHeight: {
    xs: clsx4("h-16 text-xs"),
    sm: clsx4("h-20 text-xs"),
    md: clsx4("h-22 text-xs"),
    lg: clsx4("h-26 text-xs")
  },
  textSize: {
    xs: "text-xs",
    sm: "text-sm",
    md: "text-md",
    lg: "text-lg"
  },
  lineHeight: {
    xs: "leading-xs",
    sm: "leading-sm",
    md: "leading-md",
    lg: "leading-lg"
  },
  paddingY: {
    xs: "py-4",
    sm: "py-6",
    md: "py-8",
    lg: "py-10"
  },
  paddingX: {
    xs: clsx4("px-4"),
    sm: clsx4("px-6"),
    md: clsx4("px-8"),
    lg: clsx4("px-10")
  },
  extraPaddingX: {
    xs: clsx4("px-14"),
    sm: clsx4("px-16"),
    md: clsx4("px-18"),
    lg: clsx4("px-20")
  }
};

// src/styles/input-component.variants.ts
var inputComponentVariants = classedVariantMap({
  size: sizeVariants,
  rounded: {
    roundedLeft: "rounded-r-0 rounded-l-md",
    roundedRight: "rounded-l-0 rounded-r-md",
    rounded: "rounded-md"
  }
});
classed$1("div", {
  variants: {
    orientation: {
      horizontal: "inline-flex flex-row items-center ",
      vertical: "flex flex-col justify-center"
    }
  }
});
var inputComponentWidths = {
  xs: clsx4("w-168"),
  sm: clsx4("w-184"),
  md: clsx4("w-216"),
  lg: clsx4("w-400")
};
var inputComponentMinWidths = {
  none: "",
  xs: clsx4("min-w-[168px]"),
  sm: clsx4("min-w-[184px]"),
  md: clsx4("min-w-[216px]"),
  lg: clsx4("min-w-[400px]")
};
classed$1("div", {
  variants: {
    size: {
      xs: "",
      sm: "",
      md: "",
      lg: ""
    },
    minWidth: inputComponentMinWidths,
    width: {
      autoWidth: "w-auto",
      fullWidth: "!w-full",
      fixedWidth: ""
    }
  },
  defaultVariants: {
    width: "fixedWidth",
    size: "md"
  },
  compoundVariants: [
    { size: "xs", width: "fixedWidth", class: inputComponentWidths.xs },
    { size: "sm", width: "fixedWidth", class: inputComponentWidths.sm },
    { size: "md", width: "fixedWidth", class: inputComponentWidths.md },
    { size: "lg", width: "fixedWidth", class: inputComponentWidths.lg }
  ]
});
var inputSizeVariants = mergeVariants([
  inputComponentVariants.size.lineHeight,
  inputComponentVariants.size.paddingX,
  inputComponentVariants.size.paddingY,
  inputComponentVariants.size.textSize
]);
classed$1("div", "inline-flex", {
  variants: {
    size: inputSizeVariants
  }
});
var headingTextSize = {
  h1: clsx4("text-h1"),
  h2: clsx4("text-h2"),
  h3: clsx4("text-h3"),
  h4: clsx4("text-h4"),
  h5: clsx4("text-h5"),
  h6: clsx4("text-h6")
};
var textSize = {
  xs: clsx4("text-xs"),
  sm: clsx4("text-sm"),
  md: clsx4("text-md"),
  lg: clsx4("text-lg")
};
var textVariants = {
  fontWeight: {
    regular: clsx4("font-regular"),
    medium: clsx4("font-medium"),
    bold: clsx4("font-bold")
  },
  size: {
    ...textSize,
    ...headingTextSize
  },
  font: {
    body: "font-body",
    heading: "font-heading",
    mono: "font-mono"
  },
  leading: {
    none: clsx4("leading-none"),
    xs: clsx4("leading-xs"),
    sm: clsx4("leading-sm"),
    md: clsx4("leading-md"),
    lg: clsx4("leading-lg"),
    h1: clsx4("leading-h1"),
    h2: clsx4("leading-h2"),
    h3: clsx4("leading-h3"),
    h4: clsx4("leading-h4"),
    h5: clsx4("leading-h5"),
    h6: clsx4("leading-h6")
  },
  spaceY: {
    xs: clsx4("space-y-4"),
    sm: clsx4("space-y-6"),
    md: clsx4("space-y-8"),
    lg: clsx4("space-y-16")
  },
  spaceX: {
    xs: clsx4("space-x-4"),
    sm: clsx4("space-x-6"),
    md: clsx4("space-x-8"),
    lg: clsx4("space-x-16")
  },
  color: {
    inherit: clsx4("text-inherit"),
    current: clsx4("text-current"),
    tint: clsx4("text-content-tint"),
    ghost: clsx4("text-content-ghost"),
    subtle: clsx4("text-content-subtle"),
    medium: clsx4("text-content"),
    weak: clsx4("text-content-weak"),
    moderate: clsx4("text-content-moderate"),
    high: clsx4("text-content-high"),
    intense: clsx4("text-content-intense"),
    strong: clsx4("text-content-intense"),
    inverse: clsx4("text-inverse"),
    danger: clsx4("text-danger")
  },
  align: {
    center: clsx4("text-center"),
    right: clsx4("text-right"),
    left: clsx4("text-left"),
    start: clsx4("text-left"),
    end: clsx4("text-end")
  },
  maxLines: {
    1: "line-clamp-1",
    2: "line-clamp-2",
    3: "line-clamp-3",
    4: "line-clamp-4",
    5: "line-clamp-5",
    6: "line-clamp-6"
  }
};

// src/components/Button/Button.styles.tsx
var buttonVariants = {
  variants: {
    loading: {
      true: "cursor-default"
    },
    cursorPointer: {
      false: "cursor-auto"
    },
    size: mergeVariants(
      [inputComponentVariants.size.paddingX, inputComponentVariants.size.paddingY],
      {
        xs: "text-xs px-6",
        sm: "text-sm",
        md: "text-sm",
        lg: "text-sm"
      }
    ),
    fontWeight: textVariants.fontWeight,
    noWrap: {
      true: "whitespace-nowrap"
    },
    inline: {
      true: "inline"
    },
    justify: {
      center: "justify-center",
      start: "justify-start",
      end: "justify-end"
    },
    fullWidth: {
      true: "w-full"
    },
    hoverable: {
      true: ""
    },
    variant: {
      filled: "",
      outlined: "ring-[1.35px] ring-inset",
      glass: "",
      text: "",
      ghost: ""
    },
    rounded: {
      sm: clsx4("rounded "),
      default: clsx4("rounded"),
      true: "rounded-full"
    },
    gradient: {
      true: ""
    },
    coloredShadow: {
      true: ""
    },
    extraRoundedPadding: {
      true: ""
    },
    color: {
      primary: "",
      secondary: "",
      surface: "",
      inverse: "",
      info: "",
      success: "",
      danger: "",
      caution: "",
      heart: ""
    },
    hoverBackgroundColor: {
      primary: "",
      secondary: "",
      inverse: "",
      info: "",
      success: "",
      danger: "",
      caution: "",
      heart: ""
    },
    backgroundNoise: {
      true: "noisy-surface-texture"
    },
    gap: {
      true: ""
    }
  },
  compoundVariants: [
    ...generateCompoundVariants({
      gap: true,
      size: {
        xs: clsx4("gap-4"),
        sm: clsx4("gap-6"),
        md: clsx4("gap-6"),
        lg: clsx4("gap-6")
      }
    }),
    ...generateCompoundVariants({
      variant: "filled",
      color: {
        primary: "filled-accent-primary",
        secondary: "filled-accent-secondary",
        inverse: "filled-accent-inverse",
        heart: "filled-accent-heart",
        info: "filled-accent-info",
        success: "filled-accent-success",
        danger: "filled-accent-danger",
        caution: "filled-accent-caution"
      }
    }),
    ...generateCompoundVariants({
      variant: "filled",
      hoverable: true,
      color: {
        primary: "filled-hover-accent-primary",
        secondary: "filled-hover-accent-secondary",
        inverse: "filled-hover-accent-inverse",
        heart: "filled-hover-accent-heart",
        info: "filled-hover-accent-info",
        success: "filled-hover-accent-success",
        danger: "filled-hover-accent-danger",
        caution: "filled-hover-accent-caution"
      }
    }),
    ...generateCompoundVariants({
      variant: "filled",
      hoverBackgroundColor: {
        primary: "filled-hover-accent-primary",
        secondary: "filled-hover-accent-secondary",
        inverse: "filled-hover-accent-inverse",
        heart: "filled-hover-accent-heart",
        info: "filled-hover-accent-info",
        success: "filled-hover-accent-success",
        danger: "filled-hover-accent-danger",
        caution: "filled-hover-accent-caution"
      }
    }),
    ...generateCompoundVariants({
      variant: "glass",
      hoverBackgroundColor: {
        primary: "hover:glass-accent-primary",
        secondary: "hover:glass-accent-secondary",
        inverse: "hover:glass-accent-inverse",
        heart: "hover:glass-accent-heart",
        info: "hover:glass-accent-info",
        success: "hover:glass-accent-success",
        danger: "hover:glass-accent-danger",
        caution: "hover:glass-accent-caution"
      }
    }),
    ...generateCompoundVariants({
      variant: "glass",
      className: "overflow-hidden",
      color: {
        primary: "glass-accent-primary",
        secondary: "glass-accent-secondary",
        inverse: "glass-accent-inverse",
        heart: "glass-accent-heart",
        info: "glass-accent-info",
        success: "glass-accent-success",
        danger: "glass-accent-danger",
        caution: "glass-accent-caution"
      }
    }),
    ...generateCompoundVariants({
      variant: "ghost",
      className: "overflow-hidden bg-transparent",
      color: {
        primary: "ghost-accent-primary",
        secondary: "ghost-accent-secondary",
        inverse: "ghost-accent-inverse",
        heart: "ghost-accent-heart",
        info: "ghost-accent-info",
        success: "ghost-accent-success",
        danger: "ghost-accent-danger",
        caution: "ghost-accent-caution"
      }
    }),
    ...generateCompoundVariants({
      variant: "outlined",
      className: "overflow-hidden z-0 bg-surface-soft",
      color: {
        primary: "ring-boundary-weak",
        secondary: "ring-boundary-weak",
        inverse: "text-inverse ring-inverse",
        heart: "text-heart ring-heart",
        info: "text-info ring-info",
        success: "text-success ring-success",
        danger: "text-danger ring-danger",
        caution: "text-caution ring-caution"
      }
    }),
    // Colored Shadow
    ...generateCompoundVariants({
      coloredShadow: true,
      className: clsx4("shadow-lg "),
      color: {
        primary: "shadow-primary/70",
        secondary: "shadow-secondary/70",
        inverse: "shadow-inverse/70",
        heart: "shadow-heart/70",
        info: "shadow-info/70",
        success: "shadow-success/70",
        danger: "shadow-danger/70",
        caution: "shadow-caution/70"
      }
    }),
    // Gradient
    ...generateCompoundVariants({
      gradient: true,
      variant: "filled",
      className: clsx4("border-none transition-all hover:brightness-[1.05]"),
      color: {
        primary: clsx4("bg-gradient-primary-dark-to-light-tr"),
        secondary: clsx4("bg-gradient-secondary-dark-to-light-tr"),
        inverse: clsx4("bg-gradient-inverse-dark-to-light-tr"),
        heart: clsx4("bg-gradient-heart-dark-to-light-tr"),
        info: clsx4("bg-gradient-info-dark-to-light-tr"),
        success: clsx4("bg-gradient-success-dark-to-light-tr"),
        danger: clsx4("bg-gradient-danger-dark-to-light-tr"),
        caution: clsx4("bg-gradient-caution-dark-to-light-tr")
      }
    }),
    // Extra Padding X
    ...generateCompoundVariants({
      rounded: true,
      extraRoundedPadding: true,
      size: sizeVariants.extraPaddingX
    })
  ]
};
var ButtonElement = classed.button(
  "inline-flex font-medium items-center justify-center select-none align-middle",
  "disabled:text-content-tint disabled:cursor-default disabled:pointer-events-none relative",
  "transition-colors duration-100",
  "box-border",
  "shrink-0",
  {
    defaultVariants: {
      size: "md",
      rounded: "default",
      noWrap: true,
      fontWeight: "medium",
      hoverable: true,
      color: "primary",
      justify: "center",
      variant: "filled",
      extraRoundedPadding: true,
      gap: true
    },
    variants: buttonVariants.variants,
    compoundVariants: buttonVariants.compoundVariants
  }
);
var DiscardButtonElement = classed(
  "button",
  "rounded-full focus:ring-opacity-50",
  "hover:bg-black/10 dark:hover:bg-white/10",
  "flex justify-center",
  {
    variants: {
      color: mergeVariants([colorVariants.focusRing])
    }
  }
);
var DiscardButton = deriveClassed((props, ref) => {
  return /* @__PURE__ */ jsx(DiscardButtonElement, { type: "button", ref, ...props, children: /* @__PURE__ */ jsx(XMarkIcon, { className: "h-16 w-16" }) });
});
var StatusBadgeElement = classed(ButtonElement, {
  variants: {
    clickable: {
      true: "cursor-pointer",
      false: "cursor-auto"
    },
    size: mergeVariants([
      inputComponentVariants.size.paddingX,
      inputComponentVariants.size.inlineHeight,
      inputComponentVariants.size.lineHeight,
      inputComponentVariants.size.textSize
    ]),
    rounded: {
      true: "rounded",
      false: "",
      full: "rounded-full"
    }
  },
  defaultVariants: {
    // @ts-expect-error inherited default
    hoverable: false
  }
});
var StatusBadge = ({
  children: childrenProp,
  label: labelProp,
  size,
  color: colorProp = "distinct",
  onClick,
  className,
  onDiscard,
  disabled
}) => {
  const label = labelProp ?? typeof childrenProp === "string" ? childrenProp : void 0;
  const children = childrenProp ?? labelProp;
  const distinctColorClass = stringToDistinctColorClass(label, { bg: true });
  const [colorClass, setColorClass] = useState(void 0);
  const color = colorProp === "distinct" ? void 0 : colorProp;
  React.useLayoutEffect(() => {
    if (colorProp === "distinct") {
      fetchStatusColor(label, { bg: true, text: true }).then((value) => {
        if (value) {
          setColorClass(value);
        } else {
          setColorClass(distinctColorClass);
        }
      }).catch(() => {
      });
    }
  }, [colorProp, distinctColorClass, label]);
  const clickable = Boolean(onClick);
  return /* @__PURE__ */ jsxs(
    StatusBadgeElement,
    {
      clickable,
      size,
      onClick,
      color,
      hoverable: false,
      disabled,
      className: twMerge$1(colorClass, className),
      rounded: "full",
      children: [
        children,
        onDiscard && /* @__PURE__ */ jsx(
          DiscardButton,
          {
            color,
            className: "-mr-2 opacity-70 focus:opacity-100",
            onClick: (e) => {
              e.stopPropagation();
              onDiscard();
            }
          }
        )
      ]
    }
  );
};

export { DiscardButtonElement, StatusBadge };
//# sourceMappingURL=out.js.map
//# sourceMappingURL=index.js.map