@skyscanner/backpack-web 42.1.0 → 42.3.0

package/bpk-component-checkbox/src/BpkCheckboxV2/{BpkCheckboxLabel.js → BpkCheckboxV2Label.js}

@@ -18,13 +18,13 @@
 
 import { Checkbox } from '@ark-ui/react';
 import { cssModules } from "../../../bpk-react-utils";
-import STYLES from "./BpkCheckbox.module.css";
+import STYLES from "./BpkCheckboxV2.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
-const BpkCheckboxLabel = ({
+const BpkCheckboxV2Label = ({
   children
 }) => /*#__PURE__*/_jsx(Checkbox.Label, {
   className: getClassName('bpk-checkbox-v2__label'),
   children: children
 });
-export default BpkCheckboxLabel;
+export default BpkCheckboxV2Label;

package/bpk-component-checkbox/src/BpkCheckboxV2/BpkCheckboxV2Root.d.ts

@@ -0,0 +1,16 @@
+import type { ReactNode } from 'react';
+export type BpkCheckboxV2CheckedState = boolean | 'indeterminate';
+export type BpkCheckboxV2RootProps = {
+    children: ReactNode;
+    checked?: BpkCheckboxV2CheckedState;
+    defaultChecked?: BpkCheckboxV2CheckedState;
+    disabled?: boolean;
+    id?: string;
+    invalid?: boolean;
+    name?: string;
+    onCheckedChange?: (checked: BpkCheckboxV2CheckedState) => void;
+    required?: boolean;
+    value?: string;
+};
+declare const BpkCheckboxV2Root: ({ checked, children, defaultChecked, disabled, id, invalid, name, onCheckedChange, required, value, }: BpkCheckboxV2RootProps) => import("react/jsx-runtime").JSX.Element;
+export default BpkCheckboxV2Root;

package/bpk-component-checkbox/src/BpkCheckboxV2/{BpkCheckboxRoot.js → BpkCheckboxV2Root.js}

@@ -18,10 +18,10 @@
 
 import { Checkbox } from '@ark-ui/react';
 import { cssModules, getDataComponentAttribute } from "../../../bpk-react-utils";
-import STYLES from "./BpkCheckbox.module.css";
+import STYLES from "./BpkCheckboxV2.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
-const BpkCheckboxRoot = ({
+const BpkCheckboxV2Root = ({
   checked,
   children,
   defaultChecked,
@@ -46,4 +46,4 @@ const BpkCheckboxRoot = ({
   ...getDataComponentAttribute('CheckboxV2'),
   children: children
 });
-export default BpkCheckboxRoot;
+export default BpkCheckboxV2Root;

package/bpk-component-checkbox-card/src/BpkCheckboxCard.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-checkbox-card-root{position:relative;display:block;min-width:2.75rem;height:100%;min-height:2.75rem;transition:background-color 200ms ease-in-out,border-color 200ms ease-in-out,color 200ms ease-in-out;border:1px solid var(--bpk-checkbox-card-default-border-color, rgb(193, 199, 207));background-color:var(--bpk-checkbox-card-default-background-color, rgb(255, 255, 255));color:var(--bpk-checkbox-card-default-text-color, rgb(22, 22, 22));cursor:pointer;box-sizing:border-box}.bpk-checkbox-card-root:has(:focus-visible){outline:.125rem solid #0062e3;outline-offset:.125rem}.bpk-no-touch-support .bpk-checkbox-card-root:not([data-state=checked]):not([data-disabled]):hover:not(:active):not(:disabled),.bpk-no-touch-support .bpk-checkbox-card-root:not([data-state=checked])[data-loading]:hover:not(:active):not(:disabled){border-color:var(--bpk-checkbox-card-hover-border-color, rgb(193, 199, 207));background-color:var(--bpk-checkbox-card-hover-background-color, rgb(245, 247, 250))}:global(.bpk-no-touch-support) .bpk-checkbox-card-root:not([data-state=checked]):not([data-disabled]):hover:not(:active):not(:disabled),:global(.bpk-no-touch-support) .bpk-checkbox-card-root:not([data-state=checked])[data-loading]:hover:not(:active):not(:disabled){border-color:var(--bpk-checkbox-card-hover-border-color, rgb(193, 199, 207));background-color:var(--bpk-checkbox-card-hover-background-color, rgb(245, 247, 250))}.bpk-checkbox-card-root[data-state=checked]{border-color:var(--bpk-checkbox-card-checked-border-color, transparent);background-color:var(--bpk-checkbox-card-checked-background-color, rgb(5, 32, 60));color:var(--bpk-checkbox-card-checked-text-color, rgb(255, 255, 255))}.bpk-checkbox-card-root[data-disabled]:not([data-loading]){border-color:var(--bpk-checkbox-card-disabled-border-color, rgb(193, 199, 207));background-color:var(--bpk-checkbox-card-disabled-background-color, rgb(239, 243, 248));color:var(--bpk-checkbox-card-disabled-text-color, rgba(0, 0, 0, 0.2));cursor:not-allowed}.bpk-checkbox-card-root[data-loading]{cursor:not-allowed}.bpk-checkbox-card-root--radius-square{border-radius:0}.bpk-checkbox-card-root--radius-rounded{border-radius:.75rem}.bpk-checkbox-card-root--on-canvas-default{--bpk-checkbox-card-default-background-color: rgb(255, 255, 255);--bpk-checkbox-card-default-border-color: rgb(193, 199, 207)}.bpk-checkbox-card-root--cars{--bpk-checkbox-card-default-background-color: rgb(255, 255, 255);--bpk-checkbox-card-default-border-color: rgb(193, 199, 207);--bpk-checkbox-card-disabled-border-color: transparent;--bpk-checkbox-card-hover-background-color: rgb(255, 255, 255);--bpk-checkbox-card-hover-border-color: rgb(5, 32, 60);--bpk-checkbox-card-checked-background-color: rgb(255, 255, 255);--bpk-checkbox-card-checked-text-color: rgb(22, 22, 22);--bpk-checkbox-card-checked-border-color: rgb(5, 32, 60);--bpk-checkbox-card-indicator-background-color: rgb(5, 32, 60)}.bpk-checkbox-card-root--cars.bpk-checkbox-card-root--cars--radius-rounded{border-radius:1.5rem}.bpk-checkbox-card-root--cars[data-state=checked]{box-shadow:0 0 0 1px #05203c}.bpk-checkbox-card-root--on-canvas-contrast{--bpk-checkbox-card-default-background-color: rgb(255, 255, 255);--bpk-checkbox-card-hover-background-color: rgb(255, 255, 255);--bpk-checkbox-card-default-border-color: transparent;--bpk-checkbox-card-hover-border-color: rgb(193, 199, 207);--bpk-checkbox-card-disabled-background-color: rgb(239, 243, 248)}.bpk-checkbox-card-root--on-surface-contrast{--bpk-checkbox-card-default-background-color: rgba(255, 255, 255, 0.1);--bpk-checkbox-card-default-text-color: rgb(255, 255, 255);--bpk-checkbox-card-secondary-text-color: rgb(255, 255, 255);--bpk-checkbox-card-hover-background-color: rgb(5, 32, 60);--bpk-checkbox-card-checked-background-color: rgb(0, 98, 227);--bpk-checkbox-card-default-border-color: transparent;--bpk-checkbox-card-hover-border-color: transparent;--bpk-checkbox-card-disabled-border-color: transparent}.bpk-checkbox-card-content{width:100%;padding:.5rem}.bpk-checkbox-card-label{display:-webkit-box;width:100%;color:inherit;text-align:center;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:var(--bpk-label-line-clamp, 2);line-clamp:var(--bpk-label-line-clamp, 2)}.bpk-checkbox-card-label>*{text-align:inherit}.bpk-checkbox-card-description{display:-webkit-box;width:100%;color:var(--bpk-checkbox-card-secondary-text-color, rgb(98, 105, 113));text-align:center;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:var(--bpk-description-line-clamp, 3);line-clamp:var(--bpk-description-line-clamp, 3);margin:0}.bpk-checkbox-card-root[data-state=checked] .bpk-checkbox-card-description{color:inherit}.bpk-checkbox-card-root--cars[data-state=checked] .bpk-checkbox-card-description{color:var(--bpk-checkbox-card-secondary-text-color, rgb(98, 105, 113))}.bpk-checkbox-card-description>*{text-align:inherit}.bpk-checkbox-card-price{display:flex;align-items:center;gap:.25rem}.bpk-checkbox-card-indicator{position:absolute;top:.5rem;right:.5rem;display:none;z-index:1;width:1.25rem;height:1.25rem;pointer-events:none}.bpk-checkbox-card-indicator svg{width:100%;height:100%;fill:var(--bpk-checkbox-card-indicator-background-color, rgb(0, 98, 227))}.bpk-checkbox-card-root[data-state=checked] .bpk-checkbox-card-indicator{display:block}.bpk-checkbox-card-root--cars .bpk-checkbox-card-indicator{width:1rem;height:1rem}
+.bpk-checkbox-card-root{position:relative;display:block;min-width:2.75rem;height:100%;min-height:2.75rem;transition:background-color 200ms ease-in-out,border-color 200ms ease-in-out,color 200ms ease-in-out;border:1px solid var(--bpk-checkbox-card-default-border-color, rgb(193, 199, 207));background-color:var(--bpk-checkbox-card-default-background-color, rgb(255, 255, 255));color:var(--bpk-checkbox-card-default-text-color, rgb(22, 22, 22));cursor:pointer;box-sizing:border-box}.bpk-checkbox-card-root:has(:focus-visible){outline:.125rem solid #0062e3;outline-offset:.125rem}.bpk-no-touch-support .bpk-checkbox-card-root:not([data-state=checked]):not([data-disabled]):hover:not(:active):not(:disabled),.bpk-no-touch-support .bpk-checkbox-card-root:not([data-state=checked])[data-loading]:hover:not(:active):not(:disabled){border-color:var(--bpk-checkbox-card-hover-border-color, rgb(193, 199, 207));background-color:var(--bpk-checkbox-card-hover-background-color, rgb(245, 247, 250))}:global(.bpk-no-touch-support) .bpk-checkbox-card-root:not([data-state=checked]):not([data-disabled]):hover:not(:active):not(:disabled),:global(.bpk-no-touch-support) .bpk-checkbox-card-root:not([data-state=checked])[data-loading]:hover:not(:active):not(:disabled){border-color:var(--bpk-checkbox-card-hover-border-color, rgb(193, 199, 207));background-color:var(--bpk-checkbox-card-hover-background-color, rgb(245, 247, 250))}.bpk-checkbox-card-root[data-state=checked]{border-color:var(--bpk-checkbox-card-checked-border-color, transparent);background-color:var(--bpk-checkbox-card-checked-background-color, rgb(5, 32, 60));color:var(--bpk-checkbox-card-checked-text-color, rgb(255, 255, 255))}.bpk-checkbox-card-root[data-disabled]:not([data-loading]){border-color:var(--bpk-checkbox-card-disabled-border-color, rgb(193, 199, 207));background-color:var(--bpk-checkbox-card-disabled-background-color, rgb(239, 243, 248));color:var(--bpk-checkbox-card-disabled-text-color, rgba(0, 0, 0, 0.2));cursor:not-allowed}.bpk-checkbox-card-root[data-loading]{cursor:not-allowed}.bpk-checkbox-card-root--radius-square{border-radius:0}.bpk-checkbox-card-root--radius-rounded{border-radius:.75rem}.bpk-checkbox-card-root--on-canvas-default{--bpk-checkbox-card-default-background-color: rgb(255, 255, 255);--bpk-checkbox-card-default-border-color: rgb(193, 199, 207)}.bpk-checkbox-card-root--cars{--bpk-checkbox-card-default-background-color: rgb(255, 255, 255);--bpk-checkbox-card-default-border-color: rgb(193, 199, 207);--bpk-checkbox-card-disabled-border-color: transparent;--bpk-checkbox-card-hover-background-color: rgb(255, 255, 255);--bpk-checkbox-card-hover-border-color: rgb(5, 32, 60);--bpk-checkbox-card-checked-background-color: rgb(255, 255, 255);--bpk-checkbox-card-checked-text-color: rgb(22, 22, 22);--bpk-checkbox-card-checked-border-color: rgb(5, 32, 60);--bpk-checkbox-card-indicator-background-color: rgb(5, 32, 60)}.bpk-checkbox-card-root--cars.bpk-checkbox-card-root--cars--radius-rounded{border-radius:1.5rem}.bpk-checkbox-card-root--cars[data-state=checked]{box-shadow:0 0 0 1px #05203c}.bpk-checkbox-card-root--on-canvas-contrast{--bpk-checkbox-card-default-background-color: rgb(255, 255, 255);--bpk-checkbox-card-hover-background-color: rgb(255, 255, 255);--bpk-checkbox-card-default-border-color: transparent;--bpk-checkbox-card-hover-border-color: rgb(193, 199, 207);--bpk-checkbox-card-disabled-background-color: rgb(239, 243, 248)}.bpk-checkbox-card-root--on-surface-contrast{--bpk-checkbox-card-default-background-color: rgba(255, 255, 255, 0.1);--bpk-checkbox-card-default-text-color: rgb(255, 255, 255);--bpk-checkbox-card-secondary-text-color: rgb(255, 255, 255);--bpk-checkbox-card-hover-background-color: rgb(5, 32, 60);--bpk-checkbox-card-checked-background-color: rgb(0, 98, 227);--bpk-checkbox-card-default-border-color: transparent;--bpk-checkbox-card-hover-border-color: transparent;--bpk-checkbox-card-disabled-border-color: transparent}.bpk-checkbox-card-content{width:100%;padding:.5rem}.bpk-checkbox-card-label{display:-webkit-box;width:100%;color:inherit;text-align:center;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:var(--bpk-label-line-clamp, 2);line-clamp:var(--bpk-label-line-clamp, 2)}.bpk-checkbox-card-label>*{text-align:inherit}.bpk-checkbox-card-description{display:-webkit-box;width:100%;color:var(--bpk-checkbox-card-secondary-text-color, rgb(98, 105, 113));text-align:center;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:var(--bpk-description-line-clamp, 3);line-clamp:var(--bpk-description-line-clamp, 3);margin:0}.bpk-checkbox-card-root[data-state=checked] .bpk-checkbox-card-description{color:inherit}.bpk-checkbox-card-root--cars[data-state=checked] .bpk-checkbox-card-description{color:var(--bpk-checkbox-card-secondary-text-color, rgb(98, 105, 113))}.bpk-checkbox-card-description>*{text-align:inherit}.bpk-checkbox-card-price{display:flex;align-items:center;gap:.25rem}.bpk-checkbox-card-indicator{position:absolute;top:.5rem;display:none;z-index:1;width:1.25rem;height:1.25rem;inset-inline-end:.5rem;pointer-events:none}.bpk-checkbox-card-indicator svg{width:100%;height:100%;fill:var(--bpk-checkbox-card-indicator-background-color, rgb(0, 98, 227))}.bpk-checkbox-card-root[data-state=checked] .bpk-checkbox-card-indicator{display:block}.bpk-checkbox-card-root--cars .bpk-checkbox-card-indicator{width:1rem;height:1rem}

package/bpk-component-floating-notification/index.d.ts

@@ -1,3 +1,4 @@
-import BpkFloatingNotification, { type Props as BpkFloatingNotificationProps } from './src/BpkFloatingNotification';
+import BpkFloatingNotification, { NOTIFICATION_TYPES, type Props as BpkFloatingNotificationProps } from './src/BpkFloatingNotification';
 export type { BpkFloatingNotificationProps };
+export { NOTIFICATION_TYPES };
 export default BpkFloatingNotification;

package/bpk-component-floating-notification/index.js

@@ -14,5 +14,6 @@
  * 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.
- */import BpkFloatingNotification from "./src/BpkFloatingNotification";
+ */import BpkFloatingNotification, { NOTIFICATION_TYPES } from "./src/BpkFloatingNotification";
+export { NOTIFICATION_TYPES };
 export default BpkFloatingNotification;

package/bpk-component-floating-notification/src/BpkFloatingNotification.d.ts

@@ -1,4 +1,8 @@
 import type { MouseEvent, FunctionComponent } from 'react';
+export declare const NOTIFICATION_TYPES: {
+    readonly default: "default";
+    readonly critical: "critical";
+};
 export type Props = {
     animateOnEnter?: boolean;
     animateOnExit?: boolean;
@@ -16,6 +20,7 @@ export type Props = {
      */
     onExit?: () => void;
     text: string;
+    type?: (typeof NOTIFICATION_TYPES)[keyof typeof NOTIFICATION_TYPES];
     [rest: string]: any;
 };
 declare const BpkFloatingNotification: (props: Props) => import("react/jsx-runtime").JSX.Element;

package/bpk-component-floating-notification/src/BpkFloatingNotification.js

@@ -18,13 +18,17 @@
 
 import { useEffect, useState } from 'react';
 import { CSSTransition } from 'react-transition-group';
-import BpkAriaLive from "../../bpk-component-aria-live";
+import BpkAriaLive, { ARIA_LIVE_POLITENESS_SETTINGS } from "../../bpk-component-aria-live";
 import BpkButton, { BUTTON_TYPES } from "../../bpk-component-button";
 import BpkText, { TEXT_STYLES } from "../../bpk-component-text";
 import { cssModules, getDataComponentAttribute } from "../../bpk-react-utils";
 import STYLES from "./BpkFloatingNotification.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
+export const NOTIFICATION_TYPES = {
+  default: 'default',
+  critical: 'critical'
+};
 const BpkFloatingNotification = props => {
   const [showMessage, setShowMessage] = useState(true);
   const {
@@ -37,9 +41,10 @@ const BpkFloatingNotification = props => {
     onClick,
     onExit,
     text,
+    type = NOTIFICATION_TYPES.default,
     ...rest
   } = props;
-  const classNames = getClassName('bpk-floating-notification', className);
+  const classNames = getClassName('bpk-floating-notification', type === NOTIFICATION_TYPES.critical && 'bpk-floating-notification--critical', className);
   useEffect(() => {
     let timer;
     if (hideAfter) {
@@ -78,6 +83,7 @@ const BpkFloatingNotification = props => {
         })
       }), /*#__PURE__*/_jsx(BpkAriaLive, {
         "aria-hidden": true,
+        politenessSetting: type === NOTIFICATION_TYPES.critical ? ARIA_LIVE_POLITENESS_SETTINGS.assertive : ARIA_LIVE_POLITENESS_SETTINGS.polite,
         children: text
       }), ctaText && /*#__PURE__*/_jsx("div", {
         className: getClassName('bpk-floating-notification__cta'),

package/bpk-component-floating-notification/src/BpkFloatingNotification.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-floating-notification{position:fixed;right:0;bottom:2rem;left:0;display:flex;z-index:2;max-width:25rem;margin:auto;padding:1.5rem;align-items:center;transition:opacity 400ms ease-in-out,transform 400ms ease-in-out;border-radius:.75rem;background:#05203c;color:#fff;box-shadow:0px 12px 50px 0px rgba(37,32,31,.25),0px 4px 14px 0px rgba(37,32,31,.25)}@media(max-width: 32rem){.bpk-floating-notification{max-width:100%;padding:1rem}}.bpk-floating-notification--leave{transform:translateY(0);opacity:1}.bpk-floating-notification--leave-active{transform:translateY(2rem);opacity:0}.bpk-floating-notification--leave-done{opacity:0}.bpk-floating-notification--appear{transform:translateY(2rem);opacity:0}.bpk-floating-notification--appear-active{transform:translateY(0);opacity:1}.bpk-floating-notification__icon{margin-right:.5rem;margin-left:.25rem;flex-shrink:0;transform:translateY(0.25rem);text-align:bottom;fill:#fff}.bpk-floating-notification__text{margin-inline-end:.5rem}.bpk-floating-notification__cta{margin-inline-start:auto}
+.bpk-floating-notification{position:fixed;right:0;bottom:2rem;left:0;display:flex;z-index:2;max-width:25rem;margin:auto;padding:1.5rem;align-items:center;transition:opacity 400ms ease-in-out,transform 400ms ease-in-out;border-radius:.75rem;background:#05203c;color:#fff;box-shadow:0px 12px 50px 0px rgba(37,32,31,.25),0px 4px 14px 0px rgba(37,32,31,.25)}@media(max-width: 32rem){.bpk-floating-notification{max-width:100%;padding:1rem}}.bpk-floating-notification--critical{background-color:#e70866}.bpk-floating-notification--leave{transform:translateY(0);opacity:1}.bpk-floating-notification--leave-active{transform:translateY(2rem);opacity:0}.bpk-floating-notification--leave-done{opacity:0}.bpk-floating-notification--appear{transform:translateY(2rem);opacity:0}.bpk-floating-notification--appear-active{transform:translateY(0);opacity:1}.bpk-floating-notification__icon{margin-right:.5rem;margin-left:.25rem;flex-shrink:0;transform:translateY(0.25rem);text-align:bottom;fill:#fff}.bpk-floating-notification__text{margin-inline-end:.5rem}.bpk-floating-notification__cta{margin-inline-start:auto}

package/bpk-component-icon/scripts/generate-figma-connect.js

@@ -0,0 +1,267 @@
+#!/usr/bin/env node
+
+/*
+ * 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.
+ */
+
+/**
+ * Generates Figma Code Connect mappings for Backpack icons.
+ *
+ * This script fetches component metadata from the Figma Icons file and
+ * cross-references it with the icon files in sm/ and lg/ to produce
+ * a single .figma.tsx file that maps every icon to its Figma component.
+ *
+ * Usage:
+ *   FIGMA_ACCESS_TOKEN=<token> node packages/bpk-component-icon/scripts/generate-figma-connect.js
+ *
+ * The generated file is written to:
+ *   packages/bpk-component-icon/BpkIcon.figma.tsx
+ */
+const fs = require('fs');
+const path = require('path');
+const FIGMA_FILE_KEY = 'I9hynSlX2wyrlhceZr7z1u';
+const FIGMA_FILE_NAME = 'Backpack-Icons';
+const FIGMA_BASE_URL = `https://www.figma.com/design/${FIGMA_FILE_KEY}/${FIGMA_FILE_NAME}`;
+const ICON_PKG = path.resolve(__dirname, '..');
+const OUTPUT_FILE = path.join(ICON_PKG, 'BpkIcon.figma.tsx');
+function kebabToPascal(str) {
+  return str.split(/[-]+/).map(part => part.charAt(0).toUpperCase() + part.slice(1)).join('');
+}
+function getIconFiles(dir) {
+  if (!fs.existsSync(dir)) return new Set();
+  return new Set(fs.readdirSync(dir).filter(f => f.endsWith('.jsx')).map(f => f.replace('.jsx', '')));
+}
+async function fetchFigmaComponents() {
+  const token = process.env.FIGMA_ACCESS_TOKEN;
+  if (!token) {
+    console.error('Error: FIGMA_ACCESS_TOKEN environment variable is required.');
+    process.exit(1);
+  }
+  const url = `https://api.figma.com/v1/files/${FIGMA_FILE_KEY}/components`;
+  const res = await fetch(url, {
+    headers: {
+      'X-Figma-Token': token
+    }
+  });
+  if (!res.ok) {
+    console.error(`Figma API error: ${res.status} ${res.statusText}`);
+    process.exit(1);
+  }
+  const data = await res.json();
+  return data.meta.components;
+}
+function groupComponentSets(components) {
+  const sets = {};
+  for (const c of components) {
+    const {
+      name
+    } = c.containing_frame;
+    const setNodeId = c.containing_frame.nodeId;
+    if (!sets[name]) {
+      sets[name] = {
+        nodeId: setNodeId,
+        variants: {},
+        variantProp: null
+      };
+    }
+
+    // Detect the variant property name (most use "Size", one uses "Property 1")
+    const match = c.name.match(/^(.+?)=(\d+)$/);
+    if (match) {
+      const [, variantProp, variantValue] = match;
+      sets[name].variantProp = variantProp;
+      sets[name].variants[variantValue] = c.node_id;
+    }
+  }
+  return sets;
+}
+function figmaUrl(nodeId) {
+  const encoded = nodeId.replace(/:/g, '%3A');
+  return `${FIGMA_BASE_URL}?node-id=${encoded}`;
+}
+
+// Spelling aliases: Figma name → code name
+const SPELLING_ALIASES = {
+  centre: 'center'
+};
+
+/**
+ * Normalize a name by collapsing double-hyphens to single and applying
+ * spelling aliases, so we can fuzzy-match Figma names to code file names.
+ *
+ * @param {string} name - The icon name to normalize.
+ * @returns {string} The normalized name.
+ */
+function normalize(name) {
+  const collapsed = name.replace(/--/g, '-');
+  return collapsed.split('-').map(part => SPELLING_ALIASES[part] || part).join('-');
+}
+
+/**
+ * Find the matching code file name for a Figma icon name.
+ * Tries exact match first, then falls back to normalized matching.
+ *
+ * @param {string} figmaName - The icon name from Figma.
+ * @param {Set<string>} codeIcons - Set of icon file names from code.
+ * @returns {string|null} The matching code file name, or null if not found.
+ */
+function findCodeMatch(figmaName, codeIcons) {
+  if (codeIcons.has(figmaName)) return figmaName;
+  const normalizedFigma = normalize(figmaName);
+  for (const codeName of codeIcons) {
+    if (normalize(codeName) === normalizedFigma) return codeName;
+  }
+  return null;
+}
+function generateFile(iconSets, smIcons, lgIcons) {
+  const entries = [];
+  for (const [name, set] of Object.entries(iconSets).sort(([a], [b]) => a.localeCompare(b))) {
+    const smMatch = set.variants['16'] ? findCodeMatch(name, smIcons) : null;
+    const lgMatch = set.variants['24'] ? findCodeMatch(name, lgIcons) : null;
+    if (smMatch || lgMatch) {
+      entries.push({
+        name: smMatch || lgMatch,
+        figmaName: name,
+        nodeId: set.nodeId,
+        smFile: smMatch,
+        lgFile: lgMatch,
+        variantProp: set.variantProp || 'Size'
+      });
+    }
+  }
+  if (entries.length === 0) {
+    console.error('No matching icons found between Figma and code.');
+    process.exit(1);
+  }
+
+  // Build imports — interleaved and sorted alphabetically by import path
+  // to satisfy eslint import/order rules
+  const allImports = [];
+  for (const e of entries) {
+    if (e.lgFile) {
+      const pascal = kebabToPascal(e.lgFile);
+      allImports.push(`import BpkLarge${pascal}Icon from './lg/${e.lgFile}';`);
+    }
+    if (e.smFile) {
+      const pascal = kebabToPascal(e.smFile);
+      allImports.push(`import BpkSmall${pascal}Icon from './sm/${e.smFile}';`);
+    }
+  }
+  allImports.sort((a, b) => {
+    const pathA = a.match(/from '(.+)'/)[1];
+    const pathB = b.match(/from '(.+)'/)[1];
+    return pathA.localeCompare(pathB);
+  });
+
+  // Build connect calls
+  const connectCalls = [];
+  for (const e of entries) {
+    const url = figmaUrl(e.nodeId);
+    const prop = /^[a-zA-Z_$][a-zA-Z0-9_$]*$/.test(e.variantProp) ? e.variantProp : JSON.stringify(e.variantProp);
+    if (e.smFile && e.lgFile) {
+      const smPascal = kebabToPascal(e.smFile);
+      const lgPascal = kebabToPascal(e.lgFile);
+      connectCalls.push(`figma.connect(
+  BpkSmall${smPascal}Icon,
+  "${url}",
+  {
+    variant: { ${prop}: "16" },
+    example: () => <BpkSmall${smPascal}Icon />,
+  },
+)
+
+figma.connect(
+  BpkLarge${lgPascal}Icon,
+  "${url}",
+  {
+    variant: { ${prop}: "24" },
+    example: () => <BpkLarge${lgPascal}Icon />,
+  },
+)`);
+    } else if (e.smFile) {
+      const smPascal = kebabToPascal(e.smFile);
+      const variantLine = prop ? `    variant: { ${prop}: "16" },\n` : '';
+      connectCalls.push(`figma.connect(
+  BpkSmall${smPascal}Icon,
+  "${url}",
+  {
+${variantLine}    example: () => <BpkSmall${smPascal}Icon />,
+  },
+)`);
+    } else if (e.lgFile) {
+      const lgPascal = kebabToPascal(e.lgFile);
+      const variantLine = prop ? `    variant: { ${prop}: "24" },\n` : '';
+      connectCalls.push(`figma.connect(
+  BpkLarge${lgPascal}Icon,
+  "${url}",
+  {
+${variantLine}    example: () => <BpkLarge${lgPascal}Icon />,
+  },
+)`);
+    }
+  }
+  const content = `/*
+ * 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.
+ */
+
+// AUTO-GENERATED by scripts/generate-figma-connect.js — do not edit manually.
+
+import figma from '@figma/code-connect'
+
+${allImports.join('\n')}
+
+${connectCalls.join('\n\n')}
+`;
+  return {
+    content,
+    count: entries.length
+  };
+}
+async function main() {
+  console.log('Fetching icon components from Figma...');
+  const components = await fetchFigmaComponents();
+  console.log(`Found ${components.length} components in Figma.`);
+  const iconSets = groupComponentSets(components);
+  console.log(`Grouped into ${Object.keys(iconSets).length} icon sets.`);
+  const smIcons = getIconFiles(path.join(ICON_PKG, 'sm'));
+  const lgIcons = getIconFiles(path.join(ICON_PKG, 'lg'));
+  console.log(`Code icons: ${smIcons.size} sm, ${lgIcons.size} lg.`);
+  const {
+    content,
+    count
+  } = generateFile(iconSets, smIcons, lgIcons);
+  fs.writeFileSync(OUTPUT_FILE, content);
+  console.log(`Generated ${OUTPUT_FILE} with ${count} icon mappings.`);
+}
+main().catch(err => {
+  console.error(err);
+  process.exit(1);
+});

package/bpk-component-info-banner/src/BpkInfoBanner.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-info-banner{padding:.5rem 1rem;overflow:hidden;border-radius:.5rem;margin:0;font-size:.875rem;line-height:1.25rem;font-weight:400}.bpk-info-banner--style-default{background-color:#eff3f8}.bpk-info-banner--style-onContrast{background-color:#fff}.bpk-info-banner__header{display:flex;flex-direction:row;align-items:flex-start}.bpk-info-banner__header--expandable{width:100%;padding:0;border:none;background-color:rgba(0,0,0,0);text-align:start;cursor:pointer}.bpk-info-banner__icon,.bpk-info-banner__toggle{padding:.125rem 0}.bpk-info-banner__message{padding:.25rem .5rem;flex-grow:1}.bpk-info-banner__success-icon{fill:#0c838a}.bpk-info-banner__warning-icon{fill:#f55d42}.bpk-info-banner__error-icon{fill:#e70866}.bpk-info-banner__info-icon{fill:#626971}.bpk-info-banner__toggle-button{padding:0;border:0;background-color:rgba(0,0,0,0);cursor:pointer;appearance:none;fill:#626971}.bpk-info-banner__children-container{color:#161616;font-size:.875rem;line-height:1.25rem;font-weight:400}.bpk-info-banner__children-container--with-action{padding:.25rem 0 .25rem}.bpk-info-banner__children-container--no-action{padding:.25rem 0 .5rem}
+.bpk-info-banner{padding:.5rem 1rem;overflow:hidden;border-radius:.5rem;margin:0;font-size:.875rem;line-height:1.25rem;font-weight:400}.bpk-info-banner--style-default{background-color:#eff3f8}.bpk-info-banner--style-onContrast{background-color:#fff}.bpk-info-banner__header{display:flex;flex-direction:row;align-items:flex-start}.bpk-info-banner__header--expandable{width:100%;padding:0;border:none;background-color:rgba(0,0,0,0);text-align:start;cursor:pointer}.bpk-info-banner__icon,.bpk-info-banner__toggle{padding:.125rem 0}.bpk-info-banner__message{padding:.25rem .5rem;flex-grow:1}.bpk-info-banner__success-icon{fill:#0c838a}.bpk-info-banner__warning-icon{fill:#f55d42}.bpk-info-banner__error-icon{fill:#e70866}.bpk-info-banner__info-icon{fill:#626971}.bpk-info-banner__critical-icon{fill:#fff}.bpk-info-banner--critical{background-color:#e70866;color:#fff}.bpk-info-banner--critical .bpk-info-banner__message{color:#fff}.bpk-info-banner--critical .bpk-info-banner__toggle-button{fill:#fff}.bpk-info-banner--critical .bpk-info-banner__children-container,.bpk-info-banner--critical .bpk-info-banner__children-container--with-action,.bpk-info-banner--critical .bpk-info-banner__children-container--no-action{color:#fff}.bpk-info-banner__toggle-button{padding:0;border:0;background-color:rgba(0,0,0,0);cursor:pointer;appearance:none;fill:#626971}.bpk-info-banner__children-container{color:#161616;font-size:.875rem;line-height:1.25rem;font-weight:400}.bpk-info-banner__children-container--with-action{padding:.25rem 0 .25rem}.bpk-info-banner__children-container--no-action{padding:.25rem 0 .5rem}

package/bpk-component-info-banner/src/BpkInfoBannerInner.js

@@ -27,6 +27,7 @@ import BpkCloseButton from "../../bpk-component-close-button";
 import { withButtonAlignment } from "../../bpk-component-icon";
 import ChevronDownIcon from "../../bpk-component-icon/sm/chevron-down";
 import ChevronUpIcon from "../../bpk-component-icon/sm/chevron-up";
+import ExclamationCircleIcon from "../../bpk-component-icon/sm/exclamation-circle";
 import InfoCircleIcon from "../../bpk-component-icon/sm/information-circle";
 import TickCircleIcon from "../../bpk-component-icon/sm/tick-circle";
 import BpkLink from "../../bpk-component-link";
@@ -49,14 +50,16 @@ const getIconForType = (type, CustomIcon) => {
     [ALERT_TYPES.SUCCESS]: getClassName('bpk-info-banner__success-icon'),
     [ALERT_TYPES.WARNING]: getClassName('bpk-info-banner__warning-icon'),
     [ALERT_TYPES.ERROR]: getClassName('bpk-info-banner__error-icon'),
-    [ALERT_TYPES.INFO]: getClassName('bpk-info-banner__info-icon')
+    [ALERT_TYPES.INFO]: getClassName('bpk-info-banner__info-icon'),
+    [ALERT_TYPES.CRITICAL]: getClassName('bpk-info-banner__critical-icon')
   };
   const className = classMap[type];
   const componentMap = {
     [ALERT_TYPES.SUCCESS]: TickCircleIcon,
     [ALERT_TYPES.WARNING]: InfoCircleIcon,
     [ALERT_TYPES.ERROR]: InfoCircleIcon,
-    [ALERT_TYPES.INFO]: InfoCircleIcon
+    [ALERT_TYPES.INFO]: InfoCircleIcon,
+    [ALERT_TYPES.CRITICAL]: ExclamationCircleIcon
   };
   const Icon = CustomIcon || componentMap[type];
   const AlignedIcon = withButtonAlignment(Icon);
@@ -139,7 +142,8 @@ const BpkInfoBannerInner = ({
           children: /*#__PURE__*/_jsx(BpkCloseButton, {
             onClick: onBannerDismiss,
             "aria-label": dismissButtonLabel,
-            label: dismissButtonLabel
+            label: dismissButtonLabel,
+            onDark: type === ALERT_TYPES.CRITICAL
           })
         })]
       }), /*#__PURE__*/_jsxs(BpkAnimateHeight, {
@@ -149,6 +153,7 @@ const BpkInfoBannerInner = ({
           className: childrenContainerClassName,
           children: children
         }), isExpandable && action && /*#__PURE__*/_jsx(BpkLink, {
+          alternate: type === ALERT_TYPES.CRITICAL,
           onClick: action.callback,
           href: "#",
           children: action.title

package/bpk-component-info-banner/src/common-types.d.ts

@@ -4,6 +4,7 @@ export declare const ALERT_TYPES: {
     readonly WARNING: "warning";
     readonly ERROR: "error";
     readonly INFO: "info";
+    readonly CRITICAL: "critical";
 };
 export declare const STYLE_TYPES: {
     DEFAULT: string;

package/bpk-component-info-banner/src/common-types.js

@@ -20,7 +20,8 @@ export const ALERT_TYPES = {
   SUCCESS: 'success',
   WARNING: 'warning',
   ERROR: 'error',
-  INFO: 'info'
+  INFO: 'info',
+  CRITICAL: 'critical'
 };
 export const STYLE_TYPES = {
   DEFAULT: 'default',

package/bpk-component-inset-banner/index.d.ts

@@ -2,7 +2,10 @@ import BpkInsetBanner, { type Props as BpkInsetBannerProps } from './src/BpkInse
 import BpkInsetBannerSponsored from './src/BpkInsetBannerV2/BpkInsetBannerSponsored';
 import { type CommonProps as BpkInsetBannerSponsoredProps } from './src/BpkInsetBannerV2/common-types';
 import { VARIANT } from './src/BpkInsetBannerV2/common-types';
+import BpkInsetBannerV3 from './src/BpkInsetBannerV3/BpkInsetBannerV3';
+import type { RootProps as BpkInsetBannerV3RootProps, HeaderProps as BpkInsetBannerV3HeaderProps, LeadingAccessoryProps as BpkInsetBannerV3LeadingAccessoryProps, ContentProps as BpkInsetBannerV3ContentProps, BodyProps as BpkInsetBannerV3BodyProps, TrailingAccessoryProps as BpkInsetBannerV3TrailingAccessoryProps } from './src/BpkInsetBannerV3/BpkInsetBannerV3';
 export type { BpkInsetBannerProps };
 export type { BpkInsetBannerSponsoredProps };
+export type { BpkInsetBannerV3RootProps, BpkInsetBannerV3HeaderProps, BpkInsetBannerV3LeadingAccessoryProps, BpkInsetBannerV3ContentProps, BpkInsetBannerV3BodyProps, BpkInsetBannerV3TrailingAccessoryProps, };
 export { VARIANT };
-export { BpkInsetBannerSponsored, BpkInsetBanner };
+export { BpkInsetBannerSponsored, BpkInsetBanner, BpkInsetBannerV3 };

package/bpk-component-inset-banner/index.js

@@ -19,5 +19,6 @@
 import BpkInsetBanner from "./src/BpkInsetBanner";
 import BpkInsetBannerSponsored from "./src/BpkInsetBannerV2/BpkInsetBannerSponsored";
 import { VARIANT } from "./src/BpkInsetBannerV2/common-types";
+import BpkInsetBannerV3 from "./src/BpkInsetBannerV3/BpkInsetBannerV3";
 export { VARIANT };
-export { BpkInsetBannerSponsored, BpkInsetBanner };
+export { BpkInsetBannerSponsored, BpkInsetBanner, BpkInsetBannerV3 };

package/bpk-component-inset-banner/src/BpkInsetBannerV3/BpkInsetBannerV3.d.ts

@@ -0,0 +1,56 @@
+import type { ComponentPropsWithoutRef, MouseEvent, ReactNode } from 'react';
+export type BodyProps = {
+    children: ReactNode;
+    bleed?: boolean;
+    backgroundColor?: string;
+};
+export type RootProps = Omit<ComponentPropsWithoutRef<'div'>, 'className' | 'style' | 'children'> & {
+    children: ReactNode;
+    backgroundColor?: string;
+    textVariant?: 'on-light' | 'on-dark';
+};
+export type HeaderProps = {
+    children: ReactNode;
+    layout?: 'horizontal' | 'vertical';
+};
+export type LeadingAccessoryProps = {
+    children: ReactNode;
+};
+export type ContentProps = {
+    children: ReactNode;
+};
+type InteractiveTrailingAccessoryProps = Omit<ComponentPropsWithoutRef<'button'>, 'className' | 'style' | 'children' | 'type' | 'onClick'> & {
+    children: ReactNode;
+    onClick: (event: MouseEvent<HTMLButtonElement>) => void;
+    'aria-label'?: string;
+};
+type StaticTrailingAccessoryProps = Omit<ComponentPropsWithoutRef<'div'>, 'className' | 'style' | 'children'> & {
+    children: ReactNode;
+    onClick?: never;
+};
+export type TrailingAccessoryProps = InteractiveTrailingAccessoryProps | StaticTrailingAccessoryProps;
+declare const BpkInsetBannerV3: {
+    Root: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "className" | "style" | "children"> & {
+        children: ReactNode;
+        backgroundColor?: string;
+        textVariant?: "on-light" | "on-dark";
+    } & import("react").RefAttributes<HTMLDivElement>>;
+    Header: {
+        ({ children, layout }: HeaderProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    LeadingAccessory: {
+        ({ children }: LeadingAccessoryProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Content: {
+        ({ children }: ContentProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Body: {
+        ({ backgroundColor, bleed, children }: BodyProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    TrailingAccessory: import("react").ForwardRefExoticComponent<TrailingAccessoryProps & import("react").RefAttributes<HTMLDivElement | HTMLButtonElement>>;
+};
+export default BpkInsetBannerV3;