@skyscanner/backpack-web 42.1.0 → 42.2.0

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.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}

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.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.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__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}@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}}

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 };

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

@@ -0,0 +1,28 @@
+/*
+ * 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 { getDataComponentAttribute } from "../../../../bpk-react-utils";
+import { jsx as _jsx } from "react/jsx-runtime";
+const BpkModalV3Description = ({
+  children
+}) => /*#__PURE__*/_jsx(Dialog.Description, {
+  ...getDataComponentAttribute('ModalV3Description'),
+  children: children
+});
+export default BpkModalV3Description;

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

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

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

@@ -0,0 +1,34 @@
+/*
+ * 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 { useModalType } from "../BpkModalV3Context";
+import STYLES from "./BpkModalV3Header.module.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+const getClassName = cssModules(STYLES);
+const BpkModalV3Header = ({
+  children
+}) => {
+  const type = useModalType();
+  return /*#__PURE__*/_jsx("div", {
+    className: getClassName('bpk-modal-v3__header', `bpk-modal-v3__header--${type}`),
+    ...getDataComponentAttribute('ModalV3Header'),
+    children: children
+  });
+};
+export default BpkModalV3Header;

package/bpk-component-modal/src/BpkModalV3/BpkModalV3Header.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__header{display:flex;padding:1.5rem;align-items:flex-start;flex-shrink:0;gap:.25rem}.bpk-modal-v3__header--sheet,.bpk-modal-v3__header--full{padding-bottom:1rem}

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

@@ -0,0 +1,10 @@
+import type { ReactNode } from 'react';
+type BpkModalV3HeroImageProps = {
+    src: string;
+    alt: string;
+    height?: string;
+    children?: ReactNode;
+};
+declare const BpkModalV3HeroImage: ({ alt, children, height, src, }: BpkModalV3HeroImageProps) => import("react/jsx-runtime").JSX.Element;
+export default BpkModalV3HeroImage;
+export type { BpkModalV3HeroImageProps };

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

@@ -0,0 +1,44 @@
+/*
+ * 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 "./BpkModalV3HeroImage.module.css";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const getClassName = cssModules(STYLES);
+const BpkModalV3HeroImage = ({
+  alt,
+  children,
+  height,
+  src
+}) => {
+  const style = height ? {
+    height,
+    flex: 'none'
+  } : undefined;
+  return /*#__PURE__*/_jsxs("div", {
+    className: getClassName('bpk-modal-v3__hero-image'),
+    style: style,
+    ...getDataComponentAttribute('ModalV3HeroImage'),
+    children: [/*#__PURE__*/_jsx("img", {
+      src: src,
+      alt: alt,
+      className: getClassName('bpk-modal-v3__hero-image-img')
+    }), children]
+  });
+};
+export default BpkModalV3HeroImage;

package/bpk-component-modal/src/BpkModalV3/BpkModalV3HeroImage.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__hero-image{position:relative;flex:1;overflow:hidden}.bpk-modal-v3__hero-image-img{position:absolute;width:100%;height:100%;inset:0;object-fit:cover}

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

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

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

@@ -0,0 +1,26 @@
+/*
+ * 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 { Portal } from '@ark-ui/react';
+import { jsx as _jsx } from "react/jsx-runtime";
+const BpkModalV3Portal = ({
+  children
+}) => /*#__PURE__*/_jsx(Portal, {
+  children: children
+});
+export default BpkModalV3Portal;

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

@@ -0,0 +1,13 @@
+import type { ReactNode } from 'react';
+import type { BpkModalV3Type } from '../common-types';
+type BpkModalV3RootProps = {
+    children: ReactNode;
+    open?: boolean;
+    onOpenChange?: (details: {
+        open: boolean;
+    }) => void;
+    type?: BpkModalV3Type;
+};
+declare const BpkModalV3Root: ({ children, onOpenChange, open, type, }: BpkModalV3RootProps) => import("react/jsx-runtime").JSX.Element;
+export default BpkModalV3Root;
+export type { BpkModalV3RootProps };

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

@@ -0,0 +1,44 @@
+/*
+ * 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 { getDataComponentAttribute } from "../../../../bpk-react-utils";
+import { ModalTypeProvider } from "../BpkModalV3Context";
+import { jsx as _jsx } from "react/jsx-runtime";
+const BpkModalV3Root = ({
+  children,
+  onOpenChange,
+  open,
+  type = 'default'
+}) => /*#__PURE__*/_jsx(Dialog.Root, {
+  ...(open !== undefined && {
+    open
+  }),
+  ...(onOpenChange !== undefined && {
+    onOpenChange
+  }),
+  children: /*#__PURE__*/_jsx(ModalTypeProvider, {
+    value: type,
+    children: /*#__PURE__*/_jsx("div", {
+      "data-type": type,
+      ...getDataComponentAttribute('ModalV3'),
+      children: children
+    })
+  })
+});
+export default BpkModalV3Root;

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

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

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

@@ -0,0 +1,32 @@
+/*
+ * 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 "./BpkModalV3Scrim.module.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+const getClassName = cssModules(STYLES);
+const BpkModalV3Scrim = () => {
+  const type = useModalType();
+  return /*#__PURE__*/_jsx(Dialog.Backdrop, {
+    className: getClassName('bpk-modal-v3__scrim', type === 'full' && 'bpk-modal-v3__scrim--full'),
+    ...getDataComponentAttribute('ModalV3Scrim')
+  });
+};
+export default BpkModalV3Scrim;

package/bpk-component-modal/src/BpkModalV3/BpkModalV3Scrim.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__scrim{position:fixed;z-index:1100;transition:opacity 200ms ease-in-out;background-color:rgba(0,0,0,.7);opacity:0;inset:0;pointer-events:none}.bpk-modal-v3__scrim[data-state=open]{opacity:1;pointer-events:auto}.bpk-modal-v3__scrim[data-state=closed]{opacity:0}.bpk-modal-v3__scrim--full{display:none}@media(prefers-reduced-motion: reduce){.bpk-modal-v3__scrim{transition:none}}

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

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