@skyscanner/backpack-web 34.15.1 → 34.16.0-preminor.2

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,19 +1,8 @@
-/// <reference types="react" />
-import PropTypes from 'prop-types';
 import type { SpinnerTypes } from './spinnerTypes';
 type Props = {
-    type: SpinnerTypes;
-    className?: string;
-};
-declare const BpkExtraLargeSpinner: {
-    (props: Props): JSX.Element;
-    propTypes: {
-        type: PropTypes.Requireable<string>;
-        className: PropTypes.Requireable<string>;
-    };
-    defaultProps: {
-        type: "dark";
-        className: null;
-    };
+    type?: SpinnerTypes;
+    className?: string | null;
+    [rest: string]: any;
 };
+declare const BpkExtraLargeSpinner: ({ className, type, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
 export default BpkExtraLargeSpinner;

package/bpk-component-spinner/src/BpkExtraLargeSpinner.js

@@ -16,8 +16,6 @@ import React from "react";
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
-import PropTypes from 'prop-types';
 var XlSpinner = function XlSpinner(props) {
   return /*#__PURE__*/_jsxs("svg", {
     ...props,
@@ -81,12 +79,11 @@ import SPINNER_TYPES from "./spinnerTypes";
 import STYLES from "./BpkSpinner.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
-const BpkExtraLargeSpinner = props => {
-  const {
-    className,
-    type,
-    ...rest
-  } = props;
+const BpkExtraLargeSpinner = ({
+  className = null,
+  type = SPINNER_TYPES.dark,
+  ...rest
+}) => {
   const classNames = getClassName('bpk-spinner', 'bpk-spinner--extra-large', `bpk-spinner--${type}`, className);
   return /*#__PURE__*/_jsx("span", {
     className: classNames,
@@ -95,12 +92,4 @@ const BpkExtraLargeSpinner = props => {
     })
   });
 };
-BpkExtraLargeSpinner.propTypes = {
-  type: PropTypes.oneOf(Object.keys(SPINNER_TYPES)),
-  className: PropTypes.string
-};
-BpkExtraLargeSpinner.defaultProps = {
-  type: SPINNER_TYPES.dark,
-  className: null
-};
 export default BpkExtraLargeSpinner;

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

@@ -1,22 +1,9 @@
-/// <reference types="react" />
-import PropTypes from 'prop-types';
 import type { SpinnerTypes } from './spinnerTypes';
 type Props = {
-    type: SpinnerTypes;
-    className?: string;
-    alignToButton: boolean;
-};
-declare const BpkLargeSpinner: {
-    (props: Props): JSX.Element;
-    propTypes: {
-        type: PropTypes.Requireable<string>;
-        className: PropTypes.Requireable<string>;
-        alignToButton: PropTypes.Requireable<boolean>;
-    };
-    defaultProps: {
-        type: "dark";
-        className: null;
-        alignToButton: boolean;
-    };
+    type?: SpinnerTypes;
+    className?: string | null;
+    alignToButton?: boolean;
+    [rest: string]: any;
 };
+declare const BpkLargeSpinner: ({ alignToButton, className, type, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
 export default BpkLargeSpinner;

package/bpk-component-spinner/src/BpkLargeSpinner.js

@@ -16,8 +16,6 @@ import React from "react";
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
-import PropTypes from 'prop-types';
 var LgSpinner = function LgSpinner(props) {
   return /*#__PURE__*/_jsxs("svg", {
     ...props,
@@ -81,13 +79,12 @@ import SPINNER_TYPES from "./spinnerTypes";
 import STYLES from "./BpkSpinner.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
-const BpkLargeSpinner = props => {
-  const {
-    alignToButton,
-    className,
-    type,
-    ...rest
-  } = props;
+const BpkLargeSpinner = ({
+  alignToButton = false,
+  className = null,
+  type = SPINNER_TYPES.dark,
+  ...rest
+}) => {
   const classNames = getClassName('bpk-spinner', 'bpk-spinner--large', `bpk-spinner--${type}`, alignToButton && 'bpk-spinner--align-to-large-button', className);
   return /*#__PURE__*/_jsx("span", {
     className: classNames,
@@ -96,14 +93,4 @@ const BpkLargeSpinner = props => {
     })
   });
 };
-BpkLargeSpinner.propTypes = {
-  type: PropTypes.oneOf(Object.keys(SPINNER_TYPES)),
-  className: PropTypes.string,
-  alignToButton: PropTypes.bool
-};
-BpkLargeSpinner.defaultProps = {
-  type: SPINNER_TYPES.dark,
-  className: null,
-  alignToButton: false
-};
 export default BpkLargeSpinner;

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

@@ -1,22 +1,9 @@
-/// <reference types="react" />
-import PropTypes from 'prop-types';
 import type { SpinnerTypes } from './spinnerTypes';
 type Props = {
-    type: SpinnerTypes;
-    className?: string;
-    alignToButton: boolean;
-};
-declare const BpkSpinner: {
-    (props: Props): JSX.Element;
-    propTypes: {
-        type: PropTypes.Requireable<string>;
-        className: PropTypes.Requireable<string>;
-        alignToButton: PropTypes.Requireable<boolean>;
-    };
-    defaultProps: {
-        type: "dark";
-        className: null;
-        alignToButton: boolean;
-    };
+    type?: SpinnerTypes;
+    className?: string | null;
+    alignToButton?: boolean;
+    [rest: string]: any;
 };
+declare const BpkSpinner: ({ alignToButton, className, type, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
 export default BpkSpinner;

package/bpk-component-spinner/src/BpkSpinner.js

@@ -16,8 +16,6 @@ import React from "react";
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
-import PropTypes from 'prop-types';
 var SmSpinner = function SmSpinner(props) {
   return /*#__PURE__*/_jsxs("svg", {
     ...props,
@@ -68,13 +66,12 @@ import SPINNER_TYPES from "./spinnerTypes";
 import STYLES from "./BpkSpinner.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
-const BpkSpinner = props => {
-  const {
-    alignToButton,
-    className,
-    type,
-    ...rest
-  } = props;
+const BpkSpinner = ({
+  alignToButton = false,
+  className = null,
+  type = SPINNER_TYPES.dark,
+  ...rest
+}) => {
   const classNames = getClassName('bpk-spinner', `bpk-spinner--${type}`, alignToButton && 'bpk-spinner--align-to-button', className);
   return /*#__PURE__*/_jsx("span", {
     className: classNames,
@@ -83,14 +80,4 @@ const BpkSpinner = props => {
     })
   });
 };
-BpkSpinner.propTypes = {
-  type: PropTypes.oneOf(Object.keys(SPINNER_TYPES)),
-  className: PropTypes.string,
-  alignToButton: PropTypes.bool
-};
-BpkSpinner.defaultProps = {
-  type: SPINNER_TYPES.dark,
-  className: null,
-  alignToButton: false
-};
 export default BpkSpinner;

package/bpk-component-split-input/src/BpkInputField.d.ts

@@ -0,0 +1,21 @@
+import { PureComponent } from 'react';
+export type Props = DefaultProps;
+type DefaultProps = {
+    id: string;
+    label: string;
+    value: string | number;
+    focus: boolean;
+    index: number;
+    name: string;
+    [key: string]: any;
+};
+declare class BpkInputField extends PureComponent<Props> {
+    static defaultProps: {
+        value: string;
+        name: string;
+    };
+    componentDidUpdate(prevProps: Props): void;
+    private input;
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+export default BpkInputField;

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

@@ -14,14 +14,19 @@
  * 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 PropTypes from 'prop-types';
-import { Component } from 'react';
+ */
+
+import { PureComponent } from 'react';
 import BpkInput from "../../bpk-component-input";
 import { cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkInputField.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
-class BpkInputField extends Component {
+class BpkInputField extends PureComponent {
+  static defaultProps = {
+    value: '',
+    name: ''
+  };
   componentDidUpdate(prevProps) {
     const {
       focus
@@ -31,12 +36,14 @@ class BpkInputField extends Component {
       this.input.select();
     }
   }
+  input = null;
   render() {
     const {
       focus,
       id,
       index,
       label,
+      name,
       value,
       ...rest
     } = this.props;
@@ -45,25 +52,16 @@ class BpkInputField extends Component {
       children: /*#__PURE__*/_jsx(BpkInput, {
         id: id,
         autoComplete: "off",
-        maxLength: "1",
+        name: name,
+        maxLength: 1,
         "aria-label": `${label} ${index}`,
         inputRef: input => {
           this.input = input;
         },
-        value: value || '',
+        value: value,
         ...rest
       })
     }, index);
   }
 }
-BpkInputField.propTypes = {
-  id: PropTypes.string.isRequired,
-  label: PropTypes.string.isRequired,
-  value: PropTypes.string,
-  focus: PropTypes.bool.isRequired,
-  index: PropTypes.number.isRequired
-};
-BpkInputField.defaultProps = {
-  value: ''
-};
 export default BpkInputField;

package/bpk-component-split-input/src/BpkSplitInput.d.ts

@@ -0,0 +1,44 @@
+import { Component } from 'react';
+import type { ChangeEvent, ClipboardEvent, FocusEvent, KeyboardEvent } from 'react';
+import { INPUT_TYPES } from '../../bpk-component-input';
+interface Props {
+    type?: string | number;
+    id: string;
+    label: string;
+    name: string;
+    inputLength?: number;
+    placeholder?: string;
+    onInputChange: (value: string | number) => void;
+    onSubmit: (value: string | number) => void;
+    large?: boolean;
+}
+interface State {
+    focusedInput: number;
+    inputValue: string[] | number[];
+}
+declare class BpkSplitInput extends Component<Props, State> {
+    static defaultProps: {
+        type: "number";
+        inputLength: number;
+        large: boolean;
+        placeholder: string;
+    };
+    constructor(props: Props);
+    onInputChange: (input: string[] | number[]) => void;
+    updateInputValue: (value: string | number) => void;
+    handleSubmit: () => void;
+    validateInput: (inputValue: string[] | number[]) => boolean;
+    isNumeric: () => boolean;
+    isInputValid: (value: string | number) => boolean;
+    focusInput: (inputIndex: number) => void;
+    focusNextInput: () => void;
+    focusPreviousInput: () => void;
+    handleOnPaste: (e: ClipboardEvent<HTMLInputElement>) => void;
+    handleOnKeyDown: (e: KeyboardEvent<HTMLInputElement>) => void;
+    handleOnChange: (e: ChangeEvent<HTMLInputElement>) => void;
+    handleOnFocus: (e: FocusEvent<HTMLInputElement>, index: number) => void;
+    renderInputs: () => import("react/jsx-runtime").JSX.Element[];
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+export default BpkSplitInput;
+export { INPUT_TYPES };

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

@@ -14,7 +14,8 @@
  * 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 PropTypes from 'prop-types';
+ */
+
 import { Component } from 'react';
 import { INPUT_TYPES } from "../../bpk-component-input";
 import { cssModules } from "../../bpk-react-utils";
@@ -31,22 +32,25 @@ const DELETE = 46;
 const SPACEBAR = 32;
 const ENTER = 13;
 class BpkSplitInput extends Component {
+  static defaultProps = {
+    type: INPUT_TYPES.number,
+    inputLength: 4,
+    large: true,
+    placeholder: ''
+  };
   constructor(props) {
     super(props);
     this.state = {
       focusedInput: 0,
-      inputValue: []
+      inputValue: Array(props.inputLength).fill('')
     };
   }
   onInputChange = input => {
     this.setState({
       inputValue: input
     });
-    const {
-      onChange
-    } = this.props;
     const value = input.join('');
-    onChange(value);
+    this.props.onInputChange(value);
   };
   updateInputValue = value => {
     const {
@@ -83,8 +87,8 @@ class BpkSplitInput extends Component {
   };
   isNumeric = () => this.props.type === INPUT_TYPES.number;
   isInputValid = value => {
-    const isTypeValid = this.isNumeric() ? /^\d$/.test(value) : typeof value === 'string';
-    return isTypeValid && value.trim().length === 1;
+    const isTypeValid = this.isNumeric() ? /^\d$/.test(`${value}`) : typeof value === 'string';
+    return isTypeValid && `${value}`.trim().length === 1;
   };
   focusInput = inputIndex => {
     const {
@@ -132,23 +136,23 @@ class BpkSplitInput extends Component {
     this.onInputChange(inputValue);
   };
   handleOnKeyDown = e => {
-    if (e.keyCode === BACKSPACE || e.key === 'Backspace') {
+    if (e.key === 'Backspace') {
       e.preventDefault();
       this.updateInputValue('');
       this.focusPreviousInput();
-    } else if (e.keyCode === DELETE || e.key === 'Delete') {
+    } else if (e.key === 'Delete') {
       e.preventDefault();
       this.updateInputValue('');
-    } else if (e.keyCode === LEFT_ARROW || e.key === 'Left' || e.key === 'ArrowLeft') {
+    } else if (e.key === 'Left' || e.key === 'ArrowLeft') {
       e.preventDefault();
       this.focusPreviousInput();
-    } else if (e.keyCode === RIGHT_ARROW || e.key === 'Right' || e.key === 'ArrowRight') {
+    } else if (e.key === 'Right' || e.key === 'ArrowRight') {
       e.preventDefault();
       this.focusNextInput();
-    } else if (e.keyCode === ENTER || e.key === 'Enter') {
+    } else if (e.key === 'Enter') {
       e.preventDefault();
       this.handleSubmit();
-    } else if (e.keyCode === SPACEBAR || e.key === ' ' || e.key === 'Spacebar' || e.key === 'Space') {
+    } else if (e.key === ' ' || e.key === 'Spacebar' || e.key === 'Space') {
       e.preventDefault();
     }
   };
@@ -179,7 +183,8 @@ class BpkSplitInput extends Component {
       large,
       name,
       placeholder,
-      type
+      type,
+      ...rest
     } = this.props;
     const inputs = [];
     for (let index = 0; index < inputLength; index += 1) {
@@ -188,7 +193,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],
@@ -197,7 +202,8 @@ class BpkSplitInput extends Component {
         onInput: this.handleOnChange,
         onKeyDown: this.handleOnKeyDown,
         onPaste: this.handleOnPaste,
-        onFocus: e => this.handleOnFocus(e, index)
+        onFocus: e => this.handleOnFocus(e, index),
+        ...rest
       }, index));
     }
     return inputs;
@@ -209,22 +215,5 @@ class BpkSplitInput extends Component {
     });
   }
 }
-BpkSplitInput.propTypes = {
-  type: PropTypes.oneOf([INPUT_TYPES.text, INPUT_TYPES.number]),
-  id: PropTypes.string.isRequired,
-  label: PropTypes.string.isRequired,
-  name: PropTypes.string.isRequired,
-  inputLength: PropTypes.number,
-  placeholder: PropTypes.string,
-  onChange: PropTypes.func.isRequired,
-  onSubmit: PropTypes.func.isRequired,
-  large: PropTypes.bool
-};
-BpkSplitInput.defaultProps = {
-  type: INPUT_TYPES.number,
-  inputLength: 4,
-  large: true,
-  placeholder: ''
-};
 export default BpkSplitInput;
 export { INPUT_TYPES };

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;
@@ -10,5 +9,5 @@ export type Props = {
     ariaLabel: string;
     swapButtonStyle?: SwapButtonStyle;
 };
-declare const BpkSwapButton: (props: Props) => JSX.Element;
+declare const BpkSwapButton: (props: Props) => import("react/jsx-runtime").JSX.Element;
 export default BpkSwapButton;

package/bpk-component-text/src/BpkText.d.ts

@@ -42,5 +42,5 @@ type Props = {
     id?: string;
     [rest: string]: any;
 };
-declare const BpkText: ({ children, className, tagName: TagName, textStyle, ...rest }: Props) => JSX.Element;
+declare const BpkText: ({ children, className, tagName: TagName, textStyle, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
 export default BpkText;

package/bpk-component-tooltip/src/BpkTooltip.d.ts

@@ -7,5 +7,5 @@ export type TooltipProps = {
     padded?: boolean;
     className?: string | null;
 };
-declare const BpkTooltip: ({ children, className, id, padded, type, ...rest }: TooltipProps) => JSX.Element;
+declare const BpkTooltip: ({ children, className, id, padded, type, ...rest }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
 export default BpkTooltip;

package/bpk-component-tooltip/src/BpkTooltipPortal.d.ts

@@ -49,6 +49,6 @@ declare class BpkTooltipPortal extends Component<Props, State> {
     beforeClose: (done: () => void | null) => void;
     openTooltip: () => void;
     closeTooltip: () => void;
-    render(): JSX.Element;
+    render(): import("react/jsx-runtime").JSX.Element;
 }
 export default BpkTooltipPortal;