@zenpatient-org/healthspan-marketing-ui 0.2.64 → 0.2.65

package/dist/components/AdvancedGallery/AdvancedGallery.cjs.js

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),h=require("react"),m=require("swiper/modules"),d=require("swiper/react"),q=require("../../utils/useSwiper/useSwiper.cjs.js"),y=require("../../utils/cn/cn.cjs.js");;/* empty css                                        */;/* empty css                                                    */;/* empty css                                                    */const j=require("../GalleryPagination/GalleryPagination.cjs.js"),r=require("../../src/components/AdvancedGallery/advancedGallery.module.css"),w=require("../Label/Label.cjs.js"),x=require("./components/VideoSlide/VideoSlide.cjs.js"),v=require("./components/ImageGalleryPagination/ImageGalleryPagination.cjs.js"),P=[m.Navigation],_=({items:a,label:s,className:u})=>{const{activeIndex:l,handleSlideTo:o,handleSlideChange:S,onSwiperInit:p,handleSwiperResize:g,handleUserInteraction:i}=q.useSwiperWithAutoPlay(5e3),c=h.useCallback(n=>{i(),o(n)},[i,o]);return e.jsxs("div",{className:y.cn(r.root,u),children:[s&&e.jsx("div",{className:r.labelWrap,children:e.jsx(w.Label,{color:"black",size:"sm",children:s})}),e.jsx(d.Swiper,{onSwiper:p,onResize:g,onSlideChange:S,onTouchStart:i,onTouchEnd:i,modules:P,spaceBetween:0,slidesPerView:1,className:r.swiper,children:a.map((n,t)=>e.jsxs(d.SwiperSlide,{children:[n.mediaType==="image"&&e.jsx("div",{className:r.imageWrapper,children:e.jsx("img",{src:n.url,alt:"product image",className:r.image,onClick:i})}),n.mediaType==="video"&&e.jsx(x.VideoSlide,{item:n,isActive:l===t,onClick:i})]},t))}),e.jsx(v.ImageGalleryPagination,{items:a,activeIndex:l,onSelect:c}),e.jsx(j.GalleryPagination,{count:a.length,activeIndex:l,onSelect:c})]})};exports.AdvancedGallery=_;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),m=require("react"),q=require("swiper/modules"),d=require("swiper/react"),y=require("../../utils/useSwiper/useSwiper.cjs.js"),j=require("../../utils/cn/cn.cjs.js");;/* empty css                                        */;/* empty css                                                    */;/* empty css                                                    */const w=require("../GalleryPagination/GalleryPagination.cjs.js"),u=require("../../src/styles/utils.module.css"),a=require("../../src/components/AdvancedGallery/advancedGallery.module.css"),x=require("../Label/Label.cjs.js"),v=require("./components/VideoSlide/VideoSlide.cjs.js"),P=require("./components/ImageGalleryPagination/ImageGalleryPagination.cjs.js"),_=[q.Navigation],b=({items:r,label:l,className:S})=>{const{activeIndex:s,handleSlideTo:o,handleSlideChange:p,onSwiperInit:g,handleSwiperResize:h,handleUserInteraction:i}=y.useSwiperWithAutoPlay(5e3),c=m.useCallback(n=>{i(),o(n)},[i,o]);return e.jsxs("div",{className:j.cn(a.root,S),children:[l&&e.jsx("div",{className:a.labelWrap,children:e.jsx(x.Label,{color:"black",size:"sm",children:l})}),e.jsx(d.Swiper,{onSwiper:g,onResize:h,onSlideChange:p,onTouchStart:i,onTouchEnd:i,modules:_,spaceBetween:0,slidesPerView:1,className:a.swiper,children:r.map((n,t)=>e.jsxs(d.SwiperSlide,{children:[n.mediaType==="image"&&e.jsx("div",{className:a.imageWrapper,children:e.jsx("img",{src:n.url,alt:"product image",className:a.image,onClick:i})}),n.mediaType==="video"&&e.jsx(v.VideoSlide,{item:n,isActive:s===t,onClick:i})]},t))}),e.jsx(P.ImageGalleryPagination,{items:r,activeIndex:s,className:u.hideOnMobile,onSelect:c}),e.jsx(w.GalleryPagination,{count:r.length,activeIndex:s,className:u.hideOnDesktop,onSelect:c})]})};exports.AdvancedGallery=b;

package/dist/components/AdvancedGallery/AdvancedGallery.es.js

@@ -1,40 +1,41 @@
 "use client";
-import { jsxs as s, jsx as e } from "react/jsx-runtime";
-import { useCallback as g } from "react";
-import { Navigation as f } from "swiper/modules";
-import { Swiper as u, SwiperSlide as w } from "swiper/react";
-import { useSwiperWithAutoPlay as v } from "../../utils/useSwiper/useSwiper.es.js";
-import { cn as y } from "../../utils/cn/cn.es.js";
+import { jsxs as c, jsx as e } from "react/jsx-runtime";
+import { useCallback as f } from "react";
+import { Navigation as u } from "swiper/modules";
+import { Swiper as w, SwiperSlide as v } from "swiper/react";
+import { useSwiperWithAutoPlay as y } from "../../utils/useSwiper/useSwiper.es.js";
+import { cn as N } from "../../utils/cn/cn.es.js";
 /* empty css                                      */
 /* empty css                                                  */
 /* empty css                                                  */
-import { GalleryPagination as N } from "../GalleryPagination/GalleryPagination.es.js";
+import { GalleryPagination as P } from "../GalleryPagination/GalleryPagination.es.js";
+import p from "../../styles/utils.module.css";
 import r from "../../components/AdvancedGallery/advancedGallery.module.css";
-import { Label as P } from "../Label/Label.es.js";
+import { Label as k } from "../Label/Label.es.js";
 import { VideoSlide as C } from "./components/VideoSlide/VideoSlide.es.js";
 import { ImageGalleryPagination as I } from "./components/ImageGalleryPagination/ImageGalleryPagination.es.js";
-const T = [f], D = ({ items: a, label: n, className: p }) => {
-  const { activeIndex: l, handleSlideTo: t, handleSlideChange: d, onSwiperInit: h, handleSwiperResize: S, handleUserInteraction: i } = v(5e3), m = g(
+const T = [u], B = ({ items: a, label: n, className: d }) => {
+  const { activeIndex: l, handleSlideTo: t, handleSlideChange: h, onSwiperInit: S, handleSwiperResize: g, handleUserInteraction: i } = y(5e3), m = f(
     (o) => {
       i(), t(o);
     },
     [i, t]
   );
-  return /* @__PURE__ */ s("div", { className: y(r.root, p), children: [
-    n && /* @__PURE__ */ e("div", { className: r.labelWrap, children: /* @__PURE__ */ e(P, { color: "black", size: "sm", children: n }) }),
+  return /* @__PURE__ */ c("div", { className: N(r.root, d), children: [
+    n && /* @__PURE__ */ e("div", { className: r.labelWrap, children: /* @__PURE__ */ e(k, { color: "black", size: "sm", children: n }) }),
     /* @__PURE__ */ e(
-      u,
+      w,
       {
-        onSwiper: h,
-        onResize: S,
-        onSlideChange: d,
+        onSwiper: S,
+        onResize: g,
+        onSlideChange: h,
         onTouchStart: i,
         onTouchEnd: i,
         modules: T,
         spaceBetween: 0,
         slidesPerView: 1,
         className: r.swiper,
-        children: a.map((o, c) => /* @__PURE__ */ s(w, { children: [
+        children: a.map((o, s) => /* @__PURE__ */ c(v, { children: [
           o.mediaType === "image" && /* @__PURE__ */ e("div", { className: r.imageWrapper, children: /* @__PURE__ */ e(
             "img",
             {
@@ -44,14 +45,30 @@ const T = [f], D = ({ items: a, label: n, className: p }) => {
               onClick: i
             }
           ) }),
-          o.mediaType === "video" && /* @__PURE__ */ e(C, { item: o, isActive: l === c, onClick: i })
-        ] }, c))
+          o.mediaType === "video" && /* @__PURE__ */ e(C, { item: o, isActive: l === s, onClick: i })
+        ] }, s))
       }
     ),
-    /* @__PURE__ */ e(I, { items: a, activeIndex: l, onSelect: m }),
-    /* @__PURE__ */ e(N, { count: a.length, activeIndex: l, onSelect: m })
+    /* @__PURE__ */ e(
+      I,
+      {
+        items: a,
+        activeIndex: l,
+        className: p.hideOnMobile,
+        onSelect: m
+      }
+    ),
+    /* @__PURE__ */ e(
+      P,
+      {
+        count: a.length,
+        activeIndex: l,
+        className: p.hideOnDesktop,
+        onSelect: m
+      }
+    )
   ] });
 };
 export {
-  D as AdvancedGallery
+  B as AdvancedGallery
 };

package/dist/components/AdvancedGallery/components/ImageGalleryPagination/ImageGalleryPagination.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),i=require("../../../../utils/cn/cn.cjs.js"),e=require("../../../../src/components/AdvancedGallery/components/ImageGalleryPagination/imageGalleryPagination.module.css"),l=require("../../../Icon/Icon.cjs.js"),r=require("../../../Icon/constants.cjs.js"),m=({items:s,activeIndex:t,onSelect:c})=>a.jsx("div",{className:e.root,children:s.map((n,o)=>a.jsxs("button",{type:"button",className:i.cn(e.thumbnailButton,{[e.active]:o===t}),onClick:()=>c(o),children:[a.jsx("img",{src:n.mediaType==="image"?n.url:n.preview,alt:`thumbnail ${o+1}`,className:e.thumbnailImage}),n.mediaType==="video"&&n.videoType==="complex"&&a.jsx("div",{className:e.customPlayButton,children:a.jsx(l.Icon,{className:e.icon,name:r.EIconName.ALT_PLAY})})]},o))});exports.ImageGalleryPagination=m;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),o=require("../../../../utils/cn/cn.cjs.js"),e=require("../../../../src/components/AdvancedGallery/components/ImageGalleryPagination/imageGalleryPagination.module.css"),r=require("../../../Icon/Icon.cjs.js"),m=require("../../../Icon/constants.cjs.js"),u=({items:s,activeIndex:t,className:i,onSelect:l})=>a.jsx("div",{className:o.cn(e.root,i),children:s.map((n,c)=>a.jsxs("button",{type:"button",className:o.cn(e.thumbnailButton,{[e.active]:c===t}),onClick:()=>l(c),children:[a.jsx("img",{src:n.mediaType==="image"?n.url:n.preview,alt:`thumbnail ${c+1}`,className:e.thumbnailImage}),n.mediaType==="video"&&n.videoType==="complex"&&a.jsx("div",{className:e.customPlayButton,children:a.jsx(r.Icon,{className:e.icon,name:m.EIconName.ALT_PLAY})})]},c))});exports.ImageGalleryPagination=u;

package/dist/components/AdvancedGallery/components/ImageGalleryPagination/ImageGalleryPagination.d.ts

@@ -3,6 +3,7 @@ import { TAdvancedGalleryView } from '../../types';
 
 type ImageGalleryPaginationProps = TAdvancedGalleryView & {
     activeIndex: number;
+    className?: string;
     onSelect: (index: number) => void;
 };
 export declare const ImageGalleryPagination: React.FC<ImageGalleryPaginationProps>;

package/dist/components/AdvancedGallery/components/ImageGalleryPagination/ImageGalleryPagination.es.js

@@ -1,14 +1,19 @@
-import { jsx as m, jsxs as l } from "react/jsx-runtime";
-import { cn as c } from "../../../../utils/cn/cn.es.js";
+import { jsx as m, jsxs as i } from "react/jsx-runtime";
+import { cn as t } from "../../../../utils/cn/cn.es.js";
 import a from "../../../../components/AdvancedGallery/components/ImageGalleryPagination/imageGalleryPagination.module.css";
-import { Icon as i } from "../../../Icon/Icon.es.js";
-import { EIconName as s } from "../../../Icon/constants.es.js";
-const v = ({ items: t, activeIndex: r, onSelect: n }) => /* @__PURE__ */ m("div", { className: a.root, children: t.map((o, e) => /* @__PURE__ */ l(
+import { Icon as s } from "../../../Icon/Icon.es.js";
+import { EIconName as p } from "../../../Icon/constants.es.js";
+const N = ({
+  items: r,
+  activeIndex: n,
+  className: l,
+  onSelect: c
+}) => /* @__PURE__ */ m("div", { className: t(a.root, l), children: r.map((o, e) => /* @__PURE__ */ i(
   "button",
   {
     type: "button",
-    className: c(a.thumbnailButton, { [a.active]: e === r }),
-    onClick: () => n(e),
+    className: t(a.thumbnailButton, { [a.active]: e === n }),
+    onClick: () => c(e),
     children: [
       /* @__PURE__ */ m(
         "img",
@@ -18,11 +23,11 @@ const v = ({ items: t, activeIndex: r, onSelect: n }) => /* @__PURE__ */ m("div"
           className: a.thumbnailImage
         }
       ),
-      o.mediaType === "video" && o.videoType === "complex" && /* @__PURE__ */ m("div", { className: a.customPlayButton, children: /* @__PURE__ */ m(i, { className: a.icon, name: s.ALT_PLAY }) })
+      o.mediaType === "video" && o.videoType === "complex" && /* @__PURE__ */ m("div", { className: a.customPlayButton, children: /* @__PURE__ */ m(s, { className: a.icon, name: p.ALT_PLAY }) })
     ]
   },
   e
 )) });
 export {
-  v as ImageGalleryPagination
+  N as ImageGalleryPagination
 };

package/dist/components/GalleryPagination/GalleryPagination.cjs.js

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),a=require("../../utils/cn/cn.cjs.js"),e=require("../../src/components/GalleryPagination/galleryPagination.module.css"),l=({count:s,activeIndex:i,onSelect:r})=>n.jsx("div",{className:e.root,children:Array.from({length:s}).map((c,t)=>n.jsx("button",{type:"button",className:e.lineWrap,onClick:()=>r==null?void 0:r(t),children:n.jsx("div",{className:a.cn(e.line,t===i&&e.active)})},t))});exports.GalleryPagination=l;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),s=require("../../utils/cn/cn.cjs.js"),e=require("../../src/components/GalleryPagination/galleryPagination.module.css"),c=({count:i,activeIndex:a,className:l,onSelect:n})=>t.jsx("div",{className:s.cn(e.root,l),children:Array.from({length:i}).map((o,r)=>t.jsx("button",{type:"button",className:e.lineWrap,onClick:()=>n==null?void 0:n(r),children:t.jsx("div",{className:s.cn(e.line,r===a&&e.active)})},r))});exports.GalleryPagination=c;

package/dist/components/GalleryPagination/GalleryPagination.d.ts

@@ -1,7 +1,8 @@
 type GalleryPaginationProps = {
     count: number;
     activeIndex: number;
+    className?: string;
     onSelect: (index: number) => void;
 };
-export declare const GalleryPagination: ({ count, activeIndex, onSelect }: GalleryPaginationProps) => import("react/jsx-runtime").JSX.Element;
+export declare const GalleryPagination: ({ count, activeIndex, className, onSelect }: GalleryPaginationProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/GalleryPagination/GalleryPagination.es.js

@@ -1,8 +1,8 @@
 "use client";
 import { jsx as i } from "react/jsx-runtime";
-import { cn as s } from "../../utils/cn/cn.es.js";
+import { cn as m } from "../../utils/cn/cn.es.js";
 import r from "../../components/GalleryPagination/galleryPagination.module.css";
-const c = ({ count: m, activeIndex: o, onSelect: a }) => /* @__PURE__ */ i("div", { className: r.root, children: Array.from({ length: m }).map((n, t) => /* @__PURE__ */ i("button", { type: "button", className: r.lineWrap, onClick: () => a == null ? void 0 : a(t), children: /* @__PURE__ */ i("div", { className: s(r.line, t === o && r.active) }) }, t)) });
+const f = ({ count: o, activeIndex: s, className: n, onSelect: a }) => /* @__PURE__ */ i("div", { className: m(r.root, n), children: Array.from({ length: o }).map((l, t) => /* @__PURE__ */ i("button", { type: "button", className: r.lineWrap, onClick: () => a == null ? void 0 : a(t), children: /* @__PURE__ */ i("div", { className: m(r.line, t === s && r.active) }) }, t)) });
 export {
-  c as GalleryPagination
+  f as GalleryPagination
 };

package/dist/components/GalleryPagination/galleryPagination.module.css

@@ -1,46 +1,38 @@
-@media (width <= 768px) {
-    .root {
-        display: flex;
-        gap: 8px;
-        width: 100%;
-        max-width: 100%;
-        justify-content: center;
-        align-items: center;
-        flex-wrap: nowrap;
-    }
-
-    .lineWrap {
-        width: 32px;
-        height: 32px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        cursor: pointer;
-        padding: 0;
-        background: none;
-        border: none;
-    }
+.root {
+    display: flex;
+    gap: 8px;
+    width: 100%;
+    max-width: 100%;
+    justify-content: center;
+    align-items: center;
+    flex-wrap: nowrap;
+}
 
-    .line {
-        height: var(--border-width-sm);
-        width: 100%;
-        background-color: var(--color-bg-fill-brand-disabled);
-        border-radius: var(--border-radius-xs);
-        transition: background-color 0.3s, height 0.3s, opacity 0.3s;
-    }
+.lineWrap {
+    width: 32px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    padding: 0;
+    background: none;
+    border: none;
+}
 
-    .lineWrap:hover > .line:not(.active) {
-        opacity: 0.8;
-    }
+.line {
+    height: var(--border-width-sm);
+    width: 100%;
+    background-color: var(--color-bg-fill-brand-disabled);
+    border-radius: var(--border-radius-xs);
+    transition: background-color 0.3s, height 0.3s, opacity 0.3s;
+}
 
-    .active {
-        height: var(--border-width-md);
-        background-color: var(--color-bg-fill-primary);
-    }
+.lineWrap:hover > .line:not(.active) {
+    opacity: 0.8;
 }
 
-@media (width > 768px) {
-    .root {
-        display: none;
-    }
+.active {
+    height: var(--border-width-md);
+    background-color: var(--color-bg-fill-primary);
 }

package/dist/components/ImageGallery/ImageGallery.cjs.js

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),S=require("swiper/modules"),u=require("swiper/react"),h=require("react"),q=require("../../utils/useSwiper/useSwiper.cjs.js"),j=require("../../utils/cn/cn.cjs.js");;/* empty css                                        */;/* empty css                                                    */;/* empty css                                                    */const i=require("../../src/components/ImageGallery/imageGallery.module.css"),w=require("../Label/Label.cjs.js"),x=require("./components/ImageGalleryPagination/ImageGalleryPagination.cjs.js"),y=require("../GalleryPagination/GalleryPagination.cjs.js"),P=[S.Navigation],_=({images:a,label:l,className:d,pagination:I="plain"})=>{const{activeIndex:s,handleSlideTo:t,handleSlideChange:m,onSwiperInit:g,handleSwiperResize:p,handleUserInteraction:n}=q.useSwiperWithAutoPlay(3e3),o=h.useCallback(r=>{n(),t(r)},[n,t]);return e.jsxs("div",{className:j.cn(i.root,d),children:[l&&e.jsx("div",{className:i.labelWrap,children:e.jsx(w.Label,{color:"black",size:"sm",children:l})}),e.jsx(u.Swiper,{onSwiper:g,onResize:p,onSlideChange:m,onTouchStart:n,onTouchEnd:n,modules:P,spaceBetween:0,slidesPerView:1,className:i.swiper,children:a.map((r,c)=>e.jsx(u.SwiperSlide,{children:e.jsx("div",{className:i.imageContainer,children:e.jsx("div",{className:i.imageWrapper,children:e.jsx("img",{src:r,alt:"product image",className:i.image,onClick:n},c)})})},c))}),e.jsx(x.ImageGalleryPagination,{images:a,activeIndex:s,onSelect:o}),e.jsx(y.GalleryPagination,{count:a.length,activeIndex:s,onSelect:o})]})};exports.ImageGallery=_;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),j=require("react"),q=require("swiper/modules"),u=require("swiper/react"),x=require("../../utils/useSwiper/useSwiper.cjs.js"),w=require("../../utils/cn/cn.cjs.js");;/* empty css                                        */;/* empty css                                                    */;/* empty css                                                    */const i=require("../../src/components/ImageGallery/imageGallery.module.css"),d=require("../../src/styles/utils.module.css"),P=require("../Label/Label.cjs.js"),N=require("./components/ImageGalleryPagination/ImageGalleryPagination.cjs.js"),m=require("../GalleryPagination/GalleryPagination.cjs.js"),_=[q.Navigation],b=({images:a,label:c,className:h,type:r="primary"})=>{const{activeIndex:s,handleSlideTo:o,handleSlideChange:g,onSwiperInit:S,handleSwiperResize:p,handleUserInteraction:n}=x.useSwiperWithAutoPlay(3e3),l=j.useCallback(t=>{n(),o(t)},[n,o]);return e.jsxs("div",{className:w.cn(i.root,h,{[i.primary]:r==="primary",[i.secondary]:r==="secondary"}),children:[c&&e.jsx("div",{className:i.labelWrap,children:e.jsx(P.Label,{color:"black",size:"sm",children:c})}),e.jsx(u.Swiper,{onSwiper:S,onResize:p,onSlideChange:g,onTouchStart:n,onTouchEnd:n,modules:_,spaceBetween:0,slidesPerView:1,className:i.swiper,children:a.map((t,y)=>e.jsx(u.SwiperSlide,{children:e.jsx("div",{className:i.imageContainer,children:e.jsx("div",{className:i.imageWrapper,children:e.jsx("img",{src:t,alt:"product image",width:r==="primary"?600:492,height:r==="primary"?600:389,className:i.image,onClick:n})})})},y))}),r==="primary"?e.jsxs(e.Fragment,{children:[e.jsx(N.ImageGalleryPagination,{images:a,className:d.hideOnMobile,activeIndex:s,onSelect:l}),e.jsx(m.GalleryPagination,{count:a.length,activeIndex:s,className:d.hideOnDesktop,onSelect:l})]}):e.jsx(m.GalleryPagination,{count:a.length,activeIndex:s,onSelect:l})]})};exports.ImageGallery=b;

package/dist/components/ImageGallery/ImageGallery.d.ts

@@ -3,6 +3,6 @@ export type ImageGalleryProps = {
     images: Array<string>;
     label?: string;
     className?: string;
-    pagination?: 'plain' | 'preview';
+    type?: 'primary' | 'secondary';
 };
-export declare const ImageGallery: ({ images, label, className, pagination }: ImageGalleryProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ImageGallery: ({ images, label, className, type }: ImageGalleryProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/ImageGallery/ImageGallery.es.js

@@ -1,54 +1,83 @@
 "use client";
-import { jsxs as S, jsx as e } from "react/jsx-runtime";
-import { Navigation as g } from "swiper/modules";
-import { Swiper as f, SwiperSlide as u } from "swiper/react";
-import { useCallback as w } from "react";
-import { useSwiperWithAutoPlay as N } from "../../utils/useSwiper/useSwiper.es.js";
-import { cn as v } from "../../utils/cn/cn.es.js";
+import { jsxs as s, jsx as e, Fragment as w } from "react/jsx-runtime";
+import { useCallback as y } from "react";
+import { Navigation as N } from "swiper/modules";
+import { Swiper as v, SwiperSlide as I } from "swiper/react";
+import { useSwiperWithAutoPlay as P } from "../../utils/useSwiper/useSwiper.es.js";
+import { cn as C } from "../../utils/cn/cn.es.js";
 /* empty css                                      */
 /* empty css                                                  */
 /* empty css                                                  */
-import i from "../../components/ImageGallery/imageGallery.module.css";
-import { Label as I } from "../Label/Label.es.js";
-import { ImageGalleryPagination as P } from "./components/ImageGalleryPagination/ImageGalleryPagination.es.js";
-import { GalleryPagination as y } from "../GalleryPagination/GalleryPagination.es.js";
-const C = [g], D = ({ images: r, label: n, className: s, pagination: W = "plain" }) => {
-  const { activeIndex: l, handleSlideTo: t, handleSlideChange: p, onSwiperInit: d, handleSwiperResize: h, handleUserInteraction: o } = N(3e3), m = w(
-    (a) => {
-      o(), t(a);
+import r from "../../components/ImageGallery/imageGallery.module.css";
+import d from "../../styles/utils.module.css";
+import { Label as b } from "../Label/Label.es.js";
+import { ImageGalleryPagination as k } from "./components/ImageGalleryPagination/ImageGalleryPagination.es.js";
+import { GalleryPagination as p } from "../GalleryPagination/GalleryPagination.es.js";
+const x = [N], F = ({ images: a, label: m, className: h, type: i = "primary" }) => {
+  const { activeIndex: n, handleSlideTo: c, handleSlideChange: S, onSwiperInit: g, handleSwiperResize: u, handleUserInteraction: o } = P(3e3), l = y(
+    (t) => {
+      o(), c(t);
     },
-    [o, t]
+    [o, c]
   );
-  return /* @__PURE__ */ S("div", { className: v(i.root, s), children: [
-    n && /* @__PURE__ */ e("div", { className: i.labelWrap, children: /* @__PURE__ */ e(I, { color: "black", size: "sm", children: n }) }),
-    /* @__PURE__ */ e(
-      f,
-      {
-        onSwiper: d,
-        onResize: h,
-        onSlideChange: p,
-        onTouchStart: o,
-        onTouchEnd: o,
-        modules: C,
-        spaceBetween: 0,
-        slidesPerView: 1,
-        className: i.swiper,
-        children: r.map((a, c) => /* @__PURE__ */ e(u, { children: /* @__PURE__ */ e("div", { className: i.imageContainer, children: /* @__PURE__ */ e("div", { className: i.imageWrapper, children: /* @__PURE__ */ e(
-          "img",
+  return /* @__PURE__ */ s(
+    "div",
+    {
+      className: C(r.root, h, {
+        [r.primary]: i === "primary",
+        [r.secondary]: i === "secondary"
+      }),
+      children: [
+        m && /* @__PURE__ */ e("div", { className: r.labelWrap, children: /* @__PURE__ */ e(b, { color: "black", size: "sm", children: m }) }),
+        /* @__PURE__ */ e(
+          v,
           {
-            src: a,
-            alt: "product image",
-            className: i.image,
-            onClick: o
-          },
-          c
-        ) }) }) }, c))
-      }
-    ),
-    /* @__PURE__ */ e(P, { images: r, activeIndex: l, onSelect: m }),
-    /* @__PURE__ */ e(y, { count: r.length, activeIndex: l, onSelect: m })
-  ] });
+            onSwiper: g,
+            onResize: u,
+            onSlideChange: S,
+            onTouchStart: o,
+            onTouchEnd: o,
+            modules: x,
+            spaceBetween: 0,
+            slidesPerView: 1,
+            className: r.swiper,
+            children: a.map((t, f) => /* @__PURE__ */ e(I, { children: /* @__PURE__ */ e("div", { className: r.imageContainer, children: /* @__PURE__ */ e("div", { className: r.imageWrapper, children: /* @__PURE__ */ e(
+              "img",
+              {
+                src: t,
+                alt: "product image",
+                width: i === "primary" ? 600 : 492,
+                height: i === "primary" ? 600 : 389,
+                className: r.image,
+                onClick: o
+              }
+            ) }) }) }, f))
+          }
+        ),
+        i === "primary" ? /* @__PURE__ */ s(w, { children: [
+          /* @__PURE__ */ e(
+            k,
+            {
+              images: a,
+              className: d.hideOnMobile,
+              activeIndex: n,
+              onSelect: l
+            }
+          ),
+          /* @__PURE__ */ e(
+            p,
+            {
+              count: a.length,
+              activeIndex: n,
+              className: d.hideOnDesktop,
+              onSelect: l
+            }
+          )
+        ] }) : /* @__PURE__ */ e(p, { count: a.length, activeIndex: n, onSelect: l })
+      ]
+    }
+  );
 };
 export {
-  D as ImageGallery
+  F as ImageGallery
 };

package/dist/components/ImageGallery/components/ImageGalleryPagination/ImageGalleryPagination.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),r=require("../../../../utils/cn/cn.cjs.js"),t=require("../../../../src/components/ImageGallery/components/ImageGalleryPagination/imageGalleryPagination.module.css"),c=({images:s,activeIndex:l,onSelect:i})=>n.jsx("div",{className:t.root,children:s.map((a,e)=>n.jsx("button",{type:"button",className:r.cn(t.thumbnailButton,{[t.active]:e===l}),onClick:()=>i(e),children:n.jsx("img",{src:a,alt:`thumbnail ${e+1}`,className:t.thumbnailImage})},a))});exports.ImageGalleryPagination=c;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),s=require("../../../../utils/cn/cn.cjs.js"),t=require("../../../../src/components/ImageGallery/components/ImageGalleryPagination/imageGalleryPagination.module.css"),o=({images:l,activeIndex:c,className:i,onSelect:r})=>n.jsx("div",{className:s.cn(t.root,i),children:l.map((a,e)=>n.jsx("button",{type:"button",className:s.cn(t.thumbnailButton,{[t.active]:e===c}),onClick:()=>r(e),children:n.jsx("img",{src:a,alt:`thumbnail ${e+1}`,className:t.thumbnailImage})},a))});exports.ImageGalleryPagination=o;

package/dist/components/ImageGallery/components/ImageGalleryPagination/ImageGalleryPagination.d.ts

@@ -3,6 +3,7 @@ import { default as React } from 'react';
 type ImageGalleryPaginationProps = {
     images: string[];
     activeIndex: number;
+    className?: string;
     onSelect: (index: number) => void;
 };
 export declare const ImageGalleryPagination: React.FC<ImageGalleryPaginationProps>;

package/dist/components/ImageGallery/components/ImageGalleryPagination/ImageGalleryPagination.es.js

@@ -1,16 +1,21 @@
 import { jsx as m } from "react/jsx-runtime";
-import { cn as e } from "../../../../utils/cn/cn.es.js";
+import { cn as n } from "../../../../utils/cn/cn.es.js";
 import t from "../../../../components/ImageGallery/components/ImageGalleryPagination/imageGalleryPagination.module.css";
-const u = ({ images: n, activeIndex: r, onSelect: l }) => /* @__PURE__ */ m("div", { className: t.root, children: n.map((o, a) => /* @__PURE__ */ m(
+const p = ({
+  images: r,
+  activeIndex: l,
+  className: e,
+  onSelect: i
+}) => /* @__PURE__ */ m("div", { className: n(t.root, e), children: r.map((o, a) => /* @__PURE__ */ m(
   "button",
   {
     type: "button",
-    className: e(t.thumbnailButton, { [t.active]: a === r }),
-    onClick: () => l(a),
+    className: n(t.thumbnailButton, { [t.active]: a === l }),
+    onClick: () => i(a),
     children: /* @__PURE__ */ m("img", { src: o, alt: `thumbnail ${a + 1}`, className: t.thumbnailImage })
   },
   o
 )) });
 export {
-  u as ImageGalleryPagination
+  p as ImageGalleryPagination
 };

package/dist/components/ImageGallery/components/ImageGalleryPagination/imageGalleryPagination.module.css

@@ -1,6 +1,3 @@
-.root {
-    display: none;
-}
 @media (width > 768px) {
     .root {
         display: flex;

package/dist/components/ImageGallery/imageGallery.module.css

@@ -1,15 +1,24 @@
 .root {
     position: relative;
-    padding: 18px 0 13px 0;
     display: flex;
     max-width: 100%;
     flex-direction: column;
     align-items: center;
     justify-content: flex-start;
     border-radius: var(--border-radius-md);
+}
+
+.primary {
+    padding: 18px 0 13px 0;
     background-color: var(--color-bg-neutral-light);
 }
 
+.secondary {
+    padding: 10px 0 5px;
+    background-color: var(--color-bg-base-light);
+    border: 1px solid var(--color-neutral-200);
+}
+
 .labelWrap {
     width: 100%;
     display: flex;
@@ -26,34 +35,44 @@
     padding: 18px 0 14px 0;
 }
 
+.secondary .imageContainer {
+    padding: 0;
+}
+
 .imageWrapper {
     width: 100%;
     aspect-ratio: 1;
 }
 
+.secondary .imageWrapper {
+    aspect-ratio: 1 / 0.8;
+}
+
 .image {
     width: 100%;
     height: 100%;
+    display: block;
+    margin: 0 auto;
     object-fit: contain;
+    object-position: center;
 }
 
 @media (width <= 768px) {
     .root {
         padding: 16px 0;
     }
-
+    .root.secondary {
+        padding: 10px 0 5px;
+    }
     .labelWrap {
         padding: 0 16px;
     }
-
     .swiper {
         margin-bottom: 0;
     }
-
     .imageWrapper {
         height: auto;
     }
-
     .image {
         aspect-ratio: 1 / 1;
     }

package/dist/styles/utils.module.css

@@ -0,0 +1,14 @@
+.hideOnDesktop {
+    display: none;
+}
+.hideOnMobile {
+    display: inherit;
+}
+@media (width <= 768px) {
+    .hideOnDesktop {
+        display: inherit;
+    }
+    .hideOnMobile {
+        display: none;
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@zenpatient-org/healthspan-marketing-ui",
-    "version": "0.2.64",
+    "version": "0.2.65",
     "description": "Design system",
     "main": "dist/index.cjs.js",
     "module": "dist/index.es.js",