@atom-learning/components 6.6.0-beta.1 → 6.6.0-beta.2

package/dist/components/link/Link.js

@@ -1,8 +1,8 @@
-import { styled as e } from "../../styled.js";
-import { getExternalAnchorProps as t } from "../../utilities/uri/index.js";
-import * as n from "react";
+import { styled } from "../../styled.js";
+import { getExternalAnchorProps } from "../../utilities/uri/index.js";
+import * as React$1 from "react";
 //#region src/components/link/Link.tsx
-var r = e("a", {
+var StyledLink = styled("a", {
 	base: [
 		"bg-[unset]",
 		"text-primary-800",
@@ -52,17 +52,18 @@ var r = e("a", {
 		noCapsize: { true: ["capsize-none"] }
 	},
 	defaultVariants: { size: "md" }
-}, { enabledResponsiveVariants: !0 }), i = n.forwardRef(({ as: e, disabled: i, href: a, ...o }, s) => /* @__PURE__ */ n.createElement(r, {
-	as: e || (a ? void 0 : "button"),
-	noCapsize: a ? void 0 : !0,
-	href: a,
-	...i && { disabled: !0 },
-	...o,
-	...t(a),
-	ref: s
+}, { enabledResponsiveVariants: true });
+var Link = React$1.forwardRef(({ as, disabled, href, ...rest }, ref) => /* @__PURE__ */ React$1.createElement(StyledLink, {
+	as: as || (!href ? "button" : void 0),
+	noCapsize: !href ? true : void 0,
+	href,
+	...disabled && { disabled: true },
+	...rest,
+	...getExternalAnchorProps(href),
+	ref
 }));
-i.displayName = "Link";
+Link.displayName = "Link";
 //#endregion
-export { i as Link, r as StyledLink };
+export { Link, StyledLink };
 
 //# sourceMappingURL=Link.js.map

package/dist/components/link/Link.js.map

@@ -1 +1 @@
-{"version":3,"file":"Link.js","names":[],"sources":["../../../src/components/link/Link.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { NavigatorActions } from '~/types/navigatorActions.types'\nimport { Override } from '~/utilities/types'\nimport { getExternalAnchorProps } from '~/utilities/uri'\n\nexport const StyledLink = styled(\n  'a',\n  {\n    base: [\n      'bg-[unset]',\n      'text-primary-800',\n      'cursor-pointer',\n      'font-body',\n      'no-underline',\n      'focus:text-primary-900',\n      'focus:underline',\n      'hover:text-primary-900',\n      'hover:underline',\n      'active:text-primary-1000',\n      'disabled:cursor-not-allowed',\n      'disabled:opacity-30',\n      'disabled:pointer-events-none',\n      '[p>&,h1>&,h2>&,h3>&,h4>&,li>&,em>&]:after:content-none',\n      '[p>&,h1>&,h2>&,h3>&,h4>&,li>&,em>&]:before:content-none',\n      '[p>&,h1>&,h2>&,h3>&,h4>&,li>&,em>&]:text-[100%]/none'\n    ],\n    variants: {\n      size: {\n        xs: ['text-xs', 'leading-[1.6]', 'capsize-[0.4364]'],\n        sm: ['text-sm', 'leading-[1.53]', 'capsize-[0.4056]'],\n        md: ['text-md', 'leading-normal', 'capsize-[0.3864]'],\n        lg: ['text-lg', 'leading-[1.52]', 'capsize-[0.3983]'],\n        xl: ['text-xl', 'leading-[1.42]', 'capsize-[0.3506]']\n      },\n      noCapsize: {\n        true: ['capsize-none']\n      }\n    },\n    defaultVariants: {\n      size: 'md'\n    }\n  },\n  { enabledResponsiveVariants: true }\n)\n\ntype LinkProps = Override<\n  React.ComponentProps<typeof StyledLink>,\n  NavigatorActions & { disabled?: boolean }\n>\n\nexport const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(\n  ({ as, disabled, href, ...rest }, ref) => (\n    <StyledLink\n      as={as || (!href ? 'button' : undefined)}\n      noCapsize={!href ? true : undefined}\n      href={href}\n      {...(disabled && { disabled: true })}\n      {...rest}\n      {...getExternalAnchorProps(href)}\n      ref={ref as any}\n    />\n  )\n)\n\nLink.displayName = 'Link'\n"],"mappings":";;;;AAOA,IAAa,IAAa,EACxB,KACA;CACE,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU;EACR,MAAM;GACJ,IAAI;IAAC;IAAW;IAAiB;IAAmB;GACpD,IAAI;IAAC;IAAW;IAAkB;IAAmB;GACrD,IAAI;IAAC;IAAW;IAAkB;IAAmB;GACrD,IAAI;IAAC;IAAW;IAAkB;IAAmB;GACrD,IAAI;IAAC;IAAW;IAAkB;IAAmB;GACtD;EACD,WAAW,EACT,MAAM,CAAC,eAAe,EACvB;EACF;CACD,iBAAiB,EACf,MAAM,MACP;CACF,EACD,EAAE,2BAA2B,IAAM,CACpC,EAOY,IAAO,EAAM,YACvB,EAAE,OAAI,aAAU,SAAM,GAAG,KAAQ,MAChC,kBAAA,cAAC,GAAD;CACE,IAAI,MAAQ,IAAkB,KAAA,IAAX;CACnB,WAAY,IAAc,KAAA,IAAP;CACb;CACN,GAAK,KAAY,EAAE,UAAU,IAAM;CACnC,GAAI;CACJ,GAAI,EAAuB,EAAK;CAC3B;CACL,CAAA,CAEL;AAED,EAAK,cAAc"}
+{"version":3,"file":"Link.js","names":[],"sources":["../../../src/components/link/Link.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { NavigatorActions } from '~/types/navigatorActions.types'\nimport { Override } from '~/utilities/types'\nimport { getExternalAnchorProps } from '~/utilities/uri'\n\nexport const StyledLink = styled(\n  'a',\n  {\n    base: [\n      'bg-[unset]',\n      'text-primary-800',\n      'cursor-pointer',\n      'font-body',\n      'no-underline',\n      'focus:text-primary-900',\n      'focus:underline',\n      'hover:text-primary-900',\n      'hover:underline',\n      'active:text-primary-1000',\n      'disabled:cursor-not-allowed',\n      'disabled:opacity-30',\n      'disabled:pointer-events-none',\n      '[p>&,h1>&,h2>&,h3>&,h4>&,li>&,em>&]:after:content-none',\n      '[p>&,h1>&,h2>&,h3>&,h4>&,li>&,em>&]:before:content-none',\n      '[p>&,h1>&,h2>&,h3>&,h4>&,li>&,em>&]:text-[100%]/none'\n    ],\n    variants: {\n      size: {\n        xs: ['text-xs', 'leading-[1.6]', 'capsize-[0.4364]'],\n        sm: ['text-sm', 'leading-[1.53]', 'capsize-[0.4056]'],\n        md: ['text-md', 'leading-normal', 'capsize-[0.3864]'],\n        lg: ['text-lg', 'leading-[1.52]', 'capsize-[0.3983]'],\n        xl: ['text-xl', 'leading-[1.42]', 'capsize-[0.3506]']\n      },\n      noCapsize: {\n        true: ['capsize-none']\n      }\n    },\n    defaultVariants: {\n      size: 'md'\n    }\n  },\n  { enabledResponsiveVariants: true }\n)\n\ntype LinkProps = Override<\n  React.ComponentProps<typeof StyledLink>,\n  NavigatorActions & { disabled?: boolean }\n>\n\nexport const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(\n  ({ as, disabled, href, ...rest }, ref) => (\n    <StyledLink\n      as={as || (!href ? 'button' : undefined)}\n      noCapsize={!href ? true : undefined}\n      href={href}\n      {...(disabled && { disabled: true })}\n      {...rest}\n      {...getExternalAnchorProps(href)}\n      ref={ref as any}\n    />\n  )\n)\n\nLink.displayName = 'Link'\n"],"mappings":";;;;AAOA,IAAa,aAAa,OACxB,KACA;CACE,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU;EACR,MAAM;GACJ,IAAI;IAAC;IAAW;IAAiB;IAAmB;GACpD,IAAI;IAAC;IAAW;IAAkB;IAAmB;GACrD,IAAI;IAAC;IAAW;IAAkB;IAAmB;GACrD,IAAI;IAAC;IAAW;IAAkB;IAAmB;GACrD,IAAI;IAAC;IAAW;IAAkB;IAAmB;GACtD;EACD,WAAW,EACT,MAAM,CAAC,eAAe,EACvB;EACF;CACD,iBAAiB,EACf,MAAM,MACP;CACF,EACD,EAAE,2BAA2B,MAAM,CACpC;AAOD,IAAa,OAAO,QAAM,YACvB,EAAE,IAAI,UAAU,MAAM,GAAG,QAAQ,QAChC,wBAAA,cAAC,YAAD;CACE,IAAI,OAAO,CAAC,OAAO,WAAW,KAAA;CAC9B,WAAW,CAAC,OAAO,OAAO,KAAA;CACpB;CACN,GAAK,YAAY,EAAE,UAAU,MAAM;CACnC,GAAI;CACJ,GAAI,uBAAuB,KAAK;CAC3B;CACL,CAAA,CAEL;AAED,KAAK,cAAc"}

package/dist/components/list/List.js

@@ -1,7 +1,8 @@
-import { styled as e } from "../../styled.js";
-import * as t from "react";
+import { styled } from "../../styled.js";
+import * as React$1 from "react";
 //#region src/components/list/List.tsx
-var n = e("li", { base: ["last:mb-0", "not-last:mb-2"] }), r = e("ul", {
+var StyledLi = styled("li", { base: ["last:mb-0", "not-last:mb-2"] });
+var StyledList = styled("ul", {
 	base: ["list-inside", "font-body"],
 	variants: {
 		size: {
@@ -48,16 +49,17 @@ var n = e("li", { base: ["last:mb-0", "not-last:mb-2"] }), r = e("ul", {
 		},
 		theme: { primary: ["marker:text-primary-800"] }
 	}
-}), i = t.forwardRef(({ size: e = "md", noCapsize: n = !0, ordered: i = !1, ...a }, o) => /* @__PURE__ */ t.createElement(r, {
-	ref: o,
-	as: i ? "ol" : "ul",
-	ordered: i,
-	size: e,
-	noCapsize: n,
-	...a
+});
+var List = React$1.forwardRef(({ size = "md", noCapsize = true, ordered = false, ...remainingProps }, ref) => /* @__PURE__ */ React$1.createElement(StyledList, {
+	ref,
+	as: ordered ? "ol" : "ul",
+	ordered,
+	size,
+	noCapsize,
+	...remainingProps
 }));
-i.Item = n;
+List.Item = StyledLi;
 //#endregion
-export { i as List };
+export { List };
 
 //# sourceMappingURL=List.js.map

package/dist/components/list/List.js.map

@@ -1 +1 @@
-{"version":3,"file":"List.js","names":[],"sources":["../../../src/components/list/List.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nexport const StyledLi = styled('li', {\n  base: ['last:mb-0', 'not-last:mb-2']\n})\n\nexport const StyledList = styled('ul', {\n  base: ['list-inside', 'font-body'],\n  variants: {\n    size: {\n      xs: ['text-xs', 'leading-[1.6]', 'capsize-[0.4364]'],\n      sm: ['text-sm', 'leading-[1.53]', 'capsize-[0.4056]'],\n      md: ['text-md', 'leading-normal', 'capsize-[0.3864]'],\n      lg: ['text-lg', 'leading-[1.52]', 'capsize-[0.3983]'],\n      xl: ['text-xl', 'leading-[1.42]', 'capsize-[0.3506]']\n    },\n    noCapsize: {\n      true: ['capsize-none']\n    },\n    ordered: {\n      true: [\n        'pl-4',\n        'list-decimal',\n        '[&_>_li]:pl-1',\n        '[&_>_li::marker]:font-medium',\n        '[&_>_li::marker]:text-sm'\n      ],\n      false: ['pl-3', 'list-disc', '[&_>_li]:pl-2']\n    },\n    theme: {\n      primary: ['marker:text-primary-800']\n    }\n  }\n})\n\ntype ListProps = React.ComponentProps<typeof StyledList> & {\n  ordered?: boolean\n}\n\ntype ListType = ReturnType<\n  typeof React.forwardRef<HTMLUListElement, ListProps>\n> & {\n  Item: typeof StyledLi\n}\n\nexport const List = React.forwardRef<HTMLUListElement, ListProps>(\n  (\n    { size = 'md', noCapsize = true, ordered = false, ...remainingProps },\n    ref\n  ) => (\n    <StyledList\n      ref={ref}\n      as={ordered ? 'ol' : 'ul'}\n      ordered={ordered}\n      size={size}\n      noCapsize={noCapsize}\n      {...remainingProps}\n    />\n  )\n) as ListType\n\nList.Item = StyledLi\n"],"mappings":";;;AAIA,IAAa,IAAW,EAAO,MAAM,EACnC,MAAM,CAAC,aAAa,gBAAgB,EACrC,CAAC,EAEW,IAAa,EAAO,MAAM;CACrC,MAAM,CAAC,eAAe,YAAY;CAClC,UAAU;EACR,MAAM;GACJ,IAAI;IAAC;IAAW;IAAiB;IAAmB;GACpD,IAAI;IAAC;IAAW;IAAkB;IAAmB;GACrD,IAAI;IAAC;IAAW;IAAkB;IAAmB;GACrD,IAAI;IAAC;IAAW;IAAkB;IAAmB;GACrD,IAAI;IAAC;IAAW;IAAkB;IAAmB;GACtD;EACD,WAAW,EACT,MAAM,CAAC,eAAe,EACvB;EACD,SAAS;GACP,MAAM;IACJ;IACA;IACA;IACA;IACA;IACD;GACD,OAAO;IAAC;IAAQ;IAAa;IAAgB;GAC9C;EACD,OAAO,EACL,SAAS,CAAC,0BAA0B,EACrC;EACF;CACF,CAAC,EAYW,IAAO,EAAM,YAEtB,EAAE,UAAO,MAAM,eAAY,IAAM,aAAU,IAAO,GAAG,KACrD,MAEA,kBAAA,cAAC,GAAD;CACO;CACL,IAAI,IAAU,OAAO;CACZ;CACH;CACK;CACX,GAAI;CACJ,CAAA,CAEL;AAED,EAAK,OAAO"}
+{"version":3,"file":"List.js","names":[],"sources":["../../../src/components/list/List.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nexport const StyledLi = styled('li', {\n  base: ['last:mb-0', 'not-last:mb-2']\n})\n\nexport const StyledList = styled('ul', {\n  base: ['list-inside', 'font-body'],\n  variants: {\n    size: {\n      xs: ['text-xs', 'leading-[1.6]', 'capsize-[0.4364]'],\n      sm: ['text-sm', 'leading-[1.53]', 'capsize-[0.4056]'],\n      md: ['text-md', 'leading-normal', 'capsize-[0.3864]'],\n      lg: ['text-lg', 'leading-[1.52]', 'capsize-[0.3983]'],\n      xl: ['text-xl', 'leading-[1.42]', 'capsize-[0.3506]']\n    },\n    noCapsize: {\n      true: ['capsize-none']\n    },\n    ordered: {\n      true: [\n        'pl-4',\n        'list-decimal',\n        '[&_>_li]:pl-1',\n        '[&_>_li::marker]:font-medium',\n        '[&_>_li::marker]:text-sm'\n      ],\n      false: ['pl-3', 'list-disc', '[&_>_li]:pl-2']\n    },\n    theme: {\n      primary: ['marker:text-primary-800']\n    }\n  }\n})\n\ntype ListProps = React.ComponentProps<typeof StyledList> & {\n  ordered?: boolean\n}\n\ntype ListType = ReturnType<\n  typeof React.forwardRef<HTMLUListElement, ListProps>\n> & {\n  Item: typeof StyledLi\n}\n\nexport const List = React.forwardRef<HTMLUListElement, ListProps>(\n  (\n    { size = 'md', noCapsize = true, ordered = false, ...remainingProps },\n    ref\n  ) => (\n    <StyledList\n      ref={ref}\n      as={ordered ? 'ol' : 'ul'}\n      ordered={ordered}\n      size={size}\n      noCapsize={noCapsize}\n      {...remainingProps}\n    />\n  )\n) as ListType\n\nList.Item = StyledLi\n"],"mappings":";;;AAIA,IAAa,WAAW,OAAO,MAAM,EACnC,MAAM,CAAC,aAAa,gBAAgB,EACrC,CAAC;AAEF,IAAa,aAAa,OAAO,MAAM;CACrC,MAAM,CAAC,eAAe,YAAY;CAClC,UAAU;EACR,MAAM;GACJ,IAAI;IAAC;IAAW;IAAiB;IAAmB;GACpD,IAAI;IAAC;IAAW;IAAkB;IAAmB;GACrD,IAAI;IAAC;IAAW;IAAkB;IAAmB;GACrD,IAAI;IAAC;IAAW;IAAkB;IAAmB;GACrD,IAAI;IAAC;IAAW;IAAkB;IAAmB;GACtD;EACD,WAAW,EACT,MAAM,CAAC,eAAe,EACvB;EACD,SAAS;GACP,MAAM;IACJ;IACA;IACA;IACA;IACA;IACD;GACD,OAAO;IAAC;IAAQ;IAAa;IAAgB;GAC9C;EACD,OAAO,EACL,SAAS,CAAC,0BAA0B,EACrC;EACF;CACF,CAAC;AAYF,IAAa,OAAO,QAAM,YAEtB,EAAE,OAAO,MAAM,YAAY,MAAM,UAAU,OAAO,GAAG,kBACrD,QAEA,wBAAA,cAAC,YAAD;CACO;CACL,IAAI,UAAU,OAAO;CACZ;CACH;CACK;CACX,GAAI;CACJ,CAAA,CAEL;AAED,KAAK,OAAO"}

package/dist/components/loader/Loader.js

@@ -1,8 +1,8 @@
-import { styled as e } from "../../styled.js";
-import t from "clsx";
-import * as n from "react";
+import { styled } from "../../styled.js";
+import clsx from "clsx";
+import * as React$1 from "react";
 //#region src/components/loader/Loader.tsx
-var r = e("div", {
+var Dot = styled("div", {
 	base: [
 		"animate-pulse",
 		"bg-current",
@@ -16,12 +16,13 @@ var r = e("div", {
 		md: ["size-1.5", "mx-0.5"],
 		lg: ["size-2", "mx-[3px]"]
 	} }
-}), i = ({ className: e, message: i = "Loading", size: a = "md", ...o }) => /* @__PURE__ */ n.createElement("div", {
-	className: t("flex", "justify-center", e),
+});
+var Loader = ({ className, message = "Loading", size = "md", ...props }) => /* @__PURE__ */ React$1.createElement("div", {
+	className: clsx("flex", "justify-center", className),
 	role: "alert",
-	...o
-}, /* @__PURE__ */ n.createElement("span", { className: "sr-only" }, i), /* @__PURE__ */ n.createElement(r, { size: a }), /* @__PURE__ */ n.createElement(r, { size: a }), /* @__PURE__ */ n.createElement(r, { size: a }));
+	...props
+}, /* @__PURE__ */ React$1.createElement("span", { className: "sr-only" }, message), /* @__PURE__ */ React$1.createElement(Dot, { size }), /* @__PURE__ */ React$1.createElement(Dot, { size }), /* @__PURE__ */ React$1.createElement(Dot, { size }));
 //#endregion
-export { i as Loader };
+export { Loader };
 
 //# sourceMappingURL=Loader.js.map

package/dist/components/loader/Loader.js.map

@@ -1 +1 @@
-{"version":3,"file":"Loader.js","names":[],"sources":["../../../src/components/loader/Loader.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nconst Dot = styled('div', {\n  base: [\n    'animate-pulse',\n    'bg-current',\n    'rounded-full',\n    'animation-duration-900',\n    'nth-3:animation-delay-300',\n    'nth-4:animation-delay-600'\n  ],\n  variants: {\n    size: {\n      sm: ['size-1', 'mx-0.5'],\n      md: ['size-1.5', 'mx-0.5'],\n      lg: ['size-2', 'mx-[3px]']\n    }\n  }\n})\n\ntype LoaderProps = React.ComponentProps<'div'> & {\n  message?: string\n  size?: 'sm' | 'md' | 'lg'\n}\n\nexport const Loader = ({\n  className,\n  message = 'Loading',\n  size = 'md',\n  ...props\n}: LoaderProps) => (\n  <div\n    className={clsx('flex', 'justify-center', className)}\n    role=\"alert\"\n    {...props}\n  >\n    <span className=\"sr-only\">{message}</span>\n    <Dot size={size} />\n    <Dot size={size} />\n    <Dot size={size} />\n  </div>\n)\n"],"mappings":";;;;AAKA,IAAM,IAAM,EAAO,OAAO;CACxB,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,UAAU,SAAS;EACxB,IAAI,CAAC,YAAY,SAAS;EAC1B,IAAI,CAAC,UAAU,WAAW;EAC3B,EACF;CACF,CAAC,EAOW,KAAU,EACrB,cACA,aAAU,WACV,UAAO,MACP,GAAG,QAEH,kBAAA,cAAC,OAAD;CACE,WAAW,EAAK,QAAQ,kBAAkB,EAAU;CACpD,MAAK;CACL,GAAI;CAMA,EAJJ,kBAAA,cAAC,QAAD,EAAM,WAAU,WAA0B,EAAf,EAAe,EAC1C,kBAAA,cAAC,GAAD,EAAW,SAAQ,CAAA,EACnB,kBAAA,cAAC,GAAD,EAAW,SAAQ,CAAA,EACnB,kBAAA,cAAC,GAAD,EAAW,SAAQ,CAAA,CACf"}
+{"version":3,"file":"Loader.js","names":[],"sources":["../../../src/components/loader/Loader.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nconst Dot = styled('div', {\n  base: [\n    'animate-pulse',\n    'bg-current',\n    'rounded-full',\n    'animation-duration-900',\n    'nth-3:animation-delay-300',\n    'nth-4:animation-delay-600'\n  ],\n  variants: {\n    size: {\n      sm: ['size-1', 'mx-0.5'],\n      md: ['size-1.5', 'mx-0.5'],\n      lg: ['size-2', 'mx-[3px]']\n    }\n  }\n})\n\ntype LoaderProps = React.ComponentProps<'div'> & {\n  message?: string\n  size?: 'sm' | 'md' | 'lg'\n}\n\nexport const Loader = ({\n  className,\n  message = 'Loading',\n  size = 'md',\n  ...props\n}: LoaderProps) => (\n  <div\n    className={clsx('flex', 'justify-center', className)}\n    role=\"alert\"\n    {...props}\n  >\n    <span className=\"sr-only\">{message}</span>\n    <Dot size={size} />\n    <Dot size={size} />\n    <Dot size={size} />\n  </div>\n)\n"],"mappings":";;;;AAKA,IAAM,MAAM,OAAO,OAAO;CACxB,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,UAAU,SAAS;EACxB,IAAI,CAAC,YAAY,SAAS;EAC1B,IAAI,CAAC,UAAU,WAAW;EAC3B,EACF;CACF,CAAC;AAOF,IAAa,UAAU,EACrB,WACA,UAAU,WACV,OAAO,MACP,GAAG,YAEH,wBAAA,cAAC,OAAD;CACE,WAAW,KAAK,QAAQ,kBAAkB,UAAU;CACpD,MAAK;CACL,GAAI;CAMA,EAJJ,wBAAA,cAAC,QAAD,EAAM,WAAU,WAA0B,EAAf,QAAe,EAC1C,wBAAA,cAAC,KAAD,EAAW,MAAQ,CAAA,EACnB,wBAAA,cAAC,KAAD,EAAW,MAAQ,CAAA,EACnB,wBAAA,cAAC,KAAD,EAAW,MAAQ,CAAA,CACf"}

package/dist/components/markdown-content/MarkdownContent.js

@@ -1,22 +1,22 @@
-import { styled as e } from "../../styled.js";
-import { MarkdownCode as t } from "./components/MarkdownCode.js";
-import { MarkdownEmphasis as n } from "./components/MarkdownEmphasis.js";
-import { MarkdownHeading as r } from "./components/MarkdownHeading.js";
-import { MarkdownImage as i } from "./components/MarkdownImage.js";
-import { MarkdownInlineCode as a } from "./components/MarkdownInlineCode.js";
-import { MarkdownLink as o } from "./components/MarkdownLink.js";
-import { MarkdownList as s } from "./components/MarkdownList.js";
-import { MarkdownListItem as c } from "./components/MarkdownListItem.js";
-import { MarkdownParagraph as l } from "./components/MarkdownParagraph.js";
-import { MarkdownStrong as u } from "./components/MarkdownStrong.js";
-import { MarkdownText as d } from "./components/MarkdownText.js";
-import { MarkdownThematicBreak as f } from "./components/MarkdownThematicBreak.js";
-import * as p from "react";
-import m from "mdast-util-directive";
-import h from "mdast-util-from-markdown";
-import g from "micromark-extension-directive";
+import { styled } from "../../styled.js";
+import { MarkdownCode } from "./components/MarkdownCode.js";
+import { MarkdownEmphasis } from "./components/MarkdownEmphasis.js";
+import { MarkdownHeading } from "./components/MarkdownHeading.js";
+import { MarkdownImage } from "./components/MarkdownImage.js";
+import { MarkdownInlineCode } from "./components/MarkdownInlineCode.js";
+import { MarkdownLink } from "./components/MarkdownLink.js";
+import { MarkdownList } from "./components/MarkdownList.js";
+import { MarkdownListItem } from "./components/MarkdownListItem.js";
+import { MarkdownParagraph } from "./components/MarkdownParagraph.js";
+import { MarkdownStrong } from "./components/MarkdownStrong.js";
+import { MarkdownText } from "./components/MarkdownText.js";
+import { MarkdownThematicBreak } from "./components/MarkdownThematicBreak.js";
+import * as React$1 from "react";
+import directive from "mdast-util-directive";
+import fromMarkdown from "mdast-util-from-markdown";
+import syntax from "micromark-extension-directive";
 //#region src/components/markdown-content/MarkdownContent.tsx
-var _ = e("div", { base: [
+var StyledMarkdownContent = styled("div", { base: [
 	"flex",
 	"flex-col",
 	"gap-8",
@@ -26,44 +26,49 @@ var _ = e("div", { base: [
 	"[&>h4]:max-w-[65ch]",
 	"[&>p]:max-w-[75ch]",
 	"[&>ul]:max-w-[75ch]"
-] }), v = {
-	code: t,
-	emphasis: n,
-	heading: r,
-	inlineCode: a,
-	image: i,
-	link: o,
-	list: s,
-	listItem: c,
-	paragraph: l,
-	strong: u,
-	text: d,
-	thematicBreak: f
-}, y = (e) => {
-	if (e.position?.start) {
-		let { line: t, column: n, offset: r } = e.position.start;
-		return `${e.type}${t}${n}${r}`;
+] });
+var defaultComponentsMap = {
+	code: MarkdownCode,
+	emphasis: MarkdownEmphasis,
+	heading: MarkdownHeading,
+	inlineCode: MarkdownInlineCode,
+	image: MarkdownImage,
+	link: MarkdownLink,
+	list: MarkdownList,
+	listItem: MarkdownListItem,
+	paragraph: MarkdownParagraph,
+	strong: MarkdownStrong,
+	text: MarkdownText,
+	thematicBreak: MarkdownThematicBreak
+};
+var generateNodeKey = (node) => {
+	if (node.position?.start) {
+		const { line, column, offset } = node.position.start;
+		return `${node.type}${line}${column}${offset}`;
 	}
-	return `${e.type}${+/* @__PURE__ */ new Date()}`;
-}, b = ({ content: e, customComponents: t = {}, className: n }) => {
-	let r = h(e, {
-		extensions: [g()],
-		mdastExtensions: [m.fromMarkdown]
-	}), i = {
-		...v,
-		...t
-	}, a = (e) => {
-		let t = i[e.type];
-		return t ? /* @__PURE__ */ p.createElement(t, {
-			key: y(e),
-			node: e,
-			handleNode: a
+	return `${node.type}${+/* @__PURE__ */ new Date()}`;
+};
+var MarkdownContent = ({ content, customComponents = {}, className }) => {
+	const AST = fromMarkdown(content, {
+		extensions: [syntax()],
+		mdastExtensions: [directive.fromMarkdown]
+	});
+	const componentsMap = {
+		...defaultComponentsMap,
+		...customComponents
+	};
+	const handleNode = (node) => {
+		const MarkdownComponent = componentsMap[node.type];
+		return MarkdownComponent ? /* @__PURE__ */ React$1.createElement(MarkdownComponent, {
+			key: generateNodeKey(node),
+			node,
+			handleNode
 		}) : null;
 	};
-	return /* @__PURE__ */ p.createElement(_, { className: n }, r.children.map(a));
+	return /* @__PURE__ */ React$1.createElement(StyledMarkdownContent, { className }, AST.children.map(handleNode));
 };
-b.displayName = "MarkdownContent";
+MarkdownContent.displayName = "MarkdownContent";
 //#endregion
-export { b as MarkdownContent };
+export { MarkdownContent };
 
 //# sourceMappingURL=MarkdownContent.js.map

package/dist/components/markdown-content/MarkdownContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"MarkdownContent.js","names":[],"sources":["../../../src/components/markdown-content/MarkdownContent.tsx"],"sourcesContent":["import directive from 'mdast-util-directive'\nimport fromMarkdown from 'mdast-util-from-markdown'\nimport syntax from 'micromark-extension-directive'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { MarkdownCode } from './components/MarkdownCode'\nimport { MarkdownEmphasis } from './components/MarkdownEmphasis'\nimport { MarkdownHeading } from './components/MarkdownHeading'\nimport { MarkdownImage } from './components/MarkdownImage'\nimport { MarkdownInlineCode } from './components/MarkdownInlineCode'\nimport { MarkdownLink } from './components/MarkdownLink'\nimport { MarkdownList } from './components/MarkdownList'\nimport { MarkdownListItem } from './components/MarkdownListItem'\nimport { MarkdownParagraph } from './components/MarkdownParagraph'\nimport { MarkdownStrong } from './components/MarkdownStrong'\nimport { MarkdownText } from './components/MarkdownText'\nimport { MarkdownThematicBreak } from './components/MarkdownThematicBreak'\n\ntype HandleNode = (node) => JSX.Element | null\n\nconst StyledMarkdownContent = styled('div', {\n  base: [\n    'flex',\n    'flex-col',\n    'gap-8',\n    '[&>h1]:max-w-[65ch]',\n    '[&>h2]:max-w-[65ch]',\n    '[&>h3]:max-w-[65ch]',\n    '[&>h4]:max-w-[65ch]',\n    '[&>p]:max-w-[75ch]',\n    '[&>ul]:max-w-[75ch]'\n  ]\n})\n\ntype MarkdownContentProps = React.ComponentProps<\n  typeof StyledMarkdownContent\n> & {\n  content: string\n  customComponents?: {\n    [key: string]: (props: { node: any; handleNode: HandleNode }) => JSX.Element\n  }\n}\n\nconst defaultComponentsMap = {\n  code: MarkdownCode,\n  emphasis: MarkdownEmphasis,\n  heading: MarkdownHeading,\n  inlineCode: MarkdownInlineCode,\n  image: MarkdownImage,\n  link: MarkdownLink,\n  list: MarkdownList,\n  listItem: MarkdownListItem,\n  paragraph: MarkdownParagraph,\n  strong: MarkdownStrong,\n  text: MarkdownText,\n  thematicBreak: MarkdownThematicBreak\n}\n\nconst generateNodeKey = (node) => {\n  if (node.position?.start) {\n    const { line, column, offset } = node.position.start\n    return `${node.type}${line}${column}${offset}`\n  }\n\n  return `${node.type}${+new Date()}`\n}\n\nexport const MarkdownContent = ({\n  content,\n  customComponents = {},\n  className\n}: MarkdownContentProps) => {\n  const AST = fromMarkdown(content, {\n    extensions: [syntax()],\n    mdastExtensions: [directive.fromMarkdown]\n  })\n\n  const componentsMap = {\n    ...defaultComponentsMap,\n    ...customComponents\n  }\n\n  const handleNode: HandleNode = (node) => {\n    const MarkdownComponent = componentsMap[node.type]\n\n    return MarkdownComponent ? (\n      <MarkdownComponent\n        key={generateNodeKey(node)}\n        node={node}\n        handleNode={handleNode}\n      />\n    ) : null\n  }\n\n  return (\n    <StyledMarkdownContent className={className}>\n      {AST.children.map(handleNode)}\n    </StyledMarkdownContent>\n  )\n}\n\nMarkdownContent.displayName = 'MarkdownContent'\n"],"mappings":";;;;;;;;;;;;;;;;;;AAsBA,IAAM,IAAwB,EAAO,OAAO,EAC1C,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC,EAWI,IAAuB;CAC3B,MAAM;CACN,UAAU;CACV,SAAS;CACT,YAAY;CACZ,OAAO;CACP,MAAM;CACN,MAAM;CACN,UAAU;CACV,WAAW;CACX,QAAQ;CACR,MAAM;CACN,eAAe;CAChB,EAEK,KAAmB,MAAS;AAChC,KAAI,EAAK,UAAU,OAAO;EACxB,IAAM,EAAE,SAAM,WAAQ,cAAW,EAAK,SAAS;AAC/C,SAAO,GAAG,EAAK,OAAO,IAAO,IAAS;;AAGxC,QAAO,GAAG,EAAK,OAAO,iBAAC,IAAI,MAAM;GAGtB,KAAmB,EAC9B,YACA,sBAAmB,EAAE,EACrB,mBAC0B;CAC1B,IAAM,IAAM,EAAa,GAAS;EAChC,YAAY,CAAC,GAAQ,CAAC;EACtB,iBAAiB,CAAC,EAAU,aAAa;EAC1C,CAAC,EAEI,IAAgB;EACpB,GAAG;EACH,GAAG;EACJ,EAEK,KAA0B,MAAS;EACvC,IAAM,IAAoB,EAAc,EAAK;AAE7C,SAAO,IACL,kBAAA,cAAC,GAAD;GACE,KAAK,EAAgB,EAAK;GACpB;GACM;GACZ,CAAA,GACA;;AAGN,QACE,kBAAA,cAAC,GAAD,EAAkC,cAEV,EADrB,EAAI,SAAS,IAAI,EAAW,CACP;;AAI5B,EAAgB,cAAc"}
+{"version":3,"file":"MarkdownContent.js","names":[],"sources":["../../../src/components/markdown-content/MarkdownContent.tsx"],"sourcesContent":["import directive from 'mdast-util-directive'\nimport fromMarkdown from 'mdast-util-from-markdown'\nimport syntax from 'micromark-extension-directive'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { MarkdownCode } from './components/MarkdownCode'\nimport { MarkdownEmphasis } from './components/MarkdownEmphasis'\nimport { MarkdownHeading } from './components/MarkdownHeading'\nimport { MarkdownImage } from './components/MarkdownImage'\nimport { MarkdownInlineCode } from './components/MarkdownInlineCode'\nimport { MarkdownLink } from './components/MarkdownLink'\nimport { MarkdownList } from './components/MarkdownList'\nimport { MarkdownListItem } from './components/MarkdownListItem'\nimport { MarkdownParagraph } from './components/MarkdownParagraph'\nimport { MarkdownStrong } from './components/MarkdownStrong'\nimport { MarkdownText } from './components/MarkdownText'\nimport { MarkdownThematicBreak } from './components/MarkdownThematicBreak'\n\ntype HandleNode = (node) => JSX.Element | null\n\nconst StyledMarkdownContent = styled('div', {\n  base: [\n    'flex',\n    'flex-col',\n    'gap-8',\n    '[&>h1]:max-w-[65ch]',\n    '[&>h2]:max-w-[65ch]',\n    '[&>h3]:max-w-[65ch]',\n    '[&>h4]:max-w-[65ch]',\n    '[&>p]:max-w-[75ch]',\n    '[&>ul]:max-w-[75ch]'\n  ]\n})\n\ntype MarkdownContentProps = React.ComponentProps<\n  typeof StyledMarkdownContent\n> & {\n  content: string\n  customComponents?: {\n    [key: string]: (props: { node: any; handleNode: HandleNode }) => JSX.Element\n  }\n}\n\nconst defaultComponentsMap = {\n  code: MarkdownCode,\n  emphasis: MarkdownEmphasis,\n  heading: MarkdownHeading,\n  inlineCode: MarkdownInlineCode,\n  image: MarkdownImage,\n  link: MarkdownLink,\n  list: MarkdownList,\n  listItem: MarkdownListItem,\n  paragraph: MarkdownParagraph,\n  strong: MarkdownStrong,\n  text: MarkdownText,\n  thematicBreak: MarkdownThematicBreak\n}\n\nconst generateNodeKey = (node) => {\n  if (node.position?.start) {\n    const { line, column, offset } = node.position.start\n    return `${node.type}${line}${column}${offset}`\n  }\n\n  return `${node.type}${+new Date()}`\n}\n\nexport const MarkdownContent = ({\n  content,\n  customComponents = {},\n  className\n}: MarkdownContentProps) => {\n  const AST = fromMarkdown(content, {\n    extensions: [syntax()],\n    mdastExtensions: [directive.fromMarkdown]\n  })\n\n  const componentsMap = {\n    ...defaultComponentsMap,\n    ...customComponents\n  }\n\n  const handleNode: HandleNode = (node) => {\n    const MarkdownComponent = componentsMap[node.type]\n\n    return MarkdownComponent ? (\n      <MarkdownComponent\n        key={generateNodeKey(node)}\n        node={node}\n        handleNode={handleNode}\n      />\n    ) : null\n  }\n\n  return (\n    <StyledMarkdownContent className={className}>\n      {AST.children.map(handleNode)}\n    </StyledMarkdownContent>\n  )\n}\n\nMarkdownContent.displayName = 'MarkdownContent'\n"],"mappings":";;;;;;;;;;;;;;;;;;AAsBA,IAAM,wBAAwB,OAAO,OAAO,EAC1C,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC;AAWF,IAAM,uBAAuB;CAC3B,MAAM;CACN,UAAU;CACV,SAAS;CACT,YAAY;CACZ,OAAO;CACP,MAAM;CACN,MAAM;CACN,UAAU;CACV,WAAW;CACX,QAAQ;CACR,MAAM;CACN,eAAe;CAChB;AAED,IAAM,mBAAmB,SAAS;AAChC,KAAI,KAAK,UAAU,OAAO;EACxB,MAAM,EAAE,MAAM,QAAQ,WAAW,KAAK,SAAS;AAC/C,SAAO,GAAG,KAAK,OAAO,OAAO,SAAS;;AAGxC,QAAO,GAAG,KAAK,OAAO,iBAAC,IAAI,MAAM;;AAGnC,IAAa,mBAAmB,EAC9B,SACA,mBAAmB,EAAE,EACrB,gBAC0B;CAC1B,MAAM,MAAM,aAAa,SAAS;EAChC,YAAY,CAAC,QAAQ,CAAC;EACtB,iBAAiB,CAAC,UAAU,aAAa;EAC1C,CAAC;CAEF,MAAM,gBAAgB;EACpB,GAAG;EACH,GAAG;EACJ;CAED,MAAM,cAA0B,SAAS;EACvC,MAAM,oBAAoB,cAAc,KAAK;AAE7C,SAAO,oBACL,wBAAA,cAAC,mBAAD;GACE,KAAK,gBAAgB,KAAK;GACpB;GACM;GACZ,CAAA,GACA;;AAGN,QACE,wBAAA,cAAC,uBAAD,EAAkC,WAEV,EADrB,IAAI,SAAS,IAAI,WAAW,CACP;;AAI5B,gBAAgB,cAAc"}

package/dist/components/markdown-content/components/MarkdownCode.js

@@ -1,7 +1,7 @@
-import { styled as e } from "../../../styled.js";
-import * as t from "react";
+import { styled } from "../../../styled.js";
+import * as React$1 from "react";
 //#region src/components/markdown-content/components/MarkdownCode.tsx
-var n = e("div", { base: [
+var StyledMarkdownCode = styled("div", { base: [
 	"bg-grey-200",
 	"rounded-md",
 	"text-grey-1000",
@@ -9,8 +9,9 @@ var n = e("div", { base: [
 	"text-sm/[1.4]",
 	"my-4",
 	"p-3"
-] }), r = ({ node: e }) => /* @__PURE__ */ t.createElement(n, { as: "pre" }, e.value);
+] });
+var MarkdownCode = ({ node }) => /* @__PURE__ */ React$1.createElement(StyledMarkdownCode, { as: "pre" }, node.value);
 //#endregion
-export { r as MarkdownCode };
+export { MarkdownCode };
 
 //# sourceMappingURL=MarkdownCode.js.map

package/dist/components/markdown-content/components/MarkdownCode.js.map

@@ -1 +1 @@
-{"version":3,"file":"MarkdownCode.js","names":[],"sources":["../../../../src/components/markdown-content/components/MarkdownCode.tsx"],"sourcesContent":["import type { Code } from 'mdast'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\ntype MarkdownCodeProps = {\n  node: Code\n}\n\nconst StyledMarkdownCode = styled('div', {\n  base: [\n    'bg-grey-200',\n    'rounded-md',\n    'text-grey-1000',\n    'font-mono',\n    'text-sm/[1.4]',\n    'my-4',\n    'p-3'\n  ]\n})\n\nexport const MarkdownCode = ({ node }: MarkdownCodeProps) => (\n  <StyledMarkdownCode as=\"pre\">{node.value}</StyledMarkdownCode>\n)\n"],"mappings":";;;AASA,IAAM,IAAqB,EAAO,OAAO,EACvC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC,EAEW,KAAgB,EAAE,cAC7B,kBAAA,cAAC,GAAD,EAAoB,IAAG,OAAuC,EAAhC,EAAK,MAA2B"}
+{"version":3,"file":"MarkdownCode.js","names":[],"sources":["../../../../src/components/markdown-content/components/MarkdownCode.tsx"],"sourcesContent":["import type { Code } from 'mdast'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\ntype MarkdownCodeProps = {\n  node: Code\n}\n\nconst StyledMarkdownCode = styled('div', {\n  base: [\n    'bg-grey-200',\n    'rounded-md',\n    'text-grey-1000',\n    'font-mono',\n    'text-sm/[1.4]',\n    'my-4',\n    'p-3'\n  ]\n})\n\nexport const MarkdownCode = ({ node }: MarkdownCodeProps) => (\n  <StyledMarkdownCode as=\"pre\">{node.value}</StyledMarkdownCode>\n)\n"],"mappings":";;;AASA,IAAM,qBAAqB,OAAO,OAAO,EACvC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC;AAEF,IAAa,gBAAgB,EAAE,WAC7B,wBAAA,cAAC,oBAAD,EAAoB,IAAG,OAAuC,EAAhC,KAAK,MAA2B"}

package/dist/components/markdown-content/components/MarkdownEmphasis.js

@@ -1,8 +1,9 @@
-import { styled as e } from "../../../styled.js";
-import * as t from "react";
+import { styled } from "../../../styled.js";
+import * as React$1 from "react";
 //#region src/components/markdown-content/components/MarkdownEmphasis.tsx
-var n = e("em", { base: ["italic"] }), r = ({ node: e, handleNode: r }) => /* @__PURE__ */ t.createElement(n, null, e.children?.map(r));
+var StyledMarkdownEmphasis = styled("em", { base: ["italic"] });
+var MarkdownEmphasis = ({ node, handleNode }) => /* @__PURE__ */ React$1.createElement(StyledMarkdownEmphasis, null, node.children?.map(handleNode));
 //#endregion
-export { r as MarkdownEmphasis };
+export { MarkdownEmphasis };
 
 //# sourceMappingURL=MarkdownEmphasis.js.map

package/dist/components/markdown-content/components/MarkdownEmphasis.js.map

@@ -1 +1 @@
-{"version":3,"file":"MarkdownEmphasis.js","names":[],"sources":["../../../../src/components/markdown-content/components/MarkdownEmphasis.tsx"],"sourcesContent":["import type { Content, Emphasis } from 'mdast'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\ntype MarkdownEmphasisProps = {\n  node: Emphasis\n  handleNode: (node: Content) => React.ReactElement\n}\n\nexport const StyledMarkdownEmphasis = styled('em', {\n  base: ['italic']\n})\n\nexport const MarkdownEmphasis = ({\n  node,\n  handleNode\n}: MarkdownEmphasisProps) => (\n  <StyledMarkdownEmphasis>\n    {node.children?.map(handleNode)}\n  </StyledMarkdownEmphasis>\n)\n"],"mappings":";;;AAUA,IAAa,IAAyB,EAAO,MAAM,EACjD,MAAM,CAAC,SAAS,EACjB,CAAC,EAEW,KAAoB,EAC/B,SACA,oBAEA,kBAAA,cAAC,GAAA,MACE,EAAK,UAAU,IAAI,EAAW,CACR"}
+{"version":3,"file":"MarkdownEmphasis.js","names":[],"sources":["../../../../src/components/markdown-content/components/MarkdownEmphasis.tsx"],"sourcesContent":["import type { Content, Emphasis } from 'mdast'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\ntype MarkdownEmphasisProps = {\n  node: Emphasis\n  handleNode: (node: Content) => React.ReactElement\n}\n\nexport const StyledMarkdownEmphasis = styled('em', {\n  base: ['italic']\n})\n\nexport const MarkdownEmphasis = ({\n  node,\n  handleNode\n}: MarkdownEmphasisProps) => (\n  <StyledMarkdownEmphasis>\n    {node.children?.map(handleNode)}\n  </StyledMarkdownEmphasis>\n)\n"],"mappings":";;;AAUA,IAAa,yBAAyB,OAAO,MAAM,EACjD,MAAM,CAAC,SAAS,EACjB,CAAC;AAEF,IAAa,oBAAoB,EAC/B,MACA,iBAEA,wBAAA,cAAC,wBAAA,MACE,KAAK,UAAU,IAAI,WAAW,CACR"}

package/dist/components/markdown-content/components/MarkdownHeading.js

@@ -1,8 +1,8 @@
-import { Heading as e } from "../../heading/Heading.js";
-import * as t from "react";
+import { Heading } from "../../heading/Heading.js";
+import * as React$1 from "react";
 //#region src/components/markdown-content/components/MarkdownHeading.tsx
-var n = (e) => {
-	switch (e) {
+var getHeadingProps = (depth) => {
+	switch (depth) {
 		case 1: return {
 			size: "xl",
 			as: "h1"
@@ -28,15 +28,16 @@ var n = (e) => {
 			as: "h6"
 		};
 	}
-}, r = ({ node: r, handleNode: i, ...a }) => {
-	let { as: o, size: s } = n(r.depth);
-	return /* @__PURE__ */ t.createElement(e, {
-		as: o,
-		size: s,
-		...a
-	}, r.children?.map(i));
+};
+var MarkdownHeading = ({ node, handleNode, ...rest }) => {
+	const { as, size } = getHeadingProps(node.depth);
+	return /* @__PURE__ */ React$1.createElement(Heading, {
+		as,
+		size,
+		...rest
+	}, node.children?.map(handleNode));
 };
 //#endregion
-export { r as MarkdownHeading };
+export { MarkdownHeading };
 
 //# sourceMappingURL=MarkdownHeading.js.map

package/dist/components/markdown-content/components/MarkdownHeading.js.map

@@ -1 +1 @@
-{"version":3,"file":"MarkdownHeading.js","names":[],"sources":["../../../../src/components/markdown-content/components/MarkdownHeading.tsx"],"sourcesContent":["import type { Content, Heading as HeadingType } from 'mdast'\nimport * as React from 'react'\n\nimport { Heading, HeadingProps } from '../../heading/Heading'\n\ntype MarkdownHeadingProps = {\n  node: HeadingType\n  handleNode: (node: Content) => React.ReactElement\n}\n\nconst getHeadingProps = (depth: number): HeadingProps => {\n  switch (depth) {\n    case 1:\n      return { size: 'xl', as: 'h1' }\n    case 2:\n      return { size: 'lg', as: 'h2' }\n    case 3:\n      return { size: 'md', as: 'h3' }\n    case 4:\n      return { size: 'sm', as: 'h4' }\n    case 5:\n      return { size: 'xs', as: 'h5' }\n    default:\n      return { size: 'xs', as: 'h6' }\n  }\n}\n\nexport const MarkdownHeading = ({\n  node,\n  handleNode,\n  ...rest\n}: MarkdownHeadingProps) => {\n  const { as, size } = getHeadingProps(node.depth)\n\n  return (\n    <Heading as={as} size={size} {...rest}>\n      {node.children?.map(handleNode)}\n    </Heading>\n  )\n}\n"],"mappings":";;;AAUA,IAAM,KAAmB,MAAgC;AACvD,SAAQ,GAAR;EACE,KAAK,EACH,QAAO;GAAE,MAAM;GAAM,IAAI;GAAM;EACjC,KAAK,EACH,QAAO;GAAE,MAAM;GAAM,IAAI;GAAM;EACjC,KAAK,EACH,QAAO;GAAE,MAAM;GAAM,IAAI;GAAM;EACjC,KAAK,EACH,QAAO;GAAE,MAAM;GAAM,IAAI;GAAM;EACjC,KAAK,EACH,QAAO;GAAE,MAAM;GAAM,IAAI;GAAM;EACjC,QACE,QAAO;GAAE,MAAM;GAAM,IAAI;GAAM;;GAIxB,KAAmB,EAC9B,SACA,eACA,GAAG,QACuB;CAC1B,IAAM,EAAE,OAAI,YAAS,EAAgB,EAAK,MAAM;AAEhD,QACE,kBAAA,cAAC,GAAD;EAAa;EAAU;EAAM,GAAI;EAEvB,EADP,EAAK,UAAU,IAAI,EAAW,CACvB"}
+{"version":3,"file":"MarkdownHeading.js","names":[],"sources":["../../../../src/components/markdown-content/components/MarkdownHeading.tsx"],"sourcesContent":["import type { Content, Heading as HeadingType } from 'mdast'\nimport * as React from 'react'\n\nimport { Heading, HeadingProps } from '../../heading/Heading'\n\ntype MarkdownHeadingProps = {\n  node: HeadingType\n  handleNode: (node: Content) => React.ReactElement\n}\n\nconst getHeadingProps = (depth: number): HeadingProps => {\n  switch (depth) {\n    case 1:\n      return { size: 'xl', as: 'h1' }\n    case 2:\n      return { size: 'lg', as: 'h2' }\n    case 3:\n      return { size: 'md', as: 'h3' }\n    case 4:\n      return { size: 'sm', as: 'h4' }\n    case 5:\n      return { size: 'xs', as: 'h5' }\n    default:\n      return { size: 'xs', as: 'h6' }\n  }\n}\n\nexport const MarkdownHeading = ({\n  node,\n  handleNode,\n  ...rest\n}: MarkdownHeadingProps) => {\n  const { as, size } = getHeadingProps(node.depth)\n\n  return (\n    <Heading as={as} size={size} {...rest}>\n      {node.children?.map(handleNode)}\n    </Heading>\n  )\n}\n"],"mappings":";;;AAUA,IAAM,mBAAmB,UAAgC;AACvD,SAAQ,OAAR;EACE,KAAK,EACH,QAAO;GAAE,MAAM;GAAM,IAAI;GAAM;EACjC,KAAK,EACH,QAAO;GAAE,MAAM;GAAM,IAAI;GAAM;EACjC,KAAK,EACH,QAAO;GAAE,MAAM;GAAM,IAAI;GAAM;EACjC,KAAK,EACH,QAAO;GAAE,MAAM;GAAM,IAAI;GAAM;EACjC,KAAK,EACH,QAAO;GAAE,MAAM;GAAM,IAAI;GAAM;EACjC,QACE,QAAO;GAAE,MAAM;GAAM,IAAI;GAAM;;;AAIrC,IAAa,mBAAmB,EAC9B,MACA,YACA,GAAG,WACuB;CAC1B,MAAM,EAAE,IAAI,SAAS,gBAAgB,KAAK,MAAM;AAEhD,QACE,wBAAA,cAAC,SAAD;EAAa;EAAU;EAAM,GAAI;EAEvB,EADP,KAAK,UAAU,IAAI,WAAW,CACvB"}

package/dist/components/markdown-content/components/MarkdownImage.js

@@ -1,12 +1,12 @@
-import { Image as e } from "../../image/Image.js";
-import * as t from "react";
+import { Image } from "../../image/Image.js";
+import * as React$1 from "react";
 //#region src/components/markdown-content/components/MarkdownImage.tsx
-var n = ({ node: n, className: r }) => /* @__PURE__ */ t.createElement(e, {
-	src: n.url,
-	alt: n.alt ?? void 0,
-	className: r
+var MarkdownImage = ({ node, className }) => /* @__PURE__ */ React$1.createElement(Image, {
+	src: node.url,
+	alt: node.alt ?? void 0,
+	className
 });
 //#endregion
-export { n as MarkdownImage };
+export { MarkdownImage };
 
 //# sourceMappingURL=MarkdownImage.js.map

package/dist/components/markdown-content/components/MarkdownImage.js.map

@@ -1 +1 @@
-{"version":3,"file":"MarkdownImage.js","names":[],"sources":["../../../../src/components/markdown-content/components/MarkdownImage.tsx"],"sourcesContent":["import type { Image as ImageType } from 'mdast'\nimport * as React from 'react'\n\nimport { Image } from '../../image/Image'\n\ntype MarkdownImageProps = {\n  node: ImageType\n  className?: string\n}\n\nexport const MarkdownImage = ({ node, className }: MarkdownImageProps) => (\n  <Image src={node.url} alt={node.alt ?? undefined} className={className} />\n)\n"],"mappings":";;;AAUA,IAAa,KAAiB,EAAE,SAAM,mBACpC,kBAAA,cAAC,GAAD;CAAO,KAAK,EAAK;CAAK,KAAK,EAAK,OAAO,KAAA;CAAsB;CAAa,CAAA"}
+{"version":3,"file":"MarkdownImage.js","names":[],"sources":["../../../../src/components/markdown-content/components/MarkdownImage.tsx"],"sourcesContent":["import type { Image as ImageType } from 'mdast'\nimport * as React from 'react'\n\nimport { Image } from '../../image/Image'\n\ntype MarkdownImageProps = {\n  node: ImageType\n  className?: string\n}\n\nexport const MarkdownImage = ({ node, className }: MarkdownImageProps) => (\n  <Image src={node.url} alt={node.alt ?? undefined} className={className} />\n)\n"],"mappings":";;;AAUA,IAAa,iBAAiB,EAAE,MAAM,gBACpC,wBAAA,cAAC,OAAD;CAAO,KAAK,KAAK;CAAK,KAAK,KAAK,OAAO,KAAA;CAAsB;CAAa,CAAA"}

package/dist/components/markdown-content/components/MarkdownInlineCode.js

@@ -1,7 +1,7 @@
-import { styled as e } from "../../../styled.js";
-import * as t from "react";
+import { styled } from "../../../styled.js";
+import * as React$1 from "react";
 //#region src/components/markdown-content/components/MarkdownInlineCode.tsx
-var n = e("div", { base: [
+var StyledMarkdownInlineCode = styled("div", { base: [
 	"bg-grey-200",
 	"rounded-sm",
 	"text-grey-1000",
@@ -10,8 +10,9 @@ var n = e("div", { base: [
 	"text-[85%]",
 	"px-1",
 	"py-0.5"
-] }), r = ({ node: e }) => /* @__PURE__ */ t.createElement(n, { as: "code" }, e.value);
+] });
+var MarkdownInlineCode = ({ node }) => /* @__PURE__ */ React$1.createElement(StyledMarkdownInlineCode, { as: "code" }, node.value);
 //#endregion
-export { r as MarkdownInlineCode };
+export { MarkdownInlineCode };
 
 //# sourceMappingURL=MarkdownInlineCode.js.map

package/dist/components/markdown-content/components/MarkdownInlineCode.js.map

@@ -1 +1 @@
-{"version":3,"file":"MarkdownInlineCode.js","names":[],"sources":["../../../../src/components/markdown-content/components/MarkdownInlineCode.tsx"],"sourcesContent":["import type { InlineCode } from 'mdast'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\ntype MarkdownInlineCodeProps = {\n  node: InlineCode\n}\n\nconst StyledMarkdownInlineCode = styled('div', {\n  base: [\n    'bg-grey-200',\n    'rounded-sm',\n    'text-grey-1000',\n    'inline-block',\n    'font-mono',\n    'text-[85%]',\n    'px-1',\n    'py-0.5'\n  ]\n})\n\nexport const MarkdownInlineCode = ({ node }: MarkdownInlineCodeProps) => (\n  <StyledMarkdownInlineCode as=\"code\">{node.value}</StyledMarkdownInlineCode>\n)\n"],"mappings":";;;AASA,IAAM,IAA2B,EAAO,OAAO,EAC7C,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC,EAEW,KAAsB,EAAE,cACnC,kBAAA,cAAC,GAAD,EAA0B,IAAG,QAA8C,EAAtC,EAAK,MAAiC"}
+{"version":3,"file":"MarkdownInlineCode.js","names":[],"sources":["../../../../src/components/markdown-content/components/MarkdownInlineCode.tsx"],"sourcesContent":["import type { InlineCode } from 'mdast'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\ntype MarkdownInlineCodeProps = {\n  node: InlineCode\n}\n\nconst StyledMarkdownInlineCode = styled('div', {\n  base: [\n    'bg-grey-200',\n    'rounded-sm',\n    'text-grey-1000',\n    'inline-block',\n    'font-mono',\n    'text-[85%]',\n    'px-1',\n    'py-0.5'\n  ]\n})\n\nexport const MarkdownInlineCode = ({ node }: MarkdownInlineCodeProps) => (\n  <StyledMarkdownInlineCode as=\"code\">{node.value}</StyledMarkdownInlineCode>\n)\n"],"mappings":";;;AASA,IAAM,2BAA2B,OAAO,OAAO,EAC7C,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC;AAEF,IAAa,sBAAsB,EAAE,WACnC,wBAAA,cAAC,0BAAD,EAA0B,IAAG,QAA8C,EAAtC,KAAK,MAAiC"}

package/dist/components/markdown-content/components/MarkdownLink.js

@@ -1,11 +1,11 @@
-import { Link as e } from "../../link/Link.js";
-import * as t from "react";
+import { Link } from "../../link/Link.js";
+import * as React$1 from "react";
 //#region src/components/markdown-content/components/MarkdownLink.tsx
-var n = ({ node: n, handleNode: r }) => /* @__PURE__ */ t.createElement(e, {
-	title: n.title ?? void 0,
-	href: n.url
-}, n.children?.map(r));
+var MarkdownLink = ({ node, handleNode }) => /* @__PURE__ */ React$1.createElement(Link, {
+	title: node.title ?? void 0,
+	href: node.url
+}, node.children?.map(handleNode));
 //#endregion
-export { n as MarkdownLink };
+export { MarkdownLink };
 
 //# sourceMappingURL=MarkdownLink.js.map

package/dist/components/markdown-content/components/MarkdownLink.js.map

@@ -1 +1 @@
-{"version":3,"file":"MarkdownLink.js","names":[],"sources":["../../../../src/components/markdown-content/components/MarkdownLink.tsx"],"sourcesContent":["import type { Content, Link as LinkType } from 'mdast'\nimport * as React from 'react'\n\nimport { Link } from '../../link/Link'\n\ntype MarkdownLinkProps = {\n  node: LinkType\n  handleNode: (node: Content) => React.ReactElement\n}\n\nexport const MarkdownLink = ({ node, handleNode }: MarkdownLinkProps) => (\n  <Link title={node.title ?? undefined} href={node.url}>\n    {node.children?.map(handleNode)}\n  </Link>\n)\n"],"mappings":";;;AAUA,IAAa,KAAgB,EAAE,SAAM,oBACnC,kBAAA,cAAC,GAAD;CAAM,OAAO,EAAK,SAAS,KAAA;CAAW,MAAM,EAAK;CAE1C,EADJ,EAAK,UAAU,IAAI,EAAW,CAC1B"}
+{"version":3,"file":"MarkdownLink.js","names":[],"sources":["../../../../src/components/markdown-content/components/MarkdownLink.tsx"],"sourcesContent":["import type { Content, Link as LinkType } from 'mdast'\nimport * as React from 'react'\n\nimport { Link } from '../../link/Link'\n\ntype MarkdownLinkProps = {\n  node: LinkType\n  handleNode: (node: Content) => React.ReactElement\n}\n\nexport const MarkdownLink = ({ node, handleNode }: MarkdownLinkProps) => (\n  <Link title={node.title ?? undefined} href={node.url}>\n    {node.children?.map(handleNode)}\n  </Link>\n)\n"],"mappings":";;;AAUA,IAAa,gBAAgB,EAAE,MAAM,iBACnC,wBAAA,cAAC,MAAD;CAAM,OAAO,KAAK,SAAS,KAAA;CAAW,MAAM,KAAK;CAE1C,EADJ,KAAK,UAAU,IAAI,WAAW,CAC1B"}

package/dist/components/markdown-content/components/MarkdownList.js

@@ -1,12 +1,12 @@
-import { List as e } from "../../list/List.js";
-import t from "clsx";
-import * as n from "react";
+import { List } from "../../list/List.js";
+import clsx from "clsx";
+import * as React$1 from "react";
 //#region src/components/markdown-content/components/MarkdownList.tsx
-var r = ({ node: r, handleNode: i, className: a }) => /* @__PURE__ */ n.createElement(e, {
-	ordered: r.ordered || void 0,
-	className: t("[&_p]:inline", "[&_p]:before:hidden", "[&_p]:after:hidden", a)
-}, r.children?.map(i));
+var MarkdownList = ({ node, handleNode, className }) => /* @__PURE__ */ React$1.createElement(List, {
+	ordered: node.ordered || void 0,
+	className: clsx("[&_p]:inline", "[&_p]:before:hidden", "[&_p]:after:hidden", className)
+}, node.children?.map(handleNode));
 //#endregion
-export { r as MarkdownList };
+export { MarkdownList };
 
 //# sourceMappingURL=MarkdownList.js.map

package/dist/components/markdown-content/components/MarkdownList.js.map

@@ -1 +1 @@
-{"version":3,"file":"MarkdownList.js","names":[],"sources":["../../../../src/components/markdown-content/components/MarkdownList.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport type { Content, List as ListType } from 'mdast'\nimport * as React from 'react'\n\nimport { List } from '../../list/List'\n\ntype MarkdownListProps = {\n  node: ListType\n  handleNode: (node: Content) => React.ReactElement\n  className?: string\n}\n\nexport const MarkdownList = ({\n  node,\n  handleNode,\n  className\n}: MarkdownListProps) => (\n  <List\n    ordered={node.ordered || undefined}\n    className={clsx(\n      '[&_p]:inline',\n      '[&_p]:before:hidden',\n      '[&_p]:after:hidden',\n      className\n    )}\n  >\n    {node.children?.map(handleNode)}\n  </List>\n)\n"],"mappings":";;;;AAYA,IAAa,KAAgB,EAC3B,SACA,eACA,mBAEA,kBAAA,cAAC,GAAD;CACE,SAAS,EAAK,WAAW,KAAA;CACzB,WAAW,EACT,gBACA,uBACA,sBACA,EACD;CAGI,EADJ,EAAK,UAAU,IAAI,EAAW,CAC1B"}
+{"version":3,"file":"MarkdownList.js","names":[],"sources":["../../../../src/components/markdown-content/components/MarkdownList.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport type { Content, List as ListType } from 'mdast'\nimport * as React from 'react'\n\nimport { List } from '../../list/List'\n\ntype MarkdownListProps = {\n  node: ListType\n  handleNode: (node: Content) => React.ReactElement\n  className?: string\n}\n\nexport const MarkdownList = ({\n  node,\n  handleNode,\n  className\n}: MarkdownListProps) => (\n  <List\n    ordered={node.ordered || undefined}\n    className={clsx(\n      '[&_p]:inline',\n      '[&_p]:before:hidden',\n      '[&_p]:after:hidden',\n      className\n    )}\n  >\n    {node.children?.map(handleNode)}\n  </List>\n)\n"],"mappings":";;;;AAYA,IAAa,gBAAgB,EAC3B,MACA,YACA,gBAEA,wBAAA,cAAC,MAAD;CACE,SAAS,KAAK,WAAW,KAAA;CACzB,WAAW,KACT,gBACA,uBACA,sBACA,UACD;CAGI,EADJ,KAAK,UAAU,IAAI,WAAW,CAC1B"}

package/dist/components/markdown-content/components/MarkdownListItem.js

@@ -1,8 +1,8 @@
-import { List as e } from "../../list/List.js";
-import * as t from "react";
+import { List } from "../../list/List.js";
+import * as React$1 from "react";
 //#region src/components/markdown-content/components/MarkdownListItem.tsx
-var n = ({ node: n, handleNode: r }) => /* @__PURE__ */ t.createElement(e.Item, null, n.children?.map(r));
+var MarkdownListItem = ({ node, handleNode }) => /* @__PURE__ */ React$1.createElement(List.Item, null, node.children?.map(handleNode));
 //#endregion
-export { n as MarkdownListItem };
+export { MarkdownListItem };
 
 //# sourceMappingURL=MarkdownListItem.js.map

package/dist/components/markdown-content/components/MarkdownListItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"MarkdownListItem.js","names":[],"sources":["../../../../src/components/markdown-content/components/MarkdownListItem.tsx"],"sourcesContent":["import type { Content, ListItem } from 'mdast'\nimport * as React from 'react'\n\nimport { List } from '../../list/List'\n\ntype MarkdownListItemProps = {\n  node: ListItem\n  handleNode: (node: Content) => React.ReactElement\n}\n\nexport const MarkdownListItem = ({\n  node,\n  handleNode\n}: MarkdownListItemProps) => (\n  <List.Item>{node.children?.map(handleNode)}</List.Item>\n)\n"],"mappings":";;;AAUA,IAAa,KAAoB,EAC/B,SACA,oBAEA,kBAAA,cAAC,EAAK,MAAA,MAAM,EAAK,UAAU,IAAI,EAAW,CAAa"}
+{"version":3,"file":"MarkdownListItem.js","names":[],"sources":["../../../../src/components/markdown-content/components/MarkdownListItem.tsx"],"sourcesContent":["import type { Content, ListItem } from 'mdast'\nimport * as React from 'react'\n\nimport { List } from '../../list/List'\n\ntype MarkdownListItemProps = {\n  node: ListItem\n  handleNode: (node: Content) => React.ReactElement\n}\n\nexport const MarkdownListItem = ({\n  node,\n  handleNode\n}: MarkdownListItemProps) => (\n  <List.Item>{node.children?.map(handleNode)}</List.Item>\n)\n"],"mappings":";;;AAUA,IAAa,oBAAoB,EAC/B,MACA,iBAEA,wBAAA,cAAC,KAAK,MAAA,MAAM,KAAK,UAAU,IAAI,WAAW,CAAa"}

package/dist/components/markdown-content/components/MarkdownParagraph.js

@@ -1,8 +1,8 @@
-import { Text as e } from "../../text/Text.js";
-import * as t from "react";
+import { Text } from "../../text/Text.js";
+import * as React$1 from "react";
 //#region src/components/markdown-content/components/MarkdownParagraph.tsx
-var n = ({ node: n, handleNode: r, ...i }) => /* @__PURE__ */ t.createElement(e, i, n.children?.map(r));
+var MarkdownParagraph = ({ node, handleNode, ...rest }) => /* @__PURE__ */ React$1.createElement(Text, rest, node.children?.map(handleNode));
 //#endregion
-export { n as MarkdownParagraph };
+export { MarkdownParagraph };
 
 //# sourceMappingURL=MarkdownParagraph.js.map

package/dist/components/markdown-content/components/MarkdownParagraph.js.map

@@ -1 +1 @@
-{"version":3,"file":"MarkdownParagraph.js","names":[],"sources":["../../../../src/components/markdown-content/components/MarkdownParagraph.tsx"],"sourcesContent":["import type { Content, Paragraph } from 'mdast'\nimport * as React from 'react'\n\nimport { Text } from '../../text/Text'\n\ntype MarkdownParagraphProps = {\n  node: Paragraph\n  handleNode: (node: Content) => React.ReactElement\n}\n\nexport const MarkdownParagraph = ({\n  node,\n  handleNode,\n  ...rest\n}: MarkdownParagraphProps) => (\n  <Text {...rest}>{node.children?.map(handleNode)}</Text>\n)\n"],"mappings":";;;AAUA,IAAa,KAAqB,EAChC,SACA,eACA,GAAG,QAEH,kBAAA,cAAC,GAAS,GAAO,EAAK,UAAU,IAAI,EAAW,CAAQ"}
+{"version":3,"file":"MarkdownParagraph.js","names":[],"sources":["../../../../src/components/markdown-content/components/MarkdownParagraph.tsx"],"sourcesContent":["import type { Content, Paragraph } from 'mdast'\nimport * as React from 'react'\n\nimport { Text } from '../../text/Text'\n\ntype MarkdownParagraphProps = {\n  node: Paragraph\n  handleNode: (node: Content) => React.ReactElement\n}\n\nexport const MarkdownParagraph = ({\n  node,\n  handleNode,\n  ...rest\n}: MarkdownParagraphProps) => (\n  <Text {...rest}>{node.children?.map(handleNode)}</Text>\n)\n"],"mappings":";;;AAUA,IAAa,qBAAqB,EAChC,MACA,YACA,GAAG,WAEH,wBAAA,cAAC,MAAS,MAAO,KAAK,UAAU,IAAI,WAAW,CAAQ"}

package/dist/components/markdown-content/components/MarkdownStrong.js

@@ -1,8 +1,9 @@
-import { styled as e } from "../../../styled.js";
-import * as t from "react";
+import { styled } from "../../../styled.js";
+import * as React$1 from "react";
 //#region src/components/markdown-content/components/MarkdownStrong.tsx
-var n = e("strong", { base: ["font-semibold"] }), r = ({ node: e, handleNode: r }) => /* @__PURE__ */ t.createElement(n, null, e.children?.map(r));
+var StyledMarkdownStrong = styled("strong", { base: ["font-semibold"] });
+var MarkdownStrong = ({ node, handleNode }) => /* @__PURE__ */ React$1.createElement(StyledMarkdownStrong, null, node.children?.map(handleNode));
 //#endregion
-export { r as MarkdownStrong };
+export { MarkdownStrong };
 
 //# sourceMappingURL=MarkdownStrong.js.map