@crystaldesign/content-item 24.9.1 → 24.10.0-beta.10

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 (2) hide show
  1. package/build/esm/index.js +4 -4
  2. package/package.json +3 -3
package/build/esm/index.js CHANGED
@@ -3,7 +3,7 @@ import { useState } from 'react';
3
3
  import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
4
4
  import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
5
5
  import { Swiper, SwiperSlide } from 'swiper/react';
6
- import { FreeMode, Navigation, Thumbs } from 'swiper';
6
+ import { FreeMode, Navigation, Thumbs } from 'swiper/modules';
7
7
 
8
8
  (function() {
9
9
  const env = {"STAGE":"production"};
@@ -153,12 +153,12 @@ var Title = function Title(_ref) {
153
153
  });
154
154
  };
155
155
 
156
- var css_248z$1 = "/*Free mode*/\n.swiper-free-mode > .swiper-wrapper {\n transition-timing-function: ease-out;\n margin: 0 auto;\n}\n/*navigation*/\n:root {\n --swiper-navigation-size: 44px;\n}\n.swiper-button-next,\n.swiper-button-prev {\n position: absolute;\n top: 50%;\n width: calc(44px / 44 * 27);\n width: calc(var(--swiper-navigation-size) / 44 * 27);\n height: 44px;\n height: var(--swiper-navigation-size);\n margin-top: calc(0px - (44px / 2));\n margin-top: calc(0px - (var(--swiper-navigation-size) / 2));\n z-index: 10;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n color: #007aff;\n color: var(--swiper-navigation-color, var(--swiper-theme-color));\n}\n.swiper-button-next.swiper-button-disabled,\n.swiper-button-prev.swiper-button-disabled {\n opacity: 0.35;\n cursor: auto;\n pointer-events: none;\n}\n.swiper-button-next.swiper-button-hidden,\n.swiper-button-prev.swiper-button-hidden {\n opacity: 0;\n cursor: auto;\n pointer-events: none;\n}\n.swiper-navigation-disabled .swiper-button-next,\n.swiper-navigation-disabled .swiper-button-prev {\n display: none !important;\n}\n.swiper-button-next:after,\n.swiper-button-prev:after {\n text-transform: none !important;\n}\n.swiper-button-next:after,\n.swiper-button-prev:after {\n font-family: swiper-icons;\n font-size: 44px;\n font-size: var(--swiper-navigation-size);\n letter-spacing: 0;\n font-feature-settings: ;\n font-variant: normal;\n font-variant: initial;\n line-height: 1;\n}\n.swiper-button-prev,\n.swiper-rtl .swiper-button-next {\n left: 10px;\n right: auto;\n}\n.swiper-button-prev:after,\n.swiper-rtl .swiper-button-next:after {\n content: 'prev';\n}\n.swiper-button-next,\n.swiper-rtl .swiper-button-prev {\n right: 10px;\n left: auto;\n}\n.swiper-button-next:after,\n.swiper-rtl .swiper-button-prev:after {\n content: 'next';\n}\n.swiper-button-lock {\n display: none;\n}\n\n/*swiper min css*/\n\n@font-face {\n font-family: swiper-icons;\n src: url('data:application/font-woff;charset=utf-8;base64, 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');\n font-weight: 400;\n font-style: normal;\n}\n:root {\n --swiper-theme-color: #007aff;\n}\n.swiper {\n margin-left: auto;\n margin-right: auto;\n position: relative;\n overflow: hidden;\n list-style: none;\n padding: 0;\n z-index: 1;\n}\n.swiper-vertical > .swiper-wrapper {\n flex-direction: column;\n}\n.swiper-wrapper {\n position: relative;\n width: 100%;\n height: 100%;\n z-index: 1;\n display: flex;\n transition-property: transform;\n box-sizing: content-box;\n}\n.swiper-android .swiper-slide,\n.swiper-wrapper {\n transform: translate3d(0px, 0, 0);\n}\n.swiper-pointer-events {\n touch-action: pan-y;\n}\n.swiper-pointer-events.swiper-vertical {\n touch-action: pan-x;\n}\n.swiper-slide {\n flex-shrink: 0;\n width: 100%;\n height: 100%;\n position: relative;\n transition-property: transform;\n}\n.swiper-slide-invisible-blank {\n visibility: hidden;\n}\n.swiper-autoheight,\n.swiper-autoheight .swiper-slide {\n height: auto;\n}\n.swiper-autoheight .swiper-wrapper {\n align-items: flex-start;\n transition-property: transform, height;\n}\n.swiper-backface-hidden .swiper-slide {\n transform: translateZ(0);\n backface-visibility: hidden;\n}\n.swiper-3d,\n.swiper-3d.swiper-css-mode .swiper-wrapper {\n perspective: 1200px;\n}\n.swiper-3d .swiper-cube-shadow,\n.swiper-3d .swiper-slide,\n.swiper-3d .swiper-slide-shadow,\n.swiper-3d .swiper-slide-shadow-bottom,\n.swiper-3d .swiper-slide-shadow-left,\n.swiper-3d .swiper-slide-shadow-right,\n.swiper-3d .swiper-slide-shadow-top,\n.swiper-3d .swiper-wrapper {\n transform-style: preserve-3d;\n}\n.swiper-3d .swiper-slide-shadow,\n.swiper-3d .swiper-slide-shadow-bottom,\n.swiper-3d .swiper-slide-shadow-left,\n.swiper-3d .swiper-slide-shadow-right,\n.swiper-3d .swiper-slide-shadow-top {\n position: absolute;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n z-index: 10;\n}\n.swiper-3d .swiper-slide-shadow {\n background: rgba(0, 0, 0, 0.15);\n}\n.swiper-3d .swiper-slide-shadow-left {\n background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));\n}\n.swiper-3d .swiper-slide-shadow-right {\n background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));\n}\n.swiper-3d .swiper-slide-shadow-top {\n background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));\n}\n.swiper-3d .swiper-slide-shadow-bottom {\n background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));\n}\n.swiper-css-mode > .swiper-wrapper {\n overflow: auto;\n scrollbar-width: none;\n -ms-overflow-style: none;\n}\n.swiper-css-mode > .swiper-wrapper::-webkit-scrollbar {\n display: none;\n}\n.swiper-css-mode > .swiper-wrapper > .swiper-slide {\n scroll-snap-align: start start;\n}\n.swiper-horizontal.swiper-css-mode > .swiper-wrapper {\n scroll-snap-type: x mandatory;\n}\n.swiper-vertical.swiper-css-mode > .swiper-wrapper {\n scroll-snap-type: y mandatory;\n}\n.swiper-centered > .swiper-wrapper::before {\n content: '';\n flex-shrink: 0;\n order: 9999;\n}\n[dir=\"ltr\"] .swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {\n margin-left: var(--swiper-centered-offset-before);\n}\n[dir=\"rtl\"] .swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {\n margin-right: var(--swiper-centered-offset-before);\n}\n.swiper-centered.swiper-horizontal > .swiper-wrapper::before {\n height: 100%;\n min-height: 1px;\n width: var(--swiper-centered-offset-after);\n}\n.swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child {\n margin-top: var(--swiper-centered-offset-before);\n}\n.swiper-centered.swiper-vertical > .swiper-wrapper::before {\n width: 100%;\n min-width: 1px;\n height: var(--swiper-centered-offset-after);\n}\n.swiper-centered > .swiper-wrapper > .swiper-slide {\n scroll-snap-align: center center;\n}\n";
156
+ var css_248z$1 = "/*Free mode*/\n#diva-content-item .swiper-free-mode > .swiper-wrapper {\n transition-timing-function: ease-out;\n margin: 0 auto;\n}\n/*navigation*/\n:root {\n --swiper-navigation-size: 44px;\n}\n#diva-content-item .swiper-button-next,\n#diva-content-item .swiper-button-prev {\n position: absolute;\n top: 50%;\n width: calc(44px / 44 * 27);\n width: calc(var(--swiper-navigation-size) / 44 * 27);\n height: 44px;\n height: var(--swiper-navigation-size);\n margin-top: calc(0px - (44px / 2));\n margin-top: calc(0px - (var(--swiper-navigation-size) / 2));\n z-index: 10;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n color: #007aff;\n color: var(--swiper-navigation-color, var(--swiper-theme-color));\n}\n#diva-content-item .swiper-button-next.swiper-button-disabled,\n#diva-content-item .swiper-button-prev.swiper-button-disabled {\n opacity: 0.35;\n cursor: auto;\n pointer-events: none;\n}\n#diva-content-item .swiper-button-next.swiper-button-hidden,\n#diva-content-item .swiper-button-prev.swiper-button-hidden {\n opacity: 0;\n cursor: auto;\n pointer-events: none;\n}\n#diva-content-item .swiper-navigation-disabled .swiper-button-next,\n#diva-content-item .swiper-navigation-disabled .swiper-button-prev {\n display: none !important;\n}\n#diva-content-item .swiper-button-next:after,\n#diva-content-item .swiper-button-prev:after {\n text-transform: none !important;\n}\n#diva-content-item .swiper-button-next:after,\n#diva-content-item .swiper-button-prev:after {\n font-family: swiper-icons;\n font-size: 44px;\n font-size: var(--swiper-navigation-size);\n letter-spacing: 0;\n font-feature-settings: ;\n font-variant: normal;\n font-variant: initial;\n line-height: 1;\n}\n#diva-content-item .swiper-button-prev,\n#diva-content-item .swiper-rtl .swiper-button-next {\n left: 10px;\n right: auto;\n}\n#diva-content-item .swiper-button-prev:after,\n#diva-content-item .swiper-rtl .swiper-button-next:after {\n content: 'prev';\n}\n#diva-content-item .swiper-button-next,\n#diva-content-item .swiper-rtl .swiper-button-prev {\n right: 10px;\n left: auto;\n}\n#diva-content-item .swiper-button-next:after,\n#diva-content-item .swiper-rtl .swiper-button-prev:after {\n content: 'next';\n}\n#diva-content-item .swiper-button-lock {\n display: none;\n}\n\n/*swiper min css*/\n\n@font-face {\n font-family: swiper-icons;\n src: url('data:application/font-woff;charset=utf-8;base64, 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');\n font-weight: 400;\n font-style: normal;\n}\n:root {\n --swiper-theme-color: #007aff;\n}\n#diva-content-item .swiper {\n margin-left: auto;\n margin-right: auto;\n position: relative;\n overflow: hidden;\n list-style: none;\n padding: 0;\n z-index: 1;\n}\n#diva-content-item .swiper-vertical > .swiper-wrapper {\n flex-direction: column;\n}\n#diva-content-item .swiper-wrapper {\n position: relative;\n width: 100%;\n height: 100%;\n z-index: 1;\n display: flex;\n transition-property: transform;\n box-sizing: content-box;\n}\n#diva-content-item .swiper-android .swiper-slide,\n#diva-content-item .swiper-wrapper {\n transform: translate3d(0px, 0, 0);\n}\n#diva-content-item .swiper-pointer-events {\n touch-action: pan-y;\n}\n#diva-content-item .swiper-pointer-events.swiper-vertical {\n touch-action: pan-x;\n}\n#diva-content-item .swiper-slide {\n flex-shrink: 0;\n width: 100%;\n height: 100%;\n position: relative;\n transition-property: transform;\n}\n#diva-content-item .swiper-slide-invisible-blank {\n visibility: hidden;\n}\n#diva-content-item .swiper-autoheight,\n#diva-content-item .swiper-autoheight .swiper-slide {\n height: auto;\n}\n#diva-content-item .swiper-autoheight .swiper-wrapper {\n align-items: flex-start;\n transition-property: transform, height;\n}\n#diva-content-item .swiper-backface-hidden .swiper-slide {\n transform: translateZ(0);\n backface-visibility: hidden;\n}\n#diva-content-item .swiper-3d,\n#diva-content-item .swiper-3d.swiper-css-mode .swiper-wrapper {\n perspective: 1200px;\n}\n#diva-content-item .swiper-3d .swiper-cube-shadow,\n#diva-content-item .swiper-3d .swiper-slide,\n#diva-content-item .swiper-3d .swiper-slide-shadow,\n#diva-content-item .swiper-3d .swiper-slide-shadow-bottom,\n#diva-content-item .swiper-3d .swiper-slide-shadow-left,\n#diva-content-item .swiper-3d .swiper-slide-shadow-right,\n#diva-content-item .swiper-3d .swiper-slide-shadow-top,\n#diva-content-item .swiper-3d .swiper-wrapper {\n transform-style: preserve-3d;\n}\n#diva-content-item .swiper-3d .swiper-slide-shadow,\n#diva-content-item .swiper-3d .swiper-slide-shadow-bottom,\n#diva-content-item .swiper-3d .swiper-slide-shadow-left,\n#diva-content-item .swiper-3d .swiper-slide-shadow-right,\n#diva-content-item .swiper-3d .swiper-slide-shadow-top {\n position: absolute;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n z-index: 10;\n}\n#diva-content-item .swiper-3d .swiper-slide-shadow {\n background: rgba(0, 0, 0, 0.15);\n}\n#diva-content-item .swiper-3d .swiper-slide-shadow-left {\n background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));\n}\n#diva-content-item .swiper-3d .swiper-slide-shadow-right {\n background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));\n}\n#diva-content-item .swiper-3d .swiper-slide-shadow-top {\n background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));\n}\n#diva-content-item .swiper-3d .swiper-slide-shadow-bottom {\n background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));\n}\n#diva-content-item .swiper-css-mode > .swiper-wrapper {\n overflow: auto;\n scrollbar-width: none;\n -ms-overflow-style: none;\n}\n#diva-content-item .swiper-css-mode > .swiper-wrapper::-webkit-scrollbar {\n display: none;\n}\n#diva-content-item .swiper-css-mode > .swiper-wrapper > .swiper-slide {\n scroll-snap-align: start start;\n}\n#diva-content-item .swiper-horizontal.swiper-css-mode > .swiper-wrapper {\n scroll-snap-type: x mandatory;\n}\n#diva-content-item .swiper-vertical.swiper-css-mode > .swiper-wrapper {\n scroll-snap-type: y mandatory;\n}\n#diva-content-item .swiper-centered > .swiper-wrapper::before {\n content: '';\n flex-shrink: 0;\n order: 9999;\n}\n[dir=\"ltr\"] #diva-content-item .swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {\n margin-left: var(--swiper-centered-offset-before);\n}\n[dir=\"rtl\"] #diva-content-item .swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {\n margin-right: var(--swiper-centered-offset-before);\n}\n#diva-content-item .swiper-centered.swiper-horizontal > .swiper-wrapper::before {\n height: 100%;\n min-height: 1px;\n width: var(--swiper-centered-offset-after);\n}\n#diva-content-item .swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child {\n margin-top: var(--swiper-centered-offset-before);\n}\n#diva-content-item .swiper-centered.swiper-vertical > .swiper-wrapper::before {\n width: 100%;\n min-width: 1px;\n height: var(--swiper-centered-offset-after);\n}\n#diva-content-item .swiper-centered > .swiper-wrapper > .swiper-slide {\n scroll-snap-align: center center;\n}\n";
157
157
  styleInject(css_248z$1);
158
158
 
159
159
  var mySwiper2 = "mySwiper2-mfrK1";
160
160
  var mySwiper = "mySwiper-urn8y";
161
- var css_248z = "#DivaContentItem .swiper {\n width: 100%;\n height: 100%;\n}\n#DivaContentItem .swiper-slide {\n text-align: center;\n font-size: 18px;\n background: #fff;\n\n /* Center slide text vertically */\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n#DivaContentItem .swiper {\n width: 100%;\n height: 300px;\n margin-left: auto;\n margin-right: auto;\n}\n#DivaContentItem .swiper-slide {\n background-size: cover;\n background-position: center;\n}\n#DivaContentItem .mySwiper2-mfrK1 {\n height: 80%;\n width: 100%;\n}\n#DivaContentItem .mySwiper-urn8y {\n height: 20%;\n box-sizing: border-box;\n padding: 10px 0;\n}\n#DivaContentItem .mySwiper-urn8y .swiper-slide {\n width: 25%;\n height: 100%;\n opacity: 0.4;\n}\n#DivaContentItem .mySwiper-urn8y .swiper-slide-thumb-active {\n opacity: 1;\n}\n";
161
+ var css_248z = "#diva-content-item .swiper {\n width: 100%;\n height: 100%;\n}\n#diva-content-item .swiper-slide {\n text-align: center;\n font-size: 18px;\n background: #fff;\n\n /* Center slide text vertically */\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n#diva-content-item .swiper {\n width: 100%;\n height: 300px;\n margin-left: auto;\n margin-right: auto;\n}\n#diva-content-item .swiper-slide {\n background-size: cover;\n background-position: center;\n}\n#diva-content-item .mySwiper2-mfrK1 {\n height: 80%;\n width: 100%;\n}\n#diva-content-item .mySwiper-urn8y {\n height: 20%;\n box-sizing: border-box;\n padding: 10px 0;\n}\n#diva-content-item .mySwiper-urn8y .swiper-slide {\n width: 25%;\n height: 100%;\n opacity: 0.4;\n}\n#diva-content-item .mySwiper-urn8y .swiper-slide-thumb-active {\n opacity: 1;\n}\n";
162
162
  styleInject(css_248z);
163
163
 
164
164
  function ownKeys$1(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -284,7 +284,7 @@ var ContentItems = function ContentItems(_ref) {
284
284
  return /*#__PURE__*/jsx(Fragment, {
285
285
  children: /*#__PURE__*/jsx("div", {
286
286
  style: wrapperStyle,
287
- id: 'DivaContentItem',
287
+ id: 'diva-content-item',
288
288
  children: contentItems.map(function (item, i) {
289
289
  return /*#__PURE__*/jsx(ContentItem, {
290
290
  item: item
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@crystaldesign/content-item",
3
- "version": "24.9.1",
3
+ "version": "24.10.0-beta.10",
4
4
  "license": "MIT",
5
5
  "scripts": {
6
6
  "storybook": "storybook dev -p 6006",
@@ -25,7 +25,7 @@
25
25
  "storybook": "^7.0.2"
26
26
  },
27
27
  "dependencies": {
28
- "swiper": "^8.3.2"
28
+ "swiper": "^11.1.7"
29
29
  },
30
30
  "peerDependencies": {
31
31
  "@crystaldesign/diva-core": "23.0.0-authmig.53",
@@ -34,5 +34,5 @@
34
34
  },
35
35
  "module": "build/esm/index.js",
36
36
  "types": "./build/types/content-item/src/index.d.ts",
37
- "gitHead": "d89ae004d0648211246e9b65663a4d19a151aca5"
37
+ "gitHead": "5379b713e41f91c177abdfc31041006c51f73d4e"
38
38
  }