@euler-edu/react 0.0.0-stage → 7.0.1-beta1

package/lib/components/molecules/trays/CalloutTray.js

@@ -0,0 +1,36 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = require("styled-components");
+const styles_1 = require("../../../utils/styles");
+const atoms_1 = require("../../../components/atoms");
+const molecules_1 = require("../../../components/molecules");
+const paletteByType = {
+    plain: 'body',
+    info: 'body-info',
+    success: 'body-success',
+    warning: 'body-warning',
+    error: 'body-error',
+};
+const iconByType = {
+    info: 'hero/information-circle-outline',
+    success: 'hero/check-circle-outline',
+    warning: 'hero/exclamation-triangle-outline',
+    error: 'hero/x-circle-outline',
+};
+exports.default = react_1.default.memo(({ type = 'plain', icon = type in iconByType
+    ? iconByType[type]
+    : undefined, title, description, palette = paletteByType[type], isLoading = false, children, $css, ...props }) => {
+    var _a, _b, _c, _d, _e;
+    return ((0, jsx_runtime_1.jsxs)(atoms_1.Container, { "$padding": styles_1.theme.size.margin.base.large, "$background": (_a = styles_1.theme.color.palettes[palette]) === null || _a === void 0 ? void 0 : _a['background-selected'], "$border": `1px solid ${(_b = styles_1.theme.color.palettes[palette]) === null || _b === void 0 ? void 0 : _b['border-primary']}`, "$borderRadius": styles_1.theme.size.borderRadius.medium, "$transition": "background, border", "$css": [
+            styles_1.theme.effect.adaptiveStyle((0, styled_components_1.css) `
+              padding: ${styles_1.theme.size.margin.base.medium}px;
+            `, [undefined, styles_1.theme.size.width.adaptives.tablet]),
+            $css,
+        ], "$overflow": true, ...props, children: [!isLoading && (!!icon || !!title || !!description) && ((0, jsx_runtime_1.jsxs)(atoms_1.Container, { "$display": "flex", "$alignItems": "flex-start", "$gap": styles_1.theme.size.margin.base.small, children: [!!icon && ((0, jsx_runtime_1.jsx)(atoms_1.Icon, { type: icon, "$autoFill": (_c = styles_1.theme.color.palettes[palette]) === null || _c === void 0 ? void 0 : _c['content-highlight'], "$size": styles_1.theme.size.height.base.small, "$flexShrink": 0 })), (0, jsx_runtime_1.jsxs)(atoms_1.Container, { "$display": "flex", "$flexDirection": "column", "$gap": styles_1.theme.size.margin.base.x_small, "$width": 0, "$flexGrow": true, children: [!!title && ((0, jsx_runtime_1.jsx)(atoms_1.Text, { type: "medium-bold", value: title, "$color": (_d = styles_1.theme.color.palettes[palette]) === null || _d === void 0 ? void 0 : _d['content-highlight'] })), !!description && ((0, jsx_runtime_1.jsx)(atoms_1.Text, { type: "medium", value: description, "$color": (_e = styles_1.theme.color.palettes[palette]) === null || _e === void 0 ? void 0 : _e['content-secondary'] }))] })] })), !!isLoading && ((0, jsx_runtime_1.jsx)(molecules_1.Empty, { type: "loading", "$paddingVertical": styles_1.theme.size.margin.base.medium })), children] }));
+});
+//# sourceMappingURL=CalloutTray.js.map

package/lib/components/molecules/trays/CalloutTray.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CalloutTray.js","sourceRoot":"","sources":["../../../../src/components/molecules/trays/CalloutTray.tsx"],"names":[],"mappings":"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"}

package/lib/components/molecules/trays/CodeTray.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import type { Palette } from '../../../constants/styles/color';
+import { Container } from '../../../components/atoms';
+import { CodeEditor } from '../../../components/atoms/only_csr';
+import { Text } from '../../../components/atoms/texts';
+import { Dropdown } from '../../../components/molecules';
+type Props = {
+    title?: React.ComponentProps<typeof Text>['value'];
+    language?: React.ComponentProps<typeof CodeEditor>['language'];
+    isReadOnly?: React.ComponentProps<typeof CodeEditor>['isReadOnly'];
+    initValue?: React.ComponentProps<typeof CodeEditor>['initValue'];
+    onChangeValue?: React.ComponentProps<typeof CodeEditor>['onChangeValue'];
+    dropdownSections?: React.ComponentProps<typeof Dropdown>['sections'];
+    palette?: Palette;
+} & React.ComponentProps<typeof Container>;
+declare const _default: React.MemoExoticComponent<({ title, language, isReadOnly, initValue, onChangeValue, dropdownSections, palette, ...props }: Props) => import("react/jsx-runtime").JSX.Element>;
+export default _default;

package/lib/components/molecules/trays/CodeTray.js

@@ -0,0 +1,20 @@
+'use client';
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const styles_1 = require("../../../utils/styles");
+const dropdown_1 = require("../../../hooks/stores/dropdown");
+const atoms_1 = require("../../../components/atoms");
+const only_csr_1 = require("../../../components/atoms/only_csr");
+const texts_1 = require("../../../components/atoms/texts");
+const molecules_1 = require("../../../components/molecules");
+exports.default = react_1.default.memo(({ title, language, isReadOnly, initValue, onChangeValue, dropdownSections, palette = 'body', ...props }) => {
+    const moreButtonRef = react_1.default.useRef(null);
+    (0, dropdown_1.useDropdownEffect)(moreButtonRef, (0, jsx_runtime_1.jsx)(molecules_1.Dropdown, { sections: dropdownSections }), 'bottom-end', {}, [dropdownSections]);
+    return ((0, jsx_runtime_1.jsxs)(atoms_1.Container, { "$background": styles_1.theme.color.palettes[palette]['background-selected'], "$borderRadius": styles_1.theme.size.borderRadius.medium, "$border": `1px solid ${styles_1.theme.color.palettes[palette]['border-primary']}`, "$transition": "background, border", "$overflow": true, ...props, children: [(0, jsx_runtime_1.jsxs)(atoms_1.Container, { "$display": "flex", "$alignItems": "center", "$height": styles_1.theme.size.height.tray_header, "$background": styles_1.theme.color.palettes[palette]['background-primary'], "$borderBottom": `1px solid ${styles_1.theme.color.palettes[palette]['border-primary']}`, "$paddingHorizontal": styles_1.theme.size.margin.base.medium, "$gap": styles_1.theme.size.margin.base.x_small, "$transition": "background, border", "$overflow": true, children: [(0, jsx_runtime_1.jsx)(texts_1.Text, { value: title, "$width": 0, "$flexGrow": true, "$ellipsis": true }), !!dropdownSections && ((0, jsx_runtime_1.jsx)(atoms_1.TextButton, { ref: moreButtonRef, size: "medium", icon: "hero/ellipsis-horizontal-outline", palette: "button-ghost-borderless" }))] }), (0, jsx_runtime_1.jsx)(only_csr_1.CodeEditor, { language: language, isReadOnly: isReadOnly, initValue: initValue, onChangeValue: onChangeValue, "$width": "100%" })] }));
+});
+//# sourceMappingURL=CodeTray.js.map

package/lib/components/molecules/trays/CodeTray.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodeTray.js","sourceRoot":"","sources":["../../../../src/components/molecules/trays/CodeTray.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;AAEb,kDAA0B;AAI1B,2CAAuC;AAEvC,sDAA4D;AAE5D,8CAA2D;AAC3D,0DAAyD;AACzD,oDAAgD;AAChD,sDAAkD;AAYlD,kBAAe,eAAK,CAAC,IAAI,CACvB,CAAC,EACC,KAAK,EACL,QAAQ,EACR,UAAU,EACV,SAAS,EACT,aAAa,EACb,gBAAgB,EAChB,OAAO,GAAG,MAAM,EAChB,GAAG,KAAK,EACF,EAAE,EAAE;IACV,MAAM,aAAa,GAAG,eAAK,CAAC,MAAM,CAAoB,IAAI,CAAC,CAAC;IAC5D,IAAA,4BAAiB,EACf,aAAa,EACb,uBAAC,oBAAQ,IAAC,QAAQ,EAAE,gBAAgB,GAAI,EACxC,YAAY,EACZ,EAAE,EACF,CAAC,gBAAgB,CAAC,CACnB,CAAC;IAEF,OAAO,CACL,wBAAC,iBAAS,mBACK,cAAK,CAAC,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,qBAAqB,CAAC,mBAClD,cAAK,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,aACpC,aAAa,cAAK,CAAC,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,gBAAgB,CAAC,EAAE,iBAC3D,oBAAoB,wBAE5B,KAAK,aAET,wBAAC,iBAAS,gBACC,MAAM,iBACH,QAAQ,aACX,cAAK,CAAC,IAAI,CAAC,MAAM,CAAC,WAAW,iBACzB,cAAK,CAAC,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,oBAAoB,CAAC,mBACjD,aAAa,cAAK,CAAC,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,gBAAgB,CAAC,EAAE,wBACzD,cAAK,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,UAC3C,cAAK,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,iBACxB,oBAAoB,gCAGhC,uBAAC,YAAI,IAAC,KAAK,EAAE,KAAK,YAAU,CAAC,yCAAwB,EACpD,CAAC,CAAC,gBAAgB,IAAI,CACrB,uBAAC,kBAAU,IACT,GAAG,EAAE,aAAa,EAClB,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,kCAAkC,EACvC,OAAO,EAAC,yBAAyB,GACjC,CACH,IACS,EACZ,uBAAC,qBAAU,IACT,QAAQ,EAAE,QAAQ,EAClB,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,SAAS,EACpB,aAAa,EAAE,aAAa,YACrB,MAAM,GACb,IACQ,CACb,CAAC;AACJ,CAAC,CACF,CAAC"}

package/lib/components/molecules/trays/ProblemExampleTray.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import type { Palette } from '../../../constants/styles';
+import { Container, Text } from '../../../components/atoms';
+type Props = {
+    title?: React.ComponentProps<typeof Text>['value'];
+    downloadFileName?: string;
+    value?: string;
+    onClickInput?: () => void;
+    onClickWide?: () => void;
+    onClickOpen?: () => void;
+    palette?: Palette;
+} & React.ComponentProps<typeof Container>;
+declare const _default: React.MemoExoticComponent<({ title, downloadFileName, value, onClickInput, onClickWide, onClickOpen, palette, ...props }: Props) => import("react/jsx-runtime").JSX.Element>;
+export default _default;

package/lib/components/molecules/trays/ProblemExampleTray.js

@@ -0,0 +1,64 @@
+'use client';
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const styles_1 = require("../../../utils/styles");
+const components_1 = require("../../../hooks/components");
+const stores_1 = require("../../../hooks/stores");
+const atoms_1 = require("../../../components/atoms");
+const molecules_1 = require("../../../components/molecules");
+const transExampleToHtml = (html) => html.split('\n').join('<br>').split(' ').join('&nbsp;');
+exports.default = react_1.default.memo(({ title, downloadFileName = 'example.txt', value, onClickInput, onClickWide, onClickOpen, palette = 'body', ...props }) => {
+    const { editorConfig } = (0, stores_1.useConfigStore)();
+    const coupleButtonRef = react_1.default.useRef(null);
+    const [isOpen, setIsOpen] = react_1.default.useState(false);
+    const copyButton = (0, components_1.useCopyTextButton)(value);
+    const inputButton = react_1.default.useMemo(() => onClickInput
+        ? {
+            key: 'input',
+            icon: 'hero/arrow-right-end-on-rectangle-outline',
+            text: '입력하기',
+            onClick: onClickInput,
+        }
+        : undefined, [onClickInput]);
+    const wideButton = react_1.default.useMemo(() => onClickWide
+        ? {
+            key: 'wide',
+            icon: 'hero/arrows-pointing-out-outline',
+            text: '넓게보기',
+            onClick: onClickWide,
+        }
+        : undefined, [onClickWide]);
+    const openButton = react_1.default.useMemo(() => onClickOpen
+        ? {
+            key: 'open',
+            icon: 'hero/document-outline',
+            text: '열기',
+            onClick: onClickOpen,
+        }
+        : undefined, [onClickOpen]);
+    const downloadButton = (0, components_1.useDownloadTxtTextButton)(value, downloadFileName);
+    const leftButton = inputButton || copyButton;
+    const rightButton = react_1.default.useMemo(() => ({
+        icon: 'hero/ellipsis-horizontal-outline',
+        onClick: () => setIsOpen(x => !x),
+    }), [setIsOpen]);
+    const sections = react_1.default.useMemo(() => [
+        {
+            key: 'main',
+            textButtons: [
+                ...(inputButton ? [copyButton] : []),
+                ...(wideButton ? [wideButton] : []),
+                ...(openButton ? [openButton] : []),
+                downloadButton,
+            ],
+        },
+    ], [copyButton, inputButton, wideButton, openButton, downloadButton]);
+    (0, stores_1.useDropdownEffect)(coupleButtonRef, (0, jsx_runtime_1.jsx)(molecules_1.Dropdown, { sections: sections }), 'bottom-end', { isOpen, setIsOpen }, [sections]);
+    return ((0, jsx_runtime_1.jsxs)(atoms_1.Container, { "$background": styles_1.theme.color.palettes[palette]['background-selected'], "$borderRadius": styles_1.theme.size.borderRadius.medium, "$border": `1px solid ${styles_1.theme.color.palettes[palette]['border-primary']}`, "$transition": "background, border", "$overflow": true, ...props, children: [(0, jsx_runtime_1.jsxs)(atoms_1.Container, { "$display": "flex", "$alignItems": "center", "$height": styles_1.theme.size.height.tray_header, "$background": styles_1.theme.color.palettes[palette]['background-primary'], "$borderBottom": `1px solid ${styles_1.theme.color.palettes[palette]['border-primary']}`, "$paddingHorizontal": styles_1.theme.size.margin.base.medium, "$gap": styles_1.theme.size.margin.base.x_small, "$transition": "background, border", "$overflow": true, children: [(0, jsx_runtime_1.jsx)(atoms_1.Text, { value: title, "$width": 0, "$flexGrow": true, "$ellipsis": true }), (0, jsx_runtime_1.jsxs)(atoms_1.Container, { "$display": "flex", "$alignItems": "center", "$gap": styles_1.theme.size.margin.base.small, children: [(0, jsx_runtime_1.jsx)(atoms_1.TextButton, { type: "plain", size: "small", palette: "button-ghost-softly", ...leftButton }), (0, jsx_runtime_1.jsx)(atoms_1.TextButton, { type: "plain", size: "small", ref: coupleButtonRef, palette: "button-ghost-softly", ...rightButton })] })] }), (0, jsx_runtime_1.jsx)(atoms_1.Container, { "$paddingHorizontal": styles_1.theme.size.margin.base.medium, "$paddingVertical": styles_1.theme.size.margin.base.medium, "$font": editorConfig.font, dangerouslySetInnerHTML: { __html: transExampleToHtml(value || '') } })] }));
+});
+//# sourceMappingURL=ProblemExampleTray.js.map

package/lib/components/molecules/trays/ProblemExampleTray.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProblemExampleTray.js","sourceRoot":"","sources":["../../../../src/components/molecules/trays/ProblemExampleTray.tsx"],"names":[],"mappings":"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"}

package/lib/components/molecules/trays/ProblemSetOverviewTray.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { Palette } from '../../../constants/styles';
+import { Text } from '../../../components/atoms';
+import { Container } from '../../../components/atoms';
+type Props = {
+    solvesCount?: number;
+    problemsCount?: number;
+    description?: React.ComponentProps<typeof Text>['value'];
+    palette?: Palette;
+} & React.ComponentProps<typeof Container>;
+declare const _default: ({ solvesCount, problemsCount, description, palette, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+export default _default;

package/lib/components/molecules/trays/ProblemSetOverviewTray.js

@@ -0,0 +1,32 @@
+'use client';
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const styles_1 = require("../../../utils/styles");
+const animations_1 = require("../../../hooks/animations");
+const styles_2 = require("../../../hooks/styles");
+const atoms_1 = require("../../../components/atoms");
+const atoms_2 = require("../../../components/atoms");
+const PercentageText = ({ value, ...props }) => {
+    const animatedValue = (0, animations_1.useNumberCountUpAnimation)(value, 0);
+    return (0, jsx_runtime_1.jsx)(atoms_1.Text, { value: `${animatedValue}%`, ...props });
+};
+exports.default = ({ solvesCount = 0, problemsCount = 0, description, palette = 'body', ...props }) => {
+    const ref = react_1.default.useRef(null);
+    const { isVisible, offsetWidth } = (0, styles_2.useElementStates)(ref);
+    const layout = react_1.default.useMemo(() => !offsetWidth || offsetWidth >= styles_1.theme.size.width.adaptives.tablet
+        ? 'split'
+        : offsetWidth >= styles_1.theme.size.width.adaptives.mobile
+            ? 'stack'
+            : 'compact', [offsetWidth]);
+    return ((0, jsx_runtime_1.jsxs)(atoms_2.Container, { ref: ref, "$position": "relative", "$display": layout === 'split' ? 'flex' : 'block', "$background": styles_1.theme.color.palettes[palette]['background-selected'], "$border": `1px solid ${styles_1.theme.color.palettes[palette]['border-primary']}`, "$borderRadius": styles_1.theme.size.borderRadius.medium, "$transition": "background, border", "$overflow": true, ...props, children: [(0, jsx_runtime_1.jsxs)(atoms_2.Container, { "$width": layout === 'split' ? 240 : '100%', "$padding": layout === 'split'
+                    ? styles_1.theme.size.margin.base.large
+                    : styles_1.theme.size.margin.base.medium, "$background": styles_1.theme.color.palettes['button-solid']['background-primary'], children: [isVisible ? ((0, jsx_runtime_1.jsx)(PercentageText, { type: "x_large-bold", value: problemsCount > 0 ? (solvesCount / problemsCount) * 100 : 0, "$color": styles_1.theme.color.palettes['body-dark']['content-primary'] })) : ((0, jsx_runtime_1.jsx)(atoms_1.Text, { type: "x_large-bold", value: "-", "$color": styles_1.theme.color.palettes['body-dark']['content-primary'] })), (0, jsx_runtime_1.jsx)(atoms_1.Text, { type: "x_small", value: `${solvesCount} / ${problemsCount} 해결`, "$color": styles_1.theme.color.palettes['body-dark']['content-secondary'] })] }), (0, jsx_runtime_1.jsx)(atoms_2.Container, { "$width": layout === 'split' ? 0 : '100%', "$padding": layout === 'split'
+                    ? styles_1.theme.size.margin.base.large
+                    : styles_1.theme.size.margin.base.medium, "$flexGrow": true, children: !!description && ((0, jsx_runtime_1.jsx)(atoms_1.Text, { value: description, "$color": styles_1.theme.color.palettes[palette]['content-secondary'] })) })] }));
+};
+//# sourceMappingURL=ProblemSetOverviewTray.js.map

package/lib/components/molecules/trays/ProblemSetOverviewTray.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProblemSetOverviewTray.js","sourceRoot":"","sources":["../../../../src/components/molecules/trays/ProblemSetOverviewTray.tsx"],"names":[],"mappings":"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"}

package/lib/components/molecules/trays/RankOverviewTray.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import { AvatarButton, ClickableContainer, Container, Icon, Text } from '../../../components/atoms';
+type CellButtonProps = {
+    icon?: React.ComponentProps<typeof Icon>['type'];
+    title: React.ComponentProps<typeof Text>['value'];
+    count?: number;
+    unit?: React.ComponentProps<typeof Text>['value'];
+    $iconAutoFill?: React.ComponentProps<typeof Icon>['$autoFill'];
+} & React.ComponentProps<typeof ClickableContainer>;
+type Props = {
+    title: React.ComponentProps<typeof Text>['value'];
+    rank?: number;
+    totalCount?: number;
+    userId: React.ComponentProps<typeof AvatarButton>['id'];
+    userProfileImageUrl?: React.ComponentProps<typeof AvatarButton>['src'];
+    userProfileHref?: React.ComponentProps<typeof AvatarButton>['href'];
+    userMessage?: React.ComponentProps<typeof Text>['value'];
+    cellButtons?: CellButtonProps[];
+} & React.ComponentProps<typeof Container>;
+declare const _default: ({ title, rank, totalCount, userId, userProfileImageUrl, userProfileHref, userMessage, cellButtons, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+export default _default;

package/lib/components/molecules/trays/RankOverviewTray.js

@@ -0,0 +1,37 @@
+'use client';
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const styles_1 = require("../../../utils/styles");
+const animations_1 = require("../../../hooks/animations");
+const styles_2 = require("../../../hooks/styles");
+const atoms_1 = require("../../../components/atoms");
+const CellButton = ({ icon, title, count, unit, $iconAutoFill, ...props }) => {
+    const [hoverProps, isHover] = (0, styles_2.useHoverProps)();
+    return ((0, jsx_runtime_1.jsxs)(atoms_1.ClickableContainer, { "$display": "flex", "$flexDirection": "column", "$paddingVertical": styles_1.theme.size.margin.base.medium, "$paddingHorizontal": styles_1.theme.size.margin.base.medium, "$background": isHover
+            ? styles_1.theme.color.palettes.body['background-primary']
+            : styles_1.theme.color.palettes.body['background-selected'], "$border": `1px solid ${styles_1.theme.color.palettes.body['border-primary']}`, "$borderRadius": styles_1.theme.size.borderRadius.small, "$transition": "background, border", "$overflow": true, ...hoverProps, ...props, children: [(0, jsx_runtime_1.jsxs)(atoms_1.Container, { "$display": "flex", "$alignItems": "center", "$gap": styles_1.theme.size.margin.base.x_small, children: [!!icon && ((0, jsx_runtime_1.jsx)(atoms_1.Icon, { type: icon, "$autoFill": $iconAutoFill, "$size": styles_1.theme.size.height.base.x_small })), (0, jsx_runtime_1.jsx)(atoms_1.Text, { type: "x_small-bold", value: title })] }), (0, jsx_runtime_1.jsxs)(atoms_1.Container, { "$display": "flex", "$alignItems": "end", "$gap": styles_1.theme.size.margin.base.x_small, "$marginTop": styles_1.theme.size.margin.base.x_small, children: [(0, jsx_runtime_1.jsx)(atoms_1.Text, { type: "large-bold", value: typeof count === 'number' ? count.toLocaleString() : '-' }), (0, jsx_runtime_1.jsx)(atoms_1.Text, { type: "x_small", value: unit, "$color": styles_1.theme.color.palettes.body['content-secondary'], "$marginBottom": 4 })] })] }));
+};
+exports.default = ({ title, rank, totalCount, userId, userProfileImageUrl, userProfileHref, userMessage, cellButtons, ...props }) => {
+    const ref = react_1.default.useRef(null);
+    const { isVisible, offsetWidth } = (0, styles_2.useElementStates)(ref);
+    const animatedRank = (0, animations_1.useNumberCountUpAnimation)(isVisible && typeof rank === 'number' ? rank : 0);
+    const layout = react_1.default.useMemo(() => !offsetWidth || offsetWidth >= styles_1.theme.size.width.adaptives.tablet
+        ? 'split'
+        : offsetWidth >= styles_1.theme.size.width.adaptives.mobile
+            ? 'stack'
+            : 'compact', [offsetWidth]);
+    return ((0, jsx_runtime_1.jsxs)(atoms_1.Container, { ref: ref, "$position": "relative", "$display": layout === 'split' ? 'flex' : 'block', "$background": styles_1.theme.color.palettes.body['background-selected'], "$border": `1px solid ${styles_1.theme.color.palettes.body['border-primary']}`, "$borderRadius": styles_1.theme.size.borderRadius.medium, "$transition": "background, border", "$overflow": true, ...props, children: [(0, jsx_runtime_1.jsxs)(atoms_1.Container, { "$width": layout === 'split' ? 240 : '100%', "$padding": layout === 'split'
+                    ? styles_1.theme.size.margin.base.large
+                    : styles_1.theme.size.margin.base.medium, "$background": styles_1.theme.color.palettes['button-solid']['background-primary'], children: [(0, jsx_runtime_1.jsx)(atoms_1.Text, { type: "small", value: title, "$color": styles_1.theme.color.palettes['button-solid']['content-primary'] }), (0, jsx_runtime_1.jsxs)(atoms_1.Container, { "$display": "flex", "$alignItems": "baseline", "$gap": styles_1.theme.size.margin.base.x_small, children: [(0, jsx_runtime_1.jsx)(atoms_1.Text, { type: "3x_large-bold", value: typeof rank === 'number' ? animatedRank : '-', "$color": styles_1.theme.color.palettes['button-solid']['content-primary'] }), (0, jsx_runtime_1.jsx)(atoms_1.Text, { type: "large-bold", value: "\uC704", "$color": styles_1.theme.color.palettes['button-solid']['content-primary'] })] }), typeof totalCount === 'number' &&
+                        typeof rank === 'number' &&
+                        totalCount > 0 &&
+                        rank > 0 && ((0, jsx_runtime_1.jsx)(atoms_1.Container, { "$display": "flex", children: (0, jsx_runtime_1.jsx)(atoms_1.Container, { "$display": "flex", "$alignItems": "center", "$height": styles_1.theme.size.height.base.small, "$paddingHorizontal": styles_1.theme.size.margin.base.small, "$borderRadius": styles_1.theme.size.borderRadius.small, "$background": styles_1.theme.color.with_opacity.button(styles_1.theme.color.palettes['button-solid']['content-primary']), children: (0, jsx_runtime_1.jsx)(atoms_1.Text, { type: "x_small-bold", value: `상위 ${((rank / totalCount) * 100).toFixed(2)}%`, "$color": styles_1.theme.color.palettes['button-solid']['content-primary'] }) }) }))] }), (0, jsx_runtime_1.jsxs)(atoms_1.Container, { "$display": "flex", "$flexDirection": "column", "$justifyContent": "space-between", "$padding": layout === 'split'
+                    ? styles_1.theme.size.margin.base.large
+                    : styles_1.theme.size.margin.base.medium, "$width": layout === 'split' ? 0 : '100%', "$flexGrow": true, children: [(0, jsx_runtime_1.jsxs)(atoms_1.Container, { "$display": "flex", "$alignItems": "center", "$gap": styles_1.theme.size.margin.base.small, children: [(0, jsx_runtime_1.jsx)(atoms_1.AvatarButton, { size: "large", id: userId, src: userProfileImageUrl, href: userProfileHref }), (0, jsx_runtime_1.jsxs)(atoms_1.Container, { "$width": 0, "$flexGrow": true, "$overflow": true, children: [(0, jsx_runtime_1.jsx)(atoms_1.Text, { type: "medium", value: userId, "$color": styles_1.theme.color.palettes.body['content-primary'], "$ellipsis": true }), !!userMessage && ((0, jsx_runtime_1.jsx)(atoms_1.Text, { type: "x_small", value: userMessage, "$color": styles_1.theme.color.palettes.body['content-secondary'], "$ellipsis": true }))] }), !!userProfileHref && ((0, jsx_runtime_1.jsx)(atoms_1.TextButton, { size: "small", text: "\uB0B4 \uD504\uB85C\uD544 \uD655\uC778", palette: "button-soft", href: userProfileHref }))] }), Array.isArray(cellButtons) && cellButtons.length > 0 && ((0, jsx_runtime_1.jsx)(atoms_1.Container, { "$display": "grid", "$gridTemplateColumnsRepeatCounts": "auto-fit", "$gridTemplateColumns": styles_1.theme.size.width.cards.small, "$gap": styles_1.theme.size.margin.base.small, "$marginTop": styles_1.theme.size.margin.base.medium, children: cellButtons.map((button, index) => ((0, jsx_runtime_1.jsx)(CellButton, { ...button }, index))) }))] })] }));
+};
+//# sourceMappingURL=RankOverviewTray.js.map

package/lib/components/molecules/trays/RankOverviewTray.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RankOverviewTray.js","sourceRoot":"","sources":["../../../../src/components/molecules/trays/RankOverviewTray.tsx"],"names":[],"mappings":"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"}

package/lib/components/molecules/trays/RankPodiumTray.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { AvatarButton, Container, TextButton } from '../../../components/atoms';
+type SinglePodiumContainerProps = {
+    avatarButton: React.ComponentProps<typeof AvatarButton>;
+    text?: React.ComponentProps<typeof TextButton>['text'];
+    index: 1 | 2 | 3;
+    extraChildren?: React.ReactNode;
+} & React.ComponentProps<typeof Container>;
+type Props = {
+    values?: Omit<SinglePodiumContainerProps, 'index'>[];
+} & React.ComponentProps<typeof Container>;
+declare const _default: ({ values, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+export default _default;

package/lib/components/molecules/trays/RankPodiumTray.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const styles_1 = require("../../../utils/styles");
+const atoms_1 = require("../../../components/atoms");
+const SinglePodiumContainer = ({ avatarButton, text, index, extraChildren, ...props }) => {
+    return ((0, jsx_runtime_1.jsxs)(atoms_1.Container, { "$position": "relative", "$display": "flex", "$flexDirection": "column", ...props, children: [(0, jsx_runtime_1.jsx)(atoms_1.Container, { "$flexGrow": index === 2 || index === 3 }), (0, jsx_runtime_1.jsxs)(atoms_1.Container, { "$display": "flex", "$flexDirection": "column", "$alignItems": "center", children: [(0, jsx_runtime_1.jsx)(atoms_1.AvatarButton, { size: "large", ...avatarButton }), !!text && ((0, jsx_runtime_1.jsx)(atoms_1.TextButton, { type: "plain", text: text, href: avatarButton.href, isUnderlineEffect: true, "$ellipsis": true }))] }), extraChildren, (0, jsx_runtime_1.jsx)(atoms_1.Container, { "$background": styles_1.theme.color.palettes.body['background-selected'], "$borderRadius": `${styles_1.theme.size.borderRadius.small}px ${styles_1.theme.size.borderRadius.small}px 0 0`, "$border": `1px solid ${styles_1.theme.color.palettes.body['border-primary']}`, "$marginTop": styles_1.theme.size.margin.base.small, "$borderBottom": "none", "$flexGrow": index === 1 || index === 2, children: (0, jsx_runtime_1.jsx)(atoms_1.Text, { type: index === 1 ? 'x_large-bold' : 'large-bold', value: index, "$textAlign": "center", "$color": index === 1
+                        ? styles_1.theme.color.base.extra.gold
+                        : index === 2
+                            ? styles_1.theme.color.base.extra.silver
+                            : styles_1.theme.color.base.extra.bronze, "$marginTop": styles_1.theme.size.margin.base.small }) })] }));
+};
+exports.default = ({ values, ...props }) => {
+    const first = values === null || values === void 0 ? void 0 : values[0];
+    const second = values === null || values === void 0 ? void 0 : values[1];
+    const third = values === null || values === void 0 ? void 0 : values[2];
+    return ((0, jsx_runtime_1.jsxs)(atoms_1.Container, { "$position": "relative", "$display": "flex", "$gap": styles_1.theme.size.margin.base.small, ...props, children: [second ? ((0, jsx_runtime_1.jsx)(SinglePodiumContainer, { index: 2, "$width": 0, "$flexGrow": true, ...second })) : ((0, jsx_runtime_1.jsx)(atoms_1.Container, { "$width": 0, "$flexGrow": true })), first ? ((0, jsx_runtime_1.jsx)(SinglePodiumContainer, { index: 1, "$width": 0, "$flexGrow": true, ...first })) : ((0, jsx_runtime_1.jsx)(atoms_1.Container, { "$width": 0, "$flexGrow": true })), third ? ((0, jsx_runtime_1.jsx)(SinglePodiumContainer, { index: 3, "$width": 0, "$flexGrow": true, ...third })) : ((0, jsx_runtime_1.jsx)(atoms_1.Container, { "$width": 0, "$flexGrow": true }))] }));
+};
+//# sourceMappingURL=RankPodiumTray.js.map

package/lib/components/molecules/trays/RankPodiumTray.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RankPodiumTray.js","sourceRoot":"","sources":["../../../../src/components/molecules/trays/RankPodiumTray.tsx"],"names":[],"mappings":"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"}

package/lib/components/molecules/trays/RankSetTray.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Palette } from '../../../constants/styles/color';
+import { Avatar, ClickableContainer, Container, Icon, Text } from '../../../components/atoms';
+type ButtonProps = {
+    avatar?: React.ComponentProps<typeof Avatar>;
+    text?: React.ComponentProps<typeof Text>['value'];
+    description?: React.ComponentProps<typeof Text>['value'];
+    index: number;
+    palette?: Palette;
+} & React.ComponentProps<typeof ClickableContainer>;
+type Props = {
+    icon?: React.ComponentProps<typeof Icon>['type'];
+    title?: React.ComponentProps<typeof Text>['value'];
+    values?: Omit<ButtonProps, 'index'>[];
+    bottomButton?: {
+        text?: React.ComponentProps<typeof Text>['value'];
+    } & React.ComponentProps<typeof ClickableContainer>;
+    palette?: Palette;
+} & React.ComponentProps<typeof Container>;
+declare const _default: React.MemoExoticComponent<({ icon, title, values, bottomButton: _bottomButton, palette, children, ...props }: Props) => import("react/jsx-runtime").JSX.Element>;
+export default _default;

package/lib/components/molecules/trays/RankSetTray.js

@@ -0,0 +1,35 @@
+'use client';
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const styles_1 = require("../../../utils/styles");
+const styles_2 = require("../../../hooks/styles");
+const atoms_1 = require("../../../components/atoms");
+const FirstPlaceButton = ({ avatar, text, description, index, palette = 'body', ...props }) => {
+    const [hoverProps, isHover] = (0, styles_2.useHoverProps)();
+    return ((0, jsx_runtime_1.jsxs)(atoms_1.ClickableContainer, { "$display": "flex", "$flexDirection": "column", "$alignItems": "center", "$gap": styles_1.theme.size.margin.base.small, "$paddingHorizontal": styles_1.theme.size.margin.base.medium, "$paddingVertical": styles_1.theme.size.margin.base.medium, "$background": styles_1.theme.color.palettes[palette][isHover ? 'background-primary' : 'background-selected'], "$transition": "background", ...hoverProps, ...props, children: [avatar && ((0, jsx_runtime_1.jsx)(atoms_1.Container, { "$display": "flex", "$alignItems": "center", "$justifyContent": "center", "$size": styles_1.theme.size.height.base['x_large'] + 8, "$borderRadius": styles_1.theme.size.height.base['x_large'] / 2 + 4, "$border": `2px solid ${styles_1.theme.color.base.extra.gold}`, children: (0, jsx_runtime_1.jsx)(atoms_1.Avatar, { size: "x_large", ...avatar }) })), (!!text || !!description) && ((0, jsx_runtime_1.jsxs)(atoms_1.Container, { "$display": "flex", "$flexDirection": "column", "$alignItems": "center", children: [!!text && ((0, jsx_runtime_1.jsx)(atoms_1.Text, { type: "medium-bold", value: text, "$color": styles_1.theme.color.palettes[palette]['content-primary'], "$ellipsis": true })), !!description && ((0, jsx_runtime_1.jsx)(atoms_1.Text, { type: "small", value: description, "$color": styles_1.theme.color.palettes[palette]['content-secondary'], "$ellipsis": true }))] }))] }));
+};
+const PlaceButton = ({ avatar, text, description, index, palette = 'body', ...props }) => {
+    const [hoverProps, isHover] = (0, styles_2.useHoverProps)();
+    return ((0, jsx_runtime_1.jsxs)(atoms_1.ClickableContainer, { "$display": "flex", "$alignItems": "center", "$paddingHorizontal": styles_1.theme.size.margin.base.medium, "$height": styles_1.theme.size.height.base['2x_large'], "$gap": styles_1.theme.size.margin.base.small, "$background": styles_1.theme.color.palettes[palette][isHover ? 'background-primary' : 'background-selected'], "$transition": "background", ...hoverProps, ...props, children: [(0, jsx_runtime_1.jsx)(atoms_1.Text, { type: index <= 3 ? 'medium-bold' : 'medium', value: index, "$color": index === 2
+                    ? styles_1.theme.color.base.extra.silver
+                    : index === 3
+                        ? styles_1.theme.color.base.extra.bronze
+                        : styles_1.theme.color.palettes[palette]['content-primary'], "$width": 24, "$noneUserSelect": true, "$ellipsis": true }), !!avatar && (0, jsx_runtime_1.jsx)(atoms_1.Avatar, { size: "small", ...avatar }), (0, jsx_runtime_1.jsxs)(atoms_1.Container, { "$width": 0, "$flexGrow": true, children: [!!text && ((0, jsx_runtime_1.jsx)(atoms_1.Text, { type: "small", value: text, "$color": styles_1.theme.color.palettes[palette]['content-primary'], "$ellipsis": true })), !!description && ((0, jsx_runtime_1.jsx)(atoms_1.Text, { type: "x_small", value: description, "$color": styles_1.theme.color.palettes[palette]['content-secondary'], "$ellipsis": true }))] })] }));
+};
+exports.default = react_1.default.memo(({ icon, title, values, bottomButton: _bottomButton, palette = 'body', children, ...props }) => {
+    const { text: bottomButtonText, ...bottomButton } = _bottomButton || {};
+    const [bottomButtonHoverProps, isHoverBottomButton] = (0, styles_2.useHoverProps)();
+    return ((0, jsx_runtime_1.jsxs)(atoms_1.Container, { "$background": styles_1.theme.color.palettes[palette]['background-selected'], "$borderRadius": styles_1.theme.size.borderRadius.medium, "$border": `1px solid ${styles_1.theme.color.palettes[palette]['border-primary']}`, "$transition": "background, border", "$overflow": true, ...props, children: [(!!icon || !!title) && ((0, jsx_runtime_1.jsxs)(atoms_1.Container, { "$display": "flex", "$alignItems": "center", "$height": styles_1.theme.size.height.tray_header, "$background": styles_1.theme.color.palettes[palette]['background-primary'], "$borderBottom": `1px solid ${styles_1.theme.color.palettes[palette]['border-primary']}`, "$paddingHorizontal": styles_1.theme.size.margin.base.medium, "$gap": styles_1.theme.size.margin.base.x_small, "$transition": "background, border", "$overflow": true, children: [!!icon && ((0, jsx_runtime_1.jsx)(atoms_1.Icon, { type: icon, "$size": styles_1.theme.size.height.base.small, "$autoFill": styles_1.theme.color.palettes[palette]['content-primary'] })), !!title && ((0, jsx_runtime_1.jsx)(atoms_1.Text, { value: title, "$width": 0, "$flexGrow": true, "$ellipsis": true, "$color": styles_1.theme.color.palettes[palette]['content-primary'] }))] })), (values || []).map((button, index) => index === 0 ? ((0, jsx_runtime_1.jsx)(FirstPlaceButton, { index: index + 1, palette: palette, "$borderBottom": index < ((values === null || values === void 0 ? void 0 : values.length) || 0) - 1
+                    ? `1px solid ${styles_1.theme.color.palettes[palette]['border-primary']}`
+                    : 'none', ...button }, index)) : ((0, jsx_runtime_1.jsx)(PlaceButton, { index: index + 1, palette: palette, "$borderBottom": index < ((values === null || values === void 0 ? void 0 : values.length) || 0) - 1
+                    ? `1px solid ${styles_1.theme.color.palettes[palette]['border-primary']}`
+                    : 'none', ...button }, index))), children, !!_bottomButton && ((0, jsx_runtime_1.jsx)(atoms_1.ClickableContainer, { "$display": "flex", "$alignItems": "center", "$justifyContent": "center", "$background": styles_1.theme.color.palettes[palette][isHoverBottomButton
+                    ? 'background-primary'
+                    : 'background-selected'], "$borderTop": `1px solid ${styles_1.theme.color.palettes[palette]['border-primary']}`, "$paddingHorizontal": styles_1.theme.size.margin.base.medium, "$paddingVertical": styles_1.theme.size.margin.base.small, "$transition": "background", "$noneUserSelect": true, ...bottomButtonHoverProps, ...bottomButton, children: (0, jsx_runtime_1.jsx)(atoms_1.Text, { type: "small", value: bottomButtonText, "$color": styles_1.theme.color.palettes[palette]['content-primary'], "$noneUserSelect": true, "$flexShrink": true, "$ellipsis": true }) }))] }));
+});
+//# sourceMappingURL=RankSetTray.js.map

package/lib/components/molecules/trays/RankSetTray.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RankSetTray.js","sourceRoot":"","sources":["../../../../src/components/molecules/trays/RankSetTray.tsx"],"names":[],"mappings":"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"}

package/lib/components/molecules/trays/SelectedChipTray.d.ts

@@ -0,0 +1,8 @@
+import { Palette } from '../../../constants/styles';
+import { Container, TextButton } from '../../../components/atoms';
+type Props = {
+    onClickReset?: React.ComponentProps<typeof TextButton>['onClick'];
+    palette?: Palette;
+} & React.ComponentProps<typeof Container>;
+declare const _default: ({ onClickReset, palette, children, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+export default _default;

package/lib/components/molecules/trays/SelectedChipTray.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const styles_1 = require("../../../utils/styles");
+const atoms_1 = require("../../../components/atoms");
+exports.default = ({ onClickReset, palette = 'body', children, ...props }) => ((0, jsx_runtime_1.jsxs)(atoms_1.Container, { "$display": "flex", "$gap": styles_1.theme.size.margin.base.small, "$border": `1px solid ${styles_1.theme.color.palettes[palette]['border-primary']}`, "$paddingHorizontal": styles_1.theme.size.margin.base.medium, "$paddingVertical": styles_1.theme.size.margin.base.small, "$background": styles_1.theme.color.palettes[palette]['background-selected'], "$borderRadius": styles_1.theme.size.borderRadius.medium, "$flexWrap": true, ...props, children: [(0, jsx_runtime_1.jsx)(atoms_1.TextButton, { icon: "hero/arrow-uturn-left-outline", text: "\uD544\uD130 \uCD08\uAE30\uD654", onClick: onClickReset, palette: "button-ghost-borderless" }), children] }));
+//# sourceMappingURL=SelectedChipTray.js.map

package/lib/components/molecules/trays/SelectedChipTray.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectedChipTray.js","sourceRoot":"","sources":["../../../../src/components/molecules/trays/SelectedChipTray.tsx"],"names":[],"mappings":";;;AAEA,2CAAuC;AAEvC,8CAA2D;AAO3D,kBAAe,CAAC,EACd,YAAY,EACZ,OAAO,GAAG,MAAM,EAChB,QAAQ,EACR,GAAG,KAAK,EACF,EAAE,EAAE,CAAC,CACX,wBAAC,iBAAS,gBACC,MAAM,UACT,cAAK,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,aACzB,aAAa,cAAK,CAAC,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,gBAAgB,CAAC,EAAE,wBACnD,cAAK,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,sBAC/B,cAAK,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,iBACjC,cAAK,CAAC,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,qBAAqB,CAAC,mBAClD,cAAK,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,wBAEzC,KAAK,aAET,uBAAC,kBAAU,IACT,IAAI,EAAC,+BAA+B,EACpC,IAAI,EAAC,iCAAQ,EACb,OAAO,EAAE,YAAY,EACrB,OAAO,EAAC,yBAAyB,GACjC,EACD,QAAQ,IACC,CACb,CAAC"}

package/lib/components/molecules/trays/SubmitTray.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+import { type Dayjs } from '@euler-edu/utils/day';
+import type { Palette } from '../../../constants/styles';
+import { Avatar, ClickableContainer, Container, ScoringResultBadge } from '../../../components/atoms';
+type Props = {
+    id: string | number;
+    userId: string;
+    userProfileImageUrl?: React.ComponentProps<typeof Avatar>['src'];
+    problemId: string;
+    problemTitle?: string;
+    language?: string;
+    time?: number;
+    memory?: number;
+    sourceLength?: number;
+    scoringResult?: React.ComponentProps<typeof ScoringResultBadge>;
+    createdAt?: Dayjs;
+    href?: React.ComponentProps<typeof ClickableContainer>['href'];
+    userHref?: React.ComponentProps<typeof ClickableContainer>['href'];
+    problemHref?: React.ComponentProps<typeof ClickableContainer>['href'];
+    isDisplayProblem?: boolean;
+    isDisplayScoringResult?: boolean;
+    palette?: Palette;
+} & Omit<React.ComponentProps<typeof Container>, 'id'>;
+declare const _default: React.MemoExoticComponent<({ id, userId, userProfileImageUrl, problemId, problemTitle, language, time, memory, sourceLength, scoringResult, createdAt, href, userHref, problemHref, isDisplayProblem, isDisplayScoringResult, palette, ...props }: Props) => import("react/jsx-runtime").JSX.Element>;
+export default _default;

package/lib/components/molecules/trays/SubmitTray.js

@@ -0,0 +1,30 @@
+'use client';
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const day_1 = require("@euler-edu/utils/day");
+const styles_1 = require("../../../utils/styles");
+const submits_1 = require("../../../utils/submits");
+const day_2 = require("../../../hooks/day");
+const styles_2 = require("../../../hooks/styles");
+const atoms_1 = require("../../../components/atoms");
+exports.default = react_1.default.memo(({ id, userId, userProfileImageUrl, problemId, problemTitle, language, time, memory, sourceLength, scoringResult, createdAt, href, userHref, problemHref, isDisplayProblem = true, isDisplayScoringResult = true, palette = 'body', ...props }) => {
+    const [hoverProps, isHover] = (0, styles_2.useHoverProps)();
+    const [problemHoverProps, isProblemHover] = (0, styles_2.useHoverProps)();
+    const [scoringResultHoverProps, isScoringResultHover] = (0, styles_2.useHoverProps)();
+    const [formattedAgo, setFormattedAgo] = react_1.default.useState(undefined);
+    const dayNowServer = (0, day_2.useDayNowServer)();
+    react_1.default.useEffect(() => {
+        if (createdAt && createdAt.isValid()) {
+            setFormattedAgo((0, day_1.getFormattedAgo)(createdAt));
+        }
+    }, [createdAt, dayNowServer]);
+    return ((0, jsx_runtime_1.jsxs)(atoms_1.Container, { "$borderRadius": styles_1.theme.size.borderRadius.medium, "$background": styles_1.theme.color.palettes[palette]['background-selected'], "$border": `1px solid ${styles_1.theme.color.palettes.body[isHover ? 'border-hovered' : 'border-primary']}`, "$transition": "background, border", "$overflow": true, ...hoverProps, ...props, children: [(0, jsx_runtime_1.jsxs)(atoms_1.Container, { "$display": "flex", "$justifyContent": "space-between", "$paddingHorizontal": styles_1.theme.size.margin.base.small, "$paddingVertical": styles_1.theme.size.margin.base.small, "$gap": styles_1.theme.size.margin.base.small, children: [(0, jsx_runtime_1.jsxs)(atoms_1.ClickableContainer, { href: userHref, "$display": "flex", "$gap": styles_1.theme.size.margin.base.x_small, children: [(0, jsx_runtime_1.jsx)(atoms_1.Avatar, { size: "small", id: userId, src: userProfileImageUrl }), (0, jsx_runtime_1.jsx)(atoms_1.Text, { value: userId })] }), formattedAgo && ((0, jsx_runtime_1.jsx)(atoms_1.Text, { type: "x_small", value: formattedAgo, "$color": styles_1.theme.color.palettes[palette]['content-secondary'] }))] }), (0, jsx_runtime_1.jsxs)(atoms_1.Container, { "$position": "relative", "$display": "flex", "$paddingHorizontal": styles_1.theme.size.margin.base.small, "$paddingBottom": styles_1.theme.size.margin.base.small, "$flexWrap": true, children: [isDisplayProblem && ((0, jsx_runtime_1.jsxs)(atoms_1.ClickableContainer, { href: problemHref, "$width": 0, "$minWidth": "min(100%, 250px)", "$borderRadius": styles_1.theme.size.borderRadius.small, "$padding": styles_1.theme.size.margin.base.small, "$background": styles_1.theme.color.palettes[palette][isProblemHover ? 'background-primary' : 'background-selected'], "$transition": "background", "$flexGrow": true, ...problemHoverProps, children: [(0, jsx_runtime_1.jsx)(atoms_1.Text, { type: "x_small", value: "\uBB38\uC81C", "$color": styles_1.theme.color.palettes[palette]['content-secondary'] }), (0, jsx_runtime_1.jsxs)(atoms_1.Container, { "$display": "flex", "$alignItems": "center", "$gap": styles_1.theme.size.margin.base.small, children: [(0, jsx_runtime_1.jsx)(atoms_1.Text, { value: problemTitle, "$flexShrink": true, "$ellipsis": true }), (0, jsx_runtime_1.jsx)(atoms_1.Text, { type: "x_small", value: `#${problemId}`, "$color": styles_1.theme.color.palettes[palette]['content-secondary'] })] })] })), isDisplayScoringResult && ((0, jsx_runtime_1.jsxs)(atoms_1.ClickableContainer, { href: href, "$width": 0, "$minWidth": "min(100%, 180px)", "$borderRadius": styles_1.theme.size.borderRadius.small, "$padding": styles_1.theme.size.margin.base.small, "$background": styles_1.theme.color.palettes[palette][isScoringResultHover
+                            ? 'background-primary'
+                            : 'background-selected'], "$transition": "background", "$flexGrow": true, ...scoringResultHoverProps, children: [(0, jsx_runtime_1.jsx)(atoms_1.Text, { type: "x_small", value: "\uCC44\uC810 \uACB0\uACFC", "$color": styles_1.theme.color.palettes[palette]['content-secondary'] }), (0, jsx_runtime_1.jsx)(atoms_1.ScoringResultBadge, { type: "mini-label", value: "none", ...scoringResult })] }))] }), (0, jsx_runtime_1.jsxs)(atoms_1.Container, { "$display": "flex", "$justifyContent": "space-between", "$background": styles_1.theme.color.palettes[palette]['background-primary'], "$borderTop": `1px solid ${styles_1.theme.color.palettes.body['border-primary']}`, "$paddingHorizontal": styles_1.theme.size.margin.base.medium, "$paddingVertical": styles_1.theme.size.margin.base.small, "$gap": styles_1.theme.size.margin.base.small, children: [(0, jsx_runtime_1.jsx)(atoms_1.ClickableContainer, { href: href, children: (0, jsx_runtime_1.jsx)(atoms_1.Text, { type: "x_small", value: `No. ${id}`, "$color": styles_1.theme.color.palettes[palette]['content-secondary'] }) }), (0, jsx_runtime_1.jsxs)(atoms_1.Container, { "$display": "flex", "$gap": styles_1.theme.size.margin.base.x_small, children: [language && ((0, jsx_runtime_1.jsx)(atoms_1.Text, { type: "x_small", value: `언어 ${language || '-'}`, "$color": styles_1.theme.color.palettes[palette]['content-secondary'] })), typeof time === 'number' && ((0, jsx_runtime_1.jsx)(atoms_1.Text, { type: "x_small", value: `시간 ${(0, submits_1.getFormattedTime)(time)}`, "$color": styles_1.theme.color.palettes[palette]['content-secondary'] })), typeof memory === 'number' && ((0, jsx_runtime_1.jsx)(atoms_1.Text, { type: "x_small", value: `메모리 ${(0, submits_1.getFormattedMemory)(memory)}`, "$color": styles_1.theme.color.palettes[palette]['content-secondary'] })), typeof sourceLength === 'number' && ((0, jsx_runtime_1.jsx)(atoms_1.Text, { type: "x_small", value: `코드 ${(0, submits_1.getFormattedSourceLength)(sourceLength)}`, "$color": styles_1.theme.color.palettes[palette]['content-secondary'] }))] })] })] }));
+});
+//# sourceMappingURL=SubmitTray.js.map

package/lib/components/molecules/trays/SubmitTray.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SubmitTray.js","sourceRoot":"","sources":["../../../../src/components/molecules/trays/SubmitTray.tsx"],"names":[],"mappings":"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"}

package/lib/components/molecules/trays/index.d.ts

@@ -0,0 +1,8 @@
+export { default as CalloutTray } from './CalloutTray';
+export { default as ProblemExampleTray } from './ProblemExampleTray';
+export { default as ProblemSetOverviewTray } from './ProblemSetOverviewTray';
+export { default as RankOverviewTray } from './RankOverviewTray';
+export { default as RankPodiumTray } from './RankPodiumTray';
+export { default as RankSetTray } from './RankSetTray';
+export { default as SelectedChipTray } from './SelectedChipTray';
+export { default as SubmitTray } from './SubmitTray';