@weing-dev/ui-kit-primitive 0.4.5 → 0.5.0

package/dist/components/Form/Dropdown/Dropdown.d.ts

@@ -1,54 +1,8 @@
 import { default as React } from 'react';
-import { DropdownProviderProps } from './Dropdown.context';
-import { Icon } from '../../../components/Icon/Icon';
-type AsProps = {
-    isEmpty: boolean;
-    placeholder?: string;
-    selectedValue: string;
-    open?: boolean;
-    options?: {
-        value: string;
-        label: string;
-    }[];
-    variant?: "outlined" | "contained" | "text";
-    size?: "small" | "medium" | "large";
-    colorStyle: React.CSSProperties;
-    iconColorStyle: (position: "left" | "right") => React.CSSProperties;
-    handleTriggerClick?: () => void;
-};
-type TriggerProps = React.PropsWithChildren<{
-    as?: (props: AsProps) => React.ReactNode;
-    className?: string;
-    variant?: "outlined" | "contained" | "text";
-    size?: "small" | "medium" | "large";
-    leftIcon?: React.ComponentProps<typeof Icon> | null;
-    rightIcon?: React.ComponentProps<typeof Icon> | null;
-}>;
+import { TriggerProps, MenuProps, ItemProps, RootProps } from './Dropdown.type';
 declare const Trigger: (props: TriggerProps) => string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | null | undefined;
-type MenuRenderProps = {
-    open: boolean;
-    id?: string;
-    variant?: "shadow" | "line";
-    size?: "small" | "medium";
-    handleTriggerClick?: () => void;
-};
-type MenuProps = {
-    className?: string;
-    variant?: "shadow" | "line";
-    size?: "small" | "medium";
-    children?: React.ReactNode | ((props: MenuRenderProps) => React.ReactNode);
-    boundaryPadding?: number;
-};
 declare const Menu: (props: MenuProps) => import("react/jsx-runtime").JSX.Element | null;
-type ItemProps = React.PropsWithChildren<{
-    className?: string;
-    value: string;
-    label?: string;
-    variant?: "shadow" | "line";
-    size?: "small" | "medium";
-}>;
 declare const Item: (props: ItemProps) => import("react/jsx-runtime").JSX.Element;
-type RootProps = DropdownProviderProps & Omit<React.HTMLProps<HTMLDivElement>, "onChange">;
 declare const Root: (props: RootProps) => import("react/jsx-runtime").JSX.Element;
 interface IDropdown {
     Trigger: typeof Trigger;

package/dist/components/Form/Dropdown/Dropdown.type.d.ts

@@ -0,0 +1,48 @@
+import { default as React } from 'react';
+import { DropdownProviderProps } from './Dropdown.context';
+import { Icon } from '../../../components/Icon/Icon';
+export type AsProps = {
+    isEmpty: boolean;
+    placeholder?: string;
+    selectedValue: string;
+    open?: boolean;
+    options?: {
+        value: string;
+        label: string;
+    }[];
+    variant?: "outlined" | "contained" | "text";
+    size?: "small" | "medium" | "large";
+    colorStyle: React.CSSProperties;
+    iconColorStyle: (position: "left" | "right") => React.CSSProperties;
+    handleTriggerClick?: () => void;
+};
+export type TriggerProps = React.PropsWithChildren<{
+    as?: (props: AsProps) => React.ReactNode;
+    className?: string;
+    variant?: "outlined" | "contained" | "text";
+    size?: "small" | "medium" | "large";
+    leftIcon?: React.ComponentProps<typeof Icon> | null;
+    rightIcon?: React.ComponentProps<typeof Icon> | null;
+}>;
+export type MenuRenderProps = {
+    open: boolean;
+    id?: string;
+    variant?: "shadow" | "line";
+    size?: "small" | "medium";
+    handleTriggerClick?: () => void;
+};
+export type MenuProps = {
+    className?: string;
+    variant?: "shadow" | "line";
+    size?: "small" | "medium";
+    children?: React.ReactNode | ((props: MenuRenderProps) => React.ReactNode);
+    boundaryPadding?: number;
+};
+export type ItemProps = React.PropsWithChildren<{
+    className?: string;
+    value: string;
+    label?: string;
+    variant?: "shadow" | "line";
+    size?: "small" | "medium";
+}>;
+export type RootProps = DropdownProviderProps & Omit<React.HTMLProps<HTMLDivElement>, "onChange">;

package/dist/components/Form/TextArea/TextArea.d.ts

@@ -1,28 +1,11 @@
 import { default as React } from 'react';
 import { default as HelperTextComponent } from '../../HelperText/HelperText';
 import { TextAreaProviderProps } from './TextArea.context';
-type TextCountProps = React.PropsWithChildren<{
-    className?: string;
-}>;
+import { TextCountProps, EraseProps, InputProps, LabelProps } from './TextArea.type';
 declare const TextCount: (props: TextCountProps) => import("react/jsx-runtime").JSX.Element;
-type EraseProps = React.PropsWithChildren<{
-    className?: string;
-}>;
 declare const Erase: (props: EraseProps) => import("react/jsx-runtime").JSX.Element;
 declare const HelperText: (props: React.ComponentProps<typeof HelperTextComponent>) => import("react/jsx-runtime").JSX.Element;
-type InputProps = React.PropsWithChildren<React.HTMLProps<HTMLTextAreaElement>> & {
-    wrapperClassName?: string;
-    placeholderColor?: string;
-    focusedColor?: string;
-    containedBackgroundColor?: string;
-    disabledColor?: string;
-    maxRows?: number;
-};
 declare const Input: (props: InputProps) => import("react/jsx-runtime").JSX.Element;
-type LabelProps = React.PropsWithChildren<{
-    className?: string;
-    focusedColor?: string;
-}>;
 declare const Label: (props: LabelProps) => import("react/jsx-runtime").JSX.Element;
 declare const Root: (props: TextAreaProviderProps) => import("react/jsx-runtime").JSX.Element;
 interface ITextArea {

package/dist/components/Form/TextArea/TextArea.type.d.ts

@@ -0,0 +1,19 @@
+import { default as React } from 'react';
+export type TextCountProps = React.PropsWithChildren<{
+    className?: string;
+}>;
+export type EraseProps = React.PropsWithChildren<{
+    className?: string;
+}>;
+export type InputProps = React.PropsWithChildren<React.HTMLProps<HTMLTextAreaElement>> & {
+    wrapperClassName?: string;
+    placeholderColor?: string;
+    focusedColor?: string;
+    containedBackgroundColor?: string;
+    disabledColor?: string;
+    maxRows?: number;
+};
+export type LabelProps = React.PropsWithChildren<{
+    className?: string;
+    focusedColor?: string;
+}>;

package/dist/components/Form/TextInput/TextInput.d.ts

@@ -1,26 +1,10 @@
 import { default as React } from 'react';
 import { default as HelperTextComponent } from '../../HelperText/HelperText';
 import { TextInputProviderProps } from './TextInput.context';
-type EraseProps = React.PropsWithChildren<{
-    className?: string;
-    color?: string;
-}>;
+import { EraseProps, InputProps, LabelProps } from './TextInput.type';
 declare const Erase: (props: EraseProps) => import("react/jsx-runtime").JSX.Element;
-type InputProps = React.PropsWithChildren<React.HTMLProps<HTMLInputElement>> & {
-    wrapperClassName?: string;
-    placeholderColor?: string;
-    focusedColor?: string;
-    containedBackgroundColor?: string;
-    disabledColor?: string;
-    leftIcon?: React.ReactNode;
-    rightIcon?: React.ReactNode;
-};
 declare const Input: (props: InputProps) => import("react/jsx-runtime").JSX.Element;
 declare const HelperText: (props: React.ComponentProps<typeof HelperTextComponent>) => import("react/jsx-runtime").JSX.Element;
-type LabelProps = React.PropsWithChildren<{
-    className?: string;
-    focusedColor?: string;
-}>;
 declare const Label: (props: LabelProps) => import("react/jsx-runtime").JSX.Element;
 declare const Root: (props: TextInputProviderProps) => import("react/jsx-runtime").JSX.Element;
 interface ITextInput {

package/dist/components/Form/TextInput/TextInput.type.d.ts

@@ -0,0 +1,18 @@
+import { default as React } from 'react';
+export type EraseProps = React.PropsWithChildren<{
+    className?: string;
+    color?: string;
+}>;
+export type InputProps = React.PropsWithChildren<React.HTMLProps<HTMLInputElement>> & {
+    wrapperClassName?: string;
+    placeholderColor?: string;
+    focusedColor?: string;
+    containedBackgroundColor?: string;
+    disabledColor?: string;
+    leftIcon?: React.ReactNode;
+    rightIcon?: React.ReactNode;
+};
+export type LabelProps = React.PropsWithChildren<{
+    className?: string;
+    focusedColor?: string;
+}>;

package/dist/components/Thumbnail/Thumbnail.context.d.ts

@@ -1,4 +1,5 @@
 import { default as React } from 'react';
+import { StrictIconProps } from '../Icon/Icon';
 export declare const THUMBNAIL_SIZES: {
     readonly xxs: 40;
     readonly xs: 48;
@@ -10,18 +11,52 @@ export declare const THUMBNAIL_SIZES: {
     readonly xxl: 192;
 };
 export type ThumbnailSize = keyof typeof THUMBNAIL_SIZES | number;
-export interface ThumbnailContextType {
+/** EmptyImage / ErrorImage 아이콘 기본 색상 */
+export declare const THUMBNAIL_PLACEHOLDER_ICON_COLOR = "var(--Text-Disabled, #C4CDD5)";
+/** RemoveButton / EditButton 아이콘 기본 색상 */
+export declare const THUMBNAIL_ACTION_ICON_COLOR = "#fff";
+export type ThumbnailPlaceholderConfig = {
+    icon?: Partial<StrictIconProps>;
+};
+/** Thumbnail이 Image(또는 imageComponent)에 주입하는 최소 props */
+export type ThumbnailManagedImageProps = {
+    src: string;
+    alt?: string;
+    className?: string;
+    style?: React.CSSProperties;
+    onLoad?: () => void;
+    onError?: React.ReactEventHandler<HTMLImageElement>;
+    width?: number;
+    height?: number;
+};
+/** next/image 등 다양한 이미지 컴포넌트 주입 허용 */
+export type ThumbnailImageComponent = React.ElementType;
+export interface ThumbnailContextBase {
     size?: ThumbnailSize;
     aspectRatio?: string;
     variant?: "square" | "circle";
     objectFit?: "cover" | "contain";
     isReload?: boolean;
+    showLoadingSkeleton?: boolean;
+    placeholderBackground?: string;
+    emptyImage?: ThumbnailPlaceholderConfig;
+    errorImage?: ThumbnailPlaceholderConfig;
     onUpload?: (e: React.ChangeEvent<HTMLInputElement>) => void;
     onEdit?: (e: React.ChangeEvent<HTMLInputElement>, index?: number) => void;
     onRemove?: (index?: number) => void;
 }
+export interface ThumbnailContextType extends ThumbnailContextBase {
+    imageComponent?: ThumbnailImageComponent;
+}
 export declare const initialState: ThumbnailContextType;
 export declare const ThumbnailContext: React.Context<ThumbnailContextType>;
-export type ThumbnailProviderProps = React.PropsWithChildren<ThumbnailContextType & {
+export type ThumbnailProviderProps<ImageComponent extends React.ElementType = "img"> = ThumbnailContextBase & {
+    imageComponent?: ImageComponent;
     className?: string;
-}>;
+    children?: React.ReactNode;
+};
+export type ThumbnailImageProps<ImageComponent extends React.ElementType = "img"> = {
+    index?: number;
+    children?: React.ReactNode;
+} & ThumbnailManagedImageProps & Omit<React.ComponentPropsWithoutRef<ImageComponent>, keyof ThumbnailManagedImageProps | "children">;
+export declare const mergeThumbnailIconProps: (defaults: StrictIconProps, overrides?: Partial<StrictIconProps>) => StrictIconProps;

package/dist/components/Thumbnail/Thumbnail.d.ts

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
-import { THUMBNAIL_SIZES, ThumbnailProviderProps } from './Thumbnail.context';
+import { THUMBNAIL_SIZES, ThumbnailImageComponent, ThumbnailImageProps, ThumbnailProviderProps } from './Thumbnail.context';
 import { Icon } from '../Icon/Icon';
 type RemoveButtonProps = {
     index?: number;
@@ -13,18 +13,14 @@ type EditButtonProps = {
 } & React.JSX.IntrinsicElements["div"];
 declare const EditButton: (props: EditButtonProps) => import("react/jsx-runtime").JSX.Element;
 type EmptyImageProps = {
-    iconName?: React.ComponentProps<typeof Icon>["name"];
-    iconSize?: number;
+    icon?: Partial<React.ComponentProps<typeof Icon>>;
 } & React.JSX.IntrinsicElements["div"];
 declare const EmptyImage: (props: EmptyImageProps) => import("react/jsx-runtime").JSX.Element;
 type UploadProps = React.PropsWithChildren<React.JSX.IntrinsicElements["input"]>;
 declare const Upload: (props: UploadProps) => import("react/jsx-runtime").JSX.Element;
-type ImageProps = React.PropsWithChildren<{
-    index?: number;
-} & React.JSX.IntrinsicElements["img"]>;
-declare const ImageComponent: (props: ImageProps) => import("react/jsx-runtime").JSX.Element;
-type ThumbnailRootProps = ThumbnailProviderProps & React.JSX.IntrinsicElements["div"];
-declare const Root: (props: ThumbnailRootProps) => import("react/jsx-runtime").JSX.Element;
+declare const ImageComponent: <ImageElement extends React.ElementType = "img">(props: ThumbnailImageProps<ImageElement>) => import("react/jsx-runtime").JSX.Element;
+type ThumbnailRootProps<ImageComponent extends ThumbnailImageComponent = "img"> = ThumbnailProviderProps<ImageComponent> & React.JSX.IntrinsicElements["div"];
+declare const Root: <ImageComponent extends ThumbnailImageComponent = "img">(props: ThumbnailRootProps<ImageComponent>) => import("react/jsx-runtime").JSX.Element;
 type IThumbnail = {
     Root: typeof Root;
     Image: typeof ImageComponent;
@@ -36,4 +32,5 @@ type IThumbnail = {
 };
 declare const Thumbnail: IThumbnail;
 export type { ThumbnailRootProps };
+export type { ThumbnailImageProps, ThumbnailManagedImageProps, ThumbnailPlaceholderConfig, ThumbnailProviderProps, } from './Thumbnail.context';
 export default Thumbnail;

package/dist/components/Thumbnail/thumbnailImage.util.d.ts

@@ -0,0 +1,13 @@
+import { ThumbnailImageComponent, ThumbnailSize } from './Thumbnail.context';
+export declare const isValidThumbnailSrc: (src: string | undefined) => src is string;
+export declare const parseAspectRatio: (aspectRatio: string) => number;
+export declare const getThumbnailPixelWidth: (size: ThumbnailSize | undefined) => number;
+export declare const getThumbnailDimensions: (size: ThumbnailSize | undefined, aspectRatio: string | undefined) => {
+    width: number;
+    height: number;
+};
+export declare const isNativeThumbnailImage: (component: ThumbnailImageComponent | undefined) => component is undefined | "img";
+export declare const syncNativeImageLoadState: (img: HTMLImageElement | null, callbacks: {
+    onLoaded: () => void;
+    onFailed: () => void;
+}) => void;

package/dist/components/TimeInput/TimeInput.d.ts

@@ -1,37 +1,11 @@
-import { default as React } from 'react';
-import { TimeInputContextType } from './TimeInput.context';
-type InputProps = {
-    index: number;
-    placeholder: string;
-} & React.JSX.IntrinsicElements["input"];
+import { InputProps, TimeRangeProps, ColonProps, SeparatorProps, HelperTextProps, InputWrapperProps, LabelProps, RootProps } from './TimeInput.type';
 declare const Input: (props: InputProps) => import("react/jsx-runtime").JSX.Element;
-type TimeRangeProps = React.PropsWithChildren<React.JSX.IntrinsicElements["div"]>;
 declare const TimeRange: (props: TimeRangeProps) => import("react/jsx-runtime").JSX.Element;
-type ColonProps = React.JSX.IntrinsicElements["span"];
 declare const Colon: (props: ColonProps) => import("react/jsx-runtime").JSX.Element;
-type SeparatorProps = React.JSX.IntrinsicElements["span"];
 declare const Separator: (props: SeparatorProps) => import("react/jsx-runtime").JSX.Element;
-type HelperTextProps = React.PropsWithChildren<{
-    className?: string;
-    warningColor?: string;
-    errorColor?: string;
-    successColor?: string;
-    defaultColor?: string;
-    infoColor?: string;
-    size?: number;
-    iconVisible?: boolean;
-}>;
 declare const HelperText: (props: HelperTextProps) => import("react/jsx-runtime").JSX.Element | null;
-type InputWrapperProps = React.PropsWithChildren<React.JSX.IntrinsicElements["div"]>;
 declare const InputWrapper: (props: InputWrapperProps) => import("react/jsx-runtime").JSX.Element;
-type LabelProps = React.PropsWithChildren<{
-    className?: string;
-    focusedColor?: string;
-}>;
 declare const Label: (props: LabelProps) => import("react/jsx-runtime").JSX.Element;
-type RootProps = React.PropsWithChildren<Omit<TimeInputContextType, "inputRefs" | "handleChange" | "handleBlur" | "handleKeyDown"> & {
-    className?: string;
-}>;
 declare const Root: (props: RootProps) => import("react/jsx-runtime").JSX.Element;
 interface ITimeInput {
     Root: typeof Root;

package/dist/components/TimeInput/TimeInput.type.d.ts

@@ -0,0 +1,27 @@
+import { default as React } from 'react';
+import { TimeInputContextType } from './TimeInput.context';
+export type InputProps = {
+    index: number;
+    placeholder: string;
+} & React.JSX.IntrinsicElements["input"];
+export type TimeRangeProps = React.PropsWithChildren<React.JSX.IntrinsicElements["div"]>;
+export type ColonProps = React.JSX.IntrinsicElements["span"];
+export type SeparatorProps = React.JSX.IntrinsicElements["span"];
+export type HelperTextProps = React.PropsWithChildren<{
+    className?: string;
+    warningColor?: string;
+    errorColor?: string;
+    successColor?: string;
+    defaultColor?: string;
+    infoColor?: string;
+    size?: number;
+    iconVisible?: boolean;
+}>;
+export type InputWrapperProps = React.PropsWithChildren<React.JSX.IntrinsicElements["div"]>;
+export type LabelProps = React.PropsWithChildren<{
+    className?: string;
+    focusedColor?: string;
+}>;
+export type RootProps = React.PropsWithChildren<Omit<TimeInputContextType, "inputRefs" | "handleChange" | "handleBlur" | "handleKeyDown"> & {
+    className?: string;
+}>;

package/dist/display.css

@@ -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{._Wrapper_1ayjm_2{display:flex;align-items:center;justify-content:flex-start;height:auto;position:relative;gap:8px;-webkit-user-select:none;user-select:none}._ImageWrapper_1ayjm_11{position:relative}._Image_1ayjm_11{aspect-ratio:var(--aspectRatio);background-color:#fff;position:relative;display:block}._Image_1ayjm_11._isLoading_1ayjm_20{animation:_skeleton-loading_1ayjm_1 1s infinite alternate}._Image_1ayjm_11._square_1ayjm_23{border-radius:8px}._Image_1ayjm_11._circle_1ayjm_26{border-radius:50%}._Image_1ayjm_11._cover_1ayjm_29{object-fit:cover}._Image_1ayjm_11._contain_1ayjm_32{object-fit:contain}._UploadInput_1ayjm_35{display:none}._EmptyImage_1ayjm_38{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;flex-shrink:0;aspect-ratio:var(--aspectRatio);background-color:var(--greyGrey3, #f4f6f8);cursor:pointer}._EmptyImage_1ayjm_38._square_1ayjm_23{border-radius:8px}._EmptyImage_1ayjm_38._circle_1ayjm_26{border-radius:50%}._EmptyImage_1ayjm_38 ._Text_1ayjm_55{color:var(--textTertiary, #919eab);font-weight:400;font-size:10px;line-height:14px}[data-typography=senior] ._EmptyImage_1ayjm_38 ._Text_1ayjm_55{font-size:12px}[data-typography=mobile] ._EmptyImage_1ayjm_38 ._Text_1ayjm_55{font-size:6px}[data-typography=senior] ._EmptyImage_1ayjm_38 ._Text_1ayjm_55{line-height:12px}[data-typography=mobile] ._EmptyImage_1ayjm_38 ._Text_1ayjm_55{line-height:14px}._ErrorImage_1ayjm_73{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;flex-shrink:0;aspect-ratio:var(--aspectRatio);background-color:var(--greyGrey3, #f4f6f8);position:relative}._ErrorImage_1ayjm_73._square_1ayjm_23{border-radius:8px}._ErrorImage_1ayjm_73._circle_1ayjm_26{border-radius:50%}._EditButton_1ayjm_90{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_1ayjm_90._square_1ayjm_23{transform:translate(var(--translate),var(--translate))}._EditButton_1ayjm_90._circle_1ayjm_26{transform:translate(4px)}._FileInput_1ayjm_110{display:none}._RemoveButton_1ayjm_113{width:var(--exactSize);height:var(--exactSize);position:absolute;top:0;right:0;display:flex;align-items:center;justify-content:center;cursor:pointer}._RemoveButton_1ayjm_113._square_1ayjm_23{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_1ayjm_113._circle_1ayjm_26{border-radius:50%;background-color:var(--greyGrey7, #637381);border:var(--borderWidth) solid #fff;transform:translate(4px)}}@keyframes _skeleton-loading_1ayjm_1{0%{background-color:#dcdcdc99}to{background-color:#f4f6f899}}
+@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}}