@atom-learning/components 8.0.3 → 8.1.1

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  { 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  ...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,2BAA2B,KAAK,CACpC;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,9 +1,9 @@
 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;
+export declare const StyledHeading: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "noCapsize" | "size" | "weight"> & {
+    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;
 } & {
     as?: React.ElementType;
 }>;

package/dist/components/heading/Heading.js

@@ -56,14 +56,14 @@ var StyledHeading = styled("h2", {
 		}
 	}
 }, { enabledResponsiveVariants: true });
-var Heading = React$1.forwardRef(({ size = "md", weight = "bold", ...remainingProps }, ref) => /* @__PURE__ */ jsx(StyledHeading, {
+var Heading = React$1.forwardRef(({ size = "md", weight = "bold", ...rest }, ref) => /* @__PURE__ */ jsx(StyledHeading, {
 	ref,
 	size,
 	weight,
-	...remainingProps
+	...rest
 }));
 Heading.displayName = "Heading";
 //#endregion
-export { Heading };
+export { Heading, StyledHeading };
 
 //# 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,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 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', ...rest }, ref) => (\n    <StyledHeading ref={ref} size={size} weight={weight} {...rest} />\n  )\n)\n\nHeading.displayName = 'Heading'\n"],"mappings":";;;;AAKA,IAAa,gBAAgB,OAC3B,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;AACF,GACA,EACE,2BAA2B,KAC7B,CACF;AAiBA,IAAa,UAAU,QAAM,YAC1B,EAAE,OAAO,MAAM,SAAS,QAAQ,GAAG,QAAQ,QAC1C,oBAAC,eAAD;CAAoB;CAAW;CAAc;CAAQ,GAAI;AAAO,CAAA,CAEpE;AAEA,QAAQ,cAAc"}

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { Override } from '../../utilities/types';
+import type { 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;
+    size?: ("lg" | "md" | "sm" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "lg" | "md" | "sm">>) | undefined;
 } & {
     as?: React.ElementType;
 }>;

package/dist/components/icon/Icon.js

@@ -18,14 +18,14 @@ var StyledIcon = styled("svg", {
 		lg: ["size-8", "stroke-2"]
 	} }
 }, { enabledResponsiveVariants: true });
-var Icon = React$1.forwardRef(({ is: SVG, size = "md", ...remainingProps }, ref) => /* @__PURE__ */ jsx(StyledIcon, {
+var Icon = React$1.forwardRef(({ is: SVG, size = "md", ...rest }, ref) => /* @__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  { 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', ...rest }, ref) => (\n    <StyledIcon size={size} aria-hidden=\"true\" {...rest} as={SVG} ref={ref} />\n  )\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,2BAA2B,KAAK,CACpC;AAUA,IAAa,OAAO,QAAM,YACvB,EAAE,IAAI,KAAK,OAAO,MAAM,GAAG,QAAQ,QAClC,oBAAC,YAAD;CAAkB;CAAM,eAAY;CAAO,GAAI;CAAM,IAAI;CAAU;AAAM,CAAA,CAE7E"}

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Override } from '../../utilities/types';
+import type { Override } from '../../utilities/types';
 export declare const StyledImage: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "fluid"> & {
     fluid?: boolean | undefined;
 } & {
@@ -7,6 +7,12 @@ export declare const StyledImage: React.ForwardRefExoticComponent<Omit<React.Det
 }>;
 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: React.ForwardRefExoticComponent<Omit<ImageProps, "ref"> & React.RefAttributes<HTMLImageElement>> & {
+    Credit: {
+        ({ author, sourceUrl, licenseName, licenseUrl }: import("./ImageCredit").ImageCreditProps): React.JSX.Element;
+        displayName: string;
+    };
+};
 export {};

package/dist/components/image/Image.js

@@ -1,6 +1,7 @@
 import { styled } from "../../styled.js";
+import { ImageCredit } from "./ImageCredit.js";
 import * as React$1 from "react";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/image/Image.tsx
 var StyledImage = styled("img", {
 	base: ["align-middle", "max-w-full"],
@@ -12,12 +13,22 @@ var StyledImage = styled("img", {
 		"[[width]]:w-auto"
 	] } }
 });
-var Image = React$1.forwardRef((props, ref) => /* @__PURE__ */ jsx(StyledImage, {
-	...props,
-	ref
-}));
-Image.displayName = "Image";
+var ImageComponent = React$1.forwardRef(({ children, ...props }, ref) => {
+	if (!children) return /* @__PURE__ */ jsx(StyledImage, {
+		...props,
+		ref
+	});
+	return /* @__PURE__ */ jsxs("figure", {
+		className: "relative overflow-hidden",
+		children: [/* @__PURE__ */ jsx(StyledImage, {
+			...props,
+			ref
+		}), children]
+	});
+});
+ImageComponent.displayName = "Image";
+var Image = Object.assign(ImageComponent, { Credit: ImageCredit });
 //#endregion
-export { Image };
+export { Image, StyledImage };
 
 //# sourceMappingURL=Image.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Image.js","names":[],"sources":["../../../src/components/image/Image.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { Override } from '~/utilities/types'\n\n// default styling lifted from https://www.zachleat.com/web/fluid-images/#copy-and-paste\n// (potentially unnecessary now we've moved to Tailwind)\nexport const StyledImage = styled('img', {\n  base: ['align-middle', 'max-w-full'],\n  variants: {\n    fluid: {\n      true: [\n        \"[[src$='.svg']]:h-auto\",\n        \"[[src$='.svg']]:max-w-none\",\n        \"[[src$='.svg']]:w-full\",\n        '[[width]]:[[height]]:h-auto',\n        '[[width]]:w-auto'\n      ]\n    }\n  }\n})\n\ntype ImageProps = Override<\n  React.ComponentProps<typeof StyledImage>,\n  { as?: never }\n>\n\nexport const Image = React.forwardRef<HTMLImageElement, ImageProps>(\n  (props, ref) => <StyledImage {...props} ref={ref} />\n)\n\nImage.displayName = 'Image'\n"],"mappings":";;;;AAOA,IAAa,cAAc,OAAO,OAAO;CACvC,MAAM,CAAC,gBAAgB,aAAa;CACpC,UAAU,EACR,OAAO,EACL,MAAM;EACJ;EACA;EACA;EACA;EACA;EACD,EACF,EACF;CACF,CAAC;AAOF,IAAa,QAAQ,QAAM,YACxB,OAAO,QAAQ,oBAAC,aAAD;CAAa,GAAI;CAAY;CAAO,CAAA,CACrD;AAED,MAAM,cAAc"}
+{"version":3,"file":"Image.js","names":[],"sources":["../../../src/components/image/Image.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../styled'\nimport type { Override } from '../../utilities/types'\nimport { ImageCredit } from './ImageCredit'\n\n// default styling lifted from https://www.zachleat.com/web/fluid-images/#copy-and-paste\n// (potentially unnecessary now we've moved to Tailwind)\nexport const StyledImage = styled('img', {\n  base: ['align-middle', 'max-w-full'],\n  variants: {\n    fluid: {\n      true: [\n        \"[[src$='.svg']]:h-auto\",\n        \"[[src$='.svg']]:max-w-none\",\n        \"[[src$='.svg']]:w-full\",\n        '[[width]]:[[height]]:h-auto',\n        '[[width]]:w-auto'\n      ]\n    }\n  }\n})\n\ntype ImageProps = Override<\n  React.ComponentProps<typeof StyledImage>,\n  { as?: never; children?: React.ReactNode }\n>\n\nconst ImageComponent = React.forwardRef<HTMLImageElement, ImageProps>(\n  ({ children, ...props }, ref) => {\n    if (!children) {\n      return <StyledImage {...props} ref={ref} />\n    }\n\n    return (\n      <figure className=\"relative overflow-hidden\">\n        <StyledImage {...props} ref={ref} />\n        {children}\n      </figure>\n    )\n  }\n)\n\nImageComponent.displayName = 'Image'\n\nexport const Image = Object.assign(ImageComponent, {\n  Credit: ImageCredit\n})\n"],"mappings":";;;;;AAQA,IAAa,cAAc,OAAO,OAAO;CACvC,MAAM,CAAC,gBAAgB,YAAY;CACnC,UAAU,EACR,OAAO,EACL,MAAM;EACJ;EACA;EACA;EACA;EACA;CACF,EACF,EACF;AACF,CAAC;AAOD,IAAM,iBAAiB,QAAM,YAC1B,EAAE,UAAU,GAAG,SAAS,QAAQ;CAC/B,IAAI,CAAC,UACH,OAAO,oBAAC,aAAD;EAAa,GAAI;EAAY;CAAM,CAAA;CAG5C,OACE,qBAAC,UAAD;EAAQ,WAAU;YAAlB,CACE,oBAAC,aAAD;GAAa,GAAI;GAAY;EAAM,CAAA,GAClC,QACK;;AAEZ,CACF;AAEA,eAAe,cAAc;AAE7B,IAAa,QAAQ,OAAO,OAAO,gBAAgB,EACjD,QAAQ,YACV,CAAC"}

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

@@ -0,0 +1,15 @@
+import * as React from 'react';
+export type ImageCreditProps = {
+    /** Creator name, shown once the credit is revealed. */
+    author: string;
+    /** Link to the author / image source. */
+    sourceUrl?: string;
+    /** Human-readable license name, e.g. "CC BY 4.0". */
+    licenseName?: string;
+    /** Link to the license terms. */
+    licenseUrl?: string;
+};
+export declare function ImageCredit({ author, sourceUrl, licenseName, licenseUrl }: ImageCreditProps): React.JSX.Element;
+export declare namespace ImageCredit {
+    var displayName: string;
+}

package/dist/components/image/ImageCredit.js

@@ -0,0 +1,69 @@
+import { cn } from "../../styled.js";
+import { Icon } from "../icon/Icon.js";
+import { ActionIcon } from "../action-icon/ActionIcon.js";
+import { Link } from "../link/Link.js";
+import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Close, Info } from "@atom-learning/icons";
+//#region src/components/image/ImageCredit.tsx
+var overlayControlClasses = [
+	"not-disabled:hover:bg-black/75",
+	"focus:outline-none",
+	"focus-visible:ring-2",
+	"focus-visible:ring-white/70"
+];
+var overlayLinkClasses = [
+	"text-white",
+	"underline-offset-2",
+	"hover:text-white",
+	"focus:text-white",
+	"active:text-white"
+];
+var ImageCredit = ({ author, sourceUrl, licenseName, licenseUrl }) => {
+	const [expanded, setExpanded] = React$1.useState(false);
+	if (!expanded) return /* @__PURE__ */ jsx(ActionIcon, {
+		label: "Show image credit",
+		theme: "white",
+		isRounded: true,
+		hasTooltip: false,
+		onClick: () => setExpanded(true),
+		className: cn("absolute", "right-2", "bottom-2", "bg-black/60", "backdrop-blur-sm", overlayControlClasses),
+		children: /* @__PURE__ */ jsx(Icon, { is: Info })
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("absolute", "right-2", "bottom-2", "flex", "max-w-[calc(100%-1rem)]", "items-center", "gap-1", "rounded-md", "bg-black/60", "pl-2", "text-xs", "text-white", "backdrop-blur-sm"),
+		children: [/* @__PURE__ */ jsxs("figcaption", {
+			className: "flex min-w-0 flex-wrap items-center gap-x-1",
+			children: [sourceUrl ? /* @__PURE__ */ jsx(Link, {
+				href: sourceUrl,
+				size: "xs",
+				className: cn(overlayLinkClasses),
+				children: author
+			}) : /* @__PURE__ */ jsx("span", { children: author }), licenseName ? /* @__PURE__ */ jsxs("span", {
+				className: "flex items-center gap-x-1",
+				children: [/* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					children: "·"
+				}), licenseUrl ? /* @__PURE__ */ jsx(Link, {
+					href: licenseUrl,
+					size: "xs",
+					className: cn(overlayLinkClasses),
+					children: licenseName
+				}) : /* @__PURE__ */ jsx("span", { children: licenseName })]
+			}) : null]
+		}), /* @__PURE__ */ jsx(ActionIcon, {
+			label: "Hide credit",
+			theme: "white",
+			isRounded: true,
+			hasTooltip: false,
+			onClick: () => setExpanded(false),
+			className: cn(overlayControlClasses),
+			children: /* @__PURE__ */ jsx(Icon, { is: Close })
+		})]
+	});
+};
+ImageCredit.displayName = "Image.Credit";
+//#endregion
+export { ImageCredit };
+
+//# sourceMappingURL=ImageCredit.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ImageCredit.js","names":[],"sources":["../../../src/components/image/ImageCredit.tsx"],"sourcesContent":["import { Close, Info } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { cn } from '../../styled'\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\nimport { Link } from '../link/Link'\n\nexport type ImageCreditProps = {\n  /** Creator name, shown once the credit is revealed. */\n  author: string\n  /** Link to the author / image source. */\n  sourceUrl?: string\n  /** Human-readable license name, e.g. \"CC BY 4.0\". */\n  licenseName?: string\n  /** Link to the license terms. */\n  licenseUrl?: string\n}\n\n// Shared surface/interaction styles for the controls overlaid on the image.\nconst overlayControlClasses = [\n  'not-disabled:hover:bg-black/75',\n  'focus:outline-none',\n  'focus-visible:ring-2',\n  'focus-visible:ring-white/70'\n]\nconst overlayLinkClasses = [\n  'text-white',\n  'underline-offset-2',\n  'hover:text-white',\n  'focus:text-white',\n  'active:text-white'\n]\n\nexport const ImageCredit = ({\n  author,\n  sourceUrl,\n  licenseName,\n  licenseUrl\n}: ImageCreditProps) => {\n  const [expanded, setExpanded] = React.useState(false)\n\n  if (!expanded) {\n    return (\n      <ActionIcon\n        label=\"Show image credit\"\n        theme=\"white\"\n        isRounded\n        hasTooltip={false}\n        onClick={() => setExpanded(true)}\n        className={cn(\n          'absolute',\n          'right-2',\n          'bottom-2',\n          'bg-black/60',\n          'backdrop-blur-sm',\n          overlayControlClasses\n        )}\n      >\n        <Icon is={Info} />\n      </ActionIcon>\n    )\n  }\n\n  return (\n    <div\n      className={cn(\n        'absolute',\n        'right-2',\n        'bottom-2',\n        'flex',\n        'max-w-[calc(100%-1rem)]',\n        'items-center',\n        'gap-1',\n        'rounded-md',\n        'bg-black/60',\n        'pl-2',\n        'text-xs',\n        'text-white',\n        'backdrop-blur-sm'\n      )}\n    >\n      {/* Author and licence sit on one line when they fit, and wrap onto\n          separate rows (each kept whole) when they don't. */}\n      <figcaption className=\"flex min-w-0 flex-wrap items-center gap-x-1\">\n        {sourceUrl ? (\n          <Link href={sourceUrl} size=\"xs\" className={cn(overlayLinkClasses)}>\n            {author}\n          </Link>\n        ) : (\n          <span>{author}</span>\n        )}\n        {licenseName ? (\n          <span className=\"flex items-center gap-x-1\">\n            <span aria-hidden=\"true\">·</span>\n            {licenseUrl ? (\n              <Link\n                href={licenseUrl}\n                size=\"xs\"\n                className={cn(overlayLinkClasses)}\n              >\n                {licenseName}\n              </Link>\n            ) : (\n              <span>{licenseName}</span>\n            )}\n          </span>\n        ) : null}\n      </figcaption>\n      <ActionIcon\n        label=\"Hide credit\"\n        theme=\"white\"\n        isRounded\n        hasTooltip={false}\n        onClick={() => setExpanded(false)}\n        className={cn(overlayControlClasses)}\n      >\n        <Icon is={Close} />\n      </ActionIcon>\n    </div>\n  )\n}\n\nImageCredit.displayName = 'Image.Credit'\n"],"mappings":";;;;;;;;AAoBA,IAAM,wBAAwB;CAC5B;CACA;CACA;CACA;AACF;AACA,IAAM,qBAAqB;CACzB;CACA;CACA;CACA;CACA;AACF;AAEA,IAAa,eAAe,EAC1B,QACA,WACA,aACA,iBACsB;CACtB,MAAM,CAAC,UAAU,eAAe,QAAM,SAAS,KAAK;CAEpD,IAAI,CAAC,UACH,OACE,oBAAC,YAAD;EACE,OAAM;EACN,OAAM;EACN,WAAA;EACA,YAAY;EACZ,eAAe,YAAY,IAAI;EAC/B,WAAW,GACT,YACA,WACA,YACA,eACA,oBACA,qBACF;YAEA,oBAAC,MAAD,EAAM,IAAI,KAAO,CAAA;CACP,CAAA;CAIhB,OACE,qBAAC,OAAD;EACE,WAAW,GACT,YACA,WACA,YACA,QACA,2BACA,gBACA,SACA,cACA,eACA,QACA,WACA,cACA,kBACF;YAfF,CAmBE,qBAAC,cAAD;GAAY,WAAU;aAAtB,CACG,YACC,oBAAC,MAAD;IAAM,MAAM;IAAW,MAAK;IAAK,WAAW,GAAG,kBAAkB;cAC9D;GACG,CAAA,IAEN,oBAAC,QAAD,EAAA,UAAO,OAAa,CAAA,GAErB,cACC,qBAAC,QAAD;IAAM,WAAU;cAAhB,CACE,oBAAC,QAAD;KAAM,eAAY;eAAO;IAAO,CAAA,GAC/B,aACC,oBAAC,MAAD;KACE,MAAM;KACN,MAAK;KACL,WAAW,GAAG,kBAAkB;eAE/B;IACG,CAAA,IAEN,oBAAC,QAAD,EAAA,UAAO,YAAkB,CAAA,CAEvB;QACJ,IACM;MACZ,oBAAC,YAAD;GACE,OAAM;GACN,OAAM;GACN,WAAA;GACA,YAAY;GACZ,eAAe,YAAY,KAAK;GAChC,WAAW,GAAG,qBAAqB;aAEnC,oBAAC,MAAD,EAAM,IAAI,MAAQ,CAAA;EACR,CAAA,CACT;;AAET;AAEA,YAAY,cAAc"}

package/dist/components/index.d.ts

@@ -2,9 +2,9 @@ export type { ValidationOptions } from './form/validation';
 export { Accordion } from './accordion/Accordion';
 export { ActionIcon } from './action-icon/ActionIcon';
 export { AlertDialog } from './alert-dialog/AlertDialog';
-export { useAlert, AlertProvider } from './alert-dialog/alert-context/AlertContext';
+export { useAlert, AlertProvider } from './alert-dialog/AlertDialog.context';
 export { Avatar } from './avatar/Avatar';
-export { Badge, type TBadgeProps } from './badge/Badge';
+export { Badge, type BadgeProps } from './badge/Badge';
 export { BannerRegular } from './banner/banner-regular/BannerRegular';
 export { BannerSlim } from './banner/banner-slim/BannerSlim';
 export { Box } from './box/Box';
@@ -21,7 +21,7 @@ export { ChipToggleGroup } from './chip-toggle-group';
 export { Combobox } from './combobox/Combobox';
 export { CreatePasswordField } from './create-password-field/CreatePasswordField';
 export { DataTable } from './data-table/DataTable';
-export { useDataTable } from './data-table/DataTableContext';
+export { useDataTable } from './data-table/DataTable.context';
 export { DateField } from './date-field/DateField';
 export { DateInput } from './date-input/DateInput';
 export { Dialog } from './dialog/Dialog';
@@ -71,7 +71,7 @@ export { SelectField } from './select-field/SelectField';
 export { SelectMenu } from './select-menu/SelectMenu';
 export { SelectMenuField } from './select-menu-field/SelectMenuField';
 export { SideBar } from './side-bar/SideBar';
-export { useSidebarState } from './side-bar/SideBarContext';
+export { useSidebarState } from './side-bar/SideBar.context';
 export { Slider } from './slider/Slider';
 export { SliderField } from './slider-field/SliderField';
 export * as Sortable from './sortable';

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

@@ -1,3 +1,3 @@
 import * as React from 'react';
-import { InlineMessageTheme } from './InlineMessage.types';
+import type { InlineMessageTheme } from './InlineMessage.types';
 export declare const INLINE_MESSAGE_ICONS: Record<InlineMessageTheme, React.FC<React.SVGProps<SVGSVGElement>>>;

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

@@ -1,3 +1,4 @@
+import "react";
 import { Danger, Error, Info, OkCircle } from "@atom-learning/icons";
 //#region src/components/inline-message/InlineMessage.config.ts
 var INLINE_MESSAGE_ICONS = {

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

@@ -1 +1 @@
-{"version":3,"file":"InlineMessage.config.js","names":[],"sources":["../../../src/components/inline-message/InlineMessage.config.ts"],"sourcesContent":["import { Danger, Error, Info, OkCircle } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { InlineMessageTheme } from './InlineMessage.types'\n\nexport const INLINE_MESSAGE_ICONS: Record<\n  InlineMessageTheme,\n  React.FC<React.SVGProps<SVGSVGElement>>\n> = {\n  success: OkCircle,\n  warning: Danger,\n  info: Info,\n  neutral: Info,\n  error: Error\n}\n"],"mappings":";;AAKA,IAAa,uBAGT;CACF,SAAS;CACT,SAAS;CACT,MAAM;CACN,SAAS;CACT,OAAO;CACR"}
+{"version":3,"file":"InlineMessage.config.js","names":[],"sources":["../../../src/components/inline-message/InlineMessage.config.ts"],"sourcesContent":["import { Danger, Error, Info, OkCircle } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport type { InlineMessageTheme } from './InlineMessage.types'\n\nexport const INLINE_MESSAGE_ICONS: Record<\n  InlineMessageTheme,\n  React.FC<React.SVGProps<SVGSVGElement>>\n> = {\n  success: OkCircle,\n  warning: Danger,\n  info: Info,\n  neutral: Info,\n  error: Error\n}\n"],"mappings":";;;AAKA,IAAa,uBAGT;CACF,SAAS;CACT,SAAS;CACT,MAAM;CACN,SAAS;CACT,OAAO;AACT"}

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

@@ -1,12 +1,12 @@
 import * as React from 'react';
 declare const InlineMessageContainer: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "theme"> & {
-    theme?: "neutral" | "success" | "warning" | "info" | "error" | undefined;
+    theme?: "error" | "info" | "neutral" | "success" | "warning" | undefined;
 } & {
     as?: React.ElementType;
 }>;
-type TInlineMessageProps = React.ComponentProps<typeof InlineMessageContainer> & {
+type InlineMessageProps = React.ComponentProps<typeof InlineMessageContainer> & {
     showIcon?: boolean;
     size?: 'xs' | 'sm' | 'md';
 };
-export declare const InlineMessage: ({ className, showIcon, theme, size, children, ...rest }: TInlineMessageProps) => React.JSX.Element;
+export declare const InlineMessage: ({ className, showIcon, theme, size, children, ...rest }: InlineMessageProps) => React.JSX.Element;
 export {};

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

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

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

@@ -1,22 +1,22 @@
 import * as React from 'react';
-export declare const InputBackground: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "appearance" | "size" | "theme" | "disabled" | "state"> & {
-    appearance?: "standard" | "modern" | undefined;
-    size?: "sm" | "md" | "lg" | "xl" | undefined;
+export declare const InputBackground: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "appearance" | "disabled" | "size" | "state" | "theme"> & {
+    appearance?: "modern" | "standard" | undefined;
+    size?: "lg" | "md" | "sm" | "xl" | undefined;
     disabled?: boolean | undefined;
     state?: "error" | undefined;
     theme?: "grey" | "white" | undefined;
 } & {
     as?: React.ElementType;
 }>;
-declare const StyledInputText: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "size" | "noCapsize" | "weight" | "family"> & {
-    size?: ("sm" | "md" | "lg" | "xs" | "xl" | "2xl" | "3xl" | "4xl" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg" | "xs" | "xl" | "2xl" | "3xl" | "4xl">>) | undefined;
-    noCapsize?: (boolean | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", boolean>>) | undefined;
-    weight?: ("bold" | "normal" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "bold" | "normal">>) | undefined;
-    family?: ("display" | "body" | "mono" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "display" | "body" | "mono">>) | undefined;
+declare const StyledInputText: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "family" | "noCapsize" | "size" | "weight"> & {
+    size?: ("2xl" | "3xl" | "4xl" | "lg" | "md" | "sm" | "xl" | "xs" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "2xl" | "3xl" | "4xl" | "lg" | "md" | "sm" | "xl" | "xs">>) | undefined;
+    noCapsize?: (boolean | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", boolean>>) | undefined;
+    weight?: ("bold" | "normal" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "bold" | "normal">>) | undefined;
+    family?: ("body" | "display" | "mono" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "body" | "display" | "mono">>) | undefined;
 } & {
     as?: React.ElementType;
 }, "as"> & {
-    as?: "blockquote" | "caption" | "dd" | "dt" | "figcaption" | "li" | "p" | "span" | "legend" | React.ComponentType | React.ElementType;
+    as?: 'blockquote' | 'caption' | 'dd' | 'dt' | 'figcaption' | 'li' | 'p' | 'span' | 'legend' | React.ComponentType | React.ElementType;
 }, "ref"> & React.RefAttributes<HTMLParagraphElement>, never> & {
     as?: React.ElementType;
 }>;

package/dist/components/input/Input.js

@@ -102,23 +102,21 @@ var InputText = React$1.forwardRef(({ type = "text", size, ...rest }, ref) => {
 	});
 });
 InputText.displayName = "InputText";
-var Input = React$1.forwardRef(({ className, size = "md", appearance = "standard", theme, state, disabled, style, ...rest }, ref) => {
-	return /* @__PURE__ */ jsx(InputBackground, {
+var Input = React$1.forwardRef(({ className, size = "md", appearance = "standard", theme, state, disabled, style, ...rest }, ref) => /* @__PURE__ */ jsx(InputBackground, {
+	size,
+	appearance,
+	theme,
+	disabled,
+	state,
+	className,
+	style,
+	children: /* @__PURE__ */ jsx(InputText, {
 		size,
-		appearance,
-		theme,
+		ref,
 		disabled,
-		state,
-		className,
-		style,
-		children: /* @__PURE__ */ jsx(InputText, {
-			size,
-			ref,
-			disabled,
-			...rest
-		})
-	});
-});
+		...rest
+	})
+}));
 Input.displayName = "Input";
 //#endregion
 export { Input, InputBackground, InputText };

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

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

package/dist/components/input-field/InputField.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { FieldElementWrapperProps } from '../../components/field-wrapper/FieldWrapper';
-import { InputProps } from '../../components/input/Input';
+import { type FieldElementWrapperProps } from '../field-wrapper/FieldWrapper';
+import { type InputProps } from '../input/Input';
 type InputFieldProps = InputProps & FieldElementWrapperProps;
-export declare const InputField: {
-    ({ className, label, name, validation, prompt, description, hideLabel, appearance, theme, ...remainingProps }: InputFieldProps): React.JSX.Element;
-    displayName: string;
-};
+export declare function InputField({ className, label, name, validation, prompt, description, hideLabel, appearance, theme, ...rest }: InputFieldProps): React.JSX.Element;
+export declare namespace InputField {
+    var displayName: string;
+}
 export {};

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

@@ -6,7 +6,7 @@ import "react";
 import { jsx } from "react/jsx-runtime";
 import { useFormContext } from "react-hook-form";
 //#region src/components/input-field/InputField.tsx
-var InputField = ({ className, label, name, validation, prompt, description, hideLabel, appearance, theme, ...remainingProps }) => {
+var InputField = ({ className, label, name, validation, prompt, description, hideLabel, appearance, theme, ...rest }) => {
 	const { register } = useFormContext();
 	const context = useFormCustomContext();
 	const { error } = useFieldError(name);
@@ -30,7 +30,7 @@ var InputField = ({ className, label, name, validation, prompt, description, hid
 			appearance: formAppearance,
 			theme: formTheme,
 			...error && { state: "error" },
-			...remainingProps
+			...rest
 		})
 	});
 };

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

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

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

@@ -13,21 +13,21 @@ export declare const KeyboardShortcut: React.ForwardRefExoticComponent<React.HTM
     targetWindow?: boolean;
     onKeyDown?: (e: KeyboardEventWindowOrElement) => void;
 } & React.RefAttributes<HTMLDivElement>>;
-declare const StyledKeyboardShortcutIndicator: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "size" | "noCapsize" | "weight" | "family"> & {
-    size?: ("sm" | "md" | "lg" | "xs" | "xl" | "2xl" | "3xl" | "4xl" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg" | "xs" | "xl" | "2xl" | "3xl" | "4xl">>) | undefined;
-    noCapsize?: (boolean | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", boolean>>) | undefined;
-    weight?: ("bold" | "normal" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "bold" | "normal">>) | undefined;
-    family?: ("display" | "body" | "mono" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "display" | "body" | "mono">>) | undefined;
+declare const StyledKeyboardShortcutIndicator: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "family" | "noCapsize" | "size" | "weight"> & {
+    size?: ("2xl" | "3xl" | "4xl" | "lg" | "md" | "sm" | "xl" | "xs" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "2xl" | "3xl" | "4xl" | "lg" | "md" | "sm" | "xl" | "xs">>) | undefined;
+    noCapsize?: (boolean | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", boolean>>) | undefined;
+    weight?: ("bold" | "normal" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "bold" | "normal">>) | undefined;
+    family?: ("body" | "display" | "mono" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "body" | "display" | "mono">>) | undefined;
 } & {
     as?: React.ElementType;
 }, "as"> & {
-    as?: "blockquote" | "caption" | "dd" | "dt" | "figcaption" | "li" | "p" | "span" | "legend" | React.ComponentType | React.ElementType;
+    as?: 'blockquote' | 'caption' | 'dd' | 'dt' | 'figcaption' | 'li' | 'p' | 'span' | 'legend' | React.ComponentType | React.ElementType;
 }, "ref"> & React.RefAttributes<HTMLParagraphElement>, never> & {
     as?: React.ElementType;
 }>;
 type KeyboardShortcutIndicatorProps = React.ComponentProps<typeof StyledKeyboardShortcutIndicator>;
-export declare const KeyboardShortcutIndicator: {
-    (props: KeyboardShortcutIndicatorProps): React.JSX.Element;
-    displayName: string;
-};
+export declare function KeyboardShortcutIndicator(props: KeyboardShortcutIndicatorProps): React.JSX.Element;
+export declare namespace KeyboardShortcutIndicator {
+    var displayName: string;
+}
 export {};

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

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