@kkcompany/app-ui 0.1.25 → 0.1.26

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/index.cjs +335 -1
  2. package/dist/index.d.cts +12 -1
  3. package/dist/index.d.mts +18 -7
  4. package/dist/index.mjs +366 -33
  5. package/package.json +1 -1
package/dist/index.cjs CHANGED
@@ -1,7 +1,340 @@
1
- let __emotion_react = require("@emotion/react");
2
1
  let react = require("react");
2
+ let react_jsx_runtime = require("react/jsx-runtime");
3
3
  let __emotion_react_jsx_runtime = require("@emotion/react/jsx-runtime");
4
+ let __emotion_react = require("@emotion/react");
5
+
6
+ //#region src/Banner/helpers.tsx
7
+ const getStyle = (position, offset, length) => {
8
+ return { transform: `translate3d(${(length > 2 ? -200 : 0) - position * 100}%, 0, 0) translate3d(${offset || 0}px, 0, 0)` };
9
+ };
10
+ const getIndex = (position, length) => {
11
+ if (length === 0) return 0;
12
+ return (position % length + length) % length;
13
+ };
14
+ const getItems = (children) => {
15
+ const arr = react.Children.toArray(children);
16
+ const len = arr.length;
17
+ return (len > 2 ? [
18
+ arr[len - 2],
19
+ arr[len - 1],
20
+ ...arr,
21
+ arr[0],
22
+ arr[1]
23
+ ] : arr).map((item, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
24
+ className: "banner-item",
25
+ children: item
26
+ }, `kks-banner_${index}`));
27
+ };
28
+
29
+ //#endregion
30
+ //#region src/Banner/reducer.ts
31
+ const initialState = {
32
+ position: 0,
33
+ animating: false,
34
+ dragOffset: 0
35
+ };
36
+ const reducer = (state, action) => {
37
+ switch (action.type) {
38
+ case "JUMP_TO":
39
+ if (state.animating) return state;
40
+ return {
41
+ position: action.payload.position,
42
+ animating: true,
43
+ dragOffset: 0
44
+ };
45
+ case "SETTLE": {
46
+ const { itemsLength } = action.payload;
47
+ return {
48
+ position: getIndex(state.position, itemsLength),
49
+ animating: false,
50
+ dragOffset: 0
51
+ };
52
+ }
53
+ case "DRAG": return {
54
+ ...state,
55
+ dragOffset: action.payload.dragOffset
56
+ };
57
+ default: return state;
58
+ }
59
+ };
60
+
61
+ //#endregion
62
+ //#region src/Banner/styles.ts
63
+ const iconSizeMd = "50px";
64
+ const iconSizeXl = "60px";
65
+ const iconOffset = "20%";
66
+ const dotSize = "8px";
67
+ const arrowLeftIcon = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4gICAgPGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4gICAgICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIG9wYWNpdHk9Ii41Ii8+ICAgICAgICA8cGF0aCBmaWxsPSIjNjY2IiBmaWxsLXJ1bGU9Im5vbnplcm8iIGQ9Ik0xNS40MDkgMy44NThhMS4yNSAxLjI1IDAgMCAwLTEuODE4LTEuNzE2bC04LjUgOWExLjI1IDEuMjUgMCAwIDAgMCAxLjcxNmw4LjUgOWExLjI1IDEuMjUgMCAxIDAgMS44MTgtMS43MTZMNy43MTkgMTJsNy42OS04LjE0MnoiLz4gICAgPC9nPjwvc3ZnPg==";
68
+ const arrowRightIcon = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4gICAgPGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4gICAgICAgIDxwYXRoIGQ9Ik0yNCAwSDB2MjRoMjR6IiBvcGFjaXR5PSIuNSIvPiAgICAgICAgPHBhdGggZmlsbD0iIzY2NiIgZmlsbC1ydWxlPSJub256ZXJvIiBkPSJNOC41OTEgMy44NThhMS4yNSAxLjI1IDAgMCAxIDEuODE4LTEuNzE2bDguNSA5YTEuMjUgMS4yNSAwIDAgMSAwIDEuNzE2bC04LjUgOWExLjI1IDEuMjUgMCAxIDEtMS44MTgtMS43MTZMMTYuMjgxIDEyIDguNTkgMy44NTh6Ii8+ICAgIDwvZz48L3N2Zz4=";
69
+ const arrowLeftIconActive = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4gICAgPGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4gICAgICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIG9wYWNpdHk9Ii41Ii8+ICAgICAgICA8cGF0aCBmaWxsPSIjMDBBMUIzIiBmaWxsLXJ1bGU9Im5vbnplcm8iIGQ9Ik0xNS40MDkgMy44NThhMS4yNSAxLjI1IDAgMCAwLTEuODE4LTEuNzE2bC04LjUgOWExLjI1IDEuMjUgMCAwIDAgMCAxLjcxNmw4LjUgOWExLjI1IDEuMjUgMCAxIDAgMS44MTgtMS43MTZMNy43MTkgMTJsNy42OS04LjE0MnoiLz4gICAgPC9nPjwvc3ZnPg==";
70
+ const arrowRightIconActive = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4gICAgPGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4gICAgICAgIDxwYXRoIGQ9Ik0yNCAwSDB2MjRoMjR6IiBvcGFjaXR5PSIuNSIvPiAgICAgICAgPHBhdGggZmlsbD0iIzAwQTFCMyIgZmlsbC1ydWxlPSJub256ZXJvIiBkPSJNOC41OTEgMy44NThhMS4yNSAxLjI1IDAgMCAxIDEuODE4LTEuNzE2bDguNSA5YTEuMjUgMS4yNSAwIDAgMSAwIDEuNzE2bC04LjUgOWExLjI1IDEuMjUgMCAxIDEtMS44MTgtMS43MTZMMTYuMjgxIDEyIDguNTkgMy44NTh6Ii8+ICAgIDwvZz48L3N2Zz4=";
71
+ const bannerStyle = {
72
+ position: "relative",
73
+ width: "100%",
74
+ whiteSpace: "nowrap",
75
+ overflow: "hidden",
76
+ userSelect: "none",
77
+ ".slider-anim": { transition: "transform 0.35s ease-out" },
78
+ ".icon-overlay": { display: "none" },
79
+ ".banner-item": {
80
+ display: "inline-block",
81
+ width: "100%"
82
+ },
83
+ ".indicator": {
84
+ position: "absolute",
85
+ left: "50%",
86
+ bottom: "5%",
87
+ transform: "translateX(-50%)",
88
+ textAlign: "center",
89
+ button: {
90
+ display: "inline-block",
91
+ margin: "0 5px",
92
+ height: dotSize,
93
+ width: dotSize,
94
+ border: 0,
95
+ padding: 0,
96
+ borderRadius: "4px",
97
+ backgroundColor: "#fff",
98
+ opacity: .5,
99
+ appearance: "none",
100
+ outline: "none",
101
+ cursor: "pointer"
102
+ },
103
+ "button.selected": {
104
+ width: "20px",
105
+ opacity: 1
106
+ }
107
+ },
108
+ "@media (min-width: 768px)": {
109
+ ".slider-mask": { padding: "0 18%" },
110
+ ".icon-overlay": {
111
+ position: "absolute",
112
+ top: 0,
113
+ bottom: 0,
114
+ display: "flex",
115
+ alignItems: "center",
116
+ width: "17%",
117
+ zIndex: 30,
118
+ "&.left": {
119
+ left: 0,
120
+ justifyContent: "flex-start",
121
+ backgroundImage: "linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5))"
122
+ },
123
+ "&.right": {
124
+ right: 0,
125
+ justifyContent: "flex-end",
126
+ backgroundImage: "linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5))"
127
+ },
128
+ "&.left .icon": {
129
+ marginLeft: iconOffset,
130
+ background: `url('${arrowLeftIcon}') no-repeat center`
131
+ },
132
+ "&.right .icon": {
133
+ marginRight: iconOffset,
134
+ background: `url('${arrowRightIcon}') no-repeat center`
135
+ },
136
+ "&.left .icon, &.right .icon": {
137
+ width: iconSizeMd,
138
+ height: iconSizeMd,
139
+ border: 0,
140
+ padding: 0,
141
+ borderRadius: "50%",
142
+ backgroundColor: "#fff",
143
+ appearance: "none",
144
+ outline: "none",
145
+ cursor: "pointer"
146
+ },
147
+ "&.left .icon:hover, &.left .icon:focus": { backgroundImage: `url('${arrowLeftIconActive}')` },
148
+ "&.right .icon:hover, &.right .icon:focus": { backgroundImage: `url('${arrowRightIconActive}')` }
149
+ },
150
+ ".banner-item": {
151
+ padding: "0 4px",
152
+ boxSizing: "border-box"
153
+ },
154
+ ".indicator button": { "&:hover, &:focus": { opacity: 1 } }
155
+ },
156
+ "@media (min-width: 1600px)": { ".icon-overlay": { "&.left .icon, &.right .icon": {
157
+ width: iconSizeXl,
158
+ height: iconSizeXl
159
+ } } }
160
+ };
161
+
162
+ //#endregion
163
+ //#region src/Banner/useAutoplay.ts
164
+ const useAutoplay = ({ enabled, interval, onTick }) => {
165
+ const onTickRef = (0, react.useRef)(onTick);
166
+ const [paused, setPaused] = (0, react.useState)(false);
167
+ const [resetCounter, setResetCounter] = (0, react.useState)(0);
168
+ (0, react.useEffect)(() => {
169
+ onTickRef.current = onTick;
170
+ }, [onTick]);
171
+ (0, react.useEffect)(() => {
172
+ if (!enabled || paused) return void 0;
173
+ const id = setInterval(() => onTickRef.current(), interval);
174
+ return () => clearInterval(id);
175
+ }, [
176
+ enabled,
177
+ interval,
178
+ paused,
179
+ resetCounter
180
+ ]);
181
+ return {
182
+ pause: (0, react.useCallback)(() => setPaused(true), []),
183
+ resume: (0, react.useCallback)(() => setPaused(false), []),
184
+ reset: (0, react.useCallback)(() => {
185
+ setPaused(false);
186
+ setResetCounter((n) => n + 1);
187
+ }, [])
188
+ };
189
+ };
190
+
191
+ //#endregion
192
+ //#region src/Banner/index.tsx
193
+ /** @jsxImportSource @emotion/react */
194
+ const getEventPageX = (evt) => {
195
+ const { pageX, targetTouches } = evt;
196
+ return pageX !== void 0 ? pageX : targetTouches[0].pageX;
197
+ };
198
+ const BannerRender = ({ children, className = "", autoplay = false, autoplayInterval = 5e3, pauseOnHover = false }, ref) => {
199
+ const items = (0, react.useMemo)(() => getItems(children), [children]);
200
+ const itemsLength = (0, react.useMemo)(() => react.Children.count(children), [children]);
201
+ const [state, dispatch] = (0, react.useReducer)(reducer, initialState);
202
+ const rootRef = (0, react.useRef)(null);
203
+ const dragRef = (0, react.useRef)({
204
+ dragging: false,
205
+ dragXFrom: -1,
206
+ dragXTo: -1
207
+ });
208
+ (0, react.useImperativeHandle)(ref, () => rootRef.current, []);
209
+ const indicator = getIndex(state.position, itemsLength);
210
+ const currentPosition = state.animating ? state.position : indicator;
211
+ const animStyle = getStyle(currentPosition, state.dragOffset, itemsLength);
212
+ const enabled = autoplay && itemsLength >= 2;
213
+ const hasPrev = itemsLength > 2 || currentPosition - 1 >= 0;
214
+ const hasNext = itemsLength > 2 || currentPosition + 1 < itemsLength;
215
+ const jumpTo = (0, react.useCallback)((position) => dispatch({
216
+ type: "JUMP_TO",
217
+ payload: {
218
+ position,
219
+ itemsLength
220
+ }
221
+ }), [itemsLength]);
222
+ const { pause, resume, reset } = useAutoplay({
223
+ enabled,
224
+ interval: autoplayInterval,
225
+ onTick: (0, react.useCallback)(() => {
226
+ jumpTo(hasNext ? currentPosition + 1 : currentPosition - 1);
227
+ }, [
228
+ hasNext,
229
+ currentPosition,
230
+ jumpTo
231
+ ])
232
+ });
233
+ const handleArrowBtnClick = (nextPos) => {
234
+ pause();
235
+ jumpTo(nextPos);
236
+ };
237
+ const handleIndicatorClick = (targetPos) => () => {
238
+ if (targetPos !== currentPosition) {
239
+ pause();
240
+ jumpTo(targetPos);
241
+ return;
242
+ }
243
+ reset();
244
+ };
245
+ const handleTouchStart = (evt) => {
246
+ pause();
247
+ const pageX = getEventPageX(evt);
248
+ dragRef.current = {
249
+ dragging: true,
250
+ dragXFrom: pageX,
251
+ dragXTo: pageX
252
+ };
253
+ };
254
+ const handleTouchMove = (evt) => {
255
+ if (!dragRef.current.dragging) return;
256
+ const pageX = getEventPageX(evt);
257
+ dragRef.current.dragXTo = pageX;
258
+ dispatch({
259
+ type: "DRAG",
260
+ payload: { dragOffset: pageX - dragRef.current.dragXFrom }
261
+ });
262
+ };
263
+ const handleTouchEnd = (evt) => {
264
+ const { dragXFrom, dragXTo } = dragRef.current;
265
+ const triggerWidth = evt.currentTarget.clientWidth / 4;
266
+ const movingVector = dragXTo - dragXFrom;
267
+ const movingWidth = Math.abs(movingVector);
268
+ if (movingVector > 0 && movingWidth > triggerWidth && hasPrev) jumpTo(currentPosition - 1);
269
+ else if (movingVector < 0 && movingWidth > triggerWidth && hasNext) jumpTo(currentPosition + 1);
270
+ else if (movingVector !== 0) jumpTo(currentPosition);
271
+ else resume();
272
+ dragRef.current = {
273
+ dragging: false,
274
+ dragXFrom: -1,
275
+ dragXTo: -1
276
+ };
277
+ };
278
+ const handleTransitionEnd = (evt) => {
279
+ if (evt.target !== evt.currentTarget || evt.propertyName !== "transform") return;
280
+ dispatch({
281
+ type: "SETTLE",
282
+ payload: { itemsLength }
283
+ });
284
+ resume();
285
+ };
286
+ if (itemsLength === 0) return null;
287
+ return /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsxs)("div", {
288
+ ref: rootRef,
289
+ css: bannerStyle,
290
+ className: `kks-banner ${className}`,
291
+ onMouseEnter: enabled && pauseOnHover ? pause : void 0,
292
+ onMouseLeave: enabled && pauseOnHover ? resume : void 0,
293
+ onTouchStart: handleTouchStart,
294
+ onTouchMove: handleTouchMove,
295
+ onTouchEnd: handleTouchEnd,
296
+ children: [
297
+ hasPrev && /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)("div", {
298
+ className: "left icon-overlay",
299
+ children: /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)("button", {
300
+ type: "button",
301
+ className: "icon",
302
+ onClick: () => handleArrowBtnClick(currentPosition - 1)
303
+ })
304
+ }),
305
+ /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)("div", {
306
+ className: "slider-mask",
307
+ children: /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)("div", {
308
+ className: state.animating ? "slider-anim" : "",
309
+ style: animStyle,
310
+ onTransitionEnd: handleTransitionEnd,
311
+ children: items
312
+ })
313
+ }),
314
+ hasNext && /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)("div", {
315
+ className: "right icon-overlay",
316
+ children: /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)("button", {
317
+ type: "button",
318
+ className: "icon",
319
+ onClick: () => handleArrowBtnClick(currentPosition + 1)
320
+ })
321
+ }),
322
+ /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)("div", {
323
+ className: "indicator",
324
+ children: Array.from({ length: itemsLength }, (_, i) => /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)("button", {
325
+ type: "button",
326
+ className: i === indicator ? "selected" : "",
327
+ onClick: handleIndicatorClick(i)
328
+ }, `kks-banner_indicator_${i}`))
329
+ })
330
+ ]
331
+ });
332
+ };
333
+ const Banner = (0, react.forwardRef)(BannerRender);
334
+ Banner.displayName = "Banner";
335
+ var Banner_default = Banner;
4
336
 
337
+ //#endregion
5
338
  //#region src/Dropdown.tsx
6
339
  /** @jsxImportSource @emotion/react */
7
340
  const dropdownStyle = __emotion_react.css`
@@ -726,6 +1059,7 @@ const VideoItem = ({ style, href = "", thumbnailHref = href, imageUrl = "", data
726
1059
  var VideoItem_default = VideoItem;
727
1060
 
728
1061
  //#endregion
1062
+ exports.Banner = Banner_default;
729
1063
  exports.Dropdown = Dropdown_default;
730
1064
  exports.HiddenToggle = HiddenToggle_default;
731
1065
  exports.Icon = Icon_default;
package/dist/index.d.cts CHANGED
@@ -1,8 +1,19 @@
1
+ import * as react0 from "react";
1
2
  import { ElementType, MouseEventHandler, ReactElement, ReactNode } from "react";
2
3
  import * as _emotion_react_jsx_runtime0 from "@emotion/react/jsx-runtime";
3
4
  import { CSSObject } from "@emotion/react";
4
5
  import Link from "next/link";
5
6
 
7
+ //#region src/Banner/index.d.ts
8
+ type BannerProps = {
9
+ children: ReactNode;
10
+ className?: string;
11
+ autoplay?: boolean;
12
+ autoplayInterval?: number;
13
+ pauseOnHover?: boolean;
14
+ };
15
+ declare const Banner: react0.ForwardRefExoticComponent<BannerProps & react0.RefAttributes<HTMLDivElement>>;
16
+ //#endregion
6
17
  //#region src/Dropdown.d.ts
7
18
  type DropdownOption = {
8
19
  id?: string | number;
@@ -145,4 +156,4 @@ declare const VideoThumbnail: ({
145
156
  onClick?: MouseEventHandler<HTMLAnchorElement>;
146
157
  }) => _emotion_react_jsx_runtime0.JSX.Element;
147
158
  //#endregion
148
- export { Dropdown, HiddenToggle, Icon, SeeMore, VideoItem, VideoThumbnail };
159
+ export { Banner, Dropdown, HiddenToggle, Icon, SeeMore, VideoItem, VideoThumbnail };
package/dist/index.d.mts CHANGED
@@ -1,8 +1,19 @@
1
- import { CSSObject } from "@emotion/react";
1
+ import * as react0 from "react";
2
2
  import { ElementType, MouseEventHandler, ReactElement, ReactNode } from "react";
3
- import * as _emotion_react_jsx_runtime1 from "@emotion/react/jsx-runtime";
3
+ import * as _emotion_react_jsx_runtime2 from "@emotion/react/jsx-runtime";
4
+ import { CSSObject } from "@emotion/react";
4
5
  import Link from "next/link";
5
6
 
7
+ //#region src/Banner/index.d.ts
8
+ type BannerProps = {
9
+ children: ReactNode;
10
+ className?: string;
11
+ autoplay?: boolean;
12
+ autoplayInterval?: number;
13
+ pauseOnHover?: boolean;
14
+ };
15
+ declare const Banner: react0.ForwardRefExoticComponent<BannerProps & react0.RefAttributes<HTMLDivElement>>;
16
+ //#endregion
6
17
  //#region src/Dropdown.d.ts
7
18
  type DropdownOption = {
8
19
  id?: string | number;
@@ -54,7 +65,7 @@ declare const HiddenToggle: ({
54
65
  defaultEnabled?: boolean;
55
66
  children: any;
56
67
  onChange: any;
57
- }) => _emotion_react_jsx_runtime1.JSX.Element;
68
+ }) => _emotion_react_jsx_runtime2.JSX.Element;
58
69
  //#endregion
59
70
  //#region src/Icon.d.ts
60
71
  declare const Icon: ({
@@ -63,7 +74,7 @@ declare const Icon: ({
63
74
  }: {
64
75
  style?: {};
65
76
  src: any;
66
- }) => _emotion_react_jsx_runtime1.JSX.Element;
77
+ }) => _emotion_react_jsx_runtime2.JSX.Element;
67
78
  //#endregion
68
79
  //#region src/SeeMore.d.ts
69
80
  declare const defaultMessages: {
@@ -79,7 +90,7 @@ declare const SeeMore: ({
79
90
  style?: CSSObject;
80
91
  messages?: typeof defaultMessages;
81
92
  children?: ReactNode;
82
- }) => _emotion_react_jsx_runtime1.JSX.Element;
93
+ }) => _emotion_react_jsx_runtime2.JSX.Element;
83
94
  //#endregion
84
95
  //#region src/VideoItem.d.ts
85
96
  type VideoDetail = {
@@ -143,6 +154,6 @@ declare const VideoThumbnail: ({
143
154
  Image?: ElementType;
144
155
  };
145
156
  onClick?: MouseEventHandler<HTMLAnchorElement>;
146
- }) => _emotion_react_jsx_runtime1.JSX.Element;
157
+ }) => _emotion_react_jsx_runtime2.JSX.Element;
147
158
  //#endregion
148
- export { Dropdown, HiddenToggle, Icon, SeeMore, VideoItem, VideoThumbnail };
159
+ export { Banner, Dropdown, HiddenToggle, Icon, SeeMore, VideoItem, VideoThumbnail };
package/dist/index.mjs CHANGED
@@ -1,7 +1,340 @@
1
+ import { Children, forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useReducer, useRef, useState } from "react";
2
+ import { jsx } from "react/jsx-runtime";
3
+ import { jsx as jsx$1, jsxs } from "@emotion/react/jsx-runtime";
1
4
  import { css } from "@emotion/react";
2
- import { useEffect, useRef, useState } from "react";
3
- import { jsx, jsxs } from "@emotion/react/jsx-runtime";
4
5
 
6
+ //#region src/Banner/helpers.tsx
7
+ const getStyle = (position, offset, length) => {
8
+ return { transform: `translate3d(${(length > 2 ? -200 : 0) - position * 100}%, 0, 0) translate3d(${offset || 0}px, 0, 0)` };
9
+ };
10
+ const getIndex = (position, length) => {
11
+ if (length === 0) return 0;
12
+ return (position % length + length) % length;
13
+ };
14
+ const getItems = (children) => {
15
+ const arr = Children.toArray(children);
16
+ const len = arr.length;
17
+ return (len > 2 ? [
18
+ arr[len - 2],
19
+ arr[len - 1],
20
+ ...arr,
21
+ arr[0],
22
+ arr[1]
23
+ ] : arr).map((item, index) => /* @__PURE__ */ jsx("div", {
24
+ className: "banner-item",
25
+ children: item
26
+ }, `kks-banner_${index}`));
27
+ };
28
+
29
+ //#endregion
30
+ //#region src/Banner/reducer.ts
31
+ const initialState = {
32
+ position: 0,
33
+ animating: false,
34
+ dragOffset: 0
35
+ };
36
+ const reducer = (state, action) => {
37
+ switch (action.type) {
38
+ case "JUMP_TO":
39
+ if (state.animating) return state;
40
+ return {
41
+ position: action.payload.position,
42
+ animating: true,
43
+ dragOffset: 0
44
+ };
45
+ case "SETTLE": {
46
+ const { itemsLength } = action.payload;
47
+ return {
48
+ position: getIndex(state.position, itemsLength),
49
+ animating: false,
50
+ dragOffset: 0
51
+ };
52
+ }
53
+ case "DRAG": return {
54
+ ...state,
55
+ dragOffset: action.payload.dragOffset
56
+ };
57
+ default: return state;
58
+ }
59
+ };
60
+
61
+ //#endregion
62
+ //#region src/Banner/styles.ts
63
+ const iconSizeMd = "50px";
64
+ const iconSizeXl = "60px";
65
+ const iconOffset = "20%";
66
+ const dotSize = "8px";
67
+ const arrowLeftIcon = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4gICAgPGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4gICAgICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIG9wYWNpdHk9Ii41Ii8+ICAgICAgICA8cGF0aCBmaWxsPSIjNjY2IiBmaWxsLXJ1bGU9Im5vbnplcm8iIGQ9Ik0xNS40MDkgMy44NThhMS4yNSAxLjI1IDAgMCAwLTEuODE4LTEuNzE2bC04LjUgOWExLjI1IDEuMjUgMCAwIDAgMCAxLjcxNmw4LjUgOWExLjI1IDEuMjUgMCAxIDAgMS44MTgtMS43MTZMNy43MTkgMTJsNy42OS04LjE0MnoiLz4gICAgPC9nPjwvc3ZnPg==";
68
+ const arrowRightIcon = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4gICAgPGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4gICAgICAgIDxwYXRoIGQ9Ik0yNCAwSDB2MjRoMjR6IiBvcGFjaXR5PSIuNSIvPiAgICAgICAgPHBhdGggZmlsbD0iIzY2NiIgZmlsbC1ydWxlPSJub256ZXJvIiBkPSJNOC41OTEgMy44NThhMS4yNSAxLjI1IDAgMCAxIDEuODE4LTEuNzE2bDguNSA5YTEuMjUgMS4yNSAwIDAgMSAwIDEuNzE2bC04LjUgOWExLjI1IDEuMjUgMCAxIDEtMS44MTgtMS43MTZMMTYuMjgxIDEyIDguNTkgMy44NTh6Ii8+ICAgIDwvZz48L3N2Zz4=";
69
+ const arrowLeftIconActive = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4gICAgPGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4gICAgICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIG9wYWNpdHk9Ii41Ii8+ICAgICAgICA8cGF0aCBmaWxsPSIjMDBBMUIzIiBmaWxsLXJ1bGU9Im5vbnplcm8iIGQ9Ik0xNS40MDkgMy44NThhMS4yNSAxLjI1IDAgMCAwLTEuODE4LTEuNzE2bC04LjUgOWExLjI1IDEuMjUgMCAwIDAgMCAxLjcxNmw4LjUgOWExLjI1IDEuMjUgMCAxIDAgMS44MTgtMS43MTZMNy43MTkgMTJsNy42OS04LjE0MnoiLz4gICAgPC9nPjwvc3ZnPg==";
70
+ const arrowRightIconActive = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4gICAgPGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4gICAgICAgIDxwYXRoIGQ9Ik0yNCAwSDB2MjRoMjR6IiBvcGFjaXR5PSIuNSIvPiAgICAgICAgPHBhdGggZmlsbD0iIzAwQTFCMyIgZmlsbC1ydWxlPSJub256ZXJvIiBkPSJNOC41OTEgMy44NThhMS4yNSAxLjI1IDAgMCAxIDEuODE4LTEuNzE2bDguNSA5YTEuMjUgMS4yNSAwIDAgMSAwIDEuNzE2bC04LjUgOWExLjI1IDEuMjUgMCAxIDEtMS44MTgtMS43MTZMMTYuMjgxIDEyIDguNTkgMy44NTh6Ii8+ICAgIDwvZz48L3N2Zz4=";
71
+ const bannerStyle = {
72
+ position: "relative",
73
+ width: "100%",
74
+ whiteSpace: "nowrap",
75
+ overflow: "hidden",
76
+ userSelect: "none",
77
+ ".slider-anim": { transition: "transform 0.35s ease-out" },
78
+ ".icon-overlay": { display: "none" },
79
+ ".banner-item": {
80
+ display: "inline-block",
81
+ width: "100%"
82
+ },
83
+ ".indicator": {
84
+ position: "absolute",
85
+ left: "50%",
86
+ bottom: "5%",
87
+ transform: "translateX(-50%)",
88
+ textAlign: "center",
89
+ button: {
90
+ display: "inline-block",
91
+ margin: "0 5px",
92
+ height: dotSize,
93
+ width: dotSize,
94
+ border: 0,
95
+ padding: 0,
96
+ borderRadius: "4px",
97
+ backgroundColor: "#fff",
98
+ opacity: .5,
99
+ appearance: "none",
100
+ outline: "none",
101
+ cursor: "pointer"
102
+ },
103
+ "button.selected": {
104
+ width: "20px",
105
+ opacity: 1
106
+ }
107
+ },
108
+ "@media (min-width: 768px)": {
109
+ ".slider-mask": { padding: "0 18%" },
110
+ ".icon-overlay": {
111
+ position: "absolute",
112
+ top: 0,
113
+ bottom: 0,
114
+ display: "flex",
115
+ alignItems: "center",
116
+ width: "17%",
117
+ zIndex: 30,
118
+ "&.left": {
119
+ left: 0,
120
+ justifyContent: "flex-start",
121
+ backgroundImage: "linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5))"
122
+ },
123
+ "&.right": {
124
+ right: 0,
125
+ justifyContent: "flex-end",
126
+ backgroundImage: "linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5))"
127
+ },
128
+ "&.left .icon": {
129
+ marginLeft: iconOffset,
130
+ background: `url('${arrowLeftIcon}') no-repeat center`
131
+ },
132
+ "&.right .icon": {
133
+ marginRight: iconOffset,
134
+ background: `url('${arrowRightIcon}') no-repeat center`
135
+ },
136
+ "&.left .icon, &.right .icon": {
137
+ width: iconSizeMd,
138
+ height: iconSizeMd,
139
+ border: 0,
140
+ padding: 0,
141
+ borderRadius: "50%",
142
+ backgroundColor: "#fff",
143
+ appearance: "none",
144
+ outline: "none",
145
+ cursor: "pointer"
146
+ },
147
+ "&.left .icon:hover, &.left .icon:focus": { backgroundImage: `url('${arrowLeftIconActive}')` },
148
+ "&.right .icon:hover, &.right .icon:focus": { backgroundImage: `url('${arrowRightIconActive}')` }
149
+ },
150
+ ".banner-item": {
151
+ padding: "0 4px",
152
+ boxSizing: "border-box"
153
+ },
154
+ ".indicator button": { "&:hover, &:focus": { opacity: 1 } }
155
+ },
156
+ "@media (min-width: 1600px)": { ".icon-overlay": { "&.left .icon, &.right .icon": {
157
+ width: iconSizeXl,
158
+ height: iconSizeXl
159
+ } } }
160
+ };
161
+
162
+ //#endregion
163
+ //#region src/Banner/useAutoplay.ts
164
+ const useAutoplay = ({ enabled, interval, onTick }) => {
165
+ const onTickRef = useRef(onTick);
166
+ const [paused, setPaused] = useState(false);
167
+ const [resetCounter, setResetCounter] = useState(0);
168
+ useEffect(() => {
169
+ onTickRef.current = onTick;
170
+ }, [onTick]);
171
+ useEffect(() => {
172
+ if (!enabled || paused) return void 0;
173
+ const id = setInterval(() => onTickRef.current(), interval);
174
+ return () => clearInterval(id);
175
+ }, [
176
+ enabled,
177
+ interval,
178
+ paused,
179
+ resetCounter
180
+ ]);
181
+ return {
182
+ pause: useCallback(() => setPaused(true), []),
183
+ resume: useCallback(() => setPaused(false), []),
184
+ reset: useCallback(() => {
185
+ setPaused(false);
186
+ setResetCounter((n) => n + 1);
187
+ }, [])
188
+ };
189
+ };
190
+
191
+ //#endregion
192
+ //#region src/Banner/index.tsx
193
+ /** @jsxImportSource @emotion/react */
194
+ const getEventPageX = (evt) => {
195
+ const { pageX, targetTouches } = evt;
196
+ return pageX !== void 0 ? pageX : targetTouches[0].pageX;
197
+ };
198
+ const BannerRender = ({ children, className = "", autoplay = false, autoplayInterval = 5e3, pauseOnHover = false }, ref) => {
199
+ const items = useMemo(() => getItems(children), [children]);
200
+ const itemsLength = useMemo(() => Children.count(children), [children]);
201
+ const [state, dispatch] = useReducer(reducer, initialState);
202
+ const rootRef = useRef(null);
203
+ const dragRef = useRef({
204
+ dragging: false,
205
+ dragXFrom: -1,
206
+ dragXTo: -1
207
+ });
208
+ useImperativeHandle(ref, () => rootRef.current, []);
209
+ const indicator = getIndex(state.position, itemsLength);
210
+ const currentPosition = state.animating ? state.position : indicator;
211
+ const animStyle = getStyle(currentPosition, state.dragOffset, itemsLength);
212
+ const enabled = autoplay && itemsLength >= 2;
213
+ const hasPrev = itemsLength > 2 || currentPosition - 1 >= 0;
214
+ const hasNext = itemsLength > 2 || currentPosition + 1 < itemsLength;
215
+ const jumpTo = useCallback((position) => dispatch({
216
+ type: "JUMP_TO",
217
+ payload: {
218
+ position,
219
+ itemsLength
220
+ }
221
+ }), [itemsLength]);
222
+ const { pause, resume, reset } = useAutoplay({
223
+ enabled,
224
+ interval: autoplayInterval,
225
+ onTick: useCallback(() => {
226
+ jumpTo(hasNext ? currentPosition + 1 : currentPosition - 1);
227
+ }, [
228
+ hasNext,
229
+ currentPosition,
230
+ jumpTo
231
+ ])
232
+ });
233
+ const handleArrowBtnClick = (nextPos) => {
234
+ pause();
235
+ jumpTo(nextPos);
236
+ };
237
+ const handleIndicatorClick = (targetPos) => () => {
238
+ if (targetPos !== currentPosition) {
239
+ pause();
240
+ jumpTo(targetPos);
241
+ return;
242
+ }
243
+ reset();
244
+ };
245
+ const handleTouchStart = (evt) => {
246
+ pause();
247
+ const pageX = getEventPageX(evt);
248
+ dragRef.current = {
249
+ dragging: true,
250
+ dragXFrom: pageX,
251
+ dragXTo: pageX
252
+ };
253
+ };
254
+ const handleTouchMove = (evt) => {
255
+ if (!dragRef.current.dragging) return;
256
+ const pageX = getEventPageX(evt);
257
+ dragRef.current.dragXTo = pageX;
258
+ dispatch({
259
+ type: "DRAG",
260
+ payload: { dragOffset: pageX - dragRef.current.dragXFrom }
261
+ });
262
+ };
263
+ const handleTouchEnd = (evt) => {
264
+ const { dragXFrom, dragXTo } = dragRef.current;
265
+ const triggerWidth = evt.currentTarget.clientWidth / 4;
266
+ const movingVector = dragXTo - dragXFrom;
267
+ const movingWidth = Math.abs(movingVector);
268
+ if (movingVector > 0 && movingWidth > triggerWidth && hasPrev) jumpTo(currentPosition - 1);
269
+ else if (movingVector < 0 && movingWidth > triggerWidth && hasNext) jumpTo(currentPosition + 1);
270
+ else if (movingVector !== 0) jumpTo(currentPosition);
271
+ else resume();
272
+ dragRef.current = {
273
+ dragging: false,
274
+ dragXFrom: -1,
275
+ dragXTo: -1
276
+ };
277
+ };
278
+ const handleTransitionEnd = (evt) => {
279
+ if (evt.target !== evt.currentTarget || evt.propertyName !== "transform") return;
280
+ dispatch({
281
+ type: "SETTLE",
282
+ payload: { itemsLength }
283
+ });
284
+ resume();
285
+ };
286
+ if (itemsLength === 0) return null;
287
+ return /* @__PURE__ */ jsxs("div", {
288
+ ref: rootRef,
289
+ css: bannerStyle,
290
+ className: `kks-banner ${className}`,
291
+ onMouseEnter: enabled && pauseOnHover ? pause : void 0,
292
+ onMouseLeave: enabled && pauseOnHover ? resume : void 0,
293
+ onTouchStart: handleTouchStart,
294
+ onTouchMove: handleTouchMove,
295
+ onTouchEnd: handleTouchEnd,
296
+ children: [
297
+ hasPrev && /* @__PURE__ */ jsx$1("div", {
298
+ className: "left icon-overlay",
299
+ children: /* @__PURE__ */ jsx$1("button", {
300
+ type: "button",
301
+ className: "icon",
302
+ onClick: () => handleArrowBtnClick(currentPosition - 1)
303
+ })
304
+ }),
305
+ /* @__PURE__ */ jsx$1("div", {
306
+ className: "slider-mask",
307
+ children: /* @__PURE__ */ jsx$1("div", {
308
+ className: state.animating ? "slider-anim" : "",
309
+ style: animStyle,
310
+ onTransitionEnd: handleTransitionEnd,
311
+ children: items
312
+ })
313
+ }),
314
+ hasNext && /* @__PURE__ */ jsx$1("div", {
315
+ className: "right icon-overlay",
316
+ children: /* @__PURE__ */ jsx$1("button", {
317
+ type: "button",
318
+ className: "icon",
319
+ onClick: () => handleArrowBtnClick(currentPosition + 1)
320
+ })
321
+ }),
322
+ /* @__PURE__ */ jsx$1("div", {
323
+ className: "indicator",
324
+ children: Array.from({ length: itemsLength }, (_, i) => /* @__PURE__ */ jsx$1("button", {
325
+ type: "button",
326
+ className: i === indicator ? "selected" : "",
327
+ onClick: handleIndicatorClick(i)
328
+ }, `kks-banner_indicator_${i}`))
329
+ })
330
+ ]
331
+ });
332
+ };
333
+ const Banner = forwardRef(BannerRender);
334
+ Banner.displayName = "Banner";
335
+ var Banner_default = Banner;
336
+
337
+ //#endregion
5
338
  //#region src/Dropdown.tsx
6
339
  /** @jsxImportSource @emotion/react */
7
340
  const dropdownStyle = css`
@@ -196,10 +529,10 @@ const Button = ({ showMenu, label, placeholder, disabled, onClick }) => /* @__PU
196
529
  "aria-haspopup": "true",
197
530
  "aria-expanded": showMenu,
198
531
  disabled,
199
- children: [/* @__PURE__ */ jsx("span", {
532
+ children: [/* @__PURE__ */ jsx$1("span", {
200
533
  className: `font text-truncate${!label ? " kks-dropdown__label--grey-off" : ""}`,
201
534
  children: !label ? placeholder : label
202
- }), /* @__PURE__ */ jsx("span", { className: "icon kks-dropdown__arrow-icon" })]
535
+ }), /* @__PURE__ */ jsx$1("span", { className: "icon kks-dropdown__arrow-icon" })]
203
536
  });
204
537
  const Menu = ({ menuTitle, items, activeIndex = -1, onClickItem, onClickClose }) => {
205
538
  const menuRef = useRef(null);
@@ -209,7 +542,7 @@ const Menu = ({ menuTitle, items, activeIndex = -1, onClickItem, onClickClose })
209
542
  const handleOverlayClick = (e) => {
210
543
  if (e.target.id === "kks-menu-overlay") onClickClose();
211
544
  };
212
- return /* @__PURE__ */ jsx("div", {
545
+ return /* @__PURE__ */ jsx$1("div", {
213
546
  id: "kks-menu-overlay",
214
547
  className: "kks-dropdown__menu-overlay",
215
548
  onClick: handleOverlayClick,
@@ -220,33 +553,33 @@ const Menu = ({ menuTitle, items, activeIndex = -1, onClickItem, onClickClose })
220
553
  className: "kks-dropdown__menu",
221
554
  children: [/* @__PURE__ */ jsxs("div", {
222
555
  className: "item-row kks-dropdown__menu-header",
223
- children: [menuTitle !== "" && /* @__PURE__ */ jsx("div", {
556
+ children: [menuTitle !== "" && /* @__PURE__ */ jsx$1("div", {
224
557
  className: "font text-truncate kks-dropdown__menu-title",
225
558
  children: menuTitle
226
- }), /* @__PURE__ */ jsx("div", {
559
+ }), /* @__PURE__ */ jsx$1("div", {
227
560
  className: "kks-dropdown__close-btn",
228
561
  onClick: onClickClose,
229
562
  onKeyPress: onClickClose,
230
563
  role: "button",
231
564
  tabIndex: 0,
232
- children: /* @__PURE__ */ jsx("span", { className: "icon kks-dropdown__close-icon" })
565
+ children: /* @__PURE__ */ jsx$1("span", { className: "icon kks-dropdown__close-icon" })
233
566
  })]
234
- }), /* @__PURE__ */ jsx("ul", {
567
+ }), /* @__PURE__ */ jsx$1("ul", {
235
568
  className: "kks-dropdown__menu-body",
236
569
  children: items.map((item, index) => {
237
570
  const { id, label, route, value } = item;
238
571
  const isActive = activeIndex === index;
239
- return /* @__PURE__ */ jsx("li", {
572
+ return /* @__PURE__ */ jsx$1("li", {
240
573
  className: isActive ? "kks-dropdown__menu-item--active" : "",
241
574
  children: /* @__PURE__ */ jsxs("a", {
242
575
  className: "item-row kks-dropdown__menu-link",
243
576
  href: route || "#",
244
577
  onClick: onClickItem(item, index),
245
578
  "data-value": value,
246
- children: [/* @__PURE__ */ jsx("span", {
579
+ children: [/* @__PURE__ */ jsx$1("span", {
247
580
  className: "font text-truncate",
248
581
  children: label || value
249
- }), isActive && /* @__PURE__ */ jsx("span", { className: "icon kks-dropdown__check-icon" })]
582
+ }), isActive && /* @__PURE__ */ jsx$1("span", { className: "icon kks-dropdown__check-icon" })]
250
583
  })
251
584
  }, `item_${id || value || index}`);
252
585
  })
@@ -287,13 +620,13 @@ const Dropdown = ({ className, options = [], value = null, activeIndex = -1, pla
287
620
  css: dropdownStyle,
288
621
  className: `kks-dropdown ${className || ""}`,
289
622
  ref: dropdownRef,
290
- children: [/* @__PURE__ */ jsx(Button, {
623
+ children: [/* @__PURE__ */ jsx$1(Button, {
291
624
  showMenu,
292
625
  label: selectedLabel,
293
626
  placeholder,
294
627
  disabled,
295
628
  onClick: toggleMenu
296
- }), showMenu && /* @__PURE__ */ jsx(Menu, {
629
+ }), showMenu && /* @__PURE__ */ jsx$1(Menu, {
297
630
  menuTitle,
298
631
  items: options,
299
632
  activeIndex: selectedIndex,
@@ -339,11 +672,11 @@ const HiddenToggle = ({ defaultEnabled = false, children, onChange, ...rest }) =
339
672
  style: { opacity: tapCount / 7 },
340
673
  children: [7 - tapCount, " more tap(s) for feature toggle"]
341
674
  }),
342
- tapCount >= 7 && /* @__PURE__ */ jsx("span", {
675
+ tapCount >= 7 && /* @__PURE__ */ jsx$1("span", {
343
676
  css: statusStyle,
344
677
  children: "feature toggle"
345
678
  }),
346
- tapCount >= 7 && /* @__PURE__ */ jsx("button", {
679
+ tapCount >= 7 && /* @__PURE__ */ jsx$1("button", {
347
680
  type: "button",
348
681
  onClick: onOptOut,
349
682
  children: "exit"
@@ -367,7 +700,7 @@ const iconStyle = {
367
700
  pointerEvents: "none",
368
701
  touchAction: "none"
369
702
  };
370
- const Icon = ({ style = {}, src }) => /* @__PURE__ */ jsx("span", { css: [
703
+ const Icon = ({ style = {}, src }) => /* @__PURE__ */ jsx$1("span", { css: [
371
704
  iconStyle,
372
705
  { maskImage: `url(data:image/svg+xml;base64,${src})` },
373
706
  style
@@ -478,12 +811,12 @@ const SeeMore = ({ style, messages = defaultMessages, children, ...rest }) => {
478
811
  css: [expandedHeight && { "--see-more-max-height": `${expandedHeight}px` }, style],
479
812
  ref: containeRef,
480
813
  onTransitionEnd: () => setStatus((current) => current === "collapsing" ? "collapsed" : current),
481
- children: [children, /* @__PURE__ */ jsx("div", { css: maskStyle })]
814
+ children: [children, /* @__PURE__ */ jsx$1("div", { css: maskStyle })]
482
815
  }), /* @__PURE__ */ jsxs("button", {
483
816
  type: "button",
484
817
  disabled: status === "no-expand",
485
818
  onClick: toggle,
486
- children: [status === "collapsed" ? messages.seeMore : messages.seeLess, /* @__PURE__ */ jsx(Icon_default, { src: see_more_default })]
819
+ children: [status === "collapsed" ? messages.seeMore : messages.seeLess, /* @__PURE__ */ jsx$1(Icon_default, { src: see_more_default })]
487
820
  })]
488
821
  });
489
822
  };
@@ -572,7 +905,7 @@ const VideoThumbnail = ({ href, imageUrl, title, progress, topTags = [], bottomT
572
905
  Image: "img",
573
906
  ...slots
574
907
  };
575
- return /* @__PURE__ */ jsx("div", {
908
+ return /* @__PURE__ */ jsx$1("div", {
576
909
  css: { position: "relative" },
577
910
  children: /* @__PURE__ */ jsxs(components.Link, {
578
911
  css: videoThumbnailStyles,
@@ -580,7 +913,7 @@ const VideoThumbnail = ({ href, imageUrl, title, progress, topTags = [], bottomT
580
913
  onClick,
581
914
  onContextMenu: (event) => event.preventDefault(),
582
915
  children: [
583
- /* @__PURE__ */ jsx(components.Image, {
916
+ /* @__PURE__ */ jsx$1(components.Image, {
584
917
  css: thumbnailImageStyles,
585
918
  src: imageUrl,
586
919
  alt: title,
@@ -588,15 +921,15 @@ const VideoThumbnail = ({ href, imageUrl, title, progress, topTags = [], bottomT
588
921
  loading: "lazy"
589
922
  }),
590
923
  children,
591
- progress >= 0 && /* @__PURE__ */ jsx("div", {
924
+ progress >= 0 && /* @__PURE__ */ jsx$1("div", {
592
925
  css: progressStyles,
593
- children: /* @__PURE__ */ jsx("span", { style: { width: `${progress * 100}%` } })
926
+ children: /* @__PURE__ */ jsx$1("span", { style: { width: `${progress * 100}%` } })
594
927
  }),
595
928
  /* @__PURE__ */ jsxs("div", {
596
929
  css: tagBaseStyles,
597
- children: [/* @__PURE__ */ jsx("div", { children: topTags?.map((tag) => /* @__PURE__ */ jsx("div", { children: tag }, tag)) }), bottomTags.length > 0 && /* @__PURE__ */ jsx("div", {
930
+ children: [/* @__PURE__ */ jsx$1("div", { children: topTags?.map((tag) => /* @__PURE__ */ jsx$1("div", { children: tag }, tag)) }), bottomTags.length > 0 && /* @__PURE__ */ jsx$1("div", {
598
931
  css: [tagBottomStyles, progress >= 0 && { marginBottom: "8px" }],
599
- children: bottomTags?.map((tag) => /* @__PURE__ */ jsx("div", { children: tag }, tag))
932
+ children: bottomTags?.map((tag) => /* @__PURE__ */ jsx$1("div", { children: tag }, tag))
600
933
  })]
601
934
  })
602
935
  ]
@@ -679,11 +1012,11 @@ const desktopDescriptionStyle = {
679
1012
  margin: "0.75rem 0",
680
1013
  WebkitLineClamp: LINES_OF_DESCRIPTION
681
1014
  };
682
- const OptionalLink = ({ slots, href, children, ...rest }) => href ? /* @__PURE__ */ jsx(slots.Link, {
1015
+ const OptionalLink = ({ slots, href, children, ...rest }) => href ? /* @__PURE__ */ jsx$1(slots.Link, {
683
1016
  href,
684
1017
  ...rest,
685
1018
  children
686
- }) : /* @__PURE__ */ jsx("a", {
1019
+ }) : /* @__PURE__ */ jsx$1("a", {
687
1020
  ...rest,
688
1021
  children
689
1022
  });
@@ -692,7 +1025,7 @@ const VideoItem = ({ style, href = "", thumbnailHref = href, imageUrl = "", data
692
1025
  css: [videoItemStyle, style],
693
1026
  children: [/* @__PURE__ */ jsxs("div", {
694
1027
  css: infoStyle,
695
- children: [/* @__PURE__ */ jsx(VideoThumbnail_default, {
1028
+ children: [/* @__PURE__ */ jsx$1(VideoThumbnail_default, {
696
1029
  href: thumbnailHref,
697
1030
  imageUrl,
698
1031
  topTags,
@@ -705,18 +1038,18 @@ const VideoItem = ({ style, href = "", thumbnailHref = href, imageUrl = "", data
705
1038
  slots,
706
1039
  href,
707
1040
  children: [
708
- /* @__PURE__ */ jsx("div", {
1041
+ /* @__PURE__ */ jsx$1("div", {
709
1042
  css: titleStyle,
710
1043
  children: data.title || data.display_text
711
1044
  }),
712
- /* @__PURE__ */ jsx("div", {
1045
+ /* @__PURE__ */ jsx$1("div", {
713
1046
  css: [descriptionStyle, desktopDescriptionStyle],
714
1047
  children: data.synopsis
715
1048
  }),
716
- secondaryText ? /* @__PURE__ */ jsx("div", { children: secondaryText }) : null
1049
+ secondaryText ? /* @__PURE__ */ jsx$1("div", { children: secondaryText }) : null
717
1050
  ]
718
1051
  })]
719
- }), /* @__PURE__ */ jsx(OptionalLink, {
1052
+ }), /* @__PURE__ */ jsx$1(OptionalLink, {
720
1053
  slots,
721
1054
  href,
722
1055
  css: descriptionStyle,
@@ -726,4 +1059,4 @@ const VideoItem = ({ style, href = "", thumbnailHref = href, imageUrl = "", data
726
1059
  var VideoItem_default = VideoItem;
727
1060
 
728
1061
  //#endregion
729
- 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 };
1062
+ 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 CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kkcompany/app-ui",
3
- "version": "0.1.25",
3
+ "version": "0.1.26",
4
4
  "module": "dist/index.mjs",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.mts",