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

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

@@ -1,21 +1,21 @@
-import { InlineMessage as e } from "../inline-message/InlineMessage.js";
-import { Label as t } from "../label/Label.js";
-import { Description as n } from "./FieldDescription.js";
-import { Link as r } from "../link/Link.js";
-import i from "clsx";
-import * as a from "react";
+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 clsx from "clsx";
+import * as React$1 from "react";
 //#region src/components/field-wrapper/FieldWrapper.tsx
-var o = ({ children: o, error: s, fieldId: c, label: l, prompt: u, description: d, required: f, hideLabel: p, appearance: m, ...h }) => /* @__PURE__ */ a.createElement("div", h, /* @__PURE__ */ a.createElement("div", { className: i("mb-3", "flex", "items-center", "justify-between", p && "sr-only") }, /* @__PURE__ */ a.createElement(t, {
-	htmlFor: c,
-	required: f,
-	appearance: m
-}, l), u && /* @__PURE__ */ a.createElement(r, {
-	href: u?.link,
-	onClick: u?.onClick,
+var FieldWrapper = ({ children, error, fieldId, label, prompt, description, required, hideLabel, appearance, ...rest }) => /* @__PURE__ */ React$1.createElement("div", rest, /* @__PURE__ */ React$1.createElement("div", { className: clsx("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"
-}, u.label)), d && /* @__PURE__ */ a.createElement(n, { className: "mb-3" }, d), o, s && /* @__PURE__ */ a.createElement(e, { className: "mt-2" }, s));
-o.displayName = "FieldWrapper";
+}, prompt.label)), description && /* @__PURE__ */ React$1.createElement(Description, { className: "mb-3" }, description), children, error && /* @__PURE__ */ React$1.createElement(InlineMessage, { className: "mt-2" }, error));
+FieldWrapper.displayName = "FieldWrapper";
 //#endregion
-export { o as FieldWrapper };
+export { FieldWrapper };
 
 //# sourceMappingURL=FieldWrapper.js.map

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 clsx from 'clsx'\nimport * 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'\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={clsx(\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,KAAgB,EAC3B,aACA,UACA,YACA,UACA,WACA,gBACA,aACA,cACA,eACA,GAAG,QAEH,kBAAA,cAAC,OAAQ,GACP,kBAAA,cAAC,OAAD,EACE,WAAW,EACT,QACA,QACA,gBACA,mBACA,KAAa,UACd,EAUG,EARJ,kBAAA,cAAC,GAAD;CAAO,SAAS;CAAmB;CAAsB;CAEjD,EADL,EACK,EACP,KACC,kBAAA,cAAC,GAAD;CAAM,MAAM,GAAQ;CAAM,SAAS,GAAQ;CAAS,MAAK;CAElD,EADJ,EAAO,MACH,CAEL,EACL,KAAe,kBAAA,cAAC,GAAD,EAAa,WAAU,QAAkC,EAA1B,EAA0B,EACxE,GACA,KAAS,kBAAA,cAAC,GAAD,EAAe,WAAU,QAA8B,EAAtB,EAAsB,CAC7D;AAGR,EAAa,cAAc"}
+{"version":3,"file":"FieldWrapper.js","names":[],"sources":["../../../src/components/field-wrapper/FieldWrapper.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport * 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'\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={clsx(\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,KACT,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"}

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

@@ -1,19 +1,19 @@
-import { Checkbox as e } from "../checkbox/Checkbox.js";
-import { InlineMessage as t } from "../inline-message/InlineMessage.js";
-import { Label as n } from "../label/Label.js";
-import { RadioButton as r } from "../radio-button/RadioButton.js";
-import { Description as i } from "./FieldDescription.js";
-import a from "clsx";
-import * as o from "react";
+import { Checkbox } from "../checkbox/Checkbox.js";
+import { InlineMessage } from "../inline-message/InlineMessage.js";
+import { Label } from "../label/Label.js";
+import { RadioButton } from "../radio-button/RadioButton.js";
+import { Description } from "./FieldDescription.js";
+import clsx from "clsx";
+import * as React$1 from "react";
 //#region src/components/field-wrapper/InlineFieldWrapper.tsx
-var s = ({ align: s = "start", children: c, className: l, description: u, direction: d = "row", error: f, label: p, required: m }) => /* @__PURE__ */ o.createElement("div", { className: l }, /* @__PURE__ */ o.createElement(n, {
-	align: s,
-	direction: d,
-	required: m,
+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"
-}, o.Children.map(c, (t) => /* @__PURE__ */ o.createElement("div", { className: a(d === "reverse" && "ml-3", d === "row" && "mr-3", (t?.type === e || t?.type === r) && t?.props?.size !== "lg" && "translate-y-1") }, t)), p), f && /* @__PURE__ */ o.createElement(t, { className: "mt-2" }, f), u && /* @__PURE__ */ o.createElement(i, { className: a("mt-2", d === "reverse" && "mr-7", d === "row" && "ml-7") }, u));
-s.displayName = "InlineFieldWrapper";
+}, React$1.Children.map(children, (child) => /* @__PURE__ */ React$1.createElement("div", { className: clsx(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: clsx("mt-2", direction === "reverse" && "mr-7", direction === "row" && "ml-7") }, description));
+InlineFieldWrapper.displayName = "InlineFieldWrapper";
 //#endregion
-export { s as InlineFieldWrapper };
+export { InlineFieldWrapper };
 
 //# sourceMappingURL=InlineFieldWrapper.js.map

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 clsx from 'clsx'\nimport * 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'\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={clsx(\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={clsx(\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,KAAsB,EACjC,WAAQ,SACR,aACA,cACA,gBACA,eAAY,OACZ,UACA,UACA,kBAEA,kBAAA,cAAC,OAAD,EAAgB,cAkCV,EAjCJ,kBAAA,cAAC,GAAD;CACS;CACI;CACD;CACV,MAAK;CAgBC,EAdL,EAAM,SAAS,IAAI,IAAW,MAC7B,kBAAA,cAAC,OAAD,EACE,WAAW,EACT,MAAc,aAAa,QAC3B,MAAc,SAAS,SACtB,GAAO,SAAS,KAAY,GAAO,SAAS,MAC3C,GAAO,OAAO,SAAS,QACvB,gBACH,EAGG,EADH,EACG,CACN,EACD,EACK,EACP,KAAS,kBAAA,cAAC,GAAD,EAAe,WAAU,QAA8B,EAAtB,EAAsB,EAChE,KACC,kBAAA,cAAC,GAAD,EACE,WAAW,EACT,QACA,MAAc,aAAa,QAC3B,MAAc,SAAS,OACxB,EAGW,EADX,EACW,CAEZ;AAGR,EAAmB,cAAc"}
+{"version":3,"file":"InlineFieldWrapper.js","names":[],"sources":["../../../src/components/field-wrapper/InlineFieldWrapper.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport * 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'\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={clsx(\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={clsx(\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,KACT,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,KACT,QACA,cAAc,aAAa,QAC3B,cAAc,SAAS,OACxB,EAGW,EADX,YACW,CAEZ;AAGR,mBAAmB,cAAc"}

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

@@ -1,8 +1,8 @@
-import { styled as e } from "../../styled.js";
-import { FileDropContext as t } from "./FileDropContext.js";
-import * as n from "react";
+import { styled } from "../../styled.js";
+import { FileDropContext } from "./FileDropContext.js";
+import * as React$1 from "react";
 //#region src/components/file-drop/FileDrop.tsx
-var r = e("div", { base: [
+var StyledContainer = styled("div", { base: [
 	"flex",
 	"flex-col",
 	"gap-6",
@@ -15,44 +15,55 @@ var r = e("div", { base: [
 	"rounded-md",
 	"cursor-pointer",
 	"**:pointer-events-none"
-] }), i = ({ children: e, accept: i, multiple: a, onDrop: o, ...s }) => {
-	let [c, l] = n.useState(!1), [u, d] = n.useState([]), f = n.useRef(null), p = (e) => {
-		e.preventDefault(), l(!0);
-	}, m = () => l(!1), h = (e) => {
-		if (!e) return;
-		l(!1);
-		let t = Array.from(e);
-		o(t), d(t);
-	}, g = (e) => {
-		["Space", "Enter"].includes(e.key) && f.current?.click();
-	}, _ = {
-		isDragging: c,
-		files: u
+] });
+var FileDrop = ({ children, accept, multiple, onDrop, ...props }) => {
+	const [isDragging, setIsDragging] = React$1.useState(false);
+	const [files, setFiles] = React$1.useState([]);
+	const fileUploadInputRef = React$1.useRef(null);
+	const handleDragOver = (event) => {
+		event.preventDefault();
+		setIsDragging(true);
 	};
-	return /* @__PURE__ */ n.createElement(t.Provider, { value: _ }, /* @__PURE__ */ n.createElement(r, {
-		onDragOver: p,
-		onDragLeave: m,
-		onDrop: (e) => {
-			e.preventDefault(), h(e.dataTransfer.files);
+	const handleDragLeave = () => setIsDragging(false);
+	const handleDrop = (fileList) => {
+		if (!fileList) return;
+		setIsDragging(false);
+		const files = Array.from(fileList);
+		onDrop(files);
+		setFiles(files);
+	};
+	const handleKeyDown = (event) => {
+		if (["Space", "Enter"].includes(event.key)) fileUploadInputRef.current?.click();
+	};
+	const value = {
+		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: () => f.current?.click(),
+		onClick: () => fileUploadInputRef.current?.click(),
 		role: "button",
-		onKeyDown: g,
+		onKeyDown: handleKeyDown,
 		tabIndex: 0,
-		...s
-	}, typeof e == "function" ? e(_) : e, /* @__PURE__ */ n.createElement("input", {
+		...props
+	}, typeof children === "function" ? children(value) : children, /* @__PURE__ */ React$1.createElement("input", {
 		type: "file",
-		ref: f,
+		ref: fileUploadInputRef,
 		style: { visibility: "hidden" },
-		accept: i,
-		multiple: a,
-		onChange: (e) => {
-			h(e.target.files);
+		accept,
+		multiple,
+		onChange: (event) => {
+			handleDrop(event.target.files);
 		}
 	})));
 };
-i.displayName = "FileDrop";
+FileDrop.displayName = "FileDrop";
 //#endregion
-export { i as FileDrop };
+export { FileDrop };
 
 //# sourceMappingURL=FileDrop.js.map

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,IAAkB,EAAO,OAAO,EACpC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC,EAEW,KAAY,EACvB,aACA,WACA,aACA,WACA,GAAG,QACgB;CACnB,IAAM,CAAC,GAAY,KAAiB,EAAM,SAAS,GAAM,EACnD,CAAC,GAAO,KAAY,EAAM,SAAiB,EAAE,CAAC,EAC9C,IAAqB,EAAM,OAAyB,KAAK,EAEzD,KAAkB,MAA2C;AAEjE,EADA,EAAM,gBAAgB,EACtB,EAAc,GAAK;IAGf,UAAwB,EAAc,GAAM,EAE5C,KAAc,MAA8B;AAChD,MAAI,CAAC,EAAU;AAEf,IAAc,GAAM;EAEpB,IAAM,IAAQ,MAAM,KAAK,EAAS;AAElC,EADA,EAAO,EAAM,EACb,EAAS,EAAM;IAGX,KAAiB,MAA+C;AACpE,EAAI,CAAC,SAAS,QAAQ,CAAC,SAAS,EAAM,IAAI,IACxC,EAAmB,SAAS,OAAO;IAIjC,IAA8B;EAAE;EAAY;EAAO;AAEzD,QACE,kBAAA,cAAC,EAAgB,UAAjB,EAAiC,UA0BN,EAzBzB,kBAAA,cAAC,GAAD;EACE,YAAY;EACZ,aAAa;EACb,SAAS,MAAU;AAEjB,GADA,EAAM,gBAAgB,EACtB,EAAW,EAAM,aAAa,MAAM;;EAEtC,eAAe,EAAmB,SAAS,OAAO;EAClD,MAAK;EACL,WAAW;EACX,UAAU;EACV,GAAI;EAaY,EAXf,OAAO,KAAa,aAAa,EAAS,EAAM,GAAG,GACpD,kBAAA,cAAC,SAAD;EACE,MAAK;EACL,KAAK;EACL,OAAO,EAAE,YAAY,UAAU;EACvB;EACE;EACV,WAAW,MAAU;AACnB,KAAW,EAAM,OAAO,MAAM;;EAEhC,CAAA,CACc,CACO;;AAI/B,EAAS,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'\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"}

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

@@ -1,10 +1,10 @@
-import e from "react";
+import React from "react";
 //#region src/components/file-drop/FileDropContext.ts
-var t = e.createContext({
-	isDragging: !1,
+var FileDropContext = React.createContext({
+	isDragging: false,
 	files: []
 });
 //#endregion
-export { t as FileDropContext };
+export { FileDropContext };
 
 //# sourceMappingURL=FileDropContext.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"FileDropContext.js","names":[],"sources":["../../../src/components/file-drop/FileDropContext.ts"],"sourcesContent":["import React from 'react'\n\nimport { FileDropContextValue } from './types'\n\nexport const FileDropContext = React.createContext<FileDropContextValue>({\n  isDragging: false,\n  files: []\n})\n"],"mappings":";;AAIA,IAAa,IAAkB,EAAM,cAAoC;CACvE,YAAY;CACZ,OAAO,EAAE;CACV,CAAC"}
+{"version":3,"file":"FileDropContext.js","names":[],"sources":["../../../src/components/file-drop/FileDropContext.ts"],"sourcesContent":["import React from 'react'\n\nimport { FileDropContextValue } from './types'\n\nexport const FileDropContext = React.createContext<FileDropContextValue>({\n  isDragging: false,\n  files: []\n})\n"],"mappings":";;AAIA,IAAa,kBAAkB,MAAM,cAAoC;CACvE,YAAY;CACZ,OAAO,EAAE;CACV,CAAC"}

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

@@ -1,8 +1,8 @@
-import { FileDropContext as e } from "./FileDropContext.js";
-import t from "react";
+import { FileDropContext } from "./FileDropContext.js";
+import React from "react";
 //#region src/components/file-drop/useFileDrop.ts
-var n = () => t.useContext(e);
+var useFileDrop = () => React.useContext(FileDropContext);
 //#endregion
-export { n as useFileDrop };
+export { useFileDrop };
 
 //# sourceMappingURL=useFileDrop.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"useFileDrop.js","names":[],"sources":["../../../src/components/file-drop/useFileDrop.ts"],"sourcesContent":["import React from 'react'\n\nimport { FileDropContext } from './FileDropContext'\nimport { FileDropContextValue } from './types'\n\nexport const useFileDrop = (): FileDropContextValue =>\n  React.useContext(FileDropContext)\n"],"mappings":";;;AAKA,IAAa,UACX,EAAM,WAAW,EAAgB"}
+{"version":3,"file":"useFileDrop.js","names":[],"sources":["../../../src/components/file-drop/useFileDrop.ts"],"sourcesContent":["import React from 'react'\n\nimport { FileDropContext } from './FileDropContext'\nimport { FileDropContextValue } from './types'\n\nexport const useFileDrop = (): FileDropContextValue =>\n  React.useContext(FileDropContext)\n"],"mappings":";;;AAKA,IAAa,oBACX,MAAM,WAAW,gBAAgB"}

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

@@ -1,26 +1,26 @@
-import { Icon as e } from "../icon/Icon.js";
-import { Button as t } from "../button/Button.js";
-import * as n from "react";
-import { Upload as r } from "@atom-learning/icons";
+import { Icon } from "../icon/Icon.js";
+import { Button } from "../button/Button.js";
+import * as React$1 from "react";
+import { Upload } from "@atom-learning/icons";
 //#region src/components/file-input/FileInput.tsx
-var i = ({ accept: i, children: a, multiple: o = !1, onFileSelect: s, ...c }) => {
-	let l = (e) => {
-		let { files: t } = e.target;
-		s(t);
+var FileInput = ({ accept, children, multiple = false, onFileSelect, ...rest }) => {
+	const handleFileSelect = (event) => {
+		const { files } = event.target;
+		onFileSelect(files);
 	};
-	return /* @__PURE__ */ n.createElement(t, {
+	return /* @__PURE__ */ React$1.createElement(Button, {
 		as: "label",
-		...c
-	}, /* @__PURE__ */ n.createElement(e, { is: r }), a, /* @__PURE__ */ n.createElement("input", {
+		...rest
+	}, /* @__PURE__ */ React$1.createElement(Icon, { is: Upload }), children, /* @__PURE__ */ React$1.createElement("input", {
 		type: "file",
-		onChange: l,
-		accept: i,
-		multiple: o,
-		hidden: !0
+		onChange: handleFileSelect,
+		accept,
+		multiple,
+		hidden: true
 	}));
 };
-i.displayName = "FileInput";
+FileInput.displayName = "FileInput";
 //#endregion
-export { i as FileInput };
+export { FileInput };
 
 //# sourceMappingURL=FileInput.js.map

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,KAAa,EACxB,WACA,aACA,cAAW,IACX,iBACA,GAAG,QACiB;CACpB,IAAM,KAAoB,MAA+C;EACvE,IAAM,EAAE,aAAU,EAAM;AAExB,IAAa,EAAM;;AAGrB,QACE,kBAAA,cAAC,GAAD;EAAQ,IAAG;EAAQ,GAAI;EAUd,EATP,kBAAA,cAAC,GAAD,EAAM,IAAI,GAAU,CAAA,EACnB,GACD,kBAAA,cAAC,SAAD;EACE,MAAK;EACL,UAAU;EACF;EACE;EACV,QAAA;EACA,CAAA,CACK;;AAIb,EAAU,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,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"}

package/dist/components/flex/Flex.js

@@ -1,6 +1,6 @@
-import { styled as e } from "../../styled.js";
+import { styled } from "../../styled.js";
 //#region src/components/flex/Flex.tsx
-var t = e("div", {
+var Flex = styled("div", {
 	base: ["flex"],
 	variants: {
 		direction: {
@@ -80,9 +80,9 @@ var t = e("div", {
 			9: ["gap-20"]
 		}
 	}
-}, { enabledResponsiveVariants: !0 });
-t.displayName = "Flex";
+}, { enabledResponsiveVariants: true });
+Flex.displayName = "Flex";
 //#endregion
-export { t as Flex };
+export { Flex };
 
 //# sourceMappingURL=Flex.js.map

package/dist/components/flex/Flex.js.map

@@ -1 +1 @@
-{"version":3,"file":"Flex.js","names":[],"sources":["../../../src/components/flex/Flex.tsx"],"sourcesContent":["import { styled } from '~/styled'\n\nexport const Flex = styled(\n  'div',\n  {\n    base: ['flex'],\n    variants: {\n      direction: {\n        row: ['flex-row'],\n        'row-reverse': ['flex-row-reverse'],\n        column: ['flex-col'],\n        'column-reverse': ['flex-col-reverse'],\n        inherit: ['direction-[inherit]'],\n        initial: ['direction-[initial]'],\n        revert: ['direction-[revert]'],\n        'revert-layer': ['direction-[revert-layer]'],\n        unset: ['direction-[unset]']\n      },\n      wrap: {\n        nowrap: ['flex-nowrap'],\n        wrap: ['flex-wrap'],\n        'wrap-reverse': ['flex-wrap-reverse'],\n        inherit: ['[flex-wrap:inherit]'],\n        initial: ['[flex-wrap:initial]'],\n        revert: ['[flex-wrap:revert]'],\n        'revert-layer': ['[flex-wrap:revert-layer]'],\n        unset: ['[flex-wrap:unset]']\n      },\n      justify: {\n        normal: ['justify-normal'],\n        unsafe: ['[justify-content:unsafe]'],\n        safe: ['[justify-content:safe]'],\n        start: ['justify-start'],\n        center: ['justify-center'],\n        end: ['justify-end'],\n        'flex-start': ['justify-start'],\n        'flex-end': ['justify-end'],\n        left: ['[justify-content:left]'],\n        right: ['[justify-content:right]'],\n        'space-between': ['justify-between'],\n        'space-around': ['justify-around'],\n        'space-evenly': ['justify-evenly'],\n        stretch: ['justify-stretch'],\n        inherit: ['[justify-content:inherit]'],\n        initial: ['[justify-content:initial]'],\n        revert: ['[justify-content:revert]'],\n        'revert-layer': ['[justify-content:revert-layer]'],\n        unset: ['[justify-content:unset]']\n      },\n      align: {\n        normal: ['[align-items:normal]'],\n        unsafe: ['[align-items:unsafe]'],\n        safe: ['[align-items:safe]'],\n        center: ['items-center'],\n        start: ['items-start'],\n        end: ['items-end'],\n        'self-start': ['[align-items:self-start]'],\n        'self-end': ['[align-items:self-end]'],\n        'flex-start': ['items-start'],\n        'flex-end': ['items-end'],\n        baseline: ['items-baseline'],\n        'first baseline': ['[align-items:first baseline]'],\n        'last baseline': ['[align-items:last baseline]'],\n        stretch: ['items-stretch'],\n        inherit: ['[align-items:inherit]'],\n        initial: ['[align-items:initial]'],\n        revert: ['[align-items:revert]'],\n        'revert-layer': ['[align-items:revert-layer]'],\n        unset: ['[align-items:unset]']\n      },\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\nFlex.displayName = 'Flex'\n"],"mappings":";;AAEA,IAAa,IAAO,EAClB,OACA;CACE,MAAM,CAAC,OAAO;CACd,UAAU;EACR,WAAW;GACT,KAAK,CAAC,WAAW;GACjB,eAAe,CAAC,mBAAmB;GACnC,QAAQ,CAAC,WAAW;GACpB,kBAAkB,CAAC,mBAAmB;GACtC,SAAS,CAAC,sBAAsB;GAChC,SAAS,CAAC,sBAAsB;GAChC,QAAQ,CAAC,qBAAqB;GAC9B,gBAAgB,CAAC,2BAA2B;GAC5C,OAAO,CAAC,oBAAoB;GAC7B;EACD,MAAM;GACJ,QAAQ,CAAC,cAAc;GACvB,MAAM,CAAC,YAAY;GACnB,gBAAgB,CAAC,oBAAoB;GACrC,SAAS,CAAC,sBAAsB;GAChC,SAAS,CAAC,sBAAsB;GAChC,QAAQ,CAAC,qBAAqB;GAC9B,gBAAgB,CAAC,2BAA2B;GAC5C,OAAO,CAAC,oBAAoB;GAC7B;EACD,SAAS;GACP,QAAQ,CAAC,iBAAiB;GAC1B,QAAQ,CAAC,2BAA2B;GACpC,MAAM,CAAC,yBAAyB;GAChC,OAAO,CAAC,gBAAgB;GACxB,QAAQ,CAAC,iBAAiB;GAC1B,KAAK,CAAC,cAAc;GACpB,cAAc,CAAC,gBAAgB;GAC/B,YAAY,CAAC,cAAc;GAC3B,MAAM,CAAC,yBAAyB;GAChC,OAAO,CAAC,0BAA0B;GAClC,iBAAiB,CAAC,kBAAkB;GACpC,gBAAgB,CAAC,iBAAiB;GAClC,gBAAgB,CAAC,iBAAiB;GAClC,SAAS,CAAC,kBAAkB;GAC5B,SAAS,CAAC,4BAA4B;GACtC,SAAS,CAAC,4BAA4B;GACtC,QAAQ,CAAC,2BAA2B;GACpC,gBAAgB,CAAC,iCAAiC;GAClD,OAAO,CAAC,0BAA0B;GACnC;EACD,OAAO;GACL,QAAQ,CAAC,uBAAuB;GAChC,QAAQ,CAAC,uBAAuB;GAChC,MAAM,CAAC,qBAAqB;GAC5B,QAAQ,CAAC,eAAe;GACxB,OAAO,CAAC,cAAc;GACtB,KAAK,CAAC,YAAY;GAClB,cAAc,CAAC,2BAA2B;GAC1C,YAAY,CAAC,yBAAyB;GACtC,cAAc,CAAC,cAAc;GAC7B,YAAY,CAAC,YAAY;GACzB,UAAU,CAAC,iBAAiB;GAC5B,kBAAkB,CAAC,+BAA+B;GAClD,iBAAiB,CAAC,8BAA8B;GAChD,SAAS,CAAC,gBAAgB;GAC1B,SAAS,CAAC,wBAAwB;GAClC,SAAS,CAAC,wBAAwB;GAClC,QAAQ,CAAC,uBAAuB;GAChC,gBAAgB,CAAC,6BAA6B;GAC9C,OAAO,CAAC,sBAAsB;GAC/B;EACD,KAAK;GACH,GAAG,CAAC,UAAU;GACd,GAAG,CAAC,QAAQ;GACZ,GAAG,CAAC,QAAQ;GACZ,GAAG,CAAC,QAAQ;GACZ,GAAG,CAAC,QAAQ;GACZ,IAAI,CAAC,QAAQ;GACb,GAAG,CAAC,QAAQ;GACZ,GAAG,CAAC,SAAS;GACb,GAAG,CAAC,SAAS;GACb,GAAG,CAAC,SAAS;GACb,GAAG,CAAC,SAAS;GACd;EACF;CACF,EACD,EAAE,2BAA2B,IAAM,CACpC;AAED,EAAK,cAAc"}
+{"version":3,"file":"Flex.js","names":[],"sources":["../../../src/components/flex/Flex.tsx"],"sourcesContent":["import { styled } from '~/styled'\n\nexport const Flex = styled(\n  'div',\n  {\n    base: ['flex'],\n    variants: {\n      direction: {\n        row: ['flex-row'],\n        'row-reverse': ['flex-row-reverse'],\n        column: ['flex-col'],\n        'column-reverse': ['flex-col-reverse'],\n        inherit: ['direction-[inherit]'],\n        initial: ['direction-[initial]'],\n        revert: ['direction-[revert]'],\n        'revert-layer': ['direction-[revert-layer]'],\n        unset: ['direction-[unset]']\n      },\n      wrap: {\n        nowrap: ['flex-nowrap'],\n        wrap: ['flex-wrap'],\n        'wrap-reverse': ['flex-wrap-reverse'],\n        inherit: ['[flex-wrap:inherit]'],\n        initial: ['[flex-wrap:initial]'],\n        revert: ['[flex-wrap:revert]'],\n        'revert-layer': ['[flex-wrap:revert-layer]'],\n        unset: ['[flex-wrap:unset]']\n      },\n      justify: {\n        normal: ['justify-normal'],\n        unsafe: ['[justify-content:unsafe]'],\n        safe: ['[justify-content:safe]'],\n        start: ['justify-start'],\n        center: ['justify-center'],\n        end: ['justify-end'],\n        'flex-start': ['justify-start'],\n        'flex-end': ['justify-end'],\n        left: ['[justify-content:left]'],\n        right: ['[justify-content:right]'],\n        'space-between': ['justify-between'],\n        'space-around': ['justify-around'],\n        'space-evenly': ['justify-evenly'],\n        stretch: ['justify-stretch'],\n        inherit: ['[justify-content:inherit]'],\n        initial: ['[justify-content:initial]'],\n        revert: ['[justify-content:revert]'],\n        'revert-layer': ['[justify-content:revert-layer]'],\n        unset: ['[justify-content:unset]']\n      },\n      align: {\n        normal: ['[align-items:normal]'],\n        unsafe: ['[align-items:unsafe]'],\n        safe: ['[align-items:safe]'],\n        center: ['items-center'],\n        start: ['items-start'],\n        end: ['items-end'],\n        'self-start': ['[align-items:self-start]'],\n        'self-end': ['[align-items:self-end]'],\n        'flex-start': ['items-start'],\n        'flex-end': ['items-end'],\n        baseline: ['items-baseline'],\n        'first baseline': ['[align-items:first baseline]'],\n        'last baseline': ['[align-items:last baseline]'],\n        stretch: ['items-stretch'],\n        inherit: ['[align-items:inherit]'],\n        initial: ['[align-items:initial]'],\n        revert: ['[align-items:revert]'],\n        'revert-layer': ['[align-items:revert-layer]'],\n        unset: ['[align-items:unset]']\n      },\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\nFlex.displayName = 'Flex'\n"],"mappings":";;AAEA,IAAa,OAAO,OAClB,OACA;CACE,MAAM,CAAC,OAAO;CACd,UAAU;EACR,WAAW;GACT,KAAK,CAAC,WAAW;GACjB,eAAe,CAAC,mBAAmB;GACnC,QAAQ,CAAC,WAAW;GACpB,kBAAkB,CAAC,mBAAmB;GACtC,SAAS,CAAC,sBAAsB;GAChC,SAAS,CAAC,sBAAsB;GAChC,QAAQ,CAAC,qBAAqB;GAC9B,gBAAgB,CAAC,2BAA2B;GAC5C,OAAO,CAAC,oBAAoB;GAC7B;EACD,MAAM;GACJ,QAAQ,CAAC,cAAc;GACvB,MAAM,CAAC,YAAY;GACnB,gBAAgB,CAAC,oBAAoB;GACrC,SAAS,CAAC,sBAAsB;GAChC,SAAS,CAAC,sBAAsB;GAChC,QAAQ,CAAC,qBAAqB;GAC9B,gBAAgB,CAAC,2BAA2B;GAC5C,OAAO,CAAC,oBAAoB;GAC7B;EACD,SAAS;GACP,QAAQ,CAAC,iBAAiB;GAC1B,QAAQ,CAAC,2BAA2B;GACpC,MAAM,CAAC,yBAAyB;GAChC,OAAO,CAAC,gBAAgB;GACxB,QAAQ,CAAC,iBAAiB;GAC1B,KAAK,CAAC,cAAc;GACpB,cAAc,CAAC,gBAAgB;GAC/B,YAAY,CAAC,cAAc;GAC3B,MAAM,CAAC,yBAAyB;GAChC,OAAO,CAAC,0BAA0B;GAClC,iBAAiB,CAAC,kBAAkB;GACpC,gBAAgB,CAAC,iBAAiB;GAClC,gBAAgB,CAAC,iBAAiB;GAClC,SAAS,CAAC,kBAAkB;GAC5B,SAAS,CAAC,4BAA4B;GACtC,SAAS,CAAC,4BAA4B;GACtC,QAAQ,CAAC,2BAA2B;GACpC,gBAAgB,CAAC,iCAAiC;GAClD,OAAO,CAAC,0BAA0B;GACnC;EACD,OAAO;GACL,QAAQ,CAAC,uBAAuB;GAChC,QAAQ,CAAC,uBAAuB;GAChC,MAAM,CAAC,qBAAqB;GAC5B,QAAQ,CAAC,eAAe;GACxB,OAAO,CAAC,cAAc;GACtB,KAAK,CAAC,YAAY;GAClB,cAAc,CAAC,2BAA2B;GAC1C,YAAY,CAAC,yBAAyB;GACtC,cAAc,CAAC,cAAc;GAC7B,YAAY,CAAC,YAAY;GACzB,UAAU,CAAC,iBAAiB;GAC5B,kBAAkB,CAAC,+BAA+B;GAClD,iBAAiB,CAAC,8BAA8B;GAChD,SAAS,CAAC,gBAAgB;GAC1B,SAAS,CAAC,wBAAwB;GAClC,SAAS,CAAC,wBAAwB;GAClC,QAAQ,CAAC,uBAAuB;GAChC,gBAAgB,CAAC,6BAA6B;GAC9C,OAAO,CAAC,sBAAsB;GAC/B;EACD,KAAK;GACH,GAAG,CAAC,UAAU;GACd,GAAG,CAAC,QAAQ;GACZ,GAAG,CAAC,QAAQ;GACZ,GAAG,CAAC,QAAQ;GACZ,GAAG,CAAC,QAAQ;GACZ,IAAI,CAAC,QAAQ;GACb,GAAG,CAAC,QAAQ;GACZ,GAAG,CAAC,SAAS;GACb,GAAG,CAAC,SAAS;GACb,GAAG,CAAC,SAAS;GACb,GAAG,CAAC,SAAS;GACd;EACF;CACF,EACD,EAAE,2BAA2B,MAAM,CACpC;AAED,KAAK,cAAc"}

package/dist/components/form/Form.js

@@ -1,20 +1,21 @@
-import { FormCustomContext as e } from "./useFormCustomContext.js";
-import * as t from "react";
-import { FormProvider as n, useForm as r } from "react-hook-form";
+import { FormCustomContext } from "./useFormCustomContext.js";
+import * as React$1 from "react";
+import { FormProvider, useForm } from "react-hook-form";
 //#region src/components/form/Form.tsx
-var i = (i) => {
-	let { children: a, defaultValues: o, validationMode: s = "onBlur", onSubmit: c, onError: l, appearance: u, ...d } = i, f = r({
-		defaultValues: o,
-		mode: s
+var Form = (props) => {
+	const { children, defaultValues, validationMode = "onBlur", onSubmit, onError, appearance, ...rest } = props;
+	const methods = useForm({
+		defaultValues,
+		mode: validationMode
 	});
-	return /* @__PURE__ */ t.createElement(n, f, /* @__PURE__ */ t.createElement(e.Provider, { value: { appearance: u } }, /* @__PURE__ */ t.createElement("form", {
+	return /* @__PURE__ */ React$1.createElement(FormProvider, methods, /* @__PURE__ */ React$1.createElement(FormCustomContext.Provider, { value: { appearance } }, /* @__PURE__ */ React$1.createElement("form", {
 		"aria-label": "form",
-		onSubmit: f.handleSubmit(c, l),
-		...d
-	}, typeof a == "function" ? a(f) : a)));
+		onSubmit: methods.handleSubmit(onSubmit, onError),
+		...rest
+	}, typeof children === "function" ? children(methods) : children)));
 };
-i.displayName = "Form";
+Form.displayName = "Form";
 //#endregion
-export { i as Form };
+export { Form };
 
 //# sourceMappingURL=Form.js.map

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    ...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 }}>\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,KACX,MACG;CACH,IAAM,EACJ,aACA,kBACA,oBAAiB,UACjB,aACA,YACA,eACA,GAAG,MACD,GAEE,IAAU,EAAmB;EACjC;EACA,MAAM;EACP,CAAC;AAEF,QACE,kBAAA,cAAC,GAAiB,GAChB,kBAAA,cAAC,EAAkB,UAAnB,EAA4B,OAAO,EAAE,eAAY,EAQpB,EAP3B,kBAAA,cAAC,QAAD;EACE,cAAW;EACX,UAAU,EAAQ,aAAa,GAAU,EAAQ;EACjD,GAAI;EAGC,EADJ,OAAO,KAAa,aAAa,EAAS,EAAQ,GAAG,EACjD,CACoB,CAChB;;AAInB,EAAK,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    ...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 }}>\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,GAAG,SACD;CAEJ,MAAM,UAAU,QAAmB;EACjC;EACA,MAAM;EACP,CAAC;AAEF,QACE,wBAAA,cAAC,cAAiB,SAChB,wBAAA,cAAC,kBAAkB,UAAnB,EAA4B,OAAO,EAAE,YAAY,EAQpB,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"}

package/dist/components/form/useFieldError.js

@@ -1,11 +1,13 @@
-import { useFormContext as e } from "react-hook-form";
-import t from "dlv";
+import { useFormContext } from "react-hook-form";
+import delve from "dlv";
 //#region src/components/form/useFieldError.ts
-var n = (n) => {
-	let { errors: r } = e();
-	return { error: t(r, n.split(/[,[\].]+?/).filter(Boolean))?.message };
+var useFieldError = (fieldName) => {
+	const { errors } = useFormContext();
+	const fieldPath = fieldName.split(/[,[\].]+?/).filter(Boolean);
+	const getErrors = () => delve(errors, fieldPath);
+	return { error: getErrors()?.message };
 };
 //#endregion
-export { n as useFieldError };
+export { useFieldError };
 
 //# sourceMappingURL=useFieldError.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"useFieldError.js","names":[],"sources":["../../../src/components/form/useFieldError.ts"],"sourcesContent":["import delve from 'dlv'\nimport { useFormContext } from 'react-hook-form'\n\nexport const useFieldError = (fieldName: string) => {\n  const { errors } = useFormContext()\n\n  // in case of migration to a newer version of react-hook-form the path needs to updated to account for dynamic fields naming convention\n  const fieldPath = fieldName.split(/[,[\\].]+?/).filter(Boolean)\n\n  const getErrors = () => delve(errors, fieldPath)\n\n  return {\n    error: getErrors()?.message\n  }\n}\n"],"mappings":";;;AAGA,IAAa,KAAiB,MAAsB;CAClD,IAAM,EAAE,cAAW,GAAgB;AAOnC,QAAO,EACL,OAHsB,EAAM,GAFZ,EAAU,MAAM,YAAY,CAAC,OAAO,QAAQ,CAEd,EAG1B,SACrB"}
+{"version":3,"file":"useFieldError.js","names":[],"sources":["../../../src/components/form/useFieldError.ts"],"sourcesContent":["import delve from 'dlv'\nimport { useFormContext } from 'react-hook-form'\n\nexport const useFieldError = (fieldName: string) => {\n  const { errors } = useFormContext()\n\n  // in case of migration to a newer version of react-hook-form the path needs to updated to account for dynamic fields naming convention\n  const fieldPath = fieldName.split(/[,[\\].]+?/).filter(Boolean)\n\n  const getErrors = () => delve(errors, fieldPath)\n\n  return {\n    error: getErrors()?.message\n  }\n}\n"],"mappings":";;;AAGA,IAAa,iBAAiB,cAAsB;CAClD,MAAM,EAAE,WAAW,gBAAgB;CAGnC,MAAM,YAAY,UAAU,MAAM,YAAY,CAAC,OAAO,QAAQ;CAE9D,MAAM,kBAAkB,MAAM,QAAQ,UAAU;AAEhD,QAAO,EACL,OAAO,WAAW,EAAE,SACrB"}

package/dist/components/form/useFormCustomContext.js

@@ -1,7 +1,8 @@
-import * as e from "react";
+import * as React$1 from "react";
 //#region src/components/form/useFormCustomContext.ts
-var t = e.createContext({ appearance: "standard" }), n = () => e.useContext(t);
+var FormCustomContext = React$1.createContext({ appearance: "standard" });
+var useFormCustomContext = () => React$1.useContext(FormCustomContext);
 //#endregion
-export { t as FormCustomContext, n as useFormCustomContext };
+export { FormCustomContext, useFormCustomContext };
 
 //# sourceMappingURL=useFormCustomContext.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"useFormCustomContext.js","names":[],"sources":["../../../src/components/form/useFormCustomContext.ts"],"sourcesContent":["import * as React from 'react'\n\nimport { InputField } from '../input-field/InputField'\n\nexport type FormCustomContextType =\n  | {\n      appearance?: React.ComponentProps<typeof InputField>['appearance']\n    }\n  | undefined\n\nexport const FormCustomContext = React.createContext<FormCustomContextType>({\n  appearance: 'standard'\n})\n\nexport const useFormCustomContext = () => React.useContext(FormCustomContext)\n"],"mappings":";;AAUA,IAAa,IAAoB,EAAM,cAAqC,EAC1E,YAAY,YACb,CAAC,EAEW,UAA6B,EAAM,WAAW,EAAkB"}
+{"version":3,"file":"useFormCustomContext.js","names":[],"sources":["../../../src/components/form/useFormCustomContext.ts"],"sourcesContent":["import * as React from 'react'\n\nimport { InputField } from '../input-field/InputField'\n\nexport type FormCustomContextType =\n  | {\n      appearance?: React.ComponentProps<typeof InputField>['appearance']\n    }\n  | undefined\n\nexport const FormCustomContext = React.createContext<FormCustomContextType>({\n  appearance: 'standard'\n})\n\nexport const useFormCustomContext = () => React.useContext(FormCustomContext)\n"],"mappings":";;AAUA,IAAa,oBAAoB,QAAM,cAAqC,EAC1E,YAAY,YACb,CAAC;AAEF,IAAa,6BAA6B,QAAM,WAAW,kBAAkB"}

package/dist/components/grid/Grid.js

@@ -1,8 +1,8 @@
-import { styled as e } from "../../styled.js";
-import t from "clsx";
-import * as n from "react";
+import { styled } from "../../styled.js";
+import clsx from "clsx";
+import * as React$1 from "react";
 //#region src/components/grid/Grid.tsx
-var r = e("div", {
+var GridContainer = styled("div", {
 	base: ["grid"],
 	variants: { gap: {
 		0: ["gap-0.5"],
@@ -17,18 +17,19 @@ var r = e("div", {
 		8: ["gap-16"],
 		9: ["gap-20"]
 	} }
-}, { enabledResponsiveVariants: !0 }), i = ({ className: e, style: i, gap: a = "2", minItemSize: o, maxItemSize: s = "1fr", ...c }) => /* @__PURE__ */ n.createElement(r, {
-	...c,
+}, { enabledResponsiveVariants: true });
+var Grid = ({ className, style, gap = "2", minItemSize, maxItemSize = "1fr", ...remainingProps }) => /* @__PURE__ */ React$1.createElement(GridContainer, {
+	...remainingProps,
 	style: {
-		...i,
-		...o && { "--min-item-size": o },
-		...s && { "--max-item-size": s }
+		...style,
+		...minItemSize && { "--min-item-size": minItemSize },
+		...maxItemSize && { "--max-item-size": maxItemSize }
 	},
-	gap: a,
-	className: t(o && ["grid-cols-[repeat(auto-fit,minmax(var(--min-item-size,0),var(--max-item-size,0)))]"], e)
+	gap,
+	className: clsx(minItemSize && ["grid-cols-[repeat(auto-fit,minmax(var(--min-item-size,0),var(--max-item-size,0)))]"], className)
 });
-i.displayName = "Grid";
+Grid.displayName = "Grid";
 //#endregion
-export { i as Grid };
+export { Grid };
 
 //# sourceMappingURL=Grid.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Grid.js","names":[],"sources":["../../../src/components/grid/Grid.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport * as React from 'react'\n\nimport { styled } 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={clsx(\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,IAAgB,EACpB,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,IAAM,CACpC,EAOY,KAAQ,EACnB,cACA,UACA,SAAM,KACN,gBACA,iBAAc,OACd,GAAG,QAEH,kBAAA,cAAC,GAAD;CACE,GAAI;CACJ,OAAO;EACL,GAAG;EACH,GAAI,KAAe,EAAE,mBAAmB,GAAa;EACrD,GAAI,KAAe,EAAE,mBAAmB,GAAa;EACtD;CACI;CACL,WAAW,EACT,KAAe,CACb,qFACD,EACD,EACD;CACD,CAAA;AAGJ,EAAK,cAAc"}
+{"version":3,"file":"Grid.js","names":[],"sources":["../../../src/components/grid/Grid.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport * as React from 'react'\n\nimport { styled } 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={clsx(\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,KACT,eAAe,CACb,qFACD,EACD,UACD;CACD,CAAA;AAGJ,KAAK,cAAc"}

package/dist/components/heading/Heading.js

@@ -1,7 +1,7 @@
-import { styled as e } from "../../styled.js";
-import * as t from "react";
+import { styled } from "../../styled.js";
+import * as React$1 from "react";
 //#region src/components/heading/Heading.tsx
-var n = e("h2", {
+var StyledHeading = styled("h2", {
 	base: ["m-0"],
 	variants: {
 		size: {
@@ -54,14 +54,15 @@ var n = e("h2", {
 			bold: ["font-bold"]
 		}
 	}
-}, { enabledResponsiveVariants: !0 }), r = t.forwardRef(({ size: e = "md", weight: r = "bold", ...i }, a) => /* @__PURE__ */ t.createElement(n, {
-	ref: a,
-	size: e,
-	weight: r,
-	...i
+}, { enabledResponsiveVariants: true });
+var Heading = React$1.forwardRef(({ size = "md", weight = "bold", ...remainingProps }, ref) => /* @__PURE__ */ React$1.createElement(StyledHeading, {
+	ref,
+	size,
+	weight,
+	...remainingProps
 }));
-r.displayName = "Heading";
+Heading.displayName = "Heading";
 //#endregion
-export { r as Heading };
+export { Heading };
 
 //# sourceMappingURL=Heading.js.map

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,IAAgB,EAC3B,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,IAC5B,CACF,EAiBY,IAAU,EAAM,YAC1B,EAAE,UAAO,MAAM,YAAS,QAAQ,GAAG,KAAkB,MACpD,kBAAA,cAAC,GAAD;CAAoB;CAAW;CAAc;CAAQ,GAAI;CAAkB,CAAA,CAE9E;AAED,EAAQ,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,wBAAA,cAAC,eAAD;CAAoB;CAAW;CAAc;CAAQ,GAAI;CAAkB,CAAA,CAE9E;AAED,QAAQ,cAAc"}