'use strict';

var clsx4 = require('clsx');
var tailwindMerge = require('tailwind-merge');
var lodashEs = require('lodash-es');
var react = require('@tw-classed/react');
var core = require('@tw-classed/core');
var createVariatGroupTransfomer = require('tailwind-group-variant');
var jsxRuntime = require('react/jsx-runtime');
var react$1 = require('react');
var dotDiver = require('@clickbar/dot-diver');
require('exhaustive');
var changeCase$1 = require('change-case');
var useDimensions = require('react-cool-dimensions');
var flattenColorPaletteImport = require('tailwindcss/lib/util/flattenColorPalette');
var tailwindColors = require('tailwindcss/colors');
var reactResponsive = require('react-responsive');

function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }

var clsx4__default = /*#__PURE__*/_interopDefault(clsx4);
var createVariatGroupTransfomer__default = /*#__PURE__*/_interopDefault(createVariatGroupTransfomer);
var useDimensions__default = /*#__PURE__*/_interopDefault(useDimensions);
var flattenColorPaletteImport__default = /*#__PURE__*/_interopDefault(flattenColorPaletteImport);
var tailwindColors__default = /*#__PURE__*/_interopDefault(tailwindColors);

// src/components/Detail/Detail.tsx
var twMerge = tailwindMerge.extendTailwindMerge({
  classGroups: {
    "font-size": [
      {
        // Fixes incorect merging of text size
        text: ["h1", "h2", "h3", "h4", "h5", "h6"]
      }
    ]
  }
});
var { classed } = react.createClassed({ merger: twMerge });
core.createClassed({ merger: twMerge });

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

// src/utils/classed/expandVariant.ts
createVariatGroupTransfomer__default.default({});

// src/components/Flex/Flex.tsx
var flexGapVariants = {
  false: "gap-0",
  true: "gap-8",
  xs: "gap-2",
  sm: "gap-4",
  md: "gap-8",
  lg: "gap-16",
  xl: "gap-24"
};
var Flex = classed("div", "flex", {
  defaultVariants: {},
  variants: {
    row: {
      true: "flex-row",
      reverse: "flex-row-reverse"
    },
    column: {
      true: "flex-col",
      reverse: "flex-col-reverse"
    },
    dir: {
      row: "flex-row",
      column: "flex-col"
    },
    inlineFlex: {
      true: "inline-flex"
    },
    noFlex: {
      true: ""
    },
    flexNone: {
      true: "flex-none"
    },
    wrap: {
      true: "flex-wrap",
      reverse: "flex-wrap-reverse wrap"
    },
    grow: {
      true: "flex-grow"
    },
    shrink: {
      true: "flex-shrink"
    },
    auto: {
      true: "flex-auto"
    },
    basisAuto: {
      true: "basis-auto"
    },
    centerAlign: {
      true: "justify-center items-center"
    },
    gap: flexGapVariants,
    textAlign: {
      left: "text-left",
      center: "text-center",
      right: "text-right",
      end: "text-end",
      start: "text-start",
      justify: "text-justify"
    },
    justify: {
      start: "justify-start",
      end: "justify-end",
      center: "justify-center",
      between: "justify-between",
      around: "justify-around",
      evenly: "justify-evenly"
    },
    align: {
      start: "items-start",
      end: "items-end",
      center: "items-center",
      baseline: "items-baseline",
      stretch: "items-stretch"
    },
    alignSelf: {
      start: "self-start",
      center: "self-center",
      end: "self-end",
      stretch: "self-stretch",
      baseline: "self-baseline",
      auto: "self-auto"
    },
    justifySelf: {
      auto: "justify-self-auto",
      start: "justify-self-start",
      end: "justify-self-end",
      center: "justify-self-center",
      stretch: "justify-self-stretch"
    },
    fullWidth: {
      true: "w-full"
    }
  }
});
var headingTextSize = {
  h1: clsx4__default.default("text-h1"),
  h2: clsx4__default.default("text-h2"),
  h3: clsx4__default.default("text-h3"),
  h4: clsx4__default.default("text-h4"),
  h5: clsx4__default.default("text-h5"),
  h6: clsx4__default.default("text-h6")
};
var textSize = {
  xs: clsx4__default.default("text-xs"),
  sm: clsx4__default.default("text-sm"),
  md: clsx4__default.default("text-md"),
  lg: clsx4__default.default("text-lg")
};
var textVariants = {
  fontWeight: {
    regular: clsx4__default.default("font-regular"),
    medium: clsx4__default.default("font-medium"),
    bold: clsx4__default.default("font-bold")
  },
  size: {
    ...textSize,
    ...headingTextSize
  },
  font: {
    body: "font-body",
    heading: "font-heading",
    mono: "font-mono"
  },
  leading: {
    none: clsx4__default.default("leading-none"),
    xs: clsx4__default.default("leading-xs"),
    sm: clsx4__default.default("leading-sm"),
    md: clsx4__default.default("leading-md"),
    lg: clsx4__default.default("leading-lg"),
    h1: clsx4__default.default("leading-h1"),
    h2: clsx4__default.default("leading-h2"),
    h3: clsx4__default.default("leading-h3"),
    h4: clsx4__default.default("leading-h4"),
    h5: clsx4__default.default("leading-h5"),
    h6: clsx4__default.default("leading-h6")
  },
  spaceY: {
    xs: clsx4__default.default("space-y-4"),
    sm: clsx4__default.default("space-y-6"),
    md: clsx4__default.default("space-y-8"),
    lg: clsx4__default.default("space-y-16")
  },
  spaceX: {
    xs: clsx4__default.default("space-x-4"),
    sm: clsx4__default.default("space-x-6"),
    md: clsx4__default.default("space-x-8"),
    lg: clsx4__default.default("space-x-16")
  },
  color: {
    inherit: clsx4__default.default("text-inherit"),
    current: clsx4__default.default("text-current"),
    tint: clsx4__default.default("text-content-tint"),
    ghost: clsx4__default.default("text-content-ghost"),
    subtle: clsx4__default.default("text-content-subtle"),
    medium: clsx4__default.default("text-content"),
    weak: clsx4__default.default("text-content-weak"),
    moderate: clsx4__default.default("text-content-moderate"),
    high: clsx4__default.default("text-content-high"),
    intense: clsx4__default.default("text-content-intense"),
    strong: clsx4__default.default("text-content-intense"),
    inverse: clsx4__default.default("text-inverse"),
    danger: clsx4__default.default("text-danger")
  },
  align: {
    center: clsx4__default.default("text-center"),
    right: clsx4__default.default("text-right"),
    left: clsx4__default.default("text-left"),
    start: clsx4__default.default("text-left"),
    end: clsx4__default.default("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/Text/textComponentProps.ts
var textComponentProps = {
  overline: {
    size: "sm",
    leading: "md",
    color: "subtle",
    fontWeight: "regular",
    maxLines: 2,
    className: void 0
  },
  heading: {
    size: "h3",
    color: "intense",
    leading: "h3",
    fontWeight: "bold",
    className: void 0
  },
  subheading: {
    size: "lg",
    leading: "lg",
    color: "intense",
    className: void 0,
    fontWeight: "medium"
  },
  title: {
    size: "md",
    color: "intense",
    leading: "md",
    fontWeight: "medium",
    maxLines: 2,
    className: void 0
  },
  subtitle: {
    size: "md",
    leading: "md",
    font: "body",
    fontWeight: "regular",
    color: "medium",
    className: "relative"
  },
  body: {
    size: "md",
    color: "weak",
    leading: "md",
    fontWeight: "regular",
    className: void 0,
    font: "body"
    // maxLines: 3,
  },
  description: {
    size: "sm",
    color: "subtle",
    leading: "md",
    fontWeight: "regular",
    className: void 0,
    font: "body"
    // maxLines: 3,
  },
  caption: {
    size: "sm",
    color: "ghost",
    leading: "md",
    className: void 0
  }
};
var TextDotElement = classed("svg", "flex-none fill-current", {
  variants: {
    size: {
      xs: "h-2 w-2",
      sm: "h-4 w-4",
      md: "h-6 w-6",
      lg: "h-8 w-8"
    }
  },
  defaultVariants: {
    size: "md"
  }
});
var Dot = (props) => /* @__PURE__ */ jsxRuntime.jsx(TextDotElement, { viewBox: "0 0 2 2", ...props, children: /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: 1, cy: 1, r: 1 }) });
var DuplicateChildren = ({ count, children }) => {
  const renderChildren = react$1.useCallback(() => {
    if (count === 1)
      return children;
    return new Array(count).fill(0).map(() => children);
  }, [children, count]);
  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: renderChildren() });
};
var TextElement = classed("span", {
  variants: {
    size: textVariants.size,
    fontWeight: textVariants.fontWeight,
    color: textVariants.color,
    leading: textVariants.leading,
    align: textVariants.align,
    font: textVariants.font,
    spaceY: textVariants.spaceY,
    spaceX: textVariants.spaceX,
    maxLines: textVariants.maxLines,
    uppercase: {
      true: "uppercase"
    },
    noWrap: {
      true: "whitespace-nowrap"
    },
    bold: {
      true: textVariants.fontWeight.bold
    },
    medium: {
      true: textVariants.fontWeight.medium
    },
    tracking: {
      wide: "tracking-wide",
      tight: "tracking-tight"
    },
    block: {
      true: "block"
    },
    fullWidth: {
      true: "w-full"
    },
    truncate: {
      true: "truncate"
    },
    selectNone: {
      true: "select-none"
    },
    italic: {
      true: "italic"
    }
  },
  defaultVariants: {
    color: "current"
  }
});
var TextComponent = react.deriveClassed(
  ({ children, className, as, ...props }, forwardedRef) => {
    return /* @__PURE__ */ jsxRuntime.jsx(TextElement, { className, as, ...props, ref: forwardedRef, children });
  }
);
var Header = ({ as, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(Text, { as, ...props });
var H1 = (props) => /* @__PURE__ */ jsxRuntime.jsx(Header, { as: "h1", size: "h1", ...props });
var H2 = (props) => /* @__PURE__ */ jsxRuntime.jsx(Header, { as: "h2", size: "h2", ...props });
var H3 = (props) => /* @__PURE__ */ jsxRuntime.jsx(Header, { as: "h3", size: "h3", ...props });
var H4 = (props) => /* @__PURE__ */ jsxRuntime.jsx(Header, { as: "h4", size: "h4", ...props });
var H5 = (props) => /* @__PURE__ */ jsxRuntime.jsx(Header, { as: "h5", size: "h5", ...props });
var H6 = (props) => /* @__PURE__ */ jsxRuntime.jsx(Header, { as: "h6", size: "h6", ...props });
var PresetTextComponent = react.deriveClassed(({ preset, ...props }, forwardedRef) => {
  return /* @__PURE__ */ jsxRuntime.jsx(TextComponent, { ...textComponentProps[preset], ...props, ref: forwardedRef });
});
var Overline = (props) => /* @__PURE__ */ jsxRuntime.jsx(PresetTextComponent, { preset: "overline", ...props });
var Heading = (props) => /* @__PURE__ */ jsxRuntime.jsx(PresetTextComponent, { preset: "heading", ...props });
var Subheading = (props) => /* @__PURE__ */ jsxRuntime.jsx(PresetTextComponent, { preset: "subheading", ...props });
var Title = (props) => /* @__PURE__ */ jsxRuntime.jsx(PresetTextComponent, { preset: "title", ...props });
var Subtitle = (props) => /* @__PURE__ */ jsxRuntime.jsx(PresetTextComponent, { preset: "subtitle", ...props });
var Body = (props) => /* @__PURE__ */ jsxRuntime.jsx(PresetTextComponent, { preset: "body", ...props });
var Description = (props) => /* @__PURE__ */ jsxRuntime.jsx(PresetTextComponent, { preset: "description", ...props });
var Caption = (props) => /* @__PURE__ */ jsxRuntime.jsx(PresetTextComponent, { preset: "caption", ...props });
var Br = (props) => /* @__PURE__ */ jsxRuntime.jsx(DuplicateChildren, { ...props, children: /* @__PURE__ */ jsxRuntime.jsx("br", {}) });
var Space = (props) => /* @__PURE__ */ jsxRuntime.jsx(DuplicateChildren, { ...props, children: "\xA0" });
var Blank = (props) => /* @__PURE__ */ jsxRuntime.jsx(DuplicateChildren, { ...props, children: "\u200D" });
var Dash = (props) => /* @__PURE__ */ jsxRuntime.jsx(DuplicateChildren, { ...props, children: " \u2013" });
var SubComponents = {
  /** Header 1 */
  H1,
  /** Header 2 */
  H2,
  /** Header 3 */
  H3,
  /** Header 4 */
  H4,
  /** Header 5 */
  H5,
  /** Header 6 */
  H6,
  /** Preset Text component */
  Overline,
  /** Preset Text component */
  Heading,
  /** Preset Text component */
  Subheading,
  /** Preset Text component */
  Title,
  /** Preset Text component */
  Subtitle,
  /** Preset Text component */
  Body,
  /** Preset Text component */
  Caption,
  /** Preset Text component */
  Description,
  /** Line break: <br/> */
  Br,
  /** Simple dot symbol */
  Dot,
  /** White space */
  Space,
  /** Invisible character */
  Blank,
  /** Dash symbol */
  Dash
};
var Text = Object.assign(TextComponent, SubComponents);
function getByPath(object, path, _maxDepth) {
  return dotDiver.getByPath(object, path);
}

// src/utils/objectMap.ts
function objectMap(obj, fn) {
  return Object.fromEntries(
    Object.entries(obj).map(([k, v], index) => fn({ key: k, value: v, index, get: getByPath })).filter(notEmpty)
  );
}
var stringCaseFns = {
  param: changeCase$1.paramCase,
  capital: changeCase$1.capitalCase,
  capitalize: lodashEs.upperFirst,
  camel: changeCase$1.camelCase,
  dot: changeCase$1.dotCase,
  header: changeCase$1.headerCase,
  noCase: changeCase$1.noCase,
  path: changeCase$1.pathCase,
  constant: changeCase$1.constantCase,
  sentence: changeCase$1.sentenceCase,
  snake: changeCase$1.snakeCase,
  pascal: changeCase$1.pascalCase
};
function changeCase(str, stringCase) {
  if (typeof str !== "string") {
    return void 0;
  }
  const caseFn = stringCaseFns[stringCase];
  return caseFn(str);
}

// src/utils/getElement.ts
function getElement(elementOrRef) {
  if (!elementOrRef)
    return void 0;
  if (elementOrRef instanceof HTMLElement || elementOrRef instanceof Element) {
    return elementOrRef;
  }
  return elementOrRef.current;
}

// src/utils/measureElement.ts
function measureElement(elementOrRef, options) {
  const { includeMargin = false, excludePadding = false, excludeBorder = false } = options ?? {};
  const el = getElement(elementOrRef);
  const signs = {
    margin: includeMargin ? 1 : 0,
    padding: excludePadding ? -1 : 0,
    border: excludeBorder ? -1 : 0
  };
  const cssAttributes = getCssAttributeDataMap(el);
  function getSize(value, property) {
    const sum = lodashEs.reduce(
      signs,
      (acc, sign, key) => {
        const size = cssAttributes[key][property];
        return acc + size * sign;
      },
      value
    );
    return Math.round(sum);
  }
  const {
    width = 0,
    height = 0,
    top = 0,
    bottom = 0,
    left = 0,
    right = 0
  } = el?.getBoundingClientRect() ?? {};
  const {
    offsetTop = 0,
    offsetLeft = 0,
    offsetWidth = 0,
    offsetHeight = 0,
    scrollLeft = 0,
    scrollWidth = 0,
    scrollTop = 0,
    scrollHeight = 0,
    clientWidth = 0,
    clientHeight = 0
  } = el ?? {};
  const measurements = {
    width: getSize(width, "width"),
    height: getSize(height, "height"),
    top: getSize(top, "top"),
    bottom: getSize(bottom, "bottom"),
    left: getSize(left, "left"),
    right: getSize(right, "right"),
    offsetTop,
    offsetLeft,
    offsetHeight,
    offsetWidth,
    clientWidth,
    clientHeight,
    scrollLeft,
    scrollWidth,
    scrollTop,
    scrollHeight
  };
  return measurements;
}
function getCssAttributeDataMap(el) {
  return objectMap(["margin", "border", "padding"], ({ value: attribute }) => {
    const properties = objectMap(["top", "bottom", "left", "right"], ({ value: baseProperty }) => {
      const attributeKey = `${attribute}${changeCase(baseProperty, "capitalize")}`;
      const value = el ? lodashEs.parseInt(getComputedStyle(el)[attributeKey]) : 0;
      return [baseProperty, value];
    });
    const { left, right, top, bottom } = properties;
    const width = left + right;
    const height = top + bottom;
    const attributeData = { width, height, left, right, top, bottom };
    return [attribute, attributeData];
  });
}
function Wrap({
  children,
  if: conditionProp,
  wrap: wrapper,
  fallback
}) {
  const fallbackWrapperFn = fallback ?? ((c) => /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: c }));
  if (!Boolean(conditionProp))
    return fallbackWrapperFn(children);
  const getCondition = () => {
    if (typeof conditionProp === "object") {
      return lodashEs.findKey(conditionProp, (e) => Boolean(e));
    }
    return conditionProp;
  };
  const condition = getCondition();
  const getWrapperFn = () => {
    if (typeof wrapper === "function")
      return wrapper;
    if (typeof wrapper === "object" && typeof condition === "string" && condition in wrapper) {
      return wrapper[condition];
    }
    return fallbackWrapperFn;
  };
  const wrapperFn = getWrapperFn();
  if (typeof condition === "boolean") {
    return Boolean(condition) ? wrapperFn(children) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
  }
  return wrapperFn(children);
}

// src/config/colors/helpers/generateColorGroup.ts
function generateColorGroup(colorGroup) {
  return (props) => {
    const resolvedColorEntries = Object.entries(props).map(([k, v]) => {
      const val = colorGroup[v];
      return [k, val];
    });
    return {
      ...Object.fromEntries(resolvedColorEntries),
      ...colorGroup
    };
  };
}

// src/config/colors/variousColors.ts
var variousColors = {
  "various-blue": generateColorGroup(tailwindColors__default.default.blue)({
    DEFAULT: "500",
    dark: "600",
    light: "300",
    soft: "100"
  }),
  "various-emerald": generateColorGroup(tailwindColors__default.default.emerald)({
    DEFAULT: "500",
    dark: "600",
    light: "300",
    soft: "100"
  }),
  "various-orange": generateColorGroup(tailwindColors__default.default.orange)({
    DEFAULT: "500",
    dark: "600",
    light: "300",
    soft: "100"
  }),
  "various-fuchsia": generateColorGroup(tailwindColors__default.default.fuchsia)({
    DEFAULT: "500",
    dark: "600",
    light: "300",
    soft: "100"
  }),
  "various-yellow": generateColorGroup(tailwindColors__default.default.yellow)({
    DEFAULT: "500",
    dark: "600",
    light: "300",
    soft: "100"
  }),
  "various-rose": generateColorGroup(tailwindColors__default.default.rose)({
    DEFAULT: "500",
    dark: "600",
    light: "300",
    soft: "100"
  }),
  "various-cyan": generateColorGroup(tailwindColors__default.default.cyan)({
    DEFAULT: "500",
    dark: "600",
    light: "300",
    soft: "100"
  }),
  "various-violet": generateColorGroup(tailwindColors__default.default.violet)({
    DEFAULT: "500",
    dark: "600",
    light: "300",
    soft: "100"
  }),
  "various-teal": generateColorGroup(tailwindColors__default.default.teal)({
    DEFAULT: "500",
    dark: "600",
    light: "300",
    soft: "100"
  }),
  "various-pink": generateColorGroup(tailwindColors__default.default.pink)({
    DEFAULT: "500",
    dark: "600",
    light: "300",
    soft: "100"
  }),
  "various-lime": generateColorGroup(tailwindColors__default.default.lime)({
    DEFAULT: "500",
    dark: "600",
    light: "300",
    soft: "100"
  }),
  "various-gray": generateColorGroup(tailwindColors__default.default.gray)({
    DEFAULT: "500",
    dark: "600",
    light: "300",
    soft: "100"
  }),
  "various-neutral": generateColorGroup(tailwindColors__default.default.neutral)({
    DEFAULT: "500",
    dark: "600",
    light: "300",
    soft: "100"
  }),
  "various-stone": generateColorGroup(tailwindColors__default.default.stone)({
    DEFAULT: "500",
    dark: "600",
    light: "300",
    soft: "100"
  }),
  "various-zinc": generateColorGroup(tailwindColors__default.default.zinc)({
    DEFAULT: "500",
    dark: "600",
    light: "300",
    soft: "100"
  }),
  "various-slate": generateColorGroup(tailwindColors__default.default.slate)({
    DEFAULT: "500",
    dark: "600",
    light: "300",
    soft: "100"
  })
};

// src/config/colors/colors.constants.ts
var colorScaleKeys = [
  "50",
  "100",
  "200",
  "300",
  "400",
  "500",
  "600",
  "700",
  "800",
  "900"
];
var hexAlphaCodes = {
  "100": "FF",
  "95": "F2",
  "90": "E6",
  "85": "D9",
  "80": "CC",
  "75": "BF",
  "70": "B3",
  "65": "A6",
  "60": "99",
  "55": "8C",
  "50": "80",
  "45": "73",
  "40": "66",
  "35": "59",
  "30": "4D",
  "25": "40",
  "23": "3B",
  "20": "33",
  "15": "26",
  "12": "1F",
  "10": "1A",
  "9": "17",
  "8": "14",
  "7": "12",
  "6": "0F",
  "5": "0D",
  "4": "0A",
  "3": "08",
  "2": "05",
  "1": "03",
  "0": "00"
};
var hexTransparencyPresetMap = {
  tint: "5",
  ghost: "20",
  subtle: "30",
  weak: "50",
  moderate: "70",
  high: "90",
  strong: "95",
  intense: "100"
};

// src/config/colors/helpers/arrayToColorGroup.ts
function arrayToColorGroup(colorArr) {
  const entries = colorArr.map(
    (color, index) => [colorScaleKeys[index], color]
  );
  return Object.fromEntries(entries);
}

// src/config/colors/helpers/generateHexAlpha.ts
function generateHexAlpha(hexColor, options) {
  const hex = hexColor.slice(0, 7);
  let hexAlphaCode;
  if (typeof options === "string") {
    hexAlphaCode = hexAlphaCodes[hexTransparencyPresetMap[options]];
  } else {
    const transparency = getTransparencyOption(options);
    const transparencyPreset = getTransparencyPresetOption(options);
    const code = transparencyPreset ? hexTransparencyPresetMap[transparencyPreset] : transparency;
    hexAlphaCode = code ? hexAlphaCodes[code] : void 0;
  }
  return `${hex}${hexAlphaCode ?? ""}`;
}
function getTransparencyPresetOption(option) {
  function isPreset(option2) {
    return "transparencyPreset" in option2;
  }
  return isPreset(option) ? option.transparencyPreset : void 0;
}
function getTransparencyOption(option) {
  function isPreset(option2) {
    return "transparency" in option2;
  }
  return isPreset(option) ? option.transparency : void 0;
}

// src/config/colors/helpers/generateHexAlphaColorGroup.ts
function generateHexAlphaColorGroup(hex, alphaOverrides, options) {
  const defaultColorGroup = {
    tint: generateHexAlpha(hex, "tint"),
    ghost: generateHexAlpha(hex, "ghost"),
    subtle: generateHexAlpha(hex, "subtle"),
    weak: generateHexAlpha(hex, "weak"),
    moderate: generateHexAlpha(hex, "moderate"),
    high: generateHexAlpha(hex, "high"),
    strong: generateHexAlpha(hex, "strong"),
    intense: generateHexAlpha(hex, "intense"),
    DEFAULT: hex
  };
  const overrides = Object.fromEntries(
    Object.entries(alphaOverrides ?? {}).map(([key, value]) => {
      if (!value)
        return [key, value];
      const { hexColor, ...hexAlphaOptions } = getHexAlphaOverrideOptions({
        hexColor: hex,
        overrideValue: value
      });
      return [key, generateHexAlpha(hexColor, hexAlphaOptions)];
    })
  );
  const colorGroup = Object.fromEntries(
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    Object.entries({ ...defaultColorGroup, ...overrides }).filter((entry) => Boolean(entry[1])).map(([key, value]) => {
      function getKey() {
        const { prefix } = options ?? {};
        if (!prefix)
          return key;
        if (key === "DEFAULT")
          return prefix;
        return `${prefix}-${key}`;
      }
      return [getKey(), value];
    })
  );
  return colorGroup;
}
function getHexAlphaOverrideOptions({
  hexColor,
  overrideValue
}) {
  if (typeof overrideValue === "string" && overrideValue in hexTransparencyPresetMap) {
    return {
      transparencyPreset: overrideValue,
      hexColor
    };
  }
  if (typeof overrideValue === "string" && overrideValue in hexAlphaCodes) {
    return {
      transparency: overrideValue,
      hexColor
    };
  }
  if (typeof overrideValue === "string") {
    return {
      hexColor: overrideValue
    };
  }
  return {
    hexColor: overrideValue.hexColor ?? hexColor,
    transparencyPreset: getTransparencyPresetOption(overrideValue),
    transparency: getTransparencyOption(overrideValue)
  };
}
function notEmpty2(value) {
  return value !== null && value !== void 0;
}

// src/config/colors/helpers/objectMap.ts
function objectMap2(obj, fn) {
  return Object.fromEntries(
    Object.entries(obj).map(([k, v]) => fn({ key: k, value: v })).filter(notEmpty2)
  );
}

// src/config/colors/colors.ts
var flattenColorPalette = typeof flattenColorPaletteImport__default.default === "function" ? flattenColorPaletteImport__default.default : flattenColorPaletteImport__default.default.default;
var black = "#000000";
var white = "#FFFFFF";
var neutral = generateColorGroup(
  arrayToColorGroup([
    "#f6f7f9",
    "#5e7495",
    "#425571",
    "#46556b",
    "#3d4c62",
    "#324156",
    "#2b374a",
    "#262f3e",
    "#212a38",
    "#1c2532"
  ])
)({
  light: "400",
  DEFAULT: "600",
  dark: "800",
  soft: "100"
});
var contentInverse = generateHexAlphaColorGroup("#e3e5e8", {
  intense: white,
  DEFAULT: "#d2d4d7"
});
var base = {
  DEFAULT: "#F6F6F6",
  inverse: "#0D0E11"
};
var highlightAlphaMap = {
  DEFAULT: "7",
  tint: "2",
  ghost: "4",
  subtle: "7",
  weak: "10",
  moderate: "12",
  high: "15",
  strong: "25",
  intense: "30"
};
var paletteColorsConfig = {
  highlight: generateHexAlphaColorGroup(neutral[500], highlightAlphaMap),
  "highlight-inverse": generateHexAlphaColorGroup(
    variousColors["various-slate"].light,
    highlightAlphaMap
  ),
  white,
  black,
  base,
  neutral,
  heart: generateColorGroup({
    "50": "#fff0fa",
    "100": "#ffe4f7",
    "200": "#ffc9f0",
    "300": "#ff9ce2",
    "400": "#ff5fcc",
    "500": "#ff30b4",
    "600": "#f50d93",
    "700": "#e6007e",
    "800": "#b00460",
    "900": "#920952"
  })({
    DEFAULT: "700",
    dark: "800",
    light: "400",
    soft: "100"
  }),
  info: generateColorGroup(tailwindColors__default.default.cyan)({
    DEFAULT: "500",
    dark: "600",
    light: "300",
    soft: "100"
  }),
  caution: generateColorGroup({
    "50": "#ffffea",
    "100": "#fffbc5",
    "200": "#fff885",
    "300": "#ffed46",
    "400": "#ffdf1b",
    "500": "#ffbf00",
    "600": "#e29300",
    "700": "#bb6802",
    "800": "#985008",
    "900": "#7c420b"
  })({ DEFAULT: "500", dark: "600", light: "300", soft: "100" }),
  danger: generateColorGroup({
    "50": "#fff1f2",
    "100": "#ffdfe1",
    "200": "#ffc4c8",
    "300": "#ff9ba2",
    "400": "#ff626e",
    "500": "#ff3140",
    "600": "#f22837",
    "700": "#cb0a18",
    "800": "#a70d18",
    "900": "#8a121b"
  })({ DEFAULT: "500", dark: "700", light: "300", soft: "100" }),
  success: generateColorGroup(tailwindColors__default.default.emerald)({
    DEFAULT: "500",
    dark: "600",
    light: "300",
    soft: "100"
  }),
  gray: generateColorGroup(tailwindColors__default.default.gray)({
    DEFAULT: "500",
    dark: "600",
    light: "300",
    soft: "100"
  }),
  content: generateHexAlphaColorGroup("#15181E", {
    DEFAULT: "high",
    ghost: { hexColor: neutral["500"], transparencyPreset: "ghost" }
  }),
  "content-inverse": contentInverse,
  boundary: {
    focus: base.inverse,
    ...generateHexAlphaColorGroup(neutral[300], {
      DEFAULT: "subtle"
    })
  },
  "boundary-inverse": {
    focus: contentInverse.weak,
    ...generateHexAlphaColorGroup(base.DEFAULT, { DEFAULT: "subtle" })
  },
  surface: generateColorGroup(
    arrayToColorGroup([
      "#ffffff",
      "#f5f7f9",
      "#eceff3",
      "#e3e7ed",
      "#dae0e8",
      "#d3dae4",
      "#ccd5e0",
      "#c5d0de",
      "#bfccdb",
      "#b9c8d9"
    ])
  )({ DEFAULT: "50", dark: "400", light: "200", soft: "100" }),
  "surface-inverse": generateColorGroup(
    arrayToColorGroup([
      "#2d3542",
      "#282f3a",
      "#232832",
      "#1e222a",
      "#1a1d23",
      "#181b21",
      "#171a20",
      "#16181e",
      "#14171d",
      "#13151b"
    ])
  )({ DEFAULT: "400", dark: "700", light: "200", soft: "500" }),
  distinct: {
    "1": variousColors["various-blue"].DEFAULT,
    "2": variousColors["various-emerald"].DEFAULT,
    "3": variousColors["various-orange"].DEFAULT,
    "4": variousColors["various-fuchsia"].DEFAULT,
    "5": variousColors["various-yellow"].DEFAULT,
    "6": variousColors["various-rose"].DEFAULT,
    "7": variousColors["various-cyan"].DEFAULT,
    "8": variousColors["various-violet"].DEFAULT,
    "9": variousColors["various-teal"].DEFAULT,
    "10": variousColors["various-pink"].DEFAULT,
    "11": variousColors["various-lime"].DEFAULT,
    "12": variousColors["various-gray"].DEFAULT
  },
  ...variousColors
};
var utilityColorsConfig = {
  inherit: tailwindColors__default.default.inherit,
  current: tailwindColors__default.default.current,
  transparent: tailwindColors__default.default.transparent
};
var colorPalette = {
  ...utilityColorsConfig,
  ...objectMap2(
    flattenColorPalette(paletteColorsConfig),
    ({ key, value }) => {
      return [`palette-${key}`, value];
    }
  )
};

// src/config/colors/helpers/hexToRgb.ts
var hexCharacters = "a-f\\d";
var match3or4Hex = `#?[${hexCharacters}]{3}[${hexCharacters}]?`;
var match6or8Hex = `#?[${hexCharacters}]{6}([${hexCharacters}]{2})?`;
var nonHexChars = new RegExp(`[^#${hexCharacters}]`, "gi");
var validHexSize = new RegExp(`^${match3or4Hex}$|^${match6or8Hex}$`, "i");
function hexRgb(hex, options = {}) {
  if (typeof hex !== "string" || nonHexChars.test(hex) || !validHexSize.test(hex)) {
    throw new TypeError("Expected a valid hex string");
  }
  hex = hex.replace(/^#/, "");
  let alphaFromHex = 1;
  if (hex.length === 8) {
    alphaFromHex = Number.parseInt(hex.slice(6, 8), 16) / 255;
    hex = hex.slice(0, 6);
  }
  if (hex.length === 4) {
    alphaFromHex = Number.parseInt(hex.slice(3, 4).repeat(2), 16) / 255;
    hex = hex.slice(0, 3);
  }
  if (hex.length === 3) {
    hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
  }
  const number = Number.parseInt(hex, 16);
  const red = number >> 16;
  const green = number >> 8 & 255;
  const blue = number & 255;
  const alpha = typeof options.alpha === "number" ? options.alpha : alphaFromHex;
  return { red, green, blue, alpha };
}

// src/config/colors/helpers/cssVariables.ts
function getCssColorVariable(str) {
  return `--color-${str}`;
}
function getCssAlphaVariable(str) {
  return `--alpha-${str}`;
}
function getCssVariableValue(cssVariable, alphaCssVariable) {
  if (alphaCssVariable) {
    return `rgb(var(${cssVariable}) / var(${alphaCssVariable}))`;
  }
  return `rgb(var(${cssVariable}) / <alpha-value>)`;
}
function getCssVariableRgb(hex) {
  const { red, green, blue, alpha } = hexRgb(hex);
  return { rgb: `${red} ${green} ${blue}`, alpha };
}

// src/config/colors/color-schemes/schemes/common-scheme.ts
var commonScheme = {
  all: {
    heart: "palette-heart",
    "heart-light": "palette-heart-light",
    "heart-dark": "palette-heart-dark",
    "heart-soft": "palette-heart-soft",
    info: "palette-info",
    "info-light": "palette-info-light",
    "info-dark": "palette-info-dark",
    "info-soft": "palette-info-soft",
    success: "palette-success",
    "success-light": "palette-success-light",
    "success-dark": "palette-success-dark",
    "success-soft": "palette-success-soft",
    danger: "palette-danger",
    "danger-light": "palette-danger-light",
    "danger-dark": "palette-danger-dark",
    "danger-soft": "palette-danger-soft",
    caution: "palette-caution",
    "caution-light": "palette-caution-light",
    "caution-dark": "palette-caution-dark",
    "caution-soft": "palette-caution-soft",
    "primary-content": "palette-content-inverse-intense",
    "secondary-content": "palette-content-inverse-intense"
  },
  lightMode: {
    base: "palette-base",
    boundary: "palette-various-slate-300",
    "boundary-tint": "palette-various-slate-50",
    "boundary-ghost": "palette-various-slate-100",
    "boundary-subtle": "palette-various-slate-200",
    "boundary-weak": "palette-various-slate-300",
    "boundary-moderate": "palette-various-slate-400",
    "boundary-high": "palette-various-slate-500",
    "boundary-strong": "palette-various-slate-600",
    "boundary-intense": "palette-various-slate-700",
    highlight: "palette-highlight",
    "highlight-tint": "palette-highlight-tint",
    "highlight-ghost": "palette-highlight-ghost",
    "highlight-subtle": "palette-highlight-subtle",
    "highlight-weak": "palette-highlight-weak",
    "highlight-moderate": "palette-highlight-moderate",
    "highlight-high": "palette-highlight-high",
    "highlight-strong": "palette-highlight-strong",
    "highlight-intense": "palette-highlight-intense",
    content: "palette-content",
    "content-tint": "palette-content-tint",
    "content-ghost": "palette-content-ghost",
    "content-subtle": "palette-content-subtle",
    "content-weak": "palette-content-weak",
    "content-moderate": "palette-content-moderate",
    "content-high": "palette-content-high",
    "content-strong": "palette-content-strong",
    "content-intense": "palette-content-intense",
    "content-min-contrast": "palette-neutral-light",
    "content-max-contrast": "palette-content-intense",
    "inverse-content-max-contrast": "palette-content-inverse-intense",
    "inverse-content-min-contrast": "palette-neutral-light",
    inverse: "palette-surface-inverse",
    "inverse-light": "palette-surface-inverse-light",
    "inverse-dark": "palette-surface-inverse-dark",
    "inverse-soft": "palette-surface-inverse-soft",
    "primary-content-max-contrast": "palette-content-intense",
    "primary-content-min-contrast": "palette-neutral-light",
    "secondary-content-max-contrast": "palette-content-high",
    "secondary-content-min-contrast": "palette-neutral-300",
    "inverse-content": "palette-content-intense"
  },
  darkMode: {
    base: "palette-base-inverse",
    boundary: "palette-various-zinc-700",
    "boundary-tint": "palette-various-zinc-950",
    "boundary-ghost": "palette-various-zinc-900",
    "boundary-subtle": "palette-various-zinc-800",
    "boundary-weak": "palette-various-zinc-700",
    "boundary-moderate": "palette-various-zinc-600",
    "boundary-high": "palette-various-zinc-500",
    "boundary-intense": "palette-various-zinc-400",
    highlight: "palette-highlight-inverse",
    "highlight-tint": "palette-highlight-inverse-tint",
    "highlight-ghost": "palette-highlight-inverse-ghost",
    "highlight-subtle": "palette-highlight-inverse-subtle",
    "highlight-weak": "palette-highlight-inverse-weak",
    "highlight-moderate": "palette-highlight-inverse-moderate",
    "highlight-high": "palette-highlight-inverse-high",
    "highlight-strong": "palette-highlight-inverse-strong",
    "highlight-intense": "palette-highlight-inverse-intense",
    content: "palette-content-inverse",
    "content-tint": "palette-content-inverse-tint",
    "content-ghost": "palette-content-inverse-ghost",
    "content-subtle": "palette-content-inverse-subtle",
    "content-weak": "palette-content-inverse-weak",
    "content-moderate": "palette-content-inverse-moderate",
    "content-high": "palette-content-inverse-high",
    "content-strong": "palette-content-inverse-strong",
    "content-intense": "palette-content-inverse-intense",
    "content-min-contrast": "palette-neutral-50",
    "content-max-contrast": "palette-content-inverse-intense",
    "inverse-content-max-contrast": "palette-content-intense",
    "inverse-content-min-contrast": "palette-neutral",
    inverse: "palette-surface",
    "inverse-light": "palette-surface-light",
    "inverse-dark": "palette-surface-dark",
    "inverse-soft": "palette-surface-soft",
    "primary-content-max-contrast": "palette-content-inverse-intense",
    "primary-content-min-contrast": "palette-various-slate-300",
    "secondary-content-max-contrast": "palette-content-inverse-high",
    "secondary-content-min-contrast": "palette-various-slate-300",
    "inverse-content": "palette-content-inverse-intense"
  }
};

// src/config/colors/color-schemes/color-schemes.helpers.ts
function resolveColorScheme(scheme) {
  return objectMap2(scheme, ({ key, value }) => {
    const color = colorPalette[value];
    return [key, color];
  });
}
function getExtendedConfig(options) {
  if ("extend" in options)
    return options.extend;
  return void 0;
}
function defineColorScheme(options) {
  const { name, colorMode, scheme } = options;
  const extendedConfig = getExtendedConfig(options);
  const { scheme: extendedScheme } = extendedConfig ?? {};
  const colorModeScheme = (colorMode ?? extendedConfig?.colorMode) === "dark" ? commonScheme.darkMode : commonScheme.lightMode;
  const resolvedScheme = resolveColorScheme({ ...commonScheme.all, ...colorModeScheme, ...scheme });
  return {
    ...extendedConfig,
    name,
    colorMode,
    scheme: { ...extendedScheme, ...resolvedScheme },
    unresolvedScheme: scheme
  };
}
function defineColorSchemes(resolvedSchemeConfigs) {
  const colorSchemes2 = resolvedSchemeConfigs.reduce((acc, cur) => {
    acc[cur.name] = cur.scheme;
    return acc;
  }, {});
  const colorSchemeCssVariableClasses2 = getColorSchemesCssVariableClasses(colorSchemes2);
  const lightDefault = colorSchemes2.default;
  const rootScheme = colorSchemeCssVariableClasses2[":root"];
  const colorSchemeTokens2 = getColorSchemeTokens(lightDefault, rootScheme);
  return {
    colorSchemes: colorSchemes2,
    colorSchemeCssVariableClasses: colorSchemeCssVariableClasses2,
    colorSchemeTokens: colorSchemeTokens2,
    colorSchemeConfigs: resolvedSchemeConfigs
  };
}
function getColorSchemeTokens(scheme, variableMap) {
  return objectMap2(scheme, ({ key: token }) => {
    const cssVariable = getCssColorVariable(token);
    const alphaVariable = getCssAlphaVariable(token);
    return [
      `${token}`,
      getCssVariableValue(cssVariable, alphaVariable in variableMap ? alphaVariable : void 0)
    ];
  });
}
function getColorSchemesCssVariableClasses(colorSchemes2) {
  return Object.fromEntries(
    Object.entries(colorSchemes2).flatMap(([schemeKey, value]) => {
      const cssThemeVariablesMap = Object.fromEntries(
        Object.entries(value).flatMap(([themeToken, hex]) => {
          const colorVariableName = getCssColorVariable(themeToken);
          const alphaVariableName = getCssAlphaVariable(themeToken);
          const { rgb, alpha } = getCssVariableRgb(hex);
          const entries = [[colorVariableName, rgb]];
          if (alpha >= 0 && alpha !== 1) {
            entries.push([alphaVariableName, `${parseFloat(alpha.toFixed(2))}`]);
          }
          return entries;
        })
      );
      return getColorSchemeCssVariableNames(schemeKey).map((cssVariableName) => {
        return [cssVariableName, { color: value.content, ...cssThemeVariablesMap }];
      });
    })
  );
}
function getColorSchemeCssVariableNames(schemeKey) {
  const [mode, ...rest] = schemeKey.split("/");
  const baseSchemeKey = rest.join("/");
  const dataColorSchemeClass = `[data-color-scheme="${schemeKey}"]`;
  const isDarkMode = mode === "dark";
  if (schemeKey === "default") {
    return [":root", dataColorSchemeClass];
  }
  if (schemeKey === "dark/default") {
    return ['[data-mode="dark"]', `[data-mode="dark"] [data-color-scheme="default"]`];
  }
  if (isDarkMode) {
    return [`[data-mode="dark"] [data-color-scheme="${baseSchemeKey}"]`];
  }
  return [dataColorSchemeClass];
}

// src/config/colors/color-schemes/schemes/danger.ts
var dangerScheme = defineColorScheme({
  name: "danger",
  colorMode: "dark",
  scheme: {
    primary: "palette-danger-100",
    "primary-light": "palette-danger-50",
    "primary-soft": "palette-danger-200",
    "primary-dark": "palette-danger-50",
    "primary-content": "palette-danger",
    secondary: "palette-various-rose-800",
    "secondary-dark": "palette-various-rose-900",
    "secondary-light": "palette-various-rose-700",
    "secondary-soft": "palette-various-rose-700",
    "secondary-content": "palette-content-intense",
    surface: "palette-danger-500",
    "surface-soft": "palette-danger-400",
    "surface-light": "palette-danger-300",
    "surface-dark": "palette-danger-600"
  }
});
var danger_default = dangerScheme;

// src/config/colors/color-schemes/schemes/neutral.base.ts
var neutralBaseColors = {
  boundary: "palette-various-slate-600",
  "boundary-tint": "palette-various-slate-900",
  "boundary-ghost": "palette-various-slate-800",
  "boundary-subtle": "palette-various-slate-700",
  "boundary-weak": "palette-various-slate-600",
  "boundary-moderate": "palette-various-slate-500",
  "boundary-high": "palette-various-slate-400",
  "boundary-strong": "palette-various-slate-300",
  "boundary-intense": "palette-various-slate-200",
  surface: "palette-neutral-400",
  "surface-light": "palette-neutral-200",
  "surface-dark": "palette-neutral-dark",
  "surface-soft": "palette-neutral-300",
  primary: "palette-various-slate-400",
  "primary-light": "palette-various-slate-300",
  "primary-dark": "palette-various-slate-500",
  "primary-soft": "palette-various-slate-100",
  secondary: "palette-various-slate-500",
  "secondary-light": "palette-various-slate-400",
  "secondary-dark": "palette-various-slate-600",
  "secondary-soft": "palette-various-slate-400"
};

// src/config/colors/color-schemes/schemes/neutral.ts
var neutral_default = defineColorScheme({
  name: "neutral",
  colorMode: "dark",
  scheme: {
    ...neutralBaseColors,
    surface: "palette-neutral-600",
    "surface-light": "palette-neutral-light",
    "surface-dark": "palette-neutral-dark",
    "surface-soft": "palette-neutral-500",
    secondary: "palette-various-slate-500",
    "secondary-light": "palette-various-slate-400",
    "secondary-dark": "palette-various-slate-600",
    "secondary-soft": "palette-various-slate-400"
  }
});

// src/config/colors/color-schemes/schemes/neutral-dark.ts
var neutral_dark_default = defineColorScheme({
  name: "neutral-dark",
  colorMode: "dark",
  scheme: {
    ...neutralBaseColors,
    surface: "palette-neutral-800",
    "surface-light": "palette-neutral-600",
    "surface-dark": "palette-neutral-900",
    "surface-soft": "palette-neutral-700",
    secondary: "palette-various-slate-500",
    "secondary-light": "palette-various-slate-400",
    "secondary-dark": "palette-various-slate-600",
    "secondary-soft": "palette-various-slate-200"
  }
});

// src/config/colors/color-schemes/schemes/neutral-light.ts
var neutral_light_default = defineColorScheme({
  name: "neutral-light",
  colorMode: "dark",
  scheme: {
    ...neutralBaseColors,
    boundary: "palette-various-slate-500",
    "boundary-tint": "palette-various-slate-800",
    "boundary-ghost": "palette-various-slate-700",
    "boundary-subtle": "palette-various-slate-600",
    "boundary-weak": "palette-various-slate-500",
    "boundary-moderate": "palette-various-slate-400",
    "boundary-high": "palette-various-slate-300",
    "boundary-strong": "palette-various-slate-200",
    "boundary-intense": "palette-various-slate-100",
    surface: "palette-neutral-400",
    "surface-light": "palette-neutral-200",
    "surface-dark": "palette-neutral-dark",
    "surface-soft": "palette-neutral-300",
    secondary: "palette-various-slate-500",
    "secondary-light": "palette-various-slate-400",
    "secondary-dark": "palette-various-slate-600",
    "secondary-soft": "palette-various-slate-400"
  }
});

// src/config/colors/color-schemes/schemes/surface.ts
var surface_default = defineColorScheme({
  name: "surface",
  colorMode: "light",
  scheme: {
    highlight: "palette-highlight",
    "highlight-weak": "palette-highlight-weak",
    "highlight-moderate": "palette-highlight-moderate",
    "highlight-high": "palette-highlight-high",
    "highlight-strong": "palette-highlight-strong",
    surface: "palette-surface",
    "surface-light": "palette-surface-100",
    "surface-dark": "palette-surface-dark",
    "surface-soft": "palette-surface-50",
    primary: "palette-neutral-500",
    "primary-light": "palette-neutral-300",
    "primary-dark": "palette-neutral-600",
    "primary-soft": "palette-various-slate-200",
    secondary: "palette-various-slate-400",
    "secondary-light": "palette-various-slate-300",
    "secondary-dark": "palette-various-slate-500",
    "secondary-soft": "palette-various-slate-100"
  }
});

// src/config/colors/color-schemes/schemes/surface.darkmode.ts
var surface_darkmode_default = defineColorScheme({
  name: "dark/surface",
  colorMode: "dark",
  scheme: {
    surface: "palette-surface-inverse",
    "surface-light": "palette-surface-inverse-300",
    "surface-dark": "palette-surface-inverse-500",
    "surface-soft": "palette-surface-inverse-200",
    primary: "palette-various-slate-500",
    "primary-light": "palette-various-slate-400",
    "primary-dark": "palette-various-slate-600",
    "primary-soft": "palette-various-slate-200",
    secondary: "palette-various-slate-600",
    "secondary-light": "palette-various-slate-500",
    "secondary-dark": "palette-various-slate-500",
    "secondary-soft": "palette-various-slate-300"
  }
});

// src/config/colors/color-schemes/schemes/surface-light.ts
var surface_light_default = defineColorScheme({
  name: "surface-light",
  colorMode: "light",
  scheme: {
    surface: "palette-surface-light",
    "surface-light": "palette-surface-100",
    "surface-dark": "palette-surface-dark",
    "surface-soft": "palette-surface-50",
    primary: "palette-neutral-500",
    "primary-light": "palette-neutral-400",
    "primary-dark": "palette-neutral-600",
    "primary-soft": "palette-various-slate-200",
    secondary: "palette-various-slate-400",
    "secondary-light": "palette-various-slate-300",
    "secondary-dark": "palette-various-slate-500",
    "secondary-soft": "palette-various-slate-100"
  }
});

// src/config/colors/color-schemes/schemes/surface-light.darkmode.ts
var surface_light_darkmode_default = defineColorScheme({
  name: "dark/surface-light",
  colorMode: "dark",
  scheme: {
    surface: "palette-surface-inverse-light",
    "surface-light": "palette-surface-inverse-100",
    "surface-dark": "palette-surface-inverse-300",
    "surface-soft": "palette-surface-inverse-50",
    primary: "palette-various-slate-500",
    "primary-light": "palette-various-slate-400",
    "primary-dark": "palette-various-slate-600",
    "primary-soft": "palette-various-slate-200",
    secondary: "palette-various-slate-600",
    "secondary-light": "palette-various-slate-500",
    "secondary-dark": "palette-various-slate-500",
    "secondary-soft": "palette-various-slate-300"
  }
});

// src/config/colors/color-schemes/schemes/surface-dark.ts
var surface_dark_default = defineColorScheme({
  name: "surface-dark",
  colorMode: "light",
  scheme: {
    surface: "palette-surface-dark",
    "surface-light": "palette-surface-50",
    "surface-dark": "palette-surface-800",
    "surface-soft": "palette-surface-100",
    primary: "palette-neutral-500",
    "primary-light": "palette-neutral-400",
    "primary-dark": "palette-neutral-600",
    "primary-soft": "palette-various-slate-200",
    secondary: "palette-various-slate-400",
    "secondary-light": "palette-various-slate-300",
    "secondary-dark": "palette-various-slate-500",
    "secondary-soft": "palette-various-slate-100"
  }
});

// src/config/colors/color-schemes/schemes/surface-dark.darkmode.ts
var surface_dark_darkmode_default = defineColorScheme({
  name: "dark/surface-dark",
  colorMode: "dark",
  scheme: {
    surface: "palette-surface-inverse-dark",
    "surface-light": "palette-surface-inverse-600",
    "surface-dark": "palette-surface-inverse-800",
    "surface-soft": "palette-surface-inverse-600",
    primary: "palette-various-slate-500",
    "primary-light": "palette-various-slate-400",
    "primary-dark": "palette-various-slate-600",
    "primary-soft": "palette-various-slate-200",
    secondary: "palette-various-slate-600",
    "secondary-light": "palette-various-slate-500",
    "secondary-dark": "palette-various-slate-500",
    "secondary-soft": "palette-various-slate-300"
  }
});

// src/config/colors/color-schemes/schemes/default.ts
var default_default = defineColorScheme({
  name: "default",
  colorMode: "light",
  scheme: surface_default.unresolvedScheme
});

// src/config/colors/color-schemes/schemes/default.darkmode.ts
var default_darkmode_default = defineColorScheme({
  name: "dark/default",
  colorMode: "dark",
  scheme: {
    surface: "palette-surface-inverse",
    "surface-light": "palette-surface-inverse-light",
    "surface-dark": "palette-surface-inverse-dark",
    "surface-soft": "palette-surface-inverse-soft",
    primary: "palette-neutral-500",
    "primary-light": "palette-neutral-300",
    "primary-dark": "palette-neutral-600",
    "primary-soft": "palette-various-slate-200",
    secondary: "palette-neutral-800",
    "secondary-light": "palette-neutral-700",
    "secondary-dark": "palette-neutral-900",
    "secondary-soft": "palette-neutral-500"
  }
});

// src/config/colors/color-schemes/schemes/inverse-scheme.ts
var inverseColorSchemes = [
  defineColorScheme({
    name: "inverse",
    colorMode: "dark",
    extend: surface_darkmode_default
  }),
  defineColorScheme({
    name: "inverse-light",
    colorMode: "dark",
    extend: surface_light_darkmode_default
  }),
  defineColorScheme({
    name: "inverse-dark",
    colorMode: "dark",
    extend: surface_dark_darkmode_default
  }),
  defineColorScheme({
    name: "dark/inverse",
    colorMode: "light",
    extend: surface_default
  }),
  defineColorScheme({
    name: "dark/inverse-light",
    colorMode: "light",
    extend: surface_light_default
  }),
  defineColorScheme({
    name: "dark/inverse-dark",
    colorMode: "light",
    extend: surface_dark_default
  })
];
var inverse_scheme_default = inverseColorSchemes;

// src/config/colors/color-schemes/schemes/state-schemes.ts
var stateColors = ["success", "info", "danger", "caution", "heart"];
var state_schemes_default = stateColors.flatMap((color) => {
  const config = {
    name: color,
    colorMode: "light",
    scheme: {
      "primary-content-max-contrast": `palette-${color}-500`,
      "primary-content-min-contrast": `palette-${color}-600`,
      content: `palette-white`,
      surface: `palette-${color}`,
      "surface-light": `palette-${color}-light`,
      "surface-dark": `palette-${color}-dark`,
      "surface-soft": `palette-${color}-soft`,
      primary: `palette-${color}-500`,
      "primary-light": `palette-${color}-300`,
      "primary-dark": `palette-${color}-600`,
      "primary-soft": `palette-${color}-200`,
      secondary: `palette-${color}-400`,
      "secondary-light": `palette-${color}-300`,
      "secondary-dark": `palette-${color}-500`,
      "secondary-soft": `palette-${color}-100`
    }
  };
  const darkConfig = {
    ...config,
    name: `dark/${color}`,
    colorMode: "dark"
  };
  return [config, darkConfig].map((e) => defineColorScheme(e));
});

// src/config/colors/color-schemes/schemes/index.ts
var colorSchemeConfigs = [
  default_default,
  default_darkmode_default,
  danger_default,
  neutral_default,
  neutral_dark_default,
  neutral_light_default,
  surface_default,
  surface_light_default,
  surface_dark_default,
  surface_darkmode_default,
  surface_light_darkmode_default,
  surface_dark_darkmode_default,
  ...inverse_scheme_default,
  ...state_schemes_default
];

// src/config/colors/color-schemes/color-schemes.ts
var mainColorSchemeNames = [
  "default",
  "surface",
  "surface-light",
  "surface-dark",
  "neutral",
  "neutral-light",
  "neutral-dark",
  "inverse",
  "inverse-light",
  "inverse-dark"
];
var appStateColorSchemeNames = [
  "danger",
  "info",
  "danger",
  "caution",
  "success"
];
var colorSchemeNames = [
  ...mainColorSchemeNames,
  ...appStateColorSchemeNames
];
Object.fromEntries(
  colorSchemeNames.map((schemeName) => {
    return [`${schemeName}-color-scheme`, `color-scheme=${schemeName}`];
  })
);
defineColorSchemes(colorSchemeConfigs);

// src/config/screens.ts
var screens = {
  sm: "640px",
  md: "768px",
  lg: "1024px",
  xl: "1280px",
  "2xl": "1536px"
};

// src/config/data-attributes.ts
var dataAttributes = {
  "data-antribute-list": "divide no-item-gutters no-gap zebra-items rounded-items",
  "data-antribute-card": "padding padding-none"
};
function getDataAttributes(dataAttributeOptions) {
  const entries = Object.entries(dataAttributeOptions).map(([attributeKey, filterValue]) => {
    const dataAttributeValue = dataAttributes[attributeKey];
    if (typeof dataAttributeValue === "string") {
      const filtered = filterStringAttributes(dataAttributeValue, filterValue);
      return [attributeKey, filtered];
    }
    if (typeof dataAttributeValue === "boolean") {
      return [attributeKey, String(filterValue)];
    }
    return [attributeKey, void 0];
  });
  function filterStringAttributes(str, values) {
    return str.split(" ").filter((attribute) => {
      return Boolean(
        values && typeof values === "object" && attribute in values && values[attribute]
      );
    }).join(" ");
  }
  return Object.fromEntries(entries);
}
getDataAttributes({ "data-antribute-card": { "padding-none": true } });
var parseUnitValue = (str) => {
  const match = str.match(/^(\d+(?:\.\d+)?)(\D*)$/);
  if (!match)
    return { value: NaN, unit: null };
  const [match1 = "", match2] = match;
  const value = parseFloat(match1);
  const isNumeric = lodashEs.isNumber(value) && !lodashEs.isNaN(value);
  return { value, unit: match2 || isNumeric ? "px" : null };
};

// src/hooks/useBreakpoints.tsx
var screenSizes = {
  xs: calculateXsScreenSize(),
  ...screens
};
objectMap(screenSizes, ({ key, value }) => {
  return [`$${key}`, value];
});
var breakpoints = objectMap(screenSizes, ({ key, value: size }) => {
  return [`$${key}`, { above: `(min-width: ${size})`, below: `(max-width: ${size})` }];
});
function useBreakpoints() {
  const $xs = reactResponsive.useMediaQuery({ query: breakpoints.$xs.below });
  const $sm = reactResponsive.useMediaQuery({ query: breakpoints.$sm.above });
  const $md = reactResponsive.useMediaQuery({ query: breakpoints.$md.above });
  const $lg = reactResponsive.useMediaQuery({ query: breakpoints.$lg.above });
  const $xl = reactResponsive.useMediaQuery({ query: breakpoints.$xl.above });
  const $2xl = reactResponsive.useMediaQuery({ query: breakpoints.$2xl.above });
  const breakpointMap = {
    $xs,
    $sm,
    $md,
    $lg,
    $xl,
    $2xl
  };
  return breakpointMap;
}
function calculateXsScreenSize() {
  const smallScreen = parseUnitValue(screens.sm);
  return `${smallScreen.value - 1}${smallScreen.unit}`;
}
var mainSlotIds = [
  "overline",
  "title",
  "heading",
  "subheading",
  "subtitle",
  "body",
  "description",
  "caption"
];
var startSlotIds = generateSlotIds("start");
var endSlotIds = generateSlotIds("end");
var labelSlotIds = generateSlotIds("label");
function generateSlotIds(prefix) {
  return mainSlotIds.map((id) => `${prefix}${lodashEs.capitalize(id)}`);
}
var slotIdGrid = mainSlotIds.map((mainSlotId, i) => [
  startSlotIds[i],
  mainSlotId,
  endSlotIds[i]
]);
slotIdGrid.flat();
var DetailContainer = classed("div", "grid relative w-full", {
  variants: {
    gapX: {
      false: "",
      xs: "gap-x-4",
      sm: "gap-x-6",
      md: "gap-x-16",
      lg: "gap-x-36"
    },
    gapY: {
      false: "",
      xs: " gap-y-1",
      sm: "gap-y-4",
      md: "gap-y-8",
      lg: "gap-y-10"
    }
  },
  defaultVariants: {
    gapX: "md",
    gapY: "xs"
  }
});
function useDetailSlotProps(props) {
  const { adaptive = false } = props;
  const { $md, $sm } = useBreakpoints();
  const startDetailSlots = lodashEs.pick(props, startSlotIds);
  const mainDeailSlots = lodashEs.pick(props, mainSlotIds);
  const endDetailSlots = lodashEs.pick(props, endSlotIds);
  const labelDetailSlots = lodashEs.pick(props, labelSlotIds);
  const leadingDetailSlots = lodashEs.pick(props, ["start"]);
  const trailingDetailSlots = lodashEs.pick(props, ["end"]);
  const allSlots = [
    startDetailSlots,
    mainDeailSlots,
    endDetailSlots,
    labelDetailSlots,
    leadingDetailSlots,
    trailingDetailSlots
  ];
  const hasSlots = !allSlots.every((e) => lodashEs.isEmpty(e));
  const initialSlots = {
    leadingDetailSlots,
    startDetailSlots,
    mainDeailSlots,
    endDetailSlots,
    trailingDetailSlots,
    labelDetailSlots,
    hasSlots,
    props
  };
  if (!adaptive)
    return initialSlots;
  if ($md) {
    return initialSlots;
  }
  if ($sm) {
    return {
      mainDeailSlots: {
        ...leadingDetailSlots,
        ...startDetailSlots,
        ...mainDeailSlots
      },
      trailingDetailSlots,
      startDetailSlots: {},
      endDetailSlots: {},
      leadingDetailSlots: {},
      labelDetailSlots: {},
      hasSlots,
      props
    };
  }
  return {
    mainDeailSlots: {
      ...leadingDetailSlots,
      ...startDetailSlots,
      ...endDetailSlots,
      ...trailingDetailSlots,
      ...mainDeailSlots
    },
    startDetailSlots: {},
    endDetailSlots: {},
    leadingDetailSlots: {},
    trailingDetailSlots: {},
    labelDetailSlots: {},
    hasSlots,
    props
  };
}
var Detail = (props) => {
  const detailProps = useDetailSlotProps(props);
  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: detailProps.hasSlots ? /* @__PURE__ */ jsxRuntime.jsx(DetailComponent, { ...detailProps }) : null });
};
var DetailComponent = ({
  endDetailSlots,
  mainDeailSlots,
  startDetailSlots,
  trailingDetailSlots,
  labelDetailSlots,
  leadingDetailSlots,
  props
}) => {
  const { className, style, gapY, gapX } = props;
  const { start: startSlot, end: endSlot } = { ...leadingDetailSlots, ...trailingDetailSlots };
  const startColumnRef = react$1.useRef(null);
  const mainColumnRef = react$1.useRef(null);
  const endColumnRef = react$1.useRef(null);
  const initialSlotColumns = [
    {
      column: "start",
      columnRef: startColumnRef,
      gridData: {
        gridTemplateColumn: "min-content",
        column: { justify: "start" }
      },
      slotRecord: startDetailSlots
    },
    {
      column: "main",
      columnRef: mainColumnRef,
      gridData: {
        gridTemplateColumn: "auto",
        column: {}
      },
      slotRecord: mainDeailSlots
    },
    {
      column: "end",
      columnRef: endColumnRef,
      gridData: {
        gridTemplateColumn: "min-content",
        column: { justify: "end" }
      },
      slotRecord: endDetailSlots
    }
  ];
  const slotColumns = initialSlotColumns.map(({ slotRecord, column, ...rest }) => {
    const record = lodashEs.omitBy(slotRecord, (e) => e === void 0);
    return {
      ...rest,
      column,
      active: !lodashEs.isEmpty(record),
      slotRecord: objectMap(record, ({ key, value }) => {
        const slotId = slotIdToMainSlotId(`${key}`) || key;
        const gridArea = buildGridAreaId(slotId, column);
        const slotData = {
          slotId,
          gridArea,
          column,
          ...rest,
          ...normalizeSlotPropData(value)
        };
        return [slotId, slotData];
      })
    };
  });
  const activeSlotIds = lodashEs.uniq(slotColumns.flatMap((e) => Object.keys(e.slotRecord)));
  const activeColumns = react$1.useMemo(() => {
    const cols = slotColumns.map((e) => {
      if (!e.active && (startSlot && e.column === "start" || endSlot && e.column === "end")) {
        e.active = true;
      }
      return e;
    });
    return cols.filter((e) => e.active);
  }, [endSlot, slotColumns, startSlot]);
  const activeColumnIds = activeColumns.map((e) => e.column);
  const transformedSlotColumns = slotColumns.map((e) => {
    const slotRecordWithPlaceholders = activeSlotIds.reduce((acc, activeSlotId) => {
      if (!(activeSlotId in acc) && activeColumnIds.includes(e.column)) {
        const placeholderSlotData = {
          ...e,
          slotId: activeSlotId,
          placeholder: buildPlaceholderId(e.column),
          value: void 0,
          column: e.column,
          gridArea: `placeholder-${buildGridAreaId(activeSlotId, e.column)}`
        };
        acc[activeSlotId] = placeholderSlotData;
      }
      return acc;
    }, e.slotRecord);
    const slots2 = Object.values(slotRecordWithPlaceholders);
    const orderedSlots = lodashEs.orderBy(slots2, (e2) => ["start", ...mainSlotIds, "end"].indexOf(e2.slotId));
    return { ...e, slots: orderedSlots };
  });
  const slotRows = Object.values(
    lodashEs.groupBy(transformedSlotColumns.flatMap((e) => e.slots).flat(), (e) => e.slotId)
  );
  const slots = slotRows.flat();
  const gridTemplateAreas = slotRows.map((e) => `"${e.map((r) => r.gridArea).join(" ")}"`).join("\n");
  const gridTemplateColumns = activeColumns.map(({ gridData }) => gridData.gridTemplateColumn).join(" ");
  const slotRefs = useSlotRefs();
  const gridRef = react$1.useRef(null);
  const [isVisible, setIsVisible] = react$1.useState(!(startSlot ?? endSlot));
  react$1.useLayoutEffect(() => {
    setIsVisible(true);
  }, []);
  const gridHeight = measureElement(gridRef).height;
  return /* @__PURE__ */ jsxRuntime.jsxs(
    DetailContainer,
    {
      dir: "column",
      gapY,
      gapX,
      ref: gridRef,
      className: clsx4__default.default(className, {
        invisible: !isVisible
      }),
      style: { gridTemplateAreas, gridTemplateColumns, ...style },
      children: [
        /* @__PURE__ */ jsxRuntime.jsx(
          AlignedSlot,
          {
            position: "start",
            ref: slotRefs.startRef,
            slot: startSlot,
            gridHeight,
            slotRows,
            activeSlotIds
          },
          `${gridTemplateAreas}-start`
        ),
        slots.map((slotData) => {
          const { slotId, column, gridArea, gridData, align, columnRef } = slotData;
          const { justify } = gridData.column;
          const floatRight = true;
          return /* @__PURE__ */ jsxRuntime.jsx(
            Flex,
            {
              gap: true,
              ref: columnRef,
              className: clsx4__default.default("relative", {
                "text-left": column === "start" || column === "main",
                "text-right": column === "end",
                "pb-0": slotId === "overline" && slotRows.length > 1,
                "pt-8": slotId === "caption" && slotRows.length > 1,
                "pt-0": slotId === "description" && slotRows.length > 1,
                "pt-2": slotId === "body" && slotRows.length > 1
              }),
              align: align ?? "center",
              style: { gridArea },
              justify,
              children: /* @__PURE__ */ jsxRuntime.jsxs(
                "div",
                {
                  className: clsx4__default.default("w-full", {
                    "float-right": floatRight,
                    "inline-flex items-center": !floatRight
                  }),
                  children: [
                    /* @__PURE__ */ jsxRuntime.jsx(
                      DetailText,
                      {
                        currentColor: props.currentColor,
                        className: clsx4__default.default("items-center", {
                          "justify-end": column === "end",
                          "inline-flex": !floatRight,
                          // grow: true,
                          grow: column === "end"
                        }),
                        slotProps: slotData,
                        slotId,
                        style: { gridArea: slotData.gridArea }
                      }
                    ),
                    column === "main" && slotData.value && /* @__PURE__ */ jsxRuntime.jsx(
                      DetailText,
                      {
                        currentColor: props.currentColor,
                        className: clsx4__default.default("text-left shrink-0 grow", {
                          "float-right": floatRight,
                          "pl-8": slotData.value
                        }),
                        slotProps: {
                          color: "subtle",
                          size: "sm",
                          ...normalizeSlotPropData(lodashEs.get(labelDetailSlots, `label${lodashEs.capitalize(slotId)}`))
                        }
                      }
                    )
                  ]
                }
              )
            },
            `${slotId}-${column}`
          );
        }),
        /* @__PURE__ */ jsxRuntime.jsx(
          AlignedSlot,
          {
            position: "end",
            ref: slotRefs.endRef,
            slot: endSlot,
            gridHeight,
            slotRows,
            activeSlotIds
          },
          `${gridTemplateAreas}-end`
        )
      ]
    }
  );
};
function DetailText(props) {
  const { slotProps, slotId, className, style, currentColor } = props;
  const slotData = isSlotItemProps(slotProps) ? slotProps : normalizeSlotPropData(slotProps);
  const { variant, value, className: overrideClassName, ...overrideTextProps } = slotData;
  const textSlotProps = textComponentProps[variant ?? slotId ?? "body"];
  const color = overrideTextProps.color ?? (currentColor ? "current" : textSlotProps.color);
  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: slotData.value ? /* @__PURE__ */ jsxRuntime.jsx(
    Text,
    {
      ...textSlotProps,
      ...overrideTextProps,
      color,
      className: tailwindMerge.twMerge(className, overrideClassName),
      style,
      children: value
    }
  ) : null });
}
var AlignedSlot = react$1.forwardRef(
  ({ slot, position, slotRows }, forwardedRef) => {
    const rowCount = slotRows.length;
    const innerElDimensions = useDimensions__default.default();
    const { value: children, ...textProps } = normalizeSlotPropData(slot);
    const atIndex = position === "start" ? 0 : -1;
    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: slot ? /* @__PURE__ */ jsxRuntime.jsx(
      "div",
      {
        ref: forwardedRef,
        className: "relative w-full",
        style: {
          gridArea: slotRows[0]?.at(atIndex)?.gridArea,
          gridRow: "1 / -1",
          minWidth: innerElDimensions.width
        },
        children: /* @__PURE__ */ jsxRuntime.jsx(
          Flex,
          {
            gap: true,
            className: clsx4__default.default("absolute -translate-y-1/2 top-2/4 z-10", {
              "left-0": position === "start",
              "right-0": position === "end"
            }),
            justify: position,
            ref: innerElDimensions.observe,
            children: /* @__PURE__ */ jsxRuntime.jsx(Wrap, { if: rowCount >= 3, wrap: (c) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "translate-y-1/3", children: c }), children: /* @__PURE__ */ jsxRuntime.jsxs(Text, { ...textProps, children: [
              " ",
              children
            ] }) })
          }
        )
      }
    ) : null });
  }
);
function useSlotRefs() {
  const startRef = react$1.useRef(null);
  const endRef = react$1.useRef(null);
  return { startRef, endRef };
}
function buildPlaceholderId(column) {
  return `placeholder-${column}`;
}
function buildGridAreaId(rowId, column) {
  return `${rowId}-${column}`;
}
function slotIdToMainSlotId(propKey) {
  let key = propKey;
  if (key.startsWith("start"))
    key = key.replace("start", "");
  if (key.startsWith("end"))
    key = key.replace("end", "");
  if (key.startsWith("placeholder"))
    key = key.replace("placeholder", "");
  return key.toLowerCase();
}
function normalizeSlotPropData(item) {
  if (isSlotItemProps(item)) {
    return item;
  }
  return { value: item };
}
function isSlotItemProps(item) {
  return Boolean(item && typeof item === "object" && "value" in item);
}

exports.Detail = Detail;
exports.DetailComponent = DetailComponent;
//# sourceMappingURL=out.js.map
//# sourceMappingURL=index.cjs.map