@atom-learning/components 8.0.2 → 9.0.0-beta.0

package/dist/components/field-wrapper/FieldWrapper.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ValidationOptions } from '../../components/form/validation';
+import type { ValidationOptions } from '../form/validation';
 import { type LabelProps } from '../label/Label';
 export type FieldWrapperProps = {
     className?: string;
@@ -20,7 +20,7 @@ export type FieldElementWrapperProps = Omit<FieldWrapperProps, 'fieldId'> & {
     name: string;
     validation?: ValidationOptions;
 };
-export declare const FieldWrapper: {
-    ({ children, error, fieldId, label, prompt, description, required, hideLabel, appearance, ...rest }: React.PropsWithChildren<FieldWrapperProps>): React.JSX.Element;
-    displayName: string;
-};
+export declare function FieldWrapper({ children, error, fieldId, label, prompt, description, required, hideLabel, appearance, ...rest }: React.PropsWithChildren<FieldWrapperProps>): React.JSX.Element;
+export declare namespace FieldWrapper {
+    var displayName: string;
+}

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

@@ -1,8 +1,8 @@
 import { cn } from "../../styled.js";
+import { Link } from "../link/Link.js";
 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 "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/field-wrapper/FieldWrapper.tsx

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,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"}
+{"version":3,"file":"FieldWrapper.js","names":[],"sources":["../../../src/components/field-wrapper/FieldWrapper.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { cn } from '../../styled'\nimport type { ValidationOptions } from '../form/validation'\nimport { InlineMessage } from '../inline-message/InlineMessage'\nimport { Label } from '../label/Label'\nimport { type LabelProps } from '../label/Label'\nimport { Link } from '../link/Link'\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":";;;;;;;;AA2BA,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,SACf;aAPF,CASE,oBAAC,OAAD;IAAO,SAAS;IAAmB;IAAsB;cACtD;GACI,CAAA,GACN,UACC,oBAAC,MAAD;IAAM,MAAM,QAAQ;IAAM,SAAS,QAAQ;IAAS,MAAK;cACtD,OAAO;GACJ,CAAA,CAEL;;EACJ,eAAe,oBAAC,aAAD;GAAa,WAAU;aAAQ;EAAyB,CAAA;EACvE;EACA,SAAS,oBAAC,eAAD;GAAe,WAAU;aAAQ;EAAqB,CAAA;CAC7D;;AAGP,aAAa,cAAc"}

package/dist/components/field-wrapper/InlineFieldWrapper.d.ts

@@ -8,8 +8,8 @@ type InlineFieldWrapperProps = {
     direction?: 'row' | 'reverse';
     description?: string;
 };
-export declare const InlineFieldWrapper: {
-    ({ align, children, className, description, direction, error, label, required }: React.PropsWithChildren<InlineFieldWrapperProps>): React.JSX.Element;
-    displayName: string;
-};
+export declare function InlineFieldWrapper({ align, children, className, description, direction, error, label, required }: React.PropsWithChildren<InlineFieldWrapperProps>): React.JSX.Element;
+export declare namespace InlineFieldWrapper {
+    var displayName: string;
+}
 export {};

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,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"}
+{"version":3,"file":"InlineFieldWrapper.js","names":[],"sources":["../../../src/components/field-wrapper/InlineFieldWrapper.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { cn } from '../../styled'\nimport { Checkbox } from '../checkbox/Checkbox'\nimport { InlineMessage } from '../inline-message/InlineMessage'\nimport { Label } from '../label/Label'\nimport { RadioButton } from '../radio-button/RadioButton'\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":";;;;;;;;;AAmBA,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,eACJ;cAEC;GACE,CAAA,CACN,GACA,KACI;;EACN,SAAS,oBAAC,eAAD;GAAe,WAAU;aAAQ;EAAqB,CAAA;EAC/D,eACC,oBAAC,aAAD;GACE,WAAW,GACT,QACA,cAAc,aAAa,QAC3B,cAAc,SAAS,MACzB;aAEC;EACU,CAAA;CAEZ;;AAGP,mBAAmB,cAAc"}

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

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import type { FileDropContextValue } from './types';
+export declare const FileDropContext: React.Context<FileDropContextValue>;

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

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

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

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

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

@@ -6,8 +6,8 @@ interface FileDropProps extends Omit<React.ComponentProps<'div'>, 'onDrop' | 're
     accept?: React.InputHTMLAttributes<HTMLInputElement>['accept'];
     multiple?: React.InputHTMLAttributes<HTMLInputElement>['multiple'];
 }
-export declare const FileDrop: {
-    ({ children, accept, multiple, onDrop, ...props }: FileDropProps): React.JSX.Element;
-    displayName: string;
-};
+export declare function FileDrop({ children, accept, multiple, onDrop, ...rest }: FileDropProps): React.JSX.Element;
+export declare namespace FileDrop {
+    var displayName: string;
+}
 export {};

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

@@ -1,5 +1,5 @@
 import { styled } from "../../styled.js";
-import { FileDropContext } from "./FileDropContext.js";
+import { FileDropContext } from "./FileDrop.context.js";
 import * as React$1 from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/file-drop/FileDrop.tsx
@@ -17,7 +17,7 @@ var StyledContainer = styled("div", { base: [
 	"cursor-pointer",
 	"**:pointer-events-none"
 ] });
-var FileDrop = ({ children, accept, multiple, onDrop, ...props }) => {
+var FileDrop = ({ children, accept, multiple, onDrop, ...rest }) => {
 	const [isDragging, setIsDragging] = React$1.useState(false);
 	const [files, setFiles] = React$1.useState([]);
 	const fileUploadInputRef = React$1.useRef(null);
@@ -53,7 +53,7 @@ var FileDrop = ({ children, accept, multiple, onDrop, ...props }) => {
 			role: "button",
 			onKeyDown: handleKeyDown,
 			tabIndex: 0,
-			...props,
+			...rest,
 			children: [typeof children === "function" ? children(value) : children, /* @__PURE__ */ jsx("input", {
 				type: "file",
 				ref: fileUploadInputRef,

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' | '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"}
+{"version":3,"file":"FileDrop.js","names":[],"sources":["../../../src/components/file-drop/FileDrop.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { FileDropContext } from './FileDrop.context'\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  ...rest\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        {...rest}\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":";;;;;AAkBA,IAAM,kBAAkB,OAAO,OAAO,EACpC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,EACF,CAAC;AAED,IAAa,YAAY,EACvB,UACA,QACA,UACA,QACA,GAAG,WACgB;CACnB,MAAM,CAAC,YAAY,iBAAiB,QAAM,SAAS,KAAK;CACxD,MAAM,CAAC,OAAO,YAAY,QAAM,SAAiB,CAAC,CAAC;CACnD,MAAM,qBAAqB,QAAM,OAAyB,IAAI;CAE9D,MAAM,kBAAkB,UAA2C;EACjE,MAAM,eAAe;EACrB,cAAc,IAAI;CACpB;CAEA,MAAM,wBAAwB,cAAc,KAAK;CAEjD,MAAM,cAAc,aAA8B;EAChD,IAAI,CAAC,UAAU;EAEf,cAAc,KAAK;EAEnB,MAAM,QAAQ,MAAM,KAAK,QAAQ;EACjC,OAAO,KAAK;EACZ,SAAS,KAAK;CAChB;CAEA,MAAM,iBAAiB,UAA+C;EACpE,IAAI,CAAC,SAAS,OAAO,CAAC,CAAC,SAAS,MAAM,GAAG,GACvC,mBAAmB,SAAS,MAAM;CAEtC;CAEA,MAAM,QAA8B;EAAE;EAAY;CAAM;CAExD,OACE,oBAAC,gBAAgB,UAAjB;EAAiC;YAC/B,qBAAC,iBAAD;GACE,YAAY;GACZ,aAAa;GACb,SAAS,UAAU;IACjB,MAAM,eAAe;IACrB,WAAW,MAAM,aAAa,KAAK;GACrC;GACA,eAAe,mBAAmB,SAAS,MAAM;GACjD,MAAK;GACL,WAAW;GACX,UAAU;GACV,GAAI;aAXN,CAaG,OAAO,aAAa,aAAa,SAAS,KAAK,IAAI,UACpD,oBAAC,SAAD;IACE,MAAK;IACL,KAAK;IACL,OAAO,EAAE,YAAY,SAAS;IACtB;IACE;IACV,WAAW,UAAU;KACnB,WAAW,MAAM,OAAO,KAAK;IAC/B;GACD,CAAA,CACc;;CACO,CAAA;AAE9B;AAEA,SAAS,cAAc"}

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

@@ -1,2 +1,2 @@
-import { FileDropContextValue } from './types';
+import type { FileDropContextValue } from './types';
 export declare const useFileDrop: () => FileDropContextValue;

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

@@ -1,7 +1,7 @@
-import { FileDropContext } from "./FileDropContext.js";
-import React from "react";
+import { FileDropContext } from "./FileDrop.context.js";
+import * as React$1 from "react";
 //#region src/components/file-drop/useFileDrop.ts
-var useFileDrop = () => React.useContext(FileDropContext);
+var useFileDrop = () => React$1.useContext(FileDropContext);
 //#endregion
 export { useFileDrop };
 

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,oBACX,MAAM,WAAW,gBAAgB"}
+{"version":3,"file":"useFileDrop.js","names":[],"sources":["../../../src/components/file-drop/useFileDrop.ts"],"sourcesContent":["import * as React from 'react'\n\nimport { FileDropContext } from './FileDrop.context'\nimport type { FileDropContextValue } from './types'\n\nexport const useFileDrop = (): FileDropContextValue =>\n  React.useContext(FileDropContext)\n"],"mappings":";;;AAKA,IAAa,oBACX,QAAM,WAAW,eAAe"}

package/dist/components/file-input/FileInput.d.ts

@@ -1,11 +1,12 @@
 import * as React from 'react';
+import type { StyledComponentProps } from '../../styled';
 import { Button } from '../button/Button';
-export type FileInputProps = React.ComponentProps<typeof Button> & {
+export type FileInputProps = Omit<StyledComponentProps<typeof Button, 'label'>, 'as'> & {
     onFileSelect: (selection: FileList | null) => void;
     accept?: string;
     multiple?: boolean;
 };
-export declare const FileInput: {
-    ({ accept, children, multiple, onFileSelect, ...rest }: FileInputProps): React.JSX.Element;
-    displayName: string;
-};
+export declare function FileInput({ accept, children, multiple, onFileSelect, ...rest }: FileInputProps): React.JSX.Element;
+export declare namespace FileInput {
+    var displayName: string;
+}

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

@@ -1,5 +1,5 @@
-import { Icon } from "../icon/Icon.js";
 import { Button } from "../button/Button.js";
+import { Icon } from "../icon/Icon.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Upload } from "@atom-learning/icons";

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,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"}
+{"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 type { StyledComponentProps } from '../../styled'\nimport { Button } from '../button/Button'\nimport { Icon } from '../icon/Icon'\n\n// FileInput always renders the Button as a <label>, so its public props are\n// Button's own props retargeted to the label element\nexport type FileInputProps = Omit<\n  StyledComponentProps<typeof Button, 'label'>,\n  'as'\n> & {\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":";;;;;;AAkBA,IAAa,aAAa,EACxB,QACA,UACA,WAAW,OACX,cACA,GAAG,WACiB;CACpB,MAAM,oBAAoB,UAA+C;EACvE,MAAM,EAAE,UAAU,MAAM;EAExB,aAAa,KAAK;CACpB;CAEA,OACE,qBAAC,QAAD;EAAQ,IAAG;EAAQ,GAAI;YAAvB;GACE,oBAAC,MAAD,EAAM,IAAI,OAAS,CAAA;GAClB;GACD,oBAAC,SAAD;IACE,MAAK;IACL,UAAU;IACF;IACE;IACV,QAAA;GACD,CAAA;EACK;;AAEZ;AAEA,UAAU,cAAc"}

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

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

package/dist/components/flex/Flex.js

@@ -80,7 +80,7 @@ var Flex = styled("div", {
 			9: ["gap-20"]
 		}
 	}
-}, { enabledResponsiveVariants: true });
+}, { enableResponsiveVariants: true });
 Flex.displayName = "Flex";
 //#endregion
 export { Flex };

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,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"}
+{"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  { enableResponsiveVariants: true }\n)\n\nFlex.displayName = 'Flex'\n"],"mappings":";;AAEA,IAAa,OAAO,OAClB,OACA;CACE,MAAM,CAAC,MAAM;CACb,UAAU;EACR,WAAW;GACT,KAAK,CAAC,UAAU;GAChB,eAAe,CAAC,kBAAkB;GAClC,QAAQ,CAAC,UAAU;GACnB,kBAAkB,CAAC,kBAAkB;GACrC,SAAS,CAAC,qBAAqB;GAC/B,SAAS,CAAC,qBAAqB;GAC/B,QAAQ,CAAC,oBAAoB;GAC7B,gBAAgB,CAAC,0BAA0B;GAC3C,OAAO,CAAC,mBAAmB;EAC7B;EACA,MAAM;GACJ,QAAQ,CAAC,aAAa;GACtB,MAAM,CAAC,WAAW;GAClB,gBAAgB,CAAC,mBAAmB;GACpC,SAAS,CAAC,qBAAqB;GAC/B,SAAS,CAAC,qBAAqB;GAC/B,QAAQ,CAAC,oBAAoB;GAC7B,gBAAgB,CAAC,0BAA0B;GAC3C,OAAO,CAAC,mBAAmB;EAC7B;EACA,SAAS;GACP,QAAQ,CAAC,gBAAgB;GACzB,QAAQ,CAAC,0BAA0B;GACnC,MAAM,CAAC,wBAAwB;GAC/B,OAAO,CAAC,eAAe;GACvB,QAAQ,CAAC,gBAAgB;GACzB,KAAK,CAAC,aAAa;GACnB,cAAc,CAAC,eAAe;GAC9B,YAAY,CAAC,aAAa;GAC1B,MAAM,CAAC,wBAAwB;GAC/B,OAAO,CAAC,yBAAyB;GACjC,iBAAiB,CAAC,iBAAiB;GACnC,gBAAgB,CAAC,gBAAgB;GACjC,gBAAgB,CAAC,gBAAgB;GACjC,SAAS,CAAC,iBAAiB;GAC3B,SAAS,CAAC,2BAA2B;GACrC,SAAS,CAAC,2BAA2B;GACrC,QAAQ,CAAC,0BAA0B;GACnC,gBAAgB,CAAC,gCAAgC;GACjD,OAAO,CAAC,yBAAyB;EACnC;EACA,OAAO;GACL,QAAQ,CAAC,sBAAsB;GAC/B,QAAQ,CAAC,sBAAsB;GAC/B,MAAM,CAAC,oBAAoB;GAC3B,QAAQ,CAAC,cAAc;GACvB,OAAO,CAAC,aAAa;GACrB,KAAK,CAAC,WAAW;GACjB,cAAc,CAAC,0BAA0B;GACzC,YAAY,CAAC,wBAAwB;GACrC,cAAc,CAAC,aAAa;GAC5B,YAAY,CAAC,WAAW;GACxB,UAAU,CAAC,gBAAgB;GAC3B,kBAAkB,CAAC,8BAA8B;GACjD,iBAAiB,CAAC,6BAA6B;GAC/C,SAAS,CAAC,eAAe;GACzB,SAAS,CAAC,uBAAuB;GACjC,SAAS,CAAC,uBAAuB;GACjC,QAAQ,CAAC,sBAAsB;GAC/B,gBAAgB,CAAC,4BAA4B;GAC7C,OAAO,CAAC,qBAAqB;EAC/B;EACA,KAAK;GACH,GAAG,CAAC,SAAS;GACb,GAAG,CAAC,OAAO;GACX,GAAG,CAAC,OAAO;GACX,GAAG,CAAC,OAAO;GACX,GAAG,CAAC,OAAO;GACX,IAAI,CAAC,OAAO;GACZ,GAAG,CAAC,OAAO;GACX,GAAG,CAAC,QAAQ;GACZ,GAAG,CAAC,QAAQ;GACZ,GAAG,CAAC,QAAQ;GACZ,GAAG,CAAC,QAAQ;EACd;CACF;AACF,GACA,EAAE,0BAA0B,KAAK,CACnC;AAEA,KAAK,cAAc"}

package/dist/components/form/Form.d.ts

@@ -9,8 +9,8 @@ type FormProps<TFormData extends FieldValues> = Omit<React.HTMLAttributes<HTMLFo
     noValidate?: boolean;
     children: React.ReactNode | ((methods: UseFormMethods<TFormData>) => React.ReactNode);
 };
-export declare const Form: {
-    <TFormData extends FieldValues>(props: FormProps<TFormData> & FormCustomContextType): React.JSX.Element;
-    displayName: string;
-};
+export declare function Form<TFormData extends FieldValues>(props: FormProps<TFormData> & FormCustomContextType): React.JSX.Element;
+export declare namespace Form {
+    var displayName: string;
+}
 export {};

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,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"}
+{"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;CACR,CAAC;CAED,OACE,oBAAC,cAAD;EAAc,GAAI;YAChB,oBAAC,kBAAkB,UAAnB;GAA4B,OAAO;IAAE;IAAY;GAAM;aACrD,oBAAC,QAAD;IACE,cAAW;IACX,UAAU,QAAQ,aAAa,UAAU,OAAO;IAChD,GAAI;cAEH,OAAO,aAAa,aAAa,SAAS,OAAO,IAAI;GAClD,CAAA;EACoB,CAAA;CAChB,CAAA;AAElB;AAEA,KAAK,cAAc"}

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,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"}
+{"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,eAAe;CAGlC,MAAM,YAAY,UAAU,MAAM,WAAW,CAAC,CAAC,OAAO,OAAO;CAE7D,MAAM,kBAAkB,MAAM,QAAQ,SAAS;CAE/C,OAAO,EACL,OAAO,UAAU,CAAC,EAAE,QACtB;AACF"}

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 type { InputProps } from '../input/Input'\n\nexport type FormCustomContextType =\n  | {\n      appearance?: InputProps['appearance']\n      theme?: InputProps['theme']\n    }\n  | undefined\n\nexport const FormCustomContext = React.createContext<FormCustomContextType>({\n  appearance: 'standard'\n})\n\nexport const useFormCustomContext = () => React.useContext(FormCustomContext)\n"],"mappings":";;AAWA,IAAa,oBAAoB,QAAM,cAAqC,EAC1E,YAAY,YACb,CAAC;AAEF,IAAa,6BAA6B,QAAM,WAAW,kBAAkB"}
+{"version":3,"file":"useFormCustomContext.js","names":[],"sources":["../../../src/components/form/useFormCustomContext.ts"],"sourcesContent":["import * as React from 'react'\n\nimport type { InputProps } from '../input/Input'\n\nexport type FormCustomContextType =\n  | {\n      appearance?: InputProps['appearance']\n      theme?: InputProps['theme']\n    }\n  | undefined\n\nexport const FormCustomContext = React.createContext<FormCustomContextType>({\n  appearance: 'standard'\n})\n\nexport const useFormCustomContext = () => React.useContext(FormCustomContext)\n"],"mappings":";;AAWA,IAAa,oBAAoB,QAAM,cAAqC,EAC1E,YAAY,WACd,CAAC;AAED,IAAa,6BAA6B,QAAM,WAAW,iBAAiB"}

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

@@ -1,15 +1,13 @@
 import * as React from 'react';
-declare const GridContainer: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "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;
-} & {
-    as?: React.ElementType;
+declare const GridContainer: import("../..").PolymorphicComponent<"div", {
+    gap?: ("0" | "1" | "2" | "24" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 24 | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "0" | "1" | "2" | "24" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 24>>) | undefined;
 }>;
 type GridProps = React.ComponentProps<typeof GridContainer> & {
     minItemSize?: string;
     maxItemSize?: string;
 };
-export declare const Grid: {
-    ({ className, style, gap, minItemSize, maxItemSize, ...remainingProps }: GridProps): React.JSX.Element;
-    displayName: string;
-};
+export declare function Grid({ className, style, gap, minItemSize, maxItemSize, ...rest }: GridProps): React.JSX.Element;
+export declare namespace Grid {
+    var displayName: string;
+}
 export {};

package/dist/components/grid/Grid.js

@@ -17,9 +17,9 @@ var GridContainer = styled("div", {
 		8: ["gap-16"],
 		9: ["gap-20"]
 	} }
-}, { enabledResponsiveVariants: true });
-var Grid = ({ className, style, gap = "2", minItemSize, maxItemSize = "1fr", ...remainingProps }) => /* @__PURE__ */ jsx(GridContainer, {
-	...remainingProps,
+}, { enableResponsiveVariants: true });
+var Grid = ({ className, style, gap = "2", minItemSize, maxItemSize = "1fr", ...rest }) => /* @__PURE__ */ jsx(GridContainer, {
+	...rest,
 	style: {
 		...style,
 		...minItemSize && { "--min-item-size": minItemSize },

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,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"}
+{"version":3,"file":"Grid.js","names":[],"sources":["../../../src/components/grid/Grid.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled, 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  { enableResponsiveVariants: 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  ...rest\n}: GridProps) => (\n  <GridContainer\n    {...rest}\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":";;;;AAIA,IAAM,gBAAgB,OACpB,OACA;CACE,MAAM,CAAC,MAAM;CACb,UAAU,EACR,KAAK;EACH,GAAG,CAAC,SAAS;EACb,GAAG,CAAC,OAAO;EACX,GAAG,CAAC,OAAO;EACX,GAAG,CAAC,OAAO;EACX,GAAG,CAAC,OAAO;EACX,IAAI,CAAC,OAAO;EACZ,GAAG,CAAC,OAAO;EACX,GAAG,CAAC,QAAQ;EACZ,GAAG,CAAC,QAAQ;EACZ,GAAG,CAAC,QAAQ;EACZ,GAAG,CAAC,QAAQ;CACd,EACF;AACF,GACA,EAAE,0BAA0B,KAAK,CACnC;AAOA,IAAa,QAAQ,EACnB,WACA,OACA,MAAM,KACN,aACA,cAAc,OACd,GAAG,WAEH,oBAAC,eAAD;CACE,GAAI;CACJ,OAAO;EACL,GAAG;EACH,GAAI,eAAe,EAAE,mBAAmB,YAAY;EACpD,GAAI,eAAe,EAAE,mBAAmB,YAAY;CACtD;CACK;CACL,WAAW,GACT,eAAe,CACb,oFACF,GACA,SACF;AACD,CAAA;AAGH,KAAK,cAAc"}

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

@@ -1,13 +1,10 @@
 import * as React from 'react';
 import type { Override } from '../../utilities/types';
-export declare const StyledHeading: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "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;
-    weight?: ("bold" | "medium" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "bold" | "medium">>) | undefined;
-} & {
-    as?: React.ElementType;
+export declare const Heading: import("../..").PolymorphicComponent<"h2", {
+    size?: ("lg" | "md" | "sm" | "xl" | "xs" | "xxl" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "lg" | "md" | "sm" | "xl" | "xs" | "xxl">>) | undefined;
+    noCapsize?: (boolean | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", boolean>>) | undefined;
+    weight?: ("bold" | "medium" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "bold" | "medium">>) | undefined;
 }>;
-export type HeadingProps = Override<React.ComponentProps<typeof StyledHeading>, {
+export type HeadingProps = Override<React.ComponentProps<typeof Heading>, {
     as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | React.ComponentType | React.ElementType;
 }>;
-export declare const Heading: React.ForwardRefExoticComponent<Omit<HeadingProps, "ref"> & React.RefAttributes<HTMLHeadingElement>>;

package/dist/components/heading/Heading.js

@@ -1,8 +1,7 @@
 import { styled } from "../../styled.js";
-import * as React$1 from "react";
-import { jsx } from "react/jsx-runtime";
+import "react";
 //#region src/components/heading/Heading.tsx
-var StyledHeading = styled("h2", {
+var Heading = styled("h2", {
 	base: ["m-0"],
 	variants: {
 		size: {
@@ -54,15 +53,12 @@ var StyledHeading = styled("h2", {
 			medium: ["font-medium"],
 			bold: ["font-bold"]
 		}
+	},
+	defaultVariants: {
+		size: "md",
+		weight: "bold"
 	}
-}, { enabledResponsiveVariants: true });
-var Heading = React$1.forwardRef(({ size = "md", weight = "bold", ...remainingProps }, ref) => /* @__PURE__ */ jsx(StyledHeading, {
-	ref,
-	size,
-	weight,
-	...remainingProps
-}));
-Heading.displayName = "Heading";
+}, { enableResponsiveVariants: true });
 //#endregion
 export { Heading };
 

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,oBAAC,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 Heading = 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    defaultVariants: {\n      size: 'md',\n      weight: 'bold'\n    }\n  },\n  {\n    enableResponsiveVariants: true\n  }\n)\n\nexport type HeadingProps = Override<\n  React.ComponentProps<typeof Heading>,\n  {\n    as?:\n      | 'h1'\n      | 'h2'\n      | 'h3'\n      | 'h4'\n      | 'h5'\n      | 'h6'\n      | React.ComponentType\n      | React.ElementType\n  }\n>\n"],"mappings":";;;AAKA,IAAa,UAAU,OACrB,MACA;CACE,MAAM,CAAC,KAAK;CACZ,UAAU;EACR,MAAM;GACJ,IAAI;IAAC;IAAa;IAAW;IAAkB;GAAkB;GACjE,IAAI;IAAC;IAAa;IAAW;IAAkB;GAAkB;GACjE,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;GACF;GACA,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;GACF;GACA,IAAI;IACF;IACA;IACA;IACA;IACA;GACF;GACA,KAAK;IACH;IACA;IACA;IACA;IACA;GACF;EACF;EACA,WAAW,EACT,MAAM,CAAC,cAAc,EACvB;EACA,QAAQ;GACN,QAAQ,CAAC,aAAa;GACtB,MAAM,CAAC,WAAW;EACpB;CACF;CACA,iBAAiB;EACf,MAAM;EACN,QAAQ;CACV;AACF,GACA,EACE,0BAA0B,KAC5B,CACF"}

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

@@ -1,13 +1,11 @@
 import * as React from 'react';
-import { Override } from '../../utilities/types';
-export declare const StyledIcon: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement>, "size"> & {
-    size?: ("sm" | "md" | "lg" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg">>) | undefined;
-} & {
-    as?: React.ElementType;
+import type { Override } from '../../utilities/types';
+export declare const StyledIcon: import("../..").PolymorphicComponent<"svg", {
+    size?: ("lg" | "md" | "sm" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "lg" | "md" | "sm">>) | undefined;
 }>;
 type IconProps = Override<React.ComponentProps<typeof StyledIcon>, {
     is: React.FC<React.SVGProps<SVGSVGElement>>;
     as?: never;
 }>;
-export declare const Icon: React.ForwardRefExoticComponent<Omit<IconProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
+export declare const Icon: ({ ref, is: SVG, size, ...rest }: IconProps) => React.JSX.Element;
 export {};

package/dist/components/icon/Icon.js

@@ -1,5 +1,5 @@
 import { styled } from "../../styled.js";
-import * as React$1 from "react";
+import "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/icon/Icon.tsx
 var StyledIcon = styled("svg", {
@@ -17,15 +17,15 @@ var StyledIcon = styled("svg", {
 		md: ["size-6", "stroke-[1.75]"],
 		lg: ["size-8", "stroke-2"]
 	} }
-}, { enabledResponsiveVariants: true });
-var Icon = React$1.forwardRef(({ is: SVG, size = "md", ...remainingProps }, ref) => /* @__PURE__ */ jsx(StyledIcon, {
+}, { enableResponsiveVariants: true });
+var Icon = ({ ref, is: SVG, size = "md", ...rest }) => /* @__PURE__ */ jsx(StyledIcon, {
 	size,
 	"aria-hidden": "true",
-	...remainingProps,
+	...rest,
 	as: SVG,
 	ref
-}));
+});
 //#endregion
-export { Icon };
+export { Icon, StyledIcon };
 
 //# sourceMappingURL=Icon.js.map

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,oBAAC,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 type { 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  { enableResponsiveVariants: 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 = ({ ref, is: SVG, size = 'md', ...rest }: IconProps) => (\n  <StyledIcon size={size} aria-hidden=\"true\" {...rest} as={SVG} ref={ref} />\n)\n"],"mappings":";;;;AAKA,IAAa,aAAa,OACxB,OACA;CACE,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,UAAU,cAAc;EAC7B,IAAI,CAAC,UAAU,eAAe;EAC9B,IAAI,CAAC,UAAU,UAAU;CAC3B,EACF;AACF,GACA,EAAE,0BAA0B,KAAK,CACnC;AAUA,IAAa,QAAQ,EAAE,KAAK,IAAI,KAAK,OAAO,MAAM,GAAG,WACnD,oBAAC,YAAD;CAAkB;CAAM,eAAY;CAAO,GAAI;CAAM,IAAI;CAAU;AAAM,CAAA"}

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

@@ -1,12 +1,16 @@
 import * as React from 'react';
-import { Override } from '../../utilities/types';
-export declare const StyledImage: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "fluid"> & {
+import type { Override } from '../../utilities/types';
+export declare const StyledImage: import("../..").StyledComponent<"img", {
     fluid?: boolean | undefined;
-} & {
-    as?: React.ElementType;
 }>;
 type ImageProps = Override<React.ComponentProps<typeof StyledImage>, {
-    as?: never;
+    children?: React.ReactNode;
 }>;
-export declare const Image: React.ForwardRefExoticComponent<Omit<ImageProps, "ref"> & React.RefAttributes<HTMLImageElement>>;
+export declare const Image: (({ children, ref, ...props }: ImageProps) => React.JSX.Element) & {
+    Credit: {
+        ({ author, sourceUrl, licenseName, licenseUrl }: import("./ImageCredit").ImageCreditProps): React.JSX.Element;
+        displayName: string;
+    };
+    displayName: string;
+};
 export {};