'use strict';

var tailwindMerge = require('tailwind-merge');
var lodashEs = require('lodash-es');
var react = require('@tw-classed/react');
var core = require('@tw-classed/core');
var clsx4 = require('clsx');
var createVariatGroupTransfomer = require('tailwind-group-variant');
var jsxRuntime = require('react/jsx-runtime');

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

var clsx4__default = /*#__PURE__*/_interopDefault(clsx4);
var createVariatGroupTransfomer__default = /*#__PURE__*/_interopDefault(createVariatGroupTransfomer);

// src/utils/classed/classed.ts
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 });
createVariatGroupTransfomer__default.default({});
function mergeVariants(variants, overrides) {
  const variantArray = Array.isArray(variants) ? variants : Object.values(variants);
  const mergerFn = (objectValue, sourceValue) => tailwindMerge.twMerge(`${objectValue || ""}`, `${sourceValue}`);
  const mergedVariants = lodashEs.mergeWith({}, ...[...variantArray, overrides], mergerFn);
  return mergedVariants;
}
var sizeVariants = {
  width: {
    xs: clsx4__default.default("w-28"),
    sm: clsx4__default.default("w-34"),
    md: clsx4__default.default("w-40"),
    lg: clsx4__default.default("w-48")
  },
  height: {
    xs: clsx4__default.default("h-28"),
    sm: clsx4__default.default("h-34"),
    md: clsx4__default.default("h-40"),
    lg: clsx4__default.default("h-48")
  },
  inlineWidth: {
    xs: clsx4__default.default("w-16 text-xs"),
    sm: clsx4__default.default("w-20 text-xs"),
    md: clsx4__default.default("w-22 text-xs"),
    lg: clsx4__default.default("w-26 text-xs")
  },
  inlineHeight: {
    xs: clsx4__default.default("h-16 text-xs"),
    sm: clsx4__default.default("h-20 text-xs"),
    md: clsx4__default.default("h-22 text-xs"),
    lg: clsx4__default.default("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__default.default("px-4"),
    sm: clsx4__default.default("px-6"),
    md: clsx4__default.default("px-8"),
    lg: clsx4__default.default("px-10")
  },
  extraPaddingX: {
    xs: clsx4__default.default("px-14"),
    sm: clsx4__default.default("px-16"),
    md: clsx4__default.default("px-18"),
    lg: clsx4__default.default("px-20")
  }
};
var KBDElement = classed(
  "kbd",
  "pointer-events-none px-8 inline-flex justify-center select-none items-center gap-2 rounded border border-highlight  bg-surface font-mono text-xs  font-medium text-content-weak opacity-100",
  {
    defaultVariants: {
      size: "md"
    },
    variants: {
      size: mergeVariants([sizeVariants.textSize, sizeVariants.inlineHeight])
    }
  }
);
var KBD = ({
  size = "md",
  children,
  keys,
  ...props
}) => {
  const modifiers = ["\u2318"];
  return /* @__PURE__ */ jsxRuntime.jsx(KBDElement, { size, ...props, children: keys.map((key) => {
    return /* @__PURE__ */ jsxRuntime.jsx("span", { className: clsx4.clsx({ "scale-90": modifiers.includes(key) }), children: key }, key);
  }) });
};

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