@zenpatient-org/healthspan-marketing-ui 0.2.63 → 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/modules/ImageWithText/ImageWithText.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),j=require("../../utils/cn/cn.cjs.js"),l=require("./constants.cjs.js"),e=require("../../src/modules/ImageWithText/imageWithText.module.css"),T=require("../../components/HighlightedTitle/HighlightedTitle.cjs.js"),n=require("../../components/Typography/Typography.cjs.js"),m=require("./components/ButtonWithColors/ButtonWithColors.cjs.js"),b=({image:g,text:t,title:s,view:i,colorScheme:u,textColor:p,mobileTextColor:x,titleColor:c,mobileTitleColor:o,titleHighlightColor:r,mobileTitleHighlightColor:h,mobileImage:y,button:d})=>a.jsx("section",{className:e.root,"data-scheme":u,children:a.jsxs("div",{className:e.container,"data-view":i,children:[a.jsxs("div",{className:e.imageContainer,children:[a.jsx("img",{src:g,alt:"background image",className:e.image,"data-color":p}),a.jsx("img",{src:y||g,alt:"mobile background image",className:e.mobileImage})]}),a.jsxs("div",{className:j.cn(e.content,{[e.textAlignLeft]:i==="plain"||i==="plain_with_title",[e.textAlignRight]:i==="complex"}),"data-view":i,"data-text-color":p,"data-mobile-text-color":x,"data-title-color":c,"data-mobile-title-color":o,"data-title-highlight-color":r,"data-mobile-title-highlight-color":h,children:[i==="complex"&&a.jsxs("div",{className:e.richTextContainer,style:{"--highlight-color-custom":l.COLORS[c||"white"],"--highlight-emphasize-custom":l.COLORS[r||"white"],"--highlight-color-custom-mobile":l.COLORS[o||"white"],"--highlight-emphasize-custom-mobile":l.COLORS[h||"white"]},children:[s&&a.jsx(T.HighlightedTitle,{colorScheme:c||r||o||h?"custom":"dark",className:e.richTextTitle,title:s,as:"div",defaultVariant:"displayXs",mobileVariant:"headingXl"}),t&&a.jsx(n.Typography,{as:"p",defaultVariant:"bodyMd",mobileVariant:"bodySm",children:t}),a.jsx(m.ButtonWithColors,{...d})]}),i==="plain"&&t&&a.jsxs("div",{className:e.textContainer,children:[a.jsx(n.Typography,{as:"p",defaultVariant:"headingXl",mobileVariant:"headingXs",className:e.textOfPlain,children:t}),a.jsx(m.ButtonWithColors,{...d})]}),i==="plain_with_title"&&a.jsxs("div",{className:e.plainWithTitleContainer,children:[s&&a.jsx(n.Typography,{as:"h3",defaultVariant:"displaySm",className:e.titleOfPlainWithTitle,children:s}),t&&a.jsx(n.Typography,{as:"p",defaultVariant:"bodyMd",mobileVariant:"bodyMd",className:e.textOfPlainWithTitle,children:t}),a.jsx(m.ButtonWithColors,{...d})]})]})]})});exports.ImageWithText=b;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),j=require("../../utils/cn/cn.cjs.js"),l=require("./constants.cjs.js"),i=require("../../src/modules/ImageWithText/imageWithText.module.css"),b=require("../../components/HighlightedTitle/HighlightedTitle.cjs.js"),n=require("../../components/Typography/Typography.cjs.js"),m=require("./components/ButtonWithColors/ButtonWithColors.cjs.js"),T=({image:g,text:t,title:s,view:e,colorScheme:u,textColor:p,mobileTextColor:x,titleColor:c,mobileTitleColor:o,titleHighlightColor:r,mobileTitleHighlightColor:h,mobileImage:y,button:d})=>a.jsx("section",{className:i.root,"data-scheme":u,children:a.jsxs("div",{className:i.container,"data-view":e,children:[a.jsxs("div",{className:i.imageContainer,children:[a.jsx("img",{src:g,alt:"background image",className:i.image,"data-color":p}),a.jsx("img",{src:y||g,alt:"mobile background image",className:i.mobileImage})]}),a.jsxs("div",{className:j.cn(i.content,{[i.textAlignLeft]:e==="plain"||e==="plain_with_title",[i.textAlignRight]:e==="complex"}),"data-view":e,"data-text-color":p,"data-mobile-text-color":x,"data-title-color":c,"data-mobile-title-color":o,"data-title-highlight-color":r,"data-mobile-title-highlight-color":h,children:[e==="complex"&&a.jsxs("div",{className:i.richTextContainer,style:{"--highlight-color-custom":l.COLORS[c||"white"],"--highlight-emphasize-custom":l.COLORS[r||"white"],"--highlight-color-custom-mobile":l.COLORS[o||"white"],"--highlight-emphasize-custom-mobile":l.COLORS[h||"white"]},children:[s&&a.jsx(b.HighlightedTitle,{colorScheme:c||r||o||h?"custom":"dark",className:i.richTextTitle,title:s,as:"div",defaultVariant:"displayXs",mobileVariant:"headingXl"}),t&&a.jsx(n.Typography,{as:"p",defaultVariant:"bodyMd",mobileVariant:"bodySm",children:t}),a.jsx(m.ButtonWithColors,{...d})]}),e==="plain"&&t&&a.jsxs("div",{className:i.textContainer,children:[a.jsx(n.Typography,{as:"p",defaultVariant:"headingXl",mobileVariant:"headingXs",className:i.textOfPlain,children:t}),a.jsx(m.ButtonWithColors,{...d})]}),e==="plain_with_title"&&a.jsxs("div",{className:i.plainWithTitleContainer,children:[s&&a.jsx(n.Typography,{as:"h3",defaultVariant:"displaySm",mobileVariant:"headingXl",className:i.titleOfPlainWithTitle,children:s}),t&&a.jsx(n.Typography,{as:"p",defaultVariant:"bodyMd",mobileVariant:"bodyMd",className:i.textOfPlainWithTitle,children:t}),a.jsx(m.ButtonWithColors,{...d})]})]})]})});exports.ImageWithText=T;

package/dist/modules/ImageWithText/ImageWithText.es.js

@@ -1,94 +1,103 @@
 import { jsx as i, jsxs as l } from "react/jsx-runtime";
 import { cn as y } from "../../utils/cn/cn.es.js";
-import { COLORS as m } from "./constants.es.js";
+import { COLORS as c } from "./constants.es.js";
 import a from "../../modules/ImageWithText/imageWithText.module.css";
-import { HighlightedTitle as x } from "../../components/HighlightedTitle/HighlightedTitle.es.js";
-import { Typography as s } from "../../components/Typography/Typography.es.js";
+import { HighlightedTitle as V } from "../../components/HighlightedTitle/HighlightedTitle.es.js";
+import { Typography as r } from "../../components/Typography/Typography.es.js";
 import { ButtonWithColors as p } from "./components/ButtonWithColors/ButtonWithColors.es.js";
 const k = ({
   image: g,
-  text: e,
-  title: c,
-  view: t,
+  text: t,
+  title: m,
+  view: e,
   colorScheme: N,
   textColor: f,
-  mobileTextColor: u,
-  titleColor: r,
+  mobileTextColor: b,
+  titleColor: s,
   mobileTitleColor: n,
   titleHighlightColor: d,
   mobileTitleHighlightColor: o,
-  mobileImage: b,
+  mobileImage: u,
   button: h
-}) => /* @__PURE__ */ i("section", { className: a.root, "data-scheme": N, children: /* @__PURE__ */ l("div", { className: a.container, "data-view": t, children: [
+}) => /* @__PURE__ */ i("section", { className: a.root, "data-scheme": N, children: /* @__PURE__ */ l("div", { className: a.container, "data-view": e, children: [
   /* @__PURE__ */ l("div", { className: a.imageContainer, children: [
     /* @__PURE__ */ i("img", { src: g, alt: "background image", className: a.image, "data-color": f }),
-    /* @__PURE__ */ i("img", { src: b || g, alt: "mobile background image", className: a.mobileImage })
+    /* @__PURE__ */ i("img", { src: u || g, alt: "mobile background image", className: a.mobileImage })
   ] }),
   /* @__PURE__ */ l(
     "div",
     {
       className: y(a.content, {
-        [a.textAlignLeft]: t === "plain" || t === "plain_with_title",
-        [a.textAlignRight]: t === "complex"
+        [a.textAlignLeft]: e === "plain" || e === "plain_with_title",
+        [a.textAlignRight]: e === "complex"
       }),
-      "data-view": t,
+      "data-view": e,
       "data-text-color": f,
-      "data-mobile-text-color": u,
-      "data-title-color": r,
+      "data-mobile-text-color": b,
+      "data-title-color": s,
       "data-mobile-title-color": n,
       "data-title-highlight-color": d,
       "data-mobile-title-highlight-color": o,
       children: [
-        t === "complex" && /* @__PURE__ */ l(
+        e === "complex" && /* @__PURE__ */ l(
           "div",
           {
             className: a.richTextContainer,
             style: {
-              "--highlight-color-custom": m[r || "white"],
-              "--highlight-emphasize-custom": m[d || "white"],
-              "--highlight-color-custom-mobile": m[n || "white"],
-              "--highlight-emphasize-custom-mobile": m[o || "white"]
+              "--highlight-color-custom": c[s || "white"],
+              "--highlight-emphasize-custom": c[d || "white"],
+              "--highlight-color-custom-mobile": c[n || "white"],
+              "--highlight-emphasize-custom-mobile": c[o || "white"]
             },
             children: [
-              c && /* @__PURE__ */ i(
-                x,
+              m && /* @__PURE__ */ i(
+                V,
                 {
-                  colorScheme: r || d || n || o ? "custom" : "dark",
+                  colorScheme: s || d || n || o ? "custom" : "dark",
                   className: a.richTextTitle,
-                  title: c,
+                  title: m,
                   as: "div",
                   defaultVariant: "displayXs",
                   mobileVariant: "headingXl"
                 }
               ),
-              e && /* @__PURE__ */ i(s, { as: "p", defaultVariant: "bodyMd", mobileVariant: "bodySm", children: e }),
+              t && /* @__PURE__ */ i(r, { as: "p", defaultVariant: "bodyMd", mobileVariant: "bodySm", children: t }),
               /* @__PURE__ */ i(p, { ...h })
             ]
           }
         ),
-        t === "plain" && e && /* @__PURE__ */ l("div", { className: a.textContainer, children: [
+        e === "plain" && t && /* @__PURE__ */ l("div", { className: a.textContainer, children: [
           /* @__PURE__ */ i(
-            s,
+            r,
             {
               as: "p",
               defaultVariant: "headingXl",
               mobileVariant: "headingXs",
               className: a.textOfPlain,
-              children: e
+              children: t
             }
           ),
           /* @__PURE__ */ i(p, { ...h })
         ] }),
-        t === "plain_with_title" && /* @__PURE__ */ l("div", { className: a.plainWithTitleContainer, children: [
-          c && /* @__PURE__ */ i(s, { as: "h3", defaultVariant: "displaySm", className: a.titleOfPlainWithTitle, children: c }),
-          e && /* @__PURE__ */ i(
-            s,
+        e === "plain_with_title" && /* @__PURE__ */ l("div", { className: a.plainWithTitleContainer, children: [
+          m && /* @__PURE__ */ i(
+            r,
+            {
+              as: "h3",
+              defaultVariant: "displaySm",
+              mobileVariant: "headingXl",
+              className: a.titleOfPlainWithTitle,
+              children: m
+            }
+          ),
+          t && /* @__PURE__ */ i(
+            r,
             {
               as: "p",
               defaultVariant: "bodyMd",
               mobileVariant: "bodyMd",
               className: a.textOfPlainWithTitle,
-              children: e
+              children: t
             }
           ),
           /* @__PURE__ */ i(p, { ...h })

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.63",
+    "version": "0.2.65",
     "description": "Design system",
     "main": "dist/index.cjs.js",
     "module": "dist/index.es.js",