@kkcompany/app-ui 0.1.31 → 0.1.33

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 +40 -30
  2. package/dist/index.d.cts +4 -0
  3. package/dist/index.d.mts +4 -0
  4. package/dist/index.mjs +40 -30
  5. package/package.json +1 -1
package/dist/index.cjs CHANGED
@@ -342,6 +342,8 @@ var Banner_default = Banner;
342
342
  //#endregion
343
343
  //#region src/Dropdown.tsx
344
344
  /** @jsxImportSource @emotion/react */
345
+ const dropdownBorderRadius = "4px";
346
+ const itemRowElemMarginXSm = "16px";
345
347
  const dropdownStyle = __emotion_react.css`
346
348
  .text-truncate {
347
349
  display: block;
@@ -411,7 +413,7 @@ const dropdownStyle = __emotion_react.css`
411
413
 
412
414
  .kks-dropdown__menu {
413
415
  width: 92%;
414
- border-radius: $dropdown-border-radius;
416
+ border-radius: ${dropdownBorderRadius};
415
417
  background: #fff;
416
418
  overflow: hidden;
417
419
  }
@@ -421,7 +423,7 @@ const dropdownStyle = __emotion_react.css`
421
423
  border-bottom: 1px solid #e9ecef;
422
424
 
423
425
  .kks-dropdown__menu-title {
424
- margin-left: $item-row-elem-margin-x-sm;
426
+ margin-left: ${itemRowElemMarginXSm};
425
427
  font-size: 1.25rem;
426
428
  }
427
429
 
@@ -429,7 +431,7 @@ const dropdownStyle = __emotion_react.css`
429
431
  display: flex;
430
432
  align-items: center;
431
433
  margin-left: auto;
432
- padding: 0 $item-row-elem-margin-x-sm;
434
+ padding: 0 ${itemRowElemMarginXSm};
433
435
  height: 100%;
434
436
  outline: none;
435
437
  }
@@ -449,7 +451,7 @@ const dropdownStyle = __emotion_react.css`
449
451
  overflow-y: auto;
450
452
 
451
453
  .kks-dropdown__menu-link {
452
- padding: 10px $item-row-elem-margin-x-sm;
454
+ padding: 10px ${itemRowElemMarginXSm};
453
455
  text-decoration: none;
454
456
  color: #000;
455
457
  outline: none;
@@ -739,7 +741,7 @@ const modalStyle = __emotion_react.css`
739
741
  opacity: 1;
740
742
  }
741
743
 
742
- :where(.modal__content) {
744
+ & :where(.modal__content) {
743
745
  width: 100%;
744
746
  max-width: 700px;
745
747
  margin: auto 0;
@@ -878,18 +880,18 @@ const paginationStyle = __emotion_react.css`
878
880
  display: inline-block;
879
881
  }
880
882
 
881
- :where(.kks-pagination__content) {
883
+ & :where(.kks-pagination__content) {
882
884
  display: flex;
883
885
  margin: 0;
884
886
  padding-left: 0;
885
887
  list-style: none;
886
888
  }
887
889
 
888
- :where(.kks-pagination__num-item:not(.kks-pagination__num-item--current)) {
890
+ & :where(.kks-pagination__num-item:not(.kks-pagination__num-item--current)) {
889
891
  display: none;
890
892
  }
891
893
 
892
- :where(.kks-pagination__btn) {
894
+ & :where(.kks-pagination__btn) {
893
895
  display: block;
894
896
  margin: 0 12px;
895
897
  padding: 0.64rem 0.8rem;
@@ -899,43 +901,43 @@ const paginationStyle = __emotion_react.css`
899
901
  user-select: none;
900
902
  }
901
903
 
902
- :where(.kks-pagination__num-btn) {
904
+ & :where(.kks-pagination__num-btn) {
903
905
  text-decoration: none;
904
906
  color: #666;
905
907
  }
906
908
 
907
- :where(.kks-pagination__num-btn)::after {
909
+ & :where(.kks-pagination__num-btn)::after {
908
910
  content: attr(data-total-pages);
909
911
  }
910
912
 
911
- :where(.kks-pagination__arrow-btn--prev) {
913
+ & :where(.kks-pagination__arrow-btn--prev) {
912
914
  margin-left: 0;
913
915
  }
914
916
 
915
- :where(.kks-pagination__arrow-btn--next) {
917
+ & :where(.kks-pagination__arrow-btn--next) {
916
918
  margin-right: 0;
917
919
  }
918
920
 
919
- :where(.kks-pagination__arrow-btn--hidden) {
921
+ & :where(.kks-pagination__arrow-btn--hidden) {
920
922
  display: none;
921
923
  }
922
924
 
923
- :where(.kks-pagination__icon) {
925
+ & :where(.kks-pagination__icon) {
924
926
  display: block;
925
927
  width: 1rem;
926
928
  height: 1rem;
927
929
  background-size: contain;
928
930
  }
929
931
 
930
- :where(.kks-pagination__icon-prev) {
931
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 129 129'%3E%3Cpath fill='%23666' d='M88.6 121.3a4.1 4.1 0 0 1-5.8 0L28.9 67.4a4.1 4.1 0 0 1 0-5.8L82.8 7.7a4.1 4.1 0 0 1 5.8 5.8l-51 51 51 51a4.1 4.1 0 0 1 0 5.8z'/%3E%3C/svg%3E");
932
+ & :where(.kks-pagination__icon-prev) {
933
+ background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAxMjkgMTI5IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMjkgMTI5IiB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiPjxnIHRyYW5zZm9ybT0ibWF0cml4KC0xIDAgMCAxIDEyOSAwKSI+PGc+ICAgIDxwYXRoIGQ9Im00MC40LDEyMS4zYy0wLjgsMC44LTEuOCwxLjItMi45LDEuMnMtMi4xLTAuNC0yLjktMS4yYy0xLjYtMS42LTEuNi00LjIgMC01LjhsNTEtNTEtNTEtNTFjLTEuNi0xLjYtMS42LTQuMiAwLTUuOCAxLjYtMS42IDQuMi0xLjYgNS44LDBsNTMuOSw1My45YzEuNiwxLjYgMS42LDQuMiAwLDUuOGwtNTMuOSw1My45eiIgZGF0YS1vcmlnaW5hbD0iIzAwMDAwMCIgY2xhc3M9ImFjdGl2ZS1wYXRoIiBkYXRhLW9sZF9jb2xvcj0iIzAwMDAwMCIgZmlsbD0iIzY2NjY2NiIvPiAgPC9nPjwvZz4gPC9zdmc+");
932
934
  }
933
935
 
934
- :where(.kks-pagination__icon-next) {
935
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 129 129'%3E%3Cpath fill='%23666' d='M40.4 121.3a4.1 4.1 0 0 1 0-5.8l51-51-51-51a4.1 4.1 0 0 1 5.8-5.8l53.9 53.9a4.1 4.1 0 0 1 0 5.8l-53.9 53.9a4.1 4.1 0 0 1-5.8 0z'/%3E%3C/svg%3E");
936
+ & :where(.kks-pagination__icon-next) {
937
+ background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAxMjkgMTI5IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMjkgMTI5IiB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiPjxnPjxnPiAgICA8cGF0aCBkPSJtNDAuNCwxMjEuM2MtMC44LDAuOC0xLjgsMS4yLTIuOSwxLjJzLTIuMS0wLjQtMi45LTEuMmMtMS42LTEuNi0xLjYtNC4yIDAtNS44bDUxLTUxLTUxLTUxYy0xLjYtMS42LTEuNi00LjIgMC01LjggMS42LTEuNiA0LjItMS42IDUuOCwwbDUzLjksNTMuOWMxLjYsMS42IDEuNiw0LjIgMCw1LjhsLTUzLjksNTMuOXoiIGRhdGEtb3JpZ2luYWw9IiMwMDAwMDAiIGNsYXNzPSJhY3RpdmUtcGF0aCIgZGF0YS1vbGRfY29sb3I9IiMwMDAwMDAiIGZpbGw9IiM2NjY2NjYiLz4gIDwvZz48L2c+IDwvc3ZnPg==");
936
938
  }
937
939
 
938
- :where(.kks-pagination__dots) {
940
+ & :where(.kks-pagination__dots) {
939
941
  display: block;
940
942
  margin: 0 12px;
941
943
  padding: 0.64rem 0;
@@ -946,29 +948,37 @@ const paginationStyle = __emotion_react.css`
946
948
  }
947
949
 
948
950
  @media (min-width: 768px) {
949
- :where(.kks-pagination__num-item:not(.kks-pagination__num-item--current)) {
951
+ & :where(.kks-pagination__num-item:not(.kks-pagination__num-item--current)) {
950
952
  display: block;
951
953
  }
952
954
 
953
- :where(.kks-pagination__btn),
954
- :where(.kks-pagination__dots) {
955
+ & :where(.kks-pagination__btn),
956
+ & :where(.kks-pagination__dots) {
955
957
  margin: 0 6px;
956
958
  }
957
959
 
958
- :where(.kks-pagination__num-btn)::after {
960
+ & :where(.kks-pagination__num-btn)::after {
959
961
  content: "";
960
962
  }
961
963
 
962
- :where(.kks-pagination__num-btn:hover:not(.kks-pagination__num-btn--active)),
963
- :where(.kks-pagination__arrow-btn:hover) {
964
+ & :where(.kks-pagination__num-btn:hover:not(.kks-pagination__num-btn--active)),
965
+ & :where(.kks-pagination__arrow-btn:hover) {
964
966
  background: rgba(0, 161, 179, 0.1);
965
967
  }
966
968
 
967
- :where(.kks-pagination__num-btn--active) {
969
+ & :where(.kks-pagination__num-btn--active) {
968
970
  font-weight: 500;
969
971
  color: #fff;
970
972
  background: #00a1b3;
971
973
  }
974
+
975
+ & :where(.kks-pagination__arrow-btn--prev) {
976
+ margin-left: 0;
977
+ }
978
+
979
+ & :where(.kks-pagination__arrow-btn--next) {
980
+ margin-right: 0;
981
+ }
972
982
  }
973
983
  `;
974
984
 
@@ -1430,7 +1440,7 @@ const OptionalLink = ({ slots, href, children, ...rest }) => href ? /* @__PURE__
1430
1440
  ...rest,
1431
1441
  children
1432
1442
  });
1433
- const VideoItem = ({ style, href = "", thumbnailHref = href, imageUrl = "", data = {}, secondaryText, progress, topTags = [], bottomTags = [], slots = { Link: "a" }, onClick, onClickThumbnail, thumbnailChildren }) => /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsxs)("div", {
1443
+ const VideoItem = ({ style, href = "", thumbnailHref = href, imageUrl = "", data = {}, title = data.title || data.display_text, synopsis = data.synopsis, secondaryText, progress, topTags = [], bottomTags = [], slots = { Link: "a" }, onClick, onClickThumbnail, thumbnailChildren }) => /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsxs)("div", {
1434
1444
  onClick,
1435
1445
  css: [videoItemStyle, style],
1436
1446
  children: [/* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsxs)("div", {
@@ -1450,11 +1460,11 @@ const VideoItem = ({ style, href = "", thumbnailHref = href, imageUrl = "", data
1450
1460
  children: [
1451
1461
  /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)("div", {
1452
1462
  css: titleStyle,
1453
- children: data.title || data.display_text
1463
+ children: title
1454
1464
  }),
1455
1465
  /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)("div", {
1456
1466
  css: [descriptionStyle, desktopDescriptionStyle],
1457
- children: data.synopsis
1467
+ children: synopsis
1458
1468
  }),
1459
1469
  secondaryText ? /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)("div", { children: secondaryText }) : null
1460
1470
  ]
@@ -1463,7 +1473,7 @@ const VideoItem = ({ style, href = "", thumbnailHref = href, imageUrl = "", data
1463
1473
  slots,
1464
1474
  href,
1465
1475
  css: descriptionStyle,
1466
- children: data.synopsis
1476
+ children: synopsis
1467
1477
  })]
1468
1478
  });
1469
1479
  var VideoItem_default = VideoItem;
package/dist/index.d.cts CHANGED
@@ -152,6 +152,8 @@ declare const VideoItem: ({
152
152
  thumbnailHref,
153
153
  imageUrl,
154
154
  data,
155
+ title,
156
+ synopsis,
155
157
  secondaryText,
156
158
  progress,
157
159
  topTags,
@@ -166,6 +168,8 @@ declare const VideoItem: ({
166
168
  thumbnailHref?: string;
167
169
  imageUrl?: string;
168
170
  data?: VideoDetail;
171
+ title?: string;
172
+ synopsis?: string;
169
173
  secondaryText?: string;
170
174
  progress?: number;
171
175
  topTags?: string[];
package/dist/index.d.mts CHANGED
@@ -152,6 +152,8 @@ declare const VideoItem: ({
152
152
  thumbnailHref,
153
153
  imageUrl,
154
154
  data,
155
+ title,
156
+ synopsis,
155
157
  secondaryText,
156
158
  progress,
157
159
  topTags,
@@ -166,6 +168,8 @@ declare const VideoItem: ({
166
168
  thumbnailHref?: string;
167
169
  imageUrl?: string;
168
170
  data?: VideoDetail;
171
+ title?: string;
172
+ synopsis?: string;
169
173
  secondaryText?: string;
170
174
  progress?: number;
171
175
  topTags?: string[];
package/dist/index.mjs CHANGED
@@ -342,6 +342,8 @@ var Banner_default = Banner;
342
342
  //#endregion
343
343
  //#region src/Dropdown.tsx
344
344
  /** @jsxImportSource @emotion/react */
345
+ const dropdownBorderRadius = "4px";
346
+ const itemRowElemMarginXSm = "16px";
345
347
  const dropdownStyle = css`
346
348
  .text-truncate {
347
349
  display: block;
@@ -411,7 +413,7 @@ const dropdownStyle = css`
411
413
 
412
414
  .kks-dropdown__menu {
413
415
  width: 92%;
414
- border-radius: $dropdown-border-radius;
416
+ border-radius: ${dropdownBorderRadius};
415
417
  background: #fff;
416
418
  overflow: hidden;
417
419
  }
@@ -421,7 +423,7 @@ const dropdownStyle = css`
421
423
  border-bottom: 1px solid #e9ecef;
422
424
 
423
425
  .kks-dropdown__menu-title {
424
- margin-left: $item-row-elem-margin-x-sm;
426
+ margin-left: ${itemRowElemMarginXSm};
425
427
  font-size: 1.25rem;
426
428
  }
427
429
 
@@ -429,7 +431,7 @@ const dropdownStyle = css`
429
431
  display: flex;
430
432
  align-items: center;
431
433
  margin-left: auto;
432
- padding: 0 $item-row-elem-margin-x-sm;
434
+ padding: 0 ${itemRowElemMarginXSm};
433
435
  height: 100%;
434
436
  outline: none;
435
437
  }
@@ -449,7 +451,7 @@ const dropdownStyle = css`
449
451
  overflow-y: auto;
450
452
 
451
453
  .kks-dropdown__menu-link {
452
- padding: 10px $item-row-elem-margin-x-sm;
454
+ padding: 10px ${itemRowElemMarginXSm};
453
455
  text-decoration: none;
454
456
  color: #000;
455
457
  outline: none;
@@ -739,7 +741,7 @@ const modalStyle = css`
739
741
  opacity: 1;
740
742
  }
741
743
 
742
- :where(.modal__content) {
744
+ & :where(.modal__content) {
743
745
  width: 100%;
744
746
  max-width: 700px;
745
747
  margin: auto 0;
@@ -878,18 +880,18 @@ const paginationStyle = css`
878
880
  display: inline-block;
879
881
  }
880
882
 
881
- :where(.kks-pagination__content) {
883
+ & :where(.kks-pagination__content) {
882
884
  display: flex;
883
885
  margin: 0;
884
886
  padding-left: 0;
885
887
  list-style: none;
886
888
  }
887
889
 
888
- :where(.kks-pagination__num-item:not(.kks-pagination__num-item--current)) {
890
+ & :where(.kks-pagination__num-item:not(.kks-pagination__num-item--current)) {
889
891
  display: none;
890
892
  }
891
893
 
892
- :where(.kks-pagination__btn) {
894
+ & :where(.kks-pagination__btn) {
893
895
  display: block;
894
896
  margin: 0 12px;
895
897
  padding: 0.64rem 0.8rem;
@@ -899,43 +901,43 @@ const paginationStyle = css`
899
901
  user-select: none;
900
902
  }
901
903
 
902
- :where(.kks-pagination__num-btn) {
904
+ & :where(.kks-pagination__num-btn) {
903
905
  text-decoration: none;
904
906
  color: #666;
905
907
  }
906
908
 
907
- :where(.kks-pagination__num-btn)::after {
909
+ & :where(.kks-pagination__num-btn)::after {
908
910
  content: attr(data-total-pages);
909
911
  }
910
912
 
911
- :where(.kks-pagination__arrow-btn--prev) {
913
+ & :where(.kks-pagination__arrow-btn--prev) {
912
914
  margin-left: 0;
913
915
  }
914
916
 
915
- :where(.kks-pagination__arrow-btn--next) {
917
+ & :where(.kks-pagination__arrow-btn--next) {
916
918
  margin-right: 0;
917
919
  }
918
920
 
919
- :where(.kks-pagination__arrow-btn--hidden) {
921
+ & :where(.kks-pagination__arrow-btn--hidden) {
920
922
  display: none;
921
923
  }
922
924
 
923
- :where(.kks-pagination__icon) {
925
+ & :where(.kks-pagination__icon) {
924
926
  display: block;
925
927
  width: 1rem;
926
928
  height: 1rem;
927
929
  background-size: contain;
928
930
  }
929
931
 
930
- :where(.kks-pagination__icon-prev) {
931
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 129 129'%3E%3Cpath fill='%23666' d='M88.6 121.3a4.1 4.1 0 0 1-5.8 0L28.9 67.4a4.1 4.1 0 0 1 0-5.8L82.8 7.7a4.1 4.1 0 0 1 5.8 5.8l-51 51 51 51a4.1 4.1 0 0 1 0 5.8z'/%3E%3C/svg%3E");
932
+ & :where(.kks-pagination__icon-prev) {
933
+ background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAxMjkgMTI5IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMjkgMTI5IiB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiPjxnIHRyYW5zZm9ybT0ibWF0cml4KC0xIDAgMCAxIDEyOSAwKSI+PGc+ICAgIDxwYXRoIGQ9Im00MC40LDEyMS4zYy0wLjgsMC44LTEuOCwxLjItMi45LDEuMnMtMi4xLTAuNC0yLjktMS4yYy0xLjYtMS42LTEuNi00LjIgMC01LjhsNTEtNTEtNTEtNTFjLTEuNi0xLjYtMS42LTQuMiAwLTUuOCAxLjYtMS42IDQuMi0xLjYgNS44LDBsNTMuOSw1My45YzEuNiwxLjYgMS42LDQuMiAwLDUuOGwtNTMuOSw1My45eiIgZGF0YS1vcmlnaW5hbD0iIzAwMDAwMCIgY2xhc3M9ImFjdGl2ZS1wYXRoIiBkYXRhLW9sZF9jb2xvcj0iIzAwMDAwMCIgZmlsbD0iIzY2NjY2NiIvPiAgPC9nPjwvZz4gPC9zdmc+");
932
934
  }
933
935
 
934
- :where(.kks-pagination__icon-next) {
935
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 129 129'%3E%3Cpath fill='%23666' d='M40.4 121.3a4.1 4.1 0 0 1 0-5.8l51-51-51-51a4.1 4.1 0 0 1 5.8-5.8l53.9 53.9a4.1 4.1 0 0 1 0 5.8l-53.9 53.9a4.1 4.1 0 0 1-5.8 0z'/%3E%3C/svg%3E");
936
+ & :where(.kks-pagination__icon-next) {
937
+ background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAxMjkgMTI5IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMjkgMTI5IiB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiPjxnPjxnPiAgICA8cGF0aCBkPSJtNDAuNCwxMjEuM2MtMC44LDAuOC0xLjgsMS4yLTIuOSwxLjJzLTIuMS0wLjQtMi45LTEuMmMtMS42LTEuNi0xLjYtNC4yIDAtNS44bDUxLTUxLTUxLTUxYy0xLjYtMS42LTEuNi00LjIgMC01LjggMS42LTEuNiA0LjItMS42IDUuOCwwbDUzLjksNTMuOWMxLjYsMS42IDEuNiw0LjIgMCw1LjhsLTUzLjksNTMuOXoiIGRhdGEtb3JpZ2luYWw9IiMwMDAwMDAiIGNsYXNzPSJhY3RpdmUtcGF0aCIgZGF0YS1vbGRfY29sb3I9IiMwMDAwMDAiIGZpbGw9IiM2NjY2NjYiLz4gIDwvZz48L2c+IDwvc3ZnPg==");
936
938
  }
937
939
 
938
- :where(.kks-pagination__dots) {
940
+ & :where(.kks-pagination__dots) {
939
941
  display: block;
940
942
  margin: 0 12px;
941
943
  padding: 0.64rem 0;
@@ -946,29 +948,37 @@ const paginationStyle = css`
946
948
  }
947
949
 
948
950
  @media (min-width: 768px) {
949
- :where(.kks-pagination__num-item:not(.kks-pagination__num-item--current)) {
951
+ & :where(.kks-pagination__num-item:not(.kks-pagination__num-item--current)) {
950
952
  display: block;
951
953
  }
952
954
 
953
- :where(.kks-pagination__btn),
954
- :where(.kks-pagination__dots) {
955
+ & :where(.kks-pagination__btn),
956
+ & :where(.kks-pagination__dots) {
955
957
  margin: 0 6px;
956
958
  }
957
959
 
958
- :where(.kks-pagination__num-btn)::after {
960
+ & :where(.kks-pagination__num-btn)::after {
959
961
  content: "";
960
962
  }
961
963
 
962
- :where(.kks-pagination__num-btn:hover:not(.kks-pagination__num-btn--active)),
963
- :where(.kks-pagination__arrow-btn:hover) {
964
+ & :where(.kks-pagination__num-btn:hover:not(.kks-pagination__num-btn--active)),
965
+ & :where(.kks-pagination__arrow-btn:hover) {
964
966
  background: rgba(0, 161, 179, 0.1);
965
967
  }
966
968
 
967
- :where(.kks-pagination__num-btn--active) {
969
+ & :where(.kks-pagination__num-btn--active) {
968
970
  font-weight: 500;
969
971
  color: #fff;
970
972
  background: #00a1b3;
971
973
  }
974
+
975
+ & :where(.kks-pagination__arrow-btn--prev) {
976
+ margin-left: 0;
977
+ }
978
+
979
+ & :where(.kks-pagination__arrow-btn--next) {
980
+ margin-right: 0;
981
+ }
972
982
  }
973
983
  `;
974
984
 
@@ -1430,7 +1440,7 @@ const OptionalLink = ({ slots, href, children, ...rest }) => href ? /* @__PURE__
1430
1440
  ...rest,
1431
1441
  children
1432
1442
  });
1433
- const VideoItem = ({ style, href = "", thumbnailHref = href, imageUrl = "", data = {}, secondaryText, progress, topTags = [], bottomTags = [], slots = { Link: "a" }, onClick, onClickThumbnail, thumbnailChildren }) => /* @__PURE__ */ jsxs("div", {
1443
+ const VideoItem = ({ style, href = "", thumbnailHref = href, imageUrl = "", data = {}, title = data.title || data.display_text, synopsis = data.synopsis, secondaryText, progress, topTags = [], bottomTags = [], slots = { Link: "a" }, onClick, onClickThumbnail, thumbnailChildren }) => /* @__PURE__ */ jsxs("div", {
1434
1444
  onClick,
1435
1445
  css: [videoItemStyle, style],
1436
1446
  children: [/* @__PURE__ */ jsxs("div", {
@@ -1450,11 +1460,11 @@ const VideoItem = ({ style, href = "", thumbnailHref = href, imageUrl = "", data
1450
1460
  children: [
1451
1461
  /* @__PURE__ */ jsx$1("div", {
1452
1462
  css: titleStyle,
1453
- children: data.title || data.display_text
1463
+ children: title
1454
1464
  }),
1455
1465
  /* @__PURE__ */ jsx$1("div", {
1456
1466
  css: [descriptionStyle, desktopDescriptionStyle],
1457
- children: data.synopsis
1467
+ children: synopsis
1458
1468
  }),
1459
1469
  secondaryText ? /* @__PURE__ */ jsx$1("div", { children: secondaryText }) : null
1460
1470
  ]
@@ -1463,7 +1473,7 @@ const VideoItem = ({ style, href = "", thumbnailHref = href, imageUrl = "", data
1463
1473
  slots,
1464
1474
  href,
1465
1475
  css: descriptionStyle,
1466
- children: data.synopsis
1476
+ children: synopsis
1467
1477
  })]
1468
1478
  });
1469
1479
  var VideoItem_default = VideoItem;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kkcompany/app-ui",
3
- "version": "0.1.31",
3
+ "version": "0.1.33",
4
4
  "module": "dist/index.mjs",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.mts",