@weing-dev/ui-kit-primitive 0.4.4 → 0.4.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/LNB/LNB.context.d.ts +1 -4
- package/dist/components/LNB/LNB.d.ts +1 -2
- package/dist/components/Thumbnail/Thumbnail.context.d.ts +38 -3
- package/dist/components/Thumbnail/Thumbnail.d.ts +6 -9
- package/dist/components/Thumbnail/thumbnailImage.util.d.ts +13 -0
- package/dist/display.css +1 -1
- package/dist/display.js +2247 -2073
- package/dist/index.css +1 -1
- package/dist/index.js +5923 -5789
- package/dist/index.umd.cjs +24 -24
- package/dist/navigation.js +461 -501
- package/package.json +3 -3
|
@@ -11,12 +11,9 @@ export type LNBListItem = {
|
|
|
11
11
|
isOpen?: boolean;
|
|
12
12
|
isActive?: boolean;
|
|
13
13
|
};
|
|
14
|
-
export type LNBContextType =
|
|
15
|
-
onClick?: (href: string) => void;
|
|
16
|
-
};
|
|
14
|
+
export type LNBContextType = Record<string, never>;
|
|
17
15
|
export declare const initialState: LNBContextType;
|
|
18
16
|
export declare const LNBContext: React.Context<LNBContextType>;
|
|
19
17
|
export type LNBProviderProps = React.PropsWithChildren<{
|
|
20
|
-
onClick?: (href: string) => void;
|
|
21
18
|
className?: string;
|
|
22
19
|
}>;
|
|
@@ -12,12 +12,11 @@ type LNBItemProps = React.PropsWithChildren<{
|
|
|
12
12
|
icon?: React.ComponentProps<typeof Icon>["name"] | null;
|
|
13
13
|
subtitle?: string;
|
|
14
14
|
type: "full" | "secondary" | "list" | "title";
|
|
15
|
-
href: string;
|
|
16
15
|
disabled?: boolean;
|
|
17
16
|
hasChildren: boolean;
|
|
18
17
|
isOpen?: boolean;
|
|
19
18
|
isActive?: boolean;
|
|
20
|
-
}>;
|
|
19
|
+
}> & React.HTMLAttributes<HTMLDivElement>;
|
|
21
20
|
declare const Item: (props: LNBItemProps) => import("react/jsx-runtime").JSX.Element;
|
|
22
21
|
type LNBListProps = {
|
|
23
22
|
className?: string;
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { default as React } from 'react';
|
|
2
|
+
import { StrictIconProps } from '../Icon/Icon';
|
|
2
3
|
export declare const THUMBNAIL_SIZES: {
|
|
3
4
|
readonly xxs: 40;
|
|
4
5
|
readonly xs: 48;
|
|
@@ -10,18 +11,52 @@ export declare const THUMBNAIL_SIZES: {
|
|
|
10
11
|
readonly xxl: 192;
|
|
11
12
|
};
|
|
12
13
|
export type ThumbnailSize = keyof typeof THUMBNAIL_SIZES | number;
|
|
13
|
-
|
|
14
|
+
/** EmptyImage / ErrorImage 아이콘 기본 색상 */
|
|
15
|
+
export declare const THUMBNAIL_PLACEHOLDER_ICON_COLOR = "var(--Text-Disabled, #C4CDD5)";
|
|
16
|
+
/** RemoveButton / EditButton 아이콘 기본 색상 */
|
|
17
|
+
export declare const THUMBNAIL_ACTION_ICON_COLOR = "#fff";
|
|
18
|
+
export type ThumbnailPlaceholderConfig = {
|
|
19
|
+
icon?: Partial<StrictIconProps>;
|
|
20
|
+
};
|
|
21
|
+
/** Thumbnail이 Image(또는 imageComponent)에 주입하는 최소 props */
|
|
22
|
+
export type ThumbnailManagedImageProps = {
|
|
23
|
+
src: string;
|
|
24
|
+
alt?: string;
|
|
25
|
+
className?: string;
|
|
26
|
+
style?: React.CSSProperties;
|
|
27
|
+
onLoad?: () => void;
|
|
28
|
+
onError?: React.ReactEventHandler<HTMLImageElement>;
|
|
29
|
+
width?: number;
|
|
30
|
+
height?: number;
|
|
31
|
+
};
|
|
32
|
+
/** next/image 등 다양한 이미지 컴포넌트 주입 허용 */
|
|
33
|
+
export type ThumbnailImageComponent = React.ElementType;
|
|
34
|
+
export interface ThumbnailContextBase {
|
|
14
35
|
size?: ThumbnailSize;
|
|
15
36
|
aspectRatio?: string;
|
|
16
37
|
variant?: "square" | "circle";
|
|
17
38
|
objectFit?: "cover" | "contain";
|
|
18
39
|
isReload?: boolean;
|
|
40
|
+
showLoadingSkeleton?: boolean;
|
|
41
|
+
placeholderBackground?: string;
|
|
42
|
+
emptyImage?: ThumbnailPlaceholderConfig;
|
|
43
|
+
errorImage?: ThumbnailPlaceholderConfig;
|
|
19
44
|
onUpload?: (e: React.ChangeEvent<HTMLInputElement>) => void;
|
|
20
45
|
onEdit?: (e: React.ChangeEvent<HTMLInputElement>, index?: number) => void;
|
|
21
46
|
onRemove?: (index?: number) => void;
|
|
22
47
|
}
|
|
48
|
+
export interface ThumbnailContextType extends ThumbnailContextBase {
|
|
49
|
+
imageComponent?: ThumbnailImageComponent;
|
|
50
|
+
}
|
|
23
51
|
export declare const initialState: ThumbnailContextType;
|
|
24
52
|
export declare const ThumbnailContext: React.Context<ThumbnailContextType>;
|
|
25
|
-
export type ThumbnailProviderProps
|
|
53
|
+
export type ThumbnailProviderProps<ImageComponent extends React.ElementType = "img"> = ThumbnailContextBase & {
|
|
54
|
+
imageComponent?: ImageComponent;
|
|
26
55
|
className?: string;
|
|
27
|
-
|
|
56
|
+
children?: React.ReactNode;
|
|
57
|
+
};
|
|
58
|
+
export type ThumbnailImageProps<ImageComponent extends React.ElementType = "img"> = {
|
|
59
|
+
index?: number;
|
|
60
|
+
children?: React.ReactNode;
|
|
61
|
+
} & ThumbnailManagedImageProps & Omit<React.ComponentPropsWithoutRef<ImageComponent>, keyof ThumbnailManagedImageProps | "children">;
|
|
62
|
+
export declare const mergeThumbnailIconProps: (defaults: StrictIconProps, overrides?: Partial<StrictIconProps>) => StrictIconProps;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { default as React } from 'react';
|
|
2
|
-
import { THUMBNAIL_SIZES, ThumbnailProviderProps } from './Thumbnail.context';
|
|
2
|
+
import { THUMBNAIL_SIZES, ThumbnailImageComponent, ThumbnailImageProps, ThumbnailProviderProps } from './Thumbnail.context';
|
|
3
3
|
import { Icon } from '../Icon/Icon';
|
|
4
4
|
type RemoveButtonProps = {
|
|
5
5
|
index?: number;
|
|
@@ -13,18 +13,14 @@ type EditButtonProps = {
|
|
|
13
13
|
} & React.JSX.IntrinsicElements["div"];
|
|
14
14
|
declare const EditButton: (props: EditButtonProps) => import("react/jsx-runtime").JSX.Element;
|
|
15
15
|
type EmptyImageProps = {
|
|
16
|
-
|
|
17
|
-
iconSize?: number;
|
|
16
|
+
icon?: Partial<React.ComponentProps<typeof Icon>>;
|
|
18
17
|
} & React.JSX.IntrinsicElements["div"];
|
|
19
18
|
declare const EmptyImage: (props: EmptyImageProps) => import("react/jsx-runtime").JSX.Element;
|
|
20
19
|
type UploadProps = React.PropsWithChildren<React.JSX.IntrinsicElements["input"]>;
|
|
21
20
|
declare const Upload: (props: UploadProps) => import("react/jsx-runtime").JSX.Element;
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
declare const ImageComponent: (props: ImageProps) => import("react/jsx-runtime").JSX.Element;
|
|
26
|
-
type ThumbnailRootProps = ThumbnailProviderProps & React.JSX.IntrinsicElements["div"];
|
|
27
|
-
declare const Root: (props: ThumbnailRootProps) => import("react/jsx-runtime").JSX.Element;
|
|
21
|
+
declare const ImageComponent: <ImageElement extends React.ElementType = "img">(props: ThumbnailImageProps<ImageElement>) => import("react/jsx-runtime").JSX.Element;
|
|
22
|
+
type ThumbnailRootProps<ImageComponent extends ThumbnailImageComponent = "img"> = ThumbnailProviderProps<ImageComponent> & React.JSX.IntrinsicElements["div"];
|
|
23
|
+
declare const Root: <ImageComponent extends ThumbnailImageComponent = "img">(props: ThumbnailRootProps<ImageComponent>) => import("react/jsx-runtime").JSX.Element;
|
|
28
24
|
type IThumbnail = {
|
|
29
25
|
Root: typeof Root;
|
|
30
26
|
Image: typeof ImageComponent;
|
|
@@ -36,4 +32,5 @@ type IThumbnail = {
|
|
|
36
32
|
};
|
|
37
33
|
declare const Thumbnail: IThumbnail;
|
|
38
34
|
export type { ThumbnailRootProps };
|
|
35
|
+
export type { ThumbnailImageProps, ThumbnailManagedImageProps, ThumbnailPlaceholderConfig, ThumbnailProviderProps, } from './Thumbnail.context';
|
|
39
36
|
export default Thumbnail;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { ThumbnailImageComponent, ThumbnailSize } from './Thumbnail.context';
|
|
2
|
+
export declare const isValidThumbnailSrc: (src: string | undefined) => src is string;
|
|
3
|
+
export declare const parseAspectRatio: (aspectRatio: string) => number;
|
|
4
|
+
export declare const getThumbnailPixelWidth: (size: ThumbnailSize | undefined) => number;
|
|
5
|
+
export declare const getThumbnailDimensions: (size: ThumbnailSize | undefined, aspectRatio: string | undefined) => {
|
|
6
|
+
width: number;
|
|
7
|
+
height: number;
|
|
8
|
+
};
|
|
9
|
+
export declare const isNativeThumbnailImage: (component: ThumbnailImageComponent | undefined) => component is undefined | "img";
|
|
10
|
+
export declare const syncNativeImageLoadState: (img: HTMLImageElement | null, callbacks: {
|
|
11
|
+
onLoaded: () => void;
|
|
12
|
+
onFailed: () => void;
|
|
13
|
+
}) => void;
|
package/dist/display.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer{._Group_e8604_2{display:flex}._GroupItem_e8604_5{margin-inline:-4px}._Item_e8604_8{--bg-color: white;--size: 40px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;overflow:hidden;-webkit-user-select:none;user-select:none;border:2px solid var(--backgroundDefault, #fff);background-color:var(--bgColor);width:var(--size);height:var(--size)}._Item_e8604_8._rounded_e8604_22{border-radius:10px}._Item_e8604_8._circle_e8604_25{border-radius:50%}._Text_e8604_28{width:inherit;height:inherit;font-size:100%;display:flex;align-items:center;justify-content:center;white-space:nowrap}._AvatarImage_e8604_37{width:inherit;height:inherit;object-fit:cover}}@layer Badge{._Wrap_r1qra_2{box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:6px;position:relative;min-width:36px;min-height:fit-content}._Wrap_r1qra_2._square_r1qra_13{background-color:#688dee}._Wrap_r1qra_2._circle_r1qra_16{background-color:#688dee;border-radius:50%}._Badge_r1qra_20{position:absolute;top:0;right:0;box-sizing:border-box;padding:4px 6px;border-radius:50px;font-size:14px;color:#fff;transform:translate(50%,-25%);height:fit-content}._Badge_r1qra_20._dot_r1qra_32{width:12px;height:12px;border-radius:50%;padding:unset}._Badge_r1qra_20._hidden_r1qra_38{display:none}._Standalone_r1qra_41{position:relative;transform:unset}}@layer Chips{._ChipsWrapper_5cgrc_2{padding:0 12px;display:flex;flex-direction:row;align-items:center;gap:4px;background-color:var(--default-background-color, #edeff2);color:var(--default-tint-color, #000000);border:1px solid var(--default-border-color, #d9d9d9);max-width:100%}._ChipsWrapper_5cgrc_2._large_5cgrc_13{height:48px;font-weight:500;font-size:16px;line-height:26px}[data-typography=senior] ._ChipsWrapper_5cgrc_2._large_5cgrc_13{font-size:18px}[data-typography=mobile] ._ChipsWrapper_5cgrc_2._large_5cgrc_13{font-size:12px}[data-typography=senior] ._ChipsWrapper_5cgrc_2._large_5cgrc_13{line-height:30px}[data-typography=mobile] ._ChipsWrapper_5cgrc_2._large_5cgrc_13{line-height:26px}._ChipsWrapper_5cgrc_2._medium_5cgrc_31{height:40px;font-weight:500;font-size:14px;line-height:24px}[data-typography=senior] ._ChipsWrapper_5cgrc_2._medium_5cgrc_31{font-size:16px}[data-typography=mobile] ._ChipsWrapper_5cgrc_2._medium_5cgrc_31{font-size:10px}[data-typography=senior] ._ChipsWrapper_5cgrc_2._medium_5cgrc_31{line-height:26px}[data-typography=mobile] ._ChipsWrapper_5cgrc_2._medium_5cgrc_31{line-height:24px}._ChipsWrapper_5cgrc_2._small_5cgrc_49{height:32px;font-weight:500;font-size:14px;line-height:24px}[data-typography=senior] ._ChipsWrapper_5cgrc_2._small_5cgrc_49{font-size:16px}[data-typography=mobile] ._ChipsWrapper_5cgrc_2._small_5cgrc_49{font-size:10px}[data-typography=senior] ._ChipsWrapper_5cgrc_2._small_5cgrc_49{line-height:26px}[data-typography=mobile] ._ChipsWrapper_5cgrc_2._small_5cgrc_49{line-height:24px}._ChipsWrapper_5cgrc_2._outlined_5cgrc_67{border-radius:16px}._ChipsWrapper_5cgrc_2._round_5cgrc_70{border-radius:22px}._ChipsWrapper_5cgrc_2._round_5cgrc_70._small_5cgrc_49{border-radius:16px}._ChipsWrapper_5cgrc_2._square_5cgrc_76{border-radius:8px}._ChipsWrapper_5cgrc_2._square_5cgrc_76._small_5cgrc_49{border-radius:4px}._ChipsText_5cgrc_82{line-clamp:2;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;width:100%}}._CommentWrapper_9wn1d_1{padding:8px;background:var(--Gray-Gray99, #f6f8fb);border-radius:4px;display:flex;flex-direction:row;align-items:flex-start;gap:8px}._CommentWrapper_9wn1d_1 ._Caption_9wn1d_10{vertical-align:top;font-weight:400;font-size:10px;line-height:14px}[data-typography=senior] ._CommentWrapper_9wn1d_1 ._Caption_9wn1d_10{font-size:12px}[data-typography=mobile] ._CommentWrapper_9wn1d_1 ._Caption_9wn1d_10{font-size:6px}[data-typography=senior] ._CommentWrapper_9wn1d_1 ._Caption_9wn1d_10{line-height:12px}[data-typography=mobile] ._CommentWrapper_9wn1d_1 ._Caption_9wn1d_10{line-height:14px}@layer Label{._Label_1xhzp_2{display:inline-flex;align-items:center;justify-content:center;width:max-content;padding-inline:6px;border-radius:6px;gap:4px;background-color:var(--background-color, rgba(255, 171, 0, .1215686275));color:var(--color, #b76e00);border:1px solid var(--border-color, transparent)}._Label_1xhzp_2._cursor_1xhzp_14{cursor:pointer}._Label_1xhzp_2._medium_1xhzp_17{height:32px;font-weight:700;font-size:14px;line-height:24px}[data-typography=senior] ._Label_1xhzp_2._medium_1xhzp_17{font-size:18px}[data-typography=mobile] ._Label_1xhzp_2._medium_1xhzp_17{font-size:10px}[data-typography=senior] ._Label_1xhzp_2._medium_1xhzp_17{line-height:30px}[data-typography=mobile] ._Label_1xhzp_2._medium_1xhzp_17{line-height:24px}._Label_1xhzp_2._small_1xhzp_35{height:24px;font-weight:700;font-size:12px;line-height:18px}[data-typography=senior] ._Label_1xhzp_2._small_1xhzp_35{font-size:14px}[data-typography=mobile] ._Label_1xhzp_2._small_1xhzp_35{font-size:8px}[data-typography=senior] ._Label_1xhzp_2._small_1xhzp_35{line-height:24px}[data-typography=mobile] ._Label_1xhzp_2._small_1xhzp_35{line-height:18px}._Label_1xhzp_2._xSmall_1xhzp_53{height:16px;font-weight:700;font-size:10px;line-height:14px}[data-typography=senior] ._Label_1xhzp_2._xSmall_1xhzp_53{font-size:12px}[data-typography=mobile] ._Label_1xhzp_2._xSmall_1xhzp_53{font-size:6px}[data-typography=senior] ._Label_1xhzp_2._xSmall_1xhzp_53{line-height:12px}[data-typography=mobile] ._Label_1xhzp_2._xSmall_1xhzp_53{line-height:14px}}._LazyImage_b5s08_1{background-repeat:no-repeat;background-size:50% 50%;background-color:#222;background-position:center center}@layer Thumbnail{.
|
|
1
|
+
@layer{._Group_e8604_2{display:flex}._GroupItem_e8604_5{margin-inline:-4px}._Item_e8604_8{--bg-color: white;--size: 40px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;overflow:hidden;-webkit-user-select:none;user-select:none;border:2px solid var(--backgroundDefault, #fff);background-color:var(--bgColor);width:var(--size);height:var(--size)}._Item_e8604_8._rounded_e8604_22{border-radius:10px}._Item_e8604_8._circle_e8604_25{border-radius:50%}._Text_e8604_28{width:inherit;height:inherit;font-size:100%;display:flex;align-items:center;justify-content:center;white-space:nowrap}._AvatarImage_e8604_37{width:inherit;height:inherit;object-fit:cover}}@layer Badge{._Wrap_r1qra_2{box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:6px;position:relative;min-width:36px;min-height:fit-content}._Wrap_r1qra_2._square_r1qra_13{background-color:#688dee}._Wrap_r1qra_2._circle_r1qra_16{background-color:#688dee;border-radius:50%}._Badge_r1qra_20{position:absolute;top:0;right:0;box-sizing:border-box;padding:4px 6px;border-radius:50px;font-size:14px;color:#fff;transform:translate(50%,-25%);height:fit-content}._Badge_r1qra_20._dot_r1qra_32{width:12px;height:12px;border-radius:50%;padding:unset}._Badge_r1qra_20._hidden_r1qra_38{display:none}._Standalone_r1qra_41{position:relative;transform:unset}}@layer Chips{._ChipsWrapper_5cgrc_2{padding:0 12px;display:flex;flex-direction:row;align-items:center;gap:4px;background-color:var(--default-background-color, #edeff2);color:var(--default-tint-color, #000000);border:1px solid var(--default-border-color, #d9d9d9);max-width:100%}._ChipsWrapper_5cgrc_2._large_5cgrc_13{height:48px;font-weight:500;font-size:16px;line-height:26px}[data-typography=senior] ._ChipsWrapper_5cgrc_2._large_5cgrc_13{font-size:18px}[data-typography=mobile] ._ChipsWrapper_5cgrc_2._large_5cgrc_13{font-size:12px}[data-typography=senior] ._ChipsWrapper_5cgrc_2._large_5cgrc_13{line-height:30px}[data-typography=mobile] ._ChipsWrapper_5cgrc_2._large_5cgrc_13{line-height:26px}._ChipsWrapper_5cgrc_2._medium_5cgrc_31{height:40px;font-weight:500;font-size:14px;line-height:24px}[data-typography=senior] ._ChipsWrapper_5cgrc_2._medium_5cgrc_31{font-size:16px}[data-typography=mobile] ._ChipsWrapper_5cgrc_2._medium_5cgrc_31{font-size:10px}[data-typography=senior] ._ChipsWrapper_5cgrc_2._medium_5cgrc_31{line-height:26px}[data-typography=mobile] ._ChipsWrapper_5cgrc_2._medium_5cgrc_31{line-height:24px}._ChipsWrapper_5cgrc_2._small_5cgrc_49{height:32px;font-weight:500;font-size:14px;line-height:24px}[data-typography=senior] ._ChipsWrapper_5cgrc_2._small_5cgrc_49{font-size:16px}[data-typography=mobile] ._ChipsWrapper_5cgrc_2._small_5cgrc_49{font-size:10px}[data-typography=senior] ._ChipsWrapper_5cgrc_2._small_5cgrc_49{line-height:26px}[data-typography=mobile] ._ChipsWrapper_5cgrc_2._small_5cgrc_49{line-height:24px}._ChipsWrapper_5cgrc_2._outlined_5cgrc_67{border-radius:16px}._ChipsWrapper_5cgrc_2._round_5cgrc_70{border-radius:22px}._ChipsWrapper_5cgrc_2._round_5cgrc_70._small_5cgrc_49{border-radius:16px}._ChipsWrapper_5cgrc_2._square_5cgrc_76{border-radius:8px}._ChipsWrapper_5cgrc_2._square_5cgrc_76._small_5cgrc_49{border-radius:4px}._ChipsText_5cgrc_82{line-clamp:2;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;width:100%}}._CommentWrapper_9wn1d_1{padding:8px;background:var(--Gray-Gray99, #f6f8fb);border-radius:4px;display:flex;flex-direction:row;align-items:flex-start;gap:8px}._CommentWrapper_9wn1d_1 ._Caption_9wn1d_10{vertical-align:top;font-weight:400;font-size:10px;line-height:14px}[data-typography=senior] ._CommentWrapper_9wn1d_1 ._Caption_9wn1d_10{font-size:12px}[data-typography=mobile] ._CommentWrapper_9wn1d_1 ._Caption_9wn1d_10{font-size:6px}[data-typography=senior] ._CommentWrapper_9wn1d_1 ._Caption_9wn1d_10{line-height:12px}[data-typography=mobile] ._CommentWrapper_9wn1d_1 ._Caption_9wn1d_10{line-height:14px}@layer Label{._Label_1xhzp_2{display:inline-flex;align-items:center;justify-content:center;width:max-content;padding-inline:6px;border-radius:6px;gap:4px;background-color:var(--background-color, rgba(255, 171, 0, .1215686275));color:var(--color, #b76e00);border:1px solid var(--border-color, transparent)}._Label_1xhzp_2._cursor_1xhzp_14{cursor:pointer}._Label_1xhzp_2._medium_1xhzp_17{height:32px;font-weight:700;font-size:14px;line-height:24px}[data-typography=senior] ._Label_1xhzp_2._medium_1xhzp_17{font-size:18px}[data-typography=mobile] ._Label_1xhzp_2._medium_1xhzp_17{font-size:10px}[data-typography=senior] ._Label_1xhzp_2._medium_1xhzp_17{line-height:30px}[data-typography=mobile] ._Label_1xhzp_2._medium_1xhzp_17{line-height:24px}._Label_1xhzp_2._small_1xhzp_35{height:24px;font-weight:700;font-size:12px;line-height:18px}[data-typography=senior] ._Label_1xhzp_2._small_1xhzp_35{font-size:14px}[data-typography=mobile] ._Label_1xhzp_2._small_1xhzp_35{font-size:8px}[data-typography=senior] ._Label_1xhzp_2._small_1xhzp_35{line-height:24px}[data-typography=mobile] ._Label_1xhzp_2._small_1xhzp_35{line-height:18px}._Label_1xhzp_2._xSmall_1xhzp_53{height:16px;font-weight:700;font-size:10px;line-height:14px}[data-typography=senior] ._Label_1xhzp_2._xSmall_1xhzp_53{font-size:12px}[data-typography=mobile] ._Label_1xhzp_2._xSmall_1xhzp_53{font-size:6px}[data-typography=senior] ._Label_1xhzp_2._xSmall_1xhzp_53{line-height:12px}[data-typography=mobile] ._Label_1xhzp_2._xSmall_1xhzp_53{line-height:14px}}._LazyImage_b5s08_1{background-repeat:no-repeat;background-size:50% 50%;background-color:#222;background-position:center center}@layer Thumbnail{._Wrapper_1n0fd_2{display:flex;align-items:center;justify-content:flex-start;height:auto;position:relative;gap:8px;-webkit-user-select:none;user-select:none}._ImageWrapper_1n0fd_11{position:relative;display:inline-block;line-height:0}._LoadingSkeleton_1n0fd_16{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;aspect-ratio:var(--aspectRatio);pointer-events:none;animation:_skeleton-loading_1n0fd_1 1s infinite alternate}._LoadingSkeleton_1n0fd_16._square_1n0fd_24{border-radius:8px}._LoadingSkeleton_1n0fd_16._circle_1n0fd_27{border-radius:50%}._Image_1n0fd_11{aspect-ratio:var(--aspectRatio);background-color:#fff;position:relative;display:block;opacity:0;transition:opacity .15s ease}._Image_1n0fd_11._isLoaded_1n0fd_38{opacity:1}._Image_1n0fd_11._square_1n0fd_24{border-radius:8px}._Image_1n0fd_11._circle_1n0fd_27{border-radius:50%}._Image_1n0fd_11._cover_1n0fd_47{object-fit:cover}._Image_1n0fd_11._contain_1n0fd_50{object-fit:contain}._UploadInput_1n0fd_53{display:none}._EmptyImage_1n0fd_56{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;flex-shrink:0;aspect-ratio:var(--aspectRatio);background-color:var(--thumbnailPlaceholderBg, var(--greyGrey3, #f4f6f8));cursor:pointer}._EmptyImage_1n0fd_56._square_1n0fd_24{border-radius:8px}._EmptyImage_1n0fd_56._circle_1n0fd_27{border-radius:50%}._EmptyImage_1n0fd_56 ._Text_1n0fd_73{color:var(--textTertiary, #919eab);font-weight:400;font-size:10px;line-height:14px}[data-typography=senior] ._EmptyImage_1n0fd_56 ._Text_1n0fd_73{font-size:12px}[data-typography=mobile] ._EmptyImage_1n0fd_56 ._Text_1n0fd_73{font-size:6px}[data-typography=senior] ._EmptyImage_1n0fd_56 ._Text_1n0fd_73{line-height:12px}[data-typography=mobile] ._EmptyImage_1n0fd_56 ._Text_1n0fd_73{line-height:14px}._ErrorImage_1n0fd_91{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;flex-shrink:0;aspect-ratio:var(--aspectRatio);background-color:var(--thumbnailPlaceholderBg, var(--greyGrey3, #f4f6f8));position:relative}._ErrorImage_1n0fd_91._square_1n0fd_24{border-radius:8px}._ErrorImage_1n0fd_91._circle_1n0fd_27{border-radius:50%}._EditButton_1n0fd_108{width:var(--exactSize);height:var(--exactSize);position:absolute;bottom:0;right:0;border-radius:50%;background-color:var(--greyGrey7, #637381);display:flex;align-items:center;justify-content:center;border:var(--borderWidth) solid #fff;cursor:pointer}._EditButton_1n0fd_108._square_1n0fd_24{transform:translate(var(--translate),var(--translate))}._EditButton_1n0fd_108._circle_1n0fd_27{transform:translate(4px)}._FileInput_1n0fd_128{display:none}._RemoveButton_1n0fd_131{width:var(--exactSize);height:var(--exactSize);position:absolute;top:0;right:0;display:flex;align-items:center;justify-content:center;cursor:pointer}._RemoveButton_1n0fd_131._square_1n0fd_24{border-radius:0 8px 0 0;background:var(--black32, rgba(0, 0, 0, .3215686275));box-shadow:var(--z8x, 0) var(--z8y, 8px) var(--z8blur, 16px) var(--z8spread, 0px) var(--shadow12, #919eab)}._RemoveButton_1n0fd_131._circle_1n0fd_27{border-radius:50%;background-color:var(--greyGrey7, #637381);border:var(--borderWidth) solid #fff;transform:translate(4px)}}@keyframes _skeleton-loading_1n0fd_1{0%{background-color:#dcdcdc99}to{background-color:#f4f6f899}}
|