npm - @skyscanner/backpack-web - Versions diffs - 42.14.0 → 42.16.0 - Mend

@skyscanner/backpack-web 42.14.0 → 42.16.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (26) hide show

package/bpk-component-accordion/src/BpkAccordionItem.module.css CHANGED Viewed

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-accordion__item--with-divider{box-shadow:0 -1px 0 0 #c1c7cf inset}.bpk-accordion__item--with-divider-on-dark{box-shadow:0 -1px 0 0 hsla(0,0%,100%,.5) inset}.bpk-accordion__title{height:auto}.bpk-accordion__toggle-button{width:100%;padding:0;border:0;background-color:rgba(0,0,0,0);color:#161616;text-align:left;cursor:pointer;appearance:none}html[dir=rtl] .bpk-accordion__toggle-button{text-align:right}.bpk-accordion__flex-container{display:inline-flex;width:100%;margin:1rem 0;flex-direction:row}.bpk-accordion__title-text{flex-grow:1}.bpk-accordion__title-text--on-dark{color:#fff}.bpk-accordion__icon-wrapper{display:flex;align-items:center;margin-left:.5rem;margin-right:0}html[dir=rtl] .bpk-accordion__icon-wrapper{margin-left:0;margin-right:.5rem}.bpk-accordion__leading-icon{margin-left:0;margin-right:.5rem}html[dir=rtl] .bpk-accordion__leading-icon{margin-left:.5rem;margin-right:0}.bpk-accordion__item-expand-icon{fill:#161616}.bpk-accordion__item-expand-icon--flipped{transform:scaleY(-1)}.bpk-accordion__item-expand-icon--on-dark{fill:#fff}.bpk-accordion__content-container{margin:0}.bpk-accordion__content-inner-container--with-divider{padding-bottom:1rem}
+.bpk-accordion__item--with-divider{box-shadow:0 -1px 0 0 #c1c7cf inset}.bpk-accordion__item--with-divider-on-dark{box-shadow:0 -1px 0 0 hsla(0,0%,100%,.5) inset}.bpk-accordion__title{height:auto}.bpk-accordion__toggle-button{width:100%;padding:0;border:0;background-color:rgba(0,0,0,0);color:#161616;text-align:start;cursor:pointer;appearance:none}.bpk-accordion__flex-container{display:inline-flex;width:100%;margin:1rem 0;flex-direction:row}.bpk-accordion__title-text{flex-grow:1}.bpk-accordion__title-text--on-dark{color:#fff}.bpk-accordion__icon-wrapper{display:flex;align-items:center;margin-left:.5rem;margin-right:0}html[dir=rtl] .bpk-accordion__icon-wrapper{margin-left:0;margin-right:.5rem}.bpk-accordion__leading-icon{margin-left:0;margin-right:.5rem}html[dir=rtl] .bpk-accordion__leading-icon{margin-left:.5rem;margin-right:0}.bpk-accordion__item-expand-icon{fill:#161616}.bpk-accordion__item-expand-icon--flipped{transform:scaleY(-1)}.bpk-accordion__item-expand-icon--on-dark{fill:#fff}.bpk-accordion__content-container{margin:0}.bpk-accordion__content-inner-container--with-divider{padding-bottom:1rem}

package/bpk-component-autosuggest/src/BpkAutosuggest.module.css CHANGED Viewed

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-autosuggest__container--open{position:relative}.bpk-autosuggest__suggestions-container{display:none}.bpk-autosuggest__suggestions-container--open{position:absolute;top:100%;display:block;z-index:900;width:100%;margin-top:.75rem}.bpk-autosuggest__suggestions-container--open::before{position:absolute;bottom:100%;left:50%;content:" ";display:block;margin-bottom:-0.0625rem;margin-left:-0.8125rem;border:.8125rem solid rgba(0,0,0,0);border-bottom-color:#e0e4e9;pointer-events:none}.bpk-autosuggest__suggestions-container--open::after{position:absolute;bottom:100%;left:50%;content:" ";display:block;margin-bottom:-0.0625rem;margin-left:-0.75rem;border:.75rem solid rgba(0,0,0,0);border-bottom-color:#fff;pointer-events:none}.bpk-autosuggest__suggestions-list{min-width:fit-content;margin:0;padding:0;list-style:none;overflow:hidden;border:.0625rem solid #e0e4e9;background-color:#fff;border-radius:.5rem;box-shadow:0px 4px 14px 0px rgba(37,32,31,.25)}.bpk-autosuggest__suggestion-item{cursor:pointer;margin:0;font-size:1rem;line-height:1.5rem;font-weight:400}.bpk-autosuggest__suggestion-item:not(:last-child){box-shadow:0 -1px 0 0 #c1c7cf inset}.bpk-autosuggest__suggestion-item:active{background-color:#eff3f8}.bpk-autosuggest__suggestion-item--highlighted{background-color:#eff3f8}.bpk-autosuggest__suggestion{display:table;width:100%;padding:1rem}.bpk-autosuggest__suggestion--indent{padding-left:2rem}.bpk-autosuggest__suggestion-icon{display:flex;margin-right:.5rem;vertical-align:top;fill:#626971}html[dir=rtl] .bpk-autosuggest__suggestion-icon{margin-right:0;margin-left:.5rem}.bpk-autosuggest__suggestion-content{display:table-cell;width:100%;vertical-align:top}.bpk-autosuggest__suggestion-inner{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between}.bpk-autosuggest__suggestion-value{display:block;overflow-wrap:anywhere}.bpk-autosuggest__suggestion-sub-heading{display:table-cell;width:100%;vertical-align:top;margin:0;font-size:.75rem;line-height:1rem;font-weight:400}.bpk-autosuggest__suggestion-tertiary-label{display:table-cell;align-self:center;color:#626971;vertical-align:top;word-break:keep-all;margin:0;font-size:.75rem;line-height:1rem;font-weight:400}
+.bpk-autosuggest__container--open{position:relative}.bpk-autosuggest__suggestions-container{display:none}.bpk-autosuggest__suggestions-container--open{position:absolute;top:100%;display:block;z-index:900;width:100%;margin-top:.75rem}.bpk-autosuggest__suggestions-container--open::before{position:absolute;bottom:100%;left:50%;content:" ";display:block;margin-bottom:-0.0625rem;margin-left:-0.8125rem;border:.8125rem solid rgba(0,0,0,0);border-bottom-color:#e0e4e9;pointer-events:none}.bpk-autosuggest__suggestions-container--open::after{position:absolute;bottom:100%;left:50%;content:" ";display:block;margin-bottom:-0.0625rem;margin-left:-0.75rem;border:.75rem solid rgba(0,0,0,0);border-bottom-color:#fff;pointer-events:none}.bpk-autosuggest__suggestions-list{min-width:fit-content;margin:0;padding:0;list-style:none;overflow:hidden;border:.0625rem solid #e0e4e9;background-color:#fff;border-radius:.5rem;box-shadow:0px 4px 14px 0px rgba(37,32,31,.25)}.bpk-autosuggest__suggestion-item{cursor:pointer;margin:0;font-size:1rem;line-height:1.5rem;font-weight:400}.bpk-autosuggest__suggestion-item:not(:last-child){box-shadow:0 -1px 0 0 #c1c7cf inset}.bpk-autosuggest__suggestion-item:active{background-color:#eff3f8}.bpk-autosuggest__suggestion-item--highlighted{background-color:#eff3f8}.bpk-autosuggest__suggestion{display:table;width:100%;padding:1rem}.bpk-autosuggest__suggestion--indent{padding-inline-start:2rem}.bpk-autosuggest__suggestion-icon{display:flex;vertical-align:top;fill:#626971;margin-inline-end:.5rem}.bpk-autosuggest__suggestion-content{display:table-cell;width:100%;vertical-align:top}.bpk-autosuggest__suggestion-inner{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between}.bpk-autosuggest__suggestion-value{display:block;overflow-wrap:anywhere}.bpk-autosuggest__suggestion-sub-heading{display:table-cell;width:100%;vertical-align:top;margin:0;font-size:.75rem;line-height:1rem;font-weight:400}.bpk-autosuggest__suggestion-tertiary-label{display:table-cell;align-self:center;color:#626971;vertical-align:top;word-break:keep-all;margin:0;font-size:.75rem;line-height:1rem;font-weight:400}

package/bpk-component-autosuggest/src/BpkAutosuggestV2/BpkAutosuggest.module.css CHANGED Viewed

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-autosuggest__input{width:100%}.bpk-autosuggest__suggestions-container{margin-top:.75rem;border:.0625rem solid #e0e4e9;border-radius:.5rem;background-color:#fff}.bpk-autosuggest__arrow{width:1.5rem;height:1.5rem;fill:#fff}.bpk-autosuggest__arrow[data-hide]{visibility:hidden}.bpk-autosuggest__suggestions-list{min-width:fit-content;margin:0;padding:0;border-radius:.5rem;background-color:#fff;list-style:none;box-shadow:0px 4px 14px 0px rgba(37,32,31,.25);overflow:hidden}.bpk-autosuggest__suggestion-item{cursor:pointer;margin:0;font-size:1rem;line-height:1.5rem;font-weight:400}.bpk-autosuggest__suggestion-item:not(:last-child){box-shadow:0 -1px 0 0 #c1c7cf inset}.bpk-autosuggest__suggestion-item:active{background-color:#eff3f8}.bpk-autosuggest__suggestion-item--highlighted{background-color:#eff3f8}.bpk-autosuggest__suggestion{display:table;width:100%;padding:1rem}.bpk-autosuggest__suggestion--indent{padding-left:2rem}.bpk-autosuggest__suggestion-icon{display:table-cell;margin-right:.5rem;vertical-align:top;fill:#626971}html[dir=rtl] .bpk-autosuggest__suggestion-icon{margin-right:0;margin-left:.5rem}.bpk-autosuggest__suggestion-content{display:table-cell;width:100%;vertical-align:top}.bpk-autosuggest__suggestion-inner{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between}.bpk-autosuggest__suggestion-value{display:block}.bpk-autosuggest__suggestion-sub-heading{display:table-cell;width:100%;vertical-align:top;margin:0;font-size:.75rem;line-height:1rem;font-weight:400}.bpk-autosuggest__suggestion-tertiary-label{display:table-cell;align-self:center;color:#626971;vertical-align:top;word-break:keep-all;margin:0;font-size:.75rem;line-height:1rem;font-weight:400}.bpk-autosuggest__section-container:not(:first-of-type){border-top:1px solid #c1c7cf}.bpk-autosuggest__visuallyhidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;white-space:nowrap;overflow:hidden;clip:rect(0 0 0 0)}
+.bpk-autosuggest__input{width:100%}.bpk-autosuggest__suggestions-container{margin-top:.75rem;border:.0625rem solid #e0e4e9;border-radius:.5rem;background-color:#fff}.bpk-autosuggest__arrow{width:1.5rem;height:1.5rem;fill:#fff}.bpk-autosuggest__arrow[data-hide]{visibility:hidden}.bpk-autosuggest__suggestions-list{min-width:fit-content;margin:0;padding:0;border-radius:.5rem;background-color:#fff;list-style:none;box-shadow:0px 4px 14px 0px rgba(37,32,31,.25);overflow:hidden}.bpk-autosuggest__suggestion-item{cursor:pointer;margin:0;font-size:1rem;line-height:1.5rem;font-weight:400}.bpk-autosuggest__suggestion-item:not(:last-child){box-shadow:0 -1px 0 0 #c1c7cf inset}.bpk-autosuggest__suggestion-item:active{background-color:#eff3f8}.bpk-autosuggest__suggestion-item--highlighted{background-color:#eff3f8}.bpk-autosuggest__suggestion{display:table;width:100%;padding:1rem}.bpk-autosuggest__suggestion--indent{padding-inline-start:2rem}.bpk-autosuggest__suggestion-icon{display:table-cell;vertical-align:top;fill:#626971;margin-inline-end:.5rem}.bpk-autosuggest__suggestion-content{display:table-cell;width:100%;vertical-align:top}.bpk-autosuggest__suggestion-inner{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between}.bpk-autosuggest__suggestion-value{display:block}.bpk-autosuggest__suggestion-sub-heading{display:table-cell;width:100%;vertical-align:top;margin:0;font-size:.75rem;line-height:1rem;font-weight:400}.bpk-autosuggest__suggestion-tertiary-label{display:table-cell;align-self:center;color:#626971;vertical-align:top;word-break:keep-all;margin:0;font-size:.75rem;line-height:1rem;font-weight:400}.bpk-autosuggest__section-container:not(:first-of-type){border-top:1px solid #c1c7cf}.bpk-autosuggest__visuallyhidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;white-space:nowrap;overflow:hidden;clip:rect(0 0 0 0)}

package/bpk-component-carousel/src/BpkCarousel.d.ts CHANGED Viewed

@@ -1,3 +1,3 @@
 import type { Props } from './types';
-declare const BpkCarousel: ({ accessibilityLabels, bottom, images, initialImageIndex, onImageChanged, }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const BpkCarousel: ({ accessibilityLabels, bottom, images, initialImageIndex, onImageChanged, pageIndicatorVariant, showPageIndicatorNav, }: Props) => import("react/jsx-runtime").JSX.Element;
 export default BpkCarousel;

package/bpk-component-carousel/src/BpkCarousel.js CHANGED Viewed

@@ -30,11 +30,14 @@ const BpkCarousel = ({
   bottom,
   images,
   initialImageIndex = 0,
-  onImageChanged = null
+  onImageChanged = null,
+  pageIndicatorVariant = VARIANT.overImageSpaced,
+  showPageIndicatorNav
 }) => {
   const [shownImageIndex, updateShownImageIndex] = useState(initialImageIndex);
   const imagesRef = useRef([]);
   const isDesktop = useMediaQuery(BREAKPOINTS.ABOVE_TABLET);
+  const showNav = showPageIndicatorNav ?? isDesktop;
   const handleIndicatorClick = (e, newIndex) => {
     e.stopPropagation();
     let target = newIndex;
@@ -59,12 +62,12 @@ const BpkCarousel = ({
       children: /*#__PURE__*/_jsx(BpkPageIndicator, {
         currentIndex: shownImageIndex,
         totalIndicators: images.length,
-        variant: VARIANT.overImageSpaced,
+        variant: pageIndicatorVariant,
         indicatorLabel: accessibilityLabels.indicatorLabel ?? "Go to slide",
         prevNavLabel: accessibilityLabels.prevNavLabel ?? "Previous slide",
         nextNavLabel: accessibilityLabels.nextNavLabel ?? "Next slide",
-        showNav: isDesktop,
-        onClick: isDesktop ? handleIndicatorClick : () => {}
+        showNav: showNav,
+        onClick: showNav ? handleIndicatorClick : () => {}
       })
     })]
   });

package/bpk-component-carousel/src/BpkCarousel.module.css CHANGED Viewed

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-carousel{position:relative;width:100%;height:100%}.bpk-carousel__page-indicator-over-image{position:absolute;right:0;bottom:.25rem;left:0;display:flex;margin:auto 1rem;justify-content:center;overflow:clip}
+.bpk-carousel{position:relative;width:100%;height:100%}.bpk-carousel__page-indicator-over-image{position:absolute;right:0;bottom:.25rem;left:0;display:flex;margin:auto 1rem;justify-content:center}

package/bpk-component-carousel/src/BpkCarouselImage.module.css CHANGED Viewed

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-carousel-image{display:inline-flex;width:100%;min-width:0;height:100%;min-height:0;justify-content:center;scroll-snap-align:start;scroll-snap-stop:always;isolation:isolate}.bpk-carousel-image img{max-width:100%;max-height:100%;object-fit:initial}
+.bpk-carousel-image{display:inline-flex;width:100%;min-width:0;height:100%;min-height:0;justify-content:center;scroll-snap-align:start;scroll-snap-stop:always;isolation:isolate}.bpk-carousel-image img{display:block;max-width:100%;max-height:100%;object-fit:initial}

package/bpk-component-carousel/src/types.d.ts CHANGED Viewed

@@ -1,10 +1,12 @@
 import type { ReactNode } from "react";
+import type { VARIANT } from '../../bpk-component-page-indicator';
 export type OnImageChangedHandler = ((shownImageIndex: number) => void) | null | undefined;
 export type AccessibilityLabels = {
     indicatorLabel?: string;
     prevNavLabel?: string;
     nextNavLabel?: string;
 };
+export type PageIndicatorVariant = typeof VARIANT.overImageSpaced | typeof VARIANT.carousel;
 export type Props = {
     images: ReactNode[];
     initialImageIndex?: number;
@@ -14,4 +16,10 @@ export type Props = {
     */
     bottom?: number;
     accessibilityLabels?: AccessibilityLabels;
+    pageIndicatorVariant?: PageIndicatorVariant;
+    /**
+     * Force the page indicator's nav buttons on or off.
+     * When omitted, the nav buttons are shown on desktop breakpoints only.
+     */
+    showPageIndicatorNav?: boolean;
 };

package/bpk-component-comparison-table/src/BpkComparisonTable/BpkComparisonTable.module.css CHANGED Viewed

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-comparison-table__scroll-container{flex:1;overflow:auto;min-block-size:0;overscroll-behavior:contain}.bpk-comparison-table__scroll-container tbody{transform:translateY(var(--bpk-rows-offset, 0))}.bpk-comparison-table__scroll-container td:not(:last-child){border-inline-end:1px solid #c1c7cf}.bpk-comparison-table__scroll-container th:not(:last-child)::after{position:absolute;content:"";background-color:#c1c7cf;inline-size:1px;inset-block-end:0;inset-block-start:1rem;inset-inline-end:0}.bpk-comparison-table__scroll-container table{border-collapse:separate;border-spacing:0;min-inline-size:33.75rem}.bpk-comparison-table__scroll-container th{position:sticky;z-index:1;padding:0;background-color:#fff;vertical-align:top;inset-block-start:0}.bpk-comparison-table__header-content{display:flex;padding:1rem;flex-direction:column}.bpk-comparison-table__header-image-wrapper{position:relative;opacity:var(--bpk-image-opacity, 1);margin-block-end:1rem}.bpk-comparison-table__header-image-area{display:flex;justify-content:center;align-items:center;border-radius:.25rem;background-color:#e0e4e9;overflow:hidden;block-size:5.1875rem}.bpk-comparison-table__header-image-area img{max-block-size:100%;max-inline-size:100%;object-fit:contain}.bpk-comparison-table__header-id-section{margin-block-start:calc(6.1875rem*(var(--bpk-image-opacity, 1) - 1))}.bpk-comparison-table__best-tag{position:absolute;z-index:1;transform:translateY(-50%);inset-block-start:0}.bpk-comparison-table__remove-button{opacity:var(--bpk-image-opacity, 1);overflow:clip;margin-block-start:calc(.5rem*var(--bpk-image-opacity, 1));max-block-size:calc(5rem*var(--bpk-image-opacity, 1));overflow-clip-margin:.25rem}.bpk-comparison-table__placeholder-cell{background-color:#fff}
+.bpk-comparison-table__scroll-container{flex:1;overflow:auto;min-block-size:0;overscroll-behavior:contain}.bpk-comparison-table__scroll-container tbody{transform:translateY(var(--bpk-rows-offset, 0))}.bpk-comparison-table__scroll-container td:not(:last-child){border-inline-end:1px solid #c1c7cf}.bpk-comparison-table__scroll-container th:not(:last-child)::after{position:absolute;content:"";background-color:#c1c7cf;inline-size:1px;inset-block-end:0;inset-block-start:1rem;inset-inline-end:0}.bpk-comparison-table__scroll-container table{border-collapse:separate;border-spacing:0;box-shadow:none;min-inline-size:33.75rem}.bpk-comparison-table__scroll-container th{position:sticky;z-index:1;padding:0;background-color:#fff;vertical-align:top;inset-block-start:0}.bpk-comparison-table__header-content{display:flex;padding:1rem;flex-direction:column}.bpk-comparison-table__header-image-wrapper{position:relative;opacity:var(--bpk-image-opacity, 1);margin-block-end:1rem}.bpk-comparison-table__header-image-area{display:flex;justify-content:center;align-items:center;border-radius:.25rem;background-color:#e0e4e9;overflow:hidden;block-size:5.1875rem}.bpk-comparison-table__header-image-area img{max-block-size:100%;max-inline-size:100%;object-fit:contain}.bpk-comparison-table__header-id-section{margin-block-start:calc(6.1875rem*(var(--bpk-image-opacity, 1) - 1))}.bpk-comparison-table__best-tag{position:absolute;z-index:1;transform:translateY(-50%);inset-block-start:0}.bpk-comparison-table__remove-cell{padding:0}.bpk-comparison-table__remove-cell-inner{padding:0 1rem calc(1rem*var(--bpk-image-opacity, 1));opacity:var(--bpk-image-opacity, 1);overflow:clip;max-block-size:calc(3.5rem*var(--bpk-image-opacity, 1));overflow-clip-margin:.25rem}.bpk-comparison-table__placeholder-cell{background-color:#fff}

package/bpk-component-comparison-table/src/BpkComparisonTable/BpkComparisonTableColumnHeader.d.ts CHANGED Viewed

@@ -1,8 +1,6 @@
 import type { BpkCompareColumn } from './common-types';
-type BpkComparisonTableColumnHeaderProps = Pick<BpkCompareColumn, 'imageSrc' | 'imageAlt' | 'headerContent' | 'itemId' | 'bestTag' | 'removeA11yLabel'> & {
-    removeLabel: string;
+type BpkComparisonTableColumnHeaderProps = Pick<BpkCompareColumn, 'imageSrc' | 'imageAlt' | 'headerContent' | 'bestTag'> & {
     bestTagLabel: string;
-    onRemove: (itemId: string) => void;
 };
-declare const BpkComparisonTableColumnHeader: ({ bestTag, bestTagLabel, headerContent, imageAlt, imageSrc, itemId, onRemove, removeA11yLabel, removeLabel, }: BpkComparisonTableColumnHeaderProps) => import("react/jsx-runtime").JSX.Element;
+declare const BpkComparisonTableColumnHeader: ({ bestTag, bestTagLabel, headerContent, imageAlt, imageSrc, }: BpkComparisonTableColumnHeaderProps) => import("react/jsx-runtime").JSX.Element;
 export default BpkComparisonTableColumnHeader;

package/bpk-component-comparison-table/src/BpkComparisonTable/BpkComparisonTableColumnHeader.js CHANGED Viewed

@@ -17,7 +17,6 @@
  */
 import BpkBadge, { BADGE_TYPES } from "../../../bpk-component-badge";
-import BpkButton, { BUTTON_TYPES, SIZE_TYPES } from "../../../bpk-component-button";
 import { cssModules } from "../../../bpk-react-utils";
 import STYLES from "./BpkComparisonTable.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -27,11 +26,7 @@ const BpkComparisonTableColumnHeader = ({
   bestTagLabel,
   headerContent,
   imageAlt = '',
-  imageSrc,
-  itemId,
-  onRemove,
-  removeA11yLabel,
-  removeLabel
+  imageSrc
 }) => /*#__PURE__*/_jsxs("div", {
   className: getClassName('bpk-comparison-table__header-content'),
   children: [/*#__PURE__*/_jsxs("div", {
@@ -52,15 +47,6 @@ const BpkComparisonTableColumnHeader = ({
   }), /*#__PURE__*/_jsx("div", {
     className: getClassName('bpk-comparison-table__header-id-section'),
     children: headerContent
-  }), /*#__PURE__*/_jsx("div", {
-    className: getClassName('bpk-comparison-table__remove-button'),
-    children: /*#__PURE__*/_jsx(BpkButton, {
-      type: BUTTON_TYPES.link,
-      size: SIZE_TYPES.small,
-      onClick: () => onRemove(itemId),
-      "aria-label": removeA11yLabel,
-      children: removeLabel
-    })
   })]
 });
 export default BpkComparisonTableColumnHeader;

package/bpk-component-comparison-table/src/BpkComparisonTable/BpkComparisonTableContent.js CHANGED Viewed

@@ -17,6 +17,7 @@
  */
 import { useEffect, useRef } from 'react';
+import BpkButton, { BUTTON_TYPES, SIZE_TYPES } from "../../../bpk-component-button";
 import { BpkTable, BpkTableBody, BpkTableCell, BpkTableRow, TABLE_BODY_TYPES } from "../../../bpk-component-table";
 import { cssModules } from "../../../bpk-react-utils";
 import BpkComparisonTableHeaderRow from "./BpkComparisonTableHeaderRow";
@@ -74,19 +75,34 @@ const BpkComparisonTableContent = ({
     children: /*#__PURE__*/_jsxs(BpkTable, {
       children: [/*#__PURE__*/_jsx(BpkComparisonTableHeaderRow, {
         displayColumns: displayColumns,
-        onRemove: onRemove,
         onAddMoreClick: onAddMoreClick,
         strings: strings
-      }), /*#__PURE__*/_jsx(BpkTableBody, {
+      }), /*#__PURE__*/_jsxs(BpkTableBody, {
         type: TABLE_BODY_TYPES.striped,
-        children: rowIds.map(rowId => /*#__PURE__*/_jsx(BpkTableRow, {
+        children: [columns.length > 0 && /*#__PURE__*/_jsx(BpkTableRow, {
+          children: displayColumns.map((column, index) => /*#__PURE__*/_jsx(BpkTableCell, {
+            // Zero padding needed for row collapse animation — no BpkTableCell prop.
+            // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+            className: getClassName('bpk-comparison-table__remove-cell'),
+            children: column && /*#__PURE__*/_jsx("div", {
+              className: getClassName('bpk-comparison-table__remove-cell-inner'),
+              children: /*#__PURE__*/_jsx(BpkButton, {
+                type: BUTTON_TYPES.link,
+                size: SIZE_TYPES.small,
+                onClick: () => onRemove(column.itemId),
+                "aria-label": column.removeA11yLabel,
+                children: strings.removeLabel
+              })
+            })
+          }, column ? `remove-${column.itemId}` : `remove-placeholder-${index}`))
+        }), rowIds.map(rowId => /*#__PURE__*/_jsx(BpkTableRow, {
           children: displayColumns.map((column, index) => /*#__PURE__*/_jsx(BpkTableCell, {
             // Placeholder need a distinct background colour not available via BpkTableCell props
             // eslint-disable-next-line @skyscanner/rules/forbid-component-props
             className: column ? undefined : getClassName('bpk-comparison-table__placeholder-cell'),
             children: column ? cellsByItemAndRow.get(column.itemId)?.get(rowId) ?? null : null
           }, column ? `${rowId}-${column.itemId}` : `${rowId}-placeholder-${index}`))
-        }, rowId))
+        }, rowId))]
       })]
     })
   });

package/bpk-component-comparison-table/src/BpkComparisonTable/BpkComparisonTableHeaderRow.d.ts CHANGED Viewed

@@ -1,9 +1,8 @@
 import type { BpkComparisonTableStrings, BpkCompareColumn } from './common-types';
 type BpkComparisonTableHeaderRowProps = {
     displayColumns: Array<BpkCompareColumn | null>;
-    onRemove: (itemId: string) => void;
     onAddMoreClick: () => void;
     strings: BpkComparisonTableStrings;
 };
-declare const BpkComparisonTableHeaderRow: ({ displayColumns, onAddMoreClick, onRemove, strings, }: BpkComparisonTableHeaderRowProps) => import("react/jsx-runtime").JSX.Element;
+declare const BpkComparisonTableHeaderRow: ({ displayColumns, onAddMoreClick, strings, }: BpkComparisonTableHeaderRowProps) => import("react/jsx-runtime").JSX.Element;
 export default BpkComparisonTableHeaderRow;

package/bpk-component-comparison-table/src/BpkComparisonTable/BpkComparisonTableHeaderRow.js CHANGED Viewed

@@ -23,22 +23,18 @@ import { jsx as _jsx } from "react/jsx-runtime";
 const BpkComparisonTableHeaderRow = ({
   displayColumns,
   onAddMoreClick,
-  onRemove,
   strings
 }) => {
   const {
     addMoreDescription,
     addMoreLinkText,
-    bestTagLabel,
-    removeLabel
+    bestTagLabel
   } = strings;
   return /*#__PURE__*/_jsx(BpkTableHead, {
     children: /*#__PURE__*/_jsx(BpkTableRow, {
       children: displayColumns.map((column, index) => /*#__PURE__*/_jsx(BpkTableHeadCell, {
         children: column ? /*#__PURE__*/_jsx(BpkComparisonTableColumnHeader, {
           ...column,
-          removeLabel: removeLabel,
-          onRemove: onRemove,
           bestTagLabel: bestTagLabel
         }) : /*#__PURE__*/_jsx(BpkComparisonTableColumnHeaderPlaceholder, {
           addMoreDescription: addMoreDescription,

package/bpk-component-comparison-table/src/BpkComparisonTable/BpkComparisonTableRoot.d.ts CHANGED Viewed

@@ -1,3 +1,3 @@
 import type { BpkComparisonTableRootProps } from './common-types';
-declare const BpkComparisonTableRoot: ({ children, isOpen, onClose }: BpkComparisonTableRootProps) => import("react/jsx-runtime").JSX.Element;
+declare const BpkComparisonTableRoot: ({ children, isOpen, onClose, onOpen }: BpkComparisonTableRootProps) => import("react/jsx-runtime").JSX.Element;
 export default BpkComparisonTableRoot;

package/bpk-component-comparison-table/src/BpkComparisonTable/BpkComparisonTableRoot.js CHANGED Viewed

@@ -16,23 +16,35 @@
  * limitations under the License.
  */
+import { useEffect, useRef } from 'react';
 import { BpkModalV3 } from "../../../bpk-component-modal";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const BpkComparisonTableRoot = ({
   children,
   isOpen,
-  onClose
-}) => /*#__PURE__*/_jsx(BpkModalV3.Root, {
-  open: isOpen,
-  onOpenChange: details => {
-    if (!details.open) {
-      onClose();
+  onClose,
+  onOpen
+}) => {
+  // Hold onOpen in a ref so inline callbacks (new identity each render) don't re-trigger the effect and double-fire while the modal stays open.
+  const onOpenRef = useRef(onOpen);
+  onOpenRef.current = onOpen;
+  useEffect(() => {
+    if (isOpen) {
+      onOpenRef.current?.();
     }
-  },
-  children: /*#__PURE__*/_jsxs(BpkModalV3.Portal, {
-    children: [/*#__PURE__*/_jsx(BpkModalV3.Scrim, {}), /*#__PURE__*/_jsx(BpkModalV3.Content, {
-      children: children
-    })]
-  })
-});
+  }, [isOpen]);
+  return /*#__PURE__*/_jsx(BpkModalV3.Root, {
+    open: isOpen,
+    onOpenChange: details => {
+      if (!details.open) {
+        onClose();
+      }
+    },
+    children: /*#__PURE__*/_jsxs(BpkModalV3.Portal, {
+      children: [/*#__PURE__*/_jsx(BpkModalV3.Scrim, {}), /*#__PURE__*/_jsx(BpkModalV3.Content, {
+        children: children
+      })]
+    })
+  });
+};
 export default BpkComparisonTableRoot;

package/bpk-component-comparison-table/src/BpkComparisonTable/common-types.d.ts CHANGED Viewed

@@ -44,6 +44,8 @@ export type BpkComparisonTableRootProps = {
     isOpen: boolean;
     /** Called when the modal close trigger is activated or Escape is pressed. */
     onClose: () => void;
+    /** Optional — called each time the modal opens: on mount if `isOpen` is `true`, and whenever `isOpen` transitions from `false` to `true`. Useful for analytics, logging, or fetching data on open. */
+    onOpen?: () => void;
     /** BpkComparisonTable.Header and BpkComparisonTable.Content. */
     children: ReactNode;
 };

package/bpk-component-comparison-table/src/BpkComparisonTray/BpkComparisonTray.module.css CHANGED Viewed

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-comparison-tray{width:22.1875rem;max-width:100%}@media(max-width: 32rem){.bpk-comparison-tray{width:auto;min-width:0;flex:1}}.bpk-comparison-tray__item{position:relative;width:3.875rem;min-width:0;flex-shrink:1;aspect-ratio:62/28}.bpk-comparison-tray__item-image-container{width:100%;height:100%;background-color:#eff3f8;overflow:hidden;border-radius:.25rem}.bpk-comparison-tray__item-image-container img{height:100%;object-fit:contain}.bpk-comparison-tray__item-close{position:relative;position:absolute;top:0;inset-inline-end:calc(-8*0.0625rem);display:flex;width:1rem;height:1rem;justify-content:center;align-items:center;transform:translateY(-50%);border:.125rem solid #fff;border-radius:50%;background-color:#161616;color:#fff;cursor:pointer;box-shadow:0px 4px 14px 0px rgba(37,32,31,.25)}.bpk-comparison-tray__item-close::before{position:absolute;top:calc(-2.75rem/2 + 50%);left:calc(-2.75rem/2 + 50%);content:"";width:2.75rem;height:2.75rem}.bpk-comparison-tray__item-close svg{width:.5rem;height:.5rem;flex-shrink:0;fill:#fff}.bpk-comparison-tray__item-close:focus-visible{outline:.125rem solid #0062e3;outline-offset:.125rem}.bpk-comparison-tray__item-placeholder{width:3.875rem;min-width:0;flex-shrink:1;border:.0625rem dashed #c1c7cf;aspect-ratio:62/28;border-radius:.25rem}
+.bpk-comparison-tray{width:22.1875rem;max-width:100%}@media(max-width: 32rem){.bpk-comparison-tray{width:auto;min-width:0;flex:1}}.bpk-comparison-tray button{min-height:0;padding-block:0}.bpk-comparison-tray__item{position:relative;width:3.875rem;min-width:0;flex-shrink:1;aspect-ratio:62/28}.bpk-comparison-tray__item-image-container{width:100%;height:100%;background-color:#eff3f8;overflow:hidden;border-radius:.25rem}.bpk-comparison-tray__item-image-container img{height:100%;object-fit:contain}.bpk-comparison-tray__item-close{position:relative;position:absolute;top:0;inset-inline-end:calc(-8*0.0625rem);display:flex;width:1rem;height:1rem;justify-content:center;align-items:center;transform:translateY(-50%);border:.125rem solid #fff;border-radius:50%;background-color:#161616;color:#fff;cursor:pointer;box-shadow:0px 4px 14px 0px rgba(37,32,31,.25)}.bpk-comparison-tray__item-close::before{position:absolute;top:calc(-2.75rem/2 + 50%);left:calc(-2.75rem/2 + 50%);content:"";width:2.75rem;height:2.75rem}.bpk-comparison-tray__item-close svg{width:.5rem;height:.5rem;flex-shrink:0;fill:#fff}.bpk-comparison-tray__item-close:focus-visible{outline:.125rem solid #0062e3;outline-offset:.125rem}.bpk-comparison-tray__item-placeholder{width:3.875rem;min-width:0;flex-shrink:1;border:.0625rem dashed #c1c7cf;aspect-ratio:62/28;border-radius:.25rem}

package/bpk-component-page-indicator/src/BpkPageIndicator.d.ts CHANGED Viewed

@@ -1,11 +1,9 @@
 import type { MouseEvent } from 'react';
 import { DIRECTIONS } from './NavButton';
-export declare const VARIANT: {
-    readonly default: "default";
-    readonly overImage: "overImage";
-    readonly overImageSpaced: "overImageSpaced";
-};
-type Variant = (typeof VARIANT)[keyof typeof VARIANT];
+import { VARIANT } from './common-types';
+import type { Variant } from './common-types';
+export { VARIANT };
+export type { Variant };
 type Direction = (typeof DIRECTIONS)[keyof typeof DIRECTIONS];
 export type Props = {
     indicatorLabel?: string;

package/bpk-component-page-indicator/src/BpkPageIndicator.js CHANGED Viewed

@@ -19,16 +19,13 @@
 import { BUTTON_TYPES } from "../../bpk-component-button";
 import { cssModules, getDataComponentAttribute } from "../../bpk-react-utils";
 import NavButton, { DIRECTIONS } from "./NavButton";
+import { VARIANT } from "./common-types";
 import STYLES from "./BpkPageIndicator.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const DISPLAYED_TOTAL = 5;
 const START_SCROLL_INDEX = Math.floor(DISPLAYED_TOTAL / 2);
-export const VARIANT = {
-  default: 'default',
-  overImage: 'overImage',
-  overImageSpaced: 'overImageSpaced'
-};
+export { VARIANT };
 const BpkPageIndicator = ({
   className = undefined,
   currentIndex,
@@ -50,7 +47,7 @@ const BpkPageIndicator = ({
     '--scroll-index': totalIndicators > DISPLAYED_TOTAL ? Math.min(currentIndex - START_SCROLL_INDEX, totalIndicators - DISPLAYED_TOTAL) : 0
   };
   return /*#__PURE__*/_jsx("div", {
-    className: variant === VARIANT.overImageSpaced ? getClassName('bpk-page-indicator-fullWidth__container') : className,
+    className: variant === VARIANT.overImageSpaced || variant === VARIANT.carousel ? getClassName('bpk-page-indicator-fullWidth__container') : className,
     "aria-hidden": isInteractive ? 'false' : 'true',
     "data-testid": "indicator-container",
     children: /*#__PURE__*/_jsxs("div", {
@@ -59,10 +56,11 @@ const BpkPageIndicator = ({
       children: [showNav && /*#__PURE__*/_jsx(NavButton, {
         currentIndex: currentIndex,
         onClick: onClick,
-        disabled: variant === VARIANT.overImageSpaced ? totalIndicators <= 1 : currentIndex === 0 || totalIndicators <= 1,
+        disabled: variant === VARIANT.overImageSpaced || variant === VARIANT.carousel ? totalIndicators <= 1 : currentIndex === 0 || totalIndicators <= 1,
         direction: DIRECTIONS.PREV,
         ariaLabel: prevNavLabel,
-        type: variant === VARIANT.overImageSpaced ? BUTTON_TYPES.secondaryOnDark : BUTTON_TYPES.link
+        variant: variant,
+        type: variant === VARIANT.overImageSpaced || variant === VARIANT.carousel ? BUTTON_TYPES.secondaryOnDark : BUTTON_TYPES.link
       }), /*#__PURE__*/_jsx("div", {
         className: getClassName('bpk-page-indicator__container'),
         children: /*#__PURE__*/_jsx("div", {
@@ -85,10 +83,11 @@ const BpkPageIndicator = ({
       }), showNav && /*#__PURE__*/_jsx(NavButton, {
         currentIndex: currentIndex,
         onClick: onClick,
-        disabled: variant === VARIANT.overImageSpaced ? totalIndicators <= 1 : currentIndex === totalIndicators - 1 || totalIndicators <= 1,
+        disabled: variant === VARIANT.overImageSpaced || variant === VARIANT.carousel ? totalIndicators <= 1 : currentIndex === totalIndicators - 1 || totalIndicators <= 1,
         ariaLabel: nextNavLabel,
         direction: DIRECTIONS.NEXT,
-        type: variant === VARIANT.overImageSpaced ? BUTTON_TYPES.secondaryOnDark : BUTTON_TYPES.link
+        variant: variant,
+        type: variant === VARIANT.overImageSpaced || variant === VARIANT.carousel ? BUTTON_TYPES.secondaryOnDark : BUTTON_TYPES.link
       })]
     })
   });

package/bpk-component-page-indicator/src/BpkPageIndicator.module.css CHANGED Viewed

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-page-indicator-fullWidth__container{width:100%}.bpk-page-indicator{display:flex;width:100%;justify-content:center;align-items:center}.bpk-page-indicator__showNav{justify-content:space-between}.bpk-page-indicator__container{max-width:5rem;min-height:.5rem;overflow:hidden}.bpk-page-indicator__indicators-container{--direction: -1;transform:translateX(calc(var(--direction) * var(--scroll-index, 0) * 1rem));transition:transform 200ms ease-in-out;white-space:nowrap}html[dir=rtl] .bpk-page-indicator__indicators-container{--direction: 1}.bpk-page-indicator__indicator{display:inline-block;width:.5rem;height:.5rem;padding:0;border:none;border-radius:50%;margin-inline:.25rem}.bpk-page-indicator__indicator:hover{cursor:pointer}.bpk-page-indicator__indicator--default{background-color:#c1c7cf}.bpk-page-indicator__indicator--overImage,.bpk-page-indicator__indicator--overImageSpaced{background-color:hsla(0,0%,100%,.5)}.bpk-page-indicator__indicator--active-default{background-color:#626971;pointer-events:none}.bpk-page-indicator__indicator--active-overImage,.bpk-page-indicator__indicator--active-overImageSpaced{background-color:#fff;pointer-events:none}
+.bpk-page-indicator-fullWidth__container{width:100%}.bpk-page-indicator{display:flex;width:100%;justify-content:center;align-items:center}.bpk-page-indicator__showNav{justify-content:space-between}.bpk-page-indicator__container{max-width:5rem;min-height:.5rem;overflow:hidden}.bpk-page-indicator__indicators-container{--direction: -1;transform:translateX(calc(var(--direction) * var(--scroll-index, 0) * 1rem));transition:transform 200ms ease-in-out;white-space:nowrap}html[dir=rtl] .bpk-page-indicator__indicators-container{--direction: 1}.bpk-page-indicator__indicator{display:inline-block;width:.5rem;height:.5rem;padding:0;border:none;border-radius:50%;margin-inline:.25rem}.bpk-page-indicator__indicator:hover{cursor:pointer}.bpk-page-indicator__indicator--default{background-color:#c1c7cf}.bpk-page-indicator__indicator--overImage,.bpk-page-indicator__indicator--overImageSpaced,.bpk-page-indicator__indicator--carousel{background-color:hsla(0,0%,100%,.5)}.bpk-page-indicator__indicator--active-default{background-color:#626971;pointer-events:none}.bpk-page-indicator__indicator--active-overImage,.bpk-page-indicator__indicator--active-overImageSpaced,.bpk-page-indicator__indicator--active-carousel{background-color:#fff;pointer-events:none}.bpk-page-indicator__nav-carousel{--bpk-button-border-radius: 50%;--bpk-button-secondary-on-dark-background-color: rgba(255, 255, 255, 0.5);--bpk-button-secondary-on-dark-hover-background-color: rgba(255, 255, 255, 0.8);--bpk-button-secondary-on-dark-active-background-color: rgba(255, 255, 255, 0.8);--bpk-button-secondary-on-dark-text-color: rgb(22, 22, 22);--bpk-button-secondary-on-dark-hover-text-color: rgb(22, 22, 22);--bpk-button-secondary-on-dark-active-text-color: rgb(22, 22, 22)}.bpk-page-indicator__nav-carousel-button{display:inline-flex;width:2rem;height:2rem;min-height:2rem;padding:0;justify-content:center;align-items:center}

package/bpk-component-page-indicator/src/NavButton.d.ts CHANGED Viewed

@@ -1,5 +1,6 @@
 import type { MouseEvent } from 'react';
 import { BUTTON_TYPES } from '../../bpk-component-button';
+import type { Variant } from './common-types';
 export declare const DIRECTIONS: {
     readonly PREV: "PREV";
     readonly INDICATORS: "INDICATORS";
@@ -14,6 +15,7 @@ type Props = {
     disabled?: boolean;
     onClick?: (event: MouseEvent<HTMLButtonElement>, newIndex: number, direction: Direction) => void;
     type?: ButtonType;
+    variant?: Variant;
 };
-declare const NavButton: ({ ariaLabel, currentIndex, direction, disabled, onClick, type, }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const NavButton: ({ ariaLabel, currentIndex, direction, disabled, onClick, type, variant, }: Props) => import("react/jsx-runtime").JSX.Element;
 export default NavButton;

package/bpk-component-page-indicator/src/NavButton.js CHANGED Viewed

@@ -17,36 +17,58 @@
  */
 import BpkButton, { BUTTON_TYPES } from "../../bpk-component-button";
-import { withLargeButtonAlignment, withRtlSupport } from "../../bpk-component-icon";
-import LeftArrowIcon from "../../bpk-component-icon/lg/chevron-left";
-import RightArrowIcon from "../../bpk-component-icon/lg/chevron-right";
+import { withButtonAlignment, withRtlSupport } from "../../bpk-component-icon";
+import SmallLeftArrowIcon from "../../bpk-component-icon/sm/chevron-left";
+import SmallRightArrowIcon from "../../bpk-component-icon/sm/chevron-right";
+import { cssModules } from "../../bpk-react-utils";
+import { VARIANT } from "./common-types";
+import STYLES from "./BpkPageIndicator.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
+const getClassName = cssModules(STYLES);
 export const DIRECTIONS = {
   PREV: 'PREV',
   INDICATORS: 'INDICATORS',
   NEXT: 'NEXT'
 };
-const AlignedLeftArrowIcon = withLargeButtonAlignment(withRtlSupport(LeftArrowIcon));
-const AlignedRightArrowIcon = withLargeButtonAlignment(withRtlSupport(RightArrowIcon));
+const AlignedLeftArrowIcon = withButtonAlignment(withRtlSupport(SmallLeftArrowIcon));
+const AlignedRightArrowIcon = withButtonAlignment(withRtlSupport(SmallRightArrowIcon));
+const RtlSmallLeftArrowIcon = withRtlSupport(SmallLeftArrowIcon);
+const RtlSmallRightArrowIcon = withRtlSupport(SmallRightArrowIcon);
 const NavButton = ({
   ariaLabel,
   currentIndex,
   direction,
   disabled = false,
   onClick = () => {},
-  type = BUTTON_TYPES.link
-}) => /*#__PURE__*/_jsx(BpkButton, {
-  iconOnly: true,
-  type: type,
-  onClick: e => {
-    if (direction === DIRECTIONS.PREV) {
-      onClick(e, currentIndex - 1, direction);
-    } else {
-      onClick(e, currentIndex + 1, direction);
-    }
-  },
-  "aria-label": ariaLabel,
-  disabled: disabled,
-  children: direction === DIRECTIONS.PREV ? /*#__PURE__*/_jsx(AlignedLeftArrowIcon, {}) : /*#__PURE__*/_jsx(AlignedRightArrowIcon, {})
-});
+  type = BUTTON_TYPES.link,
+  variant
+}) => {
+  const isCarousel = variant === VARIANT.carousel;
+  const PrevIcon = isCarousel ? RtlSmallLeftArrowIcon : AlignedLeftArrowIcon;
+  const NextIcon = isCarousel ? RtlSmallRightArrowIcon : AlignedRightArrowIcon;
+  const button = /*#__PURE__*/_jsx(BpkButton, {
+    iconOnly: true,
+    type: type
+    // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+    ,
+    className: isCarousel ? getClassName('bpk-page-indicator__nav-carousel-button') : undefined,
+    onClick: e => {
+      if (direction === DIRECTIONS.PREV) {
+        onClick(e, currentIndex - 1, direction);
+      } else {
+        onClick(e, currentIndex + 1, direction);
+      }
+    },
+    "aria-label": ariaLabel,
+    disabled: disabled,
+    children: direction === DIRECTIONS.PREV ? /*#__PURE__*/_jsx(PrevIcon, {}) : /*#__PURE__*/_jsx(NextIcon, {})
+  });
+  if (isCarousel) {
+    return /*#__PURE__*/_jsx("span", {
+      className: getClassName('bpk-page-indicator__nav-carousel'),
+      children: button
+    });
+  }
+  return button;
+};
 export default NavButton;

package/bpk-component-page-indicator/src/common-types.d.ts ADDED Viewed

@@ -0,0 +1,7 @@
+export declare const VARIANT: {
+    readonly default: "default";
+    readonly overImage: "overImage";
+    readonly overImageSpaced: "overImageSpaced";
+    readonly carousel: "carousel";
+};
+export type Variant = (typeof VARIANT)[keyof typeof VARIANT];

package/bpk-component-page-indicator/src/common-types.js ADDED Viewed

@@ -0,0 +1,24 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export const VARIANT = {
+  default: 'default',
+  overImage: 'overImage',
+  overImageSpaced: 'overImageSpaced',
+  carousel: 'carousel'
+};

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/backpack-web",
-  "version": "42.14.0",
+  "version": "42.16.0",
   "description": "Backpack Design System web library",
   "repository": {
     "type": "git",
@@ -28,7 +28,7 @@
     "@radix-ui/react-compose-refs": "^1.1.1",
     "@radix-ui/react-slider": "1.3.5",
     "@react-google-maps/api": "^2.19.3",
-    "@skyscanner/bpk-foundations-web": "^24.4.1",
+    "@skyscanner/bpk-foundations-web": "^24.5.0",
     "@skyscanner/bpk-svgs": "^20.11.0",
     "tabbable": "^6.4.0",
     "d3-path": "^3.1.0",