@skyscanner/backpack-web 34.15.1 → 34.16.0

package/bpk-component-info-banner/src/withBannerAlertState.d.ts

@@ -1,21 +1,14 @@
-/// <reference types="node" />
 import type { ComponentType } from 'react';
+import type { Props as BpkInfoBannerDismissableProps } from './BpkInfoBannerDismissable';
+import type { Props as BpkInfoBannerExpandableProps } from './BpkInfoBannerExpandable';
 export type WithBannerAlertStateProps = {
     onHide?: () => void;
     hideAfter?: number;
 };
-declare const withBannerAlertState: <P extends Partial<import("./common-types").CommonProps & {
-    dismissButtonLabel: string;
-    onDismiss?: import("./common-types").OnDismissHandler;
-} & {
-    children: import("react").ReactNode;
-    expanded?: boolean | undefined;
-    toggleButtonLabel: string;
-    onExpandToggle?: import("./common-types").OnExpandToggleHandler;
-    action?: import("./common-types").ExpandableBannerAction;
-}>>(WrappedComponent: ComponentType<P>) => {
+type BpkInfoBannerProps = Partial<BpkInfoBannerDismissableProps & BpkInfoBannerExpandableProps>;
+declare const withBannerAlertState: <P extends BpkInfoBannerProps>(WrappedComponent: ComponentType<P>) => {
     new (props: P & WithBannerAlertStateProps): {
-        hideIntervalId?: NodeJS.Timeout | null | undefined;
+        hideIntervalId?: ReturnType<typeof setTimeout> | null;
         componentDidMount(): void;
         componentWillUnmount(): void;
         onExpandToggle: () => void;
@@ -24,59 +17,59 @@ declare const withBannerAlertState: <P extends Partial<import("./common-types").
         render(): JSX.Element;
         context: any;
         setState<K extends keyof {
-            expanded?: boolean | undefined;
-            show?: boolean | undefined;
+            expanded?: boolean;
+            show?: boolean;
         }>(state: {
-            expanded?: boolean | undefined;
-            show?: boolean | undefined;
+            expanded?: boolean;
+            show?: boolean;
         } | ((prevState: Readonly<{
-            expanded?: boolean | undefined;
-            show?: boolean | undefined;
-        }>, props: Readonly<P & WithBannerAlertStateProps>) => {
-            expanded?: boolean | undefined;
-            show?: boolean | undefined;
-        } | Pick<{
-            expanded?: boolean | undefined;
-            show?: boolean | undefined;
-        }, K> | null) | Pick<{
-            expanded?: boolean | undefined;
-            show?: boolean | undefined;
+            expanded?: boolean;
+            show?: boolean;
+        }>, props: Readonly<P & WithBannerAlertStateProps>) => Pick<{
+            expanded?: boolean;
+            show?: boolean;
+        }, K> | {
+            expanded?: boolean;
+            show?: boolean;
+        } | null) | Pick<{
+            expanded?: boolean;
+            show?: boolean;
         }, K> | null, callback?: (() => void) | undefined): void;
         forceUpdate(callback?: (() => void) | undefined): void;
         readonly props: Readonly<P & WithBannerAlertStateProps> & Readonly<{
-            children?: import("react").ReactNode;
+            children?: import("react").ReactNode | undefined;
         }>;
         state: Readonly<{
-            expanded?: boolean | undefined;
-            show?: boolean | undefined;
+            expanded?: boolean;
+            show?: boolean;
         }>;
         refs: {
             [key: string]: import("react").ReactInstance;
         };
         shouldComponentUpdate?(nextProps: Readonly<P & WithBannerAlertStateProps>, nextState: Readonly<{
-            expanded?: boolean | undefined;
-            show?: boolean | undefined;
+            expanded?: boolean;
+            show?: boolean;
         }>, nextContext: any): boolean;
         componentDidCatch?(error: Error, errorInfo: import("react").ErrorInfo): void;
         getSnapshotBeforeUpdate?(prevProps: Readonly<P & WithBannerAlertStateProps>, prevState: Readonly<{
-            expanded?: boolean | undefined;
-            show?: boolean | undefined;
-        }>): any;
+            expanded?: boolean;
+            show?: boolean;
+        }>): any | null;
         componentDidUpdate?(prevProps: Readonly<P & WithBannerAlertStateProps>, prevState: Readonly<{
-            expanded?: boolean | undefined;
-            show?: boolean | undefined;
+            expanded?: boolean;
+            show?: boolean;
         }>, snapshot?: any): void;
         componentWillMount?(): void;
         UNSAFE_componentWillMount?(): void;
         componentWillReceiveProps?(nextProps: Readonly<P & WithBannerAlertStateProps>, nextContext: any): void;
         UNSAFE_componentWillReceiveProps?(nextProps: Readonly<P & WithBannerAlertStateProps>, nextContext: any): void;
         componentWillUpdate?(nextProps: Readonly<P & WithBannerAlertStateProps>, nextState: Readonly<{
-            expanded?: boolean | undefined;
-            show?: boolean | undefined;
+            expanded?: boolean;
+            show?: boolean;
         }>, nextContext: any): void;
         UNSAFE_componentWillUpdate?(nextProps: Readonly<P & WithBannerAlertStateProps>, nextState: Readonly<{
-            expanded?: boolean | undefined;
-            show?: boolean | undefined;
+            expanded?: boolean;
+            show?: boolean;
         }>, nextContext: any): void;
     };
     displayName: string;

package/bpk-component-input/src/withOpenEvents.d.ts

@@ -35,10 +35,10 @@ declare const withOpenEvents: <P extends object>(WithOpenEventsInputComponent: C
         handleBlur: () => void;
         render(): ReactElement;
         context: any;
-        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<P & import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & Omit<EventHandlers, "aria-readonly" | "readOnly"> & WithOpenEventsProps>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
+        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<P & import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & Omit<EventHandlers, "aria-readonly" | "readOnly"> & WithOpenEventsProps>) => Pick<{}, K> | {} | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
         forceUpdate(callback?: (() => void) | undefined): void;
         readonly props: Readonly<P & import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & Omit<EventHandlers, "aria-readonly" | "readOnly"> & WithOpenEventsProps> & Readonly<{
-            children?: import("react").ReactNode;
+            children?: import("react").ReactNode | undefined;
         }>;
         state: Readonly<{}>;
         refs: {
@@ -48,7 +48,7 @@ declare const withOpenEvents: <P extends object>(WithOpenEventsInputComponent: C
         shouldComponentUpdate?(nextProps: Readonly<P & import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & Omit<EventHandlers, "aria-readonly" | "readOnly"> & WithOpenEventsProps>, nextState: Readonly<{}>, nextContext: any): boolean;
         componentWillUnmount?(): void;
         componentDidCatch?(error: Error, errorInfo: import("react").ErrorInfo): void;
-        getSnapshotBeforeUpdate?(prevProps: Readonly<P & import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & Omit<EventHandlers, "aria-readonly" | "readOnly"> & WithOpenEventsProps>, prevState: Readonly<{}>): any;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<P & import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & Omit<EventHandlers, "aria-readonly" | "readOnly"> & WithOpenEventsProps>, prevState: Readonly<{}>): any | null;
         componentDidUpdate?(prevProps: Readonly<P & import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & Omit<EventHandlers, "aria-readonly" | "readOnly"> & WithOpenEventsProps>, prevState: Readonly<{}>, snapshot?: any): void;
         componentWillMount?(): void;
         UNSAFE_componentWillMount?(): void;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const VARIANT: {
     onLight: string;
     onDark: string;

package/bpk-component-journey-arrow/src/BpkJourneyArrow.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export type Props = {
     /** the number of dot stops to display */
     stops?: number;

package/bpk-component-nudger/src/BpkConfigurableNudger.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { type CommonProps } from './common-types';
 type Props = CommonProps & {
     inputClassName?: string | null;

package/bpk-component-nudger/src/BpkNudger.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { type CommonProps } from './common-types';
 declare const BpkNudger: ({ buttonType, className, icon, id, subtitle, title, ...rest }: CommonProps) => JSX.Element;
 export default BpkNudger;

package/bpk-component-rtl-toggle/src/updateOnDirectionChange.d.ts

@@ -6,10 +6,10 @@ declare const updateOnDirectionChange: (EnhancedComponent: ComponentType<any> |
         onDirectionChange: () => void;
         render(): JSX.Element;
         context: any;
-        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<{}>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
+        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<{}>) => Pick<{}, K> | {} | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
         forceUpdate(callback?: (() => void) | undefined): void;
         readonly props: Readonly<{}> & Readonly<{
-            children?: import("react").ReactNode;
+            children?: import("react").ReactNode | undefined;
         }>;
         state: Readonly<{}>;
         refs: {
@@ -17,7 +17,7 @@ declare const updateOnDirectionChange: (EnhancedComponent: ComponentType<any> |
         };
         shouldComponentUpdate?(nextProps: Readonly<{}>, nextState: Readonly<{}>, nextContext: any): boolean;
         componentDidCatch?(error: Error, errorInfo: import("react").ErrorInfo): void;
-        getSnapshotBeforeUpdate?(prevProps: Readonly<{}>, prevState: Readonly<{}>): any;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<{}>, prevState: Readonly<{}>): any | null;
         componentDidUpdate?(prevProps: Readonly<{}>, prevState: Readonly<{}>, snapshot?: any): void;
         componentWillMount?(): void;
         UNSAFE_componentWillMount?(): void;
@@ -32,10 +32,10 @@ declare const updateOnDirectionChange: (EnhancedComponent: ComponentType<any> |
         onDirectionChange: () => void;
         render(): JSX.Element;
         context: any;
-        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<{}>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
+        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<{}>) => Pick<{}, K> | {} | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
         forceUpdate(callback?: (() => void) | undefined): void;
         readonly props: Readonly<{}> & Readonly<{
-            children?: import("react").ReactNode;
+            children?: import("react").ReactNode | undefined;
         }>;
         state: Readonly<{}>;
         refs: {
@@ -43,7 +43,7 @@ declare const updateOnDirectionChange: (EnhancedComponent: ComponentType<any> |
         };
         shouldComponentUpdate?(nextProps: Readonly<{}>, nextState: Readonly<{}>, nextContext: any): boolean;
         componentDidCatch?(error: Error, errorInfo: import("react").ErrorInfo): void;
-        getSnapshotBeforeUpdate?(prevProps: Readonly<{}>, prevState: Readonly<{}>): any;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<{}>, prevState: Readonly<{}>): any | null;
         componentDidUpdate?(prevProps: Readonly<{}>, prevState: Readonly<{}>, snapshot?: any): void;
         componentWillMount?(): void;
         UNSAFE_componentWillMount?(): void;

package/bpk-component-scrollable-calendar/src/BpkScrollableCalendar.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 declare const _default: {
     new (props: Omit<import("../../bpk-component-calendar/src/composeCalendar").Props & import("../../bpk-component-calendar/src/BpkCalendarContainer").Props, keyof {
         onDateClick: ((date: Date) => void) | null;
@@ -47,13 +46,13 @@ declare const _default: {
             maxDate: Date;
         }> & {
             [rest: string]: any;
-        }>) => {
+        }>) => Pick<{
             preventKeyboardFocus: boolean;
             focusedDate: Date;
-        } | Pick<{
+        }, K> | {
             preventKeyboardFocus: boolean;
             focusedDate: Date;
-        }, K> | null) | Pick<{
+        } | null) | Pick<{
             preventKeyboardFocus: boolean;
             focusedDate: Date;
         }, K> | null, callback?: (() => void) | undefined): void;
@@ -67,7 +66,7 @@ declare const _default: {
         }> & {
             [rest: string]: any;
         }> & Readonly<{
-            children?: import("react").ReactNode;
+            children?: import("react").ReactNode | undefined;
         }>;
         state: Readonly<{
             preventKeyboardFocus: boolean;
@@ -102,7 +101,7 @@ declare const _default: {
         }>, prevState: Readonly<{
             preventKeyboardFocus: boolean;
             focusedDate: Date;
-        }>): any;
+        }>): any | null;
         componentDidUpdate?(prevProps: Readonly<Omit<import("../../bpk-component-calendar/src/composeCalendar").Props & import("../../bpk-component-calendar/src/BpkCalendarContainer").Props, keyof {
             onDateClick: ((date: Date) => void) | null;
             onDateKeyDown: ((event: KeyboardEvent) => void) | null;

package/bpk-component-scrollable-calendar/src/BpkScrollableCalendarDate.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { BpkCalendarDateProps } from '../../bpk-component-calendar';
 type Props = Partial<BpkCalendarDateProps> & {
     date: Date;

package/bpk-component-skeleton/src/BpkBaseSkeleton.d.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 type Props = {
     skeletonStyle: string;
     styleObj?: {

package/bpk-component-skeleton/src/BpkBaseSkeleton.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { CUSTOM_SIZE_TYPE } from './common-types';
 type Props = {
     skeletonStyle: string;

package/bpk-component-skeleton/src/BpkSkeleton.d.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { ComponentProps } from './common-types';
 declare const BpkSkeleton: (props: ComponentProps) => JSX.Element;
 export default BpkSkeleton;

package/bpk-component-skeleton/src/BpkSkeleton.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { ComponentProps } from './common-types';
 declare const BpkSkeleton: (props: ComponentProps) => JSX.Element;
 export default BpkSkeleton;

package/bpk-component-slider/src/BpkSlider.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export type Props = {
     max: number;
     min: number;

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

@@ -0,0 +1,3 @@
+import BpkSnippet, { BODY_STYLE, BUTTON_STYLE, DESKTOP_LAYOUT, HEADLINE_STYLE, IMAGE_ORIENTATION } from './src/BpkSnippet';
+export default BpkSnippet;
+export { BODY_STYLE, BUTTON_STYLE, DESKTOP_LAYOUT, HEADLINE_STYLE, IMAGE_ORIENTATION, };

package/bpk-component-snippet/index.js

@@ -0,0 +1,21 @@
+/*
+ * 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 BpkSnippet, { BODY_STYLE, BUTTON_STYLE, DESKTOP_LAYOUT, HEADLINE_STYLE, IMAGE_ORIENTATION } from "./src/BpkSnippet";
+export default BpkSnippet;
+export { BODY_STYLE, BUTTON_STYLE, DESKTOP_LAYOUT, HEADLINE_STYLE, IMAGE_ORIENTATION };

package/bpk-component-snippet/src/BpkSnippet.d.ts

@@ -0,0 +1,48 @@
+import type { MouseEvent } from 'react';
+export declare const BODY_STYLE: {
+    readonly bodyDefault: "body-default";
+    readonly bodyLongform: "body-longform";
+};
+export declare const BUTTON_STYLE: {
+    readonly primary: "primary";
+    readonly featured: "featured";
+};
+export declare const HEADLINE_STYLE: {
+    readonly heading1: "heading-1";
+    readonly heading2: "heading-2";
+    readonly heading3: "heading-3";
+    readonly heading4: "heading-4";
+    readonly heading5: "heading-5";
+    readonly hero1: "hero-1";
+    readonly hero2: "hero-2";
+    readonly hero3: "hero-3";
+    readonly hero4: "hero-4";
+    readonly hero5: "hero-5";
+};
+export declare const DESKTOP_LAYOUT: {
+    readonly imageLeft: "imageLeft";
+    readonly imageRight: "imageRight";
+    readonly vertical: "vertical";
+};
+export declare const IMAGE_ORIENTATION: {
+    readonly landscape: "landscape";
+    readonly portrait: "portrait";
+    readonly square: "square";
+};
+export type Props = {
+    src: string;
+    altText: string;
+    headline?: string | null;
+    subheading?: string | null;
+    bodyText?: string | null;
+    buttonText?: string | null;
+    bodyStyle?: (typeof BODY_STYLE)[keyof typeof BODY_STYLE];
+    buttonStyle?: (typeof BUTTON_STYLE)[keyof typeof BUTTON_STYLE];
+    headlineStyle?: (typeof HEADLINE_STYLE)[keyof typeof HEADLINE_STYLE];
+    desktopLayout?: (typeof DESKTOP_LAYOUT)[keyof typeof DESKTOP_LAYOUT];
+    imageOrientation?: (typeof IMAGE_ORIENTATION)[keyof typeof IMAGE_ORIENTATION];
+    imageRadius?: boolean;
+    onClick?: (event: MouseEvent<HTMLButtonElement & HTMLAnchorElement>) => void;
+};
+declare const BpkSnippet: ({ altText, bodyStyle, bodyText, buttonStyle, buttonText, desktopLayout, headline, headlineStyle, imageOrientation, imageRadius, onClick, src, subheading, }: Props) => JSX.Element;
+export default BpkSnippet;

package/bpk-component-snippet/src/BpkSnippet.js

@@ -0,0 +1,131 @@
+/*
+ * 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 BpkBreakpoint, { BREAKPOINTS } from "../../bpk-component-breakpoint";
+import { BpkButtonV2, BUTTON_TYPES } from "../../bpk-component-button";
+import BpkImage, { BORDER_RADIUS_STYLES, withLazyLoading } from "../../bpk-component-image";
+import BpkText, { TEXT_STYLES } from "../../bpk-component-text/src/BpkText";
+import { cssModules } from "../../bpk-react-utils";
+import STYLES from "./BpkSnippet.module.css";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const getClassName = cssModules(STYLES);
+export const BODY_STYLE = {
+  bodyDefault: TEXT_STYLES.bodyDefault,
+  bodyLongform: TEXT_STYLES.bodyLongform
+};
+export const BUTTON_STYLE = {
+  primary: BUTTON_TYPES.primary,
+  featured: BUTTON_TYPES.featured
+};
+export const HEADLINE_STYLE = {
+  heading1: TEXT_STYLES.heading1,
+  heading2: TEXT_STYLES.heading2,
+  heading3: TEXT_STYLES.heading3,
+  heading4: TEXT_STYLES.heading4,
+  heading5: TEXT_STYLES.heading5,
+  hero1: TEXT_STYLES.hero1,
+  hero2: TEXT_STYLES.hero2,
+  hero3: TEXT_STYLES.hero3,
+  hero4: TEXT_STYLES.hero4,
+  hero5: TEXT_STYLES.hero5
+};
+export const DESKTOP_LAYOUT = {
+  imageLeft: 'imageLeft',
+  imageRight: 'imageRight',
+  vertical: 'vertical'
+};
+export const IMAGE_ORIENTATION = {
+  landscape: 'landscape',
+  portrait: 'portrait',
+  square: 'square'
+};
+const documentIfExists = typeof window !== 'undefined' ? document : null;
+const LazyLoadedImage = withLazyLoading(BpkImage, documentIfExists);
+const getImageAspectRatio = imageOrientation => {
+  let imageAspectRatio;
+  switch (imageOrientation) {
+    case 'landscape':
+      imageAspectRatio = 3 / 2;
+      break;
+    case 'square':
+      imageAspectRatio = 1;
+      break;
+    case 'portrait':
+      imageAspectRatio = 5 / 7;
+      break;
+    default:
+      imageAspectRatio = 3 / 2;
+      break;
+  }
+  return imageAspectRatio;
+};
+const BpkSnippet = ({
+  altText,
+  bodyStyle = BODY_STYLE.bodyDefault,
+  bodyText,
+  buttonStyle = BUTTON_STYLE.primary,
+  buttonText,
+  desktopLayout = DESKTOP_LAYOUT.imageLeft,
+  headline,
+  headlineStyle = HEADLINE_STYLE.hero5,
+  imageOrientation,
+  imageRadius = true,
+  onClick,
+  src,
+  subheading
+}) => /*#__PURE__*/_jsx(BpkBreakpoint, {
+  query: BREAKPOINTS.MOBILE,
+  children: isMobile => /*#__PURE__*/_jsxs("div", {
+    className: getClassName('bpk-snippet', desktopLayout === 'imageRight' && 'bpk-snippet--row-reverse', desktopLayout === 'vertical' && 'bpk-snippet--vertical'),
+    children: [/*#__PURE__*/_jsx("div", {
+      className: getClassName('bpk-snippet--image', desktopLayout === 'vertical' ? 'bpk-snippet--vertical--container' : 'bpk-snippet--container'),
+      children: /*#__PURE__*/_jsx(LazyLoadedImage, {
+        altText: altText,
+        aspectRatio: getImageAspectRatio(imageOrientation),
+        borderRadiusStyle: imageRadius ? BORDER_RADIUS_STYLES.sm : BORDER_RADIUS_STYLES.none,
+        src: src
+      })
+    }), /*#__PURE__*/_jsxs("div", {
+      className: desktopLayout === 'vertical' ? getClassName('bpk-snippet--vertical--container', 'bpk-snippet--vertical--content') : getClassName('bpk-snippet--container', 'bpk-snippet--content'),
+      children: [headline && /*#__PURE__*/_jsx("div", {
+        className: getClassName('bpk-snippet--headline'),
+        children: /*#__PURE__*/_jsx(BpkText, {
+          textStyle: isMobile ? HEADLINE_STYLE.heading4 : headlineStyle,
+          children: headline
+        })
+      }), subheading && /*#__PURE__*/_jsx("div", {
+        className: getClassName('bpk-snippet--subheading'),
+        children: /*#__PURE__*/_jsx(BpkText, {
+          textStyle: TEXT_STYLES.subheading,
+          children: subheading
+        })
+      }), bodyText && /*#__PURE__*/_jsx("div", {
+        className: getClassName('bpk-snippet--bodyText'),
+        children: /*#__PURE__*/_jsx(BpkText, {
+          textStyle: isMobile ? BODY_STYLE.bodyDefault : bodyStyle,
+          children: bodyText
+        })
+      }), buttonText && onClick && /*#__PURE__*/_jsx(BpkButtonV2, {
+        type: buttonStyle,
+        onClick: onClick,
+        children: buttonText
+      })]
+    })]
+  })
+});
+export default BpkSnippet;

package/bpk-component-snippet/src/BpkSnippet.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-snippet{display:flex;flex-direction:row;align-items:center}@media(max-width: 48rem){.bpk-snippet{flex-direction:column;gap:1rem}}.bpk-snippet--row-reverse{flex-direction:row-reverse}@media(max-width: 48rem){.bpk-snippet--row-reverse{flex-direction:column;gap:1rem}}.bpk-snippet--vertical{flex-direction:column;gap:1rem}.bpk-snippet--vertical--container{width:100%}.bpk-snippet--vertical--content{padding:0}.bpk-snippet--container{width:50%}@media(max-width: 48rem){.bpk-snippet--container{width:100%}}.bpk-snippet--image img{height:100%;object-fit:cover}.bpk-snippet--content{display:flex;padding:4rem;flex-direction:column;justify-content:center;align-items:flex-start}@media(max-width: 48rem){.bpk-snippet--content{padding:0}}.bpk-snippet--headline,.bpk-snippet--subheading,.bpk-snippet--bodyText{padding-bottom:1rem}@media(max-width: 48rem){.bpk-snippet--headline,.bpk-snippet--subheading,.bpk-snippet--bodyText{padding-bottom:.5rem}}

package/bpk-component-spinner/src/BpkExtraLargeSpinner.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import PropTypes from 'prop-types';
 import type { SpinnerTypes } from './spinnerTypes';
 type Props = {

package/bpk-component-spinner/src/BpkLargeSpinner.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import PropTypes from 'prop-types';
 import type { SpinnerTypes } from './spinnerTypes';
 type Props = {

package/bpk-component-spinner/src/BpkSpinner.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import PropTypes from 'prop-types';
 import type { SpinnerTypes } from './spinnerTypes';
 type Props = {

package/bpk-component-split-input/src/BpkInputField.js

@@ -37,6 +37,7 @@ class BpkInputField extends Component {
       id,
       index,
       label,
+      name,
       value,
       ...rest
     } = this.props;
@@ -51,6 +52,7 @@ class BpkInputField extends Component {
           this.input = input;
         },
         value: value || '',
+        name: name || '',
         ...rest
       })
     }, index);
@@ -61,7 +63,8 @@ BpkInputField.propTypes = {
   label: PropTypes.string.isRequired,
   value: PropTypes.string,
   focus: PropTypes.bool.isRequired,
-  index: PropTypes.number.isRequired
+  index: PropTypes.number.isRequired,
+  name: PropTypes.string
 };
 BpkInputField.defaultProps = {
   value: ''

package/bpk-component-split-input/src/BpkSplitInput.js

@@ -188,7 +188,7 @@ class BpkSplitInput extends Component {
         focus: focusedInput === index,
         id: `${id}-${index}`,
         label: label,
-        name: name,
+        name: `${name}-${index}`,
         type: type,
         large: large,
         value: inputValue && inputValue[index],

package/bpk-component-swap-button/src/BpkSwapButton.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const SWAPBUTTON_STYLES: {
     surfaceContrast: string;
     canvasDefault: string;

package/bpk-react-utils/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { BpkDialogWrapper } from './src/BpkDialogWrapper/BpkDialogWrapper';
 import Portal from './src/Portal';
 import TransitionInitialMount from './src/TransitionInitialMount';
@@ -16,24 +15,24 @@ declare const _default: {
         appearClassName: string;
         appearActiveClassName: string;
         transitionTimeout: number;
-        children: import("react").ReactNode;
+        children: string | import("react").ReactNode;
     }) => JSX.Element;
     cssModules: (styles?: {
         [key: string]: any;
-    }) => (...classNames: (string | number | boolean | {} | null | undefined)[]) => string;
+    }) => (...classNames: Array<string | boolean | number | {} | null | undefined>) => string;
     deprecated: any;
     withDefaultProps: (WrappedComponent: import("react").ComponentType<any>, defaultProps: {
         [rest: string]: any;
-        className?: string | undefined;
+        className?: string;
     }) => {
         ({ children, className: innerClassName, ...rest }: {
             [rest: string]: any;
-            children?: import("react").ReactNode;
-            className?: string | null | undefined;
+            children?: import("react").ReactNode | string;
+            className?: string | null;
         }): JSX.Element;
         displayName: string;
     };
-    wrapDisplayName: (Component: string | import("react").ComponentType<any> | null, hoc: string) => string;
+    wrapDisplayName: (Component: import("react").ComponentType<any> | string | null, hoc: string) => string;
     isDeviceIphone: () => boolean;
     isDeviceIpad: () => boolean;
     isDeviceIos: () => boolean;