@tipp/ui 2.3.39 → 2.3.40

package/dist/{chunk-YC5XSFKC.js → chunk-SH6FSA7T.js}

@@ -1,9 +1,15 @@
 import {
   DynamicFormEditorFieldEditorPanel
-} from "./chunk-2REWQIZJ.js";
+} from "./chunk-3G3RPU6Q.js";
 import {
   DynamicFormEditorFieldListPanel
-} from "./chunk-6UXCNYVO.js";
+} from "./chunk-7R65MUL6.js";
+import {
+  DynamicFormEditorIssuesPanel
+} from "./chunk-AA6OYHCE.js";
+import {
+  DynamicFormEditorPreviewPanel
+} from "./chunk-ZA4NYPSW.js";
 import {
   createDefaultField,
   createUniqueFieldName,
@@ -16,12 +22,6 @@ import {
   updateSchemaFields,
   validateDynamicFormSchema
 } from "./chunk-Z7WNKARH.js";
-import {
-  DynamicFormEditorIssuesPanel
-} from "./chunk-MIATMZDP.js";
-import {
-  DynamicFormEditorPreviewPanel
-} from "./chunk-JRSZNGFD.js";
 import {
   Flex
 } from "./chunk-25HMMI7R.js";
@@ -227,4 +227,4 @@ function DynamicFormEditor(props) {
 export {
   DynamicFormEditor
 };
-//# sourceMappingURL=chunk-YC5XSFKC.js.map
+//# sourceMappingURL=chunk-SH6FSA7T.js.map

package/dist/{chunk-MLAQDU6U.js → chunk-XLKJYRFY.js}

@@ -156,14 +156,44 @@ function TrainingInfoGuidelineButton({
     Button,
     {
       onClick,
-      style: { width: "100%", height: "48px", textAlign: "left" },
+      style: {
+        width: "100%",
+        height: "auto",
+        minHeight: "48px",
+        textAlign: "left",
+        paddingTop: 8,
+        paddingBottom: 8
+      },
       variant: "outline",
       children: /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "2", width: "100%", children: [
-        icon,
-        /* @__PURE__ */ jsx(Separator, { orientation: "vertical", size: "2" }),
-        /* @__PURE__ */ jsxs(Box, { children: [
-          /* @__PURE__ */ jsx(Typo, { as: "div", children: title }),
-          typeof description === "string" && description !== "" ? /* @__PURE__ */ jsx(Typo, { variant: "caption", children: description }) : null
+        /* @__PURE__ */ jsx(Flex, { align: "center", flexShrink: "0", children: icon }),
+        /* @__PURE__ */ jsx(Separator, { orientation: "vertical", size: "2", style: { flexShrink: 0 } }),
+        /* @__PURE__ */ jsxs(Box, { flexGrow: "1", style: { minWidth: 0 }, children: [
+          /* @__PURE__ */ jsx(
+            Typo,
+            {
+              as: "div",
+              style: {
+                whiteSpace: "normal",
+                wordBreak: "break-word",
+                overflowWrap: "anywhere"
+              },
+              children: title
+            }
+          ),
+          typeof description === "string" && description !== "" ? /* @__PURE__ */ jsx(
+            Typo,
+            {
+              style: {
+                display: "block",
+                whiteSpace: "normal",
+                wordBreak: "break-word",
+                overflowWrap: "anywhere"
+              },
+              variant: "caption",
+              children: description
+            }
+          ) : null
         ] })
       ] })
     }
@@ -173,4 +203,4 @@ function TrainingInfoGuidelineButton({
 export {
   TrainingInfoGuideline
 };
-//# sourceMappingURL=chunk-MLAQDU6U.js.map
+//# sourceMappingURL=chunk-XLKJYRFY.js.map

package/dist/{chunk-MLAQDU6U.js.map → chunk-XLKJYRFY.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/molecules/training-info-guideline.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { FileTextIcon, VideoIcon } from '@radix-ui/react-icons';\nimport { AspectRatio } from '@/atoms/aspect-ratio';\nimport { Button } from '@/atoms/button';\nimport type { TrainingInfoGuidelineContents } from '@/types/training-info-guideline-schema-generated';\nimport { Dialog } from '@/atoms/dialog';\nimport { Spinner } from '@/atoms/spinner';\nimport { Box } from '@/atoms/box';\nimport { Separator } from '@/atoms/separator';\nimport { Typo } from '@/atoms/typo';\nimport { Flex } from '../atoms/flex';\n\nexport interface TrainingInfoGuidelineProps {\n  values: TrainingInfoGuidelineContents['values'];\n  onClickFileDownload: (args: { url: string; filename: string }) => void;\n}\n\nexport function TrainingInfoGuideline({\n  values,\n  onClickFileDownload,\n}: TrainingInfoGuidelineProps): React.ReactElement {\n  return (\n    <>\n      {values.map((value) => (\n        <TrainingInfoGuidelineItem\n          key={getItemKey(value)}\n          onClickFileDownload={onClickFileDownload}\n          value={value}\n        />\n      ))}\n    </>\n  );\n}\n\ntype TrainingInfoGuidelineValue =\n  TrainingInfoGuidelineContents['values'][number];\n\nfunction getItemKey(value: TrainingInfoGuidelineValue): string {\n  return value.url;\n}\n\ninterface TrainingInfoGuidelineItemProps {\n  value: TrainingInfoGuidelineValue;\n  onClickFileDownload: TrainingInfoGuidelineProps['onClickFileDownload'];\n}\n\nfunction TrainingInfoGuidelineItem({\n  value,\n  onClickFileDownload,\n}: TrainingInfoGuidelineItemProps): React.ReactElement | null {\n  const [isLoading, setIsLoading] = useState(true);\n\n  if (value.type === 'file') {\n    return (\n      <TrainingInfoGuidelineButton\n        description=\"파일 다운로드\"\n        icon={<FileTextIcon />}\n        onClick={() => {\n          onClickFileDownload({ url: value.url, filename: value.filename });\n        }}\n        title={value.downloadButtonName}\n      />\n    );\n  }\n\n  if (value.type === 'youtube-shorts') {\n    return (\n      <TrainingInfoGuidelineButton\n        description=\"TIPP 쇼츠 보기\"\n        icon={<VideoIcon />}\n        onClick={() => {\n          window.open(value.url, '_blank');\n        }}\n        title={value.title}\n      />\n    );\n  }\n\n  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- 차후 다른 타입 추가 시 사용\n  if (value.type === 'video') {\n    return (\n      <Dialog.Root>\n        <Dialog.Trigger>\n          <TrainingInfoGuidelineButton\n            description=\"영상 자료\"\n            icon={<VideoIcon />}\n            title={value.videoTitle}\n          />\n        </Dialog.Trigger>\n        <Dialog.Content\n          height=\"100%\"\n          maxHeight=\"500px\"\n          maxWidth=\"800px\"\n          title={value.videoTitle}\n          width=\"100%\"\n        >\n          <AspectRatio ratio={16 / 9} style={{ width: '100%' }}>\n            <Flex\n              align=\"center\"\n              justify=\"center\"\n              style={{\n                width: '100%',\n                height: '100%',\n                backgroundColor: 'black',\n                position: 'relative',\n              }}\n            >\n              {isLoading ? (\n                <Flex\n                  align=\"center\"\n                  height=\"100%\"\n                  justify=\"center\"\n                  position=\"absolute\"\n                  style={{\n                    position: 'absolute',\n                    top: 0,\n                    left: 0,\n                    zIndex: 1,\n                    color: 'white',\n                  }}\n                  width=\"100%\"\n                >\n                  <Spinner size=\"3\" style={{ width: 48, height: 48 }} />\n                </Flex>\n              ) : null}\n\n              <iframe\n                allowFullScreen\n                onError={() => {\n                  setIsLoading(false);\n                }} // 필요시 에러 메시지로 대체\n                onLoad={() => {\n                  setIsLoading(false);\n                }}\n                src={`${value.url}?theme=light`}\n                style={{ width: '100%', height: '100%', border: 'none' }}\n                title=\"Curriculum Video\"\n              />\n            </Flex>\n          </AspectRatio>\n        </Dialog.Content>\n      </Dialog.Root>\n    );\n  }\n  return null;\n}\n\ninterface TrainingInfoGuidelineButtonProps {\n  icon: React.ReactNode;\n  title: string;\n  description?: string;\n  onClick?: () => void;\n}\n\nfunction TrainingInfoGuidelineButton({\n  icon,\n  title,\n  description,\n  onClick,\n}: TrainingInfoGuidelineButtonProps): React.ReactElement {\n  return (\n    <Button\n      onClick={onClick}\n      style={{ width: '100%', height: '48px' , textAlign: 'left'}}\n      variant=\"outline\"\n    >\n      <Flex align=\"center\" gap=\"2\" width=\"100%\">\n        {icon}\n        <Separator orientation=\"vertical\" size=\"2\" />\n        <Box>\n          <Typo as=\"div\">\n            {title}\n          </Typo>\n          {typeof description === 'string' && description !== '' ? (\n            <Typo variant=\"caption\" >\n              {description}\n            </Typo>\n          ) : null}\n        </Box>\n        \n      </Flex>\n    </Button>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,SAAgB,gBAAgB;AAChC,SAAS,cAAc,iBAAiB;AAqBpC,mBAEI,KAyEI,YA3ER;AALG,SAAS,sBAAsB;AAAA,EACpC;AAAA,EACA;AACF,GAAmD;AACjD,SACE,gCACG,iBAAO,IAAI,CAAC,UACX;AAAA,IAAC;AAAA;AAAA,MAEC;AAAA,MACA;AAAA;AAAA,IAFK,WAAW,KAAK;AAAA,EAGvB,CACD,GACH;AAEJ;AAKA,SAAS,WAAW,OAA2C;AAC7D,SAAO,MAAM;AACf;AAOA,SAAS,0BAA0B;AAAA,EACjC;AAAA,EACA;AACF,GAA8D;AAC5D,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,IAAI;AAE/C,MAAI,MAAM,SAAS,QAAQ;AACzB,WACE;AAAA,MAAC;AAAA;AAAA,QACC,aAAY;AAAA,QACZ,MAAM,oBAAC,gBAAa;AAAA,QACpB,SAAS,MAAM;AACb,8BAAoB,EAAE,KAAK,MAAM,KAAK,UAAU,MAAM,SAAS,CAAC;AAAA,QAClE;AAAA,QACA,OAAO,MAAM;AAAA;AAAA,IACf;AAAA,EAEJ;AAEA,MAAI,MAAM,SAAS,kBAAkB;AACnC,WACE;AAAA,MAAC;AAAA;AAAA,QACC,aAAY;AAAA,QACZ,MAAM,oBAAC,aAAU;AAAA,QACjB,SAAS,MAAM;AACb,iBAAO,KAAK,MAAM,KAAK,QAAQ;AAAA,QACjC;AAAA,QACA,OAAO,MAAM;AAAA;AAAA,IACf;AAAA,EAEJ;AAGA,MAAI,MAAM,SAAS,SAAS;AAC1B,WACE,qBAAC,OAAO,MAAP,EACC;AAAA,0BAAC,OAAO,SAAP,EACC;AAAA,QAAC;AAAA;AAAA,UACC,aAAY;AAAA,UACZ,MAAM,oBAAC,aAAU;AAAA,UACjB,OAAO,MAAM;AAAA;AAAA,MACf,GACF;AAAA,MACA;AAAA,QAAC,OAAO;AAAA,QAAP;AAAA,UACC,QAAO;AAAA,UACP,WAAU;AAAA,UACV,UAAS;AAAA,UACT,OAAO,MAAM;AAAA,UACb,OAAM;AAAA,UAEN,8BAAC,eAAY,OAAO,KAAK,GAAG,OAAO,EAAE,OAAO,OAAO,GACjD;AAAA,YAAC;AAAA;AAAA,cACC,OAAM;AAAA,cACN,SAAQ;AAAA,cACR,OAAO;AAAA,gBACL,OAAO;AAAA,gBACP,QAAQ;AAAA,gBACR,iBAAiB;AAAA,gBACjB,UAAU;AAAA,cACZ;AAAA,cAEC;AAAA,4BACC;AAAA,kBAAC;AAAA;AAAA,oBACC,OAAM;AAAA,oBACN,QAAO;AAAA,oBACP,SAAQ;AAAA,oBACR,UAAS;AAAA,oBACT,OAAO;AAAA,sBACL,UAAU;AAAA,sBACV,KAAK;AAAA,sBACL,MAAM;AAAA,sBACN,QAAQ;AAAA,sBACR,OAAO;AAAA,oBACT;AAAA,oBACA,OAAM;AAAA,oBAEN,8BAAC,WAAQ,MAAK,KAAI,OAAO,EAAE,OAAO,IAAI,QAAQ,GAAG,GAAG;AAAA;AAAA,gBACtD,IACE;AAAA,gBAEJ;AAAA,kBAAC;AAAA;AAAA,oBACC,iBAAe;AAAA,oBACf,SAAS,MAAM;AACb,mCAAa,KAAK;AAAA,oBACpB;AAAA,oBACA,QAAQ,MAAM;AACZ,mCAAa,KAAK;AAAA,oBACpB;AAAA,oBACA,KAAK,GAAG,MAAM,GAAG;AAAA,oBACjB,OAAO,EAAE,OAAO,QAAQ,QAAQ,QAAQ,QAAQ,OAAO;AAAA,oBACvD,OAAM;AAAA;AAAA,gBACR;AAAA;AAAA;AAAA,UACF,GACF;AAAA;AAAA,MACF;AAAA,OACF;AAAA,EAEJ;AACA,SAAO;AACT;AASA,SAAS,4BAA4B;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAyD;AACvD,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,OAAO,EAAE,OAAO,QAAQ,QAAQ,QAAS,WAAW,OAAM;AAAA,MAC1D,SAAQ;AAAA,MAER,+BAAC,QAAK,OAAM,UAAS,KAAI,KAAI,OAAM,QAChC;AAAA;AAAA,QACD,oBAAC,aAAU,aAAY,YAAW,MAAK,KAAI;AAAA,QAC3C,qBAAC,OACC;AAAA,8BAAC,QAAK,IAAG,OACN,iBACH;AAAA,UACC,OAAO,gBAAgB,YAAY,gBAAgB,KAClD,oBAAC,QAAK,SAAQ,WACX,uBACH,IACE;AAAA,WACN;AAAA,SAEF;AAAA;AAAA,EACF;AAEJ;","names":[]}
+{"version":3,"sources":["../src/molecules/training-info-guideline.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { FileTextIcon, VideoIcon } from '@radix-ui/react-icons';\nimport { AspectRatio } from '@/atoms/aspect-ratio';\nimport { Button } from '@/atoms/button';\nimport type { TrainingInfoGuidelineContents } from '@/types/training-info-guideline-schema-generated';\nimport { Dialog } from '@/atoms/dialog';\nimport { Spinner } from '@/atoms/spinner';\nimport { Box } from '@/atoms/box';\nimport { Separator } from '@/atoms/separator';\nimport { Typo } from '@/atoms/typo';\nimport { Flex } from '../atoms/flex';\n\nexport interface TrainingInfoGuidelineProps {\n  values: TrainingInfoGuidelineContents['values'];\n  onClickFileDownload: (args: { url: string; filename: string }) => void;\n}\n\nexport function TrainingInfoGuideline({\n  values,\n  onClickFileDownload,\n}: TrainingInfoGuidelineProps): React.ReactElement {\n  return (\n    <>\n      {values.map((value) => (\n        <TrainingInfoGuidelineItem\n          key={getItemKey(value)}\n          onClickFileDownload={onClickFileDownload}\n          value={value}\n        />\n      ))}\n    </>\n  );\n}\n\ntype TrainingInfoGuidelineValue =\n  TrainingInfoGuidelineContents['values'][number];\n\nfunction getItemKey(value: TrainingInfoGuidelineValue): string {\n  return value.url;\n}\n\ninterface TrainingInfoGuidelineItemProps {\n  value: TrainingInfoGuidelineValue;\n  onClickFileDownload: TrainingInfoGuidelineProps['onClickFileDownload'];\n}\n\nfunction TrainingInfoGuidelineItem({\n  value,\n  onClickFileDownload,\n}: TrainingInfoGuidelineItemProps): React.ReactElement | null {\n  const [isLoading, setIsLoading] = useState(true);\n\n  if (value.type === 'file') {\n    return (\n      <TrainingInfoGuidelineButton\n        description=\"파일 다운로드\"\n        icon={<FileTextIcon />}\n        onClick={() => {\n          onClickFileDownload({ url: value.url, filename: value.filename });\n        }}\n        title={value.downloadButtonName}\n      />\n    );\n  }\n\n  if (value.type === 'youtube-shorts') {\n    return (\n      <TrainingInfoGuidelineButton\n        description=\"TIPP 쇼츠 보기\"\n        icon={<VideoIcon />}\n        onClick={() => {\n          window.open(value.url, '_blank');\n        }}\n        title={value.title}\n      />\n    );\n  }\n\n  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- 차후 다른 타입 추가 시 사용\n  if (value.type === 'video') {\n    return (\n      <Dialog.Root>\n        <Dialog.Trigger>\n          <TrainingInfoGuidelineButton\n            description=\"영상 자료\"\n            icon={<VideoIcon />}\n            title={value.videoTitle}\n          />\n        </Dialog.Trigger>\n        <Dialog.Content\n          height=\"100%\"\n          maxHeight=\"500px\"\n          maxWidth=\"800px\"\n          title={value.videoTitle}\n          width=\"100%\"\n        >\n          <AspectRatio ratio={16 / 9} style={{ width: '100%' }}>\n            <Flex\n              align=\"center\"\n              justify=\"center\"\n              style={{\n                width: '100%',\n                height: '100%',\n                backgroundColor: 'black',\n                position: 'relative',\n              }}\n            >\n              {isLoading ? (\n                <Flex\n                  align=\"center\"\n                  height=\"100%\"\n                  justify=\"center\"\n                  position=\"absolute\"\n                  style={{\n                    position: 'absolute',\n                    top: 0,\n                    left: 0,\n                    zIndex: 1,\n                    color: 'white',\n                  }}\n                  width=\"100%\"\n                >\n                  <Spinner size=\"3\" style={{ width: 48, height: 48 }} />\n                </Flex>\n              ) : null}\n\n              <iframe\n                allowFullScreen\n                onError={() => {\n                  setIsLoading(false);\n                }} // 필요시 에러 메시지로 대체\n                onLoad={() => {\n                  setIsLoading(false);\n                }}\n                src={`${value.url}?theme=light`}\n                style={{ width: '100%', height: '100%', border: 'none' }}\n                title=\"Curriculum Video\"\n              />\n            </Flex>\n          </AspectRatio>\n        </Dialog.Content>\n      </Dialog.Root>\n    );\n  }\n  return null;\n}\n\ninterface TrainingInfoGuidelineButtonProps {\n  icon: React.ReactNode;\n  title: string;\n  description?: string;\n  onClick?: () => void;\n}\n\nfunction TrainingInfoGuidelineButton({\n  icon,\n  title,\n  description,\n  onClick,\n}: TrainingInfoGuidelineButtonProps): React.ReactElement {\n  return (\n    <Button\n      onClick={onClick}\n      style={{\n        width: '100%',\n        height: 'auto',\n        minHeight: '48px',\n        textAlign: 'left',\n        paddingTop: 8,\n        paddingBottom: 8,\n      }}\n      variant=\"outline\"\n    >\n      <Flex align=\"center\" gap=\"2\" width=\"100%\">\n        <Flex align=\"center\" flexShrink=\"0\">{icon}</Flex>\n        <Separator orientation=\"vertical\" size=\"2\" style={{ flexShrink: 0 }} />\n        <Box flexGrow=\"1\" style={{ minWidth: 0 }}>\n          <Typo\n            as=\"div\"\n            style={{\n              whiteSpace: 'normal',\n              wordBreak: 'break-word',\n              overflowWrap: 'anywhere',\n            }}\n          >\n            {title}\n          </Typo>\n          {typeof description === 'string' && description !== '' ? (\n            <Typo\n              style={{\n                display: 'block',\n                whiteSpace: 'normal',\n                wordBreak: 'break-word',\n                overflowWrap: 'anywhere',\n              }}\n              variant=\"caption\"\n            >\n              {description}\n            </Typo>\n          ) : null}\n        </Box>\n      </Flex>\n    </Button>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/{chunk-JRSZNGFD.js → chunk-ZA4NYPSW.js}

@@ -1,15 +1,15 @@
 import {
   DynamicForm
-} from "./chunk-KCAOUZCT.js";
+} from "./chunk-GTO7GG2K.js";
+import {
+  Card
+} from "./chunk-RP2RGCAW.js";
 import {
   Typo
 } from "./chunk-PMJIFLDT.js";
 import {
   Flex
 } from "./chunk-25HMMI7R.js";
-import {
-  Card
-} from "./chunk-RP2RGCAW.js";
 
 // src/molecules/dynamic-form-editor-preview-panel.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -25,4 +25,4 @@ function DynamicFormEditorPreviewPanel(props) {
 export {
   DynamicFormEditorPreviewPanel
 };
-//# sourceMappingURL=chunk-JRSZNGFD.js.map
+//# sourceMappingURL=chunk-ZA4NYPSW.js.map

package/dist/context/index.js

@@ -4,12 +4,12 @@ import {
   useDynamicForm
 } from "../chunk-4U6DFH7Z.js";
 import "../chunk-QDC3LFHS.js";
+import "../chunk-BESTU2AY.js";
 import {
   UIStateContext,
   UIStateProvider,
   useUIState
 } from "../chunk-PT57HCAI.js";
-import "../chunk-BESTU2AY.js";
 import "../chunk-PMJIFLDT.js";
 import "../chunk-LDBWASUA.js";
 import "../chunk-CRTRMMJ7.js";

package/dist/index.cjs

@@ -6527,14 +6527,44 @@ function TrainingInfoGuidelineButton({
     Button,
     {
       onClick,
-      style: { width: "100%", height: "48px", textAlign: "left" },
+      style: {
+        width: "100%",
+        height: "auto",
+        minHeight: "48px",
+        textAlign: "left",
+        paddingTop: 8,
+        paddingBottom: 8
+      },
       variant: "outline",
       children: /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)(import_themes22.Flex, { align: "center", gap: "2", width: "100%", children: [
-        icon,
-        /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(import_themes39.Separator, { orientation: "vertical", size: "2" }),
-        /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)(import_themes6.Box, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(Typo, { as: "div", children: title }),
-          typeof description === "string" && description !== "" ? /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(Typo, { variant: "caption", children: description }) : null
+        /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(import_themes22.Flex, { align: "center", flexShrink: "0", children: icon }),
+        /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(import_themes39.Separator, { orientation: "vertical", size: "2", style: { flexShrink: 0 } }),
+        /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)(import_themes6.Box, { flexGrow: "1", style: { minWidth: 0 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
+            Typo,
+            {
+              as: "div",
+              style: {
+                whiteSpace: "normal",
+                wordBreak: "break-word",
+                overflowWrap: "anywhere"
+              },
+              children: title
+            }
+          ),
+          typeof description === "string" && description !== "" ? /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
+            Typo,
+            {
+              style: {
+                display: "block",
+                whiteSpace: "normal",
+                wordBreak: "break-word",
+                overflowWrap: "anywhere"
+              },
+              variant: "caption",
+              children: description
+            }
+          ) : null
         ] })
       ] })
     }
@@ -9281,25 +9311,25 @@ var ContentsCard = (0, import_react59.forwardRef)(
           height: "100%",
           width: "100%",
           display: "grid",
-          cursor: "pointer",
-          maxHeight: "450px"
+          cursor: "pointer"
         },
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(import_themes25.Inset, { clip: "padding-box", pb: "0", side: "top", children: /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(import_themes40.Skeleton, { loading: isLoading, children: /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
             import_themes6.Box,
             {
-              height: "210px",
               style: {
+                aspectRatio: "704 / 407",
                 backgroundImage: `url(${imageSrc})`,
                 backgroundSize: "cover",
-                backgroundPosition: "center"
+                backgroundPosition: "center",
+                backgroundRepeat: "no-repeat"
               },
               width: "100%"
             }
           ) }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime117.jsxs)(import_themes22.Flex, { direction: "column", p: "4", pb: "3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime117.jsxs)(import_themes22.Flex, { direction: "column", pb: "4", px: "3", py: "4", children: [
             /* @__PURE__ */ (0, import_jsx_runtime117.jsxs)(import_themes6.Box, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(import_themes40.Skeleton, { loading: isLoading, children: /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(Heading2, { mb: "3", variant: "heading5", children: title }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(import_themes40.Skeleton, { loading: isLoading, children: /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(Heading2, { variant: "heading5", children: title }) }),
               /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(import_themes40.Skeleton, { loading: isLoading, children: /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(Typo, { as: "p", variant: "caption", children: description }) })
             ] }),
             /* @__PURE__ */ (0, import_jsx_runtime117.jsxs)(
@@ -9308,7 +9338,7 @@ var ContentsCard = (0, import_react59.forwardRef)(
                 align: "center",
                 columns: "1fr auto",
                 justify: "between",
-                pt: "2",
+                pt: "4",
                 style: { marginTop: "auto" },
                 width: "100%",
                 children: [