import clsx from 'clsx';
import { extendTailwindMerge } from 'tailwind-merge';
import 'lodash-es';
import { createClassed, deriveClassed } from '@tw-classed/react';
import { createClassed as createClassed$1 } from '@tw-classed/core';
import createVariatGroupTransfomer from 'tailwind-group-variant';
import { jsx, Fragment } from 'react/jsx-runtime';
import { useCallback } from 'react';

// src/styles/text.variants.ts
var headingTextSize = {
  h1: clsx("text-h1"),
  h2: clsx("text-h2"),
  h3: clsx("text-h3"),
  h4: clsx("text-h4"),
  h5: clsx("text-h5"),
  h6: clsx("text-h6")
};
var textSize = {
  xs: clsx("text-xs"),
  sm: clsx("text-sm"),
  md: clsx("text-md"),
  lg: clsx("text-lg")
};
var textVariants = {
  fontWeight: {
    regular: clsx("font-regular"),
    medium: clsx("font-medium"),
    bold: clsx("font-bold")
  },
  size: {
    ...textSize,
    ...headingTextSize
  },
  font: {
    body: "font-body",
    heading: "font-heading",
    mono: "font-mono"
  },
  leading: {
    none: clsx("leading-none"),
    xs: clsx("leading-xs"),
    sm: clsx("leading-sm"),
    md: clsx("leading-md"),
    lg: clsx("leading-lg"),
    h1: clsx("leading-h1"),
    h2: clsx("leading-h2"),
    h3: clsx("leading-h3"),
    h4: clsx("leading-h4"),
    h5: clsx("leading-h5"),
    h6: clsx("leading-h6")
  },
  spaceY: {
    xs: clsx("space-y-4"),
    sm: clsx("space-y-6"),
    md: clsx("space-y-8"),
    lg: clsx("space-y-16")
  },
  spaceX: {
    xs: clsx("space-x-4"),
    sm: clsx("space-x-6"),
    md: clsx("space-x-8"),
    lg: clsx("space-x-16")
  },
  color: {
    inherit: clsx("text-inherit"),
    current: clsx("text-current"),
    tint: clsx("text-content-tint"),
    ghost: clsx("text-content-ghost"),
    subtle: clsx("text-content-subtle"),
    medium: clsx("text-content"),
    weak: clsx("text-content-weak"),
    moderate: clsx("text-content-moderate"),
    high: clsx("text-content-high"),
    intense: clsx("text-content-intense"),
    strong: clsx("text-content-intense"),
    inverse: clsx("text-inverse"),
    danger: clsx("text-danger")
  },
  align: {
    center: clsx("text-center"),
    right: clsx("text-right"),
    left: clsx("text-left"),
    start: clsx("text-left"),
    end: clsx("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"
  }
};
var twMerge = extendTailwindMerge({
  classGroups: {
    "font-size": [
      {
        // Fixes incorect merging of text size
        text: ["h1", "h2", "h3", "h4", "h5", "h6"]
      }
    ]
  }
});
var { classed } = createClassed({ merger: twMerge });
createClassed$1({ merger: twMerge });
createVariatGroupTransfomer({});

// 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__ */ jsx(TextDotElement, { viewBox: "0 0 2 2", ...props, children: /* @__PURE__ */ jsx("circle", { cx: 1, cy: 1, r: 1 }) });
var DuplicateChildren = ({ count, children }) => {
  const renderChildren = useCallback(() => {
    if (count === 1)
      return children;
    return new Array(count).fill(0).map(() => children);
  }, [children, count]);
  return /* @__PURE__ */ jsx(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 = deriveClassed(
  ({ children, className, as, ...props }, forwardedRef) => {
    return /* @__PURE__ */ jsx(TextElement, { className, as, ...props, ref: forwardedRef, children });
  }
);
var Header = ({ as, ...props }) => /* @__PURE__ */ jsx(Text, { as, ...props });
var H1 = (props) => /* @__PURE__ */ jsx(Header, { as: "h1", size: "h1", ...props });
var H2 = (props) => /* @__PURE__ */ jsx(Header, { as: "h2", size: "h2", ...props });
var H3 = (props) => /* @__PURE__ */ jsx(Header, { as: "h3", size: "h3", ...props });
var H4 = (props) => /* @__PURE__ */ jsx(Header, { as: "h4", size: "h4", ...props });
var H5 = (props) => /* @__PURE__ */ jsx(Header, { as: "h5", size: "h5", ...props });
var H6 = (props) => /* @__PURE__ */ jsx(Header, { as: "h6", size: "h6", ...props });
var PresetTextComponent = deriveClassed(({ preset, ...props }, forwardedRef) => {
  return /* @__PURE__ */ jsx(TextComponent, { ...textComponentProps[preset], ...props, ref: forwardedRef });
});
var Overline = (props) => /* @__PURE__ */ jsx(PresetTextComponent, { preset: "overline", ...props });
var Heading = (props) => /* @__PURE__ */ jsx(PresetTextComponent, { preset: "heading", ...props });
var Subheading = (props) => /* @__PURE__ */ jsx(PresetTextComponent, { preset: "subheading", ...props });
var Title = (props) => /* @__PURE__ */ jsx(PresetTextComponent, { preset: "title", ...props });
var Subtitle = (props) => /* @__PURE__ */ jsx(PresetTextComponent, { preset: "subtitle", ...props });
var Body = (props) => /* @__PURE__ */ jsx(PresetTextComponent, { preset: "body", ...props });
var Description = (props) => /* @__PURE__ */ jsx(PresetTextComponent, { preset: "description", ...props });
var Caption = (props) => /* @__PURE__ */ jsx(PresetTextComponent, { preset: "caption", ...props });
var Br = (props) => /* @__PURE__ */ jsx(DuplicateChildren, { ...props, children: /* @__PURE__ */ jsx("br", {}) });
var Space = (props) => /* @__PURE__ */ jsx(DuplicateChildren, { ...props, children: "\xA0" });
var Blank = (props) => /* @__PURE__ */ jsx(DuplicateChildren, { ...props, children: "\u200D" });
var Dash = (props) => /* @__PURE__ */ 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);
var PageHeaderSectionEleemnt = classed("div", "md:flex md:items-center md:justify-between");
var PageHeading = ({ children, ...props }) => /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx(Text.Heading, { size: "h3", ...props, children }) });
var PageSubComponents = {
  HeaderSection: PageHeaderSectionEleemnt,
  Heading: PageHeading
};
var PageContainer = classed("div");
var Page = Object.assign(PageContainer, PageSubComponents);
var FullPageContainerElement = classed("div", "mx-auto max-w-7xl px-4 sm:px-12 lg:px-16");
var FullPageContainerInnerElement = classed("div", "mx-auto max-w-3xl");
var FullPageContainer = ({
  children,
  ...props
}) => /* @__PURE__ */ jsx(FullPageContainerElement, { ...props, children: /* @__PURE__ */ jsx(FullPageContainerInnerElement, { children }) });
var FullPage = Object.assign(FullPageContainer, PageSubComponents);

export { FullPage, Page };
//# sourceMappingURL=out.js.map
//# sourceMappingURL=index.js.map