@qite/tide-booking-component 1.4.64 → 1.4.66

package/build/build-cjs/index.js

@@ -45001,6 +45001,227 @@ var ImageWithTextSection = function (_a) {
   );
 };
 
+var PhotoGallery = function (_a) {
+  var _b, _c, _d;
+  var images = _a.images,
+    title = _a.title,
+    intro = _a.intro;
+  var _e = React.useState(null),
+    activeIndex = _e[0],
+    setActiveIndex = _e[1];
+  var isOpen = activeIndex !== null;
+  var activeImage = activeIndex !== null ? images[activeIndex] : null;
+  var close = function () {
+    return setActiveIndex(null);
+  };
+  var next = function () {
+    if (activeIndex === null) return;
+    setActiveIndex((activeIndex + 1) % images.length);
+  };
+  var prev = function () {
+    if (activeIndex === null) return;
+    setActiveIndex((activeIndex - 1 + images.length) % images.length);
+  };
+  React.useEffect(
+    function () {
+      if (!isOpen) return;
+      var onKeyDown = function (e) {
+        if (e.key === 'Escape') close();
+        if (e.key === 'ArrowRight') next();
+        if (e.key === 'ArrowLeft') prev();
+      };
+      document.addEventListener('keydown', onKeyDown);
+      document.body.style.overflow = 'hidden';
+      return function () {
+        document.removeEventListener('keydown', onKeyDown);
+        document.body.style.overflow = '';
+      };
+    },
+    [isOpen, activeIndex, images.length]
+  );
+  if (!images.length) {
+    return React__default['default'].createElement(
+      'section',
+      { className: 'gallery' },
+      React__default['default'].createElement('p', { className: 'gallery__empty' }, 'No photos available.')
+    );
+  }
+  var big = images[0];
+  var thumbs = images.slice(1, 6);
+  var extraCount = Math.max(0, images.length - 6);
+  var openAt = function (index) {
+    if (!images[index]) return;
+    setActiveIndex(index);
+  };
+  return React__default['default'].createElement(
+    'div',
+    { className: 'content' },
+    React__default['default'].createElement(
+      'div',
+      { className: 'content__container' },
+      React__default['default'].createElement(
+        'div',
+        { className: 'content__colums content__colums--2-1' },
+        React__default['default'].createElement(
+          'section',
+          { className: 'gallery' },
+          React__default['default'].createElement(
+            'div',
+            { className: 'gallery__layout' },
+            React__default['default'].createElement(
+              'button',
+              {
+                type: 'button',
+                className: 'gallery__big',
+                onClick: function () {
+                  return openAt(0);
+                },
+                'aria-label': 'Open image 1'
+              },
+              React__default['default'].createElement('img', {
+                className: 'gallery__big__img',
+                src: big.src,
+                alt: (_b = big.alt) !== null && _b !== void 0 ? _b : '',
+                loading: 'eager'
+              })
+            ),
+            React__default['default'].createElement(
+              'div',
+              { className: 'gallery__thumbs', 'aria-label': 'Gallery thumbnails' },
+              thumbs.map(function (img, i) {
+                var _a;
+                var realIndex = i + 1;
+                var isLastThumbSlot = i === 4;
+                var shouldShowMoreOverlay = isLastThumbSlot && extraCount > 0;
+                return React__default['default'].createElement(
+                  'button',
+                  {
+                    key: ''.concat(img.src, '-').concat(realIndex),
+                    type: 'button',
+                    className: 'gallery__thumb '.concat(shouldShowMoreOverlay ? 'gallery__thumb--more' : ''),
+                    onClick: function () {
+                      return openAt(realIndex);
+                    },
+                    'aria-label': 'Open image '.concat(realIndex + 1)
+                  },
+                  React__default['default'].createElement('img', {
+                    className: 'gallery__thumb__img',
+                    src: img.src,
+                    alt: (_a = img.alt) !== null && _a !== void 0 ? _a : '',
+                    loading: 'lazy'
+                  }),
+                  shouldShowMoreOverlay &&
+                    React__default['default'].createElement(
+                      'span',
+                      { className: 'gallery__thumb__overlay', 'aria-label': ''.concat(extraCount, ' more photos') },
+                      '+',
+                      extraCount
+                    )
+                );
+              })
+            )
+          ),
+          isOpen &&
+            activeImage &&
+            React__default['default'].createElement(
+              'div',
+              {
+                className: 'gallery__lightbox',
+                role: 'dialog',
+                'aria-modal': 'true',
+                onMouseDown: function (e) {
+                  if (e.target === e.currentTarget) close();
+                }
+              },
+              React__default['default'].createElement(
+                'div',
+                { className: 'gallery__lightbox__panel' },
+                React__default['default'].createElement(
+                  'button',
+                  { type: 'button', className: 'gallery__btn__icon gallery__btn__icon--close', 'aria-label': 'Close', onClick: close },
+                  React__default['default'].createElement(Icon$3, { name: 'ui-close', width: 16, height: 16 })
+                ),
+                React__default['default'].createElement(
+                  'div',
+                  { className: 'gallery__lightbox__media' },
+                  React__default['default'].createElement('img', {
+                    className: 'gallery__lightbox__img',
+                    src: activeImage.src,
+                    alt: (_c = activeImage.alt) !== null && _c !== void 0 ? _c : ''
+                  })
+                ),
+                React__default['default'].createElement(
+                  'div',
+                  { className: 'gallery__lightbox__footer' },
+                  React__default['default'].createElement(
+                    'div',
+                    { className: 'gallery__lightbox__info' },
+                    React__default['default'].createElement('span', { className: 'gallery__lightbox__index' }, activeIndex + 1, ' / ', images.length),
+                    (activeImage.caption || activeImage.alt) &&
+                      React__default['default'].createElement(
+                        'span',
+                        { className: 'gallery__lightbox__caption' },
+                        (_d = activeImage.caption) !== null && _d !== void 0 ? _d : activeImage.alt
+                      )
+                  ),
+                  React__default['default'].createElement(
+                    'div',
+                    { className: 'gallery__lightbox__controls' },
+                    React__default['default'].createElement('button', { type: 'button', className: 'gallery__btn', onClick: prev }, '\u2190'),
+                    React__default['default'].createElement('button', { type: 'button', className: 'gallery__btn', onClick: next }, '\u2192')
+                  )
+                )
+              )
+            )
+        ),
+        React__default['default'].createElement(
+          'div',
+          null,
+          React__default['default'].createElement('h2', null, title),
+          React__default['default'].createElement('p', null, intro)
+        )
+      )
+    )
+  );
+};
+
+var Breadcrumbs = function (_a) {
+  var items = _a.items,
+    _b = _a.noHeader,
+    noHeader = _b === void 0 ? false : _b;
+  var lastIndex = items.length - 1;
+  return React__default['default'].createElement(
+    'nav',
+    { className: 'breadcrumb'.concat(noHeader ? ' breadcrumb--no-header' : ''), 'aria-label': 'Breadcrumb' },
+    React__default['default'].createElement(
+      'div',
+      { className: 'breadcrumb__container' },
+      React__default['default'].createElement(
+        'ol',
+        { className: 'breadcrumb__list' },
+        items.map(function (item, idx) {
+          var _a;
+          var isCurrent = (_a = item.isCurrent) !== null && _a !== void 0 ? _a : idx === lastIndex;
+          var content = React__default['default'].createElement(
+            'span',
+            { className: 'breadcrumb__content' },
+            item.icon && React__default['default'].createElement('span', { className: 'breadcrumb__icon', 'aria-hidden': 'true' }, item.icon),
+            item.label && React__default['default'].createElement('span', { className: 'breadcrumb__label', title: item.label }, item.label)
+          );
+          return React__default['default'].createElement(
+            'li',
+            { key: idx, className: 'breadcrumb__item' },
+            idx > 0 && React__default['default'].createElement('span', { className: 'breadcrumb__separator', 'aria-hidden': 'true' }, '/'),
+            isCurrent || !item.href
+              ? React__default['default'].createElement('span', { className: 'breadcrumb__current', 'aria-current': isCurrent ? 'page' : undefined }, content)
+              : React__default['default'].createElement('a', { className: 'breadcrumb__link', href: item.href, onClick: item.onClick }, content)
+          );
+        })
+      )
+    )
+  );
+};
+
 var signalR$1 = {};
 
 var jqueryDeferred$1 = { exports: {} };
@@ -48897,12 +49118,14 @@ var signalR = /*#__PURE__*/ _mergeNamespaces(
 
 exports.BookingProduct = BookingProduct;
 exports.BookingWizard = BookingWizard;
+exports.Breadcrumbs = Breadcrumbs;
 exports.Footer = Footer;
 exports.Header = Header;
 exports.ImageCardGrid = ImageCardGrid;
 exports.ImageWithTextSection = ImageWithTextSection;
 exports.Login = Login;
 exports.Navbar = Navbar;
+exports.PhotoGallery = PhotoGallery;
 exports.QSM = QSM;
 exports.SearchResults = SearchResults;
 exports.Slider = Slider;

package/build/build-cjs/src/content/components/breadcrumb.d.ts

@@ -6,11 +6,9 @@ export type BreadcrumbItem = {
   icon?: React.ReactNode;
   isCurrent?: boolean;
 };
-type BreadcrumbsProps = {
+export type BreadcrumbsProps = {
   items: BreadcrumbItem[];
-  separator?: React.ReactNode;
-  ariaLabel?: string;
   noHeader?: boolean;
 };
-export default function Breadcrumbs({ items, separator, ariaLabel, noHeader }: BreadcrumbsProps): React.JSX.Element;
-export {};
+declare const Breadcrumbs: React.FC<BreadcrumbsProps>;
+export default Breadcrumbs;

package/build/build-cjs/src/content/components/gallery.d.ts

@@ -4,9 +4,10 @@ export interface GalleryImage {
   alt?: string;
   caption?: string;
 }
-interface GalleryProps {
-  images: GalleryImage[];
+export interface GalleryProps {
   title?: string;
+  intro?: string;
+  images: GalleryImage[];
 }
-export default function PhotoGallery({ images, title }: GalleryProps): React.JSX.Element;
-export {};
+declare const PhotoGallery: React.FC<GalleryProps>;
+export default PhotoGallery;

package/build/build-cjs/src/index.d.ts

@@ -9,6 +9,8 @@ import ImageCardGrid from './content/image-card-grid';
 import Login from './content/login';
 import ImageWithTextSection from './content/image-with-text-section';
 import Slider from './content/components/slider';
+import PhotoGallery from './content/components/gallery';
+import Breadcrumbs from './content/components/breadcrumb';
 export * from './content/navbar/types';
 export * from './content/header/types';
 export * from './content/footer/types';
@@ -18,4 +20,18 @@ export * from './content/image-with-text-section/types';
 export * from './search-results/types';
 export * from './qsm/types';
 export * from './shared/types';
-export { BookingProduct, BookingWizard, QSM, SearchResults, Navbar, Header, Footer, ImageCardGrid, Login, ImageWithTextSection, Slider };
+export {
+  BookingProduct,
+  BookingWizard,
+  QSM,
+  SearchResults,
+  Navbar,
+  Header,
+  Footer,
+  ImageCardGrid,
+  Login,
+  ImageWithTextSection,
+  Slider,
+  PhotoGallery,
+  Breadcrumbs
+};

package/build/build-esm/index.js

@@ -44709,6 +44709,222 @@ var ImageWithTextSection = function (_a) {
   );
 };
 
+var PhotoGallery = function (_a) {
+  var _b, _c, _d;
+  var images = _a.images,
+    title = _a.title,
+    intro = _a.intro;
+  var _e = useState(null),
+    activeIndex = _e[0],
+    setActiveIndex = _e[1];
+  var isOpen = activeIndex !== null;
+  var activeImage = activeIndex !== null ? images[activeIndex] : null;
+  var close = function () {
+    return setActiveIndex(null);
+  };
+  var next = function () {
+    if (activeIndex === null) return;
+    setActiveIndex((activeIndex + 1) % images.length);
+  };
+  var prev = function () {
+    if (activeIndex === null) return;
+    setActiveIndex((activeIndex - 1 + images.length) % images.length);
+  };
+  useEffect(
+    function () {
+      if (!isOpen) return;
+      var onKeyDown = function (e) {
+        if (e.key === 'Escape') close();
+        if (e.key === 'ArrowRight') next();
+        if (e.key === 'ArrowLeft') prev();
+      };
+      document.addEventListener('keydown', onKeyDown);
+      document.body.style.overflow = 'hidden';
+      return function () {
+        document.removeEventListener('keydown', onKeyDown);
+        document.body.style.overflow = '';
+      };
+    },
+    [isOpen, activeIndex, images.length]
+  );
+  if (!images.length) {
+    return React__default.createElement(
+      'section',
+      { className: 'gallery' },
+      React__default.createElement('p', { className: 'gallery__empty' }, 'No photos available.')
+    );
+  }
+  var big = images[0];
+  var thumbs = images.slice(1, 6);
+  var extraCount = Math.max(0, images.length - 6);
+  var openAt = function (index) {
+    if (!images[index]) return;
+    setActiveIndex(index);
+  };
+  return React__default.createElement(
+    'div',
+    { className: 'content' },
+    React__default.createElement(
+      'div',
+      { className: 'content__container' },
+      React__default.createElement(
+        'div',
+        { className: 'content__colums content__colums--2-1' },
+        React__default.createElement(
+          'section',
+          { className: 'gallery' },
+          React__default.createElement(
+            'div',
+            { className: 'gallery__layout' },
+            React__default.createElement(
+              'button',
+              {
+                type: 'button',
+                className: 'gallery__big',
+                onClick: function () {
+                  return openAt(0);
+                },
+                'aria-label': 'Open image 1'
+              },
+              React__default.createElement('img', {
+                className: 'gallery__big__img',
+                src: big.src,
+                alt: (_b = big.alt) !== null && _b !== void 0 ? _b : '',
+                loading: 'eager'
+              })
+            ),
+            React__default.createElement(
+              'div',
+              { className: 'gallery__thumbs', 'aria-label': 'Gallery thumbnails' },
+              thumbs.map(function (img, i) {
+                var _a;
+                var realIndex = i + 1;
+                var isLastThumbSlot = i === 4;
+                var shouldShowMoreOverlay = isLastThumbSlot && extraCount > 0;
+                return React__default.createElement(
+                  'button',
+                  {
+                    key: ''.concat(img.src, '-').concat(realIndex),
+                    type: 'button',
+                    className: 'gallery__thumb '.concat(shouldShowMoreOverlay ? 'gallery__thumb--more' : ''),
+                    onClick: function () {
+                      return openAt(realIndex);
+                    },
+                    'aria-label': 'Open image '.concat(realIndex + 1)
+                  },
+                  React__default.createElement('img', {
+                    className: 'gallery__thumb__img',
+                    src: img.src,
+                    alt: (_a = img.alt) !== null && _a !== void 0 ? _a : '',
+                    loading: 'lazy'
+                  }),
+                  shouldShowMoreOverlay &&
+                    React__default.createElement(
+                      'span',
+                      { className: 'gallery__thumb__overlay', 'aria-label': ''.concat(extraCount, ' more photos') },
+                      '+',
+                      extraCount
+                    )
+                );
+              })
+            )
+          ),
+          isOpen &&
+            activeImage &&
+            React__default.createElement(
+              'div',
+              {
+                className: 'gallery__lightbox',
+                role: 'dialog',
+                'aria-modal': 'true',
+                onMouseDown: function (e) {
+                  if (e.target === e.currentTarget) close();
+                }
+              },
+              React__default.createElement(
+                'div',
+                { className: 'gallery__lightbox__panel' },
+                React__default.createElement(
+                  'button',
+                  { type: 'button', className: 'gallery__btn__icon gallery__btn__icon--close', 'aria-label': 'Close', onClick: close },
+                  React__default.createElement(Icon$3, { name: 'ui-close', width: 16, height: 16 })
+                ),
+                React__default.createElement(
+                  'div',
+                  { className: 'gallery__lightbox__media' },
+                  React__default.createElement('img', {
+                    className: 'gallery__lightbox__img',
+                    src: activeImage.src,
+                    alt: (_c = activeImage.alt) !== null && _c !== void 0 ? _c : ''
+                  })
+                ),
+                React__default.createElement(
+                  'div',
+                  { className: 'gallery__lightbox__footer' },
+                  React__default.createElement(
+                    'div',
+                    { className: 'gallery__lightbox__info' },
+                    React__default.createElement('span', { className: 'gallery__lightbox__index' }, activeIndex + 1, ' / ', images.length),
+                    (activeImage.caption || activeImage.alt) &&
+                      React__default.createElement(
+                        'span',
+                        { className: 'gallery__lightbox__caption' },
+                        (_d = activeImage.caption) !== null && _d !== void 0 ? _d : activeImage.alt
+                      )
+                  ),
+                  React__default.createElement(
+                    'div',
+                    { className: 'gallery__lightbox__controls' },
+                    React__default.createElement('button', { type: 'button', className: 'gallery__btn', onClick: prev }, '\u2190'),
+                    React__default.createElement('button', { type: 'button', className: 'gallery__btn', onClick: next }, '\u2192')
+                  )
+                )
+              )
+            )
+        ),
+        React__default.createElement('div', null, React__default.createElement('h2', null, title), React__default.createElement('p', null, intro))
+      )
+    )
+  );
+};
+
+var Breadcrumbs = function (_a) {
+  var items = _a.items,
+    _b = _a.noHeader,
+    noHeader = _b === void 0 ? false : _b;
+  var lastIndex = items.length - 1;
+  return React__default.createElement(
+    'nav',
+    { className: 'breadcrumb'.concat(noHeader ? ' breadcrumb--no-header' : ''), 'aria-label': 'Breadcrumb' },
+    React__default.createElement(
+      'div',
+      { className: 'breadcrumb__container' },
+      React__default.createElement(
+        'ol',
+        { className: 'breadcrumb__list' },
+        items.map(function (item, idx) {
+          var _a;
+          var isCurrent = (_a = item.isCurrent) !== null && _a !== void 0 ? _a : idx === lastIndex;
+          var content = React__default.createElement(
+            'span',
+            { className: 'breadcrumb__content' },
+            item.icon && React__default.createElement('span', { className: 'breadcrumb__icon', 'aria-hidden': 'true' }, item.icon),
+            item.label && React__default.createElement('span', { className: 'breadcrumb__label', title: item.label }, item.label)
+          );
+          return React__default.createElement(
+            'li',
+            { key: idx, className: 'breadcrumb__item' },
+            idx > 0 && React__default.createElement('span', { className: 'breadcrumb__separator', 'aria-hidden': 'true' }, '/'),
+            isCurrent || !item.href
+              ? React__default.createElement('span', { className: 'breadcrumb__current', 'aria-current': isCurrent ? 'page' : undefined }, content)
+              : React__default.createElement('a', { className: 'breadcrumb__link', href: item.href, onClick: item.onClick }, content)
+          );
+        })
+      )
+    )
+  );
+};
+
 var signalR$1 = {};
 
 var jqueryDeferred$1 = { exports: {} };
@@ -48603,4 +48819,19 @@ var signalR = /*#__PURE__*/ _mergeNamespaces(
   [signalR$1]
 );
 
-export { BookingProduct, BookingWizard, DepartureRange, Footer, Header, ImageCardGrid, ImageWithTextSection, Login, Navbar, QSM, SearchResults, Slider };
+export {
+  BookingProduct,
+  BookingWizard,
+  Breadcrumbs,
+  DepartureRange,
+  Footer,
+  Header,
+  ImageCardGrid,
+  ImageWithTextSection,
+  Login,
+  Navbar,
+  PhotoGallery,
+  QSM,
+  SearchResults,
+  Slider
+};

package/build/build-esm/src/content/components/breadcrumb.d.ts

@@ -6,11 +6,9 @@ export type BreadcrumbItem = {
   icon?: React.ReactNode;
   isCurrent?: boolean;
 };
-type BreadcrumbsProps = {
+export type BreadcrumbsProps = {
   items: BreadcrumbItem[];
-  separator?: React.ReactNode;
-  ariaLabel?: string;
   noHeader?: boolean;
 };
-export default function Breadcrumbs({ items, separator, ariaLabel, noHeader }: BreadcrumbsProps): React.JSX.Element;
-export {};
+declare const Breadcrumbs: React.FC<BreadcrumbsProps>;
+export default Breadcrumbs;

package/build/build-esm/src/content/components/gallery.d.ts

@@ -4,9 +4,10 @@ export interface GalleryImage {
   alt?: string;
   caption?: string;
 }
-interface GalleryProps {
-  images: GalleryImage[];
+export interface GalleryProps {
   title?: string;
+  intro?: string;
+  images: GalleryImage[];
 }
-export default function PhotoGallery({ images, title }: GalleryProps): React.JSX.Element;
-export {};
+declare const PhotoGallery: React.FC<GalleryProps>;
+export default PhotoGallery;

package/build/build-esm/src/index.d.ts

@@ -9,6 +9,8 @@ import ImageCardGrid from './content/image-card-grid';
 import Login from './content/login';
 import ImageWithTextSection from './content/image-with-text-section';
 import Slider from './content/components/slider';
+import PhotoGallery from './content/components/gallery';
+import Breadcrumbs from './content/components/breadcrumb';
 export * from './content/navbar/types';
 export * from './content/header/types';
 export * from './content/footer/types';
@@ -18,4 +20,18 @@ export * from './content/image-with-text-section/types';
 export * from './search-results/types';
 export * from './qsm/types';
 export * from './shared/types';
-export { BookingProduct, BookingWizard, QSM, SearchResults, Navbar, Header, Footer, ImageCardGrid, Login, ImageWithTextSection, Slider };
+export {
+  BookingProduct,
+  BookingWizard,
+  QSM,
+  SearchResults,
+  Navbar,
+  Header,
+  Footer,
+  ImageCardGrid,
+  Login,
+  ImageWithTextSection,
+  Slider,
+  PhotoGallery,
+  Breadcrumbs
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qite/tide-booking-component",
-  "version": "1.4.64",
+  "version": "1.4.66",
   "description": "React Booking wizard & Booking product component for Tide",
   "main": "build/build-cjs/index.js",
   "types": "build/build-cjs/src/index.d.ts",

package/src/content/components/breadcrumb.tsx

@@ -8,27 +8,16 @@ export type BreadcrumbItem = {
   isCurrent?: boolean;
 };
 
-type BreadcrumbsProps = {
+export type BreadcrumbsProps = {
   items: BreadcrumbItem[];
-  separator?: React.ReactNode;
-  ariaLabel?: string;
   noHeader?: boolean;
 };
 
-export default function Breadcrumbs({
-  items,
-  separator = (
-    <span className="breadcrumb__separator" aria-hidden="true">
-      /
-    </span>
-  ),
-  ariaLabel = 'Breadcrumb',
-  noHeader = false
-}: BreadcrumbsProps) {
+const Breadcrumbs: React.FC<BreadcrumbsProps> = ({ items, noHeader = false }) => {
   const lastIndex = items.length - 1;
 
   return (
-    <nav className={`breadcrumb${noHeader ? ' breadcrumb--no-header' : ''}`} aria-label={ariaLabel}>
+    <nav className={`breadcrumb${noHeader ? ' breadcrumb--no-header' : ''}`} aria-label="Breadcrumb">
       <div className="breadcrumb__container">
         <ol className="breadcrumb__list">
           {items.map((item, idx) => {
@@ -51,7 +40,11 @@ export default function Breadcrumbs({
 
             return (
               <li key={idx} className="breadcrumb__item">
-                {idx > 0 && separator}
+                {idx > 0 && (
+                  <span className="breadcrumb__separator" aria-hidden="true">
+                    /
+                  </span>
+                )}
 
                 {isCurrent || !item.href ? (
                   <span className="breadcrumb__current" aria-current={isCurrent ? 'page' : undefined}>
@@ -69,4 +62,6 @@ export default function Breadcrumbs({
       </div>
     </nav>
   );
-}
+};
+
+export default Breadcrumbs;

package/src/content/components/gallery.tsx

@@ -7,12 +7,13 @@ export interface GalleryImage {
   caption?: string;
 }
 
-interface GalleryProps {
-  images: GalleryImage[];
+export interface GalleryProps {
   title?: string;
+  intro?: string;
+  images: GalleryImage[];
 }
 
-export default function PhotoGallery({ images, title = 'Gallery' }: GalleryProps) {
+const PhotoGallery: React.FC<GalleryProps> = ({ images, title, intro }) => {
   const [activeIndex, setActiveIndex] = useState<number | null>(null);
 
   const isOpen = activeIndex !== null;
@@ -66,80 +67,87 @@ export default function PhotoGallery({ images, title = 'Gallery' }: GalleryProps
   };
 
   return (
-    <section className="gallery">
-      {/* <header className="gallery__header">
-        <h2 className="gallery__title">{title}</h2>
-        <span className="gallery__count">{images.length} photos</span>
-      </header> */}
-
-      <div className="gallery__layout">
-        <button type="button" className="gallery__big" onClick={() => openAt(0)} aria-label="Open image 1">
-          <img className="gallery__big__img" src={big.src} alt={big.alt ?? ''} loading="eager" />
-        </button>
-
-        <div className="gallery__thumbs" aria-label="Gallery thumbnails">
-          {thumbs.map((img, i) => {
-            const realIndex = i + 1;
-            const isLastThumbSlot = i === 4;
-            const shouldShowMoreOverlay = isLastThumbSlot && extraCount > 0;
-
-            return (
-              <button
-                key={`${img.src}-${realIndex}`}
-                type="button"
-                className={`gallery__thumb ${shouldShowMoreOverlay ? 'gallery__thumb--more' : ''}`}
-                onClick={() => openAt(realIndex)}
-                aria-label={`Open image ${realIndex + 1}`}>
-                <img className="gallery__thumb__img" src={img.src} alt={img.alt ?? ''} loading="lazy" />
-
-                {shouldShowMoreOverlay && (
-                  <span className="gallery__thumb__overlay" aria-label={`${extraCount} more photos`}>
-                    +{extraCount}
-                  </span>
-                )}
+    <div className="content">
+      <div className="content__container">
+        <div className="content__colums content__colums--2-1">
+          <section className="gallery">
+            <div className="gallery__layout">
+              <button type="button" className="gallery__big" onClick={() => openAt(0)} aria-label="Open image 1">
+                <img className="gallery__big__img" src={big.src} alt={big.alt ?? ''} loading="eager" />
               </button>
-            );
-          })}
-        </div>
-      </div>
-
-      {isOpen && activeImage && (
-        <div
-          className="gallery__lightbox"
-          role="dialog"
-          aria-modal="true"
-          onMouseDown={(e) => {
-            if (e.target === e.currentTarget) close();
-          }}>
-          <div className="gallery__lightbox__panel">
-            <button type="button" className="gallery__btn__icon gallery__btn__icon--close" aria-label="Close" onClick={close}>
-              <Icon name="ui-close" width={16} height={16} />
-            </button>
-
-            <div className="gallery__lightbox__media">
-              <img className="gallery__lightbox__img" src={activeImage.src} alt={activeImage.alt ?? ''} />
-            </div>
 
-            <div className="gallery__lightbox__footer">
-              <div className="gallery__lightbox__info">
-                <span className="gallery__lightbox__index">
-                  {activeIndex + 1} / {images.length}
-                </span>
-                {(activeImage.caption || activeImage.alt) && <span className="gallery__lightbox__caption">{activeImage.caption ?? activeImage.alt}</span>}
+              <div className="gallery__thumbs" aria-label="Gallery thumbnails">
+                {thumbs.map((img, i) => {
+                  const realIndex = i + 1;
+                  const isLastThumbSlot = i === 4;
+                  const shouldShowMoreOverlay = isLastThumbSlot && extraCount > 0;
+
+                  return (
+                    <button
+                      key={`${img.src}-${realIndex}`}
+                      type="button"
+                      className={`gallery__thumb ${shouldShowMoreOverlay ? 'gallery__thumb--more' : ''}`}
+                      onClick={() => openAt(realIndex)}
+                      aria-label={`Open image ${realIndex + 1}`}>
+                      <img className="gallery__thumb__img" src={img.src} alt={img.alt ?? ''} loading="lazy" />
+
+                      {shouldShowMoreOverlay && (
+                        <span className="gallery__thumb__overlay" aria-label={`${extraCount} more photos`}>
+                          +{extraCount}
+                        </span>
+                      )}
+                    </button>
+                  );
+                })}
               </div>
+            </div>
 
-              <div className="gallery__lightbox__controls">
-                <button type="button" className="gallery__btn" onClick={prev}>
-                  ←
-                </button>
-                <button type="button" className="gallery__btn" onClick={next}>
-                  →
-                </button>
+            {isOpen && activeImage && (
+              <div
+                className="gallery__lightbox"
+                role="dialog"
+                aria-modal="true"
+                onMouseDown={(e) => {
+                  if (e.target === e.currentTarget) close();
+                }}>
+                <div className="gallery__lightbox__panel">
+                  <button type="button" className="gallery__btn__icon gallery__btn__icon--close" aria-label="Close" onClick={close}>
+                    <Icon name="ui-close" width={16} height={16} />
+                  </button>
+
+                  <div className="gallery__lightbox__media">
+                    <img className="gallery__lightbox__img" src={activeImage.src} alt={activeImage.alt ?? ''} />
+                  </div>
+
+                  <div className="gallery__lightbox__footer">
+                    <div className="gallery__lightbox__info">
+                      <span className="gallery__lightbox__index">
+                        {activeIndex + 1} / {images.length}
+                      </span>
+                      {(activeImage.caption || activeImage.alt) && <span className="gallery__lightbox__caption">{activeImage.caption ?? activeImage.alt}</span>}
+                    </div>
+
+                    <div className="gallery__lightbox__controls">
+                      <button type="button" className="gallery__btn" onClick={prev}>
+                        ←
+                      </button>
+                      <button type="button" className="gallery__btn" onClick={next}>
+                        →
+                      </button>
+                    </div>
+                  </div>
+                </div>
               </div>
-            </div>
+            )}
+          </section>
+          <div>
+            <h2>{title}</h2>
+            <p>{intro}</p>
           </div>
         </div>
-      )}
-    </section>
+      </div>
+    </div>
   );
-}
+};
+
+export default PhotoGallery;

package/src/index.ts

@@ -9,6 +9,8 @@ import ImageCardGrid from './content/image-card-grid';
 import Login from './content/login';
 import ImageWithTextSection from './content/image-with-text-section';
 import Slider from './content/components/slider';
+import PhotoGallery from './content/components/gallery';
+import Breadcrumbs from './content/components/breadcrumb';
 
 export * from './content/navbar/types';
 export * from './content/header/types';
@@ -20,4 +22,18 @@ export * from './search-results/types';
 export * from './qsm/types';
 export * from './shared/types';
 
-export { BookingProduct, BookingWizard, QSM, SearchResults, Navbar, Header, Footer, ImageCardGrid, Login, ImageWithTextSection, Slider };
+export {
+  BookingProduct,
+  BookingWizard,
+  QSM,
+  SearchResults,
+  Navbar,
+  Header,
+  Footer,
+  ImageCardGrid,
+  Login,
+  ImageWithTextSection,
+  Slider,
+  PhotoGallery,
+  Breadcrumbs
+};