@playbooks/ui/dist/theme.es.js

An interface library for Playbooks.

const accordionProps = (open) => ({
  body: {
    border: open ? "border-b border-l border-r" : "border",
    borderRadius: open ? "rounded-bl rounded-br" : "rounded-md"
  },
  toggle: {
    border: "border",
    borderRadius: open ? "rounded-tl rounded-tr" : "rounded-md",
    spacing: "p-4"
  }
});
const cloudProps = {
  bgColor: "bg-gray-200/25 dark:bg-gray-700/25",
  color: "text-gray-500 dark:text-gray-400",
  fontSize: "text-sm",
  fontFamily: "font-secondary",
  size: "",
  spacing: "px-2 py-1"
};
const gradientBgColor = {
  bgColor: "bg-linear-to-br from-secondary to-primary"
};
const gradientSpan = {
  color: "text-transparent",
  bgClip: "bg-clip-text",
  bgColor: "bg-linear-to-r from-secondary to-primary",
  leading: "leading-relaxed"
};
const metaProps = {
  color: "text-gray-500 dark:text-gray-400",
  display: "flex-start",
  fontSize: "text-sm",
  space: "space-x-3",
  tracking: "tracking-wide"
};
const metaCardProps = {
  size: "",
  bgColor: "",
  color: "text-gray-500 dark:text-gray-400 hover:text-gray-500 dark:hover:text-gray-300",
  fontSize: "text-sm",
  spacing: "mr-4",
  textDecoration: "underline"
};
const sectionLinkProps = {
  section: { display: "flex-start", spacing: "" },
  header: { display: "hidden" },
  title: {
    size: "sm",
    color: "text-gray-500 dark:text-gray-400",
    fontFamily: "font-accent",
    fontWeight: "font-regular",
    tracking: "tracking-widest",
    transform: "uppercase"
  },
  body: { size: "", flex: "grow", width: "w-full" },
  list: {
    col: { sm: "6", lg: "2" },
    card: { spacing: "" },
    grid: { cols: "12" },
    header: { borderRadius: "", width: "w-10" },
    title: { fontSize: "text-base" },
    text: { display: "hidden" }
  },
  footer: { display: "hidden" }
};
const computeAvatarSize = (size) => {
  switch (size) {
    case "xs":
      return "w-6";
    case "sm":
      return "w-8";
    case "md":
      return "w-10";
    case "lg":
      return "w-12";
    case "xl":
      return "w-14";
    default:
      return size;
  }
};
const computeBadgeSize = (size) => {
  switch (size) {
    case "xs":
      return "px-2 py-0.5";
    case "sm":
      return "px-2 py-1";
    case "md":
      return "px-4 py-1.5";
    case "lg":
      return "px-5 py-2";
    case "xl":
      return "px-6 py-2.5";
    default:
      return size;
  }
};
const computeBtnSize = (size) => {
  switch (size) {
    case "icon":
      return "w-10 h-10";
    case "xxs":
      return "px-2 py-1.5";
    case "xs":
      return "px-3 py-2";
    case "sm":
      return "px-4 py-2.5 min-w-[75px]";
    case "md":
      return "px-5 py-3 min-w-[100px]";
    case "lg":
      return "px-6 py-4 min-w-[150px]";
    case "xl":
      return "px-8 py-5 min-w-[200px]";
    default:
      return size;
  }
};
const computeHeroSize = (size) => {
  switch (size) {
    case "xs":
      return "min-h-[10vh]";
    case "sm":
      return "min-h-[20vh]";
    case "md":
      return "min-h-[30vh]";
    case "lg":
      return "min-h-[40vh]";
    case "xl":
      return "min-h-[60vh]";
    case "full":
      return "min-h-[100vh] -mt-20";
    default:
      return size;
  }
};
const computeThumbnailSize = (size) => {
  switch (size) {
    case "xs":
      return "w-10";
    case "sm":
      return "w-16";
    case "md":
      return "w-20";
    case "lg":
      return "w-20 md:w-24";
    case "xl":
      return "w-24 md:w-32";
    default:
      return size;
  }
};
const computeInputSize = (size) => {
  switch (size) {
    case "xxs":
      return { fontSize: "text-sm", spacing: "p-2" };
    case "xs":
      return { fontSize: "text-sm", spacing: "p-2.5" };
    case "sm":
      return { fontSize: "text-sm", spacing: "p-3" };
    case "md":
      return { fontSize: "text-sm", spacing: "p-3.5" };
    case "lg":
      return { fontSize: "text-base", spacing: "p-4" };
    case "xl":
      return { fontSize: "text-base", spacing: "p-4.5" };
    default:
      return size;
  }
};
const computeModalSize = (size) => {
  switch (size) {
    case "xs":
      return "min-h-[150px]";
    case "sm":
      return "min-h-[250px]";
    case "md":
      return "min-h-[400px]";
    case "lg":
      return "min-h-[600px]";
    case "xl":
      return "min-h-[800px]";
    case "full":
      return "min-h-[100vh]";
    default:
      return size;
  }
};
const computeSectionSize = (size) => {
  switch (size) {
    case "xs":
      return "min-h-[150px]";
    case "sm":
      return "min-h-[250px]";
    case "md":
      return "min-h-[400px]";
    case "lg":
      return "min-h-[600px]";
    case "xl":
      return "min-h-[800px]";
    case "full":
      return "min-h-[100vh]";
    default:
      return size;
  }
};
const computeSlideAnimation = (direction) => {
  switch (direction) {
    case "top":
      return "translate-y-full";
    case "left":
      return "-translate-x-full";
    case "right":
      return "translate-x-full";
    case "bottom":
      return "-translate-y-full";
  }
};
const computeTagSize = (size) => {
  switch (size) {
    case "xxs":
      return "px-1.5 py-0.5";
    case "xs":
      return "px-2 py-1";
    case "sm":
      return "px-3 py-1.5";
    case "md":
      return "px-4 py-2";
    case "lg":
      return "px-5 py-2.5";
    case "xl":
      return "px-6 py-3";
    default:
      return size;
  }
};
const computeTagImgSize = (size) => {
  switch (size) {
    case "xs":
      return "w-4 h-4";
    case "sm":
      return "w-6 h-6";
    case "md":
      return "w-8 h-8";
    case "lg":
      return "w-10 h-10";
    case "xl":
      return "w-12 h-12";
    default:
      return size;
  }
};
const computeToastAnimation = (direction) => {
  switch (direction) {
    case "top":
      return "-translate-y-12";
    case "left":
      return "-translate-x-12";
    case "right":
      return "translate-x-12";
    case "bottom":
      return "translate-y-12";
  }
};
const computeTooltipAnimation = (placement) => {
  switch (placement) {
    case "top":
      return "translate-y-2";
    case "left":
      return "translate-x-2";
    case "right":
      return "-translate-x-2";
    case "bottom":
      return "-translate-y-2";
  }
};
const computeContainer = (size) => {
  switch (size) {
    case "xs":
      return "w-full max-w-xs";
    case "sm":
      return "w-full max-w-sm";
    case "md":
      return "w-full max-w-md";
    case "lg":
      return "w-full max-w-lg";
    case "xl":
      return "w-full max-w-xl";
    case "xxl":
      return "w-full max-w-xxl";
    default:
      return size;
  }
};
const computeGrid = (value) => {
  switch (value) {
    case "2":
      return "grid-cols-2";
    case "3":
      return "grid-cols-3";
    case "4":
      return "grid-cols-4";
    case "5":
      return "grid-cols-5";
    case "6":
      return "grid-cols-6";
    case "7":
      return "grid-cols-7";
    case "8":
      return "grid-cols-8";
    case "9":
      return "grid-cols-9";
    case "10":
      return "grid-cols-10";
    case "11":
      return "grid-cols-11";
    case "12":
      return "grid-cols-12";
    default:
      return value;
  }
};
const computeCol = (type, size) => {
  switch (type) {
    case "sm":
      return computeColSm(size);
    case "md":
      return computeColMd(size);
    case "lg":
      return computeColLg(size);
    case "xl":
      return computeColXl(size);
    case "xxl":
      return computeCol2xl(size);
    default:
      return computeColSpan(size);
  }
};
const computeColSpan = (size) => {
  switch (size) {
    case "1":
      return "col-span-1";
    case "2":
      return "col-span-2";
    case "3":
      return "col-span-3";
    case "4":
      return "col-span-4";
    case "5":
      return "col-span-5";
    case "6":
      return "col-span-6";
    case "7":
      return "col-span-7";
    case "8":
      return "col-span-8";
    case "9":
      return "col-span-9";
    case "10":
      return "col-span-10";
    case "11":
      return "col-span-11";
    case "12":
      return "col-span-12";
    default:
      return;
  }
};
const computeColSm = (size) => {
  switch (size) {
    case "1":
      return "sm:col-span-1";
    case "2":
      return "sm:col-span-2";
    case "3":
      return "sm:col-span-3";
    case "4":
      return "sm:col-span-4";
    case "5":
      return "sm:col-span-5";
    case "6":
      return "sm:col-span-6";
    case "7":
      return "sm:col-span-7";
    case "8":
      return "sm:col-span-8";
    case "9":
      return "sm:col-span-9";
    case "10":
      return "sm:col-span-10";
    case "11":
      return "sm:col-span-11";
    case "12":
      return "sm:col-span-12";
    default:
      return;
  }
};
const computeColMd = (size) => {
  switch (size) {
    case "1":
      return "md:col-span-1";
    case "2":
      return "md:col-span-2";
    case "3":
      return "md:col-span-3";
    case "4":
      return "md:col-span-4";
    case "5":
      return "md:col-span-5";
    case "6":
      return "md:col-span-6";
    case "7":
      return "md:col-span-7";
    case "8":
      return "md:col-span-8";
    case "9":
      return "md:col-span-9";
    case "10":
      return "md:col-span-10";
    case "11":
      return "md:col-span-11";
    case "12":
      return "md:col-span-12";
    default:
      return;
  }
};
const computeColLg = (size) => {
  switch (size) {
    case "1":
      return "lg:col-span-1";
    case "2":
      return "lg:col-span-2";
    case "3":
      return "lg:col-span-3";
    case "4":
      return "lg:col-span-4";
    case "5":
      return "lg:col-span-5";
    case "6":
      return "lg:col-span-6";
    case "7":
      return "lg:col-span-7";
    case "8":
      return "lg:col-span-8";
    case "9":
      return "lg:col-span-9";
    case "10":
      return "lg:col-span-10";
    case "11":
      return "lg:col-span-11";
    case "12":
      return "lg:col-span-12";
    default:
      return;
  }
};
const computeColXl = (size) => {
  switch (size) {
    case "1":
      return "xl:col-span-1";
    case "2":
      return "xl:col-span-2";
    case "3":
      return "xl:col-span-3";
    case "4":
      return "xl:col-span-4";
    case "5":
      return "xl:col-span-5";
    case "6":
      return "xl:col-span-6";
    case "7":
      return "xl:col-span-7";
    case "8":
      return "xl:col-span-8";
    case "9":
      return "xl:col-span-9";
    case "10":
      return "xl:col-span-10";
    case "11":
      return "xl:col-span-11";
    case "12":
      return "xl:col-span-12";
    default:
      return;
  }
};
const computeCol2xl = (size) => {
  switch (size) {
    case "1":
      return "2xl:col-span-1";
    case "2":
      return "2xl:col-span-2";
    case "3":
      return "2xl:col-span-3";
    case "4":
      return "2xl:col-span-4";
    case "5":
      return "2xl:col-span-5";
    case "6":
      return "2xl:col-span-6";
    case "7":
      return "2xl:col-span-7";
    case "8":
      return "2xl:col-span-8";
    case "9":
      return "2xl:col-span-9";
    case "10":
      return "2xl:col-span-10";
    case "11":
      return "2xl:col-span-11";
    case "12":
      return "2xl:col-span-12";
    default:
      return;
  }
};
const accordion = () => ({
  borderColor: "border-gray-300/50 dark:border-gray-600/50",
  overflow: "overflow-hidden",
  width: "w-full"
});
const accordionToggle = ({ open }) => ({
  align: "text-left",
  display: "flex-between",
  nextIcon: {
    animation: "transition-all",
    fade: "ease",
    icon: "chevron-down",
    rotate: open ? "rotate-180" : "rotate-0"
  },
  spacing: "p-0",
  width: "w-full"
});
const accordionTitle = () => ({
  color: "text-gray-700 dark:text-gray-100",
  fontWeight: "font-semibold",
  tracking: "tracking-wide"
});
const accordionBodyWrapper = () => ({
  animation: "transition-all",
  duration: "duration-200",
  fade: "ease",
  overflow: "overflow-hidden"
});
const accordionBody = () => ({
  border: "border-t",
  borderColor: "border-gray-300/50 dark:border-gray-600/50",
  spacing: "p-4",
  width: "w-full"
});
const accordionText = () => ({
  color: "text-gray-600 dark:text-gray-300",
  fontFamily: "font-secondary"
});
const alert = ({ type }) => ({
  bgColor: "bg-gray-100 dark:bg-gray-800",
  border: "border-l-8 border",
  borderColor: type === "success" ? "border-green-500/50 dark:border-green-500/50" : type === "warning" ? "border-amber-500/50 dark:border-amber-500/50" : type === "error" ? "border-red-500/50 dark:border-red-500/50" : type === "info" ? "border-blue-300/50 dark:border-cyan-600/50" : "border-gray-300/50 dark:border-gray-600/50",
  borderRadius: "rounded-md",
  display: "flex-start-top",
  overflow: "overflow-hidden",
  space: "space-x-8",
  spacing: "p-4"
});
const alertIcon = () => ({
  color: "text-gray-600 dark:text-gray-500",
  fontSize: "text-2xl"
});
const alertBody = () => ({
  space: "space-y-1",
  fontSize: "text-sm"
});
const alertTitle = () => ({
  fontWeight: "font-bold"
});
const alertText = () => ({
  fontSize: "text-sm"
});
const alertActions = () => ({
  display: "flex-start",
  flex: "shrink-0",
  space: "space-x-4",
  spacing: "py-4"
});
const animation = () => ({
  animation: "transition-all",
  duration: "duration-200",
  fade: "ease"
});
const avatar = () => ({
  display: "flex-start",
  space: "space-x-4",
  width: "w-full"
});
const avatarBadge = ({ size }) => ({
  bgColor: "bg-primary dark:bg-secondary",
  border: "border-2",
  borderColor: "border-white dark:border-gray-900",
  borderRadius: "rounded-full",
  color: "text-white",
  fontSize: "text-sm",
  spacing: "w-6 h-6",
  flex: "flex-middle",
  size: computeBadgeSize(size)
});
const avatarImg = ({ size }) => ({
  aspect: "aspect-[1/1]",
  borderColor: "border-gray-100 dark:border-gray-900",
  borderRadius: "rounded-full",
  flex: "shrink-0",
  size: computeAvatarSize(size)
});
const avatarBody = () => ({});
const avatarTitle = () => ({
  color: "text-gray-700 dark:text-gray-200",
  fontWeight: "font-bold",
  textDecoration: "capitalize"
});
const avatarText = () => ({
  fontWeight: "font-normal",
  fontSize: "text-sm"
});
const avatarActions = () => ({
  display: "flex-end",
  flex: "shrink-0",
  space: "space-x-2"
});
const badge = ({ size }) => ({
  size: computeBadgeSize(size),
  borderColor: "border-gray-300/50 dark:border-gray-600/50",
  borderRadius: "rounded-md",
  display: "inline-block",
  flex: "shrink-0",
  fontFamily: "font-accent",
  fontSize: "text-xs",
  fontWeight: "font-medium",
  space: "space-x-2",
  textTransform: "capitalize",
  whitespace: "whitespace-nowrap"
});
const draftBadge = () => ({
  bgColor: "bg-gray-100 dark:bg-gray-800",
  color: "text-gray-600 dark:text-gray-300"
});
const pendingBadge = () => ({
  bgColor: "bg-yellow-100 dark:bg-yellow-800",
  color: "text-yellow-600 dark:text-yellow-300"
});
const warningBadge = () => ({
  bgColor: "bg-orange-100 dark:bg-orange-800",
  color: "text-orange-600 dark:text-orange-300"
});
const successBadge = () => ({
  bgColor: "bg-green-100 dark:bg-green-800",
  color: "text-green-600 dark:text-green-300"
});
const finishedBadge = () => ({
  bgColor: "bg-gray-900 dark:bg-gray-100",
  color: "text-gray-100 dark:text-gray-900"
});
const errorBadge = () => ({
  bgColor: "bg-red-100 dark:bg-red-800",
  color: "text-red-600 dark:text-red-300"
});
const outlineBadge = () => ({
  borderColor: "border-gray-300/50 dark:border-gray-600/50",
  bgColor: "bg-transparent",
  border: "border",
  color: "text-gray-600 dark:text-gray-300"
});
const banner = () => ({
  border: "border-b",
  borderColor: "border-gray-300/50 dark:border-gray-600/50",
  color: "text-white",
  display: "flex-between",
  space: "space-x-4",
  spacing: "py-2 px-4",
  width: "w-full"
});
const bannerIcon = () => ({
  bgColor: "bg-black/25 dark:bg-black/25",
  borderRadius: "rounded-md",
  color: "text-primary dark:text-secondary",
  spacing: "px-2 py-1"
});
const bannerBody = () => ({
  display: "flex-start",
  space: "space-x-3",
  spacing: "py-1"
});
const bannerTitle = () => ({
  color: "text-gray-700 dark:text-white",
  fontWeight: "font-semibold"
});
const bannerText = () => ({
  color: "text-gray-600 dark:text-gray-200",
  fontSize: "text-sm"
});
const bannerActions = () => ({
  display: "flex-end",
  flex: "shrink-0",
  space: "space-x-2"
});
const breadcrumbs = () => ({
  borderColor: "border-gray-300/50 dark:border-gray-600/50",
  display: "flex-start",
  fontFamily: "font-secondary",
  fontSize: "text-sm",
  space: "space-x-2",
  spacing: "mb-4 pb-4",
  width: "w-full"
});
const breadcrumbItem = () => ({
  display: "flex-start",
  space: "space-x-2"
});
const breadcrumbBtn = ({ active }) => ({
  color: "text-gray-600 dark:text-gray-400",
  cursor: "cursor-pointer",
  fontFamily: "font-accent",
  fontSize: "text-sm",
  fontWeight: "font-medium",
  textTransform: "uppercase",
  tracking: "tracking-widest",
  ...active && {
    cursor: "cursor-default",
    ...active
  }
});
const breadcrumbLink = ({ active }) => ({
  color: "text-gray-600 dark:text-gray-400",
  cursor: "cursor-pointer",
  fontFamily: "font-accent",
  fontSize: "text-sm",
  fontWeight: "font-medium",
  textTransform: "uppercase",
  tracking: "tracking-widest",
  ...active && {
    cursor: "cursor-default",
    ...active
  }
});
const btnGroup = () => ({
  borderColor: "border-gray-300/50 dark:border-gray-600/50",
  border: "border",
  borderRadius: "rounded-md",
  display: "flex-start",
  divide: "divide-x",
  divideColor: "divide-gray-300/50 dark:divide-gray-600/50",
  flex: "shrink-0",
  overflow: "overflow-hidden",
  space: "space-x-0",
  width: "width-inherit"
});
const btn = (active) => ({
  align: "text-center",
  animation: "transition",
  display: "flex-middle-inline",
  fade: "ease",
  flex: "shrink-0",
  fontFamily: "font-secondary",
  fontSize: "text-sm",
  fontWeight: "font-normal",
  focus: "focus:outline-none focus-visible:outline-none",
  outline: "outline-none",
  position: "relative",
  space: "space-x-4",
  tracking: "tracking-normal",
  whiteSpace: "whitespace-nowrap",
  ...active
});
const primaryBtn = ({ active, size }) => ({
  bgColor: "bg-linear-to-r from-secondary to-primary",
  bgPosition: "bg-center",
  bgSize: "bg-size-[100%] hover:bg-size-[200%]",
  borderRadius: "rounded-md",
  color: "text-white",
  size: computeBtnSize(size),
  stroke: "stroke-white dark:stroke-white",
  ...btn(active)
});
const accentBtn = ({ active, size }) => ({
  bgColor: "bg-transparent dark:bg-transparent",
  borderColor: "border-gray-300/50 dark:border-gray-600/50",
  borderRadius: "rounded-md",
  color: "text-gray-600 dark:text-gray-200",
  hover: "hover:bg-gray-200 hover:dark:bg-gray-800",
  size: computeBtnSize(size),
  stroke: "stroke-gray-500 dark:stroke-gray-200",
  ...btn(
    active && {
      bgColor: "bg-gray-200 dark:bg-gray-800",
      hover: "",
      ...active
    }
  )
});
const borderBtn = ({ active, size }) => ({
  bgColor: "bg-transparent",
  border: "border",
  borderColor: "border-gray-300/50 dark:border-gray-600/50",
  borderRadius: "rounded-md",
  color: "text-gray-600 dark:text-gray-200",
  hover: "hover:border-gray-300 hover:dark:border-gray-600",
  size: computeBtnSize(size),
  stroke: "stroke-gray-600 dark:stroke-gray-300",
  active: "data-[active=true]:text-gray-500 data-[active=true]:dark:text-gray-300 data-[active=true]:border-gray-300 data-[active=true]:dark:border-gray-600",
  ...btn(
    active && {
      borderColor: "border-secondary dark:border-secondary",
      color: "text-secondary",
      hover: "",
      stroke: "stroke-secondary",
      ...active
    }
  )
});
const tabBtn = ({ active, size }) => ({
  bgColor: "bg-transparent",
  border: "border-b-2",
  borderColor: "border-b-transparent hover:border-b-gray-300",
  borderRadius: "",
  color: "text-gray-600 dark:text-gray-200",
  hover: "border-b-primary dark:hover:border-b-secondary",
  size: computeBtnSize(size),
  stroke: "stroke-gray-500 dark:stroke-gray-300",
  ...btn(
    active && {
      borderColor: "border-b-primary dark:border-b-secondary",
      color: "text-gray-600 dark:text-gray-200",
      hover: "",
      ...active
    }
  )
});
const textBtn = ({ active, size }) => ({
  color: "text-gray-500 dark:text-gray-300",
  stroke: "stroke-gray-500 dark:stroke-gray-300",
  fontSize: "text-inherit",
  hover: "hover:underline hover:text-gray-700 hover:dark:text-gray-100",
  size: computeBtnSize(size),
  ...btn(active)
});
const btnWrapper = ({ disabled }) => ({
  cursor: disabled ? "cursor-not-allowed" : "cursor-pointer",
  outline: "focus-visible:outline",
  outlineColor: "focus-visible:outline-primary dark:focus-visible:outline-secondary",
  outlineOffset: "outline-offset-1",
  width: "w-inherit"
});
const card = () => ({
  animation: "transition-all",
  border: "border",
  borderColor: "border-gray-300/50 dark:border-gray-600/50",
  borderRadius: "rounded-md",
  color: "text-gray-400",
  fade: "ease",
  width: "w-full"
});
const cardHeader = () => ({
  bgColor: "bg-gray-100 dark:bg-gray-800",
  borderColor: "border-gray-300/50 dark:border-gray-600/50",
  borderRadius: "rounded-md"
});
const cardIcon = () => ({
  color: "text-gray-500",
  fontSize: "text-xl"
});
const cardImg = () => ({
  bgColor: "bg-gray-100 dark:bg-gray-800",
  width: "w-full"
});
const cardBody = () => ({
  align: "text-left",
  borderColor: "border-gray-300/50 dark:border-gray-600/50",
  space: "space-y-1",
  spacing: "p-4"
});
const cardPretitle = () => ({
  color: "text-primary dark:text-secondary",
  fontFamily: "font-accent",
  fontSize: "text-sm",
  fontWeight: "font-book",
  textTransform: "capitalize",
  tracking: "tracking-wider"
});
const cardTitle = () => ({
  fontWeight: "font-semibold"
});
const cardSubtitle = () => ({
  color: "text-gray-600 dark:text-gray-300",
  fontWeight: "font-light",
  fontSize: "text-base",
  space: "space-x-4",
  tracking: "tracking-normal"
});
const cardText = () => ({
  fontSize: "text-sm",
  fontWeight: "font-light"
});
const cardFooter = () => ({
  border: "border-t",
  borderColor: "border-gray-300/50 dark:border-gray-600/50",
  color: "text-gray-500",
  display: "flex-between",
  fontSize: "text-sm",
  space: "space-x-4",
  spacing: "p-4"
});
const cardActions = () => ({
  display: "flex-start",
  flex: "shrink-0",
  space: "space-x-4"
});
const checkbox = ({ active }) => ({
  animation: "transition-all",
  border: "border",
  borderColor: "border-gray-300/50 dark:border-gray-600/50",
  borderRadius: "rounded-md",
  cursor: "cursor-pointer",
  fade: "ease",
  display: "flex-start-top",
  duration: "duration-200",
  hover: "hover:border-gray-300 hover:dark:border-gray-600",
  space: "space-x-4",
  position: "relative",
  spacing: "p-4"
});
const checkboxInput = () => ({
  animation: "transition-all",
  appearance: "appearance-none",
  bgColor: "bg-gray-100 dark:bg-gray-800 checked:bg-primary dark:checked:bg-secondary",
  border: "border",
  borderColor: "border-gray-300 dark:border-gray-600 checked:border-primary checked:dark:border-secondary",
  borderRadius: "rounded-sm",
  cursor: "cursor-pointer",
  fade: "ease",
  height: "h-5",
  ring: "ring-none",
  ringColor: "ring-transparent checked:ring-transparent dark:checked:ring-transparent focus:ring-transparent",
  ringOffset: "ring-offset-none checked:ring-offset-4 focus:ring-offset-transparent",
  ringOffsetColor: "checked:ring-offset-primary/50 dark:checked:ring-offset-secondary/50",
  width: "w-5"
});
const checkboxTitle = () => ({
  color: "text-gray-700 dark:text-gray-200",
  fontSize: "text-sm",
  fontWeight: "font-medium",
  leading: "leading-tight"
});
const checkboxText = () => ({
  color: "text-gray-600 dark:text-gray-300",
  fontSize: "text-sm",
  fontWeight: "font-light",
  tracking: "tracking-wide"
});
const command = () => ({
  borderColor: "border-gray-300/50 dark:border-gray-600/50",
  flex: "shrink-0",
  fontFamily: "font-secondary",
  fontSize: "text-xs",
  fontWeight: "font-medium",
  textTransform: "capitalize",
  whitespace: "whitespace-nowrap"
});
const drop = () => ({
  position: "relative"
});
const dropToggle = () => ({
  display: "flex-between",
  space: "space-x-4"
});
const dropMenu = ({ open }) => ({
  align: "text-left",
  animation: "transition-all",
  bgColor: "bg-white dark:bg-gray-900",
  border: "border",
  borderColor: "border-gray-300/50 dark:border-gray-600/50",
  borderRadius: "rounded-md",
  duration: "duration-200",
  fade: "ease",
  opacity: open ? "opacity-100" : "opacity-0",
  overflow: "overflow-hidden overflow-y-scroll",
  shadow: "shadow-lg",
  shadowColor: "dark:shadow-gray-800/25",
  translate: open ? "translate-y-0" : "translate-y-2",
  width: "w-auto",
  zIndex: "z-10"
});
const dropHeader = () => ({
  align: "text-left",
  border: "border-b",
  borderColor: "border-gray-300/50 dark:border-gray-600/50",
  space: "space-y-1",
  spacing: "px-6 py-4"
});
const dropTitle = () => ({
  color: "text-gray-800 dark:text-white",
  whitespace: "whitespace-nowrap",
  fontWeight: "font-semibold",
  textTransform: "capitalize",
  tracking: "tracking-wide"
});
const dropSubtitle = () => ({
  color: "text-gray-500 dark:text-gray-300",
  whitespace: "whitespace-nowrap",
  fontWeight: "font-normal",
  fontSize: "text-sm"
});
const dropList = () => ({
  border: "",
  borderColor: "border-gray-300/50 dark:border-gray-600/50",
  space: "space-y-1",
  spacing: "p-2"
});
const dropItem = () => ({
  display: "block",
  width: "w-full"
});
const dropBtn = () => ({
  align: "text-left",
  display: "flex-start",
  space: "space-x-4",
  width: "w-full"
});
const dropLink = () => ({
  align: "text-left",
  display: "flex-start",
  space: "space-x-4",
  width: "w-full"
});
const feedback = () => ({
  align: "text-left",
  bgColor: "bg-gray-50 dark:bg-gray-800",
  border: "",
  borderColor: "border-gray-300/50 dark:border-gray-600/50",
  borderRadius: "rounded-md",
  spacing: "p-8"
});
const feedbackHeader = () => ({
  spacing: "p-4"
});
const feedbackIcon = () => ({
  color: "text-gray-500",
  fontSize: "text-2xl"
});
const feedbackBody = () => ({
  space: "space-y-2",
  spacing: "p-4"
});
const feedbackPretitle = () => ({
  color: "text-gray-500",
  fontFamily: "font-accent",
  fontSize: "text-sm",
  fontWeight: "font-medium",
  textTransform: "uppercase",
  tracking: "tracking-wider"
});
const feedbackTitle = () => ({
  color: "text-gray-800 dark:text-white",
  fontWeight: "font-semibold",
  textTransform: "capitalize",
  tracking: "tracking-wide"
});
const feedbackText = () => ({});
const feedbackActions = () => ({
  display: "flex-start",
  flex: "shrink-0",
  space: "space-x-4",
  spacing: "p-4"
});
const h1 = () => ({
  color: "text-gray-800 dark:text-gray-100",
  fontSize: "text-5xl lg:text-6xl",
  fontWeight: "font-bold",
  fontFamily: "font-primary"
});
const h2 = () => ({
  color: "text-gray-800 dark:text-gray-100",
  fontSize: "text-4xl lg:text-5xl",
  fontWeight: "font-bold",
  fontFamily: "font-primary"
});
const h3 = () => ({
  color: "text-gray-800 dark:text-gray-100",
  fontSize: "text-3xl lg:text-3xl",
  fontWeight: "font-bold",
  fontFamily: "font-primary"
});
const h4 = () => ({
  color: "text-gray-800 dark:text-gray-100",
  fontSize: "text-xl lg:text-2xl",
  fontWeight: "font-semibold",
  fontFamily: "font-primary"
});
const h5 = () => ({
  color: "text-gray-800 dark:text-gray-100",
  fontSize: "text-lg lg:text-xl",
  fontWeight: "font-medium",
  fontFamily: "font-primary"
});
const h6 = () => ({
  color: "text-gray-800 dark:text-gray-100",
  fontSize: "text-base lg:text-lg",
  fontWeight: "font-medium",
  fontFamily: "font-primary"
});
const p = () => ({
  color: "text-gray-600 dark:text-gray-200",
  fontSize: "text-base",
  fontWeight: "font-light",
  fontFamily: "font-secondary",
  tracking: "tracking-wide"
});
const small = () => ({
  color: "text-gray-500 dark:text-gray-300",
  display: "block",
  fontSize: "text-sm"
});
const footer = () => ({
  bgColor: "bg-white dark:bg-gray-900",
  border: "border-t",
  borderColor: "border-gray-300/50 dark:border-gray-600/50",
  position: "relative",
  spacing: "py-6"
});
const footerHeader = () => ({
  border: "border",
  borderColor: "border-gray-300/50 dark:border-gray-600/50",
  spacing: "py-8"
});
const footerBody = () => ({
  spacing: "py-10",
  width: "w-full"
});
const footerTitle = () => ({
  fontSize: "text-base",
  fontWeight: "font-bold",
  tracking: "tracking-wider"
});
const footerText = () => ({
  fontSize: "text-sm"
});
const footerList = () => ({
  display: "flex-column",
  space: "space-y-2",
  spacing: ""
});
const footerItem = () => ({
  display: "block",
  spacing: "py-1"
});
const footerBtn = () => ({});
const footerLink = () => ({});
const footerFooter = () => ({
  border: "border-t",
  borderColor: "border-gray-300/50 dark:border-gray-600/50",
  spacing: "pt-6"
});
const form = () => ({});
const formCheckbox = () => ({
  animation: "transition-all",
  bgColor: "bg-transparent dark:bg-transparent checked:bg-primary dark:checked:bg-secondary",
  border: "border",
  borderColor: "border-gray-300/50 dark:border-gray-600/50",
  borderRadius: "rounded-md",
  cursor: "cursor-pointer",
  fade: "ease",
  ring: "ring-none",
  ringColor: "ring-transparent checked:ring-transparent dark:checked:ring-transparent focus:ring-transparent",
  ringOffset: "ring-offset-4 checked:ring-offset-4 focus:ring-offset-none",
  ringOffsetColor: "checked:ring-offset-primary/50 dark:checked:ring-offset-secondary/50",
  size: "h-6 w-6"
});
const formGroup = () => ({
  space: "space-y-2",
  spacing: "mb-4",
  width: "w-full"
});
const formLabel = () => ({
  color: "text-gray-600 dark:text-gray-400",
  cursor: "cursor-pointer",
  display: "inline-block",
  fontFamily: "font-secondary",
  fontSize: "text-sm",
  fontWeight: "font-medium",
  spacing: "p-1",
  tracking: "tracking-wide"
});
const formInput = ({ size = "sm", variant = "" }) => ({
  align: "text-left",
  animation: "transition",
  bgColor: "bg-white dark:bg-gray-900",
  border: "border",
  borderColor: "border-gray-300/50 dark:border-gray-600/50",
  borderRadius: "rounded-md",
  color: "text-gray-600 dark:text-gray-200",
  cursor: "cursor-auto",
  display: "block",
  fade: "ease",
  fontFamily: "font-secondary",
  fontSize: "text-sm",
  outline: "outline-none",
  placeholderColor: "placeholder:text-gray-500 dark:placeholder:text-gray-400",
  ring: "focus:ring-1",
  ringColor: "focus:ring-transparent dark:focus:ring-transparent",
  ringOffset: "focus:ring-offset-1 dark:focus:ring-offset-1",
  ringOffsetColor: "focus:ring-offset-primary dark:focus:ring-offset-secondary",
  tracking: "tracking-wide",
  width: "w-full",
  ...computeInputSize(size),
  ...variant === "group" && {
    bgColor: "bg-transparent",
    border: "border-none",
    ring: "focus:ring-0",
    ringColor: "focus:ring-transparent",
    ringOffset: "focus:ring-offset-none",
    ringOffsetColor: "focus:ring-offset-transparent"
  }
});
const formDivInput = ({ size, variant }) => ({
  ...formInput({ size, variant }),
  color: "text-gray-600 dark:text-gray-200",
  display: "flex-center",
  overflow: "overflow-x-scroll"
});
const formFileInput = () => ({});
const formOtp = () => ({
  display: "flex-between",
  space: "space-x-2"
});
const formOtpInput = ({ index, length }) => ({
  align: "text-center",
  bordrRadius: index === 0 ? "rounded-tl-md rounded-bl-md" : length === index + 1 ? "rounded-tr-md rounded-br-md" : ""
});
const formSelect = ({ size, variant }) => ({
  ...formInput({ size, variant }),
  cursor: "cursor-pointer"
});
const formText = () => ({
  color: "text-gray-500 dark:text-gray-400",
  fontSize: "text-xs",
  spacing: "mx-1",
  tracking: "tracking-wider"
});
const container = ({ size }) => ({
  margin: "mx-auto",
  size: computeContainer(size),
  spacing: "px-4"
});
const grid = ({ cols }) => ({
  cols: computeGrid(cols),
  gap: "gap-4",
  grid: `grid ${computeGrid(cols)}`,
  width: "w-full"
});
const col = ({ span: span2, sm, md, lg, xl, xxl }) => ({
  span: computeCol("span", span2),
  sm: computeCol("sm", sm),
  md: computeCol("md", md),
  lg: computeCol("lg", lg),
  xl: computeCol("xl", xl),
  xxl: computeCol("xxl", xxl)
});
const header = () => ({
  border: "border-b",
  borderColor: "border-gray-300/50 dark:border-gray-600/50",
  display: "flex-between",
  position: "relative",
  space: "space-x-4",
  spacing: "py-4",
  width: "w-full"
});
const headerTitle = () => ({
  fontWeight: "font-bold",
  tracking: "tracking-wide",
  textTransform: "capitalize"
});
const headerSubtitle = () => ({
  color: "text-gray-600 dark:text-gray-300",
  fontFamily: "font-secondary",
  fontWeight: "font-normal",
  tracking: "tracking-normal"
});
const headerText = () => ({
  color: "text-gray-700 dark:text-gray-100",
  fontWeight: "font-light",
  fontFamily: "font-secondary",
  tracking: "tracking-normal"
});
const headerActions = () => ({
  display: "flex-end",
  space: "space-x-4"
});
const hero = ({ size }) => ({
  bgColor: "bg-white dark:bg-gray-900",
  borderColor: "border-gray-300/50 dark:border-gray-600/50",
  display: "block",
  position: "relative",
  size: computeHeroSize(size),
  spacing: "py-8",
  width: "w-full"
});
const heroBg = () => ({
  inset: "inset-0",
  position: "absolute"
});
const heroImg = ({ size }) => ({
  aspect: "aspect-[1/1]",
  bgColor: "bg-gray-100 dark:bg-gray-800",
  border: "",
  borderColor: "border-gray-300/50 dark:border-gray-600/50",
  borderRadius: "rounded-md",
  color: "text-gray-500",
  display: "flex-middle",
  flex: "shrink-0",
  overflow: "overflow-hidden",
  size: computeThumbnailSize(size)
});
const heroIcon = ({ size }) => ({
  aspect: "aspect-[1/1]",
  bgColor: "bg-gray-100 dark:bg-gray-800",
  border: "",
  borderColor: "border-gray-300/50 dark:border-gray-600/50",
  borderRadius: "rounded-md",
  color: "text-gray-500",
  display: "flex-middle",
  flex: "shrink-0",
  fontSize: "text-3xl",
  overflow: "overflow-hidden",
  size: computeThumbnailSize(size)
});
const heroBody = () => ({
  align: "text-left",
  space: "space-y-1"
});
const heroPretitle = () => ({
  color: "text-primary dark:text-secondary",
  fontFamily: "font-accent",
  fontSize: "text-sm",
  fontWeight: "font-medium",
  textTransform: "uppercase",
  tracking: "tracking-widest"
});
const heroTitle = () => ({
  fontWeight: "font-extrabold",
  leading: "leading-tight",
  tracking: "tracking-wide"
});
const heroSubtitle = () => ({
  color: "text-gray-500 dark:text-gray-400",
  fontFamily: "font-secondary",
  fontWeight: "font-light",
  leading: "!leading-relaxed",
  tracking: "tracking-normal"
});
const heroText = () => ({
  fontFamily: "font-secondary",
  fontWeight: "font-light",
  tracking: "tracking-wide"
});
const heroActions = () => ({
  display: "lg:flex-end",
  space: "space-y-4 space-x-0 lg:space-y-0 lg:space-x-4",
  width: "w-full"
});
const html = () => ({});
const body = () => ({});
const main = () => ({
  position: "relative"
});
const aside = () => ({
  borderColor: "border-gray-300/50 dark:border-gray-600/50"
});
const div = () => ({
  borderColor: "border-gray-300/50 dark:border-gray-600/50",
  position: "relative"
});
const span = () => ({
  display: "inline"
});
const ul = () => ({
  borderColor: "border-gray-300/50 dark:border-gray-600/50",
  spacing: "pl-4"
});
const li = () => ({
  borderColor: "border-gray-300/50 dark:border-gray-600/50"
});
const iFrame = () => ({});
const img = () => ({
  display: "inline-block"
});
const hr = () => ({
  borderColor: "border-gray-300/50 dark:border-gray-600/50",
  border: "border-t",
  borderRadius: "rounded-md"
});
const article = () => ({});
const figure = () => ({});
const caption = () => ({});
const blockquote = () => ({});
const pre = () => ({});
const code = () => ({
  bgColor: "bg-gray-100 dark:bg-gray-800",
  borderRadius: "rounded-md",
  display: "inline-block",
  spacing: "px-2 py-0.5"
});
const icon = () => ({
  color: "text-inherit",
  flex: "shrink-0"
});
const wrappedIcon = () => ({
  borderRadius: "rounded-md",
  bgColor: "bg-black/5 dark:bg-white/5",
  color: "text-primary dark:text-secondary",
  display: "flex-middle",
  spacing: "h-8 w-8"
});
const inputGroup = () => ({
  animation: "transition",
  bgColor: "bg-gray-white dark:bg-gray-900",
  border: "border",
  borderColor: "border-gray-300/50 dark:border-gray-600/50",
  borderRadius: "rounded-md",
  color: "text-gray-600 dark:text-gray-200",
  fade: "ease",
  focus: "focus-within:border-primary dark:focus-within:border-secondary",
  display: "flex no-wrap",
  ring: "focus-within:ring-1",
  ringColor: "focus-within:ring-transparent dark:focus-within:ring-transparent",
  ringOffset: "focus-within:ring-offset-1",
  ringOffsetColor: "focus-within:ring-offset-primary focus-within:dark:ring-offset-secondary"
});
const inputAppend = () => ({
  borderColor: "border-gray-300/50 dark:border-gray-600/50",
  display: "flex-middle",
  flex: "shrink-0",
  spacing: "px-4"
});
const inputPrepend = () => ({
  borderColor: "border-gray-300/50 dark:border-gray-600/50",
  display: "flex-middle",
  flex: "shrink-0",
  spacing: "px-4"
});
const link = (active) => ({
  align: "text-center",
  animation: "transition-all",
  display: "flex-middle-inline",
  fade: "ease",
  flex: "shrink-0",
  focus: "focus:outline-none focus-visible:outline-none",
  fontFamily: "font-secondary",
  fontSize: "text-sm",
  fontWeight: "font-normal",
  outline: "outline-none",
  position: "relative",
  space: "space-x-4",
  tracking: "tracking-normal",
  whiteSpace: "whitespace-nowrap",
  ...active
});
const primaryLink = ({ active, size }) => ({
  bgColor: "bg-linear-to-r from-secondary to-primary",
  bgPosition: "bg-center",
  bgSize: "bg-size-[100%] hover:bg-size-[200%]",
  borderRadius: "rounded-md",
  color: "text-white",
  size: computeBtnSize(size),
  stroke: "stroke-white dark:stroke-white",
  ...link(active)
});
const accentLink = ({ active, size }) => ({
  bgColor: "bg-transparent dark:bg-transparent",
  borderColor: "border-gray-300/50 dark:border-gray-600/50",
  borderRadius: "rounded-md",
  color: "text-gray-600 dark:text-gray-200",
  hover: "hover:bg-gray-200 hover:dark:bg-gray-800",
  size: computeBtnSize(size),
  stroke: "stroke-gray-500 dark:stroke-gray-300",
  ...link(
    active && {
      bgColor: "bg-gray-200 dark:bg-gray-800",
      ...active
    }
  )
});
const borderLink = ({ active, size }) => ({
  bgColor: "bg-transparent",
  border: "border",
  borderColor: "border-gray-300/50 dark:border-gray-600/50",
  borderRadius: "rounded-md",
  color: "text-gray-600 dark:text-gray-300",
  hover: "hover:border-gray-300 hover:dark:border-gray-600",
  size: computeBtnSize(size),
  stroke: "stroke-gray-600 dark:stroke-gray-300",
  ...link(
    active && {
      borderColor: "border-secondary dark:border-secondary",
      color: "text-secondary",
      stroke: "stroke-secondary",
      ...active
    }
  )
});
const tabLink = ({ active, size }) => ({
  bgColor: "bg-transparent",
  border: "border-b-2",
  borderColor: "border-b-transparent hover:border-b-gray-300",
  borderRadius: "",
  color: "text-gray-600 dark:text-gray-200",
  hover: "border-b-primary dark:hover:border-b-secondary",
  size: computeBtnSize(size),
  stroke: "stroke-gray-500 dark:stroke-gray-300",
  ...link(
    active && {
      borderColor: "border-b-primary dark:border-b-secondary",
      color: "text-gray-600 dark:text-gray-200",
      ...active
    }
  )
});
const textLink = ({ active, size }) => ({
  color: "text-gray-500 dark:text-gray-300",
  fontSize: "text-inherit",
  hover: "hover:text-gray-700 hover:dark:text-gray-100 hover:underline",
  size: computeBtnSize(size),
  ...link(active)
});
const linkWrapper = ({ disabled }) => ({
  cursor: disabled ? "cursor-not-allowed" : "cursor-pointer",
  outline: "focus-visible:outline",
  outlineColor: "focus-visible:outline-primary dark:focus-visible:outline-secondary",
  outlineOffset: "outline-offset-1",
  width: "w-inherit"
});
const listGroup = () => ({
  display: "flex-column",
  divide: "divide-y-2",
  divideColor: "divide-gray-200",
  divideStyle: "divide-dashed",
  spacing: ""
});
const listItem = () => ({});
const modalLoader = () => ({
  align: "text-center",
  spacing: "mx-auto"
});
const pageLoader = () => ({
  bgColor: "bg-white dark:bg-gray-900",
  color: "text-gray-700 dark:text-gray-300",
  display: "flex-middle",
  position: "absolute",
  inset: "inset-0",
  spacing: "h-full w-full",
  zIndex: "z-50"
});
const sectionLoader = () => ({
  align: "text-center",
  display: "flex-middle",
  space: "space-x-4",
  spacing: "mx-auto",
  width: "w-fit"
});
const menu = () => ({});
const menuWrapper = () => ({
  zIndex: "z-20"
});
const menuBackdrop = ({ open }) => ({
  animation: "transition-all",
  bgColor: open ? "bg-black/85 dark:bg-gray-700/85" : "bg-transparent dark:bg-transparent",
  delay: open ? "delay-100" : "",
  duration: "duration-100",
  fade: "ease-in",
  height: "h-full",
  inset: "left-0 right-0 bottom-0",
  position: "fixed",
  zIndex: "z-1"
});
const menuMenu = ({ open }) => ({
  align: "text-left",
  animation: "transition-all",
  bgColor: "bg-white dark:bg-gray-900",
  border: "border-y",
  borderColor: "border-gray-300/50 dark:border-gray-600/50",
  duration: "duration-200",
  fade: open ? "ease-out" : "ease-in",
  height: "max-h-[100vh]",
  inset: "right-0 left-0",
  opacity: open ? "opacity-100" : "opacity-0",
  position: "fixed",
  shadow: "shadow-lg",
  shadowColor: "dark:shadow-gray-800/25",
  translate: open ? "translate-y-0" : "-translate-y-4",
  width: "min-w-full w-auto",
  overflow: "overflow-hidden overflow-y-scroll",
  zIndex: "z-10"
});
const menuBlock = () => ({
  spacing: "p-4"
});
const menuTitle = () => ({
  fontWeight: "font-bold",
  spacing: "px-3 mb-4",
  textTransform: "capitalize",
  tracking: "tracking-wide"
});
const menuSubtitle = () => ({
  color: "text-gray-700 dark:text-gray-300",
  fontSize: "text-sm",
  fontWeight: "font-normal",
  whitespace: "whitespace-nowrap"
});
const menuList = () => ({
  display: "flex-column",
  space: "space-y-2",
  spacing: "py-4"
});
const menuItem = () => ({
  display: "flex",
  spacing: "",
  width: "w-inherit"
});
const menuBtn = () => ({
  align: "text-left",
  display: "flex-start"
});
const menuLink = () => ({
  align: "text-left",
  display: "flex-start",
  width: "w-full"
});
const modal = ({ open }) => ({
  animation: "transition-all",
  align: "text-left",
  bgColor: "bg-white dark:bg-gray-900",
  border: "border",
  borderColor: "border-gray-300/50 dark:border-gray-600/50",
  borderRadius: "rounded-lg",
  duration: "duration-200",
  fade: "ease-in",
  opacity: open ? "opacity-100" : "opacity-0",
  scale: open ? "scale-100" : "scale-90",
  spacing: "mx-auto my-8",
  width: "w-sm max-w-full",
  zIndex: "z-30"
});
const modalWrapper = () => ({
  inset: "inset-0",
  overflow: "overflow-y-auto",
  position: "fixed",
  zIndex: "z-20"
});
const modalBackdrop = ({ open }) => ({
  animation: "transition-all",
  bgColor: open ? "bg-black/85 dark:bg-gray-700/85" : "bg-transparent dark:bg-transparent",
  duration: "duration-200",
  fade: "ease-in",
  height: "h-full",
  inset: "inset-0",
  position: "fixed"
});
const modalHeader = () => ({
  display: "flex-between",
  border: "border-b",
  borderColor: "border-gray-300/50 dark:border-gray-600/50",
  space: "space-x-4",
  spacing: "p-4"
});
const modalTitle = () => ({
  fontWeight: "font-bold",
  tracking: "tracking-wide"
});
const modalSubtitle = () => ({
  color: "text-gray-600 dark:text-gray-400",
  fontFamily: "font-secondary",
  fontWeight: "font-normal",
  space: "space-x-4"
});
const modalBody = ({ size }) => ({
  align: "text-left",
  borderColor: "border-gray-300/50 dark:border-gray-600/50",
  spacing: "p-4",
  size: computeSectionSize(size)
});
const modalFooter = () => ({
  border: "border-t",
  borderColor: "border-gray-300/50 dark:border-gray-600/50",
  color: "text-gray-500",
  fontSize: "text-sm",
  display: "flex-end",
  spacing: "p-4",
  space: "space-x-4"
});
const navbar = () => ({
  bgColor: "bg-white dark:bg-gray-900",
  borderColor: "border-gray-300/50 dark:border-gray-600/50",
  border: "border-b",
  display: "flex-between",
  space: "space-x-4",
  spacing: "p-4",
  width: "w-full"
});
const navbarBrand = () => ({
  animation: "transition-all",
  display: "inline-block",
  fade: "ease",
  flex: "shrink-0",
  hover: "hover:opacity-75",
  width: "w-44"
});
const navbarList = () => ({
  display: "flex-end",
  space: "space-x-2",
  spacing: ""
});
const nav = () => ({
  bgColor: "bg-white dark:bg-gray-900",
  borderColor: "border-gray-300/50 dark:border-gray-600/50",
  borderRadius: "rounded-md",
  display: "block",
  position: "relative"
});
const navHeader = () => ({
  borderColor: "border-gray-300/50 dark:border-gray-600/50",
  spacing: "p-4"
});
const navTitle = () => ({
  fontWeight: "font-bold"
});
const navBody = ({ size }) => ({
  size: computeSectionSize(size),
  spacing: "p-4"
});
const navList = () => ({
  align: "text-left",
  display: "flex-column",
  space: "space-y-1",
  spacing: ""
});
const navItem = () => ({
  display: "block"
});
const navBtn = () => ({
  align: "text-left",
  display: "flex-start",
  space: "space-x-4",
  width: "w-full"
});
const navLink = () => ({
  align: "text-left",
  display: "flex-start",
  space: "space-x-4",
  width: "w-full"
});
const otp = () => ({
  display: "flex-between",
  space: "space-x-2"
});
const otpInput = ({ index, length }) => ({
  align: "text-center",
  bordrRadius: index === 0 ? "rounded-tl-md rounded-bl-md" : length === index + 1 ? "rounded-tr-md rounded-br-md" : ""
});
const pagination = () => ({
  position: "inline-flex",
  border: "border",
  borderColor: "border-gray-300/50 dark:border-gray-600/50",
  borderRadius: "rounded-md",
  overflow: "overflow-hidden"
});
const paginationBtn = (props) => ({
  bgColor: "bg-transparent dark:hover:bg-transparent",
  border: "-border-x",
  borderColor: "border-gray-300/50 dark:border-gray-600/50",
  borderRadius: "",
  color: "text-gray-500 dark:text-gray-300",
  fontSize: "text-sm",
  fontWeight: "font-medium",
  hover: "hover:bg-gray-100 dark:hover:bg-gray-800",
  spacing: "px-4 py-2",
  ...props?.active && {
    bgColor: "bg-gray-200 dark:bg-gray-700",
    color: "text-gray-600 dark:text-gray-200"
  }
});
const prefooter = () => ({
  bgColor: "bg-gray-100 dark:bg-gray-800",
  spacing: "px-16 py-20"
});
const prefooterBody = () => ({
  align: "text-left",
  space: "space-y-4"
});
const prefooterPretitle = () => ({});
const prefooterTitle = () => ({
  color: "text-gray-700 dark:text-white",
  fontWeight: "font-bold"
});
const prefooterSubtitle = () => ({
  color: "text-gray-700 dark:text-white",
  fontFamily: "font-secondary",
  fontSize: "font-base",
  fontWeight: "font-light"
});
const prefooterText = () => ({});
const prefooterActions = () => ({
  display: "flex-middle",
  space: "space-x-4",
  flex: "shrink-0",
  spacing: "py-4"
});
const progressBar = () => ({
  bgColor: "bg-gray-200 dark:bg-gray-700",
  borderRadius: "rounded-full",
  height: "h-2",
  overflow: "overflow-hidden",
  width: "w-full"
});
const progress = () => ({
  animation: "transition-all",
  ...gradientBgColor,
  borderRadius: "rounded-full",
  fade: "ease-out",
  height: "h-full"
});
const radialProgressBar = () => ({});
const radio = ({ active }) => ({
  animation: "transition-all",
  border: "border",
  borderColor: "border-gray-300/50 dark:border-gray-600/50",
  borderRadius: "rounded-md",
  cursor: "cursor-pointer",
  fade: "ease",
  display: "flex-start-top",
  duration: "duration-200",
  hover: "hover:border-gray-300 hover:dark:border-gray-600",
  space: "space-x-4",
  position: "relative",
  spacing: "p-4"
});
const radioInput = () => ({
  animation: "transition-all",
  appearance: "appearance-none",
  bgColor: "bg-white dark:bg-gray-800",
  border: "border",
  borderColor: "border-gray-300 dark:border-gray-600",
  borderRadius: "rounded-full",
  checked: "checked:bg-primary checked:border-primary checked:dark:bg-secondary checked:dark:border-secondary",
  cursor: "cursor-pointer",
  fade: "ease",
  focus: "focus:ring-2 focus:ring-primary",
  height: "h-4",
  ring: "ring-none",
  ringColor: "ring-transparent checked:ring-transparent dark:checked:ring-transparent focus:ring-transparent",
  ringOffset: "ring-offset-none checked:ring-offset-4 focus:ring-offset-transparent",
  ringOffsetColor: "checked:ring-offset-primary/50 dark:checked:ring-offset-secondary/50",
  width: "w-4"
});
const radioTitle = () => ({
  color: "text-gray-700 dark:text-gray-200",
  fontSize: "text-sm",
  fontWeight: "font-medium",
  leading: "leading-tight"
});
const radioText = () => ({
  color: "text-gray-600 dark:text-gray-300",
  fontSize: "text-sm",
  fontWeight: "font-light",
  tracking: "tracking-wide"
});
const rangeSlider = () => ({
  display: "block"
});
const rangeSliderTrack = () => ({
  bgColor: "bg-gray-100 dark:bg-gray-800",
  borderRadius: "rounded-full",
  height: "h-inherit",
  display: "flex",
  width: "w-full"
});
const rangeSliderThumb = ({ isDragged }) => ({
  size: "w-6 h-6",
  bgColor: isDragged ? "bg-primary dark:bg-secondary" : "bg-gray-300 dark:bg-gray-600",
  border: "border-2",
  borderColor: isDragged ? "border-primary dark:border-secondary" : "border-gray-300 dark:border-gray-600",
  borderRadius: "rounded-full",
  display: "flex-middle",
  position: "",
  shadow: "shadow-sm"
});
const route = () => ({
  bgColor: "bg-white dark:bg-gray-900",
  display: "block",
  width: "w-full"
});
const section = () => ({
  bgColor: "bg-white dark:bg-gray-900",
  border: "border",
  borderColor: "border-gray-300/50 dark:border-gray-600/50",
  borderRadius: "rounded-md",
  position: "relative",
  spacing: "mb-4",
  width: "w-full"
});
const sectionHeader = () => ({
  spacing: "p-4",
  border: "border-b",
  borderColor: "border-gray-300/50 dark:border-gray-600/50",
  display: "flex-between",
  space: "space-x-4",
  width: "w-full"
});
const sectionPretitle = () => ({
  color: "text-gray-700 dark:text-gray-300",
  fontFamily: "font-accent",
  fontSize: "text-sm",
  fontWeight: "f