@atom-learning/components 6.0.0-beta.1 → 6.0.0-beta.11

package/dist/components/empty-state/EmptyStateImage.js

@@ -1,2 +1,2 @@
-import t from"react";import{Image as x}from"../image/Image.js";import{styled as a}from"../../stitches.js";import{EmptyStateContext as i}from"./EmptyState.context.js";const p=a(x,{variants:{size:{xs:{maxWidth:"56px",maxHeight:"32px",mb:"$4"},sm:{maxWidth:"84px",maxHeight:"48px",mb:"$4"},md:{maxWidth:"126px",maxHeight:"72px",mb:"$4"},lg:{maxWidth:"190px",maxHeight:"142px",mb:"calc($4 + $2)"},xl:{maxWidth:"285px",maxHeight:"213px",mb:"calc($4 + $2)"}}}}),o=m=>{const{size:e}=t.useContext(i);return t.createElement(p,{size:e,...m})};export{o as EmptyStateImage};
+import m from"react";import{Image as x}from"../image/Image.js";import{styled as a}from"../../styled.js";import{EmptyStateContext as o}from"./EmptyState.context.js";const r=a(x,{base:[],variants:{size:{xs:["max-h-8","max-w-14","mb-4"],sm:["max-h-12","max-w-21","mb-4"],md:["max-h-18","max-w-[126px]","mb-4"],lg:["max-h-[142px]","max-w-[190px]","mb-6"],xl:["max-h-[213px]","max-w-[285px]","mb-6"]}}}),p=t=>{const{size:e}=m.useContext(o);return m.createElement(r,{size:e,...t})};export{p as EmptyStateImage};
 //# sourceMappingURL=EmptyStateImage.js.map

package/dist/components/empty-state/EmptyStateImage.js.map

@@ -1 +1 @@
-{"version":3,"file":"EmptyStateImage.js","sources":["../../../src/components/empty-state/EmptyStateImage.tsx"],"sourcesContent":["import React from 'react'\n\nimport { Image } from '~/components/image'\nimport { styled } from '~/stitches'\n\nimport { EmptyStateContext } from './EmptyState.context'\n\nconst StyledEmptyStateImage = styled(Image, {\n  variants: {\n    size: {\n      xs: {\n        maxWidth: '56px',\n        maxHeight: '32px',\n        mb: '$4'\n      },\n      sm: {\n        maxWidth: '84px',\n        maxHeight: '48px',\n        mb: '$4'\n      },\n      md: {\n        maxWidth: '126px',\n        maxHeight: '72px',\n        mb: '$4'\n      },\n      lg: {\n        maxWidth: '190px',\n        maxHeight: '142px',\n        mb: 'calc($4 + $2)'\n      },\n      xl: {\n        maxWidth: '285px',\n        maxHeight: '213px',\n        mb: 'calc($4 + $2)'\n      }\n    }\n  }\n})\n\ntype EmptyStateImageProps = React.ComponentProps<typeof StyledEmptyStateImage>\n\nexport const EmptyStateImage = (props: EmptyStateImageProps) => {\n  const { size } = React.useContext(EmptyStateContext)\n  return <StyledEmptyStateImage size={size} {...props} />\n}\n"],"names":["StyledEmptyStateImage","styled","Image","EmptyStateImage","props","size","React","EmptyStateContext"],"mappings":"sKAOA,MAAMA,EAAwBC,EAAOC,EAAO,CAC1C,SAAU,CACR,KAAM,CACJ,GAAI,CACF,SAAU,OACV,UAAW,OACX,GAAI,IACN,EACA,GAAI,CACF,SAAU,OACV,UAAW,OACX,GAAI,IACN,EACA,GAAI,CACF,SAAU,QACV,UAAW,OACX,GAAI,IACN,EACA,GAAI,CACF,SAAU,QACV,UAAW,QACX,GAAI,eACN,EACA,GAAI,CACF,SAAU,QACV,UAAW,QACX,GAAI,eACN,CACF,CACF,CACF,CAAC,EAIYC,EAAmBC,GAAgC,CAC9D,KAAM,CAAE,KAAAC,CAAK,EAAIC,EAAM,WAAWC,CAAiB,EACnD,OAAOD,EAAA,cAACN,EAAA,CAAsB,KAAMK,EAAO,GAAGD,CAAAA,CAAO,CACvD"}
+{"version":3,"file":"EmptyStateImage.js","sources":["../../../src/components/empty-state/EmptyStateImage.tsx"],"sourcesContent":["import React from 'react'\n\nimport { Image } from '~/components/image'\nimport { styled } from '~/styled'\n\nimport { EmptyStateContext } from './EmptyState.context'\n\nconst StyledEmptyStateImage = styled(Image, {\n  base: [],\n  variants: {\n    size: {\n      xs: ['max-h-8', 'max-w-14', 'mb-4'],\n      sm: ['max-h-12', 'max-w-21', 'mb-4'],\n      md: ['max-h-18', 'max-w-[126px]', 'mb-4'],\n      lg: ['max-h-[142px]', 'max-w-[190px]', 'mb-6'],\n      xl: ['max-h-[213px]', 'max-w-[285px]', 'mb-6']\n    }\n  }\n})\n\ntype EmptyStateImageProps = React.ComponentProps<typeof StyledEmptyStateImage>\n\nexport const EmptyStateImage = (props: EmptyStateImageProps) => {\n  const { size } = React.useContext(EmptyStateContext)\n  return <StyledEmptyStateImage size={size} {...props} />\n}\n"],"names":["StyledEmptyStateImage","styled","Image","EmptyStateImage","props","size","React","EmptyStateContext"],"mappings":"oKAOA,MAAMA,EAAwBC,EAAOC,EAAO,CAC1C,KAAM,GACN,SAAU,CACR,KAAM,CACJ,GAAI,CAAC,UAAW,WAAY,MAAM,EAClC,GAAI,CAAC,WAAY,WAAY,MAAM,EACnC,GAAI,CAAC,WAAY,gBAAiB,MAAM,EACxC,GAAI,CAAC,gBAAiB,gBAAiB,MAAM,EAC7C,GAAI,CAAC,gBAAiB,gBAAiB,MAAM,CAC/C,CACF,CACF,CAAC,EAIYC,EAAmBC,GAAgC,CAC9D,KAAM,CAAE,KAAAC,CAAK,EAAIC,EAAM,WAAWC,CAAiB,EACnD,OAAOD,EAAA,cAACN,EAAA,CAAsB,KAAMK,EAAO,GAAGD,EAAO,CACvD"}

package/dist/components/empty-state/EmptyStateTitle.d.ts

@@ -1,375 +1,11 @@
 import * as React from 'react';
-declare const StyledEmptyStateTitle: import("@atom-learning/stitches-react/types/styled-component").StyledComponent<"h2", {
-    size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
-}, {
-    sm: string;
-    md: string;
-    lg: string;
-    xl: string;
-    reducedMotion: string;
-    allowMotion: string;
-    hover: string;
-}, import("@atom-learning/stitches-react/types/css-util").CSS<{
-    sm: string;
-    md: string;
-    lg: string;
-    xl: string;
-    reducedMotion: string;
-    allowMotion: string;
-    hover: string;
-}, {
-    colors: {
-        textBold: string;
-        textRegular: string;
-        textSubtle: string;
-        textMinimal: string;
-        background: string;
-        backgroundAccent: string;
-        grey100: string;
-        grey200: string;
-        grey300: string;
-        grey400: string;
-        grey500: string;
-        grey600: string;
-        grey700: string;
-        grey800: string;
-        grey900: string;
-        grey1000: string;
-        grey1100: string;
-        grey1200: string;
-        blue100: string;
-        blue200: string;
-        blue300: string;
-        blue400: string;
-        blue500: string;
-        blue600: string;
-        blue700: string;
-        blue800: string;
-        blue900: string;
-        blue1000: string;
-        blue1100: string;
-        blue1200: string;
-        pink100: string;
-        pink200: string;
-        pink300: string;
-        pink400: string;
-        pink500: string;
-        pink600: string;
-        pink700: string;
-        pink800: string;
-        pink900: string;
-        pink1000: string;
-        pink1100: string;
-        pink1200: string;
-        purple100: string;
-        purple200: string;
-        purple300: string;
-        purple400: string;
-        purple500: string;
-        purple600: string;
-        purple700: string;
-        purple800: string;
-        purple900: string;
-        purple1000: string;
-        purple1100: string;
-        purple1200: string;
-        cyan100: string;
-        cyan200: string;
-        cyan300: string;
-        cyan400: string;
-        cyan500: string;
-        cyan600: string;
-        cyan700: string;
-        cyan800: string;
-        cyan900: string;
-        cyan1000: string;
-        cyan1100: string;
-        cyan1200: string;
-        green100: string;
-        green200: string;
-        green300: string;
-        green400: string;
-        green500: string;
-        green600: string;
-        green700: string;
-        green800: string;
-        green900: string;
-        green1000: string;
-        green1100: string;
-        green1200: string;
-        magenta100: string;
-        magenta200: string;
-        magenta300: string;
-        magenta400: string;
-        magenta500: string;
-        magenta600: string;
-        magenta700: string;
-        magenta800: string;
-        magenta900: string;
-        magenta1000: string;
-        magenta1100: string;
-        magenta1200: string;
-        red100: string;
-        red200: string;
-        red300: string;
-        red400: string;
-        red500: string;
-        red600: string;
-        red700: string;
-        red800: string;
-        red900: string;
-        red1000: string;
-        red1100: string;
-        red1200: string;
-        teal100: string;
-        teal200: string;
-        teal300: string;
-        teal400: string;
-        teal500: string;
-        teal600: string;
-        teal700: string;
-        teal800: string;
-        teal900: string;
-        teal1000: string;
-        teal1100: string;
-        teal1200: string;
-        orange100: string;
-        orange200: string;
-        orange300: string;
-        orange400: string;
-        orange500: string;
-        orange600: string;
-        orange700: string;
-        orange800: string;
-        orange900: string;
-        orange1000: string;
-        orange1100: string;
-        orange1200: string;
-        yellow100: string;
-        yellow200: string;
-        yellow300: string;
-        yellow400: string;
-        yellow500: string;
-        yellow600: string;
-        yellow700: string;
-        yellow800: string;
-        yellow900: string;
-        yellow1000: string;
-        yellow1100: string;
-        yellow1200: string;
-        lime100: string;
-        lime200: string;
-        lime300: string;
-        lime400: string;
-        lime500: string;
-        lime600: string;
-        lime700: string;
-        lime800: string;
-        lime900: string;
-        lime1000: string;
-        lime1100: string;
-        lime1200: string;
-        lapis100: string;
-        lapis200: string;
-        lapis300: string;
-        lapis400: string;
-        lapis500: string;
-        lapis600: string;
-        lapis700: string;
-        lapis800: string;
-        lapis900: string;
-        lapis1000: string;
-        lapis1100: string;
-        lapis1200: string;
-        maroon100: string;
-        maroon200: string;
-        maroon300: string;
-        maroon400: string;
-        maroon500: string;
-        maroon600: string;
-        maroon700: string;
-        maroon800: string;
-        maroon900: string;
-        maroon1000: string;
-        maroon1100: string;
-        maroon1200: string;
-        marsh100: string;
-        marsh200: string;
-        marsh300: string;
-        marsh400: string;
-        marsh500: string;
-        marsh600: string;
-        marsh700: string;
-        marsh800: string;
-        marsh900: string;
-        marsh1000: string;
-        marsh1100: string;
-        marsh1200: string;
-        alpha100: string;
-        alpha150: string;
-        alpha200: string;
-        alpha250: string;
-        alpha600: string;
-        infoLight: string;
-        info: string;
-        infoMid: string;
-        infoDark: string;
-        successLight: string;
-        success: string;
-        successMid: string;
-        successDark: string;
-        dangerLight: string;
-        danger: string;
-        dangerMid: string;
-        dangerDark: string;
-        warningLight: string;
-        warning: string;
-        warningMid: string;
-        warningDark: string;
-        warningText: string;
-        subjectEnglish: string;
-        subjectMaths: string;
-        subjectScience: string;
-        subjectVerbalReasoning: string;
-        subjectNonVerbalReasoning: string;
-        subjectCreativeWriting: string;
-        subjectExamSkills: string;
-        subjectGcseEnglishLiterature: string;
-        subjectGcseMaths: string;
-        subjectGcseChemistry: string;
-        subjectGcsePhysics: string;
-        subjectGcseBiology: string;
-        glBlueLight: string;
-        glBluePrimary: string;
-        glBlueDark: string;
-        primary100: string;
-        primary200: string;
-        primary300: string;
-        primary400: string;
-        primary500: string;
-        primary600: string;
-        primary700: string;
-        primary800: string;
-        primary900: string;
-        primary1000: string;
-        primary1100: string;
-        primary1200: string;
-    };
-    space: {
-        "0": string;
-        "1": string;
-        "2": string;
-        "3": string;
-        "4": string;
-        "5": string;
-        "6": string;
-        "7": string;
-        "8": string;
-        "9": string;
-        "24": string;
-    };
-    fontSizes: {
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-        "2xl": string;
-        "3xl": string;
-        "4xl": string;
-    };
-    fonts: {
-        sans: string;
-        mono: string;
-        display: string;
-        body: string;
-    };
-    sizes: {
-        "0": string;
-        "1": string;
-        "2": string;
-        "3": string;
-        "4": string;
-        "5": string;
-        "6": string;
-        "7": string;
-        "8": string;
-    };
-    radii: {
-        "0": string;
-        "1": string;
-        "2": string;
-        "3": string;
-        round: string;
-    };
-    shadows: {
-        "0": string;
-        "1": string;
-        "2": string;
-        "3": string;
-    };
-    ratios: {
-        "16-9": string;
-        "3-2": string;
-        "4-3": string;
-        "1-1": string;
-        "3-4": string;
-    };
-}, import("@atom-learning/stitches-react/types/config").DefaultThemeMap, {
-    bg: (value: import("@atom-learning/stitches-react").PropertyValue<"background">) => {
-        background: import("@atom-learning/stitches-react/types/css-util").WithPropertyValue<"background">;
-    };
-    size: (value: import("@atom-learning/stitches-react").ScaleValue<"size"> | number | string) => {
-        height: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"size">;
-        width: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"size">;
-    };
-    p: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
-        padding: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
-    };
-    pt: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
-        paddingTop: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
-    };
-    pr: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
-        paddingRight: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
-    };
-    pb: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
-        paddingBottom: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
-    };
-    pl: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
-        paddingLeft: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
-    };
-    px: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
-        paddingLeft: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
-        paddingRight: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
-    };
-    py: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
-        paddingTop: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
-        paddingBottom: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
-    };
-    m: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
-        margin: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
-    };
-    mt: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
-        marginTop: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
-    };
-    mr: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
-        marginRight: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
-    };
-    mb: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
-        marginBottom: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
-    };
-    ml: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
-        marginLeft: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
-    };
-    mx: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
-        marginLeft: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
-        marginRight: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
-    };
-    my: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
-        marginTop: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
-        marginBottom: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
-    };
-}>>;
+declare const StyledEmptyStateTitle: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & {
+    ref?: ((instance: HTMLHeadingElement | null) => void) | React.RefObject<HTMLHeadingElement> | null | undefined;
+}, "size"> & {
+    size?: ("sm" | "md" | "lg" | "xs" | "xl" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg" | "xs" | "xl">>) | undefined;
+} & {
+    as?: React.ElementType;
+}, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
 type EmptyStateTitleProps = React.ComponentProps<typeof StyledEmptyStateTitle> & {
     as?: React.ComponentType | React.ElementType;
 };

package/dist/components/empty-state/EmptyStateTitle.js

@@ -1,2 +1,2 @@
-import*as t from"react";import{styled as m}from"../../stitches.js";import{EmptyStateContext as n}from"./EmptyState.context.js";const i=m("h2",{color:"$grey800",fontFamily:"$body",fontWeight:600,m:0,variants:{size:{xs:{fontSize:"$md",mb:"$3"},sm:{fontSize:"$md",mb:"$3"},md:{fontSize:"$md",mb:"$3"},lg:{fontSize:"$lg",mb:"$4"},xl:{fontSize:"$lg",mb:"$4"}}}}),r=e=>{const{size:o}=t.useContext(n);return t.createElement(i,{size:o,...e})};export{r as EmptyStateTitle};
+import*as t from"react";import{styled as o}from"../../styled.js";import{EmptyStateContext as s}from"./EmptyState.context.js";const r=o("h2",{base:["text-grey-800","font-body","font-semibold","m-0"],variants:{size:{xs:["mb-3","text-md"],sm:["mb-3","text-md"],md:["mb-3","text-md"],lg:["mb-4","text-lg"],xl:["mb-4","text-lg"]}}}),x=e=>{const{size:m}=t.useContext(s);return t.createElement(r,{size:m,...e})};export{x as EmptyStateTitle};
 //# sourceMappingURL=EmptyStateTitle.js.map

package/dist/components/empty-state/EmptyStateTitle.js.map

@@ -1 +1 @@
-{"version":3,"file":"EmptyStateTitle.js","sources":["../../../src/components/empty-state/EmptyStateTitle.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/stitches'\n\nimport { EmptyStateContext } from './EmptyState.context'\n\nconst StyledEmptyStateTitle = styled('h2', {\n  color: '$grey800',\n  fontFamily: '$body',\n  fontWeight: 600,\n  m: 0,\n  variants: {\n    size: {\n      xs: {\n        fontSize: '$md',\n        mb: '$3'\n      },\n      sm: {\n        fontSize: '$md',\n        mb: '$3'\n      },\n      md: {\n        fontSize: '$md',\n        mb: '$3'\n      },\n      lg: {\n        fontSize: '$lg',\n        mb: '$4'\n      },\n      xl: {\n        fontSize: '$lg',\n        mb: '$4'\n      }\n    }\n  }\n})\n\ntype EmptyStateTitleProps = React.ComponentProps<\n  typeof StyledEmptyStateTitle\n> & {\n  as?: React.ComponentType | React.ElementType\n}\n\nexport const EmptyStateTitle = (props: EmptyStateTitleProps) => {\n  const { size } = React.useContext(EmptyStateContext)\n  return <StyledEmptyStateTitle size={size} {...props} />\n}\n"],"names":["StyledEmptyStateTitle","styled","EmptyStateTitle","props","size","React","EmptyStateContext"],"mappings":"+HAMA,MAAMA,EAAwBC,EAAO,KAAM,CACzC,MAAO,WACP,WAAY,QACZ,WAAY,IACZ,EAAG,EACH,SAAU,CACR,KAAM,CACJ,GAAI,CACF,SAAU,MACV,GAAI,IACN,EACA,GAAI,CACF,SAAU,MACV,GAAI,IACN,EACA,GAAI,CACF,SAAU,MACV,GAAI,IACN,EACA,GAAI,CACF,SAAU,MACV,GAAI,IACN,EACA,GAAI,CACF,SAAU,MACV,GAAI,IACN,CACF,CACF,CACF,CAAC,EAQYC,EAAmBC,GAAgC,CAC9D,KAAM,CAAE,KAAAC,CAAK,EAAIC,EAAM,WAAWC,CAAiB,EACnD,OAAOD,EAAA,cAACL,EAAA,CAAsB,KAAMI,EAAO,GAAGD,EAAO,CACvD"}
+{"version":3,"file":"EmptyStateTitle.js","sources":["../../../src/components/empty-state/EmptyStateTitle.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { EmptyStateContext } from './EmptyState.context'\n\nconst StyledEmptyStateTitle = styled('h2', {\n  base: ['text-grey-800', 'font-body', 'font-semibold', 'm-0'],\n  variants: {\n    size: {\n      xs: ['mb-3', 'text-md'],\n      sm: ['mb-3', 'text-md'],\n      md: ['mb-3', 'text-md'],\n      lg: ['mb-4', 'text-lg'],\n      xl: ['mb-4', 'text-lg']\n    }\n  }\n})\n\ntype EmptyStateTitleProps = React.ComponentProps<\n  typeof StyledEmptyStateTitle\n> & {\n  as?: React.ComponentType | React.ElementType\n}\n\nexport const EmptyStateTitle = (props: EmptyStateTitleProps) => {\n  const { size } = React.useContext(EmptyStateContext)\n  return <StyledEmptyStateTitle size={size} {...props} />\n}\n"],"names":["StyledEmptyStateTitle","styled","EmptyStateTitle","props","size","React","EmptyStateContext"],"mappings":"6HAMA,MAAMA,EAAwBC,EAAO,KAAM,CACzC,KAAM,CAAC,gBAAiB,YAAa,gBAAiB,KAAK,EAC3D,SAAU,CACR,KAAM,CACJ,GAAI,CAAC,OAAQ,SAAS,EACtB,GAAI,CAAC,OAAQ,SAAS,EACtB,GAAI,CAAC,OAAQ,SAAS,EACtB,GAAI,CAAC,OAAQ,SAAS,EACtB,GAAI,CAAC,OAAQ,SAAS,CACxB,CACF,CACF,CAAC,EAQYC,EAAmBC,GAAgC,CAC9D,KAAM,CAAE,KAAAC,CAAK,EAAIC,EAAM,WAAWC,CAAiB,EACnD,OAAOD,EAAA,cAACL,EAAA,CAAsB,KAAMI,EAAO,GAAGD,EAAO,CACvD"}

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

@@ -1,7 +1,4 @@
 import * as React from 'react';
-import type { CSS } from '../../stitches';
-type DescriptionProps = {
-    css?: CSS;
-};
-export declare const Description: ({ children, css }: React.PropsWithChildren<DescriptionProps>) => React.JSX.Element;
-export {};
+export declare const Description: ({ children, className }: React.PropsWithChildren<{
+    className?: string;
+}>) => React.JSX.Element;

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

@@ -1,2 +1,2 @@
-import*as o from"react";import{Text as s}from"../text/Text.js";const t=({children:e,css:r})=>o.createElement(s,{size:"sm",css:{color:"$grey700",maxWidth:"80ch",...r}},e);export{t as Description};
+import r from"clsx";import*as t from"react";import{Text as o}from"../text/Text.js";const s=({children:e,className:m})=>t.createElement(o,{size:"sm",className:r("text-grey-700","max-w-[80ch]",m)},e);export{s as Description};
 //# sourceMappingURL=FieldDescription.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"FieldDescription.js","sources":["../../../src/components/field-wrapper/FieldDescription.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Text } from '~/components/text'\nimport type { CSS } from '~/stitches'\n\ntype DescriptionProps = {\n  css?: CSS\n}\n\nexport const Description = ({\n  children,\n  css\n}: React.PropsWithChildren<DescriptionProps>) => (\n  <Text size=\"sm\" css={{ color: '$grey700', maxWidth: '80ch', ...css }}>\n    {children}\n  </Text>\n)\n"],"names":["Description","children","css","React","Text"],"mappings":"+DASa,MAAAA,EAAc,CAAC,CAC1B,SAAAC,EACA,IAAAC,CACF,IACEC,EAAA,cAACC,EAAA,CAAK,KAAK,KAAK,IAAK,CAAE,MAAO,WAAY,SAAU,OAAQ,GAAGF,CAAI,GAChED,CACH"}
+{"version":3,"file":"FieldDescription.js","sources":["../../../src/components/field-wrapper/FieldDescription.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport * as React from 'react'\n\nimport { Text } from '~/components/text'\n\nexport const Description = ({\n  children,\n  className\n}: React.PropsWithChildren<{ className?: string }>) => (\n  <Text size=\"sm\" className={clsx('text-grey-700', 'max-w-[80ch]', className)}>\n    {children}\n  </Text>\n)\n"],"names":["Description","children","className","React","Text","clsx"],"mappings":"mFAKO,MAAMA,EAAc,CAAC,CAC1B,SAAAC,EACA,UAAAC,CACF,IACEC,EAAA,cAACC,EAAA,CAAK,KAAK,KAAK,UAAWC,EAAK,gBAAiB,eAAgBH,CAAS,GACvED,CACH"}

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

@@ -1,9 +1,8 @@
 import * as React from 'react';
 import { ValidationOptions } from '../../components/form';
-import type { CSS } from '../../stitches';
 import { type LabelProps } from '../label/Label';
 export type FieldWrapperProps = {
-    css?: CSS;
+    className?: string;
     error?: string;
     fieldId: string;
     label: string;
@@ -22,6 +21,6 @@ export type FieldElementWrapperProps = Omit<FieldWrapperProps, 'fieldId'> & {
     validation?: ValidationOptions;
 };
 export declare const FieldWrapper: {
-    ({ css, children, error, fieldId, label, prompt, description, required, hideLabel, appearance }: React.PropsWithChildren<FieldWrapperProps>): React.JSX.Element;
+    ({ children, error, fieldId, label, prompt, description, required, hideLabel, appearance, ...rest }: React.PropsWithChildren<FieldWrapperProps>): React.JSX.Element;
     displayName: string;
 };

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

@@ -1,2 +1,2 @@
-import*as f from"@radix-ui/react-visually-hidden";import*as r from"react";import{Box as b}from"../box/Box.js";import{Flex as u}from"../flex/Flex.js";import{InlineMessage as E}from"../inline-message/InlineMessage.js";import{Label as h}from"../label/Label.js";import{Link as k}from"../link/Link.js";import{Description as F}from"./FieldDescription.js";const o=({css:m,children:l,error:t,fieldId:n,label:a,prompt:e,description:i,required:s,hideLabel:p,appearance:c})=>{const d=p?f.Root:u;return r.createElement(b,{css:m},r.createElement(d,{css:{justifyContent:"space-between",alignItems:"center",mb:"$3"}},r.createElement(h,{htmlFor:n,required:s,appearance:c},a),e&&r.createElement(k,{href:e==null?void 0:e.link,onClick:e==null?void 0:e.onClick,size:"sm"},e.label)),i&&r.createElement(F,{css:{mb:"$3"}},i),l,t&&r.createElement(E,{css:{mt:"$2"}},t))};o.displayName="FieldWrapper";export{o as FieldWrapper};
+import*as f from"@radix-ui/react-visually-hidden";import*as r from"react";import{Flex as b}from"../flex/Flex.js";import{InlineMessage as u}from"../inline-message/InlineMessage.js";import{Label as E}from"../label/Label.js";import{Link as h}from"../link/Link.js";import{Description as k}from"./FieldDescription.js";const i=({children:l,error:t,fieldId:a,label:o,prompt:e,description:m,required:n,hideLabel:p,appearance:c,...s})=>{const d=p?f.Root:b;return r.createElement("div",{...s},r.createElement(d,{className:"mb-3 items-center justify-between"},r.createElement(E,{htmlFor:a,required:n,appearance:c},o),e&&r.createElement(h,{href:e==null?void 0:e.link,onClick:e==null?void 0:e.onClick,size:"sm"},e.label)),m&&r.createElement(k,{className:"mb-3"},m),l,t&&r.createElement(u,{className:"mt-2"},t))};i.displayName="FieldWrapper";export{i as FieldWrapper};
 //# sourceMappingURL=FieldWrapper.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"FieldWrapper.js","sources":["../../../src/components/field-wrapper/FieldWrapper.tsx"],"sourcesContent":["import * as VisuallyHidden from '@radix-ui/react-visually-hidden'\nimport * as React from 'react'\n\nimport { Box } from '~/components/box'\nimport { Flex } from '~/components/flex'\nimport { ValidationOptions } from '~/components/form'\nimport { InlineMessage } from '~/components/inline-message'\nimport { Label } from '~/components/label'\nimport { Link } from '~/components/link'\nimport type { CSS } from '~/stitches'\n\nimport { Description } from './FieldDescription'\nimport { type LabelProps } from '../label/Label'\n\nexport type FieldWrapperProps = {\n  css?: CSS\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  css,\n  children,\n  error,\n  fieldId,\n  label,\n  prompt,\n  description,\n  required,\n  hideLabel,\n  appearance\n}: React.PropsWithChildren<FieldWrapperProps>) => {\n  const LabelContainer = hideLabel ? VisuallyHidden.Root : Flex\n\n  return (\n    <Box css={css}>\n      <LabelContainer\n        css={{\n          justifyContent: 'space-between',\n          alignItems: 'center',\n          mb: '$3'\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      </LabelContainer>\n      {description && (\n        <Description css={{ mb: '$3' }}>{description}</Description>\n      )}\n      {children}\n      {error && <InlineMessage css={{ mt: '$2' }}>{error}</InlineMessage>}\n    </Box>\n  )\n}\n\nFieldWrapper.displayName = 'FieldWrapper'\n"],"names":["FieldWrapper","css","children","error","fieldId","label","prompt","description","required","hideLabel","appearance","LabelContainer","VisuallyHidden","Flex","React","Box","Label","Link","Description","InlineMessage"],"mappings":"6VA+Ba,MAAAA,EAAe,CAAC,CAC3B,IAAAC,EACA,SAAAC,EACA,MAAAC,EACA,QAAAC,EACA,MAAAC,EACA,OAAAC,EACA,YAAAC,EACA,SAAAC,EACA,UAAAC,EACA,WAAAC,CACF,IAAkD,CAChD,MAAMC,EAAiBF,EAAYG,EAAe,KAAOC,EAEzD,OACEC,EAAA,cAACC,EAAA,CAAI,IAAKd,CAAAA,EACRa,EAAA,cAACH,EAAA,CACC,IAAK,CACH,eAAgB,gBAChB,WAAY,SACZ,GAAI,IACN,CAEAG,EAAAA,EAAA,cAACE,EAAA,CAAM,QAASZ,EAAS,SAAUI,EAAU,WAAYE,CAAAA,EACtDL,CACH,EACCC,GACCQ,EAAA,cAACG,EAAA,CAAK,KAAMX,GAAA,KAAAA,OAAAA,EAAQ,KAAM,QAASA,GAAA,KAAAA,OAAAA,EAAQ,QAAS,KAAK,IACtDA,EAAAA,EAAO,KACV,CAEJ,EACCC,GACCO,EAAA,cAACI,EAAA,CAAY,IAAK,CAAE,GAAI,IAAK,CAAIX,EAAAA,CAAY,EAE9CL,EACAC,GAASW,EAAA,cAACK,EAAA,CAAc,IAAK,CAAE,GAAI,IAAK,GAAIhB,CAAM,CACrD,CAEJ,EAEAH,EAAa,YAAc"}
+{"version":3,"file":"FieldWrapper.js","sources":["../../../src/components/field-wrapper/FieldWrapper.tsx"],"sourcesContent":["import * as VisuallyHidden from '@radix-ui/react-visually-hidden'\nimport * as React from 'react'\n\nimport { Flex } from '~/components/flex'\nimport { ValidationOptions } from '~/components/form'\nimport { InlineMessage } from '~/components/inline-message'\nimport { Label } from '~/components/label'\nimport { Link } from '~/components/link'\n\nimport { type LabelProps } from '../label/Label'\nimport { Description } from './FieldDescription'\n\nexport type FieldWrapperProps = {\n  className?: string\n  error?: string\n  fieldId: string\n  label: string\n  prompt?: { link?: string; label: string; onClick?: () => void }\n  description?: string\n  required?: boolean\n  hideLabel?: boolean\n  appearance?: LabelProps['appearance']\n}\n\nexport type FieldElementWrapperProps = Omit<FieldWrapperProps, 'fieldId'> & {\n  name: string\n  validation?: ValidationOptions\n}\n\nexport const FieldWrapper = ({\n  children,\n  error,\n  fieldId,\n  label,\n  prompt,\n  description,\n  required,\n  hideLabel,\n  appearance,\n  ...rest\n}: React.PropsWithChildren<FieldWrapperProps>) => {\n  const LabelContainer = hideLabel ? VisuallyHidden.Root : Flex\n\n  return (\n    <div {...rest}>\n      <LabelContainer className=\"mb-3 items-center justify-between\">\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      </LabelContainer>\n      {description && <Description className=\"mb-3\">{description}</Description>}\n      {children}\n      {error && <InlineMessage className=\"mt-2\">{error}</InlineMessage>}\n    </div>\n  )\n}\n\nFieldWrapper.displayName = 'FieldWrapper'\n"],"names":["FieldWrapper","children","error","fieldId","label","prompt","description","required","hideLabel","appearance","rest","LabelContainer","VisuallyHidden","Flex","React","Label","Link","Description","InlineMessage"],"mappings":"yTA6BO,MAAMA,EAAe,CAAC,CAC3B,SAAAC,EACA,MAAAC,EACA,QAAAC,EACA,MAAAC,EACA,OAAAC,EACA,YAAAC,EACA,SAAAC,EACA,UAAAC,EACA,WAAAC,EACA,GAAGC,CACL,IAAkD,CAChD,MAAMC,EAAiBH,EAAYI,EAAe,KAAOC,EAEzD,OACEC,EAAA,cAAC,MAAK,CAAA,GAAGJ,CACPI,EAAAA,EAAA,cAACH,EAAA,CAAe,UAAU,mCACxBG,EAAAA,EAAA,cAACC,EAAA,CAAM,QAASZ,EAAS,SAAUI,EAAU,WAAYE,CACtDL,EAAAA,CACH,EACCC,GACCS,EAAA,cAACE,EAAA,CAAK,KAAMX,GAAA,KAAAA,OAAAA,EAAQ,KAAM,QAASA,GAAA,KAAA,OAAAA,EAAQ,QAAS,KAAK,IAAA,EACtDA,EAAO,KACV,CAEJ,EACCC,GAAeQ,EAAA,cAACG,EAAA,CAAY,UAAU,MAAQX,EAAAA,CAAY,EAC1DL,EACAC,GAASY,EAAA,cAACI,EAAA,CAAc,UAAU,MAAQhB,EAAAA,CAAM,CACnD,CAEJ,EAEAF,EAAa,YAAc"}

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

@@ -1,7 +1,6 @@
 import * as React from 'react';
-import type { CSS } from '../../stitches';
 type InlineFieldWrapperProps = {
-    css?: CSS;
+    className?: string;
     error?: string;
     label: string;
     required?: boolean;
@@ -10,7 +9,7 @@ type InlineFieldWrapperProps = {
     description?: string;
 };
 export declare const InlineFieldWrapper: {
-    ({ align, children, css, description, direction, error, label, required }: React.PropsWithChildren<InlineFieldWrapperProps>): React.JSX.Element;
+    ({ align, children, className, description, direction, error, label, required }: React.PropsWithChildren<InlineFieldWrapperProps>): React.JSX.Element;
     displayName: string;
 };
 export {};

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

@@ -1,2 +1,2 @@
-import*as e from"react";import{Box as o}from"../box/Box.js";import{Checkbox as d}from"../checkbox/Checkbox.js";import{InlineMessage as $}from"../inline-message/InlineMessage.js";import{Label as f}from"../label/Label.js";import{RadioButton as u}from"../radio-button/RadioButton.js";import"../radio-button/RadioButtonGroup.js";import{Description as E}from"./FieldDescription.js";const l=({align:n="start",children:a,css:s,description:i,direction:t="row",error:m,label:p,required:c})=>e.createElement(o,{css:s},e.createElement(f,{align:n,direction:t,required:c,type:"inline"},e.Children.map(a,r=>e.createElement(o,{css:{[t==="reverse"?"ml":"mr"]:"$3",...((r==null?void 0:r.type)===d||(r==null?void 0:r.type)===u)&&{transform:"translateY($space$1)"}}},r)),p),m&&e.createElement($,{css:{mt:"$2"}},m),i&&e.createElement(E,{css:{mt:"$2",[t==="reverse"?"mr":"ml"]:"calc($space$3 + $sizes$1)"}},i));l.displayName="InlineFieldWrapper";export{l as InlineFieldWrapper};
+import l from"clsx";import*as e from"react";import{Checkbox as d}from"../checkbox/Checkbox.js";import{InlineMessage as f}from"../inline-message/InlineMessage.js";import{Label as v}from"../label/Label.js";import{RadioButton as N}from"../radio-button/RadioButton.js";import"../radio-button/RadioButtonGroup.js";import{Description as u}from"./FieldDescription.js";const o=({align:a="start",children:n,className:p,description:t,direction:r="row",error:m,label:c,required:s})=>e.createElement("div",{className:p},e.createElement(v,{align:a,direction:r,required:s,type:"inline"},e.Children.map(n,i=>e.createElement("div",{className:l(r==="reverse"&&"ml-3",r==="row"&&"mr-3",((i==null?void 0:i.type)===d||(i==null?void 0:i.type)===N)&&["translate-y-1"])},i)),c),m&&e.createElement(f,{className:"mt-2"},m),t&&e.createElement(u,{className:l("mt-2",r==="reverse"&&"mr-7",r==="row"&&"ml-7")},t));o.displayName="InlineFieldWrapper";export{o as InlineFieldWrapper};
 //# sourceMappingURL=InlineFieldWrapper.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"InlineFieldWrapper.js","sources":["../../../src/components/field-wrapper/InlineFieldWrapper.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Box } from '~/components/box'\nimport { Checkbox } from '~/components/checkbox'\nimport { InlineMessage } from '~/components/inline-message'\nimport { Label } from '~/components/label'\nimport { RadioButton } from '~/components/radio-button'\nimport type { CSS } from '~/stitches'\n\nimport { Description } from './FieldDescription'\n\ntype InlineFieldWrapperProps = {\n  css?: CSS\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  css,\n  description,\n  direction = 'row',\n  error,\n  label,\n  required\n}: React.PropsWithChildren<InlineFieldWrapperProps>) => (\n  <Box css={css}>\n    <Label\n      align={align}\n      direction={direction}\n      required={required}\n      type=\"inline\"\n    >\n      {React.Children.map(children, (child: any) => (\n        <Box\n          css={{\n            [direction === 'reverse' ? 'ml' : 'mr']: '$3',\n            // provide offset for specific child components\n            ...((child?.type === Checkbox || child?.type === RadioButton) && {\n              transform: 'translateY($space$1)'\n            })\n          }}\n        >\n          {child}\n        </Box>\n      ))}\n      {label}\n    </Label>\n    {error && <InlineMessage css={{ mt: '$2' }}>{error}</InlineMessage>}\n    {description && (\n      <Description\n        css={{\n          mt: '$2',\n          // calc required to get correct offset value\n          [direction === 'reverse' ? 'mr' : 'ml']: 'calc($space$3 + $sizes$1)'\n        }}\n      >\n        {description}\n      </Description>\n    )}\n  </Box>\n)\n\nInlineFieldWrapper.displayName = 'InlineFieldWrapper'\n"],"names":["InlineFieldWrapper","align","children","css","description","direction","error","label","required","React","Box","Label","child","Checkbox","RadioButton","InlineMessage","Description"],"mappings":"yXAqBa,MAAAA,EAAqB,CAAC,CACjC,MAAAC,EAAQ,QACR,SAAAC,EACA,IAAAC,EACA,YAAAC,EACA,UAAAC,EAAY,MACZ,MAAAC,EACA,MAAAC,EACA,SAAAC,CACF,IACEC,EAAA,cAACC,EAAA,CAAI,IAAKP,CACRM,EAAAA,EAAA,cAACE,EAAA,CACC,MAAOV,EACP,UAAWI,EACX,SAAUG,EACV,KAAK,QAEJC,EAAAA,EAAM,SAAS,IAAIP,EAAWU,GAC7BH,EAAA,cAACC,EAAA,CACC,IAAK,CACH,CAACL,IAAc,UAAY,KAAO,MAAO,KAEzC,KAAKO,GAAA,KAAA,OAAAA,EAAO,QAASC,IAAYD,GAAA,YAAAA,EAAO,QAASE,IAAgB,CAC/D,UAAW,sBACb,CACF,CAAA,EAECF,CACH,CACD,EACAL,CACH,EACCD,GAASG,EAAA,cAACM,EAAA,CAAc,IAAK,CAAE,GAAI,IAAK,CAAIT,EAAAA,CAAM,EAClDF,GACCK,EAAA,cAACO,EAAA,CACC,IAAK,CACH,GAAI,KAEJ,CAACX,IAAc,UAAY,KAAO,MAAO,2BAC3C,CAECD,EAAAA,CACH,CAEJ,EAGFJ,EAAmB,YAAc"}
+{"version":3,"file":"InlineFieldWrapper.js","sources":["../../../src/components/field-wrapper/InlineFieldWrapper.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport * as React from 'react'\n\nimport { Checkbox } from '~/components/checkbox'\nimport { InlineMessage } from '~/components/inline-message'\nimport { Label } from '~/components/label'\nimport { RadioButton } from '~/components/radio-button'\n\nimport { Description } from './FieldDescription'\n\ntype InlineFieldWrapperProps = {\n  className?: string\n  error?: string\n  label: string\n  required?: boolean\n  align?: 'start' | 'center'\n  direction?: 'row' | 'reverse'\n  description?: string\n}\n\nexport const InlineFieldWrapper = ({\n  align = 'start',\n  children,\n  className,\n  description,\n  direction = 'row',\n  error,\n  label,\n  required\n}: React.PropsWithChildren<InlineFieldWrapperProps>) => (\n  <div className={className}>\n    <Label\n      align={align}\n      direction={direction}\n      required={required}\n      type=\"inline\"\n    >\n      {React.Children.map(children, (child: any) => (\n        <div\n          className={clsx(\n            direction === 'reverse' && 'ml-3',\n            direction === 'row' && 'mr-3',\n            (child?.type === Checkbox || child?.type === RadioButton) && [\n              'translate-y-1'\n            ]\n          )}\n        >\n          {child}\n        </div>\n      ))}\n      {label}\n    </Label>\n    {error && <InlineMessage className=\"mt-2\">{error}</InlineMessage>}\n    {description && (\n      <Description\n        className={clsx(\n          'mt-2',\n          direction === 'reverse' && 'mr-7',\n          direction === 'row' && 'ml-7'\n        )}\n      >\n        {description}\n      </Description>\n    )}\n  </div>\n)\n\nInlineFieldWrapper.displayName = 'InlineFieldWrapper'\n"],"names":["InlineFieldWrapper","align","children","className","description","direction","error","label","required","React","Label","child","clsx","Checkbox","RadioButton","InlineMessage","Description"],"mappings":"yWAoBO,MAAMA,EAAqB,CAAC,CACjC,MAAAC,EAAQ,QACR,SAAAC,EACA,UAAAC,EACA,YAAAC,EACA,UAAAC,EAAY,MACZ,MAAAC,EACA,MAAAC,EACA,SAAAC,CACF,IACEC,EAAA,cAAC,MAAA,CAAI,UAAWN,CAAAA,EACdM,EAAA,cAACC,EAAA,CACC,MAAOT,EACP,UAAWI,EACX,SAAUG,EACV,KAAK,QAEJC,EAAAA,EAAM,SAAS,IAAIP,EAAWS,GAC7BF,EAAA,cAAC,MACC,CAAA,UAAWG,EACTP,IAAc,WAAa,OAC3BA,IAAc,OAAS,SACtBM,GAAA,KAAAA,OAAAA,EAAO,QAASE,IAAYF,GAAA,KAAA,OAAAA,EAAO,QAASG,IAAgB,CAC3D,eACF,CACF,GAECH,CACH,CACD,EACAJ,CACH,EACCD,GAASG,EAAA,cAACM,EAAA,CAAc,UAAU,MAAA,EAAQT,CAAM,EAChDF,GACCK,EAAA,cAACO,EAAA,CACC,UAAWJ,EACT,OACAP,IAAc,WAAa,OAC3BA,IAAc,OAAS,MACzB,CAECD,EAAAA,CACH,CAEJ,EAGFJ,EAAmB,YAAc"}

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

@@ -6,9 +6,10 @@ interface FileDropProps extends Omit<React.ComponentProps<typeof Flex>, 'onDrop'
     children?: React.ReactNode | ((value: FileDropContextValue) => React.ReactNode);
     accept?: React.InputHTMLAttributes<HTMLInputElement>['accept'];
     multiple?: React.InputHTMLAttributes<HTMLInputElement>['multiple'];
+    className?: string;
 }
 export declare const FileDrop: {
-    ({ css, children, accept, multiple, onDrop, ...props }: FileDropProps): JSX.Element;
+    ({ className, children, accept, multiple, onDrop, ...props }: FileDropProps): JSX.Element;
     displayName: string;
 };
 export {};

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

@@ -1,2 +1,2 @@
-import*as r from"react";import{Flex as x}from"../flex/Flex.js";import{FileDropContext as E}from"./FileDropContext.js";const c=({css:p,children:n,accept:s,multiple:u,onDrop:d,...f})=>{const[m,i]=r.useState(!1),[v,D]=r.useState([]),o=r.useRef(null),g=e=>{e.preventDefault(),i(!0)},y=()=>i(!1),l=e=>{if(!e)return;i(!1);const t=Array.from(e);d(t),D(t)},b=e=>{var t;["Space","Enter"].includes(e.key)&&((t=o.current)==null||t.click())},a={isDragging:m,files:v};return r.createElement(E.Provider,{value:a},r.createElement(x,{direction:"column",gap:"24",align:"center",onDragOver:g,onDragLeave:y,onDrop:e=>{e.preventDefault(),l(e.dataTransfer.files)},onClick:()=>{var e;return(e=o.current)==null?void 0:e.click()},css:{border:"1px dashed $grey500",p:"$5 $7",borderRadius:"$1",cursor:"pointer","& *":{pointerEvents:"none"},...p},role:"button",onKeyDown:b,tabIndex:0,...f},typeof n=="function"?n(a):n,r.createElement("input",{type:"file",ref:o,style:{visibility:"hidden"},accept:s,multiple:u,onChange:e=>{l(e.target.files)}})))};c.displayName="FileDrop";export{c as FileDrop};
+import x from"clsx";import*as r from"react";import{Flex as F}from"../flex/Flex.js";import{FileDropContext as h}from"./FileDropContext.js";const c=({className:p,children:n,accept:s,multiple:u,onDrop:m,...d})=>{const[f,o]=r.useState(!1),[v,D]=r.useState([]),l=r.useRef(null),g=e=>{e.preventDefault(),o(!0)},y=()=>o(!1),i=e=>{if(!e)return;o(!1);const t=Array.from(e);m(t),D(t)},b=e=>{var t;["Space","Enter"].includes(e.key)&&((t=l.current)==null||t.click())},a={isDragging:f,files:v};return r.createElement(h.Provider,{value:a},r.createElement(F,{direction:"column",gap:"24",align:"center",onDragOver:g,onDragLeave:y,onDrop:e=>{e.preventDefault(),i(e.dataTransfer.files)},onClick:()=>{var e;return(e=l.current)==null?void 0:e.click()},role:"button",onKeyDown:b,tabIndex:0,...d,className:x("border","border-dashed","border-grey-500","px-12","py-8","rounded-md","cursor-pointer","**:pointer-events-none",p)},typeof n=="function"?n(a):n,r.createElement("input",{type:"file",ref:l,style:{visibility:"hidden"},accept:s,multiple:u,onChange:e=>{i(e.target.files)}})))};c.displayName="FileDrop";export{c as FileDrop};
 //# sourceMappingURL=FileDrop.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"FileDrop.js","sources":["../../../src/components/file-drop/FileDrop.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Flex } from '../flex'\nimport { FileDropContext } from './FileDropContext'\nimport { type FileDropContextValue } from './types'\n\ninterface FileDropProps\n  extends Omit<React.ComponentProps<typeof Flex>, 'onDrop'> {\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\nexport const FileDrop = ({\n  css,\n  children,\n  accept,\n  multiple,\n  onDrop,\n  ...props\n}: FileDropProps): JSX.Element => {\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      <Flex\n        direction=\"column\"\n        gap=\"24\"\n        align=\"center\"\n        onDragOver={handleDragOver}\n        onDragLeave={handleDragLeave}\n        onDrop={(event) => {\n          event.preventDefault()\n          handleDrop(event.dataTransfer.files)\n        }}\n        onClick={() => fileUploadInputRef.current?.click()}\n        css={{\n          border: '1px dashed $grey500',\n          p: '$5 $7',\n          borderRadius: '$1',\n          cursor: 'pointer',\n          '& *': { pointerEvents: 'none' },\n          ...css\n        }}\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      </Flex>\n    </FileDropContext.Provider>\n  )\n}\n\nFileDrop.displayName = 'FileDrop'\n"],"names":["FileDrop","css","children","accept","multiple","onDrop","props","isDragging","setIsDragging","React","files","setFiles","fileUploadInputRef","handleDragOver","event","handleDragLeave","handleDrop","fileList","handleKeyDown","_a","value","FileDropContext","Flex"],"mappings":"sHAgBa,MAAAA,EAAW,CAAC,CACvB,IAAAC,EACA,SAAAC,EACA,OAAAC,EACA,SAAAC,EACA,OAAAC,KACGC,CACL,IAAkC,CAChC,KAAM,CAACC,EAAYC,CAAa,EAAIC,EAAM,SAAS,EAAK,EAClD,CAACC,EAAOC,CAAQ,EAAIF,EAAM,SAAiB,EAAE,EAC7CG,EAAqBH,EAAM,OAAyB,IAAI,EAExDI,EAAkBC,GAA2C,CACjEA,EAAM,eAAA,EACNN,EAAc,EAAI,CACpB,EAEMO,EAAkB,IAAMP,EAAc,EAAK,EAE3CQ,EAAcC,GAA8B,CAChD,GAAI,CAACA,EAAU,OAEfT,EAAc,EAAK,EAEnB,MAAME,EAAQ,MAAM,KAAKO,CAAQ,EACjCZ,EAAOK,CAAK,EACZC,EAASD,CAAK,CAChB,EAEMQ,EAAiBJ,GAA+C,CA7CxE,IAAAK,EA8CQ,CAAC,QAAS,OAAO,EAAE,SAASL,EAAM,GAAG,KACvCK,EAAAP,EAAmB,UAAnB,MAAAO,EAA4B,QAEhC,EAEMC,EAA8B,CAAE,WAAAb,EAAY,MAAAG,CAAM,EAExD,OACED,EAAA,cAACY,EAAgB,SAAhB,CAAyB,MAAOD,CAC/BX,EAAAA,EAAA,cAACa,EAAA,CACC,UAAU,SACV,IAAI,KACJ,MAAM,SACN,WAAYT,EACZ,YAAaE,EACb,OAASD,GAAU,CACjBA,EAAM,iBACNE,EAAWF,EAAM,aAAa,KAAK,CACrC,EACA,QAAS,IAAG,CAjEpB,IAAAK,EAiEuB,OAAAA,EAAAP,EAAmB,UAAnB,KAAA,OAAAO,EAA4B,MAAA,CAAA,EAC3C,IAAK,CACH,OAAQ,sBACR,EAAG,QACH,aAAc,KACd,OAAQ,UACR,MAAO,CAAE,cAAe,MAAO,EAC/B,GAAGlB,CACL,EACA,KAAK,SACL,UAAWiB,EACX,SAAU,EACT,GAAGZ,CAEH,EAAA,OAAOJ,GAAa,WAAaA,EAASkB,CAAK,EAAIlB,EACpDO,EAAA,cAAC,QAAA,CACC,KAAK,OACL,IAAKG,EACL,MAAO,CAAE,WAAY,QAAS,EAC9B,OAAQT,EACR,SAAUC,EACV,SAAWU,GAAU,CACnBE,EAAWF,EAAM,OAAO,KAAK,CAC/B,CACF,CAAA,CACF,CACF,CAEJ,EAEAd,EAAS,YAAc"}
+{"version":3,"file":"FileDrop.js","sources":["../../../src/components/file-drop/FileDrop.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport * as React from 'react'\n\nimport { Flex } from '../flex'\nimport { FileDropContext } from './FileDropContext'\nimport { type FileDropContextValue } from './types'\n\ninterface FileDropProps\n  extends Omit<React.ComponentProps<typeof Flex>, 'onDrop'> {\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  className?: string\n}\n\nexport const FileDrop = ({\n  className,\n  children,\n  accept,\n  multiple,\n  onDrop,\n  ...props\n}: FileDropProps): JSX.Element => {\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      <Flex\n        direction=\"column\"\n        gap=\"24\"\n        align=\"center\"\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        className={clsx(\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          className\n        )}\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      </Flex>\n    </FileDropContext.Provider>\n  )\n}\n\nFileDrop.displayName = 'FileDrop'\n"],"names":["FileDrop","className","children","accept","multiple","onDrop","props","isDragging","setIsDragging","React","files","setFiles","fileUploadInputRef","handleDragOver","event","handleDragLeave","handleDrop","fileList","handleKeyDown","_a","value","FileDropContext","Flex","clsx"],"mappings":"0IAkBa,MAAAA,EAAW,CAAC,CACvB,UAAAC,EACA,SAAAC,EACA,OAAAC,EACA,SAAAC,EACA,OAAAC,EACA,GAAGC,CACL,IAAkC,CAChC,KAAM,CAACC,EAAYC,CAAa,EAAIC,EAAM,SAAS,EAAK,EAClD,CAACC,EAAOC,CAAQ,EAAIF,EAAM,SAAiB,CAAA,CAAE,EAC7CG,EAAqBH,EAAM,OAAyB,IAAI,EAExDI,EAAkBC,GAA2C,CACjEA,EAAM,eACNN,EAAAA,EAAc,EAAI,CACpB,EAEMO,EAAkB,IAAMP,EAAc,EAAK,EAE3CQ,EAAcC,GAA8B,CAChD,GAAI,CAACA,EAAU,OAEfT,EAAc,EAAK,EAEnB,MAAME,EAAQ,MAAM,KAAKO,CAAQ,EACjCZ,EAAOK,CAAK,EACZC,EAASD,CAAK,CAChB,EAEMQ,EAAiBJ,GAA+C,CA/CxE,IAAAK,EAgDQ,CAAC,QAAS,OAAO,EAAE,SAASL,EAAM,GAAG,KACvCK,EAAAP,EAAmB,UAAnB,MAAAO,EAA4B,MAAA,EAEhC,EAEMC,EAA8B,CAAE,WAAAb,EAAY,MAAAG,CAAM,EAExD,OACED,EAAA,cAACY,EAAgB,SAAhB,CAAyB,MAAOD,CAC/BX,EAAAA,EAAA,cAACa,EAAA,CACC,UAAU,SACV,IAAI,KACJ,MAAM,SACN,WAAYT,EACZ,YAAaE,EACb,OAASD,GAAU,CACjBA,EAAM,eAAA,EACNE,EAAWF,EAAM,aAAa,KAAK,CACrC,EACA,QAAS,IAAG,CAnEpB,IAAAK,EAmEuB,OAAAA,EAAAP,EAAmB,UAAnB,KAAA,OAAAO,EAA4B,MAAA,CAAA,EAC3C,KAAK,SACL,UAAWD,EACX,SAAU,EACT,GAAGZ,EACJ,UAAWiB,EACT,SACA,gBACA,kBACA,QACA,OACA,aACA,iBACA,yBACAtB,CACF,CAEC,EAAA,OAAOC,GAAa,WAAaA,EAASkB,CAAK,EAAIlB,EACpDO,EAAA,cAAC,QAAA,CACC,KAAK,OACL,IAAKG,EACL,MAAO,CAAE,WAAY,QAAS,EAC9B,OAAQT,EACR,SAAUC,EACV,SAAWU,GAAU,CACnBE,EAAWF,EAAM,OAAO,KAAK,CAC/B,CACF,CAAA,CACF,CACF,CAEJ,EAEAd,EAAS,YAAc"}

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

@@ -1 +1 @@
-{"version":3,"file":"FileInput.js","sources":["../../../src/components/file-input/FileInput.tsx"],"sourcesContent":["import { Upload } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { Button } from '../button'\nimport { Icon } from '../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"],"names":["FileInput","accept","children","multiple","onFileSelect","rest","handleFileSelect","event","files","React","Button","Icon","Upload"],"mappings":"0JAYO,MAAMA,EAAY,CAAC,CACxB,OAAAC,EACA,SAAAC,EACA,SAAAC,EAAW,GACX,aAAAC,KACGC,CACL,IAAsB,CACpB,MAAMC,EAAoBC,GAA+C,CACvE,KAAM,CAAE,MAAAC,CAAM,EAAID,EAAM,OAExBH,EAAaI,CAAK,CACpB,EAEA,OACEC,EAAA,cAACC,EAAA,CAAO,GAAG,QAAS,GAAGL,CAAAA,EACrBI,EAAA,cAACE,EAAA,CAAK,GAAIC,CAAAA,CAAQ,EACjBV,EACDO,EAAA,cAAC,QAAA,CACC,KAAK,OACL,SAAUH,EACV,OAAQL,EACR,SAAUE,EACV,OAAM,EAAA,CACR,CACF,CAEJ,EAEAH,EAAU,YAAc"}
+{"version":3,"file":"FileInput.js","sources":["../../../src/components/file-input/FileInput.tsx"],"sourcesContent":["import { Upload } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { Button } from '../button'\nimport { Icon } from '../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"],"names":["FileInput","accept","children","multiple","onFileSelect","rest","handleFileSelect","event","files","React","Button","Icon","Upload"],"mappings":"0JAYa,MAAAA,EAAY,CAAC,CACxB,OAAAC,EACA,SAAAC,EACA,SAAAC,EAAW,GACX,aAAAC,EACA,GAAGC,CACL,IAAsB,CACpB,MAAMC,EAAoBC,GAA+C,CACvE,KAAM,CAAE,MAAAC,CAAM,EAAID,EAAM,OAExBH,EAAaI,CAAK,CACpB,EAEA,OACEC,EAAA,cAACC,EAAA,CAAO,GAAG,QAAS,GAAGL,CAAAA,EACrBI,EAAA,cAACE,EAAA,CAAK,GAAIC,CAAAA,CAAQ,EACjBV,EACDO,EAAA,cAAC,QAAA,CACC,KAAK,OACL,SAAUH,EACV,OAAQL,EACR,SAAUE,EACV,OAAM,EAAA,CACR,CACF,CAEJ,EAEAH,EAAU,YAAc"}