@skyscanner/backpack-web 42.1.0 → 42.3.0

package/bpk-component-inset-banner/src/BpkInsetBannerV3/BpkInsetBannerV3.js

@@ -0,0 +1,118 @@
+/*
+ * 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.
+ */
+
+import { forwardRef } from 'react';
+import { cssModules, getDataComponentAttribute } from "../../../bpk-react-utils";
+import STYLES from "./BpkInsetBannerV3.module.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+const getClassName = cssModules(STYLES);
+const Body = ({
+  backgroundColor,
+  bleed,
+  children
+}) => /*#__PURE__*/_jsx("div", {
+  ...getDataComponentAttribute('InsetBannerV3.Body'),
+  className: getClassName('bpk-inset-banner-v3__body', bleed && 'bpk-inset-banner-v3__body--bleed'),
+  style: backgroundColor ? {
+    backgroundColor
+  } : undefined,
+  children: children
+});
+Body.displayName = 'BpkInsetBannerV3.Body';
+const Root = /*#__PURE__*/forwardRef(({
+  backgroundColor,
+  children,
+  textVariant = 'on-light',
+  ...rest
+}, ref) => /*#__PURE__*/_jsx("div", {
+  ref: ref,
+  ...getDataComponentAttribute('InsetBannerV3'),
+  ...rest,
+  className: getClassName('bpk-inset-banner-v3', `bpk-inset-banner-v3--${textVariant}`),
+  style: backgroundColor ? {
+    backgroundColor
+  } : undefined,
+  children: children
+}));
+Root.displayName = 'BpkInsetBannerV3.Root';
+const Header = ({
+  children,
+  layout
+}) => /*#__PURE__*/_jsx("div", {
+  ...getDataComponentAttribute('InsetBannerV3.Header'),
+  className: getClassName('bpk-inset-banner-v3__header', layout === 'horizontal' && 'bpk-inset-banner-v3__header--horizontal', layout === 'vertical' && 'bpk-inset-banner-v3__header--vertical'),
+  children: children
+});
+Header.displayName = 'BpkInsetBannerV3.Header';
+const LeadingAccessory = ({
+  children
+}) => /*#__PURE__*/_jsx("div", {
+  ...getDataComponentAttribute('InsetBannerV3.LeadingAccessory'),
+  className: getClassName('bpk-inset-banner-v3__leading-accessory'),
+  children: children
+});
+LeadingAccessory.displayName = 'BpkInsetBannerV3.LeadingAccessory';
+const Content = ({
+  children
+}) => /*#__PURE__*/_jsx("div", {
+  ...getDataComponentAttribute('InsetBannerV3.Content'),
+  className: getClassName('bpk-inset-banner-v3__content'),
+  children: children
+});
+Content.displayName = 'BpkInsetBannerV3.Content';
+const TrailingAccessory = /*#__PURE__*/forwardRef((props, ref) => {
+  if ('onClick' in props && props.onClick) {
+    const {
+      'aria-label': ariaLabel,
+      children,
+      onClick,
+      ...rest
+    } = props;
+    return /*#__PURE__*/_jsx("button", {
+      ref: ref,
+      type: "button",
+      "aria-label": ariaLabel,
+      ...rest,
+      ...getDataComponentAttribute('InsetBannerV3.TrailingAccessory'),
+      className: getClassName('bpk-inset-banner-v3__trailing-accessory', 'bpk-inset-banner-v3__trailing-accessory--interactive'),
+      onClick: onClick,
+      children: children
+    });
+  }
+  const {
+    children,
+    ...rest
+  } = props;
+  return /*#__PURE__*/_jsx("div", {
+    ref: ref,
+    ...rest,
+    ...getDataComponentAttribute('InsetBannerV3.TrailingAccessory'),
+    className: getClassName('bpk-inset-banner-v3__trailing-accessory'),
+    children: children
+  });
+});
+TrailingAccessory.displayName = 'BpkInsetBannerV3.TrailingAccessory';
+const BpkInsetBannerV3 = {
+  Root,
+  Header,
+  LeadingAccessory,
+  Content,
+  Body,
+  TrailingAccessory
+};
+export default BpkInsetBannerV3;

package/bpk-component-inset-banner/src/BpkInsetBannerV3/BpkInsetBannerV3.module.css

@@ -0,0 +1,18 @@
+/*
+ * 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.
+ */
+.bpk-inset-banner-v3{border-radius:.5rem;overflow:hidden;container-type:inline-size}.bpk-inset-banner-v3--on-light{color:#161616;fill:#161616}.bpk-inset-banner-v3--on-dark{color:#fff;fill:#fff}.bpk-inset-banner-v3__header{display:grid;padding:.5rem 1rem;grid-template-columns:auto 1fr auto;grid-template-areas:"leading content trailing";align-items:center;gap:1rem}@container (max-width: 25rem){.bpk-inset-banner-v3__header{grid-template-columns:1fr auto;grid-template-areas:"leading trailing" "content content";gap:.25rem}.bpk-inset-banner-v3__header--horizontal{grid-template-columns:auto 1fr auto;grid-template-areas:"leading content trailing";align-items:center;gap:1rem}}.bpk-inset-banner-v3__header--vertical{grid-template-columns:1fr auto;grid-template-areas:"leading trailing" "content content";gap:.25rem}.bpk-inset-banner-v3__leading-accessory{display:flex;grid-area:leading;align-items:center}.bpk-inset-banner-v3__content{display:flex;min-width:0;grid-area:content;flex-direction:column;word-wrap:break-word}.bpk-inset-banner-v3__trailing-accessory{display:flex;grid-area:trailing;align-items:center}@container (max-width: 25rem){.bpk-inset-banner-v3__trailing-accessory{align-self:flex-start}}.bpk-inset-banner-v3__header--horizontal>.bpk-inset-banner-v3__trailing-accessory{align-self:center}.bpk-inset-banner-v3__trailing-accessory--interactive{padding:0;border:none;background:none;color:inherit;cursor:pointer;position:relative}.bpk-inset-banner-v3__trailing-accessory--interactive::before{position:absolute;top:calc(-2.75rem/2 + 50%);left:calc(-2.75rem/2 + 50%);content:"";width:2.75rem;height:2.75rem}.bpk-inset-banner-v3__trailing-accessory--interactive:focus-visible{outline:.125rem solid #0062e3;outline-offset:.125rem}.bpk-inset-banner-v3__body{padding:1rem}.bpk-inset-banner-v3__body--bleed{padding:0}

package/bpk-component-layout/src/BpkProvider.d.ts

@@ -3,12 +3,17 @@ export interface BpkProviderProps {
     children: ReactNode;
 }
 /**
- * BpkProvider - Provides Chakra UI context for Backpack layout components
+ * BpkProvider - Provides context for Backpack layout and Ark-based components.
  *
- * Chakra UI 3.0 requires the `value` prop to be set to a system object.
- * We create a custom system with Backpack tokens using createSystem.
+ * Wraps children with:
+ * - Chakra UI system context (for layout components: BpkFlex, BpkGrid, etc.)
+ * - Ark UI LocaleProvider (for Ark-based components: BpkCheckboxV2, BpkSegmentedControlV2, etc.)
+ *
+ * RTL support: reads document direction reactively via MutationObserver and passes
+ * the appropriate locale to Ark's LocaleProvider. All Ark-based components in the
+ * tree render correctly in RTL without requiring additional wrapping or prop changes.
  *
  * @param {BpkProviderProps} props - The provider props.
- * @returns {JSX.Element} The provider wrapping its children with Chakra context.
+ * @returns {JSX.Element} The provider wrapping its children with Chakra and Ark context.
  */
 export declare const BpkProvider: ({ children }: BpkProviderProps) => JSX.Element;

package/bpk-component-layout/src/BpkProvider.js

@@ -16,6 +16,8 @@
  * limitations under the License.
  */
 
+import { useEffect, useState } from 'react';
+import { LocaleProvider } from '@ark-ui/react';
 import { ChakraProvider, createSystem, defaultConfig } from '@chakra-ui/react';
 import { createBpkConfig } from "./theme";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -29,19 +31,96 @@ const {
   ...defaultConfigWithoutGlobalCss
 } = defaultConfig;
 const bpkSystem = createSystem(defaultConfigWithoutGlobalCss, createBpkConfig());
+// Fallback locale mapping used when no explicit locale is available on the document.
+// Maps DOM direction to minimal BCP 47 locales understood by Ark's isRTL() utility.
+// 'ar-SA' is the minimal RTL locale — Ark only uses it to derive dir='rtl'.
+const FALLBACK_LOCALE_BY_DIRECTION = {
+  ltr: 'en-US',
+  rtl: 'ar-SA'
+};
+
+// Known RTL language subtags (ISO 639 codes). Used as fallback when
+// Intl.Locale.textInfo is unavailable (Node < 22, older browsers).
+const RTL_LANGUAGE_SUBTAGS = new Set(['ar', 'he', 'fa', 'ur', 'yi', 'iw', 'ps', 'sd', 'ug', 'ku']);
+
+// Returns the text direction implied by a BCP 47 locale string.
+// Uses Intl.Locale.textInfo when available (Chrome 99+, Safari 15.4+, Firefox 126+, Node 22+);
+// falls back to a known-RTL-subtag lookup.
+const getLangDir = locale => {
+  try {
+    const dir = new Intl.Locale(locale).textInfo?.direction;
+    if (dir) return dir === 'rtl' ? 'rtl' : 'ltr';
+  } catch {
+    // Ignore invalid locale strings
+  }
+  return RTL_LANGUAGE_SUBTAGS.has(locale.split('-')[0].toLowerCase()) ? 'rtl' : 'ltr';
+};
+
+// Resolves the locale to pass to Ark's LocaleProvider.
+//
+// Priority rules:
+//   1. If html[dir] is explicitly set:
+//      - Use html[lang] only when its direction is consistent with html[dir].
+//      - Otherwise fall back to FALLBACK_LOCALE_BY_DIRECTION[dir].
+//      This prevents an LTR html[lang] (e.g. 'en' from a page template) from
+//      overriding an explicit html[dir]="rtl" signal (e.g. from a dev RTL toggle).
+//   2. If html[dir] is not set: use html[lang] if present, else 'en-US'.
+//
+// SSR-safe: returns 'en-US' when document is unavailable.
+const getArkLocale = () => {
+  if (typeof document === 'undefined') return 'en-US';
+  const explicitDir = document.documentElement.getAttribute('dir');
+  const lang = document.documentElement.getAttribute('lang');
+  if (explicitDir === 'rtl' || explicitDir === 'ltr') {
+    if (lang && getLangDir(lang) === explicitDir) return lang;
+    return FALLBACK_LOCALE_BY_DIRECTION[explicitDir];
+  }
+  return lang || 'en-US';
+};
+
+// Reactive hook: subscribes to document.documentElement[dir] and [lang] changes
+// via MutationObserver. Re-renders BpkProvider when direction or locale is toggled
+// (e.g. Storybook RTL toolbar, runtime locale switcher).
+// SSR-safe: always initialises to 'en-US' so server and client agree on the first render,
+//           avoiding hydration mismatches. The real locale is read inside useEffect,
+//           which does not run on the server.
+const useArkLocale = () => {
+  const [locale, setLocale] = useState('en-US');
+  useEffect(() => {
+    setLocale(getArkLocale());
+    const observer = new MutationObserver(() => setLocale(getArkLocale()));
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['dir', 'lang']
+    });
+    return () => observer.disconnect();
+  }, []);
+  return locale;
+};
 
 /**
- * BpkProvider - Provides Chakra UI context for Backpack layout components
+ * BpkProvider - Provides context for Backpack layout and Ark-based components.
+ *
+ * Wraps children with:
+ * - Chakra UI system context (for layout components: BpkFlex, BpkGrid, etc.)
+ * - Ark UI LocaleProvider (for Ark-based components: BpkCheckboxV2, BpkSegmentedControlV2, etc.)
  *
- * Chakra UI 3.0 requires the `value` prop to be set to a system object.
- * We create a custom system with Backpack tokens using createSystem.
+ * RTL support: reads document direction reactively via MutationObserver and passes
+ * the appropriate locale to Ark's LocaleProvider. All Ark-based components in the
+ * tree render correctly in RTL without requiring additional wrapping or prop changes.
  *
  * @param {BpkProviderProps} props - The provider props.
- * @returns {JSX.Element} The provider wrapping its children with Chakra context.
+ * @returns {JSX.Element} The provider wrapping its children with Chakra and Ark context.
  */
 export const BpkProvider = ({
   children
-}) => /*#__PURE__*/_jsx(ChakraProvider, {
-  value: bpkSystem,
-  children: children
-});
+}) => {
+  const locale = useArkLocale();
+  return /*#__PURE__*/_jsx(ChakraProvider, {
+    value: bpkSystem,
+    children: /*#__PURE__*/_jsx(LocaleProvider, {
+      locale: locale,
+      children: children
+    })
+  });
+};

package/bpk-component-layout/src/types.d.ts

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import type { HTMLAttributes, ReactNode } from 'react';
 import type StackOptionKeys from './BpkStack.constant';
 import type { BpkCommonLayoutProps } from './commonProps';
 import type { BpkSpacingValue, BpkResponsiveValue, BpkBasisValue } from './tokens';
@@ -144,7 +144,7 @@ export type VesselElement = 'div' | 'span' | 'section' | 'article' | 'nav' | 'ma
  */
 export type BpkVesselProps = {
     as?: VesselElement;
-} & React.HTMLAttributes<HTMLElement>;
+} & HTMLAttributes<HTMLElement>;
 /**
  * Component-specific props for BpkFlex
  * Includes all Flex props except those in BpkCommonLayoutProps

package/bpk-component-link/src/common-types.d.ts

@@ -1,4 +1,4 @@
-import type { ComponentPropsWithoutRef, ElementType, ReactNode, Ref } from 'react';
+import type { ComponentPropsWithoutRef, ElementType, JSX, ReactNode, Ref } from 'react';
 /**
  * Polymorphic component types following Chakra UI pattern.
  * Allows BpkLink to be rendered as different HTML elements while

package/bpk-component-modal/index.d.ts

@@ -1,9 +1,11 @@
 import BpkModal from './src/BpkModal';
 import { MODAL_STYLING } from './src/BpkModalInner';
 import { BpkModalV2 } from './src/BpkModalV2/BpkModal';
+import BpkModalV3 from './src/BpkModalV3/BpkModalV3';
+import { MODAL_V3_TYPES } from './src/BpkModalV3/common-types';
 import { propTypes, defaultProps } from './src/legacy-prop-types';
 import themeAttributes from './src/themeAttributes';
 import type { Props } from './src/BpkModal';
 export type BpkModalProps = Props;
 export default BpkModal;
-export { propTypes, defaultProps, themeAttributes, BpkModalV2, MODAL_STYLING };
+export { propTypes, defaultProps, themeAttributes, BpkModalV2, BpkModalV3, MODAL_V3_TYPES, MODAL_STYLING, };

package/bpk-component-modal/index.js

@@ -19,8 +19,10 @@
 import BpkModal from "./src/BpkModal";
 import { MODAL_STYLING } from "./src/BpkModalInner";
 import { BpkModalV2 } from "./src/BpkModalV2/BpkModal";
+import BpkModalV3 from "./src/BpkModalV3/BpkModalV3";
+import { MODAL_V3_TYPES } from "./src/BpkModalV3/common-types";
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import { propTypes, defaultProps } from "./src/legacy-prop-types";
 import themeAttributes from "./src/themeAttributes";
 export default BpkModal;
-export { propTypes, defaultProps, themeAttributes, BpkModalV2, MODAL_STYLING };
+export { propTypes, defaultProps, themeAttributes, BpkModalV2, BpkModalV3, MODAL_V3_TYPES, MODAL_STYLING };

package/bpk-component-modal/src/BpkModalV3/BpkModalV3.d.ts

@@ -0,0 +1,14 @@
+declare const BpkModalV3: {
+    Root: ({ children, onOpenChange, open, type, }: import("./BpkModalV3Root/BpkModalV3Root").BpkModalV3RootProps) => import("react/jsx-runtime").JSX.Element;
+    Trigger: ({ asChild, children, }: import("./BpkModalV3Trigger/BpkModalV3Trigger").BpkModalV3TriggerProps) => import("react/jsx-runtime").JSX.Element;
+    Portal: ({ children }: import("./BpkModalV3Portal/BpkModalV3Portal").BpkModalV3PortalProps) => import("react/jsx-runtime").JSX.Element;
+    Scrim: () => import("react/jsx-runtime").JSX.Element;
+    Content: ({ children }: import("./BpkModalV3Content/BpkModalV3Content").BpkModalV3ContentProps) => import("react/jsx-runtime").JSX.Element;
+    Header: ({ children }: import("./BpkModalV3Header/BpkModalV3Header").BpkModalV3HeaderProps) => import("react/jsx-runtime").JSX.Element;
+    Title: ({ children }: import("./BpkModalV3Title/BpkModalV3Title").BpkModalV3TitleProps) => import("react/jsx-runtime").JSX.Element;
+    Description: ({ children }: import("./BpkModalV3Description/BpkModalV3Description").BpkModalV3DescriptionProps) => import("react/jsx-runtime").JSX.Element;
+    Body: ({ children }: import("./BpkModalV3Body/BpkModalV3Body").BpkModalV3BodyProps) => import("react/jsx-runtime").JSX.Element;
+    HeroImage: ({ alt, children, height, src, }: import("./BpkModalV3HeroImage/BpkModalV3HeroImage").BpkModalV3HeroImageProps) => import("react/jsx-runtime").JSX.Element;
+    CloseTrigger: ({ label, onImage, }: import("./BpkModalV3CloseTrigger/BpkModalV3CloseTrigger").BpkModalV3CloseTriggerProps) => import("react/jsx-runtime").JSX.Element;
+};
+export default BpkModalV3;

package/bpk-component-modal/src/BpkModalV3/BpkModalV3.js

@@ -0,0 +1,43 @@
+/*
+ * 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.
+ */
+
+import BpkModalV3Body from "./BpkModalV3Body/BpkModalV3Body";
+import BpkModalV3CloseTrigger from "./BpkModalV3CloseTrigger/BpkModalV3CloseTrigger";
+import BpkModalV3Content from "./BpkModalV3Content/BpkModalV3Content";
+import BpkModalV3Description from "./BpkModalV3Description/BpkModalV3Description";
+import BpkModalV3Header from "./BpkModalV3Header/BpkModalV3Header";
+import BpkModalV3HeroImage from "./BpkModalV3HeroImage/BpkModalV3HeroImage";
+import BpkModalV3Portal from "./BpkModalV3Portal/BpkModalV3Portal";
+import BpkModalV3Root from "./BpkModalV3Root/BpkModalV3Root";
+import BpkModalV3Scrim from "./BpkModalV3Scrim/BpkModalV3Scrim";
+import BpkModalV3Title from "./BpkModalV3Title/BpkModalV3Title";
+import BpkModalV3Trigger from "./BpkModalV3Trigger/BpkModalV3Trigger";
+const BpkModalV3 = {
+  Root: BpkModalV3Root,
+  Trigger: BpkModalV3Trigger,
+  Portal: BpkModalV3Portal,
+  Scrim: BpkModalV3Scrim,
+  Content: BpkModalV3Content,
+  Header: BpkModalV3Header,
+  Title: BpkModalV3Title,
+  Description: BpkModalV3Description,
+  Body: BpkModalV3Body,
+  HeroImage: BpkModalV3HeroImage,
+  CloseTrigger: BpkModalV3CloseTrigger
+};
+export default BpkModalV3;

package/bpk-component-modal/src/BpkModalV3/BpkModalV3Body/BpkModalV3Body.d.ts

@@ -0,0 +1,7 @@
+import type { ReactNode } from 'react';
+type BpkModalV3BodyProps = {
+    children: ReactNode;
+};
+declare const BpkModalV3Body: ({ children }: BpkModalV3BodyProps) => import("react/jsx-runtime").JSX.Element;
+export default BpkModalV3Body;
+export type { BpkModalV3BodyProps };

package/bpk-component-modal/src/BpkModalV3/BpkModalV3Body/BpkModalV3Body.js

@@ -0,0 +1,30 @@
+/*
+ * 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.
+ */
+
+import { cssModules, getDataComponentAttribute } from "../../../../bpk-react-utils";
+import STYLES from "./BpkModalV3Body.module.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+const getClassName = cssModules(STYLES);
+const BpkModalV3Body = ({
+  children
+}) => /*#__PURE__*/_jsx("div", {
+  className: getClassName('bpk-modal-v3__body'),
+  ...getDataComponentAttribute('ModalV3Body'),
+  children: children
+});
+export default BpkModalV3Body;

package/bpk-component-modal/src/BpkModalV3/BpkModalV3Body/BpkModalV3Body.module.css

@@ -0,0 +1,18 @@
+/*
+ * 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.
+ */
+.bpk-modal-v3__body{flex:1;overflow-y:auto;overscroll-behavior:contain}

package/bpk-component-modal/src/BpkModalV3/BpkModalV3CloseTrigger/BpkModalV3CloseTrigger.d.ts

@@ -0,0 +1,7 @@
+type BpkModalV3CloseTriggerProps = {
+    label: string;
+    onImage?: boolean;
+};
+declare const BpkModalV3CloseTrigger: ({ label, onImage, }: BpkModalV3CloseTriggerProps) => import("react/jsx-runtime").JSX.Element;
+export default BpkModalV3CloseTrigger;
+export type { BpkModalV3CloseTriggerProps };

package/bpk-component-modal/src/BpkModalV3/BpkModalV3CloseTrigger/BpkModalV3CloseTrigger.js

@@ -0,0 +1,49 @@
+/*
+ * 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.
+ */
+
+import { Dialog } from '@ark-ui/react';
+
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
+import BpkCloseButton from "../../../../bpk-component-close-button";
+import CloseIcon from "../../../../bpk-component-icon/sm/close";
+import { cssModules, getDataComponentAttribute } from "../../../../bpk-react-utils";
+import STYLES from "./BpkModalV3CloseTrigger.module.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+const getClassName = cssModules(STYLES);
+const BpkModalV3CloseTrigger = ({
+  label,
+  onImage = false
+}) => {
+  if (onImage) {
+    return /*#__PURE__*/_jsx(Dialog.CloseTrigger, {
+      className: getClassName('bpk-modal-v3__close-trigger--on-image'),
+      "aria-label": label,
+      ...getDataComponentAttribute('ModalV3CloseTrigger'),
+      children: /*#__PURE__*/_jsx(CloseIcon, {})
+    });
+  }
+  return /*#__PURE__*/_jsx(Dialog.CloseTrigger, {
+    asChild: true,
+    children: /*#__PURE__*/_jsx(BpkCloseButton, {
+      label: label,
+      onClick: () => {},
+      ...getDataComponentAttribute('ModalV3CloseTrigger')
+    })
+  });
+};
+export default BpkModalV3CloseTrigger;

package/bpk-component-modal/src/BpkModalV3/BpkModalV3CloseTrigger/BpkModalV3CloseTrigger.module.css

@@ -0,0 +1,18 @@
+/*
+ * 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.
+ */
+.bpk-modal-v3__close-trigger--on-image{position:absolute;top:1rem;display:flex;width:2.5rem;height:2.5rem;padding:.75rem;justify-content:center;align-items:center;flex-shrink:0;border:none;border-radius:1.5rem;outline:none;background-color:hsla(0,0%,100%,.5);color:#161616;cursor:pointer;inset-inline-end:1.5rem}.bpk-modal-v3__close-trigger--on-image:focus-visible{outline:.125rem solid #0062e3;outline-offset:.125rem}

package/bpk-component-modal/src/BpkModalV3/BpkModalV3Content/BpkModalV3Content.d.ts

@@ -0,0 +1,7 @@
+import type { ReactNode } from 'react';
+type BpkModalV3ContentProps = {
+    children: ReactNode;
+};
+declare const BpkModalV3Content: ({ children }: BpkModalV3ContentProps) => import("react/jsx-runtime").JSX.Element;
+export default BpkModalV3Content;
+export type { BpkModalV3ContentProps };

package/bpk-component-modal/src/BpkModalV3/BpkModalV3Content/BpkModalV3Content.js

@@ -0,0 +1,38 @@
+/*
+ * 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.
+ */
+
+import { Dialog } from '@ark-ui/react';
+import { cssModules, getDataComponentAttribute } from "../../../../bpk-react-utils";
+import { useModalType } from "../BpkModalV3Context";
+import STYLES from "./BpkModalV3Content.module.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+const getClassName = cssModules(STYLES);
+const BpkModalV3Content = ({
+  children
+}) => {
+  const type = useModalType();
+  return /*#__PURE__*/_jsx(Dialog.Positioner, {
+    className: getClassName('bpk-modal-v3__positioner', `bpk-modal-v3__positioner--${type}`),
+    children: /*#__PURE__*/_jsx(Dialog.Content, {
+      className: getClassName('bpk-modal-v3__content', `bpk-modal-v3__content--${type}`),
+      ...getDataComponentAttribute('ModalV3Content'),
+      children: children
+    })
+  });
+};
+export default BpkModalV3Content;

package/bpk-component-modal/src/BpkModalV3/BpkModalV3Content/BpkModalV3Content.module.css

@@ -0,0 +1,18 @@
+/*
+ * 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.
+ */
+.bpk-modal-v3__positioner{position:fixed;display:flex;z-index:1100;justify-content:center;align-items:center;inset:0;pointer-events:none}.bpk-modal-v3__positioner--sheet{align-items:flex-end}.bpk-modal-v3__positioner--full{align-items:stretch}.bpk-modal-v3__positioner--chatbot{align-items:stretch}.bpk-modal-v3__content{position:relative;display:flex;flex-direction:column;background-color:#fff;overflow:clip;pointer-events:none}.bpk-modal-v3__content[data-state=open]{pointer-events:auto}.bpk-modal-v3__content--default{width:100%;max-width:50rem;max-height:90vh;transform:scale(0.9);transition:transform 200ms ease-in-out;border-radius:1.5rem;opacity:0;box-shadow:0px 4px 14px 0px rgba(37,32,31,.25)}@media(max-width: 32rem){.bpk-modal-v3__content--default{max-width:none;height:100%;max-height:none;transform:translateY(100%);border-radius:0;box-shadow:none}.bpk-modal-v3__content--default[data-state=open]{transform:translateY(0)}.bpk-modal-v3__content--default[data-state=closed]{transform:translateY(100%)}}.bpk-modal-v3__content--default[data-state=open]{transform:scale(1);opacity:1}.bpk-modal-v3__content--default[data-state=closed]{transform:scale(0.9);opacity:0}.bpk-modal-v3__content--sheet{width:100%;height:fit-content;max-height:100dvh;transform:translateY(100%);transition:opacity 400ms cubic-bezier(0.5, 0, 0, 1),transform 400ms cubic-bezier(0.5, 0, 0, 1);border-radius:1.5rem 1.5rem 0 0;opacity:0;box-shadow:0px 4px 14px 0px rgba(37,32,31,.25)}.bpk-modal-v3__content--sheet[data-state=open]{transform:translateY(0);opacity:1}.bpk-modal-v3__content--sheet[data-state=closed]{transform:translateY(100%);opacity:0}.bpk-modal-v3__content--full{width:100%;height:100%;transform:translateY(100%);transition:opacity 400ms cubic-bezier(0.5, 0, 0, 1),transform 400ms cubic-bezier(0.5, 0, 0, 1);border-radius:0;opacity:0}.bpk-modal-v3__content--full[data-state=open]{transform:translateY(0);opacity:1}.bpk-modal-v3__content--full[data-state=closed]{transform:translateY(100%);opacity:0}.bpk-modal-v3__content--chatbot{width:100%;height:100%;transform:translateX(100%);transition:transform 400ms cubic-bezier(0.5, 0, 0, 1);border-radius:0;background-color:#eff3f8}html[dir=rtl] .bpk-modal-v3__content--chatbot{transform:translateX(-100%)}.bpk-modal-v3__content--chatbot[data-state=open]{transform:translateX(0)}html[dir=rtl] .bpk-modal-v3__content--chatbot[data-state=open]{transform:translateX(0)}.bpk-modal-v3__content--chatbot[data-state=closed]{transform:translateX(100%)}html[dir=rtl] .bpk-modal-v3__content--chatbot[data-state=closed]{transform:translateX(-100%)}@media(prefers-reduced-motion: reduce){.bpk-modal-v3__content--default{transform:scale(1);transition:none;opacity:1}}@media(prefers-reduced-motion: reduce)and (max-width: 32rem){.bpk-modal-v3__content--default{transform:translateY(0)}}@media(prefers-reduced-motion: reduce){.bpk-modal-v3__content--sheet,.bpk-modal-v3__content--full{transform:translateY(0);transition:none;opacity:1}.bpk-modal-v3__content--chatbot{transform:translateX(0);transition:none;opacity:1}html[dir=rtl] .bpk-modal-v3__content--chatbot{transform:translateX(0)}}

package/bpk-component-modal/src/BpkModalV3/BpkModalV3Context.d.ts

@@ -0,0 +1,3 @@
+import type { BpkModalV3Type } from './common-types';
+export declare const useModalType: () => BpkModalV3Type;
+export declare const ModalTypeProvider: import("react").Provider<BpkModalV3Type>;

package/bpk-component-modal/src/BpkModalV3/BpkModalV3Context.js

@@ -0,0 +1,22 @@
+/*
+ * 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.
+ */
+
+import { createContext, useContext } from 'react';
+const BpkModalV3Context = /*#__PURE__*/createContext('default');
+export const useModalType = () => useContext(BpkModalV3Context);
+export const ModalTypeProvider = BpkModalV3Context.Provider;

package/bpk-component-modal/src/BpkModalV3/BpkModalV3Description/BpkModalV3Description.d.ts

@@ -0,0 +1,7 @@
+import type { ReactNode } from 'react';
+type BpkModalV3DescriptionProps = {
+    children: ReactNode;
+};
+declare const BpkModalV3Description: ({ children }: BpkModalV3DescriptionProps) => import("react/jsx-runtime").JSX.Element;
+export default BpkModalV3Description;
+export type { BpkModalV3DescriptionProps };