@skyscanner/backpack-web 42.13.3 → 42.15.0

package/bpk-component-ai-blurb/src/BpkAiBlurbSummary.js

@@ -41,8 +41,9 @@ const BpkAiBlurbSummary = props => {
         textStyle: TEXT_STYLES.caption,
         children: props.errorText
       }), /*#__PURE__*/_jsx(BpkLink, {
-        href: props.errorLinkHref,
-        children: props.errorLinkText
+        as: "button",
+        onClick: props.onErrorClick,
+        children: props.errorActionText
       })]
     });
   }

package/bpk-component-ai-blurb/src/common-types.d.ts

@@ -20,12 +20,12 @@ export type BpkAiBlurbSummaryProps = {
 } | {
     /** Controls which content is displayed. */
     state: 'error';
-    /** Text displayed before the error link. */
+    /** Text displayed before the error action. */
     errorText: string;
-    /** Text for the inline error link. */
-    errorLinkText: string;
-    /** href for the inline error link. */
-    errorLinkHref: string;
+    /** Text for the inline error action. */
+    errorActionText: string;
+    /** Called when the inline error action is clicked (e.g. to retry). */
+    onErrorClick: () => void;
 };
 export type BpkAiBlurbFeedbackProps = {
     /** Text displayed before a vote is cast. e.g. "Was this helpful?" — not translated by Backpack. */

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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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/BpkComparisonTableColumnHeaderPlaceholder.js

@@ -19,10 +19,7 @@
 import BpkButton, { BUTTON_TYPES, SIZE_TYPES } from "../../../bpk-component-button";
 import { BpkFlex, BpkSpacing } from "../../../bpk-component-layout";
 import BpkText, { TEXT_COLORS, TEXT_STYLES } from "../../../bpk-component-text";
-import { cssModules } from "../../../bpk-react-utils";
-import STYLES from "./BpkComparisonTable.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const getClassName = cssModules(STYLES);
 const BpkComparisonTableColumnHeaderPlaceholder = ({
   addMoreDescription,
   addMoreLinkText,

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

@@ -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;height:1.75rem;flex-shrink:0}.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{object-fit:cover}.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;height:1.75rem;flex-shrink:0;border:.0625rem dashed #c1c7cf;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__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-comparison-table/src/BpkComparisonTray/BpkComparisonTrayItem.d.ts

@@ -1,3 +1,3 @@
 import type { BpkComparisonTrayItemProps } from './common-types';
-declare function BpkComparisonTrayItem({ item, onRemove, removeLabel }: BpkComparisonTrayItemProps): import("react/jsx-runtime").JSX.Element;
+declare const BpkComparisonTrayItem: ({ item, onRemove, removeLabel }: BpkComparisonTrayItemProps) => import("react/jsx-runtime").JSX.Element;
 export default BpkComparisonTrayItem;

package/bpk-component-comparison-table/src/BpkComparisonTray/BpkComparisonTrayItem.js

@@ -22,27 +22,25 @@ import { cssModules } from "../../../bpk-react-utils";
 import STYLES from "./BpkComparisonTray.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
-function BpkComparisonTrayItem({
+const BpkComparisonTrayItem = ({
   item,
   onRemove,
   removeLabel
-}) {
-  return /*#__PURE__*/_jsxs("div", {
-    className: getClassName('bpk-comparison-tray__item'),
-    children: [/*#__PURE__*/_jsx("div", {
-      className: getClassName('bpk-comparison-tray__item-image-container'),
-      children: /*#__PURE__*/_jsx(BpkImage, {
-        src: item.image,
-        altText: item.imageAlt ?? item.label,
-        aspectRatio: 62 / 28
-      })
-    }), /*#__PURE__*/_jsx("button", {
-      type: "button",
-      className: getClassName('bpk-comparison-tray__item-close'),
-      "aria-label": removeLabel,
-      onClick: () => onRemove(item.id),
-      children: /*#__PURE__*/_jsx(CloseIcon, {})
-    })]
-  });
-}
+}) => /*#__PURE__*/_jsxs("div", {
+  className: getClassName('bpk-comparison-tray__item'),
+  children: [/*#__PURE__*/_jsx("div", {
+    className: getClassName('bpk-comparison-tray__item-image-container'),
+    children: /*#__PURE__*/_jsx(BpkImage, {
+      src: item.image,
+      altText: item.imageAlt ?? item.label,
+      aspectRatio: 62 / 28
+    })
+  }), /*#__PURE__*/_jsx("button", {
+    type: "button",
+    className: getClassName('bpk-comparison-tray__item-close'),
+    "aria-label": removeLabel,
+    onClick: () => onRemove(item.id),
+    children: /*#__PURE__*/_jsx(CloseIcon, {})
+  })]
+});
 export default BpkComparisonTrayItem;

package/bpk-component-comparison-table/src/BpkComparisonTray/BpkComparisonTrayItemPlaceholder.d.ts

@@ -1,2 +1,2 @@
-declare function BpkComparisonTrayItemPlaceholder(): import("react/jsx-runtime").JSX.Element;
+declare const BpkComparisonTrayItemPlaceholder: () => import("react/jsx-runtime").JSX.Element;
 export default BpkComparisonTrayItemPlaceholder;

package/bpk-component-comparison-table/src/BpkComparisonTray/BpkComparisonTrayItemPlaceholder.js

@@ -20,10 +20,8 @@ import { cssModules } from "../../../bpk-react-utils";
 import STYLES from "./BpkComparisonTray.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
-function BpkComparisonTrayItemPlaceholder() {
-  return /*#__PURE__*/_jsx("div", {
-    className: getClassName('bpk-comparison-tray__item-placeholder'),
-    "aria-hidden": "true"
-  });
-}
+const BpkComparisonTrayItemPlaceholder = () => /*#__PURE__*/_jsx("div", {
+  className: getClassName('bpk-comparison-tray__item-placeholder'),
+  "aria-hidden": "true"
+});
 export default BpkComparisonTrayItemPlaceholder;

package/bpk-component-comparison-table/src/BpkComparisonTray/BpkComparisonTrayRoot.d.ts

@@ -1,3 +1,3 @@
 import type { BpkComparisonTrayRootProps } from './common-types';
-declare function BpkComparisonTrayRoot({ ariaLabel, compareLabel, items, onCompare, onRemove, removeLabel, }: BpkComparisonTrayRootProps): import("react/jsx-runtime").JSX.Element;
+declare const BpkComparisonTrayRoot: ({ ariaLabel, compareLabel, items, onCompare, onRemove, removeLabel, }: BpkComparisonTrayRootProps) => import("react/jsx-runtime").JSX.Element;
 export default BpkComparisonTrayRoot;

package/bpk-component-comparison-table/src/BpkComparisonTray/BpkComparisonTrayRoot.js

@@ -26,14 +26,14 @@ import STYLES from "./BpkComparisonTray.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const MAX_ITEMS = 3;
-function BpkComparisonTrayRoot({
+const BpkComparisonTrayRoot = ({
   ariaLabel,
   compareLabel,
   items,
   onCompare,
   onRemove,
   removeLabel
-}) {
+}) => {
   const displayItems = Array.from({
     length: MAX_ITEMS
   }, (_value, index) => items[index] ?? null);
@@ -45,7 +45,7 @@ function BpkComparisonTrayRoot({
       role: "region",
       "aria-label": ariaLabel,
       children: /*#__PURE__*/_jsxs(BpkCardV2.Body, {
-        templateColumns: "1fr auto",
+        templateColumns: "minmax(0, 1fr) auto",
         align: "center",
         gap: BpkSpacing.Base,
         children: [/*#__PURE__*/_jsx(BpkCardV2.Section, {
@@ -71,5 +71,5 @@ function BpkComparisonTrayRoot({
       })
     })
   });
-}
+};
 export default BpkComparisonTrayRoot;

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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/backpack-web",
-  "version": "42.13.3",
+  "version": "42.15.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",