@atom-learning/components 6.17.0 → 8.0.0

package/dist/components/field-wrapper/FieldWrapper.js

@@ -3,17 +3,37 @@ import { InlineMessage } from "../inline-message/InlineMessage.js";
 import { Label } from "../label/Label.js";
 import { Description } from "./FieldDescription.js";
 import { Link } from "../link/Link.js";
-import * as React$1 from "react";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/field-wrapper/FieldWrapper.tsx
-var FieldWrapper = ({ children, error, fieldId, label, prompt, description, required, hideLabel, appearance, ...rest }) => /* @__PURE__ */ React$1.createElement("div", rest, /* @__PURE__ */ React$1.createElement("div", { className: cn("mb-3", "flex", "items-center", "justify-between", hideLabel && "sr-only") }, /* @__PURE__ */ React$1.createElement(Label, {
-	htmlFor: fieldId,
-	required,
-	appearance
-}, label), prompt && /* @__PURE__ */ React$1.createElement(Link, {
-	href: prompt?.link,
-	onClick: prompt?.onClick,
-	size: "sm"
-}, prompt.label)), description && /* @__PURE__ */ React$1.createElement(Description, { className: "mb-3" }, description), children, error && /* @__PURE__ */ React$1.createElement(InlineMessage, { className: "mt-2" }, error));
+var FieldWrapper = ({ children, error, fieldId, label, prompt, description, required, hideLabel, appearance, ...rest }) => /* @__PURE__ */ jsxs("div", {
+	...rest,
+	children: [
+		/* @__PURE__ */ jsxs("div", {
+			className: cn("mb-3", "flex", "items-center", "justify-between", hideLabel && "sr-only"),
+			children: [/* @__PURE__ */ jsx(Label, {
+				htmlFor: fieldId,
+				required,
+				appearance,
+				children: label
+			}), prompt && /* @__PURE__ */ jsx(Link, {
+				href: prompt?.link,
+				onClick: prompt?.onClick,
+				size: "sm",
+				children: prompt.label
+			})]
+		}),
+		description && /* @__PURE__ */ jsx(Description, {
+			className: "mb-3",
+			children: description
+		}),
+		children,
+		error && /* @__PURE__ */ jsx(InlineMessage, {
+			className: "mt-2",
+			children: error
+		})
+	]
+});
 FieldWrapper.displayName = "FieldWrapper";
 //#endregion
 export { FieldWrapper };

package/dist/components/field-wrapper/FieldWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"FieldWrapper.js","names":[],"sources":["../../../src/components/field-wrapper/FieldWrapper.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { ValidationOptions } from '~/components/form/validation'\nimport { InlineMessage } from '~/components/inline-message/InlineMessage'\nimport { Label } from '~/components/label/Label'\nimport { Link } from '~/components/link/Link'\nimport { cn } from '~/styled'\n\nimport { type LabelProps } from '../label/Label'\nimport { Description } from './FieldDescription'\n\nexport type FieldWrapperProps = {\n  className?: string\n  error?: string\n  fieldId: string\n  label: string\n  prompt?: { link?: string; label: string; onClick?: () => void }\n  description?: string\n  required?: boolean\n  hideLabel?: boolean\n  appearance?: LabelProps['appearance']\n}\n\nexport type FieldElementWrapperProps = Omit<FieldWrapperProps, 'fieldId'> & {\n  name: string\n  validation?: ValidationOptions\n}\n\nexport const FieldWrapper = ({\n  children,\n  error,\n  fieldId,\n  label,\n  prompt,\n  description,\n  required,\n  hideLabel,\n  appearance,\n  ...rest\n}: React.PropsWithChildren<FieldWrapperProps>) => (\n  <div {...rest}>\n    <div\n      className={cn(\n        'mb-3',\n        'flex',\n        'items-center',\n        'justify-between',\n        hideLabel && 'sr-only'\n      )}\n    >\n      <Label htmlFor={fieldId} required={required} appearance={appearance}>\n        {label}\n      </Label>\n      {prompt && (\n        <Link href={prompt?.link} onClick={prompt?.onClick} size=\"sm\">\n          {prompt.label}\n        </Link>\n      )}\n    </div>\n    {description && <Description className=\"mb-3\">{description}</Description>}\n    {children}\n    {error && <InlineMessage className=\"mt-2\">{error}</InlineMessage>}\n  </div>\n)\n\nFieldWrapper.displayName = 'FieldWrapper'\n"],"mappings":";;;;;;;AA4BA,IAAa,gBAAgB,EAC3B,UACA,OACA,SACA,OACA,QACA,aACA,UACA,WACA,YACA,GAAG,WAEH,wBAAA,cAAC,OAAQ,MACP,wBAAA,cAAC,OAAD,EACE,WAAW,GACT,QACA,QACA,gBACA,mBACA,aAAa,UACd,EAUG,EARJ,wBAAA,cAAC,OAAD;CAAO,SAAS;CAAmB;CAAsB;CAEjD,EADL,MACK,EACP,UACC,wBAAA,cAAC,MAAD;CAAM,MAAM,QAAQ;CAAM,SAAS,QAAQ;CAAS,MAAK;CAElD,EADJ,OAAO,MACH,CAEL,EACL,eAAe,wBAAA,cAAC,aAAD,EAAa,WAAU,QAAkC,EAA1B,YAA0B,EACxE,UACA,SAAS,wBAAA,cAAC,eAAD,EAAe,WAAU,QAA8B,EAAtB,MAAsB,CAC7D;AAGR,aAAa,cAAc"}
+{"version":3,"file":"FieldWrapper.js","names":[],"sources":["../../../src/components/field-wrapper/FieldWrapper.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { ValidationOptions } from '~/components/form/validation'\nimport { InlineMessage } from '~/components/inline-message/InlineMessage'\nimport { Label } from '~/components/label/Label'\nimport { Link } from '~/components/link/Link'\nimport { cn } from '~/styled'\n\nimport { type LabelProps } from '../label/Label'\nimport { Description } from './FieldDescription'\n\nexport type FieldWrapperProps = {\n  className?: string\n  error?: string\n  fieldId: string\n  label: string\n  prompt?: { link?: string; label: string; onClick?: () => void }\n  description?: string\n  required?: boolean\n  hideLabel?: boolean\n  appearance?: LabelProps['appearance']\n}\n\nexport type FieldElementWrapperProps = Omit<FieldWrapperProps, 'fieldId'> & {\n  name: string\n  validation?: ValidationOptions\n}\n\nexport const FieldWrapper = ({\n  children,\n  error,\n  fieldId,\n  label,\n  prompt,\n  description,\n  required,\n  hideLabel,\n  appearance,\n  ...rest\n}: React.PropsWithChildren<FieldWrapperProps>) => (\n  <div {...rest}>\n    <div\n      className={cn(\n        'mb-3',\n        'flex',\n        'items-center',\n        'justify-between',\n        hideLabel && 'sr-only'\n      )}\n    >\n      <Label htmlFor={fieldId} required={required} appearance={appearance}>\n        {label}\n      </Label>\n      {prompt && (\n        <Link href={prompt?.link} onClick={prompt?.onClick} size=\"sm\">\n          {prompt.label}\n        </Link>\n      )}\n    </div>\n    {description && <Description className=\"mb-3\">{description}</Description>}\n    {children}\n    {error && <InlineMessage className=\"mt-2\">{error}</InlineMessage>}\n  </div>\n)\n\nFieldWrapper.displayName = 'FieldWrapper'\n"],"mappings":";;;;;;;;AA4BA,IAAa,gBAAgB,EAC3B,UACA,OACA,SACA,OACA,QACA,aACA,UACA,WACA,YACA,GAAG,WAEH,qBAAC,OAAD;CAAK,GAAI;WAAT;EACE,qBAAC,OAAD;GACE,WAAW,GACT,QACA,QACA,gBACA,mBACA,aAAa,UACd;aAPH,CASE,oBAAC,OAAD;IAAO,SAAS;IAAmB;IAAsB;cACtD;IACK,CAAA,EACP,UACC,oBAAC,MAAD;IAAM,MAAM,QAAQ;IAAM,SAAS,QAAQ;IAAS,MAAK;cACtD,OAAO;IACH,CAAA,CAEL;;EACL,eAAe,oBAAC,aAAD;GAAa,WAAU;aAAQ;GAA0B,CAAA;EACxE;EACA,SAAS,oBAAC,eAAD;GAAe,WAAU;aAAQ;GAAsB,CAAA;EAC7D;;AAGR,aAAa,cAAc"}

package/dist/components/field-wrapper/InlineFieldWrapper.js

@@ -5,13 +5,31 @@ import { Label } from "../label/Label.js";
 import { RadioButton } from "../radio-button/RadioButton.js";
 import { Description } from "./FieldDescription.js";
 import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/field-wrapper/InlineFieldWrapper.tsx
-var InlineFieldWrapper = ({ align = "start", children, className, description, direction = "row", error, label, required }) => /* @__PURE__ */ React$1.createElement("div", { className }, /* @__PURE__ */ React$1.createElement(Label, {
-	align,
-	direction,
-	required,
-	type: "inline"
-}, React$1.Children.map(children, (child) => /* @__PURE__ */ React$1.createElement("div", { className: cn(direction === "reverse" && "ml-3", direction === "row" && "mr-3", (child?.type === Checkbox || child?.type === RadioButton) && child?.props?.size !== "lg" && "translate-y-1") }, child)), label), error && /* @__PURE__ */ React$1.createElement(InlineMessage, { className: "mt-2" }, error), description && /* @__PURE__ */ React$1.createElement(Description, { className: cn("mt-2", direction === "reverse" && "mr-7", direction === "row" && "ml-7") }, description));
+var InlineFieldWrapper = ({ align = "start", children, className, description, direction = "row", error, label, required }) => /* @__PURE__ */ jsxs("div", {
+	className,
+	children: [
+		/* @__PURE__ */ jsxs(Label, {
+			align,
+			direction,
+			required,
+			type: "inline",
+			children: [React$1.Children.map(children, (child) => /* @__PURE__ */ jsx("div", {
+				className: cn(direction === "reverse" && "ml-3", direction === "row" && "mr-3", (child?.type === Checkbox || child?.type === RadioButton) && child?.props?.size !== "lg" && "translate-y-1"),
+				children: child
+			})), label]
+		}),
+		error && /* @__PURE__ */ jsx(InlineMessage, {
+			className: "mt-2",
+			children: error
+		}),
+		description && /* @__PURE__ */ jsx(Description, {
+			className: cn("mt-2", direction === "reverse" && "mr-7", direction === "row" && "ml-7"),
+			children: description
+		})
+	]
+});
 InlineFieldWrapper.displayName = "InlineFieldWrapper";
 //#endregion
 export { InlineFieldWrapper };

package/dist/components/field-wrapper/InlineFieldWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"InlineFieldWrapper.js","names":[],"sources":["../../../src/components/field-wrapper/InlineFieldWrapper.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Checkbox } from '~/components/checkbox/Checkbox'\nimport { InlineMessage } from '~/components/inline-message/InlineMessage'\nimport { Label } from '~/components/label/Label'\nimport { RadioButton } from '~/components/radio-button/RadioButton'\nimport { cn } from '~/styled'\n\nimport { Description } from './FieldDescription'\n\ntype InlineFieldWrapperProps = {\n  className?: string\n  error?: string\n  label: string\n  required?: boolean\n  align?: 'start' | 'center'\n  direction?: 'row' | 'reverse'\n  description?: string\n}\n\nexport const InlineFieldWrapper = ({\n  align = 'start',\n  children,\n  className,\n  description,\n  direction = 'row',\n  error,\n  label,\n  required\n}: React.PropsWithChildren<InlineFieldWrapperProps>) => (\n  <div className={className}>\n    <Label\n      align={align}\n      direction={direction}\n      required={required}\n      type=\"inline\"\n    >\n      {React.Children.map(children, (child: any) => (\n        <div\n          className={cn(\n            direction === 'reverse' && 'ml-3',\n            direction === 'row' && 'mr-3',\n            (child?.type === Checkbox || child?.type === RadioButton) &&\n              child?.props?.size !== 'lg' &&\n              'translate-y-1'\n          )}\n        >\n          {child}\n        </div>\n      ))}\n      {label}\n    </Label>\n    {error && <InlineMessage className=\"mt-2\">{error}</InlineMessage>}\n    {description && (\n      <Description\n        className={cn(\n          'mt-2',\n          direction === 'reverse' && 'mr-7',\n          direction === 'row' && 'ml-7'\n        )}\n      >\n        {description}\n      </Description>\n    )}\n  </div>\n)\n\nInlineFieldWrapper.displayName = 'InlineFieldWrapper'\n"],"mappings":";;;;;;;;AAoBA,IAAa,sBAAsB,EACjC,QAAQ,SACR,UACA,WACA,aACA,YAAY,OACZ,OACA,OACA,eAEA,wBAAA,cAAC,OAAD,EAAgB,WAkCV,EAjCJ,wBAAA,cAAC,OAAD;CACS;CACI;CACD;CACV,MAAK;CAgBC,EAdL,QAAM,SAAS,IAAI,WAAW,UAC7B,wBAAA,cAAC,OAAD,EACE,WAAW,GACT,cAAc,aAAa,QAC3B,cAAc,SAAS,SACtB,OAAO,SAAS,YAAY,OAAO,SAAS,gBAC3C,OAAO,OAAO,SAAS,QACvB,gBACH,EAGG,EADH,MACG,CACN,EACD,MACK,EACP,SAAS,wBAAA,cAAC,eAAD,EAAe,WAAU,QAA8B,EAAtB,MAAsB,EAChE,eACC,wBAAA,cAAC,aAAD,EACE,WAAW,GACT,QACA,cAAc,aAAa,QAC3B,cAAc,SAAS,OACxB,EAGW,EADX,YACW,CAEZ;AAGR,mBAAmB,cAAc"}
+{"version":3,"file":"InlineFieldWrapper.js","names":[],"sources":["../../../src/components/field-wrapper/InlineFieldWrapper.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Checkbox } from '~/components/checkbox/Checkbox'\nimport { InlineMessage } from '~/components/inline-message/InlineMessage'\nimport { Label } from '~/components/label/Label'\nimport { RadioButton } from '~/components/radio-button/RadioButton'\nimport { cn } from '~/styled'\n\nimport { Description } from './FieldDescription'\n\ntype InlineFieldWrapperProps = {\n  className?: string\n  error?: string\n  label: string\n  required?: boolean\n  align?: 'start' | 'center'\n  direction?: 'row' | 'reverse'\n  description?: string\n}\n\nexport const InlineFieldWrapper = ({\n  align = 'start',\n  children,\n  className,\n  description,\n  direction = 'row',\n  error,\n  label,\n  required\n}: React.PropsWithChildren<InlineFieldWrapperProps>) => (\n  <div className={className}>\n    <Label\n      align={align}\n      direction={direction}\n      required={required}\n      type=\"inline\"\n    >\n      {React.Children.map(children, (child: any) => (\n        <div\n          className={cn(\n            direction === 'reverse' && 'ml-3',\n            direction === 'row' && 'mr-3',\n            (child?.type === Checkbox || child?.type === RadioButton) &&\n              child?.props?.size !== 'lg' &&\n              'translate-y-1'\n          )}\n        >\n          {child}\n        </div>\n      ))}\n      {label}\n    </Label>\n    {error && <InlineMessage className=\"mt-2\">{error}</InlineMessage>}\n    {description && (\n      <Description\n        className={cn(\n          'mt-2',\n          direction === 'reverse' && 'mr-7',\n          direction === 'row' && 'ml-7'\n        )}\n      >\n        {description}\n      </Description>\n    )}\n  </div>\n)\n\nInlineFieldWrapper.displayName = 'InlineFieldWrapper'\n"],"mappings":";;;;;;;;;AAoBA,IAAa,sBAAsB,EACjC,QAAQ,SACR,UACA,WACA,aACA,YAAY,OACZ,OACA,OACA,eAEA,qBAAC,OAAD;CAAgB;WAAhB;EACE,qBAAC,OAAD;GACS;GACI;GACD;GACV,MAAK;aAJP,CAMG,QAAM,SAAS,IAAI,WAAW,UAC7B,oBAAC,OAAD;IACE,WAAW,GACT,cAAc,aAAa,QAC3B,cAAc,SAAS,SACtB,OAAO,SAAS,YAAY,OAAO,SAAS,gBAC3C,OAAO,OAAO,SAAS,QACvB,gBACH;cAEA;IACG,CAAA,CACN,EACD,MACK;;EACP,SAAS,oBAAC,eAAD;GAAe,WAAU;aAAQ;GAAsB,CAAA;EAChE,eACC,oBAAC,aAAD;GACE,WAAW,GACT,QACA,cAAc,aAAa,QAC3B,cAAc,SAAS,OACxB;aAEA;GACW,CAAA;EAEZ;;AAGR,mBAAmB,cAAc"}

package/dist/components/file-drop/FileDrop.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { type FileDropContextValue } from './types';
-interface FileDropProps extends Omit<React.ComponentProps<'div'>, 'onDrop' | 'ref'> {
+interface FileDropProps extends Omit<React.ComponentProps<'div'>, 'onDrop' | 'ref' | 'children'> {
     onDrop: (files: File[]) => void;
     children?: React.ReactNode | ((value: FileDropContextValue) => React.ReactNode);
     accept?: React.InputHTMLAttributes<HTMLInputElement>['accept'];

package/dist/components/file-drop/FileDrop.js

@@ -1,6 +1,7 @@
 import { styled } from "../../styled.js";
 import { FileDropContext } from "./FileDropContext.js";
 import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/file-drop/FileDrop.tsx
 var StyledContainer = styled("div", { base: [
 	"flex",
@@ -39,28 +40,32 @@ var FileDrop = ({ children, accept, multiple, onDrop, ...props }) => {
 		isDragging,
 		files
 	};
-	return /* @__PURE__ */ React$1.createElement(FileDropContext.Provider, { value }, /* @__PURE__ */ React$1.createElement(StyledContainer, {
-		onDragOver: handleDragOver,
-		onDragLeave: handleDragLeave,
-		onDrop: (event) => {
-			event.preventDefault();
-			handleDrop(event.dataTransfer.files);
-		},
-		onClick: () => fileUploadInputRef.current?.click(),
-		role: "button",
-		onKeyDown: handleKeyDown,
-		tabIndex: 0,
-		...props
-	}, typeof children === "function" ? children(value) : children, /* @__PURE__ */ React$1.createElement("input", {
-		type: "file",
-		ref: fileUploadInputRef,
-		style: { visibility: "hidden" },
-		accept,
-		multiple,
-		onChange: (event) => {
-			handleDrop(event.target.files);
-		}
-	})));
+	return /* @__PURE__ */ jsx(FileDropContext.Provider, {
+		value,
+		children: /* @__PURE__ */ jsxs(StyledContainer, {
+			onDragOver: handleDragOver,
+			onDragLeave: handleDragLeave,
+			onDrop: (event) => {
+				event.preventDefault();
+				handleDrop(event.dataTransfer.files);
+			},
+			onClick: () => fileUploadInputRef.current?.click(),
+			role: "button",
+			onKeyDown: handleKeyDown,
+			tabIndex: 0,
+			...props,
+			children: [typeof children === "function" ? children(value) : children, /* @__PURE__ */ jsx("input", {
+				type: "file",
+				ref: fileUploadInputRef,
+				style: { visibility: "hidden" },
+				accept,
+				multiple,
+				onChange: (event) => {
+					handleDrop(event.target.files);
+				}
+			})]
+		})
+	});
 };
 FileDrop.displayName = "FileDrop";
 //#endregion

package/dist/components/file-drop/FileDrop.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileDrop.js","names":[],"sources":["../../../src/components/file-drop/FileDrop.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { FileDropContext } from './FileDropContext'\nimport { type FileDropContextValue } from './types'\n\ninterface FileDropProps extends Omit<\n  React.ComponentProps<'div'>,\n  'onDrop' | 'ref'\n> {\n  onDrop: (files: File[]) => void\n  children?:\n    | React.ReactNode\n    | ((value: FileDropContextValue) => React.ReactNode)\n  accept?: React.InputHTMLAttributes<HTMLInputElement>['accept']\n  multiple?: React.InputHTMLAttributes<HTMLInputElement>['multiple']\n}\n\nconst StyledContainer = styled('div', {\n  base: [\n    'flex',\n    'flex-col',\n    'gap-6',\n    'items-center',\n    'border',\n    'border-dashed',\n    'border-grey-500',\n    'px-12',\n    'py-8',\n    'rounded-md',\n    'cursor-pointer',\n    '**:pointer-events-none'\n  ]\n})\n\nexport const FileDrop = ({\n  children,\n  accept,\n  multiple,\n  onDrop,\n  ...props\n}: FileDropProps) => {\n  const [isDragging, setIsDragging] = React.useState(false)\n  const [files, setFiles] = React.useState<File[]>([])\n  const fileUploadInputRef = React.useRef<HTMLInputElement>(null)\n\n  const handleDragOver = (event: React.DragEvent<HTMLDivElement>) => {\n    event.preventDefault()\n    setIsDragging(true)\n  }\n\n  const handleDragLeave = () => setIsDragging(false)\n\n  const handleDrop = (fileList: FileList | null) => {\n    if (!fileList) return\n\n    setIsDragging(false)\n\n    const files = Array.from(fileList)\n    onDrop(files)\n    setFiles(files)\n  }\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    if (['Space', 'Enter'].includes(event.key)) {\n      fileUploadInputRef.current?.click()\n    }\n  }\n\n  const value: FileDropContextValue = { isDragging, files }\n\n  return (\n    <FileDropContext.Provider value={value}>\n      <StyledContainer\n        onDragOver={handleDragOver}\n        onDragLeave={handleDragLeave}\n        onDrop={(event) => {\n          event.preventDefault()\n          handleDrop(event.dataTransfer.files)\n        }}\n        onClick={() => fileUploadInputRef.current?.click()}\n        role=\"button\"\n        onKeyDown={handleKeyDown}\n        tabIndex={0}\n        {...props}\n      >\n        {typeof children === 'function' ? children(value) : children}\n        <input\n          type=\"file\"\n          ref={fileUploadInputRef}\n          style={{ visibility: 'hidden' }}\n          accept={accept}\n          multiple={multiple}\n          onChange={(event) => {\n            handleDrop(event.target.files)\n          }}\n        />\n      </StyledContainer>\n    </FileDropContext.Provider>\n  )\n}\n\nFileDrop.displayName = 'FileDrop'\n"],"mappings":";;;;AAmBA,IAAM,kBAAkB,OAAO,OAAO,EACpC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC;AAEF,IAAa,YAAY,EACvB,UACA,QACA,UACA,QACA,GAAG,YACgB;CACnB,MAAM,CAAC,YAAY,iBAAiB,QAAM,SAAS,MAAM;CACzD,MAAM,CAAC,OAAO,YAAY,QAAM,SAAiB,EAAE,CAAC;CACpD,MAAM,qBAAqB,QAAM,OAAyB,KAAK;CAE/D,MAAM,kBAAkB,UAA2C;AACjE,QAAM,gBAAgB;AACtB,gBAAc,KAAK;;CAGrB,MAAM,wBAAwB,cAAc,MAAM;CAElD,MAAM,cAAc,aAA8B;AAChD,MAAI,CAAC,SAAU;AAEf,gBAAc,MAAM;EAEpB,MAAM,QAAQ,MAAM,KAAK,SAAS;AAClC,SAAO,MAAM;AACb,WAAS,MAAM;;CAGjB,MAAM,iBAAiB,UAA+C;AACpE,MAAI,CAAC,SAAS,QAAQ,CAAC,SAAS,MAAM,IAAI,CACxC,oBAAmB,SAAS,OAAO;;CAIvC,MAAM,QAA8B;EAAE;EAAY;EAAO;AAEzD,QACE,wBAAA,cAAC,gBAAgB,UAAjB,EAAiC,OA0BN,EAzBzB,wBAAA,cAAC,iBAAD;EACE,YAAY;EACZ,aAAa;EACb,SAAS,UAAU;AACjB,SAAM,gBAAgB;AACtB,cAAW,MAAM,aAAa,MAAM;;EAEtC,eAAe,mBAAmB,SAAS,OAAO;EAClD,MAAK;EACL,WAAW;EACX,UAAU;EACV,GAAI;EAaY,EAXf,OAAO,aAAa,aAAa,SAAS,MAAM,GAAG,UACpD,wBAAA,cAAC,SAAD;EACE,MAAK;EACL,KAAK;EACL,OAAO,EAAE,YAAY,UAAU;EACvB;EACE;EACV,WAAW,UAAU;AACnB,cAAW,MAAM,OAAO,MAAM;;EAEhC,CAAA,CACc,CACO;;AAI/B,SAAS,cAAc"}
+{"version":3,"file":"FileDrop.js","names":[],"sources":["../../../src/components/file-drop/FileDrop.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { FileDropContext } from './FileDropContext'\nimport { type FileDropContextValue } from './types'\n\ninterface FileDropProps extends Omit<\n  React.ComponentProps<'div'>,\n  'onDrop' | 'ref' | 'children'\n> {\n  onDrop: (files: File[]) => void\n  children?:\n    | React.ReactNode\n    | ((value: FileDropContextValue) => React.ReactNode)\n  accept?: React.InputHTMLAttributes<HTMLInputElement>['accept']\n  multiple?: React.InputHTMLAttributes<HTMLInputElement>['multiple']\n}\n\nconst StyledContainer = styled('div', {\n  base: [\n    'flex',\n    'flex-col',\n    'gap-6',\n    'items-center',\n    'border',\n    'border-dashed',\n    'border-grey-500',\n    'px-12',\n    'py-8',\n    'rounded-md',\n    'cursor-pointer',\n    '**:pointer-events-none'\n  ]\n})\n\nexport const FileDrop = ({\n  children,\n  accept,\n  multiple,\n  onDrop,\n  ...props\n}: FileDropProps) => {\n  const [isDragging, setIsDragging] = React.useState(false)\n  const [files, setFiles] = React.useState<File[]>([])\n  const fileUploadInputRef = React.useRef<HTMLInputElement>(null)\n\n  const handleDragOver = (event: React.DragEvent<HTMLDivElement>) => {\n    event.preventDefault()\n    setIsDragging(true)\n  }\n\n  const handleDragLeave = () => setIsDragging(false)\n\n  const handleDrop = (fileList: FileList | null) => {\n    if (!fileList) return\n\n    setIsDragging(false)\n\n    const files = Array.from(fileList)\n    onDrop(files)\n    setFiles(files)\n  }\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    if (['Space', 'Enter'].includes(event.key)) {\n      fileUploadInputRef.current?.click()\n    }\n  }\n\n  const value: FileDropContextValue = { isDragging, files }\n\n  return (\n    <FileDropContext.Provider value={value}>\n      <StyledContainer\n        onDragOver={handleDragOver}\n        onDragLeave={handleDragLeave}\n        onDrop={(event) => {\n          event.preventDefault()\n          handleDrop(event.dataTransfer.files)\n        }}\n        onClick={() => fileUploadInputRef.current?.click()}\n        role=\"button\"\n        onKeyDown={handleKeyDown}\n        tabIndex={0}\n        {...props}\n      >\n        {typeof children === 'function' ? children(value) : children}\n        <input\n          type=\"file\"\n          ref={fileUploadInputRef}\n          style={{ visibility: 'hidden' }}\n          accept={accept}\n          multiple={multiple}\n          onChange={(event) => {\n            handleDrop(event.target.files)\n          }}\n        />\n      </StyledContainer>\n    </FileDropContext.Provider>\n  )\n}\n\nFileDrop.displayName = 'FileDrop'\n"],"mappings":";;;;;AAmBA,IAAM,kBAAkB,OAAO,OAAO,EACpC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC;AAEF,IAAa,YAAY,EACvB,UACA,QACA,UACA,QACA,GAAG,YACgB;CACnB,MAAM,CAAC,YAAY,iBAAiB,QAAM,SAAS,MAAM;CACzD,MAAM,CAAC,OAAO,YAAY,QAAM,SAAiB,EAAE,CAAC;CACpD,MAAM,qBAAqB,QAAM,OAAyB,KAAK;CAE/D,MAAM,kBAAkB,UAA2C;AACjE,QAAM,gBAAgB;AACtB,gBAAc,KAAK;;CAGrB,MAAM,wBAAwB,cAAc,MAAM;CAElD,MAAM,cAAc,aAA8B;AAChD,MAAI,CAAC,SAAU;AAEf,gBAAc,MAAM;EAEpB,MAAM,QAAQ,MAAM,KAAK,SAAS;AAClC,SAAO,MAAM;AACb,WAAS,MAAM;;CAGjB,MAAM,iBAAiB,UAA+C;AACpE,MAAI,CAAC,SAAS,QAAQ,CAAC,SAAS,MAAM,IAAI,CACxC,oBAAmB,SAAS,OAAO;;CAIvC,MAAM,QAA8B;EAAE;EAAY;EAAO;AAEzD,QACE,oBAAC,gBAAgB,UAAjB;EAAiC;YAC/B,qBAAC,iBAAD;GACE,YAAY;GACZ,aAAa;GACb,SAAS,UAAU;AACjB,UAAM,gBAAgB;AACtB,eAAW,MAAM,aAAa,MAAM;;GAEtC,eAAe,mBAAmB,SAAS,OAAO;GAClD,MAAK;GACL,WAAW;GACX,UAAU;GACV,GAAI;aAXN,CAaG,OAAO,aAAa,aAAa,SAAS,MAAM,GAAG,UACpD,oBAAC,SAAD;IACE,MAAK;IACL,KAAK;IACL,OAAO,EAAE,YAAY,UAAU;IACvB;IACE;IACV,WAAW,UAAU;AACnB,gBAAW,MAAM,OAAO,MAAM;;IAEhC,CAAA,CACc;;EACO,CAAA;;AAI/B,SAAS,cAAc"}

package/dist/components/file-input/FileInput.js

@@ -1,6 +1,7 @@
 import { Icon } from "../icon/Icon.js";
 import { Button } from "../button/Button.js";
-import * as React$1 from "react";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Upload } from "@atom-learning/icons";
 //#region src/components/file-input/FileInput.tsx
 var FileInput = ({ accept, children, multiple = false, onFileSelect, ...rest }) => {
@@ -8,16 +9,21 @@ var FileInput = ({ accept, children, multiple = false, onFileSelect, ...rest })
 		const { files } = event.target;
 		onFileSelect(files);
 	};
-	return /* @__PURE__ */ React$1.createElement(Button, {
+	return /* @__PURE__ */ jsxs(Button, {
 		as: "label",
-		...rest
-	}, /* @__PURE__ */ React$1.createElement(Icon, { is: Upload }), children, /* @__PURE__ */ React$1.createElement("input", {
-		type: "file",
-		onChange: handleFileSelect,
-		accept,
-		multiple,
-		hidden: true
-	}));
+		...rest,
+		children: [
+			/* @__PURE__ */ jsx(Icon, { is: Upload }),
+			children,
+			/* @__PURE__ */ jsx("input", {
+				type: "file",
+				onChange: handleFileSelect,
+				accept,
+				multiple,
+				hidden: true
+			})
+		]
+	});
 };
 FileInput.displayName = "FileInput";
 //#endregion

package/dist/components/file-input/FileInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileInput.js","names":[],"sources":["../../../src/components/file-input/FileInput.tsx"],"sourcesContent":["import { Upload } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { Button } from '../button/Button'\nimport { Icon } from '../icon/Icon'\n\nexport type FileInputProps = React.ComponentProps<typeof Button> & {\n  onFileSelect: (selection: FileList | null) => void\n  accept?: string\n  multiple?: boolean\n}\n\nexport const FileInput = ({\n  accept,\n  children,\n  multiple = false,\n  onFileSelect,\n  ...rest\n}: FileInputProps) => {\n  const handleFileSelect = (event: React.ChangeEvent<HTMLInputElement>) => {\n    const { files } = event.target\n\n    onFileSelect(files)\n  }\n\n  return (\n    <Button as=\"label\" {...rest}>\n      <Icon is={Upload} />\n      {children}\n      <input\n        type=\"file\"\n        onChange={handleFileSelect}\n        accept={accept}\n        multiple={multiple}\n        hidden\n      />\n    </Button>\n  )\n}\n\nFileInput.displayName = 'FileInput'\n"],"mappings":";;;;;AAYA,IAAa,aAAa,EACxB,QACA,UACA,WAAW,OACX,cACA,GAAG,WACiB;CACpB,MAAM,oBAAoB,UAA+C;EACvE,MAAM,EAAE,UAAU,MAAM;AAExB,eAAa,MAAM;;AAGrB,QACE,wBAAA,cAAC,QAAD;EAAQ,IAAG;EAAQ,GAAI;EAUd,EATP,wBAAA,cAAC,MAAD,EAAM,IAAI,QAAU,CAAA,EACnB,UACD,wBAAA,cAAC,SAAD;EACE,MAAK;EACL,UAAU;EACF;EACE;EACV,QAAA;EACA,CAAA,CACK;;AAIb,UAAU,cAAc"}
+{"version":3,"file":"FileInput.js","names":[],"sources":["../../../src/components/file-input/FileInput.tsx"],"sourcesContent":["import { Upload } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { Button } from '../button/Button'\nimport { Icon } from '../icon/Icon'\n\nexport type FileInputProps = React.ComponentProps<typeof Button> & {\n  onFileSelect: (selection: FileList | null) => void\n  accept?: string\n  multiple?: boolean\n}\n\nexport const FileInput = ({\n  accept,\n  children,\n  multiple = false,\n  onFileSelect,\n  ...rest\n}: FileInputProps) => {\n  const handleFileSelect = (event: React.ChangeEvent<HTMLInputElement>) => {\n    const { files } = event.target\n\n    onFileSelect(files)\n  }\n\n  return (\n    <Button as=\"label\" {...rest}>\n      <Icon is={Upload} />\n      {children}\n      <input\n        type=\"file\"\n        onChange={handleFileSelect}\n        accept={accept}\n        multiple={multiple}\n        hidden\n      />\n    </Button>\n  )\n}\n\nFileInput.displayName = 'FileInput'\n"],"mappings":";;;;;;AAYA,IAAa,aAAa,EACxB,QACA,UACA,WAAW,OACX,cACA,GAAG,WACiB;CACpB,MAAM,oBAAoB,UAA+C;EACvE,MAAM,EAAE,UAAU,MAAM;AAExB,eAAa,MAAM;;AAGrB,QACE,qBAAC,QAAD;EAAQ,IAAG;EAAQ,GAAI;YAAvB;GACE,oBAAC,MAAD,EAAM,IAAI,QAAU,CAAA;GACnB;GACD,oBAAC,SAAD;IACE,MAAK;IACL,UAAU;IACF;IACE;IACV,QAAA;IACA,CAAA;GACK;;;AAIb,UAAU,cAAc"}

package/dist/components/flex/Flex.d.ts

@@ -1,10 +1,10 @@
 export declare const Flex: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+    ref?: ((instance: HTMLDivElement | 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<HTMLDivElement> | null | undefined;
 }, "gap" | "wrap" | "direction" | "align" | "justify"> & {
-    direction?: ("row" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "column" | "column-reverse" | "row-reverse" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "row" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "column" | "column-reverse" | "row-reverse">>) | undefined;
+    direction?: ("inherit" | "row" | "initial" | "revert" | "revert-layer" | "unset" | "column" | "column-reverse" | "row-reverse" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "inherit" | "row" | "initial" | "revert" | "revert-layer" | "unset" | "column" | "column-reverse" | "row-reverse">>) | undefined;
     wrap?: ("wrap" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "nowrap" | "wrap-reverse" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "wrap" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "nowrap" | "wrap-reverse">>) | undefined;
-    justify?: ("end" | "left" | "right" | "start" | "inherit" | "initial" | "center" | "normal" | "revert" | "revert-layer" | "unset" | "space-around" | "space-between" | "space-evenly" | "stretch" | "flex-end" | "flex-start" | "unsafe" | "safe" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "end" | "left" | "right" | "start" | "inherit" | "initial" | "center" | "normal" | "revert" | "revert-layer" | "unset" | "space-around" | "space-between" | "space-evenly" | "stretch" | "flex-end" | "flex-start" | "unsafe" | "safe">>) | undefined;
-    align?: ("end" | "start" | "inherit" | "baseline" | "initial" | "center" | "normal" | "self-start" | "revert" | "revert-layer" | "unset" | "stretch" | "flex-end" | "flex-start" | "self-end" | "unsafe" | "safe" | "first baseline" | "last baseline" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "end" | "start" | "inherit" | "baseline" | "initial" | "center" | "normal" | "self-start" | "revert" | "revert-layer" | "unset" | "stretch" | "flex-end" | "flex-start" | "self-end" | "unsafe" | "safe" | "first baseline" | "last baseline">>) | undefined;
+    justify?: ("end" | "left" | "right" | "start" | "center" | "inherit" | "initial" | "normal" | "revert" | "revert-layer" | "unset" | "space-around" | "space-between" | "space-evenly" | "stretch" | "flex-end" | "flex-start" | "unsafe" | "safe" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "end" | "left" | "right" | "start" | "center" | "inherit" | "initial" | "normal" | "revert" | "revert-layer" | "unset" | "space-around" | "space-between" | "space-evenly" | "stretch" | "flex-end" | "flex-start" | "unsafe" | "safe">>) | undefined;
+    align?: ("end" | "start" | "center" | "inherit" | "baseline" | "initial" | "normal" | "self-start" | "revert" | "revert-layer" | "unset" | "stretch" | "flex-end" | "flex-start" | "self-end" | "unsafe" | "safe" | "first baseline" | "last baseline" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "end" | "start" | "center" | "inherit" | "baseline" | "initial" | "normal" | "self-start" | "revert" | "revert-layer" | "unset" | "stretch" | "flex-end" | "flex-start" | "self-end" | "unsafe" | "safe" | "first baseline" | "last baseline">>) | undefined;
     gap?: (0 | 1 | "0" | "1" | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "24" | 24 | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", 0 | 1 | "0" | "1" | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "24" | 24>>) | undefined;
 } & {
     as?: import("react").ElementType;

package/dist/components/form/Form.js

@@ -1,5 +1,6 @@
 import { FormCustomContext } from "./useFormCustomContext.js";
-import * as React$1 from "react";
+import "react";
+import { jsx } from "react/jsx-runtime";
 import { FormProvider, useForm } from "react-hook-form";
 //#region src/components/form/Form.tsx
 var Form = (props) => {
@@ -8,14 +9,21 @@ var Form = (props) => {
 		defaultValues,
 		mode: validationMode
 	});
-	return /* @__PURE__ */ React$1.createElement(FormProvider, methods, /* @__PURE__ */ React$1.createElement(FormCustomContext.Provider, { value: {
-		appearance,
-		theme
-	} }, /* @__PURE__ */ React$1.createElement("form", {
-		"aria-label": "form",
-		onSubmit: methods.handleSubmit(onSubmit, onError),
-		...rest
-	}, typeof children === "function" ? children(methods) : children)));
+	return /* @__PURE__ */ jsx(FormProvider, {
+		...methods,
+		children: /* @__PURE__ */ jsx(FormCustomContext.Provider, {
+			value: {
+				appearance,
+				theme
+			},
+			children: /* @__PURE__ */ jsx("form", {
+				"aria-label": "form",
+				onSubmit: methods.handleSubmit(onSubmit, onError),
+				...rest,
+				children: typeof children === "function" ? children(methods) : children
+			})
+		})
+	});
 };
 Form.displayName = "Form";
 //#endregion

package/dist/components/form/Form.js.map

@@ -1 +1 @@
-{"version":3,"file":"Form.js","names":[],"sources":["../../../src/components/form/Form.tsx"],"sourcesContent":["import * as React from 'react'\nimport type {\n  DefaultValues,\n  FieldValues,\n  Mode,\n  SubmitErrorHandler,\n  SubmitHandler,\n  UseFormMethods\n} from 'react-hook-form'\nimport { FormProvider, useForm } from 'react-hook-form'\n\nimport {\n  type FormCustomContextType,\n  FormCustomContext\n} from './useFormCustomContext'\n\ntype FormProps<TFormData extends FieldValues> = Omit<\n  React.HTMLAttributes<HTMLFormElement>,\n  'onSubmit' | 'onError' | 'children'\n> & {\n  defaultValues?: DefaultValues<TFormData>\n  validationMode?: Mode\n  onSubmit: SubmitHandler<TFormData>\n  onError?: SubmitErrorHandler<TFormData>\n  noValidate?: boolean\n  children:\n    | React.ReactNode\n    | ((methods: UseFormMethods<TFormData>) => React.ReactNode)\n}\n\nexport const Form = <TFormData extends FieldValues>(\n  props: FormProps<TFormData> & FormCustomContextType\n) => {\n  const {\n    children,\n    defaultValues,\n    validationMode = 'onBlur',\n    onSubmit,\n    onError,\n    appearance,\n    theme,\n    ...rest\n  } = props\n\n  const methods = useForm<TFormData>({\n    defaultValues,\n    mode: validationMode\n  })\n\n  return (\n    <FormProvider {...methods}>\n      <FormCustomContext.Provider value={{ appearance, theme }}>\n        <form\n          aria-label=\"form\"\n          onSubmit={methods.handleSubmit(onSubmit, onError)}\n          {...rest}\n        >\n          {typeof children === 'function' ? children(methods) : children}\n        </form>\n      </FormCustomContext.Provider>\n    </FormProvider>\n  )\n}\n\nForm.displayName = 'Form'\n"],"mappings":";;;;AA8BA,IAAa,QACX,UACG;CACH,MAAM,EACJ,UACA,eACA,iBAAiB,UACjB,UACA,SACA,YACA,OACA,GAAG,SACD;CAEJ,MAAM,UAAU,QAAmB;EACjC;EACA,MAAM;EACP,CAAC;AAEF,QACE,wBAAA,cAAC,cAAiB,SAChB,wBAAA,cAAC,kBAAkB,UAAnB,EAA4B,OAAO;EAAE;EAAY;EAAO,EAQ3B,EAP3B,wBAAA,cAAC,QAAD;EACE,cAAW;EACX,UAAU,QAAQ,aAAa,UAAU,QAAQ;EACjD,GAAI;EAGC,EADJ,OAAO,aAAa,aAAa,SAAS,QAAQ,GAAG,SACjD,CACoB,CAChB;;AAInB,KAAK,cAAc"}
+{"version":3,"file":"Form.js","names":[],"sources":["../../../src/components/form/Form.tsx"],"sourcesContent":["import * as React from 'react'\nimport type {\n  DefaultValues,\n  FieldValues,\n  Mode,\n  SubmitErrorHandler,\n  SubmitHandler,\n  UseFormMethods\n} from 'react-hook-form'\nimport { FormProvider, useForm } from 'react-hook-form'\n\nimport {\n  type FormCustomContextType,\n  FormCustomContext\n} from './useFormCustomContext'\n\ntype FormProps<TFormData extends FieldValues> = Omit<\n  React.HTMLAttributes<HTMLFormElement>,\n  'onSubmit' | 'onError' | 'children'\n> & {\n  defaultValues?: DefaultValues<TFormData>\n  validationMode?: Mode\n  onSubmit: SubmitHandler<TFormData>\n  onError?: SubmitErrorHandler<TFormData>\n  noValidate?: boolean\n  children:\n    | React.ReactNode\n    | ((methods: UseFormMethods<TFormData>) => React.ReactNode)\n}\n\nexport const Form = <TFormData extends FieldValues>(\n  props: FormProps<TFormData> & FormCustomContextType\n) => {\n  const {\n    children,\n    defaultValues,\n    validationMode = 'onBlur',\n    onSubmit,\n    onError,\n    appearance,\n    theme,\n    ...rest\n  } = props\n\n  const methods = useForm<TFormData>({\n    defaultValues,\n    mode: validationMode\n  })\n\n  return (\n    <FormProvider {...methods}>\n      <FormCustomContext.Provider value={{ appearance, theme }}>\n        <form\n          aria-label=\"form\"\n          onSubmit={methods.handleSubmit(onSubmit, onError)}\n          {...rest}\n        >\n          {typeof children === 'function' ? children(methods) : children}\n        </form>\n      </FormCustomContext.Provider>\n    </FormProvider>\n  )\n}\n\nForm.displayName = 'Form'\n"],"mappings":";;;;;AA8BA,IAAa,QACX,UACG;CACH,MAAM,EACJ,UACA,eACA,iBAAiB,UACjB,UACA,SACA,YACA,OACA,GAAG,SACD;CAEJ,MAAM,UAAU,QAAmB;EACjC;EACA,MAAM;EACP,CAAC;AAEF,QACE,oBAAC,cAAD;EAAc,GAAI;YAChB,oBAAC,kBAAkB,UAAnB;GAA4B,OAAO;IAAE;IAAY;IAAO;aACtD,oBAAC,QAAD;IACE,cAAW;IACX,UAAU,QAAQ,aAAa,UAAU,QAAQ;IACjD,GAAI;cAEH,OAAO,aAAa,aAAa,SAAS,QAAQ,GAAG;IACjD,CAAA;GACoB,CAAA;EAChB,CAAA;;AAInB,KAAK,cAAc"}

package/dist/components/grid/Grid.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 declare const GridContainer: 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;
 }, "gap"> & {
     gap?: (0 | 1 | "0" | "1" | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "24" | 24 | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", 0 | 1 | "0" | "1" | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "24" | 24>>) | undefined;
 } & {

package/dist/components/grid/Grid.js

@@ -1,5 +1,6 @@
 import { cn, styled } from "../../styled.js";
-import * as React$1 from "react";
+import "react";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/grid/Grid.tsx
 var GridContainer = styled("div", {
 	base: ["grid"],
@@ -17,7 +18,7 @@ var GridContainer = styled("div", {
 		9: ["gap-20"]
 	} }
 }, { enabledResponsiveVariants: true });
-var Grid = ({ className, style, gap = "2", minItemSize, maxItemSize = "1fr", ...remainingProps }) => /* @__PURE__ */ React$1.createElement(GridContainer, {
+var Grid = ({ className, style, gap = "2", minItemSize, maxItemSize = "1fr", ...remainingProps }) => /* @__PURE__ */ jsx(GridContainer, {
 	...remainingProps,
 	style: {
 		...style,

package/dist/components/grid/Grid.js.map

@@ -1 +1 @@
-{"version":3,"file":"Grid.js","names":[],"sources":["../../../src/components/grid/Grid.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { cn } from '~/styled'\n\nconst GridContainer = styled(\n  'div',\n  {\n    base: ['grid'],\n    variants: {\n      gap: {\n        0: ['gap-0.5'],\n        1: ['gap-1'],\n        2: ['gap-2'],\n        3: ['gap-3'],\n        4: ['gap-4'],\n        24: ['gap-6'],\n        5: ['gap-8'],\n        6: ['gap-10'],\n        7: ['gap-12'],\n        8: ['gap-16'],\n        9: ['gap-20']\n      }\n    }\n  },\n  { enabledResponsiveVariants: true }\n)\n\ntype GridProps = React.ComponentProps<typeof GridContainer> & {\n  minItemSize?: string\n  maxItemSize?: string\n}\n\nexport const Grid = ({\n  className,\n  style,\n  gap = '2',\n  minItemSize,\n  maxItemSize = '1fr',\n  ...remainingProps\n}: GridProps) => (\n  <GridContainer\n    {...remainingProps}\n    style={{\n      ...style,\n      ...(minItemSize && { '--min-item-size': minItemSize }),\n      ...(maxItemSize && { '--max-item-size': maxItemSize })\n    }}\n    gap={gap}\n    className={cn(\n      minItemSize && [\n        'grid-cols-[repeat(auto-fit,minmax(var(--min-item-size,0),var(--max-item-size,0)))]'\n      ],\n      className\n    )}\n  />\n)\n\nGrid.displayName = 'Grid'\n"],"mappings":";;;AAKA,IAAM,gBAAgB,OACpB,OACA;CACE,MAAM,CAAC,OAAO;CACd,UAAU,EACR,KAAK;EACH,GAAG,CAAC,UAAU;EACd,GAAG,CAAC,QAAQ;EACZ,GAAG,CAAC,QAAQ;EACZ,GAAG,CAAC,QAAQ;EACZ,GAAG,CAAC,QAAQ;EACZ,IAAI,CAAC,QAAQ;EACb,GAAG,CAAC,QAAQ;EACZ,GAAG,CAAC,SAAS;EACb,GAAG,CAAC,SAAS;EACb,GAAG,CAAC,SAAS;EACb,GAAG,CAAC,SAAS;EACd,EACF;CACF,EACD,EAAE,2BAA2B,MAAM,CACpC;AAOD,IAAa,QAAQ,EACnB,WACA,OACA,MAAM,KACN,aACA,cAAc,OACd,GAAG,qBAEH,wBAAA,cAAC,eAAD;CACE,GAAI;CACJ,OAAO;EACL,GAAG;EACH,GAAI,eAAe,EAAE,mBAAmB,aAAa;EACrD,GAAI,eAAe,EAAE,mBAAmB,aAAa;EACtD;CACI;CACL,WAAW,GACT,eAAe,CACb,qFACD,EACD,UACD;CACD,CAAA;AAGJ,KAAK,cAAc"}
+{"version":3,"file":"Grid.js","names":[],"sources":["../../../src/components/grid/Grid.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { cn } from '~/styled'\n\nconst GridContainer = styled(\n  'div',\n  {\n    base: ['grid'],\n    variants: {\n      gap: {\n        0: ['gap-0.5'],\n        1: ['gap-1'],\n        2: ['gap-2'],\n        3: ['gap-3'],\n        4: ['gap-4'],\n        24: ['gap-6'],\n        5: ['gap-8'],\n        6: ['gap-10'],\n        7: ['gap-12'],\n        8: ['gap-16'],\n        9: ['gap-20']\n      }\n    }\n  },\n  { enabledResponsiveVariants: true }\n)\n\ntype GridProps = React.ComponentProps<typeof GridContainer> & {\n  minItemSize?: string\n  maxItemSize?: string\n}\n\nexport const Grid = ({\n  className,\n  style,\n  gap = '2',\n  minItemSize,\n  maxItemSize = '1fr',\n  ...remainingProps\n}: GridProps) => (\n  <GridContainer\n    {...remainingProps}\n    style={{\n      ...style,\n      ...(minItemSize && { '--min-item-size': minItemSize }),\n      ...(maxItemSize && { '--max-item-size': maxItemSize })\n    }}\n    gap={gap}\n    className={cn(\n      minItemSize && [\n        'grid-cols-[repeat(auto-fit,minmax(var(--min-item-size,0),var(--max-item-size,0)))]'\n      ],\n      className\n    )}\n  />\n)\n\nGrid.displayName = 'Grid'\n"],"mappings":";;;;AAKA,IAAM,gBAAgB,OACpB,OACA;CACE,MAAM,CAAC,OAAO;CACd,UAAU,EACR,KAAK;EACH,GAAG,CAAC,UAAU;EACd,GAAG,CAAC,QAAQ;EACZ,GAAG,CAAC,QAAQ;EACZ,GAAG,CAAC,QAAQ;EACZ,GAAG,CAAC,QAAQ;EACZ,IAAI,CAAC,QAAQ;EACb,GAAG,CAAC,QAAQ;EACZ,GAAG,CAAC,SAAS;EACb,GAAG,CAAC,SAAS;EACb,GAAG,CAAC,SAAS;EACb,GAAG,CAAC,SAAS;EACd,EACF;CACF,EACD,EAAE,2BAA2B,MAAM,CACpC;AAOD,IAAa,QAAQ,EACnB,WACA,OACA,MAAM,KACN,aACA,cAAc,OACd,GAAG,qBAEH,oBAAC,eAAD;CACE,GAAI;CACJ,OAAO;EACL,GAAG;EACH,GAAI,eAAe,EAAE,mBAAmB,aAAa;EACrD,GAAI,eAAe,EAAE,mBAAmB,aAAa;EACtD;CACI;CACL,WAAW,GACT,eAAe,CACb,qFACD,EACD,UACD;CACD,CAAA;AAGJ,KAAK,cAAc"}

package/dist/components/heading/Heading.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import type { Override } from '../../utilities/types';
 export declare const StyledHeading: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & {
-    ref?: ((instance: HTMLHeadingElement | null) => void) | React.RefObject<HTMLHeadingElement> | null | undefined;
+    ref?: ((instance: HTMLHeadingElement | 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<HTMLHeadingElement> | null | undefined;
 }, "size" | "noCapsize" | "weight"> & {
     size?: ("sm" | "md" | "lg" | "xs" | "xl" | "xxl" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg" | "xs" | "xl" | "xxl">>) | undefined;
     noCapsize?: (boolean | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", boolean>>) | undefined;

package/dist/components/heading/Heading.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/heading/Heading.tsx
 var StyledHeading = styled("h2", {
 	base: ["m-0"],
@@ -55,7 +56,7 @@ var StyledHeading = styled("h2", {
 		}
 	}
 }, { enabledResponsiveVariants: true });
-var Heading = React$1.forwardRef(({ size = "md", weight = "bold", ...remainingProps }, ref) => /* @__PURE__ */ React$1.createElement(StyledHeading, {
+var Heading = React$1.forwardRef(({ size = "md", weight = "bold", ...remainingProps }, ref) => /* @__PURE__ */ jsx(StyledHeading, {
 	ref,
 	size,
 	weight,

package/dist/components/heading/Heading.js.map

@@ -1 +1 @@
-{"version":3,"file":"Heading.js","names":[],"sources":["../../../src/components/heading/Heading.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\nimport type { Override } from '~/utilities/types'\n\nexport const StyledHeading = styled(\n  'h2',\n  {\n    base: ['m-0'],\n    variants: {\n      size: {\n        xs: ['font-body', 'text-md', 'leading-normal', 'capsize-[0.3864]'],\n        sm: ['font-body', 'text-lg', 'leading-[1.14]', 'capsize-[0.2078]'],\n        md: [\n          'font-display',\n          'text-xl',\n          'leading-[1.14]',\n          'tracking-[0.01em]',\n          'capsize-before-[0.2114]',\n          'capsize-after-[0.2634]'\n        ],\n        lg: [\n          'font-display',\n          'text-2xl',\n          'leading-[1.08]',\n          'tracking-[0.01em]',\n          'capsize-before-[0.1405]',\n          'capsize-after-[0.2405]'\n        ],\n        xl: [\n          'font-display',\n          'text-3xl',\n          'leading-[1.12]',\n          'capsize-before-[0.16]',\n          'capsize-after-[0.26]'\n        ],\n        xxl: [\n          'font-display',\n          'text-4xl',\n          'leading-none',\n          'capsize-before-[0.1]',\n          'capsize-after-[0.2]'\n        ]\n      },\n      noCapsize: {\n        true: ['capsize-none']\n      },\n      weight: {\n        medium: ['font-medium'],\n        bold: ['font-bold']\n      }\n    }\n  },\n  {\n    enabledResponsiveVariants: true\n  }\n)\n\nexport type HeadingProps = Override<\n  React.ComponentProps<typeof StyledHeading>,\n  {\n    as?:\n      | 'h1'\n      | 'h2'\n      | 'h3'\n      | 'h4'\n      | 'h5'\n      | 'h6'\n      | React.ComponentType\n      | React.ElementType\n  }\n>\n\nexport const Heading = React.forwardRef<HTMLHeadingElement, HeadingProps>(\n  ({ size = 'md', weight = 'bold', ...remainingProps }, ref) => (\n    <StyledHeading ref={ref} size={size} weight={weight} {...remainingProps} />\n  )\n)\n\nHeading.displayName = 'Heading'\n"],"mappings":";;;AAKA,IAAa,gBAAgB,OAC3B,MACA;CACE,MAAM,CAAC,MAAM;CACb,UAAU;EACR,MAAM;GACJ,IAAI;IAAC;IAAa;IAAW;IAAkB;IAAmB;GAClE,IAAI;IAAC;IAAa;IAAW;IAAkB;IAAmB;GAClE,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACD;GACD,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACD;GACD,IAAI;IACF;IACA;IACA;IACA;IACA;IACD;GACD,KAAK;IACH;IACA;IACA;IACA;IACA;IACD;GACF;EACD,WAAW,EACT,MAAM,CAAC,eAAe,EACvB;EACD,QAAQ;GACN,QAAQ,CAAC,cAAc;GACvB,MAAM,CAAC,YAAY;GACpB;EACF;CACF,EACD,EACE,2BAA2B,MAC5B,CACF;AAiBD,IAAa,UAAU,QAAM,YAC1B,EAAE,OAAO,MAAM,SAAS,QAAQ,GAAG,kBAAkB,QACpD,wBAAA,cAAC,eAAD;CAAoB;CAAW;CAAc;CAAQ,GAAI;CAAkB,CAAA,CAE9E;AAED,QAAQ,cAAc"}
+{"version":3,"file":"Heading.js","names":[],"sources":["../../../src/components/heading/Heading.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\nimport type { Override } from '~/utilities/types'\n\nexport const StyledHeading = styled(\n  'h2',\n  {\n    base: ['m-0'],\n    variants: {\n      size: {\n        xs: ['font-body', 'text-md', 'leading-normal', 'capsize-[0.3864]'],\n        sm: ['font-body', 'text-lg', 'leading-[1.14]', 'capsize-[0.2078]'],\n        md: [\n          'font-display',\n          'text-xl',\n          'leading-[1.14]',\n          'tracking-[0.01em]',\n          'capsize-before-[0.2114]',\n          'capsize-after-[0.2634]'\n        ],\n        lg: [\n          'font-display',\n          'text-2xl',\n          'leading-[1.08]',\n          'tracking-[0.01em]',\n          'capsize-before-[0.1405]',\n          'capsize-after-[0.2405]'\n        ],\n        xl: [\n          'font-display',\n          'text-3xl',\n          'leading-[1.12]',\n          'capsize-before-[0.16]',\n          'capsize-after-[0.26]'\n        ],\n        xxl: [\n          'font-display',\n          'text-4xl',\n          'leading-none',\n          'capsize-before-[0.1]',\n          'capsize-after-[0.2]'\n        ]\n      },\n      noCapsize: {\n        true: ['capsize-none']\n      },\n      weight: {\n        medium: ['font-medium'],\n        bold: ['font-bold']\n      }\n    }\n  },\n  {\n    enabledResponsiveVariants: true\n  }\n)\n\nexport type HeadingProps = Override<\n  React.ComponentProps<typeof StyledHeading>,\n  {\n    as?:\n      | 'h1'\n      | 'h2'\n      | 'h3'\n      | 'h4'\n      | 'h5'\n      | 'h6'\n      | React.ComponentType\n      | React.ElementType\n  }\n>\n\nexport const Heading = React.forwardRef<HTMLHeadingElement, HeadingProps>(\n  ({ size = 'md', weight = 'bold', ...remainingProps }, ref) => (\n    <StyledHeading ref={ref} size={size} weight={weight} {...remainingProps} />\n  )\n)\n\nHeading.displayName = 'Heading'\n"],"mappings":";;;;AAKA,IAAa,gBAAgB,OAC3B,MACA;CACE,MAAM,CAAC,MAAM;CACb,UAAU;EACR,MAAM;GACJ,IAAI;IAAC;IAAa;IAAW;IAAkB;IAAmB;GAClE,IAAI;IAAC;IAAa;IAAW;IAAkB;IAAmB;GAClE,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACD;GACD,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACD;GACD,IAAI;IACF;IACA;IACA;IACA;IACA;IACD;GACD,KAAK;IACH;IACA;IACA;IACA;IACA;IACD;GACF;EACD,WAAW,EACT,MAAM,CAAC,eAAe,EACvB;EACD,QAAQ;GACN,QAAQ,CAAC,cAAc;GACvB,MAAM,CAAC,YAAY;GACpB;EACF;CACF,EACD,EACE,2BAA2B,MAC5B,CACF;AAiBD,IAAa,UAAU,QAAM,YAC1B,EAAE,OAAO,MAAM,SAAS,QAAQ,GAAG,kBAAkB,QACpD,oBAAC,eAAD;CAAoB;CAAW;CAAc;CAAQ,GAAI;CAAkB,CAAA,CAE9E;AAED,QAAQ,cAAc"}

package/dist/components/icon/Icon.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Override } from '../../utilities/types';
 export declare const StyledIcon: React.ForwardRefExoticComponent<Omit<Omit<React.SVGProps<SVGSVGElement>, "ref"> & {
-    ref?: ((instance: SVGSVGElement | null) => void) | React.RefObject<SVGSVGElement> | null | undefined;
+    ref?: ((instance: SVGSVGElement | 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<SVGSVGElement> | null | undefined;
 }, "size"> & {
     size?: ("sm" | "md" | "lg" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg">>) | undefined;
 } & {

package/dist/components/icon/Icon.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/icon/Icon.tsx
 var StyledIcon = styled("svg", {
 	base: [
@@ -17,7 +18,7 @@ var StyledIcon = styled("svg", {
 		lg: ["size-8", "stroke-2"]
 	} }
 }, { enabledResponsiveVariants: true });
-var Icon = React$1.forwardRef(({ is: SVG, size = "md", ...remainingProps }, ref) => /* @__PURE__ */ React$1.createElement(StyledIcon, {
+var Icon = React$1.forwardRef(({ is: SVG, size = "md", ...remainingProps }, ref) => /* @__PURE__ */ jsx(StyledIcon, {
 	size,
 	"aria-hidden": "true",
 	...remainingProps,

package/dist/components/icon/Icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.js","names":[],"sources":["../../../src/components/icon/Icon.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { Override } from '~/utilities/types'\n\nexport const StyledIcon = styled(\n  'svg',\n  {\n    base: [\n      'inline-block',\n      'fill-none',\n      'shrink-0',\n      'stroke-current',\n      '[stroke-linecap:round]',\n      '[stroke-linejoin:round]',\n      'align-middle'\n    ],\n    variants: {\n      size: {\n        sm: ['size-4', 'stroke-[1.5]'],\n        md: ['size-6', 'stroke-[1.75]'],\n        lg: ['size-8', 'stroke-2']\n      }\n    }\n  },\n  { enabledResponsiveVariants: true }\n)\n\ntype IconProps = Override<\n  React.ComponentProps<typeof StyledIcon>,\n  {\n    is: React.FC<React.SVGProps<SVGSVGElement>>\n    as?: never\n  }\n>\n\nexport const Icon = React.forwardRef<SVGSVGElement, IconProps>(\n  ({ is: SVG, size = 'md', ...remainingProps }, ref) => (\n    <StyledIcon\n      size={size}\n      aria-hidden=\"true\"\n      {...remainingProps}\n      as={SVG}\n      ref={ref}\n    />\n  )\n)\n"],"mappings":";;;AAKA,IAAa,aAAa,OACxB,OACA;CACE,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,UAAU,eAAe;EAC9B,IAAI,CAAC,UAAU,gBAAgB;EAC/B,IAAI,CAAC,UAAU,WAAW;EAC3B,EACF;CACF,EACD,EAAE,2BAA2B,MAAM,CACpC;AAUD,IAAa,OAAO,QAAM,YACvB,EAAE,IAAI,KAAK,OAAO,MAAM,GAAG,kBAAkB,QAC5C,wBAAA,cAAC,YAAD;CACQ;CACN,eAAY;CACZ,GAAI;CACJ,IAAI;CACC;CACL,CAAA,CAEL"}
+{"version":3,"file":"Icon.js","names":[],"sources":["../../../src/components/icon/Icon.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { Override } from '~/utilities/types'\n\nexport const StyledIcon = styled(\n  'svg',\n  {\n    base: [\n      'inline-block',\n      'fill-none',\n      'shrink-0',\n      'stroke-current',\n      '[stroke-linecap:round]',\n      '[stroke-linejoin:round]',\n      'align-middle'\n    ],\n    variants: {\n      size: {\n        sm: ['size-4', 'stroke-[1.5]'],\n        md: ['size-6', 'stroke-[1.75]'],\n        lg: ['size-8', 'stroke-2']\n      }\n    }\n  },\n  { enabledResponsiveVariants: true }\n)\n\ntype IconProps = Override<\n  React.ComponentProps<typeof StyledIcon>,\n  {\n    is: React.FC<React.SVGProps<SVGSVGElement>>\n    as?: never\n  }\n>\n\nexport const Icon = React.forwardRef<SVGSVGElement, IconProps>(\n  ({ is: SVG, size = 'md', ...remainingProps }, ref) => (\n    <StyledIcon\n      size={size}\n      aria-hidden=\"true\"\n      {...remainingProps}\n      as={SVG}\n      ref={ref}\n    />\n  )\n)\n"],"mappings":";;;;AAKA,IAAa,aAAa,OACxB,OACA;CACE,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,UAAU,eAAe;EAC9B,IAAI,CAAC,UAAU,gBAAgB;EAC/B,IAAI,CAAC,UAAU,WAAW;EAC3B,EACF;CACF,EACD,EAAE,2BAA2B,MAAM,CACpC;AAUD,IAAa,OAAO,QAAM,YACvB,EAAE,IAAI,KAAK,OAAO,MAAM,GAAG,kBAAkB,QAC5C,oBAAC,YAAD;CACQ;CACN,eAAY;CACZ,GAAI;CACJ,IAAI;CACC;CACL,CAAA,CAEL"}

package/dist/components/image/Image.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Override } from '../../utilities/types';
 export declare const StyledImage: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "ref"> & {
-    ref?: ((instance: HTMLImageElement | null) => void) | React.RefObject<HTMLImageElement> | null | undefined;
+    ref?: ((instance: HTMLImageElement | 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<HTMLImageElement> | null | undefined;
 }, "fluid"> & {
     fluid?: boolean | undefined;
 } & {

package/dist/components/image/Image.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/image/Image.tsx
 var StyledImage = styled("img", {
 	base: ["align-middle", "max-w-full"],
@@ -11,7 +12,7 @@ var StyledImage = styled("img", {
 		"[[width]]:w-auto"
 	] } }
 });
-var Image = React$1.forwardRef((props, ref) => /* @__PURE__ */ React$1.createElement(StyledImage, {
+var Image = React$1.forwardRef((props, ref) => /* @__PURE__ */ jsx(StyledImage, {
 	...props,
 	ref
 }));

package/dist/components/image/Image.js.map

@@ -1 +1 @@
-{"version":3,"file":"Image.js","names":[],"sources":["../../../src/components/image/Image.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { Override } from '~/utilities/types'\n\n// default styling lifted from https://www.zachleat.com/web/fluid-images/#copy-and-paste\n// (potentially unnecessary now we've moved to Tailwind)\nexport const StyledImage = styled('img', {\n  base: ['align-middle', 'max-w-full'],\n  variants: {\n    fluid: {\n      true: [\n        \"[[src$='.svg']]:h-auto\",\n        \"[[src$='.svg']]:max-w-none\",\n        \"[[src$='.svg']]:w-full\",\n        '[[width]]:[[height]]:h-auto',\n        '[[width]]:w-auto'\n      ]\n    }\n  }\n})\n\ntype ImageProps = Override<\n  React.ComponentProps<typeof StyledImage>,\n  { as?: never }\n>\n\nexport const Image = React.forwardRef<HTMLImageElement, ImageProps>(\n  (props, ref) => <StyledImage {...props} ref={ref} />\n)\n\nImage.displayName = 'Image'\n"],"mappings":";;;AAOA,IAAa,cAAc,OAAO,OAAO;CACvC,MAAM,CAAC,gBAAgB,aAAa;CACpC,UAAU,EACR,OAAO,EACL,MAAM;EACJ;EACA;EACA;EACA;EACA;EACD,EACF,EACF;CACF,CAAC;AAOF,IAAa,QAAQ,QAAM,YACxB,OAAO,QAAQ,wBAAA,cAAC,aAAD;CAAa,GAAI;CAAY;CAAO,CAAA,CACrD;AAED,MAAM,cAAc"}
+{"version":3,"file":"Image.js","names":[],"sources":["../../../src/components/image/Image.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { Override } from '~/utilities/types'\n\n// default styling lifted from https://www.zachleat.com/web/fluid-images/#copy-and-paste\n// (potentially unnecessary now we've moved to Tailwind)\nexport const StyledImage = styled('img', {\n  base: ['align-middle', 'max-w-full'],\n  variants: {\n    fluid: {\n      true: [\n        \"[[src$='.svg']]:h-auto\",\n        \"[[src$='.svg']]:max-w-none\",\n        \"[[src$='.svg']]:w-full\",\n        '[[width]]:[[height]]:h-auto',\n        '[[width]]:w-auto'\n      ]\n    }\n  }\n})\n\ntype ImageProps = Override<\n  React.ComponentProps<typeof StyledImage>,\n  { as?: never }\n>\n\nexport const Image = React.forwardRef<HTMLImageElement, ImageProps>(\n  (props, ref) => <StyledImage {...props} ref={ref} />\n)\n\nImage.displayName = 'Image'\n"],"mappings":";;;;AAOA,IAAa,cAAc,OAAO,OAAO;CACvC,MAAM,CAAC,gBAAgB,aAAa;CACpC,UAAU,EACR,OAAO,EACL,MAAM;EACJ;EACA;EACA;EACA;EACA;EACD,EACF,EACF;CACF,CAAC;AAOF,IAAa,QAAQ,QAAM,YACxB,OAAO,QAAQ,oBAAC,aAAD;CAAa,GAAI;CAAY;CAAO,CAAA,CACrD;AAED,MAAM,cAAc"}

package/dist/components/inline-message/InlineMessage.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 declare const InlineMessageContainer: 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;
 }, "theme"> & {
     theme?: "neutral" | "success" | "warning" | "info" | "error" | undefined;
 } & {

package/dist/components/inline-message/InlineMessage.js

@@ -2,7 +2,8 @@ import { styled } from "../../styled.js";
 import { Icon } from "../icon/Icon.js";
 import { Text } from "../text/Text.js";
 import { INLINE_MESSAGE_ICONS } from "./InlineMessage.config.js";
-import * as React$1 from "react";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/inline-message/InlineMessage.tsx
 var InlineMessageContainer = styled("div", {
 	base: ["flex"],
@@ -14,19 +15,21 @@ var InlineMessageContainer = styled("div", {
 		error: ["text-danger"]
 	} }
 });
-var InlineMessage = ({ className, showIcon = true, theme = "error", size = "sm", children, ...rest }) => /* @__PURE__ */ React$1.createElement(InlineMessageContainer, {
+var InlineMessage = ({ className, showIcon = true, theme = "error", size = "sm", children, ...rest }) => /* @__PURE__ */ jsxs(InlineMessageContainer, {
 	theme,
 	className,
-	...rest
-}, showIcon && /* @__PURE__ */ React$1.createElement(Icon, {
-	size: "sm",
-	is: INLINE_MESSAGE_ICONS[theme],
-	className: "mr-2"
-}), /* @__PURE__ */ React$1.createElement(Text, {
-	as: "span",
-	size,
-	className: "translate-y-0.5"
-}, children));
+	...rest,
+	children: [showIcon && /* @__PURE__ */ jsx(Icon, {
+		size: "sm",
+		is: INLINE_MESSAGE_ICONS[theme],
+		className: "mr-2"
+	}), /* @__PURE__ */ jsx(Text, {
+		as: "span",
+		size,
+		className: "translate-y-0.5",
+		children
+	})]
+});
 //#endregion
 export { InlineMessage };
 

package/dist/components/inline-message/InlineMessage.js.map

@@ -1 +1 @@
-{"version":3,"file":"InlineMessage.js","names":[],"sources":["../../../src/components/inline-message/InlineMessage.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Icon } from '~/components/icon/Icon'\nimport { Text } from '~/components/text/Text'\nimport { styled } from '~/styled'\n\nimport { INLINE_MESSAGE_ICONS } from './InlineMessage.config'\nimport { InlineMessageTheme } from './InlineMessage.types'\n\nconst InlineMessageContainer = styled('div', {\n  base: ['flex'],\n  variants: {\n    theme: {\n      success: ['text-success'],\n      warning: ['[&_svg]:text-warning-dark', 'text-warning-text'],\n      info: ['text-info'],\n      neutral: ['text-grey-800'],\n      error: ['text-danger']\n    }\n  }\n})\n\ntype TInlineMessageProps = React.ComponentProps<\n  typeof InlineMessageContainer\n> & {\n  showIcon?: boolean\n  size?: 'xs' | 'sm' | 'md'\n}\n\nexport const InlineMessage = ({\n  className,\n  showIcon = true,\n  theme = 'error',\n  size = 'sm',\n  children,\n  ...rest\n}: TInlineMessageProps) => (\n  <InlineMessageContainer theme={theme} className={className} {...rest}>\n    {showIcon && (\n      <Icon\n        size=\"sm\"\n        is={INLINE_MESSAGE_ICONS[theme as InlineMessageTheme]}\n        className=\"mr-2\"\n      />\n    )}\n    <Text as=\"span\" size={size} className=\"translate-y-0.5\">\n      {children}\n    </Text>\n  </InlineMessageContainer>\n)\n"],"mappings":";;;;;;AASA,IAAM,yBAAyB,OAAO,OAAO;CAC3C,MAAM,CAAC,OAAO;CACd,UAAU,EACR,OAAO;EACL,SAAS,CAAC,eAAe;EACzB,SAAS,CAAC,6BAA6B,oBAAoB;EAC3D,MAAM,CAAC,YAAY;EACnB,SAAS,CAAC,gBAAgB;EAC1B,OAAO,CAAC,cAAc;EACvB,EACF;CACF,CAAC;AASF,IAAa,iBAAiB,EAC5B,WACA,WAAW,MACX,QAAQ,SACR,OAAO,MACP,UACA,GAAG,WAEH,wBAAA,cAAC,wBAAD;CAA+B;CAAkB;CAAW,GAAI;CAWvC,EAVtB,YACC,wBAAA,cAAC,MAAD;CACE,MAAK;CACL,IAAI,qBAAqB;CACzB,WAAU;CACV,CAAA,EAEJ,wBAAA,cAAC,MAAD;CAAM,IAAG;CAAa;CAAM,WAAU;CAE/B,EADJ,SACI,CACgB"}
+{"version":3,"file":"InlineMessage.js","names":[],"sources":["../../../src/components/inline-message/InlineMessage.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Icon } from '~/components/icon/Icon'\nimport { Text } from '~/components/text/Text'\nimport { styled } from '~/styled'\n\nimport { INLINE_MESSAGE_ICONS } from './InlineMessage.config'\nimport { InlineMessageTheme } from './InlineMessage.types'\n\nconst InlineMessageContainer = styled('div', {\n  base: ['flex'],\n  variants: {\n    theme: {\n      success: ['text-success'],\n      warning: ['[&_svg]:text-warning-dark', 'text-warning-text'],\n      info: ['text-info'],\n      neutral: ['text-grey-800'],\n      error: ['text-danger']\n    }\n  }\n})\n\ntype TInlineMessageProps = React.ComponentProps<\n  typeof InlineMessageContainer\n> & {\n  showIcon?: boolean\n  size?: 'xs' | 'sm' | 'md'\n}\n\nexport const InlineMessage = ({\n  className,\n  showIcon = true,\n  theme = 'error',\n  size = 'sm',\n  children,\n  ...rest\n}: TInlineMessageProps) => (\n  <InlineMessageContainer theme={theme} className={className} {...rest}>\n    {showIcon && (\n      <Icon\n        size=\"sm\"\n        is={INLINE_MESSAGE_ICONS[theme as InlineMessageTheme]}\n        className=\"mr-2\"\n      />\n    )}\n    <Text as=\"span\" size={size} className=\"translate-y-0.5\">\n      {children}\n    </Text>\n  </InlineMessageContainer>\n)\n"],"mappings":";;;;;;;AASA,IAAM,yBAAyB,OAAO,OAAO;CAC3C,MAAM,CAAC,OAAO;CACd,UAAU,EACR,OAAO;EACL,SAAS,CAAC,eAAe;EACzB,SAAS,CAAC,6BAA6B,oBAAoB;EAC3D,MAAM,CAAC,YAAY;EACnB,SAAS,CAAC,gBAAgB;EAC1B,OAAO,CAAC,cAAc;EACvB,EACF;CACF,CAAC;AASF,IAAa,iBAAiB,EAC5B,WACA,WAAW,MACX,QAAQ,SACR,OAAO,MACP,UACA,GAAG,WAEH,qBAAC,wBAAD;CAA+B;CAAkB;CAAW,GAAI;WAAhE,CACG,YACC,oBAAC,MAAD;EACE,MAAK;EACL,IAAI,qBAAqB;EACzB,WAAU;EACV,CAAA,EAEJ,oBAAC,MAAD;EAAM,IAAG;EAAa;EAAM,WAAU;EACnC;EACI,CAAA,CACgB"}