@liner-fe/prism 2.1.31 → 2.1.33

package/lib/components/Icon/index.d.ts

@@ -2,6 +2,7 @@ import { VariantProps } from 'cva';
 import { IconKey, IconMapType } from '../../type';
 import { SystemKeys } from '@liner-fe/design-token';
 import { BasicColorType } from '../../types/color';
+import { SVGProps } from 'react';
 declare const iconSizeMap: {
     readonly xs: 16;
     readonly s: 20;
@@ -24,7 +25,7 @@ declare const iconVariants: (props?: ({
 export declare const getIconComponent: (iconKey: IconKey, map: IconMapType) => import("../../type").IconComponent;
 export type IconSizeKey = keyof typeof iconSizeMap;
 export type IconColorType = Extract<SystemKeys, BasicColorType>;
-export interface IconProps extends VariantProps<typeof iconVariants> {
+export interface IconProps extends VariantProps<typeof iconVariants>, Omit<SVGProps<SVGSVGElement>, 'fill'> {
     name: IconKey;
     type?: IconColorType;
     fillType?: IconColorType;

package/lib/components/IconButton/index.d.ts

@@ -2,7 +2,7 @@ import { VariantProps } from 'cva';
 import { ButtonHTMLAttributes } from 'react';
 import { IconProps } from '../Icon';
 declare const iconButtonVariants: (props?: ({
-    level?: "primary" | "secondary" | "tertiary" | "quaternary" | "negative" | "static" | "inverse" | "inverse-static" | undefined;
+    level?: "inverse" | "primary" | "secondary" | "tertiary" | "quaternary" | "negative" | "static" | "inverse-static" | undefined;
     size?: "m" | "s" | "xs" | "l" | undefined;
     fill?: boolean | undefined;
 } & ({

package/lib/components/Illust/index.d.ts

@@ -1,17 +1,17 @@
-import { IllustName } from '../../types/illust';
-import { Property } from 'csstype';
 import { ImageProps } from 'next/image';
-interface IProps extends Omit<ImageProps, 'alt' | 'width' | 'height' | 'fill'> {
-    src: IllustName;
-    isOnlyLight?: boolean;
+import { IllustType } from '../../types/illust';
+import { Property } from 'csstype';
+export interface Source<T extends false | true = true> {
+    name: IllustType;
+    inverse?: T;
+}
+interface IProps extends Omit<ImageProps, 'alt' | 'width' | 'height' | 'fill' | 'src'> {
     width: number;
-    height: number;
-    justifyContent?: Property.JustifyContent;
-    alignItems?: Property.AlignItems;
+    src: {
+        light: Source<false>;
+        dark?: Source;
+    };
+    margin?: Property.Margin<string>;
 }
 export declare const Illust: (props: IProps) => import("react/jsx-runtime").JSX.Element;
-export declare const prefetchIllust: ({ name, isDark }: {
-    name: IllustName;
-    isDark?: boolean;
-}) => Promise<Response>;
 export {};

package/lib/components/Label/index.d.ts

@@ -3,7 +3,7 @@ import * as LabelPrimitive from '@radix-ui/react-label';
 import { VariantProps } from 'cva';
 declare const defaultLabelVariants: (props?: ({
     level?: "primary" | "secondary" | undefined;
-    position?: "right" | "top" | undefined;
+    position?: "top" | "right" | undefined;
     size?: "m" | "s" | "l" | undefined;
     offset?: "high" | "low" | "medium" | undefined;
     disabled?: boolean | undefined;

package/lib/components/Snackbar/SnackbarButton/index.d.ts

@@ -0,0 +1,10 @@
+import { ButtonType } from '../../../types/snackbar';
+interface SnackbarButtonProps {
+    button?: {
+        text?: ButtonType;
+        basic?: ButtonType;
+    };
+    containerStyle?: string;
+}
+export declare const SnackbarButton: ({ button, containerStyle }: SnackbarButtonProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/lib/components/Snackbar/SnackbarClose/index.d.ts

@@ -0,0 +1,7 @@
+import { IconButtonProps } from '../../../components/IconButton';
+import { StrictOmit } from '../../../types/typescript';
+interface SnackbarCloseProps extends StrictOmit<IconButtonProps, 'icon' | 'level' | 'size' | 'fill' | 'onClick'> {
+    onCloseSnackbar: () => void;
+}
+export declare const SnackbarClose: ({ onCloseSnackbar, className }: SnackbarCloseProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/Snackbar/SnackbarDescription/index.d.ts

@@ -0,0 +1,5 @@
+interface SnackbarDescriptionProps {
+    description?: string;
+}
+export declare const SnackbarDescription: ({ description }: SnackbarDescriptionProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/lib/components/Snackbar/SnackbarIcon/index.d.ts

@@ -0,0 +1,6 @@
+import { IconProps } from '../../../components/Icon';
+interface SnackbarIconProps {
+    icon?: Pick<IconProps, 'name' | 'fill' | 'thick'>;
+}
+export declare const SnackbarIcon: (props: SnackbarIconProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/lib/components/Snackbar/SnackbarTitle/index.d.ts

@@ -0,0 +1,5 @@
+interface SnackbarTitleProps {
+    title: string;
+}
+export declare const SnackbarTitle: ({ title }: SnackbarTitleProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/Snackbar/index.d.ts

@@ -0,0 +1,3 @@
+import { SnackbarPropWithId } from '../../types/snackbar';
+export declare const Snackbar: () => import("react/jsx-runtime").JSX.Element;
+export declare const SingleSnackbar: (props: SnackbarPropWithId) => import("react/jsx-runtime").JSX.Element;

package/lib/components/TextButton/index.d.ts

@@ -1,7 +1,7 @@
 import { ButtonIconProps, ButtonSizeType, CommonButtonProps } from '../../index';
 import { VariantProps } from 'cva';
 declare const textButtonVariants: (props?: ({
-    level?: "primary" | "secondary" | "tertiary" | "inverse" | "inverse-static" | undefined;
+    level?: "inverse" | "primary" | "secondary" | "tertiary" | "inverse-static" | undefined;
     size?: "m" | "s" | undefined;
     thick?: boolean | undefined;
     underline?: boolean | undefined;

package/lib/components/Toast/export.d.ts

@@ -1,2 +1,2 @@
-export { useToast } from './hooks/useToast';
+export { useToast } from '../../hooks/useToast';
 export { Toaster } from './index';

package/lib/components/Typography/Set/Heading.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
-import { ITypographyCommon } from '../types';
-export interface IHeadingProps extends ITypographyCommon<HTMLHeadingElement> {
+import { HTMLAsElement, ITypographyCommon } from '../types';
+export interface IHeadingProps extends ITypographyCommon<HTMLAsElement> {
     type: 'answer';
     size: 1 | 2 | 3 | 4 | 5 | 6;
 }
-export declare const Heading: React.ForwardRefExoticComponent<IHeadingProps & React.RefAttributes<HTMLHeadingElement>>;
+export declare const Heading: React.ForwardRefExoticComponent<IHeadingProps & React.RefAttributes<HTMLAsElement>>;

package/lib/components/Typography/types.d.ts

@@ -1,6 +1,6 @@
 import { BasicColorType } from '../../types/color';
 import { HTMLAttributes } from 'react';
-export interface ITypographyCommon<T extends HTMLElement = HTMLParagraphElement> extends Omit<HTMLAttributes<T>, 'color'> {
+export interface ITypographyCommon<T extends HTMLElement = HTMLParagraphElement> extends Omit<HTMLAttributes<T>, 'color'>, WithHTMLAsProps {
     color?: BasicColorType;
 }
 export type BLACK = 'black';
@@ -11,3 +11,10 @@ export type ANSWER = 'answer';
 export type ACCENT = 'accent';
 export type NORMAL = 'normal';
 export type POST = 'post';
+type AcceptAsHTMLTag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'header' | 'footer' | 'p' | 'article' | 'body' | 'main' | 'b' | 'blockquote';
+export interface WithHTMLAsProps {
+    as?: Extract<keyof HTMLElementTagNameMap, AcceptAsHTMLTag>;
+}
+type HTMLAsElementObject = Pick<HTMLElementTagNameMap, AcceptAsHTMLTag>;
+export type HTMLAsElement = HTMLAsElementObject[keyof HTMLAsElementObject];
+export {};

package/lib/constants/illust/name.d.ts

@@ -1 +1,2 @@
-export declare const illustNames: readonly ["rectangle_cheerup_01", "rectangle_cheerup_02", "rectangle_searching", "rectangle_space_work", "rectangle_standing_with_a_star", "square_ai_writing_essay_mode", "square_bomb_timeout", "square_book_pencil_general_mode", "square_brain_deep_q_a", "square_bye_end_custom_ai", "square_careers_page_coffee", "square_careers_page_english", "square_careers_page_money", "square_careers_page_palm", "square_careers_page_shake_hands", "square_careers_page_tennis", "square_clap", "square_decoration_bulb", "square_decoration_hourglass", "square_decoration_star_01", "square_decoration_star_02", "square_decoration_star_03", "square_decoration_star_04", "square_decoration_star_05", "square_decoration_star_06", "square_decoration_star_07", "square_decoration_star_08", "square_decoration_star_09", "square_decoration_star_10", "square_decoration_star_11", "square_documents_reliable_citation", "square_documents_reliable_source", "square_empty_box_2", "square_empty_box_empty_page", "square_feather_pen", "square_find_man", "square_find_paper_use_liner", "square_folder_01", "square_folder_02", "square_free_ticket_welcome", "square_gift_welcome", "square_give_gift", "square_graduation_cap_pencil_scholar_mode", "square_holding_a_book_onboarding", "square_introduce", "square_introduce_pro", "square_lock_locked_thread", "square_magnifying_glass", "square_magnifying_glass_not_found", "square_make_profile_onboarding", "square_megaphone", "square_paper", "square_pencil_paper_empty_history", "square_pricing_page_airplane", "square_pricing_page_car", "square_pricing_page_flag", "square_pricing_page_rocket", "square_raining_error", "square_searching_01", "square_searching_02", "square_searching_03", "square_smoke_timeout", "square_time_out", "square_time_out_time_out_01", "square_time_out_time_out_02", "square_time_out_time_out_03", "square_time_out_time_out_04", "square_understand_concepts_use_liner", "square_university_01", "square_university_02", "square_working_01", "square_worried_01", "square_worried_02", "square_worried_03", "square_worried_04", "square_worried_05", "square_write_essay_use_liner", "square_writing", "square_writing_essay_mode"];
+export declare const illustNames: readonly ["decoration-airplane-1_1", "decoration-bulb-1_1", "decoration-car-1_1", "decoration-coffee-1_1", "decoration-english-1_1", "decoration-flag-1_1", "decoration-hourglass-1_1", "decoration-money-1_1", "decoration-palm-1_1", "decoration-rocket-1_1", "decoration-shake_hands-1_1", "decoration-star_01-1_1", "decoration-star_02-1_1", "decoration-star_03-1_1", "decoration-star_04-1_1", "decoration-star_05-1_1", "decoration-star_06-1_1", "decoration-star_07-1_1", "decoration-star_08-1_1", "decoration-star_09-1_1", "decoration-star_10-1_1", "decoration-star_11-1_1", "decoration-tennis-1_1", "object-bomb-1_1", "object-book_pencil-4_3", "object-brain-1_1", "object-clap-1_1", "object-documents_02-1_1", "object-empty_box-1_1", "object-empty_box-4_3", "object-feather_pen-1_1", "object-folder_01-1_1", "object-folder_02-1_1", "object-free_ticket-1_1", "object-gift-1_1", "object-give_gift-1_1", "object-graduation_cap_pencil-4_3", "object-lock-4_3", "object-magnifying_glass-1_1", "object-magnifying_glass-4_3", "object-megaphone-1_1", "object-paper-1_1", "object-pencil_paper-16_9", "object-puzzle-4_3", "object-smoke-16_9", "object-university_01-1_1", "object-university_02-1_1", "object_documents_01-1_1", "object_find_man-1_1", "person-ai_writing-1_1", "person-bye-4_3", "person-cheerup-16_9", "person-cheerup-4_3", "person-holding_a_book-1_1", "person-introduce-1_1", "person-introduce-pro-1_1", "person-make_profile-1_1", "person-raining-1_1", "person-searching-16_9", "person-searching_01-1_1", "person-searching_01-4_3", "person-searching_02-1_1", "person-space_in_work-4_3", "person-standing_with_a_star-16_9", "person-time_out_01-1_1", "person-time_out_02-1_1", "person-time_out_03-1_1", "person-time_out_04-1_1", "person-time_out_05-1_1", "person-understand-1_1", "person-working_01-4_3", "person-working_02-4_3", "person-worried-1_1", "person-worried_01-4_3", "person-worried_02-4_3", "person-worried_03-4_3", "person-worried_04-4_3", "person-writing_01-1_1", "person-writing_02-1_1"];
+export declare const darkIllustNames: readonly ["decoration-airplane-1_1", "decoration-bulb-1_1", "decoration-car-1_1", "decoration-flag-1_1", "decoration-hourglass-1_1", "decoration-rocket-1_1", "decoration-star_01-1_1", "decoration-star_02-1_1", "decoration-star_03-1_1", "decoration-star_04-1_1", "decoration-star_05-1_1", "decoration-star_06-1_1", "decoration-star_07-1_1", "decoration-star_08-1_1", "decoration-star_09-1_1", "decoration-star_10-1_1", "decoration-star_11-1_1", "object-bomb-1_1", "object-brain-1_1", "object-clap-1_1", "object-documents_02-1_1", "object-empty_box-1_1", "object-empty_box-4_3", "object-folder_01-1_1", "object-folder_02-1_1", "object-free_ticket-1_1", "object-gift-1_1", "object-give_gift-1_1", "object-graduation_cap_pencil-4_3", "object-lock-4_3", "object-magnifying_glass-1_1", "object-magnifying_glass-4_3", "object-megaphone-1_1", "object-paper-1_1", "object-pencil_paper-16_9", "object-puzzle-4_3", "object-smoke-16_9", "object_documents_01-1_1", "object_find_man-1_1", "person-bye-4_3", "person-holding_a_book-1_1", "person-introduce-1_1", "person-introduce-pro-1_1", "person-make_profile-1_1", "person-raining-1_1", "person-searching-16_9", "person-searching_01-1_1", "person-searching_01-4_3", "person-searching_02-1_1", "person-space_in_work-4_3", "person-standing_with_a_star-16_9", "person-time_out_01-1_1", "person-time_out_02-1_1", "person-time_out_03-1_1", "person-time_out_04-1_1", "person-time_out_05-1_1", "person-working_01-4_3", "person-worried-1_1", "person-worried_01-4_3", "person-worried_02-4_3", "person-worried_03-4_3", "person-worried_04-4_3", "person-writing_01-1_1"];

package/lib/constants/illust/path.d.ts

@@ -0,0 +1,3 @@
+export declare const ILLUST = "/illust";
+export declare const DARK_MODE_ILLUST_PREFIX = "/illust/dark/";
+export declare const LIGHT_MODE_ILLUST_PREFIX = "/illust/light/";

package/lib/constants/illust/size.d.ts

@@ -1,5 +1,5 @@
-import { IllustName } from '../../types/illust';
-export declare const illustSize: Partial<Record<IllustName, {
+import { IllustType } from '../../types/illust';
+export declare const illustSize: Partial<Record<IllustType, {
     width: number;
     height: number;
 }>>;

package/lib/hooks/useIllust.d.ts

@@ -0,0 +1,9 @@
+import { Source } from '../illust';
+export declare const useIllust: ({ darkSrc, src }: {
+    darkSrc?: Source;
+    src: Source<false>;
+}) => {
+    sourcePrefix: string;
+    currentSourceByColorTheme: import("../types/illust").IllustType;
+    isDarkMode: boolean;
+};

package/lib/hooks/useSnackbar.d.ts

@@ -0,0 +1,5 @@
+import { SnackbarProp, SnackbarPropWithId } from '../types/snackbar';
+export declare const snackbarAtom: import("recoil").RecoilState<SnackbarPropWithId[]>;
+export declare const useSnackbar: () => {
+    open: (info: SnackbarProp) => void;
+};

package/lib/hooks/useToast.d.ts

@@ -0,0 +1,9 @@
+import { ToastProp } from '../components/Toast';
+import { StrictOmit } from '../types/typescript';
+export declare const toastAtom: import("recoil").RecoilState<ToastProp[]>;
+export declare const useToast: () => {
+    open: (toast: StrictOmit<ToastProp, "toastId" | "timer">) => {
+        toastId: number;
+    };
+    endLoading: (toastId: number) => void;
+};

package/lib/illust.d.ts

@@ -1 +1,2 @@
 export * from './components/Illust';
+export * from './utils/illust';

package/lib/illust.js

@@ -37,44 +37,82 @@ __export(illust_exports, {
 module.exports = __toCommonJS(illust_exports);
 
 // src/constants/illust/size.ts
+var ratio = { "16:9": { width: 1344, height: 756 }, "4:3": { width: 1008, height: 756 } };
 var illustSize = {
-  rectangle_standing_with_a_star: { width: 2422, height: 1282 },
-  rectangle_space_work: { width: 2422, height: 1282 },
-  rectangle_searching: { width: 2422, height: 1282 },
-  rectangle_cheerup_01: { width: 2422, height: 1282 },
-  rectangle_cheerup_02: { width: 2422, height: 1282 }
+  "object-pencil_paper-16_9": ratio["16:9"],
+  "object-smoke-16_9": ratio["16:9"],
+  "person-standing_with_a_star-16_9": ratio["16:9"],
+  "person-searching-16_9": ratio["16:9"],
+  "person-cheerup-16_9": ratio["16:9"],
+  "object-graduation_cap_pencil-4_3": ratio["4:3"],
+  "object-book_pencil-4_3": ratio["4:3"],
+  "object-puzzle-4_3": ratio["4:3"],
+  "object-magnifying_glass-4_3": ratio["4:3"],
+  "object-lock-4_3": ratio["4:3"],
+  "object-empty_box-4_3": ratio["4:3"],
+  "person-working_01-4_3": ratio["4:3"],
+  "person-searching_01-4_3": ratio["4:3"],
+  "person-worried_01-4_3": ratio["4:3"],
+  "person-worried_02-4_3": ratio["4:3"],
+  "person-worried_03-4_3": ratio["4:3"],
+  "person-worried_04-4_3": ratio["4:3"],
+  "person-working_02-4_3": ratio["4:3"],
+  "person-bye-4_3": ratio["4:3"],
+  "person-space_in_work-4_3": ratio["4:3"],
+  "person-cheerup-4_3": ratio["4:3"]
 };
 
 // src/components/Illust/index.tsx
-var import_design_token = require("@liner-fe/design-token");
 var import_image = __toESM(require("next/image"));
-var import_jsx_runtime = require("react/jsx-runtime");
+
+// src/constants/illust/path.ts
 var ILLUST = "/illust";
-var Illust = /* @__PURE__ */ __name((props) => {
+var DARK_MODE_ILLUST_PREFIX = `${ILLUST}/dark/`;
+var LIGHT_MODE_ILLUST_PREFIX = `${ILLUST}/light/`;
+
+// src/hooks/useIllust.ts
+var import_design_token = require("@liner-fe/design-token");
+var useIllust = /* @__PURE__ */ __name(({ darkSrc, src }) => {
   const { isDarkMode } = (0, import_design_token.useDarkTheme)();
-  const { src, isOnlyLight, width, height, justifyContent = "center", alignItems = "center" } = props;
-  const prefixSrc = (() => {
-    const darkModeIllust = `${ILLUST}/dark/`;
-    const lightModeIllust = `${ILLUST}/light/`;
-    if (isDarkMode && !isOnlyLight) {
-      return darkModeIllust;
+  const sourcePrefix = (() => {
+    if (isDarkMode) {
+      if (darkSrc?.inverse) {
+        return LIGHT_MODE_ILLUST_PREFIX;
+      }
+      return DARK_MODE_ILLUST_PREFIX;
+    }
+    if (src.inverse === false) {
+      return DARK_MODE_ILLUST_PREFIX;
     }
-    return lightModeIllust;
+    return LIGHT_MODE_ILLUST_PREFIX;
   })();
-  const aspectRatio = illustSize[src] ? illustSize[src].width / illustSize[src].height : void 0;
+  const currentSourceByColorTheme = isDarkMode ? darkSrc?.name || src.name : src.name;
+  return { sourcePrefix, currentSourceByColorTheme, isDarkMode };
+}, "useIllust");
+
+// src/components/Illust/index.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var Illust = /* @__PURE__ */ __name((props) => {
+  const { src, width, margin } = props;
+  const { sourcePrefix, currentSourceByColorTheme } = useIllust({ darkSrc: src.dark, src: src.light });
+  const aspectRatio = illustSize[currentSourceByColorTheme] ? illustSize[currentSourceByColorTheme].width / illustSize[currentSourceByColorTheme].height : void 0;
   const css = {
     width,
-    height,
-    display: "flex",
-    justifyContent,
-    alignItems
+    margin
   };
-  const source = `${prefixSrc}${src}.webp`;
-  if (aspectRatio) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: css, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_image.default, { alt: src, ...props, src: source, width, height: width / aspectRatio }) });
-  }
-  const size = width > height ? height : width;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: css, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_image.default, { alt: src, ...props, src: source, width: size, height: size }) });
+  const source = `${sourcePrefix}${currentSourceByColorTheme}.webp`;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: css, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_image.default,
+    {
+      alt: currentSourceByColorTheme,
+      ...props,
+      src: source,
+      width,
+      height: aspectRatio ? width / aspectRatio : width
+    }
+  ) });
 }, "Illust");
+
+// src/utils/illust.ts
 var prefetchIllust = /* @__PURE__ */ __name(async ({ name, isDark = false }) => await fetch(`${ILLUST}${isDark ? "/dark/" : "/light/"}${name}.webp`), "prefetchIllust");
 //# sourceMappingURL=illust.js.map

package/lib/illust.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../src/illust.ts", "../src/constants/illust/size.ts", "../src/components/Illust/index.tsx"],
-  "sourcesContent": ["export * from './components/Illust';\n", "import { IllustName } from '@/types/illust';\n\nexport const illustSize: Partial<Record<IllustName, { width: number; height: number }>> = {\n  rectangle_standing_with_a_star: { width: 2422, height: 1282 },\n  rectangle_space_work: { width: 2422, height: 1282 },\n  rectangle_searching: { width: 2422, height: 1282 },\n  rectangle_cheerup_01: { width: 2422, height: 1282 },\n  rectangle_cheerup_02: { width: 2422, height: 1282 },\n};\n", "import { illustSize } from '@/constants/illust/size';\nimport { IllustName } from '@/types/illust';\nimport { useDarkTheme } from '@liner-fe/design-token';\nimport { Property } from 'csstype';\nimport Image, { ImageProps } from 'next/image';\nimport { CSSProperties } from 'react';\n\ninterface IProps extends Omit<ImageProps, 'alt' | 'width' | 'height' | 'fill'> {\n  src: IllustName;\n  isOnlyLight?: boolean;\n  width: number;\n  height: number;\n  justifyContent?: Property.JustifyContent;\n  alignItems?: Property.AlignItems;\n}\n\nconst ILLUST = '/illust';\n\n// \uB2E4\uD06C\uBAA8\uB4DC \uB9E8 \uCC98\uC74C \uC811\uADFC \uAE5C\uBE61\uC784 \uC774\uC288 \uD574\uACB0\nexport const Illust = (props: IProps) => {\n  const { isDarkMode } = useDarkTheme();\n  const { src, isOnlyLight, width, height, justifyContent = 'center', alignItems = 'center' } = props;\n\n  const prefixSrc = (() => {\n    const darkModeIllust = `${ILLUST}/dark/`;\n    const lightModeIllust = `${ILLUST}/light/`;\n\n    if (isDarkMode && !isOnlyLight) {\n      return darkModeIllust;\n    }\n\n    return lightModeIllust;\n  })();\n\n  const aspectRatio = illustSize[src] ? illustSize[src].width / illustSize[src].height : undefined;\n\n  const css: CSSProperties = {\n    width,\n    height,\n    display: 'flex',\n    justifyContent,\n    alignItems,\n  };\n\n  const source = `${prefixSrc}${src}.webp`;\n\n  if (aspectRatio) {\n    return (\n      <div style={css}>\n        <Image alt={src} {...props} src={source} width={width} height={width / aspectRatio} />\n      </div>\n    );\n  }\n\n  const size = width > height ? height : width;\n\n  return (\n    <div style={css}>\n      <Image alt={src} {...props} src={source} width={size} height={size} />\n    </div>\n  );\n};\n\nexport const prefetchIllust = async ({ name, isDark = false }: { name: IllustName; isDark?: boolean }) =>\n  await fetch(`${ILLUST}${isDark ? '/dark/' : '/light/'}${name}.webp`);\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACEO,IAAM,aAA6E;AAAA,EACxF,gCAAgC,EAAE,OAAO,MAAM,QAAQ,KAAK;AAAA,EAC5D,sBAAsB,EAAE,OAAO,MAAM,QAAQ,KAAK;AAAA,EAClD,qBAAqB,EAAE,OAAO,MAAM,QAAQ,KAAK;AAAA,EACjD,sBAAsB,EAAE,OAAO,MAAM,QAAQ,KAAK;AAAA,EAClD,sBAAsB,EAAE,OAAO,MAAM,QAAQ,KAAK;AACpD;;;ACNA,0BAA6B;AAE7B,mBAAkC;AA6C1B;AAjCR,IAAM,SAAS;AAGR,IAAM,SAAS,wBAAC,UAAkB;AACvC,QAAM,EAAE,WAAW,QAAI,kCAAa;AACpC,QAAM,EAAE,KAAK,aAAa,OAAO,QAAQ,iBAAiB,UAAU,aAAa,SAAS,IAAI;AAE9F,QAAM,aAAa,MAAM;AACvB,UAAM,iBAAiB,GAAG,MAAM;AAChC,UAAM,kBAAkB,GAAG,MAAM;AAEjC,QAAI,cAAc,CAAC,aAAa;AAC9B,aAAO;AAAA,IACT;AAEA,WAAO;AAAA,EACT,GAAG;AAEH,QAAM,cAAc,WAAW,GAAG,IAAI,WAAW,GAAG,EAAE,QAAQ,WAAW,GAAG,EAAE,SAAS;AAEvF,QAAM,MAAqB;AAAA,IACzB;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,EACF;AAEA,QAAM,SAAS,GAAG,SAAS,GAAG,GAAG;AAEjC,MAAI,aAAa;AACf,WACE,4CAAC,SAAI,OAAO,KACV,sDAAC,aAAAA,SAAA,EAAM,KAAK,KAAM,GAAG,OAAO,KAAK,QAAQ,OAAc,QAAQ,QAAQ,aAAa,GACtF;AAAA,EAEJ;AAEA,QAAM,OAAO,QAAQ,SAAS,SAAS;AAEvC,SACE,4CAAC,SAAI,OAAO,KACV,sDAAC,aAAAA,SAAA,EAAM,KAAK,KAAM,GAAG,OAAO,KAAK,QAAQ,OAAO,MAAM,QAAQ,MAAM,GACtE;AAEJ,GA1CsB;AA4Cf,IAAM,iBAAiB,8BAAO,EAAE,MAAM,SAAS,MAAM,MAC1D,MAAM,MAAM,GAAG,MAAM,GAAG,SAAS,WAAW,SAAS,GAAG,IAAI,OAAO,GADvC;",
+  "sources": ["../src/illust.ts", "../src/constants/illust/size.ts", "../src/components/Illust/index.tsx", "../src/constants/illust/path.ts", "../src/hooks/useIllust.ts", "../src/utils/illust.ts"],
+  "sourcesContent": ["export * from './components/Illust';\nexport * from './utils/illust';\n", "import { IllustType } from '@/types/illust';\n\nconst ratio = { '16:9': { width: 1344, height: 756 }, '4:3': { width: 1008, height: 756 } };\n\nexport const illustSize: Partial<Record<IllustType, { width: number; height: number }>> = {\n  'object-pencil_paper-16_9': ratio['16:9'],\n  'object-smoke-16_9': ratio['16:9'],\n  'person-standing_with_a_star-16_9': ratio['16:9'],\n  'person-searching-16_9': ratio['16:9'],\n  'person-cheerup-16_9': ratio['16:9'],\n  'object-graduation_cap_pencil-4_3': ratio['4:3'],\n  'object-book_pencil-4_3': ratio['4:3'],\n  'object-puzzle-4_3': ratio['4:3'],\n  'object-magnifying_glass-4_3': ratio['4:3'],\n  'object-lock-4_3': ratio['4:3'],\n  'object-empty_box-4_3': ratio['4:3'],\n  'person-working_01-4_3': ratio['4:3'],\n  'person-searching_01-4_3': ratio['4:3'],\n  'person-worried_01-4_3': ratio['4:3'],\n  'person-worried_02-4_3': ratio['4:3'],\n  'person-worried_03-4_3': ratio['4:3'],\n  'person-worried_04-4_3': ratio['4:3'],\n  'person-working_02-4_3': ratio['4:3'],\n  'person-bye-4_3': ratio['4:3'],\n  'person-space_in_work-4_3': ratio['4:3'],\n  'person-cheerup-4_3': ratio['4:3'],\n};\n", "import { illustSize } from '@/constants/illust/size';\nimport Image, { ImageProps } from 'next/image';\nimport { CSSProperties } from 'react';\nimport { useIllust } from '@/hooks/useIllust';\nimport { IllustType } from '@/types/illust';\nimport { Property } from 'csstype';\n\nexport interface Source<T extends false | true = true> {\n  name: IllustType;\n  inverse?: T;\n}\n\ninterface IProps extends Omit<ImageProps, 'alt' | 'width' | 'height' | 'fill' | 'src'> {\n  width: number;\n  src: { light: Source<false>; dark?: Source };\n  margin?: Property.Margin<string>;\n}\n\nexport const Illust = (props: IProps) => {\n  const { src, width, margin } = props;\n  const { sourcePrefix, currentSourceByColorTheme } = useIllust({ darkSrc: src.dark, src: src.light });\n\n  const aspectRatio = illustSize[currentSourceByColorTheme]\n    ? illustSize[currentSourceByColorTheme].width / illustSize[currentSourceByColorTheme].height\n    : undefined;\n\n  const css: CSSProperties = {\n    width,\n    margin,\n  };\n\n  const source = `${sourcePrefix}${currentSourceByColorTheme}.webp`;\n\n  return (\n    <div style={css}>\n      <Image\n        alt={currentSourceByColorTheme}\n        {...props}\n        src={source}\n        width={width}\n        height={aspectRatio ? width / aspectRatio : width}\n      />\n    </div>\n  );\n};\n", "export const ILLUST = '/illust';\n\nexport const DARK_MODE_ILLUST_PREFIX = `${ILLUST}/dark/`;\nexport const LIGHT_MODE_ILLUST_PREFIX = `${ILLUST}/light/`;\n", "import { DARK_MODE_ILLUST_PREFIX, LIGHT_MODE_ILLUST_PREFIX } from '@/constants/illust/path';\nimport { Source } from '@/illust';\nimport { useDarkTheme } from '@liner-fe/design-token';\n\nexport const useIllust = ({ darkSrc, src }: { darkSrc?: Source; src: Source<false> }) => {\n  const { isDarkMode } = useDarkTheme();\n\n  const sourcePrefix = (() => {\n    if (isDarkMode) {\n      if (darkSrc?.inverse) {\n        return LIGHT_MODE_ILLUST_PREFIX;\n      }\n\n      return DARK_MODE_ILLUST_PREFIX;\n    }\n\n    if (src.inverse === false) {\n      return DARK_MODE_ILLUST_PREFIX;\n    }\n\n    return LIGHT_MODE_ILLUST_PREFIX;\n  })();\n\n  const currentSourceByColorTheme = isDarkMode ? darkSrc?.name || src.name : src.name;\n\n  return { sourcePrefix, currentSourceByColorTheme, isDarkMode };\n};\n", "import { ILLUST } from '@/constants/illust/path';\nimport { IllustType } from '@/types/illust';\n\nexport const prefetchIllust = async ({ name, isDark = false }: { name: IllustType; isDark?: boolean }) =>\n  await fetch(`${ILLUST}${isDark ? '/dark/' : '/light/'}${name}.webp`);\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACEA,IAAM,QAAQ,EAAE,QAAQ,EAAE,OAAO,MAAM,QAAQ,IAAI,GAAG,OAAO,EAAE,OAAO,MAAM,QAAQ,IAAI,EAAE;AAEnF,IAAM,aAA6E;AAAA,EACxF,4BAA4B,MAAM,MAAM;AAAA,EACxC,qBAAqB,MAAM,MAAM;AAAA,EACjC,oCAAoC,MAAM,MAAM;AAAA,EAChD,yBAAyB,MAAM,MAAM;AAAA,EACrC,uBAAuB,MAAM,MAAM;AAAA,EACnC,oCAAoC,MAAM,KAAK;AAAA,EAC/C,0BAA0B,MAAM,KAAK;AAAA,EACrC,qBAAqB,MAAM,KAAK;AAAA,EAChC,+BAA+B,MAAM,KAAK;AAAA,EAC1C,mBAAmB,MAAM,KAAK;AAAA,EAC9B,wBAAwB,MAAM,KAAK;AAAA,EACnC,yBAAyB,MAAM,KAAK;AAAA,EACpC,2BAA2B,MAAM,KAAK;AAAA,EACtC,yBAAyB,MAAM,KAAK;AAAA,EACpC,yBAAyB,MAAM,KAAK;AAAA,EACpC,yBAAyB,MAAM,KAAK;AAAA,EACpC,yBAAyB,MAAM,KAAK;AAAA,EACpC,yBAAyB,MAAM,KAAK;AAAA,EACpC,kBAAkB,MAAM,KAAK;AAAA,EAC7B,4BAA4B,MAAM,KAAK;AAAA,EACvC,sBAAsB,MAAM,KAAK;AACnC;;;ACzBA,mBAAkC;;;ACD3B,IAAM,SAAS;AAEf,IAAM,0BAA0B,GAAG,MAAM;AACzC,IAAM,2BAA2B,GAAG,MAAM;;;ACDjD,0BAA6B;AAEtB,IAAM,YAAY,wBAAC,EAAE,SAAS,IAAI,MAAgD;AACvF,QAAM,EAAE,WAAW,QAAI,kCAAa;AAEpC,QAAM,gBAAgB,MAAM;AAC1B,QAAI,YAAY;AACd,UAAI,SAAS,SAAS;AACpB,eAAO;AAAA,MACT;AAEA,aAAO;AAAA,IACT;AAEA,QAAI,IAAI,YAAY,OAAO;AACzB,aAAO;AAAA,IACT;AAEA,WAAO;AAAA,EACT,GAAG;AAEH,QAAM,4BAA4B,aAAa,SAAS,QAAQ,IAAI,OAAO,IAAI;AAE/E,SAAO,EAAE,cAAc,2BAA2B,WAAW;AAC/D,GAtByB;;;AF+BnB;AAjBC,IAAM,SAAS,wBAAC,UAAkB;AACvC,QAAM,EAAE,KAAK,OAAO,OAAO,IAAI;AAC/B,QAAM,EAAE,cAAc,0BAA0B,IAAI,UAAU,EAAE,SAAS,IAAI,MAAM,KAAK,IAAI,MAAM,CAAC;AAEnG,QAAM,cAAc,WAAW,yBAAyB,IACpD,WAAW,yBAAyB,EAAE,QAAQ,WAAW,yBAAyB,EAAE,SACpF;AAEJ,QAAM,MAAqB;AAAA,IACzB;AAAA,IACA;AAAA,EACF;AAEA,QAAM,SAAS,GAAG,YAAY,GAAG,yBAAyB;AAE1D,SACE,4CAAC,SAAI,OAAO,KACV;AAAA,IAAC,aAAAA;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACJ,GAAG;AAAA,MACJ,KAAK;AAAA,MACL;AAAA,MACA,QAAQ,cAAc,QAAQ,cAAc;AAAA;AAAA,EAC9C,GACF;AAEJ,GA1BsB;;;AGff,IAAM,iBAAiB,8BAAO,EAAE,MAAM,SAAS,MAAM,MAC1D,MAAM,MAAM,GAAG,MAAM,GAAG,SAAS,WAAW,SAAS,GAAG,IAAI,OAAO,GADvC;",
   "names": ["Image"]
 }