@ehubbell/html/dist/index.es.js

An HTML component library with Tailwind rollups.

import { jsx } from "react/jsx-runtime";
const tailwindBaseKeys = {
  align: "",
  alignContent: "",
  alignItems: "",
  alignSelf: "",
  animation: "",
  appearance: "",
  aspect: "",
  bgBlur: "",
  bgAttachment: "",
  bgClip: "",
  bgColor: "",
  bgImage: "",
  bgOrigin: "",
  bgOpacity: "",
  bgPosition: "",
  bgRepeat: "",
  bgSize: "",
  borderCollapse: "",
  border: "",
  borderColor: "",
  borderOpacity: "",
  borderRadius: "",
  borderSpacing: "",
  borderStyle: "",
  borderWidth: "",
  bottom: "",
  basis: "",
  color: "",
  columns: "",
  cursor: "",
  display: "",
  divide: "",
  divideColor: "",
  divideOpacity: "",
  divideStyle: "",
  divideWidth: "",
  duration: "",
  fade: "",
  focus: "",
  fontFamily: "",
  fontSize: "",
  fontStyle: "",
  fontWeight: "",
  fontVariant: "",
  flex: "",
  flexDirection: "",
  flexWrap: "",
  fill: "",
  forcedColorAdjust: "",
  grid: "",
  gridColumn: "",
  gridCols: "",
  gridFlow: "",
  gridRow: "",
  gridRows: "",
  group: "",
  grow: "",
  height: "",
  hover: "",
  items: "",
  inset: "",
  justify: "",
  justifyContent: "",
  justifyItems: "",
  justifySelf: "",
  leading: "",
  left: "",
  lineClamp: "",
  listImg: "",
  listPosition: "",
  listStyle: "",
  location: "",
  margin: "",
  maxHeight: "",
  maxWidth: "",
  minHeight: "",
  minWidth: "",
  objectFit: "",
  objectPosition: "",
  opacity: "",
  origin: "",
  outline: "",
  outlineColor: "",
  outlineOffset: "",
  outlineStyle: "",
  outlineWidth: "",
  overflow: "",
  overflowWrap: "",
  padding: "",
  path: "",
  placeholderColor: "",
  placeContent: "",
  placeItems: "",
  placeSelf: "",
  pointerEvents: "",
  position: "",
  ring: "",
  ringColor: "",
  ringOffset: "",
  ringOffsetColor: "",
  resize: "",
  right: "",
  rotate: "",
  scale: "",
  shadow: "",
  shadowColor: "",
  shrink: "",
  size: "",
  space: "",
  spacing: "",
  stroke: "",
  strokeWidth: "",
  tableLayout: "",
  textAlign: "",
  textColor: "",
  textDecoration: "",
  textOverflow: "",
  textTransform: "",
  textWrap: "",
  top: "",
  tracking: "",
  transform: "",
  transition: "",
  translate: "",
  touchAction: "",
  userSelect: "",
  visibility: "",
  willChange: "",
  weight: "",
  whitespace: "",
  width: "",
  wordBreak: "",
  zIndex: "",
  variants: "",
  tailwind: ""
};
const tailwindContainerKeys = {
  center: "",
  gutters: ""
};
const tailwindGridKeys = {
  cols: "",
  rows: "",
  flow: "",
  gap: "",
  autoCols: "",
  autoRows: ""
};
const tailwindColKeys = {
  sm: "",
  md: "",
  lg: "",
  xl: "",
  xxl: "",
  span: "",
  order: ""
};
const tailwindKeys = {
  ...tailwindBaseKeys,
  ...tailwindContainerKeys,
  ...tailwindGridKeys,
  ...tailwindColKeys
};
const tailwindKeySet = new Set(Object.keys(tailwindKeys));
const classNameKeySet = /* @__PURE__ */ new Set([...tailwindKeySet, "className"]);
const hasOwn = Object.prototype.hasOwnProperty;
const isClassName = (value) => typeof value === "string" && value.length > 0 && value !== "undefined";
const filterProps = (data = {}, attrs = [], include = true) => {
  const formattedData = {};
  const attrSet = new Set(attrs);
  for (const key in data) {
    if (include ? attrSet.has(key) : !attrSet.has(key)) {
      formattedData[key] = data[key];
    }
  }
  return formattedData;
};
const formatProps = (props = {}) => {
  const formattedData = {};
  for (const key in props) {
    if (!tailwindKeySet.has(key)) {
      formattedData[key] = props[key];
    }
  }
  return formattedData;
};
const formatClassNames = (props = {}, className = "") => {
  let classes = "";
  for (const key in props) {
    if (classNameKeySet.has(key) && isClassName(props[key])) {
      classes += props[key] + " ";
    }
  }
  if (isClassName(className)) {
    classes += className + " ";
  }
  return classes;
};
const formatElementProps = (props = {}, tailwind = {}, className = "") => {
  const formattedProps = {};
  const hasTailwindProps = tailwind && typeof tailwind === "object";
  let classes = "";
  for (const key in props) {
    if (key === "className") {
      if (isClassName(props[key])) {
        classes += props[key] + " ";
      }
    } else if (tailwindKeySet.has(key)) {
      const value = hasTailwindProps && hasOwn.call(tailwind, key) ? tailwind[key] : props[key];
      if (isClassName(value)) {
        classes += value + " ";
      }
    } else {
      formattedProps[key] = props[key];
    }
  }
  if (hasTailwindProps) {
    for (const key in tailwind) {
      if (tailwindKeySet.has(key) && !hasOwn.call(props, key) && isClassName(tailwind[key])) {
        classes += tailwind[key] + " ";
      }
    }
  }
  if (isClassName(className)) {
    classes += className + " ";
  }
  return {
    className: classes,
    props: formattedProps
  };
};
const A = ({ name = "A", tailwind, className, ...props }) => {
  const formatted = formatElementProps(props, tailwind, className);
  return /* @__PURE__ */ jsx("a", { "data-name": name, className: formatted.className, ...formatted.props });
};
const Abbr = ({ name = "Abbr", tailwind, className, ...props }) => {
  const formatted = formatElementProps(props, tailwind, className);
  return /* @__PURE__ */ jsx("abbr", { "data-name": name, className: formatted.className, ...formatted.props });
};
const Address = ({ name = "Address", tailwind, className, ...props }) => {
  const formatted = formatElementProps(props, tailwind, className);
  return /* @__PURE__ */ jsx("address", { "data-name": name, className: formatted.className, ...formatted.props });
};
const Area = ({ name = "Area", tailwind, className, ...props }) => {
  const formatted = formatElementProps(props, tailwind, className);
  return /* @__PURE__ */ jsx("area", { "data-name": name, className: formatted.className, ...formatted.props });
};
const Article = ({ name = "Article", tailwind, className, ...props }) => {
  const formatted = formatElementProps(props, tailwind, className);
  return /* @__PURE__ */ jsx("article", { "data-name": name, className: formatted.className, ...formatted.props });
};
const Aside = ({ name = "Aside", tailwind, className, ...props }) => {
  const formatted = formatElementProps(props, tailwind, className);
  return /* @__PURE__ */ jsx("aside", { "data-name": name, className: formatted.className, ...formatted.props });
};
const Audio = ({ name = "Audio", tailwind, className, ...props }) => {
  const formatted = formatElementProps(props, tailwind, className);
  return /* @__PURE__ */ jsx("audio", { "data-name": name, className: formatted.className, ...formatted.props });
};
const B = ({ name = "B", tailwind, className, ...props }) => {
  const formatted = formatElementProps(props, tailwind, className);
  return /* @__PURE__ */ jsx("b", { "data-name": name, className: formatted.className, ...formatted.props });
};
const Base = ({ name = "Base", tailwind, className, ...props }) => {
  const formatted = formatElementProps(props, tailwind, className);
  return /* @__PURE__ */ jsx("base", { "data-name": name, className: formatted.className, ...formatted.props });
};
const Bdi = ({ name = "Bdi", tailwind, className, ...props }) => {
  const formatted = formatElementProps(props, tailwind, className);
  return /* @__PURE__ */ jsx("bdi", { "data-name": name, className: formatted.className, ...formatted.props });
};
const Bdo = ({ name = "Bdo", tailwind, className, ...props }) => {
  const formatted = formatElementProps(props, tailwind, className);
  return /* @__PURE__ */ jsx("bdo", { "data-name": name, className: formatted.className, ...formatted.props });
};
const Blockquote = ({ name = "Blockquote", tailwind, className, ...props }) => {
  const formatted = formatElementProps(props, tailwind, className);
  return /* @__PURE__ */ jsx("blockquote", { "data-name": name, className: formatted.className, ...formatted.props });
};
const Body = ({ name = "Body", tailwind, className, ...props }) => {
  const formatted = formatElementProps(props, tailwind, className);
  return /* @__PURE__ */ jsx("body", { "data-name": name, className: formatted.className, ...formatted.props });
};
const Br = ({ name = "Br", tailwind, className, ...props }) => {
  const formatted = formatElementProps(props, tailwind, className);
  return /* @__PURE__ */ jsx("br", { "data-name": name, className: formatted.className, ...formatted.props });
};
const Button = ({ name = "Button", tailwind, className, ...props }) => {
  const formatted = formatElementProps(props, tailwind, className);
  return /* @__PURE__ */ jsx("button", { "data-name": name, className: formatted.className, ...formatted.props });
};
const Canvas = ({ name = "Canvas", tailwind, className, ...props }) => {
  const formatted = formatElementProps(props, tailwind, className);
  return /* @__PURE__ */ jsx("canvas", { "data-name": name, className: formatted.className, ...formatted.props });
};
const Caption = ({ name = "Caption", tailwind, className, ...props }) => {
  const formatted = formatElementProps(props, tailwind, className);
  return /* @__PURE__ */ jsx("caption", { "data-name": name, className: formatted.className, ...formatted.props });
};
const Cite = ({ name = "Cite", tailwind, className, ...props }) => {
  const formatted = formatElementProps(props, tailwind, className);
  return /* @__PURE__ */ jsx("cite", { "data-name": name, className: formatted.className, ...formatted.props });
};
const Code = ({ name = "Code", tailwind, className, ...props }) => {
  const formatted = formatElementProps(props, tailwind, className);
  return /* @__PURE__ */ jsx("code", { "data-name": name, className: formatted.className, ...formatted.props });
};
const Data = ({ name = "Data", tailwind, className, ...props }) => {
  const formatted = formatElementProps(props, tailwind, className);
  return /* @__PURE__ */ jsx("data", { "data-name": name, className: formatted.className, ...formatted.props });
};
const DataList = ({ name = "DataList", tailwind, className, ...props }) => {
  const formatted = formatElementProps(props, tailwind, className);
  return /* @__PURE__ */ jsx("datalist", { "data-name": name, className: formatted.className, ...formatted.props });
};
const DD = ({ name = "DD", tailwind, className, ...props }) => {
  const formatted = formatElementProps(props, tailwind, className);
  return /* @__PURE__ */ jsx("dd", { "data-name": name, className: formatted.className, ...formatted.props });
};
const Del = ({ name = "Del", tailwind, className, ...props }) => {
  const formatted = formatElementProps(props, tailwind, className);
  return /* @__PURE__ */ jsx("del", { "data-name": name, className: formatted.className, ...formatted.props });
};
const Details = ({ name = "Details", tailwind, className, ...props }) => {
  const formatted = formatElementProps(props, tailwind, className);
  return /* @__PURE__ */ jsx("details", { "data-name": name, className: formatted.className, ...formatted.props });
};
const Dfn = ({ name = "Dfn", tailwind, className, ...props }) => {
  const formatted = formatElementProps(props, tailwind, className);
  return /* @__PURE__ */ jsx("dfn", { "data-name": name, className: formatted.className, ...formatted.props });
};
const Dialog = ({ name = "Dialog", tailwind, className, ...props }) => {
  const formatted = formatElementProps(props, tailwind, className);
  return /* @__PURE__ */ jsx("dialog", { "data-name": name, className: formatted.className, ...formatted.props });
};
const Div = ({ name = "Div", tailwind, className, ...props }) => {
  const formatted = formatElementProps(props, tailwind, className);
  return /* @__PURE__ */ jsx("div", { "data-name": name, className: formatted.className, ...formatted.props });
};
const Dl = ({ name = "Dl", tailwind, className, ...props }) => {
  const formatted = formatElementProps(props, tailwind, className);
  return /* @__PURE__ */ jsx("dl", { "data-name": name, className: formatted.className, ...formatted.props });
};
const Dt = ({ name = "Dt", tailwind, className, ...props }) => {
  const formatted = formatElementProps(props, tailwind, className);
  return /* @__PURE__ */ jsx("dt", { "data-name": name, className: formatted.className, ...formatted.props });
};
const Em = ({ name = "Em", tailwind, className, ...props }) => {
  const formatted = formatElementProps(props, tailwind, className);
  return /* @__PURE__ */ jsx("em", { "data-name": name, className: formatted.className, ...formatted.props });
};
const Embed = ({ name = "Embed", tailwind, className, ...props }) => {
  const formatted = formatElementProps(props, tailwind, className);
  return /* @__PURE__ */ jsx("embed", { "data-name": name, className: formatted.className, ...formatted.props });
};
const FieldSet = ({ name = "FieldSet", tailwind, className, ...props }) => {
  const formatted = formatElementProps(props, tailwind, className);
  return /* @__PURE__ */ jsx("fieldset", { "data-name": name, className: formatted.className, ...formatted.props });
};
const FigCaption = ({ name = "FigCaption", tailwind, className, ...props }) => {
  const formatted = formatElementProps(props, tailwind, className);
  return /* @__PURE__ */ jsx("figcaption", { "data-name": name, className: formatted.className, ...formatted.props });
};
const Form = ({ name = "Form", tailwind, className, ...props }) => {
  const formatted = formatElementProps(props, tailwind, className);
  return /* @__PURE__ */ jsx("form", { "data-name": name, className: formatted.className, ...formatted.props });
};
const Figure = ({ name = "Figure", tailwind, className, ...props }) => {
  const formatted = formatElementProps(props, tailwind, className);
  return /* @__PURE__ */ jsx("figure", { "data-name": name, className: formatted.className, ...formatted.props });
};
const Footer = ({ name = "Footer", tailwind, className, ...props }) => {
  const formatted = formatElementProps(props, tailwind, className);
  return /* @__PURE__ */ jsx("footer", { "data-name": name, className: formatted.className, ...formatted.props });
};
const H1 = ({ name = "H1", tailwind, className, ...props }) => {
  const formatted = formatElementProps(props, tailwind, className);
  return /* @__PURE__ */ jsx("h1", { "data-name": name, className: formatted.className, ...formatted.props });
};
const H2 = ({ name = "H2", tailwind, className, ...props }) => {
  const formatted = formatElementProps(props, tailwind, className);
  return /* @__PURE__ */ jsx("h2", { "data-name": name, className: formatted.className, ...formatted.props });
};
const H3 = ({ name = "H3", tailwind, className, ...props }) => {
  const formatted = formatElementProps(props, tailwind, className);
  return /* @__PURE__ */ jsx("h3", { "data-name": name, className: formatted.className, ...formatted.props });
};
const H4 = ({ name = "H4", tailwind, className, ...props }) => {
  const formatted = formatElementProps(props, tailwind, className);
  return /* @__PURE__ */ jsx("h4", { "data-name": name, className: formatted.className, ...formatted.props });
};
const H5 = ({ name = "H5", tailwind, className, ...props }) => {
  const formatted = formatElementProps(props, tailwind, className);
  return /* @__PURE__ */ jsx("h5", { "data-name": name, className: formatted.className, ...formatted.props });
};
const H6 = ({ name = "H6", tailwind, className, ...props }) => {
  const formatted = formatElementProps(props, tailwind, className);
  return /* @__PURE__ */ jsx("h6", { "data-name": name, className: formatted.className, ...formatted.props });
};
const Head = ({ name = "Head", tailwind, className, ...props }) => {
  const formatted = formatElementProps(props, tailwind, className);
  return /* @__PURE__ */ jsx("head", { "data-name": name, className: formatted.className, ...formatted.props });
};
const Header = ({ name = "Header", tailwind, className, ...props }) => {
  const formatted = formatElementProps(props, tailwind, className);
  return /* @__PURE__ */ jsx("header", { "data-name": name, className: formatted.className, ...formatted.props });
};
const Hr = ({ name = "Hr", tailwind, className, ...props }) => {
  const formatted = formatElementProps(props, tailwind, className);
  return /* @__PURE__ */ jsx("hr", { "data-name": name, className: formatted.className, ...formatted.props });
};
const Html = ({ name = "HTML", tailwind, className, ...props }) => {
  const formatted = formatElementProps(props, tailwind, className);
  return /* @__PURE__ */ jsx("html", { "data-name": name, className: formatted.className, ...formatted.props });
};
const Iframe = ({ name = "Iframe", tailwind, className, ...props }) => {
  const formatted = formatElementProps(props, tailwind, className);
  return /* @__PURE__ */ jsx("iframe", { "data-name": name, className: formatted.className, ...formatted.props });
};
const Img = ({ name = "Img", tailwind, className, ...props }) => {
  const formatted = formatElementProps(props, tailwind, className);
  return /* @__PURE__ */ jsx("img", { "data-name": name, className: formatted.className, ...formatted.props });
};
const Input = ({ name = "Input", tailwind, className, ...props }) => {
  const formatted = formatElementProps(props, tailwind, className);
  return /* @__PURE__ */ jsx("input", { "data-name": name, className: formatted.className, ...formatted.props });
};
const Ins = ({ name = "Ins", tailwind, className, ...props }) => {
  const formatted = formatElementProps(props, tailwind, className);
  return /* @__PURE__ */ jsx("ins", { "data-name": name, className: formatted.className, ...formatted.props });
};
const Kbd = ({ name = "Kbd", tailwind, className, ...props }) => {
  const formatted = formatElementProps(props, tailwind, className);
  return /* @__PURE__ */ jsx("kbd", { "data-name": name, className: formatted.className, ...formatted.props });
};
const Label = ({ name = "Label", tailwind, className, ...props }) => {
  const formatted = formatElementProps(props, tailwind, className);
  return /* @__PURE__ */ jsx("label", { "data-name": name, className: formatted.className, ...formatted.props });
};
const Legend = ({ name = "Legend", tailwind, className, ...props }) => {
  const formatted = formatElementProps(props, tailwind, className);
  return /* @__PURE__ */ jsx("legend", { "data-name": name, className: formatted.className, ...formatted.props });
};
const Link = ({ name = "Link", tailwind, className, ...props }) => {
  const formatted = formatElementProps(props, tailwind, className);
  return /* @__PURE__ */ jsx("link", { "data-name": name, className: formatted.className, ...formatted.props });
};
const Li = ({ name = "Li", tailwind, className, ...props }) => {
  const formatted = formatElementProps(props, tailwind, className);
  return /* @__PURE__ */ jsx("li", { "data-name": name, className: formatted.className, ...formatted.props });
};
const Main = ({ name = "Main", tailwind, className, ...props }) => {
  const formatted = formatElementProps(props, tailwind, className);
  return /* @__PURE__ */ jsx("main", { "data-name": name, className: formatted.className, ...formatted.props });
};
const Map = ({ name = "Map", tailwind, className, ...props }) => {
  const formatted = formatElementProps(props, tailwind, className);
  return /* @__PURE__ */ jsx("map", { "data-name": name, className: formatted.className, ...formatted.props });
};
const Mark = ({ name = "Mark", tailwind, className, ...props }) => {
  const formatted = formatElementProps(props, tailwind, className);
  return /* @__PURE__ */ jsx("mark", { "data-name": name, className: formatted.className, ...formatted.props });
};
const Menu = ({ name = "Menu", tailwind, className, ...props }) => {
  const formatted = formatElementProps(props, tailwind, className);
  return /* @__PURE__ */ jsx("menu", { "data-name": name, className: formatted.className, ...formatted.props });
};
const Meta = ({ name = "Meta", tailwind, className, ...props }) => {
  const formatted = formatElementProps(props, tailwind, className);
  return /* @__PURE__ */ jsx("meta", { "data-name": name, className: formatted.className, ...formatted.props });
};
const Meter = ({ name = "Meter", tailwind, className, ...props }) => {
  const formatted = formatElementProps(props, tailwind, className);
  return /* @__PURE__ */ jsx("meter", { "data-name": name, className: formatted.className, ...formatted.props });
};
const Nav = ({ name = "Nav", tailwind, className, ...props }) => {
  const formatted = formatElementProps(props, tailwind, className);
  return /* @__PURE__ */ jsx("nav", { "data-name": name, className: formatted.className, ...formatted.props });
};
const NoScript = ({ name = "NoScript", tailwind, className, ...props }) => {
  const formatted = formatElementProps(props, tailwind, className);
  return /* @__PURE__ */ jsx("noscript", { "data-name": name, className: formatted.className, ...formatted.props });
};
const ObjectComponent = ({ name = "Object", tailwind, className, ...props }) => {
  const formatted = formatElementProps(props, tailwind, className);
  return /* @__PURE__ */ jsx("object", { "data-name": name, className: formatted.className, ...formatted.props });
};
const Ol = ({ name = "Ol", tailwind, className, ...props }) => {
  const formatted = formatElementProps(props, tailwind, className);
  return /* @__PURE__ */ jsx("ol", { "data-name": name, className: formatted.className, ...formatted.props });
};
const OptGroup = ({ name = "OptGroup", tailwind, className, ...props }) => {
  const formatted = formatElementProps(props, tailwind, className);
  return /* @__PURE__ */ jsx("optgroup", { "data-name": name, className: formatted.className, ...formatted.props });
};
const Option = ({ name = "Option", tailwind, className, ...props }) => {
  const formatted = formatElementProps(props, tailwind, className);
  return /* @__PURE__ */ jsx("option", { "data-name": name, className: formatted.className, ...formatted.props });
};
const Output = ({ name = "Output", tailwind, className, ...props }) => {
  const formatted = formatElementProps(props, tailwind, className);
  return /* @__PURE__ */ jsx("output", { "data-name": name, className: formatted.className, ...formatted.props });
};
const P = ({ name = "P", tailwind, className, ...props }) => {
  const formatted = formatElementProps(props, tailwind, className);
  return /* @__PURE__ */ jsx("p", { "data-name": name, className: formatted.className, ...formatted.props });
};
const Pre = ({ name = "Pre", tailwind, className, ...props }) => {
  const formatted = formatElementProps(props, tailwind, className);
  return /* @__PURE__ */ jsx("pre", { "data-name": name, className: formatted.className, ...formatted.props });
};
const Param = ({ name = "Param", tailwind, className, ...props }) => {
  const formatted = formatElementProps(props, tailwind, className);
  return /* @__PURE__ */ jsx("param", { "data-name": name, className: formatted.className, ...formatted.props });
};
const Picture = ({ name = "Picture", tailwind, className, ...props }) => {
  const formatted = formatElementProps(props, tailwind, className);
  return /* @__PURE__ */ jsx("picture", { "data-name": name, className: formatted.className, ...formatted.props });
};
const Progress = ({ name = "Progress", tailwind, className, ...props }) => {
  const formatted = formatElementProps(props, tailwind, className);
  return /* @__PURE__ */ jsx("progress", { "data-name": name, className: formatted.className, ...formatted.props });
};
const Q = ({ name = "Q", tailwind, className, ...props }) => {
  const formatted = formatElementProps(props, tailwind, className);
  return /* @__PURE__ */ jsx("q", { "data-name": name, className: formatted.className, ...formatted.props });
};
const Rp = ({ name = "Rp", tailwind, className, ...props }) => {
  const formatted = formatElementProps(props, tailwind, className);
  return /* @__PURE__ */ jsx("rp", { "data-name": name, className: formatted.className, ...formatted.props });
};
const Rt = ({ name = "Rt", tailwind, className, ...props }) => {
  const formatted = formatElementProps(props, tailwind, className);
  return /* @__PURE__ */ jsx("rt", { "data-name": name, className: formatted.className, ...formatted.props });
};
const Ruby = ({ name = "Ruby", tailwind, className, ...props }) => {
  const formatted = formatElementProps(props, tailwind, className);
  return /* @__PURE__ */ jsx("ruby", { "data-name": name, className: formatted.className, ...formatted.props });
};
const S = ({ name = "S", tailwind, className, ...props }) => {
  const formatted = formatElementProps(props, tailwind, className);
  return /* @__PURE__ */ jsx("s", { "data-name": name, className: formatted.className, ...formatted.props });
};
const Samp = ({ name = "Samp", tailwind, className, ...props }) => {
  const formatted = formatElementProps(props, tailwind, className);
  return /* @__PURE__ */ jsx("samp", { "data-name": name, className: formatted.className, ...formatted.props });
};
const Script = ({ name = "Script", tailwind, className, ...props }) => {
  const formatted = formatElementProps(props, tailwind, className);
  return /* @__PURE__ */ jsx("script", { "data-name": name, className: formatted.className, ...formatted.props });
};
const Section = ({ name = "Section", tailwind, className, ...props }) => {
  const formatted = formatElementProps(props, tailwind, className);
  return /* @__PURE__ */ jsx("section", { "data-name": name, className: formatted.className, ...formatted.props });
};
const Select = ({ name = "Select", tailwind, className, ...props }) => {
  const formatted = formatElementProps(props, tailwind, className);
  return /* @__PURE__ */ jsx("select", { "data-name": name, className: formatted.className, ...formatted.props });
};
const Small = ({ name = "Small", tailwind, className, ...props }) => {
  const formatted = formatElementProps(props, tailwind, className);
  return /* @__PURE__ */ jsx("small", { "data-name": name, className: formatted.className, ...formatted.props });
};
const Source = ({ name = "Source", tailwind, className, ...props }) => {
  const formatted = formatElementProps(props, tailwind, className);
  return /* @__PURE__ */ jsx("source", { "data-name": name, className: formatted.className, ...formatted.props });
};
const Span = ({ name = "Span", tailwind, className, ...props }) => {
  const formatted = formatElementProps(props, tailwind, className);
  return /* @__PURE__ */ jsx("span", { "data-name": name, className: formatted.className, ...formatted.props });
};
const Ul = ({ name = "Ul", tailwind, className, ...props }) => {
  const formatted = formatElementProps(props, tailwind, className);
  return /* @__PURE__ */ jsx("ul", { "data-name": name, className: formatted.className, ...formatted.props });
};
const Strong = ({ name = "Strong", tailwind, className, ...props }) => {
  const formatted = formatElementProps(props, tailwind, className);
  return /* @__PURE__ */ jsx("strong", { "data-name": name, className: formatted.className, ...formatted.props });
};
const Sub = ({ name = "Sub", tailwind, className, ...props }) => {
  const formatted = formatElementProps(props, tailwind, className);
  return /* @__PURE__ */ jsx("sub", { "data-name": name, className: formatted.className, ...formatted.props });
};
const Summary = ({ name = "Summary", tailwind, className, ...props }) => {
  const formatted = formatElementProps(props, tailwind, className);
  return /* @__PURE__ */ jsx("summary", { "data-name": name, className: formatted.className, ...formatted.props });
};
const Sup = ({ name = "Sup", tailwind, className, ...props }) => {
  const formatted = formatElementProps(props, tailwind, className);
  return /* @__PURE__ */ jsx("sup", { "data-name": name, className: formatted.className, ...formatted.props });
};
const Table = ({ name = "Table", tailwind, className, ...props }) => {
  const formatted = formatElementProps(props, tailwind, className);
  return /* @__PURE__ */ jsx("table", { "data-name": name, className: formatted.className, ...formatted.props });
};
const TBody = ({ name = "TBody", tailwind, className, ...props }) => {
  const formatted = formatElementProps(props, tailwind, className);
  return /* @__PURE__ */ jsx("tbody", { "data-name": name, className: formatted.className, ...formatted.props });
};
const TD = ({ name = "TD", tailwind, className, ...props }) => {
  const formatted = formatElementProps(props, tailwind, className);
  return /* @__PURE__ */ jsx("td", { "data-name": name, className: formatted.className, ...formatted.props });
};
const Template = ({ name = "Template", tailwind, className, ...props }) => {
  const formatted = formatElementProps(props, tailwind, className);
  return /* @__PURE__ */ jsx("template", { "data-name": name, className: formatted.className, ...formatted.props });
};
const TextArea = ({ name = "TextArea", tailwind, className, ...props }) => {
  const formatted = formatElementProps(props, tailwind, className);
  return /* @__PURE__ */ jsx("textarea", { "data-name": name, className: formatted.className, ...formatted.props });
};
const TFoot = ({ name = "TFoot", tailwind, className, ...props }) => {
  const formatted = formatElementProps(props, tailwind, className);
  return /* @__PURE__ */ jsx("tfoot", { "data-name": name, className: formatted.className, ...formatted.props });
};
const TH = ({ name = "TH", tailwind, className, ...props }) => {
  const formatted = formatElementProps(props, tailwind, className);
  return /* @__PURE__ */ jsx("th", { "data-name": name, className: formatted.className, ...formatted.props });
};
const THead = ({ name = "THead", tailwind, className, ...props }) => {
  const formatted = formatElementProps(props, tailwind, className);
  return /* @__PURE__ */ jsx("thead", { "data-name": name, className: formatted.className, ...formatted.props });
};
const Time = ({ name = "Time", tailwind, className, ...props }) => {
  const formatted = formatElementProps(props, tailwind, className);
  return /* @__PURE__ */ jsx("time", { "data-name": name, className: formatted.className, ...formatted.props });
};
const Title = ({ name = "Title", tailwind, className, ...props }) => {
  const formatted = formatElementProps(props, tailwind, className);
  return /* @__PURE__ */ jsx("title", { "data-name": name, className: formatted.className, ...formatted.props });
};
const TR = ({ name = "TR", tailwind, className, ...props }) => {
  const formatted = formatElementProps(props, tailwind, className);
  return /* @__PURE__ */ jsx("tr", { "data-name": name, className: formatted.className, ...formatted.props });
};
const Track = ({ name = "Track", tailwind, className, ...props }) => {
  const formatted = formatElementProps(props, tailwind, className);
  return /* @__PURE__ */ jsx("track", { "data-name": name, className: formatted.className, ...formatted.props });
};
const U = ({ name = "U", tailwind, className, ...props }) => {
  const formatted = formatElementProps(props, tailwind, className);
  return /* @__PURE__ */ jsx("u", { "data-name": name, className: formatted.className, ...formatted.props });
};
const Var = ({ name = "Var", tailwind, className, ...props }) => {
  const formatted = formatElementProps(props, tailwind, className);
  return /* @__PURE__ */ jsx("var", { "data-name": name, className: formatted.className, ...formatted.props });
};
const Video = ({ name = "Video", tailwind, className, ...props }) => {
  const formatted = formatElementProps(props, tailwind, className);
  return /* @__PURE__ */ jsx("video", { "data-name": name, className: formatted.className, ...formatted.props });
};
const Wbr = ({ name = "Wbr", tailwind, className, ...props }) => {
  const formatted = formatElementProps(props, tailwind, className);
  return /* @__PURE__ */ jsx("wbr", { "data-name": name, className: formatted.className, ...formatted.props });
};
export {
  A,
  Abbr,
  Address,
  Area,
  Article,
  Aside,
  Audio,
  B,
  Base,
  Bdi,
  Bdo,
  Blockquote,
  Body,
  Br,
  Button,
  Canvas,
  Caption,
  Cite,
  Code,
  DD,
  Data,
  DataList,
  Del,
  Details,
  Dfn,
  Dialog,
  Div,
  Dl,
  Dt,
  Em,
  Embed,
  FieldSet,
  FigCaption,
  Figure,
  Footer,
  Form,
  H1,
  H2,
  H3,
  H4,
  H5,
  H6,
  Head,
  Header,
  Hr,
  Html,
  Iframe,
  Img,
  Input,
  Ins,
  Kbd,
  Label,
  Legend,
  Li,
  Link,
  Main,
  Map,
  Mark,
  Menu,
  Meta,
  Meter,
  Nav,
  NoScript,
  ObjectComponent as Object,
  Ol,
  OptGroup,
  Option,
  Output,
  P,
  Param,
  Picture,
  Pre,
  Progress,
  Q,
  Rp,
  Rt,
  Ruby,
  S,
  Samp,
  Script,
  Section,
  Select,
  Small,
  Source,
  Span,
  Strong,
  Sub,
  Summary,
  Sup,
  TBody,
  TD,
  TFoot,
  TH,
  THead,
  TR,
  Table,
  Template,
  TextArea,
  Time,
  Title,
  Track,
  U,
  Ul,
  Var,
  Video,
  Wbr,
  filterProps,
  formatClassNames,
  formatElementProps,
  formatProps
};