@kkcompany/app-ui 0.1.19 → 0.1.21

package/dist/index.cjs

@@ -249,18 +249,14 @@ const tagBaseStyles = {
 		fontSize: "10px",
 		wordBreak: "keep-all",
 		"> div": {
-			padding: "3px 6px",
+			padding: "0.3em 0.6em",
 			borderRadius: "2px",
 			fontWeight: 600,
 			background: "var(--tag-background)",
 			boxShadow: "0 2px 4px 0 rgba(0,0,0,0.25)",
-			height: "15px",
-			lineHeight: "15px",
-			"@media (max-width: 600px)": {
-				padding: "2px 4px",
-				height: "11px",
-				lineHeight: "11px"
-			}
+			minHeight: "15px",
+			display: "flex",
+			alignItems: "center"
 		}
 	}
 };
@@ -269,22 +265,10 @@ const tagBottomStyles = {
 	"--tag-color": "#000",
 	"--tag-background": "#fff"
 };
-const newTagStyles = {
-	width: "26px",
-	"@media (max-width: 600px)": { width: "18px" }
-};
-const onSaleTagStyles = {
-	width: "40px",
-	"@media (max-width: 600px)": { width: "28px" }
-};
-const freeTagStyles = {
-	width: "20px",
-	"@media (max-width: 600px)": { width: "14px" }
-};
-const megaTagStyles = {
-	width: "30px",
-	"@media (max-width: 600px)": { width: "21px" }
-};
+const newTagStyles = { minWidth: "26px" };
+const onSaleTagStyles = { minWidth: "40px" };
+const freeTagStyles = { minWidth: "20px" };
+const megaTagStyles = { minWidth: "30px" };
 const VideoThumbnail = ({ href, imageUrl, title, progress, topTags = [], bottomTags = [], children, slots = {}, onClick }) => {
 	const components = {
 		Link: "a",
@@ -376,13 +360,14 @@ const infoStyle = {
 			flex: "1",
 			minWidth: "0"
 		}
-	},
-	"@media (max-width: 600px)": { "> div:first-of-type > a > div:last-of-type > div": { fontSize: "7px" } }
+	}
 };
+const LINES_OF_TITLE = 2;
+const LINES_OF_DESCRIPTION = 2;
 const titleStyle = {
 	display: "-webkit-box",
 	WebkitBoxOrient: "vertical",
-	WebkitLineClamp: "2",
+	WebkitLineClamp: LINES_OF_TITLE,
 	overflow: "hidden",
 	textOverflow: "ellipsis"
 };
@@ -391,7 +376,7 @@ const descriptionStyle = {
 	display: "var(--description-display, -webkit-box)",
 	overflow: "hidden",
 	WebkitBoxOrient: "vertical",
-	WebkitLineClamp: "2",
+	WebkitLineClamp: LINES_OF_DESCRIPTION,
 	color: "#ccc",
 	textOverflow: "ellipsis",
 	fontSize: "14px",
@@ -405,7 +390,7 @@ const descriptionStyle = {
 const desktopDescriptionStyle = {
 	display: "var(--desktop-description-display, -webkit-box)",
 	margin: "0.75rem 0",
-	WebkitLineClamp: 3
+	WebkitLineClamp: LINES_OF_DESCRIPTION
 };
 const OptionalLink = ({ slots, href, children, ...rest }) => href ? /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)(slots.Link, {
 	href,

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_runtime2 from "@emotion/react/jsx-runtime";
 import { CSSObject } from "@emotion/react";
 import { ElementType, MouseEventHandler, ReactElement, ReactNode } from "react";
 import Link from "next/link";
@@ -17,7 +17,7 @@ declare const HiddenToggle: ({
   defaultEnabled?: boolean;
   children: any;
   onChange: any;
-}) => _emotion_react_jsx_runtime0.JSX.Element;
+}) => _emotion_react_jsx_runtime2.JSX.Element;
 //#endregion
 //#region src/Icon.d.ts
 declare const Icon: ({
@@ -26,7 +26,7 @@ declare const Icon: ({
 }: {
   style?: {};
   src: any;
-}) => _emotion_react_jsx_runtime0.JSX.Element;
+}) => _emotion_react_jsx_runtime2.JSX.Element;
 //#endregion
 //#region src/SeeMore.d.ts
 declare const defaultMessages: {
@@ -42,7 +42,7 @@ declare const SeeMore: ({
   style?: CSSObject;
   messages?: typeof defaultMessages;
   children?: ReactNode;
-}) => _emotion_react_jsx_runtime0.JSX.Element;
+}) => _emotion_react_jsx_runtime2.JSX.Element;
 //#endregion
 //#region src/VideoItem.d.ts
 type VideoDetail = {
@@ -106,6 +106,6 @@ declare const VideoThumbnail: ({
     Image?: ElementType;
   };
   onClick?: MouseEventHandler<HTMLAnchorElement>;
-}) => _emotion_react_jsx_runtime0.JSX.Element;
+}) => _emotion_react_jsx_runtime2.JSX.Element;
 //#endregion
 export { HiddenToggle, Icon, SeeMore, VideoItem, VideoThumbnail };

package/dist/index.mjs

@@ -249,18 +249,14 @@ const tagBaseStyles = {
 		fontSize: "10px",
 		wordBreak: "keep-all",
 		"> div": {
-			padding: "3px 6px",
+			padding: "0.3em 0.6em",
 			borderRadius: "2px",
 			fontWeight: 600,
 			background: "var(--tag-background)",
 			boxShadow: "0 2px 4px 0 rgba(0,0,0,0.25)",
-			height: "15px",
-			lineHeight: "15px",
-			"@media (max-width: 600px)": {
-				padding: "2px 4px",
-				height: "11px",
-				lineHeight: "11px"
-			}
+			minHeight: "15px",
+			display: "flex",
+			alignItems: "center"
 		}
 	}
 };
@@ -269,22 +265,10 @@ const tagBottomStyles = {
 	"--tag-color": "#000",
 	"--tag-background": "#fff"
 };
-const newTagStyles = {
-	width: "26px",
-	"@media (max-width: 600px)": { width: "18px" }
-};
-const onSaleTagStyles = {
-	width: "40px",
-	"@media (max-width: 600px)": { width: "28px" }
-};
-const freeTagStyles = {
-	width: "20px",
-	"@media (max-width: 600px)": { width: "14px" }
-};
-const megaTagStyles = {
-	width: "30px",
-	"@media (max-width: 600px)": { width: "21px" }
-};
+const newTagStyles = { minWidth: "26px" };
+const onSaleTagStyles = { minWidth: "40px" };
+const freeTagStyles = { minWidth: "20px" };
+const megaTagStyles = { minWidth: "30px" };
 const VideoThumbnail = ({ href, imageUrl, title, progress, topTags = [], bottomTags = [], children, slots = {}, onClick }) => {
 	const components = {
 		Link: "a",
@@ -376,13 +360,14 @@ const infoStyle = {
 			flex: "1",
 			minWidth: "0"
 		}
-	},
-	"@media (max-width: 600px)": { "> div:first-of-type > a > div:last-of-type > div": { fontSize: "7px" } }
+	}
 };
+const LINES_OF_TITLE = 2;
+const LINES_OF_DESCRIPTION = 2;
 const titleStyle = {
 	display: "-webkit-box",
 	WebkitBoxOrient: "vertical",
-	WebkitLineClamp: "2",
+	WebkitLineClamp: LINES_OF_TITLE,
 	overflow: "hidden",
 	textOverflow: "ellipsis"
 };
@@ -391,7 +376,7 @@ const descriptionStyle = {
 	display: "var(--description-display, -webkit-box)",
 	overflow: "hidden",
 	WebkitBoxOrient: "vertical",
-	WebkitLineClamp: "2",
+	WebkitLineClamp: LINES_OF_DESCRIPTION,
 	color: "#ccc",
 	textOverflow: "ellipsis",
 	fontSize: "14px",
@@ -405,7 +390,7 @@ const descriptionStyle = {
 const desktopDescriptionStyle = {
 	display: "var(--desktop-description-display, -webkit-box)",
 	margin: "0.75rem 0",
-	WebkitLineClamp: 3
+	WebkitLineClamp: LINES_OF_DESCRIPTION
 };
 const OptionalLink = ({ slots, href, children, ...rest }) => href ? /* @__PURE__ */ jsx(slots.Link, {
 	href,

package/package.json

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