@liner-fe/prism 3.4.11 → 3.4.12

package/lib/index.css

@@ -1918,6 +1918,40 @@
   border: 1px solid var(--accent-label-pink);
 }
 
+/* esbuild-sass-plugin:css-chunk:src/components/Avatar/style.module.scss */
+._avatar_1tgi1_1 {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  flex-shrink: 0;
+  overflow: hidden;
+  border-radius: 9999px;
+  background: var(--neutral-container-lowest);
+}
+._small_1tgi1_12 {
+  width: 18px;
+  height: 18px;
+}
+._medium_1tgi1_17 {
+  width: 24px;
+  height: 24px;
+}
+._xlarge_1tgi1_22 {
+  width: 60px;
+  height: 60px;
+}
+._image_1tgi1_27 {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+._fallback_1tgi1_33 {
+  display: flex;
+  width: 100%;
+  height: 100%;
+}
+
 /* esbuild-sass-plugin:css-chunk:src/components/AlertDialog/style.module.scss */
 @keyframes _overlayShow_6ipeu_1 {
   from {

package/lib/index.d.ts

@@ -7,7 +7,7 @@ import { IconProps, IconComponentType } from '@liner-fe/icon';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as _artsy_fresnel_dist_Media from '@artsy/fresnel/dist/Media';
 import { breakpointOrigin } from '@liner-fe/design-token';
-import { Popover as Popover$1, Tooltip as Tooltip$1, Checkbox as Checkbox$1, RadioGroup, Select as Select$1, Label as Label$1, AlertDialog as AlertDialog$1, Dialog as Dialog$1 } from 'radix-ui';
+import { Popover as Popover$1, Tooltip as Tooltip$1, Checkbox as Checkbox$1, RadioGroup, Select as Select$1, Label as Label$1, Avatar as Avatar$1, AlertDialog as AlertDialog$1, Dialog as Dialog$1 } from 'radix-ui';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 import { PopoverProps, PopoverPortalProps } from '@radix-ui/react-popover';
 import { Drawer } from 'vaul';
@@ -642,6 +642,47 @@ type BadgeBaseProps = ComponentPropsWithoutRef<'span'> & {
 type BadgeProps = BadgeBaseProps & BadgeVariantColorProps;
 declare const Badge: react.ForwardRefExoticComponent<BadgeProps & react.RefAttributes<HTMLSpanElement>>;
 
+type AvatarSize = 'small' | 'medium' | 'xlarge';
+/**
+ * 이미지 로딩 상태(`'idle' | 'loading' | 'loaded' | 'error'`).
+ * union 을 직접 정의하지 않고 radix-ui Avatar.Image 의 타입을 그대로 파생해 재사용합니다(drift 방지).
+ */
+type AvatarLoadingStatus = Parameters<NonNullable<ComponentPropsWithoutRef<typeof Avatar$1.Image>['onLoadingStatusChange']>>[0];
+type AvatarProps = ComponentPropsWithoutRef<typeof Avatar$1.Root> & {
+    /** 아바타 크기. */
+    size?: AvatarSize;
+    /**
+     * 사용자 이미지 URL. prop 전달은 필수이지만 값으로 `undefined` 를 허용합니다(`src?:` 옵셔널 아님).
+     * 호출부가 src 를 깜빡 누락하는 것은 막되, 사진이 없으면 `undefined` 를 명시적으로 넘길 수 있습니다.
+     * `undefined`/빈 문자열이거나 로드에 실패하면 fallback 이미지를 표시합니다.
+     */
+    src: string | undefined;
+    /** 이미지 대체 텍스트(접근성). 사용자 이름 등을 전달합니다. 장식용이면 빈 문자열(`''`)을 넘기세요. */
+    alt: string;
+    /** 이미지 로딩 상태가 바뀔 때 호출됩니다. (idle → loading → loaded | error) */
+    onLoadingStatusChange?: (status: AvatarLoadingStatus) => void;
+};
+/**
+ * 사용자/엔티티를 원형 이미지로 표현하는 Avatar.
+ *
+ * radix-ui Avatar 를 래핑합니다. `src` 이미지가 로드되기 전·로드에 실패했을 때(빈 URL 포함)는
+ * fallback placeholder 이미지를 보여줍니다. 로딩 중 깨진 이미지가 잠깐 보이는 현상이 없습니다.
+ */
+declare const Avatar: react.ForwardRefExoticComponent<Omit<Avatar$1.AvatarProps & react.RefAttributes<HTMLSpanElement>, "ref"> & {
+    /** 아바타 크기. */
+    size?: AvatarSize;
+    /**
+     * 사용자 이미지 URL. prop 전달은 필수이지만 값으로 `undefined` 를 허용합니다(`src?:` 옵셔널 아님).
+     * 호출부가 src 를 깜빡 누락하는 것은 막되, 사진이 없으면 `undefined` 를 명시적으로 넘길 수 있습니다.
+     * `undefined`/빈 문자열이거나 로드에 실패하면 fallback 이미지를 표시합니다.
+     */
+    src: string | undefined;
+    /** 이미지 대체 텍스트(접근성). 사용자 이름 등을 전달합니다. 장식용이면 빈 문자열(`''`)을 넘기세요. */
+    alt: string;
+    /** 이미지 로딩 상태가 바뀔 때 호출됩니다. (idle → loading → loaded | error) */
+    onLoadingStatusChange?: (status: AvatarLoadingStatus) => void;
+} & react.RefAttributes<HTMLSpanElement>>;
+
 /**
  * AlertDialogRoot
  *
@@ -841,4 +882,4 @@ interface RatioProps extends react.HTMLAttributes<HTMLDivElement> {
  */
 declare const Ratio: react.ForwardRefExoticComponent<RatioProps & react.RefAttributes<HTMLDivElement>>;
 
-export { AlertDialog, type AlertDialogAction, type AlertDialogConfirmAction, type AlertDialogContentProps, Badge, type BadgeColor, type BadgeIconProps, type BadgeProps, type BadgeSize, type BadgeVariant, BottomSheet, type BottomSheetAction, type BottomSheetConfirmAction, type BottomSheetContentProps, type BottomSheetMode, type BreakPointsKey, Button, type ButtonIconProps, type ButtonProps, type ButtonSizeType, Caption, Checkbox, CoachMark, type CoachMarkContentProps, type CommonButtonProps, CompactCoachMark, type CompactCoachMarkContentProps, DEFAULT_LEVEL_OPTIONS, DEFAULT_SIZE_OPTIONS, DefaultButton, type DefaultButtonProps, type DefaultLevelType, Dialog, type DialogAction, type DialogConfirmAction, type DialogContentProps, Display, Heading, ICON_LEVEL_OPTIONS, ICON_SIZE_OPTIONS, type ICaptionProps, type IDisplayProps, type IHeadingProps, type IPropsAccent, type IPropsAnswer, type IPropsNormal, type IPropsNormalBold, type IPropsPost, type ITitleProps, IconButton, type IconButtonProps, type ItemProps, LOGOS, Label, List, Loading, type LoadingLevelType, Logo, type LogoCategory, type LogoName, type LogoProps, Media, MediaContextProvider, Paragraph, type ParagraphProps, Popover, type PopoverContentProps, PrimitiveCoachMark, type PrimitiveCoachMarkContentProps, type PrimitiveCoachMarkRootProps, type PromiseToastOptions, RATIO, Radio, Ratio, type RatioProps, Select, type SelectItemProps, type SelectProps, TEXT_LEVEL_OPTIONS, TEXT_SIZE_OPTIONS, Tag, TextButton, type TextButtonProps, type TextSizeType, Textfield, type TextfieldButtonProps, type TextfieldLabelType, type TextfieldProps, Title, type ToastOptions, type ToastType, Toaster, Tooltip, Typography, arrayToStyleObject, isEmptyObject, objectToArray, rootMediaStyle, toast };
+export { AlertDialog, type AlertDialogAction, type AlertDialogConfirmAction, type AlertDialogContentProps, Avatar, type AvatarLoadingStatus, type AvatarProps, type AvatarSize, Badge, type BadgeColor, type BadgeIconProps, type BadgeProps, type BadgeSize, type BadgeVariant, BottomSheet, type BottomSheetAction, type BottomSheetConfirmAction, type BottomSheetContentProps, type BottomSheetMode, type BreakPointsKey, Button, type ButtonIconProps, type ButtonProps, type ButtonSizeType, Caption, Checkbox, CoachMark, type CoachMarkContentProps, type CommonButtonProps, CompactCoachMark, type CompactCoachMarkContentProps, DEFAULT_LEVEL_OPTIONS, DEFAULT_SIZE_OPTIONS, DefaultButton, type DefaultButtonProps, type DefaultLevelType, Dialog, type DialogAction, type DialogConfirmAction, type DialogContentProps, Display, Heading, ICON_LEVEL_OPTIONS, ICON_SIZE_OPTIONS, type ICaptionProps, type IDisplayProps, type IHeadingProps, type IPropsAccent, type IPropsAnswer, type IPropsNormal, type IPropsNormalBold, type IPropsPost, type ITitleProps, IconButton, type IconButtonProps, type ItemProps, LOGOS, Label, List, Loading, type LoadingLevelType, Logo, type LogoCategory, type LogoName, type LogoProps, Media, MediaContextProvider, Paragraph, type ParagraphProps, Popover, type PopoverContentProps, PrimitiveCoachMark, type PrimitiveCoachMarkContentProps, type PrimitiveCoachMarkRootProps, type PromiseToastOptions, RATIO, Radio, Ratio, type RatioProps, Select, type SelectItemProps, type SelectProps, TEXT_LEVEL_OPTIONS, TEXT_SIZE_OPTIONS, Tag, TextButton, type TextButtonProps, type TextSizeType, Textfield, type TextfieldButtonProps, type TextfieldLabelType, type TextfieldProps, Title, type ToastOptions, type ToastType, Toaster, Tooltip, Typography, arrayToStyleObject, isEmptyObject, objectToArray, rootMediaStyle, toast };

package/lib/index.js

@@ -2775,13 +2775,70 @@ var Tag = forwardRef20(
   }
 );
 
+// src/components/Avatar/index.tsx
+import { forwardRef as forwardRef21 } from "react";
+import { Avatar as RadixAvatar } from "radix-ui";
+import { cva as cva12 } from "cva";
+import clsx22 from "clsx";
+
+// src/components/Avatar/fallbackImage.ts
+var FALLBACK_IMAGE_SRC = "https://assets.getliner.com/web/prism/fallback-profile.webp";
+
+// src/components/Avatar/style.module.scss
+var style_module_default20 = {
+  "avatar": "_avatar_1tgi1_1",
+  "small": "_small_1tgi1_12",
+  "medium": "_medium_1tgi1_17",
+  "xlarge": "_xlarge_1tgi1_22",
+  "image": "_image_1tgi1_27",
+  "fallback": "_fallback_1tgi1_33"
+};
+
+// src/components/Avatar/index.tsx
+import { jsx as jsx29, jsxs as jsxs16 } from "react/jsx-runtime";
+var avatarBase = cva12({
+  base: style_module_default20.avatar,
+  variants: {
+    size: {
+      small: style_module_default20.small,
+      medium: style_module_default20.medium,
+      xlarge: style_module_default20.xlarge
+    }
+  }
+});
+var Avatar = forwardRef21(
+  ({ size = "medium", src, alt, className, onLoadingStatusChange, ...rest }, ref) => {
+    return /* @__PURE__ */ jsxs16(RadixAvatar.Root, { ref, className: clsx22(avatarBase({ size }), className), ...rest, children: [
+      src ? /* @__PURE__ */ jsx29(
+        RadixAvatar.Image,
+        {
+          className: style_module_default20.image,
+          src,
+          alt,
+          onLoadingStatusChange
+        }
+      ) : null,
+      /* @__PURE__ */ jsx29(RadixAvatar.Fallback, { className: style_module_default20.fallback, children: /* @__PURE__ */ jsx29(
+        "img",
+        {
+          className: style_module_default20.image,
+          src: FALLBACK_IMAGE_SRC,
+          alt,
+          "aria-hidden": alt ? void 0 : true
+        }
+      ) })
+    ] });
+  }
+);
+Avatar.displayName = "Avatar";
+
 // src/components/AlertDialog/index.tsx
 import { AlertDialog as AlertDialogPrimitive } from "radix-ui";
-import { clsx as clsx22 } from "clsx";
-import { cva as cva12 } from "cva";
+import { clsx as clsx23 } from "clsx";
+import { cva as cva13 } from "cva";
 
 // src/components/AlertDialog/style.module.scss
-var style_module_default20 = {
+var style_module_default21 = {
   "overlay": "_overlay_6ipeu_20",
   "overlayShow": "_overlayShow_6ipeu_1",
   "content": "_content_6ipeu_30",
@@ -2793,13 +2850,13 @@ var style_module_default20 = {
 };
 
 // src/components/AlertDialog/index.tsx
-import { jsx as jsx29, jsxs as jsxs16 } from "react/jsx-runtime";
-var titleVariants = cva12({ base: [style_module_default20.title, "lp-sys-typo-title4-accent-bold"] });
-var descriptionVariants = cva12({
-  base: [style_module_default20.description, "lp-sys-typo-paragraph2-post-regular"]
+import { jsx as jsx30, jsxs as jsxs17 } from "react/jsx-runtime";
+var titleVariants = cva13({ base: [style_module_default21.title, "lp-sys-typo-title4-accent-bold"] });
+var descriptionVariants = cva13({
+  base: [style_module_default21.description, "lp-sys-typo-paragraph2-post-regular"]
 });
-var AlertDialogRoot = /* @__PURE__ */ __name((props) => /* @__PURE__ */ jsx29(AlertDialogPrimitive.Root, { ...props }), "AlertDialogRoot");
-var AlertDialogTrigger = /* @__PURE__ */ __name(({ by }) => /* @__PURE__ */ jsx29(AlertDialogPrimitive.Trigger, { asChild: true, children: by }), "AlertDialogTrigger");
+var AlertDialogRoot = /* @__PURE__ */ __name((props) => /* @__PURE__ */ jsx30(AlertDialogPrimitive.Root, { ...props }), "AlertDialogRoot");
+var AlertDialogTrigger = /* @__PURE__ */ __name(({ by }) => /* @__PURE__ */ jsx30(AlertDialogPrimitive.Trigger, { asChild: true, children: by }), "AlertDialogTrigger");
 var AlertDialogContent = /* @__PURE__ */ __name(({
   title,
   description,
@@ -2811,24 +2868,24 @@ var AlertDialogContent = /* @__PURE__ */ __name(({
   ref,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs16(AlertDialogPrimitive.Portal, { container, children: [
-    /* @__PURE__ */ jsx29(AlertDialogPrimitive.Overlay, { className: style_module_default20.overlay }),
-    /* @__PURE__ */ jsxs16(
+  return /* @__PURE__ */ jsxs17(AlertDialogPrimitive.Portal, { container, children: [
+    /* @__PURE__ */ jsx30(AlertDialogPrimitive.Overlay, { className: style_module_default21.overlay }),
+    /* @__PURE__ */ jsxs17(
       AlertDialogPrimitive.Content,
       {
         ref,
-        className: clsx22(style_module_default20.content, className),
+        className: clsx23(style_module_default21.content, className),
         onEscapeKeyDown: (event) => event.preventDefault(),
         ...props,
         children: [
-          /* @__PURE__ */ jsxs16("div", { className: style_module_default20.contents, children: [
-            title && /* @__PURE__ */ jsx29(AlertDialogPrimitive.Title, { className: titleVariants(), children: title }),
-            /* @__PURE__ */ jsx29(AlertDialogPrimitive.Description, { className: descriptionVariants(), children: description })
+          /* @__PURE__ */ jsxs17("div", { className: style_module_default21.contents, children: [
+            title && /* @__PURE__ */ jsx30(AlertDialogPrimitive.Title, { className: titleVariants(), children: title }),
+            /* @__PURE__ */ jsx30(AlertDialogPrimitive.Description, { className: descriptionVariants(), children: description })
           ] }),
           children,
-          /* @__PURE__ */ jsxs16("div", { className: style_module_default20.actions, children: [
-            /* @__PURE__ */ jsx29(AlertDialogPrimitive.Cancel, { asChild: true, children: /* @__PURE__ */ jsx29(Button, { level: "tertiary", size: "l", onClick: dismiss.onClick, children: dismiss.label }) }),
-            /* @__PURE__ */ jsx29(AlertDialogPrimitive.Action, { asChild: true, children: /* @__PURE__ */ jsx29(Button, { level: confirm.level ?? "primary", size: "l", onClick: confirm.onClick, children: confirm.label }) })
+          /* @__PURE__ */ jsxs17("div", { className: style_module_default21.actions, children: [
+            /* @__PURE__ */ jsx30(AlertDialogPrimitive.Cancel, { asChild: true, children: /* @__PURE__ */ jsx30(Button, { level: "tertiary", size: "l", onClick: dismiss.onClick, children: dismiss.label }) }),
+            /* @__PURE__ */ jsx30(AlertDialogPrimitive.Action, { asChild: true, children: /* @__PURE__ */ jsx30(Button, { level: confirm.level ?? "primary", size: "l", onClick: confirm.onClick, children: confirm.label }) })
           ] })
         ]
       }
@@ -2842,15 +2899,15 @@ var AlertDialog = Object.assign(AlertDialogRoot, {
 
 // src/components/Dialog/index.tsx
 import { Dialog as DialogPrimitive3 } from "radix-ui";
-import { clsx as clsx23 } from "clsx";
+import { clsx as clsx24 } from "clsx";
 import { IconClose as IconClose2 } from "@liner-fe/icon";
 
 // src/components/Dialog/Header.tsx
 import { Dialog as DialogPrimitive } from "radix-ui";
-import { cva as cva13 } from "cva";
+import { cva as cva14 } from "cva";
 
 // src/components/Dialog/style.module.scss
-var style_module_default21 = {
+var style_module_default22 = {
   "overlay": "_overlay_424hi_20",
   "overlayShow": "_overlayShow_424hi_1",
   "content": "_content_424hi_30",
@@ -2867,36 +2924,36 @@ var style_module_default21 = {
 };
 
 // src/components/Dialog/Header.tsx
-import { jsx as jsx30, jsxs as jsxs17 } from "react/jsx-runtime";
-var titleVariants2 = cva13({ base: [style_module_default21.title, "lp-sys-typo-title4-accent-bold"] });
-var descriptionVariants2 = cva13({
-  base: [style_module_default21.description, "lp-sys-typo-paragraph2-post-regular"]
+import { jsx as jsx31, jsxs as jsxs18 } from "react/jsx-runtime";
+var titleVariants2 = cva14({ base: [style_module_default22.title, "lp-sys-typo-title4-accent-bold"] });
+var descriptionVariants2 = cva14({
+  base: [style_module_default22.description, "lp-sys-typo-paragraph2-post-regular"]
 });
-var DialogHeader = /* @__PURE__ */ __name(({ title, description }) => /* @__PURE__ */ jsxs17("div", { className: style_module_default21.header, children: [
-  /* @__PURE__ */ jsx30(DialogPrimitive.Title, { className: titleVariants2(), children: title }),
-  description && /* @__PURE__ */ jsx30(DialogPrimitive.Description, { className: descriptionVariants2(), children: description })
+var DialogHeader = /* @__PURE__ */ __name(({ title, description }) => /* @__PURE__ */ jsxs18("div", { className: style_module_default22.header, children: [
+  /* @__PURE__ */ jsx31(DialogPrimitive.Title, { className: titleVariants2(), children: title }),
+  description && /* @__PURE__ */ jsx31(DialogPrimitive.Description, { className: descriptionVariants2(), children: description })
 ] }), "DialogHeader");
 
 // src/components/Dialog/Footer.tsx
 import { Dialog as DialogPrimitive2 } from "radix-ui";
-import { jsx as jsx31, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs19 } from "react/jsx-runtime";
 var DialogFooter = /* @__PURE__ */ __name(({ dismiss, confirm, extra }) => {
   const hasActions = Boolean(dismiss || confirm);
   const hasFooter = hasActions || Boolean(extra);
   if (!hasFooter) return null;
-  return /* @__PURE__ */ jsxs18("div", { className: style_module_default21.footer, children: [
-    hasActions && /* @__PURE__ */ jsxs18("div", { className: style_module_default21.actions, children: [
-      dismiss && /* @__PURE__ */ jsx31(DialogPrimitive2.Close, { asChild: true, children: /* @__PURE__ */ jsx31(Button, { level: "tertiary", size: "cta", onClick: dismiss.onClick, children: dismiss.label }) }),
-      confirm && /* @__PURE__ */ jsx31(DialogPrimitive2.Close, { asChild: true, children: /* @__PURE__ */ jsx31(Button, { level: confirm.level ?? "primary", size: "cta", onClick: confirm.onClick, children: confirm.label }) })
+  return /* @__PURE__ */ jsxs19("div", { className: style_module_default22.footer, children: [
+    hasActions && /* @__PURE__ */ jsxs19("div", { className: style_module_default22.actions, children: [
+      dismiss && /* @__PURE__ */ jsx32(DialogPrimitive2.Close, { asChild: true, children: /* @__PURE__ */ jsx32(Button, { level: "tertiary", size: "cta", onClick: dismiss.onClick, children: dismiss.label }) }),
+      confirm && /* @__PURE__ */ jsx32(DialogPrimitive2.Close, { asChild: true, children: /* @__PURE__ */ jsx32(Button, { level: confirm.level ?? "primary", size: "cta", onClick: confirm.onClick, children: confirm.label }) })
     ] }),
-    extra && /* @__PURE__ */ jsx31("div", { className: style_module_default21.extra, children: /* @__PURE__ */ jsx31(DialogPrimitive2.Close, { asChild: true, children: /* @__PURE__ */ jsx31(TextButton, { level: "tertiary", size: "xs", onClick: extra.onClick, children: extra.label }) }) })
+    extra && /* @__PURE__ */ jsx32("div", { className: style_module_default22.extra, children: /* @__PURE__ */ jsx32(DialogPrimitive2.Close, { asChild: true, children: /* @__PURE__ */ jsx32(TextButton, { level: "tertiary", size: "xs", onClick: extra.onClick, children: extra.label }) }) })
   ] });
 }, "DialogFooter");
 
 // src/components/Dialog/index.tsx
-import { jsx as jsx32, jsxs as jsxs19 } from "react/jsx-runtime";
-var DialogRoot = /* @__PURE__ */ __name((props) => /* @__PURE__ */ jsx32(DialogPrimitive3.Root, { ...props }), "DialogRoot");
-var DialogTrigger = /* @__PURE__ */ __name(({ by }) => /* @__PURE__ */ jsx32(DialogPrimitive3.Trigger, { asChild: true, children: by }), "DialogTrigger");
+import { jsx as jsx33, jsxs as jsxs20 } from "react/jsx-runtime";
+var DialogRoot = /* @__PURE__ */ __name((props) => /* @__PURE__ */ jsx33(DialogPrimitive3.Root, { ...props }), "DialogRoot");
+var DialogTrigger = /* @__PURE__ */ __name(({ by }) => /* @__PURE__ */ jsx33(DialogPrimitive3.Trigger, { asChild: true, children: by }), "DialogTrigger");
 var DialogContent = /* @__PURE__ */ __name(({
   illust,
   title,
@@ -2911,23 +2968,23 @@ var DialogContent = /* @__PURE__ */ __name(({
   ref,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs19(DialogPrimitive3.Portal, { container, children: [
-    /* @__PURE__ */ jsx32(DialogPrimitive3.Overlay, { className: style_module_default21.overlay }),
-    /* @__PURE__ */ jsxs19(DialogPrimitive3.Content, { ref, className: clsx23(style_module_default21.content, className), ...props, children: [
-      showClose && /* @__PURE__ */ jsx32(DialogPrimitive3.Close, { asChild: true, children: /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsxs20(DialogPrimitive3.Portal, { container, children: [
+    /* @__PURE__ */ jsx33(DialogPrimitive3.Overlay, { className: style_module_default22.overlay }),
+    /* @__PURE__ */ jsxs20(DialogPrimitive3.Content, { ref, className: clsx24(style_module_default22.content, className), ...props, children: [
+      showClose && /* @__PURE__ */ jsx33(DialogPrimitive3.Close, { asChild: true, children: /* @__PURE__ */ jsx33(
         IconButton,
         {
-          className: style_module_default21.close,
+          className: style_module_default22.close,
           "aria-label": "\uB2EB\uAE30",
           level: "quinary",
           size: "m",
           icon: { icon: IconClose2, type: "neutral-label-secondary" }
         }
       ) }),
-      illust && /* @__PURE__ */ jsx32("div", { className: style_module_default21.illust, children: illust }),
-      /* @__PURE__ */ jsx32(DialogHeader, { title, description }),
-      children && /* @__PURE__ */ jsx32("div", { className: style_module_default21.body, children }),
-      /* @__PURE__ */ jsx32(DialogFooter, { dismiss, confirm, extra })
+      illust && /* @__PURE__ */ jsx33("div", { className: style_module_default22.illust, children: illust }),
+      /* @__PURE__ */ jsx33(DialogHeader, { title, description }),
+      children && /* @__PURE__ */ jsx33("div", { className: style_module_default22.body, children }),
+      /* @__PURE__ */ jsx33(DialogFooter, { dismiss, confirm, extra })
     ] })
   ] });
 }, "DialogContent");
@@ -2939,14 +2996,14 @@ var Dialog = Object.assign(DialogRoot, {
 // src/components/BottomSheet/index.tsx
 import * as React4 from "react";
 import { Drawer as Drawer3 } from "vaul";
-import { clsx as clsx24 } from "clsx";
+import { clsx as clsx25 } from "clsx";
 
 // src/components/BottomSheet/Header.tsx
 import { Drawer } from "vaul";
-import { cva as cva14 } from "cva";
+import { cva as cva15 } from "cva";
 
 // src/components/BottomSheet/style.module.scss
-var style_module_default22 = {
+var style_module_default23 = {
   "overlay": "_overlay_ifftf_2",
   "content": "_content_ifftf_9",
   "inner": "_inner_ifftf_18",
@@ -2962,47 +3019,47 @@ var style_module_default22 = {
 };
 
 // src/components/BottomSheet/Header.tsx
-import { jsx as jsx33, jsxs as jsxs20 } from "react/jsx-runtime";
-var titleVariants3 = cva14({ base: [style_module_default22.title, "lp-sys-typo-title4-accent-bold"] });
-var descriptionVariants3 = cva14({
-  base: [style_module_default22.description, "lp-sys-typo-paragraph2-post-regular"]
+import { jsx as jsx34, jsxs as jsxs21 } from "react/jsx-runtime";
+var titleVariants3 = cva15({ base: [style_module_default23.title, "lp-sys-typo-title4-accent-bold"] });
+var descriptionVariants3 = cva15({
+  base: [style_module_default23.description, "lp-sys-typo-paragraph2-post-regular"]
 });
-var BottomSheetHeader = /* @__PURE__ */ __name(({ title, description }) => /* @__PURE__ */ jsxs20("div", { className: style_module_default22.header, children: [
-  /* @__PURE__ */ jsx33(Drawer.Title, { className: titleVariants3(), children: title }),
-  description && /* @__PURE__ */ jsx33(Drawer.Description, { className: descriptionVariants3(), children: description })
+var BottomSheetHeader = /* @__PURE__ */ __name(({ title, description }) => /* @__PURE__ */ jsxs21("div", { className: style_module_default23.header, children: [
+  /* @__PURE__ */ jsx34(Drawer.Title, { className: titleVariants3(), children: title }),
+  description && /* @__PURE__ */ jsx34(Drawer.Description, { className: descriptionVariants3(), children: description })
 ] }), "BottomSheetHeader");
 
 // src/components/BottomSheet/Footer.tsx
 import { Drawer as Drawer2 } from "vaul";
-import { jsx as jsx34, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx35, jsxs as jsxs22 } from "react/jsx-runtime";
 var BottomSheetFooter = /* @__PURE__ */ __name(({ dismiss, confirm, extra }) => {
   const hasActions = Boolean(dismiss || confirm);
   const hasFooter = hasActions || Boolean(extra);
   if (!hasFooter) return null;
-  return /* @__PURE__ */ jsxs21("div", { className: style_module_default22.footer, children: [
-    hasActions && /* @__PURE__ */ jsxs21("div", { className: style_module_default22.actions, children: [
-      dismiss && /* @__PURE__ */ jsx34(Drawer2.Close, { asChild: true, children: /* @__PURE__ */ jsx34(Button, { level: "tertiary", size: "l", onClick: dismiss.onClick, children: dismiss.label }) }),
-      confirm && /* @__PURE__ */ jsx34(Drawer2.Close, { asChild: true, children: /* @__PURE__ */ jsx34(Button, { level: confirm.level ?? "primary", size: "l", onClick: confirm.onClick, children: confirm.label }) })
+  return /* @__PURE__ */ jsxs22("div", { className: style_module_default23.footer, children: [
+    hasActions && /* @__PURE__ */ jsxs22("div", { className: style_module_default23.actions, children: [
+      dismiss && /* @__PURE__ */ jsx35(Drawer2.Close, { asChild: true, children: /* @__PURE__ */ jsx35(Button, { level: "tertiary", size: "l", onClick: dismiss.onClick, children: dismiss.label }) }),
+      confirm && /* @__PURE__ */ jsx35(Drawer2.Close, { asChild: true, children: /* @__PURE__ */ jsx35(Button, { level: confirm.level ?? "primary", size: "l", onClick: confirm.onClick, children: confirm.label }) })
     ] }),
-    extra && /* @__PURE__ */ jsx34("div", { className: style_module_default22.extra, children: /* @__PURE__ */ jsx34(Drawer2.Close, { asChild: true, children: /* @__PURE__ */ jsx34(TextButton, { level: "tertiary", size: "xs", onClick: extra.onClick, children: extra.label }) }) })
+    extra && /* @__PURE__ */ jsx35("div", { className: style_module_default23.extra, children: /* @__PURE__ */ jsx35(Drawer2.Close, { asChild: true, children: /* @__PURE__ */ jsx35(TextButton, { level: "tertiary", size: "xs", onClick: extra.onClick, children: extra.label }) }) })
   ] });
 }, "BottomSheetFooter");
 
 // src/components/BottomSheet/index.tsx
-import { jsx as jsx35, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx36, jsxs as jsxs23 } from "react/jsx-runtime";
 var SNAP_POINTS = [0.5, 1];
 var BottomSheetContext = React4.createContext({
   mode: "auto"
 });
 var BottomSheetRoot = /* @__PURE__ */ __name(({ mode = "auto", children, ...props }) => {
   const value = React4.useMemo(() => ({ mode }), [mode]);
-  return /* @__PURE__ */ jsx35(BottomSheetContext.Provider, { value, children: mode === "snap" ? /* @__PURE__ */ jsx35(Drawer3.Root, { snapPoints: SNAP_POINTS, fadeFromIndex: SNAP_POINTS.length - 1, ...props, children }) : (
+  return /* @__PURE__ */ jsx36(BottomSheetContext.Provider, { value, children: mode === "snap" ? /* @__PURE__ */ jsx36(Drawer3.Root, { snapPoints: SNAP_POINTS, fadeFromIndex: SNAP_POINTS.length - 1, ...props, children }) : (
     // auto: handle이 없으므로 handleOnly로 드래그 닫기를 막고, overlay·ESC 닫기는 Content에서 막는다.
     // dismissible은 유지(false면 vaul이 Drawer.Close까지 막는다) → footer 액션 버튼으로만 닫힌다.
-    /* @__PURE__ */ jsx35(Drawer3.Root, { handleOnly: true, ...props, children })
+    /* @__PURE__ */ jsx36(Drawer3.Root, { handleOnly: true, ...props, children })
   ) });
 }, "BottomSheetRoot");
-var BottomSheetTrigger = /* @__PURE__ */ __name(({ by }) => /* @__PURE__ */ jsx35(Drawer3.Trigger, { asChild: true, children: by }), "BottomSheetTrigger");
+var BottomSheetTrigger = /* @__PURE__ */ __name(({ by }) => /* @__PURE__ */ jsx36(Drawer3.Trigger, { asChild: true, children: by }), "BottomSheetTrigger");
 var BottomSheetContent = /* @__PURE__ */ __name(({
   illust,
   title,
@@ -3024,23 +3081,23 @@ var BottomSheetContent = /* @__PURE__ */ __name(({
     onEscapeKeyDown: /* @__PURE__ */ __name((e) => e.preventDefault(), "onEscapeKeyDown"),
     onInteractOutside: /* @__PURE__ */ __name((e) => e.preventDefault(), "onInteractOutside")
   } : {};
-  return /* @__PURE__ */ jsxs22(Drawer3.Portal, { container, children: [
-    /* @__PURE__ */ jsx35(Drawer3.Overlay, { className: style_module_default22.overlay }),
-    /* @__PURE__ */ jsx35(
+  return /* @__PURE__ */ jsxs23(Drawer3.Portal, { container, children: [
+    /* @__PURE__ */ jsx36(Drawer3.Overlay, { className: style_module_default23.overlay }),
+    /* @__PURE__ */ jsx36(
       Drawer3.Content,
       {
         ref,
         "data-mode": mode,
-        className: clsx24(style_module_default22.content, className),
+        className: clsx25(style_module_default23.content, className),
         style: styleProp,
         ...autoCloseGuards,
         ...props,
-        children: /* @__PURE__ */ jsxs22("div", { className: style_module_default22.inner, children: [
-          resolvedShowHandle && /* @__PURE__ */ jsx35(Drawer3.Handle, { className: style_module_default22.handle }),
-          illust && /* @__PURE__ */ jsx35("div", { className: style_module_default22.illust, children: illust }),
-          /* @__PURE__ */ jsx35(BottomSheetHeader, { title, description }),
-          children && /* @__PURE__ */ jsx35("div", { className: style_module_default22.body, children }),
-          /* @__PURE__ */ jsx35(BottomSheetFooter, { dismiss, confirm, extra })
+        children: /* @__PURE__ */ jsxs23("div", { className: style_module_default23.inner, children: [
+          resolvedShowHandle && /* @__PURE__ */ jsx36(Drawer3.Handle, { className: style_module_default23.handle }),
+          illust && /* @__PURE__ */ jsx36("div", { className: style_module_default23.illust, children: illust }),
+          /* @__PURE__ */ jsx36(BottomSheetHeader, { title, description }),
+          children && /* @__PURE__ */ jsx36("div", { className: style_module_default23.body, children }),
+          /* @__PURE__ */ jsx36(BottomSheetFooter, { dismiss, confirm, extra })
         ] })
       }
     )
@@ -3054,7 +3111,7 @@ var BottomSheet = Object.assign(BottomSheetRoot, {
 // src/components/Ratio/index.tsx
 import * as React5 from "react";
 import { AspectRatio as AspectRatioPrimitive } from "radix-ui";
-import { jsx as jsx36 } from "react/jsx-runtime";
+import { jsx as jsx37 } from "react/jsx-runtime";
 var RATIO = {
   "1/1": 1,
   "3/4": 3 / 4,
@@ -3065,11 +3122,12 @@ var RATIO = {
   "21/9": 21 / 9
 };
 var Ratio = React5.forwardRef(
-  ({ ratio = 1, children, ...props }, ref) => /* @__PURE__ */ jsx36(AspectRatioPrimitive.Root, { ref, ratio, ...props, children })
+  ({ ratio = 1, children, ...props }, ref) => /* @__PURE__ */ jsx37(AspectRatioPrimitive.Root, { ref, ratio, ...props, children })
 );
 Ratio.displayName = "Ratio";
 export {
   AlertDialog,
+  Avatar,
   Badge2 as Badge,
   BottomSheet,
   Button,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@liner-fe/prism",
-  "version": "3.4.11",
+  "version": "3.4.12",
   "type": "module",
   "sideEffects": false,
   "dependencies": {
@@ -17,10 +17,10 @@
     "react-dom": "^19.1.0",
     "jotai": "2.18.0",
     "vaul": "1.1.2",
-    "@liner-fe/design-token": "^3.0.4",
-    "@liner-fe/design-token-primitive": "^0.2.49",
-    "@liner-fe/icon": "^2.0.22",
-    "@liner-fe/illust": "^1.0.1"
+    "@liner-fe/design-token": "^3.0.5",
+    "@liner-fe/icon": "^2.0.23",
+    "@liner-fe/illust": "^1.0.1",
+    "@liner-fe/design-token-primitive": "^0.2.50"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^1.5.0",