@atom-learning/components 6.17.0 → 8.0.0

package/dist/components/input/Input.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 export declare const InputBackground: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+    ref?: ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLDivElement> | null | undefined;
 }, "appearance" | "size" | "theme" | "disabled" | "state"> & {
     appearance?: "standard" | "modern" | undefined;
     size?: "sm" | "md" | "lg" | "xl" | undefined;
@@ -10,8 +10,8 @@ export declare const InputBackground: React.ForwardRefExoticComponent<Omit<Omit<
 } & {
     as?: React.ElementType;
 }>;
-declare const StyledInputText: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & {
-    ref?: ((instance: HTMLParagraphElement | null) => void) | React.RefObject<HTMLParagraphElement> | null | undefined;
+declare const StyledInputText: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & {
+    ref?: ((instance: HTMLParagraphElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLParagraphElement> | null | undefined;
 }, "size" | "noCapsize" | "weight" | "family"> & {
     size?: ("sm" | "md" | "lg" | "xs" | "xl" | "2xl" | "3xl" | "4xl" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg" | "xs" | "xl" | "2xl" | "3xl" | "4xl">>) | undefined;
     noCapsize?: (boolean | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", boolean>>) | undefined;
@@ -21,7 +21,9 @@ declare const StyledInputText: React.ForwardRefExoticComponent<Omit<Omit<Omit<Om
     as?: React.ElementType;
 }, "as"> & {
     as?: "blockquote" | "caption" | "dd" | "dt" | "figcaption" | "li" | "p" | "span" | "legend" | React.ComponentType | React.ElementType;
-}, "ref"> & React.RefAttributes<HTMLParagraphElement>, never> & {
+}, "ref"> & React.RefAttributes<HTMLParagraphElement>, "ref"> & {
+    ref?: ((instance: HTMLParagraphElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLParagraphElement> | null | undefined;
+}, never> & {
     as?: React.ElementType;
 }>;
 export type InputTextProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> & Omit<React.ComponentProps<typeof StyledInputText>, 'type' | 'as'> & {

package/dist/components/input/Input.js

@@ -2,6 +2,7 @@ import { styled } from "../../styled.js";
 import { Text } from "../text/Text.js";
 import { overrideStyledVariantValue } from "../../utilities/override-styled-variant-value/overrideStyledVariantValue.js";
 import * as React$1 from "react";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/input/Input.tsx
 var InputBackground = styled("div", {
 	base: [
@@ -90,7 +91,7 @@ var toTextSize = {
 };
 var InputText = React$1.forwardRef(({ type = "text", size, ...rest }, ref) => {
 	const textSize = React$1.useMemo(() => overrideStyledVariantValue(size, (s) => toTextSize[s]), [size]);
-	return /* @__PURE__ */ React$1.createElement(StyledInputText, {
+	return /* @__PURE__ */ jsx(StyledInputText, {
 		ref,
 		as: "input",
 		type: type === "number" ? "text" : type,
@@ -102,20 +103,21 @@ var InputText = React$1.forwardRef(({ type = "text", size, ...rest }, ref) => {
 });
 InputText.displayName = "InputText";
 var Input = React$1.forwardRef(({ className, size = "md", appearance = "standard", theme, state, disabled, style, ...rest }, ref) => {
-	return /* @__PURE__ */ React$1.createElement(InputBackground, {
+	return /* @__PURE__ */ jsx(InputBackground, {
 		size,
 		appearance,
 		theme,
 		disabled,
 		state,
 		className,
-		style
-	}, /* @__PURE__ */ React$1.createElement(InputText, {
-		size,
-		ref,
-		disabled,
-		...rest
-	}));
+		style,
+		children: /* @__PURE__ */ jsx(InputText, {
+			size,
+			ref,
+			disabled,
+			...rest
+		})
+	});
 });
 Input.displayName = "Input";
 //#endregion

package/dist/components/input/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","names":[],"sources":["../../../src/components/input/Input.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { overrideStyledVariantValue } from '~/utilities/override-styled-variant-value/overrideStyledVariantValue'\n\nimport { Text } from '../text/Text'\n\nexport const InputBackground = styled('div', {\n  base: [\n    'flex',\n    'text-grey-1000',\n    'transition-[background,border-color]',\n    'duration-100',\n    'ease-out',\n    'w-full'\n  ],\n  variants: {\n    appearance: {\n      standard: [\n        'bg-white',\n        'border',\n        'border-grey-800',\n        'focus-within:border-blue-800',\n        'rounded-md'\n      ],\n      modern: [\n        'bg-grey-100',\n        'border-none',\n        'focus-within:outline-2',\n        'focus-within:outline-blue-800',\n        'focus-within:outline-offset-1',\n        'focus-within:outline-solid',\n        'focus-within:z-1',\n        'rounded-md'\n      ]\n    },\n    size: {\n      sm: ['h-8'],\n      md: ['h-10'],\n      lg: ['h-12'],\n      xl: ['h-16']\n    },\n    disabled: {\n      true: ['cursor-not-allowed', 'opacity-30']\n    },\n    state: {\n      error: []\n    },\n    theme: {\n      white: [],\n      grey: []\n    }\n  },\n  compoundVariants: [\n    {\n      state: 'error',\n      appearance: 'standard',\n      class: ['border-danger']\n    },\n    {\n      state: 'error',\n      appearance: 'modern',\n      class: ['bg-danger-light', 'focus-within:outline-danger']\n    },\n    {\n      appearance: 'modern',\n      theme: 'white',\n      class: ['bg-white']\n    },\n    {\n      appearance: 'modern',\n      theme: 'grey',\n      class: ['bg-grey-100']\n    }\n  ]\n})\n\nInputBackground.displayName = 'InputBackground'\n\nconst StyledInputText = styled(Text, {\n  base: [\n    'appearance-none',\n    'border-none',\n    'bg-none',\n    'bg-transparent',\n    'shadow-none',\n    'box-border',\n    'focus:outline-none',\n    'px-3',\n    'size-full',\n    'placeholder:opacity-100',\n    'placeholder:text-grey-700'\n  ]\n})\n\nexport type InputTextProps = Omit<\n  React.InputHTMLAttributes<HTMLInputElement>,\n  'size'\n> &\n  Omit<React.ComponentProps<typeof StyledInputText>, 'type' | 'as'> & {\n    // override default 'type' property to prevent Input from being used to render\n    // checkboxes, radios etc — we have dedicated components for them\n    type?: 'text' | 'number' | 'email' | 'password' | 'tel' | 'url' | 'search'\n    as?: never\n    disabled?: boolean\n  }\n\nconst toTextSize = {\n  sm: 'sm',\n  md: 'md',\n  lg: 'md',\n  xl: 'lg'\n}\n\nexport const InputText = React.forwardRef<HTMLInputElement, InputTextProps>(\n  ({ type = 'text', size, ...rest }, ref) => {\n    const textSize = React.useMemo(\n      () => overrideStyledVariantValue(size, (s) => toTextSize[s]),\n      [size]\n    )\n\n    return (\n      <StyledInputText\n        ref={ref}\n        as=\"input\"\n        type={type === 'number' ? 'text' : type}\n        inputMode={type === 'number' ? 'numeric' : undefined}\n        pattern={type === 'number' ? '[0-9]*' : undefined}\n        size={textSize}\n        {...(rest as any)}\n      />\n    )\n  }\n)\n\nInputText.displayName = 'InputText'\n\ntype InputBackgroundProps = React.ComponentProps<typeof InputBackground>\nexport type InputProps = Omit<\n  React.ComponentProps<typeof InputText>,\n  'size' | 'state' | 'appearance'\n> & {\n  size?: InputBackgroundProps['size']\n  state?: InputBackgroundProps['state']\n  appearance?: InputBackgroundProps['appearance']\n  theme?: InputBackgroundProps['theme']\n  disabled?: boolean\n  name?: string\n  readOnly?: boolean\n  value?: string | number\n  onChange?: React.ChangeEventHandler<HTMLInputElement>\n}\n\nexport const Input = React.forwardRef<HTMLInputElement, InputProps>(\n  (\n    {\n      className,\n      size = 'md',\n      appearance = 'standard',\n      theme,\n      state,\n      disabled,\n      style,\n      ...rest\n    },\n    ref\n  ) => {\n    return (\n      <InputBackground\n        size={size}\n        appearance={appearance}\n        theme={theme}\n        disabled={disabled}\n        state={state}\n        className={className}\n        style={style}\n      >\n        <InputText size={size} ref={ref} disabled={disabled} {...rest} />\n      </InputBackground>\n    )\n  }\n)\n\nInput.displayName = 'Input'\n"],"mappings":";;;;;AAOA,IAAa,kBAAkB,OAAO,OAAO;CAC3C,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU;EACR,YAAY;GACV,UAAU;IACR;IACA;IACA;IACA;IACA;IACD;GACD,QAAQ;IACN;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACD;GACF;EACD,MAAM;GACJ,IAAI,CAAC,MAAM;GACX,IAAI,CAAC,OAAO;GACZ,IAAI,CAAC,OAAO;GACZ,IAAI,CAAC,OAAO;GACb;EACD,UAAU,EACR,MAAM,CAAC,sBAAsB,aAAa,EAC3C;EACD,OAAO,EACL,OAAO,EAAE,EACV;EACD,OAAO;GACL,OAAO,EAAE;GACT,MAAM,EAAE;GACT;EACF;CACD,kBAAkB;EAChB;GACE,OAAO;GACP,YAAY;GACZ,OAAO,CAAC,gBAAgB;GACzB;EACD;GACE,OAAO;GACP,YAAY;GACZ,OAAO,CAAC,mBAAmB,8BAA8B;GAC1D;EACD;GACE,YAAY;GACZ,OAAO;GACP,OAAO,CAAC,WAAW;GACpB;EACD;GACE,YAAY;GACZ,OAAO;GACP,OAAO,CAAC,cAAc;GACvB;EACF;CACF,CAAC;AAEF,gBAAgB,cAAc;AAE9B,IAAM,kBAAkB,OAAO,MAAM,EACnC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC;AAcF,IAAM,aAAa;CACjB,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACL;AAED,IAAa,YAAY,QAAM,YAC5B,EAAE,OAAO,QAAQ,MAAM,GAAG,QAAQ,QAAQ;CACzC,MAAM,WAAW,QAAM,cACf,2BAA2B,OAAO,MAAM,WAAW,GAAG,EAC5D,CAAC,KAAK,CACP;AAED,QACE,wBAAA,cAAC,iBAAD;EACO;EACL,IAAG;EACH,MAAM,SAAS,WAAW,SAAS;EACnC,WAAW,SAAS,WAAW,YAAY,KAAA;EAC3C,SAAS,SAAS,WAAW,WAAW,KAAA;EACxC,MAAM;EACN,GAAK;EACL,CAAA;EAGP;AAED,UAAU,cAAc;AAkBxB,IAAa,QAAQ,QAAM,YAEvB,EACE,WACA,OAAO,MACP,aAAa,YACb,OACA,OACA,UACA,OACA,GAAG,QAEL,QACG;AACH,QACE,wBAAA,cAAC,iBAAD;EACQ;EACM;EACL;EACG;EACH;EACI;EACJ;EAGS,EADhB,wBAAA,cAAC,WAAD;EAAiB;EAAW;EAAe;EAAU,GAAI;EAAQ,CAAA,CACjD;EAGvB;AAED,MAAM,cAAc"}
+{"version":3,"file":"Input.js","names":[],"sources":["../../../src/components/input/Input.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { overrideStyledVariantValue } from '~/utilities/override-styled-variant-value/overrideStyledVariantValue'\n\nimport { Text } from '../text/Text'\n\nexport const InputBackground = styled('div', {\n  base: [\n    'flex',\n    'text-grey-1000',\n    'transition-[background,border-color]',\n    'duration-100',\n    'ease-out',\n    'w-full'\n  ],\n  variants: {\n    appearance: {\n      standard: [\n        'bg-white',\n        'border',\n        'border-grey-800',\n        'focus-within:border-blue-800',\n        'rounded-md'\n      ],\n      modern: [\n        'bg-grey-100',\n        'border-none',\n        'focus-within:outline-2',\n        'focus-within:outline-blue-800',\n        'focus-within:outline-offset-1',\n        'focus-within:outline-solid',\n        'focus-within:z-1',\n        'rounded-md'\n      ]\n    },\n    size: {\n      sm: ['h-8'],\n      md: ['h-10'],\n      lg: ['h-12'],\n      xl: ['h-16']\n    },\n    disabled: {\n      true: ['cursor-not-allowed', 'opacity-30']\n    },\n    state: {\n      error: []\n    },\n    theme: {\n      white: [],\n      grey: []\n    }\n  },\n  compoundVariants: [\n    {\n      state: 'error',\n      appearance: 'standard',\n      class: ['border-danger']\n    },\n    {\n      state: 'error',\n      appearance: 'modern',\n      class: ['bg-danger-light', 'focus-within:outline-danger']\n    },\n    {\n      appearance: 'modern',\n      theme: 'white',\n      class: ['bg-white']\n    },\n    {\n      appearance: 'modern',\n      theme: 'grey',\n      class: ['bg-grey-100']\n    }\n  ]\n})\n\nInputBackground.displayName = 'InputBackground'\n\nconst StyledInputText = styled(Text, {\n  base: [\n    'appearance-none',\n    'border-none',\n    'bg-none',\n    'bg-transparent',\n    'shadow-none',\n    'box-border',\n    'focus:outline-none',\n    'px-3',\n    'size-full',\n    'placeholder:opacity-100',\n    'placeholder:text-grey-700'\n  ]\n})\n\nexport type InputTextProps = Omit<\n  React.InputHTMLAttributes<HTMLInputElement>,\n  'size'\n> &\n  Omit<React.ComponentProps<typeof StyledInputText>, 'type' | 'as'> & {\n    // override default 'type' property to prevent Input from being used to render\n    // checkboxes, radios etc — we have dedicated components for them\n    type?: 'text' | 'number' | 'email' | 'password' | 'tel' | 'url' | 'search'\n    as?: never\n    disabled?: boolean\n  }\n\nconst toTextSize = {\n  sm: 'sm',\n  md: 'md',\n  lg: 'md',\n  xl: 'lg'\n}\n\nexport const InputText = React.forwardRef<HTMLInputElement, InputTextProps>(\n  ({ type = 'text', size, ...rest }, ref) => {\n    const textSize = React.useMemo(\n      () => overrideStyledVariantValue(size, (s) => toTextSize[s]),\n      [size]\n    )\n\n    return (\n      <StyledInputText\n        ref={ref}\n        as=\"input\"\n        type={type === 'number' ? 'text' : type}\n        inputMode={type === 'number' ? 'numeric' : undefined}\n        pattern={type === 'number' ? '[0-9]*' : undefined}\n        size={textSize}\n        {...(rest as any)}\n      />\n    )\n  }\n)\n\nInputText.displayName = 'InputText'\n\ntype InputBackgroundProps = React.ComponentProps<typeof InputBackground>\nexport type InputProps = Omit<\n  React.ComponentProps<typeof InputText>,\n  'size' | 'state' | 'appearance'\n> & {\n  size?: InputBackgroundProps['size']\n  state?: InputBackgroundProps['state']\n  appearance?: InputBackgroundProps['appearance']\n  theme?: InputBackgroundProps['theme']\n  disabled?: boolean\n  name?: string\n  readOnly?: boolean\n  value?: string | number\n  onChange?: React.ChangeEventHandler<HTMLInputElement>\n}\n\nexport const Input = React.forwardRef<HTMLInputElement, InputProps>(\n  (\n    {\n      className,\n      size = 'md',\n      appearance = 'standard',\n      theme,\n      state,\n      disabled,\n      style,\n      ...rest\n    },\n    ref\n  ) => {\n    return (\n      <InputBackground\n        size={size}\n        appearance={appearance}\n        theme={theme}\n        disabled={disabled}\n        state={state}\n        className={className}\n        style={style}\n      >\n        <InputText size={size} ref={ref} disabled={disabled} {...rest} />\n      </InputBackground>\n    )\n  }\n)\n\nInput.displayName = 'Input'\n"],"mappings":";;;;;;AAOA,IAAa,kBAAkB,OAAO,OAAO;CAC3C,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU;EACR,YAAY;GACV,UAAU;IACR;IACA;IACA;IACA;IACA;IACD;GACD,QAAQ;IACN;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACD;GACF;EACD,MAAM;GACJ,IAAI,CAAC,MAAM;GACX,IAAI,CAAC,OAAO;GACZ,IAAI,CAAC,OAAO;GACZ,IAAI,CAAC,OAAO;GACb;EACD,UAAU,EACR,MAAM,CAAC,sBAAsB,aAAa,EAC3C;EACD,OAAO,EACL,OAAO,EAAE,EACV;EACD,OAAO;GACL,OAAO,EAAE;GACT,MAAM,EAAE;GACT;EACF;CACD,kBAAkB;EAChB;GACE,OAAO;GACP,YAAY;GACZ,OAAO,CAAC,gBAAgB;GACzB;EACD;GACE,OAAO;GACP,YAAY;GACZ,OAAO,CAAC,mBAAmB,8BAA8B;GAC1D;EACD;GACE,YAAY;GACZ,OAAO;GACP,OAAO,CAAC,WAAW;GACpB;EACD;GACE,YAAY;GACZ,OAAO;GACP,OAAO,CAAC,cAAc;GACvB;EACF;CACF,CAAC;AAEF,gBAAgB,cAAc;AAE9B,IAAM,kBAAkB,OAAO,MAAM,EACnC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC;AAcF,IAAM,aAAa;CACjB,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACL;AAED,IAAa,YAAY,QAAM,YAC5B,EAAE,OAAO,QAAQ,MAAM,GAAG,QAAQ,QAAQ;CACzC,MAAM,WAAW,QAAM,cACf,2BAA2B,OAAO,MAAM,WAAW,GAAG,EAC5D,CAAC,KAAK,CACP;AAED,QACE,oBAAC,iBAAD;EACO;EACL,IAAG;EACH,MAAM,SAAS,WAAW,SAAS;EACnC,WAAW,SAAS,WAAW,YAAY,KAAA;EAC3C,SAAS,SAAS,WAAW,WAAW,KAAA;EACxC,MAAM;EACN,GAAK;EACL,CAAA;EAGP;AAED,UAAU,cAAc;AAkBxB,IAAa,QAAQ,QAAM,YAEvB,EACE,WACA,OAAO,MACP,aAAa,YACb,OACA,OACA,UACA,OACA,GAAG,QAEL,QACG;AACH,QACE,oBAAC,iBAAD;EACQ;EACM;EACL;EACG;EACH;EACI;EACJ;YAEP,oBAAC,WAAD;GAAiB;GAAW;GAAe;GAAU,GAAI;GAAQ,CAAA;EACjD,CAAA;EAGvB;AAED,MAAM,cAAc"}

package/dist/components/input-field/InputField.js

@@ -2,7 +2,8 @@ import { useFieldError } from "../form/useFieldError.js";
 import { FieldWrapper } from "../field-wrapper/FieldWrapper.js";
 import { useFormCustomContext } from "../form/useFormCustomContext.js";
 import { Input } from "../input/Input.js";
-import * as React$1 from "react";
+import "react";
+import { jsx } from "react/jsx-runtime";
 import { useFormContext } from "react-hook-form";
 //#region src/components/input-field/InputField.tsx
 var InputField = ({ className, label, name, validation, prompt, description, hideLabel, appearance, theme, ...remainingProps }) => {
@@ -12,7 +13,7 @@ var InputField = ({ className, label, name, validation, prompt, description, hid
 	const ref = validation ? register(validation) : register;
 	const formAppearance = context?.appearance || appearance;
 	const formTheme = context?.theme ?? theme;
-	return /* @__PURE__ */ React$1.createElement(FieldWrapper, {
+	return /* @__PURE__ */ jsx(FieldWrapper, {
 		className,
 		description,
 		error,
@@ -21,16 +22,17 @@ var InputField = ({ className, label, name, validation, prompt, description, hid
 		label,
 		prompt,
 		required: Boolean(validation?.required),
-		appearance: formAppearance
-	}, /* @__PURE__ */ React$1.createElement(Input, {
-		id: name,
-		name,
-		ref,
 		appearance: formAppearance,
-		theme: formTheme,
-		...error && { state: "error" },
-		...remainingProps
-	}));
+		children: /* @__PURE__ */ jsx(Input, {
+			id: name,
+			name,
+			ref,
+			appearance: formAppearance,
+			theme: formTheme,
+			...error && { state: "error" },
+			...remainingProps
+		})
+	});
 };
 InputField.displayName = "InputField";
 //#endregion

package/dist/components/input-field/InputField.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputField.js","names":[],"sources":["../../../src/components/input-field/InputField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useFormContext } from 'react-hook-form'\n\nimport {\n  FieldElementWrapperProps,\n  FieldWrapper\n} from '~/components/field-wrapper/FieldWrapper'\nimport { useFieldError } from '~/components/form/useFieldError'\nimport { useFormCustomContext } from '~/components/form/useFormCustomContext'\nimport { Input, InputProps } from '~/components/input/Input'\n\ntype InputFieldProps = InputProps & FieldElementWrapperProps\n\nexport const InputField = ({\n  className,\n  label,\n  name,\n  validation,\n  prompt,\n  description,\n  hideLabel,\n  appearance,\n  theme,\n  ...remainingProps\n}: InputFieldProps) => {\n  const { register } = useFormContext()\n  const context = useFormCustomContext()\n  const { error } = useFieldError(name)\n\n  const ref = validation ? register(validation) : register\n  const formAppearance = context?.appearance || appearance\n  const formTheme = context?.theme ?? theme\n\n  return (\n    <FieldWrapper\n      className={className}\n      description={description}\n      error={error}\n      fieldId={name}\n      hideLabel={hideLabel}\n      label={label}\n      prompt={prompt}\n      required={Boolean(validation?.required)}\n      appearance={formAppearance}\n    >\n      <Input\n        id={name}\n        name={name}\n        ref={ref}\n        appearance={formAppearance}\n        theme={formTheme}\n        {...(error && { state: 'error' })}\n        {...remainingProps}\n      />\n    </FieldWrapper>\n  )\n}\n\nInputField.displayName = 'InputField'\n"],"mappings":";;;;;;;AAaA,IAAa,cAAc,EACzB,WACA,OACA,MACA,YACA,QACA,aACA,WACA,YACA,OACA,GAAG,qBACkB;CACrB,MAAM,EAAE,aAAa,gBAAgB;CACrC,MAAM,UAAU,sBAAsB;CACtC,MAAM,EAAE,UAAU,cAAc,KAAK;CAErC,MAAM,MAAM,aAAa,SAAS,WAAW,GAAG;CAChD,MAAM,iBAAiB,SAAS,cAAc;CAC9C,MAAM,YAAY,SAAS,SAAS;AAEpC,QACE,wBAAA,cAAC,cAAD;EACa;EACE;EACN;EACP,SAAS;EACE;EACJ;EACC;EACR,UAAU,QAAQ,YAAY,SAAS;EACvC,YAAY;EAWC,EATb,wBAAA,cAAC,OAAD;EACE,IAAI;EACE;EACD;EACL,YAAY;EACZ,OAAO;EACP,GAAK,SAAS,EAAE,OAAO,SAAS;EAChC,GAAI;EACJ,CAAA,CACW;;AAInB,WAAW,cAAc"}
+{"version":3,"file":"InputField.js","names":[],"sources":["../../../src/components/input-field/InputField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useFormContext } from 'react-hook-form'\n\nimport {\n  FieldElementWrapperProps,\n  FieldWrapper\n} from '~/components/field-wrapper/FieldWrapper'\nimport { useFieldError } from '~/components/form/useFieldError'\nimport { useFormCustomContext } from '~/components/form/useFormCustomContext'\nimport { Input, InputProps } from '~/components/input/Input'\n\ntype InputFieldProps = InputProps & FieldElementWrapperProps\n\nexport const InputField = ({\n  className,\n  label,\n  name,\n  validation,\n  prompt,\n  description,\n  hideLabel,\n  appearance,\n  theme,\n  ...remainingProps\n}: InputFieldProps) => {\n  const { register } = useFormContext()\n  const context = useFormCustomContext()\n  const { error } = useFieldError(name)\n\n  const ref = validation ? register(validation) : register\n  const formAppearance = context?.appearance || appearance\n  const formTheme = context?.theme ?? theme\n\n  return (\n    <FieldWrapper\n      className={className}\n      description={description}\n      error={error}\n      fieldId={name}\n      hideLabel={hideLabel}\n      label={label}\n      prompt={prompt}\n      required={Boolean(validation?.required)}\n      appearance={formAppearance}\n    >\n      <Input\n        id={name}\n        name={name}\n        ref={ref}\n        appearance={formAppearance}\n        theme={formTheme}\n        {...(error && { state: 'error' })}\n        {...remainingProps}\n      />\n    </FieldWrapper>\n  )\n}\n\nInputField.displayName = 'InputField'\n"],"mappings":";;;;;;;;AAaA,IAAa,cAAc,EACzB,WACA,OACA,MACA,YACA,QACA,aACA,WACA,YACA,OACA,GAAG,qBACkB;CACrB,MAAM,EAAE,aAAa,gBAAgB;CACrC,MAAM,UAAU,sBAAsB;CACtC,MAAM,EAAE,UAAU,cAAc,KAAK;CAErC,MAAM,MAAM,aAAa,SAAS,WAAW,GAAG;CAChD,MAAM,iBAAiB,SAAS,cAAc;CAC9C,MAAM,YAAY,SAAS,SAAS;AAEpC,QACE,oBAAC,cAAD;EACa;EACE;EACN;EACP,SAAS;EACE;EACJ;EACC;EACR,UAAU,QAAQ,YAAY,SAAS;EACvC,YAAY;YAEZ,oBAAC,OAAD;GACE,IAAI;GACE;GACD;GACL,YAAY;GACZ,OAAO;GACP,GAAK,SAAS,EAAE,OAAO,SAAS;GAChC,GAAI;GACJ,CAAA;EACW,CAAA;;AAInB,WAAW,cAAc"}

package/dist/components/keyboard-shortcut/KeyboardShortcut.d.ts

@@ -13,8 +13,8 @@ export declare const KeyboardShortcut: React.ForwardRefExoticComponent<React.HTM
     targetWindow?: boolean;
     onKeyDown?: (e: KeyboardEventWindowOrElement) => void;
 } & React.RefAttributes<HTMLDivElement>>;
-declare const StyledKeyboardShortcutIndicator: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & {
-    ref?: ((instance: HTMLParagraphElement | null) => void) | React.RefObject<HTMLParagraphElement> | null | undefined;
+declare const StyledKeyboardShortcutIndicator: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & {
+    ref?: ((instance: HTMLParagraphElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLParagraphElement> | null | undefined;
 }, "size" | "noCapsize" | "weight" | "family"> & {
     size?: ("sm" | "md" | "lg" | "xs" | "xl" | "2xl" | "3xl" | "4xl" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg" | "xs" | "xl" | "2xl" | "3xl" | "4xl">>) | undefined;
     noCapsize?: (boolean | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", boolean>>) | undefined;
@@ -24,7 +24,9 @@ declare const StyledKeyboardShortcutIndicator: React.ForwardRefExoticComponent<O
     as?: React.ElementType;
 }, "as"> & {
     as?: "blockquote" | "caption" | "dd" | "dt" | "figcaption" | "li" | "p" | "span" | "legend" | React.ComponentType | React.ElementType;
-}, "ref"> & React.RefAttributes<HTMLParagraphElement>, never> & {
+}, "ref"> & React.RefAttributes<HTMLParagraphElement>, "ref"> & {
+    ref?: ((instance: HTMLParagraphElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLParagraphElement> | null | undefined;
+}, never> & {
     as?: React.ElementType;
 }>;
 type KeyboardShortcutIndicatorProps = React.ComponentProps<typeof StyledKeyboardShortcutIndicator>;

package/dist/components/keyboard-shortcut/KeyboardShortcut.js

@@ -2,6 +2,7 @@ import { styled } from "../../styled.js";
 import { Text } from "../text/Text.js";
 import { useCallbackRefState } from "../../utilities/hooks/useCallbackRef.js";
 import * as React$1 from "react";
+import { jsx } from "react/jsx-runtime";
 import { Slot } from "@radix-ui/react-slot";
 //#region src/components/keyboard-shortcut/KeyboardShortcut.tsx
 var KeyboardShortcut = React$1.forwardRef(({ asChild, config, targetWindow = false, onKeyDown, ...rest }, ref) => {
@@ -22,8 +23,7 @@ var KeyboardShortcut = React$1.forwardRef(({ asChild, config, targetWindow = fal
 			window.removeEventListener("keydown", handleOnKeydown);
 		};
 	}, [targetWindow, handleOnKeydown]);
-	const Component = asChild ? Slot : "div";
-	return /* @__PURE__ */ React$1.createElement(Component, {
+	return /* @__PURE__ */ jsx(asChild ? Slot : "div", {
 		onKeyDown: targetWindow ? void 0 : handleOnKeydown,
 		ref: setTargetElRef,
 		...rest
@@ -46,7 +46,7 @@ var StyledKeyboardShortcutIndicator = styled(Text, { base: [
 	"capsize-none"
 ] });
 var KeyboardShortcutIndicator = (props) => {
-	return /* @__PURE__ */ React$1.createElement(StyledKeyboardShortcutIndicator, {
+	return /* @__PURE__ */ jsx(StyledKeyboardShortcutIndicator, {
 		size: "sm",
 		as: "kbd",
 		...props

package/dist/components/keyboard-shortcut/KeyboardShortcut.js.map

@@ -1 +1 @@
-{"version":3,"file":"KeyboardShortcut.js","names":[],"sources":["../../../src/components/keyboard-shortcut/KeyboardShortcut.tsx"],"sourcesContent":["import { Slot } from '@radix-ui/react-slot'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { useCallbackRefState } from '~/utilities/hooks/useCallbackRef'\n\nimport { Text } from '../text/Text'\n\ntype KeyboardEventWindowOrElement =\n  | KeyboardEvent\n  | React.KeyboardEvent<HTMLDivElement>\ntype ShortcutConfig = Partial<KeyboardEvent>\n\ntype KeyboardShortcutProps = React.HTMLAttributes<HTMLDivElement> & {\n  asChild?: boolean\n  config: {\n    shortcut: ShortcutConfig\n    action: ({\n      event,\n      shortcut\n    }: {\n      event: KeyboardEvent | React.KeyboardEvent<HTMLDivElement>\n      shortcut: ShortcutConfig\n    }) => void\n  }[]\n  targetWindow?: boolean\n  onKeyDown?: (e: KeyboardEventWindowOrElement) => void\n}\n\nexport const KeyboardShortcut = React.forwardRef<\n  HTMLDivElement,\n  KeyboardShortcutProps\n>(({ asChild, config, targetWindow = false, onKeyDown, ...rest }, ref) => {\n  const [targetElRef, setTargetElRef] = useCallbackRefState()\n  React.useImperativeHandle(ref, () => targetElRef as HTMLDivElement)\n\n  const handleOnKeydown = React.useCallback(\n    (e: KeyboardEventWindowOrElement) => {\n      config.forEach(({ shortcut, action }) => {\n        if (Object.entries(shortcut).every(([key, value]) => e[key] === value))\n          action({ event: e, shortcut })\n      })\n      onKeyDown?.(e)\n    },\n    [config, onKeyDown]\n  )\n\n  React.useEffect(() => {\n    if (targetWindow) window.addEventListener('keydown', handleOnKeydown)\n\n    return () => {\n      window.removeEventListener('keydown', handleOnKeydown)\n    }\n  }, [targetWindow, handleOnKeydown])\n\n  const Component = asChild ? Slot : 'div'\n\n  return (\n    <Component\n      onKeyDown={targetWindow ? undefined : (handleOnKeydown as any)}\n      ref={setTargetElRef}\n      {...rest}\n    />\n  )\n})\n\nKeyboardShortcut.displayName = 'KeyboardShortcut'\n\nconst StyledKeyboardShortcutIndicator = styled(Text, {\n  base: [\n    'bg-grey-100',\n    'text-text-subtle',\n    'px-2',\n    'py-0.5',\n    'min-w-6',\n    'min-h-6',\n    'font-normal',\n    'inline-flex',\n    'justify-center',\n    'items-center',\n    'rounded-md',\n    'shrink-0',\n    'capsize-none'\n  ]\n})\n\ntype KeyboardShortcutIndicatorProps = React.ComponentProps<\n  typeof StyledKeyboardShortcutIndicator\n>\n\nexport const KeyboardShortcutIndicator = (\n  props: KeyboardShortcutIndicatorProps\n) => {\n  return <StyledKeyboardShortcutIndicator size=\"sm\" as=\"kbd\" {...props} />\n}\n\nKeyboardShortcutIndicator.displayName = 'KeyboardShortcut'\n"],"mappings":";;;;;;AA6BA,IAAa,mBAAmB,QAAM,YAGnC,EAAE,SAAS,QAAQ,eAAe,OAAO,WAAW,GAAG,QAAQ,QAAQ;CACxE,MAAM,CAAC,aAAa,kBAAkB,qBAAqB;AAC3D,SAAM,oBAAoB,WAAW,YAA8B;CAEnE,MAAM,kBAAkB,QAAM,aAC3B,MAAoC;AACnC,SAAO,SAAS,EAAE,UAAU,aAAa;AACvC,OAAI,OAAO,QAAQ,SAAS,CAAC,OAAO,CAAC,KAAK,WAAW,EAAE,SAAS,MAAM,CACpE,QAAO;IAAE,OAAO;IAAG;IAAU,CAAC;IAChC;AACF,cAAY,EAAE;IAEhB,CAAC,QAAQ,UAAU,CACpB;AAED,SAAM,gBAAgB;AACpB,MAAI,aAAc,QAAO,iBAAiB,WAAW,gBAAgB;AAErE,eAAa;AACX,UAAO,oBAAoB,WAAW,gBAAgB;;IAEvD,CAAC,cAAc,gBAAgB,CAAC;CAEnC,MAAM,YAAY,UAAU,OAAO;AAEnC,QACE,wBAAA,cAAC,WAAD;EACE,WAAW,eAAe,KAAA,IAAa;EACvC,KAAK;EACL,GAAI;EACJ,CAAA;EAEJ;AAEF,iBAAiB,cAAc;AAE/B,IAAM,kCAAkC,OAAO,MAAM,EACnD,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC;AAMF,IAAa,6BACX,UACG;AACH,QAAO,wBAAA,cAAC,iCAAD;EAAiC,MAAK;EAAK,IAAG;EAAM,GAAI;EAAS,CAAA;;AAG1E,0BAA0B,cAAc"}
+{"version":3,"file":"KeyboardShortcut.js","names":[],"sources":["../../../src/components/keyboard-shortcut/KeyboardShortcut.tsx"],"sourcesContent":["import { Slot } from '@radix-ui/react-slot'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { useCallbackRefState } from '~/utilities/hooks/useCallbackRef'\n\nimport { Text } from '../text/Text'\n\ntype KeyboardEventWindowOrElement =\n  | KeyboardEvent\n  | React.KeyboardEvent<HTMLDivElement>\ntype ShortcutConfig = Partial<KeyboardEvent>\n\ntype KeyboardShortcutProps = React.HTMLAttributes<HTMLDivElement> & {\n  asChild?: boolean\n  config: {\n    shortcut: ShortcutConfig\n    action: ({\n      event,\n      shortcut\n    }: {\n      event: KeyboardEvent | React.KeyboardEvent<HTMLDivElement>\n      shortcut: ShortcutConfig\n    }) => void\n  }[]\n  targetWindow?: boolean\n  onKeyDown?: (e: KeyboardEventWindowOrElement) => void\n}\n\nexport const KeyboardShortcut = React.forwardRef<\n  HTMLDivElement,\n  KeyboardShortcutProps\n>(({ asChild, config, targetWindow = false, onKeyDown, ...rest }, ref) => {\n  const [targetElRef, setTargetElRef] = useCallbackRefState()\n  React.useImperativeHandle(ref, () => targetElRef as HTMLDivElement)\n\n  const handleOnKeydown = React.useCallback(\n    (e: KeyboardEventWindowOrElement) => {\n      config.forEach(({ shortcut, action }) => {\n        if (Object.entries(shortcut).every(([key, value]) => e[key] === value))\n          action({ event: e, shortcut })\n      })\n      onKeyDown?.(e)\n    },\n    [config, onKeyDown]\n  )\n\n  React.useEffect(() => {\n    if (targetWindow) window.addEventListener('keydown', handleOnKeydown)\n\n    return () => {\n      window.removeEventListener('keydown', handleOnKeydown)\n    }\n  }, [targetWindow, handleOnKeydown])\n\n  const Component = asChild ? Slot : 'div'\n\n  return (\n    <Component\n      onKeyDown={targetWindow ? undefined : (handleOnKeydown as any)}\n      ref={setTargetElRef}\n      {...rest}\n    />\n  )\n})\n\nKeyboardShortcut.displayName = 'KeyboardShortcut'\n\nconst StyledKeyboardShortcutIndicator = styled(Text, {\n  base: [\n    'bg-grey-100',\n    'text-text-subtle',\n    'px-2',\n    'py-0.5',\n    'min-w-6',\n    'min-h-6',\n    'font-normal',\n    'inline-flex',\n    'justify-center',\n    'items-center',\n    'rounded-md',\n    'shrink-0',\n    'capsize-none'\n  ]\n})\n\ntype KeyboardShortcutIndicatorProps = React.ComponentProps<\n  typeof StyledKeyboardShortcutIndicator\n>\n\nexport const KeyboardShortcutIndicator = (\n  props: KeyboardShortcutIndicatorProps\n) => {\n  return <StyledKeyboardShortcutIndicator size=\"sm\" as=\"kbd\" {...props} />\n}\n\nKeyboardShortcutIndicator.displayName = 'KeyboardShortcut'\n"],"mappings":";;;;;;;AA6BA,IAAa,mBAAmB,QAAM,YAGnC,EAAE,SAAS,QAAQ,eAAe,OAAO,WAAW,GAAG,QAAQ,QAAQ;CACxE,MAAM,CAAC,aAAa,kBAAkB,qBAAqB;AAC3D,SAAM,oBAAoB,WAAW,YAA8B;CAEnE,MAAM,kBAAkB,QAAM,aAC3B,MAAoC;AACnC,SAAO,SAAS,EAAE,UAAU,aAAa;AACvC,OAAI,OAAO,QAAQ,SAAS,CAAC,OAAO,CAAC,KAAK,WAAW,EAAE,SAAS,MAAM,CACpE,QAAO;IAAE,OAAO;IAAG;IAAU,CAAC;IAChC;AACF,cAAY,EAAE;IAEhB,CAAC,QAAQ,UAAU,CACpB;AAED,SAAM,gBAAgB;AACpB,MAAI,aAAc,QAAO,iBAAiB,WAAW,gBAAgB;AAErE,eAAa;AACX,UAAO,oBAAoB,WAAW,gBAAgB;;IAEvD,CAAC,cAAc,gBAAgB,CAAC;AAInC,QACE,oBAHgB,UAAU,OAAO,OAGjC;EACE,WAAW,eAAe,KAAA,IAAa;EACvC,KAAK;EACL,GAAI;EACJ,CAAA;EAEJ;AAEF,iBAAiB,cAAc;AAE/B,IAAM,kCAAkC,OAAO,MAAM,EACnD,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC;AAMF,IAAa,6BACX,UACG;AACH,QAAO,oBAAC,iCAAD;EAAiC,MAAK;EAAK,IAAG;EAAM,GAAI;EAAS,CAAA;;AAG1E,0BAA0B,cAAc"}

package/dist/components/keyboard-shortcut/index.d.ts

@@ -11,8 +11,8 @@ export declare const KeyboardShortcut: import("react").ForwardRefExoticComponent
     onKeyDown?: (e: import("react").KeyboardEvent<HTMLDivElement> | KeyboardEvent) => void;
 } & import("react").RefAttributes<HTMLDivElement>> & {
     Indicator: {
-        (props: Omit<Omit<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & {
-            ref?: ((instance: HTMLParagraphElement | null) => void) | import("react").RefObject<HTMLParagraphElement> | null | undefined;
+        (props: Omit<Omit<Omit<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & {
+            ref?: ((instance: HTMLParagraphElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLParagraphElement> | null | undefined;
         }, "size" | "noCapsize" | "weight" | "family"> & {
             size?: ("sm" | "md" | "lg" | "xs" | "xl" | "2xl" | "3xl" | "4xl" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg" | "xs" | "xl" | "2xl" | "3xl" | "4xl">>) | undefined;
             noCapsize?: (boolean | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", boolean>>) | undefined;
@@ -22,7 +22,9 @@ export declare const KeyboardShortcut: import("react").ForwardRefExoticComponent
             as?: import("react").ElementType;
         }, "as"> & {
             as?: "blockquote" | "caption" | "dd" | "dt" | "figcaption" | "li" | "p" | "span" | "legend" | React.ComponentType | React.ElementType;
-        }, "ref"> & import("react").RefAttributes<HTMLParagraphElement>, never> & {
+        }, "ref"> & import("react").RefAttributes<HTMLParagraphElement>, "ref"> & {
+            ref?: ((instance: HTMLParagraphElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLParagraphElement> | null | undefined;
+        }, never> & {
             as?: import("react").ElementType;
         }): import("react").JSX.Element;
         displayName: string;

package/dist/components/label/Label.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import type { Override } from '../../utilities/types';
 declare const StyledLabel: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & {
-    ref?: ((instance: HTMLLabelElement | null) => void) | React.RefObject<HTMLLabelElement> | null | undefined;
+    ref?: ((instance: HTMLLabelElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLLabelElement> | null | undefined;
 }, "appearance" | "size" | "type" | "direction" | "align"> & {
     size?: "sm" | "md" | undefined;
     type?: "inline" | "block" | undefined;

package/dist/components/label/Label.js

@@ -1,5 +1,6 @@
 import { styled } from "../../styled.js";
-import * as React$1 from "react";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/label/Label.tsx
 var StyledLabel = styled("label", {
 	base: [
@@ -69,17 +70,19 @@ var StyledLabel = styled("label", {
 		}
 	]
 });
-var Label = ({ align = "start", as = "label", direction = "row", size = "md", type = "block", children, required, ...rest }) => /* @__PURE__ */ React$1.createElement(StyledLabel, {
+var Label = ({ align = "start", as = "label", direction = "row", size = "md", type = "block", children, required, ...rest }) => /* @__PURE__ */ jsxs(StyledLabel, {
 	as,
 	size,
 	type,
 	align,
 	direction,
-	...rest
-}, children, required && /* @__PURE__ */ React$1.createElement("span", {
-	className: "text-danger ml-1 font-normal",
-	"aria-hidden": true
-}, "*"));
+	...rest,
+	children: [children, required && /* @__PURE__ */ jsx("span", {
+		className: "text-danger ml-1 font-normal",
+		"aria-hidden": true,
+		children: "*"
+	})]
+});
 Label.displayName = "Label";
 //#endregion
 export { Label };

package/dist/components/label/Label.js.map

@@ -1 +1 @@
-{"version":3,"file":"Label.js","names":[],"sources":["../../../src/components/label/Label.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\nimport type { Override } from '~/utilities/types'\n\nconst StyledLabel = styled('label', {\n  base: ['text-grey-900', 'font-body', 'm-0'],\n  variants: {\n    size: {\n      sm: ['text-sm', 'leading-[1.53]', 'capsize-[0.4056]'],\n      md: ['text-md', 'leading-normal', 'capsize-[0.3864]']\n    },\n    type: {\n      block: ['block', 'font-semibold'],\n      inline: ['flex', 'font-normal', 'max-w-max']\n    },\n    align: { start: [], center: [] },\n    direction: { reverse: [], row: [] },\n    appearance: { standard: [], modern: [] }\n  },\n  compoundVariants: [\n    {\n      type: 'inline',\n      align: 'start',\n      class: ['items-start']\n    },\n    {\n      type: 'inline',\n      align: 'center',\n      class: ['items-center']\n    },\n    {\n      type: 'inline',\n      direction: 'reverse',\n      class: ['flex-row-reverse']\n    },\n    {\n      type: 'inline',\n      direction: 'row',\n      class: ['flex-row']\n    },\n    {\n      type: 'block',\n      appearance: 'modern',\n      class: ['font-normal']\n    }\n  ]\n})\n\nexport type LabelProps = Override<\n  React.ComponentPropsWithoutRef<typeof StyledLabel>,\n  {\n    as?: 'label' | 'legend'\n    required?: boolean\n  }\n>\n\nexport const Label = ({\n  align = 'start',\n  as = 'label',\n  direction = 'row',\n  size = 'md',\n  type = 'block',\n  children,\n  required,\n  ...rest\n}: LabelProps) => (\n  <StyledLabel\n    as={as}\n    size={size}\n    type={type}\n    align={align}\n    direction={direction}\n    {...rest}\n  >\n    {children}\n    {required && (\n      <span className=\"text-danger ml-1 font-normal\" aria-hidden>\n        *\n      </span>\n    )}\n  </StyledLabel>\n)\n\nLabel.displayName = 'Label'\n"],"mappings":";;;AAKA,IAAM,cAAc,OAAO,SAAS;CAClC,MAAM;EAAC;EAAiB;EAAa;EAAM;CAC3C,UAAU;EACR,MAAM;GACJ,IAAI;IAAC;IAAW;IAAkB;IAAmB;GACrD,IAAI;IAAC;IAAW;IAAkB;IAAmB;GACtD;EACD,MAAM;GACJ,OAAO,CAAC,SAAS,gBAAgB;GACjC,QAAQ;IAAC;IAAQ;IAAe;IAAY;GAC7C;EACD,OAAO;GAAE,OAAO,EAAE;GAAE,QAAQ,EAAE;GAAE;EAChC,WAAW;GAAE,SAAS,EAAE;GAAE,KAAK,EAAE;GAAE;EACnC,YAAY;GAAE,UAAU,EAAE;GAAE,QAAQ,EAAE;GAAE;EACzC;CACD,kBAAkB;EAChB;GACE,MAAM;GACN,OAAO;GACP,OAAO,CAAC,cAAc;GACvB;EACD;GACE,MAAM;GACN,OAAO;GACP,OAAO,CAAC,eAAe;GACxB;EACD;GACE,MAAM;GACN,WAAW;GACX,OAAO,CAAC,mBAAmB;GAC5B;EACD;GACE,MAAM;GACN,WAAW;GACX,OAAO,CAAC,WAAW;GACpB;EACD;GACE,MAAM;GACN,YAAY;GACZ,OAAO,CAAC,cAAc;GACvB;EACF;CACF,CAAC;AAUF,IAAa,SAAS,EACpB,QAAQ,SACR,KAAK,SACL,YAAY,OACZ,OAAO,MACP,OAAO,SACP,UACA,UACA,GAAG,WAEH,wBAAA,cAAC,aAAD;CACM;CACE;CACA;CACC;CACI;CACX,GAAI;CAQQ,EANX,UACA,YACC,wBAAA,cAAC,QAAD;CAAM,WAAU;CAA+B,eAAA;CAExC,EAFoD,IAEpD,CAEG;AAGhB,MAAM,cAAc"}
+{"version":3,"file":"Label.js","names":[],"sources":["../../../src/components/label/Label.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\nimport type { Override } from '~/utilities/types'\n\nconst StyledLabel = styled('label', {\n  base: ['text-grey-900', 'font-body', 'm-0'],\n  variants: {\n    size: {\n      sm: ['text-sm', 'leading-[1.53]', 'capsize-[0.4056]'],\n      md: ['text-md', 'leading-normal', 'capsize-[0.3864]']\n    },\n    type: {\n      block: ['block', 'font-semibold'],\n      inline: ['flex', 'font-normal', 'max-w-max']\n    },\n    align: { start: [], center: [] },\n    direction: { reverse: [], row: [] },\n    appearance: { standard: [], modern: [] }\n  },\n  compoundVariants: [\n    {\n      type: 'inline',\n      align: 'start',\n      class: ['items-start']\n    },\n    {\n      type: 'inline',\n      align: 'center',\n      class: ['items-center']\n    },\n    {\n      type: 'inline',\n      direction: 'reverse',\n      class: ['flex-row-reverse']\n    },\n    {\n      type: 'inline',\n      direction: 'row',\n      class: ['flex-row']\n    },\n    {\n      type: 'block',\n      appearance: 'modern',\n      class: ['font-normal']\n    }\n  ]\n})\n\nexport type LabelProps = Override<\n  React.ComponentPropsWithoutRef<typeof StyledLabel>,\n  {\n    as?: 'label' | 'legend'\n    required?: boolean\n  }\n>\n\nexport const Label = ({\n  align = 'start',\n  as = 'label',\n  direction = 'row',\n  size = 'md',\n  type = 'block',\n  children,\n  required,\n  ...rest\n}: LabelProps) => (\n  <StyledLabel\n    as={as}\n    size={size}\n    type={type}\n    align={align}\n    direction={direction}\n    {...rest}\n  >\n    {children}\n    {required && (\n      <span className=\"text-danger ml-1 font-normal\" aria-hidden>\n        *\n      </span>\n    )}\n  </StyledLabel>\n)\n\nLabel.displayName = 'Label'\n"],"mappings":";;;;AAKA,IAAM,cAAc,OAAO,SAAS;CAClC,MAAM;EAAC;EAAiB;EAAa;EAAM;CAC3C,UAAU;EACR,MAAM;GACJ,IAAI;IAAC;IAAW;IAAkB;IAAmB;GACrD,IAAI;IAAC;IAAW;IAAkB;IAAmB;GACtD;EACD,MAAM;GACJ,OAAO,CAAC,SAAS,gBAAgB;GACjC,QAAQ;IAAC;IAAQ;IAAe;IAAY;GAC7C;EACD,OAAO;GAAE,OAAO,EAAE;GAAE,QAAQ,EAAE;GAAE;EAChC,WAAW;GAAE,SAAS,EAAE;GAAE,KAAK,EAAE;GAAE;EACnC,YAAY;GAAE,UAAU,EAAE;GAAE,QAAQ,EAAE;GAAE;EACzC;CACD,kBAAkB;EAChB;GACE,MAAM;GACN,OAAO;GACP,OAAO,CAAC,cAAc;GACvB;EACD;GACE,MAAM;GACN,OAAO;GACP,OAAO,CAAC,eAAe;GACxB;EACD;GACE,MAAM;GACN,WAAW;GACX,OAAO,CAAC,mBAAmB;GAC5B;EACD;GACE,MAAM;GACN,WAAW;GACX,OAAO,CAAC,WAAW;GACpB;EACD;GACE,MAAM;GACN,YAAY;GACZ,OAAO,CAAC,cAAc;GACvB;EACF;CACF,CAAC;AAUF,IAAa,SAAS,EACpB,QAAQ,SACR,KAAK,SACL,YAAY,OACZ,OAAO,MACP,OAAO,SACP,UACA,UACA,GAAG,WAEH,qBAAC,aAAD;CACM;CACE;CACA;CACC;CACI;CACX,GAAI;WANN,CAQG,UACA,YACC,oBAAC,QAAD;EAAM,WAAU;EAA+B,eAAA;YAAY;EAEpD,CAAA,CAEG;;AAGhB,MAAM,cAAc"}

package/dist/components/link/Link.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { NavigatorActions } from '../../types/navigatorActions.types';
 import { Override } from '../../utilities/types';
 export declare const StyledLink: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & {
-    ref?: ((instance: HTMLAnchorElement | null) => void) | React.RefObject<HTMLAnchorElement> | null | undefined;
+    ref?: ((instance: HTMLAnchorElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLAnchorElement> | null | undefined;
 }, "size" | "noCapsize"> & {
     size?: ("sm" | "md" | "lg" | "xs" | "xl" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg" | "xs" | "xl">>) | undefined;
     noCapsize?: (boolean | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", boolean>>) | undefined;

package/dist/components/link/Link.js

@@ -1,6 +1,7 @@
 import { styled } from "../../styled.js";
 import { getExternalAnchorProps } from "../../utilities/uri/index.js";
 import * as React$1 from "react";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/link/Link.tsx
 var StyledLink = styled("a", {
 	base: [
@@ -53,7 +54,7 @@ var StyledLink = styled("a", {
 	},
 	defaultVariants: { size: "md" }
 }, { enabledResponsiveVariants: true });
-var Link = React$1.forwardRef(({ as, disabled, href, ...rest }, ref) => /* @__PURE__ */ React$1.createElement(StyledLink, {
+var Link = React$1.forwardRef(({ as, disabled, href, ...rest }, ref) => /* @__PURE__ */ jsx(StyledLink, {
 	as: as || (!href ? "button" : void 0),
 	noCapsize: !href ? true : void 0,
 	href,

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,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"}
+{"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,oBAAC,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.d.ts

@@ -1,11 +1,11 @@
 import * as React from 'react';
 export declare const StyledLi: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & {
-    ref?: ((instance: HTMLLIElement | null) => void) | React.RefObject<HTMLLIElement> | null | undefined;
+    ref?: ((instance: HTMLLIElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLLIElement> | null | undefined;
 }, never> & {
     as?: React.ElementType;
 }>;
 export declare const StyledList: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & {
-    ref?: ((instance: HTMLUListElement | null) => void) | React.RefObject<HTMLUListElement> | null | undefined;
+    ref?: ((instance: HTMLUListElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLUListElement> | null | undefined;
 }, "size" | "theme" | "noCapsize" | "ordered"> & {
     size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
     noCapsize?: boolean | undefined;

package/dist/components/list/List.js

@@ -1,5 +1,6 @@
 import { styled } from "../../styled.js";
 import * as React$1 from "react";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/list/List.tsx
 var StyledLi = styled("li", { base: ["last:mb-0", "not-last:mb-2"] });
 var StyledList = styled("ul", {
@@ -50,7 +51,7 @@ var StyledList = styled("ul", {
 		theme: { primary: ["marker:text-primary-800"] }
 	}
 });
-var List = React$1.forwardRef(({ size = "md", noCapsize = true, ordered = false, ...remainingProps }, ref) => /* @__PURE__ */ React$1.createElement(StyledList, {
+var List = React$1.forwardRef(({ size = "md", noCapsize = true, ordered = false, ...remainingProps }, ref) => /* @__PURE__ */ jsx(StyledList, {
 	ref,
 	as: ordered ? "ol" : "ul",
 	ordered,

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,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"}
+{"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,oBAAC,YAAD;CACO;CACL,IAAI,UAAU,OAAO;CACZ;CACH;CACK;CACX,GAAI;CACJ,CAAA,CAEL;AAED,KAAK,OAAO"}

package/dist/components/loader/Loader.js

@@ -1,5 +1,6 @@
 import { cn, styled } from "../../styled.js";
-import * as React$1 from "react";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/loader/Loader.tsx
 var Dot = styled("div", {
 	base: [
@@ -16,11 +17,20 @@ var Dot = styled("div", {
 		lg: ["size-2", "mx-[3px]"]
 	} }
 });
-var Loader = ({ className, message = "Loading", size = "md", ...props }) => /* @__PURE__ */ React$1.createElement("div", {
+var Loader = ({ className, message = "Loading", size = "md", ...props }) => /* @__PURE__ */ jsxs("div", {
 	className: cn("flex", "justify-center", className),
 	role: "alert",
-	...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 }));
+	...props,
+	children: [
+		/* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: message
+		}),
+		/* @__PURE__ */ jsx(Dot, { size }),
+		/* @__PURE__ */ jsx(Dot, { size }),
+		/* @__PURE__ */ jsx(Dot, { size })
+	]
+});
 //#endregion
 export { Loader };
 

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

@@ -1 +1 @@
-{"version":3,"file":"Loader.js","names":[],"sources":["../../../src/components/loader/Loader.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { cn } 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={cn('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,GAAG,QAAQ,kBAAkB,UAAU;CAClD,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"}
+{"version":3,"file":"Loader.js","names":[],"sources":["../../../src/components/loader/Loader.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { cn } 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={cn('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,qBAAC,OAAD;CACE,WAAW,GAAG,QAAQ,kBAAkB,UAAU;CAClD,MAAK;CACL,GAAI;WAHN;EAKE,oBAAC,QAAD;GAAM,WAAU;aAAW;GAAe,CAAA;EAC1C,oBAAC,KAAD,EAAW,MAAQ,CAAA;EACnB,oBAAC,KAAD,EAAW,MAAQ,CAAA;EACnB,oBAAC,KAAD,EAAW,MAAQ,CAAA;EACf"}

package/dist/components/markdown-content/MarkdownContent.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-type HandleNode = (node: any) => JSX.Element | null;
+type HandleNode = (node: any) => React.JSX.Element | null;
 declare const StyledMarkdownContent: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+    ref?: ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLDivElement> | null | undefined;
 }, never> & {
     as?: React.ElementType;
 }>;
@@ -11,7 +11,7 @@ type MarkdownContentProps = React.ComponentProps<typeof StyledMarkdownContent> &
         [key: string]: (props: {
             node: any;
             handleNode: HandleNode;
-        }) => JSX.Element;
+        }) => React.JSX.Element;
     };
 };
 export declare const MarkdownContent: {

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

@@ -11,7 +11,8 @@ 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 "react";
+import { jsx } from "react/jsx-runtime";
 import directive from "mdast-util-directive";
 import fromMarkdown from "mdast-util-from-markdown";
 import syntax from "micromark-extension-directive";
@@ -59,13 +60,15 @@ var MarkdownContent = ({ content, customComponents = {}, className }) => {
 	};
 	const handleNode = (node) => {
 		const MarkdownComponent = componentsMap[node.type];
-		return MarkdownComponent ? /* @__PURE__ */ React$1.createElement(MarkdownComponent, {
-			key: generateNodeKey(node),
+		return MarkdownComponent ? /* @__PURE__ */ jsx(MarkdownComponent, {
 			node,
 			handleNode
-		}) : null;
+		}, generateNodeKey(node)) : null;
 	};
-	return /* @__PURE__ */ React$1.createElement(StyledMarkdownContent, { className }, AST.children.map(handleNode));
+	return /* @__PURE__ */ jsx(StyledMarkdownContent, {
+		className,
+		children: AST.children.map(handleNode)
+	});
 };
 MarkdownContent.displayName = "MarkdownContent";
 //#endregion

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,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"}
+{"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) => React.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 }) => React.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,oBAAC,mBAAD;GAEQ;GACM;GACZ,EAHK,gBAAgB,KAAK,CAG1B,GACA;;AAGN,QACE,oBAAC,uBAAD;EAAkC;YAC/B,IAAI,SAAS,IAAI,WAAW;EACP,CAAA;;AAI5B,gBAAgB,cAAc"}

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

@@ -1,5 +1,6 @@
 import { styled } from "../../../styled.js";
-import * as React$1 from "react";
+import "react";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/markdown-content/components/MarkdownCode.tsx
 var StyledMarkdownCode = styled("div", { base: [
 	"bg-grey-200",
@@ -10,7 +11,10 @@ var StyledMarkdownCode = styled("div", { base: [
 	"my-4",
 	"p-3"
 ] });
-var MarkdownCode = ({ node }) => /* @__PURE__ */ React$1.createElement(StyledMarkdownCode, { as: "pre" }, node.value);
+var MarkdownCode = ({ node }) => /* @__PURE__ */ jsx(StyledMarkdownCode, {
+	as: "pre",
+	children: node.value
+});
 //#endregion
 export { MarkdownCode };
 

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,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"}
+{"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,oBAAC,oBAAD;CAAoB,IAAG;WAAO,KAAK;CAA2B,CAAA"}

package/dist/components/markdown-content/components/MarkdownEmphasis.d.ts

@@ -5,7 +5,7 @@ type MarkdownEmphasisProps = {
     handleNode: (node: Content) => React.ReactElement;
 };
 export declare const StyledMarkdownEmphasis: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & {
-    ref?: ((instance: HTMLElement | null) => void) | React.RefObject<HTMLElement> | null | undefined;
+    ref?: ((instance: HTMLElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLElement> | null | undefined;
 }, never> & {
     as?: React.ElementType;
 }>;