@kkcompany/app-ui 0.1.7 → 0.1.9

package/dist/index.cjs

@@ -198,6 +198,7 @@ const tagBaseStyles = {
 		color: "var(--tag-color)",
 		justifyContent: "var(--tag-justify-content, flex-start)",
 		fontSize: "0.75rem",
+		wordBreak: "keep-all",
 		"> div": {
 			padding: "4px 6px",
 			borderRadius: "0.2em",
@@ -209,10 +210,12 @@ const tagBaseStyles = {
 		}
 	}
 };
+const tagTopStyles = { transformOrigin: "left top" };
 const tagBottomStyles = {
 	"--tag-justify-content": "flex-end",
 	"--tag-color": "#000",
-	"--tag-background": "#fff"
+	"--tag-background": "#fff",
+	transformOrigin: "right bottom"
 };
 const VideoThumbnail = ({ href, imageUrl, title, progress, topTags = [], bottomTags = [], children, slots = {}, onClick }) => {
 	const components = {
@@ -241,7 +244,10 @@ const VideoThumbnail = ({ href, imageUrl, title, progress, topTags = [], bottomT
 				}),
 				/* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsxs)("div", {
 					css: tagBaseStyles,
-					children: [/* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)("div", { children: topTags?.map((tag) => /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)("div", { children: tag }, tag)) }), bottomTags.length > 0 && /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)("div", {
+					children: [/* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)("div", {
+						css: tagTopStyles,
+						children: topTags?.map((tag) => /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)("div", { children: tag }, tag))
+					}), bottomTags.length > 0 && /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)("div", {
 						css: [tagBottomStyles, progress >= 0 && { marginBottom: "4px" }],
 						children: bottomTags?.map((tag) => /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)("div", { children: tag }, tag))
 					})]
@@ -270,14 +276,15 @@ const infoStyle = {
 	justifyContent: "space-between",
 	"> div:first-of-type": {
 		flex: "0 auto",
-		minWidth: "0"
+		minWidth: "0",
+		maxWidth: "9.125em"
 	},
 	"> a": {
 		display: "flex",
 		flexDirection: "column",
 		alignSelf: "stretch",
 		justifyContent: "center",
-		marginLeft: "0.75em",
+		marginLeft: "1rem",
 		height: "auto",
 		flex: "1"
 	},
@@ -289,11 +296,12 @@ const infoStyle = {
 			maxWidth: "16.25em"
 		},
 		"> a": {
-			marginLeft: "2.8125em",
+			marginLeft: "2.75em",
 			flex: "1",
 			minWidth: "0"
 		}
-	}
+	},
+	"@media (max-width: 600px)": { "> div:first-of-type > a > div:last-of-type > div": { scale: .6 } }
 };
 const titleStyle = {
 	display: "-webkit-box",

package/dist/index.d.cts

@@ -1,4 +1,4 @@
-import * as _emotion_react_jsx_runtime0 from "@emotion/react/jsx-runtime";
+import * as _emotion_react_jsx_runtime1 from "@emotion/react/jsx-runtime";
 import { CSSObject } from "@emotion/react";
 import { ElementType, MouseEventHandler, ReactElement, ReactNode } from "react";
 import Link from "next/link";
@@ -10,7 +10,7 @@ declare const Icon: ({
 }: {
   style?: {};
   src: any;
-}) => _emotion_react_jsx_runtime0.JSX.Element;
+}) => _emotion_react_jsx_runtime1.JSX.Element;
 //#endregion
 //#region src/SeeMore.d.ts
 declare const defaultMessages: {
@@ -26,7 +26,7 @@ declare const SeeMore: ({
   style?: CSSObject;
   messages?: typeof defaultMessages;
   children?: ReactNode;
-}) => _emotion_react_jsx_runtime0.JSX.Element;
+}) => _emotion_react_jsx_runtime1.JSX.Element;
 //#endregion
 //#region src/VideoItem.d.ts
 type VideoDetail = {
@@ -88,6 +88,6 @@ declare const VideoThumbnail: ({
     Image?: ElementType;
   };
   onClick?: MouseEventHandler<HTMLAnchorElement>;
-}) => _emotion_react_jsx_runtime0.JSX.Element;
+}) => _emotion_react_jsx_runtime1.JSX.Element;
 //#endregion
 export { Icon, SeeMore, VideoItem, VideoThumbnail };

package/dist/index.mjs

@@ -198,6 +198,7 @@ const tagBaseStyles = {
 		color: "var(--tag-color)",
 		justifyContent: "var(--tag-justify-content, flex-start)",
 		fontSize: "0.75rem",
+		wordBreak: "keep-all",
 		"> div": {
 			padding: "4px 6px",
 			borderRadius: "0.2em",
@@ -209,10 +210,12 @@ const tagBaseStyles = {
 		}
 	}
 };
+const tagTopStyles = { transformOrigin: "left top" };
 const tagBottomStyles = {
 	"--tag-justify-content": "flex-end",
 	"--tag-color": "#000",
-	"--tag-background": "#fff"
+	"--tag-background": "#fff",
+	transformOrigin: "right bottom"
 };
 const VideoThumbnail = ({ href, imageUrl, title, progress, topTags = [], bottomTags = [], children, slots = {}, onClick }) => {
 	const components = {
@@ -241,7 +244,10 @@ const VideoThumbnail = ({ href, imageUrl, title, progress, topTags = [], bottomT
 				}),
 				/* @__PURE__ */ jsxs("div", {
 					css: tagBaseStyles,
-					children: [/* @__PURE__ */ jsx("div", { children: topTags?.map((tag) => /* @__PURE__ */ jsx("div", { children: tag }, tag)) }), bottomTags.length > 0 && /* @__PURE__ */ jsx("div", {
+					children: [/* @__PURE__ */ jsx("div", {
+						css: tagTopStyles,
+						children: topTags?.map((tag) => /* @__PURE__ */ jsx("div", { children: tag }, tag))
+					}), bottomTags.length > 0 && /* @__PURE__ */ jsx("div", {
 						css: [tagBottomStyles, progress >= 0 && { marginBottom: "4px" }],
 						children: bottomTags?.map((tag) => /* @__PURE__ */ jsx("div", { children: tag }, tag))
 					})]
@@ -270,14 +276,15 @@ const infoStyle = {
 	justifyContent: "space-between",
 	"> div:first-of-type": {
 		flex: "0 auto",
-		minWidth: "0"
+		minWidth: "0",
+		maxWidth: "9.125em"
 	},
 	"> a": {
 		display: "flex",
 		flexDirection: "column",
 		alignSelf: "stretch",
 		justifyContent: "center",
-		marginLeft: "0.75em",
+		marginLeft: "1rem",
 		height: "auto",
 		flex: "1"
 	},
@@ -289,11 +296,12 @@ const infoStyle = {
 			maxWidth: "16.25em"
 		},
 		"> a": {
-			marginLeft: "2.8125em",
+			marginLeft: "2.75em",
 			flex: "1",
 			minWidth: "0"
 		}
-	}
+	},
+	"@media (max-width: 600px)": { "> div:first-of-type > a > div:last-of-type > div": { scale: .6 } }
 };
 const titleStyle = {
 	display: "-webkit-box",

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@kkcompany/app-ui",
-	"version": "0.1.7",
+	"version": "0.1.9",
 	"module": "dist/index.mjs",
 	"main": "dist/index.js",
 	"types": "dist/index.d.mts",