@kkcompany/app-ui 0.1.25 → 0.1.27

package/dist/index.cjs

@@ -1,7 +1,340 @@
-let __emotion_react = require("@emotion/react");
 let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
 let __emotion_react_jsx_runtime = require("@emotion/react/jsx-runtime");
+let __emotion_react = require("@emotion/react");
+
+//#region src/Banner/helpers.tsx
+const getStyle = (position, offset, length) => {
+	return { transform: `translate3d(${(length > 2 ? -200 : 0) - position * 100}%, 0, 0) translate3d(${offset || 0}px, 0, 0)` };
+};
+const getIndex = (position, length) => {
+	if (length === 0) return 0;
+	return (position % length + length) % length;
+};
+const getItems = (children) => {
+	const arr = react.Children.toArray(children);
+	const len = arr.length;
+	return (len > 2 ? [
+		arr[len - 2],
+		arr[len - 1],
+		...arr,
+		arr[0],
+		arr[1]
+	] : arr).map((item, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "banner-item",
+		children: item
+	}, `kks-banner_${index}`));
+};
+
+//#endregion
+//#region src/Banner/reducer.ts
+const initialState = {
+	position: 0,
+	animating: false,
+	dragOffset: 0
+};
+const reducer = (state, action) => {
+	switch (action.type) {
+		case "JUMP_TO":
+			if (state.animating) return state;
+			return {
+				position: action.payload.position,
+				animating: true,
+				dragOffset: 0
+			};
+		case "SETTLE": {
+			const { itemsLength } = action.payload;
+			return {
+				position: getIndex(state.position, itemsLength),
+				animating: false,
+				dragOffset: 0
+			};
+		}
+		case "DRAG": return {
+			...state,
+			dragOffset: action.payload.dragOffset
+		};
+		default: return state;
+	}
+};
+
+//#endregion
+//#region src/Banner/styles.ts
+const iconSizeMd = "50px";
+const iconSizeXl = "60px";
+const iconOffset = "20%";
+const dotSize = "8px";
+const arrowLeftIcon = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4gICAgPGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4gICAgICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIG9wYWNpdHk9Ii41Ii8+ICAgICAgICA8cGF0aCBmaWxsPSIjNjY2IiBmaWxsLXJ1bGU9Im5vbnplcm8iIGQ9Ik0xNS40MDkgMy44NThhMS4yNSAxLjI1IDAgMCAwLTEuODE4LTEuNzE2bC04LjUgOWExLjI1IDEuMjUgMCAwIDAgMCAxLjcxNmw4LjUgOWExLjI1IDEuMjUgMCAxIDAgMS44MTgtMS43MTZMNy43MTkgMTJsNy42OS04LjE0MnoiLz4gICAgPC9nPjwvc3ZnPg==";
+const arrowRightIcon = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4gICAgPGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4gICAgICAgIDxwYXRoIGQ9Ik0yNCAwSDB2MjRoMjR6IiBvcGFjaXR5PSIuNSIvPiAgICAgICAgPHBhdGggZmlsbD0iIzY2NiIgZmlsbC1ydWxlPSJub256ZXJvIiBkPSJNOC41OTEgMy44NThhMS4yNSAxLjI1IDAgMCAxIDEuODE4LTEuNzE2bDguNSA5YTEuMjUgMS4yNSAwIDAgMSAwIDEuNzE2bC04LjUgOWExLjI1IDEuMjUgMCAxIDEtMS44MTgtMS43MTZMMTYuMjgxIDEyIDguNTkgMy44NTh6Ii8+ICAgIDwvZz48L3N2Zz4=";
+const arrowLeftIconActive = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4gICAgPGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4gICAgICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIG9wYWNpdHk9Ii41Ii8+ICAgICAgICA8cGF0aCBmaWxsPSIjMDBBMUIzIiBmaWxsLXJ1bGU9Im5vbnplcm8iIGQ9Ik0xNS40MDkgMy44NThhMS4yNSAxLjI1IDAgMCAwLTEuODE4LTEuNzE2bC04LjUgOWExLjI1IDEuMjUgMCAwIDAgMCAxLjcxNmw4LjUgOWExLjI1IDEuMjUgMCAxIDAgMS44MTgtMS43MTZMNy43MTkgMTJsNy42OS04LjE0MnoiLz4gICAgPC9nPjwvc3ZnPg==";
+const arrowRightIconActive = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4gICAgPGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4gICAgICAgIDxwYXRoIGQ9Ik0yNCAwSDB2MjRoMjR6IiBvcGFjaXR5PSIuNSIvPiAgICAgICAgPHBhdGggZmlsbD0iIzAwQTFCMyIgZmlsbC1ydWxlPSJub256ZXJvIiBkPSJNOC41OTEgMy44NThhMS4yNSAxLjI1IDAgMCAxIDEuODE4LTEuNzE2bDguNSA5YTEuMjUgMS4yNSAwIDAgMSAwIDEuNzE2bC04LjUgOWExLjI1IDEuMjUgMCAxIDEtMS44MTgtMS43MTZMMTYuMjgxIDEyIDguNTkgMy44NTh6Ii8+ICAgIDwvZz48L3N2Zz4=";
+const bannerStyle = {
+	position: "relative",
+	width: "100%",
+	whiteSpace: "nowrap",
+	overflow: "hidden",
+	userSelect: "none",
+	".slider-anim": { transition: "transform 0.35s ease-out" },
+	".icon-overlay": { display: "none" },
+	".banner-item": {
+		display: "inline-block",
+		width: "100%"
+	},
+	".indicator": {
+		position: "absolute",
+		left: "50%",
+		bottom: "5%",
+		transform: "translateX(-50%)",
+		textAlign: "center",
+		button: {
+			display: "inline-block",
+			margin: "0 5px",
+			height: dotSize,
+			width: dotSize,
+			border: 0,
+			padding: 0,
+			borderRadius: "4px",
+			backgroundColor: "#fff",
+			opacity: .5,
+			appearance: "none",
+			outline: "none",
+			cursor: "pointer"
+		},
+		"button.selected": {
+			width: "20px",
+			opacity: 1
+		}
+	},
+	"@media (min-width: 768px)": {
+		".slider-mask": { padding: "0 18%" },
+		".icon-overlay": {
+			position: "absolute",
+			top: 0,
+			bottom: 0,
+			display: "flex",
+			alignItems: "center",
+			width: "17%",
+			zIndex: 30,
+			"&.left": {
+				left: 0,
+				justifyContent: "flex-start",
+				backgroundImage: "linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5))"
+			},
+			"&.right": {
+				right: 0,
+				justifyContent: "flex-end",
+				backgroundImage: "linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5))"
+			},
+			"&.left .icon": {
+				marginLeft: iconOffset,
+				background: `url('${arrowLeftIcon}') no-repeat center`
+			},
+			"&.right .icon": {
+				marginRight: iconOffset,
+				background: `url('${arrowRightIcon}') no-repeat center`
+			},
+			"&.left .icon, &.right .icon": {
+				width: iconSizeMd,
+				height: iconSizeMd,
+				border: 0,
+				padding: 0,
+				borderRadius: "50%",
+				backgroundColor: "#fff",
+				appearance: "none",
+				outline: "none",
+				cursor: "pointer"
+			},
+			"&.left .icon:hover, &.left .icon:focus": { backgroundImage: `url('${arrowLeftIconActive}')` },
+			"&.right .icon:hover, &.right .icon:focus": { backgroundImage: `url('${arrowRightIconActive}')` }
+		},
+		".banner-item": {
+			padding: "0 4px",
+			boxSizing: "border-box"
+		},
+		".indicator button": { "&:hover, &:focus": { opacity: 1 } }
+	},
+	"@media (min-width: 1600px)": { ".icon-overlay": { "&.left .icon, &.right .icon": {
+		width: iconSizeXl,
+		height: iconSizeXl
+	} } }
+};
+
+//#endregion
+//#region src/Banner/useAutoplay.ts
+const useAutoplay = ({ enabled, interval, onTick }) => {
+	const onTickRef = (0, react.useRef)(onTick);
+	const [paused, setPaused] = (0, react.useState)(false);
+	const [resetCounter, setResetCounter] = (0, react.useState)(0);
+	(0, react.useEffect)(() => {
+		onTickRef.current = onTick;
+	}, [onTick]);
+	(0, react.useEffect)(() => {
+		if (!enabled || paused) return void 0;
+		const id = setInterval(() => onTickRef.current(), interval);
+		return () => clearInterval(id);
+	}, [
+		enabled,
+		interval,
+		paused,
+		resetCounter
+	]);
+	return {
+		pause: (0, react.useCallback)(() => setPaused(true), []),
+		resume: (0, react.useCallback)(() => setPaused(false), []),
+		reset: (0, react.useCallback)(() => {
+			setPaused(false);
+			setResetCounter((n) => n + 1);
+		}, [])
+	};
+};
 
+//#endregion
+//#region src/Banner/index.tsx
+/** @jsxImportSource @emotion/react */
+const getEventPageX = (evt) => {
+	const { pageX, targetTouches } = evt;
+	return pageX !== void 0 ? pageX : targetTouches[0].pageX;
+};
+const BannerRender = ({ children, className = "", autoplay = false, autoplayInterval = 5e3, pauseOnHover = false }, ref) => {
+	const items = (0, react.useMemo)(() => getItems(children), [children]);
+	const itemsLength = (0, react.useMemo)(() => react.Children.count(children), [children]);
+	const [state, dispatch] = (0, react.useReducer)(reducer, initialState);
+	const rootRef = (0, react.useRef)(null);
+	const dragRef = (0, react.useRef)({
+		dragging: false,
+		dragXFrom: -1,
+		dragXTo: -1
+	});
+	(0, react.useImperativeHandle)(ref, () => rootRef.current, []);
+	const indicator = getIndex(state.position, itemsLength);
+	const currentPosition = state.animating ? state.position : indicator;
+	const animStyle = getStyle(currentPosition, state.dragOffset, itemsLength);
+	const enabled = autoplay && itemsLength >= 2;
+	const hasPrev = itemsLength > 2 || currentPosition - 1 >= 0;
+	const hasNext = itemsLength > 2 || currentPosition + 1 < itemsLength;
+	const jumpTo = (0, react.useCallback)((position) => dispatch({
+		type: "JUMP_TO",
+		payload: {
+			position,
+			itemsLength
+		}
+	}), [itemsLength]);
+	const { pause, resume, reset } = useAutoplay({
+		enabled,
+		interval: autoplayInterval,
+		onTick: (0, react.useCallback)(() => {
+			jumpTo(hasNext ? currentPosition + 1 : currentPosition - 1);
+		}, [
+			hasNext,
+			currentPosition,
+			jumpTo
+		])
+	});
+	const handleArrowBtnClick = (nextPos) => {
+		pause();
+		jumpTo(nextPos);
+	};
+	const handleIndicatorClick = (targetPos) => () => {
+		if (targetPos !== currentPosition) {
+			pause();
+			jumpTo(targetPos);
+			return;
+		}
+		reset();
+	};
+	const handleTouchStart = (evt) => {
+		pause();
+		const pageX = getEventPageX(evt);
+		dragRef.current = {
+			dragging: true,
+			dragXFrom: pageX,
+			dragXTo: pageX
+		};
+	};
+	const handleTouchMove = (evt) => {
+		if (!dragRef.current.dragging) return;
+		const pageX = getEventPageX(evt);
+		dragRef.current.dragXTo = pageX;
+		dispatch({
+			type: "DRAG",
+			payload: { dragOffset: pageX - dragRef.current.dragXFrom }
+		});
+	};
+	const handleTouchEnd = (evt) => {
+		const { dragXFrom, dragXTo } = dragRef.current;
+		const triggerWidth = evt.currentTarget.clientWidth / 4;
+		const movingVector = dragXTo - dragXFrom;
+		const movingWidth = Math.abs(movingVector);
+		if (movingVector > 0 && movingWidth > triggerWidth && hasPrev) jumpTo(currentPosition - 1);
+		else if (movingVector < 0 && movingWidth > triggerWidth && hasNext) jumpTo(currentPosition + 1);
+		else if (movingVector !== 0) jumpTo(currentPosition);
+		else resume();
+		dragRef.current = {
+			dragging: false,
+			dragXFrom: -1,
+			dragXTo: -1
+		};
+	};
+	const handleTransitionEnd = (evt) => {
+		if (evt.target !== evt.currentTarget || evt.propertyName !== "transform") return;
+		dispatch({
+			type: "SETTLE",
+			payload: { itemsLength }
+		});
+		resume();
+	};
+	if (itemsLength === 0) return null;
+	return /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsxs)("div", {
+		ref: rootRef,
+		css: bannerStyle,
+		className: `kks-banner ${className}`,
+		onMouseEnter: enabled && pauseOnHover ? pause : void 0,
+		onMouseLeave: enabled && pauseOnHover ? resume : void 0,
+		onTouchStart: handleTouchStart,
+		onTouchMove: handleTouchMove,
+		onTouchEnd: handleTouchEnd,
+		children: [
+			hasPrev && /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)("div", {
+				className: "left icon-overlay",
+				children: /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)("button", {
+					type: "button",
+					className: "icon",
+					onClick: () => handleArrowBtnClick(currentPosition - 1)
+				})
+			}),
+			/* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)("div", {
+				className: "slider-mask",
+				children: /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)("div", {
+					className: state.animating ? "slider-anim" : "",
+					style: animStyle,
+					onTransitionEnd: handleTransitionEnd,
+					children: items
+				})
+			}),
+			hasNext && /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)("div", {
+				className: "right icon-overlay",
+				children: /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)("button", {
+					type: "button",
+					className: "icon",
+					onClick: () => handleArrowBtnClick(currentPosition + 1)
+				})
+			}),
+			/* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)("div", {
+				className: "indicator",
+				children: Array.from({ length: itemsLength }, (_, i) => /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)("button", {
+					type: "button",
+					className: i === indicator ? "selected" : "",
+					onClick: handleIndicatorClick(i)
+				}, `kks-banner_indicator_${i}`))
+			})
+		]
+	});
+};
+const Banner = (0, react.forwardRef)(BannerRender);
+Banner.displayName = "Banner";
+var Banner_default = Banner;
+
+//#endregion
 //#region src/Dropdown.tsx
 /** @jsxImportSource @emotion/react  */
 const dropdownStyle = __emotion_react.css`
@@ -450,6 +783,16 @@ const onResize = (container, handler) => {
 	observer.observe(container);
 	return () => observer.disconnect();
 };
+const getLineCount = (el) => {
+	const style = window.getComputedStyle(el);
+	let lineHeight = Number.parseFloat(style.lineHeight);
+	if (Number.isNaN(lineHeight) || lineHeight <= 0) {
+		const fontSize = Number.parseFloat(style.fontSize);
+		lineHeight = fontSize > 0 ? fontSize * 1.2 : 0;
+	}
+	if (!lineHeight) return 0;
+	return Math.max(1, Math.round(el.scrollHeight / lineHeight));
+};
 const defaultMessages = {
 	seeMore: "もっと見る",
 	seeLess: "閉じる"
@@ -457,15 +800,16 @@ const defaultMessages = {
 const SeeMore = ({ style, messages = defaultMessages, children, ...rest }) => {
 	const [status, setStatus] = (0, react.useState)("no-expand");
 	const [expandedHeight, setExpandedHeight] = (0, react.useState)();
+	const rootRef = (0, react.useRef)(null);
 	const containeRef = (0, react.useRef)();
 	(0, react.useEffect)(() => {
-		if (!containeRef.current) return;
-		return onResize(containeRef.current, () => {
+		if (!rootRef.current) return;
+		return onResize(rootRef.current, () => {
 			if (!containeRef.current) return;
-			const { scrollHeight, clientHeight } = containeRef.current;
-			const fontSize = Number.parseFloat(window.getComputedStyle(containeRef.current).fontSize);
-			const scrollable = scrollHeight > clientHeight * 1.3;
-			const fit = fontSize * 3 > scrollHeight;
+			const collapsedLines = Number.parseInt(window.getComputedStyle(containeRef.current).getPropertyValue("--see-more-collapsed-lines"), 10) || 2;
+			const lineCount = getLineCount(containeRef.current);
+			const scrollable = lineCount > collapsedLines;
+			const fit = lineCount <= collapsedLines;
 			setStatus((current) => current === "no-expand" && scrollable ? "collapsed" : current !== "no-expand" && fit ? "no-expand" : current);
 			setExpandedHeight(containeRef.current?.scrollHeight);
 		});
@@ -473,6 +817,7 @@ const SeeMore = ({ style, messages = defaultMessages, children, ...rest }) => {
 	const toggle = () => setStatus((current) => current === "collapsed" ? "expanded" : "collapsing");
 	return /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsxs)("div", {
 		css: [containerStyle, { div: addonStyles[status] }],
+		ref: rootRef,
 		...rest,
 		children: [/* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsxs)("div", {
 			css: [expandedHeight && { "--see-more-max-height": `${expandedHeight}px` }, style],
@@ -726,6 +1071,7 @@ const VideoItem = ({ style, href = "", thumbnailHref = href, imageUrl = "", data
 var VideoItem_default = VideoItem;
 
 //#endregion
+exports.Banner = Banner_default;
 exports.Dropdown = Dropdown_default;
 exports.HiddenToggle = HiddenToggle_default;
 exports.Icon = Icon_default;

package/dist/index.d.cts

@@ -1,8 +1,19 @@
+import * as react0 from "react";
 import { ElementType, MouseEventHandler, ReactElement, ReactNode } from "react";
-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 Link from "next/link";
 
+//#region src/Banner/index.d.ts
+type BannerProps = {
+  children: ReactNode;
+  className?: string;
+  autoplay?: boolean;
+  autoplayInterval?: number;
+  pauseOnHover?: boolean;
+};
+declare const Banner: react0.ForwardRefExoticComponent<BannerProps & react0.RefAttributes<HTMLDivElement>>;
+//#endregion
 //#region src/Dropdown.d.ts
 type DropdownOption = {
   id?: string | number;
@@ -54,7 +65,7 @@ declare const HiddenToggle: ({
   defaultEnabled?: boolean;
   children: any;
   onChange: any;
-}) => _emotion_react_jsx_runtime0.JSX.Element;
+}) => _emotion_react_jsx_runtime1.JSX.Element;
 //#endregion
 //#region src/Icon.d.ts
 declare const Icon: ({
@@ -63,7 +74,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: {
@@ -79,7 +90,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 = {
@@ -143,6 +154,6 @@ declare const VideoThumbnail: ({
     Image?: ElementType;
   };
   onClick?: MouseEventHandler<HTMLAnchorElement>;
-}) => _emotion_react_jsx_runtime0.JSX.Element;
+}) => _emotion_react_jsx_runtime1.JSX.Element;
 //#endregion
-export { Dropdown, HiddenToggle, Icon, SeeMore, VideoItem, VideoThumbnail };
+export { Banner, Dropdown, HiddenToggle, Icon, SeeMore, VideoItem, VideoThumbnail };

package/dist/index.d.mts

@@ -1,8 +1,19 @@
-import { CSSObject } from "@emotion/react";
+import * as react0 from "react";
 import { ElementType, MouseEventHandler, ReactElement, ReactNode } from "react";
 import * as _emotion_react_jsx_runtime1 from "@emotion/react/jsx-runtime";
+import { CSSObject } from "@emotion/react";
 import Link from "next/link";
 
+//#region src/Banner/index.d.ts
+type BannerProps = {
+  children: ReactNode;
+  className?: string;
+  autoplay?: boolean;
+  autoplayInterval?: number;
+  pauseOnHover?: boolean;
+};
+declare const Banner: react0.ForwardRefExoticComponent<BannerProps & react0.RefAttributes<HTMLDivElement>>;
+//#endregion
 //#region src/Dropdown.d.ts
 type DropdownOption = {
   id?: string | number;
@@ -145,4 +156,4 @@ declare const VideoThumbnail: ({
   onClick?: MouseEventHandler<HTMLAnchorElement>;
 }) => _emotion_react_jsx_runtime1.JSX.Element;
 //#endregion
-export { Dropdown, HiddenToggle, Icon, SeeMore, VideoItem, VideoThumbnail };
+export { Banner, Dropdown, HiddenToggle, Icon, SeeMore, VideoItem, VideoThumbnail };

package/dist/index.mjs

@@ -1,7 +1,340 @@
+import { Children, forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useReducer, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { jsx as jsx$1, jsxs } from "@emotion/react/jsx-runtime";
 import { css } from "@emotion/react";
-import { useEffect, useRef, useState } from "react";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 
+//#region src/Banner/helpers.tsx
+const getStyle = (position, offset, length) => {
+	return { transform: `translate3d(${(length > 2 ? -200 : 0) - position * 100}%, 0, 0) translate3d(${offset || 0}px, 0, 0)` };
+};
+const getIndex = (position, length) => {
+	if (length === 0) return 0;
+	return (position % length + length) % length;
+};
+const getItems = (children) => {
+	const arr = Children.toArray(children);
+	const len = arr.length;
+	return (len > 2 ? [
+		arr[len - 2],
+		arr[len - 1],
+		...arr,
+		arr[0],
+		arr[1]
+	] : arr).map((item, index) => /* @__PURE__ */ jsx("div", {
+		className: "banner-item",
+		children: item
+	}, `kks-banner_${index}`));
+};
+
+//#endregion
+//#region src/Banner/reducer.ts
+const initialState = {
+	position: 0,
+	animating: false,
+	dragOffset: 0
+};
+const reducer = (state, action) => {
+	switch (action.type) {
+		case "JUMP_TO":
+			if (state.animating) return state;
+			return {
+				position: action.payload.position,
+				animating: true,
+				dragOffset: 0
+			};
+		case "SETTLE": {
+			const { itemsLength } = action.payload;
+			return {
+				position: getIndex(state.position, itemsLength),
+				animating: false,
+				dragOffset: 0
+			};
+		}
+		case "DRAG": return {
+			...state,
+			dragOffset: action.payload.dragOffset
+		};
+		default: return state;
+	}
+};
+
+//#endregion
+//#region src/Banner/styles.ts
+const iconSizeMd = "50px";
+const iconSizeXl = "60px";
+const iconOffset = "20%";
+const dotSize = "8px";
+const arrowLeftIcon = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4gICAgPGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4gICAgICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIG9wYWNpdHk9Ii41Ii8+ICAgICAgICA8cGF0aCBmaWxsPSIjNjY2IiBmaWxsLXJ1bGU9Im5vbnplcm8iIGQ9Ik0xNS40MDkgMy44NThhMS4yNSAxLjI1IDAgMCAwLTEuODE4LTEuNzE2bC04LjUgOWExLjI1IDEuMjUgMCAwIDAgMCAxLjcxNmw4LjUgOWExLjI1IDEuMjUgMCAxIDAgMS44MTgtMS43MTZMNy43MTkgMTJsNy42OS04LjE0MnoiLz4gICAgPC9nPjwvc3ZnPg==";
+const arrowRightIcon = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4gICAgPGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4gICAgICAgIDxwYXRoIGQ9Ik0yNCAwSDB2MjRoMjR6IiBvcGFjaXR5PSIuNSIvPiAgICAgICAgPHBhdGggZmlsbD0iIzY2NiIgZmlsbC1ydWxlPSJub256ZXJvIiBkPSJNOC41OTEgMy44NThhMS4yNSAxLjI1IDAgMCAxIDEuODE4LTEuNzE2bDguNSA5YTEuMjUgMS4yNSAwIDAgMSAwIDEuNzE2bC04LjUgOWExLjI1IDEuMjUgMCAxIDEtMS44MTgtMS43MTZMMTYuMjgxIDEyIDguNTkgMy44NTh6Ii8+ICAgIDwvZz48L3N2Zz4=";
+const arrowLeftIconActive = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4gICAgPGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4gICAgICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIG9wYWNpdHk9Ii41Ii8+ICAgICAgICA8cGF0aCBmaWxsPSIjMDBBMUIzIiBmaWxsLXJ1bGU9Im5vbnplcm8iIGQ9Ik0xNS40MDkgMy44NThhMS4yNSAxLjI1IDAgMCAwLTEuODE4LTEuNzE2bC04LjUgOWExLjI1IDEuMjUgMCAwIDAgMCAxLjcxNmw4LjUgOWExLjI1IDEuMjUgMCAxIDAgMS44MTgtMS43MTZMNy43MTkgMTJsNy42OS04LjE0MnoiLz4gICAgPC9nPjwvc3ZnPg==";
+const arrowRightIconActive = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4gICAgPGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4gICAgICAgIDxwYXRoIGQ9Ik0yNCAwSDB2MjRoMjR6IiBvcGFjaXR5PSIuNSIvPiAgICAgICAgPHBhdGggZmlsbD0iIzAwQTFCMyIgZmlsbC1ydWxlPSJub256ZXJvIiBkPSJNOC41OTEgMy44NThhMS4yNSAxLjI1IDAgMCAxIDEuODE4LTEuNzE2bDguNSA5YTEuMjUgMS4yNSAwIDAgMSAwIDEuNzE2bC04LjUgOWExLjI1IDEuMjUgMCAxIDEtMS44MTgtMS43MTZMMTYuMjgxIDEyIDguNTkgMy44NTh6Ii8+ICAgIDwvZz48L3N2Zz4=";
+const bannerStyle = {
+	position: "relative",
+	width: "100%",
+	whiteSpace: "nowrap",
+	overflow: "hidden",
+	userSelect: "none",
+	".slider-anim": { transition: "transform 0.35s ease-out" },
+	".icon-overlay": { display: "none" },
+	".banner-item": {
+		display: "inline-block",
+		width: "100%"
+	},
+	".indicator": {
+		position: "absolute",
+		left: "50%",
+		bottom: "5%",
+		transform: "translateX(-50%)",
+		textAlign: "center",
+		button: {
+			display: "inline-block",
+			margin: "0 5px",
+			height: dotSize,
+			width: dotSize,
+			border: 0,
+			padding: 0,
+			borderRadius: "4px",
+			backgroundColor: "#fff",
+			opacity: .5,
+			appearance: "none",
+			outline: "none",
+			cursor: "pointer"
+		},
+		"button.selected": {
+			width: "20px",
+			opacity: 1
+		}
+	},
+	"@media (min-width: 768px)": {
+		".slider-mask": { padding: "0 18%" },
+		".icon-overlay": {
+			position: "absolute",
+			top: 0,
+			bottom: 0,
+			display: "flex",
+			alignItems: "center",
+			width: "17%",
+			zIndex: 30,
+			"&.left": {
+				left: 0,
+				justifyContent: "flex-start",
+				backgroundImage: "linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5))"
+			},
+			"&.right": {
+				right: 0,
+				justifyContent: "flex-end",
+				backgroundImage: "linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5))"
+			},
+			"&.left .icon": {
+				marginLeft: iconOffset,
+				background: `url('${arrowLeftIcon}') no-repeat center`
+			},
+			"&.right .icon": {
+				marginRight: iconOffset,
+				background: `url('${arrowRightIcon}') no-repeat center`
+			},
+			"&.left .icon, &.right .icon": {
+				width: iconSizeMd,
+				height: iconSizeMd,
+				border: 0,
+				padding: 0,
+				borderRadius: "50%",
+				backgroundColor: "#fff",
+				appearance: "none",
+				outline: "none",
+				cursor: "pointer"
+			},
+			"&.left .icon:hover, &.left .icon:focus": { backgroundImage: `url('${arrowLeftIconActive}')` },
+			"&.right .icon:hover, &.right .icon:focus": { backgroundImage: `url('${arrowRightIconActive}')` }
+		},
+		".banner-item": {
+			padding: "0 4px",
+			boxSizing: "border-box"
+		},
+		".indicator button": { "&:hover, &:focus": { opacity: 1 } }
+	},
+	"@media (min-width: 1600px)": { ".icon-overlay": { "&.left .icon, &.right .icon": {
+		width: iconSizeXl,
+		height: iconSizeXl
+	} } }
+};
+
+//#endregion
+//#region src/Banner/useAutoplay.ts
+const useAutoplay = ({ enabled, interval, onTick }) => {
+	const onTickRef = useRef(onTick);
+	const [paused, setPaused] = useState(false);
+	const [resetCounter, setResetCounter] = useState(0);
+	useEffect(() => {
+		onTickRef.current = onTick;
+	}, [onTick]);
+	useEffect(() => {
+		if (!enabled || paused) return void 0;
+		const id = setInterval(() => onTickRef.current(), interval);
+		return () => clearInterval(id);
+	}, [
+		enabled,
+		interval,
+		paused,
+		resetCounter
+	]);
+	return {
+		pause: useCallback(() => setPaused(true), []),
+		resume: useCallback(() => setPaused(false), []),
+		reset: useCallback(() => {
+			setPaused(false);
+			setResetCounter((n) => n + 1);
+		}, [])
+	};
+};
+
+//#endregion
+//#region src/Banner/index.tsx
+/** @jsxImportSource @emotion/react */
+const getEventPageX = (evt) => {
+	const { pageX, targetTouches } = evt;
+	return pageX !== void 0 ? pageX : targetTouches[0].pageX;
+};
+const BannerRender = ({ children, className = "", autoplay = false, autoplayInterval = 5e3, pauseOnHover = false }, ref) => {
+	const items = useMemo(() => getItems(children), [children]);
+	const itemsLength = useMemo(() => Children.count(children), [children]);
+	const [state, dispatch] = useReducer(reducer, initialState);
+	const rootRef = useRef(null);
+	const dragRef = useRef({
+		dragging: false,
+		dragXFrom: -1,
+		dragXTo: -1
+	});
+	useImperativeHandle(ref, () => rootRef.current, []);
+	const indicator = getIndex(state.position, itemsLength);
+	const currentPosition = state.animating ? state.position : indicator;
+	const animStyle = getStyle(currentPosition, state.dragOffset, itemsLength);
+	const enabled = autoplay && itemsLength >= 2;
+	const hasPrev = itemsLength > 2 || currentPosition - 1 >= 0;
+	const hasNext = itemsLength > 2 || currentPosition + 1 < itemsLength;
+	const jumpTo = useCallback((position) => dispatch({
+		type: "JUMP_TO",
+		payload: {
+			position,
+			itemsLength
+		}
+	}), [itemsLength]);
+	const { pause, resume, reset } = useAutoplay({
+		enabled,
+		interval: autoplayInterval,
+		onTick: useCallback(() => {
+			jumpTo(hasNext ? currentPosition + 1 : currentPosition - 1);
+		}, [
+			hasNext,
+			currentPosition,
+			jumpTo
+		])
+	});
+	const handleArrowBtnClick = (nextPos) => {
+		pause();
+		jumpTo(nextPos);
+	};
+	const handleIndicatorClick = (targetPos) => () => {
+		if (targetPos !== currentPosition) {
+			pause();
+			jumpTo(targetPos);
+			return;
+		}
+		reset();
+	};
+	const handleTouchStart = (evt) => {
+		pause();
+		const pageX = getEventPageX(evt);
+		dragRef.current = {
+			dragging: true,
+			dragXFrom: pageX,
+			dragXTo: pageX
+		};
+	};
+	const handleTouchMove = (evt) => {
+		if (!dragRef.current.dragging) return;
+		const pageX = getEventPageX(evt);
+		dragRef.current.dragXTo = pageX;
+		dispatch({
+			type: "DRAG",
+			payload: { dragOffset: pageX - dragRef.current.dragXFrom }
+		});
+	};
+	const handleTouchEnd = (evt) => {
+		const { dragXFrom, dragXTo } = dragRef.current;
+		const triggerWidth = evt.currentTarget.clientWidth / 4;
+		const movingVector = dragXTo - dragXFrom;
+		const movingWidth = Math.abs(movingVector);
+		if (movingVector > 0 && movingWidth > triggerWidth && hasPrev) jumpTo(currentPosition - 1);
+		else if (movingVector < 0 && movingWidth > triggerWidth && hasNext) jumpTo(currentPosition + 1);
+		else if (movingVector !== 0) jumpTo(currentPosition);
+		else resume();
+		dragRef.current = {
+			dragging: false,
+			dragXFrom: -1,
+			dragXTo: -1
+		};
+	};
+	const handleTransitionEnd = (evt) => {
+		if (evt.target !== evt.currentTarget || evt.propertyName !== "transform") return;
+		dispatch({
+			type: "SETTLE",
+			payload: { itemsLength }
+		});
+		resume();
+	};
+	if (itemsLength === 0) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		ref: rootRef,
+		css: bannerStyle,
+		className: `kks-banner ${className}`,
+		onMouseEnter: enabled && pauseOnHover ? pause : void 0,
+		onMouseLeave: enabled && pauseOnHover ? resume : void 0,
+		onTouchStart: handleTouchStart,
+		onTouchMove: handleTouchMove,
+		onTouchEnd: handleTouchEnd,
+		children: [
+			hasPrev && /* @__PURE__ */ jsx$1("div", {
+				className: "left icon-overlay",
+				children: /* @__PURE__ */ jsx$1("button", {
+					type: "button",
+					className: "icon",
+					onClick: () => handleArrowBtnClick(currentPosition - 1)
+				})
+			}),
+			/* @__PURE__ */ jsx$1("div", {
+				className: "slider-mask",
+				children: /* @__PURE__ */ jsx$1("div", {
+					className: state.animating ? "slider-anim" : "",
+					style: animStyle,
+					onTransitionEnd: handleTransitionEnd,
+					children: items
+				})
+			}),
+			hasNext && /* @__PURE__ */ jsx$1("div", {
+				className: "right icon-overlay",
+				children: /* @__PURE__ */ jsx$1("button", {
+					type: "button",
+					className: "icon",
+					onClick: () => handleArrowBtnClick(currentPosition + 1)
+				})
+			}),
+			/* @__PURE__ */ jsx$1("div", {
+				className: "indicator",
+				children: Array.from({ length: itemsLength }, (_, i) => /* @__PURE__ */ jsx$1("button", {
+					type: "button",
+					className: i === indicator ? "selected" : "",
+					onClick: handleIndicatorClick(i)
+				}, `kks-banner_indicator_${i}`))
+			})
+		]
+	});
+};
+const Banner = forwardRef(BannerRender);
+Banner.displayName = "Banner";
+var Banner_default = Banner;
+
+//#endregion
 //#region src/Dropdown.tsx
 /** @jsxImportSource @emotion/react  */
 const dropdownStyle = css`
@@ -196,10 +529,10 @@ const Button = ({ showMenu, label, placeholder, disabled, onClick }) => /* @__PU
 	"aria-haspopup": "true",
 	"aria-expanded": showMenu,
 	disabled,
-	children: [/* @__PURE__ */ jsx("span", {
+	children: [/* @__PURE__ */ jsx$1("span", {
 		className: `font text-truncate${!label ? " kks-dropdown__label--grey-off" : ""}`,
 		children: !label ? placeholder : label
-	}), /* @__PURE__ */ jsx("span", { className: "icon kks-dropdown__arrow-icon" })]
+	}), /* @__PURE__ */ jsx$1("span", { className: "icon kks-dropdown__arrow-icon" })]
 });
 const Menu = ({ menuTitle, items, activeIndex = -1, onClickItem, onClickClose }) => {
 	const menuRef = useRef(null);
@@ -209,7 +542,7 @@ const Menu = ({ menuTitle, items, activeIndex = -1, onClickItem, onClickClose })
 	const handleOverlayClick = (e) => {
 		if (e.target.id === "kks-menu-overlay") onClickClose();
 	};
-	return /* @__PURE__ */ jsx("div", {
+	return /* @__PURE__ */ jsx$1("div", {
 		id: "kks-menu-overlay",
 		className: "kks-dropdown__menu-overlay",
 		onClick: handleOverlayClick,
@@ -220,33 +553,33 @@ const Menu = ({ menuTitle, items, activeIndex = -1, onClickItem, onClickClose })
 			className: "kks-dropdown__menu",
 			children: [/* @__PURE__ */ jsxs("div", {
 				className: "item-row kks-dropdown__menu-header",
-				children: [menuTitle !== "" && /* @__PURE__ */ jsx("div", {
+				children: [menuTitle !== "" && /* @__PURE__ */ jsx$1("div", {
 					className: "font text-truncate kks-dropdown__menu-title",
 					children: menuTitle
-				}), /* @__PURE__ */ jsx("div", {
+				}), /* @__PURE__ */ jsx$1("div", {
 					className: "kks-dropdown__close-btn",
 					onClick: onClickClose,
 					onKeyPress: onClickClose,
 					role: "button",
 					tabIndex: 0,
-					children: /* @__PURE__ */ jsx("span", { className: "icon kks-dropdown__close-icon" })
+					children: /* @__PURE__ */ jsx$1("span", { className: "icon kks-dropdown__close-icon" })
 				})]
-			}), /* @__PURE__ */ jsx("ul", {
+			}), /* @__PURE__ */ jsx$1("ul", {
 				className: "kks-dropdown__menu-body",
 				children: items.map((item, index) => {
 					const { id, label, route, value } = item;
 					const isActive = activeIndex === index;
-					return /* @__PURE__ */ jsx("li", {
+					return /* @__PURE__ */ jsx$1("li", {
 						className: isActive ? "kks-dropdown__menu-item--active" : "",
 						children: /* @__PURE__ */ jsxs("a", {
 							className: "item-row kks-dropdown__menu-link",
 							href: route || "#",
 							onClick: onClickItem(item, index),
 							"data-value": value,
-							children: [/* @__PURE__ */ jsx("span", {
+							children: [/* @__PURE__ */ jsx$1("span", {
 								className: "font text-truncate",
 								children: label || value
-							}), isActive && /* @__PURE__ */ jsx("span", { className: "icon kks-dropdown__check-icon" })]
+							}), isActive && /* @__PURE__ */ jsx$1("span", { className: "icon kks-dropdown__check-icon" })]
 						})
 					}, `item_${id || value || index}`);
 				})
@@ -287,13 +620,13 @@ const Dropdown = ({ className, options = [], value = null, activeIndex = -1, pla
 		css: dropdownStyle,
 		className: `kks-dropdown ${className || ""}`,
 		ref: dropdownRef,
-		children: [/* @__PURE__ */ jsx(Button, {
+		children: [/* @__PURE__ */ jsx$1(Button, {
 			showMenu,
 			label: selectedLabel,
 			placeholder,
 			disabled,
 			onClick: toggleMenu
-		}), showMenu && /* @__PURE__ */ jsx(Menu, {
+		}), showMenu && /* @__PURE__ */ jsx$1(Menu, {
 			menuTitle,
 			items: options,
 			activeIndex: selectedIndex,
@@ -339,11 +672,11 @@ const HiddenToggle = ({ defaultEnabled = false, children, onChange, ...rest }) =
 				style: { opacity: tapCount / 7 },
 				children: [7 - tapCount, " more tap(s) for feature toggle"]
 			}),
-			tapCount >= 7 && /* @__PURE__ */ jsx("span", {
+			tapCount >= 7 && /* @__PURE__ */ jsx$1("span", {
 				css: statusStyle,
 				children: "feature toggle"
 			}),
-			tapCount >= 7 && /* @__PURE__ */ jsx("button", {
+			tapCount >= 7 && /* @__PURE__ */ jsx$1("button", {
 				type: "button",
 				onClick: onOptOut,
 				children: "exit"
@@ -367,7 +700,7 @@ const iconStyle = {
 	pointerEvents: "none",
 	touchAction: "none"
 };
-const Icon = ({ style = {}, src }) => /* @__PURE__ */ jsx("span", { css: [
+const Icon = ({ style = {}, src }) => /* @__PURE__ */ jsx$1("span", { css: [
 	iconStyle,
 	{ maskImage: `url(data:image/svg+xml;base64,${src})` },
 	style
@@ -450,6 +783,16 @@ const onResize = (container, handler) => {
 	observer.observe(container);
 	return () => observer.disconnect();
 };
+const getLineCount = (el) => {
+	const style = window.getComputedStyle(el);
+	let lineHeight = Number.parseFloat(style.lineHeight);
+	if (Number.isNaN(lineHeight) || lineHeight <= 0) {
+		const fontSize = Number.parseFloat(style.fontSize);
+		lineHeight = fontSize > 0 ? fontSize * 1.2 : 0;
+	}
+	if (!lineHeight) return 0;
+	return Math.max(1, Math.round(el.scrollHeight / lineHeight));
+};
 const defaultMessages = {
 	seeMore: "もっと見る",
 	seeLess: "閉じる"
@@ -457,15 +800,16 @@ const defaultMessages = {
 const SeeMore = ({ style, messages = defaultMessages, children, ...rest }) => {
 	const [status, setStatus] = useState("no-expand");
 	const [expandedHeight, setExpandedHeight] = useState();
+	const rootRef = useRef(null);
 	const containeRef = useRef();
 	useEffect(() => {
-		if (!containeRef.current) return;
-		return onResize(containeRef.current, () => {
+		if (!rootRef.current) return;
+		return onResize(rootRef.current, () => {
 			if (!containeRef.current) return;
-			const { scrollHeight, clientHeight } = containeRef.current;
-			const fontSize = Number.parseFloat(window.getComputedStyle(containeRef.current).fontSize);
-			const scrollable = scrollHeight > clientHeight * 1.3;
-			const fit = fontSize * 3 > scrollHeight;
+			const collapsedLines = Number.parseInt(window.getComputedStyle(containeRef.current).getPropertyValue("--see-more-collapsed-lines"), 10) || 2;
+			const lineCount = getLineCount(containeRef.current);
+			const scrollable = lineCount > collapsedLines;
+			const fit = lineCount <= collapsedLines;
 			setStatus((current) => current === "no-expand" && scrollable ? "collapsed" : current !== "no-expand" && fit ? "no-expand" : current);
 			setExpandedHeight(containeRef.current?.scrollHeight);
 		});
@@ -473,17 +817,18 @@ const SeeMore = ({ style, messages = defaultMessages, children, ...rest }) => {
 	const toggle = () => setStatus((current) => current === "collapsed" ? "expanded" : "collapsing");
 	return /* @__PURE__ */ jsxs("div", {
 		css: [containerStyle, { div: addonStyles[status] }],
+		ref: rootRef,
 		...rest,
 		children: [/* @__PURE__ */ jsxs("div", {
 			css: [expandedHeight && { "--see-more-max-height": `${expandedHeight}px` }, style],
 			ref: containeRef,
 			onTransitionEnd: () => setStatus((current) => current === "collapsing" ? "collapsed" : current),
-			children: [children, /* @__PURE__ */ jsx("div", { css: maskStyle })]
+			children: [children, /* @__PURE__ */ jsx$1("div", { css: maskStyle })]
 		}), /* @__PURE__ */ jsxs("button", {
 			type: "button",
 			disabled: status === "no-expand",
 			onClick: toggle,
-			children: [status === "collapsed" ? messages.seeMore : messages.seeLess, /* @__PURE__ */ jsx(Icon_default, { src: see_more_default })]
+			children: [status === "collapsed" ? messages.seeMore : messages.seeLess, /* @__PURE__ */ jsx$1(Icon_default, { src: see_more_default })]
 		})]
 	});
 };
@@ -572,7 +917,7 @@ const VideoThumbnail = ({ href, imageUrl, title, progress, topTags = [], bottomT
 		Image: "img",
 		...slots
 	};
-	return /* @__PURE__ */ jsx("div", {
+	return /* @__PURE__ */ jsx$1("div", {
 		css: { position: "relative" },
 		children: /* @__PURE__ */ jsxs(components.Link, {
 			css: videoThumbnailStyles,
@@ -580,7 +925,7 @@ const VideoThumbnail = ({ href, imageUrl, title, progress, topTags = [], bottomT
 			onClick,
 			onContextMenu: (event) => event.preventDefault(),
 			children: [
-				/* @__PURE__ */ jsx(components.Image, {
+				/* @__PURE__ */ jsx$1(components.Image, {
 					css: thumbnailImageStyles,
 					src: imageUrl,
 					alt: title,
@@ -588,15 +933,15 @@ const VideoThumbnail = ({ href, imageUrl, title, progress, topTags = [], bottomT
 					loading: "lazy"
 				}),
 				children,
-				progress >= 0 && /* @__PURE__ */ jsx("div", {
+				progress >= 0 && /* @__PURE__ */ jsx$1("div", {
 					css: progressStyles,
-					children: /* @__PURE__ */ jsx("span", { style: { width: `${progress * 100}%` } })
+					children: /* @__PURE__ */ jsx$1("span", { style: { width: `${progress * 100}%` } })
 				}),
 				/* @__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$1("div", { children: topTags?.map((tag) => /* @__PURE__ */ jsx$1("div", { children: tag }, tag)) }), bottomTags.length > 0 && /* @__PURE__ */ jsx$1("div", {
 						css: [tagBottomStyles, progress >= 0 && { marginBottom: "8px" }],
-						children: bottomTags?.map((tag) => /* @__PURE__ */ jsx("div", { children: tag }, tag))
+						children: bottomTags?.map((tag) => /* @__PURE__ */ jsx$1("div", { children: tag }, tag))
 					})]
 				})
 			]
@@ -679,11 +1024,11 @@ const desktopDescriptionStyle = {
 	margin: "0.75rem 0",
 	WebkitLineClamp: LINES_OF_DESCRIPTION
 };
-const OptionalLink = ({ slots, href, children, ...rest }) => href ? /* @__PURE__ */ jsx(slots.Link, {
+const OptionalLink = ({ slots, href, children, ...rest }) => href ? /* @__PURE__ */ jsx$1(slots.Link, {
 	href,
 	...rest,
 	children
-}) : /* @__PURE__ */ jsx("a", {
+}) : /* @__PURE__ */ jsx$1("a", {
 	...rest,
 	children
 });
@@ -692,7 +1037,7 @@ const VideoItem = ({ style, href = "", thumbnailHref = href, imageUrl = "", data
 	css: [videoItemStyle, style],
 	children: [/* @__PURE__ */ jsxs("div", {
 		css: infoStyle,
-		children: [/* @__PURE__ */ jsx(VideoThumbnail_default, {
+		children: [/* @__PURE__ */ jsx$1(VideoThumbnail_default, {
 			href: thumbnailHref,
 			imageUrl,
 			topTags,
@@ -705,18 +1050,18 @@ const VideoItem = ({ style, href = "", thumbnailHref = href, imageUrl = "", data
 			slots,
 			href,
 			children: [
-				/* @__PURE__ */ jsx("div", {
+				/* @__PURE__ */ jsx$1("div", {
 					css: titleStyle,
 					children: data.title || data.display_text
 				}),
-				/* @__PURE__ */ jsx("div", {
+				/* @__PURE__ */ jsx$1("div", {
 					css: [descriptionStyle, desktopDescriptionStyle],
 					children: data.synopsis
 				}),
-				secondaryText ? /* @__PURE__ */ jsx("div", { children: secondaryText }) : null
+				secondaryText ? /* @__PURE__ */ jsx$1("div", { children: secondaryText }) : null
 			]
 		})]
-	}), /* @__PURE__ */ jsx(OptionalLink, {
+	}), /* @__PURE__ */ jsx$1(OptionalLink, {
 		slots,
 		href,
 		css: descriptionStyle,
@@ -726,4 +1071,4 @@ const VideoItem = ({ style, href = "", thumbnailHref = href, imageUrl = "", data
 var VideoItem_default = VideoItem;
 
 //#endregion
-export { Dropdown_default as Dropdown, HiddenToggle_default as HiddenToggle, Icon_default as Icon, SeeMore_default as SeeMore, VideoItem_default as VideoItem, VideoThumbnail_default as VideoThumbnail };
+export { Banner_default as Banner, Dropdown_default as Dropdown, HiddenToggle_default as HiddenToggle, Icon_default as Icon, SeeMore_default as SeeMore, VideoItem_default as VideoItem, VideoThumbnail_default as VideoThumbnail };

package/package.json

@@ -1,39 +1,39 @@
 {
-	"name": "@kkcompany/app-ui",
-	"version": "0.1.25",
-	"module": "dist/index.mjs",
-	"main": "dist/index.js",
-	"types": "dist/index.d.mts",
-	"files": [
-		"dist"
-	],
-	"sideEffects": false,
-	"exports": {
-		".": {
-			"import": "./dist/index.mjs",
-			"module": "./dist/index.mjs",
-			"types": "./dist/index.d.mts",
-			"require": "./dist/index.cjs"
-		}
-	},
-	"license": "MIT",
-	"scripts": {
-		"dev": "next",
-		"build": "tsdown --format esm --format cjs"
-	},
-	"dependencies": {
-		"@emotion/react": "^11.14.0"
-	},
-	"peerDependencies": {
-		"react": "^16.8.0",
-		"react-dom": "^16.8.0"
-	},
-	"devDependencies": {
-		"@biomejs/biome": "^2.3.5",
-		"binary-base64-loader": "^1.0.0",
-		"next": "^16.0.2",
-		"rollup-plugin-base64": "^1.0.1",
-		"tsdown": "^0.16.4",
-		"typescript": "^5.9.3"
-	}
+  "name": "@kkcompany/app-ui",
+  "version": "0.1.27",
+  "module": "dist/index.mjs",
+  "main": "dist/index.js",
+  "types": "dist/index.d.mts",
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "module": "./dist/index.mjs",
+      "types": "./dist/index.d.mts",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "license": "MIT",
+  "scripts": {
+    "dev": "next",
+    "build": "tsdown --format esm --format cjs"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.14.0"
+  },
+  "peerDependencies": {
+    "react": "^16.8.0",
+    "react-dom": "^16.8.0"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "^2.3.5",
+    "binary-base64-loader": "^1.0.0",
+    "next": "^16.0.2",
+    "rollup-plugin-base64": "^1.0.1",
+    "tsdown": "^0.16.4",
+    "typescript": "^5.9.3"
+  }
 }