@skyscanner/backpack-web 34.16.0 → 35.0.0

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,6 +36,7 @@ class BpkInputField extends Component {
       this.input.select();
     }
   }
+  input = null;
   render() {
     const {
       focus,
@@ -46,27 +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 || '',
-        name: name || '',
+        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,
-  name: PropTypes.string
-};
-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";
@@ -22,15 +23,13 @@ import InputField from "./BpkInputField";
 import STYLES from "./BpkSplitInput.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
-
-// keyCode constants
-const BACKSPACE = 8;
-const LEFT_ARROW = 37;
-const RIGHT_ARROW = 39;
-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 = {
@@ -42,11 +41,8 @@ class BpkSplitInput extends Component {
     this.setState({
       inputValue: input
     });
-    const {
-      onChange
-    } = this.props;
     const value = input.join('');
-    onChange(value);
+    this.props.onInputChange(value);
   };
   updateInputValue = value => {
     const {
@@ -83,8 +79,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 +128,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 +175,8 @@ class BpkSplitInput extends Component {
       large,
       name,
       placeholder,
-      type
+      type,
+      ...rest
     } = this.props;
     const inputs = [];
     for (let index = 0; index < inputLength; index += 1) {
@@ -197,7 +194,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 +207,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

@@ -9,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-switch/index.d.ts

@@ -0,0 +1,5 @@
+import BpkSwitch, { type Props as BpkSwitchProps } from './src/BpkSwitch';
+import themeAttributes from './src/themeAttributes';
+export type { BpkSwitchProps };
+export { themeAttributes };
+export default BpkSwitch;

package/bpk-component-switch/src/BpkSwitch.d.ts

@@ -0,0 +1,8 @@
+export type Props = {
+    ariaLabel: string;
+    className?: string | null;
+    small?: boolean;
+    [rest: string]: any;
+};
+declare const BpkSwitch: ({ ariaLabel, className, small, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export default BpkSwitch;

package/bpk-component-switch/src/BpkSwitch.js

@@ -14,43 +14,30 @@
  * 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 { cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkSwitch.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
-const BpkSwitch = props => {
-  const {
-    className,
-    label,
-    small,
-    ...rest
-  } = props;
+const BpkSwitch = ({
+  ariaLabel,
+  className = null,
+  small = false,
+  ...rest
+}) => {
   const switchClassNames = getClassName('bpk-switch__switch', small && 'bpk-switch__switch--small');
   return /*#__PURE__*/_jsxs("label", {
     className: getClassName('bpk-switch', className),
     children: [/*#__PURE__*/_jsx("input", {
       type: "checkbox",
       className: getClassName('bpk-switch__checkbox'),
-      "aria-label": label,
+      "aria-label": ariaLabel,
       ...rest
-    }), /*#__PURE__*/_jsx("span", {
-      "aria-hidden": true,
-      className: getClassName('bpk-switch__label'),
-      children: label
     }), /*#__PURE__*/_jsx("span", {
       "aria-hidden": true,
       className: switchClassNames
     })]
   });
 };
-BpkSwitch.propTypes = {
-  label: PropTypes.node.isRequired,
-  className: PropTypes.string,
-  small: PropTypes.bool
-};
-BpkSwitch.defaultProps = {
-  className: null,
-  small: false
-};
 export default BpkSwitch;

package/bpk-component-switch/src/BpkSwitch.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-switch{position:relative;display:flex;align-items:center}.bpk-switch__checkbox{position:absolute;opacity:0}.bpk-switch__checkbox:checked~.bpk-switch__switch{background:#0062e3;background:var(--bpk-switch-checked-color, rgb(0, 98, 227))}.bpk-switch__checkbox:checked~.bpk-switch__switch::before{left:1.375rem}.bpk-switch__label{line-height:2rem;margin-inline-end:.5rem}.bpk-switch__switch{position:relative;float:right;display:block;min-width:3.25rem;height:2rem;transition:background 200ms linear;border-radius:1rem;background:rgba(0,0,0,.2);cursor:pointer}.bpk-switch__switch::before{position:absolute;top:.125rem;left:.125rem;content:"";display:block;width:1.75rem;height:1.75rem;transition:left 200ms ease-out;border-radius:50%;background:#fff;box-shadow:0px 1px 3px 0px rgba(37,32,31,.3)}.bpk-switch__switch--small{min-width:2.5rem;height:1.25rem}.bpk-switch__switch--small::before{width:1rem;height:1rem}
+.bpk-switch{position:relative;display:flex;align-items:center}.bpk-switch__checkbox{position:absolute;opacity:0}.bpk-switch__checkbox:checked~.bpk-switch__switch{background:#0062e3;background:var(--bpk-switch-checked-color, rgb(0, 98, 227))}.bpk-switch__checkbox:checked~.bpk-switch__switch::before{left:1.375rem}.bpk-switch__switch{position:relative;float:right;display:block;min-width:3.25rem;height:2rem;transition:background 200ms linear;border-radius:1rem;background:rgba(0,0,0,.2);cursor:pointer}.bpk-switch__switch::before{position:absolute;top:.125rem;left:.125rem;content:"";display:block;width:1.75rem;height:1.75rem;transition:left 200ms ease-out;border-radius:50%;background:#fff;box-shadow:0px 1px 3px 0px rgba(37,32,31,.3)}.bpk-switch__switch--small{min-width:2.5rem;height:1.25rem}.bpk-switch__switch--small::before{width:1rem;height:1rem}

package/bpk-component-switch/src/themeAttributes.d.ts

@@ -0,0 +1,2 @@
+declare const _default: string[];
+export default _default;

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;

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

@@ -16,7 +16,7 @@ declare const _default: {
         appearActiveClassName: string;
         transitionTimeout: number;
         children: string | import("react").ReactNode;
-    }) => JSX.Element;
+    }) => import("react/jsx-runtime").JSX.Element;
     cssModules: (styles?: {
         [key: string]: any;
     }) => (...classNames: Array<string | boolean | number | {} | null | undefined>) => string;
@@ -29,7 +29,7 @@ declare const _default: {
             [rest: string]: any;
             children?: import("react").ReactNode | string;
             className?: string | null;
-        }): JSX.Element;
+        }): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     wrapDisplayName: (Component: import("react").ComponentType<any> | string | null, hoc: string) => string;
@@ -37,7 +37,7 @@ declare const _default: {
     isDeviceIpad: () => boolean;
     isDeviceIos: () => boolean;
     isRTL: () => boolean;
-    BpkDialogWrapper: ({ children, closeOnEscPressed, closeOnScrimClick, dialogClassName, exiting, id, isOpen, onClose, timeout, transitionClassNames, ...ariaProps }: import("./src/BpkDialogWrapper/BpkDialogWrapper").Props) => JSX.Element | null;
+    BpkDialogWrapper: ({ children, closeOnEscPressed, closeOnScrimClick, dialogClassName, exiting, id, isOpen, onClose, timeout, transitionClassNames, ...ariaProps }: import("./src/BpkDialogWrapper/BpkDialogWrapper").Props) => import("react/jsx-runtime").JSX.Element | null;
     setNativeValue: typeof setNativeValue;
 };
 export default _default;

package/bpk-react-utils/src/BpkDialogWrapper/BpkDialogWrapper.d.ts

@@ -25,5 +25,5 @@ export type Props = CommonProps & ({
 } | {
     ariaLabel: string;
 });
-export declare const BpkDialogWrapper: ({ children, closeOnEscPressed, closeOnScrimClick, dialogClassName, exiting, id, isOpen, onClose, timeout, transitionClassNames, ...ariaProps }: Props) => JSX.Element | null;
+export declare const BpkDialogWrapper: ({ children, closeOnEscPressed, closeOnScrimClick, dialogClassName, exiting, id, isOpen, onClose, timeout, transitionClassNames, ...ariaProps }: Props) => import("react/jsx-runtime").JSX.Element | null;
 export {};

package/bpk-react-utils/src/TransitionInitialMount.d.ts

@@ -5,5 +5,5 @@ type Props = {
     transitionTimeout: number;
     children: string | ReactNode;
 };
-declare const TransitionInitialMount: ({ appearActiveClassName, appearClassName, children, transitionTimeout, }: Props) => JSX.Element;
+declare const TransitionInitialMount: ({ appearActiveClassName, appearClassName, children, transitionTimeout, }: Props) => import("react/jsx-runtime").JSX.Element;
 export default TransitionInitialMount;

package/bpk-react-utils/src/nativeEventHandler.d.ts

@@ -1,2 +1,2 @@
-declare function setNativeValue(element: HTMLInputElement, value: string): void;
+declare function setNativeValue(element: HTMLInputElement, value: string | number, shouldDispatchChange?: boolean): void;
 export { setNativeValue };

package/bpk-react-utils/src/nativeEventHandler.js

@@ -20,16 +20,18 @@
 // This causes the elements to not emit events that would have been if they had been modified by the user directly.
 // In order to maintain the expected native behaviour of the input element, It's possible to call this function during an
 // "onEvent" handler and update the element value, together with updating react it's own state which isn't mapped to the elements value prop.
-function setNativeValue(element, value) {
+function setNativeValue(element, value, shouldDispatchChange = true) {
   const inputProto = window.HTMLInputElement.prototype;
   const descriptor = Object.getOwnPropertyDescriptor(inputProto, 'value');
   const setValue = descriptor.set;
   if (setValue) {
-    const event = new Event('change', {
-      bubbles: true
-    });
     setValue.call(element, value);
-    element.dispatchEvent(event);
+    if (shouldDispatchChange) {
+      const event = new Event('change', {
+        bubbles: true
+      });
+      element.dispatchEvent(event);
+    }
   }
 }
 

package/bpk-react-utils/src/withDefaultProps.d.ts

@@ -9,7 +9,7 @@ type DefaultProps = {
     [rest: string]: any;
 };
 declare const withDefaultProps: (WrappedComponent: ComponentType<any>, defaultProps: DefaultProps) => {
-    ({ children, className: innerClassName, ...rest }: Props): JSX.Element;
+    ({ children, className: innerClassName, ...rest }: Props): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default withDefaultProps;

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

@@ -3,18 +3,16 @@ import withScrimmedPortal from './src/withScrimmedPortal';
 export { withScrim, withScrimmedPortal };
 declare const _default: {
     withScrim: <P extends object>(WrappedComponent: import("react").ComponentType<P> | string) => {
-        new (props: (import("./src/withScrim").Props & Omit<P, "dialogRef">) | Readonly<import("./src/withScrim").Props & Omit<P, "dialogRef">>): {
+        new (props: import("./src/withScrim").Props & Omit<P, "dialogRef">): {
             dialogElement?: HTMLElement | null | undefined;
             componentDidMount(): void;
             componentWillUnmount(): void;
             dialogRef: (ref: HTMLElement | null | undefined) => void;
-            render(): JSX.Element;
-            context: any;
+            render(): import("react/jsx-runtime").JSX.Element;
+            context: unknown;
             setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<import("./src/withScrim").Props & Omit<P, "dialogRef">>) => Pick<{}, K> | {} | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
             forceUpdate(callback?: (() => void) | undefined): void;
-            readonly props: Readonly<import("./src/withScrim").Props & Omit<P, "dialogRef">> & Readonly<{
-                children?: import("react").ReactNode | undefined;
-            }>;
+            readonly props: Readonly<import("./src/withScrim").Props & Omit<P, "dialogRef">>;
             state: Readonly<{}>;
             refs: {
                 [key: string]: import("react").ReactInstance;
@@ -35,13 +33,11 @@ declare const _default: {
             componentDidMount(): void;
             componentWillUnmount(): void;
             dialogRef: (ref: HTMLElement | null | undefined) => void;
-            render(): JSX.Element;
-            context: any;
+            render(): import("react/jsx-runtime").JSX.Element;
+            context: unknown;
             setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<import("./src/withScrim").Props & Omit<P, "dialogRef">>) => Pick<{}, K> | {} | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
             forceUpdate(callback?: (() => void) | undefined): void;
-            readonly props: Readonly<import("./src/withScrim").Props & Omit<P, "dialogRef">> & Readonly<{
-                children?: import("react").ReactNode | undefined;
-            }>;
+            readonly props: Readonly<import("./src/withScrim").Props & Omit<P, "dialogRef">>;
             state: Readonly<{}>;
             refs: {
                 [key: string]: import("react").ReactInstance;

package/bpk-scrim-utils/src/BpkScrim.d.ts

@@ -2,5 +2,5 @@ import type { SyntheticEvent } from 'react';
 type Props = {
     onClose?: (e?: SyntheticEvent) => void | null;
 };
-declare const BpkScrim: ({ onClose }: Props) => JSX.Element;
+declare const BpkScrim: ({ onClose }: Props) => import("react/jsx-runtime").JSX.Element;
 export default BpkScrim;

package/bpk-scrim-utils/src/withScrim.d.ts

@@ -21,18 +21,16 @@ export type Props = {
     [rest: string]: any;
 };
 declare const withScrim: <P extends object>(WrappedComponent: ComponentType<P> | string) => {
-    new (props: (Props & Omit<P, "dialogRef">) | Readonly<Props & Omit<P, "dialogRef">>): {
+    new (props: Props & Omit<P, "dialogRef">): {
         dialogElement?: HTMLElement | null | undefined;
         componentDidMount(): void;
         componentWillUnmount(): void;
         dialogRef: (ref: HTMLElement | null | undefined) => void;
-        render(): JSX.Element;
-        context: any;
+        render(): import("react/jsx-runtime").JSX.Element;
+        context: unknown;
         setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<Props & Omit<P, "dialogRef">>) => Pick<{}, K> | {} | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
         forceUpdate(callback?: (() => void) | undefined): void;
-        readonly props: Readonly<Props & Omit<P, "dialogRef">> & Readonly<{
-            children?: import("react").ReactNode | undefined;
-        }>;
+        readonly props: Readonly<Props & Omit<P, "dialogRef">>;
         state: Readonly<{}>;
         refs: {
             [key: string]: import("react").ReactInstance;
@@ -53,13 +51,11 @@ declare const withScrim: <P extends object>(WrappedComponent: ComponentType<P> |
         componentDidMount(): void;
         componentWillUnmount(): void;
         dialogRef: (ref: HTMLElement | null | undefined) => void;
-        render(): JSX.Element;
-        context: any;
+        render(): import("react/jsx-runtime").JSX.Element;
+        context: unknown;
         setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<Props & Omit<P, "dialogRef">>) => Pick<{}, K> | {} | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
         forceUpdate(callback?: (() => void) | undefined): void;
-        readonly props: Readonly<Props & Omit<P, "dialogRef">> & Readonly<{
-            children?: import("react").ReactNode | undefined;
-        }>;
+        readonly props: Readonly<Props & Omit<P, "dialogRef">>;
         state: Readonly<{}>;
         refs: {
             [key: string]: import("react").ReactInstance;

package/bpk-scrim-utils/src/withScrimmedPortal.d.ts

@@ -3,5 +3,5 @@ import type { Props as ScrimProps } from './withScrim';
 export type Props = ScrimProps & {
     renderTarget?: (() => HTMLElement | null) | null;
 };
-declare const withScrimmedPortal: (WrappedComponent: ComponentType<ScrimProps>) => ({ renderTarget, ...rest }: Props) => JSX.Element;
+declare const withScrimmedPortal: (WrappedComponent: ComponentType<ScrimProps>) => ({ renderTarget, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
 export default withScrimmedPortal;