@shoplflow/base 0.22.0 → 0.22.2

package/dist/index.d.cts

@@ -1,13 +1,13 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React$1 from 'react';
-import React__default, { ReactNode, ElementType, ComponentPropsWithoutRef, ReactElement, ComponentPropsWithRef, CSSProperties, HTMLAttributes, InputHTMLAttributes, MouseEvent } from 'react';
-import * as framer_motion from 'framer-motion';
-import { CustomDomComponent } from 'framer-motion';
+import React__default, { ReactNode, ElementType, ComponentPropsWithoutRef, ReactElement, ImgHTMLAttributes, ComponentPropsWithRef, CSSProperties, HTMLAttributes, InputHTMLAttributes, MouseEvent } from 'react';
+import { $Values } from '@shoplflow/utils';
 import { IconSource } from '@shoplflow/shopl-assets';
 import { IconSource as IconSource$1 } from '@shoplflow/hada-assets';
+import * as framer_motion from 'framer-motion';
+import { CustomDomComponent } from 'framer-motion';
 import * as _emotion_styled from '@emotion/styled';
 import * as _emotion_react from '@emotion/react';
-import { $Values } from '@shoplflow/utils';
 import { AutoPlacementOptions, Placement } from '@floating-ui/react';
 export { arrow, flip, hide, inline, offset, shift, size } from '@floating-ui/react';
 import { Middleware } from '@floating-ui/react-dom';
@@ -277,6 +277,25 @@ interface RightElementProps {
 interface LeftAndRightElementProps extends RightElementProps, LeftElementProps {
 }
 
+declare const AvatarSizeVariants: {
+    readonly XS: "XS";
+    readonly S: "S";
+    readonly M: "M";
+    readonly L: "L";
+    readonly XL: "XL";
+};
+declare type AvatarSizeVariantType = $Values<typeof AvatarSizeVariants>;
+interface AvatarProps extends AvatarOptionProps {
+}
+interface AvatarOptionProps extends SizeVariantProps<AvatarSizeVariantType>, ImgHTMLAttributes<HTMLImageElement> {
+    /**
+     * 아바타 우측 하단에 배지를 표시합니다.
+     */
+    badge?: ReactNode;
+}
+
+declare const Avatar: ({ src, badge, ...rest }: AvatarProps) => react_jsx_runtime.JSX.Element;
+
 declare type StackGenericProps<T extends StringElementType = 'div'> = RenderConfigProps & StackProps & HTMLPropsWithoutRef<T>;
 declare type StackComponentType = <T extends StringElementType = 'div'>(props: StackGenericProps<T> & Pick<ComponentPropsWithRef<T>, 'ref'>) => ReactElement | null;
 declare type MotionStackComponentType<T extends StringElementType = 'div'> = CustomDomComponent<RenderConfigProps & HTMLPropsWithoutRef<T> & StackProps>;
@@ -448,7 +467,7 @@ interface ChipToggleProps extends ChipToggleOptionProps, SelectedProps, DefaultS
 interface ChipToggleOptionProps {
 }
 
-declare const ChipToggle: ({ text, isSelected, defaultSelected, color, styleVar, sizeVar, leftSource, rightSource, onClick, disabled, ...rest }: ChipToggleProps) => react_jsx_runtime.JSX.Element;
+declare const ChipToggle: ({ text, isSelected, defaultSelected, color, radius, styleVar, sizeVar, leftSource, rightSource, onClick, disabled, ...rest }: ChipToggleProps) => react_jsx_runtime.JSX.Element;
 
 declare const ChipButtonStyleVariants: {
     readonly LINE: "LINE";
@@ -745,7 +764,7 @@ declare const Dropdown: {
     Content: ({ children, width: initialWidth, type, onClick, ...rest }: DropdownContentProps) => react_jsx_runtime.JSX.Element;
 };
 
-declare const getDropdownHeightBySizeVar: (size: DropdownSizeVariantType) => "40px" | "32px";
+declare const getDropdownHeightBySizeVar: (size: DropdownSizeVariantType) => "32px" | "40px";
 declare const getDropdownFontSizeBySizeVar: (size: DropdownSizeVariantType) => "body1_400" | "body2_400";
 declare const getDropdownStyleBySizeVar: (size: DropdownSizeVariantType) => _emotion_react.SerializedStyles;
 declare const getDropdownIconSizeBySizeVar: (size: DropdownSizeVariantType) => _emotion_react.SerializedStyles;
@@ -1216,4 +1235,4 @@ interface RadioOptionProps extends SelectedProps, DefaultSelectedProps, DisableP
 
 declare const Radio: ({ isSelected, defaultSelected, disabled, onClick, onMouseEnter, onMouseLeave, ...rest }: RadioProps) => react_jsx_runtime.JSX.Element;
 
-export { BackDropOptionProps, BackDropProps, BorderRadiusTokens, BoxShadowTokens, Button, ButtonComponent, ButtonOptionProps, ButtonProps, ButtonSizeVariantType, ButtonSizeVariants, ButtonStyleVariantType, ButtonStyleVariants, Callout, CalloutOptionProps, CalloutProps, CalloutType, CalloutTypes, Checkbox, CheckboxOptionProps, CheckboxProps, CheckboxStyleVariantType, CheckboxStyleVariants, ChipButton, ChipButtonOptionProps, ChipButtonProps, ChipButtonSizeVariantType, ChipButtonSizeVariants, ChipButtonStyleVariantType, ChipButtonStyleVariants, ChipToggle, ChipToggleOptionProps, ChipToggleProps, ChipToggleSizeVariantType, ChipToggleSizeVariants, ChipToggleStyleVariantType, ChipToggleStyleVariants, ColorTokens, Dropdown, DropdownButtonIcon, DropdownButtonProps, DropdownContentProps, DropdownOptionProps, DropdownOptionVariantType, DropdownProps, DropdownSizeVariantType, FontWeightTokens, Icon, IconButton, IconButtonComponent, IconButtonOptionProps, IconButtonProps, IconButtonSizeVariantType, IconButtonSizeVariants, IconButtonStyleVariantType, IconButtonStyleVariants, IconOptionProps, IconProps, IconSizeVariants, IconSizeVariantsType, Input, InputButton, InputButtonOptionProps, InputButtonProps, InputOptionProps, InputProps, List, ListContent2ColumnsProps, ListOptionProps, ListProps, ListText2RowsProps, MODAL_FOOTER_KEY, MODAL_HEADER_KEY, Menu, MenuOptionProps, MenuProps, MenuSizeVariantType, MenuSizeVariants, MinusBoxOptionProps, MinusBoxProps, MinusButton, Modal, ModalBodyOptionProps, ModalBodyProps, ModalContainerOptionProps, ModalContainerProps, ModalFooterOptionProps, ModalFooterProps, ModalFooterType, ModalHeaderOptionProps, ModalHeaderProps, ModalHeaderType, ModalPortal as ModalProvider, ModalSize, ModalSizeType, MotionStack, MotionStackComponentType, Popper, PopperOptionProps, PopperPortal, PopperPortalProps, PopperProps, PopperTrigger, PopperTriggerProps, Radio, RadioOptionProps, RadioProps, ScrollArea, ScrollAreaOptionProps, ScrollAreaProps, ShoplflowProvider, ShoplflowProviderProps, SpacingTokens, Stack, StackComponentType, StackGenericProps, StackOptionProps, StackProps, StyledDropdown, StyledDropdownButton, StyledDropdownContent, StyledIcon, StyledInputButton, StyledInputButtonContent, StyledList, StyledMenu, StyledPopper, StyledStack, StyledText2Rows, Switch, SwitchOptionProps, SwitchProps, Tag, TagOptionProps, TagProps, TagSizeVariantType, TagSizeVariants, TagStyleVariantType, TagStyleVariants, Text, Text2Rows, TextArea, TextAreaOptionProps, TextAreaProps, TextOptionProps, TextProps, TypographyTokens, borderRadiusTokens, boxShadowTokens, colorTokens, fontWeightTokens, getDomain, getDropdownFontSizeBySizeVar, getDropdownHeightBySizeVar, getDropdownIconSizeBySizeVar, getDropdownStyleBySizeVar, getFontStylesBySizeVar, spacingTokens, typographyTokens, useDomain, useHandleModal, useModalValue };
+export { Avatar, AvatarOptionProps, AvatarProps, AvatarSizeVariantType, AvatarSizeVariants, BackDropOptionProps, BackDropProps, BorderRadiusTokens, BoxShadowTokens, Button, ButtonComponent, ButtonOptionProps, ButtonProps, ButtonSizeVariantType, ButtonSizeVariants, ButtonStyleVariantType, ButtonStyleVariants, Callout, CalloutOptionProps, CalloutProps, CalloutType, CalloutTypes, Checkbox, CheckboxOptionProps, CheckboxProps, CheckboxStyleVariantType, CheckboxStyleVariants, ChipButton, ChipButtonOptionProps, ChipButtonProps, ChipButtonSizeVariantType, ChipButtonSizeVariants, ChipButtonStyleVariantType, ChipButtonStyleVariants, ChipToggle, ChipToggleOptionProps, ChipToggleProps, ChipToggleSizeVariantType, ChipToggleSizeVariants, ChipToggleStyleVariantType, ChipToggleStyleVariants, ColorTokens, Dropdown, DropdownButtonIcon, DropdownButtonProps, DropdownContentProps, DropdownOptionProps, DropdownOptionVariantType, DropdownProps, DropdownSizeVariantType, FontWeightTokens, Icon, IconButton, IconButtonComponent, IconButtonOptionProps, IconButtonProps, IconButtonSizeVariantType, IconButtonSizeVariants, IconButtonStyleVariantType, IconButtonStyleVariants, IconOptionProps, IconProps, IconSizeVariants, IconSizeVariantsType, Input, InputButton, InputButtonOptionProps, InputButtonProps, InputOptionProps, InputProps, List, ListContent2ColumnsProps, ListOptionProps, ListProps, ListText2RowsProps, MODAL_FOOTER_KEY, MODAL_HEADER_KEY, Menu, MenuOptionProps, MenuProps, MenuSizeVariantType, MenuSizeVariants, MinusBoxOptionProps, MinusBoxProps, MinusButton, Modal, ModalBodyOptionProps, ModalBodyProps, ModalContainerOptionProps, ModalContainerProps, ModalFooterOptionProps, ModalFooterProps, ModalFooterType, ModalHeaderOptionProps, ModalHeaderProps, ModalHeaderType, ModalPortal as ModalProvider, ModalSize, ModalSizeType, MotionStack, MotionStackComponentType, Popper, PopperOptionProps, PopperPortal, PopperPortalProps, PopperProps, PopperTrigger, PopperTriggerProps, Radio, RadioOptionProps, RadioProps, ScrollArea, ScrollAreaOptionProps, ScrollAreaProps, ShoplflowProvider, ShoplflowProviderProps, SpacingTokens, Stack, StackComponentType, StackGenericProps, StackOptionProps, StackProps, StyledDropdown, StyledDropdownButton, StyledDropdownContent, StyledIcon, StyledInputButton, StyledInputButtonContent, StyledList, StyledMenu, StyledPopper, StyledStack, StyledText2Rows, Switch, SwitchOptionProps, SwitchProps, Tag, TagOptionProps, TagProps, TagSizeVariantType, TagSizeVariants, TagStyleVariantType, TagStyleVariants, Text, Text2Rows, TextArea, TextAreaOptionProps, TextAreaProps, TextOptionProps, TextProps, TypographyTokens, borderRadiusTokens, boxShadowTokens, colorTokens, fontWeightTokens, getDomain, getDropdownFontSizeBySizeVar, getDropdownHeightBySizeVar, getDropdownIconSizeBySizeVar, getDropdownStyleBySizeVar, getFontStylesBySizeVar, spacingTokens, typographyTokens, useDomain, useHandleModal, useModalValue };

package/dist/index.d.ts

@@ -1,13 +1,13 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React$1 from 'react';
-import React__default, { ReactNode, ElementType, ComponentPropsWithoutRef, ReactElement, ComponentPropsWithRef, CSSProperties, HTMLAttributes, InputHTMLAttributes, MouseEvent } from 'react';
-import * as framer_motion from 'framer-motion';
-import { CustomDomComponent } from 'framer-motion';
+import React__default, { ReactNode, ElementType, ComponentPropsWithoutRef, ReactElement, ImgHTMLAttributes, ComponentPropsWithRef, CSSProperties, HTMLAttributes, InputHTMLAttributes, MouseEvent } from 'react';
+import { $Values } from '@shoplflow/utils';
 import { IconSource } from '@shoplflow/shopl-assets';
 import { IconSource as IconSource$1 } from '@shoplflow/hada-assets';
+import * as framer_motion from 'framer-motion';
+import { CustomDomComponent } from 'framer-motion';
 import * as _emotion_styled from '@emotion/styled';
 import * as _emotion_react from '@emotion/react';
-import { $Values } from '@shoplflow/utils';
 import { AutoPlacementOptions, Placement } from '@floating-ui/react';
 export { arrow, flip, hide, inline, offset, shift, size } from '@floating-ui/react';
 import { Middleware } from '@floating-ui/react-dom';
@@ -277,6 +277,25 @@ interface RightElementProps {
 interface LeftAndRightElementProps extends RightElementProps, LeftElementProps {
 }
 
+declare const AvatarSizeVariants: {
+    readonly XS: "XS";
+    readonly S: "S";
+    readonly M: "M";
+    readonly L: "L";
+    readonly XL: "XL";
+};
+declare type AvatarSizeVariantType = $Values<typeof AvatarSizeVariants>;
+interface AvatarProps extends AvatarOptionProps {
+}
+interface AvatarOptionProps extends SizeVariantProps<AvatarSizeVariantType>, ImgHTMLAttributes<HTMLImageElement> {
+    /**
+     * 아바타 우측 하단에 배지를 표시합니다.
+     */
+    badge?: ReactNode;
+}
+
+declare const Avatar: ({ src, badge, ...rest }: AvatarProps) => react_jsx_runtime.JSX.Element;
+
 declare type StackGenericProps<T extends StringElementType = 'div'> = RenderConfigProps & StackProps & HTMLPropsWithoutRef<T>;
 declare type StackComponentType = <T extends StringElementType = 'div'>(props: StackGenericProps<T> & Pick<ComponentPropsWithRef<T>, 'ref'>) => ReactElement | null;
 declare type MotionStackComponentType<T extends StringElementType = 'div'> = CustomDomComponent<RenderConfigProps & HTMLPropsWithoutRef<T> & StackProps>;
@@ -448,7 +467,7 @@ interface ChipToggleProps extends ChipToggleOptionProps, SelectedProps, DefaultS
 interface ChipToggleOptionProps {
 }
 
-declare const ChipToggle: ({ text, isSelected, defaultSelected, color, styleVar, sizeVar, leftSource, rightSource, onClick, disabled, ...rest }: ChipToggleProps) => react_jsx_runtime.JSX.Element;
+declare const ChipToggle: ({ text, isSelected, defaultSelected, color, radius, styleVar, sizeVar, leftSource, rightSource, onClick, disabled, ...rest }: ChipToggleProps) => react_jsx_runtime.JSX.Element;
 
 declare const ChipButtonStyleVariants: {
     readonly LINE: "LINE";
@@ -745,7 +764,7 @@ declare const Dropdown: {
     Content: ({ children, width: initialWidth, type, onClick, ...rest }: DropdownContentProps) => react_jsx_runtime.JSX.Element;
 };
 
-declare const getDropdownHeightBySizeVar: (size: DropdownSizeVariantType) => "40px" | "32px";
+declare const getDropdownHeightBySizeVar: (size: DropdownSizeVariantType) => "32px" | "40px";
 declare const getDropdownFontSizeBySizeVar: (size: DropdownSizeVariantType) => "body1_400" | "body2_400";
 declare const getDropdownStyleBySizeVar: (size: DropdownSizeVariantType) => _emotion_react.SerializedStyles;
 declare const getDropdownIconSizeBySizeVar: (size: DropdownSizeVariantType) => _emotion_react.SerializedStyles;
@@ -1216,4 +1235,4 @@ interface RadioOptionProps extends SelectedProps, DefaultSelectedProps, DisableP
 
 declare const Radio: ({ isSelected, defaultSelected, disabled, onClick, onMouseEnter, onMouseLeave, ...rest }: RadioProps) => react_jsx_runtime.JSX.Element;
 
-export { BackDropOptionProps, BackDropProps, BorderRadiusTokens, BoxShadowTokens, Button, ButtonComponent, ButtonOptionProps, ButtonProps, ButtonSizeVariantType, ButtonSizeVariants, ButtonStyleVariantType, ButtonStyleVariants, Callout, CalloutOptionProps, CalloutProps, CalloutType, CalloutTypes, Checkbox, CheckboxOptionProps, CheckboxProps, CheckboxStyleVariantType, CheckboxStyleVariants, ChipButton, ChipButtonOptionProps, ChipButtonProps, ChipButtonSizeVariantType, ChipButtonSizeVariants, ChipButtonStyleVariantType, ChipButtonStyleVariants, ChipToggle, ChipToggleOptionProps, ChipToggleProps, ChipToggleSizeVariantType, ChipToggleSizeVariants, ChipToggleStyleVariantType, ChipToggleStyleVariants, ColorTokens, Dropdown, DropdownButtonIcon, DropdownButtonProps, DropdownContentProps, DropdownOptionProps, DropdownOptionVariantType, DropdownProps, DropdownSizeVariantType, FontWeightTokens, Icon, IconButton, IconButtonComponent, IconButtonOptionProps, IconButtonProps, IconButtonSizeVariantType, IconButtonSizeVariants, IconButtonStyleVariantType, IconButtonStyleVariants, IconOptionProps, IconProps, IconSizeVariants, IconSizeVariantsType, Input, InputButton, InputButtonOptionProps, InputButtonProps, InputOptionProps, InputProps, List, ListContent2ColumnsProps, ListOptionProps, ListProps, ListText2RowsProps, MODAL_FOOTER_KEY, MODAL_HEADER_KEY, Menu, MenuOptionProps, MenuProps, MenuSizeVariantType, MenuSizeVariants, MinusBoxOptionProps, MinusBoxProps, MinusButton, Modal, ModalBodyOptionProps, ModalBodyProps, ModalContainerOptionProps, ModalContainerProps, ModalFooterOptionProps, ModalFooterProps, ModalFooterType, ModalHeaderOptionProps, ModalHeaderProps, ModalHeaderType, ModalPortal as ModalProvider, ModalSize, ModalSizeType, MotionStack, MotionStackComponentType, Popper, PopperOptionProps, PopperPortal, PopperPortalProps, PopperProps, PopperTrigger, PopperTriggerProps, Radio, RadioOptionProps, RadioProps, ScrollArea, ScrollAreaOptionProps, ScrollAreaProps, ShoplflowProvider, ShoplflowProviderProps, SpacingTokens, Stack, StackComponentType, StackGenericProps, StackOptionProps, StackProps, StyledDropdown, StyledDropdownButton, StyledDropdownContent, StyledIcon, StyledInputButton, StyledInputButtonContent, StyledList, StyledMenu, StyledPopper, StyledStack, StyledText2Rows, Switch, SwitchOptionProps, SwitchProps, Tag, TagOptionProps, TagProps, TagSizeVariantType, TagSizeVariants, TagStyleVariantType, TagStyleVariants, Text, Text2Rows, TextArea, TextAreaOptionProps, TextAreaProps, TextOptionProps, TextProps, TypographyTokens, borderRadiusTokens, boxShadowTokens, colorTokens, fontWeightTokens, getDomain, getDropdownFontSizeBySizeVar, getDropdownHeightBySizeVar, getDropdownIconSizeBySizeVar, getDropdownStyleBySizeVar, getFontStylesBySizeVar, spacingTokens, typographyTokens, useDomain, useHandleModal, useModalValue };
+export { Avatar, AvatarOptionProps, AvatarProps, AvatarSizeVariantType, AvatarSizeVariants, BackDropOptionProps, BackDropProps, BorderRadiusTokens, BoxShadowTokens, Button, ButtonComponent, ButtonOptionProps, ButtonProps, ButtonSizeVariantType, ButtonSizeVariants, ButtonStyleVariantType, ButtonStyleVariants, Callout, CalloutOptionProps, CalloutProps, CalloutType, CalloutTypes, Checkbox, CheckboxOptionProps, CheckboxProps, CheckboxStyleVariantType, CheckboxStyleVariants, ChipButton, ChipButtonOptionProps, ChipButtonProps, ChipButtonSizeVariantType, ChipButtonSizeVariants, ChipButtonStyleVariantType, ChipButtonStyleVariants, ChipToggle, ChipToggleOptionProps, ChipToggleProps, ChipToggleSizeVariantType, ChipToggleSizeVariants, ChipToggleStyleVariantType, ChipToggleStyleVariants, ColorTokens, Dropdown, DropdownButtonIcon, DropdownButtonProps, DropdownContentProps, DropdownOptionProps, DropdownOptionVariantType, DropdownProps, DropdownSizeVariantType, FontWeightTokens, Icon, IconButton, IconButtonComponent, IconButtonOptionProps, IconButtonProps, IconButtonSizeVariantType, IconButtonSizeVariants, IconButtonStyleVariantType, IconButtonStyleVariants, IconOptionProps, IconProps, IconSizeVariants, IconSizeVariantsType, Input, InputButton, InputButtonOptionProps, InputButtonProps, InputOptionProps, InputProps, List, ListContent2ColumnsProps, ListOptionProps, ListProps, ListText2RowsProps, MODAL_FOOTER_KEY, MODAL_HEADER_KEY, Menu, MenuOptionProps, MenuProps, MenuSizeVariantType, MenuSizeVariants, MinusBoxOptionProps, MinusBoxProps, MinusButton, Modal, ModalBodyOptionProps, ModalBodyProps, ModalContainerOptionProps, ModalContainerProps, ModalFooterOptionProps, ModalFooterProps, ModalFooterType, ModalHeaderOptionProps, ModalHeaderProps, ModalHeaderType, ModalPortal as ModalProvider, ModalSize, ModalSizeType, MotionStack, MotionStackComponentType, Popper, PopperOptionProps, PopperPortal, PopperPortalProps, PopperProps, PopperTrigger, PopperTriggerProps, Radio, RadioOptionProps, RadioProps, ScrollArea, ScrollAreaOptionProps, ScrollAreaProps, ShoplflowProvider, ShoplflowProviderProps, SpacingTokens, Stack, StackComponentType, StackGenericProps, StackOptionProps, StackProps, StyledDropdown, StyledDropdownButton, StyledDropdownContent, StyledIcon, StyledInputButton, StyledInputButtonContent, StyledList, StyledMenu, StyledPopper, StyledStack, StyledText2Rows, Switch, SwitchOptionProps, SwitchProps, Tag, TagOptionProps, TagProps, TagSizeVariantType, TagSizeVariants, TagStyleVariantType, TagStyleVariants, Text, Text2Rows, TextArea, TextAreaOptionProps, TextAreaProps, TextOptionProps, TextProps, TypographyTokens, borderRadiusTokens, boxShadowTokens, colorTokens, fontWeightTokens, getDomain, getDropdownFontSizeBySizeVar, getDropdownHeightBySizeVar, getDropdownIconSizeBySizeVar, getDropdownStyleBySizeVar, getFontStylesBySizeVar, spacingTokens, typographyTokens, useDomain, useHandleModal, useModalValue };

package/dist/index.js

@@ -1,6 +1,6 @@
 import * as React3 from 'react';
 import React3__default, { createContext, forwardRef, useEffect, useState, useId, useCallback, useContext, useMemo } from 'react';
-import styled5 from '@emotion/styled';
+import styled6 from '@emotion/styled';
 import { motion, AnimatePresence } from 'framer-motion';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { createPortal } from 'react-dom';
@@ -154,7 +154,7 @@ var fadeInOut = {
     }
   }
 };
-var BackDropStyled = styled5(motion.div)`
+var BackDropStyled = styled6(motion.div)`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -185,7 +185,7 @@ var ModalHandlerContext = createContext({
   removeModal: noop
 });
 var ModalContext = createContext([]);
-var SpaceMarginWrapper = styled5(motion.div)`
+var SpaceMarginWrapper = styled6(motion.div)`
   position: relative;
   display: flex;
   align-items: center;
@@ -484,7 +484,75 @@ var typographyTokens = {
   caption_700,
   caption_400
 };
-var StyledStack = styled5.div`
+var getSizeBySizeVariant = (size2) => {
+  switch (size2) {
+    case "XS":
+      return "18px";
+    case "S":
+      return "24px";
+    case "M":
+      return "32px";
+    case "L":
+      return "48px";
+    case "XL":
+      return "72px";
+    default:
+      return "32px";
+  }
+};
+var StyledAvatar = styled6.picture`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: ${({ sizeVar }) => getSizeBySizeVariant(sizeVar)};
+  height: ${({ sizeVar }) => getSizeBySizeVariant(sizeVar)};
+  position: relative;
+  overflow: hidden;
+  border-radius: 50%;
+`;
+var StyledAvatarContainer = styled6.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: fit-content;
+  height: fit-content;
+  position: relative;
+`;
+var StyledAvatarImage = styled6.img`
+  width: 100%;
+  height: 100%;
+`;
+var StyledAvatarBadge = styled6.div`
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: fit-content;
+  height: fit-content;
+  bottom: 0;
+  right: 0;
+`;
+
+// src/assets/mocks/AvatarNone.png
+var AvatarNone_default = "./AvatarNone-F5VQQNT7.png";
+var Avatar = (_a) => {
+  var _b = _a, { src, badge } = _b, rest = __objRest(_b, ["src", "badge"]);
+  return /* @__PURE__ */ jsxs(StyledAvatarContainer, { children: [
+    /* @__PURE__ */ jsx(StyledAvatar, __spreadProps(__spreadValues({ "data-shoplflow": "Avatar" }, rest), { children: /* @__PURE__ */ jsx(StyledAvatarImage, { src: src != null ? src : AvatarNone_default }) })),
+    /* @__PURE__ */ jsx(StyledAvatarBadge, { children: badge })
+  ] });
+};
+var Avatar_default = Avatar;
+
+// src/components/Avatar/Avatar.types.ts
+var AvatarSizeVariants = {
+  XS: "XS",
+  S: "S",
+  M: "M",
+  L: "L",
+  XL: "XL"
+};
+var StyledStack = styled6.div`
   display: flex;
   width: ${({ width }) => width};
   height: ${({ height }) => height};
@@ -562,7 +630,7 @@ var setEllipsis = (maxLines) => {
     text-overflow: ellipsis;
   `;
 };
-var StyledText = styled5.span`
+var StyledText = styled6.span`
   display: ${({ display }) => display && display};
   align-items: center;
   color: ${({ color }) => color && colorTokens[color]};
@@ -657,7 +725,7 @@ var getModalBodyTopBottomPadding = (isIncludeHeader) => {
     padding-bottom: 24px;
   `;
 };
-var Container = styled5.div`
+var Container = styled6.div`
   display: flex;
   flex-direction: column;
   border-radius: ${borderRadiusTokens.borderRadius08};
@@ -671,7 +739,7 @@ var Container = styled5.div`
   width: ${({ sizeVar }) => getModalWidthFromSize(sizeVar)}px;
   max-width: ${({ sizeVar }) => getModalWidthFromSize(sizeVar)}px;
 `;
-var HeaderContainer = styled5.div`
+var HeaderContainer = styled6.div`
   display: flex;
   width: 100%;
   min-height: 64px;
@@ -680,7 +748,7 @@ var HeaderContainer = styled5.div`
   padding: 12px 16px 12px 24px;
   gap: 10px;
 `;
-var BodyContainer = styled5.div`
+var BodyContainer = styled6.div`
   display: flex;
   width: 100%;
   height: 100%;
@@ -692,7 +760,7 @@ var BodyContainer = styled5.div`
   flex: 1;
   ${({ isIncludeHeader }) => getModalBodyTopBottomPadding(isIncludeHeader)}
 `;
-var ModalBodyContainerInner = styled5.div`
+var ModalBodyContainerInner = styled6.div`
   display: grid;
   align-self: stretch;
   flex-direction: column;
@@ -701,7 +769,7 @@ var ModalBodyContainerInner = styled5.div`
   height: calc(100%);
   box-sizing: border-box;
 `;
-var ModalBodyContent = styled5.div`
+var ModalBodyContent = styled6.div`
   display: flex;
   flex-direction: column;
   height: 100%;
@@ -709,7 +777,7 @@ var ModalBodyContent = styled5.div`
   padding: 0 24px;
   background: ${colorTokens.neutral0};
 `;
-var FooterContainer = styled5.div`
+var FooterContainer = styled6.div`
   display: flex;
   width: 100%;
   flex-direction: row;
@@ -840,7 +908,7 @@ var Modal = {
   Body: ModalBody_default,
   Footer: ModalFooter_default
 };
-var SwitchContainer = styled5.div`
+var SwitchContainer = styled6.div`
   width: 32px;
   height: 32px;
   border-radius: 6px;
@@ -853,7 +921,7 @@ var SwitchContainer = styled5.div`
     background: ${({ isDisabled }) => !isDisabled && colorTokens.neutral400_5};
   }
 `;
-var StyledSwitch = styled5.input`
+var StyledSwitch = styled6.input`
   appearance: none;
   border: none;
   border-radius: 12px;
@@ -974,7 +1042,11 @@ var getLineTypographyBySizeVar = (sizeVar) => {
       return "body2_400";
   }
 };
-var solidStyle = ({ isSelected, color, radius }) => css`
+var solidStyle = ({
+  isSelected,
+  color,
+  $radius
+}) => css`
   padding: 7px 12px;
   gap: 4px;
   background: ${colorTokens.neutral150};
@@ -986,7 +1058,7 @@ var solidStyle = ({ isSelected, color, radius }) => css`
     background: ${colorTokens.neutral200};
   }
 
-  ${radius && css`
+  ${$radius && css`
     border-radius: ${borderRadiusTokens.borderRadius16};
   `};
   ${isSelected && css`
@@ -999,7 +1071,7 @@ var solidStyle = ({ isSelected, color, radius }) => css`
     }
   `};
 `;
-var StyledChip = styled5.button`
+var StyledChip = styled6.button`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1017,6 +1089,7 @@ var ChipToggle = (_a) => {
     isSelected,
     defaultSelected,
     color = "neutral600",
+    radius,
     styleVar = ChipToggleStyleVariants.SOLID,
     sizeVar,
     leftSource,
@@ -1028,6 +1101,7 @@ var ChipToggle = (_a) => {
     "isSelected",
     "defaultSelected",
     "color",
+    "radius",
     "styleVar",
     "sizeVar",
     "leftSource",
@@ -1044,6 +1118,7 @@ var ChipToggle = (_a) => {
     StyledChip,
     __spreadProps(__spreadValues({}, rest), {
       color,
+      $radius: radius,
       isSelected: isToggled,
       styleVar,
       sizeVar,
@@ -1126,7 +1201,7 @@ var getStyleBySizeVar = (sizeVar) => {
       `;
   }
 };
-var StyledChipButton = styled5.button`
+var StyledChipButton = styled6.button`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1245,7 +1320,7 @@ var getStyleBySizeVar2 = (sizeVar) => {
       `;
   }
 };
-var StyledButton = styled5.button`
+var StyledButton = styled6.button`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1394,7 +1469,7 @@ var getStyleByStyleVar2 = (styleVar, color) => {
       `;
   }
 };
-var StyledIconButton = styled5.button`
+var StyledIconButton = styled6.button`
   display: flex;
   flex-shrink: 0;
   border-radius: ${borderRadiusTokens.borderRadius06};
@@ -1460,7 +1535,7 @@ var alertStyle = css`
     fill: ${colorTokens.red300};
   }
 `;
-var StyledCallout = styled5.div`
+var StyledCallout = styled6.div`
   display: flex;
   justify-content: flex-start;
   align-items: start;
@@ -1470,12 +1545,12 @@ var StyledCallout = styled5.div`
   ${({ styleVar }) => styleVar === "INFORMATION" && informationStyle}
   ${({ styleVar }) => styleVar === "ALERT" && alertStyle}
 `;
-var StyledCalloutIcon = styled5.svg`
+var StyledCalloutIcon = styled6.svg`
   display: flex;
   min-height: 20px;
   min-width: 20px;
 `;
-styled5.div`
+styled6.div`
   padding: 2px 0;
 `;
 var Callout = (_a) => {
@@ -1498,7 +1573,7 @@ var CalloutTypes = {
   INFORMATION: "INFORMATION",
   ALERT: "ALERT"
 };
-var StyledPopper = styled5.div`
+var StyledPopper = styled6.div`
   width: ${({ width }) => width != null ? width : "fit-content"};
   height: ${({ height }) => height && height};
 `;
@@ -1650,10 +1725,10 @@ var getDropdownIconSizeBySizeVar = (size2) => {
       `;
   }
 };
-var StyledDropdown = styled5.div`
+var StyledDropdown = styled6.div`
   width: ${({ width }) => width};
 `;
-var StyledDropdownContent = styled5.div`
+var StyledDropdownContent = styled6.div`
   display: flex;
   flex-direction: column;
   background: ${colorTokens.neutral0};
@@ -1662,7 +1737,7 @@ var StyledDropdownContent = styled5.div`
   border-radius: 6px;
   box-shadow: ${boxShadowTokens.dropShadow};
 `;
-var StyledDropdownButton = styled5.button`
+var StyledDropdownButton = styled6.button`
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -1676,7 +1751,7 @@ var StyledDropdownButton = styled5.button`
       cursor: not-allowed;
     `}
 `;
-var DropdownButtonIcon = styled5(motion.div)`
+var DropdownButtonIcon = styled6(motion.div)`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1705,7 +1780,7 @@ var getBorderColorByStatus = ({ isFocused, isError, isHovered, disabled }) => {
   }
   return colorTokens.neutral300;
 };
-var InputWrapper = styled5.label`
+var InputWrapper = styled6.label`
   display: flex;
   align-items: center;
   width: ${({ width }) => width != null ? width : "100%"};
@@ -1751,7 +1826,7 @@ var getIconSize = (size2) => {
       return "24px";
   }
 };
-var StyledIcon = styled5.svg`
+var StyledIcon = styled6.svg`
   width: ${({ sizeVar }) => sizeVar && getIconSize(sizeVar)};
   min-width: ${({ sizeVar }) => sizeVar && getIconSize(sizeVar)};
   height: ${({ sizeVar }) => sizeVar && getIconSize(sizeVar)};
@@ -1927,7 +2002,7 @@ var getFontStylesBySizeVar = (sizeVar) => {
       return "body1_400";
   }
 };
-var StyledMenu = styled5.li`
+var StyledMenu = styled6.li`
   display: flex;
   width: 100%;
   flex-direction: row;
@@ -2002,7 +2077,7 @@ var MenuSizeVariants = {
   S: "S",
   M: "M"
 };
-var StyledList = styled5.li`
+var StyledList = styled6.li`
   display: flex;
   flex-direction: row;
   width: 100%;
@@ -2017,7 +2092,7 @@ var StyledList = styled5.li`
     background: ${colorTokens.neutral100};
   }
 `;
-var StyledText2Rows = styled5.div`
+var StyledText2Rows = styled6.div`
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -2127,7 +2202,7 @@ var getColorsByStyleVariant = (styleVariant, color = "neutral700") => {
       `;
   }
 };
-var StyledTag = styled5.div`
+var StyledTag = styled6.div`
   display: flex;
   align-items: center;
   flex-direction: row;
@@ -2170,7 +2245,7 @@ var TagSizeVariants = {
   S: "S",
   M: "M"
 };
-var StyledInput = styled5.input`
+var StyledInput = styled6.input`
   padding: 4px 0 4px 12px;
   background-color: transparent;
   width: 100%;
@@ -2191,13 +2266,13 @@ var StyledInput = styled5.input`
     -moz-appearance: textfield;
   }
 `;
-var RightElementWrapper = styled5.div`
+var RightElementWrapper = styled6.div`
   display: flex;
   flex-direction: row;
   align-items: center;
   padding: 0 8px 0 0;
 `;
-var Wrapper = styled5.div`
+var Wrapper = styled6.div`
   display: flex;
   width: 100%;
   justify-content: flex-end;
@@ -2401,7 +2476,7 @@ var Input = forwardRef(
   }
 );
 var Input_default = Input;
-var StyledInputButton = styled5.button`
+var StyledInputButton = styled6.button`
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -2416,7 +2491,7 @@ var StyledInputButton = styled5.button`
       cursor: not-allowed;
     `}
 `;
-var StyledInputButtonContent = styled5.input`
+var StyledInputButtonContent = styled6.input`
   display: flex;
   width: 100%;
   border: none;
@@ -2483,7 +2558,7 @@ var InputButton = forwardRef(
         children: /* @__PURE__ */ jsxs(StyledInputButton, { onClick: handleOnClick, disabled, children: [
           /* @__PURE__ */ jsx(StyledInputButtonContent, __spreadValues({ className: "body1_400", defaultValue: text, ref }, rest)),
           /* @__PURE__ */ jsxs(Stack_default.Horizontal, { align: "center", children: [
-            value && /* @__PURE__ */ jsx(IconButton_default, { sizeVar: "S", onClick: handleOnClear, styleVar: "GHOST", disabled, children: /* @__PURE__ */ jsx(Icon_default, { iconSource: assetFunction("DeleteIcon"), color: "neutral600" }) }),
+            text && /* @__PURE__ */ jsx(IconButton_default, { sizeVar: "S", onClick: handleOnClear, styleVar: "GHOST", disabled, children: /* @__PURE__ */ jsx(Icon_default, { iconSource: assetFunction("DeleteIcon"), color: "neutral600" }) }),
             rightSource
           ] })
         ] })
@@ -2492,7 +2567,7 @@ var InputButton = forwardRef(
   }
 );
 var InputButton_default = InputButton;
-var BottomElementWrapper = styled5.div`
+var BottomElementWrapper = styled6.div`
   display: flex;
   width: 100%;
   flex-direction: row;
@@ -2500,7 +2575,7 @@ var BottomElementWrapper = styled5.div`
   gap: 8px;
   background-color: ${colorTokens.neutral0};
 `;
-var StyledTextarea = styled5.textarea`
+var StyledTextarea = styled6.textarea`
   padding: 8px 12px 0 12px;
   background-color: transparent;
   resize: none;
@@ -2628,12 +2703,12 @@ var TextArea = forwardRef(
   }
 );
 var TextArea_default = TextArea;
-var Container2 = styled5.div`
+var Container2 = styled6.div`
   width: 32px;
   height: 32px;
   padding: 7px;
 `;
-var IconButton2 = styled5.button`
+var IconButton2 = styled6.button`
   display: flex;
   width: 16px;
   height: 16px;
@@ -2738,7 +2813,7 @@ var getStylesByStyleVariant = (styleVariant, isSelected, isHovered) => {
       return "";
   }
 };
-var StyledCheckbox = styled5.button`
+var StyledCheckbox = styled6.button`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -2753,7 +2828,7 @@ var StyledCheckbox = styled5.button`
   ${({ styleVar, isSelected, isHovered }) => getStylesByStyleVariant(styleVar, isSelected, isHovered)};
   ${({ disabled }) => getDisabledStyle(disabled)}
 `;
-var Container3 = styled5.button`
+var Container3 = styled6.button`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -2836,7 +2911,7 @@ var getSelectedStyle = (isHovered) => {
     `}
   `;
 };
-var StyledRadio = styled5.div`
+var StyledRadio = styled6.div`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -2858,7 +2933,7 @@ var StyledRadio = styled5.div`
   ${({ isSelected, isHovered }) => isSelected && getSelectedStyle(isHovered)}
   ${({ disabled }) => getDisabledStyle(disabled)}
 `;
-var Container4 = styled5.button`
+var Container4 = styled6.button`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -2909,6 +2984,6 @@ classnames/index.js:
   *)
 */
 
-export { Button_default as Button, ButtonSizeVariants, ButtonStyleVariants, Callout_default as Callout, CalloutTypes, Checkbox_default as Checkbox, CheckboxStyleVariants, ChipButton_default as ChipButton, ChipButtonSizeVariants, ChipButtonStyleVariants, ChipToggle_default as ChipToggle, ChipToggleSizeVariants, ChipToggleStyleVariants, Dropdown_default as Dropdown, DropdownButtonIcon, Icon_default as Icon, IconButton_default as IconButton, IconButtonSizeVariants, IconButtonStyleVariants, IconSizeVariants, Input_default as Input, InputButton_default as InputButton, List_default as List, MODAL_FOOTER_KEY, MODAL_HEADER_KEY, Menu_default as Menu, MenuSizeVariants, MinusButton_default as MinusButton, Modal, ModalPortal_default as ModalProvider, ModalSize, MotionStack, Popper_default as Popper, PopperPortal2 as PopperPortal, PopperTrigger, Radio_default as Radio, ScrollArea_default as ScrollArea, ShoplflowProvider_default as ShoplflowProvider, Stack_default as Stack, StyledDropdown, StyledDropdownButton, StyledDropdownContent, StyledIcon, StyledInputButton, StyledInputButtonContent, StyledList, StyledMenu, StyledPopper, StyledStack, StyledText2Rows, Switch_default as Switch, Tag_default as Tag, TagSizeVariants, TagStyleVariants, Text_default as Text, Text2Rows, TextArea_default as TextArea, borderRadiusTokens, boxShadowTokens, colorTokens, fontWeightTokens, getDomain, getDropdownFontSizeBySizeVar, getDropdownHeightBySizeVar, getDropdownIconSizeBySizeVar, getDropdownStyleBySizeVar, getFontStylesBySizeVar, spacingTokens, typographyTokens, useDomain, useHandleModal, useModalValue };
+export { Avatar_default as Avatar, AvatarSizeVariants, Button_default as Button, ButtonSizeVariants, ButtonStyleVariants, Callout_default as Callout, CalloutTypes, Checkbox_default as Checkbox, CheckboxStyleVariants, ChipButton_default as ChipButton, ChipButtonSizeVariants, ChipButtonStyleVariants, ChipToggle_default as ChipToggle, ChipToggleSizeVariants, ChipToggleStyleVariants, Dropdown_default as Dropdown, DropdownButtonIcon, Icon_default as Icon, IconButton_default as IconButton, IconButtonSizeVariants, IconButtonStyleVariants, IconSizeVariants, Input_default as Input, InputButton_default as InputButton, List_default as List, MODAL_FOOTER_KEY, MODAL_HEADER_KEY, Menu_default as Menu, MenuSizeVariants, MinusButton_default as MinusButton, Modal, ModalPortal_default as ModalProvider, ModalSize, MotionStack, Popper_default as Popper, PopperPortal2 as PopperPortal, PopperTrigger, Radio_default as Radio, ScrollArea_default as ScrollArea, ShoplflowProvider_default as ShoplflowProvider, Stack_default as Stack, StyledDropdown, StyledDropdownButton, StyledDropdownContent, StyledIcon, StyledInputButton, StyledInputButtonContent, StyledList, StyledMenu, StyledPopper, StyledStack, StyledText2Rows, Switch_default as Switch, Tag_default as Tag, TagSizeVariants, TagStyleVariants, Text_default as Text, Text2Rows, TextArea_default as TextArea, borderRadiusTokens, boxShadowTokens, colorTokens, fontWeightTokens, getDomain, getDropdownFontSizeBySizeVar, getDropdownHeightBySizeVar, getDropdownIconSizeBySizeVar, getDropdownStyleBySizeVar, getFontStylesBySizeVar, spacingTokens, typographyTokens, useDomain, useHandleModal, useModalValue };
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.js.map