@atom-learning/components 4.0.0-beta.1 → 4.0.0-beta.10

package/dist/components/avatar/Avatar.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-declare const StyledDiv: import("@stitches/react/types/styled-component").StyledComponent<"div", {
+declare const StyledDiv: import("@atom-learning/stitches-react/types/styled-component").StyledComponent<"div", {
     size?: "sm" | "md" | "lg" | "xl" | "xs" | "xxl" | undefined;
 }, {
     sm: string;
@@ -9,7 +9,7 @@ declare const StyledDiv: import("@stitches/react/types/styled-component").Styled
     reducedMotion: string;
     allowMotion: string;
     hover: string;
-}, import("@stitches/react/types/css-util").CSS<{
+}, import("@atom-learning/stitches-react/types/css-util").CSS<{
     sm: string;
     md: string;
     lg: string;
@@ -49,6 +49,18 @@ declare const StyledDiv: import("@stitches/react/types/styled-component").Styled
         blue1000: any;
         blue1100: any;
         blue1200: any;
+        pink100: any;
+        pink200: any;
+        pink300: any;
+        pink400: any;
+        pink500: any;
+        pink600: any;
+        pink700: any;
+        pink800: any;
+        pink900: any;
+        pink1000: any;
+        pink1100: any;
+        pink1200: any;
         purple100: any;
         purple200: any;
         purple300: any;
@@ -193,26 +205,11 @@ declare const StyledDiv: import("@stitches/react/types/styled-component").Styled
         marsh1000: any;
         marsh1100: any;
         marsh1200: any;
-        tonal50: any;
-        tonal100: any;
-        tonal200: any;
-        tonal300: any;
-        tonal400: any;
-        tonal500: any;
-        tonal600: any;
         alpha100: any;
         alpha150: any;
         alpha200: any;
         alpha250: any;
         alpha600: any;
-        brandRed: any;
-        brandRedAccent: any;
-        brandGreen: any;
-        brandGreenAccent: any;
-        brandPurple: any;
-        brandPurpleAccent: any;
-        brandYellow: any;
-        brandYellowAccent: any;
         infoLight: any;
         info: any;
         infoMid: any;
@@ -313,62 +310,62 @@ declare const StyledDiv: import("@stitches/react/types/styled-component").Styled
         "1-1": any;
         "3-4": any;
     };
-}, import("@stitches/react/types/config").DefaultThemeMap, {
-    bg: (value: import("@stitches/react/types/css-util").WithPropertyValue<"background">) => {
-        background: import("@stitches/react/types/css-util").WithPropertyValue<"background">;
+}, import("@atom-learning/stitches-react/types/config").DefaultThemeMap, {
+    bg: (value: import("@atom-learning/stitches-react/types/css-util").WithPropertyValue<"background">) => {
+        background: import("@atom-learning/stitches-react/types/css-util").WithPropertyValue<"background">;
     };
-    size: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"size">) => {
-        height: string | number | import("@stitches/react/types/css-util").WithScaleValue<"size">;
-        width: string | number | import("@stitches/react/types/css-util").WithScaleValue<"size">;
+    size: (value: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"size">) => {
+        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: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        padding: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+    p: (value: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">) => {
+        padding: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
     };
-    pt: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        paddingTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+    pt: (value: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">) => {
+        paddingTop: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
     };
-    pr: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        paddingRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+    pr: (value: 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">;
     };
-    pb: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        paddingBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+    pb: (value: 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">;
     };
-    pl: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        paddingLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+    pl: (value: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">) => {
+        paddingLeft: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
     };
-    px: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        paddingLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-        paddingRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+    px: (value: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">) => {
+        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: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        paddingTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-        paddingBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+    py: (value: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">) => {
+        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: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        margin: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+    m: (value: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">) => {
+        margin: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
     };
-    mt: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        marginTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+    mt: (value: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">) => {
+        marginTop: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
     };
-    mr: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        marginRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+    mr: (value: 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">;
     };
-    mb: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        marginBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+    mb: (value: 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">;
     };
-    ml: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        marginLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+    ml: (value: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">) => {
+        marginLeft: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
     };
-    mx: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        marginLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-        marginRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+    mx: (value: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">) => {
+        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: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        marginTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-        marginBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+    my: (value: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">) => {
+        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 StyledButton: import("@stitches/react/types/styled-component").StyledComponent<"button", {
+declare const StyledButton: import("@atom-learning/stitches-react/types/styled-component").StyledComponent<"button", {
     size?: "sm" | "md" | "lg" | "xl" | "xs" | "xxl" | undefined;
 }, {
     sm: string;
@@ -378,7 +375,7 @@ declare const StyledButton: import("@stitches/react/types/styled-component").Sty
     reducedMotion: string;
     allowMotion: string;
     hover: string;
-}, import("@stitches/react/types/css-util").CSS<{
+}, import("@atom-learning/stitches-react/types/css-util").CSS<{
     sm: string;
     md: string;
     lg: string;
@@ -418,6 +415,18 @@ declare const StyledButton: import("@stitches/react/types/styled-component").Sty
         blue1000: any;
         blue1100: any;
         blue1200: any;
+        pink100: any;
+        pink200: any;
+        pink300: any;
+        pink400: any;
+        pink500: any;
+        pink600: any;
+        pink700: any;
+        pink800: any;
+        pink900: any;
+        pink1000: any;
+        pink1100: any;
+        pink1200: any;
         purple100: any;
         purple200: any;
         purple300: any;
@@ -562,26 +571,11 @@ declare const StyledButton: import("@stitches/react/types/styled-component").Sty
         marsh1000: any;
         marsh1100: any;
         marsh1200: any;
-        tonal50: any;
-        tonal100: any;
-        tonal200: any;
-        tonal300: any;
-        tonal400: any;
-        tonal500: any;
-        tonal600: any;
         alpha100: any;
         alpha150: any;
         alpha200: any;
         alpha250: any;
         alpha600: any;
-        brandRed: any;
-        brandRedAccent: any;
-        brandGreen: any;
-        brandGreenAccent: any;
-        brandPurple: any;
-        brandPurpleAccent: any;
-        brandYellow: any;
-        brandYellowAccent: any;
         infoLight: any;
         info: any;
         infoMid: any;
@@ -682,59 +676,59 @@ declare const StyledButton: import("@stitches/react/types/styled-component").Sty
         "1-1": any;
         "3-4": any;
     };
-}, import("@stitches/react/types/config").DefaultThemeMap, {
-    bg: (value: import("@stitches/react/types/css-util").WithPropertyValue<"background">) => {
-        background: import("@stitches/react/types/css-util").WithPropertyValue<"background">;
+}, import("@atom-learning/stitches-react/types/config").DefaultThemeMap, {
+    bg: (value: import("@atom-learning/stitches-react/types/css-util").WithPropertyValue<"background">) => {
+        background: import("@atom-learning/stitches-react/types/css-util").WithPropertyValue<"background">;
     };
-    size: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"size">) => {
-        height: string | number | import("@stitches/react/types/css-util").WithScaleValue<"size">;
-        width: string | number | import("@stitches/react/types/css-util").WithScaleValue<"size">;
+    size: (value: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"size">) => {
+        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: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        padding: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+    p: (value: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">) => {
+        padding: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
     };
-    pt: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        paddingTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+    pt: (value: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">) => {
+        paddingTop: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
     };
-    pr: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        paddingRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+    pr: (value: 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">;
     };
-    pb: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        paddingBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+    pb: (value: 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">;
     };
-    pl: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        paddingLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+    pl: (value: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">) => {
+        paddingLeft: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
     };
-    px: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        paddingLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-        paddingRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+    px: (value: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">) => {
+        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: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        paddingTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-        paddingBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+    py: (value: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">) => {
+        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: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        margin: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+    m: (value: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">) => {
+        margin: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
     };
-    mt: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        marginTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+    mt: (value: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">) => {
+        marginTop: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
     };
-    mr: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        marginRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+    mr: (value: 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">;
     };
-    mb: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        marginBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+    mb: (value: 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">;
     };
-    ml: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        marginLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+    ml: (value: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">) => {
+        marginLeft: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
     };
-    mx: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        marginLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-        marginRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+    mx: (value: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">) => {
+        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: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        marginTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-        marginBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+    my: (value: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">) => {
+        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 type TAvatarProps = React.ComponentProps<typeof StyledDiv | typeof StyledButton> & {
@@ -751,25 +745,25 @@ export declare type TAvatarRootContext = {
     size: TAvatarProps['size'];
 };
 export declare const AvatarRootContext: React.Context<TAvatarRootContext>;
-export declare const AvatarRootProvider: ({ children, name, size }: TAvatarProps) => JSX.Element;
+export declare const AvatarRootProvider: ({ children, name, size }: TAvatarProps) => React.JSX.Element;
 export declare const AvatarRoot: {
-    ({ children, size, name, disabled, onClick }: TAvatarProps): JSX.Element;
+    ({ children, size, name, disabled, onClick }: TAvatarProps): React.JSX.Element;
     displayName: string;
 };
 export declare const Avatar: {
-    ({ children, size, name, disabled, onClick }: TAvatarProps): JSX.Element;
+    ({ children, size, name, disabled, onClick }: TAvatarProps): React.JSX.Element;
     displayName: string;
 } & {
     Image: ({ src, alt }: {
         src: string;
         alt: string;
-    }) => JSX.Element;
-    Initial: () => JSX.Element;
-    Placeholder: () => JSX.Element;
+    }) => React.JSX.Element;
+    Initial: () => React.JSX.Element;
+    Placeholder: () => React.JSX.Element;
     Icon: ({ is }: {
-        is: React.ForwardRefExoticComponent<Omit<Omit<Pick<React.SVGProps<SVGSVGElement>, "string" | "clipPath" | "color" | "cursor" | "direction" | "display" | "filter" | "fontFamily" | "fontSize" | "fontSizeAdjust" | "fontStretch" | "fontStyle" | "fontVariant" | "fontWeight" | "height" | "imageRendering" | "letterSpacing" | "opacity" | "order" | "paintOrder" | "pointerEvents" | "rotate" | "scale" | "textRendering" | "transform" | "unicodeBidi" | "visibility" | "width" | "wordSpacing" | "writingMode" | "mask" | "offset" | "overflow" | "textDecoration" | "alignmentBaseline" | "baselineShift" | "clip" | "clipRule" | "colorInterpolation" | "colorRendering" | "dominantBaseline" | "fill" | "fillOpacity" | "fillRule" | "floodColor" | "floodOpacity" | "glyphOrientationVertical" | "lightingColor" | "markerEnd" | "markerMid" | "markerStart" | "shapeRendering" | "stopColor" | "stopOpacity" | "stroke" | "strokeDasharray" | "strokeDashoffset" | "strokeLinecap" | "strokeLinejoin" | "strokeMiterlimit" | "strokeOpacity" | "strokeWidth" | "textAnchor" | "vectorEffect" | "local" | "media" | "style" | "path" | "key" | "method" | "name" | "target" | "className" | "id" | "lang" | "tabIndex" | "role" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "mode" | "min" | "max" | "end" | "x" | "y" | "alphabetic" | "hanging" | "ideographic" | "mathematical" | "type" | "crossOrigin" | "accentHeight" | "accumulate" | "additive" | "allowReorder" | "amplitude" | "arabicForm" | "ascent" | "attributeName" | "attributeType" | "autoReverse" | "azimuth" | "baseFrequency" | "baseProfile" | "bbox" | "begin" | "bias" | "by" | "calcMode" | "capHeight" | "clipPathUnits" | "colorInterpolationFilters" | "colorProfile" | "contentScriptType" | "contentStyleType" | "cx" | "cy" | "d" | "decelerate" | "descent" | "diffuseConstant" | "divisor" | "dur" | "dx" | "dy" | "edgeMode" | "elevation" | "enableBackground" | "exponent" | "externalResourcesRequired" | "filterRes" | "filterUnits" | "focusable" | "format" | "fr" | "from" | "fx" | "fy" | "g1" | "g2" | "glyphName" | "glyphOrientationHorizontal" | "glyphRef" | "gradientTransform" | "gradientUnits" | "horizAdvX" | "horizOriginX" | "href" | "in2" | "in" | "intercept" | "k1" | "k2" | "k3" | "k4" | "k" | "kernelMatrix" | "kernelUnitLength" | "kerning" | "keyPoints" | "keySplines" | "keyTimes" | "lengthAdjust" | "limitingConeAngle" | "markerHeight" | "markerUnits" | "markerWidth" | "maskContentUnits" | "maskUnits" | "numOctaves" | "operator" | "orient" | "orientation" | "origin" | "overlinePosition" | "overlineThickness" | "panose1" | "pathLength" | "patternContentUnits" | "patternTransform" | "patternUnits" | "points" | "pointsAtX" | "pointsAtY" | "pointsAtZ" | "preserveAlpha" | "preserveAspectRatio" | "primitiveUnits" | "r" | "radius" | "refX" | "refY" | "renderingIntent" | "repeatCount" | "repeatDur" | "requiredExtensions" | "requiredFeatures" | "restart" | "result" | "rx" | "ry" | "seed" | "slope" | "spacing" | "specularConstant" | "specularExponent" | "speed" | "spreadMethod" | "startOffset" | "stdDeviation" | "stemh" | "stemv" | "stitchTiles" | "strikethroughPosition" | "strikethroughThickness" | "surfaceScale" | "systemLanguage" | "tableValues" | "targetX" | "targetY" | "textLength" | "to" | "u1" | "u2" | "underlinePosition" | "underlineThickness" | "unicode" | "unicodeRange" | "unitsPerEm" | "vAlphabetic" | "values" | "version" | "vertAdvY" | "vertOriginX" | "vertOriginY" | "vHanging" | "vIdeographic" | "viewBox" | "viewTarget" | "vMathematical" | "widths" | "x1" | "x2" | "xChannelSelector" | "xHeight" | "xlinkActuate" | "xlinkArcrole" | "xlinkHref" | "xlinkRole" | "xlinkShow" | "xlinkTitle" | "xlinkType" | "xmlBase" | "xmlLang" | "xmlns" | "xmlnsXlink" | "xmlSpace" | "y1" | "y2" | "yChannelSelector" | "z" | "zoomAndPan"> & {
+        is: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.SVGProps<SVGSVGElement>, "ref"> & {
             ref?: ((instance: SVGSVGElement | null) => void) | React.RefObject<SVGSVGElement> | null | undefined;
-        }, "size" | "css"> & import("@stitches/react/types/styled-component").TransformProps<{
+        }, "size" | "css"> & import("@atom-learning/stitches-react/types/styled-component").TransformProps<{
             size?: "sm" | "md" | "lg" | undefined;
         }, {
             sm: string;
@@ -780,7 +774,7 @@ export declare const Avatar: {
             allowMotion: string;
             hover: string;
         }> & {
-            css?: import("@stitches/react/types/css-util").CSS<{
+            css?: import("@atom-learning/stitches-react/types/css-util").CSS<{
                 sm: string;
                 md: string;
                 lg: string;
@@ -820,6 +814,18 @@ export declare const Avatar: {
                     blue1000: any;
                     blue1100: any;
                     blue1200: any;
+                    pink100: any;
+                    pink200: any;
+                    pink300: any;
+                    pink400: any;
+                    pink500: any;
+                    pink600: any;
+                    pink700: any;
+                    pink800: any;
+                    pink900: any;
+                    pink1000: any;
+                    pink1100: any;
+                    pink1200: any;
                     purple100: any;
                     purple200: any;
                     purple300: any;
@@ -964,26 +970,11 @@ export declare const Avatar: {
                     marsh1000: any;
                     marsh1100: any;
                     marsh1200: any;
-                    tonal50: any;
-                    tonal100: any;
-                    tonal200: any;
-                    tonal300: any;
-                    tonal400: any;
-                    tonal500: any;
-                    tonal600: any;
                     alpha100: any;
                     alpha150: any;
                     alpha200: any;
                     alpha250: any;
                     alpha600: any;
-                    brandRed: any;
-                    brandRedAccent: any;
-                    brandGreen: any;
-                    brandGreenAccent: any;
-                    brandPurple: any;
-                    brandPurpleAccent: any;
-                    brandYellow: any;
-                    brandYellowAccent: any;
                     infoLight: any;
                     info: any;
                     infoMid: any;
@@ -1084,65 +1075,65 @@ export declare const Avatar: {
                     "1-1": any;
                     "3-4": any;
                 };
-            }, import("@stitches/react/types/config").DefaultThemeMap, {
-                bg: (value: import("@stitches/react/types/css-util").WithPropertyValue<"background">) => {
-                    background: import("@stitches/react/types/css-util").WithPropertyValue<"background">;
+            }, import("@atom-learning/stitches-react/types/config").DefaultThemeMap, {
+                bg: (value: import("@atom-learning/stitches-react/types/css-util").WithPropertyValue<"background">) => {
+                    background: import("@atom-learning/stitches-react/types/css-util").WithPropertyValue<"background">;
                 };
-                size: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"size">) => {
-                    height: string | number | import("@stitches/react/types/css-util").WithScaleValue<"size">;
-                    width: string | number | import("@stitches/react/types/css-util").WithScaleValue<"size">;
+                size: (value: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"size">) => {
+                    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: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-                    padding: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+                p: (value: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">) => {
+                    padding: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
                 };
-                pt: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-                    paddingTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+                pt: (value: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">) => {
+                    paddingTop: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
                 };
-                pr: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-                    paddingRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+                pr: (value: 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">;
                 };
-                pb: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-                    paddingBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+                pb: (value: 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">;
                 };
-                pl: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-                    paddingLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+                pl: (value: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">) => {
+                    paddingLeft: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
                 };
-                px: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-                    paddingLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-                    paddingRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+                px: (value: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">) => {
+                    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: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-                    paddingTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-                    paddingBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+                py: (value: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">) => {
+                    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: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-                    margin: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+                m: (value: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">) => {
+                    margin: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
                 };
-                mt: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-                    marginTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+                mt: (value: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">) => {
+                    marginTop: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
                 };
-                mr: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-                    marginRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+                mr: (value: 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">;
                 };
-                mb: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-                    marginBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+                mb: (value: 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">;
                 };
-                ml: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-                    marginLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+                ml: (value: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">) => {
+                    marginLeft: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
                 };
-                mx: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-                    marginLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-                    marginRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+                mx: (value: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">) => {
+                    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: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-                    marginTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-                    marginBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+                my: (value: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">) => {
+                    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">;
                 };
             }> | undefined;
         }, "is" | "as"> & {
             is: React.FC<React.SVGProps<SVGSVGElement>>;
             as?: undefined;
         }>;
-    }) => JSX.Element;
+    }) => React.JSX.Element;
 };
 export {};

package/dist/components/avatar/Avatar.js

@@ -1,2 +1,2 @@
-import*as o from"react";import{styled as n}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import{focusVisibleStyleBlock as c}from"../../utilities/style/focus-visible-style-block.js";import"../../utilities/style/keyframe-animations.js";import{AvatarIcon as v}from"./AvatarIcon.js";import{AvatarImage as p}from"./AvatarImage.js";import{AvatarInitial as u}from"./AvatarInitial.js";import{AvatarPlaceholder as b}from"./AvatarPlaceholder.js";const s={display:"flex",justifyContent:"center",alignItems:"center",color:"$tonal400",borderRadius:"$round",border:"2px solid $tonal100",backgroundColor:"$white",overflow:"hidden",variants:{size:{xs:{size:"$2"},sm:{size:"$3"},md:{size:"$4"},lg:{size:"$5"},xl:{size:"$6"},xxl:{size:"$7"}}}},z=n("div",s),$=n("button",{all:"unset",...s,"&:not([disabled])":{"&:hover":{borderColor:"$tonal400",backgroundColor:"$tonal50"},"&:active":{borderColor:"$primary800",backgroundColor:"$tonal100"},"&:focus-visible":c()},"&[disabled]":{opacity:"30%",cursor:"not-allowed"}}),m=o.createContext({name:void 0,size:"lg"}),d=({children:t,name:e,size:a})=>{const r=o.useMemo(()=>({name:e,size:a}),[e,a]);return o.createElement(m.Provider,{value:r},t)},i=({children:t,size:e="lg",name:a,disabled:r=!1,onClick:l})=>o.createElement(d,{name:a,size:e},l?o.createElement($,{size:e,disabled:r,onClick:r?void 0:l,css:{cursor:r?"auto":"pointer"}},t):o.createElement(z,{size:e},t)),f=Object.assign(i,{Image:p,Initial:u,Placeholder:b,Icon:v});i.displayName="Avatar";export{f as Avatar,i as AvatarRoot,m as AvatarRootContext,d as AvatarRootProvider};
+import*as r from"react";import{styled as s}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import{focusVisibleStyleBlock as c}from"../../utilities/style/focus-visible-style-block.js";import"../../utilities/style/keyframe-animations.js";import{AvatarIcon as v}from"./AvatarIcon.js";import{AvatarImage as p}from"./AvatarImage.js";import{AvatarInitial as u}from"./AvatarInitial.js";import{AvatarPlaceholder as b}from"./AvatarPlaceholder.js";const n={display:"flex",justifyContent:"center",alignItems:"center",color:"$grey800",borderRadius:"$round",border:"2px solid $grey200",backgroundColor:"$white",overflow:"hidden",variants:{size:{xs:{size:"$2"},sm:{size:"$3"},md:{size:"$4"},lg:{size:"$5"},xl:{size:"$6"},xxl:{size:"$7"}}}},g=s("div",n),z=s("button",{all:"unset",...n,"&:not([disabled])":{"&:hover":{borderColor:"$grey800",backgroundColor:"$grey100"},"&:active":{borderColor:"$primary800",backgroundColor:"$grey200"},"&:focus-visible":c()},"&[disabled]":{opacity:"30%",cursor:"not-allowed"}}),m=r.createContext({name:void 0,size:"lg"}),d=({children:t,name:e,size:i})=>{const o=r.useMemo(()=>({name:e,size:i}),[e,i]);return r.createElement(m.Provider,{value:o},t)},a=({children:t,size:e="lg",name:i,disabled:o=!1,onClick:l})=>r.createElement(d,{name:i,size:e},l?r.createElement(z,{size:e,disabled:o,onClick:o?void 0:l,css:{cursor:o?"auto":"pointer"}},t):r.createElement(g,{size:e},t)),$=Object.assign(a,{Image:p,Initial:u,Placeholder:b,Icon:v});a.displayName="Avatar";export{$ as Avatar,a as AvatarRoot,m as AvatarRootContext,d as AvatarRootProvider};
 //# sourceMappingURL=Avatar.js.map

package/dist/components/avatar/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","sources":["../../../src/components/avatar/Avatar.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/stitches'\nimport { focusVisibleStyleBlock } from '~/utilities'\n\nimport { AvatarIcon } from './AvatarIcon'\nimport { AvatarImage } from './AvatarImage'\nimport { AvatarInitial } from './AvatarInitial'\nimport { AvatarPlaceholder } from './AvatarPlaceholder'\n\nconst avatarRootStyles = {\n  display: 'flex',\n  justifyContent: 'center',\n  alignItems: 'center',\n  color: '$tonal400',\n  borderRadius: '$round',\n  border: '2px solid $tonal100',\n  backgroundColor: '$white',\n  overflow: 'hidden',\n  variants: {\n    size: {\n      xs: { size: '$2' },\n      sm: { size: '$3' },\n      md: { size: '$4' },\n      lg: { size: '$5' },\n      xl: { size: '$6' },\n      xxl: { size: '$7' }\n    }\n  }\n}\n\nconst StyledDiv = styled('div', avatarRootStyles)\nconst StyledButton = styled('button', {\n  all: 'unset',\n  ...avatarRootStyles,\n  '&:not([disabled])': {\n    '&:hover': {\n      borderColor: '$tonal400',\n      backgroundColor: '$tonal50'\n    },\n    '&:active': {\n      borderColor: '$primary800',\n      backgroundColor: '$tonal100'\n    },\n    '&:focus-visible': focusVisibleStyleBlock()\n  },\n  '&[disabled]': {\n    opacity: '30%',\n    cursor: 'not-allowed'\n  }\n})\n\ntype TAvatarProps = React.ComponentProps<\n  typeof StyledDiv | typeof StyledButton\n> & { name?: string } & (\n    | {\n        onClick: React.MouseEventHandler<HTMLButtonElement>\n        disabled?: boolean\n      }\n    | { onClick?: never; disabled?: never }\n  )\n\nexport type TAvatarRootContext = {\n  name?: TAvatarProps['name']\n  size: TAvatarProps['size']\n}\n\nexport const AvatarRootContext = React.createContext<TAvatarRootContext>({\n  name: undefined,\n  size: 'lg'\n})\n\nexport const AvatarRootProvider = ({ children, name, size }: TAvatarProps) => {\n  const value = React.useMemo<TAvatarRootContext>(\n    () => ({ name, size }),\n    [name, size]\n  )\n\n  return (\n    <AvatarRootContext.Provider value={value}>\n      {children}\n    </AvatarRootContext.Provider>\n  )\n}\n\nexport const AvatarRoot = ({\n  children,\n  size = 'lg',\n  name,\n  disabled = false,\n  onClick\n}: TAvatarProps) => (\n  <AvatarRootProvider name={name} size={size}>\n    {onClick ? (\n      <StyledButton\n        size={size}\n        disabled={disabled}\n        onClick={disabled ? undefined : onClick}\n        css={{ cursor: disabled ? 'auto' : 'pointer' }}\n      >\n        {children}\n      </StyledButton>\n    ) : (\n      <StyledDiv size={size}>{children}</StyledDiv>\n    )}\n  </AvatarRootProvider>\n)\n\nexport const Avatar = Object.assign(AvatarRoot, {\n  Image: AvatarImage,\n  Initial: AvatarInitial,\n  Placeholder: AvatarPlaceholder,\n  Icon: AvatarIcon\n})\n\nAvatarRoot.displayName = 'Avatar'\n"],"names":["avatarRootStyles","StyledDiv","styled","StyledButton","focusVisibleStyleBlock","AvatarRootContext","React","AvatarRootProvider","children","name","size","value","AvatarRoot","disabled","onClick","Avatar","AvatarImage","AvatarInitial","AvatarPlaceholder","AvatarIcon"],"mappings":"iiBAUA,MAAMA,EAAmB,CACvB,QAAS,OACT,eAAgB,SAChB,WAAY,SACZ,MAAO,YACP,aAAc,SACd,OAAQ,sBACR,gBAAiB,SACjB,SAAU,SACV,SAAU,CACR,KAAM,CACJ,GAAI,CAAE,KAAM,IAAK,EACjB,GAAI,CAAE,KAAM,IAAK,EACjB,GAAI,CAAE,KAAM,IAAK,EACjB,GAAI,CAAE,KAAM,IAAK,EACjB,GAAI,CAAE,KAAM,IAAK,EACjB,IAAK,CAAE,KAAM,IAAK,CACpB,CACF,CACF,EAEMC,EAAYC,EAAO,MAAOF,CAAgB,EAC1CG,EAAeD,EAAO,SAAU,CACpC,IAAK,QACL,GAAGF,EACH,oBAAqB,CACnB,UAAW,CACT,YAAa,YACb,gBAAiB,UACnB,EACA,WAAY,CACV,YAAa,cACb,gBAAiB,WACnB,EACA,kBAAmBI,EACrB,CAAA,EACA,cAAe,CACb,QAAS,MACT,OAAQ,aACV,CACF,CAAC,EAiBYC,EAAoBC,EAAM,cAAkC,CACvE,KAAM,OACN,KAAM,IACR,CAAC,EAEYC,EAAqB,CAAC,CAAE,SAAAC,EAAU,KAAAC,EAAM,KAAAC,CAAK,IAAoB,CAC5E,MAAMC,EAAQL,EAAM,QAClB,KAAO,CAAE,KAAAG,EAAM,KAAAC,CAAK,GACpB,CAACD,EAAMC,CAAI,CACb,EAEA,OACEJ,EAAA,cAACD,EAAkB,SAAlB,CAA2B,MAAOM,CAChCH,EAAAA,CACH,CAEJ,EAEaI,EAAa,CAAC,CACzB,SAAAJ,EACA,KAAAE,EAAO,KACP,KAAAD,EACA,SAAAI,EAAW,GACX,QAAAC,CACF,IACER,EAAA,cAACC,EAAA,CAAmB,KAAME,EAAM,KAAMC,CAAAA,EACnCI,EACCR,EAAA,cAACH,EAAA,CACC,KAAMO,EACN,SAAUG,EACV,QAASA,EAAW,OAAYC,EAChC,IAAK,CAAE,OAAQD,EAAW,OAAS,SAAU,CAE5CL,EAAAA,CACH,EAEAF,EAAA,cAACL,EAAA,CAAU,KAAMS,CAAOF,EAAAA,CAAS,CAErC,EAGWO,EAAS,OAAO,OAAOH,EAAY,CAC9C,MAAOI,EACP,QAASC,EACT,YAAaC,EACb,KAAMC,CACR,CAAC,EAEDP,EAAW,YAAc"}
+{"version":3,"file":"Avatar.js","sources":["../../../src/components/avatar/Avatar.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/stitches'\nimport { focusVisibleStyleBlock } from '~/utilities'\n\nimport { AvatarIcon } from './AvatarIcon'\nimport { AvatarImage } from './AvatarImage'\nimport { AvatarInitial } from './AvatarInitial'\nimport { AvatarPlaceholder } from './AvatarPlaceholder'\n\nconst avatarRootStyles = {\n  display: 'flex',\n  justifyContent: 'center',\n  alignItems: 'center',\n  color: '$grey800',\n  borderRadius: '$round',\n  border: '2px solid $grey200',\n  backgroundColor: '$white',\n  overflow: 'hidden',\n  variants: {\n    size: {\n      xs: { size: '$2' },\n      sm: { size: '$3' },\n      md: { size: '$4' },\n      lg: { size: '$5' },\n      xl: { size: '$6' },\n      xxl: { size: '$7' }\n    }\n  }\n}\n\nconst StyledDiv = styled('div', avatarRootStyles)\nconst StyledButton = styled('button', {\n  all: 'unset',\n  ...avatarRootStyles,\n  '&:not([disabled])': {\n    '&:hover': {\n      borderColor: '$grey800',\n      backgroundColor: '$grey100'\n    },\n    '&:active': {\n      borderColor: '$primary800',\n      backgroundColor: '$grey200'\n    },\n    '&:focus-visible': focusVisibleStyleBlock()\n  },\n  '&[disabled]': {\n    opacity: '30%',\n    cursor: 'not-allowed'\n  }\n})\n\ntype TAvatarProps = React.ComponentProps<\n  typeof StyledDiv | typeof StyledButton\n> & { name?: string } & (\n    | {\n        onClick: React.MouseEventHandler<HTMLButtonElement>\n        disabled?: boolean\n      }\n    | { onClick?: never; disabled?: never }\n  )\n\nexport type TAvatarRootContext = {\n  name?: TAvatarProps['name']\n  size: TAvatarProps['size']\n}\n\nexport const AvatarRootContext = React.createContext<TAvatarRootContext>({\n  name: undefined,\n  size: 'lg'\n})\n\nexport const AvatarRootProvider = ({ children, name, size }: TAvatarProps) => {\n  const value = React.useMemo<TAvatarRootContext>(\n    () => ({ name, size }),\n    [name, size]\n  )\n\n  return (\n    <AvatarRootContext.Provider value={value}>\n      {children}\n    </AvatarRootContext.Provider>\n  )\n}\n\nexport const AvatarRoot = ({\n  children,\n  size = 'lg',\n  name,\n  disabled = false,\n  onClick\n}: TAvatarProps) => (\n  <AvatarRootProvider name={name} size={size}>\n    {onClick ? (\n      <StyledButton\n        size={size}\n        disabled={disabled}\n        onClick={disabled ? undefined : onClick}\n        css={{ cursor: disabled ? 'auto' : 'pointer' }}\n      >\n        {children}\n      </StyledButton>\n    ) : (\n      <StyledDiv size={size}>{children}</StyledDiv>\n    )}\n  </AvatarRootProvider>\n)\n\nexport const Avatar = Object.assign(AvatarRoot, {\n  Image: AvatarImage,\n  Initial: AvatarInitial,\n  Placeholder: AvatarPlaceholder,\n  Icon: AvatarIcon\n})\n\nAvatarRoot.displayName = 'Avatar'\n"],"names":["avatarRootStyles","StyledDiv","styled","StyledButton","focusVisibleStyleBlock","AvatarRootContext","React","AvatarRootProvider","children","name","size","value","AvatarRoot","disabled","onClick","Avatar","AvatarImage","AvatarInitial","AvatarPlaceholder","AvatarIcon"],"mappings":"iiBAUA,MAAMA,EAAmB,CACvB,QAAS,OACT,eAAgB,SAChB,WAAY,SACZ,MAAO,WACP,aAAc,SACd,OAAQ,qBACR,gBAAiB,SACjB,SAAU,SACV,SAAU,CACR,KAAM,CACJ,GAAI,CAAE,KAAM,IAAK,EACjB,GAAI,CAAE,KAAM,IAAK,EACjB,GAAI,CAAE,KAAM,IAAK,EACjB,GAAI,CAAE,KAAM,IAAK,EACjB,GAAI,CAAE,KAAM,IAAK,EACjB,IAAK,CAAE,KAAM,IAAK,CACpB,CACF,CACF,EAEMC,EAAYC,EAAO,MAAOF,CAAgB,EAC1CG,EAAeD,EAAO,SAAU,CACpC,IAAK,QACL,GAAGF,EACH,oBAAqB,CACnB,UAAW,CACT,YAAa,WACb,gBAAiB,UACnB,EACA,WAAY,CACV,YAAa,cACb,gBAAiB,UACnB,EACA,kBAAmBI,EACrB,CAAA,EACA,cAAe,CACb,QAAS,MACT,OAAQ,aACV,CACF,CAAC,EAiBYC,EAAoBC,EAAM,cAAkC,CACvE,KAAM,OACN,KAAM,IACR,CAAC,EAEYC,EAAqB,CAAC,CAAE,SAAAC,EAAU,KAAAC,EAAM,KAAAC,CAAK,IAAoB,CAC5E,MAAMC,EAAQL,EAAM,QAClB,KAAO,CAAE,KAAAG,EAAM,KAAAC,CAAK,GACpB,CAACD,EAAMC,CAAI,CACb,EAEA,OACEJ,EAAA,cAACD,EAAkB,SAAlB,CAA2B,MAAOM,CAChCH,EAAAA,CACH,CAEJ,EAEaI,EAAa,CAAC,CACzB,SAAAJ,EACA,KAAAE,EAAO,KACP,KAAAD,EACA,SAAAI,EAAW,GACX,QAAAC,CACF,IACER,EAAA,cAACC,EAAA,CAAmB,KAAME,EAAM,KAAMC,CAAAA,EACnCI,EACCR,EAAA,cAACH,EAAA,CACC,KAAMO,EACN,SAAUG,EACV,QAASA,EAAW,OAAYC,EAChC,IAAK,CAAE,OAAQD,EAAW,OAAS,SAAU,CAE5CL,EAAAA,CACH,EAEAF,EAAA,cAACL,EAAA,CAAU,KAAMS,CAAOF,EAAAA,CAAS,CAErC,EAGWO,EAAS,OAAO,OAAOH,EAAY,CAC9C,MAAOI,EACP,QAASC,EACT,YAAaC,EACb,KAAMC,CACR,CAAC,EAEDP,EAAW,YAAc"}

package/dist/components/avatar/AvatarIcon.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { Icon } from '../icon';
 export declare const AvatarIcon: ({ is }: {
     is: typeof Icon;
-}) => JSX.Element;
+}) => React.JSX.Element;