@atom-learning/components 3.12.4 → 3.12.6

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

@@ -1,8 +1,4 @@
 import * as React from 'react';
-import { AvatarIcon } from './AvatarIcon';
-import { AvatarImage } from './AvatarImage';
-import { AvatarInitial } from './AvatarInitial';
-import { AvatarPlaceholder } from './AvatarPlaceholder';
 declare const StyledDiv: import("@stitches/react/types/styled-component").StyledComponent<"div", {
     size?: "sm" | "md" | "lg" | "xl" | "xs" | "xxl" | undefined;
 }, {
@@ -683,13 +679,362 @@ export declare type TAvatarRootContext = {
     size: TAvatarProps['size'];
 };
 export declare const AvatarRootContext: React.Context<TAvatarRootContext>;
-export declare const AvatarRootProvider: React.FC<TAvatarProps>;
-export declare const AvatarRoot: React.FC<TAvatarProps>;
-declare type TAvatar = typeof AvatarRoot & {
-    Image: typeof AvatarImage;
-    Initial: typeof AvatarInitial;
-    Placeholder: typeof AvatarPlaceholder;
-    Icon: typeof AvatarIcon;
+export declare const AvatarRootProvider: ({ children, name, size }: TAvatarProps) => JSX.Element;
+export declare const AvatarRoot: {
+    ({ children, size, name, disabled, onClick }: TAvatarProps): JSX.Element;
+    displayName: string;
+};
+export declare const Avatar: {
+    ({ children, size, name, disabled, onClick }: TAvatarProps): JSX.Element;
+    displayName: string;
+} & {
+    Image: ({ src, alt }: {
+        src: string;
+        alt: string;
+    }) => JSX.Element;
+    Initial: () => JSX.Element;
+    Placeholder: () => 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" | "onBlur" | "onChange" | "onSubmit" | "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" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "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"> & {
+            ref?: ((instance: SVGSVGElement | null) => void) | React.RefObject<SVGSVGElement> | null | undefined;
+        }, "size" | "css"> & import("@stitches/react/types/styled-component").TransformProps<{
+            size?: "sm" | "md" | "lg" | undefined;
+        }, {
+            sm: string;
+            md: string;
+            lg: string;
+            xl: string;
+            reducedMotion: string;
+            allowMotion: string;
+            hover: string;
+        }> & {
+            css?: import("@stitches/react/types/css-util").CSS<{
+                sm: string;
+                md: string;
+                lg: string;
+                xl: string;
+                reducedMotion: string;
+                allowMotion: string;
+                hover: string;
+            }, {
+                colors: {
+                    textBold: any;
+                    textRegular: any;
+                    textSubtle: any;
+                    textMinimal: any;
+                    background: any;
+                    backgroundAccent: any;
+                    grey100: any;
+                    grey200: any;
+                    grey300: any;
+                    grey400: any;
+                    grey500: any;
+                    grey600: any;
+                    grey700: any;
+                    grey800: any;
+                    grey900: any;
+                    grey1000: any;
+                    grey1100: any;
+                    grey1200: any;
+                    blue100: any;
+                    blue200: any;
+                    blue300: any;
+                    blue400: any;
+                    blue500: any;
+                    blue600: any;
+                    blue700: any;
+                    blue800: any;
+                    blue900: any;
+                    blue1000: any;
+                    blue1100: any;
+                    blue1200: any;
+                    purple100: any;
+                    purple200: any;
+                    purple300: any;
+                    purple400: any;
+                    purple500: any;
+                    purple600: any;
+                    purple700: any;
+                    purple800: any;
+                    purple900: any;
+                    purple1000: any;
+                    purple1100: any;
+                    purple1200: any;
+                    cyan100: any;
+                    cyan200: any;
+                    cyan300: any;
+                    cyan400: any;
+                    cyan500: any;
+                    cyan600: any;
+                    cyan700: any;
+                    cyan800: any;
+                    cyan900: any;
+                    cyan1000: any;
+                    cyan1100: any;
+                    cyan1200: any;
+                    green100: any;
+                    green200: any;
+                    green300: any;
+                    green400: any;
+                    green500: any;
+                    green600: any;
+                    green700: any;
+                    green800: any;
+                    green900: any;
+                    green1000: any;
+                    green1100: any;
+                    green1200: any;
+                    magenta100: any;
+                    magenta200: any;
+                    magenta300: any;
+                    magenta400: any;
+                    magenta500: any;
+                    magenta600: any;
+                    magenta700: any;
+                    magenta800: any;
+                    magenta900: any;
+                    magenta1000: any;
+                    magenta1100: any;
+                    magenta1200: any;
+                    red100: any;
+                    red200: any;
+                    red300: any;
+                    red400: any;
+                    red500: any;
+                    red600: any;
+                    red700: any;
+                    red800: any;
+                    red900: any;
+                    red1000: any;
+                    red1100: any;
+                    red1200: any;
+                    teal100: any;
+                    teal200: any;
+                    teal300: any;
+                    teal400: any;
+                    teal500: any;
+                    teal600: any;
+                    teal700: any;
+                    teal800: any;
+                    teal900: any;
+                    teal1000: any;
+                    teal1100: any;
+                    teal1200: any;
+                    orange100: any;
+                    orange200: any;
+                    orange300: any;
+                    orange400: any;
+                    orange500: any;
+                    orange600: any;
+                    orange700: any;
+                    orange800: any;
+                    orange900: any;
+                    orange1000: any;
+                    orange1100: any;
+                    orange1200: any;
+                    yellow100: any;
+                    yellow200: any;
+                    yellow300: any;
+                    yellow400: any;
+                    yellow500: any;
+                    yellow600: any;
+                    yellow700: any;
+                    yellow800: any;
+                    yellow900: any;
+                    yellow1000: any;
+                    yellow1100: any;
+                    yellow1200: any;
+                    lime100: any;
+                    lime200: any;
+                    lime300: any;
+                    lime400: any;
+                    lime500: any;
+                    lime600: any;
+                    lime700: any;
+                    lime800: any;
+                    lime900: any;
+                    lime1000: any;
+                    lime1100: any;
+                    lime1200: 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;
+                    infoDark: any;
+                    successLight: any;
+                    success: any;
+                    successMid: any;
+                    successDark: any;
+                    dangerLight: any;
+                    danger: any;
+                    dangerMid: any;
+                    dangerDark: any;
+                    warningLight: any;
+                    warning: any;
+                    warningMid: any;
+                    warningDark: any;
+                    warningText: any;
+                    subjectEnglish: any;
+                    subjectMaths: any;
+                    subjectScience: any;
+                    subjectVerbalReasoning: any;
+                    subjectNonVerbalReasoning: any;
+                    subjectCreativeWriting: any;
+                    subjectExamSkills: any;
+                    glBlueLight: any;
+                    glBluePrimary: any;
+                    glBlueDark: any;
+                    primary100: any;
+                    primary200: any;
+                    primary300: any;
+                    primary400: any;
+                    primary500: any;
+                    primary600: any;
+                    primary700: any;
+                    primary800: any;
+                    primary900: any;
+                    primary1000: any;
+                    primary1100: any;
+                    primary1200: any;
+                };
+                space: {
+                    "0": any;
+                    "1": any;
+                    "2": any;
+                    "3": any;
+                    "4": any;
+                    "5": any;
+                    "6": any;
+                    "7": any;
+                    "8": any;
+                    "9": any;
+                    "24": any;
+                };
+                fontSizes: {
+                    xs: any;
+                    sm: any;
+                    md: any;
+                    lg: any;
+                    xl: any;
+                    "2xl": any;
+                    "3xl": any;
+                    "4xl": any;
+                };
+                fonts: {
+                    sans: any;
+                    mono: any;
+                    display: any;
+                    body: any;
+                };
+                sizes: {
+                    "0": any;
+                    "1": any;
+                    "2": any;
+                    "3": any;
+                    "4": any;
+                    "5": any;
+                    "6": any;
+                    "7": any;
+                    "8": any;
+                };
+                radii: {
+                    "0": any;
+                    "1": any;
+                    "2": any;
+                    "3": any;
+                    round: any;
+                };
+                shadows: {
+                    "0": any;
+                    "1": any;
+                    "2": any;
+                    "3": any;
+                };
+                ratios: {
+                    "16-9": any;
+                    "3-2": any;
+                    "4-3": any;
+                    "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">;
+                };
+                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">;
+                };
+                p: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
+                    padding: string | number | import("@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">;
+                };
+                pr: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
+                    paddingRight: string | number | import("@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">;
+                };
+                pl: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
+                    paddingLeft: string | number | import("@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">;
+                };
+                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">;
+                };
+                m: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
+                    margin: string | number | import("@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">;
+                };
+                mr: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
+                    marginRight: string | number | import("@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">;
+                };
+                ml: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
+                    marginLeft: string | number | import("@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">;
+                };
+                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">;
+                };
+            }> | undefined;
+        }, "is" | "as"> & {
+            is: React.FC<React.SVGProps<SVGSVGElement>>;
+            as?: undefined;
+        }>;
+    }) => JSX.Element;
 };
-export declare const Avatar: TAvatar;
 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 v}from"../../utilities/style/focus-visible-style-block.js";import"../../utilities/style/keyframe-animations.js";import{AvatarIcon as p}from"./AvatarIcon.js";import{AvatarImage as u}from"./AvatarImage.js";import{AvatarInitial as b}from"./AvatarInitial.js";import{AvatarPlaceholder as z}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"}}}},$=n("div",s),f=n("button",{all:"unset",...s,"&:not([disabled])":{"&:hover":{borderColor:"$tonal400",backgroundColor:"$tonal50"},"&:active":{borderColor:"$primary800",backgroundColor:"$tonal100"},"&:focus-visible":v()},"&[disabled]":{opacity:"30%",cursor:"not-allowed"}}),m=o.createContext({name:void 0,size:"lg"}),d=({children:a,name:e,size:i})=>{const t=o.useMemo(()=>({name:e,size:i}),[e,i]);return o.createElement(m.Provider,{value:t},a)},c=({children:a,size:e="lg",name:i,disabled:t=!1,onClick:l})=>o.createElement(d,{name:i,size:e},l?o.createElement(f,{size:e,disabled:t,onClick:t?void 0:l,css:{cursor:t?"auto":"pointer"}},a):o.createElement($,{size:e},a)),r=c;r.Image=u,r.Initial=b,r.Placeholder=z,r.Icon=p,r.displayName="Avatar";export{r as Avatar,c as AvatarRoot,m as AvatarRootContext,d as AvatarRootProvider};
+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};
 //# 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: React.FC<TAvatarProps> = ({\n  children,\n  name,\n  size\n}) => {\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: React.FC<TAvatarProps> = ({\n  children,\n  size = 'lg',\n  name,\n  disabled = false,\n  onClick\n}) => (\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\ntype TAvatar = typeof AvatarRoot & {\n  Image: typeof AvatarImage\n  Initial: typeof AvatarInitial\n  Placeholder: typeof AvatarPlaceholder\n  Icon: typeof AvatarIcon\n}\n\nexport const Avatar = AvatarRoot as TAvatar\nAvatar.Image = AvatarImage\nAvatar.Initial = AvatarInitial\nAvatar.Placeholder = AvatarPlaceholder\nAvatar.Icon = AvatarIcon\nAvatar.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,EAA6C,CAAC,CACzD,SAAAC,EACA,KAAAC,EACA,KAAAC,CACF,IAAM,CACJ,MAAMC,EAAQL,EAAM,QAClB,KAAO,CAAE,KAAAG,EAAM,KAAAC,CAAK,GACpB,CAACD,EAAMC,CAAI,CACb,EAEA,OACEJ,EAAA,cAACD,EAAkB,SAAlB,CAA2B,MAAOM,CAAAA,EAChCH,CACH,CAEJ,EAEaI,EAAqC,CAAC,CACjD,SAAAJ,EACA,KAAAE,EAAO,KACP,KAAAD,EACA,SAAAI,EAAW,GACX,QAAAC,CACF,IACER,EAAA,cAACC,EAAmB,CAAA,KAAME,EAAM,KAAMC,CACnCI,EAAAA,EACCR,EAAA,cAACH,EAAA,CACC,KAAMO,EACN,SAAUG,EACV,QAASA,EAAW,OAAYC,EAChC,IAAK,CAAE,OAAQD,EAAW,OAAS,SAAU,CAAA,EAE5CL,CACH,EAEAF,EAAA,cAACL,EAAA,CAAU,KAAMS,CAAAA,EAAOF,CAAS,CAErC,EAUWO,EAASH,EACtBG,EAAO,MAAQC,EACfD,EAAO,QAAUE,EACjBF,EAAO,YAAcG,EACrBH,EAAO,KAAOI,EACdJ,EAAO,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: '$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"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"AvatarIcon.js","sources":["../../../src/components/avatar/AvatarIcon.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { overrideStitchesVariantValue } from '~/utilities/override-stitches-variant-value/overrideStitchesVariantValue'\n\nimport { Icon } from '../icon'\nimport { AvatarRootContext } from './Avatar'\n\nconst toIconSize = {\n  xs: 'sm',\n  sm: 'sm',\n  md: 'md',\n  lg: 'md',\n  xl: 'lg',\n  xxl: 'lg'\n}\n\ntype TAvatarIconProps = {\n  is: typeof Icon\n}\n\nexport const AvatarIcon: React.FC<TAvatarIconProps> = ({ is }) => {\n  const rootContext = React.useContext(AvatarRootContext)\n  const { size } = rootContext\n  const iconSize = React.useMemo(\n    () => overrideStitchesVariantValue(size, (s) => toIconSize[s]),\n    [size]\n  )\n\n  return <Icon size={iconSize} is={is} />\n}\n"],"names":["toIconSize","AvatarIcon","is","rootContext","React","AvatarRootContext","size","iconSize","overrideStitchesVariantValue","s","Icon"],"mappings":"8OAOA,MAAMA,EAAa,CACjB,GAAI,KACJ,GAAI,KACJ,GAAI,KACJ,GAAI,KACJ,GAAI,KACJ,IAAK,IACP,EAMaC,EAAyC,CAAC,CAAE,GAAAC,CAAG,IAAM,CAChE,MAAMC,EAAcC,EAAM,WAAWC,CAAiB,EAChD,CAAE,KAAAC,CAAK,EAAIH,EACXI,EAAWH,EAAM,QACrB,IAAMI,EAA6BF,EAAOG,GAAMT,EAAWS,EAAE,EAC7D,CAACH,CAAI,CACP,EAEA,OAAOF,EAAA,cAACM,EAAA,CAAK,KAAMH,EAAU,GAAIL,EAAI,CACvC"}
+{"version":3,"file":"AvatarIcon.js","sources":["../../../src/components/avatar/AvatarIcon.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { overrideStitchesVariantValue } from '~/utilities/override-stitches-variant-value/overrideStitchesVariantValue'\n\nimport { Icon } from '../icon'\nimport { AvatarRootContext } from './Avatar'\n\nconst toIconSize = {\n  xs: 'sm',\n  sm: 'sm',\n  md: 'md',\n  lg: 'md',\n  xl: 'lg',\n  xxl: 'lg'\n}\n\nexport const AvatarIcon = ({ is }: { is: typeof Icon }) => {\n  const rootContext = React.useContext(AvatarRootContext)\n  const { size } = rootContext\n  const iconSize = React.useMemo(\n    () => overrideStitchesVariantValue(size, (s) => toIconSize[s]),\n    [size]\n  )\n\n  return <Icon size={iconSize} is={is} />\n}\n"],"names":["toIconSize","AvatarIcon","is","rootContext","React","AvatarRootContext","size","iconSize","overrideStitchesVariantValue","s","Icon"],"mappings":"8OAOA,MAAMA,EAAa,CACjB,GAAI,KACJ,GAAI,KACJ,GAAI,KACJ,GAAI,KACJ,GAAI,KACJ,IAAK,IACP,EAEaC,EAAa,CAAC,CAAE,GAAAC,CAAG,IAA2B,CACzD,MAAMC,EAAcC,EAAM,WAAWC,CAAiB,EAChD,CAAE,KAAAC,CAAK,EAAIH,EACXI,EAAWH,EAAM,QACrB,IAAMI,EAA6BF,EAAOG,GAAMT,EAAWS,EAAE,EAC7D,CAACH,CAAI,CACP,EAEA,OAAOF,EAAA,cAACM,EAAA,CAAK,KAAMH,EAAU,GAAIL,EAAI,CACvC"}

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

@@ -1,7 +1,5 @@
-import * as React from 'react';
-declare type TAvatarImageProps = {
+/// <reference types="react" />
+export declare const AvatarImage: ({ src, alt }: {
     src: string;
     alt: string;
-};
-export declare const AvatarImage: React.FC<TAvatarImageProps>;
-export {};
+}) => JSX.Element;

package/dist/components/avatar/AvatarImage.js

@@ -1,2 +1,2 @@
-import*as e from"react";import{styled as o}from"../../stitches.js";import{Image as a}from"../image/Image.js";import{AvatarInitial as m}from"./AvatarInitial.js";const i=o(a,{size:"100%",objectFit:"cover"}),c=({src:t,alt:r})=>t?e.createElement(i,{src:t,alt:r}):e.createElement(m,null);export{c as AvatarImage};
+import*as e from"react";import{styled as o}from"../../stitches.js";import{Image as a}from"../image/Image.js";import{AvatarInitial as m}from"./AvatarInitial.js";const c=o(a,{size:"100%",objectFit:"cover"}),i=({src:t,alt:r})=>t?e.createElement(c,{src:t,alt:r}):e.createElement(m,null);export{i as AvatarImage};
 //# sourceMappingURL=AvatarImage.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"AvatarImage.js","sources":["../../../src/components/avatar/AvatarImage.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/stitches'\n\nimport { Image } from '../image'\nimport { AvatarInitial } from './AvatarInitial'\n\nconst StyledImage = styled(Image, {\n  size: '100%',\n  objectFit: 'cover'\n})\n\ntype TAvatarImageProps = {\n  src: string\n  alt: string\n}\n\nexport const AvatarImage: React.FC<TAvatarImageProps> = ({ src, alt }) => {\n  if (!src) {\n    return <AvatarInitial />\n  }\n\n  return <StyledImage src={src} alt={alt} />\n}\n"],"names":["StyledImage","styled","Image","AvatarImage","src","alt","React","AvatarInitial"],"mappings":"gKAOA,MAAMA,EAAcC,EAAOC,EAAO,CAChC,KAAM,OACN,UAAW,OACb,CAAC,EAOYC,EAA2C,CAAC,CAAE,IAAAC,EAAK,IAAAC,CAAI,IAC7DD,EAIEE,EAAA,cAACN,EAAA,CAAY,IAAKI,EAAK,IAAKC,EAAK,EAH/BC,EAAA,cAACC,EAAA,IAAc"}
+{"version":3,"file":"AvatarImage.js","sources":["../../../src/components/avatar/AvatarImage.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/stitches'\n\nimport { Image } from '../image'\nimport { AvatarInitial } from './AvatarInitial'\n\nconst StyledImage = styled(Image, {\n  size: '100%',\n  objectFit: 'cover'\n})\n\nexport const AvatarImage = ({ src, alt }: { src: string; alt: string }) => {\n  if (!src) {\n    return <AvatarInitial />\n  }\n\n  return <StyledImage src={src} alt={alt} />\n}\n"],"names":["StyledImage","styled","Image","AvatarImage","src","alt","React","AvatarInitial"],"mappings":"gKAOA,MAAMA,EAAcC,EAAOC,EAAO,CAChC,KAAM,OACN,UAAW,OACb,CAAC,EAEYC,EAAc,CAAC,CAAE,IAAAC,EAAK,IAAAC,CAAI,IAChCD,EAIEE,EAAA,cAACN,EAAA,CAAY,IAAKI,EAAK,IAAKC,EAAK,EAH/BC,EAAA,cAACC,EAAA,IAAc"}

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

@@ -1,2 +1,2 @@
-import * as React from 'react';
-export declare const AvatarInitial: React.FC<Record<string, never>>;
+/// <reference types="react" />
+export declare const AvatarInitial: () => JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"file":"AvatarInitial.js","sources":["../../../src/components/avatar/AvatarInitial.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { overrideStitchesVariantValue } from '~/utilities/override-stitches-variant-value/overrideStitchesVariantValue'\n\nimport { Text } from '../text'\nimport { AvatarRootContext } from './Avatar'\nimport { AvatarPlaceholder } from './AvatarPlaceholder'\n\nconst toTextSize = {\n  xs: 'xs',\n  sm: 'sm',\n  md: 'sm',\n  lg: 'md',\n  xl: 'md',\n  xxl: 'lg'\n}\n\nexport const AvatarInitial: React.FC<Record<string, never>> = () => {\n  const rootContext = React.useContext(AvatarRootContext)\n  const { name, size } = rootContext\n  const textSize = React.useMemo(\n    () => overrideStitchesVariantValue(size, (s) => toTextSize[s]),\n    [size]\n  )\n\n  if (!name) {\n    return <AvatarPlaceholder />\n  }\n\n  return (\n    <Text size={textSize} css={{ color: '$tonal400' }}>\n      {name[0].toUpperCase()}\n    </Text>\n  )\n}\n"],"names":["toTextSize","AvatarInitial","rootContext","React","AvatarRootContext","name","size","textSize","overrideStitchesVariantValue","s","Text","AvatarPlaceholder"],"mappings":"ySAQA,MAAMA,EAAa,CACjB,GAAI,KACJ,GAAI,KACJ,GAAI,KACJ,GAAI,KACJ,GAAI,KACJ,IAAK,IACP,EAEaC,EAAiD,IAAM,CAClE,MAAMC,EAAcC,EAAM,WAAWC,CAAiB,EAChD,CAAE,KAAAC,EAAM,KAAAC,CAAK,EAAIJ,EACjBK,EAAWJ,EAAM,QACrB,IAAMK,EAA6BF,EAAOG,GAAMT,EAAWS,EAAE,EAC7D,CAACH,CAAI,CACP,EAEA,OAAKD,EAKHF,EAAA,cAACO,EAAA,CAAK,KAAMH,EAAU,IAAK,CAAE,MAAO,WAAY,GAC7CF,EAAK,GAAG,YACX,CAAA,EANOF,EAAA,cAACQ,EAAA,IAAkB,CAQ9B"}
+{"version":3,"file":"AvatarInitial.js","sources":["../../../src/components/avatar/AvatarInitial.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { overrideStitchesVariantValue } from '~/utilities/override-stitches-variant-value/overrideStitchesVariantValue'\n\nimport { Text } from '../text'\nimport { AvatarRootContext } from './Avatar'\nimport { AvatarPlaceholder } from './AvatarPlaceholder'\n\nconst toTextSize = {\n  xs: 'xs',\n  sm: 'sm',\n  md: 'sm',\n  lg: 'md',\n  xl: 'md',\n  xxl: 'lg'\n}\n\nexport const AvatarInitial = () => {\n  const rootContext = React.useContext(AvatarRootContext)\n  const { name, size } = rootContext\n  const textSize = React.useMemo(\n    () => overrideStitchesVariantValue(size, (s) => toTextSize[s]),\n    [size]\n  )\n\n  if (!name) {\n    return <AvatarPlaceholder />\n  }\n\n  return (\n    <Text size={textSize} css={{ color: '$tonal400' }}>\n      {name[0].toUpperCase()}\n    </Text>\n  )\n}\n"],"names":["toTextSize","AvatarInitial","rootContext","React","AvatarRootContext","name","size","textSize","overrideStitchesVariantValue","s","Text","AvatarPlaceholder"],"mappings":"ySAQA,MAAMA,EAAa,CACjB,GAAI,KACJ,GAAI,KACJ,GAAI,KACJ,GAAI,KACJ,GAAI,KACJ,IAAK,IACP,EAEaC,EAAgB,IAAM,CACjC,MAAMC,EAAcC,EAAM,WAAWC,CAAiB,EAChD,CAAE,KAAAC,EAAM,KAAAC,CAAK,EAAIJ,EACjBK,EAAWJ,EAAM,QACrB,IAAMK,EAA6BF,EAAOG,GAAMT,EAAWS,EAAE,EAC7D,CAACH,CAAI,CACP,EAEA,OAAKD,EAKHF,EAAA,cAACO,EAAA,CAAK,KAAMH,EAAU,IAAK,CAAE,MAAO,WAAY,GAC7CF,EAAK,GAAG,YACX,CAAA,EANOF,EAAA,cAACQ,EAAA,IAAkB,CAQ9B"}

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

@@ -1,2 +1,2 @@
-import * as React from 'react';
-export declare const AvatarPlaceholder: React.FC<Record<string, never>>;
+/// <reference types="react" />
+export declare const AvatarPlaceholder: () => JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"file":"AvatarPlaceholder.js","sources":["../../../src/components/avatar/AvatarPlaceholder.tsx"],"sourcesContent":["import { User } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { Box } from '../box'\nimport { Icon } from '../icon'\n\nexport const AvatarPlaceholder: React.FC<Record<string, never>> = () => {\n  return (\n    <Box css={{ position: 'relative', size: '100%' }}>\n      <Icon is={User} css={{ size: '100%' }} />\n    </Box>\n  )\n}\n"],"names":["AvatarPlaceholder","React","Box","Icon","User"],"mappings":"+IAMa,MAAAA,EAAqD,IAE9DC,EAAA,cAACC,EAAA,CAAI,IAAK,CAAE,SAAU,WAAY,KAAM,MAAO,GAC7CD,EAAA,cAACE,EAAA,CAAK,GAAIC,EAAM,IAAK,CAAE,KAAM,MAAO,EAAG,CACzC"}
+{"version":3,"file":"AvatarPlaceholder.js","sources":["../../../src/components/avatar/AvatarPlaceholder.tsx"],"sourcesContent":["import { User } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { Box } from '../box'\nimport { Icon } from '../icon'\n\nexport const AvatarPlaceholder = () => {\n  return (\n    <Box css={{ position: 'relative', size: '100%' }}>\n      <Icon is={User} css={{ size: '100%' }} />\n    </Box>\n  )\n}\n"],"names":["AvatarPlaceholder","React","Box","Icon","User"],"mappings":"+IAMa,MAAAA,EAAoB,IAE7BC,EAAA,cAACC,EAAA,CAAI,IAAK,CAAE,SAAU,WAAY,KAAM,MAAO,GAC7CD,EAAA,cAACE,EAAA,CAAK,GAAIC,EAAM,IAAK,CAAE,KAAM,MAAO,EAAG,CACzC"}